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 @@