update 调整样式

src/components/dialog/Dialog.vue

@@ -1,6 +1,6 @@
 <template>
     <a-modal
-        :class="[themeType == ThemeType.dark ? 'dialog-dark' : 'dialog-light']"
+        :class="['dialog', themeType]"
         v-model:visible="props.openVis"
         :title="props.title"
         :width="props.width"
@@ -13,9 +13,7 @@
 </template>
 
 <script setup lang="ts">
-    import { onMounted, ref } from 'vue';
-    import { useUserStore } from '/@/store/modules/user.ts';
-    import { ThemeType } from '/@/utils/settings.ts';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
 
     const emit = defineEmits(['close']);
     const props = defineProps({
@@ -29,11 +27,7 @@
             type: String,
         },
     });
-    const store = useUserStore();
-    const themeType = ref('');
-    onMounted(() => {
-        themeType.value = store.getThemeType;
-    });
+    const { themeType } = useTheme();
 
     function handleCancel() {
         emit('close');
@@ -41,7 +35,7 @@
 </script>
 
 <style lang="less">
-    .dialog-dark {
+    .dialog {
         border: 1px solid #0a50a0;
         background-color: #00152b;
 
@@ -51,56 +45,6 @@
             align-items: center;
             width: 100%;
             height: 40px;
-            background: url('../../assets/images/dialog.png') no-repeat;
-            background-size: 100% 100%;
-            color: #ffffff !important;
-            padding-left: 2%;
-            font-size: 18px;
-            font-weight: bold;
-        }
-
-        .ant-modal-header {
-            padding: 0 !important;
-            border-bottom: none;
-        }
-
-        .ant-modal-header,
-        .ant-modal-content {
-            background-color: transparent !important;
-            box-shadow: none;
-        }
-
-        .ant-modal-body {
-            padding: 0 !important;
-        }
-
-        .ant-modal-close-x,
-        .anticon {
-            color: #999999 !important;
-            height: 40px;
-            line-height: 40px;
-        }
-
-        .ant-modal-footer {
-            border-top: none !important;
-        }
-
-        .ant-modal-wrap {
-            //background-color: rgba(0, 0, 0, 0.6);
-        }
-    }
-
-    .dialog-light {
-        border: 1px solid #0a50a0;
-        background-color: #fff;
-
-        .ant-modal-title {
-            position: relative;
-            display: flex;
-            align-items: center;
-            width: 100%;
-            height: 40px;
-            background: url('../../assets/images/dialog.png') no-repeat;
             background-size: 100% 100%;
             color: #ffffff !important;
             padding-left: 2%;