有这样一些场景：
- 页面一加载，需要同时发 10 个请求，结果页面卡住，服务器也快崩了。
- 用户可以批量操作，一次点击触发了几十个上传文件的请求，浏览器直接转圈圈。

当后端处理不过来时，前端一股脑地把请求全发过去，只会让情况更糟。

**核心思想就一句话：不要一次性把所有请求都发出去，让它们排队，一个一个来，或者一小批一小批来。**

这就好比超市结账，只有一个收银台，却来了100个顾客。最好的办法就是让他们排队，而不是一拥而上。我们的“请求队列”就是这个“排队管理员”。



# 直接上代码：一个即插即用的请求队列

不用复杂的分析，直接复制下面的 RequestPool 类到我们的项目里。它非常小巧，只有不到 40 行代码。

``` js
/**
 * 一个简单的请求池/请求队列，用于控制并发
 * @example
 * const pool = new RequestPool(3); // 限制并发数为 3
 * pool.add(() => myFetch('/api/1'));
 * pool.add(() => myFetch('/api/2'));
 */
class RequestPool {
 /**
   * @param {number} limit - 并发限制数
   */
 constructor(limit = 3) {
    this.limit = limit; // 并发限制数
    this.queue = [];    // 等待的请求队列
    this.running = 0;   // 当前正在运行的请求数
  }

 /**
   * 添加一个请求到池中
   * @param {Function} requestFn - 一个返回 Promise 的函数
   * @returns {Promise}
   */
 add(requestFn) {
    return new Promise((resolve, reject) => {
      this.queue.push({ requestFn, resolve, reject });
      this._run(); // 每次添加后，都尝试运行
    });
  }

 _run() {
    // 只有当 正在运行的请求数 < 限制数 且 队列中有等待的请求时，才执行
    while (this.running < this.limit && this.queue.length > 0) {
      const { requestFn, resolve, reject } = this.queue.shift(); // 取出队首的任务
      this.running++;

      requestFn()
        .then(resolve)
        .catch(reject)
        .finally(() => {
          this.running--; // 请求完成，空出一个位置
          this._run();   // 尝试运行下一个
        });
    }
  }
}
```



# 如何使用？三步搞定！
假设你有一个请求函数 mockApi，它会模拟一个比较慢的接口。


![image.png](/static/img/c6810f94466cbb3f60c3897fcdb0154c.image.webp)

**发生了什么？**

当你运行上面的代码，你会看到：

1. [1] 和 [2] 的请求几乎同时开始。
2. [3]、[4]、[5]、[6] 在乖乖排队。
3. 当 [1] 或 [2] 中任意一个完成后，队列中的 [3] 马上就会开始。
4. 整个过程，同时运行的请求数永远不会超过 2 个。

**控制台输出类似这样：**

[1] 🚀 请求开始...  
[2] 🚀 请求开始...  
// (此时 3, 4, 5, 6 在排队)

[1] ✅ 请求完成!  
[1] 收到结果: 任务 1 的结果  
[3] 🚀 请求开始...    // 1号完成，3号立刻补上

[2] ✅ 请求完成!  
[2] 收到结果: 任务 2 的结果  
[4] 🚀 请求开始...  
// 2号完成，4号立刻补上

...


# 它是如何工作的？

1. add(requestFn): 你扔给它的不是一个已经开始的请求，而是一个“启动器”函数 () => mockApi(i)。它把这个“启动器”放进 queue 数组里排队。
2. _run(): 这是管理员。它会检查：
- 现在有空位吗？（running < limit）
- 有人在排队吗？（queue.length > 0）
- 如果两个条件都满足，就从队首叫一个号（queue.shift()），让它开始工作（执行 requestFn()），并且把正在工作的计数 running 加一。
3. finally(): 这是最关键的一步。每个请求不管是成功还是失败，最后都会执行 finally 里的代码。它会告诉管理员：“我完事了！”，然后把 running 减一，并再次呼叫管理员 _run() 来看看能不能让下一个人进来。

这样就形成了一个完美的自动化流程：**完成一个，就自动启动下一个**。

以后再遇到需要批量发请求的场景，别再用 Promise.all 一股脑全发出去了。

把上面那段小小的 RequestPool 代码复制到你的项目里，用它来包裹我们的请求函数。只需要设置一个合理的并发数（比如 2 或 3），就能在不修改后端代码的情况下，大大减轻服务器的压力，让我们的应用运行得更平稳。

这是一种简单、优雅且非常有效的前端优化手段。

前端优雅地实现“请求队列”

在项目开发过程中代码统一是至关重要的，不然每次接手其他人的代码，第一眼过去就是 shit code ，不得不在动手修改前先格式化代码；如果他人的格式化工具和你不一样，别人也是第一时间格式化你的代码......周而复始，全是 shit code。

前端统一代码格式通过以下几步实现

# 开发工具 VsCode
比较主流的是 VsCode、WebStorm；但必须统一开发工具，组内必须是 VsCode 或者 WebStorm。以下都是基于 vsCode

![图片.png](/static/img/7f1e11a544f845a7d37df4b02d03ee12.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)



# .editorconfig & EditorConfig for VS Code

![图片.png](/static/img/7d66af3e97c6e9d722895fe8c2c632b0.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

EditorConfig有助于保持代码风格的一致性，尤其在多人协作项目中非常有用。它通过一个名为.editorconfig的配置文件来为不同的编辑器和IDE（包括VS Code）定义代码样式规则。

1. 添加EditorConfig for VS Code插件
2. 文件根路径添加.editorconfig，设置格式

``` js 
# http://editorconfig.org

# 表示是最顶层的配置文件，发现值为true时，才会停止查找.editorconfig文件
root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = tab # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = false # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
```

# .prettierrc & Prettier - Code formatter

![图片.png](/static/img/2007e307c1dab74d46ac5d31acac3557.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

Prettier是一个流行的代码格式化工具，旨在通过自动应用一致的代码风格来提高代码可读性和开发效率。它支持多种语言和框架，并且可以与编辑器、IDE 以及构建工具集成，使得代码风格保持一致变得非常简单。

### 安装
``` bash 
npm install prettier -D
```

### 配置.prettierrc 文件
``` js 
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 120,
  "semi": false, // 末尾加分号
  "singleQuote": true, // 是否单引号
  "trailingComma": "none" //最后一个元素后添加尾随逗号
}
```

### 格式化所有代码
``` js 
{
  "scripts": {
    "format": "prettier --write ."
  },
}
```

# husky
Husky 是一个用于 Git Hooks 的工具，它使得在 Git 事件（如 commit push等）触发时自动运行脚本变得非常简单。通过 Husky，你可以在代码提交或推送之前执行诸如代码格式化、测试、Lint 检查等操作，确保代码质量和一致性。

项目中提交代码有的时候就是一段话，或者数字，例如 git commit -m；对于后人无法理解，于是在代码提交前通过工具迫使规范提交是必要的

### 安装 husky
``` bash
npm install -D husky
```

### 初始化 husky
初始化之后会生成 .husky文件
``` bash
npx husky install
```

![图片.png](/static/img/667150a7a21134bb4dd5784a70dbdb7e.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

![图片.png](/static/img/6f5041ebca8f60e08a43e8f61bb213b0.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

### 编辑脚本
我们要在 commit 前统一格式化代码和提交时按照修改类型提交，分别在 pre-commit 和 commit-msg 中

![图片.png](/static/img/e122a467d48d7d19269a59f49e188a50.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

![图片.png](/static/img/6ddd2d0a16d6fb62e6b71361364a136e.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)


### 安装 commitlint 和 commitlint.config.js
Commitlint 是用来规范 Git 提交信息的工具，确保每次提交都遵循一定的格式标准
``` bash
npm install -D @commitlint/config-conventional @commitlint/cli
```

### 配置commitlint.config.js
``` js
/*
规范commit日志
https://commitlint.js.org
*/

const types = [
  'build', // 主要目的是修改项目构建系统（例如glup，webpack，rollup的配置等）的提交
  'ci', // 修改项目的持续集成流程（Kenkins、Travis等）的提交
  'chore', // 构建过程或辅助工具的变化
  'docs', // 文档提交（documents）
  'feat', // 新增功能（feature）
  'fix', // 修复 bug
  'pref', // 性能、体验相关的提交
  'refactor', // 代码重构
  'revert', // 回滚某个更早的提交
  'style', // 不影响程序逻辑的代码修改、主要是样式方面的优化、修改
  'test' // 测试相关的开发,
],
  typeEnum = {
    rules: {
      'type-enum': [2, 'always', types]
    },
    value: () => {
      return types
    }
  }

module.exports = {
  extends: ['@commitlint/config-conventional'],
  /*
  Level [0..2]: 0 disables the rule. For 1 it will be considered a warning for 2 an error.
  https://commitlint.js.org/#/reference-rules
  */
  rules: {
    'type-enum': typeEnum.rules['type-enum'],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never']
  }
}
```


### 提交
提交会先执行 pre-commit 这个时候会执行 npm run format 格式化代码
``` bash
git commit -m "feat:开发首页模块"
git commit -m "fix:修复了某某bug"
git commit -m "feat:xxxxxxx"
```

### Lint-staged
husky 会检查项目中所有的代码，中途接手一个老项目时会有很多错误。lint-staged 只检查本次提交所修改(指 git 暂存区里的东西)的问题，没修改过的不检查
``` bash
npm install -D lint-staged
```

### 配置 package.json
``` json
{
"lint-staged": {
    "*.{js,vue}": [
      "prettier --write"
    ],
    "*.less": [
      "stylelint --fix"
    ]
  },
}
```

# 总结
对于一定规模的项目，毫无疑问是多人开发的，如果项目中的代码风格不统一，非常影响心情

试想一下，你从代码仓库中拉取代码在 vscode 中保存一下，结果全是修改，你只是保存了一下并没有修改，而后续你的修改也埋在当中，于是不得不先提交格式化修改....反复下去就是 shit code

通过 prettier，editorconfig 和 husky 可以很大程度上避免这些问题，但是并不绝对，合并的代码审查也是十分必要的

前端项目中统一代码格式

# 前言
随着前端应用功能的增加，项目的打包体积也会不断膨胀，影响加载速度和用户体验。本文介绍了几种常见的打包优化策略，通过Vite和相关插件，帮助减少项目体积、提升性能，优化加载速度。

## rollup-plugin-visualizer
rollup-plugin-visualizer插件，是一个可视化工具，以图表的形式，展示打包结果的模块构成与体积分布。

**安装：**

``` bash
pnpm add rollup-plugin-visualizer -D
```

**用法：**
``` js
// vite.config.ts

import { visualizer } from "rollup-plugin-visualizer";

module.exports = {
  plugins: [visualizer()],
};
```

pnpm build 一下, 打开生成的stats.html文件。


![image.png](/static/img/03299707a8a039d4da96ef0aa450e4e8.image.webp)
xlsx 、html2canvas、jspdf，这3个第三方库占了主要部分。



# 分包策略
在项目中，xlsx 、html2canvas、jspdf，只在对应功能模块中使用，可以单独打包出来，用户使用对应功能，才会下载对应js脚本。

在rollupOptions 选项的 manualChunks函数中控制分包逻辑，并配合 experimentalMinChunkSize 属性，阀值设置为 20 KB，模块大小，大于20kb的才会单独打包成chunk。

``` js
rollupOptions: {
  experimentalLogSideEffects: true,
  output: {
    experimentalMinChunkSize: 20 * 1024,
    manualChunks: (id: string) => {
      if (id.includes('html2canvas')) {
        return 'html2canvas';
      }
      if (id.includes('jspdf')) {
        return 'jspdf';
      }
      if (id.includes('xlsx')) {
        return 'xlsx';
      }
    }
  }
}
```

build一下，查看控制台信息。 

![image.png](/static/img/98d5b18a8b243d3ddacba630b6614488.image.webp)

成功的将这3个第三方库单独打包成chunk，vite默认会把所有静态资源都打包到assets文件夹，配置chunkFileNames、entryFileNames、assetFileNames将静态资源分类。

``` js
chunkFileNames: 'static/js/[name]-[hash].js', // 代码分割后文件名
entryFileNames: 'static/js/[name]-[hash:6].js', // 入口文件名
assetFileNames: 'static/[ext]/[name]-[hash].[ext]' // 静态资源文件名
```

build一下，打包后到结果：

![image.png](/static/img/fc59f76f7e2f062227f00ca634d3d6b1.image.webp)


# 减少包体积
**vite-plugin-remove-console移除consele**

**安装：**
``` bash
pnpm add vite-plugin-remove-console -D
```

**用法:**
``` js
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import removeConsole from "vite-plugin-remove-console";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), removeConsole()]
});
```
  
# vite-plugin-compression压缩代码

vite-plugin-compression插件压缩代码成gzip格式或者br格式，ngixn开启gizp，http缓存策略。

**安装:**
``` bash
pnpm add vite-plugin-compression -D
```

**配置说明**

![image.png](/static/img/cd14c14131e49354dcc14540c2ab924e.image.webp)

**用法:**
``` js
import viteCompression from 'vite-plugin-compression';

export default () => {
  return {
    plugins: [ 
      viteCompression({
        threshold: 1024 * 20, 
        algorithm: 'gzip',
        ext: '.gz'
      })]
  };
};
```

build一下：

![image.png](/static/img/97f8c4171a8ab2e1ac0ce945322b2467.image.webp)

修改压缩算法，打包成br格式：
``` js
import viteCompression from 'vite-plugin-compression';

export default () => {
  return {
    plugins: [ 
      viteCompression({
        threshold: 1024 * 20, 
        algorithm: 'brotliCompress',
        ext: '.br'
      })]
  };
};
```

打包结果：

![image.png](/static/img/9584c0b15d6d13b52bf2fdc8afaec305.image.webp)
br格式，明显比gzip格式还小。


# 外链CDN

如果条件允许外链接CDN，那么使用rollup-plugin-external-globals 插件将外部依赖映射为全局变量，避免将其打包进最终文件，减小文件体积。配合vite-plugin-html 自动注入代码到HTML文件中。

**安装：**
``` bash
pnpm add vite-plugin-html rollup-plugin-external-globals -D
```

**用法：**
``` js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createHtmlPlugin } from 'vite-plugin-html';
import externalGlobals from 'rollup-plugin-external-globals';

const cdn = {
  jspdf: 'jspdf',
  xlsx: 'XLSX',
  html2canvas: 'html2canvas'
};

const externalList = Object.keys(cdn);

const globals = externalGlobals(cdn);

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createHtmlPlugin({
      minify: true,
      inject: {
        data: {
          jspdfscript:
            '<script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>',
          xlsxscript:
            '<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>',
          html2canvasscript:
            '<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>'
        }
      }
    })
  ],
  build: {
    rollupOptions: {
      external: externalList,
      plugins: [visualizer({ open: true }), globals]
    }
  }
});
```

在index.html中使用CDN脚本：
``` html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AIChat</title>
    <%- xlsxscript %> <%- jspdfscript %> <%- html2canvasscript %>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
```

对比效果：

优化前：1.7MB

优化后：899KB

# 总结
- **可视化分析**：使用 rollup-plugin-visualizer 直观查看打包后的模块大小，找出大体积模块进行优化。
- **分包策略**：通过 manualChunks 将大依赖库分离到单独的chunk，减少首屏加载资源。
- **去除无用console**：利用 vite-plugin-remove-console 删除开发环境中的console，减少打包体积。
- **代码压缩**：通过 vite-plugin-compression 压缩代码为 gzip 或 brotli 格式，减小文件大小。
- **外链CDN**：使用 rollup-plugin-external-globals 和 vite-plugin-html 将常用库通过CDN加载，避免将它们打包到最终文件。

这些优化策略成功将打包体积从1.7MB减少到899KB，提升了应用性能。

Vite打包优化实践：从分包到性能提升

# 一、DeepSeek质控能力矩阵

![image.png](/static/img/3a4f8bb872f11778f2ec57f17bece6a9.image.webp)

自然语言理解、知识图谱引擎、规则推理系统、联邦学习框架的组合体现了DeepSeek在智能质控中的多重优势。通过非结构化文本解析、诊疗逻辑验证、规则执行和多中心模型优化，不仅提升了数据处理效率，还能根据医院间数据的差异不断优化模型的泛化能力。



# 二、关键技术实现
## 1. 缺陷检测算法

通过实体识别（NER）、规则匹配和逻辑推理，DeepSeek能够自动检测病历中的各类缺陷，提高了诊疗过程的规范性和安全性。  

```python
def detect_defect(emr_text):
    # 实体识别
    entities = deepseek.ner(emr_text)
    # 规则匹配
    rule_violations = rule_engine.check(entities)
    # 逻辑推理
    logic_errors = knowledge_graph.validate(entities)
    return rule_violations + logic_errors
```
## 2. 智能修正建议
系统能够生成详细的缺陷修正建议，并提供标准化的修正示例，这对医生的日常工作提供了极大的支持，有助于减少因书写不规范引发的医疗风险

```js
{
  "缺陷类型": "规范性缺陷",
  "问题描述": "诊断名称不规范",
  "错误示例": "肺部感染（非标准名称）",
  "建议修正": "J18.901 肺炎",
  "依据来源": "ICD-11编码规范2023版"
}
```
## 3. 联邦学习框架
这一机制能够在保护医院数据隐私的同时，提升模型的普适性和精准度。通过聚合各医院的数据梯度，持续优化全局模型，最终实现跨医院、跨区域的质控能力提升。

![image.png](/static/img/00a9cb0f7f04b23de1aaa8f467b6fbb9.image.webp)

# 三、五层质控体系架构
## 1. 数据治理层
通过对病历数据的预处理（文本解析、信息抽取、标准化映射）和质量标记，确保系统输入的数据质量，为后续的智能分析打下基础。# 病历数据预处理流程

```python
def preprocess(emr_data):
    # 非结构化文本解析
    parsed = deepseek.nlp.parse(emr_data)
    # 关键信息抽取
    entities = deepseek.ner(parsed)
    # 标准化映射
    standardized = emr_mapper(entities)
    # 质量标记
    return quality_tagging(standardized)
```
## 2. 规则引擎层
三级规则体系：  
通过三级规则体系，确保了对病历的完整性、规范性和逻辑性的全面把控。这个设计非常符合医疗行业对数据精准性的高要求。
| 规则类型       | 检测维度                  | 示例规则                          |
|----------------|---------------------------|-----------------------------------|
| 完整性规则     | 必填项/时间节点           | 入院记录需包含主诉、现病史等8项   |
| 规范性规则     | 术语/格式标准             | 诊断名称必须使用ICD-11编码        |
| 逻辑性规则     | 诊疗路径合理性            | 手术记录与麻醉记录时间逻辑校验    |

## 3. 智能分析层
通过DeepSeek解析病历数据并结合规则引擎和知识库进行深度分析，实时提供缺陷反馈，并且自动更新知识库，保证系统的智能性和自我进化能力。

![image.png](/static/img/747d86e7524774f8e3bbae99aadad601.image.webp)

## 4. 可视化层
通过图表和仪表盘等可视化手段，便于管理者和医生实时掌握质控情况，及时做出调整和改进。

```js
{
  tooltip: { trigger: 'item' },
  series: [{
    type: 'pie',
    data: [
      { value: 68, name: '完整性缺陷' },
      { value: 23, name: '规范性缺陷' },
      { value: 9, name: '逻辑性缺陷' }
    ]
  }]
}
```
## 5. 持续优化层
联邦学习机制能够实现医院之间的协同学习，逐步提升模型准确性，符合医疗领域的隐私保护要求。  
联邦学习机制：

![image.png](/static/img/d3a26d64f3f21a483acf650fbe9a97ea.image.webp)

# 四、十二步实施路径阶段
## 1：需求准备（1-2个月）
1. 质控标准梳理：整理医院现有质控规则3000+条
2. 数据资产盘点：抽取3年历史病历建立训练集
3. 标注系统搭建：开发病历缺陷标注工具
4. 知识图谱构建：建立包含疾病-症状-药品关系的医学知识库阶段

## 2：系统建设（3-4个月）
1. 规则数字化：将人工规则转化为可执行代码
2. 模型训练：使用DeepSeek完成BERT+CRF模型训练
3. 系统对接：与HIS/EMR系统集成（HL7标准接口）
4. 沙盒测试：在测试环境完成千份病历验证阶段

## 3：部署优化（2-3个月）
1. 试点运行：选择3个重点科室上线
2. 人机对比：与人工质控结果进行一致性检验
3. 流程再造：建立AI质控-医生修正-闭环管理机制
4. 持续迭代：每月更新知识库和模型

# 五、关键成功要素
- 数据治理：建立标准化病历数据字典（覆盖300+字段）
- 医工协同：临床专家与AI工程师联合工作组
- 渐进策略：从基础规则到复杂逻辑分阶段实施
- 安全合规：通过等保三级认证+区块链存证

# 六、持续优化机制
- **月度迭代**：
1. 新增10-15条临床路径规则
2. 优化NER模型准确率（目标>98%）
3. 更新医学知识图谱（新增500+节点）
- **年度升级**：
1. 扩展质控范围（护理记录/知情同意书等）
2. 对接DRG/DIP医保审核
3. 构建区域质控联盟链

# 七、实施建议
该方案通过DeepSeek的NLP和知识推理能力，使电子病历质控实现：
- 从抽样到全量：100%病历实时质控
- 从人工到智能：缺陷发现准确率>95%
- 从事后到事前：医生书写时即时提醒
- 从孤立到协同：区域质控标准统一

建议医院优先实施基础规则质控（完整性/规范性），6个月后再拓展复杂逻辑校验，最终构建覆盖"书写-归档-应用"全流程的智能质控体系。

DeepSeek电子病历智能质控系统方案

# cursor简介
Cursor 是一款集成了 AI 技术的代码编辑器，作为广受欢迎的 VS Code 的一个衍生版本，它不仅继承了 VS Code 的强大功能，还全面融入了 AI 功能，从而极大地简化了开发工作流，让编程更加便捷高效。

对于 VS Code 用户来说，完全可以无缝衔接到 Cursor 上进行使用，享受到更加智能化的编码体验。

# 相关网站
[官网](https://www.cursor.com/)  
[官方使用文档（英文）](https://docs.cursor.com/get-started/migrate-from-vscode)  
[第三方使用文档（中文）](https://learn-cursor.com/)  




# cursor内容整理

![image.png](/static/img/503e79966c72dde8b38db35da7e07405.image.webp)

# cursor提示词（vue3）
`

You are an expert in TypeScript, Vite, Vue.js, Vue Router, Pinia, VueUse, Element Plus, Axios, Dayjs, UnoCSS, Tailwind CSS, scss, with a deep understanding of best practices and performance optimization techniques in these technologies.
  
Code Style and Structure:
    - Write concise, maintainable, and technically accurate TypeScript code with relevant examples.
    - Use functional and declarative programming patterns; avoid classes.
    - Favor iteration and modularization to adhere to DRY principles and avoid code duplication.
    - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
    - Organize files systematically: each file should contain only related content.
    - Each change, do not affect other functions and interface layout style.
    
File Directory
    If initializing a project, strictly use the following file path directory:
        |-- public/               #相对静态资源
        |
        |-- vite/                 #vite配置
        |   |-- plugins/          #vite插件
        |
        |-- src/
        |   |-- api/              #api定义
        |   |-- assets/           #动态静态资源
        |   |-- components/       #公共组件
        |   |-- hooks/            #vue hooks
        |   |-- layouts/          #布局
        |   |-- locale/           #多语言配置
        |   |-- routers/          #vue-router配置及定义
        |   |-- stores/           #pinia配置及定义
        |   |-- utils/            #公共工具库
        |   |-- types/            #TypeScript类型声明
        |   |-- views/            #页面文件
        |   |   |-- login/        #示例页面文件
        |   |   |   |-- index.vue
        |   |   |   |-- index.scss
        |   |
        |   |-- App.vue           #app.vue
        |   |-- main.ts           #入口文件
        |
        |-- .env                  #环境变量（全局）
        |-- .env.development      #环境变量（开发）
        |-- .env.production       #环境变量（生产）
        |-- .eslintrc.ts          #eslint配置文件
        |-- .gitignore            #git忽略配置
        |-- .npmrc                #npm配置
        |-- uno.config.ts         #unocss配置
        |-- tsconfig.json         #ts配置文件
        |-- index.html    
        |-- package.json          #项目依赖
        |-- README.md             #项目说明文档

  
Naming Conventions:
    - FileName use lowercase with dashes for directories (e.g., components/auth-wizard).
    - Favor named exports for functions.
  
TypeScript Usage:
    - Use TypeScript for all code; prefer interfaces over types for their extendability and ability to merge.
    - Avoid enums; use maps instead for better type safety and flexibility.
    - Use functional components with TypeScript interfaces.
  
Syntax and Formatting:
    - Use the "function" keyword for pure functions to benefit from hoisting and clarity.
    - Always use the Vue Composition API script setup style.
  
UI and Styling:
    - Use Element Plus for components, Use UnoCSS + TailwindCSS class for styling, Use scss for style type, Scss use 'modern-compiler'.
    - Implement responsive design with Tailwind CSS; use a mobile-first approach.
  
Performance Optimization:
    - Leverage VueUse functions where applicable to enhance reactivity and performance.
    - Wrap asynchronous components in Suspense with a fallback UI.
    - Use dynamic loading for non-critical components.
    - Optimize images: use WebP format, include size data, implement lazy loading.
    - Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.

Language:
    - Use vue-i18n, default language is Zh-ch.
  
Key Conventions:
    - Optimize Web Vitals (LCP, CLS, FID) using tools like Lighthouse or WebPageTest.

Other Tools:
    - Use unplugin-auto-import, unplugin-vue-components, lodash, vue-i18n, js-cookie, autoprefixer.

Cursor:
    - Prompt my language to use simplified Chinese.
    
`