diff --git a/DjangoAdmin_Tornado_NaiveVue/.vitepress/config/shared.ts b/DjangoAdmin_Tornado_NaiveVue/.vitepress/config/shared.ts index bbe394e..67caa1b 100644 --- a/DjangoAdmin_Tornado_NaiveVue/.vitepress/config/shared.ts +++ b/DjangoAdmin_Tornado_NaiveVue/.vitepress/config/shared.ts @@ -87,7 +87,7 @@ export const sharedConfig = defineConfig({ socialLinks: [ { icon: "github", - link: "https://gitee.com/djangoadmin/DjangoAdmin_Tornado_EleVue", + link: "https://gitee.com/djangoadmin/DjangoAdmin_Tornado_NaiveVue", }, ], @@ -98,7 +98,7 @@ export const sharedConfig = defineConfig({ }, editLink: { - pattern: "https://gitee.com/djangoadmin/DjangoAdmin_Tornado_EleVue", + pattern: "https://gitee.com/djangoadmin/DjangoAdmin_Tornado_NaiveVue", text: "对本页提出修改建议", }, diff --git a/DjangoAdmin_Tornado_NaiveVue/.vitepress/config/zh.ts b/DjangoAdmin_Tornado_NaiveVue/.vitepress/config/zh.ts index 936b35e..c7c5dbc 100644 --- a/DjangoAdmin_Tornado_NaiveVue/.vitepress/config/zh.ts +++ b/DjangoAdmin_Tornado_NaiveVue/.vitepress/config/zh.ts @@ -19,7 +19,7 @@ export const zhConfig: LocaleSpecificConfig = { var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); - hm.src = "https://hm.baidu.com/hm.js?f071c8d09d195a85c543afe1e419c5d5"; + hm.src = "https://hm.baidu.com/hm.js?f1512443b2c18b2e1ec1bfc25d04a604"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); @@ -29,7 +29,7 @@ export const zhConfig: LocaleSpecificConfig = { themeConfig: { editLink: { - pattern: "https://gitee.com/djangoadmin/DjangoAdmin_Tornado_EleVue", + pattern: "https://gitee.com/djangoadmin/DjangoAdmin_Tornado_NaiveVue", text: "对本页提出修改建议", }, @@ -44,7 +44,7 @@ export const zhConfig: LocaleSpecificConfig = { nav: [ { text: "官网", link: "https://www.djangoadmin.cn" }, - { text: "授权", link: "https://www.djangoadmin.cn/goods/detail/2" }, + { text: "授权", link: "https://www.djangoadmin.cn/goods/detail/4" }, { text: "部署文档", items: [ @@ -207,8 +207,8 @@ export const zhConfig: LocaleSpecificConfig = { link: "https://cn.vuejs.org/", }, { - text: "ElementPlus", - link: "https://element-plus.org/zh-CN/", + text: "NaiveUI", + link: "https://www.naiveui.com/zh-CN", }, ], }, @@ -565,7 +565,7 @@ export const zhConfig: LocaleSpecificConfig = { }, // ------------------------------------------------------------ - // 5.4 前端开发（Vue3 + Element Plus） + // 5.4 前端开发（Vue3 + NaiveUI） // ------------------------------------------------------------ { text: "5.4 前端开发", @@ -811,7 +811,7 @@ export const zhConfig: LocaleSpecificConfig = { { text: "9.2 免责声明", link: "/zh/other/declare.html" }, { text: "9.3 开源协议", - link: "https://gitee.com/djangoadmin/DjangoAdmin_Tornado_EleVue/blob/master/LICENSE", + link: "https://gitee.com/djangoadmin/DjangoAdmin_Tornado_NaiveVue/blob/master/LICENSE", }, { text: "9.4 广告赞助", link: "/zh/other/sponsor.html" }, ], diff --git a/DjangoAdmin_Tornado_NaiveVue/index.md b/DjangoAdmin_Tornado_NaiveVue/index.md index d8d0f12..318e071 100644 --- a/DjangoAdmin_Tornado_NaiveVue/index.md +++ b/DjangoAdmin_Tornado_NaiveVue/index.md @@ -2,11 +2,11 @@ layout: home title: DjangoAdmin文档 -titleTemplate: 前后端分离Tornado+ElementPlus版 +titleTemplate: 前后端分离Tornado+NaiveUI版 hero: name: DjangoAdmin - text: "企业级中台解决方案Tornado+ElementPlus版" + text: "企业级中台解决方案Tornado+NaiveUI版" tagline: "赋能开发者，助力企业发展。\n企业级数据平台底座 · 让数字化触手可及。" image: src: /logo.svg @@ -17,10 +17,10 @@ hero: link: /zh/introduction - theme: alt text: 在线演示 - link: http://manage.tornado.elevue.djangoadmin.cn + link: http://manage.tornado.naivevue.djangoadmin.cn - theme: alt text: 官方授权 - link: https://www.djangoadmin.cn/goods/detail/2 + link: https://www.djangoadmin.cn/goods/detail/4 - theme: alt text: ❤️ 成为赞助商 link: /zh/other/sponsor.html @@ -37,7 +37,7 @@ features: linkText: 查看更多 rel: noreferrer - title: 🚀 全新技术栈 - details: Vue3、TypeScript、Vite、Pinia、Vue Router 等技术栈，采用主流前后端分离架构实现。 + details: Tornado 6、SQLAlchemy 2.0、Pydantic v2、Vue3、TypeScript、Vite、Pinia、Vue Router 等技术栈，采用主流前后端分离架构实现。 link: /zh/volume3/tech-stack linkText: 查看更多 rel: noreferrer diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/changelog.md b/DjangoAdmin_Tornado_NaiveVue/zh/changelog.md index fe570f2..8577fd1 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/changelog.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/changelog.md @@ -165,7 +165,7 @@ ### 新增 - **Vue3 升级**：前端框架从 Vue 2 升级至 Vue3.4+，全面拥抱 Composition API -- **ElementPlus**：UI 组件库适配 Vue3 生态 +- **NaiveUI**：UI 组件库适配 Vue3 生态 - **Pinia 状态管理**：替代 Vuex，更轻量、更灵活、TypeScript 支持更完善 - **TypeScript 类型安全**：全量类型定义，IDE 智能提示与编译时类型检查 - **Vite 构建工具**：替代 Webpack，开发服务器毫秒级启动，HMR 即时生效 diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/course.md b/DjangoAdmin_Tornado_NaiveVue/zh/course.md index 59e63d2..03b89a5 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/course.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/course.md @@ -85,7 +85,7 @@ cp .env.example .env # 数据库配置 DB_HOST=127.0.0.1 DB_PORT=3306 -DB_DATABASE=djangoadmin.tornado.elevue2 +DB_DATABASE=djangoadmin.tornado.naivevue DB_USERNAME=root DB_PASSWORD=your_password @@ -112,10 +112,10 @@ python -c "import secrets; print(secrets.token_urlsafe(48))" ```bash # 1. 登录 MySQL，创建数据库 mysql -uroot -p -CREATE DATABASE `djangoadmin.tornado.elevue2` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; +CREATE DATABASE `djangoadmin.tornado.naivevue` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; # 2. 导入数据库脚本（脚本位于 document/mysql/ 目录下） -mysql -uroot -p djangoadmin.tornado.elevue2 < document/mysql/djangoadmin.tornado.elevue2.sql +mysql -uroot -p djangoadmin.tornado.naivevue < document/mysql/djangoadmin.tornado.naivevue.sql ``` :::tip 温馨提示 diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/introduction.md b/DjangoAdmin_Tornado_NaiveVue/zh/introduction.md index 947ec5a..9a42454 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/introduction.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/introduction.md @@ -16,9 +16,9 @@ ## 软件说明 -基于 Tornado、SQLAlchemy、Pydantic、Vue3、TypeScript、Vite、ElementPlus、MySQL 等技术栈构建的企业级前后端分离后台管理系统。 +基于 Tornado、SQLAlchemy、Pydantic、Vue3、TypeScript、Vite、NaiveUI、MySQL 等技术栈构建的企业级前后端分离后台管理系统。 -后端采用 Python 语言，基于 Tornado 异步框架、SQLAlchemy ORM、Pydantic v2 数据校验等主流技术栈；前端基于 Vue3、TypeScript、Vite 构建，采用 ElementPlus 框架，遵循 Vue 前后端分离主流设计思想。 +后端采用 Python 语言，基于 Tornado 异步框架、SQLAlchemy ORM、Pydantic v2 数据校验等主流技术栈；前端基于 Vue3、TypeScript、Vite 构建，采用 NaiveUI 框架，遵循 Vue 前后端分离主流设计思想。 系统采用完全前后端分离架构，前端通过 API 调用后端服务实现数据交互。内置完善的 RBAC 权限体系，权限颗粒度精细至按钮级别；支持多主题切换，兼容桌面端和平板端。系统预置了用户、角色、菜单、部门、岗位、职级、日志、字典、配置、参数、定时任务、代码生成器等基础功能模块，开箱即用。 @@ -55,12 +55,12 @@ ## 软件出处 -+ 软件名称：小蚂蚁云前后端分离Tornado+ElementPlus版本 ++ 软件名称：小蚂蚁云前后端分离Tornado+NaiveUI版本 + 软件作者：@小蚂蚁云团队 + 软件协议：Apache-2.0 + 官网网址：[https://www.djangoadmin.cn](https://www.djangoadmin.cn) -+ 文档网址：[http://docs.tornado.elevue2.djangoadmin.cn](http://docs.tornado.elevue2.djangoadmin.cn) -+ 演示地址：[http://manage.tornado.elevue2.djangoadmin.cn](http://manage.tornado.elevue2.djangoadmin.cn) ++ 文档网址：[http://docs.tornado.naivevue.djangoadmin.cn](http://docs.tornado.naivevue.djangoadmin.cn) ++ 演示地址：[http://manage.tornado.naivevue.djangoadmin.cn](http://manage.tornado.naivevue.djangoadmin.cn) ## 软件版本 diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/volume1/backend.md b/DjangoAdmin_Tornado_NaiveVue/zh/volume1/backend.md index 9835442..a13c19c 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/volume1/backend.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/volume1/backend.md @@ -19,7 +19,7 @@ ```bash # 进入项目根目录（以实际解压路径为准） -cd DjangoAdmin_Tornado_EleVue +cd DjangoAdmin_Tornado_NaiveVue ``` :::tip 温馨提示 @@ -107,7 +107,7 @@ copy .env.example .env # Windows CMD # ============================================================ # 基础配置 # ============================================================ -TORNADO_NAME=Tornado+EleVue旗舰版 +TORNADO_NAME=Tornado+NaiveVue旗舰版 TORNADO_VERSION=v3.0.0 TORNADO_HOST=127.0.0.1 TORNADO_PORT=8041 @@ -120,7 +120,7 @@ TORNADO_DEBUG=True DB_DRIVER=mysql DB_HOST=127.0.0.1 DB_PORT=3306 -DB_DATABASE=djangoadmin.tornado.elevue +DB_DATABASE=djangoadmin.tornado.naivevue DB_USERNAME=root DB_PASSWORD=your_mysql_password # 修改为真实密码 DB_PREFIX=tornado_ @@ -161,10 +161,10 @@ python -c "import secrets; print(secrets.token_urlsafe(48))" ```bash # 1. 登录 MySQL，创建数据库 mysql -uroot -p -CREATE DATABASE `djangoadmin.tornado.elevue` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; +CREATE DATABASE `djangoadmin.tornado.naivevue` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; # 2. 导入数据库脚本 -mysql -uroot -p djangoadmin.tornado.elevue < document/djangoadmin.tornado.elevue.sql +mysql -uroot -p djangoadmin.tornado.naivevue < document/djangoadmin.tornado.naivevue.sql ``` ### 方式二：Alembic 迁移（备选） @@ -220,7 +220,7 @@ python app.py --port=8041 | |_| || |_| || (_| || | | (__ | || |_) || (_| || | | (_| | |____/ \__,_| \__,_||_| \___||_|| .__/ \__,_||_| \__,_| |_| - Tornado + EleVue 企业级管理框架 + Tornado + NaiveVue 企业级管理框架 [INFO] 服务启动成功 → http://127.0.0.1:8041 ``` diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/volume1/database.md b/DjangoAdmin_Tornado_NaiveVue/zh/volume1/database.md index 9468a4f..9c7253d 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/volume1/database.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/volume1/database.md @@ -22,7 +22,7 @@ **MySQL**： ```sql -CREATE DATABASE `djangoadmin.tornado.elevue` +CREATE DATABASE `djangoadmin.tornado.naivevue` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; ``` @@ -30,7 +30,7 @@ CREATE DATABASE `djangoadmin.tornado.elevue` **PostgreSQL**： ```sql -CREATE DATABASE "djangoadmin.tornado.elevue" +CREATE DATABASE "djangoadmin.tornado.naivevue" WITH ENCODING 'UTF8' LC_COLLATE = 'zh_CN.UTF-8' LC_CTYPE = 'zh_CN.UTF-8'; @@ -39,7 +39,7 @@ CREATE DATABASE "djangoadmin.tornado.elevue" **SQL Server**： ```sql -CREATE DATABASE [djangoadmin.tornado.elevue]; +CREATE DATABASE [djangoadmin.tornado.naivevue]; ``` ### 第二步：导入数据库脚本 @@ -51,11 +51,11 @@ MySQL 数据库脚本位于 `document/` 目录下： mysql -uroot -p # 导入脚本 -mysql -uroot -p djangoadmin.tornado.elevue < document/djangoadmin.tornado.elevue.sql +mysql -uroot -p djangoadmin.tornado.naivevue < document/djangoadmin.tornado.naivevue.sql ``` :::tip 温馨提示 -`document/djangoadmin.tornado.elevue.sql` 是 MySQL 专用脚本。对于 PostgreSQL / SQL Server / SQLite / Oracle，建议使用 Alembic 方式初始化。 +`document/djangoadmin.tornado.naivevue.sql` 是 MySQL 专用脚本。对于 PostgreSQL / SQL Server / SQLite / Oracle，建议使用 Alembic 方式初始化。 ::: ### 第三步：导入字典种子数据 @@ -132,7 +132,7 @@ DB_DATABASE=/path/to/djangoadmin.db DB_DRIVER=postgresql DB_HOST=127.0.0.1 DB_PORT=5432 -DB_DATABASE=djangoadmin.tornado.elevue +DB_DATABASE=djangoadmin.tornado.naivevue DB_USERNAME=postgres DB_PASSWORD=your_password ``` diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/volume1/docker.md b/DjangoAdmin_Tornado_NaiveVue/zh/volume1/docker.md index 16e4811..59bcfef 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/volume1/docker.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/volume1/docker.md @@ -166,9 +166,9 @@ services: # ==================================================================== # 应用服务：构建并运行本项目 # ==================================================================== - tornado_elevue: - image: tornado_elevue:latest # 镜像名称 - container_name: tornado_elevue # 容器名称 + tornado_naivevue: + image: tornado_naivevue:latest # 镜像名称 + container_name: tornado_naivevue # 容器名称 build: context: ./ # 构建上下文为项目根目录 dockerfile: Dockerfile # 使用项目根目录的 Dockerfile @@ -270,7 +270,7 @@ volumes: DB_DRIVER=mysql DB_HOST=mysql # Docker 服务名称，不是 127.0.0.1 DB_PORT=3306 -DB_DATABASE=djangoadmin.tornado.elevue +DB_DATABASE=djangoadmin.tornado.naivevue DB_USERNAME=root DB_PASSWORD=your_mysql_password # 与 MYSQL_ROOT_PASSWORD 一致 DB_PREFIX=tornado_ diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/volume1/env-vars.md b/DjangoAdmin_Tornado_NaiveVue/zh/volume1/env-vars.md index 960ba41..3763d8d 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/volume1/env-vars.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/volume1/env-vars.md @@ -12,7 +12,7 @@ | 变量名 | 默认值 | 说明 | |:----|:----|:----| -| TORNADO_NAME | Tornado+EleVue旗舰版 | 应用名称，用于界面显示和系统标识 | +| TORNADO_NAME | Tornado+NaiveVue旗舰版 | 应用名称，用于界面显示和系统标识 | | TORNADO_VERSION | v3.0.0 | 应用版本号 | | TORNADO_HOST | 127.0.0.1 | 应用监听地址。`127.0.0.1` 仅本地访问；容器/生产建议 `0.0.0.0` | | TORNADO_PORT | 8041 | 应用监听端口 | @@ -37,7 +37,7 @@ | DB_DRIVER | mysql | 数据库驱动。可选：`mysql` / `postgresql` / `mssql` / `oracle` / `sqlite` | | DB_HOST | 127.0.0.1 | 数据库地址（`sqlite` 时忽略） | | DB_PORT | 3306 | 数据库端口（`sqlite` 时忽略） | -| DB_DATABASE | djangoadmin.tornado.elevue | 数据库名称。`sqlite` 时作为数据库文件完整路径 | +| DB_DATABASE | djangoadmin.tornado.naivevue | 数据库名称。`sqlite` 时作为数据库文件完整路径 | | DB_USERNAME | root | 数据库账号（`sqlite` 时忽略） | | DB_PASSWORD | （空） | 数据库密码（`sqlite` 除外） | | DB_PREFIX | tornado_ | 数据表前缀，所有业务表名自动添加此前缀 | @@ -131,7 +131,7 @@ python -c "import secrets; print(secrets.token_urlsafe(48))" # ============================================================ # 基础配置 # ============================================================ -TORNADO_NAME=Tornado+EleVue旗舰版 +TORNADO_NAME=Tornado+NaiveVue旗舰版 TORNADO_VERSION=v3.0.0 TORNADO_HOST=127.0.0.1 TORNADO_PORT=8041 @@ -145,7 +145,7 @@ TORNADO_DEMO=False DB_DRIVER=mysql DB_HOST=127.0.0.1 DB_PORT=3306 -DB_DATABASE=djangoadmin.tornado.elevue +DB_DATABASE=djangoadmin.tornado.naivevue DB_USERNAME=root DB_PASSWORD=your_password DB_PREFIX=tornado_ diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/volume1/environment.md b/DjangoAdmin_Tornado_NaiveVue/zh/volume1/environment.md index 3aa1a13..8f51ff0 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/volume1/environment.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/volume1/environment.md @@ -1,6 +1,6 @@ # 环境准备 -本章节介绍在本地搭建项目所需的基础环境和软件安装。项目采用 `Python` + `Tornado` 后端、`Vue3` + `ElementPlus` 前端的分离架构，本地开发需准备以下软件。 +本章节介绍在本地搭建项目所需的基础环境和软件安装。项目采用 `Python` + `Tornado` 后端、`Vue3` + `NaiveUI` 前端的分离架构，本地开发需准备以下软件。 安装软件：`Python(3.12+)`、`MySQL(8.0+)`、`Redis(3.2+)`、`Node.js(22+)`、`pnpm` 等。 @@ -211,7 +211,7 @@ mysql> ```sql -- 创建数据库（UTF-8 编码） -CREATE DATABASE `djangoadmin.tornado.elevue` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; +CREATE DATABASE `djangoadmin.tornado.naivevue` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; -- 查看数据库 SHOW DATABASES; @@ -297,7 +297,7 @@ OK ## 安装 Node.js -`Node.js` 是前端项目的运行环境，要求 `22` 或更高版本。前端基于 `Vue3` + `ElementPlus` 构建。 +`Node.js` 是前端项目的运行环境，要求 `22` 或更高版本。前端基于 `Vue3` + `NaiveUI` 构建。 + 下载 Node.js diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/volume1/faq.md b/DjangoAdmin_Tornado_NaiveVue/zh/volume1/faq.md index 5d3338e..c3c2450 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/volume1/faq.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/volume1/faq.md @@ -83,7 +83,7 @@ mysql -h127.0.0.1 -P3306 -uroot -p # 如果是权限问题，授权用户 mysql -uroot -p -GRANT ALL PRIVILEGES ON `djangoadmin.tornado.elevue2`.* TO 'root'@'%' IDENTIFIED BY 'your_password'; +GRANT ALL PRIVILEGES ON `djangoadmin.tornado.naivevue`.* TO 'root'@'%' IDENTIFIED BY 'your_password'; FLUSH PRIVILEGES; ``` @@ -382,7 +382,7 @@ ls static/fonts/Vera.ttf # .env 中的上传配置 UPLOAD_ALLOWED_EXTS=.jpg,.jpeg,.png,.gif,.bmp,.ico,.txt,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.mp3,.mp4,.zip,.rar,.7z UPLOAD_MAX_SIZE_MB=10 -TORNADO_FILE_URL=http://file.tornado.elevue +TORNADO_FILE_URL=http://file.tornado.naivevue ``` :::tip 温馨提示 diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/volume1/frontend.md b/DjangoAdmin_Tornado_NaiveVue/zh/volume1/frontend.md index 4d99d2c..16822a6 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/volume1/frontend.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/volume1/frontend.md @@ -1,6 +1,6 @@ # 前端启动 -本章节介绍如何将前端项目安装依赖并启动开发服务器。前端基于 `Vue3` + `ElementPlus` + `TypeScript`+`Vite` 构建，采用组件化开发模式，支持热更新和代理配置。 +本章节介绍如何将前端项目安装依赖并启动开发服务器。前端基于 `Vue3` + `NaiveUI` + `TypeScript`+`Vite` 构建，采用组件化开发模式，支持热更新和代理配置。 :::tip 温馨提示 启动前端前，请确保已完成 [环境准备](/zh/volume1/environment) 章节中的 `Node.js` 和 `pnpm` 安装，并已启动后端服务（参见 [后端启动](/zh/volume1/backend)）。 diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/volume2/fe-view.md b/DjangoAdmin_Tornado_NaiveVue/zh/volume2/fe-view.md index 3639881..0b8a7ae 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/volume2/fe-view.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/volume2/fe-view.md @@ -1,6 +1,6 @@ # 前端页面视图 -前端页面视图是用户直接交互的界面。项目使用 Vue3 + ElementPlus + Vite 构建。一个完整的 CRUD 页面由 4 个文件组成： +前端页面视图是用户直接交互的界面。项目使用 Vue3 + NaiveUI + Vite 构建。一个完整的 CRUD 页面由 4 个文件组成： ``` ui/src/views/system/position/ @@ -18,69 +18,83 @@ ui/src/views/system/position/ ```vue ``` ### 代码解析 -**页面结构**：`PageWrapper` 包裹两个 `el-card`，上方是搜索表单，下方是数据表格。 +**页面结构**：`div` 包裹两个 `n-card`，上方是搜索表单，下方是数据表格。 -**搜索表单**：通过 `useForm` 注册，Schema 从 `querySchemas.ts` 导入。`submitOnReset: true` 表示重置时自动触发查询。 +**搜索表单**：通过 `useForm` 注册，Schema 从 `querySchemas.ts` 导入。`gridProps` 控制响应式列数。 **数据表格**：通过 `BasicTable` 组件渲染，`request` 属性绑定数据加载函数，`columns` 从 `columns.ts` 导入。 -**操作栏**：通过 `actionColumn` 的 `render` 函数使用 `h()` 渲染 `TableAction`，支持权限控制（`auth`）。 +**操作栏**：通过 `actionColumn` 的 `render` 函数使用 `h()` 渲染 `TableAction`，支持权限控制（`auth`）。图标通过 `renderIcon` 工具函数包装。 -**编辑弹窗**：使用 `defineAsyncComponent` 懒加载 `edit.vue`，通过 `v-model:visible` 控制显示，`positionId` 传入编辑记录 ID（0 表示新增）。 +**编辑弹窗**：使用 `editDialog` 组件，通过 `v-model:visible` 控制显示，`positionId` 传入编辑记录 ID（0 表示新增）。通过 `ref` 调用 `openModal()` 打开弹窗。 -**删除逻辑**：单条删除传入 `record`，批量删除从 `selectionData` 取已选 ID。共用同一个 `handleDelete` 方法。 +**删除逻辑**：使用 NaiveUI 的 `useDialog` 弹出确认对话框，单条删除传入 `record`，批量删除从 `rowKeys` 取已选 ID。 + +**消息提示**：使用 NaiveUI 的 `useMessage` 组件，调用 `message.success()` 显示成功提示。 ## 2. 编辑弹窗 `edit.vue` @@ -230,53 +263,57 @@ ui/src/views/system/position/ ```vue - ``` ### 代码解析 +**弹窗组件**：使用项目封装的 `basicModal` 组件，通过 `useModal` hook 管理弹窗状态。 + **Props 接收**： - `visible`：控制弹窗显示/隐藏，通过 `v-model:visible` 双向绑定 - `positionId`：编辑记录的 ID，为 0 时表示新增模式 -**表单数据**：使用 `reactive` 定义，字段与后端 Schema 对应。 +**表单组件**：使用 NaiveUI 的 `n-form`、`n-form-item`、`n-input`、`n-radio-group`、`n-radio`、`n-input-number` 组件。 + +**表单配置**： +- `label-placement="left"`：标签在左侧显示 +- `label-width="85px"`：标签宽度 +- `path`：表单字段路径，用于校验 +- `:rule`：校验规则 **新增/编辑判断**：`props.positionId ? positionUpdate : positionAdd`，通过 ID 是否为 0 区分。 -**防重复提交**：`useLockFn` 包装提交函数，点击后按钮变为 loading 状态，防止重复提交。 +**防重复提交**：`useModal` 的 `setSubLoading` 方法控制提交按钮 loading 状态。 **数据回填**：`onMounted` 时判断如果是编辑模式，调用 `getPositionDetail` 获取数据并填充表单。 @@ -361,6 +428,8 @@ ui/src/views/system/position/ - `emit('update:visible', false)`：关闭弹窗 - `emit('success')`：通知父页面刷新表格 +**弹窗调用方式**：父页面通过 `ref` 调用 `openModal()` 打开弹窗。 + ## 3. 表格列定义 `columns.ts` 定义表格的列配置，包括列名、字段名、宽度和自定义渲染。 @@ -369,52 +438,58 @@ ui/src/views/system/position/ ```typescript import { h } from 'vue'; -import { ElTag } from 'element-plus'; +import { NTag } from 'naive-ui'; export const columns = [ { type: 'selection', + width: 50, + fixed: 'left', }, { - label: 'ID', - prop: 'id', + title: 'ID', + key: 'id', fixed: 'left', width: 50, }, { - label: '岗位名称', - prop: 'name', - minWidth: 100, + title: '岗位名称', + key: 'name', + width: 100, }, { - label: '岗位状态', - prop: 'status', - minWidth: 100, + title: '岗位状态', + key: 'status', + width: 100, render(record) { return h( - ElTag, + NTag, { - type: record.row.status == 1 ? 'success' : 'danger', + style: { + marginRight: '6px', + }, + bordered: false, + type: record.status == 1 ? 'success' : 'error', }, { - default: () => (record.row.status == 1 ? '正常' : '停用'), + default: () => (record.status == 1 ? '正常' : '停用'), }, ); }, }, { - label: '排序', - prop: 'sort', - minWidth: 100, + title: '排序', + key: 'sort', + width: 100, }, { - label: '创建人', - prop: 'createUser', - minWidth: 100, + title: '创建人', + key: 'createUser', + width: 100, }, { - label: '创建时间', - prop: 'createTime', + title: '创建时间', + key: 'createTime', width: 180, }, ]; @@ -422,15 +497,18 @@ export const columns = [ ### 代码解析 -**选择列**：`type: 'selection'` 自动添加复选框列，配合 `@selection-change` 事件实现批量选择。 +**列配置字段**：NaiveUI 表格使用 `title`（列标题）和 `key`（字段名）。 + +**选择列**：`type: 'selection'` 自动添加复选框列，配合 `@update:checked-row-keys` 事件实现批量选择。 **固定列**：`fixed: 'left'` 固定在左侧，`fixed: 'right'` 固定在右侧（操作列）。 -**自定义渲染**：`render(record)` 使用 Vue 的 `h()` 函数创建虚拟 DOM。状态列将 `1/2` 渲染为绿色/红色标签。 +**自定义渲染**：`render(record)` 使用 Vue 的 `h()` 函数创建虚拟 DOM。注意 NaiveUI 的 `render` 回调直接接收 `record` 对象，无需通过 `record.row` 访问。 + +**标签组件**：使用 NaiveUI 的 `NTag` 组件，`type` 属性支持 `'success'`、`'error'`、`'warning'`、`'info'` 等类型。`bordered: false` 去除边框。 **宽度设置**： - `width`：固定宽度 -- `minWidth`：最小宽度，可自适应拉伸 ## 4. 搜索表单 `querySchemas.ts` @@ -443,7 +521,7 @@ import { FormSchema } from '@/components/Form/index'; export const schemas: FormSchema[] = [ { field: 'name', - component: 'Input', + component: 'NInput', label: '岗位名称', componentProps: { placeholder: '请输入岗位名称', @@ -451,7 +529,7 @@ export const schemas: FormSchema[] = [ }, { field: 'status', - component: 'Select', + component: 'NSelect', label: '状态', componentProps: { placeholder: '请选择状态', @@ -462,7 +540,7 @@ export const schemas: FormSchema[] = [ value: '1', }, { - label: '禁用', + label: '停用', value: '2', }, ], @@ -478,9 +556,9 @@ export const schemas: FormSchema[] = [ | 字段 | 说明 | |:----|:----| | `field` | 字段名，与后端查询参数对应 | -| `component` | 表单组件类型：`Input` / `Select` / `DatePicker` 等 | +| `component` | 表单组件类型：`NInput` / `NSelect` / `NDatePicker` 等（NaiveUI 组件名） | | `label` | 标签文本 | -| `componentProps` | 组件属性，透传给 ElementPlus 组件 | +| `componentProps` | 组件属性，透传给 NaiveUI 组件 | **Select 组件**：`options` 定义下拉选项，`clearable: true` 允许清空选择。 @@ -501,12 +579,15 @@ edit.vue（编辑弹窗） 1. **一个模块一个目录**：放在 `ui/src/views/{group}/{module}/` 下 2. **4 个文件各司其职**：主页面、编辑弹窗、列定义、搜索 Schema -3. **编辑弹窗是独立组件**：通过 Props 接收 ID，通过 Emit 通知父页面 +3. **编辑弹窗是独立组件**：通过 Props 接收 ID，通过 Emit 通知父页面，通过 `useModal` 管理弹窗状态 4. **列定义使用 `h()` 渲染复杂内容**：如状态标签、操作按钮 -5. **搜索 Schema 使用 `FormSchema` 类型**：配置化定义表单字段 +5. **搜索 Schema 使用 `FormSchema` 类型**：配置化定义表单字段，组件名使用 NaiveUI 组件名（`NInput`、`NSelect`） 6. **新增/编辑通过 `positionId` 区分**：0 为新增，非 0 为编辑 -7. **防重复提交使用 `useLockFn`**：提交时按钮 loading +7. **消息提示使用 `useMessage()`**：调用 `message.success()` / `message.error()` 等 +8. **确认对话框使用 `useDialog()`**：调用 `dialog.warning()` 等，通过 `onPositiveClick` 回调处理确认 +9. **表格行选择使用 `@update:checked-row-keys`**：获取选中行的 key 数组 +10. **列配置使用 `title` 和 `key`**：定义表格列标题和字段名 ## 总结 -前端页面统一使用 `PageWrapper` + `BasicForm` + `BasicTable` + `TableAction` 四件套，分页由 `BasicTable` 内置处理。每个模块包含 `index.vue`（列表页）、`edit.vue`（编辑弹窗）、`columns.ts`（列定义）、`querySchemas.ts`（搜索配置）四个文件。 +前端页面统一使用 `n-card` + `BasicForm` + `BasicTable` + `TableAction` 组件组合，分页由 `BasicTable` 内置处理。每个模块包含 `index.vue`（列表页）、`edit.vue`（编辑弹窗）、`columns.ts`（列定义）、`querySchemas.ts`（搜索配置）四个文件。编辑弹窗使用项目封装的 `basicModal` 组件，通过 `useModal` hook 管理弹窗状态和提交按钮 loading。 diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/volume3/extensibility.md b/DjangoAdmin_Tornado_NaiveVue/zh/volume3/extensibility.md index 68616a0..786179e 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/volume3/extensibility.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/volume3/extensibility.md @@ -295,7 +295,7 @@ def _normalize_driver(driver: str) -> str: DB_DRIVER = _normalize_driver(os.getenv('DB_DRIVER', 'mysql')) DB_HOST = os.getenv('DB_HOST', '127.0.0.1') DB_PORT = int(os.getenv('DB_PORT', '3306')) -DB_DATABASE = os.getenv('DB_DATABASE', 'djangoadmin.tornado.elevue2') +DB_DATABASE = os.getenv('DB_DATABASE', 'djangoadmin.tornado.naivevue') DB_USERNAME = os.getenv('DB_USERNAME', 'root') DB_PASSWORD = os.getenv('DB_PASSWORD', '') diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/volume3/overview.md b/DjangoAdmin_Tornado_NaiveVue/zh/volume3/overview.md index 7982902..bc72c29 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/volume3/overview.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/volume3/overview.md @@ -6,7 +6,7 @@ ``` ┌─────────────────────────────────────────────────────────────────────────┐ -│ Browser (Vue3 + ElementPlus) │ +│ Browser (Vue3 + NaiveUI) │ │ Axios HTTP Request / Vite Dev Proxy │ └──────────────────────────────┬──────────────────────────────────────────┘ │ @@ -167,7 +167,7 @@ class PositionAddHandler(BaseHandler): ``` ┌──────────────────────────────────────────────────────────────┐ │ Frontend (Vue3) │ -│ ElementPlus · Pinia · Vue Router · Axios │ +│ NaiveUI · Pinia · Vue Router · Axios │ └──────────────────────────┬───────────────────────────────────┘ │ HTTP / JSON ┌──────────────────────────┴───────────────────────────────────┐ diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/volume3/tech-stack.md b/DjangoAdmin_Tornado_NaiveVue/zh/volume3/tech-stack.md index 4365e9f..beb5163 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/volume3/tech-stack.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/volume3/tech-stack.md @@ -60,13 +60,13 @@ SQLAlchemy 是 Python 生态中最成熟、功能最完备的 ORM 框架，2.0 ## 前端技术栈 -### Vue3 + Vite + ElementPlus +### Vue3 + Vite + NaiveUI | 组件 | 版本 | 选型理由 | |:---|:---|:---| | **Vue3** | 3.x | Composition API、更好的 TypeScript 支持 | | **Vite** | 5.x | 极速 HMR、ESM 原生支持、开箱即用的 TypeScript 支持 | -| **ElementPlus** | 2.x | Vue3 生态最成熟的 UI 组件库，企业级后台管理系统首选 | +| **NaiveUI** | 2.x | Vue3 生态高质量 UI 组件库，TypeScript 友好，主题定制灵活 | | **Pinia** | 2.x | Vue3 官方推荐的状态管理方案，替代 Vuex | | **Vue Router** | 4.x | Vue3 官方路由，支持动态路由、路由守卫 | | **Axios** | 1.x | HTTP 客户端，支持请求/响应拦截器、取消请求 | @@ -130,4 +130,4 @@ Redis 在系统中承担多个关键职责：JWT 令牌黑名单、登录失败 ## 总结 -项目的技术选型以「高性能、类型安全、可扩展」为核心原则。Tornado + SQLAlchemy 2.0 + Pydantic v2 构成后端铁三角，Vue3 + Vite + ElementPlus 提供现代化前端体验，Redis 承担缓存与中间件职责。各组件版本经过充分测试验证，形成稳定的技术底座。选型时优先考虑组件的独立性和可替换性，避免强耦合，为未来的架构演进预留空间。 +项目的技术选型以「高性能、类型安全、可扩展」为核心原则。Tornado + SQLAlchemy 2.0 + Pydantic v2 构成后端铁三角，Vue3 + Vite + NaiveUI 提供现代化前端体验，Redis 承担缓存与中间件职责。各组件版本经过充分测试验证，形成稳定的技术底座。选型时优先考虑组件的独立性和可替换性，避免强耦合，为未来的架构演进预留空间。 diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/volume4/core/config.md b/DjangoAdmin_Tornado_NaiveVue/zh/volume4/core/config.md index 0e0170a..d2def98 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/volume4/core/config.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/volume4/core/config.md @@ -140,7 +140,7 @@ PUT /api/v1/config/item/update | 用途 | 枚举值（下拉选项） | 系统参数（配置值） | | 值类型 | 简单值（字符串） | 可存储较长的配置内容 | | 典型场景 | 状态、性别、类型 | SMTP配置、站点信息 | -| 前端用法 | el-select 选项 | 配置表单 | +| 前端用法 | NSelect 选项 | 配置表单 | ## 总结 diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/volume4/core/dict-guide.md b/DjangoAdmin_Tornado_NaiveVue/zh/volume4/core/dict-guide.md index 75db8ec..eff8baf 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/volume4/core/dict-guide.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/volume4/core/dict-guide.md @@ -137,14 +137,7 @@ timeout = param_service.get_value_by_code('REQUEST_TIMEOUT', '30') ```vue ``` @@ -188,8 +188,8 @@ import { defineStore } from 'pinia'; // 自动 window.__PRODUCTION_TORNADO_ELEMENTPLUS___CONF__ = { "VITE_GLOB_API_URL": "", "VITE_GLOB_API_URL_PREFIX": "/api", - "VITE_GLOB_FILE_URL": "http://file.tornado.elevue2", - "VITE_GLOB_APP_TITLE": "Tornado+ElementPlus版", + "VITE_GLOB_FILE_URL": "http://file.tornado.naivevue", + "VITE_GLOB_APP_TITLE": "Tornado+NaiveUI版", // ... }; Object.freeze(window.__PRODUCTION_TORNADO_ELEMENTPLUS___CONF__); @@ -249,7 +249,7 @@ dist/ ├── app.config.js # 运行时配置（VITE_GLOB_* 变量） ├── favicon.ico # 网站图标 └── assets/ - ├── index-[hash].js # 主包（Vue、ElementPlus、Pinia 等） + ├── index-[hash].js # 主包（Vue、NaiveUI、Pinia 等） ├── index-[hash].css # 全局样式 ├── [name]-[hash].js # 路由懒加载 chunk（按视图分割） └── ... # 字体、图片等静态资源 @@ -276,7 +276,7 @@ Vite 自动将 `node_modules` 中的库分割为独立 chunk： | chunk | 内容 | |-------|------| | `vendor-vue.js` | vue + vue-router + pinia | -| `vendor-element.js` | element-plus | +| `vendor-naive.js` | naive-ui | | `vendor-echarts.js` | echarts（如果使用） | | `vendor-*.js` | 其他大型依赖 | @@ -286,7 +286,7 @@ Vite 自动将 `node_modules` 中的库分割为独立 chunk： ```typescript optimizeDeps: { - include: ['dayjs', '@vicons/ionicons5', '@vicons/antd', '@element-plus/icons-vue'], + include: ['dayjs', '@vicons/ionicons5', '@vicons/antd'], } ``` @@ -300,12 +300,7 @@ optimizeDeps: { async function bootstrap() { const app = createApp(App); - // 1. 全局注册 ElementPlus 图标 - for (const [key, component] of Object.entries(ElementPlusIconsVue)) { - app.component(key, component); - } - - // 2. 全局引入 ElementPlus（中文包） + // NaiveUI 按需引入，无需全局注册图标 setupElement(app); // 3. 全局注册自定义组件（BasicTable、BasicForm 等） @@ -332,7 +327,7 @@ async function bootstrap() { | 注册项 | 文件 | 说明 | |--------|------|------| -| ElementPlus | `element.ts` | 全局引入 + 中文包 | +| NaiveUI | 按需引入 | 组件按需引入，无需全局注册 | | 自定义组件 | `customComponents.ts` | BasicTable、BasicForm、PageWrapper 等 | | 自定义指令 | `directives.ts` | `v-perm`、`v-perms`、`v-scrollBar` | @@ -497,7 +492,7 @@ pnpm report **优化手段**： 1. 路由懒加载（已默认启用） -2. 按需引入 ElementPlus 组件（当前为全量引入） +2. 按需引入 NaiveUI 组件（当前为按需引入） 3. 大型依赖（echarts、wangeditor）按需引入 4. 开启 gzip 压缩（`VITE_BUILD_COMPRESS=gzip`） diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/volume4/frontend/components.md b/DjangoAdmin_Tornado_NaiveVue/zh/volume4/frontend/components.md index ebbf444..1093408 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/volume4/frontend/components.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/volume4/frontend/components.md @@ -1,7 +1,7 @@ # 公共组件库 :::tip 说明 -项目提供丰富的公共组件，位于 `ui/src/components/` 目录，基于 ElementPlus 二次封装，覆盖表格、表单、弹窗、上传、富文本编辑等常见场景。组件通过 `src/plugins/` 中的 `setupCustomComponents` 全局注册，任何页面直接使用，无需单独 import。 +项目提供丰富的公共组件，位于 `ui/src/components/` 目录，基于 NaiveUI 二次封装，覆盖表格、表单、弹窗、上传、富文本编辑等常见场景。组件通过 `src/plugins/` 中的 `setupCustomComponents` 全局注册，任何页面直接使用，无需单独 import。 ::: ## 组件总览 @@ -17,7 +17,7 @@ | CropperImage | `components/Cropper/` | 图片裁剪（圆形/矩形、实时预览） | | QrCode | `components/Qrcode/` | 二维码生成（canvas/img、内嵌 logo） | | ChinaArea | `components/ChinaArea/` | 省市区级联（懒加载、二/三级联动） | -| Icon | `components/icon/` | 图标（支持 ElementPlus 图标 + SVG 图标） | +| Icon | `components/icon/` | 图标（支持 @vicons/antd 图标 + SVG 图标） | | BasicSelect | `components/Select/` | 增强下拉（远程请求、本地缓存） | | CountTo | `components/CountTo/` | 数字动画（前缀/后缀、千分位、缓动曲线） | | Password | `components/Password/` | 密码强度（强度指示器、重复确认、复杂度校验） | @@ -38,7 +38,7 @@ ## BasicTable 表格 -表格组件是使用频率最高的组件，基于 `el-table` + `el-pagination` 封装，详见 [BasicTable 表格](/zh/volume4/frontend/table) 章节。 +表格组件是使用频率最高的组件，基于 NaiveUI 的 `n-data-table` 封装，详见 [BasicTable 表格](/zh/volume4/frontend/table) 章节。 ### Props @@ -129,9 +129,10 @@ @@ -299,7 +300,7 @@ const [registerForm] = useForm({ ## BasicModal 弹窗 -弹窗组件基于 `el-dialog` 封装，支持拖拽、自定义按钮，详见 [Modal 弹窗](/zh/volume4/frontend/modal) 章节。 +弹窗组件基于 `basicModal` 封装，支持拖拽、自定义按钮，详见 [Modal 弹窗](/zh/volume4/frontend/modal) 章节。 ### Props @@ -356,7 +357,7 @@ function handleEdit(record) { ## BasicUpload 上传 -文件/图片上传组件，基于 `el-upload` 封装，支持卡片/列表模式、数量限制、图片预览。 +文件/图片上传组件，基于 NaiveUI 的 `n-upload` 封装，支持卡片/列表模式、数量限制、图片预览。 ### Props @@ -698,10 +699,10 @@ async function getDeptOptions() { @@ -724,7 +725,7 @@ async function getDeptOptions() { ```vue ``` @@ -732,7 +733,7 @@ async function getDeptOptions() { :::tip v-perm 指令 除了 `Authority` 组件，项目还提供 `v-perm` 指令，功能相同但更简洁： ```vue -新增用户 +新增用户 ``` ::: @@ -740,7 +741,7 @@ async function getDeptOptions() { ## Icon 图标 -统一图标组件，支持 ElementPlus 图标和 SVG 图标。 +统一图标组件，支持 @vicons/antd 图标和 SVG 图标。 ### Props @@ -754,8 +755,8 @@ async function getDeptOptions() { ```vue @@ -836,4 +837,4 @@ setupCustomComponents(app); // 注册所有自定义组件 ## 总结 -公共组件库基于 ElementPlus 二次封装，核心三件套 BasicTable（表格）、BasicForm（表单）、BasicModal（弹窗）覆盖列表页标准场景。辅以 Upload、Editor、Cropper 等业务组件，以及 Authority、v-perm 权限体系。通过全局注册，任何页面直接使用，无需单独 import。优先使用公共组件，避免重复开发。 +公共组件库基于 NaiveUI 二次封装，核心三件套 BasicTable（表格）、BasicForm（表单）、BasicModal（弹窗）覆盖列表页标准场景。辅以 Upload、Editor、Cropper 等业务组件，以及 Authority、v-perm 权限体系。通过全局注册，任何页面直接使用，无需单独 import。优先使用公共组件，避免重复开发。 diff --git a/DjangoAdmin_Tornado_NaiveVue/zh/volume4/frontend/form.md b/DjangoAdmin_Tornado_NaiveVue/zh/volume4/frontend/form.md index 3b7e505..17c33f7 100644 --- a/DjangoAdmin_Tornado_NaiveVue/zh/volume4/frontend/form.md +++ b/DjangoAdmin_Tornado_NaiveVue/zh/volume4/frontend/form.md @@ -1,7 +1,7 @@ # BasicForm 表单 :::tip 说明 -`BasicForm` 位于 `src/components/Form/src/BasicForm.vue`，基于 ElementPlus 的 `el-form` 二次封装，通过 schemas 配置化定义表单字段，支持查询表单和业务表单两种模式。 +`BasicForm` 位于 `src/components/Form/src/BasicForm.vue`，基于 NaiveUI 的 `n-form` 二次封装，通过 schemas 配置化定义表单字段，支持查询表单和业务表单两种模式。 ::: ## 组件架构 @@ -24,9 +24,9 @@ src/components/Form/ 列表页的搜索区域使用 `useForm` 注册表单： ```vue - + - + ``` ### querySchemas 定义 @@ -39,7 +39,7 @@ import { FormSchema } from '@/components/Form/index'; export const schemas: FormSchema[] = [ { field: 'name', - component: 'Input', + component: 'NInput', label: '岗位名称', componentProps: { placeholder: '请输入岗位名称', @@ -47,14 +47,14 @@ export const schemas: FormSchema[] = [ }, { field: 'status', - component: 'Select', + component: 'NSelect', label: '状态', componentProps: { placeholder: '请选择状态', clearable: true, options: [ { label: '正常', value: '1' }, - { label: '禁用', value: '2' }, + { label: '停用', value: '2' }, ], }, }, @@ -66,26 +66,25 @@ export const schemas: FormSchema[] = [ ```typescript import { schemas } from './querySchemas'; import { useForm } from '@/components/Form/index'; -import { ColProps } from 'element-plus'; const formParams = reactive({ name: '', status: '' }); const [register, {}] = useForm({ + gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' }, labelWidth: 80, - layout: 'horizontal', - colProps: { span: 6 } as ColProps, - submitOnReset: true, schemas, }); function handleSubmit(values: Recordable) { - handleReset(); + for (const key in formParams) { formParams[key] = ''; } for (const key in values) { formParams[key] = values[key]; } reloadTable(); } -function handleReset() { +function handleReset(values: Recordable) { for (const key in formParams) { formParams[key] = ''; } + for (const key in values) { formParams[key] = values[key]; } + reloadTable(); } ``` @@ -93,73 +92,85 @@ function handleReset() { ## 业务表单（编辑弹窗） -编辑弹窗中直接使用 `el-form` + `el-form-item` 构建表单： +编辑弹窗中直接使用 `n-form` + `n-form-item` 构建表单： ```vue ``` ## BasicForm 内部渲染机制 -`BasicForm.vue` 根据 `schema.component` 动态渲染对应的 ElementPlus 组件： +`BasicForm.vue` 根据 `schema.component` 动态渲染对应的 NaiveUI 组件： ```vue