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

vue3-colorpicker

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",

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:

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');

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>

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>

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
+            <a-tag v-else-if="record.color === 'warning'" color="orangered">{{
-              v-else-if="record.color === 'warning'"
+              record.label
-              color="orangered"
+            }}</a-tag>
-              >{{ 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 }">
+            <template #option="{ record }">
-              <a-tag v-if="data.value === 'primary'" color="arcoblue">{{
+              <a-tag v-if="record.value === 'primary'" color="arcoblue">{{
-                data.value
+                record.value
               }}</a-tag>
-              <a-tag v-else-if="data.value === 'success'" color="green">{{
+              <a-tag v-else-if="record.value === 'success'" color="green">{{
-                data.value
+                record.value
               }}</a-tag>
-              <a-tag v-else-if="data.value === 'warning'" color="orangered">{{
+              <a-tag v-else-if="record.value === 'warning'" color="orangered">{{
-                data.value
+                record.value
               }}</a-tag>
-              <a-tag v-else-if="data.value === 'error'" color="red">{{
+              <a-tag v-else-if="record.value === 'error'" color="red">{{
-                data.value
+                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>

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',