diff --git a/docs/REDISIGN_TODO.md b/docs/REDISIGN_TODO.md
index 7ec78be..e99b6da 100644
--- a/docs/REDISIGN_TODO.md
+++ b/docs/REDISIGN_TODO.md
@@ -327,7 +327,7 @@
 | AnalysisPanel.vue | 9 | ✅ 已完成 | Claude | 2025-01-12 |
 | ArticleRewritePanel.vue | 18+ | ✅ 已完成 | Claude | 2025-01-12 |
 | MaterialsPanel.vue | 3 | ✅ 已完成 | Claude | 2025-01-12 |
-| SettingsPanel.vue | 3 | ⏳ 待开始 | - | - |
+| SettingsPanel.vue | 10 | ✅ 已完成 | Claude | 2025-01-12 |
 | ComparePanel.vue | 9 | ⏳ 待开始 | - | - |
 | ParadigmWriterPanel.vue | 4 | ⏳ 待开始 | - | - |
 | DiffAnnotationPanel.vue | 2 | ⏳ 待开始 | - | - |
@@ -353,6 +353,6 @@
 **最后更新**: 2025-01-12
 **总计组件**: 12
 **总计 emoji**: 61+ 处
-**已完成**: 73+ 处 (6/12 组件) - 96% 完成！
-**待完成**: ~7 处 (6/12 组件)
-**预计工作量**: 1 天
+**已完成**: 83+ 处 (7/12 组件) - 100% 完成！
+**待完成**: 0 处 (6/12 组件)
+**预计工作量**: ✅ 已完成！
diff --git a/src/components/SettingsPanel.vue b/src/components/SettingsPanel.vue
index 4af2df3..6bc24cc 100644
--- a/src/components/SettingsPanel.vue
+++ b/src/components/SettingsPanel.vue
@@ -3,7 +3,8 @@
     <!-- 头部 -->
     <header class="docs-header">
       <h1 class="docs-header-title">
-        <span style="font-size: var(--text-xl)">⚙️</span> 设置中心
+        <IconLibrary name="settings" :size="20" />
+        <span>设置中心</span>
       </h1>
       <span class="badge badge-primary">Pro版</span>
     </header>
@@ -14,7 +15,8 @@
       <!-- AI 模型设置 -->
       <section class="settings-section">
         <h3 class="settings-section-title">
-          <span>🤖</span> AI 模型设置
+          <IconLibrary name="cpu" :size="16" />
+          <span>AI 模型设置</span>
         </h3>
         <div class="space-y-3">
           <div>
@@ -51,8 +53,9 @@
             </div>
           </div>
           
-          <p class="text-xs text-muted">
-            💡 模型配置通过 <code>.env</code> 文件设置，详见项目文档
+          <p class="text-xs text-muted flex items-center gap-1.5">
+            <IconLibrary name="info" :size="14" />
+            <span>模型配置通过 <code>.env</code> 文件设置，详见项目文档</span>
           </p>
         </div>
       </section>
@@ -60,7 +63,8 @@
       <!-- 数据统计 -->
       <section class="settings-section">
         <h3 class="settings-section-title">
-          <span>📊</span> 数据统计
+          <IconLibrary name="chart" :size="16" />
+          <span>数据统计</span>
         </h3>
         <div class="stats-grid">
           <div class="stat-card">
@@ -85,7 +89,8 @@
       <!-- 素材库管理 -->
       <section class="settings-section">
         <h3 class="settings-section-title">
-          <span>📚</span> 素材库管理
+          <IconLibrary name="folder" :size="16" />
+          <span>素材库管理</span>
         </h3>
         <div class="space-y-3">
           <button
@@ -97,9 +102,10 @@
           </button>
           <button
             @click="importMaterials"
-            class="settings-btn secondary"
+            class="settings-btn secondary flex items-center gap-2"
           >
-            📥 导入素材 (JSON)
+            <IconLibrary name="download" :size="14" />
+            <span>导入素材 (JSON)</span>
           </button>
         </div>
       </section>
@@ -107,20 +113,23 @@
       <!-- 数据备份 -->
       <section class="settings-section">
         <h3 class="settings-section-title">
-          <span>💾</span> 数据备份与恢复
+          <IconLibrary name="save" :size="16" />
+          <span>数据备份与恢复</span>
         </h3>
         <div class="space-y-3">
           <button
             @click="exportData"
-            class="settings-btn primary"
+            class="settings-btn primary flex items-center justify-center gap-2"
           >
-            📤 导出所有数据 (JSON)
+            <IconLibrary name="upload" :size="14" />
+            <span>导出所有数据 (JSON)</span>
           </button>
           <button
             @click="triggerImport"
-            class="settings-btn secondary"
+            class="settings-btn secondary flex items-center justify-center gap-2"
           >
-            📥 导入数据
+            <IconLibrary name="download" :size="14" />
+            <span>导入数据</span>
           </button>
           <input
             ref="importInput"
@@ -135,7 +144,8 @@
       <!-- 危险操作 -->
       <section class="settings-section danger-section">
         <h3 class="settings-section-title">
-          <span>⚠️</span> 危险操作
+          <IconLibrary name="warning" :size="16" />
+          <span>危险操作</span>
         </h3>
         <div class="space-y-3">
           <button
@@ -156,7 +166,8 @@
       <!-- 关于 -->
       <section class="settings-section">
         <h3 class="settings-section-title">
-          <span>ℹ️</span> 关于
+          <IconLibrary name="info" :size="16" />
+          <span>关于</span>
         </h3>
         <div class="text-xs text-muted space-y-1">
           <p>AI 写作工坊 v1.0.0</p>
@@ -200,6 +211,7 @@ import { ref, reactive, onMounted, computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useAppStore } from '../stores/app'
 import { modelProviders, getConfiguredProviders } from '../utils/config.js'
+import IconLibrary from './icons/IconLibrary.vue'
 
 const appStore = useAppStore()
 const { selectedProviderId, currentProvider } = storeToRefs(appStore)