@yh-ui/components 0.1.16 → 0.1.21

package/dist/ai-editor-sender/src/ai-editor-sender.d.ts

@@ -1,62 +1,172 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-export interface AttachmentItem {
+import type { ComponentThemeVars } from '@yh-ui/theme';
+export interface AiEditorAttachmentItem {
     name: string;
     url?: string;
     status?: 'uploading' | 'success' | 'error';
     percentage?: number;
     [key: string]: unknown;
 }
+/** 命令菜单项 */
+export interface AiCommandItem {
+    /** 唯一标识 */
+    id: string;
+    /** 显示文本 */
+    label: string;
+    /** 命令关键词（输入时触发） */
+    keywords?: string[];
+    /** 图标 */
+    icon?: string;
+    /** 描述 */
+    description?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 子命令（支持级联） */
+    children?: AiCommandItem[];
+    /** 层级深度 */
+    level?: number;
+    /** 自定义数据 */
+    data?: Record<string, unknown>;
+}
+/** 命令面板位置 */
+export type CommandPanelPosition = 'top' | 'bottom';
+/** 命令面板对齐方式 */
+export type CommandPanelAlign = 'start' | 'center' | 'end';
 export declare const aiEditorSenderProps: {
-    readonly modelValue: {
-        readonly type: StringConstructor;
-        readonly default: "";
+    modelValue: {
+        type: StringConstructor;
+        default: string;
     };
-    readonly placeholder: {
-        readonly type: StringConstructor;
-        readonly default: "Type a message...";
+    placeholder: {
+        type: StringConstructor;
+        default: string;
     };
-    readonly disabled: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
     };
-    readonly loading: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
     };
     /**
      * 附件列表（仅展示用，逻辑需外部控制）
      */
-    readonly attachments: {
-        readonly type: PropType<AttachmentItem[]>;
-        readonly default: () => never[];
+    attachments: {
+        type: PropType<AiEditorAttachmentItem[]>;
+        default: () => never[];
     };
     /**
      * 字数统计
      */
-    readonly showWordLimit: {
-        readonly type: BooleanConstructor;
-        readonly default: true;
+    showWordLimit: {
+        type: BooleanConstructor;
+        default: boolean;
     };
     /**
      * 最大字数
      */
-    readonly maxLength: {
-        readonly type: NumberConstructor;
-        readonly default: undefined;
+    maxLength: {
+        type: NumberConstructor;
+        default: undefined;
     };
     /**
      * 默认行数
      */
-    readonly rows: {
-        readonly type: NumberConstructor;
-        readonly default: 1;
+    rows: {
+        type: NumberConstructor;
+        default: number;
     };
     /**
      * 主题覆盖变量
      */
-    readonly themeOverrides: {
-        readonly type: PropType<import("@yh-ui/theme").ComponentThemeVars>;
-        readonly default: undefined;
+    themeOverrides: {
+        type: PropType<ComponentThemeVars>;
+        default: undefined;
+    };
+    /**
+     * 是否启用命令菜单
+     */
+    enableCommands: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 命令触发字符
+     */
+    commandTrigger: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 命令列表
+     */
+    commands: {
+        type: PropType<AiCommandItem[]>;
+        default: () => never[];
+    };
+    /**
+     * 命令面板位置
+     */
+    commandPanelPosition: {
+        type: PropType<CommandPanelPosition>;
+        default: string;
+    };
+    /**
+     * 命令面板对齐方式
+     */
+    commandPanelAlign: {
+        type: PropType<CommandPanelAlign>;
+        default: string;
+    };
+    /**
+     * 命令面板宽度
+     */
+    commandPanelWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /**
+     * 命令面板最大高度
+     */
+    commandPanelMaxHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * 是否显示命令描述
+     */
+    showCommandDescription: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 是否显示命令图标
+     */
+    showCommandIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 命令搜索防抖延迟（毫秒）
+     */
+    commandSearchDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * 是否支持命令嵌套级联
+     */
+    enableCommandCascade: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 级联面板偏移量
+     */
+    cascadeOffset: {
+        type: NumberConstructor;
+        default: number;
     };
 };
 export type AiEditorSenderProps = ExtractPropTypes<typeof aiEditorSenderProps>;
@@ -64,7 +174,12 @@ export declare const aiEditorSenderEmits: {
     'update:modelValue': (_value: string) => boolean;
     send: (value: string) => boolean;
     change: (_value: string) => boolean;
-    'remove-attachment': (_index: number, _item: AttachmentItem) => boolean;
+    'remove-attachment': (_index: number, _item: AiEditorAttachmentItem) => boolean;
     clear: () => boolean;
+    'command-select': (_command: AiCommandItem, _parentCommand?: AiCommandItem) => boolean;
+    'command-search': (_keyword: string) => boolean;
+    'command-panel-show': () => boolean;
+    'command-panel-hide': () => boolean;
+    'command-cascade': (_command: AiCommandItem, _parentCommand: AiCommandItem) => boolean;
 };
 export type AiEditorSenderEmits = typeof aiEditorSenderEmits;

package/dist/ai-editor-sender/src/ai-editor-sender.mjs

@@ -49,6 +49,91 @@ export const aiEditorSenderProps = {
   themeOverrides: {
     type: Object,
     default: void 0
+  },
+  // ========== 命令菜单相关属性 ==========
+  /**
+   * 是否启用命令菜单
+   */
+  enableCommands: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 命令触发字符
+   */
+  commandTrigger: {
+    type: String,
+    default: "/"
+  },
+  /**
+   * 命令列表
+   */
+  commands: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * 命令面板位置
+   */
+  commandPanelPosition: {
+    type: String,
+    default: "bottom"
+  },
+  /**
+   * 命令面板对齐方式
+   */
+  commandPanelAlign: {
+    type: String,
+    default: "start"
+  },
+  /**
+   * 命令面板宽度
+   */
+  commandPanelWidth: {
+    type: [String, Number],
+    default: 320
+  },
+  /**
+   * 命令面板最大高度
+   */
+  commandPanelMaxHeight: {
+    type: Number,
+    default: 400
+  },
+  /**
+   * 是否显示命令描述
+   */
+  showCommandDescription: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 是否显示命令图标
+   */
+  showCommandIcon: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 命令搜索防抖延迟（毫秒）
+   */
+  commandSearchDelay: {
+    type: Number,
+    default: 150
+  },
+  /**
+   * 是否支持命令嵌套级联
+   */
+  enableCommandCascade: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 级联面板偏移量
+   */
+  cascadeOffset: {
+    type: Number,
+    default: 4
   }
 };
 export const aiEditorSenderEmits = {
@@ -56,5 +141,11 @@ export const aiEditorSenderEmits = {
   send: (value) => !!value,
   change: (_value) => true,
   "remove-attachment": (_index, _item) => true,
-  clear: () => true
+  clear: () => true,
+  // 命令菜单事件
+  "command-select": (_command, _parentCommand) => true,
+  "command-search": (_keyword) => true,
+  "command-panel-show": () => true,
+  "command-panel-hide": () => true,
+  "command-cascade": (_command, _parentCommand) => true
 };

package/dist/ai-editor-sender/src/ai-editor-sender.vue

@@ -1,7 +1,10 @@
 <script setup>
 import { useNamespace } from "@yh-ui/hooks";
-import { ref, computed, nextTick, watch } from "vue";
-import { aiEditorSenderProps, aiEditorSenderEmits } from "./ai-editor-sender";
+import { ref, computed, watch, nextTick } from "vue";
+import {
+  aiEditorSenderProps,
+  aiEditorSenderEmits
+} from "./ai-editor-sender";
 import { YhButton } from "../../button";
 import { YhIcon } from "../../icon";
 import { useComponentTheme } from "@yh-ui/theme";
@@ -15,6 +18,14 @@ const { themeStyle } = useComponentTheme("ai-editor-sender", props.themeOverride
 const textareaRef = ref();
 const localValue = ref(props.modelValue);
 const isFocused = ref(false);
+const showCommandPanel = ref(false);
+const commandSearchText = ref("");
+const filteredCommands = ref([]);
+const selectedCommandIndex = ref(0);
+const cascadeCommands = ref([]);
+const currentCascadeParent = ref(null);
+const showCascadePanel = ref(false);
+const cascadePosition = ref({ top: 0, left: 0 });
 watch(
   () => props.modelValue,
   (val) => {
@@ -27,13 +38,14 @@ const innerValue = computed({
     localValue.value = val;
     emit("update:modelValue", val);
     emit("change", val);
+    checkCommandTrigger(val);
   }
 });
 const autoResize = () => {
   const el = textareaRef.value;
   if (!el) return;
   el.style.height = "auto";
-  el.style.height = `${el.scrollHeight}px`;
+  el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
 };
 const handleInput = (e) => {
   innerValue.value = e.target.value;
@@ -43,11 +55,116 @@ const handleKeyDown = (e) => {
   if (e.key === "Enter" && !e.shiftKey) {
     if (!innerValue.value.trim() || props.loading || props.disabled) {
       e.preventDefault();
+    } else if (showCommandPanel.value) {
+      e.preventDefault();
+      const commands = getAllVisibleCommands();
+      if (commands.length > 0 && selectedCommandIndex.value >= 0) {
+        selectCommand(commands[selectedCommandIndex.value]);
+      }
     } else {
       e.preventDefault();
       handleSend();
     }
+  } else if (e.key === "ArrowDown" && showCommandPanel.value) {
+    e.preventDefault();
+    navigateCommands(1);
+  } else if (e.key === "ArrowUp" && showCommandPanel.value) {
+    e.preventDefault();
+    navigateCommands(-1);
+  } else if (e.key === "ArrowRight" && showCommandPanel.value && currentCascadeParent.value) {
+    openCascadePanel(currentCascadeParent.value);
+  } else if (e.key === "Escape") {
+    hideCommandPanel();
+  } else if (e.key === "Backspace" && !commandSearchText.value) {
+    hideCommandPanel();
+  }
+};
+const checkCommandTrigger = (value) => {
+  if (!props.enableCommands) return;
+  const _cursorPos = value.length;
+  const lastSlashIndex = value.lastIndexOf(props.commandTrigger);
+  if (lastSlashIndex !== -1) {
+    const afterTrigger = value.slice(lastSlashIndex + 1);
+    if (afterTrigger.includes(" ")) {
+      hideCommandPanel();
+      return;
+    }
+    commandSearchText.value = afterTrigger;
+    filterCommands(afterTrigger);
+    showCommandPanel.value = true;
+    emit("command-panel-show");
+    selectedCommandIndex.value = 0;
+  } else {
+    hideCommandPanel();
+  }
+};
+const filterCommands = (keyword) => {
+  if (!keyword) {
+    filteredCommands.value = props.commands.filter((cmd) => !cmd.disabled);
+    return;
   }
+  const lowerKeyword = keyword.toLowerCase();
+  filteredCommands.value = props.commands.filter((cmd) => {
+    if (cmd.disabled) return false;
+    if (cmd.label.toLowerCase().includes(lowerKeyword)) return true;
+    if (cmd.keywords?.some((k) => k.toLowerCase().includes(lowerKeyword))) return true;
+    return false;
+  });
+};
+const getAllVisibleCommands = () => {
+  const commands = [...filteredCommands.value];
+  if (currentCascadeParent.value?.children?.length) {
+    commands.push(...currentCascadeParent.value.children);
+  }
+  return commands;
+};
+const navigateCommands = (direction) => {
+  const commands = getAllVisibleCommands();
+  if (commands.length === 0) return;
+  selectedCommandIndex.value = (selectedCommandIndex.value + direction + commands.length) % commands.length;
+};
+const selectCommand = (command) => {
+  if (command.disabled) return;
+  if (command.children?.length && props.enableCommandCascade) {
+    openCascadePanel(command);
+    emit("command-cascade", command, currentCascadeParent.value);
+    return;
+  }
+  insertCommandToText(command);
+  emit("command-select", command, currentCascadeParent.value || void 0);
+  hideCommandPanel();
+};
+const openCascadePanel = (parent) => {
+  currentCascadeParent.value = parent;
+  cascadeCommands.value = parent.children || [];
+  showCascadePanel.value = true;
+  nextTick(() => {
+    const panel = document.querySelector(`.${ns.b()}-command-panel`);
+    if (panel) {
+      const rect = panel.getBoundingClientRect();
+      cascadePosition.value = {
+        left: rect.width + props.cascadeOffset,
+        top: 0
+      };
+    }
+  });
+};
+const insertCommandToText = (command) => {
+  const cursorPos = localValue.value.lastIndexOf(props.commandTrigger);
+  if (cursorPos !== -1) {
+    const before = localValue.value.slice(0, cursorPos);
+    const after = localValue.value.slice(cursorPos).replace(props.commandTrigger + commandSearchText.value, "");
+    localValue.value = before + command.label + after;
+    innerValue.value = localValue.value;
+  }
+};
+const hideCommandPanel = () => {
+  showCommandPanel.value = false;
+  showCascadePanel.value = false;
+  commandSearchText.value = "";
+  filteredCommands.value = [];
+  currentCascadeParent.value = null;
+  emit("command-panel-hide");
 };
 const handleSend = () => {
   if (!innerValue.value.trim() || props.loading || props.disabled) return;
@@ -57,11 +174,28 @@ const handleSend = () => {
     if (textareaRef.value) {
       textareaRef.value.style.height = "auto";
     }
+    hideCommandPanel();
   });
 };
 const handleRemoveAttachment = (index, item) => {
   emit("remove-attachment", index, item);
 };
+const commandPanelStyle = computed(() => ({
+  width: typeof props.commandPanelWidth === "number" ? props.commandPanelWidth + "px" : props.commandPanelWidth,
+  maxHeight: props.commandPanelMaxHeight + "px"
+}));
+const getCommandIcon = (command) => {
+  if (command.icon) return command.icon;
+  return "command";
+};
+defineExpose({
+  focus: () => textareaRef.value?.focus(),
+  blur: () => textareaRef.value?.blur(),
+  clear: () => {
+    localValue.value = "";
+    hideCommandPanel();
+  }
+});
 </script>
 
 <template>
@@ -140,6 +274,82 @@ const handleRemoveAttachment = (index, item) => {
         </slot>
       </div>
     </div>
+
+    <!-- Command Panel -->
+    <Teleport to="body">
+      <Transition name="yh-fade-in-scale-up">
+        <div v-if="showCommandPanel && enableCommands" :class="ns.e('command-panel-wrapper')">
+          <div :class="ns.e('command-panel')" :style="commandPanelStyle">
+            <div v-if="commandSearchText" :class="ns.e('command-search')">
+              <YhIcon name="search" />
+              <span>{{ commandSearchText }}</span>
+            </div>
+
+            <div :class="ns.e('command-list')">
+              <!-- 主命令列表 -->
+              <template v-for="(command, index) in filteredCommands" :key="command.id">
+                <div
+                  :class="[ns.e('command-item'), ns.is('selected', selectedCommandIndex === index), ns.is('disabled', command.disabled), ns.is('parent', !!command.children?.length)]"
+                  @click="selectCommand(command)"
+                  @mouseenter="selectedCommandIndex = index"
+                >
+                  <YhIcon
+                    v-if="showCommandIcon"
+                    :name="getCommandIcon(command)"
+                    :class="ns.e('command-icon')"
+                  />
+                  <div :class="ns.e('command-content')">
+                    <span :class="ns.e('command-label')">{{ command.label }}</span>
+                    <span
+                      v-if="showCommandDescription && command.description"
+                      :class="ns.e('command-desc')"
+                    >
+                      {{ command.description }}
+                    </span>
+                  </div>
+                  <YhIcon
+                    v-if="command.children?.length"
+                    name="chevron-right"
+                    :class="ns.e('command-arrow')"
+                  />
+                </div>
+
+                <!-- 嵌套子命令 -->
+                <template v-if="showCascadePanel && currentCascadeParent?.id === command.id">
+                  <div
+                    v-for="(child, childIndex) in cascadeCommands"
+                    :key="`${command.id}-${child.id}`"
+                    :class="[ns.e('command-item'), ns.e('command-cascade-item'), ns.is('selected', selectedCommandIndex === filteredCommands.length + childIndex), ns.is('disabled', child.disabled)]"
+                    @click="selectCommand(child)"
+                    @mouseenter="selectedCommandIndex = filteredCommands.length + childIndex"
+                  >
+                    <YhIcon
+                      v-if="showCommandIcon"
+                      :name="getCommandIcon(child)"
+                      :class="ns.e('command-icon')"
+                    />
+                    <div :class="ns.e('command-content')">
+                      <span :class="ns.e('command-label')">{{ child.label }}</span>
+                      <span
+                        v-if="showCommandDescription && child.description"
+                        :class="ns.e('command-desc')"
+                      >
+                        {{ child.description }}
+                      </span>
+                    </div>
+                  </div>
+                </template>
+              </template>
+
+              <div v-if="filteredCommands.length === 0" :class="ns.e('command-empty')">
+                <YhIcon name="search" />
+                <span>没有找到匹配的命令</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
   </div>
 </template>
 
@@ -710,4 +920,100 @@ html.dark {
   color: var(--yh-text-color-placeholder);
   margin-right: 8px;
 }
+
+.yh-ai-editor-sender__command-panel-wrapper {
+  position: fixed;
+  z-index: 9999;
+  top: 200px;
+  left: 100px;
+}
+
+.yh-ai-editor-sender__command-panel {
+  background: var(--yh-bg-color-overlay);
+  border: 1px solid var(--yh-border-color-lighter);
+  border-radius: 12px;
+  box-shadow: var(--yh-shadow-lg);
+  overflow: hidden;
+}
+
+.yh-ai-editor-sender__command-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: var(--yh-fill-color-light);
+  border-bottom: 1px solid var(--yh-border-color-lighter);
+  font-size: 13px;
+  color: var(--yh-text-color-secondary);
+}
+
+.yh-ai-editor-sender__command-list {
+  max-height: 280px;
+  overflow: auto;
+}
+
+.yh-ai-editor-sender__command-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.yh-ai-editor-sender__command-item:hover {
+  background: var(--yh-fill-color-light);
+}
+.yh-ai-editor-sender__command-item.is-selected {
+  background: var(--yh-fill-color-light);
+}
+.yh-ai-editor-sender__command-item.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.yh-ai-editor-sender__command-item.is-parent {
+  font-weight: 500;
+}
+
+.yh-ai-editor-sender__command-cascade-item {
+  padding-left: 28px;
+  background: var(--yh-fill-color-extra-light);
+}
+
+.yh-ai-editor-sender__command-icon {
+  font-size: 16px;
+  color: var(--yh-color-primary);
+}
+
+.yh-ai-editor-sender__command-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.yh-ai-editor-sender__command-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--yh-text-color-primary);
+}
+
+.yh-ai-editor-sender__command-desc {
+  display: block;
+  font-size: 12px;
+  color: var(--yh-text-color-secondary);
+  margin-top: 2px;
+}
+
+.yh-ai-editor-sender__command-arrow {
+  font-size: 14px;
+  color: var(--yh-text-color-placeholder);
+}
+
+.yh-ai-editor-sender__command-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 24px;
+  color: var(--yh-text-color-placeholder);
+  font-size: 14px;
+}
 </style>