cx-chat 0.0.1

package/src/views/page-system/role/modal/submit-modal.tsx

@@ -0,0 +1,193 @@
+import { addRoleAPI, editRoleAPI, getRoleDetailAPI } from '@/api/system/role'
+import { useToast } from '@/contexts/ToastContext'
+import { useModalSubmit } from '@/hooks/useModalSubmit'
+import { CxForm, CxFormItem, CxInput, CxModal, useCxModal } from '@cx-ui'
+import { Form } from 'antd'
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { roleModalShellStyles } from './role-modal-shell-styles'
+import RolePermissionAssignPanel, {
+  type RolePermissionAssignPanelHandle,
+} from './role-permission-assign-panel'
+import {
+  EMPTY_ROLE_PERMISSION_CREATE_DTO,
+  type RolePermissionAssignPayload,
+} from './role-permission-assign-shared'
+
+interface RoleModalProps {
+  onOk?: (values: any) => void | Promise<void>
+  onCancel?: () => void
+}
+
+type ModalMode = 'add' | 'edit'
+type OpenPayload = {
+  opeType?: ModalMode
+  opeId?: number | string
+  record?: any
+}
+
+function extractCreatedRoleId(result: unknown): string | number | undefined {
+  if (result == null || typeof result !== 'object') return undefined
+  const r = result as Record<string, unknown>
+  if (r.id != null) return r.id as string | number
+  const d = r.data
+  if (d && typeof d === 'object' && d !== null && 'id' in d) {
+    return (d as { id: string | number }).id
+  }
+  return undefined
+}
+
+const SubmitModal = forwardRef<any, RoleModalProps>(function SubmitModal(_props, ref) {
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+  const { onOk, onCancel } = _props
+
+  const [assignBootstrapKey, setAssignBootstrapKey] = useState(0)
+  const assignPanelRef = useRef<RolePermissionAssignPanelHandle>(null)
+  const { submitting, handleSubmit } = useModalSubmit()
+
+  const modal = useCxModal({
+    onOpen: async (payload) => {
+      const nextType = payload.opeType ?? 'add'
+      const record = payload.data
+      const { form } = modal
+      if (nextType === 'add' || nextType === 'edit') {
+        setAssignBootstrapKey((k) => k + 1)
+      }
+      assignPanelRef.current?.reset()
+
+      if (nextType === 'edit' && record) {
+        const opeId = payload.opeId ?? record.id
+        if (opeId != null && `${opeId}`.trim() !== '') {
+          const detail = await getRoleDetailAPI(opeId)
+          form.setFieldsValue({
+            name: detail?.data?.name ?? '',
+            description: detail?.data?.description ?? '',
+          })
+        } else {
+          form.resetFields()
+        }
+      } else {
+        form.resetFields()
+      }
+    },
+    onClose: () => {
+      assignPanelRef.current?.reset()
+      onCancel?.()
+    },
+  })
+  
+  const { isOpen, close, form, opeType, opeId } = modal
+
+  const title = useMemo(
+    () => (opeType === 'edit' ? t('system.role.edit') : t('system.role.add')),
+    [opeType, t],
+  )
+
+  const onSubmit = async () => {
+    if (opeType === 'detail') return
+    const result = await handleSubmit({
+      opeType,
+      validate: () => form.validateFields(),
+      addAPI: addRoleAPI,
+      editAPI: editRoleAPI,
+      transform: (values) => {
+        const p = assignPanelRef.current?.getPayload() as
+          | RolePermissionAssignPayload
+          | undefined
+        const rolePermissionCreateDTO =
+          p?.rolePermissionCreateDTO ?? EMPTY_ROLE_PERMISSION_CREATE_DTO
+        return {
+          name: values.name,
+          description: values.description ?? '',
+          rolePermissionCreateDTO,
+          ...(opeType === 'edit' && opeId != null ? { id: opeId } : {}),
+        }
+      },
+      onSuccess: async ({ payload }) => {
+        await onOk?.(payload)
+      },
+    })
+    if (result) close()
+  }
+
+  useImperativeHandle(ref, () => ({
+    open: modal.open,
+    close,
+  }), [modal.open, close])
+
+  /** 新增 / 编辑统一宽屏承载权限分配区 */
+  /** 宽屏便于权限卡片一行 3 列（与面板内 auto-fill 网格配合） */
+  const modalWidth = 1104
+
+  return (
+    <CxModal
+      title={title}
+      isOpen={isOpen}
+      onClose={close}
+      opeType={opeType}
+      submitting={submitting}
+      onSubmit={onSubmit}
+      modalConfig={{
+        width: modalWidth,
+        styles: roleModalShellStyles,
+        rootClassName: 'cx-modal-role-assign',
+      }}>
+      <CxForm
+        form={form}
+        layout="vertical"
+        className="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
+        <div className="grid shrink-0 grid-cols-1 gap-4 md:grid-cols-2">
+          <CxFormItem
+            label={t('system.role.name')}
+            name="name"
+            rules={[
+              {
+                required: true,
+                message: t('system.role.name_required'),
+              },
+            ]}>
+            <CxInput.Large placeholder={t('system.role.name')} />
+          </CxFormItem>
+
+          <CxFormItem
+            label={t('common.description')}
+            name="description"
+            rules={[
+              {
+                required: true,
+                message: t('common.description_required'),
+              },
+            ]}>
+            <CxInput.Large placeholder={t('common.description_placeholder')} />
+          </CxFormItem>
+        </div>
+        <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-hidden">
+          <h3 className="shrink-0 text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {t('system.role.permissions_assignment')}
+          </h3>
+          <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+            <RolePermissionAssignPanel
+              ref={assignPanelRef}
+              active={isOpen}
+              bootstrapKey={assignBootstrapKey}
+              maxHeightClass="h-full min-h-0 w-full flex-1 overflow-hidden"
+              roleId={opeType === 'edit' ? (opeId ?? null) : null}
+            />
+          </div>
+        </div>
+      </CxForm>
+    </CxModal>
+  )
+})
+
+SubmitModal.displayName = 'SubmitModal'
+
+export default SubmitModal

package/src/views/page-system/sys-config/index.tsx

@@ -0,0 +1,294 @@
+import { Form, Switch } from 'antd'
+import { RefreshCw, Save, Settings as SettingsIcon } from 'lucide-react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { getSysConfigAPI, saveSysConfigAPI } from '@/api/system/sys-config'
+import { loadSystemConfigOnBoot } from '@/config/system'
+import { CxButton, CxForm, CxFormItem, CxInput, UploadImg } from '@cx-ui'
+import { useToast } from '../../../contexts/ToastContext'
+import { useStickyHeader } from '../../../hooks/useStickyHeader'
+type SysConfigForm = {
+  systemName: string
+  copyright: string
+  systemLogo: string[] // 上传返回的 address 数组
+  loginPageName: string
+  browserIcon: string[] // 上传返回的 address 数组
+  showCopyright: boolean
+  agentAvatar: string[] // 上传返回的 address 数组
+}
+
+const SYS_CONFIG_KEYS = {
+  systemName: 'SYSTEM_NAME',
+  copyright: 'SYSTEM_COPYRIGHT',
+  systemLogo: 'SYSTEM_LOGO',
+  loginPageName: 'LOGIN_PAGE_NAME',
+  browserIcon: 'BROWSER_ICON',
+  showCopyright: 'SHOW_COPYRIGHT',
+  agentAvatar: 'AGENT_AVATAR',
+} as const
+
+const SysConfigPage: React.FC = () => {
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+  const titleRef = useStickyHeader(t('system.sys_config.title'))
+
+  const [isLoading, setIsLoading] = useState(true)
+  const [isSaving, setIsSaving] = useState(false)
+  const [formTick, setFormTick] = useState(0)
+  const hasFetchedOnceRef = useRef(false)
+
+  const [form] = Form.useForm<SysConfigForm>()
+  const browserIconValue = Form.useWatch('browserIcon', form)
+  const systemLogoValue = Form.useWatch('systemLogo', form)
+  const agentAvatarValue = Form.useWatch('agentAvatar', form)
+  const [original, setOriginal] = useState<SysConfigForm>({
+    systemName: '',
+    copyright: '',
+    systemLogo: [],
+    loginPageName: '',
+    browserIcon: [],
+    showCopyright: true,
+    agentAvatar: [],
+  })
+
+  const isModified = useMemo(() => {
+    const cur = (form.getFieldsValue(true) || {}) as SysConfigForm
+    return (
+      (cur.systemName ?? '') !== (original.systemName ?? '') ||
+      (cur.copyright ?? '') !== (original.copyright ?? '') ||
+      (cur.systemLogo?.[0] ?? '') !== (original.systemLogo?.[0] ?? '') ||
+      (cur.loginPageName ?? '') !== (original.loginPageName ?? '') ||
+      (cur.browserIcon?.[0] ?? '') !== (original.browserIcon?.[0] ?? '') ||
+      Boolean(cur.showCopyright) !== Boolean(original.showCopyright) ||
+      (cur.agentAvatar?.[0] ?? '') !== (original.agentAvatar?.[0] ?? '')
+    )
+  }, [form, original, formTick])
+
+  /** 将表单值转换为后端需要的 configs 对象。 */
+  const buildConfigsObject = (values: SysConfigForm) => {
+    return {
+      [SYS_CONFIG_KEYS.systemName]: values.systemName ?? '',
+      [SYS_CONFIG_KEYS.copyright]: values.copyright ?? '',
+      [SYS_CONFIG_KEYS.systemLogo]: values.systemLogo?.[0] ?? '',
+      [SYS_CONFIG_KEYS.loginPageName]: values.loginPageName ?? '',
+      [SYS_CONFIG_KEYS.browserIcon]: values.browserIcon?.[0] ?? '',
+      [SYS_CONFIG_KEYS.showCopyright]: values.showCopyright ? 1 : 0,
+      [SYS_CONFIG_KEYS.agentAvatar]: values.agentAvatar?.[0] ?? '',
+    }
+  }
+
+  /** 将后端返回的 configs 对象转换为表单需要的字段。 */
+  const buildFormValues = (configs: Record<string, any>): SysConfigForm => {
+    const rawShow = configs[SYS_CONFIG_KEYS.showCopyright]
+    const showCopyright =
+      rawShow === undefined || rawShow === null || rawShow === ''
+        ? true
+        : rawShow === 1 || rawShow === '1' || rawShow === true || rawShow === 'true'
+    return {
+      systemName: configs[SYS_CONFIG_KEYS.systemName] ?? '',
+      copyright: configs[SYS_CONFIG_KEYS.copyright] ?? '',
+      systemLogo: configs[SYS_CONFIG_KEYS.systemLogo] ? [String(configs[SYS_CONFIG_KEYS.systemLogo])] : [],
+      loginPageName: configs[SYS_CONFIG_KEYS.loginPageName] ?? '',
+      browserIcon: configs[SYS_CONFIG_KEYS.browserIcon] ? [String(configs[SYS_CONFIG_KEYS.browserIcon])] : [],
+      showCopyright,
+      agentAvatar: configs[SYS_CONFIG_KEYS.agentAvatar] ? [String(configs[SYS_CONFIG_KEYS.agentAvatar])] : [],
+    }
+  }
+
+  /** 拉取系统配置并填充表单。 */
+  const fetchConfig = async () => {
+    setIsLoading(true)
+    try {
+      const res: any = await getSysConfigAPI({ type: 'pageConfig' })
+      // 后台返回详情是 res.data，且为字符串对象（JSON string）
+      const configsText = res.data
+      const configsObj = JSON.parse(configsText || '{}')
+      const next = buildFormValues(configsObj)
+      form.setFieldsValue(next)
+      setOriginal(next)
+    } catch (e) {
+      console.error('Failed to fetch sys config:', e)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    // React StrictMode（开发环境）下 useEffect 会触发两次，这里只在首次挂载时拉取一次
+    if (hasFetchedOnceRef.current) return
+    hasFetchedOnceRef.current = true
+    void fetchConfig()
+  }, [])
+
+  /** 保存系统配置：type 固定为 pageConfig，configs 为字符串对象（JSON string）。 */
+  const handleSave = async () => {
+    if (!isModified) return
+    setIsSaving(true)
+    try {
+      const cur = (form.getFieldsValue(true) || {}) as SysConfigForm
+      const configsObj = buildConfigsObject(cur)
+      await saveSysConfigAPI({
+        type: 'pageConfig',
+        configs: JSON.stringify(configsObj),
+      })
+      setOriginal(cur)
+      showToast(t('system.sys_config.messages.save_success'), 'success')
+      // 保存后立即重新应用系统配置（标题/图标/会话头像等），避免用户手动刷新
+      await loadSystemConfigOnBoot()
+    } catch (e) {
+      console.error('Failed to save sys config:', e)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  /** 上传系统 Logo 成功后回填表单字段（地址数组）。 */
+  const handleSystemLogoUploaded = (fileList: any[]) => {
+    const addresses = (Array.isArray(fileList) ? fileList : [])
+      .map((f) => f?.response?.data?.address ?? f?.address ?? f?.url ?? '')
+      .filter(Boolean)
+      .map((x) => String(x))
+    form.setFieldValue('systemLogo', addresses)
+    // form.setFieldValue 不触发表单 onValuesChange，这里手动触发一次 modified 计算刷新
+    setFormTick((x) => x + 1)
+  }
+
+  /** 上传浏览器图标成功后回填表单字段（地址数组）。 */
+  const handleBrowserIconUploaded = (fileList: any[]) => {
+    const addresses = (Array.isArray(fileList) ? fileList : [])
+      .map((f) => f?.response?.data?.address ?? f?.address ?? f?.url ?? '')
+      .filter(Boolean)
+      .map((x) => String(x))
+    form.setFieldValue('browserIcon', addresses)
+    // form.setFieldValue 不触发表单 onValuesChange，这里手动触发一次 modified 计算刷新
+    setFormTick((x) => x + 1)
+  }
+
+  /** 上传 Agent 头像成功后回填表单字段（地址数组）。 */
+  const handleAgentAvatarUploaded = (fileList: any[]) => {
+    const addresses = (Array.isArray(fileList) ? fileList : [])
+      .map((f) => f?.response?.data?.address ?? f?.address ?? f?.url ?? '')
+      .filter(Boolean)
+      .map((x) => String(x))
+    form.setFieldValue('agentAvatar', addresses)
+    // form.setFieldValue 不触发表单 onValuesChange，这里手动触发一次 modified 计算刷新
+    setFormTick((x) => x + 1)
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-12">
+        <RefreshCw size={32} className="animate-spin text-blue-600" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-8 mx-auto space-y-8 pb-20">
+      <div className="flex justify-between items-center" ref={titleRef}>
+        <div>
+          <h1 className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500 flex items-center gap-3">
+            <SettingsIcon className="text-blue-400" size={32} />
+            {t('system.sys_config.title')}
+          </h1>
+          <p className="text-gray-500 dark:text-gray-400 mt-1">
+            {t('system.sys_config.description')}
+          </p>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <CxButton.Icon
+            type="default"
+            icon={<RefreshCw size={20} />}
+            title={t('common.refresh')}
+            onClick={fetchConfig}
+            className="text-gray-500"
+          />
+          <CxButton.Icon
+            type="primary"
+            icon={isSaving ? <RefreshCw size={20} className="animate-spin" /> : <Save size={20} />}
+            title={t('common.save')}
+            disabled={!isModified || isSaving}
+            onClick={handleSave}
+          />
+        </div>
+      </div>
+
+      {/* Warning Banner (已按需求隐藏) */}
+
+      {/* 单表单区域 */}
+      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden p-6">
+        <section className="space-y-6">
+          <h2 className="text-lg font-semibold flex items-center gap-2 text-gray-900 dark:text-white border-b pb-4 dark:border-gray-700">
+            <SettingsIcon size={20} className="text-blue-500" />
+            {t('system.sys_config.form.title')}
+          </h2>
+
+          <CxForm
+            form={form}
+            layout="horizontal"
+            labelCol={{ style: { width: 140 } }}
+            wrapperCol={{ style: { flex: 1 } }}
+            onValuesChange={() => setFormTick((x) => x + 1)}
+          >
+            <CxFormItem label={t('system.sys_config.form.system_name')} name="systemName">
+              <CxInput.Large
+                style={{ width: 400 }}
+                placeholder={t('system.sys_config.form.system_name_placeholder')}
+              />
+            </CxFormItem>
+
+            <CxFormItem label={t('system.sys_config.form.copyright')} name="copyright">
+              <CxInput.Large
+                style={{ width: 400 }}
+                placeholder={t('system.sys_config.form.copyright_placeholder')}
+              />
+            </CxFormItem>
+
+            <CxFormItem label={t('system.sys_config.form.browser_title')} name="loginPageName">
+              <CxInput.Large
+                style={{ width: 400 }}
+                placeholder={t('system.sys_config.form.browser_title_placeholder')}
+              />
+            </CxFormItem>
+
+            <CxFormItem
+              label={t('system.sys_config.form.show_copyright')}
+              name="showCopyright"
+              valuePropName="checked"
+            >
+              <Switch />
+            </CxFormItem>
+
+            <CxFormItem label={t('system.sys_config.form.system_logo')} name="systemLogo">
+              <UploadImg
+                isPublic
+                value={Array.isArray(systemLogoValue) ? systemLogoValue : []}
+                onUploaded={handleSystemLogoUploaded}
+              />
+            </CxFormItem>
+
+            <CxFormItem label={t('system.sys_config.form.browser_icon')} name="browserIcon">
+              <UploadImg
+                isPublic
+                value={Array.isArray(browserIconValue) ? browserIconValue : []}
+                onUploaded={handleBrowserIconUploaded}
+              />
+            </CxFormItem>
+
+            <CxFormItem label={t('system.sys_config.form.agent_avatar')} name="agentAvatar">
+              <UploadImg
+                isPublic
+                value={Array.isArray(agentAvatarValue) ? agentAvatarValue : []}
+                onUploaded={handleAgentAvatarUploaded}
+              />
+            </CxFormItem>
+          </CxForm>
+        </section>
+      </div>
+    </div>
+  )
+}
+
+export default SysConfigPage

package/src/views/page-system/user/components/user-role-column.tsx

@@ -0,0 +1,87 @@
+import { CxTooltip } from '@cx-ui'
+import clsx from 'clsx'
+
+const MAX_VISIBLE_ROLES = 3
+
+function parseRoleList(roleNames: any, record: any): string[] {
+  const raw = roleNames ?? record?.roleNames ?? record?.roles ?? []
+  if (Array.isArray(raw)) {
+    return raw
+      .map((item) => {
+        if (typeof item === 'string') return item
+        if (item && typeof item === 'object') return item.name ?? item.roleName ?? item.label
+        return ''
+      })
+      .filter(Boolean)
+  }
+  if (typeof raw === 'string') {
+    return raw
+      .split(',')
+      .map((s) => s.trim())
+      .filter(Boolean)
+  }
+  return []
+}
+
+function RoleChip({ roleName }: { roleName: string }) {
+  const normalizedRoleName = String(roleName || '').toLowerCase()
+  const chipClassName =
+    normalizedRoleName === 'default'
+      ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300'
+      : normalizedRoleName === 'admin'
+        ? 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300'
+        : 'bg-gray-100 text-gray-700 dark:bg-gray-800/60 dark:text-gray-200'
+  return (
+    <span
+      className={clsx(
+        'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap',
+        chipClassName,
+      )}>
+      {roleName}
+    </span>
+  )
+}
+
+export type UserRoleColumnProps = {
+  roleNames?: any
+  record?: any
+}
+
+export function UserRoleColumn({ roleNames, record }: UserRoleColumnProps) {
+  const roleList = parseRoleList(roleNames, record)
+
+  if (roleList.length === 0) return '-'
+
+  const visibleRoles = roleList.slice(0, MAX_VISIBLE_ROLES)
+  const hasOverflow = roleList.length > MAX_VISIBLE_ROLES
+
+  const compactView = (
+    <div className="flex flex-wrap items-center gap-1">
+      {visibleRoles.map((roleName, idx) => (
+        <RoleChip key={`${String(roleName)}-${idx}`} roleName={roleName} />
+      ))}
+      {hasOverflow && (
+        <span className="inline-flex items-center px-1 text-xs font-medium text-gray-500 dark:text-gray-400">
+          …
+        </span>
+      )}
+    </div>
+  )
+
+  if (!hasOverflow) {
+    return compactView
+  }
+
+  return (
+    <CxTooltip
+      title={
+        <div className="flex flex-wrap items-center justify-center gap-1">
+          {roleList.map((roleName, idx) => (
+            <RoleChip key={`${String(roleName)}-${idx}`} roleName={roleName} />
+          ))}
+        </div>
+      }>
+      <div className="inline-flex max-w-full cursor-default justify-center">{compactView}</div>
+    </CxTooltip>
+  )
+}