refactor: 优化字典相关样式，引入颜色选择器优化背景色输入

vue3-colorpicker

refactor: 优化字典相关样式，引入颜色选择器优化背景色输入
vue3-colorpicker
9ed63dbd · 查尔斯-BUG万象集 · ca517020 · 9ed63dbd · 9ed63dbd · 9ed63dbd
7 changed file
--- a/continew-admin-ui/package.json
+++ b/continew-admin-ui/package.json
@@ -49,7 +49,8 @@
    "vue-echarts": "^6.6.1",
    "vue-i18n": "^9.2.2",
    "vue-json-pretty": "^2.2.4",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.2.4",
+    "vue3-colorpicker": "^2.2.2"
  },
  "devDependencies": {
    "@arco-plugins/vite-vue": "^1.4.5",

--- a/continew-admin-ui/pnpm-lock.yaml
+++ b/continew-admin-ui/pnpm-lock.yaml
@@ -70,6 +70,9 @@ dependencies:
  vue-router:
    specifier: ^4.2.4
    version: 4.2.4(vue@3.3.4)
+  vue3-colorpicker:
+    specifier: ^2.2.2
+    version: 2.2.2(@aesoper/normal-utils@0.1.5)(@popperjs/core@2.11.8)(@vueuse/core@9.13.0)(gradient-parser@1.0.2)(lodash-es@4.17.21)(tinycolor2@1.6.0)(vue-types@4.2.1)(vue@3.3.4)

 devDependencies:
  '@arco-plugins/vite-vue':
@@ -212,6 +215,10 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  /@aesoper/normal-utils@0.1.5:
+    resolution: {integrity: sha512-LFF/6y6h5mfwhnJaWqqxuC8zzDaHCG62kMRkd8xhDtq62TQj9dM17A9DhE87W7DhiARJsHLgcina/9P4eNCN1w==}
+    dev: false
+
  /@ampproject/remapping@2.2.0:
    resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==}
    engines: {node: '>=6.0.0'}
@@ -993,6 +1000,10 @@ packages:
      tslib: 2.5.0
    dev: true

+  /@popperjs/core@2.11.8:
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+    dev: false
+
  /@rollup/pluginutils@4.2.1:
    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
    engines: {node: '>= 8.0.0'}
@@ -1005,7 +1016,7 @@ packages:
    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0
+      rollup: ^2.56.3
    peerDependenciesMeta:
      rollup:
        optional: true
@@ -5137,6 +5148,11 @@ packages:
  /graceful-fs@4.2.11:
    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}

+  /gradient-parser@1.0.2:
+    resolution: {integrity: sha512-gR6nY33xC9yJoH4wGLQtZQMXDi6RI3H37ERu7kQCVUzlXjNedpZM7xcA489Opwbq0BSGohtWGsWsntupmxelMg==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
  /grapheme-splitter@1.0.4:
    resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
    dev: true
@@ -5799,7 +5815,6 @@ packages:
  /is-plain-object@5.0.0:
    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
    engines: {node: '>=0.10.0'}
-    dev: true

  /is-png@2.0.0:
    resolution: {integrity: sha512-4KPGizaVGj2LK7xwJIz8o5B2ubu1D/vcQsgOGFEDlpcvgZHto4gBnyd0ig7Ws+67ixmwKoNmu0hYnpo6AaKb5g==}
@@ -6267,6 +6282,10 @@ packages:
      p-locate: 5.0.0
    dev: true

+  /lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
  /lodash.camelcase@4.3.0:
    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
    dev: true
@@ -8074,7 +8093,7 @@ packages:
    engines: {node: '>=14'}
    hasBin: true
    peerDependencies:
-      rollup: 2.x || 3.x
+      rollup: ^2.56.3
    peerDependenciesMeta:
      rollup:
        optional: true
@@ -9020,6 +9039,10 @@ packages:
      globrex: 0.1.2
    dev: true

+  /tinycolor2@1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+    dev: false
+
  /to-buffer@1.1.1:
    resolution: {integrity: sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg==}
    dev: true
@@ -9717,6 +9740,38 @@ packages:
      typescript: 4.9.5
    dev: true

+  /vue-types@4.2.1(vue@3.3.4):
+    resolution: {integrity: sha512-DNQZmJuOvovLUIp0BENRkdnZHbI0V4e2mNvjAZOAXKD56YGvRchtUYOXA/XqTxdv7Ng5SJLZqRKRpAhm5NLaPQ==}
+    engines: {node: '>=12.16.0'}
+    peerDependencies:
+      vue: ^2.0.0 || ^3.0.0
+    dependencies:
+      is-plain-object: 5.0.0
+      vue: 3.3.4
+    dev: false
+
+  /vue3-colorpicker@2.2.2(@aesoper/normal-utils@0.1.5)(@popperjs/core@2.11.8)(@vueuse/core@9.13.0)(gradient-parser@1.0.2)(lodash-es@4.17.21)(tinycolor2@1.6.0)(vue-types@4.2.1)(vue@3.3.4):
+    resolution: {integrity: sha512-gHFMGsw9FkpNLFEwbxeG/yM5eLKK3AxLIjebT0bm4U3LnKpEti+UcP729nwTl+Puq2BzvoqWLaWxXpM0KVsL+A==}
+    peerDependencies:
+      '@aesoper/normal-utils': ^0.1.5
+      '@popperjs/core': ^2.11.8
+      '@vueuse/core': ^10.1.2
+      gradient-parser: ^1.0.2
+      lodash-es: ^4.17.21
+      tinycolor2: ^1.4.2
+      vue: ^3.2.6
+      vue-types: ^4.1.0
+    dependencies:
+      '@aesoper/normal-utils': 0.1.5
+      '@popperjs/core': 2.11.8
+      '@vueuse/core': 9.13.0(vue@3.3.4)
+      gradient-parser: 1.0.2
+      lodash-es: 4.17.21
+      tinycolor2: 1.6.0
+      vue: 3.3.4
+      vue-types: 4.2.1(vue@3.3.4)
+    dev: false
+
  /vue@3.3.4:
    resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
    dependencies:

--- a/continew-admin-ui/src/main.ts
+++ b/continew-admin-ui/src/main.ts
@@ -21,6 +21,9 @@ import hljs from 'highlight.js';
 import json from 'highlight.js/lib/languages/json';
 import java from 'highlight.js/lib/languages/java';

+import Vue3ColorPicker from 'vue3-colorpicker';
+import 'vue3-colorpicker/style.css';
+
 // eslint-disable-next-line import/no-unresolved
 import 'virtual:svg-icons-register';
 import globalComponents from '@/components';
@@ -61,4 +64,5 @@ app.use(globalComponents);
 app.use(directive);
 app.use(VueMarkdownEditor);
 app.use(VMdPreview);
+app.use(Vue3ColorPicker);
 app.mount('#app');
--- a/continew-admin-ui/src/views/dashboard/workplace/components/carousel.vue
+++ b/continew-admin-ui/src/views/dashboard/workplace/components/carousel.vue
@@ -14,5 +14,7 @@
 </template>

 <script lang="ts" setup>
-  const imageSrc = ['https://doc.charles7c.top/qrcode.jpg'];
+  const imageSrc = [
+    `https://doc.charles7c.top/qrcode.jpg?${new Date().getTime()}`,
+  ];
 </script>
--- a/continew-admin-ui/src/views/system/dict/index.vue
+++ b/continew-admin-ui/src/views/system/dict/index.vue
@@ -102,6 +102,7 @@
            }"
            :bordered="false"
            column-resizable
+            class="dictTable"
            size="large"
            @page-change="handlePageChange"
            @page-size-change="handlePageSizeChange"
@@ -120,15 +121,21 @@
                data-index="code"
                ellipsis
                tooltip
+                :width="100"
+              />
+              <a-table-column
+                title="描述"
+                data-index="description"
+                ellipsis
+                tooltip
+                :width="100"
              />
-              <a-table-column title="描述" data-index="description" />
              <a-table-column
                v-if="
                  checkPermission(['system:dict:update', 'system:dict:delete'])
                "
                title="操作"
                align="center"
-                :width="191"
              >
                <template #cell="{ record }">
                  <a-button
@@ -447,7 +454,7 @@
 </script>

 <style scoped lang="less">
-  :deep(.arco-table-td) {
+  :deep(.dictTable .arco-table-td) {
    cursor: pointer;
  }
 </style>
--- a/continew-admin-ui/src/views/system/dict/item.vue
+++ b/continew-admin-ui/src/views/system/dict/item.vue
@@ -9,7 +9,7 @@
            v-permission="['system:dictItem:add']"
            type="primary"
            :disabled="!dictId"
-            :title="!dictId ? '请先点击左侧字典' : ''"
+            :title="!dictId ? '请先点击字典' : ''"
            @click="toAdd"
          >
            <template #icon><icon-plus /></template>新增
@@ -37,6 +37,10 @@
      @page-change="handlePageChange"
      @page-size-change="handlePageSizeChange"
    >
+      <template #empty>
+        <a-empty v-if="!dictId">点击字典查看详情</a-empty>
+        <a-empty v-else>暂无数据</a-empty>
+      </template>
      <template #columns>
        <a-table-column title="字典标签" align="center">
          <template #cell="{ record }">
@@ -46,11 +50,9 @@
            <a-tag v-else-if="record.color === 'success'" color="green">{{
              record.label
            }}</a-tag>
-            <a-tag
-              v-else-if="record.color === 'warning'"
-              color="orangered"
-              >{{ record.label }}</a-tag
-            >
+            <a-tag v-else-if="record.color === 'warning'" color="orangered">{{
+              record.label
+            }}</a-tag>
            <a-tag v-else-if="record.color === 'error'" color="red">{{
              record.label
            }}</a-tag>
@@ -129,20 +131,23 @@
            placeholder="请选择或输入背景颜色"
            allow-clear
          >
-            <template #option="{ data }">
-              <a-tag v-if="data.value === 'primary'" color="arcoblue">{{
-                data.value
+            <template #option="{ record }">
+              <a-tag v-if="record.value === 'primary'" color="arcoblue">{{
+                record.value
              }}</a-tag>
-              <a-tag v-else-if="data.value === 'success'" color="green">{{
-                data.value
+              <a-tag v-else-if="record.value === 'success'" color="green">{{
+                record.value
              }}</a-tag>
-              <a-tag v-else-if="data.value === 'warning'" color="orangered">{{
-                data.value
+              <a-tag v-else-if="record.value === 'warning'" color="orangered">{{
+                record.value
              }}</a-tag>
-              <a-tag v-else-if="data.value === 'error'" color="red">{{
-                data.value
+              <a-tag v-else-if="record.value === 'error'" color="red">{{
+                record.value
              }}</a-tag>
-              <a-tag v-else color="gray">{{ data.value }}</a-tag>
+              <a-tag v-else color="gray">{{ record.value }}</a-tag>
+            </template>
+            <template #suffix>
+              <color-picker v-model:pureColor="form.color" shape="circle" />
            </template>
          </a-auto-complete>
        </a-form-item>
@@ -267,7 +272,7 @@
      id: undefined,
      label: '',
      value: '',
-      color: '',
+      color: '#165DFF',
      sort: 999,
      description: '',
      dictId: dictId.value,
@@ -318,21 +323,6 @@
    });
  };

-  /**
-   * 查询
-   */
-  const handleQuery = () => {
-    getList(dictId.value);
-  };
-
-  /**
-   * 重置
-   */
-  const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
-    handleQuery();
-  };
-
  /**
   * 切换页码
   *
@@ -360,4 +350,8 @@
  };
 </script>

-<style scoped lang="less"></style>
+<style scoped lang="less">
+  :deep(.vc-color-wrap) {
+    margin-right: -3px;
+  }
+</style>
--- a/continew-admin-webapi/src/main/resources/db/changelog/v1.2.0/continew-admin_table.sql
+++ b/continew-admin-webapi/src/main/resources/db/changelog/v1.2.0/continew-admin_table.sql
@@ -19,7 +19,7 @@ CREATE TABLE IF NOT EXISTS `sys_dict_item` (
    `id` bigint(20) UNSIGNED AUTO_INCREMENT COMMENT 'ID',
    `label` varchar(50) NOT NULL COMMENT '字典标签',
    `value` varchar(50) NOT NULL COMMENT '字典值',
-    `color` varchar(20) DEFAULT NULL COMMENT '背景颜色',
+    `color` varchar(30) DEFAULT NULL COMMENT '背景颜色',
    `sort` int(11) UNSIGNED DEFAULT 999 COMMENT '字典项排序',
    `description` varchar(512) DEFAULT NULL COMMENT '描述',
    `dict_id` bigint(20) UNSIGNED NOT NULL COMMENT '字典ID',