Joey
566 lines
40 KiB
HTML
566 lines
40 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>轻量版</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
<script src="js/tailwind.config.js"></script>
|
||
<link rel="stylesheet" href="css/styles.css">
|
||
</head>
|
||
|
||
<body class="bg-dark min-h-screen flex flex-col text-gray-100">
|
||
<header class="sticky top-0 z-50 bg-dark-card border-b border-gray-800 shadow-lg shadow-primary/10">
|
||
<div class="container mx-auto px-4 py-3 flex flex-wrap items-center justify-between gap-x-6 gap-y-3">
|
||
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
|
||
<a class="text-gray-300 hover:text-primary transition-colors duration-200"
|
||
href="https://cn.bing.com/translator?ref=TThis&text=&from=zh-Hans&to=ru" target="_blank">翻译</a>
|
||
<a class="text-gray-300 hover:text-primary transition-colors duration-200"
|
||
href="https://wise.com/zh-cn/currency-converter/cny-to-rub-rate" target="_blank">汇率</a>
|
||
<span class="text-gray-700">|</span>
|
||
<a class="text-gray-300 hover:text-primary transition-colors duration-200"
|
||
href="https://seller.ozon.ru/app/dashboard/main/" target="_blank">ozon首页</a>
|
||
<a class="text-gray-300 hover:text-primary transition-colors duration-200"
|
||
href="https://seller.ozon.ru/app/prices/control" target="_blank">促销活动</a>
|
||
<a class="text-gray-300 hover:text-primary transition-colors duration-200"
|
||
href="https://seller.ozon.ru/app/postings/crossborder/fbs?tab=awaiting_deliver"
|
||
target="_blank">物流</a>
|
||
<a class="text-gray-300 hover:text-primary transition-colors duration-200"
|
||
href="https://www.ozon.ru/highlight/tovary-iz-kitaya-935133/?currency_price=100.000%3B200.000&is_promo=t"
|
||
target="_blank">中国商品</a>
|
||
<span class="text-gray-700">|</span>
|
||
<a class="text-gray-300 hover:text-primary transition-colors duration-200"
|
||
href="https://cn.lianlianpay.com/wallet" target="_blank">连连支付</a>
|
||
<a class="text-gray-300 hover:text-primary transition-colors duration-200"
|
||
href="https://flowmore.pingpongx.com/entrance/signin?redirecturl=%2Fentrance%2FemailActiveByCode"
|
||
target="_blank">Pingpong</a>
|
||
<a class="text-gray-300 hover:text-primary transition-colors duration-200" href="https://imgchr.com/"
|
||
target="_blank">图片上传</a>
|
||
</div>
|
||
<div class="flex flex-wrap items-center justify-end gap-3 text-sm ml-auto">
|
||
<div class="flex items-center">
|
||
<span
|
||
class="px-3 py-2 bg-dark-light border border-r-0 border-gray-700 rounded-l-lg text-gray-400">¥</span>
|
||
<input type="number" id="fxCny" step="0.01" placeholder="人民币"
|
||
class="w-40 px-3 py-2 border border-gray-700 bg-dark-light rounded-r-lg input-focus text-gray-100">
|
||
</div>
|
||
<span class="text-gray-500">⇄</span>
|
||
<div class="flex items-center">
|
||
<span
|
||
class="px-3 py-2 bg-dark-light border border-r-0 border-gray-700 rounded-l-lg text-gray-400">₽</span>
|
||
<input type="number" id="fxRub" step="0.01" placeholder="卢布"
|
||
class="w-40 px-3 py-2 border border-gray-700 bg-dark-light rounded-r-lg input-focus text-gray-100">
|
||
</div>
|
||
<div class="flex items-center gap-2 pl-2 border-l border-gray-800">
|
||
<span class="text-gray-400 whitespace-nowrap">1 ¥ = <span id="fxRateText"
|
||
class="text-gray-100">--</span> ₽</span>
|
||
<span id="fxRateSource" class="text-xs text-gray-500 whitespace-nowrap"></span>
|
||
<button type="button" id="fxRefreshBtn"
|
||
class="text-xs text-primary hover:underline transition-colors duration-200">刷新</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main class="flex-grow container mx-auto px-4 py-8">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||
<div class="bg-dark-card rounded-xl p-5 card-shadow neon-border">
|
||
<h2 class="text-lg font-semibold text-gray-100 mb-6 flex items-center text-glow">
|
||
输入商品信息
|
||
</h2>
|
||
<form id="priceForm" class="space-y-4">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label for="purchasePrice" class="block text-sm font-medium text-gray-300 mb-1">进货价</label>
|
||
<div class="flex">
|
||
<input type="number" id="purchasePrice" step="1" min="10"
|
||
class="w-full px-3 py-1.5 border border-gray-700 bg-dark-light rounded-l-lg input-focus text-gray-100">
|
||
<button type="button" id="clearPurchasePriceBtn" title="清空进货价"
|
||
class="bg-gray-800 hover:bg-gray-700 text-gray-300 px-3 py-1.5 rounded-r-lg transition-colors duration-200">
|
||
<i class="fa fa-edit"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label for="profitRate" class="block text-sm font-medium text-gray-300 mb-1">净利率 (%)</label>
|
||
<input type="number" id="profitRate" step="1" min="0"
|
||
class="w-full px-3 py-1.5 border border-gray-700 bg-dark-light rounded-lg input-focus text-gray-100">
|
||
</div>
|
||
<div>
|
||
<label for="weight" class="block text-sm font-medium text-gray-300 mb-1">商品重量 (g)</label>
|
||
<input type="number" id="weight" step="10" min="100"
|
||
class="w-full px-3 py-1.5 border border-gray-700 bg-dark-light rounded-lg input-focus text-gray-100">
|
||
</div>
|
||
<div>
|
||
<label for="tiedanPrice" class="block text-sm font-medium text-gray-300 mb-1">贴单费用</label>
|
||
<input type="text" id="tiedanPrice"
|
||
class="w-full px-3 py-1.5 border border-gray-700 bg-dark-light rounded-lg input-focus text-gray-100">
|
||
</div>
|
||
<div class="md:col-span-2">
|
||
<label class="block text-sm font-medium text-gray-300 mb-1">外包装尺寸 (cm)</label>
|
||
<div class="grid grid-cols-3 gap-3">
|
||
<input type="number" id="length"
|
||
class="w-full px-3 py-1.5 border border-gray-700 bg-dark-light rounded-lg input-focus text-gray-100"
|
||
placeholder="长">
|
||
<input type="number" id="width"
|
||
class="w-full px-3 py-1.5 border border-gray-700 bg-dark-light rounded-lg input-focus text-gray-100"
|
||
placeholder="宽">
|
||
<input type="number" id="height"
|
||
class="w-full px-3 py-1.5 border border-gray-700 bg-dark-light rounded-lg input-focus text-gray-100"
|
||
placeholder="高">
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label for="modelCode" class="block text-sm font-medium text-gray-300 mb-1">型号</label>
|
||
<div class="flex">
|
||
<input type="text" id="modelCode"
|
||
class="w-full px-3 py-1.5 border border-gray-700 bg-dark-light rounded-l-lg input-focus text-gray-100"
|
||
placeholder="例如 ABC">
|
||
<button type="button" id="copyModelBtn" title="复制型号"
|
||
class="bg-gray-800 hover:bg-gray-700 text-gray-300 px-3 py-1.5 rounded-r-lg transition-colors duration-200">
|
||
<i class="fa fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex items-center justify-between mb-1">
|
||
<label for="skuSuffix" class="block text-sm font-medium text-gray-300">货号 (sku)</label>
|
||
<span class="text-xs text-gray-500">完整货号：<span id="skuFullPreview"
|
||
class="text-gray-300">--</span></span>
|
||
</div>
|
||
<div class="flex">
|
||
<span id="skuPrefix"
|
||
class="shrink-0 px-3 py-1.5 border border-r-0 border-gray-700 bg-gray-800 rounded-l-lg text-gray-400 select-none min-w-[3rem]"></span>
|
||
<input type="text" id="skuSuffix"
|
||
class="w-full px-3 py-1.5 border border-gray-700 bg-dark-light input-focus text-gray-100"
|
||
placeholder="后半部分">
|
||
<button type="button" id="copySkuBtn" title="复制完整货号"
|
||
class="bg-gray-800 hover:bg-gray-700 text-gray-300 px-3 py-1.5 rounded-r-lg transition-colors duration-200">
|
||
<i class="fa fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="md:col-span-2">
|
||
<label for="productName" class="block text-sm font-medium text-gray-300 mb-1">商品名</label>
|
||
<div class="flex">
|
||
<input type="text" id="productName"
|
||
class="w-full px-3 py-1.5 border border-gray-700 bg-dark-light rounded-l-lg input-focus text-gray-100">
|
||
<button type="button" id="copyProductNameBtn" title="复制商品名"
|
||
class="bg-gray-800 hover:bg-gray-700 text-gray-300 px-3 py-1.5 rounded-r-lg transition-colors duration-200">
|
||
<i class="fa fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="md:col-span-2">
|
||
<label for="purchaseUrl" class="block text-sm font-medium text-gray-300 mb-1">采买地址</label>
|
||
<div class="flex">
|
||
<input type="text" id="purchaseUrl"
|
||
class="w-full px-3 py-1.5 border border-gray-700 bg-dark-light rounded-l-lg input-focus text-gray-100"
|
||
placeholder="1688 / 拼多多等采买页链接">
|
||
<button type="button" id="openPurchaseUrlBtn" title="打开采买地址"
|
||
class="bg-gray-800 hover:bg-gray-700 text-gray-300 px-3 py-1.5 border-r border-gray-700 transition-colors duration-200">
|
||
<i class="fa fa-external-link"></i>
|
||
</button>
|
||
<button type="button" id="copyPurchaseUrlBtn" title="复制采买地址"
|
||
class="bg-gray-800 hover:bg-gray-700 text-gray-300 px-3 py-1.5 rounded-r-lg transition-colors duration-200">
|
||
<i class="fa fa-copy"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-300 mb-2">物流等级</label>
|
||
<div class="flex space-x-4">
|
||
<label class="inline-flex items-center cursor-pointer">
|
||
<input type="radio" name="logisticsLevel" value="low"
|
||
class="form-radio text-primary focus:ring-primary h-5 w-5">
|
||
<span class="ml-2 text-gray-300">低</span>
|
||
</label>
|
||
<label class="inline-flex items-center cursor-pointer">
|
||
<input type="radio" name="logisticsLevel" value="high"
|
||
class="form-radio text-primary focus:ring-primary h-5 w-5" checked>
|
||
<span class="ml-2 text-gray-300">高</span>
|
||
</label>
|
||
<label class="inline-flex items-center cursor-pointer">
|
||
<input type="radio" name="logisticsLevel" value="high2"
|
||
class="form-radio text-primary focus:ring-primary h-5 w-5" checked>
|
||
<span class="ml-2 text-gray-300">Premium</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="flex space-x-4">
|
||
<button type="button" id="calculateBtn"
|
||
class="w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-lg flex items-center justify-center transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg hover:shadow-primary/20">
|
||
计价
|
||
</button>
|
||
<button type="button" id="recordBtn"
|
||
class="w-full bg-secondary hover:bg-secondary/90 text-white py-3 rounded-lg flex items-center justify-center transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg hover:shadow-secondary/20">
|
||
录入
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="space-y-5">
|
||
<div id="logisticsCard" class="flex result-card opacity-0 transform translate-y-4">
|
||
<div class="mr-20" style="width: 60%;">
|
||
<h3 class="text-lg font-medium text-gray-100 mb-2 flex items-center text-glow">
|
||
物流费<span id="logisticsFeeRule" class="text-xs font-normal text-gray-500 ml-1"></span>
|
||
</h3>
|
||
<p class="text-3xl font-bold text-gray-100" id="logisticsFee">--</p>
|
||
</div>
|
||
<div style="width: 40%;">
|
||
<h3 class="text-lg font-medium text-gray-100 mb-2 flex items-center text-glow">
|
||
平台佣金<span id="commissionRule" class="text-xs font-normal text-gray-500 ml-1"></span>
|
||
</h3>
|
||
<p class="text-3xl font-bold text-gray-100" id="commission">--</p>
|
||
</div>
|
||
</div>
|
||
<div id="receivedCard" class="flex result-card opacity-0 transform translate-y-4 transition-delay-100">
|
||
<div class="mr-20" style="width: 60%;">
|
||
<h3 class="text-lg font-medium text-gray-100 mb-2 flex items-center text-glow">
|
||
实收价格
|
||
</h3>
|
||
<p class="text-3xl font-bold text-gray-100" id="receivedPrice">--</p>
|
||
</div>
|
||
<div style="width: 40%;">
|
||
<h3 class="text-lg font-medium text-gray-100 mb-2 flex items-center text-glow">
|
||
净利润
|
||
</h3>
|
||
<p class="text-3xl font-bold text-gray-100" id="profitElement">--</p>
|
||
</div>
|
||
</div>
|
||
<div id="totalCostCard" class="flex result-card opacity-0 transform translate-y-4 transition-delay-100">
|
||
<div class="mr-20" style="width: 60%;">
|
||
<h3 class="text-lg font-medium text-gray-100 mb-2 flex items-center text-glow">
|
||
完全成本<span class="text-xs font-normal text-gray-500 ml-1">(进货价+物流费+平台总抽成)</span>
|
||
</h3>
|
||
<p class="text-3xl font-bold text-red-400" id="totalCost">--</p>
|
||
</div>
|
||
<div style="width: 40%;">
|
||
<h3 class="text-lg font-medium text-gray-100 mb-2 flex items-center text-glow">
|
||
平台总抽成<span id="fullCommissionRule" class="text-xs font-normal text-gray-500 ml-1"></span>
|
||
</h3>
|
||
<p class="text-3xl font-bold text-red-400" id="fullCommission">--</p>
|
||
</div>
|
||
</div>
|
||
<div id="sellingCard" class="result-card opacity-0 transform translate-y-4 transition-delay-200">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h3 class="text-lg font-medium text-gray-100 flex items-center text-glow">
|
||
人民币-销售价格
|
||
</h3>
|
||
<div class="flex items-center">
|
||
<label for="discountReserve" class="text-sm text-gray-400 mr-2">预留折扣空间</label>
|
||
<input type="number" id="discountReserve" step="5" min="0" max="95" value="50"
|
||
class="w-20 px-2 py-1 border border-gray-700 bg-dark-light rounded-lg input-focus text-gray-100 text-sm">
|
||
<span class="ml-1 text-sm text-gray-400">%</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex">
|
||
<div class="mr-20" style="width: 60%;">
|
||
<p class="text-sm text-gray-400 mb-1">现价</p>
|
||
<p class="text-3xl font-bold text-secondary" id="sellingPrice">--</p>
|
||
</div>
|
||
<div style="width: 40%;">
|
||
<p class="text-sm text-gray-400 mb-1">预留 <span id="cnyReserveLabel">50%</span> 后<span id="cnyReserveGap" class="text-xs text-gray-500 ml-1"></span></p>
|
||
<p class="text-3xl font-bold text-secondary" id="sellingPriceReserved">--</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="sellingCardRub" class="result-card opacity-0 transform translate-y-4 transition-delay-200">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h3 class="text-lg font-medium text-gray-100 flex items-center text-glow">
|
||
卢布-销售价格
|
||
</h3>
|
||
<span class="text-sm text-gray-400">按 1 ¥ = <span id="rubCardRate"
|
||
class="text-gray-100">--</span> ₽</span>
|
||
</div>
|
||
<div class="flex">
|
||
<div class="mr-20" style="width: 60%;">
|
||
<p class="text-sm text-gray-400 mb-1">现价</p>
|
||
<p class="text-3xl font-bold text-blue-400" id="sellingPriceRub">--</p>
|
||
</div>
|
||
<div style="width: 40%;">
|
||
<p class="text-sm text-gray-400 mb-1">预留 <span id="rubReserveLabel">50%</span> 后<span id="rubReserveGap" class="text-xs text-gray-500 ml-1"></span></p>
|
||
<p class="text-3xl font-bold text-blue-400" id="sellingPriceRubReserved">--</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="dimensionAlert" class="hidden opacity-0 transition-opacity duration-300">
|
||
<div id="dimensionWarning" class="warning-card">
|
||
<h3 class="text-lg font-medium text-gray-100 mb-2 flex items-center">
|
||
尺寸警告
|
||
</h3>
|
||
<p class="text-gray-300" id="dimensionWarningMsg"></p>
|
||
</div>
|
||
<div id="dimensionError" class="error-card">
|
||
<h3 class="text-lg font-medium text-gray-100 mb-2 flex items-center">
|
||
尺寸错误
|
||
</h3>
|
||
<p class="text-gray-300" id="dimensionErrorMsg"></p>
|
||
</div>
|
||
<div id="logisticsLevelAlert" class="error-card">
|
||
<h3 class="text-lg font-medium text-gray-100 mb-2 flex items-center">
|
||
物流等级建议
|
||
</h3>
|
||
<p class="text-gray-300" id="logisticsLevelMsg"></p>
|
||
</div>
|
||
<div id="priceRangeAlert" class="warning-card">
|
||
<h3 class="text-lg font-medium text-gray-100 mb-2 flex items-center">
|
||
价格区间提示
|
||
</h3>
|
||
<p class="text-gray-300" id="priceRangeMsg"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 俄文文案（AI） -->
|
||
<div class="mt-8 bg-dark-card rounded-xl panel-shadow p-5 neon-border">
|
||
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
|
||
<div class="flex items-center gap-3">
|
||
<h2 class="text-lg font-semibold text-gray-100 flex items-center text-glow">
|
||
俄文文案
|
||
</h2>
|
||
<button type="button" id="aiToggleBtn" aria-expanded="true" aria-controls="aiCopyBody"
|
||
class="shrink-0 px-3 py-1.5 text-sm rounded-lg bg-primary/20 hover:bg-primary/30 text-primary transition-colors duration-200">
|
||
收起
|
||
</button>
|
||
</div>
|
||
<p id="aiCopyStatus" class="text-sm text-gray-500"></p>
|
||
</div>
|
||
<div id="aiCopyBody" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
<div class="space-y-4">
|
||
<div>
|
||
<label for="aiSourceText" class="block text-sm font-medium text-gray-300 mb-1">商品资料</label>
|
||
<textarea id="aiSourceText" rows="16"
|
||
placeholder="粘贴采买站的标题、卖点、规格、材质等信息；如本次有特殊要求，直接写在后面，例如：偏搜索词、突出防摔、适合家居类目……"
|
||
class="w-full px-3 py-2 border border-gray-700 bg-dark-light rounded-lg input-focus text-gray-100"></textarea>
|
||
</div>
|
||
<p class="text-xs text-gray-500">
|
||
将带入当前：型号 <span id="aiContextModelCode" class="text-gray-300">--</span>
|
||
<span class="text-gray-600">（生成文案不读取商品名）</span>
|
||
</p>
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
<label for="aiModelSelect" class="text-sm text-gray-400 whitespace-nowrap">模型</label>
|
||
<select id="aiModelSelect"
|
||
class="min-w-[14rem] flex-1 px-3 py-2 border border-gray-700 bg-dark-light rounded-lg input-focus text-gray-100 text-sm">
|
||
<option value="">加载中…</option>
|
||
</select>
|
||
</div>
|
||
<button type="button" id="aiGenerateBtn"
|
||
class="w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-lg transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg hover:shadow-primary/20">
|
||
生成文案
|
||
</button>
|
||
</div>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-300 mb-1">推荐标题</label>
|
||
<div id="aiTitlesContainer" class="space-y-3">
|
||
<p class="text-sm text-gray-500">生成后将在此展示 2 个推荐标题</p>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex items-center justify-between mb-1 gap-3">
|
||
<label class="block text-sm font-medium text-gray-300">描述</label>
|
||
<button type="button" data-copy-source="aiDescRu"
|
||
class="ai-copy-btn ai-copy-trigger shrink-0 px-3 py-1.5 text-sm rounded-lg bg-primary/20 hover:bg-primary/30 text-primary transition-colors duration-200">复制俄文</button>
|
||
</div>
|
||
<div id="aiDescRu" class="ai-text-block ai-text-block-ru" data-placeholder="俄文描述将展示在这里"></div>
|
||
<div class="ai-text-divider"></div>
|
||
<p class="text-xs text-gray-500 mb-1">中文对照</p>
|
||
<div id="aiDescZh" class="ai-text-block ai-text-block-zh" data-placeholder="中文对照将展示在这里"></div>
|
||
</div>
|
||
<div>
|
||
<div class="flex items-center justify-between mb-1 gap-3">
|
||
<label class="block text-sm font-medium text-gray-300">标签</label>
|
||
<button type="button" id="aiCopyAllTagsBtn"
|
||
class="ai-copy-all-tags-btn ai-copy-trigger shrink-0 px-3 py-1.5 text-sm rounded-lg bg-primary/20 hover:bg-primary/30 text-primary transition-colors duration-200">复制全部俄文标签</button>
|
||
</div>
|
||
<div id="aiTagsContainer" class="flex flex-wrap gap-2 min-h-[2.5rem]">
|
||
<p class="text-sm text-gray-500">生成后将在此展示标签，点击可复制俄文</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图片处理 -->
|
||
<div class="mt-8 bg-dark-card rounded-xl panel-shadow p-5 neon-border">
|
||
<div class="flex items-center gap-3 mb-4">
|
||
<h2 class="text-lg font-semibold text-gray-100 flex items-center text-glow">
|
||
<i class="fa fa-picture-o mr-2"></i>图片处理
|
||
</h2>
|
||
<button type="button" id="imageToggleBtn" aria-expanded="true" aria-controls="imageBody"
|
||
class="shrink-0 px-3 py-1.5 text-sm rounded-lg bg-primary/20 hover:bg-primary/30 text-primary transition-colors duration-200">
|
||
收起
|
||
</button>
|
||
</div>
|
||
<div id="imageBody" class="space-y-6">
|
||
<div class="grid grid-cols-1 md:grid-cols-10 gap-5">
|
||
<div class="md:col-span-3 space-y-4">
|
||
<label class="block text-sm font-medium text-gray-300">水印设置</label>
|
||
<div class="flex space-x-6">
|
||
<label class="inline-flex items-center cursor-pointer">
|
||
<input type="radio" name="watermarkType" value="image" checked
|
||
class="form-radio text-primary focus:ring-primary h-5 w-5">
|
||
<span class="ml-2 text-gray-300">图片水印</span>
|
||
</label>
|
||
<label class="inline-flex items-center cursor-pointer">
|
||
<input type="radio" name="watermarkType" value="text"
|
||
class="form-radio text-primary focus:ring-primary h-5 w-5">
|
||
<span class="ml-2 text-gray-300">文字水印</span>
|
||
</label>
|
||
</div>
|
||
<div id="watermarkImageOptions" class="flex items-center gap-3">
|
||
<img src="imgs/watermark.jpg" alt="水印预览"
|
||
class="w-14 h-14 rounded-full border border-gray-700 object-cover shrink-0">
|
||
<span class="text-xs text-gray-500">默认水印图，贴图后为圆形</span>
|
||
</div>
|
||
<div id="watermarkTextOptions" class="hidden">
|
||
<div class="flex items-center">
|
||
<label for="watermarkText"
|
||
class="px-3 py-2 bg-dark-light border border-r-0 border-gray-700 rounded-l-lg text-gray-400 text-sm whitespace-nowrap">水印文字</label>
|
||
<input type="text" id="watermarkText" value="xiongmaoyx"
|
||
class="w-full px-3 py-2 border border-gray-700 bg-dark-light rounded-r-lg input-focus text-gray-100 text-sm">
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<label for="watermarkOpacity"
|
||
class="px-3 py-2 bg-dark-light border border-r-0 border-gray-700 rounded-l-lg text-gray-400 text-sm whitespace-nowrap">透明度</label>
|
||
<input type="number" id="watermarkOpacity" min="0" max="100" step="5" value="30"
|
||
class="w-full px-3 py-2 border border-gray-700 bg-dark-light input-focus text-gray-100 text-sm">
|
||
<span
|
||
class="px-3 py-2 bg-dark-light border border-l-0 border-gray-700 rounded-r-lg text-gray-400 text-sm">%</span>
|
||
</div>
|
||
<div class="pt-2 border-t border-gray-800">
|
||
<div class="flex items-center">
|
||
<label for="whiteBgTolerance"
|
||
class="px-3 py-2 bg-dark-light border border-r-0 border-gray-700 rounded-l-lg text-gray-400 text-sm whitespace-nowrap">白底容差</label>
|
||
<input type="number" id="whiteBgTolerance" min="5" max="200" step="5" value="60"
|
||
class="w-full px-3 py-2 border border-gray-700 bg-dark-light rounded-r-lg input-focus text-gray-100 text-sm">
|
||
</div>
|
||
<p class="text-xs text-gray-500 mt-1">背景没洗干净就调大，商品边缘被吃掉就调小</p>
|
||
</div>
|
||
</div>
|
||
<div class="md:col-span-7 flex flex-col">
|
||
<label class="block text-sm font-medium text-gray-300 mb-2">上传图片（支持多张）</label>
|
||
<div id="uploadArea" class="upload-area flex-1 flex flex-col items-center justify-center">
|
||
<input type="file" id="fileInput" multiple accept="image/*" class="hidden">
|
||
<div class="flex flex-col items-center">
|
||
<i class="fa fa-cloud-upload text-4xl text-gray-500 mb-2"></i>
|
||
<p class="text-gray-400">点击或拖拽图片到此处上传</p>
|
||
<p class="text-xs text-gray-500 mt-1">支持JPG、PNG、WEBP格式</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex flex-wrap items-center justify-between gap-2 mb-2">
|
||
<label class="block text-sm font-medium text-gray-300">预览（处理后）</label>
|
||
<span class="text-xs text-gray-500">添加水印后，可在预览图上按住水印拖动调整位置</span>
|
||
</div>
|
||
<div id="previewContainer" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
|
||
<p class="col-span-full text-gray-500 text-center py-4">暂无图片</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex space-x-4">
|
||
<button id="addWatermarkBtn"
|
||
class="flex-1 bg-primary hover:bg-primary/90 text-white py-3 rounded-lg flex items-center justify-center transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg hover:shadow-primary/20">
|
||
<i class="fa fa-tint mr-2"></i>添加水印
|
||
</button>
|
||
<button id="exportAllBtn" disabled title="导出为文件夹（Chrome/Edge 直接生成文件夹；其它浏览器打包为 ZIP）"
|
||
class="flex-1 bg-secondary hover:bg-secondary/90 text-white py-3 rounded-lg flex items-center justify-center transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg hover:shadow-secondary/20 opacity-50 cursor-not-allowed">
|
||
<i class="fa fa-download mr-2"></i>导出所有图片
|
||
</button>
|
||
<button id="clearAllImagesBtn" disabled
|
||
class="bg-danger/20 hover:bg-danger/30 text-danger px-5 py-3 rounded-lg flex items-center justify-center transition-all duration-200 whitespace-nowrap opacity-50 cursor-not-allowed">
|
||
<i class="fa fa-trash mr-2"></i>清空所有图片
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-8 bg-dark-card rounded-xl panel-shadow p-5 overflow-x-auto neon-border">
|
||
<div class="flex flex-wrap justify-between items-center gap-3 mb-4">
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
<h2 class="text-lg font-semibold text-gray-100 flex items-center text-glow">
|
||
上品登记表
|
||
</h2>
|
||
<button type="button" id="recordCurrentBtn"
|
||
class="bg-secondary hover:bg-secondary/90 text-white px-3 py-1.5 rounded-lg text-sm flex items-center transition-colors duration-200">
|
||
录入当前商品
|
||
</button>
|
||
</div>
|
||
<div class="flex flex-wrap items-center gap-2">
|
||
<button type="button" id="toggleOptionalColsBtn"
|
||
class="bg-gray-800 hover:bg-gray-700 text-gray-300 px-3 py-1.5 rounded-lg text-sm flex items-center transition-colors duration-200"
|
||
aria-pressed="false">
|
||
显示物流费/平台总抽成/重量/尺寸/状态
|
||
</button>
|
||
<button type="button" id="transferDataBtn"
|
||
class="bg-primary/20 hover:bg-primary/30 text-primary px-3 py-1.5 rounded-lg text-sm flex items-center transition-colors duration-200">
|
||
导出组合码
|
||
</button>
|
||
<button type="button" id="exportHistoryBtn"
|
||
class="bg-primary/20 hover:bg-primary/30 text-primary px-3 py-1.5 rounded-lg text-sm flex items-center transition-colors duration-200">
|
||
导出记录
|
||
</button>
|
||
<button type="button" id="clearHistoryBtn"
|
||
class="bg-danger/20 hover:bg-danger/30 text-danger px-3 py-1.5 rounded-lg text-sm flex items-center transition-colors duration-200">
|
||
清空记录
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<table id="historyTable" class="min-w-full divide-y divide-gray-700">
|
||
<thead class="bg-dark-light">
|
||
<tr>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">操作</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">货号(sku)</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">商品名</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">进货价</th>
|
||
<th scope="col" class="history-col-optional px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">物流费</th>
|
||
<th scope="col" class="history-col-optional px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">平台总抽成</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">实收价</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">完全成本</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">销售价</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">净利润</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">净利率</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">卢布销价</th>
|
||
<th scope="col" class="history-col-optional px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">重量</th>
|
||
<th scope="col" class="history-col-optional px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">尺寸</th>
|
||
<th scope="col" class="history-col-optional px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">状态</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Ozon地址</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">采买地址</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="bg-dark-card divide-y divide-gray-700" id="historyTableBody">
|
||
<tr class="text-center">
|
||
<td colspan="17" class="px-6 py-10 text-gray-500"></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="mt-8">
|
||
<div class="bg-dark-card rounded-xl panel-shadow p-5 neon-border">
|
||
<h2 class="text-lg font-semibold text-gray-100 mb-4 flex items-center text-glow">
|
||
上品组合码
|
||
</h2>
|
||
<div>
|
||
<textarea id="resultOutput" rows="10"
|
||
class="w-full px-3 py-2 border border-gray-700 bg-dark-light rounded-lg text-gray-100"></textarea>
|
||
</div>
|
||
<button id="copyBtn"
|
||
class="mt-4 w-full bg-primary hover:bg-primary/90 text-white py-2 rounded-lg flex items-center justify-center transition-all duration-200 transform hover:scale-105 hover:shadow-lg hover:shadow-primary/20">
|
||
复制结果
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
||
<script src="js/app.js"></script>
|
||
<script src="js/ai-copy.js"></script>
|
||
</body>
|
||
|
||
</html> |