admin/nexus-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): 切换苹果风格默认主题

Browse Source
This commit is contained in:
yinjianm
2026-04-21 04:34:03 +08:00
parent 6253b90151
commit 6503d2bb39
8 changed files with 482 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/features/appearance/config/default-themes.ts
+31 -22
View File
@@ -25,31 +25,40 @@ export const defaultXtermTheme: ITheme = {
brightWhite: '#f3fff0'
};
// 默认 UI 主题 (CSS 变量)
// 默认 UI 主题 (CSS 变量) — Apple Design System Light
// (与 backend/src/config/default-themes.ts 中的定义保持一致)
export const defaultUiTheme: Record<string, string> = {
'--app-bg-color': '#ffffff',
'--text-color': '#333333',
'--text-color-secondary': '#666666',
'--border-color': '#cccccc',
'--link-color': '#8E44AD', // 现代紫色 (Amethyst 变种)
'--link-hover-color': '#B180E0', // 现代紫色 - 悬停 (更亮)
'--link-active-color': '#A06CD5', // 现代紫色 - 激活 (基础)
'--link-active-bg-color': '#F3EBFB', /* 现代紫色 - 激活背景 (非常浅) */
'--nav-item-active-bg-color': 'var(--link-active-bg-color)', /* Added */
'--header-bg-color': '#f0f0f0',
'--footer-bg-color': '#f0f0f0',
'--button-bg-color': '#A06CD5', // 现代紫色 - 激活 (基础)
'--app-bg-color': '#f5f5f7', // Apple Light Gray
'--text-color': '#1d1d1f', // Near Black
'--text-color-secondary': 'rgba(0, 0, 0, 0.8)', // Black 80%
'--text-color-tertiary': 'rgba(0, 0, 0, 0.48)', // Black 48%
'--border-color': 'rgba(0, 0, 0, 0.08)', // Ultra-subtle border
'--link-color': '#0066cc', // Link Blue
'--link-hover-color': '#0071e3', // Apple Blue
'--link-active-color': '#0071e3', // Apple Blue
'--link-active-bg-color': 'rgba(0, 113, 227, 0.08)', // Blue 8%
'--nav-item-active-bg-color': 'var(--link-active-bg-color)',
'--header-bg-color': '#e8e8ed',
'--footer-bg-color': '#f5f5f7',
'--card-bg-color': '#ffffff',
'--button-bg-color': '#0071e3', // Apple Blue CTA
'--button-text-color': '#ffffff',
'--button-hover-bg-color': '#8E44AD', // 现代紫色 - 悬停 (稍暗)
'--icon-color': 'var(--text-color-secondary)', // 图标颜色
'--icon-hover-color': 'var(--link-hover-color)', // 图标悬停颜色 (自动更新)
'--split-line-color': 'var(--border-color)', /* 分割线颜色 */
'--split-line-hover-color': 'var(--border-color)', /* 分割线悬停颜色 */
'--input-focus-border-color': 'var(--link-active-color)', /* 输入框聚焦边框颜色 (自动更新) */
'--input-focus-glow': 'var(--link-active-color)', /* 输入框聚焦光晕值 (自动更新) */
'--overlay-bg-color': 'rgba(0, 0, 0, 0.6)', /* Added Overlay Background - 恢复 rgba 以支持透明度 */
'--font-family-sans-serif': 'sans-serif',
'--button-hover-bg-color': '#0077ed',
'--button-secondary-bg-color': '#e8e8ed',
'--icon-color': 'rgba(0, 0, 0, 0.48)',
'--icon-hover-color': '#0071e3',
'--split-line-color': 'rgba(0, 0, 0, 0.08)',
'--split-line-hover-color': 'rgba(0, 0, 0, 0.16)',
'--input-focus-border-color': '#0071e3',
'--input-focus-glow': '#0071e3',
'--overlay-bg-color': 'rgba(0, 0, 0, 0.4)',
'--color-success': '#30d158',
'--color-error': '#ff453a',
'--color-warning': '#ff9f0a',
'--color-success-text': '#ffffff',
'--color-error-text': '#ffffff',
'--color-warning-text': '#1d1d1f',
'--font-family-sans-serif': "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
'--base-padding': '1rem',
'--base-margin': '0.5rem',
};
packages/frontend/src/style.css
+82 -61
View File
@@ -1,28 +1,31 @@
@import "tailwindcss";
/* Tailwind Theme Variables Mapping */
/* Tailwind Theme Variables Mapping — Apple Design System */
@theme inline {
/* Base Colors */
--color-background: var(--app-bg-color); /* More generic name */
--color-foreground: var(--text-color); /* More generic name */
--color-app: var(--app-bg-color); /* Keep specific if needed */
--color-text-default: var(--text-color); /* Keep specific if needed */
--color-background: var(--app-bg-color);
--color-foreground: var(--text-color);
--color-app: var(--app-bg-color);
--color-text-default: var(--text-color);
--color-text-secondary: var(--text-color-secondary);
--color-border: var(--border-color); /* Simplified name */
--color-border-default: var(--border-color); /* Keep specific if needed */
--color-text-tertiary: var(--text-color-tertiary);
--color-border: var(--border-color);
--color-border-default: var(--border-color);
--color-link: var(--link-color);
--color-link-hover: var(--link-hover-color);
--color-link-active: var(--link-active-color); /* Also used as primary/theme color */
--color-primary: var(--link-active-color); /* Map primary to active link color */
--color-link-active-bg: var(--link-active-bg-color); /* Map active link background */
--color-nav-active-bg: var(--nav-item-active-bg-color); /* Map specific nav active background */
--color-link-active: var(--link-active-color);
--color-primary: var(--link-active-color);
--color-link-active-bg: var(--link-active-bg-color);
--color-nav-active-bg: var(--nav-item-active-bg-color);
/* Component Colors */
--color-header: var(--header-bg-color);
--color-footer: var(--footer-bg-color);
--color-card: var(--card-bg-color);
--color-button: var(--button-bg-color);
--color-button-text: var(--button-text-color);
--color-button-hover: var(--button-hover-bg-color);
--color-button-secondary: var(--button-secondary-bg-color);
--color-icon: var(--icon-color);
--color-icon-hover: var(--icon-hover-color);
--color-split-line: var(--split-line-color);
@@ -35,58 +38,77 @@
--color-success-text: var(--color-success-text);
--color-warning-text: var(--color-warning-text);
--color-error-text: var(--color-error-text);
/* Radius Scale (Apple) */
--radius-micro: 5px;
--radius-standard: 8px;
--radius-comfortable: 11px;
--radius-large: 12px;
--radius-pill: 980px;
/* Shadow (Apple) */
--shadow-card: rgba(0, 0, 0, 0.22) 3px 5px 30px 0px;
--shadow-subtle: rgba(0, 0, 0, 0.04) 0px 1px 3px 0px;
}
/* 全局样式和 CSS 变量定义 */
/* ─────────────────────────────────────────────
Apple Design System — Light Theme Variables
───────────────────────────────────────────── */
:root {
/* 基础颜色 */
--app-bg-color: #ffffff; /* 应用背景色 */
--text-color: #333333; /* 主要文字颜色 */
--text-color-secondary: #666666; /* 次要文字颜色 */
--border-color: #cccccc; /* 边框颜色 */
--link-color: #333; /* 链接颜色 */
--link-hover-color: #0056b3; /* 链接悬停颜色 */
--link-active-color: #007bff; /* 激活链接/主题色 */
--link-active-bg-color: #e0e0ff; /* 激活链接背景色 (类似 indigo-50) */
--nav-item-active-bg-color: var(--link-active-bg-color); /* 导航选中项背景色, 默认同激活链接背景 */
/* Base Colors (Apple Light) */
--app-bg-color: #f5f5f7; /* Apple Light Gray — main canvas */
--text-color: #1d1d1f; /* Near Black — primary text */
--text-color-secondary: rgba(0, 0, 0, 0.8); /* Black 80% — secondary text */
--text-color-tertiary: rgba(0, 0, 0, 0.48); /* Black 48% — tertiary, disabled */
--border-color: rgba(0, 0, 0, 0.08); /* Ultra-subtle border */
--link-color: #0066cc; /* Link Blue on light bg */
--link-hover-color: #0071e3; /* Apple Blue — hover */
--link-active-color: #0071e3; /* Apple Blue — primary accent */
--link-active-bg-color: rgba(0, 113, 227, 0.08); /* Blue 8% — active bg */
--nav-item-active-bg-color: var(--link-active-bg-color);
/* 组件颜色 */
--header-bg-color: #f0f0f0; /* 头部背景色 */
--footer-bg-color: #f0f0f0; /* 底部背景色 */
--button-bg-color: #007bff; /* 按钮背景色 */
--button-text-color: #ffffff; /* 按钮文字颜色 */
--button-hover-bg-color: #0056b3;/* 按钮悬停背景色 */
--icon-color: var(--text-color-secondary); /* 图标颜色 */
--icon-hover-color: var(--link-hover-color); /* 图标悬停颜色 */
--split-line-color: var(--border-color); /* 分割线颜色 */
--split-line-hover-color: var(--border-color); /* 分割线悬停颜色 */
--input-focus-border-color: var(--link-active-color); /* 输入框聚焦边框颜色 */
--input-focus-glow: var(--link-active-color); /* 输入框聚焦光晕值 */
--overlay-bg-color: rgba(0, 0, 0, 0.6); /* Added Overlay Background Color */
/* Component Colors (Apple Light) */
--header-bg-color: #e8e8ed; /* Slightly darker than canvas */
--footer-bg-color: #f5f5f7;
--card-bg-color: #ffffff; /* White cards on gray canvas */
--button-bg-color: #0071e3; /* Apple Blue CTA */
--button-text-color: #ffffff;
--button-hover-bg-color: #0077ed; /* Brighter Blue on hover */
--button-secondary-bg-color: #e8e8ed; /* Light secondary button */
--icon-color: rgba(0, 0, 0, 0.48); /* Tertiary icons */
--icon-hover-color: #0071e3; /* Apple Blue on hover */
--split-line-color: rgba(0, 0, 0, 0.08);
--split-line-hover-color: rgba(0, 0, 0, 0.16);
--input-focus-border-color: #0071e3; /* Apple Blue focus ring */
--input-focus-glow: #0071e3;
--overlay-bg-color: rgba(0, 0, 0, 0.4); /* Lighter overlay for light theme */
/* Status Colors */
--color-success: #28a745; /* Green */
--color-warning: #ffc107; /* Yellow */
--color-error: #dc3545; /* Red */
--color-success-text: #ffffff; /* White text for green bg */
--color-warning-text: #212529; /* Dark text for yellow bg */
--color-error-text: #ffffff; /* White text for red bg */
/* Status Colors (Apple-inspired) */
--color-success: #30d158; /* Apple Green */
--color-warning: #ff9f0a; /* Apple Orange */
--color-error: #ff453a; /* Apple Red */
--color-success-text: #ffffff;
--color-warning-text: #1d1d1f;
--color-error-text: #ffffff;
/* 字体 */
--font-family-sans-serif: sans-serif; /* 默认字体 */
/* Typography (Apple SF Pro System Stack) */
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
/* 其他 */
--base-padding: 1rem; /* 基础内边距 */
--base-margin: 0.5rem; /* 基础外边距 */
/* Spacing */
--base-padding: 1rem;
--base-margin: 0.5rem;
}
/* 应用基础样式 */
body {
margin: 0; /* 移除默认 body margin */
margin: 0;
font-family: var(--font-family-sans-serif);
background-color: var(--app-bg-color);
color: var(--text-color);
line-height: 1.6; /* 改善可读性 */
line-height: 1.47; /* Apple body line-height */
letter-spacing: -0.022em; /* Apple body tracking */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 全局链接样式 */
@@ -165,32 +187,31 @@ hr {
border-bottom: 1px solid var(--border-color);
}
/* Style scrollbars */
/* Style scrollbars — Apple minimal */
::-webkit-scrollbar {
width: 8px; /* Width of vertical scrollbar */
height: 8px; /* Height of horizontal scrollbar */
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--app-bg-color); /* Scrollbar track background */
border-radius: 4px;
background: transparent;
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background-color: var(--border-color); /* Scrollbar handle color */
border-radius: 4px;
border: 2px solid var(--app-bg-color); /* Creates padding around thumb */
background-color: rgba(0, 0, 0, 0.15);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--text-color-secondary); /* Scrollbar handle hover color */
background-color: rgba(0, 0, 0, 0.3);
}
/* Input focus styles */
/* Input focus styles — Apple Blue ring */
input:focus, textarea:focus, select:focus {
border-color: var(--input-focus-border-color) !important; /* Use new variable, !important might be needed depending on specificity */
border-color: var(--input-focus-border-color) !important;
outline: 0;
box-shadow: 0 0 0 3px rgba(var(--input-focus-glow-rgb), 0.2) !important; /* Use new variable, !important might be needed */
box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2) !important;
}
/* Ensure icons inside primary buttons are white */