feat(projects): add page plugin_editor、plugin_icon、plugin_map、plugin_print、plugin_swiper and plugin_video (#430)

src/views/plugin/icon/icons.ts

@@ -0,0 +1,32 @@
+export const icons = [
+  'mdi:emoticon',
+  'mdi:ab-testing',
+  'ph:alarm',
+  'ph:android-logo',
+  'ph:align-bottom',
+  'ph:archive-box-light',
+  'uil:basketball',
+  'uil:brightness-plus',
+  'uil:capture',
+  'mdi:apps-box',
+  'mdi:alert',
+  'mdi:airballoon',
+  'mdi:airplane-edit',
+  'mdi:alpha-f-box-outline',
+  'mdi:arm-flex-outline',
+  'ic:baseline-10mp',
+  'ic:baseline-access-time',
+  'ic:baseline-brightness-4',
+  'ic:baseline-brightness-5',
+  'ic:baseline-credit-card',
+  'ic:baseline-filter-1',
+  'ic:baseline-filter-2',
+  'ic:baseline-filter-3',
+  'ic:baseline-filter-4',
+  'ic:baseline-filter-5',
+  'ic:baseline-filter-6',
+  'ic:baseline-filter-7',
+  'ic:baseline-filter-8',
+  'ic:baseline-filter-9',
+  'ic:baseline-filter-9-plus'
+];

src/views/plugin/icon/index.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { icons } from './icons';
+
+const selectValue = ref('');
+
+const localIcons = ['custom-icon', 'activity', 'at-sign', 'cast', 'chrome', 'copy', 'wind'];
+</script>
+
+<template>
+  <div class="h-full">
+    <NCard title="Icon组件示例" :bordered="false" class="card-wrapper">
+      <div class="grid grid-cols-10">
+        <template v-for="item in icons" :key="item">
+          <div class="mt-5px flex-x-center">
+            <SvgIcon :icon="item" class="text-30px" />
+          </div>
+        </template>
+      </div>
+      <div class="mt-50px">
+        <h1 class="mb-20px text-18px font-500">Icon图标选择器</h1>
+        <icon-select v-model:value="selectValue" :icons="icons" />
+      </div>
+      <template #footer>
+        <WebSiteLink label="iconify地址：" link="https://icones.js.org/" class="mt-10px" />
+      </template>
+    </NCard>
+    <NCard title="自定义图标示例" :bordered="false" class="mt-10px card-wrapper">
+      <div class="pb-12px text-16px">
+        在src/assets/svg-icon文件夹下的svg文件，通过在template里面以 icon-local-{文件名} 直接渲染,
+        其中icon-local为.env文件里的 VITE_ICON_LOCAL_PREFIX
+      </div>
+      <div class="grid grid-cols-10">
+        <div class="mt-5px flex-x-center">
+          <icon-local-activity class="text-40px text-success" />
+        </div>
+        <div class="mt-5px flex-x-center">
+          <icon-local-cast class="text-20px text-error" />
+        </div>
+      </div>
+      <div class="py-12px text-16px">通过SvgIcon组件动态渲染, 菜单通过meta的localIcon属性渲染自定义图标</div>
+      <div class="grid grid-cols-10">
+        <div v-for="(fileName, index) in localIcons" :key="index" class="mt-5px flex-x-center">
+          <SvgIcon :local-icon="fileName" class="text-30px text-primary" />
+        </div>
+      </div>
+    </NCard>
+  </div>
+</template>
+
+<style scoped></style>