feat: 修改 Sender和MentionSender

Author: HeJiaYue520

packages/components/components/components.d.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElMention: typeof import('element-plus/es')['ElMention']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
+  }
+}

packages/components/components/src/auto-import.d.ts

@@ -0,0 +1,71 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useModel: typeof import('vue')['useModel']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

packages/components/src/components/MentionSender/index.vue

@@ -21,6 +21,7 @@ const props = withDefaults(defineProps<MentionSenderProps>(), {
 
   variant: 'default',
   showUpdown: true,
+  submitBtnDisabled: undefined,
 
   // el-input 属性透传
   inputStyle: '',
@@ -29,12 +30,12 @@ const props = withDefaults(defineProps<MentionSenderProps>(), {
   options: () => [],
   filterOption: () => true,
   whole: false,
-  checkIsWhole: () => false,
+  checkIsWhole: () => true,
   triggerLoading: false,
   triggerStrings: () => [],
+  triggerSplit: ' ',
   triggerPopoverPlacement: 'top',
   triggerPopoverOffset: 20,
-  triggerPopoverClass: '',
 })
 
 const emits = defineEmits(['update:modelValue', 'submit', 'cancel', 'recordingChange', 'search', 'select'])
@@ -61,6 +62,16 @@ const hasOnRecordingChangeListener = computed(() => {
 const senderRef = ref()
 const inputRef = ref()
 
+// 计算提交按钮禁用状态
+const isSubmitDisabled = computed(() => {
+  // 用户显式设置了 submitBtnDisabled 时优先使用
+  if (typeof props.submitBtnDisabled === 'boolean') {
+    return props.submitBtnDisabled
+  }
+  // 否则保持默认逻辑：无内容时禁用
+  return !internalValue.value
+})
+
 /* 内容容器聚焦 开始 */
 function onContentMouseDown(e: MouseEvent) {
   // 点击容器后设置输入框的聚焦，会触发 &:focus-within 样式
@@ -150,7 +161,7 @@ function stopRecognition() {
 
 /* 输入框事件 开始 */
 function submit() {
-  if (props.readOnly || props.loading || props.disabled || !internalValue.value)
+  if (props.readOnly || props.loading || props.disabled || isSubmitDisabled.value)
     return
   emits('submit', internalValue.value)
 }
@@ -343,9 +354,9 @@ defineExpose({
           :check-is-whole="props.checkIsWhole"
           :loading="props.triggerLoading"
           :prefix="props.triggerStrings"
+          :split="props.triggerSplit"
           :placement="props.triggerPopoverPlacement"
           :offset="props.triggerPopoverOffset"
-          :popper-class="props.triggerPopoverClass"
           @keydown.stop="handleKeyDown"
           @search="handleSearch"
           @select="handleSelect"
@@ -374,7 +385,7 @@ defineExpose({
             <div
               class="el-sender-action-list-presets"
             >
-              <SendButton v-if="!loading" :disabled="!internalValue" @submit="submit" />
+              <SendButton v-if="!loading" :disabled="isSubmitDisabled" @submit="submit" />
 
               <LoadingButton v-if="loading" @cancel="cancel" />
 
@@ -406,7 +417,7 @@ defineExpose({
               <div
                 class="el-sender-action-list-presets"
               >
-                <SendButton v-if="!loading" :disabled="!internalValue" @submit="submit" />
+                <SendButton v-if="!loading" :disabled="isSubmitDisabled" @submit="submit" />
 
                 <LoadingButton v-if="loading" @cancel="cancel" />
 

packages/components/src/components/MentionSender/types.d.ts

@@ -24,6 +24,7 @@ export interface MentionSenderProps {
   // 变体属性
   variant?: 'default' | 'updown'
   showUpdown?: boolean
+  submitBtnDisabled?: boolean
 
   // 新增 el-input 样式透传
   inputStyle?: string | CSSProperties | CSSProperties[] | string[]
@@ -40,8 +41,10 @@ export interface MentionSenderProps {
   triggerLoading?: boolean
   // 触发字段的前缀。 字符串长度必须且只能为 1
   triggerStrings?: string[]
+  // 触发字段的分隔符， 默认为空字符串。字符串长度必须且只能为 1
+  triggerSplit?: string
+  // 触发字段的下拉面板的弹出位置
   triggerPopoverPlacement?: 'bottom' | 'top'
+  // 触发字段的下拉面板的弹出位置偏移量
   triggerPopoverOffset?: number
-  // 自定义浮层类名
-  triggerPopoverClass?: string
 }

packages/components/src/components/Sender/index.vue

@@ -21,6 +21,7 @@ const props = withDefaults(defineProps<SenderProps>(), {
 
   variant: 'default',
   showUpdown: true,
+  submitBtnDisabled: undefined,
 
   // el-input 属性透传
   inputStyle: () => {},
@@ -74,6 +75,16 @@ const hasOnTriggerListener = computed(() => {
   return !!instance?.vnode.props?.onTrigger
 })
 
+// 计算提交按钮禁用状态
+const isSubmitDisabled = computed(() => {
+  // 用户显式设置了 submitBtnDisabled 时优先使用
+  if (typeof props.submitBtnDisabled === 'boolean') {
+    return props.submitBtnDisabled
+  }
+  // 否则保持默认逻辑：无内容时禁用
+  return !internalValue.value
+})
+
 const popoverVisible = computed({
   get() {
     return props.triggerPopoverVisible
@@ -241,7 +252,7 @@ function stopRecognition() {
 
 /* 输入框事件 开始 */
 function submit() {
-  if (props.readOnly || props.loading || props.disabled || !internalValue.value)
+  if (props.readOnly || props.loading || props.disabled || isSubmitDisabled.value)
     return
   emits('submit', internalValue.value)
 }
@@ -441,7 +452,7 @@ defineExpose({
             <div
               class="el-sender-action-list-presets"
             >
-              <SendButton v-if="!loading" :disabled="!internalValue" @submit="submit" />
+              <SendButton v-if="!loading" :disabled="isSubmitDisabled" @submit="submit" />
 
               <LoadingButton v-if="loading" @cancel="cancel" />
 
@@ -473,7 +484,7 @@ defineExpose({
               <div
                 class="el-sender-action-list-presets"
               >
-                <SendButton v-if="!loading" :disabled="!internalValue" @submit="submit" />
+                <SendButton v-if="!loading" :disabled="isSubmitDisabled" @submit="submit" />
 
                 <LoadingButton v-if="loading" @cancel="cancel" />
 

packages/components/src/components/Sender/types.d.ts

@@ -17,6 +17,7 @@ export interface SenderProps {
   // 变体属性
   variant?: 'default' | 'updown'
   showUpdown?: boolean
+  submitBtnDisabled?: boolean
 
   // 新增 el-input 样式透传
   inputStyle?: string | CSSProperties | CSSProperties[] | string[]

packages/components/src/components/Thinking/index.vue

@@ -9,7 +9,7 @@ const props = withDefaults(defineProps<ThinkingProps>(), {
   disabled: false,
   autoCollapse: false,
   buttonWidth: '160px',
-  duration: '0.25s',
+  duration: '0.2s',
   maxWidth: '500px',
   backgroundColor: '#fcfcfc',
   color: 'var(--el-color-info)',
@@ -140,7 +140,7 @@ watch(() => props.status, (newVal) => {
 </template>
 
 <style scoped lang="scss">
-.el-thought-chain {
+.el-thinking {
   font-family: system-ui, sans-serif;
   margin: 0 auto;
 }
@@ -149,14 +149,13 @@ watch(() => props.status, (newVal) => {
   display: flex;
   align-items: center;
   height: 100%;
-  width: var(--el-thought-chaian-button-width);
+  width: var(--el-thinking-button-width);
   gap: 8px;
   padding: var(--el-padding-sm) calc(var(--el-padding-sm) + 4px);
   border: 1px solid #e4e4e4;
   border-radius: 8px;
   background: white;
   cursor: pointer;
-  transition: all 0.2s;
   margin-bottom: 8px;
 
   /* 居中 */
@@ -206,7 +205,7 @@ watch(() => props.status, (newVal) => {
 
 .arrow {
   margin-left: auto;
-  transition: transform var(--el-thought-chaian-animation-duration);
+  transition: transform var(--el-thinking-animation-duration);
 }
 
 .arrow.expanded {
@@ -218,8 +217,8 @@ watch(() => props.status, (newVal) => {
 .slide-leave-active {
   height: calc-size(max-content, size);
   transition:
-    height var(--el-thought-chaian-animation-duration) ease-in-out,
-    opacity var(--el-thought-chaian-animation-duration) ease-in-out;
+    height var(--el-thinking-animation-duration) ease-in-out,
+    opacity var(--el-thinking-animation-duration) ease-in-out;
   overflow: hidden;
 }
 
@@ -236,13 +235,13 @@ watch(() => props.status, (newVal) => {
 }
 
 .content pre {
-  max-width: var(--el-thought-chaian-content-wrapper-width);
-  background: var(--el-thought-chaian-content-wrapper-background-color);
   border: 1px solid #eee;
-  border-radius: calc(var(--el-border-radius-base) + 4px);
+  background: var(--el-thinking-content-wrapper-background-color);
   padding: var(--el-padding-sm) calc(var(--el-padding-sm) + 4px);
+  border-radius: calc(var(--el-border-radius-base) + 4px);
+  max-width: var(--el-thinking-content-wrapper-width);
   font-size: 14px;
-  color: var(--el-thought-chaian-content-wrapper-color);
+  color: var(--el-thinking-content-wrapper-color);
   white-space: pre-wrap;
   font-family: DeepSeek-CJK-patch,Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Oxygen,Open Sans,sans-serif;
   margin: 0;
@@ -255,8 +254,6 @@ watch(() => props.status, (newVal) => {
 }
 
 .error-message {
-  border: 1px solid #e76875;
-  border-radius: calc(var(--el-border-radius-base) + 4px);
   color: #dc3545;
   height: fit-content;
   padding: 8px;