af-mobile-client-vue3 1.4.52 → 1.4.54

package/src/views/component/MateChat/MateChatView.vue

@@ -1,37 +1,31 @@
 <script setup lang="ts">
-import liuliLogo from '@af-mobile-client-vue3/assets/img/component/liuli.png'
-// MateChat ai 对话相关
-import { showToast, Button as VanButton } from 'vant'
-import { ref } from 'vue'
-import { chatCompletions } from './apiService'
-import 'vant/es/image-preview/style'
+import MateChat from '@af-mobile-client-vue3/components/common/MateChat/MateChat.vue'
 
 const description = [
   '我是【奥枫天然气公司】官方公众号专属 AI 客服小璃，可以为您提供专业、高效、易懂的天然气相关咨询服务。',
 ]
-const introPrompt = {
-  direction: 'horizontal',
-  list: [
-    {
-      value: 'howToPay',
-      label: '如何缴纳燃气费？',
-      iconConfig: { name: 'icon-info-o', color: '#5e7ce0' },
-      desc: '了解线上缴费方式和操作步骤',
-    },
-    {
-      value: 'howToRepair',
-      label: '燃气故障如何报修？',
-      iconConfig: { name: 'icon-star', color: 'rgb(255, 215, 0)' },
-      desc: '遇到燃气问题时的处理流程',
-    },
-    {
-      value: 'safetyTips',
-      label: '安全使用注意事项',
-      iconConfig: { name: 'icon-priority', color: '#3ac295' },
-      desc: '了解燃气安全使用常识',
-    },
-  ],
-}
+
+const introPrompt = [
+  {
+    value: 'howToPay',
+    label: '如何缴纳燃气费？',
+    iconConfig: { name: 'icon-info-o', color: '#5e7ce0' },
+    desc: '了解线上缴费方式和操作步骤',
+  },
+  {
+    value: 'howToRepair',
+    label: '燃气故障如何报修？',
+    iconConfig: { name: 'icon-star', color: 'rgb(255, 215, 0)' },
+    desc: '遇到燃气问题时的处理流程',
+  },
+  {
+    value: 'safetyTips',
+    label: '安全使用注意事项',
+    iconConfig: { name: 'icon-priority', color: '#3ac295' },
+    desc: '了解燃气安全使用常识',
+  },
+]
+
 const simplePrompt = [
   {
     value: 'howToPay',
@@ -44,211 +38,14 @@ const simplePrompt = [
     label: '如何报修',
   },
 ]
-const startPage = ref(true)
-const inputValue = ref('')
-
-const messages = ref<any[]>([])
-
-function newConversation() {
-  startPage.value = true
-  messages.value = []
-}
-
-async function onSubmit(evt: string) {
-  if (!evt.trim()) {
-    return
-  }
-
-  inputValue.value = ''
-  startPage.value = false
-
-  // 用户发送消息
-  messages.value.push({
-    from: 'user',
-    content: evt,
-  })
-
-  // 添加 loading 状态的 model 消息
-  const loadingMessageIndex = messages.value.length
-  messages.value.push({
-    from: 'model',
-    content: '',
-    loading: true,
-  })
-
-  try {
-    // 调用 API
-    const response = await chatCompletions(evt)
-
-    // 更新 model 消息内容
-    if (response.choices && response.choices.length > 0) {
-      const content = response.choices[0].message.content
-
-      // 检测是否为转人工标识
-      try {
-        const parsedContent = JSON.parse(content)
-        if (parsedContent.msgType === 'transfer') {
-          // 移除 loading 消息
-          messages.value.splice(loadingMessageIndex, 1)
-          // 添加人工客服消息
-          messages.value.push({
-            from: 'service',
-            content: '您好，客服xxx工号xxx为你服务',
-          })
-        }
-        else {
-          // 正常消息
-          messages.value[loadingMessageIndex] = {
-            from: 'model',
-            content,
-            loading: false,
-          }
-        }
-      }
-      catch {
-        // 如果不是 JSON，按正常消息处理
-        messages.value[loadingMessageIndex] = {
-          from: 'model',
-          content,
-          loading: false,
-        }
-      }
-    }
-    else {
-      throw new Error('响应数据格式错误')
-    }
-  }
-  catch (error: any) {
-    // 处理错误
-    console.error('聊天请求失败:', error)
-    messages.value[loadingMessageIndex] = {
-      from: 'model',
-      content: '抱歉，服务暂时不可用，请稍后再试。',
-      loading: false,
-    }
-    showToast(error?.message || '请求失败，请稍后再试')
-  }
-}
 </script>
 
 <template>
-  <McLayout class="container">
-    <McLayoutContent
-      v-if="startPage"
-      style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px"
-    >
-      <McIntroduction
-        :logo-img="liuliLogo"
-        title="小璃"
-        sub-title="Hi，我是小璃"
-        :description="description"
-      />
-      <McPrompt
-        :list="introPrompt.list"
-        :direction="introPrompt.direction"
-        @item-click="onSubmit($event.label)"
-      />
-    </McLayoutContent>
-    <McLayoutContent v-else class="content-container">
-      <template v-for="(msg, idx) in messages" :key="idx">
-        <McBubble
-          v-if="msg.from === 'user'"
-          :content="msg.content"
-          align="right"
-          :avatar-config="{ imgSrc: 'https://matechat.gitcode.com/png/demo/userAvatar.svg' }"
-        />
-        <McBubble
-          v-else-if="msg.from === 'service'"
-          :content="msg.content"
-          :avatar-config="{ imgSrc: 'https://matechat.gitcode.com/png/demo/userAvatar.svg' }"
-        />
-        <McBubble v-else :content="msg.content" :avatar-config="{ imgSrc: liuliLogo }" :loading="msg.loading">
-          <McMarkdownCard
-            :content="msg.content" :typing="true"
-          />
-        </McBubble>
-      </template>
-    </McLayoutContent>
-    <div class="shortcut" style="display: flex; align-items: center; gap: 8px">
-      <McPrompt
-        v-if="!startPage"
-        :list="simplePrompt"
-        direction="horizontal"
-        class="shortcut-prompt"
-        style="flex: 1"
-        @item-click="onSubmit($event.label)"
-      />
-      <VanButton
-        style="margin-left: auto"
-        icon="add"
-        title="新建对话"
-        size="small"
-        round
-        @click="newConversation"
-      />
-    </div>
-    <McLayoutSender>
-      <McInput :value="inputValue" :autofocus="true" :max-length="2000" @change="(e) => (inputValue = e)" @submit="onSubmit" />
-    </McLayoutSender>
-  </McLayout>
+  <MateChat
+    service-name="小璃"
+    :use-stream="true"
+    :description="description"
+    :intro-prompt="introPrompt"
+    :simple-prompt="simplePrompt"
+  />
 </template>
-
-<style>
-.container {
-  width: 100%;
-  height: 100vh;
-  padding: 20px;
-  gap: 8px;
-  background: #fff;
-}
-
-.content-container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: auto;
-}
-
-.input-foot-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  margin-right: 8px;
-
-  .input-foot-left {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    span {
-      font-size: 14px;
-      line-height: 18px;
-      color: #252b3a;
-      cursor: pointer;
-    }
-
-    .input-foot-dividing-line {
-      width: 1px;
-      height: 14px;
-      background-color: #d7d8da;
-    }
-
-    .input-foot-maxlength {
-      font-size: 14px;
-      color: #71757f;
-    }
-  }
-
-  .input-foot-right {
-    .demo-button-content {
-      font-size: 14px;
-    }
-
-    & > *:not(:first-child) {
-      margin-left: 8px;
-    }
-  }
-}
-</style>

package/src/views/component/XCellListView/index.vue

@@ -1,138 +1,107 @@
-<script setup lang="ts">
-import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
-import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
-import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
-import { defineEmits, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-// 定义事件
-const emit = defineEmits(['deleteRow'])
-
-// 多选操作配置
-const multiSelectActions = ref([
-  { name: '批量审核', key: 'batchAudit', color: '#000000', icon: 'passed' },
-])
-
-const userInfo = useUserStore().getUserInfo()
-// 访问路由
-const router = useRouter()
-// 获取默认值
-const idKey = ref('o_id')
-
-// 简易crud表单测试
-const configName = ref('lngChargeAuditMobileCRUD')
-const serviceName = ref('af-gaslink')
-
-// 资源权限测试
-// const configName = ref('crud_sources_test')
-// const serviceName = ref('af-system')
-
-// 实际业务测试
-// const configName = ref('lngChargeAuditMobileCRUD')
-// const serviceName = ref('af-gaslink')
-
-// 跳转到详情页面
-// function toDetail(item) {
-//   router.push({
-//     name: 'XCellDetailView',
-//     params: { id: item[idKey.value] }, // 如果使用命名路由，推荐使用路由参数而不是直接构建 URL
-//     query: {
-//       operName: item[operNameKey.value],
-//       method:item[methodKey.value],
-//       requestMethod:item[requestMethodKey.value],
-//       operatorType:item[operatorTypeKey.value],
-//       operUrl:item[operUrlKey.value],
-//       operIp:item[operIpKey.value],
-//       costTime:item[costTimeKey.value],
-//       operTime:item[operTimeKey.value],
-//
-//       title: item[titleKey.value],
-//       businessType: item[businessTypeKey.value],
-//       status:item[statusKey.value]
-//     }
-//   })
-// }
-
-// 跳转到表单——以表单组来渲染纯表单
-function toDetail(item) {
-  router.push({
-    name: 'XFormView',
-    query: {
-      id: item[idKey.value],
-      // id: item.rr_id,
-      // o_id: item.o_id,
-    },
-  })
-}
-
-// 新增功能
-// function addOption(totalCount) {
-//   router.push({
-//     name: 'XFormView',
-//     params: { id: totalCount, openid: totalCount },
-//     query: {
-//       configName: configName.value,
-//       serviceName: serviceName.value,
-//       mode: '新增',
-//     },
-//   })
-// }
-
-// 修改功能
-// function updateRow(result) {
-//   router.push({
-//     name: 'XFormView',
-//     params: { id: result.o_id, openid: result.o_id },
-//     query: {
-//       configName: configName.value,
-//       serviceName: serviceName.value,
-//       mode: '修改',
-//     },
-//   })
-// }
-
-// 删除功能
-function deleteRow(result) {
-  emit('deleteRow', result.o_id)
-}
-
-// 多选操作处理
-function handleMultiSelectAction(action: string, selectedItems: any[], selectedItemsArray: any[]) {
-  console.log('多选操作:', action, selectedItems, selectedItemsArray)
-}
-
-// 选择变化处理
-function handleSelectionChange(selectedItems: any[]) {
-  console.log('选择变化，当前选中:', selectedItems.length, '个项目')
-  // 可以在这里更新UI状态，比如显示选中数量等
-}
-
-// 数据加载完成后处理 @after-load
-function afterLoad(result) {
-  console.log('afterLoad:', result)
-}
-function emitFunc(func, data) {
-  console.log('emitFunc:', func, data)
-}
-</script>
-
-<template>
-  <NormalDataLayout id="XCellListView" title="工作计划">
-    <template #layout_content>
-      <XCellList
-        config-name="scanCodeAndNFCRUD"
-        service-name="af-safecheck"
-        :enable-multi-select="true"
-        id-key="t_id"
-        :multi-select-actions="multiSelectActions"
-        @to-detail="toDetail"
-        @multi-select-action="handleMultiSelectAction"
-        @selection-change="handleSelectionChange"
-        @x-form-item-emit-func="emitFunc"
-      />
-    </template>
-  </NormalDataLayout>
-</template>
-
-<style scoped lang="less">
-</style>
+<script setup lang="ts">
+import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
+import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+import { defineEmits, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+// 定义事件
+const emit = defineEmits(['deleteRow'])
+// 访问路由
+const router = useRouter()
+// 获取默认值
+// const idKey = ref('o_id')
+
+// 简易crud表单测试
+const configName = ref('ceshiCRUD')
+const serviceName = ref('af-safecheck')
+
+// 资源权限测试
+// const configName = ref('crud_sources_test')
+// const serviceName = ref('af-system')
+
+// 实际业务测试
+// const configName = ref('lngChargeAuditMobileCRUD')
+// const serviceName = ref('af-gaslink')
+
+// 跳转到详情页面
+// function toDetail(item) {
+//   router.push({
+//     name: 'XCellDetailView',
+//     params: { id: item[idKey.value] }, // 如果使用命名路由，推荐使用路由参数而不是直接构建 URL
+//     query: {
+//       operName: item[operNameKey.value],
+//       method:item[methodKey.value],
+//       requestMethod:item[requestMethodKey.value],
+//       operatorType:item[operatorTypeKey.value],
+//       operUrl:item[operUrlKey.value],
+//       operIp:item[operIpKey.value],
+//       costTime:item[costTimeKey.value],
+//       operTime:item[operTimeKey.value],
+//
+//       title: item[titleKey.value],
+//       businessType: item[businessTypeKey.value],
+//       status:item[statusKey.value]
+//     }
+//   })
+// }
+
+// 跳转到表单——以表单组来渲染纯表单
+// function toDetail(item) {
+//   router.push({
+//     name: 'XFormGroupView',
+//     query: {
+//       id: item[idKey.value],
+//       // id: item.rr_id,
+//       // o_id: item.o_id,
+//     },
+//   })
+// }
+
+// 新增功能
+// function addOption(totalCount) {
+//   router.push({
+//     name: 'XFormView',
+//     params: { id: totalCount, openid: totalCount },
+//     query: {
+//       configName: configName.value,
+//       serviceName: serviceName.value,
+//       mode: '新增',
+//     },
+//   })
+// }
+
+// 修改功能
+// function updateRow(result) {
+//   router.push({
+//     name: 'XFormView',
+//     params: { id: result.o_id, openid: result.o_id },
+//     query: {
+//       configName: configName.value,
+//       serviceName: serviceName.value,
+//       mode: '修改',
+//     },
+//   })
+// }
+
+// 删除功能
+// function deleteRow(result) {
+//   emit('deleteRow', result.o_id)
+// }
+// const fixQueryForm = ref({
+//   f_operator_id: '487184754014158848',
+// })
+</script>
+
+<template>
+  <NormalDataLayout id="XCellListView" title="工作计划">
+    <template #layout_content>
+      <XCellList
+        :config-name="configName"
+        :service-name="serviceName"
+      />
+    </template>
+  </NormalDataLayout>
+</template>
+
+<style scoped lang="less">
+</style>