feat(ui): 增加作战表与日志面板中间可拖拽调节分割条，紧凑化表格列宽
- 布局增加左右可拖动分割条：支持按住拖拽自由调节左侧作战表与右侧面板宽度比例（30%~85%），双击恢复默认 62%，支持 localStorage 本地记忆 - 紧凑优化作战表列宽：各列宽度微调，scroll 改为 max-content，彻底解决小分辨率下最右侧'兑换记录'按钮被横向滚动条遮挡问题 - 升级版本号至 0.5.3
This commit is contained in:
yml2213
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "huya-go-frontend",
|
||||
"private": true,
|
||||
"version": "0.5.2",
|
||||
"version": "0.5.3",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host 127.0.0.1",
|
||||
|
||||
+86
-11
@@ -70,6 +70,8 @@ const defaultConcurrency = 30
|
||||
const legacyDefaultSID = 2203
|
||||
const defaultSID = 2277
|
||||
const sidDefaultMigrationBase = 'huya-go.gui.sid-v2277.v1'
|
||||
const defaultMainSplit = 62
|
||||
const splitStorageKeyBase = 'huya-go.gui.main-split.v1'
|
||||
|
||||
// 界面本地存储保留的日志上限，与后端的增量拉取配合使用。
|
||||
const maxClientLogs = 1000
|
||||
@@ -774,6 +776,54 @@ export default function Dashboard() {
|
||||
const [debugLog, setDebugLog] = useState(false)
|
||||
const [instanceInfo, setInstanceInfo] = useState<InstanceInfo | null>(null)
|
||||
const [appVersion, setAppVersion] = useState('')
|
||||
const [mainSplit, setMainSplit] = useState<number>(() => {
|
||||
try {
|
||||
const saved = Number(localStorage.getItem(scopedKey(splitStorageKeyBase)))
|
||||
if (saved >= 30 && saved <= 85) return saved
|
||||
} catch {}
|
||||
return defaultMainSplit
|
||||
})
|
||||
const [isDraggingSplit, setIsDraggingSplit] = useState(false)
|
||||
const mainGridRef = useRef<HTMLElement>(null)
|
||||
|
||||
const handleSplitMouseDown = (e: React.MouseEvent) => {
|
||||
e.preventDefault()
|
||||
setIsDraggingSplit(true)
|
||||
|
||||
const container = mainGridRef.current
|
||||
if (!container) return
|
||||
|
||||
const rect = container.getBoundingClientRect()
|
||||
|
||||
const onMouseMove = (moveEvent: MouseEvent) => {
|
||||
const offsetX = moveEvent.clientX - rect.left
|
||||
const percent = Math.min(85, Math.max(30, (offsetX / rect.width) * 100))
|
||||
setMainSplit(percent)
|
||||
}
|
||||
|
||||
const onMouseUp = () => {
|
||||
setIsDraggingSplit(false)
|
||||
window.removeEventListener('mousemove', onMouseMove)
|
||||
window.removeEventListener('mouseup', onMouseUp)
|
||||
setMainSplit((latest) => {
|
||||
try {
|
||||
localStorage.setItem(scopedKey(splitStorageKeyBase), String(Math.round(latest)))
|
||||
} catch {}
|
||||
return latest
|
||||
})
|
||||
}
|
||||
|
||||
window.addEventListener('mousemove', onMouseMove)
|
||||
window.addEventListener('mouseup', onMouseUp)
|
||||
}
|
||||
|
||||
const handleSplitDoubleClick = () => {
|
||||
setMainSplit(defaultMainSplit)
|
||||
try {
|
||||
localStorage.setItem(scopedKey(splitStorageKeyBase), String(defaultMainSplit))
|
||||
} catch {}
|
||||
message.info('已恢复默认左右宽度 (62%)')
|
||||
}
|
||||
|
||||
const applyCookieEntries = async (entries: CookieEntry[], persist = true, refreshLatest = false) => {
|
||||
const normalizedEntries = entries
|
||||
@@ -1556,7 +1606,7 @@ export default function Dashboard() {
|
||||
() => [
|
||||
{
|
||||
title: '账号',
|
||||
width: 150,
|
||||
width: 130,
|
||||
render: (_, row) => (
|
||||
<div>
|
||||
<strong>{row.uid || `第${row.line}行`}</strong>
|
||||
@@ -1574,7 +1624,7 @@ export default function Dashboard() {
|
||||
},
|
||||
{
|
||||
title: '凭据',
|
||||
width: 110,
|
||||
width: 85,
|
||||
render: (_, row) =>
|
||||
row.checkStatus ? (
|
||||
cookieCheckTag(row.checkStatus, row.checkMessage)
|
||||
@@ -1586,18 +1636,18 @@ export default function Dashboard() {
|
||||
},
|
||||
{
|
||||
title: '商品',
|
||||
width: 150,
|
||||
width: 120,
|
||||
ellipsis: true,
|
||||
render: () => currentPrize?.name || watchedName || '未选择',
|
||||
},
|
||||
{
|
||||
title: '积分',
|
||||
width: 84,
|
||||
width: 70,
|
||||
render: (_, row) => scoreMap.get(row.uid)?.score ?? '-',
|
||||
},
|
||||
{
|
||||
title: '兑换结果',
|
||||
width: 190,
|
||||
width: 150,
|
||||
render: (_, row) => {
|
||||
const exchange = exchangeByUID.get(row.uid)
|
||||
if (exchange?.success) {
|
||||
@@ -1654,11 +1704,12 @@ export default function Dashboard() {
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
width: 98,
|
||||
width: 80,
|
||||
render: (_, row) => categoryTag(latestResultByUID.get(row.uid)?.category),
|
||||
},
|
||||
{
|
||||
title: '最后结果',
|
||||
width: 130,
|
||||
ellipsis: true,
|
||||
render: (_, row) => {
|
||||
const result = latestResultByUID.get(row.uid)
|
||||
@@ -1667,7 +1718,7 @@ export default function Dashboard() {
|
||||
},
|
||||
{
|
||||
title: '兑换记录',
|
||||
width: 104,
|
||||
width: 90,
|
||||
render: (_, row) => {
|
||||
const rec = recordsByUID.get(row.uid)
|
||||
const count = rec?.records?.length || 0
|
||||
@@ -2254,8 +2305,17 @@ export default function Dashboard() {
|
||||
</Space>
|
||||
</section>
|
||||
|
||||
<section className="main-grid">
|
||||
<div className="account-panel">
|
||||
<section
|
||||
className={`main-grid ${isDraggingSplit ? 'dragging-split' : ''}`}
|
||||
ref={mainGridRef}
|
||||
>
|
||||
<div
|
||||
className="account-panel"
|
||||
style={{
|
||||
width: `calc(${mainSplit}% - 11px)`,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<div className="panel-head">
|
||||
<Typography.Title level={5}>账号作战表</Typography.Title>
|
||||
<Space>
|
||||
@@ -2288,11 +2348,26 @@ export default function Dashboard() {
|
||||
rowClassName={(row) =>
|
||||
exchangeByUID.get(row.uid)?.success ? 'account-row-success' : ''
|
||||
}
|
||||
scroll={{ x: 1040, y: 560 }}
|
||||
scroll={{ x: 'max-content', y: 560 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="side-log-panel">
|
||||
<div
|
||||
className={`main-resizer ${isDraggingSplit ? 'active' : ''}`}
|
||||
onMouseDown={handleSplitMouseDown}
|
||||
onDoubleClick={handleSplitDoubleClick}
|
||||
title="按住左右拖动调整宽度，双击恢复默认"
|
||||
>
|
||||
<div className="resizer-bar" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="side-log-panel"
|
||||
style={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
}}
|
||||
>
|
||||
<div className="panel-tools">
|
||||
<Tabs activeKey={panelTab} onChange={setPanelTab} items={panelTabs} size="small" />
|
||||
</div>
|
||||
|
||||
+53
-7
@@ -357,11 +357,61 @@ body {
|
||||
}
|
||||
|
||||
.main-grid {
|
||||
display: grid;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
grid-template-columns: minmax(560px, 1.35fr) minmax(380px, 0.95fr);
|
||||
gap: 14px;
|
||||
gap: 0;
|
||||
padding: 14px 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-resizer {
|
||||
width: 14px;
|
||||
margin: 0 4px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: col-resize;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
transition: background 0.15s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.main-resizer .resizer-bar {
|
||||
width: 4px;
|
||||
height: 52px;
|
||||
border-radius: 4px;
|
||||
background: #cbd5e1;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.main-resizer:hover .resizer-bar,
|
||||
.main-resizer.active .resizer-bar {
|
||||
background: #1677ff;
|
||||
height: 96px;
|
||||
box-shadow: 0 0 6px rgba(22, 119, 255, 0.4);
|
||||
}
|
||||
|
||||
.main-resizer:hover,
|
||||
.main-resizer.active {
|
||||
background: rgba(22, 119, 255, 0.08);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.main-grid.dragging-split {
|
||||
cursor: col-resize !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
.main-grid.dragging-split * {
|
||||
user-select: none !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.main-grid.dragging-split .main-resizer {
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.account-panel,
|
||||
@@ -657,10 +707,6 @@ body {
|
||||
grid-template-columns: 280px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.main-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.settings-grid,
|
||||
.settings-param-grid,
|
||||
.settings-switch-grid {
|
||||
|
||||
@@ -5,10 +5,10 @@ package version
|
||||
//
|
||||
// 构建时可用 ldflags 覆盖（构建脚本就是这么做的）：
|
||||
//
|
||||
// go build -ldflags "-X huya-go/internal/version.Version=0.5.2"
|
||||
var Version = "0.5.2"
|
||||
// go build -ldflags "-X huya-go/internal/version.Version=0.5.3"
|
||||
var Version = "0.5.3"
|
||||
|
||||
// Display 返回带 v 前缀的展示版本号，例如 v0.5.2。
|
||||
// Display 返回带 v 前缀的展示版本号，例如 v0.5.3。
|
||||
func Display() string {
|
||||
return "v" + Version
|
||||
}
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@
|
||||
"info": {
|
||||
"companyName": "huya-go",
|
||||
"productName": "虎牙抢购助手",
|
||||
"productVersion": "0.5.2",
|
||||
"productVersion": "0.5.3",
|
||||
"copyright": "",
|
||||
"comments": "虎牙活动积分兑换/抢购工具"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user