fix: 关系分析页面暗色模式修复+细节调整

Ultraworked with Sisyphus

client/pages/admin/index.vue

@@ -626,7 +626,6 @@ async function handleResetConfig(configKey) {
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/theme.scss";
 
 .page-admin {
   min-height: 100vh;

client/pages/analysis/index.vue

@@ -142,13 +142,11 @@ function goSubscribe() {
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/theme.scss";
-
 // Brand colors from style-guide.md
-$blue-dark: var(--color-brand);
+$blue-dark: #1E3A5F;     // = var(--color-brand), literal for darken() compat
 $gold: var(--color-gold);
 $gold-light: #F8F0D8;
-$warm-white: var(--color-bg);
+$warm-white: #F8F6F1;    // = var(--color-bg) light theme, literal for darken() compat
 $white: var(--color-bg-card);
 $text-primary: #1F2937;
 $text-secondary: #6B7280;

client/pages/commission/index.vue

@@ -345,7 +345,6 @@ function formatDate(dateStr) {
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/theme.scss";
 
 .page-commission {
   min-height: 100vh;

client/pages/login/index.vue

@@ -211,7 +211,6 @@ function continueToChart() {
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/theme.scss";
 
 .page-login {
   min-height: 100vh;

client/pages/plan/apply.vue

@@ -141,7 +141,6 @@ const onSubmit = async () => {
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/theme.scss";
 
 .page-apply {
   padding: 20px;

client/pages/records/index.vue

@@ -49,7 +49,6 @@ function viewDetail(record) {
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/theme.scss";
 
 .page-records { padding: 16px; }
 .empty-state {

client/pages/register/index.vue

@@ -190,7 +190,6 @@ async function handleSubmit() {
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/theme.scss";
 
 .page-register {
   min-height: 100vh;

client/pages/relations/add-relation.vue

@@ -181,7 +181,6 @@ async function handleSave() {
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/theme.scss";
 
 .page-add-relation {
   min-height: 100vh;

client/pages/relations/analysis-chat.vue

@@ -157,7 +157,6 @@ function onScrollToLower() {
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/theme.scss";
 
 .page-chat {
   display: flex;

client/pages/relations/analysis-records.vue

@@ -111,7 +111,6 @@ function formatTime(time) {
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/theme.scss";
 
 .page-records {
   min-height: 100vh;
@@ -241,8 +240,8 @@ function formatTime(time) {
   border-radius: 4px;
 }
 .status-active {
-  background: #E8F5E9;
-  color: #2E7D32;
+  background: var(--color-success-bg);
+  color: var(--color-success);
 }
 .status-archived {
   background: var(--color-bg-secondary);

client/pages/relations/analysis-select.vue

@@ -159,7 +159,7 @@ async function handleStart() {
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/theme.scss";
+$brand-color: #1E3A5F;
 
 .page-select {
   min-height: 100vh;
@@ -328,7 +328,7 @@ async function handleStart() {
 .btn-submit {
   width: 100%;
   height: 50px;
-  background: linear-gradient(135deg, var(--color-brand), darken(var(--color-brand), 4%));
+  background: linear-gradient(135deg, $brand-color, darken($brand-color, 4%));
   border-radius: 14px;
   display: flex;
   align-items: center;

client/pages/relations/chart-compare.vue

@@ -189,7 +189,7 @@ async function handleInterpret() {
 <style scoped lang="scss">
 .page-compare {
   min-height: 100vh;
-  background: #F8F6F1;
+  background: var(--color-bg);
   padding: 16px;
 }
 
@@ -201,7 +201,7 @@ async function handleInterpret() {
 }
 .skeleton-chart {
   height: 320px;
-  background: linear-gradient(90deg, #F0EEEA 25%, #F8F6F1 50%, #F0EEEA 75%);
+  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg) 50%, var(--color-bg-secondary) 75%);
   background-size: 400px 100%;
   animation: shimmer 1.5s ease-in-out infinite;
   border-radius: 16px;
@@ -217,13 +217,13 @@ async function handleInterpret() {
 .compare-title {
   font-size: 20px;
   font-weight: 700;
-  color: #1A1A2E;
+  color: var(--color-text-primary);
   display: block;
   margin-bottom: 4px;
 }
 .compare-subtitle {
   font-size: 13px;
-  color: #A0AEC0;
+  color: var(--color-text-secondary);
 }
 
 .charts-row {
@@ -244,11 +244,11 @@ async function handleInterpret() {
 .chart-label-name {
   font-size: 14px;
   font-weight: 600;
-  color: #1A1A2E;
+  color: var(--color-text-primary);
 }
 .chart-label-date {
   font-size: 12px;
-  color: #A0AEC0;
+  color: var(--color-text-secondary);
 }
 
 .action-bar {
@@ -258,7 +258,7 @@ async function handleInterpret() {
 .btn-interpret {
   width: 100%;
   height: 48px;
-  background: linear-gradient(135deg, #1E3A5F, darken(#1E3A5F, 4%));
+  background: var(--color-brand);
   border-radius: 12px;
   display: flex;
   align-items: center;
@@ -273,16 +273,16 @@ async function handleInterpret() {
   pointer-events: none;
 }
 .btn-interpret-text {
-  color: #FFFFFF;
+  color: var(--color-bg-card);
   font-size: 16px;
   font-weight: 600;
 }
 
 .interpretation-card {
-  background: #FFFFFF;
+  background: var(--color-bg-card);
   border-radius: 16px;
   padding: 20px 16px;
-  box-shadow: 0 2px 12px rgba(26, 26, 46, 0.06);
+  box-shadow: var(--shadow-card);
 }
 .interpretation-header {
   display: flex;
@@ -293,20 +293,20 @@ async function handleInterpret() {
 .interpretation-title {
   font-size: 16px;
   font-weight: 600;
-  color: #1A1A2E;
+  color: var(--color-text-primary);
 }
 .interpretation-date {
   font-size: 12px;
-  color: #A0AEC0;
+  color: var(--color-text-secondary);
 }
 .interpretation-body {
-  background: #F8F6F1;
+  background: var(--color-bg-secondary);
   border-radius: 12px;
   padding: 16px;
 }
 .interpretation-content {
   font-size: 14px;
-  color: #4A5568;
+  color: var(--color-text-secondary);
   line-height: 1.8;
   white-space: pre-wrap;
 }

client/pages/relations/number-analysis.vue

@@ -164,23 +164,23 @@ function formatDate(dateStr) {
 <style scoped lang="scss">
 .page-number-analysis {
   min-height: 100vh;
-  background: #F8F6F1;
+  background: var(--color-bg);
   padding: 16px;
 }
 
 /* ========== Input Card ========== */
 .input-card {
-  background: #FFFFFF;
+  background: var(--color-bg-card);
   border-radius: 16px;
   padding: 20px;
-  box-shadow: 0 2px 12px rgba(26, 26, 46, 0.06);
+  box-shadow: var(--shadow-card);
   margin-bottom: 16px;
 }
 .input-label {
   display: block;
   font-size: 14px;
   font-weight: 600;
-  color: #4A5568;
+  color: var(--color-text-secondary);
   margin-bottom: 12px;
 }
 .input-row {
@@ -190,27 +190,27 @@ function formatDate(dateStr) {
 .phone-input {
   flex: 1;
   height: 48px;
-  border: 1px solid #E2E8F0;
+  border: 1px solid var(--color-border);
   border-radius: 12px;
   padding: 0 14px;
   font-size: 18px;
-  color: #1A1A2E;
-  background: #FFFFFF;
+  color: var(--color-text-primary);
+  background: var(--color-bg-card);
   box-sizing: border-box;
 }
 .phone-input:focus {
-  border-color: #1E3A5F;
+  border-color: var(--color-brand);
   box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
 }
 .input-placeholder {
-  color: #A0AEC0;
+  color: var(--color-text-secondary);
   font-size: 16px;
 }
 .btn-analyze {
   flex-shrink: 0;
   height: 48px;
   padding: 0 24px;
-  background: #1E3A5F;
+  background: var(--color-brand);
   border-radius: 12px;
   display: flex;
   align-items: center;
@@ -225,7 +225,7 @@ function formatDate(dateStr) {
   pointer-events: none;
 }
 .btn-analyze-text {
-  color: #FFFFFF;
+  color: var(--color-bg-card);
   font-size: 16px;
   font-weight: 600;
 }
@@ -241,7 +241,7 @@ function formatDate(dateStr) {
 .section-title {
   font-size: 17px;
   font-weight: 600;
-  color: #1F2937;
+  color: var(--color-text-primary);
 }
 
 /* ========== Star Grid ========== */
@@ -251,11 +251,11 @@ function formatDate(dateStr) {
   gap: 10px;
 }
 .star-card {
-  background: #FFFFFF;
+  background: var(--color-bg-card);
   border-radius: 14px;
   padding: 14px 16px;
-  box-shadow: 0 2px 12px rgba(26, 26, 46, 0.06);
-  border-left: 4px solid #A0AEC0;
+  box-shadow: var(--shadow-card);
+  border-left: 4px solid var(--color-text-secondary);
 }
 .star-card.star-type-ji { border-left-color: #D94A4A; }
 .star-card.star-type-huo { border-left-color: #E8A238; }
@@ -275,12 +275,12 @@ function formatDate(dateStr) {
 .star-pair {
   font-size: 20px;
   font-weight: 700;
-  color: #1A1A2E;
+  color: var(--color-text-primary);
 }
 .star-name {
   font-size: 14px;
   font-weight: 500;
-  color: #4A5568;
+  color: var(--color-text-secondary);
 }
 .star-card-body {
   padding-left: 2px;
@@ -288,24 +288,24 @@ function formatDate(dateStr) {
 .star-energy {
   font-size: 13px;
   font-weight: 600;
-  color: #1E3A5F;
+  color: var(--color-brand);
   display: block;
   margin-bottom: 2px;
   text-transform: capitalize;
 }
 .star-desc {
   font-size: 12px;
-  color: #A0AEC0;
+  color: var(--color-text-secondary);
   line-height: 1.5;
   display: block;
 }
 
 /* ========== Summary Card ========== */
 .summary-card {
-  background: #FFFFFF;
+  background: var(--color-bg-card);
   border-radius: 16px;
   padding: 20px 16px;
-  box-shadow: 0 2px 12px rgba(26, 26, 46, 0.06);
+  box-shadow: var(--shadow-card);
   margin-bottom: 16px;
 }
 .summary-header {
@@ -317,31 +317,31 @@ function formatDate(dateStr) {
 .summary-title {
   font-size: 16px;
   font-weight: 600;
-  color: #1A1A2E;
+  color: var(--color-text-primary);
 }
 .summary-date {
   font-size: 12px;
-  color: #A0AEC0;
+  color: var(--color-text-secondary);
 }
 .summary-body {
-  background: #F8F6F1;
+  background: var(--color-bg-secondary);
   border-radius: 12px;
   padding: 16px;
 }
 .summary-content {
   font-size: 14px;
-  color: #4A5568;
+  color: var(--color-text-secondary);
   line-height: 1.8;
   white-space: pre-wrap;
 }
 
 /* ========== History ========== */
 .history-card {
-  background: #FFFFFF;
+  background: var(--color-bg-card);
   border-radius: 14px;
   padding: 14px 16px;
   margin-bottom: 10px;
-  box-shadow: 0 2px 12px rgba(26, 26, 46, 0.06);
+  box-shadow: var(--shadow-card);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -353,7 +353,7 @@ function formatDate(dateStr) {
 .history-phone {
   font-size: 16px;
   font-weight: 600;
-  color: #1A1A2E;
+  color: var(--color-text-primary);
 }
 .history-meta {
   display: flex;
@@ -362,12 +362,12 @@ function formatDate(dateStr) {
 }
 .history-date {
   font-size: 12px;
-  color: #A0AEC0;
+  color: var(--color-text-secondary);
 }
 .history-status {
   font-size: 11px;
-  color: #059669;
-  background: #D1FAE5;
+  color: var(--color-success);
+  background: var(--color-success-bg);
   padding: 2px 8px;
   border-radius: 10px;
   font-weight: 500;

client/pages/withdraw/index.vue

@@ -98,8 +98,6 @@ function formatMoney(cents) {
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/theme.scss";
-
 .page-withdraw {
   min-height: 100vh;
   background: var(--color-bg);

client/uni.scss

@@ -6,27 +6,179 @@
    Only structural tokens remain here.
    ============================================ */
 
-// Import theme system
-@import './styles/theme.scss';
+/* -------- Theme System (inlined from styles/theme.scss) -------- */
+/* Two themes: dark (universe) and light (warm).                  */
+/* Deep-cosmos pages (index/chart/payment/subscribe)              */
+/* use explicit dark palette. All others use CSS vars below.      */
+/* ============================================================== */
 
-/* Spacing (unchanged) */
-$spacing-xs: 4px;
-$spacing-sm: 8px;
-$spacing-md: var(--spacing-md);
-$spacing-lg: var(--spacing-lg);
-$spacing-xl: var(--spacing-xl);
+/* Default: Dark Theme (Universe) */
+:root {
+  --color-bg: #0c0a1a;
+  --color-bg-secondary: #120d28;
+  --color-bg-tertiary: #0f0c1e;
+  --color-bg-card: rgba(255, 255, 255, 0.06);
+  --color-bg-card-hover: rgba(255, 255, 255, 0.1);
+  --color-bg-input: rgba(255, 255, 255, 0.1);
+  --color-bg-tag: rgba(255, 255, 255, 0.08);
+  --color-bg-overlay: rgba(12, 10, 26, 0.85);
+  --color-text-primary: #FFFFFF;
+  --color-text-secondary: #A0AEC0;
+  --color-text-tertiary: rgba(255, 255, 255, 0.5);
+  --color-text-link: #60A5FA;
+  --color-text-gold: #C9A84C;
+  --color-brand: #1E3A5F;
+  --color-brand-light: #2C5282;
+  --color-gold: #C9A84C;
+  --color-gold-bg: rgba(201, 168, 76, 0.15);
+  --color-gold-light: #FEF3C7;
+  --color-border: rgba(255, 255, 255, 0.1);
+  --color-border-light: rgba(255, 255, 255, 0.06);
+  --color-border-focus: rgba(201, 168, 76, 0.5);
+  --color-success: #10b981;
+  --color-success-bg: rgba(16, 185, 129, 0.15);
+  --color-warning: #fbbf24;
+  --color-warning-bg: rgba(251, 191, 36, 0.15);
+  --color-danger: #ef4444;
+  --color-danger-bg: rgba(239, 68, 68, 0.15);
+  --color-info: #3B82F6;
+  --color-info-bg: rgba(59, 130, 246, 0.15);
+  --color-tab-active: #1E3A5F;
+  --color-tab-inactive: #A0AEC0;
+  --color-nav-bg: #1E3A5F;
+  --color-nav-text: #FFFFFF;
+  --color-btn-primary: #1E3A5F;
+  --color-btn-primary-text: #FFFFFF;
+  --color-btn-gold: #C9A84C;
+  --color-btn-gold-text: #1A1A2E;
+  --color-badge-super: linear-gradient(135deg, #06b6d4, #0891b2);
+  --color-badge-practitioner: linear-gradient(135deg, #7c3aed, #6d28d9);
+  --color-badge-vip: linear-gradient(135deg, #C9A84C, #A0843C);
+  --font-xs: 12px;
+  --font-sm: 14px;
+  --font-base: 16px;
+  --font-lg: 18px;
+  --font-xl: 24px;
+  --font-2xl: 32px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-full: 999px;
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --shadow-lg: var(--shadow-card);
+  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
+  --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.5);
+  --shadow-btn: 0 4px 15px rgba(30, 58, 95, 0.4);
+  --shadow-gold: 0 4px 15px rgba(201, 168, 76, 0.3);
+  --z-tabbar: 100;
+  --z-navbar: 90;
+  --z-modal: 200;
+  --z-toast: 300;
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.3s ease;
+  --transition-slow: 0.5s ease;
+}
 
-/* Border radius (unchanged) */
-$radius-xs: var(--radius-xs);
-$radius-sm: var(--radius-sm);
-$radius-md: var(--radius-md);
-$radius-lg: var(--radius-lg);
-$radius-xl: var(--radius-xl);
-$radius-full: var(--radius-full);
+/* Light Theme (Warm) */
+[data-theme="light"] {
+  --color-bg: #F8F6F1;
+  --color-bg-secondary: #F0EDE6;
+  --color-bg-tertiary: #E8E5DE;
+  --color-bg-card: #FFFFFF;
+  --color-bg-card-hover: #F7F8FC;
+  --color-bg-input: #F3F4F6;
+  --color-bg-tag: #F3F4F6;
+  --color-bg-overlay: rgba(248, 246, 241, 0.9);
+  --color-text-primary: #1A1A2E;
+  --color-text-secondary: #4A5568;
+  --color-text-tertiary: #9CA3AF;
+  --color-text-link: #2563EB;
+  --color-text-gold: #92400E;
+  --color-brand: #1E3A5F;
+  --color-brand-light: #1E3A5F;
+  --color-gold: #C9A84C;
+  --color-gold-bg: #FEF3C7;
+  --color-gold-light: #FEF3C7;
+  --color-border: #E2E8F0;
+  --color-border-light: #F3F4F6;
+  --color-border-focus: rgba(201, 168, 76, 0.6);
+  --color-success: #059669;
+  --color-success-bg: #D1FAE5;
+  --color-warning: #D97706;
+  --color-warning-bg: #FEF3C7;
+  --color-danger: #DC2626;
+  --color-danger-bg: #FEE2E2;
+  --color-info: #2563EB;
+  --color-info-bg: #DBEAFE;
+  --color-tab-active: #1E3A5F;
+  --color-tab-inactive: #A0AEC0;
+  --color-nav-bg: #1E3A5F;
+  --color-nav-text: #FFFFFF;
+  --color-btn-primary: #1E3A5F;
+  --color-btn-primary-text: #FFFFFF;
+  --color-btn-gold: #C9A84C;
+  --color-btn-gold-text: #1A1A2E;
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
+  --shadow-modal: 0 8px 30px rgba(0, 0, 0, 0.1);
+  --shadow-btn: 0 4px 12px rgba(30, 58, 95, 0.2);
+  --shadow-gold: 0 4px 12px rgba(201, 168, 76, 0.2);
+}
+
+/* Number Energy Colors */
+$num-colors: (
+  1: #D94A4A, 2: #4A90D9, 3: #E8A238,
+  4: #2D8B67, 5: #D4A017, 6: #7B6FA0,
+  7: #4A6FA5, 8: #C9A84C, 9: #B85C3A
+);
+
+@function num-color($n) {
+  @return map-get($num-colors, $n);
+}
 
-/* Typography (unchanged) */
+:root {
+  --num-1: #D94A4A; --num-2: #4A90D9; --num-3: #E8A238;
+  --num-4: #2D8B67; --num-5: #D4A017; --num-6: #7B6FA0;
+  --num-7: #4A6FA5; --num-8: #C9A84C; --num-9: #B85C3A;
+}
+
+/* SCSS Variable Mapping (backward compat — new code: use var(--xxx)) */
+$primary-color: var(--color-brand);
+$success-color: var(--color-success);
+$warning-color: var(--color-warning);
+$danger-color: var(--color-danger);
+$text-primary: var(--color-text-primary);
+$text-secondary: var(--color-text-secondary);
+$bg-color: var(--color-bg);
+$bg-color-secondary: var(--color-bg-secondary);
+$card-bg: var(--color-bg-card);
+$border-color: var(--color-border);
+$gold: var(--color-gold);
 $font-xs: var(--font-xs);
 $font-sm: var(--font-sm);
 $font-base: var(--font-base);
 $font-lg: var(--font-lg);
 $font-xl: var(--font-xl);
+$radius-sm: var(--radius-sm);
+$radius-md: var(--radius-md);
+$radius-lg: var(--radius-lg);
+$radius-full: var(--radius-full);
+$shadow-sm: var(--shadow-sm);
+$shadow-md: var(--shadow-md);
+$shadow-lg: var(--shadow-card);
+
+/* Spacing (unchanged) */
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: var(--spacing-md);
+$spacing-lg: var(--spacing-lg);
+$spacing-xl: var(--spacing-xl);