关键词回评功能 - 后台管理集成

功能说明

当用户点击"关键词回评"按钮后，会弹出关键词回评设置弹层。在弹层中点击"去后台管理回评组"链接，将自动跳转到 options 页面并打开回评组编辑弹窗。

实现方案

1. 前端交互流程

用户点击"关键词回评" 
  ↓
弹出关键词回评设置弹层 (KeywordReplyModal)
  ↓
点击"去后台管理回评组"链接
  ↓
打开 Chrome Options 页面 (OptionsAppNew)
  ↓
自动弹出"新建发评组"编辑弹窗 (EditGroupModal)

2. 代码修改说明

2.1 KeywordReplyModal.vue

修改了 manageGroups 方法，实现：

• 使用 chrome.runtime.openOptionsPage() 打开 options 页面
• 通过 chrome.runtime.sendMessage() 发送消息，通知 options 页面自动打开编辑弹窗

const manageGroups = () => {
  if (typeof chrome !== 'undefined' && chrome.runtime && chrome.runtime.openOptionsPage) {
    // 打开 options 页面
    chrome.runtime.openOptionsPage(() => {
      // 延迟发送消息，确保页面已加载
      setTimeout(() => {
        chrome.runtime.sendMessage({ 
          action: 'openReplyGroupEditor',
          autoOpen: true 
        });
      }, 500);
    });
  }
};

2.2 OptionsAppNew.vue

新增消息监听和 URL 参数处理：

功能增强：

1. 监听来自 content script 的消息
2. 支持通过 URL 参数打开编辑弹窗
3. 支持自动打开新建回评组弹窗或编辑特定回评组

实现代码：

// 监听消息
const handleMessage = (message) => {
  if (message.action === 'openReplyGroupEditor') {
    if (message.autoOpen) {
      addNewGroup();  // 打开新建弹窗
    } else if (message.groupId) {
      editGroup(message.groupId);  // 编辑指定回评组
    }
  }
};

onMounted(() => {
  // 注册消息监听
  chrome.runtime.onMessage.addListener(handleMessage);
  
  // 支持 URL 参数
  const urlParams = new URLSearchParams(window.location.search);
  const autoOpen = urlParams.get('autoOpen');
  const groupId = urlParams.get('groupId');
  
  if (autoOpen === 'true') {
    addNewGroup();
  } else if (groupId) {
    editGroup(groupId);
  }
});

3. 使用方式

方式一：通过消息（推荐）

chrome.runtime.sendMessage({ 
  action: 'openReplyGroupEditor',
  autoOpen: true  // 打开新建弹窗
});

// 或编辑特定回评组
chrome.runtime.sendMessage({ 
  action: 'openReplyGroupEditor',
  groupId: 'group1'  // 编辑 ID 为 group1 的回评组
});

方式二：通过 URL 参数

chrome-extension://[extension-id]/options.html?autoOpen=true
chrome-extension://[extension-id]/options.html?groupId=group1

4. 扩展性

这个设计支持以下扩展：

1. 编辑特定回评组：传递 groupId 参数
2. 自定义打开行为：通过不同的 action 类型实现更多功能
3. URL 深度链接：支持直接通过 URL 参数访问特定功能

5. 注意事项

1. 消息延迟：使用 500ms 延迟确保 options 页面已完全加载
2. 消息监听清理：在 onUnmounted 中移除监听器，避免内存泄漏
3. 兼容性检查：使用 typeof chrome !== 'undefined' 确保在非扩展环境下不报错

测试步骤

1. 打开小红书直播间
2. 点击"关键词回评"按钮
3. 在弹出的设置窗口中点击"去后台管理回评组"
4. 验证是否自动跳转到 options 页面并打开编辑弹窗

相关文件

• /src/content/ui/components/KeywordReplyModal.vue - 关键词回评设置弹层
• /src/options/OptionsAppNew.vue - Options 主页面
• /src/options/components/EditGroupModal.vue - 编辑回评组弹窗