feat: 条形码组件

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"];
   }
 }

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>

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;

src/router/index.ts

@@ -37,11 +37,11 @@ const router = createRouter({
  * 全局routeTree不能持久化缓存
  * 页面刷新会导致addRoute动态添加的路由失效，需要重新初始化路由
  */
-router.beforeEach(async (to, from, next) => {
+router.beforeEach(async (to, _, next) => {
   NProgress.start(); // 开启进度条
   const store = useUserInfoStore(pinia);
   const { token } = storeToRefs(store);
-  console.log("去", to, "来自", from);
+  // console.log("去", to, "来自", from);
   // next()内部加了path等于跳转指定路由会再次触发router.beforeEach，内部无参数等于放行，不会触发router.beforeEach
   if (to.path === "/login" && !token.value) {
     // 1、去登录页，无token，放行

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;
 }

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>