feat: 字典配置前端代码.

orion-ops-ui/src/components/system/dict-key/dict-key-selector.vue

@@ -0,0 +1,60 @@
+<template>
+  <a-select v-model:model-value="value as any"
+            :options="optionData()"
+            :allow-search="true"
+            :loading="loading"
+            :disabled="loading"
+            :filter-option="filterOption"
+            placeholder="请选择配置项" />
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'dict-key-selector'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { useCacheStore } from '@/store';
+  import { SelectOptionData } from '@arco-design/web-vue';
+  import { DictKeyQueryResponse } from '@/api/system/dict-key';
+
+  const props = defineProps({
+    modelValue: Number,
+    loading: Boolean,
+  });
+
+  const emits = defineEmits(['update:modelValue', 'change']);
+
+  const value = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(e) {
+      emits('update:modelValue', e);
+      emits('change', e);
+    }
+  });
+
+  // 选项数据
+  const cacheStore = useCacheStore();
+  const optionData = (): SelectOptionData[] => {
+    return cacheStore.dictKeys.map(s => {
+      return {
+        label: `${s.keyName} - ${s.description || ''}`,
+        value: s.id,
+        origin: s,
+      };
+    });
+  };
+
+  // 搜索
+  const filterOption = (searchValue: string, option: { label: string; }) => {
+    return option.label.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
+  };
+</script>
+
+<style scoped>
+
+</style>

orion-ops-ui/src/components/user/role/user-role-selector.vue

@@ -22,7 +22,8 @@
   import { RoleStatusEnum } from '@/views/user/role/types/enum.types';
 
   const props = defineProps({
-    modelValue: Object,
+    // FIXME 拆出来单选多选
+    modelValue: Array,
     loading: Boolean,
     multiple: Boolean,
   });

orion-ops-ui/src/components/view/card-list/index.vue

@@ -27,7 +27,7 @@
               <!-- 创建 -->
               <div v-permission="addPermission"
                    v-show="!handleVisible.disableAdd"
-                   class="header-icon-wrapper"
+                   class="click-icon-wrapper header-icon-wrapper"
                    title="创建"
                    @click="emits('add')">
                 <icon-plus />
@@ -51,13 +51,13 @@
                          allow-clear
                          @input="e => emits('update:searchValue', e)"
                          @change="e => emits('update:searchValue', e)"
-                         @keydown.enter="emits('search')" />
+                         @keyup.enter="emits('search')" />
               </div>
               <!-- 过滤条件 -->
               <a-popover position="br" trigger="click" content-class="card-filter-wrapper">
                 <div v-if="!handleVisible.disableFilter"
                      ref="filterRef"
-                     class="header-icon-wrapper"
+                     class="click-icon-wrapper header-icon-wrapper"
                      title="选择过滤条件">
                   <a-badge :count="filterCount" :dot-style="{zoom: '.75'}" :offset="[9, -6]">
                     <icon-filter />
@@ -77,14 +77,14 @@
               </a-popover>
               <!-- 搜索 -->
               <div v-if="!handleVisible.disableSearch"
-                   class="header-icon-wrapper"
+                   class="click-icon-wrapper header-icon-wrapper"
                    title="搜索"
                    @click="emits('search')">
                 <icon-search />
               </div>
               <!-- 重置 -->
               <div v-if="!handleVisible.disableReset"
-                   class="header-icon-wrapper"
+                   class="click-icon-wrapper header-icon-wrapper"
                    title="重置"
                    @click="emits('reset')">
                 <icon-refresh />
@@ -358,7 +358,6 @@
   // 重置过滤
   const filterReset = () => {
     emits('reset');
-    triggerMouseEvent(filterRef);
   };
 
   // 搜索
@@ -435,21 +434,8 @@
   }
 
   .header-icon-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     height: 27px;
     padding: 6px;
-    color: var(--color-text-2);
-    background: var(--color-fill-2);
-    border-radius: 2px;
-    cursor: pointer;
-    border: 1px solid transparent;
-    transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
-  }
-
-  .header-icon-wrapper:hover {
-    background: var(--color-fill-3);
   }
 
   .filter-bottom-container {