@king-design/vue 3.8.0-beta.0 → 3.8.0-beta.2

package/components/sender/sender.d.ts

@@ -2,7 +2,15 @@ import { Component, TypeDefs } from 'intact-vue-next';
 import type { Events } from '../types';
 import type { FileCardListItem } from '../fileCard';
 import type { RequestError } from '../upload';
-export type SenderType = 'text' | 'image';
+export type SenderFileView = 'card' | 'media';
+export type SenderUploadButton = 'toolbar' | 'list' | 'none';
+export type SenderButtonTooltip = string | false;
+export interface SenderButtonTooltipConfig {
+    send?: SenderButtonTooltip;
+    stop?: SenderButtonTooltip;
+    upload?: SenderButtonTooltip;
+    listUpload?: SenderButtonTooltip;
+}
 export interface SenderAttachment extends FileCardListItem {
     uid?: number | string;
     raw?: File;
@@ -32,10 +40,18 @@ export interface SenderUploadProps {
 export interface SendButtonSlotParams {
     generating: boolean;
     disabled: boolean;
+    stopDisabled: boolean;
     loading: boolean;
     send: () => void;
     stopGenerate: () => void;
 }
+export interface UploadButtonSlotParams {
+    disabled: boolean;
+    reachLimit: boolean;
+    position: SenderUploadButton;
+    addFiles: (files: FileList | File[]) => void;
+    pickFiles: () => void;
+}
 export interface MessageSendPayload {
     value: string;
     attachments: SenderAttachment[];
@@ -44,19 +60,23 @@ export interface SenderProps {
     value?: string;
     placeholder?: string;
     disabled?: boolean;
+    inputDisabled?: boolean;
+    sendDisabled?: boolean;
+    stopDisabled?: boolean;
     readonly?: boolean;
     generating?: boolean;
     loading?: boolean;
-    type?: SenderType;
+    fileView?: SenderFileView;
+    uploadButton?: SenderUploadButton;
+    buttonTooltip?: SenderButtonTooltipConfig;
     dragFile?: boolean;
     pasteFile?: boolean;
     /** 整个输入外框 `k-sender` 的宽度，数字会按 `px` 处理 */
     width?: number | string;
-    /** 整个输入外框 `k-sender-shell` 的最大高度（非文本域单宽），未传时默认 300 */
+    /** 整个输入外框 `k-sender-shell` 的最大高度，包含附件区、beforeInput、输入区和工具栏，不包含 header/footer。 */
     maxHeight?: number | string;
     attachments?: SenderAttachment[];
     uploadProps?: SenderUploadProps;
-    showAttachmentsButton?: boolean;
     submitOnEnter?: boolean;
     clearOnSend?: boolean;
 }
@@ -74,10 +94,11 @@ export interface SenderEvents {
 }
 export interface SenderBlocks {
     header: null;
+    prefix: null;
     beforeInput: null;
     footer: null;
     configure: null;
-    attachmentsButton: null;
+    uploadButton: UploadButtonSlotParams;
     sendButton: SendButtonSlotParams;
 }
 export declare class Sender extends Component<SenderProps, SenderEvents, SenderBlocks> {
@@ -99,6 +120,8 @@ export declare class Sender extends Component<SenderProps, SenderEvents, SenderB
     submit(): void;
     /** 清空输入框与附件列表，并中止进行中的上传；不影响 generating / loading 等受控状态。 */
     clear(): void;
+    /** 复用 Sender 内置上传逻辑添加本地文件，适合自定义附件弹窗确认后调用。 */
+    addFiles(files: FileList | File[]): void;
     /** 主动触发停止生成，等价于点击生成中的停止按钮。 */
     stopGenerate(): void;
 }

package/components/sender/sender.js

@@ -12,17 +12,21 @@ var typeDefs = {
   value: String,
   placeholder: String,
   disabled: Boolean,
+  inputDisabled: Boolean,
+  sendDisabled: Boolean,
+  stopDisabled: Boolean,
   readonly: Boolean,
   generating: Boolean,
   loading: Boolean,
-  type: ['text', 'image'],
+  fileView: ['card', 'media'],
+  uploadButton: ['toolbar', 'list', 'none'],
+  buttonTooltip: Object,
   dragFile: Boolean,
   pasteFile: Boolean,
   width: [String, Number],
   maxHeight: [String, Number],
   attachments: Array,
   uploadProps: Object,
-  showAttachmentsButton: Boolean,
   submitOnEnter: Boolean,
   clearOnSend: Boolean
 };
@@ -31,17 +35,21 @@ var defaults = function defaults() {
     value: '',
     placeholder: undefined,
     disabled: false,
+    inputDisabled: false,
+    sendDisabled: false,
+    stopDisabled: false,
     readonly: false,
     generating: false,
     loading: false,
-    type: 'text',
+    fileView: 'card',
+    uploadButton: 'toolbar',
+    buttonTooltip: undefined,
     dragFile: false,
     pasteFile: false,
     width: 640,
-    maxHeight: undefined,
+    maxHeight: 300,
     attachments: undefined,
     uploadProps: undefined,
-    showAttachmentsButton: true,
     submitOnEnter: true,
     clearOnSend: true
   };
@@ -98,9 +106,12 @@ export var Sender = /*#__PURE__*/function (_Component) {
       void this.upload.clearAttachments();
     }
   }
+  /** 复用 Sender 内置上传逻辑添加本地文件，适合自定义附件弹窗确认后调用。 */;
+  _proto.addFiles = function addFiles(files) {
+    void this.upload.addFiles(files);
+  }
   /** 主动触发停止生成，等价于点击生成中的停止按钮。 */;
   _proto.stopGenerate = function stopGenerate() {
-    if (!this.get('generating')) return;
     this.input.stopGenerate();
   };
   return Sender;

package/components/sender/sender.vdt.js

@@ -1,8 +1,11 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js/instance/starts-with";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
-import { createElementVNode as _$ce, className as _$cn, createUnknownComponentVNode as _$cc, createVNode as _$cv, extend as _$ex, EMPTY_OBJ as _$em, noop as _$no, createCommentVNode as _$ccv } from 'intact-vue-next';
+import { createUnknownComponentVNode as _$cc, className as _$cn, createElementVNode as _$ce, createVNode as _$cv, extend as _$ex, EMPTY_OBJ as _$em, noop as _$no, createCommentVNode as _$ccv } from 'intact-vue-next';
 import { FileCardList } from '../fileCard';
 import { Icon } from '../icon';
+import { Tooltip } from '../tooltip';
 import { addStyle, getRestProps } from '../utils';
 import { makeStyles } from './styles';
 import { senderSendIcon, senderStopIcon, senderAttachSvg } from './icons';
@@ -25,9 +28,11 @@ export default function ($props, $blocks, $__proto__) {
   var _this$input = this.input,
     isFocus = _this$input.isFocus,
     isDisabled = _this$input.isDisabled,
+    isInputDisabled = _this$input.isInputDisabled,
     isGenerating = _this$input.isGenerating,
     isLoading = _this$input.isLoading,
     isSendButtonDisabled = _this$input.isSendButtonDisabled,
+    isStopButtonDisabled = _this$input.isStopButtonDisabled,
     handleKeydown = _this$input.handleKeydown,
     handleInput = _this$input.handleInput,
     handleFocus = _this$input.handleFocus,
@@ -38,6 +43,7 @@ export default function ($props, $blocks, $__proto__) {
   var _this$upload = this.upload,
     getAcceptAttr = _this$upload.getAcceptAttr,
     isMultiple = _this$upload.isMultiple,
+    addFiles = _this$upload.addFiles,
     onInputChange = _this$upload.onInputChange,
     pickFiles = _this$upload.pickFiles,
     removeAttachment = _this$upload.removeAttachment;
@@ -51,11 +57,12 @@ export default function ($props, $blocks, $__proto__) {
     readonly = _this$get.readonly,
     width = _this$get.width,
     maxHeight = _this$get.maxHeight,
-    type = _this$get.type,
+    fileView = _this$get.fileView,
+    uploadButton = _this$get.uploadButton,
     enableDragFile = _this$get.dragFile,
     attachments = _this$get.attachments,
-    showAttachmentsButton = _this$get.showAttachmentsButton,
-    uploadProps = _this$get.uploadProps;
+    uploadProps = _this$get.uploadProps,
+    buttonTooltip = _this$get.buttonTooltip;
   var k = this.config.k;
   var isEmptySlot = function isEmptySlot(value) {
     if (isInvalid(value) || value === undefined || value === null || value === '') return true;
@@ -65,35 +72,47 @@ export default function ($props, $blocks, $__proto__) {
     if (value && value.type === 1) return isEmptySlot(value.children);
     return false;
   };
-  var renderSlot = function renderSlot(name) {
-    return $blocks[name] ? $blocks[name](noop) : undefined;
+  var renderSlot = function renderSlot(name, params) {
+    return $blocks[name] ? $blocks[name](noop, params) : undefined;
   };
   var headerSlot = renderSlot('header');
   var footerSlot = renderSlot('footer');
+  var prefixSlot = renderSlot('prefix');
   var beforeInputSlot = renderSlot('beforeInput');
   var configureSlot = renderSlot('configure');
-  var attachmentsButtonSlot = renderSlot('attachmentsButton');
   var hasHeaderSlot = !isEmptySlot(headerSlot);
   var hasFooterSlot = !isEmptySlot(footerSlot);
+  var hasPrefixSlot = !isEmptySlot(prefixSlot);
   var hasBeforeInputSlot = !isEmptySlot(beforeInputSlot);
   var hasConfigureSlot = !isEmptySlot(configureSlot);
-  var hasAttachmentsButtonSlot = !isEmptySlot(attachmentsButtonSlot);
   var disabled = isDisabled();
+  var inputDisabled = isInputDisabled();
   var generating = isGenerating();
   var loading = isLoading();
-  var sendDisabled = isSendButtonDisabled();
+  var sendButtonDisabled = isSendButtonDisabled();
+  var stopButtonDisabled = isStopButtonDisabled();
   var list = attachments || [];
   var hasAttachments = list.length > 0;
   var limit = uploadProps && uploadProps.limit;
   var reachLimit = limit !== undefined && limit !== null && list.length >= Number(limit);
-  var isImage = type === 'image';
+  var isMediaView = fileView === 'media';
   var isDirectory = !!(uploadProps && uploadProps.directory);
+  var showToolbarUploadButton = uploadButton === 'toolbar';
+  var showListUploadButton = uploadButton === 'list';
+  var getMediaItemType = function getMediaItemType(type) {
+    var _context;
+    var value = _trimInstanceProperty(_context = (type || '').toLowerCase()).call(_context);
+    if (value === 'image' || value === 'video' || value === 'audio' || _startsWithInstanceProperty(value).call(value, 'image/') || _startsWithInstanceProperty(value).call(value, 'video/') || _startsWithInstanceProperty(value).call(value, 'audio/')) {
+      return type;
+    }
+    return undefined;
+  };
 
-  // 文本模式下，所有附件统一按「文件卡」呈现，避免引入额外的文件夹展示语义。
-  // 图片模式下把 type 交给 FileCard 自动识别（基于 name/src），避免业务透传 MIME 干扰媒体类型判断。
-  var renderItems = isImage ? _mapInstanceProperty(list).call(list, function (it) {
+  // card 视图下，所有附件统一按「文件卡」呈现，避免引入额外的文件夹展示语义。
+  // media 视图下保留明确媒体类型，但忽略 application/octet-stream 等泛 MIME，继续交给 FileCard 基于 name/src 识别。
+  var renderItems = isMediaView ? _mapInstanceProperty(list).call(list, function (it) {
     return _extends({}, it, {
-      type: undefined
+      type: getMediaItemType(it.type)
     });
   }) : _mapInstanceProperty(list).call(list, function (it) {
     return _extends({}, it, {
@@ -101,12 +120,8 @@ export default function ($props, $blocks, $__proto__) {
     });
   });
 
-  // 图片模式即便没有附件也要展示 FileCardList，用来承载末尾的虚线 + 框。
-  var showAttachmentsArea = isImage || hasAttachments;
-  // 图片模式下不展示左下默认附件按钮，由 FileCardList 末尾的 + 框替代；用户自定义 slot 仍可保留。
-  var showDefaultAttachBtn = !isImage && !$blocks.attachmentsButton && showAttachmentsButton !== false;
-  var showAttachSlot = !isImage && hasAttachmentsButtonSlot;
-  var showToolbarLeft = showAttachSlot || showDefaultAttachBtn;
+  // 列表入口即便没有附件也要展示 FileCardList，用来承载前置上传按钮。
+  var showAttachmentsArea = showListUploadButton || hasAttachments;
   var onAttachmentClick = function onAttachmentClick(item, e) {
     _this.trigger('attachmentClick', item, e);
   };
@@ -114,7 +129,7 @@ export default function ($props, $blocks, $__proto__) {
     _this.trigger('attachmentDelete', item, e);
     removeAttachment(item);
   };
-  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-sender"] = true, _classNameObj[k + "-sender-" + type] = true, _classNameObj[k + "-sender-disabled"] = disabled, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-sender"] = true, _classNameObj[k + "-sender-file-view-" + fileView] = true, _classNameObj[k + "-sender-disabled"] = disabled, _classNameObj[k + "-sender-input-disabled"] = inputDisabled, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
 
   // 整个输入外框 k-sender 的宽度
   if (width != null) {
@@ -128,39 +143,81 @@ export default function ($props, $blocks, $__proto__) {
     maxHeight: isNumber(maxHeight) ? maxHeight + "px" : maxHeight
   } : undefined;
   var placeholderText = placeholder != null ? placeholder : _$('输入对话内容（Enter发送， Shift + Enter 换行）');
-  var defaultSendButton = _$ce(2, 'button', _$ce(2, 'img', null, 1, _$cn(k + "-sender-send-icon"), {
+  var getButtonTooltip = function getButtonTooltip(name) {
+    var value = buttonTooltip && buttonTooltip[name];
+    return value;
+  };
+  var renderButtonWithTooltip = function renderButtonWithTooltip(button, content, className) {
+    return _$cc(Tooltip, {
+      'content': content,
+      'className': _$cn(className),
+      'children': button
+    });
+  };
+  var sendButtonText = _$('发送');
+  var stopButtonText = _$('停止生成');
+  var uploadButtonText = isDirectory ? _$('上传文件夹') : _$('上传附件');
+  var listUploadButtonText = _$('参考内容');
+  var currentSendButtonTooltip = getButtonTooltip(generating ? 'stop' : 'send');
+  var currentSendButtonAriaLabel = generating ? stopButtonText : sendButtonText;
+  var currentUploadButtonTooltip = getButtonTooltip('upload');
+  var currentListUploadButtonTooltip = getButtonTooltip('listUpload');
+  var sendButtonTitle = currentSendButtonTooltip === undefined ? currentSendButtonAriaLabel : undefined;
+  var uploadButtonTitle = currentUploadButtonTooltip === undefined ? uploadButtonText : undefined;
+  var listUploadButtonTitle = currentListUploadButtonTooltip === undefined ? listUploadButtonText : undefined;
+  var defaultSendButtonInner = _$ce(2, 'button', _$ce(2, 'img', null, 1, _$cn(k + "-sender-send-icon"), {
     'src': generating ? senderStopIcon : senderSendIcon,
     'alt': '',
     'draggable': false
   }), 2, _$cn(k + "-sender-send-btn"), {
     'type': 'button',
-    'disabled': !generating && sendDisabled,
+    'disabled': generating ? stopButtonDisabled : sendButtonDisabled,
     'ev-click': handleSendClick,
-    'title': generating ? _$('停止生成') : _$('发送'),
-    'aria-label': generating ? _$('停止生成') : _$('发送')
+    'title': sendButtonTitle,
+    'aria-label': currentSendButtonAriaLabel
   });
-  var defaultAttachButton = _$ce(2, 'button', null, 1, _$cn(k + "-sender-attach-btn"), {
+  var defaultSendButton = typeof currentSendButtonTooltip === 'string' ? renderButtonWithTooltip(defaultSendButtonInner, currentSendButtonTooltip, k + "-sender-send-tooltip") : defaultSendButtonInner;
+  var defaultAttachButtonInner = _$ce(2, 'button', null, 1, _$cn(k + "-sender-attach-btn"), {
     'type': 'button',
-    'disabled': disabled,
+    'disabled': inputDisabled || reachLimit,
     'ev-click': pickFiles,
-    'title': isDirectory ? _$('上传文件夹') : _$('上传附件'),
-    'aria-label': isDirectory ? _$('上传文件夹') : _$('上传附件'),
+    'title': uploadButtonTitle,
+    'aria-label': uploadButtonText,
     'innerHTML': senderAttachSvg
   });
+  var defaultAttachButton = typeof currentUploadButtonTooltip === 'string' ? renderButtonWithTooltip(defaultAttachButtonInner, currentUploadButtonTooltip, k + "-sender-upload-tooltip") : defaultAttachButtonInner;
+  var getUploadButtonSlotParams = function getUploadButtonSlotParams(position) {
+    return {
+      disabled: inputDisabled,
+      reachLimit: reachLimit,
+      position: position,
+      addFiles: addFiles,
+      pickFiles: pickFiles
+    };
+  };
+  var renderUploadButtonSlot = function renderUploadButtonSlot(position) {
+    var slot = renderSlot('uploadButton', getUploadButtonSlotParams(position));
+    return isEmptySlot(slot) ? undefined : slot;
+  };
 
-  // type='image' 末尾的虚线 + 框，与 Upload 画廊的 + 卡片视觉等效；点击触发文件选择。
-  var imageAddBox = _$ce(2, 'div', _$cc(Icon, {
-    'className': _$cn(k + "-icon-add-bold"),
-    'size': 'large'
-  }), 2, _$cn((_$cn2 = {}, _$cn2[k + "-sender-image-add"] = true, _$cn2[k + "-sender-image-add-disabled"] = disabled, _$cn2)), {
-    'ev-click': disabled ? undefined : pickFiles,
+  // 附件列表末尾的虚线 + 框
+  var listUploadButtonInner = _$ce(2, 'div', [_$cc(Icon, {
+    'className': _$cn(k + "-icon-add-bold")
+  }), _$ce(2, 'div', listUploadButtonText, 0, _$cn(k + "-sender-list-upload-text"))], 4, _$cn((_$cn2 = {}, _$cn2[k + "-sender-list-upload"] = true, _$cn2[k + "-sender-list-upload-disabled"] = inputDisabled, _$cn2)), {
+    'ev-click': inputDisabled ? undefined : pickFiles,
     'role': 'button',
-    'title': _$('上传图片'),
-    'aria-label': _$('上传图片')
+    'title': listUploadButtonTitle,
+    'aria-label': listUploadButtonText
   });
+  var listUploadButton = typeof currentListUploadButtonTooltip === 'string' ? renderButtonWithTooltip(listUploadButtonInner, currentListUploadButtonTooltip, k + "-sender-list-upload-tooltip") : listUploadButtonInner;
+  var toolbarUploadButtonSlot = showToolbarUploadButton ? renderUploadButtonSlot('toolbar') : undefined;
+  var listUploadButtonSlot = showListUploadButton ? renderUploadButtonSlot('list') : undefined;
+  var showDefaultToolbarUploadButton = showToolbarUploadButton && !toolbarUploadButtonSlot;
+  var showToolbarLeft = showToolbarUploadButton;
   var sendButtonSlotParams = {
     generating: generating,
-    disabled: sendDisabled,
+    disabled: sendButtonDisabled,
+    stopDisabled: stopButtonDisabled,
     loading: loading,
     send: send,
     stopGenerate: stopGenerate
@@ -169,21 +226,22 @@ export default function ($props, $blocks, $__proto__) {
     'className': _$cn(classNameObj)
   }, getRestProps(this), {
     'style': style
-  }), [hasHeaderSlot ? _$ce(2, 'div', headerSlot, 0, _$cn(k + "-sender-header")) : undefined, _$ce(2, 'div', [showAttachmentsArea ? _$ce(2, 'div', isImage ? _$cc(FileCardList, {
+  }), [hasHeaderSlot ? _$ce(2, 'div', headerSlot, 0, _$cn(k + "-sender-header")) : undefined, _$ce(2, 'div', [showAttachmentsArea ? _$ce(2, 'div', isMediaView ? _$cc(FileCardList, {
     'items': renderItems,
     'deleteable': true,
     'overflow': 'scrollY',
+    'showNameTooltip': true,
     'ev-click': onAttachmentClick,
     'ev-delete': onAttachmentDelete,
     '$blocks': function ($blocks) {
       var _$blocks = {},
         __$blocks = _$ex({}, $blocks);
-      return (_$blocks['extension'] = function ($super) {
-        return !disabled && !reachLimit ? imageAddBox : undefined;
-      }, __$blocks['extension'] = function ($super, data) {
-        var block = $blocks['extension'];
+      return (_$blocks['prefix'] = function ($super) {
+        return showListUploadButton && !reachLimit ? listUploadButtonSlot || listUploadButton : undefined;
+      }, __$blocks['prefix'] = function ($super, data) {
+        var block = $blocks['prefix'];
         var callBlock = function callBlock() {
-          return _$blocks['extension'].call($this, $super, data);
+          return _$blocks['prefix'].call($this, $super, data);
         };
         return block ? block.call($this, callBlock, data) : callBlock();
       }), __$blocks;
@@ -192,20 +250,34 @@ export default function ($props, $blocks, $__proto__) {
     'items': renderItems,
     'deleteable': true,
     'overflow': 'scrollY',
+    'showNameTooltip': true,
     'ev-click': onAttachmentClick,
-    'ev-delete': onAttachmentDelete
-  }), 2, _$cn((_$cn3 = {}, _$cn3[k + "-sender-attachments"] = true, _$cn3[k + "-sender-attachments-" + type] = true, _$cn3))) : undefined, hasBeforeInputSlot ? _$ce(2, 'div', beforeInputSlot, 0, _$cn(k + "-sender-before-input")) : undefined, _$ce(2, 'div', _$ce(256, 'textarea', null, 1, _$cn(k + "-sender-input"), {
+    'ev-delete': onAttachmentDelete,
+    '$blocks': function ($blocks) {
+      var _$blocks = {},
+        __$blocks = _$ex({}, $blocks);
+      return (_$blocks['prefix'] = function ($super) {
+        return showListUploadButton && !reachLimit ? listUploadButtonSlot || listUploadButton : undefined;
+      }, __$blocks['prefix'] = function ($super, data) {
+        var block = $blocks['prefix'];
+        var callBlock = function callBlock() {
+          return _$blocks['prefix'].call($this, $super, data);
+        };
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }), __$blocks;
+    }.call($this, _$em)
+  }), 2, _$cn((_$cn3 = {}, _$cn3[k + "-sender-attachments"] = true, _$cn3[k + "-sender-attachments-" + fileView] = true, _$cn3))) : undefined, hasBeforeInputSlot ? _$ce(2, 'div', beforeInputSlot, 0, _$cn(k + "-sender-before-input")) : undefined, _$ce(2, 'div', [hasPrefixSlot ? _$ce(2, 'div', prefixSlot, 0, _$cn(k + "-sender-prefix")) : undefined, _$ce(256, 'textarea', null, 1, _$cn(k + "-sender-input"), {
     'rows': 1,
     'value': value,
     'placeholder': placeholderText,
-    'disabled': disabled,
+    'disabled': inputDisabled,
     'readOnly': readonly,
     'ev-input': handleInput,
     'ev-keydown': handleKeydown,
     'ev-paste': handlePaste,
     'ev-focus': handleFocus,
     'ev-blur': handleBlur
-  }, null, this.textareaRef), 2, _$cn(k + "-sender-input-area")), _$ce(2, 'div', [showToolbarLeft ? _$ce(2, 'div', showAttachSlot ? attachmentsButtonSlot : showDefaultAttachBtn ? defaultAttachButton : undefined, 0, _$cn(k + "-sender-toolbar-left")) : undefined, hasConfigureSlot ? _$ce(2, 'div', configureSlot, 0, _$cn(k + "-sender-toolbar-middle")) : undefined, _$ce(2, 'div', $blocks.sendButton ? (_$blocks['sendButton'] = function ($super) {
+  }, null, this.textareaRef)], 0, _$cn(k + "-sender-input-area")), _$ce(2, 'div', [showToolbarLeft ? _$ce(2, 'div', toolbarUploadButtonSlot ? toolbarUploadButtonSlot : showDefaultToolbarUploadButton ? defaultAttachButton : undefined, 0, _$cn(k + "-sender-toolbar-left")) : undefined, hasConfigureSlot ? _$ce(2, 'div', configureSlot, 0, _$cn(k + "-sender-toolbar-middle")) : undefined, _$ce(2, 'div', $blocks.sendButton ? (_$blocks['sendButton'] = function ($super) {
     return null;
   }, __$blocks['sendButton'] = function ($super, data) {
     var block = $blocks['sendButton'];
@@ -220,7 +292,7 @@ export default function ($props, $blocks, $__proto__) {
     'directory': isDirectory ? '' : undefined,
     'webkitdirectory': isDirectory ? '' : undefined,
     'ev-change': onInputChange
-  }, null, this.fileInputRef)], 0, _$cn((_$cn4 = {}, _$cn4[k + "-sender-shell"] = true, _$cn4[k + "-sender-active"] = isFocus.value && !disabled, _$cn4)), {
+  }, null, this.fileInputRef)], 0, _$cn((_$cn4 = {}, _$cn4[k + "-sender-shell"] = true, _$cn4[k + "-sender-active"] = isFocus.value && !inputDisabled, _$cn4)), {
     'style': shellStyle
   }), hasFooterSlot ? _$ce(2, 'div', footerSlot, 0, _$cn(k + "-sender-footer")) : undefined, enableDragFile && dragController.dragOver.value ? _$ce(2, 'div', _$ce(2, 'div', [_$cc(Icon, {
     'className': _$cn(k + "-icon-upload"),

package/components/sender/styles.js

@@ -21,22 +21,31 @@ var defaults = {
   bg: '#FFFFFF',
   color: theme.color.text,
   placeholderColor: theme.color.placeholder,
-  disabledBg: theme.color.disabledBg,
+  disabledBg: theme.color.bg,
   disabledColor: theme.color.disabled,
   fontSize: theme.fontSize,
   lineHeight: 1.5,
+  prefixGap: '8px',
+  prefixColor: '#868A9C',
   gradientDefault: SENDER_GRADIENT_DEFAULT,
   gradientActive: SENDER_GRADIENT_ACTIVE,
+  activeBackdropFilter: 'blur(4px)',
+  activeShadow: ['0px 4px 6px -4px rgba(0, 0, 0, 0.102)', '3px -3px 16px -5px rgba(113, 47, 255, 0.102)', '-3px 3px 14px -4px rgba(83, 112, 255, 0.102)'].join(', '),
   sendButtonSize: '32px',
   attachButtonSize: '16px',
   attachIconColor: '#868A9C',
-  attachIconHoverColor: theme.color.primary,
-  // type='image' 末尾的 + 框，尺寸和 FileCard image default 对齐
-  imageAddSize: '64px',
-  imageAddRadius: '4px',
-  imageAddBg: '#FFFFFF',
-  imageAddBorder: '1px dashed #D0D5E0',
-  imageAddColor: '#868A9C',
+  get attachIconHoverColor() {
+    return theme.color.primary;
+  },
+  // 附件列表末尾上传入口，尺寸和 FileCard media default 对齐
+  listUploadSize: '64px',
+  listUploadRadius: '6px',
+  listUploadBg: '#FFFFFF',
+  listUploadBorder: '1px dashed #E5E8EE',
+  listUploadColor: '#868A9C',
+  listUploadIconSize: '16px',
+  listUploadTextFontSize: '12px',
+  listUploadIconToTextGap: '8px',
   dragMaskBg: 'rgba(255, 255, 255, 0.72)',
   dragCardColor: '#5370FF',
   dragCardTextColor: theme.color.text,
@@ -52,5 +61,5 @@ setDefault(function () {
   makeStyles == null || makeStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("position:relative;display:flex;flex-direction:column;box-sizing:border-box;.", k, "-sender-header,.", k, "-sender-footer{box-sizing:border-box;flex:0 0 auto;}.", k, "-sender-header{margin-bottom:", sender.gapHeaderToShell, ";}.", k, "-sender-footer{margin-top:", sender.gapShellToFooter, ";}.", k, "-sender-shell{position:relative;display:flex;flex-direction:column;box-sizing:border-box;max-height:", sender.shellMaxH, ";padding:", sender.padding, ";background:", sender.bg, ";border-radius:", sender.radius, ";transition:background ", theme.transition.middle, ";min-width:0;overflow:hidden;}.", k, "-sender-shell::before{content:'';position:absolute;inset:0;padding:1px;border-radius:inherit;background:", sender.gradientDefault, ";-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;transition:background ", theme.transition.middle, ",opacity ", theme.transition.middle, ";}.", k, "-sender-shell:hover::before,.", k, "-sender-shell.", k, "-sender-active::before{background:", sender.gradientActive, ";}&.", k, "-sender-disabled .", k, "-sender-shell::before{opacity:0.5;}&.", k, "-sender-disabled .", k, "-sender-shell{background:", sender.disabledBg, ";}.", k, "-sender-attachments{padding:0;box-sizing:border-box;min-width:0;flex:0 0 auto;}.", k, "-sender-attachments-image .", k, "-file-card-list{min-width:0;}.", k, "-sender-before-input{margin-bottom:", sender.gapTopToInput, ";padding:0;box-sizing:border-box;flex:0 0 auto;}.", k, "-sender-attachments+.", k, "-sender-before-input{margin-top:", sender.gapAttachToTop, ";}.", k, "-sender-attachments+.", k, "-sender-input-area{margin-top:", sender.gapTopToInput, ";}.", k, "-sender-input-area{position:relative;display:flex;flex:0 0 auto;min-height:0;margin-bottom:", sender.gapInputToToolbar, ";padding:0;box-sizing:border-box;}.", k, "-sender-input{flex:1 1 auto;width:100%;min-width:0;min-height:0;border:none;outline:none;resize:none;background:transparent;color:", sender.color, ";font-family:inherit;font-size:", sender.fontSize, ";line-height:", sender.lineHeight, ";padding:0;scrollbar-width:thin;scrollbar-color:transparent transparent;}.", k, "-sender-input::-webkit-scrollbar{width:8px;}.", k, "-sender-input::-webkit-scrollbar-track{background:transparent;}.", k, "-sender-input::-webkit-scrollbar-thumb{border-radius:999px;border:2px solid transparent;background:transparent;background-clip:content-box;}.", k, "-sender-input:hover{scrollbar-color:", sender.scrollbarThumb, " transparent;}.", k, "-sender-input:hover::-webkit-scrollbar-thumb{background:", sender.scrollbarThumb, ";background-clip:content-box;}.", k, "-sender-input:hover::-webkit-scrollbar-thumb:hover{background:", sender.scrollbarThumbHover, ";background-clip:content-box;}.", k, "-sender-input::placeholder{color:", sender.placeholderColor, ";}&.", k, "-sender-disabled .", k, "-sender-input{color:", sender.disabledColor, ";cursor:not-allowed;}.", k, "-sender-toolbar{display:flex;gap:8px;padding:0;box-sizing:border-box;flex:0 0 auto;}.", k, "-sender-toolbar-left{display:flex;align-items:center;gap:8px;margin-top:8px;flex:0 0 auto;}.", k, "-sender-toolbar-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;}.", k, "-sender-toolbar-middle{flex:1 1 auto;min-width:0;display:flex;align-items:flex-end;gap:8px;}.", k, "-sender-attach-btn{display:inline-flex;align-items:center;justify-content:center;width:", sender.attachButtonSize, ";height:", sender.attachButtonSize, ";border-radius:50%;background:transparent;border:none;padding:0;cursor:pointer;color:", sender.attachIconColor, ";transition:color ", theme.transition.small, ",background ", theme.transition.small, ";}.", k, "-sender-attach-btn:hover{color:", sender.attachIconHoverColor, ";}.", k, "-sender-attach-btn:disabled,&.", k, "-sender-disabled .", k, "-sender-attach-btn{color:", theme.color.disabled, ";cursor:not-allowed;background:transparent;}.", k, "-sender-attach-btn svg{display:block;}.", k, "-sender-send-btn{display:inline-flex;align-items:center;justify-content:center;width:", sender.sendButtonSize, ";height:", sender.sendButtonSize, ";background:transparent;border:none;padding:0;cursor:pointer;transition:filter ", theme.transition.small, ";}.", k, "-sender-send-btn:disabled{cursor:not-allowed;filter:opacity(0.5);}.", k, "-sender-send-btn:not(:disabled):hover{filter:opacity(0.85);}.", k, "-sender-send-icon{display:block;width:32px;height:32px;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(83, 112, 255, 0.32));}.", k, "-sender-image-add{display:inline-flex;align-items:center;justify-content:center;width:", sender.imageAddSize, ";height:", sender.imageAddSize, ";box-sizing:border-box;flex:0 0 auto;border-radius:", sender.imageAddRadius, ";border:", sender.imageAddBorder, ";background:", sender.imageAddBg, ";color:", sender.imageAddColor, ";cursor:pointer;transition:border-color ", theme.transition.small, ",color ", theme.transition.small, ";}.", k, "-sender-image-add:hover{border-color:", theme.color.primary, ";color:", theme.color.primary, ";}.", k, "-sender-image-add-disabled,.", k, "-sender-image-add-disabled:hover{cursor:not-allowed;border-color:", theme.color.border, ";color:", theme.color.disabled, ";}.", k, "-sender-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;top:-9999px;left:-9999px;}.", k, "-sender-drag-mask{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;background:", sender.dragMaskBg, ";backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}.", k, "-sender-drag-card{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:", sender.dragCardColor, ";}.", k, "-sender-drag-card .", k, "-icon{color:", sender.dragCardColor, ";font-size:32px;line-height:1;}.", k, "-sender-drag-text{color:", sender.dragCardTextColor, ";font-size:14px;font-weight:500;line-height:20px;}");
+  return /*#__PURE__*/css("position:relative;display:flex;flex-direction:column;box-sizing:border-box;.", k, "-sender-header,.", k, "-sender-footer{box-sizing:border-box;flex:0 0 auto;}.", k, "-sender-header{margin-bottom:", sender.gapHeaderToShell, ";}.", k, "-sender-footer{margin-top:", sender.gapShellToFooter, ";}.", k, "-sender-shell{position:relative;display:flex;flex-direction:column;box-sizing:border-box;max-height:", sender.shellMaxH, ";padding:", sender.padding, ";background:", sender.bg, ";border-radius:", sender.radius, ";transition:background ", theme.transition.middle, ",box-shadow ", theme.transition.middle, ";min-width:0;overflow:hidden;}.", k, "-sender-shell::before{content:'';position:absolute;inset:0;padding:1px;border-radius:inherit;background:", sender.gradientDefault, ";-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;transition:background ", theme.transition.middle, ",opacity ", theme.transition.middle, ";}&:not(.", k, "-sender-disabled) .", k, "-sender-shell:hover::before,.", k, "-sender-shell.", k, "-sender-active::before{background:", sender.gradientActive, ";}.", k, "-sender-shell.", k, "-sender-active{backdrop-filter:", sender.activeBackdropFilter, ";-webkit-backdrop-filter:", sender.activeBackdropFilter, ";box-shadow:", sender.activeShadow, ";}&.", k, "-sender-disabled .", k, "-sender-shell::before{opacity:0.5;}&.", k, "-sender-disabled .", k, "-sender-shell{background:", sender.disabledBg, ";}&.", k, "-sender-input-disabled .", k, "-sender-shell{background:", sender.disabledBg, ";}.", k, "-sender-attachments{padding:0;box-sizing:border-box;min-width:0;flex:0 0 auto;}.", k, "-sender-attachments-media .", k, "-file-card-list{min-width:0;}.", k, "-sender-before-input{margin-bottom:", sender.gapTopToInput, ";padding:0;box-sizing:border-box;flex:0 0 auto;}.", k, "-sender-attachments+.", k, "-sender-before-input{margin-top:", sender.gapAttachToTop, ";}.", k, "-sender-attachments+.", k, "-sender-input-area{margin-top:", sender.gapTopToInput, ";}.", k, "-sender-input-area{position:relative;display:flex;align-items:flex-start;flex:0 0 auto;min-height:0;margin-bottom:", sender.gapInputToToolbar, ";padding:0;box-sizing:border-box;}.", k, "-sender-prefix{display:inline-flex;align-items:center;flex:0 0 auto;min-height:calc(", sender.fontSize, " * ", sender.lineHeight, ");margin-right:", sender.prefixGap, ";color:", sender.prefixColor, ";line-height:", sender.lineHeight, ";}.", k, "-sender-input{flex:1 1 auto;width:0;min-width:0;min-height:0;border:none;outline:none;resize:none;background:transparent;color:", sender.color, ";font-family:inherit;font-size:", sender.fontSize, ";line-height:", sender.lineHeight, ";padding:0;scrollbar-width:thin;scrollbar-color:transparent transparent;}.", k, "-sender-input::-webkit-scrollbar{width:8px;}.", k, "-sender-input::-webkit-scrollbar-track{background:transparent;}.", k, "-sender-input::-webkit-scrollbar-thumb{border-radius:999px;border:2px solid transparent;background:transparent;background-clip:content-box;}.", k, "-sender-input:hover{scrollbar-color:", sender.scrollbarThumb, " transparent;}.", k, "-sender-input:hover::-webkit-scrollbar-thumb{background:", sender.scrollbarThumb, ";background-clip:content-box;}.", k, "-sender-input:hover::-webkit-scrollbar-thumb:hover{background:", sender.scrollbarThumbHover, ";background-clip:content-box;}.", k, "-sender-input::placeholder{color:", sender.placeholderColor, ";}&.", k, "-sender-disabled .", k, "-sender-input,&.", k, "-sender-input-disabled .", k, "-sender-input{color:", sender.disabledColor, ";cursor:not-allowed;}.", k, "-sender-toolbar{display:flex;gap:8px;padding:0;box-sizing:border-box;flex:0 0 auto;}.", k, "-sender-toolbar-left{display:flex;align-items:center;gap:8px;margin-top:8px;flex:0 0 auto;}.", k, "-sender-toolbar-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;}.", k, "-sender-toolbar-middle{flex:1 1 auto;min-width:0;display:flex;align-items:flex-end;gap:8px;}.", k, "-sender-attach-btn{display:inline-flex;align-items:center;justify-content:center;width:", sender.attachButtonSize, ";height:", sender.attachButtonSize, ";border-radius:50%;background:transparent;border:none;padding:0;cursor:pointer;color:", sender.attachIconColor, ";transition:color ", theme.transition.small, ",background ", theme.transition.small, ";}.", k, "-sender-attach-btn:hover{color:", sender.attachIconHoverColor, ";}.", k, "-sender-attach-btn:disabled,&.", k, "-sender-disabled .", k, "-sender-attach-btn,&.", k, "-sender-input-disabled .", k, "-sender-attach-btn{color:", theme.color.disabled, ";cursor:not-allowed;background:transparent;}.", k, "-sender-attach-btn svg{display:block;}.", k, "-sender-send-btn{display:inline-flex;align-items:center;justify-content:center;width:", sender.sendButtonSize, ";height:", sender.sendButtonSize, ";background:transparent;border:none;padding:0;cursor:pointer;transition:filter ", theme.transition.small, ";}.", k, "-sender-send-btn:disabled{cursor:not-allowed;filter:opacity(0.5);}.", k, "-sender-send-btn:not(:disabled):hover{filter:opacity(0.85);}.", k, "-sender-send-icon{display:block;width:32px;height:32px;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(83, 112, 255, 0.32));}.", k, "-sender-list-upload{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:", sender.listUploadIconToTextGap, ";width:", sender.listUploadSize, ";height:", sender.listUploadSize, ";box-sizing:border-box;flex:0 0 auto;padding:0;border-radius:", sender.listUploadRadius, ";border:", sender.listUploadBorder, ";background:", sender.listUploadBg, ";color:", sender.listUploadColor, ";cursor:pointer;transition:border-color ", theme.transition.small, ",color ", theme.transition.small, ";}.", k, "-sender-list-upload .", k, "-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:", sender.listUploadIconSize, ";height:", sender.listUploadIconSize, ";color:inherit;font-size:", sender.listUploadIconSize, ";line-height:1;transition:color ", theme.transition.small, ";}.", k, "-sender-list-upload-text{flex:0 0 auto;font-size:", sender.listUploadTextFontSize, ";line-height:1;color:inherit;transition:color ", theme.transition.small, ";}.", k, "-sender-list-upload:hover{border-color:", theme.color.primary, ";color:", theme.color.primary, ";}.", k, "-sender-list-upload:hover .", k, "-icon,.", k, "-sender-list-upload:hover .", k, "-sender-list-upload-text{color:inherit;}.", k, "-sender-list-upload-disabled,.", k, "-sender-list-upload-disabled:hover{cursor:not-allowed;border:", sender.listUploadBorder, ";color:", theme.color.disabled, ";}.", k, "-sender-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;top:-9999px;left:-9999px;}.", k, "-sender-drag-mask{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;background:", sender.dragMaskBg, ";backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}.", k, "-sender-drag-card{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:", sender.dragCardColor, ";}.", k, "-sender-drag-card .", k, "-icon{color:", sender.dragCardColor, ";font-size:32px;line-height:1;}.", k, "-sender-drag-text{color:", sender.dragCardTextColor, ";font-size:14px;font-weight:500;line-height:20px;}");
 });

package/components/sender/useAutoResize.js

@@ -1,10 +1,11 @@
 import _Number$isFinite from "@babel/runtime-corejs3/core-js/number/is-finite";
 import { useInstance, onMounted, onUpdated, nextTick } from 'intact-vue-next';
 import { useConfigContext } from '../config';
-// textarea 高度自适应：textarea 默认高 text=64、image=32；maxHeight 约束整个输入外框而非 textarea 本身。
+// textarea 高度自适应：默认保留 64 的输入区高度；当上传入口放进附件列表时压缩为单行输入。
+// maxHeight 约束整个输入外框而非 textarea 本身。
 var SHELL_MAX_FALLBACK = 300;
-var TEXTAREA_MIN_TEXT = 64;
-var TEXTAREA_MIN_IMAGE = 20;
+var TEXTAREA_MIN_DEFAULT = 64;
+var TEXTAREA_MIN_LIST_UPLOAD = 20;
 export function useAutoResize(textareaRef) {
   var instance = useInstance();
   var _useConfigContext = useConfigContext(),
@@ -45,8 +46,8 @@ export function useAutoResize(textareaRef) {
     if (!el) return;
     var shell = getShell(el);
     if (!shell) return;
-    var isImage = instance.get('type') === 'image';
-    var min = isImage ? TEXTAREA_MIN_IMAGE : TEXTAREA_MIN_TEXT;
+    var isListUpload = instance.get('uploadButton') === 'list';
+    var min = isListUpload ? TEXTAREA_MIN_LIST_UPLOAD : TEXTAREA_MIN_DEFAULT;
     /** 整框最大高度（props 或默认 300），从实际 CSS 读取，支持 50vh 等合法 CSS 值 */
     var shellMax = getShellMaxHeight(shell);
     var nonInputH = measureNonInputBlockHeight(el, shell);
@@ -85,7 +86,7 @@ export function useAutoResize(textareaRef) {
     inited: true,
     presented: true
   });
-  instance.watch('type', scheduleAdjust, {
+  instance.watch('uploadButton', scheduleAdjust, {
     inited: true,
     presented: true
   });

package/components/sender/useSenderDrag.js

@@ -230,8 +230,11 @@ function _extractDroppedFiles() {
 export function useSenderDrag(addFiles) {
   var instance = useInstance();
   var dragOver = useState(false);
+  function isInputDisabled() {
+    return !!instance.get('disabled') || !!instance.get('inputDisabled');
+  }
   function isEnabled() {
-    return !!instance.get('dragFile') && !instance.get('disabled');
+    return !!instance.get('dragFile') && !isInputDisabled();
   }
   var controller = {
     dragOver: dragOver,
@@ -242,7 +245,7 @@ export function useSenderDrag(addFiles) {
       e.stopPropagation();
     },
     onDragEnter: function onDragEnter() {
-      if (instance.get('disabled')) return;
+      if (isInputDisabled()) return;
       controller.counter++;
       if (!dragOver.value) {
         dragOver.set(true);
@@ -259,7 +262,7 @@ export function useSenderDrag(addFiles) {
       var _instance$get, _e$dataTransfer2;
       controller.stopEvent(e);
       controller.reset();
-      if (instance.get('disabled')) return;
+      if (isInputDisabled()) return;
       var directoryEnabled = !!((_instance$get = instance.get('uploadProps')) != null && _instance$get.directory);
       var directFiles = (_e$dataTransfer2 = e.dataTransfer) == null ? void 0 : _e$dataTransfer2.files;
       if (!directoryEnabled && directFiles != null && directFiles.length) {
@@ -314,6 +317,12 @@ export function useSenderDrag(addFiles) {
     }
     syncController();
   });
+  instance.watch('inputDisabled', function (disabled) {
+    if (disabled) {
+      controller.reset();
+    }
+    syncController();
+  });
   return {
     dragOver: dragOver
   };

package/components/sender/useSenderInput.d.ts

@@ -2,9 +2,12 @@ import { RefObject } from 'intact-vue-next';
 export declare function useSenderInput(textareaRef: RefObject<HTMLTextAreaElement>): {
     isFocus: import("../../hooks/useState").State<boolean>;
     isDisabled: () => boolean;
+    isInputDisabled: () => boolean;
     isGenerating: () => boolean;
     isLoading: () => boolean;
     isSendButtonDisabled: () => boolean;
+    isStopButtonDisabled: () => boolean;
+    isSendDisabled: () => boolean;
     send: () => void;
     stopGenerate: () => void;
     handleKeydown: (e: KeyboardEvent) => void;