@opentiny/tiny-robot 0.1.0-alpha.0

package/src/sender/index.vue

@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { TinyInput } from '@opentiny/vue'
+import type { SenderProps, SenderEmits, InputHandler, KeyboardHandler } from './index.type'
+import { useInputHandler } from './composables/useInputHandler'
+import { useKeyboardHandler } from './composables/useKeyboardHandler'
+import { useSpeechHandler } from './composables/useSpeechHandler'
+import ActionButtons from './components/ActionButtons.vue'
+import './index.less'
+
+const props = withDefaults(defineProps<SenderProps>(), {
+  autofocus: false,
+  autoSize: false,
+  allowSpeech: true,
+  allowFiles: false,
+  clearable: false,
+  disabled: false,
+  debounceSubmit: 300,
+  loading: false,
+  modelValue: '',
+  mode: 'single',
+  maxLength: Infinity,
+  placeholder: '请输入内容...',
+  showWordLimit: false,
+  submitType: 'enter',
+  theme: 'light',
+})
+
+const emit = defineEmits<SenderEmits>()
+
+// 输入引用
+const inputRef = ref<HTMLElement | null>(null)
+
+// 输入控制
+const { inputValue, isComposing, clearInput }: InputHandler = useInputHandler(props, emit)
+
+// 输入建议
+const showSuggestions = ref(false)
+const filteredSuggestions = computed(() => {
+  if (!props.suggestions || !inputValue.value) return []
+  return props.suggestions.filter((item) => item.toLowerCase().includes(inputValue.value.toLowerCase()))
+})
+
+const selectSuggestion = (value: string) => {
+  inputValue.value = value
+  showSuggestions.value = false
+  emit('suggestion-select', value)
+}
+
+// 语音识别
+const speechOptions = computed(() => ({
+  ...(typeof props.speech === 'object' ? props.speech : {}),
+  onStart: () => emit('speech-start'),
+  onEnd: (transcript?: string) => emit('speech-end', transcript),
+  onInterim: (transcript: string) => emit('speech-interim', transcript),
+  onFinal: (text: string) => {
+    inputValue.value = text
+    emit('speech-end', text)
+  },
+  onError: (err: Error) => {
+    showError(err.message)
+    emit('speech-error', err)
+  },
+}))
+
+const { speechState, start: startSpeech, stop: stopSpeech } = useSpeechHandler(speechOptions.value)
+
+// 语音控制
+const toggleSpeech = () => {
+  if (speechState.isRecording) {
+    stopSpeech()
+  } else {
+    startSpeech()
+  }
+}
+
+// 键盘处理
+const { handleKeyPress, triggerSubmit }: KeyboardHandler = useKeyboardHandler(
+  props,
+  emit,
+  inputValue,
+  isComposing,
+  speechState,
+  showSuggestions,
+  toggleSpeech,
+)
+
+// 处理焦点事件
+const handleFocus = (event: FocusEvent) => {
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  emit('blur', event)
+}
+
+// 输入框类型计算
+const inputType = computed(() => (props.mode === 'multiple' ? 'textarea' : 'text'))
+
+const justifyContent = computed(
+  (): {
+    display: string
+    justifyContent: 'space-between' | 'flex-end'
+    alignItems: string
+  } => {
+    const justifyContent = props.showWordLimit && props.maxLength !== Infinity ? 'space-between' : 'flex-end'
+
+    return {
+      display: 'flex',
+      justifyContent,
+      alignItems: 'center',
+    }
+  },
+)
+
+// 状态计算
+const isDisabled = computed(() => props.disabled)
+const isLoading = computed(() => props.loading)
+
+// 样式类
+const senderClasses = computed(() => ({
+  'is-disabled': isDisabled.value,
+  'is-loading': isLoading.value,
+  'has-error': !!errorMessage.value,
+}))
+
+// 错误处理
+const errorMessage = ref<string>('')
+const showError = (msg: string) => {
+  errorMessage.value = msg
+  setTimeout(() => (errorMessage.value = ''), 5000)
+}
+
+// 输入法结束处理
+const handleCompositionEnd = () => {
+  isComposing.value = false
+  setTimeout(() => (isComposing.value = false), 50)
+}
+
+// 监听输入变化
+watch(inputValue, () => {
+  showSuggestions.value = !!props.suggestions && !!inputValue.value
+})
+
+// 暴露方法
+defineExpose({
+  focus: () => {
+    if (inputRef.value) {
+      inputRef.value.focus()
+    } else {
+      const input = document.querySelector('.tiny-input__inner') as HTMLInputElement
+      input?.focus()
+    }
+  },
+  blur: () => {
+    if (inputRef.value) {
+      inputRef.value.blur()
+    } else {
+      const input = document.querySelector('.tiny-input__inner') as HTMLInputElement
+      input?.blur()
+    }
+  },
+  clear: clearInput,
+  submit: triggerSubmit,
+  startSpeech,
+  stopSpeech,
+})
+</script>
+
+<template>
+  <div class="tiny-sender" :class="[senderClasses, `theme-${theme}`, `mode-${mode}`]" :data-theme="theme">
+    <!-- 输入区域容器 -->
+    <div class="tiny-sender__container">
+      <div class="tiny-sender__input-wrapper">
+        <!-- 头部插槽 -->
+        <Transition name="tiny-sender-slide-down">
+          <div v-if="$slots.header" class="tiny-sender__header-slot">
+            <slot name="header"></slot>
+          </div>
+        </Transition>
+
+        <!-- 输入行 - 横向布局 -->
+        <div class="tiny-sender__input-row" :class="{ 'has-prefix': $slots.prefix, 'has-header': $slots.header }">
+          <!-- 前缀插槽 -->
+          <div v-if="$slots.prefix" class="tiny-sender__prefix-slot">
+            <slot name="prefix" />
+          </div>
+
+          <!-- 内容区域 - 确保最小宽度，不被挤占 -->
+          <div class="tiny-sender__content-area">
+            <tiny-input
+              ref="inputRef"
+              :autosize="autoSize"
+              :type="inputType"
+              :readonly="isLoading"
+              :resize="mode === 'multiple' ? 'none' : undefined"
+              v-model="inputValue"
+              :disabled="isDisabled"
+              :placeholder="placeholder"
+              :maxlength="maxLength"
+              :autofocus="autofocus"
+              @keydown="handleKeyPress"
+              @compositionstart="isComposing = true"
+              @compositionend="handleCompositionEnd"
+              @focus="handleFocus"
+              @blur="handleBlur"
+            />
+          </div>
+
+          <!-- 操作区域/后置插槽 -->
+          <div v-if="mode === 'single'" class="tiny-sender__actions-slot">
+            <div class="tiny-sender__buttons-container">
+              <slot name="actions" />
+              <action-buttons
+                class="inline-buttons"
+                :allow-speech="allowSpeech"
+                :allow-files="allowFiles"
+                :loading="loading"
+                :disabled="isDisabled"
+                :show-clear="clearable"
+                :has-content="!!inputValue"
+                :speech-status="speechState"
+                :submit-type="submitType"
+                @clear="clearInput"
+                @toggle-speech="toggleSpeech"
+                @submit="triggerSubmit"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- 底部插槽 - 底部工具栏作为默认内容 -->
+        <Transition name="tiny-sender-slide-up">
+          <div v-if="$slots.footer" class="tiny-sender__footer-slot">
+            <slot name="footer"></slot>
+          </div>
+          <div
+            v-else-if="mode !== 'single' || (showWordLimit && maxLength !== Infinity)"
+            :style="justifyContent"
+            class="tiny-sender__footer-slot tiny-sender__bottom-row"
+          >
+            <!-- 字数限制 -->
+            <div v-if="showWordLimit && maxLength !== Infinity" class="tiny-sender__word-limit">
+              {{ inputValue.length }}/{{ maxLength }}
+            </div>
+
+            <!-- 多行模式下的操作按钮 -->
+            <div v-if="mode === 'multiple'" class="tiny-sender__toolbar">
+              <div class="tiny-sender__buttons-container">
+                <action-buttons
+                  :allow-speech="allowSpeech"
+                  :allow-files="allowFiles"
+                  :loading="loading"
+                  :disabled="isDisabled"
+                  :show-clear="clearable"
+                  :has-content="!!inputValue"
+                  :speech-status="speechState"
+                  :submit-type="submitType"
+                  @clear="clearInput"
+                  @toggle-speech="toggleSpeech"
+                  @submit="triggerSubmit"
+                />
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+
+    <!-- 输入建议 -->
+    <Transition name="tiny-sender-slide-up">
+      <div v-if="showSuggestions && filteredSuggestions.length" class="tiny-sender__suggestions">
+        <div
+          v-for="(item, index) in filteredSuggestions"
+          :key="index"
+          class="suggestion-item"
+          @click="selectSuggestion(item)"
+        >
+          {{ item }}
+        </div>
+      </div>
+    </Transition>
+
+    <!-- 错误提示 -->
+    <div v-if="errorMessage" class="tiny-sender__error">
+      {{ errorMessage }}
+    </div>
+  </div>
+</template>

package/src/sender/vars.less

@@ -0,0 +1,84 @@
+// 主题变量
+:root {
+  // 基础颜色
+  --tr-sender-border-color: #dcdfe6;
+  --tr-sender-bg-color: #fff;
+  --tr-sender-text-color: #303133;
+  --tr-sender-text-color-secondary: #909399;
+  --tr-sender-error-color: #f56c6c;
+  --tr-sender-input-disabled-bg-color: #f0f0f0;
+  --tr-sender-word-limit-color: #808080;
+  --tr-sender-button-icon-color: #5e7ce0;
+
+  // 尺寸
+  --tr-sender-border-radius: 28px;
+  --tr-sender-padding-top: 15px;
+  --tr-sender-padding-right: 10px;
+  --tr-sender-padding-bottom: 10px;
+  --tr-sender-padding-left: 24px;
+  --tr-sender-gap: 8px;
+  --tr-sender-input-height: 100px;
+  --tr-sender-input-min-height: 60px;
+  --tr-sender-icon-size: 22px;
+  --tr-sender-icon-size-small: 18px;
+
+  // 字体
+  --tr-sender-font-size: 14px;
+  --tr-sender-font-size-small: 12px;
+
+  // 动画
+  --tr-sender-transition-duration: 0.2s;
+
+  // 阴影
+  --tr-sender-box-shadow: 0 4px 16px 0px rgba(0, 0, 0, 0.08);
+  --tr-sender-focus-shadow: 0 0 0 2px rgba(94, 124, 224, 0.3);
+
+  // 插槽变量
+  // 头部插槽 (Header)
+  --tr-sender-header-max-height: 120px;
+  --tr-sender-header-min-height: 40px;
+  --tr-sender-header-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --tr-sender-header-padding: 10px;
+
+  // 前缀插槽 (Prefix)
+  --tr-sender-prefix-width: 60px;
+  --tr-sender-prefix-min-width: 44px;
+  --tr-sender-prefix-hover-bg: #f5f5f5;
+  --tr-sender-prefix-padding-left: 16px;
+
+  // 内容区域 (Content)
+  --tr-sender-content-min-width: 180px;
+  --tr-sender-content-padding: 15px 10px 10px 24px;
+  --tr-sender-content-padding-with-prefix: 15px 10px 10px 8px;
+  --tr-sender-content-flex-grow: 1;
+
+  // 操作区域 (Actions)
+  --tr-sender-actions-width: auto;
+  --tr-sender-actions-min-width: 32px;
+  --tr-sender-actions-gap: 8px;
+  --tr-sender-actions-icon-size: 20px;
+  --tr-sender-actions-padding-right: 10px;
+
+  // 底部插槽 (Footer)
+  --tr-sender-footer-max-height: 200px;
+  --tr-sender-footer-min-height: 0;
+  --tr-sender-footer-bg: #fff;
+  --tr-sender-footer-hover: #f9f9f9;
+}
+
+/* 暗色主题 */
+.theme-dark,
+[data-theme="dark"] {
+  --tr-sender-border-color: #4c4d4f;
+  --tr-sender-bg-color: #1c1c1c;
+  --tr-sender-text-color: #ffffff;
+  --tr-sender-text-color-secondary: #a0a0a0;
+  --tr-sender-input-disabled-bg-color: #2a2a2a;
+  --tr-sender-box-shadow: 0 4px 16px 0px rgba(0, 0, 0, 0.2);
+  --tr-sender-button-icon-color: #a0a0a0;
+
+  // 暗色主题插槽变量
+  --tr-sender-prefix-hover-bg: #333;
+  --tr-sender-footer-bg: #2c2c2c;
+  --tr-sender-footer-hover: #3a3a3a;
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/welcome/index.ts

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

package/src/welcome/index.vue

@@ -0,0 +1,3 @@
+<script setup lang="ts"></script>
+
+<template>Welcome</template>

package/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,53 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vuejsx from '@vitejs/plugin-vue-jsx'
+import dts from 'vite-plugin-dts'
+import importPlugin from '@opentiny/vue-vite-import'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vuejsx(),
+    dts(),
+    importPlugin(
+      [
+        {
+          libraryName: '@opentiny/vue',
+        },
+        {
+          libraryName: `@opentiny/vue-icon`,
+          customName: (name) => {
+            return `@opentiny/vue-icon/lib/${name.replace(/^icon-/, '')}.js`
+          },
+        },
+      ],
+      'pc', // 此配置非必选，按需配置 (pc|mobile|mobile-first)
+    ),
+  ],
+  resolve: {
+    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
+  },
+  build: {
+    lib: {
+      entry: './src/index.ts',
+    },
+    minify: true,
+    rollupOptions: {
+      external: ['vue', 'vue-router'],
+      input: {
+        index: './src/index.ts',
+      },
+      output: [
+        {
+          format: 'es',
+          entryFileNames: '[name].js',
+          preserveModules: true,
+          exports: 'named',
+          dir: 'dist',
+        },
+      ],
+    },
+    outDir: 'dist',
+  },
+})