Skip to content

style(panel): ?????????? #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gangbaRuby merged 2 commits into from
Aug 10, 2026
Merged

style(panel): ?????????? #43

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a85005
style(panel): 饱和度表适配窄屏排版
gangbaRuby Aug 10, 2026
9b4f0ae
Merge remote-tracking branch 'origin/main' into HEAD
gangbaRuby Aug 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 21 additions & 10 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1505,18 +1505,22 @@ import { registerExportInfo, downloadExportData } from './core/exportInfo.js';
const SaturationDisplay = (() => {
let saturationTableElement = null;

const isNarrowViewport = () => window.innerWidth <= 480;

// 构建表格内容
const createTable = (list) => {
const d = DM();
const isNarrow = isNarrowViewport();
const cellPadding = isNarrow ? '4px 5px' : '4px 8px';
const table = document.createElement("table");
table.style.cssText = `border-collapse:collapse;margin:10px 0;background:${d ? '#333' : '#f9f9f9'};color:${d ? 'white' : '#333'};font-size:13px;width:100%;`;
table.style.cssText = `border-collapse:collapse;margin:10px 0;background:${d ? '#333' : '#f9f9f9'};color:${d ? 'white' : '#333'};font-size:${isNarrow ? 12 : 13}px;width:100%;table-layout:fixed;`;

const thead = document.createElement("thead");
const headerRow = document.createElement("tr");
["物品", "质量", "饱和度"].forEach(text => {
const th = document.createElement("th");
th.textContent = text;
th.style.cssText = `border:1px solid ${d ? '#666' : '#ccc'};padding:4px 8px;`;
th.style.cssText = `border:1px solid ${d ? '#666' : '#ccc'};padding:${cellPadding};overflow-wrap:anywhere;word-break:break-word;`;
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
Expand All @@ -1529,7 +1533,7 @@ import { registerExportInfo, downloadExportData } from './core/exportInfo.js';
[name, item.quality ?? "-", String(item.saturation)].forEach(text => {
const td = document.createElement("td");
td.textContent = text;
td.style.cssText = `border:1px solid ${d ? '#666' : '#ccc'};padding:4px 8px;text-align:center;`;
td.style.cssText = `border:1px solid ${d ? '#666' : '#ccc'};padding:${cellPadding};text-align:center;overflow-wrap:anywhere;word-break:break-word;`;
row.appendChild(td);
});
tbody.appendChild(row);
Expand All @@ -1547,6 +1551,11 @@ import { registerExportInfo, downloadExportData } from './core/exportInfo.js';
}

const d = DM();
const isNarrow = isNarrowViewport();
const containerPadding = isNarrow ? 8 : 12;
const containerMaxHeight = isNarrow ? 'calc(100vh - 70px)' : '400px';
const titleFont = isNarrow ? 13 : 14;
const subFont = isNarrow ? 12 : 13;
const list = data.ResourcesRetailInfo;
const weatherMultiplier = data.sellingSpeedMultiplier.sellingSpeedMultiplier;
const weatherData = data.sellingSpeedMultiplier || {};
Expand All @@ -1567,19 +1576,21 @@ import { registerExportInfo, downloadExportData } from './core/exportInfo.js';
// 1. 创建容器
saturationTableElement = document.createElement("div");
saturationTableElement.style.cssText = `
position:fixed; left:10px; top:50px; z-index:9998;
background:${d ? '#2c2c2c' : '#fff'}; color:${d ? '#fff' : '#333'}; padding:12px;
border-radius:8px; max-height:400px; overflow:auto;
max-width: calc(100vw - 20px);
position:fixed; left:10px; right:10px; top:50px; z-index:9998; box-sizing:border-box;
background:${d ? '#2c2c2c' : '#fff'}; color:${d ? '#fff' : '#333'}; padding:${containerPadding}px;
border-radius:8px; max-height:${containerMaxHeight}; overflow:auto;
width:auto; max-width: calc(100vw - 20px);
box-shadow:0 4px 15px rgba(0,0,0,0.5); font-family:Arial, sans-serif;
`;

// 2. 创建头部信息
const headerInfo = document.createElement("div");
headerInfo.style.paddingRight = '26px';
headerInfo.style.overflowWrap = 'anywhere';
headerInfo.innerHTML = `
<div style="margin-bottom:6px; font-size:14px; font-weight:bold; color:${d ? '#f1c40f' : '#b8860b'};">天气速度加成: ${weatherMultiplier}</div>
<div style="margin-bottom:6px; font-size:13px; color:${d ? '#ddd' : '#666'};">下次变更时间: ${weatherUntilText}</div>
<div style="margin-bottom:6px; font-size:13px; color:${d ? '#ddd' : '#666'};">查询历史饱和度: <a href="https://sc.22-7.top/marketsaturation" target="_blank" style="color:#3498db; text-decoration:underline;">点击查看</a></div>
<div style="margin-bottom:6px; font-size:${titleFont}px; font-weight:bold; color:${d ? '#f1c40f' : '#b8860b'};">天气速度加成: ${weatherMultiplier}</div>
<div style="margin-bottom:6px; font-size:${subFont}px; color:${d ? '#ddd' : '#666'};">下次变更时间: ${weatherUntilText}</div>
<div style="margin-bottom:6px; font-size:${subFont}px; color:${d ? '#ddd' : '#666'};">查询历史饱和度: <a href="https://sc.22-7.top/marketsaturation" target="_blank" style="color:#3498db; text-decoration:underline;">点击查看</a></div>
`;

// 3. 关闭按钮
Expand Down
Loading