Refactor/themes (#311)

* refactor: theme

src/views/system/dept/index.vue

@@ -60,7 +60,7 @@ onMounted(() => {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="bg-white w-99/100 pl-8 pt-4"
+      class="bg-white dark:bg-dark w-99/100 pl-8 pt-4"
     >
       <el-form-item label="部门名称：" prop="user">
         <el-input v-model="form.user" placeholder="请输入部门名称" clearable />
@@ -110,7 +110,10 @@ onMounted(() => {
           :data="dataList"
           :columns="columns"
           :checkList="checkList"
-          :header-cell-style="{ background: '#fafafa', color: '#606266' }"
+          :header-cell-style="{
+            background: 'var(--el-table-row-hover-bg-color)',
+            color: 'var(--el-text-color-primary)'
+          }"
           @selection-change="handleSelectionChange"
         >
           <template #operation="{ row }">

src/views/system/dict/config.vue

@@ -82,12 +82,14 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
   <div class="config">
     <el-drawer
       :model-value="drawer"
-      :title="drawTitle"
       :direction="direction"
       :before-close="handleClose"
       destroy-on-close
       size="680px"
     >
+      <template #header>
+        <span class="color-black dark:color-white">{{ drawTitle }}</span>
+      </template>
       <el-divider />
       <!-- 列表 -->
       <div class="p-2">
@@ -162,10 +164,8 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
   margin-bottom: 0;
 }
 
-:deep(.el-drawer__header span) {
-  color: rgba(0, 0, 0, 0.85);
-  font-weight: 500;
-  font-size: 16px;
+:deep(.el-drawer__body) {
+  padding: 0;
 }
 
 :deep(.el-divider--horizontal) {

src/views/system/dict/index.vue

@@ -222,13 +222,19 @@ function onHide() {
 <template>
   <div>
     <!-- 工具栏 -->
-    <vxe-toolbar>
+    <vxe-toolbar class="dark:bg-dark">
       <template #buttons>
-        <vxe-input
-          v-model="dictData.filterName"
-          :placeholder="t('buttons.hssearch')"
-          @keyup="searchEvent"
-        />
+        <div class="ml-20px">
+          <label>字典名称：</label>
+          <el-input
+            class="!w-200px"
+            v-model="dictData.filterName"
+            :placeholder="t('buttons.hssearch')"
+            @keyup.prevent="searchEvent"
+            @input="searchEvent"
+            clearable
+          />
+        </div>
       </template>
       <template #tools>
         <el-button-group>

src/views/system/role/index.vue

@@ -77,7 +77,7 @@ onMounted(() => {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="bg-white w-99/100 pl-8 pt-4"
+      class="bg-white dark:bg-dark w-99/100 pl-8 pt-4"
     >
       <el-form-item label="角色名称：" prop="name">
         <el-input v-model="form.name" placeholder="请输入角色名称" clearable />
@@ -129,7 +129,10 @@ onMounted(() => {
           :checkList="checkList"
           :pagination="pagination"
           :paginationSmall="size === 'small' ? true : false"
-          :header-cell-style="{ background: '#fafafa', color: '#606266' }"
+          :header-cell-style="{
+            background: 'var(--el-table-row-hover-bg-color)',
+            color: 'var(--el-text-color-primary)'
+          }"
           @selection-change="handleSelectionChange"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"

src/views/system/user/index.vue

@@ -79,7 +79,7 @@ onMounted(() => {
         ref="formRef"
         :inline="true"
         :model="form"
-        class="bg-white w-99/100 pl-8 pt-4"
+        class="bg-white dark:bg-dark w-99/100 pl-8 pt-4"
       >
         <el-form-item label="用户名称：" prop="username">
           <el-input
@@ -141,7 +141,10 @@ onMounted(() => {
             :checkList="checkList"
             :pagination="pagination"
             :paginationSmall="size === 'small' ? true : false"
-            :header-cell-style="{ background: '#fafafa', color: '#606266' }"
+            :header-cell-style="{
+              background: 'var(--el-table-row-hover-bg-color)',
+              color: 'var(--el-text-color-primary)'
+            }"
             @selection-change="handleSelectionChange"
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"

src/views/system/user/tree.vue

@@ -70,7 +70,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="max-w-260px h-full min-h-780px bg-white">
+  <div class="max-w-260px h-full min-h-780px bg-white dark:bg-dark">
     <div class="flex items-center h-34px">
       <p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
         部门列表
@@ -101,7 +101,7 @@ onMounted(async () => {
           <el-dropdown-menu>
             <el-dropdown-item>
               <el-button
-                class="reset-margin !h-20px !text-gray-500"
+                class="reset-margin !h-20px !text-gray-500 !dark:hover:color-primary"
                 link
                 type="primary"
                 :icon="useRenderIcon('expand')"
@@ -112,7 +112,7 @@ onMounted(async () => {
             </el-dropdown-item>
             <el-dropdown-item>
               <el-button
-                class="reset-margin !h-20px !text-gray-500"
+                class="reset-margin !h-20px !text-gray-500 !dark:hover:color-primary"
                 link
                 type="primary"
                 :icon="useRenderIcon('unExpand')"
@@ -123,7 +123,7 @@ onMounted(async () => {
             </el-dropdown-item>
             <el-dropdown-item>
               <el-button
-                class="reset-margin !h-20px !text-gray-500"
+                class="reset-margin !h-20px !text-gray-500 !dark:hover:color-primary"
                 link
                 type="primary"
                 :icon="useRenderIcon('reset')"
@@ -159,7 +159,8 @@ onMounted(async () => {
             'select-none',
             searchValue.trim().length > 0 &&
               node.label.includes(searchValue) &&
-              'text-red-500'
+              'text-red-500',
+            highlightMap[node.id]?.highlight ? 'dark:color-primary' : ''
           ]"
           :style="{
             background: highlightMap[node.id]?.highlight