wangys/urbanLifeline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式修改

Browse Source
This commit is contained in:
wangys
2025-12-17 15:32:58 +08:00
parent ded3eddc56
commit aa8ce553b0
52 changed files with 3145 additions and 2010 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
urbanLifelineServ/.bin/database/postgres/sql/admin_routes_architecture.md
View File

@@ -30,10 +30,10 @@
---
### 第二层：AdminSidebarLayout (各服务内部)
每个管理后台的内部二级菜单，使用 `AdminSidebarLayout` 布局。
### 第二层：SubSidebarLayout (各服务内部)
每个管理后台的内部二级菜单，使用 `SubSidebarLayout` 布局。
**布局**: `AdminSidebarLayout`
**布局**: `SubSidebarLayout`
**类型**: `route`（非 iframe）
---
@@ -41,7 +41,7 @@
## Platform 管理后台（第二层）
**服务**: `platform`
**布局**: `AdminSidebarLayout`
**布局**: `SubSidebarLayout`
### 视图列表
@@ -69,7 +69,7 @@ PERM-0605: perm_platform_admin_config (platform:admin:config)
## Bidding 管理后台（第二层）
**服务**: `bidding`
**布局**: `AdminSidebarLayout`
**布局**: `SubSidebarLayout`
### 权限配置
```sql
@@ -84,7 +84,7 @@ PERM-0611: perm_bidding_admin (bidding:admin:view)
## Workcase 管理后台（第二层）
**服务**: `workcase`
**布局**: `AdminSidebarLayout`
**布局**: `SubSidebarLayout`
### 视图列表
@@ -123,27 +123,27 @@ PERM-0627: perm_workcase_log (workcase:log:view)
- 用户应用入口（普通路由和iframe）
- 管理后台入口（iframe类型）
### 内层 AdminSidebarLayout
各服务内部，显示 `layout='AdminSidebarLayout'` 且 `url.startsWith('/admin')` 的视图：
### 内层 SubSidebarLayout
各服务内部，显示 `layout='SubSidebarLayout'` 且 `url.startsWith('/admin')` 的视图：
#### Platform AdminSidebar
```typescript
service === 'platform' &&
layout === 'AdminSidebarLayout' &&
layout === 'SubSidebarLayout' &&
url.startsWith('/admin')
```
#### Bidding AdminSidebar
```typescript
service === 'bidding' &&
layout === 'AdminSidebarLayout' &&
layout === 'SubSidebarLayout' &&
url.startsWith('/admin')
```
#### Workcase AdminSidebar
```typescript
service === 'workcase' &&
layout === 'AdminSidebarLayout' &&
layout === 'SubSidebarLayout' &&
url.startsWith('/admin')
```
@@ -176,12 +176,12 @@ url.startsWith('/admin')
### 1. Layout 组件
- **SidebarLayout**: 外层主侧边栏（platform 主界面）
- **AdminSidebarLayout**: 内层管理侧边栏（各管理后台内部）
- **SubSidebarLayout**: 内层管理侧边栏（各管理后台内部）
- **BlankLayout**: 空白布局（如智能客服首页）
### 2. iframe 嵌套
- 外层 platform 的 iframe 菜单 → 加载各服务的管理后台
- 各服务内部使用 AdminSidebarLayout 渲染二级菜单
- 各服务内部使用 SubSidebarLayout 渲染二级菜单
- iframe_url 必须正确指向实际服务地址
### 3. 路由配置
@@ -203,7 +203,7 @@ url.startsWith('/admin')
如果从旧的单层架构迁移到三层架构：
1. **视图迁移**
- 将原 platform 的管理视图改为 `layout='AdminSidebarLayout'`
- 将原 platform 的管理视图改为 `layout='SubSidebarLayout'`
- URL 统一改为 `/admin/*` 格式
- 在 platform 主侧边栏添加 iframe 入口
@@ -213,7 +213,7 @@ url.startsWith('/admin')
- 更新视图权限关联
3. **前端组件**
- 创建 AdminSidebarLayout 组件（参考 workcase 实现）
- 创建 SubSidebarLayout 组件（参考 workcase 实现）
- 更新 platform 路由配置支持 `/admin/*` 路径
- 配置 iframe 路由指向各服务管理后台

83
urbanLifelineServ/.bin/database/postgres/sql/initDataPermission.sql
View File

@@ -201,38 +201,31 @@ INSERT INTO sys.tb_sys_view (
-- =========================
-- 平台应用菜单 (platform)
-- =========================
-- 一级菜单
('VIEW-P002', 'view_platform_chat', '泰豪AI助手', NULL, '/aichat', 'public/Chat/AIChatView.vue', 'ChatDotRound', 1,
-- 一级菜单 (图标使用 lucide-vue-next)
('VIEW-P002', 'view_platform_chat', '泰豪AI助手', NULL, '/aichat', 'public/Chat/AIChatView.vue', 'MessageCircle', 1,
'route', NULL, 'platform', 'SidebarLayout', 10, '泰豪AI助手-直接智能体对话', 'system', now(), false),
('VIEW-P001', 'view_platform_home', '全部应用', NULL, '/agents', 'public/Agents/AgentPlatformView.vue', 'Grid', 1,
('VIEW-P001', 'view_platform_home', '全部应用', NULL, '/agents', 'public/Agents/AgentPlatformView.vue', 'LayoutGrid', 1,
'route', NULL, 'platform', 'SidebarLayout', 20, '全部智能体', 'system', now(), false),
-- iframe 嵌入菜单
-- url: platform中的路由路径（用于sidebar定位和路由跳转）
-- iframe_url: iframe的src地址（实际内容的URL）
('VIEW-P005', 'view_platform_workflow', '智能体编排', NULL, '/app/workflow', NULL, 'Connection', 1,
('VIEW-P005', 'view_platform_workflow', '智能体编排', NULL, '/app/workflow', NULL, 'Workflow', 1,
'iframe', 'http://localhost:3000', 'platform', 'SidebarLayout', 30, 'Dify智能体编排（iframe）', 'system', now(), false),
('VIEW-P003', 'view_platform_bidding', '招标助手', NULL, '/app/bidding', NULL, 'Document', 1,
('VIEW-P003', 'view_platform_bidding', '招标助手', NULL, '/app/bidding', NULL, 'FileText', 1,
'iframe', '/bidding/', 'platform', 'SidebarLayout', 40, '招标应用（iframe）', 'system', now(), false),
('VIEW-P004', 'view_platform_workcase', '泰豪小电', NULL, '/app/workcase', NULL, 'Service', 1,
('VIEW-P004', 'view_platform_workcase', '泰豪小电', NULL, '/app/workcase', NULL, 'Headphones', 1,
'iframe', '/workcase/', 'platform', 'SidebarLayout', 50, '客服应用（iframe）', 'system', now(), false),
-- 管理后台入口（iframe类型，显示在外层主sidebar）
('VIEW-P101', 'view_platform_admin_entry', '平台管理后台', NULL, '/admin/platform', NULL, 'Setting', 1,
'iframe', '/platform/admin', 'platform', 'AdminIframeSidebarLayout', 100, '平台管理后台入口', 'system', now(), false),
('VIEW-P102', 'view_bidding_admin_entry', '智能标书管理后台', NULL, '/admin/bidding', NULL, 'Document', 1,
'iframe', '/bidding/admin', 'platform', 'AdminIframeSidebarLayout', 110, '智能标书管理后台入口', 'system', now(), false),
('VIEW-P103', 'view_workcase_admin_entry', '泰豪小电管理后台', NULL, '/admin/workcase', NULL, 'Service', 1,
'iframe', '/workcase/admin', 'platform', 'AdminIframeSidebarLayout', 120, '泰豪小电管理后台入口', 'system', now(), false),
-- 平台管理后台内部视图（AdminSidebarLayout布局，在platform服务内）
('VIEW-P201', 'view_platform_admin_overview', '数据概览', NULL, '/admin/overview', 'admin/overview/OverviewView.vue', 'DataLine', 1,
'route', NULL, 'platform', 'AdminSidebarLayout', 210, '平台数据概览', 'system', now(), false),
('VIEW-P202', 'view_platform_admin_user', '用户管理', NULL, '/admin/userManagement', 'admin/userManagement/UserManagementView.vue', 'User', 1,
'route', NULL, 'platform', 'AdminSidebarLayout', 220, '平台用户管理', 'system', now(), false),
('VIEW-P203', 'view_platform_admin_knowledge', '知识库', NULL, '/admin/knowledge', 'admin/knowledge/KnowledgeView.vue', 'Document', 1,
'route', NULL, 'platform', 'AdminSidebarLayout', 230, '平台知识库管理', 'system', now(), false),
('VIEW-P204', 'view_platform_admin_config', '系统配置', NULL, '/admin/config', 'admin/config/ConfigView.vue', 'Setting', 1,
'route', NULL, 'platform', 'AdminSidebarLayout', 240, '平台系统配置', 'system', now(), false),
-- 平台管理后台内部视图（SubSidebarLayout布局，在platform服务内）
('VIEW-P201', 'view_platform_admin_overview', '数据概览', NULL, '/admin/overview', 'admin/overview/OverviewView.vue', 'BarChart3', 1,
'route', NULL, 'platform', 'SubSidebarLayout', 210, '平台数据概览', 'system', now(), false),
('VIEW-P202', 'view_platform_admin_user', '用户管理', NULL, '/admin/userManagement', 'admin/userManagement/UserManagementView.vue', 'Users', 1,
'route', NULL, 'platform', 'SubSidebarLayout', 220, '平台用户管理', 'system', now(), false),
('VIEW-P203', 'view_platform_admin_knowledge', '知识库', NULL, '/admin/knowledge', 'admin/knowledge/KnowledgeView.vue', 'FileText', 1,
'route', NULL, 'platform', 'SubSidebarLayout', 230, '平台知识库管理', 'system', now(), false),
('VIEW-P204', 'view_platform_admin_config', '系统配置', NULL, '/admin/config', 'admin/config/ConfigView.vue', 'Settings', 1,
'route', NULL, 'platform', 'SubSidebarLayout', 240, '平台系统配置', 'system', now(), false),
-- -- 系统管理目录
-- ('VIEW-P100', 'view_system', '系统管理', NULL, '/system', NULL, 'Settings', 0,
@@ -276,40 +269,40 @@ INSERT INTO sys.tb_sys_view (
-- 'route', NULL, 'bidding', 'DefaultLayout', 40, '投标管理页面', 'system', now(), false),
-- =========================
-- 客服应用菜单 (workcase)
-- 客服应用菜单 (workcase) - 图标使用 lucide-vue-next
-- =========================
-- 用户端视图
('VIEW-W001', 'view_workcase_home', '智能客服', NULL, '/aichat', 'public/AIChat/AIChatView.vue', 'House', 3,
'route', NULL, 'workcase', 'BlankLayout', 10, '智能客服首页', 'system', now(), false),
('VIEW-W001', 'view_workcase_home', '智能客服', NULL, '/aichat', 'public/AIChat/AIChatView.vue', 'Home', 1,
'route', NULL, 'workcase', 'SubSidebarLayout', 10, '智能客服首页', 'system', now(), false),
-- 管理端视图（使用 AdminSidebarLayout 布局）
('VIEW-W101', 'view_workcase_admin_overview', '数据概览', NULL, '/admin/overview', 'admin/overview/OverviewView.vue', 'DataLine', 1,
'route', NULL, 'workcase', 'AdminSidebarLayout', 110, '泰豪小电数据概览', 'system', now(), false),
-- 管理端视图（使用 SubSidebarLayout 布局）
('VIEW-W101', 'view_workcase_admin_overview', '数据概览', NULL, '/admin/overview', 'admin/overview/OverviewView.vue', 'BarChart3', 1,
'route', NULL, 'workcase', 'SubSidebarLayout', 110, '泰豪小电数据概览', 'system', now(), false),
('VIEW-W102', 'view_workcase_admin_knowledge', '知识库管理', NULL, '/admin/knowledge', 'admin/knowledge/KnowLedgeView.vue', 'Document', 1,
'route', NULL, 'workcase', 'AdminSidebarLayout', 120, '知识库文档管理', 'system', now(), false),
('VIEW-W102', 'view_workcase_admin_knowledge', '知识库管理', NULL, '/admin/knowledge', 'admin/knowledge/KnowLedgeView.vue', 'FileText', 1,
'route', NULL, 'workcase', 'SubSidebarLayout', 120, '知识库文档管理', 'system', now(), false),
('VIEW-W103', 'view_workcase_admin_tickets', '工单管理', NULL, '/admin/workcase', 'admin/workcase/WorkcaseView.vue', 'Tickets', 1,
'route', NULL, 'workcase', 'AdminSidebarLayout', 130, '客服工单管理', 'system', now(), false),
('VIEW-W103', 'view_workcase_admin_tickets', '工单管理', NULL, '/admin/workcase', 'admin/workcase/WorkcaseView.vue', 'Ticket', 1,
'route', NULL, 'workcase', 'SubSidebarLayout', 130, '客服工单管理', 'system', now(), false),
('VIEW-W104', 'view_workcase_admin_conversation', '对话数据', NULL, '/admin/customerChat', 'admin/customerChat/CustomerChatView.vue', 'ChatDotRound', 1,
'route', NULL, 'workcase', 'AdminSidebarLayout', 140, '客户对话数据管理', 'system', now(), false),
('VIEW-W104', 'view_workcase_admin_conversation', '对话数据', NULL, '/admin/customerChat', 'admin/customerChat/CustomerChatView.vue', 'MessageCircle', 1,
'route', NULL, 'workcase', 'SubSidebarLayout', 140, '客户对话数据管理', 'system', now(), false),
('VIEW-W105', 'view_workcase_admin_agent', '智能体管理', NULL, '/admin/agent', 'admin/agent/AgentView.vue', 'Service', 1,
'route', NULL, 'workcase', 'AdminSidebarLayout', 150, '智能体配置管理', 'system', now(), false),
('VIEW-W105', 'view_workcase_admin_agent', '智能体管理', NULL, '/admin/agent', 'admin/agent/AgentView.vue', 'Bot', 1,
'route', NULL, 'workcase', 'SubSidebarLayout', 150, '智能体配置管理', 'system', now(), false),
-- 日志管理（带子级的目录）
('VIEW-W106', 'view_workcase_admin_log', '日志管理', NULL, '/admin/log', NULL, 'List', 0,
'route', NULL, 'workcase', 'AdminSidebarLayout', 160, '日志管理目录', 'system', now(), false),
('VIEW-W106', 'view_workcase_admin_log', '日志管理', NULL, '/admin/log', NULL, 'ScrollText', 1,
'route', NULL, 'workcase', 'SubSidebarLayout', 160, '日志管理目录', 'system', now(), false),
('VIEW-W107', 'view_workcase_admin_log_knowledge', '知识库日志', 'view_workcase_admin_log', '/admin/log/knowledge', 'admin/log/knowledgeLog/KnowledgeLogView.vue', 'Document', 1,
'route', NULL, 'workcase', 'AdminSidebarLayout', 161, '知识库操作日志', 'system', now(), false),
('VIEW-W107', 'view_workcase_admin_log_knowledge', '知识库日志', 'view_workcase_admin_log', '/admin/log/knowledge', 'admin/log/knowledgeLog/KnowledgeLogView.vue', 'FileText', 1,
'route', NULL, 'workcase', NULL, 161, '知识库操作日志', 'system', now(), false),
('VIEW-W108', 'view_workcase_admin_log_workcase', '工单日志', 'view_workcase_admin_log', '/admin/log/workcase', 'admin/log/workcaseLog/WorkcaseLogView.vue', 'Tickets', 1,
'route', NULL, 'workcase', 'AdminSidebarLayout', 162, '工单操作日志', 'system', now(), false),
('VIEW-W108', 'view_workcase_admin_log_workcase', '工单日志', 'view_workcase_admin_log', '/admin/log/workcase', 'admin/log/workcaseLog/WorkcaseLogView.vue', 'Ticket', 1,
'route', NULL, 'workcase', NULL, 162, '工单操作日志', 'system', now(), false),
('VIEW-W109', 'view_workcase_admin_log_system', '系统日志', 'view_workcase_admin_log', '/admin/log/system', 'admin/log/systemLog/SystemLogView.vue', 'Setting', 1,
'route', NULL, 'workcase', 'AdminSidebarLayout', 163, '系统运行日志', 'system', now(), false);
('VIEW-W109', 'view_workcase_admin_log_system', '系统日志', 'view_workcase_admin_log', '/admin/log/system', 'admin/log/systemLog/SystemLogView.vue', 'Settings', 1,
'route', NULL, 'workcase', NULL, 163, '系统运行日志', 'system', now(), false);
-- =============================
-- 6. 角色权限关联（超级管理员拥有所有权限）
@@ -397,7 +390,7 @@ INSERT INTO sys.tb_sys_view_permission (
('VP-P102', 'view_bidding_admin_entry', 'perm_bidding_admin', 'system', NULL, now(), false),
('VP-P103', 'view_workcase_admin_entry', 'perm_workcase_admin', 'system', NULL, now(), false),
-- 平台管理后台内部视图权限关联（AdminSidebarLayout）
-- 平台管理后台内部视图权限关联（SubSidebarLayout）
('VP-P201', 'view_platform_admin_overview', 'perm_platform_admin_overview', 'system', NULL, now(), false),
('VP-P202', 'view_platform_admin_user', 'perm_platform_admin_user', 'system', NULL, now(), false),
('VP-P203', 'view_platform_admin_knowledge', 'perm_platform_admin_knowledge', 'system', NULL, now(), false),

6
urbanLifelineServ/.bin/database/postgres/sql/workcase_admin_routes_summary.md
View File

@@ -94,7 +94,7 @@
- VP-W106 ~ VP-W109: 日志管理视图（含父级和3个子级）
## 布局配置
- **Layout**: `AdminSidebarLayout`
- **Layout**: `SubSidebarLayout`
- **Service**: `workcase`
- **Type**: 1 (菜单项) / 0 (目录)
- **View Type**: `route`
@@ -111,7 +111,7 @@
- 163: 系统日志
## 路由过滤规则
在 `AdminSidebarLayout.vue` 的 `loadMenuFromStorage()` 中：
在 `SubSidebarLayout.vue` 的 `loadMenuFromStorage()` 中：
```typescript
const sidebarViews = userViews.filter((view: any) =>
view.layout === 'SidebarLayout' && // 使用 SidebarLayout 布局
@@ -125,6 +125,6 @@ const sidebarViews = userViews.filter((view: any) =>
## 注意事项
1. 所有管理端路由都以 `/admin/` 开头
2. 日志管理使用父子级结构（type=0 的目录 + type=1 的子菜单）
3. 所有视图都使用 `AdminSidebarLayout` 布局
3. 所有视图都使用 `SubSidebarLayout` 布局
4. 权限都归属于 `module_workcase` 模块
5. 超级管理员和系统管理员默认拥有所有 workcase 管理端权限

1
urbanLifelineWeb/.windsurf/workflows/urban-lifeline-web.md Normal file
View File

@@ -0,0 +1 @@
lucide-vue-next 使用这个图标库替代elementplus的图标库

12
urbanLifelineWeb/package-lock.json generated
View File

@@ -3507,6 +3507,15 @@
"yallist": "^3.0.2"
}
},
"node_modules/lucide-vue-next": {
"version": "0.561.0",
"resolved": "https://registry.npmmirror.com/lucide-vue-next/-/lucide-vue-next-0.561.0.tgz",
"integrity": "sha512-c5HUckO0qHklVSOf/0vaSR3pEb8fYImRDCRDLde56uqS9js0D/e3RAvq0/YFWjkmyOBKCb0/IdskdoHZQEkT5g==",
"license": "ISC",
"peerDependencies": {
"vue": ">=3.0.1"
}
},
"node_modules/magic-string": {
"version": "0.30.21",
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",
@@ -5394,6 +5403,7 @@
"@vueuse/core": "^11.3.0",
"axios": "^1.7.9",
"element-plus": "^2.12.0",
"lucide-vue-next": "^0.561.0",
"pinia": "^2.2.8",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
@@ -5416,6 +5426,7 @@
"cors": "^2.8.5",
"element-plus": "^2.12.0",
"express": "^4.18.2",
"lucide-vue-next": "^0.561.0",
"ofetch": "^1.4.1",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
@@ -6896,6 +6907,7 @@
"@vueuse/core": "^11.3.0",
"axios": "^1.7.9",
"element-plus": "^2.8.6",
"lucide-vue-next": "^0.561.0",
"pinia": "^2.2.8",
"vue": "^3.5.13",
"vue-router": "^4.5.0"

43
urbanLifelineWeb/packages/bidding/src/layouts/SidebarLayout/SidebarLayout.vue
View File

@@ -8,10 +8,8 @@
<span v-if="!collapsed" class="logo-text">城市生命线</span>
</div>
<div class="collapse-btn" @click="toggleSidebar">
<el-icon>
<DArrowLeft v-if="!collapsed" />
<DArrowRight v-else />
</el-icon>
<ChevronLeft v-if="!collapsed" :size="18" />
<ChevronRight v-else :size="18" />
</div>
</div>
@@ -24,7 +22,7 @@
:class="{ active: activeMenu === item.key }"
@click="handleMenuClick(item)"
>
<el-icon><component :is="item.icon" /></el-icon>
<component :is="item.icon" :size="18" />
<span v-if="!collapsed">{{ item.label }}</span>
</div>
</div>
@@ -41,15 +39,15 @@
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="profile">
<el-icon><User /></el-icon>
<User :size="16" />
个人中心
</el-dropdown-item>
<el-dropdown-item command="settings" divided>
<el-icon><Setting /></el-icon>
<Settings :size="16" />
系统设置
</el-dropdown-item>
<el-dropdown-item command="logout" divided>
<el-icon><SwitchButton /></el-icon>
<LogOut :size="16" />
退出登录
</el-dropdown-item>
</el-dropdown-menu>
@@ -79,7 +77,7 @@
@load="handleIframeLoad"
/>
<div v-if="iframeLoading" class="iframe-loading">
<el-icon class="is-loading"><Loading /></el-icon>
<Loader :size="20" class="is-loading" />
<span>加载中...</span>
</div>
</div>
@@ -94,19 +92,22 @@
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
ChatDotRound,
Grid,
Connection,
Document,
Service,
DArrowLeft,
DArrowRight,
MessageCircle,
LayoutGrid,
Workflow,
FileText,
Headphones,
ChevronLeft,
ChevronRight,
User,
Setting,
SwitchButton,
Refresh,
Loading
} from '@element-plus/icons-vue'
Settings,
LogOut,
RefreshCw,
Loader
} from 'lucide-vue-next'
// el-button 图标需要传入组件
const Refresh = RefreshCw
import { ElMessage } from 'element-plus'
import type { MenuItem } from 'shared/types'

4
urbanLifelineWeb/packages/bidding/src/layouts/index.ts
View File

@@ -1,3 +1,3 @@
export { default as SidebarLayout } from './SidebarLayout/SidebarLayout.vue'
// BlankLayout从shared导入
export { BlankLayout } from 'shared/layouts'
// BlankLayout、SubSidebarLayout 从 shared 导入
export { BlankLayout, SubSidebarLayout } from 'shared/layouts'

5
urbanLifelineWeb/packages/bidding/src/router/dynamicRoute.ts
View File

@@ -18,14 +18,15 @@ import {
import type { TbSysViewDTO } from 'shared/types'
import type { RouteRecordRaw } from 'vue-router'
import router from './index'
import { SidebarLayout, BlankLayout } from '@/layouts'
import { SidebarLayout, BlankLayout, SubSidebarLayout } from '@/layouts'
// Bidding 布局组件映射
const biddingLayoutMap: Record<string, () => Promise<any>> = {
'SidebarLayout': () => Promise.resolve({ default: SidebarLayout }),
'BlankLayout': () => Promise.resolve({ default: BlankLayout }),
'NavigationLayout': () => Promise.resolve({ default: SidebarLayout }),
'BasicLayout': () => Promise.resolve({ default: SidebarLayout })
'BasicLayout': () => Promise.resolve({ default: SidebarLayout }),
'SubSidebarLayout': () => Promise.resolve({ default: SubSidebarLayout })
}
// 视图组件加载器

2
urbanLifelineWeb/packages/bidding/src/types/shared.d.ts vendored
View File

@@ -194,5 +194,5 @@ declare module 'shared/layouts' {
import { DefineComponent } from 'vue'
export const BlankLayout: DefineComponent<{}, {}, any>
export const AdminSidebarLayout: DefineComponent<{}, {}, any>
export const SubSidebarLayout: DefineComponent<{}, {}, any>
}

24
urbanLifelineWeb/packages/platform/ROUTE_GUIDE.md
View File

@@ -51,7 +51,7 @@ Platform 使用 shared 提供的路由生成工具来动态生成路由。架构
│ ┌───────────────────────────────────────────────────────┐ │
│ │ types/sys/menu.ts & types/enums.ts │ │
│ │ - SysMenu 菜单接口 │ │
│ │ - MenuType 菜单类型枚举 │ │
│ │ - ViewType 视图类型枚举 │ │
│ └───────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
↓
@@ -167,7 +167,7 @@ interface SysMenu {
parentID?: string // 父菜单ID，'0' 表示根菜单
name: string // 菜单名称
url?: string // 路由路径，如 '/user/profile'
type: MenuType // 菜单类型
type: ViewType // 视图类型（0=目录 1=菜单 2=按钮 3=页面）
icon?: string // 图标
component?: string // 组件路径，如 'user/profile/ProfileView'
layout?: string // 布局名称，如 'SidebarLayout'
@@ -177,12 +177,11 @@ interface SysMenu {
children?: SysMenu[] // 子菜单
}
enum MenuType {
NAVIGATION = 'navigation', // 导航菜单（顶部导航）
SIDEBAR = 'sidebar', // 侧边栏菜单
MENU = 'menu', // 普通菜单
PAGE = 'page', // 页面（独立路由）
BUTTON = 'button' // 按钮（不生成路由）
enum ViewType {
NAVBAR = 0, // 导航栏/目录
SIDEBAR = 1, // 侧边栏/菜单
BUTTON = 2, // 按钮（权限控制，不生成路由）
ROUTE = 3 // 空白页/路由页面
}
```
@@ -195,7 +194,7 @@ const menus: SysMenu[] = [
parentID: '0',
name: '用户中心',
url: '/user',
type: MenuType.NAVIGATION,
type: ViewType.NAVBAR,
icon: 'User',
layout: 'SidebarLayout',
orderNum: 1,
@@ -205,7 +204,7 @@ const menus: SysMenu[] = [
parentID: 'user-center',
name: '个人信息',
url: '/user/profile',
type: MenuType.MENU,
type: ViewType.SIDEBAR,
component: 'user/profile/ProfileView',
orderNum: 1
},
@@ -214,7 +213,7 @@ const menus: SysMenu[] = [
parentID: 'user-center',
name: '账号设置',
url: '/user/settings',
type: MenuType.MENU,
type: ViewType.SIDEBAR,
component: 'user/settings/SettingsView',
orderNum: 2
}
@@ -268,7 +267,8 @@ import {
type RouteGeneratorConfig
} from 'shared/utils/route'
import type { SysMenu, MenuType } from 'shared/types'
import type { SysMenu } from 'shared/types'
import { ViewType } from 'shared/types/enums'
```
### generateRoutes(menus, config)

13
urbanLifelineWeb/packages/platform/package.json
View File

@@ -9,19 +9,20 @@
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.5.13",
"vue-router": "^4.5.0",
"pinia": "^2.2.8",
"element-plus": "^2.12.0",
"@element-plus/icons-vue": "^2.3.2",
"@vueuse/core": "^11.3.0",
"axios": "^1.7.9"
"axios": "^1.7.9",
"element-plus": "^2.12.0",
"lucide-vue-next": "^0.561.0",
"pinia": "^2.2.8",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"devDependencies": {
"@module-federation/vite": "^1.9.3",
"@types/node": "^22.0.0",
"@vitejs/plugin-vue": "^5.2.1",
"@vitejs/plugin-vue-jsx": "^4.1.1",
"@module-federation/vite": "^1.9.3",
"typescript": "^5.7.2",
"vite": "^6.0.3",
"vue-tsc": "^2.2.0"

124
urbanLifelineWeb/packages/platform/src/layouts/AdminIframeSidebarLayout/AdminIframeSidebarLayout.scss → urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/AdminSidebarLayout.scss
View File

@@ -1,55 +1,71 @@
// ==================== 品牌色变量 ====================
$brand-color: #0055AA;
$brand-color-light: #EBF5FF;
$brand-color-hover: #004488;
.sidebar-layout {
display: flex;
width: 100%;
height: 100vh;
overflow: hidden;
background: #fff;
font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
// ==================== 侧边栏 ====================
// ==================== 2级侧边栏 ====================
.sidebar {
width: 220px;
width: 224px;
height: 100%;
background: #F0EAF4;
background: #fff;
display: flex;
flex-direction: column;
color: #333;
flex-shrink: 0;
transition: width 0.3s ease;
border-right: 1px solid rgba(0, 0, 0, 0.08);
border-right: 1px solid #f1f5f9;
&.collapsed {
width: 64px;
.sidebar-header {
padding: 16px 12px;
padding: 16px 0;
justify-content: center;
.logo {
justify-content: center;
display: none;
}
.collapse-btn {
position: static;
margin-left: 0;
display: flex;
}
}
.nav-item {
justify-content: center;
padding: 12px;
padding: 10px;
margin: 2px 8px;
span {
display: none;
}
}
.user-section {
justify-content: center;
padding: 16px 12px;
padding: 16px 8px;
.user-name, .back-icon {
display: none;
}
}
}
}
// 侧边栏头部
.sidebar-header {
padding: 16px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
height: 64px;
padding: 0 16px;
border-bottom: 1px solid #f1f5f9;
display: flex;
align-items: center;
justify-content: space-between;
@@ -63,76 +79,75 @@
justify-content: center;
border-radius: 6px;
cursor: pointer;
color: #888;
color: #94a3b8;
background: transparent;
border: none;
transition: all 0.2s;
&:hover {
background: rgba(124, 58, 237, 0.1);
color: #7c3aed;
background: #f1f5f9;
color: #64748b;
}
}
.logo-img {
width: 100%;
height: 32px;
border-radius: 8px;
object-fit: contain;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
.logo-img {
width: 40px;
height: 40px;
border-radius: 6px;
object-fit: contain;
background: #fff;
padding: 2px;
}
gap: 8px;
.logo-text {
font-size: 16px;
font-size: 15px;
font-weight: 600;
color: #333;
color: #1e293b;
}
}
// 导航菜单
.nav-menu {
flex: 1;
overflow-y: auto;
padding: 12px 0;
// overflow-y: auto;
padding: 8px 0;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
}
.nav-section {
padding: 8px 0;
padding: 0;
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
margin-bottom: 4px;
gap: 8px;
padding: 10px 16px;
margin: 2px 8px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
color: #555;
color: #64748b;
font-size: 14px;
font-weight: 500;
&:hover {
background: rgba(124, 58, 237, 0.1);
color: #7c3aed;
background: #f8fafc;
color: #475569;
}
&.active {
background: rgba(124, 58, 237, 0.15);
color: #7c3aed;
font-weight: 500;
background: $brand-color-light;
color: $brand-color;
}
.el-icon {
@@ -141,6 +156,7 @@
}
span {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -150,7 +166,7 @@
// 用户信息
.user-section {
padding: 16px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
border-top: 1px solid #f1f5f9;
display: flex;
align-items: center;
gap: 12px;
@@ -163,7 +179,7 @@
flex-shrink: 0;
&:hover {
transform: scale(1.1);
transform: scale(1.05);
}
:deep(.el-avatar) {
@@ -176,7 +192,7 @@
flex: 1;
font-size: 14px;
font-weight: 500;
color: #303133;
color: #374151;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -190,13 +206,13 @@
justify-content: center;
border-radius: 6px;
cursor: pointer;
color: #606266;
color: #94a3b8;
transition: all 0.2s;
flex-shrink: 0;
&:hover {
color: #7c3aed;
background: rgba(124, 58, 237, 0.1);
color: $brand-color;
background: $brand-color-light;
}
.el-icon {
@@ -210,7 +226,7 @@
flex: 1;
height: 100%;
overflow: hidden;
background: #fff;
background: #f8fafc;
position: relative;
}
@@ -229,15 +245,15 @@
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e5e7eb;
background: #fafafa;
border-bottom: 1px solid #e2e8f0;
background: #fff;
flex-shrink: 0;
}
.iframe-title {
font-size: 16px;
font-weight: 600;
color: #333;
color: #1e293b;
}
.content-iframe {
@@ -257,7 +273,7 @@
flex-direction: column;
align-items: center;
gap: 12px;
color: #7c3aed;
color: $brand-color;
font-size: 14px;
z-index: 10;
@@ -272,12 +288,12 @@
width: 64px;
&:not(.collapsed) {
width: 220px;
width: 224px;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
}
}

27
urbanLifelineWeb/packages/platform/src/layouts/AdminIframeSidebarLayout/AdminIframeSidebarLayout.vue → urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/AdminSidebarLayout.vue
View File

@@ -3,16 +3,20 @@
<!-- 侧边栏 -->
<aside class="sidebar" :class="{ collapsed: collapsed }">
<div class="sidebar-header">
<div class="logo">
<div class="logo" v-if="!collapsed">
<img src="/logo.jpg" alt="Logo" class="logo-img" />
<span v-if="!collapsed" class="logo-text">城市生命线</span>
</div>
<div class="collapse-btn" @click="toggleSidebar">
<el-icon>
<DArrowLeft v-if="!collapsed" />
<DArrowRight v-else />
</el-icon>
<!-- <span v-if="!collapsed" class="logo-text">城市生命线</span> -->
</div>
<button
class="collapse-btn"
@click="toggleSidebar"
:title="collapsed ? '展开侧边栏' : '收起侧边栏'"
>
<!-- 收起图标 PanelLeftClose -->
<PanelLeftClose v-if="!collapsed"/>
<!-- 展开图标 PanelLeftOpen -->
<img v-else src="/logo.jpg" alt="Logo" class="logo-img" />
</button>
</div>
<nav class="nav-menu">
@@ -85,6 +89,7 @@ import {
Loading,
Back
} from '@element-plus/icons-vue'
import { PanelLeftClose, PanelLeftOpen } from 'lucide-vue-next'
import { ElMessage } from 'element-plus'
import type { MenuItem } from 'shared/types'
@@ -126,9 +131,9 @@ function loadMenuFromStorage(): MenuItem[] {
const userViews = loginDomain.userViews || []
// 过滤出 AdminIframeSidebarLayout 的菜单（3个 iframe 管理后台入口）
// 过滤出 AdminSidebarLayout 的菜单（3个 iframe 管理后台入口）
const sidebarViews = userViews.filter((view: any) =>
view.layout === 'AdminIframeSidebarLayout' && // AdminIframeSidebarLayout 布局
view.layout === 'AdminSidebarLayout' && // AdminSidebarLayout 布局
view.viewType === 'iframe' && // iframe 类型
view.type === 1 && // type 1 是侧边栏菜单
view.service === 'platform' // platform 服务
@@ -270,5 +275,5 @@ watch(
</script>
<style lang="scss" scoped>
@import url("./AdminIframeSidebarLayout.scss");
@import url("./AdminSidebarLayout.scss");
</style>

0
urbanLifelineWeb/packages/platform/src/layouts/AdminIframeSidebarLayout/README.md → urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/README.md
View File

270
urbanLifelineWeb/packages/platform/src/layouts/SidebarLayout/SidebarLayout.scss
View File

@@ -1,143 +1,234 @@
// ==================== 品牌色变量 ====================
$brand-color: #0055AA;
$brand-color-light: #EBF5FF;
$brand-color-hover: #004488;
.sidebar-layout {
display: flex;
width: 100%;
height: 100vh;
overflow: hidden;
background: #fff;
font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
// ==================== 侧边栏 ====================
// ==================== 1级侧边栏 ====================
.sidebar {
width: 220px;
width: 256px;
height: 100%;
background: #F0EAF4;
background: #fff;
display: flex;
flex-direction: column;
color: #333;
flex-shrink: 0;
transition: width 0.3s ease;
border-right: 1px solid rgba(0, 0, 0, 0.08);
border-right: 1px solid #f1f5f9;
z-index: 50;
&.collapsed {
width: 64px;
width: 80px;
overflow: visible;
.sidebar-header {
padding: 16px 12px;
padding: 16px 0;
justify-content: center;
.logo {
justify-content: center;
}
.collapse-btn {
position: static;
margin-left: 0;
}
}
.nav-item {
justify-content: center;
padding: 12px;
border-radius: 8px;
margin: 0 12px;
span {
display: none;
}
// 折叠状态下显示 tooltip
&:hover .nav-tooltip {
opacity: 1;
visibility: visible;
}
}
.user-section {
justify-content: center;
padding: 16px 12px;
padding: 16px;
.user-info, .user-more {
display: none;
}
}
}
}
// 侧边栏头部
.sidebar-header {
padding: 16px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
height: 64px;
padding: 0 16px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
}
.collapse-btn {
width: 28px;
height: 28px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
border-radius: 8px;
cursor: pointer;
color: #888;
color: #94a3b8;
background: transparent;
border: none;
transition: all 0.2s;
flex-shrink: 0;
&:hover {
background: rgba(124, 58, 237, 0.1);
color: #7c3aed;
background: #f1f5f9;
color: #64748b;
}
.el-icon {
font-size: 18px;
}
}
.logo-img {
height: 32px;
width: 100%;
border-radius: 8px;
object-fit: contain;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
.logo-img {
width: 40px;
height: 40px;
border-radius: 6px;
object-fit: contain;
background: #fff;
padding: 2px;
}
gap: 8px;
.logo-text {
font-size: 16px;
font-weight: 600;
color: #333;
color: #1e293b;
letter-spacing: -0.02em;
}
}
// 折叠状态下的 Logo（可点击展开）
.logo-collapsed {
position: relative;
display: flex;
justify-content: center;
cursor: pointer;
padding: 8px;
border-radius: 12px;
transition: all 0.2s;
&:hover {
background: #f1f5f9;
.logo-tooltip {
opacity: 1;
visibility: visible;
}
}
.logo-img {
width: 100%;
height: 32px;
border-radius: 8px;
object-fit: contain;
}
.logo-tooltip {
position: absolute;
left: 50%;
top: calc(100% + 8px);
transform: translateX(-50%);
background: #1e293b;
color: #fff;
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
z-index: 100;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transition: all 0.2s;
pointer-events: none;
.tooltip-arrow {
position: absolute;
left: 50%;
bottom: 100%;
transform: translateX(-50%);
border: 6px solid transparent;
border-bottom-color: #1e293b;
}
}
}
// 导航菜单
.nav-menu {
flex: 1;
overflow-y: auto;
padding: 12px 0;
// overflow-y: auto;
padding: 8px 12px;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
}
.nav-section {
padding: 8px 0;
padding: 0;
}
.nav-item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
margin-bottom: 4px;
padding: 12px 16px;
margin-bottom: 2px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
color: #555;
color: #64748b;
font-size: 14px;
font-weight: 500;
&:hover {
background: rgba(124, 58, 237, 0.1);
color: #7c3aed;
background: $brand-color-light;
color: $brand-color;
}
&.active {
background: rgba(124, 58, 237, 0.15);
color: #7c3aed;
font-weight: 500;
background: $brand-color;
color: #fff;
box-shadow: 0 4px 12px rgba($brand-color, 0.25);
.el-icon {
color: #fff;
}
}
.el-icon {
font-size: 18px;
flex-shrink: 0;
transition: color 0.2s;
}
span {
@@ -145,17 +236,51 @@
overflow: hidden;
text-overflow: ellipsis;
}
// 折叠时的 Tooltip
.nav-tooltip {
position: absolute;
left: calc(100% + 16px);
top: 50%;
transform: translateY(-50%);
background: #1e293b;
color: #fff;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
white-space: nowrap;
z-index: 100;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transition: all 0.2s;
pointer-events: none;
.tooltip-arrow {
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
border-right-color: #1e293b;
}
}
}
// 用户信息
.user-section {
padding: 16px 20px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
padding: 16px;
border-top: 1px solid #f1f5f9;
background: #f8fafc;
cursor: pointer;
transition: background 0.2s;
&:hover {
background: rgba(124, 58, 237, 0.05);
background: #f1f5f9;
.user-name {
color: $brand-color;
}
}
.user-info-wrapper {
@@ -165,16 +290,43 @@
}
.user-avatar {
position: relative;
flex-shrink: 0;
&::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
background: #22c55e;
border: 2px solid #fff;
border-radius: 50%;
}
}
.user-info {
flex: 1;
min-width: 0;
}
.user-name {
font-size: 14px;
font-weight: 500;
color: #333;
color: #374151;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.2s;
}
.user-more {
color: #94a3b8;
&:hover {
color: #64748b;
}
}
}
@@ -183,7 +335,7 @@
flex: 1;
height: 100%;
overflow: hidden;
background: #fff;
background: #f8fafc;
position: relative;
}
@@ -202,15 +354,15 @@
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e5e7eb;
background: #fafafa;
border-bottom: 1px solid #e2e8f0;
background: #fff;
flex-shrink: 0;
}
.iframe-title {
font-size: 16px;
font-weight: 600;
color: #333;
color: #1e293b;
}
.content-iframe {
@@ -230,7 +382,7 @@
flex-direction: column;
align-items: center;
gap: 12px;
color: #7c3aed;
color: $brand-color;
font-size: 14px;
z-index: 10;
@@ -242,15 +394,15 @@
// ==================== 响应式 ====================
@media (max-width: 768px) {
.sidebar {
width: 64px;
width: 80px;
&:not(.collapsed) {
width: 220px;
width: 256px;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
}
}

62
urbanLifelineWeb/packages/platform/src/layouts/SidebarLayout/SidebarLayout.vue
View File

@@ -3,16 +3,20 @@
<!-- 侧边栏 -->
<aside class="sidebar" :class="{ collapsed: collapsed }">
<div class="sidebar-header">
<div class="logo">
<div class="logo" v-if="!collapsed">
<img src="/logo.jpg" alt="Logo" class="logo-img" />
<span v-if="!collapsed" class="logo-text">城市生命线</span>
</div>
<div class="collapse-btn" @click="toggleSidebar">
<el-icon>
<DArrowLeft v-if="!collapsed" />
<DArrowRight v-else />
</el-icon>
<!-- <span v-if="!collapsed" class="logo-text">城市生命线</span> -->
</div>
<button
class="collapse-btn"
@click="toggleSidebar"
:title="collapsed ? '展开侧边栏' : '收起侧边栏'"
>
<!-- 收起图标 PanelLeftClose -->
<PanelLeftClose v-if="!collapsed"/>
<!-- 展开图标 PanelLeftOpen -->
<img v-else src="/logo.jpg" alt="Logo" class="logo-img" />
</button>
</div>
<nav class="nav-menu">
@@ -24,8 +28,13 @@
:class="{ active: activeMenu === item.key }"
@click="handleMenuClick(item)"
>
<el-icon><component :is="item.icon" /></el-icon>
<component :is="item.icon" :size="18" />
<span v-if="!collapsed">{{ item.label }}</span>
<!-- 折叠时的 Tooltip -->
<div v-if="collapsed" class="nav-tooltip">
{{ item.label }}
<div class="tooltip-arrow"></div>
</div>
</div>
</div>
</nav>
@@ -41,15 +50,15 @@
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="profile">
<el-icon><User /></el-icon>
<User :size="16" />
个人中心
</el-dropdown-item>
<el-dropdown-item v-if="hasAdmin" command="settings" divided>
<el-icon><Setting /></el-icon>
<Settings :size="16" />
管理后台
</el-dropdown-item>
<el-dropdown-item command="logout" divided>
<el-icon><SwitchButton /></el-icon>
<LogOut :size="16" />
退出登录
</el-dropdown-item>
</el-dropdown-menu>
@@ -69,7 +78,7 @@
@load="handleIframeLoad"
/>
<div v-if="iframeLoading" class="iframe-loading">
<el-icon class="is-loading"><Loading /></el-icon>
<Loader :size="20" class="is-loading" />
<span>加载中...</span>
</div>
</div>
@@ -84,19 +93,18 @@
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
ChatDotRound,
Grid,
Connection,
Document,
Service,
DArrowLeft,
DArrowRight,
PanelLeftClose,
MessageCircle,
LayoutGrid,
Workflow,
FileText,
Headphones,
User,
Setting,
SwitchButton,
Refresh,
Loading
} from '@element-plus/icons-vue'
Settings,
LogOut,
RefreshCw,
Loader
} from 'lucide-vue-next'
import { ElMessage } from 'element-plus'
import type { MenuItem } from 'shared/types'
@@ -148,7 +156,7 @@ function loadMenuFromStorage(): MenuItem[] {
!view.url?.startsWith('/admin') // 排除 admin 路由（由 AdminSidebar 管理）
)
hasAdmin.value = userViews.filter((view: any) =>
view.layout === 'AdminIframeSidebarLayout' &&
view.layout === 'AdminSidebarLayout' &&
!view.parentId &&
view.type === 1 && // type 1 是侧边栏菜单
view.service === 'platform' && // 只显示 platform 服务的视图
@@ -242,7 +250,7 @@ const handleUserCommand = (command: string) => {
router.push('/profile')
break
case 'settings':
// 跳转到管理后台（AdminSidebarLayout）
// 跳转到管理后台（SubSidebarLayout）
// 查找第一个 admin 路由
const loginDomainStr = localStorage.getItem('loginDomain')
if (loginDomainStr) {

4
urbanLifelineWeb/packages/platform/src/layouts/index.ts
View File

@@ -1,4 +1,4 @@
export { default as SidebarLayout } from "./SidebarLayout/SidebarLayout.vue";
export { default as AdminIframeSidebarLayout } from "./AdminIframeSidebarLayout/AdminIframeSidebarLayout.vue";
export { default as AdminSidebarLayout } from "./AdminSidebarLayout/AdminSidebarLayout.vue";
// BlankLayout从shared导入
export { BlankLayout, AdminSidebarLayout } from 'shared/layouts';
export { BlankLayout, SubSidebarLayout } from 'shared/layouts';

85
urbanLifelineWeb/packages/platform/src/main.ts
View File

@@ -1,7 +1,6 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import App from './App.vue'
@@ -9,6 +8,84 @@ import router from './router/'
import { AES_SECRET_KEY } from './config'
import { initAesEncrypt } from 'shared/utils'
// 导入需要的 Lucide 图标（用于动态组件）
import {
MessageCircle,
LayoutGrid,
Workflow,
FileText,
Headphones,
BarChart3,
Users,
User,
Settings,
Home,
Ticket,
Bot,
ScrollText,
Monitor,
Server,
ChevronDown,
ChevronRight,
ChevronLeft,
PanelLeftClose,
PanelLeftOpen,
RefreshCw,
Loader,
LogOut,
Plus,
Trash2,
Clock,
Search,
AlertTriangle,
Wrench,
Paperclip,
Send,
History,
X,
Menu,
Zap
} from 'lucide-vue-next'
// Lucide 图标映射（用于全局注册）
const lucideIcons = {
MessageCircle,
LayoutGrid,
Workflow,
FileText,
Headphones,
BarChart3,
Users,
User,
Settings,
Home,
Ticket,
Bot,
ScrollText,
Monitor,
Server,
ChevronDown,
ChevronRight,
ChevronLeft,
PanelLeftClose,
PanelLeftOpen,
RefreshCw,
Loader,
LogOut,
Plus,
Trash2,
Clock,
Search,
AlertTriangle,
Wrench,
Paperclip,
Send,
History,
X,
Menu,
Zap
}
// 异步初始化应用
async function initApp() {
// 1. 初始化 AES 加密工具
@@ -29,9 +106,9 @@ async function initApp() {
// 4. 注册 Element Plus
app.use(ElementPlus)
// 5. 注册所有 Element Plus 图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
// 5. 注册 Lucide 图标（用于动态组件）
for (const [name, component] of Object.entries(lucideIcons)) {
app.component(name, component)
}
// 6. 注册路由

6
urbanLifelineWeb/packages/platform/src/router/dynamicRoute.ts
View File

@@ -18,7 +18,7 @@ import {
import type { TbSysViewDTO } from 'shared/types'
import type { RouteRecordRaw } from 'vue-router'
import router from './index'
import { SidebarLayout, BlankLayout, AdminIframeSidebarLayout, AdminSidebarLayout } from '@/layouts'
import { SidebarLayout, BlankLayout, AdminSidebarLayout, SubSidebarLayout } from '@/layouts'
// Platform 布局组件映射
const platformLayoutMap: Record<string, () => Promise<any>> = {
@@ -26,8 +26,8 @@ const platformLayoutMap: Record<string, () => Promise<any>> = {
'BlankLayout': () => Promise.resolve({ default: BlankLayout }),
'NavigationLayout': () => Promise.resolve({ default: SidebarLayout }),
'BasicLayout': () => Promise.resolve({ default: SidebarLayout }),
'AdminIframeSidebarLayout': () => Promise.resolve({ default: AdminIframeSidebarLayout }),
'AdminSidebarLayout': () => Promise.resolve({ default: AdminSidebarLayout })
'AdminSidebarLayout': () => Promise.resolve({ default: AdminSidebarLayout }),
'SubSidebarLayout': () => Promise.resolve({ default: SubSidebarLayout })
}
// 视图组件加载器

2
urbanLifelineWeb/packages/platform/src/types/shared.d.ts vendored
View File

@@ -194,6 +194,6 @@ declare module 'shared/layouts' {
import { DefineComponent } from 'vue'
export const BlankLayout: DefineComponent<{}, {}, any>
export const AdminSidebarLayout: DefineComponent<{}, {}, any>
export const SubSidebarLayout: DefineComponent<{}, {}, any>
}

8
urbanLifelineWeb/packages/platform/src/views/public/Agents/AgentPlatformView.scss
View File

@@ -49,14 +49,14 @@
transition: all 0.2s;
&:hover {
color: #7c3aed;
border-color: #7c3aed;
color: #0055AA;
border-color: #0055AA;
}
&.active {
color: #fff;
background: #7c3aed;
border-color: #7c3aed;
background: #0055AA;
border-color: #0055AA;
}
}
}

4
urbanLifelineWeb/packages/platform/src/views/public/Agents/AgentPlatformView.vue
View File

@@ -136,7 +136,7 @@ const agents = ref<Agent[]>([
name: '泰豪合同助手',
description: '智能合同审核、条款分析、风险提示，提高合同处理效率',
icon: '📄',
color: '#7c3aed',
color: '#0055AA',
category: 'business',
usage: 8320
},
@@ -225,7 +225,7 @@ const handleSaveAgent = async (agentData: Partial<Agent>) => {
description: agentData.description || '',
icon: agentData.imageUrl ? '' : '🤖',
imageUrl: agentData.imageUrl,
color: agentData.color || '#7c3aed',
color: agentData.color || '#0055AA',
category: agentData.category || 'office',
apiUrl: agentData.apiUrl,
usage: 0

4
urbanLifelineWeb/packages/platform/src/views/public/Agents/components/AgentCard/AgentCard.scss
View File

@@ -7,8 +7,8 @@
transition: all 0.3s ease;
&:hover {
border-color: #7c3aed;
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12);
border-color: #0055AA;
box-shadow: 0 8px 24px rgba(0, 85, 170, 0.12);
transform: translateY(-4px);
}

2
urbanLifelineWeb/packages/platform/src/views/public/Agents/components/AgentEdit/AgentEdit.vue
View File

@@ -236,7 +236,7 @@ const handleSave = () => {
const suggestionCards = formData.value.suggestionCards?.filter(s => s.text.trim()) || []
// 生成随机颜色（如果没有上传图片）
const colors = ['#7c3aed', '#10b981', '#f59e0b', '#3b82f6', '#ef4444', '#6366f1', '#14b8a6']
const colors = ['#0055AA', '#10b981', '#f59e0b', '#3b82f6', '#ef4444', '#6366f1', '#14b8a6']
const randomColor = colors[Math.floor(Math.random() * colors.length)]
emit('save', {

18
urbanLifelineWeb/packages/platform/src/views/public/Chat/AIChatView.scss
View File

@@ -49,8 +49,8 @@
&:hover {
background: #f3f4f6;
border-color: #7c3aed;
color: #7c3aed;
border-color: #0055AA;
color: #0055AA;
}
}
@@ -71,7 +71,7 @@
&:hover {
background: #f3f4f6;
color: #7c3aed;
color: #0055AA;
}
}
@@ -172,7 +172,7 @@
&:hover {
background: #f3f4f6;
color: #7c3aed;
color: #0055AA;
}
.agent-icon {
@@ -187,8 +187,8 @@
}
:deep(.el-dropdown-menu__item.is-active) {
background: rgba(124, 58, 237, 0.1);
color: #7c3aed;
background: rgba(0, 85, 170, 0.1);
color: #0055AA;
}
.chat-content {
@@ -221,7 +221,7 @@
align-items: flex-end;
.message-text {
background: #7c3aed;
background: #0055AA;
color: #fff;
}
}
@@ -362,7 +362,7 @@
.send-btn {
width: 36px;
height: 36px;
background: #7c3aed;
background: #0055AA;
border-radius: 8px;
display: flex;
align-items: center;
@@ -373,7 +373,7 @@
cursor: pointer;
&:hover:not(:disabled) {
background: #5b21b6;
background: #004488;
}
&:disabled {

4
urbanLifelineWeb/packages/platform/src/views/public/Chat/components/ChatDefault/ChatDefault.scss
View File

@@ -55,8 +55,8 @@
transition: all 0.2s ease;
&:hover {
border-color: #7c3aed;
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
border-color: #0055AA;
box-shadow: 0 4px 12px rgba(0, 85, 170, 0.15);
transform: translateY(-2px);
}

1
urbanLifelineWeb/packages/shared/package.json
View File

@@ -14,6 +14,7 @@
"cors": "^2.8.5",
"element-plus": "^2.12.0",
"express": "^4.18.2",
"lucide-vue-next": "^0.561.0",
"ofetch": "^1.4.1",
"vue": "^3.5.13",
"vue-router": "^4.5.0"

6
urbanLifelineWeb/packages/shared/src/components/iframe/IframeView.vue
View File

@@ -8,11 +8,11 @@
@load="handleLoad"
/>
<div v-else class="iframe-error">
<el-icon class="error-icon"><WarningFilled /></el-icon>
<AlertTriangle :size="48" class="error-icon" />
<p>无效的 iframe 地址</p>
</div>
<div v-if="loading" class="iframe-loading">
<el-icon class="is-loading"><Loading /></el-icon>
<Loader :size="32" class="is-loading" />
<span>加载中...</span>
</div>
</div>
@@ -21,7 +21,7 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { Loading, WarningFilled } from '@element-plus/icons-vue'
import { Loader, AlertTriangle } from 'lucide-vue-next'
const route = useRoute()
const loading = ref(true)

262
urbanLifelineWeb/packages/shared/src/layouts/AdminSidebarLayout/AdminSidebarLayout.scss
View File

@@ -1,262 +0,0 @@
.sidebar-layout {
display: flex;
width: 100%;
height: 100vh;
overflow: hidden;
}
// ==================== 侧边栏（内层子导航样式）====================
.sidebar {
width: 180px;
height: 100%;
background: #fff;
display: flex;
flex-direction: column;
color: #333;
flex-shrink: 0;
transition: width 0.3s ease;
border-right: 1px solid #e4e7ed;
&.collapsed {
width: 64px;
.sidebar-header {
padding: 16px 12px;
justify-content: center;
.logo {
justify-content: center;
}
.collapse-btn {
position: static;
margin-left: 0;
}
}
.nav-item {
justify-content: center;
padding: 12px;
}
.user-section {
justify-content: center;
padding: 16px 12px;
}
}
}
// 侧边栏头部
.sidebar-header {
padding: 16px 20px;
border-bottom: 1px solid #e4e7ed;
display: flex;
align-items: center;
justify-content: space-between;
}
.collapse-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
cursor: pointer;
color: #909399;
transition: all 0.2s;
&:hover {
background: rgba(124, 58, 237, 0.1);
color: #7c3aed;
}
}
.logo {
display: flex;
align-items: center;
gap: 10px;
.logo-img {
width: 36px;
height: 36px;
border-radius: 6px;
object-fit: contain;
}
.logo-text {
font-size: 16px;
font-weight: 600;
color: #303133;
}
}
// 导航菜单
.nav-menu {
flex: 1;
overflow-y: auto;
padding: 16px 0;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
border-radius: 4px;
}
}
.nav-section {
padding: 0;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
margin-bottom: 0;
cursor: pointer;
transition: all 0.2s ease;
color: #606266;
font-size: 14px;
&:hover {
background: rgba(124, 58, 237, 0.1);
color: #7c3aed;
}
&.active {
background: rgba(124, 58, 237, 0.15);
color: #7c3aed;
border-right: 3px solid #7c3aed;
}
.el-icon {
font-size: 16px;
flex-shrink: 0;
}
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
// 用户信息
.user-section {
padding: 16px 20px;
border-top: 1px solid #e4e7ed;
cursor: pointer;
transition: background 0.2s;
&:hover {
background: rgba(124, 58, 237, 0.05);
}
.user-info-wrapper {
display: flex;
align-items: center;
gap: 12px;
}
.user-avatar {
flex-shrink: 0;
}
.user-name {
font-size: 14px;
font-weight: 500;
color: #303133;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
// ==================== 主内容区 ====================
.main-content {
flex: 1;
height: 100%;
overflow: hidden;
background: #fff;
position: relative;
}
// iframe 容器
.iframe-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
}
.iframe-header {
height: 56px;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e5e7eb;
background: #fafafa;
flex-shrink: 0;
}
.iframe-title {
font-size: 16px;
font-weight: 600;
color: #333;
}
.content-iframe {
flex: 1;
width: 100%;
height: 100%;
border: none;
background: #fff;
}
.iframe-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
color: #7c3aed;
font-size: 14px;
z-index: 10;
.el-icon {
font-size: 32px;
}
}
// ==================== 响应式 ====================
@media (max-width: 768px) {
.sidebar {
width: 64px;
&:not(.collapsed) {
width: 180px;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}
}
.iframe-header {
padding: 0 16px;
.iframe-title {
font-size: 14px;
}
}
}

94
urbanLifelineWeb/packages/shared/src/layouts/AdminSidebarLayout/AdminSidebarLayout.vue
View File

@@ -3,16 +3,24 @@
<!-- 侧边栏 -->
<aside class="sidebar" :class="{ collapsed: collapsed }">
<div class="sidebar-header">
<!-- Logo 区域插槽，支持各服务自定义 -->
<slot name="logo" :collapsed="collapsed" :service="currentService">
<!-- 默认 Logo -->
<div class="logo">
<img :src="logoUrl" alt="Logo" class="logo-img" />
<span v-if="!collapsed" class="logo-text">城市生命线</span>
</div>
<div class="collapse-btn" @click="toggleSidebar">
<el-icon>
<DArrowLeft v-if="!collapsed" />
<DArrowRight v-else />
</el-icon>
<span v-if="!collapsed" class="logo-text">{{ serviceTitle }}</span>
</div>
</slot>
<button
class="collapse-btn"
@click="toggleSidebar"
:title="collapsed ? '展开侧边栏' : '收起侧边栏'"
>
<!-- 收起图标 PanelLeftClose -->
<PanelLeftClose v-if="!collapsed"/>
<!-- 展开图标 PanelLeftOpen -->
<PanelLeftOpen v-else/>
</button>
</div>
<nav class="nav-menu">
@@ -24,13 +32,16 @@
:class="{ active: activeMenu === item.key, 'has-children': item.children }"
@click="item.children ? toggleMenu(item) : handleMenuClick(item)"
>
<el-icon><component :is="item.icon" /></el-icon>
<component :is="item.icon" :size="16" />
<span v-if="!collapsed">{{ item.label }}</span>
<!-- 展开/折叠图标 -->
<el-icon v-if="item.children && !collapsed" class="expand-icon">
<ArrowDown v-if="item.expanded" />
<ArrowRight v-else />
</el-icon>
<ChevronDown v-if="item.children && !collapsed && item.expanded" :size="14" class="expand-icon" />
<ChevronRight v-if="item.children && !collapsed && !item.expanded" :size="14" class="expand-icon" />
<!-- 折叠时的 Tooltip -->
<div v-if="collapsed" class="nav-tooltip">
{{ item.label }}
<div class="tooltip-arrow"></div>
</div>
</div>
<!-- 子菜单 -->
<template v-if="item.children && item.expanded && !collapsed">
@@ -73,7 +84,7 @@
@load="handleIframeLoad"
/>
<div v-if="iframeLoading" class="iframe-loading">
<el-icon class="is-loading"><Loading /></el-icon>
<Loader :size="20" class="is-loading" />
<span>加载中...</span>
</div>
</div>
@@ -87,23 +98,28 @@
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
ChatDotRound,
Grid,
Connection,
Document,
Service,
DArrowLeft,
DArrowRight,
User,
Setting,
SwitchButton,
Refresh,
Loading,
ArrowDown,
ArrowRight
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {
PanelLeftClose,
PanelLeftOpen,
MessageCircle,
LayoutGrid,
Workflow,
FileText,
Headphones,
ChevronLeft,
ChevronRight,
ChevronDown,
User,
Settings,
LogOut,
RefreshCw,
Loader
} from 'lucide-vue-next'
// el-button 图标需要传入组件
const Refresh = RefreshCw
import type { MenuItem } from '@/types/menu'
interface Props {
@@ -154,7 +170,7 @@ const currentService = computed(() => {
const userViews = loginDomain.userViews || []
// 找到当前路由对应的视图
const currentView = userViews.find((v: any) =>
v.layout === 'AdminSidebarLayout' &&
v.layout === 'SubSidebarLayout' &&
v.url === route.path
)
if (currentView?.service) {
@@ -162,7 +178,7 @@ const currentService = computed(() => {
}
// 如果没找到精确匹配，尝试前缀匹配
const matchedView = userViews.find((v: any) =>
v.layout === 'AdminSidebarLayout' &&
v.layout === 'SubSidebarLayout' &&
route.path.startsWith(v.url)
)
if (matchedView?.service) {
@@ -188,6 +204,16 @@ const logoUrl = computed(() => {
return serviceLogos[service] || '/logo.jpg' // 默认回退到根路径
})
// 服务标题
const serviceTitle = computed(() => {
const serviceTitles: Record<string, string> = {
'platform': '管理平台',
'workcase': '智能客服',
'bidding': '竞价平台'
}
return serviceTitles[currentService.value] || '城市生命线'
})
// 状态管理
const collapsed = ref(false)
const activeMenu = ref('home')
@@ -227,9 +253,9 @@ function loadMenuFromStorage(): MenuItem[] {
const service = currentService.value
console.log(`📋 [${service}] 加载用户视图:`, userViews)
// 过滤出 AdminSidebarLayout 的菜单（使用当前服务动态过滤）
// 过滤出 SubSidebarLayout 的菜单（使用当前服务动态过滤）
const allSidebarViews = userViews.filter((view: any) =>
view.layout === 'AdminSidebarLayout' &&
view.layout === 'SubSidebarLayout' &&
(view.type === 0 || view.type === 1) && // type 0=目录 1=菜单
view.service === service && // 动态匹配服务
view.url?.startsWith('/admin') // 只留 admin 路由
@@ -367,5 +393,5 @@ watch(
</script>
<style lang="scss" scoped>
@import url("./AdminSidebarLayout.scss");
@import url("./SubSidebarLayout.scss");
</style>

440
urbanLifelineWeb/packages/shared/src/layouts/SubSidebarLayout/SubSidebarLayout.scss Normal file
View File

@@ -0,0 +1,440 @@
// ==================== 品牌色变量 ====================
$brand-color: #0055AA;
$brand-color-light: #EBF5FF;
$brand-color-hover: #004488;
.sidebar-layout {
display: flex;
width: 100%;
height: 100vh;
overflow: hidden;
background: #f8fafc;
font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
// ==================== 2级侧边栏（子导航样式）====================
.sidebar {
width: 224px;
height: 100%;
background: #fff;
display: flex;
flex-direction: column;
color: #333;
flex-shrink: 0;
transition: all 0.3s ease;
border-right: 1px solid #f1f5f9;
position: relative;
&.collapsed {
width: 64px;
overflow: visible;
.sidebar-header {
padding: 16px 0;
justify-content: center;
.logo {
display: none;
}
.collapse-btn {
display: flex;
}
}
.nav-item {
justify-content: center;
padding: 10px;
margin: 2px 8px;
span {
display: none;
}
.expand-icon {
display: none;
}
// 折叠状态下显示 tooltip
&:hover .nav-tooltip {
opacity: 1;
visibility: visible;
}
}
.nav-child-item {
display: none;
}
.user-section {
justify-content: center;
padding: 16px 8px;
}
}
}
// 侧边栏头部
.sidebar-header {
height: 64px;
padding: 0 16px;
border-bottom: 1px solid #f1f5f9;
display: flex;
align-items: center;
justify-content: space-between;
}
.collapse-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
cursor: pointer;
color: #94a3b8;
background: transparent;
border: none;
transition: all 0.2s;
flex-shrink: 0;
&:hover {
background: #f1f5f9;
color: #64748b;
}
svg {
width: 20px;
height: 20px;
}
}
// 展开按钮（折叠状态显示在右侧）
.expand-toggle {
position: absolute;
right: -12px;
top: 80px;
width: 24px;
height: 24px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: all 0.2s;
z-index: 10;
&:hover {
background: #f8fafc;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.el-icon {
font-size: 14px;
color: #64748b;
}
}
.logo {
display: flex;
align-items: center;
gap: 8px;
.logo-icon {
width: 32px;
height: 32px;
background: #3b82f6;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
.el-icon {
font-size: 18px;
color: #fff;
}
}
.logo-img {
width: 100%;
height: 32px;
border-radius: 8px;
object-fit: contain;
}
.logo-text {
font-size: 15px;
font-weight: 600;
color: #1e293b;
white-space: nowrap;
}
}
// 导航菜单
.nav-menu {
flex: 1;
// overflow-y: auto;
padding: 8px 0;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
}
.nav-section {
padding: 0;
}
// 1级导航项（分组标题）
.nav-item {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 16px;
margin: 2px 8px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
color: #64748b;
font-size: 14px;
font-weight: 500;
&:hover {
background: #f8fafc;
color: #475569;
}
&.active {
background: $brand-color-light;
color: $brand-color;
}
&.has-children {
cursor: pointer;
}
.el-icon {
font-size: 18px;
flex-shrink: 0;
}
span {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.expand-icon {
font-size: 14px;
color: #94a3b8;
transition: transform 0.2s;
}
// 折叠时的 Tooltip
.nav-tooltip {
position: absolute;
left: calc(100% + 16px);
top: 50%;
transform: translateY(-50%);
background: #1e293b;
color: #fff;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
white-space: nowrap;
z-index: 100;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transition: all 0.2s;
pointer-events: none;
.tooltip-arrow {
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
border-right-color: #1e293b;
}
}
}
// 2级导航项（子菜单）
.nav-child-item {
padding: 8px 16px 8px 40px;
margin: 1px 8px;
border-radius: 6px;
font-size: 13px;
font-weight: 400;
&:hover {
background: #f8fafc;
color: #475569;
}
&.active {
background: $brand-color;
color: #fff;
font-weight: 500;
.el-icon {
color: #fff;
}
}
.el-icon {
font-size: 16px;
}
}
// 3级导航项
.nav-sub-child-item {
padding: 6px 16px 6px 56px;
margin: 1px 8px;
border-radius: 6px;
font-size: 13px;
font-weight: 400;
color: #64748b;
&:hover {
background: #f8fafc;
color: #475569;
}
&.active {
background: $brand-color;
color: #fff;
}
}
// 用户信息
.user-section {
padding: 16px;
border-top: 1px solid #f1f5f9;
cursor: pointer;
transition: background 0.2s;
&:hover {
background: #f8fafc;
}
.user-info-wrapper {
display: flex;
align-items: center;
gap: 12px;
}
.user-avatar {
flex-shrink: 0;
}
.user-name {
font-size: 14px;
font-weight: 500;
color: #374151;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
// ==================== 主内容区 ====================
.main-content {
flex: 1;
height: 100%;
overflow: hidden;
background: #f8fafc;
position: relative;
}
// iframe 容器
.iframe-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
}
.iframe-header {
height: 56px;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e2e8f0;
background: #fff;
flex-shrink: 0;
}
.iframe-title {
font-size: 16px;
font-weight: 600;
color: #1e293b;
}
.content-iframe {
flex: 1;
width: 100%;
height: 100%;
border: none;
background: #fff;
}
.iframe-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
color: $brand-color;
font-size: 14px;
z-index: 10;
.el-icon {
font-size: 32px;
}
}
// ==================== 响应式 ====================
@media (max-width: 768px) {
.sidebar {
width: 64px;
&:not(.collapsed) {
width: 224px;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
}
}
.iframe-header {
padding: 0 16px;
.iframe-title {
font-size: 14px;
}
}
}

533
urbanLifelineWeb/packages/shared/src/layouts/SubSidebarLayout/SubSidebarLayout.vue Normal file
View File

@@ -0,0 +1,533 @@
<template>
<div class="sidebar-layout" :class="{ 'no-sidebar': shouldHideSidebar }">
<!-- 侧边栏（当只有一个菜单时隐藏） -->
<aside v-if="!shouldHideSidebar" class="sidebar" :class="{ collapsed: collapsed }">
<div class="sidebar-header">
<!-- Logo 区域插槽，支持各服务自定义 -->
<slot name="logo" :collapsed="collapsed" :service="currentService">
<!-- 默认 Logo -->
<div class="logo">
<img :src="logoUrl" alt="Logo" class="logo-img" />
<span v-if="!collapsed" class="logo-text">{{ serviceTitle }}</span>
</div>
</slot>
<button
class="collapse-btn"
@click="toggleSidebar"
:title="collapsed ? '展开侧边栏' : '收起侧边栏'"
>
<PanelLeftClose v-if="!collapsed"/>
<PanelLeftOpen v-else/>
</button>
</div>
<nav class="nav-menu">
<div class="nav-section">
<!-- 前端分组（非 admin 路由） -->
<template v-if="frontendMenuItems.length > 0">
<div
class="nav-item nav-group-item"
:class="{ 'has-children': true }"
@click="toggleGroup('frontend')"
>
<Monitor :size="16" />
<span v-if="!collapsed">前端</span>
<ChevronDown v-if="!collapsed && isGroupExpanded('frontend')" :size="14" class="expand-icon" />
<ChevronRight v-if="!collapsed && !isGroupExpanded('frontend')" :size="14" class="expand-icon" />
<div v-if="collapsed" class="nav-tooltip">
前端
<div class="tooltip-arrow"></div>
</div>
</div>
<!-- 前端子菜单 -->
<template v-if="isGroupExpanded('frontend') && !collapsed">
<template v-for="item in frontendMenuItems" :key="item.key">
<div
class="nav-item nav-child-item"
:class="{ active: isMenuActive(item), 'has-children': item.children }"
@click="item.children ? toggleMenu(item) : handleMenuClick(item)"
>
<component :is="item.icon" />
<span>{{ item.label }}</span>
<ChevronDown v-if="item.children && item.expanded" :size="14" class="expand-icon" />
<ChevronRight v-if="item.children && !item.expanded" :size="14" class="expand-icon" />
</div>
<!-- 三级菜单 -->
<template v-if="item.children && item.expanded">
<div
v-for="child in item.children"
:key="child.key"
class="nav-item nav-sub-child-item"
:class="{ active: isMenuActive(child) }"
@click="handleMenuClick(child)"
>
<span>{{ child.label }}</span>
</div>
</template>
</template>
</template>
</template>
<!-- 后端分组（admin 路由） -->
<template v-if="backendMenuItems.length > 0">
<div
class="nav-item nav-group-item"
:class="{ 'has-children': true }"
@click="toggleGroup('backend')"
>
<Server :size="16" />
<span v-if="!collapsed">后端</span>
<ChevronDown v-if="!collapsed && isGroupExpanded('backend')" :size="14" class="expand-icon" />
<ChevronRight v-if="!collapsed && !isGroupExpanded('backend')" :size="14" class="expand-icon" />
<div v-if="collapsed" class="nav-tooltip">
后端
<div class="tooltip-arrow"></div>
</div>
</div>
<!-- 后端子菜单 -->
<template v-if="isGroupExpanded('backend') && !collapsed">
<template v-for="item in backendMenuItems" :key="item.key">
<div
class="nav-item nav-child-item"
:class="{ active: isMenuActive(item), 'has-children': item.children }"
@click="item.children ? toggleMenu(item) : handleMenuClick(item)"
>
<component :is="item.icon" :size="16" />
<span>{{ item.label }}</span>
<ChevronDown v-if="item.children && item.expanded" :size="14" class="expand-icon" />
<ChevronRight v-if="item.children && !item.expanded" :size="14" class="expand-icon" />
</div>
<!-- 三级菜单 -->
<template v-if="item.children && item.expanded">
<div
v-for="child in item.children"
:key="child.key"
class="nav-item nav-sub-child-item"
:class="{ active: isMenuActive(child) }"
@click="handleMenuClick(child)"
>
<span>{{ child.label }}</span>
</div>
</template>
</template>
</template>
</template>
</div>
</nav>
</aside>
<!-- 折叠时的展开按钮 -->
<button
v-if="collapsed && !shouldHideSidebar"
class="expand-toggle"
@click="toggleSidebar"
title="展开侧边栏"
>
<ChevronRight :size="18" />
</button>
<!-- 主内容区 -->
<main class="main-content">
<!-- iframe 模式 -->
<div v-if="currentIframeUrl" class="iframe-container">
<div class="iframe-header">
<span class="iframe-title">{{ currentMenuItem?.label }}</span>
<el-button
text
@click="handleRefreshIframe"
:icon="Refresh"
>
刷新
</el-button>
</div>
<iframe
ref="iframeRef"
:src="currentIframeUrl"
class="content-iframe"
frameborder="0"
@load="handleIframeLoad"
/>
<div v-if="iframeLoading" class="iframe-loading">
<Loader :size="20" class="is-loading" />
<span>加载中...</span>
</div>
</div>
<!-- 路由模式 -->
<router-view v-else />
</main>
</div>
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
PanelLeftClose,
PanelLeftOpen,
Server,
Monitor,
ChevronDown,
ChevronRight,
RefreshCw,
Loader
} from 'lucide-vue-next'
// el-button 刷新图标需要传入组件
const Refresh = RefreshCw
// ... (rest of the code remains the same)
import type { MenuItem } from '@/types/menu'
// 分组展开状态
const expandedGroups = ref<Set<string>>(new Set(['frontend', 'backend']))
interface Props {
service?: string // 服务名称：platform, bidding, workcase
}
// ...
const props = withDefaults(defineProps<Props>(), {
service: undefined // 不设默认值，从路由自动检测
})
const router = useRouter()
const route = useRoute()
// 自动检测当前服务
const currentService = computed(() => {
// 优先使用 props
if (props.service) {
return props.service
}
// 从 route.meta 获取
const meta = route.meta as any
if (meta?.service) {
return meta.service
}
// 从 URL 路径推断服务（最可靠的方式）
const hostname = window.location.hostname
const pathname = window.location.pathname
// 根据 URL 路径判断服务
// localhost/workcase/... -> workcase
// localhost/platform/... -> platform
// localhost/bidding/... -> bidding
if (pathname.includes('/workcase/')) {
return 'workcase'
}
if (pathname.includes('/platform/')) {
return 'platform'
}
if (pathname.includes('/bidding/')) {
return 'bidding'
}
// 从 localStorage 的 loginDomain 中推断（基于当前路由匹配的视图）
try {
const loginDomainStr = localStorage.getItem('loginDomain')
if (loginDomainStr) {
const loginDomain = JSON.parse(loginDomainStr)
const userViews = loginDomain.userViews || []
// 找到当前路由对应的视图
const currentView = userViews.find((v: any) =>
v.layout === 'SubSidebarLayout' &&
v.url === route.path
)
if (currentView?.service) {
return currentView.service
}
// 如果没找到精确匹配，尝试前缀匹配
const matchedView = userViews.find((v: any) =>
v.layout === 'SubSidebarLayout' &&
route.path.startsWith(v.url)
)
if (matchedView?.service) {
return matchedView.service
}
}
} catch (error) {
console.error('自动检测服务失败:', error)
}
// 默认返回 workcase
return 'workcase'
})
// 动态 Logo URL
const logoUrl = computed(() => {
const service = currentService.value
// 根据不同服务返回对应的 logo 路径
const serviceLogos: Record<string, string> = {
'platform': '/platform/logo.jpg',
'workcase': '/workcase/logo.jpg',
'bidding': '/bidding/logo.jpg'
}
return serviceLogos[service] || '/logo.jpg' // 默认回退到根路径
})
// 服务标题
const serviceTitle = computed(() => {
const serviceTitles: Record<string, string> = {
'platform': '管理平台',
'workcase': '智能客服',
'bidding': '竞价平台'
}
return serviceTitles[currentService.value] || '城市生命线'
})
// 状态管理
const collapsed = ref(false)
const activeMenu = ref('home')
const iframeLoading = ref(false)
const iframeRef = ref<HTMLIFrameElement>()
// 从 LocalStorage 获取用户名
function getUserName(): string {
try {
const loginDomainStr = localStorage.getItem('loginDomain')
if (loginDomainStr) {
const loginDomain = JSON.parse(loginDomainStr)
return loginDomain.user?.username || loginDomain.userInfo?.username || '管理员'
}
} catch (error) {
console.error('❌ 获取用户名失败:', error)
}
return '管理员'
}
const userName = ref(getUserName())
/**
* 从 LocalStorage 加载菜单
*/
function loadMenuFromStorage(): MenuItem[] {
try {
const loginDomainStr = localStorage.getItem('loginDomain')
if (!loginDomainStr) {
console.warn('⚠️ 未找到 loginDomain')
return []
}
const loginDomain = JSON.parse(loginDomainStr)
const userViews = loginDomain.userViews || []
const service = currentService.value
console.log(`📋 [${service}] 加载用户视图:`, userViews)
// 过滤出顶级菜单：需要 layout === 'SubSidebarLayout'
const topLevelViews = userViews.filter((view: any) =>
view.layout === 'SubSidebarLayout' &&
!view.parentId && // 顶级菜单没有 parentId
(view.type === 0 || view.type === 1) && // type 0=目录 1=菜单
view.service === service // 动态匹配服务
)
// 获取所有顶级菜单的 viewId
const topLevelIds = new Set(topLevelViews.map((v: any) => v.viewId))
// 过滤出子菜单：parentId 指向顶级菜单（不要求子菜单有 layout）
const childViews = userViews.filter((view: any) =>
view.parentId && // 有 parentId
topLevelIds.has(view.parentId) && // parentId 指向顶级菜单
(view.type === 0 || view.type === 1) &&
view.service === service
)
console.log(`🔍 [${service}] 顶级视图:`, topLevelViews)
console.log(`🔍 [${service}] 子视图:`, childViews)
// 按 orderNum 排序
topLevelViews.sort((a: any, b: any) => (a.orderNum || 0) - (b.orderNum || 0))
// 分离顶级菜单和子菜单
// 转换为 MenuItem 格式并构建树形结构
const menuItems: MenuItem[] = topLevelViews.map((view: any) => {
const isIframe = view.viewType === 'iframe' || !!view.iframeUrl
let menuUrl = view.url
if (isIframe && view.url && (view.url.startsWith('http://') || view.url.startsWith('https://'))) {
menuUrl = `/${view.viewId}`
}
// 查找子菜单
const children = childViews
.filter((child: any) => child.parentId === view.viewId)
.sort((a: any, b: any) => (a.orderNum || 0) - (b.orderNum || 0))
.map((child: any) => ({
key: child.viewId || child.name,
label: child.name,
icon: child.icon || 'Document',
url: child.url,
type: (child.viewType === 'iframe' || !!child.iframeUrl) ? 'iframe' : 'route' as 'iframe' | 'route'
}))
return {
key: view.viewId || view.name,
label: view.name,
icon: view.icon || 'Grid',
url: menuUrl,
type: isIframe ? 'iframe' : 'route',
children: children.length > 0 ? children : undefined,
expanded: false // 默认折叠
}
})
console.log('✅ 侧边栏菜单:', menuItems)
return menuItems
} catch (error) {
console.error('❌ 加载菜单失败:', error)
return []
}
}
// 菜单配置（从 LocalStorage 加载）
const menuItems = ref<MenuItem[]>(loadMenuFromStorage())
// 前端菜单（非 admin 路由）
const frontendMenuItems = computed(() => {
return menuItems.value.filter(item => !item.url?.includes('/admin'))
})
// 后端菜单（admin 路由）
const backendMenuItems = computed(() => {
return menuItems.value.filter(item => item.url?.includes('/admin'))
})
// 计算总菜单数量（包括子菜单）
const totalMenuCount = computed(() => {
let count = 0
const countItems = (items: MenuItem[]) => {
items.forEach(item => {
count++
if (item.children) {
countItems(item.children)
}
})
}
countItems(menuItems.value)
return count
})
// 当只有一个菜单时隐藏 sidebar
const shouldHideSidebar = computed(() => {
return totalMenuCount.value <= 1
})
// 当前菜单项
const currentMenuItem = computed(() => {
// 在所有菜单中查找（包括子菜单）
const findInItems = (items: MenuItem[]): MenuItem | undefined => {
for (const item of items) {
if (item.key === activeMenu.value) return item
if (item.children) {
const found = findInItems(item.children)
if (found) return found
}
}
return undefined
}
return findInItems(menuItems.value)
})
// 当前 iframe URL（从路由 meta 读取）
const currentIframeUrl = computed(() => {
const meta = route.meta as any
return meta?.iframeUrl || null
})
// 切换分组展开/折叠
const toggleGroup = (group: string) => {
if (expandedGroups.value.has(group)) {
expandedGroups.value.delete(group)
} else {
expandedGroups.value.add(group)
}
}
// 检查分组是否展开
const isGroupExpanded = (group: string) => {
return expandedGroups.value.has(group)
}
// 检查菜单是否激活
const isMenuActive = (item: MenuItem) => {
if (item.url === route.path) return true
if (item.key === activeMenu.value) return true
// 检查子菜单是否激活
if (item.children) {
return item.children.some(child => child.url === route.path || child.key === activeMenu.value)
}
return false
}
// 切换侧边栏
const toggleSidebar = () => {
collapsed.value = !collapsed.value
}
// 切换菜单展开/折叠
const toggleMenu = (item: MenuItem) => {
if (item.children) {
item.expanded = !item.expanded
}
}
// 处理菜单点击
const handleMenuClick = (item: MenuItem) => {
activeMenu.value = item.key || ''
// 所有菜单都通过路由跳转
if (item.url) {
router.push(item.url)
if (item.viewType === 'iframe') {
iframeLoading.value = true
}
}
}
// iframe 加载完成
const handleIframeLoad = () => {
iframeLoading.value = false
}
// 刷新 iframe
const handleRefreshIframe = () => {
if (iframeRef.value) {
iframeLoading.value = true
iframeRef.value.src = iframeRef.value.src
}
}
// 监听服务变化，重新加载菜单
watch(
currentService,
() => {
console.log(`🔄 服务切换到: ${currentService.value}，重新加载菜单`)
menuItems.value = loadMenuFromStorage()
}
)
// 监听路由变化，同步激活菜单
watch(
() => route.path,
(newPath) => {
// 查找匹配的菜单项（route 或 iframe 类型）
const menuItem = menuItems.value.find((item: MenuItem) => item.url === newPath)
if (menuItem) {
activeMenu.value = menuItem.key
} else {
// 如果路径不匹配，尝试通过 route.name 匹配 viewId
const menuByName = menuItems.value.find((item: MenuItem) => item.key === route.name)
if (menuByName) {
activeMenu.value = menuByName.key
}
}
},
{ immediate: true }
)
</script>
<style lang="scss" scoped>
@import url("./SubSidebarLayout.scss");
</style>

2
urbanLifelineWeb/packages/shared/src/layouts/index.ts
View File

@@ -1,2 +1,2 @@
export { default as BlankLayout } from './BlankLayout/BlankLayout.vue'
export { default as AdminSidebarLayout } from './AdminSidebarLayout/AdminSidebarLayout.vue'
export { default as SubSidebarLayout } from './SubSidebarLayout/SubSidebarLayout.vue'

13
urbanLifelineWeb/packages/shared/src/types/enums.ts
View File

@@ -1,10 +1,9 @@
/**
* 菜单类型枚举
* 视图/菜单类型枚举（对应数据库 tb_sys_view.type 字段）
*/
export enum MenuType {
NAVIGATION = 'navigation', // 导航菜单
SIDEBAR = 'sidebar', // 侧边栏菜单
MENU = 'menu', // 普通菜单
PAGE = 'page', // 页面
BUTTON = 'button' // 按钮
export enum ViewType {
NAVBAR = 0, // 导航栏/目录
SIDEBAR = 1, // 侧边栏/菜单
BUTTON = 2, // 按钮（权限控制）
ROUTE = 3 // 空白页/路由页面
}

17
urbanLifelineWeb/packages/shared/src/utils/route/route-generator.ts
View File

@@ -8,18 +8,11 @@
import type { RouteRecordRaw } from 'vue-router'
import type { TbSysViewDTO } from '@/types'
import { ViewType } from '@/types'
// 为了代码可读性，创建类型别名
type SysMenu = TbSysViewDTO
// 视图类型常量（对应后端的 type 字段）
const ViewType = {
NAVBAR: 0, // 导航栏
SIDEBAR: 1, // 侧边栏
BUTTON: 2, // 按钮
ROUTE: 3 // 空白页（路由页面）
} as const
/**
* 路由生成器配置
*/
@@ -322,26 +315,26 @@ function convertRoutesToMenus(routes: RouteRecordRaw[]): SysMenu[] {
routes.forEach(route => {
if (route.children && route.children.length > 0) {
route.children.forEach(child => {
if (child.meta?.menuType !== undefined) {
if (child.meta?.type !== undefined) {
const menu: SysMenu = {
viewId: child.name as string || child.path.replace(/\//g, '-'),
parentId: '0',
name: child.meta.title as string || child.name as string,
url: route.path,
type: child.meta.menuType as number,
type: child.meta.type as number,
orderNum: (child.meta.orderNum as number) || -1,
component: '__STATIC_ROUTE__',
}
menus.push(menu)
}
})
} else if (route.meta?.menuType !== undefined) {
} else if (route.meta?.type !== undefined) {
const menu: SysMenu = {
viewId: route.name as string || route.path.replace(/\//g, '-'),
parentId: '0',
name: route.meta.title as string || route.name as string,
url: route.path,
type: route.meta.menuType as number,
type: route.meta.type as number,
orderNum: (route.meta.orderNum as number) || -1,
component: '__STATIC_ROUTE__',
}

13
urbanLifelineWeb/packages/workcase/package.json
View File

@@ -9,19 +9,20 @@
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.5.13",
"vue-router": "^4.5.0",
"pinia": "^2.2.8",
"element-plus": "^2.8.6",
"@element-plus/icons-vue": "^2.3.2",
"@vueuse/core": "^11.3.0",
"axios": "^1.7.9"
"axios": "^1.7.9",
"element-plus": "^2.8.6",
"lucide-vue-next": "^0.561.0",
"pinia": "^2.2.8",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"devDependencies": {
"@module-federation/vite": "^1.9.3",
"@types/node": "^22.0.0",
"@vitejs/plugin-vue": "^5.2.1",
"@vitejs/plugin-vue-jsx": "^4.1.1",
"@module-federation/vite": "^1.9.3",
"typescript": "^5.7.2",
"vite": "^6.0.3",
"vue-tsc": "^2.2.0"

BIN
urbanLifelineWeb/packages/workcase/public/logo.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 400 B

283
urbanLifelineWeb/packages/workcase/src/layouts/SidebarLayout/SidebarLayout.scss
View File

@@ -1,13 +1,20 @@
// ==================== 品牌色变量 ====================
$brand-color: #0055AA;
$brand-color-light: #EBF5FF;
$brand-color-hover: #004488;
.sidebar-layout {
display: flex;
width: 100%;
height: 100vh;
overflow: hidden;
background: #fff;
font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
// ==================== 侧边栏（内层子导航样式）====================
// ==================== 1级侧边栏（全局导航样式）====================
.sidebar {
width: 180px;
width: 256px;
height: 100%;
background: #fff;
display: flex;
@@ -15,13 +22,15 @@
color: #333;
flex-shrink: 0;
transition: width 0.3s ease;
border-right: 1px solid #e4e7ed;
border-right: 1px solid #f1f5f9;
z-index: 50;
&.collapsed {
width: 64px;
width: 80px;
overflow: visible;
.sidebar-header {
padding: 16px 12px;
padding: 16px;
justify-content: center;
.logo {
@@ -29,65 +38,124 @@
}
.collapse-btn {
position: static;
margin-left: 0;
display: none;
}
}
.nav-item {
justify-content: center;
padding: 12px;
border-radius: 8px;
margin: 0 12px;
span {
display: none;
}
// 折叠状态下的 tooltip
&:hover::after {
content: attr(data-label);
position: absolute;
left: calc(100% + 12px);
top: 50%;
transform: translateY(-50%);
background: #1e293b;
color: #fff;
padding: 8px 12px;
border-radius: 8px;
font-size: 12px;
white-space: nowrap;
z-index: 100;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
}
.user-section {
justify-content: center;
padding: 16px 12px;
padding: 16px;
.user-info {
display: none;
}
.user-more {
display: none;
}
}
.nav-divider {
margin: 8px 16px;
}
}
}
// 侧边栏头部
.sidebar-header {
padding: 16px 20px;
border-bottom: 1px solid #e4e7ed;
height: 64px;
padding: 0 16px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
}
.collapse-btn {
width: 28px;
height: 28px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
border-radius: 8px;
cursor: pointer;
color: #909399;
color: #94a3b8;
transition: all 0.2s;
&:hover {
background: rgba(124, 58, 237, 0.1);
color: #7c3aed;
background: #f1f5f9;
color: #64748b;
}
}
.logo {
display: flex;
align-items: center;
gap: 10px;
gap: 8px;
cursor: pointer;
.logo-img {
width: 36px;
height: 36px;
border-radius: 6px;
width: 32px;
height: 32px;
border-radius: 8px;
object-fit: contain;
}
.logo-text {
font-size: 16px;
font-weight: 600;
color: #303133;
color: #1e293b;
letter-spacing: -0.02em;
}
}
// 新建按钮
.new-chat-btn {
margin: 0 16px 8px;
.el-button {
width: 100%;
height: 44px;
background: $brand-color-light;
border: none;
border-radius: 12px;
color: $brand-color;
font-weight: 600;
font-size: 14px;
transition: all 0.2s;
&:hover {
background: darken($brand-color-light, 5%);
}
}
}
@@ -95,65 +163,143 @@
.nav-menu {
flex: 1;
overflow-y: auto;
padding: 16px 0;
padding: 8px 12px;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
}
.nav-section {
padding: 0;
}
.nav-item {
// 导航分隔线
.nav-divider {
height: 1px;
background: #f1f5f9;
margin: 8px 4px;
}
// 导航分组标题
.nav-group-title {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
margin-bottom: 0;
justify-content: space-between;
padding: 8px 12px;
margin-bottom: 4px;
color: #94a3b8;
font-size: 12px;
font-weight: 500;
user-select: none;
}
.nav-item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
margin-bottom: 2px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
color: #606266;
color: #64748b;
font-size: 14px;
font-weight: 500;
&:hover {
background: rgba(124, 58, 237, 0.1);
color: #7c3aed;
background: $brand-color-light;
color: $brand-color;
}
&.active {
background: rgba(124, 58, 237, 0.15);
color: #7c3aed;
border-right: 3px solid #7c3aed;
background: $brand-color;
color: #fff;
box-shadow: 0 4px 12px rgba($brand-color, 0.25);
font-weight: 500;
.el-icon {
color: #fff;
}
}
.el-icon {
font-size: 16px;
font-size: 18px;
flex-shrink: 0;
transition: color 0.2s;
}
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.01em;
}
}
// 用户信息
.user-section {
padding: 16px 20px;
border-top: 1px solid #e4e7ed;
// 添加智能体按钮
.add-agent-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
margin-bottom: 2px;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
transition: all 0.2s ease;
color: #94a3b8;
font-size: 14px;
&:hover {
background: rgba(124, 58, 237, 0.05);
background: #f8fafc;
color: #64748b;
.add-icon {
border-color: #64748b;
}
}
.add-icon {
width: 20px;
height: 20px;
border: 1px dashed #94a3b8;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s;
.el-icon {
font-size: 12px;
}
}
}
// 用户信息区域
.user-section {
padding: 16px;
border-top: 1px solid #f1f5f9;
background: #f8fafc;
cursor: pointer;
transition: background 0.2s;
user-select: none;
&:hover {
background: #f1f5f9;
.user-name {
color: $brand-color;
}
}
.user-info-wrapper {
@@ -163,16 +309,55 @@
}
.user-avatar {
position: relative;
flex-shrink: 0;
img, .el-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
box-shadow: 0 0 0 2px #fff;
object-fit: cover;
background: #fff;
padding: 2px;
}
// 在线状态指示器
&::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
background: #22c55e;
border: 2px solid #fff;
border-radius: 50%;
}
}
.user-info {
flex: 1;
min-width: 0;
}
.user-name {
font-size: 14px;
font-weight: 500;
color: #303133;
color: #374151;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.2s;
}
.user-more {
color: #94a3b8;
transition: color 0.2s;
&:hover {
color: #64748b;
}
}
}
@@ -181,7 +366,7 @@
flex: 1;
height: 100%;
overflow: hidden;
background: #fff;
background: #f8fafc;
position: relative;
}
@@ -200,15 +385,15 @@
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e5e7eb;
background: #fafafa;
border-bottom: 1px solid #e2e8f0;
background: #fff;
flex-shrink: 0;
}
.iframe-title {
font-size: 16px;
font-weight: 600;
color: #333;
color: #1e293b;
}
.content-iframe {
@@ -228,7 +413,7 @@
flex-direction: column;
align-items: center;
gap: 12px;
color: #7c3aed;
color: $brand-color;
font-size: 14px;
z-index: 10;
@@ -240,15 +425,15 @@
// ==================== 响应式 ====================
@media (max-width: 768px) {
.sidebar {
width: 64px;
width: 80px;
&:not(.collapsed) {
width: 180px;
width: 256px;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
}
}

37
urbanLifelineWeb/packages/workcase/src/layouts/SidebarLayout/SidebarLayout.vue
View File

@@ -8,10 +8,8 @@
<span v-if="!collapsed" class="logo-text">城市生命线</span>
</div>
<div class="collapse-btn" @click="toggleSidebar">
<el-icon>
<DArrowLeft v-if="!collapsed" />
<DArrowRight v-else />
</el-icon>
<ChevronLeft v-if="!collapsed" :size="18" />
<ChevronRight v-else :size="18" />
</div>
</div>
@@ -24,7 +22,7 @@
:class="{ active: activeMenu === item.key }"
@click="handleMenuClick(item)"
>
<el-icon><component :is="item.icon" /></el-icon>
<component :is="item.icon" :size="18" />
<span v-if="!collapsed">{{ item.label }}</span>
</div>
</div>
@@ -54,7 +52,7 @@
@load="handleIframeLoad"
/>
<div v-if="iframeLoading" class="iframe-loading">
<el-icon class="is-loading"><Loading /></el-icon>
<Loader :size="20" class="is-loading" />
<span>加载中...</span>
</div>
</div>
@@ -69,19 +67,22 @@
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
ChatDotRound,
Grid,
Connection,
Document,
Service,
DArrowLeft,
DArrowRight,
MessageCircle,
LayoutGrid,
Workflow,
FileText,
Headphones,
ChevronLeft,
ChevronRight,
User,
Setting,
SwitchButton,
Refresh,
Loading
} from '@element-plus/icons-vue'
Settings,
LogOut,
RefreshCw,
Loader
} from 'lucide-vue-next'
// el-button 图标需要传入组件
const Refresh = RefreshCw
import { ElMessage } from 'element-plus'
import type { MenuItem } from 'shared/types'

2
urbanLifelineWeb/packages/workcase/src/layouts/index.ts
View File

@@ -1,4 +1,4 @@
export { default as SidebarLayout } from './SidebarLayout/SidebarLayout.vue'
// BlankLayout从shared导入
export { BlankLayout, AdminSidebarLayout } from 'shared/layouts';
export { BlankLayout, SubSidebarLayout } from 'shared/layouts';

83
urbanLifelineWeb/packages/workcase/src/main.ts
View File

@@ -1,7 +1,6 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import './assets/css/common.scss'
@@ -12,6 +11,82 @@ import { AES_SECRET_KEY } from './config'
// @ts-ignore
import { initAesEncrypt } from 'shared/utils'
// 导入需要的 Lucide 图标（用于动态组件）
import {
MessageCircle,
LayoutGrid,
Workflow,
FileText,
Headphones,
BarChart3,
Users,
User,
Settings,
Home,
Ticket,
Bot,
ScrollText,
Monitor,
Server,
ChevronDown,
ChevronRight,
ChevronLeft,
PanelLeftClose,
PanelLeftOpen,
RefreshCw,
Loader,
LogOut,
Plus,
Trash2,
Clock,
Search,
AlertTriangle,
Wrench,
Paperclip,
Send,
History,
X,
Menu
} from 'lucide-vue-next'
// Lucide 图标映射（用于全局注册）
const lucideIcons = {
MessageCircle,
LayoutGrid,
Workflow,
FileText,
Headphones,
BarChart3,
Users,
User,
Settings,
Home,
Ticket,
Bot,
ScrollText,
Monitor,
Server,
ChevronDown,
ChevronRight,
ChevronLeft,
PanelLeftClose,
PanelLeftOpen,
RefreshCw,
Loader,
LogOut,
Plus,
Trash2,
Clock,
Search,
AlertTriangle,
Wrench,
Paperclip,
Send,
History,
X,
Menu
}
// 异步初始化应用
async function initApp() {
// 1. 初始化 AES 加密工具
@@ -32,9 +107,9 @@ async function initApp() {
// 4. 注册 Element Plus
app.use(ElementPlus)
// 5. 注册所有 Element Plus 图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
// 5. 注册 Lucide 图标（用于动态组件）
for (const [name, component] of Object.entries(lucideIcons)) {
app.component(name, component)
}
// 6. 注册路由

4
urbanLifelineWeb/packages/workcase/src/router/dynamicRoute.ts
View File

@@ -18,7 +18,7 @@ import {
import type { TbSysViewDTO } from 'shared/types'
import type { RouteRecordRaw } from 'vue-router'
import router from './index'
import { SidebarLayout, BlankLayout, AdminSidebarLayout } from '@/layouts'
import { SidebarLayout, BlankLayout, SubSidebarLayout } from '@/layouts'
// Workcase 布局组件映射
const workcaseLayoutMap: Record<string, () => Promise<any>> = {
@@ -26,7 +26,7 @@ const workcaseLayoutMap: Record<string, () => Promise<any>> = {
'BlankLayout': () => Promise.resolve({ default: BlankLayout }),
'NavigationLayout': () => Promise.resolve({ default: SidebarLayout }),
'BasicLayout': () => Promise.resolve({ default: SidebarLayout }),
'AdminSidebarLayout': () => Promise.resolve({ default: AdminSidebarLayout })
'SubSidebarLayout': () => Promise.resolve({ default: SubSidebarLayout })
}
// 视图组件加载器

2
urbanLifelineWeb/packages/workcase/src/router/index.ts
View File

@@ -195,7 +195,7 @@ function getFirstAdminRoute(): string | null {
const adminViews = userViews.filter((view: any) =>
view.service === 'workcase' &&
view.url?.startsWith('/admin') &&
view.layout === 'AdminSidebarLayout' &&
view.layout === 'SubSidebarLayout' &&
!view.parentId && // 顶级菜单
view.url // 必须有 url 字段
)

2
urbanLifelineWeb/packages/workcase/src/types/shared.d.ts vendored
View File

@@ -189,5 +189,5 @@ declare module 'shared/layouts' {
import { DefineComponent } from 'vue'
export const BlankLayout: DefineComponent<{}, {}, any>
export const AdminSidebarLayout: DefineComponent<{}, {}, any>
export const SubSidebarLayout: DefineComponent<{}, {}, any>
}

360
urbanLifelineWeb/packages/workcase/src/views/admin/workcase/WorkcaseView.scss
View File

@@ -0,0 +1,360 @@
// ==================== 品牌色变量 ====================
$brand-color: #0055AA;
$brand-color-light: #EBF5FF;
$brand-color-hover: #004488;
// ==================== 工单管理页面样式 ====================
.workcase-container {
display: flex;
flex-direction: column;
gap: 24px;
padding: 0;
}
// 筛选卡片
.filter-card {
background: #fff;
border-radius: 16px;
border: 1px solid #f1f5f9;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
:deep(.el-card__body) {
padding: 20px;
}
}
.ticket-filters {
display: flex;
flex-direction: column;
gap: 16px;
@media (min-width: 1024px) {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
// 状态标签组
:deep(.el-radio-group) {
display: inline-flex;
background: #f1f5f9;
padding: 4px;
border-radius: 8px;
.el-radio-button {
.el-radio-button__inner {
border: none;
background: transparent;
color: #64748b;
font-weight: 500;
padding: 8px 16px;
border-radius: 6px;
box-shadow: none;
&:hover {
color: #1e293b;
}
}
&.is-active {
.el-radio-button__inner {
background: $brand-color;
color: #fff;
box-shadow: 0 2px 8px rgba($brand-color, 0.25);
}
}
}
}
.filter-right {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
// 下拉选择框样式
:deep(.el-select) {
.el-input__wrapper {
border-radius: 8px;
border: 1px solid #e2e8f0;
box-shadow: none;
&:hover {
border-color: $brand-color;
}
&.is-focus {
border-color: $brand-color;
box-shadow: 0 0 0 2px rgba($brand-color, 0.1);
}
}
}
// 搜索输入框
:deep(.el-input) {
.el-input__wrapper {
border-radius: 8px;
border: 1px solid #e2e8f0;
box-shadow: none;
&:hover {
border-color: $brand-color;
}
&.is-focus {
border-color: $brand-color;
box-shadow: 0 0 0 2px rgba($brand-color, 0.1);
}
}
}
// 工单列表卡片
:deep(.el-card) {
border-radius: 16px;
border: 1px solid #f1f5f9;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
// 表格样式
:deep(.el-table) {
--el-table-header-bg-color: #fff;
--el-table-row-hover-bg-color: rgba(248, 250, 252, 0.5);
thead {
th {
background: #fff;
border-bottom: 1px solid #f1f5f9;
color: #94a3b8;
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 12px 16px;
}
}
tbody {
tr {
transition: background 0.15s;
&:hover {
background: rgba(248, 250, 252, 0.5);
}
td {
padding: 16px;
border-bottom: 1px solid #f8fafc;
}
}
}
}
// 工单号链接
.ticket-no {
color: $brand-color;
font-weight: 600;
cursor: pointer;
transition: color 0.2s;
&:hover {
color: $brand-color-hover;
text-decoration: underline;
}
}
// 客户信息
.customer-info {
display: flex;
flex-direction: column;
gap: 4px;
.name {
font-weight: 600;
color: #1e293b;
font-size: 14px;
}
.phone {
font-size: 12px;
color: #94a3b8;
}
}
// 未指派标签
.unassigned {
color: #94a3b8;
font-style: italic;
}
// 标签样式覆盖
:deep(.el-tag) {
border-radius: 9999px;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
border: none;
&.el-tag--warning {
background: #fef3c7;
color: #d97706;
}
&.el-tag--info {
background: #dbeafe;
color: #2563eb;
}
&.el-tag--success {
background: #dcfce7;
color: #16a34a;
}
&.el-tag--danger {
background: #fee2e2;
color: #dc2626;
}
}
// 操作按钮
:deep(.el-button--link) {
padding: 4px 8px;
&.el-button--primary {
color: $brand-color;
&:hover {
color: $brand-color-hover;
}
}
&.el-button--warning {
color: #f59e0b;
&:hover {
color: #d97706;
}
}
&.el-button--success {
color: #22c55e;
&:hover {
color: #16a34a;
}
}
}
// 分页样式
.table-pagination {
padding: 16px 20px;
display: flex;
justify-content: flex-end;
border-top: 1px solid #f1f5f9;
background: #fff;
}
:deep(.el-pagination) {
.el-pager {
li {
border-radius: 6px;
&.is-active {
background: $brand-color;
color: #fff;
}
}
}
.btn-prev,
.btn-next {
border-radius: 6px;
}
}
// 弹窗样式
:deep(.el-dialog) {
border-radius: 16px;
overflow: hidden;
.el-dialog__header {
padding: 20px 24px;
border-bottom: 1px solid #f1f5f9;
margin-right: 0;
.el-dialog__title {
font-size: 18px;
font-weight: 600;
color: #1e293b;
}
}
.el-dialog__body {
padding: 24px;
}
.el-dialog__footer {
padding: 16px 24px;
border-top: 1px solid #f1f5f9;
}
}
// 表单样式
:deep(.el-form) {
.el-form-item__label {
color: #64748b;
font-weight: 500;
}
.el-input__wrapper,
.el-textarea__inner {
border-radius: 8px;
}
}
// 主按钮样式
:deep(.el-button--primary) {
background: $brand-color;
border-color: $brand-color;
border-radius: 8px;
font-weight: 500;
&:hover {
background: $brand-color-hover;
border-color: $brand-color-hover;
}
}
// 响应式
@media (max-width: 768px) {
.workcase-container {
gap: 16px;
}
.ticket-filters {
flex-direction: column;
align-items: stretch;
}
.filter-right {
flex-direction: column;
align-items: stretch;
:deep(.el-select),
:deep(.el-input) {
width: 100% !important;
}
}
:deep(.el-radio-group) {
display: flex;
flex-wrap: wrap;
.el-radio-button {
flex: 1;
min-width: fit-content;
}
}
}

29
urbanLifelineWeb/packages/workcase/src/views/admin/workcase/WorkcaseView.vue
View File

@@ -219,32 +219,5 @@ const createTicket = () => {
</script>
<style lang="scss" scoped>
@import url("./WorkcaseView.scss");
.workcase-container {
display: flex;
flex-direction: column;
gap: 16px;
}
.customer-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.customer-info .name {
font-weight: 500;
color: #303133;
}
.customer-info .phone {
font-size: 12px;
color: #909399;
}
.ticket-no {
color: #409eff;
font-weight: 500;
}
@import "./WorkcaseView.scss";
</style>

648
urbanLifelineWeb/packages/workcase/src/views/public/AIChat/AIChatView.scss
View File

@@ -1,247 +1,569 @@
.ai-chat-system {
display: flex;
height: 100vh;
background: #f5f7fa;
// 品牌色
$brand-color: #0055AA;
$brand-color-light: #EBF5FF;
$brand-color-hover: #004488;
// 左侧边栏
.chat-sidebar {
width: 200px;
.ai-chat-container {
display: flex;
height: 100%;
background: #f8fafc;
position: relative;
overflow: hidden;
font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
// ==================== 折叠状态的历史栏 ====================
.history-collapsed {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 48px;
background: #fff;
border-right: 1px solid #e4e7ed;
border-right: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 0;
z-index: 10;
.sidebar-header {
padding: 20px 16px;
border-bottom: 1px solid #e4e7ed;
h1 {
font-size: 16px;
margin: 0;
color: #303133;
}
}
.nav-section {
padding: 12px 8px;
.nav-item.new-chat {
background: #409eff;
color: #fff;
.history-toggle-btn {
padding: 8px;
color: #64748b;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
margin-bottom: 8px;
&:hover {
background: #66b1ff;
color: $brand-color;
background: $brand-color-light;
}
}
.nav-item {
.history-icons {
flex: 1;
overflow-y: auto;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 10px 12px;
margin-bottom: 2px;
border-radius: 6px;
gap: 4px;
padding: 8px 0;
}
.history-icon-btn {
padding: 8px;
color: #94a3b8;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
color: #606266;
transition: all 0.2s;
&:hover {
background: #f5f7fa;
color: #64748b;
background: #f1f5f9;
}
&.active {
background: #ecf5ff;
color: #409eff;
color: $brand-color;
background: $brand-color-light;
}
}
span {
.expand-btn {
padding: 8px;
color: #94a3b8;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
&:hover {
color: #64748b;
background: #f1f5f9;
}
}
}
// ==================== 展开时的关闭按钮 ====================
.history-close-btn {
position: absolute;
left: 256px;
top: 50%;
transform: translateY(-50%);
z-index: 20;
background: #fff;
border: 1px solid #e2e8f0;
border-left: none;
border-radius: 0 8px 8px 0;
padding: 8px;
cursor: pointer;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
transition: all 0.2s;
color: #64748b;
&:hover {
background: #f8fafc;
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
}
}
// ==================== 历史对话侧边栏 ====================
.history-sidebar {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
background: #fff;
border-right: 1px solid #e2e8f0;
z-index: 10;
transition: all 0.3s ease;
overflow: hidden;
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
&.open {
width: 256px;
}
.sidebar-inner {
width: 256px;
height: 100%;
display: flex;
flex-direction: column;
}
.sidebar-header {
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
border-bottom: 1px solid #f1f5f9;
.title {
font-weight: 500;
color: #1e293b;
}
.new-chat-btn {
padding: 6px;
color: #64748b;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
&:hover {
color: $brand-color;
background: $brand-color-light;
}
}
}
.conversation-list {
flex: 1;
overflow-y: auto;
padding: 8px;
.empty-tip {
padding: 16px;
text-align: center;
color: #94a3b8;
font-size: 14px;
}
}
.conversation-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 12px;
margin-bottom: 4px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: #f8fafc;
.delete-btn {
opacity: 1;
}
}
.sidebar-footer {
margin-top: auto;
padding: 16px;
text-align: center;
&.active {
background: $brand-color-light;
color: $brand-color;
}
.conv-icon {
flex-shrink: 0;
margin-top: 2px;
}
.conv-info {
flex: 1;
min-width: 0;
}
.conv-title {
font-size: 14px;
font-weight: 500;
color: #374151;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.conv-time {
font-size: 12px;
color: #c0c4cc;
border-top: 1px solid #e4e7ed;
color: #94a3b8;
margin-top: 2px;
}
.delete-btn {
padding: 4px;
color: #94a3b8;
background: transparent;
border: none;
border-radius: 4px;
cursor: pointer;
opacity: 0;
transition: all 0.2s;
&:hover {
color: #ef4444;
}
}
}
}
// 主内容区
// ==================== 主聊天区域 ====================
.chat-main {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: #f5f7fa;
height: 100%;
transition: all 0.3s ease;
margin-left: 48px;
.chat-header {
padding: 24px 32px;
background: #fff;
border-bottom: 1px solid #e4e7ed;
h1 {
font-size: 24px;
margin: 0 0 8px 0;
color: #303133;
}
.subtitle {
font-size: 14px;
color: #909399;
margin: 0;
&.sidebar-open {
margin-left: 256px;
}
}
.chat-area {
// ==================== 消息容器 ====================
.messages-container {
flex: 1;
background: #fff;
margin: 24px 32px;
border-radius: 8px;
display: flex;
flex-direction: column;
overflow: hidden;
overflow-y: auto;
}
.ai-info {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid #e4e7ed;
.ai-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: #f0f2f5;
// ==================== 空状态 ====================
.empty-state {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
padding: 32px;
.empty-content {
text-align: center;
max-width: 600px;
}
.ai-details {
flex: 1;
}
.ai-name {
font-size: 16px;
font-weight: 600;
color: #303133;
margin-bottom: 4px;
}
.ai-status {
font-size: 12px;
color: #67c23a;
.logo-wrapper {
width: 80px;
height: 80px;
background: linear-gradient(135deg, $brand-color 0%, $brand-color-hover 100%);
border-radius: 20px;
display: flex;
align-items: center;
gap: 6px;
justify-content: center;
margin: 0 auto 24px;
box-shadow: 0 8px 24px rgba($brand-color, 0.3);
.status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #67c23a;
animation: pulse 2s infinite;
}
}
}
.messages {
flex: 1;
padding: 20px;
overflow-y: auto;
background: #f5f7fa;
.message {
display: flex;
margin-bottom: 16px;
&.user {
justify-content: flex-end;
.message-content {
background: #409eff;
.logo-icon {
font-size: 40px;
color: #fff;
}
}
.message-content {
max-width: 60%;
padding: 12px 16px;
background: #fff;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
.title {
font-size: 24px;
font-weight: 700;
color: #1e293b;
margin: 0 0 8px;
}
.message-text {
.desc {
font-size: 14px;
color: #64748b;
margin: 0 0 32px;
line-height: 1.6;
}
.quick-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
max-width: 480px;
margin: 0 auto;
}
.quick-card {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
text-align: left;
&:hover {
border-color: $brand-color;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.quick-icon {
width: 36px;
height: 36px;
background: $brand-color-light;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: $brand-color;
transition: all 0.2s;
}
&:hover .quick-icon {
background: $brand-color;
color: #fff;
}
.quick-label {
font-size: 14px;
font-weight: 500;
color: #374151;
}
}
}
// ==================== 消息列表 ====================
.messages-list {
max-width: 768px;
margin: 0 auto;
padding: 24px 16px;
.message-row {
display: flex;
gap: 12px;
margin-bottom: 24px;
&.user {
flex-direction: row-reverse;
.message-bubble {
background: $brand-color;
color: #fff;
border-radius: 16px 16px 4px 16px;
.message-time {
text-align: right;
color: rgba(255, 255, 255, 0.7);
}
}
}
}
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
&.user {
background: $brand-color;
color: #fff;
}
&.assistant {
background: linear-gradient(135deg, $brand-color 0%, $brand-color-hover 100%);
color: #fff;
}
}
.message-bubble {
max-width: 80%;
padding: 12px 16px;
border-radius: 16px 16px 16px 4px;
background: #fff;
border: 1px solid #f1f5f9;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
.message-text {
font-size: 14px;
line-height: 1.6;
white-space: pre-wrap;
word-wrap: break-word;
}
.message-time {
font-size: 11px;
color: #c0c4cc;
margin-top: 6px;
font-size: 12px;
color: #94a3b8;
margin-top: 8px;
}
}
}
.quick-actions {
display: flex;
gap: 12px;
padding: 12px 20px;
border-top: 1px solid #e4e7ed;
border-bottom: 1px solid #e4e7ed;
// ==================== 快捷命令栏 ====================
.quick-bar {
padding: 8px 16px;
border-top: 1px solid #f1f5f9;
background: #fff;
.quick-btn {
.quick-bar-inner {
max-width: 768px;
margin: 0 auto;
display: flex;
gap: 8px;
overflow-x: auto;
&::-webkit-scrollbar {
display: none;
}
}
.quick-pill {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: #f5f7fa;
border: 1px solid #e4e7ed;
padding: 6px 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 20px;
font-size: 12px;
color: #64748b;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s;
&:hover {
border-color: $brand-color;
background: $brand-color-light;
color: $brand-color;
}
.el-icon {
color: $brand-color;
}
}
}
// ==================== 输入区域 ====================
.input-area {
padding: 24px;
background: #f8fafc;
.input-wrapper {
max-width: 768px;
margin: 0 auto;
}
.input-card {
background: #fff;
border-radius: 16px;
font-size: 13px;
color: #606266;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
overflow: hidden;
}
.input-row {
padding: 12px 16px;
}
.chat-textarea {
width: 100%;
border: none;
outline: none;
resize: none;
font-size: 14px;
color: #374151;
background: transparent;
line-height: 1.5;
max-height: 120px;
&::placeholder {
color: #94a3b8;
}
}
.toolbar-row {
padding: 12px 16px;
display: flex;
justify-content: flex-end;
border-top: 1px solid #f8fafc;
}
.toolbar-actions {
display: flex;
align-items: center;
gap: 8px;
}
.tool-btn {
padding: 8px;
color: #94a3b8;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: #ecf5ff;
border-color: #409eff;
color: #409eff;
}
color: #64748b;
background: #f1f5f9;
}
}
.input-area {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: #fff;
.send-btn {
padding: 10px;
background: #e2e8f0;
color: #94a3b8;
border: none;
border-radius: 12px;
cursor: not-allowed;
transition: all 0.2s;
.attach-icon {
font-size: 20px;
color: #909399;
&.active {
background: $brand-color;
color: #fff;
cursor: pointer;
}
}
box-shadow: 0 2px 8px rgba($brand-color, 0.3);
&:hover {
background: $brand-color-hover;
}
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
.disclaimer {
text-align: center;
font-size: 12px;
color: #94a3b8;
margin: 12px 0 0;
}
}

404
urbanLifelineWeb/packages/workcase/src/views/public/AIChat/AIChatView.vue
View File

@@ -1,191 +1,367 @@
<template>
<div class="ai-chat-system">
<!-- 左右布局 -->
<!-- 左侧边栏 -->
<aside class="chat-sidebar">
<!-- 标头 -->
<div class="ai-chat-container">
<!-- 折叠状态的历史栏 -->
<div v-if="!isHistoryOpen" class="history-collapsed">
<button class="history-toggle-btn" @click="toggleHistory" title="展开历史对话">
<Clock :size="20" />
</button>
<div class="history-icons">
<button
v-for="conv in chatHistory.slice(0, 8)"
:key="conv.id"
@click="loadChat(conv.id); toggleHistory()"
class="history-icon-btn"
:class="{ active: currentChatId === conv.id }"
:title="conv.title"
>
<MessageCircle :size="16" />
</button>
</div>
<button class="expand-btn" @click="toggleHistory" title="展开历史对话">
<ChevronRight :size="18" />
</button>
</div>
<!-- 展开时的关闭按钮 -->
<button
v-if="isHistoryOpen"
class="history-close-btn"
@click="toggleHistory"
>
<ChevronLeft :size="18" />
</button>
<!-- 历史对话侧边栏 -->
<aside
class="history-sidebar"
:class="{ open: isHistoryOpen }"
>
<div class="sidebar-inner">
<!-- 头部 -->
<div class="sidebar-header">
<h1>智能客服系统</h1>
<span class="title">历史对话</span>
<button class="new-chat-btn" @click="startNewChat" title="新建对话">
<Plus :size="18" />
</button>
</div>
<!-- 新增对话按钮 -->
<div class="nav-section">
<div class="nav-item new-chat" @click="startNewChat">
<ElIcon><Plus /></ElIcon>
<span>新建对话</span>
<!-- 对话列表 -->
<div class="conversation-list">
<div v-if="chatHistory.length === 0" class="empty-tip">
暂无历史对话
</div>
<div
v-for="conv in chatHistory"
:key="conv.id"
@click="loadChat(conv.id)"
class="conversation-item"
:class="{ active: currentChatId === conv.id }"
>
<MessageCircle :size="16" class="conv-icon" />
<div class="conv-info">
<div class="conv-title">{{ conv.title }}</div>
<div class="conv-time">{{ conv.time }}</div>
</div>
<button
class="delete-btn"
@click.stop="deleteConversation(conv.id)"
title="删除"
>
<Trash2 :size="14" />
</button>
</div>
</div>
<!-- 历史对话列表 -->
<ChatHistory
:chatHistory="chatHistory"
:currentChatId="currentChatId"
@loadChat="loadChat"
/>
<div class="sidebar-footer">
v2.1.0 (Build 2025)
</div>
</aside>
<!-- 主内容区 -->
<div class="chat-main">
<!-- header -->
<div class="chat-header">
<h1>泰豪小电-对内</h1>
<p class="subtitle">Real-time Support Agent</p>
<!-- 主聊天区域 -->
<main class="chat-main" :class="{ 'sidebar-open': isHistoryOpen }">
<!-- 消息区域 -->
<div ref="messagesRef" class="messages-container">
<!-- 空状态 -->
<div v-if="messages.length === 0" class="empty-state">
<div class="empty-content">
<!-- Logo -->
<div class="logo-wrapper">
<Headphones :size="40" class="logo-icon" />
</div>
<h1 class="title">泰豪小电</h1>
<p class="desc">电源设备智能客服助手，为您提供设备操作、故障排查、维修服务等专业支持</p>
<!-- 聊天区域 -->
<div class="chat-area">
<!-- 智能体信息 助手 -->
<div class="ai-info">
<div class="ai-avatar">🤖</div>
<div class="ai-details">
<div class="ai-name">泰豪智能服务助手</div>
<div class="ai-status">
<span class="status-dot"></span>
基于 RAG 知识库 · 24小时在线
<!-- 快捷命令 -->
<div class="quick-grid">
<button
v-for="cmd in quickCommands"
:key="cmd.label"
@click="handleQuickCommand(cmd.query)"
class="quick-card"
>
<div class="quick-icon">
<component :is="cmd.icon" :size="18" />
</div>
<span class="quick-label">{{ cmd.label }}</span>
</button>
</div>
</div>
</div>
<!-- 聊天记录 -->
<div class="messages" ref="messagesRef">
<!-- 消息列表 -->
<div v-else class="messages-list">
<div
v-for="msg in messages"
:key="msg.id"
class="message"
class="message-row"
:class="msg.role"
>
<div class="message-content">
<div class="message-text">{{ msg.text }}</div>
<!-- 头像 -->
<div class="avatar" :class="msg.role">
<User v-if="msg.role === 'user'" :size="16" />
<Headphones v-else :size="16" />
</div>
<!-- 消息内容 -->
<div class="message-bubble" :class="msg.role">
<p class="message-text">{{ msg.text }}</p>
<div class="message-time">{{ msg.time }}</div>
</div>
</div>
</div>
<!-- footer -->
<!-- 默认提示词 -->
<div class="quick-actions">
<button class="quick-btn" @click="quickReply('设备操作手册')">
<ElIcon><Document /></ElIcon>
设备操作手册
</button>
<button class="quick-btn" @click="quickReply('故障排查指南')">
<ElIcon><Warning /></ElIcon>
故障排查指南
</button>
<button class="quick-btn" @click="quickReply('维保服务规范')">
<ElIcon><List /></ElIcon>
维保服务规范
</button>
<button class="quick-btn" @click="quickReply('技术参数查询')">
<ElIcon><Search /></ElIcon>
技术参数查询
</button>
</div>
<!-- 输入框 -->
<!-- 快捷命令栏（有消息时显示） -->
<div v-if="messages.length > 0" class="quick-bar">
<div class="quick-bar-inner">
<button
v-for="cmd in quickCommands"
:key="cmd.label"
@click="handleQuickCommand(cmd.query)"
class="quick-pill"
>
<component :is="cmd.icon" :size="18" />
<span>{{ cmd.label }}</span>
</button>
</div>
</div>
<!-- 输入区域 -->
<div class="input-area">
<ElIcon class="attach-icon"><Paperclip /></ElIcon>
<ElInput
<div class="input-wrapper">
<!-- 输入卡片 -->
<div class="input-card">
<!-- 输入框 -->
<div class="input-row">
<textarea
ref="textareaRef"
v-model="inputText"
placeholder="描述您的问题 (如: 发电机启动失败异常)..."
@keyup.enter="sendMessage"
@input="adjustHeight"
@keydown="handleKeyDown"
placeholder="请输入您的问题，例如：电源模块过热报警怎么处理..."
rows="1"
class="chat-textarea"
/>
<ElButton type="primary" :icon="Promotion" circle @click="sendMessage" />
</div>
<!-- 工具栏 -->
<div class="toolbar-row">
<div class="toolbar-actions">
<button class="tool-btn" title="添加附件">
<Paperclip :size="18" />
</button>
<button
class="send-btn"
:class="{ active: inputText.trim() }"
:disabled="!inputText.trim()"
@click="sendMessage"
>
<Send :size="18" />
</button>
</div>
</div>
</div>
<p class="disclaimer">AI 生成内容仅供参考 · 泰豪集团内部绝密信息请勿上传</p>
</div>
</div>
</main>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ElButton, ElInput, ElIcon } from 'element-plus';
import { ref, nextTick } from 'vue'
import {
Plus,
Document,
Warning,
List,
MessageCircle,
Clock,
Trash2,
ChevronLeft,
ChevronRight,
FileText,
AlertTriangle,
Wrench,
Search,
Paperclip,
Promotion
} from '@element-plus/icons-vue';
import ChatHistory from './components/ChatHistory.vue';
Send,
User,
Headphones
} from 'lucide-vue-next'
interface Message {
id: number
role: 'user' | 'assistant'
text: string
time: string
}
interface Conversation {
id: number
title: string
time: string
}
// 历史对话展开状态
const isHistoryOpen = ref(false)
// 当前选中的对话ID
const currentChatId = ref(1);
const currentChatId = ref<number | null>(null)
// 历史对话列表
const chatHistory = ref([
const chatHistory = ref<Conversation[]>([
{ id: 1, title: '发电机故障咨询', time: '今天 10:30' },
{ id: 2, title: '设备维保规范查询', time: '今天 09:15' },
{ id: 3, title: '配件更换流程', time: '昨天 16:42' },
{ id: 4, title: 'TH-500GF参数查询', time: '昨天 14:20' },
{ id: 5, title: '巡检报告模板', time: '12月10日' },
{ id: 6, title: '客户投诉处理流程', time: '12月09日' }
]);
])
// 聊天消息列表
const messages = ref([
{ id: 1, role: 'assistant', text: '您好，欢迎使用泰豪智能客服，请问有什么可以帮您的？', time: '10:00' }
]);
const messages = ref<Message[]>([])
// 输入框文本
const inputText = ref('');
const inputText = ref('')
// 消息容器引用
const messagesRef = ref<HTMLElement | null>(null);
const messagesRef = ref<HTMLElement | null>(null)
const textareaRef = ref<HTMLTextAreaElement | null>(null)
// 快捷命令
const quickCommands = [
{ label: '设备操作手册', icon: FileText, query: '请帮我查询设备操作手册的相关内容' },
{ label: '故障排查指南', icon: AlertTriangle, query: '请提供故障排查指南' },
{ label: '维修服务规范', icon: Wrench, query: '请查询维修服务规范' },
{ label: '技术参数查询', icon: Search, query: '请帮我查询设备技术参数' }
]
// 切换历史对话侧边栏
const toggleHistory = () => {
isHistoryOpen.value = !isHistoryOpen.value
}
// 开始新对话
const startNewChat = () => {
const newId = Date.now();
chatHistory.value.unshift({
id: newId,
title: '新对话',
time: '刚刚'
});
currentChatId.value = newId;
currentChatId.value = null
messages.value = []
inputText.value = ''
}
// 加载历史对话
const loadChat = (chatId: number) => {
currentChatId.value = chatId
// 模拟加载历史对话
messages.value = [
{
id: 1,
role: 'assistant',
text: '您好，欢迎使用泰豪智能客服，请问有什么可以帮您的？',
time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
time: '10:00'
}
]
}
];
};
// 加载历史对话
const loadChat = (chatId: number) => {
currentChatId.value = chatId;
// 模拟加载历史对话
messages.value = [
{ id: 1, role: 'assistant', text: '您好，欢迎使用泰豪智能客服，请问有什么可以帮您的？', time: '10:00' }
];
};
// 删除对话
const deleteConversation = (convId: number) => {
chatHistory.value = chatHistory.value.filter(c => c.id !== convId)
if (currentChatId.value === convId) {
startNewChat()
}
}
// 滚动到底部
const scrollToBottom = () => {
nextTick(() => {
if (messagesRef.value) {
messagesRef.value.scrollTop = messagesRef.value.scrollHeight
}
})
}
// 发送消息
const sendMessage = () => {
if (!inputText.value.trim()) return;
const sendMessage = async () => {
if (!inputText.value.trim()) return
messages.value.push({
const userMessage: Message = {
id: Date.now(),
role: 'user',
text: inputText.value,
text: inputText.value.trim(),
time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
});
}
inputText.value = '';
};
messages.value.push(userMessage)
const query = inputText.value
inputText.value = ''
// 快捷回复
const quickReply = (text: string) => {
inputText.value = text;
sendMessage();
};
// 重置输入框高度
if (textareaRef.value) {
textareaRef.value.style.height = 'auto'
}
scrollToBottom()
// 模拟 AI 回复
setTimeout(() => {
const assistantMessage: Message = {
id: Date.now() + 1,
role: 'assistant',
text: `感谢您的咨询！关于"${query}"，我正在为您查询相关信息...\n\n这是一个模拟回复。在实际应用中，这里会连接到后端AI服务获取真实回答。`,
time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
}
messages.value.push(assistantMessage)
// 保存到对话列表
if (!currentChatId.value) {
const newConv: Conversation = {
id: Date.now(),
title: query.slice(0, 20) + (query.length > 20 ? '...' : ''),
time: '刚刚'
}
chatHistory.value.unshift(newConv)
currentChatId.value = newConv.id
}
scrollToBottom()
}, 1000)
}
// 处理快捷命令
const handleQuickCommand = (query: string) => {
inputText.value = query
sendMessage()
}
// 自动调整输入框高度
const adjustHeight = () => {
const el = textareaRef.value
if (el) {
el.style.height = 'auto'
el.style.height = Math.min(el.scrollHeight, 150) + 'px'
}
}
// 键盘事件
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault()
sendMessage()
}
}
</script>
<style scoped lang="scss">

5
urbanLifelineWeb/packages/workcase/src/views/public/AIChat/components/ChatHistory.vue
View File

@@ -20,8 +20,9 @@
</template>
<script setup lang="ts">
import { ElIcon } from 'element-plus';
import { ChatLineRound } from '@element-plus/icons-vue';
import { MessageCircle } from 'lucide-vue-next'
const ChatLineRound = MessageCircle
interface ChatItem {
id: number;

109
urbanLifelineWeb/temp/deviceUtils.ts
View File

@@ -1,109 +0,0 @@
import { ref, onMounted, onUnmounted } from 'vue';
/**
* 设备类型枚举
*/
export enum DeviceType {
MOBILE = 'mobile', // h5移动端
DESKTOP = 'desktop' // web桌面端
}
/**
* 屏幕尺寸断点
*/
export const BREAKPOINTS = {
mobile: 768, // 小于768px为移动端(h5)
desktop: 768 // 大于等于768px为桌面端(web)
};
/**
* 检测当前设备类型
*/
export function getDeviceType(): DeviceType {
const width = window.innerWidth;
if (width < BREAKPOINTS.mobile) {
return DeviceType.MOBILE; // h5移动端
} else {
return DeviceType.DESKTOP; // web桌面端
}
}
/**
* 检测是否为移动端
*/
export function isMobile(): boolean {
return getDeviceType() === DeviceType.MOBILE;
}
/**
* 检测是否为桌面端
*/
export function isDesktop(): boolean {
return getDeviceType() === DeviceType.DESKTOP;
}
/**
* 响应式设备类型 Hook
*/
export function useDevice() {
const deviceType = ref<DeviceType>(getDeviceType());
const isMobileDevice = ref(isMobile());
const isDesktopDevice = ref(isDesktop());
const updateDeviceType = () => {
deviceType.value = getDeviceType();
isMobileDevice.value = isMobile();
isDesktopDevice.value = isDesktop();
};
onMounted(() => {
window.addEventListener('resize', updateDeviceType);
});
onUnmounted(() => {
window.removeEventListener('resize', updateDeviceType);
});
return {
deviceType,
isMobileDevice,
isDesktopDevice
};
}
/**
* 根据设备类型获取对应的组件路径
*/
export function getComponentPath(basePath: string, deviceType?: DeviceType): string {
const currentDeviceType = deviceType || getDeviceType();
// 如果是移动端(h5)，尝试加载移动端版本
if (currentDeviceType === DeviceType.MOBILE) {
const mobilePath = basePath.replace('.vue', '.mobile.vue');
return mobilePath;
}
// 默认返回桌面版本(web)
return basePath;
}
/**
* 动态导入组件，支持回退机制
*/
export async function importResponsiveComponent(basePath: string) {
const deviceType = getDeviceType();
// 尝试加载设备特定的组件
if (deviceType === DeviceType.MOBILE) {
try {
const mobilePath = basePath.replace('.vue', '.mobile.vue');
return await import(/* @vite-ignore */ mobilePath);
} catch {
// 移动端组件不存在，回退到默认组件
}
}
// 加载默认组件(桌面端/web)
return await import(/* @vite-ignore */ basePath);
}

586
urbanLifelineWeb/temp/route-generator.ts
View File

@@ -1,586 +0,0 @@
/**
* @description 动态路由生成器
* @author yslg
* @since 2025-10-07
*/
import type { RouteRecordRaw } from 'vue-router';
import type { SysMenu } from '@/types';
import { MenuType } from '@/types/enums';
import { routes } from '@/router';
import { getResponsiveLayout, createResponsiveRoute, type RouteAdapter } from './routeAdapter';
// 预注册所有视图组件，构建时由 Vite 解析并生成按需加载的 chunk
const VIEW_MODULES = import.meta.glob('../views/**/*.vue');
/**
* 布局组件映射 - 使用响应式布局适配
*/
const LAYOUT_MAP: Record<string, () => Promise<any>> = {
// 基础布局（旧版，带侧边栏）
'BasicLayout': getResponsiveLayout('BasicLayout'),
// 导航布局（新版，顶部导航+动态侧边栏）
'NavigationLayout': getResponsiveLayout('NavigationLayout'),
// 侧边栏布局（管理后台专用，顶层SIDEBAR菜单）
'SidebarLayout': getResponsiveLayout('SidebarLayout'),
// 空白布局
'BlankLayout': getResponsiveLayout('BlankLayout'),
// 页面布局
'PageLayout': getResponsiveLayout('PageLayout'),
// 路由占位组件（用于没有组件的子路由）
'RoutePlaceholder': () => import('@/layouts/RoutePlaceholder.vue'),
// 用户中心布局（有共用区域，避免重复查询）
'UserCenterLayout': () => import('@/views/user/user-center/UserCenterLayout.vue'),
};
/**
* 根据菜单生成路由配置
* @param menus 用户菜单列表
* @returns Vue Router路由配置数组
*/
export function generateRoutes(menus: SysMenu[]): RouteRecordRaw[] {
if (!menus || menus.length === 0) {
return [];
}
const routes: RouteRecordRaw[] = [];
const pageRoutes: RouteRecordRaw[] = [];
// 构建菜单树
const menuTree = buildMenuTree(menus);
// 生成路由
menuTree.forEach(menu => {
const route = generateRouteFromMenu(menu);
if (route) {
routes.push(route);
// 递归提取所有 PAGE 类型的子菜单
extractPageChildren(route, pageRoutes);
}
});
// 将 PAGE 类型的路由添加到路由列表
routes.push(...pageRoutes);
return routes;
}
/**
* 递归提取路由中的 PAGE 类型子菜单
*/
function extractPageChildren(route: any, pageRoutes: RouteRecordRaw[]) {
// 检查当前路由是否有 PAGE 类型的子菜单
if (route.meta?.pageChildren && Array.isArray(route.meta.pageChildren)) {
route.meta.pageChildren.forEach((pageMenu: SysMenu) => {
const pageRoute = generateRouteFromMenu(pageMenu, true); // 作为顶层路由生成
if (pageRoute) {
pageRoutes.push(pageRoute);
} else {
console.error(`[路由生成] 生成独立PAGE路由失败: ${pageMenu.name}`);
}
});
// 清理临时数据
delete route.meta.pageChildren;
}
// 递归检查子路由
if (route.children && Array.isArray(route.children)) {
route.children.forEach((childRoute: any) => {
extractPageChildren(childRoute, pageRoutes);
});
}
}
/**
* 根据单个菜单生成路由
* @param menu 菜单对象
* @param isTopLevel 是否是顶层菜单
* @returns 路由配置
*/
function generateRouteFromMenu(menu: SysMenu, isTopLevel = true): RouteRecordRaw | null {
// 跳过按钮类型
if (menu.type === MenuType.BUTTON) {
return null;
}
// 跳过静态路由（已经在 router 中定义，不需要再次添加）
if (menu.component === '__STATIC_ROUTE__') {
return null;
}
const route: any = {
path: menu.url || `/${menu.menuID}`,
name: menu.menuID,
meta: {
title: menu.name,
icon: menu.icon,
menuId: menu.menuID,
parentId: menu.parentID,
orderNum: menu.orderNum,
type: menu.type,
hideInMenu: false,
requiresAuth: true,
}
};
// 检查是否指定了布局（只有顶层菜单才使用布局）
const layout = isTopLevel ? (menu as any).layout : null;
const hasChildren = menu.children && menu.children.length > 0;
// 检查 component 是否是布局组件（优先检查 LAYOUT_MAP，再检查名称）
const isComponentLayout = menu.component && (
LAYOUT_MAP[menu.component] ||
(typeof menu.component === 'string' && menu.component.includes('Layout'))
);
// 确定路由组件
if (layout && LAYOUT_MAP[layout]) {
// 如果指定了布局，使用指定的布局
route.component = getComponent(layout);
} else if (isComponentLayout && hasChildren && isTopLevel && menu.component) {
// 如果 component 是布局组件且有子菜单，使用该布局组件作为父路由组件
// 这样可以确保布局只渲染一次，共用区域的数据也只查询一次
route.component = getComponent(menu.component);
} else if (hasChildren && isTopLevel) {
// 如果有子菜单但没有指定布局，根据菜单类型选择默认布局
if (menu.type === MenuType.NAVIGATION) {
route.component = getComponent('NavigationLayout');
} else if (menu.type === MenuType.SIDEBAR && !menu.parentID) {
// 顶层SIDEBAR菜单（管理后台）默认使用SidebarLayout
route.component = getComponent('SidebarLayout');
} else {
route.component = getComponent('BasicLayout');
}
} else {
// 没有子菜单，也没有指定布局，使用具体的页面组件
if (menu.component) {
route.component = getComponent(menu.component);
} else {
// 非顶层菜单没有组件时，使用路由占位组件（不影响布局样式）
route.component = getComponent('RoutePlaceholder');
}
}
// 处理子路由
if (layout && LAYOUT_MAP[layout] && menu.component && isTopLevel) {
// 如果指定了布局，将页面组件作为子路由
route.children = [{
path: '',
name: `${menu.menuID}_page`,
component: getComponent(menu.component),
meta: route.meta
}];
// 如果还有其他子菜单，继续添加
if (hasChildren) {
const pageChildren: SysMenu[] = [];
const normalChildren: SysMenu[] = [];
menu.children!.forEach(child => {
if (child.type === MenuType.PAGE) {
pageChildren.push(child);
} else {
normalChildren.push(child);
}
});
// 添加普通子菜单
normalChildren.forEach(child => {
const childRoute = generateRouteFromMenu(child, false);
if (childRoute) {
route.children!.push(childRoute);
}
});
// PAGE 类型的菜单保存到 meta
if (pageChildren.length > 0) {
route.meta.pageChildren = pageChildren;
}
}
} else if (hasChildren) {
// 处理有子菜单的情况
route.children = [];
// 分离 PAGE 类型的子菜单和普通子菜单
const pageChildren: SysMenu[] = [];
const normalChildren: SysMenu[] = [];
menu.children!.forEach(child => {
if (child.type === MenuType.PAGE) {
// PAGE 类型的菜单作为独立路由，不作为子路由
pageChildren.push(child);
} else {
normalChildren.push(child);
}
});
// 当前菜单指定了页面组件时，如果存在“普通子菜单”（非 PAGE 类型）
// 则需要创建一个默认子路由来承载当前菜单的页面组件，
// 这样父级既能作为分组，又能渲染自己的页面。
// 如果只有 PAGE 类型子菜单，则直接使用当前路由组件，而不再包一层 `_page`，
// 避免多出一层嵌套导致 matched 结构过深。
if (menu.component && !isComponentLayout && normalChildren.length > 0) {
route.children!.push({
path: '',
name: `${menu.menuID}_page`,
component: getComponent(menu.component),
meta: {
...route.meta,
}
});
}
// 只将普通子菜单加入 children
normalChildren.forEach(child => {
const childRoute = generateRouteFromMenu(child, false);
if (childRoute) {
route.children!.push(childRoute);
}
});
// PAGE 类型的菜单需要在外层单独处理（不管是哪一层的菜单）
if (pageChildren.length > 0) {
// 将 PAGE 类型的子菜单保存到路由的 meta 中，稍后在外层生成
route.meta.pageChildren = pageChildren;
}
// 如果没有设置重定向，自动重定向到第一个有URL的子菜单
if (!route.redirect && route.children.length > 0) {
const firstChildWithUrl = findFirstMenuWithUrl(normalChildren);
if (firstChildWithUrl?.url) {
route.redirect = firstChildWithUrl.url;
}
}
}
return route;
}
/**
* 查找第一个有URL的菜单
* @param menus 菜单列表
* @returns 第一个有URL的菜单
*/
function findFirstMenuWithUrl(menus: SysMenu[]): SysMenu | null {
for (const menu of menus) {
if (menu.type !== MenuType.BUTTON) {
if (menu.url) {
return menu;
}
if (menu.children && menu.children.length > 0) {
const found = findFirstMenuWithUrl(menu.children);
if (found) return found;
}
}
}
return null;
}
/**
* 根据组件名称获取组件（支持响应式组件）
* @param componentName 组件名称/路径
* @returns 组件异步加载函数
*/
function getComponent(componentName: string) {
// 1. 若是布局组件，直接返回预定义映射
if (LAYOUT_MAP[componentName]) {
return LAYOUT_MAP[componentName];
}
// 2. 将后台给的 component 字段转换为 ../views/**.vue 形式的 key
let componentPath = componentName;
// 如果不是以 @/ 开头，则认为是相对 views 根目录的路径，例如 "user/home/HomeView"
if (!componentPath.startsWith('@/')) {
if (!componentPath.startsWith('/')) {
componentPath = '/' + componentPath;
}
componentPath = '@/views' + componentPath; // => '@/views/user/home/HomeView'
}
// 将别名 @/ 转为相对于当前文件的路径，必须与 import.meta.glob 中的模式一致
const originalPath = componentPath.replace(/^@\//, '../'); // => '../views/user/home/HomeView'
// 补全 .vue 后缀
if (!originalPath.endsWith('.vue')) {
componentPath = originalPath + '.vue';
} else {
componentPath = originalPath;
}
// 3. 检查是否有移动端版本
const mobileComponentPath = componentPath.replace('.vue', '.mobile.vue');
// 从 VIEW_MODULES 中查找对应的 loader
const originalLoader = VIEW_MODULES[componentPath];
const mobileLoader = VIEW_MODULES[mobileComponentPath];
if (!originalLoader) {
console.error('[路由生成] 未找到组件模块', {
原始组件名: componentName,
期望路径: componentPath,
可用模块: Object.keys(VIEW_MODULES)
});
// 找不到时退回到 404 组件
return () => import('@/views/public/error/404.vue');
}
// 4. 如果有移动端版本，创建响应式路由适配器
if (mobileLoader) {
const adapter: RouteAdapter = {
original: originalLoader as () => Promise<any>,
mobile: mobileLoader as () => Promise<any>
};
return createResponsiveRoute(adapter);
}
// 5. 没有移动端版本，直接返回原始组件
return originalLoader as () => Promise<any>;
}
/**
* 将静态路由转换为菜单项
* @param routes 静态路由数组
* @returns 菜单项数组
*/
function convertRoutesToMenus(routes: RouteRecordRaw[]): SysMenu[] {
const menus: SysMenu[] = [];
routes.forEach(route => {
// 处理有子路由的情况（现在静态路由都有布局组件）
if (route.children && route.children.length > 0) {
route.children.forEach(child => {
// 只处理有 meta.menuType 的子路由
if (child.meta?.menuType !== undefined) {
const menu: SysMenu = {
menuID: child.name as string || child.path.replace(/\//g, '-'),
parentID: '0',
name: child.meta.title as string || child.name as string,
url: route.path, // 使用父路由的路径
type: child.meta.menuType as MenuType,
orderNum: (child.meta.orderNum as number) || -1,
// 标记为静态路由，避免重复生成路由
component: '__STATIC_ROUTE__', // 特殊标记
};
menus.push(menu);
}
});
}
// 处理没有子路由的情况（兼容性保留）
else if (route.meta?.menuType !== undefined) {
const menu: SysMenu = {
menuID: route.name as string || route.path.replace(/\//g, '-'),
parentID: '0',
name: route.meta.title as string || route.name as string,
url: route.path,
type: route.meta.menuType as MenuType,
orderNum: (route.meta.orderNum as number) || -1,
// 标记为静态路由，避免重复生成路由
component: '__STATIC_ROUTE__', // 特殊标记
};
menus.push(menu);
}
});
return menus;
}
/**
* 构建菜单树结构
* @param menus 菜单列表
* @returns 菜单树
*/
export function buildMenuTree(menus: SysMenu[]): SysMenu[] {
// 将静态路由转换为菜单项
const staticMenus = convertRoutesToMenus(routes);
// 合并动态菜单和静态菜单
const allMenus = [...staticMenus, ...menus];
if (allMenus.length === 0) {
return [];
}
const menuMap = new Map<string, SysMenu>();
const rootMenus: SysMenu[] = [];
const maxDepth = allMenus.length; // 最多遍历len层
// 创建菜单映射
allMenus.forEach(menu => {
if (menu.menuID) {
menuMap.set(menu.menuID, { ...menu, children: [] });
}
});
// 循环构建树结构，最多遍历maxDepth次
for (let depth = 0; depth < maxDepth; depth++) {
let hasChanges = false;
allMenus.forEach(menu => {
if (!menu.menuID) return;
const menuNode = menuMap.get(menu.menuID);
if (!menuNode) return;
// 如果节点已经在树中，跳过
if (isNodeInTree(menuNode, rootMenus)) {
return;
}
if (!menu.parentID || menu.parentID === '0' || menu.parentID === '') {
// 根菜单
if (!isNodeInTree(menuNode, rootMenus)) {
rootMenus.push(menuNode);
hasChanges = true;
}
} else {
// 子菜单
const parent = menuMap.get(menu.parentID);
if (parent && isNodeInTree(parent, rootMenus)) {
if (!parent.children) {
parent.children = [];
}
if (!parent.children.includes(menuNode)) {
parent.children.push(menuNode);
hasChanges = true;
}
}
}
});
// 如果没有变化，说明树构建完成
if (!hasChanges) {
break;
}
}
// 按orderNum排序
const sortMenus = (menus: SysMenu[]): SysMenu[] => {
return menus
.sort((a, b) => (a.orderNum || 0) - (b.orderNum || 0))
.map(menu => ({
...menu,
children: menu.children ? sortMenus(menu.children) : []
}));
};
return sortMenus(rootMenus);
}
// 检查节点是否已经在树中
function isNodeInTree(node: SysMenu, tree: SysMenu[]): boolean {
for (const treeNode of tree) {
if (treeNode.menuID === node.menuID) {
return true;
}
if (treeNode.children && isNodeInTree(node, treeNode.children)) {
return true;
}
}
return false;
}
/**
* 根据权限过滤菜单
* @param menus 菜单列表
* @param permissions 用户权限列表
* @returns 过滤后的菜单列表
*/
export function filterMenusByPermissions(
menus: SysMenu[],
permissions: string[]
): SysMenu[] {
if (!menus || menus.length === 0) {
return [];
}
return menus
.filter(() => {
// 如果菜单没有设置权限要求，则默认显示
// 这里可以根据实际业务需求调整权限检查逻辑
return true; // 暂时返回true，后续可以根据菜单的权限字段进行过滤
})
.map(menu => {
if (menu.children && menu.children.length > 0) {
return {
...menu,
children: filterMenusByPermissions(menu.children, permissions)
};
}
return menu;
});
}
/**
* 查找路由路径对应的菜单
* @param menus 菜单树
* @param path 路由路径
* @returns 匹配的菜单
*/
export function findMenuByPath(menus: SysMenu[], path: string): SysMenu | null {
for (const menu of menus) {
if (menu.url === path) {
return menu;
}
if (menu.children && menu.children.length > 0) {
const found = findMenuByPath(menu.children, path);
if (found) {
return found;
}
}
}
return null;
}
/**
* 获取菜单路径数组（面包屑导航用）
* @param menus 菜单树
* @param targetMenuId 目标菜单ID
* @returns 菜单路径数组
*/
export function getMenuPath(menus: SysMenu[], targetMenuId: string): SysMenu[] {
const path: SysMenu[] = [];
function findPath(menuList: SysMenu[]): boolean {
for (const menu of menuList) {
path.push(menu);
if (menu.menuID === targetMenuId) {
return true;
}
if (menu.children && menu.children.length > 0) {
if (findPath(menu.children)) {
return true;
}
}
path.pop();
}
return false;
}
findPath(menus);
return path;
}
/**
* 获取第一个可访问的菜单URL（用于登录后跳转）
* @param menus 菜单树
* @returns 第一个可访问的菜单URL，如果没有则返回 null
*/
export function getFirstAccessibleMenuUrl(menus: SysMenu[]): string | null {
if (!menus || menus.length === 0) {
return null;
}
return "/home";
}

261
urbanLifelineWeb/temp/routeAdapter.ts
View File

@@ -1,261 +0,0 @@
import { RouteRecordRaw, RouteLocationNormalized } from 'vue-router';
import { getDeviceType, DeviceType } from './deviceUtils';
/**
* 路由适配器接口
*/
export interface RouteAdapter {
original: () => Promise<any>; // web桌面端
mobile?: () => Promise<any>; // h5移动端
}
/**
* 移动端路由映射表
*/
export const MOBILE_ROUTES_MAP: Record<string, string> = {
// User Views
'/home': '@/views/user/home/HomeView.mobile.vue',
'/resource-center': '@/views/user/resource-center/ResourceCenterView.mobile.vue',
'/resource-hot': '@/views/user/resource-center/HotResourceView.mobile.vue',
'/search': '@/views/user/resource-center/SearchView.mobile.vue',
'/course-center': '@/views/user/study-plan/CourseCenterView.mobile.vue',
'/course-detail': '@/views/user/study-plan/CourseDetailView.mobile.vue',
'/course-study': '@/views/user/study-plan/CourseStudyView.mobile.vue',
'/study-tasks': '@/views/user/study-plan/StudyTasksView.mobile.vue',
'/learning-task-detail': '@/views/user/study-plan/LearningTaskDetailView.mobile.vue',
'/user-center': '@/views/user/user-center/UserCenterLayout.mobile.vue',
'/personal-info': '@/views/user/user-center/profile/PersonalInfoView.mobile.vue',
'/account-settings': '@/views/user/user-center/profile/AccountSettingsView.mobile.vue',
'/my-achievements': '@/views/user/user-center/MyAchievementsView.mobile.vue',
'/my-favorites': '@/views/user/user-center/MyFavoritesView.mobile.vue',
'/learning-records': '@/views/user/user-center/LearningRecordsView.mobile.vue',
'/my-messages': '@/views/user/message/MyMessageListView.mobile.vue',
'/message-detail': '@/views/user/message/MyMessageDetailView.mobile.vue',
// Public Views
'/login': '@/views/public/login/Login.mobile.vue',
'/register': '@/views/public/login/Register.mobile.vue',
'/forgot-password': '@/views/public/login/ForgotPassword.mobile.vue',
'/article-show': '@/views/public/article/ArticleShowView.mobile.vue',
'/article-add': '@/views/public/article/ArticleAddView.mobile.vue'
};
/**
* Layout映射表
*/
export const LAYOUT_MAP: Record<string, Record<DeviceType, string>> = {
'NavigationLayout': {
[DeviceType.MOBILE]: '@/layouts/MobileLayout.vue', // h5移动端
[DeviceType.DESKTOP]: '@/layouts/NavigationLayout.vue' // web桌面端
},
'SidebarLayout': {
[DeviceType.MOBILE]: '@/layouts/MobileLayout.vue', // h5移动端
[DeviceType.DESKTOP]: '@/layouts/SidebarLayout.vue' // web桌面端
},
'BasicLayout': {
[DeviceType.MOBILE]: '@/layouts/MobileLayout.vue', // h5移动端
[DeviceType.DESKTOP]: '@/layouts/BasicLayout.vue' // web桌面端
},
'BlankLayout': {
[DeviceType.MOBILE]: '@/layouts/BlankLayout.vue', // h5移动端
[DeviceType.DESKTOP]: '@/layouts/BlankLayout.vue' // web桌面端
},
'PageLayout': {
[DeviceType.MOBILE]: '@/layouts/MobileLayout.vue', // h5移动端
[DeviceType.DESKTOP]: '@/layouts/PageLayout.vue' // web桌面端
}
};
/**
* 创建响应式路由组件
*/
export function createResponsiveRoute(adapter: RouteAdapter): () => Promise<any> {
return async () => {
const deviceType = getDeviceType();
try {
// 尝试加载设备特定的组件
if (deviceType === DeviceType.MOBILE && adapter.mobile) {
return await adapter.mobile();
}
} catch (error) {
console.warn(`Failed to load device-specific component for ${deviceType}, falling back to original:`, error);
}
// 回退到原始组件(桌面端/web)
return await adapter.original();
};
}
/**
* 获取响应式Layout组件
*/
export function getResponsiveLayout(layoutName: string): () => Promise<any> {
const deviceType = getDeviceType();
const layoutMap = LAYOUT_MAP[layoutName];
if (!layoutMap) {
console.warn(`Unknown layout: ${layoutName}, using original`);
// 使用具体的导入路径
switch (layoutName) {
case 'BlankLayout':
return () => import('@/layouts/BlankLayout.vue');
case 'NavigationLayout':
return () => import('@/layouts/NavigationLayout.vue');
case 'SidebarLayout':
return () => import('@/layouts/SidebarLayout.vue');
case 'BasicLayout':
return () => import('@/layouts/BasicLayout.vue');
case 'PageLayout':
return () => import('@/layouts/PageLayout.vue');
default:
throw new Error(`Unknown layout: ${layoutName}`);
}
}
const targetLayout = layoutMap[deviceType];
return async () => {
try {
// 使用具体的导入路径而不是动态路径
switch (targetLayout) {
case '@/layouts/BlankLayout.vue':
return await import('@/layouts/BlankLayout.vue');
case '@/layouts/NavigationLayout.vue':
return await import('@/layouts/NavigationLayout.vue');
case '@/layouts/SidebarLayout.vue':
return await import('@/layouts/SidebarLayout.vue');
case '@/layouts/BasicLayout.vue':
return await import('@/layouts/BasicLayout.vue');
case '@/layouts/MobileLayout.vue':
return await import('@/layouts/MobileLayout.vue');
case '@/layouts/PageLayout.vue':
return await import('@/layouts/PageLayout.vue');
default:
throw new Error(`Unknown layout path: ${targetLayout}`);
}
} catch (error) {
console.warn(`Failed to load responsive layout ${targetLayout}, falling back to original:`, error);
// 回退到原始layout
switch (layoutName) {
case 'BlankLayout':
return await import('@/layouts/BlankLayout.vue');
case 'NavigationLayout':
return await import('@/layouts/NavigationLayout.vue');
case 'SidebarLayout':
return await import('@/layouts/SidebarLayout.vue');
case 'BasicLayout':
return await import('@/layouts/BasicLayout.vue');
case 'PageLayout':
return await import('@/layouts/PageLayout.vue');
default:
throw new Error(`Unknown layout: ${layoutName}`);
}
}
};
}
/**
* 创建自适应路由配置
*/
export function createAdaptiveRoute(
path: string,
originalComponent: string,
layoutName?: string,
meta?: any
): RouteRecordRaw {
// 创建具体的导入函数而不是使用动态路径
const getOriginalComponent = () => {
switch (originalComponent) {
case '@/views/public/login/Login.vue':
return import('@/views/public/login/Login.vue');
case '@/views/public/login/Register.vue':
return import('@/views/public/login/Register.vue');
case '@/views/public/login/ForgotPassword.vue':
return import('@/views/public/login/ForgotPassword.vue');
default:
throw new Error(`Unknown component: ${originalComponent}`);
}
};
const getMobileComponent = (): (() => Promise<any>) | null => {
const mobilePath = MOBILE_ROUTES_MAP[path];
if (!mobilePath) return null;
switch (mobilePath) {
case '@/views/public/login/Login.mobile.vue':
return () => import('@/views/public/login/Login.mobile.vue');
case '@/views/public/login/Register.mobile.vue':
return () => import('@/views/public/login/Register.mobile.vue');
case '@/views/public/login/ForgotPassword.mobile.vue':
return () => import('@/views/public/login/ForgotPassword.mobile.vue');
default:
return null;
}
};
const adapter: RouteAdapter = {
original: getOriginalComponent
};
// 检查是否有移动端版本
const mobileImportFunction = getMobileComponent();
if (mobileImportFunction) {
adapter.mobile = mobileImportFunction;
}
// 如果指定了Layout，应用响应式Layout
if (layoutName) {
const route: RouteRecordRaw = {
path,
component: getResponsiveLayout(layoutName),
children: [
{
path: '',
component: createResponsiveRoute(adapter),
meta
}
],
meta
};
return route;
}
const route: RouteRecordRaw = {
path,
component: createResponsiveRoute(adapter),
meta
};
return route;
}
/**
* 监听屏幕尺寸变化，重新加载路由
*/
export function setupRouteWatcher(router: any) {
let currentDeviceType = getDeviceType();
const handleResize = () => {
const newDeviceType = getDeviceType();
if (newDeviceType !== currentDeviceType) {
currentDeviceType = newDeviceType;
// 重新加载当前路由以应用新的组件
const currentRoute = router.currentRoute.value;
router.replace({
...currentRoute,
query: {
...currentRoute.query,
_refresh: Date.now() // 强制重新加载
}
});
}
};
window.addEventListener('resize', handleResize);
// 返回清理函数
return () => {
window.removeEventListener('resize', handleResize);
};
}