From fbf2c772a80cb2428ccfc29351d20e390c1d4249 Mon Sep 17 00:00:00 2001 From: duanshuwen Date: Wed, 26 Aug 2026 23:24:28 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=B8=85=E7=90=86=E5=BA=9F?= =?UTF-8?q?=E5=BC=83=E6=A8=A1=E5=9D=97=E5=B9=B6=E9=87=8D=E6=9E=84=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E7=AB=AF=E4=B8=8E=E5=85=A8=E7=AB=AF=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 移除所有废弃的旧首页配置模块，包括destinationHero、demand相关、HomeExperience、vehicleService等表结构与代码，新增数据库迁移删除遗留表 - 重构管理端后台布局为标准RuoYi风格，新增Sidebar、Navbar、SettingsDrawer等组件，替换旧的过渡菜单实现 - 调整移动端响应断点为768px，更新布局相关测试用例，新增布局组件测试 - 删除OperationsTools发布/重置页面，移除/tools菜单入口，清理对应的API调用与测试代码 - 重构玩法模块编辑器：替换旧的图片手动输入框为图片上传组件，移除冗余的取消按钮 - 新增线索查询offset参数支持，完善查询参数处理逻辑 - 优化rbac菜单构建逻辑，新增可见性控制参数 - 修正管家编辑器提示文案，优化系统资源编辑器表单初始化逻辑 - 清理小程序端废弃的体验推荐组件与相关测试代码 - 更新文档与种子脚本，匹配新的API契约与使用说明 --- .../content/shell-layout.html | 74 +++ .../state/server-info | 1 + AGENTS.md | 55 +- .../src/api/client-operations.test.ts | 12 +- WonderQ-Admin-UI-Vue/src/api/client.ts | 40 +- .../concierge/ConciergeAdvisorEditor.vue | 2 +- .../src/components/home/HomeContentEditor.vue | 75 +++ .../src/components/layout/Navbar.vue | 106 ++++ .../src/components/layout/SettingsDrawer.vue | 57 ++ .../src/components/layout/Sidebar.vue | 25 +- .../src/components/layout/TagsView.vue | 174 ++++++ .../site-config/SiteConfigEditor.vue | 100 +--- .../system/SystemResourceEditor.vue | 9 +- .../src/components/wanfa/DetailFields.vue | 4 - .../components/wanfa/WanfaCategoryEditor.vue | 1 - .../src/components/wanfa/WanfaRouteEditor.vue | 7 +- .../src/layouts/AdminLayout.test.ts | 15 + .../src/layouts/AdminLayout.vue | 92 +-- WonderQ-Admin-UI-Vue/src/lib/leads.ts | 2 + WonderQ-Admin-UI-Vue/src/lib/menu-display.ts | 2 - .../src/lib/site-config.test.ts | 79 +-- WonderQ-Admin-UI-Vue/src/lib/site-config.ts | 97 +--- WonderQ-Admin-UI-Vue/src/pages/HomePage.vue | 357 ++++++------ WonderQ-Admin-UI-Vue/src/pages/LeadsPage.vue | 76 ++- .../src/pages/OperationsToolsPage.vue | 52 -- .../src/pages/SystemResourcePage.vue | 177 +++++- WonderQ-Admin-UI-Vue/src/pages/WanfaPage.vue | 1 - WonderQ-Admin-UI-Vue/src/router/index.ts | 3 - .../src/stores/layout.test.ts | 8 +- WonderQ-Admin-UI-Vue/src/stores/layout.ts | 37 +- WonderQ-Admin-UI-Vue/src/styles.css | 193 ++++++- WonderQ-Admin-UI-Vue/src/types.ts | 140 ++--- WonderQ-Admin/README.md | 8 +- .../alembic/versions/0017_home_content.py | 52 +- .../versions/0019_home_wild_archive_images.py | 10 +- .../0020_home_team_building_details.py | 10 +- .../alembic/versions/0021_detail_records.py | 81 +-- .../versions/0023_detail_concierge_advisor.py | 12 +- .../alembic/versions/0024_vehicle_demand.py | 10 +- .../0027_remove_legacy_home_modules.py | 38 ++ .../versions/0033_remove_site_versions.py | 19 + WonderQ-Admin/app/content.py | 61 -- WonderQ-Admin/app/models.py | 99 +--- WonderQ-Admin/app/rbac.py | 8 +- WonderQ-Admin/app/routers/admin.py | 190 +----- WonderQ-Admin/app/routers/shared.py | 19 +- WonderQ-Admin/app/routers/system.py | 87 ++- WonderQ-Admin/app/schemas.py | 53 -- WonderQ-Admin/app/seed.py | 72 +-- WonderQ-Admin/tests/test_api_contracts.py | 179 +----- WonderQ-Admin/tests/test_home.py | 99 +--- WonderQ-MiniAPP/src/lib/data.ts | 131 +---- WonderQ-MiniAPP/src/lib/types.ts | 39 +- .../home/components/HomeExperienceCard.vue | 35 -- .../home/components/HomeExperienceList.vue | 23 - .../home/components/homeExperienceData.ts | 78 --- WonderQ-MiniAPP/tests/data.test.ts | 71 +-- WonderQ-MiniAPP/tests/home-data.test.ts | 22 - docs/admin-api-requirements.md | 45 +- docs/integration-workflow.md | 6 +- docs/module-config-api.md | 37 +- docs/public-api.md | 53 +- ...6-08-26-ruoyi-admin-shell-visual-design.md | 543 ++++++++++++++++++ 63 files changed, 2272 insertions(+), 1991 deletions(-) create mode 100644 .superpowers/brainstorm/2026-08-26-ruoyi-shell-comparison/content/shell-layout.html create mode 100644 .superpowers/brainstorm/2026-08-26-ruoyi-shell-comparison/state/server-info create mode 100644 WonderQ-Admin-UI-Vue/src/components/home/HomeContentEditor.vue create mode 100644 WonderQ-Admin-UI-Vue/src/components/layout/Navbar.vue create mode 100644 WonderQ-Admin-UI-Vue/src/components/layout/SettingsDrawer.vue create mode 100644 WonderQ-Admin-UI-Vue/src/components/layout/TagsView.vue create mode 100644 WonderQ-Admin-UI-Vue/src/layouts/AdminLayout.test.ts delete mode 100644 WonderQ-Admin-UI-Vue/src/pages/OperationsToolsPage.vue create mode 100644 WonderQ-Admin/alembic/versions/0027_remove_legacy_home_modules.py create mode 100644 WonderQ-Admin/alembic/versions/0033_remove_site_versions.py delete mode 100644 WonderQ-MiniAPP/src/pages/home/components/HomeExperienceCard.vue delete mode 100644 WonderQ-MiniAPP/src/pages/home/components/HomeExperienceList.vue delete mode 100644 WonderQ-MiniAPP/src/pages/home/components/homeExperienceData.ts create mode 100644 docs/superpowers/plans/2026-08-26-ruoyi-admin-shell-visual-design.md diff --git a/.superpowers/brainstorm/2026-08-26-ruoyi-shell-comparison/content/shell-layout.html b/.superpowers/brainstorm/2026-08-26-ruoyi-shell-comparison/content/shell-layout.html new file mode 100644 index 0000000..8d5bd64 --- /dev/null +++ b/.superpowers/brainstorm/2026-08-26-ruoyi-shell-comparison/content/shell-layout.html @@ -0,0 +1,74 @@ +

WonderQ Admin UI · RuoYi 默认壳视觉基线

+

左侧为当前布局，右侧为拟还原的 RuoYi-Vue3 默认布局。请重点观察侧栏、顶栏、页签和设置入口的空间关系。

+ +
+
+
当前 WonderQ-Admin-UI-Vue
+
+
+ +
+
+
OPERATIONS / ADMIN玩法管理
+
权限已加载　管理员　退出
+
+
+
无 TagsView 页签
+
玩法分类与路线编辑

业务页面内容保留

+
+
+
+
+
+ +
+
目标：RuoYi-Vue3 默认后台壳
+
+
+ +
+
+
☰首页　/　玩法管理
+
⌕◐□☾管理员　⌄
+
+
+ ● 首页概览　× + 玩法管理　× +
+
+
玩法分类与路线编辑

业务页面内容保留，页面壳按 RuoYi 交互统一

+
+
+
+
+
+
+ +
+

本次还原包含的交互

+
+
A

侧栏

200px 深色侧栏、递归菜单、单开目录、折叠为 54px、移动端抽屉。

+
B

顶栏与页签

50px Navbar、汉堡按钮、面包屑、右侧工具栏、可关闭 TagsView 和右键菜单。

+
C

用户与布局设置

用户下拉菜单、主题/尺寸/全屏工具、右侧布局设置抽屉，并保留 WonderQ 权限和退出流程。

+
+
diff --git a/.superpowers/brainstorm/2026-08-26-ruoyi-shell-comparison/state/server-info b/.superpowers/brainstorm/2026-08-26-ruoyi-shell-comparison/state/server-info new file mode 100644 index 0000000..2f35483 --- /dev/null +++ b/.superpowers/brainstorm/2026-08-26-ruoyi-shell-comparison/state/server-info @@ -0,0 +1 @@ +{"type":"server-started","port":49643,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:49643","screen_dir":"D:\\www\\znkj\\WonderQ-Project\\.superpowers\\brainstorm\\2026-08-26-ruoyi-shell-comparison\\content","state_dir":"D:\\www\\znkj\\WonderQ-Project\\.superpowers\\brainstorm\\2026-08-26-ruoyi-shell-comparison\\state"} diff --git a/AGENTS.md b/AGENTS.md index 0514fe5..67be4a7 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -23,7 +23,7 @@ WonderQ 是三端分离的旅行产品项目集合，当前由三个独立子项目组成： - `WonderQ-MiniAPP`：万趣旅行移动端前台，面向 H5 与微信小程序，技术栈为 uni-app、Vue 3、TypeScript、TailwindCSS。 -- `WonderQ-Admin-UI`：后台管理前端，用于维护首页结构、目的地、线路商品、页面模块和客户需求线索，技术栈为 Vite、React、TypeScript、Tailwind CSS 4、shadcn/ui 风格组件。 +- `WonderQ-Admin-UI-Vue`：正式后台管理前端，用于维护首页工作台、玩法、详情、管家、需求线索和 RBAC，技术栈为 Vue 3、TypeScript、Vite、Element Plus、Pinia、Vue Router 4；采用 RuoYi-Vue3 风格壳层，但不复制其 Java 后端。 - `WonderQ-Admin`：后端 API 服务，为 MiniAPP 提供 Public API，为后台管理端提供 Admin API，技术栈为 Python、FastAPI、SQLAlchemy 2、Alembic、PostgreSQL、JWT、Pydantic。 核心开发原则是页面驱动开发：业务围绕 MiniAPP/H5 前台页面和运营配置场景展开；后台负责配置页面数据；后端负责业务逻辑、鉴权、数据持久化和接口；MiniAPP 负责展示与交互。 @@ -45,7 +45,7 @@ WonderQ-Project/ │ ├─ module-config-api.md │ └─ public-api.md ├─ WonderQ-MiniAPP/ -├─ WonderQ-Admin-UI/ +├─ WonderQ-Admin-UI-Vue/ └─ WonderQ-Admin/ ``` @@ -113,20 +113,24 @@ WonderQ-MiniAPP/ - `src/content.ts`：前台静态兜底内容。 - `public/assets/`：前台图片资源。 -### WonderQ-Admin-UI +### WonderQ-Admin-UI-Vue ```text -WonderQ-Admin-UI/ +WonderQ-Admin-UI-Vue/ ├─ README.md -├─ components.json -├─ public/assets/ +├─ public/ ├─ src/ -│ ├─ App.tsx -│ ├─ api.ts -│ ├─ components/ui/ +│ ├─ App.vue +│ ├─ api/client.ts +│ ├─ components/layout/ +│ ├─ components/home/ +│ ├─ components/system/ +│ ├─ components/wanfa/ +│ ├─ directives/permission.ts │ ├─ lib/ │ ├─ pages/ -│ ├─ main.tsx +│ ├─ router/ +│ ├─ stores/ │ ├─ styles.css │ └─ vite-env.d.ts ├─ index.html @@ -136,12 +140,13 @@ WonderQ-Admin-UI/ └─ yarn.lock ``` -- `src/App.tsx`：后台应用壳、登录态、侧边导航和全局布局。 -- `src/api.ts`：Admin API 类型、Token 管理、鉴权头和请求封装。 -- `src/pages/structure/StructurePage.tsx`：首页、目的地页、需求页等页面模块配置主界面。 -- `src/pages/leads/LeadsPage.tsx`：需求线索查询、筛选和状态流转。 -- `src/components/ui/`：Button、Card、Input、Textarea、Badge、Alert、Switch、NativeSelect、Separator 等基础组件。 -- `src/styles.css`：Tailwind 入口、设计变量、后台工作台、表格/表单和移动端适配。 +- `src/layouts/AdminLayout.vue` 与 `src/components/layout/`：RuoYi 风格侧栏、Navbar、TagsView、设置抽屉和响应式布局。 +- `src/api/client.ts`：Admin API 类型、Token 管理、鉴权头和请求封装。 +- `src/pages/HomePage.vue`：顶部轮播、玩法推荐、万趣用车、团队共创和极境视界统一工作台。 +- `src/pages/LeadsPage.vue`：需求线索筛选、分页、状态写入和详情弹窗。 +- `src/pages/SystemResourcePage.vue`：用户、角色、菜单、部门管理；菜单使用服务端父子树。 +- `src/components/wanfa/`、`src/components/concierge/`、`src/components/media/`：领域编辑器和 URL/OSS 媒体上传组件。 +- `src/styles.css`：RuoYi/Element Plus 主题变量、布局、表格/表单和响应式样式。 ### WonderQ-Admin @@ -204,10 +209,10 @@ python -m pip install -r requirements.txt 健康检查：http://localhost:4000/health。 -### 管理前端 `WonderQ-Admin-UI` +### 管理前端 `WonderQ-Admin-UI-Vue` ```powershell -Set-Location .\WonderQ-Admin-UI +Set-Location .\WonderQ-Admin-UI-Vue yarn install yarn dev ``` @@ -231,14 +236,14 @@ yarn dev:mp-weixin ## 8. 测试与验证 - `WonderQ-Admin`：修改 Python 代码后运行 `python -m pytest`；涉及迁移时运行 `python -m alembic upgrade head`；空库或 seed 相关变更才考虑 `python -m app.seed`，且执行前必须确认风险。 -- `WonderQ-Admin-UI`：当前未配置独立测试脚本，提交前至少运行 `yarn build`；涉及 UI、交互或接口行为时，本地启动页面并手动验证关键流程。 +- `WonderQ-Admin-UI-Vue`：变更后运行 `yarn test` 和 `yarn build`；涉及 UI、交互或接口行为时，本地启动页面并手动验证关键流程。 - `WonderQ-MiniAPP`：前台变更后至少运行 `yarn build:h5`、`yarn build:mp-weixin`、`yarn test`；UI 变更还应浏览器验证移动端和桌面宽度，涉及小程序兼容时用微信开发者工具验证 `dist/build/mp-weixin`。 - 纯文档变更可不跑构建，但必须检查文档链接、命令、路径和敏感信息。 ## 9. 部署规范 - `WonderQ-MiniAPP`：H5 生产构建使用 `yarn build:h5`，产物在 `dist/build/h5`；微信小程序构建使用 `yarn build:mp-weixin`，产物在 `dist/build/mp-weixin`。 -- `WonderQ-Admin-UI`：生产发布使用 `yarn build` 生成 `dist/`，可交给 Nginx、CDN 或静态托管服务部署。 +- `WonderQ-Admin-UI-Vue`：生产发布使用 `yarn build` 生成 `dist/`，可交给 Nginx、CDN 或静态托管服务部署。 - `WonderQ-Admin`：使用 Dockerfile 与 `docker-compose.yml` 部署 API、PostgreSQL 和 Redis。 - 生产 API 地址、客服链接、企业 ID、JWT secret、OSS 密钥、数据库连接只允许通过部署环境变量注入，不硬编码到源码、测试或文档。 - 不提交 `dist/`、`node_modules/`、`.venv/`、`.env`、`.env.local`、日志、coverage、数据库备份或临时规划文件。 @@ -260,15 +265,15 @@ yarn dev:mp-weixin - 新业务表按实际需要考虑 `id`、`created_at`、`updated_at`、`deleted_at`、`status`、`sort` 等字段，不机械添加无意义字段。 - 时间字段后端统一使用明确时区语义；对外返回 ISO 8601 字符串。 - 查询应合理建立索引，避免 N+1 查询和无界列表。 -- Admin 变更类接口应继续写入审计日志，尤其是发布、重置、删除、状态流转和页面配置变更。 +- Admin 变更类接口应继续写入审计日志，尤其是删除、状态流转和页面配置变更。 - 复杂新业务优先按 Router、Service、Repository 分层拆分；现有简单接口可沿用当前结构，但不要把大量业务逻辑继续堆进单个路由函数。 ## 12. 前端实现原则 - TypeScript 项目使用 strict 模式，新增代码应有明确类型，避免 `any`。 - `WonderQ-MiniAPP` 使用 Vue 3 SFC、` + + diff --git a/WonderQ-Admin-UI-Vue/src/components/layout/Navbar.vue b/WonderQ-Admin-UI-Vue/src/components/layout/Navbar.vue new file mode 100644 index 0000000..32751c1 --- /dev/null +++ b/WonderQ-Admin-UI-Vue/src/components/layout/Navbar.vue @@ -0,0 +1,106 @@ + + + diff --git a/WonderQ-Admin-UI-Vue/src/components/layout/SettingsDrawer.vue b/WonderQ-Admin-UI-Vue/src/components/layout/SettingsDrawer.vue new file mode 100644 index 0000000..141c35d --- /dev/null +++ b/WonderQ-Admin-UI-Vue/src/components/layout/SettingsDrawer.vue @@ -0,0 +1,57 @@ + + + diff --git a/WonderQ-Admin-UI-Vue/src/components/layout/Sidebar.vue b/WonderQ-Admin-UI-Vue/src/components/layout/Sidebar.vue index d5f1369..c56221f 100644 --- a/WonderQ-Admin-UI-Vue/src/components/layout/Sidebar.vue +++ b/WonderQ-Admin-UI-Vue/src/components/layout/Sidebar.vue @@ -35,12 +35,12 @@ const isDark = computed(() => props.sideTheme === "theme-dark" || props.sideThem const isVisible = computed(() => props.navigationType !== "top"); const showLogo = computed(() => props.showLogo ?? props.sidebarLogo); const menus = computed(() => visibleNavigableMenus(props.menus ?? auth.menus)); -const menuBackgroundColor = computed(() => isDark.value ? "#304156" : "#ffffff"); +const menuBackgroundColor = computed(() => isDark.value ? "#1a1f2e" : "#ffffff"); const menuTextColor = computed(() => isDark.value ? "#bfcbd9" : "#303133"); const menuActiveTextColor = computed(() => isDark.value ? "#ffffff" : "#409eff"); const sidebarStyle = computed(() => { - const width = props.collapsed ? "54px" : "200px"; + const width = props.collapsed ? "64px" : "200px"; return { width: isMobile.value ? undefined : width, minWidth: isMobile.value ? undefined : width, @@ -131,12 +131,12 @@ function closeSidebar() { .sidebar-shell { width: 200px; min-width: 200px; - height: 100%; + height: 100vh; } .sidebar-shell--collapsed { - width: 54px; - min-width: 54px; + width: 64px; + min-width: 64px; } .sidebar-shell--mobile { @@ -149,17 +149,17 @@ function closeSidebar() { flex-direction: column; width: 200px; min-width: 200px; - height: 100%; + height: 100vh; overflow: hidden; } .sidebar-drawer--collapsed { - width: 54px; - min-width: 54px; + width: 64px; + min-width: 64px; } .sidebar-drawer--dark { - --sidebar-background: #304156; + --sidebar-background: #1a1f2e; --sidebar-hover-background: #263445; --sidebar-active-background: #1f2d3d; --sidebar-text: #bfcbd9; @@ -183,8 +183,9 @@ function closeSidebar() { flex: 0 0 auto; align-items: center; gap: 10px; - min-height: 64px; - padding: 14px 16px; + height: 50px; + min-height: 50px; + padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); } @@ -239,7 +240,7 @@ function closeSidebar() { .sidebar-drawer--collapsed .sidebar-menu, .sidebar-drawer--collapsed :deep(.sidebar-menu.el-menu--collapse) { - width: 54px; + width: 64px; } .sidebar-menu :deep(.el-menu-item), diff --git a/WonderQ-Admin-UI-Vue/src/components/layout/TagsView.vue b/WonderQ-Admin-UI-Vue/src/components/layout/TagsView.vue new file mode 100644 index 0000000..49b3f4d --- /dev/null +++ b/WonderQ-Admin-UI-Vue/src/components/layout/TagsView.vue @@ -0,0 +1,174 @@ + + + diff --git a/WonderQ-Admin-UI-Vue/src/components/site-config/SiteConfigEditor.vue b/WonderQ-Admin-UI-Vue/src/components/site-config/SiteConfigEditor.vue index 81e25a5..a717ff4 100644 --- a/WonderQ-Admin-UI-Vue/src/components/site-config/SiteConfigEditor.vue +++ b/WonderQ-Admin-UI-Vue/src/components/site-config/SiteConfigEditor.vue @@ -1,7 +1,8 @@