diff --git a/apps/web/src/pages/duplication/DuplicationResults.tsx b/apps/web/src/pages/duplication/DuplicationResults.tsx
index e31d072de..daf252a06 100644
--- a/apps/web/src/pages/duplication/DuplicationResults.tsx
+++ b/apps/web/src/pages/duplication/DuplicationResults.tsx
@@ -13,6 +13,7 @@ import {
type DuplicationStatus,
} from "@/api/duplication";
import "./duplication.css";
+import PageHead from "@/components/layout/PageHead";
/** 风险等级分类 */
type RiskFilter = "all" | "high" | "medium" | "low";
@@ -131,10 +132,10 @@ const DuplicationResults: React.FC = () => {
)}
- {/* 页头 */}
-
{/* 左侧：上传区域 */}
diff --git a/apps/web/src/pages/profile/Settings.tsx b/apps/web/src/pages/profile/Settings.tsx
index e0d27f637..3cfcdc275 100644
--- a/apps/web/src/pages/profile/Settings.tsx
+++ b/apps/web/src/pages/profile/Settings.tsx
@@ -1,61 +1,83 @@
/**
* 个人设置页面
+ * P1-2: 添加 PageHead
+ * P1-3: antd Form/Input/Button/Alert → 自定义 UI 组件
*/
-import React from "react";
-import { Form, Input, Button, Alert } from "antd";
+import React, { useState } from "react";
+import { Button, Input, Modal } from "@/components/ui";
import { useAuthStore } from "@/store/authStore";
+import PageHead from "@/components/layout/PageHead";
import "./ProfileSettings.css";
const Settings: React.FC = () => {
const user = useAuthStore((state) => state.user);
- const [form] = Form.useForm();
+ const [displayName, setDisplayName] = useState(user?.display_name || "");
+ const [saving, setSaving] = useState(false);
- const onFinish = () => undefined;
+ const handleSave = () => {
+ Modal.info({
+ title: "提示",
+ content: "个人资料修改接口暂未开放，保存功能即将上线。",
+ });
+ };
return (
);
};
export default Settings;
-
export const Component = Settings;
diff --git a/apps/web/src/pages/subscription/Billing.css b/apps/web/src/pages/subscription/Billing.css
index 6d62e06bd..e478c1d83 100644
--- a/apps/web/src/pages/subscription/Billing.css
+++ b/apps/web/src/pages/subscription/Billing.css
@@ -1,128 +1,198 @@
-/* 账单管理页面 */
+/**
+ * 账单管理页面样式
+ * P1-3: 全部使用 CSS 变量 + 新增 ToggleSwitch/Spinner 样式
+ */
+
.xx-billing-page {
- max-width: 960px;
+ max-width: 800px;
margin: 0 auto;
padding: 40px 24px;
}
/* 订阅概览 */
.xx-billing-overview {
- background: rgba(255, 255, 255, 0.94);
- border: 1px solid rgba(226, 232, 240, 0.95);
- border-radius: 20px;
+ background: var(--bg-elevated);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-xl);
padding: 32px;
- margin-bottom: 40px;
- box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
+ margin-bottom: 24px;
+ box-shadow: var(--shadow-sm);
}
.xx-billing-overview h2 {
- font-size: 24px;
- font-weight: 800;
- color: var(--slate, #0f172a);
- margin: 0 0 24px;
+ font-size: 20px;
+ font-weight: 700;
+ color: var(--text-primary);
+ margin: 0 0 20px;
}
.xx-overview-details {
display: grid;
- grid-template-columns: repeat(4, 1fr);
- gap: 20px;
- margin-bottom: 24px;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 24px;
}
-@media (max-width: 768px) {
+@media (max-width: 640px) {
.xx-overview-details {
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: 1fr;
}
}
.xx-overview-item {
display: flex;
flex-direction: column;
- gap: 6px;
+ gap: 4px;
}
.xx-label {
font-size: 13px;
- color: var(--muted, #64748b);
+ color: var(--text-secondary);
font-weight: 500;
}
.xx-value {
font-size: 16px;
- font-weight: 700;
- color: var(--slate, #0f172a);
+ color: var(--text-primary);
+ font-weight: 600;
}
-/* 账单记录 */
-.xx-billing-history {
- background: rgba(255, 255, 255, 0.94);
- border: 1px solid rgba(226, 232, 240, 0.95);
- border-radius: 20px;
+/* 自动续费 */
+.xx-billing-auto-renew {
+ background: var(--bg-elevated);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-xl);
padding: 32px;
- box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
+ box-shadow: var(--shadow-sm);
}
-.xx-billing-history h2 {
- font-size: 24px;
- font-weight: 800;
- color: var(--slate, #0f172a);
- margin: 0 0 24px;
-}
-
-/* 表格样式 */
-.xx-billing-table {
- width: 100%;
-}
-
-.xx-table-header {
- display: grid;
- grid-template-columns: 1.2fr 1fr 0.8fr 1fr 0.8fr 1fr;
- gap: 12px;
- padding: 12px 16px;
- background: rgba(241, 245, 249, 0.8);
- border-radius: 10px;
- margin-bottom: 8px;
- font-size: 13px;
+.xx-billing-auto-renew h2 {
+ font-size: 20px;
font-weight: 700;
- color: var(--muted, #64748b);
+ color: var(--text-primary);
+ margin: 0 0 20px;
}
-.xx-table-row {
- display: grid;
- grid-template-columns: 1.2fr 1fr 0.8fr 1fr 0.8fr 1fr;
- gap: 12px;
- padding: 14px 16px;
+.xx-auto-renew-row {
+ display: flex;
align-items: center;
- border-bottom: 1px solid rgba(226, 232, 240, 0.6);
- font-size: 14px;
- color: var(--slate, #0f172a);
- transition: background 0.15s;
+ justify-content: space-between;
+ gap: 24px;
}
-.xx-table-row:hover {
- background: rgba(241, 245, 249, 0.4);
+.xx-auto-renew-info {
+ flex: 1;
}
-.xx-table-row:last-child {
- border-bottom: none;
+.xx-auto-renew-title {
+ font-size: 15px;
+ font-weight: 600;
+ color: var(--text-primary);
+ margin: 0 0 4px;
}
-.xx-amount {
- font-weight: 700;
- color: var(--indigo, #4f46e5);
+.xx-auto-renew-desc {
+ font-size: 13px;
+ color: var(--text-secondary);
+ margin: 0;
+ line-height: 1.5;
}
-@media (max-width: 768px) {
- .xx-table-header,
- .xx-table-row {
- grid-template-columns: 1fr 1fr 1fr;
- font-size: 12px;
- }
-
- .xx-table-header span:nth-child(4),
- .xx-table-header span:nth-child(6),
- .xx-table-row span:nth-child(4),
- .xx-table-row span:nth-child(6) {
- display: none;
- }
+/* ── ToggleSwitch 组件 ───────────────────────────────── */
+.xx-toggle-switch {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ width: 44px;
+ height: 24px;
+ padding: 0;
+ border: none;
+ border-radius: 12px;
+ background: var(--color-gray-300);
+ cursor: pointer;
+ transition: background 0.2s ease;
+ flex-shrink: 0;
+}
+
+.xx-toggle-switch.checked {
+ background: var(--primary-color);
+}
+
+.xx-toggle-switch.loading {
+ opacity: 0.65;
+ cursor: not-allowed;
+}
+
+.xx-toggle-switch-handle {
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background: var(--bg-primary);
+ box-shadow: var(--shadow-xs);
+ transition: transform 0.2s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.xx-toggle-switch.checked .xx-toggle-switch-handle {
+ transform: translateX(20px);
+}
+
+.xx-toggle-switch-inner {
+ position: absolute;
+ width: 100%;
+ text-align: center;
+ font-size: 0;
+ /* 文字不显示，仅保留 aria 语义 */
+}
+
+.xx-toggle-switch-spinner {
+ width: 12px;
+ height: 12px;
+ border: 2px solid var(--primary-color);
+ border-top-color: transparent;
+ border-radius: 50%;
+ animation: xx-toggle-spin 0.6s linear infinite;
+}
+
+@keyframes xx-toggle-spin {
+ to { transform: rotate(360deg); }
+}
+
+/* ── Spinner 组件 ───────────────────────────────── */
+.xx-spinner {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ padding: 40px 0;
+}
+
+.xx-spinner-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: var(--primary-color);
+ animation: xx-spinner-bounce 1.2s ease-in-out infinite;
+}
+
+.xx-spinner-dot:nth-child(2) {
+ animation-delay: 0.15s;
+}
+
+.xx-spinner-dot:nth-child(3) {
+ animation-delay: 0.3s;
+}
+
+.xx-spinner--small .xx-spinner-dot {
+ width: 6px;
+ height: 6px;
+}
+
+@keyframes xx-spinner-bounce {
+ 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+ 40% { transform: scale(1); opacity: 1; }
}
diff --git a/apps/web/src/pages/subscription/Billing.tsx b/apps/web/src/pages/subscription/Billing.tsx
index 22a769b48..68bfb7b50 100644
--- a/apps/web/src/pages/subscription/Billing.tsx
+++ b/apps/web/src/pages/subscription/Billing.tsx
@@ -1,11 +1,13 @@
/**
* 账单管理页面
* 展示当前订阅信息 + 自动续费开关
+ * P1-3: antd Switch→自定义ToggleSwitch, antd Spin→自定义Spinner
*/
import React, { useState, useEffect } from "react";
-import { Switch, message, Spin } from "antd";
+import { message } from "antd";
import { getCurrentSubscription, toggleAutoRenew } from "@/api/subscription";
import type { SubscriptionInfo } from "@/api/subscription";
+import PageHead from "@/components/layout/PageHead";
import "./Billing.css";
const formatDate = (iso: string): string => {
@@ -17,6 +19,40 @@ const formatDate = (iso: string): string => {
});
};
+/** 自定义 ToggleSwitch 组件 */
+const ToggleSwitch: React.FC<{
+ checked: boolean;
+ onChange: (checked: boolean) => void;
+ loading?: boolean;
+ checkedChildren?: string;
+ unCheckedChildren?: string;
+}> = ({ checked, onChange, loading, checkedChildren, unCheckedChildren }) => (
+
+);
+
+/** 自定义 Spinner 组件 */
+const Spinner: React.FC<{ size?: "small" | "large" }> = ({ size = "large" }) => (
+
+);
+
const Billing: React.FC = () => {
const [subscription, setSubscription] = useState
(
null,
@@ -62,13 +98,15 @@ const Billing: React.FC = () => {
if (loading) {
return (
-
+
);
}
return (
+
+
{subscription && (
<>
{/* 当前订阅概览 */}
@@ -104,7 +142,7 @@ const Billing: React.FC = () => {
开启后，将在每个计费周期结束时自动扣费续期，避免服务中断。
+
+
+
+);
+
+/** 自定义 Spinner 组件 */
+const Spinner: React.FC<{ size?: "small" | "large" }> = ({ size = "large" }) => (
+
+);
+
const UpgradeSubscription: React.FC = () => {
const navigate = useNavigate();
const [subscription, setSubscription] = useState(
@@ -113,7 +155,6 @@ const UpgradeSubscription: React.FC = () => {
title: "确认取消订阅",
content: "取消后，当前周期结束前仍可正常使用，到期后降级为体验版。",
okText: "确认取消",
- okType: "danger",
cancelText: "再想想",
onOk: async () => {
try {
@@ -131,7 +172,7 @@ const UpgradeSubscription: React.FC = () => {
if (loading) {
return (
-
+
);
}
@@ -140,10 +181,7 @@ const UpgradeSubscription: React.FC = () => {
return (
-
-
变更订阅方案
-
当前套餐：{PLANS_META[currentPlan]?.name ?? "体验版"}
-
+
{(["standard", "pro", "enterprise"] as PlanType[]).map((planId) => {
@@ -158,21 +196,12 @@ const UpgradeSubscription: React.FC = () => {
{isCurrent &&
当前
}
{plan.name}
- setBillingCycle(e.target.value)}
- size="small"
- >
- ¥{plan.price}/月
-
- ¥{plan.yearlyPrice}/年
- {plan.yearlyPrice > 0 && plan.price > 0 && (
-
- 省 ¥{plan.price * 12 - plan.yearlyPrice}
-
- )}
-
-
+ onChange={setBillingCycle}
+ monthlyPrice={plan.price}
+ yearlyPrice={plan.yearlyPrice}
+ />
);
@@ -181,13 +210,12 @@ const UpgradeSubscription: React.FC = () => {
{subscription && subscription.status === "active" && (
@@ -196,7 +224,8 @@ const UpgradeSubscription: React.FC = () => {
自动续费：{subscription.auto_renew ? "已开启" : "已关闭"}