From e7402da94041dfe26968c169418edf15362ba63c Mon Sep 17 00:00:00 2001
From: "WANGFAN\\wangf" <15871339963@163.com>
Date: Thu, 9 Jan 2025 20:34:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9D=A1=E5=BD=A2=E7=A0=81=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts                     |  27 ++--
 src/components/draw-barcode/index.vue   |  32 ++++
 src/layout/layout-defaults/index.vue    |   1 -
 src/router/index.ts                     | 196 ++++++++++++------------
 src/style/global-scrollbar.scss         |   5 +
 src/views/component/barcode/barcode.vue | 106 +++++++++----
 6 files changed, 229 insertions(+), 138 deletions(-)
 create mode 100644 src/components/draw-barcode/index.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index 0b4f673..f0bca50 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -5,19 +5,20 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
-declare module 'vue' {
+declare module "vue" {
   export interface GlobalComponents {
-    CodeView: typeof import('./components/code-view/index.vue')['default']
-    ExternalLinkPage: typeof import('./components/external-link-page/index.vue')['default']
-    FillPage: typeof import('./components/fill-page/index.vue')['default']
-    InternalLinkPage: typeof import('./components/internal-link-page/index.vue')['default']
-    LangProvider: typeof import('./components/lang-provider/index.vue')['default']
-    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']
+    CodeView: (typeof import("./components/code-view/index.vue"))["default"];
+    DrawBarcode: (typeof import("./components/draw-barcode/index.vue"))["default"];
+    ExternalLinkPage: (typeof import("./components/external-link-page/index.vue"))["default"];
+    FillPage: (typeof import("./components/fill-page/index.vue"))["default"];
+    InternalLinkPage: (typeof import("./components/internal-link-page/index.vue"))["default"];
+    LangProvider: (typeof import("./components/lang-provider/index.vue"))["default"];
+    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"];
   }
 }
diff --git a/src/components/draw-barcode/index.vue b/src/components/draw-barcode/index.vue
new file mode 100644
index 0000000..714f6e4
--- /dev/null
+++ b/src/components/draw-barcode/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <component :is="tag" ref="nodes" />
+</template>
+
+<script setup lang="ts">
+import JsBarcode from "jsbarcode";
+const props = defineProps({
+  // 节点类型，可接收svg、img、canvas
+  tag: {
+    type: String,
+    default: "svg"
+  },
+  // 条形码具体内容
+  text: {
+    type: String,
+    default: ""
+  },
+  // 条形码配置
+  // https://github.com/lindell/JsBarcode/wiki/Options
+  options: {
+    type: Object,
+    default() {
+      return {};
+    }
+  }
+});
+
+const nodes = ref();
+onMounted(() => {
+  JsBarcode(nodes.value, props.text, props.options);
+});
+</script>
diff --git a/src/layout/layout-defaults/index.vue b/src/layout/layout-defaults/index.vue
index 2be29f2..a18ef05 100644
--- a/src/layout/layout-defaults/index.vue
+++ b/src/layout/layout-defaults/index.vue
@@ -26,7 +26,6 @@ let { isFooter } = storeToRefs(themeStore);
 <style lang="scss" scoped>
 .layout {
   height: 100vh;
-  border: 1px solid red;
 }
 .layout-right {
   display: grid;
diff --git a/src/router/index.ts b/src/router/index.ts
index bb47bcd..42ea782 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,98 +1,98 @@
-import NProgress from "@/config/nprogress";
-import pinia from "@/store/index";
-import { createRouter, createWebHashHistory } from "vue-router";
-import { staticRoutes, notFoundAndNoPower } from "@/router/route.ts";
-import { currentlyRoute } from "@/router/route-output";
-import { storeToRefs } from "pinia";
-import { useUserInfoStore } from "@/store/modules/user-info";
-import { useRoutesConfigStore } from "@/store/modules/route-config";
-import { useRoutingMethod } from "@/hooks/useRoutingMethod";
-import { loadingPage } from "@/utils/loading-page";
-
-/**
- * 创建vue的路由示例
- * @method createRouter(options: RouterOptions): Router
- * @link 参考：https://next.router.vuejs.org/zh/api/#createrouter
- */
-const router = createRouter({
-  history: createWebHashHistory(),
-  /**
-   * 设置静态路由，其它的路由通过addRoute动态添加
-   * 1、staticRoutes登录页
-   * 2、notFoundAndNoPower 添加默认 404、401界面，防止提示 No match found for location with path 'xxx'
-   * 2、后端控制路由中也需要添加 notFoundAndNoPower 404、401界面
-   * 静态添加 notFoundAndNoPower 404、401界面将全屏显示
-   * 如果要 notFoundAndNoPower 在layout容器展示，则需要移除静态添加并将其添加到缓存路由树
-   */
-  routes: [...staticRoutes, ...notFoundAndNoPower]
-});
-
-/**
- * 路由加载前需要判断用户是否登录
- * 1、去登录页，无token，放行
- * 2、没有token，直接重定向到登录页
- * 3、去登录页，有token，直接重定向到home页
- * 4、去非登录页，有token，校验是否动态添加过路由，添加过则放行，未添加则执行路由初始化
- * 注意：
- * 全局routeTree不能持久化缓存
- * 页面刷新会导致addRoute动态添加的路由失效，需要重新初始化路由
- */
-router.beforeEach(async (to, from, next) => {
-  NProgress.start(); // 开启进度条
-  const store = useUserInfoStore(pinia);
-  const { token } = storeToRefs(store);
-  console.log("去", to, "来自", from);
-  // next()内部加了path等于跳转指定路由会再次触发router.beforeEach，内部无参数等于放行，不会触发router.beforeEach
-  if (to.path === "/login" && !token.value) {
-    // 1、去登录页，无token，放行
-    next();
-  } else if (!token.value) {
-    // 2、没有token，直接重定向到登录页
-    next("/login");
-  } else if (to.path === "/login" && token.value) {
-    // 3、去登录页，有token，直接重定向到home页
-    next("/home");
-    // 项目内的跳转，处理跳转路由高亮
-    currentlyRoute(to.name as string);
-  } else {
-    // 4、去非登录页，有token，校验是否动态添加过路由，添加过则放行，未添加则执行路由初始化
-    const routeStore = useRoutesConfigStore(pinia);
-    const { routeTree } = storeToRefs(routeStore);
-
-    // 获取外链路由的处理函数
-    // 所有的路由正常放行，只不过额外判断是否是外链，如果是，则打开新窗口跳转外链
-    // 外链的页面依旧正常打开，只不过不会参与缓存与tabs显示，符合路由跳转的直觉
-    const { openExternalLinks } = useRoutingMethod();
-
-    // 如果缓存的路由是0，则说明未动态添加路由，先添加再跳转
-    // 解决刷新页面404的问题
-    if (routeTree.value.length == 0) {
-      loadingPage.start();
-      await routeStore.initSetRouter();
-      // 处理外链跳转
-      openExternalLinks(to);
-      // 处理完重新跳转
-      next({ path: to.path, query: to.query });
-    } else {
-      // 处理外链跳转
-      openExternalLinks(to);
-      // 动态路由添加过走这里，直接放行
-      next();
-      // 项目内的跳转，处理跳转路由高亮
-      currentlyRoute(to.name as string);
-    }
-  }
-});
-
-// 路由跳转错误
-router.onError((error: any) => {
-  NProgress.done();
-  console.warn("路由错误", error.message);
-});
-
-// 路由加载后
-router.afterEach(() => {
-  NProgress.done();
-});
-
-export default router;
+import NProgress from "@/config/nprogress";
+import pinia from "@/store/index";
+import { createRouter, createWebHashHistory } from "vue-router";
+import { staticRoutes, notFoundAndNoPower } from "@/router/route.ts";
+import { currentlyRoute } from "@/router/route-output";
+import { storeToRefs } from "pinia";
+import { useUserInfoStore } from "@/store/modules/user-info";
+import { useRoutesConfigStore } from "@/store/modules/route-config";
+import { useRoutingMethod } from "@/hooks/useRoutingMethod";
+import { loadingPage } from "@/utils/loading-page";
+
+/**
+ * 创建vue的路由示例
+ * @method createRouter(options: RouterOptions): Router
+ * @link 参考：https://next.router.vuejs.org/zh/api/#createrouter
+ */
+const router = createRouter({
+  history: createWebHashHistory(),
+  /**
+   * 设置静态路由，其它的路由通过addRoute动态添加
+   * 1、staticRoutes登录页
+   * 2、notFoundAndNoPower 添加默认 404、401界面，防止提示 No match found for location with path 'xxx'
+   * 2、后端控制路由中也需要添加 notFoundAndNoPower 404、401界面
+   * 静态添加 notFoundAndNoPower 404、401界面将全屏显示
+   * 如果要 notFoundAndNoPower 在layout容器展示，则需要移除静态添加并将其添加到缓存路由树
+   */
+  routes: [...staticRoutes, ...notFoundAndNoPower]
+});
+
+/**
+ * 路由加载前需要判断用户是否登录
+ * 1、去登录页，无token，放行
+ * 2、没有token，直接重定向到登录页
+ * 3、去登录页，有token，直接重定向到home页
+ * 4、去非登录页，有token，校验是否动态添加过路由，添加过则放行，未添加则执行路由初始化
+ * 注意：
+ * 全局routeTree不能持久化缓存
+ * 页面刷新会导致addRoute动态添加的路由失效，需要重新初始化路由
+ */
+router.beforeEach(async (to, _, next) => {
+  NProgress.start(); // 开启进度条
+  const store = useUserInfoStore(pinia);
+  const { token } = storeToRefs(store);
+  // console.log("去", to, "来自", from);
+  // next()内部加了path等于跳转指定路由会再次触发router.beforeEach，内部无参数等于放行，不会触发router.beforeEach
+  if (to.path === "/login" && !token.value) {
+    // 1、去登录页，无token，放行
+    next();
+  } else if (!token.value) {
+    // 2、没有token，直接重定向到登录页
+    next("/login");
+  } else if (to.path === "/login" && token.value) {
+    // 3、去登录页，有token，直接重定向到home页
+    next("/home");
+    // 项目内的跳转，处理跳转路由高亮
+    currentlyRoute(to.name as string);
+  } else {
+    // 4、去非登录页，有token，校验是否动态添加过路由，添加过则放行，未添加则执行路由初始化
+    const routeStore = useRoutesConfigStore(pinia);
+    const { routeTree } = storeToRefs(routeStore);
+
+    // 获取外链路由的处理函数
+    // 所有的路由正常放行，只不过额外判断是否是外链，如果是，则打开新窗口跳转外链
+    // 外链的页面依旧正常打开，只不过不会参与缓存与tabs显示，符合路由跳转的直觉
+    const { openExternalLinks } = useRoutingMethod();
+
+    // 如果缓存的路由是0，则说明未动态添加路由，先添加再跳转
+    // 解决刷新页面404的问题
+    if (routeTree.value.length == 0) {
+      loadingPage.start();
+      await routeStore.initSetRouter();
+      // 处理外链跳转
+      openExternalLinks(to);
+      // 处理完重新跳转
+      next({ path: to.path, query: to.query });
+    } else {
+      // 处理外链跳转
+      openExternalLinks(to);
+      // 动态路由添加过走这里，直接放行
+      next();
+      // 项目内的跳转，处理跳转路由高亮
+      currentlyRoute(to.name as string);
+    }
+  }
+});
+
+// 路由跳转错误
+router.onError((error: any) => {
+  NProgress.done();
+  console.warn("路由错误", error.message);
+});
+
+// 路由加载后
+router.afterEach(() => {
+  NProgress.done();
+});
+
+export default router;
diff --git a/src/style/global-scrollbar.scss b/src/style/global-scrollbar.scss
index bbf5d60..5db6c6a 100644
--- a/src/style/global-scrollbar.scss
+++ b/src/style/global-scrollbar.scss
@@ -1,12 +1,14 @@
 // 设置滚动条的样式
 ::-webkit-scrollbar {
   width: 6px;
+  height: 6px;
 }
 
 // 基于 WebKit 内核的浏览器
 // 设置滚动条的样式，宽、圆角、背景颜色
 ::-webkit-scrollbar-thumb {
   width: 6px;
+  height: 6px;
   background-color: $color-border-3;
   border-radius: 6px;
 }
@@ -14,16 +16,19 @@
 // 设置滚动条hover样式，宽、圆角、背景颜色
 ::-webkit-scrollbar-thumb:hover {
   width: 6px;
+  height: 6px;
   background-color: $color-border-4;
 }
 
 // 设置IE/Edge浏览器滚动条的样式，与webkit内核浏览器样式相同
 ::-ms-scrollbar-thumb {
   width: 6px;
+  height: 6px;
   background-color: $color-border-3;
   border-radius: 6px;
 }
 ::-ms-scrollbar-thumb:hover {
   width: 6px;
+  height: 6px;
   background-color: $color-border-4;
 }
diff --git a/src/views/component/barcode/barcode.vue b/src/views/component/barcode/barcode.vue
index bd4d9f9..d8b45bd 100644
--- a/src/views/component/barcode/barcode.vue
+++ b/src/views/component/barcode/barcode.vue
@@ -1,36 +1,90 @@
 <template>
   <div class="snow-page">
     <div class="snow-inner">
-      <svg id="imgcode"></svg>
+      <div class="code-box">
+        <a-card v-for="item in codeList" :key="item.id" :title="item.docs" :style="{ width: '400px' }" hoverable>
+          <div class="card-content">
+            <draw-barcode :text="item.text" :options="item.options" />
+          </div>
+        </a-card>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import JsBarcode from "jsbarcode";
-
-const createCode = () => {
-  JsBarcode("#imgcode", "123", {
-    format: "CODE39", //选择要使用的条形码类型
-    width: 3, //设置条之间的宽度
-    height: 100, //高度
-    displayValue: true, //是否在条形码下方显示文字
-    text: "456", //覆盖显示的文本
-    fontOptions: "bold italic", //使文字加粗体或变斜体
-    font: "fantasy", //设置文本的字体
-    textAlign: "left", //设置文本的水平对齐方式
-    textPosition: "top", //设置文本的垂直位置
-    textMargin: 5, //设置条形码和文本之间的间距
-    fontSize: 15, //设置文本的大小
-    background: "#eee", //设置条形码的背景
-    lineColor: "#2196f3", //设置条和文本的颜色。
-    margin: 15 //设置条形码周围的空白边距
-  });
-};
-
-onMounted(() => {
-  createCode();
-});
+const codeList = ref([
+  {
+    id: 1,
+    text: "SnowAdmin",
+    docs: "CODE128-默认条形码",
+    options: {
+      format: "CODE128",
+      height: 100
+    }
+  },
+  {
+    id: 2,
+    text: "SnowAdmin",
+    docs: "自定义高度和颜色",
+    options: {
+      format: "CODE128",
+      height: 50,
+      background: "#f7f8fa",
+      lineColor: "#2962ff"
+    }
+  },
+  {
+    id: 3,
+    text: "SnowAdmin",
+    docs: "设置字体和倾斜",
+    options: {
+      format: "CODE128",
+      height: 100,
+      font: "fantasy",
+      fontOptions: "italic"
+    }
+  },
+  {
+    id: 4,
+    text: "SnowAdmin",
+    docs: "CODE39-商品条形码",
+    options: {
+      format: "CODE39",
+      height: 100
+    }
+  },
+  {
+    id: 5,
+    text: "6971318501227",
+    docs: "EAN13-商品条形码",
+    options: {
+      format: "EAN13",
+      height: 100
+    }
+  },
+  {
+    id: 6,
+    text: "123456789999",
+    docs: "UPC-商品条形码",
+    options: {
+      format: "UPC",
+      height: 100
+    }
+  }
+]);
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.code-box {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $margin;
+  .card-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 120px;
+  }
+}
+</style>