From 120e7014437c3e430da8614fe6fa9eb137ccc0bb Mon Sep 17 00:00:00 2001
From: CPTProgrammer <46586216+CPTProgrammer@users.noreply.github.com>
Date: Sat, 18 Jul 2026 15:14:44 +0800
Subject: [PATCH] Add green state colors to new version rows

---
 src/app/globals.css             | 40 ++++++++++++++++++++++++++++++
 src/components/PublishModal.tsx | 44 +++++++++++++++++++--------------
 2 files changed, 66 insertions(+), 18 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index abfbbb0..3bc887a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -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);
+}
diff --git a/src/components/PublishModal.tsx b/src/components/PublishModal.tsx
index 873a096..01fee28 100644
--- a/src/components/PublishModal.tsx
+++ b/src/components/PublishModal.tsx
@@ -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[]),