feat: arco-icon组件

src/components.d.ts

@@ -15,6 +15,8 @@ declare module 'vue' {
     MainTransition: typeof import('./components/main-transition/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SelectIcon: typeof import('./components/select-icon/index.vue')['default']
+    SvgAndIcon: typeof import('./components/svg-and-icon/index.vue')['default']
     SvgIcon: typeof import('./components/svg-icon/index.vue')['default']
     VerifyCode: typeof import('./components/verify-code/index.vue')['default']
   }

src/components/select-icon/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <a-modal v-model:visible="visible" width="70vw" :top="'50px'" :align-center="false" :footer="false">
+    <template #title> 请选择图标 </template>
+    <a-input
+      :style="{
+        width: '100%',
+        marginBottom: '14px'
+      }"
+      placeholder="请输入关键词搜索"
+      allow-clear
+      v-model="searchName"
+    >
+      <template #prefix>
+        <icon-search />
+      </template>
+    </a-input>
+    <div class="over-scroll">
+      <div class="icon-grid">
+        <div v-for="item in iconList" :key="item" class="grid-item" @click="onIcon(item)">
+          <component :is="item" :size="30"></component>
+          <span>{{ item }}</span>
+        </div>
+      </div>
+      <div v-if="iconList.length === 0" class="empty-row">
+        <a-empty>
+          <template #image>
+            <icon-exclamation-circle-fill />
+          </template>
+          <span>未查询到您要找的图标</span>
+        </a-empty>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import * as ArcoIcons from "@arco-design/web-vue/es/icon";
+const emit = defineEmits(["select"]);
+
+const searchName = ref<string>("");
+const iconList = computed(() => {
+  if (!ArcoIcons) return [];
+  let icons: string[] = [];
+  for (let key in ArcoIcons) {
+    if (key != "default") {
+      icons.push(key);
+    }
+  }
+  if (searchName.value) {
+    return icons.filter(item => item.toLowerCase().includes(searchName.value.toLowerCase()));
+  }
+  return icons;
+});
+
+const onIcon = (item: string) => {
+  visible.value = false;
+  emit("select", item);
+};
+
+const visible = ref(false);
+
+const open = () => {
+  searchName.value = "";
+  visible.value = true;
+};
+
+defineExpose({
+  open
+});
+</script>
+
+<style lang="scss" scoped>
+.over-scroll {
+  max-height: 70vh;
+  overflow: auto;
+  .icon-grid {
+    overflow: hidden;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 150px); /* 自适应填充列，每列宽为 150px */
+    justify-content: space-evenly; /* 水平均匀分配列之间的空隙 */
+    .grid-item {
+      height: 100px;
+      display: flex;
+      flex-direction: column;
+      row-gap: $margin;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.2s ease-in-out; /* 添加过渡效果 */
+      &:hover {
+        transform: scale(1.3); /* 鼠标移入时放大到 1.3 倍 */
+      }
+    }
+  }
+}
+
+.empty-row {
+  width: 100%;
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/components/svg-and-icon/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <SvgIcon v-if="props.svgIcon" :name="props.svgIcon" :size="25" />
+  <component v-else-if="props.icon" :is="props.icon" :size="25"></component>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  svgIcon: {
+    type: String,
+    default: ""
+  },
+  icon: {
+    type: String,
+    default: ""
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

src/lang/modules/enUS.ts

@@ -28,6 +28,7 @@ export default {
     ["draggable"]: "draggable",
     ["editor"]: "editor",
     ["newbie"]: "newbie",
+    ["icon-component"]: "icon component",
     ["user-center"]: "user center",
     ["markdown"]: "Markdown",
     ["custom-instruction"]: "custom instruction",

src/lang/modules/zhCN.ts

@@ -28,6 +28,7 @@ export default {
     ["draggable"]: "拖拽",
     ["editor"]: "富文本",
     ["newbie"]: "新手指引",
+    ["icon-component"]: "icon组件",
     ["user-center"]: "用户中心",
     ["markdown"]: "Markdown",
     ["custom-instruction"]: "自定义指令",

src/router/route.ts

@@ -388,6 +388,23 @@ export const dynamicRoutes: RouteRecordRaw[] = [
               sort: 5
             }
           },
+          {
+            path: "/common-component/icon-component",
+            name: "icon-component",
+            component: () => import("@/views/common-component/icon-component/icon-component.vue"),
+            meta: {
+              title: "icon-component",
+              hide: false,
+              disable: false,
+              keepAlive: true,
+              affix: false,
+              link: "",
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu",
+              sort: 6
+            }
+          },
           {
             path: "/common-component/user-center",
             name: "user-center",
@@ -402,7 +419,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
               iframe: false,
               roles: ["admin"],
               icon: "icon-menu",
-              sort: 6
+              sort: 7
             }
           }
         ]

src/views/common-component/icon-component/icon-component.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="snow-page">
+    <div class="snow-inner-page">
+      <div class="title">图标选择器</div>
+      <a-input
+        :style="{ width: '400px' }"
+        placeholder="请选择图标"
+        allow-clear
+        v-model="iconName"
+        @focus="onFocus"
+        @clear="onClear"
+      >
+        <template #suffix v-if="iconName">
+          <component :is="iconName"></component>
+        </template>
+      </a-input>
+      <a-divider />
+      <div class="target-title">当前选择的图标：</div>
+      <component v-if="iconName" :is="iconName" size="50"></component>
+      <a-empty v-else />
+      <SelectIcon ref="SelectIconRef" @select="select" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const iconName = ref<string>("");
+const SelectIconRef = ref();
+const onFocus = () => {
+  SelectIconRef.value.open();
+};
+const onClear = () => {
+  console.log("请？");
+  iconName.value = "";
+};
+
+const select = (icon: string) => {
+  iconName.value = icon;
+};
+</script>
+
+<style lang="scss" scoped>
+.title {
+  color: $color-text-1;
+  font-size: $font-size-title-1;
+  margin-bottom: $margin;
+}
+.target-title {
+  margin-bottom: $margin;
+}
+</style>

src/views/common-component/print/print.vue

@@ -2,43 +2,46 @@
   <div class="snow-page">
     <div class="snow-inner-page">
       <a-space direction="vertical">
-        <a-typography id="myTypography" :style="{ marginTop: '-40px' }">
+        <div style="margin-top: -40px">
-          <a-typography-title :heading="2">ArcoDesign</a-typography-title>
+          <a-typography id="myTypography">
-          <a-typography-paragraph>
+            <a-typography-title :heading="2">ArcoDesign</a-typography-title>
-            The ArcoDesign component library defines a set of default particle variables, and a custom theme is to
+            <a-typography-paragraph>
-            <a-typography-text mark>customize</a-typography-text> and
+              The ArcoDesign component library defines a set of default particle variables, and a custom theme is to
-            <a-typography-text underline>overwrite</a-typography-text> this variable list.
+              <a-typography-text mark>customize</a-typography-text> and
-          </a-typography-paragraph>
+              <a-typography-text underline>overwrite</a-typography-text> this variable list.
-          <a-typography-paragraph blockquote>
+            </a-typography-paragraph>
-            A design is a plan or specification for the construction of an object or system or for the implementation of an
+            <a-typography-paragraph blockquote>
-            activity or process, or the result of that plan or specification in the form of a
+              A design is a plan or specification for the construction of an object or system or for the implementation of an
-            <a-typography-text code>prototype</a-typography-text>, <a-typography-text code>product</a-typography-text> or
+              activity or process, or the result of that plan or specification in the form of a
-            <a-typography-text code>process</a-typography-text>. The verb to design expresses the process of developing a design.
+              <a-typography-text code>prototype</a-typography-text>, <a-typography-text code>product</a-typography-text> or
-          </a-typography-paragraph>
+              <a-typography-text code>process</a-typography-text>. The verb to design expresses the process of developing a
-          <a-typography-paragraph mark underline delete>
+              design.
-            A design is a plan or specification for the construction of an object or system or for the implementation of an
+            </a-typography-paragraph>
-            activity or process.
+            <a-typography-paragraph mark underline delete>
-          </a-typography-paragraph>
+              A design is a plan or specification for the construction of an object or system or for the implementation of an
-          <a-typography-paragraph>
+              activity or process.
-            <ul>
+            </a-typography-paragraph>
-              <li>
+            <a-typography-paragraph>
-                Architectural blueprints
+              <ul>
-                <ul>
+                <li>
-                  <li>Architectural blueprints</li>
+                  Architectural blueprints
-                </ul>
+                  <ul>
-              </li>
+                    <li>Architectural blueprints</li>
-              <li>Engineering drawings</li>
+                  </ul>
-              <li>Business processes</li>
+                </li>
-            </ul>
+                <li>Engineering drawings</li>
-          </a-typography-paragraph>
+                <li>Business processes</li>
-          <a-typography-paragraph>
+              </ul>
-            <ol>
+            </a-typography-paragraph>
-              <li>Architectural blueprints</li>
+            <a-typography-paragraph>
-              <li>Engineering drawings</li>
+              <ol>
-              <li>Business processes</li>
+                <li>Architectural blueprints</li>
-            </ol>
+                <li>Engineering drawings</li>
-          </a-typography-paragraph>
+                <li>Business processes</li>
-        </a-typography>
+              </ol>
+            </a-typography-paragraph>
+          </a-typography>
+        </div>
         <a-button type="primary" @click="onPrint">打印</a-button>
         <div>采用开源打印库：<a-link href="https://printjs.crabbly.com/" target="_blank">printjs</a-link></div>
       </a-space>
@@ -50,7 +53,14 @@
 import print from "print-js";
 
 const onPrint = () => {
-  print("myTypography", "html");
+  print({
+    printable: "myTypography", // id节点
+    type: "html", // 打印方式，这里选择html
+    header: "", // 是否定义头部，这里选择不定义
+    scanStyles: false, // 当设置为 false 时，库将不会处理应用于正在打印的 html 的样式，转而使用style自定义样式
+    maxWidth: 9999, // 页面最大宽度
+    targetStyles: ["*"]
+  });
 };
 </script>