mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-29 18:23:59 +08:00
feat: 初始化移动端项目
This commit is contained in:
Junsen
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,726 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": "编辑功能",
|
||||
"navigationStyle": "custom",
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useMessage } from 'wot-design-uni'
|
||||
import { getMcpAddress, getMcpTools } from '@/api/agent/agent'
|
||||
import { usePluginStore } from '@/store'
|
||||
|
||||
const message = useMessage()
|
||||
const pluginStore = usePluginStore()
|
||||
|
||||
const segmentedList = ref<string[]>(['未选', '已选'])
|
||||
const currentSegmented = ref('未选')
|
||||
const notSelectedList = ref<any[]>([])
|
||||
const selectedList = ref<any[]>([])
|
||||
|
||||
// 使用计算属性从store获取数据
|
||||
const allFunctions = computed(() => pluginStore.allFunctions)
|
||||
const functions = computed(() => pluginStore.currentFunctions)
|
||||
const agentId = computed(() => pluginStore.currentAgentId)
|
||||
const mcpAddress = ref('')
|
||||
const mcpTools = ref<string[]>([])
|
||||
|
||||
// 参数编辑相关
|
||||
const showParamDialog = ref(false)
|
||||
const currentFunction = ref<any>(null)
|
||||
const tempParams = ref<Record<string, any>>({})
|
||||
const arrayTextCache = ref<Record<string, string>>({})
|
||||
const jsonTextCache = ref<Record<string, string>>({})
|
||||
|
||||
async function mergeFunctions() {
|
||||
selectedList.value = functions.value.map((mapping) => {
|
||||
const meta = allFunctions.value.find(f => f.id === mapping.pluginId)
|
||||
if (!meta) {
|
||||
return { id: mapping.pluginId, name: mapping.pluginId, params: {} }
|
||||
}
|
||||
|
||||
return {
|
||||
id: mapping.pluginId,
|
||||
name: meta.name,
|
||||
params: mapping.paramInfo || { ...meta.params },
|
||||
fieldsMeta: meta.fieldsMeta,
|
||||
}
|
||||
})
|
||||
|
||||
// 未选的插件
|
||||
notSelectedList.value = allFunctions.value.filter(
|
||||
item => !selectedList.value.some(f => f.id === item.id),
|
||||
)
|
||||
|
||||
if (agentId.value) {
|
||||
const [address, tools] = await Promise.all([
|
||||
getMcpAddress(agentId.value),
|
||||
getMcpTools(agentId.value),
|
||||
])
|
||||
mcpAddress.value = address
|
||||
mcpTools.value = tools || []
|
||||
}
|
||||
}
|
||||
|
||||
// 添加插件到已选
|
||||
function selectFunction(func: any) {
|
||||
// 添加到已选列表
|
||||
selectedList.value.push({
|
||||
id: func.id,
|
||||
name: func.name,
|
||||
params: { ...func.params },
|
||||
fieldsMeta: func.fieldsMeta,
|
||||
})
|
||||
|
||||
// 从未选列表中移除
|
||||
notSelectedList.value = notSelectedList.value.filter(
|
||||
item => item.id !== func.id,
|
||||
)
|
||||
}
|
||||
|
||||
// 从已选中移除插件
|
||||
function removeFunction(func: any) {
|
||||
// 从已选列表中移除
|
||||
selectedList.value = selectedList.value.filter(item => item.id !== func.id)
|
||||
|
||||
// 添加回未选列表
|
||||
const originalFunc = allFunctions.value.find(f => f.id === func.id)
|
||||
if (originalFunc) {
|
||||
notSelectedList.value.push(originalFunc)
|
||||
}
|
||||
}
|
||||
|
||||
// 编辑插件参数
|
||||
function editFunction(func: any) {
|
||||
currentFunction.value = func
|
||||
|
||||
// 直接使用当前函数的参数
|
||||
tempParams.value = { ...func.params }
|
||||
|
||||
// 初始化文本缓存
|
||||
if (func.fieldsMeta) {
|
||||
func.fieldsMeta.forEach((field: any) => {
|
||||
if (field.type === 'array') {
|
||||
const value = tempParams.value[field.key]
|
||||
arrayTextCache.value[field.key] = Array.isArray(value)
|
||||
? value.join('\n')
|
||||
: value || ''
|
||||
}
|
||||
else if (field.type === 'json') {
|
||||
const value = tempParams.value[field.key]
|
||||
try {
|
||||
jsonTextCache.value[field.key] = JSON.stringify(value || {}, null, 2)
|
||||
}
|
||||
catch {
|
||||
jsonTextCache.value[field.key] = '{}'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
showParamDialog.value = true
|
||||
}
|
||||
|
||||
// 处理参数变化 - 实时保存
|
||||
function handleParamChange(key: string, value: any, field: any) {
|
||||
tempParams.value[key] = value
|
||||
|
||||
// 实时更新到 selectedList
|
||||
if (currentFunction.value) {
|
||||
const index = selectedList.value.findIndex(
|
||||
f => f.id === currentFunction.value.id,
|
||||
)
|
||||
if (index >= 0) {
|
||||
selectedList.value[index].params = { ...tempParams.value }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理数组类型参数变化 - 实时保存
|
||||
function handleArrayChange(key: string, value: string, field: any) {
|
||||
arrayTextCache.value[key] = value
|
||||
// 转换为数组存储
|
||||
const arrayValue = value.split('\n').filter(Boolean)
|
||||
tempParams.value[key] = arrayValue
|
||||
|
||||
// 实时更新到 selectedList
|
||||
if (currentFunction.value) {
|
||||
const index = selectedList.value.findIndex(
|
||||
f => f.id === currentFunction.value.id,
|
||||
)
|
||||
if (index >= 0) {
|
||||
selectedList.value[index].params = { ...tempParams.value }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理JSON类型参数变化 - 实时保存
|
||||
function handleJsonChange(key: string, value: string, field: any) {
|
||||
jsonTextCache.value[key] = value
|
||||
try {
|
||||
const jsonValue = JSON.parse(value)
|
||||
tempParams.value[key] = jsonValue
|
||||
|
||||
// 实时更新到 selectedList
|
||||
if (currentFunction.value) {
|
||||
const index = selectedList.value.findIndex(
|
||||
f => f.id === currentFunction.value.id,
|
||||
)
|
||||
if (index >= 0) {
|
||||
selectedList.value[index].params = { ...tempParams.value }
|
||||
}
|
||||
}
|
||||
}
|
||||
catch {
|
||||
message.alert('JSON格式错误')
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭参数编辑弹窗
|
||||
function closeParamEdit() {
|
||||
showParamDialog.value = false
|
||||
tempParams.value = {}
|
||||
arrayTextCache.value = {}
|
||||
jsonTextCache.value = {}
|
||||
}
|
||||
|
||||
// 返回上一页并更新配置
|
||||
function goBack() {
|
||||
const finalFunctions = selectedList.value.map(f => ({
|
||||
pluginId: f.id,
|
||||
paramInfo: f.params,
|
||||
}))
|
||||
|
||||
// 更新到store中
|
||||
pluginStore.updateFunctions(finalFunctions)
|
||||
|
||||
// 直接返回
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
// 复制MCP地址
|
||||
function copyMcpAddress() {
|
||||
if (!mcpAddress.value) {
|
||||
message.alert('暂无MCP地址可复制')
|
||||
return
|
||||
}
|
||||
|
||||
uni.setClipboardData({
|
||||
data: mcpAddress.value,
|
||||
showToast: false,
|
||||
success: () => {
|
||||
message.alert('MCP地址已复制到剪贴板')
|
||||
},
|
||||
fail: () => {
|
||||
message.alert('复制失败，请重试')
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 渲染参数字段的辅助函数
|
||||
function getFieldDisplayValue(field: any, value: any) {
|
||||
if (field.type === 'array') {
|
||||
return Array.isArray(value) ? value.join('\n') : value || ''
|
||||
}
|
||||
return value || ''
|
||||
}
|
||||
|
||||
// 字段说明
|
||||
function getFieldRemark(field: any) {
|
||||
let description = field.label || ''
|
||||
if (field.default) {
|
||||
description += `（默认值：${field.default}）`
|
||||
}
|
||||
return description
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// 直接从store获取数据并合并
|
||||
await mergeFunctions()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 头部导航 -->
|
||||
<wd-navbar
|
||||
title=""
|
||||
safe-area-inset-top
|
||||
left-arrow
|
||||
:bordered="false"
|
||||
@click-left="goBack"
|
||||
>
|
||||
<template #left>
|
||||
<wd-icon name="arrow-left" size="18" />
|
||||
</template>
|
||||
</wd-navbar>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="content-scroll-view box-border px-[20rpx]"
|
||||
:style="{ height: 'calc(100vh - 120rpx)' }"
|
||||
:scroll-with-animation="true"
|
||||
>
|
||||
<!-- 内置插件区域 -->
|
||||
<view class="mt-[20rpx] flex flex-1 flex-col">
|
||||
<view class="text-[32rpx] text-[#333] font-medium">
|
||||
内置插件
|
||||
</view>
|
||||
<view
|
||||
class="mt-[20rpx] box-border flex flex-1 flex-col rounded-[10rpx] bg-white p-[20rpx]"
|
||||
>
|
||||
<!-- 分段控制器 -->
|
||||
<wd-segmented
|
||||
v-model:value="currentSegmented"
|
||||
:options="segmentedList"
|
||||
/>
|
||||
|
||||
<!-- 插件列表 -->
|
||||
<view class="mt-[20rpx] flex-1 overflow-hidden">
|
||||
<!-- 未选插件 -->
|
||||
<scroll-view
|
||||
v-if="currentSegmented === '未选'"
|
||||
class="plugin-scroll-view"
|
||||
scroll-y
|
||||
>
|
||||
<view
|
||||
v-if="notSelectedList.length === 0"
|
||||
class="h-[400rpx] flex items-center justify-center"
|
||||
>
|
||||
<wd-status-tip image="content" tip="暂无更多插件" />
|
||||
</view>
|
||||
<view v-else class="p-[20rpx] space-y-[20rpx]">
|
||||
<view
|
||||
v-for="func in notSelectedList"
|
||||
:key="func.id"
|
||||
class="flex items-center justify-between border border-[#e9ecef] rounded-[10rpx] bg-[#f8f9fa] p-[20rpx]"
|
||||
@click="selectFunction(func)"
|
||||
>
|
||||
<view class="flex-1">
|
||||
<view
|
||||
class="mb-[10rpx] text-[30rpx] text-[#333] font-medium"
|
||||
>
|
||||
{{ func.name }}
|
||||
</view>
|
||||
<view class="text-[24rpx] text-[#666]">
|
||||
{{ func.providerCode }}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="h-[60rpx] w-[60rpx] flex items-center justify-center rounded-full bg-[#1677ff]"
|
||||
>
|
||||
<text class="text-[36rpx] text-white">
|
||||
+
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 已选插件 -->
|
||||
<scroll-view v-else class="plugin-scroll-view" scroll-y>
|
||||
<view
|
||||
v-if="selectedList.length === 0"
|
||||
class="h-[400rpx] flex items-center justify-center"
|
||||
>
|
||||
<wd-status-tip image="content" tip="请选择插件功能" />
|
||||
</view>
|
||||
<view v-else class="p-[20rpx] space-y-[20rpx]">
|
||||
<view
|
||||
v-for="func in selectedList"
|
||||
:key="func.id"
|
||||
class="border border-[#d4edff] rounded-[10rpx] bg-[#f0f7ff] p-[20rpx]"
|
||||
>
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="flex-1" @click="editFunction(func)">
|
||||
<view
|
||||
class="mb-[10rpx] text-[30rpx] text-[#333] font-medium"
|
||||
>
|
||||
{{ func.name }}
|
||||
</view>
|
||||
<view class="text-[24rpx] text-[#1677ff]">
|
||||
点击配置参数
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex space-x-[20rpx]">
|
||||
<!-- 配置按钮 -->
|
||||
<view
|
||||
class="h-[60rpx] w-[60rpx] flex items-center justify-center rounded-full bg-[#1677ff]"
|
||||
@click="editFunction(func)"
|
||||
>
|
||||
<text class="text-[24rpx] text-white">
|
||||
⚙
|
||||
</text>
|
||||
</view>
|
||||
<!-- 移除按钮 -->
|
||||
<view
|
||||
class="h-[60rpx] w-[60rpx] flex items-center justify-center rounded-full bg-[#ff4757]"
|
||||
@click="removeFunction(func)"
|
||||
>
|
||||
<text class="text-[32rpx] text-white">
|
||||
×
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- MCP接入点区域 -->
|
||||
<view class="mt-[20rpx] flex flex-1 flex-col">
|
||||
<view class="text-[32rpx] text-[#333] font-medium">
|
||||
mcp接入点
|
||||
</view>
|
||||
<view
|
||||
class="mt-[20rpx] box-border flex flex-1 flex-col rounded-[10rpx] bg-white p-[20rpx]"
|
||||
>
|
||||
<view class="flex items-center justify-between text-[24rpx]">
|
||||
<input
|
||||
v-model="mcpAddress"
|
||||
type="text"
|
||||
disabled
|
||||
class="flex-1 rounded-[10rpx] bg-[#f5f7fb] p-[20rpx]"
|
||||
>
|
||||
<view
|
||||
class="ml-[20rpx] h-[70rpx] flex items-center justify-center rounded-[10rpx] bg-[#1677ff] px-[20rpx] text-[24rpx] text-white"
|
||||
@click="copyMcpAddress"
|
||||
>
|
||||
复制
|
||||
</view>
|
||||
</view>
|
||||
<!-- 工具列表 -->
|
||||
<view class="mt-[20rpx] flex-1 overflow-hidden">
|
||||
<scroll-view class="plugin-scroll-view" scroll-y>
|
||||
<view
|
||||
v-if="mcpTools && mcpTools.length === 0"
|
||||
class="h-[400rpx] flex items-center justify-center"
|
||||
>
|
||||
<wd-status-tip image="content" tip="暂无工具" />
|
||||
</view>
|
||||
<view v-else class="p-[20rpx]">
|
||||
<view class="flex flex-wrap">
|
||||
<view
|
||||
v-for="tool in mcpTools"
|
||||
:key="tool"
|
||||
class="mb-[20rpx] mr-[20rpx] rounded-[10rpx] bg-[#f5f7fb] p-[20rpx]"
|
||||
>
|
||||
{{ tool }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 参数编辑弹窗 -->
|
||||
<wd-action-sheet
|
||||
v-model="showParamDialog"
|
||||
:title="`参数配置 - ${currentFunction?.name || ''}`"
|
||||
custom-header-class="h-[75vh]"
|
||||
@close="closeParamEdit"
|
||||
>
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="param-scroll-container"
|
||||
:style="{ height: 'calc(75vh - 60rpx)' }"
|
||||
>
|
||||
<view class="param-content">
|
||||
<!-- 无参数提示 -->
|
||||
<view
|
||||
v-if="
|
||||
!currentFunction?.fieldsMeta
|
||||
|| currentFunction.fieldsMeta.length === 0
|
||||
"
|
||||
class="empty-params"
|
||||
>
|
||||
<text class="empty-text">
|
||||
{{ currentFunction?.name }} 无需配置参数
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 参数表单 - 卡片式布局 -->
|
||||
<view v-else class="param-cards">
|
||||
<view
|
||||
v-for="field in currentFunction.fieldsMeta"
|
||||
:key="field.key"
|
||||
class="param-card"
|
||||
>
|
||||
<!-- 字段信息 -->
|
||||
<view class="field-info">
|
||||
<text class="field-label">
|
||||
{{ field.label }}
|
||||
</text>
|
||||
<text v-if="getFieldRemark(field)" class="field-desc">
|
||||
{{ getFieldRemark(field) }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 输入控件 -->
|
||||
<view class="field-input-container">
|
||||
<!-- 字符串类型 -->
|
||||
<input
|
||||
v-if="field.type === 'string'"
|
||||
v-model="tempParams[field.key]"
|
||||
class="field-input"
|
||||
type="text"
|
||||
:placeholder="`请输入${field.label}`"
|
||||
@input="
|
||||
handleParamChange(field.key, $event.detail.value, field)
|
||||
"
|
||||
>
|
||||
|
||||
<!-- 数组类型 -->
|
||||
<view v-else-if="field.type === 'array'" class="array-field">
|
||||
<text class="field-hint">
|
||||
每行输入一个项目
|
||||
</text>
|
||||
<textarea
|
||||
v-model="arrayTextCache[field.key]"
|
||||
class="field-textarea"
|
||||
:placeholder="`请输入${field.label}，每行一个`"
|
||||
@input="
|
||||
handleArrayChange(field.key, $event.detail.value, field)
|
||||
"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- JSON类型 -->
|
||||
<view v-else-if="field.type === 'json'" class="json-field">
|
||||
<text class="field-hint">
|
||||
请输入有效的JSON格式
|
||||
</text>
|
||||
<textarea
|
||||
v-model="jsonTextCache[field.key]"
|
||||
class="field-textarea json-textarea"
|
||||
placeholder="请输入合法的JSON格式"
|
||||
@blur="
|
||||
handleJsonChange(field.key, $event.detail.value, field)
|
||||
"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 数字类型 -->
|
||||
<input
|
||||
v-else-if="field.type === 'number'"
|
||||
v-model="tempParams[field.key]"
|
||||
class="field-input"
|
||||
type="number"
|
||||
:placeholder="`请输入${field.label}`"
|
||||
@input="
|
||||
handleParamChange(
|
||||
field.key,
|
||||
Number($event.detail.value),
|
||||
field,
|
||||
)
|
||||
"
|
||||
>
|
||||
|
||||
<!-- 布尔类型 -->
|
||||
<view
|
||||
v-else-if="field.type === 'boolean' || field.type === 'bool'"
|
||||
class="switch-field"
|
||||
>
|
||||
<view class="switch-info">
|
||||
<text class="switch-label">
|
||||
启用功能
|
||||
</text>
|
||||
<text class="switch-desc">
|
||||
开启或关闭此功能
|
||||
</text>
|
||||
</view>
|
||||
<switch
|
||||
:checked="tempParams[field.key]"
|
||||
@change="
|
||||
handleParamChange(field.key, $event.detail.value, field)
|
||||
"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 默认字符串类型 -->
|
||||
<input
|
||||
v-else
|
||||
v-model="tempParams[field.key]"
|
||||
class="field-input"
|
||||
type="text"
|
||||
:placeholder="`请输入${field.label}`"
|
||||
@input="
|
||||
handleParamChange(field.key, $event.detail.value, field)
|
||||
"
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</wd-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
.content-scroll-view {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// 插件列表滚动视图样式
|
||||
.plugin-scroll-view {
|
||||
max-height: 600rpx; // 最大高度为4个插件的高度
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// 参数编辑弹窗样式
|
||||
.param-scroll-container {
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
.param-content {
|
||||
padding: 30rpx;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.empty-params {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 400rpx;
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.param-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.param-card {
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
border: 1rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
.field-info {
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.field-label {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #232338;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.field-desc {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #65686f;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.field-input-container {
|
||||
.field-input {
|
||||
width: 100%;
|
||||
padding: 16rpx 20rpx;
|
||||
height: 80rpx;
|
||||
background: #f5f7fb;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid #eeeeee;
|
||||
font-size: 28rpx;
|
||||
color: #232338;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
border-color: #336cff;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #9d9ea3;
|
||||
}
|
||||
}
|
||||
|
||||
.field-textarea {
|
||||
width: 100%;
|
||||
min-height: 200rpx;
|
||||
padding: 20rpx;
|
||||
background: #f5f7fb;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid #eeeeee;
|
||||
font-size: 26rpx;
|
||||
color: #232338;
|
||||
line-height: 1.6;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
border-color: #336cff;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
&.json-textarea {
|
||||
min-height: 300rpx;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #9d9ea3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.array-field,
|
||||
.json-field {
|
||||
.field-hint {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #65686f;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.switch-info {
|
||||
flex: 1;
|
||||
|
||||
.switch-label {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #232338;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.switch-desc {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #65686f;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,331 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "聊天详情"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
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 { toast } from '@/utils/toast'
|
||||
|
||||
defineOptions({
|
||||
name: 'ChatDetail',
|
||||
})
|
||||
|
||||
// 获取屏幕边界到安全区域距离
|
||||
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 sessionId = ref('')
|
||||
const agentId = ref('')
|
||||
|
||||
// 智能体管理
|
||||
const agentStore = useAgentStore()
|
||||
|
||||
// 获取当前智能体信息
|
||||
const currentAgent = computed(() => {
|
||||
return agentStore.agentList.find(agent => agent.id === agentId.value)
|
||||
})
|
||||
|
||||
// 聊天数据
|
||||
const messageList = ref<ChatMessage[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
// 音频播放相关
|
||||
const audioContext = ref<UniApp.InnerAudioContext | null>(null)
|
||||
const playingAudioId = ref<string | null>(null)
|
||||
|
||||
// 返回上一页
|
||||
function goBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
// 加载聊天记录
|
||||
async function loadChatHistory() {
|
||||
if (!sessionId.value || !agentId.value) {
|
||||
console.error('缺少必要参数')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
const response = await getChatHistory(agentId.value, sessionId.value)
|
||||
messageList.value = response
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取聊天记录失败:', error)
|
||||
toast.error('获取聊天记录失败')
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 解析用户消息内容
|
||||
function parseUserMessage(content: string): UserMessageContent | null {
|
||||
try {
|
||||
return JSON.parse(content)
|
||||
}
|
||||
catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// 获取消息显示内容
|
||||
function getMessageContent(message: ChatMessage): string {
|
||||
if (message.chatType === 1) {
|
||||
// 用户消息，需要解析JSON
|
||||
const parsed = parseUserMessage(message.content)
|
||||
return parsed ? parsed.content : message.content
|
||||
}
|
||||
else {
|
||||
// AI消息，直接显示
|
||||
return message.content
|
||||
}
|
||||
}
|
||||
|
||||
// 获取说话人名称
|
||||
function getSpeakerName(message: ChatMessage): string {
|
||||
if (message.chatType === 1) {
|
||||
const parsed = parseUserMessage(message.content)
|
||||
return parsed ? parsed.speaker : '用户'
|
||||
}
|
||||
else {
|
||||
return currentAgent.value?.agentName || 'AI助手'
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
function formatTime(timeStr: string) {
|
||||
const date = new Date(timeStr)
|
||||
return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
// 播放音频
|
||||
async function playAudio(audioId: string) {
|
||||
if (!audioId) {
|
||||
toast.error('音频ID无效')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// 如果正在播放其他音频，先停止
|
||||
if (audioContext.value) {
|
||||
audioContext.value.stop()
|
||||
audioContext.value.destroy()
|
||||
audioContext.value = null
|
||||
}
|
||||
|
||||
// 获取音频下载ID
|
||||
const downloadId = await getAudioId(audioId)
|
||||
|
||||
// 构造音频播放地址
|
||||
const baseURL = import.meta.env.VITE_SERVER_BASEURL
|
||||
const audioUrl = `${baseURL}/agent/play/${downloadId}`
|
||||
|
||||
// 创建音频上下文
|
||||
audioContext.value = uni.createInnerAudioContext()
|
||||
audioContext.value.src = audioUrl
|
||||
|
||||
// 设置播放状态
|
||||
playingAudioId.value = audioId
|
||||
|
||||
// 监听播放完成
|
||||
audioContext.value.onEnded(() => {
|
||||
playingAudioId.value = null
|
||||
if (audioContext.value) {
|
||||
audioContext.value.destroy()
|
||||
audioContext.value = null
|
||||
}
|
||||
})
|
||||
|
||||
// 监听播放错误
|
||||
audioContext.value.onError((error) => {
|
||||
console.error('音频播放失败:', error)
|
||||
toast.error('音频播放失败')
|
||||
playingAudioId.value = null
|
||||
if (audioContext.value) {
|
||||
audioContext.value.destroy()
|
||||
audioContext.value = null
|
||||
}
|
||||
})
|
||||
|
||||
// 开始播放
|
||||
audioContext.value.play()
|
||||
}
|
||||
catch (error) {
|
||||
console.error('播放音频失败:', error)
|
||||
toast.error('播放音频失败')
|
||||
playingAudioId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.sessionId && options?.agentId) {
|
||||
sessionId.value = options.sessionId
|
||||
agentId.value = options.agentId
|
||||
loadChatHistory()
|
||||
}
|
||||
else {
|
||||
console.error('缺少必要参数')
|
||||
toast.error('页面参数错误')
|
||||
}
|
||||
})
|
||||
|
||||
// 页面销毁时清理音频资源
|
||||
onUnload(() => {
|
||||
if (audioContext.value) {
|
||||
audioContext.value.stop()
|
||||
audioContext.value.destroy()
|
||||
audioContext.value = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="h-screen flex flex-col bg-[#f5f7fb]">
|
||||
<!-- 状态栏背景 -->
|
||||
<view class="w-full bg-white" :style="{ height: `${safeAreaInsets?.top}px` }" />
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<wd-navbar title="聊天详情">
|
||||
<template #left>
|
||||
<wd-icon name="arrow-left" size="18" @click="goBack" />
|
||||
</template>
|
||||
</wd-navbar>
|
||||
|
||||
<!-- 聊天消息列表 -->
|
||||
<scroll-view
|
||||
scroll-y
|
||||
:style="{ height: `calc(100vh - ${safeAreaInsets?.top || 0}px - 120rpx)` }"
|
||||
class="box-border flex-1 bg-[#f5f7fb] p-[20rpx]"
|
||||
:scroll-into-view="`message-${messageList.length - 1}`"
|
||||
>
|
||||
<view v-if="loading" class="flex flex-col items-center justify-center gap-[20rpx] p-[100rpx_0]">
|
||||
<wd-loading />
|
||||
<text class="text-[28rpx] text-[#65686f]">
|
||||
加载中...
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view v-else class="flex flex-col gap-[20rpx]">
|
||||
<view
|
||||
v-for="(message, index) in messageList"
|
||||
:id="`message-${index}`"
|
||||
:key="index"
|
||||
class="w-full flex"
|
||||
:class="{
|
||||
'justify-end': message.chatType === 1,
|
||||
'justify-start': message.chatType === 2,
|
||||
}"
|
||||
>
|
||||
<view
|
||||
class="max-w-[80%] flex flex-col gap-[8rpx]"
|
||||
:class="{
|
||||
'items-end': message.chatType === 1,
|
||||
'items-start': message.chatType === 2,
|
||||
}"
|
||||
>
|
||||
<!-- 消息气泡 -->
|
||||
<view
|
||||
class="shadow-message break-words rounded-[20rpx] p-[24rpx] leading-[1.4]"
|
||||
:class="{
|
||||
'bg-[#336cff] text-white': message.chatType === 1,
|
||||
'bg-white text-[#232338] border border-[#eeeeee]': message.chatType === 2,
|
||||
}"
|
||||
>
|
||||
<!-- 内容区域 - 使用flex布局让图标和文本对齐 -->
|
||||
<view class="flex items-center gap-[12rpx]">
|
||||
<!-- 音频播放图标 -->
|
||||
<view
|
||||
v-if="message.audioId"
|
||||
class="flex-shrink-0 cursor-pointer transition-transform duration-200 active:scale-90"
|
||||
:class="{
|
||||
'text-white animate-pulse-audio': message.chatType === 1 && playingAudioId === message.audioId,
|
||||
'text-[#ffd700]': message.chatType === 1 && playingAudioId === message.audioId && playingAudioId,
|
||||
'text-[#336cff] animate-pulse-audio': message.chatType === 2 && playingAudioId === message.audioId,
|
||||
'text-[#ff6b35]': message.chatType === 2 && playingAudioId === message.audioId && playingAudioId,
|
||||
'text-white': message.chatType === 1 && playingAudioId !== message.audioId,
|
||||
'text-[#336cff]': message.chatType === 2 && playingAudioId !== message.audioId,
|
||||
}"
|
||||
@click="playAudio(message.audioId)"
|
||||
>
|
||||
<wd-icon
|
||||
:name="playingAudioId === message.audioId ? 'pause-circle-filled' : 'play-circle-filled'"
|
||||
size="20"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 消息内容容器 -->
|
||||
<view class="min-w-0 flex-1">
|
||||
<!-- 消息内容 -->
|
||||
<text class="block text-[28rpx]">
|
||||
{{ getMessageContent(message) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 说话人信息 -->
|
||||
<text
|
||||
class="mx-[12rpx] text-[22rpx] text-[#9d9ea3]"
|
||||
:class="{
|
||||
'text-right': message.chatType === 1,
|
||||
'text-left': message.chatType === 2,
|
||||
}"
|
||||
>
|
||||
{{ formatTime(message.createdAt) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* 自定义阴影和动画效果，无法用UnoCSS表示的样式 */
|
||||
.shadow-message {
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
@keyframes pulse-audio {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse-audio {
|
||||
animation: pulse-audio 1.5s infinite;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,342 @@
|
||||
<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',
|
||||
})
|
||||
|
||||
// 获取屏幕边界到安全区域距离
|
||||
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 sessionList = ref<ChatSession[]>([])
|
||||
const pagingRef = ref()
|
||||
useZPaging(pagingRef)
|
||||
|
||||
// 智能体管理
|
||||
const agentStore = useAgentStore()
|
||||
const showAgentPicker = ref(false)
|
||||
|
||||
// 获取当前选中的智能体ID
|
||||
const currentAgentId = computed(() => {
|
||||
return agentStore.currentAgentId
|
||||
})
|
||||
|
||||
// 获取智能体选项
|
||||
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) {
|
||||
try {
|
||||
console.log('z-paging获取聊天会话列表')
|
||||
|
||||
// 检查是否有当前选中的智能体
|
||||
if (!currentAgentId.value) {
|
||||
console.warn('没有选中的智能体')
|
||||
pagingRef.value.complete([])
|
||||
return
|
||||
}
|
||||
|
||||
const response = await getChatSessions(currentAgentId.value, {
|
||||
page: pageNo,
|
||||
limit: pageSize,
|
||||
})
|
||||
|
||||
// 使用z-paging的分页机制
|
||||
if (pageNo === 1) {
|
||||
pagingRef.value.complete(response.list, response.total)
|
||||
}
|
||||
else {
|
||||
pagingRef.value.addData(response.list)
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取聊天会话列表失败:', error)
|
||||
pagingRef.value.complete(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
function formatTime(timeStr: string) {
|
||||
const date = new Date(timeStr)
|
||||
const now = new Date()
|
||||
const diff = now.getTime() - date.getTime()
|
||||
|
||||
if (diff < 60000)
|
||||
return '刚刚'
|
||||
if (diff < 3600000)
|
||||
return `${Math.floor(diff / 60000)}分钟前`
|
||||
if (diff < 86400000)
|
||||
return `${Math.floor(diff / 3600000)}小时前`
|
||||
if (diff < 604800000)
|
||||
return `${Math.floor(diff / 86400000)}天前`
|
||||
|
||||
return date.toLocaleDateString()
|
||||
}
|
||||
|
||||
// 进入聊天详情
|
||||
function goToChatDetail(session: ChatSession) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/chat-history/detail?sessionId=${session.sessionId}&agentId=${currentAgentId.value}`,
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// 确保智能体列表已加载
|
||||
if (!agentStore.isLoaded) {
|
||||
await agentStore.loadAgentList()
|
||||
}
|
||||
})
|
||||
</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="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>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// z-paging内容区域样式
|
||||
:deep(.z-paging-content) {
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
.navbar-section {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
background: #ffffff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.session-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.session-item {
|
||||
background: #fbfbfb;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
border: 1rpx solid #eeeeee;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
}
|
||||
|
||||
.session-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
|
||||
.session-info {
|
||||
flex: 1;
|
||||
|
||||
.session-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.session-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #232338;
|
||||
max-width: 70%;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.session-time {
|
||||
font-size: 24rpx;
|
||||
color: #9d9ea3;
|
||||
}
|
||||
}
|
||||
|
||||
.session-meta {
|
||||
.chat-count {
|
||||
font-size: 28rpx;
|
||||
color: #65686f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.arrow-icon) {
|
||||
font-size: 24rpx;
|
||||
color: #c7c7cc;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 40rpx;
|
||||
text-align: center;
|
||||
|
||||
:deep(.empty-icon) {
|
||||
font-size: 120rpx;
|
||||
color: #d9d9d9;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 16rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,684 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useToast } from 'wot-design-uni'
|
||||
|
||||
// 类型定义
|
||||
interface WiFiNetwork {
|
||||
ssid: string
|
||||
rssi: number
|
||||
authmode: number
|
||||
channel: number
|
||||
}
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
selectedNetwork: WiFiNetwork | null
|
||||
password: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// Toast 实例
|
||||
const toast = useToast()
|
||||
|
||||
// 响应式数据
|
||||
const generating = ref(false)
|
||||
const playing = ref(false)
|
||||
const audioGenerated = ref(false)
|
||||
const autoLoop = ref(true)
|
||||
const audioFilePath = ref('')
|
||||
const audioContext = ref<any>(null)
|
||||
|
||||
// AFSK调制参数 - 参考HTML文件
|
||||
const MARK = 1800 // 二进制1的频率 (Hz)
|
||||
const SPACE = 1500 // 二进制0的频率 (Hz)
|
||||
const SAMPLE_RATE = 44100 // 采样率
|
||||
const BIT_RATE = 100 // 比特率 (bps)
|
||||
const START_BYTES = [0x01, 0x02] // 起始标记
|
||||
const END_BYTES = [0x03, 0x04] // 结束标记
|
||||
|
||||
// 计算属性
|
||||
const canGenerate = computed(() => {
|
||||
if (!props.selectedNetwork)
|
||||
return false
|
||||
if (props.selectedNetwork.authmode > 0 && !props.password)
|
||||
return false
|
||||
return true
|
||||
})
|
||||
|
||||
const audioLengthText = computed(() => {
|
||||
if (!props.selectedNetwork)
|
||||
return '0秒'
|
||||
const dataStr = `${props.selectedNetwork.ssid}\n${props.password}`
|
||||
const textBytes = stringToBytes(dataStr)
|
||||
const totalBits = (START_BYTES.length + textBytes.length + 1 + END_BYTES.length) * 8
|
||||
const duration = Math.ceil(totalBits / BIT_RATE)
|
||||
return `约${duration}秒`
|
||||
})
|
||||
|
||||
// 字符串转字节数组 - uniapp兼容版本
|
||||
function stringToBytes(str: string): number[] {
|
||||
const bytes: number[] = []
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
const code = str.charCodeAt(i)
|
||||
if (code < 0x80) {
|
||||
bytes.push(code)
|
||||
}
|
||||
else if (code < 0x800) {
|
||||
bytes.push(0xC0 | (code >> 6))
|
||||
bytes.push(0x80 | (code & 0x3F))
|
||||
}
|
||||
else if (code < 0xD800 || code >= 0xE000) {
|
||||
bytes.push(0xE0 | (code >> 12))
|
||||
bytes.push(0x80 | ((code >> 6) & 0x3F))
|
||||
bytes.push(0x80 | (code & 0x3F))
|
||||
}
|
||||
else {
|
||||
// 代理对处理
|
||||
i++
|
||||
const hi = code
|
||||
const lo = str.charCodeAt(i)
|
||||
const codePoint = 0x10000 + (((hi & 0x3FF) << 10) | (lo & 0x3FF))
|
||||
bytes.push(0xF0 | (codePoint >> 18))
|
||||
bytes.push(0x80 | ((codePoint >> 12) & 0x3F))
|
||||
bytes.push(0x80 | ((codePoint >> 6) & 0x3F))
|
||||
bytes.push(0x80 | (codePoint & 0x3F))
|
||||
}
|
||||
}
|
||||
return bytes
|
||||
}
|
||||
|
||||
// 校验和计算 - 参考HTML文件
|
||||
function checksum(data: number[]): number {
|
||||
return data.reduce((sum, b) => (sum + b) & 0xFF, 0)
|
||||
}
|
||||
|
||||
// 字节转比特位 - 参考HTML文件
|
||||
function toBits(byte: number): number[] {
|
||||
const bits: number[] = []
|
||||
for (let i = 7; i >= 0; i--) {
|
||||
bits.push((byte >> i) & 1)
|
||||
}
|
||||
return bits
|
||||
}
|
||||
|
||||
// AFSK调制 - 参考HTML文件算法
|
||||
function afskModulate(bits: number[]): Float32Array {
|
||||
const samplesPerBit = SAMPLE_RATE / BIT_RATE
|
||||
const totalSamples = Math.floor(bits.length * samplesPerBit)
|
||||
const buffer = new Float32Array(totalSamples)
|
||||
|
||||
for (let i = 0; i < bits.length; i++) {
|
||||
const freq = bits[i] ? MARK : SPACE
|
||||
for (let j = 0; j < samplesPerBit; j++) {
|
||||
const t = (i * samplesPerBit + j) / SAMPLE_RATE
|
||||
buffer[i * samplesPerBit + j] = Math.sin(2 * Math.PI * freq * t)
|
||||
}
|
||||
}
|
||||
|
||||
return buffer
|
||||
}
|
||||
|
||||
// 浮点转16位PCM - 参考HTML文件
|
||||
function floatTo16BitPCM(floatSamples: Float32Array): Uint8Array {
|
||||
const buffer = new Uint8Array(floatSamples.length * 2)
|
||||
for (let i = 0; i < floatSamples.length; i++) {
|
||||
const s = Math.max(-1, Math.min(1, floatSamples[i]))
|
||||
const val = s < 0 ? s * 0x8000 : s * 0x7FFF
|
||||
buffer[i * 2] = val & 0xFF
|
||||
buffer[i * 2 + 1] = (val >> 8) & 0xFF
|
||||
}
|
||||
return buffer
|
||||
}
|
||||
|
||||
// base64编码表
|
||||
const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
|
||||
|
||||
// 兼容的base64编码实现
|
||||
function base64Encode(bytes: Uint8Array): string {
|
||||
let result = ''
|
||||
let i = 0
|
||||
|
||||
while (i < bytes.length) {
|
||||
const a = bytes[i++]
|
||||
const b = i < bytes.length ? bytes[i++] : 0
|
||||
const c = i < bytes.length ? bytes[i++] : 0
|
||||
|
||||
const bitmap = (a << 16) | (b << 8) | c
|
||||
|
||||
result += base64Chars.charAt((bitmap >> 18) & 63)
|
||||
result += base64Chars.charAt((bitmap >> 12) & 63)
|
||||
result += i - 2 < bytes.length ? base64Chars.charAt((bitmap >> 6) & 63) : '='
|
||||
result += i - 1 < bytes.length ? base64Chars.charAt(bitmap & 63) : '='
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
// 数组转base64编码 - 兼容版本
|
||||
function arrayBufferToBase64(buffer: ArrayBuffer): string {
|
||||
const bytes = new Uint8Array(buffer)
|
||||
|
||||
// 尝试使用原生btoa，如果不存在则使用自定义实现
|
||||
if (typeof btoa !== 'undefined') {
|
||||
let binary = ''
|
||||
for (let i = 0; i < bytes.byteLength; i++) {
|
||||
binary += String.fromCharCode(bytes[i])
|
||||
}
|
||||
return btoa(binary)
|
||||
}
|
||||
else {
|
||||
return base64Encode(bytes)
|
||||
}
|
||||
}
|
||||
|
||||
// 构建WAV文件 - 返回ArrayBuffer而不是Blob
|
||||
function buildWav(pcm: Uint8Array): ArrayBuffer {
|
||||
const wavHeader = new Uint8Array(44)
|
||||
const dataLen = pcm.length
|
||||
const fileLen = 36 + dataLen
|
||||
|
||||
const writeStr = (offset: number, str: string) => {
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
wavHeader[offset + i] = str.charCodeAt(i)
|
||||
}
|
||||
}
|
||||
|
||||
const write32 = (offset: number, value: number) => {
|
||||
wavHeader[offset] = value & 0xFF
|
||||
wavHeader[offset + 1] = (value >> 8) & 0xFF
|
||||
wavHeader[offset + 2] = (value >> 16) & 0xFF
|
||||
wavHeader[offset + 3] = (value >> 24) & 0xFF
|
||||
}
|
||||
|
||||
const write16 = (offset: number, value: number) => {
|
||||
wavHeader[offset] = value & 0xFF
|
||||
wavHeader[offset + 1] = (value >> 8) & 0xFF
|
||||
}
|
||||
|
||||
writeStr(0, 'RIFF')
|
||||
write32(4, fileLen)
|
||||
writeStr(8, 'WAVE')
|
||||
writeStr(12, 'fmt ')
|
||||
write32(16, 16)
|
||||
write16(20, 1)
|
||||
write16(22, 1)
|
||||
write32(24, SAMPLE_RATE)
|
||||
write32(28, SAMPLE_RATE * 2)
|
||||
write16(32, 2)
|
||||
write16(34, 16)
|
||||
writeStr(36, 'data')
|
||||
write32(40, dataLen)
|
||||
|
||||
// 合并header和数据
|
||||
const result = new ArrayBuffer(44 + dataLen)
|
||||
const resultView = new Uint8Array(result)
|
||||
resultView.set(wavHeader)
|
||||
resultView.set(pcm, 44)
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
// 生成并播放声波 - 主要功能函数
|
||||
async function generateAndPlay() {
|
||||
if (!canGenerate.value || !props.selectedNetwork)
|
||||
return
|
||||
|
||||
generating.value = true
|
||||
|
||||
try {
|
||||
console.log('生成超声波配网音频...')
|
||||
|
||||
// 准备配网数据 - 参考HTML文件格式
|
||||
const dataStr = `${props.selectedNetwork.ssid}\n${props.password}`
|
||||
const textBytes = stringToBytes(dataStr)
|
||||
const fullBytes = [...START_BYTES, ...textBytes, checksum(textBytes), ...END_BYTES]
|
||||
|
||||
console.log('配网数据:', { ssid: props.selectedNetwork.ssid, password: props.password })
|
||||
console.log('数据字节长度:', textBytes.length)
|
||||
|
||||
// 转换为比特流
|
||||
let bits: number[] = []
|
||||
fullBytes.forEach((b) => {
|
||||
bits = bits.concat(toBits(b))
|
||||
})
|
||||
|
||||
console.log('比特流长度:', bits.length)
|
||||
|
||||
// AFSK调制 - 减少采样率降低文件大小
|
||||
const reducedSampleRate = 22050 // 降低采样率
|
||||
const samplesPerBit = reducedSampleRate / BIT_RATE
|
||||
const totalSamples = Math.floor(bits.length * samplesPerBit)
|
||||
const floatBuf = new Float32Array(totalSamples)
|
||||
|
||||
for (let i = 0; i < bits.length; i++) {
|
||||
const freq = bits[i] ? MARK : SPACE
|
||||
for (let j = 0; j < samplesPerBit; j++) {
|
||||
const t = (i * samplesPerBit + j) / reducedSampleRate
|
||||
floatBuf[i * samplesPerBit + j] = Math.sin(2 * Math.PI * freq * t) * 0.5 // 降低音量
|
||||
}
|
||||
}
|
||||
|
||||
const pcmBuf = floatTo16BitPCM(floatBuf)
|
||||
|
||||
// 生成WAV文件 - 使用降低的采样率
|
||||
const wavBuffer = buildWavOptimized(pcmBuf, reducedSampleRate)
|
||||
const base64 = arrayBufferToBase64(wavBuffer)
|
||||
const dataUri = `data:audio/wav;base64,${base64}`
|
||||
|
||||
console.log('base64长度:', base64.length, '约', Math.round(base64.length / 1024), 'KB')
|
||||
|
||||
// 检查数据大小
|
||||
if (base64.length > 1024 * 1024) { // 超过1MB
|
||||
throw new Error('音频文件过大，请缩短SSID或密码长度')
|
||||
}
|
||||
|
||||
audioFilePath.value = dataUri
|
||||
audioGenerated.value = true
|
||||
|
||||
console.log('音频生成成功，比特流长度:', bits.length, '采样点数:', floatBuf.length)
|
||||
|
||||
toast.success('声波生成成功')
|
||||
|
||||
// 延迟播放
|
||||
setTimeout(async () => {
|
||||
await playAudio()
|
||||
}, 800) // 增加延迟时间
|
||||
}
|
||||
catch (error) {
|
||||
console.error('音频生成失败:', error)
|
||||
toast.error(`声波生成失败: ${error.message || error}`)
|
||||
}
|
||||
finally {
|
||||
generating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 优化的WAV构建函数
|
||||
function buildWavOptimized(pcm: Uint8Array, sampleRate: number): ArrayBuffer {
|
||||
const wavHeader = new Uint8Array(44)
|
||||
const dataLen = pcm.length
|
||||
const fileLen = 36 + dataLen
|
||||
|
||||
const writeStr = (offset: number, str: string) => {
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
wavHeader[offset + i] = str.charCodeAt(i)
|
||||
}
|
||||
}
|
||||
|
||||
const write32 = (offset: number, value: number) => {
|
||||
wavHeader[offset] = value & 0xFF
|
||||
wavHeader[offset + 1] = (value >> 8) & 0xFF
|
||||
wavHeader[offset + 2] = (value >> 16) & 0xFF
|
||||
wavHeader[offset + 3] = (value >> 24) & 0xFF
|
||||
}
|
||||
|
||||
const write16 = (offset: number, value: number) => {
|
||||
wavHeader[offset] = value & 0xFF
|
||||
wavHeader[offset + 1] = (value >> 8) & 0xFF
|
||||
}
|
||||
|
||||
writeStr(0, 'RIFF')
|
||||
write32(4, fileLen)
|
||||
writeStr(8, 'WAVE')
|
||||
writeStr(12, 'fmt ')
|
||||
write32(16, 16)
|
||||
write16(20, 1)
|
||||
write16(22, 1)
|
||||
write32(24, sampleRate) // 使用传入的采样率
|
||||
write32(28, sampleRate * 2)
|
||||
write16(32, 2)
|
||||
write16(34, 16)
|
||||
writeStr(36, 'data')
|
||||
write32(40, dataLen)
|
||||
|
||||
// 合并header和数据
|
||||
const result = new ArrayBuffer(44 + dataLen)
|
||||
const resultView = new Uint8Array(result)
|
||||
resultView.set(wavHeader)
|
||||
resultView.set(pcm, 44)
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
// 播放音频
|
||||
async function playAudio() {
|
||||
if (!audioFilePath.value) {
|
||||
toast.error('请先生成音频')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// 强制清理所有旧的音频实例
|
||||
await cleanupAudio()
|
||||
|
||||
// 等待一下确保清理完成
|
||||
await new Promise(resolve => setTimeout(resolve, 200))
|
||||
|
||||
playing.value = true
|
||||
console.log('开始播放超声波配网音频')
|
||||
|
||||
// 创建新的音频上下文
|
||||
const innerAudioContext = uni.createInnerAudioContext()
|
||||
audioContext.value = innerAudioContext
|
||||
|
||||
// 最简化的音频设置
|
||||
innerAudioContext.src = audioFilePath.value
|
||||
innerAudioContext.loop = autoLoop.value
|
||||
innerAudioContext.volume = 0.8
|
||||
innerAudioContext.autoplay = false
|
||||
|
||||
// 简化的事件监听
|
||||
innerAudioContext.onPlay(() => {
|
||||
console.log('超声波音频开始播放')
|
||||
toast.success('开始播放配网声波')
|
||||
})
|
||||
|
||||
innerAudioContext.onEnded(() => {
|
||||
console.log('超声波音频播放结束')
|
||||
if (!autoLoop.value) {
|
||||
playing.value = false
|
||||
cleanupAudio()
|
||||
}
|
||||
})
|
||||
|
||||
innerAudioContext.onError((error) => {
|
||||
console.error('音频播放失败:', error)
|
||||
playing.value = false
|
||||
|
||||
let errorMsg = '音频播放失败'
|
||||
if (error.errCode === -99) {
|
||||
errorMsg = '音频资源繁忙，请稍后重试'
|
||||
}
|
||||
else if (error.errCode === 10004) {
|
||||
errorMsg = '音频格式不支持，可能是data URI问题'
|
||||
}
|
||||
else if (error.errCode === 10003) {
|
||||
errorMsg = '音频文件错误'
|
||||
}
|
||||
|
||||
toast.error(errorMsg)
|
||||
|
||||
cleanupAudio()
|
||||
})
|
||||
|
||||
innerAudioContext.onStop(() => {
|
||||
console.log('音频播放停止')
|
||||
playing.value = false
|
||||
})
|
||||
|
||||
// 延迟播放
|
||||
setTimeout(() => {
|
||||
if (audioContext.value) {
|
||||
console.log('尝试播放音频，src长度:', audioFilePath.value.length)
|
||||
audioContext.value.play()
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
catch (error) {
|
||||
console.error('播放音频异常:', error)
|
||||
playing.value = false
|
||||
await cleanupAudio()
|
||||
toast.error(`播放失败: ${error.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
// 清理音频资源
|
||||
async function cleanupAudio() {
|
||||
if (audioContext.value) {
|
||||
try {
|
||||
audioContext.value.pause()
|
||||
audioContext.value.destroy()
|
||||
console.log('清理音频上下文')
|
||||
}
|
||||
catch (e) {
|
||||
console.log('清理音频上下文失败:', e)
|
||||
}
|
||||
finally {
|
||||
audioContext.value = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 停止播放
|
||||
async function stopAudio() {
|
||||
playing.value = false
|
||||
await cleanupAudio()
|
||||
|
||||
console.log('停止播放超声波音频')
|
||||
toast.success('已停止播放')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="ultrasonic-config">
|
||||
<!-- 选中的网络信息 -->
|
||||
<view v-if="props.selectedNetwork" class="selected-network">
|
||||
<view class="network-info">
|
||||
<view class="network-name">
|
||||
选中网络: {{ props.selectedNetwork.ssid }}
|
||||
</view>
|
||||
<view class="network-details">
|
||||
<text class="network-signal">
|
||||
信号: {{ props.selectedNetwork.rssi }}dBm
|
||||
</text>
|
||||
<text class="network-security">
|
||||
{{ props.selectedNetwork.authmode === 0 ? '开放网络' : '加密网络' }}
|
||||
</text>
|
||||
</view>
|
||||
<view v-if="props.password" class="network-password">
|
||||
密码: {{ '*'.repeat(props.password.length) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 超声波配网操作 -->
|
||||
<view class="submit-section">
|
||||
<wd-button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
:loading="generating"
|
||||
:disabled="!canGenerate"
|
||||
@click="generateAndPlay"
|
||||
>
|
||||
{{ generating ? '生成中...' : '🎵 生成并播放声波' }}
|
||||
</wd-button>
|
||||
|
||||
<wd-button
|
||||
v-if="audioGenerated"
|
||||
type="success"
|
||||
size="large"
|
||||
block
|
||||
:loading="playing"
|
||||
@click="playAudio"
|
||||
>
|
||||
{{ playing ? '播放中...' : '🔊 播放声波' }}
|
||||
</wd-button>
|
||||
|
||||
<wd-button
|
||||
v-if="playing"
|
||||
type="warning"
|
||||
size="large"
|
||||
block
|
||||
@click="stopAudio"
|
||||
>
|
||||
⏹️ 停止播放
|
||||
</wd-button>
|
||||
</view>
|
||||
|
||||
<!-- 音频控制选项 -->
|
||||
<view v-if="audioGenerated" class="audio-options">
|
||||
<view class="option-item">
|
||||
<wd-checkbox v-model="autoLoop">
|
||||
自动循环播放声波
|
||||
</wd-checkbox>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 音频播放器 -->
|
||||
<view v-if="audioGenerated" class="audio-player">
|
||||
<view class="player-info">
|
||||
<text class="audio-title">
|
||||
配网音频文件
|
||||
</text>
|
||||
<text class="audio-duration">
|
||||
时长: {{ audioLengthText }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 使用说明 -->
|
||||
<view class="help-section">
|
||||
<view class="help-title">
|
||||
超声波配网说明
|
||||
</view>
|
||||
<view class="help-content">
|
||||
<text class="help-item">
|
||||
1. 确保已选择WiFi网络并输入密码
|
||||
</text>
|
||||
<text class="help-item">
|
||||
2. 点击生成并播放声波，系统会将配网信息编码为音频
|
||||
</text>
|
||||
<text class="help-item">
|
||||
3. 将手机靠近xiaozhi设备（距离1-2米）
|
||||
</text>
|
||||
<text class="help-item">
|
||||
4. 音频播放时，xiaozhi会接收并解码配网信息
|
||||
</text>
|
||||
<text class="help-item">
|
||||
5. 配网成功后设备会自动连接WiFi网络
|
||||
</text>
|
||||
<text class="help-tip">
|
||||
使用AFSK调制技术，通过1800Hz和1500Hz频率传输数据
|
||||
</text>
|
||||
<text class="help-tip">
|
||||
请确保手机音量适中，避免环境噪音干扰
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ultrasonic-config {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.selected-network {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.network-info {
|
||||
padding: 24rpx;
|
||||
background-color: #f0f6ff;
|
||||
border: 1rpx solid #336cff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.network-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #232338;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.network-details {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.network-signal,
|
||||
.network-security {
|
||||
font-size: 24rpx;
|
||||
color: #65686f;
|
||||
}
|
||||
|
||||
.network-password {
|
||||
font-size: 24rpx;
|
||||
color: #65686f;
|
||||
}
|
||||
|
||||
.submit-section {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.submit-section .wd-button {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.submit-section .wd-button:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.audio-options {
|
||||
margin-bottom: 32rpx;
|
||||
padding: 24rpx;
|
||||
background-color: #fbfbfb;
|
||||
border-radius: 16rpx;
|
||||
border: 1rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.audio-player {
|
||||
margin-bottom: 32rpx;
|
||||
padding: 24rpx;
|
||||
background-color: #f0f6ff;
|
||||
border: 1rpx solid #336cff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.player-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.audio-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #232338;
|
||||
}
|
||||
|
||||
.audio-duration {
|
||||
font-size: 24rpx;
|
||||
color: #65686f;
|
||||
}
|
||||
|
||||
.help-section {
|
||||
padding: 32rpx 24rpx;
|
||||
background-color: #fbfbfb;
|
||||
border-radius: 16rpx;
|
||||
border: 1rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
.help-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #232338;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.help-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.help-item {
|
||||
font-size: 24rpx;
|
||||
color: #65686f;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.help-tip {
|
||||
font-size: 24rpx;
|
||||
color: #336cff;
|
||||
font-weight: 500;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,230 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useToast } from 'wot-design-uni'
|
||||
|
||||
// 类型定义
|
||||
interface WiFiNetwork {
|
||||
ssid: string
|
||||
rssi: number
|
||||
authmode: number
|
||||
channel: number
|
||||
}
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
selectedNetwork: WiFiNetwork | null
|
||||
password: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// Toast 实例
|
||||
const toast = useToast()
|
||||
|
||||
// 响应式数据
|
||||
const configuring = ref(false)
|
||||
|
||||
// 计算属性
|
||||
const canSubmit = computed(() => {
|
||||
if (!props.selectedNetwork)
|
||||
return false
|
||||
if (props.selectedNetwork.authmode > 0 && !props.password)
|
||||
return false
|
||||
return true
|
||||
})
|
||||
|
||||
// ESP32连接检查
|
||||
async function checkESP32Connection() {
|
||||
try {
|
||||
const response = await uni.request({
|
||||
url: 'http://192.168.4.1/scan',
|
||||
method: 'GET',
|
||||
timeout: 3000,
|
||||
})
|
||||
return response.statusCode === 200
|
||||
}
|
||||
catch (error) {
|
||||
console.log('ESP32连接检查失败:', error)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 提交配网
|
||||
async function submitConfig() {
|
||||
if (!props.selectedNetwork)
|
||||
return
|
||||
|
||||
// 检查ESP32连接
|
||||
const connected = await checkESP32Connection()
|
||||
if (!connected) {
|
||||
toast.error('请先连接xiaozhi热点')
|
||||
return
|
||||
}
|
||||
|
||||
configuring.value = true
|
||||
console.log('开始WiFi配网:', props.selectedNetwork.ssid)
|
||||
|
||||
try {
|
||||
const response = await uni.request({
|
||||
url: 'http://192.168.4.1/submit',
|
||||
method: 'POST',
|
||||
header: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
data: {
|
||||
ssid: props.selectedNetwork.ssid,
|
||||
password: props.selectedNetwork.authmode > 0 ? props.password : '',
|
||||
},
|
||||
timeout: 15000,
|
||||
})
|
||||
|
||||
console.log('WiFi配网响应:', response)
|
||||
|
||||
if (response.statusCode === 200 && (response.data as any)?.success) {
|
||||
toast.success(`配网成功！设备将连接到 ${props.selectedNetwork.ssid}，设备会自动重启。请断开xiaozhi热点连接。`)
|
||||
}
|
||||
else {
|
||||
const errorMsg = (response.data as any)?.error || '配网失败'
|
||||
toast.error(errorMsg)
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('WiFi配网失败:', error)
|
||||
toast.error('配网失败，请检查网络连接')
|
||||
}
|
||||
finally {
|
||||
configuring.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="wifi-config">
|
||||
<!-- 选中的网络信息 -->
|
||||
<view v-if="props.selectedNetwork" class="selected-network">
|
||||
<view class="network-info">
|
||||
<view class="network-name">
|
||||
选中网络: {{ props.selectedNetwork.ssid }}
|
||||
</view>
|
||||
<view class="network-details">
|
||||
<text class="network-signal">
|
||||
信号: {{ props.selectedNetwork.rssi }}dBm
|
||||
</text>
|
||||
<text class="network-security">
|
||||
{{ props.selectedNetwork.authmode === 0 ? '开放网络' : '加密网络' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 配网按钮 -->
|
||||
<view class="submit-section">
|
||||
<wd-button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
:loading="configuring"
|
||||
:disabled="!canSubmit"
|
||||
@click="submitConfig"
|
||||
>
|
||||
{{ configuring ? '配网中...' : '开始WiFi配网' }}
|
||||
</wd-button>
|
||||
</view>
|
||||
|
||||
<!-- 使用说明 -->
|
||||
<view class="help-section">
|
||||
<view class="help-title">
|
||||
WiFi配网说明
|
||||
</view>
|
||||
<view class="help-content">
|
||||
<text class="help-item">
|
||||
1. 手机连接xiaozhi热点 (xiaozhi-XXXXXX)
|
||||
</text>
|
||||
<text class="help-item">
|
||||
2. 选择要配网的目标WiFi网络
|
||||
</text>
|
||||
<text class="help-item">
|
||||
3. 输入WiFi密码（如果需要）
|
||||
</text>
|
||||
<text class="help-item">
|
||||
4. 点击开始配网，等待设备连接
|
||||
</text>
|
||||
<text class="help-tip">
|
||||
配网成功后设备会自动重启并连接目标WiFi
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.wifi-config {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.selected-network {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.network-info {
|
||||
padding: 24rpx;
|
||||
background-color: #f0f6ff;
|
||||
border: 1rpx solid #336cff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.network-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #232338;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.network-details {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.network-signal,
|
||||
.network-security {
|
||||
font-size: 24rpx;
|
||||
color: #65686f;
|
||||
}
|
||||
|
||||
.submit-section {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.help-section {
|
||||
padding: 32rpx 24rpx;
|
||||
background-color: #fbfbfb;
|
||||
border-radius: 16rpx;
|
||||
border: 1rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
.help-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #232338;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.help-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.help-item {
|
||||
font-size: 24rpx;
|
||||
color: #65686f;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.help-tip {
|
||||
font-size: 24rpx;
|
||||
color: #336cff;
|
||||
font-weight: 500;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,556 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, defineEmits, defineExpose, onMounted, ref } from 'vue'
|
||||
import { useToast } from 'wot-design-uni'
|
||||
|
||||
// 类型定义
|
||||
interface WiFiNetwork {
|
||||
ssid: string
|
||||
rssi: number
|
||||
authmode: number
|
||||
channel: number
|
||||
}
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
autoConnect?: boolean // 是否自动检测ESP32连接
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
autoConnect: true,
|
||||
})
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
'network-selected': [network: WiFiNetwork | null, password: string]
|
||||
'connection-status': [connected: boolean]
|
||||
}>()
|
||||
|
||||
// Toast 实例
|
||||
const toast = useToast()
|
||||
|
||||
// 响应式数据
|
||||
const isConnectedToESP32 = ref(false)
|
||||
const checkingConnection = ref(false)
|
||||
const scanning = ref(false)
|
||||
const wifiNetworks = ref<WiFiNetwork[]>([])
|
||||
const selectedNetwork = ref<WiFiNetwork | null>(null)
|
||||
const password = ref('')
|
||||
const selectorExpanded = ref(false)
|
||||
|
||||
// 计算属性
|
||||
const networkDisplayText = computed(() => {
|
||||
if (!selectedNetwork.value)
|
||||
return '请选择WiFi网络'
|
||||
return selectedNetwork.value.ssid
|
||||
})
|
||||
|
||||
// 检查xiaozhi连接状态
|
||||
async function checkESP32Connection() {
|
||||
checkingConnection.value = true
|
||||
try {
|
||||
const response = await uni.request({
|
||||
url: 'http://192.168.4.1/scan',
|
||||
method: 'GET',
|
||||
timeout: 3000,
|
||||
})
|
||||
isConnectedToESP32.value = response.statusCode === 200
|
||||
emit('connection-status', isConnectedToESP32.value)
|
||||
console.log('xiaozhi连接状态:', isConnectedToESP32.value)
|
||||
}
|
||||
catch (error) {
|
||||
isConnectedToESP32.value = false
|
||||
emit('connection-status', false)
|
||||
console.log('xiaozhi连接检查失败:', error)
|
||||
}
|
||||
finally {
|
||||
checkingConnection.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 扫描WiFi网络
|
||||
async function scanWifi() {
|
||||
if (!isConnectedToESP32.value) {
|
||||
toast.error('请先连接xiaozhi热点')
|
||||
return
|
||||
}
|
||||
|
||||
scanning.value = true
|
||||
console.log('开始扫描WiFi网络')
|
||||
|
||||
try {
|
||||
const response = await uni.request({
|
||||
url: 'http://192.168.4.1/scan',
|
||||
method: 'GET',
|
||||
timeout: 10000,
|
||||
})
|
||||
|
||||
console.log('WiFi扫描响应:', response)
|
||||
|
||||
if (response.statusCode === 200 && response.data) {
|
||||
const data = response.data as any
|
||||
if (data.success && Array.isArray(data.networks)) {
|
||||
wifiNetworks.value = data.networks
|
||||
console.log(`扫描成功，发现 ${data.networks.length} 个网络`)
|
||||
}
|
||||
else if (Array.isArray(response.data)) {
|
||||
// 兼容旧格式
|
||||
wifiNetworks.value = response.data.map((item: any) => ({
|
||||
ssid: item.ssid,
|
||||
rssi: item.rssi,
|
||||
authmode: item.authmode,
|
||||
channel: item.channel || 0,
|
||||
}))
|
||||
}
|
||||
else {
|
||||
throw new TypeError('扫描接口返回格式异常')
|
||||
}
|
||||
}
|
||||
else {
|
||||
throw new Error(`HTTP ${response.statusCode}`)
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('WiFi扫描失败:', error)
|
||||
toast.error('扫描失败，请检查xiaozhi连接')
|
||||
}
|
||||
finally {
|
||||
scanning.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 显示网络选择器
|
||||
async function showNetworkSelector() {
|
||||
// 实时检测xiaozhi连接状态
|
||||
await checkESP32Connection()
|
||||
|
||||
if (!isConnectedToESP32.value) {
|
||||
toast.error('请先连接xiaozhi热点')
|
||||
return
|
||||
}
|
||||
|
||||
selectorExpanded.value = true
|
||||
|
||||
// 如果还没有网络列表，自动扫描
|
||||
if (wifiNetworks.value.length === 0) {
|
||||
scanWifi()
|
||||
}
|
||||
}
|
||||
|
||||
// 选择网络
|
||||
function selectNetwork(network: WiFiNetwork) {
|
||||
selectedNetwork.value = network
|
||||
password.value = ''
|
||||
selectorExpanded.value = false
|
||||
console.log('选择网络:', network.ssid)
|
||||
|
||||
// 通知父组件
|
||||
emit('network-selected', network, '')
|
||||
}
|
||||
|
||||
// 密码变化时通知父组件
|
||||
function onPasswordChange() {
|
||||
emit('network-selected', selectedNetwork.value, password.value)
|
||||
}
|
||||
|
||||
// 获取当前选择的网络和密码
|
||||
function getSelectedNetworkInfo() {
|
||||
return {
|
||||
network: selectedNetwork.value,
|
||||
password: password.value,
|
||||
}
|
||||
}
|
||||
|
||||
// 重置选择
|
||||
function reset() {
|
||||
selectedNetwork.value = null
|
||||
password.value = ''
|
||||
wifiNetworks.value = []
|
||||
selectorExpanded.value = false
|
||||
emit('network-selected', null, '')
|
||||
}
|
||||
|
||||
// 获取信号强度描述
|
||||
function getSignalStrength(rssi: number): string {
|
||||
if (rssi >= -50)
|
||||
return '信号强'
|
||||
if (rssi >= -60)
|
||||
return '信号良好'
|
||||
if (rssi >= -70)
|
||||
return '信号一般'
|
||||
return '信号弱'
|
||||
}
|
||||
|
||||
// 获取信号强度颜色
|
||||
function getSignalColor(rssi: number): string {
|
||||
if (rssi >= -50)
|
||||
return '#52c41a'
|
||||
if (rssi >= -60)
|
||||
return '#73d13d'
|
||||
if (rssi >= -70)
|
||||
return '#faad14'
|
||||
return '#ff4d4f'
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
checkESP32Connection,
|
||||
scanWifi,
|
||||
getSelectedNetworkInfo,
|
||||
reset,
|
||||
})
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
if (props.autoConnect) {
|
||||
checkESP32Connection()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="wifi-selector">
|
||||
<!-- Xiaozhi连接状态 -->
|
||||
<view v-if="props.autoConnect" class="connection-status">
|
||||
<view v-if="!isConnectedToESP32" class="status-warning">
|
||||
<view class="status-content">
|
||||
<text class="warning-text">
|
||||
请先连接xiaozhi热点 (xiaozhi-XXXXXX)
|
||||
</text>
|
||||
<wd-button
|
||||
size="small"
|
||||
type="primary"
|
||||
:loading="checkingConnection"
|
||||
@click="checkESP32Connection"
|
||||
>
|
||||
{{ checkingConnection ? '检测中...' : '重新检测' }}
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="status-success">
|
||||
<view class="status-content">
|
||||
<text class="success-text">
|
||||
已连接xiaozhi热点
|
||||
</text>
|
||||
<wd-button
|
||||
size="small"
|
||||
:loading="checkingConnection"
|
||||
@click="checkESP32Connection"
|
||||
>
|
||||
{{ checkingConnection ? '检测中...' : '刷新状态' }}
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- WiFi网络选择器 -->
|
||||
<view class="network-selector">
|
||||
<view class="selector-item" @click="showNetworkSelector">
|
||||
<text class="selector-label">
|
||||
WiFi网络
|
||||
</text>
|
||||
<text class="selector-value">
|
||||
{{ networkDisplayText }}
|
||||
</text>
|
||||
<wd-icon name="arrow-right" custom-class="arrow-icon" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 展开的网络列表 -->
|
||||
<view v-if="selectorExpanded" class="network-list-overlay">
|
||||
<view class="network-list-container">
|
||||
<view class="list-header">
|
||||
<text class="list-title">
|
||||
选择WiFi网络
|
||||
</text>
|
||||
<view class="list-actions">
|
||||
<wd-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:loading="scanning"
|
||||
@click="scanWifi"
|
||||
>
|
||||
{{ scanning ? '扫描中...' : '刷新扫描' }}
|
||||
</wd-button>
|
||||
<wd-button
|
||||
size="small"
|
||||
@click="selectorExpanded = false"
|
||||
>
|
||||
取消
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="network-list">
|
||||
<view v-if="wifiNetworks.length === 0 && !scanning" class="empty-state">
|
||||
<text class="empty-text">
|
||||
暂无WiFi网络
|
||||
</text>
|
||||
<text class="empty-tip">
|
||||
请点击刷新扫描
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view v-else class="wifi-list">
|
||||
<view
|
||||
v-for="network in wifiNetworks"
|
||||
:key="network.ssid"
|
||||
class="wifi-item"
|
||||
@click="selectNetwork(network)"
|
||||
>
|
||||
<view class="wifi-info">
|
||||
<view class="wifi-name">
|
||||
{{ network.ssid }}
|
||||
</view>
|
||||
<view class="wifi-details">
|
||||
<text class="wifi-signal">
|
||||
信号: {{ network.rssi }}dBm
|
||||
</text>
|
||||
<text class="wifi-channel">
|
||||
频道: {{ network.channel }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wifi-security">
|
||||
<text class="security-icon">
|
||||
{{ network.authmode === 0 ? '开放' : '加密' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 密码输入 -->
|
||||
<view v-if="selectedNetwork && selectedNetwork.authmode > 0" class="password-section">
|
||||
<view class="password-item">
|
||||
<text class="password-label">
|
||||
网络密码
|
||||
</text>
|
||||
<wd-input
|
||||
v-model="password"
|
||||
placeholder="请输入WiFi密码"
|
||||
show-password
|
||||
clearable
|
||||
@input="onPasswordChange"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.wifi-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.connection-status {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
padding: 24rpx;
|
||||
background-color: #fff3cd;
|
||||
border: 1rpx solid #ffeaa7;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
padding: 24rpx;
|
||||
background-color: #d4edda;
|
||||
border: 1rpx solid #c3e6cb;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.status-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
color: #856404;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.success-text {
|
||||
color: #155724;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.network-selector {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.selector-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx;
|
||||
background: #f5f7fb;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid #eeeeee;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.selector-item:active {
|
||||
background: #eef3ff;
|
||||
border-color: #336cff;
|
||||
}
|
||||
|
||||
.selector-label {
|
||||
font-size: 28rpx;
|
||||
color: #232338;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.selector-value {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 26rpx;
|
||||
color: #65686f;
|
||||
margin: 0 16rpx;
|
||||
}
|
||||
|
||||
:deep(.arrow-icon) {
|
||||
font-size: 20rpx;
|
||||
color: #9d9ea3;
|
||||
}
|
||||
|
||||
.network-list-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.network-list-container {
|
||||
width: 100%;
|
||||
max-height: 70vh;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
padding: 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #232338;
|
||||
}
|
||||
|
||||
.list-actions {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.network-list {
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 80rpx 20rpx;
|
||||
background-color: #fbfbfb;
|
||||
border-radius: 16rpx;
|
||||
border: 1rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
color: #65686f;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
font-size: 24rpx;
|
||||
color: #9d9ea3;
|
||||
}
|
||||
|
||||
.wifi-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.wifi-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 32rpx 24rpx;
|
||||
background-color: #fbfbfb;
|
||||
border: 2rpx solid #eeeeee;
|
||||
border-radius: 16rpx;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wifi-item:active {
|
||||
transform: scale(0.98);
|
||||
background-color: #f0f6ff;
|
||||
border-color: #336cff;
|
||||
}
|
||||
|
||||
.wifi-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.wifi-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #232338;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.wifi-details {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.wifi-signal,
|
||||
.wifi-channel {
|
||||
font-size: 24rpx;
|
||||
color: #65686f;
|
||||
}
|
||||
|
||||
.security-icon {
|
||||
font-size: 24rpx;
|
||||
color: #65686f;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.password-section {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.password-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.password-label {
|
||||
font-size: 28rpx;
|
||||
color: #232338;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,154 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import UltrasonicConfig from './components/ultrasonic-config.vue'
|
||||
import WifiConfig from './components/wifi-config.vue'
|
||||
import WifiSelector from './components/wifi-selector.vue'
|
||||
|
||||
// 类型定义
|
||||
interface WiFiNetwork {
|
||||
ssid: string
|
||||
rssi: number
|
||||
authmode: number
|
||||
channel: number
|
||||
}
|
||||
|
||||
// 配网类型
|
||||
const configType = ref<'wifi' | 'ultrasonic'>('wifi')
|
||||
|
||||
// 配网模式选择器状态
|
||||
const configTypeSelectorShow = ref(false)
|
||||
|
||||
// WiFi选择器引用
|
||||
const wifiSelectorRef = ref<InstanceType<typeof WifiSelector>>()
|
||||
|
||||
// 选择的WiFi网络信息
|
||||
const selectedWifiInfo = ref<{
|
||||
network: WiFiNetwork | null
|
||||
password: string
|
||||
}>({
|
||||
network: null,
|
||||
password: '',
|
||||
})
|
||||
|
||||
// 配网模式选项
|
||||
const configTypeOptions = [
|
||||
{
|
||||
name: 'WiFi配网',
|
||||
value: 'wifi' as const,
|
||||
},
|
||||
// {
|
||||
// name: '超声波配网',
|
||||
// value: 'ultrasonic' as const,
|
||||
// },
|
||||
]
|
||||
|
||||
// 显示配网模式选择器
|
||||
function showConfigTypeSelector() {
|
||||
configTypeSelectorShow.value = true
|
||||
}
|
||||
|
||||
// 配网模式选择器确认
|
||||
function onConfigTypeConfirm(item: { name: string, value: 'wifi' | 'ultrasonic' }) {
|
||||
configType.value = item.value
|
||||
configTypeSelectorShow.value = false
|
||||
}
|
||||
|
||||
// 配网模式选择器取消
|
||||
function onConfigTypeCancel() {
|
||||
configTypeSelectorShow.value = false
|
||||
}
|
||||
|
||||
// WiFi网络选择事件
|
||||
function onNetworkSelected(network: WiFiNetwork | null, password: string) {
|
||||
selectedWifiInfo.value = { network, password }
|
||||
}
|
||||
|
||||
// ESP32连接状态变化事件
|
||||
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>
|
||||
|
||||
<view class="box-border px-[20rpx]">
|
||||
<!-- 配网方式选择 -->
|
||||
<view class="pb-[20rpx] first:pt-[20rpx]">
|
||||
<text class="text-[36rpx] 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 cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:border-[#336cff] active:bg-[#eef3ff]" @click="showConfigTypeSelector">
|
||||
<text class="text-[28rpx] text-[#232338] font-medium">
|
||||
配网方式
|
||||
</text>
|
||||
<text class="mx-[16rpx] flex-1 text-right text-[26rpx] text-[#65686f]">
|
||||
{{ configType === 'wifi' ? 'WiFi配网' : '超声波配网' }}
|
||||
</text>
|
||||
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- WiFi网络选择 -->
|
||||
<view class="pb-[20rpx]">
|
||||
<text class="text-[36rpx] 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);">
|
||||
<wifi-selector
|
||||
ref="wifiSelectorRef"
|
||||
@network-selected="onNetworkSelected"
|
||||
@connection-status="onConnectionStatusChange"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 配网操作 -->
|
||||
<view v-if="selectedWifiInfo.network" class="flex-1">
|
||||
<!-- WiFi配网组件 -->
|
||||
<wifi-config
|
||||
v-if="configType === 'wifi'"
|
||||
:selected-network="selectedWifiInfo.network"
|
||||
:password="selectedWifiInfo.password"
|
||||
/>
|
||||
|
||||
<!-- 超声波配网组件 -->
|
||||
<ultrasonic-config
|
||||
v-else-if="configType === 'ultrasonic'"
|
||||
:selected-network="selectedWifiInfo.network"
|
||||
:password="selectedWifiInfo.password"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 配网模式选择器 -->
|
||||
<wd-action-sheet
|
||||
v-model="configTypeSelectorShow"
|
||||
:actions="configTypeOptions.map(item => ({ name: item.name, value: item.value }))"
|
||||
@close="onConfigTypeCancel"
|
||||
@select="({ item }) => onConfigTypeConfirm(item)"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"style": {
|
||||
"navigationBarTitleText": "设备配网",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
@@ -0,0 +1,367 @@
|
||||
<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',
|
||||
})
|
||||
|
||||
// 获取屏幕边界到安全区域距离
|
||||
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 deviceList = ref<Device[]>([])
|
||||
const firmwareTypes = ref<FirmwareType[]>([])
|
||||
const pagingRef = ref()
|
||||
useZPaging(pagingRef)
|
||||
|
||||
// 消息组件
|
||||
const message = useMessage()
|
||||
|
||||
// 智能体管理
|
||||
const agentStore = useAgentStore()
|
||||
const showAgentPicker = ref(false)
|
||||
|
||||
// 获取当前选中的智能体ID
|
||||
const currentAgentId = computed(() => {
|
||||
return agentStore.currentAgentId
|
||||
})
|
||||
|
||||
// 获取智能体选项
|
||||
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() {
|
||||
try {
|
||||
console.log('获取设备列表')
|
||||
|
||||
// 检查是否有当前选中的智能体
|
||||
if (!currentAgentId.value) {
|
||||
console.warn('没有选中的智能体')
|
||||
pagingRef.value.complete([])
|
||||
return
|
||||
}
|
||||
|
||||
const response = await getBindDevices(currentAgentId.value)
|
||||
pagingRef.value.complete(response)
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取设备列表失败:', error)
|
||||
pagingRef.value.complete(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取设备类型名称
|
||||
function getDeviceTypeName(boardKey: string): string {
|
||||
const firmwareType = firmwareTypes.value.find(type => type.key === boardKey)
|
||||
return firmwareType?.name || boardKey
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
function formatTime(timeStr: string) {
|
||||
if (!timeStr)
|
||||
return '从未连接'
|
||||
const date = new Date(timeStr)
|
||||
const now = new Date()
|
||||
const diff = now.getTime() - date.getTime()
|
||||
|
||||
if (diff < 60000)
|
||||
return '刚刚'
|
||||
if (diff < 3600000)
|
||||
return `${Math.floor(diff / 60000)}分钟前`
|
||||
if (diff < 86400000)
|
||||
return `${Math.floor(diff / 3600000)}小时前`
|
||||
if (diff < 604800000)
|
||||
return `${Math.floor(diff / 86400000)}天前`
|
||||
|
||||
return date.toLocaleDateString()
|
||||
}
|
||||
|
||||
// 切换OTA自动更新
|
||||
async function toggleAutoUpdate(device: Device) {
|
||||
try {
|
||||
const newStatus = device.autoUpdate === 1 ? 0 : 1
|
||||
await updateDeviceAutoUpdate(device.id, newStatus)
|
||||
device.autoUpdate = newStatus
|
||||
toast.success(newStatus === 1 ? 'OTA自动升级已开启' : 'OTA自动升级已关闭')
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error('更新设备OTA状态失败:', error)
|
||||
toast.error('操作失败，请重试')
|
||||
}
|
||||
}
|
||||
|
||||
// 解绑设备
|
||||
async function handleUnbindDevice(device: Device) {
|
||||
try {
|
||||
await unbindDevice(device.id)
|
||||
pagingRef.value.reload()
|
||||
toast.success('设备已解绑')
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error('解绑设备失败:', error)
|
||||
toast.error('解绑失败，请重试')
|
||||
}
|
||||
}
|
||||
|
||||
// 确认解绑设备
|
||||
function confirmUnbindDevice(device: Device) {
|
||||
message.confirm({
|
||||
title: '解绑设备',
|
||||
msg: `确定要解绑设备 "${device.macAddress}" 吗？`,
|
||||
confirmButtonText: '确定解绑',
|
||||
cancelButtonText: '取消',
|
||||
}).then(() => {
|
||||
handleUnbindDevice(device)
|
||||
}).catch(() => {
|
||||
// 用户取消
|
||||
})
|
||||
}
|
||||
|
||||
// 绑定新设备
|
||||
async function handleBindDevice(code: string) {
|
||||
try {
|
||||
if (!currentAgentId.value) {
|
||||
toast.error('请先选择智能体')
|
||||
return
|
||||
}
|
||||
|
||||
await bindDevice(currentAgentId.value, code.trim())
|
||||
pagingRef.value.reload()
|
||||
toast.success('设备绑定成功！')
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error('绑定设备失败:', error)
|
||||
const errorMessage = error?.message || '绑定失败，请检查验证码是否正确'
|
||||
toast.error(errorMessage)
|
||||
}
|
||||
}
|
||||
|
||||
// 打开绑定设备对话框
|
||||
function openBindDialog() {
|
||||
message
|
||||
.prompt({
|
||||
title: '绑定设备',
|
||||
inputPlaceholder: '请输入设备验证码',
|
||||
inputValue: '',
|
||||
inputPattern: /^\d{6}$/,
|
||||
confirmButtonText: '立即绑定',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
.then(async (result: any) => {
|
||||
if (result.value && String(result.value).trim()) {
|
||||
await handleBindDevice(String(result.value).trim())
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 用户取消操作
|
||||
})
|
||||
}
|
||||
|
||||
// 获取设备类型列表
|
||||
async function loadFirmwareTypes() {
|
||||
try {
|
||||
const response = await getFirmwareTypes()
|
||||
firmwareTypes.value = response
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取设备类型失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// 确保智能体列表已加载
|
||||
if (!agentStore.isLoaded) {
|
||||
await agentStore.loadAgentList()
|
||||
}
|
||||
|
||||
loadFirmwareTypes()
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (pagingRef.value) {
|
||||
pagingRef.value.reload()
|
||||
}
|
||||
})
|
||||
</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="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="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>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
</wd-swipe-action>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 自定义空状态 -->
|
||||
<template #empty>
|
||||
<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">
|
||||
暂无设备
|
||||
</text>
|
||||
<text class="text-[26rpx] text-[#999999] leading-[1.5]">
|
||||
点击右下角 + 号绑定您的第一个设备
|
||||
</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 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>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
:deep(.z-paging-content) {
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
:deep(.wd-swipe-action) {
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
border: 1rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
:deep(.wd-icon) {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,599 @@
|
||||
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||||
<route lang="jsonc" type="home">
|
||||
{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
// 'custom' 表示开启自定义导航栏，默认 'default'
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Agent } from '@/api/agent/types'
|
||||
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({
|
||||
name: 'Home',
|
||||
})
|
||||
|
||||
// 获取屏幕边界到安全区域距离
|
||||
let safeAreaInsets: any
|
||||
let systemInfo: any
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序使用新的API
|
||||
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
|
||||
// 其他平台继续使用uni API
|
||||
systemInfo = uni.getSystemInfoSync()
|
||||
safeAreaInsets = systemInfo.safeAreaInsets
|
||||
// #endif
|
||||
|
||||
// 智能体数据
|
||||
const agentStore = useAgentStore()
|
||||
const agentList = ref<Agent[]>([])
|
||||
const pagingRef = ref()
|
||||
useZPaging(pagingRef)
|
||||
// 消息组件
|
||||
const message = useMessage()
|
||||
|
||||
// z-paging查询列表数据
|
||||
async function queryList(pageNo: number, pageSize: number) {
|
||||
try {
|
||||
console.log('z-paging获取智能体列表')
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
// 直接返回全部数据，不需要分页处理
|
||||
pagingRef.value.complete(response)
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取智能体列表失败:', error)
|
||||
// 告知z-paging数据加载失败
|
||||
pagingRef.value.complete(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 创建智能体
|
||||
async function handleCreateAgent(agentName: string) {
|
||||
try {
|
||||
await createAgent({ agentName: agentName.trim() })
|
||||
// 创建成功后刷新列表
|
||||
pagingRef.value.reload()
|
||||
toast.success(`智能体"${agentName}"创建成功！`)
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error('创建智能体失败:', error)
|
||||
const errorMessage = error?.message || '创建失败，请重试'
|
||||
toast.error(errorMessage)
|
||||
}
|
||||
}
|
||||
|
||||
// 删除智能体
|
||||
async function handleDeleteAgent(agent: Agent) {
|
||||
try {
|
||||
await deleteAgent(agent.id)
|
||||
// 删除成功后刷新列表
|
||||
pagingRef.value.reload()
|
||||
toast.success(`智能体"${agent.agentName}"已删除`)
|
||||
}
|
||||
catch (error: any) {
|
||||
console.error('删除智能体失败:', error)
|
||||
const errorMessage = error?.message || '删除失败，请重试'
|
||||
toast.error(errorMessage)
|
||||
}
|
||||
}
|
||||
|
||||
// 进入编辑页面
|
||||
function goToEditAgent(agent: Agent) {
|
||||
// 设置当前编辑的智能体
|
||||
agentStore.setCurrentAgent(agent.id)
|
||||
uni.navigateTo({
|
||||
url: `/pages/agent/edit?id=${agent.id}`,
|
||||
})
|
||||
}
|
||||
|
||||
// 点击卡片进入编辑
|
||||
function handleCardClick(agent: Agent) {
|
||||
goToEditAgent(agent)
|
||||
}
|
||||
|
||||
// 打开创建对话框
|
||||
function openCreateDialog() {
|
||||
message
|
||||
.prompt({
|
||||
title: '创建智能体',
|
||||
msg: '',
|
||||
inputPlaceholder: '例如：客服助手、语音助理、知识问答',
|
||||
inputValue: '',
|
||||
inputPattern: /^[\u4E00-\u9FA5a-z0-9\s]{1,50}$/i,
|
||||
confirmButtonText: '立即创建',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
.then(async (result: any) => {
|
||||
if (result.value && String(result.value).trim()) {
|
||||
await handleCreateAgent(String(result.value).trim())
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 用户取消操作
|
||||
})
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
function formatTime(timeStr: string) {
|
||||
const date = new Date(timeStr)
|
||||
const now = new Date()
|
||||
const diff = now.getTime() - date.getTime()
|
||||
|
||||
if (diff < 60000)
|
||||
return '刚刚'
|
||||
if (diff < 3600000)
|
||||
return `${Math.floor(diff / 60000)}分钟前`
|
||||
if (diff < 86400000)
|
||||
return `${Math.floor(diff / 3600000)}小时前`
|
||||
return `${Math.floor(diff / 86400000)}天前`
|
||||
}
|
||||
|
||||
function goToDeviceConfig() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/device-config/index',
|
||||
})
|
||||
}
|
||||
|
||||
// 页面显示时刷新列表
|
||||
onShow(() => {
|
||||
console.log('首页 onShow，刷新智能体列表')
|
||||
if (pagingRef.value) {
|
||||
pagingRef.value.reload()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<z-paging
|
||||
ref="pagingRef" v-model="agentList" :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="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">
|
||||
你好，小智
|
||||
</text>
|
||||
<text class="subtitle">
|
||||
让我们度过 <text class="highlight">
|
||||
美好的一天！
|
||||
</text>
|
||||
</text>
|
||||
<text class="english-subtitle">
|
||||
Hello, Let's have a wonderful day!
|
||||
</text>
|
||||
</view>
|
||||
<view class="wave-decoration">
|
||||
<!-- 添加波浪装饰 -->
|
||||
<view class="wave" />
|
||||
<view class="wave wave-2" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 内容区域开始标识 -->
|
||||
<view class="content-section-header" />
|
||||
</template>
|
||||
|
||||
<!-- 智能体卡片列表 -->
|
||||
<view class="agent-list">
|
||||
<view v-for="agent in agentList" :key="agent.id" class="agent-item">
|
||||
<wd-swipe-action>
|
||||
<view class="simple-card" @click="handleCardClick(agent)">
|
||||
<view class="card-content">
|
||||
<view class="card-main">
|
||||
<view class="agent-title">
|
||||
<text class="agent-name">
|
||||
{{ agent.agentName }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="model-info">
|
||||
<text class="model-text">
|
||||
语言模型： {{ agent.llmModelName }}
|
||||
</text>
|
||||
<text class="model-text">
|
||||
音色模型： {{ agent.ttsModelName }} ({{ agent.ttsVoiceName }})
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="stats-row">
|
||||
<view class="stat-chip">
|
||||
<wd-icon name="phone" custom-class="chip-icon" />
|
||||
<text class="chip-text">
|
||||
设备管理({{ agent.deviceCount }})
|
||||
</text>
|
||||
</view>
|
||||
<view v-if="agent.lastConnectedAt" class="stat-chip">
|
||||
<wd-icon name="time" custom-class="chip-icon" />
|
||||
<text class="chip-text">
|
||||
最近对话：{{ formatTime(agent.lastConnectedAt) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<wd-icon name="arrow-right" custom-class="arrow-icon" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template #right>
|
||||
<view class="swipe-actions">
|
||||
<view class="action-btn delete-btn" @click.stop="handleDeleteAgent(agent)">
|
||||
<wd-icon name="delete" />
|
||||
<text>删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-swipe-action>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 自定义空状态 -->
|
||||
<template #empty>
|
||||
<view class="empty-state">
|
||||
<wd-icon name="robot" custom-class="empty-icon" />
|
||||
<text class="empty-text">
|
||||
暂无智能体
|
||||
</text>
|
||||
<text class="empty-desc">
|
||||
点击右下角 + 号创建您的第一个智能体
|
||||
</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- FAB 新增按钮 -->
|
||||
<wd-fab type="primary" icon="add" :draggable="true" :expandable="false" @click="openCreateDialog" />
|
||||
|
||||
<!-- MessageBox 组件 -->
|
||||
<wd-message-box />
|
||||
</z-paging>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.banner-section {
|
||||
background: linear-gradient(145deg, #9ebbfc, #6baaff, #9ebbfc, #f5f8fd);
|
||||
position: relative;
|
||||
padding: 40rpx 40rpx 80rpx 40rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.banner-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
position: absolute;
|
||||
top: -50rpx;
|
||||
right: 0;
|
||||
display: flex;
|
||||
gap: 32rpx;
|
||||
|
||||
.filter-icon,
|
||||
.setting-icon {
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-info {
|
||||
.greeting {
|
||||
display: block;
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
margin-bottom: 16rpx;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin-bottom: 12rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.highlight {
|
||||
color: #ffd700;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.english-subtitle {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.wave-decoration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -100rpx;
|
||||
width: 400rpx;
|
||||
height: 100%;
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
|
||||
.wave {
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
|
||||
&.wave-2 {
|
||||
top: 20%;
|
||||
right: 20%;
|
||||
animation-delay: -3s;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-30rpx) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
// 内容区域开始标识，创建白色背景过渡
|
||||
.content-section-header {
|
||||
background: #ffffff;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
margin-top: -32rpx;
|
||||
height: 32rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// z-paging内容区域样式
|
||||
:deep(.z-paging-content) {
|
||||
background: #ffffff;
|
||||
padding: 0 0 40rpx 0;
|
||||
}
|
||||
|
||||
.agent-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.agent-item {
|
||||
:deep(.wd-swipe-action) {
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
border: 1rpx solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.simple-card {
|
||||
background: #ffffff;
|
||||
padding: 24rpx;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.agent-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.agent-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
}
|
||||
|
||||
.model-info {
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.model-text {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 4rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.stat-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6rpx 12rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid #eaeaea;
|
||||
|
||||
:deep(.chip-icon) {
|
||||
font-size: 20rpx;
|
||||
color: #666666;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.chip-text {
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.arrow-icon) {
|
||||
font-size: 24rpx;
|
||||
color: #c7c7cc;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.swipe-actions {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
.action-btn {
|
||||
width: 120rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.edit-btn {
|
||||
background: #1890ff;
|
||||
|
||||
&:active {
|
||||
background: #096dd9;
|
||||
}
|
||||
}
|
||||
|
||||
&.delete-btn {
|
||||
background: #ff4d4f;
|
||||
|
||||
&:active {
|
||||
background: #d9363e;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.wd-icon) {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 40rpx;
|
||||
text-align: center;
|
||||
|
||||
:deep(.empty-icon) {
|
||||
font-size: 120rpx;
|
||||
color: #d9d9d9;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 16rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
padding: 32rpx;
|
||||
text-align: center;
|
||||
border-top: 1rpx solid #eeeeee;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,777 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "登陆"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { LoginData } from '@/api/auth'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { login } from '@/api/auth'
|
||||
import { useConfigStore } from '@/store'
|
||||
import { toast } from '@/utils/toast'
|
||||
|
||||
// 获取屏幕边界到安全区域距离
|
||||
let safeAreaInsets
|
||||
let systemInfo
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序使用新的API
|
||||
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
|
||||
// 其他平台继续使用uni API
|
||||
systemInfo = uni.getSystemInfoSync()
|
||||
safeAreaInsets = systemInfo.safeAreaInsets
|
||||
// #endif
|
||||
// 表单数据
|
||||
const formData = ref<LoginData>({
|
||||
username: '',
|
||||
password: '',
|
||||
captcha: '',
|
||||
captchaId: '',
|
||||
areaCode: '+86',
|
||||
mobile: '',
|
||||
})
|
||||
|
||||
// 验证码图片
|
||||
const captchaImage = ref('')
|
||||
const loading = ref(false)
|
||||
|
||||
// 登录方式：'username' | 'mobile'
|
||||
const loginType = ref<'username' | 'mobile'>('username')
|
||||
|
||||
// 获取配置store
|
||||
const configStore = useConfigStore()
|
||||
|
||||
// 区号选择相关
|
||||
const showAreaCodeSheet = ref(false)
|
||||
const selectedAreaCode = ref('+86')
|
||||
const selectedAreaName = ref('中国大陆')
|
||||
|
||||
// 计算属性：是否启用手机号登录
|
||||
const enableMobileLogin = computed(() => {
|
||||
return configStore.config.enableMobileRegister
|
||||
})
|
||||
|
||||
// 计算属性：区号列表
|
||||
const areaCodeList = computed(() => {
|
||||
return configStore.config.mobileAreaList || [{ name: '中国大陆', key: '+86' }]
|
||||
})
|
||||
|
||||
// 切换登录方式
|
||||
function toggleLoginType() {
|
||||
loginType.value = loginType.value === 'username' ? 'mobile' : 'username'
|
||||
// 清空输入框
|
||||
formData.value.username = ''
|
||||
formData.value.mobile = ''
|
||||
}
|
||||
|
||||
// 打开区号选择弹窗
|
||||
function openAreaCodeSheet() {
|
||||
showAreaCodeSheet.value = true
|
||||
}
|
||||
|
||||
// 选择区号
|
||||
function selectAreaCode(item: { name: string, key: string }) {
|
||||
selectedAreaCode.value = item.key
|
||||
selectedAreaName.value = item.name
|
||||
formData.value.areaCode = item.key
|
||||
showAreaCodeSheet.value = false
|
||||
}
|
||||
|
||||
// 关闭区号选择弹窗
|
||||
function closeAreaCodeSheet() {
|
||||
showAreaCodeSheet.value = false
|
||||
}
|
||||
|
||||
// 跳转到注册页面
|
||||
function goToRegister() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/register/index',
|
||||
})
|
||||
}
|
||||
|
||||
// 生成UUID
|
||||
function generateUUID() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
||||
const r = Math.random() * 16 | 0
|
||||
const v = c === 'x' ? r : (r & 0x3 | 0x8)
|
||||
return v.toString(16)
|
||||
})
|
||||
}
|
||||
|
||||
// 获取验证码
|
||||
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()}`
|
||||
}
|
||||
|
||||
// 登录
|
||||
async function handleLogin() {
|
||||
// 表单验证
|
||||
if (loginType.value === 'username') {
|
||||
if (!formData.value.username) {
|
||||
toast.warning('请输入用户名')
|
||||
return
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (!formData.value.mobile) {
|
||||
toast.warning('请输入手机号')
|
||||
return
|
||||
}
|
||||
// 手机号格式验证
|
||||
const phoneRegex = /^1[3-9]\d{9}$/
|
||||
if (!phoneRegex.test(formData.value.mobile)) {
|
||||
toast.warning('请输入正确的手机号')
|
||||
return
|
||||
}
|
||||
}
|
||||
if (!formData.value.password) {
|
||||
toast.warning('请输入密码')
|
||||
return
|
||||
}
|
||||
if (!formData.value.captcha) {
|
||||
toast.warning('请输入验证码')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
|
||||
// 构建登录数据
|
||||
const loginData = { ...formData.value }
|
||||
|
||||
// 如果是手机号登录，将区号+手机号拼接到username字段
|
||||
if (loginType.value === 'mobile') {
|
||||
loginData.username = `${selectedAreaCode.value}${formData.value.mobile}`
|
||||
}
|
||||
|
||||
const response = await login(loginData)
|
||||
// 存储token
|
||||
uni.setStorageSync('token', response.token)
|
||||
uni.setStorageSync('expire', response.expire)
|
||||
|
||||
toast.success('登录成功')
|
||||
|
||||
// 跳转到主页
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index',
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
catch (error: any) {
|
||||
// 登录失败重新获取验证码
|
||||
refreshCaptcha()
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载时获取验证码
|
||||
onLoad(() => {
|
||||
refreshCaptcha()
|
||||
})
|
||||
|
||||
// 组件挂载时确保配置已加载
|
||||
onMounted(async () => {
|
||||
if (!configStore.config.name) {
|
||||
try {
|
||||
await configStore.fetchPublicConfig()
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取配置失败:', error)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="app-container box-border h-screen w-full" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
|
||||
<view class="header">
|
||||
<view class="logo-section">
|
||||
<wd-img :width="80" :height="80" round src="/static/logo.png" class="logo" />
|
||||
<text class="welcome-text">
|
||||
欢迎回来
|
||||
</text>
|
||||
<text class="subtitle">
|
||||
请登录您的账户
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-container">
|
||||
<view class="form">
|
||||
<!-- 手机号登录 -->
|
||||
<template v-if="loginType === 'mobile'">
|
||||
<view class="input-group">
|
||||
<view class="input-wrapper mobile-wrapper">
|
||||
<view class="area-code-selector" @click="openAreaCodeSheet">
|
||||
<text class="area-code-text">
|
||||
{{ selectedAreaCode }}
|
||||
</text>
|
||||
<wd-icon name="arrow-down" custom-class="area-code-arrow" />
|
||||
</view>
|
||||
<view class="mobile-input-wrapper">
|
||||
<wd-input
|
||||
v-model="formData.mobile"
|
||||
custom-class="styled-input"
|
||||
no-border
|
||||
placeholder="请输入手机号码"
|
||||
type="number"
|
||||
:maxlength="11"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 用户名登录 -->
|
||||
<template v-else>
|
||||
<view class="input-group">
|
||||
<view class="input-wrapper">
|
||||
<wd-input
|
||||
v-model="formData.username"
|
||||
custom-class="styled-input"
|
||||
no-border
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="input-group">
|
||||
<view class="input-wrapper">
|
||||
<wd-input
|
||||
v-model="formData.password"
|
||||
custom-class="styled-input"
|
||||
no-border
|
||||
placeholder="请输入密码"
|
||||
clearable
|
||||
show-password
|
||||
:maxlength="20"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input-group">
|
||||
<view class="input-wrapper captcha-wrapper">
|
||||
<wd-input
|
||||
v-model="formData.captcha"
|
||||
custom-class="styled-input"
|
||||
no-border
|
||||
placeholder="请输入验证码"
|
||||
:maxlength="6"
|
||||
/>
|
||||
<view class="captcha-image" @click="refreshCaptcha">
|
||||
<image :src="captchaImage" class="captcha-img" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="forgot-password">
|
||||
<text class="forgot-text">
|
||||
忘记密码？
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="login-btn"
|
||||
@click="handleLogin"
|
||||
>
|
||||
{{ loading ? '登录中...' : '登录' }}
|
||||
</view>
|
||||
|
||||
<view class="register-hint">
|
||||
<text class="hint-text">
|
||||
还没有账户？
|
||||
</text>
|
||||
<text class="register-link" @click="goToRegister">
|
||||
立即注册
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 登录方式切换 -->
|
||||
<view v-if="enableMobileLogin" class="login-type-switch">
|
||||
<view class="switch-tabs">
|
||||
<view
|
||||
class="switch-tab"
|
||||
:class="{ active: loginType === 'username' }"
|
||||
@click="toggleLoginType"
|
||||
>
|
||||
<wd-icon name="user" />
|
||||
</view>
|
||||
<view
|
||||
class="switch-tab"
|
||||
:class="{ active: loginType === 'mobile' }"
|
||||
@click="toggleLoginType"
|
||||
>
|
||||
<wd-icon name="phone" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 区号选择弹窗 -->
|
||||
<wd-action-sheet
|
||||
v-model="showAreaCodeSheet"
|
||||
title="选择国家/地区"
|
||||
:close-on-click-modal="true"
|
||||
@close="closeAreaCodeSheet"
|
||||
>
|
||||
<view class="area-code-sheet">
|
||||
<scroll-view scroll-y class="area-code-list">
|
||||
<view
|
||||
v-for="item in areaCodeList"
|
||||
:key="item.key"
|
||||
class="area-code-item"
|
||||
:class="{ selected: selectedAreaCode === item.key }"
|
||||
@click="selectAreaCode(item)"
|
||||
>
|
||||
<view class="area-info">
|
||||
<text class="area-name">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text class="area-code">
|
||||
{{ item.key }}
|
||||
</text>
|
||||
</view>
|
||||
<wd-icon
|
||||
v-if="selectedAreaCode === item.key"
|
||||
name="check"
|
||||
custom-class="check-icon"
|
||||
/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="sheet-footer">
|
||||
<wd-button
|
||||
type="primary"
|
||||
custom-class="confirm-btn"
|
||||
@click="closeAreaCodeSheet"
|
||||
>
|
||||
确认
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</wd-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
background: linear-gradient(145deg, #f5f8fd, #6baaff, #9ebbfc, #f5f8fd);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 100vh;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
flex: 0 0 auto;
|
||||
min-height: 280rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15% 0 40rpx 0;
|
||||
|
||||
.logo-section {
|
||||
text-align: center;
|
||||
|
||||
.logo {
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
display: block;
|
||||
color: #ffffff;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12rpx;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-container {
|
||||
padding: 0 40rpx 40rpx 40rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx 30rpx 30rpx 30rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
||||
max-height: calc(100vh - 350rpx);
|
||||
overflow-y: auto;
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
background: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 16rpx;
|
||||
border: 2rpx solid #e9ecef;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:focus-within {
|
||||
border-color: #667eea;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
&.captcha-wrapper {
|
||||
.captcha-image {
|
||||
margin-left: 20rpx;
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #e9ecef;
|
||||
border: 1rpx solid #ddd;
|
||||
|
||||
.captcha-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.captcha-loading {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mobile-wrapper {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
.area-code-selector {
|
||||
flex: 0 0 160rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 16rpx;
|
||||
border: 2rpx solid #e9ecef;
|
||||
height: 45rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #667eea;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.area-code-text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.area-code-arrow) {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-input-wrapper {
|
||||
flex: 1;
|
||||
background: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 16rpx;
|
||||
border: 2rpx solid #e9ecef;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:focus-within {
|
||||
border-color: #667eea;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.styled-input) {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
|
||||
&::placeholder {
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
text-align: right;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.forgot-text {
|
||||
color: #667eea;
|
||||
font-size: 26rpx;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border: none;
|
||||
border-radius: 16rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
background-color: var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0));
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
&:active {
|
||||
transform: translateY(2rpx);
|
||||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.register-hint {
|
||||
text-align: center;
|
||||
|
||||
.hint-text {
|
||||
color: #666666;
|
||||
font-size: 26rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
color: #667eea;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
// text-decoration: underline;
|
||||
// &:hover {
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.login-type-switch {
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
|
||||
.switch-tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 60rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.switch-tab {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 2rpx solid transparent;
|
||||
|
||||
&.active {
|
||||
background: #667eea;
|
||||
color: #ffffff;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
:deep(.wd-icon) {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-hint {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 区号选择弹窗样式
|
||||
.area-code-sheet {
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
.sheet-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 40rpx 40rpx 20rpx 40rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
.sheet-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
:deep(.close-icon) {
|
||||
font-size: 32rpx;
|
||||
color: #999999;
|
||||
cursor: pointer;
|
||||
padding: 10rpx;
|
||||
|
||||
&:hover {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.area-code-list {
|
||||
max-height: 60vh;
|
||||
padding: 0 40rpx;
|
||||
|
||||
.area-code-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 0;
|
||||
border-bottom: 1rpx solid #f8f9fa;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: rgba(102, 126, 234, 0.05);
|
||||
|
||||
.area-name {
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.area-code {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.area-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.area-name {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.area-code {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.check-icon) {
|
||||
font-size: 32rpx;
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sheet-footer {
|
||||
padding: 30rpx 40rpx 40rpx 40rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
|
||||
:deep(.confirm-btn) {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,877 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "注册"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { register, sendSmsCode } from '@/api/auth'
|
||||
import { useConfigStore } from '@/store'
|
||||
import { toast } from '@/utils/toast'
|
||||
|
||||
// 获取屏幕边界到安全区域距离
|
||||
let safeAreaInsets
|
||||
let systemInfo
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序使用新的API
|
||||
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
|
||||
// 其他平台继续使用uni API
|
||||
systemInfo = uni.getSystemInfoSync()
|
||||
safeAreaInsets = systemInfo.safeAreaInsets
|
||||
// #endif
|
||||
|
||||
// 注册表单数据
|
||||
interface RegisterData {
|
||||
username: string
|
||||
password: string
|
||||
confirmPassword: string
|
||||
captcha: string
|
||||
captchaId: string
|
||||
areaCode: string
|
||||
mobile: string
|
||||
mobileCaptcha: string
|
||||
}
|
||||
|
||||
const formData = ref<RegisterData>({
|
||||
username: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
captcha: '',
|
||||
captchaId: '',
|
||||
areaCode: '+86',
|
||||
mobile: '',
|
||||
mobileCaptcha: '',
|
||||
})
|
||||
|
||||
// 验证码图片
|
||||
const captchaImage = ref('')
|
||||
const loading = ref(false)
|
||||
const smsLoading = ref(false)
|
||||
const smsCountdown = ref(0)
|
||||
|
||||
// 注册方式：'username' | 'mobile'
|
||||
const registerType = ref<'username' | 'mobile'>('username')
|
||||
|
||||
// 获取配置store
|
||||
const configStore = useConfigStore()
|
||||
|
||||
// 区号选择相关
|
||||
const showAreaCodeSheet = ref(false)
|
||||
const selectedAreaCode = ref('+86')
|
||||
const selectedAreaName = ref('中国大陆')
|
||||
|
||||
// 计算属性：是否启用手机号注册
|
||||
const enableMobileRegister = computed(() => {
|
||||
return configStore.config.enableMobileRegister
|
||||
})
|
||||
|
||||
// 计算属性：区号列表
|
||||
const areaCodeList = computed(() => {
|
||||
return configStore.config.mobileAreaList || [{ name: '中国大陆', key: '+86' }]
|
||||
})
|
||||
|
||||
// 切换注册方式
|
||||
function toggleRegisterType() {
|
||||
registerType.value = registerType.value === 'username' ? 'mobile' : 'username'
|
||||
// 清空输入框
|
||||
formData.value.username = ''
|
||||
formData.value.mobile = ''
|
||||
formData.value.mobileCaptcha = ''
|
||||
}
|
||||
|
||||
// 打开区号选择弹窗
|
||||
function openAreaCodeSheet() {
|
||||
showAreaCodeSheet.value = true
|
||||
}
|
||||
|
||||
// 选择区号
|
||||
function selectAreaCode(item: { name: string, key: string }) {
|
||||
selectedAreaCode.value = item.key
|
||||
selectedAreaName.value = item.name
|
||||
formData.value.areaCode = item.key
|
||||
showAreaCodeSheet.value = false
|
||||
}
|
||||
|
||||
// 关闭区号选择弹窗
|
||||
function closeAreaCodeSheet() {
|
||||
showAreaCodeSheet.value = false
|
||||
}
|
||||
|
||||
// 生成UUID
|
||||
function generateUUID() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
||||
const r = (Math.random() * 16) | 0
|
||||
const v = c === 'x' ? r : (r & 0x3) | 0x8
|
||||
return v.toString(16)
|
||||
})
|
||||
}
|
||||
|
||||
// 获取验证码
|
||||
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()}`
|
||||
}
|
||||
|
||||
// 发送短信验证码
|
||||
async function sendSmsVerification() {
|
||||
if (!formData.value.mobile) {
|
||||
toast.warning('请输入手机号')
|
||||
return
|
||||
}
|
||||
if (!formData.value.captcha) {
|
||||
toast.warning('请输入图形验证码')
|
||||
return
|
||||
}
|
||||
|
||||
// 手机号格式验证
|
||||
const phoneRegex = /^1[3-9]\d{9}$/
|
||||
if (!phoneRegex.test(formData.value.mobile)) {
|
||||
toast.warning('请输入正确的手机号')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
smsLoading.value = true
|
||||
await sendSmsCode({
|
||||
phone: `${selectedAreaCode.value}${formData.value.mobile}`,
|
||||
captcha: formData.value.captcha,
|
||||
captchaId: formData.value.captchaId,
|
||||
})
|
||||
|
||||
toast.success('验证码发送成功')
|
||||
|
||||
// 开始倒计时
|
||||
smsCountdown.value = 60
|
||||
const timer = setInterval(() => {
|
||||
smsCountdown.value--
|
||||
if (smsCountdown.value <= 0) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
catch (error: any) {
|
||||
// 发送失败重新获取图形验证码
|
||||
refreshCaptcha()
|
||||
}
|
||||
finally {
|
||||
smsLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 注册
|
||||
async function handleRegister() {
|
||||
// 表单验证
|
||||
if (registerType.value === 'username') {
|
||||
if (!formData.value.username) {
|
||||
toast.warning('请输入用户名')
|
||||
return
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (!formData.value.mobile) {
|
||||
toast.warning('请输入手机号')
|
||||
return
|
||||
}
|
||||
// 手机号格式验证
|
||||
const phoneRegex = /^1[3-9]\d{9}$/
|
||||
if (!phoneRegex.test(formData.value.mobile)) {
|
||||
toast.warning('请输入正确的手机号')
|
||||
return
|
||||
}
|
||||
if (!formData.value.mobileCaptcha) {
|
||||
toast.warning('请输入短信验证码')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if (!formData.value.password) {
|
||||
toast.warning('请输入密码')
|
||||
return
|
||||
}
|
||||
|
||||
if (!formData.value.confirmPassword) {
|
||||
toast.warning('请确认密码')
|
||||
return
|
||||
}
|
||||
|
||||
if (formData.value.password !== formData.value.confirmPassword) {
|
||||
toast.warning('两次输入的密码不一致')
|
||||
return
|
||||
}
|
||||
|
||||
if (!formData.value.captcha) {
|
||||
toast.warning('请输入验证码')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
|
||||
// 构建注册数据
|
||||
const registerData = {
|
||||
username: registerType.value === 'mobile' ? `${selectedAreaCode.value}${formData.value.mobile}` : formData.value.username,
|
||||
password: formData.value.password,
|
||||
confirmPassword: formData.value.confirmPassword,
|
||||
captcha: formData.value.captcha,
|
||||
captchaId: formData.value.captchaId,
|
||||
areaCode: formData.value.areaCode,
|
||||
mobile: formData.value.mobile,
|
||||
mobileCaptcha: formData.value.mobileCaptcha,
|
||||
}
|
||||
|
||||
await register(registerData)
|
||||
toast.success('注册成功')
|
||||
|
||||
// 跳转到登录页
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
}
|
||||
catch (error: any) {
|
||||
// 注册失败重新获取验证码
|
||||
refreshCaptcha()
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 返回登录
|
||||
function goBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
// 页面加载时获取验证码
|
||||
onLoad(() => {
|
||||
refreshCaptcha()
|
||||
})
|
||||
|
||||
// 组件挂载时确保配置已加载
|
||||
onMounted(async () => {
|
||||
if (!configStore.config.name) {
|
||||
try {
|
||||
await configStore.fetchPublicConfig()
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取配置失败:', error)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="app-container box-border h-screen w-full" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
|
||||
<view class="header">
|
||||
<view class="back-button" @click="goBack">
|
||||
<wd-icon name="arrow-left" custom-class="back-icon" />
|
||||
</view>
|
||||
<view class="logo-section">
|
||||
<wd-img :width="80" :height="80" round src="/static/logo.png" class="logo" />
|
||||
<text class="welcome-text">
|
||||
欢迎注册
|
||||
</text>
|
||||
<text class="subtitle">
|
||||
创建您的新账户
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-container">
|
||||
<view class="form">
|
||||
<!-- 手机号注册 -->
|
||||
<template v-if="registerType === 'mobile'">
|
||||
<view class="input-group">
|
||||
<view class="input-wrapper mobile-wrapper">
|
||||
<view class="area-code-selector" @click="openAreaCodeSheet">
|
||||
<text class="area-code-text">
|
||||
{{ selectedAreaCode }}
|
||||
</text>
|
||||
<wd-icon name="arrow-down" custom-class="area-code-arrow" />
|
||||
</view>
|
||||
<view class="mobile-input-wrapper">
|
||||
<wd-input
|
||||
v-model="formData.mobile"
|
||||
custom-class="styled-input"
|
||||
no-border
|
||||
placeholder="请输入手机号码"
|
||||
type="number"
|
||||
:maxlength="11"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 用户名注册 -->
|
||||
<template v-else>
|
||||
<view class="input-group">
|
||||
<view class="input-wrapper">
|
||||
<wd-input
|
||||
v-model="formData.username"
|
||||
custom-class="styled-input"
|
||||
no-border
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="input-group">
|
||||
<view class="input-wrapper">
|
||||
<wd-input
|
||||
v-model="formData.password"
|
||||
custom-class="styled-input"
|
||||
no-border
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
:maxlength="20"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input-group">
|
||||
<view class="input-wrapper">
|
||||
<wd-input
|
||||
v-model="formData.confirmPassword"
|
||||
custom-class="styled-input"
|
||||
no-border
|
||||
placeholder="请确认密码"
|
||||
show-password
|
||||
:maxlength="20"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input-group">
|
||||
<view class="input-wrapper captcha-wrapper">
|
||||
<wd-input
|
||||
v-model="formData.captcha"
|
||||
custom-class="styled-input"
|
||||
no-border
|
||||
placeholder="请输入验证码"
|
||||
:maxlength="6"
|
||||
/>
|
||||
<view class="captcha-image" @click="refreshCaptcha">
|
||||
<image :src="captchaImage" class="captcha-img" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 手机验证码输入框 -->
|
||||
<view v-if="registerType === 'mobile'" class="input-group">
|
||||
<view class="input-wrapper sms-wrapper">
|
||||
<wd-input
|
||||
v-model="formData.mobileCaptcha"
|
||||
custom-class="styled-input"
|
||||
no-border
|
||||
placeholder="请输入短信验证码"
|
||||
type="number"
|
||||
:maxlength="6"
|
||||
/>
|
||||
<wd-button
|
||||
:loading="smsLoading"
|
||||
:disabled="smsCountdown > 0"
|
||||
custom-class="sms-btn"
|
||||
@click="sendSmsVerification"
|
||||
>
|
||||
{{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }}
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="register-btn"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleRegister"
|
||||
>
|
||||
{{ loading ? '注册中...' : '注册' }}
|
||||
</view>
|
||||
|
||||
<view class="login-hint">
|
||||
<text class="hint-text">
|
||||
已有账户？
|
||||
</text>
|
||||
<text class="login-link" @click="goBack">
|
||||
立即登录
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 注册方式切换 -->
|
||||
<view v-if="enableMobileRegister" class="register-type-switch">
|
||||
<view class="switch-tabs">
|
||||
<view
|
||||
class="switch-tab"
|
||||
:class="{ active: registerType === 'username' }"
|
||||
@click="toggleRegisterType"
|
||||
>
|
||||
<wd-icon name="user" />
|
||||
</view>
|
||||
<view
|
||||
class="switch-tab"
|
||||
:class="{ active: registerType === 'mobile' }"
|
||||
@click="toggleRegisterType"
|
||||
>
|
||||
<wd-icon name="phone" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 区号选择弹窗 -->
|
||||
<wd-action-sheet
|
||||
v-model="showAreaCodeSheet"
|
||||
title="选择国家/地区"
|
||||
:close-on-click-modal="true"
|
||||
@close="closeAreaCodeSheet"
|
||||
>
|
||||
<view class="area-code-sheet">
|
||||
<scroll-view scroll-y class="area-code-list">
|
||||
<view
|
||||
v-for="item in areaCodeList"
|
||||
:key="item.key"
|
||||
class="area-code-item"
|
||||
:class="{ selected: selectedAreaCode === item.key }"
|
||||
@click="selectAreaCode(item)"
|
||||
>
|
||||
<view class="area-info">
|
||||
<text class="area-name">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<text class="area-code">
|
||||
{{ item.key }}
|
||||
</text>
|
||||
</view>
|
||||
<wd-icon
|
||||
v-if="selectedAreaCode === item.key"
|
||||
name="check"
|
||||
custom-class="check-icon"
|
||||
/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="sheet-footer">
|
||||
<wd-button
|
||||
type="primary"
|
||||
custom-class="confirm-btn"
|
||||
@click="closeAreaCodeSheet"
|
||||
>
|
||||
确认
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</wd-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
background: linear-gradient(145deg, #f5f8fd, #6baaff, #9ebbfc, #f5f8fd);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 100vh;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
flex: 0 0 auto;
|
||||
min-height: 280rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15% 0 40rpx 0;
|
||||
position: relative;
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
left: 40rpx;
|
||||
top: 60rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
:deep(.back-icon) {
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
text-align: center;
|
||||
|
||||
.logo {
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
display: block;
|
||||
color: #ffffff;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12rpx;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-container {
|
||||
padding: 0 40rpx 40rpx 40rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx 30rpx 30rpx 30rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
||||
max-height: calc(100vh - 350rpx);
|
||||
overflow-y: auto;
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
background: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 16rpx;
|
||||
border: 2rpx solid #e9ecef;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:focus-within {
|
||||
border-color: #667eea;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
&.captcha-wrapper {
|
||||
.captcha-image {
|
||||
margin-left: 20rpx;
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #e9ecef;
|
||||
border: 1rpx solid #ddd;
|
||||
|
||||
.captcha-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sms-wrapper {
|
||||
:deep(.sms-btn) {
|
||||
margin-left: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
white-space: nowrap;
|
||||
min-width: 140rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.mobile-wrapper {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
.area-code-selector {
|
||||
flex: 0 0 160rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 16rpx;
|
||||
border: 2rpx solid #e9ecef;
|
||||
height: 45rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #667eea;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.area-code-text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.area-code-arrow) {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-input-wrapper {
|
||||
flex: 1;
|
||||
background: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 16rpx;
|
||||
border: 2rpx solid #e9ecef;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:focus-within {
|
||||
border-color: #667eea;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.styled-input) {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
|
||||
&::placeholder {
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.register-btn) {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border: none;
|
||||
border-radius: 16rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
background-color: var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0));
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
&:active {
|
||||
transform: translateY(2rpx);
|
||||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.login-hint {
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.hint-text {
|
||||
color: #666666;
|
||||
font-size: 26rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.login-link {
|
||||
color: #667eea;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-type-switch {
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
|
||||
.switch-tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 60rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.switch-tab {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 2rpx solid transparent;
|
||||
|
||||
&.active {
|
||||
background: #667eea;
|
||||
color: #ffffff;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
:deep(.wd-icon) {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-hint {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 区号选择弹窗样式
|
||||
.area-code-sheet {
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
.area-code-list {
|
||||
max-height: 60vh;
|
||||
padding: 0 40rpx;
|
||||
|
||||
.area-code-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 0;
|
||||
border-bottom: 1rpx solid #f8f9fa;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: rgba(102, 126, 234, 0.05);
|
||||
|
||||
.area-name {
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.area-code {
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.area-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.area-name {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.area-code {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.check-icon) {
|
||||
font-size: 32rpx;
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sheet-footer {
|
||||
padding: 30rpx 40rpx 40rpx 40rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
|
||||
:deep(.confirm-btn) {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,544 @@
|
||||
<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',
|
||||
})
|
||||
|
||||
// 获取屏幕边界到安全区域距离
|
||||
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 message = useMessage()
|
||||
const toast = useToast()
|
||||
|
||||
// 页面数据
|
||||
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 agentStore = useAgentStore()
|
||||
const showAgentPicker = ref(false)
|
||||
|
||||
// 获取当前选中的智能体ID
|
||||
const currentAgentId = computed(() => {
|
||||
return agentStore.currentAgentId
|
||||
})
|
||||
|
||||
// 获取智能体选项
|
||||
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)
|
||||
const showEditDialog = ref(false)
|
||||
const showChatHistoryDialog = ref(false)
|
||||
const addForm = ref<CreateSpeakerData>({
|
||||
agentId: '',
|
||||
audioId: '',
|
||||
sourceName: '',
|
||||
introduce: '',
|
||||
})
|
||||
const editForm = ref<VoicePrint>({
|
||||
id: '',
|
||||
audioId: '',
|
||||
sourceName: '',
|
||||
introduce: '',
|
||||
createDate: '',
|
||||
})
|
||||
|
||||
// z-paging查询列表数据
|
||||
async function queryList(pageNo: number, pageSize: number) {
|
||||
try {
|
||||
console.log('z-paging获取声纹列表')
|
||||
|
||||
// 检查是否有当前选中的智能体
|
||||
if (!currentAgentId.value) {
|
||||
console.warn('没有选中的智能体')
|
||||
pagingRef.value.complete([])
|
||||
return
|
||||
}
|
||||
|
||||
const data = await getVoicePrintList(currentAgentId.value)
|
||||
|
||||
// 初始化滑动状态
|
||||
const list = data || []
|
||||
list.forEach((item) => {
|
||||
if (!swipeStates.value[item.id]) {
|
||||
swipeStates.value[item.id] = 'close'
|
||||
}
|
||||
})
|
||||
|
||||
// 直接返回全部数据，不需要分页处理
|
||||
pagingRef.value.complete(list)
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取声纹列表失败:', error)
|
||||
// 告知z-paging数据加载失败
|
||||
pagingRef.value.complete(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取声纹列表(兼容旧代码)
|
||||
async function loadVoicePrintList() {
|
||||
pagingRef.value?.reload()
|
||||
}
|
||||
|
||||
// 获取语音对话记录
|
||||
async function loadChatHistory() {
|
||||
try {
|
||||
if (!currentAgentId.value) {
|
||||
toast.error('请先选择智能体')
|
||||
return
|
||||
}
|
||||
|
||||
const data = await getChatHistory(currentAgentId.value)
|
||||
chatHistoryList.value = data || []
|
||||
// 转换为ActionSheet格式
|
||||
chatHistoryActions.value = chatHistoryList.value.map((item, index) => ({
|
||||
name: item.content,
|
||||
audioId: item.audioId,
|
||||
index,
|
||||
}))
|
||||
showChatHistoryDialog.value = true
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取对话记录失败:', error)
|
||||
toast.error('获取对话记录失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 打开添加弹窗
|
||||
function openAddDialog() {
|
||||
if (!currentAgentId.value) {
|
||||
toast.error('请先选择智能体')
|
||||
return
|
||||
}
|
||||
|
||||
addForm.value = {
|
||||
agentId: currentAgentId.value,
|
||||
audioId: '',
|
||||
sourceName: '',
|
||||
introduce: '',
|
||||
}
|
||||
showAddDialog.value = true
|
||||
}
|
||||
|
||||
// 打开编辑弹窗
|
||||
function openEditDialog(item: VoicePrint) {
|
||||
editForm.value = { ...item }
|
||||
showEditDialog.value = true
|
||||
}
|
||||
|
||||
// 获取选中音频的显示内容
|
||||
function getSelectedAudioContent(audioId: string) {
|
||||
if (!audioId)
|
||||
return '点击选择声纹向量'
|
||||
const chatItem = chatHistoryList.value.find(item => item.audioId === audioId)
|
||||
return chatItem ? chatItem.content : `已选择: ${audioId.substring(0, 8)}...`
|
||||
}
|
||||
|
||||
// 选择声纹向量
|
||||
function selectAudioId({ item }: { item: any }) {
|
||||
if (showAddDialog.value) {
|
||||
addForm.value.audioId = item.audioId
|
||||
}
|
||||
else if (showEditDialog.value) {
|
||||
editForm.value.audioId = item.audioId
|
||||
}
|
||||
showChatHistoryDialog.value = false
|
||||
}
|
||||
|
||||
// 提交添加说话人
|
||||
async function submitAdd() {
|
||||
if (!addForm.value.sourceName.trim()) {
|
||||
toast.error('请输入姓名')
|
||||
return
|
||||
}
|
||||
if (!addForm.value.audioId) {
|
||||
toast.error('请选择声纹向量')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await createVoicePrint(addForm.value)
|
||||
toast.success('添加成功')
|
||||
showAddDialog.value = false
|
||||
pagingRef.value.reload()
|
||||
}
|
||||
catch (error) {
|
||||
console.error('添加说话人失败:', error)
|
||||
toast.error('添加说话人失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 提交编辑说话人
|
||||
async function submitEdit() {
|
||||
if (!editForm.value.sourceName.trim()) {
|
||||
toast.error('请输入姓名')
|
||||
return
|
||||
}
|
||||
if (!editForm.value.audioId) {
|
||||
toast.error('请选择声纹向量')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await updateVoicePrint({
|
||||
id: editForm.value.id,
|
||||
audioId: editForm.value.audioId,
|
||||
sourceName: editForm.value.sourceName,
|
||||
introduce: editForm.value.introduce,
|
||||
createDate: editForm.value.createDate,
|
||||
})
|
||||
toast.success('编辑成功')
|
||||
showEditDialog.value = false
|
||||
pagingRef.value.reload()
|
||||
}
|
||||
catch (error) {
|
||||
console.error('编辑说话人失败:', error)
|
||||
toast.error('编辑说话人失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 处理编辑操作
|
||||
function handleEdit(item: VoicePrint) {
|
||||
openEditDialog(item)
|
||||
swipeStates.value[item.id] = 'close'
|
||||
}
|
||||
|
||||
// 删除声纹
|
||||
async function handleDelete(id: string) {
|
||||
message.confirm({
|
||||
msg: '确定要删除这个说话人吗？',
|
||||
title: '确认删除',
|
||||
}).then(async () => {
|
||||
await deleteVoicePrint(id)
|
||||
toast.success('删除成功')
|
||||
pagingRef.value.reload()
|
||||
}).catch(() => {
|
||||
console.log('点击了取消按钮')
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// 确保智能体列表已加载
|
||||
if (!agentStore.isLoaded) {
|
||||
await agentStore.loadAgentList()
|
||||
}
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (pagingRef.value) {
|
||||
pagingRef.value.reload()
|
||||
}
|
||||
})
|
||||
</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="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>
|
||||
</view>
|
||||
</template>
|
||||
</wd-swipe-action>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 自定义空状态 -->
|
||||
<template #empty>
|
||||
<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">
|
||||
暂无声纹数据
|
||||
</text>
|
||||
<text class="text-[26rpx] text-[#999999] leading-[1.5]">
|
||||
点击右下角 + 号添加您的第一个说话人
|
||||
</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 浮动操作按钮 -->
|
||||
<wd-fab type="primary" size="small" :draggable="true" :expandable="false" @click="openAddDialog">
|
||||
<wd-icon name="add" />
|
||||
</wd-fab>
|
||||
</z-paging>
|
||||
|
||||
<!-- 添加说话人弹窗 -->
|
||||
<wd-popup
|
||||
v-model="showAddDialog" position="center" custom-style="width: 90%; max-width: 400px; border-radius: 16px;"
|
||||
safe-area-inset-bottom
|
||||
>
|
||||
<view>
|
||||
<view class="w-full flex items-center justify-between border-b-[2rpx] border-[#eeeeee] p-[32rpx_32rpx_24rpx]">
|
||||
<text class="w-full text-center text-[32rpx] text-[#232338] font-semibold">
|
||||
添加说话人
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="p-[32rpx]">
|
||||
<!-- 声纹向量选择 -->
|
||||
<view class="mb-[32rpx]">
|
||||
<text class="mb-[16rpx] block text-[28rpx] text-[#232338] font-medium">
|
||||
* 声纹向量
|
||||
</text>
|
||||
<view
|
||||
class="flex cursor-pointer items-center justify-between border-[1rpx] border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]"
|
||||
@click="loadChatHistory"
|
||||
>
|
||||
<text
|
||||
class="m-r-[16rpx] flex-1 text-left text-[26rpx] text-[#232338]"
|
||||
:class="{ 'text-[#9d9ea3]': !addForm.audioId }"
|
||||
>
|
||||
{{ getSelectedAudioContent(addForm.audioId) }}
|
||||
</text>
|
||||
<wd-icon name="arrow-down" custom-class="text-[20rpx] text-[#9d9ea3]" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 姓名 -->
|
||||
<view class="mb-[32rpx]">
|
||||
<text class="mb-[16rpx] block text-[28rpx] text-[#232338] font-medium">
|
||||
* 姓名
|
||||
</text>
|
||||
<input
|
||||
v-model="addForm.sourceName"
|
||||
class="box-border h-[80rpx] w-full border-[1rpx] 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="请输入姓名"
|
||||
>
|
||||
</view>
|
||||
|
||||
<!-- 描述 -->
|
||||
<view>
|
||||
<text class="mb-[16rpx] block text-[28rpx] text-[#232338] font-medium">
|
||||
* 描述
|
||||
</text>
|
||||
<textarea
|
||||
v-model="addForm.introduce" :maxlength="100" placeholder="请输入描述"
|
||||
class="box-border h-[200rpx] w-full resize-none border-[1rpx] 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]">
|
||||
{{ (addForm.introduce || '').length }}/100
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex gap-[16rpx] border-t-[2rpx] border-[#eeeeee] p-[24rpx_32rpx_32rpx]">
|
||||
<wd-button type="info" custom-class="flex-1" @click="showAddDialog = false">
|
||||
取消
|
||||
</wd-button>
|
||||
<wd-button type="primary" custom-class="flex-1" @click="submitAdd">
|
||||
保存
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<!-- 编辑说话人弹窗 -->
|
||||
<wd-popup
|
||||
v-model="showEditDialog" position="center" custom-style="width: 90%; max-width: 400px; border-radius: 16px;"
|
||||
safe-area-inset-bottom
|
||||
>
|
||||
<view>
|
||||
<view class="w-full flex items-center justify-between border-b-[2rpx] border-[#eeeeee] p-[32rpx_32rpx_24rpx]">
|
||||
<text class="w-full text-center text-[32rpx] text-[#232338] font-semibold">
|
||||
编辑说话人
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="p-[32rpx]">
|
||||
<!-- 声纹向量选择 -->
|
||||
<view class="mb-[32rpx]">
|
||||
<text class="mb-[16rpx] block text-[28rpx] text-[#232338] font-medium">
|
||||
* 声纹向量
|
||||
</text>
|
||||
<view
|
||||
class="flex cursor-pointer items-center justify-between border-[1rpx] border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]"
|
||||
@click="loadChatHistory"
|
||||
>
|
||||
<text
|
||||
class="m-r-[16rpx] flex-1 text-left text-[26rpx] text-[#232338]"
|
||||
:class="{ 'text-[#9d9ea3]': !editForm.audioId }"
|
||||
>
|
||||
{{ getSelectedAudioContent(editForm.audioId) }}
|
||||
</text>
|
||||
<wd-icon name="arrow-down" custom-class="text-[20rpx] text-[#9d9ea3]" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 姓名 -->
|
||||
<view class="mb-[32rpx]">
|
||||
<text class="mb-[16rpx] block text-[28rpx] text-[#232338] font-medium">
|
||||
* 姓名
|
||||
</text>
|
||||
<input
|
||||
v-model="editForm.sourceName"
|
||||
class="box-border h-[80rpx] w-full border-[1rpx] 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="请输入姓名"
|
||||
>
|
||||
</view>
|
||||
|
||||
<!-- 描述 -->
|
||||
<view>
|
||||
<text class="mb-[16rpx] block text-[28rpx] text-[#232338] font-medium">
|
||||
* 描述
|
||||
</text>
|
||||
<textarea
|
||||
v-model="editForm.introduce" :maxlength="100" placeholder="请输入描述"
|
||||
class="box-border h-[200rpx] w-full resize-none border-[1rpx] 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]">
|
||||
{{ (editForm.introduce || '').length }}/100
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex gap-[16rpx] border-t-[2rpx] border-[#eeeeee] p-[24rpx_32rpx_32rpx]">
|
||||
<wd-button type="info" custom-class="flex-1" @click="showEditDialog = false">
|
||||
取消
|
||||
</wd-button>
|
||||
<wd-button type="primary" custom-class="flex-1" @click="submitEdit">
|
||||
保存
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<!-- 语音对话记录选择动作面板 -->
|
||||
<wd-action-sheet
|
||||
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;
|
||||
}
|
||||
|
||||
:deep(.wd-swipe-action) {
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
border: 1rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
:deep(.flex-1) {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user