Merge branch 'master' of https://gitee.com/youlaiorg/vue3-element-admin

2025-05-21 22:52:29 +08:00
parent a9a18ee287 2fb2473e99
commit bad9f2cc3a
7 changed files with 176 additions and 90 deletions
--- 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" | "";
 }

 /**
--- 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
--- a/src/styles/element-plus.scss
+++ 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;
+}
--- 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;
-}
--- 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); // 菜单背景色
--- 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("确认删除已选中的数据项?", "警告", {
--- 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>