chore: 添加 .gitignore 规则，包含前端、pnpm、Node.js 和 AI 工具
This commit is contained in:
71
src/styles/_base.scss
Normal file
71
src/styles/_base.scss
Normal file
@@ -0,0 +1,71 @@
|
||||
// 基础重置与全局样式
|
||||
@use 'variables' 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};
|
||||
--color-primary-dark: #{$primary-dark};
|
||||
|
||||
/* 功能色 */
|
||||
--color-success: #{$success};
|
||||
--color-success-light: #{$success-light};
|
||||
--color-warning: #{$warning};
|
||||
--color-warning-light: #{$warning-light};
|
||||
--color-danger: #{$danger};
|
||||
--color-danger-light: #{$danger-light};
|
||||
|
||||
/* 中性色 - 现代简约灰阶 */
|
||||
--color-text-1: #{$text-1};
|
||||
--color-text-2: #{$text-2};
|
||||
--color-text-3: #{$text-3};
|
||||
--color-text-4: #{$text-4};
|
||||
|
||||
/* 边框/分割线 */
|
||||
--color-border-1: #{$border-1};
|
||||
--color-border-2: #{$border-2};
|
||||
--color-border-3: #{$border-3};
|
||||
|
||||
/* 背景色 */
|
||||
--color-bg-1: #{$bg-1};
|
||||
--color-bg-2: #{$bg-2};
|
||||
--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};
|
||||
--radius-sm: #{$radius-sm};
|
||||
--radius-md: #{$radius-md};
|
||||
--radius-lg: #{$radius-lg};
|
||||
--radius-xl: #{$radius-xl};
|
||||
|
||||
/* 过渡动画 */
|
||||
--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;
|
||||
}
|
||||
188
src/styles/_components.scss
Normal file
188
src/styles/_components.scss
Normal file
@@ -0,0 +1,188 @@
|
||||
// 通用组件样式
|
||||
// 按钮、卡片、表单、状态标签等
|
||||
|
||||
@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);
|
||||
}
|
||||
37
src/styles/_layout.scss
Normal file
37
src/styles/_layout.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
// 布局样式
|
||||
// 侧边栏、主内容区、页眉等
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
// 其他布局样式...
|
||||
70
src/styles/_mixins.scss
Normal file
70
src/styles/_mixins.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
// SCSS Mixins - 可复用代码片段
|
||||
@use 'variables' as *;
|
||||
|
||||
// 媒体查询断点
|
||||
@mixin mobile {
|
||||
@media (max-width: 768px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet {
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop {
|
||||
@media (min-width: 1025px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// 弹性布局
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin flex-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// 文本截断
|
||||
@mixin text-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 过渡效果
|
||||
@mixin transition($property: all, $duration: 0.2s, $timing: cubic-bezier(0.4, 0, 0.2, 1)) {
|
||||
transition: $property $duration $timing;
|
||||
}
|
||||
|
||||
// 阴影
|
||||
@mixin shadow($level: 1) {
|
||||
@if $level == 1 {
|
||||
box-shadow: $shadow-1;
|
||||
} @else if $level == 2 {
|
||||
box-shadow: $shadow-2;
|
||||
} @else if $level == 3 {
|
||||
box-shadow: $shadow-3;
|
||||
}
|
||||
}
|
||||
|
||||
// 圆角
|
||||
@mixin radius($size: md) {
|
||||
@if $size == sm {
|
||||
border-radius: $radius-sm;
|
||||
} @else if $size == md {
|
||||
border-radius: $radius-md;
|
||||
} @else if $size == lg {
|
||||
border-radius: $radius-lg;
|
||||
} @else if $size == xl {
|
||||
border-radius: $radius-xl;
|
||||
}
|
||||
}
|
||||
52
src/styles/_pages.scss
Normal file
52
src/styles/_pages.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
// 页面特定样式
|
||||
// 首页、管理台、开发台、技能市场等
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
// 其他页面样式将逐步添加...
|
||||
54
src/styles/_variables.scss
Normal file
54
src/styles/_variables.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
// 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;
|
||||
2541
src/styles/global.scss
Normal file
2541
src/styles/global.scss
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user