Merge branch 'master' into feat/home-responsive-polish-and-ui-refinements

src/App.tsx

@@ -8,6 +8,7 @@ import ToastContainer from "./components/toast/ToastContainer";
 import { toast } from "./components/toast/toastStore";
 import { aiGenerationClient } from "./api/aiGenerationClient";
 import { keyServerClient } from "./api/keyServerClient";
+import { setUserMaxConcurrency } from "./api/generationConcurrency";
 import { notificationClient } from "./api/notificationClient";
 import {
   SERVER_SESSION_REPLACED_EVENT,
@@ -32,6 +33,7 @@ const CharacterMixPage = lazy(() => import("./features/character-mix/CharacterMi
 const CommunityPage = lazy(() => import("./features/community/CommunityPage"));
 const CommunityCaseAddPage = lazy(() => import("./features/community-review/CommunityCaseAddPage"));
 const CommunityReviewPage = lazy(() => import("./features/community-review/CommunityReviewPage"));
+const BetaApplicationsPage = lazy(() => import("./features/beta-applications/BetaApplicationsPage"));
 const AvatarConsolePage = lazy(() => import("./features/digital-human/AvatarConsolePage"));
 const DigitalHumanPage = lazy(() => import("./features/digital-human/DigitalHumanPage"));
 const DialogGeneratorPage = lazy(() => import("./features/dialog-generator/DialogGeneratorPage"));
@@ -108,6 +110,7 @@ const VIEW_KEYS = new Set<WebViewKey>([
   "more",
   "communityReview",
   "communityCaseAdd",
+  "betaApplications",
   "report",
   "providerHealth",
   "userAgreement",
@@ -123,6 +126,7 @@ const LEGACY_PAGE_STYLE_VIEWS = new Set<WebViewKey>([
   "community",
   "communityReview",
   "communityCaseAdd",
+  "betaApplications",
   "assets",
   "ecommerce",
   "ecommerceHub",
@@ -156,6 +160,8 @@ function normalizeViewKey(rawView: string): WebViewKey {
           ? "communityReview"
           : rawView === "community-case-add"
             ? "communityCaseAdd"
+            : rawView === "beta-applications" || rawView === "beta-application-review"
+              ? "betaApplications"
         : rawView;
   return VIEW_KEYS.has(normalized as WebViewKey) ? (normalized as WebViewKey) : "not-found";
 }
@@ -198,7 +204,7 @@ function createWorkflowFromResult(payload: WorkbenchResultActionPayload): WebCan
     description: payload.prompt || "从生成结果进入画布继续创作。",
     source: "blank",
     settings: {
-      model: payload.resultType === "video" ? "Seedance 2.0" : "Nano Banana Pro",
+      model: payload.resultType === "video" ? "Seedance 2.0" : "omni-水果 Pro",
       ratio: payload.resultType === "video" ? "16:9" : "1:1",
       duration: payload.resultType === "video" ? "6s" : "0s",
       resolution: payload.resultType === "video" ? "720p" : "2K",
@@ -369,6 +375,7 @@ function App() {
 
   const [ecommerceEverMounted, setEcommerceEverMounted] = useState(false);
   const [workbenchResetToken, setWorkbenchResetToken] = useState(0);
+  const [onboardingActive, setOnboardingActive] = useState(false);
   const isEcommerceActive = activeView === "ecommerce" || activeView === "ecommerceHub";
   useEffect(() => {
     if (isEcommerceActive && !ecommerceEverMounted) setEcommerceEverMounted(true);
@@ -467,9 +474,21 @@ function App() {
     }
   }, [session, setView, setWorkspaceExpanded]);
 
+  const handleStartOnboarding = useCallback(() => {
+    setOnboardingActive(true);
+    try { window.localStorage.setItem("omniai:onboarding", "1"); } catch {}
+    handleSetView("workbench");
+  }, [handleSetView]);
+
+  const handleEndOnboarding = useCallback(() => {
+    setOnboardingActive(false);
+    try { window.localStorage.removeItem("omniai:onboarding"); } catch {}
+  }, []);
+
   const clearAuthenticatedState = useCallback((options?: { resetView?: boolean }) => {
     clearAllUserStorage();
     clearSessionState();
+    setUserMaxConcurrency(null);
     setProjects([]);
     setProjectsLoaded(true);
     setUsage(emptyUsageSummary);
@@ -578,6 +597,7 @@ function App() {
       const nextSession = await keyServerClient.getCurrentSession();
       if (cancelled) return;
       setSession(nextSession);
+      setUserMaxConcurrency(nextSession?.user?.maxConcurrency);
       await hydrateAccountData(nextSession);
     };
 
@@ -610,6 +630,7 @@ function App() {
         if (cancelled) return;
         if (nextSession) {
           setSession(nextSession);
+          setUserMaxConcurrency(nextSession?.user?.maxConcurrency);
         } else {
           clearAuthenticatedState({ resetView: true });
         }
@@ -947,6 +968,7 @@ function App() {
     async (nextSession: WebUserSession) => {
       hideSessionReplaced();
       setSession(nextSession);
+      setUserMaxConcurrency(nextSession?.user?.maxConcurrency);
       await hydrateAccountData(nextSession);
 
       if (nextSession.user.email && !nextSession.user.emailVerified) {
@@ -1010,7 +1032,7 @@ function App() {
               previewUrl: payload.resultUrl,
               params: payload.resultType === "video"
                 ? { model: "Kling V3 Omni", aspectRatio: "16:9", resolution: "720p", duration: "6s", videoMode: "text-to-video" }
-                : { model: "Nano Banana Pro", aspectRatio: "1:1", imageSize: "2K" },
+                : { model: "omni-水果 Pro", aspectRatio: "1:1", imageSize: "2K" },
               assetRef: payload.resultOssKey ? { url: payload.resultUrl, ossKey: payload.resultOssKey, mediaType: payload.resultType === "video" ? "video/mp4" : "image/png", sourceTaskId: payload.taskId } : undefined,
             },
           ];
@@ -1302,12 +1324,16 @@ function App() {
             onOpenReview={() => handleSetView("communityReview")}
           />
         );
+      case "betaApplications":
+        return <BetaApplicationsPage session={session} onOpenLogin={handleOpenLogin} />;
       case "workbench":
         return (
           <WorkbenchPage
             key={`workbench-${workbenchResetToken}`}
             isAuthenticated={Boolean(session)}
             session={session}
+            onboarding={onboardingActive}
+            onEndOnboarding={handleEndOnboarding}
             onRequireLogin={handleRequireTaskLogin}
             onOpenResultInCanvas={handleOpenResultInCanvas}
             onRefreshUsage={refreshUsage}
@@ -1318,6 +1344,7 @@ function App() {
         return (
           <HomePage
             onOpenGenerate={() => handleSetView("workbench")}
+            onStartOnboarding={handleStartOnboarding}
             onOpenCanvas={() => handleSetView("canvas")}
             onOpenEcommerce={() => handleSetView("ecommerce")}
             onOpenScriptReview={() => handleSetView("scriptTokens")}

src/api/betaApplicationClient.ts

@@ -0,0 +1,139 @@
+import { serverRequest } from "./serverConnection";
+
+export interface BetaApplicationInput {
+  name: string;
+  email: string;
+  phone: string;
+  wechat: string;
+  industry: string;
+  company: string;
+  city: string;
+  aiTools: string;
+  aiDuration: string;
+  aiTrack: string;
+  aiDirection: string[];
+  weeklyUsage: string;
+  feedbackWilling: string;
+  wantFeature: string[];
+  selfStatement: string;
+  signature: string;
+  applicationDate: string;
+  agreeRules: boolean;
+}
+
+export type BetaApplicationStatus = "pending" | "approved" | "rejected";
+
+export interface BetaApplicationItem extends BetaApplicationInput {
+  id: number;
+  userId: number | null;
+  username: string | null;
+  status: BetaApplicationStatus;
+  inviteCode: string | null;
+  reviewNote: string | null;
+  reviewedBy: number | null;
+  reviewerUsername: string | null;
+  reviewedAt: string | null;
+  ipAddress: string | null;
+  userAgent: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface BetaApplicationSubmitResult {
+  id: number;
+  status: BetaApplicationStatus;
+  createdAt: string;
+}
+
+function readString(value: unknown): string {
+  return typeof value === "string" ? value : "";
+}
+
+function readNullableString(value: unknown): string | null {
+  return typeof value === "string" && value ? value : null;
+}
+
+function readNumberOrNull(value: unknown): number | null {
+  if (value === null || value === undefined || value === "") return null;
+  const next = Number(value);
+  return Number.isFinite(next) ? next : null;
+}
+
+function readStringArray(value: unknown): string[] {
+  return Array.isArray(value) ? value.filter((item): item is string => typeof item === "string") : [];
+}
+
+function normalizeStatus(value: unknown): BetaApplicationStatus {
+  return value === "approved" || value === "rejected" ? value : "pending";
+}
+
+function normalizeApplication(raw: unknown): BetaApplicationItem {
+  const item = raw && typeof raw === "object" && !Array.isArray(raw) ? (raw as Record<string, unknown>) : {};
+  return {
+    id: Number(item.id) || 0,
+    userId: readNumberOrNull(item.userId),
+    username: readNullableString(item.username),
+    name: readString(item.name),
+    email: readString(item.email),
+    phone: readString(item.phone),
+    wechat: readString(item.wechat),
+    industry: readString(item.industry),
+    company: readString(item.company),
+    city: readString(item.city),
+    aiTools: readString(item.aiTools),
+    aiDuration: readString(item.aiDuration),
+    aiTrack: readString(item.aiTrack),
+    aiDirection: readStringArray(item.aiDirection),
+    weeklyUsage: readString(item.weeklyUsage),
+    feedbackWilling: readString(item.feedbackWilling),
+    wantFeature: readStringArray(item.wantFeature),
+    selfStatement: readString(item.selfStatement),
+    signature: readString(item.signature),
+    applicationDate: readString(item.applicationDate),
+    agreeRules: item.agreeRules === true,
+    status: normalizeStatus(item.status),
+    inviteCode: readNullableString(item.inviteCode),
+    reviewNote: readNullableString(item.reviewNote),
+    reviewedBy: readNumberOrNull(item.reviewedBy),
+    reviewerUsername: readNullableString(item.reviewerUsername),
+    reviewedAt: readNullableString(item.reviewedAt),
+    ipAddress: readNullableString(item.ipAddress),
+    userAgent: readNullableString(item.userAgent),
+    createdAt: readString(item.createdAt),
+    updatedAt: readString(item.updatedAt),
+  };
+}
+
+export const betaApplicationClient = {
+  async submit(input: BetaApplicationInput): Promise<BetaApplicationSubmitResult> {
+    const payload = await serverRequest<{ application: BetaApplicationSubmitResult }>("beta-applications", {
+      method: "POST",
+      body: input,
+      maxRetries: 0,
+      fallbackMessage: "提交内测申请失败",
+    });
+    return payload.application;
+  },
+
+  async listAdminApplications(status?: BetaApplicationStatus | ""): Promise<BetaApplicationItem[]> {
+    const query = status ? `?status=${encodeURIComponent(status)}` : "";
+    const payload = await serverRequest<{ applications?: unknown[] }>(`admin/beta-applications${query}`, {
+      fallbackMessage: "读取内测申请失败",
+    });
+    return Array.isArray(payload.applications) ? payload.applications.map(normalizeApplication) : [];
+  },
+
+  async reviewApplication(
+    id: number,
+    action: "approve" | "reject",
+    reviewNote?: string,
+  ): Promise<BetaApplicationItem> {
+    const payload = await serverRequest<{ application: unknown }>(`admin/beta-applications/${id}`, {
+      method: "PATCH",
+      body: { action, reviewNote },
+      maxRetries: 0,
+      fallbackMessage: "审核内测申请失败",
+    });
+    return normalizeApplication(payload.application);
+  },
+};

src/api/generationConcurrency.ts

@@ -7,10 +7,20 @@ interface GenerationSlot {
   createdAt: number;
 }
 
-const MAX_ACTIVE_GENERATION_TASKS = 3;
+const DEFAULT_MAX_ACTIVE_GENERATION_TASKS = 3;
 const STALE_SLOT_MS = 6 * 60 * 60 * 1000;
 const activeSlots = new Map<string, GenerationSlot>();
 
+let userMaxConcurrency: number | null = null;
+
+export function setUserMaxConcurrency(limit: number | null | undefined): void {
+  userMaxConcurrency = typeof limit === "number" && limit > 0 ? limit : null;
+}
+
+function getEffectiveLimit(): number {
+  return userMaxConcurrency ?? DEFAULT_MAX_ACTIVE_GENERATION_TASKS;
+}
+
 export function getGenerationUserKey(userId?: string | number | null): string {
   return userId === undefined || userId === null || userId === "" ? "anonymous" : String(userId);
 }
@@ -39,8 +49,9 @@ export function claimGenerationSlot(input: {
 }): () => void {
   pruneStaleSlots();
   const activeCount = getActiveGenerationTaskCount(input.userKey);
-  if (activeCount >= MAX_ACTIVE_GENERATION_TASKS) {
+  const effectiveLimit = getEffectiveLimit();
-    throw new Error("当前账号同时最多生成 3 个图片/视频任务，请等待已有任务完成后再提交。");
+  if (activeCount >= effectiveLimit) {
+    throw new Error(`当前账号同时最多生成 ${effectiveLimit} 个图片/视频任务，请等待已有任务完成后再提交。`);
   }
 
   const id = input.id || `generation-slot-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;

src/api/keyServerClient.ts

@@ -434,6 +434,7 @@ function normalizeUser(raw: unknown): WebUserSession["user"] | null {
         candidate.enterpriseBalance ??
         candidate.enterprise_balance,
     ),
+    maxConcurrency: toNumber(candidate.maxConcurrency ?? candidate.max_concurrency),
     activePackages: toActivePackages(candidate.activePackages ?? candidate.active_packages),
   };
 }
@@ -480,7 +481,7 @@ function migrateLegacyWorkflowData(old: Record<string, unknown>, wrapper: Record
     description: String(wrapper.description || ""),
     source: (wrapper.source as WebCanvasWorkflow["source"]) || "blank",
     settings: {
-      model: String(isRecord(old.settings) ? old.settings.model || "Nano Banana Pro" : "Nano Banana Pro"),
+      model: String(isRecord(old.settings) ? old.settings.model || "omni-水果 Pro" : "omni-水果 Pro"),
       ratio: String(isRecord(old.settings) ? old.settings.ratio || "1:1" : "1:1"),
       duration: String(isRecord(old.settings) ? old.settings.duration || "0s" : "0s"),
       resolution: String(isRecord(old.settings) ? old.settings.resolution || "2K" : "2K"),

src/api/modelCapabilitiesClient.ts

@@ -38,9 +38,14 @@ function normalizeModelOption(raw: unknown): ModelCapabilityOption | null {
   const enabled = raw.enabled === undefined ? status !== "maintenance" && status !== "disabled" : Boolean(raw.enabled);
   if (!enabled) return null;
 
+  const label = toStringValue(raw.label ?? raw.displayName ?? raw.display_name ?? raw.name, value);
+
   return {
     value,
-    label: toStringValue(raw.label ?? raw.displayName ?? raw.display_name ?? raw.name, value),
+    label:
+      value === "wan2.7-image-pro"
+        ? label.replace(/\s*4k\b/i, "").trim() || "wan 2.7 Pro"
+        : label,
     description: toStringValue(raw.description) || undefined,
     badge: toStringValue(raw.badge) || undefined,
     enabled,

src/api/serverConnection.ts

@@ -248,6 +248,17 @@ function isNonAuthErrorCode(code: string | undefined): boolean {
   ].includes(code);
 }
 
+function isAuthFailureResponse(status: number, payload: unknown): boolean {
+  if (status === 401) return true;
+  if (status !== 403) return false;
+
+  const code = getPayloadCode(payload);
+  if (code === "SESSION_REPLACED" || code === "TOKEN_EXPIRED" || code === "ACCOUNT_DISABLED") return true;
+
+  const message = getPayloadMessage(payload) || "";
+  return /账号已禁用|登录已过期|登录状态|session|token|企业信息不存在/i.test(message);
+}
+
 function notifySessionExpired(status: number, response: Response, payload: unknown): void {
   if (status !== 401 && status !== 403) return;
   if (typeof window === "undefined") return;
@@ -263,6 +274,7 @@ function notifySessionExpired(status: number, response: Response, payload: unkno
   // Non-auth 403 errors (enterprise model access, insufficient balance) must
   // not trigger session expiry.
   if (status === 403 && isNonAuthErrorCode(getPayloadCode(payload))) return;
+  if (!isAuthFailureResponse(status, payload)) return;
 
   const now = Date.now();
   if (now - lastSessionExpiredEventAt < 1500) return;

src/api/taskSubscription.ts

@@ -44,7 +44,6 @@ export function waitForTask(
     let settled = false;
     let cleanup: (() => void) | null = null;
     let timeoutId: ReturnType<typeof setTimeout> | null = null;
-    let sseConnected = false;
     let fallbackTimerId: ReturnType<typeof setTimeout> | null = null;
     let lastProgress = 0;
     let lastProgressAt = startedAt;
@@ -83,10 +82,9 @@ export function waitForTask(
     };
 
     cleanup = aiGenerationClient.subscribeTaskStatus(taskId, handleUpdate);
-    sseConnected = true;
 
     fallbackTimerId = setTimeout(() => {
-      if (settled || !sseConnected) return;
+      if (settled) return;
       if (cleanup) cleanup();
       startPolling();
     }, 5000);

src/components/AppShell.tsx

@@ -7,6 +7,7 @@ import { ossAssets } from "../data/ossAssets";
 import { canManageCommunityCases, canReviewCommunity } from "../features/community-review/communityPermissions";
 import type { WebNavItem, WebNotification, WebUsageSummary, WebUserSession, WebViewKey } from "../types";
 import NotificationCenter from "./NotificationCenter";
+import BetaApplicationModal from "./BetaApplicationModal";
 import { AnimatedPanel } from "./AnimatedPanel";
 import AdminMonitor from "./AdminMonitor";
 import CookieConsentBanner from "./CookieConsentBanner";
@@ -63,6 +64,12 @@ function formatBalance(cents: number): string {
   return `${value.toFixed(2)} 积分`;
 }
 
+function canReviewBetaApplications(session: WebUserSession | null): boolean {
+  const role = String(session?.user.role || "").trim().toLowerCase();
+  const username = String(session?.user.username || "").trim().toLowerCase();
+  return role === "admin" || username === "xqy1912";
+}
+
 function AppShell({
   activeView,
   navItems,
@@ -85,6 +92,7 @@ function AppShell({
   const [rechargeOpen, setRechargeOpen] = useState(false);
   const [RechargeModal, setRechargeModal] = useState<RechargeModalComponent | null>(null);
   const [infoOpen, setInfoOpen] = useState(false);
+  const [betaOpen, setBetaOpen] = useState(false);
   const infoRef = useRef<HTMLDivElement>(null);
   const [openSubmenuKey, setOpenSubmenuKey] = useState<WebViewKey | null>(null);
   const [publicConfig, setPublicConfig] = useState<WebPublicConfig>({});
@@ -247,6 +255,7 @@ function AppShell({
   const displayedBalanceLabel = session ? formatBalance(displayedBalanceCents) : "0 积分";
   const showCommunityReview = canReviewCommunity(session);
   const showCommunityCaseAdd = canManageCommunityCases(session);
+  const showBetaApplicationReview = canReviewBetaApplications(session);
 
   return (
     <div
@@ -343,6 +352,15 @@ function AppShell({
               <span className="brand-lockup__name">OmniAI</span>
             </button>
             <div className="web-topbar__actions">
+              <button
+                type="button"
+                className="beta-apply-button"
+                title="内测申请"
+                aria-label="内测申请"
+                onClick={() => setBetaOpen(true)}
+              >
+                内测申请
+              </button>
               {session && (
                 <NotificationCenter
                   items={notifications}
@@ -475,6 +493,19 @@ function AppShell({
                         </button>
                       </>
                     ) : null}
+                    {showBetaApplicationReview ? (
+                      <button
+                        type="button"
+                        className="profile-popover__review-btn"
+                        onClick={() => {
+                          setProfileOpen(false);
+                          onSelectView("betaApplications");
+                        }}
+                      >
+                        <ShellIcon name="check-circle" />
+                        内测申请审核
+                      </button>
+                    ) : null}
                     {showCommunityCaseAdd ? (
                       <>
                         <button
@@ -502,7 +533,7 @@ function AppShell({
       {rechargeOpen && RechargeModal ? (
         <RechargeModal open={rechargeOpen} onClose={() => setRechargeOpen(false)} currentBalance={displayedBalanceCents} />
       ) : null}
-      <CookieConsentBanner />
+      <BetaApplicationModal open={betaOpen} onClose={() => setBetaOpen(false)} />
     </div>
   );
 }

src/components/BetaApplicationModal.tsx

@@ -0,0 +1,349 @@
+import { CloseOutlined, ExperimentOutlined } from "@ant-design/icons";
+import { useState } from "react";
+import { betaApplicationClient } from "../api/betaApplicationClient";
+
+interface BetaApplicationModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+/* ── Form state ── */
+interface BetaFormData {
+  name: string;
+  email: string;
+  phone: string;
+  wechat: string;
+  industry: string;
+  company: string;
+  city: string;
+  aiTools: string;
+  aiDuration: string;
+  aiTrack: string;
+  aiDirection: string[];
+  weeklyUsage: string;
+  feedbackWilling: string;
+  wantFeature: string[];
+  selfStatement: string;
+  signature: string;
+  applicationDate: string;
+  agreeRules: boolean;
+}
+
+const INITIAL_FORM: BetaFormData = {
+  name: "",
+  email: "",
+  phone: "",
+  wechat: "",
+  industry: "",
+  company: "",
+  city: "",
+  aiTools: "",
+  aiDuration: "",
+  aiTrack: "",
+  aiDirection: [],
+  weeklyUsage: "",
+  feedbackWilling: "",
+  wantFeature: [],
+  selfStatement: "",
+  signature: "",
+  applicationDate: "",
+  agreeRules: false,
+};
+
+/* ── Option groups (from the docx) ── */
+const AI_DURATION_OPTIONS = ["1年以内", "1-3年", "3-5年", "5年以上"];
+const AI_TRACK_OPTIONS = ["是，长期承接相关业务", "业余创作", "新手学习"];
+const AI_DIRECTION_OPTIONS = [
+  "AI短剧批量制作", "漫剧剧情生成", "自媒体短视频", "电商图文及视频素材",
+  "MCN商业内容", "企业宣传视频", "个人兴趣创作", "其他",
+];
+const WEEKLY_USAGE_OPTIONS = ["7次及以上", "1-3次", "空闲时间使用"];
+const FEEDBACK_OPTIONS = ["全力配合深度反馈", "简单体验留言", "仅使用不反馈"];
+const WANT_FEATURE_OPTIONS = [
+  "一站式短剧漫剧完整AIGC工作流", "电商素材自动化创作流程",
+  "多模态智能中枢全能创作", "批量自动化创作流程", "全新未公开AI创作玩法",
+];
+
+/* ── Helper: single-select radio group ── */
+function RadioGroup({
+  name, options, value, onChange,
+}: {
+  name: string;
+  options: string[];
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <div className="beta-radio-group">
+      {options.map((opt) => (
+        <label key={opt} className="beta-radio">
+          <input
+            type="radio"
+            name={name}
+            checked={value === opt}
+            onChange={() => onChange(opt)}
+          />
+          <span>{opt}</span>
+        </label>
+      ))}
+    </div>
+  );
+}
+
+/* ── Helper: multi-select checkbox group ── */
+function CheckboxGroup({
+  options, value, onChange,
+}: {
+  options: string[];
+  value: string[];
+  onChange: (v: string[]) => void;
+}) {
+  return (
+    <div className="beta-checkbox-group">
+      {options.map((opt) => (
+        <label key={opt} className="beta-checkbox">
+          <input
+            type="checkbox"
+            checked={value.includes(opt)}
+            onChange={() => {
+              if (value.includes(opt)) {
+                onChange(value.filter((item) => item !== opt));
+              } else {
+                onChange([...value, opt]);
+              }
+            }}
+          />
+          <span>{opt}</span>
+        </label>
+      ))}
+    </div>
+  );
+}
+
+/* ── Helper: text field ── */
+function TextField({
+  label, value, onChange, placeholder,
+}: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+}) {
+  return (
+    <div className="beta-text-field">
+      <span className="beta-text-field__label">{label}</span>
+      <input
+        type="text"
+        className="beta-text-field__input"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder ?? "请填写"}
+      />
+    </div>
+  );
+}
+
+const BetaApplicationModal = ({ open, onClose }: BetaApplicationModalProps) => {
+  const [form, setForm] = useState<BetaFormData>(INITIAL_FORM);
+  const [submitting, setSubmitting] = useState(false);
+  const [message, setMessage] = useState<{ tone: "success" | "error"; text: string } | null>(null);
+
+  const update = <K extends keyof BetaFormData>(key: K, value: BetaFormData[K]) => {
+    setForm((prev) => ({ ...prev, [key]: value }));
+    setMessage(null);
+  };
+
+  const close = () => {
+    if (submitting) return;
+    onClose();
+  };
+
+  const validate = () => {
+    if (!form.name.trim()) return "请填写姓名 / 常用昵称";
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) return "请填写用于接收内测码的有效邮箱";
+    if (!form.phone.trim()) return "请填写联系手机号码";
+    if (!form.wechat.trim()) return "请填写微信账号";
+    if (!form.selfStatement.trim()) return "请填写申请自述";
+    if (!form.signature.trim()) return "请填写申请人确认签字";
+    if (!form.applicationDate.trim()) return "请填写申请日期";
+    if (!form.agreeRules) return "请先阅读并同意内测规则";
+    return null;
+  };
+
+  const submit = async () => {
+    if (submitting) return;
+    const validationError = validate();
+    if (validationError) {
+      setMessage({ tone: "error", text: validationError });
+      return;
+    }
+
+    setSubmitting(true);
+    setMessage(null);
+    try {
+      await betaApplicationClient.submit({
+        ...form,
+        name: form.name.trim(),
+        email: form.email.trim(),
+        phone: form.phone.trim(),
+        wechat: form.wechat.trim(),
+        industry: form.industry.trim(),
+        company: form.company.trim(),
+        city: form.city.trim(),
+        aiTools: form.aiTools.trim(),
+        aiDuration: form.aiDuration.trim(),
+        aiTrack: form.aiTrack.trim(),
+        weeklyUsage: form.weeklyUsage.trim(),
+        feedbackWilling: form.feedbackWilling.trim(),
+        selfStatement: form.selfStatement.trim(),
+        signature: form.signature.trim(),
+        applicationDate: form.applicationDate.trim(),
+      });
+      setForm(INITIAL_FORM);
+      setMessage({ tone: "success", text: "申请已提交，请留意预留邮箱中的审核结果。" });
+    } catch (error) {
+      setMessage({ tone: "error", text: error instanceof Error ? error.message : "提交内测申请失败" });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="beta-application-modal" role="dialog" aria-modal="true" aria-labelledby="beta-modal-title">
+      <button type="button" className="beta-application-modal__backdrop" onClick={close} aria-label="关闭内测申请弹窗" />
+
+      <section className="beta-application-modal__panel">
+        {/* ── Header ── */}
+        <header className="beta-modal-header">
+          <div className="beta-modal-header__left">
+            <ExperimentOutlined className="beta-modal-header__icon" />
+            <div>
+              <h2 id="beta-modal-title">OmniAI 内测体验官申请表</h2>
+              <p className="beta-modal-header__subtitle">封闭限量内测 · 仅限 <strong>30 人</strong> · 赠送 <strong>500 元等值 50,000 积分</strong></p>
+            </div>
+          </div>
+          <button type="button" className="beta-modal-header__close" onClick={close} aria-label="关闭" disabled={submitting}>
+            <CloseOutlined />
+          </button>
+        </header>
+
+        {/* ── Body (scrollable document) ── */}
+        <div className="beta-modal-body">
+
+          {/* 一、个人基础信息 */}
+          <section className="beta-doc-section">
+            <h3 className="beta-doc-section__title">一、个人基础信息</h3>
+            <div className="beta-doc-grid">
+              <TextField label="姓名 / 常用昵称" value={form.name} onChange={(v) => update("name", v)} />
+              <TextField label="接收内测码邮箱" value={form.email} onChange={(v) => update("email", v)} placeholder="审核通过后内测码将发送到此邮箱" />
+              <TextField label="联系手机号码" value={form.phone} onChange={(v) => update("phone", v)} />
+              <TextField label="微信账号" value={form.wechat} onChange={(v) => update("wechat", v)} />
+              <TextField label="所在行业 / 职业" value={form.industry} onChange={(v) => update("industry", v)} />
+              <TextField label="所属公司 / 机构" value={form.company} onChange={(v) => update("company", v)} />
+              <TextField label="所在城市" value={form.city} onChange={(v) => update("city", v)} />
+            </div>
+          </section>
+
+          {/* 二、AI从业与使用经历 */}
+          <section className="beta-doc-section">
+            <h3 className="beta-doc-section__title">二、AI 从业与使用经历</h3>
+            <div className="beta-doc-grid">
+              <TextField label="日常常用 AI 创作工具有哪些" value={form.aiTools} onChange={(v) => update("aiTools", v)} placeholder="例如：Midjourney / Stable Diffusion / ChatGPT 等" />
+              <div className="beta-form-group">
+                <span className="beta-form-group__label">AI 内容创作从业时长</span>
+                <RadioGroup name="aiDuration" options={AI_DURATION_OPTIONS} value={form.aiDuration} onChange={(v) => update("aiDuration", v)} />
+              </div>
+              <div className="beta-form-group">
+                <span className="beta-form-group__label">是否深耕 AI 短剧、漫剧、数字视频、电商赛道</span>
+                <RadioGroup name="aiTrack" options={AI_TRACK_OPTIONS} value={form.aiTrack} onChange={(v) => update("aiTrack", v)} />
+              </div>
+              <div className="beta-form-group beta-form-group--full">
+                <span className="beta-form-group__label">日常主要创作方向（可多选）</span>
+                <CheckboxGroup options={AI_DIRECTION_OPTIONS} value={form.aiDirection} onChange={(v) => update("aiDirection", v)} />
+              </div>
+            </div>
+          </section>
+
+          {/* 三、内测使用意向调研 */}
+          <section className="beta-doc-section">
+            <h3 className="beta-doc-section__title">三、内测使用意向调研</h3>
+            <div className="beta-doc-grid">
+              <div className="beta-form-group">
+                <span className="beta-form-group__label">每周可稳定登录使用内测平台次数</span>
+                <RadioGroup name="weeklyUsage" options={WEEKLY_USAGE_OPTIONS} value={form.weeklyUsage} onChange={(v) => update("weeklyUsage", v)} />
+              </div>
+              <div className="beta-form-group">
+                <span className="beta-form-group__label">是否愿意积极反馈产品 BUG、优化建议、功能需求</span>
+                <RadioGroup name="feedback" options={FEEDBACK_OPTIONS} value={form.feedbackWilling} onChange={(v) => update("feedbackWilling", v)} />
+              </div>
+              <div className="beta-form-group beta-form-group--full">
+                <span className="beta-form-group__label">本次最想体验 OmniAI 核心功能（可多选）</span>
+                <CheckboxGroup options={WANT_FEATURE_OPTIONS} value={form.wantFeature} onChange={(v) => update("wantFeature", v)} />
+              </div>
+            </div>
+          </section>
+
+          {/* 四、申请自述 */}
+          <section className="beta-doc-section">
+            <h3 className="beta-doc-section__title">四、申请自述 <em className="beta-required">（必填）</em></h3>
+            <p className="beta-doc-section__desc">请简述自身 AI 创作优势、业务需求，以及加入本次封闭内测的理由：</p>
+            <textarea
+              className="beta-textarea"
+              value={form.selfStatement}
+              onChange={(e) => update("selfStatement", e.target.value)}
+              placeholder="请在此填写您的申请自述（必填）…"
+              rows={6}
+            />
+          </section>
+
+          {/* 五、内测规则知情同意书 */}
+          <section className="beta-doc-section">
+            <h3 className="beta-doc-section__title">五、内测规则知情同意书</h3>
+            <ol className="beta-rules-list">
+              <li>本次为封闭限量内测，仅限 <strong>30 人</strong>，按照资质匹配度 + 申请顺序筛选；</li>
+              <li>内测赠送 <strong>500 元等值 50,000 积分</strong>，仅限内测期间使用，不可提现、不可转让、不可兑换现金；</li>
+              <li>内测版本含未上线测试功能，存在功能不稳定、界面调整、参数优化等情况，申请人自愿理解包容；</li>
+              <li>严禁私自泄露内测专属工作流、内部功能、测试接口、未发布技术方案等内部资料；</li>
+              <li>审核通过后，官方将在 <strong>48 小时</strong> 内通过预留邮箱发放内测码、登录权限及免费积分；</li>
+              <li>正式版上线后，优质内测体验官可享受专属永久优惠权限与平台荣誉称号。</li>
+            </ol>
+
+            <label className="beta-agree-row">
+              <input
+                type="checkbox"
+                checked={form.agreeRules}
+                onChange={(e) => update("agreeRules", e.target.checked)}
+              />
+              <span>本人已完整阅读并同意以上全部内测规则，自愿遵守内测所有管理要求。</span>
+            </label>
+
+            <div className="beta-doc-grid beta-doc-grid--two">
+              <TextField label="申请人确认签字" value={form.signature} onChange={(v) => update("signature", v)} placeholder="请签署姓名" />
+              <TextField label="申请填写日期" value={form.applicationDate} onChange={(v) => update("applicationDate", v)} placeholder="例如：2026年6月8日" />
+            </div>
+          </section>
+
+        </div>
+
+        {/* ── Footer ── */}
+        <footer className="beta-modal-footer">
+          {message ? (
+            <p className={`beta-modal-footer__message beta-modal-footer__message--${message.tone}`} role="status">
+              {message.text}
+            </p>
+          ) : null}
+          <button type="button" className="beta-modal-footer__btn beta-modal-footer__btn--secondary" onClick={close} disabled={submitting}>
+            关闭
+          </button>
+          <button type="button" className="beta-modal-footer__btn beta-modal-footer__btn--primary" onClick={() => void submit()} disabled={submitting}>
+            {submitting ? "提交中..." : "提交申请"}
+          </button>
+        </footer>
+      </section>
+    </div>
+  );
+};
+
+export default BetaApplicationModal;

src/components/OnboardingTour.tsx

@@ -0,0 +1,500 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
+import { createPortal } from "react-dom";
+import { CloseOutlined, LeftOutlined, RightOutlined } from "@ant-design/icons";
+import "../styles/components/onboarding.css";
+
+// ─── Types ───────────────────────────────────────────────────
+
+export type TourPhaseId = "chat" | "image" | "video";
+
+interface TooltipStep {
+  target: string;
+  title: string;
+  description: string;
+  /** Which side of the target to place the tooltip on (preferred). */
+  placement?: "top" | "bottom" | "left" | "right";
+  /** If true, this step requires the user to interact with the element to proceed. */
+  interactive?: boolean;
+  /** Shown as hint text when interactive. */
+  actionHint?: string;
+}
+
+interface TourPhase {
+  id: TourPhaseId;
+  label: string;
+  steps: TooltipStep[];
+}
+
+interface OnboardingTourProps {
+  active: boolean;
+  phase: TourPhaseId;
+  stepIndex: number;
+  onNext: (phase: TourPhaseId, stepIndex: number) => void;
+  onSkip: (phase: TourPhaseId) => void;
+  onDone: () => void;
+}
+
+// ─── Tour definitions ────────────────────────────────────────
+
+const PHASES: Record<TourPhaseId, TourPhase> = {
+  chat: {
+    id: "chat",
+    label: "对话模式",
+    steps: [
+      {
+        target: "onboarding-chat-upload",
+        title: "参考素材上传",
+        description: "点击或拖拽上传图片、视频、音频等参考素材，帮助 AI 更好地理解你的需求。",
+        placement: "right",
+      },
+      {
+        target: "onboarding-chat-model",
+        title: "AI 模型选择",
+        description: "在这里选择对话使用的 AI 模型，不同模型有不同的擅长领域和风格。",
+        placement: "bottom",
+      },
+      {
+        target: "onboarding-chat-speed",
+        title: "思考速度",
+        description: "「思考速度：高」回复更迅速简洁；「思考速度：急速」适合快速问答场景。",
+        placement: "bottom",
+      },
+      {
+        target: "onboarding-chat-depth",
+        title: "推理深度",
+        description: "「推理深度：强」进行更深层逻辑推理；「推理深度：极限」适合复杂多步骤问题。",
+        placement: "bottom",
+      },
+      {
+        target: "onboarding-chat-input",
+        title: "提示词输入框",
+        description: "在这里输入你的问题或创作需求，按 Enter 发送，Shift + Enter 换行。",
+        placement: "top",
+      },
+      {
+        target: "onboarding-mode-selector",
+        title: "切换到图像生成模式",
+        description: "点击「下一步」自动切换，或点击这个按钮手动选择「图像生成」进入下一阶段。",
+        placement: "bottom",
+      },
+    ],
+  },
+  image: {
+    id: "image",
+    label: "图像生成",
+    steps: [
+      {
+        target: "onboarding-image-upload",
+        title: "参考图上传",
+        description: "上传参考图片，AI 将基于参考图的风格和内容生成新图像。支持 PNG / JPG / WebP。",
+        placement: "right",
+      },
+      {
+        target: "onboarding-image-model",
+        title: "图像模型选择",
+        description: "选择用于图像生成的 AI 模型，不同模型在风格、精度和速度上有所侧重。",
+        placement: "bottom",
+      },
+      {
+        target: "onboarding-image-settings",
+        title: "比例与分辨率",
+        description: "设置生成图像的宽高比（如 16:9、1:1）和清晰度（1K/2K），根据使用场景选择。",
+        placement: "bottom",
+      },
+      {
+        target: "onboarding-image-grid",
+        title: "单图 / 多宫格模式",
+        description: "「单图」生成一张完整图像；「多宫格」一次生成多张变体供你挑选最佳方案。",
+        placement: "bottom",
+      },
+      {
+        target: "onboarding-image-input",
+        title: "图像提示词",
+        description: "描述你想要的图像内容、风格和细节，越具体效果越好。",
+        placement: "top",
+      },
+      {
+        target: "onboarding-mode-selector",
+        title: "切换到视频生成模式",
+        description: "点击「下一步」自动切换，或点击这个按钮手动选择「视频生成」进入下一阶段。",
+        placement: "bottom",
+      },
+    ],
+  },
+  video: {
+    id: "video",
+    label: "视频生成",
+    steps: [
+      {
+        target: "onboarding-video-upload",
+        title: "参考素材上传",
+        description: "上传参考图片或视频片段，帮助 AI 确定视频的风格、色调和内容方向。",
+        placement: "right",
+      },
+      {
+        target: "onboarding-video-model",
+        title: "视频模型选择",
+        description: "选择视频生成模型。不同模型在画质、时长、运动流畅度上各有优势。",
+        placement: "bottom",
+      },
+      {
+        target: "onboarding-video-frame",
+        title: "生成方式：全能 / 首尾帧",
+        description: "「全能参考」根据描述直接生成；「首尾帧」通过设定起始和结束画面精确控制转场。",
+        placement: "bottom",
+      },
+      {
+        target: "onboarding-video-ratio",
+        title: "视频画面比例",
+        description: "选择画面比例。9:16 适合手机短视频（抖音/Reels），16:9 适合横屏展示。",
+        placement: "bottom",
+      },
+      {
+        target: "onboarding-video-duration",
+        title: "视频时长设置",
+        description: "设置生成视频的秒数。时长越长，生成时间越久，建议从 5 秒开始尝试。",
+        placement: "bottom",
+      },
+      {
+        target: "onboarding-video-quality",
+        title: "分辨率与画质",
+        description: "选择视频清晰度。720P 生成更快适合预览，1080P 画质更高适合最终成品。",
+        placement: "bottom",
+      },
+      {
+        target: "onboarding-video-generate",
+        title: "一切就绪，开始创作！",
+        description: "设置完毕后，点击发送按钮（或按 Enter）即可开始你的首次视频生成。祝你创作愉快！",
+        placement: "top",
+      },
+    ],
+  },
+};
+
+// ─── Connector line calculation ──────────────────────────────
+
+interface ConnectorPoints {
+  x1: number; y1: number; // tooltip edge center
+  x2: number; y2: number; // target edge center
+}
+
+function calcConnector(
+  tooltipRect: DOMRect,
+  targetRect: DOMRect,
+  placement: TooltipStep["placement"],
+): ConnectorPoints {
+  const tx = targetRect.left + targetRect.width / 2;
+  const ty = targetRect.top + targetRect.height / 2;
+  const tcx = tooltipRect.left + tooltipRect.width / 2;
+  const tcy = tooltipRect.top + tooltipRect.height / 2;
+
+  switch (placement) {
+    case "top":
+      return { x1: tcx, y1: tooltipRect.bottom, x2: tx, y2: targetRect.top };
+    case "bottom":
+      return { x1: tcx, y1: tooltipRect.top, x2: tx, y2: targetRect.bottom };
+    case "left":
+      return { x1: tooltipRect.right, y1: tcy, x2: targetRect.left, y2: ty };
+    case "right":
+      return { x1: tooltipRect.left, y1: tcy, x2: targetRect.right, y2: ty };
+    default:
+      return { x1: tcx, y1: tooltipRect.top, x2: tx, y2: targetRect.bottom };
+  }
+}
+
+// ─── Placement engine ─────────────────────────────────────────
+
+interface PlacementResult {
+  left: number;
+  top: number;
+  actualPlacement: TooltipStep["placement"];
+}
+
+/** Score a candidate — lower is better. Penalises covering the target or overflow. */
+function scorePlacement(
+  left: number, top: number, tw: number, th: number,
+  targetRect: DOMRect, vw: number, vh: number,
+): number {
+  let score = 0;
+  // Overflow penalty
+  if (left < 0) score += Math.abs(left);
+  if (top < 0) score += Math.abs(top);
+  if (left + tw > vw) score += (left + tw - vw);
+  if (top + th > vh) score += (top + th - vh);
+  // Overlap with target penalty (avoid covering the highlighted element)
+  const overlapX = Math.max(0, Math.min(left + tw, targetRect.right) - Math.max(left, targetRect.left));
+  const overlapY = Math.max(0, Math.min(top + th, targetRect.bottom) - Math.max(top, targetRect.top));
+  if (overlapX > 0 && overlapY > 0) score += overlapX * overlapY * 0.01;
+  return score;
+}
+
+function findBestPlacement(
+  targetRect: DOMRect, tw: number, th: number,
+  preferred: TooltipStep["placement"],
+): PlacementResult {
+  const gap = 144;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const all: Array<TooltipStep["placement"]> = [
+    preferred ?? "bottom",
+    ...(["bottom", "top", "right", "left"] as const).filter((p) => p !== (preferred ?? "bottom")),
+  ];
+
+  let best: PlacementResult = { left: 0, top: 0, actualPlacement: "bottom" };
+  let bestScore = Infinity;
+
+  for (const p of all) {
+    let left = 0, top = 0;
+    switch (p) {
+      case "bottom":
+        left = targetRect.left + targetRect.width / 2 - tw / 2;
+        top = targetRect.bottom + gap;
+        break;
+      case "top":
+        left = targetRect.left + targetRect.width / 2 - tw / 2;
+        top = targetRect.top - th - gap;
+        break;
+      case "right":
+        left = targetRect.right + gap;
+        top = targetRect.top + targetRect.height / 2 - th / 2;
+        break;
+      case "left":
+        left = targetRect.left - tw - gap;
+        top = targetRect.top + targetRect.height / 2 - th / 2;
+        break;
+    }
+    left = Math.max(12, Math.min(left, vw - tw - 12));
+    top = Math.max(12, Math.min(top, vh - th - 12));
+
+    const s = scorePlacement(left, top, tw, th, targetRect, vw, vh);
+    if (s < bestScore) {
+      bestScore = s;
+      best = { left, top, actualPlacement: p };
+    }
+    if (s === 0) break; // perfect
+  }
+  return best;
+}
+
+// ─── Component ────────────────────────────────────────────────
+
+export default function OnboardingTour({
+  active, phase, stepIndex, onNext, onSkip, onDone,
+}: OnboardingTourProps) {
+  const [pos, setPos] = useState<PlacementResult>({ left: 0, top: 0, actualPlacement: "bottom" });
+  const [targetRect, setTargetRect] = useState<DOMRect | null>(null);
+  const [visible, setVisible] = useState(false);
+  const [connector, setConnector] = useState<ConnectorPoints | null>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const prevPhaseRef = useRef(phase);
+  const prevStepRef = useRef(stepIndex);
+
+  const phaseDef = PHASES[phase];
+  const currentStep = phaseDef?.steps[stepIndex];
+  const totalSteps = phaseDef?.steps.length ?? 0;
+  const isLastStep = stepIndex >= totalSteps - 1;
+  const isVideoLastStep = phase === "video" && isLastStep;
+
+  const stepChanged = prevPhaseRef.current !== phase || prevStepRef.current !== stepIndex;
+  prevPhaseRef.current = phase;
+  prevStepRef.current = stepIndex;
+
+  const recalc = useCallback(() => {
+    if (!currentStep) return;
+    const el = document.querySelector(`[data-onboarding="${currentStep.target}"]`) as HTMLElement | null;
+    if (!el) return; // Will be retried by the polling loop
+    const rect = el.getBoundingClientRect();
+    setTargetRect(rect);
+
+    const tooltip = tooltipRef.current;
+    if (!tooltip) return;
+    const tr = tooltip.getBoundingClientRect();
+    const best = findBestPlacement(rect, tr.width, tr.height, currentStep.placement);
+    setPos(best);
+
+    // Recalculate tooltip rect after position update (use the same best pos)
+    const virtualTooltipRect = new DOMRect(best.left, best.top, tr.width, tr.height);
+    setConnector(calcConnector(virtualTooltipRect, rect, best.actualPlacement));
+  }, [currentStep]);
+
+  useEffect(() => {
+    if (!active) { setVisible(false); return; }
+    const t = setTimeout(() => { setVisible(true); recalc(); }, 120);
+    return () => clearTimeout(t);
+  }, [active, phase, stepIndex, recalc]);
+
+  // Reposition and retry when elements aren't ready
+  useEffect(() => {
+    if (!active || !visible) return;
+    const h = () => recalc();
+    window.addEventListener("resize", h);
+    window.addEventListener("scroll", h, true);
+    const obs = new MutationObserver(h);
+    obs.observe(document.body, { childList: true, subtree: true, attributes: true });
+
+    // Polling retry: keep looking for the target element if not found yet
+    let retryId: number | null = null;
+    let attempts = 0;
+    const poll = () => {
+      recalc();
+      attempts += 1;
+      if (attempts < 40) retryId = requestAnimationFrame(poll);
+    };
+    // Start polling after a short delay
+    const startTimer = setTimeout(() => { poll(); }, 200);
+    return () => {
+      window.removeEventListener("resize", h);
+      window.removeEventListener("scroll", h, true);
+      obs.disconnect();
+      clearTimeout(startTimer);
+      if (retryId !== null) cancelAnimationFrame(retryId);
+    };
+  }, [active, visible, recalc]);
+
+  // Animate in on step change
+  useEffect(() => {
+    if (!active || !visible || !stepChanged) return;
+    const el = tooltipRef.current;
+    if (!el) return;
+    el.classList.remove("onboarding-tooltip--pop");
+    void el.offsetWidth; // force reflow
+    el.classList.add("onboarding-tooltip--pop");
+  }, [active, visible, stepChanged, phase, stepIndex]);
+
+  if (!active || !currentStep) return null;
+
+  const connectorPath = connector
+    ? `M ${connector.x1} ${connector.y1} L ${connector.x2} ${connector.y2}`
+    : "";
+
+  const arrowAngle = connector
+    ? Math.atan2(connector.y2 - connector.y1, connector.x2 - connector.x1) * (180 / Math.PI)
+    : 0;
+
+  const clipPath = targetRect
+    ? `polygon(0% 0%, 0% 100%, ${targetRect.left - 6}px 100%, ${targetRect.left - 6}px ${targetRect.top - 6}px, ${targetRect.right + 6}px ${targetRect.top - 6}px, ${targetRect.right + 6}px ${targetRect.bottom + 6}px, ${targetRect.left - 6}px ${targetRect.bottom + 6}px, ${targetRect.left - 6}px 100%, 100% 100%, 100% 0%)`
+    : "";
+
+  return createPortal(
+    <div className={`onboarding-root${visible ? " is-visible" : ""}`} aria-label="新手引导教程">
+      {/* Overlay */}
+      <div className="onboarding-overlay" style={{ clipPath, WebkitClipPath: clipPath }} />
+
+      {/* Spotlight ring */}
+      {targetRect && (
+        <div
+          className="onboarding-spotlight"
+          style={{
+            left: targetRect.left - 8,
+            top: targetRect.top - 8,
+            width: targetRect.width + 16,
+            height: targetRect.height + 16,
+          }}
+        >
+          {/* Animated pulse ring */}
+          <div className="onboarding-spotlight__pulse" />
+          <div className="onboarding-spotlight__pulse onboarding-spotlight__pulse--delay" />
+        </div>
+      )}
+
+      {/* Connector SVG line */}
+      {connector && (
+        <svg className="onboarding-connector" aria-hidden="true">
+          <defs>
+            <linearGradient id="ob-conn-grad" x1="0%" y1="0%" x2="100%" y2="0%">
+              <stop offset="0%" stopColor="var(--accent, #00ff88)" stopOpacity="0.2" />
+              <stop offset="100%" stopColor="var(--accent, #00ff88)" stopOpacity="0.9" />
+            </linearGradient>
+          </defs>
+          {/* Animated dash line */}
+          <path
+            d={connectorPath}
+            fill="none"
+            stroke="var(--accent, #00ff88)"
+            strokeWidth="2"
+            strokeDasharray="8 4"
+            strokeLinecap="round"
+            opacity="0.7"
+            className="onboarding-connector__path"
+          />
+          {/* Arrow at target end */}
+          <circle
+            cx={connector.x2}
+            cy={connector.y2}
+            r="5"
+            fill="var(--accent, #00ff88)"
+            className="onboarding-connector__dot"
+          />
+        </svg>
+      )}
+
+      {/* Tooltip card */}
+      <div
+        ref={tooltipRef}
+        className={`onboarding-tooltip onboarding-tooltip--${pos.actualPlacement}`}
+        style={{ left: pos.left, top: pos.top }}
+        role="dialog"
+        aria-label={currentStep.title}
+      >
+        {/* Arrow pointing toward target */}
+        <div
+          className={`onboarding-tooltip__arrow onboarding-tooltip__arrow--${pos.actualPlacement}`}
+          style={{ transform: `rotate(${arrowAngle}deg)` }}
+        />
+
+        <div className="onboarding-tooltip__head">
+          <span className="onboarding-tooltip__phase-badge">{phaseDef.label}</span>
+          <span className="onboarding-tooltip__counter">
+            {stepIndex + 1} / {totalSteps}
+          </span>
+        </div>
+
+        <strong className="onboarding-tooltip__title">{currentStep.title}</strong>
+        <p className="onboarding-tooltip__desc">{currentStep.description}</p>
+
+        <div className="onboarding-tooltip__actions">
+          <button type="button" className="onboarding-tooltip__btn onboarding-tooltip__btn--ghost" onClick={onDone}>
+            <CloseOutlined /> 跳过教程
+          </button>
+          {stepIndex > 0 && (
+            <button
+              type="button"
+              className="onboarding-tooltip__btn onboarding-tooltip__btn--ghost"
+              onClick={() => onNext(phase, stepIndex - 1)}
+            >
+              <LeftOutlined /> 上一步
+            </button>
+          )}
+          {isVideoLastStep ? (
+            <button type="button" className="onboarding-tooltip__btn onboarding-tooltip__btn--primary" onClick={onDone}>
+              开始使用 <RightOutlined />
+            </button>
+          ) : isLastStep && phase !== "video" ? (
+            <button type="button" className="onboarding-tooltip__btn onboarding-tooltip__btn--primary" onClick={() => onSkip(phase)}>
+              {phase === "chat" ? "进入图像生成" : "进入视频生成"} <RightOutlined />
+            </button>
+          ) : (
+            <button type="button" className="onboarding-tooltip__btn onboarding-tooltip__btn--primary" onClick={() => onNext(phase, stepIndex + 1)}>
+              下一步 <RightOutlined />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Bottom progress bar */}
+      <div className="onboarding-progress" aria-hidden="true">
+        {(["chat", "image", "video"] as TourPhaseId[]).map((p) => (
+          <div key={p} className="onboarding-progress__phase">
+            <div
+              className={`onboarding-progress__dot${p === phase ? " is-active" : ""}${
+                (["chat", "image", "video"].indexOf(p) < ["chat", "image", "video"].indexOf(phase)) ? " is-done" : ""
+              }`}
+            />
+            <span>{PHASES[p].label}</span>
+          </div>
+        ))}
+      </div>
+    </div>,
+    document.body,
+  );
+}

src/components/RechargeModal/RechargeModal.tsx

@@ -29,7 +29,7 @@ const membershipPlans: MembershipPlan[] = [
     subtitle: "Pro",
     period: "月付",
     price: "299 元 / 月",
-    grant: "每月赠送 10000 积分，30 天有效",
+    grant: "每月赠送 29900 积分，30 天有效",
     comparisonLabel: "专业版基础权益",
     icon: <CrownOutlined />,
     benefits: ["通用大模型全解锁", "积分与 API 消耗 9 折", "并发提升到 3 个", "去水印、插队加速、专属客服"],
@@ -41,7 +41,7 @@ const membershipPlans: MembershipPlan[] = [
     subtitle: "Pro",
     period: "季付",
     price: "897 元 / 季",
-    grant: "连续 3 个月按月发放 Pro 积分",
+    grant: "季度合计 89700 积分，默认按月分摊",
     comparisonLabel: "相比月付新增",
     badge: "季度",
     icon: <CrownOutlined />,
@@ -54,7 +54,7 @@ const membershipPlans: MembershipPlan[] = [
     subtitle: "Pro",
     period: "年付",
     price: "1990 元 / 年",
-    grant: "全年合计 140000 积分，默认按月分摊",
+    grant: "全年合计 199000 积分，默认按月分摊",
     comparisonLabel: "相比季付新增",
     badge: "年费优惠",
     icon: <CrownOutlined />,
@@ -67,7 +67,7 @@ const membershipPlans: MembershipPlan[] = [
     subtitle: "Enterprise",
     period: "月付",
     price: "499 元 / 月",
-    grant: "每月赠送 2000 积分，30 天有效",
+    grant: "每月赠送 49900 积分，30 天有效",
     comparisonLabel: "企业版基础权益",
     icon: <RocketOutlined />,
     benefits: ["企业私有模型与高性能模型", "默认 10 并发，可申请提升", "积分与 API 消耗 8 折", "用量报表与正式 API 权限"],
@@ -79,7 +79,7 @@ const membershipPlans: MembershipPlan[] = [
     subtitle: "Enterprise",
     period: "季付",
     price: "1497 元 / 季",
-    grant: "连续 3 个月按月发放企业版积分",
+    grant: "季度合计 149700 积分，默认按月分摊",
     comparisonLabel: "相比月付新增",
     badge: "季度",
     icon: <RocketOutlined />,
@@ -92,7 +92,7 @@ const membershipPlans: MembershipPlan[] = [
     subtitle: "Enterprise",
     period: "年付",
     price: "4990 元 / 年",
-    grant: "全年合计 340000 积分，默认按月分摊",
+    grant: "全年合计 499000 积分，默认按月分摊",
     comparisonLabel: "相比季付新增",
     badge: "企业年费",
     icon: <RocketOutlined />,

src/features/assets/AssetsPage.tsx

@@ -10,7 +10,7 @@ import {
   SearchOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import { useCallback, useEffect, useMemo, useRef, useState, type JSX } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent, type JSX } from "react";
 import "../../styles/pages/assets.css";
 import { assetClient, type ServerAssetItem } from "../../api/assetClient";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
@@ -95,6 +95,17 @@ function AssetsPage({ isAuthenticated, onOpenLogin }: AssetsPageProps) {
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number; asset: LibraryAssetItem } | null>(null);
   const contextMenuRef = useRef<HTMLDivElement>(null);
   const uploadInputRef = useRef<HTMLInputElement>(null);
+  const [isUploadDragging, setIsUploadDragging] = useState(false);
+
+  const handleUploadDragOver = (e: DragEvent) => { e.preventDefault(); if (e.dataTransfer.types.includes("Files")) setIsUploadDragging(true); };
+  const handleUploadDragLeave = (e: DragEvent) => { e.preventDefault(); if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsUploadDragging(false); };
+  const handleUploadDrop = (e: DragEvent) => {
+    e.preventDefault();
+    setIsUploadDragging(false);
+    if (e.dataTransfer.files.length) {
+      void handleUploadFiles(e.dataTransfer.files);
+    }
+  };
 
   const handleContextMenu = useCallback((e: React.MouseEvent, asset: LibraryAssetItem) => {
     e.preventDefault();
@@ -270,7 +281,15 @@ function AssetsPage({ isAuthenticated, onOpenLogin }: AssetsPageProps) {
               placeholder="搜索资产..."
             />
           </label>
-          <button type="button" className="studio-generate-btn studio-generate-btn--compact" onClick={() => uploadInputRef.current?.click()} disabled={isUploading}>
+          <button
+            type="button"
+            className={`studio-generate-btn studio-generate-btn--compact${isUploadDragging ? " is-dragging" : ""}`}
+            onClick={() => uploadInputRef.current?.click()}
+            onDragOver={handleUploadDragOver}
+            onDragLeave={handleUploadDragLeave}
+            onDrop={handleUploadDrop}
+            disabled={isUploading}
+          >
             {isUploading ? <LoadingOutlined /> : <PlusOutlined />}
             {isUploading ? "上传中..." : "添加"}
           </button>

src/features/beta-applications/BetaApplicationsPage.tsx

@@ -0,0 +1,298 @@
+import {
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  ExperimentOutlined,
+  FileSearchOutlined,
+  LoginOutlined,
+  ReloadOutlined,
+} from "@ant-design/icons";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { betaApplicationClient, type BetaApplicationItem, type BetaApplicationStatus } from "../../api/betaApplicationClient";
+import WorkspacePageShell from "../../components/WorkspacePageShell";
+import type { WebUserSession } from "../../types";
+import "../../styles/pages/beta-applications.css";
+
+interface BetaApplicationsPageProps {
+  session: WebUserSession | null;
+  onOpenLogin: () => void;
+}
+
+type StatusFilter = BetaApplicationStatus | "";
+
+const STATUS_OPTIONS: Array<{ value: StatusFilter; label: string }> = [
+  { value: "pending", label: "待审核" },
+  { value: "approved", label: "已通过" },
+  { value: "rejected", label: "已驳回" },
+  { value: "", label: "全部" },
+];
+
+const STATUS_LABEL: Record<BetaApplicationStatus, string> = {
+  pending: "待审核",
+  approved: "已通过",
+  rejected: "已驳回",
+};
+
+function canReviewBetaApplications(session: WebUserSession | null): boolean {
+  const role = String(session?.user.role || "").trim().toLowerCase();
+  const username = String(session?.user.username || "").trim().toLowerCase();
+  return role === "admin" || username === "xqy1912";
+}
+
+function formatDate(value?: string | null): string {
+  if (!value) return "暂无时间";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString("zh-CN", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function valueOrEmpty(value?: string | null): string {
+  return value?.trim() || "未填写";
+}
+
+function joinValues(values: string[]): string {
+  return values.length ? values.join("、") : "未选择";
+}
+
+function DetailField({ label, value, wide }: { label: string; value: string; wide?: boolean }) {
+  return (
+    <div className={`beta-admin-field${wide ? " beta-admin-field--wide" : ""}`}>
+      <span>{label}</span>
+      <strong>{value}</strong>
+    </div>
+  );
+}
+
+export default function BetaApplicationsPage({ session, onOpenLogin }: BetaApplicationsPageProps) {
+  const allowed = canReviewBetaApplications(session);
+  const [status, setStatus] = useState<StatusFilter>("pending");
+  const [applications, setApplications] = useState<BetaApplicationItem[]>([]);
+  const [selectedId, setSelectedId] = useState<number | null>(null);
+  const [reviewNote, setReviewNote] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const selectedApplication = useMemo(
+    () => applications.find((item) => item.id === selectedId) ?? applications[0] ?? null,
+    [applications, selectedId],
+  );
+
+  const load = useCallback(async () => {
+    if (!allowed) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const items = await betaApplicationClient.listAdminApplications(status);
+      setApplications(items);
+      setSelectedId((current) =>
+        current && items.some((item) => item.id === current) ? current : (items[0]?.id ?? null),
+      );
+    } catch (loadError) {
+      setApplications([]);
+      setError(loadError instanceof Error ? loadError.message : "内测申请列表加载失败");
+    } finally {
+      setLoading(false);
+    }
+  }, [allowed, status]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const handleDecision = async (action: "approve" | "reject") => {
+    if (!selectedApplication || selectedApplication.status !== "pending" || submitting) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      await betaApplicationClient.reviewApplication(selectedApplication.id, action, reviewNote.trim());
+      setReviewNote("");
+      await load();
+    } catch (submitError) {
+      setError(submitError instanceof Error ? submitError.message : "审核操作失败");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (!session) {
+    return (
+      <WorkspacePageShell title="内测申请审核" fullWidth className="beta-admin-page page-motion">
+        <section className="beta-admin-access">
+          <LoginOutlined />
+          <h1>请登录审核账号</h1>
+          <p>内测申请审核仅开放给管理员和 xqy1912。</p>
+          <button type="button" onClick={onOpenLogin}>登录 / 注册</button>
+        </section>
+      </WorkspacePageShell>
+    );
+  }
+
+  if (!allowed) {
+    return (
+      <WorkspacePageShell title="内测申请审核" fullWidth className="beta-admin-page page-motion">
+        <section className="beta-admin-access">
+          <FileSearchOutlined />
+          <h1>当前账号没有审核权限</h1>
+          <p>请切换到 admin 或 xqy1912 后再进入内测审核台。</p>
+        </section>
+      </WorkspacePageShell>
+    );
+  }
+
+  return (
+    <WorkspacePageShell title="内测申请审核" fullWidth className="beta-admin-page page-motion">
+      <div className="beta-admin-page__inner">
+        <section className="beta-admin-toolbar">
+          <div>
+            <span>内部审核台</span>
+            <h1>内测申请表</h1>
+            <p>查看用户提交的完整申请资料，通过后发放内测码，驳回后向用户发送未通过通知。</p>
+          </div>
+          <button type="button" onClick={() => void load()} disabled={loading}>
+            <ReloadOutlined />
+            刷新
+          </button>
+        </section>
+
+        <div className="beta-admin-status-tabs" role="tablist" aria-label="内测申请状态">
+          {STATUS_OPTIONS.map((option) => (
+            <button
+              key={option.value || "all"}
+              type="button"
+              role="tab"
+              aria-selected={status === option.value}
+              className={status === option.value ? "is-active" : ""}
+              onClick={() => setStatus(option.value)}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+
+        {error ? <p className="beta-admin-error">{error}</p> : null}
+
+        <section className="beta-admin-layout">
+          <aside className="beta-admin-list" aria-label="内测申请列表">
+            {loading ? <div className="beta-admin-list__empty">正在加载申请...</div> : null}
+            {!loading && applications.length === 0 ? (
+              <div className="beta-admin-list__empty">暂无需要显示的申请</div>
+            ) : null}
+            {applications.map((item) => (
+              <button
+                key={item.id}
+                type="button"
+                className={`beta-admin-list__item${item.id === selectedApplication?.id ? " is-active" : ""}`}
+                onClick={() => setSelectedId(item.id)}
+              >
+                <span className={`beta-admin-status beta-admin-status--${item.status}`}>{STATUS_LABEL[item.status]}</span>
+                <strong>{item.name || item.username || `申请 #${item.id}`}</strong>
+                <small>{item.industry || "未填写行业"} · {formatDate(item.createdAt)}</small>
+              </button>
+            ))}
+          </aside>
+
+          {selectedApplication ? (
+            <article className="beta-admin-detail">
+              <header className="beta-admin-detail__header">
+                <div>
+                  <span><ExperimentOutlined /> {STATUS_LABEL[selectedApplication.status]}</span>
+                  <h2>{selectedApplication.name || "未填写姓名"}</h2>
+                  <p>{selectedApplication.selfStatement || "申请人未填写自述。"}</p>
+                </div>
+                {selectedApplication.inviteCode ? (
+                  <strong className="beta-admin-code">内测码：{selectedApplication.inviteCode}</strong>
+                ) : null}
+              </header>
+
+              <section className="beta-admin-form-card">
+                <h3>一、个人基础信息</h3>
+                <div className="beta-admin-field-grid">
+                  <DetailField label="姓名 / 常用昵称" value={valueOrEmpty(selectedApplication.name)} />
+                  <DetailField label="接收内测码邮箱" value={valueOrEmpty(selectedApplication.email)} />
+                  <DetailField label="联系手机号码" value={valueOrEmpty(selectedApplication.phone)} />
+                  <DetailField label="微信账号" value={valueOrEmpty(selectedApplication.wechat)} />
+                  <DetailField label="所在行业 / 职业" value={valueOrEmpty(selectedApplication.industry)} />
+                  <DetailField label="所属公司 / 机构" value={valueOrEmpty(selectedApplication.company)} />
+                  <DetailField label="所在城市" value={valueOrEmpty(selectedApplication.city)} />
+                  <DetailField label="关联账号" value={selectedApplication.username || `UID ${selectedApplication.userId ?? "未登录提交"}`} />
+                  <DetailField label="提交时间" value={formatDate(selectedApplication.createdAt)} />
+                </div>
+              </section>
+
+              <section className="beta-admin-form-card">
+                <h3>二、AI 从业与使用经历</h3>
+                <div className="beta-admin-field-grid">
+                  <DetailField label="常用 AI 创作工具" value={valueOrEmpty(selectedApplication.aiTools)} wide />
+                  <DetailField label="AI 内容创作从业时长" value={valueOrEmpty(selectedApplication.aiDuration)} />
+                  <DetailField label="是否深耕相关赛道" value={valueOrEmpty(selectedApplication.aiTrack)} />
+                  <DetailField label="日常主要创作方向" value={joinValues(selectedApplication.aiDirection)} wide />
+                </div>
+              </section>
+
+              <section className="beta-admin-form-card">
+                <h3>三、内测使用意向调研</h3>
+                <div className="beta-admin-field-grid">
+                  <DetailField label="每周稳定使用次数" value={valueOrEmpty(selectedApplication.weeklyUsage)} />
+                  <DetailField label="反馈意愿" value={valueOrEmpty(selectedApplication.feedbackWilling)} />
+                  <DetailField label="最想体验功能" value={joinValues(selectedApplication.wantFeature)} wide />
+                </div>
+              </section>
+
+              <section className="beta-admin-form-card">
+                <h3>四、申请自述与确认</h3>
+                <p className="beta-admin-statement">{selectedApplication.selfStatement || "未填写"}</p>
+                <div className="beta-admin-field-grid">
+                  <DetailField label="申请人确认签字" value={valueOrEmpty(selectedApplication.signature)} />
+                  <DetailField label="申请填写日期" value={valueOrEmpty(selectedApplication.applicationDate)} />
+                  <DetailField label="同意规则" value={selectedApplication.agreeRules ? "已同意" : "未同意"} />
+                  <DetailField label="IP" value={valueOrEmpty(selectedApplication.ipAddress)} />
+                  <DetailField label="客户端" value={valueOrEmpty(selectedApplication.userAgent)} wide />
+                </div>
+              </section>
+
+              {selectedApplication.status !== "pending" ? (
+                <section className="beta-admin-form-card">
+                  <h3>审核结果</h3>
+                  <div className="beta-admin-field-grid">
+                    <DetailField label="审核人" value={selectedApplication.reviewerUsername || `UID ${selectedApplication.reviewedBy ?? "-"}`} />
+                    <DetailField label="审核时间" value={formatDate(selectedApplication.reviewedAt)} />
+                    <DetailField label="审核备注" value={valueOrEmpty(selectedApplication.reviewNote)} wide />
+                  </div>
+                </section>
+              ) : (
+                <section className="beta-admin-review-box">
+                  <label>
+                    <span>审核备注</span>
+                    <textarea
+                      value={reviewNote}
+                      onChange={(event) => setReviewNote(event.target.value)}
+                      placeholder="填写通过说明或驳回原因；驳回时该备注会作为用户通知内容。"
+                    />
+                  </label>
+                  <div className="beta-admin-actions">
+                    <button type="button" disabled={submitting} onClick={() => void handleDecision("reject")}>
+                      <CloseCircleOutlined />
+                      驳回并通知
+                    </button>
+                    <button type="button" disabled={submitting} onClick={() => void handleDecision("approve")}>
+                      <CheckCircleOutlined />
+                      通过并发放内测码
+                    </button>
+                  </div>
+                </section>
+              )}
+            </article>
+          ) : (
+            <div className="beta-admin-detail beta-admin-detail--empty">选择左侧申请查看表单详情</div>
+          )}
+        </section>
+      </div>
+    </WorkspacePageShell>
+  );
+}

src/features/canvas/canvasConstants.ts

@@ -58,13 +58,13 @@ export const defaultTextModelId = textModelOptions[0].id;
 
 // --- Image model options ---
 export const imageModelOptions: CanvasOption[] = [
-  { value: "wan2.7-image", label: "wan 2.7 · 0.20 积分" },
+  { value: "wan2.7-image", label: "wan 2.7" },
-  { value: "wan2.7-image-pro", label: "wan 2.7 Pro · 0.20 积分" },
+  { value: "wan2.7-image-pro", label: "wan 2.7 Pro" },
-  { value: "gpt-image-2", label: "GPT-Image-2 · 0.20 积分" },
+  { value: "gpt-image-2", label: "omni-GPT" },
-  { value: "gpt-image-2-vip", label: "GPT-Image-2 VIP · 0.20 积分" },
+  { value: "gpt-image-2-vip", label: "omni-GPT VIP" },
-  { value: "nano-banana-pro", label: "Nano Banana Pro · 0.20 积分" },
+  { value: "nano-banana-pro", label: "omni-水果 Pro" },
-  { value: "nano-banana-2", label: "Nano Banana 2 · 0.20 积分" },
+  { value: "nano-banana-2", label: "omni-水果 2" },
-  { value: "nano-banana-fast", label: "Nano Banana · 0.20 积分" },
+  { value: "nano-banana-fast", label: "omni-水果" },
 ];
 
 export const imageRatioOptions: CanvasOption[] = [

src/features/character-mix/CharacterMixPage.tsx

@@ -61,6 +61,9 @@ function CharacterMixPage({
   const abortRef = useRef(false);
   const taskIdRef = useRef<string | null>(null);
   const [isDragging, setIsDragging] = useState(false);
+  const [isCanvasDragging, setIsCanvasDragging] = useState(false);
+  const characterInputRef = useRef<HTMLInputElement | null>(null);
+  const videoInputRef = useRef<HTMLInputElement | null>(null);
 
   useEffect(() => {
     return () => {
@@ -262,6 +265,23 @@ function CharacterMixPage({
     }
   };
 
+  const handleCanvasDragOver = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.types.includes("Files")) setIsCanvasDragging(true); };
+  const handleCanvasDragLeave = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); if (e.currentTarget === e.target || !e.currentTarget.contains(e.relatedTarget as Node)) setIsCanvasDragging(false); };
+  const handleCanvasDrop = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsCanvasDragging(false);
+    handleDrop(e);
+  };
+
+  const handleCanvasClick = () => {
+    if (!characterPreview) {
+      characterInputRef.current?.click();
+    } else if (!videoPreview) {
+      videoInputRef.current?.click();
+    }
+  };
+
   return (
     <section className="image-workbench-page character-mix-page" aria-label="角色迁移">
       <header className="image-workbench-topbar">
@@ -342,6 +362,7 @@ function CharacterMixPage({
               <div className="studio-panel__section-body">
                 <label className={characterFile ? "studio-upload-slot--filled" : "studio-upload-slot--empty"}>
                   <input
+                    ref={characterInputRef}
                     type="file"
                     accept="image/*"
                     onChange={(event) => {
@@ -383,6 +404,7 @@ function CharacterMixPage({
               <div className="studio-panel__section-body">
                 <label className={videoFile ? "studio-upload-slot--filled" : "studio-upload-slot--empty"}>
                   <input
+                    ref={videoInputRef}
                     type="file"
                     accept="video/*"
                     onChange={(event) => {
@@ -441,12 +463,21 @@ function CharacterMixPage({
               ) : null}
             </div>
           ) : (
-            <div className="studio-canvas-ghost">
+            <div
+              className={`studio-canvas-ghost${isCanvasDragging ? " is-dragging" : ""}`}
+              onClick={handleCanvasClick}
+              onDragOver={handleCanvasDragOver}
+              onDragLeave={handleCanvasDragLeave}
+              onDrop={handleCanvasDrop}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") handleCanvasClick(); }}
+            >
               <div className="studio-canvas-ghost__icon">
                 <SwapOutlined />
               </div>
               <div className="studio-canvas-ghost__title">上传人物图与参考视频</div>
-              <div className="studio-canvas-ghost__hint">将静态角色迁移到参考视频的动作与表情中。</div>
+              <div className="studio-canvas-ghost__hint">点击或拖拽上传；支持人物图片 (PNG/JPG) 和参考视频 (MP4/MOV/AVI)</div>
             </div>
           )
         }

src/features/community-review/CommunityCaseAddPage.tsx

@@ -6,10 +6,11 @@ import {
   PictureOutlined,
   UploadOutlined,
 } from "@ant-design/icons";
-import { useEffect, useMemo, useRef, useState, type ChangeEvent } from "react";
+import { useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent } from "react";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
 import { communityClient } from "../../api/communityClient";
 import WorkspacePageShell from "../../components/WorkspacePageShell";
+import "../../styles/pages/compliance.css";
 import type { WebCanvasWorkflow, WebUserSession } from "../../types";
 import { getWorkflowCoverUrl, isCanvasWorkflow } from "../community/communityCaseUtils";
 import { canManageCommunityCases } from "./communityPermissions";
@@ -72,6 +73,29 @@ export default function CommunityCaseAddPage({ session, onOpenLogin, onOpenRevie
   const allowed = canManageCommunityCases(session);
   const imageInputRef = useRef<HTMLInputElement | null>(null);
   const workflowInputRef = useRef<HTMLInputElement | null>(null);
+  const [isImageDragging, setIsImageDragging] = useState(false);
+  const [isWorkflowDragging, setIsWorkflowDragging] = useState(false);
+
+  const handleImageDragOver = (e: DragEvent) => { e.preventDefault(); if (e.dataTransfer.types.includes("Files")) setIsImageDragging(true); };
+  const handleImageDragLeave = (e: DragEvent) => { e.preventDefault(); if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsImageDragging(false); };
+  const handleImageDrop = (e: DragEvent) => {
+    e.preventDefault();
+    setIsImageDragging(false);
+    if (e.dataTransfer.files.length) {
+      void handleImageChange({ target: { files: e.dataTransfer.files } } as ChangeEvent<HTMLInputElement>);
+    }
+  };
+
+  const handleWorkflowDragOver = (e: DragEvent) => { e.preventDefault(); if (e.dataTransfer.types.includes("Files")) setIsWorkflowDragging(true); };
+  const handleWorkflowDragLeave = (e: DragEvent) => { e.preventDefault(); if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsWorkflowDragging(false); };
+  const handleWorkflowDrop = (e: DragEvent) => {
+    e.preventDefault();
+    setIsWorkflowDragging(false);
+    if (e.dataTransfer.files.length) {
+      void handleWorkflowChange({ target: { files: e.dataTransfer.files } } as ChangeEvent<HTMLInputElement>);
+    }
+  };
+
   const [target, setTarget] = useState<CaseTarget>("generation");
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
@@ -330,7 +354,14 @@ export default function CommunityCaseAddPage({ session, onOpenLogin, onOpenRevie
                 </label>
                 <div className="community-case-add-upload-row">
                   <input ref={imageInputRef} type="file" accept="image/*" hidden onChange={handleImageChange} />
-                  <button type="button" onClick={() => imageInputRef.current?.click()}>
+                  <button
+                    type="button"
+                    className={isImageDragging ? "is-dragging" : ""}
+                    onClick={() => imageInputRef.current?.click()}
+                    onDragOver={handleImageDragOver}
+                    onDragLeave={handleImageDragLeave}
+                    onDrop={handleImageDrop}
+                  >
                     <UploadOutlined />
                     上传图片
                   </button>
@@ -344,7 +375,14 @@ export default function CommunityCaseAddPage({ session, onOpenLogin, onOpenRevie
               <>
                 <div className="community-case-add-upload-row">
                   <input ref={workflowInputRef} type="file" accept="application/json,.json" hidden onChange={handleWorkflowChange} />
-                  <button type="button" onClick={() => workflowInputRef.current?.click()}>
+                  <button
+                    type="button"
+                    className={isWorkflowDragging ? "is-dragging" : ""}
+                    onClick={() => workflowInputRef.current?.click()}
+                    onDragOver={handleWorkflowDragOver}
+                    onDragLeave={handleWorkflowDragLeave}
+                    onDrop={handleWorkflowDrop}
+                  >
                     <UploadOutlined />
                     上传 JSON
                   </button>

src/features/community-review/CommunityReviewPage.tsx

@@ -11,6 +11,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { communityClient, type ServerCommunityCase } from "../../api/communityClient";
 import { reportClient, type AdminReportItem } from "../../api/reportClient";
 import WorkspacePageShell from "../../components/WorkspacePageShell";
+import "../../styles/pages/compliance.css";
 import type { WebUserSession } from "../../types";
 import { canManageCommunityCases, canReviewCommunity } from "./communityPermissions";
 

src/features/digital-human/DigitalHumanPage.tsx

@@ -98,6 +98,10 @@ function DigitalHumanPage({
   activeTaskIdRef.current = activeTaskId;
   const keepaliveRestoredRef = useRef(false);
   const [isDragging, setIsDragging] = useState(false);
+  const imageInputRef = useRef<HTMLInputElement | null>(null);
+  const audioInputRef = useRef<HTMLInputElement | null>(null);
+  const canvasDragCounterRef = useRef(0);
+  const [isCanvasDragging, setIsCanvasDragging] = useState(false);
 
   useEffect(() => {
     return () => {
@@ -171,6 +175,39 @@ function DigitalHumanPage({
     }
   };
 
+  const handleCanvasDragOver = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.types.includes("Files")) setIsCanvasDragging(true); };
+  const handleCanvasDragLeave = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); if (e.currentTarget === e.target || !e.currentTarget.contains(e.relatedTarget as Node)) setIsCanvasDragging(false); };
+  const handleCanvasDrop = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsCanvasDragging(false);
+    const file = e.dataTransfer.files[0];
+    if (!file) return;
+    if (file.type.startsWith("image/")) {
+      if (imagePreview) URL.revokeObjectURL(imagePreview);
+      setImageName(file.name);
+      setImageFile(file);
+      setImagePreview(URL.createObjectURL(file));
+      pushDebugEntry("选择图片", `${file.name} / ${file.type || "unknown"} / ${formatFileSize(file.size)}`);
+      setNotice(`已拖放参考图 ${file.name}`);
+    } else if (file.type.startsWith("audio/")) {
+      if (audioPreview) URL.revokeObjectURL(audioPreview);
+      setAudioName(file.name);
+      setAudioFile(file);
+      setAudioPreview(URL.createObjectURL(file));
+      pushDebugEntry("选择音频", `${file.name} / ${file.type || "unknown"} / ${formatFileSize(file.size)}`);
+      setNotice(`已拖放音频 ${file.name}`);
+    }
+  };
+
+  const handleCanvasClick = () => {
+    if (!imagePreview) {
+      imageInputRef.current?.click();
+    } else if (!audioPreview) {
+      audioInputRef.current?.click();
+    }
+  };
+
   const handleDownloadResult = async () => {
     if (!resultVideoUrl || isDownloadingResult) return;
     setIsDownloadingResult(true);
@@ -463,6 +500,7 @@ function DigitalHumanPage({
               <div className="studio-panel__section-body">
                 <label className={imageName ? "studio-upload-slot--filled" : "studio-upload-slot--empty"}>
                   <input
+                    ref={imageInputRef}
                     type="file"
                     accept="image/*"
                     onChange={(event) => {
@@ -501,6 +539,7 @@ function DigitalHumanPage({
               <div className="studio-panel__section-body">
                 <label className={audioName ? "studio-upload-slot--filled" : "studio-upload-slot--empty"}>
                   <input
+                    ref={audioInputRef}
                     type="file"
                     accept="audio/*"
                     onChange={(event) => {
@@ -541,12 +580,21 @@ function DigitalHumanPage({
               <img src={imagePreview} alt="参考人像" />
             </div>
           ) : (
-            <div className="studio-canvas-ghost">
+            <div
+              className={`studio-canvas-ghost${isCanvasDragging ? " is-dragging" : ""}`}
+              onClick={handleCanvasClick}
+              onDragOver={handleCanvasDragOver}
+              onDragLeave={handleCanvasDragLeave}
+              onDrop={handleCanvasDrop}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") handleCanvasClick(); }}
+            >
               <div className="studio-canvas-ghost__icon">
                 <CustomerServiceOutlined />
               </div>
               <div className="studio-canvas-ghost__title">上传参考人像与音频</div>
-              <div className="studio-canvas-ghost__hint">网页端首版只做本地预览，正式生成仍会继续走服务端队列。</div>
+              <div className="studio-canvas-ghost__hint">点击或拖拽上传；支持图片 (PNG/JPG/WEBP) 和音频 (MP3/WAV/M4A)</div>
             </div>
           )
         }

src/features/ecommerce/EcommercePage.tsx

@@ -842,6 +842,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const skipInitialCloneAutoSaveRef = useRef(true);
   const skipNextCloneAutoSaveRef = useRef(false);
   const [activeTool, setActiveTool] = useState<ProductKitToolKey>("clone");
+  useEffect(() => { setPreviewZoom(1); }, [activeTool]);
   const [setImages, setSetImages] = useState<CloneImageItem[]>([]);
   const [productSetPlatform, setProductSetPlatform] = useState(platformOptions[0]);
   const [productSetMarket, setProductSetMarket] = useState(marketOptions[0]);
@@ -882,6 +883,30 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const [videoOutfitRefFile, setVideoOutfitRefFile] = useState<File | null>(null);
   const [isCloneSettingsCollapsed, setIsCloneSettingsCollapsed] = useState(false);
   const [previewZoom, setPreviewZoom] = useState(1);
+
+  const handlePreviewWheel = (event: React.WheelEvent<HTMLElement>) => {
+    if (!event.currentTarget) return;
+    event.preventDefault();
+    const container = event.currentTarget as HTMLElement;
+    const rect = container.getBoundingClientRect();
+    const cursorX = event.clientX - rect.left;
+    const cursorY = event.clientY - rect.top;
+    const zoomDelta = event.deltaY < 0 ? 1.08 : 0.92;
+
+    const nextZoom = Math.min(2, Math.max(0.25, previewZoom * zoomDelta));
+    if (nextZoom === previewZoom) return;
+
+    const contentX = (cursorX + container.scrollLeft) / previewZoom;
+    const contentY = (cursorY + container.scrollTop) / previewZoom;
+
+    setPreviewZoom(nextZoom);
+
+    requestAnimationFrame(() => {
+      container.scrollLeft = contentX * nextZoom - cursorX;
+      container.scrollTop = contentY * nextZoom - cursorY;
+    });
+  };
+
   const [requirement, setRequirement] = useState("");
   const [requirementImageMentionQuery, setRequirementImageMentionQuery] = useState<string | null>(null);
   const [cloneSettingName, setCloneSettingName] = useState("新建创作");
@@ -963,6 +988,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const selectedProductSetOutput =
     productSetOutputOptions.find((option) => option.key === productSetOutput) ?? productSetOutputOptions[0]!;
   const selectedCloneOutput = cloneOutputOptions.find((option) => option.key === cloneOutput) ?? cloneOutputOptions[1]!;
+  const cloneRequirementPlaceholder =
+    cloneOutput === "model"
+      ? "建议包含以下信息：产品名称、核心卖点、期望场景、模特外貌描写（如小麦色皮肤、齐刘海、眼角有泪痣）、具体参数"
+      : "建议包含以下信息，产品名称，核心卖点，期望场景，具体参数";
   const productSetPreviewReady = productSetStatus === "done";
   const cloneSetTotal = useMemo(
     () => Object.values(cloneSetCounts).reduce((sum, value) => sum + value, 0),
@@ -1909,7 +1938,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
               age: cloneModelAge,
               ethnicity: cloneModelEthnicity,
               body: cloneModelBody,
-              appearance: cloneModelAppearance,
               scenes: selectedCloneModelScenes,
               customScene: cloneModelCustomScene,
             }
@@ -2200,7 +2228,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
       cloneModelSelects={cloneModelSelects}
       openCloneModelSelect={openCloneModelSelect}
       cloneModelSelectDropUp={cloneModelSelectDropUp}
-      cloneModelAppearance={cloneModelAppearance}
       cloneVideoQuality={cloneVideoQuality}
       cloneVideoQualityOptions={cloneVideoQualityOptions}
       cloneVideoDuration={cloneVideoDuration}
@@ -2232,7 +2259,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
       setCloneModelCustomScene={setCloneModelCustomScene}
       setOpenCloneModelSelect={setOpenCloneModelSelect}
       setCloneModelSelectDropUp={setCloneModelSelectDropUp}
-      setCloneModelAppearance={setCloneModelAppearance}
       setCloneVideoQuality={setCloneVideoQuality}
       setCloneVideoDuration={setCloneVideoDuration}
       clampCloneVideoDuration={clampCloneVideoDuration}
@@ -2332,7 +2358,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   );
 
   const setPreview = (
-    <main className="product-clone-preview product-clone-preview--set" aria-label="AI商品套图预览">
+    <main className="product-clone-preview product-clone-preview--set" aria-label="AI商品套图预览" onWheel={handlePreviewWheel}>
       <div className="product-clone-preview__headline">
         <h1>预览</h1>
         <p>
@@ -2400,7 +2426,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   );
 
   const clonePreview = (
-    <main className="product-clone-preview clone-ai-preview" aria-label="电商AI作图预览">
+    <main className="product-clone-preview clone-ai-preview" aria-label="电商AI作图预览" onWheel={handlePreviewWheel}>
       <header className="clone-ai-preview-header">
         <strong>预览</strong>
         <span>
@@ -2595,7 +2621,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
               if (event.key === "Escape") setRequirementImageMentionQuery(null);
             }}
             maxLength={500}
-            placeholder="建议包含以下信息，产品名称，核心卖点，期望场景，具体参数"
+            placeholder={cloneRequirementPlaceholder}
           />
           {requirementImageMentionQuery !== null && ecommerceMentionImages.length ? (
             <ImageMentionMenu images={ecommerceMentionImages} query={requirementImageMentionQuery} onSelect={insertRequirementImageMention} />
@@ -2610,7 +2636,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   );
 
   const detailPreview = (
-    <main className="product-clone-preview product-clone-preview--detail" aria-label="A+详情预览">
+    <main className="product-clone-preview product-clone-preview--detail" aria-label="A+详情预览" onWheel={handlePreviewWheel}>
       <div className="product-clone-preview__headline">
         <h1>A+/详情页</h1>
         <p>
@@ -2647,7 +2673,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   );
 
   const tryOnPreview = (
-    <main className="product-clone-preview product-clone-preview--try-on" aria-label="服饰穿戴预览">
+    <main className="product-clone-preview product-clone-preview--try-on" aria-label="服饰穿戴预览" onWheel={handlePreviewWheel}>
       <div className="product-clone-preview__headline">
         <h1>AI服饰穿戴</h1>
         <p>上传服装图，定制专属模特，即刻生成多种场景不同姿势套图。</p>

src/features/ecommerce/panels/EcommerceClonePanel.tsx

@@ -100,7 +100,6 @@ interface EcommerceClonePanelProps {
   cloneModelSelects: CloneModelSelectItem[];
   openCloneModelSelect: CloneModelSelectKey | null;
   cloneModelSelectDropUp: boolean;
-  cloneModelAppearance: string;
   cloneVideoQuality: CloneVideoQualityKey;
   cloneVideoQualityOptions: CloneVideoQualityOption[];
   cloneVideoDuration: number;
@@ -132,7 +131,6 @@ interface EcommerceClonePanelProps {
   setCloneModelCustomScene: (value: string) => void;
   setOpenCloneModelSelect: (value: CloneModelSelectKey | null) => void;
   setCloneModelSelectDropUp: (value: boolean) => void;
-  setCloneModelAppearance: (value: string) => void;
   setCloneVideoQuality: (value: CloneVideoQualityKey) => void;
   setCloneVideoDuration: (value: number) => void;
   clampCloneVideoDuration: (value: number) => number;
@@ -172,7 +170,6 @@ export default function EcommerceClonePanel({
   cloneModelSelects,
   openCloneModelSelect,
   cloneModelSelectDropUp,
-  cloneModelAppearance,
   cloneVideoQuality,
   cloneVideoQualityOptions,
   cloneVideoDuration,
@@ -204,7 +201,6 @@ export default function EcommerceClonePanel({
   setCloneModelCustomScene,
   setOpenCloneModelSelect,
   setCloneModelSelectDropUp,
-  setCloneModelAppearance,
   setCloneVideoQuality,
   setCloneVideoDuration,
   clampCloneVideoDuration,
@@ -668,14 +664,6 @@ export default function EcommerceClonePanel({
                       );
                     })}
                   </div>
-                  <label className="clone-ai-model-textarea">
-                    <strong>外貌细节（可选）</strong>
-                    <textarea
-                      value={cloneModelAppearance}
-                      onChange={(event) => setCloneModelAppearance(event.target.value)}
-                      placeholder="例如：小麦色皮肤、齐刘海、眼角有泪痣..."
-                    />
-                  </label>
                 </div>
               )}
             </div>
@@ -758,7 +746,7 @@ export default function EcommerceClonePanel({
                   style={{ display: "none" }}
                 />
                 <button type="button" className="clone-ai-video-outfit-upload-btn" onClick={() => videoOutfitVideoRef.current?.click()}>
-                  {videoOutfitVideoUrl ? "重新选择视频" : "选择视频文件"}
+                  {videoOutfitVideoUrl ? "重新上传视频" : "点击上传视频"}
                 </button>
                 {videoOutfitVideoUrl ? <span className="clone-ai-video-outfit-info">已选择视频</span> : null}
               </div>
@@ -774,7 +762,7 @@ export default function EcommerceClonePanel({
                   style={{ display: "none" }}
                 />
                 <button type="button" className="clone-ai-video-outfit-upload-btn" onClick={() => videoOutfitRefRef.current?.click()}>
-                  {videoOutfitRefUrl ? "重新选择参考图" : "选择参考图"}
+                  {videoOutfitRefUrl ? "重新上传参考图" : "点击上传参考图"}
                 </button>
                 {videoOutfitRefUrl ? <span className="clone-ai-video-outfit-info">已选择参考图</span> : null}
               </div>

src/features/ecommerce/panels/EcommerceDetailPanel.tsx

@@ -1,5 +1,5 @@
 import { CloudUploadOutlined, LoadingOutlined, QuestionCircleOutlined } from "@ant-design/icons";
-import type { ChangeEvent, RefObject } from "react";
+import { useState, type ChangeEvent, type DragEvent, type RefObject } from "react";
 import { EcommerceProgressBar } from "../EcommerceProgressBar";
 
 interface EcommerceDetailPanelProps {
@@ -59,6 +59,31 @@ export default function EcommerceDetailPanel({
   handleDetailGenerate,
   onCancelGenerate,
 }: EcommerceDetailPanelProps) {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragOver = (e: DragEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer.types.includes("Files")) setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: DragEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.currentTarget === e.target || !e.currentTarget.contains(e.relatedTarget as Node)) {
+      setIsDragging(false);
+    }
+  };
+
+  const handleDrop = (e: DragEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    if (e.dataTransfer.files.length) {
+      handleDetailUpload({ target: { files: e.dataTransfer.files } } as ChangeEvent<HTMLInputElement>);
+    }
+  };
+
   return (
     <>
       <div className="product-clone-panel__scroll">
@@ -67,7 +92,14 @@ export default function EcommerceDetailPanel({
             商品原图
             <QuestionCircleOutlined />
           </h2>
-          <button type="button" className="product-clone-upload-zone product-detail-upload" onClick={() => detailInputRef.current?.click()}>
+          <button
+            type="button"
+            className={`product-clone-upload-zone product-detail-upload${isDragging ? " is-dragging" : ""}`}
+            onClick={() => detailInputRef.current?.click()}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+          >
             <strong>
               <CloudUploadOutlined />
               上传图片

src/features/ecommerce/panels/EcommerceTryOnPanel.tsx

@@ -1,5 +1,5 @@
 import { CloudUploadOutlined, LoadingOutlined, QuestionCircleOutlined } from "@ant-design/icons";
-import type { ChangeEvent, RefObject } from "react";
+import { useState, type ChangeEvent, type DragEvent, type RefObject } from "react";
 import { EcommerceProgressBar } from "../EcommerceProgressBar";
 
 interface EcommerceTryOnPanelProps {
@@ -73,12 +73,44 @@ export default function EcommerceTryOnPanel({
   handleTryOnGenerate,
   onCancelGenerate,
 }: EcommerceTryOnPanelProps) {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragOver = (e: DragEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer.types.includes("Files")) setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: DragEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.currentTarget === e.target || !e.currentTarget.contains(e.relatedTarget as Node)) {
+      setIsDragging(false);
+    }
+  };
+
+  const handleDrop = (e: DragEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    if (e.dataTransfer.files.length) {
+      handleGarmentUpload({ target: { files: e.dataTransfer.files } } as ChangeEvent<HTMLInputElement>);
+    }
+  };
+
   return (
     <>
       <div className="product-clone-panel__scroll">
         <section className="product-clone-field">
           <h2>服装图片</h2>
-          <button type="button" className="product-clone-upload-zone product-try-on-upload" onClick={() => garmentInputRef.current?.click()}>
+          <button
+            type="button"
+            className={`product-clone-upload-zone product-try-on-upload${isDragging ? " is-dragging" : ""}`}
+            onClick={() => garmentInputRef.current?.click()}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+          >
             <strong>
               <CloudUploadOutlined />
               服装图片

src/features/home/HomePage.tsx

@@ -35,6 +35,7 @@ const {
 
 interface HomePageProps {
   onOpenGenerate: () => void;
+  onStartOnboarding?: () => void;
   onOpenCanvas?: () => void;
   onOpenEcommerce: () => void;
   onOpenScriptReview?: () => void;
@@ -476,7 +477,7 @@ function EcommerceFeatureShowcase() {
   );
 }
 
-function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptReview, onOpenTokenMonitor, onSelectView, onOpenImageTool }: HomePageProps) {
+function HomePage({ onOpenGenerate, onStartOnboarding, onOpenCanvas, onOpenEcommerce, onOpenScriptReview, onOpenTokenMonitor, onSelectView, onOpenImageTool }: HomePageProps) {
   const [splashDismissed, setSplashDismissed] = useState(() => sessionStorage.getItem("omniai:splash-seen") === "1");
   const [activeSlideIndex, setActiveSlideIndex] = useState(0);
   const [carouselMotion, setCarouselMotion] = useState<HomeCarouselMotion | null>(null);
@@ -628,7 +629,7 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
           </div>
 
           <div className="omni-home__actions" aria-label="首页入口">
-            <button type="button" className="omni-home__entry" onClick={onOpenGenerate}>
+            <button type="button" className="omni-home__entry" onClick={onStartOnboarding || onOpenGenerate}>
               <PlusOutlined />
               <span>
                 快速生成

src/features/image-workbench/ImageWorkbenchPage.tsx

@@ -947,19 +947,22 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
                 </div>
               </div>
             ) : (
-              <button
+              <div
-                type="button"
+                className={`studio-canvas-ghost${isInpaintDragging ? " is-dragging" : ""}`}
-                className={`image-workbench-empty image-workbench-empty--button${isInpaintDragging ? " is-dragging" : ""}`}
                 onClick={() => inpaintFileInputRef.current?.click()}
                 onDragOver={handleInpaintDragOver}
                 onDragLeave={handleInpaintDragLeave}
                 onDrop={handleInpaintDrop}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") inpaintFileInputRef.current?.click(); }}
               >
-                {isInpaintDragging ? <span className="image-workbench-upload-drop-overlay" style={{ borderRadius: "var(--radius-sm)" }}><span>释放文件以上传</span></span> : null}
+                <div className="studio-canvas-ghost__icon">
-                <FileImageOutlined />
+                  <FileImageOutlined />
-                <strong>拖拽或选择图片</strong>
+                </div>
-                <span>支持 PNG / JPG / WebP</span>
+                <div className="studio-canvas-ghost__title">点击或拖拽上传图片</div>
-              </button>
+                <div className="studio-canvas-ghost__hint">支持 PNG / JPG / WebP，上传后使用画笔标注需要重绘的区域</div>
+              </div>
             )}
           </section>
 
@@ -1389,12 +1392,21 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
               <img src={referenceImage} alt="参考图预览" />
             </div>
           ) : (
-            <div className="studio-canvas-ghost">
+            <div
+              className={`studio-canvas-ghost${isDragging ? " is-dragging" : ""}`}
+              onClick={() => fileInputRef.current?.click()}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") fileInputRef.current?.click(); }}
+            >
               <div className="studio-canvas-ghost__icon">
                 <PictureOutlined />
               </div>
               <div className="studio-canvas-ghost__title">上传参考图后在此预览</div>
-              <div className="studio-canvas-ghost__hint">生成结果也会显示在这里</div>
+              <div className="studio-canvas-ghost__hint">点击或拖拽上传 (PNG / JPG / WebP)，生成结果也会显示在这里</div>
             </div>
           )}
         </section>

src/features/profile/ProfilePage.tsx

@@ -18,7 +18,7 @@ import {
   ShareAltOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import { useEffect, useMemo, useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent } from "react";
+import { useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent, type FormEvent, type KeyboardEvent } from "react";
 import { createPortal } from "react-dom";
 import "../../styles/pages/profile.css";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
@@ -228,6 +228,28 @@ function ProfilePage({
   const avatarLabel = displayName.trim().slice(0, 1).toUpperCase() || "访";
   const avatarInputRef = useRef<HTMLInputElement | null>(null);
   const bannerInputRef = useRef<HTMLInputElement | null>(null);
+  const [isBannerDragging, setIsBannerDragging] = useState(false);
+  const [isAvatarDragging, setIsAvatarDragging] = useState(false);
+
+  const handleBannerDragOver = (e: DragEvent) => { e.preventDefault(); if (e.dataTransfer.types.includes("Files")) setIsBannerDragging(true); };
+  const handleBannerDragLeave = (e: DragEvent) => { e.preventDefault(); if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsBannerDragging(false); };
+  const handleBannerDrop = (e: DragEvent) => {
+    e.preventDefault();
+    setIsBannerDragging(false);
+    if (e.dataTransfer.files.length) {
+      handleBannerUpload({ target: { files: e.dataTransfer.files } } as ChangeEvent<HTMLInputElement>);
+    }
+  };
+
+  const handleAvatarDragOver = (e: DragEvent) => { e.preventDefault(); if (e.dataTransfer.types.includes("Files")) setIsAvatarDragging(true); };
+  const handleAvatarDragLeave = (e: DragEvent) => { e.preventDefault(); if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsAvatarDragging(false); };
+  const handleAvatarDrop = (e: DragEvent) => {
+    e.preventDefault();
+    setIsAvatarDragging(false);
+    if (e.dataTransfer.files.length) {
+      handleAvatarUpload({ target: { files: e.dataTransfer.files } } as ChangeEvent<HTMLInputElement>);
+    }
+  };
 
   const [mode, setMode] = useState<WebAuthMode>("login");
   const [authTab, setAuthTab] = useState<AuthTab>("password");
@@ -1047,8 +1069,11 @@ function ProfilePage({
         <input ref={avatarInputRef} type="file" accept="image/*" hidden onChange={(event) => void handleAvatarUpload(event)} />
         <input ref={bannerInputRef} type="file" accept="image/*" hidden onChange={(event) => void handleBannerUpload(event)} />
         <header
-          className={`profile-page__banner${bannerUrl ? " has-image" : ""}`}
+          className={`profile-page__banner${bannerUrl ? " has-image" : ""}${isBannerDragging ? " is-dragging" : ""}`}
           style={bannerUrl ? { backgroundImage: `url(${bannerUrl})` } : undefined}
+          onDragOver={handleBannerDragOver}
+          onDragLeave={handleBannerDragLeave}
+          onDrop={handleBannerDrop}
         >
           <button type="button" className="profile-page__banner-btn" onClick={() => bannerInputRef.current?.click()} aria-label="更换背景">
             <CameraOutlined />
@@ -1060,13 +1085,21 @@ function ProfilePage({
         <div className="profile-page__body">
           <aside className="profile-page__sidebar">
             <div className="profile-page__sidebar-head">
-              <div className="profile-page__avatar-ring">
+              <div className={`profile-page__avatar-ring${isAvatarDragging ? " is-dragging" : ""}`}>
                 {avatarUrl ? (
                   <img className="profile-page__avatar" src={avatarUrl} alt="" />
                 ) : (
                   <span className="profile-page__avatar">{avatarLabel}</span>
                 )}
-                <button type="button" className="profile-page__avatar-edit" onClick={() => avatarInputRef.current?.click()} aria-label="更换头像">
+                <button
+                  type="button"
+                  className="profile-page__avatar-edit"
+                  onClick={() => avatarInputRef.current?.click()}
+                  onDragOver={handleAvatarDragOver}
+                  onDragLeave={handleAvatarDragLeave}
+                  onDrop={handleAvatarDrop}
+                  aria-label="更换头像"
+                >
                   <CameraOutlined />
                 </button>
                 <span className="profile-page__avatar-badge">

src/features/report/ReportPage.tsx

@@ -2,6 +2,7 @@ import { CheckCircleOutlined, FlagOutlined, MailOutlined, PhoneOutlined } from "
 import { useEffect, useState, type FormEvent } from "react";
 import { publicConfigClient, type WebPublicConfig } from "../../api/publicConfigClient";
 import { reportClient, type ReportInput } from "../../api/reportClient";
+import "../../styles/pages/compliance.css";
 
 type SubmitState = "idle" | "loading" | "success" | "error";
 

src/features/resolution-upscale/ResolutionUpscalePage.tsx

@@ -601,11 +601,20 @@ function ResolutionUpscalePage({
               </div>
             )
           ) : (
-            <div className="studio-canvas-ghost">
+            <div
+              className={`studio-canvas-ghost${isDragging ? " is-dragging" : ""}`}
+              onClick={() => fileInputRef.current?.click()}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") fileInputRef.current?.click(); }}
+            >
               <div className="studio-canvas-ghost__icon">
                 <ThunderboltOutlined />
               </div>
-              <div className="studio-canvas-ghost__title">{mode === "image" ? "拖拽或选择图片" : "拖拽或选择视频"}</div>
+              <div className="studio-canvas-ghost__title">{mode === "image" ? "点击或拖拽上传图片" : "点击或拖拽上传视频"}</div>
               <div className="studio-canvas-ghost__hint">{mode === "image" ? "支持 PNG / JPG / WebP" : "支持 MP4 / MOV / WebM"}</div>
             </div>
           )}

src/features/script-tokens/ScriptTokensPage.tsx

@@ -679,14 +679,23 @@ function ScriptTokensPage() {
               </div>
             ) : !result && (
               <div className="script-eval-v5-input-section">
-                <div className="script-eval-v5-illustration" aria-label="上传剧本并开始评测">
+                <div className={`script-eval-v5-illustration${isDragging ? " is-dragging" : ""}`} aria-label="上传剧本并开始评测">
                   <div
                     className="script-eval-v5-illustration-hit"
                     role="button"
                     tabIndex={0}
                     onClick={() => fileInputRef.current?.click()}
                     onKeyDown={uploadKeyDown}
+                    onDragOver={handleDragOver}
+                    onDragLeave={handleDragLeave}
+                    onDrop={handleDrop}
                   >
+                    {isDragging && (
+                      <div className="script-eval-v5-upload-drop-overlay">
+                        <UploadOutlined />
+                        <span>释放文件以上传</span>
+                      </div>
+                    )}
                     <div className="script-eval-v5-upload-card-icon">
                       <ShellIcon name="file-text" />
                     </div>

src/features/subtitle-removal/SubtitleRemovalPage.tsx

@@ -447,15 +447,19 @@ function SubtitleRemovalPage({
             </div>
           ) : (
             <div
-              className="studio-canvas-ghost"
+              className={`studio-canvas-ghost${isDragging ? " is-dragging" : ""}`}
+              onClick={() => fileInputRef.current?.click()}
               onDragOver={handleDragOver}
               onDragLeave={handleDragLeave}
               onDrop={handleFileDrop}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") fileInputRef.current?.click(); }}
             >
               <div className="studio-canvas-ghost__icon">
                 <VideoCameraOutlined />
               </div>
-              <div className="studio-canvas-ghost__title">拖拽或选择视频</div>
+              <div className="studio-canvas-ghost__title">点击或拖拽上传视频</div>
               <div className="studio-canvas-ghost__hint">仅支持 MP4，最大 1GB，最高 1080P</div>
             </div>
           )}

src/features/watermark-removal/WatermarkRemovalPage.tsx

@@ -12,7 +12,7 @@ import {
   ScissorOutlined,
   SwapOutlined,
 } from "@ant-design/icons";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, type DragEvent } from "react";
 import "../../styles/pages/more-tools.css";
 import "../../styles/pages/image-workbench.css";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
@@ -48,6 +48,7 @@ function WatermarkRemovalPage({
   const [status, setStatus] = useState("上传含水印的图片，点击开始去水印");
   const [activeTaskId, setActiveTaskId] = useState("");
   const [taskProgress, setTaskProgress] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
   const [isSavingAsset, setIsSavingAsset] = useState(false);
   const [isDownloading, setIsDownloading] = useState(false);
@@ -124,6 +125,10 @@ function WatermarkRemovalPage({
     setStatus(`已导入 ${file.name}`);
   };
 
+  const handleDragOver = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.types.includes("Files")) setIsDragging(true); };
+  const handleDragLeave = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); if (e.currentTarget === e.target || !e.currentTarget.contains(e.relatedTarget as Node)) setIsDragging(false); };
+  const handleCanvasDrop = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); setIsDragging(false); handleFileDrop(e); };
+
   const handleImportUrl = () => {
     const normalizedUrl = sourceUrl.trim();
     if (!/^https?:\/\//i.test(normalizedUrl)) {
@@ -403,17 +408,22 @@ function WatermarkRemovalPage({
               </div>
             </div>
           ) : (
-            <button
+            <div
-              type="button"
+              className={`studio-canvas-ghost${isDragging ? " is-dragging" : ""}`}
-              className="image-workbench-empty image-workbench-empty--button"
               onClick={() => fileInputRef.current?.click()}
-              onDragOver={(e) => e.preventDefault()}
+              onDragOver={handleDragOver}
-              onDrop={handleFileDrop}
+              onDragLeave={handleDragLeave}
+              onDrop={handleCanvasDrop}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") fileInputRef.current?.click(); }}
             >
-              <DeleteOutlined />
+              <div className="studio-canvas-ghost__icon">
-              <strong>拖拽或选择含水印图片</strong>
+                <DeleteOutlined />
-              <span>支持 PNG / JPG / WebP</span>
+              </div>
-            </button>
+              <div className="studio-canvas-ghost__title">点击或拖拽上传图片</div>
+              <div className="studio-canvas-ghost__hint">支持 PNG / JPG / WebP，上传含水印图片后点击"开始去水印"</div>
+            </div>
           )}
         </section>
       </main>

src/features/workbench/WorkbenchPage.tsx

@@ -67,7 +67,6 @@ import { downloadResultAsset } from "./workbenchDownload";
 import { translateTaskError } from "../../utils/translateTaskError";
 import {
   buildLocalTimeoutMessage,
-  formatTextTokenUsage,
   getTaskTimeoutPolicy,
   isTaskLocallyTimedOut,
 } from "../../utils/taskLifecycle";
@@ -79,10 +78,12 @@ import {
 import { isViduModel } from "../../utils/viduRouting";
 import { isPixverseModel } from "../../utils/pixverseRouting";
 import { resolveVideoRequestModel } from "../../utils/resolveVideoModel";
-import { ENTERPRISE_DEFAULT_VIDEO_MODEL } from "../../utils/enterpriseVideoPolicy";
+import { calculateEnterpriseVideoCredits, ENTERPRISE_DEFAULT_VIDEO_MODEL } from "../../utils/enterpriseVideoPolicy";
 import {
   getImageQualityOptions,
+  getImageQualityOptionsForContext,
   getDefaultImageQuality,
+  getDefaultImageQualityForContext,
   getVideoQualityOptions,
   getDefaultVideoQuality,
   getVideoQualityLabel,
@@ -192,12 +193,15 @@ import {
   PromptPreviewLayer,
 } from "./WorkbenchPromptPreview";
 import { SelectChip, CompoundSelectChip, InlineOptionChip } from "./WorkbenchSelectChips";
+import OnboardingTour, { type TourPhaseId } from "../../components/OnboardingTour";
 
 export type { WorkbenchResultActionPayload } from "./workbenchConstants";
 
 interface WorkbenchPageProps {
   isAuthenticated: boolean;
   session: WebUserSession | null;
+  onboarding?: boolean;
+  onEndOnboarding?: () => void;
   onRequireLogin: (input: CreatePreviewTaskInput) => void;
   onOpenResultInCanvas?: (payload: import("./workbenchConstants").WorkbenchResultActionPayload) => void;
   onRefreshUsage?: () => void;
@@ -221,9 +225,17 @@ const MODE_ICONS: Record<WorkbenchMode, ReactNode> = {
   video: <VideoCameraOutlined />,
 };
 
+function formatCreditValue(value: number): string {
+  if (!Number.isFinite(value)) return "-";
+  if (value >= 100) return Math.round(value).toLocaleString("zh-CN");
+  return Number(value.toFixed(2)).toString();
+}
+
 function WorkbenchPage({
   isAuthenticated,
   session,
+  onboarding,
+  onEndOnboarding,
   onRequireLogin,
   onOpenResultInCanvas,
   onRefreshUsage,
@@ -257,7 +269,41 @@ function WorkbenchPage({
   const renderedMessageIdsRef = useRef<string[]>([]);
   const hasHandledInitialMessagesRef = useRef(false);
 
-  const [activeMode, setActiveMode] = useState<WorkbenchMode>("video");
+  // Onboarding signal — init from prop or localStorage
+  const [effectiveOnboarding, setEffectiveOnboarding] = useState(
+    () => onboarding || (() => { try { return window.localStorage.getItem("omniai:onboarding") === "1"; } catch { return false; } })(),
+  );
+
+  // Track whether onboarding prop was ever true, to avoid overwriting localStorage-initiated true
+  const obWasActiveRef = useRef(onboarding);
+  useEffect(() => {
+    if (onboarding) {
+      obWasActiveRef.current = true;
+      setEffectiveOnboarding(true);
+    } else if (obWasActiveRef.current) {
+      // Only deactivate when prop transitions true→false (user dismissed)
+      setEffectiveOnboarding(false);
+      obWasActiveRef.current = false;
+    }
+    // If prop was never true, don't touch effectiveOnboarding (preserves localStorage init)
+  }, [onboarding]);
+
+  // Poll localStorage as a fallback (handles cases where prop isn't propagated)
+  useEffect(() => {
+    if (effectiveOnboarding) return;
+    const check = () => {
+      try {
+        if (window.localStorage.getItem("omniai:onboarding") === "1") {
+          setEffectiveOnboarding(true);
+        }
+      } catch {}
+    };
+    check();
+    const interval = setInterval(check, 200);
+    return () => clearInterval(interval);
+  }, [effectiveOnboarding]);
+
+  const [activeMode, setActiveMode] = useState<WorkbenchMode>(() => effectiveOnboarding ? "chat" : "video");
   const [inputValue, setInputValue] = useState("");
   const [messages, setMessages] = useState<ChatMessage[]>(() => (resetToken ? [] : readStoredMessages()));
   const [promptHistory, setPromptHistory] = useState<string[]>(() => readStoredPromptHistory());
@@ -287,6 +333,34 @@ function WorkbenchPage({
   const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
   const [deleteDialog, setDeleteDialog] = useState<DeleteDialogState | null>(null);
   const [deleteSubmitting, setDeleteSubmitting] = useState(false);
+  // ── Onboarding tour state ──────────────────────────────
+  const [tourPhase, setTourPhase] = useState<TourPhaseId>("chat");
+  const [tourStep, setTourStep] = useState(0);
+
+  // Sync activeMode with tour phase and keep home view during onboarding
+  useEffect(() => {
+    if (!effectiveOnboarding) return;
+    // Reset tour state for repeat runs
+    setTourPhase("chat");
+    setTourStep(0);
+    // Force "今天想生成什么？" home view — prevent conversation auto-select
+    skipConversationAutoSelectRef.current = true;
+    setWorkspaceStarted(false);
+    setActiveConversationId(null);
+    activeConversationIdRef.current = null;
+    persistActiveConversationId(null);
+    messagesRef.current = [];
+    setMessages([]);
+  }, [effectiveOnboarding]);
+
+  useEffect(() => {
+    if (effectiveOnboarding) {
+      if (tourPhase === "chat") setActiveMode("chat");
+      else if (tourPhase === "image") setActiveMode("image");
+      else if (tourPhase === "video") setActiveMode("video");
+    }
+  }, [effectiveOnboarding, tourPhase]);
+  // ───────────────────────────────────────────────────────
   const [, setGenerationProgress] = useState(0);
   const [cursorIndex, setCursorIndex] = useState(0);
   const [promptSelectionRange, setPromptSelectionRange] = useState({ start: 0, end: 0 });
@@ -420,6 +494,7 @@ function WorkbenchPage({
   const toolTheme = MODE_META[activeMode];
   const workbenchAccent = "#00ff88";
   const hasConversationRecords = activeConversationId !== null || messages.length > 0;
+  const hasActivatedWorkspace = !effectiveOnboarding && (workspaceStarted || isGenerating || hasConversationRecords);
   const referenceCount = referenceItems.length;
   const activeVideoModelValue = toHappyHorseDisplayModel(videoModel);
   const activeModelValue =
@@ -464,11 +539,72 @@ function WorkbenchPage({
     setSidebarCollapsed(!hasSidebarRecords);
   }, [hasSidebarRecords]);
 
-  const imageQualityOptions = useMemo(() => getImageQualityOptions(imageModel), [imageModel]);
+  const hasImageReferences = activeMode === "image" && referenceItems.some((item) => item.kind === "image");
+  const isImageGridMode = activeMode === "image" && imageGridMode !== "single";
+  const imageQualityContext = useMemo(
+    () => ({
+      hasReferenceImages: hasImageReferences,
+      isGridMode: isImageGridMode,
+    }),
+    [hasImageReferences, isImageGridMode],
+  );
+  const imageQualityOptions = useMemo(
+    () => getImageQualityOptionsForContext(imageModel, imageQualityContext),
+    [imageModel, imageQualityContext],
+  );
+  const imageGridModeOptions = useMemo(
+    () =>
+      String(imageModel || "").toLowerCase().startsWith("wan2.7-")
+        ? GRID_MODE_OPTIONS.filter((option) => option.value !== "grid-25")
+        : GRID_MODE_OPTIONS,
+    [imageModel],
+  );
   const videoQualityOptions = getVideoQualityOptions(videoModel);
   const videoQualityLabel = getVideoQualityLabel(videoModel, videoQuality);
 
   const imageSettingsSummary = `${imageRatio} / ${imageQuality}`;
+  const billingEstimate = useMemo(() => {
+    if (activeMode === "image") {
+      return {
+        label: "预计 20 积分",
+        title: `图片生成按任务计费：${activeModel}，${imageSettingsSummary}，预计 20 积分`,
+      };
+    }
+    if (activeMode === "video") {
+      try {
+        const durationSeconds = Math.max(1, Math.ceil(Number(videoDuration) || 1));
+        const credits = calculateEnterpriseVideoCredits({
+          model: activeModelValue,
+          resolution: videoQuality,
+          durationSeconds,
+          muted: false,
+          hasReferenceVideo: referenceItems.some((item) => item.kind === "video"),
+        });
+        return {
+          label: `预计 ${formatCreditValue(credits)} 积分`,
+          title: `${activeModel}，${videoQualityLabel}，${durationSeconds} 秒，预计 ${formatCreditValue(credits)} 积分`,
+        };
+      } catch {
+        return {
+          label: "计费以提交后为准",
+          title: "当前模型的预估计费暂不可用，实际扣费以服务端结算为准",
+        };
+      }
+    }
+    return {
+      label: "按 Token 结算",
+      title: "文本对话按输入、输出 Token 实际用量结算，完成后显示本次积分",
+    };
+  }, [
+    activeMode,
+    activeModel,
+    activeModelValue,
+    imageSettingsSummary,
+    referenceItems,
+    videoDuration,
+    videoQuality,
+    videoQualityLabel,
+  ]);
   const composerPlaceholder =
     referenceItems.length > 0 ? `${toolTheme.placeholder}，可输入 @ 引用参考内容` : toolTheme.placeholder;
   const dropdownDirection = hasActivatedWorkspace ? "up" : "down";
@@ -1158,9 +1294,15 @@ function WorkbenchPage({
 
   useEffect(() => {
     if (!imageQualityOptions.some((option) => option.value === imageQuality)) {
-      setImageQuality(getDefaultImageQuality(imageModel));
+      setImageQuality(getDefaultImageQualityForContext(imageModel, imageQualityContext));
     }
-  }, [imageModel, imageQuality, imageQualityOptions]);
+  }, [imageModel, imageQuality, imageQualityContext, imageQualityOptions]);
+
+  useEffect(() => {
+    if (!imageGridModeOptions.some((option) => option.value === imageGridMode)) {
+      setImageGridMode("single");
+    }
+  }, [imageGridMode, imageGridModeOptions]);
 
   useEffect(() => {
     if (activeMode !== "video" || videoFrameMode !== "start-end" || referenceItems.length <= 2) return;
@@ -1498,7 +1640,41 @@ function WorkbenchPage({
     setToolbarMenuId((current) => (current === menuId ? null : menuId));
   };
 
+  // ── Onboarding tour helpers ────────────────────────────
+  const obTarget = (map: Partial<Record<TourPhaseId, string>>): string | undefined =>
+    effectiveOnboarding ? map[tourPhase] : undefined;
+
+  const handleTourNext = useCallback((_phase: TourPhaseId, stepIndex: number) => {
+    setTourStep(stepIndex);
+  }, []);
+
+  const handleTourSkip = useCallback((phase: TourPhaseId) => {
+    const next: Record<TourPhaseId, TourPhaseId> = { chat: "image", image: "video", video: "video" };
+    const nextPhase = next[phase];
+    if (nextPhase === phase) {
+      onEndOnboarding?.();
+    } else {
+      setTourPhase(nextPhase);
+      setTourStep(0);
+      if (nextPhase === "image") setActiveMode("image");
+      else if (nextPhase === "video") setActiveMode("video");
+    }
+  }, [onEndOnboarding, setActiveMode]);
+
+  const handleTourDone = useCallback(() => {
+    setEffectiveOnboarding(false);
+    onEndOnboarding?.();
+  }, [onEndOnboarding]);
+
+  // Advance tour phase when user switches mode during onboarding
   const handleModeChange = (mode: WorkbenchMode) => {
+    if (effectiveOnboarding) {
+      // Advance tour phase when switching to the next mode
+      if (tourPhase === "chat" && mode === "image") { setTourPhase("image"); setTourStep(0); }
+      else if (tourPhase === "image" && mode === "video") { setTourPhase("video"); setTourStep(0); }
+      // Block switching to other modes during guided tour
+      else if (mode !== tourPhase) return;
+    }
     setActiveMode(mode);
     setToolbarMenuId(null);
     setReferencePreviewOpen(false);
@@ -2585,7 +2761,15 @@ function WorkbenchPage({
     }
   };
 
-  const sendDisabled = !inputValue.trim() || (activeMode !== "chat" && getActiveGenerationTaskCount(getGenerationUserKey(session?.user.id)) >= 3);
+  const activeGenerationCount = getActiveGenerationTaskCount(getGenerationUserKey(session?.user.id));
+  const generationLimitReached = activeMode !== "chat" && activeGenerationCount >= 3;
+  const promptIsEmpty = !inputValue.trim();
+  const sendDisabled = promptIsEmpty || generationLimitReached;
+  const sendButtonTitle = promptIsEmpty
+    ? "输入内容后可发送"
+    : generationLimitReached
+      ? `当前已有 ${activeGenerationCount} 个任务进行中，请等待任一任务完成`
+      : billingEstimate.title;
 
   const suggestedPrompts = [
     { text: "画一个赛博朋克风格的城市夜景", mode: "image" as WorkbenchMode },
@@ -2713,6 +2897,7 @@ function WorkbenchPage({
         className="wb-composer__ref-upload"
         onClick={handleReferenceUploadClick}
         disabled={disabled}
+        data-onboarding={obTarget({ chat: "onboarding-chat-upload", image: "onboarding-image-upload", video: "onboarding-video-upload" })}
         aria-label={`上传${referenceUploadLabel}`}
         aria-expanded={referenceItems.length > 0 ? referencePreviewOpen : undefined}
         aria-controls={referenceItems.length > 0 ? "workbench-reference-stack" : undefined}
@@ -2772,6 +2957,7 @@ function WorkbenchPage({
   const renderComposerToolbar = (disabled = false, showStop = false) => (
     <div className="wb-composer__toolbar">
       <div className="wb-composer__toolbar-left">
+        <span data-onboarding={obTarget({ chat: "onboarding-mode-selector", image: "onboarding-mode-selector" })}>
         <SelectChip
           chipId="studio-mode"
           value={activeMode}
@@ -2784,8 +2970,10 @@ function WorkbenchPage({
           ariaLabel="工作台模式"
           direction={dropdownDirection}
         />
+        </span>
         {activeMode === "chat" && (
           <>
+            <span data-onboarding={obTarget({ chat: "onboarding-chat-model" })}>
             <SelectChip
               chipId="chat-model"
               value={chatModel}
@@ -2798,6 +2986,8 @@ function WorkbenchPage({
               ariaLabel="对话模型"
               direction={dropdownDirection}
             />
+            </span>
+            <span data-onboarding={obTarget({ chat: "onboarding-chat-speed" })}>
             <SelectChip
               chipId="chat-speed"
               value={thinkingSpeed}
@@ -2810,6 +3000,8 @@ function WorkbenchPage({
               ariaLabel="思考速度"
               direction={dropdownDirection}
             />
+            </span>
+            <span data-onboarding={obTarget({ chat: "onboarding-chat-depth" })}>
             <SelectChip
               chipId="chat-depth"
               value={thinkingDepth}
@@ -2822,10 +3014,12 @@ function WorkbenchPage({
               ariaLabel="思考深度"
               direction={dropdownDirection}
             />
+            </span>
           </>
         )}
         {activeMode === "image" && (
           <>
+            <span data-onboarding={obTarget({ image: "onboarding-image-model" })}>
             <SelectChip
               chipId="image-model"
               value={imageModel}
@@ -2837,6 +3031,8 @@ function WorkbenchPage({
               onChange={(v) => { setImageModel(v); if (!GRID_SUPPORTED_MODELS.has(v)) setImageGridMode("single"); }}
               direction={dropdownDirection}
             />
+            </span>
+            <span data-onboarding={obTarget({ image: "onboarding-image-settings" })}>
             <CompoundSelectChip
               chipId="image-settings"
               summary={imageSettingsSummary}
@@ -2846,11 +3042,13 @@ function WorkbenchPage({
               onToggle={() => toggleToolbarMenu("image-settings")}
               direction={dropdownDirection}
             />
+            </span>
             {GRID_SUPPORTED_MODELS.has(imageModel) && (
+            <span data-onboarding={obTarget({ image: "onboarding-image-grid" })}>
             <SelectChip
               chipId="image-grid-mode"
               value={imageGridMode}
-              options={GRID_MODE_OPTIONS}
+              options={imageGridModeOptions}
               disabled={disabled}
               isOpen={toolbarMenuId === "image-grid-mode"}
               onToggle={() => toggleToolbarMenu("image-grid-mode")}
@@ -2858,11 +3056,13 @@ function WorkbenchPage({
               onChange={setImageGridMode}
               direction={dropdownDirection}
             />
+            </span>
             )}
           </>
         )}
         {activeMode === "video" && (
           <>
+            <span data-onboarding={obTarget({ video: "onboarding-video-model" })}>
             <SelectChip
               chipId="video-model"
               value={videoModel}
@@ -2874,6 +3074,8 @@ function WorkbenchPage({
               onChange={setVideoModel}
               direction={dropdownDirection}
             />
+            </span>
+            <span data-onboarding={obTarget({ video: "onboarding-video-frame" })}>
             <SelectChip
               chipId="video-mode"
               value={videoFrameMode}
@@ -2885,6 +3087,8 @@ function WorkbenchPage({
               onChange={setVideoFrameMode}
               direction={dropdownDirection}
             />
+            </span>
+            <span data-onboarding={obTarget({ video: "onboarding-video-ratio" })}>
             <CompoundSelectChip
               chipId="video-ratio"
               summary={videoRatio}
@@ -2894,6 +3098,8 @@ function WorkbenchPage({
               onToggle={() => toggleToolbarMenu("video-ratio")}
               direction={dropdownDirection}
             />
+            </span>
+            <span data-onboarding={obTarget({ video: "onboarding-video-duration" })}>
             <InlineOptionChip
               chipId="video-duration"
               value={videoDuration}
@@ -2906,6 +3112,8 @@ function WorkbenchPage({
               onChange={setVideoDuration}
               direction={dropdownDirection}
             />
+            </span>
+            <span data-onboarding={obTarget({ video: "onboarding-video-quality" })}>
             <InlineOptionChip
               chipId="video-quality"
               value={videoQuality}
@@ -2918,14 +3126,21 @@ function WorkbenchPage({
               onChange={setVideoQuality}
               direction={dropdownDirection}
             />
+            </span>
           </>
         )}
       </div>
       <div className="wb-composer__toolbar-right">
+          <span className="wb-composer__billing-estimate" title={billingEstimate.title}>
+            {billingEstimate.label}
+          </span>
           <button
             type="button"
             className={`wb-composer__send-primary${isGenerating ? " is-loading" : ""}`}
             disabled={sendDisabled || isGenerating}
+            title={isGenerating ? "任务处理中" : sendButtonTitle}
+            aria-label={isGenerating ? "任务处理中" : sendButtonTitle}
+            data-onboarding={obTarget({ video: "onboarding-video-generate" })}
             onClick={() => {
               if (getCachedRole() === "admin") console.log("[ai/workbench-send-click]", {
                 mode: activeMode,
@@ -3084,6 +3299,7 @@ function WorkbenchPage({
                     className={`wb-composer__textarea${showPromptPreview ? " wb-composer__textarea--overlay-mode" : ""}`}
                     placeholder={composerPlaceholder}
                     value={inputValue}
+                    data-onboarding={obTarget({ chat: "onboarding-chat-input", image: "onboarding-image-input" })}
                     onChange={handlePromptChange}
                     onSelect={handlePromptSelectionChange}
                     onKeyUp={handlePromptSelectionChange}
@@ -3149,6 +3365,14 @@ function WorkbenchPage({
         {renderMessagePreviewOverlay()}
         {renderPromptCaseOverlay()}
         {renderDeleteDialog()}
+        <OnboardingTour
+          active={Boolean(effectiveOnboarding)}
+          phase={tourPhase}
+          stepIndex={tourStep}
+          onNext={handleTourNext}
+          onSkip={handleTourSkip}
+          onDone={handleTourDone}
+        />
       </section>
     );
   }
@@ -3231,11 +3455,6 @@ function WorkbenchPage({
                                   <span>{message.taskStatusLabel || generationStatus}</span>
                                 </div>
                               )}
-                              {message.role === "assistant" && message.mode === "chat" && message.status === "completed" && (
-                                <div className="ai-chat-task-billing-note">
-                                  {formatTextTokenUsage(message.taskUsage)}
-                                </div>
-                              )}
                               {(message.resultUrl || (message.result && message.status !== "thinking")) && (
                                 <ResultCard
                                   message={message}
@@ -3275,6 +3494,7 @@ function WorkbenchPage({
                       placeholder={composerPlaceholder}
                       value={inputValue}
                       disabled={false}
+                      data-onboarding={obTarget({ chat: "onboarding-chat-input", image: "onboarding-image-input" })}
                       onChange={handlePromptChange}
                       onSelect={handlePromptSelectionChange}
                       onKeyUp={handlePromptSelectionChange}
@@ -3322,6 +3542,15 @@ function WorkbenchPage({
       {showRechargeModal && RechargeModal ? (
         <RechargeModal open={showRechargeModal} onClose={() => setShowRechargeModal(false)} currentBalance={session?.user?.balanceCents} />
       ) : null}
+
+      <OnboardingTour
+        active={Boolean(effectiveOnboarding)}
+        phase={tourPhase}
+        stepIndex={tourStep}
+        onNext={handleTourNext}
+        onSkip={handleTourSkip}
+        onDone={handleTourDone}
+      />
     </section>
   );
 }

src/features/workbench/workbenchConstants.ts

@@ -149,14 +149,14 @@ export const CHAT_MODEL_OPTIONS: WorkbenchOption[] = [
 
 export const THINKING_SPEED_OPTIONS: WorkbenchOption[] = [
   { value: "default", label: "默认" },
-  { value: "high", label: "高" },
+  { value: "high", label: "思考速度：高" },
-  { value: "ultra", label: "急速" },
+  { value: "ultra", label: "思考速度：急速" },
 ];
 
 export const THINKING_DEPTH_OPTIONS: WorkbenchOption[] = [
   { value: "default", label: "默认" },
-  { value: "strong", label: "强" },
+  { value: "strong", label: "推理深度：强" },
-  { value: "extreme", label: "极限" },
+  { value: "extreme", label: "推理深度：极限" },
 ];
 
 export const CHAT_NATURAL_SYSTEM_PROMPT = [
@@ -231,13 +231,13 @@ export const MODE_OPTIONS: WorkbenchOption[] = (Object.keys(MODE_META) as Workbe
 }));
 
 export const IMAGE_MODEL_OPTIONS: WorkbenchOption[] = [
-  { value: "wan2.7-image-pro", label: "wan 2.7 Pro 4K" },
+  { value: "wan2.7-image-pro", label: "wan 2.7 Pro" },
   { value: "wan2.7-image", label: "wan 2.7" },
-  { value: "gpt-image-2", label: "GPT-Image-2" },
+  { value: "gpt-image-2", label: "omni-GPT" },
-  { value: "gpt-image-2-vip", label: "GPT-Image-2 VIP" },
+  { value: "gpt-image-2-vip", label: "omni-GPT VIP" },
-  { value: "nano-banana-pro", label: "Nano Banana Pro" },
+  { value: "nano-banana-pro", label: "omni-水果 Pro" },
-  { value: "nano-banana-2", label: "Nano Banana 2" },
+  { value: "nano-banana-2", label: "omni-水果 2" },
-  { value: "nano-banana-fast", label: "Nano Banana" },
+  { value: "nano-banana-fast", label: "omni-水果" },
 ];
 
 export const VIDEO_MODEL_OPTIONS: WorkbenchOption[] = ENTERPRISE_VIDEO_MODEL_OPTIONS.map((option) => ({ ...option }));

src/stores/useSessionStore.ts

@@ -33,7 +33,7 @@ const initialState: SessionState = {
   loginPromptOpen: false,
   pendingAction: null,
   sessionReplacedOpen: false,
-  sessionReplacedMessage: '您的账号已在其他设备登录，此设备的登录状态已失效。',
+  sessionReplacedMessage: '当前账号已在其他设备登录，此设备的登录状态已失效。',
 };
 
 export const useSessionStore = create<SessionState & SessionActions>((set) => ({
@@ -55,7 +55,7 @@ export const useSessionStore = create<SessionState & SessionActions>((set) => ({
 
   showSessionReplaced: (message) => set({
     sessionReplacedOpen: true,
-    sessionReplacedMessage: message || '您的账号已在其他设备登录（最多同时 2 台设备），此设备的登录状态已失效。',
+    sessionReplacedMessage: message || '当前账号已在其他设备登录，此设备的登录状态已失效。',
   }),
 
   hideSessionReplaced: () => set({ sessionReplacedOpen: false }),

src/styles/components/beta-application-modal.css

@@ -0,0 +1,471 @@
+/* ── Beta Application Modal ── */
+/* Word-document style: paper-white panel, larger serif-ish typography, clear form fields */
+
+.beta-application-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  place-items: center;
+}
+
+.beta-application-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgba(0, 0, 0, 0.58);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  cursor: pointer;
+}
+
+/* ── Panel: paper-like document ── */
+.beta-application-modal__panel {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  width: min(800px, 94vw);
+  max-height: 90vh;
+  overflow: hidden;
+  border: 1px solid #d9d5cf;
+  border-radius: 4px;
+  background: #faf8f4;
+  color: #1e1e1e;
+  box-shadow:
+    0 2px 0 #e8e4dc,
+    0 4px 0 #d9d5cf,
+    0 8px 32px rgba(0, 0, 0, 0.2),
+    0 24px 80px rgba(0, 0, 0, 0.12);
+  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+/* ── Header ── */
+.beta-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 28px 36px 20px;
+  border-bottom: 2px solid #1e1e1e;
+  flex-shrink: 0;
+  background: #f5f1ea;
+}
+
+.beta-modal-header__left {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.beta-modal-header__icon {
+  font-size: 28px;
+  color: #166534;
+  flex-shrink: 0;
+}
+
+.beta-modal-header h2 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 900;
+  color: #1e1e1e;
+  letter-spacing: 1px;
+  line-height: 1.3;
+}
+
+.beta-modal-header__subtitle {
+  margin: 2px 0 0;
+  font-size: 13px;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.beta-modal-header__subtitle strong {
+  color: #166534;
+  font-weight: 800;
+}
+
+.beta-modal-header__close {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border: 1px solid #d5cfc4;
+  border-radius: 4px;
+  background: #f5f1ea;
+  color: #8c8276;
+  cursor: pointer;
+  font-size: 14px;
+  flex-shrink: 0;
+  transition: background 120ms ease, color 120ms ease;
+}
+
+.beta-modal-header__close:hover {
+  background: #ede6da;
+  color: #1e1e1e;
+}
+
+.beta-modal-header__close:disabled,
+.beta-modal-footer__btn:disabled {
+  opacity: 0.58;
+  cursor: wait;
+}
+
+/* ── Scrollable body ── */
+.beta-modal-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 32px 40px;
+  background: #faf8f4;
+}
+
+/* ── Document sections ── */
+.beta-doc-section {
+  margin-bottom: 28px;
+  padding-bottom: 28px;
+  border-bottom: 1px dashed #d9d2c5;
+}
+
+.beta-doc-section:last-of-type {
+  border-bottom: 0;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.beta-doc-section__title {
+  margin: 0 0 18px;
+  font-size: 16px;
+  font-weight: 900;
+  color: #1e1e1e;
+  letter-spacing: 0.5px;
+}
+
+.beta-required {
+  color: #dc2626;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.beta-doc-section__desc {
+  margin: 0 0 12px;
+  font-size: 14px;
+  color: #4b5563;
+  line-height: 1.7;
+}
+
+/* ── Single-column grid for form fields ── */
+.beta-doc-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.beta-doc-grid--two {
+  margin-top: 14px;
+}
+
+/* ── Text field (Word underline style) ── */
+.beta-text-field {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.beta-text-field__label {
+  font-size: 14px;
+  font-weight: 700;
+  color: #1e1e1e;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.beta-text-field__label::after {
+  content: "：";
+}
+
+.beta-text-field__input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  border-bottom: 1px solid #c5beb2;
+  outline: none;
+  background: transparent;
+  padding: 2px 0;
+  font-size: 14px;
+  font-family: inherit;
+  color: #1e1e1e;
+  line-height: 1.8;
+  transition: border-color 140ms ease;
+}
+
+.beta-text-field__input::placeholder {
+  color: #c4c4c4;
+  font-size: 13px;
+}
+
+.beta-text-field__input:focus {
+  border-bottom-color: #166534;
+  border-bottom-width: 2px;
+  margin-bottom: -1px;
+}
+
+.beta-text-field__input[readonly] {
+  color: #6b7280;
+  cursor: default;
+}
+
+/* ── Form group (spans full row when needed) ── */
+.beta-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.beta-form-group--full {
+  grid-column: 1 / -1;
+}
+
+.beta-form-group__label {
+  font-size: 14px;
+  font-weight: 700;
+  color: #1e1e1e;
+}
+
+.beta-form-group__label::after {
+  content: "：";
+}
+
+/* ── Radio group ── */
+.beta-radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 14px;
+}
+
+.beta-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #374151;
+  padding: 3px 0;
+  user-select: none;
+}
+
+.beta-radio input[type="radio"] {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 2px solid #b8b0a4;
+  border-radius: 50%;
+  margin: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: border-color 120ms ease, background 120ms ease;
+}
+
+.beta-radio input[type="radio"]:checked {
+  border-color: #166534;
+  background: #166534;
+  box-shadow: inset 0 0 0 3px #ffffff;
+}
+
+.beta-radio:hover input[type="radio"] {
+  border-color: #166534;
+}
+
+.beta-radio span {
+  line-height: 1.5;
+}
+
+/* ── Checkbox group ── */
+.beta-checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 14px;
+}
+
+.beta-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #374151;
+  padding: 3px 0;
+  user-select: none;
+}
+
+.beta-checkbox input[type="checkbox"] {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 2px solid #b8b0a4;
+  border-radius: 3px;
+  margin: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: border-color 120ms ease, background 120ms ease;
+}
+
+.beta-checkbox input[type="checkbox"]:checked {
+  border-color: #166534;
+  background: #166534;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  background-size: 10px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.beta-checkbox:hover input[type="checkbox"] {
+  border-color: #166534;
+}
+
+.beta-checkbox span {
+  line-height: 1.5;
+}
+
+/* ── Textarea ── */
+.beta-textarea {
+  width: 100%;
+  min-height: 140px;
+  resize: vertical;
+  border: 1px solid #c5beb2;
+  border-radius: 4px;
+  outline: none;
+  background: #ffffff;
+  padding: 12px 14px;
+  font-size: 14px;
+  font-family: inherit;
+  color: #1e1e1e;
+  line-height: 1.8;
+  transition: border-color 140ms ease;
+  box-sizing: border-box;
+}
+
+.beta-textarea::placeholder {
+  color: #c4c4c4;
+}
+
+.beta-textarea:focus {
+  border-color: #166534;
+  box-shadow: 0 0 0 2px rgba(22, 101, 52, 0.1);
+}
+
+/* ── Rules list ── */
+.beta-rules-list {
+  margin: 0 0 18px;
+  padding-left: 22px;
+}
+
+.beta-rules-list li {
+  font-size: 14px;
+  color: #374151;
+  line-height: 1.9;
+  margin-bottom: 4px;
+}
+
+.beta-rules-list li strong {
+  color: #166534;
+}
+
+/* ── Agreement checkbox row ── */
+.beta-agree-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 18px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 700;
+  color: #166534;
+  user-select: none;
+}
+
+.beta-agree-row input[type="checkbox"] {
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border: 2px solid #b8b0a4;
+  border-radius: 3px;
+  margin-top: 2px;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: border-color 120ms ease, background 120ms ease;
+}
+
+.beta-agree-row input[type="checkbox"]:checked {
+  border-color: #166534;
+  background: #166534;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  background-size: 12px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+/* ── Footer ── */
+.beta-modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 36px 20px;
+  border-top: 1px solid #e0dbd2;
+  flex-shrink: 0;
+  background: #f5f1ea;
+}
+
+.beta-modal-footer__message {
+  flex: 1;
+  margin: 0;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.5;
+}
+
+.beta-modal-footer__message--success {
+  color: #166534;
+}
+
+.beta-modal-footer__message--error {
+  color: #dc2626;
+}
+
+.beta-modal-footer__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  padding: 0 24px;
+  border: 0;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+
+.beta-modal-footer__btn:active {
+  transform: scale(0.97);
+}
+
+.beta-modal-footer__btn--secondary {
+  background: #e8e3d9;
+  color: #5c5348;
+}
+
+.beta-modal-footer__btn--secondary:hover {
+  background: #dbd4c7;
+}
+
+.beta-modal-footer__btn--primary {
+  background: #166534;
+  color: #ffffff;
+}
+
+.beta-modal-footer__btn--primary:hover {
+  background: #14532d;
+}

src/styles/components/onboarding.css

@@ -0,0 +1,317 @@
+/* ─── Onboarding Tour ──────────────────────────────────────── */
+
+.onboarding-root {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+  font-family: Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.onboarding-root.is-visible {
+  opacity: 1;
+}
+
+/* ─── Overlay ──────────────────────────────────────────────── */
+
+.onboarding-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.64);
+  pointer-events: auto;
+  transition: clip-path 0.32s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: clip-path;
+}
+
+/* During interactive steps, let clicks pass through to dropdowns etc. */
+.onboarding-overlay--passive {
+  pointer-events: none;
+}
+
+/* Tooltip also lets clicks through during interactive steps, except for buttons */
+.onboarding-tooltip--passive {
+  pointer-events: none;
+}
+
+.onboarding-tooltip--passive .onboarding-tooltip__btn {
+  pointer-events: auto;
+}
+
+/* ─── Spotlight ring ───────────────────────────────────────── */
+
+.onboarding-spotlight {
+  position: fixed;
+  z-index: 10001;
+  border-radius: 10px;
+  border: 2px solid rgba(0, 255, 136, 0.5);
+  box-shadow:
+    0 0 22px rgba(0, 255, 136, 0.18),
+    0 0 50px rgba(0, 255, 136, 0.06),
+    inset 0 0 0 1px rgba(0, 255, 136, 0.05);
+  pointer-events: none;
+  transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
+              top 0.32s cubic-bezier(0.4, 0, 0.2, 1),
+              width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
+              height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.onboarding-spotlight__pulse {
+  position: absolute;
+  inset: -4px;
+  border-radius: 14px;
+  border: 1px solid rgba(0, 255, 136, 0.3);
+  animation: ob-pulse 2.4s ease-out infinite;
+}
+
+.onboarding-spotlight__pulse--delay {
+  animation-delay: 1.2s;
+}
+
+@keyframes ob-pulse {
+  0% { transform: scale(1); opacity: 0.6; }
+  100% { transform: scale(1.08); opacity: 0; }
+}
+
+/* ─── Connector SVG ────────────────────────────────────────── */
+
+.onboarding-connector {
+  position: fixed;
+  inset: 0;
+  z-index: 10002;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.onboarding-connector__path {
+  animation: ob-dash 1.6s linear infinite;
+  stroke-dashoffset: 0;
+}
+
+@keyframes ob-dash {
+  to { stroke-dashoffset: -24; }
+}
+
+.onboarding-connector__dot {
+  animation: ob-dot-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes ob-dot-pulse {
+  0%, 100% { r: 4; opacity: 0.7; }
+  50% { r: 7; opacity: 1; }
+}
+
+/* ─── Tooltip card ─────────────────────────────────────────── */
+
+.onboarding-tooltip {
+  position: fixed;
+  z-index: 10003;
+  width: min(92vw, 360px);
+  padding: 20px 22px 18px;
+  border-radius: 16px;
+  background: var(--bg-elevated, #1e1e1e);
+  border: 1px solid var(--border-subtle, #333);
+  box-shadow:
+    0 12px 40px rgba(0, 0, 0, 0.5),
+    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
+    0 0 60px rgba(0, 255, 136, 0.04);
+  pointer-events: auto;
+  transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
+              top 0.32s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.onboarding-tooltip--pop {
+  animation: ob-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes ob-pop-in {
+  from { opacity: 0; transform: scale(0.92) translateY(6px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+/* Tooltip arrow — CSS triangle pointing toward target */
+.onboarding-tooltip__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  display: none; /* replaced by SVG connector; fallback for simple cases */
+}
+
+/* ─── Tooltip head ─────────────────────────────────────────── */
+
+.onboarding-tooltip__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.onboarding-tooltip__phase-badge {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb, 0, 255, 136), 0.12);
+  color: var(--accent, #00ff88);
+}
+
+.onboarding-tooltip__counter {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--fg-muted, #777);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ─── Tooltip body ─────────────────────────────────────────── */
+
+.onboarding-tooltip__title {
+  display: block;
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--fg-body, #e5e5e5);
+  margin-bottom: 6px;
+  line-height: 1.3;
+}
+
+.onboarding-tooltip__desc {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--fg-muted, #999);
+  margin: 0 0 4px;
+}
+
+.onboarding-tooltip__action-hint {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--accent, #00ff88);
+  margin: 8px 0 4px;
+  font-weight: 600;
+  animation: ob-hint-blink 1.8s ease-in-out infinite;
+}
+
+@keyframes ob-hint-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* ─── Tooltip actions ──────────────────────────────────────── */
+
+.onboarding-tooltip__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 14px;
+}
+
+.onboarding-tooltip__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 7px 16px;
+  border-radius: 8px;
+  border: none;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease, opacity 0.15s ease, transform 0.12s ease;
+  font-family: inherit;
+  white-space: nowrap;
+}
+
+.onboarding-tooltip__btn:active {
+  transform: scale(0.97);
+}
+
+.onboarding-tooltip__btn--primary {
+  background: var(--accent, #00ff88);
+  color: #000;
+}
+
+.onboarding-tooltip__btn--primary:hover {
+  opacity: 0.85;
+}
+
+.onboarding-tooltip__btn--ghost {
+  background: transparent;
+  color: var(--fg-muted, #888);
+  border: 1px solid var(--border-subtle, #444);
+}
+
+.onboarding-tooltip__btn--ghost:hover {
+  color: var(--fg-body, #e5e5e5);
+  border-color: var(--fg-muted, #888);
+}
+
+.onboarding-tooltip__wait-hint {
+  font-size: 11px;
+  color: var(--fg-muted, #777);
+  font-style: italic;
+  animation: ob-hint-blink 2s ease-in-out infinite;
+}
+
+/* ─── Progress bar (bottom-right) ──────────────────────────── */
+
+.onboarding-progress {
+  position: fixed;
+  z-index: 10002;
+  bottom: 24px;
+  right: 32px;
+  display: flex;
+  align-items: center;
+  gap: 40px;
+  pointer-events: auto;
+}
+
+.onboarding-progress__phase {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+}
+
+.onboarding-progress__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--border-subtle, #444);
+  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.onboarding-progress__dot.is-active {
+  background: var(--accent, #00ff88);
+  transform: scale(1.4);
+  box-shadow: 0 0 12px rgba(0, 255, 136, 0.4);
+}
+
+.onboarding-progress__dot.is-done {
+  background: rgba(var(--accent-rgb, 0, 255, 136), 0.5);
+}
+
+.onboarding-progress__phase span {
+  font-size: 10px;
+  color: var(--fg-muted, #666);
+  white-space: nowrap;
+}
+
+.onboarding-progress__phase .is-active + span,
+.onboarding-progress__phase .is-done + span {
+  color: var(--fg-body, #ccc);
+}
+
+/* ─── Responsive ───────────────────────────────────────────── */
+
+@media (max-width: 640px) {
+  .onboarding-tooltip {
+    width: calc(100vw - 20px);
+    left: 10px !important;
+  }
+
+  .onboarding-progress {
+    gap: 20px;
+  }
+}

src/styles/index.css

@@ -3,6 +3,10 @@
 @import "./shell/app-shell.css";
 @import "./components/primitives.css";
 @import "./components/legacy-components.css";
+@import "./components/recharge-modal.css";
+@import "./components/beta-application-modal.css";
+@import "./components/dropzone.css";
+@import "./components/skeleton.css";
 @import "./components/toast.css";
 @import "./components/page-transition.css";
 @import "./components/motion.css";

src/styles/pages/beta-applications.css

@@ -0,0 +1,421 @@
+.beta-admin-page__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  width: min(1180px, calc(100vw - 48px));
+  margin: 0 auto;
+  height: 100%;
+  min-height: 0;
+  padding: 24px;
+  overflow: hidden;
+}
+
+.beta-admin-toolbar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.beta-admin-toolbar span {
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.beta-admin-toolbar h1 {
+  margin: 4px 0;
+  color: var(--text-primary);
+  font-size: 22px;
+}
+
+.beta-admin-toolbar p {
+  max-width: 620px;
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.beta-admin-toolbar button,
+.beta-admin-status-tabs button,
+.beta-admin-actions button,
+.beta-admin-access button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: var(--surface-elevated);
+  color: var(--text-primary);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.beta-admin-toolbar button {
+  min-height: 36px;
+  padding: 0 14px;
+}
+
+.beta-admin-toolbar button:disabled,
+.beta-admin-actions button:disabled {
+  opacity: 0.55;
+  cursor: wait;
+}
+
+.beta-admin-status-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.beta-admin-status-tabs button {
+  min-height: 34px;
+  padding: 0 14px;
+  color: var(--text-muted);
+}
+
+.beta-admin-status-tabs button.is-active {
+  border-color: rgba(var(--accent-rgb), 0.45);
+  background: rgba(var(--accent-rgb), 0.14);
+  color: var(--accent);
+}
+
+.beta-admin-error {
+  margin: 0;
+  color: var(--error, #ef4444);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.beta-admin-layout {
+  display: grid;
+  grid-template-columns: 300px minmax(0, 1fr);
+  gap: 16px;
+  flex: 1;
+  min-height: 0;
+  align-items: start;
+}
+
+.beta-admin-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 100%;
+  overflow: auto;
+  padding-right: 4px;
+}
+
+.beta-admin-list__item {
+  display: grid;
+  gap: 6px;
+  width: 100%;
+  padding: 13px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: var(--surface-card);
+  color: var(--text-primary);
+  text-align: left;
+  cursor: pointer;
+}
+
+.beta-admin-list__item.is-active {
+  border-color: rgba(var(--accent-rgb), 0.52);
+  background: rgba(var(--accent-rgb), 0.1);
+}
+
+.beta-admin-list__item strong {
+  overflow: hidden;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.beta-admin-list__item small {
+  overflow: hidden;
+  color: var(--text-muted);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.beta-admin-list__empty,
+.beta-admin-detail--empty {
+  display: grid;
+  min-height: 180px;
+  place-items: center;
+  border: 1px dashed var(--border-subtle);
+  border-radius: 8px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.beta-admin-status {
+  width: fit-content;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.beta-admin-status--pending {
+  background: rgba(245, 158, 11, 0.16);
+  color: #f59e0b;
+}
+
+.beta-admin-status--approved {
+  background: rgba(16, 185, 129, 0.16);
+  color: #10b981;
+}
+
+.beta-admin-status--rejected {
+  background: rgba(239, 68, 68, 0.16);
+  color: #ef4444;
+}
+
+.beta-admin-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+  max-height: 100%;
+  min-height: 0;
+  overflow: auto;
+  padding-right: 4px;
+}
+
+.beta-admin-detail__header,
+.beta-admin-form-card,
+.beta-admin-review-box {
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: var(--surface-card);
+}
+
+.beta-admin-detail__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 18px;
+}
+
+.beta-admin-detail__header span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.beta-admin-detail__header h2 {
+  margin: 5px 0 8px;
+  color: var(--text-primary);
+  font-size: 20px;
+}
+
+.beta-admin-detail__header p {
+  display: -webkit-box;
+  overflow: hidden;
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 13px;
+  line-height: 1.7;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.beta-admin-code {
+  flex-shrink: 0;
+  padding: 8px 10px;
+  border: 1px solid rgba(var(--accent-rgb), 0.35);
+  border-radius: 8px;
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+  font-size: 13px;
+}
+
+.beta-admin-form-card {
+  padding: 16px;
+}
+
+.beta-admin-form-card h3 {
+  margin: 0 0 12px;
+  color: var(--text-primary);
+  font-size: 15px;
+}
+
+.beta-admin-field-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.beta-admin-field {
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  background: var(--surface-elevated);
+}
+
+.beta-admin-field--wide {
+  grid-column: 1 / -1;
+}
+
+.beta-admin-field span {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.beta-admin-field strong {
+  display: block;
+  overflow-wrap: anywhere;
+  color: var(--text-primary);
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.beta-admin-statement {
+  margin: 0 0 12px;
+  padding: 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  background: var(--surface-elevated);
+  color: var(--text-primary);
+  font-size: 13px;
+  line-height: 1.8;
+  white-space: pre-wrap;
+}
+
+.beta-admin-review-box {
+  padding: 16px;
+}
+
+.beta-admin-review-box label {
+  display: grid;
+  gap: 8px;
+}
+
+.beta-admin-review-box label span {
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.beta-admin-review-box textarea {
+  width: 100%;
+  min-height: 92px;
+  resize: vertical;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: var(--surface-elevated);
+  color: var(--text-primary);
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.7;
+  outline: none;
+  padding: 10px;
+}
+
+.beta-admin-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.beta-admin-actions button {
+  min-height: 38px;
+  padding: 0 16px;
+}
+
+.beta-admin-actions button:first-child {
+  border-color: rgba(239, 68, 68, 0.35);
+  color: #ef4444;
+}
+
+.beta-admin-actions button:last-child {
+  border-color: rgba(16, 185, 129, 0.35);
+  background: rgba(16, 185, 129, 0.14);
+  color: #10b981;
+}
+
+.beta-admin-access {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  min-height: 420px;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.beta-admin-access svg {
+  color: var(--accent);
+  font-size: 28px;
+}
+
+.beta-admin-access h1 {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 20px;
+}
+
+.beta-admin-access p {
+  margin: 0;
+  font-size: 13px;
+}
+
+.beta-admin-access button {
+  min-height: 38px;
+  padding: 0 18px;
+  border-color: rgba(var(--accent-rgb), 0.38);
+  background: rgba(var(--accent-rgb), 0.14);
+  color: var(--accent);
+}
+
+@media (max-width: 900px) {
+  .beta-admin-page__inner {
+    width: min(100%, calc(100vw - 24px));
+    padding: 16px 12px;
+    overflow: auto;
+  }
+
+  .beta-admin-toolbar,
+  .beta-admin-detail__header {
+    flex-direction: column;
+  }
+
+  .beta-admin-layout {
+    grid-template-columns: 1fr;
+    overflow: visible;
+  }
+
+  .beta-admin-list {
+    max-height: none;
+  }
+
+  .beta-admin-detail {
+    max-height: none;
+    overflow: visible;
+    padding-right: 0;
+  }
+}
+
+@media (max-width: 640px) {
+  .beta-admin-field-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .beta-admin-actions {
+    flex-direction: column;
+  }
+}

src/styles/pages/ecommerce.css

@@ -1542,9 +1542,7 @@
 .product-clone-page[data-tool="clone"] .clone-ai-replicate-panel {
   display: grid;
   flex: 0 0 auto;
-  grid-template-rows: auto auto minmax(0, 1fr);
   gap: 9px;
-  min-height: 0;
   overflow: visible;
   border: 1px solid #303540;
   border-radius: 14px;
@@ -1874,11 +1872,8 @@
 
 .product-clone-page[data-tool="clone"] .clone-ai-module-panel {
   display: grid;
-  flex: 0 0 272px;
+  flex: 0 0 auto;
-  grid-template-rows: auto minmax(0, 1fr);
   gap: 10px;
-  height: 272px;
-  min-height: 0;
   border: 1px solid #303540;
   border-radius: 14px;
   background: #1c1f26;
@@ -1906,25 +1901,6 @@
   grid-template-columns: repeat(2, minmax(0, 1fr));
   align-content: start;
   gap: 8px;
-  min-height: 0;
-  overflow-y: auto;
-  padding-right: 4px;
-  scrollbar-width: thin;
-  scrollbar-color: #3d4552 #171a20;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-module-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-module-list::-webkit-scrollbar-track {
-  border-radius: 999px;
-  background: #171a20;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-module-list::-webkit-scrollbar-thumb {
-  border-radius: 999px;
-  background: #3d4552;
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-module-list button {
@@ -1981,11 +1957,8 @@
 
 .product-clone-page[data-tool="clone"] .clone-ai-model-panel {
   display: grid;
-  flex: 0 0 272px;
+  flex: 0 0 auto;
-  grid-template-rows: auto minmax(0, 1fr);
   gap: 10px;
-  height: 272px;
-  min-height: 0;
   border: 1px solid #303540;
   border-radius: 14px;
   background: #1c1f26;
@@ -2032,25 +2005,7 @@
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-model-scroll {
-  min-height: 0;
+  overflow: visible;
-  overflow-y: auto;
-  padding-right: 4px;
-  scrollbar-width: thin;
-  scrollbar-color: #3d4552 #171a20;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-model-scroll::-webkit-scrollbar {
-  width: 6px;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-model-scroll::-webkit-scrollbar-track {
-  border-radius: 999px;
-  background: #171a20;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-model-scroll::-webkit-scrollbar-thumb {
-  border-radius: 999px;
-  background: #3d4552;
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-model-scenes,
@@ -2223,16 +2178,12 @@
   z-index: 30;
   display: grid;
   gap: 4px;
-  max-height: 150px;
-  overflow-y: auto;
   border: 1px solid #303540;
   border-radius: 8px;
   background: #22252d;
   background-image: none;
   padding: 5px;
   box-shadow: none;
-  scrollbar-width: thin;
-  scrollbar-color: #3d4552 #171a20;
   transform-origin: top center;
   animation: clone-ai-model-select-pop 160ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
 }
@@ -2244,20 +2195,6 @@
   animation-name: clone-ai-model-select-pop-up;
 }
 
-.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu::-webkit-scrollbar {
-  width: 6px;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu::-webkit-scrollbar-track {
-  border-radius: 999px;
-  background: #171a20;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu::-webkit-scrollbar-thumb {
-  border-radius: 999px;
-  background: #3d4552;
-}
-
 .product-clone-page[data-tool="clone"] .clone-ai-model-select__menu button {
   display: flex;
   align-items: center;
@@ -2351,31 +2288,14 @@
 
 .product-clone-page[data-tool="clone"] .clone-ai-video-panel {
   display: grid;
-  flex: 1 1 auto;
+  flex: 0 0 auto;
   align-content: start;
   gap: 12px;
-  min-height: 0;
+  overflow: visible;
-  overflow-y: auto;
   border: 1px solid #303540;
   border-radius: 14px;
   background: #1c1f26;
   padding: 12px;
-  scrollbar-width: thin;
-  scrollbar-color: #3d4552 #171a20;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-video-panel::-webkit-scrollbar {
-  width: 6px;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-video-panel::-webkit-scrollbar-track {
-  border-radius: 999px;
-  background: #171a20;
-}
-
-.product-clone-page[data-tool="clone"] .clone-ai-video-panel::-webkit-scrollbar-thumb {
-  border-radius: 999px;
-  background: #3d4552;
 }
 
 .product-clone-page[data-tool="clone"] .clone-ai-video-section {
@@ -8611,31 +8531,86 @@
   transition: none;
 }
 .clone-ai-video-outfit-upload {
-  display: flex;
+  position: relative;
-  align-items: center;
+  display: grid;
-  gap: 10px;
+  gap: 8px;
   margin-top: 6px;
 }
 
 .clone-ai-video-outfit-upload-btn {
-  padding: 7px 16px;
+  display: flex;
-  border: 1px solid var(--border-subtle);
+  width: 100%;
-  border-radius: 8px;
+  min-height: 118px;
-  background: var(--bg-inset);
+  flex-direction: column;
-  color: var(--fg-body);
+  align-items: center;
+  justify-content: center;
+  border: 1.5px dashed var(--ecm-line, var(--border-subtle));
+  border-radius: var(--ecm-radius-md, 14px);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 65%),
+    var(--ecm-inset, var(--bg-inset));
+  color: var(--ecm-text, var(--fg-body));
   font-size: 13px;
+  font-weight: 850;
+  line-height: 1.35;
   cursor: pointer;
-  transition: border-color 150ms, background 150ms;
+  text-align: center;
+  transition:
+    border-color 150ms,
+    background 150ms,
+    color 150ms,
+    transform 150ms;
+}
+
+.clone-ai-video-outfit-upload-btn::before {
+  display: grid;
+  width: 38px;
+  height: 38px;
+  place-items: center;
+  margin-bottom: 8px;
+  border: 1px solid rgba(var(--ecm-accent-rgb, 0, 255, 136), 0.26);
+  border-radius: 999px;
+  background: rgba(var(--ecm-accent-rgb, 0, 255, 136), 0.08);
+  color: var(--ecm-accent, var(--accent));
+  content: "+";
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 1;
 }
 
 .clone-ai-video-outfit-upload-btn:hover {
-  border-color: var(--border-default);
+  border-color: rgba(var(--ecm-accent-rgb, 0, 255, 136), 0.48);
-  background: var(--bg-hover);
+  background:
+    linear-gradient(180deg, rgba(var(--ecm-accent-rgb, 0, 255, 136), 0.08), transparent 72%),
+    var(--ecm-inset-hover, var(--bg-hover));
+  color: var(--ecm-text, var(--fg-body));
+}
+
+.clone-ai-video-outfit-upload-btn:active {
+  transform: scale(0.99);
 }
 
 .clone-ai-video-outfit-info {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  max-width: calc(100% - 20px);
+  padding: 4px 8px;
+  border: 1px solid rgba(var(--ecm-accent-rgb, 0, 255, 136), 0.28);
+  border-radius: 999px;
+  background: rgba(var(--ecm-accent-rgb, 0, 255, 136), 0.1);
   font-size: 12px;
-  color: var(--accent);
+  font-weight: 850;
+  color: var(--ecm-accent, var(--accent));
+  pointer-events: none;
+}
+
+.clone-ai-video-outfit-upload:has(.clone-ai-video-outfit-info) .clone-ai-video-outfit-upload-btn {
+  border-style: solid;
+  border-color: rgba(var(--ecm-accent-rgb, 0, 255, 136), 0.38);
+  background:
+    linear-gradient(180deg, rgba(var(--ecm-accent-rgb, 0, 255, 136), 0.075), transparent 74%),
+    var(--ecm-inset, var(--bg-inset));
 }
 
 /* Ecommerce generation page SaaS polish: visual-only refinement for the product creation workspace. */

src/styles/pages/home.css

@@ -465,7 +465,7 @@
 .omni-home__feature-page.is-script,
 .omni-home__feature-page.is-model,
 .omni-home__feature-page.is-ecommerce {
-  --home-showcase-page-pad-y: clamp(10px, 1.8vw, 24px);
+  --home-showcase-page-pad-y: clamp(4px, 0.8vw, 12px);
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 0;
@@ -950,11 +950,12 @@
   position: relative;
   z-index: 2;
   display: flex;
+  align-items: center;
   width: 100%;
   height: 100%;
   min-height: inherit;
   gap: clamp(30px, 2.6cqw, 56px);
-  padding: clamp(24px, 2.2cqw, 46px) clamp(36px, 3.7cqw, 72px);
+  padding: clamp(12px, 1.2cqw, 24px) clamp(24px, 2.4cqw, 48px);
 }
 
 .omni-home-ecommerce-matrix .left-panel,
@@ -966,10 +967,10 @@
 
 .omni-home-ecommerce-matrix .left-panel {
   display: flex;
-  flex: 0 0 clamp(320px, 24cqw, 450px);
+  flex: 0 0 clamp(360px, 29cqw, 540px);
   flex-direction: column;
   justify-content: center;
-  gap: clamp(16px, 1.1cqw, 26px);
+  gap: clamp(22px, 1.6cqw, 34px);
   min-width: 0;
 }
 
@@ -982,7 +983,7 @@
 
 .omni-home-ecommerce-matrix .hero-title {
   color: var(--matrix-text-primary);
-  font-size: clamp(40px, 3cqw, 58px);
+  font-size: clamp(48px, 3.6cqw, 72px);
   font-weight: 900;
   letter-spacing: 0;
   line-height: 1.08;
@@ -994,7 +995,7 @@
 
 .omni-home-ecommerce-matrix .hero-desc {
   color: var(--matrix-text-secondary);
-  font-size: clamp(16px, 1.2cqw, 22px);
+  font-size: clamp(19px, 1.4cqw, 26px);
   font-weight: 500;
   letter-spacing: 0.2px;
   line-height: 1.55;
@@ -1003,20 +1004,20 @@
 .omni-home-ecommerce-matrix .features {
   display: flex;
   flex-direction: column;
-  gap: clamp(12px, 0.95cqw, 18px);
+  gap: clamp(16px, 1.2cqw, 24px);
 }
 
 .omni-home-ecommerce-matrix .feature-item {
   position: relative;
   display: flex;
   align-items: flex-start;
-  gap: 12px;
+  gap: 14px;
   overflow: hidden;
   border: 1px solid var(--matrix-border-subtle);
   border-radius: var(--matrix-radius);
   background: var(--matrix-card-surface);
-  min-height: clamp(70px, 4.6cqw, 92px);
+  min-height: clamp(88px, 5.8cqw, 114px);
-  padding: clamp(16px, 1.2cqw, 24px);
+  padding: clamp(20px, 1.5cqw, 30px);
   box-shadow: var(--matrix-shadow-card);
   backdrop-filter: var(--matrix-glass-blur);
   -webkit-backdrop-filter: var(--matrix-glass-blur);
@@ -1049,15 +1050,15 @@
   position: relative;
   z-index: 1;
   display: flex;
-  flex: 0 0 clamp(44px, 2.8cqw, 56px);
+  flex: 0 0 clamp(50px, 3.4cqw, 64px);
-  width: clamp(44px, 2.8cqw, 56px);
+  width: clamp(50px, 3.4cqw, 64px);
-  height: clamp(44px, 2.8cqw, 56px);
+  height: clamp(50px, 3.4cqw, 64px);
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(0, 255, 136, 0.2);
   border-radius: var(--matrix-radius);
   background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(168, 85, 247, 0.15));
-  font-size: clamp(20px, 1.4cqw, 28px);
+  font-size: clamp(24px, 1.6cqw, 32px);
 }
 
 .omni-home-ecommerce-matrix .feature-text {
@@ -1067,15 +1068,15 @@
 
 .omni-home-ecommerce-matrix .feature-text h4 {
   color: var(--matrix-text-primary);
-  font-size: clamp(18px, 1.2cqw, 24px);
+  font-size: clamp(20px, 1.4cqw, 26px);
   font-weight: 750;
   line-height: 1.25;
 }
 
 .omni-home-ecommerce-matrix .feature-text p {
-  margin-top: 6px;
+  margin-top: 8px;
   color: var(--matrix-text-dim);
-  font-size: clamp(13px, 0.9cqw, 17px);
+  font-size: clamp(15px, 1cqw, 19px);
   font-weight: 500;
   letter-spacing: 0.1px;
   line-height: 1.5;
@@ -1085,12 +1086,11 @@
   display: flex;
   align-items: center;
   gap: 0;
-  margin-top: auto;
   border: 1px solid var(--matrix-border-subtle);
   border-radius: var(--matrix-radius);
   background: var(--matrix-card-surface);
-  min-height: clamp(72px, 4.6cqw, 92px);
+  min-height: clamp(88px, 5.8cqw, 114px);
-  padding: clamp(14px, 1.1cqw, 22px) clamp(16px, 1.4cqw, 26px);
+  padding: clamp(18px, 1.4cqw, 28px) clamp(20px, 1.7cqw, 34px);
   box-shadow: var(--matrix-shadow-card);
   backdrop-filter: var(--matrix-glass-blur);
   -webkit-backdrop-filter: var(--matrix-glass-blur);
@@ -1102,18 +1102,18 @@
   flex: 1;
   flex-direction: column;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   min-width: 0;
 }
 
 .omni-home-ecommerce-matrix .step-icon {
-  font-size: clamp(18px, 1.2cqw, 24px);
+  font-size: clamp(22px, 1.4cqw, 28px);
   line-height: 1;
 }
 
 .omni-home-ecommerce-matrix .step-label {
   color: var(--matrix-text-secondary);
-  font-size: clamp(12px, 0.82cqw, 16px);
+  font-size: clamp(14px, 0.95cqw, 18px);
   font-weight: 650;
   line-height: 1;
   white-space: nowrap;
@@ -1121,7 +1121,7 @@
 
 .omni-home-ecommerce-matrix .step-sub {
   color: var(--matrix-text-dim);
-  font-size: clamp(10px, 0.7cqw, 13px);
+  font-size: clamp(11px, 0.78cqw, 14px);
   letter-spacing: 0.5px;
   line-height: 1;
   white-space: nowrap;
@@ -1156,22 +1156,22 @@
 
 .omni-home-ecommerce-matrix .center-panel {
   display: flex;
-  flex: 0 0 clamp(310px, 22cqw, 430px);
+  flex: 0 0 clamp(350px, 26cqw, 500px);
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 16px;
+  gap: 20px;
   min-width: 0;
 }
 
 .omni-home-ecommerce-matrix .input-card {
   position: relative;
   z-index: 3;
-  width: min(100%, clamp(310px, 21cqw, 420px));
+  width: min(100%, clamp(350px, 24cqw, 480px));
   border: 1px solid var(--matrix-border-default);
   border-radius: var(--matrix-radius);
   background: var(--matrix-card-elevated);
-  padding: clamp(20px, 1.45cqw, 30px);
+  padding: clamp(24px, 1.7cqw, 36px);
   box-shadow: var(--matrix-shadow-elevated), 0 0 60px rgba(0, 255, 136, 0.08);
   backdrop-filter: var(--matrix-glass-blur);
   -webkit-backdrop-filter: var(--matrix-glass-blur);
@@ -1203,12 +1203,12 @@
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  margin-bottom: clamp(16px, 1.1cqw, 24px);
+  margin-bottom: clamp(20px, 1.4cqw, 30px);
 }
 
 .omni-home-ecommerce-matrix .input-card-label {
   color: var(--matrix-cyan);
-  font-size: clamp(14px, 1cqw, 18px);
+  font-size: clamp(16px, 1.15cqw, 22px);
   font-weight: 800;
   letter-spacing: 1.2px;
   text-transform: uppercase;
@@ -1220,7 +1220,7 @@
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.04);
   color: var(--matrix-text-dim);
-  font-size: clamp(12px, 0.9cqw, 16px);
+  font-size: clamp(13px, 0.95cqw, 17px);
   letter-spacing: 0.5px;
   padding: 6px 12px;
   white-space: nowrap;
@@ -1393,9 +1393,9 @@
   flex: 1;
   flex-direction: column;
   justify-content: center;
-  gap: clamp(16px, 1.35cqw, 28px);
+  gap: clamp(22px, 1.6cqw, 34px);
   min-width: 0;
-  padding-left: clamp(34px, 3.4cqw, 78px);
+  padding-left: clamp(8px, 0.8cqw, 24px);
 }
 
 .omni-home-ecommerce-matrix .ai-node {
@@ -1403,13 +1403,13 @@
   z-index: 4;
   display: flex;
   align-items: center;
-  gap: clamp(12px, 1cqw, 18px);
+  gap: clamp(14px, 1.15cqw, 22px);
   width: 100%;
   border: 1px solid var(--matrix-border-default);
   border-radius: var(--matrix-radius);
   background: var(--matrix-card-highlight);
-  min-height: clamp(54px, 3.8cqw, 72px);
+  min-height: clamp(62px, 4.4cqw, 82px);
-  padding: 12px clamp(16px, 1.4cqw, 26px);
+  padding: 14px clamp(18px, 1.6cqw, 30px);
   box-shadow: var(--matrix-shadow-card), var(--matrix-shadow-glow-purple);
   backdrop-filter: var(--matrix-glass-blur);
   -webkit-backdrop-filter: var(--matrix-glass-blur);
@@ -1428,7 +1428,7 @@
 .omni-home-ecommerce-matrix .ai-node-title {
   flex-shrink: 0;
   color: var(--matrix-cyan);
-  font-size: clamp(12px, 0.82cqw, 16px);
+  font-size: clamp(14px, 0.95cqw, 18px);
   font-weight: 850;
   letter-spacing: 1.6px;
   text-transform: uppercase;
@@ -1442,7 +1442,7 @@
 .omni-home-ecommerce-matrix .ai-node-list {
   display: flex;
   flex: 1;
-  gap: clamp(8px, 0.75cqw, 14px);
+  gap: clamp(10px, 0.85cqw, 16px);
   min-width: 0;
 }
 
@@ -1452,10 +1452,10 @@
   border-radius: 4px;
   background: rgba(255, 255, 255, 0.03);
   color: var(--matrix-text-secondary);
-  font-size: clamp(11px, 0.78cqw, 15px);
+  font-size: clamp(12px, 0.85cqw, 16px);
   letter-spacing: 0.2px;
   line-height: 1.3;
-  padding: 7px clamp(10px, 0.9cqw, 16px);
+  padding: 8px clamp(12px, 1cqw, 18px);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -1463,28 +1463,28 @@
 .omni-home-ecommerce-matrix .output-group {
   display: flex;
   align-items: center;
-  gap: clamp(14px, 1.1cqw, 22px);
+  gap: clamp(16px, 1.3cqw, 26px);
   min-width: 0;
 }
 
 .omni-home-ecommerce-matrix .output-label {
-  flex: 0 0 clamp(96px, 6.5cqw, 132px);
+  flex: 0 0 clamp(72px, 5cqw, 100px);
   padding-right: 4px;
   text-align: right;
 }
 
 .omni-home-ecommerce-matrix .output-label h4 {
   color: var(--matrix-text-primary);
-  font-size: clamp(18px, 1.3cqw, 25px);
+  font-size: clamp(20px, 1.45cqw, 28px);
   font-weight: 850;
   letter-spacing: 0.3px;
   line-height: 1.2;
 }
 
 .omni-home-ecommerce-matrix .output-label p {
-  margin-top: 6px;
+  margin-top: 8px;
   color: var(--matrix-text-dim);
-  font-size: clamp(11px, 0.82cqw, 15px);
+  font-size: clamp(12px, 0.9cqw, 16px);
   letter-spacing: 0.8px;
   line-height: 1.2;
   text-transform: uppercase;
@@ -1501,14 +1501,14 @@
 .omni-home-ecommerce-matrix .output-cards {
   display: flex;
   flex: 1;
-  gap: clamp(14px, 1.15cqw, 24px);
+  gap: clamp(10px, 0.85cqw, 18px);
   min-width: 0;
 }
 
 .omni-home-ecommerce-matrix .output-card {
   position: relative;
   flex: 1;
-  min-width: 0;
+  min-width: clamp(80px, 7cqw, 140px);
   overflow: hidden;
   border: 1px solid var(--matrix-border-subtle);
   border-radius: var(--matrix-radius);

src/styles/pages/legacy-pages.css

@@ -11915,6 +11915,21 @@
   gap: 6px;
 }
 
+.wb-composer__billing-estimate {
+  max-width: 138px;
+  padding: 6px 9px;
+  border: 2px solid #111;
+  background: #fffbe8;
+  color: #111;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-shadow: 2px 2px 0 #111;
+}
+
 .wb-composer__send-primary {
   display: inline-flex;
   align-items: center;

src/styles/pages/script-tokens-v5.css

@@ -1620,12 +1620,23 @@
   border: 0;
   background: transparent;
   cursor: default;
+  position: relative;
 }
 
 .script-eval-v5-illustration:hover {
   background: transparent;
 }
 
+.script-eval-v5-illustration.is-dragging .script-eval-v5-illustration-hit {
+  background: var(--v5-green-deep);
+  outline: 2px dashed var(--v5-green);
+  transform: scale(1.02);
+}
+
+.script-eval-v5-illustration .script-eval-v5-upload-drop-overlay {
+  border-radius: 10px;
+}
+
 .script-eval-v5-illustration-hit {
   display: inline-flex;
   flex-direction: column;

src/styles/pages/studio-layout.css

@@ -299,6 +299,25 @@
   gap: 10px;
   padding: 32px;
   text-align: center;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background 0.18s ease, outline 0.18s ease, transform 0.18s ease;
+}
+
+.studio-canvas-ghost:hover {
+  background: rgba(var(--accent-rgb), 0.05);
+  outline: 1px dashed rgba(var(--accent-rgb), 0.25);
+}
+
+.studio-canvas-ghost:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.studio-canvas-ghost.is-dragging {
+  background: rgba(var(--accent-rgb), 0.1);
+  outline: 2px dashed var(--accent);
+  transform: scale(1.02);
 }
 
 .studio-canvas-ghost__icon {

src/styles/shell/app-shell.css

@@ -248,6 +248,43 @@
   color: var(--accent);
 }
 
+.beta-apply-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 0;
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid rgba(var(--accent-rgb), 0.3);
+  border-radius: 12px;
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 850;
+  cursor: pointer;
+  transition:
+    transform 160ms ease,
+    border-color 160ms ease,
+    background 160ms ease;
+  animation: beta-pulse 2.5s ease-in-out infinite;
+}
+
+.beta-apply-button:hover {
+  border-color: var(--accent);
+  background: rgba(var(--accent-rgb), 0.18);
+}
+
+.beta-apply-button:active {
+  transform: scale(0.96);
+}
+
+@keyframes beta-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.25); }
+  50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0); }
+}
+
 .member-button {
   color: var(--accent);
   font-weight: 600;

src/styles/themes/dark-green.css

@@ -1806,6 +1806,14 @@
   box-shadow: none;
 }
 
+.web-shell[data-ui-theme="dark-green"] .wb-composer__billing-estimate {
+  border: 1px solid var(--border-default);
+  border-radius: 999px;
+  background: var(--bg-elevated);
+  color: var(--fg-body);
+  box-shadow: none;
+}
+
 .web-shell[data-ui-theme="dark-green"] .wb-composer__send-primary:hover:not(:disabled) {
   background: var(--accent-hover);
   color: var(--dg-button-text);

src/types.ts

@@ -25,6 +25,7 @@ export type WebViewKey =
   | "dialogGenerator"
   | "communityReview"
   | "communityCaseAdd"
+  | "betaApplications"
   | "report"
   | "providerHealth"
   | "userAgreement"
@@ -73,6 +74,7 @@ export interface WebUserSession extends WebApiResultMeta {
     enterpriseAdminUserId?: number | string | null;
     balanceCents?: number;
     enterpriseBalanceCents?: number;
+    maxConcurrency?: number;
     activePackages?: Array<{
       name: string;
       expiresAt: string;

src/utils/enterpriseVideoPolicy.ts

@@ -40,6 +40,7 @@ export const ENTERPRISE_VIDEO_RESOLUTION_OPTIONS = [
 
 export const ENTERPRISE_DEFAULT_VIDEO_MODEL = HAPPY_HORSE_UI_MODEL;
 export const ENTERPRISE_DEFAULT_VIDEO_RESOLUTION = "1080P";
+const CREDITS_PER_CNY = 100;
 
 export interface EnterpriseVideoPricingInput {
   model: string;
@@ -74,11 +75,11 @@ export function getEnterpriseVideoCreditRate(input: EnterpriseVideoPricingInput)
   }
 
   if (model.includes("vidu")) {
-    return resolution === "720P" ? 0.4 : 0.8;
+    return resolution === "720P" ? 0.6 : 1.0;
   }
 
   if (model.includes("pixverse")) {
-    return resolution === "720P" ? 0.4 : 0.8;
+    return resolution === "720P" ? 0.6 : 1.0;
   }
 
   if (model.includes("kling")) {
@@ -94,5 +95,5 @@ export function getEnterpriseVideoCreditRate(input: EnterpriseVideoPricingInput)
 
 export function calculateEnterpriseVideoCredits(input: EnterpriseVideoPricingInput): number {
   const duration = Math.max(1, Math.ceil(Number(input.durationSeconds) || 1));
-  return Number((getEnterpriseVideoCreditRate(input) * duration).toFixed(2));
+  return Number((getEnterpriseVideoCreditRate(input) * duration * CREDITS_PER_CNY).toFixed(2));
 }

src/utils/modelOptions.ts

@@ -25,11 +25,30 @@ export function getImageQualityOptions(model: string): CanvasOption[] {
     : imageQualityOptions.filter((option) => option.value !== "4K");
 }
 
+export function getImageQualityOptionsForContext(
+  model: string,
+  context?: { hasReferenceImages?: boolean; isGridMode?: boolean },
+): CanvasOption[] {
+  const options = getImageQualityOptions(model);
+  const shouldLimitTo2K =
+    String(model || "").toLowerCase() === "wan2.7-image-pro" &&
+    (context?.hasReferenceImages || context?.isGridMode);
+  return shouldLimitTo2K ? options.filter((option) => option.value !== "4K") : options;
+}
+
 export function getDefaultImageQuality(model: string): string {
   const options = getImageQualityOptions(model);
   return options.some((option) => option.value === "2K") ? "2K" : options[0]?.value || "1K";
 }
 
+export function getDefaultImageQualityForContext(
+  model: string,
+  context?: { hasReferenceImages?: boolean; isGridMode?: boolean },
+): string {
+  const options = getImageQualityOptionsForContext(model, context);
+  return options.some((option) => option.value === "2K") ? "2K" : options[0]?.value || "1K";
+}
+
 // ─── Video quality ────────────────────────────────────────────────────────────
 
 function normalizeVideoModel(model: string): string {

src/utils/taskLifecycle.ts

@@ -32,8 +32,10 @@ export interface TextTokenUsage {
   totalTokens?: number;
 }
 
-export const TEXT_INPUT_CREDITS_PER_MILLION = 2;
+const CREDITS_PER_CNY = 100;
-export const TEXT_OUTPUT_CREDITS_PER_MILLION = 5;
+
+export const TEXT_INPUT_CREDITS_PER_MILLION = 2 * CREDITS_PER_CNY;
+export const TEXT_OUTPUT_CREDITS_PER_MILLION = 5 * CREDITS_PER_CNY;
 
 const IMAGE_TIMEOUT_POLICY: TaskTimeoutPolicy = {
   submitTimeoutMs: 90_000,
@@ -151,7 +153,7 @@ export function estimateTextTokenCredits(usage: TextTokenUsage): number {
 }
 
 export function formatTextTokenUsage(usage?: TextTokenUsage | null): string {
-  const rule = "文本计费规则：输入 Token 每百万 2 积分，输出 Token 每百万 5 积分，实际以服务端结算为准。";
+  const rule = "文本计费规则：输入 Token 每百万 200 积分，输出 Token 每百万 500 积分，实际以服务端结算为准。";
   if (!usage) return rule;
   const promptTokens = Math.max(0, Number(usage.promptTokens || 0));
   const completionTokens = Math.max(0, Number(usage.completionTokens || 0));