@modesto_ma/dsh-channels 0.1.0 → 0.3.0

package/src/client/index.ts

@@ -9,7 +9,7 @@
  */
 
 import { PANEL_COPY } from '../settings/contract.ts'
-import { FeishuChannelsSection } from './panel.tsx'
+import { FeishuChannelsSection } from './panel/index.tsx'
 import { installStyles } from './styles.ts'
 
 // 平台 client runtime 的最小结构声明：只声明本 bundle 用到的两个能力。

package/src/client/panel/access-card.tsx

@@ -0,0 +1,294 @@
+/**
+ * 访问与授权卡：fail-closed 警告、群/用户白名单增删、待处理申请处理。
+ *
+ * `access.loaded === false`（飞书未连接、插件 storage 域未打开）时白名单与
+ * 申请列表是「未知」而不是「空」，因此只渲染连接提示并禁用全部写操作。
+ * 管理员与准入模式由同 tab 上方「准入与授权」字段表单编辑，这里不再重复。
+ *
+ * @module dsh-channels/client/panel/access-card
+ */
+
+import { useState } from 'react'
+import { PANEL_COPY } from '../../settings/contract.ts'
+import type {
+  AccessGroupWire,
+  AccessRequestWire,
+  AccessUserWire,
+  PanelWire,
+} from '../../settings/contract.ts'
+import { accessModeLabel, EmptyState } from './shared.tsx'
+import type { BusyAction } from './shared.tsx'
+
+/** Local `YYYY-MM-DD HH:mm` rendering for authorization timestamps. */
+function formatAccessDate(ms: number): string {
+  if (!Number.isFinite(ms) || ms <= 0) return PANEL_COPY.unknownValue
+  const date = new Date(ms)
+  const pad = (value: number): string => String(value).padStart(2, '0')
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
+}
+
+/** Which authorization entry produced one grant. */
+function accessSourceLabel(source: AccessGroupWire['source']): string {
+  switch (source) {
+    case 'command': return PANEL_COPY.accessSourceCommand
+    case 'card': return PANEL_COPY.accessSourceCard
+    default: return PANEL_COPY.accessSourcePanel
+  }
+}
+
+export interface AccessCardProps {
+  panel: PanelWire
+  busy: BusyAction | null
+  locked: boolean
+  notice: string | null
+  error: string | null
+  onAddGroup: (chatId: string, name: string) => Promise<boolean>
+  onRemoveGroup: (chatId: string) => void
+  onAddUser: (openId: string, name: string) => Promise<boolean>
+  onRemoveUser: (openId: string) => void
+  onResolveRequest: (token: string, decision: 'allow' | 'deny') => void
+}
+
+export function AccessCard(props: AccessCardProps): JSX.Element {
+  const { panel, busy, locked, notice, error, onAddGroup, onRemoveGroup, onAddUser, onRemoveUser, onResolveRequest } = props
+  const { access } = panel
+  const [groupChatId, setGroupChatId] = useState('')
+  const [groupName, setGroupName] = useState('')
+  const [userOpenId, setUserOpenId] = useState('')
+  const [userName, setUserName] = useState('')
+  const groups: readonly AccessGroupWire[] = access.groups
+  const users: readonly AccessUserWire[] = access.users
+  const requests: readonly AccessRequestWire[] = access.requests
+  const working = busy === 'access'
+  const disabled = busy !== null || locked || !access.loaded
+
+  const submitGroup = async (): Promise<void> => {
+    if (groupChatId.trim() === '') return
+    if (await onAddGroup(groupChatId, groupName)) {
+      setGroupChatId('')
+      setGroupName('')
+    }
+  }
+
+  const submitUser = async (): Promise<void> => {
+    if (userOpenId.trim() === '') return
+    if (await onAddUser(userOpenId, userName)) {
+      setUserOpenId('')
+      setUserName('')
+    }
+  }
+
+  return (
+    <section className="dsh-channels-cfg__card">
+      <div className="dsh-channels-cfg__cardHead">
+        <span className="dsh-channels-cfg__cardTitle">{PANEL_COPY.accessCard}</span>
+        <span className="dsh-channels-cfg__cardMeta">{accessModeLabel(panel, access.mode)}</span>
+      </div>
+      <span className="dsh-channels-cfg__help">{PANEL_COPY.accessCardHelp}</span>
+
+      {access.mode === 'open'
+        ? <div className="dsh-channels-cfg__banner">{PANEL_COPY.accessModeOpenWarning}</div>
+        : null}
+      {access.loaded && access.mode === 'guarded' && !access.admin.configured
+        ? (
+            <div className="dsh-channels-cfg__notice dsh-channels-cfg__notice--error">
+              <strong>{PANEL_COPY.accessAdminMissingWarning}</strong>
+            </div>
+          )
+        : null}
+
+      {!access.loaded
+        ? <EmptyState text={PANEL_COPY.accessNotLoaded} />
+        : (
+            <>
+              <div className="dsh-channels-cfg__accessSection">
+                <div className="dsh-channels-cfg__labelRow">
+                  <span className="dsh-channels-cfg__label">{PANEL_COPY.accessGroupsTitle}</span>
+                  <span className="dsh-channels-cfg__cardMeta">{groups.length} 个</span>
+                </div>
+                {groups.length === 0
+                  ? <span className="dsh-channels-cfg__help">{PANEL_COPY.accessGroupsEmpty}</span>
+                  : (
+                      <ul className="dsh-channels-cfg__accessList">
+                        {groups.map(group => (
+                          <li className="dsh-channels-cfg__accessRow" key={group.chatId}>
+                            <span className="dsh-channels-cfg__accessMain">
+                              <span>{group.name ?? group.chatId}</span>
+                              <span className="dsh-channels-cfg__accessMeta">
+                                <span className="dsh-channels-cfg__mono">{group.chatId}</span>
+                                {` · ${accessSourceLabel(group.source)} · ${formatAccessDate(group.addedAt)}`}
+                              </span>
+                            </span>
+                            <button
+                              type="button"
+                              className="dsh-channels-cfg__btn"
+                              disabled={disabled}
+                              onClick={() => onRemoveGroup(group.chatId)}
+                            >
+                              {working ? PANEL_COPY.accessWorking : PANEL_COPY.accessRemove}
+                            </button>
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                <div className="dsh-channels-cfg__accessAdd">
+                  <input
+                    type="text"
+                    className="dsh-channels-cfg__input dsh-channels-cfg__accessInput"
+                    value={groupChatId}
+                    placeholder={PANEL_COPY.accessGroupChatIdPlaceholder}
+                    aria-label={PANEL_COPY.accessGroupChatIdPlaceholder}
+                    disabled={disabled}
+                    onChange={event => setGroupChatId(event.target.value)}
+                  />
+                  <input
+                    type="text"
+                    className="dsh-channels-cfg__input dsh-channels-cfg__accessInput"
+                    value={groupName}
+                    placeholder={PANEL_COPY.accessGroupNamePlaceholder}
+                    aria-label={PANEL_COPY.accessGroupNamePlaceholder}
+                    disabled={disabled}
+                    onChange={event => setGroupName(event.target.value)}
+                  />
+                  <button
+                    type="button"
+                    className="dsh-channels-cfg__btn dsh-channels-cfg__btn--primary"
+                    disabled={disabled || groupChatId.trim() === ''}
+                    onClick={() => { void submitGroup() }}
+                  >
+                    {working ? PANEL_COPY.accessWorking : PANEL_COPY.accessAddGroup}
+                  </button>
+                </div>
+              </div>
+
+              <div className="dsh-channels-cfg__accessSection">
+                <div className="dsh-channels-cfg__labelRow">
+                  <span className="dsh-channels-cfg__label">{PANEL_COPY.accessUsersTitle}</span>
+                  <span className="dsh-channels-cfg__cardMeta">{users.length} 个</span>
+                </div>
+                {users.length === 0
+                  ? <span className="dsh-channels-cfg__help">{PANEL_COPY.accessUsersEmpty}</span>
+                  : (
+                      <ul className="dsh-channels-cfg__accessList">
+                        {users.map(user => (
+                          <li className="dsh-channels-cfg__accessRow" key={user.openId}>
+                            <span className="dsh-channels-cfg__accessMain">
+                              <span>{user.name ?? user.openId}</span>
+                              <span className="dsh-channels-cfg__accessMeta">
+                                <span className="dsh-channels-cfg__mono">{user.openId}</span>
+                                {` · ${accessSourceLabel(user.source)} · ${formatAccessDate(user.addedAt)}`}
+                              </span>
+                            </span>
+                            <button
+                              type="button"
+                              className="dsh-channels-cfg__btn"
+                              disabled={disabled}
+                              onClick={() => onRemoveUser(user.openId)}
+                            >
+                              {working ? PANEL_COPY.accessWorking : PANEL_COPY.accessRemove}
+                            </button>
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                <div className="dsh-channels-cfg__accessAdd">
+                  <input
+                    type="text"
+                    className="dsh-channels-cfg__input dsh-channels-cfg__accessInput"
+                    value={userOpenId}
+                    placeholder={PANEL_COPY.accessUserOpenIdPlaceholder}
+                    aria-label={PANEL_COPY.accessUserOpenIdPlaceholder}
+                    disabled={disabled}
+                    onChange={event => setUserOpenId(event.target.value)}
+                  />
+                  <input
+                    type="text"
+                    className="dsh-channels-cfg__input dsh-channels-cfg__accessInput"
+                    value={userName}
+                    placeholder={PANEL_COPY.accessUserNamePlaceholder}
+                    aria-label={PANEL_COPY.accessUserNamePlaceholder}
+                    disabled={disabled}
+                    onChange={event => setUserName(event.target.value)}
+                  />
+                  <button
+                    type="button"
+                    className="dsh-channels-cfg__btn dsh-channels-cfg__btn--primary"
+                    disabled={disabled || userOpenId.trim() === ''}
+                    onClick={() => { void submitUser() }}
+                  >
+                    {working ? PANEL_COPY.accessWorking : PANEL_COPY.accessAddUser}
+                  </button>
+                </div>
+              </div>
+
+              <div className="dsh-channels-cfg__accessSection">
+                <div className="dsh-channels-cfg__labelRow">
+                  <span className="dsh-channels-cfg__label">{PANEL_COPY.accessRequestsTitle}</span>
+                  <span className="dsh-channels-cfg__cardMeta">{requests.length} 条</span>
+                </div>
+                {requests.length === 0
+                  ? <span className="dsh-channels-cfg__help">{PANEL_COPY.accessRequestsEmpty}</span>
+                  : (
+                      <ul className="dsh-channels-cfg__accessList">
+                        {requests.map(request => (
+                          <li className="dsh-channels-cfg__accessRow" key={request.token}>
+                            <span className="dsh-channels-cfg__accessMain">
+                              <span>
+                                {request.kind === 'group' ? PANEL_COPY.accessRequestGroup : PANEL_COPY.accessRequestUser}
+                                {'：'}
+                                {request.name ?? request.targetId}
+                              </span>
+                              <span className="dsh-channels-cfg__accessMeta">
+                                <span className="dsh-channels-cfg__mono">{request.targetId}</span>
+                                {` · ${formatAccessDate(request.createdAt)} · ${PANEL_COPY.accessRequestExpires} ${formatAccessDate(request.expiresAt)}`}
+                                {request.kind === 'user' && request.requester !== undefined
+                                  ? ` · ${PANEL_COPY.accessRequestRequester} ${request.requester}`
+                                  : ''}
+                                {request.kind === 'user' && request.groupName !== undefined
+                                  ? ` · ${request.groupName}`
+                                  : request.kind === 'user' && request.chatId !== undefined
+                                    ? ` · ${request.chatId}`
+                                    : ''}
+                              </span>
+                            </span>
+                            <span className="dsh-channels-cfg__accessActions">
+                              <button
+                                type="button"
+                                className="dsh-channels-cfg__btn dsh-channels-cfg__btn--primary"
+                                disabled={disabled}
+                                onClick={() => onResolveRequest(request.token, 'allow')}
+                              >
+                                {working ? PANEL_COPY.accessWorking : PANEL_COPY.accessAllow}
+                              </button>
+                              <button
+                                type="button"
+                                className="dsh-channels-cfg__btn"
+                                disabled={disabled}
+                                onClick={() => onResolveRequest(request.token, 'deny')}
+                              >
+                                {working ? PANEL_COPY.accessWorking : PANEL_COPY.accessDeny}
+                              </button>
+                            </span>
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+              </div>
+            </>
+          )}
+
+      {notice === null
+        ? null
+        : (
+            <div className="dsh-channels-cfg__notice dsh-channels-cfg__notice--ok" role="status" aria-live="polite">
+              <span>{notice}</span>
+            </div>
+          )}
+      {error === null
+        ? null
+        : <span className="dsh-channels-cfg__fieldError" role="alert">{error}</span>}
+      <span className="dsh-channels-cfg__help">{PANEL_COPY.accessHints}</span>
+      <span className="dsh-channels-cfg__help">{PANEL_COPY.accessChatIdHint}</span>
+    </section>
+  )
+}

package/src/client/panel/access-tab.tsx

@@ -0,0 +1,46 @@
+/**
+ * 「访问授权」tab：准入与授权字段表单（管理员 open_id / 准入模式 /
+ * 申请有效期）+ 白名单与待处理申请卡。表单保存走全局 draft，白名单
+ * 增删是独立即时 mutation。
+ *
+ * @module dsh-channels/client/panel/access-tab
+ */
+
+import { PANEL_COPY, TAB_FIELD_GROUPS } from '../../settings/contract.ts'
+import { AccessCard } from './access-card.tsx'
+import { FieldsCard, SaveBar, TabHelp } from './shared.tsx'
+import type { FormView } from './shared.tsx'
+
+export interface AccessTabProps {
+  form: FormView
+  accessNotice: string | null
+  accessError: string | null
+  onAddGroup: (chatId: string, name: string) => Promise<boolean>
+  onRemoveGroup: (chatId: string) => void
+  onAddUser: (openId: string, name: string) => Promise<boolean>
+  onRemoveUser: (openId: string) => void
+  onResolveRequest: (token: string, decision: 'allow' | 'deny') => void
+}
+
+export function AccessTab(props: AccessTabProps): JSX.Element {
+  const { form, accessNotice, accessError, onAddGroup, onRemoveGroup, onAddUser, onRemoveUser, onResolveRequest } = props
+  return (
+    <div className="dsh-channels-cfg__tabBody">
+      <TabHelp text={PANEL_COPY.accessTabHelp} />
+      <FieldsCard form={form} groups={TAB_FIELD_GROUPS.access} />
+      <SaveBar form={form} tab="access" />
+      <AccessCard
+        panel={form.panel}
+        busy={form.busy}
+        locked={form.locked}
+        notice={accessNotice}
+        error={accessError}
+        onAddGroup={onAddGroup}
+        onRemoveGroup={onRemoveGroup}
+        onAddUser={onAddUser}
+        onRemoveUser={onRemoveUser}
+        onResolveRequest={onResolveRequest}
+      />
+    </div>
+  )
+}

package/src/client/panel/advanced-tab.tsx

@@ -0,0 +1,80 @@
+/**
+ * 「高级」tab：流式刷新等低层字段 + 只读部署信息（overlayPath / version /
+ * 部署级参数）+ 「清除 Web 覆盖」。清除覆盖是整体动作，不走 draft。
+ *
+ * @module dsh-channels/client/panel/advanced-tab
+ */
+
+import { PANEL_COPY, TAB_FIELD_GROUPS } from '../../settings/contract.ts'
+import type { PanelWire } from '../../settings/contract.ts'
+import { FieldsCard, SaveBar, TabHelp } from './shared.tsx'
+import type { BusyAction, FormView } from './shared.tsx'
+
+export function AdvancedTab(props: { form: FormView; onClear: () => void }): JSX.Element {
+  const { form, onClear } = props
+  return (
+    <div className="dsh-channels-cfg__tabBody">
+      <TabHelp text={PANEL_COPY.advancedTabHelp} />
+      <FieldsCard form={form} groups={TAB_FIELD_GROUPS.advanced} />
+      <SaveBar form={form} tab="advanced" />
+      <AdvancedCard panel={form.panel} busy={form.busy} locked={form.locked} onClear={onClear} />
+    </div>
+  )
+}
+
+/** Read-only deployment facts; the only write action here drops the overlay file. */
+function AdvancedCard(props: {
+  panel: PanelWire
+  busy: BusyAction | null
+  locked: boolean
+  onClear: () => void
+}): JSX.Element {
+  const { panel, busy, locked, onClear } = props
+  const { readOnly } = panel.config
+  const overridden = panel.config.overriddenKeys.length
+  return (
+    <section className="dsh-channels-cfg__card">
+      <div className="dsh-channels-cfg__cardHead">
+        <span className="dsh-channels-cfg__cardTitle">{PANEL_COPY.advancedCard}</span>
+        <span className="dsh-channels-cfg__cardMeta">
+          {overridden === 0 ? PANEL_COPY.inherited : `${PANEL_COPY.overridden} ${overridden} 项`}
+        </span>
+      </div>
+      <span className="dsh-channels-cfg__help">{PANEL_COPY.advancedHelp}</span>
+      <div className="dsh-channels-cfg__labelRow">
+        <span className="dsh-channels-cfg__cardTitle">{PANEL_COPY.readOnlyCard}</span>
+      </div>
+      <div className="dsh-channels-cfg__readOnly">
+        {readOnly.map(field => (
+          <div className="dsh-channels-cfg__kv" key={field.key}>
+            <span className="dsh-channels-cfg__kvKey">{field.label}</span>
+            <span className="dsh-channels-cfg__kvValue">{field.value}</span>
+            {field.help === undefined ? null : <span className="dsh-channels-cfg__help">{field.help}</span>}
+          </div>
+        ))}
+        <div className="dsh-channels-cfg__kv">
+          <span className="dsh-channels-cfg__kvKey">{PANEL_COPY.overlayPath}</span>
+          <span className="dsh-channels-cfg__kvValue dsh-channels-cfg__mono">{panel.status.overlayPath}</span>
+          <span className="dsh-channels-cfg__help">{PANEL_COPY.overlayPathHelp}</span>
+        </div>
+        <div className="dsh-channels-cfg__kv">
+          <span className="dsh-channels-cfg__kvKey">{PANEL_COPY.version}</span>
+          <span className="dsh-channels-cfg__kvValue dsh-channels-cfg__mono">{panel.status.version}</span>
+        </div>
+      </div>
+      <div className="dsh-channels-cfg__actions">
+        <button
+          type="button"
+          className="dsh-channels-cfg__btn"
+          onClick={onClear}
+          disabled={overridden === 0 || busy !== null || locked}
+        >
+          {busy === 'clear' ? PANEL_COPY.clearing : PANEL_COPY.clear}
+        </button>
+        <span className="dsh-channels-cfg__help">
+          {overridden === 0 ? PANEL_COPY.noOverrides : `${PANEL_COPY.overridden} ${overridden} 项`}
+        </span>
+      </div>
+    </section>
+  )
+}

package/src/client/panel/cleanup-card.tsx

@@ -0,0 +1,106 @@
+/**
+ * 目录清理卡：展示清理预览（保留期 / 自动清理 / 候选数量与空间），
+ * 执行前二次确认，结果与部分失败逐条展示。`cleanup.error` 非空时
+ * （例如未连接、无法扫描工作区）按钮天然禁用并显示原因。
+ *
+ * @module dsh-channels/client/panel/cleanup-card
+ */
+
+import { PANEL_COPY } from '../../settings/contract.ts'
+import type { CleanupPreviewWire, CleanupRunWire, PanelWire } from '../../settings/contract.ts'
+import { formatBytes, retentionLabel } from './shared.tsx'
+import type { BusyAction } from './shared.tsx'
+
+export function CleanupCard(props: {
+  panel: PanelWire
+  cleanup: CleanupPreviewWire
+  busy: BusyAction | null
+  locked: boolean
+  result: CleanupRunWire | null
+  error: string | null
+  onRun: () => void
+}): JSX.Element {
+  const { panel, cleanup, busy, locked, result, error, onRun } = props
+  const autoText = cleanup.retention === 'off'
+    ? PANEL_COPY.cleanupAutoInactive
+    : cleanup.auto ? PANEL_COPY.cleanupAutoOn : PANEL_COPY.cleanupAutoOff
+  const blocked = cleanup.error !== undefined
+    ? `${PANEL_COPY.cleanupPreviewFailed}：${cleanup.error}`
+    : cleanup.retention === 'off'
+      ? PANEL_COPY.cleanupDisabledOff
+      : cleanup.candidates === 0
+        ? PANEL_COPY.cleanupDisabledEmpty
+        : null
+  const facts = [
+    { label: PANEL_COPY.cleanupRetention, value: retentionLabel(panel, cleanup) },
+    { label: PANEL_COPY.cleanupAutoLabel, value: autoText },
+    { label: PANEL_COPY.cleanupCandidates, value: `${cleanup.candidates} 个` },
+    { label: PANEL_COPY.cleanupWorkspaces, value: `${cleanup.workspaces} 个` },
+    { label: PANEL_COPY.cleanupCandidateBytes, value: formatBytes(cleanup.candidateBytes) },
+  ]
+  const running = busy === 'cleanup'
+  const failed = result !== null && (!result.ok || error !== null)
+  return (
+    <section className="dsh-channels-cfg__card">
+      <div className="dsh-channels-cfg__cardHead">
+        <span className="dsh-channels-cfg__cardTitle">{PANEL_COPY.cleanupCard}</span>
+        <span className="dsh-channels-cfg__cardMeta">{retentionLabel(panel, cleanup)}</span>
+      </div>
+      <span className="dsh-channels-cfg__help">{PANEL_COPY.cleanupCardHelp}</span>
+      <div className="dsh-channels-cfg__facts">
+        {facts.map(fact => (
+          <div className="dsh-channels-cfg__fact" key={fact.label}>
+            <span className="dsh-channels-cfg__factLabel">{fact.label}</span>
+            <span className="dsh-channels-cfg__factValue">{fact.value}</span>
+          </div>
+        ))}
+      </div>
+      {blocked === null ? null : <span className="dsh-channels-cfg__help">{blocked}</span>}
+      {result === null
+        ? null
+        : (
+            <div className={`dsh-channels-cfg__notice dsh-channels-cfg__notice--${failed ? 'error' : 'ok'}`}>
+              {result.ok
+                ? (
+                    <span>
+                      {PANEL_COPY.cleanupDone}：{PANEL_COPY.cleanupDeleted} {result.deletedWorkspaces} 个，
+                      {PANEL_COPY.cleanupDeletedDirs} {result.deletedSessionDirs} 个，
+                      {PANEL_COPY.cleanupRetired} {result.retiredRoutes} 条，
+                      {PANEL_COPY.cleanupFreed} {formatBytes(result.freedBytes)}。
+                    </span>
+                  )
+                : (
+                    <span>
+                      {PANEL_COPY.cleanupFailed}
+                      {result.error === undefined ? '' : `：${result.error}`}
+                    </span>
+                  )}
+              {result.failures.length === 0
+                ? null
+                : (
+                    <>
+                      <span>{PANEL_COPY.cleanupFailures}</span>
+                      <ul className="dsh-channels-cfg__issues">
+                        {result.failures.map((failure, index) => (
+                          <li key={`${index}-${failure}`} className="dsh-channels-cfg__mono">{failure}</li>
+                        ))}
+                      </ul>
+                    </>
+                  )}
+            </div>
+          )}
+      {error === null ? null : <span className="dsh-channels-cfg__fieldError">{error}</span>}
+      <div className="dsh-channels-cfg__actions">
+        <button
+          type="button"
+          className="dsh-channels-cfg__btn dsh-channels-cfg__btn--danger"
+          onClick={onRun}
+          disabled={running || busy !== null || locked || blocked !== null}
+        >
+          {running ? PANEL_COPY.cleanupRunning : PANEL_COPY.cleanupNow}
+        </button>
+        <span className="dsh-channels-cfg__help">{PANEL_COPY.cleanupConfirmHint}</span>
+      </div>
+    </section>
+  )
+}