Refactor/themes (#311)

* refactor: theme
2025-11-03 13:44:47 +08:00 · 2022-07-26 13:16:44 +08:00
parent 708ce43e00
commit d824c99489
62 changed files with 1100 additions and 1066 deletions
--- a/src/views/components/button/index.vue
+++ b/src/views/components/button/index.vue
@@ -18,13 +18,12 @@ const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
        <span class="font-medium">通过iframe引入按钮页面</span>
      </div>
    </template>
-    <iframe :src="url" frameborder="0" class="iframe" />
+    <iframe :src="url" frameborder="0" class="iframe w-full h-60vh" />
  </el-card>
 </template>

-<style scoped>
+<style lang="scss" scoped>
 .iframe {
-  width: 100%;
-  height: 60vh;
+  filter: invert(0.9) hue-rotate(180deg);
 }
 </style>
--- a/src/views/components/count-to/index.vue
+++ b/src/views/components/count-to/index.vue
@@ -34,14 +34,3 @@ defineOptions({
    </div>
  </el-card>
 </template>
-
-<style lang="scss" scoped>
-.flex {
-  display: flex;
-}
-
-:deep(.el-card) {
-  text-align: center;
-  margin-bottom: 10px;
-}
-</style>
--- a/src/views/editor/index.vue
+++ b/src/views/editor/index.vue
@@ -54,18 +54,20 @@ const handleCreated = editor => {
        </span>
      </div>
    </template>
-    <Toolbar
-      style="border-bottom: 1px solid #ccc"
-      :editor="editorRef"
-      :defaultConfig="toolbarConfig"
-      :mode="mode"
-    />
-    <Editor
-      style="height: 500px; overflow-y: hidden"
-      v-model="valueHtml"
-      :defaultConfig="editorConfig"
-      :mode="mode"
-      @onCreated="handleCreated"
-    />
+    <div class="wangeditor">
+      <Toolbar
+        style="border-bottom: 1px solid #ccc"
+        :editor="editorRef"
+        :defaultConfig="toolbarConfig"
+        :mode="mode"
+      />
+      <Editor
+        style="height: 500px; overflow-y: hidden"
+        v-model="valueHtml"
+        :defaultConfig="editorConfig"
+        :mode="mode"
+        @onCreated="handleCreated"
+      />
+    </div>
  </el-card>
 </template>
--- a/src/views/form-design/index.vue
+++ b/src/views/form-design/index.vue
@@ -20,7 +20,7 @@ onBeforeMount(() => {
 </script>

 <template>
-  <ElDesignForm v-loading="loading" style="height: 100vh" />
+  <ElDesignForm v-loading="loading" style="height: 100vh" class="design-form" />
 </template>

 <style lang="scss" scoped>
--- a/src/views/list/card/components/Card.vue
+++ b/src/views/list/card/components/Card.vue
@@ -6,17 +6,17 @@ import serviceIcon from "/@/assets/svg/service.svg?component";
 import calendarIcon from "/@/assets/svg/calendar.svg?component";
 import userAvatarIcon from "/@/assets/svg/user_avatar.svg?component";

-export interface CardProductType {
+defineOptions({
+  name: "ReCard"
+});
+
+interface CardProductType {
  type: number;
  isSetup: boolean;
  description: string;
  name: string;
 }

-defineOptions({
-  name: "ReCard"
-});
-
 const props = defineProps({
  product: {
    type: Object as PropType<CardProductType>
@@ -46,7 +46,7 @@ const cardLogoClass = computed(() => [

 <template>
  <div :class="cardClass">
-    <div class="list-card-item_detail">
+    <div class="list-card-item_detail !bg-white !dark:bg-dark">
      <el-row justify="space-between">
        <div :class="cardLogoClass">
          <shopIcon v-if="product.type === 1" />
@@ -68,7 +68,7 @@ const cardLogoClass = computed(() => [
            :disabled="!product.isSetup"
            max-height="2"
          >
-            <IconifyIconOffline icon="more-vertical" class="icon-more" />
+            <IconifyIconOffline icon="more-vertical" class="text-size-24px" />
            <template #dropdown>
              <el-dropdown-menu :disabled="!product.isSetup">
                <el-dropdown-item @click="handleClickManage(product)">
@@ -82,15 +82,17 @@ const cardLogoClass = computed(() => [
          </el-dropdown>
        </div>
      </el-row>
-      <p class="list-card-item_detail--name">{{ product.name }}</p>
-      <p class="list-card-item_detail--desc">{{ product.description }}</p>
+      <p class="list-card-item_detail--name color-text_color_primary">
+        {{ product.name }}
+      </p>
+      <p class="list-card-item_detail--desc color-text_color_regular">
+        {{ product.description }}
+      </p>
    </div>
  </div>
 </template>

 <style scoped lang="scss">
-$text-color-disabled: rgba(0, 0, 0, 0.26);
-
 .list-card-item {
  display: flex;
  flex-direction: column;
@@ -98,11 +100,9 @@ $text-color-disabled: rgba(0, 0, 0, 0.26);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
-  color: rgba(0, 0, 0, 0.6);

  &_detail {
    flex: 1;
-    background: #fff;
    padding: 24px 32px;
    min-height: 140px;

@@ -131,16 +131,10 @@ $text-color-disabled: rgba(0, 0, 0, 0.26);
      }
    }

-    .icon-more {
-      font-size: 24px;
-      color: rgba(36, 36, 36, 1);
-    }
-
    &--name {
      margin: 24px 0 8px 0;
      font-size: 16px;
      font-weight: 400;
-      color: rgba(0, 0, 0, 0.9);
    }

    &--desc {
@@ -157,14 +151,9 @@ $text-color-disabled: rgba(0, 0, 0, 0.26);
  }

  &__disabled {
-    color: $text-color-disabled;
-
-    .icon-more {
-      color: $text-color-disabled;
-    }
-
-    .list-card-item_detail--name {
-      color: $text-color-disabled;
+    .list-card-item_detail--name,
+    .list-card-item_detail--desc {
+      color: var(--el-text-color-disabled);
    }

    .list-card-item_detail--operation--tag {
--- a/src/views/list/card/index.vue
+++ b/src/views/list/card/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { getCardList } from "/@/api/list";
 import Card from "./components/Card.vue";
+import { getCardList } from "/@/api/list";
 import { ref, onMounted, nextTick } from "vue";
 import dialogForm from "./components/DialogForm.vue";
 import { ElMessage, ElMessageBox } from "element-plus";
--- a/src/views/result/fail.vue
+++ b/src/views/result/fail.vue
@@ -26,8 +26,7 @@ const { columns } = useColumns();
    <PureDescriptions
      :columns="columns"
      title="您提交的内容有如下错误："
-      style="background: rgb(250, 250, 250)"
-      class="p-6 ml-10 mr-10"
+      class="p-6 ml-10 mr-10 bg-[#fafafa] dark:bg-[#1d1d1d]"
    />
  </el-card>
 </template>
--- a/src/views/result/success.vue
+++ b/src/views/result/success.vue
@@ -41,7 +41,7 @@ const columns = [
        </div>
      </template>
    </el-result>
-    <div style="background: rgb(250, 250, 250)" class="p-6 ml-10 mr-10">
+    <div class="p-6 ml-10 mr-10 bg-[#fafafa] dark:bg-[#1d1d1d]">
      <PureDescriptions title="项目名称" :columns="columns" class="mb-5" />
      <el-steps :active="2">
        <el-step title="创建项目">
--- a/src/views/system/dept/index.vue
+++ b/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 }">
--- a/src/views/system/dict/config.vue
+++ b/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) {
--- a/src/views/system/dict/index.vue
+++ b/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>
--- a/src/views/system/role/index.vue
+++ b/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"
--- a/src/views/system/user/index.vue
+++ b/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"
--- a/src/views/system/user/tree.vue
+++ b/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
--- a/src/views/welcome/components/Bar.vue
+++ b/src/views/welcome/components/Bar.vue
@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import { ref, type Ref } from "vue";
-import { useECharts } from "@pureadmin/utils";
+import { ref, computed, type Ref } from "vue";
+import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
+
+const { isDark } = useDark();
+
+let theme: EchartOptions["theme"] = computed(() => {
+  return isDark.value ? "dark" : "light";
+});

 const barChartRef = ref<HTMLDivElement | null>(null);
-const { setOptions } = useECharts(barChartRef as Ref<HTMLDivElement>);
+const { setOptions } = useECharts(barChartRef as Ref<HTMLDivElement>, {
+  theme
+});

 setOptions(
  {
--- a/src/views/welcome/components/Infinite.vue
+++ b/src/views/welcome/components/Infinite.vue
@@ -64,7 +64,7 @@ let classOption = reactive({
 </script>

 <template>
-  <div class="infinite">
+  <div class="infinite bg-[#fafafa] dark:bg-dark">
    <ul class="top">
      <li>更新日期</li>
      <li>项目名称</li>
@@ -98,7 +98,7 @@ let classOption = reactive({
    font-size: 14px;
    color: #909399;
    font-weight: 400;
-    background: #fafafa;
+    // background: #fafafa;

    li {
      width: 34%;
--- a/src/views/welcome/components/Line.vue
+++ b/src/views/welcome/components/Line.vue
@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import { ref, type Ref } from "vue";
-import { useECharts } from "@pureadmin/utils";
+import { ref, computed, type Ref } from "vue";
+import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
+
+const { isDark } = useDark();
+
+let theme: EchartOptions["theme"] = computed(() => {
+  return isDark.value ? "dark" : "light";
+});

 const lineChartRef = ref<HTMLDivElement | null>(null);
-const { setOptions } = useECharts(lineChartRef as Ref<HTMLDivElement>);
+const { setOptions } = useECharts(lineChartRef as Ref<HTMLDivElement>, {
+  theme
+});

 setOptions(
  {
--- a/src/views/welcome/components/Pie.vue
+++ b/src/views/welcome/components/Pie.vue
@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import { ref, type Ref } from "vue";
-import { useECharts } from "@pureadmin/utils";
+import { ref, computed, type Ref } from "vue";
+import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
+
+const { isDark } = useDark();
+
+let theme: EchartOptions["theme"] = computed(() => {
+  return isDark.value ? "dark" : "light";
+});

 const pieChartRef = ref<HTMLDivElement | null>(null);
-const { setOptions } = useECharts(pieChartRef as Ref<HTMLDivElement>);
+const { setOptions } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
+  theme
+});

 setOptions(
  {
--- a/src/views/welcome/index.vue
+++ b/src/views/welcome/index.vue
@@ -35,7 +35,7 @@ const openDepot = (): void => {

 <template>
  <div class="welcome">
-    <el-card class="top-content">
+    <el-card class="top-content dark:border-none">
      <div class="left-mark">
        <img :src="avatars" title="直达仓库地址" @click="openDepot" />
        <span>{{ greetings }}</span>
@@ -233,7 +233,7 @@ const openDepot = (): void => {
    justify-content: space-between;
    align-items: center;
    height: 60px;
-    background: #fff;
+    background: var(--el-bg-color);

    .left-mark {
      display: flex;