feat:新增导出标签数据

FerretAngel · Aug 20, 2024 · e7287be · e7287be
1 parent 4b5059e
commit e7287be
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 47 deletions.
diff --git a/docs/assets/index-DNhbKO3s.css → docs/assets/index-CXAAeVuG.css b/docs/assets/index-DNhbKO3s.css → docs/assets/index-CXAAeVuG.css
diff --git a/docs/assets/index-DKmSHhwq.js b/docs/assets/index-DKmSHhwq.js
diff --git a/docs/assets/index-TIM7av1H.js b/docs/assets/index-TIM7av1H.js
diff --git a/docs/index.html b/docs/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" href="./favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vite App</title>
-    <script type="module" crossorigin src="./assets/index-DKmSHhwq.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-DNhbKO3s.css">
+    <script type="module" crossorigin src="./assets/index-TIM7av1H.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CXAAeVuG.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/components/lableImage.vue b/src/components/lableImage.vue
@@ -17,6 +17,7 @@ import {
   FileIo,
   LabelManage,
   DrawAction,
+  copyToClipboard,
 } from "@/utils/lableImage";
 import ListVue from "@/components/list.vue";
 const canvasDom = ref<HTMLCanvasElement | null>(null);
@@ -54,6 +55,11 @@ const labelManage = new LabelManage(states); // 标签管理
 let fileIo: FileIo | null = null, // 文件操作实例
   drawAction: DrawAction | null; // 画布上下文
 
+function exportLable() {
+  const str = labelManage.labels.map((item) => `  - ${item.name}`).join("\n");
+  copyToClipboard(str);
+  Snackbar.info("标签数据已复制到剪贴板");
+}
 /**
  * 重置canvas位置,使画布居中
  */
@@ -572,18 +578,37 @@ function lableContextmenuAction(isDelete = false) {
       <!-- 标签列表 -->
       <div class="right">
         <var-divider description="标签" />
-        <var-button
-          style="width: 100%"
-          type="info"
-          :icon-container="true"
-          @click="addLable()"
+        <div
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 0.5em;
+          "
         >
-          <Icon
-            style="font-size: 2em"
-            icon="ic:round-add"
-          />
-          添加标签
-        </var-button>
+          <var-button
+            type="info"
+            :icon-container="true"
+            @click="addLable()"
+            title="添加标签"
+          >
+            <Icon
+              style="font-size: 2em"
+              icon="ic:round-add"
+            />
+          </var-button>
+          <var-button
+            type="info"
+            :icon-container="true"
+            @click="exportLable()"
+            title="导出标签数据（用于快速修改data.yaml里面的分类数据）"
+          >
+            <Icon
+              style="font-size: 2em"
+              icon="ph:export"
+            />
+          </var-button>
+        </div>
         <ListVue
           style="height: 81vh"
           :data="labelManage?.labels ?? []"

diff --git a/src/utils/lableImage.ts b/src/utils/lableImage.ts
@@ -853,3 +853,17 @@ export class LabelManage {
     return "#" + Math.floor(Math.random() * 16777215).toString(16);
   }
 }
+
+
+export function copyToClipboard(text: string) {
+  try {
+    navigator.clipboard.writeText(text);
+  } catch (error) {
+    const input = document.createElement("input");
+    input.value = text;
+    document.body.appendChild(input);
+    input.select();
+    document.execCommand("copy");
+    document.body.removeChild(input);
+  }
+}