diff --git a/docs/COMPONENT_REDESIGN_EXAMPLES.md b/docs/COMPONENT_REDESIGN_EXAMPLES.md
new file mode 100644
index 0000000..da0e32e
--- /dev/null
+++ b/docs/COMPONENT_REDESIGN_EXAMPLES.md
@@ -0,0 +1,424 @@
+# 组件 UI 重新设计示例
+
+本文档展示如何将现有组件中的 emoji 替换为 SVG 图标，并应用更专业的设计风格。
+
+## 示例 1: GlobalSidebar.vue
+
+### Before
+
+```vue
+
+
+
+
+
+```
+
+### After
+
+```vue
+
+
+
+
+
+
+
+```
+
+## 示例 2: DocumentsPanel.vue
+
+### Before
+
+```vue
+
+
+
+
+
+
+
+```
+
+### After
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## 示例 3: MainContent.vue 工具栏
+
+### Before
+
+```vue
+
+
+
+
+
+
+```
+
+### After
+
+```vue
+
+
+
+
+
+
+
+
+
+
+```
+
+## 示例 4: 状态指示器
+
+### Before
+
+```vue
+
+
+ ⚠️ 警告信息
+
+
+ ✅ 操作成功
+
+
+ ❌ 发生错误
+
+
+```
+
+### After
+
+```vue
+
+
+
+
+
+ 警告信息
+
+
+
+
+ 操作成功
+
+
+
+
+ 发生错误
+
+
+
+
+```
+
+## 示例 5: 空状态提示
+
+### Before
+
+```vue
+
+
+
+
+
+```
+
+### After
+
+```vue
+
+
+
+
+
+
+
+
暂无文稿
+
在左侧创建或选择文稿开始写作
+
+ ⚙️ 设置
+
+```
+
+### After (使用 SVG 图标)
+
+```vue
+
+
+
+
+ 设置
+
+```
+
+## 样式建议
+
+### 图标尺寸
+
+```css
+/* 按钮内图标 */
+.btn-icon { size: 16px; }
+
+/* 标题图标 */
+.title-icon { size: 20px; }
+
+/* 大图标 */
+.large-icon { size: 24px; }
+```
+
+### 图标间距
+
+```vue
+
+
+```
+
+### 图标颜色
+
+图标默认使用 `currentColor`，会继承父元素的 `color` 属性：
+
+```css
+/* 主要操作图标 */
+.btn-primary .icon {
+ color: var(--accent-primary);
+}
+
+/* 危险操作图标 */
+.btn-danger .icon {
+ color: var(--accent-danger);
+}
+```
+
+## 添加新图标
+
+如果需要添加新图标，请按以下步骤：
+
+1. 在 `IconLibrary.vue` 的 `icons` 对象中添加新图标
+2. 提供 SVG path 数据
+3. 更新此文档
+
+```javascript
+'your-icon': {
+ paths: ['M12 2L2 22h20L12 2z'], // 示例 path
+ viewBox: '0 0 24 24'
+}
+```
+
+## 注意事项
+
+1. **一致性**：在整个应用中使用相同的图标系统
+2. **语义化**：选择符合用户预期的图标
+3. **尺寸**：保持相近场景的图标尺寸一致
+4. **对齐**：使用 `flex` 布局确保图标与文本正确对齐
+5. **可访问性**：为图标提供 `aria-label` 或配合文字使用
+
+```vue
+
+
+
+
+
+```
diff --git a/src/components/BaseIcon.vue b/src/components/BaseIcon.vue
new file mode 100644
index 0000000..0f81b68
--- /dev/null
+++ b/src/components/BaseIcon.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
diff --git a/src/components/icons/IconLibrary.vue b/src/components/icons/IconLibrary.vue
new file mode 100644
index 0000000..1579425
--- /dev/null
+++ b/src/components/icons/IconLibrary.vue
@@ -0,0 +1,234 @@
+
+
+
+
+