optimize(projects): optimize code

src/views/plugin/barcode/index.vue

@@ -1,91 +1,114 @@
 <script setup lang="ts">
 import JsBarcode from 'jsbarcode';
+import type { Options } from 'jsbarcode';
 import { onMounted } from 'vue';
 
 const text = 'Soybean';
 
-onMounted(() => {
+interface CodeConfig {
-  JsBarcode('#code39', 'Hello', { format: 'code39' });
+  id: string;
-  JsBarcode('#code128', text);
+  title: string;
-  JsBarcode('#ean-13', '1234567890128', { format: 'ean13' });
+  text: string;
-  JsBarcode('#upc-a', '123456789012', { format: 'upc' });
+  options: Options;
-  JsBarcode('#barcode', 'Hello', {
+}
+
+const codes: CodeConfig[] = [
+  {
+    id: 'code39',
+    title: 'CODE 39 正常尺寸',
+    text: 'Hello',
+    options: { format: 'code39' }
+  },
+  {
+    id: 'code128',
+    title: 'CODE 128 正常尺寸',
+    text,
+    options: {}
+  },
+  {
+    id: 'ean-13',
+    title: 'ENA-13 商品条形码',
+    text: '1234567890128',
+    options: { format: 'ean13' }
+  },
+  {
+    id: 'upc-a',
+    title: 'UPC-A 商品条形码',
+    text: '123456789012',
+    options: { format: 'upc' }
+  },
+  {
+    id: 'barcode',
+    title: '不一样的高度，不一样的颜色',
+    text: 'Hello',
+    options: {
       height: 30,
       lineColor: '#9ca3af'
-  });
+    }
-  JsBarcode('#barcode1', text, {
+  },
+  {
+    id: 'barcode1',
+    title: '加个背景色',
+    text,
+    options: {
       background: '#9ca3af',
       lineColor: '#ffffff'
-  });
+    }
-  JsBarcode('#barcode2', text, {
+  },
+  {
+    id: 'barcode2',
+    title: '字体好大',
+    text,
+    options: {
       fontSize: 40
-  });
+    }
-  JsBarcode('#barcode3', 'Hi', {
+  },
+  {
+    id: 'barcode3',
+    title: '粗狂的条码，文字离远点',
+    text: 'Hi',
+    options: {
       textMargin: 30,
       width: 4
-  });
+    }
-  JsBarcode('#barcode4', text, {
+  },
+  {
+    id: 'barcode4',
+    title: '字体跑上面来，还是粗体',
+    text,
+    options: {
       textPosition: 'top',
       fontOptions: 'bold'
+    }
+  }
+];
+
+function generateBarcode() {
+  codes.forEach(code => {
+    JsBarcode(`#${code.id}`, code.text, code.options);
   });
+}
+
+onMounted(() => {
+  generateBarcode();
 });
 </script>
 
 <template>
-  <div>
+  <div class="overflow-hidden">
-    <NCard title="条形码" :bordered="false" class="h-full card-wrapper">
+    <NCard title="条形码" :bordered="false" class="h-full card-wrapper" content-class="overflow-hidden">
-      <NGrid cols="s:1 m:1 l:3" x-gap="12px" y-gap="24px" responsive="screen" item-responsive class="grid-wrapper">
+      <NScrollbar class="h-full">
-        <NGi>
+        <NGrid cols="1 s:2 l:3" :x-gap="12" :y-gap="24" responsive="screen" item-responsive>
-          CODE 39 正常尺寸
+          <NGi v-for="item in codes" :key="item.id">
-          <svg id="code39" />
+            <div class="flex-col-center">
-        </NGi>
+              <h3>{{ item.title }}</h3>
-        <NGi>
+              <svg :id="item.id" class="h-130px" />
-          CODE 128 正常尺寸
+            </div>
-          <svg id="code128" />
-        </NGi>
-        <NGi>
-          ENA-13 商品条形码
-          <svg id="ean-13" />
-        </NGi>
-        <NGi>
-          UPC-A 商品条形码
-          <svg id="upc-a" />
-        </NGi>
-        <NGi>
-          不一样的高度，不一样的颜色
-          <svg id="barcode" />
-        </NGi>
-        <NGi>
-          加个背景色
-          <svg id="barcode1" />
-        </NGi>
-        <NGi>
-          字体好大
-          <svg id="barcode2" />
-        </NGi>
-        <NGi>
-          粗狂的条码，文字离远点
-          <svg id="barcode3" />
-        </NGi>
-        <NGi>
-          字体跑上面来，还是粗体
-          <svg id="barcode4" />
           </NGi>
         </NGrid>
+      </NScrollbar>
     </NCard>
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-.grid-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-}
-.grid-wrapper > div {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-</style>