优化更新

DjangoAdmin_FastAPI_NaiveVue/zh/volume4/frontend/setup.md

@@ -1,7 +1,7 @@
 # 前端环境与结构
 
 :::tip 说明
-前端基于 Vue3 + ElementPlus 构建，使用 pnpm 作为包管理工具，Vite 作为构建工具，TypeScript 作为开发语言。
+前端基于 Vue3 + NaiveUI 构建，使用 pnpm 作为包管理工具，Vite 作为构建工具，TypeScript 作为开发语言。
 :::
 
 ## 技术栈
@@ -9,14 +9,14 @@
 | 技术 | 版本 | 说明 |
 |------|------|------|
 | Vue | 3.x | 渐进式 JavaScript 框架，组合式 API |
-| ElementPlus | 2.x | Vue3 组件库 |
+| NaiveUI | 2.x | Vue3 组件库 |
 | Vite | 3.x | 下一代前端构建工具 |
 | Pinia | 2.x | 状态管理（Vuex 替代方案） |
 | Vue Router | 4.x | 路由管理 |
 | Axios | 1.x | HTTP 请求库 |
 | TypeScript | 5.x | 类型安全的 JavaScript 超集 |
 | Tailwind CSS | 3.x | 原子化 CSS 框架 |
-| SCSS | - | CSS 预处理器 |
+| Less | - | CSS 预处理器 |
 
 ## 目录结构
 
@@ -37,7 +37,7 @@ ui/
 │ ├── router/       # 路由配置（generator-routers、router-guards）
 │ ├── store/        # Pinia 状态管理
 │ │ └── modules/    # Store 模块（user、asyncRoute、projectSetting 等）
-│ ├── styles/       # 全局样式（SCSS 变量、Tailwind）
+│ ├── styles/       # 全局样式（Less 变量、Tailwind）
 │ ├── utils/        # 工具函数（http、auth、Storage、dateUtil）
 │ │ └── http/axios/ # Axios 封装（VAxios 类、拦截器、取消请求）
 │ └── views/        # 页面视图
@@ -107,8 +107,8 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         plugins: createVitePlugins(viteEnv, isBuild, prodMock),
         css: {
             preprocessorOptions: {
-                scss: {
-                    additionalData: `@import "src/styles/var.scss";`,
+                less: {
+                    additionalData: `@import "src/styles/var.less";`,
                 },
             },
         },
@@ -130,7 +130,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
 关键配置说明：
 
 - `@` 别名指向 `src/` 目录，代码中可用 `@/api/system/position` 引入模块
-- SCSS 全局变量通过 `additionalData` 注入，无需每个文件手动 `@import`
+- Less 全局变量通过 `additionalData` 注入，无需每个文件手动 `@import`
 - 代理配置通过 `VITE_PROXY` 环境变量传入，由 `createProxy()` 工具函数解析
 - 构建产物输出到 `OUTPUT_DIR`（默认 `dist/`）
 
@@ -139,28 +139,27 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
 `src/main.ts` 是应用入口，负责初始化所有基础设施：
 
 ```typescript
-import './styles/tailwindbase.css';
-import 'element-plus/dist/index.css';
-import './styles/index.scss';
-import * as ElementPlusIconsVue from '@element-plus/icons-vue';
+import './styles/tailwind.css';
+import './styles/index.less';
 import { createApp } from 'vue';
 import App from './App.vue';
 import router, { setupRouter } from './router';
 import { setupStore } from '@/store';
-import { setupElement, setupDirectives, setupCustomComponents } from '@/plugins';
+import {
+    setupNaive,
+    setupDirectives,
+    setupCustomComponents,
+    setupNaiveDiscreteApi,
+} from '@/plugins';
 
 async function bootstrap() {
     const app = createApp(App);
 
-    // 注册所有 ElementPlus 图标
-    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-        app.component(key, component);
-    }
-
-    setupElement(app);              // 全局引入 ElementPlus 组件
-    setupCustomComponents(app);     // 注册自定义组件
-    setupDirectives(app);           // 注册自定义指令（v-perm 等）
     setupStore(app);                // 挂载 Pinia 状态管理
+    setupNaive(app);                // 全局注册 NaiveUI 组件
+    setupCustomComponents(app);     // 注册自定义组件
+    setupNaiveDiscreteApi();        // 挂载 NaiveUI 脱离上下文的 Api
+    await setupDirectives(app);     // 注册自定义指令（v-perm 等）
     await setupRouter(app);         // 挂载路由
     await router.isReady();         // 路由准备就绪
 
@@ -170,7 +169,7 @@ async function bootstrap() {
 void bootstrap();
 ```
 
-初始化顺序：样式加载 -> ElementPlus -> 自定义组件 -> 自定义指令 -> Pinia Store -> Router -> 挂载。
+初始化顺序：Pinia Store -> NaiveUI -> 自定义组件 -> NaiveUI DiscreteApi -> 自定义指令 -> Router -> 挂载。
 
 ## 核心目录说明
 
@@ -180,7 +179,7 @@ API 接口定义目录，按模块组织文件。公共接口在 `api/common/`
 
 ### components/
 
-公共组件目录，基于 ElementPlus 二次封装，包含 `Table`（BasicTable 表格）、`Form`（BasicForm 表单）、`Modal`（BasicModal 弹窗）、`Upload`、`Editor`、`Cropper`、`Select` 等。
+公共组件目录，基于 NaiveUI 二次封装，包含 `Table`（BasicTable 表格）、`Form`（BasicForm 表单）、`Modal`（BasicModal 弹窗）、`Upload`、`Editor`、`Cropper`、`Select` 等。
 
 ### directives/
 
@@ -212,4 +211,4 @@ Pinia 状态管理目录，核心模块：
 
 ## 总结
 
-前端项目基于 Vue3 + ElementPlus + Vite + TypeScript + Pinia 构建，使用 pnpm 管理依赖，Tailwind CSS + SCSS 提供样式能力。通过 `main.ts` 的 `bootstrap()` 函数按顺序初始化所有基础设施，目录结构按功能分层组织，便于维护和扩展。
+前端项目基于 Vue3 + NaiveUI + Vite + TypeScript + Pinia 构建，使用 pnpm 管理依赖，Tailwind CSS + Less 提供样式能力。通过 `main.ts` 的 `bootstrap()` 函数按顺序初始化所有基础设施，目录结构按功能分层组织，便于维护和扩展。