shudao-main/shudao-vue-frontend/src/views/mobile/m-AIWriting.vue

<template>
  <div class="mobile-ai-writing">
    <!-- 使用移动端通用头部组件 -->
    <MobileHeader title="AI写作" @back="goBack" @menu="showHistoryDrawer" />
    
    <div class="mobile-content">
      <!-- 使用移动端通用历史记录抽屉 -->
      <MobileHistoryDrawer
        :visible="!isGenerating && showHistory"
        title="历史记录"
        :historyData="historyData"
        :loading="isLoadingHistory"
        @close="showHistory = false"
        @createNewTask="createNewTask"
        @handleHistoryItem="handleHistoryItem"
        @deleteHistoryItem="deleteHistoryItem"
      />

      <!-- 步骤一：AI写作主页面 - 完全复用PC端结构 -->
      <div v-if="currentView === 'main'" class="ai-writing-card">
        <!-- Loading遮罩 - 只覆盖当前卡片 -->
        <div v-if="isGenerating" class="card-loading-overlay">
          <div class="loading-spinner"></div>
          <div class="loading-text">正在生成文档，请稍候...</div>
        </div>
        <!-- 文档生成区域 -->
        <div class="document-generation">
          <h3>帮我写作</h3>
          <p class="subtitle">智能生成办公文档，提升办公效能，高效创作</p>

          <div class="input-area">
            <div class="template-input-container"
                 contenteditable="true"
                 @input="handleTemplateInput"
                 @copy="handleCopy"
                 placeholder="请在这里输入您的写作要求..."></div>

            <div class="input-actions">
              <div class="left-actions">
                <button class="attachment-btn" @click="triggerFileUpload" :disabled="isSending">
                  <img src="@/assets/AIWriting/4.png" alt="附件" class="action-icon" />
                </button>
                <!-- 文件预览区域 - 显示在输入框右边 -->
                <div v-if="selectedFile" class="file-preview-inline">
                  <div class="file-info-inline">
                    <span class="file-icon-inline">{{ selectedFile.icon }}</span>
                    <span class="file-name-inline">{{ selectedFile.name }}</span>
                    <button class="remove-file-inline" @click="removeSelectedFile">
                      <span class="remove-icon">×</span>
                    </button>
                  </div>
                </div>
              </div>

              <div class="right-actions">
                <button class="voice-btn" @click="handleVoiceClick" :disabled="isSending" :class="{ 'recording': isListening }">
                  <div class="icon-container">
                    <img src="@/assets/Chat/18.png" alt="语音" class="voice-icon" />
                    <div v-if="isListening" class="recording-indicator"></div>
                  </div>
                </button>
                <div class="divider"></div>
                <button class="send-btn" @click="sendAIWritingRequest" :disabled="isGenerating || isSending">
                  <img
                    :src="hasInputContent ? sendIconFilled : sendIconEmpty"
                    alt="发送"
                    class="send-icon"
                  />
                  <span v-if="isGenerating" class="generating-text">生成中...</span>
                </button>
              </div>
            </div>
            <p class="hint-text">提示：请输入关键字，AI将根据关键字生成文档</p>
          </div>
        </div>

        <!-- 文档模板区域 - 完全复用PC端 -->
        <div class="document-templates">
          <div class="template-tabs">
            <div
              v-for="tab in tabs"
              :key="tab.key"
              :class="['tab-item', { active: activeTab === tab.key }]"
              @click="switchTab(tab.key)"
            >
              {{ tab.name }}
            </div>
          </div>

          <div class="template-cards">
            <div 
              v-for="template in filteredTemplates" 
              :key="template.id"
              :class="['template-card', template.buttonClass]"
            >
              <div class="template-row">
                <div :class="['template-icon', getIconClass(template.buttonClass)]">
                  <img :src="template.image" :alt="template.name" class="template-icon-img" />
                </div>
                <div class="template-info">
                  <div class="template-title">{{ template.name }}</div>
                  <div class="template-desc">{{ getDescription(template.name) }}</div>
                </div>
                <button
                  :class="['use-template-btn', template.buttonClass]"
                  @click="useTemplate(template.name)"
                >
                  使用此模板
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 步骤二：富文本编辑器 -->
      <div v-if="currentView === 'editor'" class="editor-view">
        <!-- 编辑器Loading遮罩 - 只覆盖编辑器区域 -->
        <div v-if="isGenerating" class="editor-loading-overlay">
          <div class="loading-spinner"></div>
          <div class="loading-text">正在生成文档，请稍候...</div>
        </div>
        
        <div class="editor-header">
          <div class="editor-title">
            <h3>文档预览</h3>
            <p class="editor-subtitle" v-if="!isGenerating">编辑请去电脑端</p>
            <p class="editor-subtitle" v-else>AI正在生成内容，请稍候...</p>
          </div>
          <div class="editor-actions">
            <button class="download-btn" @click="downloadDocument" :disabled="isGenerating">
              <img src="@/assets/Exam/13.png" alt="下载Word" class="download-icon" />
            </button>
          </div>
        </div>

        <!-- 富文本编辑器 -->
        <div class="editor-container">
          <div 
            ref="richEditor"
            class="rich-text-editor"
            v-html="editorContent"
            contenteditable="false"
          ></div>
        </div>
      </div>
    </div>

    <!-- 去除弹窗方式，改为直接录音，保留占位注释以便回滚 -->

    <!-- 移动端Toast提示组件 -->
    <MobileToast 
      :visible="showToast" 
      :message="toastMessage" 
      :duration="2000"
      @close="closeToast" 
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, watch, nextTick, computed } from 'vue'
import { useRouter } from 'vue-router'
import MobileHeader from '@/components/MobileHeader.vue'
import MobileHistoryDrawer from '@/components/MobileHistoryDrawer.vue'
import MobileToast from '@/components/MobileToast.vue'
import VoiceModal from '@/components/VoiceModal.vue'
// 移除 element-plus 的 ElMessage，改用移动端 Toast
import { apis } from '@/request/apis.js'
// ===== 已删除：getUserId - 不再需要，改用token =====
// import { getUserId } from '@/utils/userManager.js'
import { useSpeechRecognition } from '@/composables/useSpeechRecognition'

// 完全复用PC端的导入
import sendIconEmpty from '@/assets/Chat/15.png'
import sendIconFilled from '@/assets/Chat/16.png'
import announcementIcon from '@/assets/AIWriting/20.png'
import notificationIcon from '@/assets/AIWriting/21.png'
import summaryIcon from '@/assets/AIWriting/22.png'
import meetingIcon from '@/assets/AIWriting/20.png'
import speechIcon from '@/assets/AIWriting/21.png'

const router = useRouter()

// 响应式数据 - 复用PC端逻辑
const currentView = ref('main') // 'main' | 'editor'
const showHistory = ref(false)
const isGenerating = ref(false)
const isSending = ref(false)
// 语音识别（与PC端保持一致）
const {
  isSupported: speechSupported,
  isListening,
  transcript,
  error: speechError,
  startListening,
  stopListening,
} = useSpeechRecognition()
const templateContent = ref('')
const editorContent = ref('')
const selectedFile = ref(null)
const showVoiceModal = ref(false)
const richEditor = ref(null)
const activeTab = ref("all")

// 历史记录相关数据
const historyData = ref([])
const historyTotal = ref(0)
const isLoadingHistory = ref(false)
const ai_conversation_id = ref(0)

// Toast相关状态
const showToast = ref(false)
const toastMessage = ref('')

// 移动端Toast提示方法
const displayToast = (message, duration = 2000) => {
  toastMessage.value = message
  showToast.value = true
  
  setTimeout(() => {
    closeToast()
  }, duration)
}

// 关闭Toast
const closeToast = () => {
  showToast.value = false
}

// 完全复用PC端的模板配置
const tabs = [
  { key: "all", name: "全部" },
  { key: "announcement", name: "公告" },
  { key: "notification", name: "通知" },
  { key: "summary", name: "总结" },
  { key: "meeting", name: "会议" },
  { key: "speech", name: "决定" },
];

const templates = [
  {
    id: 1,
    name: "公告模板",
    image: announcementIcon,
    category: "announcement",
    buttonClass: "announcement-btn"
  },
  {
    id: 2,
    name: "通知模板",
    image: notificationIcon,
    category: "notification",
    buttonClass: "notification-btn"
  },
  {
    id: 3,
    name: "工作汇报模板",
    image: summaryIcon,
    category: "summary",
    buttonClass: "report-btn"
  },
  {
    id: 4,
    name: "会议纪要模版",
    image: meetingIcon,
    category: "meeting",
    buttonClass: "announcement-btn"
  },
  {
    id: 5,
    name: "决定模版",
    image: speechIcon,
    category: "speech",
    buttonClass: "notification-btn"
  }
];

// 复用PC端的计算属性
const filteredTemplates = computed(() => {
  if (activeTab.value === "all") {
    return templates;
  }
  return templates.filter(template => template.category === activeTab.value);
});

// 获取模板描述与图标类，保持与原配色一致
const getDescription = (name) => {
  switch (name) {
    case '公告模板':
      return '适用于各类信息公告'
    case '通知模板':
      return '适用于各类通知公文'
    case '工作汇报模板':
      return '适用于各类工作汇报'
    case '会议纪要模版':
      return '适用于正式会议的记录'
    case '决定模版':
      return '适用于各类专业的决定文稿'
    default:
      return '常用办公文档模板'
  }
}

const getIconClass = (buttonClass) => {
  // 与按钮配色映射
  return {
    'announcement-btn': 'icon-announcement',
    'notification-btn': 'icon-notification',
    'report-btn': 'icon-report'
  }[buttonClass] || 'icon-announcement'
}

const getEmoji = (name) => {
  switch (name) {
    case '公告模板': return '📢'
    case '通知模板': return '📣'
    case '工作汇报模板': return '📝'
    case '会议纪要模版': return '🗓️'
    case '决定模版': return '✅'
    default: return '📄'
  }
}

const hasInputContent = computed(() => {
  return templateContent.value && templateContent.value.trim().length > 0
});

// 切换标签
const switchTab = (tabKey) => {
  activeTab.value = tabKey
}

// 使用模板 - 复用PC端的useTemplate方法
const useTemplate = (templateName) => {
  let content = ''
  
  switch (templateName) {
    case '公告模板':
      content = "<span class=\"editable-highlight\" contenteditable=\"true\">公告主题：</span>\n<span class=\"editable-highlight\" contenteditable=\"true\">发文单位：</span>\n<span class=\"editable-highlight\" contenteditable=\"true\">核心内容：</span>\n\n请帮我生成一份正式的公告，要求格式规范、语言严谨，具体参考以上内容，按照标准公告格式生成全文，包括标题、正文、落款等所有要素。"
      break
    case '通知模板':
      content = "<span class=\"editable-highlight\" contenteditable=\"true\">通知主题：</span>\n<span class=\"editable-highlight\" contenteditable=\"true\">通知对象：</span>\n<span class=\"editable-highlight\" contenteditable=\"true\">具体事项：</span>\n\n请帮我生成一份正式的通知，要求格式规范、语言严谨，具体参考以上内容，按照标准公文格式生成完整通知，包括文号、标题、正文、落款等所有要素。"
      break
    case '工作汇报模板':
      content = "<span class=\"editable-highlight\" contenteditable=\"true\">总结主题：</span>\n<span class=\"editable-highlight\" contenteditable=\"true\">总结时间：</span>\n<span class=\"editable-highlight\" contenteditable=\"true\">主要内容：</span>\n\n请帮我生成一份正式的总结报告，要求格式规范、语言严谨，具体参考以上内容，按照标准工作总结格式生成全文，包含\"工作总结、问题不足、未来计划\"三部分的完整报告。"
      break
    case '会议纪要模版':
      content = "<span class=\"editable-highlight\" contenteditable=\"true\">会议主题：</span>\n<span class=\"editable-highlight\" contenteditable=\"true\">会议时间：</span>\n<span class=\"editable-highlight\" contenteditable=\"true\">主要议题：</span>\n\n请帮我生成一份正式的会议纪要，要求格式规范、语言严谨，具体参考以上内容，按照标准会议纪要格式生成全文，包含标题、导语、议定事项和落款。"
      break
    case '决定模版':
      content = "<span class=\"editable-highlight\" contenteditable=\"true\">决定主题：</span>\n<span class=\"editable-highlight\" contenteditable=\"true\">决定依据：</span>\n<span class=\"editable-highlight\" contenteditable=\"true\">决定内容：</span>\n\n请帮我生成一份正式的决定，要求格式规范、语言严谨，具体参考以上内容，按照标准决定公文格式生成完整文件。"
      break
    default:
      content = "<span class=\"editable-highlight\" contenteditable=\"true\">文档主题：</span>\n<span class=\"editable-highlight\" contenteditable=\"true\">主要内容：</span>\n<span class=\"editable-highlight\" contenteditable=\"true\">具体要求：</span>\n\n请帮我生成一份正式的文档，要求格式规范、语言严谨，具体参考以上内容。"
  }
  
  // 设置模板内容到输入框
  const inputElement = document.querySelector('.template-input-container')
  if (inputElement) {
    inputElement.innerHTML = content
    templateContent.value = content.replace(/<[^>]*>/g, '')
    
    // 确保高亮元素的样式和交互功能
    nextTick(() => {
      const highlights = inputElement.querySelectorAll('.editable-highlight')
      highlights.forEach(highlight => {
        highlight.style.backgroundColor = '#3E7BFA10'
        highlight.style.color = '#3E7BFA'
        highlight.style.padding = '4px 8px'
        highlight.style.borderRadius = '6px'
        highlight.style.fontWeight = '500'
        highlight.style.cursor = 'text'
        highlight.style.border = '1px solid transparent'
        highlight.style.display = 'inline-block'
        highlight.style.minWidth = '20px'
        highlight.style.margin = '6px 8px 6px 0'
        
        // 添加点击编辑功能
        highlight.addEventListener('click', () => {
          highlight.contentEditable = 'true'
          highlight.focus()
        })
        
        highlight.addEventListener('blur', () => {
          highlight.contentEditable = 'false'
        })
      })
    })
  }
}

// 处理输入框输入
const handleTemplateInput = (event) => {
  const element = event.target
  templateContent.value = element.textContent || ''
  
  // 确保高亮元素的样式
  nextTick(() => {
    const highlights = element.querySelectorAll('.editable-highlight')
    highlights.forEach(highlight => {
      highlight.style.backgroundColor = '#3E7BFA10'
      highlight.style.color = '#3E7BFA'
      highlight.style.padding = '4px 8px'
      highlight.style.borderRadius = '6px'
      highlight.style.fontWeight = '500'
      highlight.style.cursor = 'text'
      highlight.style.border = '1px solid transparent'
      highlight.style.display = 'inline-block'
      highlight.style.minWidth = '20px'
      highlight.style.margin = '6px 8px 6px 0'
    })
  })
}

// 处理复制事件
const handleCopy = (event) => {
  event.preventDefault()
  const selection = window.getSelection()
  if (selection.toString().trim()) {
    navigator.clipboard.writeText(selection.toString())
  }
}

// 处理文件上传
const triggerFileUpload = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.pdf,.doc,.docx,.txt,.jpg,.jpeg,.png'
  input.onchange = (event) => {
    const file = event.target.files[0]
    if (file) {
      selectedFile.value = {
        name: file.name,
        size: file.size,
        icon: getFileIcon(file.type)
      }
    }
  }
  input.click()
}

// 获取文件图标
const getFileIcon = (fileType) => {
  if (fileType.includes('pdf')) return '📄'
  if (fileType.includes('word') || fileType.includes('document')) return '📝'
  if (fileType.includes('image')) return '🖼️'
  return '📎'
}

// 移除文件
const removeSelectedFile = () => {
  selectedFile.value = null
}

// 处理语音点击（直接开始/停止录音，与PC端一致）
const handleVoiceClick = () => {
  if (!speechSupported.value) {
    displayToast('当前浏览器不支持语音识别')
    return
  }
  if (isListening.value) {
    stopListening()
  } else {
    // 开始前清空上次结果
    // 由组合函数内部管理 transcript
    startListening()
  }
}

// 监听语音识别转写内容，实时写入输入框
watch(transcript, (val) => {
  if (!val) return
  const inputElement = document.querySelector('.template-input-container')
  if (inputElement) {
    inputElement.textContent = val
    templateContent.value = val
  }
})

// 监听语音识别错误
watch(speechError, (err) => {
  if (err) displayToast(String(err))
})

// 发送AI写作请求 - 调用真实API接口
const sendAIWritingRequest = async () => {
  if (!hasInputContent.value) {
    console.log("请输入内容");
    return;
  }
  
  // 直接进入富文本编辑器并显示loading
  currentView.value = 'editor';
  isGenerating.value = true;
  
  try {
    console.log('开始调用AI写作API...');
    console.log('对话ID:', ai_conversation_id.value);
    console.log('消息内容:', templateContent.value);
    
    // 调用真实的AI写作接口 - 与PC端保持一致
    const response = await apis.sendDeepseekMessage({
      // ===== 已删除：user_id - 后端从token解析 =====
      ai_conversation_id: ai_conversation_id.value,
      message: templateContent.value,
      business_type: 2 // AI写作类型
    });
    
    console.log('AI写作API响应:', response);
    
    if (response.statusCode === 200) {
      // 设置对话ID
      if (response.data && response.data.ai_conversation_id) {
        ai_conversation_id.value = response.data.ai_conversation_id;
      }
      
      // 设置文档内容 - 与PC端保持一致
      const aiReply = response.data.reply;
      if (aiReply) {
        // 直接使用AI回复内容
        editorContent.value = aiReply;
      } else {
        // 如果没有AI回复，生成默认内容
        const mockContent = generateMockContent(templateContent.value);
        editorContent.value = mockContent;
      }
      
      console.log('AI写作成功，文档内容已设置');
    } else {
      console.error('AI写作失败:', response);
      displayToast('生成失败，请重试');
      // 生成模拟内容作为后备
      const mockContent = generateMockContent(templateContent.value);
      editorContent.value = mockContent;
    }
    
    isGenerating.value = false;
  } catch (error) {
    console.error('AI写作API调用失败:', error);
    displayToast('网络错误，请重试');
    // 生成模拟内容作为后备
    const mockContent = generateMockContent(templateContent.value);
    editorContent.value = mockContent;
    isGenerating.value = false;
  }
}

// 生成模拟内容
const generateMockContent = (inputText) => {
  return `
    <div class="document-content">
      <h1>总结报告</h1>
      <div class="content-body">
        <h2>一、工作总结</h2>
        <p>根据您的要求，以下是详细的总结报告内容：</p>
        <p>${inputText}</p>
        
        <h2>二、主要成果</h2>
        <ul>
          <li>完成项目目标，达成率100%</li>
          <li>团队协作效率提升30%</li>
          <li>客户满意度达到95%</li>
        </ul>
        
        <h2>三、存在的问题</h2>
        <p>在执行过程中，我们发现了以下问题和不足：</p>
        <ul>
          <li>时间安排有待优化</li>
          <li>资源配置需要调整</li>
          <li>沟通机制需要完善</li>
        </ul>
        
        <h2>四、下阶段计划</h2>
        <p>基于前期工作总结，下阶段将重点关注以下几个方面：</p>
        <ul>
          <li>优化工作流程，提高效率</li>
          <li>加强团队协作，改善沟通</li>
          <li>完善制度体系，确保执行</li>
        </ul>
      </div>
    </div>
  `;
}

// 下载文档 - 复用PC端的实现
const downloadDocument = async () => {
  if (!editorContent.value) {
    displayToast('没有可下载的内容')
    return
  }
  
  try {
    console.log('开始下载AI写作文档...')
    
    // 提取文档标题
    const documentTitle = extractDocumentTitle(editorContent.value);
    
    // 创建改进的HTML格式Word文档内容（与PC端保持一致）
    const wordContent = createImprovedWordContent(editorContent.value, documentTitle);
    
    // 创建Blob对象 - 使用Word兼容的MIME类型
    const blob = new Blob([wordContent], { 
      type: 'application/msword' 
    });
    
    // 下载文件
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `${documentTitle}.doc`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
    
    displayToast('Word文档下载成功！')
    console.log('✅ AI写作文档下载成功')
  } catch (error) {
    console.error('下载Word文档失败:', error)
    displayToast('下载失败，请重试')
  }
}

// 提取文档标题
const extractDocumentTitle = (content) => {
  // 先移除HTML标签，获取纯文本
  const textContent = content.replace(/<[^>]*>/g, '');
  
  // 尝试从内容中提取标题
  // 1. 查找第一个段落或标题
  const h1Match = content.match(/<h1[^>]*>([^<]+)<\/h1>/i);
  if (h1Match) {
    return h1Match[1].trim();
  }
  
  // 2. 查找第一个h2标题
  const h2Match = content.match(/<h2[^>]*>([^<]+)<\/h2>/i);
  if (h2Match) {
    return h2Match[1].trim();
  }
  
  // 3. 查找第一个h3标题
  const h3Match = content.match(/<h3[^>]*>([^<]+)<\/h3>/i);
  if (h3Match) {
    return h3Match[1].trim();
  }
  
  // 4. 如果没有标题标签，取前50个字符作为标题
  const firstSentence = textContent.trim().split(/[。！？]/)[0];
  if (firstSentence && firstSentence.length > 0) {
    return firstSentence.length > 30 ? firstSentence.substring(0, 30) + '...' : firstSentence;
  }
  
  // 5. 最后兜底，使用日期作为标题
  return `AI写作文档_${new Date().toLocaleDateString('zh-CN').replace(/\//g, '-')}`;
};

// 创建改进的HTML格式Word文档内容 - 与PC端保持一致
const createImprovedWordContent = (content, title = 'AI生成的文档') => {
  // 创建HTML格式的文档内容，兼容Microsoft Office Word
  let htmlContent = `<!DOCTYPE html>
<html xmlns:o="urn:schemas-microsoft-com:office:office" 
      xmlns:w="urn:schemas-microsoft-com:office:word" 
      xmlns="http://www.w3.org/TR/REC-html40">
<head>
  <meta charset="utf-8">
  <meta name="ProgId" content="Word.Document">
  <meta name="Generator" content="Microsoft Word 15">
  <meta name="Originator" content="Microsoft Word 15">
  <title>${title}</title>
  <!--[if gte mso 9]>
  <xml>
    <w:WordDocument>
      <w:View>Print</w:View>
      <w:Zoom>100</w:Zoom>
      <w:DoNotOptimizeForBrowser/>
      <w:ValidateAgainstSchemas/>
      <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
      <w:IgnoreMixedContent>false</w:IgnoreMixedContent>
      <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
      <w:Compatibility>
        <w:BreakWrappedTables/>
        <w:SnapToGridInCell/>
        <w:WrapTextWithPunct/>
        <w:UseAsianBreakRules/>
        <w:DontGrowAutofit/>
      </w:Compatibility>
    </w:WordDocument>
  </xml>
  <![endif]-->
      <style>
        @page {
          size: 21cm 29.7cm;
          margin: 2.5cm 2cm 2.5cm 2cm;
        }
        body {
          font-family: "Microsoft YaHei", "宋体", Arial, sans-serif;
          font-size: 14px;
          line-height: 1.6;
          margin: 24px;
          color: #000;
        }
        .header { 
          text-align: center; 
          margin-bottom: 1.5cm; 
          page-break-after: avoid;
        }
        h1 { 
          font-size: 16pt; 
          font-weight: bold; 
          color: #000; 
          margin-top: 24pt; 
          margin-bottom: 12pt;
          text-align: center;
        }
        h2 { 
          font-size: 14pt; 
          font-weight: bold; 
          color: #000; 
          margin-top: 18pt; 
          margin-bottom: 9pt;
        }
        h3 { 
          font-size: 12pt; 
          font-weight: bold; 
          color: #000; 
          margin-top: 14pt; 
          margin-bottom: 7pt;
        }
        p { 
          margin-bottom: 12pt; 
          text-align: justify;
          text-indent: 2em;
        }
        ul, ol { 
          margin-left: 20pt; 
          margin-bottom: 12pt;
        }
        li { 
          margin-bottom: 6pt; 
        }
        strong, b {
          font-weight: bold;
        }
        em, i {
          font-style: italic;
        }
        table {
          border-collapse: collapse;
          width: 100%;
          margin: 12pt 0;
        }
        th, td {
          border: 1pt solid #000;
          padding: 6pt;
          text-align: left;
        }
        .no-indent {
          text-indent: 0;
        }
      </style>
</head>
<body>
  <div>
    ${content}
  </div>
</body>
</html>`;

  return htmlContent;
}

// 处理编辑器输入
const handleEditorInput = (event) => {
  editorContent.value = event.target.innerHTML
}

// 生成对话标题
const generateConversationTitle = (content) => {
  if (!content) return 'AI写作对话'
  // 取前30个字符作为标题
  const title = content.replace(/<[^>]*>/g, '').trim()
  return title.length > 30 ? title.substring(0, 30) + '...' : title
}

// 历史记录相关方法
const showHistoryDrawer = () => {
  if (!isGenerating.value) {
    showHistory.value = true
    // 每次打开都刷新，避免回显旧数据
    getHistoryRecordList()
  }
  // AI处理中时不执行任何操作，不记录点击意图
}

// 获取历史记录列表
const getHistoryRecordList = async () => {
  try {
    console.log('📋 开始获取AI写作历史记录列表...')
    isLoadingHistory.value = true
    const startTime = performance.now()
    
    const response = await apis.getHistoryRecord({ 
      // ===== 已删除：user_id - 后端从token解析 =====
      ai_conversation_id: 0, // 0表示获取对话列表
      business_type: 2 // AI写作类型
    })
    
    const endTime = performance.now()
    console.log(`📋 AI写作历史记录API调用耗时: ${(endTime - startTime).toFixed(2)}ms`)
    console.log('📋 AI写作历史记录列表响应:', response)
    
    if (response.statusCode === 200) {
      // 设置历史记录总数
      historyTotal.value = response.total || 0
      
      // 转换后端数据为前端格式
      historyData.value = response.data.map(conversation => ({
        id: conversation.id,
        title: generateConversationTitle(conversation.content),
        time: formatTime(conversation.updated_at),
        businessType: conversation.business_type,
        isActive: false,
        // 保存原始数据用于后续查询
        rawData: conversation
      }))
      // 高亮当前会话
      if (ai_conversation_id.value) {
        historyData.value.forEach(item => { item.isActive = item.id === ai_conversation_id.value })
      }
      console.log(`✅ AI写作历史记录列表已设置: ${historyData.value.length}条记录，总数: ${historyTotal.value}`)
    } else {
      console.error('❌ 获取AI写作历史记录列表失败:', response.statusCode)
    }
  } catch (error) {
    console.error('❌ 获取AI写作历史记录列表失败:', error)
  } finally {
    isLoadingHistory.value = false
  }
}

// 时间解析与格式化（与其他移动端一致，容错更强）
const parseToDate = (input) => {
  if (!input) return null
  if (typeof input === 'number') {
    const ms = input < 1e12 ? input * 1000 : input
    return new Date(ms)
  }
  if (typeof input === 'string') {
    let d = new Date(input)
    if (!isNaN(d)) return d
    const normalized = input.replace(/-/g, '/').replace('T', ' ')
    d = new Date(normalized)
    if (!isNaN(d)) return d
  }
  return new Date(input)
}

const formatTime = (timeString) => {
  const date = parseToDate(timeString)
  if (!date || isNaN(date)) return '未知时间'
  const now = new Date()
  const isToday = date.toDateString() === now.toDateString()
  const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1)
  const isYesterday = date.toDateString() === yesterday.toDateString()
  if (isToday) {
    return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  }
  if (isYesterday) {
    return '昨天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  }
  const month = date.getMonth() + 1
  const day = date.getDate()
  const time = date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  return `${month}月${day}日 ${time}`
}

const goBack = () => {
  router.go(-1)
}


const createNewTask = () => {
  historyData.value.forEach(item => {
    item.isActive = false
  })
  currentView.value = 'main'
  
  // 重要：重置对话ID为新对话
  ai_conversation_id.value = 0

  // 重置到默认模板内容
  const defaultTemplate = "<span class=\"editable-highlight\" contenteditable=\"true\">总结主题：</span>\n<span class=\"editable-highlight\" contenteditable=\"true\">总结时间：</span>\n<span class=\"editable-highlight\" contenteditable=\"true\">主要内容：</span>\n\n请帮我生成一份正式的总结报告，要求格式规范、语言严谨，具体参考以上内容，按照标准工作总结格式生成全文，包含\"工作总结、问题不足、未来计划\"三部分的完整报告。"

  // 重新设置输入框内容
  const inputElement = document.querySelector('.template-input-container')
  if (inputElement) {
    inputElement.innerHTML = defaultTemplate
    templateContent.value = defaultTemplate.replace(/<[^>]*>/g, '') // 提取纯文本作为templateContent
    
    // 重新为高亮元素添加样式和交互功能
    nextTick(() => {
      const highlights = inputElement.querySelectorAll('.editable-highlight')
      highlights.forEach(highlight => {
        highlight.style.backgroundColor = '#3E7BFA10'
        highlight.style.color = '#3E7BFA'
        highlight.style.padding = '4px 8px'
        highlight.style.borderRadius = '6px'
        highlight.style.fontWeight = '500'
        highlight.style.cursor = 'text'
        highlight.style.border = '1px solid transparent'
        highlight.style.display = 'inline-block'
        highlight.style.minWidth = '20px'
        highlight.style.margin = '6px 8px 6px 0'
        
        highlight.addEventListener('click', () => {
          highlight.contentEditable = 'true'
          highlight.focus()
        })
        
        highlight.addEventListener('blur', () => {
          highlight.contentEditable = 'false'
        })
      })
    })
  }
  
  editorContent.value = ''
  selectedFile.value = null
  showHistory.value = false
  
  console.log('✅ 新建任务完成，已重置对话ID为0，准备创建新对话')
}

// 获取指定对话的详细消息 - 复用PC端的实现
const getConversationMessages = async (conversationId) => {
  try {
    console.log('开始获取AI写作对话消息，conversationId:', conversationId)
    const response = await apis.getHistoryRecord({ 
      // ===== 已删除：user_id - 后端从token解析 =====
      ai_conversation_id: conversationId,
      business_type: 2 // AI写作类型
    })
    console.log('AI写作对话消息响应:', response)
    
    if (response.statusCode === 200) {
      if (!response.data || !Array.isArray(response.data)) {
        console.error('历史记录数据格式不正确:', response.data)
        return false
      }
      
      // 解析消息内容 - 修复JSON解析错误
      return response.data.map(msg => {
        let parsedContent = null
        if (msg.content) {
          try {
            // 尝试解析JSON，如果失败则直接使用原内容
            if (typeof msg.content === 'string' && msg.content.startsWith('{')) {
              parsedContent = JSON.parse(msg.content)
            } else {
              // 如果不是JSON格式，创建一个包装对象
              parsedContent = {
                hasDocument: false,
                content: msg.content
              }
            }
          } catch (error) {
            console.log('消息内容不是JSON格式，使用原内容:', msg.content)
            parsedContent = {
              hasDocument: false,
              content: msg.content
            }
          }
        }
        
        return {
          type: msg.type,
          content: msg.content,
          time: formatTime(msg.created_at),
          parsedContent: parsedContent
        }
      })
    } else {
      console.error('获取历史记录失败:', response.statusCode)
      return false
    }
  } catch (error) {
    console.error('获取历史记录失败:', error)
    return false
  }
}

const handleHistoryItem = async (item) => {
  console.log("点击历史记录:", item);
  
  // 设置选中状态
  historyData.value.forEach(hItem => {
    hItem.isActive = hItem.id === item.id
  })
  
  // 设置对话ID
  ai_conversation_id.value = item.id
  
  // 获取详细消息
  const messages = await getConversationMessages(item.id)
  
  if (messages && messages.length > 0) {
    // 找到AI消息中的文档内容
    const aiMessage = messages.find(msg => msg.type === 'ai')
    if (aiMessage && aiMessage.parsedContent && aiMessage.parsedContent.documentContent) {
      // 有文档内容，进入编辑器
      editorContent.value = aiMessage.parsedContent.documentContent.content
      currentView.value = 'editor'
    } else if (aiMessage && aiMessage.parsedContent && aiMessage.parsedContent.content) {
      // 如果内容在 parsedContent 中
      editorContent.value = aiMessage.parsedContent.content
      currentView.value = 'editor'
    } else if (aiMessage && aiMessage.content) {
      // 直接使用AI消息内容
      editorContent.value = aiMessage.content
      currentView.value = 'editor'
    } else {
      // 没有文档内容，显示对话
      const inputElement = document.querySelector('.template-input-container')
      if (inputElement) {
        inputElement.innerHTML = `<p>${item.rawData?.content || item.title}</p>`
        templateContent.value = item.rawData?.content || item.title
      }
      currentView.value = 'main'
    }
  } else {
    // 获取消息失败，显示基本信息
    displayToast('加载历史记录失败')
  }
  
  showHistory.value = false
}

const deleteHistoryItem = async (historyItem, index) => {
  try {
    console.log('开始删除移动端历史记录:', historyItem)
    
    const response = await apis.deleteHistoryRecord({
      // ===== 已删除：user_id - 后端从token解析 =====
      ai_conversation_id: historyItem.id
    })
    
    if (response.statusCode === 200) {
      // 从本地数据中移除
      historyData.value.splice(index, 1)
      
      // 如果删除的是当前激活的历史记录，执行新建任务
      if (historyItem.isActive) {
        console.log('删除激活的历史记录，执行新建任务')
        createNewTask()
      }
      
      console.log('✅ 移动端历史记录删除成功')
      displayToast('删除成功')
    } else {
      console.error('❌ 删除移动端历史记录失败:', response)
      displayToast('删除失败')
    }
  } catch (error) {
    console.error('❌ 删除移动端历史记录失败:', error)
    displayToast('删除失败，请稍后重试')
  }
}

onMounted(() => {
  console.log('Mobile AI Writing Page Loaded')
  // 初始化输入框的默认模板内容
  nextTick(() => {
    const inputElement = document.querySelector('.template-input-container')
    if (inputElement) {
      // 设置默认模板内容（工作汇报模板）
      const defaultTemplate = "<span class=\"editable-highlight\" contenteditable=\"true\">总结主题：</span>\n<span class=\"editable-highlight\" contenteditable=\"true\">总结时间：</span>\n<span class=\"editable-highlight\" contenteditable=\"true\">主要内容：</span>\n\n请帮我生成一份正式的总结报告，要求格式规范、语言严谨，具体参考以上内容，按照标准工作总结格式生成全文，包含\"工作总结、问题不足、未来计划\"三部分的完整报告。"

      inputElement.innerHTML = defaultTemplate
      templateContent.value = defaultTemplate.replace(/<[^>]*>/g, '')

      // 为高亮元素添加样式和交互功能
      const highlights = inputElement.querySelectorAll('.editable-highlight')
      highlights.forEach(highlight => {
        highlight.style.backgroundColor = '#3E7BFA10'
        highlight.style.color = '#3E7BFA'
        highlight.style.padding = '4px 8px'
        highlight.style.borderRadius = '6px'
        highlight.style.fontWeight = '500'
        highlight.style.cursor = 'text'
        highlight.style.border = '1px solid transparent'
        highlight.style.display = 'inline-block'
        highlight.style.minWidth = '20px'
        highlight.style.margin = '6px 8px 6px 0'

        highlight.addEventListener('click', () => {
          highlight.contentEditable = 'true'
          highlight.focus()
        })

        highlight.addEventListener('blur', () => {
          highlight.contentEditable = 'false'
        })
      })
    }
  })
})
</script>

<style scoped>
/* @import '@/styles/mobile-zoom-fix.css'; */

.mobile-ai-writing {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 0;
}

.mobile-content {
  /* padding: 16px; */
  /* padding-top: 64px; */
  overflow-y: auto;
  max-height: calc(100vh - 64px);
  position: relative;
}

/* AI写作卡片 - 完全复用PC端样式 */
.ai-writing-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  margin-bottom: 16px;
  position: relative;
}

/* 卡片内Loading遮罩 */
.card-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* 文档生成区域 - 复用PC端样式 */
.document-generation {
  padding: 20px;
  
  h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
    text-align: center;
  }
  
  .subtitle {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
    text-align: center;
  }
}

.input-area {
  width: 100%;
}

/* 模板输入容器 - 移动端重点优化 */
.template-input-container {
  width: 100%;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: #374151;
  min-height: 120px;
  overflow-y: auto;
  resize: none;
  outline: none;
  transition: all 0.3s ease;
  box-sizing: border-box;
  white-space: pre-line; /* 保留换行符，确保每个关键信息独占一行 */

  &:focus {
    border-color: #3e7bfa;
    box-shadow: 0 0 0 3px rgba(62, 123, 250, 0.1);
  }
  
  &[contenteditable="true"] {
    font-size: 18px !important;
    line-height: 1.6 !important;
    -webkit-text-size-adjust: none !important;
    transform: translateZ(0) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
  }
}

/* 高亮可编辑元素 */
.editable-highlight {
  background-color: #3E7BFA10 !important;
  color: #3E7BFA !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  cursor: text !important;
  border: 1px solid transparent !important;
  display: inline-block !important;
  min-width: 20px !important;
  margin: 6px 8px 6px 0 !important;
  transition: all 0.2s ease !important;
  
  &:hover {
    background-color: #3E7BFA20 !important;
    border-color: #3E7BFA !important;
  }
  
  &:focus {
    background-color: #ffffff !important;
    border-color: #3E7BFA !important;
    box-shadow: 0 0 0 2px rgba(62, 123, 250, 0.2) !important;
    outline: none !important;
  }
}

/* 操作按钮区域 - 移动端适配 */
.input-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.left-actions,
.right-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.attachment-btn,
.voice-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.action-icon {
  width: 45px;
  height: 45px;
  object-fit: contain;
}

/* 语音按钮专用图标尺寸 */
.voice-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.icon-container {
  position: relative;
}

.recording-indicator {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #dc3545;
  border-radius: 50%;
  animation: pulse 1s infinite;
}

.divider {
  width: 1px;
  height: 31px;
  background: #d6d5de;
}

.send-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
  
  &:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }
}

.send-icon {
  width: 90px;
  height: 40px;
  object-fit: contain;
}

.generating-text {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #007bff;
  white-space: nowrap;
}

.hint-text {
  text-align: left;
  font-size: 12px;
  color: #9ca3af;

  margin: 0;
}

/* 文件预览 */
.file-preview-inline {
  margin-left: 8px;
}

.file-info-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f3f4f6;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
}

.file-icon-inline {
  font-size: 14px;
}

.file-name-inline {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove-file-inline {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}

.remove-icon {
  color: #dc2626;
  font-size: 16px;
  line-height: 1;
}

/* 文档模板区域 - 移动端适配的PC端样式 */
.document-templates {
  padding: 0 20px 20px;
}

.template-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;

  .tab-item {
    padding: 5px 0;
    font-size: 16px;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    min-width: 50px;
    text-align: center;
    white-space: nowrap;

    &.active {
      color: #2563eb;
      border-bottom-color: #2563eb;
    }
  }
}

.template-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.template-card {
  position: relative;
  /* background: white; */
  border-radius: 8px;
  overflow: hidden;
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
  transition: transform 0.2s ease;

  &:hover {
    transform: translateY(-2px);
  }
}

/* 卡片底色与描边（按类型） */
.template-card.announcement-btn { background: rgb(222,236,254); border: 1px solid #60A5FA; }
.template-card.notification-btn { background: rgb(250,245,255); border: 1px solid #C084FC; }
.template-card.report-btn { background: rgb(250,247,237); border: 1px solid #FB923C; }

/* 会议纪要同公告、决定同通知 → 已复用按钮类 */

.template-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 12px;
  background: #ffffff;
  border: 1px solid #E5E8EB;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.template-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.template-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.icon-announcement { background: transparent; border: none; }
.icon-notification { background: transparent; border: none; }
.icon-report { background: transparent; border: none; }

.template-info { flex: 1; text-align: left; }
.template-title { font-size: 16px; font-weight: 600; color: #1f2937; }
.template-desc { font-size: 8px; color: #6b7280; margin-top: 4px; }

.use-template-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff !important;
  color: #374151 !important;
  border: 1px solid #E5E8EB !important;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 18px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;

  &:hover {
    background: #F9FAFB !important;
    transform: translateY(-50%) scale(1.02);
  }

  /* 按钮跟随配色：文字与描边用主色，底色主色10%透明 */
  &.announcement-btn { color: #1D4ED8 !important; border-color: #1D4ED8 !important; background: rgba(29,78,216,0.06) !important; }
  &.notification-btn { color: #C084FC !important; border-color: #C084FC !important; background: rgba(192,132,252,0.06) !important; }
  &.report-btn { color: #FB923C !important; border-color: #FB923C !important; background: rgba(251,146,60,0.06) !important; }
}

/* 编辑器视图 */
.editor-view {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 16px;
  position: relative; /* 为内部遮罩做准备 */
}

.editor-loading-overlay {
  position: absolute;
  top: 100px; /* 从编辑器容器开始 */
  left: 16px;
  right: 16px;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 8px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

.loading-text {
  font-size: 16px;
  color: #374151;
  font-weight: 500;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.editor-title h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.editor-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.download-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.3s ease;
  padding: 0;
  
  &:hover:not(:disabled) {
    opacity: 0.8;
  }
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

.download-icon {
  width: 107px;
  height: 34px;
}

/* 富文本编辑器 */
.editor-container {
  padding: 20px 20px 20px 25px;
  min-height: 400px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  background: #fafafa;
  border-radius: 8px;
  margin: 0;
  position: relative; /* 为遮罩定位做准备 */
}

.rich-text-editor {
  font-size: 16px;
  line-height: 1.6;
  color: #374151;
  min-height: 350px;
  outline: none;
  
  /* 优化文档结构显示 */
  h1 {
    color: #1f2937;
    border-bottom: 2px solid #3e7bfa;
    padding-bottom: 8px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
  }
  
  h2 {
    color: #374151;
    margin-top: 24px;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 600;
  }
  
  h3 {
    color: #374151;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 500;
  }
  
  p {
    margin-bottom: 12px;
    text-align: justify;
  }
  
  ul, ol {
    margin: 12px 0;
    padding-left: 20px;
    
    li {
      margin-bottom: 6px;
      line-height: 1.7;
    }
  }
  
  /* 序号标题样式优化 */
  .section-number {
    color: #6b7280;
    font-weight: 600;
  }
  
  /* 确保内容不超出卡片边缘 */
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 动画 */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

</style>