joey5628/ozon-seller-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 前端的细节修改

Browse Source
This commit is contained in:
R524809
2026-08-10 14:19:08 +08:00
parent a925283bf7
commit 134a89a8de
5 changed files with 473 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/ozonSeller.html
+53 -65
View File
@@ -80,7 +80,7 @@
</div>
</div>
<div>
<label for="profitRate" class="block text-sm font-medium text-gray-300 mb-1">利润率 (%)</label>
<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>
@@ -202,17 +202,31 @@
<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="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="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">
@@ -222,7 +236,7 @@
</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>
@@ -242,12 +256,11 @@
<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-gray-100" id="sellingPrice">--</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> 后</p>
<p class="text-3xl font-bold text-gray-100" id="sellingPriceReserved">--</p>
<p class="text-xs text-gray-400 mt-1">折扣空间 <span id="cnyReserveGap">--</span></p>
<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>
@@ -262,13 +275,11 @@
<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="sellingPriceRub">--</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> 后</p>
<p class="text-3xl font-bold text-secondary" id="sellingPriceRubReserved">--</p>
<p class="text-xs text-gray-400 mt-1">折扣空间 <span id="rubReserveGap"
class="text-secondary">--</span></p>
<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>
@@ -324,8 +335,8 @@
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="aiContextProductName" class="text-gray-300">--</span>
／ 型号 <span id="aiContextModelCode" class="text-gray-300">--</span>
将带入当前：型号 <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>
@@ -350,7 +361,7 @@
<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 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>
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>
@@ -361,7 +372,7 @@
<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 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>
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>
@@ -455,10 +466,14 @@
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
<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>
@@ -478,7 +493,7 @@
<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">
@@ -497,56 +512,28 @@
<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="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="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">Ozon地址
</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">货号(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="15" class="px-6 py-10 text-gray-500"></td>
<td colspan="17" class="px-6 py-10 text-gray-500"></td>
</tr>
</tbody>
</table>
@@ -568,6 +555,7 @@
</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>