feat(工具箱): 添加“UUID 生成器”工具

src/assets/js/toolbox-data.js

@@ -186,10 +186,10 @@ export const toolList = [
         title: 'UUID 生成器',
         iconClass: 'mdi mdi-identifier',
         desc: '生成 UUID 列表。',
-        createdAt: '',
-        updatedAt: '',
-        version: '0',
-        enabled: false,
+        createdAt: '2026-01-03',
+        updatedAt: '2026-01-03',
+        version: '1',
+        enabled: true,
       },
       {
         id: 'generate-urls',

src/views/ToolboxView/Generator/UuidGenerator.vue

@@ -1,9 +1,153 @@
 <template>
-  <div class="tool-detail-page"></div>
+  <div class="tool-detail-page">
+
+    <!-- 配置选项 -->
+    <n-card size="small" title="配置选项">
+      <n-form
+        class="form-no-feedback"
+        label-align="right"
+        label-placement="left"
+        label-width="auto"
+      >
+
+        <n-form-item label="生成数量：">
+          <n-input-number
+            v-model:value="info.count"
+            :min="1"
+            :max="1000"
+            :step="1"
+          ></n-input-number>
+        </n-form-item>
+
+        <n-form-item label="选项：">
+          <n-flex>
+            <n-checkbox
+              v-model:checked="info.options.withSplit"
+            >是否包含分隔符“-”</n-checkbox>
+          </n-flex>
+        </n-form-item>
+
+      </n-form>
+    </n-card>
+
+    <!-- 操作 -->
+    <n-card size="small" title="操作">
+      <n-flex>
+        <n-button
+          type="primary"
+          @click="handleGenerate"
+        >生成 UUID V4</n-button>
+        <n-button
+          type="primary"
+          :disabled="!info.result"
+          @click="handleCopy"
+        >复制结果</n-button>
+      </n-flex>
+    </n-card>
+
+    <!-- 结果 -->
+    <n-card size="small" title="结果">
+      <n-form
+        class="form-no-feedback"
+        label-align="right"
+        label-placement="left"
+        label-width="auto"
+      >
+
+        <n-form-item>
+          <n-input
+            v-model:value="info.result"
+            placeholder="生成的 UUID 将显示在这里"
+            type="textarea"
+            :readonly="true"
+            :rows="8"
+          ></n-input>
+        </n-form-item>
+
+      </n-form>
+    </n-card>
+
+  </div>
 </template>
 
 <script setup>
+import {
+  NButton, NCard, NCheckbox,
+  NFlex, NForm, NFormItem,
+  NInput, NInputNumber,
+} from 'naive-ui';
+
+import {
+  reactive,
+} from 'vue';
+
+import {
+  $message,
+} from '@/assets/js/naive-ui';
+
+import {
+  useClipboard,
+} from '@vueuse/core';
+
+import {
+  getUuidV4,
+} from '@/assets/js/utils';
+
+const clipboard = useClipboard({
+  legacy: true,
+  read: false,
+});
+
+const info = reactive({
+  count: 1,
+  options: {
+    withSplit: true,
+  },
+  result: '',
+});
+
+/** 处理复制操作 */
+function handleCopy() {
+  if (clipboard.isSupported) {
+    return clipboard.copy(info.result).then(() => {
+      $message.success('复制成功');
+    }).catch((error) => {
+      console.error('复制失败：');
+      console.error(error);
+      $message.error('复制失败：异常');
+    });
+  } else {
+    $message.error('复制失败：当前浏览器不支持该操作');
+    return Promise.resolve();
+  }
+}
+
+/** 处理生成操作 */
+function handleGenerate() {
+
+  let count = info.count;
+  let opt = info.options;
+  let results = [];
+
+  for (let i = 0; i < count; i++) {
+    let uuid = getUuidV4(!opt.withSplit);
+    results.push(uuid);
+  }
+
+  info.result = results.join('\n');
+
+}
 </script>
 
 <style lang="less" scoped>
+.tool-detail-page {
+  :deep(.n-input-number) {
+    width: 8em;
+  }
+
+  :deep(.n-input--textarea) {
+    max-width: 48em;
+    font-family: monospace;
+  }
+}
 </style>