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 */
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];
}, [publishVersions, curseforgeExistingFiles, matchedCfFileNames, config.filename_format]);
/** 行底色:待发布且未存在 = 绿色;其余(已存在/已有版本)= 灰色 */
const rowStyle = useCallback(
(kind: "pending" | "existing", exists: boolean): React.CSSProperties => ({
background:
kind === "pending" && !exists
? token.colorSuccessBg
: token.colorFillQuaternary,
}),
[token],
/** 新增版本行 className已有版本行用默认样式 */
const rowClassName = useCallback(
(kind: "pending" | "existing", exists: boolean) =>
kind === "pending" && !exists ? "row-new" : "",
[],
);
// 注入 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
const initRef = useRef(false);
useEffect(() => {
@ -556,7 +564,7 @@ export function PublishModal({
{loadingExisting ? (
<div style={{ textAlign: "center", padding: 40 }}></div>
) : (
<Row gutter={token.margin}>
<Row gutter={token.margin} className="publish-version-tables" style={newRowCssVars}>
<Col span={14}>
<Text strong style={{ display: "block", marginBottom: token.marginXS }}>
Modrinth
@ -566,14 +574,14 @@ export function PublishModal({
dataSource={modrinthRows}
columns={modrinthColumns}
rowKey="key"
onRow={(r) => ({
style: rowStyle(
rowClassName={(r) =>
rowClassName(
r.kind,
r.kind === "pending"
? (r.pending?.existsModrinth ?? false)
: true,
),
})}
)
}
rowSelection={{
selectedRowKeys: selectedModrinth,
onChange: (keys) => setSelectedModrinth(keys as string[]),
@ -601,14 +609,14 @@ export function PublishModal({
dataSource={curseforgeRows}
columns={curseforgeColumns}
rowKey="key"
onRow={(r) => ({
style: rowStyle(
rowClassName={(r) =>
rowClassName(
r.kind,
r.kind === "pending"
? (r.pending?.existsCurseforge ?? false)
: true,
),
})}
)
}
rowSelection={{
selectedRowKeys: selectedCurseforge,
onChange: (keys) => setSelectedCurseforge(keys as string[]),