@opentiny/tiny-robot 0.1.0-alpha.0

package/src/sender/index.less

@@ -0,0 +1,344 @@
+@import './vars.less';
+
+// 主要组件样式
+.tiny-sender {
+  border: 1px solid var(--tr-sender-border-color);
+  border-radius: var(--tr-sender-border-radius);
+  background: var(--tr-sender-bg-color);
+  position: relative;
+  color: var(--tr-sender-text-color);
+  padding: var(--tr-sender-padding-top) var(--tr-sender-padding-right) var(--tr-sender-padding-bottom)
+    var(--tr-sender-padding-left);
+
+  // TinyUI 输入框调整
+  .tiny-input__prefix {
+    left: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  .tiny-input__inner {
+    border: none;
+    padding-left: 0;
+    padding-right: 16px;
+    background-color: var(--tr-sender-bg-color);
+    color: var(--tr-sender-text-color);
+
+    &::placeholder {
+      color: var(--tr-sender-text-color-secondary);
+    }
+  }
+
+  .tiny-input.is-disabled .tiny-input__inner {
+    border: none;
+    background: var(--tr-sender-bg-color);
+    color: var(--tr-sender-text-color-secondary);
+  }
+
+  .tiny-input__suffix {
+    right: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  .tiny-textarea__inner {
+    border: none;
+    height: var(--tr-sender-input-height);
+    padding-left: 0;
+    padding-right: 0;
+    background-color: var(--tr-sender-bg-color);
+    color: var(--tr-sender-text-color);
+
+    &::placeholder {
+      color: var(--tr-sender-text-color-secondary);
+    }
+  }
+
+  .tiny-textarea:before,
+  .tiny-textarea:after {
+    display: none;
+  }
+
+  // 内容容器 - 包含输入框、工具栏等
+  &__container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  // 输入行 - 横向布局，包含prefix、content、actions
+  &__input-row {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+  }
+
+  // 头部插槽
+  &__header-slot {
+    width: 100%;
+    max-height: var(--tr-sender-header-max-height);
+    min-height: var(--tr-sender-header-min-height);
+    overflow-y: auto;
+    border-radius: var(--tr-sender-border-radius) var(--tr-sender-border-radius) 0 0;
+    background: var(--tr-sender-bg-color);
+    padding: var(--tr-sender-header-padding);
+    margin-bottom: var(--tr-sender-gap);
+    z-index: 1;
+    border-bottom: 1px solid var(--tr-sender-border-color);
+  }
+
+  // 底部插槽
+  &__footer-slot {
+    width: 100%;
+    border-radius: 0 0 var(--tr-sender-border-radius) var(--tr-sender-border-radius);
+    background: var(--tr-sender-footer-bg);
+    margin-top: var(--tr-sender-gap);
+    z-index: 1;
+
+    &.tiny-sender__bottom-row {
+      padding: 2px 10px 10px 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .suggestion-item {
+      padding: var(--tr-sender-padding-top) var(--tr-sender-padding-right) var(--tr-sender-padding-bottom)
+        var(--tr-sender-padding-left);
+      cursor: pointer;
+      transition: background-color var(--tr-sender-transition-duration);
+
+      &:hover {
+        background: var(--tr-sender-footer-hover);
+      }
+    }
+  }
+
+  // 输入区域
+  &__input-wrapper {
+    position: relative;
+    width: 100%;
+    margin: var(--tr-sender-gap) 0;
+    border: none;
+    padding: 0;
+    border-radius: var(--tr-sender-border-radius);
+    box-shadow: var(--tr-sender-box-shadow);
+    background-color: var(--tr-sender-bg-color);
+    display: flex;
+    flex-direction: column;
+
+    .tiny-input__count {
+      display: flex;
+    }
+
+    .tiny-input__count-inner {
+      height: 22px;
+      right: 0;
+    }
+  }
+
+  // 内容区域
+  &__content-area {
+    flex: var(--tr-sender-content-flex-grow) 1 var(--tr-sender-content-min-width);
+    min-width: var(--tr-sender-content-min-width);
+    padding: var(--tr-sender-content-padding);
+    position: relative;
+    overflow: hidden;
+
+    // 当前置插槽存在时，调整内边距
+    .has-prefix & {
+      padding: var(--tr-sender-content-padding-with-prefix);
+    }
+
+    .has-header & {
+      padding-top: 0;
+    }
+
+    .tiny-textarea,
+    .tiny-input {
+      width: 100%;
+    }
+  }
+
+  // 前缀区域
+  &__prefix-slot {
+    width: var(--tr-sender-prefix-width);
+    min-width: var(--tr-sender-prefix-min-width);
+    flex: 0 0 var(--tr-sender-prefix-width); /* 固定宽度，不可伸缩 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--tr-sender-bg-color);
+    border-radius: var(--tr-sender-border-radius) 0 0 var(--tr-sender-border-radius);
+    transition: background-color var(--tr-sender-transition-duration);
+    padding-left: var(--tr-sender-prefix-padding-left);
+    padding-right: calc(var(--tr-sender-padding-right) / 2);
+
+    &:hover {
+      background-color: var(--tr-sender-prefix-hover-bg);
+    }
+  }
+
+  // 动作区域
+  &__actions-slot {
+    display: flex;
+    align-items: center;
+    gap: var(--tr-sender-actions-gap);
+    margin-left: auto;
+    flex: 0 0 auto; /* 不可伸缩，但可以根据内容自适应宽度 */
+    min-width: var(--tr-sender-actions-min-width);
+    padding-right: var(--tr-sender-actions-padding-right);
+
+    .button-icon {
+      font-size: var(--tr-sender-actions-icon-size);
+      transition: transform var(--tr-sender-transition-duration);
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  &__bottom-row {
+    padding: 2px 10px 10px 24px;
+  }
+
+  // 字数限制
+  &__word-limit {
+    font-size: var(--tr-sender-font-size);
+    font-weight: 400;
+    line-height: 22px;
+    text-align: left;
+    letter-spacing: 0;
+    color: var(--tr-sender-word-limit-color);
+  }
+
+  // 输入建议
+  &__suggestions {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    width: 100%;
+    background: var(--tr-sender-bg-color);
+    border: 1px solid var(--tr-sender-border-color);
+    border-radius: var(--tr-sender-border-radius);
+    box-shadow: var(--tr-sender-box-shadow);
+    z-index: 10;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  // 错误提示
+  &__error {
+    position: absolute;
+    bottom: -20px;
+    left: 0;
+    color: var(--tr-sender-error-color);
+    font-size: var(--tr-sender-font-size-small);
+  }
+
+  // 禁用状态
+  &.is-disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+
+  // 加载状态
+  &.is-loading {
+    cursor: wait;
+
+    .tiny-input__inner {
+      cursor: wait;
+      background-color: var(--tr-sender-bg-color);
+    }
+  }
+
+  // 错误状态
+  &.has-error {
+    border-color: var(--tr-sender-error-color);
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    &__prefix-slot {
+      width: var(--tr-sender-prefix-min-width);
+      min-width: var(--tr-sender-prefix-min-width);
+    }
+
+    &__actions-slot {
+      padding: 0 calc(var(--tr-sender-padding-right) / 2);
+      gap: calc(var(--tr-sender-actions-gap) / 2);
+      min-width: auto;
+    }
+
+    &__header-slot,
+    &__footer-slot {
+      padding: calc(var(--tr-sender-padding-top) / 2);
+    }
+
+    &__content-area {
+      min-width: 120px;
+    }
+  }
+}
+
+// ActionButtons组件样式
+.action-buttons {
+  display: flex;
+  gap: var(--tr-sender-gap);
+  padding: var(--tr-sender-padding-top) var(--tr-sender-padding-right) var(--tr-sender-padding-bottom)
+    var(--tr-sender-padding-left);
+  background: var(--tr-sender-bg-color);
+  border-radius: var(--tr-sender-border-radius);
+
+  /* 按钮图标统一样式 */
+  .button-icon {
+    font-size: var(--tr-sender-icon-size);
+    transition: transform var(--tr-sender-transition-duration);
+    fill: var(--tr-sender-button-icon-color);
+    color: var(--tr-sender-button-icon-color);
+    margin-right: 0;
+
+    &:hover {
+      transform: scale(1.1);
+      border-radius: 8px;
+      background-color: var(--tr-sender-prefix-hover-bg);
+    }
+  }
+
+  .submit-button {
+    margin-left: 0;
+  }
+
+  /* 禁用状态样式 */
+  .is-disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.button-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  position: relative;
+
+  // 当只有图标时保持居中
+  &:empty {
+    display: block;
+  }
+}
+
+.shortcut-hint {
+  position: absolute;
+  bottom: -16px;
+  font-size: 10px;
+  color: var(--tr-sender-text-color-secondary);
+  white-space: nowrap;
+  user-select: none;
+}
+
+/** 处理相邻按钮元素边界  */
+.tiny-button + .tiny-button {
+  margin-left: 0;
+}

package/src/sender/index.ts

@@ -0,0 +1,12 @@
+import { App } from 'vue'
+import Sender from './index.vue'
+
+Sender.name = 'TrSender'
+
+const install = function <T>(app: App<T>) {
+  app.component(Sender.name!, Sender)
+}
+
+Sender.install = install
+
+export default Sender as typeof Sender & { install: typeof install }

package/src/sender/index.type.ts

@@ -0,0 +1,111 @@
+import type { Ref } from 'vue'
+/**
+ * 组件核心类型定义
+ */
+
+// 主题类型
+export type ThemeType = 'light' | 'dark'
+
+// 输入模式类型
+export type InputMode = 'single' | 'multiple'
+
+// 提交触发方式
+export type SubmitTrigger = 'enter' | 'ctrlEnter' | 'shiftEnter'
+
+// 语音识别配置
+export interface SpeechConfig {
+  lang?: string // 识别语言，默认浏览器语言
+  continuous?: boolean // 是否持续识别
+  interimResults?: boolean // 是否返回中间结果
+  autoReplace?: boolean // 是否自动替换当前输入内容
+}
+
+export type AutoSize = boolean | { minRows: number; maxRows: number }
+
+// Sender组件属性
+export interface SenderProps {
+  autofocus?: boolean // 自动聚焦
+  autoSize?: AutoSize // 自适应内容高度
+  allowSpeech?: boolean // 是否允许语音识别
+  allowFiles?: boolean // 是否允许上传附件
+  clearable?: boolean // 是否显示清除按钮
+  disabled?: boolean // 禁用状态
+  defaultValue?: string | null // 默认值
+  debounceSubmit?: number // 提交防抖时间(ms)
+  loading?: boolean // 加载状态
+  modelValue?: string // 双向绑定值
+  mode?: InputMode // 输入框模式：单行/多行
+  maxLength?: number // 最大输入长度
+  submitType?: SubmitTrigger // 提交触发方式
+  speech?: boolean | SpeechConfig // 语音识别配置
+  placeholder?: string // 占位文本
+  showWordLimit?: boolean // 显示字数统计
+  suggestions?: string[] // 输入建议
+  theme?: ThemeType // 主题
+}
+
+export interface ActionButtonsProps {
+  loading?: boolean // 加载状态
+  disabled?: boolean // 是否禁用
+  showClear?: boolean // 是否可以清除
+  hasContent?: boolean // 是否有文本内容
+  allowSpeech?: boolean // 是否允许语音识别
+  speechStatus?: {
+    isRecording: boolean // 是否正在录制
+    isSupported: boolean // 是否支持语音识别
+  }
+  allowFiles?: boolean // 是否允许上传附件
+  submitType?: SubmitTrigger // 提交触发方式
+  showShortcuts?: boolean // 是否显示快捷键提示
+}
+
+// 组件事件定义
+export type SenderEmits = {
+  (e: 'update:modelValue', value: string): void
+  (e: 'submit', value: string): void
+  (e: 'clear'): void
+  (e: 'speech-start'): void
+  (e: 'speech-end', transcript?: string): void
+  (e: 'speech-interim', transcript: string): void
+  (e: 'speech-error', error: Error): void
+  (e: 'suggestion-select', value: string): void
+  (e: 'focus', event: FocusEvent): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'escape-press'): void // 按下Esc键时触发
+}
+
+// 语音识别状态
+export interface SpeechState {
+  isRecording: boolean // 是否正在录音
+  isSupported: boolean // 是否支持语音识别
+  error?: Error // 错误信息
+}
+
+// 语音识别Hook配置
+export interface SpeechHookOptions extends SpeechConfig {
+  onStart?: () => void
+  onEnd?: (transcript?: string) => void
+  onInterim?: (transcript: string) => void
+  onFinal?: (transcript: string) => void
+  onError?: (error: Error) => void
+}
+
+// 输入处理器返回类型
+export interface InputHandler {
+  inputValue: Ref<string>
+  isComposing: Ref<boolean>
+  clearInput: () => void
+}
+
+// 键盘处理器返回类型
+export interface KeyboardHandler {
+  handleKeyPress: (e: KeyboardEvent) => void
+  triggerSubmit: () => void
+}
+
+// 语音识别Hook返回类型
+export interface SpeechHandler {
+  speechState: SpeechState
+  start: () => void
+  stop: () => void
+}