# 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`
- **卡片设计**：圆角、轻微阴影、浅色或半透明背景
- **字体层级**：
  - 系统名称：最大
  - 模块标题：中等
  - 描述文本：常规
  - 辅助说明：较小
- **页面交互体验**：
  - 登录表单顺畅，输入错误提示清晰
  - 登录按钮反馈明显
  - 页面加载快速
  - 不影响原有登录逻辑
- **响应式适配**：
  - 大屏设备：左右布局显示
  - 中等屏幕：缩小内容
  - 移动端：左侧品牌区可隐藏，仅显示登录区域