重新整理仓库

2025-07-25 13:03:01 +08:00
commit 469af7f7f9
979 changed files with 171962 additions and 0 deletions
--- a/EDITOR_SWITCH_DEMO.md
+++ b/EDITOR_SWITCH_DEMO.md
@@ -0,0 +1,151 @@
+# 📝 编辑器切换功能演示
+
+## 🎯 功能概述
+
+我已经成功为文章编辑组件实现了Markdown和富文本编辑器的切换功能，具有以下特点：
+
+### ✨ 核心功能
+
+1. **编辑器类型选择器**
+   - 富文本编辑器（TinyMCE）：所见即所得，支持图片、视频、格式化
+   - Markdown编辑器：轻量级标记语言，支持代码高亮
+
+2. **智能切换机制**
+   - 有内容时会提示用户确认切换
+   - 自动进行基本的格式转换
+   - 保存用户的编辑器偏好设置
+
+3. **数据持久化**
+   - 编辑器类型保存到数据库（editor字段：1=富文本，2=Markdown）
+   - 本地存储用户偏好设置
+   - 编辑时自动恢复用户选择的编辑器类型
+
+### 🔧 技术实现
+
+#### 1. 编辑器选择器UI
+```vue
+<div class="editor-selector-container">
+  <div class="editor-selector">
+    <span class="selector-label">编辑器类型：</span>
+    <a-radio-group 
+      v-model:value="editor" 
+      @change="onEditorTypeChange"
+      class="editor-radio-group"
+    >
+      <a-radio :value="1" class="editor-radio">
+        <span class="radio-content">
+          <span class="radio-icon">📝</span>
+          <span class="radio-text">富文本编辑器</span>
+          <span class="radio-desc">所见即所得，支持图片、视频、格式化</span>
+        </span>
+      </a-radio>
+      <a-radio :value="2" class="editor-radio">
+        <span class="radio-content">
+          <span class="radio-icon">📋</span>
+          <span class="radio-text">Markdown编辑器</span>
+          <span class="radio-desc">轻量级标记语言，支持代码高亮</span>
+        </span>
+      </a-radio>
+    </a-radio-group>
+  </div>
+</div>
+```
+
+#### 2. 切换处理逻辑
+```typescript
+const onEditorTypeChange = (e: any) => {
+  const newEditorType = e.target.value;
+  const oldEditorType = editor.value;
+  
+  // 如果有内容，提示用户确认切换
+  if (content.value && content.value.trim() !== '' && content.value !== '<p><br></p>') {
+    Modal.confirm({
+      title: '🔄 切换编辑器类型',
+      content: '切换编辑器类型可能会影响内容格式，是否继续？',
+      okText: '确认切换',
+      cancelText: '取消',
+      onOk: () => {
+        performEditorSwitch(newEditorType, oldEditorType);
+      },
+      onCancel: () => {
+        editor.value = oldEditorType;
+      }
+    });
+  } else {
+    performEditorSwitch(newEditorType, oldEditorType);
+  }
+};
+```
+
+#### 3. 格式转换功能
+```typescript
+const convertContentFormat = (fromType: number, toType: number) => {
+  if (fromType === 1 && toType === 2) {
+    // 富文本转Markdown
+    let markdownContent = content.value
+      .replace(/<h1[^>]*>(.*?)<\/h1>/gi, '# $1\n\n')
+      .replace(/<h2[^>]*>(.*?)<\/h2>/gi, '## $1\n\n')
+      .replace(/<strong[^>]*>(.*?)<\/strong>/gi, '**$1**')
+      .replace(/<em[^>]*>(.*?)<\/em>/gi, '*$1*')
+      // ... 更多转换规则
+    content.value = markdownContent;
+  } else if (fromType === 2 && toType === 1) {
+    // Markdown转富文本
+    let htmlContent = content.value
+      .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+      .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*(.*?)\*/g, '<em>$1</em>')
+      // ... 更多转换规则
+    content.value = htmlContent;
+  }
+};
+```
+
+#### 4. 偏好设置管理
+```typescript
+const initEditorPreference = () => {
+  // 优先使用数据库中保存的编辑器类型
+  if (form.editor && (form.editor === 1 || form.editor === 2)) {
+    editor.value = form.editor;
+  } else {
+    // 使用本地存储的偏好
+    const savedPreference = localStorage.getItem('cms_article_editor_preference');
+    if (savedPreference && (savedPreference === '1' || savedPreference === '2')) {
+      editor.value = parseInt(savedPreference);
+    } else {
+      editor.value = 1; // 默认富文本
+    }
+  }
+};
+```
+
+### 🎨 样式设计
+
+编辑器选择器采用了现代化的卡片设计：
+- 渐变背景和阴影效果
+- 清晰的图标和描述文字
+- 响应式交互效果
+- 与现有UI风格保持一致
+
+### 📊 数据库字段
+
+在CmsArticle模型中，`editor`字段用于保存编辑器类型：
+- `1`: 富文本编辑器
+- `2`: Markdown编辑器
+
+### 🚀 使用方式
+
+1. **新建文章**：系统会根据用户偏好自动选择编辑器类型
+2. **编辑文章**：自动恢复文章创建时使用的编辑器类型
+3. **切换编辑器**：用户可以随时切换，系统会智能处理格式转换
+4. **保存文章**：编辑器类型会自动保存到数据库
+
+### 💡 用户体验优化
+
+- **智能提示**：切换前会提示可能的格式影响
+- **格式转换**：自动进行基本的HTML↔Markdown转换
+- **偏好记忆**：记住用户的编辑器选择偏好
+- **无缝切换**：保持内容的连续性和一致性
+
+这个功能让用户可以根据自己的习惯和需求选择最适合的编辑器，提供了更加灵活和人性化的编辑体验！