@orbit-work/ui 0.1.0

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

@@ -0,0 +1,344 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { NoPlanPanelView } from "./index"
+
+const meta = {
+  title: "Composite/NoPlanPanelView",
+  component: NoPlanPanelView,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof NoPlanPanelView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const basicPlan = {
+  id: "basic",
+  name: "Basic",
+  recommended: false,
+  creditsLabel: "1000",
+  tagline: "适合轻度使用",
+  features: [
+    { kind: "include" as const, label: "Standard 模型" },
+    { kind: "include" as const, label: "基础功能" },
+    { kind: "exclude" as const, label: "无高级模型" },
+  ],
+}
+
+const proPlan = {
+  id: "pro",
+  name: "Pro",
+  recommended: true,
+  creditsLabel: "5000",
+  tagline: "推荐给专业用户",
+  features: [
+    { kind: "include" as const, label: "全部四档模型" },
+    { kind: "include" as const, label: "Pro / Max 模型" },
+    { kind: "include" as const, label: "优先支持" },
+  ],
+}
+
+const enterprisePlan = {
+  id: "enterprise",
+  name: "Enterprise",
+  recommended: false,
+  creditsLabel: "50000",
+  tagline: "团队协作首选",
+  features: [
+    { kind: "include" as const, label: "无限调用" },
+    { kind: "include" as const, label: "团队管理" },
+    { kind: "include" as const, label: "专属支持" },
+  ],
+}
+
+export const Default: Story = {
+  args: {
+    plans: [basicPlan, proPlan, enterprisePlan],
+    applyingId: null,
+    error: null,
+    onBack: () => console.log("back"),
+    onApply: (planId) => console.log("apply", planId),
+    onSwitchProvider: (id) => console.log("switch provider", id),
+  },
+}
+
+export const SinglePlan: Story = {
+  args: {
+    plans: [proPlan],
+    applyingId: null,
+    error: null,
+    onBack: () => console.log("back"),
+    onApply: (planId) => console.log("apply", planId),
+    onSwitchProvider: (id) => console.log("switch provider", id),
+  },
+}
+
+export const TwoPlans: Story = {
+  args: {
+    plans: [basicPlan, proPlan],
+    applyingId: null,
+    error: null,
+    onBack: () => console.log("back"),
+    onApply: (planId) => console.log("apply", planId),
+    onSwitchProvider: (id) => console.log("switch provider", id),
+  },
+}
+
+export const FourPlans: Story = {
+  args: {
+    plans: [
+      basicPlan,
+      proPlan,
+      enterprisePlan,
+      {
+        id: "student",
+        name: "Student",
+        recommended: false,
+        creditsLabel: "2000",
+        tagline: "学生专享优惠",
+        features: [
+          { kind: "include" as const, label: "Standard / Plus" },
+          { kind: "include" as const, label: "教育优惠" },
+          { kind: "highlight" as const, label: "需学生认证" },
+        ],
+      },
+    ],
+    applyingId: null,
+    error: null,
+    onBack: () => console.log("back"),
+    onApply: (planId) => console.log("apply", planId),
+    onSwitchProvider: (id) => console.log("switch provider", id),
+  },
+}
+
+export const ApplyingBasic: Story = {
+  args: {
+    plans: [basicPlan, proPlan, enterprisePlan],
+    applyingId: "basic",
+    error: null,
+    onBack: () => console.log("back"),
+    onApply: (planId) => console.log("apply", planId),
+    onSwitchProvider: (id) => console.log("switch provider", id),
+  },
+}
+
+export const ApplyingPro: Story = {
+  args: {
+    plans: [basicPlan, proPlan, enterprisePlan],
+    applyingId: "pro",
+    error: null,
+    onBack: () => console.log("back"),
+    onApply: (planId) => console.log("apply", planId),
+    onSwitchProvider: (id) => console.log("switch provider", id),
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    plans: [basicPlan, proPlan, enterprisePlan],
+    applyingId: null,
+    error: "开通失败，请稍后重试",
+    onBack: () => console.log("back"),
+    onApply: (planId) => console.log("apply", planId),
+    onSwitchProvider: (id) => console.log("switch provider", id),
+  },
+}
+
+export const WithLongError: Story = {
+  args: {
+    plans: [basicPlan, proPlan, enterprisePlan],
+    applyingId: null,
+    error: "网络连接失败，无法完成开通操作。请检查您的网络连接后重试，或联系客服获取帮助。",
+    onBack: () => console.log("back"),
+    onApply: (planId) => console.log("apply", planId),
+    onSwitchProvider: (id) => console.log("switch provider", id),
+  },
+}
+
+export const NoRecommendedPlan: Story = {
+  args: {
+    plans: [
+      { ...basicPlan, recommended: false },
+      { ...proPlan, recommended: false },
+      { ...enterprisePlan, recommended: false },
+    ],
+    applyingId: null,
+    error: null,
+    onBack: () => console.log("back"),
+    onApply: (planId) => console.log("apply", planId),
+    onSwitchProvider: (id) => console.log("switch provider", id),
+  },
+}
+
+export const MultipleRecommended: Story = {
+  args: {
+    plans: [{ ...basicPlan, recommended: true }, { ...proPlan, recommended: true }, enterprisePlan],
+    applyingId: null,
+    error: null,
+    onBack: () => console.log("back"),
+    onApply: (planId) => console.log("apply", planId),
+    onSwitchProvider: (id) => console.log("switch provider", id),
+  },
+}
+
+export const VariedFeatures: Story = {
+  args: {
+    plans: [
+      {
+        id: "starter",
+        name: "Starter",
+        recommended: false,
+        creditsLabel: "500",
+        tagline: "免费试用",
+        features: [
+          { kind: "include" as const, label: "Standard 模型" },
+          { kind: "highlight" as const, label: "7天有效期" },
+        ],
+      },
+      {
+        id: "advanced",
+        name: "Advanced",
+        recommended: true,
+        creditsLabel: "10000",
+        tagline: "性能与价格平衡",
+        features: [
+          { kind: "include" as const, label: "全部模型" },
+          { kind: "include" as const, label: "API 访问" },
+          { kind: "include" as const, label: "数据分析" },
+          { kind: "include" as const, label: "优先队列" },
+        ],
+      },
+      {
+        id: "custom",
+        name: "Custom",
+        recommended: false,
+        creditsLabel: "按需定制",
+        tagline: "企业定制方案",
+        features: [
+          { kind: "include" as const, label: "私有部署" },
+          { kind: "include" as const, label: "SLA 保障" },
+          { kind: "highlight" as const, label: "联系销售" },
+        ],
+      },
+    ],
+    applyingId: null,
+    error: null,
+    onBack: () => console.log("back"),
+    onApply: (planId) => console.log("apply", planId),
+    onSwitchProvider: (id) => console.log("switch provider", id),
+  },
+}
+
+export const LongPlanNames: Story = {
+  args: {
+    plans: [
+      {
+        ...basicPlan,
+        name: "Basic Plan for Individual Users",
+      },
+      {
+        ...proPlan,
+        name: "Professional Enterprise Plan",
+      },
+    ],
+    applyingId: null,
+    error: null,
+    onBack: () => console.log("back"),
+    onApply: (planId) => console.log("apply", planId),
+    onSwitchProvider: (id) => console.log("switch provider", id),
+  },
+}
+
+export const LongCreditsLabel: Story = {
+  args: {
+    plans: [
+      {
+        ...basicPlan,
+        creditsLabel: "1,000,000",
+      },
+      {
+        ...proPlan,
+        creditsLabel: "无限额度",
+      },
+    ],
+    applyingId: null,
+    error: null,
+    onBack: () => console.log("back"),
+    onApply: (planId) => console.log("apply", planId),
+    onSwitchProvider: (id) => console.log("switch provider", id),
+  },
+}
+
+export const MinimalFeatures: Story = {
+  args: {
+    plans: [
+      {
+        id: "minimal",
+        name: "Minimal",
+        recommended: true,
+        creditsLabel: "100",
+        tagline: "最简配置",
+        features: [{ kind: "include" as const, label: "Standard 模型" }],
+      },
+    ],
+    applyingId: null,
+    error: null,
+    onBack: () => console.log("back"),
+    onApply: (planId) => console.log("apply", planId),
+    onSwitchProvider: (id) => console.log("switch provider", id),
+  },
+}
+
+export const ManyFeatures: Story = {
+  args: {
+    plans: [
+      {
+        id: "ultimate",
+        name: "Ultimate",
+        recommended: true,
+        creditsLabel: "100000",
+        tagline: "全功能套餐",
+        features: [
+          { kind: "include" as const, label: "全部四档模型" },
+          { kind: "include" as const, label: "API 无限调用" },
+          { kind: "include" as const, label: "优先支持" },
+          { kind: "include" as const, label: "数据分析仪表板" },
+          { kind: "include" as const, label: "团队协作功能" },
+          { kind: "include" as const, label: "私有部署选项" },
+          { kind: "include" as const, label: "SLA 99.9%" },
+          { kind: "include" as const, label: "专属客户经理" },
+        ],
+      },
+    ],
+    applyingId: null,
+    error: null,
+    onBack: () => console.log("back"),
+    onApply: (planId) => console.log("apply", planId),
+    onSwitchProvider: (id) => console.log("switch provider", id),
+  },
+}
+
+export const AllFeatureKinds: Story = {
+  args: {
+    plans: [
+      {
+        id: "showcase",
+        name: "Feature Showcase",
+        recommended: true,
+        creditsLabel: "3000",
+        tagline: "展示所有功能类型",
+        features: [
+          { kind: "include" as const, label: "已启用功能" },
+          { kind: "exclude" as const, label: "未启用功能" },
+          { kind: "highlight" as const, label: "信息提示" },
+        ],
+      },
+    ],
+    applyingId: null,
+    error: null,
+    onBack: () => console.log("back"),
+    onApply: (planId) => console.log("apply", planId),
+    onSwitchProvider: (id) => console.log("switch provider", id),
+  },
+}

package/src/components/composite/NoPlanPanelView/NoPlanPanelViewSource.test.mjs

@@ -0,0 +1,34 @@
+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 styles = await readFile(new URL("../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+const code = source.replace(/\{\/\*[\s\S]*?\*\/\}/g, "").replace(/\/\*[\s\S]*?\*\//g, "")
+
+// ── W5 终扫：返回归口 BackButton ───────────────────────────────────────────
+test("返回走 composite/BackButton 唯一形，不再就地手写箭头 svg 与自造 .back 皮", () => {
+  assert.match(source, /import \{ BackButton \} from "\.\.\/BackButton"/)
+  assert.match(code, /<BackButton onClick=\{onBack\}>返回<\/BackButton>/)
+  assert.doesNotMatch(code, /strokeWidth="1\.8"/)
+  assert.doesNotMatch(code, /M19 12H5M12 19l-7-7 7-7/)
+  assert.doesNotMatch(code, /className="back"/)
+  // 自造返回皮全仓零消费方，CSS 一并裁撤
+  assert.doesNotMatch(styles, /login-noplan__head \.back/)
+  assert.doesNotMatch(styles, /\.noplan-head \.back/)
+})
+
+// ── 空/错态母题（上一轮已落，锁住不回潮）─────────────────────────────────
+test("空态＝ow-beacon-idle 待命空环 ＋ mono eyebrow；错误行走 InlineMessage", () => {
+  assert.match(code, /className="ow-beacon-idle"/)
+  assert.match(code, /<InlineMessage variant="error">\{error\}<\/InlineMessage>/)
+  assert.doesNotMatch(styles, /\.login-noplan__error \{/)
+})
+
+// ── 卡骨架（共享 .plan-card 段）───────────────────────────────────────────
+test("plan-card 内距落 14 一档，徽章 10.5px 硬编码皮已退役", () => {
+  assert.match(styles, /\.plan-card \{[^}]*padding: 14px;/)
+  assert.doesNotMatch(styles, /\.plan-card \{[^}]*padding: 18px/)
+  assert.doesNotMatch(styles, /\.plan-card \.ph \.badge \{/)
+  assert.match(source, /<Badge>推荐<\/Badge>/)
+})

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

@@ -0,0 +1,97 @@
+import { Button } from "../../primitives"
+import { Badge } from "../../primitives/Badge"
+import { InlineMessage } from "../../primitives/InlineMessage"
+import { BackButton } from "../BackButton"
+import { PlanFeatureIcon, type PlanFeatureIconKind } from "../PlanFeatureIcon"
+
+export interface PlanChoiceView {
+  id: string
+  name: string
+  recommended: boolean
+  creditsLabel: string
+  tagline: string
+  features: Array<{ kind: PlanFeatureIconKind; label: string }>
+}
+
+export interface NoPlanPanelViewProps {
+  plans: PlanChoiceView[]
+  applyingId: string | null
+  error: string | null
+  onBack: () => void
+  onApply: (planId: string) => void
+  onSwitchProvider: (id: string) => void
+}
+
+const PROVIDERS = ["openai", "kimi", "glm", "minimax"] as const
+
+export function NoPlanPanelView({ plans, applyingId, error, onBack, onApply, onSwitchProvider }: NoPlanPanelViewProps) {
+  return (
+    <div className="login-panel__inner login-noplan">
+      {/* W5 终扫：返回原是就地手写的 24 网格 stroke-1.8 箭头 svg；返回全站唯一形＝
+          composite/BackButton（ghost ＋ chevron-left），状态由 Button 原语统一承担。 */}
+      <div className="login-noplan__head">
+        <BackButton onClick={onBack}>返回</BackButton>
+      </div>
+      <div className="login-noplan__intro">
+        {/* DS2 §6 空态标准形母题：信标空环走 .ow-beacon-idle 工具类（styles/utilities.css，已在 ds2-allowlist yellow 键内）取 --ow-beacon-idle，待命空环形、非点亮态，不占状态极 */}
+        <div className="login-noplan__mark" aria-hidden="true">
+          <span className="ow-beacon-idle" />
+          <span className="m">No Plan</span>
+        </div>
+        <div className="t">您还未开通 Orbitwork 个人套餐</div>
+        <div className="s">
+          Orbitwork 个人套餐让你一键调用 Standard / Plus / Pro / Max 四档模型；
+          <br />
+          也可以直接用 OpenAI、Kimi、GLM、Minimax 账户登录，使用各自的额度。
+        </div>
+      </div>
+      {/* §6 容器错误态走 InlineMessage（原 .login-noplan__error 裸 --ow-error 文字行已退役）。
+          文案原样透传宿主：拉取/申请两条路径的措辞由宿主决定，这里不替它编。 */}
+      {error && <InlineMessage variant="error">{error}</InlineMessage>}
+      <div className="plan-cards">
+        {plans.map((plan) => (
+          /* 推荐档只由标题旁的 Badge 标出（.plan-card 段注释：border highlight 留给
+             .current）——原来还发一个 `rec` 修饰类，全库零 CSS 规则，是死钩子。 */
+          <div key={plan.id} className="plan-card">
+            <div className="ph">
+              <span className="n">{plan.name}</span>
+              {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>
+            {/* 主行动＝推荐档「立即开通」走 primary（行动极正规通道），其余走 secondary；
+                申请中用 Button 的 loading（<20px 小转子，保 rest 配色，不套 disabled 灰） */}
+            <Button
+              variant={plan.recommended ? "primary" : "secondary"}
+              className="w-full"
+              disabled={applyingId !== null && applyingId !== plan.id}
+              loading={applyingId === plan.id}
+              onClick={() => onApply(plan.id)}
+            >
+              {applyingId === plan.id ? "申请中…" : plan.recommended ? "立即开通" : "选择"}
+            </Button>
+          </div>
+        ))}
+      </div>
+      <div className="login-noplan__alt">
+        <span>或使用其他平台账户：</span>
+        {PROVIDERS.map((id) => (
+          <Button variant="unstyled" key={id} className="link" onClick={() => onSwitchProvider(id)}>
+            {id}
+          </Button>
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { OpenWithButton } from "./index"
+
+const meta = {
+  title: "Composite/OpenWithButton",
+  component: OpenWithButton,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "蓝图已裁撤本件（工程组件 → Menu 配方）。继任者是 Domain/Chat/Attachment 的 OpenWithMenu，本页是 @deprecated 兼容层。",
+      },
+    },
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof OpenWithButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: "打开",
+    onOpen: () => console.log("open clicked"),
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    label: "打开",
+    iconName: "Folder",
+    onOpen: () => console.log("open clicked"),
+  },
+}
+
+export const WithMenu: Story = {
+  args: {
+    label: "打开",
+    iconName: "Folder",
+    onRequestOptions: () => [
+      { kind: "header", id: "h1", name: "推荐应用" },
+      { kind: "open-with", id: "vscode", name: "Visual Studio Code", iconName: "Terminal" },
+      { kind: "open-with", id: "finder", name: "Finder", iconName: "Folder" },
+      { kind: "divider", id: "d1" },
+      { kind: "header", id: "h2", name: "其他应用" },
+      { kind: "open-with", id: "preview", name: "Preview", iconName: "Search" },
+      { kind: "open-with", id: "textedit", name: "TextEdit", iconName: "Note", disabled: true },
+    ],
+    onSelect: (option) => console.log("selected", option),
+  },
+}
+
+export const WithAsyncMenu: Story = {
+  args: {
+    label: "打开方式",
+    iconName: "More",
+    onRequestOptions: () =>
+      new Promise((resolve) => {
+        setTimeout(() => {
+          resolve([
+            { kind: "open-with", id: "app1", name: "Application 1", iconName: "Terminal" },
+            { kind: "open-with", id: "app2", name: "Application 2", iconName: "Folder" },
+            { kind: "open-with", id: "app3", name: "Application 3", iconName: "Note" },
+          ])
+        }, 1000)
+      }),
+    onSelect: (option) => console.log("selected", option),
+  },
+}
+
+export const EmptyMenu: Story = {
+  args: {
+    label: "打开",
+    onRequestOptions: () => [],
+    onSelect: (option) => console.log("selected", option),
+  },
+}

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

@@ -0,0 +1,46 @@
+"use client"
+
+import { OpenWithMenu } from "../../domain/chat/Attachment"
+import type { FileReferenceMenuOption } from "../FileReferenceCard"
+import type { IconName } from "../Icons"
+
+export type OpenWithButtonProps = {
+  /** 按钮文案，默认 "打开" */
+  label?: string
+  /** 按钮左侧图标名 */
+  iconName?: IconName
+  /** 简单打开回调（无菜单时直接触发） */
+  onOpen?: () => void
+  /** 加载"打开方式"菜单选项 */
+  onRequestOptions?: () => Promise<FileReferenceMenuOption[]> | FileReferenceMenuOption[]
+  /** 用户选择了某个菜单项 */
+  onSelect?: (option: FileReferenceMenuOption) => void
+  className?: string
+}
+
+/**
+ * 工具条上的"打开方式"按钮。
+ *
+ * @deprecated 蓝图已裁撤本件（工程组件 → Menu 配方）。规范继任者是
+ * `OpenWithMenu`（domain/chat/Attachment）：弹层的立面、翻转、外点关闭、键盘导航
+ * 全部由 `Menu` 原语承担，本文件只是转发 props 的薄兼容层。新代码直接用 `OpenWithMenu`。
+ */
+export function OpenWithButton({
+  label = "打开",
+  iconName,
+  onOpen,
+  onRequestOptions,
+  onSelect,
+  className = "",
+}: OpenWithButtonProps) {
+  return (
+    <OpenWithMenu
+      label={label}
+      iconName={iconName}
+      onOpen={onOpen}
+      onRequestOptions={onRequestOptions}
+      onSelect={onSelect}
+      className={className}
+    />
+  )
+}