vue2server7 7.0.105 → 7.0.107

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2server7",
-  "version": "7.0.105",
+  "version": "7.0.107",
   "description": "",
   "scripts": {
     "dev": "nodemon --watch src --ext ts --exec \"ts-node src/app.ts\"",

package/test/231231

@@ -0,0 +1,128 @@
+<template>
+  <div class="error-page">
+    <div class="error-content">
+      <div class="illustration">
+        <svg viewBox="0 0 420 260" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M120 75H310L292 155H95L120 75Z" stroke="#5B83F7" stroke-width="2" />
+          <path d="M135 90H290" stroke="#5B83F7" stroke-width="14" />
+          <path d="M104 110H150" stroke="#5B83F7" stroke-width="14" />
+          <path d="M292 110H345" stroke="#5B83F7" stroke-width="8" />
+          <path d="M306 135H335" stroke="#5B83F7" stroke-width="5" />
+          <path d="M260 175H355" stroke="#5B83F7" stroke-width="14" />
+          <path d="M85 168H250" stroke="#5B83F7" stroke-width="2" />
+          <circle cx="245" cy="122" r="43" fill="#6B8DFF" />
+          <path d="M230 107L260 137M260 107L230 137" stroke="white" stroke-width="10" stroke-linecap="round" />
+          <circle cx="65" cy="155" r="24" stroke="#5B83F7" stroke-width="2" />
+          <circle cx="95" cy="158" r="34" stroke="#5B83F7" stroke-width="2" />
+          <circle cx="95" cy="158" r="22" fill="#87A4FF" />
+          <path d="M48 155C20 150 25 130 50 132C74 134 85 143 92 154" stroke="#5B83F7" stroke-width="2" />
+          <path d="M30 185H118C124 185 129 190 129 196C129 202 124 207 118 207H82C76 207 71 212 71 218C71 224 76 229 82 229H52" stroke="#5B83F7" stroke-width="2" />
+          <path d="M40 196H155" stroke="#5B83F7" stroke-width="18" stroke-linecap="round" />
+          <path d="M92 190V222" stroke="#5B83F7" stroke-width="18" stroke-linecap="round" />
+          <path d="M58 223H115" stroke="#5B83F7" stroke-width="16" stroke-linecap="round" />
+          <path d="M270 223H330" stroke="#5B83F7" stroke-width="2" />
+          <path d="M280 210H310C318 210 325 217 325 225H275C275 217 276 210 280 210Z" fill="#5B83F7" />
+          <path d="M318 210H333" stroke="#5B83F7" stroke-width="2" />
+          <path d="M130 62L140 30H315L300 75" stroke="#5B83F7" stroke-width="2" />
+          <path d="M320 40L305 100" stroke="#5B83F7" stroke-width="2" />
+          <path d="M115 112L92 175" stroke="#5B83F7" stroke-width="2" />
+          <path d="M305 78H340" stroke="#476AD7" stroke-width="8" />
+          <circle cx="148" cy="48" r="3" fill="#5B83F7" />
+          <circle cx="162" cy="48" r="3" fill="#5B83F7" />
+        </svg>
+      </div>
+
+      <div class="text-box">
+        <h2>抱歉，服务器出错了</h2>
+        <el-button type="primary" class="back-btn" @click="goHome">
+          返回首页
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const goHome = (): void => {
+  router.push('/')
+}
+</script>
+
+<style scoped>
+.error-page {
+  width: 100%;
+  min-height: 100vh;
+  background: #f7f8fa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.error-content {
+  display: flex;
+  align-items: center;
+  gap: 110px;
+  transform: translateY(-20px);
+}
+
+.illustration {
+  width: 420px;
+  height: 260px;
+}
+
+.illustration svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.text-box {
+  padding-top: 10px;
+}
+
+.text-box h2 {
+  margin: 0 0 28px;
+  font-size: 26px;
+  font-weight: 600;
+  color: #71809a;
+  letter-spacing: 1px;
+}
+
+.back-btn {
+  width: 118px;
+  height: 48px;
+  border-radius: 6px;
+  font-size: 16px;
+  background: #5b83f7;
+  border-color: #5b83f7;
+}
+
+.back-btn:hover,
+.back-btn:focus {
+  background: #6b8dff;
+  border-color: #6b8dff;
+}
+
+@media (max-width: 768px) {
+  .error-content {
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  .illustration {
+    width: 320px;
+  }
+
+  .text-box {
+    text-align: center;
+  }
+
+  .text-box h2 {
+    font-size: 22px;
+  }
+}
+</style>

package/test/500 (1).svg

@@ -0,0 +1,5 @@
+<svg
+  viewBox="0 0 400 300"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="47" y="38" width="307" height="224"><path d="M353.3 38H47.5v223.8h305.8V38Z" fill="#fff"/></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M299.2 200.6H61.6v5.1h240.3l-2.7-5.1Z" fill="#C7DEFF"/><path d="m308.9 185.8-6.5 20H183.7M332.3 127.6h10.6l-5 16.7-14.8-.1-7.2 21.1M328.8 127.4l13.6-39.6M307.6 166 337 84.7H180.6l-9.8 26.9h-10.5M296.6 196l4.3-11.8M157.2 149.2l6.4-17.7" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M324.8 93.1H188.5l-34.8 95.8h136.4l34.7-95.8ZM169.9 166.2l5-13.6-5 13.6Z" fill="#fff"/><path d="m169.9 166.2 5-13.6" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M324.8 93.1H188.5l-4 11.7h135.8l4.5-11.7Z" fill="#006EFF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M102.6 159.5h38.3l2.7 36.6h-38.4c-10.1 0-20.9-8.2-20.9-18.3 0-10.1 8.2-18.3 18.3-18.3Z" fill="#DEEBFC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M84.3 174.102c2.5 3.4 10 5 17.9 2.8 16.6-6.5 23.8-3.9 23.8-3.9s.5-3.4 1.3-5c-5.8-3-15.4.3-26.1 3.1-10.7 2.8-15.8-2.5-15.8-2.5-.4 0-1.1 2.8-1.1 5.5Z" fill="#fff"/><path d="M96.5 194.2c-7.2-3.3-12.2-10.5-12.2-19m0 0c0-11.5 9.3-20.8 20.8-20.8h29.4" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M140.3 195.1c-8.4-2.7-14.5-10.6-14.5-19.8l14.5 19.8Zm-14.5-19.8c0-11.5 9.3-20.8 20.8-20.8l-20.8 20.8Zm20.8-20.8c11.5 0 20.8 9.3 20.8 20.8l-20.8-20.8Zm20.8 20.8c0 8.4-5 15.6-12.1 18.9l12.1-18.9Z" fill="#fff"/><path d="M140.3 195.1c-8.4-2.7-14.5-10.6-14.5-19.8m0 0c0-11.5 9.3-20.8 20.8-20.8m0 0c11.5 0 20.8 9.3 20.8 20.8m0 0c0 8.4-5 15.6-12.1 18.9" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M161.5 177.2c0-7.7-6.3-14-14-14s-14 6.3-14 14c0 5.8 3.5 10.8 8.6 12.9.1 0 5.8 1.6 10.7 0 5.3-1.7 8.7-7.1 8.7-12.9Z" fill="#00E4E5"/><path d="M140.5 190.1c-5.8-2.4-9.9-8.2-9.9-14.9 0-8.9 7.2-16.1 16.1-16.1 8.9 0 16.1 7.2 16.1 16.1 0 6.8-4.2 12.5-10.1 14.9M88.4 170.604c2.9 1.3 7.7 2.6 13.6.3 14.7-5.7 22.3-4.3 24.6-3.5M84.5 174.599s5.9 6.5 19 1.7c9.2-3.4 15.3-3.9 18.8-3.8" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M340.6 112.3h-55.2l-2.7 6.2H338l2.6-6.2Z" fill="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M236.8 117.9c-16.13 0-29.2 13.07-29.2 29.2s13.07 29.2 29.2 29.2 29.2-13.07 29.2-29.2-13.07-29.2-29.2-29.2Z" fill="#00E4E5"/><path d="M265 123.3c13.1 13.1 13.1 34.4 0 47.6M306 205.9h19.2M61.7 205.9h32.9M181.2 196.2h115.2M47.5 205.9h10v-9.7h73.8" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M146.7 179.2c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5Z" fill="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M169.5 196.2c3.9 0 7.1 3.2 7.1 7.1 0 3.9-3.2 7.1-7.1 7.1H144c-2.1 0-3.9 1.7-3.9 3.9v1c0 2.1 1.7 3.9 3.9 3.9h48c5.1 0 9.2 4.1 9.2 9.2s-4.1 9.3-9.2 9.2h-33.8c-2.3 0-4.1 1.8-4.1 4.1s1.8 4.1 4.1 4.1h4.2c4.4 0 8 3.6 8 8s-3.6 8-8 8H111c-3.7 0-6.8-3-6.8-6.8 0-3.7 3-6.8 6.8-6.8h.3c2.3 0 4.1-1.8 4.1-4.1s-1.8-4.1-4.1-4.1H79c-4.5 0-8.1-3.6-8.1-8.1s3.6-8.1 8.1-8.1h37.7c2.1 0 3.9-1.7 3.9-3.9 0-2.1-1.7-3.9-3.9-3.9h-7.9c-4.4 0-7.9-3.5-7.9-7.9s3.5-7.9 7.9-7.9h30.4c2.2 0 3.9-1.8 3.9-3.9V187c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5v5.3c0 2.2 1.8 3.9 3.9 3.9h15.5Z" fill="#006EFF"/><path d="m227.8 138.5 18.7 18.7M227.8 157.2l18.7-18.7" stroke="#fff" stroke-width="6"/><path fill-rule="evenodd" clip-rule="evenodd" d="M194.8 96.9c-.99 0-1.8.81-1.8 1.8s.81 1.8 1.8 1.8 1.8-.81 1.8-1.8-.81-1.8-1.8-1.8ZM202.9 96.9c-.99 0-1.8.81-1.8 1.8s.81 1.8 1.8 1.8 1.8-.81 1.8-1.8-.81-1.8-1.8-1.8Z" fill="#fff"/><path d="m291.7 184.3-1.6 4.6h-121M298.1 166.7l22.5-61.9" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="m193 134.1 2.2-5.1h-19.4l-2.3 5.1H193ZM313.2 123.5l2.2-5.1h-24.5l-2.3 5.1h24.6Z" fill="#DEEBFC"/><path d="m164.5 159.2 19.8-54.6" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M199.6 119.8h-53.2l-4.4 9.3h53.2l4.4-9.3Z" fill="#00E4E5"/><path d="M151.3 129.1H142l4.4-9.3h16.9" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M353.3 169.4h-67.4l-4.8 12.2h67.3l4.9-12.2Z" fill="#006EFF"/><path d="M332.4 169.4h20.9l-4.9 12.2h-39.7M242.7 235.5v-4.8c0-3.8 3.1-7 7-7h20.2c3.8 0 7 3.1 7 7" stroke="#071F4D"/><path d="M261.1 235.5v-4.8c0-3.8 3.1-7 7-7h13.7c3.8 0 7 3.1 7 7v4.8M242.6 230.7h13.7M235.2 237.7h63.3M224 237.7h6.7" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M324.1 141.3H335l3.3-10.7h-10.2l-4 10.7Z" fill="#C7DEFF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M288.3 230.4c0-3.6-2.9-6.5-6.5-6.5h-14.2c-3.6 0-6.5 2.9-6.5 6.5v5.3h27.2v-5.3Z" fill="#071F4D"/><path d="M80.4 228.5H83M87.7 228.5h19.2M146.3 195.8v2c0 3.6-2.9 6.6-6.6 6.6H138M133.4 204.3h1.5M154 249.9h9.4" stroke="#DEEBFC"/><path d="m299.4 141.9 5.1-13.9" stroke="#071F4D"/></g></svg>

package/test/Vue3/351/241/271/347/233/256/345/274/200/345/217/221/350/247/204/350/214/203.md

@@ -0,0 +1,871 @@
+# Vue3 项目开发规范
+
+## 1. 文档说明
+
+本文档用于规范 Vue3 项目的目录结构、代码风格、组件开发、路由管理、状态管理、接口请求、样式编写、Git 提交以及团队协作流程。
+
+适用技术栈：
+
+- Vue 3
+- Vite
+- TypeScript
+- Vue Router
+- Pinia
+- Axios
+- Element Plus / TDesign Vue Next
+- ESLint
+- Prettier
+- Stylelint
+
+---
+
+## 2. 项目目录规范
+
+推荐目录结构：
+
+```bash
+src
+├── api                 # 接口请求模块
+├── assets              # 静态资源
+│   ├── images
+│   ├── icons
+│   └── fonts
+├── components          # 公共组件
+├── composables         # 组合式函数
+├── constants           # 常量配置
+├── directives          # 自定义指令
+├── hooks               # 业务 hooks
+├── layouts             # 页面布局
+├── plugins             # 插件注册
+├── router              # 路由配置
+│   ├── index.ts
+│   └── modules
+├── stores              # Pinia 状态管理
+├── styles              # 全局样式
+├── types               # TypeScript 类型声明
+├── utils               # 工具函数
+├── views               # 页面模块
+├── App.vue
+└── main.ts
+```
+
+---
+
+## 3. 文件命名规范
+
+### 3.1 Vue 组件命名
+
+组件文件使用大驼峰命名：
+
+```bash
+UserCard.vue
+UserForm.vue
+BaseTable.vue
+SearchPanel.vue
+```
+
+### 3.2 页面文件命名
+
+页面文件建议使用大驼峰命名：
+
+```bash
+views/user/UserList.vue
+views/user/UserDetail.vue
+views/system/RoleManage.vue
+```
+
+### 3.3 工具文件命名
+
+工具文件使用小驼峰命名：
+
+```bash
+formatDate.ts
+storage.ts
+request.ts
+validate.ts
+```
+
+### 3.4 类型文件命名
+
+类型文件使用 `.type.ts` 后缀：
+
+```bash
+user.type.ts
+order.type.ts
+api.type.ts
+```
+
+### 3.5 路由文件命名
+
+路由文件使用 `.route.ts` 后缀：
+
+```bash
+user.route.ts
+order.route.ts
+system.route.ts
+```
+
+---
+
+## 4. 代码风格规范
+
+### 4.1 统一使用 `<script setup>`
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const count = ref(0)
+
+function handleAdd() {
+  count.value++
+}
+</script>
+
+<template>
+  <button @click="handleAdd">
+    {{ count }}
+  </button>
+</template>
+```
+
+### 4.2 使用 TypeScript
+
+所有 Vue 文件推荐使用：
+
+```vue
+<script setup lang="ts">
+</script>
+```
+
+### 4.3 禁止滥用 any
+
+不推荐：
+
+```ts
+const user: any = {}
+```
+
+推荐：
+
+```ts
+interface UserInfo {
+  id: number
+  username: string
+  avatar?: string
+}
+
+const user = ref<UserInfo | null>(null)
+```
+
+---
+
+## 5. 组件开发规范
+
+### 5.1 组件职责单一
+
+一个组件只负责一个明确的功能，例如：
+
+- 用户表格组件只负责展示用户列表
+- 搜索组件只负责搜索条件输入
+- 弹窗组件只负责表单录入和提交
+
+### 5.2 Props 定义规范
+
+必须定义 Props 类型。
+
+```ts
+interface Props {
+  title: string
+  loading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false
+})
+```
+
+禁止使用：
+
+```ts
+defineProps(['title', 'loading'])
+```
+
+### 5.3 Emits 定义规范
+
+事件名建议使用 kebab-case。
+
+```ts
+const emit = defineEmits<{
+  'submit-form': [value: FormData]
+  'update:modelValue': [value: string]
+}>()
+```
+
+### 5.4 不直接修改 Props
+
+错误写法：
+
+```ts
+props.visible = false
+```
+
+正确写法：
+
+```ts
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+}>()
+
+emit('update:visible', false)
+```
+
+---
+
+## 6. 页面开发规范
+
+页面建议按以下顺序组织：
+
+1. import 引入
+2. 类型定义
+3. 响应式数据
+4. 计算属性
+5. 方法函数
+6. 生命周期
+7. 监听器
+
+示例：
+
+```vue
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { getUserListApi } from '@/api/user.api'
+import type { UserInfo } from '@/types/user.type'
+
+const loading = ref(false)
+const userList = ref<UserInfo[]>([])
+
+async function getUserList() {
+  loading.value = true
+
+  try {
+    const res = await getUserListApi()
+    userList.value = res.data
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  getUserList()
+})
+</script>
+```
+
+---
+
+## 7. 路由规范
+
+### 7.1 路由目录
+
+```bash
+router
+├── index.ts
+└── modules
+    ├── user.route.ts
+    ├── order.route.ts
+    └── system.route.ts
+```
+
+### 7.2 路由配置示例
+
+```ts
+import type { RouteRecordRaw } from 'vue-router'
+
+const userRoutes: RouteRecordRaw[] = [
+  {
+    path: '/user',
+    name: 'User',
+    component: () => import('@/views/user/UserList.vue'),
+    meta: {
+      title: '用户管理',
+      requiresAuth: true,
+      permissions: ['user:list']
+    }
+  }
+]
+
+export default userRoutes
+```
+
+### 7.3 路由 meta 规范
+
+```ts
+meta: {
+  title: '页面标题',
+  requiresAuth: true,
+  keepAlive: false,
+  permissions: ['user:list']
+}
+```
+
+常用字段说明：
+
+| 字段 | 说明 |
+| --- | --- |
+| title | 页面标题 |
+| requiresAuth | 是否需要登录 |
+| keepAlive | 是否缓存页面 |
+| permissions | 页面权限标识 |
+
+---
+
+## 8. 状态管理规范
+
+### 8.1 Store 文件命名
+
+```bash
+stores/user.store.ts
+stores/app.store.ts
+stores/permission.store.ts
+```
+
+### 8.2 Pinia 示例
+
+```ts
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', () => {
+  const token = ref('')
+  const username = ref('')
+
+  function setToken(value: string) {
+    token.value = value
+  }
+
+  function clearUser() {
+    token.value = ''
+    username.value = ''
+  }
+
+  return {
+    token,
+    username,
+    setToken,
+    clearUser
+  }
+})
+```
+
+---
+
+## 9. API 请求规范
+
+### 9.1 API 目录结构
+
+```bash
+api
+├── request.ts
+├── user.api.ts
+├── order.api.ts
+└── system.api.ts
+```
+
+### 9.2 接口命名规范
+
+接口函数建议使用动词开头：
+
+```ts
+getUserList()
+getUserDetail()
+createUser()
+updateUser()
+deleteUser()
+```
+
+### 9.3 API 示例
+
+```ts
+import request from './request'
+import type { CreateUserDTO, UserListParams } from '@/types/user.type'
+
+export function getUserListApi(params: UserListParams) {
+  return request.get('/users', { params })
+}
+
+export function createUserApi(data: CreateUserDTO) {
+  return request.post('/users', data)
+}
+
+export function updateUserApi(id: number, data: CreateUserDTO) {
+  return request.put(`/users/${id}`, data)
+}
+
+export function deleteUserApi(id: number) {
+  return request.delete(`/users/${id}`)
+}
+```
+
+---
+
+## 10. Axios 封装规范
+
+```ts
+import axios from 'axios'
+import type { AxiosError, AxiosResponse } from 'axios'
+
+const request = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+  timeout: 10000
+})
+
+request.interceptors.request.use(config => {
+  const token = localStorage.getItem('token')
+
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+
+  return config
+})
+
+request.interceptors.response.use(
+  (response: AxiosResponse) => {
+    return response.data
+  },
+  (error: AxiosError) => {
+    return Promise.reject(error)
+  }
+)
+
+export default request
+```
+
+---
+
+## 11. TypeScript 类型规范
+
+### 11.1 通用响应类型
+
+```ts
+export interface ApiResponse<T = unknown> {
+  code: number
+  message: string
+  data: T
+}
+```
+
+### 11.2 分页类型
+
+```ts
+export interface PageParams {
+  page: number
+  pageSize: number
+}
+
+export interface PageResult<T> {
+  list: T[]
+  total: number
+  page: number
+  pageSize: number
+}
+```
+
+### 11.3 用户类型示例
+
+```ts
+export interface UserInfo {
+  id: number
+  username: string
+  nickname: string
+  avatar?: string
+  status: number
+  createdAt: string
+}
+
+export interface UserListParams extends PageParams {
+  keyword?: string
+  status?: number
+}
+
+export interface CreateUserDTO {
+  username: string
+  password: string
+  nickname: string
+}
+```
+
+---
+
+## 12. 样式规范
+
+### 12.1 样式目录
+
+```bash
+styles
+├── index.scss
+├── reset.scss
+├── variables.scss
+├── mixin.scss
+└── transition.scss
+```
+
+### 12.2 组件样式
+
+组件样式默认使用 scoped。
+
+```vue
+<style scoped lang="scss">
+.user-card {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #fff;
+}
+</style>
+```
+
+### 12.3 CSS 命名规范
+
+推荐使用 BEM 命名。
+
+```scss
+.user-card {
+  &__header {
+    display: flex;
+    align-items: center;
+  }
+
+  &__title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  &--active {
+    border-color: #409eff;
+  }
+}
+```
+
+---
+
+## 13. 环境变量规范
+
+### 13.1 文件命名
+
+```bash
+.env.development
+.env.test
+.env.production
+```
+
+### 13.2 变量命名
+
+Vite 项目环境变量必须使用 `VITE_` 前缀。
+
+```env
+VITE_APP_TITLE=Vue3后台管理系统
+VITE_API_BASE_URL=https://api.example.com
+VITE_UPLOAD_URL=https://upload.example.com
+```
+
+### 13.3 使用方式
+
+```ts
+const baseURL = import.meta.env.VITE_API_BASE_URL
+```
+
+---
+
+## 14. 权限规范
+
+权限建议分为：
+
+- 登录权限
+- 路由权限
+- 菜单权限
+- 按钮权限
+- 接口权限
+
+### 14.1 路由权限
+
+```ts
+meta: {
+  requiresAuth: true,
+  permissions: ['user:list']
+}
+```
+
+### 14.2 按钮权限
+
+```vue
+<el-button v-if="hasPermission('user:create')">
+  新增用户
+</el-button>
+```
+
+---
+
+## 15. 表单开发规范
+
+### 15.1 表单数据
+
+```ts
+const formData = reactive({
+  username: '',
+  password: '',
+  status: 1
+})
+```
+
+### 15.2 表单校验
+
+```ts
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' }
+  ]
+}
+```
+
+### 15.3 提交规范
+
+```ts
+async function handleSubmit() {
+  try {
+    await formRef.value?.validate()
+    await createUserApi(formData)
+  } catch (error) {
+    console.error(error)
+  }
+}
+```
+
+---
+
+## 16. 列表页面规范
+
+列表页面通常包含：
+
+- 搜索区域
+- 操作按钮区域
+- 表格区域
+- 分页区域
+
+推荐状态命名：
+
+```ts
+const loading = ref(false)
+const tableData = ref([])
+const total = ref(0)
+const queryParams = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: ''
+})
+```
+
+---
+
+## 17. 工具函数规范
+
+工具函数必须保持职责单一。
+
+```ts
+export function formatDate(date: string | Date): string {
+  const d = new Date(date)
+  return d.toLocaleDateString()
+}
+```
+
+不建议一个工具函数同时处理多个不相关功能。
+
+---
+
+## 18. 常量规范
+
+常量统一放在 `constants` 目录。
+
+```ts
+export const USER_STATUS = {
+  ENABLED: 1,
+  DISABLED: 0
+} as const
+
+export const USER_STATUS_TEXT = {
+  [USER_STATUS.ENABLED]: '启用',
+  [USER_STATUS.DISABLED]: '禁用'
+}
+```
+
+---
+
+## 19. 代码提交规范
+
+推荐使用 Conventional Commits。
+
+```bash
+feat: 新增用户管理页面
+fix: 修复登录状态失效问题
+docs: 更新项目开发文档
+style: 调整页面样式
+refactor: 重构接口请求封装
+perf: 优化列表加载性能
+test: 新增单元测试
+chore: 修改构建配置
+```
+
+提交类型说明：
+
+| 类型 | 说明 |
+| --- | --- |
+| feat | 新功能 |
+| fix | 修复问题 |
+| docs | 文档修改 |
+| style | 样式或格式调整 |
+| refactor | 代码重构 |
+| perf | 性能优化 |
+| test | 测试相关 |
+| chore | 构建或工具配置 |
+
+---
+
+## 20. ESLint 与 Prettier 规范
+
+### 20.1 Prettier 配置
+
+```json
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}
+```
+
+### 20.2 ESLint 规则示例
+
+```js
+export default [
+  {
+    rules: {
+      'vue/multi-word-component-names': 'off',
+      'no-console': 'warn',
+      'no-debugger': 'warn'
+    }
+  }
+]
+```
+
+---
+
+## 21. 性能优化规范
+
+### 21.1 路由懒加载
+
+```ts
+component: () => import('@/views/user/UserList.vue')
+```
+
+### 21.2 组件按需加载
+
+大型组件、弹窗、图表组件建议按需加载。
+
+### 21.3 避免不必要的响应式
+
+大数据列表可以使用 `shallowRef`。
+
+```ts
+const list = shallowRef([])
+```
+
+### 21.4 图片优化
+
+- 图片压缩后再上传
+- 小图标优先使用 SVG
+- 大图使用懒加载
+- 静态资源放入 CDN
+
+---
+
+## 22. 安全规范
+
+- 不在前端代码中写死密钥
+- 不在仓库中提交 `.env.production`
+- 接口请求必须携带必要鉴权信息
+- 用户输入内容需要校验
+- 富文本内容需要防止 XSS
+- 文件上传需要限制类型和大小
+
+---
+
+## 23. 开发注意事项
+
+- 组件不要过大，复杂页面要拆分组件
+- 接口请求统一放到 `api` 目录
+- 公共逻辑抽离到 `composables` 或 `hooks`
+- 不要直接操作 DOM，优先使用 Vue 响应式能力
+- 列表渲染必须添加唯一 `key`
+- 异步请求必须处理 loading 状态
+- 删除、提交、重置等危险操作需要二次确认
+- 禁止在组件中硬编码接口地址
+- 禁止将大量业务逻辑写在模板中
+
+---
+
+## 24. 推荐 package.json scripts
+
+```json
+{
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "format": "prettier --write src"
+  }
+}
+```
+
+---
+
+## 25. 项目启动流程
+
+```bash
+pnpm install
+pnpm dev
+```
+
+生产构建：
+
+```bash
+pnpm build
+```
+
+本地预览：
+
+```bash
+pnpm preview
+```
+
+---
+
+## 26. 总结
+
+Vue3 项目开发应重点关注以下几点：
+
+- 目录结构清晰
+- 命名风格统一
+- 组件职责单一
+- 类型定义完善
+- 接口统一封装
+- 状态管理规范
+- 样式风格一致
+- 权限设计清晰
+- Git 提交规范
+- 构建部署流程稳定
+
+良好的开发规范可以提升团队协作效率，降低维护成本，并让项目在长期迭代中保持稳定和可扩展。

package/test//344/272/213/345/256/236/344/270/212

@@ -0,0 +1,16 @@
+<!-- 500页面 -->
+<template>
+  <ArtException
+    :data="{
+      title: '500',
+      desc: $t('exceptionPage.500'),
+      btnText: $t('exceptionPage.gohome'),
+      imgUrl
+    }"
+  />
+</template>
+
+<script setup lang="ts">
+  import imgUrl from '@imgs/svg/500.svg'
+  defineOptions({ name: 'Exception500' })
+</script>