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

feat(frontend): 重构本地调试代理配置

Browse Source 
将 `packages/frontend` 的 Vite 开发代理改为可通过环境变量
切换目标地址，并补充本地联调所需的默认主题与样式更新。
同时同步更新前后端默认 UI 主题定义，便于在本地直接验证
远端接口、WebSocket 与视觉效果。
This commit is contained in:
yinjianm
2026-04-21 05:15:18 +08:00
parent 6503d2bb39
commit 96d9950c6b
12 changed files with 715 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/components/style-customizer/StyleCustomizerUiTab.vue
+80 -26
View File
@@ -16,37 +16,80 @@ const editableUiTheme = ref<Record<string, string>>({});
const editableUiThemeString = ref('');
const themeParseError = ref<string | null>(null);
// 定义黑暗模式主题变量
// NVIDIA Design System — Dark Theme
const darkModeTheme = {
'--app-bg-color': '#161816',
'--text-color': '#d8e6d2',
'--text-color-secondary': '#8d9887',
'--border-color': '#2b332c',
'--link-color': '#37c66a',
'--link-hover-color': '#62e38e',
'--link-active-color': '#45d978',
'--link-active-bg-color': 'rgba(69, 217, 120, 0.14)',
'--app-bg-color': '#000000', // True Black
'--text-color': '#ffffff', // White on dark
'--text-color-secondary': '#a7a7a7', // Gray 300
'--text-color-tertiary': '#757575', // Gray 500
'--border-color': '#5e5e5e', // Gray Border
'--link-color': '#ffffff', // White links on dark
'--link-hover-color': '#3860be', // Blue hover
'--link-active-color': '#76b900', // NVIDIA Green
'--link-active-bg-color': 'rgba(118, 185, 0, 0.12)',// Green 12%
'--nav-item-active-bg-color': 'var(--link-active-bg-color)',
'--header-bg-color': '#1b1f1b',
'--footer-bg-color': '#1b1f1b',
'--button-bg-color': '#203126',
'--button-text-color': '#9aefad',
'--button-hover-bg-color': '#294232',
'--icon-color': 'var(--text-color-secondary)',
'--icon-hover-color': 'var(--link-hover-color)',
'--split-line-color': 'var(--border-color)',
'--split-line-hover-color': '#3b6045',
'--input-focus-border-color': 'var(--link-active-color)',
'--input-focus-glow': 'var(--link-active-color)',
'--overlay-bg-color': 'rgba(0, 0, 0, 0.84)',
'--color-success': '#3fdc78',
'--color-error': '#d86a4d',
'--color-warning': '#d1a445',
'--font-family-sans-serif': 'sans-serif',
'--header-bg-color': '#000000', // True Black
'--footer-bg-color': '#000000',
'--card-bg-color': '#1a1a1a', // Near Black cards
'--button-bg-color': '#76b900', // NVIDIA Green CTA
'--button-text-color': '#000000', // Black on green
'--button-hover-bg-color': '#1eaedb', // Teal hover
'--button-secondary-bg-color': '#1a1a1a', // Near Black secondary
'--icon-color': '#757575', // Gray 500
'--icon-hover-color': '#76b900', // NVIDIA Green
'--split-line-color': '#5e5e5e',
'--split-line-hover-color': '#76b900',
'--input-focus-border-color': '#76b900', // Green focus ring
'--input-focus-glow': '#76b900',
'--overlay-bg-color': 'rgba(0, 0, 0, 0.85)',
'--color-success': '#3f8500', // NVIDIA Green 500
'--color-error': '#e52020', // NVIDIA Red 500
'--color-warning': '#ef9100', // NVIDIA Yellow 300
'--color-success-text': '#ffffff',
'--color-error-text': '#ffffff',
'--color-warning-text': '#1a1a1a',
'--font-family-sans-serif': "Arial, Helvetica, sans-serif",
'--base-padding': '1rem',
'--base-margin': '0.5rem'
};
// Apple Design System — Light Theme
const lightModeTheme = {
'--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': '#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',
};
const initializeEditableState = () => {
const userThemeJson = appearanceSettings.value.customUiTheme;
const userTheme = safeJsonParse(userThemeJson, {});
@@ -106,6 +149,17 @@ const applyDarkMode = async () => {
}
};
const applyLightMode = async () => {
try {
editableUiTheme.value = JSON.parse(JSON.stringify(lightModeTheme));
await appearanceStore.saveCustomUiTheme(editableUiTheme.value);
notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.lightModeApplied', '白天模式已应用') });
} catch (error: any) {
console.error("应用白天模式失败:", error);
notificationsStore.addNotification({ type: 'error', message: t('styleCustomizer.lightModeApplyFailed', { message: error.message || '未知错误' }) });
}
};
const formattedEditableUiThemeJson = computed(() => {
try {
const themeObject = editableUiTheme.value;
@@ -217,7 +271,7 @@ defineExpose({
<label class="text-left text-foreground text-sm font-medium mb-1 md:mb-0">{{ t('styleCustomizer.themeModeLabel', '主题模式:') }}</label>
<div class="flex gap-2 justify-start flex-wrap">
<button @click="handleResetUiTheme" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap">{{ t('styleCustomizer.defaultMode', '默认模式') }}</button>
<button @click="applyDarkMode" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap">{{ t('styleCustomizer.darkMode', '黑暗模式') }}</button>
<button @click="applyLightMode" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap">{{ t('styleCustomizer.lightMode', '白天模式') }}</button>
</div>
</div>
<p class="text-text-secondary text-sm leading-relaxed mb-3">{{ t('styleCustomizer.uiDescription') }}</p>
packages/frontend/src/features/appearance/config/default-themes.ts
+29 -29
View File
@@ -25,40 +25,40 @@ export const defaultXtermTheme: ITheme = {
brightWhite: '#f3fff0'
};
// 默认 UI 主题 (CSS 变量) — Apple Design System Light
// 默认 UI 主题 (CSS 变量) — NVIDIA Design System Dark
// (与 backend/src/config/default-themes.ts 中的定义保持一致)
export const defaultUiTheme: Record<string, string> = {
'--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%
'--app-bg-color': '#000000', // True Black
'--text-color': '#ffffff', // White on dark
'--text-color-secondary': '#a7a7a7', // Gray 300
'--text-color-tertiary': '#757575', // Gray 500
'--border-color': '#5e5e5e', // Gray Border
'--link-color': '#ffffff', // White links on dark
'--link-hover-color': '#3860be', // Blue hover
'--link-active-color': '#76b900', // NVIDIA Green
'--link-active-bg-color': 'rgba(118, 185, 0, 0.12)',// Green 12%
'--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': '#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',
'--header-bg-color': '#000000',
'--footer-bg-color': '#000000',
'--card-bg-color': '#1a1a1a', // Near Black cards
'--button-bg-color': '#76b900', // NVIDIA Green CTA
'--button-text-color': '#000000', // Black on green
'--button-hover-bg-color': '#1eaedb', // Teal hover
'--button-secondary-bg-color': '#1a1a1a',
'--icon-color': '#757575',
'--icon-hover-color': '#76b900',
'--split-line-color': '#5e5e5e',
'--split-line-hover-color': '#76b900',
'--input-focus-border-color': '#76b900',
'--input-focus-glow': '#76b900',
'--overlay-bg-color': 'rgba(0, 0, 0, 0.85)',
'--color-success': '#3f8500',
'--color-error': '#e52020',
'--color-warning': '#ef9100',
'--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",
'--color-warning-text': '#1a1a1a',
'--font-family-sans-serif': "Arial, Helvetica, sans-serif",
'--base-padding': '1rem',
'--base-margin': '0.5rem',
};
packages/frontend/src/style.css
+44 -45
View File
@@ -1,6 +1,6 @@
@import "tailwindcss";
/* Tailwind Theme Variables Mapping — Apple Design System */
/* Tailwind Theme Variables Mapping — NVIDIA Design System */
@theme inline {
/* Base Colors */
--color-background: var(--app-bg-color);
@@ -46,53 +46,53 @@
--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;
/* Shadow (NVIDIA) */
--shadow-card: rgba(0, 0, 0, 0.3) 0px 0px 5px 0px;
--shadow-subtle: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px;
}
/* ─────────────────────────────────────────────
Apple Design System — Light Theme Variables
NVIDIA Design System — Dark Theme (Default)
───────────────────────────────────────────── */
:root {
/* 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 */
/* Base Colors (NVIDIA Dark) */
--app-bg-color: #000000; /* True Black */
--text-color: #ffffff; /* White on dark */
--text-color-secondary: #a7a7a7; /* Gray 300 */
--text-color-tertiary: #757575; /* Gray 500 */
--border-color: #5e5e5e; /* Gray Border */
--link-color: #ffffff; /* White links on dark */
--link-hover-color: #3860be; /* Blue hover */
--link-active-color: #76b900; /* NVIDIA Green */
--link-active-bg-color: rgba(118, 185, 0, 0.12); /* Green 12% */
--nav-item-active-bg-color: var(--link-active-bg-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 */
/* Component Colors (NVIDIA Dark) */
--header-bg-color: #000000;
--footer-bg-color: #000000;
--card-bg-color: #1a1a1a; /* Near Black cards */
--button-bg-color: #76b900; /* NVIDIA Green CTA */
--button-text-color: #000000; /* Black on green */
--button-hover-bg-color: #1eaedb; /* Teal hover */
--button-secondary-bg-color: #1a1a1a;
--icon-color: #757575; /* Gray 500 */
--icon-hover-color: #76b900; /* NVIDIA Green */
--split-line-color: #5e5e5e;
--split-line-hover-color: #76b900;
--input-focus-border-color: #76b900; /* Green focus ring */
--input-focus-glow: #76b900;
--overlay-bg-color: rgba(0, 0, 0, 0.85);
/* Status Colors (Apple-inspired) */
--color-success: #30d158; /* Apple Green */
--color-warning: #ff9f0a; /* Apple Orange */
--color-error: #ff453a; /* Apple Red */
/* Status Colors (NVIDIA) */
--color-success: #3f8500;
--color-warning: #ef9100;
--color-error: #e52020;
--color-success-text: #ffffff;
--color-warning-text: #1d1d1f;
--color-warning-text: #1a1a1a;
--color-error-text: #ffffff;
/* 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;
/* Typography */
--font-family-sans-serif: Arial, Helvetica, sans-serif;
/* Spacing */
--base-padding: 1rem;
@@ -105,8 +105,7 @@ body {
font-family: var(--font-family-sans-serif);
background-color: var(--app-bg-color);
color: var(--text-color);
line-height: 1.47; /* Apple body line-height */
letter-spacing: -0.022em; /* Apple body tracking */
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@@ -187,31 +186,31 @@ hr {
border-bottom: 1px solid var(--border-color);
}
/* Style scrollbars — Apple minimal */
/* Style scrollbars — dark theme */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
background: #1a1a1a;
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.15);
background-color: #5e5e5e;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.3);
background-color: #76b900;
}
/* Input focus styles — Apple Blue ring */
/* Input focus styles — NVIDIA Green ring */
input:focus, textarea:focus, select:focus {
border-color: var(--input-focus-border-color) !important;
outline: 0;
box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2) !important;
box-shadow: 0 0 0 2px rgba(118, 185, 0, 0.25) !important;
}
/* Ensure icons inside primary buttons are white */