feat:更新系统ui样式

modify.md

@@ -0,0 +1,195 @@
+# XSynergy Web 管理平台 UI 设计说明
+
+## 一、核心约定与不可修改内容（总览）
+
+### 1. 核心功能不可修改
+
+- **登录逻辑不可修改**：用户认证、密码验证及登录流程保持现有逻辑。
+- **系统功能保留**：
+  - 用户管理、角色与权限管理
+  - 全局消息发送
+  - 远程协作记录管理
+- **功能操作与交互**：
+  - 所有原有操作按钮（如头像、通知、快速操作）必须保留。
+  - 功能的基本可访问性和权限控制保持不变。
+
+### 2. 主题色与按钮颜色
+
+- **系统主色**：`#409EFF`
+  应用范围：
+  - 登录按钮、输入框 focus 状态
+  - 导航栏背景、选中菜单、高亮条
+  - 重要交互元素及图标高亮
+- **登录按钮**：
+  - 宽度占满卡片，视觉突出
+  - Hover 与点击状态明显
+- **输入框**：
+  - 高度统一，圆角设计
+  - Focus 状态明显
+
+### 3. 整体风格与UI约定
+
+- **风格统一**：
+  - 科技感强、现代化、企业级视觉
+  - 扁平化、简洁、清晰
+- **字体层级**：
+  - 系统名称：最大字体
+  - 模块标题：中等字体
+  - 描述文本：常规字体
+  - 辅助说明：较小字体
+- **卡片设计**：
+  - 圆角设计、轻微阴影、背景浅色或半透明
+- **背景**：
+  - 深色科技风（深蓝、深灰、深色渐变）
+  - 可包含科技网格线、动态粒子或线条动画
+
+### 4. 交互与响应式约定
+
+- 登录表单输入顺畅，错误提示清晰，按钮反馈明显
+- 页面适配不同屏幕尺寸：
+  - 大屏：左右布局同时显示
+  - 中屏：保持布局但缩小内容
+  - 移动端：左侧品牌区可隐藏，仅显示登录区域
+- 导航栏与菜单：
+  - 左侧导航栏可固定或折叠
+  - 支持二级/三级菜单，子菜单层级清晰
+  - 动画过渡流畅，鼠标或触摸操作反馈明确
+- 整体视觉与交互保持一致性，主题色统一
+
+------
+
+## 二、登录页面优化
+
+### 1. 整体设计目标
+
+- 现代化企业级设计风格
+- 明显的科技感视觉效果
+- 清晰的品牌展示
+- 登录区域突出且易于操作
+- 与系统主题颜色保持统一
+- **不修改任何登录逻辑**
+
+### 2. 页面整体布局结构
+
+- 登录页采用 **左右双区域布局**：
+
+```
+页面
+ ├── 背景层（科技网格/动态效果）
+ └── 内容容器
+      ├── 左侧品牌展示区（约 55%）
+      └── 右侧登录表单区（约 45%）
+```
+
+- 品牌介绍与登录卡片在同一容器，页面整体居中显示
+
+### 3. 背景设计（科技风格）
+
+- 取消传统背景图片
+- 可采用科技网格线、动态粒子、科技线条动画或渐变色背景
+- 颜色偏深：深蓝、深灰、深色渐变
+- 避免背景过亮，保证登录卡片突出
+
+### 4. 左侧区域（品牌与产品介绍）
+
+#### 品牌 Logo 与系统名称
+
+- **XSynergy 管理平台**
+- 企业级 AR 远程协作管理系统
+- 系统名称字体较大，可搭配科技感字体和 Logo
+
+#### 产品简介
+
+- XSynergy 是企业 AR 远程协作平台
+- 实现远程指导与问题解决
+- 降低差旅成本、提升效率、促进知识沉淀
+
+#### 核心能力展示（图标 + 简短说明）
+
+- AR远程协作：现场人员与远程专家实时连接
+- 实时音视频通信：保证远程协作顺畅
+- AI智能辅助：识别现场问题，提高效率
+- 远程协作记录：会议记录便于复盘
+
+#### Web管理平台功能
+
+- 用户管理：企业用户及第三方系统对接
+- 角色与权限管理：精细化权限控制
+- 全局消息发送：系统公告与通知
+- 远程协作记录管理：统一管理历史数据
+
+#### 产品优势
+
+- 降低差旅成本
+- 提升问题解决效率
+- 突破地域限制
+- 促进知识沉淀
+
+### 5. 右侧区域（登录表单区）
+
+- 卡片式设计
+- 登录卡片包含：
+  1. 登录标题（系统登录）
+  2. 用户名输入框
+  3. 密码输入框
+  4. 可选功能
+  5. 登录按钮（登录系统）
+  6. 系统信息提示
+- 输入框统一高度，圆角设计，Focus 状态明显
+- 登录按钮宽度占满卡片，视觉突出，Hover 与点击状态明显
+
+------
+
+## 三、导航栏和头部页面优化
+
+### 1. 头部导航栏
+
+- 主题色：`#409EFF`
+- 增加现代化、扁平化设计风格
+- 元素间距适中，图标文字清晰
+- 鼠标悬停轻微动画或渐变效果
+- 保留系统常用操作按钮
+- 响应式设计，移动端可清晰显示
+- 点击或悬停有明显视觉反馈
+- 下拉菜单圆角、阴影、渐变效果
+
+### 2. 左侧导航栏
+
+- 支持固定或折叠
+- 分组清晰（模块分组、功能分类）
+- 主题色 `#409EFF` 应用于选中菜单、高亮条
+- 未选中菜单为淡灰色或半透明
+- 图标统一风格（线性或扁平）
+- 鼠标悬停颜色渐变或轻微背景动画
+- 选中状态突出显示
+- 可折叠菜单支持滑动动画
+- 二级/三级菜单层级清晰
+
+### 3. 响应式与整体体验
+
+- 大屏幕：完整导航显示
+- 小屏/移动端：自动折叠左侧导航栏，提供图标模式
+- 动画过渡适中，操作反馈明确
+- 头部与左侧导航颜色风格统一
+- 系统主题色 `#409EFF` 保持统一
+
+------
+
+## 四、UI设计规范
+
+- **主主题色**：`#409EFF`
+- **卡片设计**：圆角、轻微阴影、浅色或半透明背景
+- **字体层级**：
+  - 系统名称：最大
+  - 模块标题：中等
+  - 描述文本：常规
+  - 辅助说明：较小
+- **页面交互体验**：
+  - 登录表单顺畅，输入错误提示清晰
+  - 登录按钮反馈明显
+  - 页面加载快速
+  - 不影响原有登录逻辑
+- **响应式适配**：
+  - 大屏设备：左右布局显示
+  - 中等屏幕：缩小内容
+  - 移动端：左侧品牌区可隐藏，仅显示登录区域