one-design-next 0.0.97 → 0.0.98

package/dist/chat-item/style/index.css

@@ -5,29 +5,51 @@
  * 左侧 12px 是正文 padding，不是 … 的 inset。
  * hover 腾位：6 + 24 + 6 = 36。
  */
+[data-odn-chat-item] {
+  display: block;
+  width: 100%;
+  min-width: 0;
+}
 [data-odn-chat-item]:hover [data-odn-chat-item-menu-trigger], [data-odn-chat-item]:has(:focus-visible) [data-odn-chat-item-menu-trigger] {
   opacity: 1;
   pointer-events: auto;
 }
-[data-odn-chat-item]:hover [data-odn-chat-item-btn], [data-odn-chat-item]:has(:focus-visible) [data-odn-chat-item-btn], [data-odn-chat-item]:has([data-odn-chat-item-menu-trigger-open]) [data-odn-chat-item-btn] {
+[data-odn-chat-item] {
+  /* 无时间才加 36；有时间则占位已在，避免标题变宽、离开时时间从行外闪回 */
+}
+[data-odn-chat-item]:hover [data-odn-chat-item-btn]:not(:has([data-odn-chat-item-time])), [data-odn-chat-item]:has(:focus-visible) [data-odn-chat-item-btn]:not(:has([data-odn-chat-item-time])), [data-odn-chat-item]:has([data-odn-chat-item-menu-trigger-open]) [data-odn-chat-item-btn] {
   padding-right: 36px;
 }
 [data-odn-chat-item] {
-  /*
-   * 同槽让位：时间瞬时退出布局（无过渡，避免与 … 叠影）。
-   * 无 status 时收掉 trailing 左间距，避免标题与 … 之间空档。
-   */
+  /* hover：只隐身，宽度留下。收宽度会让移出时时间从行外闪回 */
+}
+[data-odn-chat-item]:hover [data-odn-chat-item-time], [data-odn-chat-item]:has(:focus-visible) [data-odn-chat-item-time] {
+  opacity: 0;
+  pointer-events: none;
+}
+[data-odn-chat-item] {
+  /* hover + 状态 + 时间：同一颗状态 relative 右移，占位不收，移出不飞 */
+}
+[data-odn-chat-item]:hover:has([data-odn-chat-item-time]):not([data-odn-chat-item-time-yield]) [data-odn-chat-item-status], [data-odn-chat-item]:has(:focus-visible):has([data-odn-chat-item-time]):not([data-odn-chat-item-time-yield]) [data-odn-chat-item-status] {
+  position: relative;
+  z-index: 1;
+  left: max(0px, 6px + var(--odn-chat-item-time-w, 0px) - 24px);
 }
-[data-odn-chat-item]:hover [data-odn-chat-item-time], [data-odn-chat-item]:has(:focus-visible) [data-odn-chat-item-time], [data-odn-chat-item]:has([data-odn-chat-item-menu-trigger-active]) [data-odn-chat-item-time], [data-odn-chat-item]:has([data-odn-chat-item-menu-trigger-open]) [data-odn-chat-item-time] {
+[data-odn-chat-item] {
+  /* 选中 / 菜单开：时间退出布局，右侧 36 给 …。
+   * 标记打在行根上，不依赖 :has(Dropdown 触发器)——触发器属性不一定能被 :has 看到。 */
+}
+[data-odn-chat-item][data-odn-chat-item-time-yield] [data-odn-chat-item-time] {
   opacity: 0;
   width: 0;
   min-width: 0;
   max-width: 0;
+  flex: 0 0 0;
   margin: 0;
   overflow: hidden;
   pointer-events: none;
 }
-[data-odn-chat-item]:hover [data-odn-chat-item-trailing]:not(:has([data-odn-chat-item-status])), [data-odn-chat-item]:has(:focus-visible) [data-odn-chat-item-trailing]:not(:has([data-odn-chat-item-status])), [data-odn-chat-item]:has([data-odn-chat-item-menu-trigger-active]) [data-odn-chat-item-trailing]:not(:has([data-odn-chat-item-status])), [data-odn-chat-item]:has([data-odn-chat-item-menu-trigger-open]) [data-odn-chat-item-trailing]:not(:has([data-odn-chat-item-status])) {
+[data-odn-chat-item][data-odn-chat-item-time-yield] [data-odn-chat-item-trailing]:not(:has([data-odn-chat-item-status])) {
   padding-left: 0;
 }
 
@@ -35,6 +57,12 @@
   border-radius: 6px;
 }
 
+/* 选中底与 hover / 按下同一层 */
+[data-odn-chat-item]:has([data-odn-chat-item-active]) > [data-odn-hover-fill-bg] {
+  background: var(--odn-color-black-4);
+  transform: scale(1);
+}
+
 [data-odn-chat-item-inner] {
   position: relative;
   display: block;
@@ -58,7 +86,7 @@
   padding: 0;
   border: none;
   background: transparent;
-  color: var(--odn-color-black-12);
+  color: var(--odn-color-black-10);
   font: inherit;
   font-size: 14px;
   line-height: inherit;
@@ -83,34 +111,20 @@
   transition: color 0.15s, background 0.15s;
   color: var(--odn-color-black-10);
   font: inherit;
-  /* active 时在半透明背景下垫一层不透明底，遮挡 HoverFill 的 hover 层，避免叠色。 */
-}
-[data-odn-chat-item-btn]::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: var(--odn-color-bg-elevated);
-  z-index: -1;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.15s;
 }
 [data-odn-chat-item-btn]:focus-visible {
   outline: none;
-  background: rgba(33, 34, 38, 0.05);
-  color: var(--odn-color-black-12);
+  background: transparent;
+  color: var(--odn-color-black-10);
 }
 [data-odn-chat-item-btn][data-odn-chat-item-active] {
   padding-right: 36px;
-  background: var(--odn-color-black-5);
+  background: transparent;
   color: var(--odn-color-black-12);
-}
-[data-odn-chat-item-btn][data-odn-chat-item-active]::before {
-  opacity: 1;
+  font-weight: 500;
 }
 [data-odn-chat-item-btn][data-odn-chat-item-active]:focus-visible {
-  background: var(--odn-color-black-5);
+  background: transparent;
 }
 
 [data-odn-chat-item-label] {
@@ -152,6 +166,7 @@
 
 /* 状态 / 时间：右对齐；类型 icon 在标题旁，不在此区 */
 [data-odn-chat-item-trailing] {
+  position: relative;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;

package/dist/chat-list/index.d.ts

@@ -1,19 +1,38 @@
 import { type ReactNode } from 'react';
 import { type ChatItemProps } from '../chat-item';
 import './style';
+/** 系统「未分组」默认 id；不在「分组」模块内渲染。 */
+export declare const CHAT_LIST_UNGROUPED_ID = "ungrouped";
 /** 按会话时间筛选（面板不含时间组；`filterTime` 仅受控 API）。 */
 export type ChatListFilterTime = 'all' | 'today' | '7d' | '30d';
 /** 按会话类型筛选：全部 / AI 任务 / 人工客服。 */
 export type ChatListFilterType = 'all' | 'ai' | 'human';
 /** 按会话状态筛选：全部 / 生成中 / 待回复 / 未读 / 任务报错。 */
 export type ChatListFilterStatus = 'all' | 'generating' | 'waiting' | 'unread' | 'error';
-export type ChatListItem = Pick<ChatItemProps, 'id' | 'title' | 'active' | 'type' | 'status' | 'pinned' | 'time'>;
+export interface ChatListGroup {
+    id: string;
+    title: string;
+    /** 是否允许重命名。默认 `true`。系统「未分组」建议 `false`。 */
+    renamable?: boolean;
+    /**
+     * 置顶分组：仍在「分组」模块内，排到该模块最前；仍带文件夹 icon。
+     */
+    pinned?: boolean;
+}
+export type ChatListItem = Pick<ChatItemProps, 'id' | 'title' | 'active' | 'type' | 'status' | 'pinned' | 'time' | 'groupId'>;
 export interface ChatListProps {
     items: ChatListItem[];
     /** 列表标题。默认「对话」。 */
     title?: ReactNode;
+    /**
+     * 自定义分组。传入后按「置顶区 → 分组模块 → 未分组」编排。
+     * 标题栏搜索默认关闭，需 `showSearch`。
+     * 不传则保持「置顶 / 最近」分区。
+     */
+    groups?: ChatListGroup[];
     /**
      * 置顶分区标题。视觉同组头，无交互。传 `null` 隐藏。默认「置顶」。
+     * 传入 `groups` 时置顶区默认不显示标题。
      */
     pinnedSectionTitle?: ReactNode | null;
     /**
@@ -21,6 +40,12 @@ export interface ChatListProps {
      * 传 `null` 始终隐藏。默认「最近」。
      */
     recentSectionTitle?: ReactNode | null;
+    /** 「分组」模块行文案。默认「分组」。 */
+    groupsSectionTitle?: ReactNode;
+    /** 「未分组」标题。若 `groups` 中含未分组项则优先用其 title。默认「未分组」。 */
+    ungroupedTitle?: string;
+    /** 未分组系统 id。默认 `ungrouped`。 */
+    ungroupedGroupId?: string;
     /**
      * 受控：时间筛选。筛选面板不含时间组，仅 API 可用。
      */
@@ -42,10 +67,23 @@ export interface ChatListProps {
     /** 非受控：初始状态筛选。默认 `'all'`。 */
     defaultFilterStatus?: ChatListFilterStatus;
     onFilterStatusChange?: (value: ChatListFilterStatus) => void;
+    /** 受控：搜索关键字（仅 `groups` 传入且 `showSearch` 时生效） */
+    search?: string;
+    /** 非受控：初始搜索关键字 */
+    defaultSearch?: string;
+    onSearchChange?: (value: string) => void;
+    /**
+     * 是否在标题栏展示搜索。仅 `groups` 传入时有效。默认隐藏。
+     */
+    showSearch?: boolean;
     /** 受控：筛选选择器是否展开 */
     filterOpen?: boolean;
     defaultFilterOpen?: boolean;
     onFilterOpenChange?: (open: boolean) => void;
+    /**
+     * 是否渲染空的自定义分组 / 空的未分组。默认 `true`。
+     */
+    showEmptyGroups?: boolean;
     /** 空列表时的占位 */
     empty?: ReactNode;
     actionMenuZIndex?: number | string;
@@ -55,12 +93,33 @@ export interface ChatListProps {
     onItemClick?: ChatItemProps['onClick'];
     onRename?: ChatItemProps['onRename'];
     onPin?: ChatItemProps['onPin'];
+    onMoveToGroup?: ChatItemProps['onMoveToGroup'];
     onDelete?: ChatItemProps['onDelete'];
+    /**
+     * 新增分组。组件会生成 `{ id, title: '新分组' }` 并回调，随后进入重命名。
+     */
+    onAddGroup?: (group: ChatListGroup) => void;
+    /** 重命名分组 */
+    onRenameGroup?: (id: string, title: string) => void;
+    /** 置顶 / 取消置顶分组（组块在「分组」模块内排序） */
+    onPinGroup?: (id: string, pinned: boolean) => void;
+    /**
+     * 删除分组。确认后回调；业务侧应将组内会话移入未分组并移除该组。
+     */
+    onDeleteGroup?: (id: string) => void;
+    /** 在指定分组（或未分组）内新建对话 */
+    onCreateConversation?: (groupId: string) => void;
     /** 自定义行渲染。默认渲染 ChatItem。 */
     renderItem?: (item: ChatListItem, node: ReactNode) => ReactNode;
+    /** 自定义组头。默认使用 ChatGroup 标题。 */
+    renderGroupHeader?: (group: ChatListGroup, defaultTitle: ReactNode) => ReactNode;
+    collapsedGroupIds?: string[];
+    defaultCollapsedGroupIds?: string[];
+    onCollapsedGroupIdsChange?: (ids: string[]) => void;
     /**
      * 将「最近」列表包进自定义滚动容器。
      * 标题栏与置顶区始终留在外侧，不进入该容器。
+     * 传入 `groups` 时忽略。
      */
     renderRestScroll?: (content: ReactNode) => ReactNode;
 }
@@ -70,7 +129,7 @@ export declare function matchChatListFilterTime(time: ChatListItem['time'], filt
 export declare function matchChatListFilterType(type: ChatListItem['type'], filter: ChatListFilterType): boolean;
 /** 按状态筛选项判断会话是否命中。无 `status` 时仅在「全部」下保留。 */
 export declare function matchChatListFilterStatus(status: ChatListItem['status'], filter: ChatListFilterStatus): boolean;
-export declare function ChatList({ items, title, pinnedSectionTitle, recentSectionTitle, filterTime: filterTimeProp, defaultFilterTime, filterType: filterTypeProp, defaultFilterType, onFilterTypeChange, filterStatus: filterStatusProp, defaultFilterStatus, onFilterStatusChange, filterOpen: filterOpenProp, defaultFilterOpen, onFilterOpenChange, empty, actionMenuZIndex, filterMenuZIndex, className, onItemClick, onRename, onPin, onDelete, renderItem, renderRestScroll, }: ChatListProps): import("react").JSX.Element;
+export declare function ChatList({ items, title, groups, pinnedSectionTitle, recentSectionTitle, groupsSectionTitle, ungroupedTitle, ungroupedGroupId, filterTime: filterTimeProp, defaultFilterTime, filterType: filterTypeProp, defaultFilterType, onFilterTypeChange, filterStatus: filterStatusProp, defaultFilterStatus, onFilterStatusChange, search: searchProp, defaultSearch, onSearchChange, showSearch, filterOpen: filterOpenProp, defaultFilterOpen, onFilterOpenChange, showEmptyGroups, empty, actionMenuZIndex, filterMenuZIndex, className, onItemClick, onRename, onPin, onMoveToGroup, onDelete, onAddGroup, onRenameGroup, onPinGroup, onDeleteGroup, onCreateConversation, renderItem, renderGroupHeader, collapsedGroupIds: collapsedProp, defaultCollapsedGroupIds, onCollapsedGroupIdsChange, renderRestScroll, }: ChatListProps): import("react").JSX.Element;
 export declare namespace ChatList {
     var displayName: string;
 }