From df1624692be9580acd6430188df5908add380be5 Mon Sep 17 00:00:00 2001
From: Megghy <megghy@qq.com>
Date: Mon, 5 May 2025 13:02:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0App.vue=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E4=B8=BB=E9=A2=98=E5=92=8C?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80,=20=E4=BF=AE=E5=A4=8DEllipsis=E5=BC=B9?=
 =?UTF-8?q?=E5=87=BA=E6=A1=86=E8=83=8C=E6=99=AF=E9=A2=9C=E8=89=B2=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整主题色彩设置
---
 src/App.vue | 377 +++++++++++++++++++++++++++++-----------------------
 1 file changed, 207 insertions(+), 170 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f0f1620..e72be13 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,81 +1,115 @@
 <script setup lang="ts">
-  import ManageLayout from '@/views/ManageLayout.vue';
-  import ViewerLayout from '@/views/ViewerLayout.vue';
-  import {
-    dateZhCN,
-    NConfigProvider,
-    NDialogProvider,
-    NElement,
-    NLayoutContent,
-    NLoadingBarProvider,
-    NMessageProvider,
-    NModalProvider,
-    NNotificationProvider,
-    NSpin,
-    zhCN,
-  } from 'naive-ui';
-  import { computed } from 'vue';
-  import { useRoute } from 'vue-router';
-  import TempComponent from './components/TempComponent.vue';
-  import { isDarkMode, theme } from './Utils';
-  import OBSLayout from './views/OBSLayout.vue';
-  import OpenLiveLayout from './views/OpenLiveLayout.vue';
-  import ClientLayout from './client/ClientLayout.vue';
-  import { ThemeType } from './api/api-models';
+import ManageLayout from '@/views/ManageLayout.vue';
+import ViewerLayout from '@/views/ViewerLayout.vue';
+import {
+  dateZhCN,
+  NConfigProvider,
+  NDialogProvider,
+  NElement,
+  NLayoutContent,
+  NLoadingBarProvider,
+  NMessageProvider,
+  NModalProvider,
+  NNotificationProvider,
+  NSpin,
+  zhCN,
+} from 'naive-ui';
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import TempComponent from './components/TempComponent.vue';
+import { isDarkMode, theme } from './Utils';
+import OBSLayout from './views/OBSLayout.vue';
+import OpenLiveLayout from './views/OpenLiveLayout.vue';
+import ClientLayout from './client/ClientLayout.vue';
+import { ThemeType } from './api/api-models';
 
-  const route = useRoute();
-  const themeType = useStorage('Settings.Theme', ThemeType.Auto);
+const route = useRoute();
+const themeType = useStorage('Settings.Theme', ThemeType.Auto);
 
-  const layout = computed(() => {
-    if (route.path.startsWith('/user') || route.name == 'user' || route.path.startsWith('/@')) {
-      document.title = `${route.meta.title} · ${route.params.id} · VTsuru`;
-      return 'viewer';
-    }
-    else if (route.path.startsWith('/manage')) {
-      document.title = `${route.meta.title} · 管理 · VTsuru`;
-      return 'manage';
-    }
-    else if (route.path.startsWith('/open-live')) {
-      document.title = `${route.meta.title} · 开放平台 · VTsuru`;
-      return 'open-live';
-    }
-    else if (route.path.startsWith('/obs')) {
-      document.title = `${route.meta.title} · OBS · VTsuru`;
-      return 'obs';
-    }
-    else if (route.path.startsWith('/client')) {
-      document.title = `${route.meta.title} · 客户端 · VTsuru`;
-      return 'client';
-    }
-    else {
-      document.title = `${route.meta.title} · VTsuru`;
-      return '';
-    }
-  });
-  watchEffect(() => {
-    if (isDarkMode.value) {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  });
+const layout = computed(() => {
+  if (route.path.startsWith('/user') || route.name == 'user' || route.path.startsWith('/@')) {
+    document.title = `${route.meta.title} · ${route.params.id} · VTsuru`;
+    return 'viewer';
+  }
+  else if (route.path.startsWith('/manage')) {
+    document.title = `${route.meta.title} · 管理 · VTsuru`;
+    return 'manage';
+  }
+  else if (route.path.startsWith('/open-live')) {
+    document.title = `${route.meta.title} · 开放平台 · VTsuru`;
+    return 'open-live';
+  }
+  else if (route.path.startsWith('/obs')) {
+    document.title = `${route.meta.title} · OBS · VTsuru`;
+    return 'obs';
+  }
+  else if (route.path.startsWith('/client')) {
+    document.title = `${route.meta.title} · 客户端 · VTsuru`;
+    return 'client';
+  }
+  else {
+    document.title = `${route.meta.title} · VTsuru`;
+    return '';
+  }
+});
+watchEffect(() => {
+  if (isDarkMode.value) {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+});
 
-  const themeOverrides = {
+const themeOverrides = computed(() => {
+  return {
     common: {
-      // primaryColor: '#9ddddc',
+      // 主色调 (中蓝色基调，调整对比度)
+      primaryColor: '#5A7A9E',
+      primaryColorHover: '#7390B1',      // 略微提亮悬浮色
+      primaryColorPressed: '#4F7094',     // 调整按下色，避免在暗色模式下过暗
+      primaryColorSuppl: '#8CA6C1',     // 调整补充色，使其与背景有区分
+
+      // 信息色 (浅蓝色基调，调整对比度)
+      infoColor: '#8CB1C7',              // 稍微加深基础信息色
+      infoColorHover: '#A6C3D6',        // 提亮悬浮色
+      infoColorPressed: '#7DA0B5',       // 调整按下色
+      infoColorSuppl: '#D0DDE8',        // 调整补充色
+
+      // 成功色 (柔和青绿)
+      successColor: '#4DB6AC',
+      successColorHover: '#6BC4B9',      // 调整悬浮色
+      successColorPressed: '#3E9A90',     // 调整按下色
+      successColorSuppl: '#C1E7E2',      // 调整补充色
+
+      // 警告色 (柔和橙色)
+      warningColor: '#FFB74D',
+      warningColorHover: '#FFC870',      // 调整悬浮色
+      warningColorPressed: '#F8A830',     // 调整按下色
+      warningColorSuppl: '#FFE9C7',      // 调整补充色
+
+      // 错误色 (柔和红色)
+      errorColor: '#E57373',
+      errorColorHover: '#EC8F8F',       // 调整悬浮色
+      errorColorPressed: '#D96060',      // 调整按下色
+      errorColorSuppl: '#F5C7C7',       // 调整补充色
+
+
+      // 保持字体设置
       fontFamily:
         'Inter ,"Noto Sans SC",-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"!important',
     },
-    // ...
-};
-  const body = document.body;
-
-  onMounted(() => {
-    if (isDarkMode.value) {
-      document.documentElement.classList.add('dark');
-      console.log('Added dark class to HTML'); // For debugging
+    Tooltip: {
+      color: isDarkMode.value ? '#101014' : '#FFFFFF',
     }
-  });
+  };
+})
+const body = document.body;
+
+onMounted(() => {
+  if (isDarkMode.value) {
+    document.documentElement.classList.add('dark');
+  }
+});
 </script>
 
 <template>
@@ -95,7 +129,10 @@
               <Suspense>
                 <TempComponent>
                   <NLayoutContent>
-                    <NElement style="height: 100vh;">
+                    <NElement
+                      style="height: 100vh;"
+                      :theme-overrides="themeOverrides"
+                    >
                       <ViewerLayout v-if="layout == 'viewer'" />
                       <ManageLayout v-else-if="layout == 'manage'" />
                       <OpenLiveLayout v-else-if="layout == 'open-live'" />
@@ -123,129 +160,129 @@
 </template>
 
 <style>
+:root {
+  font-feature-settings: 'liga' 1, 'calt' 1;
+  --vtsuru-header-height: 50px;
+  --vtsuru-content-padding: 12px;
+}
+
+@supports (font-variation-settings: normal) {
   :root {
-    font-feature-settings: 'liga' 1, 'calt' 1;
-    --vtsuru-header-height: 50px;
-    --vtsuru-content-padding: 12px;
+    font-family: InterVariable, sans-serif;
   }
+}
 
-  @supports (font-variation-settings: normal) {
-    :root {
-      font-family: InterVariable, sans-serif;
-    }
-  }
+/* 进入和离开过渡的样式 */
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
 
-  /* 进入和离开过渡的样式 */
-  .v-enter-from,
-  .v-leave-to {
+/* 离开和进入过程中的样式 */
+.v-enter-active,
+.v-leave-active {
+  /* 添加过渡动画 */
+  transition: opacity 0.5s ease;
+}
+
+/* 进入之后和离开之前的样式 */
+.v-enter-to,
+.v-leave-from {
+  opacity: 1;
+}
+
+.bounce-enter-active {
+  animation: bounce 0.3s;
+}
+
+.bounce-leave-active {
+  animation: bounce 0.3s reverse;
+}
+
+@keyframes bounce {
+  0% {
+    transform: scale(1);
     opacity: 0;
   }
 
-  /* 离开和进入过程中的样式 */
-  .v-enter-active,
-  .v-leave-active {
-    /* 添加过渡动画 */
-    transition: opacity 0.5s ease;
+  60% {
+    transform: scale(1.1);
   }
 
-  /* 进入之后和离开之前的样式 */
-  .v-enter-to,
-  .v-leave-from {
+  100% {
+    transform: scale(1);
     opacity: 1;
   }
+}
 
-  .bounce-enter-active {
-    animation: bounce 0.3s;
-  }
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
 
-  .bounce-leave-active {
-    animation: bounce 0.3s reverse;
-  }
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 
-  @keyframes bounce {
-    0% {
-      transform: scale(1);
-      opacity: 0;
-    }
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.3s ease;
+}
 
-    60% {
-      transform: scale(1.1);
-    }
+.scale-enter-from,
+.scale-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+}
 
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-  }
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.5s ease-out;
+}
 
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 0.3s ease;
-  }
+.slide-enter-to {
+  position: absolute;
+  right: 0;
+}
 
-  .fade-enter-from,
-  .fade-leave-to {
-    opacity: 0;
-  }
+.slide-enter-from {
+  position: absolute;
+  right: -100%;
+}
 
-  .scale-enter-active,
-  .scale-leave-active {
-    transition: all 0.3s ease;
-  }
+.slide-leave-to {
+  position: absolute;
+  left: -100%;
+}
 
-  .scale-enter-from,
-  .scale-leave-to {
-    opacity: 0;
-    transform: scale(0.9);
-  }
+.slide-leave-from {
+  position: absolute;
+  left: 0;
+}
 
-  .slide-enter-active,
-  .slide-leave-active {
-    transition: all 0.5s ease-out;
-  }
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.5s ease-out;
+}
 
-  .slide-enter-to {
-    position: absolute;
-    right: 0;
-  }
+.slide-up-enter-to {
+  position: absolute;
+  top: 0;
+}
 
-  .slide-enter-from {
-    position: absolute;
-    right: -100%;
-  }
+.slide-up-enter-from {
+  position: absolute;
+  top: -100%;
+}
 
-  .slide-leave-to {
-    position: absolute;
-    left: -100%;
-  }
+.slide-up-leave-to {
+  position: absolute;
+  bottom: -100%;
+}
 
-  .slide-leave-from {
-    position: absolute;
-    left: 0;
-  }
-
-  .slide-up-enter-active,
-  .slide-up-leave-active {
-    transition: all 0.5s ease-out;
-  }
-
-  .slide-up-enter-to {
-    position: absolute;
-    top: 0;
-  }
-
-  .slide-up-enter-from {
-    position: absolute;
-    top: -100%;
-  }
-
-  .slide-up-leave-to {
-    position: absolute;
-    bottom: -100%;
-  }
-
-  .slide-up-leave-from {
-    position: absolute;
-    bottom: 0;
-  }
+.slide-up-leave-from {
+  position: absolute;
+  bottom: 0;
+}
 </style>