@opentiny/tiny-robot 0.2.0-alpha.2 → 0.2.0-alpha.4

package/src/prompts/prompt.vue

@@ -1,101 +0,0 @@
-<script setup lang="ts">
-import { PromptProps } from './index.type'
-
-const props = defineProps<PromptProps>()
-</script>
-
-<template>
-  <div :class="['tr-prompt', { disabled: props.disabled }]">
-    <div class="tr-prompt__icon">
-      <component :is="props.icon"></component>
-    </div>
-    <div class="tr-prompt__content">
-      <h6 class="tr-prompt__content-label">{{ props.label }}</h6>
-      <p v-if="props.description" class="tr-prompt__content-description">{{ props.description }}</p>
-    </div>
-    <div :class="['tr-prompt__badge', { label: typeof props.badge === 'string' }]">
-      <template v-if="typeof props.badge === 'string'">
-        {{ props.badge }}
-      </template>
-      <template v-else>
-        <component :is="props.badge"></component>
-      </template>
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.tr-prompt {
-  --tr-prompt-bg-color: white;
-  --tr-prompt-hover-color: rgba(0, 0, 0, 0.04);
-  --tr-prompt-active-color: rgba(0, 0, 0, 0.15);
-  --tr-prompt-disabled-color: rgba(0, 0, 0, 0.04);
-  --tr-prompt-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
-  --tr-prompt-text: rgb(25, 25, 25);
-  --tr-prompt-text-muted: rgb(89, 89, 89);
-
-  flex: none;
-  display: flex;
-  gap: 12px;
-  border-radius: 16px;
-  box-shadow: var(--tr-prompt-box-shadow);
-  padding: 16px 24px;
-  position: relative;
-  cursor: pointer;
-  transition: background 0.3s;
-  background-color: var(--tr-prompt-bg-color);
-
-  &:hover {
-    background-color: var(--tr-prompt-hover-color);
-  }
-
-  &.disabled {
-    cursor: default;
-    pointer-events: none;
-    background-color: var(--tr-prompt-disabled-color);
-  }
-
-  &:active {
-    background-color: var(--tr-prompt-active-color);
-  }
-}
-
-.tr-prompt__content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  align-items: start;
-
-  font-size: 14px;
-  line-height: 24px;
-  color: var(--tr-prompt-text);
-}
-
-.tr-prompt__content-label {
-  margin: 0;
-  padding: 0;
-  font-weight: 500;
-}
-
-.tr-prompt__content-description {
-  margin: 0;
-  padding: 0;
-  color: var(--tr-prompt-text-muted);
-}
-
-.tr-prompt__badge {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 0 12px;
-  border-top-right-radius: 16px;
-  border-bottom-left-radius: 16px;
-  background-color: rgb(255, 234, 232);
-
-  &.label {
-    color: rgb(242, 48, 48);
-    font-size: 14px;
-    line-height: 22px;
-  }
-}
-</style>

package/src/prompts/prompts.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { toRaw } from 'vue'
-import { PromptProps, PromptsEvents, PromptsProps, PromptsSlots } from './index.type'
-import Prompt from './prompt.vue'
-
-const props = defineProps<PromptsProps>()
-
-const emit = defineEmits<PromptsEvents>()
-
-defineSlots<PromptsSlots>()
-
-const handleClick = (ev: MouseEvent, item: PromptProps) => {
-  emit('item-click', ev, toRaw(item))
-}
-</script>
-
-<template>
-  <div class="tr-prompts">
-    <div :class="['tr-prompts__list-container', { wrap: props.wrap, vertical: props.vertical }]">
-      <Prompt
-        v-for="(item, index) in props.items"
-        :key="item.id || index"
-        v-bind="item"
-        :style="props.itemStyle"
-        :class="props.itemClass"
-        @click="handleClick($event, item)"
-      ></Prompt>
-    </div>
-    <slot name="footer"></slot>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.tr-prompts {
-  .tr-prompts__list-container {
-    display: flex;
-    gap: 16px;
-    overflow-x: auto;
-
-    &.wrap {
-      flex-wrap: wrap;
-    }
-
-    &.vertical {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  }
-}
-</style>

package/src/question/components/CommonQuestions.vue

@@ -1,146 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount, nextTick, PropType } from 'vue'
-import type { Question } from '../index.type'
-import { IconEdit } from '@opentiny/tiny-robot-svgs'
-
-const props = defineProps({
-  questions: {
-    type: Array as PropType<Question[]>,
-    required: true,
-  },
-  isExpanded: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['question-click', 'show-expand-button'])
-
-const commonQuestionsRef = ref<HTMLElement | null>(null)
-const showExpandButton = ref(false)
-const isExpandedRef = ref(false)
-const visibleQuestions = ref<Question[]>([])
-const hiddenQuestions = ref<Question[]>([])
-
-watch(
-  () => props.isExpanded,
-  (val) => {
-    isExpandedRef.value = val
-  },
-)
-
-// 检查是否需要显示展开/收起按钮并计算能够容纳的最大胶囊数
-const checkOverflow = async () => {
-  await nextTick()
-  if (commonQuestionsRef.value) {
-    const container = commonQuestionsRef.value
-    const containerWidth = container.clientWidth
-
-    // 重置胶囊分组
-    visibleQuestions.value = []
-    hiddenQuestions.value = []
-
-    if (props.questions.length === 0) {
-      showExpandButton.value = false
-      return
-    }
-
-    // 计算一行可以容纳多少个胶囊
-    let accumulatedWidth = 0
-    const margin = 8 // 胶囊之间的间距
-
-    // 克隆一个胶囊元素来测量其基本尺寸
-    const tempItem = document.createElement('div')
-    tempItem.className = 'tr-common-questions_item'
-    tempItem.style.visibility = 'hidden'
-    tempItem.style.position = 'absolute'
-    container.appendChild(tempItem)
-
-    // 计算每个胶囊的宽度并确定一行能容纳多少个
-    for (let i = 0; i < props.questions.length; i++) {
-      const question = props.questions[i]
-
-      // 设置临时元素内容来测量其宽度
-      tempItem.textContent = question.text
-      const itemWidth = tempItem.offsetWidth + margin
-
-      // 检查是否还能容纳下一个胶囊
-      if (accumulatedWidth + itemWidth <= containerWidth) {
-        accumulatedWidth += itemWidth
-        visibleQuestions.value.push(question)
-      } else {
-        hiddenQuestions.value.push(question)
-      }
-    }
-
-    // 移除临时元素
-    container.removeChild(tempItem)
-
-    // 如果有隐藏的胶囊，显示展开按钮
-    showExpandButton.value = hiddenQuestions.value.length > 0
-    // 初始状态设为未展开
-    isExpandedRef.value = false
-
-    emit('show-expand-button', showExpandButton.value)
-  }
-}
-
-// 处理问题点击
-const handleQuestionClick = (question: Question) => {
-  emit('question-click', question)
-}
-
-// 监听 props 变化
-watch(
-  () => props.questions,
-  () => {
-    // 当问题列表变化时重新计算
-    checkOverflow()
-  },
-  { deep: true },
-)
-
-// 处理窗口大小变化
-const handleResize = () => {
-  checkOverflow()
-}
-
-// 组件挂载时添加窗口大小变化监听
-onMounted(() => {
-  checkOverflow()
-  window.addEventListener('resize', handleResize)
-})
-
-// 组件卸载时移除监听器
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', handleResize)
-})
-</script>
-
-<template>
-  <div class="tr-common-questions" ref="commonQuestionsRef" :class="{ expanded: isExpandedRef }">
-    <!-- 渲染可见的胶囊 -->
-    <div
-      v-for="(question, index) in visibleQuestions"
-      :key="`visible-${question.id}-${index}`"
-      class="tr-common-questions_item"
-      @click="handleQuestionClick(question)"
-    >
-      <div style="display: flex; align-items: center"><IconEdit /></div>
-      {{ question.text }}
-    </div>
-
-    <!-- 渲染被隐藏的胶囊（展开时显示） -->
-    <div v-if="isExpandedRef">
-      <div
-        v-for="(question, index) in hiddenQuestions"
-        :key="`hidden-${question.id}-${index}`"
-        class="tr-common-questions_item"
-        @click="handleQuestionClick(question)"
-      >
-        <IconEdit />
-        {{ question.text }}
-      </div>
-    </div>
-  </div>
-</template>

package/src/question/components/HotQuestions.vue

@@ -1,148 +0,0 @@
-<script setup lang="ts">
-import { ref, defineProps, defineEmits, watch, PropType, computed } from 'vue'
-import { IconClose } from '@opentiny/vue-icon'
-import { TinyButton } from '@opentiny/vue'
-import type { Category, Question } from '../index.type'
-
-import { IconHotQuestion, IconTypeAll } from '@opentiny/tiny-robot-svgs'
-
-const TinyIconClose = IconClose()
-
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  categories: {
-    type: Array as PropType<Category[]>,
-    default: () => [],
-  },
-  modalWidth: {
-    type: String,
-    default: '640px',
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  closeOnClickOutside: {
-    type: Boolean,
-    default: true,
-  },
-})
-
-const emit = defineEmits(['update:visible', 'close', 'select-category', 'question-click'])
-
-// 当前激活的分类
-const activeCategory = ref<string>('')
-
-// 计算当前激活分类的问题列表
-const activeQuestions = computed(() => {
-  if (!activeCategory.value && props.categories.length > 0) {
-    return props.categories[0].questions || []
-  }
-
-  const category = props.categories.find((cat) => cat.id === activeCategory.value)
-  return category ? category.questions : []
-})
-
-// 初始化激活的分类
-watch(
-  () => props.categories,
-  (categories) => {
-    if (categories.length > 0 && !activeCategory.value) {
-      activeCategory.value = categories[0].id
-    }
-  },
-  { immediate: true },
-)
-
-// 关闭弹窗
-const closeModal = () => {
-  emit('update:visible', false)
-  emit('close')
-}
-
-// 处理分类选择
-const handleCategorySelect = (categoryId: string) => {
-  activeCategory.value = categoryId
-  emit(
-    'select-category',
-    props.categories.find((cat) => cat.id === categoryId),
-  )
-}
-
-// 处理问题点击
-const handleQuestionClick = (question: Question) => {
-  emit('question-click', question)
-}
-
-// 处理点击外部关闭
-const handleClickOutside = (event: MouseEvent) => {
-  if (props.closeOnClickOutside && !event.composedPath().includes(modalRef.value!)) {
-    closeModal()
-  }
-}
-
-const modalRef = ref<HTMLElement | null>(null)
-</script>
-
-<template>
-  <div v-if="visible" class="tr-question-modal-backdrop" @mousedown="handleClickOutside">
-    <div ref="modalRef" class="tr-question-panel" :style="{ width: modalWidth }" @mousedown.stop>
-      <div class="tr-question-header">
-        <div style="display: flex; align-items: center; gap: 12px; font-size: 36px">
-          <div><IconHotQuestion /></div>
-          <div class="tr-question-header-title">热门问题</div>
-        </div>
-        <span class="tr-question-close-btn" @click="closeModal">
-          <TinyButton :icon="TinyIconClose" type="text" />
-        </span>
-      </div>
-
-      <div v-if="categories.length > 0" class="tr-question-categories">
-        <div
-          v-for="category in categories"
-          :key="category.id"
-          class="tr-question-categories-item"
-          :class="{ active: activeCategory === category.id }"
-          @click="handleCategorySelect(category.id)"
-        >
-          <slot name="category-label" :category="category">
-            <div class="category-icon">
-              <IconTypeAll />
-            </div>
-            <span>{{ category.label }}</span>
-          </slot>
-        </div>
-      </div>
-
-      <div class="tr-question-content">
-        <div v-if="loading" class="tr-question-loading">
-          <slot name="loading-indicator">
-            <div class="tr-question-loading-spinner"></div>
-          </slot>
-        </div>
-
-        <ul v-else-if="activeQuestions.length > 0">
-          <li
-            v-for="(question, index) in activeQuestions"
-            :key="question.id"
-            class="tr-question-list-item"
-            @click="handleQuestionClick(question)"
-          >
-            <slot name="question-item" :question="question" :index="index">
-              <span>{{ index + 1 }}.</span> {{ question.text }}
-            </slot>
-          </li>
-        </ul>
-
-        <div v-else class="tr-question-empty">
-          <slot name="empty-state">
-            <p>暂无相关问题</p>
-          </slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/src/question/composables/useQuestions.ts

@@ -1,106 +0,0 @@
-import { ref, computed, Ref, watch } from 'vue'
-import type { Category, ThemeType } from '../index.type'
-
-export function useQuestions(categories: Ref<Category[]> = ref([])) {
-  // 当前激活的分类ID
-  const activeCategory = ref<string>('')
-
-  // 是否展开悬浮面板
-  const isFloatingExpanded = ref(false)
-
-  // 弹窗是否可见
-  const modalVisible = ref(false)
-
-  // 当前主题
-  const currentTheme = ref<ThemeType>('light')
-
-  // 计算当前激活分类的问题列表
-  const activeQuestions = computed(() => {
-    if (!activeCategory.value && categories.value.length > 0) {
-      return categories.value[0].questions
-    }
-
-    const category = categories.value.find((cat) => cat.id === activeCategory.value)
-    return category ? category.questions : []
-  })
-
-  // 设置激活的分类
-  const setActiveCategory = (categoryId: string) => {
-    activeCategory.value = categoryId
-  }
-
-  // 打开弹窗
-  const openModal = () => {
-    modalVisible.value = true
-  }
-
-  // 关闭弹窗
-  const closeModal = () => {
-    modalVisible.value = false
-  }
-
-  // 切换悬浮面板展开状态
-  const toggleFloating = () => {
-    isFloatingExpanded.value = !isFloatingExpanded.value
-  }
-
-  // 防止滚动穿透的函数
-  const toggleBodyScroll = (isOpen: boolean) => {
-    const body = document.body
-
-    if (isOpen) {
-      // 保存当前滚动位置
-      const scrollTop = window.scrollY || document.documentElement.scrollTop
-      body.style.position = 'fixed'
-      body.style.width = '100%'
-      body.style.top = `-${scrollTop}px`
-      body.style.overflowY = 'scroll' // 保持滚动条宽度，防止页面抖动
-      body.classList.add('tr-modal-open')
-    } else {
-      body.style.position = ''
-      body.style.width = ''
-      body.style.top = ''
-      body.style.overflowY = ''
-      body.classList.remove('tr-modal-open')
-    }
-  }
-
-  // 监听弹窗变化应用滚动锁定
-  watch(modalVisible, (value) => {
-    toggleBodyScroll(value)
-  })
-
-  // 切换主题
-  const toggleTheme = () => {
-    currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light'
-    document.documentElement.setAttribute('data-theme', currentTheme.value)
-  }
-
-  // 设置主题
-  const setTheme = (theme: ThemeType) => {
-    currentTheme.value = theme
-    document.documentElement.setAttribute('data-theme', theme)
-  }
-
-  // 刷新数据（模拟异步操作）
-  const refreshData = async () => {
-    // 这里可以添加实际的数据刷新逻辑
-    return Promise.resolve()
-  }
-
-  return {
-    activeCategory,
-    isFloatingExpanded,
-    modalVisible,
-    currentTheme,
-    activeQuestions,
-    setActiveCategory,
-    openModal,
-    closeModal,
-    toggleFloating,
-    toggleTheme,
-    setTheme,
-    refreshData,
-    toggleBodyScroll,
-  }
-}