diff --git a/RXThinkCMF_ThinkPhp6_AntdVue/.vitepress/config/en.ts b/RXThinkCMF_ThinkPhp6_AntdVue/.vitepress/config/en.ts index 106ec86..5f993d6 100644 --- a/RXThinkCMF_ThinkPhp6_AntdVue/.vitepress/config/en.ts +++ b/RXThinkCMF_ThinkPhp6_AntdVue/.vitepress/config/en.ts @@ -29,7 +29,7 @@ // // themeConfig: { // editLink: { -// pattern: "https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp6_EleVue", +// pattern: "https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp6_AntdVue", // text: "Suggest changes to this page", // }, // diff --git a/RXThinkCMF_ThinkPhp6_AntdVue/.vitepress/config/shared.ts b/RXThinkCMF_ThinkPhp6_AntdVue/.vitepress/config/shared.ts index 464a2d8..e8987de 100644 --- a/RXThinkCMF_ThinkPhp6_AntdVue/.vitepress/config/shared.ts +++ b/RXThinkCMF_ThinkPhp6_AntdVue/.vitepress/config/shared.ts @@ -87,7 +87,7 @@ export const sharedConfig = defineConfig({ socialLinks: [ { icon: "github", - link: "https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp6_EleVue", + link: "https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp6_AntdVue", }, ], @@ -98,7 +98,7 @@ export const sharedConfig = defineConfig({ }, editLink: { - pattern: "https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp6_EleVue", + pattern: "https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp6_AntdVue", text: "对本页提出修改建议", }, diff --git a/RXThinkCMF_ThinkPhp6_AntdVue/.vitepress/config/zh.ts b/RXThinkCMF_ThinkPhp6_AntdVue/.vitepress/config/zh.ts index ec529db..d9badc9 100644 --- a/RXThinkCMF_ThinkPhp6_AntdVue/.vitepress/config/zh.ts +++ b/RXThinkCMF_ThinkPhp6_AntdVue/.vitepress/config/zh.ts @@ -1,9 +1,9 @@ import type { DefaultTheme, LocaleSpecificConfig } from "vitepress"; export const META_URL = "https://www.rxthink.cn"; -export const META_TITLE = "RXThinkCMF ThinkPHP6+ElementPlus 开发文档"; +export const META_TITLE = "RXThinkCMF ThinkPHP6+AntDesign 开发文档"; export const META_DESCRIPTION = - "RXThinkCMF 企业级前后端分离后台管理系统 - ThinkPHP6.1 + Vue3 + ElementPlus"; + "RXThinkCMF 企业级前后端分离后台管理系统 - ThinkPHP6.1 + Vue3 + AntDesign"; export const zhConfig: LocaleSpecificConfig = { description: META_DESCRIPTION, @@ -147,10 +147,10 @@ export const zhConfig: LocaleSpecificConfig = { text: "相关链接", items: [ { text: "官方网站", link: "https://www.rxthink.cn" }, - { text: "Gitee 仓库", link: "https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp6_EleVue" }, + { text: "Gitee 仓库", link: "https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp6_AntdVue" }, { text: "ThinkPHP 官网", link: "https://www.thinkphp.cn/" }, { text: "Vue3 文档", link: "https://cn.vuejs.org/" }, - { text: "ElementPlus", link: "https://element-plus.org/zh-CN/" }, + { text: "Ant Design Vue", link: "https://www.antdv.com/" }, ], }, ], @@ -489,7 +489,7 @@ export const zhConfig: LocaleSpecificConfig = { { text: "K. 贡献指南", link: "/zh/other/contributing.html" }, { text: "L. 免责声明", link: "/zh/other/declare.html" }, { text: "M. 广告赞助", link: "/zh/other/sponsor.html" }, - { text: "N. 开源协议", link: "https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp6_EleVue" }, + { text: "N. 开源协议", link: "https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp6_AntdVue" }, ], }, ], diff --git a/RXThinkCMF_ThinkPhp6_AntdVue/CLAUDE.md b/RXThinkCMF_ThinkPhp6_AntdVue/CLAUDE.md new file mode 100644 index 0000000..d683360 --- /dev/null +++ b/RXThinkCMF_ThinkPhp6_AntdVue/CLAUDE.md @@ -0,0 +1,45 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## What this repository is + +A VitePress 1.x documentation site (Chinese, `zh-CN`) for the RXThinkCMF ThinkPHP6 + AntDesign admin framework. There is no application source code here — only Markdown content, VitePress config, and a custom theme. The documented framework's PHP/Vue source lives in separate repositories. + +Note: much of the body content is shared text across the RXThinkCMF variant docs; some pages (e.g. `zh/introduction.md`, `zh/tech-stack.md`, config metadata in `.vitepress/config/zh.ts`) still say "ElementPlus" while the homepage says "AntDesign". Match the surrounding page's terminology rather than assuming. + +## Commands + +```bash +pnpm install # install dependencies (README uses pnpm; a yarn.lock also exists) +pnpm docs # dev server (vitepress dev .) +pnpm docs:build # static build — ALSO the link checker (build fails on dead internal links) +pnpm docs:preview # preview the built site +``` + +There is no lint or test tooling. `pnpm docs:build` is the verification step: it fails on broken internal links (only `localhost` links are exempt via `ignoreDeadLinks` in `.vitepress/config/index.ts`). Run it after adding, renaming, or removing pages. + +## Architecture + +- **`zh/`** — all documentation content (~140 pages), organized by chapter: `quickstart/`, `guide/`, `architecture/`, `core/`, `modules/`, `tools/`, `api-spec/`, `frontend/`, `generator/`, `deploy/`, `standards/`, `appendix/`, `other/`. +- **`index.md`** — homepage (hero + features frontmatter). +- **`.vitepress/config/`** + - `shared.ts` — global config: light-only appearance, custom `slugify` for anchors, markdown themes, head tags, local search. + - `zh.ts` — **nav and the entire sidebar tree**. The sidebar is fully manual: every page must be added here or it will not appear in navigation. + - `index.ts` — locale wiring (root locale is Chinese; the English locale in `en.ts` is commented out/inactive). +- **`.vitepress/theme/`** — extends the default VitePress theme: sponsors components (`AsideSponsors`, `HomeSponsors`), global component registrations (`VideoModuleLink`, `vImageViewer`), image-viewer plugin, custom styles. +- **`public/`** — static assets referenced by absolute path (`/logo.png`, `/demo/*.png`, `/banners/`, `/volume1|3|5/`, sponsor images). + +## Content conventions + +- **All content is written in Simplified Chinese.** +- Each page's H1 includes its chapter number matching the sidebar label (e.g. `# 12.3 Git 提交规范`), usually followed by a `:::tip 概述` container. +- Internal links use absolute paths with an explicit `.html` suffix: `[开发环境准备](/zh/quickstart/environment.html)` — this applies both in Markdown prose and in `zh.ts` sidebar entries. +- Images are stored under `public/` and embedded with absolute paths, typically as raw HTML ``. +- Markdown attribute delimiter is `%{ ... }%` (not the default `{ ... }`), configured in `shared.ts`. +- When adding a page: create the file under `zh/`, add the sidebar entry in `.vitepress/config/zh.ts` with its number, then run `pnpm docs:build` to verify links. + +## Git + +- The git repository root is the **parent directory** (`.../v3/document`), which contains 9 sibling variant doc sites (ThinkPhp6/ThinkPhp8/Laravel13 × EleVue/AntdVue/NaiveVue). `git status` will show changes outside this directory — only touch files under this project's folder unless asked otherwise. +- Commit messages follow Conventional Commits as documented in `zh/standards/git.md` (e.g. `docs: 补充多数据库部署文档`), though historical commits here mostly read `签入版本`. diff --git a/RXThinkCMF_ThinkPhp6_AntdVue/public/logo.png b/RXThinkCMF_ThinkPhp6_AntdVue/public/logo.png index d9d2fdb..b68ac12 100644 Binary files a/RXThinkCMF_ThinkPhp6_AntdVue/public/logo.png and b/RXThinkCMF_ThinkPhp6_AntdVue/public/logo.png differ diff --git a/RXThinkCMF_ThinkPhp6_AntdVue/public/logo.svg b/RXThinkCMF_ThinkPhp6_AntdVue/public/logo.svg index 5ca2d2a..f6ea348 100644 --- a/RXThinkCMF_ThinkPhp6_AntdVue/public/logo.svg +++ b/RXThinkCMF_ThinkPhp6_AntdVue/public/logo.svg @@ -1,283 +1,8 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + logo + PNG to SVG conversion - Generated by PNG转SVG转换工具 + + \ No newline at end of file diff --git a/RXThinkCMF_ThinkPhp6_AntdVue/zh/api-spec/dict-api.md b/RXThinkCMF_ThinkPhp6_AntdVue/zh/api-spec/dict-api.md index 9157169..971f91a 100644 --- a/RXThinkCMF_ThinkPhp6_AntdVue/zh/api-spec/dict-api.md +++ b/RXThinkCMF_ThinkPhp6_AntdVue/zh/api-spec/dict-api.md @@ -128,14 +128,16 @@ export function getDictItemList(code: string) { ```vue @@ -189,24 +194,26 @@ await exampleAdd({ ```vue ``` @@ -234,7 +241,7 @@ BaseLogic::add() ```ini ; .env [FILE] -UPLOAD_DIR = D:/uploads/rxthinkcmf ; 上传根目录 +UPLOAD_DIR = D:\xampp8.2\htdocs\RXThinkCMF_ThinkPhp6_AntdVue\uploads ; 上传根目录 DOMAIN_URL = https://cdn.example.com ; 文件访问域名 MAX_SIZE = 10 ; 单文件最大 10MB IMAGE_EXT = jpg,jpeg,png,gif,bmp,webp,svg diff --git a/RXThinkCMF_ThinkPhp6_AntdVue/zh/appendix/database-tables.md b/RXThinkCMF_ThinkPhp6_AntdVue/zh/appendix/database-tables.md index 5309870..48ffffe 100644 --- a/RXThinkCMF_ThinkPhp6_AntdVue/zh/appendix/database-tables.md +++ b/RXThinkCMF_ThinkPhp6_AntdVue/zh/appendix/database-tables.md @@ -6,11 +6,11 @@ ```text document/ -├── mysql/rxthinkcmf.thinkphp6.elevue.sql # MySQL 版本 -├── postgresql/rxthinkcmf.thinkphp6.elevue.sql # PostgreSQL 版本 -├── sqlserver/rxthinkcmf.thinkphp6.elevue.sql # SQL Server 版本 -├── oracle/rxthinkcmf.thinkphp6.elevue.sql # Oracle 版本 -└── sqlite/rxthinkcmf.thinkphp6.elevue.sql # SQLite 版本 +├── mysql/rxthinkcmf.thinkphp6.antdvue.sql # MySQL 版本 +├── postgresql/rxthinkcmf.thinkphp6.antdvue.sql # PostgreSQL 版本 +├── sqlserver/rxthinkcmf.thinkphp6.antdvue.sql # SQL Server 版本 +├── oracle/rxthinkcmf.thinkphp6.antdvue.sql # Oracle 版本 +└── sqlite/rxthinkcmf.thinkphp6.antdvue.sql # SQLite 版本 ``` 各脚本已针对对应数据库的 SQL 语法做了适配，可直接导入使用。 diff --git a/RXThinkCMF_ThinkPhp6_AntdVue/zh/appendix/glossary.md b/RXThinkCMF_ThinkPhp6_AntdVue/zh/appendix/glossary.md index dbd9a56..1b10488 100644 --- a/RXThinkCMF_ThinkPhp6_AntdVue/zh/appendix/glossary.md +++ b/RXThinkCMF_ThinkPhp6_AntdVue/zh/appendix/glossary.md @@ -28,9 +28,9 @@ | TypeScript | - | JavaScript 超集，类型安全 | | Vite | - | 前端构建工具 | | Pinia | - | Vue 3 官方状态管理库 | -| ElementPlus | - | Vue 3 UI 组件库 | +| AntDesign Vue | - | Vue 3 UI 组件库 | | Axios | - | HTTP 请求库 | -| TailwindCSS | - | 原子化 CSS 框架 | +| WindiCSS | - | 原子化 CSS 框架（兼容 Tailwind 语法） | | TinyMce | - | 富文本编辑器 | | ECharts | - | 数据可视化图表库 | | pnpm | - | 高性能 Node.js 包管理器 | diff --git a/RXThinkCMF_ThinkPhp6_AntdVue/zh/architecture/database-design.md b/RXThinkCMF_ThinkPhp6_AntdVue/zh/architecture/database-design.md index 0bf132f..b212a71 100644 --- a/RXThinkCMF_ThinkPhp6_AntdVue/zh/architecture/database-design.md +++ b/RXThinkCMF_ThinkPhp6_AntdVue/zh/architecture/database-design.md @@ -294,7 +294,7 @@ ALTER TABLE think_city ADD INDEX idx_pid (pid); [DATABASE] TYPE = mysql HOSTNAME = 127.0.0.1 -DATABASE = rxthinkcmf.thinkphp6.elevue +DATABASE = rxthinkcmf.thinkphp6.antdvue USERNAME = root PASSWORD = root HOSTPORT = 3306 @@ -304,7 +304,7 @@ HOSTPORT = 3306 [DATABASE] TYPE = pgsql HOSTNAME = 127.0.0.1 -DATABASE = rxthinkcmf.thinkphp6.elevue +DATABASE = rxthinkcmf.thinkphp6.antdvue USERNAME = postgres PASSWORD = root HOSTPORT = 5432 @@ -314,7 +314,7 @@ HOSTPORT = 5432 [DATABASE] TYPE = sqlsrv HOSTNAME = 127.0.0.1 -DATABASE = rxthinkcmf.thinkphp6.elevue +DATABASE = rxthinkcmf.thinkphp6.antdvue USERNAME = sa PASSWORD = root HOSTPORT = 1433 @@ -324,7 +324,7 @@ HOSTPORT = 1433 [DATABASE] TYPE = oracle HOSTNAME = 127.0.0.1 -DATABASE = rxthinkcmf.thinkphp6.elevue +DATABASE = rxthinkcmf.thinkphp6.antdvue USERNAME = root PASSWORD = root HOSTPORT = 1521 @@ -400,7 +400,7 @@ MySQL 是项目默认推荐的关系型数据库，XAMPP 已自带，开箱即 # 若前面有分号则去掉，保存后重启 XAMPP # 创建数据库 -D:\xampp8.2\mysql\bin\mysql.exe -u root -proot -e "CREATE DATABASE `rxthinkcmf.thinkphp6.elevue` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;" +D:\xampp8.2\mysql\bin\mysql.exe -u root -proot -e "CREATE DATABASE `rxthinkcmf.thinkphp6.antdvue` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;" ``` ```sh [macOS] @@ -409,7 +409,7 @@ brew services start mysql sudo mysql_secure_installation # 创建数据库 -mysql -u root -proot -e "CREATE DATABASE `rxthinkcmf.thinkphp6.elevue` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;" +mysql -u root -proot -e "CREATE DATABASE `rxthinkcmf.thinkphp6.antdvue` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;" ``` ```sh [Ubuntu / Debian] @@ -419,7 +419,7 @@ sudo systemctl enable mysql sudo mysql_secure_installation # 创建数据库 -mysql -u root -proot -e "CREATE DATABASE `rxthinkcmf.thinkphp6.elevue` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;" +mysql -u root -proot -e "CREATE DATABASE `rxthinkcmf.thinkphp6.antdvue` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;" ``` ```sh [Rocky Linux / CentOS] @@ -429,7 +429,7 @@ sudo systemctl enable mysqld sudo mysql_secure_installation # 创建数据库 -mysql -u root -proot -e "CREATE DATABASE `rxthinkcmf.thinkphp6.elevue` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;" +mysql -u root -proot -e "CREATE DATABASE `rxthinkcmf.thinkphp6.antdvue` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;" ``` ::: @@ -454,7 +454,7 @@ PostgreSQL 功能强大，支持 JSONB、全文检索等高级特性，需单独 psql -U postgres -c "ALTER USER postgres WITH PASSWORD 'root';" # 创建数据库 -psql -U postgres -c "CREATE DATABASE \"rxthinkcmf.thinkphp6.elevue\" OWNER postgres ENCODING 'UTF8';" +psql -U postgres -c "CREATE DATABASE \"rxthinkcmf.thinkphp6.antdvue\" OWNER postgres ENCODING 'UTF8';" ``` ```sh [macOS] @@ -465,8 +465,8 @@ brew services start postgresql sudo -u postgres psql -c "ALTER USER postgres WITH PASSWORD 'root';" # 创建数据库 -sudo -u postgres psql -c "CREATE DATABASE \"rxthinkcmf.thinkphp6.elevue\" OWNER postgres ENCODING 'UTF8';" -sudo -u postgres psql -c "GRANT ALL PRIVILEGES ON DATABASE \"rxthinkcmf.thinkphp6.elevue\" TO postgres;" +sudo -u postgres psql -c "CREATE DATABASE \"rxthinkcmf.thinkphp6.antdvue\" OWNER postgres ENCODING 'UTF8';" +sudo -u postgres psql -c "GRANT ALL PRIVILEGES ON DATABASE \"rxthinkcmf.thinkphp6.antdvue\" TO postgres;" ``` ```sh [Ubuntu / Debian] @@ -477,8 +477,8 @@ sudo systemctl start postgresql sudo -u postgres psql -c "ALTER USER postgres WITH PASSWORD 'root';" # 创建数据库 -sudo -u postgres psql -c "CREATE DATABASE \"rxthinkcmf.thinkphp6.elevue\" OWNER postgres ENCODING 'UTF8';" -sudo -u postgres psql -c "GRANT ALL PRIVILEGES ON DATABASE \"rxthinkcmf.thinkphp6.elevue\" TO postgres;" +sudo -u postgres psql -c "CREATE DATABASE \"rxthinkcmf.thinkphp6.antdvue\" OWNER postgres ENCODING 'UTF8';" +sudo -u postgres psql -c "GRANT ALL PRIVILEGES ON DATABASE \"rxthinkcmf.thinkphp6.antdvue\" TO postgres;" ``` ```sh [Rocky Linux / CentOS] @@ -490,8 +490,8 @@ sudo systemctl start postgresql sudo -u postgres psql -c "ALTER USER postgres WITH PASSWORD 'root';" # 创建数据库 -sudo -u postgres psql -c "CREATE DATABASE \"rxthinkcmf.thinkphp6.elevue\" OWNER postgres ENCODING 'UTF8';" -sudo -u postgres psql -c "GRANT ALL PRIVILEGES ON DATABASE \"rxthinkcmf.thinkphp6.elevue\" TO postgres;" +sudo -u postgres psql -c "CREATE DATABASE \"rxthinkcmf.thinkphp6.antdvue\" OWNER postgres ENCODING 'UTF8';" +sudo -u postgres psql -c "GRANT ALL PRIVILEGES ON DATABASE \"rxthinkcmf.thinkphp6.antdvue\" TO postgres;" ``` ::: @@ -558,7 +558,7 @@ SQL Server 是微软商业数据库，XAMPP 已自带 pdo_sqlsrv 驱动，Window # extension=php_pdo_sqlsrv_82_ts_x64.dll # 创建数据库 -sqlcmd -S localhost -U sa -P root -Q "CREATE DATABASE [rxthinkcmf.thinkphp6.elevue] COLLATE Chinese_PRC_CI_AS" +sqlcmd -S localhost -U sa -P root -Q "CREATE DATABASE [rxthinkcmf.thinkphp6.antdvue] COLLATE Chinese_PRC_CI_AS" ``` ```sh [macOS] @@ -571,7 +571,7 @@ docker run -e "ACCEPT_EULA=Y" -e "SA_PASSWORD=root" \ pecl install pdo_sqlsrv # 创建数据库 -sqlcmd -S localhost -U sa -P root -Q "CREATE DATABASE [rxthinkcmf.thinkphp6.elevue] COLLATE Chinese_PRC_CI_AS" +sqlcmd -S localhost -U sa -P root -Q "CREATE DATABASE [rxthinkcmf.thinkphp6.antdvue] COLLATE Chinese_PRC_CI_AS" ``` ```sh [Ubuntu / Debian] @@ -593,7 +593,7 @@ echo "extension=pdo_sqlsrv.so" | sudo tee /etc/php/8.2/mods-available/pdo_sqlsrv sudo phpenmod pdo_sqlsrv # 创建数据库 -sqlcmd -S localhost -U sa -P root -Q "CREATE DATABASE [rxthinkcmf.thinkphp6.elevue] COLLATE Chinese_PRC_CI_AS" +sqlcmd -S localhost -U sa -P root -Q "CREATE DATABASE [rxthinkcmf.thinkphp6.antdvue] COLLATE Chinese_PRC_CI_AS" ``` ```sh [Rocky Linux / CentOS] @@ -613,7 +613,7 @@ sudo pecl install pdo_sqlsrv echo "extension=pdo_sqlsrv.so" | sudo tee /etc/php.d/pdo_sqlsrv.ini # 创建数据库 -sqlcmd -S localhost -U sa -P root -Q "CREATE DATABASE [rxthinkcmf.thinkphp6.elevue] COLLATE Chinese_PRC_CI_AS" +sqlcmd -S localhost -U sa -P root -Q "CREATE DATABASE [rxthinkcmf.thinkphp6.antdvue] COLLATE Chinese_PRC_CI_AS" ``` ::: @@ -647,7 +647,7 @@ Oracle 是企业级商业数据库，需手动安装 Instant Client 和 pdo_oci # .env 配置 # DATABASE.TYPE = oracle # DATABASE.HOSTNAME = 127.0.0.1 -# DATABASE.DATABASE = rxthinkcmf.thinkphp6.elevue +# DATABASE.DATABASE = rxthinkcmf.thinkphp6.antdvue # DATABASE.USERNAME = root # DATABASE.PASSWORD = root # DATABASE.HOSTPORT = 1521 @@ -679,8 +679,8 @@ sudo phpenmod pdo_oci # 4. 创建表空间和用户 sqlplus system/root@localhost:1521/XE < - - - - - - 搜索 - - + + + + + + 搜索 + + - 新增 + 新增 - - - - - - ``` @@ -72,4 +148,4 @@ config.headers['Authorization'] = `Bearer ${token}`; if (response.data.code === 401) { router.push('/login'); } -``` \ No newline at end of file +``` diff --git a/RXThinkCMF_ThinkPhp6_AntdVue/zh/frontend/new-page.md b/RXThinkCMF_ThinkPhp6_AntdVue/zh/frontend/new-page.md index 59e2de8..21eb98e 100644 --- a/RXThinkCMF_ThinkPhp6_AntdVue/zh/frontend/new-page.md +++ b/RXThinkCMF_ThinkPhp6_AntdVue/zh/frontend/new-page.md @@ -93,61 +93,61 @@ export function exampleBatchDelete(data: any) { ```typescript // ui/src/views/tool/example/columns.ts import { h } from 'vue'; -import { ElAvatar, ElTag } from 'element-plus'; +import { Tag, Avatar } from 'ant-design-vue'; export const columns = [ { - type: 'selection', // 多选框列 - }, - { - label: 'ID', - prop: 'id', + title: 'ID', + dataIndex: 'id', fixed: 'left', width: 50, }, { - label: '名称', - prop: 'name', + title: '名称', + dataIndex: 'name', minWidth: 120, }, { - label: '状态', - prop: 'statusText', + title: '状态', + dataIndex: 'status', + key: 'status', minWidth: 100, // 选项标签渲染：按值映射文字与颜色 - render(record) { + customRender({ record }) { const statusMap = { - 0: { text: '禁用', type: 'danger' }, - 1: { text: '启用', type: 'success' }, + 0: { text: '禁用', color: 'error' }, + 1: { text: '启用', color: 'success' }, }; - const status = statusMap[record.row.status]; - return h(ElTag, { type: status?.type || 'info' }, { - default: () => status?.text || record.row.statusText, - }); + const status = statusMap[record.status]; + return h( + Tag, + { color: status?.color || 'default' }, + { default: () => status?.text || record.statusText }, + ); }, }, { - label: '头像', - prop: 'avatar', + title: '头像', + dataIndex: 'avatar', + key: 'avatar', minWidth: 80, // 图片渲染：以方形头像形式展示 - render(record) { - return h(ElAvatar, { + customRender({ record }) { + return h(Avatar, { size: 48, - src: record.row.avatar, + src: record.avatar, shape: 'square', - fit: 'fill', }); }, }, { - label: '创建人', - prop: 'createUser', + title: '创建人', + dataIndex: 'createUser', minWidth: 100, }, { - label: '创建时间', - prop: 'createTime', + title: '创建时间', + dataIndex: 'createTime', width: 180, }, ]; @@ -157,13 +157,17 @@ export const columns = [ | 字段 | 类型 | 说明 | |------|------|------| -| `type` | string | 列类型：`selection`（多选框）/ `index`（序号） | -| `label` | string | 表头标题 | -| `prop` | string | 数据字段名（camelCase） | +| `title` | string | 表头标题 | +| `dataIndex` | string | 数据字段名（camelCase） | +| `key` | string | 列唯一标识（自定义渲染时必填，供 `#bodyCell` 插槽匹配） | | `fixed` | string | 固定列：`left` / `right` | | `width` | number | 固定宽度 | | `minWidth` | number | 最小宽度（自适应） | -| `render` | function | 自定义渲染函数 | +| `customRender` | function | 自定义渲染函数，入参 `{ record, text, index }` | + +:::tip 说明 +多选框列由表格的 `row-selection` 属性开启，无需在 columns 中配置。表格行渲染通过 `#bodyCell` 插槽配合 `column.key` 分发，详见步骤四。 +::: ## 步骤三：创建查询表单配置 @@ -173,21 +177,21 @@ import { FormSchema } from '@/components/Form/index'; export const schemas: FormSchema[] = [ { - field: 'name', + name: 'name', component: 'Input', label: '名称', componentProps: { placeholder: '请输入名称', - clearable: true, + allowClear: true, }, }, { - field: 'status', + name: 'status', component: 'Select', label: '状态', componentProps: { placeholder: '请选择状态', - clearable: true, + allowClear: true, options: [ { label: '启用', value: 1 }, { label: '禁用', value: 0 }, @@ -208,143 +212,179 @@ export const schemas: FormSchema[] = [ ## 步骤四：创建列表页 +列表页基于 `PageWrapper` + `BasicForm` + `BasicTable` 组合式组件构建： + ```vue