Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-22 07:03:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 添加自定义标签组件，更新聊天记录和设备管理页面，优化请求配置

Browse Source
This commit is contained in:
Junsen
2025-08-11 15:14:23 +08:00
parent 70221e7f62
commit dbc1a515d2
24 changed files with 1376 additions and 951 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/xiaozhi-mobile-admin/src/api/chat-history/chat-history.ts
+3
View File
@@ -17,6 +17,9 @@ export function getChatSessions(agentId: string, params: GetSessionsParams) {
ignoreAuth: false,
toast: false,
},
cacheFor: {
expire: 0,
},
})
}
main/xiaozhi-mobile-admin/src/components/custom-tabs/index.vue
+131
View File
@@ -0,0 +1,131 @@
<script setup lang="ts">
interface TabItem {
label: string
value: string | number
icon: string
activeIcon: string
}
interface Props {
tabList: TabItem[]
modelValue?: string | number
}
interface Emits {
(e: 'update:modelValue', value: string | number): void
(e: 'change', item: TabItem, index: number): void
}
const props = withDefaults(defineProps<Props>(), {
modelValue: '',
})
const emit = defineEmits<Emits>()
const activeValue = computed(() => {
return props.modelValue || (props.tabList[0]?.value ?? '')
})
function handleTabClick(item: TabItem, index: number) {
emit('update:modelValue', item.value)
emit('change', item, index)
}
</script>
<template>
<view class="custom-tabs">
<view
v-for="(item, index) in tabList"
:key="item.value"
class="tab-item"
:class="{ active: activeValue === item.value }"
@click="handleTabClick(item, index)"
>
<view class="tab-icon">
<image
:src="activeValue === item.value ? item.activeIcon : item.icon"
class="icon-img"
mode="aspectFit"
/>
</view>
<view class="tab-text">
{{ item.label }}
</view>
<view v-if="activeValue === item.value" class="tab-indicator" />
</view>
</view>
</template>
<style scoped>
.custom-tabs {
display: flex;
align-items: center;
justify-content: space-around;
background-color: #ffffff;
padding: 0 16rpx;
border-top: 1rpx solid #eeeeee;
box-sizing: border-box;
}
.tab-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16rpx 12rpx 12rpx;
flex: 1;
cursor: pointer;
transition: all 0.2s ease;
}
.tab-icon {
width: 48rpx;
height: 48rpx;
margin-bottom: 8rpx;
display: flex;
align-items: center;
justify-content: center;
}
.icon-img {
width: 100%;
height: 100%;
}
.tab-text {
font-size: 24rpx;
color: #9d9ea3;
line-height: 1.2;
text-align: center;
transition: color 0.2s ease;
}
.tab-item.active .tab-text {
color: #336cff;
font-weight: 500;
}
.tab-indicator {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 4rpx;
background-color: #336cff;
border-radius: 2rpx;
}
/* 适配不同尺寸屏幕 */
@media (max-width: 375px) {
.tab-text {
font-size: 22rpx;
}
.tab-icon {
width: 44rpx;
height: 44rpx;
}
}
</style>
main/xiaozhi-mobile-admin/src/http/request/alova.ts
+2 -1
View File
@@ -4,6 +4,7 @@ import AdapterUniapp from '@alova/adapter-uniapp'
import { createAlova } from 'alova'
import { createServerTokenAuthentication } from 'alova/client'
import VueHook from 'alova/vue'
import { getEnvBaseUrl } from '@/utils'
import { toast } from '@/utils/toast'
import { ContentTypeEnum, ResultEnum, ShowMessage } from './enum'
@@ -35,7 +36,7 @@ const { onAuthRequired, onResponseRefreshToken } = createServerTokenAuthenticati
* alova 请求实例
*/
const alovaInstance = createAlova({
baseURL: import.meta.env.VITE_SERVER_BASEURL,
baseURL: getEnvBaseUrl(),
...AdapterUniapp(),
timeout: 5000,
statesHook: VueHook,
main/xiaozhi-mobile-admin/src/layouts/fg-tabbar/tabbarList.ts
+10 -31
View File
@@ -37,42 +37,21 @@ export const tabbarList: FgTabBarItem[] = [
iconType: 'uiLib',
},
{
iconPath: 'static/tabbar/device.png',
selectedIconPath: 'static/tabbar/device_activate.png',
pagePath: 'pages/device/index',
text: '设备管理',
icon: 'i-carbon-laptop',
// 注意 unocss 的图标需要在 页面上引入一下，或者配置到 unocss.config.ts 的 safelist 中
iconPath: 'static/tabbar/network.png',
selectedIconPath: 'static/tabbar/network_activate.png',
pagePath: 'pages/device-config/index',
text: '配网',
icon: 'i-carbon-network-3',
iconType: 'uiLib',
},
{
iconPath: 'static/tabbar/microphone.png',
selectedIconPath: 'static/tabbar/microphone_activate.png',
pagePath: 'pages/voiceprint/index',
text: '声纹识别',
icon: 'i-carbon-microphone-filled',
iconPath: 'static/tabbar/system.png',
selectedIconPath: 'static/tabbar/system_activate.png',
pagePath: 'pages/settings/index',
text: '系统',
icon: 'i-carbon-settings',
iconType: 'uiLib',
},
{
iconPath: 'static/tabbar/chat.png',
selectedIconPath: 'static/tabbar/chat_activate.png',
pagePath: 'pages/chat-history/index',
text: '聊天记录',
icon: 'i-carbon-chat-bot',
iconType: 'uiLib',
},
// {
// pagePath: 'pages/my/index',
// text: '我的',
// icon: '/static/logo.svg',
// iconType: 'local',
// },
// {
// pagePath: 'pages/mine/index',
// text: '我的',
// icon: 'iconfont icon-my',
// iconType: 'iconfont',
// },
]
// NATIVE_TABBAR(1) 和 CUSTOM_TABBAR_WITH_CACHE(2) 时，需要tabbar缓存
main/xiaozhi-mobile-admin/src/pages/agent/edit.vue
+232 -314
View File
@@ -1,81 +1,24 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "编辑"
}
}
</route>
<script lang="ts" setup>
import type { AgentDetail, ModelOption, PluginDefinition, RoleTemplate } from '@/api/agent/types'
import { onLoad } from '@dcloudio/uni-app'
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { getAgentDetail, getModelOptions, getPluginFunctions, getRoleTemplates, getTTSVoices, updateAgent } from '@/api/agent/agent'
import { useAgentStore, usePluginStore } from '@/store'
import { usePluginStore } from '@/store'
import { toast } from '@/utils/toast'
defineOptions({
name: 'AgentEdit',
})
// 页面参数
const agentId = ref('')
// 获取屏幕边界到安全区域距离
let safeAreaInsets: any
let systemInfo: any
// #ifdef MP-WEIXIN
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
? {
top: systemInfo.safeArea.top,
right: systemInfo.windowWidth - systemInfo.safeArea.right,
bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
left: systemInfo.safeArea.left,
}
: null
// #endif
// #ifndef MP-WEIXIN
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif
// 智能体管理
const agentStore = useAgentStore()
const showAgentPicker = ref<boolean>(false)
// 获取智能体选项
const agentOptions = computed(() => {
return agentStore.getAgentOptions
const props = withDefaults(defineProps<Props>(), {
agentId: '',
})
// 显示智能体选择器
function showAgentSelector() {
showAgentPicker.value = true
// 组件参数
interface Props {
agentId?: string
}
// 关闭智能体选择器
function closeAgentSelector() {
showAgentPicker.value = false
}
// 处理智能体切换
function handleAgentSwitch({ item }: { item: any }) {
const selectedAgentId = item.value
if (selectedAgentId !== agentId.value) {
// 设置当前智能体
agentStore.setCurrentAgent(selectedAgentId)
// 跳转到新的智能体编辑页面
uni.redirectTo({
url: `/pages/agent/edit?id=${selectedAgentId}`,
})
}
closeAgentSelector()
}
const agentId = computed(() => props.agentId)
// 表单数据
const formData = ref<Partial<AgentDetail>>({
@@ -147,13 +90,33 @@ const allFunctions = ref<PluginDefinition[]>([])
// 使用插件store
const pluginStore = usePluginStore()
// 监听当前智能体变化，自动加载数据
watch(() => agentStore.currentAgentId, async (newId) => {
if (newId && newId !== agentId.value) {
agentId.value = newId
await loadAgentDetail()
}
}, { immediate: true })
// tabs
const tabList = [
{
label: '角色配置',
value: 'home',
icon: '/static/tabbar/robot.png',
activeIcon: '/static/tabbar/robot_activate.png',
},
{
label: '设备管理',
value: 'category',
icon: '/static/tabbar/device.png',
activeIcon: '/static/tabbar/device_activate.png',
},
{
label: '聊天记录',
value: 'settings',
icon: '/static/tabbar/chat.png',
activeIcon: '/static/tabbar/chat_activate.png',
},
{
label: '声纹管理',
value: 'profile',
icon: '/static/tabbar/voiceprint.png',
activeIcon: '/static/tabbar/voiceprint_activate.png',
},
]
// 加载智能体详情
async function loadAgentDetail() {
@@ -409,10 +372,6 @@ async function saveAgent() {
await updateAgent(agentId.value, formData.value)
toast.success('保存成功')
setTimeout(() => {
uni.navigateBack()
}, 1000)
}
catch (error) {
console.error('保存失败:', error)
@@ -423,11 +382,6 @@ async function saveAgent() {
}
}
// 返回上一页
function goBack() {
uni.navigateBack()
}
function loadPluginFunctions() {
getPluginFunctions().then((res) => {
const processedFunctions = res?.map((item) => {
@@ -467,21 +421,10 @@ function watchPluginUpdates() {
}, { deep: true })
}
onLoad((options) => {
if (options?.id) {
agentId.value = options.id
}
})
onMounted(async () => {
// 初始化插件配置监听
watchPluginUpdates()
// 确保 agent store 中有数据，如果没有则加载
if (!agentStore.isLoaded) {
await agentStore.loadAgentList()
}
// 先加载模型选项和角色模板
await Promise.all([
loadRoleTemplates(),
@@ -497,223 +440,207 @@ onMounted(async () => {
</script>
<template>
<view class="h-screen flex flex-col bg-[#f5f7fb]">
<!-- 导航栏 -->
<wd-navbar title="助手设置" safe-area-inset-top>
<template #left>
<wd-icon name="arrow-left" size="18" @click="goBack" />
</template>
<template #right>
<wd-icon name="filter1" size="18" @click="showAgentSelector" />
</template>
</wd-navbar>
<view class="bg-[#f5f7fb] px-[20rpx]">
<!-- 基础信息标题 -->
<view class="pb-[20rpx] first:pt-[20rpx]">
<text class="text-[32rpx] text-[#232338] font-bold">
基础信息
</text>
</view>
<!-- 主内容滚动区域 -->
<scroll-view
scroll-y
:style="{ height: `calc(100vh - ${safeAreaInsets?.top || 0}px - 120rpx)` }"
class="flex-1 px-[20rpx] bg-[#f5f7fb] box-border"
enable-back-to-top
>
<!-- 基础信息标题 -->
<view class="pb-[20rpx] first:pt-[20rpx]">
<text class="text-[36rpx] font-bold text-[#232338]">
基础信息
<!-- 基础信息卡片 -->
<view class="mb-[24rpx] border border-[#eeeeee] rounded-[20rpx] bg-[#fbfbfb] p-[24rpx]" style="box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);">
<view class="mb-[24rpx] last:mb-0">
<text class="mb-[12rpx] block text-[28rpx] text-[#232338] font-medium">
助手昵称
</text>
</view>
<!-- 基础信息卡片 -->
<view class="bg-[#fbfbfb] rounded-[20rpx] mb-[24rpx] p-[24rpx] border border-[#eeeeee]" style="box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);">
<view class="mb-[24rpx] last:mb-0">
<text class="block text-[28rpx] text-[#232338] font-medium mb-[12rpx]">
助手昵称
</text>
<input
v-model="formData.agentName"
class="w-full h-[80rpx] p-[16rpx_20rpx] bg-[#f5f7fb] rounded-[12rpx] border border-[#eeeeee] text-[28rpx] text-[#232338] box-border leading-[1.4] outline-none focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
type="text"
placeholder="请输入助手昵称"
>
</view>
<view class="mb-[24rpx] last:mb-0">
<text class="block text-[28rpx] text-[#232338] font-medium mb-[12rpx]">
角色模式
</text>
<view class="flex flex-wrap gap-[12rpx] mt-0">
<view
v-for="template in roleTemplates"
:key="template.id"
class="px-[24rpx] py-[12rpx] bg-[rgba(51,108,255,0.1)] text-[#336cff] rounded-[20rpx] text-[24rpx] border border-[rgba(51,108,255,0.2)] cursor-pointer transition-all duration-300"
:class="{ 'bg-[#336cff] text-white border-[#336cff]': selectedTemplateId === template.id }"
@click="selectRoleTemplate(template.id)"
>
{{ template.agentName }}
</view>
</view>
</view>
<view class="mb-[24rpx] last:mb-0">
<text class="block text-[28rpx] text-[#232338] font-medium mb-[12rpx]">
角色介绍
</text>
<textarea
v-model="formData.systemPrompt"
:maxlength="2000"
placeholder="请输入角色介绍"
class="w-full h-[500rpx] p-[20rpx] bg-[#f5f7fb] rounded-[12rpx] border border-[#eeeeee] text-[26rpx] text-[#232338] leading-[1.6] resize-none box-border outline-none break-words break-all focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
/>
<view class="text-right text-[22rpx] text-[#9d9ea3] mt-[8rpx]">
{{ (formData.systemPrompt || '').length }}/2000
</view>
</view>
</view>
<!-- 模型配置标题 -->
<view class="pb-[20rpx]">
<text class="text-[36rpx] font-bold text-[#232338]">
模型配置
</text>
</view>
<!-- 模型配置卡片 -->
<view class="bg-[#fbfbfb] rounded-[20rpx] mb-[24rpx] p-[24rpx] border border-[#eeeeee]" style="box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);">
<view class="flex flex-col gap-[16rpx]">
<view class="flex items-center justify-between p-[20rpx] bg-[#f5f7fb] rounded-[12rpx] border border-[#eeeeee] cursor-pointer transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('vad')">
<text class="text-[28rpx] text-[#232338] font-medium">
语音活动检测
</text>
<text class="flex-1 text-right text-[26rpx] text-[#65686f] mx-[16rpx]">
{{ displayNames.vad }}
</text>
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
</view>
<view class="flex items-center justify-between p-[20rpx] bg-[#f5f7fb] rounded-[12rpx] border border-[#eeeeee] cursor-pointer transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('asr')">
<text class="text-[28rpx] text-[#232338] font-medium">
语音识别
</text>
<text class="flex-1 text-right text-[26rpx] text-[#65686f] mx-[16rpx]">
{{ displayNames.asr }}
</text>
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
</view>
<view class="flex items-center justify-between p-[20rpx] bg-[#f5f7fb] rounded-[12rpx] border border-[#eeeeee] cursor-pointer transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('llm')">
<text class="text-[28rpx] text-[#232338] font-medium">
大语言模型
</text>
<text class="flex-1 text-right text-[26rpx] text-[#65686f] mx-[16rpx]">
{{ displayNames.llm }}
</text>
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
</view>
<view class="flex items-center justify-between p-[20rpx] bg-[#f5f7fb] rounded-[12rpx] border border-[#eeeeee] cursor-pointer transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('vllm')">
<text class="text-[28rpx] text-[#232338] font-medium">
视觉大模型
</text>
<text class="flex-1 text-right text-[26rpx] text-[#65686f] mx-[16rpx]">
{{ displayNames.vllm }}
</text>
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
</view>
<view class="flex items-center justify-between p-[20rpx] bg-[#f5f7fb] rounded-[12rpx] border border-[#eeeeee] cursor-pointer transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('intent')">
<text class="text-[28rpx] text-[#232338] font-medium">
意图识别
</text>
<text class="flex-1 text-right text-[26rpx] text-[#65686f] mx-[16rpx]">
{{ displayNames.intent }}
</text>
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
</view>
<view class="flex items-center justify-between p-[20rpx] bg-[#f5f7fb] rounded-[12rpx] border border-[#eeeeee] cursor-pointer transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('memory')">
<text class="text-[28rpx] text-[#232338] font-medium">
记忆
</text>
<text class="flex-1 text-right text-[26rpx] text-[#65686f] mx-[16rpx]">
{{ displayNames.memory }}
</text>
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
</view>
</view>
</view>
<!-- 语音设置标题 -->
<view class="pb-[20rpx]">
<text class="text-[36rpx] font-bold text-[#232338]">
语音设置
</text>
</view>
<!-- 语音设置卡片 -->
<view class="bg-[#fbfbfb] rounded-[20rpx] mb-[24rpx] p-[24rpx] border border-[#eeeeee]" style="box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);">
<view class="flex flex-col gap-[16rpx]">
<view class="flex items-center justify-between p-[20rpx] bg-[#f5f7fb] rounded-[12rpx] border border-[#eeeeee] cursor-pointer transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('tts')">
<text class="text-[28rpx] text-[#232338] font-medium">
语音合成
</text>
<text class="flex-1 text-right text-[26rpx] text-[#65686f] mx-[16rpx]">
{{ displayNames.tts }}
</text>
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
</view>
<view class="flex items-center justify-between p-[20rpx] bg-[#f5f7fb] rounded-[12rpx] border border-[#eeeeee] cursor-pointer transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('voiceprint')">
<text class="text-[28rpx] text-[#232338] font-medium">
角色音色
</text>
<text class="flex-1 text-right text-[26rpx] text-[#65686f] mx-[16rpx]">
{{ displayNames.voiceprint }}
</text>
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
</view>
<view class="flex items-center justify-between p-[20rpx] bg-[#f5f7fb] rounded-[12rpx] border border-[#eeeeee]">
<view class="text-[28rpx] text-[#232338] font-medium">
插件
</view>
<view class="px-[24rpx] py-[12rpx] bg-[rgba(51,108,255,0.1)] text-[#336cff] rounded-[20rpx] text-[24rpx] cursor-pointer transition-all duration-300 active:bg-[#336cff] active:text-white" @click="handleTools">
<text>编辑功能</text>
</view>
</view>
</view>
</view>
<!-- 记忆历史标题 -->
<view class="pb-[20rpx]">
<text class="text-[36rpx] font-bold text-[#232338]">
历史记忆
</text>
</view>
<!-- 记忆历史卡片 -->
<view class="bg-[#fbfbfb] rounded-[20rpx] mb-[24rpx] p-[24rpx] border border-[#eeeeee]" style="box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);">
<view class="mb-[24rpx] last:mb-0">
<textarea
v-model="formData.summaryMemory"
placeholder="记忆内容"
disabled
class="w-full h-[500rpx] p-[20rpx] bg-[#f0f0f0] text-[#65686f] opacity-80 rounded-[12rpx] border border-[#eeeeee] text-[26rpx] leading-[1.6] resize-none box-border outline-none break-words break-all"
/>
</view>
</view>
<!-- 保存按钮 -->
<view class="p-0 mt-[40rpx]">
<wd-button
type="primary"
:loading="saving"
:disabled="saving"
custom-class="w-full h-[80rpx] rounded-[16rpx] text-[30rpx] font-semibold bg-[#336cff] active:bg-[#2d5bd1]"
@click="saveAgent"
<input
v-model="formData.agentName"
class="box-border h-[80rpx] w-full border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[16rpx_20rpx] text-[28rpx] text-[#232338] leading-[1.4] outline-none focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
type="text"
placeholder="请输入助手昵称"
>
{{ saving ? '保存中...' : '保存' }}
</wd-button>
</view>
</scroll-view>
<view class="mb-[24rpx] last:mb-0">
<text class="mb-[12rpx] block text-[28rpx] text-[#232338] font-medium">
角色模式
</text>
<view class="mt-0 flex flex-wrap gap-[12rpx]">
<view
v-for="template in roleTemplates"
:key="template.id"
class="cursor-pointer rounded-[20rpx] px-[24rpx] py-[12rpx] text-[24rpx] transition-all duration-300"
:class="selectedTemplateId === template.id
? 'bg-[#336cff] text-white border border-[#336cff]'
: 'bg-[rgba(51,108,255,0.1)] text-[#336cff] border border-[rgba(51,108,255,0.2)]'"
@click="selectRoleTemplate(template.id)"
>
{{ template.agentName }}
</view>
</view>
</view>
<view class="mb-[24rpx] last:mb-0">
<text class="mb-[12rpx] block text-[28rpx] text-[#232338] font-medium">
角色介绍
</text>
<textarea
v-model="formData.systemPrompt"
:maxlength="2000"
placeholder="请输入角色介绍"
class="box-border h-[500rpx] w-full resize-none break-words break-all border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] text-[26rpx] text-[#232338] leading-[1.6] outline-none focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
/>
<view class="mt-[8rpx] text-right text-[22rpx] text-[#9d9ea3]">
{{ (formData.systemPrompt || '').length }}/2000
</view>
</view>
</view>
<!-- 模型配置标题 -->
<view class="pb-[20rpx]">
<text class="text-[32rpx] text-[#232338] font-bold">
模型配置
</text>
</view>
<!-- 模型配置卡片 -->
<view class="mb-[24rpx] border border-[#eeeeee] rounded-[20rpx] bg-[#fbfbfb] p-[24rpx]" style="box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);">
<view class="flex flex-col gap-[16rpx]">
<view class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('vad')">
<text class="text-[28rpx] text-[#232338] font-medium">
语音活动检测
</text>
<text class="mx-[16rpx] flex-1 text-right text-[26rpx] text-[#65686f]">
{{ displayNames.vad }}
</text>
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
</view>
<view class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('asr')">
<text class="text-[28rpx] text-[#232338] font-medium">
语音识别
</text>
<text class="mx-[16rpx] flex-1 text-right text-[26rpx] text-[#65686f]">
{{ displayNames.asr }}
</text>
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
</view>
<view class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('llm')">
<text class="text-[28rpx] text-[#232338] font-medium">
大语言模型
</text>
<text class="mx-[16rpx] flex-1 text-right text-[26rpx] text-[#65686f]">
{{ displayNames.llm }}
</text>
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
</view>
<view class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('vllm')">
<text class="text-[28rpx] text-[#232338] font-medium">
视觉大模型
</text>
<text class="mx-[16rpx] flex-1 text-right text-[26rpx] text-[#65686f]">
{{ displayNames.vllm }}
</text>
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
</view>
<view class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('intent')">
<text class="text-[28rpx] text-[#232338] font-medium">
意图识别
</text>
<text class="mx-[16rpx] flex-1 text-right text-[26rpx] text-[#65686f]">
{{ displayNames.intent }}
</text>
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
</view>
<view class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('memory')">
<text class="text-[28rpx] text-[#232338] font-medium">
记忆
</text>
<text class="mx-[16rpx] flex-1 text-right text-[26rpx] text-[#65686f]">
{{ displayNames.memory }}
</text>
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
</view>
</view>
</view>
<!-- 语音设置标题 -->
<view class="pb-[20rpx]">
<text class="text-[32rpx] text-[#232338] font-bold">
语音设置
</text>
</view>
<!-- 语音设置卡片 -->
<view class="mb-[24rpx] border border-[#eeeeee] rounded-[20rpx] bg-[#fbfbfb] p-[24rpx]" style="box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);">
<view class="flex flex-col gap-[16rpx]">
<view class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('tts')">
<text class="text-[28rpx] text-[#232338] font-medium">
语音合成
</text>
<text class="mx-[16rpx] flex-1 text-right text-[26rpx] text-[#65686f]">
{{ displayNames.tts }}
</text>
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
</view>
<view class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('voiceprint')">
<text class="text-[28rpx] text-[#232338] font-medium">
角色音色
</text>
<text class="mx-[16rpx] flex-1 text-right text-[26rpx] text-[#65686f]">
{{ displayNames.voiceprint }}
</text>
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
</view>
<view class="flex items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx]">
<view class="text-[28rpx] text-[#232338] font-medium">
插件
</view>
<view class="cursor-pointer rounded-[20rpx] bg-[rgba(51,108,255,0.1)] px-[24rpx] py-[12rpx] text-[24rpx] text-[#336cff] transition-all duration-300 active:bg-[#336cff] active:text-white" @click="handleTools">
<text>编辑功能</text>
</view>
</view>
</view>
</view>
<!-- 记忆历史标题 -->
<view class="pb-[20rpx]">
<text class="text-[32rpx] text-[#232338] font-bold">
历史记忆
</text>
</view>
<!-- 记忆历史卡片 -->
<view class="mb-[24rpx] border border-[#eeeeee] rounded-[20rpx] bg-[#fbfbfb] p-[24rpx]" style="box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);">
<view class="mb-[24rpx] last:mb-0">
<textarea
v-model="formData.summaryMemory"
placeholder="记忆内容"
disabled
class="box-border h-[500rpx] w-full resize-none break-words break-all border border-[#eeeeee] rounded-[12rpx] bg-[#f0f0f0] p-[20rpx] text-[26rpx] text-[#65686f] leading-[1.6] opacity-80 outline-none"
/>
</view>
</view>
<!-- 保存按钮 -->
<view class="mt-[40rpx] p-0">
<wd-button
type="primary"
:loading="saving"
:disabled="saving"
custom-class="w-full h-[80rpx] rounded-[16rpx] text-[30rpx] font-semibold bg-[#336cff] active:bg-[#2d5bd1]"
@click="saveAgent"
>
{{ saving ? '保存中...' : '保存' }}
</wd-button>
</view>
<!-- 模型选择器 -->
<wd-action-sheet
v-model="pickerShow.vad"
@@ -770,14 +697,5 @@ onMounted(async () => {
@close="onPickerCancel('voiceprint')"
@select="({ item }) => onPickerConfirm('voiceprint', item.value, item.name)"
/>
<!-- 智能体选择器 -->
<wd-action-sheet
v-model="showAgentPicker"
:actions="agentOptions"
title="切换智能体"
@close="closeAgentSelector"
@select="handleAgentSwitch"
/>
</view>
</template>
</template>
main/xiaozhi-mobile-admin/src/pages/agent/index.vue
+214
View File
@@ -0,0 +1,214 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationBarTitleText": "智能体",
"navigationStyle": "custom"
}
}
</route>
<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { computed, onMounted, ref } from 'vue'
import CustomTabs from '@/components/custom-tabs/index.vue'
import ChatHistory from '@/pages/chat-history/index.vue'
import DeviceManagement from '@/pages/device/index.vue'
import VoiceprintManagement from '@/pages/voiceprint/index.vue'
import AgentEdit from './edit.vue'
defineOptions({
name: 'AgentIndex',
})
// 获取屏幕边界到安全区域距离
let safeAreaInsets: any
let systemInfo: any
// #ifdef MP-WEIXIN
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
? {
top: systemInfo.safeArea.top,
right: systemInfo.windowWidth - systemInfo.safeArea.right,
bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
left: systemInfo.safeArea.left,
}
: null
// #endif
// #ifndef MP-WEIXIN
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif
// 智能体ID
const currentAgentId = ref('default')
// 当前 tab
const currentTab = ref('agent-config')
// 刷新和加载状态
const refreshing = ref(false)
// 计算是否启用下拉刷新（角色编辑页面不启用）
const refresherEnabled = computed(() => {
return currentTab.value !== 'agent-config'
})
// 子组件引用
const deviceRef = ref()
const chatRef = ref()
const voiceprintRef = ref()
// Tab 配置
const tabList = [
{
label: '角色配置',
value: 'agent-config',
icon: '/static/tabbar/robot.png',
activeIcon: '/static/tabbar/robot_activate.png',
},
{
label: '设备管理',
value: 'device-management',
icon: '/static/tabbar/device.png',
activeIcon: '/static/tabbar/device_activate.png',
},
{
label: '聊天记录',
value: 'chat-history',
icon: '/static/tabbar/chat.png',
activeIcon: '/static/tabbar/chat_activate.png',
},
{
label: '声纹管理',
value: 'voiceprint-management',
icon: '/static/tabbar/microphone.png',
activeIcon: '/static/tabbar/microphone_activate.png',
},
]
// 返回上一页
function goBack() {
uni.navigateBack()
}
// 处理 tab 切换
function handleTabChange(item: any) {
console.log('Tab changed:', item)
}
// 下拉刷新
async function onRefresh() {
// 角色编辑页面不需要刷新
if (currentTab.value === 'agent-config') {
return
}
refreshing.value = true
try {
switch (currentTab.value) {
case 'device-management':
if (deviceRef.value?.refresh) {
await deviceRef.value.refresh()
}
break
case 'chat-history':
if (chatRef.value?.refresh) {
await chatRef.value.refresh()
}
break
case 'voiceprint-management':
if (voiceprintRef.value?.refresh) {
await voiceprintRef.value.refresh()
}
break
}
}
catch (error) {
console.error('刷新失败:', error)
}
finally {
refreshing.value = false
}
}
// 触底加载更多
async function onLoadMore() {
// 只有聊天记录需要加载更多
if (currentTab.value === 'chat-history' && chatRef.value?.loadMore) {
await chatRef.value.loadMore()
}
}
// 接收页面参数
onLoad((options) => {
if (options?.agentId) {
currentAgentId.value = options.agentId
console.log('接收到智能体ID:', options.agentId)
}
})
onMounted(async () => {
// 页面初始化
})
</script>
<template>
<view class="h-screen flex flex-col bg-[#f5f7fb]">
<!-- 导航栏 -->
<wd-navbar title="智能体" safe-area-inset-top>
<template #left>
<wd-icon name="arrow-left" size="18" @click="goBack" />
</template>
</wd-navbar>
<!-- 自定义 Tabs -->
<CustomTabs
v-model="currentTab"
:tab-list="tabList"
@change="handleTabChange"
/>
<!-- 主内容滚动区域 -->
<scroll-view
scroll-y
:style="{ height: `calc(100vh - ${safeAreaInsets?.top || 0}px - 180rpx)` }"
class="box-border flex-1 bg-[#f5f7fb]"
enable-back-to-top
:refresher-enabled="refresherEnabled"
:refresher-triggered="refreshing"
@refresherrefresh="onRefresh"
@scrolltolower="onLoadMore"
>
<!-- Tab 内容 -->
<view class="flex-1">
<AgentEdit
v-if="currentTab === 'agent-config'"
:agent-id="currentAgentId"
/>
<DeviceManagement
v-else-if="currentTab === 'device-management'"
ref="deviceRef"
:agent-id="currentAgentId"
/>
<ChatHistory
v-else-if="currentTab === 'chat-history'"
ref="chatRef"
:agent-id="currentAgentId"
/>
<VoiceprintManagement
v-else-if="currentTab === 'voiceprint-management'"
ref="voiceprintRef"
:agent-id="currentAgentId"
/>
</view>
</scroll-view>
</view>
</template>
<style scoped>
</style>
main/xiaozhi-mobile-admin/src/pages/agent/tools.vue
+11 -12
View File
@@ -261,7 +261,7 @@ onMounted(async () => {
<!-- 内容区域 -->
<scroll-view
scroll-y
class="flex-1 box-border px-[20rpx] bg-transparent"
class="box-border flex-1 bg-transparent px-[20rpx]"
:style="{ height: 'calc(100vh - 120rpx)' }"
:scroll-with-animation="true"
>
@@ -453,12 +453,12 @@ onMounted(async () => {
<view
v-for="field in currentFunction.fieldsMeta"
:key="field.key"
class="bg-white rounded-[20rpx] p-[30rpx] border border-[#eeeeee]"
class="border border-[#eeeeee] rounded-[20rpx] bg-white p-[30rpx]"
style="box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);"
>
<!-- 字段信息 -->
<view class="mb-[24rpx]">
<text class="block text-[32rpx] font-medium text-[#232338] mb-[8rpx]">
<text class="mb-[8rpx] block text-[32rpx] text-[#232338] font-medium">
{{ field.label }}
</text>
<text v-if="getFieldRemark(field)" class="block text-[24rpx] text-[#65686f] leading-[1.5]">
@@ -472,7 +472,7 @@ onMounted(async () => {
<input
v-if="field.type === 'string'"
v-model="tempParams[field.key]"
class="w-full h-[80rpx] p-[16rpx_20rpx] bg-[#f5f7fb] rounded-[12rpx] border border-[#eeeeee] text-[28rpx] text-[#232338] box-border focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
class="box-border h-[80rpx] w-full border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[16rpx_20rpx] text-[28rpx] text-[#232338] focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
type="text"
:placeholder="`请输入${field.label}`"
@input="
@@ -482,12 +482,12 @@ onMounted(async () => {
<!-- 数组类型 -->
<view v-else-if="field.type === 'array'">
<text class="block text-[24rpx] text-[#65686f] mb-[16rpx]">
<text class="mb-[16rpx] block text-[24rpx] text-[#65686f]">
每行输入一个项目
</text>
<textarea
v-model="arrayTextCache[field.key]"
class="w-full min-h-[200rpx] p-[20rpx] bg-[#f5f7fb] rounded-[12rpx] border border-[#eeeeee] text-[26rpx] text-[#232338] leading-[1.6] box-border focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
class="box-border min-h-[200rpx] w-full border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] text-[26rpx] text-[#232338] leading-[1.6] focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
:placeholder="`请输入${field.label}，每行一个`"
@input="
handleArrayChange(field.key, $event.detail.value, field)
@@ -497,12 +497,12 @@ onMounted(async () => {
<!-- JSON类型 -->
<view v-else-if="field.type === 'json'">
<text class="block text-[24rpx] text-[#65686f] mb-[16rpx]">
<text class="mb-[16rpx] block text-[24rpx] text-[#65686f]">
请输入有效的JSON格式
</text>
<textarea
v-model="jsonTextCache[field.key]"
class="w-full min-h-[300rpx] p-[20rpx] bg-[#f5f7fb] rounded-[12rpx] border border-[#eeeeee] text-[26rpx] text-[#232338] leading-[1.6] box-border focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3] font-mono"
class="box-border min-h-[300rpx] w-full border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] text-[26rpx] text-[#232338] leading-[1.6] font-mono focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
placeholder="请输入合法的JSON格式"
@blur="
handleJsonChange(field.key, $event.detail.value, field)
@@ -514,7 +514,7 @@ onMounted(async () => {
<input
v-else-if="field.type === 'number'"
v-model="tempParams[field.key]"
class="w-full h-[80rpx] p-[16rpx_20rpx] bg-[#f5f7fb] rounded-[12rpx] border border-[#eeeeee] text-[28rpx] text-[#232338] box-border focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
class="box-border h-[80rpx] w-full border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[16rpx_20rpx] text-[28rpx] text-[#232338] focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
type="number"
:placeholder="`请输入${field.label}`"
@input="
@@ -532,7 +532,7 @@ onMounted(async () => {
class="flex items-center justify-between py-[20rpx]"
>
<view class="flex-1">
<text class="block text-[28rpx] text-[#232338] mb-[8rpx]">
<text class="mb-[8rpx] block text-[28rpx] text-[#232338]">
启用功能
</text>
<text class="block text-[24rpx] text-[#65686f]">
@@ -551,7 +551,7 @@ onMounted(async () => {
<input
v-else
v-model="tempParams[field.key]"
class="w-full h-[80rpx] p-[16rpx_20rpx] bg-[#f5f7fb] rounded-[12rpx] border border-[#eeeeee] text-[28rpx] text-[#232338] box-border focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
class="box-border h-[80rpx] w-full border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[16rpx_20rpx] text-[28rpx] text-[#232338] focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
type="text"
:placeholder="`请输入${field.label}`"
@input="
@@ -566,4 +566,3 @@ onMounted(async () => {
</wd-action-sheet>
</view>
</template>
main/xiaozhi-mobile-admin/src/pages/chat-history/detail.vue
+8 -8
View File
@@ -13,7 +13,7 @@ import type { ChatMessage, UserMessageContent } from '@/api/chat-history/types'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import { getAudioId, getChatHistory } from '@/api/chat-history/chat-history'
import { useAgentStore } from '@/store'
import { getEnvBaseUrl } from '@/utils'
import { toast } from '@/utils/toast'
defineOptions({
@@ -45,12 +45,12 @@ safeAreaInsets = systemInfo.safeAreaInsets
const sessionId = ref('')
const agentId = ref('')
// 智能体管理
const agentStore = useAgentStore()
// 获取当前智能体信息
// 智能体信息（简化）
const currentAgent = computed(() => {
return agentStore.agentList.find(agent => agent.id === agentId.value)
return {
id: agentId.value,
agentName: '智能助手',
}
})
// 聊天数据
@@ -146,8 +146,8 @@ async function playAudio(audioId: string) {
const downloadId = await getAudioId(audioId)
// 构造音频播放地址
const baseURL = import.meta.env.VITE_SERVER_BASEURL
const audioUrl = `${baseURL}/agent/play/${downloadId}`
const baseUrl = getEnvBaseUrl()
const audioUrl = `${baseUrl}/agent/play/${downloadId}`
// 创建音频上下文
audioContext.value = uni.createInnerAudioContext()
main/xiaozhi-mobile-admin/src/pages/chat-history/index.vue
+203 -146
View File
@@ -1,24 +1,21 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "聊天记录"
}
}
</route>
<script lang="ts" setup>
import type { ChatSession } from '@/api/chat-history/types'
import { computed, onMounted, ref } from 'vue'
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
import { getChatSessions } from '@/api/chat-history/chat-history'
import { useAgentStore } from '@/store'
defineOptions({
name: 'ChatHistory',
})
// 接收props
interface Props {
agentId?: string
}
const props = withDefaults(defineProps<Props>(), {
agentId: 'default'
})
// 获取屏幕边界到安全区域距离
let safeAreaInsets: any
let systemInfo: any
@@ -42,92 +39,125 @@ safeAreaInsets = systemInfo.safeAreaInsets
// 聊天会话数据
const sessionList = ref<ChatSession[]>([])
const pagingRef = ref()
useZPaging(pagingRef)
const loading = ref(false)
const loadingMore = ref(false)
const hasMore = ref(true)
const currentPage = ref(1)
const pageSize = 10
// 智能体管理
const agentStore = useAgentStore()
const showAgentPicker = ref(false)
// 获取当前选中的智能体ID
// 使用传入的智能体ID
const currentAgentId = computed(() => {
return agentStore.currentAgentId
return props.agentId
})
// 获取智能体选项
const agentOptions = computed(() => {
return agentStore.getAgentOptions
})
// 显示智能体选择器
function showAgentSelector() {
showAgentPicker.value = true
}
// 关闭智能体选择器
function closeAgentSelector() {
showAgentPicker.value = false
}
// 处理智能体切换
function handleAgentSwitch({ item }: { item: any }) {
const selectedAgentId = item.value
if (selectedAgentId !== currentAgentId.value) {
// 设置当前智能体
agentStore.setCurrentAgent(selectedAgentId)
// 刷新会话列表
pagingRef.value.reload()
}
closeAgentSelector()
}
// z-paging查询列表数据
async function queryList(pageNo: number, pageSize: number) {
// 加载聊天会话列表
async function loadChatSessions(page = 1, isRefresh = false) {
try {
console.log('z-paging获取聊天会话列表')
console.log('获取聊天会话列表', { page, isRefresh })
// 检查是否有当前选中的智能体
if (!currentAgentId.value) {
console.warn('没有选中的智能体')
pagingRef.value.complete([])
sessionList.value = []
return
}
if (page === 1) {
loading.value = true
}
else {
loadingMore.value = true
}
const response = await getChatSessions(currentAgentId.value, {
page: pageNo,
page,
limit: pageSize,
})
// 使用z-paging的分页机制
if (pageNo === 1) {
pagingRef.value.complete(response.list, response.total)
if (page === 1) {
sessionList.value = response.list || []
}
else {
pagingRef.value.addData(response.list)
sessionList.value.push(...(response.list || []))
}
// 更新分页信息
hasMore.value = (response.list?.length || 0) === pageSize
currentPage.value = page
}
catch (error) {
console.error('获取聊天会话列表失败:', error)
pagingRef.value.complete(false)
if (page === 1) {
sessionList.value = []
}
}
finally {
loading.value = false
loadingMore.value = false
}
}
// 暴露给父组件的刷新方法
async function refresh() {
currentPage.value = 1
hasMore.value = true
await loadChatSessions(1, true)
}
// 暴露给父组件的加载更多方法
async function loadMore() {
if (!hasMore.value || loadingMore.value) {
return
}
await loadChatSessions(currentPage.value + 1)
}
// 格式化时间
function formatTime(timeStr: string) {
const date = new Date(timeStr)
if (!timeStr)
return '未知时间'
// 处理时间字符串，确保格式正确
const date = new Date(timeStr.replace(' ', 'T')) // 转换为ISO格式
const now = new Date()
// 检查日期是否有效
if (Number.isNaN(date.getTime())) {
return timeStr // 如果解析失败，直接返回原字符串
}
const diff = now.getTime() - date.getTime()
// 小于1分钟
if (diff < 60000)
return '刚刚'
// 小于1小时
if (diff < 3600000)
return `${Math.floor(diff / 60000)}分钟前`
// 小于1天（24小时）
if (diff < 86400000)
return `${Math.floor(diff / 3600000)}小时前`
if (diff < 604800000)
return `${Math.floor(diff / 86400000)}天前`
return date.toLocaleDateString()
// 小于7天
if (diff < 604800000) {
const days = Math.floor(diff / 86400000)
return `${days}天前`
}
// 超过7天，显示具体日期
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const currentYear = now.getFullYear()
// 如果是当前年份，不显示年份
if (year === currentYear) {
return `${month}-${day}`
}
return `${year}-${month}-${day}`
}
// 进入聊天详情
@@ -138,103 +168,130 @@ function goToChatDetail(session: ChatSession) {
}
onMounted(async () => {
// 确保智能体列表已加载
if (!agentStore.isLoaded) {
await agentStore.loadAgentList()
}
// 智能体已简化为默认
loadChatSessions(1)
})
// 暴露方法给父组件
defineExpose({
refresh,
loadMore,
})
</script>
<template>
<z-paging
ref="pagingRef"
v-model="sessionList"
:refresher-enabled="true"
:auto-show-back-to-top="true"
:loading-more-enabled="true"
:show-loading-more="true"
:hide-empty-view="false"
empty-view-text="暂无聊天记录"
empty-view-img=""
:refresher-threshold="80"
:back-to-top-style="{
backgroundColor: '#fff',
borderRadius: '50%',
width: '56px',
height: '56px',
}"
@query="queryList"
>
<!-- 顶部导航栏区域 -->
<template #top>
<view class="navbar-section">
<!-- 状态栏背景 -->
<view class="status-bar" :style="{ height: `${safeAreaInsets?.top}px` }" />
<wd-navbar :title="agentStore.currentAgent?.agentName || '聊天记录'">
<template #right>
<wd-icon name="filter1" size="18" @click="showAgentSelector" />
</template>
</wd-navbar>
</view>
</template>
<view class="chat-history-container" style="background: #f5f7fb; min-height: 100%;">
<!-- 加载状态 -->
<view v-if="loading && sessionList.length === 0" class="loading-container">
<wd-loading color="#336cff" />
<text class="loading-text">
加载中...
</text>
</view>
<!-- 聊天会话列表 -->
<view class="session-list">
<view
v-for="session in sessionList"
:key="session.sessionId"
class="session-item"
@click="goToChatDetail(session)"
>
<view class="session-card">
<view class="session-info">
<view class="session-header">
<text class="session-title">
对话记录 {{ session.sessionId.substring(0, 8) }}...
</text>
<text class="session-time">
{{ formatTime(session.createdAt) }}
</text>
</view>
<view class="session-meta">
<text class="chat-count">
共 {{ session.chatCount }} 条对话
</text>
<!-- 会话列表 -->
<view v-else-if="sessionList.length > 0" class="session-container">
<!-- 聊天会话列表 -->
<view class="session-list">
<view
v-for="session in sessionList"
:key="session.sessionId"
class="session-item"
@click="goToChatDetail(session)"
>
<view class="session-card">
<view class="session-info">
<view class="session-header">
<text class="session-title">
对话记录 {{ session.sessionId.substring(0, 8) }}...
</text>
<text class="session-time">
{{ formatTime(session.createdAt) }}
</text>
</view>
<view class="session-meta">
<text class="chat-count">
共 {{ session.chatCount }} 条对话
</text>
</view>
</view>
<wd-icon name="arrow-right" custom-class="arrow-icon" />
</view>
<wd-icon name="arrow-right" custom-class="arrow-icon" />
</view>
</view>
<!-- 加载更多状态 -->
<view v-if="loadingMore" class="loading-more">
<wd-loading color="#336cff" size="24" />
<text class="loading-more-text">
加载中...
</text>
</view>
<!-- 没有更多数据 -->
<view v-else-if="!hasMore && sessionList.length > 0" class="no-more">
<text class="no-more-text">
没有更多数据了
</text>
</view>
</view>
<!-- 自定义空状态 -->
<template #empty>
<view class="empty-state">
<wd-icon name="chat" custom-class="empty-icon" />
<text class="empty-text">
暂无聊天记录
</text>
<text class="empty-desc">
与智能体的对话记录会显示在这里
</text>
</view>
</template>
<!-- 智能体选择器 -->
<wd-action-sheet
v-model="showAgentPicker"
:actions="agentOptions"
title="选择智能体"
@close="closeAgentSelector"
@select="handleAgentSwitch"
/>
</z-paging>
<!-- 空状态 -->
<view v-else-if="!loading" class="empty-state">
<wd-icon name="chat" custom-class="empty-icon" />
<text class="empty-text">
暂无聊天记录
</text>
<text class="empty-desc">
与智能体的对话记录会显示在这里
</text>
</view>
</view>
</template>
<style lang="scss" scoped>
// z-paging内容区域样式
:deep(.z-paging-content) {
background: #f5f7fb;
.chat-history-container {
position: relative;
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 40rpx;
}
.loading-text {
margin-top: 20rpx;
font-size: 28rpx;
color: #666666;
}
.loading-more {
display: flex;
align-items: center;
justify-content: center;
padding: 30rpx;
gap: 16rpx;
.loading-more-text {
font-size: 26rpx;
color: #666666;
}
}
.no-more {
display: flex;
align-items: center;
justify-content: center;
padding: 30rpx;
.no-more-text {
font-size: 26rpx;
color: #999999;
}
}
.navbar-section {
main/xiaozhi-mobile-admin/src/pages/device-config/index.vue
+3 -11
View File
@@ -67,24 +67,16 @@ function onNetworkSelected(network: WiFiNetwork | null, password: string) {
function onConnectionStatusChange(connected: boolean) {
console.log('ESP32连接状态:', connected)
}
function goBack() {
uni.navigateBack()
}
</script>
<template>
<view class="min-h-screen bg-[#f5f7fb]">
<wd-navbar title="设备配网" safe-area-inset-top>
<template #left>
<wd-icon name="arrow-left" size="18" @click="goBack" />
</template>
</wd-navbar>
<wd-navbar title="设备配网" safe-area-inset-top />
<view class="box-border px-[20rpx]">
<!-- 配网方式选择 -->
<view class="pb-[20rpx] first:pt-[20rpx]">
<text class="text-[36rpx] text-[#232338] font-bold">
<text class="text-[32rpx] text-[#232338] font-bold">
配网方式
</text>
</view>
@@ -103,7 +95,7 @@ function goBack() {
<!-- WiFi网络选择 -->
<view class="pb-[20rpx]">
<text class="text-[36rpx] text-[#232338] font-bold">
<text class="text-[32rpx] text-[#232338] font-bold">
网络配置
</text>
</view>
main/xiaozhi-mobile-admin/src/pages/device/index.vue
+108 -142
View File
@@ -1,26 +1,23 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "设备管理"
}
}
</route>
<script lang="ts" setup>
import type { Device, FirmwareType } from '@/api/device'
import { computed, onMounted, ref } from 'vue'
import { useMessage } from 'wot-design-uni'
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
import { bindDevice, getBindDevices, getFirmwareTypes, unbindDevice, updateDeviceAutoUpdate } from '@/api/device'
import { useAgentStore } from '@/store'
import { toast } from '@/utils/toast'
defineOptions({
name: 'DeviceManage',
})
// 接收props
interface Props {
agentId?: string
}
const props = withDefaults(defineProps<Props>(), {
agentId: 'default'
})
// 获取屏幕边界到安全区域距离
let safeAreaInsets: any
let systemInfo: any
@@ -45,67 +42,44 @@ safeAreaInsets = systemInfo.safeAreaInsets
// 设备数据
const deviceList = ref<Device[]>([])
const firmwareTypes = ref<FirmwareType[]>([])
const pagingRef = ref()
useZPaging(pagingRef)
const loading = ref(false)
// 消息组件
const message = useMessage()
// 智能体管理
const agentStore = useAgentStore()
const showAgentPicker = ref(false)
// 获取当前选中的智能体ID
// 使用传入的智能体ID
const currentAgentId = computed(() => {
return agentStore.currentAgentId
return props.agentId
})
// 获取智能体选项
const agentOptions = computed(() => {
return agentStore.getAgentOptions
})
// 显示智能体选择器
function showAgentSelector() {
showAgentPicker.value = true
}
// 关闭智能体选择器
function closeAgentSelector() {
showAgentPicker.value = false
}
// 处理智能体切换
function handleAgentSwitch({ item }: { item: any }) {
const selectedAgentId = item.value
if (selectedAgentId !== currentAgentId.value) {
// 设置当前智能体
agentStore.setCurrentAgent(selectedAgentId)
// 刷新设备列表
pagingRef.value.reload()
}
closeAgentSelector()
}
// 获取设备列表
async function queryList() {
async function loadDeviceList() {
try {
console.log('获取设备列表')
// 检查是否有当前选中的智能体
if (!currentAgentId.value) {
console.warn('没有选中的智能体')
pagingRef.value.complete([])
deviceList.value = []
return
}
loading.value = true
const response = await getBindDevices(currentAgentId.value)
pagingRef.value.complete(response)
deviceList.value = response || []
}
catch (error) {
console.error('获取设备列表失败:', error)
pagingRef.value.complete(false)
deviceList.value = []
}
finally {
loading.value = false
}
}
// 暴露给父组件的刷新方法
async function refresh() {
await loadDeviceList()
}
// 获取设备类型名称
@@ -152,7 +126,7 @@ async function toggleAutoUpdate(device: Device) {
async function handleUnbindDevice(device: Device) {
try {
await unbindDevice(device.id)
pagingRef.value.reload()
await loadDeviceList()
toast.success('设备已解绑')
}
catch (error: any) {
@@ -184,7 +158,7 @@ async function handleBindDevice(code: string) {
}
await bindDevice(currentAgentId.value, code.trim())
pagingRef.value.reload()
await loadDeviceList()
toast.success('设备绑定成功！')
}
catch (error: any) {
@@ -227,100 +201,87 @@ async function loadFirmwareTypes() {
}
onMounted(async () => {
// 确保智能体列表已加载
if (!agentStore.isLoaded) {
await agentStore.loadAgentList()
}
// 智能体已简化为默认
loadFirmwareTypes()
loadDeviceList()
})
onShow(() => {
if (pagingRef.value) {
pagingRef.value.reload()
}
// 暴露方法给父组件
defineExpose({
refresh,
})
</script>
<template>
<z-paging
ref="pagingRef" v-model="deviceList" :refresher-enabled="true" :auto-show-back-to-top="true"
:loading-more-enabled="false" :show-loading-more="false" :hide-empty-view="false" empty-view-text="暂无设备"
empty-view-img="" :refresher-threshold="80" :back-to-top-style="{
backgroundColor: '#fff',
borderRadius: '50%',
width: '56px',
height: '56px',
}" @query="queryList"
>
<!-- 顶部导航栏区域 -->
<template #top>
<view class="bg-white">
<!-- 状态栏背景 -->
<wd-navbar :title="agentStore.currentAgent?.agentName || '设备管理'" safe-area-inset-top>
<template #right>
<wd-icon name="filter1" size="18" @click="showAgentSelector" />
</template>
</wd-navbar>
</view>
</template>
<view class="device-container" style="background: #f5f7fb; min-height: 100%;">
<!-- 加载状态 -->
<view v-if="loading && deviceList.length === 0" class="loading-container">
<wd-loading color="#336cff" />
<text class="loading-text">
加载中...
</text>
</view>
<!-- 设备卡片列表 -->
<view class="box-border flex flex-col gap-[24rpx] p-[20rpx]">
<view v-for="device in deviceList" :key="device.id">
<wd-swipe-action>
<view class="cursor-pointer bg-[#fbfbfb] p-[32rpx] transition-all duration-200 active:bg-[#f8f9fa]">
<view class="flex items-start justify-between">
<view class="flex-1">
<view class="mb-[16rpx] flex items-center justify-between">
<text class="max-w-[60%] break-all text-[32rpx] text-[#232338] font-semibold">
{{ getDeviceTypeName(device.board) }}
</text>
</view>
<!-- 设备列表 -->
<view v-else-if="deviceList.length > 0" class="device-list">
<!-- 设备卡片列表 -->
<view class="box-border flex flex-col gap-[24rpx] p-[20rpx]">
<view v-for="device in deviceList" :key="device.id">
<wd-swipe-action>
<view class="cursor-pointer bg-[#fbfbfb] p-[32rpx] transition-all duration-200 active:bg-[#f8f9fa]">
<view class="flex items-start justify-between">
<view class="flex-1">
<view class="mb-[16rpx] flex items-center justify-between">
<text class="max-w-[60%] break-all text-[32rpx] text-[#232338] font-semibold">
{{ getDeviceTypeName(device.board) }}
</text>
</view>
<view class="mb-[20rpx]">
<text class="mb-[12rpx] block text-[28rpx] text-[#65686f] leading-[1.4]">
MAC地址：{{ device.macAddress }}
</text>
<text class="mb-[12rpx] block text-[28rpx] text-[#65686f] leading-[1.4]">
固件版本：{{ device.appVersion }}
</text>
<text class="block text-[28rpx] text-[#65686f] leading-[1.4]">
最近对话：{{ formatTime(device.lastConnectedAt) }}
</text>
</view>
<view class="mb-[20rpx]">
<text class="mb-[12rpx] block text-[28rpx] text-[#65686f] leading-[1.4]">
MAC地址：{{ device.macAddress }}
</text>
<text class="mb-[12rpx] block text-[28rpx] text-[#65686f] leading-[1.4]">
固件版本：{{ device.appVersion }}
</text>
<text class="block text-[28rpx] text-[#65686f] leading-[1.4]">
最近对话：{{ formatTime(device.lastConnectedAt) }}
</text>
</view>
<view class="flex items-center justify-between border-[1rpx] border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[16rpx_20rpx]">
<text class="text-[28rpx] text-[#232338] font-medium">
OTA升级
</text>
<wd-switch
:model-value="device.autoUpdate === 1"
size="24"
@change="toggleAutoUpdate(device)"
/>
<view class="flex items-center justify-between border-[1rpx] border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[16rpx_20rpx]">
<text class="text-[28rpx] text-[#232338] font-medium">
OTA升级
</text>
<wd-switch
:model-value="device.autoUpdate === 1"
size="24"
@change="toggleAutoUpdate(device)"
/>
</view>
</view>
</view>
</view>
</view>
<template #right>
<view class="h-full flex">
<view
class="h-full min-w-[120rpx] flex items-center justify-center bg-[#ff4d4f] p-x-[32rpx] text-[28rpx] text-white font-medium"
@click.stop="confirmUnbindDevice(device)"
>
<wd-icon name="delete" />
<text>解绑</text>
<template #right>
<view class="h-full flex">
<view
class="h-full min-w-[120rpx] flex items-center justify-center bg-[#ff4d4f] p-x-[32rpx] text-[28rpx] text-white font-medium"
@click.stop="confirmUnbindDevice(device)"
>
<wd-icon name="delete" />
<text>解绑</text>
</view>
</view>
</view>
</template>
</wd-swipe-action>
</template>
</wd-swipe-action>
</view>
</view>
</view>
<!-- 自定义空状态 -->
<template #empty>
<!-- 空状态 -->
<view v-else-if="!loading" class="empty-container">
<view class="flex flex-col items-center justify-center p-[100rpx_40rpx] text-center">
<wd-icon name="phone" custom-class="text-[120rpx] text-[#d9d9d9] mb-[32rpx]" />
<text class="mb-[16rpx] text-[32rpx] text-[#666666] font-medium">
@@ -330,28 +291,33 @@ onShow(() => {
点击右下角 + 号绑定您的第一个设备
</text>
</view>
</template>
</view>
<!-- FAB 绑定设备按钮 -->
<wd-fab type="primary" size="small" icon="add" :draggable="true" :expandable="false" @click="openBindDialog" />
<!-- MessageBox 组件 -->
<wd-message-box />
<!-- 智能体选择器 -->
<wd-action-sheet
v-model="showAgentPicker"
:actions="agentOptions"
title="选择智能体"
@close="closeAgentSelector"
@select="handleAgentSwitch"
/>
</z-paging>
</view>
</template>
<style>
:deep(.z-paging-content) {
background: #f5f7fb;
<style scoped>
.device-container {
position: relative;
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 40rpx;
}
.loading-text {
margin-top: 20rpx;
font-size: 28rpx;
color: #666666;
}
:deep(.wd-swipe-action) {
main/xiaozhi-mobile-admin/src/pages/index/index.vue
+4 -25
View File
@@ -16,7 +16,6 @@ import { ref } from 'vue'
import { useMessage } from 'wot-design-uni'
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
import { createAgent, deleteAgent, getAgentList } from '@/api/agent/agent'
import { useAgentStore } from '@/store'
import { toast } from '@/utils/toast'
defineOptions({
@@ -47,7 +46,6 @@ safeAreaInsets = systemInfo.safeAreaInsets
// #endif
// 智能体数据
const agentStore = useAgentStore()
const agentList = ref<Agent[]>([])
const pagingRef = ref()
useZPaging(pagingRef)
@@ -61,16 +59,8 @@ async function queryList(pageNo: number, pageSize: number) {
const response = await getAgentList()
// 将数据存入 Pinia store
agentStore.agentList = response
agentStore.isLoaded = true
// 如果没有当前选中的智能体，且列表不为空，选择第一个
console.log(!agentStore.currentAgentId && response.length > 0, agentStore.currentAgentId)
if (!agentStore.currentAgentId && response.length > 0) {
agentStore.setCurrentAgent(response[0].id)
}
// 更新本地列表
agentList.value = response
// 直接返回全部数据，不需要分页处理
pagingRef.value.complete(response)
@@ -114,10 +104,9 @@ async function handleDeleteAgent(agent: Agent) {
// 进入编辑页面
function goToEditAgent(agent: Agent) {
// 设置当前编辑的智能体
agentStore.setCurrentAgent(agent.id)
// 传递智能体ID到编辑页面
uni.navigateTo({
url: `/pages/agent/edit?id=${agent.id}`,
url: `/pages/agent/index?agentId=${agent.id}`,
})
}
@@ -163,12 +152,6 @@ function formatTime(timeStr: string) {
return `${Math.floor(diff / 86400000)}天前`
}
function goToDeviceConfig() {
uni.navigateTo({
url: '/pages/device-config/index',
})
}
// 页面显示时刷新列表
onShow(() => {
console.log('首页 onShow，刷新智能体列表')
@@ -193,10 +176,6 @@ onShow(() => {
<template #top>
<view class="banner-section" :style="{ paddingTop: `${safeAreaInsets?.top + 100}rpx` }">
<view class="banner-content">
<wd-icon
name="setting1" size="40rpx" class="absolute right-0 top-[-50rpx] text-white"
@click="goToDeviceConfig"
/>
<view class="welcome-info">
<text class="greeting">
你好，小智
main/xiaozhi-mobile-admin/src/pages/login/index.vue
+2 -1
View File
@@ -13,6 +13,7 @@ import type { LoginData } from '@/api/auth'
import { computed, onMounted, ref } from 'vue'
import { login } from '@/api/auth'
import { useConfigStore } from '@/store'
import { getEnvBaseUrl } from '@/utils'
import { toast } from '@/utils/toast'
// 获取屏幕边界到安全区域距离
@@ -118,7 +119,7 @@ function generateUUID() {
async function refreshCaptcha() {
const uuid = generateUUID()
formData.value.captchaId = uuid
captchaImage.value = `${import.meta.env.VITE_SERVER_BASEURL}/user/captcha?uuid=${uuid}&t=${Date.now()}`
captchaImage.value = `${getEnvBaseUrl()}/user/captcha?uuid=${uuid}&t=${Date.now()}`
}
// 登录
main/xiaozhi-mobile-admin/src/pages/register/index.vue
+2 -1
View File
@@ -12,6 +12,7 @@
import { computed, onMounted, ref } from 'vue'
import { register, sendSmsCode } from '@/api/auth'
import { useConfigStore } from '@/store'
import { getEnvBaseUrl } from '@/utils'
import { toast } from '@/utils/toast'
// 获取屏幕边界到安全区域距离
@@ -127,7 +128,7 @@ function generateUUID() {
async function refreshCaptcha() {
const uuid = generateUUID()
formData.value.captchaId = uuid
captchaImage.value = `${import.meta.env.VITE_SERVER_BASEURL}/user/captcha?uuid=${uuid}&t=${Date.now()}`
captchaImage.value = `${getEnvBaseUrl()}/user/captcha?uuid=${uuid}&t=${Date.now()}`
}
// 发送短信验证码
main/xiaozhi-mobile-admin/src/pages/settings/index.vue
+310
View File
@@ -0,0 +1,310 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationBarTitleText": "设置",
"navigationStyle": "custom"
}
}
</route>
<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { useToast } from 'wot-design-uni'
import { clearServerBaseUrlOverride, getEnvBaseUrl, getServerBaseUrlOverride, setServerBaseUrlOverride } from '@/utils'
defineOptions({
name: 'SettingsPage',
})
const toast = useToast()
// 缓存信息
const cacheInfo = reactive({
storageSize: '0MB',
imageCache: '0MB',
dataCache: '0MB',
})
// 服务端地址设置
const baseUrlInput = ref('')
// 系统信息（保留）
const systemInfo = computed(() => {
const info = uni.getSystemInfoSync()
return `${info.platform} ${info.system}`
})
// 读取本地覆盖地址
function loadServerBaseUrl() {
const override = getServerBaseUrlOverride()
baseUrlInput.value = override || getEnvBaseUrl()
}
// 获取缓存信息
function getCacheInfo() {
try {
const info = uni.getStorageInfoSync()
const totalSize = (info.currentSize || 0) / 1024 // KB to MB
cacheInfo.storageSize = `${totalSize.toFixed(2)}MB`
}
catch (error) {
console.error('获取缓存信息失败:', error)
}
}
// 保存服务端地址
function saveServerBaseUrl() {
if (!baseUrlInput.value || !/^https?:\/\//.test(baseUrlInput.value)) {
toast.warning('请输入有效的服务端地址（以 http 或 https 开头）')
return
}
setServerBaseUrlOverride(baseUrlInput.value)
// 切换请求地址后清空所有缓存
clearAllCacheAfterUrlChange()
uni.showModal({
title: '重启应用',
content: '服务端地址已保存并清空缓存，是否立即重启生效？',
confirmText: '立即重启',
cancelText: '稍后',
success: (res) => {
if (res.confirm) {
restartApp()
}
else {
toast.success('已保存，可稍后手动重启应用')
}
},
})
}
// 重置为 env 默认
function resetServerBaseUrl() {
clearServerBaseUrlOverride()
baseUrlInput.value = getEnvBaseUrl()
// 切换请求地址后清空所有缓存
clearAllCacheAfterUrlChange()
uni.showModal({
title: '重启应用',
content: '已重置为默认地址并清空缓存，是否立即重启生效？',
confirmText: '立即重启',
cancelText: '稍后',
success: (res) => {
if (res.confirm) {
restartApp()
}
else {
toast.success('已重置，可稍后手动重启应用')
}
},
})
}
// 重启应用（App 原生重启；其他端回到首页）
function restartApp() {
// #ifdef APP-PLUS
plus.runtime.restart()
// #endif
// #ifndef APP-PLUS
uni.reLaunch({ url: '/pages/index/index' })
// #endif
}
// 切换地址后自动清空所有缓存
function clearAllCacheAfterUrlChange() {
try {
// 完全清空所有缓存，包括token
uni.clearStorageSync()
// 清空localStorage（H5环境）
// #ifdef H5
if (typeof localStorage !== 'undefined') {
localStorage.clear()
}
// #endif
// 重新获取缓存信息
getCacheInfo()
}
catch (error) {
console.error('清除缓存失败:', error)
}
}
// 清除缓存
async function clearCache() {
try {
uni.showModal({
title: '确认清除',
content: '确定要清除所有缓存吗？这将删除所有数据包括登录状态，需要重新登录。',
success: (res) => {
if (res.confirm) {
clearAllCacheAfterUrlChange()
toast.success('缓存清除成功，即将跳转到登录页')
// 延迟跳转到登录页
setTimeout(() => {
uni.reLaunch({ url: '/pages/login/index' })
}, 1500)
}
},
})
}
catch (error) {
console.error('清除缓存失败:', error)
toast.error('清除缓存失败')
}
}
// 关于我们
function showAbout() {
uni.showModal({
title: `关于${import.meta.env.VITE_APP_TITLE}`,
content: `${import.meta.env.VITE_APP_TITLE}\n\n基于 Vue.js 3 + uni-app 构建的跨平台移动端管理应用，为小智ESP32智能硬件提供设备管理、智能体配置等功能。\n\n© 2025 Xiaozhi Team`,
showCancel: false,
confirmText: '确定',
})
}
onMounted(async () => {
loadServerBaseUrl()
getCacheInfo()
})
</script>
<template>
<view class="min-h-screen bg-[#f5f7fb]">
<wd-navbar title="设置" placeholder safe-area-inset-top fixed />
<view class="p-[24rpx]">
<!-- 网络设置 -->
<view class="mb-[32rpx]">
<view class="mb-[24rpx] flex items-center">
<text class="text-[32rpx] text-[#232338] font-bold">
网络设置
</text>
</view>
<view class="border border-[#eeeeee] rounded-[24rpx] bg-[#fbfbfb] p-[32rpx]" style="box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);">
<view class="mb-[24rpx]">
<text class="text-[28rpx] text-[#232338] font-semibold">
服务端接口地址
</text>
<text class="mt-[8rpx] block text-[24rpx] text-[#9d9ea3]">
修改后将自动清空缓存并重启应用
</text>
</view>
<view class="mb-[24rpx]">
<input
v-model="baseUrlInput"
class="h-[88rpx] w-full border border-[#eeeeee] rounded-[16rpx] bg-[#f5f7fb] px-[24rpx] text-[28rpx] text-[#232338] transition-all focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3] focus:shadow-[0_0_0_4rpx_rgba(51,108,255,0.1)]"
type="text"
placeholder="输入服务端地址，如 https://example.com/api"
>
</view>
<view class="flex gap-[16rpx]">
<wd-button
type="primary"
custom-class="flex-1 h-[88rpx] rounded-[20rpx] text-[28rpx] font-semibold bg-[#336cff] border-none shadow-[0_4rpx_16rpx_rgba(51,108,255,0.3)] active:shadow-[0_2rpx_8rpx_rgba(51,108,255,0.4)] active:scale-98"
@click="saveServerBaseUrl"
>
保存设置
</wd-button>
<wd-button
type="default"
custom-class="flex-1 h-[88rpx] rounded-[20rpx] text-[28rpx] font-semibold bg-white border-[#eeeeee] text-[#65686f] active:bg-[#f5f7fb]"
@click="resetServerBaseUrl"
>
恢复默认
</wd-button>
</view>
</view>
</view>
<!-- 缓存管理 -->
<view class="mb-[32rpx]">
<view class="mb-[24rpx] flex items-center">
<text class="text-[32rpx] text-[#232338] font-bold">
缓存管理
</text>
</view>
<view class="border border-[#eeeeee] rounded-[24rpx] bg-[#fbfbfb] p-[32rpx]" style="box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);">
<view class="space-y-[16rpx]">
<!-- 缓存信息展示，参考插件样式 -->
<view class="flex items-center justify-between border border-[#eeeeee] rounded-[16rpx] bg-[#f5f7fb] p-[24rpx] transition-all active:bg-[#eef3ff]">
<view>
<text class="text-[28rpx] text-[#232338] font-medium">
总缓存大小
</text>
<text class="mt-[4rpx] block text-[24rpx] text-[#9d9ea3]">
应用数据总大小
</text>
</view>
<text class="text-[28rpx] text-[#65686f] font-semibold">
{{ cacheInfo.storageSize }}
</text>
</view>
<!-- 清除缓存按钮，参考插件编辑按钮样式 -->
<view class="flex items-center justify-between border border-[#eeeeee] rounded-[16rpx] bg-[#f5f7fb] p-[24rpx]">
<view>
<text class="text-[28rpx] text-[#232338] font-medium">
缓存清理
</text>
<text class="mt-[4rpx] block text-[24rpx] text-[#9d9ea3]">
清空所有缓存数据
</text>
</view>
<view
class="cursor-pointer rounded-[24rpx] bg-[rgba(255,107,107,0.1)] px-[28rpx] py-[16rpx] text-[24rpx] text-[#ff6b6b] font-semibold transition-all duration-300 active:scale-95 active:bg-[#ff6b6b] active:text-white"
@click="clearCache"
>
清除缓存
</view>
</view>
</view>
</view>
</view>
<!-- 应用信息 -->
<view class="mb-[32rpx]">
<view class="mb-[24rpx] flex items-center">
<text class="text-[32rpx] text-[#232338] font-bold">
应用信息
</text>
</view>
<view class="border border-[#eeeeee] rounded-[24rpx] bg-[#fbfbfb] p-[32rpx]" style="box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);">
<view
class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[16rpx] bg-[#f5f7fb] p-[24rpx] transition-all active:bg-[#eef3ff]"
@click="showAbout"
>
<view>
<text class="text-[28rpx] text-[#232338] font-medium">
关于我们
</text>
<text class="mt-[4rpx] block text-[24rpx] text-[#9d9ea3]">
应用版本与团队信息
</text>
</view>
<wd-icon name="arrow-right" custom-class="text-[32rpx] text-[#9d9ea3]" />
</view>
</view>
</view>
<!-- 底部安全距离 -->
<view style="height: env(safe-area-inset-bottom);" />
</view>
</view>
</template>
<style lang="scss" scoped>
// 保持与 edit.vue 一致的风格，样式主要通过类名控制
</style>
main/xiaozhi-mobile-admin/src/pages/voiceprint/index.vue
+101 -133
View File
@@ -1,26 +1,23 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "声纹管理"
}
}
</route>
<script lang="ts" setup>
import type { ChatHistory, CreateSpeakerData, VoicePrint } from '@/api/voiceprint'
import { computed, onMounted, ref } from 'vue'
import { useMessage } from 'wot-design-uni'
import { useToast } from 'wot-design-uni/components/wd-toast'
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
import { createVoicePrint, deleteVoicePrint, getChatHistory, getVoicePrintList, updateVoicePrint } from '@/api/voiceprint'
import { useAgentStore } from '@/store'
defineOptions({
name: 'VoicePrintManage',
})
// 接收props
interface Props {
agentId?: string
}
const props = withDefaults(defineProps<Props>(), {
agentId: 'default'
})
// 获取屏幕边界到安全区域距离
let safeAreaInsets: any
let systemInfo: any
@@ -50,44 +47,14 @@ const voicePrintList = ref<VoicePrint[]>([])
const chatHistoryList = ref<ChatHistory[]>([])
const chatHistoryActions = ref<any[]>([])
const swipeStates = ref<Record<string, 'left' | 'close' | 'right'>>({})
const pagingRef = ref()
useZPaging(pagingRef)
const loading = ref(false)
// 智能体管理
const agentStore = useAgentStore()
const showAgentPicker = ref(false)
// 获取当前选中的智能体ID
// 使用传入的智能体ID
const currentAgentId = computed(() => {
return agentStore.currentAgentId
return props.agentId
})
// 获取智能体选项
const agentOptions = computed(() => {
return agentStore.getAgentOptions
})
// 显示智能体选择器
function showAgentSelector() {
showAgentPicker.value = true
}
// 关闭智能体选择器
function closeAgentSelector() {
showAgentPicker.value = false
}
// 处理智能体切换
function handleAgentSwitch({ item }: { item: any }) {
const selectedAgentId = item.value
if (selectedAgentId !== currentAgentId.value) {
// 设置当前智能体
agentStore.setCurrentAgent(selectedAgentId)
// 刷新声纹列表
pagingRef.value.reload()
}
closeAgentSelector()
}
// 智能体选择相关功能已移除
// 弹窗相关
const showAddDialog = ref(false)
@@ -107,18 +74,19 @@ const editForm = ref<VoicePrint>({
createDate: '',
})
// z-paging查询列表数据
async function queryList(pageNo: number, pageSize: number) {
// 获取声纹列表
async function loadVoicePrintList() {
try {
console.log('z-paging获取声纹列表')
console.log('获取声纹列表')
// 检查是否有当前选中的智能体
if (!currentAgentId.value) {
console.warn('没有选中的智能体')
pagingRef.value.complete([])
voicePrintList.value = []
return
}
loading.value = true
const data = await getVoicePrintList(currentAgentId.value)
// 初始化滑动状态
@@ -129,19 +97,20 @@ async function queryList(pageNo: number, pageSize: number) {
}
})
// 直接返回全部数据，不需要分页处理
pagingRef.value.complete(list)
voicePrintList.value = list
}
catch (error) {
console.error('获取声纹列表失败:', error)
// 告知z-paging数据加载失败
pagingRef.value.complete(false)
voicePrintList.value = []
}
finally {
loading.value = false
}
}
// 获取声纹列表(兼容旧代码)
async function loadVoicePrintList() {
pagingRef.value?.reload()
// 暴露给父组件的刷新方法
async function refresh() {
await loadVoicePrintList()
}
// 获取语音对话记录
@@ -224,7 +193,7 @@ async function submitAdd() {
await createVoicePrint(addForm.value)
toast.success('添加成功')
showAddDialog.value = false
pagingRef.value.reload()
await loadVoicePrintList()
}
catch (error) {
console.error('添加说话人失败:', error)
@@ -253,7 +222,7 @@ async function submitEdit() {
})
toast.success('编辑成功')
showEditDialog.value = false
pagingRef.value.reload()
await loadVoicePrintList()
}
catch (error) {
console.error('编辑说话人失败:', error)
@@ -275,87 +244,75 @@ async function handleDelete(id: string) {
}).then(async () => {
await deleteVoicePrint(id)
toast.success('删除成功')
pagingRef.value.reload()
await loadVoicePrintList()
}).catch(() => {
console.log('点击了取消按钮')
})
}
onMounted(async () => {
// 确保智能体列表已加载
if (!agentStore.isLoaded) {
await agentStore.loadAgentList()
}
// 智能体已简化为默认
loadVoicePrintList()
})
onShow(() => {
if (pagingRef.value) {
pagingRef.value.reload()
}
// 暴露方法给父组件
defineExpose({
refresh,
})
</script>
<template>
<z-paging
ref="pagingRef" v-model="voicePrintList" :refresher-enabled="true" :auto-show-back-to-top="true"
:loading-more-enabled="false" :show-loading-more="false" :hide-empty-view="false" empty-view-text="暂无声纹数据"
empty-view-img="" :refresher-threshold="80" :back-to-top-style="{
backgroundColor: '#fff',
borderRadius: '50%',
width: '56px',
height: '56px',
}" @query="queryList"
>
<!-- 顶部导航栏区域 -->
<template #top>
<view class="bg-white">
<!-- 状态栏背景 -->
<wd-navbar :title="agentStore.currentAgent?.agentName || '声纹管理'" safe-area-inset-top>
<template #right>
<wd-icon name="filter1" size="18" @click="showAgentSelector" />
</template>
</wd-navbar>
</view>
</template>
<view class="voiceprint-container" style="background: #f5f7fb; min-height: 100%;">
<!-- 加载状态 -->
<view v-if="loading && voicePrintList.length === 0" class="loading-container">
<wd-loading color="#336cff" />
<text class="loading-text">
加载中...
</text>
</view>
<!-- 声纹卡片列表 -->
<view class="box-border flex flex-col gap-[24rpx] p-[20rpx]">
<view v-for="item in voicePrintList" :key="item.id">
<wd-swipe-action
:model-value="swipeStates[item.id] || 'close'"
@update:model-value="swipeStates[item.id] = $event"
>
<view class="bg-[#fbfbfb] p-[32rpx]" @click="handleEdit(item)">
<view>
<text class="mb-[12rpx] block text-[32rpx] text-[#232338] font-semibold">
{{ item.sourceName }}
</text>
<text class="mb-[12rpx] block text-[28rpx] text-[#65686f] leading-[1.4]">
{{ item.introduce || '暂无描述' }}
</text>
<text class="block text-[24rpx] text-[#9d9ea3]">
{{ item.createDate }}
</text>
</view>
</view>
<template #right>
<view class="h-full flex">
<view
class="h-full min-w-[120rpx] flex items-center justify-center bg-[#ff4d4f] p-x-[32rpx] text-[28rpx] text-white font-medium"
@click="handleDelete(item.id)"
>
<wd-icon name="delete" />
删除
<!-- 声纹列表 -->
<view v-else-if="voicePrintList.length > 0" class="voiceprint-list">
<!-- 声纹卡片列表 -->
<view class="box-border flex flex-col gap-[24rpx] p-[20rpx]">
<view v-for="item in voicePrintList" :key="item.id">
<wd-swipe-action
:model-value="swipeStates[item.id] || 'close'"
@update:model-value="swipeStates[item.id] = $event"
>
<view class="bg-[#fbfbfb] p-[32rpx]" @click="handleEdit(item)">
<view>
<text class="mb-[12rpx] block text-[32rpx] text-[#232338] font-semibold">
{{ item.sourceName }}
</text>
<text class="mb-[12rpx] block text-[28rpx] text-[#65686f] leading-[1.4]">
{{ item.introduce || '暂无描述' }}
</text>
<text class="block text-[24rpx] text-[#9d9ea3]">
{{ item.createDate }}
</text>
</view>
</view>
</template>
</wd-swipe-action>
<template #right>
<view class="h-full flex">
<view
class="h-full min-w-[120rpx] flex items-center justify-center bg-[#ff4d4f] p-x-[32rpx] text-[28rpx] text-white font-medium"
@click="handleDelete(item.id)"
>
<wd-icon name="delete" />
删除
</view>
</view>
</template>
</wd-swipe-action>
</view>
</view>
</view>
<!-- 自定义空状态 -->
<template #empty>
<!-- 空状态 -->
<view v-else-if="!loading" class="empty-container">
<view class="flex flex-col items-center justify-center p-[100rpx_40rpx] text-center">
<wd-icon name="voice" custom-class="text-[120rpx] text-[#d9d9d9] mb-[32rpx]" />
<text class="mb-[16rpx] text-[32rpx] text-[#666666] font-medium">
@@ -365,13 +322,16 @@ onShow(() => {
点击右下角 + 号添加您的第一个说话人
</text>
</view>
</template>
</view>
<!-- 浮动操作按钮 -->
<wd-fab type="primary" size="small" :draggable="true" :expandable="false" @click="openAddDialog">
<wd-icon name="add" />
</wd-fab>
</z-paging>
<!-- MessageBox 组件 -->
<wd-message-box />
</view>
<!-- 添加说话人弹窗 -->
<wd-popup
@@ -518,17 +478,25 @@ onShow(() => {
v-model="showChatHistoryDialog" :actions="chatHistoryActions" title="选择声纹向量"
@select="selectAudioId"
/>
<!-- 智能体选择器 -->
<wd-action-sheet
v-model="showAgentPicker" :actions="agentOptions" title="选择智能体" @close="closeAgentSelector"
@select="handleAgentSwitch"
/>
</template>
<style>
:deep(.z-paging-content) {
background: #f5f7fb;
<style scoped>
.voiceprint-container {
position: relative;
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 40rpx;
}
.loading-text {
margin-top: 20rpx;
font-size: 28rpx;
color: #666666;
}
:deep(.wd-swipe-action) {
main/xiaozhi-mobile-admin/src/static/tabbar/network.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

main/xiaozhi-mobile-admin/src/static/tabbar/network_activate.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

main/xiaozhi-mobile-admin/src/static/tabbar/system.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

main/xiaozhi-mobile-admin/src/static/tabbar/system_activate.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

main/xiaozhi-mobile-admin/src/store/agent.ts
-122
View File
@@ -1,122 +0,0 @@
import type { Agent } from '@/api/agent/types'
import { defineStore } from 'pinia'
import { getAgentList } from '@/api/agent/agent'
export const useAgentStore = defineStore('agent', {
state: () => ({
// 智能体列表
agentList: [] as Agent[],
// 当前选中的智能体ID
currentAgentId: '',
// 当前选中的智能体信息
currentAgent: null as Agent | null,
// 是否已加载智能体列表
isLoaded: false,
}),
getters: {
// 获取当前智能体
getCurrentAgent: (state) => {
return state.agentList.find(agent => agent.id === state.currentAgentId) || null
},
// 获取智能体列表用于选择器
getAgentOptions: (state) => {
return state.agentList.map(agent => ({
name: agent.agentName,
value: agent.id,
agent,
}))
},
// 是否有智能体列表
hasAgents: (state) => {
return state.agentList.length > 0
},
},
actions: {
// 加载智能体列表
async loadAgentList() {
try {
const list = await getAgentList()
this.agentList = list
this.isLoaded = true
// 如果没有当前选中的智能体，且列表不为空，选择第一个
if (!this.currentAgentId && list.length > 0) {
this.setCurrentAgent(list[0].id)
}
return list
}
catch (error) {
console.error('加载智能体列表失败:', error)
throw error
}
},
// 设置当前智能体
setCurrentAgent(agentId: string) {
this.currentAgentId = agentId
console.log(this.agentList.find(agent => agent.id === agentId), '执行')
this.currentAgent = this.agentList.find(agent => agent.id === agentId) || null
},
// 添加智能体到列表
addAgent(agent: Agent) {
this.agentList.push(agent)
// 如果是第一个智能体，设置为当前智能体
if (this.agentList.length === 1) {
this.setCurrentAgent(agent.id)
}
},
// 从列表中移除智能体
removeAgent(agentId: string) {
const index = this.agentList.findIndex(agent => agent.id === agentId)
if (index > -1) {
this.agentList.splice(index, 1)
// 如果删除的是当前选中的智能体，重新选择
if (this.currentAgentId === agentId) {
if (this.agentList.length > 0) {
this.setCurrentAgent(this.agentList[0].id)
}
else {
this.currentAgentId = ''
this.currentAgent = null
}
}
}
},
// 更新智能体信息
updateAgent(agent: Agent) {
const index = this.agentList.findIndex(item => item.id === agent.id)
if (index > -1) {
this.agentList[index] = agent
// 如果是当前智能体，更新当前智能体信息
if (this.currentAgentId === agent.id) {
this.currentAgent = agent
}
}
},
// 清空状态
clearState() {
this.agentList = []
this.currentAgentId = ''
this.currentAgent = null
this.isLoaded = false
},
},
persist: {
// 持久化当前选中的智能体ID
// paths: ['currentAgentId'],
},
})
main/xiaozhi-mobile-admin/src/store/index.ts
-1
View File
@@ -13,7 +13,6 @@ store.use(
export default store
export * from './agent'
export * from './config'
export * from './plugin'
// 模块统一导出
main/xiaozhi-mobile-admin/src/utils/index.ts
+27 -1
View File
@@ -1,6 +1,27 @@
import { pages, subPackages } from '@/pages.json'
import { isMpWeixin } from './platform'
/**
* 运行时服务端地址覆盖存储键
*/
export const SERVER_BASE_URL_OVERRIDE_KEY = 'server_base_url_override'
/**
* 设置/清除/获取 运行时覆盖的服务端地址
*/
export function setServerBaseUrlOverride(url: string) {
uni.setStorageSync(SERVER_BASE_URL_OVERRIDE_KEY, url)
}
export function clearServerBaseUrlOverride() {
uni.removeStorageSync(SERVER_BASE_URL_OVERRIDE_KEY)
}
export function getServerBaseUrlOverride(): string | null {
const value = uni.getStorageSync(SERVER_BASE_URL_OVERRIDE_KEY)
return value || null
}
export function getLastPage() {
// getCurrentPages() 至少有1个元素，所以不再额外判断
// const lastPage = getCurrentPages().at(-1)
@@ -108,7 +129,12 @@ export const needLoginPages: string[] = getAllPages('needLogin').map(page => pag
* 根据微信小程序当前环境，判断应该获取的 baseUrl
*/
export function getEnvBaseUrl() {
// 请求基准地址
// 若存在用户设置的覆盖地址，优先返回
const override = getServerBaseUrlOverride()
if (override)
return override
// 请求基准地址（默认来源于 env）
let baseUrl = import.meta.env.VITE_SERVER_BASEURL
// # 有些同学可能需要在微信小程序里面根据 develop、trial、release 分别设置上传地址，参考代码如下。
main/xiaozhi-mobile-admin/src/utils/uploadFile.ts
+5 -2
View File
@@ -1,3 +1,4 @@
import { getEnvBaseUrl } from './index'
import { toast } from './toast'
/**
@@ -20,8 +21,10 @@ import { toast } from './toast'
* 上传文件的URL配置
*/
export const uploadFileUrl = {
/** 用户头像上传地址 */
USER_AVATAR: `${import.meta.env.VITE_SERVER_BASEURL}/user/avatar`,
/** 用户头像上传地址（动态读取当前生效的 BaseURL） */
get USER_AVATAR() {
return `${getEnvBaseUrl()}/user/avatar`
},
}
/**