refactor: 重构样式系统为五层分层架构
- 建立 tokens/core/layouts/components/pages 五层样式架构 - 所有组件采用 BEM 命名规范（.block__element--modifier） - 16 个组件目录，每个组件独立 _index.scss - 清理表格操作列内联样式，统一使用 .col-actions/.table-actions - 更新 README 样式开发规范文档 - 同步 3 个 delta spec 到主 specs Co-Authored-By: opencode <noreply@opencode.ai>
This commit is contained in:
508
README.md
508
README.md
@@ -19,7 +19,8 @@ GrandClaw 是一个企业级AI智能助手平台的前端原型项目，主要
|
||||
### UI与样式
|
||||
- **react-icons 5.5.0**：图标库（Feather + FontAwesome图标集）
|
||||
- **Sass 1.98.0**：CSS预处理器
|
||||
- **SCSS模块化**：变量、混入、组件、布局、页面分离
|
||||
- **五层分层架构**：tokens → core → layouts → components → pages
|
||||
- **BEM 命名规范**：所有组件类名遵循 `.block__element--modifier` 格式
|
||||
|
||||
### 构建优化
|
||||
- **vite-plugin-singlefile 2.3.2**：单文件打包，解决CORS问题
|
||||
@@ -70,59 +71,55 @@ grandclaw-archtype/
|
||||
│ │ ├── AdminPage.jsx # 管理台主页面
|
||||
│ │ ├── DeveloperPage.jsx # 开发台主页面
|
||||
│ │ ├── console/ # 工作台子页面
|
||||
│ │ │ ├── ChatPage.jsx # 聊天页面
|
||||
│ │ │ ├── SkillsPage.jsx # 技能市场
|
||||
│ │ │ ├── SkillDetailPage.jsx # 技能详情
|
||||
│ │ │ ├── MySkillsPage.jsx # 我的技能管理（NEW）
|
||||
│ │ │ ├── SkillConfigPage.jsx # 技能配置（NEW）
|
||||
│ │ │ ├── LogsPage.jsx # 日志查询
|
||||
│ │ │ ├── TasksPage.jsx # 定时任务
|
||||
│ │ │ ├── TaskDetailPage.jsx # 任务详情
|
||||
│ │ │ ├── AccountPage.jsx # 账号管理
|
||||
│ │ │ ├── ProjectsPage.jsx # 项目管理
|
||||
│ │ │ ├── MemberConfigPage.jsx # 成员配置
|
||||
│ │ │ └── AddMemberPage.jsx # 增加成员
|
||||
│ │ ├── admin/ # 管理台子页面
|
||||
│ │ │ ├── OverviewPage.jsx # 运营总览
|
||||
│ │ │ ├── DepartmentsPage.jsx # 部门管理
|
||||
│ │ │ ├── AddDepartmentPage.jsx # 新增/编辑部门
|
||||
│ │ │ ├── UsersPage.jsx # 用户管理
|
||||
│ │ │ ├── AddUserPage.jsx # 新增/编辑用户
|
||||
│ │ │ ├── AdminProjectsPage.jsx # 项目管理
|
||||
│ │ │ ├── AddProjectPage.jsx # 新增/编辑项目
|
||||
│ │ │ ├── AdminLogsPage.jsx # 全局日志查询
|
||||
│ │ │ ├── ModelConfigsPage.jsx # 模型配置列表
|
||||
│ │ │ └── AddModelConfigPage.jsx # 新增/编辑模型配置
|
||||
│ │ ├── console/ # 工作台子页面
|
||||
│ │ │ ├── ChatPage.jsx # 聊天页面
|
||||
│ │ │ ├── SkillsPage.jsx # 技能市场
|
||||
│ │ │ ├── SkillDetailPage.jsx # 技能详情
|
||||
│ │ │ ├── LogsPage.jsx # 日志查询
|
||||
│ │ │ ├── TasksPage.jsx # 定时任务
|
||||
│ │ │ ├── TaskDetailPage.jsx # 任务详情
|
||||
│ │ │ ├── AccountPage.jsx # 账号管理
|
||||
│ │ │ ├── ProjectsPage.jsx # 项目管理
|
||||
│ │ │ ├── MemberConfigPage.jsx # 成员配置
|
||||
│ │ │ ├── AddMemberPage.jsx # 增加成员
|
||||
│ │ │ ├── ConsoleReviewListPage.jsx # 审核管理列表（NEW）
|
||||
│ │ │ └── ConsoleReviewDetailPage.jsx # 审核详情（NEW）
|
||||
│ │ └── developer/ # 开发台子页面
|
||||
│ │ ├── DevOverviewPage.jsx # 开发者总览
|
||||
│ │ ├── MySkillsPage.jsx # 我的技能（筛选+分页）
|
||||
│ │ ├── SkillEditorPage.jsx # 技能详情（只读+操作）
|
||||
│ │ ├── UploadSkillPage.jsx # 创建技能（基本信息）
|
||||
│ │ ├── UpdateSkillInfoPage.jsx # 更新基本信息
|
||||
│ │ ├── UploadVersionPage.jsx # 上传新版本（NEW）
|
||||
│ │ ├── DevDocsPage.jsx # 开发文档
|
||||
│ │ └── DevAccountPage.jsx # 开发者设置
|
||||
│ └── styles/ # SCSS样式模块
|
||||
│ ├── _variables.scss # 设计系统变量
|
||||
│ ├── _mixins.scss # 可复用混入
|
||||
│ ├── _base.scss # 基础重置和全局样式
|
||||
│ ├── _components.scss # 通用组件样式
|
||||
│ ├── _layout.scss # 布局相关样式
|
||||
│ ├── _pages.scss # 页面特定样式
|
||||
│ └── global.scss # 主样式文件，导入所有模块
|
||||
│ └── styles/ # SCSS样式系统（分层架构）
|
||||
│ ├── tokens/ # 第1层：设计令牌
|
||||
│ │ ├── _colors.scss # 品牌色、功能色、中性色
|
||||
│ │ ├── _spacing.scss # 间距系统（4px基数）
|
||||
│ │ ├── _shadows.scss # 阴影层级
|
||||
│ │ ├── _radius.scss # 圆角系统
|
||||
│ │ ├── _typography.scss # 字体、字号、字重
|
||||
│ │ ├── _z-index.scss # 层级系统
|
||||
│ │ ├── _transitions.scss # 过渡动画参数
|
||||
│ │ ├── _breakpoints.scss # 响应式断点
|
||||
│ │ ├── _mixins.scss # 可复用混入
|
||||
│ │ └── _index.scss # 统一导出
|
||||
│ ├── core/ # 第2层：核心样式
|
||||
│ │ ├── _reset.scss # CSS重置
|
||||
│ │ ├── _css-variables.scss # :root CSS变量
|
||||
│ │ ├── _base.scss # body全局样式
|
||||
│ │ └── _index.scss
|
||||
│ ├── layouts/ # 第3层：布局系统
|
||||
│ │ ├── _app-shell.scss # 主框架（sidebar+header+main）
|
||||
│ │ ├── _chat-layout.scss # 聊天页面布局
|
||||
│ │ ├── _admin-layout.scss # 管理台布局
|
||||
│ │ └── _index.scss
|
||||
│ ├── components/ # 第4层：组件库
|
||||
│ │ ├── button/ # 按钮（.btn, .btn--primary, .btn--ghost）
|
||||
│ │ ├── card/ # 卡片（.card, .card__header, .card__body）
|
||||
│ │ ├── table/ # 表格（.table, .table-actions, .col-actions）
|
||||
│ │ ├── form/ # 表单（.form-group, .form__input, .form__label）
|
||||
│ │ ├── tag/ # 标签（.tag--running, .tag--admin）
|
||||
│ │ ├── modal/ # 弹窗（.modal, .modal__overlay）
|
||||
│ │ ├── toast/ # 提示（.toast--success, .toast--error）
|
||||
│ │ ├── pagination/ # 分页
|
||||
│ │ ├── empty-state/ # 空状态
|
||||
│ │ ├── switch/ # 开关
|
||||
│ │ ├── skill-card/ # 技能卡片
|
||||
│ │ ├── nav/ # 导航项
|
||||
│ │ ├── detail/ # 详情页组件
|
||||
│ │ ├── password-input/ # 密码输入框
|
||||
│ │ ├── search-bar/ # 搜索栏
|
||||
│ │ ├── stat-card/ # 统计卡片
|
||||
│ │ └── _index.scss # 统一导出
|
||||
│ ├── pages/ # 第5层：页面特有样式
|
||||
│ │ ├── _console.scss # 工作台特有组件
|
||||
│ │ ├── _admin.scss # 管理台特有组件
|
||||
│ │ ├── _developer.scss # 开发台特有组件
|
||||
│ │ ├── _home.scss # 首页特有组件
|
||||
│ │ └── _index.scss
|
||||
│ └── global.scss # 主入口文件（仅 @use，无直接样式）
|
||||
├── index.html # HTML入口文件
|
||||
├── package.json # 项目配置和依赖
|
||||
├── vite.config.js # Vite配置
|
||||
@@ -500,52 +497,367 @@ const [currentPage, setCurrentPage] = useState(() => {
|
||||
|
||||
## 样式系统
|
||||
|
||||
### SCSS模块化结构
|
||||
### 分层架构
|
||||
|
||||
样式采用五层架构，依赖方向自上而下：`tokens → core → layouts → components → pages`
|
||||
|
||||
```
|
||||
src/styles/
|
||||
├── _variables.scss # 设计系统变量（颜色、间距、阴影等）
|
||||
├── _mixins.scss # 可复用混入（媒体查询、弹性布局等）
|
||||
├── _base.scss # 基础重置、CSS变量定义、body样式
|
||||
├── _components.scss # 通用组件（按钮、卡片、表单、状态标签）
|
||||
├── _layout.scss # 布局相关（侧边栏、主内容区）
|
||||
├── _pages.scss # 页面特定样式（首页、管理台等）
|
||||
└── global.scss # 主文件，导入所有模块
|
||||
┌─────────────────────────────────────────┐
|
||||
│ pages/ 页面特有组件，仅覆盖模式 │ ← 最上层
|
||||
├─────────────────────────────────────────┤
|
||||
│ components/ 可复用UI组件库，BEM命名 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ layouts/ 布局系统（shell/chat/admin） │
|
||||
├─────────────────────────────────────────┤
|
||||
│ core/ 重置、CSS变量、body样式 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ tokens/ 设计令牌（颜色/间距/阴影...） │ ← 最底层
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 设计系统变量（_variables.scss）
|
||||
### 第1层：Tokens（设计令牌）
|
||||
|
||||
所有设计决策集中定义，禁止在组件或页面中硬编码值。
|
||||
|
||||
```scss
|
||||
// 品牌主色
|
||||
// src/styles/tokens/_colors.scss
|
||||
$primary: #3B82F6;
|
||||
$primary-light: #EFF6FF;
|
||||
$primary-dark: #2563EB;
|
||||
|
||||
// 功能色
|
||||
$success: #10B981;
|
||||
$warning: #F59E0B;
|
||||
$danger: #EF4444;
|
||||
|
||||
// 中性色
|
||||
$text-1: #1E293B;
|
||||
$text-2: #475569;
|
||||
$text-3: #94A3B8;
|
||||
|
||||
// 布局尺寸
|
||||
$sidebar-width: 240px;
|
||||
$header-height: 60px;
|
||||
$radius-md: 8px;
|
||||
// src/styles/tokens/_spacing.scss
|
||||
$spacing-1: 4px;
|
||||
$spacing-2: 8px;
|
||||
$spacing-4: 16px;
|
||||
|
||||
// src/styles/tokens/_typography.scss
|
||||
$font-size-base: 14px;
|
||||
$font-weight-semibold: 600;
|
||||
```
|
||||
|
||||
### 状态标签样式
|
||||
支持多种状态标签：
|
||||
- `status-running` - 成功/运行中（绿色）
|
||||
- `status-stopped` - 停止/禁用（灰色）
|
||||
- `status-warning` - 警告（黄色）
|
||||
- `status-error` - 失败/错误（红色）
|
||||
**使用方式：** 通过 `@use` 引入，直接使用变量名。
|
||||
|
||||
### 角色标签样式
|
||||
- `role-admin` - 管理员（蓝色）
|
||||
- `role-member` - 成员（灰色）
|
||||
- `role-developer` - 开发者（橙色）
|
||||
```scss
|
||||
@use '../../tokens' as *;
|
||||
|
||||
.my-component {
|
||||
color: $text-1;
|
||||
padding: $spacing-4;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
```
|
||||
|
||||
**同时提供 CSS 变量**（core 层定义），供运行时和 JSX 内联场景使用：
|
||||
|
||||
```scss
|
||||
// core/_css-variables.scss 自动从 tokens 生成 :root 变量
|
||||
:root {
|
||||
--color-primary: #{$primary};
|
||||
--color-text-1: #{$text-1};
|
||||
}
|
||||
|
||||
// JSX 中可通过 style 使用
|
||||
<div style={{ color: 'var(--color-text-1)' }}>
|
||||
```
|
||||
|
||||
### 第2层：Core（核心样式）
|
||||
|
||||
包含 CSS 重置、`:root` CSS 变量定义、body 全局样式。无业务逻辑。
|
||||
|
||||
```
|
||||
core/
|
||||
├── _reset.scss # * { margin:0; padding:0; box-sizing:border-box; }
|
||||
├── _css-variables.scss # :root { --color-primary: ...; }
|
||||
├── _base.scss # body { font-family, color, background }
|
||||
└── _index.scss # @forward 所有 core 模块
|
||||
```
|
||||
|
||||
### 第3层：Layouts（布局系统）
|
||||
|
||||
页面骨架布局，不包含具体UI组件样式。
|
||||
|
||||
| 文件 | 职责 |
|
||||
|------|------|
|
||||
| `_app-shell.scss` | 主框架：sidebar + header + main-content + 响应式 |
|
||||
| `_chat-layout.scss` | 聊天页：chat-sidebar + chat-content + conversation-list |
|
||||
| `_admin-layout.scss` | 管理台：admin-sidebar + admin-nav + member-selection |
|
||||
|
||||
**关键类名：**
|
||||
- `.layout` / `.app-shell` — 主布局容器
|
||||
- `.sidebar` — 侧边栏
|
||||
- `.main-content` — 主内容区
|
||||
- `.header` — 顶部栏
|
||||
- `.page-content` — 页面内容区
|
||||
|
||||
### 第4层：Components（组件库）
|
||||
|
||||
每个组件一个目录，内部 `_index.scss` 包含该组件的完整样式。
|
||||
|
||||
```
|
||||
components/
|
||||
├── button/_index.scss
|
||||
├── card/_index.scss
|
||||
├── table/_index.scss
|
||||
├── form/_index.scss
|
||||
├── tag/_index.scss
|
||||
├── modal/_index.scss
|
||||
├── toast/_index.scss
|
||||
└── _index.scss # @forward 所有组件
|
||||
```
|
||||
|
||||
**组件目录创建规则：**
|
||||
```
|
||||
components/
|
||||
└── {component-name}/
|
||||
└── _index.scss # 必须存在，包含组件全部样式
|
||||
```
|
||||
|
||||
### 第5层：Pages（页面特有样式）
|
||||
|
||||
仅包含**页面独有的组件样式**，不放可复用组件。
|
||||
|
||||
```
|
||||
pages/
|
||||
├── _console.scss # 聊天消息、欢迎区、输入框等
|
||||
├── _admin.scss # 总览统计、异常列表等
|
||||
├── _developer.scss # 技能概览卡片、版本历史卡片等
|
||||
├── _home.scss # 首页英雄区、特性卡片等
|
||||
└── _index.scss
|
||||
```
|
||||
|
||||
### 主入口文件
|
||||
|
||||
`global.scss` 是纯入口文件，**仅包含 `@use` 语句**，无任何直接样式定义：
|
||||
|
||||
```scss
|
||||
// src/styles/global.scss
|
||||
@use 'tokens' as *;
|
||||
@use 'core' as *;
|
||||
@use 'layouts' as *;
|
||||
@use 'components' as *;
|
||||
@use 'pages/console' as *;
|
||||
@use 'pages/admin' as *;
|
||||
@use 'pages/developer' as *;
|
||||
@use 'pages/home' as *;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 样式开发规范
|
||||
|
||||
### BEM 命名规范
|
||||
|
||||
所有组件类名必须遵循 BEM 格式：`.block__element--modifier`
|
||||
|
||||
```scss
|
||||
// Block — 组件根节点
|
||||
.card { }
|
||||
|
||||
// Element — 组件内部元素，用双下划线连接
|
||||
.card__header { }
|
||||
.card__body { }
|
||||
.card__footer { }
|
||||
|
||||
// Modifier — 变体/状态，用双连字符连接
|
||||
.card--flat { }
|
||||
.card--elevated { }
|
||||
.btn--primary { }
|
||||
.btn--danger { }
|
||||
.tag--running { }
|
||||
.tag--admin { }
|
||||
```
|
||||
|
||||
**JSX 对应写法：**
|
||||
```jsx
|
||||
<div className="card">
|
||||
<div className="card__header">
|
||||
<span className="card__title">标题</span>
|
||||
</div>
|
||||
<div className="card__body">
|
||||
内容
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="btn btn--primary">确认</button>
|
||||
<button className="btn btn--danger btn--sm">删除</button>
|
||||
<span className="tag tag--running">运行中</span>
|
||||
```
|
||||
|
||||
### 组件文件内部结构
|
||||
|
||||
每个组件的 `_index.scss` 按以下顺序组织：
|
||||
|
||||
```scss
|
||||
// 1. 依赖引入
|
||||
@use '../../tokens' as *;
|
||||
|
||||
// 2. Block — 组件根节点
|
||||
.btn { }
|
||||
|
||||
// 3. Elements — 内部元素
|
||||
.btn__icon { }
|
||||
|
||||
// 4. Modifiers — 变体（按语义分组）
|
||||
// 颜色变体
|
||||
.btn--primary { }
|
||||
.btn--danger { }
|
||||
|
||||
// 尺寸变体
|
||||
.btn--sm { }
|
||||
.btn--lg { }
|
||||
|
||||
// 状态变体
|
||||
.btn--loading { }
|
||||
|
||||
// 5. Legacy 兼容别名（过渡期）
|
||||
.text-btn { @extend .btn--ghost; }
|
||||
```
|
||||
|
||||
### 新增组件开发流程
|
||||
|
||||
1. **确认组件层级**：属于 tokens/core/layouts/components/pages 哪一层
|
||||
2. **创建目录**：`src/styles/components/{name}/`
|
||||
3. **创建 `_index.scss`**：按 BEM 结构编写样式
|
||||
4. **引入 tokens**：`@use '../../tokens' as *;` 使用设计令牌
|
||||
5. **在 `_index.scss` 中注册**：`components/_index.scss` 添加 `@forward '{name}';`
|
||||
6. **在 JSX 中使用**：`className="block__element--modifier"`
|
||||
7. **验证构建**：`pnpm build`
|
||||
|
||||
### 新增页面样式开发流程
|
||||
|
||||
1. **优先复用组件库**：先检查 `components/` 是否已有可用组件
|
||||
2. **页面特有组件**：在 `pages/_{page}.scss` 中定义
|
||||
3. **仅放页面独有的样式**：可复用的应提取到 `components/`
|
||||
4. **不硬编码值**：使用 tokens 中的变量或 CSS 变量
|
||||
|
||||
### 内联样式规则
|
||||
|
||||
**禁止使用内联 style 的场景：**
|
||||
- 可复用的组件样式（按钮、卡片、表格操作列等）
|
||||
- 使用 tokens 中已有变量的值
|
||||
- 多个页面/组件中重复出现的模式
|
||||
|
||||
**允许使用内联 style 的场景：**
|
||||
- 各表特有的内容列宽（如 `style={{ width: '180px' }}`）
|
||||
- 动态计算值（如进度条宽度 `width: 65%`）
|
||||
- 聊天消息内容中的排版（通过 `dangerouslySetInnerHTML` 渲染）
|
||||
|
||||
### 表格操作列规范
|
||||
|
||||
表格操作列统一使用以下类名，禁止写内联样式：
|
||||
|
||||
```jsx
|
||||
// 表头 — 操作列宽度
|
||||
<th className="col-actions">操作</th> // 200px
|
||||
<th className="col-actions--narrow">操作</th> // 120px
|
||||
<th className="col-actions--tiny">操作</th> // 80px
|
||||
|
||||
// 单元格 — 操作按钮容器
|
||||
<td className="col-actions">
|
||||
<div className="table-actions">
|
||||
<button className="text-btn text-btn-primary">编辑</button>
|
||||
<button className="text-btn text-btn-danger">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
// 可点击行
|
||||
<tr className="tr-clickable" onClick={...}>
|
||||
```
|
||||
|
||||
### 按钮使用规范
|
||||
|
||||
| 场景 | 类名 | 颜色 |
|
||||
|------|------|------|
|
||||
| 主操作（确认、提交） | `btn btn--primary` | 蓝色实心 |
|
||||
| 次要操作（取消、重置） | `btn` | 灰色边框 |
|
||||
| 表格内编辑 | `text-btn text-btn-primary` | 蓝色文字 |
|
||||
| 表格内删除/禁用 | `text-btn text-btn-danger` | 红色文字 |
|
||||
| 危险操作确认 | `btn btn--danger` | 红色实心 |
|
||||
| 警告操作 | `btn btn--warning` | 橙色实心 |
|
||||
|
||||
### 状态标签规范
|
||||
|
||||
```jsx
|
||||
// 运行状态
|
||||
<span className="tag tag--running">运行中</span>
|
||||
<span className="tag tag--stopped">已停止</span>
|
||||
<span className="tag tag--error">失败</span>
|
||||
<span className="tag tag--warning">警告</span>
|
||||
|
||||
// 用户角色
|
||||
<span className="tag tag--admin">管理员</span>
|
||||
<span className="tag tag--member">成员</span>
|
||||
<span className="tag tag--developer">开发者</span>
|
||||
```
|
||||
|
||||
### 引用 Tokens 的方式
|
||||
|
||||
```scss
|
||||
// 在组件或页面文件中
|
||||
@use '../../tokens' as *;
|
||||
|
||||
// 直接使用 SCSS 变量
|
||||
.my-class {
|
||||
color: $primary;
|
||||
padding: $spacing-4;
|
||||
border-radius: $radius-md;
|
||||
font-weight: $font-weight-semibold;
|
||||
box-shadow: $shadow-card;
|
||||
}
|
||||
|
||||
// 使用 CSS 变量（适合需要运行时切换的场景）
|
||||
.my-class {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-bg-1);
|
||||
}
|
||||
```
|
||||
|
||||
### 样式文件引用规则
|
||||
|
||||
```scss
|
||||
// tokens 层：无依赖
|
||||
@use 'colors' as *;
|
||||
|
||||
// core 层：依赖 tokens
|
||||
@use '../tokens' as *;
|
||||
|
||||
// layouts 层：依赖 tokens
|
||||
@use '../tokens' as *;
|
||||
|
||||
// components 层：依赖 tokens
|
||||
@use '../../tokens' as *;
|
||||
|
||||
// pages 层：依赖 tokens
|
||||
@use '../tokens' as *;
|
||||
```
|
||||
|
||||
**禁止**：跨层引用（如 components 直接引用 pages）
|
||||
|
||||
### 响应式开发
|
||||
|
||||
使用 tokens 中定义的断点，通过 mixins 调用：
|
||||
|
||||
```scss
|
||||
@use '../../tokens' as *;
|
||||
|
||||
@include mobile {
|
||||
// <= 768px
|
||||
.my-component {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
// 769px ~ 1024px
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
// >= 1025px
|
||||
}
|
||||
```
|
||||
|
||||
## 数据访问层
|
||||
|
||||
@@ -658,20 +970,30 @@ export default defineConfig({
|
||||
|
||||
### 添加新页面
|
||||
1. 在 `src/pages/` 目录下创建页面组件
|
||||
2. 在父页面组件（如ConsolePage、AdminPage）中添加路由逻辑
|
||||
3. 如果需要持久化状态，添加localStorage逻辑
|
||||
4. 在 `src/styles/global.scss` 中添加页面特定样式
|
||||
2. 在父页面组件（如 ConsolePage、AdminPage）中添加路由逻辑
|
||||
3. 如果需要持久化状态，添加 localStorage 逻辑
|
||||
4. 页面特有样式添加到 `src/styles/pages/_{module}.scss`（优先复用组件库）
|
||||
|
||||
### 添加新组件
|
||||
1. 在 `src/components/` 目录下创建组件
|
||||
2. 在 `src/styles/global.scss` 中添加组件样式
|
||||
3. 使用设计系统变量保持一致性
|
||||
2. 在 `src/styles/components/{name}/` 下创建 `_index.scss`
|
||||
3. 使用 `@use '../../tokens' as *;` 引入设计令牌
|
||||
4. 使用 BEM 命名：`.block__element--modifier`
|
||||
5. 在 `src/styles/components/_index.scss` 中添加 `@forward '{name}';`
|
||||
|
||||
### 修改样式
|
||||
1. 优先修改 `src/styles/_variables.scss` 中的变量
|
||||
2. 添加新的混入到 `src/styles/_mixins.scss`
|
||||
3. 组件样式添加到 `_components.scss`
|
||||
4. 页面特定样式添加到 `global.scss`
|
||||
1. **全局调整**：修改 `src/styles/tokens/` 中的令牌变量
|
||||
2. **组件调整**：修改 `src/styles/components/{name}/_index.scss`
|
||||
3. **页面调整**：修改 `src/styles/pages/_{module}.scss`
|
||||
4. 禁止直接修改 `global.scss`（它是纯入口文件）
|
||||
|
||||
### 样式验证清单
|
||||
- [ ] 类名是否遵循 BEM 规范
|
||||
- [ ] 颜色/间距/字号是否使用 tokens 变量
|
||||
- [ ] 是否存在重复定义的样式
|
||||
- [ ] 可复用样式是否放在 `components/` 而非 `pages/`
|
||||
- [ ] 表格操作列是否使用 `.col-actions` + `.table-actions`
|
||||
- [ ] `pnpm build` 是否通过
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -5,12 +5,12 @@ context: |
|
||||
- 纯前端展示原型项目（非功能原型），无后端交互，供内部开发人员参考UI界面使用，目标在于展示页面布局、样式和组件能力
|
||||
- 允许轻量级交互展示（如表单验证、弹框），状态展示策略：不重叠的状态通过静态数据驱动展示，重叠/覆盖类状态（弹框、下拉、抽屉等）允许简单交互切换
|
||||
- 示例数据应精心设计，展示不同的页面元素状态
|
||||
- 新增代码要遵循原有代码的设计风格和模式
|
||||
- 新增代码要遵循原有代码的设计风格和模式，优先考虑复用已有页面或组件的布局，优先考虑复用已有样式（src/styles）
|
||||
- 不引入UI库，使用当前SCSS样式方案
|
||||
- 使用pnpm作为包管理器，javascript作为开发语言，不引入typescript或eslint
|
||||
- 不构建测试，使用pnpm build验证打包即可，AI禁止运行pnpm dev（会挂起流程）
|
||||
- 不做性能优化，保持vite-plugin-singlefile单文件打包
|
||||
- 不做安全防御性编程，eval/dangerouslySetInnerHTML等按需使用
|
||||
- README.md是项目的开发文档，记录代码结构和关键开发模式，优先读取获取上下文
|
||||
- **优先阅读README.md**，README.md文档是项目的开发文档，记录代码结构和关键开发模式，优先读取获取上下文
|
||||
- 涉及页面/路由/组件/功能模块变更或技术栈调整时，同步更新README.md
|
||||
- Git提交: 仅中文; 格式为"类型: 简短描述",类型可选: feat(新功能)/fix(修复)/refactor(重构)/docs(文档)/style(格式)/test(测试)/chore(构建/工具); 多行描述空行后加详细说明; 禁创建git操作task
|
||||
|
||||
238
openspec/specs/component-library/spec.md
Normal file
238
openspec/specs/component-library/spec.md
Normal file
@@ -0,0 +1,238 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: 按钮组件
|
||||
组件库 SHALL 提供完整的按钮组件系统，支持多种变体和尺寸。
|
||||
|
||||
#### Scenario: 基础按钮
|
||||
- **WHEN** 开发者需要标准按钮
|
||||
- **THEN** 系统 SHALL 提供 `.btn` 类，包含基础样式（flex布局、居中、间距、过渡动画）
|
||||
|
||||
#### Scenario: 颜色变体
|
||||
- **WHEN** 开发者需要不同用途的按钮
|
||||
- **THEN** 系统 SHALL 提供 `.btn--primary`、`.btn--success`、`.btn--danger`、`.btn--warning`、`.btn--ghost` 等变体
|
||||
|
||||
#### Scenario: 尺寸变体
|
||||
- **WHEN** 开发者需要不同大小的按钮
|
||||
- **THEN** 系统 SHALL 提供 `.btn--sm`、`.btn--lg` 尺寸变体
|
||||
|
||||
#### Scenario: 图标按钮
|
||||
- **WHEN** 开发者需要仅含图标的按钮
|
||||
- **THEN** 系统 SHALL 提供 `.btn--icon-only` 修饰符
|
||||
|
||||
#### Scenario: 块级按钮
|
||||
- **WHEN** 开发者需要宽度占满的按钮
|
||||
- **THEN** 系统 SHALL 提供 `.btn--block` 修饰符
|
||||
|
||||
#### Scenario: 加载状态
|
||||
- **WHEN** 按钮处于加载中状态
|
||||
- **THEN** 系统 SHALL 提供 `.btn--loading` 修饰符，显示加载动画并禁用点击
|
||||
|
||||
### Requirement: 卡片组件
|
||||
组件库 SHALL 提供卡片容器组件。
|
||||
|
||||
#### Scenario: 基础卡片
|
||||
- **WHEN** 开发者需要内容容器
|
||||
- **THEN** 系统 SHALL 提供 `.card` 类，包含背景、边框、圆角、阴影
|
||||
|
||||
#### Scenario: 卡片区块
|
||||
- **WHEN** 卡片需要头部、主体、底部结构
|
||||
- **THEN** 系统 SHALL 提供 `.card__header`、`.card__body`、`.card__footer` 元素类
|
||||
|
||||
#### Scenario: 卡片变体
|
||||
- **WHEN** 开发者需要不同视觉风格的卡片
|
||||
- **THEN** 系统 SHALL 提供 `.card--flat`（无阴影）、`.card--elevated`（高阴影）等变体
|
||||
|
||||
### Requirement: 表格组件
|
||||
组件库 SHALL 提供数据表格组件。
|
||||
|
||||
#### Scenario: 基础表格
|
||||
- **WHEN** 开发者需要展示数据列表
|
||||
- **THEN** 系统 SHALL 提供 `.table` 类，包含表头、行、单元格样式
|
||||
|
||||
#### Scenario: 表格包装器
|
||||
- **WHEN** 表格需要横向滚动
|
||||
- **THEN** 系统 SHALL 提供 `.table__wrapper` 类，处理溢出和滚动
|
||||
|
||||
#### Scenario: 行悬停效果
|
||||
- **WHEN** 表格需要行悬停反馈
|
||||
- **THEN** 系统 SHALL 在 `.table tbody tr` 上提供悬停背景色变化
|
||||
|
||||
### Requirement: 表单组件
|
||||
组件库 SHALL 提供表单元素组件。
|
||||
|
||||
#### Scenario: 表单组
|
||||
- **WHEN** 开发者需要将标签和输入框组合
|
||||
- **THEN** 系统 SHALL 提供 `.form-group` 类，设置间距
|
||||
|
||||
#### Scenario: 标签
|
||||
- **WHEN** 表单需要字段标签
|
||||
- **THEN** 系统 SHALL 提供 `.form__label` 类，包含必填标记样式
|
||||
|
||||
#### Scenario: 输入框
|
||||
- **WHEN** 开发者需要文本输入
|
||||
- **THEN** 系统 SHALL 提供 `.form__input` 类，包含聚焦、错误状态样式
|
||||
|
||||
#### Scenario: 表单行
|
||||
- **WHEN** 表单项需要横向排列
|
||||
- **THEN** 系统 SHALL 提供 `.form__row` 和 `.form__col` 类
|
||||
|
||||
### Requirement: 状态标签组件
|
||||
组件库 SHALL 提供状态指示标签。
|
||||
|
||||
#### Scenario: 状态展示
|
||||
- **WHEN** 开发者需要展示运行/停止/错误等状态
|
||||
- **THEN** 系统 SHALL 提供 `.tag` 类和 `.tag--running`、`.tag--stopped`、`.tag--error`、`.tag--warning` 等变体
|
||||
|
||||
#### Scenario: 角色标签
|
||||
- **WHEN** 开发者需要展示用户角色
|
||||
- **THEN** 系统 SHALL 提供 `.tag--admin`、`.tag--member`、`.tag--developer` 等变体
|
||||
|
||||
### Requirement: 弹窗组件
|
||||
组件库 SHALL 提供模态弹窗组件。
|
||||
|
||||
#### Scenario: 弹窗容器
|
||||
- **WHEN** 开发者需要显示模态弹窗
|
||||
- **THEN** 系统 SHALL 提供 `.modal` 和 `.modal__overlay` 类
|
||||
|
||||
#### Scenario: 弹窗结构
|
||||
- **WHEN** 弹窗需要标题、内容、操作区
|
||||
- **THEN** 系统 SHALL 提供 `.modal__header`、`.modal__body`、`.modal__footer` 元素类
|
||||
|
||||
### Requirement: 提示组件
|
||||
组件库 SHALL 提供 Toast 提示组件。
|
||||
|
||||
#### Scenario: 提示消息
|
||||
- **WHEN** 开发者需要显示操作反馈
|
||||
- **THEN** 系统 SHALL 提供 `.toast` 类和 `.toast--success`、`.toast--error`、`.toast--warning`、`.toast--info` 等变体
|
||||
|
||||
### Requirement: 分页组件
|
||||
组件库 SHALL 提供分页导航组件。
|
||||
|
||||
#### Scenario: 分页导航
|
||||
- **WHEN** 列表需要分页
|
||||
- **THEN** 系统 SHALL 提供 `.pagination` 类和 `.pagination__item`、`.pagination__item--active` 元素类
|
||||
|
||||
### Requirement: 空状态组件
|
||||
组件库 SHALL 提供空状态展示组件。
|
||||
|
||||
#### Scenario: 无数据展示
|
||||
- **WHEN** 列表或页面无数据时
|
||||
- **THEN** 系统 SHALL 提供 `.empty-state` 类，包含图标、文字、可选操作按钮区域
|
||||
|
||||
### Requirement: 开关组件
|
||||
组件库 SHALL 提供切换开关组件。
|
||||
|
||||
#### Scenario: 布尔切换
|
||||
- **WHEN** 开发者需要开关控件
|
||||
- **THEN** 系统 SHALL 提供 `.switch` 类，包含滑块和选中状态样式
|
||||
|
||||
### Requirement: 技能卡片组件
|
||||
组件库 SHALL 提供技能展示专用卡片。
|
||||
|
||||
#### Scenario: 技能展示
|
||||
- **WHEN** 工作台需要展示技能列表
|
||||
- **THEN** 系统 SHALL 提供 `.skill-card` 类，包含图标区、信息区、统计区布局
|
||||
|
||||
### Requirement: 导航项组件
|
||||
组件库 SHALL 提供统一的侧边栏导航项组件。
|
||||
|
||||
#### Scenario: 导航菜单
|
||||
- **WHEN** 侧边栏需要导航菜单项
|
||||
- **THEN** 系统 SHALL 提供 `.nav-item` 类，统一替换 `.menu-item`、`.chat-nav-item`、`.admin-nav-item`
|
||||
|
||||
#### Scenario: 导航图标
|
||||
- **WHEN** 导航项需要图标
|
||||
- **THEN** 系统 SHALL 提供 `.nav-item__icon` 元素类
|
||||
|
||||
#### Scenario: 激活状态
|
||||
- **WHEN** 导航项需要显示激活状态
|
||||
- **THEN** 系统 SHALL 提供 `.nav-item--active` 修饰符类
|
||||
|
||||
### Requirement: 详情页头部组件
|
||||
组件库 SHALL 提供详情页头部布局组件。
|
||||
|
||||
#### Scenario: 详情头部布局
|
||||
- **WHEN** 详情页需要展示标题、图标、标签、统计
|
||||
- **THEN** 系统 SHALL 提供 `.detail-header` 类，替换内联样式 `display: flex; gap: 20px; align-items: flex-start`
|
||||
|
||||
#### Scenario: 详情图标
|
||||
- **WHEN** 详情头部需要大图标
|
||||
- **THEN** 系统 SHALL 提供 `.detail-header__icon` 元素类
|
||||
|
||||
#### Scenario: 详情标签组
|
||||
- **WHEN** 详情头部需要展示标签
|
||||
- **THEN** 系统 SHALL 提供 `.detail-tags` 类，替换内联样式
|
||||
|
||||
#### Scenario: 详情统计
|
||||
- **WHEN** 详情头部需要展示统计信息
|
||||
- **THEN** 系统 SHALL 提供 `.detail-stats` 类，替换内联样式
|
||||
|
||||
### Requirement: 文件列表组件
|
||||
组件库 SHALL 提供文件列表展示组件。
|
||||
|
||||
#### Scenario: 文件列表项
|
||||
- **WHEN** 详情页需要展示文件列表
|
||||
- **THEN** 系统 SHALL 提供 `.file-list__item` 类，包含图标、文件名、文件大小布局
|
||||
|
||||
#### Scenario: 文件图标
|
||||
- **WHEN** 文件项需要类型图标
|
||||
- **THEN** 系统 SHALL 提供 `.file-list__icon` 元素类
|
||||
|
||||
#### Scenario: 文件信息
|
||||
- **WHEN** 文件项需要展示名称和大小
|
||||
- **THEN** 系统 SHALL 提供 `.file-list__info`、`.file-list__name`、`.file-list__size` 元素类
|
||||
|
||||
### Requirement: 版本列表组件
|
||||
组件库 SHALL 提供版本历史列表组件。
|
||||
|
||||
#### Scenario: 版本列表项
|
||||
- **WHEN** 详情页需要展示版本历史
|
||||
- **THEN** 系统 SHALL 提供 `.version-list__item` 类，包含版本号、描述、日期布局
|
||||
|
||||
#### Scenario: 版本标签
|
||||
- **WHEN** 需要标记当前版本
|
||||
- **THEN** 系统 SHALL 提供 `.version-list__tag` 和 `.version-list__tag--current` 类
|
||||
|
||||
### Requirement: 返回按钮组件
|
||||
组件库 SHALL 提供统一的返回按钮样式。
|
||||
|
||||
#### Scenario: 返回按钮
|
||||
- **WHEN** 详情页需要返回按钮
|
||||
- **THEN** 系统 SHALL 提供 `.back-btn` 类，替换内联样式 `display: inline-flex; align-items: center; gap: 6px; color: #3B82F6`
|
||||
|
||||
### Requirement: 表单提示组件
|
||||
组件库 SHALL 提供表单辅助提示样式。
|
||||
|
||||
#### Scenario: 表单提示文字
|
||||
- **WHEN** 表单字段需要辅助说明
|
||||
- **THEN** 系统 SHALL 提供 `.form__hint` 类，替换内联样式 `font-size: 12px; color: #6B7280; margin-top: 4px`
|
||||
|
||||
### Requirement: 密码输入框组件
|
||||
组件库 SHALL 提供密码输入框组件，支持显示/隐藏切换功能。
|
||||
|
||||
#### Scenario: 基础密码输入框
|
||||
- **WHEN** 表单需要密码输入
|
||||
- **THEN** 系统 SHALL 提供 `type="password"` 的 `.form__input` 输入框
|
||||
|
||||
#### Scenario: 带切换的密码输入框
|
||||
- **WHEN** 表单需要密码输入并支持显示/隐藏切换
|
||||
- **THEN** 系统 SHALL 提供 `.password-input` 容器，包含 `.form__input` 和 `.password-toggle` 按钮
|
||||
|
||||
#### Scenario: 切换按钮样式
|
||||
- **WHEN** 用户需要切换密码可见性
|
||||
- **THEN** 系统 SHALL 提供 `.password-toggle` 类，定位在输入框右侧，包含眼睛图标
|
||||
|
||||
#### Scenario: 输入框错误状态
|
||||
- **WHEN** 密码验证失败
|
||||
- **THEN** 系统 SHALL 提供 `.form__input--error` 修饰符，输入框边框变红，并通过 `.form__error` 显示错误提示
|
||||
|
||||
### Requirement: 类名规范检查
|
||||
组件库 SHALL 确保所有样式类名符合 BEM 规范，无分散的内联样式。
|
||||
|
||||
#### Scenario: BEM 命名验证
|
||||
- **WHEN** 检查组件类名
|
||||
- **THEN** 所有类名 SHALL 遵循 `.block__element--modifier` 格式
|
||||
|
||||
#### Scenario: 分散样式收拢
|
||||
- **WHEN** 检查 HTML/JSX 文件
|
||||
- **THEN** 所有样式定义 SHALL 集中在样式文件中，无独立 `<style>` 标签或内联 `style` 属性
|
||||
62
openspec/specs/design-tokens/spec.md
Normal file
62
openspec/specs/design-tokens/spec.md
Normal file
@@ -0,0 +1,62 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: 颜色令牌定义
|
||||
设计系统 SHALL 提供统一的颜色令牌，包括品牌色、功能色、中性色、背景色、边框色。
|
||||
|
||||
#### Scenario: 品牌色使用
|
||||
- **WHEN** 开发者需要应用主色调
|
||||
- **THEN** 系统 SHALL 提供 `--color-primary`、`--color-primary-light`、`--color-primary-dark` 等变量
|
||||
|
||||
#### Scenario: 功能色使用
|
||||
- **WHEN** 开发者需要表示状态（成功、警告、错误）
|
||||
- **THEN** 系统 SHALL 提供 `--color-success`、`--color-warning`、`--color-danger` 及其浅色变体
|
||||
|
||||
#### Scenario: 中性色使用
|
||||
- **WHEN** 开发者需要文本、边框、背景色
|
||||
- **THEN** 系统 SHALL 提供 `--color-text-1` 到 `--color-text-4`、`--color-border-1` 到 `--color-border-3`、`--color-bg-1` 到 `--color-bg-4`
|
||||
|
||||
### Requirement: 间距令牌定义
|
||||
设计系统 SHALL 提供统一的间距令牌，基于 4px 基数网格。
|
||||
|
||||
#### Scenario: 间距应用
|
||||
- **WHEN** 开发者需要设置 margin、padding、gap
|
||||
- **THEN** 系统 SHALL 提供标准化的间距值（4, 8, 12, 16, 20, 24, 32, 40, 48px）
|
||||
|
||||
### Requirement: 阴影令牌定义
|
||||
设计系统 SHALL 提供统一的阴影令牌，用于表达层级和深度。
|
||||
|
||||
#### Scenario: 阴影应用
|
||||
- **WHEN** 开发者需要为卡片、弹窗、下拉菜单添加阴影
|
||||
- **THEN** 系统 SHALL 提供 `--shadow-1`、`--shadow-2`、`--shadow-3`、`--shadow-card` 四级阴影
|
||||
|
||||
### Requirement: 圆角令牌定义
|
||||
设计系统 SHALL 提供统一的圆角令牌。
|
||||
|
||||
#### Scenario: 圆角应用
|
||||
- **WHEN** 开发者需要设置组件圆角
|
||||
- **THEN** 系统 SHALL 提供 `--radius-sm`（6px）、`--radius-md`（8px）、`--radius-lg`（12px）、`--radius-xl`（16px）
|
||||
|
||||
### Requirement: 过渡动画令牌定义
|
||||
设计系统 SHALL 提供统一的过渡动画参数。
|
||||
|
||||
#### Scenario: 过渡动画应用
|
||||
- **WHEN** 开发者需要为交互状态添加过渡效果
|
||||
- **THEN** 系统 SHALL 提供 `--transition` 标准过渡参数（0.2s cubic-bezier(0.4, 0, 0.2, 1)）
|
||||
|
||||
### Requirement: 布局尺寸令牌定义
|
||||
设计系统 SHALL 提供统一的布局尺寸令牌。
|
||||
|
||||
#### Scenario: 布局尺寸应用
|
||||
- **WHEN** 开发者需要设置侧边栏宽度、顶部栏高度
|
||||
- **THEN** 系统 SHALL 提供 `--sidebar-width`、`--header-height` 等变量
|
||||
|
||||
### Requirement: SCSS 变量与 CSS 变量映射
|
||||
设计系统 SHALL 同时提供 SCSS 变量和 CSS 变量，满足不同场景需求。
|
||||
|
||||
#### Scenario: 编译时使用
|
||||
- **WHEN** 开发者在 SCSS 中需要引用变量
|
||||
- **THEN** 系统 SHALL 提供 `$primary`、`$spacing-4` 等 SCSS 变量
|
||||
|
||||
#### Scenario: 运行时使用
|
||||
- **WHEN** 开发者需要在运行时动态获取变量值
|
||||
- **THEN** 系统 SHALL 在 `:root` 中定义对应的 CSS 自定义属性
|
||||
90
openspec/specs/layout-system/spec.md
Normal file
90
openspec/specs/layout-system/spec.md
Normal file
@@ -0,0 +1,90 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: 应用外壳布局
|
||||
布局系统 SHALL 提供应用级外壳布局，包含侧边栏、顶部栏、主内容区。
|
||||
|
||||
#### Scenario: 基础应用布局
|
||||
- **WHEN** 开发者需要管理控制台布局
|
||||
- **THEN** 系统 SHALL 提供 `.app-shell` 类，包含 `.app-shell__sidebar`、`.app-shell__header`、`.app-shell__main` 区域
|
||||
|
||||
#### Scenario: 侧边栏结构
|
||||
- **WHEN** 侧边栏需要品牌区、导航区、用户区
|
||||
- **THEN** 系统 SHALL 提供 `.sidebar__brand`、`.sidebar__nav`、`.sidebar__user` 元素类
|
||||
|
||||
#### Scenario: 导航项
|
||||
- **WHEN** 侧边栏需要导航菜单
|
||||
- **THEN** 系统 SHALL 提供 `.nav-item` 类和 `.nav-item--active` 状态类
|
||||
|
||||
#### Scenario: 导航统一
|
||||
- **WHEN** 控制台、聊天页、管理台都需要导航项
|
||||
- **THEN** 系统 SHALL 统一使用 `.nav-item` 替换原有的 `.menu-item`、`.chat-nav-item`、`.admin-nav-item`
|
||||
|
||||
#### Scenario: 导航图标
|
||||
- **WHEN** 导航项需要图标
|
||||
- **THEN** 系统 SHALL 提供 `.nav-item__icon` 元素类
|
||||
|
||||
#### Scenario: 导航文本
|
||||
- **WHEN** 导航项需要文本和额外信息
|
||||
- **THEN** 系统 SHALL 提供 `.nav-item__text` 和 `.nav-item__meta` 元素类
|
||||
|
||||
#### Scenario: 顶部栏结构
|
||||
- **WHEN** 顶部栏需要左侧标题区和右侧操作区
|
||||
- **THEN** 系统 SHALL 提供 `.header__left`、`.header__right` 元素类
|
||||
|
||||
### Requirement: 聊天页面布局
|
||||
布局系统 SHALL 提供聊天页面专用布局。
|
||||
|
||||
#### Scenario: 聊天布局容器
|
||||
- **WHEN** 开发者需要聊天界面布局
|
||||
- **THEN** 系统 SHALL 提供 `.chat-layout` 类，包含 `.chat-layout__header`、`.chat-layout__sidebar`、`.chat-layout__content`
|
||||
|
||||
#### Scenario: 会话列表
|
||||
- **WHEN** 侧边栏需要展示会话列表
|
||||
- **THEN** 系统 SHALL 提供 `.conversation-list` 容器和 `.conversation-item` 项类
|
||||
|
||||
#### Scenario: 聊天内容区
|
||||
- **WHEN** 需要展示消息和输入区
|
||||
- **THEN** 系统 SHALL 提供 `.chat-content__messages` 和 `.chat-content__input` 区域
|
||||
|
||||
### Requirement: 管理台布局
|
||||
布局系统 SHALL 提供管理台页面布局。
|
||||
|
||||
#### Scenario: 管理台侧边栏
|
||||
- **WHEN** 管理台需要独立导航结构
|
||||
- **THEN** 系统 SHALL 提供 `.admin-layout` 类，包含 `.admin-layout__sidebar` 和 `.admin-layout__content`
|
||||
|
||||
### Requirement: 页面内容区
|
||||
布局系统 SHALL 提供标准化的页面内容容器。
|
||||
|
||||
#### Scenario: 标准页面内容
|
||||
- **WHEN** 页面需要标准内边距和滚动
|
||||
- **THEN** 系统 SHALL 提供 `.page-content` 类，包含标准 padding 和 overflow 设置
|
||||
|
||||
#### Scenario: 全宽页面内容
|
||||
- **WHEN** 页面需要无内边距全宽布局
|
||||
- **THEN** 系统 SHALL 提供 `.page-content--full` 修饰符
|
||||
|
||||
### Requirement: 搜索栏布局
|
||||
布局系统 SHALL 提供搜索过滤区域布局。
|
||||
|
||||
#### Scenario: 搜索表单
|
||||
- **WHEN** 列表页面需要搜索过滤
|
||||
- **THEN** 系统 SHALL 提供 `.search-bar` 类，支持多列网格布局
|
||||
|
||||
### Requirement: 统计卡片网格
|
||||
布局系统 SHALL 提供统计数据展示网格。
|
||||
|
||||
#### Scenario: 统计展示
|
||||
- **WHEN** 概览页面需要展示关键指标
|
||||
- **THEN** 系统 SHALL 提供 `.stats-grid` 和 `.stat-card` 类
|
||||
|
||||
### Requirement: 响应式断点
|
||||
布局系统 SHALL 提供响应式布局支持。
|
||||
|
||||
#### Scenario: 移动端适配
|
||||
- **WHEN** 屏幕宽度小于 768px
|
||||
- **THEN** 系统 SHALL 隐藏侧边栏（可通过 `.sidebar--open` 手动展开）、调整网格为单列、减小间距
|
||||
|
||||
#### Scenario: 侧边栏遮罩
|
||||
- **WHEN** 移动端侧边栏展开时
|
||||
- **THEN** 系统 SHALL 显示 `.sidebar__overlay` 遮罩层，点击可关闭侧边栏
|
||||
@@ -290,51 +290,51 @@ data = [<span style="color: #A78BFA;">1</span>, <span style="color: #A78BFA;">2<
|
||||
</div>
|
||||
<div class="message-bubble">
|
||||
<p><strong>本月各部门销售业绩汇总：</strong></p>
|
||||
<table style="margin-top: 12px; width: 100%; border-collapse: collapse; font-size: 13px;">
|
||||
<table class="msg-table">
|
||||
<thead>
|
||||
<tr style="background: #F1F5F9;">
|
||||
<th style="padding: 10px 12px; text-align: left; border: 1px solid #E2E8F0; font-weight: 600;">部门</th>
|
||||
<th style="padding: 10px 12px; text-align: right; border: 1px solid #E2E8F0; font-weight: 600;">销售额</th>
|
||||
<th style="padding: 10px 12px; text-align: right; border: 1px solid #E2E8F0; font-weight: 600;">订单数</th>
|
||||
<th style="padding: 10px 12px; text-align: right; border: 1px solid #E2E8F0; font-weight: 600;">完成率</th>
|
||||
<tr>
|
||||
<th>部门</th>
|
||||
<th class="text-right">销售额</th>
|
||||
<th class="text-right">订单数</th>
|
||||
<th class="text-right">完成率</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0;">华东区</td>
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right; font-weight: 600; color: #10B981;">¥528,600</td>
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;">186</td>
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;"><span style="color: #10B981;">112%</span></td>
|
||||
</tr>
|
||||
<tr style="background: #FAFAFA;">
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0;">华南区</td>
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right; font-weight: 600;">¥412,300</td>
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;">142</td>
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;"><span style="color: #F59E0B;">98%</span></td>
|
||||
<td>华东区</td>
|
||||
<td class="text-right value-success">¥528,600</td>
|
||||
<td class="text-right">186</td>
|
||||
<td class="text-right"><span class="value-success">112%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0;">华北区</td>
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right; font-weight: 600;">¥385,900</td>
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;">128</td>
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;"><span style="color: #10B981;">105%</span></td>
|
||||
<td>华南区</td>
|
||||
<td class="text-right">¥412,300</td>
|
||||
<td class="text-right">142</td>
|
||||
<td class="text-right"><span class="value-warning">98%</span></td>
|
||||
</tr>
|
||||
<tr style="background: #FAFAFA;">
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0;">西南区</td>
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right; font-weight: 600; color: #EF4444;">¥267,400</td>
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;">95</td>
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;"><span style="color: #EF4444;">76%</span></td>
|
||||
<tr>
|
||||
<td>华北区</td>
|
||||
<td class="text-right">¥385,900</td>
|
||||
<td class="text-right">128</td>
|
||||
<td class="text-right"><span class="value-success">105%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>西南区</td>
|
||||
<td class="text-right value-danger">¥267,400</td>
|
||||
<td class="text-right">95</td>
|
||||
<td class="text-right"><span class="value-danger">76%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr style="background: #F1F5F9; font-weight: 600;">
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0;">合计</td>
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right; color: #3B82F6;">¥1,594,200</td>
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;">551</td>
|
||||
<td style="padding: 10px 12px; border: 1px solid #E2E8F0; text-align: right;"><span style="color: #3B82F6;">98%</span></td>
|
||||
<tr>
|
||||
<td>合计</td>
|
||||
<td class="text-right value-primary">¥1,594,200</td>
|
||||
<td class="text-right">551</td>
|
||||
<td class="text-right"><span class="value-primary">98%</span></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<p style="margin-top: 12px; font-size: 13px; color: #64748B;">数据更新时间：2026-03-19 11:30</p>
|
||||
<p class="msg-meta">数据更新时间：2026-03-19 11:30</p>
|
||||
</div>
|
||||
<div class="message-time">11:31</div>
|
||||
</div>
|
||||
|
||||
@@ -84,7 +84,7 @@ function AdminProjectsPage({ onAdd, onEdit }) {
|
||||
<th>成员数</th>
|
||||
<th>状态</th>
|
||||
<th>创建时间</th>
|
||||
<th style={{ width: '200px' }}>操作</th>
|
||||
<th className="col-actions">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -96,8 +96,8 @@ function AdminProjectsPage({ onAdd, onEdit }) {
|
||||
<td>{project.members} 人</td>
|
||||
<td><StatusTag status={project.status} /></td>
|
||||
<td>{project.createTime}</td>
|
||||
<td style={{ width: '200px' }}>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<td className="col-actions">
|
||||
<div className="table-actions">
|
||||
<button className={`text-btn ${project.status === '正常' ? 'text-btn-danger' : 'text-btn-primary'}`}>{project.status === '正常' ? '禁用' : '启用'}</button>
|
||||
<button className="text-btn text-btn-primary" onClick={() => onEdit(project)}>编辑</button>
|
||||
<button className="text-btn text-btn-danger" onClick={() => setDeleteTarget(project)}>删除</button>
|
||||
|
||||
@@ -84,7 +84,7 @@ function DepartmentsPage({ onAdd, onEdit }) {
|
||||
<th>成员数</th>
|
||||
<th>状态</th>
|
||||
<th>创建时间</th>
|
||||
<th style={{ width: '200px' }}>操作</th>
|
||||
<th className="col-actions">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -96,8 +96,8 @@ function DepartmentsPage({ onAdd, onEdit }) {
|
||||
<td>{dept.members} 人</td>
|
||||
<td><StatusTag status={dept.status} /></td>
|
||||
<td>{dept.createTime}</td>
|
||||
<td style={{ width: '200px' }}>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<td className="col-actions">
|
||||
<div className="table-actions">
|
||||
<button className={`text-btn ${dept.status === '正常' ? 'text-btn-danger' : 'text-btn-primary'}`}>{dept.status === '正常' ? '禁用' : '启用'}</button>
|
||||
<button className="text-btn text-btn-primary" onClick={() => onEdit(dept)}>编辑</button>
|
||||
<button className="text-btn text-btn-danger" onClick={() => setDeleteTarget(dept)}>删除</button>
|
||||
|
||||
@@ -57,7 +57,7 @@ function ModelConfigsPage({ onAdd, onEdit }) {
|
||||
<th>配置类型</th>
|
||||
<th>关键信息</th>
|
||||
<th>状态</th>
|
||||
<th style={{ width: '200px' }}>操作</th>
|
||||
<th className="col-actions">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -73,8 +73,8 @@ function ModelConfigsPage({ onAdd, onEdit }) {
|
||||
<span className="status status-stopped">未生效</span>
|
||||
)}
|
||||
</td>
|
||||
<td style={{ width: '200px' }}>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<td className="col-actions">
|
||||
<div className="table-actions">
|
||||
{!config.isActive && (
|
||||
<button
|
||||
className="text-btn text-btn-primary"
|
||||
|
||||
@@ -108,7 +108,7 @@ function UsersPage({ onAdd, onEdit }) {
|
||||
<th>手机号</th>
|
||||
<th>状态</th>
|
||||
<th>最后登录</th>
|
||||
<th style={{ width: '200px' }}>操作</th>
|
||||
<th className="col-actions">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -121,8 +121,8 @@ function UsersPage({ onAdd, onEdit }) {
|
||||
<td>{user.phone}</td>
|
||||
<td><StatusTag status={user.status} /></td>
|
||||
<td>{user.lastLogin}</td>
|
||||
<td style={{ width: '200px' }}>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<td className="col-actions">
|
||||
<div className="table-actions">
|
||||
<button className={`text-btn ${user.status === '正常' ? 'text-btn-danger' : 'text-btn-primary'}`}>{user.status === '正常' ? '禁用' : '启用'}</button>
|
||||
<button className="text-btn text-btn-primary" onClick={() => onEdit(user)}>编辑</button>
|
||||
<button className="text-btn text-btn-danger" onClick={() => setDeleteTarget(user)}>删除</button>
|
||||
|
||||
@@ -37,13 +37,13 @@ function ConsoleReviewListPage({ onReviewClick }) {
|
||||
<th>版本号</th>
|
||||
<th>提交时间</th>
|
||||
<th>开发者</th>
|
||||
<th style={{ width: '100px' }}>操作</th>
|
||||
<th className="col-actions--narrow">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{pendingVersionReviews.map(review => (
|
||||
<tr key={review.id}>
|
||||
<td style={{ fontWeight: 600 }}>{review.skillName}</td>
|
||||
<td><strong>{review.skillName}</strong></td>
|
||||
<td>{review.version}</td>
|
||||
<td>{review.date}</td>
|
||||
<td>{review.developer}</td>
|
||||
@@ -71,13 +71,13 @@ function ConsoleReviewListPage({ onReviewClick }) {
|
||||
<th>当前版本</th>
|
||||
<th>申请时间</th>
|
||||
<th>开发者</th>
|
||||
<th style={{ width: '100px' }}>操作</th>
|
||||
<th className="col-actions--narrow">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{pendingUnlistReviews.map(review => (
|
||||
<tr key={review.id}>
|
||||
<td style={{ fontWeight: 600 }}>{review.skillName}</td>
|
||||
<td><strong>{review.skillName}</strong></td>
|
||||
<td>{review.currentVersion}</td>
|
||||
<td>{review.date}</td>
|
||||
<td>{review.developer}</td>
|
||||
|
||||
@@ -203,7 +203,7 @@ function MySkillsPage({ onConfig, onBack }) {
|
||||
<th>描述</th>
|
||||
<th>分类</th>
|
||||
<th>状态</th>
|
||||
<th style={{ width: '200px' }}>操作</th>
|
||||
<th className="col-actions">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -221,7 +221,7 @@ function MySkillsPage({ onConfig, onBack }) {
|
||||
<span>{cv?.publicName || skill?.name || '未知技能'}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ color: '#64748B' }}>{cv?.publicDesc || skill?.desc || '-'}</td>
|
||||
<td className="cell-muted">{cv?.publicDesc || skill?.desc || '-'}</td>
|
||||
<td>{cv?.category || '-'}</td>
|
||||
<td>
|
||||
<span className={`status ${statusInfo.className}`}>
|
||||
@@ -229,7 +229,7 @@ function MySkillsPage({ onConfig, onBack }) {
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<div className="table-actions">
|
||||
{!delisted && (
|
||||
<>
|
||||
{item.enabled ? (
|
||||
|
||||
@@ -93,7 +93,7 @@ function ProjectsPage({ onAddMember }) {
|
||||
<tr>
|
||||
<th>成员</th>
|
||||
<th style={{ width: '100px' }}>角色</th>
|
||||
<th style={{ width: '120px' }}>操作</th>
|
||||
<th className="col-actions--narrow">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -108,9 +108,11 @@ function ProjectsPage({ onAddMember }) {
|
||||
</div>
|
||||
</td>
|
||||
<td><span className={`status ${member.role === '管理员' ? 'role-admin' : 'role-member'}`}>{member.role}</span></td>
|
||||
<td style={{ width: '120px' }}>
|
||||
<button className="text-btn text-btn-primary">配置</button>
|
||||
<button className="text-btn text-btn-danger" style={{ marginLeft: '8px' }} onClick={() => handleRemoveClick(member)}>移除</button>
|
||||
<td className="col-actions--narrow">
|
||||
<div className="table-actions">
|
||||
<button className="text-btn text-btn-primary">配置</button>
|
||||
<button className="text-btn text-btn-danger" onClick={() => handleRemoveClick(member)}>移除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
|
||||
@@ -153,7 +153,7 @@ function SkillConfigPage({ subscriptionId, onBack }) {
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Value</th>
|
||||
<th style={{ width: '80px' }}>操作</th>
|
||||
<th className="col-actions--tiny">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
@@ -57,7 +57,7 @@ function TaskDetailPage({ taskId, onBack }) {
|
||||
<div>
|
||||
<div style={{ fontSize: '14px', fontWeight: '600', color: '#1E293B', marginBottom: '12px' }}>执行日志</div>
|
||||
<div style={{ border: '1px solid #E2E8F0', borderRadius: '8px', overflow: 'hidden' }}>
|
||||
<table className="table" style={{ marginBottom: '0' }}>
|
||||
<table className="table no-margin-bottom">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: '180px', whiteSpace: 'nowrap' }}>执行时间</th>
|
||||
@@ -68,13 +68,13 @@ function TaskDetailPage({ taskId, onBack }) {
|
||||
<tbody>
|
||||
{task.logs.map((log, index) => (
|
||||
<tr key={index}>
|
||||
<td style={{ color: '#64748B', fontSize: '13px', whiteSpace: 'nowrap' }}>{log.time}</td>
|
||||
<td className="cell-muted">{log.time}</td>
|
||||
<td>
|
||||
<span className={`status ${log.status === '成功' ? 'status-running' : 'status-error'}`}>
|
||||
{log.status}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ fontSize: '14px', color: '#475569' }}>{log.message}</td>
|
||||
<td>{log.message}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
|
||||
@@ -95,12 +95,12 @@ function MySkillsPage({ onSkillClick }) {
|
||||
<th>内部名称</th>
|
||||
<th>内部描述</th>
|
||||
<th>状态</th>
|
||||
<th style={{ width: '200px' }}>操作</th>
|
||||
<th className="col-actions">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredList.map(skill => (
|
||||
<tr key={skill.id} onClick={() => onSkillClick(skill.id)} style={{ cursor: 'pointer' }}>
|
||||
<tr key={skill.id} className="tr-clickable" onClick={() => onSkillClick(skill.id)}>
|
||||
<td>{skill.name}</td>
|
||||
<td>{skill.desc}</td>
|
||||
<td>
|
||||
@@ -109,7 +109,7 @@ function MySkillsPage({ onSkillClick }) {
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<div className="table-actions">
|
||||
<button className="text-btn text-btn-primary" onClick={e => { e.stopPropagation(); onSkillClick(skill.id); }}>
|
||||
编辑
|
||||
</button>
|
||||
|
||||
@@ -1,188 +0,0 @@
|
||||
// 通用组件样式
|
||||
// 按钮、卡片、表单、状态标签等
|
||||
|
||||
@use 'variables' as *;
|
||||
@use 'mixins' as *;
|
||||
|
||||
// 按钮
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
text-decoration: none;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
// 主要按钮
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
border-color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-primary-dark);
|
||||
border-color: var(--color-primary-dark);
|
||||
}
|
||||
}
|
||||
|
||||
// 小按钮
|
||||
.btn-sm {
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
// 按钮组
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
// 卡片
|
||||
.card {
|
||||
background: var(--color-bg-1);
|
||||
border: 1px solid var(--color-border-2);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-card);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
// 表单
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--color-border-3);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-bg-1);
|
||||
color: var(--color-text-1);
|
||||
transition: border-color 0.2s;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-col {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// 状态标签
|
||||
.status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: 999px;
|
||||
|
||||
&.status-running {
|
||||
background: var(--color-success-light);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
&.status-stopped {
|
||||
background: var(--color-bg-3);
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
&.status-error {
|
||||
background: var(--color-danger-light);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
&.status-warning {
|
||||
background: var(--color-warning-light);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
&.role-admin {
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.role-member {
|
||||
background: var(--color-bg-3);
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
}
|
||||
|
||||
// 文本按钮
|
||||
.text-btn {
|
||||
padding: 4px 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-bg-2);
|
||||
}
|
||||
}
|
||||
|
||||
.text-btn-primary {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.text-btn-success {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.text-btn-danger {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
// 布局样式
|
||||
// 侧边栏、主内容区、页眉等
|
||||
|
||||
@use 'variables' as *;
|
||||
@use 'mixins' as *;
|
||||
|
||||
// 主布局
|
||||
.layout {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 侧边栏
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
background: var(--color-bg-1);
|
||||
border-right: 1px solid var(--color-border-2);
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: 101;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
height: var(--header-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 其他布局样式...
|
||||
@@ -1,52 +0,0 @@
|
||||
// 页面特定样式
|
||||
// 首页、管理台、开发台、技能市场等
|
||||
|
||||
@use 'variables' as *;
|
||||
@use 'mixins' as *;
|
||||
|
||||
// 首页样式（从内联样式迁移）
|
||||
.home-layout {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -30%;
|
||||
right: -20%;
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -20%;
|
||||
left: -10%;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.home-header {
|
||||
padding: 0 48px;
|
||||
height: 68px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
// 其他页面样式将逐步添加...
|
||||
@@ -1,54 +0,0 @@
|
||||
// SCSS Variables - 设计系统变量
|
||||
// 注意：这些是SCSS变量，用于开发时引用
|
||||
// CSS变量定义在:root中，供运行时使用
|
||||
|
||||
// 品牌主色
|
||||
$primary: #3B82F6;
|
||||
$primary-light: #EFF6FF;
|
||||
$primary-lighter: #F8FAFC;
|
||||
$primary-dark: #2563EB;
|
||||
|
||||
// 功能色
|
||||
$success: #10B981;
|
||||
$success-light: #ECFDF5;
|
||||
$warning: #F59E0B;
|
||||
$warning-light: #FFFBEB;
|
||||
$danger: #EF4444;
|
||||
$danger-light: #FEF2F2;
|
||||
|
||||
// 中性色
|
||||
$text-1: #1E293B;
|
||||
$text-2: #475569;
|
||||
$text-3: #94A3B8;
|
||||
$text-4: #CBD5E1;
|
||||
|
||||
// 边框/分割线
|
||||
$border-1: #F8FAFC;
|
||||
$border-2: #F1F5F9;
|
||||
$border-3: #E2E8F0;
|
||||
|
||||
// 背景色
|
||||
$bg-1: #FFFFFF;
|
||||
$bg-2: #F8FAFC;
|
||||
$bg-3: #F1F5F9;
|
||||
$bg-4: #E2E8F0;
|
||||
|
||||
// 阴影
|
||||
$shadow-1: 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
$shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06);
|
||||
$shadow-3: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||
$shadow-card: 0 2px 8px rgba(15, 23, 42, 0.04);
|
||||
|
||||
// 布局尺寸
|
||||
$sidebar-width: 240px;
|
||||
$header-height: 60px;
|
||||
$radius-sm: 6px;
|
||||
$radius-md: 8px;
|
||||
$radius-lg: 12px;
|
||||
$radius-xl: 16px;
|
||||
|
||||
// 过渡动画
|
||||
$transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
// 字体
|
||||
$font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
|
||||
18
src/styles/components/_index.scss
Normal file
18
src/styles/components/_index.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
// Components 入口
|
||||
|
||||
@forward 'button';
|
||||
@forward 'card';
|
||||
@forward 'table';
|
||||
@forward 'form';
|
||||
@forward 'tag';
|
||||
@forward 'modal';
|
||||
@forward 'toast';
|
||||
@forward 'pagination';
|
||||
@forward 'empty-state';
|
||||
@forward 'switch';
|
||||
@forward 'skill-card';
|
||||
@forward 'nav';
|
||||
@forward 'detail';
|
||||
@forward 'password-input';
|
||||
@forward 'search-bar';
|
||||
@forward 'stat-card';
|
||||
200
src/styles/components/button/_index.scss
Normal file
200
src/styles/components/button/_index.scss
Normal file
@@ -0,0 +1,200 @@
|
||||
// 按钮组件
|
||||
|
||||
@use '../../tokens' as *;
|
||||
|
||||
// Block
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 9px 16px;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-semibold;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border-3);
|
||||
background: var(--color-bg-1);
|
||||
color: var(--color-text-1);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-bg-2);
|
||||
border-color: var(--color-border-3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
// Element: icon
|
||||
.btn__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// Modifier: colors
|
||||
.btn--primary {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: #FFFFFF;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-primary-dark);
|
||||
border-color: var(--color-primary-dark);
|
||||
color: #FFFFFF;
|
||||
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
.btn--success {
|
||||
background: var(--color-success);
|
||||
border-color: var(--color-success);
|
||||
color: #FFFFFF;
|
||||
|
||||
&:hover {
|
||||
background: #059669;
|
||||
border-color: #059669;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--warning {
|
||||
background: var(--color-warning);
|
||||
border-color: var(--color-warning);
|
||||
color: #FFFFFF;
|
||||
|
||||
&:hover {
|
||||
background: #D97706;
|
||||
border-color: #D97706;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--danger {
|
||||
background: var(--color-danger);
|
||||
border-color: var(--color-danger);
|
||||
color: #FFFFFF;
|
||||
|
||||
&:hover {
|
||||
background: #DC2626;
|
||||
border-color: #DC2626;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
// Modifier: ghost (text button style)
|
||||
.btn--ghost {
|
||||
padding: 2px 6px;
|
||||
font-size: $font-size-sm + 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--color-primary);
|
||||
font-weight: $font-weight-medium;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary-dark);
|
||||
background: transparent;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
&--danger {
|
||||
color: var(--color-danger);
|
||||
|
||||
&:hover {
|
||||
color: #DC2626;
|
||||
}
|
||||
}
|
||||
|
||||
&--success {
|
||||
color: var(--color-success);
|
||||
|
||||
&:hover {
|
||||
color: #059669;
|
||||
}
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: var(--color-warning);
|
||||
|
||||
&:hover {
|
||||
color: #D97706;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modifier: sizes
|
||||
.btn--sm {
|
||||
padding: 6px 12px;
|
||||
font-size: $font-size-sm + 1;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
.btn--lg {
|
||||
padding: 12px 24px;
|
||||
font-size: $font-size-md;
|
||||
}
|
||||
|
||||
// Modifier: layout
|
||||
.btn--icon-only {
|
||||
padding: 8px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.btn--block {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Modifier: state
|
||||
.btn--loading {
|
||||
position: relative;
|
||||
color: transparent;
|
||||
pointer-events: none;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid currentColor;
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: btn-spin 0.6s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes btn-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// Button group
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Legacy compatibility aliases
|
||||
.btn-primary { @extend .btn--primary; }
|
||||
.btn-success { @extend .btn--success; }
|
||||
.btn-warning { @extend .btn--warning; }
|
||||
.btn-danger { @extend .btn--danger; }
|
||||
.btn-sm { @extend .btn--sm; }
|
||||
.text-btn { @extend .btn--ghost; }
|
||||
.text-btn-primary { @extend .btn--ghost; }
|
||||
.text-btn-success { @extend .btn--ghost--success; }
|
||||
.text-btn-danger { @extend .btn--ghost--danger; }
|
||||
63
src/styles/components/card/_index.scss
Normal file
63
src/styles/components/card/_index.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
// 卡片组件
|
||||
|
||||
@use '../../tokens' as *;
|
||||
|
||||
// Block
|
||||
.card {
|
||||
background: var(--color-bg-1);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-card);
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid var(--color-border-2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Element: header
|
||||
.card__header {
|
||||
padding: 18px 22px;
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--color-bg-1);
|
||||
}
|
||||
|
||||
// Element: title
|
||||
.card__title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
// Element: body
|
||||
.card__body {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
// Element: footer
|
||||
.card__footer {
|
||||
padding: 16px 22px;
|
||||
border-top: 1px solid var(--color-border-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
// Modifier: variants
|
||||
.card--flat {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.card--elevated {
|
||||
box-shadow: var(--shadow-2);
|
||||
}
|
||||
|
||||
// Legacy compatibility
|
||||
.card-header { @extend .card__header; }
|
||||
.card-title { @extend .card__title; }
|
||||
.card-body { @extend .card__body; }
|
||||
.card-footer { @extend .card__footer; }
|
||||
151
src/styles/components/detail/_index.scss
Normal file
151
src/styles/components/detail/_index.scss
Normal file
@@ -0,0 +1,151 @@
|
||||
// 详情页组件
|
||||
|
||||
@use '../../tokens' as *;
|
||||
|
||||
// 详情页头部
|
||||
.detail-header {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.detail-header__icon {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, #8B5CF6 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detail-header__main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// 详情标签组
|
||||
.detail-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.detail-tag {
|
||||
padding: 4px 12px;
|
||||
background: var(--color-bg-3);
|
||||
border-radius: 999px;
|
||||
font-size: $font-size-sm + 1;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
// 详情统计
|
||||
.detail-stats {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
color: var(--color-text-3);
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
// 详情分区
|
||||
.detail-section {
|
||||
margin-top: 24px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--color-border-3);
|
||||
|
||||
h3 {
|
||||
font-size: $font-size-lg;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 文件列表
|
||||
.file-list__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
background: var(--color-bg-2);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.file-list__icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #E8F3FF;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.file-list__info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.file-list__name {
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.file-list__size {
|
||||
font-size: $font-size-sm;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
// 版本列表
|
||||
.version-list__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--color-border-3);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.version-list__info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.version-list__tag {
|
||||
padding: 3px 10px;
|
||||
background: var(--color-bg-3);
|
||||
border-radius: 6px;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-semibold;
|
||||
|
||||
&--current {
|
||||
background: #E8F3FF;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.version-list__desc {
|
||||
color: var(--color-text-3);
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.version-list__date {
|
||||
color: var(--color-text-3);
|
||||
font-size: $font-size-sm + 1;
|
||||
}
|
||||
|
||||
// 返回按钮
|
||||
.back-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
color: var(--color-primary);
|
||||
font-weight: $font-weight-semibold;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
19
src/styles/components/empty-state/_index.scss
Normal file
19
src/styles/components/empty-state/_index.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
// 空状态组件
|
||||
|
||||
@use '../../tokens' as *;
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 24px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
font-size: 56px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.empty-state-text {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
330
src/styles/components/form/_index.scss
Normal file
330
src/styles/components/form/_index.scss
Normal file
@@ -0,0 +1,330 @@
|
||||
// 表单组件
|
||||
|
||||
@use '../../tokens' as *;
|
||||
|
||||
// Block
|
||||
.form-group {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
// Element: label
|
||||
.form__label,
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: var(--color-text-2);
|
||||
font-size: $font-size-base;
|
||||
|
||||
&.required::after {
|
||||
content: ' *';
|
||||
color: var(--color-danger);
|
||||
}
|
||||
}
|
||||
|
||||
// Element: input
|
||||
.form__input,
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 9px 12px;
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.6;
|
||||
border: 1px solid var(--color-border-3);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-bg-1);
|
||||
color: var(--color-text-1);
|
||||
transition: all var(--transition);
|
||||
|
||||
&:hover {
|
||||
border-color: #94A3B8;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-text-4);
|
||||
}
|
||||
|
||||
&[readonly] {
|
||||
background: var(--color-bg-2);
|
||||
color: var(--color-text-3);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.is-invalid {
|
||||
border-color: var(--color-danger);
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Element: error
|
||||
.form__error,
|
||||
.form-error {
|
||||
font-size: $font-size-sm;
|
||||
color: var(--color-danger);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
// Element: hint
|
||||
.form__hint {
|
||||
font-size: $font-size-sm;
|
||||
color: #6B7280;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
// Element: row/col
|
||||
.form__row,
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form__col,
|
||||
.form-col {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// Tag input
|
||||
.tag-input-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--color-border-3);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-bg-1);
|
||||
min-height: 42px;
|
||||
align-items: center;
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 10px;
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
border-radius: 999px;
|
||||
font-size: $font-size-sm + 1;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
.tag-remove {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.tag-input {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: $font-size-base;
|
||||
background: transparent;
|
||||
color: var(--color-text-1);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-text-4);
|
||||
}
|
||||
}
|
||||
|
||||
// List selector
|
||||
.list-selector {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.list-selector-input {
|
||||
padding: 6px 10px;
|
||||
font-size: $font-size-sm + 1;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.list-selector-tag {
|
||||
padding: 6px 10px;
|
||||
background: var(--color-primary-light);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--color-primary);
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: $font-size-sm + 1;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.list-selector-tag-close {
|
||||
cursor: pointer;
|
||||
color: var(--color-text-3);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
}
|
||||
|
||||
.list-selector-table {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// Skill checkbox list
|
||||
.skill-checkbox-list {
|
||||
border: 1px solid var(--color-border-3);
|
||||
border-radius: var(--radius-md);
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.skill-checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-bg-2);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.skill-checkbox-label {
|
||||
flex: 1;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: $font-size-base;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
// Config form (legacy compatibility)
|
||||
.config-form {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #E5E7EB;
|
||||
padding: 24px;
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 32px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: $font-size-lg;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: #111827;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #E5E7EB;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-medium;
|
||||
color: #374151;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&.required::after {
|
||||
content: ' *';
|
||||
color: #EF4444;
|
||||
}
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
font-size: $font-size-base;
|
||||
border: 1px solid #D1D5DB;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
color: #111827;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #3B82F6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #F3F4F6;
|
||||
color: #6B7280;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.has-error .form-input,
|
||||
.form-group.has-error .form-select {
|
||||
border-color: #EF4444;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
display: block;
|
||||
font-size: $font-size-sm;
|
||||
color: #EF4444;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
display: block;
|
||||
font-size: $font-size-sm;
|
||||
color: #6B7280;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #E5E7EB;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@include mobile {
|
||||
.form__row,
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
92
src/styles/components/modal/_index.scss
Normal file
92
src/styles/components/modal/_index.scss
Normal file
@@ -0,0 +1,92 @@
|
||||
// 弹窗组件
|
||||
|
||||
@use '../../tokens' as *;
|
||||
|
||||
// Overlay
|
||||
.modal__overlay,
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(15, 23, 42, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: $z-index-modal;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
// Block
|
||||
.modal {
|
||||
background: var(--color-bg-1);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 8px 32px rgba(15, 23, 42, 0.16);
|
||||
width: 420px;
|
||||
max-width: 90vw;
|
||||
animation: modal-in 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes modal-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.96);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Element: header
|
||||
.modal__header,
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: $font-size-lg;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
color: var(--color-text-3);
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-bg-2);
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
}
|
||||
|
||||
// Element: body
|
||||
.modal__body,
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
font-size: $font-size-base;
|
||||
color: var(--color-text-2);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
// Element: footer
|
||||
.modal__footer,
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid var(--color-border-2);
|
||||
}
|
||||
48
src/styles/components/nav/_index.scss
Normal file
48
src/styles/components/nav/_index.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
// 导航组件
|
||||
|
||||
@use '../../tokens' as *;
|
||||
|
||||
// 统一导航项 (替代 menu-item, chat-nav-item, admin-nav-item)
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
color: var(--color-text-2);
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-medium;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-bg-2);
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&--active {
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item__icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
|
||||
.nav-item__text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-item__meta {
|
||||
font-size: $font-size-sm;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
47
src/styles/components/pagination/_index.scss
Normal file
47
src/styles/components/pagination/_index.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
// 分页组件
|
||||
|
||||
@use '../../tokens' as *;
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.pagination__item {
|
||||
min-width: 34px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--color-border-3);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
font-size: $font-size-sm + 1;
|
||||
font-weight: $font-weight-medium;
|
||||
color: var(--color-text-2);
|
||||
background: var(--color-bg-1);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
// Legacy compatibility
|
||||
.pagination-item {
|
||||
@extend .pagination__item;
|
||||
|
||||
&.active {
|
||||
@extend .pagination__item--active;
|
||||
}
|
||||
}
|
||||
42
src/styles/components/password-input/_index.scss
Normal file
42
src/styles/components/password-input/_index.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
// 密码输入框组件
|
||||
|
||||
@use '../../tokens' as *;
|
||||
|
||||
.password-input {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.form__input,
|
||||
.form-input {
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.password-toggle {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 6px;
|
||||
cursor: pointer;
|
||||
color: #6B7280;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
color: #374151;
|
||||
}
|
||||
}
|
||||
|
||||
// Legacy compatibility
|
||||
.password-input-wrapper {
|
||||
@extend .password-input;
|
||||
}
|
||||
|
||||
.password-toggle-btn {
|
||||
@extend .password-toggle;
|
||||
}
|
||||
45
src/styles/components/search-bar/_index.scss
Normal file
45
src/styles/components/search-bar/_index.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
// 搜索栏组件
|
||||
|
||||
@use '../../tokens' as *;
|
||||
|
||||
.search-bar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 8px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.search-bar-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.search-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
|
||||
label {
|
||||
color: var(--color-text-2);
|
||||
font-size: $font-size-sm + 1;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
.search-item-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--color-border-2);
|
||||
}
|
||||
115
src/styles/components/skill-card/_index.scss
Normal file
115
src/styles/components/skill-card/_index.scss
Normal file
@@ -0,0 +1,115 @@
|
||||
// 技能卡片组件
|
||||
|
||||
@use '../../tokens' as *;
|
||||
|
||||
.skill-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.skill-card {
|
||||
background: var(--color-bg-1);
|
||||
border: 1px solid var(--color-border-2);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 20px;
|
||||
transition: all var(--transition);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-border-3);
|
||||
box-shadow: var(--shadow-2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.skill-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.skill-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skill-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.skill-name {
|
||||
font-size: $font-size-lg;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.skill-author {
|
||||
font-size: $font-size-sm + 1;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
.skill-desc {
|
||||
color: var(--color-text-2);
|
||||
font-size: $font-size-base;
|
||||
margin-bottom: 14px;
|
||||
line-height: 1.6;
|
||||
height: 42px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.skill-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 14px;
|
||||
max-height: 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skill-tag {
|
||||
padding: 3px 10px;
|
||||
background: var(--color-bg-2);
|
||||
border-radius: 999px;
|
||||
font-size: $font-size-sm;
|
||||
color: var(--color-text-3);
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
.skill-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid var(--color-border-2);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.skill-stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: $font-size-sm + 1;
|
||||
color: var(--color-text-3);
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@include mobile {
|
||||
.skill-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
68
src/styles/components/stat-card/_index.scss
Normal file
68
src/styles/components/stat-card/_index.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
// 统计卡片组件
|
||||
|
||||
@use '../../tokens' as *;
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--color-bg-1);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 22px;
|
||||
border: 1px solid var(--color-border-2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--color-primary) 0%, #8B5CF6 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
font-size: $font-size-base;
|
||||
color: var(--color-text-3);
|
||||
margin-bottom: 8px;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
color: var(--color-text-1);
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.stat-trend {
|
||||
font-size: $font-size-sm + 1;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-weight: $font-weight-semibold;
|
||||
|
||||
&.up {
|
||||
color: var(--color-success);
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@include mobile {
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
48
src/styles/components/switch/_index.scss
Normal file
48
src/styles/components/switch/_index.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
// 开关组件
|
||||
|
||||
@use '../../tokens' as *;
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 44px;
|
||||
height: 22px;
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--color-text-4);
|
||||
transition: 0.3s;
|
||||
border-radius: 22px;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
background-color: white;
|
||||
transition: 0.3s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(22px);
|
||||
}
|
||||
101
src/styles/components/table/_index.scss
Normal file
101
src/styles/components/table/_index.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
// 表格组件
|
||||
|
||||
@use '../../tokens' as *;
|
||||
|
||||
// Block
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: $font-size-base;
|
||||
|
||||
th, td {
|
||||
padding: 14px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--color-bg-2);
|
||||
font-weight: 700;
|
||||
color: var(--color-text-2);
|
||||
font-size: $font-size-sm + 1;
|
||||
letter-spacing: 0.2px;
|
||||
border-bottom: 1px solid var(--color-border-3);
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
transition: background var(--transition);
|
||||
|
||||
&:hover td {
|
||||
background: var(--color-bg-2);
|
||||
}
|
||||
}
|
||||
|
||||
// 可点击行
|
||||
tbody tr.tr-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// 操作列宽度
|
||||
.col-actions {
|
||||
width: 200px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.col-actions--narrow {
|
||||
width: 120px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.col-actions--tiny {
|
||||
width: 80px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
// 文本样式
|
||||
.cell-muted {
|
||||
color: var(--color-text-3);
|
||||
font-size: $font-size-sm + 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 表格无底部间距
|
||||
&.no-margin-bottom {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 操作列按钮容器
|
||||
.table-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Element: wrapper
|
||||
.table__wrapper {
|
||||
overflow-x: auto;
|
||||
margin: -22px;
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
// Legacy compatibility
|
||||
.table-wrapper { @extend .table__wrapper; }
|
||||
|
||||
// Responsive
|
||||
@include mobile {
|
||||
.table__wrapper {
|
||||
margin: -16px;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
65
src/styles/components/tag/_index.scss
Normal file
65
src/styles/components/tag/_index.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
// 标签组件
|
||||
|
||||
@use '../../tokens' as *;
|
||||
|
||||
// Block
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: $font-size-sm + 1;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
// Modifier: status variants
|
||||
.tag--running {
|
||||
background: var(--color-success-light);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.tag--stopped {
|
||||
background: var(--color-bg-3);
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
.tag--starting {
|
||||
background: #DBEAFE;
|
||||
color: #1E40AF;
|
||||
}
|
||||
|
||||
.tag--error {
|
||||
background: var(--color-danger-light);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.tag--warning {
|
||||
background: var(--color-warning-light);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
// Modifier: role variants
|
||||
.tag--admin {
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.tag--member {
|
||||
background: var(--color-bg-3);
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
|
||||
.tag--developer {
|
||||
background: var(--color-warning-light);
|
||||
color: #D97706;
|
||||
}
|
||||
|
||||
// Legacy compatibility
|
||||
.status { @extend .tag; }
|
||||
.status-running { @extend .tag--running; }
|
||||
.status-stopped { @extend .tag--stopped; }
|
||||
.status-starting { @extend .tag--starting; }
|
||||
.status-error { @extend .tag--error; }
|
||||
.status-warning { @extend .tag--warning; }
|
||||
.role-admin { @extend .tag--admin; }
|
||||
.role-member { @extend .tag--member; }
|
||||
.role-developer { @extend .tag--developer; }
|
||||
88
src/styles/components/toast/_index.scss
Normal file
88
src/styles/components/toast/_index.scss
Normal file
@@ -0,0 +1,88 @@
|
||||
// Toast 提示组件
|
||||
|
||||
@use '../../tokens' as *;
|
||||
|
||||
// Block
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
|
||||
z-index: $z-index-toast;
|
||||
animation: toast-in 0.3s ease-out;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
@keyframes toast-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Modifier: variants
|
||||
.toast--success {
|
||||
background: var(--color-success-light);
|
||||
color: var(--color-success);
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.toast--error {
|
||||
background: var(--color-danger-light);
|
||||
color: var(--color-danger);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.toast--warning {
|
||||
background: var(--color-warning-light);
|
||||
color: var(--color-warning);
|
||||
border: 1px solid rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.toast--info {
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
// Element: icon
|
||||
.toast-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
|
||||
// Element: message
|
||||
.toast-message {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// Element: close
|
||||
.toast-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Legacy compatibility
|
||||
.toast-success { @extend .toast--success; }
|
||||
.toast-error { @extend .toast--error; }
|
||||
.toast-warning { @extend .toast--warning; }
|
||||
.toast-info { @extend .toast--info; }
|
||||
12
src/styles/core/_base.scss
Normal file
12
src/styles/core/_base.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
// 全局 body 样式
|
||||
@use '../tokens/typography' as *;
|
||||
|
||||
body {
|
||||
font-family: $font-family;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-normal;
|
||||
color: var(--color-text-1);
|
||||
background-color: var(--color-bg-2);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@@ -1,16 +1,11 @@
|
||||
// 基础重置与全局样式
|
||||
@use 'variables' as *;
|
||||
// CSS 变量定义 - :root
|
||||
@use '../tokens/colors' as *;
|
||||
@use '../tokens/shadows' as *;
|
||||
@use '../tokens/radius' as *;
|
||||
@use '../tokens/transitions' as *;
|
||||
|
||||
// 重置
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// CSS变量定义在:root中
|
||||
:root {
|
||||
/* 品牌主色 - 清新科技蓝 */
|
||||
/* 品牌主色 */
|
||||
--color-primary: #{$primary};
|
||||
--color-primary-light: #{$primary-light};
|
||||
--color-primary-lighter: #{$primary-lighter};
|
||||
@@ -24,7 +19,7 @@
|
||||
--color-danger: #{$danger};
|
||||
--color-danger-light: #{$danger-light};
|
||||
|
||||
/* 中性色 - 现代简约灰阶 */
|
||||
/* 中性色 */
|
||||
--color-text-1: #{$text-1};
|
||||
--color-text-2: #{$text-2};
|
||||
--color-text-3: #{$text-3};
|
||||
@@ -41,15 +36,15 @@
|
||||
--color-bg-3: #{$bg-3};
|
||||
--color-bg-4: #{$bg-4};
|
||||
|
||||
/* 阴影 - 柔和现代 */
|
||||
/* 阴影 */
|
||||
--shadow-1: #{$shadow-1};
|
||||
--shadow-2: #{$shadow-2};
|
||||
--shadow-3: #{$shadow-3};
|
||||
--shadow-card: #{$shadow-card};
|
||||
|
||||
/* 布局尺寸 */
|
||||
--sidebar-width: #{$sidebar-width};
|
||||
--header-height: #{$header-height};
|
||||
--sidebar-width: 240px;
|
||||
--header-height: 60px;
|
||||
--radius-sm: #{$radius-sm};
|
||||
--radius-md: #{$radius-md};
|
||||
--radius-lg: #{$radius-lg};
|
||||
@@ -58,14 +53,3 @@
|
||||
/* 过渡动画 */
|
||||
--transition: #{$transition};
|
||||
}
|
||||
|
||||
// 全局body样式
|
||||
body {
|
||||
font-family: $font-family;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: var(--color-text-1);
|
||||
background-color: var(--color-bg-2);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
5
src/styles/core/_index.scss
Normal file
5
src/styles/core/_index.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
// Core 入口
|
||||
|
||||
@forward 'reset';
|
||||
@forward 'css-variables';
|
||||
@forward 'base';
|
||||
6
src/styles/core/_reset.scss
Normal file
6
src/styles/core/_reset.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
// CSS 重置
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
179
src/styles/layouts/_admin-layout.scss
Normal file
179
src/styles/layouts/_admin-layout.scss
Normal file
@@ -0,0 +1,179 @@
|
||||
// 管理台布局
|
||||
|
||||
@use '../tokens' as *;
|
||||
|
||||
.admin-layout {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 管理台侧边栏
|
||||
.admin-layout__sidebar,
|
||||
.admin-sidebar {
|
||||
width: 240px;
|
||||
background: var(--color-bg-1);
|
||||
border-right: 1px solid var(--color-border-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.admin-sidebar-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
}
|
||||
|
||||
.admin-sidebar-nav {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
// 管理台导航项 - 统一使用 nav-item
|
||||
.admin-nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
color: var(--color-text-2);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-bg-2);
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.admin-nav-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.admin-nav-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// 管理台用户区域
|
||||
.admin-sidebar-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-top: 1px solid var(--color-border-2);
|
||||
background: var(--color-bg-2);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-bg-3);
|
||||
}
|
||||
}
|
||||
|
||||
.admin-sidebar-user-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-sidebar-user-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-1);
|
||||
margin-bottom: 2px;
|
||||
@include text-truncate;
|
||||
}
|
||||
|
||||
.admin-sidebar-user-role {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
@include text-truncate;
|
||||
}
|
||||
|
||||
// 管理台内容区
|
||||
.admin-layout__content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 成员选择样式
|
||||
.member-selection {
|
||||
border: 1px solid var(--color-border-3);
|
||||
border-radius: var(--radius-md);
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.member-checkbox-item,
|
||||
.member-radio-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-bg-2);
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.member-checkbox-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, #8B5CF6 100%);
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.member-checkbox-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.member-checkbox-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.member-checkbox-dept {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
300
src/styles/layouts/_app-shell.scss
Normal file
300
src/styles/layouts/_app-shell.scss
Normal file
@@ -0,0 +1,300 @@
|
||||
// AppShell 布局 - sidebar + header + main
|
||||
|
||||
@use '../tokens' as *;
|
||||
|
||||
// 主布局
|
||||
.app-shell,
|
||||
.layout {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 侧边栏
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
background: var(--color-bg-1);
|
||||
border-right: 1px solid var(--color-border-2);
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: $z-index-sidebar;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// 侧边栏头部
|
||||
.sidebar-header {
|
||||
height: var(--header-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 品牌区
|
||||
.sidebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sidebar-logo-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, #8B5CF6 100%);
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 4px 4px 2px 2px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 10px;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 2px 2px 4px 4px;
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background: rgba(59, 130, 246, 0.9);
|
||||
border-radius: 50%;
|
||||
top: 9px;
|
||||
z-index: 1;
|
||||
|
||||
&:nth-child(1) { left: 9px; }
|
||||
&:nth-child(2) { right: 9px; }
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-brand-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-1);
|
||||
letter-spacing: -0.3px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
// 导航区
|
||||
.sidebar__nav,
|
||||
.sidebar-menu {
|
||||
padding: 16px 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar-divider {
|
||||
height: 1px;
|
||||
background: var(--color-border-2);
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.sidebar-subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-3);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
// 导航项 - 统一使用 .nav-item
|
||||
.nav-item,
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 11px 14px;
|
||||
margin: 2px 0;
|
||||
color: var(--color-text-2);
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-md);
|
||||
transition: all var(--transition);
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text-1);
|
||||
background: var(--color-bg-2);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&--active {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-primary-light);
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
background: var(--color-primary);
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item__icon,
|
||||
.menu-item-icon {
|
||||
margin-right: 12px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
// 主内容区
|
||||
.app-shell__main,
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 顶部栏
|
||||
.app-shell__header,
|
||||
.header {
|
||||
height: var(--header-height);
|
||||
background: var(--color-bg-1);
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: $z-index-header;
|
||||
}
|
||||
|
||||
.header__left,
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
// 用户头像
|
||||
.user-avatar {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, #8B5CF6 100%);
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 页面内容
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.page-content--full,
|
||||
.page-content-full {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// 移动端菜单按钮
|
||||
.mobile-menu-btn {
|
||||
display: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-md);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-bg-2);
|
||||
}
|
||||
}
|
||||
|
||||
// 侧边栏遮罩
|
||||
.sidebar__overlay,
|
||||
.sidebar-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(15, 23, 42, 0.45);
|
||||
z-index: $z-index-overlay;
|
||||
backdrop-filter: blur(2px);
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式 - 移动端
|
||||
@include mobile {
|
||||
:root {
|
||||
--header-height: 56px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
transform: translateX(-100%);
|
||||
transition: transform var(--transition);
|
||||
z-index: $z-index-sidebar-mobile;
|
||||
|
||||
&.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
277
src/styles/layouts/_chat-layout.scss
Normal file
277
src/styles/layouts/_chat-layout.scss
Normal file
@@ -0,0 +1,277 @@
|
||||
// 聊天页面布局
|
||||
|
||||
@use '../tokens' as *;
|
||||
|
||||
.chat-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
background: var(--color-bg-1);
|
||||
}
|
||||
|
||||
// 聊天顶部栏
|
||||
.chat-layout__header,
|
||||
.chat-header {
|
||||
height: var(--header-height);
|
||||
background: var(--color-bg-1);
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.chat-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.chat-logo {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, #8B5CF6 100%);
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.9);
|
||||
border-radius: 4px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
// 聊天主区域
|
||||
.chat-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 会话列表侧边栏
|
||||
.chat-layout__sidebar,
|
||||
.chat-sidebar {
|
||||
width: 260px;
|
||||
background: var(--color-bg-2);
|
||||
border-right: 1px solid var(--color-border-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-sidebar-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
}
|
||||
|
||||
.chat-sidebar-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
// 聊天侧边栏底部导航
|
||||
.chat-sidebar-nav {
|
||||
border-top: 1px solid var(--color-border-2);
|
||||
padding: 8px 12px;
|
||||
background: var(--color-bg-1);
|
||||
}
|
||||
|
||||
// 聊天导航项 - 统一使用 nav-item
|
||||
.chat-nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
color: var(--color-text-2);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-bg-2);
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-nav-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.chat-nav-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// 会话列表
|
||||
.conversation-list {
|
||||
// Container for conversation items
|
||||
}
|
||||
|
||||
.conversation-item {
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
margin-bottom: 4px;
|
||||
transition: all var(--transition);
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-bg-1);
|
||||
border-color: var(--color-border-2);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--color-bg-1);
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.conversation-time {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
// 侧边栏用户状态区域
|
||||
.chat-sidebar-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-top: 1px solid var(--color-border-2);
|
||||
background: var(--color-bg-1);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-bg-2);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-sidebar-user-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.chat-sidebar-user-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-1);
|
||||
margin-bottom: 2px;
|
||||
@include text-truncate;
|
||||
}
|
||||
|
||||
.chat-sidebar-user-role {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
@include text-truncate;
|
||||
}
|
||||
|
||||
// 侧边栏项目切换区域
|
||||
.chat-sidebar-project {
|
||||
padding: 16px;
|
||||
border-top: 1px solid var(--color-border-2);
|
||||
background: var(--color-bg-1);
|
||||
}
|
||||
|
||||
.chat-sidebar-project-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-3);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.chat-sidebar-project-select {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
// 聊天内容区
|
||||
.chat-layout__content,
|
||||
.chat-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--color-bg-1);
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-content__messages,
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
// 响应式
|
||||
@include mobile {
|
||||
.chat-sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
z-index: $z-index-sidebar;
|
||||
transform: translateX(-100%);
|
||||
transition: transform var(--transition);
|
||||
|
||||
&.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
5
src/styles/layouts/_index.scss
Normal file
5
src/styles/layouts/_index.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
// Layouts 入口
|
||||
|
||||
@forward 'app-shell';
|
||||
@forward 'chat-layout';
|
||||
@forward 'admin-layout';
|
||||
@@ -1,203 +1,64 @@
|
||||
/* ============ 管理台页面样式 ============ */
|
||||
/* 本文件包含管理台（Admin）相关的所有页面样式 */
|
||||
// Admin 页面样式 - 仅保留管理台特有组件
|
||||
|
||||
/* 管理台侧边栏 */
|
||||
.admin-sidebar {
|
||||
width: 240px;
|
||||
background: var(--color-bg-1);
|
||||
border-right: 1px solid var(--color-border-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
}
|
||||
@use '../tokens' as *;
|
||||
|
||||
.admin-sidebar-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
}
|
||||
|
||||
.admin-sidebar-nav {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.admin-nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
color: var(--color-text-2);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.admin-nav-item:hover {
|
||||
background: var(--color-bg-2);
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.admin-nav-item.active {
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.admin-nav-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.admin-nav-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.admin-sidebar-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-top: 1px solid var(--color-border-2);
|
||||
background: var(--color-bg-2);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.admin-sidebar-user:hover {
|
||||
background: var(--color-bg-3);
|
||||
}
|
||||
|
||||
.admin-sidebar-user-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-sidebar-user-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-1);
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.admin-sidebar-user-role {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 成员选择样式 */
|
||||
.member-selection {
|
||||
border: 1px solid var(--color-border-3);
|
||||
border-radius: var(--radius-md);
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.member-checkbox-item,
|
||||
.member-radio-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
}
|
||||
|
||||
.member-checkbox-item:last-child,
|
||||
.member-radio-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.member-checkbox-item:hover,
|
||||
.member-radio-item:hover {
|
||||
background: var(--color-bg-2);
|
||||
}
|
||||
|
||||
.member-checkbox-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, #8B5CF6 100%);
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 总览页底部两栏布局 */
|
||||
// 总览页底部两栏布局
|
||||
.overview-bottom-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.overview-anomalies {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.overview-recent-logs {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 异常/待办事项列表 */
|
||||
// 异常/待办事项列表
|
||||
.anomaly-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
.anomaly-item:last-child {
|
||||
margin-bottom: 0;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.anomaly-warning {
|
||||
background: var(--color-warning-light);
|
||||
color: #92400E;
|
||||
}
|
||||
background: var(--color-warning-light);
|
||||
color: #92400E;
|
||||
|
||||
.anomaly-warning .anomaly-icon {
|
||||
color: var(--color-warning);
|
||||
.anomaly-icon {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
}
|
||||
|
||||
.anomaly-info {
|
||||
background: var(--color-primary-light);
|
||||
color: #1E40AF;
|
||||
}
|
||||
background: var(--color-primary-light);
|
||||
color: #1E40AF;
|
||||
|
||||
.anomaly-info .anomaly-icon {
|
||||
color: var(--color-primary);
|
||||
.anomaly-icon {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.anomaly-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.anomaly-text {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -1,73 +1,878 @@
|
||||
/* ============ 工作台页面样式 ============ */
|
||||
/* 本文件包含工作台（Console）相关的所有页面样式 */
|
||||
// Console 页面样式 - 仅保留工作台特有组件
|
||||
|
||||
/* 聊天布局 */
|
||||
.chat-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: var(--color-bg-1);
|
||||
@use '../tokens' as *;
|
||||
|
||||
// 聊天内容区特有样式
|
||||
.chat-content__messages {
|
||||
// Handled in layouts
|
||||
}
|
||||
|
||||
/* 聊天顶部栏 */
|
||||
.chat-header {
|
||||
height: var(--header-height);
|
||||
background: var(--color-bg-1);
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
// 欢迎消息
|
||||
.welcome-section {
|
||||
max-width: 820px;
|
||||
margin: 40px auto 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 聊天侧边栏 */
|
||||
.chat-sidebar {
|
||||
width: 260px;
|
||||
background: var(--color-bg-2);
|
||||
border-right: 1px solid var(--color-border-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.welcome-title {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 10px;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
/* 聊天内容区 */
|
||||
.chat-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--color-bg-1);
|
||||
.welcome-desc {
|
||||
color: var(--color-text-3);
|
||||
font-size: 16px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/* 聊天消息区 */
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
min-height: 0;
|
||||
.welcome-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 14px;
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 会话项 */
|
||||
.conversation-item {
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
margin-bottom: 4px;
|
||||
transition: all var(--transition);
|
||||
border: 1px solid transparent;
|
||||
.welcome-action {
|
||||
padding: 18px 20px;
|
||||
background: var(--color-bg-2);
|
||||
border: 1px solid var(--color-border-2);
|
||||
border-radius: var(--radius-lg);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-primary-light);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-item:hover {
|
||||
background: var(--color-bg-1);
|
||||
border-color: var(--color-border-2);
|
||||
.welcome-action-title {
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
font-size: 15px;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.conversation-item.active {
|
||||
background: var(--color-bg-1);
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
|
||||
.welcome-action-desc {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
/* 更多工作台样式请参考 global.scss 中的对应部分 */
|
||||
/* 包括：chat-input-wrapper, message-thinking, instance-stopped 等 */
|
||||
// 消息气泡
|
||||
.message {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
margin-bottom: 28px;
|
||||
max-width: 900px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
&.user {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
|
||||
&.assistant, &.user {
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, #8B5CF6 100%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 72%;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
padding: 14px 18px;
|
||||
border-radius: 14px;
|
||||
line-height: 1.7;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.message.assistant .message-bubble {
|
||||
background: var(--color-bg-2);
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.message.user .message-bubble {
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, #60A5FA 100%);
|
||||
color: #FFFFFF;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-4);
|
||||
margin-top: 8px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
// AI 思考过程
|
||||
.message-thinking {
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid var(--color-border-3);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #FFFBEB;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.message-thinking-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
font-size: 13px;
|
||||
color: #92400E;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.message-thinking-icon {
|
||||
transition: transform 0.2s ease;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.message-thinking.expanded .message-thinking-icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.message-thinking-content {
|
||||
padding: 12px 14px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #78350F;
|
||||
display: none;
|
||||
|
||||
.message-thinking.expanded & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 8px 0 0 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// 输入区
|
||||
.chat-input-wrapper {
|
||||
padding: 16px 24px 24px;
|
||||
border-top: none;
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(248, 250, 252, 0.95) 15%, #F8FAFC 100%);
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--color-border-3), transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-input-container {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.chat-input-box {
|
||||
border: 1px solid var(--color-border-3);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background: var(--color-bg-1);
|
||||
transition: all var(--transition);
|
||||
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
|
||||
|
||||
&:hover {
|
||||
border-color: #CBD5E1;
|
||||
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 6px 20px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-input-main {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
padding: 10px 12px 10px 14px;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
flex: 1;
|
||||
padding: 6px 2px;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
resize: none;
|
||||
min-height: 24px;
|
||||
max-height: 200px;
|
||||
line-height: 1.6;
|
||||
background: transparent;
|
||||
color: var(--color-text-1);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-text-4);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-input-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-input-tools {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
padding-right: 6px;
|
||||
border-right: 1px solid var(--color-border-2);
|
||||
}
|
||||
|
||||
.chat-input-tool {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-3);
|
||||
transition: all var(--transition);
|
||||
font-size: 16px;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-bg-2);
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-send-btn {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, #60A5FA 100%);
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
transition: all var(--transition);
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 3px 10px rgba(59, 130, 246, 0.25);
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.06);
|
||||
box-shadow: 0 5px 14px rgba(59, 130, 246, 0.35);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-input-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 16px 10px;
|
||||
background: transparent;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.chat-input-hint {
|
||||
font-size: 11px;
|
||||
color: var(--color-text-4);
|
||||
}
|
||||
|
||||
// 实例状态
|
||||
.instance-stopped {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.instance-stopped-icon {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 24px;
|
||||
background: var(--color-bg-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40px;
|
||||
color: var(--color-text-3);
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.instance-stopped-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.instance-stopped-desc {
|
||||
color: var(--color-text-3);
|
||||
margin-bottom: 28px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
// 对话状态
|
||||
.conversation-stopped-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 60px 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stopped-state-icon-wrapper {
|
||||
position: relative;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.stopped-state-icon {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(135deg, var(--color-bg-2) 0%, var(--color-bg-3) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36px;
|
||||
color: var(--color-text-3);
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||
border: 2px solid var(--color-border-2);
|
||||
}
|
||||
|
||||
.stopped-state-badge {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--color-text-3);
|
||||
color: #FFFFFF;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stopped-state-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.stopped-state-desc {
|
||||
color: var(--color-text-3);
|
||||
margin-bottom: 28px;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.stopped-state-info {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
margin-bottom: 32px;
|
||||
padding: 20px 28px;
|
||||
background: var(--color-bg-2);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--color-border-2);
|
||||
}
|
||||
|
||||
.stopped-state-info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.stopped-state-info-label {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stopped-state-info-value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.stopped-state-btn {
|
||||
padding: 12px 32px;
|
||||
font-size: 15px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
// 启动中状态
|
||||
.conversation-starting-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 60px 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.starting-state-icon-wrapper {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.starting-state-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.starting-state-desc {
|
||||
color: var(--color-text-3);
|
||||
margin-bottom: 32px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.starting-state-progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.starting-state-progress-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: var(--color-bg-2);
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--color-border-2);
|
||||
|
||||
&.active {
|
||||
background: var(--color-primary-light);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.starting-state-progress-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: var(--color-success);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
|
||||
.starting-state-progress-item.active & {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.starting-state-progress-text {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-2);
|
||||
|
||||
.starting-state-progress-item.active & {
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.starting-state-spinner {
|
||||
display: inline-block;
|
||||
border: 2px solid var(--color-primary);
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
.instance-starting {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: 3px solid var(--color-border-3);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// 实例操作
|
||||
.instance-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
// Console 特有的 skill/detail 样式（从 global.scss 迁移）
|
||||
.skill-back-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
color: #3B82F6;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.skill-detail-header {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.skill-detail-icon {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skill-detail-main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.skill-detail-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.skill-detail-tag {
|
||||
padding: 4px 12px;
|
||||
background: #F1F5F9;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.skill-detail-stats {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
color: #64748B;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.skill-detail-section {
|
||||
margin-top: 24px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #E2E8F0;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
background: #F8FAFC;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #E8F3FF;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #3B82F6;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 12px;
|
||||
color: #94A3B8;
|
||||
}
|
||||
|
||||
.version-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.version-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
padding: 3px 10px;
|
||||
background: #F1F5F9;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
|
||||
&.current {
|
||||
background: #E8F3FF;
|
||||
color: #3B82F6;
|
||||
}
|
||||
}
|
||||
|
||||
.version-desc {
|
||||
color: #64748B;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.version-date {
|
||||
color: #94A3B8;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
// 消息内容内嵌表格
|
||||
.msg-table {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
|
||||
th, td {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--color-border-3);
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
background: var(--color-bg-3);
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead tr {
|
||||
background: var(--color-bg-3);
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background: var(--color-bg-2);
|
||||
}
|
||||
|
||||
tfoot tr {
|
||||
background: var(--color-bg-3);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// 文本对齐修饰
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// 数字强调
|
||||
.value-success {
|
||||
color: var(--color-success);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.value-danger {
|
||||
color: var(--color-danger);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.value-primary {
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.value-warning {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
}
|
||||
|
||||
// 消息内嵌信息块
|
||||
.msg-info-block {
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
background: var(--color-bg-2);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.msg-meta {
|
||||
margin-top: 12px;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
// 消息内嵌代码块
|
||||
.msg-code {
|
||||
margin-top: 12px;
|
||||
padding: 16px;
|
||||
background: #1E293B;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
|
||||
code {
|
||||
color: #E2E8F0;
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
// 错误消息样式
|
||||
.msg-error {
|
||||
border-left: 3px solid var(--color-danger);
|
||||
background: var(--color-danger-light);
|
||||
}
|
||||
|
||||
.msg-error-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--color-danger);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// 消息内嵌文件卡片
|
||||
.msg-file-card {
|
||||
margin-top: 12px;
|
||||
padding: 10px 14px;
|
||||
background: var(--color-bg-2);
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
|
||||
.msg-file-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.msg-file-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.msg-file-size {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
// 进度条
|
||||
.msg-progress {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.msg-progress-bar {
|
||||
height: 6px;
|
||||
background: var(--color-border-3);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.msg-progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--color-primary), #8B5CF6);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@include mobile {
|
||||
.welcome-actions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 82%;
|
||||
}
|
||||
|
||||
.chat-input-wrapper {
|
||||
padding: 12px 16px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,368 +1,322 @@
|
||||
/* ============ 开发台页面样式 ============ */
|
||||
/* 本文件包含开发台（Developer）相关的所有页面样式 */
|
||||
/* 开发台复用了大量工作台的样式（如 .chat-sidebar 等） */
|
||||
// Developer 页面样式 - 仅保留开发台特有组件
|
||||
|
||||
/* 开发台特有样式 */
|
||||
@use '../tokens' as *;
|
||||
|
||||
// 开发台返回按钮
|
||||
.dev-back-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
// 开发台详情
|
||||
.dev-detail-header {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.dev-detail-icon {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dev-detail-main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dev-detail-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.dev-detail-tag {
|
||||
padding: 4px 12px;
|
||||
background: #F1F5F9;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.dev-detail-stats {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
color: #64748B;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dev-detail-section {
|
||||
margin-top: 24px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #E2E8F0;
|
||||
}
|
||||
|
||||
.dev-detail-section h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.dev-info-row {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.dev-info-label {
|
||||
width: 100px;
|
||||
flex-shrink: 0;
|
||||
color: #64748B;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dev-info-value {
|
||||
flex: 1;
|
||||
color: #1E293B;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 开发台返回按钮样式 */
|
||||
.dev-back-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
color: #3B82F6;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 技能图标选择器 */
|
||||
.dev-icon-picker {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 8px;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.dev-icon-option {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
border: 2px solid #E2E8F0;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
background: #fff;
|
||||
|
||||
&:hover {
|
||||
border-color: #3B82F6;
|
||||
background: #EFF6FF;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-color: #3B82F6;
|
||||
background: #EFF6FF;
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 版本拒绝原因 */
|
||||
.dev-rejection-reason {
|
||||
font-size: 12px;
|
||||
color: #EF4444;
|
||||
margin-top: 4px;
|
||||
padding: 4px 8px;
|
||||
background: #FEF2F2;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ============ 技能编辑页面优化样式 ============ */
|
||||
|
||||
/* 技能概览卡片（三段式布局第一段） */
|
||||
.skill-overview-card {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 16px;
|
||||
align-items: flex-start;
|
||||
|
||||
.skill-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 48px;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.skill-header {
|
||||
.dev-detail-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: block !important; /* 覆盖全局样式，确保子元素垂直排列 */
|
||||
}
|
||||
|
||||
/* 第一行：技能名称 + 状态 + 作者 + 操作按钮 */
|
||||
.skill-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 12px;
|
||||
margin-bottom: 16px;
|
||||
.dev-detail-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.skill-name {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
.dev-detail-tag {
|
||||
padding: 4px 12px;
|
||||
background: var(--color-bg-3);
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
.dev-detail-stats {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
color: var(--color-text-3);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dev-detail-section {
|
||||
margin-top: 24px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--color-border-3);
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1E293B;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.skill-actions {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dev-info-row {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.dev-info-label {
|
||||
width: 100px;
|
||||
flex-shrink: 0;
|
||||
color: var(--color-text-3);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dev-info-value {
|
||||
flex: 1;
|
||||
color: var(--color-text-1);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// 技能图标选择器
|
||||
.dev-icon-picker {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 8px;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.dev-icon-option {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
border: 2px solid var(--color-border-3);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
background: #fff;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-primary-light);
|
||||
}
|
||||
|
||||
/* 第二行：指标行（带分隔线） */
|
||||
.skill-metrics-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid #E2E8F0;
|
||||
margin-bottom: 16px;
|
||||
&.selected {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-primary-light);
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
// 版本拒绝原因
|
||||
.dev-rejection-reason {
|
||||
padding: 12px 14px;
|
||||
background: #FEF2F2;
|
||||
border: 1px solid #FECACA;
|
||||
border-radius: 8px;
|
||||
color: #991B1B;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
// 技能概览卡片
|
||||
.skill-overview-card {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--color-border-3);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.skill-header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.skill-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.metric-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.7;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #1E293B;
|
||||
}
|
||||
}
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* 第三行：标签区 */
|
||||
.skill-tags-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.skill-category-tag {
|
||||
padding: 4px 12px;
|
||||
background: #EFF6FF;
|
||||
color: #3B82F6;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/* 第四行：技能描述 */
|
||||
.skill-desc-row {
|
||||
.skill-desc-text {
|
||||
font-size: 14px;
|
||||
color: #475569;
|
||||
line-height: 1.6;
|
||||
.skill-name {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: var(--color-text-1);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skill-actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.skill-desc-row {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.skill-desc-text {
|
||||
margin: 0;
|
||||
color: var(--color-text-3);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 管理操作卡片（三段式布局第三段） */
|
||||
// 技能分类标签
|
||||
.skill-category-tag {
|
||||
padding: 4px 10px;
|
||||
background: #EFF6FF;
|
||||
color: #1E40AF;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// 版本历史卡片
|
||||
.version-history-card {
|
||||
background: var(--color-bg-2);
|
||||
border: 1px solid var(--color-border-3);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: #FFFFFF;
|
||||
border-color: #CBD5E1;
|
||||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
.version-card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> div:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.version-number {
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: var(--color-text-1);
|
||||
background: #FFFFFF;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--color-border-3);
|
||||
}
|
||||
|
||||
.version-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.version-public-preview {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: flex-start;
|
||||
padding: 14px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--color-border-3);
|
||||
}
|
||||
|
||||
.version-public-preview-icon {
|
||||
font-size: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.version-public-preview-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.version-public-preview-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.version-public-preview-name {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-1);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.version-public-preview-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.version-public-preview-desc {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-3);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// 管理卡片
|
||||
.manage-card {
|
||||
.card-body {
|
||||
.manage-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
background: var(--color-bg-2);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.skill-overview-card {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
|
||||
.skill-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.skill-header {
|
||||
width: 100%;
|
||||
|
||||
.skill-name-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
|
||||
.skill-name {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.skill-actions {
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.skill-actions .btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.skill-metrics-row {
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.skill-tags-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.manage-card {
|
||||
.manage-actions {
|
||||
flex-direction: column;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.manage-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.skill-overview-card {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
|
||||
.skill-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 36px;
|
||||
// Responsive
|
||||
@include mobile {
|
||||
.skill-overview-card {
|
||||
padding: 16px;
|
||||
|
||||
.skill-name-row {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.skill-name {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.skill-actions {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skill-header {
|
||||
width: 100%;
|
||||
|
||||
.skill-name-row {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.skill-name {
|
||||
font-size: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.skill-actions {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.skill-metrics-row {
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.skill-tags-row {
|
||||
.manage-card .manage-actions {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.manage-card {
|
||||
.manage-actions {
|
||||
flex-direction: column;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,222 +1,345 @@
|
||||
/* ============ 首页样式 ============ */
|
||||
/* 本文件包含首页（Home）相关的所有页面样式 */
|
||||
// Home 页面样式 - 首页特有组件
|
||||
|
||||
@use '../tokens' as *;
|
||||
|
||||
.home-layout {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.home-layout::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -30%;
|
||||
right: -20%;
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -30%;
|
||||
right: -20%;
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.home-layout::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -20%;
|
||||
left: -10%;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -20%;
|
||||
left: -10%;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.home-header {
|
||||
padding: 0 48px;
|
||||
height: 68px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
padding: 0 48px;
|
||||
height: 68px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.home-logo {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--color-text-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
letter-spacing: -0.3px;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--color-text-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
letter-spacing: -0.3px;
|
||||
|
||||
.sidebar-logo-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 4px 4px 2px 2px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 10px;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 2px 2px 4px 4px;
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background: rgba(59, 130, 246, 0.9);
|
||||
border-radius: 50%;
|
||||
top: 9px;
|
||||
z-index: 1;
|
||||
|
||||
&:nth-child(1) { left: 9px; }
|
||||
&:nth-child(2) { right: 9px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-nav {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
|
||||
.home-nav a {
|
||||
color: var(--color-text-2);
|
||||
text-decoration: none;
|
||||
padding: 9px 16px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
a {
|
||||
color: var(--color-text-2);
|
||||
text-decoration: none;
|
||||
padding: 9px 16px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.home-nav a:hover {
|
||||
color: var(--color-text-1);
|
||||
background: var(--color-bg-2);
|
||||
&:hover {
|
||||
color: var(--color-text-1);
|
||||
background: var(--color-bg-2);
|
||||
}
|
||||
|
||||
svg, .home-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.home-nav-login {
|
||||
color: #3B82F6;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
color: #2563EB;
|
||||
background: #EFF6FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 24px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 24px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.home-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 14px;
|
||||
background: var(--color-primary-light);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
border-radius: 999px;
|
||||
color: var(--color-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 14px;
|
||||
background: var(--color-primary-light);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
border-radius: 999px;
|
||||
color: var(--color-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.home-badge-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--color-success);
|
||||
border-radius: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--color-success);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.home-title {
|
||||
font-size: 56px;
|
||||
font-weight: 800;
|
||||
color: var(--color-text-1);
|
||||
margin-bottom: 14px;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -1.2px;
|
||||
}
|
||||
font-size: 56px;
|
||||
font-weight: 800;
|
||||
color: var(--color-text-1);
|
||||
margin-bottom: 14px;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -1.2px;
|
||||
|
||||
.home-title span {
|
||||
background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
span {
|
||||
background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
}
|
||||
|
||||
.home-desc {
|
||||
font-size: 18px;
|
||||
color: var(--color-text-3);
|
||||
margin-bottom: 44px;
|
||||
max-width: 640px;
|
||||
line-height: 1.7;
|
||||
font-size: 18px;
|
||||
color: var(--color-text-3);
|
||||
margin-bottom: 44px;
|
||||
max-width: 640px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.home-buttons {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.home-btn {
|
||||
padding: 13px 30px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
padding: 13px 30px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
.home-btn.primary {
|
||||
background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.home-btn.primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 32px rgba(59, 130, 246, 0.35);
|
||||
&.primary {
|
||||
background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 32px rgba(59, 130, 246, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: #FFFFFF;
|
||||
color: var(--color-text-1);
|
||||
border: 1px solid var(--color-border-3);
|
||||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-bg-2);
|
||||
border-color: #94A3B8;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
max-width: 860px;
|
||||
margin-top: 64px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
max-width: 860px;
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
.home-feature {
|
||||
padding: 24px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--color-border-2);
|
||||
border-radius: 14px;
|
||||
text-align: left;
|
||||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
padding: 24px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--color-border-2);
|
||||
border-radius: 14px;
|
||||
text-align: left;
|
||||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
.home-feature:hover {
|
||||
border-color: var(--color-border-3);
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
|
||||
transform: translateY(-2px);
|
||||
&:hover {
|
||||
border-color: var(--color-border-3);
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.home-feature-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.home-feature-title {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: var(--color-text-1);
|
||||
margin-bottom: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: var(--color-text-1);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.home-feature-desc {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-3);
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-3);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.home-footer {
|
||||
padding: 28px;
|
||||
text-align: center;
|
||||
color: var(--color-text-4);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 28px;
|
||||
text-align: center;
|
||||
color: var(--color-text-4);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@include mobile {
|
||||
.home-header {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.home-title {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.home-desc {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.home-buttons {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.home-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.home-features {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.home-nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
6
src/styles/pages/_index.scss
Normal file
6
src/styles/pages/_index.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
// Pages 入口
|
||||
|
||||
@forward 'console';
|
||||
@forward 'admin';
|
||||
@forward 'developer';
|
||||
@forward 'home';
|
||||
5
src/styles/tokens/_breakpoints.scss
Normal file
5
src/styles/tokens/_breakpoints.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
// 响应式断点令牌
|
||||
|
||||
$breakpoint-mobile: 768px;
|
||||
$breakpoint-tablet: 1024px;
|
||||
$breakpoint-desktop: 1025px;
|
||||
28
src/styles/tokens/_colors.scss
Normal file
28
src/styles/tokens/_colors.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
// 颜色令牌 - 品牌色、功能色、中性色
|
||||
|
||||
// SCSS 变量
|
||||
$primary: #3B82F6;
|
||||
$primary-light: #EFF6FF;
|
||||
$primary-lighter: #F8FAFC;
|
||||
$primary-dark: #2563EB;
|
||||
|
||||
$success: #10B981;
|
||||
$success-light: #ECFDF5;
|
||||
$warning: #F59E0B;
|
||||
$warning-light: #FFFBEB;
|
||||
$danger: #EF4444;
|
||||
$danger-light: #FEF2F2;
|
||||
|
||||
$text-1: #1E293B;
|
||||
$text-2: #475569;
|
||||
$text-3: #94A3B8;
|
||||
$text-4: #CBD5E1;
|
||||
|
||||
$border-1: #F8FAFC;
|
||||
$border-2: #F1F5F9;
|
||||
$border-3: #E2E8F0;
|
||||
|
||||
$bg-1: #FFFFFF;
|
||||
$bg-2: #F8FAFC;
|
||||
$bg-3: #F1F5F9;
|
||||
$bg-4: #E2E8F0;
|
||||
11
src/styles/tokens/_index.scss
Normal file
11
src/styles/tokens/_index.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
// Tokens 入口 - 导出所有设计令牌
|
||||
|
||||
@forward 'colors';
|
||||
@forward 'spacing';
|
||||
@forward 'shadows';
|
||||
@forward 'radius';
|
||||
@forward 'typography';
|
||||
@forward 'z-index';
|
||||
@forward 'transitions';
|
||||
@forward 'breakpoints';
|
||||
@forward 'mixins';
|
||||
@@ -1,21 +1,24 @@
|
||||
// SCSS Mixins - 可复用代码片段
|
||||
@use 'variables' as *;
|
||||
// Mixins - 可复用代码片段
|
||||
|
||||
@use 'breakpoints' as *;
|
||||
@use 'shadows' as *;
|
||||
@use 'radius' as *;
|
||||
|
||||
// 媒体查询断点
|
||||
@mixin mobile {
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: #{$breakpoint-mobile}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet {
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
@media (min-width: #{$breakpoint-mobile + 1}) and (max-width: #{$breakpoint-tablet}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop {
|
||||
@media (min-width: 1025px) {
|
||||
@media (min-width: #{$breakpoint-desktop}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -67,4 +70,4 @@
|
||||
} @else if $size == xl {
|
||||
border-radius: $radius-xl;
|
||||
}
|
||||
}
|
||||
}
|
||||
6
src/styles/tokens/_radius.scss
Normal file
6
src/styles/tokens/_radius.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
// 圆角令牌
|
||||
|
||||
$radius-sm: 6px;
|
||||
$radius-md: 8px;
|
||||
$radius-lg: 12px;
|
||||
$radius-xl: 16px;
|
||||
6
src/styles/tokens/_shadows.scss
Normal file
6
src/styles/tokens/_shadows.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
// 阴影令牌
|
||||
|
||||
$shadow-1: 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
$shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06);
|
||||
$shadow-3: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||
$shadow-card: 0 2px 8px rgba(15, 23, 42, 0.04);
|
||||
11
src/styles/tokens/_spacing.scss
Normal file
11
src/styles/tokens/_spacing.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
// 间距令牌 - 4px 基数
|
||||
|
||||
$spacing-1: 4px;
|
||||
$spacing-2: 8px;
|
||||
$spacing-3: 12px;
|
||||
$spacing-4: 16px;
|
||||
$spacing-5: 20px;
|
||||
$spacing-6: 24px;
|
||||
$spacing-8: 32px;
|
||||
$spacing-10: 40px;
|
||||
$spacing-12: 48px;
|
||||
5
src/styles/tokens/_transitions.scss
Normal file
5
src/styles/tokens/_transitions.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
// 过渡动画令牌
|
||||
|
||||
$transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
$transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
$transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
23
src/styles/tokens/_typography.scss
Normal file
23
src/styles/tokens/_typography.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
// 字体令牌
|
||||
|
||||
$font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
|
||||
|
||||
$font-size-xs: 11px;
|
||||
$font-size-sm: 12px;
|
||||
$font-size-base: 14px;
|
||||
$font-size-md: 15px;
|
||||
$font-size-lg: 16px;
|
||||
$font-size-xl: 18px;
|
||||
$font-size-2xl: 22px;
|
||||
$font-size-3xl: 32px;
|
||||
$font-size-4xl: 56px;
|
||||
|
||||
$font-weight-normal: 400;
|
||||
$font-weight-medium: 500;
|
||||
$font-weight-semibold: 600;
|
||||
$font-weight-bold: 700;
|
||||
$font-weight-extrabold: 800;
|
||||
|
||||
$line-height-tight: 1.2;
|
||||
$line-height-normal: 1.6;
|
||||
$line-height-relaxed: 1.7;
|
||||
8
src/styles/tokens/_z-index.scss
Normal file
8
src/styles/tokens/_z-index.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
// 层级令牌
|
||||
|
||||
$z-index-sidebar: 101;
|
||||
$z-index-header: 100;
|
||||
$z-index-overlay: 1000;
|
||||
$z-index-sidebar-mobile: 1001;
|
||||
$z-index-modal: 2000;
|
||||
$z-index-toast: 3000;
|
||||
Reference in New Issue
Block a user