优化更新

DjangoAdmin_FastAPI_NaiveVue/zh/volume4/frontend/style.md

@@ -1,35 +1,35 @@
 # 样式与主题
 
 :::tip 说明
-前端样式方案采用 Tailwind CSS + SCSS + ElementPlus 主题覆盖，支持深色模式切换。全局 SCSS 变量通过 Vite 的 `additionalData` 注入。
+前端样式方案采用 Tailwind CSS + Less + NaiveUI 主题覆盖，支持深色模式切换。全局 Less 变量通过 Vite 的 `additionalData` 注入。
 :::
 
 ## 样式架构
 
 ```
 src/styles/
-├── var.scss             # SCSS 全局变量（通过 Vite additionalData 注入）
-├── index.scss           # 入口文件，引入所有样式
+├── var.less             # Less 全局变量（通过 Vite additionalData 注入）
+├── index.less           # 入口文件，引入所有样式
 ├── tailwindbase.css     # Tailwind CSS 基础样式
-└── element-override.css # ElementPlus 主题覆盖（可选）
+└── naive-override.css   # NaiveUI 主题覆盖（可选）
 ```
 
-## SCSS 全局变量
+## Less 全局变量
 
-Vite 配置中通过 `additionalData` 注入全局 SCSS 变量：
+Vite 配置中通过 `additionalData` 注入全局 Less 变量：
 
 ```typescript
 // vite.config.ts
 css: {
     preprocessorOptions: {
-        scss: {
-            additionalData: `@import "src/styles/var.scss";`,
+        less: {
+            additionalData: `@import "src/styles/var.less";`,
         },
     },
 },
 ```
 
-这意味着 `var.scss` 中定义的变量在所有 `.vue` 和 `.scss` 文件中自动可用，无需手动 `@import`。
+这意味着 `var.less` 中定义的变量在所有 `.vue` 和 `.less` 文件中自动可用，无需手动 `@import`。
 
 ## Tailwind CSS
 
@@ -56,36 +56,34 @@ import './styles/tailwindbase.css';
 <div class="w-full md:w-1/2 lg:w-1/3">响应式宽度</div>
 ```
 
-## ElementPlus 主题
+## NaiveUI 主题
 
-ElementPlus 通过 CSS 变量支持主题定制：
+NaiveUI 通过 CSS 变量支持主题定制：
 
 ```typescript
 // main.ts
-import 'element-plus/dist/index.css';
-import 'element-plus/theme-chalk/display.css';
-import 'element-plus/theme-chalk/dark/css-vars.css'; // 深色模式 CSS 变量
+import 'naive-ui/dist/index.css';
 ```
 
-### ElementPlus 全局引入
+### NaiveUI 全局配置
 
 ```typescript
-// src/plugins/setupElement.ts
-import ElementPlus from 'element-plus';
-import zhCn from 'element-plus/es/locale/lang/zh-cn';
+// src/plugins/setupNaiveUI.ts
+import { createDiscreteApi, darkTheme } from 'naive-ui';
 
-export function setupElement(app) {
-    app.use(ElementPlus, { locale: zhCn, size: 'default' });
+export function setupNaiveUI(app) {
+    // NaiveUI 通过 ConfigProvider 进行全局配置
+    // 在 AppProvider 组件中通过 n-config-provider 设置 locale 和主题
 }
 ```
 
 ## 深色模式
 
-通过 ElementPlus 的 `dark/css-vars.css` 和 Tailwind 的 `dark` 模式实现深色主题：
+通过 NaiveUI 的主题变量和 Tailwind 的 `dark` 模式实现深色主题：
 
 ```vue
 <template>
-    <el-switch v-model="isDark" @change="toggleDark" />
+    <n-switch v-model:value="isDark" @change="toggleDark" />
 </template>
 
 <script setup>
@@ -100,9 +98,9 @@ const toggleDark = (val) => {
 
 ```css
 .dark {
- --el-bg-color: #1d1e1f;
- --el-text-color-primary: #e5eaf3;
- --el-border-color: #4c4d4f;
+ --n-base-color: #1d1e1f;
+ --n-text-color-base: #e5eaf3;
+ --n-border-color: #4c4d4f;
 }
 ```
 
@@ -130,12 +128,12 @@ export function useDesignSetting() {
 ```vue
 <template>
     <PageWrapper>
-        <el-card :bordered="false" class="pt-3 mb-3 proCard">
+        <n-card :bordered="false" class="pt-3 mb-3 proCard">
             <!-- 搜索区域 -->
-        </el-card>
-        <el-card :bordered="false" class="proCard">
+        </n-card>
+        <n-card :bordered="false" class="proCard">
             <!-- 表格区域 -->
-        </el-card>
+        </n-card>
     </PageWrapper>
 </template>
 ```
@@ -145,9 +143,9 @@ export function useDesignSetting() {
 `proCard` 是项目定义的卡片样式类，用于统一卡片组件的间距和边框。
 
 :::tip 温馨提示
-优先使用 Tailwind 原子类实现样式，避免编写自定义 CSS。需要全局覆盖时使用 CSS 变量。SCSS 变量通过 Vite `additionalData` 自动注入，无需每个文件手动引入。
+优先使用 Tailwind 原子类实现样式，避免编写自定义 CSS。需要全局覆盖时使用 CSS 变量。Less 变量通过 Vite `additionalData` 自动注入，无需每个文件手动引入。
 :::
 
 ## 总结
 
-样式方案采用 Tailwind CSS 提供原子化样式 + SCSS 全局变量（Vite `additionalData` 注入）+ ElementPlus 主题覆盖，支持深色模式切换。`designSetting` store 管理主题配置，`PageWrapper` 组件提供统一页面容器。
+样式方案采用 Tailwind CSS 提供原子化样式 + Less 全局变量（Vite `additionalData` 注入）+ NaiveUI 主题覆盖，支持深色模式切换。`designSetting` store 管理主题配置，`PageWrapper` 组件提供统一页面容器。