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

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

@@ -18,6 +18,7 @@ import {
   Folder,
   Grid,
   Icon,
+  Memo,
   More,
   Package,
   PanelSidebar,
@@ -28,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"
@@ -111,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）。
    *
@@ -346,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">
@@ -369,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">
@@ -569,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 && (
@@ -614,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
                 ? ([

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>
   )
 }