From a262c52c7320e07b79f7469c59ec6a813e7c5a22 Mon Sep 17 00:00:00 2001
From: zguiy <1415466602@qq.com>
Date: Sun, 29 Jun 2025 03:01:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8D=B0=E7=AB=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/tools/CryptoTools.vue         |    6 +-
 src/components/tools/DateCalculator.vue      |    8 +-
 src/components/tools/NumberBaseConverter.vue |    4 +-
 src/components/tools/RegexTester.vue         |    4 +-
 src/components/tools/SealGenerator.vue       | 1533 ++++++++++++++++++
 src/config/i18n/en.ts                        |  156 +-
 src/config/i18n/zh.ts                        |  156 +-
 src/config/tools.ts                          |    8 +-
 src/main.ts                                  |    4 +-
 src/views/ToolView.vue                       |    3 +-
 test-seal.html                               |  290 ++++
 11 files changed, 1942 insertions(+), 230 deletions(-)
 create mode 100644 src/components/tools/SealGenerator.vue
 create mode 100644 test-seal.html

diff --git a/src/components/tools/CryptoTools.vue b/src/components/tools/CryptoTools.vue
index fc3b2e1..3f75497 100644
--- a/src/components/tools/CryptoTools.vue
+++ b/src/components/tools/CryptoTools.vue
@@ -10,7 +10,7 @@
           :class="[
             'px-3 py-2 text-sm font-medium rounded transition-all',
             activeAlgorithm === algorithm.type 
-              ? 'bg-primary text-white shadow-sm' 
+              ? 'bg-primary-500 text-white shadow-sm'
               : 'bg-block text-secondary border hover:bg-hover'
           ]"
           @click="setActiveAlgorithm(algorithm.type)"
@@ -27,7 +27,7 @@
         <button
           :class="[
             'flex-1 px-4 py-2 text-sm font-medium rounded transition-all',
-            !isDecoding ? 'bg-primary text-white' : 'bg-block text-secondary border'
+            !isDecoding ? 'bg-primary-500 text-white' : 'bg-block text-secondary border'
           ]"
           @click="isDecoding = false"
         >
@@ -36,7 +36,7 @@
         <button
           :class="[
             'flex-1 px-4 py-2 text-sm font-medium rounded transition-all',
-            isDecoding ? 'bg-primary text-white' : 'bg-block text-secondary border'
+            isDecoding ? 'bg-primary-500 text-white' : 'bg-block text-secondary border'
           ]"
           @click="isDecoding = true"
         >
diff --git a/src/components/tools/DateCalculator.vue b/src/components/tools/DateCalculator.vue
index e952f58..b25b9ae 100644
--- a/src/components/tools/DateCalculator.vue
+++ b/src/components/tools/DateCalculator.vue
@@ -5,8 +5,8 @@
       <div class="flex items-center bg-card rounded-md p-1 border">
         <button
           :class="[
-            'px-4 py-2 text-sm font-medium transition-all rounded-l-md',
-            mode === 'diff' ? 'bg-primary text-white shadow-sm' : 'text-secondary hover:text-primary'
+            'px-4 py-2 text-sm font-medium rounded-l transition-all',
+            mode === 'diff' ? 'bg-primary-500 text-white shadow-sm' : 'text-secondary hover:text-primary'
           ]"
           @click="mode = 'diff'"
         >
@@ -14,8 +14,8 @@
         </button>
         <button
           :class="[
-            'px-4 py-2 text-sm font-medium transition-all rounded-r-md',
-            mode === 'add' ? 'bg-primary text-white shadow-sm' : 'text-secondary hover:text-primary'
+            'px-4 py-2 text-sm font-medium rounded-r transition-all',
+            mode === 'add' ? 'bg-primary-500 text-white shadow-sm' : 'text-secondary hover:text-primary'
           ]"
           @click="mode = 'add'"
         >
diff --git a/src/components/tools/NumberBaseConverter.vue b/src/components/tools/NumberBaseConverter.vue
index fca10e9..6305a25 100644
--- a/src/components/tools/NumberBaseConverter.vue
+++ b/src/components/tools/NumberBaseConverter.vue
@@ -14,7 +14,7 @@
               :key="'from-' + base.id"
               :class="[
                 'px-3 py-2 text-sm rounded transition-all',
-                fromBase === base.id ? 'bg-primary text-white' : 'btn-secondary'
+                fromBase === base.id ? 'bg-primary-500 text-white' : 'btn-secondary'
               ]"
               @click="setFromBase(base.id)"
             >
@@ -44,7 +44,7 @@
               :key="'to-' + base.id"
               :class="[
                 'px-3 py-2 text-sm rounded transition-all',
-                toBase === base.id ? 'bg-primary text-white' : 'btn-secondary'
+                toBase === base.id ? 'bg-primary-500 text-white' : 'btn-secondary'
               ]"
               @click="setToBase(base.id)"
             >
diff --git a/src/components/tools/RegexTester.vue b/src/components/tools/RegexTester.vue
index c544f5c..d8e719a 100644
--- a/src/components/tools/RegexTester.vue
+++ b/src/components/tools/RegexTester.vue
@@ -176,7 +176,7 @@
                   <div class="space-y-1">
                     <div class="flex items-start gap-2">
                       <span class="text-xs text-tertiary min-w-[40px]">完整:</span>
-                      <code class="text-sm text-primary bg-primary/10 px-1 rounded break-all">
+                      <code class="text-sm text-primary-600 bg-primary-100 px-1 rounded break-all">
                         {{ match[0] || '' }}
                       </code>
                     </div>
@@ -187,7 +187,7 @@
                       class="flex items-start gap-2"
                     >
                       <span class="text-xs text-tertiary min-w-[40px]">组 {{ group }}:</span>
-                      <code class="text-sm text-primary bg-primary/10 px-1 rounded break-all">
+                      <code class="text-sm text-primary-600 bg-primary-100 px-1 rounded break-all">
                         {{ match[group] || '(空)' }}
                       </code>
                     </div>
diff --git a/src/components/tools/SealGenerator.vue b/src/components/tools/SealGenerator.vue
new file mode 100644
index 0000000..fa65684
--- /dev/null
+++ b/src/components/tools/SealGenerator.vue
@@ -0,0 +1,1533 @@
+<template>
+  <div class="space-y-6">
+    <div class="flex flex-col lg:flex-row gap-6">
+      <!-- 左侧配置面板 -->
+      <div class="flex-1 lg:max-w-2xl space-y-4">
+        <!-- 基础参数 -->
+        <div class="card p-6">
+          <h3 class="text-lg font-medium text-primary mb-4">
+            <FontAwesomeIcon :icon="['fas', 'cogs']" class="mr-2" />
+            基础参数
+          </h3>
+          
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <!-- 印章样式 -->
+            <div>
+              <label class="block text-sm font-medium text-secondary mb-2">印章样式</label>
+              <select v-model="sealType" class="select-field w-full">
+                <option value="company_round">公司圆章</option>
+                <option value="company_oval">公司椭圆章</option>
+                <option value="personal_square">个人方章</option>
+                <option value="personal_round">个人圆章</option>
+              </select>
+            </div>
+            
+            <!-- 印章大小 -->
+            <div>
+              <label class="block text-sm font-medium text-secondary mb-2">印章大小 ({{ sealSize }}px)</label>
+              <input 
+                v-model.number="sealSize" 
+                type="range" 
+                min="200" 
+                max="600" 
+                step="20"
+                class="slider w-full"
+              />
+            </div>
+            
+            <!-- 个人方章高度调整 -->
+            <div v-if="sealType === 'personal_square'">
+              <label class="block text-sm font-medium text-secondary mb-2">印章高度比例 ({{ personalHeight }})</label>
+              <input 
+                v-model.number="personalHeight" 
+                type="range" 
+                min="0.5" 
+                max="2.0" 
+                step="0.1"
+                class="slider w-full"
+              />
+              <div class="flex justify-between text-xs text-tertiary mt-1">
+                <span>扁平</span>
+                <span>正方</span>
+                <span>高长</span>
+              </div>
+            </div>
+            
+            <!-- 印章颜色 -->
+            <div>
+              <label class="block text-sm font-medium text-secondary mb-2">印章颜色</label>
+              <div class="flex items-center gap-2">
+                <input 
+                  v-model="sealColor" 
+                  type="color" 
+                  class="w-10 h-10 rounded border border-primary/20"
+                />
+                <input 
+                  v-model="sealColor" 
+                  type="text" 
+                  class="input-field flex-1"
+                  placeholder="#FF0000"
+                />
+              </div>
+            </div>
+            
+            <!-- 背景颜色 -->
+            <div>
+              <label class="block text-sm font-medium text-secondary mb-2">背景颜色</label>
+              <div class="flex items-center gap-2">
+                <input 
+                  v-model="backgroundColor" 
+                  type="color" 
+                  class="w-10 h-10 rounded border border-primary/20"
+                />
+                <input 
+                  v-model="backgroundColor" 
+                  type="text" 
+                  class="input-field flex-1"
+                  placeholder="#FFFFFF"
+                />
+              </div>
+            </div>
+          </div>
+          
+
+        </div>
+
+        <!-- 主文字设置 -->
+        <div class="card p-6">
+          <h3 class="text-lg font-medium text-primary mb-4">
+            <FontAwesomeIcon :icon="['fas', 'font']" class="mr-2" />
+            主文字设置
+          </h3>
+          
+          <div class="space-y-4">
+            <!-- 主文字内容 -->
+            <div>
+              <label class="block text-sm font-medium text-secondary mb-2">文字内容</label>
+              <input 
+                v-model="mainText" 
+                type="text" 
+                class="input-field w-full"
+                :placeholder="sealType.startsWith('company') ? '公司名称' : '姓名'"
+                maxlength="20"
+              />
+            </div>
+            
+            <!-- 主文字大小 -->
+            <div>
+              <label class="block text-sm font-medium text-secondary mb-2">字体大小 ({{ mainFontSize }}px)</label>
+              <input 
+                v-model.number="mainFontSize" 
+                type="range" 
+                min="16" 
+                max="60" 
+                step="2"
+                class="slider w-full"
+              />
+            </div>
+            
+            <!-- 主文字字体样式 -->
+            <div class="space-y-3">
+              <!-- 字体选择 -->
+              <div>
+                <label class="block text-sm font-medium text-secondary mb-2">字体</label>
+                <select v-model="mainFontFamily" class="select-field w-full">
+                  <option value="SimSun">宋体 (SimSun)</option>
+                  <option value="SimHei">黑体 (SimHei)</option>
+                  <option value="KaiTi">楷体 (KaiTi)</option>
+                  <option value="FangSong">仿宋 (FangSong)</option>
+                  <option value="Microsoft YaHei">微软雅黑 (Microsoft YaHei)</option>
+                  <option value="Arial">Arial</option>
+                  <option value="Times New Roman">Times New Roman</option>
+                </select>
+              </div>
+              
+              <!-- 字体样式 -->
+              <div class="flex gap-4">
+                <label class="flex items-center">
+                  <input 
+                    v-model="mainFontWeight" 
+                    type="checkbox" 
+                    class="mr-2"
+                  />
+                  <span class="text-sm text-secondary">加粗</span>
+                </label>
+                
+                <label class="flex items-center">
+                  <input 
+                    v-model="mainFontItalic" 
+                    type="checkbox" 
+                    class="mr-2"
+                  />
+                  <span class="text-sm text-secondary">斜体</span>
+                </label>
+              </div>
+            </div>
+            
+            <!-- 主文字布局（仅公司章） -->
+            <div v-if="sealType.startsWith('company')" class="space-y-4">
+              <!-- 文字间距 -->
+              <div>
+                <label class="block text-sm font-medium text-secondary mb-2">文字间距 ({{ textSpacing }})</label>
+                <input 
+                  v-model.number="textSpacing" 
+                  type="range" 
+                  min="0.5" 
+                  max="1.5" 
+                  step="0.05"
+                  class="slider w-full"
+                />
+                <div class="flex justify-between text-xs text-tertiary mt-1">
+                  <span>紧密</span>
+                  <span>适中</span>
+                  <span>宽松</span>
+                </div>
+              </div>
+
+              <!-- 主文字位置 -->
+              <div>
+                <label class="block text-sm font-medium text-secondary mb-2">文字位置 ({{ textMargin > 0 ? '+' : '' }}{{ textMargin }}px)</label>
+                <input 
+                  v-model.number="textMargin" 
+                  type="range" 
+                  min="-30" 
+                  max="30" 
+                  step="2"
+                  class="slider w-full"
+                />
+                <div class="flex justify-between text-xs text-tertiary mt-1">
+                  <span>向外</span>
+                  <span>标准</span>
+                  <span>向内</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 中心文字设置（仅公司章） -->
+        <div v-if="sealType.startsWith('company')" class="card p-6">
+          <h3 class="text-lg font-medium text-primary mb-4">
+            <FontAwesomeIcon :icon="['fas', 'dot-circle']" class="mr-2" />
+            中心文字设置
+          </h3>
+          
+          <div class="space-y-4">
+            <!-- 中心文字内容 -->
+            <div>
+              <label class="block text-sm font-medium text-secondary mb-2">文字内容</label>
+              <input 
+                v-model="centerText" 
+                type="text" 
+                class="input-field w-full"
+                placeholder="印"
+              />
+            </div>
+            
+            <!-- 中心文字大小 -->
+            <div>
+              <label class="block text-sm font-medium text-secondary mb-2">字体大小 ({{ centerFontSize }}px)</label>
+              <input 
+                v-model.number="centerFontSize" 
+                type="range" 
+                min="20" 
+                max="80" 
+                step="2"
+                class="slider w-full"
+              />
+            </div>
+            
+            <!-- 中心文字字体样式 -->
+            <div class="space-y-3">
+              <!-- 字体选择 -->
+              <div>
+                <label class="block text-sm font-medium text-secondary mb-2">字体</label>
+                <select v-model="centerFontFamily" class="select-field w-full">
+                  <option value="SimSun">宋体 (SimSun)</option>
+                  <option value="SimHei">黑体 (SimHei)</option>
+                  <option value="KaiTi">楷体 (KaiTi)</option>
+                  <option value="FangSong">仿宋 (FangSong)</option>
+                  <option value="Microsoft YaHei">微软雅黑 (Microsoft YaHei)</option>
+                  <option value="Arial">Arial</option>
+                  <option value="Times New Roman">Times New Roman</option>
+                </select>
+              </div>
+              
+                          <!-- 字体样式 -->
+            <div class="flex gap-4">
+              <label class="flex items-center">
+                <input 
+                  v-model="centerFontWeight" 
+                  type="checkbox" 
+                  class="mr-2"
+                />
+                <span class="text-sm text-secondary">加粗</span>
+              </label>
+              
+              <label class="flex items-center">
+                <input 
+                  v-model="centerFontItalic" 
+                  type="checkbox" 
+                  class="mr-2"
+                />
+                <span class="text-sm text-secondary">斜体</span>
+              </label>
+            </div>
+
+            <!-- 中心图形设置 -->
+            <div class="mt-4 space-y-3">
+              <!-- 图形选择 -->
+              <div>
+                <label class="block text-sm font-medium text-secondary mb-2">中心图形</label>
+                <select v-model="centerShape" class="select-field w-full">
+                  <option value="">无图形</option>
+                  <option value="star">五角星</option>
+                  <option value="circle">圆形</option>
+                  <option value="diamond">菱形</option>
+                  <option value="hexagram">六角星</option>
+                  <option value="triangle">三角形</option>
+                </select>
+              </div>
+              
+              <!-- 图形大小 -->
+              <div v-if="centerShape">
+                <label class="block text-sm font-medium text-secondary mb-2">图形大小 ({{ centerShapeSize }}px)</label>
+                <input 
+                  v-model.number="centerShapeSize" 
+                  type="range" 
+                  min="8" 
+                  max="30" 
+                  step="2"
+                  class="slider w-full"
+                />
+                <div class="flex justify-between text-xs text-tertiary mt-1">
+                  <span>小</span>
+                  <span>中</span>
+                  <span>大</span>
+                </div>
+              </div>
+              
+              <p class="text-xs text-tertiary">
+                智能居中：无文字时图形居中，无图形时文字居中
+              </p>
+            </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 抬头文字设置（仅公司章） -->
+        <div v-if="sealType.startsWith('company')" class="card p-6">
+          <h3 class="text-lg font-medium text-primary mb-4">
+            <FontAwesomeIcon :icon="['fas', 'chevron-up']" class="mr-2" />
+            抬头文字设置
+          </h3>
+          
+          <div class="space-y-4">
+            <!-- 抬头文字内容 -->
+            <div>
+              <label class="block text-sm font-medium text-secondary mb-2">文字内容</label>
+              <input 
+                v-model="headerText" 
+                type="text" 
+                class="input-field w-full"
+                placeholder="例：总公司、分公司"
+                maxlength="10"
+              />
+            </div>
+            
+            <!-- 抬头文字大小 -->
+            <div>
+              <label class="block text-sm font-medium text-secondary mb-2">字体大小 ({{ headerFontSize }}px)</label>
+              <input 
+                v-model.number="headerFontSize" 
+                type="range" 
+                min="12" 
+                max="40" 
+                step="2"
+                class="slider w-full"
+              />
+            </div>
+            
+            <!-- 抬头文字字体样式 -->
+            <div class="space-y-3">
+              <!-- 字体选择 -->
+              <div>
+                <label class="block text-sm font-medium text-secondary mb-2">字体</label>
+                <select v-model="headerFontFamily" class="select-field w-full">
+                  <option value="SimSun">宋体 (SimSun)</option>
+                  <option value="SimHei">黑体 (SimHei)</option>
+                  <option value="KaiTi">楷体 (KaiTi)</option>
+                  <option value="FangSong">仿宋 (FangSong)</option>
+                  <option value="Microsoft YaHei">微软雅黑 (Microsoft YaHei)</option>
+                  <option value="Arial">Arial</option>
+                  <option value="Times New Roman">Times New Roman</option>
+                </select>
+              </div>
+              
+              <!-- 字体样式 -->
+              <div class="flex gap-4">
+                <label class="flex items-center">
+                  <input 
+                    v-model="headerFontWeight" 
+                    type="checkbox" 
+                    class="mr-2"
+                  />
+                  <span class="text-sm text-secondary">加粗</span>
+                </label>
+                
+                <label class="flex items-center">
+                  <input 
+                    v-model="headerFontItalic" 
+                    type="checkbox" 
+                    class="mr-2"
+                  />
+                  <span class="text-sm text-secondary">斜体</span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 副文字设置（仅公司章） -->
+        <div v-if="sealType.startsWith('company')" class="card p-6">
+          <h3 class="text-lg font-medium text-primary mb-4">
+            <FontAwesomeIcon :icon="['fas', 'chevron-down']" class="mr-2" />
+            副文字设置
+          </h3>
+          
+          <div class="space-y-4">
+            <!-- 副文字内容 -->
+            <div>
+              <label class="block text-sm font-medium text-secondary mb-2">文字内容</label>
+              <input 
+                v-model="subText" 
+                type="text" 
+                class="input-field w-full"
+                placeholder="例：有限公司、股份有限公司"
+                maxlength="10"
+              />
+            </div>
+            
+            <!-- 副文字大小 -->
+            <div>
+              <label class="block text-sm font-medium text-secondary mb-2">字体大小 ({{ subFontSize }}px)</label>
+              <input 
+                v-model.number="subFontSize" 
+                type="range" 
+                min="12" 
+                max="40" 
+                step="2"
+                class="slider w-full"
+              />
+            </div>
+            
+            <!-- 副文字字体样式 -->
+            <div class="space-y-3">
+              <!-- 显示模式 -->
+              <div>
+                <label class="block text-sm font-medium text-secondary mb-2">显示模式</label>
+                <div class="flex gap-4">
+                  <label class="flex items-center">
+                    <input 
+                      v-model="subTextCurved" 
+                      type="radio" 
+                      :value="false"
+                      class="mr-2"
+                    />
+                    <span class="text-sm text-secondary">平直显示</span>
+                  </label>
+                  
+                  <label class="flex items-center">
+                    <input 
+                      v-model="subTextCurved" 
+                      type="radio" 
+                      :value="true"
+                      class="mr-2"
+                    />
+                    <span class="text-sm text-secondary">弧形显示</span>
+                  </label>
+                </div>
+              </div>
+
+              <!-- 副文字间距（弧形模式） -->
+              <div v-if="subTextCurved">
+                <label class="block text-sm font-medium text-secondary mb-2">文字间距 ({{ subTextSpacing }})</label>
+                <input 
+                  v-model.number="subTextSpacing" 
+                  type="range" 
+                  min="0.5" 
+                  max="1.5" 
+                  step="0.05"
+                  class="slider w-full"
+                />
+                <div class="flex justify-between text-xs text-tertiary mt-1">
+                  <span>紧密</span>
+                  <span>适中</span>
+                  <span>宽松</span>
+                </div>
+              </div>
+
+              <!-- 副文字位置 -->
+              <div>
+                <label class="block text-sm font-medium text-secondary mb-2">文字位置 ({{ subTextMargin > 0 ? '+' : '' }}{{ subTextMargin }}px)</label>
+                <input 
+                  v-model.number="subTextMargin" 
+                  type="range" 
+                  min="-30" 
+                  max="30" 
+                  step="2"
+                  class="slider w-full"
+                />
+                <div class="flex justify-between text-xs text-tertiary mt-1">
+                  <span>向外</span>
+                  <span>标准</span>
+                  <span>向内</span>
+                </div>
+              </div>
+              
+              <!-- 字体选择 -->
+              <div>
+                <label class="block text-sm font-medium text-secondary mb-2">字体</label>
+                <select v-model="subFontFamily" class="select-field w-full">
+                  <option value="SimSun">宋体 (SimSun)</option>
+                  <option value="SimHei">黑体 (SimHei)</option>
+                  <option value="KaiTi">楷体 (KaiTi)</option>
+                  <option value="FangSong">仿宋 (FangSong)</option>
+                  <option value="Microsoft YaHei">微软雅黑 (Microsoft YaHei)</option>
+                  <option value="Arial">Arial</option>
+                  <option value="Times New Roman">Times New Roman</option>
+                </select>
+              </div>
+              
+              <!-- 字体样式 -->
+              <div class="flex gap-4">
+                <label class="flex items-center">
+                  <input 
+                    v-model="subFontWeight" 
+                    type="checkbox" 
+                    class="mr-2"
+                  />
+                  <span class="text-sm text-secondary">加粗</span>
+                </label>
+                
+                <label class="flex items-center">
+                  <input 
+                    v-model="subFontItalic" 
+                    type="checkbox" 
+                    class="mr-2"
+                  />
+                  <span class="text-sm text-secondary">斜体</span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 边框设置 -->
+        <div class="card p-6">
+          <h3 class="text-lg font-medium text-primary mb-4">
+            <FontAwesomeIcon :icon="['fas', 'square']" class="mr-2" />
+            边框设置
+          </h3>
+          
+          <div class="grid grid-cols-2 gap-4">
+            <!-- 外边线宽度 -->
+            <div>
+              <label class="block text-sm font-medium text-secondary mb-2">外边线宽度 ({{ outerBorderWidth }}px)</label>
+              <input 
+                v-model.number="outerBorderWidth" 
+                type="range" 
+                min="1" 
+                max="10" 
+                step="1"
+                class="slider w-full"
+              />
+            </div>
+            
+            <!-- 内边线宽度 -->
+            <div v-if="sealType.startsWith('company')" class="col-span-2">
+              <label class="block text-sm font-medium text-secondary mb-2">内边线宽度 ({{ innerBorderWidth }}px)</label>
+              <input 
+                v-model.number="innerBorderWidth" 
+                type="range" 
+                min="0" 
+                max="5" 
+                step="1"
+                class="slider w-full"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- 操作按钮 -->
+        <div class="card p-6">
+          <div class="space-y-4">
+            <!-- 导出选项 -->
+            <div class="space-y-3">
+              <label class="flex items-center">
+                <input 
+                  v-model="exportTransparent" 
+                  type="checkbox" 
+                  class="mr-2"
+                />
+                <span class="text-sm text-secondary">导出透明背景PNG</span>
+              </label>
+
+              <!-- 破损样式 -->
+              <div>
+                <label class="block text-sm font-medium text-secondary mb-2">破损样式</label>
+                <select v-model="damageStyle" class="select-field w-full">
+                  <option value="none">无破损</option>
+                  <option value="random">随机磨损</option>
+                  <option value="cracks">裂纹破损</option>
+                  <option value="edge">边缘磨损</option>
+                  <option value="chunks">块状缺失</option>
+                  <option value="stains">污渍斑点</option>
+                </select>
+              </div>
+
+              <!-- 破损程度 -->
+              <div v-if="damageStyle !== 'none'">
+                <label class="block text-sm font-medium text-secondary mb-2">破损程度 ({{ wearLevel }}%)</label>
+                <input 
+                  v-model.number="wearLevel" 
+                  type="range" 
+                  min="0" 
+                  max="50" 
+                  step="5"
+                  class="slider w-full"
+                />
+                <div class="flex justify-between text-xs text-tertiary mt-1">
+                  <span>轻微</span>
+                  <span>中等</span>
+                  <span>严重</span>
+                </div>
+                <p class="text-xs text-tertiary mt-1">
+                  {{ getDamageDescription(damageStyle) }}
+                </p>
+              </div>
+            </div>
+            
+            <div class="flex gap-3">
+              <button 
+                @click="downloadSeal"   
+                class="btn-primary flex-1"
+                :disabled="!mainText.trim()"
+              >
+                <FontAwesomeIcon :icon="['fas', 'download']" class="mr-2" />
+                下载印章
+              </button>
+              
+              <button 
+                @click="clearAll" 
+                class="btn-secondary"
+              >
+                <FontAwesomeIcon :icon="['fas', 'trash']" class="mr-2" />
+                清空
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧预览区域 -->
+      <div class="lg:fixed lg:right-4 lg:w-96 lg:max-h-[calc(100vh-2rem)]">
+        <div class="card p-6">
+          <h3 class="text-lg font-medium text-primary mb-4">
+            <FontAwesomeIcon :icon="['fas', 'eye']" class="mr-2" />
+            印章预览 - 实时显示
+          </h3>
+          
+          <div class="flex justify-center items-center min-h-[400px] bg-block rounded-lg p-4">
+                      <canvas
+            ref="sealCanvas"
+            :width="canvasWidth"
+            :height="canvasHeight"
+            class="border border-primary/20 rounded-lg shadow-lg"
+            style="max-width: 100%; height: auto;"
+          />
+          </div>
+          
+          <div class="mt-4 text-center">
+            <p class="text-sm text-tertiary">
+              <FontAwesomeIcon :icon="['fas', 'info-circle']" class="mr-1" />
+              左侧调整参数，右侧实时预览
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 使用说明 -->
+    <div class="card p-6">
+      <h3 class="text-md font-medium text-primary mb-4">
+        <FontAwesomeIcon :icon="['fas', 'info-circle']" class="mr-2" />
+        使用说明
+      </h3>
+      
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div>
+          <h4 class="font-medium text-secondary mb-2">公司印章</h4>
+          <ul class="text-sm text-tertiary space-y-1">
+            <li>• 支持圆形和椭圆形样式</li>
+            <li>• 可设置主文字（公司名称）</li>
+            <li>• 可添加中心文字、抬头文字、副文字</li>
+            <li>• 支持五角星装饰</li>
+            <li>• 可调节内外边框宽度</li>
+          </ul>
+        </div>
+        
+        <div>
+          <h4 class="font-medium text-secondary mb-2">个人印章</h4>
+          <ul class="text-sm text-tertiary space-y-1">
+            <li>• 支持方形和圆形样式</li>
+            <li>• 适用于个人姓名印章</li>
+            <li>• 支持2-4个汉字</li>
+            <li>• 简洁美观的设计</li>
+            <li>• 可自定义颜色和大小</li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="mt-4 p-4 bg-block rounded-lg">
+        <h4 class="font-medium text-secondary mb-2">
+          <FontAwesomeIcon :icon="['fas', 'exclamation-triangle']" class="mr-2 text-yellow-500" />
+          重要提示
+        </h4>
+        <p class="text-sm text-tertiary">
+          本工具生成的印章仅供学习和测试使用，请勿用于非法用途。正式的公司印章需要到相关部门进行备案注册。
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onMounted } from 'vue'
+
+// 响应式状态
+const sealType = ref('company_round')
+const sealSize = ref(300)
+
+// 计算画布尺寸
+const canvasWidth = computed(() => {
+  if (sealType.value === 'company_oval') {
+    return sealSize.value
+  }
+  return sealSize.value
+})
+
+const canvasHeight = computed(() => {
+  if (sealType.value === 'company_oval') {
+    return Math.round(sealSize.value * 0.8) // 椭圆形高度为宽度的80%
+  } else if (sealType.value === 'personal_square') {
+    return Math.round(sealSize.value * personalHeight.value) // 个人方章支持高度调整
+  }
+  return sealSize.value
+})
+const sealColor = ref('#FF0000')
+const backgroundColor = ref('#FFFFFF')
+const mainText = ref('子归云科技')
+const centerText = ref('印')
+const headerText = ref('')
+const subText = ref('')
+const mainFontSize = ref(24)
+const centerFontSize = ref(40)
+const headerFontSize = ref(18)
+const subFontSize = ref(18)
+const outerBorderWidth = ref(3)
+const innerBorderWidth = ref(1)
+const showStar = ref(true) // 保留用于兼容性
+const centerShape = ref('star') // 中心图形类型
+const centerShapeSize = ref(15) // 中心图形大小
+const textSpacing = ref(1.0)
+const textMargin = ref(0)
+const personalHeight = ref(1.0) // 个人印章高度比例
+
+// 主文字样式
+const mainFontWeight = ref(false)
+const mainFontItalic = ref(false)
+const mainFontFamily = ref('SimSun')
+
+// 中心文字样式
+const centerFontWeight = ref(false)
+const centerFontItalic = ref(false)
+const centerFontFamily = ref('SimSun')
+
+// 抬头文字样式
+const headerFontWeight = ref(false)
+const headerFontItalic = ref(false)
+const headerFontFamily = ref('SimSun')
+
+// 副文字样式
+const subFontWeight = ref(false)
+const subFontItalic = ref(false)
+const subFontFamily = ref('SimSun')
+const subTextCurved = ref(false) // 副文字是否弧形显示
+const subTextSpacing = ref(1.0) // 副文字间距
+const subTextMargin = ref(0) // 副文字位置调整
+const exportTransparent = ref(true) // 是否导出透明背景
+const wearLevel = ref(0) // 印章旧度（0-50%）
+const damageStyle = ref('none') // 破损样式
+
+const isPreviewFixed = ref(false)
+
+const sealCanvas = ref<HTMLCanvasElement>()
+
+// 构建字体样式字符串
+const buildFontStyle = (fontSize: number, weight: boolean, italic: boolean, family: string) => {
+  const fontWeight = weight ? 'bold' : 'normal'
+  const fontStyle = italic ? 'italic' : 'normal'
+  return `${fontStyle} ${fontWeight} ${fontSize}px ${family}, serif`
+}
+
+// 获取破损样式描述
+const getDamageDescription = (style: string) => {
+  const descriptions = {
+    none: '无破损效果',
+    random: '随机像素磨损，模拟自然使用痕迹',
+    cracks: '生成裂纹线条，模拟印章开裂',
+    edge: '边缘优先磨损，模拟边缘磨损',
+    chunks: '块状区域缺失，模拟大块破损',
+    stains: '污渍斑点效果，模拟墨水污染'
+  }
+  return descriptions[style as keyof typeof descriptions] || '未知样式'
+}
+
+// 绘制印章
+const drawSeal = async (transparent = false) => {
+  await nextTick()
+  const canvas = sealCanvas.value
+  if (!canvas) return
+  
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+  
+  // 清空画布
+  ctx.clearRect(0, 0, canvasWidth.value, canvasHeight.value)
+  
+  // 如果没有主文字，显示提示（仅在预览模式，非透明导出模式）
+  if (!mainText.value.trim() && !transparent) {
+    // 先绘制背景
+    ctx.fillStyle = backgroundColor.value
+    ctx.fillRect(0, 0, canvasWidth.value, canvasHeight.value)
+    
+    ctx.fillStyle = '#999999'
+    ctx.font = buildFontStyle(16, false, false, 'SimSun')
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText('请输入印章文字', canvasWidth.value / 2, canvasHeight.value / 2)
+    return
+  }
+  
+  // 如果有破损效果且是预览模式，需要特殊处理
+  const hasDamage = damageStyle.value !== 'none' && wearLevel.value > 0
+  
+  if (!transparent && hasDamage) {
+    // 预览模式且有破损效果：先在临时画布绘制完整印章，再复制到主画布
+    const tempCanvas = document.createElement('canvas')
+    tempCanvas.width = canvasWidth.value
+    tempCanvas.height = canvasHeight.value
+    const tempCtx = tempCanvas.getContext('2d')
+    if (!tempCtx) return
+    
+    // 在临时画布绘制印章
+    tempCtx.strokeStyle = sealColor.value
+    tempCtx.fillStyle = sealColor.value
+    
+    if (sealType.value.startsWith('company')) {
+      drawCompanySeal(tempCtx)
+    } else {
+      drawPersonalSeal(tempCtx)
+    }
+    
+    // 应用破损效果到临时画布
+    applyDamageEffect(tempCtx)
+    
+    // 绘制背景到主画布
+    ctx.fillStyle = backgroundColor.value
+    ctx.fillRect(0, 0, canvasWidth.value, canvasHeight.value)
+    
+    // 将处理好的印章复制到主画布
+    ctx.drawImage(tempCanvas, 0, 0)
+  } else {
+    // 正常绘制流程（导出模式或无破损效果）
+    if (!transparent) {
+      ctx.fillStyle = backgroundColor.value
+      ctx.fillRect(0, 0, canvasWidth.value, canvasHeight.value)
+    }
+    
+    // 根据印章类型绘制
+    if (sealType.value.startsWith('company')) {
+      drawCompanySeal(ctx)
+    } else {
+      drawPersonalSeal(ctx)
+    }
+    
+    // 应用破损效果
+    if (hasDamage) {
+      applyDamageEffect(ctx)
+    }
+  }
+}
+
+// 绘制公司印章
+const drawCompanySeal = (ctx: CanvasRenderingContext2D) => {
+  const centerX = canvasWidth.value / 2
+  const centerY = canvasHeight.value / 2
+  const radius = Math.min(canvasWidth.value, canvasHeight.value) * 0.4
+  
+  ctx.strokeStyle = sealColor.value
+  ctx.fillStyle = sealColor.value
+  
+  // 绘制外边框
+  ctx.lineWidth = outerBorderWidth.value
+  ctx.beginPath()
+  if (sealType.value === 'company_oval') {
+    // 椭圆形
+    ctx.ellipse(centerX, centerY, radius, radius * 0.8, 0, 0, 2 * Math.PI)
+  } else {
+    // 圆形
+    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
+  }
+  ctx.stroke()
+  
+  // 绘制内边框
+  if (innerBorderWidth.value > 0) {
+    ctx.lineWidth = innerBorderWidth.value
+    ctx.beginPath()
+    if (sealType.value === 'company_oval') {
+      ctx.ellipse(centerX, centerY, radius - 15, (radius - 15) * 0.8, 0, 0, 2 * Math.PI)
+    } else {
+      ctx.arc(centerX, centerY, radius - 15, 0, 2 * Math.PI)
+    }
+    ctx.stroke()
+  }
+  
+  // 绘制主文字（圆弧排列）
+  const textRadius = radius - 25 - textMargin.value // 应用外边距调整
+  drawCurvedText(ctx, mainText.value, centerX, centerY, textRadius, 0.8)
+  
+  // 绘制抬头文字
+  if (headerText.value.trim()) {
+    ctx.font = buildFontStyle(headerFontSize.value, headerFontWeight.value, headerFontItalic.value, headerFontFamily.value)
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText(headerText.value, centerX, centerY - radius * 0.3)
+  }
+  
+  // 绘制副文字
+  if (subText.value.trim()) {
+    if (subTextCurved.value) {
+      // 弧形显示
+      drawSubCurvedText(ctx, subText.value, centerX, centerY, radius - 25 + subTextMargin.value)
+    } else {
+      // 平直显示
+      ctx.font = buildFontStyle(subFontSize.value, subFontWeight.value, subFontItalic.value, subFontFamily.value)
+      ctx.textAlign = 'center'
+      ctx.textBaseline = 'middle'
+      ctx.fillText(subText.value, centerX, centerY + radius * 0.7 + subTextMargin.value)
+    }
+  }
+  
+  // 智能绘制中心图形和文字
+  const hasCenterText = centerText.value.trim()
+  const hasShape = centerShape.value !== ''
+  
+  if (hasShape && hasCenterText) {
+    // 同时显示图形和文字：自适应布局
+    const shapeSize = centerShapeSize.value
+    const textSize = centerFontSize.value
+    
+    // 计算自适应间距：基于图形和文字的大小
+    const baseSpacing = 5 // 基础间距
+    const shapeSpacing = shapeSize * 0.8 // 图形占用空间
+    const textSpacing = textSize * 0.6 // 文字占用空间
+    
+    // 图形位置：向上偏移（大小越大偏移越多）
+    const shapeY = centerY - baseSpacing - textSpacing
+    
+    // 文字位置：向下偏移（大小越大偏移越多）  
+    const textY = centerY + baseSpacing + shapeSpacing
+    
+    // 绘制图形
+    drawCenterShape(ctx, centerX, shapeY, shapeSize, centerShape.value)
+    
+    // 绘制文字
+    ctx.font = buildFontStyle(centerFontSize.value, centerFontWeight.value, centerFontItalic.value, centerFontFamily.value)
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText(centerText.value, centerX, textY)
+    
+  } else if (hasShape && !hasCenterText) {
+    // 只显示图形：居中显示
+    drawCenterShape(ctx, centerX, centerY, centerShapeSize.value, centerShape.value)
+  } else if (!hasShape && hasCenterText) {
+    // 只显示文字：居中显示
+    ctx.font = buildFontStyle(centerFontSize.value, centerFontWeight.value, centerFontItalic.value, centerFontFamily.value)
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText(centerText.value, centerX, centerY)
+  }
+  // 如果都不显示，则什么都不绘制
+}
+
+// 绘制个人印章
+const drawPersonalSeal = (ctx: CanvasRenderingContext2D) => {
+  const centerX = canvasWidth.value / 2
+  const centerY = canvasHeight.value / 2
+  
+  ctx.strokeStyle = sealColor.value
+  ctx.fillStyle = sealColor.value
+  ctx.lineWidth = outerBorderWidth.value
+  
+  // 绘制边框
+  ctx.beginPath()
+  if (sealType.value === 'personal_round') {
+    // 圆形
+    const size = Math.min(canvasWidth.value, canvasHeight.value) * 0.8
+    ctx.arc(centerX, centerY, size / 2, 0, 2 * Math.PI)
+  } else {
+    // 方形/矩形
+    const width = canvasWidth.value * 0.8
+    const height = canvasHeight.value * 0.8
+    ctx.rect(centerX - width / 2, centerY - height / 2, width, height)
+  }
+  ctx.stroke()
+  
+  // 绘制文字
+  const text = mainText.value.trim()
+  const textLength = text.length
+  
+  ctx.font = buildFontStyle(mainFontSize.value, mainFontWeight.value, mainFontItalic.value, mainFontFamily.value)
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  
+  if (textLength === 2) {
+    // 两字：上下排列
+    ctx.fillText(text[0], centerX, centerY - mainFontSize.value * 0.6)
+    ctx.fillText(text[1], centerX, centerY + mainFontSize.value * 0.6)
+  } else if (textLength === 3) {
+    // 三字：一字在上，两字在下
+    ctx.fillText(text[0], centerX, centerY - mainFontSize.value * 0.8)
+    ctx.fillText(text[1], centerX - mainFontSize.value * 0.7, centerY + mainFontSize.value * 0.4)
+    ctx.fillText(text[2], centerX + mainFontSize.value * 0.7, centerY + mainFontSize.value * 0.4)
+  } else if (textLength === 4) {
+    // 四字：田字格排列
+    ctx.fillText(text[0], centerX - mainFontSize.value * 0.6, centerY - mainFontSize.value * 0.6)
+    ctx.fillText(text[1], centerX + mainFontSize.value * 0.6, centerY - mainFontSize.value * 0.6)
+    ctx.fillText(text[2], centerX - mainFontSize.value * 0.6, centerY + mainFontSize.value * 0.6)
+    ctx.fillText(text[3], centerX + mainFontSize.value * 0.6, centerY + mainFontSize.value * 0.6)
+  } else {
+    // 其他情况：单行显示
+    ctx.fillText(text, centerX, centerY)
+  }
+}
+
+// 绘制弧形文字
+const drawCurvedText = (ctx: CanvasRenderingContext2D, text: string, centerX: number, centerY: number, radius: number, startAngle: number) => {
+  ctx.font = buildFontStyle(mainFontSize.value, mainFontWeight.value, mainFontItalic.value, mainFontFamily.value)
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  
+  // 计算文字弧度范围，让文字均匀分布在上半圆（从左上到右上）
+  const baseArc = Math.PI * 0.75 // 基础弧度范围，约135度
+  const totalArc = baseArc * textSpacing.value // 根据间距调整总弧度
+  const angleStep = totalArc / (text.length - 1) // 文字间的角度间隔
+  const centerAngle = Math.PI * 1.5 // 上半圆中心位置（270度，Canvas中的顶部）
+  const startPos = centerAngle - totalArc / 2 // 从中心向左偏移一半弧度作为起始位置
+  
+  // 椭圆形参数
+  const isOval = sealType.value === 'company_oval'
+  const radiusX = isOval ? radius : radius
+  const radiusY = isOval ? radius * 0.8 : radius // 椭圆形的Y轴半径是X轴的80%
+  
+  for (let i = 0; i < text.length; i++) {
+    const angle = startPos + i * angleStep // 从左到右递增
+    
+    // 根据印章类型计算文字位置
+    let x, y
+    if (isOval) {
+      // 椭圆形：使用椭圆方程计算位置
+      x = centerX + Math.cos(angle) * radiusX
+      y = centerY + Math.sin(angle) * radiusY
+    } else {
+      // 圆形：使用圆形方程计算位置
+      x = centerX + Math.cos(angle) * radius
+      y = centerY + Math.sin(angle) * radius
+    }
+    
+    ctx.save()
+    ctx.translate(x, y)
+    // 椭圆形和圆形使用相同的文字旋转角度
+    ctx.rotate(angle + Math.PI / 2)
+    
+    ctx.fillText(text[i], 0, 0)
+    ctx.restore()
+  }
+}
+
+// 绘制副文字弧形排列
+const drawSubCurvedText = (ctx: CanvasRenderingContext2D, text: string, centerX: number, centerY: number, radius: number) => {
+  ctx.font = buildFontStyle(subFontSize.value, subFontWeight.value, subFontItalic.value, subFontFamily.value)
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  
+  // 计算文字弧度范围，让文字均匀分布在下半圆，以底部中心为基准居中分布
+  const baseArc = Math.PI * 0.6 // 基础弧度范围，约108度
+  const totalArc = baseArc * subTextSpacing.value // 根据间距调整总弧度
+  const angleStep = totalArc / (text.length - 1) // 文字间的角度间隔
+  const centerAngle = Math.PI * 0.5 // 下半圆中心位置（90度，Canvas中的底部）
+  const startPos = centerAngle - totalArc / 2 // 从中心向左偏移一半弧度作为起始位置
+  
+  // 椭圆形参数
+  const isOval = sealType.value === 'company_oval'
+  const radiusX = isOval ? radius : radius
+  const radiusY = isOval ? radius * 0.8 : radius // 椭圆形的Y轴半径是X轴的80%
+  
+  for (let i = 0; i < text.length; i++) {
+    const angle = startPos + (text.length - 1 - i) * angleStep // 从右到左分布，修复顺序
+    
+    // 根据印章类型计算文字位置
+    let x, y
+    if (isOval) {
+      // 椭圆形：使用椭圆方程计算位置
+      x = centerX + Math.cos(angle) * radiusX
+      y = centerY + Math.sin(angle) * radiusY
+    } else {
+      // 圆形：使用圆形方程计算位置
+      x = centerX + Math.cos(angle) * radius
+      y = centerY + Math.sin(angle) * radius
+    }
+    
+    ctx.save()
+    ctx.translate(x, y)
+    // 修复文字旋转角度，下半圆的文字需要向内旋转
+    ctx.rotate(angle - Math.PI / 2)
+    
+    ctx.fillText(text[i], 0, 0)
+    ctx.restore()
+  }
+}
+
+// 绘制五角星
+const drawStar = (ctx: CanvasRenderingContext2D, centerX: number, centerY: number, radius: number) => {
+  const spikes = 5
+  const outerRadius = radius
+  const innerRadius = radius * 0.4
+  
+  ctx.beginPath()
+  for (let i = 0; i < spikes * 2; i++) {
+    const angle = (i * Math.PI) / spikes - Math.PI / 2
+    const r = i % 2 === 0 ? outerRadius : innerRadius
+    const x = centerX + Math.cos(angle) * r
+    const y = centerY + Math.sin(angle) * r
+    
+    if (i === 0) {
+      ctx.moveTo(x, y)
+    } else {
+      ctx.lineTo(x, y)
+    }
+  }
+  ctx.closePath()
+  ctx.fill()
+}
+
+// 绘制中心图形
+const drawCenterShape = (ctx: CanvasRenderingContext2D, centerX: number, centerY: number, size: number, shape: string) => {
+  ctx.fillStyle = sealColor.value
+  
+  switch (shape) {
+    case 'star':
+      drawStar(ctx, centerX, centerY, size)
+      break
+      
+    case 'circle':
+      ctx.beginPath()
+      ctx.arc(centerX, centerY, size, 0, 2 * Math.PI)
+      ctx.fill()
+      break
+      
+    case 'diamond':
+      ctx.beginPath()
+      ctx.moveTo(centerX, centerY - size)
+      ctx.lineTo(centerX + size, centerY)
+      ctx.lineTo(centerX, centerY + size)
+      ctx.lineTo(centerX - size, centerY)
+      ctx.closePath()
+      ctx.fill()
+      break
+      
+    case 'hexagram':
+      // 绘制六角星（两个三角形重叠）
+      const hexSize = size * 0.8
+      ctx.beginPath()
+      // 第一个三角形（向上）
+      for (let i = 0; i < 3; i++) {
+        const angle = (i * 2 * Math.PI) / 3 - Math.PI / 2
+        const x = centerX + Math.cos(angle) * hexSize
+        const y = centerY + Math.sin(angle) * hexSize
+        if (i === 0) ctx.moveTo(x, y)
+        else ctx.lineTo(x, y)
+      }
+      ctx.closePath()
+      ctx.fill()
+      
+      ctx.beginPath()
+      // 第二个三角形（向下）
+      for (let i = 0; i < 3; i++) {
+        const angle = (i * 2 * Math.PI) / 3 + Math.PI / 2
+        const x = centerX + Math.cos(angle) * hexSize
+        const y = centerY + Math.sin(angle) * hexSize
+        if (i === 0) ctx.moveTo(x, y)
+        else ctx.lineTo(x, y)
+      }
+      ctx.closePath()
+      ctx.fill()
+      break
+      
+    case 'triangle':
+      ctx.beginPath()
+      ctx.moveTo(centerX, centerY - size)
+      ctx.lineTo(centerX + size * 0.866, centerY + size * 0.5)
+      ctx.lineTo(centerX - size * 0.866, centerY + size * 0.5)
+      ctx.closePath()
+      ctx.fill()
+      break
+  }
+}
+
+// 应用破损效果
+const applyDamageEffect = (ctx: CanvasRenderingContext2D) => {
+  if (damageStyle.value === 'none' || wearLevel.value === 0) return
+  
+  const width = canvasWidth.value
+  const height = canvasHeight.value
+  const intensity = wearLevel.value / 50 // 0-1.0 的强度，提高敏感度
+  
+  // 使用destination-out合成模式，让绘制的内容从印章中"减去"
+  ctx.globalCompositeOperation = 'destination-out'
+  
+  switch (damageStyle.value) {
+    case 'random':
+      applyRandomNoise(ctx, width, height, intensity)
+      break
+    case 'cracks':
+      applyCracks(ctx, width, height, intensity)
+      break
+    case 'edge':
+      applyEdgeWear(ctx, width, height, intensity)
+      break
+    case 'chunks':
+      applyChunks(ctx, width, height, intensity)
+      break
+    case 'stains':
+      applyStains(ctx, width, height, intensity)
+      break
+  }
+  
+  // 恢复正常合成模式
+  ctx.globalCompositeOperation = 'source-over'
+}
+
+// 简单随机数生成器（基于文字内容，保证同样的文字产生相同的效果）
+const getRandomGenerator = () => {
+  let seed = 12345
+  const text = mainText.value || 'default'
+  for (let i = 0; i < text.length; i++) {
+    seed += text.charCodeAt(i) * (i + 1)
+  }
+  seed += sealSize.value
+  
+  return (min: number = 0, max: number = 1) => {
+    seed = (seed * 9301 + 49297) % 233280
+    const value = seed / 233280
+    return min + value * (max - min)
+  }
+}
+
+// 随机磨损效果
+const applyRandomNoise = (ctx: CanvasRenderingContext2D, width: number, height: number, intensity: number) => {
+  const random = getRandomGenerator()
+  // 基础斑点数量 + 随强度增加的斑点
+  const baseSpots = 8 + Math.floor(intensity * 10) // 基础8-18个斑点
+  const additionalSpots = Math.floor(intensity * 50) + Math.floor(intensity * intensity * 80) // 大幅增加斑点数量
+  const totalSpots = baseSpots + additionalSpots
+  
+  for (let i = 0; i < totalSpots; i++) {
+    const centerX = random(0, width)
+    const centerY = random(0, height)
+    
+    // 斑点大小：基础大小 + 随强度增长
+    const baseSize = random(0.8, 3) // 基础随机大小
+    const growthFactor = i < baseSpots ? 1 : (1 + intensity * 3) // 后期增加的斑点更大
+    const size = baseSize * growthFactor + (intensity * 5) + (intensity * intensity * 8) // 增加大小增长幅度
+    
+    // 随机透明度：基础透明度 + 随机变化
+    const baseAlpha = 0.5 + intensity * 0.4 // 提高基础透明度
+    const randomAlpha = baseAlpha + random(-0.15, 0.25) // 添加随机变化
+    const finalAlpha = Math.max(0.3, Math.min(0.95, randomAlpha)) // 提高透明度范围
+    
+    // 创建白色径向渐变斑点（参考污渍效果）
+    const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, size)
+    gradient.addColorStop(0, `rgba(255, 255, 255, ${finalAlpha})`)
+    gradient.addColorStop(0.6, `rgba(255, 255, 255, ${finalAlpha * 0.5})`)
+    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)')
+    
+    ctx.fillStyle = gradient
+    ctx.beginPath()
+    ctx.arc(centerX, centerY, size, 0, Math.PI * 2)
+    ctx.fill()
+  }
+}
+
+// 裂纹效果
+const applyCracks = (ctx: CanvasRenderingContext2D, width: number, height: number, intensity: number) => {
+  const random = getRandomGenerator()
+  const crackCount = Math.floor(intensity * 8) + 3 // 增加裂纹数量
+  
+  ctx.strokeStyle = 'rgba(255, 255, 255, 0.9)' // 白色半透明裂纹
+  ctx.lineCap = 'round'
+  
+  for (let i = 0; i < crackCount; i++) {
+    const startX = random(width * 0.1, width * 0.9) // 扩大范围
+    const startY = random(height * 0.1, height * 0.9)
+    const angle = random(0, Math.PI * 2)
+    const length = random(30, 120) * intensity // 增加长度
+    const segments = Math.floor(length / 5)
+    
+    // 裂纹宽度：线性增长 + 平方增长
+    const baseWidth = random(0.8, 1.5)
+    ctx.lineWidth = baseWidth + (intensity * 2) + (intensity * intensity * 4) // 更明显的增长
+    ctx.beginPath()
+    ctx.moveTo(startX, startY)
+    
+    let currentX = startX
+    let currentY = startY
+    
+    for (let j = 0; j < segments; j++) {
+      const deviation = (random(-1, 1) * 10) * intensity
+      const segmentAngle = angle + deviation * Math.PI / 180
+      const segmentLength = length / segments
+      
+      currentX += Math.cos(segmentAngle) * segmentLength
+      currentY += Math.sin(segmentAngle) * segmentLength
+      
+      ctx.lineTo(currentX, currentY)
+    }
+    
+    ctx.stroke()
+  }
+}
+
+// 边缘磨损效果
+const applyEdgeWear = (ctx: CanvasRenderingContext2D, width: number, height: number, intensity: number) => {
+  const random = getRandomGenerator()
+  const centerX = width / 2
+  const centerY = height / 2
+  const radius = Math.min(width, height) * 0.45
+  
+  // 在边缘附近生成磨损点
+  const wearCount = Math.floor(radius * intensity * 0.8) + 30 // 增加磨损点数量
+  
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.8)' // 白色半透明磨损点
+  
+  for (let i = 0; i < wearCount; i++) {
+    const angle = random(0, Math.PI * 2)
+    const distance = radius + random(-20, 8) // 扩大磨损范围
+    const x = centerX + Math.cos(angle) * distance
+    const y = centerY + Math.sin(angle) * distance
+    // 磨损点大小：线性增长 + 平方增长
+    const baseSize = random(0.8, 1.8)
+    const size = baseSize + (intensity * 2.5) + (intensity * intensity * 3) // 更明显的增长
+    
+    ctx.beginPath()
+    ctx.arc(x, y, size, 0, Math.PI * 2)
+    ctx.fill()
+  }
+}
+
+// 块状缺失效果
+const applyChunks = (ctx: CanvasRenderingContext2D, width: number, height: number, intensity: number) => {
+  const random = getRandomGenerator()
+  const chunkCount = Math.floor(intensity * 10) + 5 // 增加块状数量
+  
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.9)' // 白色半透明块状
+  
+  for (let i = 0; i < chunkCount; i++) {
+    const centerX = random(width * 0.05, width * 0.95) // 扩大范围
+    const centerY = random(height * 0.05, height * 0.95)
+    // 块状大小：线性增长 + 平方增长
+    const baseSize = random(2, 5)
+    const size = baseSize + (intensity * 8) + (intensity * intensity * 15) // 更明显的增长
+    
+    // 绘制不规则块状
+    ctx.beginPath()
+    const points = 6 + Math.floor(random(0, 4))
+    
+    for (let j = 0; j < points; j++) {
+      const angle = (j / points) * Math.PI * 2
+      const radius = size * (0.7 + random(0, 0.6))
+      const x = centerX + Math.cos(angle) * radius
+      const y = centerY + Math.sin(angle) * radius
+      
+      if (j === 0) {
+        ctx.moveTo(x, y)
+      } else {
+        ctx.lineTo(x, y)
+      }
+    }
+    
+    ctx.closePath()
+    ctx.fill()
+  }
+}
+
+// 污渍斑点效果
+const applyStains = (ctx: CanvasRenderingContext2D, width: number, height: number, intensity: number) => {
+  const random = getRandomGenerator()
+  const stainCount = Math.floor(intensity * 20) + 8 // 增加污渍数量
+  
+  for (let i = 0; i < stainCount; i++) {
+    const centerX = random(0, width)
+    const centerY = random(0, height)
+    // 污渍大小：线性增长 + 平方增长
+    const baseSize = random(1.5, 4)
+    const size = baseSize + (intensity * 6) + (intensity * intensity * 10) // 更明显的增长
+    
+    // 创建白色径向渐变污渍
+    const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, size)
+    gradient.addColorStop(0, `rgba(255, 255, 255, ${0.7 + intensity * 0.3})`)
+    gradient.addColorStop(0.7, `rgba(255, 255, 255, ${0.3 + intensity * 0.2})`)
+    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)')
+    
+    ctx.fillStyle = gradient
+    ctx.beginPath()
+    ctx.arc(centerX, centerY, size, 0, Math.PI * 2)
+    ctx.fill()
+  }
+}
+
+// 下载印章
+const downloadSeal = async () => {
+  
+  try {
+    // 创建临时画布用于导出
+    const tempCanvas = document.createElement('canvas')
+    tempCanvas.width = canvasWidth.value
+    tempCanvas.height = canvasHeight.value
+    const tempCtx = tempCanvas.getContext('2d')
+    if (!tempCtx) return
+    
+    // 如果不是透明导出，先绘制背景
+    if (!exportTransparent.value) {
+      tempCtx.fillStyle = backgroundColor.value
+      tempCtx.fillRect(0, 0, canvasWidth.value, canvasHeight.value)
+    }
+    
+    // 绘制印章内容
+    tempCtx.strokeStyle = sealColor.value
+    tempCtx.fillStyle = sealColor.value
+    
+    // 根据印章类型绘制
+    if (sealType.value.startsWith('company')) {
+      drawCompanySeal(tempCtx)
+    } else {
+      drawPersonalSeal(tempCtx)
+    }
+    
+    // 应用破损效果
+    if (damageStyle.value !== 'none' && wearLevel.value > 0) {
+      applyDamageEffect(tempCtx)
+    }
+    
+    // 生成下载链接
+    const link = document.createElement('a')
+    const backgroundSuffix = exportTransparent.value ? 'transparent' : 'background'
+    const damageSuffix = damageStyle.value !== 'none' && wearLevel.value > 0 ? `-${damageStyle.value}${wearLevel.value}` : ''
+    const namePrefix = mainText.value.trim() || centerText.value.trim() || 'custom'
+    link.download = `seal-${namePrefix}-${backgroundSuffix}${damageSuffix}-${Date.now()}.png`
+    link.href = tempCanvas.toDataURL('image/png')
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  } catch (error) {
+    console.error('下载失败:', error)
+  }
+}
+
+// 清空所有内容
+const clearAll = () => {
+  mainText.value = ''
+  centerText.value = '印'
+  headerText.value = ''
+  subText.value = ''
+  personalHeight.value = 1.0
+  
+  // 重置所有字体样式
+  mainFontWeight.value = false
+  mainFontItalic.value = false
+  mainFontFamily.value = 'SimSun'
+  
+  centerFontWeight.value = false
+  centerFontItalic.value = false
+  centerFontFamily.value = 'SimSun'
+  
+  headerFontWeight.value = false
+  headerFontItalic.value = false
+  headerFontFamily.value = 'SimSun'
+  
+  subFontWeight.value = false
+  subFontItalic.value = false
+  subFontFamily.value = 'SimSun'
+  subTextCurved.value = false
+  subTextSpacing.value = 1.0
+  subTextMargin.value = 0
+  centerShape.value = 'star'
+  centerShapeSize.value = 15
+  exportTransparent.value = false
+  wearLevel.value = 0
+  damageStyle.value = 'none'
+  
+  // 清空后重新绘制
+  drawSeal()
+}
+
+// 监听所有参数变化，实时重新绘制
+watch([sealType, sealSize, canvasWidth, canvasHeight, personalHeight, 
+       mainFontWeight, mainFontItalic, mainFontFamily,
+       centerFontWeight, centerFontItalic, centerFontFamily,
+       headerFontWeight, headerFontItalic, headerFontFamily,
+       subFontWeight, subFontItalic, subFontFamily, subTextCurved, subTextSpacing, subTextMargin,
+       sealColor, backgroundColor, mainText, centerText, headerText, subText, 
+       mainFontSize, centerFontSize, headerFontSize, subFontSize, 
+       outerBorderWidth, innerBorderWidth, showStar, centerShape, centerShapeSize, textSpacing, textMargin, wearLevel, damageStyle], () => {
+  drawSeal()
+}, { deep: true })
+
+// 组件挂载时绘制初始印章
+onMounted(() => {
+  drawSeal()
+  
+  // 延迟启用fixed定位，避免页面加载时的闪烁
+  setTimeout(() => {
+    isPreviewFixed.value = true
+  }, 100)
+})
+</script>
+
+<style scoped>
+.slider {
+  @apply appearance-none bg-gray-200 dark:bg-gray-700 rounded-lg h-2 outline-none;
+}
+
+.slider::-webkit-slider-thumb {
+  @apply appearance-none w-4 h-4 rounded-full cursor-pointer;
+  background-color: rgb(99, 102, 241);
+}
+
+.slider::-moz-range-thumb {
+  @apply w-4 h-4 rounded-full cursor-pointer border-none;
+  background-color: rgb(99, 102, 241);
+}
+</style> 
\ No newline at end of file
diff --git a/src/config/i18n/en.ts b/src/config/i18n/en.ts
index f2ba71a..042b890 100644
--- a/src/config/i18n/en.ts
+++ b/src/config/i18n/en.ts
@@ -99,114 +99,54 @@ export default {
       unicode_decode: 'Unicode Decode'
     },
     chrome_bookmark_recovery: {
-      title: 'Chrome Bookmarks Recovery Tool',
-      description: 'Recover your lost Chrome bookmarks from local backup files or Google server',
-      
-      // 标签页
-      windows: 'Windows',
-      mac: 'Mac',
-      linux: 'Linux',
-      google: 'Google Server',
-      
-      // 文件上传区域
-      fileUpload: {
-        title: 'Choose a file or drag it here',
-        dragHint: 'Drag Chrome bookmark files here',
-        chooseFile: 'Choose file',
-        dropHint: 'Search with the keyword of "Bookmarks" and select all the files found.',
-        loading: 'Loading...',
-        ready: 'Download ready',
-        downloaded: 'Downloaded',
-        error: 'Error! The file is invalid. Try again!',
-        bookmarksFound: 'bookmarks found'
-      },
-      
-      // 操作系统说明
-      instructions: {
-        windows: {
-          title: 'Here is how to recover your lost bookmarks (Windows):',
-          steps: [
-            'Copy C:\\Users\\%username%\\AppData\\Local\\Google\\Chrome\\User Data into File Explorer.',
-            'In search bar, type Bookmarks, you will see a list of files named Bookmarks and/or Bookmarks.bak. (Note: If there is more than one user using the same Chrome, bookmarks from other users will be listed too)',
-            'Select all the files with mouse and drag them to the block below.',
-            'Download all the HTML files.',
-            'Open each HTML file with Chrome and determine the HTML file that contains your bookmarks. (Note: The largest file is most likely the correct one)',
-            'In your Chrome browser, click the Chrome menu icon and go to Bookmarks > Bookmark Manager.',
-            'Click the menu icon beside search bar and click "Import Bookmarks".',
-            'Select the HTML file that contains your bookmarks.',
-            'Your bookmarks should now be imported back to Chrome.'
-          ]
-        },
-        mac: {
-          title: 'Here is how to recover your lost bookmarks (Mac):',
-          steps: [
-            'In the Mac menu bar at the top of the screen, click Go.',
-            'Select Go to Folder.',
-            'Type ~/Library/Application Support/Google/Chrome and click Go.',
-            'In search bar, type Bookmarks, you will see a list of files named Bookmarks and/or Bookmarks.bak. (Note: If there is more than one user using the same Chrome, bookmarks from other users will be listed too)',
-            'Select all the files with mouse and drag them to the block below.',
-            'Download all the HTML files.',
-            'Open each HTML file with Chrome and determine the HTML file that contains your bookmarks. (Note: The largest file is most likely the correct one)',
-            'In your Chrome browser, click the Chrome menu icon and go to Bookmarks > Bookmark Manager.',
-            'Click the menu icon beside search bar and click "Import Bookmarks".',
-            'Select the HTML file that contains your bookmarks.',
-            'Your bookmarks should now be imported back to Chrome.'
-          ]
-        },
-        linux: {
-          title: 'Here is how to recover your lost bookmarks (Linux):',
-          steps: [
-            'Open your file explorer (Nautilus, Dolphin ...).',
-            'Go to ~/.config/google-chrome (Use Ctrl+L on Nautilus).',
-            'Search for Bookmarks*, you will see a list of files named Bookmarks and/or Bookmarks.bak. (Note: If there is more than one user using the same Chrome, bookmarks from other users will be listed too)',
-            'Select all the files with mouse and drag them to the block below.',
-            'Download all the HTML files.',
-            'Open each HTML file with Chrome and determine the HTML file that contains your bookmarks. (Note: The largest file is most likely the correct one)',
-            'In your Chrome browser, click the Chrome menu icon and go to Bookmarks > Bookmark Manager.',
-            'Click the menu icon beside search bar and click "Import Bookmarks".',
-            'Select the HTML file that contains your bookmarks.',
-            'Your bookmarks should now be imported back to Chrome.'
-          ]
-        },
-        google: {
-          title: 'If you are sure that Chrome sync data stored in Google server still have your bookmarks, here is how to retrieve them from Google server:',
-          steps: [
-            'Go to Google Takeout and sign in to the Google Account used for Chrome Sync.',
-            'Click the "Select None" button.',
-            'Check "Chrome" in product list.',
-            'Expand "All Chrome data types".',
-            'Click the "Select Chrome data" option.',
-            'In the popup, check the "Bookmarks" option and uncheck the rest.',
-            'Scroll down to the bottom of the page and click "Next" button.',
-            'Click the "Create archive" button.',
-            'Download and unzip the archive.',
-            'In the unzipped folder, navigate to "Chrome" folder. The HTML file named "Bookmarks" is the one we need.',
-            'In your Chrome browser, click the Chrome menu icon and go to Bookmarks > Bookmark Manager.',
-            'Click the menu icon beside search bar and click "Import Bookmarks".',
-            'Select the HTML file that contains your bookmarks.',
-            'Your bookmarks should now be imported back to Chrome.'
-          ]
-        }
-      },
-      
-      // 其他恢复方式
-      otherMethods: {
-        title: 'Other ways to recover bookmarks',
-        personalBackup: {
-          title: 'Personal backup',
-          content: 'In the case when backups of your computer are available, find the bookmarks files in the backups, upload them to this tool and continue with the steps above.'
-        },
-        oldDevices: {
-          title: 'Recover from old devices',
-          content: 'Do you have a device (e.g: old laptop) that is signed in to your Google Account and it hasn\'t been synced since the moment your bookmarks were lost? If so, find the files in this device, upload them to this tool and continue with the steps above.'
-        },
-        tipsAndTricks: {
-          title: 'Tips and tricks',
-          content: 'You can use this tool or Export Bookmarks function in Bookmark Manager to generate HTML file that can be used as archive/backup of your bookmarks. Regularly making backup is useful in case your bookmarks get lost again in the future.'
-        }
-      },
-      
-      disclaimer: 'Disclaimer: this is not an official Google product.'
+      title: 'Chrome Bookmark Recovery',
+      description: 'Chrome browser bookmark file recovery tool',
+      upload_file: 'Upload Bookmark File',
+      file_analysis: 'File Analysis',
+      bookmark_list: 'Bookmark List',
+      export_bookmarks: 'Export Bookmarks',
+      recovery_success: 'Recovery Successful',
+      file_format_error: 'File Format Error'
+    },
+    seal_generator: {
+      title: 'Seal Generator',
+      description: 'Electronic seal creation tool, supports company and personal seals',
+      basic_settings: 'Basic Settings',
+      text_settings: 'Text Settings',
+      border_settings: 'Border Settings',
+      seal_type: 'Seal Type',
+      company_round: 'Company Round Seal',
+      company_oval: 'Company Oval Seal',
+      personal_square: 'Personal Square Seal',
+      personal_round: 'Personal Round Seal',
+      seal_size: 'Seal Size',
+      seal_color: 'Seal Color',
+      background_color: 'Background Color',
+      main_text: 'Main Text',
+      center_text: 'Center Text',
+      header_text: 'Header Text',
+      sub_text: 'Sub Text',
+      font_size: 'Font Size',
+      main_font_size: 'Main Font Size',
+      center_font_size: 'Center Font Size',
+      outer_border_width: 'Outer Border Width',
+      inner_border_width: 'Inner Border Width',
+      show_star: 'Show Star',
+      generate_seal: 'Generate Seal',
+      download_seal: 'Download Seal',
+      clear_all: 'Clear All',
+      seal_preview: 'Seal Preview',
+      company_name_placeholder: 'Company Name',
+      personal_name_placeholder: 'Name',
+      center_text_placeholder: 'Seal',
+      header_text_placeholder: 'e.g., Head Office, Branch',
+      sub_text_placeholder: 'e.g., Co., Ltd., Corp.',
+      preview_tip: 'Please fill in seal information and click generate',
+      usage_instructions: 'Usage Instructions',
+      company_seal_features: 'Company Seal Features',
+      personal_seal_features: 'Personal Seal Features',
+      important_notice: 'Important Notice',
+      legal_notice: 'The seals generated by this tool are for learning and testing purposes only. Do not use for illegal purposes. Official company seals need to be registered with relevant authorities.'
     }
   }
 } 
\ No newline at end of file
diff --git a/src/config/i18n/zh.ts b/src/config/i18n/zh.ts
index 2adad54..f25b987 100644
--- a/src/config/i18n/zh.ts
+++ b/src/config/i18n/zh.ts
@@ -550,114 +550,54 @@ export default {
       validate: '验证'
     },
     chrome_bookmark_recovery: {
-      title: 'Chrome书签恢复工具',
-      description: '恢复丢失的Chrome书签，支持从本地备份文件或Google服务器导入',
-      
-      // 标签页
-      windows: 'Windows',
-      mac: 'Mac',
-      linux: 'Linux',
-      google: 'Google服务器',
-      
-      // 文件上传区域
-      fileUpload: {
-        title: '选择文件或拖拽到此处',
-        dragHint: '拖拽Chrome书签文件到此处',
-        chooseFile: '选择文件',
-        dropHint: '使用关键词"Bookmarks"搜索并选择找到的所有文件',
-        loading: '加载中...',
-        ready: '准备下载',
-        downloaded: '已下载',
-        error: '错误！文件无效，请重试！',
-        bookmarksFound: '个书签'
-      },
-      
-      // 操作系统说明
-      instructions: {
-        windows: {
-          title: '以下是恢复丢失书签的方法 (Windows):',
-          steps: [
-            '复制 C:\\Users\\%username%\\AppData\\Local\\Google\\Chrome\\User Data 到文件资源管理器',
-            '在搜索栏中输入 Bookmarks，你会看到名为 Bookmarks 和/或 Bookmarks.bak 的文件列表（注意：如果有多个用户使用同一个Chrome，其他用户的书签也会被列出）',
-            '用鼠标选择所有文件并拖拽到下面的区域',
-            '下载所有HTML文件',
-            '用Chrome打开每个HTML文件，确定包含你的书签的HTML文件（注意：最大的文件很可能是正确的）',
-            '在Chrome浏览器中，点击Chrome菜单图标，进入 书签 > 书签管理器',
-            '点击搜索栏旁边的菜单图标，点击"导入书签"',
-            '选择包含你的书签的HTML文件',
-            '你的书签现在应该已导入回Chrome'
-          ]
-        },
-        mac: {
-          title: '以下是恢复丢失书签的方法 (Mac):',
-          steps: [
-            '在屏幕顶部的Mac菜单栏中，点击前往',
-            '选择前往文件夹',
-            '输入 ~/Library/Application Support/Google/Chrome 并点击前往',
-            '在搜索栏中输入 Bookmarks，你会看到名为 Bookmarks 和/或 Bookmarks.bak 的文件列表（注意：如果有多个用户使用同一个Chrome，其他用户的书签也会被列出）',
-            '用鼠标选择所有文件并拖拽到下面的区域',
-            '下载所有HTML文件',
-            '用Chrome打开每个HTML文件，确定包含你的书签的HTML文件（注意：最大的文件很可能是正确的）',
-            '在Chrome浏览器中，点击Chrome菜单图标，进入 书签 > 书签管理器',
-            '点击搜索栏旁边的菜单图标，点击"导入书签"',
-            '选择包含你的书签的HTML文件',
-            '你的书签现在应该已导入回Chrome'
-          ]
-        },
-        linux: {
-          title: '以下是恢复丢失书签的方法 (Linux):',
-          steps: [
-            '打开你的文件管理器（Nautilus, Dolphin ...）',
-            '进入 ~/.config/google-chrome（在Nautilus中使用Ctrl+L）',
-            '搜索 Bookmarks*，你会看到名为 Bookmarks 和/或 Bookmarks.bak 的文件列表（注意：如果有多个用户使用同一个Chrome，其他用户的书签也会被列出）',
-            '用鼠标选择所有文件并拖拽到下面的区域',
-            '下载所有HTML文件',
-            '用Chrome打开每个HTML文件，确定包含你的书签的HTML文件（注意：最大的文件很可能是正确的）',
-            '在Chrome浏览器中，点击Chrome菜单图标，进入 书签 > 书签管理器',
-            '点击搜索栏旁边的菜单图标，点击"导入书签"',
-            '选择包含你的书签的HTML文件',
-            '你的书签现在应该已导入回Chrome'
-          ]
-        },
-        google: {
-          title: '如果你确信存储在Google服务器中的Chrome同步数据仍有你的书签，以下是从Google服务器检索它们的方法:',
-          steps: [
-            '前往 Google Takeout 并登录用于Chrome同步的Google账户',
-            '点击"全不选"按钮',
-            '在产品列表中勾选"Chrome"',
-            '展开"所有Chrome数据类型"',
-            '点击"选择Chrome数据"选项',
-            '在弹窗中，勾选"书签"选项并取消选择其余选项',
-            '滚动到页面底部并点击"下一步"按钮',
-            '点击"创建归档"按钮',
-            '下载并解压归档文件',
-            '在解压的文件夹中，导航到"Chrome"文件夹。名为"Bookmarks"的HTML文件就是我们需要的',
-            '在Chrome浏览器中，点击Chrome菜单图标，进入 书签 > 书签管理器',
-            '点击搜索栏旁边的菜单图标，点击"导入书签"',
-            '选择包含你的书签的HTML文件',
-            '你的书签现在应该已导入回Chrome'
-          ]
-        }
-      },
-      
-      // 其他恢复方式
-      otherMethods: {
-        title: '其他恢复书签的方法',
-        personalBackup: {
-          title: '个人备份',
-          content: '在计算机备份可用的情况下，在备份中找到书签文件，将它们上传到此工具并继续上述步骤。'
-        },
-        oldDevices: {
-          title: '从旧设备恢复',
-          content: '你是否有一台设备（例如：旧笔记本电脑）已登录到你的Google账户，并且自你的书签丢失以来没有同步过？如果是这样，在该设备中找到文件，将它们上传到此工具并继续上述步骤。'
-        },
-        tipsAndTricks: {
-          title: '提示和技巧',
-          content: '你可以使用此工具或书签管理器中的"导出书签"功能来生成可用作书签存档/备份的HTML文件。定期制作备份对于防止将来再次丢失书签很有用。'
-        }
-      },
-      
-      disclaimer: '免责声明：这不是Google的官方产品。'
+      title: 'Chrome书签恢复',
+      description: 'Chrome浏览器书签文件恢复工具',
+      upload_file: '上传书签文件',
+      file_analysis: '文件分析',
+      bookmark_list: '书签列表',
+      export_bookmarks: '导出书签',
+      recovery_success: '恢复成功',
+      file_format_error: '文件格式错误'
+    },
+    seal_generator: {
+      title: '印章生成器',
+      description: '电子印章制作工具，支持公司印章和个人印章',
+      basic_settings: '基础参数',
+      text_settings: '文字设置',
+      border_settings: '边框设置',
+      seal_type: '印章样式',
+      company_round: '公司圆章',
+      company_oval: '公司椭圆章',
+      personal_square: '个人方章',
+      personal_round: '个人圆章',
+      seal_size: '印章大小',
+      seal_color: '印章颜色',
+      background_color: '背景颜色',
+      main_text: '主文字',
+      center_text: '中心文字',
+      header_text: '抬头文字',
+      sub_text: '副文字',
+      font_size: '字体大小',
+      main_font_size: '主文字大小',
+      center_font_size: '中心文字大小',
+      outer_border_width: '外边线宽度',
+      inner_border_width: '内边线宽度',
+      show_star: '显示五角星',
+      generate_seal: '生成印章',
+      download_seal: '下载印章',
+      clear_all: '清空',
+      seal_preview: '印章预览',
+      company_name_placeholder: '公司名称',
+      personal_name_placeholder: '姓名',
+      center_text_placeholder: '印',
+      header_text_placeholder: '例：总公司、分公司',
+      sub_text_placeholder: '例：有限公司、股份有限公司',
+      preview_tip: '请填写印章信息并点击生成',
+      usage_instructions: '使用说明',
+      company_seal_features: '公司印章功能',
+      personal_seal_features: '个人印章功能',
+      important_notice: '重要提示',
+      legal_notice: '本工具生成的印章仅供学习和测试使用，请勿用于非法用途。正式的公司印章需要到相关部门进行备案注册。'
     }
   }
 } 
\ No newline at end of file
diff --git a/src/config/tools.ts b/src/config/tools.ts
index 0fbbc85..ce4bf16 100644
--- a/src/config/tools.ts
+++ b/src/config/tools.ts
@@ -2,7 +2,7 @@ import {
   faCode, faExchangeAlt, faClock, faGlobe, faLink, faLock, 
   faImage, faCogs, faFileCode, faKey, faFont, 
   faCalendarAlt, faPalette, faEdit, faRuler, faNetworkWired,
-  faEraser, faCalculator, faFileAlt, faBookmark
+  faEraser, faCalculator, faFileAlt, faBookmark, faStamp
 } from '@fortawesome/free-solid-svg-icons'
 import type { Tool } from '@/types/tools'
 
@@ -181,6 +181,12 @@ const tools: Tool[] = [
     icon: faBookmark,
     category: ['common', 'file'],
     keywords: ['chrome书签', '书签恢复', '书签导入', '书签', 'chrome', 'bookmark', '书签备份', '书签导出', 'shuqian', 'sq', 'huifu', 'hf', 'chrome书签恢复', 'chromehuifu']
+  },
+  {
+    code: 'seal_generator',
+    icon: faStamp,
+    category: ['common', 'image'],
+    keywords: ['印章', '印章生成', '电子印章', '公司印章', '个人印章', '印章制作', 'seal', 'stamp', 'yinzhang', 'yz', 'yinzhangshengcheng', 'yzsc', 'gongsiyz', 'gerenyinzhang', 'seal generator']
   }
 ]
 
diff --git a/src/main.ts b/src/main.ts
index c3b027c..234b6f9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,7 +19,8 @@ import {
   faExternalLinkAlt, faCopy, faCheck, faCompress, faExpand,
   faTrash, faSync, faFolderOpen, faFolder, faSpinner,
   faSave, faHistory, faEdit as faEditIcon, faTrashAlt,
-  faSun, faMoon, faHome, faArrowLeft, faArrowUp, faClipboard
+  faSun, faMoon, faHome, faArrowLeft, faArrowUp, faClipboard,
+  faStamp, faDownload, faEye, faInfoCircle, faExclamationTriangle
 } from '@fortawesome/free-solid-svg-icons'
 
 import { faStar as farStar } from '@fortawesome/free-regular-svg-icons'
@@ -39,6 +40,7 @@ library.add(
   faTrash, faSync, faFolderOpen, faFolder, faSpinner,
   faSave, faHistory, faEditIcon, faTrashAlt,
   faSun, faMoon, faHome, faArrowLeft, faArrowUp, faClipboard,
+  faStamp, faDownload, faEye, faInfoCircle, faExclamationTriangle,
   farStar, faGithub
 )
 
diff --git a/src/views/ToolView.vue b/src/views/ToolView.vue
index a4bdec1..06fef3b 100644
--- a/src/views/ToolView.vue
+++ b/src/views/ToolView.vue
@@ -150,7 +150,8 @@ const toolComponentMap: Record<string, () => Promise<any>> = {
   image_to_ico: () => import('@/components/tools/ImageToIco.vue'),
   cron_generator: () => import('@/components/tools/CronGenerator.vue'),
   http_tester: () => import('@/components/tools/HttpTester.vue'),
-  chrome_bookmark_recovery: () => import('@/components/tools/ChromeBookmarkRecovery.vue')
+  chrome_bookmark_recovery: () => import('@/components/tools/ChromeBookmarkRecovery.vue'),
+  seal_generator: () => import('@/components/tools/SealGenerator.vue')
 }
 
 // 加载工具组件
diff --git a/test-seal.html b/test-seal.html
new file mode 100644
index 0000000..4a1054f
--- /dev/null
+++ b/test-seal.html
@@ -0,0 +1,290 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>印章生成器测试</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        .controls {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+        .form-group {
+            display: flex;
+            flex-direction: column;
+        }
+        label {
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+        input, select, button {
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        button {
+            background: #6366f1;
+            color: white;
+            cursor: pointer;
+            border: none;
+        }
+        button:hover {
+            background: #5855eb;
+        }
+        .preview {
+            text-align: center;
+            padding: 20px;
+            background: #f9f9f9;
+            border-radius: 8px;
+        }
+        canvas {
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🖃 印章生成器测试</h1>
+        
+        <div class="controls">
+            <div class="form-group">
+                <label for="sealType">印章类型</label>
+                <select id="sealType">
+                    <option value="company_round">公司圆章</option>
+                    <option value="company_oval">公司椭圆章</option>
+                    <option value="personal_square">个人方章</option>
+                    <option value="personal_round">个人圆章</option>
+                </select>
+            </div>
+            
+            <div class="form-group">
+                <label for="mainText">主文字</label>
+                <input type="text" id="mainText" placeholder="输入公司名称或姓名" value="子归云科技">
+            </div>
+            
+            <div class="form-group">
+                <label for="centerText">中心文字</label>
+                <input type="text" id="centerText" placeholder="印" value="印" maxlength="2">
+            </div>
+            
+            <div class="form-group">
+                <label for="sealSize">印章大小</label>
+                <input type="range" id="sealSize" min="200" max="600" value="300">
+                <span id="sizeValue">300px</span>
+            </div>
+            
+            <div class="form-group">
+                <label for="sealColor">印章颜色</label>
+                <input type="color" id="sealColor" value="#FF0000">
+            </div>
+            
+            <div class="form-group">
+                <button onclick="generateSeal()">🎨 生成印章</button>
+            </div>
+        </div>
+        
+        <div class="preview">
+            <h3>印章预览</h3>
+            <canvas id="sealCanvas" width="300" height="300"></canvas>
+            <br><br>
+            <button onclick="downloadSeal()" style="display:none;" id="downloadBtn">📥 下载印章</button>
+        </div>
+    </div>
+
+    <script>
+        const canvas = document.getElementById('sealCanvas');
+        const ctx = canvas.getContext('2d');
+        const sizeSlider = document.getElementById('sealSize');
+        const sizeValue = document.getElementById('sizeValue');
+        
+        // 更新大小显示
+        sizeSlider.addEventListener('input', function() {
+            sizeValue.textContent = this.value + 'px';
+            canvas.width = this.value;
+            canvas.height = this.value;
+        });
+        
+        function generateSeal() {
+            const sealType = document.getElementById('sealType').value;
+            const mainText = document.getElementById('mainText').value;
+            const centerText = document.getElementById('centerText').value;
+            const sealSize = parseInt(document.getElementById('sealSize').value);
+            const sealColor = document.getElementById('sealColor').value;
+            
+            if (!mainText.trim()) {
+                alert('请输入主文字！');
+                return;
+            }
+            
+            // 清空画布
+            ctx.clearRect(0, 0, sealSize, sealSize);
+            
+            // 设置背景
+            ctx.fillStyle = '#FFFFFF';
+            ctx.fillRect(0, 0, sealSize, sealSize);
+            
+            // 设置印章颜色
+            ctx.strokeStyle = sealColor;
+            ctx.fillStyle = sealColor;
+            
+            const centerX = sealSize / 2;
+            const centerY = sealSize / 2;
+            
+            if (sealType.startsWith('company')) {
+                drawCompanySeal(centerX, centerY, sealSize, mainText, centerText, sealColor);
+            } else {
+                drawPersonalSeal(centerX, centerY, sealSize, mainText, sealColor);
+            }
+            
+            document.getElementById('downloadBtn').style.display = 'inline-block';
+        }
+        
+        function drawCompanySeal(centerX, centerY, sealSize, mainText, centerText, sealColor) {
+            const radius = sealSize * 0.4;
+            
+            // 绘制外边框
+            ctx.lineWidth = 3;
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+            ctx.stroke();
+            
+            // 绘制内边框
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius - 15, 0, 2 * Math.PI);
+            ctx.stroke();
+            
+            // 绘制弧形主文字
+            drawCurvedText(mainText, centerX, centerY, radius - 25, 24);
+            
+            // 绘制五角星
+            drawStar(centerX, centerY - radius * 0.1, 15);
+            
+            // 绘制中心文字
+            if (centerText.trim()) {
+                ctx.font = 'bold 40px SimSun, serif';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText(centerText, centerX, centerY + radius * 0.2);
+            }
+        }
+        
+        function drawPersonalSeal(centerX, centerY, sealSize, mainText, sealColor) {
+            const size = sealSize * 0.8;
+            const sealType = document.getElementById('sealType').value;
+            
+            // 绘制边框
+            ctx.lineWidth = 3;
+            ctx.beginPath();
+            if (sealType === 'personal_round') {
+                ctx.arc(centerX, centerY, size / 2, 0, 2 * Math.PI);
+            } else {
+                const halfSize = size / 2;
+                ctx.rect(centerX - halfSize, centerY - halfSize, size, size);
+            }
+            ctx.stroke();
+            
+            // 绘制文字
+            const text = mainText.trim();
+            const textLength = text.length;
+            const fontSize = 32;
+            
+            ctx.font = `bold ${fontSize}px SimSun, serif`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            
+            if (textLength === 2) {
+                // 两字：上下排列
+                ctx.fillText(text[0], centerX, centerY - fontSize * 0.6);
+                ctx.fillText(text[1], centerX, centerY + fontSize * 0.6);
+            } else if (textLength === 3) {
+                // 三字：品字形
+                ctx.fillText(text[0], centerX, centerY - fontSize * 0.8);
+                ctx.fillText(text[1], centerX - fontSize * 0.7, centerY + fontSize * 0.4);
+                ctx.fillText(text[2], centerX + fontSize * 0.7, centerY + fontSize * 0.4);
+            } else if (textLength === 4) {
+                // 四字：田字格
+                ctx.fillText(text[0], centerX - fontSize * 0.6, centerY - fontSize * 0.6);
+                ctx.fillText(text[1], centerX + fontSize * 0.6, centerY - fontSize * 0.6);
+                ctx.fillText(text[2], centerX - fontSize * 0.6, centerY + fontSize * 0.6);
+                ctx.fillText(text[3], centerX + fontSize * 0.6, centerY + fontSize * 0.6);
+            } else {
+                // 其他情况：单行
+                ctx.fillText(text, centerX, centerY);
+            }
+        }
+        
+        function drawCurvedText(text, centerX, centerY, radius, fontSize) {
+            ctx.font = `${fontSize}px SimSun, serif`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            
+            const angleStep = (Math.PI * 1.4) / text.length;
+            const startOffset = -Math.PI * 0.7;
+            
+            for (let i = 0; i < text.length; i++) {
+                const angle = startOffset + i * angleStep;
+                const x = centerX + Math.cos(angle) * radius;
+                const y = centerY + Math.sin(angle) * radius;
+                
+                ctx.save();
+                ctx.translate(x, y);
+                ctx.rotate(angle + Math.PI / 2);
+                ctx.fillText(text[i], 0, 0);
+                ctx.restore();
+            }
+        }
+        
+        function drawStar(centerX, centerY, radius) {
+            const spikes = 5;
+            const outerRadius = radius;
+            const innerRadius = radius * 0.4;
+            
+            ctx.beginPath();
+            for (let i = 0; i < spikes * 2; i++) {
+                const angle = (i * Math.PI) / spikes - Math.PI / 2;
+                const r = i % 2 === 0 ? outerRadius : innerRadius;
+                const x = centerX + Math.cos(angle) * r;
+                const y = centerY + Math.sin(angle) * r;
+                
+                if (i === 0) {
+                    ctx.moveTo(x, y);
+                } else {
+                    ctx.lineTo(x, y);
+                }
+            }
+            ctx.closePath();
+            ctx.fill();
+        }
+        
+        function downloadSeal() {
+            const link = document.createElement('a');
+            link.download = `seal-${Date.now()}.png`;
+            link.href = canvas.toDataURL('image/png');
+            link.click();
+        }
+        
+        // 初始生成一个示例印章
+        setTimeout(() => {
+            generateSeal();
+        }, 100);
+    </script>
+</body>
+</html> 
\ No newline at end of file
-- 
2.49.0