@lark-base-open/base-database-cli 1.3.7 → 1.3.9

package/templates/database-starter/page/src/components/floating-button/index.tsx

@@ -1,21 +1,37 @@
-import { useCallback, useEffect, useState } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
 import editDefaultIcon from './assets/edit-default.svg'
 import editActiveIcon from './assets/edit-active.svg'
+import tooltipCaretIcon from './assets/tooltip-caret.svg'
+import toastInfoIcon from './assets/toast-info.svg'
+import toastCloseIcon from './assets/toast-close.svg'
 import { fetchProjectMeta, type ProjectMeta } from './utils/project-meta'
-import {
-  getDatabaseContext,
-  resolveDatabaseContext,
-  siteRuntime,
-} from '../../lib/database-runtime'
+import { getDatabaseContext } from '../../lib/database-runtime'
+import { requestEditOrOpenManagement } from './utils/request-edit'
 import { useUiLanguage, type UiLanguage } from '../../lib/ui-language'
 
 interface FloatingButtonI18n {
+  openFailed: string
   editSite: string
   hidePanel: string
+  hiddenConfirmation: string
+  dismissNotification: string
+}
+
+interface TooltipPosition {
+  left: number
+  top: number
+  arrowLeft: number
 }
 
-const BASE_DATABASE_OVERVIEW_URL = 'https://feishu.cn/base/site/detail/overview'
 const FLOATING_BUTTON_PAGE_GAP = 24
+const TOOLTIP_VIEWPORT_GAP = 8
+const HIDDEN_CONFIRMATION_MS = 3000
 const EMPTY_PROJECT_META: ProjectMeta = {
   baseBindings: [],
   description: '',
@@ -26,16 +42,26 @@ const EMPTY_PROJECT_META: ProjectMeta = {
 }
 const FLOATING_BUTTON_I18N: Record<UiLanguage, FloatingButtonI18n> = {
   en: {
+    openFailed: 'Unable to open the management page. Please try again.',
     editSite: 'Edit and manage your apps',
     hidePanel: 'Hide until next visit',
+    hiddenConfirmation: 'Edit button hidden until you reopen the app',
+    dismissNotification: 'Dismiss notification',
   },
   zh: {
+    openFailed: '无法打开管理页面，请重试',
     editSite: '编辑与管理应用',
     hidePanel: '隐藏面板',
+    hiddenConfirmation: '编辑按钮已隐藏，直至下次重新打开应用',
+    dismissNotification: '关闭提示',
   },
   ja: {
+    openFailed: '管理ページを開けませんでした。もう一度お試しください。',
     editSite: 'アプリを編集・管理',
     hidePanel: '次回のアクセスまで非表示',
+    hiddenConfirmation:
+      '編集ボタンを非表示にしました。アプリを再度開くと表示されます',
+    dismissNotification: '通知を閉じる',
   },
 }
 
@@ -44,15 +70,61 @@ const FLOATING_BUTTON_I18N: Record<UiLanguage, FloatingButtonI18n> = {
  */
 export function FloatingButton() {
   const [projectMeta, setProjectMeta] = useState<ProjectMeta | null>(null)
+  const [linkFailed, setLinkFailed] = useState(false)
   const [isHidden, setIsHidden] = useState(false)
+  const [showHiddenConfirmation, setShowHiddenConfirmation] = useState(false)
   const [activeTooltip, setActiveTooltip] = useState<'edit' | 'hide' | null>(
     null,
   )
+  const [tooltipPosition, setTooltipPosition] =
+    useState<TooltipPosition | null>(null)
+  const editButtonRef = useRef<HTMLButtonElement>(null)
+  const hideButtonRef = useRef<HTMLButtonElement>(null)
+  const tooltipRef = useRef<HTMLDivElement>(null)
   // Preview 不展示返回编辑态入口；按钮显隐不替代宿主点击时的鉴权。
   const shouldShowEditButton =
     projectMeta?.allowEdit === true && getDatabaseContext().env === 'prod'
   const i18n = FLOATING_BUTTON_I18N[useUiLanguage()]
 
+  useLayoutEffect(() => {
+    if (!activeTooltip) return
+
+    const updateTooltipPosition = () => {
+      const trigger =
+        activeTooltip === 'edit' ? editButtonRef.current : hideButtonRef.current
+      const tooltip = tooltipRef.current
+      if (!trigger || !tooltip) return
+
+      const triggerRect = trigger.getBoundingClientRect()
+      const tooltipWidth = tooltip.offsetWidth
+      const left = Math.max(
+        TOOLTIP_VIEWPORT_GAP,
+        Math.min(
+          triggerRect.left + triggerRect.width / 2 - tooltipWidth / 2,
+          window.innerWidth - tooltipWidth - TOOLTIP_VIEWPORT_GAP,
+        ),
+      )
+      setTooltipPosition({
+        left,
+        top: triggerRect.top - tooltip.offsetHeight - 14,
+        arrowLeft: triggerRect.left + triggerRect.width / 2 - left,
+      })
+    }
+
+    updateTooltipPosition()
+    window.addEventListener('resize', updateTooltipPosition)
+    return () => window.removeEventListener('resize', updateTooltipPosition)
+  }, [activeTooltip, i18n])
+
+  useEffect(() => {
+    if (!showHiddenConfirmation) return
+    const timeout = window.setTimeout(
+      () => setShowHiddenConfirmation(false),
+      HIDDEN_CONFIRMATION_MS,
+    )
+    return () => window.clearTimeout(timeout)
+  }, [showHiddenConfirmation])
+
   useEffect(() => {
     let isCurrentRequest = true
 
@@ -77,32 +149,76 @@ export function FloatingButton() {
   }, [])
 
   // 编辑按钮走 site.v1 契约：应用发 request-edit，宿主切编辑态后广播 mode-changed。
-  // 应用被独立访问（无宿主）时事件无人消费，回落为打开 Site 管理页。
+  // 切换失败时管理页也经 OpenLink；宿主不可用或安全检查失败时显示错误。
   const requestEdit = useCallback(() => {
-    void siteRuntime.requestEdit().catch(async () => {
-      const { token } = await resolveDatabaseContext()
-      const url = new URL(BASE_DATABASE_OVERVIEW_URL)
-      url.searchParams.set('token', token)
-      openExternalUrl(url.toString())
-    })
+    setLinkFailed(false)
+    void requestEditOrOpenManagement().catch(() => setLinkFailed(true))
   }, [])
 
-  if (!shouldShowEditButton || isHidden) {
+  if (!shouldShowEditButton) {
     return null
   }
 
+  if (isHidden) {
+    return showHiddenConfirmation ? (
+      <div
+        role="status"
+        className="fixed top-8 left-1/2 z-50 flex min-h-[54px] w-[352px] max-w-[calc(100vw-32px)] -translate-x-1/2 items-center gap-2 rounded-md bg-[#f0f4ff] px-5 py-4 text-sm leading-[22px] font-medium text-[#1f2329]"
+        style={{
+          // Figma 的内描边与三层阴影需合并，避免 ring 被行内 box-shadow 覆盖。
+          boxShadow:
+            'inset 0 0 0 1px #1456f0, 0 8px 24px 8px rgb(31 35 41 / 4%), 0 6px 12px rgb(31 35 41 / 4%), 0 4px 8px -8px rgb(31 35 41 / 6%)',
+        }}
+      >
+        <img src={toastInfoIcon} alt="" className="size-4 shrink-0" />
+        <span className="min-w-0 flex-1 pl-1 pr-2">
+          {i18n.hiddenConfirmation}
+        </span>
+        <button
+          type="button"
+          aria-label={i18n.dismissNotification}
+          className="flex size-4 shrink-0 cursor-pointer items-center justify-center"
+          onClick={() => setShowHiddenConfirmation(false)}
+        >
+          <img src={toastCloseIcon} alt="" className="size-4" />
+        </button>
+      </div>
+    ) : null
+  }
+
   return (
     <div
       className="group fixed bottom-10 z-40 flex items-center"
       style={{ right: FLOATING_BUTTON_PAGE_GAP }}
     >
+      {linkFailed ? (
+        <div
+          role="alert"
+          className="absolute bottom-full right-0 mb-2 w-64 rounded bg-white p-3 text-sm text-red-700 shadow"
+        >
+          {i18n.openFailed}
+        </div>
+      ) : null}
       {activeTooltip ? (
         <div
+          ref={tooltipRef}
           role="tooltip"
-          className="pointer-events-none absolute right-0 bottom-[calc(100%+14px)] z-10 whitespace-nowrap rounded-lg bg-[#1f2329] px-3 py-2 text-sm text-white shadow-lg"
+          className="pointer-events-none fixed z-50 w-max max-w-[calc(100vw-16px)] rounded-lg bg-[#1f2329] px-3 py-2 text-xs leading-5 whitespace-normal text-white"
+          style={{
+            boxShadow:
+              '0 8px 24px 8px rgb(31 35 41 / 4%), 0 6px 12px rgb(31 35 41 / 4%), 0 4px 8px -8px rgb(31 35 41 / 6%)',
+            ...(tooltipPosition
+              ? { left: tooltipPosition.left, top: tooltipPosition.top }
+              : { visibility: 'hidden' as const }),
+          }}
         >
           {activeTooltip === 'edit' ? i18n.editSite : i18n.hidePanel}
-          <span className="absolute -bottom-1 right-[22px] size-2 rotate-45 bg-[#1f2329]" />
+          <img
+            src={tooltipCaretIcon}
+            alt=""
+            className="pointer-events-none absolute top-full h-1.5 w-6 -translate-x-1/2"
+            style={{ left: tooltipPosition?.arrowLeft }}
+          />
         </div>
       ) : null}
       <div
@@ -110,6 +226,7 @@ export function FloatingButton() {
         data-floating-controls="true"
       >
         <button
+          ref={editButtonRef}
           type="button"
           aria-label={i18n.editSite}
           className="group/edit flex size-12 cursor-pointer items-center justify-center rounded-full bg-transparent outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
@@ -131,6 +248,7 @@ export function FloatingButton() {
           />
         </button>
         <button
+          ref={hideButtonRef}
           type="button"
           aria-label={i18n.hidePanel}
           className="absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full bg-[#c8c9cc] text-[#646a73] opacity-0 transition-opacity group-hover:opacity-100 hover:bg-[#b7b9bd] focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-[#1456f0]"
@@ -138,7 +256,11 @@ export function FloatingButton() {
           onMouseLeave={() => setActiveTooltip(null)}
           onFocus={() => setActiveTooltip('hide')}
           onBlur={() => setActiveTooltip(null)}
-          onClick={() => setIsHidden(true)}
+          onClick={() => {
+            setIsHidden(true)
+            setActiveTooltip(null)
+            setShowHiddenConfirmation(true)
+          }}
         >
           <span aria-hidden="true" className="text-[14px] leading-none">
             ×
@@ -149,11 +271,4 @@ export function FloatingButton() {
   )
 }
 
-/** 使用新标签页打开外部链接。
- * @param url 待打开的外部链接。
- */
-function openExternalUrl(url: string): void {
-  window.open(url, '_blank', 'noopener,noreferrer')
-}
-
 export default FloatingButton

package/templates/database-starter/page/src/components/floating-button/utils/request-edit.test.ts

@@ -0,0 +1,42 @@
+import { beforeEach, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  requestEdit: vi.fn(),
+  resolveDatabaseContext: vi.fn(),
+  openLink: vi.fn(),
+}))
+vi.mock('@lark-base-open/base-site-channel/runtime', () => ({
+  openLink: mocks.openLink,
+}))
+vi.mock('../../../lib/database-runtime', () => ({
+  siteRuntime: { requestEdit: mocks.requestEdit },
+  resolveDatabaseContext: mocks.resolveDatabaseContext,
+}))
+import { requestEditOrOpenManagement } from './request-edit'
+
+beforeEach(() => {
+  vi.resetAllMocks()
+  mocks.requestEdit.mockResolvedValue(undefined)
+  mocks.resolveDatabaseContext.mockResolvedValue({ token: 'site-example' })
+  mocks.openLink.mockResolvedValue({ opened: true })
+})
+it('switches edit mode without opening a new page', async () => {
+  await requestEditOrOpenManagement()
+  expect(mocks.openLink).not.toHaveBeenCalled()
+})
+it('routes management fallback through OpenLink', async () => {
+  mocks.requestEdit.mockRejectedValue(new Error('unavailable'))
+  await requestEditOrOpenManagement()
+  expect(mocks.openLink).toHaveBeenCalledWith(
+    'https://feishu.cn/base/site/detail/overview?token=site-example',
+  )
+})
+it.each([false, 'reject'])(
+  'propagates %s to visible component feedback',
+  async (outcome) => {
+    mocks.requestEdit.mockRejectedValue(new Error('unavailable'))
+    if (outcome === false) mocks.openLink.mockResolvedValue({ opened: false })
+    else mocks.openLink.mockRejectedValue(new Error('security unavailable'))
+    await expect(requestEditOrOpenManagement()).rejects.toThrow()
+  },
+)

package/templates/database-starter/page/src/components/floating-button/utils/request-edit.ts

@@ -0,0 +1,21 @@
+import { openLink } from '@lark-base-open/base-site-channel/runtime'
+import {
+  resolveDatabaseContext,
+  siteRuntime,
+} from '../../../lib/database-runtime'
+
+const BASE_DATABASE_OVERVIEW_URL = 'https://feishu.cn/base/site/detail/overview'
+
+/** 优先请求宿主切换编辑态；管理页链接同样交给宿主安全检查。 */
+export async function requestEditOrOpenManagement(): Promise<void> {
+  try {
+    await siteRuntime.requestEdit()
+    return
+  } catch {
+    const { token } = await resolveDatabaseContext()
+    const url = new URL(BASE_DATABASE_OVERVIEW_URL)
+    url.searchParams.set('token', token)
+    const result = await openLink(url.toString())
+    if (!result.opened) throw new Error('Management page was not opened')
+  }
+}

package/templates/database-starter/page/src/main.test.ts

@@ -0,0 +1,28 @@
+import { afterEach, expect, it, vi } from 'vitest'
+
+const calls = vi.hoisted(() => [] as string[])
+vi.mock('@lark-base-open/base-site-channel/runtime', () => ({
+  installLinkGuard: () => {
+    calls.push('guard')
+    return () => {}
+  },
+}))
+vi.mock('react-dom/client', () => ({
+  createRoot: () => ({ render: () => calls.push('render') }),
+}))
+vi.mock('./App', () => ({ default: () => null }))
+vi.mock('./components/database-runtime-ready', () => ({
+  DatabaseRuntimeReady: () => null,
+}))
+vi.mock('./lib/database-runtime', () => ({
+  siteRuntime: { reportLoadFailed: vi.fn() },
+}))
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+it('installs the link guard before rendering the page', async () => {
+  vi.stubGlobal('document', { getElementById: () => ({}) })
+  await import('./main')
+  expect(calls).toEqual(['guard', 'render'])
+})

package/templates/database-starter/page/src/main.tsx

@@ -1,3 +1,4 @@
+import { installLinkGuard } from '@lark-base-open/base-site-channel/runtime'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App'
@@ -24,6 +25,7 @@ function bootstrapDatabaseApp(): void {
 }
 
 try {
+  installLinkGuard()
   bootstrapDatabaseApp()
 } catch (error) {
   // ready 之前的启动失败必须显式上报，否则宿主只能等到 ready 超时才展示错误态。

package/skills/lark-base-database/references/design/components/actions-fields.md

@@ -1,16 +0,0 @@
-# 按钮与字段
-
-适用于主/次/文字/危险/图标按钮、单行输入、搜索、标签、错误、帮助与多行输入。基础几何从[配方](../control-recipes.md)取得，颜色从[主题](../theme.md)取得；[组件代码](code/controls.tsx)和[共享样式](code/controls.css)展示可适配实现。
-
-| 区域 | A / B / C 共用要求 |
-| --- | --- |
-| 普通按钮 | 文字行高 20px、图标视觉 16px；高度、水平内边距、圆角和间隙用配方值。主动作实底，次动作轻填充，低优先级动作透明；不叠灰底、灰边和阴影 |
-| 图标按钮 | 宽度可等于当前按钮高度；必须有可访问名称，图标垂直与水平居中。触控场景另扩展命中区 |
-| 单行输入与搜索 | 同配方高度和字形；值字号可读，placeholder 仅提供例子，不替代 label。A 用单层轻边界，B/C 用轻填充并保留透明 1px 边界占位 |
-| 输入焦点 | 原边界位置变为一层 1px 主题焦点色，不叠 outline/ring/内外阴影；正常输入和错误同时存在时只画一个边界层 |
-| 禁用/加载 | 禁用不可操作，loading 仅用于真实异步状态；大小不跳动，必要时阻止重复提交 |
-| 帮助与错误 | 只在必要时显示。错误靠近字段并通过 `aria-describedby` 关联；校验恢复后移除错误及关联，不补“已填写”或空白帮助行 |
-
-Textarea 从约三行起步，`resize: none` 去掉右下角拖拽斜线；随输入、初值、预填、粘贴和容器尺寸增高。达到任务合适上限时在字段内部滚动，预览中的 220px 是可改参考值，不是业务限制。不能把输入截断或固定矮框。参考实现的 `ResizeObserver` 只处理控件自身尺寸，不要求普通搭建启动浏览器巡检。
-
-按钮文案说明实际操作；保存成功只能来自真实业务返回或用户明确的模拟流程。页面头与按钮已经表达的功能不再写副标题。选择主按钮不自动在其外层生成背景卡片。

package/skills/lark-base-database/references/design/components/code/controls.css

@@ -1,122 +0,0 @@
-.ds-theme, .ds-theme * { box-sizing: border-box; }
-.ds-control { font: inherit; font-size: var(--ds-font); line-height: 20px; color: var(--ds-text); }
-.ds-button, .ds-field, .ds-trigger, .ds-segment button, .ds-option, .ds-page-button { font: inherit; font-size: var(--ds-font); }
-.ds-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-gap); min-height: var(--ds-height); padding: 0 var(--ds-pad); border: 1px solid transparent; border-radius: var(--ds-radius); background: transparent; color: var(--ds-text); font-weight: 500; line-height: 20px; box-shadow: none; cursor: pointer; white-space: nowrap; }
-.ds-button[data-variant="primary"] { background: var(--ds-action); color: var(--ds-on-action); }
-.ds-button[data-variant="primary"]:hover:not(:disabled) { background: var(--ds-action-hover); }
-.ds-button[data-variant="secondary"] { background: var(--ds-action-soft); color: var(--ds-action); }
-.ds-button[data-variant="secondary"]:hover:not(:disabled) { background: var(--ds-action-soft-hover); }
-.ds-button[data-variant="quiet"]:hover:not(:disabled) { background: var(--ds-hover); }
-.ds-button[data-variant="danger"] { color: var(--ds-danger); }
-.ds-button[data-variant="danger"]:hover:not(:disabled) { background: var(--ds-error-soft); }
-.ds-button[data-icon-only="true"] { width: var(--ds-height); padding: 0; flex: none; }
-.ds-button:disabled { opacity: .48; cursor: not-allowed; }
-.ds-button:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
-.ds-spinner { width: 14px; height: 14px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ds-spin .8s linear infinite; }
-@keyframes ds-spin { to { transform: rotate(360deg); } }
-.ds-field-wrap { display: grid; gap: 7px; min-width: 0; }
-.ds-label { font-size: var(--ds-font); font-weight: 500; line-height: 20px; }
-.ds-help, .ds-error { font-size: 12px; line-height: 18px; margin: 0; }
-.ds-help { color: var(--ds-muted); }
-.ds-error { color: var(--ds-danger); }
-.ds-field, .ds-trigger, .ds-number, .ds-affix { width: 100%; min-width: 0; min-height: var(--ds-height); padding: 0 var(--ds-pad); border: 1px solid var(--ds-field-border); border-radius: var(--ds-radius); background: var(--ds-field-fill); color: var(--ds-text); box-shadow: none; outline: 0; font-weight: 400; line-height: 20px; }
-.ds-field::placeholder { color: var(--ds-placeholder); opacity: 1; }
-.ds-field:hover:not(:disabled):not(:focus), .ds-trigger:hover:not(:disabled), .ds-number:hover, .ds-affix:hover { background: var(--ds-field-hover); }
-.ds-field:focus, .ds-trigger:focus-visible, .ds-number:focus-within, .ds-affix:focus-within { border-color: var(--ds-focus); outline: 0; box-shadow: none; }
-.ds-field[aria-invalid="true"], .ds-trigger[aria-invalid="true"], .ds-number[data-invalid="true"], .ds-affix[data-invalid="true"] { border-color: var(--ds-danger); background: var(--ds-error-soft); }
-.ds-field:disabled, .ds-trigger:disabled { opacity: .5; cursor: not-allowed; }
-.ds-textarea { padding: 10px var(--ds-pad); min-height: 92px; max-height: var(--ds-textarea-max, 220px); resize: none; line-height: 1.55; overflow-y: auto; }
-.ds-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; }
-.ds-trigger-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ds-trigger-caret { flex: none; color: var(--ds-muted); }
-.ds-trigger[aria-expanded="true"]:not(:focus-visible) { background: var(--ds-action-soft); }
-.ds-popover { position: fixed; z-index: 60; overflow: auto; padding: 6px; border: 0; border-radius: calc(var(--ds-radius) + 2px); background: var(--ds-popover); color: var(--ds-text); box-shadow: 0 6px 28px var(--ds-shadow); font-size: var(--ds-font); }
-.ds-option-list { max-height: 236px; overflow-y: auto; }
-.ds-option { width: 100%; min-height: var(--ds-height); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border: 0; border-radius: var(--ds-radius); background: transparent; color: var(--ds-text); text-align: left; line-height: 20px; cursor: pointer; }
-.ds-option:hover, .ds-option:focus-visible { background: var(--ds-hover); outline: 0; }
-.ds-option:focus-visible { box-shadow: inset 2px 0 var(--ds-focus); }
-.ds-option[aria-selected="true"], .ds-option[aria-checked="true"] { background: var(--ds-action-soft); color: var(--ds-action); font-weight: 500; }
-.ds-option[data-danger="true"] { color: var(--ds-danger); }
-.ds-option[data-danger="true"]:hover { background: var(--ds-error-soft); }
-.ds-popup-search { display: flex; align-items: center; gap: 8px; position: relative; padding: 4px 8px 8px; color: var(--ds-muted); }
-.ds-popup-search input { min-width: 0; width: 100%; padding: 7px 4px; border: 0; border-radius: 0; background: transparent; color: var(--ds-text); font: inherit; outline: 0; box-shadow: none; caret-color: var(--ds-text); }
-.ds-popup-search input:focus, .ds-popup-search input:focus-visible { border: 0; outline: 0; background: transparent; box-shadow: none; }
-.ds-popup-search[data-keyboard-focus="true"]:focus-within::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 14px; border-radius: 1px; background: var(--ds-focus); transform: translateY(-50%); }
-.ds-popup-empty { padding: 18px 8px; color: var(--ds-muted); text-align: center; font-size: 13px; }
-.ds-popup-footer { display: flex; justify-content: space-between; gap: 8px; padding: 6px 2px 0; border-top: 1px solid var(--ds-border); }
-.ds-calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 600; }
-.ds-calendar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
-.ds-calendar-weekdays { color: var(--ds-muted); font-size: 11px; line-height: 28px; }
-.ds-calendar-day { width: 100%; height: 34px; border: 0; border-radius: var(--ds-radius); background: transparent; color: var(--ds-text); font: inherit; font-size: 13px; cursor: pointer; }
-.ds-calendar-day:hover, .ds-calendar-day:focus-visible { background: var(--ds-hover); outline: 0; }
-.ds-calendar-day:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; }
-.ds-calendar-day[data-outside="true"] { color: var(--ds-muted); }
-.ds-calendar-day[data-today="true"]:not([aria-selected="true"]) { color: var(--ds-action); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
-.ds-calendar-day[aria-selected="true"] { background: var(--ds-action); color: var(--ds-on-action); }
-.ds-calendar-day[aria-selected="true"]:focus-visible { outline-color: var(--ds-on-action); outline-offset: -4px; }
-.ds-calendar-day:disabled { opacity: .35; cursor: not-allowed; }
-.ds-check, .ds-radio, .ds-switch { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; font-size: var(--ds-font); cursor: pointer; }
-.ds-check input, .ds-radio input { appearance: none; display: grid; place-content: center; width: 16px; height: 16px; margin: 0; border: 1px solid var(--ds-border); background: var(--ds-field); }
-.ds-check input { border-radius: 3px; }
-.ds-check input:checked { background: var(--ds-action); border-color: var(--ds-action); }
-.ds-check input:checked::after { content: ""; width: 7px; height: 4px; border: solid var(--ds-on-action); border-width: 0 0 1.7px 1.7px; transform: translateY(-1px) rotate(-45deg); }
-.ds-radio input { border-radius: 50%; }
-.ds-radio input:checked { border-color: var(--ds-action); }
-.ds-radio input:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-action); }
-.ds-switch input { position: absolute; opacity: 0; width: 30px; height: 18px; margin: 0; }
-.ds-switch-track { width: 30px; height: 18px; position: relative; border-radius: 20px; background: var(--ds-border); }
-.ds-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--ds-surface); transition: transform .15s; }
-.ds-switch input:checked + .ds-switch-track { background: var(--ds-action); }
-.ds-switch input:checked + .ds-switch-track::after { background: var(--ds-on-action); }
-.ds-switch input:checked + .ds-switch-track::after { transform: translateX(12px); }
-.ds-switch input:focus-visible + .ds-switch-track, .ds-check input:focus-visible, .ds-radio input:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
-.ds-segment, .ds-tabs { display: inline-flex; align-items: center; gap: 3px; }
-.ds-segment { padding: 3px; border-radius: calc(var(--ds-radius) + 2px); background: var(--ds-hover); }
-.ds-segment button, .ds-tabs button { padding: 4px 12px; border: 0; border-radius: var(--ds-radius); background: transparent; color: var(--ds-muted); line-height: 20px; cursor: pointer; }
-.ds-segment button[aria-pressed="true"] { background: var(--ds-surface); color: var(--ds-action); }
-.ds-tabs button { border-radius: 0; border-bottom: 2px solid transparent; }
-.ds-tabs button[aria-selected="true"] { border-bottom-color: var(--ds-action); color: var(--ds-action); }
-.ds-segment button:focus-visible, .ds-tabs button:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 1px; }
-.ds-number, .ds-affix { display: flex; align-items: center; gap: 4px; padding: 0 var(--ds-pad); }
-.ds-number { padding: 0; }
-.ds-number input, .ds-affix input { flex: 1; min-width: 0; height: calc(var(--ds-height) - 2px); padding: 0 6px; border: 0; background: transparent; color: var(--ds-text); font: inherit; font-size: var(--ds-font); outline: 0; }
-.ds-number input { text-align: center; font-variant-numeric: tabular-nums; }
-.ds-number button { width: calc(var(--ds-height) - 2px); height: calc(var(--ds-height) - 2px); border: 0; border-radius: var(--ds-radius); background: transparent; color: var(--ds-muted); cursor: pointer; }
-.ds-number button:hover, .ds-number button:focus-visible { background: var(--ds-action-soft); color: var(--ds-action); outline: 0; }
-.ds-affix > span { white-space: nowrap; color: var(--ds-muted); font-size: 12px; }
-.ds-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 20px; color: var(--ds-muted); }
-.ds-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
-.ds-status[data-tone="success"] { color: var(--ds-success); }
-.ds-status[data-tone="warning"] { color: var(--ds-warning); }
-.ds-status[data-tone="danger"] { color: var(--ds-danger); }
-.ds-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 9px; border-radius: var(--ds-radius); background: var(--ds-hover); font-size: 12px; }
-.ds-tag button { width: 22px; height: 22px; border: 0; border-radius: 3px; background: transparent; color: var(--ds-muted); cursor: pointer; }
-.ds-tag button:hover, .ds-tag button:focus-visible { background: var(--ds-action-soft); color: var(--ds-action); outline: 0; }
-.ds-slider { appearance: none; display: block; width: 100%; height: 20px; margin: 10px 0; background: transparent; cursor: pointer; }
-.ds-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--ds-action) 0 var(--ds-slider-progress), var(--ds-hover) var(--ds-slider-progress) 100%); }
-.ds-slider::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 3px solid var(--ds-action); border-radius: 50%; background: var(--ds-surface); }
-.ds-slider::-moz-range-track { height: 4px; border-radius: 4px; background: var(--ds-hover); }
-.ds-slider::-moz-range-progress { height: 4px; background: var(--ds-action); }
-.ds-slider::-moz-range-thumb { width: 10px; height: 10px; border: 3px solid var(--ds-action); border-radius: 50%; background: var(--ds-surface); }
-.ds-slider:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 3px; }
-.ds-progress { width: 100%; height: 4px; appearance: none; border: 0; border-radius: 4px; overflow: hidden; background: var(--ds-hover); }
-.ds-progress::-webkit-progress-bar { background: var(--ds-hover); }
-.ds-progress::-webkit-progress-value { background: var(--ds-action); }
-.ds-progress::-moz-progress-bar { background: var(--ds-action); }
-.ds-pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
-.ds-page-button[aria-current="page"] { background: var(--ds-action-soft); color: var(--ds-action); }
-.ds-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 28px; border: 0; border-radius: calc(var(--ds-radius) + 4px); background: var(--ds-popover); color: var(--ds-text); box-shadow: 0 20px 80px var(--ds-shadow); overflow: auto; }
-.ds-dialog::backdrop { background: var(--ds-scrim); }
-.ds-dialog[data-drawer="true"] { width: min(440px, calc(100vw - 20px)); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 0; }
-.ds-dialog-head, .ds-dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
-.ds-dialog-head { margin-bottom: 24px; }
-.ds-dialog-head h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
-.ds-dialog-actions { justify-content: flex-end; margin-top: 24px; }
-.ds-toast { position: fixed; z-index: 90; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 10px 16px; border-radius: var(--ds-radius); background: var(--ds-text); color: var(--ds-surface); box-shadow: 0 6px 24px var(--ds-shadow); font-size: 13px; }
-.ds-flat-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
-.ds-flat-toolbar .ds-field-wrap { flex: 0 1 180px; }
-.ds-flat-toolbar .ds-field-wrap:first-of-type { flex-basis: 240px; }
-.ds-flat-form { display: grid; gap: 22px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; }
-.ds-flat-form [data-full="true"] { grid-column: 1 / -1; }
-@media (max-width: 640px) { .ds-flat-form { grid-template-columns: 1fr; } .ds-flat-form [data-full="true"] { grid-column: auto; } .ds-dialog { padding: 22px; } }
-@media (prefers-reduced-motion: reduce) { .ds-spinner { animation: none; } .ds-switch-track::after { transition: none; } }

package/skills/lark-base-database/references/design/components/code/controls.tsx

@@ -1,73 +0,0 @@
-import { forwardRef, useEffect, useId, useRef, useState, type ButtonHTMLAttributes, type CSSProperties, type InputHTMLAttributes, type ReactNode, type TextareaHTMLAttributes } from 'react';
-
-export type ControlVariant = 'primary' | 'secondary' | 'quiet' | 'danger';
-export type NamedOption<T extends string = string> = { value: T; label: string; disabled?: boolean };
-
-export const Button = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement> & { variant?: ControlVariant; loading?: boolean; iconOnly?: boolean }>(function Button({ variant = 'quiet', loading = false, iconOnly = false, children, disabled, ...props }, ref) {
-  return <button {...props} ref={ref} type={props.type ?? 'button'} className={`ds-button ${props.className ?? ''}`} data-variant={variant} data-icon-only={iconOnly} disabled={disabled || loading} aria-busy={loading || undefined}>
-    {loading && <span className="ds-spinner" aria-hidden="true" />}{children}
-  </button>;
-});
-
-export function Field({ label, help, error, id, children }: { label: string; help?: string; error?: string; id: string; children: ReactNode }) {
-  return <div className="ds-field-wrap"><label className="ds-label" htmlFor={id}>{label}</label>{children}
-    {error ? <p className="ds-error" id={`${id}-message`}>{error}</p> : help ? <p className="ds-help" id={`${id}-help`}>{help}</p> : null}
-  </div>;
-}
-
-export const TextField = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement> & { error?: string; help?: string; label: string }>(function TextField({ id, label, error, help, className = '', ...props }, ref) {
-  const generated = useId(); const fieldId = id ?? generated;
-  return <Field id={fieldId} label={label} help={help} error={error}><input {...props} id={fieldId} ref={ref} className={`ds-field ${className}`} aria-label={label} aria-invalid={!!error || undefined} aria-describedby={error ? `${fieldId}-message` : help ? `${fieldId}-help` : undefined} /></Field>;
-});
-
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement> & { error?: string; help?: string; label: string }>(function Textarea({ id, label, error, help, className = '', onInput, value, defaultValue, ...props }, outerRef) {
-  const generated = useId(); const fieldId = id ?? generated; const localRef = useRef<HTMLTextAreaElement>(null);
-  const resize = () => { const el = localRef.current; if (!el) return; el.style.height = 'auto'; const cap = Number.parseFloat(getComputedStyle(el).maxHeight) || 220; el.style.height = `${Math.min(el.scrollHeight, cap)}px`; el.style.overflowY = el.scrollHeight > cap ? 'auto' : 'hidden'; };
-  useEffect(() => { resize(); const el = localRef.current; if (!el) return; const observer = new ResizeObserver(resize); observer.observe(el); return () => observer.disconnect(); }, [value, defaultValue]);
-  return <Field id={fieldId} label={label} help={help} error={error}><textarea {...props} id={fieldId} value={value} defaultValue={defaultValue} rows={props.rows ?? 3} className={`ds-field ds-textarea ${className}`} aria-label={label} aria-invalid={!!error || undefined} aria-describedby={error ? `${fieldId}-message` : help ? `${fieldId}-help` : undefined} ref={node => { localRef.current = node; if (typeof outerRef === 'function') outerRef(node); else if (outerRef) outerRef.current = node; }} onInput={event => { resize(); onInput?.(event); }} /></Field>;
-});
-
-export function Checkbox({ label, ...props }: InputHTMLAttributes<HTMLInputElement> & { label: string }) {
-  return <label className="ds-check"><input {...props} type="checkbox" />{label}</label>;
-}
-
-export function RadioGroup<T extends string>({ label, name, options, value, onChange }: { label: string; name: string; options: NamedOption<T>[]; value: T; onChange: (value: T) => void }) {
-  return <fieldset style={{ border: 0, padding: 0, margin: 0 }}><legend className="ds-label">{label}</legend><div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>{options.map(option => <label className="ds-radio" key={option.value}><input name={name} type="radio" checked={value === option.value} disabled={option.disabled} onChange={() => onChange(option.value)} />{option.label}</label>)}</div></fieldset>;
-}
-
-export function Switch({ label, checked, onChange, disabled = false }: { label: string; checked: boolean; onChange: (checked: boolean) => void; disabled?: boolean }) {
-  return <label className="ds-switch"><input type="checkbox" role="switch" checked={checked} onChange={event => onChange(event.target.checked)} disabled={disabled} /><span className="ds-switch-track" aria-hidden="true" />{label}</label>;
-}
-
-export function Segmented<T extends string>({ label, options, value, onChange }: { label: string; options: NamedOption<T>[]; value: T; onChange: (value: T) => void }) {
-  return <div className="ds-segment" role="group" aria-label={label}>{options.map(option => <button key={option.value} type="button" aria-pressed={value === option.value} disabled={option.disabled} onClick={() => onChange(option.value)}>{option.label}</button>)}</div>;
-}
-
-export function Tabs<T extends string>({ label, options, value, onChange, children }: { label: string; options: NamedOption<T>[]; value: T; onChange: (value: T) => void; children: ReactNode }) {
-  const id = useId(); const enabled = options.filter(option => !option.disabled);
-  return <><div className="ds-tabs" role="tablist" aria-label={label}>{options.map(option => <button key={option.value} id={`${id}-${option.value}`} type="button" role="tab" aria-controls={`${id}-panel`} aria-selected={value === option.value} tabIndex={value === option.value ? 0 : -1} disabled={option.disabled} onClick={() => onChange(option.value)} onKeyDown={event => { if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return; event.preventDefault(); const index = enabled.findIndex(item => item.value === option.value); const next = event.key === 'Home' ? 0 : event.key === 'End' ? enabled.length - 1 : (index + (event.key === 'ArrowRight' ? 1 : -1) + enabled.length) % enabled.length; onChange(enabled[next].value); requestAnimationFrame(() => document.getElementById(`${id}-${enabled[next].value}`)?.focus()); }}>{option.label}</button>)}</div><div role="tabpanel" id={`${id}-panel`} aria-labelledby={`${id}-${value}`}>{children}</div></>;
-}
-
-export function NumberStepper({ label, value, onChange, min, max, step = 1, error }: { label: string; value: number; onChange: (value: number) => void; min?: number; max?: number; step?: number; error?: string }) {
-  const id = useId(), [draft, setDraft] = useState(String(value));
-  useEffect(() => setDraft(String(value)), [value]);
-  const clamp = (n: number) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, n));
-  const adjust = (direction: number) => { const places = Math.max((String(step).split('.')[1] ?? '').length, (String(value).split('.')[1] ?? '').length); onChange(clamp(Number((value + direction * step).toFixed(places)))); };
-  const commit = () => { const n = Number(draft); const next = draft.trim() && Number.isFinite(n) ? clamp(n) : value; onChange(next); setDraft(String(next)); };
-  return <Field id={id} label={label} error={error}><div className="ds-number" data-invalid={!!error}><button type="button" aria-label={`减少${label}`} disabled={min !== undefined && value <= min} onClick={() => adjust(-1)}>−</button><input id={id} type="text" inputMode="decimal" role="spinbutton" value={draft} aria-label={label} aria-valuenow={value} aria-valuemin={min} aria-valuemax={max} aria-invalid={!!error || undefined} aria-describedby={error ? `${id}-message` : undefined} onChange={event => { const text = event.target.value; setDraft(text); if (text.trim() && Number.isFinite(Number(text))) onChange(Number(text)); }} onBlur={commit} onKeyDown={event => { if (event.key === 'ArrowUp' || event.key === 'ArrowDown') { event.preventDefault(); adjust(event.key === 'ArrowUp' ? 1 : -1); } }} /><button type="button" aria-label={`增加${label}`} disabled={max !== undefined && value >= max} onClick={() => adjust(1)}>+</button></div></Field>;
-}
-
-export function AffixInput({ label, prefix, suffix, error, ...props }: InputHTMLAttributes<HTMLInputElement> & { label: string; prefix?: string; suffix?: string; error?: string }) {
-  const id = useId(); return <Field id={id} label={label} error={error}><div className="ds-affix" data-invalid={!!error}>{prefix && <span aria-hidden="true">{prefix}</span>}<input {...props} id={id} aria-label={label} aria-invalid={!!error || undefined} aria-describedby={error ? `${id}-message` : undefined} />{suffix && <span aria-hidden="true">{suffix}</span>}</div></Field>;
-}
-
-export function Status({ children, tone = 'neutral' }: { children: ReactNode; tone?: 'neutral' | 'success' | 'warning' | 'danger' }) { return <span className="ds-status" data-tone={tone}>{children}</span>; }
-export function Tag({ children, onRemove, removeLabel }: { children: ReactNode; onRemove?: () => void; removeLabel?: string }) { return <span className="ds-tag">{children}{onRemove && <button type="button" aria-label={removeLabel ?? '移除标签'} onClick={onRemove}>×</button>}</span>; }
-export function Slider({ label, value, onChange, min = 0, max = 100, step = 1 }: { label: string; value: number; onChange: (value: number) => void; min?: number; max?: number; step?: number }) {
-  const id = useId(); const pct = max > min ? Math.max(0, Math.min(100, (value - min) / (max - min) * 100)) : 0; return <div className="ds-field-wrap"><div style={{ display: 'flex', justifyContent: 'space-between' }}><label htmlFor={id}>{label}</label><output htmlFor={id}>{value}</output></div><input className="ds-slider" id={id} type="range" value={value} min={min} max={max} step={step} style={{ '--ds-slider-progress': `${pct}%` } as CSSProperties} onChange={event => onChange(Number(event.target.value))} /></div>;
-}
-export function Progress({ label, value, max = 100 }: { label: string; value?: number; max?: number }) { return <progress className="ds-progress" aria-label={label} value={value} max={max} />; }
-export function Pagination({ page, pageCount, onPageChange, label = '分页' }: { page: number; pageCount: number; onPageChange: (page: number) => void; label?: string }) {
-  const pages = Array.from({ length: Math.min(pageCount, 5) }, (_, i) => Math.min(Math.max(1, page - 2), Math.max(1, pageCount - 4)) + i);
-  return <nav className="ds-pagination" aria-label={label}><Button iconOnly aria-label="上一页" disabled={page <= 1} onClick={() => onPageChange(page - 1)}>‹</Button>{pages.map(n => <Button key={n} className="ds-page-button" aria-current={n === page ? 'page' : undefined} onClick={() => onPageChange(n)}>{n}</Button>)}<Button iconOnly aria-label="下一页" disabled={page >= pageCount} onClick={() => onPageChange(page + 1)}>›</Button></nav>;
-}