@opentiny/vue-docs 3.24.6 → 3.26.0

package/src/composable/DifyModelProvider.ts

@@ -1,65 +0,0 @@
-import type { ChatCompletionRequest } from '@opentiny/tiny-robot-kit'
-import type { AIModelConfig } from '@opentiny/tiny-robot-kit'
-import type { ChatCompletionResponse } from '@opentiny/tiny-robot-kit'
-import type { StreamHandler } from '@opentiny/tiny-robot-kit'
-import { BaseModelProvider } from '@opentiny/tiny-robot-kit'
-import { globalConversation, handleSSEStream } from './utils.js'
-import type { Ref } from 'vue'
-
-/**
- * 对接AIClient的自定义 Dify 大模型服务
- *
- * const client = new AIClient({
- *  provider: 'custom',
- *  providerImplementation: new CustomModelProvider( config )
- * });
- */
-export class DifyModelProvider extends BaseModelProvider {
-  _messages: Ref<ChatCompletionRequest['messages']> = []
-
-  constructor(config: AIModelConfig) {
-    super(config)
-  }
-  /** 同步请示不需要实现 */
-  chat(request: ChatCompletionRequest): Promise<ChatCompletionResponse> {
-    throw new Error('Method not implemented.')
-  }
-
-  /** 异步流式请求 */
-  async chatStream(request: ChatCompletionRequest, handler: StreamHandler): Promise<void> {
-    const { signal } = request
-    this.validateRequest(request)
-
-    try {
-      // 验证请求的messages属性，必须是数组，且每个消息必须有role\content属性
-      const lastMessage = request.messages[request.messages.length - 1].content
-      // 模拟异步流式响应
-      const response = await fetch(`${this.config.apiUrl}/chat-messages`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${this.config.apiKey}`,
-          'Accept': 'text/event-stream'
-        },
-        body: JSON.stringify({
-          query: lastMessage,
-          user: 'user',
-          response_mode: 'streaming',
-          inputs: {
-            sessionId: globalConversation.sessionId
-          },
-          conversation_id: globalConversation.id
-        })
-      })
-
-      await handleSSEStream(response, handler, this._messages, signal)
-    } catch (error) {
-      if (signal && signal.aborted) {
-        console.warn('Request was aborted:', error)
-      } else {
-        console.error('Error in chatStream:', error)
-        // handler.onError(handleRequestError(error))
-      }
-    }
-  }
-}

package/src/composable/useTinyRobot.ts

@@ -1,167 +0,0 @@
-import type { AIModelConfig } from '@opentiny/tiny-robot-kit'
-import { AIClient, useConversation } from '@opentiny/tiny-robot-kit'
-import { IconAi, IconUser } from '@opentiny/tiny-robot-svgs'
-import { h, nextTick, onMounted, ref, watch } from 'vue'
-import { DifyModelProvider } from './DifyModelProvider.js'
-import type { SuggestionItem } from '@opentiny/tiny-robot'
-
-const difyConfig: AIModelConfig = {
-  provider: 'custom',
-  apiUrl: 'https://api.dify.ai/v1',
-  apiKey: 'app-H0VJI4LqZ4KskdcA5a07pjXf'
-}
-export function useTinyRobot() {
-  const difyModelProvider = new DifyModelProvider(difyConfig)
-  const client = new AIClient({
-    providerImplementation: difyModelProvider,
-    ...difyConfig
-  })
-
-  const fullscreen = ref(false)
-  const show = ref(true)
-
-  const aiAvatar = h(IconAi, { style: { fontSize: '32px' } })
-  const userAvatar = h(IconUser, { style: { fontSize: '32px' } })
-  const welcomeIcon = h(IconAi, { style: { fontSize: '48px' } })
-
-  const promptItems = [
-    {
-      label: '识别网页的内容',
-      description: '公司人员表中员工最多和最少的公司，帮我统计一下！',
-      icon: h('span', { style: { fontSize: '18px' } }, '💡')
-    },
-    {
-      label: '智能操作网页',
-      description: '请帮我选中公司人员表中员工最多的公司',
-      icon: h('span', { style: { fontSize: '18px' } }, '🕹')
-    }
-  ]
-  const handlePromptItemClick = (ev, item) => {
-    sendMessage(item.description)
-  }
-
-  const { messageManager } = useConversation({ client })
-  const { messages, messageState, inputMessage, sendMessage, abortRequest } = messageManager
-  difyModelProvider._messages = messages
-
-  const roles = {
-    assistant: {
-      type: 'markdown',
-      placement: 'start',
-      avatar: aiAvatar,
-      maxWidth: '80%'
-    },
-    user: {
-      placement: 'end',
-      avatar: userAvatar,
-      maxWidth: '80%'
-    }
-  }
-
-  // 建议按钮组，设置对话的模板
-  const suggestionPillItems = [
-    {
-      id: '1',
-      text: '公司人员表',
-      icon: h('span', { style: { fontSize: '18px' } }, '🏢')
-    }
-  ]
-
-  function handleSuggestionPillItemClick(item: SuggestionItem) {
-    let templateText = `请对 [目标组件] ,执行 [操作]`
-    let currentInitialValue = { 目标组件: item.text, 操作: '' }
-
-    if (senderRef.value) {
-      senderRef.value.setTemplate(templateText, currentInitialValue)
-    }
-  }
-
-  const senderRef = ref(null)
-  const currentTemplate = ref('')
-  const suggestionOpen = ref(false)
-
-  // 清除当前指令
-  const clearTemplate = () => {
-    // 清空指令相关状态
-    currentTemplate.value = ''
-
-    // 确保重新聚焦到输入框
-    nextTick(() => {
-      senderRef.value?.focus()
-    })
-  }
-
-  // 发送消息
-  const handleSendMessage = () => {
-    sendMessage(inputMessage.value)
-
-    clearTemplate()
-  }
-
-  const handleMessageKeydown = (event, triggerFn, suggestionKeyDown) => {
-    // 如果指令面板已打开，交给 suggestion 组件处理键盘事件
-    if (suggestionOpen.value) {
-      suggestionKeyDown(event)
-      return
-    }
-
-    // 如果按下斜杠键并且不在指令编辑模式，触发指令面板
-    if (event.key === '/' && !currentTemplate.value) {
-      triggerFn({
-        text: '',
-        position: 0
-      })
-    }
-
-    // ESC 键清除当前指令
-    if (event.key === 'Escape' && currentTemplate.value) {
-      event.preventDefault()
-      clearTemplate()
-    }
-  }
-
-  watch(
-    () => inputMessage.value,
-    (value) => {
-      // 如果指令面板已打开，并且指令为空，关闭指令面板
-      if (suggestionOpen.value && value === '') {
-        suggestionOpen.value = false
-      }
-    }
-  )
-
-  // 页面加载完成后自动聚焦输入框
-  onMounted(() => {
-    setTimeout(() => {
-      senderRef.value?.focus()
-    }, 500)
-  })
-
-  return {
-    client,
-    fullscreen,
-    show,
-    aiAvatar,
-    userAvatar,
-    welcomeIcon,
-    promptItems,
-
-    messageManager,
-    messages,
-    messageState,
-    inputMessage,
-    sendMessage,
-    abortRequest,
-    roles,
-    handlePromptItemClick,
-
-    senderRef,
-    currentTemplate,
-    suggestionOpen,
-    clearTemplate,
-    handleSendMessage,
-    handleMessageKeydown,
-    suggestionPillItems,
-    handleSuggestionPillItemClick
-  }
-}

package/src/views/comprehensive/Demo.vue

@@ -1,212 +0,0 @@
-<template>
-  <div class="products-page">
-    <div class="page-header">
-      <h3>商品管理</h3>
-    </div>
-    <div class="page-content">
-      <div class="button-box">
-        <tiny-button type="info" @click="addProductToEdit"> 添加商品 </tiny-button>
-        <tiny-button type="danger" @click="removeProduct"> 删除商品 </tiny-button>
-        <tiny-button type="success" @click="saveProduct"> 保存 </tiny-button>
-      </div>
-      <tiny-grid
-        auto-resize
-        ref="gridRef"
-        :data="products"
-        :height="500"
-        :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
-        :tiny_mcp_config="{
-          server,
-          business: {
-            id: 'product-list',
-            description: '商品列表'
-          }
-        }"
-      >
-        <tiny-grid-column type="index" width="50" />
-        <tiny-grid-column type="selection" width="50" />
-        <tiny-grid-column title="商品图片" width="100">
-          <template #default="{ row }">
-            <img :src="row.image" class="product-image" />
-          </template>
-        </tiny-grid-column>
-
-        <tiny-grid-column field="name" title="商品名称" :editor="{ component: 'input' }" />
-        <tiny-grid-column
-          field="price"
-          :editor="{
-            component: 'input',
-            attrs: { type: 'number' }
-          }"
-          title="价格"
-        >
-          <template #default="{ row }"> ¥{{ row.price }} </template>
-        </tiny-grid-column>
-        <tiny-grid-column
-          field="stock"
-          :editor="{
-            component: 'input',
-            attrs: { type: 'number' }
-          }"
-          title="库存"
-        />
-        <tiny-grid-column
-          field="category"
-          :editor="{
-            component: 'select',
-            options: [
-              { label: '手机', value: 'phones' },
-              { label: '笔记本', value: 'laptops' },
-              { label: '平板', value: 'tablets' }
-            ]
-          }"
-          title="分类"
-        >
-          <template #default="{ row }">
-            {{ categoryLabels[row.category] }}
-          </template>
-        </tiny-grid-column>
-        <tiny-grid-column
-          field="status"
-          :editor="{
-            component: 'select',
-            options: [
-              { label: '上架', value: 'on' },
-              { label: '下架', value: 'off' }
-            ]
-          }"
-          title="状态"
-        >
-          <template #default="{ row }">
-            <tiny-tag :type="row.status === 'on' ? 'success' : 'warning'">
-              {{ row.status === 'on' ? '上架' : '下架' }}
-            </tiny-tag>
-          </template>
-        </tiny-grid-column>
-      </tiny-grid>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import productsData from './products.json'
-import { $local } from '../../composable/utils'
-import { useNextServer } from '@opentiny/next-vue'
-import { TinyGrid, TinyGridColumn, TinyButton, TinyTag, TinyModal } from '@opentiny/vue'
-
-if (!$local.products) {
-  $local.products = productsData
-}
-
-const products = ref($local.products)
-const gridRef = ref(null)
-
-const categoryLabels: Record<string, string> = {
-  phones: '手机',
-  laptops: '笔记本',
-  tablets: '平板'
-}
-
-// 新增商品到编辑弹窗
-const addProductToEdit = async () => {
-  gridRef?.value?.insert({
-    image: 'https://agent.icjs.ink/images/huawei-pura.jpg',
-    price: 10000,
-    stock: 100,
-    category: 'phones',
-    status: 'on'
-  })
-}
-
-const removeProduct = () => {
-  const selectedRows = gridRef?.value?.getSelectRecords()
-  if (selectedRows.length === 0) {
-    TinyModal.confirm({
-      message: '请选择要删除的商品',
-      title: '删除商品',
-      status: 'warning'
-    })
-    return
-  }
-  if (selectedRows.length > 0) {
-    gridRef?.value?.removeSelecteds()
-  }
-}
-
-const saveProduct = () => {
-  setTimeout(() => {
-    const data = gridRef?.value?.getTableData()
-    $local.products = data.tableData
-    TinyModal.message({
-      message: '保存成功',
-      status: 'success'
-    })
-  }, 1000)
-}
-
-const { server } = useNextServer({
-  serverInfo: { name: 'commodity-config', version: '1.0.0' }
-})
-</script>
-
-<style scoped lang="less">
-.products-page {
-  .page-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-    padding: 16px 20px;
-    background-color: #ffffff;
-    border-radius: 8px;
-    position: relative;
-    border: 1px solid #edf2f7;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 0;
-      width: 4px;
-      height: 24px;
-      background: #1677ff;
-      border-radius: 2px;
-      transform: translateY(-50%);
-    }
-
-    h3 {
-      margin: 0;
-      font-size: 20px;
-      font-weight: 600;
-      color: #1f2937;
-      position: relative;
-      padding-left: 20px;
-      letter-spacing: 0.3px;
-    }
-  }
-}
-
-.button-box {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 20px;
-  justify-content: flex-end;
-}
-.loading-state {
-  padding: 20px;
-}
-
-.product-image {
-  display: block;
-  width: 40px;
-  height: 40px;
-  border-radius: 4px;
-}
-.page-content {
-  padding: 20px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
-}
-</style>