@teamix-evo/ui 0.6.2 → 0.7.1

package/manifest.json

@@ -1150,6 +1150,11 @@
           "source": "src/components/tree/index.tsx",
           "targetAlias": "components",
           "targetName": "tree.tsx"
+        },
+        {
+          "source": "src/components/tree/utils.ts",
+          "targetAlias": "components",
+          "targetName": "utils.ts"
         }
       ],
       "meta": "src/components/tree/meta.md",
@@ -1372,7 +1377,7 @@
         }
       ],
       "meta": "src/components/tree-select/meta.md",
-      "registryDependencies": ["cn", "popover", "checkbox"],
+      "registryDependencies": ["cn", "popover", "checkbox", "tree"],
       "dependencies": {
         "lucide-react": "^0.460.0",
         "class-variance-authority": "^0.7.1"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamix-evo/ui",
-  "version": "0.6.2",
+  "version": "0.7.1",
   "description": "Source-injected UI components for Teamix Evo (shadcn-based, antd capabilities)",
   "type": "module",
   "files": [
@@ -51,9 +51,9 @@
     "vite": "^5.4.0",
     "vite-tsconfig-paths": "^6.1.1",
     "zod": "^3",
+    "@teamix-evo/tokens": "^0.8.1",
     "@teamix-evo/eslint-config": "0.2.3",
-    "@teamix-evo/registry": "0.12.0",
-    "@teamix-evo/tokens": "^0.7.3"
+    "@teamix-evo/registry": "0.12.0"
   },
   "publishConfig": {
     "access": "public",

package/src/components/data-table/index.tsx

@@ -289,12 +289,6 @@ function alignClass(align?: DataTableColumn<unknown>['align']) {
   return undefined;
 }
 
-function widthStyle(col: DataTableColumn<unknown>): React.CSSProperties {
-  const w = col.size ?? col.width;
-  if (w === undefined) return {};
-  return { width: typeof w === 'number' ? `${w}px` : w };
-}
-
 /** 把 DataTableColumn 适配为 TanStack ColumnDef；同时按 fixed 重排（左→中→右）以满足锁列 sticky 计算。 */
 function adaptColumns<T>(
   columns: DataTableColumn<T>[],
@@ -1222,7 +1216,7 @@ function DataTable<T = Record<string, unknown>>(props: DataTableProps<T>) {
           data-col-hover={isColHover ? '' : undefined}
           className={cn(
             alignClass(cellMeta?.align),
-            isFixed && 'bg-background',
+            isFixed && 'bg-card group-hover/row:bg-row-hover',
             isColHover && 'bg-muted/30',
           )}
           onMouseEnter={crossline ? () => setHoveredColId(colId) : undefined}

package/src/components/data-table/stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { RefreshCw, Rows3, Settings2 } from 'lucide-react';
+import { ArrowUpDown, RotateCw, Settings } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/avatar';
@@ -380,19 +380,19 @@ export const Full: Story = {
           addonAfter={
             <div className="flex items-center gap-1">
               <Button variant="outline" size="icon">
-                <RefreshCw />
+                <RotateCw className="text-muted-foreground" />
               </Button>
               <Button
                 variant="outline"
                 size="icon"
                 onClick={() => setSize(size === 'sm' ? 'md' : 'sm')}
               >
-                <Rows3 />
+                <ArrowUpDown className="text-muted-foreground" />
               </Button>
               <Popover>
                 <PopoverTrigger asChild>
                   <Button variant="outline" size="icon">
-                    <Settings2 />
+                    <Settings className="text-muted-foreground" />
                   </Button>
                 </PopoverTrigger>
                 <PopoverContent align="end" className="w-40 p-2">

package/src/components/date-picker/index.tsx

@@ -50,7 +50,6 @@ import { Spinner } from '@/components/spinner';
 import {
   TimePickerPanel,
   parseTime,
-  formatTime,
   triggerVariants,
   type TimeParts,
   type TriggerSize,

package/src/components/filter-bar/index.tsx

@@ -470,7 +470,7 @@ function FilterBarSearchKey({ options, className }: FilterBarSearchKeyProps) {
       <SelectTrigger
         size="sm"
         className={cn(
-          'h-full rounded-none border-0 border-r border-input bg-transparent shadow-none focus-visible:ring-0',
+          'h-full rounded-none border-0 border-r border-r-input bg-transparent shadow-none focus-visible:ring-0 focus:border-r-input data-[state=open]:border-r-input',
           className,
         )}
       >

package/src/components/page-header/index.tsx

@@ -166,7 +166,7 @@ const PageHeaderDescription = React.forwardRef<
   <p
     ref={ref}
     data-slot="page-header-description"
-    className={cn('my-2 text-xs text-muted-foreground', className)}
+    className={cn('mt-2 text-xs text-muted-foreground', className)}
     {...props}
   />
 ));

package/src/components/page-header/stories.tsx

@@ -39,8 +39,94 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-/** 完整版页头：面包屑 + 帮助链接 + 返回 + 主图标 + 标题（含 ⓘ） + 描述 + 多操作 + 底部信息。 */
+/** 仅标题：最基础的页头形态，只包含一个标题。 */
 export const Default: Story = {
+  render: () => (
+    <PageHeader>
+      <PageHeaderContent>
+        <PageHeaderHeading>
+          <PageHeaderTitle>页面标题</PageHeaderTitle>
+        </PageHeaderHeading>
+      </PageHeaderContent>
+    </PageHeader>
+  ),
+};
+
+/** 标题 + 描述：标题下方附加一行描述文字。 */
+export const WithDescription: Story = {
+  render: () => (
+    <PageHeader>
+      <PageHeaderContent>
+        <div className="flex flex-col">
+          <PageHeaderHeading>
+            <PageHeaderTitle>页面标题</PageHeaderTitle>
+          </PageHeaderHeading>
+          <PageHeaderDescription>
+            页面描述页面描述页面描述页面描述页面描述页面描述页面描述
+          </PageHeaderDescription>
+        </div>
+      </PageHeaderContent>
+    </PageHeader>
+  ),
+};
+
+/** 仅面包屑：只有面包屑导航，无标题。 */
+export const OnlyBreadcrumb: Story = {
+  render: () => (
+    <PageHeader>
+      <PageHeaderNav>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">首页</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">实例列表</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>实例详情</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </PageHeaderNav>
+    </PageHeader>
+  ),
+};
+
+/** 面包屑 + 标题：面包屑导航 + 标题，常见于二级页面。 */
+export const WithBreadcrumb: Story = {
+  render: () => (
+    <PageHeader>
+      <PageHeaderNav>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">首页</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">实例列表</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>实例详情</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </PageHeaderNav>
+      <PageHeaderContent>
+        <PageHeaderHeading>
+          <PageHeaderTitle>实例详情</PageHeaderTitle>
+        </PageHeaderHeading>
+      </PageHeaderContent>
+    </PageHeader>
+  ),
+};
+
+/** 完整版页头：面包屑 + 帮助链接 + 返回 + 主图标 + 标题（含 ⓘ） + 描述 + 多操作。 */
+export const Full: Story = {
   render: () => (
     <PageHeader>
       <PageHeaderNav>

package/src/components/page-shell/index.tsx

@@ -93,7 +93,7 @@ function PageShell({
       // 受限容器（如 storybook `LayoutSandbox`）通过外级注入 `min-height: 0; height: 100%` 重置。
       // 说明：传入的 sidebar 如果是默认 collapsible="offcanvas"，其内部使用 `position: fixed`、
       // 高度 100svh，适用于全屏页面；在受限容器中需使用 `collapsible="none"` 退出 fixed 布局。
-      className={cn('!flex-col', className)}
+      className={cn('!flex-col !h-svh', className)}
       style={
         {
           '--sidebar-width': sidebarWidth,
@@ -107,7 +107,7 @@ function PageShell({
         {sidebar}
         <SidebarInset
           data-slot="page-shell-content"
-          className={cn('!min-h-0 overflow-y-auto', bgClass)}
+          className={cn('!min-h-0 overflow-hidden', bgClass)}
         >
           {children}
         </SidebarInset>

package/src/components/table/index.tsx

@@ -154,7 +154,7 @@ function Table({
 // ─── TableHeader ────────────────────────────────────────────────────────────
 
 function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
-  const { stickyHeader, bordered, size } = useTableContext();
+  const { stickyHeader } = useTableContext();
   return (
     <thead
       data-slot="table-header"
@@ -219,8 +219,8 @@ const TableRow = React.forwardRef<
       className={cn(
         'border-b border-border-subtle transition-colors',
         hoverable &&
-          'hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
-        crossline && 'group/row',
+          'group/row hover:bg-row-hover has-aria-expanded:bg-row-hover data-[state=selected]:bg-muted',
+        crossline && !hoverable && 'group/row',
         className,
       )}
       {...props}