cx-chat 0.0.1

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

@@ -0,0 +1,287 @@
+import { addUser, editUser, getUserDetailAPI } from '@/api/system/user'
+import { useModalSubmit } from '@/hooks/useModalSubmit'
+import {
+    CxForm,
+    CxFormItem,
+    CxInput,
+    CxModal,
+    CxSelect,
+    UploadImg,
+    useCxModal,
+} from '@cx-ui'
+import { Form, Input, Select, Space } from 'antd'
+import {
+    forwardRef,
+    useImperativeHandle,
+    useMemo
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { buildUserFormRules, emptyUserFormValues } from '../userFormShared'
+import './modal-style/submit-modal.less'
+
+interface UserModalProps {
+  onOk?: (values: any) => void | Promise<void>
+  onCancel?: () => void
+}
+
+type ModalMode = 'add' | 'edit'
+type OpenPayload = {
+  opeType?: ModalMode
+  opeId?: number | string
+  record?: any
+}
+
+const ProductModal = forwardRef<any, UserModalProps>(function ProductModal(_props, ref) {
+  const { onOk, onCancel } = _props as UserModalProps
+  const { t } = useTranslation()
+  const { submitting, handleSubmit } = useModalSubmit<any, any>()
+  
+  const modal = useCxModal({
+    onOpen: async (payload) => {
+      const nextType = payload.opeType ?? 'add'
+      const record = payload.data
+      const { form, setOpeId } = modal
+      
+      setOpeId(nextType === 'edit' ? payload.opeId : undefined)
+      if (nextType === 'edit' && payload.opeId) {
+        try {
+          const detailRes = await getUserDetailAPI(payload.opeId)
+          fillFormByDetail(normalizeUserDetail(detailRes))
+        } catch (error) {
+          // 详情接口失败时回退到列表 record，确保弹框仍可编辑
+          fillFormByDetail(record || {})
+        }
+      } else if (nextType === 'edit' && record) {
+        fillFormByDetail(record)
+      } else {
+        form.resetFields()
+      }
+    },
+    onClose: () => {
+      onCancel?.()
+    },
+  })
+  
+  const { isOpen, close, form, opeType, opeId } = modal
+  const avatarValue = Form.useWatch('avatar', form)
+  const userRules = useMemo(() => buildUserFormRules(t, opeType === 'detail' ? 'edit' : opeType), [t, opeType])
+  // 弹框名称
+  const title = useMemo(
+    () => (opeType === 'edit' ? t('system.user.modal_user.edit_title') : t('system.user.modal_user.add_title')),
+    [opeType, t],
+  )
+
+  const normalizeUserDetail = (raw: any) => {
+    if (raw?.data?.data) return raw.data.data
+    if (raw?.data) return raw.data
+    return raw || {}
+  }
+
+  /** 将详情里的 phone 拆成区号与手机号（兼容历史存储为 “+86 138xxxx” 的格式）。 */
+  const parsePhoneForForm = (raw: unknown): { areaCode: string; phone: string } => {
+    const str = raw != null && raw !== '' ? String(raw).trim() : ''
+    if (!str) return { areaCode: '+86', phone: '' }
+    const parts = str.split(/\s+/).filter(Boolean)
+    if (parts.length > 1 && String(parts[0]).startsWith('+')) {
+      return { areaCode: String(parts[0]), phone: parts.slice(1).join(' ') }
+    }
+    return { areaCode: '+86', phone: str }
+  }
+
+  const fillFormByDetail = (detail: any) => {
+    const { areaCode, phone } = parsePhoneForForm(detail?.phone)
+    const avatarRaw = detail?.avatar
+    const avatarList =
+      Array.isArray(avatarRaw)
+        ? avatarRaw.filter(Boolean).map((x) => String(x))
+        : avatarRaw
+          ? [String(avatarRaw)]
+          : []
+    form.setFieldsValue({
+      name: detail?.email ?? '',
+      code: detail?.name ?? '',
+      password: '',
+      areaCode,
+      phone,
+      avatar: avatarList,
+      remark: detail?.remark ?? '',
+      sex: Number(detail?.sex ?? 1),
+      is_active: Number(detail?.status) === 1 || Boolean(detail?.is_active),
+    })
+  }
+
+  /** 头像上传成功后，将组件回传的地址写入表单 avatar 字段（地址数组）。 */
+  const handleAvatarUploaded = (fileList: any[]) => {
+    const addresses = (Array.isArray(fileList) ? fileList : [])
+      .map((f) => f?.response?.data?.address ?? f?.url ?? '')
+      .filter(Boolean)
+      .map((x) => String(x))
+    form.setFieldValue('avatar', addresses)
+  }
+
+  const onOkClick = async () => {
+    if (opeType === 'detail') return
+    const result = await handleSubmit({
+      opeType,
+      validate: () => form.validateFields(),
+      addAPI: addUser,
+      editAPI: (payload) => editUser(payload),
+      transform: (values) => ({
+        email: values.name,
+        name: values.code,
+        password: values.password,
+        areaCode: values.areaCode,
+        phone: values.phone,
+        avatar: values.avatar[0],
+        remark: values.remark,
+        sex: Number(values.sex ?? 1),
+        is_active: values.is_active,
+        ...(opeType === 'edit' ? { id: opeId } : {}),
+      }),
+      // successMessage: {
+      //   add: t('system.user.toast.create_success'),
+      //   edit: t('system.user.toast.update_success'),
+      // },
+      onSuccess: async (ctx) => {
+        await onOk?.({
+          ...ctx.values,
+          id: opeId,
+        })
+      },
+    })
+    if (result) {
+      close()
+    }
+  }
+
+  useImperativeHandle(ref, () => ({
+    open: modal.open,
+    close,
+  }), [modal.open, close])
+
+  return (
+    <CxModal
+      title={title}
+      isOpen={isOpen}
+      onClose={close}
+      modalConfig={{ width: 600 }}
+      opeType={opeType}
+      submitting={submitting}
+      onSubmit={onOkClick}
+    >
+      <CxForm
+        form={form}
+        rules={userRules}
+        layout="vertical"
+        initialValues={emptyUserFormValues()}>
+        <CxFormItem
+          label={t('system.user.modal_user.email_label')}
+          name="name">
+          <CxInput.Large placeholder={t('system.user.modal_user.email_placeholder')} />
+        </CxFormItem>
+
+        <CxFormItem
+          label={t('system.user.modal_user.nickname_label')}
+          name="code">
+          <CxInput.Large placeholder={t('system.user.modal_user.nickname_placeholder')} />
+        </CxFormItem>
+        {opeType !== 'edit' && (
+          <CxFormItem
+            label={t('system.user.modal_user.password_label')}
+            name="password">
+            <CxInput.Large
+              type="password"
+              placeholder={t('system.user.modal_user.password_placeholder')}
+            />
+          </CxFormItem>
+        )}
+        <CxFormItem label={t('system.user.modal_user.phone_label')}>
+          <Space.Compact className="customizeStyle" style={{ width: '100%' }}>
+            <Form.Item name="areaCode" noStyle>
+              <Select
+                style={{ width: 110 }}
+                options={[
+                  {
+                    label: t('system.user.modal_user.phone_area_code'),
+                    value: '+86',
+                  },
+                ]}
+              />
+            </Form.Item>
+            <CxFormItem name="phone" noStyle>
+              <Input placeholder={t('system.user.modal_user.phone_placeholder')} />
+            </CxFormItem>
+          </Space.Compact>
+        </CxFormItem>
+        <CxFormItem label={t('system.user.modal_user.avatar_label')} name="avatar">
+          <UploadImg
+            value={avatarValue}
+            maxCount={1}
+            onUploaded={handleAvatarUploaded}
+          />
+        </CxFormItem>
+        <CxFormItem label={t('system.user.modal_user.sex_label')} name="sex">
+          <CxSelect.Large
+            options={[
+              { label: t('system.user.modal_user.sex_male'), value: 1 },
+              { label: t('system.user.modal_user.sex_female'), value: 0 },
+            ]}
+          />
+        </CxFormItem>
+        <CxFormItem label={t('system.user.modal_user.remark_label')} name="remark">
+          <CxInput.Textarea
+            placeholder={t('system.user.modal_user.remark_placeholder')}
+          />
+        </CxFormItem>
+        
+        {/* <CxFormItem
+          label=''
+          name="is_active"
+          valuePropName="checked">
+         <Switch /> {t('common.enabled')}
+        </CxFormItem> */}
+        {/* <Form.Item
+          label="状态"
+          name="status"
+          rules={[{ required: true, message: '请选择状态' }]}>
+          <CxSelect
+            options={[
+              { name: '启用', value: 'enabled' },
+              { name: '禁用', value: 'disabled' },
+            ]}
+            fieldNames={{ label: 'name', value: 'value' }}
+          />
+        </Form.Item>
+        <Form.Item
+          label="角色"
+          name="roles"
+          initialValue={[]}
+          rules={[{ required: true, message: '请选择角色' }]}>
+          <CxMultiSelect options={[
+              { label: '启用', value: 'enabled' },
+              { label: '禁用', value: 'disabled' },
+            ]} placeholder="请选择角色" />
+        </Form.Item>
+        <Form.Item
+          label="日期选择"
+          name="time"
+          rules={[{ required: true, message: '请选择时间' }]}>
+          <CxDatePicker />
+        </Form.Item>
+        <Form.Item
+          label="日期区间选择"
+          name="times"
+          rules={[{ required: true, message: '请选择时间区间' }]}>
+          <CxRangePicker />
+        </Form.Item>
+        {type === 'edit' && (
+          <div style={{ color: '#999' }}>
+            当前编辑 id: {String(opeId ?? '')}
+          </div>
+        )} */}
+      </CxForm>
+    </CxModal>
+  )
+})
+
+export default ProductModal

package/src/views/page-system/user/userFormShared.ts

@@ -0,0 +1,51 @@
+import type { Rule } from 'antd/es/form'
+import type { TFunction } from 'i18next'
+
+export type UserFormValues = {
+  name: string
+  code: string
+  password: string
+  /** 手机区号（如 +86） */
+  areaCode: string
+  /** 手机号（不含区号） */
+  phone: string
+  avatar: string
+  remark: string
+  sex: number
+  is_active: boolean
+}
+
+export function emptyUserFormValues(): UserFormValues {
+  return {
+    name: '',
+    code: '',
+    password: '',
+    areaCode: '+86',
+    phone: '',
+    avatar: '',
+    remark: '',
+    sex: 1,
+    is_active: true,
+  }
+}
+
+export function buildUserFormRules(
+  t: TFunction,
+  mode: string = 'add',
+): {
+  name: Rule[]
+  code: Rule[]
+  password?: Rule[]
+  phone: Rule[]
+  sex: Rule[]
+} {
+  return {
+    name: [{ required: true, message: t('system.user.modal_user.rules.email.required') }],
+    code: [{ required: true, message: t('system.user.modal_user.rules.nickname.required') }],
+    ...(mode === 'add'
+      ? { password: [{ required: true, message: t('system.user.modal_user.rules.password.required') }] }
+      : {}),
+    phone: [{ required: true, message: t('system.user.modal_user.rules.phone.required') }],
+    sex: [{ required: true, message: t('system.user.modal_user.rules.sex.required') }],
+  }
+}

package/tailwind.config.js

@@ -0,0 +1,17 @@
+import typography from '@tailwindcss/typography';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  darkMode: 'class', // Enable class-based dark mode
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    typography,
+  ],
+}
+

package/tsconfig.app.json

@@ -0,0 +1,48 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* 让 src 下的 .js 也进入工程，编辑器才能解析 @utils 等 paths（Vite 运行时已支持） */
+    "allowJs": true,
+    "checkJs": false,
+
+    /* Path aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@cx-ui": ["./src/components/cx-ui/index.ts"],
+      "@cx-ui/*": ["./src/components/cx-ui/*"],
+      "@components/*": ["./src/components/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@api/*": ["./src/api/*"],
+      "@http/*": ["./src/http/*"]
+    },
+
+    /* Linting */
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": false,
+    "noUncheckedSideEffectImports": false
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "strict": false
+  },
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}