@orbit-work/ui 0.1.2-preview.0 → 0.1.2

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

@@ -1,323 +0,0 @@
-"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

@@ -1,92 +0,0 @@
-"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

@@ -1,15 +0,0 @@
-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

@@ -1,246 +0,0 @@
-"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>
-  )
-}