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

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;
}
}
}

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

@@ -3,16 +3,24 @@
<!-- 侧边栏 -->
<aside class="sidebar" :class="{ collapsed: collapsed }">
<div class="sidebar-header">
<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>
</div>
<!-- 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 -->
<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>

740
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;
background: #fff;
border-right: 1px solid #e4e7ed;
.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 #e2e8f0;
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 0;
z-index: 10;
.history-toggle-btn {
padding: 8px;
color: #64748b;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
margin-bottom: 8px;
&:hover {
color: $brand-color;
background: $brand-color-light;
}
}
.history-icons {
flex: 1;
overflow-y: auto;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 0;
}
.sidebar-header {
padding: 20px 16px;
border-bottom: 1px solid #e4e7ed;
.history-icon-btn {
padding: 8px;
color: #94a3b8;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
h1 {
font-size: 16px;
margin: 0;
color: #303133;
}
&:hover {
color: #64748b;
background: #f1f5f9;
}
.nav-section {
padding: 12px 8px;
&.active {
color: $brand-color;
background: $brand-color-light;
}
}
.nav-item.new-chat {
background: #409eff;
color: #fff;
.expand-btn {
padding: 8px;
color: #94a3b8;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: #66b1ff;
}
}
&:hover {
color: #64748b;
background: #f1f5f9;
}
}
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
margin-bottom: 2px;
border-radius: 6px;
cursor: pointer;
color: #606266;
transition: all 0.2s;
// ==================== 展开时的关闭按钮 ====================
.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: #f5f7fa;
}
&:hover {
background: #f8fafc;
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
}
}
&.active {
background: #ecf5ff;
color: #409eff;
}
// ==================== 历史对话侧边栏 ====================
.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);
span {
font-size: 14px;
}
}
&.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;
}
.sidebar-footer {
margin-top: auto;
.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;
font-size: 12px;
color: #c0c4cc;
border-top: 1px solid #e4e7ed;
color: #94a3b8;
font-size: 14px;
}
}
// 主内容区
.chat-main {
flex: 1;
.conversation-item {
display: flex;
flex-direction: column;
overflow: hidden;
background: #f5f7fa;
align-items: flex-start;
gap: 12px;
padding: 10px 12px;
margin-bottom: 4px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
.chat-header {
padding: 24px 32px;
background: #fff;
border-bottom: 1px solid #e4e7ed;
&:hover {
background: #f8fafc;
h1 {
font-size: 24px;
margin: 0 0 8px 0;
color: #303133;
}
.subtitle {
font-size: 14px;
color: #909399;
margin: 0;
.delete-btn {
opacity: 1;
}
}
.chat-area {
&.active {
background: $brand-color-light;
color: $brand-color;
}
.conv-icon {
flex-shrink: 0;
margin-top: 2px;
}
.conv-info {
flex: 1;
background: #fff;
margin: 24px 32px;
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: #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;
height: 100%;
transition: all 0.3s ease;
margin-left: 48px;
&.sidebar-open {
margin-left: 256px;
}
}
// ==================== 消息容器 ====================
.messages-container {
flex: 1;
overflow-y: auto;
}
// ==================== 空状态 ====================
.empty-state {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
.empty-content {
text-align: center;
max-width: 600px;
}
.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;
justify-content: center;
margin: 0 auto 24px;
box-shadow: 0 8px 24px rgba($brand-color, 0.3);
.logo-icon {
font-size: 40px;
color: #fff;
}
}
.title {
font-size: 24px;
font-weight: 700;
color: #1e293b;
margin: 0 0 8px;
}
.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;
flex-direction: column;
overflow: hidden;
align-items: center;
justify-content: center;
color: $brand-color;
transition: all 0.2s;
}
.ai-info {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid #e4e7ed;
&:hover .quick-icon {
background: $brand-color;
color: #fff;
}
.ai-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: #f0f2f5;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.ai-details {
flex: 1;
}
.ai-name {
font-size: 16px;
font-weight: 600;
color: #303133;
margin-bottom: 4px;
}
.ai-status {
font-size: 12px;
color: #67c23a;
display: flex;
align-items: center;
gap: 6px;
.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;
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);
}
.message-text {
line-height: 1.6;
word-wrap: break-word;
}
.message-time {
font-size: 11px;
color: #c0c4cc;
margin-top: 6px;
}
}
}
.quick-actions {
display: flex;
gap: 12px;
padding: 12px 20px;
border-top: 1px solid #e4e7ed;
border-bottom: 1px solid #e4e7ed;
background: #fff;
.quick-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: #f5f7fa;
border: 1px solid #e4e7ed;
border-radius: 16px;
font-size: 13px;
color: #606266;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: #ecf5ff;
border-color: #409eff;
color: #409eff;
}
}
}
.input-area {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: #fff;
.attach-icon {
font-size: 20px;
color: #909399;
cursor: pointer;
}
}
.quick-label {
font-size: 14px;
font-weight: 500;
color: #374151;
}
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
// ==================== 消息列表 ====================
.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);
}
}
}
}
50% {
opacity: 0.5;
.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: 12px;
color: #94a3b8;
margin-top: 8px;
}
}
}
// ==================== 快捷命令栏 ====================
.quick-bar {
padding: 8px 16px;
border-top: 1px solid #f1f5f9;
background: #fff;
.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: 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;
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 {
color: #64748b;
background: #f1f5f9;
}
}
.send-btn {
padding: 10px;
background: #e2e8f0;
color: #94a3b8;
border: none;
border-radius: 12px;
cursor: not-allowed;
transition: all 0.2s;
&.active {
background: $brand-color;
color: #fff;
cursor: pointer;
box-shadow: 0 2px 8px rgba($brand-color, 0.3);
&:hover {
background: $brand-color-hover;
}
}
}
.disclaimer {
text-align: center;
font-size: 12px;
color: #94a3b8;
margin: 12px 0 0;
}
}

422
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="sidebar-header">
<h1>智能客服系统</h1>
<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>
<!-- 新增对话按钮 -->
<div class="nav-section">
<div class="nav-item new-chat" @click="startNewChat">
<ElIcon><Plus /></ElIcon>
<span>新建对话</span>
<!-- 展开时的关闭按钮 -->
<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">
<span class="title">历史对话</span>
<button class="new-chat-btn" @click="startNewChat" title="新建对话">
<Plus :size="18" />
</button>
</div>
</div>
<!-- 历史对话列表 -->
<ChatHistory
:chatHistory="chatHistory"
:currentChatId="currentChatId"
@loadChat="loadChat"
/>
<div class="sidebar-footer">
v2.1.0 (Build 2025)
<!-- 对话列表 -->
<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>
</div>
</aside>
<!-- 主内容区 -->
<div class="chat-main">
<!-- header -->
<div class="chat-header">
<h1>泰豪小电-对内</h1>
<p class="subtitle">Real-time Support Agent</p>
</div>
<!-- 主聊天区域 -->
<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-for="msg in messages"
:key="msg.id"
class="message"
<!-- 消息列表 -->
<div v-else class="messages-list">
<div
v-for="msg in messages"
:key="msg.id"
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>
</div>
<!-- footer -->
<!-- 默认提示词 -->
<div class="quick-actions">
<button class="quick-btn" @click="quickReply('设备操作手册')">
<ElIcon><Document /></ElIcon>
设备操作手册
<!-- 快捷命令栏（有消息时显示） -->
<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>
<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 class="input-area">
<ElIcon class="attach-icon"><Paperclip /></ElIcon>
<ElInput
v-model="inputText"
placeholder="描述您的问题 (如: 发电机启动失败异常)..."
@keyup.enter="sendMessage"
/>
<ElButton type="primary" :icon="Promotion" circle @click="sendMessage" />
</div>
</div>
</div>
<!-- 输入区域 -->
<div class="input-area">
<div class="input-wrapper">
<!-- 输入卡片 -->
<div class="input-card">
<!-- 输入框 -->
<div class="input-row">
<textarea
ref="textareaRef"
v-model="inputText"
@input="adjustHeight"
@keydown="handleKeyDown"
placeholder="请输入您的问题，例如：电源模块过热报警怎么处理..."
rows="1"
class="chat-textarea"
/>
</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 = ''
// 重置输入框高度
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 quickReply = (text: string) => {
inputText.value = text;
sendMessage();
};
// 处理快捷命令
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;