TradeMate Dev
210 lines
8.4 KiB
HTML
210 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TradeMate</title>
|
|
<link rel="stylesheet" href="popup.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<h1 class="logo">TradeMate</h1>
|
|
<span class="badge">外贸助手</span>
|
|
</div>
|
|
|
|
<!-- Settings Screen -->
|
|
<div id="screen-settings" class="screen">
|
|
<h2>设置</h2>
|
|
<div class="form-group">
|
|
<label>API 地址</label>
|
|
<input type="text" id="settings-url" placeholder="https://your-domain.com" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>用户名</label>
|
|
<input type="text" id="settings-username" placeholder="登录邮箱/用户名" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>密码</label>
|
|
<input type="password" id="settings-password" placeholder="登录密码" />
|
|
</div>
|
|
<button id="settings-login" class="btn btn-primary">登录并保存</button>
|
|
<p id="settings-status" class="status"></p>
|
|
<p class="hint">登录后将自动获取 Token 并保存在本地</p>
|
|
</div>
|
|
|
|
<!-- Main Screen -->
|
|
<div id="screen-main" class="screen" style="display:none;">
|
|
<!-- Tab Navigation -->
|
|
<div class="tabs">
|
|
<button class="tab active" data-tab="translate">翻译</button>
|
|
<button class="tab" data-tab="reply">回复</button>
|
|
<button class="tab" data-tab="discovery">发现</button>
|
|
<button class="tab" data-tab="marketing">营销</button>
|
|
<button class="tab" data-tab="extract">客户</button>
|
|
</div>
|
|
|
|
<!-- Tab: Translate -->
|
|
<div id="tab-translate" class="tab-content active">
|
|
<textarea id="translate-input" rows="4" placeholder="输入要翻译的文字..."></textarea>
|
|
<div class="row">
|
|
<select id="translate-target">
|
|
<option value="zh">中文</option>
|
|
<option value="en">英文</option>
|
|
<option value="ja">日语</option>
|
|
<option value="ko">韩语</option>
|
|
<option value="fr">法语</option>
|
|
<option value="de">德语</option>
|
|
<option value="es">西班牙语</option>
|
|
</select>
|
|
<button id="translate-btn" class="btn btn-primary">翻译</button>
|
|
</div>
|
|
<div id="translate-result" class="result-box"></div>
|
|
</div>
|
|
|
|
<!-- Tab: Reply -->
|
|
<div id="tab-reply" class="tab-content">
|
|
<textarea id="reply-input" rows="4" placeholder="粘贴客户询盘内容..."></textarea>
|
|
<div class="row">
|
|
<select id="reply-tone">
|
|
<option value="professional">专业</option>
|
|
<option value="friendly">友好</option>
|
|
</select>
|
|
<button id="reply-btn" class="btn btn-primary">生成回复</button>
|
|
</div>
|
|
<div id="reply-result" class="result-box"></div>
|
|
</div>
|
|
|
|
<!-- Tab: Discovery -->
|
|
<div id="tab-discovery" class="tab-content">
|
|
<input type="text" id="discovery-product" placeholder="产品名称/描述" />
|
|
<div class="row">
|
|
<input type="text" id="discovery-market" placeholder="目标市场 (US)" value="US" />
|
|
<button id="discovery-btn" class="btn btn-primary">搜索</button>
|
|
</div>
|
|
<div id="discovery-result" class="result-box"></div>
|
|
</div>
|
|
|
|
<!-- Tab: Marketing -->
|
|
<div id="tab-marketing" class="tab-content">
|
|
<input type="text" id="marketing-name" placeholder="产品名称" />
|
|
<textarea id="marketing-desc" rows="3" placeholder="产品描述..."></textarea>
|
|
<div class="row">
|
|
<select id="marketing-style">
|
|
<option value="professional">专业</option>
|
|
<option value="friendly">友好</option>
|
|
<option value="luxury">高端</option>
|
|
</select>
|
|
<button id="marketing-btn" class="btn btn-primary">生成文案</button>
|
|
</div>
|
|
<div id="marketing-result" class="result-box"></div>
|
|
</div>
|
|
|
|
<!-- Tab: Extract customer info -->
|
|
<div id="tab-extract" class="tab-content">
|
|
<textarea id="extract-input" rows="5" placeholder="粘贴客户名片 / 邮件签名 / 网页介绍，自动提取姓名、公司、邮箱、电话、国家等"></textarea>
|
|
<div class="row">
|
|
<select id="extract-type">
|
|
<option value="auto">自动识别</option>
|
|
<option value="contact">联系人</option>
|
|
<option value="company">公司</option>
|
|
</select>
|
|
<button id="extract-btn" class="btn btn-primary">提取客户</button>
|
|
</div>
|
|
<div id="extract-result" class="result-box"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="footer">
|
|
<button id="btn-settings" class="btn-link">设置</button>
|
|
<span id="credits-display" class="credits"></span>
|
|
</div>
|
|
|
|
<!-- Upgrade Banner (shown on 402 or low credits) -->
|
|
<div id="upgrade-banner" class="upgrade-banner" style="display:none;">
|
|
<span id="upgrade-banner-text" class="upgrade-banner-text">次数不足</span>
|
|
<button id="upgrade-banner-btn" class="upgrade-btn">升级</button>
|
|
<button id="upgrade-banner-close" class="upgrade-close">×</button>
|
|
</div>
|
|
|
|
<!-- Upgrade Modal -->
|
|
<div id="upgrade-modal-overlay" class="modal-overlay" style="display:none;">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<h3>升级套餐</h3>
|
|
<button id="modal-close" class="modal-close-btn">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="plan-card plan-starter">
|
|
<div class="plan-name">Starter</div>
|
|
<div class="plan-price">¥9.9<small>/月</small></div>
|
|
<ul class="plan-features">
|
|
<li>200 积分/月</li>
|
|
<li>无每日限制</li>
|
|
<li>翻译 + 客户发现 + 营销</li>
|
|
</ul>
|
|
<button class="btn btn-primary plan-btn" data-plan="starter">订阅</button>
|
|
</div>
|
|
<div class="plan-card plan-pro featured">
|
|
<div class="plan-badge">推荐</div>
|
|
<div class="plan-name">Professional</div>
|
|
<div class="plan-price">¥49<small>/月</small></div>
|
|
<ul class="plan-features">
|
|
<li>1000 积分/月</li>
|
|
<li>AI 数字员工</li>
|
|
<li>团队协作 (3人)</li>
|
|
</ul>
|
|
<button class="btn btn-primary plan-btn" data-plan="pro">订阅</button>
|
|
</div>
|
|
<div class="plan-card plan-enterprise">
|
|
<div class="plan-name">Enterprise</div>
|
|
<div class="plan-price">¥99<small>/月</small></div>
|
|
<ul class="plan-features">
|
|
<li>2500 积分/月</li>
|
|
<li>不限团队</li>
|
|
<li>API 调用 + SLA</li>
|
|
</ul>
|
|
<button class="btn btn-primary plan-btn" data-plan="enterprise">订阅</button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<span class="hint">订阅后所有产品线通用（网页/插件/Skills）</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Credit Package Modal (低门槛) -->
|
|
<div id="package-modal-overlay" class="modal-overlay" style="display:none;">
|
|
<div class="modal modal-sm">
|
|
<div class="modal-header">
|
|
<h3>购买积分包</h3>
|
|
<button id="pkg-modal-close" class="modal-close-btn">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="plan-card plan-starter">
|
|
<div class="plan-name">50 积分</div>
|
|
<div class="plan-price">¥2.9</div>
|
|
<button class="btn btn-primary plan-btn" data-pkg="50">购买</button>
|
|
</div>
|
|
<div class="plan-card plan-pro featured">
|
|
<div class="plan-badge">超值</div>
|
|
<div class="plan-name">200 积分</div>
|
|
<div class="plan-price">¥9.9</div>
|
|
<button class="btn btn-primary plan-btn" data-pkg="200">购买</button>
|
|
</div>
|
|
<div class="plan-card plan-enterprise">
|
|
<div class="plan-name">600 积分</div>
|
|
<div class="plan-price">¥24.9</div>
|
|
<button class="btn btn-primary plan-btn" data-pkg="600">购买</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="popup.js" type="module"></script>
|
|
</body>
|
|
</html>
|