diff --git a/urbanLifelineServ/.bin/database/postgres/sql/admin_routes_architecture.md b/urbanLifelineServ/.bin/database/postgres/sql/admin_routes_architecture.md
index 77895c6e..f4f8823a 100644
--- a/urbanLifelineServ/.bin/database/postgres/sql/admin_routes_architecture.md
+++ b/urbanLifelineServ/.bin/database/postgres/sql/admin_routes_architecture.md
@@ -30,10 +30,10 @@
 
 ---
 
-### 第二层：AdminSidebarLayout (各服务内部)
-每个管理后台的内部二级菜单，使用 `AdminSidebarLayout` 布局。
+### 第二层：SubSidebarLayout (各服务内部)
+每个管理后台的内部二级菜单，使用 `SubSidebarLayout` 布局。
 
-**布局**: `AdminSidebarLayout`  
+**布局**: `SubSidebarLayout`  
 **类型**: `route`（非 iframe）
 
 ---
@@ -41,7 +41,7 @@
 ## Platform 管理后台（第二层）
 
 **服务**: `platform`  
-**布局**: `AdminSidebarLayout`
+**布局**: `SubSidebarLayout`
 
 ### 视图列表
 
@@ -69,7 +69,7 @@ PERM-0605: perm_platform_admin_config (platform:admin:config)
 ## Bidding 管理后台（第二层）
 
 **服务**: `bidding`  
-**布局**: `AdminSidebarLayout`
+**布局**: `SubSidebarLayout`
 
 ### 权限配置
 ```sql
@@ -84,7 +84,7 @@ PERM-0611: perm_bidding_admin (bidding:admin:view)
 ## Workcase 管理后台（第二层）
 
 **服务**: `workcase`  
-**布局**: `AdminSidebarLayout`
+**布局**: `SubSidebarLayout`
 
 ### 视图列表
 
@@ -123,27 +123,27 @@ PERM-0627: perm_workcase_log (workcase:log:view)
 - 用户应用入口（普通路由和iframe）
 - 管理后台入口（iframe类型）
 
-### 内层 AdminSidebarLayout
-各服务内部，显示 `layout='AdminSidebarLayout'` 且 `url.startsWith('/admin')` 的视图：
+### 内层 SubSidebarLayout
+各服务内部，显示 `layout='SubSidebarLayout'` 且 `url.startsWith('/admin')` 的视图：
 
 #### Platform AdminSidebar
 ```typescript
 service === 'platform' && 
-layout === 'AdminSidebarLayout' && 
+layout === 'SubSidebarLayout' && 
 url.startsWith('/admin')
 ```
 
 #### Bidding AdminSidebar
 ```typescript
 service === 'bidding' && 
-layout === 'AdminSidebarLayout' && 
+layout === 'SubSidebarLayout' && 
 url.startsWith('/admin')
 ```
 
 #### Workcase AdminSidebar
 ```typescript
 service === 'workcase' && 
-layout === 'AdminSidebarLayout' && 
+layout === 'SubSidebarLayout' && 
 url.startsWith('/admin')
 ```
 
@@ -176,12 +176,12 @@ url.startsWith('/admin')
 
 ### 1. Layout 组件
 - **SidebarLayout**: 外层主侧边栏（platform 主界面）
-- **AdminSidebarLayout**: 内层管理侧边栏（各管理后台内部）
+- **SubSidebarLayout**: 内层管理侧边栏（各管理后台内部）
 - **BlankLayout**: 空白布局（如智能客服首页）
 
 ### 2. iframe 嵌套
 - 外层 platform 的 iframe 菜单 → 加载各服务的管理后台
-- 各服务内部使用 AdminSidebarLayout 渲染二级菜单
+- 各服务内部使用 SubSidebarLayout 渲染二级菜单
 - iframe_url 必须正确指向实际服务地址
 
 ### 3. 路由配置
@@ -203,7 +203,7 @@ url.startsWith('/admin')
 如果从旧的单层架构迁移到三层架构：
 
 1. **视图迁移**
-   - 将原 platform 的管理视图改为 `layout='AdminSidebarLayout'`
+   - 将原 platform 的管理视图改为 `layout='SubSidebarLayout'`
    - URL 统一改为 `/admin/*` 格式
    - 在 platform 主侧边栏添加 iframe 入口
 
@@ -213,7 +213,7 @@ url.startsWith('/admin')
    - 更新视图权限关联
 
 3. **前端组件**
-   - 创建 AdminSidebarLayout 组件（参考 workcase 实现）
+   - 创建 SubSidebarLayout 组件（参考 workcase 实现）
    - 更新 platform 路由配置支持 `/admin/*` 路径
    - 配置 iframe 路由指向各服务管理后台
 
diff --git a/urbanLifelineServ/.bin/database/postgres/sql/initDataPermission.sql b/urbanLifelineServ/.bin/database/postgres/sql/initDataPermission.sql
index 706fc597..bb8f42f0 100644
--- a/urbanLifelineServ/.bin/database/postgres/sql/initDataPermission.sql
+++ b/urbanLifelineServ/.bin/database/postgres/sql/initDataPermission.sql
@@ -201,38 +201,31 @@ INSERT INTO sys.tb_sys_view (
 -- =========================
 -- 平台应用菜单 (platform)
 -- =========================
--- 一级菜单
-('VIEW-P002', 'view_platform_chat', '泰豪AI助手', NULL, '/aichat', 'public/Chat/AIChatView.vue', 'ChatDotRound', 1, 
+-- 一级菜单 (图标使用 lucide-vue-next)
+('VIEW-P002', 'view_platform_chat', '泰豪AI助手', NULL, '/aichat', 'public/Chat/AIChatView.vue', 'MessageCircle', 1, 
  'route', NULL, 'platform', 'SidebarLayout', 10, '泰豪AI助手-直接智能体对话', 'system', now(), false),
-('VIEW-P001', 'view_platform_home', '全部应用', NULL, '/agents', 'public/Agents/AgentPlatformView.vue', 'Grid', 1, 
+('VIEW-P001', 'view_platform_home', '全部应用', NULL, '/agents', 'public/Agents/AgentPlatformView.vue', 'LayoutGrid', 1, 
  'route', NULL, 'platform', 'SidebarLayout', 20, '全部智能体', 'system', now(), false),
 -- iframe 嵌入菜单
 -- url: platform中的路由路径（用于sidebar定位和路由跳转）
 -- iframe_url: iframe的src地址（实际内容的URL）
-('VIEW-P005', 'view_platform_workflow', '智能体编排', NULL, '/app/workflow', NULL, 'Connection', 1, 
+('VIEW-P005', 'view_platform_workflow', '智能体编排', NULL, '/app/workflow', NULL, 'Workflow', 1, 
  'iframe', 'http://localhost:3000', 'platform', 'SidebarLayout', 30, 'Dify智能体编排（iframe）', 'system', now(), false),
-('VIEW-P003', 'view_platform_bidding', '招标助手', NULL, '/app/bidding', NULL, 'Document', 1, 
+('VIEW-P003', 'view_platform_bidding', '招标助手', NULL, '/app/bidding', NULL, 'FileText', 1, 
  'iframe', '/bidding/', 'platform', 'SidebarLayout', 40, '招标应用（iframe）', 'system', now(), false),
-('VIEW-P004', 'view_platform_workcase', '泰豪小电', NULL, '/app/workcase', NULL, 'Service', 1, 
+('VIEW-P004', 'view_platform_workcase', '泰豪小电', NULL, '/app/workcase', NULL, 'Headphones', 1, 
  'iframe', '/workcase/', 'platform', 'SidebarLayout', 50, '客服应用（iframe）', 'system', now(), false),
 
--- 管理后台入口（iframe类型，显示在外层主sidebar）
-('VIEW-P101', 'view_platform_admin_entry', '平台管理后台', NULL, '/admin/platform', NULL, 'Setting', 1, 
- 'iframe', '/platform/admin', 'platform', 'AdminIframeSidebarLayout', 100, '平台管理后台入口', 'system', now(), false),
-('VIEW-P102', 'view_bidding_admin_entry', '智能标书管理后台', NULL, '/admin/bidding', NULL, 'Document', 1, 
- 'iframe', '/bidding/admin', 'platform', 'AdminIframeSidebarLayout', 110, '智能标书管理后台入口', 'system', now(), false),
-('VIEW-P103', 'view_workcase_admin_entry', '泰豪小电管理后台', NULL, '/admin/workcase', NULL, 'Service', 1, 
- 'iframe', '/workcase/admin', 'platform', 'AdminIframeSidebarLayout', 120, '泰豪小电管理后台入口', 'system', now(), false),
 
--- 平台管理后台内部视图（AdminSidebarLayout布局，在platform服务内）
-('VIEW-P201', 'view_platform_admin_overview', '数据概览', NULL, '/admin/overview', 'admin/overview/OverviewView.vue', 'DataLine', 1, 
- 'route', NULL, 'platform', 'AdminSidebarLayout', 210, '平台数据概览', 'system', now(), false),
-('VIEW-P202', 'view_platform_admin_user', '用户管理', NULL, '/admin/userManagement', 'admin/userManagement/UserManagementView.vue', 'User', 1, 
- 'route', NULL, 'platform', 'AdminSidebarLayout', 220, '平台用户管理', 'system', now(), false),
-('VIEW-P203', 'view_platform_admin_knowledge', '知识库', NULL, '/admin/knowledge', 'admin/knowledge/KnowledgeView.vue', 'Document', 1, 
- 'route', NULL, 'platform', 'AdminSidebarLayout', 230, '平台知识库管理', 'system', now(), false),
-('VIEW-P204', 'view_platform_admin_config', '系统配置', NULL, '/admin/config', 'admin/config/ConfigView.vue', 'Setting', 1, 
- 'route', NULL, 'platform', 'AdminSidebarLayout', 240, '平台系统配置', 'system', now(), false),
+-- 平台管理后台内部视图（SubSidebarLayout布局，在platform服务内）
+('VIEW-P201', 'view_platform_admin_overview', '数据概览', NULL, '/admin/overview', 'admin/overview/OverviewView.vue', 'BarChart3', 1, 
+ 'route', NULL, 'platform', 'SubSidebarLayout', 210, '平台数据概览', 'system', now(), false),
+('VIEW-P202', 'view_platform_admin_user', '用户管理', NULL, '/admin/userManagement', 'admin/userManagement/UserManagementView.vue', 'Users', 1, 
+ 'route', NULL, 'platform', 'SubSidebarLayout', 220, '平台用户管理', 'system', now(), false),
+('VIEW-P203', 'view_platform_admin_knowledge', '知识库', NULL, '/admin/knowledge', 'admin/knowledge/KnowledgeView.vue', 'FileText', 1, 
+ 'route', NULL, 'platform', 'SubSidebarLayout', 230, '平台知识库管理', 'system', now(), false),
+('VIEW-P204', 'view_platform_admin_config', '系统配置', NULL, '/admin/config', 'admin/config/ConfigView.vue', 'Settings', 1, 
+ 'route', NULL, 'platform', 'SubSidebarLayout', 240, '平台系统配置', 'system', now(), false),
 
 -- -- 系统管理目录
 -- ('VIEW-P100', 'view_system', '系统管理', NULL, '/system', NULL, 'Settings', 0, 
@@ -276,40 +269,40 @@ INSERT INTO sys.tb_sys_view (
 --  'route', NULL, 'bidding', 'DefaultLayout', 40, '投标管理页面', 'system', now(), false),
 
 -- =========================
--- 客服应用菜单 (workcase)
+-- 客服应用菜单 (workcase) - 图标使用 lucide-vue-next
 -- =========================
 -- 用户端视图
-('VIEW-W001', 'view_workcase_home', '智能客服', NULL, '/aichat', 'public/AIChat/AIChatView.vue', 'House', 3, 
- 'route', NULL, 'workcase', 'BlankLayout', 10, '智能客服首页', 'system', now(), false),
+('VIEW-W001', 'view_workcase_home', '智能客服', NULL, '/aichat', 'public/AIChat/AIChatView.vue', 'Home', 1, 
+ 'route', NULL, 'workcase', 'SubSidebarLayout', 10, '智能客服首页', 'system', now(), false),
 
--- 管理端视图（使用 AdminSidebarLayout 布局）
-('VIEW-W101', 'view_workcase_admin_overview', '数据概览', NULL, '/admin/overview', 'admin/overview/OverviewView.vue', 'DataLine', 1, 
- 'route', NULL, 'workcase', 'AdminSidebarLayout', 110, '泰豪小电数据概览', 'system', now(), false),
+-- 管理端视图（使用 SubSidebarLayout 布局）
+('VIEW-W101', 'view_workcase_admin_overview', '数据概览', NULL, '/admin/overview', 'admin/overview/OverviewView.vue', 'BarChart3', 1, 
+ 'route', NULL, 'workcase', 'SubSidebarLayout', 110, '泰豪小电数据概览', 'system', now(), false),
 
-('VIEW-W102', 'view_workcase_admin_knowledge', '知识库管理', NULL, '/admin/knowledge', 'admin/knowledge/KnowLedgeView.vue', 'Document', 1, 
- 'route', NULL, 'workcase', 'AdminSidebarLayout', 120, '知识库文档管理', 'system', now(), false),
+('VIEW-W102', 'view_workcase_admin_knowledge', '知识库管理', NULL, '/admin/knowledge', 'admin/knowledge/KnowLedgeView.vue', 'FileText', 1, 
+ 'route', NULL, 'workcase', 'SubSidebarLayout', 120, '知识库文档管理', 'system', now(), false),
 
-('VIEW-W103', 'view_workcase_admin_tickets', '工单管理', NULL, '/admin/workcase', 'admin/workcase/WorkcaseView.vue', 'Tickets', 1, 
- 'route', NULL, 'workcase', 'AdminSidebarLayout', 130, '客服工单管理', 'system', now(), false),
+('VIEW-W103', 'view_workcase_admin_tickets', '工单管理', NULL, '/admin/workcase', 'admin/workcase/WorkcaseView.vue', 'Ticket', 1, 
+ 'route', NULL, 'workcase', 'SubSidebarLayout', 130, '客服工单管理', 'system', now(), false),
 
-('VIEW-W104', 'view_workcase_admin_conversation', '对话数据', NULL, '/admin/customerChat', 'admin/customerChat/CustomerChatView.vue', 'ChatDotRound', 1, 
- 'route', NULL, 'workcase', 'AdminSidebarLayout', 140, '客户对话数据管理', 'system', now(), false),
+('VIEW-W104', 'view_workcase_admin_conversation', '对话数据', NULL, '/admin/customerChat', 'admin/customerChat/CustomerChatView.vue', 'MessageCircle', 1, 
+ 'route', NULL, 'workcase', 'SubSidebarLayout', 140, '客户对话数据管理', 'system', now(), false),
 
-('VIEW-W105', 'view_workcase_admin_agent', '智能体管理', NULL, '/admin/agent', 'admin/agent/AgentView.vue', 'Service', 1, 
- 'route', NULL, 'workcase', 'AdminSidebarLayout', 150, '智能体配置管理', 'system', now(), false),
+('VIEW-W105', 'view_workcase_admin_agent', '智能体管理', NULL, '/admin/agent', 'admin/agent/AgentView.vue', 'Bot', 1, 
+ 'route', NULL, 'workcase', 'SubSidebarLayout', 150, '智能体配置管理', 'system', now(), false),
 
 -- 日志管理（带子级的目录）
-('VIEW-W106', 'view_workcase_admin_log', '日志管理', NULL, '/admin/log', NULL, 'List', 0, 
- 'route', NULL, 'workcase', 'AdminSidebarLayout', 160, '日志管理目录', 'system', now(), false),
+('VIEW-W106', 'view_workcase_admin_log', '日志管理', NULL, '/admin/log', NULL, 'ScrollText', 1, 
+ 'route', NULL, 'workcase', 'SubSidebarLayout', 160, '日志管理目录', 'system', now(), false),
 
-('VIEW-W107', 'view_workcase_admin_log_knowledge', '知识库日志', 'view_workcase_admin_log', '/admin/log/knowledge', 'admin/log/knowledgeLog/KnowledgeLogView.vue', 'Document', 1, 
- 'route', NULL, 'workcase', 'AdminSidebarLayout', 161, '知识库操作日志', 'system', now(), false),
+('VIEW-W107', 'view_workcase_admin_log_knowledge', '知识库日志', 'view_workcase_admin_log', '/admin/log/knowledge', 'admin/log/knowledgeLog/KnowledgeLogView.vue', 'FileText', 1, 
+ 'route', NULL, 'workcase', NULL, 161, '知识库操作日志', 'system', now(), false),
 
-('VIEW-W108', 'view_workcase_admin_log_workcase', '工单日志', 'view_workcase_admin_log', '/admin/log/workcase', 'admin/log/workcaseLog/WorkcaseLogView.vue', 'Tickets', 1, 
- 'route', NULL, 'workcase', 'AdminSidebarLayout', 162, '工单操作日志', 'system', now(), false),
+('VIEW-W108', 'view_workcase_admin_log_workcase', '工单日志', 'view_workcase_admin_log', '/admin/log/workcase', 'admin/log/workcaseLog/WorkcaseLogView.vue', 'Ticket', 1, 
+ 'route', NULL, 'workcase', NULL, 162, '工单操作日志', 'system', now(), false),
 
-('VIEW-W109', 'view_workcase_admin_log_system', '系统日志', 'view_workcase_admin_log', '/admin/log/system', 'admin/log/systemLog/SystemLogView.vue', 'Setting', 1, 
- 'route', NULL, 'workcase', 'AdminSidebarLayout', 163, '系统运行日志', 'system', now(), false);
+('VIEW-W109', 'view_workcase_admin_log_system', '系统日志', 'view_workcase_admin_log', '/admin/log/system', 'admin/log/systemLog/SystemLogView.vue', 'Settings', 1, 
+ 'route', NULL, 'workcase', NULL, 163, '系统运行日志', 'system', now(), false);
 
 -- =============================
 -- 6. 角色权限关联（超级管理员拥有所有权限）
@@ -397,7 +390,7 @@ INSERT INTO sys.tb_sys_view_permission (
 ('VP-P102', 'view_bidding_admin_entry', 'perm_bidding_admin', 'system', NULL, now(), false),
 ('VP-P103', 'view_workcase_admin_entry', 'perm_workcase_admin', 'system', NULL, now(), false),
 
--- 平台管理后台内部视图权限关联（AdminSidebarLayout）
+-- 平台管理后台内部视图权限关联（SubSidebarLayout）
 ('VP-P201', 'view_platform_admin_overview', 'perm_platform_admin_overview', 'system', NULL, now(), false),
 ('VP-P202', 'view_platform_admin_user', 'perm_platform_admin_user', 'system', NULL, now(), false),
 ('VP-P203', 'view_platform_admin_knowledge', 'perm_platform_admin_knowledge', 'system', NULL, now(), false),
diff --git a/urbanLifelineServ/.bin/database/postgres/sql/workcase_admin_routes_summary.md b/urbanLifelineServ/.bin/database/postgres/sql/workcase_admin_routes_summary.md
index 129959ce..efebe5f2 100644
--- a/urbanLifelineServ/.bin/database/postgres/sql/workcase_admin_routes_summary.md
+++ b/urbanLifelineServ/.bin/database/postgres/sql/workcase_admin_routes_summary.md
@@ -94,7 +94,7 @@
 - VP-W106 ~ VP-W109: 日志管理视图（含父级和3个子级）
 
 ## 布局配置
-- **Layout**: `AdminSidebarLayout`
+- **Layout**: `SubSidebarLayout`
 - **Service**: `workcase`
 - **Type**: 1 (菜单项) / 0 (目录)
 - **View Type**: `route`
@@ -111,7 +111,7 @@
   - 163: 系统日志
 
 ## 路由过滤规则
-在 `AdminSidebarLayout.vue` 的 `loadMenuFromStorage()` 中：
+在 `SubSidebarLayout.vue` 的 `loadMenuFromStorage()` 中：
 ```typescript
 const sidebarViews = userViews.filter((view: any) => 
     view.layout === 'SidebarLayout' &&  // 使用 SidebarLayout 布局
@@ -125,6 +125,6 @@ const sidebarViews = userViews.filter((view: any) =>
 ## 注意事项
 1. 所有管理端路由都以 `/admin/` 开头
 2. 日志管理使用父子级结构（type=0 的目录 + type=1 的子菜单）
-3. 所有视图都使用 `AdminSidebarLayout` 布局
+3. 所有视图都使用 `SubSidebarLayout` 布局
 4. 权限都归属于 `module_workcase` 模块
 5. 超级管理员和系统管理员默认拥有所有 workcase 管理端权限
diff --git a/urbanLifelineWeb/.windsurf/workflows/urban-lifeline-web.md b/urbanLifelineWeb/.windsurf/workflows/urban-lifeline-web.md
new file mode 100644
index 00000000..93a66856
--- /dev/null
+++ b/urbanLifelineWeb/.windsurf/workflows/urban-lifeline-web.md
@@ -0,0 +1 @@
+lucide-vue-next 使用这个图标库替代elementplus的图标库
\ No newline at end of file
diff --git a/urbanLifelineWeb/package-lock.json b/urbanLifelineWeb/package-lock.json
index 28383f67..132c5333 100644
--- a/urbanLifelineWeb/package-lock.json
+++ b/urbanLifelineWeb/package-lock.json
@@ -3507,6 +3507,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-vue-next": {
+      "version": "0.561.0",
+      "resolved": "https://registry.npmmirror.com/lucide-vue-next/-/lucide-vue-next-0.561.0.tgz",
+      "integrity": "sha512-c5HUckO0qHklVSOf/0vaSR3pEb8fYImRDCRDLde56uqS9js0D/e3RAvq0/YFWjkmyOBKCb0/IdskdoHZQEkT5g==",
+      "license": "ISC",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",
@@ -5394,6 +5403,7 @@
         "@vueuse/core": "^11.3.0",
         "axios": "^1.7.9",
         "element-plus": "^2.12.0",
+        "lucide-vue-next": "^0.561.0",
         "pinia": "^2.2.8",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
@@ -5416,6 +5426,7 @@
         "cors": "^2.8.5",
         "element-plus": "^2.12.0",
         "express": "^4.18.2",
+        "lucide-vue-next": "^0.561.0",
         "ofetch": "^1.4.1",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
@@ -6896,6 +6907,7 @@
         "@vueuse/core": "^11.3.0",
         "axios": "^1.7.9",
         "element-plus": "^2.8.6",
+        "lucide-vue-next": "^0.561.0",
         "pinia": "^2.2.8",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
diff --git a/urbanLifelineWeb/packages/bidding/src/layouts/SidebarLayout/SidebarLayout.vue b/urbanLifelineWeb/packages/bidding/src/layouts/SidebarLayout/SidebarLayout.vue
index 782e93ee..8ac1572d 100644
--- a/urbanLifelineWeb/packages/bidding/src/layouts/SidebarLayout/SidebarLayout.vue
+++ b/urbanLifelineWeb/packages/bidding/src/layouts/SidebarLayout/SidebarLayout.vue
@@ -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'
 
diff --git a/urbanLifelineWeb/packages/bidding/src/layouts/index.ts b/urbanLifelineWeb/packages/bidding/src/layouts/index.ts
index 387ddeff..cbbe43a3 100644
--- a/urbanLifelineWeb/packages/bidding/src/layouts/index.ts
+++ b/urbanLifelineWeb/packages/bidding/src/layouts/index.ts
@@ -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'
diff --git a/urbanLifelineWeb/packages/bidding/src/router/dynamicRoute.ts b/urbanLifelineWeb/packages/bidding/src/router/dynamicRoute.ts
index 9d5c83db..c8c369aa 100644
--- a/urbanLifelineWeb/packages/bidding/src/router/dynamicRoute.ts
+++ b/urbanLifelineWeb/packages/bidding/src/router/dynamicRoute.ts
@@ -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 })
 }
 
 // 视图组件加载器
diff --git a/urbanLifelineWeb/packages/bidding/src/types/shared.d.ts b/urbanLifelineWeb/packages/bidding/src/types/shared.d.ts
index 235e0047..7cc0755f 100644
--- a/urbanLifelineWeb/packages/bidding/src/types/shared.d.ts
+++ b/urbanLifelineWeb/packages/bidding/src/types/shared.d.ts
@@ -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>
 }
diff --git a/urbanLifelineWeb/packages/platform/ROUTE_GUIDE.md b/urbanLifelineWeb/packages/platform/ROUTE_GUIDE.md
index e05408c6..b534adcf 100644
--- a/urbanLifelineWeb/packages/platform/ROUTE_GUIDE.md
+++ b/urbanLifelineWeb/packages/platform/ROUTE_GUIDE.md
@@ -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)
diff --git a/urbanLifelineWeb/packages/platform/package.json b/urbanLifelineWeb/packages/platform/package.json
index 0e6f8b71..b645e8b0 100644
--- a/urbanLifelineWeb/packages/platform/package.json
+++ b/urbanLifelineWeb/packages/platform/package.json
@@ -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"
diff --git a/urbanLifelineWeb/packages/platform/src/layouts/AdminIframeSidebarLayout/AdminIframeSidebarLayout.scss b/urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/AdminSidebarLayout.scss
similarity index 68%
rename from urbanLifelineWeb/packages/platform/src/layouts/AdminIframeSidebarLayout/AdminIframeSidebarLayout.scss
rename to urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/AdminSidebarLayout.scss
index c3479624..10c3db4e 100644
--- a/urbanLifelineWeb/packages/platform/src/layouts/AdminIframeSidebarLayout/AdminIframeSidebarLayout.scss
+++ b/urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/AdminSidebarLayout.scss
@@ -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);
         }
     }
     
diff --git a/urbanLifelineWeb/packages/platform/src/layouts/AdminIframeSidebarLayout/AdminIframeSidebarLayout.vue b/urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/AdminSidebarLayout.vue
similarity index 89%
rename from urbanLifelineWeb/packages/platform/src/layouts/AdminIframeSidebarLayout/AdminIframeSidebarLayout.vue
rename to urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/AdminSidebarLayout.vue
index d75b87cc..b8dae86a 100644
--- a/urbanLifelineWeb/packages/platform/src/layouts/AdminIframeSidebarLayout/AdminIframeSidebarLayout.vue
+++ b/urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/AdminSidebarLayout.vue
@@ -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>
\ No newline at end of file
diff --git a/urbanLifelineWeb/packages/platform/src/layouts/AdminIframeSidebarLayout/README.md b/urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/README.md
similarity index 100%
rename from urbanLifelineWeb/packages/platform/src/layouts/AdminIframeSidebarLayout/README.md
rename to urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout/README.md
diff --git a/urbanLifelineWeb/packages/platform/src/layouts/SidebarLayout/SidebarLayout.scss b/urbanLifelineWeb/packages/platform/src/layouts/SidebarLayout/SidebarLayout.scss
index c3a40ef7..9b3dd704 100644
--- a/urbanLifelineWeb/packages/platform/src/layouts/SidebarLayout/SidebarLayout.scss
+++ b/urbanLifelineWeb/packages/platform/src/layouts/SidebarLayout/SidebarLayout.scss
@@ -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);
         }
     }
     
diff --git a/urbanLifelineWeb/packages/platform/src/layouts/SidebarLayout/SidebarLayout.vue b/urbanLifelineWeb/packages/platform/src/layouts/SidebarLayout/SidebarLayout.vue
index a6d3dc06..a446c3e4 100644
--- a/urbanLifelineWeb/packages/platform/src/layouts/SidebarLayout/SidebarLayout.vue
+++ b/urbanLifelineWeb/packages/platform/src/layouts/SidebarLayout/SidebarLayout.vue
@@ -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) {
diff --git a/urbanLifelineWeb/packages/platform/src/layouts/index.ts b/urbanLifelineWeb/packages/platform/src/layouts/index.ts
index 56b811d1..2966e5b8 100644
--- a/urbanLifelineWeb/packages/platform/src/layouts/index.ts
+++ b/urbanLifelineWeb/packages/platform/src/layouts/index.ts
@@ -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';
\ No newline at end of file
+export { BlankLayout, SubSidebarLayout } from 'shared/layouts';
\ No newline at end of file
diff --git a/urbanLifelineWeb/packages/platform/src/main.ts b/urbanLifelineWeb/packages/platform/src/main.ts
index 80c6e80e..a25b1b37 100644
--- a/urbanLifelineWeb/packages/platform/src/main.ts
+++ b/urbanLifelineWeb/packages/platform/src/main.ts
@@ -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. 注册路由
diff --git a/urbanLifelineWeb/packages/platform/src/router/dynamicRoute.ts b/urbanLifelineWeb/packages/platform/src/router/dynamicRoute.ts
index f75e2537..b5bb96e5 100644
--- a/urbanLifelineWeb/packages/platform/src/router/dynamicRoute.ts
+++ b/urbanLifelineWeb/packages/platform/src/router/dynamicRoute.ts
@@ -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 })
 }
 
 // 视图组件加载器
diff --git a/urbanLifelineWeb/packages/platform/src/types/shared.d.ts b/urbanLifelineWeb/packages/platform/src/types/shared.d.ts
index 302292d9..24c3dae3 100644
--- a/urbanLifelineWeb/packages/platform/src/types/shared.d.ts
+++ b/urbanLifelineWeb/packages/platform/src/types/shared.d.ts
@@ -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>
 
 }
diff --git a/urbanLifelineWeb/packages/platform/src/views/public/Agents/AgentPlatformView.scss b/urbanLifelineWeb/packages/platform/src/views/public/Agents/AgentPlatformView.scss
index 4e364a69..140bdd06 100644
--- a/urbanLifelineWeb/packages/platform/src/views/public/Agents/AgentPlatformView.scss
+++ b/urbanLifelineWeb/packages/platform/src/views/public/Agents/AgentPlatformView.scss
@@ -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;
         }
     }
 }
diff --git a/urbanLifelineWeb/packages/platform/src/views/public/Agents/AgentPlatformView.vue b/urbanLifelineWeb/packages/platform/src/views/public/Agents/AgentPlatformView.vue
index e9d3e45d..5e56e3fc 100644
--- a/urbanLifelineWeb/packages/platform/src/views/public/Agents/AgentPlatformView.vue
+++ b/urbanLifelineWeb/packages/platform/src/views/public/Agents/AgentPlatformView.vue
@@ -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
diff --git a/urbanLifelineWeb/packages/platform/src/views/public/Agents/components/AgentCard/AgentCard.scss b/urbanLifelineWeb/packages/platform/src/views/public/Agents/components/AgentCard/AgentCard.scss
index 332d770a..37be7b73 100644
--- a/urbanLifelineWeb/packages/platform/src/views/public/Agents/components/AgentCard/AgentCard.scss
+++ b/urbanLifelineWeb/packages/platform/src/views/public/Agents/components/AgentCard/AgentCard.scss
@@ -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);
     }
     
diff --git a/urbanLifelineWeb/packages/platform/src/views/public/Agents/components/AgentEdit/AgentEdit.vue b/urbanLifelineWeb/packages/platform/src/views/public/Agents/components/AgentEdit/AgentEdit.vue
index aab42a7c..86b8d747 100644
--- a/urbanLifelineWeb/packages/platform/src/views/public/Agents/components/AgentEdit/AgentEdit.vue
+++ b/urbanLifelineWeb/packages/platform/src/views/public/Agents/components/AgentEdit/AgentEdit.vue
@@ -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', {
diff --git a/urbanLifelineWeb/packages/platform/src/views/public/Chat/AIChatView.scss b/urbanLifelineWeb/packages/platform/src/views/public/Chat/AIChatView.scss
index 9a7cdb87..f8ec433a 100644
--- a/urbanLifelineWeb/packages/platform/src/views/public/Chat/AIChatView.scss
+++ b/urbanLifelineWeb/packages/platform/src/views/public/Chat/AIChatView.scss
@@ -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 {
diff --git a/urbanLifelineWeb/packages/platform/src/views/public/Chat/components/ChatDefault/ChatDefault.scss b/urbanLifelineWeb/packages/platform/src/views/public/Chat/components/ChatDefault/ChatDefault.scss
index b13907d8..763f8793 100644
--- a/urbanLifelineWeb/packages/platform/src/views/public/Chat/components/ChatDefault/ChatDefault.scss
+++ b/urbanLifelineWeb/packages/platform/src/views/public/Chat/components/ChatDefault/ChatDefault.scss
@@ -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);
         }
         
diff --git a/urbanLifelineWeb/packages/shared/package.json b/urbanLifelineWeb/packages/shared/package.json
index 6a86c966..d91895ec 100644
--- a/urbanLifelineWeb/packages/shared/package.json
+++ b/urbanLifelineWeb/packages/shared/package.json
@@ -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"
diff --git a/urbanLifelineWeb/packages/shared/src/components/iframe/IframeView.vue b/urbanLifelineWeb/packages/shared/src/components/iframe/IframeView.vue
index 1e35c572..3c58c2cc 100644
--- a/urbanLifelineWeb/packages/shared/src/components/iframe/IframeView.vue
+++ b/urbanLifelineWeb/packages/shared/src/components/iframe/IframeView.vue
@@ -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)
diff --git a/urbanLifelineWeb/packages/shared/src/layouts/AdminSidebarLayout/AdminSidebarLayout.scss b/urbanLifelineWeb/packages/shared/src/layouts/AdminSidebarLayout/AdminSidebarLayout.scss
deleted file mode 100644
index 83c75086..00000000
--- a/urbanLifelineWeb/packages/shared/src/layouts/AdminSidebarLayout/AdminSidebarLayout.scss
+++ /dev/null
@@ -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;
-        }
-    }
-}
diff --git a/urbanLifelineWeb/packages/shared/src/layouts/AdminSidebarLayout/AdminSidebarLayout.vue b/urbanLifelineWeb/packages/shared/src/layouts/AdminSidebarLayout/AdminSidebarLayout.vue
index 80b3cd06..0741b3f1 100644
--- a/urbanLifelineWeb/packages/shared/src/layouts/AdminSidebarLayout/AdminSidebarLayout.vue
+++ b/urbanLifelineWeb/packages/shared/src/layouts/AdminSidebarLayout/AdminSidebarLayout.vue
@@ -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>
\ No newline at end of file
diff --git a/urbanLifelineWeb/packages/shared/src/layouts/SubSidebarLayout/SubSidebarLayout.scss b/urbanLifelineWeb/packages/shared/src/layouts/SubSidebarLayout/SubSidebarLayout.scss
new file mode 100644
index 00000000..34fcab13
--- /dev/null
+++ b/urbanLifelineWeb/packages/shared/src/layouts/SubSidebarLayout/SubSidebarLayout.scss
@@ -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;
+        }
+    }
+}
diff --git a/urbanLifelineWeb/packages/shared/src/layouts/SubSidebarLayout/SubSidebarLayout.vue b/urbanLifelineWeb/packages/shared/src/layouts/SubSidebarLayout/SubSidebarLayout.vue
new file mode 100644
index 00000000..7f6688dd
--- /dev/null
+++ b/urbanLifelineWeb/packages/shared/src/layouts/SubSidebarLayout/SubSidebarLayout.vue
@@ -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>
\ No newline at end of file
diff --git a/urbanLifelineWeb/packages/shared/src/layouts/index.ts b/urbanLifelineWeb/packages/shared/src/layouts/index.ts
index be278f62..132973df 100644
--- a/urbanLifelineWeb/packages/shared/src/layouts/index.ts
+++ b/urbanLifelineWeb/packages/shared/src/layouts/index.ts
@@ -1,2 +1,2 @@
 export { default as BlankLayout } from './BlankLayout/BlankLayout.vue'
-export { default as AdminSidebarLayout } from './AdminSidebarLayout/AdminSidebarLayout.vue'
\ No newline at end of file
+export { default as SubSidebarLayout } from './SubSidebarLayout/SubSidebarLayout.vue'
\ No newline at end of file
diff --git a/urbanLifelineWeb/packages/shared/src/types/enums.ts b/urbanLifelineWeb/packages/shared/src/types/enums.ts
index 0bd7386c..afa1cbcd 100644
--- a/urbanLifelineWeb/packages/shared/src/types/enums.ts
+++ b/urbanLifelineWeb/packages/shared/src/types/enums.ts
@@ -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       // 空白页/路由页面
 }
diff --git a/urbanLifelineWeb/packages/shared/src/utils/route/route-generator.ts b/urbanLifelineWeb/packages/shared/src/utils/route/route-generator.ts
index c591ddce..49b97637 100644
--- a/urbanLifelineWeb/packages/shared/src/utils/route/route-generator.ts
+++ b/urbanLifelineWeb/packages/shared/src/utils/route/route-generator.ts
@@ -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__',
             }
diff --git a/urbanLifelineWeb/packages/workcase/package.json b/urbanLifelineWeb/packages/workcase/package.json
index fbd16a22..752cb3df 100644
--- a/urbanLifelineWeb/packages/workcase/package.json
+++ b/urbanLifelineWeb/packages/workcase/package.json
@@ -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"
diff --git a/urbanLifelineWeb/packages/workcase/public/logo.jpg b/urbanLifelineWeb/packages/workcase/public/logo.jpg
index 18b5da66..0e05546b 100644
Binary files a/urbanLifelineWeb/packages/workcase/public/logo.jpg and b/urbanLifelineWeb/packages/workcase/public/logo.jpg differ
diff --git a/urbanLifelineWeb/packages/workcase/src/layouts/SidebarLayout/SidebarLayout.scss b/urbanLifelineWeb/packages/workcase/src/layouts/SidebarLayout/SidebarLayout.scss
index 83c75086..9d7c3f6d 100644
--- a/urbanLifelineWeb/packages/workcase/src/layouts/SidebarLayout/SidebarLayout.scss
+++ b/urbanLifelineWeb/packages/workcase/src/layouts/SidebarLayout/SidebarLayout.scss
@@ -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);
         }
     }
     
diff --git a/urbanLifelineWeb/packages/workcase/src/layouts/SidebarLayout/SidebarLayout.vue b/urbanLifelineWeb/packages/workcase/src/layouts/SidebarLayout/SidebarLayout.vue
index 41e5e6bf..c5d416a9 100644
--- a/urbanLifelineWeb/packages/workcase/src/layouts/SidebarLayout/SidebarLayout.vue
+++ b/urbanLifelineWeb/packages/workcase/src/layouts/SidebarLayout/SidebarLayout.vue
@@ -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'
 
diff --git a/urbanLifelineWeb/packages/workcase/src/layouts/index.ts b/urbanLifelineWeb/packages/workcase/src/layouts/index.ts
index 90b1b142..2b00f323 100644
--- a/urbanLifelineWeb/packages/workcase/src/layouts/index.ts
+++ b/urbanLifelineWeb/packages/workcase/src/layouts/index.ts
@@ -1,4 +1,4 @@
 export { default as SidebarLayout } from './SidebarLayout/SidebarLayout.vue'
 
 // BlankLayout从shared导入
-export { BlankLayout, AdminSidebarLayout } from 'shared/layouts';
\ No newline at end of file
+export { BlankLayout, SubSidebarLayout } from 'shared/layouts';
\ No newline at end of file
diff --git a/urbanLifelineWeb/packages/workcase/src/main.ts b/urbanLifelineWeb/packages/workcase/src/main.ts
index 7989bfc7..35be8e88 100644
--- a/urbanLifelineWeb/packages/workcase/src/main.ts
+++ b/urbanLifelineWeb/packages/workcase/src/main.ts
@@ -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. 注册路由
diff --git a/urbanLifelineWeb/packages/workcase/src/router/dynamicRoute.ts b/urbanLifelineWeb/packages/workcase/src/router/dynamicRoute.ts
index cf768a77..46103145 100644
--- a/urbanLifelineWeb/packages/workcase/src/router/dynamicRoute.ts
+++ b/urbanLifelineWeb/packages/workcase/src/router/dynamicRoute.ts
@@ -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 })
 }
 
 // 视图组件加载器
diff --git a/urbanLifelineWeb/packages/workcase/src/router/index.ts b/urbanLifelineWeb/packages/workcase/src/router/index.ts
index e6ce70e6..0acc4840 100644
--- a/urbanLifelineWeb/packages/workcase/src/router/index.ts
+++ b/urbanLifelineWeb/packages/workcase/src/router/index.ts
@@ -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 字段
         )
diff --git a/urbanLifelineWeb/packages/workcase/src/types/shared.d.ts b/urbanLifelineWeb/packages/workcase/src/types/shared.d.ts
index 582881e5..fba0c08d 100644
--- a/urbanLifelineWeb/packages/workcase/src/types/shared.d.ts
+++ b/urbanLifelineWeb/packages/workcase/src/types/shared.d.ts
@@ -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>
 }
diff --git a/urbanLifelineWeb/packages/workcase/src/views/admin/workcase/WorkcaseView.scss b/urbanLifelineWeb/packages/workcase/src/views/admin/workcase/WorkcaseView.scss
index e69de29b..7ab2a540 100644
--- a/urbanLifelineWeb/packages/workcase/src/views/admin/workcase/WorkcaseView.scss
+++ b/urbanLifelineWeb/packages/workcase/src/views/admin/workcase/WorkcaseView.scss
@@ -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;
+        }
+    }
+}
diff --git a/urbanLifelineWeb/packages/workcase/src/views/admin/workcase/WorkcaseView.vue b/urbanLifelineWeb/packages/workcase/src/views/admin/workcase/WorkcaseView.vue
index 1caec58d..8582a87f 100644
--- a/urbanLifelineWeb/packages/workcase/src/views/admin/workcase/WorkcaseView.vue
+++ b/urbanLifelineWeb/packages/workcase/src/views/admin/workcase/WorkcaseView.vue
@@ -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>
\ No newline at end of file
diff --git a/urbanLifelineWeb/packages/workcase/src/views/public/AIChat/AIChatView.scss b/urbanLifelineWeb/packages/workcase/src/views/public/AIChat/AIChatView.scss
index 8446df4d..5b820fcc 100644
--- a/urbanLifelineWeb/packages/workcase/src/views/public/AIChat/AIChatView.scss
+++ b/urbanLifelineWeb/packages/workcase/src/views/public/AIChat/AIChatView.scss
@@ -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;
     }
 }
diff --git a/urbanLifelineWeb/packages/workcase/src/views/public/AIChat/AIChatView.vue b/urbanLifelineWeb/packages/workcase/src/views/public/AIChat/AIChatView.vue
index 259f694e..e3405f3b 100644
--- a/urbanLifelineWeb/packages/workcase/src/views/public/AIChat/AIChatView.vue
+++ b/urbanLifelineWeb/packages/workcase/src/views/public/AIChat/AIChatView.vue
@@ -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">
diff --git a/urbanLifelineWeb/packages/workcase/src/views/public/AIChat/components/ChatHistory.vue b/urbanLifelineWeb/packages/workcase/src/views/public/AIChat/components/ChatHistory.vue
index 2fd8bbf8..459883a6 100644
--- a/urbanLifelineWeb/packages/workcase/src/views/public/AIChat/components/ChatHistory.vue
+++ b/urbanLifelineWeb/packages/workcase/src/views/public/AIChat/components/ChatHistory.vue
@@ -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;
diff --git a/urbanLifelineWeb/temp/deviceUtils.ts b/urbanLifelineWeb/temp/deviceUtils.ts
deleted file mode 100644
index 60427cda..00000000
--- a/urbanLifelineWeb/temp/deviceUtils.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { ref, onMounted, onUnmounted } from 'vue';
-
-/**
- * 设备类型枚举
- */
-export enum DeviceType {
-  MOBILE = 'mobile',  // h5移动端
-  DESKTOP = 'desktop' // web桌面端
-}
-
-/**
- * 屏幕尺寸断点
- */
-export const BREAKPOINTS = {
-  mobile: 768,   // 小于768px为移动端(h5)
-  desktop: 768   // 大于等于768px为桌面端(web)
-};
-
-/**
- * 检测当前设备类型
- */
-export function getDeviceType(): DeviceType {
-  const width = window.innerWidth;
-  
-  if (width < BREAKPOINTS.mobile) {
-    return DeviceType.MOBILE;  // h5移动端
-  } else {
-    return DeviceType.DESKTOP; // web桌面端
-  }
-}
-
-/**
- * 检测是否为移动端
- */
-export function isMobile(): boolean {
-  return getDeviceType() === DeviceType.MOBILE;
-}
-
-/**
- * 检测是否为桌面端
- */
-export function isDesktop(): boolean {
-  return getDeviceType() === DeviceType.DESKTOP;
-}
-
-/**
- * 响应式设备类型 Hook
- */
-export function useDevice() {
-  const deviceType = ref<DeviceType>(getDeviceType());
-  const isMobileDevice = ref(isMobile());
-  const isDesktopDevice = ref(isDesktop());
-
-  const updateDeviceType = () => {
-    deviceType.value = getDeviceType();
-    isMobileDevice.value = isMobile();
-    isDesktopDevice.value = isDesktop();
-  };
-
-  onMounted(() => {
-    window.addEventListener('resize', updateDeviceType);
-  });
-
-  onUnmounted(() => {
-    window.removeEventListener('resize', updateDeviceType);
-  });
-
-  return {
-    deviceType,
-    isMobileDevice,
-    isDesktopDevice
-  };
-}
-
-/**
- * 根据设备类型获取对应的组件路径
- */
-export function getComponentPath(basePath: string, deviceType?: DeviceType): string {
-  const currentDeviceType = deviceType || getDeviceType();
-  
-  // 如果是移动端(h5)，尝试加载移动端版本
-  if (currentDeviceType === DeviceType.MOBILE) {
-    const mobilePath = basePath.replace('.vue', '.mobile.vue');
-    return mobilePath;
-  }
-  
-  // 默认返回桌面版本(web)
-  return basePath;
-}
-
-/**
- * 动态导入组件，支持回退机制
- */
-export async function importResponsiveComponent(basePath: string) {
-  const deviceType = getDeviceType();
-  
-  // 尝试加载设备特定的组件
-  if (deviceType === DeviceType.MOBILE) {
-    try {
-      const mobilePath = basePath.replace('.vue', '.mobile.vue');
-      return await import(/* @vite-ignore */ mobilePath);
-    } catch {
-      // 移动端组件不存在，回退到默认组件
-    }
-  }
-  
-  // 加载默认组件(桌面端/web)
-  return await import(/* @vite-ignore */ basePath);
-}
diff --git a/urbanLifelineWeb/temp/route-generator.ts b/urbanLifelineWeb/temp/route-generator.ts
deleted file mode 100644
index c2f82b91..00000000
--- a/urbanLifelineWeb/temp/route-generator.ts
+++ /dev/null
@@ -1,586 +0,0 @@
-/**
- * @description 动态路由生成器
- * @author yslg
- * @since 2025-10-07
- */
-
-import type { RouteRecordRaw } from 'vue-router';
-import type { SysMenu } from '@/types';
-import { MenuType } from '@/types/enums';
-import { routes } from '@/router';
-import { getResponsiveLayout, createResponsiveRoute, type RouteAdapter } from './routeAdapter';
-
-// 预注册所有视图组件，构建时由 Vite 解析并生成按需加载的 chunk
-const VIEW_MODULES = import.meta.glob('../views/**/*.vue');
-
-/**
- * 布局组件映射 - 使用响应式布局适配
- */
-const LAYOUT_MAP: Record<string, () => Promise<any>> = {
-  // 基础布局（旧版，带侧边栏）
-  'BasicLayout': getResponsiveLayout('BasicLayout'),
-  // 导航布局（新版，顶部导航+动态侧边栏）
-  'NavigationLayout': getResponsiveLayout('NavigationLayout'),
-  // 侧边栏布局（管理后台专用，顶层SIDEBAR菜单）
-  'SidebarLayout': getResponsiveLayout('SidebarLayout'),
-  // 空白布局
-  'BlankLayout': getResponsiveLayout('BlankLayout'),
-  // 页面布局
-  'PageLayout': getResponsiveLayout('PageLayout'),
-  // 路由占位组件（用于没有组件的子路由）
-  'RoutePlaceholder': () => import('@/layouts/RoutePlaceholder.vue'),
-  // 用户中心布局（有共用区域，避免重复查询）
-  'UserCenterLayout': () => import('@/views/user/user-center/UserCenterLayout.vue'),
-};
-
-/**
- * 根据菜单生成路由配置
- * @param menus 用户菜单列表
- * @returns Vue Router路由配置数组
- */
-export function generateRoutes(menus: SysMenu[]): RouteRecordRaw[] {
-  if (!menus || menus.length === 0) {
-    return [];
-  }
-  
-  const routes: RouteRecordRaw[] = [];
-  const pageRoutes: RouteRecordRaw[] = [];
-  
-  // 构建菜单树
-  const menuTree = buildMenuTree(menus);
-  
-  // 生成路由
-  menuTree.forEach(menu => {
-    const route = generateRouteFromMenu(menu);
-    
-    if (route) {
-      routes.push(route);
-      
-      // 递归提取所有 PAGE 类型的子菜单
-      extractPageChildren(route, pageRoutes);
-    }
-  });
-  
-  // 将 PAGE 类型的路由添加到路由列表
-  routes.push(...pageRoutes);
-  
-  return routes;
-}
-
-/**
- * 递归提取路由中的 PAGE 类型子菜单
- */
-function extractPageChildren(route: any, pageRoutes: RouteRecordRaw[]) {
-  // 检查当前路由是否有 PAGE 类型的子菜单
-  if (route.meta?.pageChildren && Array.isArray(route.meta.pageChildren)) {
-    route.meta.pageChildren.forEach((pageMenu: SysMenu) => {
-      const pageRoute = generateRouteFromMenu(pageMenu, true); // 作为顶层路由生成
-      if (pageRoute) {
-
-        pageRoutes.push(pageRoute);
-      } else {
-        console.error(`[路由生成] 生成独立PAGE路由失败: ${pageMenu.name}`);
-      }
-    });
-    // 清理临时数据
-    delete route.meta.pageChildren;
-  }
-  
-  // 递归检查子路由
-  if (route.children && Array.isArray(route.children)) {
-    route.children.forEach((childRoute: any) => {
-      extractPageChildren(childRoute, pageRoutes);
-    });
-  }
-}
-
-/**
- * 根据单个菜单生成路由
- * @param menu 菜单对象
- * @param isTopLevel 是否是顶层菜单
- * @returns 路由配置
- */
-function generateRouteFromMenu(menu: SysMenu, isTopLevel = true): RouteRecordRaw | null {
-  // 跳过按钮类型
-  if (menu.type === MenuType.BUTTON) {
-    return null;
-  }
-  
-  // 跳过静态路由（已经在 router 中定义，不需要再次添加）
-  if (menu.component === '__STATIC_ROUTE__') {
-    return null;
-  }
-  
-  const route: any = {
-    path: menu.url || `/${menu.menuID}`,
-    name: menu.menuID,
-    meta: {
-      title: menu.name,
-      icon: menu.icon,
-      menuId: menu.menuID,
-      parentId: menu.parentID,
-      orderNum: menu.orderNum,
-      type: menu.type,
-      hideInMenu: false,
-      requiresAuth: true,
-    }
-  };
-  
-  // 检查是否指定了布局（只有顶层菜单才使用布局）
-  const layout = isTopLevel ? (menu as any).layout : null;
-  const hasChildren = menu.children && menu.children.length > 0;
-  
-  // 检查 component 是否是布局组件（优先检查 LAYOUT_MAP，再检查名称）
-  const isComponentLayout = menu.component && (
-    LAYOUT_MAP[menu.component] || 
-    (typeof menu.component === 'string' && menu.component.includes('Layout'))
-  );
-  
-  // 确定路由组件
-  if (layout && LAYOUT_MAP[layout]) {
-    // 如果指定了布局，使用指定的布局
-    route.component = getComponent(layout);
-  } else if (isComponentLayout && hasChildren && isTopLevel && menu.component) {
-    // 如果 component 是布局组件且有子菜单，使用该布局组件作为父路由组件
-    // 这样可以确保布局只渲染一次，共用区域的数据也只查询一次
-    route.component = getComponent(menu.component);
-  } else if (hasChildren && isTopLevel) {
-    // 如果有子菜单但没有指定布局，根据菜单类型选择默认布局
-    if (menu.type === MenuType.NAVIGATION) {
-      route.component = getComponent('NavigationLayout');
-    } else if (menu.type === MenuType.SIDEBAR && !menu.parentID) {
-      // 顶层SIDEBAR菜单（管理后台）默认使用SidebarLayout
-      route.component = getComponent('SidebarLayout');
-    } else {
-      route.component = getComponent('BasicLayout');
-    }
-  } else {
-    // 没有子菜单，也没有指定布局，使用具体的页面组件
-    if (menu.component) {
-      route.component = getComponent(menu.component);
-    } else {
-      // 非顶层菜单没有组件时，使用路由占位组件（不影响布局样式）
-      route.component = getComponent('RoutePlaceholder');
-    }
-  }
-  
-  // 处理子路由
-  if (layout && LAYOUT_MAP[layout] && menu.component && isTopLevel) {
-    // 如果指定了布局，将页面组件作为子路由
-    route.children = [{
-      path: '',
-      name: `${menu.menuID}_page`,
-      component: getComponent(menu.component),
-      meta: route.meta
-    }];
-    
-    // 如果还有其他子菜单，继续添加
-    if (hasChildren) {
-      const pageChildren: SysMenu[] = [];
-      const normalChildren: SysMenu[] = [];
-      
-      menu.children!.forEach(child => {
-        if (child.type === MenuType.PAGE) {
-          pageChildren.push(child);
-        } else {
-          normalChildren.push(child);
-        }
-      });
-      
-      // 添加普通子菜单
-      normalChildren.forEach(child => {
-        const childRoute = generateRouteFromMenu(child, false);
-        if (childRoute) {
-          route.children!.push(childRoute);
-        }
-      });
-      
-      // PAGE 类型的菜单保存到 meta
-      if (pageChildren.length > 0) {
-        route.meta.pageChildren = pageChildren;
-      }
-    }
-  } else if (hasChildren) {
-    // 处理有子菜单的情况
-    route.children = [];
-    
-    // 分离 PAGE 类型的子菜单和普通子菜单
-    const pageChildren: SysMenu[] = [];
-    const normalChildren: SysMenu[] = [];
-    
-    menu.children!.forEach(child => {
-      if (child.type === MenuType.PAGE) {
-        // PAGE 类型的菜单作为独立路由，不作为子路由
-        pageChildren.push(child);
-      } else {
-        normalChildren.push(child);
-      }
-    });
-
-    // 当前菜单指定了页面组件时，如果存在“普通子菜单”（非 PAGE 类型）
-    // 则需要创建一个默认子路由来承载当前菜单的页面组件，
-    // 这样父级既能作为分组，又能渲染自己的页面。
-    // 如果只有 PAGE 类型子菜单，则直接使用当前路由组件，而不再包一层 `_page`，
-    // 避免多出一层嵌套导致 matched 结构过深。 
-    if (menu.component && !isComponentLayout && normalChildren.length > 0) {
-      route.children!.push({
-        path: '',
-        name: `${menu.menuID}_page`,
-        component: getComponent(menu.component),
-        meta: {
-          ...route.meta,
-        }
-      });
-    }
-    
-    // 只将普通子菜单加入 children
-    normalChildren.forEach(child => {
-      const childRoute = generateRouteFromMenu(child, false);
-      if (childRoute) {
-        route.children!.push(childRoute);
-      }
-    });
-    
-    // PAGE 类型的菜单需要在外层单独处理（不管是哪一层的菜单）
-    if (pageChildren.length > 0) {
-      // 将 PAGE 类型的子菜单保存到路由的 meta 中，稍后在外层生成
-      route.meta.pageChildren = pageChildren;
-    }
-    
-    // 如果没有设置重定向，自动重定向到第一个有URL的子菜单
-    if (!route.redirect && route.children.length > 0) {
-      const firstChildWithUrl = findFirstMenuWithUrl(normalChildren);
-      if (firstChildWithUrl?.url) {
-        route.redirect = firstChildWithUrl.url;
-      }
-    }
-  }
-
-  return route;
-}
-
-/**
- * 查找第一个有URL的菜单
- * @param menus 菜单列表
- * @returns 第一个有URL的菜单
- */
-function findFirstMenuWithUrl(menus: SysMenu[]): SysMenu | null {
-  for (const menu of menus) {
-    if (menu.type !== MenuType.BUTTON) {
-      if (menu.url) {
-        return menu;
-      }
-      if (menu.children && menu.children.length > 0) {
-        const found = findFirstMenuWithUrl(menu.children);
-        if (found) return found;
-      }
-    }
-  }
-  return null;
-}
-
-/**
- * 根据组件名称获取组件（支持响应式组件）
- * @param componentName 组件名称/路径
- * @returns 组件异步加载函数
- */
-function getComponent(componentName: string) {
-  // 1. 若是布局组件，直接返回预定义映射
-  if (LAYOUT_MAP[componentName]) {
-    return LAYOUT_MAP[componentName];
-  }
-
-  // 2. 将后台给的 component 字段转换为 ../views/**.vue 形式的 key
-  let componentPath = componentName;
-
-  // 如果不是以 @/ 开头，则认为是相对 views 根目录的路径，例如 "user/home/HomeView"
-  if (!componentPath.startsWith('@/')) {
-    if (!componentPath.startsWith('/')) {
-      componentPath = '/' + componentPath;
-    }
-    componentPath = '@/views' + componentPath; // => '@/views/user/home/HomeView'
-  }
-
-  // 将别名 @/ 转为相对于当前文件的路径，必须与 import.meta.glob 中的模式一致
-  const originalPath = componentPath.replace(/^@\//, '../'); // => '../views/user/home/HomeView'
-
-  // 补全 .vue 后缀
-  if (!originalPath.endsWith('.vue')) {
-    componentPath = originalPath + '.vue';
-  } else {
-    componentPath = originalPath;
-  }
-
-  // 3. 检查是否有移动端版本
-  const mobileComponentPath = componentPath.replace('.vue', '.mobile.vue');
-  
-  // 从 VIEW_MODULES 中查找对应的 loader
-  const originalLoader = VIEW_MODULES[componentPath];
-  const mobileLoader = VIEW_MODULES[mobileComponentPath];
-
-  if (!originalLoader) {
-    console.error('[路由生成] 未找到组件模块', {
-      原始组件名: componentName,
-      期望路径: componentPath,
-      可用模块: Object.keys(VIEW_MODULES)
-    });
-    // 找不到时退回到 404 组件
-    return () => import('@/views/public/error/404.vue');
-  }
-
-  // 4. 如果有移动端版本，创建响应式路由适配器
-  if (mobileLoader) {
-    const adapter: RouteAdapter = {
-      original: originalLoader as () => Promise<any>,
-      mobile: mobileLoader as () => Promise<any>
-    };
-    return createResponsiveRoute(adapter);
-  }
-
-  // 5. 没有移动端版本，直接返回原始组件
-  return originalLoader as () => Promise<any>;
-}
-
-/**
- * 将静态路由转换为菜单项
- * @param routes 静态路由数组
- * @returns 菜单项数组
- */
-function convertRoutesToMenus(routes: RouteRecordRaw[]): SysMenu[] {
-  const menus: SysMenu[] = [];
-  
-  routes.forEach(route => {
-    // 处理有子路由的情况（现在静态路由都有布局组件）
-    if (route.children && route.children.length > 0) {
-      route.children.forEach(child => {
-        // 只处理有 meta.menuType 的子路由
-        if (child.meta?.menuType !== undefined) {
-          const menu: SysMenu = {
-            menuID: child.name as string || child.path.replace(/\//g, '-'),
-            parentID: '0',
-            name: child.meta.title as string || child.name as string,
-            url: route.path, // 使用父路由的路径
-            type: child.meta.menuType as MenuType,
-            orderNum: (child.meta.orderNum as number) || -1,
-            // 标记为静态路由，避免重复生成路由
-            component: '__STATIC_ROUTE__', // 特殊标记
-          };
-          
-          menus.push(menu);
-        }
-      });
-    }
-    // 处理没有子路由的情况（兼容性保留）
-    else if (route.meta?.menuType !== undefined) {
-      const menu: SysMenu = {
-        menuID: route.name as string || route.path.replace(/\//g, '-'),
-        parentID: '0',
-        name: route.meta.title as string || route.name as string,
-        url: route.path,
-        type: route.meta.menuType as MenuType,
-        orderNum: (route.meta.orderNum as number) || -1,
-        // 标记为静态路由，避免重复生成路由
-        component: '__STATIC_ROUTE__', // 特殊标记
-      };
-      
-      menus.push(menu);
-    }
-  });
-  
-  return menus;
-}
-
-/**
- * 构建菜单树结构
- * @param menus 菜单列表
- * @returns 菜单树
- */
-export function buildMenuTree(menus: SysMenu[]): SysMenu[] {
-  // 将静态路由转换为菜单项
-  const staticMenus = convertRoutesToMenus(routes);
-  
-  // 合并动态菜单和静态菜单
-  const allMenus = [...staticMenus, ...menus];
-
-  if (allMenus.length === 0) {
-    return [];
-  }
-  
-  const menuMap = new Map<string, SysMenu>();
-  const rootMenus: SysMenu[] = [];
-  const maxDepth = allMenus.length; // 最多遍历len层
-  
-  // 创建菜单映射
-  allMenus.forEach(menu => {
-    if (menu.menuID) {
-      menuMap.set(menu.menuID, { ...menu, children: [] });
-    }
-  });
-  
-  // 循环构建树结构，最多遍历maxDepth次
-  for (let depth = 0; depth < maxDepth; depth++) {
-    let hasChanges = false;
-    
-    allMenus.forEach(menu => {
-      if (!menu.menuID) return;
-      
-      const menuNode = menuMap.get(menu.menuID);
-      if (!menuNode) return;
-      
-      // 如果节点已经在树中，跳过
-      if (isNodeInTree(menuNode, rootMenus)) {
-        return;
-      }
-      
-      if (!menu.parentID || menu.parentID === '0' || menu.parentID === '') {
-        // 根菜单
-        if (!isNodeInTree(menuNode, rootMenus)) {
-          rootMenus.push(menuNode);
-          hasChanges = true;
-        }
-      } else {
-        // 子菜单
-        const parent = menuMap.get(menu.parentID);
-        if (parent && isNodeInTree(parent, rootMenus)) {
-          if (!parent.children) {
-            parent.children = [];
-          }
-          if (!parent.children.includes(menuNode)) {
-            parent.children.push(menuNode);
-            hasChanges = true;
-          }
-        }
-      }
-    });
-    
-    // 如果没有变化，说明树构建完成
-    if (!hasChanges) {
-      break;
-    }
-  }
-  
-  // 按orderNum排序
-  const sortMenus = (menus: SysMenu[]): SysMenu[] => {
-    return menus
-      .sort((a, b) => (a.orderNum || 0) - (b.orderNum || 0))
-      .map(menu => ({
-        ...menu,
-        children: menu.children ? sortMenus(menu.children) : []
-      }));
-  };
-  
-  return sortMenus(rootMenus);
-}
-
-// 检查节点是否已经在树中
-function isNodeInTree(node: SysMenu, tree: SysMenu[]): boolean {
-  for (const treeNode of tree) {
-    if (treeNode.menuID === node.menuID) {
-      return true;
-    }
-    if (treeNode.children && isNodeInTree(node, treeNode.children)) {
-      return true;
-    }
-  }
-  return false;
-}
-
-/**
- * 根据权限过滤菜单
- * @param menus 菜单列表
- * @param permissions 用户权限列表
- * @returns 过滤后的菜单列表
- */
-export function filterMenusByPermissions(
-  menus: SysMenu[], 
-  permissions: string[]
-): SysMenu[] {
-  if (!menus || menus.length === 0) {
-    return [];
-  }
-  
-  return menus
-    .filter(() => {
-      // 如果菜单没有设置权限要求，则默认显示
-      // 这里可以根据实际业务需求调整权限检查逻辑
-      return true; // 暂时返回true，后续可以根据菜单的权限字段进行过滤
-    })
-    .map(menu => {
-      if (menu.children && menu.children.length > 0) {
-        return {
-          ...menu,
-          children: filterMenusByPermissions(menu.children, permissions)
-        };
-      }
-      return menu;
-    });
-}
-
-/**
- * 查找路由路径对应的菜单
- * @param menus 菜单树
- * @param path 路由路径
- * @returns 匹配的菜单
- */
-export function findMenuByPath(menus: SysMenu[], path: string): SysMenu | null {
-  for (const menu of menus) {
-    if (menu.url === path) {
-      return menu;
-    }
-    
-    if (menu.children && menu.children.length > 0) {
-      const found = findMenuByPath(menu.children, path);
-      if (found) {
-        return found;
-      }
-    }
-  }
-  
-  return null;
-}
-
-/**
- * 获取菜单路径数组（面包屑导航用）
- * @param menus 菜单树
- * @param targetMenuId 目标菜单ID
- * @returns 菜单路径数组
- */
-export function getMenuPath(menus: SysMenu[], targetMenuId: string): SysMenu[] {
-  const path: SysMenu[] = [];
-  
-  function findPath(menuList: SysMenu[]): boolean {
-    for (const menu of menuList) {
-      path.push(menu);
-      
-      if (menu.menuID === targetMenuId) {
-        return true;
-      }
-      
-      if (menu.children && menu.children.length > 0) {
-        if (findPath(menu.children)) {
-          return true;
-        }
-      }
-      
-      path.pop();
-    }
-    
-    return false;
-  }
-  
-  findPath(menus);
-  return path;
-}
-
-/**
- * 获取第一个可访问的菜单URL（用于登录后跳转）
- * @param menus 菜单树
- * @returns 第一个可访问的菜单URL，如果没有则返回 null
- */
-export function getFirstAccessibleMenuUrl(menus: SysMenu[]): string | null {
-  if (!menus || menus.length === 0) {
-    return null;
-  }
-  
-  return "/home";
-}
diff --git a/urbanLifelineWeb/temp/routeAdapter.ts b/urbanLifelineWeb/temp/routeAdapter.ts
deleted file mode 100644
index c87cf2a4..00000000
--- a/urbanLifelineWeb/temp/routeAdapter.ts
+++ /dev/null
@@ -1,261 +0,0 @@
-import { RouteRecordRaw, RouteLocationNormalized } from 'vue-router';
-import { getDeviceType, DeviceType } from './deviceUtils';
-
-/**
- * 路由适配器接口
- */
-export interface RouteAdapter {
-  original: () => Promise<any>; // web桌面端
-  mobile?: () => Promise<any>;  // h5移动端
-}
-
-/**
- * 移动端路由映射表
- */
-export const MOBILE_ROUTES_MAP: Record<string, string> = {
-  // User Views
-  '/home': '@/views/user/home/HomeView.mobile.vue',
-  '/resource-center': '@/views/user/resource-center/ResourceCenterView.mobile.vue',
-  '/resource-hot': '@/views/user/resource-center/HotResourceView.mobile.vue',
-  '/search': '@/views/user/resource-center/SearchView.mobile.vue',
-  '/course-center': '@/views/user/study-plan/CourseCenterView.mobile.vue',
-  '/course-detail': '@/views/user/study-plan/CourseDetailView.mobile.vue',
-  '/course-study': '@/views/user/study-plan/CourseStudyView.mobile.vue',
-  '/study-tasks': '@/views/user/study-plan/StudyTasksView.mobile.vue',
-  '/learning-task-detail': '@/views/user/study-plan/LearningTaskDetailView.mobile.vue',
-  '/user-center': '@/views/user/user-center/UserCenterLayout.mobile.vue',
-  '/personal-info': '@/views/user/user-center/profile/PersonalInfoView.mobile.vue',
-  '/account-settings': '@/views/user/user-center/profile/AccountSettingsView.mobile.vue',
-  '/my-achievements': '@/views/user/user-center/MyAchievementsView.mobile.vue',
-  '/my-favorites': '@/views/user/user-center/MyFavoritesView.mobile.vue',
-  '/learning-records': '@/views/user/user-center/LearningRecordsView.mobile.vue',
-  '/my-messages': '@/views/user/message/MyMessageListView.mobile.vue',
-  '/message-detail': '@/views/user/message/MyMessageDetailView.mobile.vue',
-  
-  // Public Views  
-  '/login': '@/views/public/login/Login.mobile.vue',
-  '/register': '@/views/public/login/Register.mobile.vue',
-  '/forgot-password': '@/views/public/login/ForgotPassword.mobile.vue',
-  '/article-show': '@/views/public/article/ArticleShowView.mobile.vue',
-  '/article-add': '@/views/public/article/ArticleAddView.mobile.vue'
-};
-
-/**
- * Layout映射表
- */
-export const LAYOUT_MAP: Record<string, Record<DeviceType, string>> = {
-  'NavigationLayout': {
-    [DeviceType.MOBILE]: '@/layouts/MobileLayout.vue',  // h5移动端
-    [DeviceType.DESKTOP]: '@/layouts/NavigationLayout.vue' // web桌面端
-  },
-  'SidebarLayout': {
-    [DeviceType.MOBILE]: '@/layouts/MobileLayout.vue',  // h5移动端
-    [DeviceType.DESKTOP]: '@/layouts/SidebarLayout.vue' // web桌面端
-  },
-  'BasicLayout': {
-    [DeviceType.MOBILE]: '@/layouts/MobileLayout.vue',  // h5移动端
-    [DeviceType.DESKTOP]: '@/layouts/BasicLayout.vue'   // web桌面端
-  },
-  'BlankLayout': {
-    [DeviceType.MOBILE]: '@/layouts/BlankLayout.vue',   // h5移动端
-    [DeviceType.DESKTOP]: '@/layouts/BlankLayout.vue'   // web桌面端
-  },
-  'PageLayout': {
-    [DeviceType.MOBILE]: '@/layouts/MobileLayout.vue',  // h5移动端
-    [DeviceType.DESKTOP]: '@/layouts/PageLayout.vue'    // web桌面端
-  }
-};
-
-/**
- * 创建响应式路由组件
- */
-export function createResponsiveRoute(adapter: RouteAdapter): () => Promise<any> {
-  return async () => {
-    const deviceType = getDeviceType();
-    
-    try {
-      // 尝试加载设备特定的组件
-      if (deviceType === DeviceType.MOBILE && adapter.mobile) {
-        return await adapter.mobile();
-      }
-    } catch (error) {
-      console.warn(`Failed to load device-specific component for ${deviceType}, falling back to original:`, error);
-    }
-    
-    // 回退到原始组件(桌面端/web)
-    return await adapter.original();
-  };
-}
-
-/**
- * 获取响应式Layout组件
- */
-export function getResponsiveLayout(layoutName: string): () => Promise<any> {
-  const deviceType = getDeviceType();
-  const layoutMap = LAYOUT_MAP[layoutName];
-  
-  if (!layoutMap) {
-    console.warn(`Unknown layout: ${layoutName}, using original`);
-    // 使用具体的导入路径
-    switch (layoutName) {
-      case 'BlankLayout':
-        return () => import('@/layouts/BlankLayout.vue');
-      case 'NavigationLayout':
-        return () => import('@/layouts/NavigationLayout.vue');
-      case 'SidebarLayout':
-        return () => import('@/layouts/SidebarLayout.vue');
-      case 'BasicLayout':
-        return () => import('@/layouts/BasicLayout.vue');
-      case 'PageLayout':
-        return () => import('@/layouts/PageLayout.vue');
-      default:
-        throw new Error(`Unknown layout: ${layoutName}`);
-    }
-  }
-  
-  const targetLayout = layoutMap[deviceType];
-  
-  return async () => {
-    try {
-      // 使用具体的导入路径而不是动态路径
-      switch (targetLayout) {
-        case '@/layouts/BlankLayout.vue':
-          return await import('@/layouts/BlankLayout.vue');
-        case '@/layouts/NavigationLayout.vue':
-          return await import('@/layouts/NavigationLayout.vue');
-        case '@/layouts/SidebarLayout.vue':
-          return await import('@/layouts/SidebarLayout.vue');
-        case '@/layouts/BasicLayout.vue':
-          return await import('@/layouts/BasicLayout.vue');
-        case '@/layouts/MobileLayout.vue':
-          return await import('@/layouts/MobileLayout.vue');
-        case '@/layouts/PageLayout.vue':
-          return await import('@/layouts/PageLayout.vue');
-        default:
-          throw new Error(`Unknown layout path: ${targetLayout}`);
-      }
-    } catch (error) {
-      console.warn(`Failed to load responsive layout ${targetLayout}, falling back to original:`, error);
-      // 回退到原始layout
-      switch (layoutName) {
-        case 'BlankLayout':
-          return await import('@/layouts/BlankLayout.vue');
-        case 'NavigationLayout':
-          return await import('@/layouts/NavigationLayout.vue');
-        case 'SidebarLayout':
-          return await import('@/layouts/SidebarLayout.vue');
-        case 'BasicLayout':
-          return await import('@/layouts/BasicLayout.vue');
-        case 'PageLayout':
-          return await import('@/layouts/PageLayout.vue');
-        default:
-          throw new Error(`Unknown layout: ${layoutName}`);
-      }
-    }
-  };
-}
-
-/**
- * 创建自适应路由配置
- */
-export function createAdaptiveRoute(
-  path: string,
-  originalComponent: string,
-  layoutName?: string,
-  meta?: any
-): RouteRecordRaw {
-  // 创建具体的导入函数而不是使用动态路径
-  const getOriginalComponent = () => {
-    switch (originalComponent) {
-      case '@/views/public/login/Login.vue':
-        return import('@/views/public/login/Login.vue');
-      case '@/views/public/login/Register.vue':
-        return import('@/views/public/login/Register.vue');
-      case '@/views/public/login/ForgotPassword.vue':
-        return import('@/views/public/login/ForgotPassword.vue');
-      default:
-        throw new Error(`Unknown component: ${originalComponent}`);
-    }
-  };
-  
-  const getMobileComponent = (): (() => Promise<any>) | null => {
-    const mobilePath = MOBILE_ROUTES_MAP[path];
-    if (!mobilePath) return null;
-    
-    switch (mobilePath) {
-      case '@/views/public/login/Login.mobile.vue':
-        return () => import('@/views/public/login/Login.mobile.vue');
-      case '@/views/public/login/Register.mobile.vue':
-        return () => import('@/views/public/login/Register.mobile.vue');
-      case '@/views/public/login/ForgotPassword.mobile.vue':
-        return () => import('@/views/public/login/ForgotPassword.mobile.vue');
-      default:
-        return null;
-    }
-  };
-
-  const adapter: RouteAdapter = {
-    original: getOriginalComponent
-  };
-  
-  // 检查是否有移动端版本
-  const mobileImportFunction = getMobileComponent();
-  if (mobileImportFunction) {
-    adapter.mobile = mobileImportFunction;
-  }
-  
-  // 如果指定了Layout，应用响应式Layout
-  if (layoutName) {
-    const route: RouteRecordRaw = {
-      path,
-      component: getResponsiveLayout(layoutName),
-      children: [
-        {
-          path: '',
-          component: createResponsiveRoute(adapter),
-          meta
-        }
-      ],
-      meta
-    };
-    return route;
-  }
-  
-  const route: RouteRecordRaw = {
-    path,
-    component: createResponsiveRoute(adapter),
-    meta
-  };
-  
-  return route;
-}
-
-/**
- * 监听屏幕尺寸变化，重新加载路由
- */
-export function setupRouteWatcher(router: any) {
-  let currentDeviceType = getDeviceType();
-  
-  const handleResize = () => {
-    const newDeviceType = getDeviceType();
-    if (newDeviceType !== currentDeviceType) {
-      currentDeviceType = newDeviceType;
-      // 重新加载当前路由以应用新的组件
-      const currentRoute = router.currentRoute.value;
-      router.replace({
-        ...currentRoute,
-        query: { 
-          ...currentRoute.query, 
-          _refresh: Date.now() // 强制重新加载
-        }
-      });
-    }
-  };
-  
-  window.addEventListener('resize', handleResize);
-  
-  // 返回清理函数
-  return () => {
-    window.removeEventListener('resize', handleResize);
-  };
-}