feat(projects): 增加Icon以及打印功能示例

src/enum/route.ts

@@ -22,6 +22,8 @@ export enum EnumRoutePath {
   'component_swiper' = '/component/swiper',
   'feat' = '/feat',
   'feat_copy' = '/feat/copy',
+  'feat_icon' = '/feat/icon',
+  'feat_print' = '/feat/print',
   'multi-menu' = '/multi-menu',
   'multi-menu_first' = '/multi-menu/first',
   'multi-menu_first_second' = '/multi-menu/first/second',
@@ -56,6 +58,8 @@ export enum EnumRouteTitle {
   'component_swiper' = 'Swiper插件',
   'feat' = '功能示例',
   'feat_copy' = '剪贴板',
+  'feat_icon' = '图标',
+  'feat_print' = '打印',
   'multi-menu' = '多级菜单',
   'multi-menu_first' = '一级菜单',
   'multi-menu_first_second' = '二级菜单',

src/router/modules/feat.ts

@@ -3,8 +3,12 @@ import { EnumRoutePath, EnumRouteTitle } from '@/enum';
 import { BasicLayout } from '@/layouts';
 import { ROUTE_NAME_MAP, setRouterCacheName } from '@/utils';
 import FeatCopy from '@/views/feat/copy/index.vue';
+import FeatIcon from '@/views/feat/icon/index.vue';
+import FeatPrint from '@/views/feat/print/index.vue';
 
 setRouterCacheName(FeatCopy, ROUTE_NAME_MAP.get('feat_copy'));
+setRouterCacheName(FeatIcon, ROUTE_NAME_MAP.get('feat_icon'));
+setRouterCacheName(FeatPrint, ROUTE_NAME_MAP.get('feat_print'));
 
 const FEAT: CustomRoute = {
   name: ROUTE_NAME_MAP.get('feat'),
@@ -26,6 +30,24 @@ const FEAT: CustomRoute = {
         title: EnumRouteTitle.feat_copy,
         fullPage: true
       }
+    },
+    {
+      name: ROUTE_NAME_MAP.get('feat_icon'),
+      path: EnumRoutePath.feat_icon,
+      component: FeatIcon,
+      meta: {
+        requiresAuth: true,
+        title: EnumRouteTitle.feat_icon
+      }
+    },
+    {
+      name: ROUTE_NAME_MAP.get('feat_print'),
+      path: EnumRoutePath.feat_print,
+      component: FeatPrint,
+      meta: {
+        requiresAuth: true,
+        title: EnumRouteTitle.feat_print
+      }
     }
   ]
 };

src/views/feat/icon/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <n-card title="Icon组件示例" class="shadow-sm rounded-16px">
+      <div class="flex justify-around">
+        <template v-for="item in icons" :key="item">
+          <Icon :icon="item" class="text-30px" />
+        </template>
+      </div>
+      <template #footer>
+        <web-site-link label="iconify地址：" link="https://icones.js.org/" class="mt-10px" />
+      </template>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NCard } from 'naive-ui';
+import { Icon } from '@iconify/vue';
+import { WebSiteLink } from '@/components';
+
+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'
+];
+</script>
+<style scoped></style>

src/views/feat/print/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <n-card title="打印" class="shadow-sm rounded-16px">
+      <n-button type="primary" class="mr-10px" @click="printTable">打印表格</n-button>
+      <n-button type="primary" @click="printImage">打印图片</n-button>
+      <template #footer>
+        <github-link label="printJS：" link="https://github.com/crabbly/Print.js" class="mt-10px" />
+      </template>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NCard, NButton } from 'naive-ui';
+import printJS from 'print-js';
+import { GithubLink } from '@/components';
+
+function printTable() {
+  printJS({
+    printable: [
+      { name: 'soybean', wechat: 'honghuangdc', remark: '欢迎来技术交流' },
+      { name: 'soybean', wechat: 'honghuangdc', remark: '欢迎来技术交流' }
+    ],
+    properties: ['name', 'wechat', 'remark'],
+    type: 'json'
+  });
+}
+function printImage() {
+  printJS({
+    printable: [
+      'https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/qq_qrcode.JPG',
+      'https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/qq_qrcode.JPG'
+    ],
+    type: 'image',
+    header: 'Multiple Images',
+    imageStyle: 'width:100%;'
+  });
+}
+</script>
+<style scoped></style>