Use theme tokens for spacing and sizing and update PublishModal

src/components/MainPage.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useCallback } from "react";
-import { Typography, Space, Card, Button } from "antd";
+import { Typography, Space, Card, Button, theme } from "antd";
 import { CloudUploadOutlined } from "@ant-design/icons";
 import { ConfigSelector } from "./ConfigSelector";
 import { VersionTable } from "./VersionTable";
@@ -16,6 +16,7 @@ interface MainPageProps {
 }
 
 export function MainPage({ initialConfigs }: MainPageProps) {
+  const { token } = theme.useToken();
   const [configs, setConfigs] =
     useState<{ name: string; file: string }[]>(initialConfigs);
   const [selectedConfigFile, setSelectedConfigFile] = useState<string | null>(
@@ -67,11 +68,11 @@ export function MainPage({ initialConfigs }: MainPageProps) {
       style={{
         maxWidth: 900,
         margin: "40px auto",
-        padding: "0 24px",
+        padding: `0 ${token.paddingLG}px`,
       }}
     >
       {/* Page header */}
-      <Title level={2} style={{ marginBottom: 24 }}>
+      <Title level={2} style={{ marginBottom: token.marginLG }}>
         Mod Releaser
       </Title>
 
@@ -99,7 +100,7 @@ export function MainPage({ initialConfigs }: MainPageProps) {
               style={{
                 display: "flex",
                 justifyContent: "flex-end",
-                marginTop: 24,
+                marginTop: token.marginLG,
               }}
             >
               <Button

src/components/PublishModal.tsx

@@ -14,6 +14,7 @@ import {
   Progress,
   Typography,
   Empty,
+  theme,
 } from "antd";
 import { ReloadOutlined } from "@ant-design/icons";
 import type { BaseVersion, Config, UploadReleaseType } from "@/types";
@@ -68,6 +69,7 @@ export function PublishModal({
   project,
   onClose,
 }: PublishModalProps) {
+  const { token } = theme.useToken();
   const [currentStep, setCurrentStep] = useState(0);
 
   // Version selection
@@ -81,14 +83,19 @@ export function PublishModal({
     "release",
   );
 
-  // Progress
+  // Progress & result
   const [publishing, setPublishing] = useState(false);
+  const [publishDone, setPublishDone] = useState(false);
   const [progress, setProgress] = useState<
     Record<typeof platforms[number], { done: number; total: number }>
   >({
     modrinth: { done: 0, total: 0 },
-    curseforge: { done: 0, total: 0 }
+    curseforge: { done: 0, total: 0 },
   });
+  const [publishResult, setPublishResult] = useState<{
+    success: number;
+    failed: number;
+  } | null>(null);
 
   // Platform existing versions — loaded when modal opens
   const [loadingExisting, setLoadingExisting] = useState(false);
@@ -133,7 +140,7 @@ export function PublishModal({
       }
       setSelectedVersions(preselected);
     }
-    setCurrentStep((prev) => Math.min(prev + 1, 1));
+    setCurrentStep((prev) => Math.min(prev + 1, 2));
   }, [currentStep, publishVersions]);
 
   const handlePrev = useCallback(() => {
@@ -142,7 +149,12 @@ export function PublishModal({
 
   const handleConfirmPublish = useCallback(async () => {
     setPublishing(true);
-    // TODO: Call tRPC mutation to publish
+    setPublishDone(false);
+    setPublishResult(null);
+    setCurrentStep(2);
+    // TODO: Call tRPC mutation to publish, update progress & result
+    setPublishResult({ success: 0, failed: 0 });
+    setPublishDone(true);
     setPublishing(false);
   }, []);
 
@@ -152,6 +164,8 @@ export function PublishModal({
     setSelectedVersions(new Set());
     setChangelog("");
     setVersionType("release");
+    setPublishResult(null);
+    setPublishDone(false);
     onClose();
   }, [publishing, onClose]);
 
@@ -233,7 +247,7 @@ export function PublishModal({
             display: "flex",
             justifyContent: "space-between",
             alignItems: "center",
-            marginBottom: 16,
+            marginBottom: token.margin,
           }}
         >
           <Text strong>选择要发布的版本</Text>
@@ -250,9 +264,9 @@ export function PublishModal({
         {loadingExisting ? (
           <div style={{ textAlign: "center", padding: 40 }}>加载中…</div>
         ) : (
-          <Row gutter={16}>
+          <Row gutter={token.margin}>
             <Col span={12}>
-              <Text strong style={{ display: "block", marginBottom: 8 }}>
+              <Text strong style={{ display: "block", marginBottom: token.marginXS }}>
                 Modrinth
               </Text>
               {publishVersions.length > 0 ? (
@@ -268,7 +282,7 @@ export function PublishModal({
               )}
             </Col>
             <Col span={12}>
-              <Text strong style={{ display: "block", marginBottom: 8 }}>
+              <Text strong style={{ display: "block", marginBottom: token.marginXS }}>
                 CurseForge
               </Text>
               {publishVersions.length > 0 ? (
@@ -292,6 +306,49 @@ export function PublishModal({
   // --------------- Render: Step 2 — Publish Settings ---------------
 
   const renderStep2 = () => {
+    return (
+      <div>
+        {/* Changelog */}
+        <div style={{ marginBottom: token.marginLG }}>
+          <Text strong style={{ display: "block", marginBottom: token.marginSM }}>
+            Changelog (Markdown)
+          </Text>
+          {/* TODO: Replace with @uiw/react-md-editor */}
+          <textarea
+            style={{
+              width: "100%",
+              minHeight: 160,
+              border: `1px solid ${token.colorBorder}`,
+              borderRadius: token.borderRadius,
+              padding: token.paddingSM,
+              fontFamily: token.fontFamilyCode ?? "monospace",
+              fontSize: token.fontSizeSM,
+            }}
+            placeholder="输入 Markdown 格式的更新日志…"
+            value={changelog}
+            onChange={(e) => setChangelog(e.target.value)}
+          />
+        </div>
+
+        {/* Version type */}
+        <div>
+          <Text strong style={{ display: "block", marginBottom: token.marginSM }}>
+            版本类型
+          </Text>
+          <Select
+            value={versionType}
+            onChange={(v) => setVersionType(v)}
+            style={{ width: 160 }}
+            options={RELEASE_TYPES}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  // --------------- Render: Step 3 — Progress & Result ---------------
+
+  const renderStep3 = () => {
     const hasModrinth = publishVersions.some(
       (v) =>
         !v.existsModrinth &&
@@ -305,50 +362,15 @@ export function PublishModal({
 
     return (
       <div>
-        {/* Changelog */}
+        {/* Progress bars */}
-        <div style={{ marginBottom: 24 }}>
+        <div style={{ marginBottom: token.marginLG }}>
-          <Text strong style={{ display: "block", marginBottom: 8 }}>
-            Changelog (Markdown)
-          </Text>
-          {/* TODO: Replace with @uiw/react-md-editor */}
-          <textarea
-            style={{
-              width: "100%",
-              minHeight: 160,
-              border: "1px solid #d9d9d9",
-              borderRadius: 6,
-              padding: 8,
-              fontFamily: "monospace",
-              fontSize: 13,
-            }}
-            placeholder="输入 Markdown 格式的更新日志…"
-            value={changelog}
-            onChange={(e) => setChangelog(e.target.value)}
-          />
-        </div>
-
-        {/* Version type */}
-        <div style={{ marginBottom: 24 }}>
-          <Text strong style={{ display: "block", marginBottom: 8 }}>
-            版本类型
-          </Text>
-          <Select
-            value={versionType}
-            onChange={(v) => setVersionType(v)}
-            style={{ width: 160 }}
-            options={RELEASE_TYPES}
-          />
-        </div>
-
-        {/* Publishing progress */}
-        {publishing && (
-          <div style={{ marginBottom: 24 }}>
           {hasModrinth && (
-              <div style={{ marginBottom: 12 }}>
+            <div style={{ marginBottom: token.marginSM }}>
               <Text>Modrinth: </Text>
               <Progress
                 percent={Math.round(
-                    (progress.modrinth.done / Math.max(progress.modrinth.total, 1)) *
+                  (progress.modrinth.done /
+                    Math.max(progress.modrinth.total, 1)) *
                     100,
                 )}
                 format={() =>
@@ -375,6 +397,24 @@ export function PublishModal({
             </div>
           )}
         </div>
+
+        {/* Result */}
+        {publishDone && publishResult && (
+          <div
+            style={{
+              background: token.colorSuccessBg,
+              border: `1px solid ${token.colorSuccessBorder}`,
+              borderRadius: token.borderRadius,
+              padding: token.padding,
+            }}
+          >
+            <Text strong>发布结果</Text>
+            <div style={{ marginTop: token.marginSM }}>
+              <Text>
+                成功 {publishResult.success} 个，失败 {publishResult.failed} 个
+              </Text>
+            </div>
+          </div>
         )}
       </div>
     );
@@ -392,17 +432,21 @@ export function PublishModal({
       footer={
         publishing ? null : (
           <Space>
-            {currentStep > 0 && (
+            {currentStep > 0 && currentStep < 2 && (
               <Button onClick={handlePrev}>上一步</Button>
             )}
-            {currentStep < 1 ? (
+            {currentStep === 0 ? (
               <Button type="primary" onClick={handleNext}>
                 下一步
               </Button>
-            ) : (
+            ) : currentStep === 1 ? (
               <Button type="primary" onClick={handleConfirmPublish}>
                 确认发布
               </Button>
+            ) : (
+              <Button type="primary" onClick={handleClose}>
+                关闭
+              </Button>
             )}
           </Space>
         )
@@ -415,10 +459,15 @@ export function PublishModal({
         items={[
           { title: "版本选择" },
           { title: "发布设置" },
+          { title: "发布进度" },
         ]}
       />
 
-      {currentStep === 0 ? renderStep1() : renderStep2()}
+      {currentStep === 0
+        ? renderStep1()
+        : currentStep === 1
+          ? renderStep2()
+          : renderStep3()}
     </Modal>
   );
 }

src/components/VersionTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState, useMemo, useCallback } from "react";
-import { Table, Empty, Tag, Typography, Select, Flex } from "antd";
+import { Table, Empty, Tag, Typography, Select, Flex, theme } from "antd";
 import type { ParsedProject } from "@/services/project";
 import { computeVersionRanges, collectAutoRange, type McVersionEntry } from "@/lib/utils/mcVersion";
 import { getMcVersionUnion } from "@/services/meta";
@@ -24,6 +24,7 @@ export function VersionTable({
   loading,
   onLoadingChange,
 }: VersionTableProps) {
+  const { token } = theme.useToken();
   // ── MC version union from both platforms ──
   const [allMcVersions, setAllMcVersions] = useState<string[]>([]);
 
@@ -164,7 +165,7 @@ export function VersionTable({
               <Tag color="blue">{entry.wildcard}</Tag>
               <Typography.Text
                 type="secondary"
-                style={{ fontSize: 12, whiteSpace: "nowrap" }}
+                style={{ fontSize: token.fontSizeSM, whiteSpace: "nowrap" }}
               >
                 截止
               </Typography.Text>