@yh-ui/components 0.1.16 → 0.1.21

package/dist/ai-conversations/src/ai-conversations.vue

@@ -15,7 +15,7 @@
           </svg>
         </slot>
         <span :class="ns.e('add-text')">
-          <slot name="add-text">新对话</slot>
+          <slot name="add-text">{{ t('ai.conversations.newConversation') }}</slot>
         </span>
       </button>
     </div>
@@ -29,14 +29,20 @@
     </div>
 
     <!-- Conversation List with groups -->
-    <div v-else :class="ns.e('list')">
+    <div
+      v-else
+      ref="virtualScrollContainerRef"
+      :class="[ns.e('list'), ns.is('virtual', virtualScroll)]"
+      :style="listStyle"
+      @scroll.passive="virtualScroll ? handleVirtualScroll($event) : void 0"
+    >
       <!-- 时间分组渲染 -->
       <template v-if="groupedData.length > 0">
         <template v-for="group in groupedData" :key="group.label">
           <!-- 分组标题 -->
           <div :class="ns.e('group-label')">
             <slot name="group-label" :label="group.label">
-              {{ getGroupLabelText(group.label) }}
+              {{ t(`ai.conversations.${group.label}`) }}
             </slot>
           </div>
 
@@ -90,7 +96,7 @@
                 <!-- 置顶/取消置顶 -->
                 <span
                   :class="[ns.e('action-btn'), ns.is('active', !!item.pinned)]"
-                  :title="item.pinned ? '\u53D6\u6D88\u7F6E\u9876' : '\u7F6E\u9876'"
+                  :title="item.pinned ? t('ai.conversations.unpin') : t('ai.conversations.pin')"
                   @click.stop="handlePin(item)"
                 >
                   <svg
@@ -150,21 +156,95 @@
 
       <!-- Flat 模式（未分组）-->
       <template v-else-if="data.length > 0 && !showGroups">
-        <div
-          v-for="item in data"
-          :key="item.id"
-          :class="[ns.e('item'), ns.is('active', activeId === item.id)]"
-          @click="handleClick(item)"
-        >
-          <div :class="ns.e('item-content')">
-            <span :class="ns.e('title')" :title="item.title">{{ item.title }}</span>
+        <!-- 虚拟滚动模式 -->
+        <template v-if="virtualScroll">
+          <!-- 外层：position:relative + 总高度，产生真实滚动条 -->
+          <div :style="{
+  position: 'relative',
+  height: totalHeight + 'px'
+}">
+            <!-- 内层：position:absolute + top:offsetY，定位到当前可见区域 -->
+            <div :style="{
+  position: 'absolute',
+  top: offsetY + 'px',
+  left: 0,
+  right: 0
+}">
+              <div
+                v-for="item in visibleItems"
+                :key="item.id"
+                :class="[ns.e('item'), ns.is('active', activeId === item.id), ns.is('pinned', !!item.pinned)]"
+                :style="{
+  height: virtualScrollItemHeight + 'px'
+}"
+                @click="handleClick(item)"
+              >
+                <span v-if="item.pinned" :class="ns.e('pin-icon')">
+                  <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor">
+                    <path
+                      d="M16 12V4h1a1 1 0 0 0 0-2H7a1 1 0 0 0 0 2h1v8l-2 2v2h5v5l1 1 1-1v-5h5v-2l-2-2z"
+                    />
+                  </svg>
+                </span>
+                <div :class="ns.e('item-content')">
+                  <span :class="ns.e('title')" :title="item.title">{{ item.title }}</span>
+                  <span v-if="item.updatedAt" :class="ns.e('time')">{{
+                    formatTime(item.updatedAt)
+                  }}</span>
+                </div>
+                <div
+                  :class="ns.e('actions')"
+                  @click.stop
+                  v-if="!editingId || editingId !== item.id"
+                >
+                  <span
+                    :class="[ns.e('action-btn'), ns.is('active', !!item.pinned)]"
+                    @click.stop="handlePin(item)"
+                  >
+                    <svg
+                      viewBox="0 0 24 24"
+                      width="13"
+                      height="13"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
+                      <path
+                        d="M16 12V4h1a1 1 0 0 0 0-2H7a1 1 0 0 0 0 2h1v8l-2 2v2h5v5l1 1 1-1v-5h5v-2l-2-2z"
+                      />
+                    </svg>
+                  </span>
+                  <span :class="ns.e('action-btn')" @click.stop="handleDelete(item)">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <polyline points="3 6 5 6 21 6"></polyline>
+                      <path
+                        d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+                      ></path>
+                    </svg>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+        <!-- 普通模式 -->
+        <template v-else>
+          <div
+            v-for="item in data"
+            :key="item.id"
+            :class="[ns.e('item'), ns.is('active', activeId === item.id)]"
+            @click="handleClick(item)"
+          >
+            <div :class="ns.e('item-content')">
+              <span :class="ns.e('title')" :title="item.title">{{ item.title }}</span>
+            </div>
           </div>
-        </div>
+        </template>
       </template>
 
       <!-- Empty State -->
       <div v-if="!loading && data.length === 0" :class="ns.e('empty')">
-        <slot name="empty">暂无对话记录</slot>
+        <slot name="empty">{{ t("ai.conversations.noData") }}</slot>
       </div>
     </div>
   </div>
@@ -172,7 +252,7 @@
 
 <script setup>
 import { ref, computed, nextTick } from "vue";
-import { useNamespace, useLocale } from "@yh-ui/hooks";
+import { useNamespace, useLocale, useVirtualScroll } from "@yh-ui/hooks";
 import { useComponentTheme } from "@yh-ui/theme";
 import { aiConversationsProps, aiConversationsEmits } from "./ai-conversations";
 defineOptions({
@@ -186,26 +266,28 @@ const { themeStyle } = useComponentTheme("ai-conversations", props.themeOverride
 const editingId = ref(null);
 const editTitle = ref("");
 const inputRef = ref();
-const showGroups = computed(() => props.grouped !== false);
-const GROUP_LABEL_MAP = {
-  pinned: "\u5DF2\u7F6E\u9876",
-  today: "\u4ECA\u5929",
-  last7Days: "\u6700\u8FD1 7 \u5929",
-  last30Days: "\u6700\u8FD1 30 \u5929",
-  earlier: "\u66F4\u65E9"
-};
-const GROUP_LABEL_MAP_EN = {
-  pinned: "Pinned",
-  today: "Today",
-  last7Days: "Last 7 Days",
-  last30Days: "Last 30 Days",
-  earlier: "Earlier"
-};
-const getGroupLabelText = (label) => {
-  const locale = t("locale") || "zh-CN";
-  const map = locale.startsWith("zh") ? GROUP_LABEL_MAP : GROUP_LABEL_MAP_EN;
-  return map[label] ?? label;
-};
+const showGroups = computed(() => props.grouped !== false && !props.virtualScroll);
+const {
+  visibleItems,
+  totalHeight,
+  offsetY,
+  onScroll: handleVirtualScroll,
+  scrollToIndex
+} = useVirtualScroll({
+  itemHeight: computed(() => props.virtualScrollItemHeight),
+  containerHeight: computed(() => props.virtualScrollHeight),
+  overscan: computed(() => props.virtualScrollOverscan),
+  items: computed(() => props.data)
+});
+const listStyle = computed(() => {
+  if (!props.virtualScroll) return {};
+  return {
+    height: `${props.virtualScrollHeight}px`,
+    maxHeight: `${props.virtualScrollHeight}px`,
+    overflowY: "auto",
+    position: "relative"
+  };
+});
 const getGroupKey = (item) => {
   if (item.pinned) return "pinned";
   const diff = Date.now() - item.updatedAt;
@@ -264,6 +346,16 @@ const formatTime = (ts) => {
   }
   return `${d.getMonth() + 1}/${d.getDate()}`;
 };
+const scrollToItem = (id) => {
+  const index = props.data.findIndex((item) => item.id === id);
+  if (index !== -1) {
+    scrollToIndex(index);
+  }
+};
+defineExpose({
+  scrollToItem,
+  scrollToIndex
+});
 </script>
 
 <style>
@@ -743,7 +835,7 @@ html.dark {
   color: var(--yh-text-color-primary);
   cursor: pointer;
   transition: all var(--yh-transition-duration);
-  gap: 8px;
+  gap: 4px;
 }
 .yh-ai-conversations__add-btn:hover {
   border-color: var(--yh-color-primary);
@@ -757,12 +849,21 @@ html.dark {
 
 .yh-ai-conversations__list {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
   padding: 12px;
   display: flex;
   flex-direction: column;
   gap: 4px;
+  position: relative;
+}
+.yh-ai-conversations__list.is-virtual {
+  flex: none;
+  display: block;
+  padding: 0;
+  position: relative;
 }
+
 .yh-ai-conversations__list::-webkit-scrollbar {
   width: 4px;
 }
@@ -781,11 +882,17 @@ html.dark {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: 50px;
+  height: auto;
   padding: var(--yh-ai-conversations-item-padding, 12px 16px);
+  margin: 0 4px 8px;
   border-radius: var(--yh-border-radius-base);
   cursor: pointer;
-  transition: background-color var(--yh-transition-duration);
+  transition: all var(--yh-transition-duration);
   background-color: transparent;
+  position: relative;
+  box-sizing: border-box;
+  flex-shrink: 0;
 }
 .yh-ai-conversations__item:hover {
   background-color: var(--yh-ai-conversations-hover-bg-color, var(--yh-bg-color-page));
@@ -797,9 +904,23 @@ html.dark {
 .yh-ai-conversations__item.is-active {
   background-color: var(--yh-ai-conversations-active-bg-color, var(--yh-color-primary-light-9));
 }
+.yh-ai-conversations__item.is-active::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 20%;
+  bottom: 20%;
+  width: 3px;
+  background-color: var(--yh-color-primary);
+  border-radius: 0 2px 2px 0;
+}
 .yh-ai-conversations__item.is-active .yh-ai-conversations__title {
   color: var(--yh-ai-conversations-active-text-color, var(--yh-color-primary));
-  font-weight: 500;
+  font-weight: 600;
+}
+.yh-ai-conversations__item.is-active .yh-ai-conversations__time,
+.yh-ai-conversations__item.is-active .yh-ai-conversations__excerpt {
+  color: var(--yh-color-primary-light-3);
 }
 
 .yh-ai-conversations__item-content {
@@ -807,7 +928,7 @@ html.dark {
   flex-direction: column;
   flex: 1;
   min-width: 0;
-  gap: 4px;
+  gap: 8px;
 }
 
 .yh-ai-conversations__title {
@@ -846,7 +967,7 @@ html.dark {
 .yh-ai-conversations__actions {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
   opacity: 0;
   visibility: hidden;
   transition: all var(--yh-transition-duration);
@@ -898,8 +1019,17 @@ html.dark {
 }
 
 .yh-ai-conversations__item.is-pinned {
-  background-color: var(--yh-color-primary-light-9);
-  border-left: 2px solid var(--yh-color-primary-light-4);
+  background-color: var(--yh-ai-conversations-hover-bg-color, var(--yh-bg-color-page));
+}
+.yh-ai-conversations__item.is-pinned::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 25%;
+  bottom: 25%;
+  width: 3px;
+  background-color: var(--yh-color-primary-light-3);
+  border-radius: 0 2px 2px 0;
 }
 
 .yh-ai-conversations__action-btn.is-active {

package/dist/ai-conversations/src/ai-conversations.vue.d.ts

@@ -1,6 +1,7 @@
 import type { AiConversation } from '@yh-ui/hooks';
+type GroupKey = 'pinned' | 'today' | 'last7Days' | 'last30Days' | 'earlier';
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {
-    label: any;
+    label: GroupKey;
 }, __VLS_11: {}, __VLS_13: {}, __VLS_15: {};
 type __VLS_Slots = {} & {
     'add-icon'?: (props: typeof __VLS_1) => any;
@@ -36,12 +37,86 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
-    themeOverrides: import("@yh-ui/theme").AiConversationsThemeVars;
+    virtualScroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    virtualScrollHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    virtualScrollItemHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    virtualScrollOverscan: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, {
+    scrollToItem: (id: string) => void;
+    scrollToIndex: (index: number) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (conversation: AiConversation) => void;
+    edit: (conversation: AiConversation, newTitle: string) => void;
+    pin: (conversation: AiConversation, pinned: boolean) => void;
+    click: (conversation: AiConversation) => void;
+    "update:activeId": (id: string) => void;
+    create: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: import("vue").PropType<AiConversation[]>;
+        default: () => never[];
+    };
+    activeId: {
+        type: StringConstructor;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    themeOverrides: {
+        type: import("vue").PropType<import("@yh-ui/theme").AiConversationsThemeVars>;
+        default: undefined;
+    };
+    grouped: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    virtualScroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    virtualScrollHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    virtualScrollItemHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    virtualScrollOverscan: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{
+    onDelete?: ((conversation: AiConversation) => any) | undefined;
+    onEdit?: ((conversation: AiConversation, newTitle: string) => any) | undefined;
+    onPin?: ((conversation: AiConversation, pinned: boolean) => any) | undefined;
+    onClick?: ((conversation: AiConversation) => any) | undefined;
+    "onUpdate:activeId"?: ((id: string) => any) | undefined;
+    onCreate?: (() => any) | undefined;
+}>, {
     data: AiConversation[];
     loading: boolean;
+    themeOverrides: import("@yh-ui/theme").AiConversationsThemeVars;
+    virtualScroll: boolean;
     activeId: string;
     grouped: boolean;
+    virtualScrollHeight: number;
+    virtualScrollItemHeight: number;
+    virtualScrollOverscan: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;