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

feat: 初始化移动端项目

Browse Source
This commit is contained in:
Junsen
2025-08-08 17:35:35 +08:00
parent 2f3c466833
commit 90f7af7afa
134 changed files with 26790 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/xiaozhi-mobile-admin/.commitlintrc.cjs
+3
View File
@@ -0,0 +1,3 @@
module.exports = {
extends: ['@commitlint/config-conventional'],
}
main/xiaozhi-mobile-admin/.editorconfig
+13
View File
@@ -0,0 +1,13 @@
root = true
[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行
[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off # 关闭最大行长度限制
trim_trailing_whitespace = false # 关闭末尾空格修剪
main/xiaozhi-mobile-admin/.gitignore
+44
View File
@@ -0,0 +1,44 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
*.local
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.hbuilderx
.stylelintcache
.eslintcache
docs/.vitepress/dist
docs/.vitepress/cache
src/types
# lock 文件还是不要了，我主要的版本写死就好了
# pnpm-lock.yaml
# package-lock.json
# TIPS：如果某些文件已经加入了版本管理，现在重新加入 .gitignore 是不生效的，需要执行下面的操作
# `git rm -r --cached .` 然后提交 commit 即可。
# git rm -r --cached file1 file2 ## 针对某些文件
# git rm -r --cached dir1 dir2 ## 针对某些文件夹
# git rm -r --cached . ## 针对所有文件
# 更新 uni-app 官方版本
# npx @dcloudio/uvm@latest
main/xiaozhi-mobile-admin/.husky/commit-msg
+1
View File
@@ -0,0 +1 @@
npx --no-install commitlint --edit "$1"
main/xiaozhi-mobile-admin/.husky/pre-commit
+1
View File
@@ -0,0 +1 @@
npx lint-staged --allow-empty
main/xiaozhi-mobile-admin/.npmrc
+8
View File
@@ -0,0 +1,8 @@
# registry = https://registry.npmjs.org
registry = https://registry.npmmirror.com
strict-peer-dependencies=false
auto-install-peers=true
shamefully-hoist=true
ignore-workspace-root-check=true
install-workspace-root=true
main/xiaozhi-mobile-admin/LICENSE
+21
View File
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2025 菲鸽
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
main/xiaozhi-mobile-admin/README.md
+93
View File
@@ -0,0 +1,93 @@
<p align="center">
<a href="https://github.com/unibest-tech/unibest">
<img width="160" src="./src/static/logo.svg">
</a>
</p>
<h1 align="center">
<a href="https://github.com/unibest-tech/unibest" target="_blank">unibest - 最好的 uniapp 开发框架</a>
</h1>
<div align="center">
旧仓库 codercup 进不去了，star 也拿不回来，这里也展示一下那个地址的 star.
[![GitHub Repo stars](https://img.shields.io/github/stars/codercup/unibest?style=flat&logo=github)](https://github.com/codercup/unibest)
[![GitHub forks](https://img.shields.io/github/forks/codercup/unibest?style=flat&logo=github)](https://github.com/codercup/unibest)
</div>
<div align="center">
[![GitHub Repo stars](https://img.shields.io/github/stars/feige996/unibest?style=flat&logo=github)](https://github.com/feige996/unibest)
[![GitHub forks](https://img.shields.io/github/forks/feige996/unibest?style=flat&logo=github)](https://github.com/feige996/unibest)
[![star](https://gitee.com/feige996/unibest/badge/star.svg?theme=dark)](https://gitee.com/feige996/unibest/stargazers)
[![fork](https://gitee.com/feige996/unibest/badge/fork.svg?theme=dark)](https://gitee.com/feige996/unibest/members)
![node version](https://img.shields.io/badge/node-%3E%3D18-green)
![pnpm version](https://img.shields.io/badge/pnpm-%3E%3D7.30-green)
![GitHub package.json version (subfolder of monorepo)](https://img.shields.io/github/package-json/v/feige996/unibest)
![GitHub License](https://img.shields.io/github/license/feige996/unibest)
</div>
`unibest` —— 最好的 `uniapp` 开发模板，由 `uniapp` + `Vue3` + `Ts` + `Vite5` + `UnoCss` + `wot-ui` + `z-paging` 构成，使用了最新的前端技术栈，无需依靠 `HBuilderX`，通过命令行方式运行 `web`、`小程序` 和 `App`（编辑器推荐 `VSCode`，可选 `webstorm`）。
`unibest` 内置了 `约定式路由`、`layout布局`、`请求封装`、`请求拦截`、`登录拦截`、`UnoCSS`、`i18n多语言` 等基础功能，提供了 `代码提示`、`自动格式化`、`统一配置`、`代码片段` 等辅助功能，让你编写 `uniapp` 拥有 `best` 体验 （ `unibest 的由来`）。
![](https://raw.githubusercontent.com/andreasbm/readme/master/screenshots/lines/rainbow.png)
<p align="center">
<a href="https://unibest.tech/" target="_blank">📖 文档地址(new)</a>
<span style="margin:0 10px;">|</span>
<a href="https://feige996.github.io/hello-unibest/" target="_blank">📱 DEMO 地址</a>
</p>
---
注意旧的地址 [codercup](https://github.com/codercup/unibest) 我进不去了，使用新的 [feige996](https://github.com/feige996/unibest)。PR和 issue 也请使用新地址，否则无法合并。
## 平台兼容性
| H5 | IOS | 安卓 | 微信小程序 | 字节小程序 | 快手小程序 | 支付宝小程序 | 钉钉小程序 | 百度小程序 |
| --- | --- | ---- | ---------- | ---------- | ---------- | ------------ | ---------- | ---------- |
| √ | √ | √ | √ | √ | √ | √ | √ | √ |
注意每种 `UI框架` 支持的平台有所不同，详情请看各 `UI框架` 的官网，也可以看 `unibest` 文档。
## ⚙️ 环境
- node>=18
- pnpm>=7.30
- Vue Official>=2.1.10
- TypeScript>=5.0
## &#x1F4C2; 快速开始
执行 `pnpm create unibest` 创建项目
执行 `pnpm i` 安装依赖
执行 `pnpm dev` 运行 `H5`
执行 `pnpm dev:mp` 运行 `微信小程序`
## 📦 运行（支持热更新）
- web平台： `pnpm dev:h5`, 然后打开 [http://localhost:9000/](http://localhost:9000/)。
- weixin平台：`pnpm dev:mp` 然后打开微信开发者工具，导入本地文件夹，选择本项目的`dist/dev/mp-weixin` 文件。
- APP平台：`pnpm dev:app`, 然后打开 `HBuilderX`，导入刚刚生成的`dist/dev/app` 文件夹，选择运行到模拟器(开发时优先使用)，或者运行的安卓/ios基座。
## 🔗 发布
- web平台： `pnpm build:h5`，打包后的文件在 `dist/build/h5`，可以放到web服务器，如nginx运行。如果最终不是放在根目录，可以在 `manifest.config.ts` 文件的 `h5.router.base` 属性进行修改。
- weixin平台：`pnpm build:mp`, 打包后的文件在 `dist/build/mp-weixin`，然后通过微信开发者工具导入，并点击右上角的“上传”按钮进行上传。
- APP平台：`pnpm build:app`, 然后打开 `HBuilderX`，导入刚刚生成的`dist/build/app` 文件夹，选择发行 - APP云打包。
## 📄 License
[MIT](https://opensource.org/license/mit/)
Copyright (c) 2025 菲鸽
## 捐赠
<p align='center'>
<img alt="special sponsor appwrite" src="https://oss.laf.run/ukw0y1-site/pay/wepay.png" height="330" style="display:inline-block; height:330px;">
<img alt="special sponsor appwrite" src="https://oss.laf.run/ukw0y1-site/pay/alipay.jpg" height="330" style="display:inline-block; height:330px; margin-left:10px;">
</p>
main/xiaozhi-mobile-admin/eslint.config.mjs
+43
View File
@@ -0,0 +1,43 @@
import uniHelper from '@uni-helper/eslint-config'
export default uniHelper({
unocss: true,
vue: true,
markdown: false,
ignores: [
'src/uni_modules/',
'dist',
// unplugin-auto-import 生成的类型文件，每次提交都改变，所以加入这里吧，与 .gitignore 配合使用
'auto-import.d.ts',
// vite-plugin-uni-pages 生成的类型文件，每次切换分支都一堆不同的，所以直接 .gitignore
'uni-pages.d.ts',
// 插件生成的文件
'src/pages.json',
'src/manifest.json',
// 忽略自动生成文件
'src/service/app/**',
],
rules: {
'no-console': 'off',
'no-unused-vars': 'off',
'vue/no-unused-refs': 'off',
'unused-imports/no-unused-vars': 'off',
'eslint-comments/no-unlimited-disable': 'off',
'jsdoc/check-param-names': 'off',
'jsdoc/require-returns-description': 'off',
'ts/no-empty-object-type': 'off',
'no-extend-native': 'off',
},
formatters: {
/**
* Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
* By default uses Prettier
*/
css: true,
/**
* Format HTML files
* By default uses Prettier
*/
html: true,
},
})
main/xiaozhi-mobile-admin/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

main/xiaozhi-mobile-admin/index.html
+26
View File
@@ -0,0 +1,26 @@
<!doctype html>
<html build-time="%BUILD_TIME%">
<head>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<script>
var coverSupport =
'CSS' in window &&
typeof CSS.supports === 'function' &&
(CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') +
'" />',
)
</script>
<title>unibest</title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
main/xiaozhi-mobile-admin/manifest.config.ts
+155
View File
@@ -0,0 +1,155 @@
import path from 'node:path'
import process from 'node:process'
// manifest.config.ts
import { defineManifestConfig } from '@uni-helper/vite-plugin-uni-manifest'
import { loadEnv } from 'vite'
// 手动解析命令行参数获取 mode
function getMode() {
const args = process.argv.slice(2)
const modeFlagIndex = args.findIndex(arg => arg === '--mode')
return modeFlagIndex !== -1 ? args[modeFlagIndex + 1] : args[0] === 'build' ? 'production' : 'development' // 默认 development
}
// 获取环境变量的范例
const env = loadEnv(getMode(), path.resolve(process.cwd(), 'env'))
const {
VITE_APP_TITLE,
VITE_UNI_APPID,
VITE_WX_APPID,
VITE_APP_PUBLIC_BASE,
VITE_FALLBACK_LOCALE,
} = env
export default defineManifestConfig({
'name': VITE_APP_TITLE,
'appid': VITE_UNI_APPID,
'description': '',
'versionName': '1.0.0',
'versionCode': '100',
'transformPx': false,
'locale': VITE_FALLBACK_LOCALE, // 'zh-Hans'
'h5': {
router: {
// base: VITE_APP_PUBLIC_BASE,
},
},
/* 5+App特有相关 */
'app-plus': {
usingComponents: true,
nvueStyleCompiler: 'uni-app',
compilerVersion: 3,
compatible: {
ignoreVersion: true,
},
splashscreen: {
alwaysShowBeforeRender: true,
waiting: true,
autoclose: true,
delay: 0,
},
/* 模块配置 */
modules: {},
/* 应用发布信息 */
distribute: {
/* android打包配置 */
android: {
minSdkVersion: 30,
targetSdkVersion: 30,
abiFilters: ['armeabi-v7a', 'arm64-v8a'],
permissions: [
'<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/>',
'<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>',
'<uses-permission android:name="android.permission.VIBRATE"/>',
'<uses-permission android:name="android.permission.READ_LOGS"/>',
'<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>',
'<uses-feature android:name="android.hardware.camera.autofocus"/>',
'<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>',
'<uses-permission android:name="android.permission.CAMERA"/>',
'<uses-permission android:name="android.permission.GET_ACCOUNTS"/>',
'<uses-permission android:name="android.permission.READ_PHONE_STATE"/>',
'<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>',
'<uses-permission android:name="android.permission.WAKE_LOCK"/>',
'<uses-permission android:name="android.permission.FLASHLIGHT"/>',
'<uses-feature android:name="android.hardware.camera"/>',
'<uses-permission android:name="android.permission.WRITE_SETTINGS"/>',
'<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>',
'<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>',
],
},
/* ios打包配置 */
ios: {},
/* SDK配置 */
sdkConfigs: {},
/* 图标配置 */
icons: {
android: {
hdpi: 'unpackage/res/icons/72x72.png',
xhdpi: 'unpackage/res/icons/96x96.png',
xxhdpi: 'unpackage/res/icons/144x144.png',
xxxhdpi: 'unpackage/res/icons/192x192.png',
},
ios: {
appstore: 'unpackage/res/icons/1024x1024.png',
ipad: {
'app': 'unpackage/res/icons/76x76.png',
'app@2x': 'unpackage/res/icons/152x152.png',
'notification': 'unpackage/res/icons/20x20.png',
'notification@2x': 'unpackage/res/icons/40x40.png',
'proapp@2x': 'unpackage/res/icons/167x167.png',
'settings': 'unpackage/res/icons/29x29.png',
'settings@2x': 'unpackage/res/icons/58x58.png',
'spotlight': 'unpackage/res/icons/40x40.png',
'spotlight@2x': 'unpackage/res/icons/80x80.png',
},
iphone: {
'app@2x': 'unpackage/res/icons/120x120.png',
'app@3x': 'unpackage/res/icons/180x180.png',
'notification@2x': 'unpackage/res/icons/40x40.png',
'notification@3x': 'unpackage/res/icons/60x60.png',
'settings@2x': 'unpackage/res/icons/58x58.png',
'settings@3x': 'unpackage/res/icons/87x87.png',
'spotlight@2x': 'unpackage/res/icons/80x80.png',
'spotlight@3x': 'unpackage/res/icons/120x120.png',
},
},
},
},
},
/* 快应用特有相关 */
'quickapp': {},
/* 小程序特有相关 */
'mp-weixin': {
appid: VITE_WX_APPID,
setting: {
urlCheck: false,
// 是否启用 ES6 转 ES5
es6: true,
minified: true,
},
optimization: {
subPackages: true,
},
usingComponents: true,
// __usePrivacyCheck__: true,
permission: {
'scope.userLocation': {
desc: 'WiFi配网功能需要获取位置权限',
},
},
requiredPrivateInfos: ['getLocation'],
},
'mp-alipay': {
usingComponents: true,
styleIsolation: 'shared',
},
'mp-baidu': {
usingComponents: true,
},
'mp-toutiao': {
usingComponents: true,
},
'uniStatistics': {
enable: false,
},
'vueVersion': '3',
})
main/xiaozhi-mobile-admin/openapi-spec.yaml
+1086
View File
File diff suppressed because it is too large Load Diff
main/xiaozhi-mobile-admin/openapi-ts-request.config.ts
+13
View File
@@ -0,0 +1,13 @@
import type { GenerateServiceProps } from 'openapi-ts-request'
export default [
{
schemaPath: 'http://petstore.swagger.io/v2/swagger.json',
serversPath: './src/service/app',
requestLibPath: `import request from '@/utils/request';\n import { CustomRequestOptions } from '@/http/interceptor';`,
requestOptionsType: 'CustomRequestOptions',
isGenReactQuery: true,
reactQueryMode: 'vue',
isGenJavaScript: false,
},
] as GenerateServiceProps[]
main/xiaozhi-mobile-admin/pages.config.ts
+23
View File
@@ -0,0 +1,23 @@
import { defineUniPages } from '@uni-helper/vite-plugin-uni-pages'
import { tabBar } from './src/layouts/fg-tabbar/tabbarList'
export default defineUniPages({
globalStyle: {
navigationStyle: 'default',
navigationBarTitleText: '小智',
navigationBarBackgroundColor: '#f8f8f8',
navigationBarTextStyle: 'black',
backgroundColor: '#FFFFFF',
},
easycom: {
autoscan: true,
custom: {
'^fg-(.*)': '@/components/fg-$1/fg-$1.vue',
'^wd-(.*)': 'wot-design-uni/components/wd-$1/wd-$1.vue',
'^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)':
'z-paging/components/z-paging$1/z-paging$1.vue',
},
},
// tabbar 的配置统一在 "./src/layouts/fg-tabbar/tabbarList.ts" 文件中
tabBar: tabBar as any,
})
main/xiaozhi-mobile-admin/patches/@dcloudio__uni-h5.patch
+13
View File
@@ -0,0 +1,13 @@
diff --git a/dist/uni-h5.es.js b/dist/uni-h5.es.js
index 7421bad97d94ad34a3d4d94292a9ee9071430662..19c6071ee4036ceb8d1cfa09030e471c002d2cda 100644
--- a/dist/uni-h5.es.js
+++ b/dist/uni-h5.es.js
@@ -23410,7 +23410,7 @@ function useShowTabBar(emit2) {
const tabBar2 = useTabBar();
const showTabBar2 = computed(() => route.meta.isTabBar && tabBar2.shown);
updateCssVar({
- "--tab-bar-height": tabBar2.height
+ "--tab-bar-height": tabBar2?.height || 0
});
return showTabBar2;
}
main/xiaozhi-mobile-admin/pnpm-lock.yaml
Generated
+14871
View File
File diff suppressed because it is too large Load Diff
main/xiaozhi-mobile-admin/pnpm-workspace.yaml
+6
View File
@@ -0,0 +1,6 @@
packages:
- '**'
- '!node_modules'
patchedDependencies:
'@dcloudio/uni-h5': patches/@dcloudio__uni-h5.patch
main/xiaozhi-mobile-admin/scripts/postupgrade.js
+35
View File
@@ -0,0 +1,35 @@
// # 执行 `pnpm upgrade` 后会升级 `uniapp` 相关依赖
// # 在升级完后，会自动添加很多无用依赖，这需要删除以减小依赖包体积
// # 只需要执行下面的命令即可
const { exec } = require('node:child_process')
// 定义要执行的命令
const dependencies = [
'@dcloudio/uni-app-harmony',
// TODO: 如果不需要某个平台的小程序，请手动删除或注释掉
'@dcloudio/uni-mp-alipay',
'@dcloudio/uni-mp-baidu',
'@dcloudio/uni-mp-jd',
'@dcloudio/uni-mp-kuaishou',
'@dcloudio/uni-mp-lark',
'@dcloudio/uni-mp-qq',
'@dcloudio/uni-mp-toutiao',
'@dcloudio/uni-mp-xhs',
'@dcloudio/uni-quickapp-webview',
// i18n模板要注释掉下面的
'vue-i18n',
]
// 使用exec执行命令
exec(`pnpm un ${dependencies.join(' ')}`, (error, stdout, stderr) => {
if (error) {
// 如果有错误，打印错误信息
console.error(`执行出错: ${error}`)
return
}
// 打印正常输出
console.log(`stdout: ${stdout}`)
// 如果有错误输出，也打印出来
console.error(`stderr: ${stderr}`)
})
main/xiaozhi-mobile-admin/src/App.vue
+39
View File
@@ -0,0 +1,39 @@
<script setup lang="ts">
import { onHide, onLaunch, onShow } from '@dcloudio/uni-app'
import { usePageAuth } from '@/hooks/usePageAuth'
import { useConfigStore } from '@/store'
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
usePageAuth()
const configStore = useConfigStore()
onLaunch(() => {
console.log('App Launch')
// 获取公共配置
configStore.fetchPublicConfig().catch((error) => {
console.error('获取公共配置失败:', error)
})
})
onShow(() => {
console.log('App Show')
})
onHide(() => {
console.log('App Hide')
})
</script>
<style lang="scss">
swiper,
scroll-view {
flex: 1;
height: 100%;
overflow: hidden;
}
image {
width: 100%;
height: 100%;
vertical-align: middle;
}
</style>
main/xiaozhi-mobile-admin/src/api/agent/agent.ts
+185
View File
@@ -0,0 +1,185 @@
import type {
Agent,
AgentCreateData,
AgentDetail,
ModelOption,
RoleTemplate,
} from './types'
import { http } from '@/http/request/alova'
// 获取智能体详情
export function getAgentDetail(id: string) {
return http.Get<AgentDetail>(`/agent/${id}`, {
meta: {
ignoreAuth: false,
toast: false,
},
cacheFor: {
expire: 0,
},
})
}
// 获取角色模板列表
export function getRoleTemplates() {
return http.Get<RoleTemplate[]>('/agent/template', {
meta: {
ignoreAuth: false,
toast: false,
},
cacheFor: {
expire: 0,
},
})
}
// 获取模型选项
export function getModelOptions(modelType: string, modelName: string = '') {
return http.Get<ModelOption[]>('/models/names', {
params: {
modelType,
modelName,
},
meta: {
ignoreAuth: false,
toast: false,
},
cacheFor: {
expire: 0,
},
})
}
// 获取智能体列表
export function getAgentList() {
return http.Get<Agent[]>('/agent/list', {
meta: {
ignoreAuth: false,
toast: false,
},
cacheFor: {
expire: 0,
},
})
}
// 创建智能体
export function createAgent(data: AgentCreateData) {
return http.Post<string>('/agent', data, {
meta: {
ignoreAuth: false,
toast: true,
},
})
}
// 删除智能体
export function deleteAgent(id: string) {
return http.Delete(`/agent/${id}`, {
meta: {
ignoreAuth: false,
toast: true,
},
})
}
// 获取TTS音色列表
export function getTTSVoices(ttsModelId: string, voiceName: string = '') {
return http.Get<{ id: string, name: string }[]>(`/models/${ttsModelId}/voices`, {
params: {
voiceName,
},
meta: {
ignoreAuth: false,
toast: false,
},
cacheFor: {
expire: 0,
},
})
}
// 更新智能体
export function updateAgent(id: string, data: Partial<AgentDetail>) {
return http.Put(`/agent/${id}`, data, {
meta: {
ignoreAuth: false,
toast: true,
},
cacheFor: {
expire: 0,
},
})
}
// 获取插件列表
export function getPluginFunctions() {
return http.Get<any[]>(`/models/provider/plugin/names`, {
meta: {
ignoreAuth: false,
toast: false,
},
cacheFor: {
expire: 0,
},
})
}
// 获取mcp接入点
export function getMcpAddress(agentId: string) {
return http.Get<string>(`/agent/mcp/address/${agentId}`, {
meta: {
ignoreAuth: false,
toast: false,
},
})
}
// 获取mcp工具
export function getMcpTools(agentId: string) {
return http.Get<string[]>(`/agent/mcp/tools/${agentId}`, {
meta: {
ignoreAuth: false,
toast: false,
},
cacheFor: {
expire: 0,
},
})
}
// 获取声纹列表
export function getVoicePrintList(agentId: string) {
return http.Get<any[]>(`/agent/voice-print/list/${agentId}`, {
meta: {
ignoreAuth: false,
toast: false,
},
cacheFor: {
expire: 0,
},
})
}
// 获取语音对话记录
export function getChatHistoryUser(agentId: string) {
return http.Get<any[]>(`/agent/${agentId}/chat-history/user`, {
meta: {
ignoreAuth: false,
toast: false,
},
cacheFor: {
expire: 0,
},
})
}
// 新增声纹说话人
export function createVoicePrint(data: { agentId: string, audioId: string, sourceName: string, introduce: string }) {
return http.Post('/agent/voice-print', data, {
meta: {
ignoreAuth: false,
toast: true,
},
})
}
main/xiaozhi-mobile-admin/src/api/agent/types.ts
+107
View File
@@ -0,0 +1,107 @@
// 智能体列表数据类型
export interface Agent {
id: string
agentName: string
ttsModelName: string
ttsVoiceName: string
llmModelName: string
vllmModelName: string
memModelId: string
systemPrompt: string
summaryMemory: string | null
lastConnectedAt: string | null
deviceCount: number
}
// 智能体创建数据类型
export interface AgentCreateData {
agentName: string
}
// 智能体详情数据类型
export interface AgentDetail {
id: string
userId: string
agentCode: string
agentName: string
asrModelId: string
vadModelId: string
llmModelId: string
vllmModelId: string
ttsModelId: string
ttsVoiceId: string
memModelId: string
intentModelId: string
chatHistoryConf: number
systemPrompt: string
summaryMemory: string
langCode: string
language: string
sort: number
creator: string
createdAt: string
updater: string
updatedAt: string
functions: AgentFunction[]
}
export interface AgentFunction {
id?: string
agentId?: string
pluginId: string
paramInfo: Record<string, string | number | boolean> | null
}
// 角色模板数据类型
export interface RoleTemplate {
id: string
agentCode: string
agentName: string
asrModelId: string
vadModelId: string
llmModelId: string
vllmModelId: string
ttsModelId: string
ttsVoiceId: string
memModelId: string
intentModelId: string
chatHistoryConf: number
systemPrompt: string
summaryMemory: string
langCode: string
language: string
sort: number
creator: string
createdAt: string
updater: string
updatedAt: string
}
// 模型选项数据类型
export interface ModelOption {
id: string
modelName: string
}
export interface PluginField {
key: string
type: string
label: string
default: string
selected?: boolean
editing?: boolean
}
export interface PluginDefinition {
id: string
modelType: string
providerCode: string
name: string
fields: PluginField[] // 注意：原始是字符串，需要先 JSON.parse
sort: number
updater: string
updateDate: string
creator: string
createDate: string
[key: string]: any
}
main/xiaozhi-mobile-admin/src/api/auth.ts
+127
View File
@@ -0,0 +1,127 @@
import { http } from '@/http/request/alova'
// 登录接口数据类型
export interface LoginData {
username: string
password: string
captcha: string
captchaId: string
areaCode?: string
mobile?: string
}
// 登录响应数据类型
export interface LoginResponse {
token: string
expire: number
clientHash: string
}
// 验证码响应数据类型
export interface CaptchaResponse {
captchaId: string
captchaImage: string
}
// 获取验证码
export function getCaptcha(uuid: string) {
return http.Get<string>('/user/captcha', {
params: { uuid },
meta: {
ignoreAuth: true,
toast: false,
},
})
}
// 用户登录
export function login(data: LoginData) {
return http.Post<LoginResponse>('/user/login', data, {
meta: {
ignoreAuth: true,
toast: true,
},
})
}
// 用户信息响应数据类型
export interface UserInfo {
id: number
username: string
realName: string
email: string
mobile: string
status: number
superAdmin: number
}
// 公共配置响应数据类型
export interface PublicConfig {
enableMobileRegister: boolean
version: string
year: string
allowUserRegister: boolean
mobileAreaList: Array<{
name: string
key: string
}>
beianIcpNum: string
beianGaNum: string
name: string
}
// 获取用户信息
export function getUserInfo() {
return http.Get<UserInfo>('/user/info', {
meta: {
ignoreAuth: false,
toast: false,
},
})
}
// 获取公共配置
export function getPublicConfig() {
return http.Get<PublicConfig>('/user/pub-config', {
meta: {
ignoreAuth: true,
toast: false,
},
})
}
// 注册数据类型
export interface RegisterData {
username: string
password: string
confirmPassword: string
captcha: string
captchaId: string
areaCode: string
mobile: string
mobileCaptcha: string
}
// 发送短信验证码
export function sendSmsCode(data: {
phone: string
captcha: string
captchaId: string
}) {
return http.Post('/user/smsVerification', data, {
meta: {
ignoreAuth: true,
toast: false,
},
})
}
// 用户注册
export function register(data: RegisterData) {
return http.Post('/user/register', data, {
meta: {
ignoreAuth: true,
toast: true,
},
})
}
main/xiaozhi-mobile-admin/src/api/chat-history/chat-history.ts
+57
View File
@@ -0,0 +1,57 @@
import type {
ChatMessage,
ChatSessionsResponse,
GetSessionsParams,
} from './types'
import { http } from '@/http/request/alova'
/**
* 获取聊天会话列表
* @param agentId 智能体ID
* @param params 分页参数
*/
export function getChatSessions(agentId: string, params: GetSessionsParams) {
return http.Get<ChatSessionsResponse>(`/agent/${agentId}/sessions`, {
params,
meta: {
ignoreAuth: false,
toast: false,
},
})
}
/**
* 获取聊天记录详情
* @param agentId 智能体ID
* @param sessionId 会话ID
*/
export function getChatHistory(agentId: string, sessionId: string) {
return http.Get<ChatMessage[]>(`/agent/${agentId}/chat-history/${sessionId}`, {
meta: {
ignoreAuth: false,
toast: false,
},
})
}
/**
* 获取音频下载ID
* @param audioId 音频ID
*/
export function getAudioId(audioId: string) {
return http.Post<string>(`/agent/audio/${audioId}`, {}, {
meta: {
ignoreAuth: false,
toast: false,
},
})
}
/**
* 获取音频播放地址
* @param downloadId 下载ID
*/
export function getAudioPlayUrl(downloadId: string) {
// 根据需求文档，这个是直接返回二进制的，所以我们直接构造URL
return `/agent/play/${downloadId}`
}
main/xiaozhi-mobile-admin/src/api/chat-history/index.ts
+2
View File
@@ -0,0 +1,2 @@
export * from './chat-history'
export * from './types'
main/xiaozhi-mobile-admin/src/api/chat-history/types.ts
+38
View File
@@ -0,0 +1,38 @@
// 聊天会话列表项
export interface ChatSession {
sessionId: string
createdAt: string
chatCount: number
}
// 聊天会话列表响应
export interface ChatSessionsResponse {
total: number
list: ChatSession[]
}
// 聊天消息
export interface ChatMessage {
createdAt: string
chatType: 1 | 2 // 1是用户，2是AI
content: string
audioId: string | null
macAddress: string
}
// 用户消息内容（需要解析JSON）
export interface UserMessageContent {
speaker: string
content: string
}
// 获取聊天会话列表参数
export interface GetSessionsParams {
page: number
limit: number
}
// 音频播放相关
export interface AudioResponse {
data: string // 音频下载ID
}
main/xiaozhi-mobile-admin/src/api/device/device.ts
+55
View File
@@ -0,0 +1,55 @@
import type { Device, FirmwareType } from './types'
import { http } from '@/http/request/alova'
/**
* 获取设备类型列表
*/
export function getFirmwareTypes() {
return http.Get<FirmwareType[]>('/admin/dict/data/type/FIRMWARE_TYPE')
}
/**
* 获取绑定设备列表
* @param agentId 智能体ID
*/
export function getBindDevices(agentId: string) {
return http.Get<Device[]>(`/device/bind/${agentId}`, {
meta: {
ignoreAuth: false,
toast: false,
},
cacheFor: {
expire: 0,
},
})
}
/**
* 添加设备
* @param agentId 智能体ID
* @param code 验证码
*/
export function bindDevice(agentId: string, code: string) {
return http.Post(`/device/bind/${agentId}/${code}`, null)
}
/**
* 设置设备OTA升级开关
* @param deviceId 设备ID (MAC地址)
* @param autoUpdate 是否自动升级 0|1
*/
export function updateDeviceAutoUpdate(deviceId: string, autoUpdate: number) {
return http.Put(`/device/update/${deviceId}`, {
autoUpdate,
})
}
/**
* 解绑设备
* @param deviceId 设备ID (MAC地址)
*/
export function unbindDevice(deviceId: string) {
return http.Post('/device/unbind', {
deviceId,
})
}
main/xiaozhi-mobile-admin/src/api/device/index.ts
+2
View File
@@ -0,0 +1,2 @@
export * from './device'
export * from './types'
main/xiaozhi-mobile-admin/src/api/device/types.ts
+21
View File
@@ -0,0 +1,21 @@
export interface FirmwareType {
name: string
key: string
}
export interface Device {
id: string
userId: string
macAddress: string
lastConnectedAt: string
autoUpdate: number
board: string
alias?: string
agentId: string
appVersion: string
sort: number
updater?: string
updateDate: string
creator: string
createDate: string
}
main/xiaozhi-mobile-admin/src/api/voiceprint/index.ts
+2
View File
@@ -0,0 +1,2 @@
export * from './types'
export * from './voiceprint'
main/xiaozhi-mobile-admin/src/api/voiceprint/types.ts
+29
View File
@@ -0,0 +1,29 @@
// 声纹信息响应类型
export interface VoicePrint {
id: string
audioId: string
sourceName: string
introduce: string
createDate: string
}
// 语音对话记录类型
export interface ChatHistory {
content: string
audioId: string
}
// 创建说话人数据类型
export interface CreateSpeakerData {
agentId: string
audioId: string
sourceName: string
introduce: string
}
// 通用响应类型
export interface ApiResponse<T = any> {
code: number
msg: string
data: T
}
main/xiaozhi-mobile-admin/src/api/voiceprint/voiceprint.ts
+62
View File
@@ -0,0 +1,62 @@
import type {
ChatHistory,
CreateSpeakerData,
VoicePrint,
} from './types'
import { http } from '@/http/request/alova'
// 获取声纹列表
export function getVoicePrintList(agentId: string) {
return http.Get<VoicePrint[]>(`/agent/voice-print/list/${agentId}`, {
meta: {
ignoreAuth: false,
toast: false,
},
cacheFor: {
expire: 0,
},
})
}
// 获取语音对话记录（用于选择声纹向量）
export function getChatHistory(agentId: string) {
return http.Get<ChatHistory[]>(`/agent/${agentId}/chat-history/user`, {
meta: {
ignoreAuth: false,
toast: false,
},
cacheFor: {
expire: 0,
},
})
}
// 新增说话人
export function createVoicePrint(data: CreateSpeakerData) {
return http.Post<null>('/agent/voice-print', data, {
meta: {
ignoreAuth: false,
toast: true,
},
})
}
// 删除声纹
export function deleteVoicePrint(id: string) {
return http.Delete<null>(`/agent/voice-print/${id}`, {
meta: {
ignoreAuth: false,
toast: true,
},
})
}
// 更新声纹信息
export function updateVoicePrint(data: VoicePrint) {
return http.Put<null>('/agent/voice-print', data, {
meta: {
ignoreAuth: false,
toast: true,
},
})
}
main/xiaozhi-mobile-admin/src/components/.gitkeep
View File
main/xiaozhi-mobile-admin/src/env.d.ts
Vendored
+34
View File
@@ -0,0 +1,34 @@
/// <reference types="vite/client" />
/// <reference types="vite-svg-loader" />
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
interface ImportMetaEnv {
/** 网站标题，应用名称 */
readonly VITE_APP_TITLE: string
/** 服务端口号 */
readonly VITE_SERVER_PORT: string
/** 后台接口地址 */
readonly VITE_SERVER_BASEURL: string
/** H5是否需要代理 */
readonly VITE_APP_PROXY: 'true' | 'false'
/** H5是否需要代理，需要的话有个前缀 */
readonly VITE_APP_PROXY_PREFIX: string // 一般是/api
/** 上传图片地址 */
readonly VITE_UPLOAD_BASEURL: string
/** 是否清除console */
readonly VITE_DELETE_CONSOLE: string
// 更多环境变量...
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
declare const __VITE_APP_PROXY__: 'true' | 'false'
declare const __UNI_PLATFORM__: 'app' | 'h5' | 'mp-alipay' | 'mp-baidu' | 'mp-kuaishou' | 'mp-lark' | 'mp-qq' | 'mp-tiktok' | 'mp-weixin' | 'mp-xiaochengxu'
main/xiaozhi-mobile-admin/src/hooks/.gitkeep
View File
main/xiaozhi-mobile-admin/src/hooks/usePageAuth.ts
+50
View File
@@ -0,0 +1,50 @@
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/store'
import { needLoginPages as _needLoginPages, getNeedLoginPages } from '@/utils'
const loginRoute = import.meta.env.VITE_LOGIN_URL
const isDev = import.meta.env.DEV
function isLogined() {
const userStore = useUserStore()
return !!userStore.userInfo.username
}
// 检查当前页面是否需要登录
export function usePageAuth() {
onLoad((options) => {
// 获取当前页面路径
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
const currentPath = `/${currentPage.route}`
// 获取需要登录的页面列表
let needLoginPages: string[] = []
if (isDev) {
needLoginPages = getNeedLoginPages()
}
else {
needLoginPages = _needLoginPages
}
// 检查当前页面是否需要登录
const isNeedLogin = needLoginPages.includes(currentPath)
if (!isNeedLogin) {
return
}
const hasLogin = isLogined()
if (hasLogin) {
return true
}
// 构建重定向URL
const queryString = Object.entries(options || {})
.map(([key, value]) => `${key}=${encodeURIComponent(String(value))}`)
.join('&')
const currentFullPath = queryString ? `${currentPath}?${queryString}` : currentPath
const redirectRoute = `${loginRoute}?redirect=${encodeURIComponent(currentFullPath)}`
// 重定向到登录页
uni.redirectTo({ url: redirectRoute })
})
}
main/xiaozhi-mobile-admin/src/hooks/useRequest.ts
+51
View File
@@ -0,0 +1,51 @@
import type { Ref } from 'vue'
interface IUseRequestOptions<T> {
/** 是否立即执行 */
immediate?: boolean
/** 初始化数据 */
initialData?: T
}
interface IUseRequestReturn<T> {
loading: Ref<boolean>
error: Ref<boolean | Error>
data: Ref<T | undefined>
run: () => Promise<T | undefined>
}
/**
* useRequest是一个定制化的请求钩子，用于处理异步请求和响应。
* @param func 一个执行异步请求的函数，返回一个包含响应数据的Promise。
* @param options 包含请求选项的对象 {immediate, initialData}。
* @param options.immediate 是否立即执行请求，默认为false。
* @param options.initialData 初始化数据，默认为undefined。
* @returns 返回一个对象{loading, error, data, run}，包含请求的加载状态、错误信息、响应数据和手动触发请求的函数。
*/
export default function useRequest<T>(
func: () => Promise<IResData<T>>,
options: IUseRequestOptions<T> = { immediate: false },
): IUseRequestReturn<T> {
const loading = ref(false)
const error = ref(false)
const data = ref<T | undefined>(options.initialData) as Ref<T | undefined>
const run = async () => {
loading.value = true
return func()
.then((res) => {
data.value = res.data
error.value = false
return data.value
})
.catch((err) => {
error.value = err
throw err
})
.finally(() => {
loading.value = false
})
}
options.immediate && run()
return { loading, error, data, run }
}
main/xiaozhi-mobile-admin/src/hooks/useUpload.ts
+160
View File
@@ -0,0 +1,160 @@
import { ref } from 'vue'
import { getEnvBaseUploadUrl } from '@/utils'
const VITE_UPLOAD_BASEURL = `${getEnvBaseUploadUrl()}`
type TfileType = 'image' | 'file'
type TImage = 'png' | 'jpg' | 'jpeg' | 'webp' | '*'
type TFile = 'doc' | 'docx' | 'ppt' | 'zip' | 'xls' | 'xlsx' | 'txt' | TImage
interface TOptions<T extends TfileType> {
formData?: Record<string, any>
maxSize?: number
accept?: T extends 'image' ? TImage[] : TFile[]
fileType?: T
success?: (params: any) => void
error?: (err: any) => void
}
export default function useUpload<T extends TfileType>(options: TOptions<T> = {} as TOptions<T>) {
const {
formData = {},
maxSize = 5 * 1024 * 1024,
accept = ['*'],
fileType = 'image',
success,
error: onError,
} = options
const loading = ref(false)
const error = ref<Error | null>(null)
const data = ref<any>(null)
const handleFileChoose = ({ tempFilePath, size }: { tempFilePath: string, size: number }) => {
if (size > maxSize) {
uni.showToast({
title: `文件大小不能超过 ${maxSize / 1024 / 1024}MB`,
icon: 'none',
})
return
}
// const fileExtension = file?.tempFiles?.name?.split('.').pop()?.toLowerCase()
// const isTypeValid = accept.some((type) => type === '*' || type.toLowerCase() === fileExtension)
// if (!isTypeValid) {
// uni.showToast({
// title: `仅支持 ${accept.join(', ')} 格式的文件`,
// icon: 'none',
// })
// return
// }
loading.value = true
uploadFile({
tempFilePath,
formData,
onSuccess: (res) => {
const { data: _data } = JSON.parse(res)
data.value = _data
// console.log('上传成功', res)
success?.(_data)
},
onError: (err) => {
error.value = err
onError?.(err)
},
onComplete: () => {
loading.value = false
},
})
}
const run = () => {
// 微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替。
// 微信小程序在2023年10月17日之后，使用本API需要配置隐私协议
const chooseFileOptions = {
count: 1,
success: (res: any) => {
console.log('File selected successfully:', res)
// 小程序中res:{errMsg: "chooseImage:ok", tempFiles: [{fileType: "image", size: 48976, tempFilePath: "http://tmp/5iG1WpIxTaJf3ece38692a337dc06df7eb69ecb49c6b.jpeg"}]}
// h5中res:{errMsg: "chooseImage:ok", tempFilePaths: "blob:http://localhost:9000/f74ab6b8-a14d-4cb6-a10d-fcf4511a0de5", tempFiles: [File]}
// h5的File有以下字段：{name: "girl.jpeg", size: 48976, type: "image/jpeg"}
// App中res:{errMsg: "chooseImage:ok", tempFilePaths: "file:///Users/feige/xxx/gallery/1522437259-compressed-IMG_0006.jpg", tempFiles: [File]}
// App的File有以下字段：{path: "file:///Users/feige/xxx/gallery/1522437259-compressed-IMG_0006.jpg", size: 48976}
let tempFilePath = ''
let size = 0
// #ifdef MP-WEIXIN
tempFilePath = res.tempFiles[0].tempFilePath
size = res.tempFiles[0].size
// #endif
// #ifndef MP-WEIXIN
tempFilePath = res.tempFilePaths[0]
size = res.tempFiles[0].size
// #endif
handleFileChoose({ tempFilePath, size })
},
fail: (err: any) => {
console.error('File selection failed:', err)
error.value = err
onError?.(err)
},
}
if (fileType === 'image') {
// #ifdef MP-WEIXIN
uni.chooseMedia({
...chooseFileOptions,
mediaType: ['image'],
})
// #endif
// #ifndef MP-WEIXIN
uni.chooseImage(chooseFileOptions)
// #endif
}
else {
uni.chooseFile({
...chooseFileOptions,
type: 'all',
})
}
}
return { loading, error, data, run }
}
async function uploadFile({
tempFilePath,
formData,
onSuccess,
onError,
onComplete,
}: {
tempFilePath: string
formData: Record<string, any>
onSuccess: (data: any) => void
onError: (err: any) => void
onComplete: () => void
}) {
uni.uploadFile({
url: VITE_UPLOAD_BASEURL,
filePath: tempFilePath,
name: 'file',
formData,
success: (uploadFileRes) => {
try {
const data = uploadFileRes.data
onSuccess(data)
}
catch (err) {
onError(err)
}
},
fail: (err) => {
console.error('Upload failed:', err)
onError(err)
},
complete: onComplete,
})
}
main/xiaozhi-mobile-admin/src/http/README.md
+36
View File
@@ -0,0 +1,36 @@
# 请求库
当前项目使用 Alova 作为唯一的 HTTP 请求库：
## 使用方式
- **Alova HTTP**：路径（src/http/request/alova.ts）
- **示例代码**：src/api/foo-alova.ts 和 src/api/foo.ts
- **API文档**：https://alova.js.org/
## 配置说明
Alova 实例已配置：
- 自动 Token 认证和刷新
- 统一错误处理和提示
- 支持动态域名切换
- 内置请求/响应拦截器
## 使用示例
```typescript
import { http } from '@/http/request/alova'
// GET 请求
http.Get<ResponseType>('/api/path', {
params: { id: 1 },
headers: { 'Custom-Header': 'value' },
meta: { toast: false } // 关闭错误提示
})
// POST 请求
http.Post<ResponseType>('/api/path', data, {
params: { query: 'param' },
headers: { 'Content-Type': 'application/json' }
})
```
main/xiaozhi-mobile-admin/src/http/request/alova.ts
+119
View File
@@ -0,0 +1,119 @@
import type { uniappRequestAdapter } from '@alova/adapter-uniapp'
import type { IResponse } from './types'
import AdapterUniapp from '@alova/adapter-uniapp'
import { createAlova } from 'alova'
import { createServerTokenAuthentication } from 'alova/client'
import VueHook from 'alova/vue'
import { toast } from '@/utils/toast'
import { ContentTypeEnum, ResultEnum, ShowMessage } from './enum'
/**
* 创建请求实例
*/
const { onAuthRequired, onResponseRefreshToken } = createServerTokenAuthentication<
typeof VueHook,
typeof uniappRequestAdapter
>({
refreshTokenOnError: {
isExpired: (error) => {
return error.response?.status === ResultEnum.Unauthorized
},
handler: async () => {
try {
// await authLogin();
}
catch (error) {
// 切换到登录页
await uni.reLaunch({ url: '/pages/login/index' })
throw error
}
},
},
})
/**
* alova 请求实例
*/
const alovaInstance = createAlova({
baseURL: import.meta.env.VITE_SERVER_BASEURL,
...AdapterUniapp(),
timeout: 5000,
statesHook: VueHook,
beforeRequest: onAuthRequired((method) => {
// 设置默认 Content-Type
method.config.headers = {
'Content-Type': ContentTypeEnum.JSON,
'Accept': 'application/json, text/plain, */*',
...method.config.headers,
}
const { config } = method
const ignoreAuth = config.meta?.ignoreAuth
console.log('ignoreAuth===>', ignoreAuth)
// 处理认证信息
if (!ignoreAuth) {
const token = uni.getStorageSync('token')
if (!token) {
// 跳转到登录页
uni.reLaunch({ url: '/pages/login/index' })
throw new Error('[请求错误]：未登录')
}
// 添加 Authorization 头
method.config.headers.Authorization = `Bearer ${token}`
}
// 处理动态域名
if (config.meta?.domain) {
method.baseURL = config.meta.domain
console.log('当前域名', method.baseURL)
}
}),
responded: onResponseRefreshToken((response, method) => {
const { config } = method
const { requestType } = config
const {
statusCode,
data: rawData,
errMsg,
} = response as UniNamespace.RequestSuccessCallbackResult
console.log(response)
// 处理特殊请求类型（上传/下载）
if (requestType === 'upload' || requestType === 'download') {
return response
}
// 处理 HTTP 状态码错误
if (statusCode !== 200) {
const errorMessage = ShowMessage(statusCode) || `HTTP请求错误[${statusCode}]`
console.error('errorMessage===>', errorMessage)
toast.error(errorMessage)
throw new Error(`${errorMessage}：${errMsg}`)
}
// 处理业务逻辑错误
const { code, msg, data } = rawData as IResponse
if (code !== ResultEnum.Success) {
// 检查是否为token失效
if (code === ResultEnum.Unauthorized) {
// 清除token并跳转到登录页
uni.removeStorageSync('token')
uni.reLaunch({ url: '/pages/login/index' })
throw new Error(`请求错误[${code}]：${msg}`)
}
if (config.meta?.toast !== false) {
toast.warning(msg)
}
throw new Error(`请求错误[${code}]：${msg}`)
}
// 处理成功响应，返回业务数据
return data
}),
})
export const http = alovaInstance
main/xiaozhi-mobile-admin/src/http/request/enum.ts
+66
View File
@@ -0,0 +1,66 @@
export enum ResultEnum {
Success = 0, // 成功
Error = 400, // 错误
Unauthorized = 401, // 未授权
Forbidden = 403, // 禁止访问（原为forbidden）
NotFound = 404, // 未找到（原为notFound）
MethodNotAllowed = 405, // 方法不允许（原为methodNotAllowed）
RequestTimeout = 408, // 请求超时（原为requestTimeout）
InternalServerError = 500, // 服务器错误（原为internalServerError）
NotImplemented = 501, // 未实现（原为notImplemented）
BadGateway = 502, // 网关错误（原为badGateway）
ServiceUnavailable = 503, // 服务不可用（原为serviceUnavailable）
GatewayTimeout = 504, // 网关超时（原为gatewayTimeout）
HttpVersionNotSupported = 505, // HTTP版本不支持（原为httpVersionNotSupported）
}
export enum ContentTypeEnum {
JSON = 'application/json;charset=UTF-8',
FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
FORM_DATA = 'multipart/form-data;charset=UTF-8',
}
/**
* 根据状态码，生成对应的错误信息
* @param {number|string} status 状态码
* @returns {string} 错误信息
*/
export function ShowMessage(status: number | string): string {
let message: string
switch (status) {
case 400:
message = '请求错误(400)'
break
case 401:
message = '未授权，请重新登录(401)'
break
case 403:
message = '拒绝访问(403)'
break
case 404:
message = '请求出错(404)'
break
case 408:
message = '请求超时(408)'
break
case 500:
message = '服务器错误(500)'
break
case 501:
message = '服务未实现(501)'
break
case 502:
message = '网络错误(502)'
break
case 503:
message = '服务不可用(503)'
break
case 504:
message = '网络超时(504)'
break
case 505:
message = 'HTTP版本不受支持(505)'
break
default:
message = `连接出错(${status})!`
}
return `${message}，请检查网络或联系管理员！`
}
main/xiaozhi-mobile-admin/src/http/request/types.ts
+22
View File
@@ -0,0 +1,22 @@
// 通用响应格式
export interface IResponse<T = any> {
code: number | string
data: T
msg: string
status: string | number
}
// 分页请求参数
export interface PageParams {
page: number
pageSize: number
[key: string]: any
}
// 分页响应数据
export interface PageResult<T> {
list: T[]
total: number
page: number
pageSize: number
}
main/xiaozhi-mobile-admin/src/layouts/default.vue
+17
View File
@@ -0,0 +1,17 @@
<script lang="ts" setup>
import type { ConfigProviderThemeVars } from 'wot-design-uni'
const themeVars: ConfigProviderThemeVars = {
// colorTheme: 'red',
// buttonPrimaryBgColor: '#07c160',
// buttonPrimaryColor: '#07c160',
}
</script>
<template>
<wd-config-provider :theme-vars="themeVars">
<slot />
<wd-toast />
<wd-message-box />
</wd-config-provider>
</template>
main/xiaozhi-mobile-admin/src/layouts/fg-tabbar/fg-tabbar.vue
+68
View File
@@ -0,0 +1,68 @@
<script setup lang="ts">
import { tabbarStore } from './tabbar'
// 'i-carbon-code',
import { tabbarList as _tabBarList, cacheTabbarEnable, selectedTabbarStrategy, TABBAR_MAP } from './tabbarList'
const customTabbarEnable
= selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
|| selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITHOUT_CACHE
/** tabbarList 里面的 path 从 pages.config.ts 得到 */
const tabbarList = _tabBarList.map(item => ({ ...item, path: `/${item.pagePath}` }))
function selectTabBar({ value: index }: { value: number }) {
const url = tabbarList[index].path
tabbarStore.setCurIdx(index)
if (cacheTabbarEnable) {
uni.switchTab({ url })
}
else {
uni.navigateTo({ url })
}
}
onLoad(() => {
// 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
const hideRedundantTabbarEnable = selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
hideRedundantTabbarEnable
&& uni.hideTabBar({
fail(err) {
console.log('hideTabBar fail: ', err)
},
success(res) {
console.log('hideTabBar success: ', res)
},
})
})
</script>
<template>
<wd-tabbar
v-if="customTabbarEnable"
v-model="tabbarStore.curIdx"
bordered
safe-area-inset-bottom
placeholder
fixed
@change="selectTabBar"
>
<block v-for="(item, idx) in tabbarList" :key="item.path">
<wd-tabbar-item v-if="item.iconType === 'uiLib'" :title="item.text" :icon="item.icon" />
<wd-tabbar-item
v-else-if="item.iconType === 'unocss' || item.iconType === 'iconfont'"
:title="item.text"
>
<template #icon>
<view
h-40rpx
w-40rpx
:class="[item.icon, idx === tabbarStore.curIdx ? 'is-active' : 'is-inactive']"
/>
</template>
</wd-tabbar-item>
<wd-tabbar-item v-else-if="item.iconType === 'local'" :title="item.text">
<template #icon>
<image :src="item.icon" h-40rpx w-40rpx />
</template>
</wd-tabbar-item>
</block>
</wd-tabbar>
</template>
main/xiaozhi-mobile-admin/src/layouts/fg-tabbar/tabbar.md
+17
View File
@@ -0,0 +1,17 @@
# tabbar 说明
`tabbar` 分为 `4 种` 情况：
- 0 `无 tabbar`，只有一个页面入口，底部无 `tabbar` 显示；常用语临时活动页。
- 1 `原生 tabbar`，使用 `switchTab` 切换 tabbar，`tabbar` 页面有缓存。
- 优势：原生自带的 tabbar，最先渲染，有缓存。
- 劣势：只能使用 2 组图片来切换选中和非选中状态，修改颜色只能重新换图片（或者用 iconfont）。
- 2 `有缓存自定义 tabbar`，使用 `switchTab` 切换 tabbar，`tabbar` 页面有缓存。使用了第三方 UI 库的 `tabbar` 组件，并隐藏了原生 `tabbar` 的显示。
- 优势：可以随意配置自己想要的 `svg icon`，切换字体颜色方便。有缓存。可以实现各种花里胡哨的动效等。
- 劣势：首次点击 tababr 会闪烁。
- 3 `无缓存自定义 tabbar`，使用 `navigateTo` 切换 `tabbar`，`tabbar` 页面无缓存。使用了第三方 UI 库的 `tabbar` 组件。
- 优势：可以随意配置自己想要的 svg icon，切换字体颜色方便。可以实现各种花里胡哨的动效等。
- 劣势：首次点击 `tababr` 会闪烁，无缓存。
> 注意：花里胡哨的效果需要自己实现，本模版不提供。
main/xiaozhi-mobile-admin/src/layouts/fg-tabbar/tabbar.ts
+11
View File
@@ -0,0 +1,11 @@
/**
* tabbar 状态，增加 storageSync 保证刷新浏览器时在正确的 tabbar 页面
* 使用reactive简单状态，而不是 pinia 全局状态
*/
export const tabbarStore = reactive({
curIdx: uni.getStorageSync('app-tabbar-index') || 0,
setCurIdx(idx: number) {
this.curIdx = idx
uni.setStorageSync('app-tabbar-index', idx)
},
})
main/xiaozhi-mobile-admin/src/layouts/fg-tabbar/tabbarList.ts
+97
View File
@@ -0,0 +1,97 @@
import type { TabBar } from '@uni-helper/vite-plugin-uni-pages'
type FgTabBarItem = TabBar['list'][0] & {
icon: string
iconType: 'uiLib' | 'unocss' | 'iconfont'
}
/**
* tabbar 选择的策略，更详细的介绍见 tabbar.md 文件
* 0: 'NO_TABBAR' `无 tabbar`
* 1: 'NATIVE_TABBAR' `完全原生 tabbar`
* 2: 'CUSTOM_TABBAR_WITH_CACHE' `有缓存自定义 tabbar`
* 3: 'CUSTOM_TABBAR_WITHOUT_CACHE' `无缓存自定义 tabbar`
*
* 温馨提示：本文件的任何代码更改了之后，都需要重新运行，否则 pages.json 不会更新导致错误
*/
export const TABBAR_MAP = {
NO_TABBAR: 0,
NATIVE_TABBAR: 1,
CUSTOM_TABBAR_WITH_CACHE: 2,
CUSTOM_TABBAR_WITHOUT_CACHE: 3,
}
// TODO：通过这里切换使用tabbar的策略
export const selectedTabbarStrategy = TABBAR_MAP.NATIVE_TABBAR
// selectedTabbarStrategy==NATIVE_TABBAR(1) 时，需要填 iconPath 和 selectedIconPath
// selectedTabbarStrategy==CUSTOM_TABBAR(2,3) 时，需要填 icon 和 iconType
// selectedTabbarStrategy==NO_TABBAR(0) 时，tabbarList 不生效
export const tabbarList: FgTabBarItem[] = [
{
iconPath: 'static/tabbar/robot.png',
selectedIconPath: 'static/tabbar/robot_activate.png',
pagePath: 'pages/index/index',
text: '首页',
icon: 'home',
// 选用 UI 框架自带的 icon 时，iconType 为 uiLib
iconType: 'uiLib',
},
{
iconPath: 'static/tabbar/device.png',
selectedIconPath: 'static/tabbar/device_activate.png',
pagePath: 'pages/device/index',
text: '设备管理',
icon: 'i-carbon-laptop',
// 注意 unocss 的图标需要在 页面上引入一下，或者配置到 unocss.config.ts 的 safelist 中
iconType: 'uiLib',
},
{
iconPath: 'static/tabbar/microphone.png',
selectedIconPath: 'static/tabbar/microphone_activate.png',
pagePath: 'pages/voiceprint/index',
text: '声纹识别',
icon: 'i-carbon-microphone-filled',
iconType: 'uiLib',
},
{
iconPath: 'static/tabbar/chat.png',
selectedIconPath: 'static/tabbar/chat_activate.png',
pagePath: 'pages/chat-history/index',
text: '聊天记录',
icon: 'i-carbon-chat-bot',
iconType: 'uiLib',
},
// {
// pagePath: 'pages/my/index',
// text: '我的',
// icon: '/static/logo.svg',
// iconType: 'local',
// },
// {
// pagePath: 'pages/mine/index',
// text: '我的',
// icon: 'iconfont icon-my',
// iconType: 'iconfont',
// },
]
// NATIVE_TABBAR(1) 和 CUSTOM_TABBAR_WITH_CACHE(2) 时，需要tabbar缓存
export const cacheTabbarEnable = selectedTabbarStrategy === TABBAR_MAP.NATIVE_TABBAR
|| selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
const _tabbar: TabBar = {
// 只有微信小程序支持 custom。App 和 H5 不生效
custom: selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE,
color: '#e6e6e6',
selectedColor: '#667dea',
backgroundColor: '#fff',
borderStyle: 'black',
height: '50px',
fontSize: '10px',
iconWidth: '24px',
spacing: '3px',
list: tabbarList as unknown as TabBar['list'],
}
// 0和1 需要显示底部的tabbar的各种配置，以利用缓存
export const tabBar = cacheTabbarEnable ? _tabbar : undefined
main/xiaozhi-mobile-admin/src/layouts/tabbar.vue
+19
View File
@@ -0,0 +1,19 @@
<script lang="ts" setup>
import type { ConfigProviderThemeVars } from 'wot-design-uni'
import FgTabbar from './fg-tabbar/fg-tabbar.vue'
const themeVars: ConfigProviderThemeVars = {
// colorTheme: 'red',
// buttonPrimaryBgColor: '#07c160',
// buttonPrimaryColor: '#07c160',
}
</script>
<template>
<wd-config-provider :theme-vars="themeVars">
<slot />
<FgTabbar />
<wd-toast />
<wd-message-box />
</wd-config-provider>
</template>
main/xiaozhi-mobile-admin/src/main.ts
+19
View File
@@ -0,0 +1,19 @@
import { VueQueryPlugin } from '@tanstack/vue-query'
import { createSSRApp } from 'vue'
import App from './App.vue'
import { routeInterceptor } from './router/interceptor'
import store from './store'
import '@/style/index.scss'
import 'virtual:uno.css'
export function createApp() {
const app = createSSRApp(App)
app.use(store)
app.use(routeInterceptor)
app.use(VueQueryPlugin)
return {
app,
}
}
main/xiaozhi-mobile-admin/src/pages-sub/demo/index.vue
+27
View File
@@ -0,0 +1,27 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationBarTitleText": "分包页面"
}
}
</route>
<script lang="ts" setup>
// code here
</script>
<template>
<view class="text-center">
<view class="m-8">
http://localhost:9000/#/pages-sub/demo/index
</view>
<view class="text-green-500">
分包页面demo
</view>
</view>
</template>
<style lang="scss" scoped>
//
</style>
main/xiaozhi-mobile-admin/src/pages/agent/edit.vue
+1085
View File
File diff suppressed because it is too large Load Diff
main/xiaozhi-mobile-admin/src/pages/agent/tools.vue
+726
View File
@@ -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>
main/xiaozhi-mobile-admin/src/pages/chat-history/detail.vue
+331
View File
@@ -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>
main/xiaozhi-mobile-admin/src/pages/chat-history/index.vue
+342
View File
@@ -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>
main/xiaozhi-mobile-admin/src/pages/device-config/components/ultrasonic-config.vue
+684
View File
@@ -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>
main/xiaozhi-mobile-admin/src/pages/device-config/components/wifi-config.vue
+230
View File
@@ -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>
main/xiaozhi-mobile-admin/src/pages/device-config/components/wifi-selector.vue
+556
View File
@@ -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>
main/xiaozhi-mobile-admin/src/pages/device-config/index.vue
+154
View File
@@ -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>
main/xiaozhi-mobile-admin/src/pages/device/index.vue
+367
View File
@@ -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>
main/xiaozhi-mobile-admin/src/pages/index/index.vue
+599
View File
@@ -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>
main/xiaozhi-mobile-admin/src/pages/login/index.vue
+777
View File
@@ -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>
main/xiaozhi-mobile-admin/src/pages/register/index.vue
+877
View File
@@ -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>
main/xiaozhi-mobile-admin/src/pages/voiceprint/index.vue
+544
View File
@@ -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>
main/xiaozhi-mobile-admin/src/router/interceptor.ts
+66
View File
@@ -0,0 +1,66 @@
/**
* by 菲鸽 on 2024-03-06
* 路由拦截，通常也是登录拦截
* 可以设置路由白名单，或者黑名单，看业务需要选哪一个
* 我这里应为大部分都可以随便进入，所以使用黑名单
*/
import { useUserStore } from '@/store'
import { needLoginPages as _needLoginPages, getLastPage, getNeedLoginPages } from '@/utils'
// TODO Check
const loginRoute = import.meta.env.VITE_LOGIN_URL
function isLogined() {
const userStore = useUserStore()
return !!userStore.userInfo.username
}
const isDev = import.meta.env.DEV
// 黑名单登录拦截器 - （适用于大部分页面不需要登录，少部分页面需要登录）
const navigateToInterceptor = {
// 注意，这里的url是 '/' 开头的，如 '/pages/index/index'，跟 'pages.json' 里面的 path 不同
// 增加对相对路径的处理，BY 网友 @ideal
invoke({ url }: { url: string }) {
// console.log(url) // /pages/route-interceptor/index?name=feige&age=30
let path = url.split('?')[0]
console.log('页面变动')
// 处理相对路径
if (!path.startsWith('/')) {
const currentPath = getLastPage().route
const normalizedCurrentPath = currentPath.startsWith('/') ? currentPath : `/${currentPath}`
const baseDir = normalizedCurrentPath.substring(0, normalizedCurrentPath.lastIndexOf('/'))
path = `${baseDir}/${path}`
}
let needLoginPages: string[] = []
// 为了防止开发时出现BUG，这里每次都获取一下。生产环境可以移到函数外，性能更好
if (isDev) {
needLoginPages = getNeedLoginPages()
}
else {
needLoginPages = _needLoginPages
}
const isNeedLogin = needLoginPages.includes(path)
if (!isNeedLogin) {
return true
}
const hasLogin = isLogined()
if (hasLogin) {
return true
}
const redirectRoute = `${loginRoute}?redirect=${encodeURIComponent(url)}`
uni.navigateTo({ url: redirectRoute })
return false
},
}
export const routeInterceptor = {
install() {
uni.addInterceptor('navigateTo', navigateToInterceptor)
uni.addInterceptor('reLaunch', navigateToInterceptor)
uni.addInterceptor('redirectTo', navigateToInterceptor)
uni.addInterceptor('switchTab', navigateToInterceptor)
},
}
main/xiaozhi-mobile-admin/src/static/app/icons/1024x1024.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 448 KiB

main/xiaozhi-mobile-admin/src/static/app/icons/120x120.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

main/xiaozhi-mobile-admin/src/static/app/icons/144x144.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

main/xiaozhi-mobile-admin/src/static/app/icons/152x152.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

main/xiaozhi-mobile-admin/src/static/app/icons/167x167.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

main/xiaozhi-mobile-admin/src/static/app/icons/180x180.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

main/xiaozhi-mobile-admin/src/static/app/icons/192x192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

main/xiaozhi-mobile-admin/src/static/app/icons/20x20.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

main/xiaozhi-mobile-admin/src/static/app/icons/29x29.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

main/xiaozhi-mobile-admin/src/static/app/icons/40x40.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

main/xiaozhi-mobile-admin/src/static/app/icons/58x58.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

main/xiaozhi-mobile-admin/src/static/app/icons/60x60.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

main/xiaozhi-mobile-admin/src/static/app/icons/72x72.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

main/xiaozhi-mobile-admin/src/static/app/icons/76x76.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

main/xiaozhi-mobile-admin/src/static/app/icons/80x80.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

main/xiaozhi-mobile-admin/src/static/app/icons/87x87.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

main/xiaozhi-mobile-admin/src/static/app/icons/96x96.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

main/xiaozhi-mobile-admin/src/static/images/.gitkeep
View File
main/xiaozhi-mobile-admin/src/static/images/default-avatar.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 560 B

main/xiaozhi-mobile-admin/src/static/images/home/main-top-bg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 956 KiB

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

After

Width:  |  Height:  |  Size: 13 KiB

main/xiaozhi-mobile-admin/src/static/logo.svg
+33
View File
@@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.39 113.39">
<defs>
<style>
.cls-1 {
fill: none;
}
.cls-2 {
fill: #d14328;
}
.cls-3 {
fill: #2c8d3a;
}
</style>
</defs>
<g id="_图层_1-2" data-name="图层 1">
<g>
<rect class="cls-1" width="113.39" height="113.39" />
<g>
<path class="cls-3"
d="M86.31,11.34H25.08c-8.14,0-14.74,6.6-14.74,14.74v61.23c0,8.14,6.6,14.74,14.74,14.74h61.23c.12,0,.24-.02,.37-.02-9.76-.2-17.64-8.18-17.64-17.99,0-.56,.03-1.12,.08-1.67H34.1c-1.57,0-2.83-1.27-2.83-2.83V32.43c0-.78,.63-1.42,1.42-1.42h9.17c.78,0,1.42,.63,1.42,1.42v36.52c0,.78,.63,1.42,1.42,1.42h22.02c.78,0,1.42-.63,1.42-1.42V32.43c0-.78,.63-1.42,1.42-1.42h9.17c.78,0,1.42,.63,1.42,1.42v34.99c2.13-.89,4.47-1.39,6.92-1.39,5.66,0,10.7,2.63,14.01,6.72V26.08c0-8.14-6.6-14.74-14.74-14.74Z" />
<g>
<path class="cls-2"
d="M87.04,68.03c-8.83,0-16.01,7.18-16.01,16.01s7.18,16.01,16.01,16.01,16.01-7.18,16.01-16.01-7.18-16.01-16.01-16.01Zm-.27,24.84h-7.2v-3h1.18v-10.48h4.58v2.81h1.42c.84,0,1.46-.16,1.88-.48s.62-.87,.62-1.64c0-.69-.25-1.17-.74-1.45s-1.19-.42-2.09-.42h-6.84v-3h7.2c2.38,0,4.15,.38,5.31,1.15,1.16,.77,1.74,1.93,1.74,3.48,0,1.71-.83,2.93-2.5,3.64,1.07,.4,1.87,.95,2.39,1.65s.79,1.56,.79,2.58c0,3.44-2.58,5.16-7.73,5.16Z" />
<path class="cls-2"
d="M86.49,85.17h-1.16v4.7h1.8c.81,0,1.46-.18,1.94-.55s.72-.95,.72-1.73c0-.86-.25-1.48-.74-1.85s-1.35-.56-2.56-.56Z" />
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

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

After

Width:  |  Height:  |  Size: 2.1 KiB

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

After

Width:  |  Height:  |  Size: 2.1 KiB

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

After

Width:  |  Height:  |  Size: 4.0 KiB

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

After

Width:  |  Height:  |  Size: 3.9 KiB

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

After

Width:  |  Height:  |  Size: 1.3 KiB

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

After

Width:  |  Height:  |  Size: 1.4 KiB

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

After

Width:  |  Height:  |  Size: 1.3 KiB

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

After

Width:  |  Height:  |  Size: 1.4 KiB

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

After

Width:  |  Height:  |  Size: 3.1 KiB

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

After

Width:  |  Height:  |  Size: 3.2 KiB

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

After

Width:  |  Height:  |  Size: 2.4 KiB

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

After

Width:  |  Height:  |  Size: 2.5 KiB

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

After

Width:  |  Height:  |  Size: 3.4 KiB

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

After

Width:  |  Height:  |  Size: 3.4 KiB

Some files were not shown because too many files have changed in this diff Show More