From 050d81fcdc338d9f9f89f1780210077b320aafd2 Mon Sep 17 00:00:00 2001
From: zimo493 <2081182432@qq.com>
Date: Wed, 21 May 2025 13:40:41 +0800
Subject: [PATCH 1/3] =?UTF-8?q?style:=20:lipstick:=20(WangEditor)=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E6=9A=97=E9=BB=91=E6=A8=A1=E5=BC=8F=E5=B9=B6=E6=9B=BF?=
 =?UTF-8?q?=E6=8D=A2=E8=BE=B9=E6=A1=86=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 variables.scss 中添加 WangEditor 相关的 CSS 变量定义
---
 src/components/WangEditor/index.vue |  6 +++---
 src/styles/variables.scss           | 23 +++++++++++++++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/WangEditor/index.vue b/src/components/WangEditor/index.vue
index fe8f8931..8b704c11 100644
--- a/src/components/WangEditor/index.vue
+++ b/src/components/WangEditor/index.vue
@@ -6,16 +6,16 @@
  * 项目地址：https://gitee.com/youlaiorg/vue3-element-admin
  *
  * 在使用时，请保留此注释，感谢您对开源的支持！
- -->
+-->
 
 <template>
-  <div style="z-index: 999; border: 1px solid #ccc">
+  <div style="z-index: 999; border: 1px solid var(--el-border-color)">
     <!-- 工具栏 -->
     <Toolbar
       :editor="editorRef"
       mode="simple"
       :default-config="toolbarConfig"
-      style="border-bottom: 1px solid #ccc"
+      style="border-bottom: 1px solid var(--el-border-color)"
     />
     <!-- 编辑器 -->
     <Editor
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 7987c80f..d96c9585 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -54,6 +54,29 @@ html.dark {
   --menu-hover: rgb(0 0 0 / 20%);
   --sidebar-logo-background: rgb(0 0 0 / 20%);
   --sidebar-logo-text-color: #fff;
+
+  /** WangEditor Dark */
+  /* Textarea - css vars */
+  --w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
+  --w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
+  --w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
+  --w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
+  --w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
+  --w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
+  --w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
+  --w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
+
+  /* Toolbar - css vars */
+  --w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
+  --w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
+  --w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
+  --w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
+  --w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
+  --w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
+
+  /*  Modal - css vars */
+  --w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
+  --w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
 }
 
 $menu-background: var(--menu-background); // 菜单背景色

From 239401c18f9fdbe68346bf94363cecc4a180bc30 Mon Sep 17 00:00:00 2001
From: zimo493 <2081182432@qq.com>
Date: Wed, 21 May 2025 13:41:58 +0800
Subject: [PATCH 2/3] =?UTF-8?q?style:=20:lipstick:=20(element-plus)?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=20`Element=20Plus`=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 element-plus.scss 文件，统一设置 Element Plus 组件样式
---
 src/styles/element-plus.scss | 47 ++++++++++++++++++++++++++++++++++++
 src/styles/index.scss        |  9 +------
 2 files changed, 48 insertions(+), 8 deletions(-)
 create mode 100644 src/styles/element-plus.scss

diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss
new file mode 100644
index 00000000..79361e5f
--- /dev/null
+++ b/src/styles/element-plus.scss
@@ -0,0 +1,47 @@
+$border: 1px solid var(--el-border-color-light);
+
+/* el-dialog */
+.el-dialog {
+  padding: 0 !important;
+
+  .el-dialog__header {
+    padding: 15px 20px;
+    margin: 0;
+    border-bottom: $border;
+  }
+
+  .el-dialog__body {
+    padding: 20px;
+  }
+
+  .el-dialog__footer {
+    padding: 15px;
+    border-top: $border;
+  }
+}
+
+/** el-drawer */
+.el-drawer {
+  .el-drawer__header {
+    padding: 15px 20px;
+    margin: 0;
+    color: inherit;
+    border-bottom: $border;
+  }
+
+  .el-drawer__body {
+    padding: 20px;
+  }
+
+  .el-drawer__footer {
+    padding: 15px;
+    border-top: $border;
+  }
+}
+
+// 抽屉和对话框底部按钮区域
+.dialog-footer {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 99d7f3b6..22a4d9e8 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,4 +1,5 @@
 @use "./reset";
+@use "./element-plus";
 
 .app-container {
   padding: 15px;
@@ -54,11 +55,3 @@
     margin-top: 16px;
   }
 }
-
-// 抽屉和对话框底部按钮区域
-.dialog-footer {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  padding-top: 16px;
-}

From 5c7d14bd0d312df6fe2185e8d4e5da907c203a8d Mon Sep 17 00:00:00 2001
From: zimo493 <2081182432@qq.com>
Date: Wed, 21 May 2025 13:45:57 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20:sparkles:=20(system/dict)=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=AD=97=E5=85=B8=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 改进字典标签类型选择功能，支持清空选项

BREAKING CHANGE: - 优化字典项页面布局和样式，使其统一
---
 src/api/system/dict.api.ts          |   2 +-
 src/views/system/dict/dict-item.vue | 145 ++++++++++++++++------------
 src/views/system/dict/index.vue     |  34 +++----
 3 files changed, 102 insertions(+), 79 deletions(-)

diff --git a/src/api/system/dict.api.ts b/src/api/system/dict.api.ts
index 2c2d9f86..b148e0a4 100644
--- a/src/api/system/dict.api.ts
+++ b/src/api/system/dict.api.ts
@@ -296,7 +296,7 @@ export interface DictItemForm {
   /**
    * 标签类型
    */
-  tagType?: "success" | "warning" | "info" | "primary" | "danger" | undefined;
+  tagType?: "success" | "warning" | "info" | "primary" | "danger" | "";
 }
 
 /**
diff --git a/src/views/system/dict/dict-item.vue b/src/views/system/dict/dict-item.vue
index dea401e0..43f2eced 100644
--- a/src/views/system/dict/dict-item.vue
+++ b/src/views/system/dict/dict-item.vue
@@ -1,38 +1,37 @@
 <!-- 字典项 -->
 <template>
   <div class="app-container">
-    <div class="search-bar mt-5">
+    <div class="search-container">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-        <el-row :gutter="22">
-          <el-col :span="24" :md="12" :lg="6">
-            <el-form-item label="关键字" prop="keywords">
-              <el-input
-                v-model="queryParams.keywords"
-                placeholder="字典标签/字典值"
-                clearable
-                @keyup.enter="handleQuery"
-              />
-            </el-form-item>
-          </el-col>
+        <el-form-item label="关键字" prop="keywords">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="字典标签/字典值"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
 
-          <div class="search-form-btn-box">
-            <div class="search-form-btn-box-item">
-              <el-form-item>
-                <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
-                <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
-              </el-form-item>
-            </div>
-          </div>
-        </el-row>
+        <el-form-item class="search-buttons">
+          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
+          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
+        </el-form-item>
       </el-form>
     </div>
 
-    <el-card shadow="never">
-      <div class="mb-[10px]">
-        <el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
-        <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
-          删除
-        </el-button>
+    <el-card shadow="never" class="data-table">
+      <div class="data-table__toolbar">
+        <div class="data-table__toolbar--actions">
+          <el-button type="success" icon="plus" @click="handleOpenDialog()">新增</el-button>
+          <el-button
+            type="danger"
+            :disabled="ids.length === 0"
+            icon="delete"
+            @click="handleDelete()"
+          >
+            删除
+          </el-button>
+        </div>
       </div>
 
       <el-table
@@ -91,40 +90,57 @@
     <el-dialog
       v-model="dialog.visible"
       :title="dialog.title"
-      width="820px"
+      width="600px"
       @close="handleCloseDialog"
     >
       <el-form ref="dataFormRef" :model="formData" :rules="computedRules" label-width="100px">
-        <el-card shadow="never">
-          <el-form-item label="字典项标签" prop="label">
-            <el-input v-model="formData.label" placeholder="请输入字典标签" />
-          </el-form-item>
-          <el-form-item label="字典项值" prop="value">
-            <el-input v-model="formData.value" placeholder="请输入字典值" />
-          </el-form-item>
-          <el-form-item label="状态">
-            <el-radio-group v-model="formData.status">
-              <el-radio :value="1">启用</el-radio>
-              <el-radio :value="0">禁用</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="排序">
-            <el-input-number v-model="formData.sort" controls-position="right" />
-          </el-form-item>
-          <el-form-item label="标签类型">
-            <el-tag v-if="formData.tagType" :type="formData.tagType" class="mr-2">
-              {{ formData.label }}
-            </el-tag>
-            <el-radio-group v-model="formData.tagType">
-              <el-radio value="success" border size="small">success</el-radio>
-              <el-radio value="warning" border size="small">warning</el-radio>
-              <el-radio value="info" border size="small">info</el-radio>
-              <el-radio value="primary" border size="small">primary</el-radio>
-              <el-radio value="danger" border size="small">danger</el-radio>
-              <el-radio value="" border size="small">清空</el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </el-card>
+        <el-form-item label="字典项标签" prop="label">
+          <el-input v-model="formData.label" placeholder="请输入字典标签" />
+        </el-form-item>
+        <el-form-item label="字典项值" prop="value">
+          <el-input v-model="formData.value" placeholder="请输入字典值" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-radio-group v-model="formData.status">
+            <el-radio :value="1">启用</el-radio>
+            <el-radio :value="0">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input-number v-model="formData.sort" controls-position="right" />
+        </el-form-item>
+        <el-form-item>
+          <template #label>
+            <div class="flex-y-center">
+              标签类型
+              <el-tooltip>
+                <template #content>回显样式，为空时则显示 '文本'</template>
+                <el-icon class="ml-1 cursor-pointer">
+                  <QuestionFilled />
+                </el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-select
+            v-model="formData.tagType"
+            placeholder="请选择标签类型"
+            clearable
+            @clear="formData.tagType = ''"
+          >
+            <template #label="{ value }">
+              <el-tag v-if="value" :type="value">
+                {{ formData.label ? formData.label : "字典标签" }}
+              </el-tag>
+            </template>
+            <!-- <el-option label="默认文本" value="" /> -->
+            <el-option v-for="type in tagType" :key="type" :label="type" :value="type">
+              <div flex-y-center gap-10px>
+                <el-tag :type="type">{{ formData.label ?? "字典标签" }}</el-tag>
+                <span>{{ type }}</span>
+              </div>
+            </el-option>
+          </el-select>
+        </el-form-item>
       </el-form>
 
       <template #footer>
@@ -138,6 +154,7 @@
 </template>
 
 <script setup lang="ts">
+import type { TagProps } from "element-plus";
 import DictAPI, { DictItemPageQuery, DictItemPageVO, DictItemForm } from "@/api/system/dict.api";
 
 const route = useRoute();
@@ -165,11 +182,15 @@ const dialog = reactive({
 
 const formData = reactive<DictItemForm>({});
 
+// 标签类型
+const tagType: TagProps["type"][] = ["primary", "success", "info", "warning", "danger"];
+
 const computedRules = computed(() => {
   const rules: Partial<Record<string, any>> = {
     value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
     label: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
   };
+
   return rules;
 });
 
@@ -222,6 +243,7 @@ function handleSubmitClick() {
     if (isValid) {
       loading.value = true;
       const id = formData.id;
+
       formData.dictCode = dictCode.value;
       if (id) {
         DictAPI.updateDictItem(dictCode.value, id, formData)
@@ -246,14 +268,15 @@ function handleSubmitClick() {
 
 // 关闭弹窗
 function handleCloseDialog() {
-  dialog.visible = false;
-
   dataFormRef.value.resetFields();
   dataFormRef.value.clearValidate();
 
   formData.id = undefined;
   formData.sort = 1;
   formData.status = 1;
+  formData.tagType = "";
+
+  dialog.visible = false;
 }
 /**
  * 删除字典
@@ -262,8 +285,10 @@ function handleCloseDialog() {
  */
 function handleDelete(id?: number) {
   const itemIds = [id || ids.value].join(",");
+
   if (!itemIds) {
     ElMessage.warning("请勾选删除项");
+
     return;
   }
   ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 4ada8af8..fa2c3844 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -100,27 +100,25 @@
       width="500px"
       @close="handleCloseDialog"
     >
-      <el-form ref="dataFormRef" :model="formData" :rules="computedRules" label-width="100px">
-        <el-card shadow="never">
-          <el-form-item label="字典名称" prop="name">
-            <el-input v-model="formData.name" placeholder="请输入字典名称" />
-          </el-form-item>
+      <el-form ref="dataFormRef" :model="formData" :rules="computedRules" label-width="80px">
+        <el-form-item label="字典名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入字典名称" />
+        </el-form-item>
 
-          <el-form-item label="字典编码" prop="dictCode">
-            <el-input v-model="formData.dictCode" placeholder="请输入字典编码" />
-          </el-form-item>
+        <el-form-item label="字典编码" prop="dictCode">
+          <el-input v-model="formData.dictCode" placeholder="请输入字典编码" />
+        </el-form-item>
 
-          <el-form-item label="状态">
-            <el-radio-group v-model="formData.status">
-              <el-radio :value="1">启用</el-radio>
-              <el-radio :value="0">禁用</el-radio>
-            </el-radio-group>
-          </el-form-item>
+        <el-form-item label="状态">
+          <el-radio-group v-model="formData.status">
+            <el-radio :value="1">启用</el-radio>
+            <el-radio :value="0">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
 
-          <el-form-item label="备注">
-            <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
-          </el-form-item>
-        </el-card>
+        <el-form-item label="备注">
+          <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
       </el-form>
 
       <template #footer>