style: 优化暗黑主题下组件的样式

src/plugins/loading.ts

@@ -5,7 +5,7 @@ import { localStg } from '@/utils/storage';
 import systemLogo from '@/assets/svg-icon/full-logo.svg?raw';
 
 export function setupLoading() {
-  const themeColor = localStg.get('themeColor') || '#646cff';
+  const themeColor = localStg.get('themeColor') || '#22aae3';
 
   const { r, g, b } = getRgbOfColor(themeColor);
 
@@ -27,14 +27,14 @@ export function setupLoading() {
     .join('\n');
 
   const loading = `
-<div class="fixed-center flex-col" style="${primaryColor}">
+<div class="fixed-center flex-col dark:bg-#121212" style="${primaryColor}">
   ${logoWithClass}
   <div class="w-42px h-42px my-36px">
     <div class="relative h-full animate-spin">
       ${dot}
     </div>
   </div>
-  <h2 class="text-18px font-500 pt-32px w-80% text-center text-#646464">${$t('system.desc')}</h2>
+  <h2 class="text-18px font-500 pt-32px w-80% text-center text-#646464 dark:#d6d6d6">${$t('system.desc')}</h2>
 </div>`;
 
   const app = document.getElementById('app');

src/views/home/modules/card-data.vue

@@ -2,10 +2,13 @@
 import { computed, nextTick, onUnmounted, reactive } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import { useRouter } from 'vue-router';
+import { getColorPalette } from '@sa/utils';
 import { $t } from '@/locales';
+import { useThemeStore } from '@/store/modules/theme';
 import DardRetryChart from './card-retry-chart.vue';
 
 const router = useRouter();
+const themeStore = useThemeStore();
 
 defineOptions({
   name: 'CardData'
@@ -207,7 +210,9 @@ interface GradientBgProps {
 const [DefineGradientBg, GradientBg] = createReusableTemplate<GradientBgProps>();
 
 function getGradientColor(color: CardData['color']) {
-  return `linear-gradient(to bottom right, ${color.start}, ${color.end})`;
+  const start = themeStore.darkMode ? getColorPalette(color.start, 7) : color.start;
+  const end = themeStore.darkMode ? getColorPalette(color.end, 7) : color.end;
+  return `linear-gradient(to bottom right, ${start}, ${end})`;
 }
 </script>
 

src/views/home/modules/pie-retry-chart.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { watch } from 'vue';
+import { getColorPalette } from '@sa/utils';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useEcharts } from '@/hooks/common/echarts';
+import { useThemeStore } from '@/store/modules/theme';
 
 defineOptions({
   name: 'PieRetryChart'
@@ -18,6 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const appStore = useAppStore();
+const themeStore = useThemeStore();
 
 const { domRef, updateOptions } = useEcharts(() => ({
   tooltip: {
@@ -33,14 +36,14 @@ const { domRef, updateOptions } = useEcharts(() => ({
   },
   series: [
     {
-      color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
+      color: [getColor('#5da8ff'), getColor('#8e9dff'), getColor('#fedc69'), getColor('#26deca')],
       name: $t('page.home.retryTab.pie.title'),
       type: 'pie',
       radius: ['45%', '75%'],
       avoidLabelOverlap: false,
       itemStyle: {
         borderRadius: 10,
-        borderColor: '#fff',
+        borderColor: themeStore.darkMode ? '#18181c' : '#fff',
         borderWidth: 1
       },
       label: {
@@ -61,6 +64,10 @@ const { domRef, updateOptions } = useEcharts(() => ({
   ]
 }));
 
+function getColor(color: string) {
+  return themeStore.darkMode ? getColorPalette(color, 7) : color;
+}
+
 const getData = async () => {
   await new Promise(resolve => {
     setTimeout(resolve, 1);
@@ -71,9 +78,16 @@ const getData = async () => {
     return;
   }
 
+  updateLocale();
+};
+
+function updateLocale() {
   updateOptions((opts, factory) => {
     const originOpts = factory();
     opts.series[0].name = originOpts.series[0].name;
+    opts.series[0].color = originOpts.series[0].color;
+    opts.series[0].itemStyle.borderColor = originOpts.series[0].itemStyle.borderColor;
+
     if (props.type === 0) {
       const retryTask = props.modelValue.retryTask;
       opts.series[0].data = [
@@ -103,19 +117,19 @@ const getData = async () => {
     }
     return opts;
   });
-};
+}
 
 watch(
   () => appStore.locale,
   () => {
-    getData();
+    updateLocale();
   }
 );
 
 watch(
-  () => props.modelValue,
+  () => themeStore.darkMode,
   () => {
-    getData();
+    updateLocale();
   }
 );
 
@@ -126,6 +140,13 @@ watch(
   },
   { immediate: true }
 );
+
+watch(
+  () => props.modelValue,
+  () => {
+    getData();
+  }
+);
 </script>
 
 <template>

src/views/home/modules/retry-tab.vue

@@ -228,15 +228,15 @@ watch(
 .retry-table-number {
   padding: 3px 7px;
   background-color: #f4f4f4;
-  color: #555;
+  color: #d6d6d6;
   text-shadow: none !important;
   font-weight: 400;
   border-radius: 4px;
 }
 
 .dark .retry-table-number {
-  background: #000;
-  color: #aaa;
+  background: #2c2c2c;
+  color: #d6d6d6;
 }
 </style>
 
@@ -304,18 +304,18 @@ watch(
 
 .dark {
   .retry-tab-badge {
-    background: #000;
-    color: #aaa;
+    background: #2c2c2c;
+    color: #d6d6d6;
   }
 
   .retry-tab-rank {
     &__list {
       &--index {
-        color: #aaa;
+        color: #d6d6d6;
       }
 
       &--item {
-        border: 1px solid #000;
+        border: 1px solid #646464;
       }
 
       &--item:hover {

src/views/namepase/modules/namespace-search.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useNaiveForm } from '@/hooks/common/form';
@@ -16,6 +17,8 @@ const emit = defineEmits<Emits>();
 
 const appStore = useAppStore();
 
+const title = ref(appStore.isMobile ? $t('common.search') : undefined);
+
 const { formRef, validate, restoreValidation } = useNaiveForm();
 
 const model = defineModel<Api.Namespace.NamespaceSearchParams>('model', { required: true });
@@ -32,7 +35,7 @@ async function search() {
 </script>
 
 <template>
-  <NCard :bordered="false" size="small" class="card-wrapper">
+  <NCard :title="title" :bordered="false" size="small" class="card-wrapper">
     <NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="appStore.isMobile">
       <NGrid responsive="screen" item-responsive>
         <NFormItemGi span="24 s:12 m:6" :label="$t('page.namespace.keyword')" path="userName" class="pr-24px">

src/views/pods/modules/pods-search.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useNaiveForm } from '@/hooks/common/form';
@@ -16,6 +17,8 @@ const emit = defineEmits<Emits>();
 
 const appStore = useAppStore();
 
+const title = ref(appStore.isMobile ? $t('common.search') : undefined);
+
 const { formRef, validate, restoreValidation } = useNaiveForm();
 
 const model = defineModel<Api.Dashboard.DashboardPodsParams>('model', { required: true });
@@ -32,7 +35,7 @@ async function search() {
 </script>
 
 <template>
-  <NCard :bordered="false" size="small" class="card-wrapper">
+  <NCard :title="title" :bordered="false" size="small" class="card-wrapper">
     <NForm ref="formRef" :model="model" label-placement="left" :label-width="60" :show-feedback="appStore.isMobile">
       <NGrid responsive="screen" item-responsive>
         <NFormItemGi span="24 s:12 m:6" :label="$t('page.pods.groupName')" path="groupName" class="pr-24px">