新增：新增系统管理/菜单管理（列表、创建、修改、删除、导出）

continew-admin-ui/src/components/date-range-picker/index.vue

@@ -35,37 +35,37 @@
         label: '今天',
         value: (): Date[] => [
           dayjs().startOf('day').toDate(),
-          dayjs().toDate()
-        ]
+          dayjs().toDate(),
+        ],
       },
       {
         label: '昨天',
         value: (): Date[] => [
           dayjs().subtract(1, 'day').startOf('day').toDate(),
-          dayjs().subtract(1, 'day').endOf('day').toDate()
-        ]
+          dayjs().subtract(1, 'day').endOf('day').toDate(),
+        ],
       },
       {
         label: '本周',
         value: (): Date[] => [
           dayjs().startOf('week').add(1, 'day').toDate(),
-          dayjs().toDate()
-        ]
+          dayjs().toDate(),
+        ],
       },
       {
         label: '本月',
         value: (): Date[] => [
           dayjs().startOf('month').toDate(),
-          dayjs().toDate()
-        ]
+          dayjs().toDate(),
+        ],
       },
       {
         label: '本年',
         value: (): Date[] => [
           dayjs().startOf('year').toDate(),
-          dayjs().toDate()
-        ]
-      }
+          dayjs().toDate(),
+        ],
+      },
     ];
   });
 </script>
@@ -76,4 +76,4 @@
   };
 </script>
 
-<style scoped lang="less"></style>
+<style scoped lang="less"></style>

continew-admin-ui/src/components/icon-select/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="icon-body">
+    <a-input-search
+      v-model="iconName"
+      placeholder="请输入图标名称"
+      allow-clear
+      style="position: relative"
+      @clear="filterIcons"
+      @input="filterIcons"
+    />
+    <div class="icon-list">
+      <div
+        v-for="(icon, index) in iconList"
+        :key="index"
+        @click="handleSelectedIcon(icon)"
+      >
+        <svg-icon :icon-class="icon" style="height: 32px; width: 16px" />
+        <span>{{ icon }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import icons from './requireIcons';
+
+  const iconName = ref('');
+  const iconList = ref(icons);
+
+  const emits = defineEmits(['selected']);
+
+  /**
+   * 过滤图标
+   */
+  const filterIcons = () => {
+    iconList.value = icons;
+    if (iconName.value) {
+      iconList.value = icons.filter(
+        (icon) => icon.indexOf(iconName.value) !== -1
+      );
+    }
+  };
+
+  /**
+   * 选中图标
+   *
+   * @param name 图标名称
+   */
+  const handleSelectedIcon = (name: string) => {
+    emits('selected', name);
+    document.body.click();
+  };
+
+  /**
+   * 重置
+   */
+  const reset = () => {
+    iconName.value = '';
+    iconList.value = icons;
+  };
+
+  defineExpose({
+    reset,
+  });
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'IconSelect',
+  };
+</script>
+
+<style scoped lang="less">
+  .icon-body {
+    width: 100%;
+    padding: 10px;
+    .icon-list {
+      height: 200px;
+      width: 420px;
+      overflow-y: scroll;
+      div {
+        height: 30px;
+        line-height: 35px;
+        margin-bottom: -5px;
+        cursor: pointer;
+        width: 33%;
+        float: left;
+      }
+      span {
+        display: inline-block;
+        margin-left: 10px;
+        vertical-align: -0.15em;
+        fill: currentColor;
+        overflow: hidden;
+      }
+    }
+  }
+</style>

continew-admin-ui/src/components/icon-select/requireIcons.ts

@@ -0,0 +1,10 @@
+const modules = import.meta.glob('./../../assets/icons/svg/*.svg');
+const icons = [] as Array<string>;
+
+// eslint-disable-next-line guard-for-in,no-restricted-syntax
+for (const path in modules) {
+  const p = path.split('assets/icons/svg/')[1].split('.svg')[0];
+  icons.push(p);
+}
+
+export default icons;

continew-admin-ui/src/components/index.ts

@@ -13,6 +13,8 @@ import Chart from './chart/index.vue';
 import Breadcrumb from './breadcrumb/index.vue';
 import DateRangePicker from './date-range-picker/index.vue';
 import RightToolbar from './right-toolbar/index.vue';
+import SvgIcon from './svg-icon/index.vue';
+import IconSelect from './icon-select/index.vue';
 import download from './crud';
 
 // Manually introduce ECharts modules to reduce packing size
@@ -40,5 +42,7 @@ export default {
     Vue.component('Breadcrumb', Breadcrumb);
     Vue.component('DateRangePicker', DateRangePicker);
     Vue.component('RightToolbar', RightToolbar);
+    Vue.component('SvgIcon', SvgIcon);
+    Vue.component('IconSelect', IconSelect);
   },
 };

continew-admin-ui/src/components/right-toolbar/index.vue

@@ -25,14 +25,14 @@
    * 切换搜索栏（显示或隐藏）
    */
   const toggleSearch = () => {
-    emits("update:showQuery", !props.showQuery);
+    emits('update:showQuery', !props.showQuery);
   };
 
   /**
    * 刷新
    */
   const handleRefresh = () => {
-    emits("refresh");
+    emits('refresh');
   };
 </script>
 

continew-admin-ui/src/components/svg-icon/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true">
+    <use :xlink:href="iconName" :fill="color" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue';
+
+  const props = defineProps({
+    iconClass: {
+      type: String,
+      required: true,
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const iconName = computed(() => `#icon-${props.iconClass}`);
+  const svgClass = computed(() => {
+    if (props.className) {
+      return `svg-icon ${props.className}`;
+    }
+    return 'svg-icon';
+  });
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'SvgIcon',
+  };
+</script>
+
+<style scoped lang="less">
+  .sub-el-icon,
+  .nav-icon {
+    display: inline-block;
+    font-size: 15px;
+    margin-right: 12px;
+    position: relative;
+  }
+  .svg-icon {
+    width: 1em;
+    height: 1em;
+    position: relative;
+    fill: currentColor;
+    vertical-align: -2px;
+  }
+</style>