@orbit-work/ui 0.1.0

package/src/components/domain/desktop/ResourceManagement/SharesList.tsx

@@ -0,0 +1,323 @@
+"use client"
+
+import { type ReactNode, useLayoutEffect, useRef, useState } from "react"
+import { BackButton } from "../../../composite/BackButton"
+import { Dialog } from "../../../composite/Dialog"
+import { Edit, Pause, Play, Trash } from "../../../composite/Icons"
+import { PageHead } from "../../../composite/PageHead"
+import { RowOverflowMenu } from "../../../composite/RowOverflowMenu"
+import { SearchInput } from "../../../composite/SearchInput"
+import { Skeleton } from "../../../composite/Skeleton"
+import { StatusTag, type StatusTagTone } from "../../../composite/StatusTag"
+import { Button, Field, Select } from "../../../primitives"
+import { EmptyState } from "../../../primitives/EmptyState"
+
+export type ResourceTab = "sites" | "conversations" | "shared-sites"
+export type ResourceRowAction = "rename" | "toggle" | "delete"
+export type ResourceRow = {
+  id: string
+  name: string
+  address: string
+  status: string
+  statusTone?: StatusTagTone
+  access: string
+  accessDetail?: string
+  detail: string
+  available: boolean
+  disabled?: boolean
+}
+export type ResourceListFailure = { title: string; message: string; details?: string }
+export type ResourceListFilters = {
+  query: string
+  status: string
+  onQuery: (value: string) => void
+  onStatus: (value: string) => void
+}
+
+export function ResourceWorkbenchView({
+  tab,
+  onTab,
+  children,
+  navigationKey = tab,
+  filters,
+  scrollTop,
+  onScrollTopChange,
+}: {
+  tab: ResourceTab
+  onTab: (tab: ResourceTab) => void
+  children: ReactNode
+  navigationKey?: string
+  filters?: ResourceListFilters
+  scrollTop?: number
+  onScrollTopChange?: (top: number) => void
+}) {
+  const container = useRef<HTMLDivElement>(null)
+  const positions = useRef(new Map<string, number>())
+  const position = useRef(scrollTop)
+  const save = useRef(onScrollTopChange)
+  position.current = scrollTop
+  save.current = onScrollTopChange
+  useLayoutEffect(() => {
+    const element = container.current
+    if (!element) return
+    const onSave = save.current
+    element.scrollTop = position.current ?? positions.current.get(navigationKey) ?? 0
+    return () => {
+      positions.current.set(navigationKey, element.scrollTop)
+      onSave?.(element.scrollTop)
+    }
+  }, [navigationKey])
+  return (
+    <section className="shares-workbench">
+      {filters && (
+        <PageHead
+          eyebrow={<BackButton onClick={() => onTab("sites")}>返回工作台</BackButton>}
+          title="我的分享"
+          description="管理你分享的内容与访问权限。"
+          search={<SearchInput value={filters.query} onChange={filters.onQuery} placeholder="搜索分享名称" />}
+          tabs={[
+            { key: "shared-sites", label: "站点" },
+            { key: "conversations", label: "会话" },
+          ]}
+          activeTabKey={tab}
+          onTabChange={(key) => onTab(key as ResourceTab)}
+          tabsExtra={
+            <div className="shares-status-filter" role="group" aria-label="分享状态">
+              <Select
+                size="sm"
+                value={filters.status}
+                onChange={filters.onStatus}
+                options={[
+                  { value: "", label: "全部状态" },
+                  { value: "active", label: tab === "conversations" ? "可访问" : "已上线" },
+                  { value: "disabled", label: "已停用" },
+                  ...(tab === "shared-sites" ? [{ value: "draft", label: "草稿" }] : []),
+                ]}
+              />
+            </div>
+          }
+        />
+      )}
+      <div ref={container} className="shares-scroll">
+        {children}
+      </div>
+    </section>
+  )
+}
+
+function ListFailure({
+  error,
+  onRetry,
+  loading,
+}: { error: ResourceListFailure; onRetry: () => void; loading: boolean }) {
+  return (
+    <div className="shares-error" role="alert">
+      <div>
+        <strong>{error.title}</strong>
+        <p>{error.message}</p>
+      </div>
+      <Button variant="secondary" disabled={loading} onClick={onRetry}>
+        重试
+      </Button>
+      {error.details && (
+        <details>
+          <summary>错误详情</summary>
+          <p>{error.details}</p>
+        </details>
+      )}
+    </div>
+  )
+}
+
+export function ResourceListView(props: {
+  title: string
+  rows: ResourceRow[]
+  loading: boolean
+  error?: ResourceListFailure
+  more: boolean
+  query: string
+  status: string
+  onClear: () => void
+  onBack: () => void
+  onMore: () => void
+  onRetry: () => void
+  onOpen: (id: string) => void
+  onDetail: (id: string) => void
+  onManage: (id: string) => void
+  manageLabel?: string
+  onAction?: (id: string, action: ResourceRowAction) => void
+}) {
+  const filtered = Boolean(props.query || props.status)
+  return (
+    <section className="shares-list" aria-label={props.title} aria-busy={props.loading}>
+      {props.error && <ListFailure error={props.error} onRetry={props.onRetry} loading={props.loading} />}
+      {props.loading && !props.rows.length && !props.error && (
+        <div aria-label="正在加载分享" className="shares-skeletons">
+          {[0, 1, 2, 3, 4].map((key) => (
+            <Skeleton key={key} className="h-16 w-full" />
+          ))}
+        </div>
+      )}
+      {!props.loading && !props.error && !props.rows.length && (
+        <EmptyState
+          size="page"
+          title={filtered ? "没有匹配的分享" : `还没有${props.title}`}
+          message={
+            filtered
+              ? "换个名称搜索，或清除筛选后查看。"
+              : props.title === "会话分享"
+                ? "在会话中选择内容，即可创建分享。"
+                : "在站点详情中设置访问范围或添加指定成员。"
+          }
+          actionLabel={filtered ? "清除筛选" : "返回工作台"}
+          actionVariant="secondary"
+          onAction={filtered ? props.onClear : props.onBack}
+        />
+      )}
+      {props.rows.length > 0 && (
+        <table className="shares-table">
+          <colgroup>
+            <col className="shares-name-col" />
+            <col className="shares-access-col" />
+            <col className="shares-state-col" />
+            <col className="shares-actions-col" />
+          </colgroup>
+          <thead>
+            <tr>
+              <th scope="col">内容</th>
+              <th scope="col">访问范围</th>
+              <th scope="col">状态</th>
+              <th scope="col" className="shares-actions-heading">
+                操作
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {props.rows.map((row) => (
+              <tr key={row.id}>
+                <th scope="row" className="shares-name-cell">
+                  <Button
+                    variant="unstyled"
+                    className="shares-name"
+                    title={row.name}
+                    onClick={() => props.onDetail(row.id)}
+                  >
+                    {row.name}
+                  </Button>
+                  <span className="shares-meta">{row.detail}</span>
+                </th>
+                <td className="shares-access-cell">
+                  <span>{row.access}</span>
+                  {row.accessDetail && <span className="shares-meta">{row.accessDetail}</span>}
+                </td>
+                <td className="shares-state-cell">
+                  <StatusTag tone={row.statusTone ?? (row.available ? "ok" : "mute")}>{row.status}</StatusTag>
+                </td>
+                <td className="shares-actions-cell">
+                  <div className="shares-row-actions">
+                    {row.available && (
+                      <Button size="sm" variant="ghost" onClick={() => props.onOpen(row.id)}>
+                        查看
+                      </Button>
+                    )}
+                    <Button size="sm" variant="secondary" onClick={() => props.onManage(row.id)}>
+                      {props.manageLabel ?? "分享设置"}
+                    </Button>
+                    {props.onAction && (
+                      <RowOverflowMenu
+                        ariaLabel={`${row.name}的更多操作`}
+                        items={[
+                          { key: "rename", label: "重命名", icon: <Edit /> },
+                          {
+                            key: "toggle",
+                            label: row.disabled ? "恢复访问" : "停用",
+                            icon: row.disabled ? <Play /> : <Pause />,
+                          },
+                          { key: "delete", label: "删除", danger: true, icon: <Trash /> },
+                        ]}
+                        onSelect={(key) => props.onAction?.(row.id, key as ResourceRowAction)}
+                      />
+                    )}
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+      {props.more && (
+        <div className="shares-pagination">
+          <Button variant="secondary" disabled={props.loading} onClick={props.onMore}>
+            {props.loading ? "正在加载…" : "加载更多"}
+          </Button>
+        </div>
+      )}
+    </section>
+  )
+}
+
+export function ResourceRowActionDialog(props: {
+  name: string
+  action: ResourceRowAction
+  disabled: boolean
+  busy: boolean
+  error?: string
+  onClose: () => void
+  onRetry: () => void
+  onSubmit: (name: string) => Promise<void>
+}) {
+  const [name, setName] = useState(props.name)
+  const title =
+    props.action === "rename"
+      ? "重命名"
+      : props.action === "delete"
+        ? "删除此内容？"
+        : props.disabled
+          ? "恢复访问？"
+          : "停用此内容？"
+  return (
+    <Dialog
+      open
+      title={title}
+      variant={props.action === "delete" ? "danger" : "default"}
+      onClose={() => {
+        if (!props.busy) props.onClose()
+      }}
+      actions={
+        <>
+          <Button variant="ghost" disabled={props.busy} onClick={props.onClose}>
+            取消
+          </Button>
+          <Button
+            variant={props.action === "delete" ? "danger" : "primary"}
+            disabled={props.busy || (props.action === "rename" && (!name.trim() || name.trim() === props.name))}
+            onClick={() => void props.onSubmit(name.trim()).catch(() => {})}
+          >
+            {props.action === "rename" ? "保存" : "确认"}
+          </Button>
+        </>
+      }
+    >
+      <div className="resource-section">
+        {props.action === "rename" ? (
+          <Field value={name} onChange={setName} aria-label="分享名称" />
+        ) : (
+          <p>
+            {props.action === "delete"
+              ? `“${props.name}”将无法访问，此操作不可恢复。`
+              : props.disabled
+                ? `恢复“${props.name}”后，当前权限和有效链接将重新生效。`
+                : `停用“${props.name}”后，所有入口暂停访问，权限和链接设置会保留。`}
+          </p>
+        )}
+        {props.error && (
+          <ListFailure
+            error={{ title: "操作未完成", message: props.error }}
+            loading={props.busy}
+            onRetry={props.onRetry}
+          />
+        )}
+      </div>
+    </Dialog>
+  )
+}

package/src/components/domain/desktop/ResourceManagement/SnapshotViews.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import type { Ref } from "react"
+import { Dialog } from "../../../composite/Dialog"
+import { Markdown } from "../../../composite/Markdown"
+import { OrbitworkLogo } from "../../../composite/OrbitworkLogo"
+import { Button } from "../../../primitives"
+import { ResourceNotice } from "./index"
+
+export type SnapshotMessageView = {
+  id: string
+  role: "user" | "assistant"
+  blocks: ({ text: string } | { asset: { name: string; src?: string } })[]
+}
+
+export function SnapshotContentView({ messages, title }: { messages: SnapshotMessageView[]; title?: string }) {
+  return (
+    <div className="snapshot-content">
+      {title && <h2>{title}</h2>}
+      {messages.map((message) => (
+        <article key={message.id}>
+          <h3>{message.role === "user" ? "用户" : "助手"}</h3>
+          {message.blocks.map((block, index) =>
+            "text" in block ? (
+              <Markdown key={index} source={block.text} className="snapshot-markdown" />
+            ) : block.asset.src ? (
+              <figure key={index}>
+                <img src={block.asset.src} alt={block.asset.name} width={640} height={480} />
+                <figcaption>{block.asset.name}</figcaption>
+              </figure>
+            ) : (
+              <p key={index}>附件：{block.asset.name}</p>
+            ),
+          )}
+        </article>
+      ))}
+    </div>
+  )
+}
+
+export function SnapshotImageExportView(props: {
+  title: string
+  messages: SnapshotMessageView[]
+  cardRef: Ref<HTMLDivElement>
+  busy: boolean
+  ready: boolean
+  error?: string
+  notice?: string
+  qr?: string
+  includeQR: boolean
+  qrRequiresLogin?: boolean
+  onClose: () => void
+  onCopy: () => void
+  onDownload: () => void
+}) {
+  return (
+    <Dialog bare open ariaLabel="分享图片预览" onClose={props.onClose} className="share-image-modal">
+      <div className="share-image-preview">
+        <div className="share-image-preview__head">分享图片预览</div>
+        <ResourceNotice error>{props.error}</ResourceNotice>
+        <ResourceNotice>{props.notice}</ResourceNotice>
+        <div className="share-image-preview__body">
+          <div ref={props.cardRef} className="share-image-card">
+            <div className="share-image-card__content">
+              <SnapshotContentView title={props.title} messages={props.messages} />
+            </div>
+            <div className="share-image-card__footer">
+              <OrbitworkLogo size={20} />
+              {props.includeQR && props.qr ? (
+                <div className="share-image-card__qr">
+                  <img src={props.qr} alt="" width={48} height={48} />
+                  <span>{props.qrRequiresLogin ? "扫码查看 · 登录访问" : "扫码查看"}</span>
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </div>
+        <div className="share-image-preview__actions">
+          <Button variant="secondary" onClick={props.onClose} disabled={props.busy}>
+            取消
+          </Button>
+          <Button variant="secondary" onClick={props.onCopy} disabled={!props.ready || props.busy}>
+            复制图片
+          </Button>
+          <Button variant="primary" onClick={props.onDownload} disabled={!props.ready || props.busy}>
+            下载图片
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  )
+}

package/src/components/domain/desktop/ResourceManagement/SnapshotViewsSource.test.mjs

@@ -0,0 +1,15 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./SnapshotViews.tsx", import.meta.url), "utf8")
+const styles = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+test("image sharing has one contained scrolling preview and renders message markdown", () => {
+  assert.match(source, /className="share-image-modal"/)
+  assert.match(source, /className="share-image-preview__body"/)
+  assert.match(source, /<Markdown key=\{index\} source=\{block\.text\}/)
+  assert.match(styles, /\.share-image-preview \{[^}]*max-height: 82vh;/s)
+  assert.match(styles, /\.share-image-preview__body \{[^}]*overflow: auto;/s)
+  assert.doesNotMatch(source, /免登录|公开访问|分享链接/)
+})

package/src/components/domain/desktop/ResourceManagement/index.tsx

@@ -0,0 +1,246 @@
+"use client"
+
+import { type ReactNode, useState } from "react"
+import { Dialog } from "../../../composite/Dialog"
+import { Button, Field } from "../../../primitives"
+
+export * from "./SharesList"
+
+export function ResourceNotice({
+  children,
+  error = false,
+  onRetry,
+}: {
+  children?: ReactNode
+  error?: boolean
+  onRetry?: () => void
+}) {
+  return children ? (
+    <div className="resource-notice" role={error ? "alert" : "status"}>
+      {children}
+      {onRetry && (
+        <Button variant="secondary" onClick={onRetry}>
+          重试
+        </Button>
+      )}
+    </div>
+  ) : null
+}
+
+export function ResourceDetailView(props: {
+  name: string
+  status: string
+  access: string
+  tab: string
+  tabs: { value: string; label: string }[]
+  onTab: (value: string) => void
+  onBack: () => void
+  children: ReactNode
+  actions?: ReactNode
+  backLabel?: string
+}) {
+  return (
+    <section className="resource-section">
+      <div className="resource-toolbar">
+        <Button variant="ghost" onClick={props.onBack}>
+          {props.backLabel ?? "返回列表"}
+        </Button>
+        {props.actions}
+      </div>
+      <h2>{props.name}</h2>
+      <p>
+        {props.status} · {props.access}
+      </p>
+      <nav className="resource-actions" aria-label="资源详情">
+        {props.tabs.map((tab) => (
+          <Button
+            key={tab.value}
+            variant={props.tab === tab.value ? "secondary" : "ghost"}
+            onClick={() => props.onTab(tab.value)}
+            aria-current={props.tab === tab.value ? "page" : undefined}
+          >
+            {tab.label}
+          </Button>
+        ))}
+      </nav>
+      {props.children}
+    </section>
+  )
+}
+
+export function ResourceOverviewView(props: {
+  name: string
+  address: string
+  details: string[]
+  available: boolean
+  disabled: boolean
+  busy: boolean
+  onRename: (name: string) => Promise<void>
+  onOpen: () => void
+  onCopy: () => void
+  onSource?: () => void
+  onToggle: () => Promise<void>
+  onDelete: () => Promise<void>
+}) {
+  const [name, setName] = useState(props.name)
+  const [confirm, setConfirm] = useState<"toggle" | "delete" | null>(null)
+  return (
+    <div className="resource-section">
+      <p className="resource-address">{props.address}</p>
+      <div className="resource-actions">
+        <Button onClick={props.onOpen} disabled={!props.available}>
+          打开
+        </Button>
+        <Button onClick={props.onCopy} variant="secondary" disabled={!props.available}>
+          复制地址
+        </Button>
+        {props.onSource && (
+          <Button variant="ghost" onClick={props.onSource}>
+            继续制作
+          </Button>
+        )}
+      </div>
+      {props.details.map((detail) => (
+        <p key={detail}>{detail}</p>
+      ))}
+      <div className="resource-toolbar">
+        <Field value={name} onChange={setName} aria-label="显示名称" />
+        <Button
+          disabled={props.busy || !name.trim() || name === props.name}
+          onClick={() => void props.onRename(name).catch(() => {})}
+        >
+          保存名称
+        </Button>
+      </div>
+      <div className="resource-actions">
+        <Button disabled={props.busy} variant="secondary" onClick={() => setConfirm("toggle")}>
+          {props.disabled ? "恢复访问" : "停用"}
+        </Button>
+        <Button disabled={props.busy} variant="ghost" onClick={() => setConfirm("delete")}>
+          删除
+        </Button>
+      </div>
+      {confirm && (
+        <ResourceConfirmation
+          title={confirm === "delete" ? "删除此内容？" : props.disabled ? "恢复访问？" : "停用访问？"}
+          description={
+            confirm === "delete"
+              ? "内容将无法访问，此操作不可恢复。"
+              : props.disabled
+                ? "原有分享设置将重新生效。"
+                : "所有访问入口将暂停，分享设置会保留。"
+          }
+          busy={props.busy}
+          onCancel={() => setConfirm(null)}
+          onConfirm={async () => {
+            await (confirm === "delete" ? props.onDelete() : props.onToggle())
+            setConfirm(null)
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+export function ResourceConfirmation({
+  title,
+  description,
+  busy,
+  onConfirm,
+  onCancel,
+}: {
+  title: string
+  description: string
+  busy?: boolean
+  onConfirm: () => Promise<void>
+  onCancel: () => void
+}) {
+  const [error, setError] = useState("")
+  return (
+    <Dialog
+      open
+      title={title}
+      onClose={onCancel}
+      width={460}
+      actions={
+        <>
+          <Button autoFocus variant="secondary" disabled={busy} onClick={onCancel}>
+            取消
+          </Button>
+          <Button
+            disabled={busy}
+            onClick={() =>
+              void onConfirm().catch((value) => setError(value instanceof Error ? value.message : "操作失败"))
+            }
+          >
+            确认
+          </Button>
+        </>
+      }
+    >
+      <p>{description}</p>
+      <ResourceNotice error>{error}</ResourceNotice>
+    </Dialog>
+  )
+}
+
+export function ResourceReleasesView(props: {
+  releases: {
+    id: string
+    version: number
+    status: string
+    detail: string
+    time: string
+    failure?: string
+    rollback: boolean
+  }[]
+  more: boolean
+  busy: boolean
+  error?: string
+  onMore: () => void
+  onRetry: () => void
+  onRollback: (id: string) => Promise<void>
+}) {
+  const [target, setTarget] = useState<{ id: string; version: number } | null>(null)
+  return (
+    <section className="resource-section">
+      <ResourceNotice error>{props.error}</ResourceNotice>
+      {props.error && <Button onClick={props.onRetry}>重试</Button>}
+      {props.releases.map((release) => (
+        <article className="resource-row" key={release.id}>
+          <div>
+            <strong>
+              v{release.version} · {release.status}
+            </strong>
+            <span>
+              {release.detail} · {release.time}
+            </span>
+            {release.failure && <ResourceNotice error>{release.failure}</ResourceNotice>}
+          </div>
+          {release.rollback && (
+            <Button disabled={props.busy} variant="secondary" onClick={() => setTarget(release)}>
+              回滚至此内容
+            </Button>
+          )}
+        </article>
+      ))}
+      {props.more && (
+        <Button disabled={props.busy} onClick={props.onMore}>
+          加载更多发布记录
+        </Button>
+      )}
+      {target && (
+        <ResourceConfirmation
+          title={`回滚至 v${target.version} 的内容？`}
+          description="将把这个版本的内容发布为一个新版本，当前分享设置保持不变。"
+          busy={props.busy}
+          onCancel={() => setTarget(null)}
+          onConfirm={async () => {
+            await props.onRollback(target.id)
+            setTarget(null)
+          }}
+        />
+      )}
+    </section>
+  )
+}