提交

client-tauri/src/components/LoginPage.vue

@@ -50,7 +50,7 @@
             </el-form-item>
 
             <el-form-item>
-              <el-button type="primary" block :loading="loginLoading" native-type="submit">
+              <el-button class="primary-btn" type="primary" block :loading="loginLoading" native-type="submit">
                 {{ loginLoading ? '登录中...' : '登录' }}
               </el-button>
             </el-form-item>
@@ -1320,7 +1320,7 @@ onUnmounted(() => {
 .primary-btn {
   width: 100%;
   padding: 12px;
-  background: #007bf5;
+  background: var(--color-primary);
   color: white;
   border: none;
   border-radius: 8px;
@@ -1331,7 +1331,7 @@ onUnmounted(() => {
 }
 
 .primary-btn:hover:not(:disabled) {
-  background: #0056b3;
+  background: var(--color-primary-700);
 }
 
 .primary-btn:disabled {
@@ -1381,6 +1381,15 @@ onUnmounted(() => {
   color: #0056b3;
 }
 
+/* Override Element Plus text button inside login page to use theme color */
+.el-button--text {
+  background: transparent;
+  border-color: transparent;
+  padding-left: 0;
+  padding-right: 0;
+  color: var(--color-primary) !important;
+}
+
 .action-links {
   display: flex;
   align-items: center;

client-tauri/src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import './styles.css'
+import './styles/theme.css'
 import ElementPlus from 'element-plus'
 // import ElementPlus styles (you may switch to a custom theme later)
 import 'element-plus/dist/index.css'

client-tauri/src/styles.css

@@ -26,8 +26,8 @@ body {
 }
 
 .el-button--primary {
-  background-color: #1976d2 !important;
-  border-color: #1976d2 !important;
+  background-color: var(--color-primary) !important;
+  border-color: var(--color-primary) !important;
   color: #fff !important;
 }
 

client-tauri/src/styles/theme.css

@@ -0,0 +1,73 @@
+:root {
+  /* Primary (deep blue) */
+  --color-primary-50:  #f2f6ff;
+  --color-primary-100: #dbe9ff;
+  --color-primary-200: #b4d2ff;
+  --color-primary-300: #7aaaff;
+  --color-primary-400: #3b87ff;
+  --color-primary:       #0057e5;
+  --color-primary-600: #0047c2;
+  --color-primary-700: #003694;
+  --color-primary-800: #00266b;
+  --color-primary-900: #00183b;
+  --el-color-primary-light-3: #0057e5;
+  --el-color-primary-light-2: #0057e5;
+  --el-color-primary-light-1: #0057e5;
+  --el-color-primary-dark-2: #0057e5;
+  --el-color-primary-dark-1: #0057e5;
+  --el-color-primary-dark: #0057e5;
+  --el-color-primary-dark-3: #0057e5;
+  --el-color-primary-dark-4: #0057e5;
+  --el-color-primary-dark-5: #0057e5;
+  /* Accent / supporting */
+  --color-accent: #ff8a00;
+  --color-analogous-cyan: #00b0e6;
+  --color-analogous-indigo: #5a3dff;
+
+  /* Semantic */
+  --color-success: #28a745;
+  --color-warning: #ffb020;
+  --color-danger:  #e04545;
+  --color-info:    #17a2b8;
+
+  /* Neutrals / text / surfaces */
+  --bg-surface: #ffffff;
+  --bg-muted:   #f8f9fa;
+  --text-primary:   #111827;
+  --text-secondary: #6b7280;
+  --border: #e9ecef;
+
+  /* Focus / rings / shadows */
+  --focus-ring: rgba(0,87,229,0.18);
+  --primary-shadow: rgba(0,87,229,0.12);
+}
+
+/* Element Plus mapping (basic) */
+:root {
+  --el-color-primary: var(--color-primary);
+  --el-color-primary-dark-2: var(--color-primary-700);
+  --el-text-color-primary: var(--text-primary);
+  --el-text-color-regular: var(--text-primary);
+  --el-border-color: var(--border);
+  --el-bg-color: var(--bg-surface);
+  --el-bg-color-overlay: var(--bg-muted);
+}
+
+/* Theme class for runtime switching if needed */
+.theme-deepblue {
+  --color-primary: var(--color-primary);
+  --el-color-primary: var(--color-primary);
+  --el-text-color-primary: var(--text-primary);
+}
+
+/* Utility examples */
+.btn-primary {
+  background-color: var(--color-primary);
+  color: #fff;
+  box-shadow: 0 2px 8px var(--primary-shadow);
+}
+.focus-ring {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+