@opentiny/tiny-robot 0.2.0-alpha.1 → 0.2.0-alpha.3

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,
-  }
-}