Merge pull request #17 from yanbowe/main

feat(projects): 增加Icon以及打印功能示例
2025-11-04 15:53:43 +08:00 · 2021-11-18 13:49:29 +08:00
parent 33770d2356 d5bce26454
commit 2ede7cf85c
6 changed files with 151 additions and 27 deletions
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
    "form-data": "^4.0.0",
    "naive-ui": "^2.20.3",
    "pinia": "^2.0.3",
+    "print-js": "^1.6.0",
    "qs": "^6.10.1",
    "swiper": "^7.2.0",
    "vditor": "^3.8.7",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -40,6 +40,7 @@ specifiers:
  pinia: ^2.0.3
  postinstall-postinstall: ^2.1.0
  prettier: ^2.4.1
+  print-js: ^1.6.0
  qs: ^6.10.1
  rollup-plugin-visualizer: ^5.5.2
  sass: ^1.43.4
@@ -70,6 +71,7 @@ dependencies:
  form-data: 4.0.0
  naive-ui: registry.npmmirror.com/naive-ui/2.20.3_eslint@8.2.0+vue@3.2.20
  pinia: registry.npmmirror.com/pinia/2.0.3_typescript@4.4.4+vue@3.2.20
+  print-js: 1.6.0
  qs: 6.10.1
  swiper: registry.npmmirror.com/swiper/7.2.0
  vditor: registry.npmmirror.com/vditor/3.8.7
@@ -122,6 +124,23 @@ devDependencies:

 packages:

+  /@commitlint/load/14.1.0:
+    resolution: {integrity: sha512-p+HbgjhkqLsnxyjOUdEYHztHCp8n2oLVUJTmRPuP5FXLNevh6Gwmxf+NYC2J0sgD084aV2CFi3qu1W4yHWIknA==}
+    engines: {node: '>=v12'}
+    requiresBuild: true
+    dependencies:
+      '@commitlint/execute-rule': registry.npmmirror.com/@commitlint/execute-rule/14.0.0
+      '@commitlint/resolve-extends': registry.npmmirror.com/@commitlint/resolve-extends/14.1.0
+      '@commitlint/types': registry.npmmirror.com/@commitlint/types/14.0.0
+      '@endemolshinegroup/cosmiconfig-typescript-loader': registry.nlark.com/@endemolshinegroup/cosmiconfig-typescript-loader/3.0.2_3fdcc7bc724bd900a681b5e9457ed94a
+      chalk: registry.nlark.com/chalk/4.1.2
+      cosmiconfig: registry.nlark.com/cosmiconfig/7.0.1
+      lodash: registry.nlark.com/lodash/4.17.21
+      resolve-from: registry.nlark.com/resolve-from/5.0.0
+      typescript: registry.npmmirror.com/typescript/4.4.4
+    dev: true
+    optional: true
+
  /@vue/eslint-config-prettier/6.0.0_5ef9ff6669b626527300390dc84546fb:
    resolution: {integrity: sha1-rVkSswj0rkaEWOAqKwXbC50kZwA=, tarball: '@vue/eslint-config-prettier/download/@vue/eslint-config-prettier-6.0.0.tgz'}
    peerDependencies:
@@ -238,6 +257,14 @@ packages:
    resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=, tarball: fs.realpath/download/fs.realpath-1.0.0.tgz}
    dev: true

+  /fsevents/2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /get-intrinsic/1.1.1:
    resolution: {integrity: sha1-FfWfN2+FXERpY5SPDSTNNje0q8Y=, tarball: get-intrinsic/download/get-intrinsic-1.1.1.tgz}
    dependencies:
@@ -271,6 +298,11 @@ packages:
      which: registry.nlark.com/which/1.3.1
    dev: true

+  /graceful-fs/4.2.8:
+    resolution: {integrity: sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==}
+    requiresBuild: true
+    optional: true
+
  /homedir-polyfill/1.0.3:
    resolution: {integrity: sha1-dDKYzvTlrz4ZQWH7rcwhUdOgWOg=, tarball: homedir-polyfill/download/homedir-polyfill-1.0.3.tgz}
    engines: {node: '>=0.10.0'}
@@ -318,7 +350,7 @@ packages:
  /jsonfile/4.0.0:
    resolution: {integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=, tarball: jsonfile/download/jsonfile-4.0.0.tgz}
    optionalDependencies:
-      graceful-fs: registry.npmmirror.com/graceful-fs/4.2.8
+      graceful-fs: 4.2.8
    dev: true

  /lodash.map/4.6.0:
@@ -376,6 +408,10 @@ packages:
      fast-diff: 1.2.0
    dev: true

+  /print-js/1.6.0:
+    resolution: {integrity: sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==}
+    dev: false
+
  /qs/6.10.1:
    resolution: {integrity: sha1-STFIL6jWR6Wqt5nFJx0hM7mB+2o=, tarball: qs/download/qs-6.10.1.tgz}
    engines: {node: '>=0.6'}
@@ -468,6 +504,12 @@ packages:
      os-tmpdir: 1.0.2
    dev: true

+  /uglify-to-browserify/1.0.2:
+    resolution: {integrity: sha1-bgkk1r2mta/jSeOabWMoUKD4grc=}
+    requiresBuild: true
+    dev: false
+    optional: true
+
  /universalify/0.1.2:
    resolution: {integrity: sha1-tkb2m+OULavOzJ1mOcgNwQXvqmY=, tarball: universalify/download/universalify-0.1.2.tgz}
    engines: {node: '>= 4.0.0'}
@@ -1088,7 +1130,7 @@ packages:
      normalize-path: registry.nlark.com/normalize-path/3.0.0
      readdirp: registry.nlark.com/readdirp/3.6.0
    optionalDependencies:
-      fsevents: registry.npmmirror.com/fsevents/2.3.2
+      fsevents: 2.3.2
    dev: true

  registry.nlark.com/chroma-js/2.1.2:
@@ -1323,7 +1365,7 @@ packages:
      longest: 2.0.1
      word-wrap: 1.2.3
    optionalDependencies:
-      '@commitlint/load': registry.npmmirror.com/@commitlint/load/14.1.0
+      '@commitlint/load': 14.1.0
    dev: true

  registry.nlark.com/cz-conventional-changelog/3.3.0:
@@ -1339,7 +1381,7 @@ packages:
      longest: 2.0.1
      word-wrap: 1.2.3
    optionalDependencies:
-      '@commitlint/load': registry.npmmirror.com/@commitlint/load/14.1.0
+      '@commitlint/load': 14.1.0
    dev: true

  registry.nlark.com/cz-customizable/6.3.0:
@@ -2717,7 +2759,7 @@ packages:
    name: jsonfile
    version: 4.0.0
    optionalDependencies:
-      graceful-fs: registry.npmmirror.com/graceful-fs/4.2.8
+      graceful-fs: 4.2.8

  registry.nlark.com/jsonfile/6.1.0:
    resolution: {integrity: sha1-vFWyY0eTxnnsZAMJTrE2mKbsCq4=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/jsonfile/download/jsonfile-6.1.0.tgz}
@@ -2726,7 +2768,7 @@ packages:
    dependencies:
      universalify: registry.nlark.com/universalify/2.0.0
    optionalDependencies:
-      graceful-fs: registry.npmmirror.com/graceful-fs/4.2.8
+      graceful-fs: 4.2.8
    dev: true

  registry.nlark.com/jsonparse/1.3.1:
@@ -4149,14 +4191,6 @@ packages:
    version: 2.5.0
    dev: false

-  registry.nlark.com/uglify-to-browserify/1.0.2:
-    resolution: {integrity: sha1-bgkk1r2mta/jSeOabWMoUKD4grc=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/uglify-to-browserify/download/uglify-to-browserify-1.0.2.tgz}
-    name: uglify-to-browserify
-    version: 1.0.2
-    requiresBuild: true
-    dev: false
-    optional: true
-
  registry.nlark.com/unbox-primitive/1.0.1:
    resolution: {integrity: sha1-CF4hViXsMWJXTciFmr7nilmxRHE=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/unbox-primitive/download/unbox-primitive-1.0.1.tgz}
    name: unbox-primitive
@@ -5961,16 +5995,6 @@ packages:
      path-exists: registry.nlark.com/path-exists/4.0.0
    dev: true

-  registry.npmmirror.com/fsevents/2.3.2:
-    resolution: {integrity: sha1-ilJveLj99GI7cJ4Ll1xSwkwC/Ro=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/fsevents/download/fsevents-2.3.2.tgz}
-    name: fsevents
-    version: 2.3.2
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
  registry.npmmirror.com/generate-source-map/0.0.5:
    resolution: {integrity: sha1-8SVfMWU8sCMeZxOn3IN1r08zpQk=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/generate-source-map/download/generate-source-map-0.0.5.tgz}
    name: generate-source-map
@@ -6462,7 +6486,7 @@ packages:
    engines: {node: '>=10.0.0'}
    hasBin: true
    optionalDependencies:
-      fsevents: registry.npmmirror.com/fsevents/2.3.2
+      fsevents: 2.3.2
    dev: true

  registry.npmmirror.com/rw/1.3.3:
@@ -6687,7 +6711,7 @@ packages:
      source-map: registry.nlark.com/source-map/0.5.7
      yargs: registry.npmmirror.com/yargs/3.10.0
    optionalDependencies:
-      uglify-to-browserify: registry.nlark.com/uglify-to-browserify/1.0.2
+      uglify-to-browserify: 1.0.2
    dev: false

  registry.npmmirror.com/unidragger/2.3.1:
@@ -6850,7 +6874,7 @@ packages:
      resolve: registry.nlark.com/resolve/1.20.0
      rollup: registry.npmmirror.com/rollup/2.59.0
    optionalDependencies:
-      fsevents: registry.npmmirror.com/fsevents/2.3.2
+      fsevents: 2.3.2
    dev: true

  registry.npmmirror.com/vooks/0.2.10_vue@3.2.20:
--- a/src/enum/route.ts
+++ b/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' = '二级菜单',
--- a/src/router/modules/feat.ts
+++ b/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
+      }
    }
  ]
 };
--- a/src/views/feat/icon/index.vue
+++ b/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>
--- a/src/views/feat/print/index.vue
+++ b/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>