adspecs 0.1.12

package/references/antd-front-demo/src/pages/mdm/coding-system/variable-dict/index.tsx

@@ -0,0 +1,163 @@
+import { useRef, useState } from 'react';
+import { App, Button, Space, Tag } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { ProTable, type ProColumns, type ActionType } from '@ant-design/pro-components';
+import { useTranslation } from 'react-i18next';
+import { getVariableDictPage, disableVariableDict } from '@/api/mdm/coding-system';
+import type { VariableDictVO } from '@/types/mdm/coding-system';
+import { VARIABLE_DICT_STATUS } from '@/types/mdm/coding-system';
+import VariableDictDrawer from './components/VariableDictDrawer';
+
+const VariableDictPage: React.FC = () => {
+  const { t } = useTranslation('mdm/coding-system');
+  const { t: tc } = useTranslation('common');
+  const { message, modal: appModal } = App.useApp();
+  const actionRef = useRef<ActionType>(null);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [editId, setEditId] = useState<number | null>(null);
+
+  const reload = () => actionRef.current?.reload();
+
+  const handleDisable = async (record: VariableDictVO) => {
+    appModal.confirm({
+      title: tc('tip'),
+      content: `确认停用变量「${record.key}」吗？`,
+      onOk: async () => {
+        await disableVariableDict(record.id);
+        message.success(tc('success'));
+        reload();
+      },
+    });
+  };
+
+  const columns: ProColumns<VariableDictVO>[] = [
+    {
+      title: t('variableKey'),
+      dataIndex: 'key',
+      width: 160,
+    },
+    {
+      title: t('variableName'),
+      dataIndex: 'name',
+      width: 120,
+    },
+    {
+      title: t('variableDesc'),
+      dataIndex: 'desc',
+      ellipsis: true,
+      search: false,
+      width: 220,
+    },
+    {
+      title: t('variableScope'),
+      dataIndex: 'scope',
+      valueType: 'select',
+      valueEnum: {
+        通用: { text: '通用' },
+        物料: { text: '物料' },
+        设备: { text: '设备' },
+        客户: { text: '客户' },
+        '合金主数据': { text: '合金主数据' },
+        组织: { text: '组织' },
+        产品族: { text: '产品族' },
+      },
+      width: 110,
+      render: (_, r) => <Tag color="cyan">{r.scope}</Tag>,
+    },
+    {
+      title: t('variableExample'),
+      dataIndex: 'example',
+      width: 100,
+      search: false,
+    },
+    {
+      title: t('status'),
+      dataIndex: 'status',
+      valueType: 'select',
+      valueEnum: {
+        0: { text: t('enable'), status: 'Success' },
+        1: { text: tc('disable'), status: 'Error' },
+      },
+      width: 80,
+      render: (_, record) => {
+        const item = VARIABLE_DICT_STATUS[record.status as keyof typeof VARIABLE_DICT_STATUS];
+        return item ? <Tag color={item.color}>{t(item.label as 'enable')}</Tag> : '-';
+      },
+    },
+    {
+      title: tc('operation'),
+      key: 'action',
+      fixed: 'right',
+      search: false,
+      width: 120,
+      render: (_, record) => (
+        <Space size="small">
+          <Button
+            type="link"
+            size="small"
+            onClick={() => {
+              setEditId(record.id);
+              setDrawerOpen(true);
+            }}
+          >
+            {tc('edit')}
+          </Button>
+          {record.status === 0 && (
+            <Button type="link" size="small" danger onClick={() => handleDisable(record)}>
+              {tc('disable')}
+            </Button>
+          )}
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <ProTable<VariableDictVO>
+        columns={columns}
+        actionRef={actionRef}
+        rowKey="id"
+        headerTitle={t('variableList')}
+        scroll={{ x: 1000 }}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        request={async (params: any) => {
+          const { current, pageSize, ...rest } = params;
+          const { data } = await getVariableDictPage({
+            pageNo: current ?? 1,
+            pageSize: pageSize ?? 10,
+            ...rest,
+          });
+          return { data: data.list, total: data.total, success: true };
+        }}
+        pagination={{ defaultPageSize: 10 }}
+        search={{ labelWidth: 'auto' }}
+        toolBarRender={() => [
+          <Button
+            key="add"
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => {
+              setEditId(null);
+              setDrawerOpen(true);
+            }}
+          >
+            {t('addVariable')}
+          </Button>,
+        ]}
+      />
+
+      <VariableDictDrawer
+        open={drawerOpen}
+        id={editId}
+        onSuccess={() => {
+          setDrawerOpen(false);
+          reload();
+        }}
+        onClose={() => setDrawerOpen(false)}
+      />
+    </>
+  );
+};
+
+export default VariableDictPage;

package/references/antd-front-demo/src/pages/profile/index.tsx

@@ -0,0 +1,136 @@
+import { useEffect, useState } from 'react';
+import { Card, Tabs, Form, Input, Select, Button, App, Descriptions, Spin, Space } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { getUserProfileApi, updateUserProfileApi, updateUserPasswordApi } from '@/api/auth';
+import type { UserInfo } from '@/types/auth';
+
+const ProfilePage: React.FC = () => {
+  const { t } = useTranslation('profile');
+  const { message } = App.useApp();
+  const [profile, setProfile] = useState<UserInfo | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [basicForm] = Form.useForm();
+  const [pwdForm] = Form.useForm();
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setLoading(true);
+    getUserProfileApi()
+      .then((resp) => {
+        setProfile(resp.data);
+        basicForm.setFieldsValue(resp.data);
+      })
+      .finally(() => setLoading(false));
+  }, [basicForm]);
+
+  const handleBasicSave = async () => {
+    const values = await basicForm.validateFields();
+    await updateUserProfileApi(values);
+    message.success(t('modifySuccess'));
+  };
+
+  const handlePasswordSave = async () => {
+    const values = await pwdForm.validateFields();
+    await updateUserPasswordApi({ oldPassword: values.oldPassword, newPassword: values.newPassword });
+    message.success(t('passwordChangeSuccess'));
+    pwdForm.resetFields();
+  };
+
+  if (loading) return <Spin style={{ display: 'block', margin: '100px auto' }} />;
+
+  return (
+    <div>
+      <Card style={{ marginBottom: 16 }}>
+        <Descriptions title={t('userInfo')} column={2}>
+          <Descriptions.Item label={t('username')}>{profile?.username}</Descriptions.Item>
+          <Descriptions.Item label={t('nickname')}>{profile?.nickname}</Descriptions.Item>
+          <Descriptions.Item label={t('dept')}>{profile?.dept?.name}</Descriptions.Item>
+          <Descriptions.Item label={t('roles')}>{profile?.roles?.map((r) => r.name).join(', ')}</Descriptions.Item>
+          <Descriptions.Item label={t('phone')}>{profile?.mobile}</Descriptions.Item>
+          <Descriptions.Item label={t('email')}>{profile?.email}</Descriptions.Item>
+          <Descriptions.Item label={t('createTime')}>{profile?.createTime}</Descriptions.Item>
+        </Descriptions>
+      </Card>
+
+      <Card>
+        <Tabs
+          items={[
+            {
+              key: 'basic',
+              label: t('basicInfo'),
+              children: (
+                <Form form={basicForm} layout="vertical" style={{ maxWidth: 500 }}>
+                  <Form.Item name="nickname" label={t('nickname')} rules={[{ required: true, message: t('enterNickname') }]}>
+                    <Input placeholder={t('enterNickname')} />
+                  </Form.Item>
+                  <Form.Item name="email" label={t('email')} rules={[{ type: 'email', message: t('emailInvalid') }]}>
+                    <Input placeholder={t('enterEmail')} />
+                  </Form.Item>
+                  <Form.Item name="mobile" label={t('phone')} rules={[{ pattern: /^1\d{10}$/, message: t('phoneInvalid') }]}>
+                    <Input placeholder={t('enterPhone')} />
+                  </Form.Item>
+                  <Form.Item name="sex" label={t('gender')}>
+                    <Select
+                      options={[
+                        { value: 1, label: t('male') },
+                        { value: 2, label: t('female') },
+                      ]}
+                    />
+                  </Form.Item>
+                  <Form.Item>
+                    <Button type="primary" onClick={handleBasicSave}>{t('save')}</Button>
+                  </Form.Item>
+                </Form>
+              ),
+            },
+            {
+              key: 'password',
+              label: t('modifyPassword'),
+              children: (
+                <Form form={pwdForm} layout="vertical" style={{ maxWidth: 500 }}>
+                  <Form.Item name="oldPassword" label={t('oldPasswordLabel')} rules={[{ required: true, message: t('enterOldPassword') }]}>
+                    <Input.Password placeholder={t('enterOldPassword')} />
+                  </Form.Item>
+                  <Form.Item
+                    name="newPassword"
+                    label={t('enterNewPassword')}
+                    rules={[
+                      { required: true, message: t('enterNewPassword') },
+                      { min: 4, max: 16, message: t('passwordLength') },
+                    ]}
+                  >
+                    <Input.Password placeholder={t('enterNewPassword')} />
+                  </Form.Item>
+                  <Form.Item
+                    name="confirmPassword"
+                    label={t('confirmNewPassword')}
+                    dependencies={['newPassword']}
+                    rules={[
+                      { required: true, message: t('enterPasswordAgain') },
+                      ({ getFieldValue }) => ({
+                        validator(_, value) {
+                          if (!value || getFieldValue('newPassword') === value) return Promise.resolve();
+                          return Promise.reject(new Error(t('passwordMismatchReset')));
+                        },
+                      }),
+                    ]}
+                  >
+                    <Input.Password placeholder={t('enterPasswordAgain')} />
+                  </Form.Item>
+                  <Form.Item>
+                    <Space>
+                      <Button type="primary" onClick={handlePasswordSave}>{t('save')}</Button>
+                      <Button onClick={() => pwdForm.resetFields()}>{t('reset')}</Button>
+                    </Space>
+                  </Form.Item>
+                </Form>
+              ),
+            },
+          ]}
+        />
+      </Card>
+    </div>
+  );
+};
+
+export default ProfilePage;

package/references/antd-front-demo/src/pages/system/dept/components/DeptDrawer.tsx

@@ -0,0 +1,157 @@
+import { useEffect, useRef, useState } from 'react';
+import { Drawer, Form, Input, InputNumber, Radio, TreeSelect, Button, Space, Card } from 'antd';
+import type { DefaultOptionType } from 'antd/es/select';
+import { App } from 'antd';
+import { getDept, getDeptList, createDept, updateDept } from '@/api/system/dept';
+import type { SystemDept } from '@/api/system/dept';
+import { useTranslation } from 'react-i18next';
+
+const DEFAULT_FORM = { sort: 0, status: 0 };
+
+/** Build tree-select data from flat dept list */
+function buildDeptTreeSelect(list: SystemDept[]): DefaultOptionType[] {
+  const map = new Map<number, DefaultOptionType>();
+  const roots: DefaultOptionType[] = [];
+
+  for (const item of list) {
+    map.set(item.id!, {
+      value: item.id,
+      title: item.name,
+      children: [],
+    });
+  }
+
+  for (const item of list) {
+    const node = map.get(item.id!)!;
+    if (item.parentId === 0 || !map.has(item.parentId)) {
+      roots.push(node);
+    } else {
+      map.get(item.parentId)!.children.push(node);
+    }
+  }
+
+  return roots;
+}
+
+interface DeptDrawerProps {
+  open: boolean;
+  id: number | null;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+const DeptDrawer: React.FC<DeptDrawerProps> = ({ open, id, onSuccess, onClose }) => {
+  const { t } = useTranslation('system/dept');
+  const { t: tc } = useTranslation('common');
+  const { message } = App.useApp();
+  const [form] = Form.useForm();
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [deptTree, setDeptTree] = useState<DefaultOptionType[]>([]);
+  // 保留服务端原始字段，避免编辑时丢掉未在表单里出现的字段
+  const originData = useRef<Partial<SystemDept>>({});
+  const isEdit = id != null;
+
+  useEffect(() => {
+    if (open) {
+      form.resetFields();
+      originData.current = {};
+      // Load dept tree for parent selector
+      getDeptList().then(({ data }) => setDeptTree(buildDeptTreeSelect(data))).catch(() => { });
+      // Load dept data in edit mode
+      if (id) {
+        getDept(id).then(({ data }) => {
+          originData.current = { ...data };
+          form.setFieldsValue(data);
+        }).catch(() => { });
+      } else {
+        form.setFieldsValue(DEFAULT_FORM);
+      }
+    }
+  }, [open, id, form]);
+
+  const handleOk = async () => {
+    let values: SystemDept;
+    try { values = await form.validateFields(); } catch { return; }
+    setConfirmLoading(true);
+    try {
+      const payload = { ...originData.current, ...values, ...(id != null ? { id } : {}) } as SystemDept;
+      if (isEdit) {
+        await updateDept(payload);
+        message.success(tc('success'));
+      } else {
+        await createDept(payload);
+        message.success(tc('success'));
+      }
+      onSuccess();
+    } finally {
+      setConfirmLoading(false);
+    }
+  };
+
+  return (
+    <Drawer
+      title={isEdit ? t('editTitle') : t('addTitle')}
+      open={open}
+      onClose={onClose}
+      destroyOnHidden={true}
+      size={256}
+      closable={{ placement: 'end' }}
+      mask={{ closable: false }}
+      styles={{ body: { background: '#f5f5f5' } }}
+      footer={
+        <Space style={{ float: 'right' }}>
+          <Button onClick={onClose}>{tc('cancel')}</Button>
+          <Button type="primary" loading={confirmLoading} onClick={handleOk}>
+            {tc('confirm')}
+          </Button>
+        </Space>
+      }
+    >
+      <Card style={{ border: 'none' }}>
+        <Form form={form} layout="vertical" initialValues={DEFAULT_FORM} autoComplete="off">
+          <Form.Item name="parentId" label={t('parentName')}>
+            <TreeSelect
+              placeholder={t('parentPlaceholder')}
+              treeData={deptTree}
+              treeDefaultExpandAll
+              allowClear
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="name"
+            label={t('name')}
+            rules={[{ required: true, message: t('namePlaceholder') }]}
+          >
+            <Input placeholder={t('namePlaceholder')} />
+          </Form.Item>
+
+          <Form.Item name="sort" label={t('sort')}>
+            <InputNumber min={0} style={{ width: '100%' }} />
+          </Form.Item>
+
+          <Form.Item name="leaderUserId" label={t('leader')}>
+            <Input placeholder={t('leaderPlaceholder')} />
+          </Form.Item>
+
+          <Form.Item name="phone" label={t('phone')}>
+            <Input placeholder={t('phonePlaceholder')} />
+          </Form.Item>
+
+          <Form.Item name="email" label={t('email')}>
+            <Input placeholder={t('emailPlaceholder')} />
+          </Form.Item>
+
+          <Form.Item name="status" label={t('status')}>
+            <Radio.Group>
+              <Radio value={0}>{tc('enable')}</Radio>
+              <Radio value={1}>{tc('disable')}</Radio>
+            </Radio.Group>
+          </Form.Item>
+        </Form>
+      </Card>
+    </Drawer>
+  );
+};
+
+export default DeptDrawer;

package/references/antd-front-demo/src/pages/system/dept/index.tsx

@@ -0,0 +1,224 @@
+import { useCallback, useRef, useState } from 'react';
+import { Button, Space, Tag, Popconfirm } from 'antd';
+import { PlusOutlined, DownOutlined, RightOutlined } from '@ant-design/icons';
+import { ProTable } from '@ant-design/pro-components';
+import type { ActionType, ProColumns } from '@ant-design/pro-components';
+import { useTranslation } from 'react-i18next';
+import { App } from 'antd';
+import { Access } from '@/components/Access';
+import { getDeptList, deleteDept } from '@/api/system/dept';
+import type { SystemDept } from '@/api/system/dept';
+import { dateFormatter } from '@/utils/formatTime';
+import DeptDrawer from './components/DeptDrawer';
+
+/** Build tree from flat dept list for display */
+function buildDeptTree(list: SystemDept[]): (SystemDept & { children?: SystemDept[] })[] {
+  const map = new Map<number, SystemDept & { children?: SystemDept[] }>();
+  const roots: (SystemDept & { children?: SystemDept[] })[] = [];
+
+  for (const item of list) {
+    map.set(item.id!, { ...item, children: [] });
+  }
+
+  for (const item of list) {
+    const node = map.get(item.id!)!;
+    if (item.parentId === 0 || !map.has(item.parentId)) {
+      roots.push(node);
+    } else {
+      const parent = map.get(item.parentId)!;
+      if (!parent.children) parent.children = [];
+      parent.children.push(node);
+    }
+  }
+
+  // Remove empty children arrays
+  const cleanTree = (nodes: (SystemDept & { children?: SystemDept[] })[]) => {
+    for (const node of nodes) {
+      if (node.children && node.children.length === 0) {
+        delete node.children;
+      } else if (node.children) {
+        cleanTree(node.children);
+      }
+    }
+  };
+  cleanTree(roots);
+
+  return roots;
+}
+
+const DeptPage: React.FC = () => {
+  const { t } = useTranslation('system/dept');
+  const { t: tc } = useTranslation('common');
+  const { message } = App.useApp();
+  const actionRef = useRef<ActionType>(null);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editId, setEditId] = useState<number | null>(null);
+  const [treeData, setTreeData] = useState<(SystemDept & { children?: SystemDept[] })[]>([]);
+  const [expandedRowKeys, setExpandedRowKeys] = useState<number[]>([]);
+  const [allKeys, setAllKeys] = useState<number[]>([]);
+
+  const loadData = useCallback(async () => {
+    const { data } = await getDeptList();
+    const tree = buildDeptTree(data);
+    setTreeData(tree);
+
+    // Collect all keys for expand/collapse
+    const keys: number[] = [];
+    const collectKeys = (nodes: (SystemDept & { children?: SystemDept[] })[]) => {
+      for (const node of nodes) {
+        if (node.children && node.children.length > 0) {
+          keys.push(node.id!);
+          collectKeys(node.children);
+        }
+      }
+    };
+    collectKeys(tree);
+    setAllKeys(keys);
+    setExpandedRowKeys(keys); // Default: expand all
+
+    return { data: tree, total: tree.length, success: true };
+  }, []);
+
+  const handleDelete = (id: number) => async () => {
+    try {
+      await deleteDept(id);
+      message.success(tc('success'));
+      loadData();
+    } catch { /* request 拦截器已弹出错误提示 */ }
+  };
+
+  const toggleExpandAll = () => {
+    if (expandedRowKeys.length > 0) {
+      setExpandedRowKeys([]);
+    } else {
+      setExpandedRowKeys(allKeys);
+    }
+  };
+
+  const columns: ProColumns<SystemDept>[] = [
+    {
+      title: t('name'),
+      dataIndex: 'name',
+      ellipsis: true,
+      width: 200,
+    },
+    {
+      title: t('sort'),
+      dataIndex: 'sort',
+      search: false,
+      width: 80,
+    },
+    {
+      title: t('status'),
+      dataIndex: 'status',
+      search: false,
+      width: 100,
+      render: (_, record) => (
+        <Tag color={record.status === 0 ? 'success' : 'error'}>
+          {record.status === 0 ? tc('enable') : tc('disable')}
+        </Tag>
+      ),
+    },
+    {
+      title: t('leader'),
+      dataIndex: 'leaderUserId',
+      search: false,
+      width: 120,
+      render: (_, record) => record.leaderUserId || '-',
+    },
+    {
+      title: t('phone'),
+      dataIndex: 'phone',
+      search: false,
+      width: 130,
+    },
+    {
+      title: t('email'),
+      dataIndex: 'email',
+      search: false,
+      width: 180,
+    },
+    {
+      title: t('createTime'),
+      dataIndex: 'createTime',
+      search: false,
+      width: 180,
+      render: (_, record) => dateFormatter(record.createTime) || '-',
+    },
+    {
+      title: tc('operation'),
+      key: 'action',
+      fixed: 'right',
+      search: false,
+      width: 150,
+      render: (_, record) => (
+        <Space>
+          <Access code="system:dept:update">
+            <a
+              onClick={() => {
+                setEditId(record.id!);
+                setModalOpen(true);
+              }}
+            >
+              {tc('edit')}
+            </a>
+          </Access>
+          <Access code="system:dept:delete">
+            <Popconfirm title={t('deleteConfirm')} onConfirm={handleDelete(record.id!)}>
+              <a style={{ color: '#ff4d4f' }}>{tc('delete')}</a>
+            </Popconfirm>
+          </Access>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <ProTable<SystemDept>
+        columns={columns}
+        actionRef={actionRef}
+        rowKey="id"
+        headerTitle={t('title')}
+        dataSource={treeData}
+        search={false}
+        pagination={false}
+        expandable={{
+          expandedRowKeys,
+          onExpandedRowsChange: (keys) => setExpandedRowKeys(keys as number[]),
+        }}
+        scroll={{ x: 1100 }}
+        request={loadData}
+        toolBarRender={() => [
+          <Button key="expand" icon={expandedRowKeys.length > 0 ? <DownOutlined /> : <RightOutlined />} onClick={toggleExpandAll}>
+            {expandedRowKeys.length > 0 ? tc('cancel') : tc('confirm')}
+          </Button>,
+          <Access code="system:dept:create" key="add">
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
+              onClick={() => {
+                setEditId(null);
+                setModalOpen(true);
+              }}
+            >
+              {tc('create')}
+            </Button>
+          </Access>,
+        ]}
+      />
+
+      <DeptDrawer
+        open={modalOpen}
+        id={editId}
+        onSuccess={() => {
+          setModalOpen(false);
+          loadData();
+        }}
+        onClose={() => setModalOpen(false)}
+      />
+    </>
+  );
+};
+
+export default DeptPage;