<template>
    <div class="markdown-editor">
      <!-- 编辑器主体 -->
      <div class="editor-main">
        
        <!-- 文档信息面板 -->
        <el-card class="doc-info">
          <div slot="header">
            <span>文档配置</span>
          </div>
          <el-form :model="addParams" label-width="100px">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="文档标题">
                  <el-input v-model="addParams.title" placeholder="请输入文档标题" />
                </el-form-item>
              </el-col>
         
              <el-col :span="8">
                <el-form-item label="文档类型">
                    <el-select v-model="addParams.type" placeholder="请选择">
                        <el-option
                        v-for="item in documentLTypeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
              </el-col>
                              <!-- 页面标识字段已移除，自动生成 -->
            </el-row>
           
          </el-form>
        </el-card>
  
        <!-- 编辑器头部 -->
        <div class="editor-header">
          <div class="header-title">
            <h1>Markdown 文档编辑器</h1>
            <p>支持实时预览的文档编辑工具</p>
          </div>
          <div class="header-actions">
            <el-button @click="resetDocument" icon="el-icon-refresh" size="small">重置</el-button>
            <el-button @click="handlePreview" icon="el-icon-view" size="small" type="primary">预览</el-button>
            <el-button @click="handleSave" :loading="saveLoading" icon="el-icon-document" size="small" type="success">保存草稿</el-button>
            <el-button @click="handlePublish" :loading="publishLoading" icon="el-icon-upload" size="small" type="warning">发布</el-button>
          </div>
        </div>
              <!-- Markdown 使用规则指南 -->
              <transition name="slide-fade">
          <el-card v-show="showMarkdownGuide" class="markdown-guide-card">
            <div slot="header">
              <span>📝 Markdown 语法规则详解</span>
              <el-button 
                style="float: right; padding: 3px 0" 
                type="text" 
                @click="toggleMarkdownGuide"
                icon="el-icon-close"
              >
                关闭
              </el-button>
        </div>
  
            <div class="guide-content">
              <!-- 标题语法 -->
              <div class="guide-section">
                <h4>1. 标题语法 (#符号)</h4>
                <div class="example-container">
                  <div class="syntax-example">
                    <pre><code># 一级标题 (最大)
## 二级标题  
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题 (最小)</code></pre>
                  </div>
                  <div class="result-preview">
                    <h1 style="font-size: 24px; margin: 8px 0;">一级标题</h1>
                    <h2 style="font-size: 20px; margin: 6px 0;">二级标题</h2>
                    <h3 style="font-size: 16px; margin: 4px 0;">三级标题</h3>
                  </div>
                </div>
              </div>

              <!-- 文本格式化 -->
              <div class="guide-section">
                <h4>2. 文本格式化</h4>
                <div class="example-container">
                  <div class="syntax-example">
                    <pre><code>**粗体文本**
*斜体文本*
***粗斜体***
~~删除线~~
`行内代码`</code></pre>
                  </div>
                  <div class="result-preview">
                    <p><strong>粗体文本</strong></p>
                    <p><em>斜体文本</em></p>
                    <p><strong><em>粗斜体</em></strong></p>
                    <p><del>删除线</del></p>
                    <p><code>行内代码</code></p>
                  </div>
                </div>
              </div>

              <!-- 列表语法 -->
              <div class="guide-section">
                <h4>3. 列表语法</h4>
                <div class="example-container">
                  <div class="syntax-example">
                    <pre><code>- 无序列表项 1
- 无序列表项 2
  - 子列表项 2.1
  - 子列表项 2.2

1. 有序列表项 1
2. 有序列表项 2</code></pre>
                  </div>
                  <div class="result-preview">
                    <ul>
                      <li>无序列表项 1</li>
                      <li>无序列表项 2
                        <ul>
                          <li>子列表项 2.1</li>
                          <li>子列表项 2.2</li>
                        </ul>
                      </li>
                    </ul>
                    <ol>
                      <li>有序列表项 1</li>
                      <li>有序列表项 2</li>
                    </ol>
                  </div>
                </div>
              </div>

              <!-- 代码块 -->
              <div class="guide-section">
                <h4>4. 代码块</h4>
                <div class="example-container">
                  <div class="syntax-example">
                    <pre><code>```javascript
function hello() {
  return 'Hello World';
}
```</code></pre>
                  </div>
                  <div class="result-preview">
                    <pre style="background: #f5f5f5; padding: 10px; border-radius: 4px;"><code>function hello() {
  return 'Hello World';
}</code></pre>
                  </div>
                </div>
              </div>

              <!-- 表格语法 -->
              <div class="guide-section">
                <h4>5. 表格语法</h4>
                <div class="example-container">
                  <div class="syntax-example">
                    <pre><code>| 名称 | 类型 | 备注 |
|------|------|------|
| id   | number | 必填 |
| name | string | 可选 |</code></pre>
                  </div>
                  <div class="result-preview">
                    <table style="border-collapse: collapse; width: 100%;">
                      <thead>
                        <tr>
                          <th style="border: 1px solid #ddd; padding: 8px;">名称</th>
                          <th style="border: 1px solid #ddd; padding: 8px;">类型</th>
                          <th style="border: 1px solid #ddd; padding: 8px;">备注</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td style="border: 1px solid #ddd; padding: 8px;">id</td>
                          <td style="border: 1px solid #ddd; padding: 8px;">number</td>
                          <td style="border: 1px solid #ddd; padding: 8px;">必填</td>
                        </tr>
                        <tr>
                          <td style="border: 1px solid #ddd; padding: 8px;">name</td>
                          <td style="border: 1px solid #ddd; padding: 8px;">string</td>
                          <td style="border: 1px solid #ddd; padding: 8px;">可选</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>

              <!-- 链接语法 -->
              <div class="guide-section">
                <h4>6. 链接语法</h4>
                <div class="example-container">
                  <div class="syntax-example">
                    <pre><code>[链接文字](https://example.com)
[参考链接][1]

[1]: https://example.com</code></pre>
                  </div>
                  <div class="result-preview">
                    <p><a href="https://example.com">链接文字</a></p>
                    <p><a href="https://example.com">参考链接</a></p>
                  </div>
                </div>
              </div>

              <!-- 快速提示 -->
              <div class="guide-section tips-section">
                <h4>💡 实用提示</h4>
                <div class="tips-grid">
                  <div class="tip-item">
                    <strong>API文档：</strong>使用### 创建接口标题
                  </div>
                  <div class="tip-item">
                    <strong>参数表格：</strong>点击"插入表格"按钮快速插入
                  </div>
                  <div class="tip-item">
                    <strong>代码示例：</strong>点击"代码块"按钮插入
                  </div>
                  <div class="tip-item">
                    <strong>实时预览：</strong>使用分屏模式边写边看效果
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </transition>
        <!-- 编辑器工具栏 -->
        <div class="editor-tools">
          <div class="mode-switch">
            <button 
              class="mode-btn" 
              :class="{ active: editorMode === 'edit' }"
              @click="editorMode = 'edit'"
            >
              编辑
            </button>
            <button 
              class="mode-btn" 
              :class="{ active: editorMode === 'preview' }"
              @click="editorMode = 'preview'"
            >
              预览
            </button>
            <button 
              class="mode-btn" 
              :class="{ active: editorMode === 'split' }"
              @click="editorMode = 'split'"
            >
              分屏
            </button>
          </div>
          
          <div class="tool-actions">
            <el-button size="mini" @click="insertTemplate('table')">插入表格</el-button>
            <el-button size="mini" @click="insertTemplate('code')">代码块</el-button>
            <el-button size="mini" @click="insertTemplate('api')">API接口</el-button>
                         <el-button 
               size="mini" 
               type="primary" 
               @click="toggleMarkdownGuide"
               :icon="showMarkdownGuide ? 'el-icon-arrow-up' : 'el-icon-question'"
             >
               {{ showMarkdownGuide ? '隐藏' : '了解' }}使用规则
             </el-button>
          </div>
        </div>
  
        <!-- 编辑器面板 -->
        <el-row :gutter="20">
          <!-- 编辑区域 -->
          <el-col :span="editorMode === 'preview' ? 0 : (editorMode === 'split' ? 12 : 24)">
            <div class="editor-panel" v-show="editorMode !== 'preview'">
              <div class="panel-header">
                <span>Markdown 编辑</span>
                <div class="panel-actions">
                  <span class="word-count">{{ wordCount }} 字</span>
                   <span class="auto-save-status" :class="autoSaveStatus.type">
                     <i :class="autoSaveStatus.icon"></i>
                     {{ autoSaveStatus.text }}
                   </span>
                </div>
              </div>
              <div class="markdown-textarea">
                <el-input
                  ref="markdownInput"
                   v-model="addParams.content"
                  type="textarea"
                  :rows="25"
                  placeholder="开始编写您的文档..."
                   @input="handleContentChange"
                />
              </div>
            </div>
          </el-col>
  
          <!-- 预览区域 -->
          <el-col :span="editorMode === 'edit' ? 0 : (editorMode === 'split' ? 12 : 24)">
            <div class="editor-panel" v-show="editorMode !== 'edit'">
              <div class="panel-header">
                <span>实时预览</span>
                <div class="panel-actions">
                  <el-button size="mini" @click="copyHtml">复制HTML</el-button>
                </div>
              </div>
              <div class="markdown-preview" v-html="markdownToHtml(addParams.content)"></div>
            </div>
          </el-col>
        </el-row>
  
  
  
        <!-- 参数预览 -->
        <!-- <el-card class="params-preview">
          <div slot="header">
            <span>传参JSON预览</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="copyParams">复制参数</el-button>
          </div>
          <pre class="params-json">{{ formattedParams }}</pre>
        </el-card> -->
  
      </div>
  
      <!-- 预览对话框 -->
      <el-dialog
        title="文档预览"
        :visible.sync="previewVisible"
        width="80%"
        top="5vh"
      >
        <div class="preview-content" v-html="markdownToHtml(addParams.content)"></div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { addDocument } from '../api/documentManagement'

  export default {
    name: 'MarkdownEditor',
  
    data() {
      return {
        addParams: {
          title: '',
          subTitle: '',
          contentType: 'markdown',
          content: '',
          status: 'draft',
          id: null
        },
        documentLTypeList:[
                {
                    value:"1",
                    label:"服务条款"
                },
                {
                    value:"2",
                    label:"api文档"
                },
                {
                    value:"3",
                    label:"挖矿教程"
                },
                {
                    value:"0",
                    label:"其他"
                }
            ],
        editorMode: 'split',
        saveLoading: false,
        publishLoading: false,
        previewVisible: false,
        wordCount: 0,
        showMarkdownGuide: false, // Markdown使用规则显示状态
        
        // 自动保存相关
        autoSaveTimer: null,
        autoSaveStatus: {
          type: 'idle', // 'editing', 'saving', 'saved', 'error', 'idle'
          text: '',
          icon: ''
        },
        lastSavedContent: '', // 上次保存的内容
//         templates: {
//           table: `| 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | name | string | 必填 | 参数名称 |`,
//           code: `\`\`\`javascript
//   // 示例代码
//   function example() {
//     return 'Hello World'
//   }
//   \`\`\``,
//           api: `### POST /api/v1/example
  
//   #### 请求参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | param1 | string | 必填 | 参数说明 |
  
//   #### 响应参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | result | object | | 返回结果 |`
//         }
      }
    },
    
    computed: {
      formattedParams() {
        // 显示实际传递给后端的参数格式
        const manageDocumentVo = {
          id: (this.addParams.id && this.addParams.id !== "") ? this.addParams.id : null,  // 确保ID是null或数字
          title: this.addParams.title,    // 标题
          subTitle: this.addParams.subTitle || '',  // 副标题
          content: this.addParams.content, // 内容
          lang: this.$i18n?.locale || 'zh', // 语言：直接从i18n获取当前语言，默认zh
          type: this.addParams.type || ""  // 文档类型：使用用户选择的类型
        }
        
        return JSON.stringify(manageDocumentVo, null, 2)
      }
    },
    
    methods: {
      /**
       * 切换Markdown使用规则指南的显示状态
       */
      toggleMarkdownGuide() {
        this.showMarkdownGuide = !this.showMarkdownGuide;
      },
      
      /**
       * 默认内容 - 完整API文档
       */
//       getDefaultContent() {
//         return `# M2pool API文档
  
//   ## 概述
  
//   Epool 正对所有用户提供实时、高频的矿池数据，为用户/第三方程序提供便利。你可以使用自己语言方便地通过我们的API端点获取矿池、账户、矿工、收益数据。
  
//   如果你的请求频率超过100qpm， 请联系我们为你开通高频接口。
  
//   所有资源都通过HTTP requests请求，地址格式为https://api.m2pool.com/
  
//   每个资源都返回JSON格式的数据。
  
//   ## 公共结构
  
//   ### HashRate
//   算力数据
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | date | Date | | 算力统计时间 |
//   | hashrate | double | | 算力 |
  
//   ### MinersList
//   矿工数量数据  
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | total | int | | 总矿工数 |
//   | online | int | | 在线矿工数 |
//   | offline | int | | 离线矿工数 |
  
//   ## 矿池总览
  
//   ### Get /api/v1/pool/watch
  
//   **所有权限：** pool
  
//   #### 请求参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | coin | string | | 币种 |
  
//   #### 响应参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | pool_fee | string | | 矿池手续费 |
//   | hashrate | HashRate | | 算力信息 |
//   | miners | MinersList | | 矿工信息 |
//   | difficulty | double | | 当前难度 |
//   | block_height | int | | 当前区块高度 |
//   | reward | double | | 区块奖励 |
//   | last_block_time | Date | | 最后出块时间 |
  
//   ### Get /api/v1/pool/hashrate
  
//   获取矿池算力历史数据
  
//   **所有权限：** pool
  
//   #### 请求参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | coin | string | | 币种 |
//   | period | string | 可选 | 时间周期, 1h, 24h, 7d |
  
//   #### 响应参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | hashrates | array[HashRate] | | 算力数据数组 |
  
//   ### Get /api/v1/pool/miners
  
//   获取矿池矿工数量历史数据
  
//   **所有权限：** pool
  
//   #### 请求参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | coin | string | | 币种 |
//   | period | string | 可选 | 时间周期, 1h, 24h, 7d |
  
//   #### 响应参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | miners | array[MinersList] | | 矿工数量数据数组 |
  
//   ### Get /api/v1/pool/blocks
  
//   获取矿池区块信息
  
//   **所有权限：** pool
  
//   #### 请求参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | coin | string | | 币种 |
//   | page | int | 可选 | 页码，默认1 |
//   | limit | int | 可选 | 每页数量，默认20 |
  
//   #### 响应参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | blocks | array | | 区块信息数组 |
//   | blocks.height | int | | 区块高度 |
//   | blocks.hash | string | | 区块哈希 |
//   | blocks.timestamp | Date | | 区块时间 |
//   | blocks.difficulty | double | | 区块难度 |
//   | blocks.reward | double | | 区块奖励 |
//   | blocks.status | string | | 状态：confirmed, orphaned |
//   | total | int | | 总区块数 |
//   | page | int | | 当前页码 |
//   | limit | int | | 每页数量 |
  
//   ## 账户相关
  
//   ### Get /api/v1/account/address/{coin}
  
//   获取用户指定币种的挖矿地址
  
//   **所有权限：** user
  
//   #### 请求参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | coin | string | | 币种 |
  
//   #### 响应参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | coin | string | | 币种 |
//   | address | string | | 挖矿地址 |
//   | balance | double | | 当前余额 |
//   | pending | double | | 待确认余额 |
//   | paid | double | | 已支付总额 |
//   | last_payment | Date | | 最后支付时间 |
  
//   ### Get /api/v1/account/dashboard/{coin}
  
//   获取用户指定币种的账户概览
  
//   **所有权限：** user
  
//   #### 请求参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | coin | string | | 币种 |
  
//   #### 响应参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | balance | double | | 当前余额 |
//   | pending | double | | 待确认余额 |
//   | paid | double | | 已支付总额 |
//   | hashrate | HashRate | | 当前算力 |
//   | workers | MinersList | | 矿工统计 |
//   | daily_earning | double | | 今日收益 |
//   | weekly_earning | double | | 本周收益 |
//   | monthly_earning | double | | 本月收益 |
  
//   ### Get /api/v1/account/hashrate/{coin}
  
//   获取用户指定币种的算力历史数据
  
//   **所有权限：** user
  
//   #### 请求参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | coin | string | | 币种 |
//   | period | string | 可选 | 时间周期, 1h, 24h, 7d |
  
//   #### 响应参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | hashrates | array[HashRate] | | 算力数据数组 |
  
//   ### Get /api/v1/account/workers/{coin}
  
//   获取用户指定币种的矿工列表
  
//   **所有权限：** user
  
//   #### 请求参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | coin | string | | 币种 |
//   | page | int | 可选 | 页码，默认1 |
//   | limit | int | 可选 | 每页数量，默认20 |
  
//   #### 响应参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | workers | array | | 矿工列表 |
//   | workers.id | string | | 矿工ID |
//   | workers.name | string | | 矿工名称 |
//   | workers.hashrate | double | | 当前算力 |
//   | workers.status | string | | 状态：online, offline |
//   | workers.last_share | Date | | 最后提交时间 |
//   | workers.total_shares | int | | 总shares数 |
//   | workers.valid_shares | int | | 有效shares数 |
//   | workers.stale_shares | int | | 过期shares数 |
//   | total | int | | 总矿工数 |
//   | page | int | | 当前页码 |
//   | limit | int | | 每页数量 |
  
//   ### Get /api/v1/account/workers/{coin}/{worker}
  
//   获取指定矿工的详细信息
  
//   **所有权限：** user
  
//   #### 请求参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | coin | string | | 币种 |
//   | worker | string | | 矿工名称 |
  
//   #### 响应参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | id | string | | 矿工ID |
//   | name | string | | 矿工名称 |
//   | hashrate | double | | 当前算力 |
//   | status | string | | 状态：online, offline |
//   | last_share | Date | | 最后提交时间 |
//   | total_shares | int | | 总shares数 |
//   | valid_shares | int | | 有效shares数 |
//   | stale_shares | int | | 过期shares数 |
  
//   ### Get /api/v1/account/workers/{coin}/{worker}/hashrate
  
//   获取指定矿工的算力历史数据
  
//   **所有权限：** user
  
//   #### 请求参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | coin | string | | 币种 |
//   | worker | string | | 矿工名称 |
//   | period | string | 可选 | 时间周期, 1h, 24h, 7d |
  
//   #### 响应参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | hashrates | array[HashRate] | | 算力数据数组 |
  
//   ## 收益相关
  
//   ### Get /api/v1/account/earnings/{coin}
  
//   获取用户指定币种的收益记录
  
//   **所有权限：** user
  
//   #### 请求参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | coin | string | | 币种 |
//   | page | int | 可选 | 页码，默认1 |
//   | limit | int | 可选 | 每页数量，默认20 |
//   | start_date | Date | 可选 | 开始日期 |
//   | end_date | Date | 可选 | 结束日期 |
  
//   #### 响应参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | earnings | array | | 收益记录 |
//   | earnings.date | Date | | 收益日期 |
//   | earnings.amount | double | | 收益金额 |
//   | earnings.hashrate | double | | 平均算力 |
//   | earnings.shares | int | | 有效shares数 |
//   | total | int | | 总记录数 |
//   | page | int | | 当前页码 |
//   | limit | int | | 每页数量 |
  
//   ### Get /api/v1/account/earnings/{coin}/summary
  
//   获取用户指定币种的收益汇总
  
//   **所有权限：** user
  
//   #### 请求参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | coin | string | | 币种 |
  
//   #### 响应参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | total_earning | double | | 总收益 |
//   | daily_earning | double | | 今日收益 |
//   | weekly_earning | double | | 本周收益 |
//   | monthly_earning | double | | 本月收益 |
//   | yesterday_earning | double | | 昨日收益 |
//   | last_week_earning | double | | 上周收益 |
//   | last_month_earning | double | | 上月收益 |
  
//   ## 支付相关
  
//   ### Get /api/v1/account/payments/{coin}
  
//   获取用户指定币种的支付记录
  
//   **所有权限：** user
  
//   #### 请求参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | coin | string | | 币种 |
//   | page | int | 可选 | 页码，默认1 |
//   | limit | int | 可选 | 每页数量，默认20 |
  
//   #### 响应参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | payments | array | | 支付记录 |
//   | payments.txid | string | | 交易哈希 |
//   | payments.amount | double | | 支付金额 |
//   | payments.fee | double | | 交易手续费 |
//   | payments.timestamp | Date | | 支付时间 |
//   | payments.status | string | | 支付状态：pending, confirmed, failed |
//   | total | int | | 总记录数 |
//   | page | int | | 当前页码 |
//   | limit | int | | 每页数量 |
  
//   ### Get /api/v1/account/settings/{coin}
  
//   获取用户指定币种的账户设置
  
//   **所有权限：** user
  
//   #### 请求参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | coin | string | | 币种 |
  
//   #### 响应参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | coin | string | | 币种 |
//   | address | string | | 支付地址 |
//   | min_payout | double | | 最小支付金额 |
//   | auto_payout | boolean | | 是否自动支付 |
//   | email_notifications | boolean | | 是否邮件通知 |
  
//   ### Put /api/v1/account/settings/{coin}
  
//   更新用户指定币种的账户设置
  
//   **所有权限：** user
  
//   #### 请求参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | coin | string | | 币种 |
//   | address | string | 可选 | 支付地址 |
//   | min_payout | double | 可选 | 最小支付金额 |
//   | auto_payout | boolean | 可选 | 是否自动支付 |
//   | email_notifications | boolean | 可选 | 是否邮件通知 |
  
//   #### 响应参数
  
//   | 名称 | 类型 | 备注 | 解释 |
//   |------|------|------|------|
//   | success | boolean | | 更新是否成功 |
//   | message | string | | 响应消息 |
  
//   ## 错误处理
  
//   API接口统一使用HTTP状态码来表示请求结果：
  
//   - **200 OK**: 请求成功
//   - **400 Bad Request**: 请求参数错误
//   - **401 Unauthorized**: 未授权或Token过期
//   - **403 Forbidden**: 权限不足
//   - **404 Not Found**: 资源不存在
//   - **429 Too Many Requests**: 请求频率超限
//   - **500 Internal Server Error**: 服务器内部错误
  
//   错误响应格式：
  
//   \`\`\`json
//   {
//     "error": {
//       "code": "INVALID_PARAMETER",
//       "message": "币种参数不能为空",
//       "details": "coin parameter is required"
//     }
//   }
//   \`\`\`
  
//   ## 示例代码
  
//   ### JavaScript示例
  
//   \`\`\`javascript
//   // 获取矿池信息
//   async function getPoolInfo(coin) {
//     const response = await fetch(\`https://api.m2pool.com/api/v1/pool/watch?coin=\${coin}\`);
//     const data = await response.json();
//     return data;
//   }
  
//   // 获取用户算力
//   async function getUserHashrate(coin, token) {
//     const response = await fetch(\`https://api.m2pool.com/api/v1/account/dashboard/\${coin}\`, {
//       headers: {
//         'Authorization': \`Bearer \${token}\`
//       }
//     });
//     const data = await response.json();
//     return data;
//   }
//   \`\`\`
  
//   ### Python示例
  
//   \`\`\`python
//   import requests
  
//   # 获取矿池信息
//   def get_pool_info(coin):
//       url = f"https://api.m2pool.com/api/v1/pool/watch"
//       params = {"coin": coin}
//       response = requests.get(url, params=params)
//       return response.json()
  
//   # 获取用户收益
//   def get_user_earnings(coin, token):
//       url = f"https://api.m2pool.com/api/v1/account/earnings/{coin}"
//       headers = {"Authorization": f"Bearer {token}"}
//       response = requests.get(url, headers=headers)
//       return response.json()
//   \`\`\`
  
//   ## 版本说明
  
//   当前API版本: **v1**
  
//   API接口地址: **https://api.m2pool.com/**
  
//   更新时间: **2024-12-28**
  
//   如需技术支持，请联系我们的客服团队。`
//       },
      
      /**
       * Markdown转HTML - 支持标题、列表、表格、代码等
       */
      markdownToHtml(text) {
        if (!text) return ''
        
        const lines = text.split('\n')
        const result = []
        let listStack = []
        let inCodeBlock = false
        let codeBlockContent = []
        let tableRows = []
        let inTable = false
        
        for (let i = 0; i < lines.length; i++) {
          const line = lines[i]
          const trimmedLine = line.trim()
          
          // 代码块处理
          if (trimmedLine.startsWith('```')) {
            if (!inCodeBlock) {
              inCodeBlock = true
              codeBlockContent = []
              continue
            } else {
              inCodeBlock = false
              result.push(`<pre><code>${codeBlockContent.join('\n')}</code></pre>`)
              codeBlockContent = []
              continue
            }
          }
          
          if (inCodeBlock) {
            codeBlockContent.push(line)
            continue
          }
          
          // 空行处理
          if (!trimmedLine) {
            this.closeAllLists(result, listStack)
            this.closeTable(result, tableRows, inTable)
            inTable = false
            tableRows = []
            if (result.length > 0 && !result[result.length - 1].endsWith('</p>')) {
              result.push('')
            }
            continue
          }
          
          // 表格处理
          if (trimmedLine.includes('|') && !trimmedLine.startsWith('#')) {
            if (!inTable) {
              inTable = true
              tableRows = []
            }
            tableRows.push(line)
            continue
          } else if (inTable) {
            this.closeTable(result, tableRows, inTable)
            inTable = false
            tableRows = []
          }
          
          // 标题处理
          const headerMatch = trimmedLine.match(/^(#{1,6})\s+(.+)$/)
          if (headerMatch) {
            this.closeAllLists(result, listStack)
            const level = headerMatch[1].length
            const text = headerMatch[2]
            result.push(`<h${level}>${text}</h${level}>`)
            continue
          }
          
          // 有序列表处理
          const orderedMatch = line.match(/^(\s*)(\d+)\.\s+(.+)$/)
          if (orderedMatch) {
            const indent = orderedMatch[1].length
            const text = this.processInlineMarkdown(orderedMatch[3])
            const isTopLevel = indent === 0
            this.handleListItem(result, listStack, indent, 'ol', text, isTopLevel)
            continue
          }
          
          // 无序列表处理
          const unorderedMatch = line.match(/^(\s*)[-*+]\s+(.+)$/)
          if (unorderedMatch) {
            const indent = unorderedMatch[1].length
            const text = this.processInlineMarkdown(unorderedMatch[2])
            const isTopLevel = indent === 0
            this.handleListItem(result, listStack, indent, 'ul', text, isTopLevel)
            continue
          }
          
          // 普通段落
          this.closeAllLists(result, listStack)
          const processedText = this.processInlineMarkdown(trimmedLine)
          result.push(`<p>${processedText}</p>`)
        }
        
        // 关闭所有未关闭的元素
        this.closeAllLists(result, listStack)
        this.closeTable(result, tableRows, inTable)
        
        return result.join('\n')
      },
      
      /**
       * 处理行内Markdown语法
       */
      processInlineMarkdown(text) {
        return text
          // 处理链接 [文字](URL)
          .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>')
          // 处理粗体
          .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
          // 处理斜体
          .replace(/\*(.*?)\*/g, '<em>$1</em>')
          // 处理行内代码
          .replace(/`([^`]*)`/g, '<code>$1</code>')
          // 处理删除线
          .replace(/~~(.*?)~~/g, '<del>$1</del>')
      },
      
      /**
       * 处理列表项，支持嵌套
       */
      handleListItem(result, listStack, indent, listType, text, isTopLevel = false) {
        const currentLevel = Math.floor(indent / 3) // 每3个空格为一级缩进
        
        // 调整列表堆栈到当前级别
        while (listStack.length > currentLevel + 1) {
          const closedList = listStack.pop()
          result.push(`</${closedList.type}>`)
        }
        
        // 如果需要新的列表级别
        if (listStack.length === currentLevel) {
          const listClass = isTopLevel && listType === 'ol' ? ' class="spaced-list"' : ''
          result.push(`<${listType}${listClass}>`)
          listStack.push({ type: listType, level: currentLevel })
        } else if (listStack.length === currentLevel + 1) {
          // 检查是否需要更改列表类型
          const currentList = listStack[currentLevel]
          if (currentList && currentList.type !== listType) {
            result.push(`</${currentList.type}>`)
            const listClass = isTopLevel && listType === 'ol' ? ' class="spaced-list"' : ''
            result.push(`<${listType}${listClass}>`)
            listStack[currentLevel] = { type: listType, level: currentLevel }
          }
        }
        
        // 为顶级有序列表项添加特殊类
        const liClass = isTopLevel && listType === 'ol' ? ' class="main-item"' : ''
        result.push(`<li${liClass}>${text}</li>`)
      },
      
      /**
       * 关闭所有打开的列表
       */
      closeAllLists(result, listStack) {
        while (listStack.length > 0) {
          const list = listStack.pop()
          result.push(`</${list.type}>`)
        }
      },
      
      /**
       * 关闭表格
       */
      closeTable(result, tableRows, inTable) {
        if (inTable && tableRows.length > 0) {
          result.push('<table border="1">')
          tableRows.forEach((row, index) => {
            const cells = row.split('|')
              .slice(1, -1) // 移除首尾空元素
              .map(cell => cell.trim())
            
            // 跳过分割线
            if (cells.every(cell => /^[-\s:]*$/.test(cell))) {
              return
            }
            
            const tag = index === 0 ? 'th' : 'td'
            const cellsHtml = cells.map(cell => `<${tag}>${this.processInlineMarkdown(cell)}</${tag}>`).join('')
            result.push(`<tr>${cellsHtml}</tr>`)
          })
          result.push('</table>')
        }
      },
      
      /**
       * 插入模板
       */
      insertTemplate(type) {
        // 内置模板定义
        const templates = {
          table: `| 名称 | 类型 | 备注 | 解释 |
|------|------|------|------|
| name | string | 必填 | 参数名称 |`,
          code: `\`\`\`javascript
// 示例代码
function example() {
  return 'Hello World'
}
\`\`\``,
          api: `### POST /api/v1/example

#### 请求参数

| 名称 | 类型 | 备注 | 解释 |
|------|------|------|------|
| param1 | string | 必填 | 参数说明 |

#### 响应参数

| 名称 | 类型 | 备注 | 解释 |
|------|------|------|------|
| result | object | | 返回结果 |`
        }
        
        const template = templates[type]
        if (!template) return
        
        const textarea = this.$refs.markdownInput.$el.querySelector('textarea')
        const start = textarea.selectionStart
        const content = this.addParams.content
        
        const newContent = content.substring(0, start) + 
                          '\n\n' + template + '\n\n' + 
                          content.substring(start)
        
        this.addParams.content = newContent
        
        this.$nextTick(() => {
          textarea.focus()
          const newPosition = start + template.length + 4
          textarea.setSelectionRange(newPosition, newPosition)
        })
      },
      
              /**
         * 处理内容变化 - 统一处理字数统计和自动保存
         */
        handleContentChange() {
          this.updateWordCount()
          this.handleAutoSave()
      },
      
      /**
       * 更新字数统计
       */
      updateWordCount() {
          this.wordCount = this.addParams.content.length
        },
        
                 /**
          * 自动保存处理 - 防抖机制
          */
         handleAutoSave() {
           // 如果内容没有变化，不需要保存
           if (this.addParams.content === this.lastSavedContent) {
             return
           }
           
           // 清除之前的定时器
           if (this.autoSaveTimer) {
             clearTimeout(this.autoSaveTimer)
           }
           
           // 显示编辑中状态（不显示保存中，更自然）
           this.autoSaveStatus = {
             type: 'editing',
             text: '编辑中...',
             icon: 'el-icon-edit'
           }
           
           // 设置防抖定时器 - 1秒后执行保存，更加及时
           this.autoSaveTimer = setTimeout(() => {
             // 开始保存时显示保存中状态
             this.autoSaveStatus = {
               type: 'saving',
               text: '保存中...',
               icon: 'el-icon-loading'
             }
             this.performAutoSave()
           }, 1000)
         },
        
        /**
         * 执行自动保存
         */
        async performAutoSave() {
          try {
            // 保存到本地存储作为草稿
            this.saveToDraft()
            
            // 如果有标题，尝试保存到后端
            if (this.addParams.title.trim()) {
              await this.autoSaveToServer()
            }
            
                         // 更新保存状态
             this.autoSaveStatus = {
               type: 'saved',
               text: '已保存',
               icon: 'el-icon-check'
             }
             
             // 更新最后保存的内容
             this.lastSavedContent = this.addParams.content
             
             // 3秒后淡化保存状态显示
             setTimeout(() => {
               if (this.autoSaveStatus.type === 'saved' && this.autoSaveStatus.text === '已保存') {
                 this.autoSaveStatus = {
                   type: 'idle',
                   text: '',
                   icon: ''
                 }
               }
             }, 3000)
            
          } catch (error) {
            console.error('自动保存失败:', error)
            this.autoSaveStatus = {
              type: 'error',
              text: '保存失败',
              icon: 'el-icon-warning'
            }
          }
        },
        
                 /**
          * 生成草稿存储key
          */
         generateDraftKey() {
           // 优先使用文档ID，其次使用标题简化版，最后使用默认值
           if (this.addParams.id) {
             return `markdown_draft_id_${this.addParams.id}`
           } else if (this.addParams.title && this.addParams.title.trim()) {
             // 使用标题的简化版本作为key（去除特殊字符，限制长度）
             const titleKey = this.addParams.title
               .replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, '') // 只保留字母数字和中文
               .substring(0, 20) // 限制长度
             return `markdown_draft_title_${titleKey}`
           }
           return 'markdown_draft_default'
         },
         
         /**
          * 获取所有可能的草稿key
          */
         getAllPossibleDraftKeys() {
           const keys = []
           
           // 基于文档ID的草稿
           if (this.addParams.id) {
             keys.push(`markdown_draft_id_${this.addParams.id}`)
           }
           
           // 基于标题的草稿
           if (this.addParams.title && this.addParams.title.trim()) {
             const titleKey = this.addParams.title
               .replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, '')
               .substring(0, 20)
             keys.push(`markdown_draft_title_${titleKey}`)
           }
           
           // 默认草稿
           keys.push('markdown_draft_default')
           
           return [...new Set(keys)] // 去重
         },
         
         /**
          * 保存草稿到本地存储
          */
         saveToDraft() {
           const draftKey = this.generateDraftKey()
           const draftData = {
             title: this.addParams.title,
             content: this.addParams.content,
             type: this.addParams.type,
             lastSaved: new Date().toISOString()
           }
           
           localStorage.setItem(draftKey, JSON.stringify(draftData))
           console.log('草稿已保存到本地存储:', draftKey)
         },
        
                 /**
          * 从本地存储加载草稿 - 自动恢复，无需用户确认
          */
         loadDraft() {
           const possibleKeys = this.getAllPossibleDraftKeys()
           
           // 查找最新的草稿
           let latestDraft = null
           let latestKey = null
           let latestTime = 0
           
           possibleKeys.forEach(key => {
             const draftData = localStorage.getItem(key)
             if (draftData) {
               try {
                 const draft = JSON.parse(draftData)
                 const draftTime = new Date(draft.lastSaved).getTime()
                 if (draftTime > latestTime) {
                   latestDraft = draft
                   latestKey = key
                   latestTime = draftTime
                 }
               } catch (error) {
                 console.error('解析草稿数据失败:', error)
                 localStorage.removeItem(key)
               }
             }
           })
           
           if (latestDraft) {
             const currentTime = new Date().getTime()
             const timeDiff = currentTime - latestTime
             
             // 如果草稿在24小时内且有内容，自动恢复
             if (timeDiff < 24 * 60 * 60 * 1000 && latestDraft.content && latestDraft.content.trim()) {
               this.addParams.title = latestDraft.title || this.addParams.title
               this.addParams.content = latestDraft.content
               this.addParams.type = latestDraft.type || this.addParams.type
               
               this.lastSavedContent = latestDraft.content
               this.updateWordCount()
               
               // 显示自动恢复提示
               this.$message({
                 message: `已自动恢复草稿 (${new Date(latestDraft.lastSaved).toLocaleString()})`,
                 type: 'success',
                 duration: 3000
               })
               
               // 更新保存状态
               this.autoSaveStatus = {
                 type: 'saved',
                 text: '草稿已恢复',
                 icon: 'el-icon-check'
               }
               
               // 3秒后淡化状态显示
               setTimeout(() => {
                 if (this.autoSaveStatus.type === 'saved' && this.autoSaveStatus.text === '草稿已恢复') {
                   this.autoSaveStatus = {
                     type: 'idle',
                     text: '',
                     icon: ''
                   }
                 }
               }, 3000)
             } else if (timeDiff >= 24 * 60 * 60 * 1000) {
               // 超过24小时的草稿自动清理
               localStorage.removeItem(latestKey)
             }
           }
         },
        
                 /**
          * 清除草稿 - 清除所有可能的草稿key
          */
         clearDraft() {
           const possibleKeys = this.getAllPossibleDraftKeys()
           
           // 清除所有可能的草稿
           possibleKeys.forEach(key => {
             localStorage.removeItem(key)
           })
           
           console.log('已清除草稿:', possibleKeys)
         },
        
        /**
         * 自动保存到服务器
         */
        async autoSaveToServer() {
          // 只有在有标题的情况下才自动保存到服务器
          if (!this.addParams.title.trim()) {
            return
          }
          
          const manageDocumentVo = {
            id: (this.addParams.id && this.addParams.id !== "") ? this.addParams.id : null,
            title: this.addParams.title,
            subTitle: this.addParams.subTitle || '',
            content: this.addParams.content,
            lang: this.$i18n?.locale || 'zh',
            type: this.addParams.type || 2,
            isDraft: true // 标记为草稿
          }
          
          // 这里可以调用后端保存接口
          // const response = await addDocument(manageDocumentVo)
          
                     console.log('自动保存到服务器:', manageDocumentVo)
         },
         
         /**
          * 页面关闭前处理 - 立即保存草稿
          */
         handleBeforeUnload(event) {
           // 如果有未保存的更改，立即保存到本地
           if (this.addParams.content !== this.lastSavedContent) {
             // 立即保存草稿，不使用防抖
             this.saveToDraft()
             
             // 提示用户有未保存的更改
             const message = '您有未保存的更改，确定要离开吗？'
             event.returnValue = message
             return message
           }
      },
      
      /**
       * 预览
       */
      handlePreview() {
        this.previewVisible = true
      },
      
      /**
       * 重置文档内容
       */
      resetDocument() {
        this.$confirm('确定要重置文档内容吗？当前所有修改将丢失。', '确认重置', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 重置文档内容为空，让用户从头开始
          this.addParams.content = ''
          this.addParams.title = ''
          this.addParams.subTitle = ''
          this.addParams.type = ''
          this.addParams.status = 'draft'
          this.addParams.id = null
          
          // 清除相关草稿
          this.clearDraft()
          this.lastSavedContent = ''
          this.updateWordCount()
          
          this.$message.success('文档内容已重置')
        }).catch(() => {
          // 用户取消操作
        })
      },
      
      /**
       * 保存草稿
       */
      async handleSave() {
        if (!this.addParams.title.trim()) {
          this.$message.warning('请输入文档标题')
          return
        }
        
        this.saveLoading = true
        
        try {
          // 准备发送给后端的文档数据（严格按照后端接口文档）
          const manageDocumentVo = {
            id: (this.addParams.id && this.addParams.id !== "") ? this.addParams.id : null,
            title: this.addParams.title,
            subTitle: this.addParams.subTitle || '',
            content: this.addParams.content,
            lang: this.$i18n?.locale || 'zh', // zh中文 en英文
            type: 2  // 0其他 1服务条款 2api文档 3挖矿教程
          }
          
          console.log('保存文档数据 - 完整参数:', manageDocumentVo)
          console.log('当前语言:', this.$i18n?.locale)
          
          // 调用后端接口保存文档
          const response = await addDocument(manageDocumentVo)
          
          if (response && response.code === 200) {
            this.$message.success('草稿保存成功')
            // 保存返回的文档ID用于后续更新
            if (response.data && response.data.id) {
              this.addParams.id = response.data.id
            }
            
            // 清除本地草稿
            this.clearDraft()
            this.lastSavedContent = this.addParams.content
            
            // 更新保存状态
            this.autoSaveStatus = {
              type: 'saved',
              text: '已保存',
              icon: 'el-icon-check'
            }
            
            // 3秒后淡化状态显示
            setTimeout(() => {
              if (this.autoSaveStatus.type === 'saved' && this.autoSaveStatus.text === '已保存') {
                this.autoSaveStatus = {
                  type: 'idle',
                  text: '',
                  icon: ''
                }
              }
            }, 3000)
          } else {
            throw new Error(response?.message || '保存失败')
          }
          
        } catch (error) {
          console.error('保存文档失败:', error)
          this.$message.error('保存失败: ' + (error.message || '未知错误'))
        } finally {
          this.saveLoading = false
        }
      },
      
      /**
       * 发布文档
       */
      async handlePublish() {
        if (!this.addParams.title.trim()) {
          this.$message.warning('请输入文档标题')
          return
        }
        
        if (!this.addParams.content.trim()) {
          this.$message.warning('请输入文档内容')
          return
        }
        if (!this.addParams.type) {
            this.$message.warning('请选择文档类型')
          return
        }
        
        this.publishLoading = true
        
        try {
          // 准备发送给后端的文档数据（严格按照后端接口文档）
          const manageDocumentVo = {
            id: (this.addParams.id && this.addParams.id !== "") ? this.addParams.id : null,
            title: this.addParams.title,
            subTitle: this.addParams.subTitle || '',
            content: this.addParams.content,
            lang: this.$i18n?.locale || 'zh', // zh中文 en英文
            type: this.addParams.type ||"",
          }
          
          console.log('发布文档数据 - 完整参数:', manageDocumentVo)
          console.log('当前语言:', this.$i18n?.locale)
          console.log('文档ID类型:', typeof this.addParams.id, '值:', this.addParams.id)
          
          
          // 调用后端接口发布文档
          const response = await addDocument(manageDocumentVo)
          
          if (response && response.code === 200) {
            this.addParams.status = 'published'
            this.$message.success('文档发布成功')
            
            // 保存返回的文档ID
            if (response.data && response.data.id) {
              this.addParams.id = response.data.id
            }
            
            // 清除本地草稿
            this.clearDraft()
            this.lastSavedContent = this.addParams.content
            
            // 更新保存状态
            this.autoSaveStatus = {
              type: 'saved',
              text: '已发布',
              icon: 'el-icon-success'
            }
            
            // 3秒后淡化状态显示
            setTimeout(() => {
              if (this.autoSaveStatus.type === 'saved' && this.autoSaveStatus.text === '已发布') {
                this.autoSaveStatus = {
                  type: 'idle',
                  text: '',
                  icon: ''
                }
              }
            }, 3000)
            
            // 发布成功通知
            this.$notify({
              title: '发布成功',
              message: `文档 "${this.addParams.title}" 已成功发布`,
              type: 'success',
              duration: 3000
            })
            
          } else {
           
            throw new Error(response?.message || '发布失败')
          }
          
        } catch (error) {
          console.error('发布文档失败:', error)
          this.$message.error('发布失败: ' + (error.message || '未知错误'))
        } finally {
          this.publishLoading = false
        }
      },
      
      /**
       * 复制HTML
       */
      copyHtml() {
        const html = this.markdownToHtml(this.addParams.content)
        navigator.clipboard.writeText(html).then(() => {
          this.$message.success('HTML已复制到剪贴板')
        })
      },
      
      /**
       * 复制参数
       */
      copyParams() {
        navigator.clipboard.writeText(this.formattedParams).then(() => {
          this.$message.success('参数已复制到剪贴板')
        })
      }
    },
    
    mounted() {
        // 更新字数统计
      this.updateWordCount()
        
        // 加载本地草稿
        this.loadDraft()
        
        // 初始化最后保存的内容
        this.lastSavedContent = this.addParams.content
        
        // 监听页面关闭事件，自动保存
        window.addEventListener('beforeunload', this.handleBeforeUnload)
        
        // 短暂显示自动保存功能提示（如果没有恢复草稿的话）
        setTimeout(() => {
          if (this.autoSaveStatus.type === 'idle') {
            this.autoSaveStatus = {
              type: 'saved',
              text: '自动保存已启用',
              icon: 'el-icon-circle-check'
            }
            
            // 2秒后隐藏提示
            setTimeout(() => {
              if (this.autoSaveStatus.text === '自动保存已启用') {
                this.autoSaveStatus = {
                  type: 'idle',
                  text: '',
                  icon: ''
                }
              }
            }, 2000)
          }
        }, 500)
      },
      
      beforeDestroy() {
        // 清理自动保存定时器
        if (this.autoSaveTimer) {
          clearTimeout(this.autoSaveTimer)
        }
        
        // 移除页面关闭事件监听器
        window.removeEventListener('beforeunload', this.handleBeforeUnload)
    }
  }
  </script>
  
  <style scoped>
  /* 编辑器主体样式 */
  .editor-main {
    padding: 8px;
    background: #fff;
   height: 78vh;
    overflow-y: auto;
    /* background: palegoldenrod; */
  }
  
  /* 文档信息面板 */
  .doc-info {
    margin-bottom: 20px;
  }
  
  .doc-info :deep(.el-card__header) {
    font-weight: 600;
    color: #2c3e50;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
  }
  
  /* 编辑器头部 */
  .editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0f0f0;
  }
  
  .header-title h1 {
    margin: 0;
    color: #2c3e50;
    font-size: 28px;
    font-weight: 600;
    background: linear-gradient(135deg, #5721E4, #8B5FBF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .header-title p {
    margin: 4px 0 0 0;
    color: #7f8c8d;
    font-size: 14px;
  }
  
  .header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  
  /* 编辑器工具栏 */
  .editor-tools {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
  }
  
  .mode-switch {
    display: flex;
    background: #fff;
    border-radius: 6px;
    padding: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  
  .mode-switch .mode-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #7f8c8d;
    transition: all 0.2s ease;
  }
  
  .mode-switch .mode-btn.active {
    background: #5721E4;
    color: #fff;
    box-shadow: 0 2px 4px rgba(87, 33, 228, 0.2);
  }
  
  .mode-switch .mode-btn:hover:not(.active) {
    background: #f0f0f0;
    color: #5721E4;
  }
  
  .tool-actions {
    display: flex;
    gap: 8px;
  }
  
  /* 编辑器面板 */
  .editor-panel {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
  }
  
  .panel-actions {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  
  .word-count {
    font-size: 12px;
    color: #7f8c8d;
  }
  
  /* 自动保存状态样式 */
  .auto-save-status {
    font-size: 12px;
    margin-left: 12px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    font-weight: 500;
  }
  
  .auto-save-status i {
    margin-right: 4px;
  }
  
  .auto-save-status.editing {
    color: #909399;
  }
  
  .auto-save-status.saving {
    color: #409EFF;
  }
  
  .auto-save-status.saving i {
    animation: rotate 1s linear infinite;
  }
  
  .auto-save-status.saved {
    color: #67C23A;
  }
  
  .auto-save-status.error {
    color: #F56C6C;
  }
  
  .auto-save-status.idle {
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  /* Markdown编辑区域 */
  .markdown-textarea :deep(.el-textarea) {
    border: none;
    box-shadow: none;
  }
  
  .markdown-textarea :deep(.el-textarea__inner) {
    border: none;
    border-radius: 0;
    resize: none;
    font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    background: #fafafa;
    color: #2c3e50;
    padding: 20px;
    min-height: 600px;
  }
  
  .markdown-textarea :deep(.el-textarea__inner:focus) {
    box-shadow: none;
    border: none;
  }
  
  /* Markdown预览区域 */
  .markdown-preview {
    padding: 20px;
    max-height: 600px;
    overflow-y: auto;
    background: #fff;
    color: #2c3e50;
    font-size: 14px;
    line-height: 1.6;
  }
  
  .markdown-preview :deep(h1) {
    color: #2c3e50;
    font-size: 24px;
    font-weight: 600;
    margin: 24px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e0e0e0;
  }
  
  .markdown-preview :deep(h2) {
    color: #2c3e50;
    font-size: 20px;
    font-weight: 600;
    margin: 20px 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .markdown-preview :deep(h3) {
    color: #2c3e50;
    font-size: 16px;
    font-weight: 600;
    margin: 16px 0 8px 0;
  }
  
  .markdown-preview :deep(p) {
    margin: 12px 0;
    line-height: 1.6;
  }
  
  /* 列表样式 - 增加条目间距 */
  .markdown-preview :deep(ul), 
  .markdown-preview :deep(ol) {
    margin: 12px 0;
    padding-left: 24px;
    line-height: 1.6;
  }
  
  .markdown-preview :deep(li) {
    margin: 8px 0;
    line-height: 1.6;
  }
  
  /* 增加有序列表条目间的额外间距 */
  .markdown-preview :deep(ol > li) {
    margin: 12px 0;
  }
  
  /* 嵌套列表项保持较小间距 */
  .markdown-preview :deep(li > ul > li),
  .markdown-preview :deep(li > ol > li) {
    margin: 6px 0;
  }
  
  /* 顶级有序列表项增大间距 */
  .markdown-preview :deep(ol.spaced-list) {
    margin: 16px 0;
  }
  
  .markdown-preview :deep(ol.spaced-list > li.main-item) {
    margin: 16px 0;
    padding-bottom: 8px;
  }
  
  /* 顶级列表项下的嵌套列表保持正常间距 */
  .markdown-preview :deep(ol.spaced-list > li.main-item > ul),
  .markdown-preview :deep(ol.spaced-list > li.main-item > ol) {
    margin: 8px 0;
  }
  
  /* 嵌套列表缩进 */
  .markdown-preview :deep(ul ul), 
  .markdown-preview :deep(ol ol),
  .markdown-preview :deep(ul ol), 
  .markdown-preview :deep(ol ul) {
    margin: 4px 0;
    padding-left: 20px;
  }
  
  .markdown-preview :deep(table) {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
  }
  
  .markdown-preview :deep(table th) {
    background: #f8f9fa;
    font-weight: 600;
    color: #2c3e50;
    font-size: 13px;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
  }
  
  .markdown-preview :deep(table td) {
    font-size: 13px;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .markdown-preview :deep(table td:nth-child(2)) {
    font-family: 'Monaco', 'Consolas', monospace;
    color: #e74c3c;
    font-weight: 500;
  }
  
  .markdown-preview :deep(pre) {
    margin: 16px 0;
    padding: 14px;
    background: #f8f9fa;
    border-radius: 6px;
    overflow-x: auto;
    border: 1px solid #e0e0e0;
  }
  
  .markdown-preview :deep(code) {
    background: #f0f0f0;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 12px;
    color: #e74c3c;
  }
  
  /* 链接样式 */
  .markdown-preview :deep(a) {
    color: #5721E4;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
  }
  
  .markdown-preview :deep(a:hover) {
    color: #8B5FBF;
    border-bottom: 1px solid #8B5FBF;
    text-decoration: none;
  }
  
  .markdown-preview :deep(a:visited) {
    color: #9B59B6;
  }
  
  .markdown-preview :deep(a:active) {
    color: #3F16A0;
  }
  
  /* 参数预览区域 */
  .params-preview {
    margin-bottom: 20px;
  }
  
  .params-preview :deep(.el-card__header) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #2c3e50;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
  }
  
  .params-json {
    background: #2d3748;
    color: #e2e8f0;
    padding: 20px;
    border-radius: 8px;
    font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 300px;
    overflow-y: auto;
  }
  
  /* 预览对话框 */
  .preview-content {
    padding: 20px;
    line-height: 1.6;
  }
  
  .preview-content p {
    line-height: 1.6;
    margin: 12px 0;
  }
  
  .preview-content ul, 
  .preview-content ol {
    line-height: 1.6;
    margin: 12px 0;
    padding-left: 24px;
  }
  
  .preview-content li {
    line-height: 1.6;
    margin: 8px 0;
  }
  
  .preview-content ol > li {
    margin: 12px 0;
  }
  
  .preview-content li > ul > li,
  .preview-content li > ol > li {
    margin: 6px 0;
  }
  
  /* 预览对话框中的顶级列表间距 */
  .preview-content ol.spaced-list {
    margin: 16px 0;
  }
  
  .preview-content ol.spaced-list > li.main-item {
    margin: 16px 0;
    padding-bottom: 8px;
  }
  
  .preview-content ol.spaced-list > li.main-item > ul,
  .preview-content ol.spaced-list > li.main-item > ol {
    margin: 8px 0;
  }
  
  .preview-content h1, 
  .preview-content h2, 
  .preview-content h3, 
  .preview-content h4 {
    color: #2c3e50;
    margin-top: 24px;
    margin-bottom: 12px;
  }
  
  .preview-content table {
    margin: 16px 0;
  }
  
  .preview-content table th {
    background: #f8f9fa;
  }
  
  .preview-content pre {
    background: #f8f9fa;
    padding: 14px;
    border-radius: 6px;
  }
  
  /* 响应式设计 */
  @media screen and (max-width: 768px) {
    .markdown-editor {
      padding: 10px;
    }
    
    .editor-header {
      flex-direction: column;
      gap: 16px;
      align-items: stretch;
    }
    
    .header-actions {
      justify-content: center;
    }
    
    .doc-info .el-row .el-col:not(.el-col-24) {
      width: 100% !important;
      margin-bottom: 16px;
    }
    
    .editor-tools {
      justify-content: center;
      flex-wrap: wrap;
    }
    
    .panel-header {
      flex-direction: column;
      gap: 8px;
      align-items: flex-start !important;
    }
    
    .markdown-textarea :deep(.el-textarea__inner) {
      font-size: 13px;
    }
    
    .markdown-preview {
      font-size: 13px;
      line-height: 1.6;
    }
    
    .markdown-preview :deep(p) {
      line-height: 1.6;
      margin: 10px 0;
    }
    
    .markdown-preview :deep(ul), 
    .markdown-preview :deep(ol) {
      line-height: 1.6;
      margin: 10px 0;
    }
    
    .markdown-preview :deep(li) {
      line-height: 1.6;
      margin: 6px 0;
    }
    
    .markdown-preview :deep(ol > li) {
      margin: 10px 0;
    }
    
    .markdown-preview :deep(ol.spaced-list > li.main-item) {
      margin: 14px 0;
      padding-bottom: 6px;
    }
  }

/* Markdown指南样式 */
.markdown-guide-card {
  margin: 20px 0;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.markdown-guide-card :deep(.el-card__header) {
  background: linear-gradient(135deg, #5721E4, #8B5FBF);
  color: white;
  border-bottom: none;
  font-weight: 600;
}

.markdown-guide-card :deep(.el-card__header .el-button--text) {
  color: white;
  font-weight: 500;
}

.markdown-guide-card :deep(.el-card__header .el-button--text:hover) {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.guide-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px;
}

.guide-section {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #eee;
}

.guide-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.guide-section h4 {
  font-size: 16px;
  font-weight: 600;
  color: #5721E4;
  margin-bottom: 15px;
  position: relative;
  padding-left: 15px;
}

.guide-section h4::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 15px;
  background: #5721E4;
  border-radius: 2px;
}

.example-container {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.syntax-example,
.result-preview {
  flex: 1;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  overflow: hidden;
}

.syntax-example {
  background: #f8f9fa;
}

.syntax-example pre {
  margin: 0;
  padding: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #2c3e50;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  overflow-x: auto;
}

.syntax-example code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

.result-preview {
  background: #fff;
  padding: 12px;
  border-left: 3px solid #5721E4;
}

.result-preview > *:first-child {
  margin-top: 0;
}

.result-preview > *:last-child {
  margin-bottom: 0;
}

/* 提示区域 */
.tips-section {
  border-top: 2px solid #5721E4;
  padding-top: 20px;
  margin-top: 30px;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin-top: 15px;
}

.tip-item {
  background: linear-gradient(135deg, #f8f9ff, #f0f2ff);
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #2c3e50;
  transition: all 0.3s ease;
}

.tip-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(87, 33, 228, 0.15);
  border-color: #5721E4;
}

.tip-item strong {
  color: #5721E4;
  font-weight: 600;
}

/* 展开/收起动画 */
.slide-fade-enter-active {
  transition: all 0.4s ease;
}

.slide-fade-leave-active {
  transition: all 0.4s ease;
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .example-container {
    flex-direction: column;
    gap: 10px;
  }
  
  .tips-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .guide-content {
    max-height: 50vh;
  }
  
  .syntax-example pre {
    font-size: 12px;
    padding: 8px;
  }
  
  .result-preview {
    padding: 8px;
    }
  }
  </style>