完善Markdown输入字段和发送按钮组件，添加详细的属性注释和功能描述

Author: chenshuai2144

src/MarkdownInputField/MarkdownInputField.tsx

@@ -7,17 +7,108 @@ import { BaseMarkdownEditor, MarkdownEditorInstance } from '../MarkdownEditor';
 import { SendButton } from './SendButton';
 import { useStyle } from './style';
 
+/**
+ * Markdown 输入字段的属性接口
+ *
+ * @interface MarkdownInputFieldProps
+ * @property {string} [value] - 输入字段的当前文本值
+ * @property {function} [onChange] - 当输入值改变时触发的回调函数
+ * @property {string} [placeholder] - 输入字段的占位文本
+ * @property {React.CSSProperties} [style] - 应用于输入字段的内联样式
+ * @property {string} [className] - 应用于输入字段的 CSS 类名
+ * @property {boolean} [disabled] - 是否禁用输入字段
+ * @property {boolean} [typing] - 用户是否正在输入的状态标志
+ * @property {'Enter' | 'Mod+Enter'} [triggerSendKey] - 触发发送操作的键盘快捷键
+ * @property {function} [onSend] - 当内容发送时触发的异步回调函数
+ */
+
 export type MarkdownInputFieldProps = {
+  /**
+   * 当前的 markdown 文本值。
+   * @example value="# Hello World"
+   */
   value?: string;
+
+  /**
+   * 当输入值改变时触发的回调函数。
+   * @param value The new markdown text value
+   * @example onChange={(newValue) => setMarkdown(newValue)}
+   */
   onChange?: (value: string) => void;
+
+  /**
+   * 输入字段的占位文本。
+   * @example placeholder="Type markdown here..."
+   */
   placeholder?: string;
+
+  /**
+   * 应用于输入字段的内联样式。
+   * @example style={{ minHeight: '200px' }}
+   */
   style?: React.CSSProperties;
+
+  /**
+   * 应用于输入字段的 CSS 类名。
+   * @example className="custom-markdown-input"
+   */
   className?: string;
+
+  /**
+   * 是否禁用输入字段。
+   * @example disabled={isSubmitting}
+   */
   disabled?: boolean;
+
+  /**
+   * 用户是否正在输入的状态标志。
+   * @example typing={isComposing}
+   */
   typing?: boolean;
+
+  /**
+   * 触发发送操作的键盘快捷键。
+   * - 'Enter': 回车键触发发送
+   * - 'Mod+Enter': 按下 Ctrl/Command + Enter 触发发送
+   * @example triggerSendKey="Mod+Enter"
+   */
+  triggerSendKey?: 'Enter' | 'Mod+Enter';
+
+  /**
+   * 当内容发送时触发的异步回调函数。
+   * 返回一个 Promise 对象，当发送成功后 resolve。
+   * @param value The current markdown text value
+   * @example onSend={async (text) => await submitMessage(text)}
+   */
   onSend?: (value: string) => Promise<void>;
 };
 
+/**
+ * @component MarkdownInputField
+ * @description 带发送功能的Markdown输入字段组件。允许用户编辑Markdown内容并通过按钮或快捷键发送。
+ *
+ * @param {MarkdownInputFieldProps} props - 组件属性
+ * @param {string} [props.value] - 输入字段的Markdown内容值
+ * @param {function} [props.onChange] - 当输入内容改变时的回调函数
+ * @param {function} [props.onSend] - 当内容发送时的回调函数，应返回Promise
+ * @param {boolean} [props.disabled] - 是否禁用输入字段
+ * @param {string} [props.className] - 自定义CSS类名
+ * @param {React.CSSProperties} [props.style] - 自定义样式
+ * @param {string} [props.placeholder] - 输入字段的占位文本
+ * @param {string} [props.triggerSendKey='Enter'] - 触发发送的键盘快捷键，可以是'Enter'或'Mod+Enter'
+ * @param {boolean} [props.typing] - 是否显示正在输入状态
+ *
+ * @returns {JSX.Element} 带样式和功能的Markdown输入字段组件
+ *
+ * @example
+ * <MarkdownInputField
+ *   value="# 标题"
+ *   onChange={(value) => console.log(value)}
+ *   onSend={(value) => Promise.resolve()}
+ *   placeholder="请输入Markdown文本..."
+ *   triggerSendKey="Mod+Enter"
+ * />
+ */
 export const MarkdownInputField: React.FC<MarkdownInputFieldProps> = (
   props,
 ) => {
@@ -60,7 +151,20 @@ export const MarkdownInputField: React.FC<MarkdownInputFieldProps> = (
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
       onKeyDown={(e) => {
-        if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        const { triggerSendKey = 'Enter' } = props;
+        if (triggerSendKey === 'Enter' && e.key === 'Enter') {
+          e.stopPropagation();
+          e.preventDefault();
+          if (props.onSend) {
+            sendMessage();
+          }
+          return;
+        }
+        if (
+          triggerSendKey === 'Mod+Enter' &&
+          (e.ctrlKey || e.metaKey) &&
+          e.key === 'Enter'
+        ) {
           e.stopPropagation();
           e.preventDefault();
           if (props.onSend) {

src/MarkdownInputField/SendButton/index.tsx

@@ -4,16 +4,68 @@ import React, { useContext, useEffect } from 'react';
 import { SendIcon } from './SendIcon';
 import { useStyle } from './style';
 
+/**
+ * Props for the SendButton component.
+ */
 type SendButtonProps = {
+  /**
+   * 指示按钮是否处于悬停状态
+   * Indicates whether the button is in a hover state.
+   */
   isHover: boolean;
+
+  /**
+   * 指示用户是否正在输入
+   * Indicates whether the user is currently typing.
+   */
   typing: boolean;
+
+  /**
+   * 点击按钮时触发的回调函数
+   * Callback function triggered when the button is clicked.
+   */
   onClick: () => void;
+
+  /**
+   * 应用于按钮的CSS样式
+   * CSS styles to be applied to the button.
+   */
   style: React.CSSProperties;
+
+  /**
+   * 按钮初始化时触发的回调函数
+   * Callback function triggered when the button is initialized.
+   */
   onInit?: () => void;
+
+  /**
+   * 是否使用紧凑模式显示按钮
+   * Whether to display the button in compact mode.
+   */
   compact?: boolean;
+
+  /**
+   * 按钮是否禁用
+   * Whether the button is disabled.
+   */
   disabled?: boolean;
 };
 
+/**
+ * 发送按钮组件
+ *
+ * 一个可点击的发送按钮，根据不同状态（悬停、禁用、输入中）呈现不同的视觉效果
+ *
+ * @param props - 按钮组件的属性
+ * @param props.isHover - 指示鼠标是否悬停在按钮上
+ * @param props.disabled - 指示按钮是否禁用
+ * @param props.typing - 指示是否处于输入状态
+ * @param props.onClick - 点击按钮时的回调函数
+ * @param props.style - 应用于按钮容器的自定义样式
+ * @param props.onInit - 组件初始化时调用的可选回调函数
+ * @param props.compact - 是否使用紧凑模式样式
+ * @returns 发送按钮组件
+ */
 export const SendButton: React.FC<SendButtonProps> = (props) => {
   const { isHover, disabled, typing, onClick, style } = props;
   useEffect(() => {