@lark-base-open/base-database-cli 1.0.0

package/templates/database-starter/page/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "page",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "check": "tsc -b --noEmit",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "lint": "oxlint src --deny-warnings",
+    "quality": "npm run format:check && npm run lint && npm run check && npm run test && npm run build",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@lark-base-open/base-site-channel": "https://lf3-static.bytednsdoc.com/obj/eden-cn/vlseh7bfnuhps/@lark-base-open-base-site-channel-0.0.1-alpha.35.tgz",
+    "@lark-base-open/base-site-js": "https://lf3-static.bytednsdoc.com/obj/eden-cn/jjjpceh7nulojvhj/@lark-base-open-base-site-js-0.0.1-alpha.25.tgz",
+    "@radix-ui/react-slot": "^1.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.24.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.2",
+    "@types/node": "^26.1.1",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "oxlint": "^1.42.0",
+    "prettier": "^3.7.4",
+    "tailwindcss": "^4.3.2",
+    "typescript": "~7.0.2",
+    "vite": "^8.1.4",
+    "vitest": "^4.1.0"
+  }
+}

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

@@ -0,0 +1,18 @@
+export default function App() {
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-background px-6 py-12 text-foreground">
+      <section className="w-full max-w-2xl rounded-3xl border border-border bg-card p-8 shadow-sm sm:p-12">
+        <p className="text-sm font-semibold tracking-[0.18em] text-primary uppercase">
+          Base Database
+        </p>
+        <h1 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-5xl">
+          从真实业务任务开始构建
+        </h1>
+        <p className="mt-5 max-w-xl text-base leading-7 text-muted-foreground sm:text-lg">
+          使用页面组件承载交互，通过受控 Function 连接 Base SQL 与
+          FaaS，并在交付前替换这段起始内容。
+        </p>
+      </section>
+    </main>
+  )
+}

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

@@ -0,0 +1,267 @@
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type FocusEventHandler,
+  type KeyboardEventHandler,
+  type MouseEventHandler,
+} from 'react'
+
+import { cn } from '../../lib/cn'
+import UserSelectorPanel, {
+  type User,
+  type UserSelectorAction,
+  type UserSelectorMode,
+  type UserSelectorSearchAction,
+  type UserSelectorValue,
+} from '../UserSelectorPanel'
+
+export type UserSelectorEditorValue = UserSelectorValue
+export type { UserSelectorMode } from '../UserSelectorPanel'
+
+export interface UserSelectorEditorProps {
+  value: UserSelectorEditorValue | null | undefined
+  loading?: boolean
+  mode?: UserSelectorMode
+  onClick?: MouseEventHandler<HTMLDivElement>
+  onChange?: (value: UserSelectorEditorValue | undefined) => void
+  onSelect?: (user: User, meta: { option: User }) => void
+  onClear?: () => void
+  onRemove?: (user: User) => void
+  onSelectRecordCreator?: () => void
+  getUserDescription?: (user: User) => string | undefined
+  onDropdownVisibleChange?: (visible: boolean) => void
+  onSearch?: (value: string, meta: { action: UserSelectorSearchAction }) => void
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>
+  onFocus?: FocusEventHandler<HTMLButtonElement>
+  onBlur?: FocusEventHandler<HTMLButtonElement>
+}
+
+/**
+ * 展示受控成员值，并闭环管理 UserSelectorPanel 的打开、关闭与值回传。
+ */
+export default function UserSelectorEditor(
+  props: UserSelectorEditorProps,
+): React.JSX.Element {
+  const {
+    value,
+    loading = false,
+    mode,
+    onClick,
+    onChange,
+    onSelect,
+    onClear,
+    onRemove,
+    onSelectRecordCreator,
+    getUserDescription,
+    onDropdownVisibleChange,
+    onSearch,
+    onKeyDown,
+    onFocus,
+    onBlur,
+  } = props
+  const [open, setOpen] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const panelOpen = open
+  const selectedUsers = Array.isArray(value) ? value : value ? [value] : []
+  const isMultiple = mode === 'multiple'
+
+  const updateOpen = useCallback(
+    (nextOpen: boolean) => {
+      setOpen(nextOpen)
+      if (nextOpen !== open) onDropdownVisibleChange?.(nextOpen)
+    },
+    [onDropdownVisibleChange, open],
+  )
+
+  useEffect(() => {
+    if (!panelOpen) return
+
+    const handlePointerDown = (event: MouseEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) {
+        updateOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handlePointerDown)
+    return () => document.removeEventListener('mousedown', handlePointerDown)
+  }, [panelOpen, updateOpen])
+
+  const closePanel = () => {
+    updateOpen(false)
+  }
+
+  const updateValue = (nextValue: UserSelectorEditorValue | undefined) => {
+    onChange?.(nextValue)
+  }
+
+  const handlePanelChange = (
+    nextValue: UserSelectorEditorValue | undefined,
+    meta: { option: User | undefined; action: UserSelectorAction },
+  ) => {
+    updateValue(nextValue)
+    if (meta.action === 'Remove' && meta.option) onRemove?.(meta.option)
+  }
+
+  const handleTriggerClick: MouseEventHandler<HTMLDivElement> = (event) => {
+    onClick?.(event)
+    if (event.defaultPrevented) return
+
+    updateOpen(!open)
+  }
+
+  const renderAvatar = (user: User) => {
+    const avatarUrl = user.avatar.avatar_72 || user.avatar.avatar_240
+
+    return (
+      <span className="relative flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[#e8f0fe] text-[10px] leading-none font-medium text-[#1456f0]">
+        {user.name.slice(0, 1)}
+        {avatarUrl ? (
+          <img
+            alt=""
+            className="absolute inset-0 size-full object-cover"
+            onError={(event) => {
+              event.currentTarget.hidden = true
+            }}
+            src={avatarUrl}
+          />
+        ) : null}
+      </span>
+    )
+  }
+
+  return (
+    <div className="relative w-full" ref={rootRef}>
+      <div
+        className={cn(
+          'flex min-h-8 w-full cursor-pointer items-center rounded-md border border-[#dee0e3] bg-white p-0 text-left text-sm leading-[22px] text-[#1f2329] outline-none transition-colors duration-200 hover:border-[#346df4]',
+          panelOpen && 'border-[#346df4]',
+        )}
+        onClick={handleTriggerClick}
+      >
+        <span
+          className={cn(
+            'flex w-full items-center justify-center gap-2 rounded-md px-1.5 py-[3px]',
+            isMultiple && 'items-start',
+          )}
+        >
+          <span
+            className={cn(
+              'flex min-h-6 min-w-0 flex-1 items-center gap-2 overflow-hidden',
+              isMultiple &&
+                'flex-wrap content-start gap-x-2 gap-y-1 overflow-visible [&>*]:shrink-0',
+            )}
+          >
+            {selectedUsers.length > 0 ? (
+              selectedUsers.map((selectedUser) => (
+                <span
+                  className="inline-flex h-6 max-w-full min-w-0 items-center gap-1 overflow-hidden rounded-full bg-transparent pr-1.5 pl-0.5 text-[13px] leading-6 text-[#1f2329] hover:bg-[rgb(194_212_255)]"
+                  key={selectedUser.user_id}
+                >
+                  <button
+                    aria-expanded={panelOpen}
+                    aria-haspopup="listbox"
+                    className="flex h-full min-w-0 flex-[0_1_auto] items-center gap-1 border-0 bg-transparent p-0 text-left text-inherit outline-none"
+                    onBlur={onBlur}
+                    onFocus={onFocus}
+                    type="button"
+                  >
+                    {renderAvatar(selectedUser)}
+                    <span className="min-w-0 flex-[0_1_auto] truncate">
+                      {selectedUser.name}
+                    </span>
+                  </button>
+                  <button
+                    aria-label={
+                      isMultiple
+                        ? `移除成员 ${selectedUser.name}`
+                        : '清除已选成员'
+                    }
+                    className="relative ml-0 flex size-3.5 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 !text-[#646a73] outline-none hover:!text-[#0442d2]"
+                    onClick={(event) => {
+                      event.stopPropagation()
+                      if (isMultiple) {
+                        updateValue(
+                          selectedUsers.filter(
+                            (user) => user.user_id !== selectedUser.user_id,
+                          ),
+                        )
+                        onRemove?.(selectedUser)
+                      } else {
+                        updateValue(undefined)
+                        onClear?.()
+                      }
+                    }}
+                    type="button"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="CloseSmallOutlined"
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M5.636 5.636a1 1 0 0 0 0 1.414l4.95 4.95-4.95 4.95a1 1 0 1 0 1.414 1.414l4.95-4.95 4.95 4.95a1 1 0 0 0 1.414-1.414L13.414 12l4.95-4.95a1 1 0 0 0-1.415-1.414L12 10.586l-4.95-4.95a1 1 0 0 0-1.413 0Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </button>
+                </span>
+              ))
+            ) : (
+              <button
+                aria-label="选择成员"
+                aria-expanded={panelOpen}
+                aria-haspopup="listbox"
+                className="flex h-full min-w-0 flex-1 items-center gap-1 border-0 bg-transparent p-0 text-left text-inherit outline-none"
+                onBlur={onBlur}
+                onFocus={onFocus}
+                type="button"
+              >
+                <span className="min-w-0 flex-1 truncate text-[#8f959e]">
+                  选择成员
+                </span>
+              </button>
+            )}
+          </span>
+          <span
+            aria-hidden="true"
+            className={cn(
+              'flex size-3 shrink-0 items-center justify-center text-[#646a73] transition-transform duration-200',
+              isMultiple && 'mt-1.5',
+              panelOpen && 'rotate-180',
+            )}
+          >
+            <svg className="block size-3" viewBox="0 0 24 24">
+              <path
+                d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+
+      {panelOpen ? (
+        <div className="absolute top-[calc(100%+4px)] left-px z-20 w-[calc(100%-2px)]">
+          <UserSelectorPanel
+            getUserDescription={getUserDescription}
+            loading={loading}
+            mode={mode}
+            onChange={handlePanelChange}
+            onClose={closePanel}
+            onKeyDown={onKeyDown}
+            onSearch={onSearch}
+            onSelect={onSelect}
+            onSelectRecordCreator={onSelectRecordCreator}
+            value={value}
+          />
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/templates/database-starter/page/src/components/UserSelectorPanel/index.css

@@ -0,0 +1,32 @@
+.user-selector-loading-spinner {
+  animation: user-selector-loading-rotate 1.2s linear infinite;
+}
+
+.user-selector-loading-spinner circle {
+  animation: user-selector-loading-dash 2.5s ease-in-out infinite;
+  stroke-dasharray: 1, 220;
+  stroke-dashoffset: 0;
+}
+
+@keyframes user-selector-loading-rotate {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@keyframes user-selector-loading-dash {
+  0% {
+    stroke-dasharray: 1, 220;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 150, 220;
+    stroke-dashoffset: -68px;
+  }
+
+  100% {
+    stroke-dasharray: 150, 220;
+    stroke-dashoffset: -218px;
+  }
+}

package/templates/database-starter/page/src/components/UserSelectorPanel/index.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest'
+
+import { isKeyboardEventComposing } from './index'
+
+describe('isKeyboardEventComposing', () => {
+  it('recognizes native IME composition', () => {
+    expect(
+      isKeyboardEventComposing({ nativeEvent: { isComposing: true } }),
+    ).toBe(true)
+  })
+
+  it('recognizes the legacy IME key code', () => {
+    expect(isKeyboardEventComposing({ keyCode: 229 })).toBe(true)
+  })
+
+  it('allows normal keyboard navigation', () => {
+    expect(
+      isKeyboardEventComposing({
+        keyCode: 40,
+        nativeEvent: { isComposing: false },
+      }),
+    ).toBe(false)
+  })
+})