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

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

@@ -3,8 +3,9 @@
 import { useState } from "react"
 import "./DesktopLoginView.css"
 import { BeaconSpinner } from "../../../composite/BeaconSpinner"
-import { ChevLeft, DingTalk, Feishu, Globe, WeCom } from "../../../composite/Icons"
+import { ChevLeft, DingTalk, DingTalkAi, Feishu, Globe, WeCom } from "../../../composite/Icons"
 import { OrbitworkMark } from "../../../composite/OrbitworkLogo"
+import { Tooltip } from "../../../composite/Tooltip"
 import { Button } from "../../../primitives"
 import { Field } from "../../../primitives/Field"
 import { InlineMessage } from "../../../primitives/InlineMessage"
@@ -158,7 +159,7 @@ export function DesktopLoginView({
   const failed = stage === "expired" || stage === "error"
   const passwordEnabled = Boolean(onPasswordLogin)
   const canSubmitPassword = identifier.trim().length > 0 && password.length > 0 && !passwordSubmitting
-  const visibleProviders = providers.map((provider) => ({ provider, Icon: providerBrandIcon(provider.kind) }))
+  const visibleProviders = providers.map((provider) => ({ provider, Icon: providerBrandIcon(provider) }))
   const providersEnabled = Boolean(onQrLogin) && visibleProviders.length > 0
 
   const submitPassword = () => {
@@ -250,23 +251,30 @@ export function DesktopLoginView({
                       未知 kind 不渲染该入口——连接列表以后端 identity-providers
                       为准，不硬编码三家。裸图标点击件：品牌标自足辨识，不套按钮
                       边框底（hover/focus 态在本 CSS 的 .login-provider 一族），
-                      可访问名取 displayName；发起中换小转子。 */}
+                      可访问名取 displayName；悬浮提示走 Tooltip（键盘 focus 即出，
+                      不用原生 title——与自定气泡同现会双重弹层）；发起中换小转子。 */}
                   <div className="login-provider-row">
                     {visibleProviders.map(({ provider, Icon }) => {
                       const loading = qrRequesting === provider.id
                       return (
-                        <button
+                        <Tooltip
                           key={provider.id}
-                          type="button"
-                          className={`login-provider${Icon === Globe ? " login-provider--generic" : ""}`}
+                          content={`使用${provider.displayName}扫码登录`}
+                          side="top"
                           disabled={loading}
-                          aria-label={`使用${provider.displayName}扫码登录`}
-                          aria-busy={loading || undefined}
-                          onClick={() => onQrLogin?.(provider.id)}
                         >
-                          {loading ? <Spinner className="w-5 h-5" /> : <Icon />}
-                          {Icon === Globe ? <span>{provider.displayName}</span> : null}
-                        </button>
+                          <button
+                            type="button"
+                            className={`login-provider${Icon === Globe ? " login-provider--generic" : ""}`}
+                            disabled={loading}
+                            aria-label={`使用${provider.displayName}扫码登录`}
+                            aria-busy={loading || undefined}
+                            onClick={() => onQrLogin?.(provider.id)}
+                          >
+                            {loading ? <Spinner className="w-5 h-5" /> : <Icon />}
+                            {Icon === Globe ? <span>{provider.displayName}</span> : null}
+                          </button>
+                        </Tooltip>
                       )
                     })}
                   </div>
@@ -408,8 +416,14 @@ export function DesktopLoginView({
 }
 
 // Unknown categories use a generic entry instead of hiding a usable connection.
-function providerBrandIcon(kind: LoginProviderOption['kind']) {
-  switch (kind) {
+function providerBrandIcon(provider: LoginProviderOption) {
+  // TODO(kind-dingtalk-ai)：「钉钉 AI 伙伴」与钉钉同为 DINGTALK kind（契约无独立
+  // 枚举、连接 id 是随机 UUID），临时按 displayName 精确匹配出同族蓝色标区分。
+  // proto 增加 IDENTITY_PROVIDER_KIND_DINGTALK_AI 后改为按 kind 映射并删除本分支。
+  if (provider.kind === "IDENTITY_PROVIDER_KIND_DINGTALK" && provider.displayName === "钉钉（AI伙伴）") {
+    return DingTalkAi
+  }
+  switch (provider.kind) {
     case "IDENTITY_PROVIDER_KIND_DINGTALK": return DingTalk
     case "IDENTITY_PROVIDER_KIND_FEISHU": return Feishu
     case "IDENTITY_PROVIDER_KIND_WECOM": return WeCom

package/src/components/domain/desktop/DesktopSidebarView/DesktopSidebarViewSource.test.mjs

@@ -193,7 +193,7 @@ test("V1 遗留 .thread-menu 已随 MenuSurface 迁移删除（全仓零引用
   assert.doesNotMatch(source, /thread-menu/)
 })
 
-test("更新胶囊是状态点＋文字而非实心按钮：焦点环走 focus-ring，无实底（§2/§6）", () => {
+test("更新入口是图标＋角标小圆点而非实心按钮：焦点环走 focus-ring，无实底（§2/§6）", () => {
   assert.match(styles, /\.owuser-update:focus-visible \{[^}]*var\(--ow-focus-ring\)/)
   assert.doesNotMatch(styles, /\.owuser-update:focus-visible \{[^}]*var\(--ow-primary\)/)
   assert.match(styles, /\.owuser-update:active:not\(:disabled\)/)
@@ -201,7 +201,7 @@ test("更新胶囊是状态点＋文字而非实心按钮：焦点环走 focus-r
   assert.match(styles, /\.owuser-update-dot \{[^}]*background: var\(--ow-accent\)/)
   assert.match(styles, /\.owuser-update:hover:not\(:disabled\) \{[^}]*var\(--ow-accent\)/)
   assert.match(styles, /\.owuser-update\.error \.owuser-update-dot \{[^}]*var\(--ow-error\)/)
-  // 层级错开：胶囊文字 caption/12px，不与账户名（fs-ui/13px）同档抢眼
+  // 层级错开：读数/辅助文字 caption 档，不与账户名（fs-ui/13px）同档抢眼
   assert.match(styles, /\.owuser-update \{[^}]*font: 400 var\(--ow-fs-caption\)\/1 var\(--ow-font-sans\)/)
   // ready 态不翻成主色实心按钮；呼吸动画已退役——点静止，全链路零 animation
   assert.doesNotMatch(styles, /\.owuser-update\.ready \{[^}]*background/)
@@ -380,7 +380,9 @@ test("R2 · T4：账户菜单的新数据口全部可选，缺省即该块不出
   }
 })
 
-test("library stays hidden while my space remains in primary navigation", () => {
+test("library is available after my space in primary navigation", () => {
   assert.match(source, /<NavItem\s+id="files"\s+label="我的空间"/)
-  assert.doesNotMatch(source, /<NavItem\s+id="library"\s+label="资料库"/)
+  assert.match(source, /<NavItem\s+id="files"\s+label="我的空间"[\s\S]*<NavItem\s+id="library"\s+label="资料库"/)
+  assert.ok(source.includes('active={props.activeNav === "library"}'))
+  assert.ok(source.includes('onClick={() => props.onNavigate("library")}'))
 })

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

@@ -13,10 +13,12 @@ import {
   ChevDown,
   ChevRight,
   Clock,
+  Download,
   Edit,
   Folder,
   Grid,
   Icon,
+  Memo,
   More,
   Package,
   PanelSidebar,
@@ -27,11 +29,12 @@ import {
   Trash,
 } from "../../../composite/Icons"
 import { TextField } from "../../../composite/NativeControls"
-import { OrbitworkLockup } from "../../../composite/OrbitworkLogo"
+import { OrbitworkLockup, OrbitworkMark } from "../../../composite/OrbitworkLogo"
 import { ProjectSelect } from "../../../composite/ProjectSelect"
 import { Avatar, Button } from "../../../primitives"
 import { MenuSurface } from "../../../primitives/Menu"
 import type { MenuItem } from "../../../primitives/Menu"
+import { Spinner } from "../../../primitives/Spinner"
 import { DesktopAccountMenuView, updateRowText } from "../DesktopAccountMenuView"
 
 export type DesktopSidebarNavId = "new" | "skills" | "sites" | "cron" | "files" | "library"
@@ -110,6 +113,12 @@ export interface DesktopSidebarViewProps {
    * 宿主 `features/sidebar/Sidebar.tsx` 补 `view === 'home' → 'new'` 即可，见交接单。
    */
   activeNav?: DesktopSidebarNavId
+  /**
+   * 首次会话列表加载中（宿主 `loadSessions` 首轮）。为 true 且还没有任何会话行时，
+   * 列表区出品牌 mark + spinner 的启动态，而不是一块空白——首屏读得出「在加载」
+   * 而不是「没有会话」。分页/刷新加载不改变此值（那是 `loadingMore` 的语义）。
+   */
+  sessionsLoading?: boolean
   /**
    * 是否在导航里出「我的空间」（A11-B1 · 裁决 16）。
    *
@@ -345,6 +354,17 @@ export function DesktopSidebarView(props: DesktopSidebarViewProps): React.ReactE
             onClick={() => props.onNavigate("files")}
           />
         )}
+        {/* 资料库：恢复的入口（曾隐藏导致已接线的 LibraryPage 不可达——App.tsx 已把
+            baseView === "library" 路由到 workbenchView 并以 active prop 挂载 LibraryPage）。
+            放在「我的空间」之后；只有 running 的 thread 才禁用移动，archived 可以移动。 */}
+        <NavItem
+          id="library"
+          label="资料库"
+          title="资料库"
+          active={props.activeNav === "library"}
+          icon={<Memo />}
+          onClick={() => props.onNavigate("library")}
+        />
       </nav>
 
       <div className="owrecent-head" data-tour-anchor="projects">
@@ -368,7 +388,13 @@ export function DesktopSidebarView(props: DesktopSidebarViewProps): React.ReactE
         </div>
       </div>
       <div className="owprojects">
-        {projects.map((project) => (
+        {props.sessionsLoading && projects.every((project) => project.threads.length === 0) ? (
+          <div className="owprojects-boot" role="status" aria-live="polite">
+            <OrbitworkMark variant="auto" size={40} />
+            <Spinner size="md" />
+          </div>
+        ) : (
+          projects.map((project) => (
           <div key={project.id} className="owproject">
             {renamingProject?.id === project.id ? (
               <div className="owproject__head renaming">
@@ -568,15 +594,26 @@ export function DesktopSidebarView(props: DesktopSidebarViewProps): React.ReactE
                     {/* R2 · L2-1-1：「展开显示」原来是一行没有图标、没有 chevron、
                         与会话行同缩进同字号的 --ow-text-3 灰字（浅档 2.29:1），读起来像
                         一条被禁用的会话。补一枚 14 的 ChevDown 前置图标（与同族
-                        .owthread-new 的 Plus 同语法），让它读成动作；字色并轨见 CSS。 */}
-                    <ChevDown className="lead" aria-hidden="true" />
-                    {project.loadingMore ? "加载中…" : project.loadError ? "加载失败，点击重试" : "展开显示"}
+                        .owthread-new 的 Plus 同语法），让它读成动作；字色并轨见 CSS。
+                        加载中同理：纯文案太朴素，换成 spinner + 文案（#34）。 */}
+                    {project.loadingMore ? (
+                      <>
+                        <Spinner size="sm" />
+                        加载中…
+                      </>
+                    ) : (
+                      <>
+                        <ChevDown className="lead" aria-hidden="true" />
+                        {project.loadError ? "加载失败，点击重试" : "展开显示"}
+                      </>
+                    )}
                   </Button>
                 )}
               </div>
             )}
           </div>
-        ))}
+          ))
+        )}
       </div>
 
       {projectsMenu && (
@@ -613,7 +650,7 @@ export function DesktopSidebarView(props: DesktopSidebarViewProps): React.ReactE
                 key: "move",
                 label: "移动",
                 icon: <Folder />,
-                disabled: Boolean(threadById(threadMenu.id)?.running || threadById(threadMenu.id)?.archived),
+                disabled: Boolean(threadById(threadMenu.id)?.running),
               },
               ...(!threadById(threadMenu.id)?.archived
                 ? ([
@@ -838,12 +875,12 @@ function SidebarUpdateButton({
   onClick,
 }: { update: DesktopSidebarUpdate; onClick: () => void }): React.ReactElement {
   const percent = Math.round(Math.max(0, Math.min(100, update.percent ?? 0)))
-  /* 胶囊不是实心按钮：状态点 + 按态换字，状态说明走 title（与账户菜单「检查更新」行
-     同一份 updateRowText）。下载完（ready）点它的动作是重启安装，字还写「更新」会把
-     用户骗去等一个不会来的「更新中」——ready 直书「重启安装」；其余态「更新」不变。
-     下载中附百分比，点按行为由宿主按态分发。 */
+  /* 图标 + 角标小圆点：信息级提示，hover 才上色。ready 态图标换成 Refresh（动作是
+     重启安装），与 available 的 Download 形成形状双编码，不靠颜色区分两个可点态；
+     状态说明走 title（与账户菜单「检查更新」行同一份 updateRowText）。下载中禁用并
+     附百分比读数（读数用墨不用黄），点按行为由宿主按态分发。 */
   const { title } = updateRowText(update)
-  const label = update.state === "ready" ? "重启安装" : "更新"
+  const StateIcon = update.state === "ready" ? Refresh : Download
   return (
     <button
       type="button"
@@ -856,8 +893,10 @@ function SidebarUpdateButton({
         onClick()
       }}
     >
-      <i className="owuser-update-dot" aria-hidden="true" />
-      <span>{label}</span>
+      <span className="owuser-update-ic">
+        <StateIcon />
+        {update.state !== "downloading" && <i className="owuser-update-dot" aria-hidden="true" />}
+      </span>
       {update.state === "downloading" && <em>{percent}%</em>}
     </button>
   )

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

@@ -352,8 +352,8 @@ export function DesktopSitesListView({
           {(hasMore || error) && (
             <div className="sites-grid__more">
               {error && <InlineMessage variant="error" title="暂时无法加载更多站点" detail={error} />}
-              <Button disabled={loading} onClick={error ? onRetry : onLoadMore}>
-                {loading ? "正在加载…" : error ? "重试" : "加载更多"}
+              <Button loading={loading} onClick={error ? onRetry : onLoadMore}>
+                {error ? "重试" : "加载更多"}
               </Button>
             </div>
           )}

package/src/components/primitives/Button/index.tsx

@@ -207,7 +207,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         )
       )}
       {children && (
-        <span data-ow-part="label" className="inline-flex items-center gap-[inherit] whitespace-nowrap">
+        // min-w-0：受 max-w 约束的按钮（如 composer 模型选择器）要能在窄容器里
+        // 收缩，否则内部 nowrap 文本撑破按钮边界、溢出覆盖相邻控件。真正的省略
+        // 号由调用方的 label span（overflow-hidden text-ellipsis）承担。
+        <span data-ow-part="label" className="inline-flex min-w-0 items-center gap-[inherit] whitespace-nowrap">
           {children}
         </span>
       )}

package/src/components/primitives/Menu/index.tsx

@@ -900,8 +900,9 @@ export function Menu({
 /**
  * 向上找最近的带 transform/perspective/filter/will-change 的祖先 —— 它会给
  * fixed 元素造出新的包含块，让坐标不再相对视口。没有就返回 null。
+ * （Select 的 portal 菜单量位也复用这个。）
  */
-function findFixedOffsetAncestor(el: HTMLElement): HTMLElement | null {
+export function findFixedOffsetAncestor(el: HTMLElement): HTMLElement | null {
   let parent = el.parentElement
   while (parent && parent !== document.body && parent !== document.documentElement) {
     const style = getComputedStyle(parent)

package/src/components/primitives/Select/index.tsx

@@ -8,11 +8,14 @@ import {
   forwardRef,
   useEffect,
   useId,
+  useLayoutEffect,
   useRef,
   useState,
 } from "react"
+import { createPortal } from "react-dom" // ui-imports-guard-disable-line
 import { cn } from "../../../lib/utils"
 import { Check, ChevDown } from "../../composite/Icons"
+import { findFixedOffsetAncestor } from "../Menu"
 
 export type SelectOption = {
   value: string
@@ -52,22 +55,14 @@ const selectTriggerVariants = cva(
 
 const selectMenuVariants = cva(
   [
-    "absolute left-0 right-0 z-[var(--ow-z-dropdown)] p-1.5 max-h-[264px] overflow-y-auto",
+    // R6：菜单纯 portal 到 document.body 做 fixed 定位（量位见下方 effect）。
+    // 原先 absolute 挂在触发器下，会被 Dialog 这类 overflow-hidden 立面裁到只剩
+    // 一行——裁剪抬 z-index 解决不了（MenuSurface portal 档注释同款结论）。
+    "p-1.5 max-h-[264px] overflow-y-auto",
     "bg-[var(--ow-popover-bg)] border border-ow-border",
     "shadow-[var(--ow-shadow-pop)]",
     "[border-radius:var(--ow-radius-menu)]",
   ].join(" "),
-  {
-    variants: {
-      position: {
-        down: "top-[calc(100%+4px)]",
-        up: "bottom-[calc(100%+4px)]",
-      },
-    },
-    defaultVariants: {
-      position: "down",
-    },
-  },
 )
 
 const selectOptionVariants = cva(
@@ -187,20 +182,28 @@ export function Select({
   className,
 }: SelectProps) {
   const [open, setOpen] = useState(false)
-  const [up, setUp] = useState(false)
   const [activeIndex, setActiveIndex] = useState(-1)
+  const [menuPos, setMenuPos] = useState<{ top: number; left: number } | null>(null)
   const wrapRef = useRef<HTMLDivElement>(null)
   const buttonRef = useRef<HTMLButtonElement>(null)
   const listRef = useRef<HTMLDivElement>(null)
   const listId = useId()
   const selected = options.find((option) => option.value === value)
   const optionId = (index: number) => `${listId}-opt-${index}`
+  // 菜单纯 portal 到 body 后与 Dialog 同处 --ow-z-modal 层：弹层晚于对话框挂载（DOM
+  // 序在后），同层相叠画在立面之上；用 --ow-z-dropdown 会落到模态 scrim 下面。
 
   useEffect(() => {
     if (!open) return undefined
 
     const closeOnOutsideClick = (event: MouseEvent) => {
-      if (wrapRef.current && !wrapRef.current.contains(event.target as Node)) {
+      const target = event.target as Node
+      // 菜单 portal 到 body，不在 wrapRef 子树里，命中面本体时不算外点。
+      if (
+        wrapRef.current &&
+        !wrapRef.current.contains(target) &&
+        !(listRef.current && listRef.current.contains(target))
+      ) {
         setOpen(false)
       }
     }
@@ -225,12 +228,48 @@ export function Select({
     listRef.current?.querySelector(`[data-index="${activeIndex}"]`)?.scrollIntoView({ block: "nearest" })
   }, [open, activeIndex])
 
+  // Portal 量位：贴触发器下缘，下方空间不足翻到下缘上方；滚动/缩放时跟锚点重算。
+  // transform 祖先（如 Dialog 的入场动画）会改写 fixed 的包含块，偏移要减回去。
+  useLayoutEffect(() => {
+    if (!open) return undefined
+    const el = listRef.current
+    const button = buttonRef.current
+    if (!el || !button) return undefined
+    const measure = () => {
+      const anchorRect = button.getBoundingClientRect()
+      // 菜单宽跟随触发器（原 absolute left-0 right-0 的同款语义），先写死再量高度。
+      el.style.width = `${anchorRect.width}px`
+      const dropRect = el.getBoundingClientRect()
+      const offsetParent = findFixedOffsetAncestor(el)
+      const offsetX = offsetParent ? offsetParent.getBoundingClientRect().left : 0
+      const offsetY = offsetParent ? offsetParent.getBoundingClientRect().top : 0
+
+      let top = anchorRect.bottom + 4 - offsetY
+      if (anchorRect.bottom + 4 + dropRect.height > window.innerHeight - 8) {
+        top = anchorRect.top - dropRect.height - 4 - offsetY
+      }
+      if (top + offsetY < 8) top = 8 - offsetY
+      let left = anchorRect.left - offsetX
+      if (left + offsetX + dropRect.width > window.innerWidth - 8) {
+        left = window.innerWidth - dropRect.width - 8 - offsetX
+      }
+      if (left + offsetX < 8) left = 8 - offsetX
+
+      setMenuPos((current) => (current && current.top === top && current.left === left ? current : { top, left }))
+    }
+    // 等菜单渲染完再量，否则拿不到高度。
+    const raf = requestAnimationFrame(measure)
+    window.addEventListener("resize", measure)
+    window.addEventListener("scroll", measure, true)
+    return () => {
+      cancelAnimationFrame(raf)
+      window.removeEventListener("resize", measure)
+      window.removeEventListener("scroll", measure, true)
+    }
+  }, [open, options.length])
+
   const openMenu = () => {
     if (disabled) return
-    if (buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect()
-      setUp(window.innerHeight - rect.bottom < 300)
-    }
     const selectedIndex = options.findIndex((option) => option.value === value)
     setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0)
     setOpen(true)
@@ -313,52 +352,55 @@ export function Select({
           <span className="text-[color:var(--ow-placeholder)]">{placeholder}</span>
         )}
       </SelectTrigger>
-      {open && (
-        <div
-          ref={listRef}
-          id={listId}
-          data-ow-part="list"
-          className={selectMenuVariants({ position: up ? "up" : "down" })}
-          role="listbox"
-        >
-          {options.map((option, index) => (
-            <button
-              key={option.value}
-              id={optionId(index)}
-              type="button"
-              role="option"
-              tabIndex={-1}
-              aria-selected={option.value === value}
-              data-index={index}
-              data-ow-role={option.value === value ? "selected" : "option"}
-              className={selectOptionVariants({ active: index === activeIndex })}
-              onMouseDown={(event) => event.preventDefault()}
-              onMouseEnter={() => setActiveIndex(index)}
-              onClick={() => pick(option.value)}
-            >
-              <span className="flex-1 min-w-0 flex flex-col gap-0.5">
-                <span
-                  className={cn(
-                    "overflow-hidden text-ellipsis whitespace-nowrap",
-                    option.value === value && "font-medium",
+      {open &&
+        createPortal(
+          <div
+            ref={listRef}
+            id={listId}
+            data-ow-part="list"
+            className={cn(selectMenuVariants(), "fixed z-[var(--ow-z-modal)]", !menuPos && "invisible")}
+            style={{ top: menuPos?.top ?? 0, left: menuPos?.left ?? 0 }}
+            role="listbox"
+          >
+            {options.map((option, index) => (
+              <button
+                key={option.value}
+                id={optionId(index)}
+                type="button"
+                role="option"
+                tabIndex={-1}
+                aria-selected={option.value === value}
+                data-index={index}
+                data-ow-role={option.value === value ? "selected" : "option"}
+                className={selectOptionVariants({ active: index === activeIndex })}
+                onMouseDown={(event) => event.preventDefault()}
+                onMouseEnter={() => setActiveIndex(index)}
+                onClick={() => pick(option.value)}
+              >
+                <span className="flex-1 min-w-0 flex flex-col gap-0.5">
+                  <span
+                    className={cn(
+                      "overflow-hidden text-ellipsis whitespace-nowrap",
+                      option.value === value && "font-medium",
+                    )}
+                  >
+                    {option.label}
+                  </span>
+                  {option.sub && (
+                    <span className="text-ow-fs-eyebrow font-normal leading-snug text-[color:var(--ow-text-3)] overflow-hidden text-ellipsis whitespace-nowrap">
+                      {option.sub}
+                    </span>
                   )}
-                >
-                  {option.label}
                 </span>
-                {option.sub && (
-                  <span className="text-ow-fs-eyebrow font-normal leading-snug text-[color:var(--ow-text-3)] overflow-hidden text-ellipsis whitespace-nowrap">
-                    {option.sub}
-                  </span>
+                {option.value === value && (
+                  <Check className="shrink-0 w-4 h-4 text-[color:var(--ow-text)]" aria-hidden="true" />
                 )}
-              </span>
-              {option.value === value && (
-                <Check className="shrink-0 w-4 h-4 text-[color:var(--ow-text)]" aria-hidden="true" />
-              )}
-            </button>
-          ))}
-          {footer}
-        </div>
-      )}
+              </button>
+            ))}
+            {footer}
+          </div>,
+          document.body,
+        )}
     </div>
   )
 }