README.md

@@ -98,4 +98,140 @@ Learn more about the recommended Project Setup and IDE Support in the [Vue Docs
 
 4. 添加axios依赖
 
+   ```shell
+   npm install axios
+   ```
+
+   配置axios-instance.ts
+
+   ```typescript
+   import axios, {type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios';
+   
+   // 自定义配置接口
+   export interface CustomInstanceConfig extends AxiosRequestConfig {
+       // 可以添加自定义配置
+       skipAuth?: boolean; // 是否跳过鉴权
+   }
+   
+   // 创建 Axios 实例
+   const axiosInstance: AxiosInstance = axios.create({
+       baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
+       timeout: 30000,
+       headers: {
+           'Content-Type': 'application/json',
+       },
+   });
+   
+   // 请求拦截器
+   axiosInstance.interceptors.request.use(
+       (config) => {
+           // 添加 token
+           const token = localStorage.getItem('token');
+           if (token) {
+               config.headers.Authorization = `Bearer ${token}`;
+           }
+           return config;
+       },
+       (error) => {
+           return Promise.reject(error);
+       }
+   );
+   
+   // 响应拦截器
+   axiosInstance.interceptors.response.use(
+       (response: AxiosResponse) => {
+           // 根据后端返回格式调整
+           if (response.data.code !== 0) {
+               return Promise.reject(new Error(response.data.message || '请求失败'));
+           }
+           return response.data;
+       },
+       (error) => {
+           // 统一错误处理
+           if (error.response?.status === 401) {
+               // 未授权，跳转登录
+               window.location.href = '/login';
+           }
+           return Promise.reject(error);
+       }
+   );
+   
+   // 自定义实例函数（供 Orval 使用）
+   export const customAxiosInstance = <T>(config: CustomInstanceConfig): Promise<T> => {
+       return axiosInstance(config);
+   };
+   
+   // 也可以导出第二参数形式（如需处理完整响应）
+   export const customAxiosInstanceWithFullResponse = <T>(
+       config: CustomInstanceConfig
+   ): Promise<AxiosResponse<T>> => {
+       return axiosInstance(config);
+   };
+   ```
+
+   
+
 5. openAPI自动生成接口调用
+
+   使用orval进行API生成
+
+   ```shell
+   npm install orval
+   ```
+
+   编写orval.config.ts配置文件
+
+   ```typescript
+   import { defineConfig } from 'orval';
+   
+   export default defineConfig({
+       'your-api': {
+           // OpenAPI 规范文件路径（支持本地文件或 URL）
+           input: {
+               target: 'http://localhost:8080/v3/api-docs', // 可改为你的 Swagger JSON 地址，如：http://localhost:8000/openapi.json
+           },
+           output: {
+               // 生成代码的模式：tags-按接口标签拆分文件
+               mode: 'tags',
+               // 客户端类型：使用 axios
+               client: 'axios',
+               // 生成 vue-query hooks
+               target: './src/api/client.ts',
+               // 生成的 TypeScript 类型存放目录
+               schemas: './src/api/models',
+               // 每次生成前自动清理旧文件
+               clean: true,
+               // 覆盖默认配置
+               override: {
+                   // 自定义 axios 实例
+                   mutator: {
+                       path: './src/util/axios-instance.ts',
+                       name: 'customAxiosInstance',
+                   },
+                   // 为每个接口生成 vue-query hooks
+                   query: {
+                       useQuery: true,      // 生成 useGetXXX hooks
+                       useMutation: true,   // 生成 usePostXXX hooks
+                   },
+               },
+           },
+           // 生成后自动格式化代码
+           hooks: {
+               afterAllFilesWrite: 'prettier --write',
+           },
+       },
+   });
+   ```
+
+   配置package.json文件中
+
+   ```json
+   {
+     "scripts": {
+      	...,
+       "api:gen": "orval"
+     },
+   }
+   ```
+
+   

orval.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig } from 'orval';
+
+export default defineConfig({
+    'your-api': {
+        // OpenAPI 规范文件路径（支持本地文件或 URL）
+        input: {
+            target: 'http://localhost:8080/v3/api-docs', // 可改为你的 Swagger JSON 地址，如：http://localhost:8000/openapi.json
+        },
+        output: {
+            // 生成代码的模式：tags-按接口标签拆分文件
+            mode: 'tags',
+
+            // 客户端类型：使用 axios
+            client: 'axios',
+
+            // 生成 vue-query hooks
+            target: './src/api/client.ts',
+
+            // 生成的 TypeScript 类型存放目录
+            schemas: './src/api/models',
+
+            // 每次生成前自动清理旧文件
+            clean: true,
+
+            // 覆盖默认配置
+            override: {
+                // 自定义 axios 实例
+                mutator: {
+                    path: './src/util/axios-instance.ts',
+                    name: 'customAxiosInstance',
+                },
+
+                // 为每个接口生成 vue-query hooks
+                query: {
+                    useQuery: true,      // 生成 useGetXXX hooks
+                    useMutation: true,   // 生成 usePostXXX hooks
+                },
+            },
+        },
+
+        // 生成后自动格式化代码
+        hooks: {
+            afterAllFilesWrite: 'prettier --write',
+        },
+    },
+});

package.json

@@ -6,10 +6,13 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "api:gen": "orval"
   },
   "dependencies": {
+    "axios": "^1.15.2",
     "element-plus": "^2.13.6",
+    "orval": "7.0",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
     "vue": "^3.5.13",
@@ -18,6 +21,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/tsconfig": "^0.7.0",
+    "prettier": "^3.8.3",
     "typescript": "~5.8.3",
     "vite": "^6.3.5",
     "vue-tsc": "^2.2.8"

src/api/models/deleteByIdParams.ts

@@ -0,0 +1,10 @@
+/**
+ * Generated by orval v7.0.1 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+
+export type DeleteByIdParams = {
+  ids: string[];
+};

src/api/models/fieldError.ts

@@ -0,0 +1,17 @@
+/**
+ * Generated by orval v7.0.1 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+
+export interface FieldError {
+  arguments?: unknown[];
+  bindingFailure?: boolean;
+  code?: string;
+  codes?: string[];
+  defaultMessage?: string;
+  field?: string;
+  objectName?: string;
+  rejectedValue?: unknown;
+}

src/api/models/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Generated by orval v7.0.1 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+
+export * from "./deleteByIdParams";
+export * from "./fieldError";
+export * from "./pageVoListUserVo";
+export * from "./queryByPageParams";
+export * from "./response";
+export * from "./responseBoolean";
+export * from "./responseListFieldError";
+export * from "./responsePageVoListUserVo";
+export * from "./responseUserVo";
+export * from "./updateUserAvatarDto";
+export * from "./updateUserPasswordDto";
+export * from "./updateUserStatusDto";
+export * from "./userDto";
+export * from "./userVo";

src/api/models/pageVoListUserVo.ts

@@ -0,0 +1,17 @@
+/**
+ * Generated by orval v7.0.1 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+import type { UserVo } from "./userVo";
+
+/**
+ * 分页数据对象
+ */
+export interface PageVoListUserVo {
+  /** 当前页的数据 */
+  data?: UserVo[];
+  /** 总数据条数 */
+  total?: number;
+}

src/api/models/queryByPageParams.ts

@@ -0,0 +1,15 @@
+/**
+ * Generated by orval v7.0.1 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+
+export type QueryByPageParams = {
+  account: string;
+  username: string;
+  role: string;
+  enable?: number;
+  pageNum?: number;
+  pageSize?: number;
+};

src/api/models/response.ts

@@ -0,0 +1,18 @@
+/**
+ * Generated by orval v7.0.1 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+
+/**
+ * 后端统一的响应实体
+ */
+export interface Response {
+  /** 状态码;200:成功 */
+  code?: number;
+  /** 响应的具体数据 */
+  data?: unknown;
+  /** 响应附加信息 */
+  message?: string;
+}

src/api/models/responseBoolean.ts

@@ -0,0 +1,18 @@
+/**
+ * Generated by orval v7.0.1 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+
+/**
+ * 后端统一的响应实体
+ */
+export interface ResponseBoolean {
+  /** 状态码;200:成功 */
+  code?: number;
+  /** 响应的具体数据 */
+  data?: boolean;
+  /** 响应附加信息 */
+  message?: string;
+}

src/api/models/responseListFieldError.ts

@@ -0,0 +1,19 @@
+/**
+ * Generated by orval v7.0.1 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+import type { FieldError } from "./fieldError";
+
+/**
+ * 后端统一的响应实体
+ */
+export interface ResponseListFieldError {
+  /** 状态码;200:成功 */
+  code?: number;
+  /** 响应的具体数据 */
+  data?: FieldError[];
+  /** 响应附加信息 */
+  message?: string;
+}

src/api/models/responsePageVoListUserVo.ts

@@ -0,0 +1,19 @@
+/**
+ * Generated by orval v7.0.1 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+import type { PageVoListUserVo } from "./pageVoListUserVo";
+
+/**
+ * 后端统一的响应实体
+ */
+export interface ResponsePageVoListUserVo {
+  /** 状态码;200:成功 */
+  code?: number;
+  /** 响应的具体数据 */
+  data?: PageVoListUserVo;
+  /** 响应附加信息 */
+  message?: string;
+}

src/api/models/responseUserVo.ts

@@ -0,0 +1,19 @@
+/**
+ * Generated by orval v7.0.1 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+import type { UserVo } from "./userVo";
+
+/**
+ * 后端统一的响应实体
+ */
+export interface ResponseUserVo {
+  /** 状态码;200:成功 */
+  code?: number;
+  /** 响应的具体数据 */
+  data?: UserVo;
+  /** 响应附加信息 */
+  message?: string;
+}

src/api/models/updateUserAvatarDto.ts

@@ -0,0 +1,23 @@
+/**
+ * Generated by orval v7.0.1 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+
+/**
+ * 更新用户头像的实体DTO
+ */
+export interface UpdateUserAvatarDto {
+  /**
+   * 头像地址的链接
+   * @minLength 1
+   * @pattern ^(https?)://[^\s/$.?#].[^\s]*$
+   */
+  avatar: string;
+  /**
+   * 用户的ID
+   * @minLength 1
+   */
+  id: string;
+}

src/api/models/updateUserPasswordDto.ts

@@ -0,0 +1,29 @@
+/**
+ * Generated by orval v7.0.1 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+
+/**
+ * 用户密码修改使用的DTO
+ */
+export interface UpdateUserPasswordDto {
+  /**
+   * 用户ID
+   * @minLength 1
+   */
+  id: string;
+  /**
+   * 用户的新密码
+   * @minLength 4
+   * @maxLength 20
+   */
+  oldPassword: string;
+  /**
+   * 用户的当前密码
+   * @minLength 4
+   * @maxLength 20
+   */
+  password: string;
+}

src/api/models/updateUserStatusDto.ts

@@ -0,0 +1,23 @@
+/**
+ * Generated by orval v7.0.1 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+
+/**
+ * 用户状态更新使用的DTO
+ */
+export interface UpdateUserStatusDto {
+  /**
+   * 更新后的状态;1:启用,0:禁用
+   * @minimum 0
+   * @maximum 1
+   */
+  enable: number;
+  /**
+   * 用户ID
+   * @minLength 1
+   */
+  id: string;
+}

src/api/models/userDto.ts

@@ -0,0 +1,38 @@
+/**
+ * Generated by orval v7.0.1 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+
+/**
+ * 用户新增和修改使用的DTO
+ */
+export interface UserDto {
+  /**
+   * 用户账号
+   * @minLength 4
+   * @maxLength 20
+   */
+  account: string;
+  /** 用户ID */
+  id?: string;
+  /**
+   * 用户密码
+   * @minLength 4
+   * @maxLength 20
+   */
+  password: string;
+  /**
+   * 用户角色
+   * @minLength 4
+   * @maxLength 32
+   */
+  role: string;
+  /**
+   * 用户名称
+   * @minLength 2
+   * @maxLength 32
+   */
+  username: string;
+}

src/api/models/userVo.ts

@@ -0,0 +1,24 @@
+/**
+ * Generated by orval v7.0.1 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+
+/**
+ * 用户响应展示对象
+ */
+export interface UserVo {
+  /** 用户账号 */
+  account?: string;
+  /** 用户头像地址 */
+  avatar?: string;
+  /** 用户状态;0:禁用,1:启用 */
+  enable?: number;
+  /** 用户ID */
+  id?: string;
+  /** 用户角色 */
+  role?: string;
+  /** 用户名称 */
+  username?: string;
+}

src/api/user-controller.ts

@@ -0,0 +1,116 @@
+/**
+ * Generated by orval v7.0.1 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+import type {
+  DeleteByIdParams,
+  QueryByPageParams,
+  Response,
+  ResponseBoolean,
+  ResponsePageVoListUserVo,
+  ResponseUserVo,
+  UpdateUserAvatarDto,
+  UpdateUserPasswordDto,
+  UpdateUserStatusDto,
+  UserDto,
+} from "./models";
+import { customAxiosInstance } from "../util/axios-instance";
+
+export const getUserController = () => {
+  const queryByPage = (params: QueryByPageParams) => {
+    return customAxiosInstance<ResponsePageVoListUserVo>({
+      url: `/user`,
+      method: "GET",
+      params,
+    });
+  };
+  const edit = (userDto: UserDto) => {
+    return customAxiosInstance<ResponseBoolean>({
+      url: `/user`,
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      data: userDto,
+    });
+  };
+  const add = (userDto: UserDto) => {
+    return customAxiosInstance<ResponseBoolean>({
+      url: `/user`,
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      data: userDto,
+    });
+  };
+  const deleteById = (params: DeleteByIdParams) => {
+    return customAxiosInstance<ResponseBoolean>({
+      url: `/user`,
+      method: "DELETE",
+      params,
+    });
+  };
+  const updateUserStatus = (updateUserStatusDto: UpdateUserStatusDto) => {
+    return customAxiosInstance<Response>({
+      url: `/user/updateStatus`,
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      data: updateUserStatusDto,
+    });
+  };
+  const updatePassword = (updateUserPasswordDto: UpdateUserPasswordDto) => {
+    return customAxiosInstance<Response>({
+      url: `/user/updatePassword`,
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      data: updateUserPasswordDto,
+    });
+  };
+  const updateUserAvatar = (updateUserAvatarDto: UpdateUserAvatarDto) => {
+    return customAxiosInstance<Response>({
+      url: `/user/updateAvatar`,
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      data: updateUserAvatarDto,
+    });
+  };
+  const queryById = (id: string) => {
+    return customAxiosInstance<ResponseUserVo>({
+      url: `/user/${id}`,
+      method: "GET",
+    });
+  };
+  return {
+    queryByPage,
+    edit,
+    add,
+    deleteById,
+    updateUserStatus,
+    updatePassword,
+    updateUserAvatar,
+    queryById,
+  };
+};
+export type QueryByPageResult = NonNullable<
+  Awaited<ReturnType<ReturnType<typeof getUserController>["queryByPage"]>>
+>;
+export type EditResult = NonNullable<
+  Awaited<ReturnType<ReturnType<typeof getUserController>["edit"]>>
+>;
+export type AddResult = NonNullable<
+  Awaited<ReturnType<ReturnType<typeof getUserController>["add"]>>
+>;
+export type DeleteByIdResult = NonNullable<
+  Awaited<ReturnType<ReturnType<typeof getUserController>["deleteById"]>>
+>;
+export type UpdateUserStatusResult = NonNullable<
+  Awaited<ReturnType<ReturnType<typeof getUserController>["updateUserStatus"]>>
+>;
+export type UpdatePasswordResult = NonNullable<
+  Awaited<ReturnType<ReturnType<typeof getUserController>["updatePassword"]>>
+>;
+export type UpdateUserAvatarResult = NonNullable<
+  Awaited<ReturnType<ReturnType<typeof getUserController>["updateUserAvatar"]>>
+>;
+export type QueryByIdResult = NonNullable<
+  Awaited<ReturnType<ReturnType<typeof getUserController>["queryById"]>>
+>;

src/util/axios-instance.ts

@@ -0,0 +1,62 @@
+import axios, {type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios';
+
+// 自定义配置接口
+export interface CustomInstanceConfig extends AxiosRequestConfig {
+    // 可以添加自定义配置
+    skipAuth?: boolean; // 是否跳过鉴权
+}
+
+// 创建 Axios 实例
+const axiosInstance: AxiosInstance = axios.create({
+    baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
+    timeout: 30000,
+    headers: {
+        'Content-Type': 'application/json',
+    },
+});
+
+// 请求拦截器
+axiosInstance.interceptors.request.use(
+    (config) => {
+        // 添加 token
+        const token = localStorage.getItem('token');
+        if (token) {
+            config.headers.Authorization = `Bearer ${token}`;
+        }
+        return config;
+    },
+    (error) => {
+        return Promise.reject(error);
+    }
+);
+
+// 响应拦截器
+axiosInstance.interceptors.response.use(
+    (response: AxiosResponse) => {
+        // 根据后端返回格式调整
+        if (response.data.code !== 0 && response.data.code !== 200) {
+            return Promise.reject(new Error(response.data.message || '请求失败'));
+        }
+        return response.data;
+    },
+    (error) => {
+        // 统一错误处理
+        if (error.response?.status === 401) {
+            // 未授权，跳转登录
+            window.location.href = '/login';
+        }
+        return Promise.reject(error);
+    }
+);
+
+// 自定义实例函数（供 Orval 使用）
+export const customAxiosInstance = <T>(config: CustomInstanceConfig): Promise<T> => {
+    return axiosInstance(config);
+};
+
+// 也可以导出第二参数形式（如需处理完整响应）
+export const customAxiosInstanceWithFullResponse = <T>(
+    config: CustomInstanceConfig
+): Promise<AxiosResponse<T>> => {
+    return axiosInstance(config);
+};

src/view/AboutView.vue

@@ -1,5 +1,8 @@
 <template>
 <h1>这是about页面</h1>
+  <el-text>
+    这是基于Vite + Vue + TypeScript构建的前端模板
+  </el-text>
 </template>
 
 <script setup lang="ts">

src/view/HomeView.vue

@@ -1,9 +1,10 @@
 <template>
-<HelloWorld msg="home"/>
+<el-text>
+  这是基于Vite + Vue + TypeScript构建的前端模板
+</el-text>
 </template>
 
 <script setup lang="ts">
-import HelloWorld from "../components/HelloWorld.vue";
 </script>
 
 <style scoped>

src/view/UserView.vue

@@ -1,11 +1,436 @@
 <script setup lang="ts">
+import { getUserController } from '@/api/user-controller'
+import type { QueryByPageParams, UserDto, UserVo } from '@/api/models'
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules, ElIcon } from 'element-plus'
+import { Plus, RefreshRight, Search, Delete, Edit } from '@element-plus/icons-vue'
+import { ref, reactive, computed } from 'vue'
 
+const api = getUserController()
+
+// 搜索表单
+const searchFormRef = ref<FormInstance>()
+const searchForm = reactive({
+  username: '',
+  account: '',
+  role: '',
+  enable: 1
+})
+
+// 用户表单(新增/编辑)
+const dialogVisible = ref(false)
+const dialogTitle = ref('新增用户')
+const formRef = ref<FormInstance>()
+const userForm = reactive<Partial<UserDto>>({
+  id: undefined,
+  username: '',
+  account: '',
+  password: '',
+  role: ''
+})
+const formRules: FormRules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 2, max: 32, message: '用户名长度需在 2 到 32 个字符之间', trigger: 'blur' }
+  ],
+  account: [
+    { required: true, message: '请输入账号', trigger: 'blur' },
+    { min: 4, max: 20, message: '账号长度需在 4 到 20 个字符之间', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 4, max: 20, message: '密码长度需在 4 到 20 个字符之间', trigger: 'blur' }
+  ],
+  role: [
+    { required: true, message: '请选择角色', trigger: 'change' },
+    { min: 4, max: 32, message: '角色长度需在 4 到 32 个字符之间', trigger: 'change' }
+  ]
+}
+
+// 表格数据
+const tableData = ref<UserVo[]>([])
+const loading = ref(false)
+const selectedRows = ref<UserVo[]>([])
+
+// 分页
+const pagination = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  total: 0
+})
+
+// 角色选项
+const roleOptions = [
+  { label: '管理员', value: 'admin' },
+  { label: '普通用户', value: 'user' },
+  // { label: '访客', value: 'guest' }
+]
+
+// 是否编辑模式
+const isEdit = computed(() => !!userForm.id)
+
+// 搜索
+const handleSearch = () => {
+  pagination.pageNum = 1
+  fetchData()
+}
+
+// 重置搜索
+const handleReset = () => {
+  searchFormRef.value?.resetFields()
+  handleSearch()
+}
+
+// 获取数据
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const condition: QueryByPageParams = {
+      username: searchForm.username || '',
+      account: searchForm.account || '',
+      role: searchForm.role || '',
+      enable: searchForm.enable,
+      pageNum: pagination.pageNum,
+      pageSize: pagination.pageSize
+    }
+    const res = await api.queryByPage(condition)
+    const pageData = res?.data
+    tableData.value = pageData?.data || []
+    pagination.total = pageData?.total || 0
+  } catch (err) {
+    ElMessage.error('获取数据失败')
+    tableData.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+// 翻页
+const handlePageChange = (page: number) => {
+  pagination.pageNum = page
+  fetchData()
+}
+
+// 每页条数变化
+const handleSizeChange = (size: number) => {
+  pagination.pageSize = size
+  pagination.pageNum = 1
+  fetchData()
+}
+
+// 打开新增
+const handleAdd = () => {
+  dialogTitle.value = '新增用户'
+  Object.assign(userForm, { id: undefined, username: '', account: '', password: '', role: '' })
+  dialogVisible.value = true
+}
+
+// 打开编辑
+const handleEdit = async (row: UserVo) => {
+  dialogTitle.value = '编辑用户'
+  try {
+    const id = row.id || ''
+    const res = await api.queryById(id)
+    if (res?.code === 0 || res?.code === 200) {
+      Object.assign(userForm, {
+        id: res.data?.id,
+        username: res.data?.username,
+        account: res.data?.account,
+        password: '',
+        role: res.data?.role
+      })
+      dialogVisible.value = true
+    }
+  } catch {
+    ElMessage.error('获取用户信息失败')
+  }
+}
+
+// 保存
+const handleSave = async () => {
+  await formRef.value?.validate(async (valid) => {
+    if (!valid) return
+    try {
+      const baseData = {
+        username: userForm.username!,
+        account: userForm.account!,
+        role: userForm.role!
+      }
+      
+      if (isEdit.value) {
+        const data: Partial<UserDto> = {
+          id: userForm.id,
+          ...baseData,
+          ...(userForm.password ? { password: userForm.password } : {})
+        }
+        const res = await api.edit(data as UserDto)
+        if (res?.code === 0 || res?.code === 200) {
+          ElMessage.success('修改成功')
+          dialogVisible.value = false
+          fetchData()
+        } else {
+          ElMessage.error(res?.message || '修改失败')
+        }
+      } else {
+        if (!userForm.password) {
+          ElMessage.warning('请输入密码')
+          return
+        }
+        const data: UserDto = {
+          ...baseData,
+          password: userForm.password!
+        }
+        const res = await api.add(data)
+        if (res?.code === 0 || res?.code === 200) {
+          ElMessage.success('新增成功')
+          dialogVisible.value = false
+          fetchData()
+        } else {
+          ElMessage.error(res?.message || '新增失败')
+        }
+      }
+    } catch {
+      ElMessage.error(isEdit.value ? '修改失败' : '新增失败')
+    }
+  })
+}
+
+// 对话框关闭回调，重置表单验证
+const handleDialogClosed = () => {
+  formRef.value?.resetFields()
+}
+
+// 删除
+const handleDelete = (row: UserVo) => {
+  ElMessageBox.confirm('确认删除该用户吗?', '提示', {
+    type: 'warning'
+  }).then(async () => {
+    try {
+      const ids = row.id ? [row.id] : []
+      const res = await api.deleteById({ ids })
+      if (res?.code === 0 || res?.code === 200) {
+        ElMessage.success('删除成功')
+        fetchData()
+      } else {
+        ElMessage.error(res?.message || '删除失败')
+      }
+    } catch {
+      ElMessage.error('删除失败')
+    }
+  }).catch(() => {})
+}
+
+// 批量删除
+const handleBatchDelete = () => {
+  if (!selectedRows.value.length) {
+    ElMessage.warning('请选择要删除的数据')
+    return
+  }
+  ElMessageBox.confirm(`确认删除选中的 ${selectedRows.value.length} 条数据吗?`, '提示', {
+    type: 'warning'
+  }).then(async () => {
+    try {
+      const ids = selectedRows.value.map(row => row.id).filter((id): id is string => id !== undefined)
+      const res = await api.deleteById({ ids })
+      if (res?.code === 0 || res?.code === 200) {
+        ElMessage.success('删除成功')
+        selectedRows.value = []
+        fetchData()
+      } else {
+        ElMessage.error(res?.message || '删除失败')
+      }
+    } catch {
+      ElMessage.error('删除失败')
+    }
+  }).catch(() => {})
+}
+
+
+// 切换启用状态
+const handleToggleEnable = async (row: UserVo, newEnable: number) => {
+  const oldEnable = row.enable
+  row.enable = newEnable
+  try {
+    const res = await api.updateUserStatus({ id: row.id!, enable: newEnable })
+    if (res?.code === 0 || res?.code === 200) {
+      ElMessage.success('状态更新成功')
+    } else {
+      row.enable = oldEnable
+      ElMessage.error(res?.message || '状态更新失败')
+    }
+  } catch {
+    row.enable = oldEnable
+    ElMessage.error('状态更新失败')
+  }
+}
+
+// 表格选择
+const handleSelectionChange = (rows: UserVo[]) => {
+  selectedRows.value = rows
+}
+
+// 初始加载
+fetchData()
 </script>
 
 <template>
-用户视图
+  <div class="user-view">
+    <!-- 搜索区域 -->
+    <el-card class="search-card" shadow="never">
+      <el-form ref="searchFormRef" :model="searchForm" inline>
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable style="width: 180px" />
+        </el-form-item>
+        <el-form-item label="账号" prop="account">
+          <el-input v-model="searchForm.account" placeholder="请输入账号" clearable style="width: 180px" />
+        </el-form-item>
+        <el-form-item label="角色" prop="role">
+          <el-select v-model="searchForm.role" placeholder="请选择角色" clearable style="width: 150px">
+            <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态" prop="enable">
+          <el-select v-model="searchForm.enable" placeholder="请选择状态" clearable style="width: 120px">
+            <el-option label="启用" :value="1" />
+            <el-option label="禁用" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">
+          <el-icon class="el-icon--left"><Search /></el-icon>搜索
+        </el-button>
+        <el-button @click="handleReset">
+          <el-icon class="el-icon--left"><RefreshRight /></el-icon>重置
+        </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 操作按钮 -->
+    <div class="toolbar">
+      <el-button type="primary" @click="handleAdd">
+          <el-icon class="el-icon--left"><Plus /></el-icon>新增
+        </el-button>
+        <el-button type="danger" :disabled="!selectedRows.length" @click="handleBatchDelete">
+          <el-icon class="el-icon--left"><Delete /></el-icon>批量删除
+        </el-button>
+    </div>
+
+    <!-- 表格 -->
+    <el-card class="table-card" shadow="never">
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        border
+        stripe
+        @selection-change="handleSelectionChange"
+        style="width: 100%"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column prop="id" label="ID" width="80" align="center" />
+        <el-table-column prop="username" label="用户名" min-width="120" align="center" />
+        <el-table-column prop="account" label="账号" min-width="150" align="center" />
+        <el-table-column prop="role" label="角色" width="120" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.role === 'admin' ? 'danger' : row.role === 'user' ? 'success' : 'info'">
+              {{ roleOptions.find(t => t.value === row.role)?.label || row.role }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="enable" label="状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-switch
+              :model-value="row.enable"
+              :active-value="1"
+              :inactive-value="0"
+              @change="(val: number) => handleToggleEnable(row, val)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="avatar" label="头像" width="100" align="center">
+          <template #default="{ row }">
+            <el-avatar v-if="row.avatar" :src="row.avatar" :size="40" />
+            <el-avatar v-else :size="40">{{ row.username?.charAt(0) || '?' }}</el-avatar>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="180" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="handleEdit(row)">
+              <el-icon><Edit /></el-icon>编辑
+            </el-button>
+            <el-button type="danger" link @click="handleDelete(row)">
+              <el-icon><Delete /></el-icon>删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.pageNum"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="handlePageChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 新增/编辑弹窗 -->
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px" draggable @closed="handleDialogClosed">
+      <el-form ref="formRef" :model="userForm" :rules="formRules" label-width="80px">
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="userForm.username" placeholder="请输入用户名" />
+        </el-form-item>
+        <el-form-item label="账号" prop="account">
+          <el-input v-model="userForm.account" placeholder="请输入账号" :disabled="isEdit" />
+        </el-form-item>
+        <el-form-item label="密码" :prop="isEdit ? '' : 'password'">
+          <el-input v-model="userForm.password" type="password" placeholder="请输入密码" show-password />
+          <span v-if="isEdit" class="tip">留空则不修改密码</span>
+        </el-form-item>
+        <el-form-item label="角色" prop="role">
+          <el-select v-model="userForm.role" placeholder="请选择角色" style="width: 100%">
+            <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSave">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <style scoped>
+.user-view {
+  padding: 20px;
+}
+
+.search-card {
+  margin-bottom: 16px;
+}
+
+.toolbar {
+  margin-bottom: 16px;
+}
+
+.table-card {
+  margin-bottom: 16px;
+}
+
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
 
+.tip {
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.4;
+}
 </style>

tsconfig.app.json

@@ -2,6 +2,10 @@
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
 
     /* Linting */
     "strict": true,

vite.config.ts

@@ -1,7 +1,22 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from 'node:url'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  }
 })