playwright_demo/medical-voice-extension/popup.js

/**
 * Popup 页面逻辑
 * 管理多页面配置
 */

// 默认字段映射配置
const DEFAULT_FIELD_MAPPING = {
  patientName: ['patientName', 'name', 'patient_name', 'xingming', '姓名', '患者姓名'],
  patientAge: ['patientAge', 'age', 'patient_age', 'nianling', '年龄', '患者年龄'],
  patientGender: ['patientGender', 'gender', 'patient_gender', 'xingbie', '性别'],
  patientPhone: ['patientPhone', 'phone', 'patient_phone', 'dianhua', '电话', '联系电话', '手机'],
  chiefComplaint: ['chiefComplaint', 'cc', 'chief_complaint', 'zhushu', '主诉'],
  presentIllness: ['presentIllness', 'hpi', 'present_illness', 'xianbingshi', '现病史'],
  pastHistory: ['pastHistory', 'ph', 'past_history', 'jiwangshi', '既往史'],
  allergyHistory: ['allergyHistory', 'ah', 'allergy_history', 'guominshi', '过敏史'],
  visitType: ['visitType', 'vt', 'visit_type', 'jiuzhenleixing', '就诊类型']
};

// DOM 元素
const configList = document.getElementById('configList');
const configModal = document.getElementById('configModal');
const configForm = document.getElementById('configForm');
const addConfigBtn = document.getElementById('addConfigBtn');
const closeModalBtn = document.getElementById('closeModal');
const cancelBtn = document.getElementById('cancelBtn');

// 初始化
document.addEventListener('DOMContentLoaded', async () => {
  await loadCurrentUrl();
  await loadConfigs();
  setupEventListeners();
});

/**
 * 加载当前页面 URL
 */
async function loadCurrentUrl() {
  try {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    if (tab && tab.url) {
      const url = new URL(tab.url);
      document.getElementById('urlText').textContent = url.host + url.pathname;
    } else {
      document.getElementById('urlText').textContent = '无法获取当前页面 URL';
    }
  } catch (error) {
    console.error('获取当前 URL 失败:', error);
    document.getElementById('urlText').textContent = '获取失败';
  }
}

/**
 * 加载所有配置
 */
async function loadConfigs() {
  const result = await chrome.storage.local.get('pageConfigs');
  const configs = result.pageConfigs || [];

  if (configs.length === 0) {
    configList.innerHTML = `
      <div class="empty-state">
        <div style="font-size: 40px; margin-bottom: 10px;">📝</div>
        <div>暂无配置</div>
        <div style="font-size: 12px; margin-top: 5px;">点击下方按钮添加新配置</div>
      </div>
    `;
    return;
  }

  configList.innerHTML = configs.map((config, index) => `
    <div class="config-item">
      <div class="config-item-title">
        <div class="config-url">${config.urlPattern}</div>
        <div class="config-actions">
          <button class="btn-edit" onclick="editConfig(${index})">编辑</button>
          <button class="btn-delete" onclick="deleteConfig(${index})">删除</button>
        </div>
      </div>
      <div class="config-details">
        <div><strong>模板：</strong>${getTemplateName(config.promptTemplate)}</div>
        <div><strong>说明：</strong>${config.description || '无'}</div>
        <div style="margin-top: 5px; color: #999;">
          字段映射: ${Object.keys(JSON.parse(config.fieldMapping || '{}')).length} 个字段
        </div>
      </div>
    </div>
  `).join('');
}

/**
 * 获取模板名称
 */
function getTemplateName(templateId) {
  const templates = {
    'medical-basic': '基础医疗信息提取',
    'medical-detail': '详细医疗信息提取',
    'medical-emergency': '急诊快速录入'
  };
  return templates[templateId] || templateId;
}

/**
 * 设置事件监听
 */
function setupEventListeners() {
  // 打开添加配置模态框
  addConfigBtn.addEventListener('click', () => {
    openModal();
  });

  // 关闭模态框
  closeModalBtn.addEventListener('click', closeModal);
  cancelBtn.addEventListener('click', closeModal);

  // 点击遮罩层关闭
  configModal.addEventListener('click', (e) => {
    if (e.target === configModal) {
      closeModal();
    }
  });

  // 提交表单
  configForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    await saveConfig();
  });
}

/**
 * 打开模态框
 */
function openModal(config = null) {
  const modalTitle = document.getElementById('modalTitle');
  const configId = document.getElementById('configId');
  const urlPattern = document.getElementById('urlPattern');
  const promptTemplate = document.getElementById('promptTemplate');
  const fieldMapping = document.getElementById('fieldMapping');
  const description = document.getElementById('configDescription');

  if (config) {
    // 编辑模式
    modalTitle.textContent = '编辑页面配置';
    configId.value = config.index;
    urlPattern.value = config.urlPattern;
    promptTemplate.value = config.promptTemplate;
    fieldMapping.value = config.fieldMapping || JSON.stringify(DEFAULT_FIELD_MAPPING, null, 2);
    description.value = config.description || '';
  } else {
    // 添加模式
    modalTitle.textContent = '添加页面配置';
    configId.value = '';
    urlPattern.value = '';
    promptTemplate.value = 'medical-basic';
    fieldMapping.value = JSON.stringify(DEFAULT_FIELD_MAPPING, null, 2);
    description.value = '';
  }

  configModal.style.display = 'block';
}

/**
 * 关闭模态框
 */
function closeModal() {
  configModal.style.display = 'none';
  configForm.reset();
}

/**
 * 保存配置
 */
async function saveConfig() {
  const configId = document.getElementById('configId').value;
  const urlPattern = document.getElementById('urlPattern').value.trim();
  const promptTemplate = document.getElementById('promptTemplate').value;
  const fieldMapping = document.getElementById('fieldMapping').value.trim();
  const description = document.getElementById('configDescription').value.trim();

  // 验证 JSON 格式
  try {
    if (fieldMapping) {
      JSON.parse(fieldMapping);
    }
  } catch (error) {
    alert('字段映射配置格式错误，请输入有效的 JSON 格式');
    return;
  }

  // 获取现有配置
  const result = await chrome.storage.local.get('pageConfigs');
  let configs = result.pageConfigs || [];

  if (configId !== '') {
    // 编辑现有配置
    configs[parseInt(configId)] = {
      urlPattern,
      promptTemplate,
      fieldMapping,
      description,
      updatedAt: Date.now()
    };
  } else {
    // 添加新配置
    configs.push({
      urlPattern,
      promptTemplate,
      fieldMapping,
      description,
      createdAt: Date.now(),
      updatedAt: Date.now()
    });
  }

  // 保存到存储
  await chrome.storage.local.set({ pageConfigs: configs });

  // 关闭模态框并刷新列表
  closeModal();
  await loadConfigs();

  alert('配置保存成功！');
}

/**
 * 编辑配置（全局函数）
 */
window.editConfig = async function(index) {
  const result = await chrome.storage.local.get('pageConfigs');
  const configs = result.pageConfigs || [];
  const config = configs[index];

  if (config) {
    config.index = index;
    openModal(config);
  }
};

/**
 * 删除配置（全局函数）
 */
window.deleteConfig = async function(index) {
  if (!confirm('确定要删除这个配置吗？')) {
    return;
  }

  const result = await chrome.storage.local.get('pageConfigs');
  let configs = result.pageConfigs || [];

  configs.splice(index, 1);

  await chrome.storage.local.set({ pageConfigs: configs });
  await loadConfigs();

  alert('配置已删除');
};

// 暴露到全局
window.openModal = openModal;
window.closeModal = closeModal;