Add green state colors to new version rows

This commit is contained in:
CPTProgrammer 2026-07-18 15:14:44 +08:00
parent 778ac54bfa
commit 120e701443
No known key found for this signature in database
2 changed files with 66 additions and 18 deletions

View File

@ -24,3 +24,43 @@ body {
color: #1f1f1f; /* Ant Design on-surface / colorText */ color: #1f1f1f; /* Ant Design on-surface / colorText */
background-color: #f5f5f5; /* Ant Design bg-layout */ background-color: #f5f5f5; /* Ant Design bg-layout */
} }
/* PublishModal 第一页新增版本行配色
变量由组件注入--row-new-bg / --row-new-text /
--row-new-text-active 直接取 antd theme token
--row-new-bg-hover / --row-new-bg-active /
--row-new-bg-active-hover green-1 green-2 之间的
color-mix 半步过渡色25% / 50% / 75% */
/* 基础:浅绿底 + 深绿字 */
.publish-version-tables .ant-table-tbody > tr.row-new > td {
background: var(--row-new-bg);
color: var(--row-new-text);
}
/* 悬停:比背景深一点的绿 */
.publish-version-tables .ant-table-tbody > tr.row-new:hover > td {
background: var(--row-new-bg-hover);
}
/* 勾选背景再深半度文字最深绿覆盖默认蓝色选中态
注意antd 的选中样式作用在 td.ant-table-cell而非 td 本身
hover 不是 :hover 伪类而是 JS 注入的 .ant-table-cell-row-hover class
两条规则都必须针对它们书写才能生效 */
.publish-version-tables .ant-table-tbody > tr.row-new.ant-table-row-selected
> td.ant-table-cell {
background: var(--row-new-bg-active);
color: var(--row-new-text-active);
}
.publish-version-tables .ant-table-tbody > tr.row-new
> td.ant-table-cell-row-hover {
background: var(--row-new-bg-hover);
}
/* 选中 + 悬停:背景再深半度 */
.publish-version-tables .ant-table-tbody > tr.row-new.ant-table-row-selected
> td.ant-table-cell-row-hover {
background: var(--row-new-bg-active-hover);
color: var(--row-new-text-active);
}

View File

@ -348,17 +348,25 @@ export function PublishModal({
return [...pending, ...existing]; return [...pending, ...existing];
}, [publishVersions, curseforgeExistingFiles, matchedCfFileNames, config.filename_format]); }, [publishVersions, curseforgeExistingFiles, matchedCfFileNames, config.filename_format]);
/** 行底色:待发布且未存在 = 绿色;其余(已存在/已有版本)= 灰色 */ /** 新增版本行 className已有版本行用默认样式 */
const rowStyle = useCallback( const rowClassName = useCallback(
(kind: "pending" | "existing", exists: boolean): React.CSSProperties => ({ (kind: "pending" | "existing", exists: boolean) =>
background: kind === "pending" && !exists ? "row-new" : "",
kind === "pending" && !exists [],
? token.colorSuccessBg
: token.colorFillQuaternary,
}),
[token],
); );
// 注入 antd 绿色系 token 作为 CSS 变量(供 globals.css 的 .row-new 规则使用)。
// 三个过渡色用 color-mix 在 green-1 / green-2 之间混出半步色阶:
// hover = 25%,选中 = 50%,选中+hover = 75%
const newRowCssVars = {
"--row-new-bg": token.colorSuccessBg,
"--row-new-text": token.colorSuccessText,
"--row-new-bg-hover": `color-mix(in srgb, ${token.colorSuccessBg} 75%, ${token.colorSuccessBgHover} 25%)`,
"--row-new-bg-active": `color-mix(in srgb, ${token.colorSuccessBg} 50%, ${token.colorSuccessBgHover} 50%)`,
"--row-new-bg-active-hover": `color-mix(in srgb, ${token.colorSuccessBg} 25%, ${token.colorSuccessBgHover} 75%)`,
"--row-new-text-active": token.colorSuccessTextActive,
} as React.CSSProperties;
// Auto-select all non-existing versions when data first loads // Auto-select all non-existing versions when data first loads
const initRef = useRef(false); const initRef = useRef(false);
useEffect(() => { useEffect(() => {
@ -556,7 +564,7 @@ export function PublishModal({
{loadingExisting ? ( {loadingExisting ? (
<div style={{ textAlign: "center", padding: 40 }}></div> <div style={{ textAlign: "center", padding: 40 }}></div>
) : ( ) : (
<Row gutter={token.margin}> <Row gutter={token.margin} className="publish-version-tables" style={newRowCssVars}>
<Col span={14}> <Col span={14}>
<Text strong style={{ display: "block", marginBottom: token.marginXS }}> <Text strong style={{ display: "block", marginBottom: token.marginXS }}>
Modrinth Modrinth
@ -566,14 +574,14 @@ export function PublishModal({
dataSource={modrinthRows} dataSource={modrinthRows}
columns={modrinthColumns} columns={modrinthColumns}
rowKey="key" rowKey="key"
onRow={(r) => ({ rowClassName={(r) =>
style: rowStyle( rowClassName(
r.kind, r.kind,
r.kind === "pending" r.kind === "pending"
? (r.pending?.existsModrinth ?? false) ? (r.pending?.existsModrinth ?? false)
: true, : true,
), )
})} }
rowSelection={{ rowSelection={{
selectedRowKeys: selectedModrinth, selectedRowKeys: selectedModrinth,
onChange: (keys) => setSelectedModrinth(keys as string[]), onChange: (keys) => setSelectedModrinth(keys as string[]),
@ -601,14 +609,14 @@ export function PublishModal({
dataSource={curseforgeRows} dataSource={curseforgeRows}
columns={curseforgeColumns} columns={curseforgeColumns}
rowKey="key" rowKey="key"
onRow={(r) => ({ rowClassName={(r) =>
style: rowStyle( rowClassName(
r.kind, r.kind,
r.kind === "pending" r.kind === "pending"
? (r.pending?.existsCurseforge ?? false) ? (r.pending?.existsCurseforge ?? false)
: true, : true,
), )
})} }
rowSelection={{ rowSelection={{
selectedRowKeys: selectedCurseforge, selectedRowKeys: selectedCurseforge,
onChange: (keys) => setSelectedCurseforge(keys as string[]), onChange: (keys) => setSelectedCurseforge(keys as string[]),