cx-chat 0.0.1

package/src/views/page-system/permission/modal/detail-modal.tsx

@@ -0,0 +1,179 @@
+import { getPermissionDetailAPI } from '@/api/system/permission'
+import { PathTags } from '@/components/common/path'
+import { useCxModal } from '@/components/cx-ui/modal/useCxModal'
+import { ENUM_DATA, getEnumLabelKey } from '@/meta'
+import { CxModal, CxTag } from '@cx-ui'
+import { Descriptions, Spin } from 'antd'
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+
+const DetailModal = forwardRef<any, unknown>(function DetailModal(_props, ref) {
+  const { t } = useTranslation()
+  const [loading, setLoading] = useState(false)
+  const [menuIdToNameMap, setMenuIdToNameMap] = useState<Record<string, string>>({})
+
+  const modal = useCxModal({
+    onOpen: async (payload) => {
+      const opeId = payload.opeId ?? payload.data?.id
+      
+      setMenuIdToNameMap(
+        payload.menuIdToNameMap && typeof payload.menuIdToNameMap === 'object'
+          ? payload.menuIdToNameMap
+          : {},
+      )
+      
+      setLoading(true)
+      modal.setFormData({})
+      
+      if (opeId == null || opeId === '') {
+        setLoading(false)
+        return
+      }
+      
+      try {
+        const res = await getPermissionDetailAPI(opeId)
+        modal.setFormData(res?.data ?? {})
+      } finally {
+        setLoading(false)
+      }
+    },
+    onClose: () => {
+      setLoading(false)
+      setMenuIdToNameMap({})
+    },
+  })
+  
+  const { isOpen, close } = modal
+  const detail = (modal.formData ?? {}) as Record<string, unknown>
+
+  useImperativeHandle(ref, () => ({
+    open: modal.open,
+    close,
+  }), [modal.open, close])
+
+  const titleText =
+    (detail.title ?? detail.name ?? '-') as string
+  const codeText = (detail.code ?? '-') as string
+  const methodText = (detail.httpMethod ?? detail.method ?? '-') as string
+  const menuIdRaw = detail.menuId
+  const menuIdKey =
+    menuIdRaw != null && String(menuIdRaw) !== '' ? String(menuIdRaw) : ''
+  const belongMenuText =
+    (menuIdKey && menuIdToNameMap[menuIdKey]) ||
+    (menuIdKey || '-')
+  const noLoginRaw = detail.noLoginStatus
+  const logRaw = detail.logStatus
+  const sortText =
+    detail.sortOrder !== undefined && detail.sortOrder !== null
+      ? String(detail.sortOrder)
+      : '-'
+  const statusRaw = detail.status
+  const apiTypeRaw = detail.apiType
+  const apiTypeLabel =
+    apiTypeRaw === undefined || apiTypeRaw === null || apiTypeRaw === ''
+      ? undefined
+      : getEnumLabelKey('permissionApiType', Number(apiTypeRaw))
+  const descText =
+    detail.description != null && String(detail.description) !== ''
+      ? String(detail.description)
+      : '-'
+  const pathRaw = detail.path ?? detail.apiPath
+  const pathForTags =
+    pathRaw == null || String(pathRaw).trim() === ''
+      ? undefined
+      : String(pathRaw)
+
+  const methodKey = methodText === '-' ? '' : `${methodText}`.toUpperCase()
+  const methodHex =
+    ENUM_DATA.httpMethod.tagColorMap[methodKey] ?? '#64748b'
+
+  return (
+    <CxModal
+      title={t('system.permission.detail_title')}
+      isOpen={isOpen}
+      onClose={close}
+      opeType="detail">
+      {loading ? (
+        <div className="flex justify-center py-10">
+          <Spin />
+        </div>
+      ) : (
+        <Descriptions column={1} size="small" bordered>
+          <Descriptions.Item label={t('system.permission.code')}>
+            {codeText}
+          </Descriptions.Item>
+          <Descriptions.Item label={t('system.permission.title')}>
+            {titleText}
+          </Descriptions.Item>
+          <Descriptions.Item label={t('system.permission.belong_menu')}>
+            {belongMenuText}
+          </Descriptions.Item>
+          <Descriptions.Item label={t('system.permission.path')}>
+            <PathTags path={pathForTags} color={methodHex} />
+          </Descriptions.Item>
+          <Descriptions.Item label={t('system.permission.http_method')}>
+            {methodText === '-' ? (
+              '-'
+            ) : (
+              <CxTag
+                color={
+                  ENUM_DATA.httpMethod.tagColorMap[
+                    String(methodText).toUpperCase()
+                  ] ?? '#64748b'
+                }
+                className="font-antd"
+                pill
+              >
+                {methodText}
+              </CxTag>
+            )}
+          </Descriptions.Item>
+          <Descriptions.Item label={t('system.permission.api_type')}>
+            <CxTag
+              color={
+                ENUM_DATA.permissionApiType.tagColorMap[
+                  String(Number(apiTypeRaw))
+                ] ?? '#64748b'
+              }
+              pill
+            >
+              {apiTypeLabel && t(apiTypeLabel)}
+            </CxTag>
+          </Descriptions.Item>
+          <Descriptions.Item label={t('system.permission.no_login_status')}>
+            <CxTag.YesNo value={noLoginRaw} reverse />
+          </Descriptions.Item>
+          <Descriptions.Item label={t('system.permission.log_status')}>
+            <CxTag.YesNo value={logRaw} color={Number(logRaw) === 1 ? 'success' : 'default'} />
+          </Descriptions.Item>
+          <Descriptions.Item label={t('common.status')}>
+            <CxTag.Enabled value={statusRaw} />
+          </Descriptions.Item>
+          <Descriptions.Item label={t('common.description')}>
+            {descText}
+          </Descriptions.Item>
+          <Descriptions.Item label={t('common.sort_order')}>
+            {sortText}
+          </Descriptions.Item>
+          {detail.createTime != null && String(detail.createTime) !== '' ? (
+            <Descriptions.Item label={t('common.created_at')}>
+              {String(detail.createTime)}
+            </Descriptions.Item>
+          ) : null}
+          {detail.updateTime != null && String(detail.updateTime) !== '' ? (
+            <Descriptions.Item label={t('common.updated_at')}>
+              {String(detail.updateTime)}
+            </Descriptions.Item>
+          ) : null}
+        </Descriptions>
+      )}
+    </CxModal>
+  )
+})
+
+export default DetailModal

package/src/views/page-system/permission/modal/submit-modal.less

@@ -0,0 +1,146 @@
+/** 权限弹窗：编码区撑满控件列；Row/Col 各占一半；extra 与控件区间距 */
+.permission-submit-modal-form {
+  .ant-form-item.permission-submit-modal-code {
+    .ant-form-item-control-input,
+    .ant-form-item-control-input-content {
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+    }
+
+    .ant-form-item-extra {
+      margin-top: 10px;
+    }
+  }
+
+  .permission-submit-modal-code-fields {
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  .permission-submit-modal-code-fields > .ant-row {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  /**
+   * 不用 gutter 的负 margin（会与表单项左缘错位）。
+   * 左列只留右内边距、右列只留左内边距，中间 16px 间距，两侧与表单其它控件左/右对齐。
+   */
+  .permission-submit-modal-code-col:first-child {
+    padding-inline-end: 8px;
+  }
+
+  .permission-submit-modal-code-col:last-child {
+    padding-inline-start: 8px;
+  }
+
+  .permission-submit-modal-code-col {
+    min-width: 0;
+  }
+
+  .permission-submit-modal-code-col .cx-select,
+  .permission-submit-modal-code-col .ant-select {
+    max-width: 100%;
+  }
+
+  /**
+   * 右侧自定义有值时：左侧字典 Select 弱提示（antd 6：前缀 .ant-select-prefix，值在 .ant-select-content）。
+   * 删除线只作用在「选中值」：用 ::first-line 打文案，避免整段 decoration 牵连前缀；只读 combobox 再补一条。
+   */
+  .permission-submit-modal-code-col--dict-muted .ant-select:not(.ant-select-disabled) {
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.06) !important;
+
+    .ant-select-selector {
+      cursor: pointer !important;
+      background-color: rgba(0, 0, 0, 0.06) !important;
+    }
+
+    .ant-select-prefix,
+    .ant-select-prefix * {
+      text-decoration: none !important;
+      -webkit-text-decoration: none !important;
+    }
+
+    /* inline-block 以便 ::first-line 生效（flex 子项上 first-line 常无效） */
+    .ant-select-content.ant-select-content-has-value {
+      display: inline-block;
+      max-width: 100%;
+      min-width: 0;
+      vertical-align: middle;
+      color: rgba(0, 0, 0, 0.45);
+    }
+
+    .ant-select-content.ant-select-content-has-value::first-line {
+      text-decoration: line-through !important;
+      text-decoration-thickness: 1px;
+      color: rgba(0, 0, 0, 0.45);
+    }
+
+    .ant-select-content.ant-select-content-has-value .ant-select-input {
+      text-decoration: line-through !important;
+      text-decoration-thickness: 1px;
+      color: rgba(0, 0, 0, 0.45);
+    }
+
+    .ant-select-selection-placeholder {
+      color: rgba(0, 0, 0, 0.45);
+    }
+
+    .ant-select-suffix,
+    .ant-select-arrow,
+    .ant-select-clear {
+      color: rgba(0, 0, 0, 0.45);
+      text-decoration: none !important;
+    }
+  }
+}
+
+html.dark .permission-submit-modal-form
+  .permission-submit-modal-code-col--dict-muted
+  .ant-select:not(.ant-select-disabled),
+.dark .permission-submit-modal-form
+  .permission-submit-modal-code-col--dict-muted
+  .ant-select:not(.ant-select-disabled) {
+  background-color: rgba(255, 255, 255, 0.08) !important;
+
+  .ant-select-selector {
+    background-color: rgba(255, 255, 255, 0.08) !important;
+  }
+
+  .ant-select-prefix,
+  .ant-select-prefix * {
+    text-decoration: none !important;
+    -webkit-text-decoration: none !important;
+  }
+
+  .ant-select-content.ant-select-content-has-value {
+    display: inline-block;
+    max-width: 100%;
+    min-width: 0;
+    vertical-align: middle;
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .ant-select-content.ant-select-content-has-value::first-line {
+    text-decoration: line-through !important;
+    text-decoration-thickness: 1px;
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .ant-select-content.ant-select-content-has-value .ant-select-input {
+    text-decoration: line-through !important;
+    text-decoration-thickness: 1px;
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .ant-select-selection-placeholder,
+  .ant-select-suffix,
+  .ant-select-arrow,
+  .ant-select-clear {
+    color: rgba(255, 255, 255, 0.45);
+    text-decoration: none !important;
+  }
+}