@yh-ui/components 0.1.17 → 0.1.22

package/dist/ai-thought-chain/src/ai-thought-chain.vue

@@ -2,17 +2,56 @@
 import { useNamespace, useLocale } from "@yh-ui/hooks";
 import { ref, computed, watch } from "vue";
 import { YhIcon } from "../../icon";
-import { aiThoughtChainProps } from "./ai-thought-chain";
+import MarkdownIt from "markdown-it";
+import { aiThoughtChainProps, aiThoughtChainEmits } from "./ai-thought-chain";
 import { useComponentTheme } from "@yh-ui/theme";
 defineOptions({
   name: "YhAiThoughtChain"
 });
 const props = defineProps(aiThoughtChainProps);
+const emit = defineEmits(aiThoughtChainEmits);
 const ns = useNamespace("ai-thought-chain");
 const { t } = useLocale();
 const { themeStyle } = useComponentTheme("ai-thought-chain", props.themeOverrides);
 const isExpanded = ref(false);
+const md = new MarkdownIt({
+  html: false,
+  linkify: true,
+  typographer: true
+});
 const itemExpandedStates = ref([]);
+const internalItems = ref([]);
+const draggedIndex = ref(null);
+const dragOverIndex = ref(null);
+const itemsToUse = computed(() => {
+  if (props.editable || props.draggable) {
+    return internalItems.value.length > 0 ? internalItems.value : props.items;
+  }
+  return props.items;
+});
+watch(
+  () => props.items,
+  (newItems) => {
+    if (Array.isArray(newItems)) {
+      internalItems.value = [...newItems];
+    } else {
+      internalItems.value = [];
+    }
+  },
+  { immediate: true, deep: true }
+);
+const ensureInternalItems = () => {
+  if (!internalItems.value.length && props.items && props.items.length) {
+    internalItems.value = [...props.items];
+  }
+};
+const currentProgress = computed(() => {
+  if (!itemsToUse.value || itemsToUse.value.length === 0) return 0;
+  const completedCount = itemsToUse.value.filter(
+    (item) => item.status === "success" || item.status === "complete"
+  ).length;
+  return Math.round(completedCount / itemsToUse.value.length * 100);
+});
 const currentStatus = computed(() => {
   if (props.status !== "none") return props.status;
   if (props.thinking === true) return "thinking";
@@ -21,8 +60,12 @@ const currentStatus = computed(() => {
 });
 const displayTitle = computed(() => {
   if (props.title) return props.title;
-  return currentStatus.value === "thinking" || currentStatus.value === "loading" ? t("ai.thoughtChain.thinking") || "\u601D\u8003\u4E2D..." : t("ai.thoughtChain.thoughtProcess") || "\u601D\u7EF4\u94FE";
+  return currentStatus.value === "thinking" || currentStatus.value === "loading" ? t("ai.thoughtChain.thinking") : t("ai.thoughtChain.thoughtProcess");
 });
+const renderMarkdown = (content) => {
+  if (!props.markdown || !content) return content;
+  return md.render(content);
+};
 const getStatusIcon = (status = "none") => {
   switch (status) {
     case "thinking":
@@ -46,7 +89,7 @@ watch(
   }
 );
 watch(
-  () => props.items,
+  () => itemsToUse.value,
   (newItems) => {
     if (newItems && newItems.length > 0) {
       itemExpandedStates.value = newItems.map((item, index) => {
@@ -63,19 +106,94 @@ const toggleExpand = () => {
 const toggleItemExpand = (index) => {
   itemExpandedStates.value[index] = !itemExpandedStates.value[index];
 };
+const handleItemClick = (item, index) => {
+  if (item.clickable !== false) {
+    emit("node-click", item, index);
+  }
+};
+const handleDeleteNode = (item, index) => {
+  emit("node-delete", item, index);
+  if (!props.editable) return;
+  ensureInternalItems();
+  const newItems = [...internalItems.value];
+  newItems.splice(index, 1);
+  internalItems.value = newItems;
+  emit("update:items", newItems);
+  emit("reorder", newItems);
+};
+const handleAddNode = (index) => {
+  emit("node-add", index);
+  if (!props.editable) return;
+  ensureInternalItems();
+  const newItems = [...internalItems.value];
+  newItems.splice(index + 1, 0, {
+    title: t("ai.thoughtChain.defaultTitle"),
+    status: "none"
+  });
+  internalItems.value = newItems;
+  emit("update:items", newItems);
+  emit("reorder", newItems);
+};
+const handleDragStart = (e, index) => {
+  if (!props.draggable) return;
+  draggedIndex.value = index;
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = "move";
+  }
+};
+const handleDragOver = (e, index) => {
+  if (!props.draggable || draggedIndex.value === null) return;
+  e.preventDefault();
+  dragOverIndex.value = index;
+};
+const handleDragLeave = () => {
+  dragOverIndex.value = null;
+};
+const handleDrop = (e, targetIndex) => {
+  if (!props.draggable || draggedIndex.value === null) return;
+  e.preventDefault();
+  if (draggedIndex.value !== null) {
+    ensureInternalItems();
+    const newItems = [...internalItems.value];
+    const [removed] = newItems.splice(draggedIndex.value, 1);
+    newItems.splice(targetIndex, 0, removed);
+    internalItems.value = newItems;
+    emit("update:items", newItems);
+    emit("reorder", newItems);
+  }
+  draggedIndex.value = null;
+  dragOverIndex.value = null;
+};
+const handleDragEnd = () => {
+  draggedIndex.value = null;
+  dragOverIndex.value = null;
+};
 </script>
 
 <template>
   <div
-    :class="[ns.b(), ns.is('expanded', isExpanded), ns.is('thinking', currentStatus === 'thinking' || currentStatus === 'loading'), ns.is('timeline', items && items.length > 0)]"
-    :style="themeStyle"
+    :class="[ns.b(), ns.is('expanded', isExpanded), ns.is('thinking', currentStatus === 'thinking' || currentStatus === 'loading'), ns.is('timeline', itemsToUse && itemsToUse.length > 0), ns.is('draggable', draggable), className]"
+    :style="[themeStyle, style]"
   >
+    <!-- 进度条 -->
+    <div v-if="showProgress && itemsToUse && itemsToUse.length > 0" :class="ns.e('progress-bar')">
+      <div :class="ns.e('progress-fill')" :style="{
+  width: currentProgress + '%'
+}"></div>
+    </div>
+
     <!-- 多节点时间轴模式 -->
-    <template v-if="items && items.length > 0">
+    <template v-if="itemsToUse && itemsToUse.length > 0">
       <div
-        v-for="(item, index) in items"
-        :key="index"
-        :class="[ns.e('item'), ns.is('last', index === items.length - 1), ns.is('active', item.status === 'thinking' || item.status === 'loading')]"
+        v-for="(item, index) in itemsToUse"
+        :key="item.id || index"
+        :class="[ns.e('item'), ns.is('last', index === items.length - 1), ns.is('active', item.status === 'thinking' || item.status === 'loading'), ns.is('drag-over', dragOverIndex === index), ns.is('dragging', draggedIndex === index)]"
+        :draggable="draggable"
+        @dragstart="handleDragStart($event, index)"
+        @dragover="handleDragOver($event, index)"
+        @dragleave="handleDragLeave"
+        @drop="handleDrop($event, index)"
+        @dragend="handleDragEnd"
       >
         <div :class="ns.e('item-dot-wrapper')">
           <div :class="[ns.e('item-dot'), ns.m(dotSize), ns.m(item.status || 'none')]">
@@ -96,7 +214,26 @@ const toggleItemExpand = (index) => {
 
         <div :class="ns.e('item-main')">
           <div :class="ns.e('item-header')" @click="toggleItemExpand(index)">
+            <!-- 拖拽手柄 -->
+            <YhIcon v-if="draggable" name="rank" :class="ns.e('drag-handle')" />
+
             <span :class="ns.e('item-title')">{{ item.title }}</span>
+
+            <!-- 节点进度 -->
+            <span v-if="item.progress !== void 0" :class="ns.e('item-progress')">
+              {{ item.progress }}%
+            </span>
+
+            <!-- 操作按钮 -->
+            <div :class="ns.e('item-actions')" v-if="editable" @click.stop>
+              <YhIcon
+                name="delete"
+                :class="ns.e('action-icon')"
+                @click="handleDeleteNode(item, index)"
+              />
+              <YhIcon name="plus" :class="ns.e('action-icon')" @click="handleAddNode(index)" />
+            </div>
+
             <YhIcon
               v-if="item.content || item.description"
               name="arrow-down"
@@ -105,14 +242,34 @@ const toggleItemExpand = (index) => {
 }]"
             />
           </div>
-          <div
-            v-show="itemExpandedStates[index] && (item.content || item.description)"
-            :class="ns.e('item-content')"
-          >
-            <div :class="ns.e('item-text')">{{ item.content || item.description }}</div>
-          </div>
+
+          <!-- 内容区域 -->
+          <Transition name="yh-ai-thought-collapse">
+            <div
+              v-if="itemExpandedStates[index] && (item.content || item.description)"
+              :class="ns.e('item-content')"
+              @click="handleItemClick(item, index)"
+            >
+              <!-- 支持 Markdown：内容来自 renderMarkdown，仅用于受控的思维链节点 -->
+              <!-- eslint-disable vue/no-v-html -->
+              <div
+                v-if="markdown"
+                :class="ns.e('item-text')"
+                v-html="renderMarkdown(item.content || item.description || '')"
+              ></div>
+              <!-- eslint-enable vue/no-v-html -->
+              <!-- 纯文本 -->
+              <div v-else :class="ns.e('item-text')">{{ item.content || item.description }}</div>
+            </div>
+          </Transition>
         </div>
       </div>
+
+      <!-- 添加节点按钮 -->
+      <div v-if="editable" :class="ns.e('add-node')" @click="handleAddNode(items.length)">
+        <YhIcon name="plus" />
+        <span>{{ t("ai.thoughtChain.addNode") }}</span>
+      </div>
     </template>
 
     <!-- 单节点/传统模式 -->
@@ -132,11 +289,13 @@ const toggleItemExpand = (index) => {
 }]" />
       </div>
 
-      <div v-show="isExpanded" :class="ns.e('content')">
-        <slot>
-          <div :class="ns.e('text')">{{ content }}</div>
-        </slot>
-      </div>
+      <Transition name="yh-ai-thought-collapse">
+        <div v-if="isExpanded" :class="ns.e('content')">
+          <slot>
+            <div :class="ns.e('text')">{{ content }}</div>
+          </slot>
+        </div>
+      </Transition>
     </template>
   </div>
 </template>
@@ -600,10 +759,100 @@ html.dark {
   max-width: 100%;
   transition: all 0.3s ease;
 }
+.yh-ai-thought-chain__progress-bar {
+  height: 4px;
+  background: var(--yh-border-color-lighter);
+  border-radius: 2px;
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+
+.yh-ai-thought-chain__progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--yh-color-primary), var(--yh-color-success));
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
 .yh-ai-thought-chain.is-thinking {
   border-left-color: var(--yh-color-primary);
 }
 
+.yh-ai-thought-chain.is-draggable .yh-ai-thought-chain__item {
+  cursor: move;
+}
+.yh-ai-thought-chain.is-draggable .yh-ai-thought-chain__item.is-dragging {
+  opacity: 0.5;
+}
+.yh-ai-thought-chain.is-draggable .yh-ai-thought-chain__item.is-drag-over {
+  background: var(--yh-color-primary-light-9);
+}
+
+.yh-ai-thought-chain.is-draggable .yh-ai-thought-chain__drag-handle {
+  margin-right: 8px;
+  cursor: grab;
+  color: var(--yh-text-color-placeholder);
+  font-size: 12px;
+}
+.yh-ai-thought-chain.is-draggable .yh-ai-thought-chain__drag-handle:active {
+  cursor: grabbing;
+}
+
+.yh-ai-thought-chain__item-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 12px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.yh-ai-thought-chain__item-header:hover .yh-ai-thought-chain__item-actions {
+  opacity: 1;
+}
+
+.yh-ai-thought-chain__action-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 16px;
+  color: var(--yh-text-color-secondary);
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.15s ease-out;
+}
+.yh-ai-thought-chain__action-icon:hover {
+  color: var(--yh-color-primary);
+  background: var(--yh-fill-color-light);
+  transform: scale(1.05);
+}
+
+.yh-ai-thought-chain__item-progress {
+  margin-left: 8px;
+  font-size: 12px;
+  color: var(--yh-color-primary);
+  font-weight: 500;
+}
+
+.yh-ai-thought-chain__add-node {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  margin-left: 32px;
+  color: var(--yh-text-color-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+.yh-ai-thought-chain__add-node:hover {
+  color: var(--yh-color-primary);
+  background: var(--yh-fill-color-light);
+}
+
 .yh-ai-thought-chain__header {
   display: flex;
   align-items: center;
@@ -810,4 +1059,20 @@ html.dark {
     transform: translateY(0);
   }
 }
+.yh-ai-thought-collapse-enter-active,
+.yh-ai-thought-collapse-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  max-height: 500px;
+  overflow: hidden;
+}
+
+.yh-ai-thought-collapse-enter-from,
+.yh-ai-thought-collapse-leave-to {
+  max-height: 0;
+  opacity: 0;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  margin-top: 0 !important;
+  transform: translateY(-10px);
+}
 </style>

package/dist/ai-thought-chain/src/ai-thought-chain.vue.d.ts

@@ -1,7 +1,7 @@
-import type { AiThoughtStatus } from './ai-thought-chain';
-declare var __VLS_17: {};
+import type { AiThoughtStatus, AiThoughtItem } from './ai-thought-chain';
+declare var __VLS_49: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_17) => any;
+    default?: (props: typeof __VLS_49) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     readonly title: StringConstructor;
@@ -15,7 +15,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         readonly default: "none";
     };
     readonly items: {
-        readonly type: import("vue").PropType<import("./ai-thought-chain").AiThoughtItem[]>;
+        readonly type: import("vue").PropType<AiThoughtItem[]>;
         readonly default: () => never[];
     };
     readonly autoCollapse: {
@@ -30,11 +30,49 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         readonly type: BooleanConstructor;
         readonly default: false;
     };
+    readonly showProgress: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly draggable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly editable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly markdown: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly className: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly classNames: {
+        readonly type: import("vue").PropType<Record<string, string>>;
+        readonly default: () => {};
+    };
+    readonly styles: {
+        readonly type: import("vue").PropType<Record<string, string>>;
+        readonly default: () => {};
+    };
+    readonly style: {
+        readonly type: import("vue").PropType<Record<string, string>>;
+        readonly default: () => {};
+    };
     readonly themeOverrides: {
         readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
         readonly default: undefined;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "node-click": (item: AiThoughtItem, index: number) => void;
+    "update:items": (items: AiThoughtItem[]) => void;
+    "node-delete": (item: AiThoughtItem, index: number) => void;
+    "node-add": (index: number) => void;
+    reorder: (items: AiThoughtItem[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     readonly title: StringConstructor;
     readonly thinking: {
         readonly type: BooleanConstructor;
@@ -46,7 +84,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         readonly default: "none";
     };
     readonly items: {
-        readonly type: import("vue").PropType<import("./ai-thought-chain").AiThoughtItem[]>;
+        readonly type: import("vue").PropType<AiThoughtItem[]>;
         readonly default: () => never[];
     };
     readonly autoCollapse: {
@@ -61,18 +99,64 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         readonly type: BooleanConstructor;
         readonly default: false;
     };
+    readonly showProgress: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly draggable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly editable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly markdown: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly className: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly classNames: {
+        readonly type: import("vue").PropType<Record<string, string>>;
+        readonly default: () => {};
+    };
+    readonly styles: {
+        readonly type: import("vue").PropType<Record<string, string>>;
+        readonly default: () => {};
+    };
+    readonly style: {
+        readonly type: import("vue").PropType<Record<string, string>>;
+        readonly default: () => {};
+    };
     readonly themeOverrides: {
         readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
         readonly default: undefined;
     };
-}>> & Readonly<{}>, {
-    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
-    readonly items: import("./ai-thought-chain").AiThoughtItem[];
-    readonly status: AiThoughtStatus;
+}>> & Readonly<{
+    "onNode-click"?: ((item: AiThoughtItem, index: number) => any) | undefined;
+    "onUpdate:items"?: ((items: AiThoughtItem[]) => any) | undefined;
+    "onNode-delete"?: ((item: AiThoughtItem, index: number) => any) | undefined;
+    "onNode-add"?: ((index: number) => any) | undefined;
+    onReorder?: ((items: AiThoughtItem[]) => any) | undefined;
+}>, {
+    readonly style: Record<string, string>;
     readonly thinking: boolean;
+    readonly status: AiThoughtStatus;
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly dotSize: "large" | "default" | "small";
+    readonly draggable: boolean;
+    readonly editable: boolean;
+    readonly items: AiThoughtItem[];
+    readonly showProgress: boolean;
+    readonly className: string;
+    readonly markdown: boolean;
     readonly autoCollapse: boolean;
-    readonly dotSize: "small" | "default" | "large";
     readonly lineGradient: boolean;
+    readonly classNames: Record<string, string>;
+    readonly styles: Record<string, string>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;