所有的子应用适配深色

src/components/apps/ItemGroupManage/index.vue

@@ -139,7 +139,7 @@ onMounted(() => {
       </NButton>
     </div>
 
-    <div class=" overflow-auto w-full mt-[20px]  bg-slate-200 rounded-xl" style="height:calc(100% - 65px)">
+    <div class=" overflow-auto w-full mt-[20px]  bg-slate-200 dark:bg-zinc-900 rounded-xl" style="height:calc(100% - 65px)">
       <VueDraggable
         v-model="groups"
         item-key="sort" :animation="300"

src/components/apps/Style/index.vue

@@ -76,7 +76,7 @@ function resetPanelConfig() {
 </script>
 
 <template>
-  <div class="bg-slate-200 rounded-[10px] p-[8px] overflow-auto">
+  <div class="bg-slate-200 dark:bg-zinc-900 rounded-[10px] p-[8px] overflow-auto">
     <NCard style="border-radius:10px" size="small">
       <div class="text-slate-500 mb-[5px] font-bold">
         LOGO

src/components/apps/UploadFileManager/index.vue

@@ -84,7 +84,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="bg-slate-200 p-2 h-full">
+  <div class="bg-slate-200 dark:bg-zinc-900 p-2 h-full">
     <NSpin v-show="loading" size="small" />
     <NAlert type="info" :bordered="false">
       {{ $t('apps.uploadsFileManager.alertText') }}

src/components/apps/UserInfo/index.vue

@@ -4,7 +4,7 @@ import { NButton, NCard, NDivider, NForm, NFormItem, NInput, NSelect, useDialog,
 import { ref } from 'vue'
 import { useAppStore, useAuthStore, usePanelState, useUserStore } from '@/store'
 import { languageOptions } from '@/utils/defaultData'
-import type { Language } from '@/store/modules/app/helper'
+import type { Language, Theme } from '@/store/modules/app/helper'
 import { logout } from '@/api'
 import { RoundCardModal, SvgIcon } from '@/components/common/'
 import { updateInfo, updatePassword } from '@/api/system/user'
@@ -19,15 +19,15 @@ const ms = useMessage()
 const dialog = useDialog()
 
 const languageValue = ref(appStore.language)
-// const themeValue = ref(appStore.theme)
+const themeValue = ref(appStore.theme)
 const nickName = ref(authStore.userInfo?.name || '')
 const isEditNickNameStatus = ref(false)
 const formRef = ref<FormInst | null>(null)
-// const themeOptions: { label: string; key: string; value: Theme }[] = [
-//   { label: t('apps.userInfo.themeStyle.dark'), key: 'dark', value: 'dark' },
-//   { label: t('apps.userInfo.themeStyle.light'), key: 'light', value: 'light' },
-//   { label: t('apps.userInfo.themeStyle.auto'), key: 'Auto', value: 'auto' },
-// ]
+const themeOptions: { label: string; key: string; value: Theme }[] = [
+  { label: t('apps.userInfo.themeStyle.dark'), key: 'dark', value: 'dark' },
+  { label: t('apps.userInfo.themeStyle.light'), key: 'light', value: 'light' },
+  { label: t('apps.userInfo.themeStyle.auto'), key: 'Auto', value: 'auto' },
+]
 const updatePasswordModalState = ref({
   show: false,
   loading: false,
@@ -138,15 +138,15 @@ function handleChangeLanuage(value: Language) {
   location.reload()
 }
 
-// function handleChangeTheme(value: Theme) {
-//   themeValue.value = value
-//   appStore.setTheme(value)
-//   // location.reload()
-// }
+function handleChangeTheme(value: Theme) {
+  themeValue.value = value
+  appStore.setTheme(value)
+  // location.reload()
+}
 </script>
 
 <template>
-  <div class="bg-slate-200 p-2 h-full">
+  <div class="bg-slate-200 dark:bg-zinc-900 p-2 h-full">
     <NCard style="border-radius:10px" size="small">
       <div>
         <div class="text-slate-500 font-bold">
@@ -187,14 +187,14 @@ function handleChangeLanuage(value: Language) {
         </div>
       </div>
 
-      <!-- <div class="mt-[10px]">
+      <div class="mt-[10px]">
         <div class="text-slate-500 font-bold">
           {{ $t('apps.userInfo.theme') }}
         </div>
         <div class="max-w-[200px]">
           <NSelect v-model:value="themeValue" :options="themeOptions" @update-value="handleChangeTheme" />
         </div>
-      </div> -->
+      </div>
 
       <NDivider style="margin: 10px 0;" dashed />
       <div>