初始化

TaskShow/.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+

TaskShow/.gitignore

@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment variables
+.env.local
+.env.*.local
+

TaskShow/README.md

@@ -0,0 +1,127 @@
+# Task Show
+
+基于 Vue3 + Element Plus + Pinia + TypeScript + Axios 的前端基础工程
+
+## 技术栈
+
+- **Vue 3** - 渐进式 JavaScript 框架
+- **TypeScript** - JavaScript 的超集
+- **Vite** - 下一代前端构建工具
+- **Element Plus** - 基于 Vue 3 的组件库
+- **Pinia** - Vue 的状态管理库
+- **Vue Router** - Vue 官方路由管理器
+- **Axios** - 基于 Promise 的 HTTP 客户端
+
+## 项目结构
+
+```
+TaskShow/
+├── src/
+│   ├── assets/          # 静态资源
+│   ├── components/      # 公共组件
+│   ├── router/          # 路由配置
+│   │   └── index.ts
+│   ├── store/           # Pinia 状态管理
+│   │   └── index.ts
+│   ├── types/           # TypeScript 类型定义
+│   │   └── api.ts
+│   ├── utils/           # 工具函数
+│   │   └── request.ts   # Axios 请求封装
+│   ├── views/           # 页面组件
+│   │   └── Home.vue
+│   ├── App.vue          # 根组件
+│   └── main.ts          # 入口文件
+├── index.html           # HTML 模板
+├── package.json         # 项目配置
+├── tsconfig.json        # TypeScript 配置
+├── vite.config.ts       # Vite 配置
+└── README.md           # 项目说明
+```
+
+## 安装依赖
+
+```bash
+npm install
+# 或
+yarn install
+# 或
+pnpm install
+```
+
+## 开发
+
+```bash
+npm run dev
+# 或
+yarn dev
+# 或
+pnpm dev
+```
+
+## 构建
+
+```bash
+npm run build
+# 或
+yarn build
+# 或
+pnpm build
+```
+
+## 预览构建结果
+
+```bash
+npm run preview
+# 或
+yarn preview
+# 或
+pnpm preview
+```
+
+## 请求封装说明
+
+### 使用方式
+
+```typescript
+import { request } from '@/utils/request'
+
+// GET 请求
+const response = await request.get('/api/users', { id: 1 })
+
+// POST 请求
+const response = await request.post('/api/users', { name: 'John' })
+
+// PUT 请求
+const response = await request.put('/api/users/1', { name: 'Jane' })
+
+// DELETE 请求
+const response = await request.delete('/api/users/1')
+
+// 自定义配置
+const response = await request.get('/api/users', {}, {
+  showLoading: false,  // 不显示 loading
+  showError: false,    // 不显示错误提示
+  timeout: 5000        // 自定义超时时间
+})
+```
+
+### 特性
+
+1. **自动添加 Token**：请求时自动从 store 中获取 token 并添加到请求头
+2. **统一错误处理**：自动处理 HTTP 错误和业务错误
+3. **Loading 提示**：请求时自动显示 loading（可配置）
+4. **错误提示**：请求失败时自动显示错误消息（可配置）
+5. **类型支持**：完整的 TypeScript 类型定义
+
+### 环境变量
+
+在 `.env`、`.env.development` 或 `.env.production` 文件中配置 API 基础地址：
+
+```
+VITE_API_BASE_URL=/api
+```
+
+## License
+
+MIT
+

TaskShow/USAGE.md

@@ -0,0 +1,154 @@
+# 使用说明
+
+## 快速开始
+
+### 1. 安装依赖
+
+```bash
+cd TaskShow
+npm install
+```
+
+### 2. 启动开发服务器
+
+```bash
+npm run dev
+```
+
+### 3. 构建生产版本
+
+```bash
+npm run build
+```
+
+## 核心功能使用
+
+### 1. 使用封装的请求方法
+
+```typescript
+import { request } from '@/utils/request'
+
+// GET 请求
+const getUserList = async () => {
+  try {
+    const response = await request.get('/api/users', { page: 1, pageSize: 10 })
+    console.log(response.data) // 响应数据
+  } catch (error) {
+    console.error('请求失败:', error)
+  }
+}
+
+// POST 请求
+const createUser = async () => {
+  try {
+    const response = await request.post('/api/users', {
+      name: 'John',
+      email: 'john@example.com'
+    })
+    console.log(response.data)
+  } catch (error) {
+    console.error('创建失败:', error)
+  }
+}
+
+// 自定义配置
+const customRequest = async () => {
+  const response = await request.get('/api/users', {}, {
+    showLoading: false,  // 不显示 loading
+    showError: false,    // 不显示错误提示
+    timeout: 5000        // 5秒超时
+  })
+}
+```
+
+### 2. 使用 Pinia Store
+
+```typescript
+import { useUserStore } from '@/store'
+
+// 在组件中使用
+const userStore = useUserStore()
+
+// 设置 token
+userStore.setToken('your-token-here')
+
+// 设置用户信息
+userStore.setUserInfo({ id: 1, name: 'John' })
+
+// 清除用户信息
+userStore.clearUser()
+
+// 访问状态
+console.log(userStore.token)
+console.log(userStore.userInfo)
+```
+
+### 3. 使用路由
+
+```typescript
+import { useRouter, useRoute } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+// 编程式导航
+router.push('/home')
+router.push({ name: 'Home', params: { id: 1 } })
+
+// 获取路由参数
+const id = route.params.id
+```
+
+### 4. 使用 Element Plus 组件
+
+```vue
+<template>
+  <el-button type="primary" @click="handleClick">点击</el-button>
+  <el-table :data="tableData">
+    <el-table-column prop="name" label="姓名" />
+    <el-table-column prop="email" label="邮箱" />
+  </el-table>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const tableData = ref([
+  { name: 'John', email: 'john@example.com' }
+])
+
+const handleClick = () => {
+  ElMessage.success('操作成功')
+}
+</script>
+```
+
+## 项目结构说明
+
+- `src/api/` - API 接口定义
+- `src/components/` - 公共组件
+- `src/router/` - 路由配置
+- `src/store/` - Pinia 状态管理
+- `src/types/` - TypeScript 类型定义
+- `src/utils/` - 工具函数（包含封装的 request）
+- `src/views/` - 页面组件
+
+## 环境变量配置
+
+在项目根目录创建 `.env.development` 和 `.env.production` 文件：
+
+```bash
+# .env.development
+VITE_API_BASE_URL=http://localhost:8080/api
+
+# .env.production
+VITE_API_BASE_URL=https://api.example.com/api
+```
+
+## 注意事项
+
+1. 所有 API 请求会自动添加 token（如果存在）
+2. 请求失败会自动显示错误提示（可通过配置关闭）
+3. 请求时会自动显示 loading（可通过配置关闭）
+4. 401 错误会自动清除用户信息并提示登录

TaskShow/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" type="image/svg+xml" href="/vite.svg">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Task Show</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+

TaskShow/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "task-show",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "axios": "^1.6.7",
+    "element-plus": "^2.5.6",
+    "pinia": "^2.1.7",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.24",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "sass-embedded": "^1.97.1",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6",
+    "vue-tsc": "^1.8.27"
+  }
+}

TaskShow/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path alias */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+

TaskShow/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
+

TaskShow/vite.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  },
+  server: {
+    port: 3000,
+    open: true,
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:8787',
+        changeOrigin: true,
+        // 后端路由已经包含 /api 前缀，所以直接转发，不需要 rewrite
+      }
+    }
+  }
+})
+