初始化

frontend/src/views/home/components/tools/UuidTool.vue

@@ -0,0 +1,101 @@
+<template>
+    <HomeToolCard title="UUID 生成" description="生成单个或批量 UUID，支持去除中划线。" icon="Tickets">
+        <div class="tool-body">
+            <div class="control-row">
+                <div class="control-item">
+                    <label class="field-label">生成数量</label>
+                    <el-input-number v-model="count" :min="1" :max="100" />
+                </div>
+                <div class="control-item switch-item">
+                    <label class="field-label">去除中划线</label>
+                    <el-switch v-model="removeHyphen" />
+                </div>
+            </div>
+
+            <div class="toolbar">
+                <el-button type="primary" @click="generateUuid">生成 UUID</el-button>
+                <el-button @click="copyResult">复制结果</el-button>
+                <el-button @click="clearAll">清空</el-button>
+            </div>
+
+            <el-input
+                v-model="resultText"
+                type="textarea"
+                :rows="10"
+                resize="none"
+                readonly
+                placeholder="生成结果会显示在这里"
+            />
+        </div>
+    </HomeToolCard>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import HomeToolCard from './HomeToolCard.vue'
+import { copyText, createUuidList } from '@/utils/home'
+
+const count = ref(1)
+const removeHyphen = ref(false)
+const resultText = ref('')
+
+const generateUuid = () => {
+    resultText.value = createUuidList(count.value, removeHyphen.value).join('\n')
+}
+
+const copyResult = async () => {
+    await copyText(resultText.value)
+}
+
+const clearAll = () => {
+    count.value = 1
+    removeHyphen.value = false
+    resultText.value = ''
+}
+
+onMounted(() => {
+    generateUuid()
+})
+</script>
+
+<style scoped lang="scss">
+.tool-body {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+.control-row {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 14px;
+}
+
+.control-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.switch-item {
+    justify-content: flex-end;
+}
+
+.field-label {
+    font-size: 13px;
+    font-weight: 600;
+    color: #334155;
+}
+
+.toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+@media (max-width: 768px) {
+    .control-row {
+        grid-template-columns: 1fr;
+    }
+}
+</style>