cx-chat 0.0.1

package/src/views/page-menus/model-metadata/manage/modal/table-submit-modal.tsx

@@ -0,0 +1,229 @@
+import type { CxModalRef } from '@cx-ui/modal/useCxModal'
+import { useCxModal } from '@cx-ui/modal/useCxModal'
+import { useToast } from '@/contexts/ToastContext'
+import { CxButtonAdd, CxForm, CxFormItem, CxInput, CxModal, CxTable, CxTabs } from '@cx-ui'
+import { forwardRef, useImperativeHandle, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  TABLE_SUBMIT_MODAL_WIDTH,
+  clonePart,
+  emptyColumn,
+  emptyForeignKey,
+  emptyIndex,
+  normalizeForeignKeyColumnsInput,
+  normalizeIndexColumnsInput,
+  tableSubmitModalShellStyles,
+  validateForeignKeyRows,
+  validateIndexRows,
+} from './components/table-schema'
+import type { Column, ForeignKey, Index, SchemaTableBrief, TableDetail } from './components/table-schema'
+import { useTableSubmitTabs } from './components/use-table-submit-tabs'
+
+// 表结构弹窗：menus.model_metadata.manage.* → locales/zh/menus/model-metadata/manage.ts
+
+export {
+  isEmptyForeignKeyRow,
+  isEmptyIndexRow,
+  normalizeFkColumnsForSubmit,
+  normalizeIndexColumnsForSubmit,
+  normalizeIndexColumnsInput,
+  validateForeignKeyRows,
+  validateForeignKeysInTables,
+  validateIndexRows,
+  validateIndexesInTables,
+} from './components/table-schema'
+
+const TableSubmitModal = forwardRef<CxModalRef, {}>(function TableSubmitModal(_props, ref) {
+  const { showToast } = useToast()
+  const { t } = useTranslation()
+  const [activeTab, setActiveTab] = useState('columns')
+  const [editColumns, setEditColumns] = useState<Column[]>([])
+  const [editIndexes, setEditIndexes] = useState<Index[]>([])
+  const [editForeignKeys, setEditForeignKeys] = useState<ForeignKey[]>([])
+  const [schemaTables, setSchemaTables] = useState<SchemaTableBrief[]>([])
+  const [editingTableKey, setEditingTableKey] = useState('')
+
+  const { columnsTabColumns, indexesTabColumns, foreignKeysTabColumns } = useTableSubmitTabs({
+    t,
+    editColumns,
+    setEditColumns,
+    editIndexes,
+    setEditIndexes,
+    editForeignKeys,
+    setEditForeignKeys,
+    schemaTables,
+    editingTableKey,
+  })
+
+  const modal = useCxModal({
+    onOpen: (payload) => {
+      setActiveTab('columns')
+      setSchemaTables(Array.isArray(payload.schemaTables) ? payload.schemaTables : [])
+      if (payload.data) {
+        modal.setFormData(payload.data)
+        setEditingTableKey(String(payload.data.tableName ?? ''))
+        setEditColumns(clonePart(payload.data.columns || []))
+        setEditIndexes(
+          (clonePart(payload.data.indexes || []) as Index[]).map((idx) => ({
+            ...idx,
+            indexColumns: normalizeIndexColumnsInput(idx.indexColumns),
+          })),
+        )
+        setEditForeignKeys(
+          (clonePart(payload.data.foreignKeys || []) as ForeignKey[]).map((fk) => ({
+            ...fk,
+            fkColumns: normalizeForeignKeyColumnsInput(fk.fkColumns),
+          })),
+        )
+        modal.form.setFieldsValue({
+          tableSchema: payload.data.tableSchema,
+          tableName: payload.data.tableName,
+          tableComment: payload.data.tableComment,
+          tableType: payload.data.tableType,
+        })
+      } else {
+        setEditColumns([])
+        setEditIndexes([])
+        setEditForeignKeys([])
+        setSchemaTables([])
+        setEditingTableKey('')
+      }
+    },
+  })
+
+  const { isOpen, form, close, open, opeType } = modal
+  const data = modal.formData as TableDetail | null
+  const modalTitle =
+    opeType === 'edit'
+      ? `${t('menus.model_metadata.manage.edit_table')}: ${data?.tableName || ''}` // 编辑表: 表名
+      : t('menus.model_metadata.manage.add_table_modal') // 新建表
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open,
+      close,
+    }),
+    [open, close],
+  )
+
+  const handleSave = async () => {
+    try {
+      await form.validateFields()
+      const ixErr = validateIndexRows(editIndexes)
+      if (ixErr) {
+        showToast(t(`menus.model_metadata.manage.rules.${ixErr}`), 'warning') // 索引校验（键→文案见 locales rules）
+        return
+      }
+      const fkErr = validateForeignKeyRows(editForeignKeys)
+      if (fkErr) {
+        showToast(t(`menus.model_metadata.manage.rules.${fkErr}`), 'warning') // 外键校验
+        return
+      }
+      const base = modal.formData as TableDetail | null | undefined
+      if (base) {
+        const values = form.getFieldsValue()
+        const updatedData: TableDetail = {
+          ...base,
+          ...values,
+          columns: editColumns,
+          indexes: editIndexes,
+          foreignKeys: editForeignKeys,
+        }
+        window.dispatchEvent(new CustomEvent('tableUpdated', { detail: updatedData }))
+      }
+      await close()
+    } catch (error) {
+      console.error('Validation failed:', error)
+    }
+  }
+
+  const tabItems = [
+    {
+      key: 'columns',
+      label: `${t('menus.model_metadata.manage.tab_columns')} (${editColumns.length})`, // Tab：字段
+      children: (
+        <div className="flex min-h-0 h-full flex-col">
+          <div className="min-h-0 flex-1 overflow-hidden rounded border border-gray-200 dark:border-gray-700">
+            <CxTable<Column> size="mini" autoScrollY minScrollY={120} columns={columnsTabColumns} dataSource={editColumns}
+              rowKey={(_, index) => String(index)} scroll={{ x: 844 }} />
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: 'indexes',
+      label: `${t('menus.model_metadata.manage.tab_indexes')} (${editIndexes.length})`, // Tab：索引
+      children: (
+        <div className="flex min-h-0 h-full flex-col">
+          <div className="min-h-0 flex-1 overflow-hidden rounded border border-gray-200 dark:border-gray-700">
+            <CxTable<Index> size="mini" autoScrollY minScrollY={120} columns={indexesTabColumns} dataSource={editIndexes}
+              rowKey={(_, index) => String(index)} scroll={{ x: 800 }} />
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: 'foreignKeys',
+      label: `${t('menus.model_metadata.manage.tab_foreignKeys')} (${editForeignKeys.length})`, // Tab：外键
+      children: (
+        <div className="flex min-h-0 h-full flex-col">
+          <div className="min-h-0 flex-1 overflow-hidden rounded border border-gray-200 dark:border-gray-700">
+            <CxTable<ForeignKey> size="mini" autoScrollY minScrollY={120} columns={foreignKeysTabColumns} dataSource={editForeignKeys}
+              rowKey={(_, index) => String(index)} scroll={{ x: 1108 }} />
+          </div>
+        </div>
+      ),
+    },
+  ]
+
+  const handleTabAddRow = () => {
+    if (activeTab === 'columns') setEditColumns((prev) => [...prev, emptyColumn()])
+    else if (activeTab === 'indexes') setEditIndexes((prev) => [...prev, emptyIndex()])
+    else setEditForeignKeys((prev) => [...prev, emptyForeignKey()])
+  }
+
+  return (
+    <CxModal title={modalTitle} isOpen={isOpen} onClose={close} onSubmit={handleSave}
+      modalConfig={{
+        width: TABLE_SUBMIT_MODAL_WIDTH,
+        styles: { ...tableSubmitModalShellStyles },
+        rootClassName: 'cx-modal-content-fill scroll',
+      }}>
+      <CxForm form={form} layout="vertical" className="flex h-full min-h-0 flex-1 flex-col gap-0 overflow-hidden">
+        <div className="shrink-0 border-b border-gray-200 pb-4 dark:border-gray-700">
+          <div className="grid grid-cols-1 gap-x-4 gap-y-0 md:grid-cols-3">
+            {/* fields.tableSchema / placeholders.tableSchema — 库 Schema */}
+            <CxFormItem label={t('menus.model_metadata.manage.fields.tableSchema')} name="tableSchema">
+              <CxInput placeholder={t('menus.model_metadata.manage.placeholders.tableSchema')} />
+            </CxFormItem>
+            {/* fields.tableName — 表名 */}
+            <CxFormItem label={t('menus.model_metadata.manage.fields.tableName')} name="tableName">
+              <CxInput placeholder={t('menus.model_metadata.manage.placeholders.tableName')} />
+            </CxFormItem>
+            {/* fields.tableType — 表类型 */}
+            <CxFormItem label={t('menus.model_metadata.manage.fields.tableType')} name="tableType">
+              <CxInput placeholder={t('menus.model_metadata.manage.placeholders.tableType')} />
+            </CxFormItem>
+            {/* fields.tableComment — 表注释 */}
+            <CxFormItem label={t('menus.model_metadata.manage.fields.tableComment')} name="tableComment" className="md:col-span-3">
+              <CxInput placeholder={t('menus.model_metadata.manage.placeholders.tableComment')} />
+            </CxFormItem>
+          </div>
+        </div>
+
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden pt-4">
+          {/* add_table_row — Tab 上「新增行」 */}
+          <CxTabs activeKey={activeTab} onChange={setActiveTab} items={tabItems}
+            tabBarExtraContent={<CxButtonAdd size="small" onClick={handleTabAddRow}>{t('menus.model_metadata.manage.add_table_row')}</CxButtonAdd>}
+            className="flex-1 flex min-h-0 flex-col [&_.ant-tabs-nav]:shrink-0 [&_.ant-tabs-content-holder]:min-h-0 [&_.ant-tabs-content-holder]:flex-1 [&_.ant-tabs-content]:h-full [&_.ant-tabs-tabpane]:h-full"
+          />
+        </div>
+      </CxForm>
+    </CxModal>
+  )
+})
+
+TableSubmitModal.displayName = 'TableSubmitModal'
+
+export default TableSubmitModal

package/src/views/page-menus/model-metadata/manage/submit.tsx

@@ -0,0 +1,31 @@
+import { useLocation, useParams } from 'react-router-dom'
+
+import ModelMetadataSubmitAddView from './components/submit-add'
+import ModelMetadataSubmitEditView from './components/submit-edit'
+
+/** 从路径解析编辑 id（菜单扁平路由下 useParams 可能拿不到 :id） */
+function resolveSubmitEditId(
+  paramId: string | undefined,
+  pathname: string,
+): string | undefined {
+  const fromParam = paramId != null && String(paramId).trim() !== '' ? String(paramId).trim() : undefined
+  if (fromParam) return decodeURIComponent(fromParam)
+  const m = pathname.match(/\/submit\/([^/]+)\/?$/)
+  if (!m?.[1]) return undefined
+  const fromPath = decodeURIComponent(m[1].trim())
+  return fromPath || undefined
+}
+
+/** 路由入口：`/submit` 新增，`/submit/:id` 编辑（明细 Tabs） */
+function ModelMetadataSubmitEntry() {
+  const { id: paramId } = useParams<{ id: string | undefined }>()
+  const { pathname } = useLocation()
+  const editId = resolveSubmitEditId(paramId, pathname)
+
+  if (editId) {
+    return <ModelMetadataSubmitEditView key={editId} metadataId={editId} />
+  }
+  return <ModelMetadataSubmitAddView />
+}
+
+export default ModelMetadataSubmitEntry

package/src/views/page-menus/model-metadata/role/index.tsx

@@ -0,0 +1,207 @@
+import { DetailLink } from '@/components/common/detail-link'
+import { useAuth } from '@/contexts/AuthContext'
+import { ALIGN } from '@/meta'
+import {
+  deleteModelMetadataRoleAPI,
+  getModelMetadataRolePageAPI,
+} from '@api/menus/model-metadata/role'
+import ListPageView, { createListPageConfig } from '@components/table-view'
+import { CxButton, CxEmptyState } from '@cx-ui'
+import { KeyRound, UserPlus } from 'lucide-react'
+import { useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import DetailModal from './modal/detail-modal'
+import RoleAssignUsersModal from './modal/role-assign-users-modal'
+import RolePermissionModal from './modal/role-permission-modal'
+import SubmitModal from './modal/submit-modal'
+
+const useListPageConfig = createListPageConfig({
+  tableAPI: getModelMetadataRolePageAPI,
+  deleteAPI: deleteModelMetadataRoleAPI,
+  pageInfo: {
+    title: 'menus.model_metadata.role.page_title',
+    subTitle: 'menus.model_metadata.role.page_subtitle',
+  },
+  searchFields: [
+    {
+      prop: 'name',
+      label: 'menus.model_metadata.role.fields.name',
+      placeholder: 'menus.model_metadata.role.search_name_placeholder',
+    },
+    {
+      prop: 'code',
+      label: 'menus.model_metadata.role.fields.code',
+      placeholder: 'menus.model_metadata.role.search_code_placeholder',
+    }
+  ],
+  listQuery: { sort: 'updateTime', order: 'desc' },
+  submitAction: {
+    permission: 'model-metadata-role:add',
+    submitType: 'modal',
+    labelKey: 'menus.model_metadata.role.add',
+  },
+  detailAction: {
+    detailType: 'modal',
+    labelKey: 'common.view',
+    permission: 'model-metadata-role:detail',
+  },
+  deleteConfirm: {
+    title: 'menus.model_metadata.role.delete_confirm_title',
+    content: 'menus.model_metadata.role.delete_confirm_content',
+    okText: 'common.delete',
+    cancelText: 'common.cancel',
+  },
+  table: {
+    scrollX: 'max-content',
+    operationWidth: 300,
+  },
+})
+
+function ModelMetadataRoleIndexView() {
+  const { t } = useTranslation()
+  const { hasPermission } = useAuth()
+  const pageConfig = useListPageConfig()
+
+  const rolePermissionModalRef = useRef<{
+    open: (p: { record: { id: string | number; name?: string } }) => void
+    close: () => void
+  } | null>(null)
+  const roleAssignUsersModalRef = useRef<{
+    open: (p: { record: { id: string | number; name?: string } }) => void
+    close: () => void
+  } | null>(null)
+
+  const canPage = hasPermission('model-metadata-role:page')
+
+  if (!canPage) {
+    return <CxEmptyState message={t('common.page_error.401.message')} />
+  }
+
+  const columns = useMemo(
+    () => [
+      {
+        title: 'menus.model_metadata.role.fields.name',
+        key: 'name',
+        align: ALIGN.LEFT,
+        minWidth: 160,
+        render: (value: unknown, data: any) => (
+          <DetailLink
+            text={String(value ?? '-')}
+            disabled={!hasPermission('model-metadata-role:detail')}
+            onClick={() =>
+              pageConfig.onDetail?.({
+                type: 'detail',
+                data,
+                config: pageConfig.detailAction,
+              })
+            }
+          />
+        ),
+      },
+      {
+        title: 'menus.model_metadata.role.fields.code',
+        key: 'code',
+        align: ALIGN.LEFT,
+        width: 140,
+        ellipsis: true,
+        render: (v: unknown) => v ?? '-',
+      },
+      {
+        title: 'menus.model_metadata.role.fields.description',
+        key: 'description',
+        align: ALIGN.LEFT,
+        minWidth: 200,
+        ellipsis: true,
+        render: (v: unknown) => v ?? '-',
+      },
+      {
+        title: 'common.create_time',
+        key: 'createTime',
+        align: ALIGN.LEFT,
+        width: 170,
+        render: (v: unknown) => v ?? '-',
+      },
+      {
+        title: 'common.actions',
+        key: 'action',
+        align: ALIGN.CENTER,
+        width: 300,
+        render: (_: unknown, data: any) => {
+          return (
+            <div className="flex flex-wrap justify-center gap-2">
+              {hasPermission('model-metadata-role:detail') && (
+                <CxButton.IconView
+                  onClick={() =>
+                    pageConfig.onDetail?.({
+                      type: 'detail',
+                      data,
+                      config: pageConfig.detailAction,
+                    })
+                  }
+                />
+              )}
+              {hasPermission('model-metadata-role:edit-permission') && (
+                <CxButton.Icon
+                  title={t('menus.model_metadata.role.role_permission_title')}
+                  tooltipTone="primary"
+                  icon={<KeyRound size={18} />}
+                  onClick={() =>
+                    rolePermissionModalRef.current?.open({
+                      record: { id: data.id, name: data.name },
+                    })
+                  }
+                />
+              )}
+              {hasPermission('model-metadata-role:assign-users') && (
+                <CxButton.Icon
+                  title={t('menus.model_metadata.role.assign_users_action')} // 添加用户
+                  tooltipTone="primary"
+                  icon={<UserPlus size={18} />}
+                  onClick={() =>
+                    roleAssignUsersModalRef.current?.open({
+                      record: { id: data.id, name: data.name },
+                    })
+                  }
+                />
+              )}
+              {hasPermission('model-metadata-role:edit') && (
+                <CxButton.IconEdit
+                  onClick={() =>
+                    pageConfig.onEdit?.({
+                      type: 'edit',
+                      data,
+                      config: pageConfig.submitAction,
+                    })
+                  }
+                />
+              )}
+              {hasPermission('model-metadata-role:delete') && (
+                <CxButton.IconDelete onClick={() => pageConfig.onDelete?.(data)} />
+              )}
+            </div>
+          )
+        },
+      },
+    ],
+    [hasPermission, pageConfig, t],
+  )
+
+  return (
+    <>
+      <ListPageView
+        columns={columns}
+        pageConfig={pageConfig}
+        submitModalComponent={SubmitModal}
+        detailModalComponent={DetailModal}
+      />
+      <RolePermissionModal ref={rolePermissionModalRef} onSaved={() => void pageConfig.fetchTableData?.()} />
+      <RoleAssignUsersModal
+        ref={roleAssignUsersModalRef}
+        onSaved={() => void pageConfig.fetchTableData?.()}
+      />
+    </>
+  )
+}
+
+export default ModelMetadataRoleIndexView

package/src/views/page-menus/model-metadata/role/modal/detail-modal.tsx

@@ -0,0 +1,97 @@
+import { getModelMetadataRoleDetailAPI } from '@api/menus/model-metadata/role'
+import { CxModal, useCxModal } from '@cx-ui'
+import { Form, Spin } from 'antd'
+import { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+type OpenPayload = {
+  opeType?: string
+  opeId?: string | number
+  data?: any
+}
+
+const MODAL_WIDTH = 680
+
+const DetailModal = forwardRef<{ close: () => void; open: (payload?: OpenPayload) => void }, unknown>(
+  function DetailModal(_props, ref) {
+    const { t } = useTranslation()
+    const [loading, setLoading] = useState(false)
+
+    const modal = useCxModal({
+      onOpen: async (payload) => {
+        const opeId = payload?.opeId ?? payload?.data?.id
+        setLoading(true)
+        modal.setFormData(null)
+        if (opeId == null || `${opeId}`.trim() === '') {
+          setLoading(false)
+          return
+        }
+        try {
+          const res = await getModelMetadataRoleDetailAPI(opeId)
+          modal.setFormData((res as any)?.data ?? null)
+        } finally {
+          setLoading(false)
+        }
+      },
+    })
+
+    const { isOpen, close } = modal
+    const row = modal.formData as Record<string, any> | null
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        open: modal.open,
+        close,
+      }),
+      [modal.open, close],
+    )
+
+    const title = useMemo(() => t('menus.model_metadata.role.detail_title'), [t])
+
+    const libraryCount = Array.isArray(row?.libraries) ? row.libraries.length : 0
+
+    return (
+      <CxModal
+        title={title}
+        isOpen={isOpen}
+        onClose={close}
+        opeType="detail"
+        modalConfig={{ width: MODAL_WIDTH }}
+      >
+        {loading ? (
+          <div className="flex justify-center py-16">
+            <Spin size="large" />
+          </div>
+        ) : !row ? (
+          <div className="flex justify-center py-10 text-sm text-gray-500">{t('common.no_data')}</div>
+        ) : (
+          <Form layout="horizontal" colon className="pb-1">
+            <div className="grid grid-cols-1 gap-x-6 gap-y-3 sm:grid-cols-2">
+              <Form.Item label={t('menus.model_metadata.role.fields.name')} className="!mb-0">
+                <div className="break-words text-sm">{row.name ?? '-'}</div>
+              </Form.Item>
+              <Form.Item label={t('menus.model_metadata.role.fields.code')} className="!mb-0">
+                <div className="break-words text-sm">{row.code ?? '-'}</div>
+              </Form.Item>
+              <Form.Item label={t('menus.model_metadata.role.fields.description')} className="!mb-0 sm:col-span-2">
+                <div className="break-words text-sm whitespace-pre-wrap">{row.description ?? '-'}</div>
+              </Form.Item>
+              <Form.Item label={t('menus.model_metadata.role.fields.library_count')} className="!mb-0">
+                <div className="text-sm">{libraryCount}</div>
+              </Form.Item>
+              <Form.Item label={t('common.create_time')} className="!mb-0">
+                <div className="text-sm">{row.createTime ?? '-'}</div>
+              </Form.Item>
+              <Form.Item label={t('common.update_time')} className="!mb-0">
+                <div className="text-sm">{row.updateTime ?? '-'}</div>
+              </Form.Item>
+            </div>
+          </Form>
+        )}
+      </CxModal>
+    )
+  },
+)
+
+export default DetailModal