af-mobile-client-vue3 1.4.47 → 1.4.48

package/src/utils/queryFormDefaultRangePicker.ts

@@ -1,57 +1,57 @@
-/**
- * 根据类型获取日期区间字符串
- * @param type '当年' | 'curMonth' | '当日'
- * @param show 区分实际值还是显示值, true为实际值, false为显示值
- * @returns [start, end] 例：['2024-01-01 00:00:00', '2024-12-31 23:59:59']
- */
-export function getRangeByType(type: string, show: boolean): [string, string] {
-  const now = new Date()
-  const year = now.getFullYear()
-  const month = (now.getMonth() + 1).toString().padStart(2, '0')
-  const day = now.getDate().toString().padStart(2, '0')
-
-  if (!show) {
-    if (type === 'curYear') {
-      return [
-        `${year}-01-01 00:00:00`,
-        `${year}-12-31 23:59:59`,
-      ]
-    }
-    if (type === 'curMonth') {
-      const lastDay = new Date(year, now.getMonth() + 1, 0).getDate()
-      return [
-        `${year}-${month}-01 00:00:00`,
-        `${year}-${month}-${lastDay.toString().padStart(2, '0')} 23:59:59`,
-      ]
-    }
-    if (type === 'curDay') {
-      return [
-        `${year}-${month}-${day} 00:00:00`,
-        `${year}-${month}-${day} 23:59:59`,
-      ]
-    }
-  }
-  if (show) {
-    if (type === 'curYear') {
-      return [
-        `${year}-01-01`,
-        `${year}-12-31`,
-      ]
-    }
-    if (type === 'curMonth') {
-      const lastDay = new Date(year, now.getMonth() + 1, 0).getDate()
-      return [
-        `${year}-${month}-01`,
-        `${year}-${month}-${lastDay.toString().padStart(2, '0')}`,
-      ]
-    }
-    if (type === 'curDay') {
-      return [
-        `${year}-${month}-${day}`,
-        `${year}-${month}-${day}`,
-      ]
-    }
-  }
-  // 兜底返回空字符串数组
-  return ['', '']
-}
+/**
+ * 根据类型获取日期区间字符串
+ * @param type '当年' | 'curMonth' | '当日'
+ * @param show 区分实际值还是显示值, true为实际值, false为显示值
+ * @returns [start, end] 例：['2024-01-01 00:00:00', '2024-12-31 23:59:59']
+ */
+export function getRangeByType(type: string, show: boolean): [string, string] {
+  const now = new Date()
+  const year = now.getFullYear()
+  const month = (now.getMonth() + 1).toString().padStart(2, '0')
+  const day = now.getDate().toString().padStart(2, '0')
+
+  if (!show) {
+    if (type === 'curYear') {
+      return [
+        `${year}-01-01 00:00:00`,
+        `${year}-12-31 23:59:59`,
+      ]
+    }
+    if (type === 'curMonth') {
+      const lastDay = new Date(year, now.getMonth() + 1, 0).getDate()
+      return [
+        `${year}-${month}-01 00:00:00`,
+        `${year}-${month}-${lastDay.toString().padStart(2, '0')} 23:59:59`,
+      ]
+    }
+    if (type === 'curDay') {
+      return [
+        `${year}-${month}-${day} 00:00:00`,
+        `${year}-${month}-${day} 23:59:59`,
+      ]
+    }
+  }
+  if (show) {
+    if (type === 'curYear') {
+      return [
+        `${year}-01-01`,
+        `${year}-12-31`,
+      ]
+    }
+    if (type === 'curMonth') {
+      const lastDay = new Date(year, now.getMonth() + 1, 0).getDate()
+      return [
+        `${year}-${month}-01`,
+        `${year}-${month}-${lastDay.toString().padStart(2, '0')}`,
+      ]
+    }
+    if (type === 'curDay') {
+      return [
+        `${year}-${month}-${day}`,
+        `${year}-${month}-${day}`,
+      ]
+    }
+  }
+  // 兜底返回空字符串数组
+  return ['', '']
+}

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)
+}