fix: 修复隐藏字段在编辑界面显示的问题，修复多个 Markdown 编辑器不显示的问题

Author: chhpt

packages/admin/src/components/Fields/FieldContentEditor.tsx

@@ -11,13 +11,13 @@ const RichTextEditor = React.lazy(() => import('@/components/Fields/RichText'))
 const { TextArea } = Input
 const { Option } = Select
 
-const LazyMarkdownEditor: React.FC = (props: any) => (
+const LazyMarkdownEditor: React.FC<{ id: number }> = (props: any) => (
   <Suspense fallback={<Spin />}>
     <MarkdownEditor {...props} />
   </Suspense>
 )
 
-const LazyRichTextEditor: React.FC = (props: any) => (
+const LazyRichTextEditor: React.FC<{ id: number }> = (props: any) => (
   <Suspense fallback={<Spin />}>
     <RichTextEditor {...props} />
   </Suspense>
@@ -192,10 +192,10 @@ export function getFieldEditor(field: SchemaField, key: number) {
       )
       break
     case 'Markdown':
-      FieldEditor = <LazyMarkdownEditor key={key} />
+      FieldEditor = <LazyMarkdownEditor id={key} />
       break
     case 'RichText':
-      FieldEditor = <LazyRichTextEditor key={String(key)} />
+      FieldEditor = <LazyRichTextEditor id={key} />
       break
     case 'Connect':
       FieldEditor = <IConnectEditor field={field} />

packages/admin/src/components/Fields/Markdown.tsx

@@ -62,17 +62,17 @@ const getToolBarWithoutUpload = () => {
 const toolbar: any[] = WX_MP ? getToolBarWithoutUpload() : DefaultToolbar
 
 export const MarkdownEditor: React.FC<{
+  id: number
   value?: any
-  key: string
   onChange?: (...args: any) => void
 }> = (props) => {
-  const { value, key = 'default', onChange = (...args: any) => {} } = props
+  const { value, id = 'default', onChange = (...args: any) => {} } = props
 
   const authHeader = getAuthHeader()
 
   useEffect(() => {
     // eslint-disable-next-line
-    new VditorX(`${key}-editor`, {
+    new VditorX(`${id}-editor`, {
       value,
       toolbar,
       input: (text, html) => {
@@ -98,7 +98,7 @@ export const MarkdownEditor: React.FC<{
     })
   }, [authHeader?.['x-cloudbase-credentials']])
 
-  return <div id={`${key}-editor`} />
+  return <div id={`${id}-editor`} />
 }
 
 export default MarkdownEditor

packages/admin/src/components/Fields/RichText.tsx

@@ -8,10 +8,10 @@ import 'braft-editor/dist/index.css'
 
 const { Dragger } = Upload
 
-const RichText: React.FC<{ value?: any; key: string; onChange?: (...args: any) => void }> = (
+const RichText: React.FC<{ value?: any; id: number; onChange?: (...args: any) => void }> = (
   props
 ) => {
-  const { key = 'default', value = '欢迎使用富文本编辑器', onChange = (...args: any) => {} } = props
+  const { id = 'default', value = '欢迎使用富文本编辑器', onChange = (...args: any) => {} } = props
   const [editorState, setEditorState] = useState<any>()
 
   useEffect(() => {
@@ -42,7 +42,7 @@ const RichText: React.FC<{ value?: any; key: string; onChange?: (...args: any) =
   return (
     <div style={{ border: '1px solid #d1d1d1' }}>
       <BraftEditor
-        key={key}
+        key={id}
         value={editorState}
         onChange={(s) => {
           setEditorState(s)

packages/admin/src/pages/project/content/ContentEditor.tsx

@@ -76,7 +76,7 @@ const ContentEditor: React.FC = () => {
               )}
 
               {schema?.fields
-                ?.filter((_) => !_.isSystem)
+                ?.filter((_) => !_.isSystem && !_.isHidden)
                 .map((filed, index) => getFieldFormItem(filed, index))}
 
               <Form.Item>

packages/admin/src/pages/project/content/columns.ts

@@ -10,7 +10,7 @@ const hideInSearchType = ['File', 'Image', 'Array', 'Date', 'DateTime']
  * 获取表格 column 渲染配置
  */
 export const getTableColumns = (fields: SchemaField[] = []): ProColumns[] => {
-  // 用户自定义字段
+  // 用户自定义字段，过滤掉系统字段，重复字段
   const customFields = fields
     ?.filter((_) => !_.isSystem)
     ?.filter((field, i, arr) => field && arr.findIndex((_) => _.name === field.name) === i)

packages/admin/src/pages/project/schema/components/SchemaFieldEditor/SchemaFieldEdit.tsx

@@ -283,6 +283,7 @@ export const SchemaFieldEditorModal: React.FC<{
         {/* 特定字段的特殊属性 */}
         {SpecificAttributeFormItem}
 
+        {/* 必要字段 */}
         <Form.Item>
           <div className="form-item">
             <Form.Item style={{ marginBottom: 0 }}>
@@ -295,18 +296,20 @@ export const SchemaFieldEditorModal: React.FC<{
           </div>
         </Form.Item>
 
+        {/* 隐藏字段 */}
         <Form.Item>
           <div className="form-item">
             <Form.Item style={{ marginBottom: 0 }}>
               <Text>是否隐藏</Text>
               <Form.Item name="isHidden" valuePropName="checked" style={{ marginBottom: 0 }}>
                 <Switch />
               </Form.Item>
-              <Text type="secondary">在内容集合表格展示时隐藏该字段</Text>
+              <Text type="secondary">在内容集合表格展示、编辑内容时隐藏该字段</Text>
             </Form.Item>
           </div>
         </Form.Item>
 
+        {/* 排序字段 */}
         <Form.Item>
           <div className="form-item">
             <Form.Item style={{ marginBottom: 0 }}>