@orbit-work/ui 0.1.0

package/src/components/composite/PlanFeatureIcon/index.tsx

@@ -0,0 +1,48 @@
+import type { ReactElement } from "react"
+
+export type PlanFeatureIconKind = "include" | "exclude" | "highlight"
+
+/**
+ * PlanFeatureIcon — 套餐特性表标记（include 勾 / exclude 叉 / highlight 星）。
+ *
+ * W5 终扫（§7 图标）：三枚原来是 Lucide 语系直搬——勾/叉 strokeWidth 2.5、
+ * highlight 是实心五角星 `d="M12 2l2.9 6.2…"`（多彩字形语系，非本族构造几何）。
+ * 现统一为 24 网格构造几何：直段折线勾、直段交叉叉、四角火花（同 Icons/Sparkles
+ * 的描边星形），描边取 16px 档实测调参配重 2.2、线端与折角 round，全部只描边不填充。
+ * 色在 styles/components.css 的 `.ow-plan-feature-icon--*`：include 走无彩极色
+ * `--ow-control-on`，不引荧黄（R2）。
+ */
+const STROKE = {
+  stroke: "currentColor",
+  strokeWidth: 2.2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+} as const
+
+export type PlanFeatureIconProps = {
+  kind: PlanFeatureIconKind
+  className?: string
+}
+
+export function PlanFeatureIcon({ kind, className = "" }: PlanFeatureIconProps): ReactElement {
+  const classes = ["ow-plan-feature-icon", `ow-plan-feature-icon--${kind}`, className].filter(Boolean).join(" ")
+  if (kind === "exclude") {
+    return (
+      <svg className={classes} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M17.5 6.5L6.5 17.5M6.5 6.5L17.5 17.5" {...STROKE} />
+      </svg>
+    )
+  }
+  if (kind === "highlight") {
+    return (
+      <svg className={classes} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M12 4L13.75 10.25L20 12L13.75 13.75L12 20L10.25 13.75L4 12L10.25 10.25Z" {...STROKE} />
+      </svg>
+    )
+  }
+  return (
+    <svg className={classes} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path d="M4.5 12.5L9.8 17.8L19.5 6.6" {...STROKE} />
+    </svg>
+  )
+}

package/src/components/composite/PlanSettingsSectionView/PlanSettingsSectionView.stories.tsx

@@ -0,0 +1,231 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { PlanSettingsSectionView } from "./index"
+
+const meta = {
+  title: "Composite/PlanSettingsSectionView",
+  component: PlanSettingsSectionView,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof PlanSettingsSectionView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const samplePlans = [
+  {
+    id: "basic",
+    name: "Basic",
+    creditsLabel: "10,000",
+    includedCredits: 10000,
+    tagline: "适合个人开发者",
+    features: [
+      { kind: "check" as const, label: "基础模型访问" },
+      { kind: "check" as const, label: "标准响应速度" },
+      { kind: "cross" as const, label: "高级功能" },
+    ],
+  },
+  {
+    id: "pro",
+    name: "Pro",
+    recommended: true,
+    creditsLabel: "50,000",
+    includedCredits: 50000,
+    tagline: "适合团队协作",
+    features: [
+      { kind: "check" as const, label: "所有模型访问" },
+      { kind: "check" as const, label: "优先响应速度" },
+      { kind: "check" as const, label: "高级功能" },
+    ],
+  },
+  {
+    id: "enterprise",
+    name: "Enterprise",
+    creditsLabel: "无限",
+    tagline: "适合企业客户",
+    features: [
+      { kind: "check" as const, label: "无限额度" },
+      { kind: "check" as const, label: "专属支持" },
+      { kind: "check" as const, label: "自定义部署" },
+    ],
+  },
+]
+
+export const Default: Story = {
+  args: {
+    stats: {
+      used: "12,450",
+      limit: "50,000",
+      currentPlan: "Pro",
+    },
+    plans: samplePlans,
+    currentPlanName: "Pro",
+    usagePercent: 24.9,
+    onChoose: async (planId) => {
+      console.log("choose plan:", planId)
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return true
+    },
+    onReset: async () => {
+      console.log("reset usage")
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return true
+    },
+  },
+}
+
+export const HighUsage: Story = {
+  args: {
+    stats: {
+      used: "47,800",
+      limit: "50,000",
+      currentPlan: "Pro",
+    },
+    plans: samplePlans,
+    currentPlanName: "Pro",
+    usagePercent: 95.6,
+    onChoose: async () => true,
+    onReset: async () => true,
+  },
+}
+
+export const NoCurrentPlan: Story = {
+  args: {
+    stats: {
+      used: "0",
+      limit: "0",
+      currentPlan: "未提供",
+    },
+    plans: samplePlans,
+    currentPlanName: "未提供",
+    usagePercent: null,
+    onChoose: async () => true,
+    onReset: async () => true,
+  },
+}
+
+export const BasicPlan: Story = {
+  args: {
+    stats: {
+      used: "3,200",
+      limit: "10,000",
+      currentPlan: "Basic",
+    },
+    plans: samplePlans,
+    currentPlanName: "Basic",
+    usagePercent: 32,
+    onChoose: async () => true,
+    onReset: async () => true,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    stats: {
+      used: "0",
+      limit: "0",
+      currentPlan: "-",
+    },
+    plans: [],
+    currentPlanName: "",
+    usagePercent: null,
+    loading: true,
+    onChoose: async () => true,
+    onReset: async () => true,
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    stats: {
+      used: "12,450",
+      limit: "50,000",
+      currentPlan: "Pro",
+    },
+    plans: samplePlans,
+    currentPlanName: "Pro",
+    usagePercent: 24.9,
+    error: "套餐服务暂时不可用，请稍后再试",
+    onChoose: async () => true,
+    onReset: async () => true,
+  },
+}
+
+export const ResetDisabled: Story = {
+  args: {
+    stats: {
+      used: "25,000",
+      limit: "50,000",
+      currentPlan: "Pro",
+    },
+    plans: samplePlans,
+    currentPlanName: "Pro",
+    usagePercent: 50,
+    resetDisabled: true,
+    onChoose: async () => true,
+    onReset: async () => true,
+  },
+}
+
+export const Pending: Story = {
+  args: {
+    stats: {
+      used: "12,450",
+      limit: "50,000",
+      currentPlan: "Pro",
+    },
+    plans: samplePlans,
+    currentPlanName: "Pro",
+    usagePercent: 24.9,
+    pendingId: "enterprise",
+    onChoose: async () => true,
+    onReset: async () => true,
+  },
+}
+
+export const Resetting: Story = {
+  args: {
+    stats: {
+      used: "12,450",
+      limit: "50,000",
+      currentPlan: "Pro",
+    },
+    plans: samplePlans,
+    currentPlanName: "Pro",
+    usagePercent: 24.9,
+    resetting: true,
+    onChoose: async () => true,
+    onReset: async () => true,
+  },
+}
+
+export const EmptyPlans: Story = {
+  args: {
+    stats: {
+      used: "0",
+      limit: "0",
+      currentPlan: "-",
+    },
+    plans: [],
+    currentPlanName: "",
+    usagePercent: null,
+    onChoose: async () => true,
+    onReset: async () => true,
+  },
+}
+
+export const FullUsage: Story = {
+  args: {
+    stats: {
+      used: "50,000",
+      limit: "50,000",
+      currentPlan: "Pro",
+    },
+    plans: samplePlans,
+    currentPlanName: "Pro",
+    usagePercent: 100,
+    onChoose: async () => true,
+    onReset: async () => true,
+  },
+}

package/src/components/composite/PlanSettingsSectionView/PlanSettingsSectionViewSource.test.mjs

@@ -0,0 +1,85 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const indexSource = await readFile(new URL("../index.ts", import.meta.url), "utf8")
+const styles = await readFile(new URL("../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+test("plan settings view owns the complete settings presentation", () => {
+  assert.match(source, /export function PlanSettingsSectionView/)
+  assert.match(source, /className="plan-settings"/)
+  assert.match(source, /className="usage-stat"/)
+  assert.match(source, /className="plan-cards"/)
+  assert.match(source, /确认重置用量/)
+  assert.match(source, /确认提交/)
+})
+
+test("plan settings view is public and its layout is responsive", () => {
+  assert.match(indexSource, /export \* from ['"]\.\/PlanSettingsSectionView['"]/)
+  assert.match(source, /export interface PlanSettingsSectionViewProps/)
+  assert.ok(
+    styles.includes(".plan-settings .plan-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }"),
+  )
+  assert.match(styles, /\.plan-settings \.plan-reset__hint \{[^}]*var\(--ow-text-3\)/)
+})
+
+test("plan actions use filled design-system button variants", () => {
+  // R2 复审裁决（§4 行动极各屏一处）：卡面动作一律 secondary——原「推荐且非降级 → primary」
+  // 与确认弹层的「确认提交」同屏两枚荧黄；行动极随弹层走，推荐由 Badge 承担（R1 双编码）。
+  assert.match(source, /variant="secondary"\n\s*className="plan-card__action"/)
+  assert.doesNotMatch(source, /isDowngrade/)
+  assert.doesNotMatch(source, /className="plan-card__action"[\s\S]{0,120}variant=["']primary["']/)
+  assert.doesNotMatch(source, /variant=["']unstyled["']/)
+  assert.match(styles, /\.plan-card__action \{[^}]*width: 100%/)
+})
+
+// ── R2 复审 ────────────────────────────────────────────────────────────────
+test("§5 单一模态基座：两处确认走 composite/Dialog，自造 .ow-confirm 立面退役", () => {
+  assert.match(source, /import \{ Dialog \} from "\.\.\/Dialog"/)
+  assert.doesNotMatch(source, /className="ow-modal-host"/)
+  assert.doesNotMatch(source, /className="ow-confirm"/)
+  // 行动极落在弹层的「确认提交」上（两处确认各一枚 primary，永不与卡面同屏）
+  assert.equal(source.match(/variant="primary"/g)?.length, 2)
+  // 「提交中禁用取消」的行为靠 actions 槽保留，不走 onConfirm 便捷档
+  assert.match(source, /actions=\{[\s\S]*?disabled=\{pendingId !== null\}[\s\S]*?取消/)
+  assert.match(source, /closeOnOverlayClick=\{pendingId === null\}/)
+  assert.match(source, /closeOnOverlayClick=\{!resetting\}/)
+})
+
+test("卡骨架边框归口 1px --ow-border（不再是 border-strong）", () => {
+  assert.match(styles, /\.plan-card \{[^}]*solid var\(--ow-border\)/)
+  assert.doesNotMatch(styles, /\.plan-card \{[^}]*--ow-border-strong/)
+})
+
+// ── W5 终扫 ────────────────────────────────────────────────────────────────
+test("当前套餐卡＝无彩选中（control-on 边 ＋ selected-bg 底 ＋ 500 字重），零影零荧黄", () => {
+  assert.match(
+    styles,
+    /\.plan-card\.current \{ border-color: var\(--ow-control-on\); background: var\(--ow-selected-bg\); \}/,
+  )
+  assert.match(styles, /\.plan-card\.current \.ph \.n \{ font-weight: 500; \}/)
+  assert.doesNotMatch(styles, /\.plan-card\.current \{[^}]*box-shadow/)
+  assert.doesNotMatch(styles, /\.plan-card\.current \{[^}]*--ow-primary/)
+  // R1 第二编码：标题旁的「当前」badge
+  assert.match(source, /isCurrent \? <Badge variant="success">当前<\/Badge>/)
+})
+
+test("用量条 ≥80% 换 --ow-warning（永不荧黄），读数仍是 mono ＋ tabular-nums", () => {
+  // R2 · T4：阈值由 60 统一到 80，与账户菜单额度条同一门槛（原来两处各一套）。
+  assert.match(source, /data-ow-state=\{normalizedUsagePercent >= 80 \? "warn" : undefined\}/)
+  assert.match(styles, /\.usage-bar__fill\[data-ow-state="warn"\] \{ background: var\(--ow-warning\); \}/)
+  assert.doesNotMatch(styles, /\.usage-bar__fill[^\n]*--ow-beacon/)
+  assert.match(styles, /\.usage-bar__pct \{[^}]*var\(--ow-font-mono\)[^}]*font-variant-numeric: tabular-nums/)
+})
+
+test("§6 容器三态：空/载走 EmptyState G5，错误走 InlineMessage，裸灰字/裸红字整段退役", () => {
+  assert.match(source, /import \{ EmptyState \} from "\.\.\/\.\.\/primitives\/EmptyState"/)
+  assert.match(source, /import \{ InlineMessage \} from "\.\.\/\.\.\/primitives\/InlineMessage"/)
+  assert.match(source, /<EmptyState message="套餐加载中…" \/>/)
+  assert.match(source, /<EmptyState message=\{error \?\? "套餐服务暂不可用，请稍后再试"\} \/>/)
+  assert.match(source, /<InlineMessage variant="error">\{error\}<\/InlineMessage>/)
+  const code = source.replace(/\{\/\*[\s\S]*?\*\/\}/g, "").replace(/\/\*[\s\S]*?\*\//g, "")
+  assert.doesNotMatch(code, /plan-manage__hint|plan-manage__error/)
+  assert.doesNotMatch(styles, /^\.plan-manage__(hint|error) \{/m)
+})

package/src/components/composite/PlanSettingsSectionView/index.tsx

@@ -0,0 +1,264 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "../../primitives"
+import { Badge } from "../../primitives/Badge"
+import { EmptyState } from "../../primitives/EmptyState"
+import { InlineMessage } from "../../primitives/InlineMessage"
+import { Dialog } from "../Dialog"
+import { PlanFeatureIcon, type PlanFeatureIconKind } from "../PlanFeatureIcon"
+import { Section } from "../Section"
+
+export interface PlanSettingsChoiceView {
+  id: string
+  name: string
+  recommended?: boolean
+  creditsLabel: string
+  includedCredits?: number
+  tagline: string
+  features: Array<{ kind: PlanFeatureIconKind; label: string }>
+}
+
+export interface PlanSettingsStats {
+  used: string
+  limit: string
+  currentPlan: string
+}
+
+export interface PlanSettingsSectionViewProps {
+  stats: PlanSettingsStats
+  plans: PlanSettingsChoiceView[]
+  currentPlanName: string
+  usagePercent: number | null
+  loading?: boolean
+  error?: string | null
+  pendingId?: string | null
+  resetting?: boolean
+  resetDisabled?: boolean
+  onChoose: (planId: string) => boolean | Promise<boolean>
+  onReset: () => boolean | Promise<boolean>
+}
+
+export function PlanSettingsSectionView({
+  stats,
+  plans,
+  currentPlanName,
+  usagePercent,
+  loading = false,
+  error = null,
+  pendingId = null,
+  resetting = false,
+  resetDisabled = false,
+  onChoose,
+  onReset,
+}: PlanSettingsSectionViewProps) {
+  const [pendingPlanId, setPendingPlanId] = useState<string | null>(null)
+  const [showResetConfirm, setShowResetConfirm] = useState(false)
+  const pendingPlan = plans.find((plan) => plan.id === pendingPlanId) ?? null
+  const currentKey = currentPlanName.trim().toLowerCase()
+  const hasCurrentPlan = currentKey !== "" && currentPlanName !== "未提供"
+  const currentCredits = plans.find((plan) => plan.name.trim().toLowerCase() === currentKey)?.includedCredits
+  const busy = pendingId !== null || resetting
+  const normalizedUsagePercent = usagePercent === null ? null : Math.min(Math.max(usagePercent, 0), 100)
+
+  const submitPlan = async (planId: string) => {
+    if (await onChoose(planId)) setPendingPlanId(null)
+  }
+
+  const submitReset = async () => {
+    if (await onReset()) setShowResetConfirm(false)
+  }
+
+  return (
+    <div className="plan-settings">
+      <div className="usage-stat">
+        <div className="b">
+          <div className="v">{stats.used}</div>
+          <div className="k">本月已用</div>
+        </div>
+        <div className="b">
+          <div className="v">{stats.limit}</div>
+          <div className="k">套餐额度</div>
+        </div>
+        <div className="b">
+          <div className="v">{stats.currentPlan}</div>
+          <div className="k">当前套餐</div>
+        </div>
+      </div>
+      <div className="usage-bar">
+        {normalizedUsagePercent !== null && (
+          <>
+            {/* 屏级判断表「用量显示」：≥80% 换 --ow-warning（永不荧黄）。
+                R2 · T4 裁决：本条原为 ≥60%，与账户菜单额度条的阈值分叉——同一件事
+                （额度将尽）两个门槛，用户在两处看到不同的告警时机。统一到 80%。
+                R1 双编码——颜色之外还有右侧 mono ＋ tabular-nums 的百分比读数。 */}
+            <div className="usage-bar__track">
+              <div
+                className="usage-bar__fill"
+                data-ow-state={normalizedUsagePercent >= 80 ? "warn" : undefined}
+                style={{ width: `${normalizedUsagePercent}%` }}
+              />
+            </div>
+            <div className="usage-bar__pct">{normalizedUsagePercent.toFixed(1)}%</div>
+          </>
+        )}
+        <Button variant="secondary" disabled={resetDisabled || busy} onClick={() => setShowResetConfirm(true)}>
+          重置用量
+        </Button>
+        {resetDisabled && <span className="plan-reset__hint">额度已手动设定，无法重置</span>}
+      </div>
+      <Section title="套餐管理" titleTier="eyebrow" divider={false} className="mt-6">
+        {/* §6 容器三态：错误走 InlineMessage（同 NoPlanPanelView），空/载走 EmptyState
+            G5 母题（信标图形 ＋ 一句 text-2），不再是 .plan-manage__hint/__error 的裸灰字与裸红字。 */}
+        {error && <InlineMessage variant="error">{error}</InlineMessage>}
+        {loading ? (
+          <EmptyState message="套餐加载中…" />
+        ) : plans.length === 0 ? (
+          <EmptyState message={error ?? "套餐服务暂不可用，请稍后再试"} />
+        ) : (
+          <div className="plan-cards">
+            {plans.map((plan) => {
+              const isCurrent = plan.name.trim().toLowerCase() === currentKey && currentKey !== ""
+              return (
+                <div
+                  key={plan.id}
+                  /* `rec` 修饰类是死钩子（全库零 CSS 规则）：推荐档只由 Badge 标出，
+                     边框高亮留给 .current。 */
+                  className={`plan-card${isCurrent ? " current" : ""}`}
+                >
+                  <div className="ph">
+                    <span className="n">{plan.name}</span>
+                    {isCurrent ? <Badge variant="success">当前</Badge> : plan.recommended ? <Badge>推荐</Badge> : null}
+                  </div>
+                  <div className="price">
+                    {plan.creditsLabel}
+                    <span className="price-unit"> 额度/月</span>
+                  </div>
+                  <div className="tag">{plan.tagline}</div>
+                  <ul className="feat">
+                    {plan.features.map((feature, index) => (
+                      <li key={index} className={`feat-${feature.kind}`}>
+                        <PlanFeatureIcon kind={feature.kind} />
+                        <span>{feature.label}</span>
+                      </li>
+                    ))}
+                  </ul>
+                  {/* §4 行动极各屏一处：卡上的动作原来在「推荐且非降级」时取 primary，
+                      与确认弹层里的「确认提交」同屏两枚荧黄。行动极随弹层走——卡面动作
+                      一律 secondary，「推荐」由 Badge 承担（R1 双编码不靠彩度）。 */}
+                  <Button
+                    variant="secondary"
+                    className="plan-card__action"
+                    disabled={busy || isCurrent}
+                    onClick={() => setPendingPlanId(plan.id)}
+                  >
+                    {buttonLabel({
+                      isCurrent,
+                      pending: pendingId === plan.id,
+                      hasCurrentPlan,
+                      targetCredits: plan.includedCredits,
+                      currentCredits,
+                    })}
+                  </Button>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </Section>
+      {/* §5 单一模态基座：两处确认原来自造 .ow-modal-host + .ow-confirm 立面
+          （无边框、--ow-bg 面、radius-card），是包内第二套模态皮；现走 composite/Dialog。
+          脚部用 actions 槽而非 onConfirm 便捷档，为的是保留「提交中禁用取消」这一行为。 */}
+      {pendingPlan && (
+        <Dialog
+          open
+          width={380}
+          closable={false}
+          closeOnOverlayClick={pendingId === null}
+          closeOnEscape={pendingId === null}
+          onClose={() => setPendingPlanId(null)}
+          title={`确认${confirmActionLabel({ hasCurrentPlan, targetCredits: pendingPlan.includedCredits, currentCredits })}？`}
+          actions={
+            <>
+              <Button variant="secondary" disabled={pendingId !== null} onClick={() => setPendingPlanId(null)}>
+                取消
+              </Button>
+              <Button
+                variant="primary"
+                disabled={pendingId !== null}
+                onClick={() => {
+                  void submitPlan(pendingPlan.id)
+                }}
+              >
+                {pendingId === pendingPlan.id ? "提交中…" : "确认提交"}
+              </Button>
+            </>
+          }
+        >
+          即将为你{hasCurrentPlan ? "切换到" : "开通"}「{pendingPlan.name}」套餐，操作提交后需等待审批通过。
+        </Dialog>
+      )}
+      {showResetConfirm && (
+        <Dialog
+          open
+          width={380}
+          closable={false}
+          closeOnOverlayClick={!resetting}
+          closeOnEscape={!resetting}
+          onClose={() => setShowResetConfirm(false)}
+          title="确认重置用量？"
+          actions={
+            <>
+              <Button variant="secondary" disabled={resetting} onClick={() => setShowResetConfirm(false)}>
+                取消
+              </Button>
+              <Button
+                variant="primary"
+                disabled={resetting}
+                onClick={() => {
+                  void submitReset()
+                }}
+              >
+                {resetting ? "提交中…" : "确认提交"}
+              </Button>
+            </>
+          }
+        >
+          确定要重置当前套餐的使用量吗？操作提交后需等待审批通过。
+        </Dialog>
+      )}
+    </div>
+  )
+}
+
+function buttonLabel(args: {
+  isCurrent: boolean
+  pending: boolean
+  hasCurrentPlan: boolean
+  targetCredits: number | undefined
+  currentCredits: number | undefined
+}): string {
+  const { isCurrent, pending, hasCurrentPlan, targetCredits, currentCredits } = args
+  if (isCurrent) return "当前套餐"
+  if (pending) return "处理中…"
+  if (!hasCurrentPlan) return "开通"
+  if (targetCredits !== undefined && currentCredits !== undefined) {
+    if (targetCredits > currentCredits) return "升级套餐"
+    if (targetCredits < currentCredits) return "降级套餐"
+  }
+  return "切换到此套餐"
+}
+
+function confirmActionLabel(args: {
+  hasCurrentPlan: boolean
+  targetCredits: number | undefined
+  currentCredits: number | undefined
+}): string {
+  const { hasCurrentPlan, targetCredits, currentCredits } = args
+  if (!hasCurrentPlan) return "开通套餐"
+  if (targetCredits !== undefined && currentCredits !== undefined) {
+    if (targetCredits > currentCredits) return "升级套餐"
+    if (targetCredits < currentCredits) return "降级套餐"
+  }
+  return "切换套餐"
+}