zt-admin-template 1.0.0

package/template/src/pages/system/user/User.tsx

@@ -0,0 +1,364 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Table,
+  Button,
+  Modal,
+  Form,
+  Input,
+  Select,
+  Switch,
+  Space,
+  Popconfirm,
+  message,
+  Card,
+  Row,
+  Col,
+  Tooltip,
+} from 'antd';
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  SearchOutlined,
+  ReloadOutlined,
+  DownloadOutlined,
+} from '@ant-design/icons';
+import type { TableColumnsType } from 'antd';
+import dayjs from 'dayjs';
+import { getUserList, addUser, updateUser, deleteUser, type UserRecord } from '@/api/user';
+
+const User = () => {
+  const [form] = Form.useForm();
+  const [searchForm] = Form.useForm();
+  const [users, setUsers] = useState<UserRecord[]>([]);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [editingUser, setEditingUser] = useState<UserRecord | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [tableLoading, setTableLoading] = useState(false);
+  const [pagination, setPagination] = useState({ pageNum: 1, pageSize: 10, total: 0 });
+  const [searchParams, setSearchParams] = useState<{ username?: string; phonenumber?: string; status?: number }>({});
+
+  // 获取用户列表
+  const fetchUsers = async (pageNum = 1, pageSize = 10, params?: { username?: string; phonenumber?: string; status?: number }) => {
+    try {
+      setTableLoading(true);
+      const searchValues = params || searchParams;
+      const response = await getUserList({ pageNum, pageSize, ...searchValues });
+      setUsers(response.rows);
+      setPagination({ pageNum, pageSize, total: response.total });
+    } catch (error) {
+      console.error('获取用户列表失败:', error);
+    } finally {
+      setTableLoading(false);
+    }
+  };
+
+  // 初始化加载
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
+  const columns: TableColumnsType<UserRecord> = [
+    {
+      title: '用户编号',
+      dataIndex: 'id',
+      key: 'id',
+      width: 100,
+    },
+    {
+      title: '用户名称',
+      dataIndex: 'username',
+      key: 'username',
+      width: 120,
+    },
+    {
+      title: '用户昵称',
+      dataIndex: 'nickName',
+      key: 'nickName',
+      width: 120,
+    },
+    {
+      title: '部门',
+      dataIndex: 'dept',
+      key: 'dept',
+      width: 120,
+    },
+    {
+      title: '手机号码',
+      dataIndex: 'phonenumber',
+      key: 'phonenumber',
+      width: 130,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: 80,
+      render: (status: number) => (
+        <Switch checked={status === 0} disabled />
+      ),
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      width: 180,
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 200,
+      fixed: 'right',
+      render: (_, record) => (
+        <Space size="small">
+          <Tooltip title="编辑">
+            <Button
+              type="primary"
+              size="small"
+              icon={<EditOutlined />}
+              onClick={() => handleEdit(record)}
+            />
+          </Tooltip>
+          <Tooltip title="删除">
+            <Popconfirm
+              title="删除用户"
+              description="确定删除该用户吗？"
+              onConfirm={() => handleDelete(record.id)}
+              okText="确定"
+              cancelText="取消"
+            >
+              <Button danger size="small" icon={<DeleteOutlined />} />
+            </Popconfirm>
+          </Tooltip>
+        </Space>
+      ),
+    },
+  ];
+
+  const handleAdd = () => {
+    setEditingUser(null);
+    form.resetFields();
+    setIsModalVisible(true);
+  };
+
+  const handleEdit = (record: UserRecord) => {
+    setEditingUser(record);
+    form.setFieldsValue({
+      username: record.username,
+      nickName: record.nickName,
+      email: record.email,
+      phonenumber: record.phonenumber,
+      sex: record.sex,
+      status: record.status === 0,
+      dept: record.dept,
+      remark: record.remark,
+    });
+    setIsModalVisible(true);
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      await deleteUser(id);
+      message.success('删除成功');
+      fetchUsers(pagination.pageNum, pagination.pageSize);
+    } catch (error) {
+      console.error('删除失败:', error);
+    }
+  };
+
+  const handleModalOk = async () => {
+    try {
+      const values = await form.validateFields();
+      setLoading(true);
+
+      if (editingUser) {
+        await updateUser({
+          ...editingUser,
+          ...values,
+          status: values.status ? 0 : 1,
+        });
+        message.success('编辑成功');
+      } else {
+        await addUser({
+          ...values,
+          status: values.status ? 0 : 1,
+        });
+        message.success('添加成功');
+      }
+
+      setIsModalVisible(false);
+      form.resetFields();
+      fetchUsers(pagination.pageNum, pagination.pageSize);
+    } catch (error) {
+      console.error('操作失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSearch = (values: any) => {
+    const { username, phonenumber, status } = values;
+    const params = { username, phonenumber, status };
+    setSearchParams(params);
+    fetchUsers(1, pagination.pageSize, params);
+  };
+
+  const handleReset = () => {
+    searchForm.resetFields();
+    setSearchParams({});
+    fetchUsers(1, pagination.pageSize, {});
+  };
+
+  const handleExport = () => {
+    message.success('导出成功');
+  };
+
+  return (
+    <div style={{ padding: '24px' }}>
+      <Card style={{ marginBottom: '24px' }}>
+        <Form
+          form={searchForm}
+          layout="inline"
+          onFinish={handleSearch}
+          style={{ marginBottom: '16px' }}
+        >
+          <Form.Item name="username" label="用户名称">
+            <Input placeholder="请输入用户名称" />
+          </Form.Item>
+          <Form.Item name="phonenumber" label="手机号码">
+            <Input placeholder="请输入手机号码" />
+          </Form.Item>
+          <Form.Item name="status" label="状态">
+            <Select placeholder="请选择状态" style={{ width: 120 }} allowClear>
+              <Select.Option value={0}>正常</Select.Option>
+              <Select.Option value={1}>停用</Select.Option>
+            </Select>
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
+              搜索
+            </Button>
+          </Form.Item>
+          <Form.Item>
+            <Button onClick={handleReset}>重置</Button>
+          </Form.Item>
+        </Form>
+      </Card>
+
+      <Card>
+        <Row gutter={[16, 16]} style={{ marginBottom: '16px' }}>
+          <Col>
+            <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
+              新增
+            </Button>
+          </Col>
+          <Col>
+            <Button icon={<ReloadOutlined />} onClick={() => fetchUsers(pagination.pageNum, pagination.pageSize)}>
+              刷新
+            </Button>
+          </Col>
+          <Col>
+            <Button icon={<DownloadOutlined />} onClick={handleExport}>
+              导出
+            </Button>
+          </Col>
+        </Row>
+
+        <Table
+          columns={columns}
+          dataSource={users}
+          rowKey="id"
+          loading={tableLoading}
+          pagination={{
+            current: pagination.pageNum,
+            pageSize: pagination.pageSize,
+            total: pagination.total,
+            showSizeChanger: true,
+            showQuickJumper: true,
+            showTotal: (total: number) => `共 ${total} 条`,
+            onChange: (page, pageSize) => fetchUsers(page, pageSize, searchParams),
+          }}
+          scroll={{ x: 1200 }}
+        />
+      </Card>
+
+      <Modal
+        title={editingUser ? '编辑用户' : '新增用户'}
+        open={isModalVisible}
+        onOk={handleModalOk}
+        onCancel={() => {
+          setIsModalVisible(false);
+          form.resetFields();
+        }}
+        width={600}
+        confirmLoading={loading}
+      >
+        <Form form={form} layout="vertical" autoComplete="off">
+          <Form.Item
+            name="username"
+            label="用户名称"
+            rules={[{ required: true, message: '请输入用户名称' }]}
+          >
+            <Input placeholder="请输入用户名称" disabled={!!editingUser} />
+          </Form.Item>
+
+          <Form.Item
+            name="nickName"
+            label="用户昵称"
+            rules={[{ required: true, message: '请输入用户昵称' }]}
+          >
+            <Input placeholder="请输入用户昵称" />
+          </Form.Item>
+
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item name="email" label="邮箱" rules={[{ type: 'email', message: '邮箱格式不正确' }]}>
+                <Input placeholder="请输入邮箱" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                name="phonenumber"
+                label="手机号码"
+                rules={[{ pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确' }]}
+              >
+                <Input placeholder="请输入手机号码" />
+              </Form.Item>
+            </Col>
+          </Row>
+
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item name="sex" label="性别">
+                <Select placeholder="请选择性别">
+                  <Select.Option value="0">男</Select.Option>
+                  <Select.Option value="1">女</Select.Option>
+                  <Select.Option value="2">未知</Select.Option>
+                </Select>
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item name="dept" label="部门">
+                <Select placeholder="请选择部门">
+                  <Select.Option value="研发部门">研发部门</Select.Option>
+                  <Select.Option value="测试部门">测试部门</Select.Option>
+                  <Select.Option value="运维部门">运维部门</Select.Option>
+                </Select>
+              </Form.Item>
+            </Col>
+          </Row>
+
+          <Form.Item name="status" label="状态" valuePropName="checked">
+            <Switch checkedChildren="正常" unCheckedChildren="停用" />
+          </Form.Item>
+
+          <Form.Item name="remark" label="备注">
+            <Input.TextArea placeholder="请输入备注" rows={3} />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+export default User;

package/template/src/types/permission.ts

@@ -0,0 +1,21 @@
+import React from "react";
+
+// 该文件用来定义权限相关的类型
+export type PermissionCode = string;
+
+// 定义用户拥有的权限信息 类型
+export interface UserPermission{
+    permissions:PermissionCode[],  // 用户的权限数组
+    roles:string[] // 用户拥有的角色列表
+}
+
+// 路由权限信息
+export interface AuthRouteConfig{
+    path:string,
+    element:React.ReactNode,
+    title?:string,
+    icon?:string,
+    permission?:PermissionCode,// 访问该路由需要具备的权限码
+    children?:AuthRouteConfig[], 
+    hidden?:boolean
+}

package/template/src/utils/request.tsx

@@ -0,0 +1,94 @@
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+import { message } from 'antd';
+
+// 获取 API 地址
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8080';
+
+// 创建 axios 实例
+const instance: AxiosInstance = axios.create({
+  baseURL: API_URL,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// 请求拦截器
+instance.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器 —— 直接返回 data，绕过 AxiosResponse 包装
+instance.interceptors.response.use(
+  (response: AxiosResponse) => {
+    const { code, message: msg, data } = response.data;
+
+    if (code === 200 || code === 0) {
+      return data as any;
+    }
+
+    message.error(msg || '请求失败');
+    return Promise.reject(new Error(msg || '请求失败'));
+  },
+  (error) => {
+    if (error.response) {
+      const { status, data } = error.response;
+      const msg = data?.message || '请求失败';
+
+      switch (status) {
+        case 401:
+          message.error('登录已过期，请重新登录');
+          localStorage.removeItem('token');
+          window.location.href = '/login';
+          break;
+        case 403:
+          message.error('没有权限访问');
+          break;
+        case 404:
+          message.error('请求的资源不存在');
+          break;
+        case 500:
+          message.error('服务器内部错误');
+          break;
+        default:
+          message.error(msg);
+      }
+    } else if (error.request) {
+      message.error('网络错误，请检查网络连接');
+    } else {
+      message.error('请求配置错误');
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+// 用类型包装，让 get/post 等方法返回 Promise<T> 而非 Promise<AxiosResponse<T>>
+export const request = {
+  get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    return instance.get(url, config) as unknown as Promise<T>;
+  },
+  post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+    return instance.post(url, data, config) as unknown as Promise<T>;
+  },
+  put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+    return instance.put(url, data, config) as unknown as Promise<T>;
+  },
+  delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    return instance.delete(url, config) as unknown as Promise<T>;
+  },
+  patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+    return instance.patch(url, data, config) as unknown as Promise<T>;
+  },
+};
+
+export default instance;

package/template/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/tsconfig.app.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+
+    /* Linting */
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/template/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/template/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'koa-server/public',
+    emptyOutDir: true,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+      '/upload': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+      },
+    },
+  },
+})