Files
product-sourcing-capture/public/index.html
T
mosen e9939ef9dc Initial release with production deploy config.
Add GitAtlas deploy assets, DATA_FILE support for isolated server data, and port documentation for sourcing.simosen.cn.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-15 00:52:31 +08:00

498 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选品采购台|竞品采集、货源匹配与采购决策</title>
<meta name="description" content="采集淘宝、小红书等平台商品线索,匹配 1688 货源,完成筛选、利润测算、拿样与采购决策。" />
<meta name="theme-color" content="#0d6a54" />
<meta name="application-name" content="选品采购台" />
<meta name="apple-mobile-web-app-title" content="选品采购台" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="zh_CN" />
<meta property="og:site_name" content="选品采购台" />
<meta property="og:title" content="选品采购台|从商品机会,到放心采购" />
<meta property="og:description" content="采集竞品、匹配货源、测算利润、推进拿样,一套系统完成选品采购决策。" />
<meta property="og:image" content="__SHARE_ORIGIN__/assets/share-card.png" />
<meta property="og:image:secure_url" content="__SHARE_ORIGIN__/assets/share-card.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="__SHARE_ORIGIN__/" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="选品采购台|从商品机会,到放心采购" />
<meta name="twitter:description" content="采集竞品、匹配货源、测算利润、推进拿样,一套系统完成选品采购决策。" />
<meta name="twitter:image" content="__SHARE_ORIGIN__/assets/share-card.png" />
<meta itemprop="name" content="选品采购台|从商品机会,到放心采购" />
<meta itemprop="description" content="采集竞品、匹配货源、测算利润、推进拿样,一套系统完成选品采购决策。" />
<meta itemprop="image" content="__SHARE_ORIGIN__/assets/share-card.png" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/assets/brand-mark.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/assets/brand-mark.png" />
<link rel="stylesheet" href="/styles.css" />
</head>
<body class="auth-pending">
<div id="startupScreen" class="startup-screen" role="status" aria-live="polite">
<span><img src="/assets/brand-mark.svg" alt="" /></span>
<strong>正在进入选品采购台</strong>
</div>
<section id="authGate" class="auth-gate" hidden>
<header class="landing-nav">
<a class="landing-logo" href="#authGate" aria-label="选品采购台">
<span><img src="/assets/brand-mark.svg" alt="" /></span>
<strong>选品采购台</strong>
</a>
<nav class="landing-links" aria-label="首页导航">
<a href="#landingFlow">流程</a>
<a href="#landingSignals">能力</a>
<button type="button" data-auth-mode="login">登录</button>
</nav>
<div class="landing-nav-actions">
<button id="landingBackBtn" class="button secondary" type="button" hidden>返回工作台</button>
<button class="button secondary" type="button" data-auth-mode="login">登录</button>
<button class="button primary" type="button" data-auth-mode="register">创建账号</button>
</div>
</header>
<main class="landing-main">
<section class="landing-hero">
<div class="landing-hero-copy">
<p class="eyebrow">Product Sourcing Intelligence</p>
<div class="landing-route" aria-label="选品采购路径">
<span>淘宝竞品</span>
<i aria-hidden="true"></i>
<span>小红书趋势</span>
<i aria-hidden="true"></i>
<span>1688 货源</span>
<i aria-hidden="true"></i>
<span>采购决策</span>
</div>
<h1>从商品机会,到放心采购</h1>
<p class="landing-lead">采集淘宝、小红书等平台商品的图片、链接、价格和热度线索,再匹配 1688 同款货源、测算利润、推进拿样,为任何品类建立可复用的采购判断。</p>
<div class="landing-signal-panel" aria-label="首批选品重点">
<div>
<span>第一批策略</span>
<strong>¥100 内跑量</strong>
<em>低价、轻决策、直播易讲</em>
</div>
<div>
<span>主攻赛道</span>
<strong>任意商品类目</strong>
<em>饰品首发 / 规则可自定义</em>
</div>
<div>
<span>采购判断</span>
<strong>利润 + 风险</strong>
<em>拿样价、供应商、话术一起看</em>
</div>
</div>
<div class="landing-actions">
<button class="button primary" type="button" data-auth-mode="register">创建账号开始选品</button>
<button class="button secondary" type="button" data-auth-mode="login">登录已有工作台</button>
</div>
<div class="landing-metrics" aria-label="适用场景">
<div><strong>¥100 内</strong><span>第一批跑量客单价</span></div>
<div><strong>全品类可扩展</strong><span>从饰品模板开始,自定义赛道</span></div>
<div><strong>直播优先</strong><span>拿样、话术、风险一起看</span></div>
</div>
</div>
<section class="landing-product-shot" aria-label="产品工作台预览">
<img class="buyer-board-image" src="/assets/jewelry-buyer-board.png" alt="直播饰品买手选品板,展示饰品图片、利润和货源判断" />
<div class="product-shot-top">
<span>Buyer Command</span>
<strong>今日选品采购</strong>
</div>
<div class="product-shot-stats">
<div><span>线索</span><strong>128</strong></div>
<div><span>可跑量</span><strong>24</strong></div>
<div><span>货源</span><strong>37</strong></div>
</div>
<div class="product-shot-card">
<div class="shot-image"></div>
<div>
<p>藏式绿松石编绳手链</p>
<strong>建议拿样 · 利润可跑</strong>
<span>1688 ¥8.60 → 直播价 ¥39.90</span>
</div>
</div>
<div class="product-shot-table">
<div><span>竞品热度</span><strong></strong></div>
<div><span>供应商保障</span><strong>实力厂家</strong></div>
<div><span>风险提醒</span><strong>避开功效话术</strong></div>
</div>
</section>
</section>
<section id="landingFlow" class="landing-flow" aria-label="选品采购流程">
<div class="landing-section-head">
<p class="eyebrow">Workflow</p>
<h2>从“看见别人卖得好”到“自己敢进货”。</h2>
</div>
<div class="flow-rail">
<article><span>01</span><h3>采集竞品</h3><p>淘宝、小红书页面里的图片、链接、价格、销量和可见话术,一键进库。</p></article>
<article><span>02</span><h3>清洗筛选</h3><p>按饰品赛道、价格带、热度、直播表现力、风险词和利润模型自动打分。</p></article>
<article><span>03</span><h3>匹配货源</h3><p>把 1688 同款/近似款放到竞品旁边,比厂家、拿样价、混批、售后保障。</p></article>
<article><span>04</span><h3>拿样采购</h3><p>批量标记问供应商、已拿样、直播测试,最后沉淀采购决策清单。</p></article>
</div>
</section>
<section id="landingSignals" class="landing-signals" aria-label="系统能力">
<div class="landing-section-head">
<p class="eyebrow">What The System Does</p>
<h2>不是收藏夹,是直播饰品买手的决策系统。</h2>
</div>
<div class="signal-board">
<article><strong>竞品库</strong><span>淘宝 / 小红书 / 天猫</span><p>聚合对标款,保留原图、链接、价格和平台线索。</p></article>
<article><strong>货源库</strong><span>1688</span><p>集中比较供应商、价格、同款相似度和采购保障。</p></article>
<article><strong>款式匹配</strong><span>同款 / 近似款</span><p>按赛道和关键词把竞品与货源自动归组。</p></article>
<article><strong>规则配置</strong><span>可视化后台</span><p>你自己维护赛道关键词、风险词、利润模型和自动标签。</p></article>
</div>
</section>
</main>
</section>
<div class="app-shell">
<header class="mobile-header">
<div class="mobile-title-row">
<div>
<p class="eyebrow">Sourcing</p>
<h1 id="mobileViewTitle">选品采购 SaaS</h1>
</div>
<div class="mobile-header-actions">
<button id="mobileAuthBtn" class="icon-button" type="button" aria-label="账号">账号</button>
<button id="mobileFilterBtn" class="icon-button" type="button" aria-label="筛选">筛选</button>
<button id="mobileRefreshBtn" class="icon-button" type="button" aria-label="刷新">刷新</button>
</div>
</div>
<label class="mobile-search-field">
<span class="sr-only">关键词搜索</span>
<input id="mobileSearchInput" type="search" placeholder="搜索标题、供应商、标签" />
</label>
</header>
<aside class="sidebar">
<div class="brand">
<div class="brand-mark"><img src="/assets/brand-mark.svg" alt="" /></div>
<div>
<h1>选品采购台</h1>
<p>竞品采集 / 货源匹配 / 采购决策</p>
</div>
</div>
<nav class="nav-stack" aria-label="产品导航">
<div class="nav-section">
<p class="nav-section-title">业务流程</p>
<button class="nav-button active" data-view="overview"><span class="nav-icon" aria-hidden="true">01</span><span>首页总览</span></button>
<button class="nav-button" data-view="capture"><span class="nav-icon" aria-hidden="true">02</span><span>采集中心</span></button>
<button class="nav-button" data-view="competitors"><span class="nav-icon" aria-hidden="true">03</span><span>竞品库</span></button>
<button class="nav-button" data-view="suppliers"><span class="nav-icon" aria-hidden="true">04</span><span>货源库</span></button>
<button class="nav-button" data-view="matching"><span class="nav-icon" aria-hidden="true">05</span><span>款式匹配</span></button>
<button class="nav-button" data-view="testing"><span class="nav-icon" aria-hidden="true">06</span><span>拿样测试</span></button>
<button class="nav-button" data-view="decisions"><span class="nav-icon" aria-hidden="true">07</span><span>采购决策</span></button>
</div>
<div class="nav-section nav-admin">
<p class="nav-section-title">系统配置</p>
<button class="nav-button admin-only" data-view="admin" hidden><span class="nav-icon" aria-hidden="true">A</span><span>管理中心</span></button>
<button class="nav-button" data-view="plugin"><span class="nav-icon" aria-hidden="true">T</span><span>采集插件</span></button>
<button class="nav-button" data-view="rules"><span class="nav-icon" aria-hidden="true">R</span><span>规则配置</span></button>
<button class="nav-button" data-view="account"><span class="nav-icon" aria-hidden="true">U</span><span>账号设置</span></button>
</div>
</nav>
<section class="side-brief" aria-label="今日操作重点">
<span>Live Commerce</span>
<strong>从机会到采购决策</strong>
<p>先采集竞品,再补 1688 同款,最后看利润、风险和拿样状态。</p>
</section>
<section class="install-panel">
<h2>插件安装</h2>
<ol>
<li>下载插件安装包并解压。</li>
<li>打开 Chrome 扩展管理。</li>
<li>开启开发者模式。</li>
<li>加载解压后的文件夹。</li>
</ol>
<a id="extensionDownloadLink" class="button primary" href="/downloads/product-sourcing-capture-extension.zip" download>下载插件安装包</a>
<code id="extensionPath">product-sourcing-capture-extension.zip</code>
</section>
</aside>
<main class="main">
<header class="topbar">
<div>
<p class="eyebrow">Sourcing Opportunity Desk</p>
<h2>选品采购 SaaS</h2>
<p class="topbar-subtitle">从淘宝、小红书竞品到 1688 货源,完成采集、清洗、匹配、拿样和采购决策。</p>
<div class="topbar-signals" aria-label="产品定位">
<span>Expert Workbench</span>
<span>¥100 内跑量</span>
<span>全品类可扩展</span>
<span>风险可控</span>
</div>
</div>
<div class="topbar-actions">
<span id="sessionBadge" class="session-badge">本地模式</span>
<button id="openAuthPageBtn" class="button secondary" type="button">创建账号/登录</button>
<button id="refreshBtn" class="button secondary">刷新</button>
<button class="button primary" type="button" data-export-csv>导出 CSV</button>
<button id="logoutBtn" class="button secondary" type="button" hidden>退出</button>
</div>
</header>
<section class="command-strip" aria-label="今日任务状态">
<article>
<span>当前路径</span>
<strong>竞品采集 → 1688 货源 → 拿样决策</strong>
</article>
<article>
<span>首批策略</span>
<strong>饰品全赛道 / 100 内跑量</strong>
</article>
<article>
<span>管理员能力</span>
<strong>用户 / 积分 / 兑换码 / Token</strong>
</article>
</section>
<section id="workbenchPanel" class="workbench-panel"></section>
<section class="stats-grid" aria-label="统计">
<article class="stat-card">
<span>线索总数</span>
<strong id="statTotal">0</strong>
</article>
<article class="stat-card">
<span>待拿样</span>
<strong id="statSample">0</strong>
</article>
<article class="stat-card">
<span>1688 货源</span>
<strong id="stat1688">0</strong>
</article>
<article class="stat-card">
<span>匹配款组</span>
<strong id="statTibetan">0</strong>
</article>
</section>
<section id="filterToolbar" class="toolbar filter-bench" aria-label="筛选工具">
<div class="filter-bench-head">
<div>
<p class="eyebrow">Filter Bench</p>
<h3>选品筛选台</h3>
<p id="filterContextText">按平台、赛道、状态、价格和风险快速缩小候选款。</p>
</div>
<div class="filter-bench-status" aria-label="筛选状态">
<span id="filterModeLabel">全部候选</span>
<strong id="filterResultCount">0</strong>
<em id="filterActiveText">未启用筛选</em>
</div>
</div>
<label>
<span>关键词</span>
<input id="searchInput" type="search" placeholder="标题、供应商、赛道、链接" />
</label>
<label>
<span>平台</span>
<select id="platformSelect">
<option value="">全部平台</option>
<option value="xiaohongshu">小红书</option>
<option value="taobao">淘宝</option>
<option value="tmall">天猫</option>
<option value="1688">1688</option>
<option value="other">其他</option>
</select>
</label>
<label>
<span>赛道</span>
<select id="trackSelect">
<option value="">全部赛道</option>
<option value="藏式/民族风">藏式/民族风</option>
<option value="耳饰">耳饰</option>
<option value="项链">项链</option>
<option value="手链/手镯">手链/手镯</option>
<option value="戒指">戒指</option>
<option value="发饰">发饰</option>
<option value="包挂/手机链">包挂/手机链</option>
<option value="银饰/珍珠/天然石风">银饰/珍珠/天然石风</option>
<option value="未分类">未分类</option>
</select>
</label>
<label>
<span>建议动作</span>
<select id="decisionSelect">
<option value="">全部动作</option>
<option value="拿样">拿样</option>
<option value="继续观察">继续观察</option>
<option value="暂不做">暂不做</option>
</select>
</label>
<label>
<span>状态</span>
<select id="statusSelect">
<option value="">全部状态</option>
<option value="new">新采集</option>
<option value="reviewing">待复核</option>
<option value="asking_supplier">问供应商</option>
<option value="ordered_sample">已拿样</option>
<option value="live_testing">直播测试</option>
<option value="rejected">已放弃</option>
</select>
</label>
<label>
<span>标签</span>
<input id="tagInput" type="search" placeholder="低价跑量、藏式主推" />
</label>
<label>
<span>价格带</span>
<select id="priceBandSelect">
<option value="">全部价格</option>
<option value="under10">10 元以内</option>
<option value="10to30">10-30 元</option>
<option value="30to100">30-100 元</option>
<option value="over100">100 元以上</option>
<option value="unknown">待确认</option>
</select>
</label>
<label>
<span>货源</span>
<select id="sourceSelect">
<option value="">全部货源</option>
<option value="only1688">只看 1688</option>
<option value="non1688">竞品平台</option>
</select>
</label>
<label>
<span>风险</span>
<select id="riskSelect">
<option value="">全部风险</option>
<option value="any">有风险提醒</option>
<option value="high">高风险</option>
<option value="low">低风险</option>
</select>
</label>
</section>
<section id="bulkToolbar" class="bulk-toolbar" aria-label="批量清理" hidden>
<div class="bulk-status">
<span id="bulkStatusText">已选</span> <strong id="selectedCount">0</strong>
</div>
<div class="bulk-actions">
<button id="selectVisibleBtn" class="button secondary" type="button">全选当前结果</button>
<button id="clearSelectionBtn" class="button secondary" type="button">取消选择</button>
<button id="mobileStatusMenuBtn" class="button secondary mobile-bulk-status" type="button">改状态</button>
<button class="button secondary" type="button" data-bulk-status="asking_supplier">问供应商</button>
<button class="button secondary" type="button" data-bulk-status="ordered_sample">已拿样</button>
<button class="button secondary" type="button" data-bulk-status="live_testing">直播测试</button>
<button class="button secondary" type="button" data-bulk-status="rejected">放弃</button>
<button id="tagSelectedBtn" class="button secondary" type="button">加标签</button>
<button id="deleteSelectedBtn" class="button danger" type="button">删除所选</button>
<button id="confirmDeleteBtn" class="button danger" type="button" hidden>确认删除</button>
<button id="cancelDeleteBtn" class="button secondary" type="button" hidden>返回</button>
</div>
</section>
<section id="emptyState" class="empty-state" hidden>
<div class="empty-mark" aria-hidden="true"></div>
<h3>还没有采集数据</h3>
<p>先启动服务并安装插件,然后在淘宝、小红书或 1688 页面点击“采集当前页”。</p>
<div class="empty-actions">
<button id="emptyPrimaryBtn" class="button primary" type="button">配置插件</button>
<button id="emptySecondaryBtn" class="button secondary" type="button">清空筛选</button>
</div>
</section>
<section id="itemsGrid" class="items-grid" aria-live="polite"></section>
</main>
</div>
<dialog id="itemDialog">
<form method="dialog" class="dialog-card">
<button class="dialog-close" value="cancel" aria-label="关闭">×</button>
<div id="dialogContent"></div>
</form>
</dialog>
<dialog id="authDialog" class="auth-dialog">
<div class="dialog-card auth-dialog-card">
<button class="dialog-close" type="button" data-auth-close aria-label="关闭">×</button>
<div class="auth-dialog-copy">
<p class="eyebrow">SaaS Workspace</p>
<h2 id="authDialogTitle">登录工作台</h2>
<p id="authDialogText">登录后进入你的直播饰品选品采购工作台。</p>
</div>
<form id="loginForm" class="auth-card auth-mode-panel">
<label>
<span>邮箱</span>
<input name="email" type="email" autocomplete="email" required placeholder="you@example.com" />
</label>
<label>
<span>密码</span>
<input name="password" type="password" autocomplete="current-password" required placeholder="输入密码" />
</label>
<button class="button primary" type="submit">登录工作台</button>
</form>
<form id="registerForm" class="auth-card auth-mode-panel" hidden>
<label>
<span>昵称</span>
<input name="name" autocomplete="name" placeholder="直播饰品买手" />
</label>
<label>
<span>邮箱</span>
<input name="email" type="email" autocomplete="email" required placeholder="you@example.com" />
</label>
<label>
<span>密码</span>
<input name="password" type="password" autocomplete="new-password" minlength="6" required placeholder="至少 6 位" />
</label>
<button class="button primary" type="submit">创建并接管本地库</button>
</form>
<p class="auth-switch-line">
<span id="authSwitchText">还没有账号?</span>
<button id="authSwitchButton" type="button" data-auth-switch>创建账号</button>
</p>
<p id="authMessage" class="auth-message"></p>
</div>
</dialog>
<dialog id="filterDialog" class="filter-dialog">
<form method="dialog" class="dialog-card filter-sheet">
<button class="dialog-close" value="cancel" aria-label="关闭">×</button>
<h2>筛选</h2>
<div class="filter-sheet-body"></div>
<div class="topbar-actions">
<button id="clearFiltersBtn" class="button secondary" type="button">清空筛选</button>
<button class="button primary" value="confirm">完成</button>
</div>
</form>
</dialog>
<dialog id="statusActionDialog" class="action-sheet-dialog">
<form method="dialog" class="dialog-card action-sheet">
<button class="dialog-close" value="cancel" aria-label="关闭">×</button>
<h2>改状态</h2>
<div class="action-sheet-grid">
<button class="button secondary" type="button" data-mobile-bulk-status="asking_supplier">问供应商</button>
<button class="button secondary" type="button" data-mobile-bulk-status="ordered_sample">已拿样</button>
<button class="button secondary" type="button" data-mobile-bulk-status="live_testing">直播测试</button>
<button class="button danger" type="button" data-mobile-bulk-status="rejected">放弃</button>
</div>
</form>
</dialog>
<nav class="mobile-tabbar" aria-label="移动端导航">
<button class="mobile-tab active" data-mobile-view="overview" type="button">首页</button>
<button class="mobile-tab" data-mobile-view="capture" type="button">采集</button>
<button class="mobile-tab" data-mobile-view="competitors" type="button">竞品</button>
<button class="mobile-tab" data-mobile-view="suppliers" type="button">货源</button>
<button class="mobile-tab" data-mobile-view="testing" type="button">拿样</button>
<button class="mobile-tab" data-mobile-view="account" type="button">我的</button>
</nav>
<script type="module" src="/app.js"></script>
</body>
</html>