From 05908f0bc0d34de3de9b9b5e83353504c0bca3ee Mon Sep 17 00:00:00 2001
From: K <1175047471@qq.com>
Date: Tue, 19 Mar 2024 17:48:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                           | 12 +-----------
 src/components/Application/src/AppDarkModeToggle.vue |  2 +-
 .../Drawer/src/components/DrawerFooter.vue           |  2 +-
 src/components/Loading/src/Loading.vue               |  2 +-
 src/components/Table/src/BasicTable.vue              |  2 +-
 src/design/index.less                                |  2 +-
 src/design/theme.less                                |  6 +++---
 src/logics/theme/dark.ts                             |  1 -
 src/views/base/login/Login.vue                       |  2 +-
 .../device-manage/device/components/DeviceInfo.vue   |  8 ++++----
 .../device/components/SendCommandModal.vue           |  2 +-
 .../device-manage/group/components/GroupList.vue     |  2 +-
 src/views/product/components/Model.vue               | 10 +++++-----
 13 files changed, 21 insertions(+), 32 deletions(-)
diff --git a/index.html b/index.html
index ed0f37c8..9d57366e 100644
--- a/index.html
+++ b/index.html
@@ -12,19 +12,9 @@
     <link rel="icon" href="/favicon.ico" />
   </head>
   <body>
-    <script>
-      (() => {
-        let htmlRoot = document.getElementById('htmlRoot')
-        let theme = window.localStorage.getItem('__APP__DARK__MODE__')
-        if (htmlRoot && theme) {
-          htmlRoot.setAttribute('data-theme', theme)
-          theme = htmlRoot = null
-        }
-      })()
-    </script>
     <div id="app">
       <style>
-        html[data-theme="dark"] {
+        html.dark {
           .app-loading {
             background-color: #2c344a;
 
diff --git a/src/components/Application/src/AppDarkModeToggle.vue b/src/components/Application/src/AppDarkModeToggle.vue
index e28e378a..150c6561 100644
--- a/src/components/Application/src/AppDarkModeToggle.vue
+++ b/src/components/Application/src/AppDarkModeToggle.vue
@@ -35,7 +35,7 @@ function toggleDarkMode() {
 <style lang="less" scoped>
 @prefix-cls: ~'@{namespace}-dark-switch';
 
-html[data-theme='dark'] {
+html.dark {
   .@{prefix-cls} {
     border: 1px solid rgb(196 188 188);
   }
diff --git a/src/components/Drawer/src/components/DrawerFooter.vue b/src/components/Drawer/src/components/DrawerFooter.vue
index cf9c1465..91b99118 100644
--- a/src/components/Drawer/src/components/DrawerFooter.vue
+++ b/src/components/Drawer/src/components/DrawerFooter.vue
@@ -35,7 +35,7 @@ function handleClose() {
   <div
     v-if="showFooter || $slots.footer"
     class="absolute bottom-0 left-0 w-full bg-white pl-5 pr-3 text-right dark:bg-dark"
-    border="0 t-1 solid gray-200"
+    border="0 t-1 solid gray-200 dark:white dark:opacity-5"
     :style="getStyle"
   >
     <template v-if="!$slots.footer">
diff --git a/src/components/Loading/src/Loading.vue b/src/components/Loading/src/Loading.vue
index 83075b67..6de8ee6d 100644
--- a/src/components/Loading/src/Loading.vue
+++ b/src/components/Loading/src/Loading.vue
@@ -53,7 +53,7 @@ defineProps({
   }
 }
 
-html[data-theme='dark'] {
+html.dark {
   .full-loading:not(.light) {
     background-color: @modal-mask-bg;
   }
diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
index 489b1ece..11f2c13d 100644
--- a/src/components/Table/src/BasicTable.vue
+++ b/src/components/Table/src/BasicTable.vue
@@ -349,7 +349,7 @@ emit('register', tableAction, formActions)
 @border-color: #cecece4d;
 @prefix-cls: ~'@{namespace}-basic-table';
 
-[data-theme='dark'] {
+html.dark {
   .ant-table-tbody > tr:hover.ant-table-row-selected > td,
   .ant-table-tbody > tr.ant-table-row-selected td {
     background-color: #262626;
diff --git a/src/design/index.less b/src/design/index.less
index a8b52ea8..3aeab09d 100644
--- a/src/design/index.less
+++ b/src/design/index.less
@@ -45,7 +45,7 @@ span {
 }
 
 /** 打包后夜间模式样式有问题 在这里覆盖 */
-html[data-theme="dark"] {
+html.dark {
   /** 菜单边框 */
   ul li {
     border: none;
diff --git a/src/design/theme.less b/src/design/theme.less
index 1f981ebd..26e7dfdb 100644
--- a/src/design/theme.less
+++ b/src/design/theme.less
@@ -1,4 +1,4 @@
-html[data-theme="light"] {
+html.light {
   --component-background: #fff;
   --text-color: rgb(0 0 0 0.85);
   --border-color: #fff;
@@ -27,10 +27,10 @@ html[data-theme="light"] {
   }
 }
 
-html[data-theme="dark"] {
+html.dark {
   --component-background: rgb(36 37 37 75%);
   --text-color: rgb(255 255 255 0.85);
-  --border-color: #b6b7b9;
+  --border-color: #424242;
 
   .text-secondary {
     color: #8b949e;
diff --git a/src/logics/theme/dark.ts b/src/logics/theme/dark.ts
index e1531f00..ce258e40 100644
--- a/src/logics/theme/dark.ts
+++ b/src/logics/theme/dark.ts
@@ -4,7 +4,6 @@ import { updateHeaderBgColor, updateSidebarBgColor } from '@/logics/theme/update
 import { useAppStoreWithOut } from '@/store/modules/app'
 
 const isDark = useDark({
-  attribute: 'data-theme',
   valueDark: 'dark',
   valueLight: 'light',
   onChanged(isDark, defaultHandler, mode) {
diff --git a/src/views/base/login/Login.vue b/src/views/base/login/Login.vue
index a05fdc7d..f23e41e4 100644
--- a/src/views/base/login/Login.vue
+++ b/src/views/base/login/Login.vue
@@ -70,7 +70,7 @@ const title = computed(() => globSetting?.title ?? '')
 @countdown-prefix-cls: ~'@{namespace}-countdown-input';
 @dark-bg: #293146;
 
-html[data-theme='dark'] {
+html.dark {
   .@{prefix-cls} {
     background-color: @dark-bg;
 
diff --git a/src/views/device-manage/device/components/DeviceInfo.vue b/src/views/device-manage/device/components/DeviceInfo.vue
index c9f0b86f..da1ed9de 100644
--- a/src/views/device-manage/device/components/DeviceInfo.vue
+++ b/src/views/device-manage/device/components/DeviceInfo.vue
@@ -50,13 +50,13 @@ const { hasPermission } = usePermission()
       </div>
 
       <div v-loading="isLoading" flex="~ gap-12px" mt="12px">
-        <div w="20%" border="0 r-1 solid gray-50">
+        <div w="20%" border="0 r-1 solid gray-50 dark:white dark:opacity-5">
           <div
             v-for="item in modelServiceList" :key="item.id"
             flex="~ items-center justify-between"
-            class="box-border h-60px cursor-pointer pl-10px hover:bg-gray-100"
-            border="0 b-1 solid gray-50"
-            :class="selectedModelId === item.id ? 'bg-gray-100' : ''"
+            class="box-border h-60px cursor-pointer pl-10px hover:bg-gray-100 hover:dark:bg-white hover:dark:bg-opacity-5"
+            border="0 b-1 solid gray-50 dark:white dark:opacity-5"
+            :class="selectedModelId === item.id ? 'bg-gray-100 dark:bg-white dark:bg-opacity-5' : ''"
             @click="setSelectedModelId(item.id)"
           >
             <div>
diff --git a/src/views/device-manage/device/components/SendCommandModal.vue b/src/views/device-manage/device/components/SendCommandModal.vue
index 0b8a3dc4..7c0dc6eb 100644
--- a/src/views/device-manage/device/components/SendCommandModal.vue
+++ b/src/views/device-manage/device/components/SendCommandModal.vue
@@ -176,7 +176,7 @@ async function handleSubmit() {
   >
     <BasicForm @register="registerForm">
       <template #Message="{ model, field }">
-        <div h="200px" border="1px solid gray-200" w-full overflow-hidden rounded>
+        <div h="200px" border="1px solid gray-200 dark:#424242" w-full overflow-hidden rounded>
           <CodeEditor v-model:value="model[field]" />
         </div>
       </template>
diff --git a/src/views/device-manage/group/components/GroupList.vue b/src/views/device-manage/group/components/GroupList.vue
index fd974160..915dedca 100644
--- a/src/views/device-manage/group/components/GroupList.vue
+++ b/src/views/device-manage/group/components/GroupList.vue
@@ -41,7 +41,7 @@ const { hasPermission } = usePermission()
 </script>
 
 <template>
-  <div rounded="6px" px="10px" pt="12px" pb="6px" border-box bg-white min-w="360px">
+  <div rounded="6px" px="10px" pt="12px" pb="6px" border-box bg="white dark:[var(--component-background)]" min-w="360px">
     <div>
       <div flex="~ items-center justify-between" h="35px">
         <a-button v-if="hasPermission('device_group_add')" size="small" @click="openModal()">
diff --git a/src/views/product/components/Model.vue b/src/views/product/components/Model.vue
index d5ab204c..8e5fa2f9 100644
--- a/src/views/product/components/Model.vue
+++ b/src/views/product/components/Model.vue
@@ -48,8 +48,8 @@ const { hasPermission } = usePermission()
     <Alert type="info" show-icon class="py-4px text-13px" message="产品模型用于描述设备具备的能力和特性。通过定义产品模型，在平台构建一款设备的抽象模型，使平台理解该款设备支持的服务、属性、命令等信息，如颜色、开关等。当定义完一款产品模型后，在进行注册设备时，就可以使用在控制台上定义的产品模型。" />
 
     <div flex="~ gap-12px" mt="12px">
-      <div w="20%">
-        <div flex="~ items-center justify-between" border="0 b-1 solid gray-200" class="mb-12px box-border h-40px px-10px">
+      <div w="20%" border="0 r-1 solid gray-50 dark:white dark:opacity-5">
+        <div flex="~ items-center justify-between" border="0 b-1 solid gray-200 dark:white dark:opacity-5" class="mb-12px box-border h-40px px-10px">
           <div font-bold>
             服务列表
           </div>
@@ -59,9 +59,9 @@ const { hasPermission } = usePermission()
         <div
           v-for="item in modelServiceList" :key="item.id"
           flex="~ items-center justify-between"
-          class="box-border h-60px cursor-pointer pl-10px hover:bg-gray-100"
-          border="0 b-1 solid gray-50"
-          :class="selectedModelId === item.id ? 'bg-gray-100' : ''"
+          class="box-border h-60px cursor-pointer pl-10px hover:bg-gray-100 hover:dark:bg-white hover:dark:bg-opacity-5"
+          border="0 b-1 solid gray-50 dark:white dark:opacity-5"
+          :class="selectedModelId === item.id ? 'bg-gray-100 dark:bg-white dark:bg-opacity-5' : ''"
           @click="setSelectedModelId(item.id)"
         >
           <div w-0 flex-1>
