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:
@@ -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