af-mobile-client-vue3 1.4.46 → 1.4.48

package/src/components/data/XFormItem/index.vue

@@ -1283,6 +1283,7 @@ function scanCodeOrNfc(attr) {
           :attr="attr"
           :mode="props.mode"
           :readonly="readonly"
+          :service-name="serviceName"
           :is-async-upload="isAsyncUpload"
           @update-file-list="updateFile"
         />

package/src/components/data/XOlMap/types.ts

@@ -188,4 +188,4 @@ export interface PolygonLayerConfig {
   onClick?: (polygon: PolygonData, event: any) => void
   /** 多边形数据提供者 */
   dataProvider?: () => PolygonData[] | Promise<PolygonData[]>
-}
+}

package/src/main.ts

@@ -4,15 +4,17 @@ import Plugins from '@af-mobile-client-vue3/plugins'
 import router from '@af-mobile-client-vue3/router'
 import pinia from '@af-mobile-client-vue3/stores'
 import { i18n } from '@af-mobile-client-vue3/utils/i18n'
+// MateChat ai 对话相关
+import MateChat from '@matechat/core'
 import { createHead } from '@unhead/vue/client'
 import { createApp } from 'vue'
 import 'virtual:uno.css'
 import '@af-mobile-client-vue3/styles/app.less'
+
 import '@af-mobile-client-vue3/styles/var.less'
 
 // Vant 桌面端适配
 import '@vant/touch-emulator'
-
 /* --------------------------------
 Vant 中有个别组件是以函数的形式提供的，
 包括 Toast，Dialog，Notify 和 ImagePreview 组件。
@@ -22,7 +24,6 @@ Vant 中有个别组件是以函数的形式提供的，
 import 'vant/es/toast/style'
 import 'vant/es/dialog/style'
 import 'vant/es/notify/style'
-import 'vant/es/image-preview/style'
 
 (async () => {
   const app = createApp(App)
@@ -33,6 +34,7 @@ import 'vant/es/image-preview/style'
   app.use(pinia)
   app.use(i18n)
   app.use(Plugins)
+  app.use(MateChat)
 
   await bootstrap(router)
   app.mount('#system-app')

package/src/router/routes.ts

@@ -10,6 +10,7 @@ import NotFound from '@af-mobile-client-vue3/views/common/NotFound.vue'
 import EvaluateRecordView from '@af-mobile-client-vue3/views/component/EvaluateRecordView/index.vue'
 import IconifyView from '@af-mobile-client-vue3/views/component/IconifyView/index.vue'
 import ComponentView from '@af-mobile-client-vue3/views/component/index.vue'
+import MateChatView from '@af-mobile-client-vue3/views/component/MateChat/MateChatView.vue'
 import OtherChargeForm from '@af-mobile-client-vue3/views/component/OtherCharge/index.vue'
 import UserDetailView from '@af-mobile-client-vue3/views/component/UserDetailView/index.vue'
 import UserDetailPage from '@af-mobile-client-vue3/views/component/UserDetailView/UserDetailPage.vue'
@@ -211,6 +212,11 @@ const routes: Array<RouteRecordRaw> = [
         component: UserDetailPage,
         meta: { title: '用户详情' },
       },
+      {
+        path: '/Component/MateChatView',
+        name: 'MateChatView',
+        component: MateChatView,
+      },
     ],
   },
 

package/src/utils/wechat.ts

@@ -5,16 +5,16 @@ import wx from 'weixin-js-sdk'
 export interface WechatConfig {
   debug: boolean
   appId: string
-  timestamp: string
+  timestamp: number
   nonceStr: string
   signature: string
-  jsApiList: string[]
+  jsApiList: wx.ApiMethod[]
 }
 
 // 微信扫码配置
 export interface WechatScanConfig {
   needResult: 0 | 1
-  scanType: string[]
+  scanType: wx.scanType[]
 }
 
 // 微信扫码结果
@@ -92,7 +92,7 @@ export function scanQRCode(config: WechatScanConfig): Promise<WechatScanResult>
 // 获取微信签名（模拟）
 export async function getWechatSignature(url: string): Promise<{
   appId: string
-  timestamp: string
+  timestamp: number
   nonceStr: string
   signature: string
 }> {

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

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import liuliLogo from '@af-mobile-client-vue3/assets/img/component/liuli.png'
+import { showToast } from 'vant'
+import { ref } from 'vue'
+import { Button } from 'vue-devui/button'
+import { chatCompletions } from './apiService'
+import 'vue-devui/button/style.css'
+import 'vant/es/image-preview/style'
+import '@devui-design/icons/icomoon/devui-icon.css'
+
+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 simplePrompt = [
+  {
+    value: 'howToPay',
+    iconConfig: { name: 'icon-info-o', color: '#5e7ce0' },
+    label: '如何缴费',
+  },
+  {
+    value: 'howToRepair',
+    iconConfig: { name: 'icon-star', color: 'rgb(255, 215, 0)' },
+    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)"
+      />
+      <Button
+        style="margin-left: auto"
+        icon="add"
+        shape="circle"
+        title="新建对话"
+        size="md"
+        @click="newConversation"
+      />
+    </div>
+    <McLayoutSender>
+      <McInput :value="inputValue" :autofocus="true" :max-length="2000" @change="(e) => (inputValue = e)" @submit="onSubmit" />
+    </McLayoutSender>
+  </McLayout>
+</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/MateChat/apiService.ts

@@ -0,0 +1,104 @@
+import type { AxiosInstance } from 'axios'
+import axios from 'axios'
+
+/**
+ * 聊天消息接口
+ */
+export interface ChatMessage {
+  role: 'user' | 'assistant' | 'system'
+  content: string
+}
+
+/**
+ * 聊天请求参数接口
+ */
+export interface ChatCompletionsRequest {
+  chatId: string
+  stream: boolean
+  detail: boolean
+  variables: {
+    uid: string
+    name: string
+  }
+  messages: ChatMessage[]
+}
+
+/**
+ * 聊天响应使用情况接口
+ */
+export interface ChatUsage {
+  prompt_tokens: number
+  completion_tokens: number
+  total_tokens: number
+}
+
+/**
+ * 聊天响应选择项接口
+ */
+export interface ChatChoice {
+  message: {
+    role: 'assistant'
+    content: string
+  }
+  finish_reason: string
+  index: number
+}
+
+/**
+ * 聊天响应接口
+ */
+export interface ChatCompletionsResponse {
+  id: string
+  model: string
+  usage: ChatUsage
+  choices: ChatChoice[]
+}
+
+/**
+ * 创建独立的 axios 实例，不经过拦截器
+ */
+const chatAxiosInstance: AxiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_APP_API_BASE_URL || '',
+  timeout: 20000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+})
+
+/**
+ * 发送聊天请求
+ * @param content 用户输入的内容
+ * @returns Promise<ChatCompletionsResponse>
+ */
+/**
+ * 发送聊天请求
+ * @param content 用户输入的内容
+ * @returns Promise<ChatCompletionsResponse>
+ */
+export function chatCompletions(content: string): Promise<ChatCompletionsResponse> {
+  const requestData: ChatCompletionsRequest = {
+    chatId: 'chatId13333113',
+    stream: false,
+    detail: false,
+    variables: {
+      uid: 'asdfadsfasfd2323',
+      name: '张三',
+    },
+    messages: [
+      {
+        role: 'user',
+        content,
+      },
+    ],
+  }
+
+  return chatAxiosInstance.post<ChatCompletionsResponse>(
+    '/v1/chat/completions',
+    requestData,
+    {
+      headers: {
+        Authorization: 'Bearer fastgpt-cmS6DpSmnrAWfH23iz3J4Dz9witLSKVmNgaRbh5fcVWpWG4dDJYgmGlW',
+      },
+    },
+  ).then(response => response.data)
+}

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

@@ -13,7 +13,83 @@ const router = useRouter()
 
 // 简易crud表单测试
 const configName = ref('ceshiCRUD')
-const serviceName = ref('af-linepatrol')
+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>
@@ -21,7 +97,7 @@ const serviceName = ref('af-linepatrol')
     <template #layout_content>
       <XCellList
         :config-name="configName"
-        :show-filter="false"
+        :service-name="serviceName"
       />
     </template>
   </NormalDataLayout>

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

@@ -1,26 +1,41 @@
 <script setup lang="ts">
 import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
+import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
 import { ref } from 'vue'
 
-const configName = ref('HiddenDangersPhotoForm')
-const serviceName = ref('af-wechat')
+const configName = ref('ceshiForm')
+const serviceName = ref('af-system')
 
-const formHiddenDangersPhoto = ref(null)
-function submit(result: any) {
-  console.log('>>>> 提交: ', JSON.stringify(result))
+const formGroupAddConstruction = ref(null)
+const formData = ref({
+  'YYYY': '2025-09-08 16:03:22',
+  'YYYY-MM': '2025-09-08 16:03:22',
+  'YYYY-MM-DD': '2025-09-08 16:03:22',
+  'YYYY-MM-DDHH': '2025-09-08 16:03:22',
+  'YYYY-MM-DDHHMM': '2025-09-08 16:03:22',
+  'YYYY-MM-DDHHMMSS': '2025-09-08 16:03:22',
+})
+
+function onSubmit(data: any) {
+  console.warn('提交表单', data)
 }
 </script>
 
 <template>
-  <XForm
-    ref="formHiddenDangersPhoto"
-    mode="新增"
-    :config-name="configName"
-    :service-name="serviceName"
-    label-align="top"
-    @on-submit="submit"
-  />
+  <NormalDataLayout id="XFormGroupView" title="纯表单">
+    <template #layout_content>
+      <XForm
+        ref="formGroupAddConstruction"
+        mode="修改"
+        :config-name="configName"
+        :service-name="serviceName"
+        :form-data="formData"
+        @on-submit="onSubmit"
+      />
+    </template>
+  </NormalDataLayout>
 </template>
 
 <style scoped lang="less">
+
 </style>