Merge pull request #2018 from xinnan-tech/feature/mobile-app
Feature/mobile app
@@ -175,3 +175,11 @@ uploadfile
|
|||||||
*.json
|
*.json
|
||||||
.vscode
|
.vscode
|
||||||
.cursor
|
.cursor
|
||||||
|
|
||||||
|
!package.json
|
||||||
|
!**/package.json
|
||||||
|
|
||||||
|
# Do not ignore env and json files inside manager-mobile
|
||||||
|
!main/manager-mobile/**/env/
|
||||||
|
!main/manager-mobile/**/.env*
|
||||||
|
!main/manager-mobile/**/*.json
|
||||||
|
After Width: | Height: | Size: 655 KiB |
|
After Width: | Height: | Size: 283 KiB |
|
After Width: | Height: | Size: 402 KiB |
|
After Width: | Height: | Size: 579 KiB |
|
After Width: | Height: | Size: 418 KiB |
@@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
extends: ['@commitlint/config-conventional'],
|
||||||
|
}
|
||||||
@@ -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 # 关闭末尾空格修剪
|
||||||
@@ -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
|
||||||
@@ -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
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2025 Junsen
|
||||||
|
|
||||||
|
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.
|
||||||
@@ -0,0 +1,170 @@
|
|||||||
|
## 智控台移动版(manager-mobile)
|
||||||
|
基于 uni-app v3 + Vue 3 + Vite 的跨端移动管理端,支持 App(Android & iOS)和微信小程序。
|
||||||
|
|
||||||
|
### 平台兼容性
|
||||||
|
|
||||||
|
| H5 | iOS | Android | 微信小程序 | 字节小程序 | 快手小程序 | 支付宝小程序 | 钉钉小程序 | 百度小程序 |
|
||||||
|
| -- | --- | ------- | ---------- | ---------- | ---------- | ------------ | ---------- | ---------- |
|
||||||
|
| × | √ | √ | √ | × | × | × | × | × |
|
||||||
|
|
||||||
|
提示:不同 UI 组件在不同平台的适配度略有差异,请以对应组件库文档为准。
|
||||||
|
|
||||||
|
### 开发环境要求
|
||||||
|
- Node >= 18
|
||||||
|
- pnpm >= 7.30(建议使用项目中声明的 `pnpm@10.x`)
|
||||||
|
- 可选:HBuilderX(App 调试/打包)、微信开发者工具(微信小程序)
|
||||||
|
|
||||||
|
### 快速开始
|
||||||
|
1) 配置环境变量
|
||||||
|
- 复制 `env/.env.example` 为 `env/.env.development`
|
||||||
|
- 根据实际情况修改配置项(特别是 `VITE_SERVER_BASEURL`、`VITE_UNI_APPID`、`VITE_WX_APPID`)
|
||||||
|
|
||||||
|
2) 安装依赖
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm i
|
||||||
|
```
|
||||||
|
|
||||||
|
3) 本地开发(热更新)
|
||||||
|
- h5: `pnpm dev:h5`,然后观察启动日志显示的ip端口号
|
||||||
|
- 微信小程序:`pnpm dev:mp` 或 `pnpm dev:mp-weixin`,然后用微信开发者工具导入 `dist/dev/mp-weixin`
|
||||||
|
- App:用 HBuilderX 导入 `manager-mobile`,然后参考下面的教程就能运行了
|
||||||
|
|
||||||
|
### 环境变量与配置
|
||||||
|
项目使用自定义 `env` 目录存放环境文件,按 Vite 规范命名:`.env.development`、`.env.production` 等。
|
||||||
|
|
||||||
|
关键变量(部分):
|
||||||
|
- VITE_APP_TITLE:应用名称(写入 `manifest.config.ts`)
|
||||||
|
- VITE_UNI_APPID:uni-app 应用 appid(App)
|
||||||
|
- VITE_WX_APPID:微信小程序 appid(mp-weixin)
|
||||||
|
- VITE_FALLBACK_LOCALE:默认语言,如 `zh-Hans`
|
||||||
|
- VITE_SERVER_BASEURL:服务端基础地址(HTTP 请求 baseURL)
|
||||||
|
- VITE_DELETE_CONSOLE:构建时是否移除 console(`true`/`false`)
|
||||||
|
- VITE_SHOW_SOURCEMAP:是否生成 sourcemap(默认关闭)
|
||||||
|
- VITE_LOGIN_URL:未登录跳转的登录页路径(路由拦截器使用)
|
||||||
|
|
||||||
|
示例(`env/.env.development`):
|
||||||
|
```env
|
||||||
|
VITE_APP_TITLE=小智
|
||||||
|
VITE_FALLBACK_LOCALE=zh-Hans
|
||||||
|
VITE_UNI_APPID=
|
||||||
|
VITE_WX_APPID=
|
||||||
|
|
||||||
|
VITE_SERVER_BASEURL=http://localhost:8080
|
||||||
|
|
||||||
|
VITE_DELETE_CONSOLE=false
|
||||||
|
VITE_SHOW_SOURCEMAP=false
|
||||||
|
VITE_LOGIN_URL=/pages/login/index
|
||||||
|
```
|
||||||
|
|
||||||
|
说明:
|
||||||
|
- `manifest.config.ts` 会从 `env` 读取标题、appid、语言等配置。
|
||||||
|
|
||||||
|
### 重要注意事项
|
||||||
|
⚠️ **部署前必须修改的配置项:**
|
||||||
|
|
||||||
|
1. **应用 ID 配置**
|
||||||
|
- `VITE_UNI_APPID`:需要在 [DCloud 开发者中心](https://dev.dcloud.net.cn/) 创建应用并获取 AppID
|
||||||
|
- `VITE_WX_APPID`:需要在 [微信公众平台](https://mp.weixin.qq.com/) 注册小程序并获取 AppID
|
||||||
|
|
||||||
|
2. **服务端地址**
|
||||||
|
- `VITE_SERVER_BASEURL`:修改为您的实际服务端地址
|
||||||
|
|
||||||
|
3. **应用信息**
|
||||||
|
- `VITE_APP_TITLE`:修改为您的应用名称
|
||||||
|
- 更新 `src/static/logo.png` 等图标资源
|
||||||
|
|
||||||
|
4. **其他配置**
|
||||||
|
- 检查 `manifest.config.ts` 中的应用配置信息
|
||||||
|
- 根据需要修改 `src/layouts/fg-tabbar/tabbarList.ts` 中的 tabbar 配置
|
||||||
|
|
||||||
|
### 详细操作指南
|
||||||
|
|
||||||
|
#### 1. 获取 uni-app AppID
|
||||||
|

|
||||||
|
- 复制生成的 AppID 到环境变量 `VITE_UNI_APPID` 中
|
||||||
|
|
||||||
|
#### 2. 本地运行步骤
|
||||||
|

|
||||||
|
|
||||||
|
**App 本地调试:**
|
||||||
|
1. 用 HBuilderX 导入 `manager-mobile` 目录
|
||||||
|
2. 重新识别项目
|
||||||
|
3. 连接手机或使用模拟器进行真机调试
|
||||||
|
|
||||||
|
**项目识别问题解决:**
|
||||||
|

|
||||||
|
|
||||||
|
如果 HBuilderX 无法正确识别项目类型:
|
||||||
|
- 在项目根目录右键选择"重新识别项目类型"
|
||||||
|
- 确保项目被识别为 "uni-app" 项目
|
||||||
|
|
||||||
|
### 路由与鉴权
|
||||||
|
- 在 `src/main.ts` 中注册了路由拦截插件 `routeInterceptor`。
|
||||||
|
- 黑名单拦截:仅对配置为需要登录的页面进行校验(来源 `@/utils` 的 `getNeedLoginPages`)。
|
||||||
|
- 登录判断:基于用户信息(`pinia` 的 `useUserStore`),未登录将跳转到 `VITE_LOGIN_URL`,并附带重定向回原页面的参数。
|
||||||
|
|
||||||
|
### 网络请求
|
||||||
|
- 基于 `alova` + `@alova/adapter-uniapp`,统一在 `src/http/request/alova.ts` 创建实例。
|
||||||
|
- `baseURL` 读取环境配置(`getEnvBaseUrl`),可通过 `method.config.meta.domain` 动态切换域名。
|
||||||
|
- 认证:默认从本地 `token`(`uni.getStorageSync('token')`)注入 `Authorization` 头,缺失则重定向登录。
|
||||||
|
- 响应:统一处理 `statusCode !== 200` 的 HTTP 错误与业务 `code !== 0` 的错误;`401` 会清除 token 并跳转登录。
|
||||||
|
|
||||||
|
### 构建与发布
|
||||||
|
|
||||||
|
**微信小程序:**
|
||||||
|
1. 确保已配置正确的 `VITE_WX_APPID`
|
||||||
|
2. 运行 `pnpm build:mp`,产物在 `dist/build/mp-weixin`
|
||||||
|
3. 用微信开发者工具导入项目目录,并上传代码
|
||||||
|
4. 在微信公众平台提交审核
|
||||||
|
|
||||||
|
**Android & iOS App:**
|
||||||
|
|
||||||
|
#### 3. App 打包发行步骤
|
||||||
|
|
||||||
|
**步骤一:准备打包**
|
||||||
|

|
||||||
|
|
||||||
|
1. 确保已配置正确的 `VITE_UNI_APPID`
|
||||||
|
2. 运行 `pnpm build:app`,产物在 `dist/build/app`
|
||||||
|
3. 用 HBuilderX 导入项目目录
|
||||||
|
4. 在 HBuilderX 中点击"发行" → "原生App-云打包"
|
||||||
|
|
||||||
|
**步骤二:配置打包参数**
|
||||||
|

|
||||||
|
|
||||||
|
1. **应用图标和启动图**:上传应用图标和启动页面图片
|
||||||
|
2. **应用版本号**:设置版本号和版本名称
|
||||||
|
3. **签名证书**:
|
||||||
|
- Android:上传 keystore 证书文件
|
||||||
|
- iOS:配置开发者证书和描述文件
|
||||||
|
4. **包名配置**:设置应用的包名(Bundle ID)
|
||||||
|
5. **打包类型**:选择测试包或正式包
|
||||||
|
6. 点击"打包"开始云打包流程
|
||||||
|
|
||||||
|
**发布到应用商店:**
|
||||||
|
- **Android**:将生成的 APK 文件上传到各大 Android 应用市场
|
||||||
|
- **iOS**:将生成的 IPA 文件通过 App Store Connect 上传到 App Store(需要 Apple 开发者账号)
|
||||||
|
|
||||||
|
### 约定与工程化
|
||||||
|
- 页面与分包:由 `@uni-helper/vite-plugin-uni-pages` 与 `pages.config.ts` 统一生成;tabbar 配置在 `src/layouts/fg-tabbar/tabbarList.ts`。
|
||||||
|
- 组件与 hooks 自动导入:见 `vite.config.ts` 中 `unplugin-auto-import` 与 `@uni-helper/vite-plugin-uni-components`。
|
||||||
|
- 样式:使用 UnoCSS 与 `src/style/index.scss`。
|
||||||
|
- 状态管理:`pinia` + `pinia-plugin-persistedstate`。
|
||||||
|
- 代码规范:内置 `eslint`、`husky`、`lint-staged`,提交前自动格式化(`lint-staged`)。
|
||||||
|
|
||||||
|
### 常用脚本
|
||||||
|
```bash
|
||||||
|
# 开发
|
||||||
|
pnpm dev:mp # 等价 dev:mp-weixin
|
||||||
|
|
||||||
|
# 构建
|
||||||
|
pnpm build:mp # 等价 build:mp-weixin
|
||||||
|
|
||||||
|
# 其他
|
||||||
|
pnpm type-check
|
||||||
|
pnpm lint && pnpm lint:fix
|
||||||
|
```
|
||||||
|
|
||||||
|
### License
|
||||||
|
MIT
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
VITE_APP_TITLE = '小智'
|
||||||
|
VITE_APP_PORT = 9000
|
||||||
|
|
||||||
|
VITE_UNI_APPID = '__UNI__36A515E'
|
||||||
|
VITE_WX_APPID = 'wxa2abb91f64032a2b'
|
||||||
|
|
||||||
|
# h5部署网站的base,配置到 manifest.config.ts 里的 h5.router.base
|
||||||
|
VITE_APP_PUBLIC_BASE=/
|
||||||
|
|
||||||
|
# 登录页面
|
||||||
|
VITE_LOGIN_URL = '/pages/login/index'
|
||||||
|
# 第一个请求地址
|
||||||
|
VITE_SERVER_BASEURL = 'https://2662r3426b.vicp.fun/xiaozhi'
|
||||||
|
|
||||||
|
VITE_UPLOAD_BASEURL = '/otaMag/upload'
|
||||||
|
|
||||||
|
# h5是否需要配置代理
|
||||||
|
VITE_APP_PROXY=true
|
||||||
|
VITE_APP_PROXY_PREFIX = '/xiaozhi'
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
|
||||||
|
NODE_ENV = 'development'
|
||||||
|
# 是否去除console 和 debugger
|
||||||
|
VITE_DELETE_CONSOLE = false
|
||||||
|
# 是否开启sourcemap
|
||||||
|
VITE_SHOW_SOURCEMAP = true
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
|
||||||
|
NODE_ENV = 'development'
|
||||||
|
# 是否去除console 和 debugger
|
||||||
|
VITE_DELETE_CONSOLE = true
|
||||||
|
# 是否开启sourcemap
|
||||||
|
VITE_SHOW_SOURCEMAP = false
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
|
||||||
|
NODE_ENV = 'development'
|
||||||
|
# 是否去除console 和 debugger
|
||||||
|
VITE_DELETE_CONSOLE = false
|
||||||
@@ -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,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
After Width: | Height: | Size: 14 KiB |
@@ -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>
|
||||||
@@ -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',
|
||||||
|
})
|
||||||
@@ -0,0 +1,161 @@
|
|||||||
|
{
|
||||||
|
"name": "xiaozhi-mobile-admin",
|
||||||
|
"type": "commonjs",
|
||||||
|
"version": "3.4.0",
|
||||||
|
"unibest-version": "3.4.0",
|
||||||
|
"packageManager": "pnpm@10.10.0",
|
||||||
|
"description": "xiaozhi-esp32-server的移动端管理后台",
|
||||||
|
"generate-time": "2025-08-04",
|
||||||
|
"author": {
|
||||||
|
"name": "huangjunsen",
|
||||||
|
"zhName": "黄俊森",
|
||||||
|
"email": "huangjunsen@xiaozhi.com",
|
||||||
|
"github": "https://github.com/huangjunsen0406",
|
||||||
|
"gitee": "https://gitee.com/huang-jun-sen"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"homepage": "https://github.com/xinnan-tech/xiaozhi-esp32-server",
|
||||||
|
"repository": "https://github.com/xinnan-tech/xiaozhi-esp32-server",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/xinnan-tech/xiaozhi-esp32-server/issues"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18",
|
||||||
|
"pnpm": ">=7.30"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"preinstall": "npx only-allow pnpm",
|
||||||
|
"uvm": "npx @dcloudio/uvm@latest",
|
||||||
|
"uvm-rm": "node ./scripts/postupgrade.js",
|
||||||
|
"postuvm": "echo upgrade uni-app success!",
|
||||||
|
"dev:app": "uni -p app",
|
||||||
|
"dev:app-android": "uni -p app-android",
|
||||||
|
"dev:app-ios": "uni -p app-ios",
|
||||||
|
"dev:custom": "uni -p",
|
||||||
|
"dev": "uni",
|
||||||
|
"dev:h5": "uni",
|
||||||
|
"dev:h5:ssr": "uni --ssr",
|
||||||
|
"dev:mp": "uni -p mp-weixin",
|
||||||
|
"dev:mp-alipay": "uni -p mp-alipay",
|
||||||
|
"dev:mp-baidu": "uni -p mp-baidu",
|
||||||
|
"dev:mp-jd": "uni -p mp-jd",
|
||||||
|
"dev:mp-kuaishou": "uni -p mp-kuaishou",
|
||||||
|
"dev:mp-lark": "uni -p mp-lark",
|
||||||
|
"dev:mp-qq": "uni -p mp-qq",
|
||||||
|
"dev:mp-toutiao": "uni -p mp-toutiao",
|
||||||
|
"dev:mp-weixin": "uni -p mp-weixin",
|
||||||
|
"dev:mp-xhs": "uni -p mp-xhs",
|
||||||
|
"dev:quickapp-webview": "uni -p quickapp-webview",
|
||||||
|
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
|
||||||
|
"dev:quickapp-webview-union": "uni -p quickapp-webview-union",
|
||||||
|
"build:app": "uni build -p app",
|
||||||
|
"build:app-android": "uni build -p app-android",
|
||||||
|
"build:app-ios": "uni build -p app-ios",
|
||||||
|
"build:custom": "uni build -p",
|
||||||
|
"build:h5": "uni build",
|
||||||
|
"build": "uni build",
|
||||||
|
"build:h5:ssr": "uni build --ssr",
|
||||||
|
"build:mp-alipay": "uni build -p mp-alipay",
|
||||||
|
"build:mp": "uni build -p mp-weixin",
|
||||||
|
"build:mp-baidu": "uni build -p mp-baidu",
|
||||||
|
"build:mp-jd": "uni build -p mp-jd",
|
||||||
|
"build:mp-kuaishou": "uni build -p mp-kuaishou",
|
||||||
|
"build:mp-lark": "uni build -p mp-lark",
|
||||||
|
"build:mp-qq": "uni build -p mp-qq",
|
||||||
|
"build:mp-toutiao": "uni build -p mp-toutiao",
|
||||||
|
"build:mp-weixin": "uni build -p mp-weixin",
|
||||||
|
"build:mp-xhs": "uni build -p mp-xhs",
|
||||||
|
"build:quickapp-webview": "uni build -p quickapp-webview",
|
||||||
|
"build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
|
||||||
|
"build:quickapp-webview-union": "uni build -p quickapp-webview-union",
|
||||||
|
"type-check": "vue-tsc --noEmit",
|
||||||
|
"openapi-ts-request": "openapi-ts",
|
||||||
|
"prepare": "git init && husky",
|
||||||
|
"lint": "eslint",
|
||||||
|
"lint:fix": "eslint --fix"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@alova/adapter-uniapp": "^2.0.14",
|
||||||
|
"@alova/shared": "^1.3.1",
|
||||||
|
"@dcloudio/uni-app": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-app-harmony": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-app-plus": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-components": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-h5": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-mp-alipay": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-mp-baidu": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-mp-harmony": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-mp-jd": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-mp-kuaishou": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-mp-lark": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-mp-qq": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-mp-toutiao": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-mp-weixin": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-mp-xhs": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-quickapp-webview": "3.0.0-4060620250520001",
|
||||||
|
"@tanstack/vue-query": "^5.62.16",
|
||||||
|
"abortcontroller-polyfill": "^1.7.8",
|
||||||
|
"alova": "^3.3.3",
|
||||||
|
"dayjs": "1.11.10",
|
||||||
|
"js-cookie": "^3.0.5",
|
||||||
|
"pinia": "2.0.36",
|
||||||
|
"pinia-plugin-persistedstate": "3.2.1",
|
||||||
|
"vue": "^3.4.21",
|
||||||
|
"wot-design-uni": "^1.9.1",
|
||||||
|
"z-paging": "2.8.7"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@alova/wormhole": "^1.0.8",
|
||||||
|
"@antfu/eslint-config": "^4.15.0",
|
||||||
|
"@commitlint/cli": "^19.8.1",
|
||||||
|
"@commitlint/config-conventional": "^19.8.1",
|
||||||
|
"@dcloudio/types": "^3.4.8",
|
||||||
|
"@dcloudio/uni-automator": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-cli-shared": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-stacktracey": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/uni-uts-v1": "3.0.0-4060620250520001",
|
||||||
|
"@dcloudio/vite-plugin-uni": "3.0.0-4060620250520001",
|
||||||
|
"@esbuild/darwin-arm64": "0.20.2",
|
||||||
|
"@esbuild/darwin-x64": "0.20.2",
|
||||||
|
"@iconify-json/carbon": "^1.2.4",
|
||||||
|
"@rollup/rollup-darwin-x64": "^4.28.0",
|
||||||
|
"@types/node": "^20.17.9",
|
||||||
|
"@types/wechat-miniprogram": "^3.4.8",
|
||||||
|
"@uni-helper/eslint-config": "^0.4.0",
|
||||||
|
"@uni-helper/uni-types": "1.0.0-alpha.3",
|
||||||
|
"@uni-helper/unocss-preset-uni": "^0.2.11",
|
||||||
|
"@uni-helper/vite-plugin-uni-components": "0.2.0",
|
||||||
|
"@uni-helper/vite-plugin-uni-layouts": "0.1.10",
|
||||||
|
"@uni-helper/vite-plugin-uni-manifest": "0.2.8",
|
||||||
|
"@uni-helper/vite-plugin-uni-pages": "0.2.28",
|
||||||
|
"@uni-helper/vite-plugin-uni-platform": "0.0.4",
|
||||||
|
"@uni-ku/bundle-optimizer": "^1.3.3",
|
||||||
|
"@unocss/eslint-plugin": "^66.2.3",
|
||||||
|
"@unocss/preset-legacy-compat": "^0.59.4",
|
||||||
|
"@vue/runtime-core": "^3.4.21",
|
||||||
|
"@vue/tsconfig": "^0.1.3",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"eslint": "^9.29.0",
|
||||||
|
"eslint-plugin-format": "^1.0.1",
|
||||||
|
"husky": "^9.1.7",
|
||||||
|
"lint-staged": "^15.2.10",
|
||||||
|
"openapi-ts-request": "^1.1.2",
|
||||||
|
"postcss": "^8.4.49",
|
||||||
|
"postcss-html": "^1.7.0",
|
||||||
|
"postcss-scss": "^4.0.9",
|
||||||
|
"rollup-plugin-visualizer": "^5.12.0",
|
||||||
|
"sass": "1.77.8",
|
||||||
|
"typescript": "^5.7.2",
|
||||||
|
"unocss": "65.4.2",
|
||||||
|
"unplugin-auto-import": "^0.17.8",
|
||||||
|
"vite": "5.2.8",
|
||||||
|
"vite-plugin-restart": "^0.4.2",
|
||||||
|
"vue-tsc": "^2.2.10"
|
||||||
|
},
|
||||||
|
"resolutions": {
|
||||||
|
"bin-wrapper": "npm:bin-wrapper-china"
|
||||||
|
},
|
||||||
|
"lint-staged": {
|
||||||
|
"*": "eslint --fix"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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,
|
||||||
|
})
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
packages:
|
||||||
|
- '**'
|
||||||
|
- '!node_modules'
|
||||||
|
|
||||||
|
patchedDependencies:
|
||||||
|
'@dcloudio/uni-h5': patches/@dcloudio__uni-h5.patch
|
||||||
@@ -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}`)
|
||||||
|
})
|
||||||
@@ -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>
|
||||||
@@ -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,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -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
|
||||||
|
}
|
||||||
@@ -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,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
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,
|
||||||
|
},
|
||||||
|
cacheFor: {
|
||||||
|
expire: 0,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取聊天记录详情
|
||||||
|
* @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}`
|
||||||
|
}
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
export * from './chat-history'
|
||||||
|
export * from './types'
|
||||||
@@ -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
|
||||||
|
}
|
||||||
@@ -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,
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
export * from './device'
|
||||||
|
export * from './types'
|
||||||
@@ -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
|
||||||
|
}
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
export * from './types'
|
||||||
|
export * from './voiceprint'
|
||||||
@@ -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
|
||||||
|
}
|
||||||
@@ -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,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -0,0 +1,131 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
interface TabItem {
|
||||||
|
label: string
|
||||||
|
value: string | number
|
||||||
|
icon: string
|
||||||
|
activeIcon: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
tabList: TabItem[]
|
||||||
|
modelValue?: string | number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Emits {
|
||||||
|
(e: 'update:modelValue', value: string | number): void
|
||||||
|
(e: 'change', item: TabItem, index: number): void
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
modelValue: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits<Emits>()
|
||||||
|
|
||||||
|
const activeValue = computed(() => {
|
||||||
|
return props.modelValue || (props.tabList[0]?.value ?? '')
|
||||||
|
})
|
||||||
|
|
||||||
|
function handleTabClick(item: TabItem, index: number) {
|
||||||
|
emit('update:modelValue', item.value)
|
||||||
|
emit('change', item, index)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="custom-tabs">
|
||||||
|
<view
|
||||||
|
v-for="(item, index) in tabList"
|
||||||
|
:key="item.value"
|
||||||
|
class="tab-item"
|
||||||
|
:class="{ active: activeValue === item.value }"
|
||||||
|
@click="handleTabClick(item, index)"
|
||||||
|
>
|
||||||
|
<view class="tab-icon">
|
||||||
|
<image
|
||||||
|
:src="activeValue === item.value ? item.activeIcon : item.icon"
|
||||||
|
class="icon-img"
|
||||||
|
mode="aspectFit"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="tab-text">
|
||||||
|
{{ item.label }}
|
||||||
|
</view>
|
||||||
|
<view v-if="activeValue === item.value" class="tab-indicator" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.custom-tabs {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 0 16rpx;
|
||||||
|
border-top: 1rpx solid #eeeeee;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 16rpx 12rpx 12rpx;
|
||||||
|
flex: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-icon {
|
||||||
|
width: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #9d9ea3;
|
||||||
|
line-height: 1.2;
|
||||||
|
text-align: center;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item.active .tab-text {
|
||||||
|
color: #336cff;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-indicator {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 48rpx;
|
||||||
|
height: 4rpx;
|
||||||
|
background-color: #336cff;
|
||||||
|
border-radius: 2rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 适配不同尺寸屏幕 */
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
.tab-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-icon {
|
||||||
|
width: 44rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -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'
|
||||||
@@ -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 })
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -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 }
|
||||||
|
}
|
||||||
@@ -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,
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -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' }
|
||||||
|
})
|
||||||
|
```
|
||||||
@@ -0,0 +1,120 @@
|
|||||||
|
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 { getEnvBaseUrl } from '@/utils'
|
||||||
|
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: getEnvBaseUrl(),
|
||||||
|
...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
|
||||||
@@ -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},请检查网络或联系管理员!`
|
||||||
|
}
|
||||||
@@ -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
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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` 会闪烁,无缓存。
|
||||||
|
|
||||||
|
|
||||||
|
> 注意:花里胡哨的效果需要自己实现,本模版不提供。
|
||||||
@@ -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)
|
||||||
|
},
|
||||||
|
})
|
||||||
@@ -0,0 +1,76 @@
|
|||||||
|
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/network.png',
|
||||||
|
selectedIconPath: 'static/tabbar/network_activate.png',
|
||||||
|
pagePath: 'pages/device-config/index',
|
||||||
|
text: '配网',
|
||||||
|
icon: 'i-carbon-network-3',
|
||||||
|
iconType: 'uiLib',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconPath: 'static/tabbar/system.png',
|
||||||
|
selectedIconPath: 'static/tabbar/system_activate.png',
|
||||||
|
pagePath: 'pages/settings/index',
|
||||||
|
text: '系统',
|
||||||
|
icon: 'i-carbon-settings',
|
||||||
|
iconType: 'uiLib',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
// 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
|
||||||
@@ -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>
|
||||||
@@ -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,
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,124 @@
|
|||||||
|
{
|
||||||
|
"name": "小智",
|
||||||
|
"appid": "__UNI__36A515E",
|
||||||
|
"description": "",
|
||||||
|
"versionName": "1.0.0",
|
||||||
|
"versionCode": "100",
|
||||||
|
"transformPx": false,
|
||||||
|
"app-plus": {
|
||||||
|
"usingComponents": true,
|
||||||
|
"nvueStyleCompiler": "uni-app",
|
||||||
|
"compilerVersion": 3,
|
||||||
|
"splashscreen": {
|
||||||
|
"alwaysShowBeforeRender": true,
|
||||||
|
"waiting": true,
|
||||||
|
"autoclose": true,
|
||||||
|
"delay": 0
|
||||||
|
},
|
||||||
|
"modules": {},
|
||||||
|
"distribute": {
|
||||||
|
"android": {
|
||||||
|
"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\"/>"
|
||||||
|
],
|
||||||
|
"minSdkVersion": 30,
|
||||||
|
"targetSdkVersion": 30,
|
||||||
|
"abiFilters": [
|
||||||
|
"armeabi-v7a",
|
||||||
|
"arm64-v8a"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"ios": {},
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"compatible": {
|
||||||
|
"ignoreVersion": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"quickapp": {},
|
||||||
|
"mp-weixin": {
|
||||||
|
"appid": "wxa2abb91f64032a2b",
|
||||||
|
"setting": {
|
||||||
|
"urlCheck": false,
|
||||||
|
"es6": true,
|
||||||
|
"minified": true
|
||||||
|
},
|
||||||
|
"usingComponents": true,
|
||||||
|
"optimization": {
|
||||||
|
"subPackages": 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",
|
||||||
|
"h5": {
|
||||||
|
"router": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
@@ -0,0 +1,158 @@
|
|||||||
|
{
|
||||||
|
"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": {
|
||||||
|
"custom": false,
|
||||||
|
"color": "#e6e6e6",
|
||||||
|
"selectedColor": "#667dea",
|
||||||
|
"backgroundColor": "#fff",
|
||||||
|
"borderStyle": "black",
|
||||||
|
"height": "50px",
|
||||||
|
"fontSize": "10px",
|
||||||
|
"iconWidth": "24px",
|
||||||
|
"spacing": "3px",
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"iconPath": "static/tabbar/robot.png",
|
||||||
|
"selectedIconPath": "static/tabbar/robot_activate.png",
|
||||||
|
"pagePath": "pages/index/index",
|
||||||
|
"text": "首页",
|
||||||
|
"icon": "home",
|
||||||
|
"iconType": "uiLib"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"iconPath": "static/tabbar/network.png",
|
||||||
|
"selectedIconPath": "static/tabbar/network_activate.png",
|
||||||
|
"pagePath": "pages/device-config/index",
|
||||||
|
"text": "配网",
|
||||||
|
"icon": "i-carbon-network-3",
|
||||||
|
"iconType": "uiLib"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"iconPath": "static/tabbar/system.png",
|
||||||
|
"selectedIconPath": "static/tabbar/system_activate.png",
|
||||||
|
"pagePath": "pages/settings/index",
|
||||||
|
"text": "系统",
|
||||||
|
"icon": "i-carbon-settings",
|
||||||
|
"iconType": "uiLib"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "pages/index/index",
|
||||||
|
"type": "home",
|
||||||
|
"layout": "tabbar",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "首页"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/agent/edit",
|
||||||
|
"type": "page"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/agent/index",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "智能体",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/agent/tools",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "编辑功能",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/chat-history/detail",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "聊天详情"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/chat-history/index",
|
||||||
|
"type": "page"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/device/index",
|
||||||
|
"type": "page"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/device-config/index",
|
||||||
|
"type": "page",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "设备配网",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/login/index",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "登陆"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/register/index",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "注册"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/settings/index",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "设置",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/voiceprint/index",
|
||||||
|
"type": "page"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"subPackages": [
|
||||||
|
{
|
||||||
|
"root": "pages-sub",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "demo/index",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "分包页面"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,701 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import type { AgentDetail, ModelOption, PluginDefinition, RoleTemplate } from '@/api/agent/types'
|
||||||
|
import { computed, nextTick, onMounted, ref, watch } from 'vue'
|
||||||
|
import { getAgentDetail, getModelOptions, getPluginFunctions, getRoleTemplates, getTTSVoices, updateAgent } from '@/api/agent/agent'
|
||||||
|
import { usePluginStore } from '@/store'
|
||||||
|
import { toast } from '@/utils/toast'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'AgentEdit',
|
||||||
|
})
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
agentId: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
// 组件参数
|
||||||
|
interface Props {
|
||||||
|
agentId?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const agentId = computed(() => props.agentId)
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const formData = ref<Partial<AgentDetail>>({
|
||||||
|
agentName: '',
|
||||||
|
systemPrompt: '',
|
||||||
|
summaryMemory: '',
|
||||||
|
vadModelId: '',
|
||||||
|
asrModelId: '',
|
||||||
|
llmModelId: '',
|
||||||
|
vllmModelId: '',
|
||||||
|
intentModelId: '',
|
||||||
|
memModelId: '',
|
||||||
|
ttsModelId: '',
|
||||||
|
ttsVoiceId: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
// 显示名称数据
|
||||||
|
const displayNames = ref({
|
||||||
|
vad: '请选择',
|
||||||
|
asr: '请选择',
|
||||||
|
llm: '请选择',
|
||||||
|
vllm: '请选择',
|
||||||
|
intent: '请选择',
|
||||||
|
memory: '请选择',
|
||||||
|
tts: '请选择',
|
||||||
|
voiceprint: '请选择',
|
||||||
|
})
|
||||||
|
|
||||||
|
// 角色模板数据
|
||||||
|
const roleTemplates = ref<RoleTemplate[]>([])
|
||||||
|
const selectedTemplateId = ref('')
|
||||||
|
|
||||||
|
// 加载状态
|
||||||
|
const loading = ref(false)
|
||||||
|
const saving = ref(false)
|
||||||
|
|
||||||
|
// 模型选项数据
|
||||||
|
const modelOptions = ref<{
|
||||||
|
[key: string]: ModelOption[]
|
||||||
|
}>({
|
||||||
|
VAD: [],
|
||||||
|
ASR: [],
|
||||||
|
LLM: [],
|
||||||
|
VLLM: [],
|
||||||
|
Intent: [],
|
||||||
|
Memory: [],
|
||||||
|
TTS: [],
|
||||||
|
})
|
||||||
|
|
||||||
|
// 音色选项数据
|
||||||
|
const voiceOptions = ref<{ id: string, name: string }[]>([])
|
||||||
|
|
||||||
|
// 选择器显示状态
|
||||||
|
const pickerShow = ref<{
|
||||||
|
[key: string]: boolean
|
||||||
|
}>({
|
||||||
|
vad: false,
|
||||||
|
asr: false,
|
||||||
|
llm: false,
|
||||||
|
vllm: false,
|
||||||
|
intent: false,
|
||||||
|
memory: false,
|
||||||
|
tts: false,
|
||||||
|
voiceprint: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
const allFunctions = ref<PluginDefinition[]>([])
|
||||||
|
|
||||||
|
// 使用插件store
|
||||||
|
const pluginStore = usePluginStore()
|
||||||
|
|
||||||
|
// tabs
|
||||||
|
const tabList = [
|
||||||
|
{
|
||||||
|
label: '角色配置',
|
||||||
|
value: 'home',
|
||||||
|
icon: '/static/tabbar/robot.png',
|
||||||
|
activeIcon: '/static/tabbar/robot_activate.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '设备管理',
|
||||||
|
value: 'category',
|
||||||
|
icon: '/static/tabbar/device.png',
|
||||||
|
activeIcon: '/static/tabbar/device_activate.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '聊天记录',
|
||||||
|
value: 'settings',
|
||||||
|
icon: '/static/tabbar/chat.png',
|
||||||
|
activeIcon: '/static/tabbar/chat_activate.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '声纹管理',
|
||||||
|
value: 'profile',
|
||||||
|
icon: '/static/tabbar/voiceprint.png',
|
||||||
|
activeIcon: '/static/tabbar/voiceprint_activate.png',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
// 加载智能体详情
|
||||||
|
async function loadAgentDetail() {
|
||||||
|
if (!agentId.value)
|
||||||
|
return
|
||||||
|
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
const detail = await getAgentDetail(agentId.value)
|
||||||
|
formData.value = { ...detail }
|
||||||
|
|
||||||
|
// 更新插件store
|
||||||
|
pluginStore.setCurrentAgentId(agentId.value)
|
||||||
|
pluginStore.setCurrentFunctions(detail.functions || [])
|
||||||
|
|
||||||
|
// 如果有TTS模型,加载对应的音色选项
|
||||||
|
if (detail.ttsModelId) {
|
||||||
|
await loadVoiceOptions(detail.ttsModelId)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 等待模型选项加载完成后再更新显示名称
|
||||||
|
await nextTick()
|
||||||
|
updateDisplayNames()
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('加载智能体详情失败:', error)
|
||||||
|
toast.error('加载失败')
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取音色显示名称
|
||||||
|
function getVoiceDisplayName(ttsVoiceId: string) {
|
||||||
|
if (!ttsVoiceId)
|
||||||
|
return '请选择'
|
||||||
|
|
||||||
|
console.log('=== 音色映射调试 ===')
|
||||||
|
console.log('当前音色ID:', ttsVoiceId)
|
||||||
|
console.log('当前TTS模型:', formData.value.ttsModelId)
|
||||||
|
console.log('可用音色选项:', voiceOptions.value)
|
||||||
|
|
||||||
|
// 首先尝试直接从音色选项中匹配ID
|
||||||
|
const voice = voiceOptions.value.find(v => v.id === ttsVoiceId)
|
||||||
|
if (voice) {
|
||||||
|
console.log('直接匹配成功:', voice)
|
||||||
|
return voice.name
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果没找到,尝试兼容性映射
|
||||||
|
if (voiceOptions.value.length > 0) {
|
||||||
|
console.log('直接匹配失败,尝试兼容性映射')
|
||||||
|
|
||||||
|
// 创建索引映射:voice1 → 第1个音色,voice2 → 第2个音色
|
||||||
|
const indexMap = {
|
||||||
|
voice1: 0,
|
||||||
|
voice2: 1,
|
||||||
|
voice3: 2,
|
||||||
|
voice4: 3,
|
||||||
|
voice5: 4,
|
||||||
|
}
|
||||||
|
|
||||||
|
const index = indexMap[ttsVoiceId]
|
||||||
|
if (index !== undefined && voiceOptions.value[index]) {
|
||||||
|
const mappedVoice = voiceOptions.value[index]
|
||||||
|
console.log(`索引映射: ${ttsVoiceId} → index ${index} → ${mappedVoice.name}`)
|
||||||
|
return mappedVoice.name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('所有映射方式都失败,返回原始ID:', ttsVoiceId)
|
||||||
|
return ttsVoiceId
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新显示名称
|
||||||
|
function updateDisplayNames() {
|
||||||
|
if (!formData.value)
|
||||||
|
return
|
||||||
|
|
||||||
|
displayNames.value.vad = getModelDisplayName('VAD', formData.value.vadModelId)
|
||||||
|
displayNames.value.asr = getModelDisplayName('ASR', formData.value.asrModelId)
|
||||||
|
displayNames.value.llm = getModelDisplayName('LLM', formData.value.llmModelId)
|
||||||
|
displayNames.value.vllm = getModelDisplayName('VLLM', formData.value.vllmModelId)
|
||||||
|
displayNames.value.intent = getModelDisplayName('Intent', formData.value.intentModelId)
|
||||||
|
displayNames.value.memory = getModelDisplayName('Memory', formData.value.memModelId)
|
||||||
|
displayNames.value.tts = getModelDisplayName('TTS', formData.value.ttsModelId)
|
||||||
|
|
||||||
|
// 角色音色特殊处理
|
||||||
|
displayNames.value.voiceprint = getVoiceDisplayName(formData.value.ttsVoiceId || '')
|
||||||
|
|
||||||
|
console.log('最终音色显示名称:', displayNames.value.voiceprint)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载角色模板
|
||||||
|
async function loadRoleTemplates() {
|
||||||
|
try {
|
||||||
|
const templates = await getRoleTemplates()
|
||||||
|
roleTemplates.value = templates
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('加载角色模板失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载模型选项
|
||||||
|
async function loadModelOptions() {
|
||||||
|
const modelTypes = ['VAD', 'ASR', 'LLM', 'VLLM', 'Intent', 'Memory', 'TTS']
|
||||||
|
|
||||||
|
try {
|
||||||
|
await Promise.all(
|
||||||
|
modelTypes?.map(async (type) => {
|
||||||
|
console.log(`加载模型类型: ${type}`)
|
||||||
|
const options = await getModelOptions(type)
|
||||||
|
modelOptions.value[type] = options
|
||||||
|
console.log(`${type} 选项:`, options)
|
||||||
|
}) || [],
|
||||||
|
)
|
||||||
|
console.log('所有模型选项加载完成:', modelOptions.value)
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('加载模型选项失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载TTS音色选项
|
||||||
|
async function loadVoiceOptions(ttsModelId?: string) {
|
||||||
|
if (!ttsModelId)
|
||||||
|
return
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log(`加载音色选项: ${ttsModelId}`)
|
||||||
|
const voices = await getTTSVoices(ttsModelId)
|
||||||
|
voiceOptions.value = voices
|
||||||
|
console.log('音色选项:', voices)
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('加载音色选项失败:', error)
|
||||||
|
voiceOptions.value = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择角色模板
|
||||||
|
function selectRoleTemplate(templateId: string) {
|
||||||
|
if (selectedTemplateId.value === templateId) {
|
||||||
|
selectedTemplateId.value = ''
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
selectedTemplateId.value = templateId
|
||||||
|
const template = roleTemplates.value.find(t => t.id === templateId)
|
||||||
|
if (template) {
|
||||||
|
formData.value.systemPrompt = template.systemPrompt
|
||||||
|
formData.value.vadModelId = template.vadModelId
|
||||||
|
formData.value.asrModelId = template.asrModelId
|
||||||
|
formData.value.llmModelId = template.llmModelId
|
||||||
|
formData.value.vllmModelId = template.vllmModelId
|
||||||
|
formData.value.intentModelId = template.intentModelId
|
||||||
|
formData.value.memModelId = template.memModelId
|
||||||
|
formData.value.ttsModelId = template.ttsModelId
|
||||||
|
formData.value.ttsVoiceId = template.ttsVoiceId
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开选择器
|
||||||
|
function openPicker(type: string) {
|
||||||
|
pickerShow.value[type] = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择器确认
|
||||||
|
async function onPickerConfirm(type: string, value: any, name: string) {
|
||||||
|
console.log('选择器确认:', type, value, name)
|
||||||
|
|
||||||
|
// 保存显示名称
|
||||||
|
displayNames.value[type] = name
|
||||||
|
|
||||||
|
switch (type) {
|
||||||
|
case 'vad':
|
||||||
|
formData.value.vadModelId = value
|
||||||
|
break
|
||||||
|
case 'asr':
|
||||||
|
formData.value.asrModelId = value
|
||||||
|
break
|
||||||
|
case 'llm':
|
||||||
|
formData.value.llmModelId = value
|
||||||
|
break
|
||||||
|
case 'vllm':
|
||||||
|
formData.value.vllmModelId = value
|
||||||
|
break
|
||||||
|
case 'intent':
|
||||||
|
formData.value.intentModelId = value
|
||||||
|
displayNames.value.intent = name // 确保显示名称正确更新
|
||||||
|
break
|
||||||
|
case 'memory':
|
||||||
|
formData.value.memModelId = value
|
||||||
|
displayNames.value.memory = name // 确保显示名称正确更新
|
||||||
|
break
|
||||||
|
case 'tts':
|
||||||
|
formData.value.ttsModelId = value
|
||||||
|
// 当选择TTS模型时,自动加载对应的音色选项
|
||||||
|
await loadVoiceOptions(value)
|
||||||
|
// 重置音色选择
|
||||||
|
formData.value.ttsVoiceId = ''
|
||||||
|
displayNames.value.voiceprint = '请选择'
|
||||||
|
break
|
||||||
|
case 'voiceprint':
|
||||||
|
formData.value.ttsVoiceId = value
|
||||||
|
displayNames.value.voiceprint = name // 确保显示名称正确更新
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
pickerShow.value[type] = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择器取消
|
||||||
|
function onPickerCancel(type: string) {
|
||||||
|
pickerShow.value[type] = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取模型显示名称
|
||||||
|
function getModelDisplayName(modelType: string, modelId: string) {
|
||||||
|
if (!modelId)
|
||||||
|
return '请选择'
|
||||||
|
|
||||||
|
// 直接从API配置数据中查找匹配的ID
|
||||||
|
const options = modelOptions.value[modelType]
|
||||||
|
|
||||||
|
if (!options || options.length === 0) {
|
||||||
|
return modelId
|
||||||
|
}
|
||||||
|
|
||||||
|
const option = options.find(opt => opt.id === modelId)
|
||||||
|
if (option) {
|
||||||
|
return option.modelName
|
||||||
|
}
|
||||||
|
return modelId
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存智能体
|
||||||
|
async function saveAgent() {
|
||||||
|
if (!formData.value.agentName?.trim()) {
|
||||||
|
toast.warning('请输入助手昵称')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.value.systemPrompt?.trim()) {
|
||||||
|
toast.warning('请输入角色介绍')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
saving.value = true
|
||||||
|
await updateAgent(agentId.value, formData.value)
|
||||||
|
|
||||||
|
toast.success('保存成功')
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('保存失败:', error)
|
||||||
|
toast.error('保存失败')
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
saving.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadPluginFunctions() {
|
||||||
|
getPluginFunctions().then((res) => {
|
||||||
|
const processedFunctions = res?.map((item) => {
|
||||||
|
const meta = JSON.parse(item.fields || '[]')
|
||||||
|
const params = meta.reduce((m: any, f: any) => {
|
||||||
|
m[f.key] = f.default
|
||||||
|
return m
|
||||||
|
}, {})
|
||||||
|
return { ...item, fieldsMeta: meta, params }
|
||||||
|
}) || []
|
||||||
|
|
||||||
|
allFunctions.value = processedFunctions
|
||||||
|
// 同时更新到store
|
||||||
|
pluginStore.setAllFunctions(processedFunctions)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleTools() {
|
||||||
|
console.log('当前插件配置:', formData.value.functions)
|
||||||
|
|
||||||
|
// 确保store中有最新数据
|
||||||
|
pluginStore.setCurrentAgentId(agentId.value)
|
||||||
|
pluginStore.setCurrentFunctions(formData.value.functions || [])
|
||||||
|
pluginStore.setAllFunctions(allFunctions.value)
|
||||||
|
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/agent/tools',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听插件配置更新
|
||||||
|
function watchPluginUpdates() {
|
||||||
|
// 监听store中的插件配置变化
|
||||||
|
watch(() => pluginStore.currentFunctions, (newFunctions) => {
|
||||||
|
console.log('插件配置已更新:', newFunctions)
|
||||||
|
formData.value.functions = newFunctions
|
||||||
|
}, { deep: true })
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// 初始化插件配置监听
|
||||||
|
watchPluginUpdates()
|
||||||
|
|
||||||
|
// 先加载模型选项和角色模板
|
||||||
|
await Promise.all([
|
||||||
|
loadRoleTemplates(),
|
||||||
|
loadModelOptions(),
|
||||||
|
loadPluginFunctions(),
|
||||||
|
])
|
||||||
|
|
||||||
|
// 然后加载智能体详情,这样可以正确映射显示名称
|
||||||
|
if (agentId.value) {
|
||||||
|
await loadAgentDetail()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="bg-[#f5f7fb] px-[20rpx]">
|
||||||
|
<!-- 基础信息标题 -->
|
||||||
|
<view class="pb-[20rpx] first:pt-[20rpx]">
|
||||||
|
<text class="text-[32rpx] text-[#232338] font-bold">
|
||||||
|
基础信息
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 基础信息卡片 -->
|
||||||
|
<view class="mb-[24rpx] border border-[#eeeeee] rounded-[20rpx] bg-[#fbfbfb] p-[24rpx]" style="box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);">
|
||||||
|
<view class="mb-[24rpx] last:mb-0">
|
||||||
|
<text class="mb-[12rpx] block text-[28rpx] text-[#232338] font-medium">
|
||||||
|
助手昵称
|
||||||
|
</text>
|
||||||
|
<input
|
||||||
|
v-model="formData.agentName"
|
||||||
|
class="box-border h-[80rpx] w-full border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[16rpx_20rpx] text-[28rpx] text-[#232338] leading-[1.4] outline-none focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
|
||||||
|
type="text"
|
||||||
|
placeholder="请输入助手昵称"
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="mb-[24rpx] last:mb-0">
|
||||||
|
<text class="mb-[12rpx] block text-[28rpx] text-[#232338] font-medium">
|
||||||
|
角色模式
|
||||||
|
</text>
|
||||||
|
<view class="mt-0 flex flex-wrap gap-[12rpx]">
|
||||||
|
<view
|
||||||
|
v-for="template in roleTemplates"
|
||||||
|
:key="template.id"
|
||||||
|
class="cursor-pointer rounded-[20rpx] px-[24rpx] py-[12rpx] text-[24rpx] transition-all duration-300"
|
||||||
|
:class="selectedTemplateId === template.id
|
||||||
|
? 'bg-[#336cff] text-white border border-[#336cff]'
|
||||||
|
: 'bg-[rgba(51,108,255,0.1)] text-[#336cff] border border-[rgba(51,108,255,0.2)]'"
|
||||||
|
@click="selectRoleTemplate(template.id)"
|
||||||
|
>
|
||||||
|
{{ template.agentName }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="mb-[24rpx] last:mb-0">
|
||||||
|
<text class="mb-[12rpx] block text-[28rpx] text-[#232338] font-medium">
|
||||||
|
角色介绍
|
||||||
|
</text>
|
||||||
|
<textarea
|
||||||
|
v-model="formData.systemPrompt"
|
||||||
|
:maxlength="2000"
|
||||||
|
placeholder="请输入角色介绍"
|
||||||
|
class="box-border h-[500rpx] w-full resize-none break-words break-all border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] text-[26rpx] text-[#232338] leading-[1.6] outline-none focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
|
||||||
|
/>
|
||||||
|
<view class="mt-[8rpx] text-right text-[22rpx] text-[#9d9ea3]">
|
||||||
|
{{ (formData.systemPrompt || '').length }}/2000
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 模型配置标题 -->
|
||||||
|
<view class="pb-[20rpx]">
|
||||||
|
<text class="text-[32rpx] text-[#232338] font-bold">
|
||||||
|
模型配置
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 模型配置卡片 -->
|
||||||
|
<view class="mb-[24rpx] border border-[#eeeeee] rounded-[20rpx] bg-[#fbfbfb] p-[24rpx]" style="box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);">
|
||||||
|
<view class="flex flex-col gap-[16rpx]">
|
||||||
|
<view class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('vad')">
|
||||||
|
<text class="text-[28rpx] text-[#232338] font-medium">
|
||||||
|
语音活动检测
|
||||||
|
</text>
|
||||||
|
<text class="mx-[16rpx] flex-1 text-right text-[26rpx] text-[#65686f]">
|
||||||
|
{{ displayNames.vad }}
|
||||||
|
</text>
|
||||||
|
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('asr')">
|
||||||
|
<text class="text-[28rpx] text-[#232338] font-medium">
|
||||||
|
语音识别
|
||||||
|
</text>
|
||||||
|
<text class="mx-[16rpx] flex-1 text-right text-[26rpx] text-[#65686f]">
|
||||||
|
{{ displayNames.asr }}
|
||||||
|
</text>
|
||||||
|
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('llm')">
|
||||||
|
<text class="text-[28rpx] text-[#232338] font-medium">
|
||||||
|
大语言模型
|
||||||
|
</text>
|
||||||
|
<text class="mx-[16rpx] flex-1 text-right text-[26rpx] text-[#65686f]">
|
||||||
|
{{ displayNames.llm }}
|
||||||
|
</text>
|
||||||
|
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('vllm')">
|
||||||
|
<text class="text-[28rpx] text-[#232338] font-medium">
|
||||||
|
视觉大模型
|
||||||
|
</text>
|
||||||
|
<text class="mx-[16rpx] flex-1 text-right text-[26rpx] text-[#65686f]">
|
||||||
|
{{ displayNames.vllm }}
|
||||||
|
</text>
|
||||||
|
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('intent')">
|
||||||
|
<text class="text-[28rpx] text-[#232338] font-medium">
|
||||||
|
意图识别
|
||||||
|
</text>
|
||||||
|
<text class="mx-[16rpx] flex-1 text-right text-[26rpx] text-[#65686f]">
|
||||||
|
{{ displayNames.intent }}
|
||||||
|
</text>
|
||||||
|
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('memory')">
|
||||||
|
<text class="text-[28rpx] text-[#232338] font-medium">
|
||||||
|
记忆
|
||||||
|
</text>
|
||||||
|
<text class="mx-[16rpx] flex-1 text-right text-[26rpx] text-[#65686f]">
|
||||||
|
{{ displayNames.memory }}
|
||||||
|
</text>
|
||||||
|
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 语音设置标题 -->
|
||||||
|
<view class="pb-[20rpx]">
|
||||||
|
<text class="text-[32rpx] text-[#232338] font-bold">
|
||||||
|
语音设置
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 语音设置卡片 -->
|
||||||
|
<view class="mb-[24rpx] border border-[#eeeeee] rounded-[20rpx] bg-[#fbfbfb] p-[24rpx]" style="box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);">
|
||||||
|
<view class="flex flex-col gap-[16rpx]">
|
||||||
|
<view class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('tts')">
|
||||||
|
<text class="text-[28rpx] text-[#232338] font-medium">
|
||||||
|
语音合成
|
||||||
|
</text>
|
||||||
|
<text class="mx-[16rpx] flex-1 text-right text-[26rpx] text-[#65686f]">
|
||||||
|
{{ displayNames.tts }}
|
||||||
|
</text>
|
||||||
|
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] transition-all duration-300 active:bg-[#eef3ff]" @click="openPicker('voiceprint')">
|
||||||
|
<text class="text-[28rpx] text-[#232338] font-medium">
|
||||||
|
角色音色
|
||||||
|
</text>
|
||||||
|
<text class="mx-[16rpx] flex-1 text-right text-[26rpx] text-[#65686f]">
|
||||||
|
{{ displayNames.voiceprint }}
|
||||||
|
</text>
|
||||||
|
<wd-icon name="arrow-right" custom-class="text-[20rpx] text-[#9d9ea3]" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="flex items-center justify-between border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx]">
|
||||||
|
<view class="text-[28rpx] text-[#232338] font-medium">
|
||||||
|
插件
|
||||||
|
</view>
|
||||||
|
<view class="cursor-pointer rounded-[20rpx] bg-[rgba(51,108,255,0.1)] px-[24rpx] py-[12rpx] text-[24rpx] text-[#336cff] transition-all duration-300 active:bg-[#336cff] active:text-white" @click="handleTools">
|
||||||
|
<text>编辑功能</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 记忆历史标题 -->
|
||||||
|
<view class="pb-[20rpx]">
|
||||||
|
<text class="text-[32rpx] text-[#232338] font-bold">
|
||||||
|
历史记忆
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 记忆历史卡片 -->
|
||||||
|
<view class="mb-[24rpx] border border-[#eeeeee] rounded-[20rpx] bg-[#fbfbfb] p-[24rpx]" style="box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);">
|
||||||
|
<view class="mb-[24rpx] last:mb-0">
|
||||||
|
<textarea
|
||||||
|
v-model="formData.summaryMemory"
|
||||||
|
placeholder="记忆内容"
|
||||||
|
disabled
|
||||||
|
class="box-border h-[500rpx] w-full resize-none break-words break-all border border-[#eeeeee] rounded-[12rpx] bg-[#f0f0f0] p-[20rpx] text-[26rpx] text-[#65686f] leading-[1.6] opacity-80 outline-none"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 保存按钮 -->
|
||||||
|
<view class="mt-[40rpx] p-0">
|
||||||
|
<wd-button
|
||||||
|
type="primary"
|
||||||
|
:loading="saving"
|
||||||
|
:disabled="saving"
|
||||||
|
custom-class="w-full h-[80rpx] rounded-[16rpx] text-[30rpx] font-semibold bg-[#336cff] active:bg-[#2d5bd1]"
|
||||||
|
@click="saveAgent"
|
||||||
|
>
|
||||||
|
{{ saving ? '保存中...' : '保存' }}
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
<!-- 模型选择器 -->
|
||||||
|
<wd-action-sheet
|
||||||
|
v-model="pickerShow.vad"
|
||||||
|
:actions="modelOptions.VAD && modelOptions.VAD.map(item => ({ name: item.modelName, value: item.id }))"
|
||||||
|
@close="onPickerCancel('vad')"
|
||||||
|
@select="({ item }) => onPickerConfirm('vad', item.value, item.name)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<wd-action-sheet
|
||||||
|
v-model="pickerShow.asr"
|
||||||
|
:actions="modelOptions.ASR && modelOptions.ASR.map(item => ({ name: item.modelName, value: item.id }))"
|
||||||
|
@close="onPickerCancel('asr')"
|
||||||
|
@select="({ item }) => onPickerConfirm('asr', item.value, item.name)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<wd-action-sheet
|
||||||
|
v-model="pickerShow.llm"
|
||||||
|
:actions="modelOptions.LLM && modelOptions.LLM.map(item => ({ name: item.modelName, value: item.id }))"
|
||||||
|
@close="onPickerCancel('llm')"
|
||||||
|
@select="({ item }) => onPickerConfirm('llm', item.value, item.name)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<wd-action-sheet
|
||||||
|
v-model="pickerShow.vllm"
|
||||||
|
:actions="modelOptions.VLLM && modelOptions.VLLM.map(item => ({ name: item.modelName, value: item.id }))"
|
||||||
|
@close="onPickerCancel('vllm')"
|
||||||
|
@select="({ item }) => onPickerConfirm('vllm', item.value, item.name)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<wd-action-sheet
|
||||||
|
v-model="pickerShow.intent"
|
||||||
|
:actions="modelOptions.Intent && modelOptions.Intent.map(item => ({ name: item.modelName, value: item.id }))"
|
||||||
|
@close="onPickerCancel('intent')"
|
||||||
|
@select="({ item }) => onPickerConfirm('intent', item.value, item.name)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<wd-action-sheet
|
||||||
|
v-model="pickerShow.memory"
|
||||||
|
:actions="modelOptions.Memory && modelOptions.Memory.map(item => ({ name: item.modelName, value: item.id }))"
|
||||||
|
@close="onPickerCancel('memory')"
|
||||||
|
@select="({ item }) => onPickerConfirm('memory', item.value, item.name)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<wd-action-sheet
|
||||||
|
v-model="pickerShow.tts"
|
||||||
|
:actions="modelOptions.TTS && modelOptions.TTS.map(item => ({ name: item.modelName, value: item.id }))"
|
||||||
|
@close="onPickerCancel('tts')"
|
||||||
|
@select="({ item }) => onPickerConfirm('tts', item.value, item.name)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<wd-action-sheet
|
||||||
|
v-model="pickerShow.voiceprint"
|
||||||
|
:actions="voiceOptions && voiceOptions.map(item => ({ name: item.name, value: item.id }))"
|
||||||
|
@close="onPickerCancel('voiceprint')"
|
||||||
|
@select="({ item }) => onPickerConfirm('voiceprint', item.value, item.name)"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,214 @@
|
|||||||
|
<route lang="jsonc" type="page">
|
||||||
|
{
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "智能体",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</route>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onLoad } from '@dcloudio/uni-app'
|
||||||
|
import { computed, onMounted, ref } from 'vue'
|
||||||
|
import CustomTabs from '@/components/custom-tabs/index.vue'
|
||||||
|
import ChatHistory from '@/pages/chat-history/index.vue'
|
||||||
|
import DeviceManagement from '@/pages/device/index.vue'
|
||||||
|
import VoiceprintManagement from '@/pages/voiceprint/index.vue'
|
||||||
|
import AgentEdit from './edit.vue'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'AgentIndex',
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取屏幕边界到安全区域距离
|
||||||
|
let safeAreaInsets: any
|
||||||
|
let systemInfo: any
|
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
systemInfo = uni.getWindowInfo()
|
||||||
|
safeAreaInsets = systemInfo.safeArea
|
||||||
|
? {
|
||||||
|
top: systemInfo.safeArea.top,
|
||||||
|
right: systemInfo.windowWidth - systemInfo.safeArea.right,
|
||||||
|
bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
|
||||||
|
left: systemInfo.safeArea.left,
|
||||||
|
}
|
||||||
|
: null
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef MP-WEIXIN
|
||||||
|
systemInfo = uni.getSystemInfoSync()
|
||||||
|
safeAreaInsets = systemInfo.safeAreaInsets
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
|
// 智能体ID
|
||||||
|
const currentAgentId = ref('default')
|
||||||
|
|
||||||
|
// 当前 tab
|
||||||
|
const currentTab = ref('agent-config')
|
||||||
|
|
||||||
|
// 刷新和加载状态
|
||||||
|
const refreshing = ref(false)
|
||||||
|
|
||||||
|
// 计算是否启用下拉刷新(角色编辑页面不启用)
|
||||||
|
const refresherEnabled = computed(() => {
|
||||||
|
return currentTab.value !== 'agent-config'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 子组件引用
|
||||||
|
const deviceRef = ref()
|
||||||
|
const chatRef = ref()
|
||||||
|
const voiceprintRef = ref()
|
||||||
|
|
||||||
|
// Tab 配置
|
||||||
|
const tabList = [
|
||||||
|
{
|
||||||
|
label: '角色配置',
|
||||||
|
value: 'agent-config',
|
||||||
|
icon: '/static/tabbar/robot.png',
|
||||||
|
activeIcon: '/static/tabbar/robot_activate.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '设备管理',
|
||||||
|
value: 'device-management',
|
||||||
|
icon: '/static/tabbar/device.png',
|
||||||
|
activeIcon: '/static/tabbar/device_activate.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '聊天记录',
|
||||||
|
value: 'chat-history',
|
||||||
|
icon: '/static/tabbar/chat.png',
|
||||||
|
activeIcon: '/static/tabbar/chat_activate.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '声纹管理',
|
||||||
|
value: 'voiceprint-management',
|
||||||
|
icon: '/static/tabbar/microphone.png',
|
||||||
|
activeIcon: '/static/tabbar/microphone_activate.png',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
// 返回上一页
|
||||||
|
function goBack() {
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理 tab 切换
|
||||||
|
function handleTabChange(item: any) {
|
||||||
|
console.log('Tab changed:', item)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下拉刷新
|
||||||
|
async function onRefresh() {
|
||||||
|
// 角色编辑页面不需要刷新
|
||||||
|
if (currentTab.value === 'agent-config') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
refreshing.value = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
switch (currentTab.value) {
|
||||||
|
case 'device-management':
|
||||||
|
if (deviceRef.value?.refresh) {
|
||||||
|
await deviceRef.value.refresh()
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 'chat-history':
|
||||||
|
if (chatRef.value?.refresh) {
|
||||||
|
await chatRef.value.refresh()
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 'voiceprint-management':
|
||||||
|
if (voiceprintRef.value?.refresh) {
|
||||||
|
await voiceprintRef.value.refresh()
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('刷新失败:', error)
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
refreshing.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 触底加载更多
|
||||||
|
async function onLoadMore() {
|
||||||
|
// 只有聊天记录需要加载更多
|
||||||
|
if (currentTab.value === 'chat-history' && chatRef.value?.loadMore) {
|
||||||
|
await chatRef.value.loadMore()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 接收页面参数
|
||||||
|
onLoad((options) => {
|
||||||
|
if (options?.agentId) {
|
||||||
|
currentAgentId.value = options.agentId
|
||||||
|
console.log('接收到智能体ID:', options.agentId)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// 页面初始化
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="h-screen flex flex-col bg-[#f5f7fb]">
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<wd-navbar title="智能体" safe-area-inset-top>
|
||||||
|
<template #left>
|
||||||
|
<wd-icon name="arrow-left" size="18" @click="goBack" />
|
||||||
|
</template>
|
||||||
|
</wd-navbar>
|
||||||
|
|
||||||
|
<!-- 自定义 Tabs -->
|
||||||
|
<CustomTabs
|
||||||
|
v-model="currentTab"
|
||||||
|
:tab-list="tabList"
|
||||||
|
@change="handleTabChange"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 主内容滚动区域 -->
|
||||||
|
<scroll-view
|
||||||
|
scroll-y
|
||||||
|
:style="{ height: `calc(100vh - ${safeAreaInsets?.top || 0}px - 180rpx)` }"
|
||||||
|
class="box-border flex-1 bg-[#f5f7fb]"
|
||||||
|
enable-back-to-top
|
||||||
|
:refresher-enabled="refresherEnabled"
|
||||||
|
:refresher-triggered="refreshing"
|
||||||
|
@refresherrefresh="onRefresh"
|
||||||
|
@scrolltolower="onLoadMore"
|
||||||
|
>
|
||||||
|
<!-- Tab 内容 -->
|
||||||
|
<view class="flex-1">
|
||||||
|
<AgentEdit
|
||||||
|
v-if="currentTab === 'agent-config'"
|
||||||
|
:agent-id="currentAgentId"
|
||||||
|
/>
|
||||||
|
<DeviceManagement
|
||||||
|
v-else-if="currentTab === 'device-management'"
|
||||||
|
ref="deviceRef"
|
||||||
|
:agent-id="currentAgentId"
|
||||||
|
/>
|
||||||
|
<ChatHistory
|
||||||
|
v-else-if="currentTab === 'chat-history'"
|
||||||
|
ref="chatRef"
|
||||||
|
:agent-id="currentAgentId"
|
||||||
|
/>
|
||||||
|
<VoiceprintManagement
|
||||||
|
v-else-if="currentTab === 'voiceprint-management'"
|
||||||
|
ref="voiceprintRef"
|
||||||
|
:agent-id="currentAgentId"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,568 @@
|
|||||||
|
<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="h-screen flex flex-col bg-[#f5f7fb]">
|
||||||
|
<!-- 头部导航 -->
|
||||||
|
<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="box-border flex-1 bg-transparent 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="max-h-[600rpx] bg-transparent"
|
||||||
|
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="max-h-[600rpx] bg-transparent" 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="max-h-[600rpx] bg-transparent" 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="bg-[#f5f7fb]"
|
||||||
|
:style="{ height: 'calc(75vh - 60rpx)' }"
|
||||||
|
>
|
||||||
|
<view class="p-[30rpx] pb-[40rpx]">
|
||||||
|
<!-- 无参数提示 -->
|
||||||
|
<view
|
||||||
|
v-if="
|
||||||
|
!currentFunction?.fieldsMeta
|
||||||
|
|| currentFunction.fieldsMeta.length === 0
|
||||||
|
"
|
||||||
|
class="h-[400rpx] flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<text class="text-[28rpx] text-[#999]">
|
||||||
|
{{ currentFunction?.name }} 无需配置参数
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 参数表单 - 卡片式布局 -->
|
||||||
|
<view v-else class="flex flex-col gap-[24rpx]">
|
||||||
|
<view
|
||||||
|
v-for="field in currentFunction.fieldsMeta"
|
||||||
|
:key="field.key"
|
||||||
|
class="border border-[#eeeeee] rounded-[20rpx] bg-white p-[30rpx]"
|
||||||
|
style="box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);"
|
||||||
|
>
|
||||||
|
<!-- 字段信息 -->
|
||||||
|
<view class="mb-[24rpx]">
|
||||||
|
<text class="mb-[8rpx] block text-[32rpx] text-[#232338] font-medium">
|
||||||
|
{{ field.label }}
|
||||||
|
</text>
|
||||||
|
<text v-if="getFieldRemark(field)" class="block text-[24rpx] text-[#65686f] leading-[1.5]">
|
||||||
|
{{ getFieldRemark(field) }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 输入控件 -->
|
||||||
|
<view>
|
||||||
|
<!-- 字符串类型 -->
|
||||||
|
<input
|
||||||
|
v-if="field.type === 'string'"
|
||||||
|
v-model="tempParams[field.key]"
|
||||||
|
class="box-border h-[80rpx] w-full border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[16rpx_20rpx] text-[28rpx] text-[#232338] focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
|
||||||
|
type="text"
|
||||||
|
:placeholder="`请输入${field.label}`"
|
||||||
|
@input="
|
||||||
|
handleParamChange(field.key, $event.detail.value, field)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
|
||||||
|
<!-- 数组类型 -->
|
||||||
|
<view v-else-if="field.type === 'array'">
|
||||||
|
<text class="mb-[16rpx] block text-[24rpx] text-[#65686f]">
|
||||||
|
每行输入一个项目
|
||||||
|
</text>
|
||||||
|
<textarea
|
||||||
|
v-model="arrayTextCache[field.key]"
|
||||||
|
class="box-border min-h-[200rpx] w-full border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] text-[26rpx] text-[#232338] leading-[1.6] focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
|
||||||
|
:placeholder="`请输入${field.label},每行一个`"
|
||||||
|
@input="
|
||||||
|
handleArrayChange(field.key, $event.detail.value, field)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- JSON类型 -->
|
||||||
|
<view v-else-if="field.type === 'json'">
|
||||||
|
<text class="mb-[16rpx] block text-[24rpx] text-[#65686f]">
|
||||||
|
请输入有效的JSON格式
|
||||||
|
</text>
|
||||||
|
<textarea
|
||||||
|
v-model="jsonTextCache[field.key]"
|
||||||
|
class="box-border min-h-[300rpx] w-full border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[20rpx] text-[26rpx] text-[#232338] leading-[1.6] font-mono focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
|
||||||
|
placeholder="请输入合法的JSON格式"
|
||||||
|
@blur="
|
||||||
|
handleJsonChange(field.key, $event.detail.value, field)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 数字类型 -->
|
||||||
|
<input
|
||||||
|
v-else-if="field.type === 'number'"
|
||||||
|
v-model="tempParams[field.key]"
|
||||||
|
class="box-border h-[80rpx] w-full border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[16rpx_20rpx] text-[28rpx] text-[#232338] focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
|
||||||
|
type="number"
|
||||||
|
:placeholder="`请输入${field.label}`"
|
||||||
|
@input="
|
||||||
|
handleParamChange(
|
||||||
|
field.key,
|
||||||
|
Number($event.detail.value),
|
||||||
|
field,
|
||||||
|
)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
|
||||||
|
<!-- 布尔类型 -->
|
||||||
|
<view
|
||||||
|
v-else-if="field.type === 'boolean' || field.type === 'bool'"
|
||||||
|
class="flex items-center justify-between py-[20rpx]"
|
||||||
|
>
|
||||||
|
<view class="flex-1">
|
||||||
|
<text class="mb-[8rpx] block text-[28rpx] text-[#232338]">
|
||||||
|
启用功能
|
||||||
|
</text>
|
||||||
|
<text class="block text-[24rpx] text-[#65686f]">
|
||||||
|
开启或关闭此功能
|
||||||
|
</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="box-border h-[80rpx] w-full border border-[#eeeeee] rounded-[12rpx] bg-[#f5f7fb] p-[16rpx_20rpx] text-[28rpx] text-[#232338] focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3]"
|
||||||
|
type="text"
|
||||||
|
:placeholder="`请输入${field.label}`"
|
||||||
|
@input="
|
||||||
|
handleParamChange(field.key, $event.detail.value, field)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</wd-action-sheet>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
@@ -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 { getEnvBaseUrl } from '@/utils'
|
||||||
|
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 currentAgent = computed(() => {
|
||||||
|
return {
|
||||||
|
id: agentId.value,
|
||||||
|
agentName: '智能助手',
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 聊天数据
|
||||||
|
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 = getEnvBaseUrl()
|
||||||
|
const audioUrl = `${baseUrl}/agent/play/${downloadId}`
|
||||||
|
|
||||||
|
// 创建音频上下文
|
||||||
|
audioContext.value = uni.createInnerAudioContext()
|
||||||
|
audioContext.value.src = audioUrl
|
||||||
|
|
||||||
|
// 设置播放状态
|
||||||
|
playingAudioId.value = audioId
|
||||||
|
|
||||||
|
// 监听播放完成
|
||||||
|
audioContext.value.onEnded(() => {
|
||||||
|
playingAudioId.value = null
|
||||||
|
if (audioContext.value) {
|
||||||
|
audioContext.value.destroy()
|
||||||
|
audioContext.value = null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听播放错误
|
||||||
|
audioContext.value.onError((error) => {
|
||||||
|
console.error('音频播放失败:', error)
|
||||||
|
toast.error('音频播放失败')
|
||||||
|
playingAudioId.value = null
|
||||||
|
if (audioContext.value) {
|
||||||
|
audioContext.value.destroy()
|
||||||
|
audioContext.value = null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 开始播放
|
||||||
|
audioContext.value.play()
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('播放音频失败:', error)
|
||||||
|
toast.error('播放音频失败')
|
||||||
|
playingAudioId.value = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onLoad((options) => {
|
||||||
|
if (options?.sessionId && options?.agentId) {
|
||||||
|
sessionId.value = options.sessionId
|
||||||
|
agentId.value = options.agentId
|
||||||
|
loadChatHistory()
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.error('缺少必要参数')
|
||||||
|
toast.error('页面参数错误')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 页面销毁时清理音频资源
|
||||||
|
onUnload(() => {
|
||||||
|
if (audioContext.value) {
|
||||||
|
audioContext.value.stop()
|
||||||
|
audioContext.value.destroy()
|
||||||
|
audioContext.value = null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="h-screen flex flex-col bg-[#f5f7fb]">
|
||||||
|
<!-- 状态栏背景 -->
|
||||||
|
<view class="w-full bg-white" :style="{ height: `${safeAreaInsets?.top}px` }" />
|
||||||
|
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<wd-navbar title="聊天详情">
|
||||||
|
<template #left>
|
||||||
|
<wd-icon name="arrow-left" size="18" @click="goBack" />
|
||||||
|
</template>
|
||||||
|
</wd-navbar>
|
||||||
|
|
||||||
|
<!-- 聊天消息列表 -->
|
||||||
|
<scroll-view
|
||||||
|
scroll-y
|
||||||
|
:style="{ height: `calc(100vh - ${safeAreaInsets?.top || 0}px - 120rpx)` }"
|
||||||
|
class="box-border flex-1 bg-[#f5f7fb] p-[20rpx]"
|
||||||
|
:scroll-into-view="`message-${messageList.length - 1}`"
|
||||||
|
>
|
||||||
|
<view v-if="loading" class="flex flex-col items-center justify-center gap-[20rpx] p-[100rpx_0]">
|
||||||
|
<wd-loading />
|
||||||
|
<text class="text-[28rpx] text-[#65686f]">
|
||||||
|
加载中...
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-else class="flex flex-col gap-[20rpx]">
|
||||||
|
<view
|
||||||
|
v-for="(message, index) in messageList"
|
||||||
|
:id="`message-${index}`"
|
||||||
|
:key="index"
|
||||||
|
class="w-full flex"
|
||||||
|
:class="{
|
||||||
|
'justify-end': message.chatType === 1,
|
||||||
|
'justify-start': message.chatType === 2,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="max-w-[80%] flex flex-col gap-[8rpx]"
|
||||||
|
:class="{
|
||||||
|
'items-end': message.chatType === 1,
|
||||||
|
'items-start': message.chatType === 2,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<!-- 消息气泡 -->
|
||||||
|
<view
|
||||||
|
class="shadow-message break-words rounded-[20rpx] p-[24rpx] leading-[1.4]"
|
||||||
|
:class="{
|
||||||
|
'bg-[#336cff] text-white': message.chatType === 1,
|
||||||
|
'bg-white text-[#232338] border border-[#eeeeee]': message.chatType === 2,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<!-- 内容区域 - 使用flex布局让图标和文本对齐 -->
|
||||||
|
<view class="flex items-center gap-[12rpx]">
|
||||||
|
<!-- 音频播放图标 -->
|
||||||
|
<view
|
||||||
|
v-if="message.audioId"
|
||||||
|
class="flex-shrink-0 cursor-pointer transition-transform duration-200 active:scale-90"
|
||||||
|
:class="{
|
||||||
|
'text-white animate-pulse-audio': message.chatType === 1 && playingAudioId === message.audioId,
|
||||||
|
'text-[#ffd700]': message.chatType === 1 && playingAudioId === message.audioId && playingAudioId,
|
||||||
|
'text-[#336cff] animate-pulse-audio': message.chatType === 2 && playingAudioId === message.audioId,
|
||||||
|
'text-[#ff6b35]': message.chatType === 2 && playingAudioId === message.audioId && playingAudioId,
|
||||||
|
'text-white': message.chatType === 1 && playingAudioId !== message.audioId,
|
||||||
|
'text-[#336cff]': message.chatType === 2 && playingAudioId !== message.audioId,
|
||||||
|
}"
|
||||||
|
@click="playAudio(message.audioId)"
|
||||||
|
>
|
||||||
|
<wd-icon
|
||||||
|
:name="playingAudioId === message.audioId ? 'pause-circle-filled' : 'play-circle-filled'"
|
||||||
|
size="20"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 消息内容容器 -->
|
||||||
|
<view class="min-w-0 flex-1">
|
||||||
|
<!-- 消息内容 -->
|
||||||
|
<text class="block text-[28rpx]">
|
||||||
|
{{ getMessageContent(message) }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 说话人信息 -->
|
||||||
|
<text
|
||||||
|
class="mx-[12rpx] text-[22rpx] text-[#9d9ea3]"
|
||||||
|
:class="{
|
||||||
|
'text-right': message.chatType === 1,
|
||||||
|
'text-left': message.chatType === 2,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ formatTime(message.createdAt) }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 自定义阴影和动画效果,无法用UnoCSS表示的样式 */
|
||||||
|
.shadow-message {
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-audio {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-pulse-audio {
|
||||||
|
animation: pulse-audio 1.5s infinite;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,399 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import type { ChatSession } from '@/api/chat-history/types'
|
||||||
|
import { computed, onMounted, ref } from 'vue'
|
||||||
|
import { getChatSessions } from '@/api/chat-history/chat-history'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'ChatHistory',
|
||||||
|
})
|
||||||
|
|
||||||
|
// 接收props
|
||||||
|
interface Props {
|
||||||
|
agentId?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
agentId: 'default'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取屏幕边界到安全区域距离
|
||||||
|
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 loading = ref(false)
|
||||||
|
const loadingMore = ref(false)
|
||||||
|
const hasMore = ref(true)
|
||||||
|
const currentPage = ref(1)
|
||||||
|
const pageSize = 10
|
||||||
|
|
||||||
|
// 使用传入的智能体ID
|
||||||
|
const currentAgentId = computed(() => {
|
||||||
|
return props.agentId
|
||||||
|
})
|
||||||
|
|
||||||
|
// 加载聊天会话列表
|
||||||
|
async function loadChatSessions(page = 1, isRefresh = false) {
|
||||||
|
try {
|
||||||
|
console.log('获取聊天会话列表', { page, isRefresh })
|
||||||
|
|
||||||
|
// 检查是否有当前选中的智能体
|
||||||
|
if (!currentAgentId.value) {
|
||||||
|
console.warn('没有选中的智能体')
|
||||||
|
sessionList.value = []
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (page === 1) {
|
||||||
|
loading.value = true
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
loadingMore.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await getChatSessions(currentAgentId.value, {
|
||||||
|
page,
|
||||||
|
limit: pageSize,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (page === 1) {
|
||||||
|
sessionList.value = response.list || []
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
sessionList.value.push(...(response.list || []))
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新分页信息
|
||||||
|
hasMore.value = (response.list?.length || 0) === pageSize
|
||||||
|
currentPage.value = page
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('获取聊天会话列表失败:', error)
|
||||||
|
if (page === 1) {
|
||||||
|
sessionList.value = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
loading.value = false
|
||||||
|
loadingMore.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暴露给父组件的刷新方法
|
||||||
|
async function refresh() {
|
||||||
|
currentPage.value = 1
|
||||||
|
hasMore.value = true
|
||||||
|
await loadChatSessions(1, true)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暴露给父组件的加载更多方法
|
||||||
|
async function loadMore() {
|
||||||
|
if (!hasMore.value || loadingMore.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
await loadChatSessions(currentPage.value + 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化时间
|
||||||
|
function formatTime(timeStr: string) {
|
||||||
|
if (!timeStr)
|
||||||
|
return '未知时间'
|
||||||
|
|
||||||
|
// 处理时间字符串,确保格式正确
|
||||||
|
const date = new Date(timeStr.replace(' ', 'T')) // 转换为ISO格式
|
||||||
|
const now = new Date()
|
||||||
|
|
||||||
|
// 检查日期是否有效
|
||||||
|
if (Number.isNaN(date.getTime())) {
|
||||||
|
return timeStr // 如果解析失败,直接返回原字符串
|
||||||
|
}
|
||||||
|
|
||||||
|
const diff = now.getTime() - date.getTime()
|
||||||
|
|
||||||
|
// 小于1分钟
|
||||||
|
if (diff < 60000)
|
||||||
|
return '刚刚'
|
||||||
|
|
||||||
|
// 小于1小时
|
||||||
|
if (diff < 3600000)
|
||||||
|
return `${Math.floor(diff / 60000)}分钟前`
|
||||||
|
|
||||||
|
// 小于1天(24小时)
|
||||||
|
if (diff < 86400000)
|
||||||
|
return `${Math.floor(diff / 3600000)}小时前`
|
||||||
|
|
||||||
|
// 小于7天
|
||||||
|
if (diff < 604800000) {
|
||||||
|
const days = Math.floor(diff / 86400000)
|
||||||
|
return `${days}天前`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 超过7天,显示具体日期
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
|
const currentYear = now.getFullYear()
|
||||||
|
|
||||||
|
// 如果是当前年份,不显示年份
|
||||||
|
if (year === currentYear) {
|
||||||
|
return `${month}-${day}`
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${year}-${month}-${day}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 进入聊天详情
|
||||||
|
function goToChatDetail(session: ChatSession) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/chat-history/detail?sessionId=${session.sessionId}&agentId=${currentAgentId.value}`,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// 智能体已简化为默认
|
||||||
|
|
||||||
|
loadChatSessions(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 暴露方法给父组件
|
||||||
|
defineExpose({
|
||||||
|
refresh,
|
||||||
|
loadMore,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="chat-history-container" style="background: #f5f7fb; min-height: 100%;">
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<view v-if="loading && sessionList.length === 0" class="loading-container">
|
||||||
|
<wd-loading color="#336cff" />
|
||||||
|
<text class="loading-text">
|
||||||
|
加载中...
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 会话列表 -->
|
||||||
|
<view v-else-if="sessionList.length > 0" class="session-container">
|
||||||
|
<!-- 聊天会话列表 -->
|
||||||
|
<view class="session-list">
|
||||||
|
<view
|
||||||
|
v-for="session in sessionList"
|
||||||
|
:key="session.sessionId"
|
||||||
|
class="session-item"
|
||||||
|
@click="goToChatDetail(session)"
|
||||||
|
>
|
||||||
|
<view class="session-card">
|
||||||
|
<view class="session-info">
|
||||||
|
<view class="session-header">
|
||||||
|
<text class="session-title">
|
||||||
|
对话记录 {{ session.sessionId.substring(0, 8) }}...
|
||||||
|
</text>
|
||||||
|
<text class="session-time">
|
||||||
|
{{ formatTime(session.createdAt) }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="session-meta">
|
||||||
|
<text class="chat-count">
|
||||||
|
共 {{ session.chatCount }} 条对话
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-icon name="arrow-right" custom-class="arrow-icon" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 加载更多状态 -->
|
||||||
|
<view v-if="loadingMore" class="loading-more">
|
||||||
|
<wd-loading color="#336cff" size="24" />
|
||||||
|
<text class="loading-more-text">
|
||||||
|
加载中...
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 没有更多数据 -->
|
||||||
|
<view v-else-if="!hasMore && sessionList.length > 0" class="no-more">
|
||||||
|
<text class="no-more-text">
|
||||||
|
没有更多数据了
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view v-else-if="!loading" class="empty-state">
|
||||||
|
<wd-icon name="chat" custom-class="empty-icon" />
|
||||||
|
<text class="empty-text">
|
||||||
|
暂无聊天记录
|
||||||
|
</text>
|
||||||
|
<text class="empty-desc">
|
||||||
|
与智能体的对话记录会显示在这里
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chat-history-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 100rpx 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-more {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
gap: 16rpx;
|
||||||
|
|
||||||
|
.loading-more-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-more {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
|
||||||
|
.no-more-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-section {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-bar {
|
||||||
|
background: #ffffff;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-item {
|
||||||
|
background: #fbfbfb;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||||
|
border: 1rpx solid #eeeeee;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #f8f9fa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 32rpx;
|
||||||
|
|
||||||
|
.session-info {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.session-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
|
||||||
|
.session-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #232338;
|
||||||
|
max-width: 70%;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-time {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #9d9ea3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-meta {
|
||||||
|
.chat-count {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #65686f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arrow-icon) {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #c7c7cc;
|
||||||
|
margin-left: 16rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 100rpx 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
:deep(.empty-icon) {
|
||||||
|
font-size: 120rpx;
|
||||||
|
color: #d9d9d9;
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666666;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-desc {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,684 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
import { useToast } from 'wot-design-uni'
|
||||||
|
|
||||||
|
// 类型定义
|
||||||
|
interface WiFiNetwork {
|
||||||
|
ssid: string
|
||||||
|
rssi: number
|
||||||
|
authmode: number
|
||||||
|
channel: number
|
||||||
|
}
|
||||||
|
|
||||||
|
// Props
|
||||||
|
interface Props {
|
||||||
|
selectedNetwork: WiFiNetwork | null
|
||||||
|
password: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>()
|
||||||
|
|
||||||
|
// Toast 实例
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const generating = ref(false)
|
||||||
|
const playing = ref(false)
|
||||||
|
const audioGenerated = ref(false)
|
||||||
|
const autoLoop = ref(true)
|
||||||
|
const audioFilePath = ref('')
|
||||||
|
const audioContext = ref<any>(null)
|
||||||
|
|
||||||
|
// AFSK调制参数 - 参考HTML文件
|
||||||
|
const MARK = 1800 // 二进制1的频率 (Hz)
|
||||||
|
const SPACE = 1500 // 二进制0的频率 (Hz)
|
||||||
|
const SAMPLE_RATE = 44100 // 采样率
|
||||||
|
const BIT_RATE = 100 // 比特率 (bps)
|
||||||
|
const START_BYTES = [0x01, 0x02] // 起始标记
|
||||||
|
const END_BYTES = [0x03, 0x04] // 结束标记
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const canGenerate = computed(() => {
|
||||||
|
if (!props.selectedNetwork)
|
||||||
|
return false
|
||||||
|
if (props.selectedNetwork.authmode > 0 && !props.password)
|
||||||
|
return false
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
|
||||||
|
const audioLengthText = computed(() => {
|
||||||
|
if (!props.selectedNetwork)
|
||||||
|
return '0秒'
|
||||||
|
const dataStr = `${props.selectedNetwork.ssid}\n${props.password}`
|
||||||
|
const textBytes = stringToBytes(dataStr)
|
||||||
|
const totalBits = (START_BYTES.length + textBytes.length + 1 + END_BYTES.length) * 8
|
||||||
|
const duration = Math.ceil(totalBits / BIT_RATE)
|
||||||
|
return `约${duration}秒`
|
||||||
|
})
|
||||||
|
|
||||||
|
// 字符串转字节数组 - uniapp兼容版本
|
||||||
|
function stringToBytes(str: string): number[] {
|
||||||
|
const bytes: number[] = []
|
||||||
|
for (let i = 0; i < str.length; i++) {
|
||||||
|
const code = str.charCodeAt(i)
|
||||||
|
if (code < 0x80) {
|
||||||
|
bytes.push(code)
|
||||||
|
}
|
||||||
|
else if (code < 0x800) {
|
||||||
|
bytes.push(0xC0 | (code >> 6))
|
||||||
|
bytes.push(0x80 | (code & 0x3F))
|
||||||
|
}
|
||||||
|
else if (code < 0xD800 || code >= 0xE000) {
|
||||||
|
bytes.push(0xE0 | (code >> 12))
|
||||||
|
bytes.push(0x80 | ((code >> 6) & 0x3F))
|
||||||
|
bytes.push(0x80 | (code & 0x3F))
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// 代理对处理
|
||||||
|
i++
|
||||||
|
const hi = code
|
||||||
|
const lo = str.charCodeAt(i)
|
||||||
|
const codePoint = 0x10000 + (((hi & 0x3FF) << 10) | (lo & 0x3FF))
|
||||||
|
bytes.push(0xF0 | (codePoint >> 18))
|
||||||
|
bytes.push(0x80 | ((codePoint >> 12) & 0x3F))
|
||||||
|
bytes.push(0x80 | ((codePoint >> 6) & 0x3F))
|
||||||
|
bytes.push(0x80 | (codePoint & 0x3F))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return bytes
|
||||||
|
}
|
||||||
|
|
||||||
|
// 校验和计算 - 参考HTML文件
|
||||||
|
function checksum(data: number[]): number {
|
||||||
|
return data.reduce((sum, b) => (sum + b) & 0xFF, 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 字节转比特位 - 参考HTML文件
|
||||||
|
function toBits(byte: number): number[] {
|
||||||
|
const bits: number[] = []
|
||||||
|
for (let i = 7; i >= 0; i--) {
|
||||||
|
bits.push((byte >> i) & 1)
|
||||||
|
}
|
||||||
|
return bits
|
||||||
|
}
|
||||||
|
|
||||||
|
// AFSK调制 - 参考HTML文件算法
|
||||||
|
function afskModulate(bits: number[]): Float32Array {
|
||||||
|
const samplesPerBit = SAMPLE_RATE / BIT_RATE
|
||||||
|
const totalSamples = Math.floor(bits.length * samplesPerBit)
|
||||||
|
const buffer = new Float32Array(totalSamples)
|
||||||
|
|
||||||
|
for (let i = 0; i < bits.length; i++) {
|
||||||
|
const freq = bits[i] ? MARK : SPACE
|
||||||
|
for (let j = 0; j < samplesPerBit; j++) {
|
||||||
|
const t = (i * samplesPerBit + j) / SAMPLE_RATE
|
||||||
|
buffer[i * samplesPerBit + j] = Math.sin(2 * Math.PI * freq * t)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return buffer
|
||||||
|
}
|
||||||
|
|
||||||
|
// 浮点转16位PCM - 参考HTML文件
|
||||||
|
function floatTo16BitPCM(floatSamples: Float32Array): Uint8Array {
|
||||||
|
const buffer = new Uint8Array(floatSamples.length * 2)
|
||||||
|
for (let i = 0; i < floatSamples.length; i++) {
|
||||||
|
const s = Math.max(-1, Math.min(1, floatSamples[i]))
|
||||||
|
const val = s < 0 ? s * 0x8000 : s * 0x7FFF
|
||||||
|
buffer[i * 2] = val & 0xFF
|
||||||
|
buffer[i * 2 + 1] = (val >> 8) & 0xFF
|
||||||
|
}
|
||||||
|
return buffer
|
||||||
|
}
|
||||||
|
|
||||||
|
// base64编码表
|
||||||
|
const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
|
||||||
|
|
||||||
|
// 兼容的base64编码实现
|
||||||
|
function base64Encode(bytes: Uint8Array): string {
|
||||||
|
let result = ''
|
||||||
|
let i = 0
|
||||||
|
|
||||||
|
while (i < bytes.length) {
|
||||||
|
const a = bytes[i++]
|
||||||
|
const b = i < bytes.length ? bytes[i++] : 0
|
||||||
|
const c = i < bytes.length ? bytes[i++] : 0
|
||||||
|
|
||||||
|
const bitmap = (a << 16) | (b << 8) | c
|
||||||
|
|
||||||
|
result += base64Chars.charAt((bitmap >> 18) & 63)
|
||||||
|
result += base64Chars.charAt((bitmap >> 12) & 63)
|
||||||
|
result += i - 2 < bytes.length ? base64Chars.charAt((bitmap >> 6) & 63) : '='
|
||||||
|
result += i - 1 < bytes.length ? base64Chars.charAt(bitmap & 63) : '='
|
||||||
|
}
|
||||||
|
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数组转base64编码 - 兼容版本
|
||||||
|
function arrayBufferToBase64(buffer: ArrayBuffer): string {
|
||||||
|
const bytes = new Uint8Array(buffer)
|
||||||
|
|
||||||
|
// 尝试使用原生btoa,如果不存在则使用自定义实现
|
||||||
|
if (typeof btoa !== 'undefined') {
|
||||||
|
let binary = ''
|
||||||
|
for (let i = 0; i < bytes.byteLength; i++) {
|
||||||
|
binary += String.fromCharCode(bytes[i])
|
||||||
|
}
|
||||||
|
return btoa(binary)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return base64Encode(bytes)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 构建WAV文件 - 返回ArrayBuffer而不是Blob
|
||||||
|
function buildWav(pcm: Uint8Array): ArrayBuffer {
|
||||||
|
const wavHeader = new Uint8Array(44)
|
||||||
|
const dataLen = pcm.length
|
||||||
|
const fileLen = 36 + dataLen
|
||||||
|
|
||||||
|
const writeStr = (offset: number, str: string) => {
|
||||||
|
for (let i = 0; i < str.length; i++) {
|
||||||
|
wavHeader[offset + i] = str.charCodeAt(i)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const write32 = (offset: number, value: number) => {
|
||||||
|
wavHeader[offset] = value & 0xFF
|
||||||
|
wavHeader[offset + 1] = (value >> 8) & 0xFF
|
||||||
|
wavHeader[offset + 2] = (value >> 16) & 0xFF
|
||||||
|
wavHeader[offset + 3] = (value >> 24) & 0xFF
|
||||||
|
}
|
||||||
|
|
||||||
|
const write16 = (offset: number, value: number) => {
|
||||||
|
wavHeader[offset] = value & 0xFF
|
||||||
|
wavHeader[offset + 1] = (value >> 8) & 0xFF
|
||||||
|
}
|
||||||
|
|
||||||
|
writeStr(0, 'RIFF')
|
||||||
|
write32(4, fileLen)
|
||||||
|
writeStr(8, 'WAVE')
|
||||||
|
writeStr(12, 'fmt ')
|
||||||
|
write32(16, 16)
|
||||||
|
write16(20, 1)
|
||||||
|
write16(22, 1)
|
||||||
|
write32(24, SAMPLE_RATE)
|
||||||
|
write32(28, SAMPLE_RATE * 2)
|
||||||
|
write16(32, 2)
|
||||||
|
write16(34, 16)
|
||||||
|
writeStr(36, 'data')
|
||||||
|
write32(40, dataLen)
|
||||||
|
|
||||||
|
// 合并header和数据
|
||||||
|
const result = new ArrayBuffer(44 + dataLen)
|
||||||
|
const resultView = new Uint8Array(result)
|
||||||
|
resultView.set(wavHeader)
|
||||||
|
resultView.set(pcm, 44)
|
||||||
|
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成并播放声波 - 主要功能函数
|
||||||
|
async function generateAndPlay() {
|
||||||
|
if (!canGenerate.value || !props.selectedNetwork)
|
||||||
|
return
|
||||||
|
|
||||||
|
generating.value = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log('生成超声波配网音频...')
|
||||||
|
|
||||||
|
// 准备配网数据 - 参考HTML文件格式
|
||||||
|
const dataStr = `${props.selectedNetwork.ssid}\n${props.password}`
|
||||||
|
const textBytes = stringToBytes(dataStr)
|
||||||
|
const fullBytes = [...START_BYTES, ...textBytes, checksum(textBytes), ...END_BYTES]
|
||||||
|
|
||||||
|
console.log('配网数据:', { ssid: props.selectedNetwork.ssid, password: props.password })
|
||||||
|
console.log('数据字节长度:', textBytes.length)
|
||||||
|
|
||||||
|
// 转换为比特流
|
||||||
|
let bits: number[] = []
|
||||||
|
fullBytes.forEach((b) => {
|
||||||
|
bits = bits.concat(toBits(b))
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log('比特流长度:', bits.length)
|
||||||
|
|
||||||
|
// AFSK调制 - 减少采样率降低文件大小
|
||||||
|
const reducedSampleRate = 22050 // 降低采样率
|
||||||
|
const samplesPerBit = reducedSampleRate / BIT_RATE
|
||||||
|
const totalSamples = Math.floor(bits.length * samplesPerBit)
|
||||||
|
const floatBuf = new Float32Array(totalSamples)
|
||||||
|
|
||||||
|
for (let i = 0; i < bits.length; i++) {
|
||||||
|
const freq = bits[i] ? MARK : SPACE
|
||||||
|
for (let j = 0; j < samplesPerBit; j++) {
|
||||||
|
const t = (i * samplesPerBit + j) / reducedSampleRate
|
||||||
|
floatBuf[i * samplesPerBit + j] = Math.sin(2 * Math.PI * freq * t) * 0.5 // 降低音量
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const pcmBuf = floatTo16BitPCM(floatBuf)
|
||||||
|
|
||||||
|
// 生成WAV文件 - 使用降低的采样率
|
||||||
|
const wavBuffer = buildWavOptimized(pcmBuf, reducedSampleRate)
|
||||||
|
const base64 = arrayBufferToBase64(wavBuffer)
|
||||||
|
const dataUri = `data:audio/wav;base64,${base64}`
|
||||||
|
|
||||||
|
console.log('base64长度:', base64.length, '约', Math.round(base64.length / 1024), 'KB')
|
||||||
|
|
||||||
|
// 检查数据大小
|
||||||
|
if (base64.length > 1024 * 1024) { // 超过1MB
|
||||||
|
throw new Error('音频文件过大,请缩短SSID或密码长度')
|
||||||
|
}
|
||||||
|
|
||||||
|
audioFilePath.value = dataUri
|
||||||
|
audioGenerated.value = true
|
||||||
|
|
||||||
|
console.log('音频生成成功,比特流长度:', bits.length, '采样点数:', floatBuf.length)
|
||||||
|
|
||||||
|
toast.success('声波生成成功')
|
||||||
|
|
||||||
|
// 延迟播放
|
||||||
|
setTimeout(async () => {
|
||||||
|
await playAudio()
|
||||||
|
}, 800) // 增加延迟时间
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('音频生成失败:', error)
|
||||||
|
toast.error(`声波生成失败: ${error.message || error}`)
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
generating.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 优化的WAV构建函数
|
||||||
|
function buildWavOptimized(pcm: Uint8Array, sampleRate: number): ArrayBuffer {
|
||||||
|
const wavHeader = new Uint8Array(44)
|
||||||
|
const dataLen = pcm.length
|
||||||
|
const fileLen = 36 + dataLen
|
||||||
|
|
||||||
|
const writeStr = (offset: number, str: string) => {
|
||||||
|
for (let i = 0; i < str.length; i++) {
|
||||||
|
wavHeader[offset + i] = str.charCodeAt(i)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const write32 = (offset: number, value: number) => {
|
||||||
|
wavHeader[offset] = value & 0xFF
|
||||||
|
wavHeader[offset + 1] = (value >> 8) & 0xFF
|
||||||
|
wavHeader[offset + 2] = (value >> 16) & 0xFF
|
||||||
|
wavHeader[offset + 3] = (value >> 24) & 0xFF
|
||||||
|
}
|
||||||
|
|
||||||
|
const write16 = (offset: number, value: number) => {
|
||||||
|
wavHeader[offset] = value & 0xFF
|
||||||
|
wavHeader[offset + 1] = (value >> 8) & 0xFF
|
||||||
|
}
|
||||||
|
|
||||||
|
writeStr(0, 'RIFF')
|
||||||
|
write32(4, fileLen)
|
||||||
|
writeStr(8, 'WAVE')
|
||||||
|
writeStr(12, 'fmt ')
|
||||||
|
write32(16, 16)
|
||||||
|
write16(20, 1)
|
||||||
|
write16(22, 1)
|
||||||
|
write32(24, sampleRate) // 使用传入的采样率
|
||||||
|
write32(28, sampleRate * 2)
|
||||||
|
write16(32, 2)
|
||||||
|
write16(34, 16)
|
||||||
|
writeStr(36, 'data')
|
||||||
|
write32(40, dataLen)
|
||||||
|
|
||||||
|
// 合并header和数据
|
||||||
|
const result = new ArrayBuffer(44 + dataLen)
|
||||||
|
const resultView = new Uint8Array(result)
|
||||||
|
resultView.set(wavHeader)
|
||||||
|
resultView.set(pcm, 44)
|
||||||
|
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
// 播放音频
|
||||||
|
async function playAudio() {
|
||||||
|
if (!audioFilePath.value) {
|
||||||
|
toast.error('请先生成音频')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 强制清理所有旧的音频实例
|
||||||
|
await cleanupAudio()
|
||||||
|
|
||||||
|
// 等待一下确保清理完成
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 200))
|
||||||
|
|
||||||
|
playing.value = true
|
||||||
|
console.log('开始播放超声波配网音频')
|
||||||
|
|
||||||
|
// 创建新的音频上下文
|
||||||
|
const innerAudioContext = uni.createInnerAudioContext()
|
||||||
|
audioContext.value = innerAudioContext
|
||||||
|
|
||||||
|
// 最简化的音频设置
|
||||||
|
innerAudioContext.src = audioFilePath.value
|
||||||
|
innerAudioContext.loop = autoLoop.value
|
||||||
|
innerAudioContext.volume = 0.8
|
||||||
|
innerAudioContext.autoplay = false
|
||||||
|
|
||||||
|
// 简化的事件监听
|
||||||
|
innerAudioContext.onPlay(() => {
|
||||||
|
console.log('超声波音频开始播放')
|
||||||
|
toast.success('开始播放配网声波')
|
||||||
|
})
|
||||||
|
|
||||||
|
innerAudioContext.onEnded(() => {
|
||||||
|
console.log('超声波音频播放结束')
|
||||||
|
if (!autoLoop.value) {
|
||||||
|
playing.value = false
|
||||||
|
cleanupAudio()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
innerAudioContext.onError((error) => {
|
||||||
|
console.error('音频播放失败:', error)
|
||||||
|
playing.value = false
|
||||||
|
|
||||||
|
let errorMsg = '音频播放失败'
|
||||||
|
if (error.errCode === -99) {
|
||||||
|
errorMsg = '音频资源繁忙,请稍后重试'
|
||||||
|
}
|
||||||
|
else if (error.errCode === 10004) {
|
||||||
|
errorMsg = '音频格式不支持,可能是data URI问题'
|
||||||
|
}
|
||||||
|
else if (error.errCode === 10003) {
|
||||||
|
errorMsg = '音频文件错误'
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.error(errorMsg)
|
||||||
|
|
||||||
|
cleanupAudio()
|
||||||
|
})
|
||||||
|
|
||||||
|
innerAudioContext.onStop(() => {
|
||||||
|
console.log('音频播放停止')
|
||||||
|
playing.value = false
|
||||||
|
})
|
||||||
|
|
||||||
|
// 延迟播放
|
||||||
|
setTimeout(() => {
|
||||||
|
if (audioContext.value) {
|
||||||
|
console.log('尝试播放音频,src长度:', audioFilePath.value.length)
|
||||||
|
audioContext.value.play()
|
||||||
|
}
|
||||||
|
}, 300)
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('播放音频异常:', error)
|
||||||
|
playing.value = false
|
||||||
|
await cleanupAudio()
|
||||||
|
toast.error(`播放失败: ${error.message}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清理音频资源
|
||||||
|
async function cleanupAudio() {
|
||||||
|
if (audioContext.value) {
|
||||||
|
try {
|
||||||
|
audioContext.value.pause()
|
||||||
|
audioContext.value.destroy()
|
||||||
|
console.log('清理音频上下文')
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
console.log('清理音频上下文失败:', e)
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
audioContext.value = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 停止播放
|
||||||
|
async function stopAudio() {
|
||||||
|
playing.value = false
|
||||||
|
await cleanupAudio()
|
||||||
|
|
||||||
|
console.log('停止播放超声波音频')
|
||||||
|
toast.success('已停止播放')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="ultrasonic-config">
|
||||||
|
<!-- 选中的网络信息 -->
|
||||||
|
<view v-if="props.selectedNetwork" class="selected-network">
|
||||||
|
<view class="network-info">
|
||||||
|
<view class="network-name">
|
||||||
|
选中网络: {{ props.selectedNetwork.ssid }}
|
||||||
|
</view>
|
||||||
|
<view class="network-details">
|
||||||
|
<text class="network-signal">
|
||||||
|
信号: {{ props.selectedNetwork.rssi }}dBm
|
||||||
|
</text>
|
||||||
|
<text class="network-security">
|
||||||
|
{{ props.selectedNetwork.authmode === 0 ? '开放网络' : '加密网络' }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="props.password" class="network-password">
|
||||||
|
密码: {{ '*'.repeat(props.password.length) }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 超声波配网操作 -->
|
||||||
|
<view class="submit-section">
|
||||||
|
<wd-button
|
||||||
|
type="primary"
|
||||||
|
size="large"
|
||||||
|
block
|
||||||
|
:loading="generating"
|
||||||
|
:disabled="!canGenerate"
|
||||||
|
@click="generateAndPlay"
|
||||||
|
>
|
||||||
|
{{ generating ? '生成中...' : '🎵 生成并播放声波' }}
|
||||||
|
</wd-button>
|
||||||
|
|
||||||
|
<wd-button
|
||||||
|
v-if="audioGenerated"
|
||||||
|
type="success"
|
||||||
|
size="large"
|
||||||
|
block
|
||||||
|
:loading="playing"
|
||||||
|
@click="playAudio"
|
||||||
|
>
|
||||||
|
{{ playing ? '播放中...' : '🔊 播放声波' }}
|
||||||
|
</wd-button>
|
||||||
|
|
||||||
|
<wd-button
|
||||||
|
v-if="playing"
|
||||||
|
type="warning"
|
||||||
|
size="large"
|
||||||
|
block
|
||||||
|
@click="stopAudio"
|
||||||
|
>
|
||||||
|
⏹️ 停止播放
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 音频控制选项 -->
|
||||||
|
<view v-if="audioGenerated" class="audio-options">
|
||||||
|
<view class="option-item">
|
||||||
|
<wd-checkbox v-model="autoLoop">
|
||||||
|
自动循环播放声波
|
||||||
|
</wd-checkbox>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 音频播放器 -->
|
||||||
|
<view v-if="audioGenerated" class="audio-player">
|
||||||
|
<view class="player-info">
|
||||||
|
<text class="audio-title">
|
||||||
|
配网音频文件
|
||||||
|
</text>
|
||||||
|
<text class="audio-duration">
|
||||||
|
时长: {{ audioLengthText }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 使用说明 -->
|
||||||
|
<view class="help-section">
|
||||||
|
<view class="help-title">
|
||||||
|
超声波配网说明
|
||||||
|
</view>
|
||||||
|
<view class="help-content">
|
||||||
|
<text class="help-item">
|
||||||
|
1. 确保已选择WiFi网络并输入密码
|
||||||
|
</text>
|
||||||
|
<text class="help-item">
|
||||||
|
2. 点击生成并播放声波,系统会将配网信息编码为音频
|
||||||
|
</text>
|
||||||
|
<text class="help-item">
|
||||||
|
3. 将手机靠近xiaozhi设备(距离1-2米)
|
||||||
|
</text>
|
||||||
|
<text class="help-item">
|
||||||
|
4. 音频播放时,xiaozhi会接收并解码配网信息
|
||||||
|
</text>
|
||||||
|
<text class="help-item">
|
||||||
|
5. 配网成功后设备会自动连接WiFi网络
|
||||||
|
</text>
|
||||||
|
<text class="help-tip">
|
||||||
|
使用AFSK调制技术,通过1800Hz和1500Hz频率传输数据
|
||||||
|
</text>
|
||||||
|
<text class="help-tip">
|
||||||
|
请确保手机音量适中,避免环境噪音干扰
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.ultrasonic-config {
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-network {
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-info {
|
||||||
|
padding: 24rpx;
|
||||||
|
background-color: #f0f6ff;
|
||||||
|
border: 1rpx solid #336cff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #232338;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-details {
|
||||||
|
display: flex;
|
||||||
|
gap: 24rpx;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-signal,
|
||||||
|
.network-security {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #65686f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-password {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #65686f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-section {
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-section .wd-button {
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-section .wd-button:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-options {
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
padding: 24rpx;
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
border: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-item {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-player {
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
padding: 24rpx;
|
||||||
|
background-color: #f0f6ff;
|
||||||
|
border: 1rpx solid #336cff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #232338;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-duration {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #65686f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-section {
|
||||||
|
padding: 32rpx 24rpx;
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
border: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #232338;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-item {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #65686f;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-tip {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #336cff;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,230 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
import { useToast } from 'wot-design-uni'
|
||||||
|
|
||||||
|
// 类型定义
|
||||||
|
interface WiFiNetwork {
|
||||||
|
ssid: string
|
||||||
|
rssi: number
|
||||||
|
authmode: number
|
||||||
|
channel: number
|
||||||
|
}
|
||||||
|
|
||||||
|
// Props
|
||||||
|
interface Props {
|
||||||
|
selectedNetwork: WiFiNetwork | null
|
||||||
|
password: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>()
|
||||||
|
|
||||||
|
// Toast 实例
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const configuring = ref(false)
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const canSubmit = computed(() => {
|
||||||
|
if (!props.selectedNetwork)
|
||||||
|
return false
|
||||||
|
if (props.selectedNetwork.authmode > 0 && !props.password)
|
||||||
|
return false
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
|
||||||
|
// ESP32连接检查
|
||||||
|
async function checkESP32Connection() {
|
||||||
|
try {
|
||||||
|
const response = await uni.request({
|
||||||
|
url: 'http://192.168.4.1/scan',
|
||||||
|
method: 'GET',
|
||||||
|
timeout: 3000,
|
||||||
|
})
|
||||||
|
return response.statusCode === 200
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.log('ESP32连接检查失败:', error)
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交配网
|
||||||
|
async function submitConfig() {
|
||||||
|
if (!props.selectedNetwork)
|
||||||
|
return
|
||||||
|
|
||||||
|
// 检查ESP32连接
|
||||||
|
const connected = await checkESP32Connection()
|
||||||
|
if (!connected) {
|
||||||
|
toast.error('请先连接xiaozhi热点')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
configuring.value = true
|
||||||
|
console.log('开始WiFi配网:', props.selectedNetwork.ssid)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await uni.request({
|
||||||
|
url: 'http://192.168.4.1/submit',
|
||||||
|
method: 'POST',
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
ssid: props.selectedNetwork.ssid,
|
||||||
|
password: props.selectedNetwork.authmode > 0 ? props.password : '',
|
||||||
|
},
|
||||||
|
timeout: 15000,
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log('WiFi配网响应:', response)
|
||||||
|
|
||||||
|
if (response.statusCode === 200 && (response.data as any)?.success) {
|
||||||
|
toast.success(`配网成功!设备将连接到 ${props.selectedNetwork.ssid},设备会自动重启。请断开xiaozhi热点连接。`)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
const errorMsg = (response.data as any)?.error || '配网失败'
|
||||||
|
toast.error(errorMsg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('WiFi配网失败:', error)
|
||||||
|
toast.error('配网失败,请检查网络连接')
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
configuring.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="wifi-config">
|
||||||
|
<!-- 选中的网络信息 -->
|
||||||
|
<view v-if="props.selectedNetwork" class="selected-network">
|
||||||
|
<view class="network-info">
|
||||||
|
<view class="network-name">
|
||||||
|
选中网络: {{ props.selectedNetwork.ssid }}
|
||||||
|
</view>
|
||||||
|
<view class="network-details">
|
||||||
|
<text class="network-signal">
|
||||||
|
信号: {{ props.selectedNetwork.rssi }}dBm
|
||||||
|
</text>
|
||||||
|
<text class="network-security">
|
||||||
|
{{ props.selectedNetwork.authmode === 0 ? '开放网络' : '加密网络' }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 配网按钮 -->
|
||||||
|
<view class="submit-section">
|
||||||
|
<wd-button
|
||||||
|
type="primary"
|
||||||
|
size="large"
|
||||||
|
block
|
||||||
|
:loading="configuring"
|
||||||
|
:disabled="!canSubmit"
|
||||||
|
@click="submitConfig"
|
||||||
|
>
|
||||||
|
{{ configuring ? '配网中...' : '开始WiFi配网' }}
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 使用说明 -->
|
||||||
|
<view class="help-section">
|
||||||
|
<view class="help-title">
|
||||||
|
WiFi配网说明
|
||||||
|
</view>
|
||||||
|
<view class="help-content">
|
||||||
|
<text class="help-item">
|
||||||
|
1. 手机连接xiaozhi热点 (xiaozhi-XXXXXX)
|
||||||
|
</text>
|
||||||
|
<text class="help-item">
|
||||||
|
2. 选择要配网的目标WiFi网络
|
||||||
|
</text>
|
||||||
|
<text class="help-item">
|
||||||
|
3. 输入WiFi密码(如果需要)
|
||||||
|
</text>
|
||||||
|
<text class="help-item">
|
||||||
|
4. 点击开始配网,等待设备连接
|
||||||
|
</text>
|
||||||
|
<text class="help-tip">
|
||||||
|
配网成功后设备会自动重启并连接目标WiFi
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.wifi-config {
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-network {
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-info {
|
||||||
|
padding: 24rpx;
|
||||||
|
background-color: #f0f6ff;
|
||||||
|
border: 1rpx solid #336cff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #232338;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-details {
|
||||||
|
display: flex;
|
||||||
|
gap: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-signal,
|
||||||
|
.network-security {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #65686f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-section {
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-section {
|
||||||
|
padding: 32rpx 24rpx;
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
border: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #232338;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-item {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #65686f;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-tip {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #336cff;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,556 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, defineEmits, defineExpose, onMounted, ref } from 'vue'
|
||||||
|
import { useToast } from 'wot-design-uni'
|
||||||
|
|
||||||
|
// 类型定义
|
||||||
|
interface WiFiNetwork {
|
||||||
|
ssid: string
|
||||||
|
rssi: number
|
||||||
|
authmode: number
|
||||||
|
channel: number
|
||||||
|
}
|
||||||
|
|
||||||
|
// Props
|
||||||
|
interface Props {
|
||||||
|
autoConnect?: boolean // 是否自动检测ESP32连接
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
autoConnect: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
// Emits
|
||||||
|
const emit = defineEmits<{
|
||||||
|
'network-selected': [network: WiFiNetwork | null, password: string]
|
||||||
|
'connection-status': [connected: boolean]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
// Toast 实例
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
// 响应式数据
|
||||||
|
const isConnectedToESP32 = ref(false)
|
||||||
|
const checkingConnection = ref(false)
|
||||||
|
const scanning = ref(false)
|
||||||
|
const wifiNetworks = ref<WiFiNetwork[]>([])
|
||||||
|
const selectedNetwork = ref<WiFiNetwork | null>(null)
|
||||||
|
const password = ref('')
|
||||||
|
const selectorExpanded = ref(false)
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const networkDisplayText = computed(() => {
|
||||||
|
if (!selectedNetwork.value)
|
||||||
|
return '请选择WiFi网络'
|
||||||
|
return selectedNetwork.value.ssid
|
||||||
|
})
|
||||||
|
|
||||||
|
// 检查xiaozhi连接状态
|
||||||
|
async function checkESP32Connection() {
|
||||||
|
checkingConnection.value = true
|
||||||
|
try {
|
||||||
|
const response = await uni.request({
|
||||||
|
url: 'http://192.168.4.1/scan',
|
||||||
|
method: 'GET',
|
||||||
|
timeout: 3000,
|
||||||
|
})
|
||||||
|
isConnectedToESP32.value = response.statusCode === 200
|
||||||
|
emit('connection-status', isConnectedToESP32.value)
|
||||||
|
console.log('xiaozhi连接状态:', isConnectedToESP32.value)
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
isConnectedToESP32.value = false
|
||||||
|
emit('connection-status', false)
|
||||||
|
console.log('xiaozhi连接检查失败:', error)
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
checkingConnection.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 扫描WiFi网络
|
||||||
|
async function scanWifi() {
|
||||||
|
if (!isConnectedToESP32.value) {
|
||||||
|
toast.error('请先连接xiaozhi热点')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
scanning.value = true
|
||||||
|
console.log('开始扫描WiFi网络')
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await uni.request({
|
||||||
|
url: 'http://192.168.4.1/scan',
|
||||||
|
method: 'GET',
|
||||||
|
timeout: 10000,
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log('WiFi扫描响应:', response)
|
||||||
|
|
||||||
|
if (response.statusCode === 200 && response.data) {
|
||||||
|
const data = response.data as any
|
||||||
|
if (data.success && Array.isArray(data.networks)) {
|
||||||
|
wifiNetworks.value = data.networks
|
||||||
|
console.log(`扫描成功,发现 ${data.networks.length} 个网络`)
|
||||||
|
}
|
||||||
|
else if (Array.isArray(response.data)) {
|
||||||
|
// 兼容旧格式
|
||||||
|
wifiNetworks.value = response.data.map((item: any) => ({
|
||||||
|
ssid: item.ssid,
|
||||||
|
rssi: item.rssi,
|
||||||
|
authmode: item.authmode,
|
||||||
|
channel: item.channel || 0,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
throw new TypeError('扫描接口返回格式异常')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
throw new Error(`HTTP ${response.statusCode}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('WiFi扫描失败:', error)
|
||||||
|
toast.error('扫描失败,请检查xiaozhi连接')
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
scanning.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示网络选择器
|
||||||
|
async function showNetworkSelector() {
|
||||||
|
// 实时检测xiaozhi连接状态
|
||||||
|
await checkESP32Connection()
|
||||||
|
|
||||||
|
if (!isConnectedToESP32.value) {
|
||||||
|
toast.error('请先连接xiaozhi热点')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
selectorExpanded.value = true
|
||||||
|
|
||||||
|
// 如果还没有网络列表,自动扫描
|
||||||
|
if (wifiNetworks.value.length === 0) {
|
||||||
|
scanWifi()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择网络
|
||||||
|
function selectNetwork(network: WiFiNetwork) {
|
||||||
|
selectedNetwork.value = network
|
||||||
|
password.value = ''
|
||||||
|
selectorExpanded.value = false
|
||||||
|
console.log('选择网络:', network.ssid)
|
||||||
|
|
||||||
|
// 通知父组件
|
||||||
|
emit('network-selected', network, '')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 密码变化时通知父组件
|
||||||
|
function onPasswordChange() {
|
||||||
|
emit('network-selected', selectedNetwork.value, password.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取当前选择的网络和密码
|
||||||
|
function getSelectedNetworkInfo() {
|
||||||
|
return {
|
||||||
|
network: selectedNetwork.value,
|
||||||
|
password: password.value,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置选择
|
||||||
|
function reset() {
|
||||||
|
selectedNetwork.value = null
|
||||||
|
password.value = ''
|
||||||
|
wifiNetworks.value = []
|
||||||
|
selectorExpanded.value = false
|
||||||
|
emit('network-selected', null, '')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取信号强度描述
|
||||||
|
function getSignalStrength(rssi: number): string {
|
||||||
|
if (rssi >= -50)
|
||||||
|
return '信号强'
|
||||||
|
if (rssi >= -60)
|
||||||
|
return '信号良好'
|
||||||
|
if (rssi >= -70)
|
||||||
|
return '信号一般'
|
||||||
|
return '信号弱'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取信号强度颜色
|
||||||
|
function getSignalColor(rssi: number): string {
|
||||||
|
if (rssi >= -50)
|
||||||
|
return '#52c41a'
|
||||||
|
if (rssi >= -60)
|
||||||
|
return '#73d13d'
|
||||||
|
if (rssi >= -70)
|
||||||
|
return '#faad14'
|
||||||
|
return '#ff4d4f'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暴露方法给父组件
|
||||||
|
defineExpose({
|
||||||
|
checkESP32Connection,
|
||||||
|
scanWifi,
|
||||||
|
getSelectedNetworkInfo,
|
||||||
|
reset,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 生命周期
|
||||||
|
onMounted(() => {
|
||||||
|
if (props.autoConnect) {
|
||||||
|
checkESP32Connection()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="wifi-selector">
|
||||||
|
<!-- Xiaozhi连接状态 -->
|
||||||
|
<view v-if="props.autoConnect" class="connection-status">
|
||||||
|
<view v-if="!isConnectedToESP32" class="status-warning">
|
||||||
|
<view class="status-content">
|
||||||
|
<text class="warning-text">
|
||||||
|
请先连接xiaozhi热点 (xiaozhi-XXXXXX)
|
||||||
|
</text>
|
||||||
|
<wd-button
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
:loading="checkingConnection"
|
||||||
|
@click="checkESP32Connection"
|
||||||
|
>
|
||||||
|
{{ checkingConnection ? '检测中...' : '重新检测' }}
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-else class="status-success">
|
||||||
|
<view class="status-content">
|
||||||
|
<text class="success-text">
|
||||||
|
已连接xiaozhi热点
|
||||||
|
</text>
|
||||||
|
<wd-button
|
||||||
|
size="small"
|
||||||
|
:loading="checkingConnection"
|
||||||
|
@click="checkESP32Connection"
|
||||||
|
>
|
||||||
|
{{ checkingConnection ? '检测中...' : '刷新状态' }}
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- WiFi网络选择器 -->
|
||||||
|
<view class="network-selector">
|
||||||
|
<view class="selector-item" @click="showNetworkSelector">
|
||||||
|
<text class="selector-label">
|
||||||
|
WiFi网络
|
||||||
|
</text>
|
||||||
|
<text class="selector-value">
|
||||||
|
{{ networkDisplayText }}
|
||||||
|
</text>
|
||||||
|
<wd-icon name="arrow-right" custom-class="arrow-icon" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 展开的网络列表 -->
|
||||||
|
<view v-if="selectorExpanded" class="network-list-overlay">
|
||||||
|
<view class="network-list-container">
|
||||||
|
<view class="list-header">
|
||||||
|
<text class="list-title">
|
||||||
|
选择WiFi网络
|
||||||
|
</text>
|
||||||
|
<view class="list-actions">
|
||||||
|
<wd-button
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
:loading="scanning"
|
||||||
|
@click="scanWifi"
|
||||||
|
>
|
||||||
|
{{ scanning ? '扫描中...' : '刷新扫描' }}
|
||||||
|
</wd-button>
|
||||||
|
<wd-button
|
||||||
|
size="small"
|
||||||
|
@click="selectorExpanded = false"
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="network-list">
|
||||||
|
<view v-if="wifiNetworks.length === 0 && !scanning" class="empty-state">
|
||||||
|
<text class="empty-text">
|
||||||
|
暂无WiFi网络
|
||||||
|
</text>
|
||||||
|
<text class="empty-tip">
|
||||||
|
请点击刷新扫描
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-else class="wifi-list">
|
||||||
|
<view
|
||||||
|
v-for="network in wifiNetworks"
|
||||||
|
:key="network.ssid"
|
||||||
|
class="wifi-item"
|
||||||
|
@click="selectNetwork(network)"
|
||||||
|
>
|
||||||
|
<view class="wifi-info">
|
||||||
|
<view class="wifi-name">
|
||||||
|
{{ network.ssid }}
|
||||||
|
</view>
|
||||||
|
<view class="wifi-details">
|
||||||
|
<text class="wifi-signal">
|
||||||
|
信号: {{ network.rssi }}dBm
|
||||||
|
</text>
|
||||||
|
<text class="wifi-channel">
|
||||||
|
频道: {{ network.channel }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="wifi-security">
|
||||||
|
<text class="security-icon">
|
||||||
|
{{ network.authmode === 0 ? '开放' : '加密' }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 密码输入 -->
|
||||||
|
<view v-if="selectedNetwork && selectedNetwork.authmode > 0" class="password-section">
|
||||||
|
<view class="password-item">
|
||||||
|
<text class="password-label">
|
||||||
|
网络密码
|
||||||
|
</text>
|
||||||
|
<wd-input
|
||||||
|
v-model="password"
|
||||||
|
placeholder="请输入WiFi密码"
|
||||||
|
show-password
|
||||||
|
clearable
|
||||||
|
@input="onPasswordChange"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.wifi-selector {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-status {
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-warning {
|
||||||
|
padding: 24rpx;
|
||||||
|
background-color: #fff3cd;
|
||||||
|
border: 1rpx solid #ffeaa7;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-success {
|
||||||
|
padding: 24rpx;
|
||||||
|
background-color: #d4edda;
|
||||||
|
border: 1rpx solid #c3e6cb;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-text {
|
||||||
|
color: #856404;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-text {
|
||||||
|
color: #155724;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-selector {
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx;
|
||||||
|
background: #f5f7fb;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
border: 1rpx solid #eeeeee;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector-item:active {
|
||||||
|
background: #eef3ff;
|
||||||
|
border-color: #336cff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #232338;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector-value {
|
||||||
|
flex: 1;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #65686f;
|
||||||
|
margin: 0 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arrow-icon) {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #9d9ea3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-list-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 1000;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-list-container {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 70vh;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
padding: 32rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
padding-bottom: 16rpx;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #232338;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-list {
|
||||||
|
max-height: 50vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 80rpx 20rpx;
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
border: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #65686f;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-tip {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #9d9ea3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wifi-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wifi-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 32rpx 24rpx;
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border: 2rpx solid #eeeeee;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wifi-item:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
background-color: #f0f6ff;
|
||||||
|
border-color: #336cff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wifi-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wifi-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #232338;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wifi-details {
|
||||||
|
display: flex;
|
||||||
|
gap: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wifi-signal,
|
||||||
|
.wifi-channel {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #65686f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-icon {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #65686f;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-section {
|
||||||
|
margin-top: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #232338;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,146 @@
|
|||||||
|
<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)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="min-h-screen bg-[#f5f7fb]">
|
||||||
|
<wd-navbar title="设备配网" safe-area-inset-top />
|
||||||
|
|
||||||
|
<view class="box-border px-[20rpx]">
|
||||||
|
<!-- 配网方式选择 -->
|
||||||
|
<view class="pb-[20rpx] first:pt-[20rpx]">
|
||||||
|
<text class="text-[32rpx] text-[#232338] font-bold">
|
||||||
|
配网方式
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="mb-[24rpx] border border-[#eeeeee] rounded-[20rpx] bg-[#fbfbfb] p-[24rpx]" style="box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);">
|
||||||
|
<view class="flex 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-[32rpx] text-[#232338] font-bold">
|
||||||
|
网络配置
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="mb-[24rpx] border border-[#eeeeee] rounded-[20rpx] bg-[#fbfbfb] p-[24rpx]" style="box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);">
|
||||||
|
<wifi-selector
|
||||||
|
ref="wifiSelectorRef"
|
||||||
|
@network-selected="onNetworkSelected"
|
||||||
|
@connection-status="onConnectionStatusChange"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 配网操作 -->
|
||||||
|
<view v-if="selectedWifiInfo.network" class="flex-1">
|
||||||
|
<!-- WiFi配网组件 -->
|
||||||
|
<wifi-config
|
||||||
|
v-if="configType === 'wifi'"
|
||||||
|
:selected-network="selectedWifiInfo.network"
|
||||||
|
:password="selectedWifiInfo.password"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 超声波配网组件 -->
|
||||||
|
<ultrasonic-config
|
||||||
|
v-else-if="configType === 'ultrasonic'"
|
||||||
|
:selected-network="selectedWifiInfo.network"
|
||||||
|
:password="selectedWifiInfo.password"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 配网模式选择器 -->
|
||||||
|
<wd-action-sheet
|
||||||
|
v-model="configTypeSelectorShow"
|
||||||
|
:actions="configTypeOptions.map(item => ({ name: item.name, value: item.value }))"
|
||||||
|
@close="onConfigTypeCancel"
|
||||||
|
@select="({ item }) => onConfigTypeConfirm(item)"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<route lang="jsonc" type="page">
|
||||||
|
{
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "设备配网",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</route>
|
||||||
@@ -0,0 +1,333 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import type { Device, FirmwareType } from '@/api/device'
|
||||||
|
import { computed, onMounted, ref } from 'vue'
|
||||||
|
import { useMessage } from 'wot-design-uni'
|
||||||
|
import { bindDevice, getBindDevices, getFirmwareTypes, unbindDevice, updateDeviceAutoUpdate } from '@/api/device'
|
||||||
|
import { toast } from '@/utils/toast'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'DeviceManage',
|
||||||
|
})
|
||||||
|
|
||||||
|
// 接收props
|
||||||
|
interface Props {
|
||||||
|
agentId?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
agentId: 'default'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取屏幕边界到安全区域距离
|
||||||
|
let safeAreaInsets: any
|
||||||
|
let systemInfo: any
|
||||||
|
|
||||||
|
// #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 loading = ref(false)
|
||||||
|
|
||||||
|
// 消息组件
|
||||||
|
const message = useMessage()
|
||||||
|
|
||||||
|
// 使用传入的智能体ID
|
||||||
|
const currentAgentId = computed(() => {
|
||||||
|
return props.agentId
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取设备列表
|
||||||
|
async function loadDeviceList() {
|
||||||
|
try {
|
||||||
|
console.log('获取设备列表')
|
||||||
|
|
||||||
|
// 检查是否有当前选中的智能体
|
||||||
|
if (!currentAgentId.value) {
|
||||||
|
console.warn('没有选中的智能体')
|
||||||
|
deviceList.value = []
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
const response = await getBindDevices(currentAgentId.value)
|
||||||
|
deviceList.value = response || []
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('获取设备列表失败:', error)
|
||||||
|
deviceList.value = []
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暴露给父组件的刷新方法
|
||||||
|
async function refresh() {
|
||||||
|
await loadDeviceList()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取设备类型名称
|
||||||
|
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)
|
||||||
|
await loadDeviceList()
|
||||||
|
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())
|
||||||
|
await loadDeviceList()
|
||||||
|
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 () => {
|
||||||
|
// 智能体已简化为默认
|
||||||
|
|
||||||
|
loadFirmwareTypes()
|
||||||
|
loadDeviceList()
|
||||||
|
})
|
||||||
|
|
||||||
|
// 暴露方法给父组件
|
||||||
|
defineExpose({
|
||||||
|
refresh,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="device-container" style="background: #f5f7fb; min-height: 100%;">
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<view v-if="loading && deviceList.length === 0" class="loading-container">
|
||||||
|
<wd-loading color="#336cff" />
|
||||||
|
<text class="loading-text">
|
||||||
|
加载中...
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 设备列表 -->
|
||||||
|
<view v-else-if="deviceList.length > 0" class="device-list">
|
||||||
|
<!-- 设备卡片列表 -->
|
||||||
|
<view class="box-border flex flex-col gap-[24rpx] p-[20rpx]">
|
||||||
|
<view v-for="device in deviceList" :key="device.id">
|
||||||
|
<wd-swipe-action>
|
||||||
|
<view class="cursor-pointer bg-[#fbfbfb] p-[32rpx] transition-all duration-200 active:bg-[#f8f9fa]">
|
||||||
|
<view class="flex items-start justify-between">
|
||||||
|
<view class="flex-1">
|
||||||
|
<view class="mb-[16rpx] flex items-center justify-between">
|
||||||
|
<text class="max-w-[60%] break-all text-[32rpx] text-[#232338] font-semibold">
|
||||||
|
{{ getDeviceTypeName(device.board) }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="mb-[20rpx]">
|
||||||
|
<text class="mb-[12rpx] block text-[28rpx] text-[#65686f] leading-[1.4]">
|
||||||
|
MAC地址:{{ device.macAddress }}
|
||||||
|
</text>
|
||||||
|
<text class="mb-[12rpx] block text-[28rpx] text-[#65686f] leading-[1.4]">
|
||||||
|
固件版本:{{ device.appVersion }}
|
||||||
|
</text>
|
||||||
|
<text class="block text-[28rpx] text-[#65686f] leading-[1.4]">
|
||||||
|
最近对话:{{ formatTime(device.lastConnectedAt) }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="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>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view v-else-if="!loading" class="empty-container">
|
||||||
|
<view class="flex flex-col items-center justify-center p-[100rpx_40rpx] text-center">
|
||||||
|
<wd-icon name="phone" custom-class="text-[120rpx] text-[#d9d9d9] mb-[32rpx]" />
|
||||||
|
<text class="mb-[16rpx] text-[32rpx] text-[#666666] font-medium">
|
||||||
|
暂无设备
|
||||||
|
</text>
|
||||||
|
<text class="text-[26rpx] text-[#999999] leading-[1.5]">
|
||||||
|
点击右下角 + 号绑定您的第一个设备
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- FAB 绑定设备按钮 -->
|
||||||
|
<wd-fab type="primary" size="small" icon="add" :draggable="true" :expandable="false" @click="openBindDialog" />
|
||||||
|
|
||||||
|
<!-- MessageBox 组件 -->
|
||||||
|
<wd-message-box />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.device-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 100rpx 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.wd-swipe-action) {
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||||
|
border: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.wd-icon) {
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,578 @@
|
|||||||
|
<!-- 使用 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 { 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 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()
|
||||||
|
|
||||||
|
// 更新本地列表
|
||||||
|
agentList.value = response
|
||||||
|
|
||||||
|
// 直接返回全部数据,不需要分页处理
|
||||||
|
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) {
|
||||||
|
// 传递智能体ID到编辑页面
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/agent/index?agentId=${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)}天前`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面显示时刷新列表
|
||||||
|
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">
|
||||||
|
<view class="welcome-info">
|
||||||
|
<text class="greeting">
|
||||||
|
你好,小智
|
||||||
|
</text>
|
||||||
|
<text class="subtitle">
|
||||||
|
让我们度过 <text class="highlight">
|
||||||
|
美好的一天!
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
<text class="english-subtitle">
|
||||||
|
Hello, Let's have a wonderful day!
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="wave-decoration">
|
||||||
|
<!-- 添加波浪装饰 -->
|
||||||
|
<view class="wave" />
|
||||||
|
<view class="wave wave-2" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 内容区域开始标识 -->
|
||||||
|
<view class="content-section-header" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 智能体卡片列表 -->
|
||||||
|
<view class="agent-list">
|
||||||
|
<view v-for="agent in agentList" :key="agent.id" class="agent-item">
|
||||||
|
<wd-swipe-action>
|
||||||
|
<view class="simple-card" @click="handleCardClick(agent)">
|
||||||
|
<view class="card-content">
|
||||||
|
<view class="card-main">
|
||||||
|
<view class="agent-title">
|
||||||
|
<text class="agent-name">
|
||||||
|
{{ agent.agentName }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="model-info">
|
||||||
|
<text class="model-text">
|
||||||
|
语言模型: {{ agent.llmModelName }}
|
||||||
|
</text>
|
||||||
|
<text class="model-text">
|
||||||
|
音色模型: {{ agent.ttsModelName }} ({{ agent.ttsVoiceName }})
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="stats-row">
|
||||||
|
<view class="stat-chip">
|
||||||
|
<wd-icon name="phone" custom-class="chip-icon" />
|
||||||
|
<text class="chip-text">
|
||||||
|
设备管理({{ agent.deviceCount }})
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="agent.lastConnectedAt" class="stat-chip">
|
||||||
|
<wd-icon name="time" custom-class="chip-icon" />
|
||||||
|
<text class="chip-text">
|
||||||
|
最近对话:{{ formatTime(agent.lastConnectedAt) }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<wd-icon name="arrow-right" custom-class="arrow-icon" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<template #right>
|
||||||
|
<view class="swipe-actions">
|
||||||
|
<view class="action-btn delete-btn" @click.stop="handleDeleteAgent(agent)">
|
||||||
|
<wd-icon name="delete" />
|
||||||
|
<text>删除</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-swipe-action>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 自定义空状态 -->
|
||||||
|
<template #empty>
|
||||||
|
<view class="empty-state">
|
||||||
|
<wd-icon name="robot" custom-class="empty-icon" />
|
||||||
|
<text class="empty-text">
|
||||||
|
暂无智能体
|
||||||
|
</text>
|
||||||
|
<text class="empty-desc">
|
||||||
|
点击右下角 + 号创建您的第一个智能体
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- FAB 新增按钮 -->
|
||||||
|
<wd-fab type="primary" icon="add" :draggable="true" :expandable="false" @click="openCreateDialog" />
|
||||||
|
|
||||||
|
<!-- MessageBox 组件 -->
|
||||||
|
<wd-message-box />
|
||||||
|
</z-paging>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.banner-section {
|
||||||
|
background: linear-gradient(145deg, #9ebbfc, #6baaff, #9ebbfc, #f5f8fd);
|
||||||
|
position: relative;
|
||||||
|
padding: 40rpx 40rpx 80rpx 40rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.banner-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
position: absolute;
|
||||||
|
top: -50rpx;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 32rpx;
|
||||||
|
|
||||||
|
.filter-icon,
|
||||||
|
.setting-icon {
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-info {
|
||||||
|
.greeting {
|
||||||
|
display: block;
|
||||||
|
font-size: 48rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
display: block;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
color: #ffd700;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.english-subtitle {
|
||||||
|
display: block;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave-decoration {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: -100rpx;
|
||||||
|
width: 400rpx;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0.1;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
.wave {
|
||||||
|
position: absolute;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
|
||||||
|
&.wave-2 {
|
||||||
|
top: 20%;
|
||||||
|
right: 20%;
|
||||||
|
animation-delay: -3s;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0px) rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translateY(-30rpx) rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 内容区域开始标识,创建白色背景过渡
|
||||||
|
.content-section-header {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 32rpx 32rpx 0 0;
|
||||||
|
margin-top: -32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// z-paging内容区域样式
|
||||||
|
:deep(.z-paging-content) {
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 0 0 40rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-item {
|
||||||
|
:deep(.wd-swipe-action) {
|
||||||
|
border-radius: 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||||
|
border: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-card {
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 24rpx;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-main {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
|
||||||
|
.agent-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-info {
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
|
||||||
|
.model-text {
|
||||||
|
display: block;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: 4rpx;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 12rpx;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.stat-chip {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 6rpx 12rpx;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
border: 1rpx solid #eaeaea;
|
||||||
|
|
||||||
|
:deep(.chip-icon) {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #666666;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arrow-icon) {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #c7c7cc;
|
||||||
|
margin-left: 16rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.swipe-actions {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
width: 120rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&.edit-btn {
|
||||||
|
background: #1890ff;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #096dd9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.delete-btn {
|
||||||
|
background: #ff4d4f;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #d9363e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.wd-icon) {
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 100rpx 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
:deep(.empty-icon) {
|
||||||
|
font-size: 120rpx;
|
||||||
|
color: #d9d9d9;
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666666;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-desc {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-actions {
|
||||||
|
padding: 32rpx;
|
||||||
|
text-align: center;
|
||||||
|
border-top: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,778 @@
|
|||||||
|
<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 { getEnvBaseUrl } from '@/utils'
|
||||||
|
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 = `${getEnvBaseUrl()}/user/captcha?uuid=${uuid}&t=${Date.now()}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 登录
|
||||||
|
async function handleLogin() {
|
||||||
|
// 表单验证
|
||||||
|
if (loginType.value === 'username') {
|
||||||
|
if (!formData.value.username) {
|
||||||
|
toast.warning('请输入用户名')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (!formData.value.mobile) {
|
||||||
|
toast.warning('请输入手机号')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 手机号格式验证
|
||||||
|
const phoneRegex = /^1[3-9]\d{9}$/
|
||||||
|
if (!phoneRegex.test(formData.value.mobile)) {
|
||||||
|
toast.warning('请输入正确的手机号')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!formData.value.password) {
|
||||||
|
toast.warning('请输入密码')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!formData.value.captcha) {
|
||||||
|
toast.warning('请输入验证码')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
|
||||||
|
// 构建登录数据
|
||||||
|
const loginData = { ...formData.value }
|
||||||
|
|
||||||
|
// 如果是手机号登录,将区号+手机号拼接到username字段
|
||||||
|
if (loginType.value === 'mobile') {
|
||||||
|
loginData.username = `${selectedAreaCode.value}${formData.value.mobile}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await login(loginData)
|
||||||
|
// 存储token
|
||||||
|
uni.setStorageSync('token', response.token)
|
||||||
|
uni.setStorageSync('expire', response.expire)
|
||||||
|
|
||||||
|
toast.success('登录成功')
|
||||||
|
|
||||||
|
// 跳转到主页
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/index/index',
|
||||||
|
})
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
catch (error: any) {
|
||||||
|
// 登录失败重新获取验证码
|
||||||
|
refreshCaptcha()
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面加载时获取验证码
|
||||||
|
onLoad(() => {
|
||||||
|
refreshCaptcha()
|
||||||
|
})
|
||||||
|
|
||||||
|
// 组件挂载时确保配置已加载
|
||||||
|
onMounted(async () => {
|
||||||
|
if (!configStore.config.name) {
|
||||||
|
try {
|
||||||
|
await configStore.fetchPublicConfig()
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('获取配置失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="app-container box-border h-screen w-full" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
|
||||||
|
<view class="header">
|
||||||
|
<view class="logo-section">
|
||||||
|
<wd-img :width="80" :height="80" round src="/static/logo.png" class="logo" />
|
||||||
|
<text class="welcome-text">
|
||||||
|
欢迎回来
|
||||||
|
</text>
|
||||||
|
<text class="subtitle">
|
||||||
|
请登录您的账户
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-container">
|
||||||
|
<view class="form">
|
||||||
|
<!-- 手机号登录 -->
|
||||||
|
<template v-if="loginType === 'mobile'">
|
||||||
|
<view class="input-group">
|
||||||
|
<view class="input-wrapper mobile-wrapper">
|
||||||
|
<view class="area-code-selector" @click="openAreaCodeSheet">
|
||||||
|
<text class="area-code-text">
|
||||||
|
{{ selectedAreaCode }}
|
||||||
|
</text>
|
||||||
|
<wd-icon name="arrow-down" custom-class="area-code-arrow" />
|
||||||
|
</view>
|
||||||
|
<view class="mobile-input-wrapper">
|
||||||
|
<wd-input
|
||||||
|
v-model="formData.mobile"
|
||||||
|
custom-class="styled-input"
|
||||||
|
no-border
|
||||||
|
placeholder="请输入手机号码"
|
||||||
|
type="number"
|
||||||
|
:maxlength="11"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 用户名登录 -->
|
||||||
|
<template v-else>
|
||||||
|
<view class="input-group">
|
||||||
|
<view class="input-wrapper">
|
||||||
|
<wd-input
|
||||||
|
v-model="formData.username"
|
||||||
|
custom-class="styled-input"
|
||||||
|
no-border
|
||||||
|
placeholder="请输入用户名"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<view class="input-group">
|
||||||
|
<view class="input-wrapper">
|
||||||
|
<wd-input
|
||||||
|
v-model="formData.password"
|
||||||
|
custom-class="styled-input"
|
||||||
|
no-border
|
||||||
|
placeholder="请输入密码"
|
||||||
|
clearable
|
||||||
|
show-password
|
||||||
|
:maxlength="20"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="input-group">
|
||||||
|
<view class="input-wrapper captcha-wrapper">
|
||||||
|
<wd-input
|
||||||
|
v-model="formData.captcha"
|
||||||
|
custom-class="styled-input"
|
||||||
|
no-border
|
||||||
|
placeholder="请输入验证码"
|
||||||
|
:maxlength="6"
|
||||||
|
/>
|
||||||
|
<view class="captcha-image" @click="refreshCaptcha">
|
||||||
|
<image :src="captchaImage" class="captcha-img" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="forgot-password">
|
||||||
|
<text class="forgot-text">
|
||||||
|
忘记密码?
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view
|
||||||
|
class="login-btn"
|
||||||
|
@click="handleLogin"
|
||||||
|
>
|
||||||
|
{{ loading ? '登录中...' : '登录' }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="register-hint">
|
||||||
|
<text class="hint-text">
|
||||||
|
还没有账户?
|
||||||
|
</text>
|
||||||
|
<text class="register-link" @click="goToRegister">
|
||||||
|
立即注册
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 登录方式切换 -->
|
||||||
|
<view v-if="enableMobileLogin" class="login-type-switch">
|
||||||
|
<view class="switch-tabs">
|
||||||
|
<view
|
||||||
|
class="switch-tab"
|
||||||
|
:class="{ active: loginType === 'username' }"
|
||||||
|
@click="toggleLoginType"
|
||||||
|
>
|
||||||
|
<wd-icon name="user" />
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="switch-tab"
|
||||||
|
:class="{ active: loginType === 'mobile' }"
|
||||||
|
@click="toggleLoginType"
|
||||||
|
>
|
||||||
|
<wd-icon name="phone" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 区号选择弹窗 -->
|
||||||
|
<wd-action-sheet
|
||||||
|
v-model="showAreaCodeSheet"
|
||||||
|
title="选择国家/地区"
|
||||||
|
:close-on-click-modal="true"
|
||||||
|
@close="closeAreaCodeSheet"
|
||||||
|
>
|
||||||
|
<view class="area-code-sheet">
|
||||||
|
<scroll-view scroll-y class="area-code-list">
|
||||||
|
<view
|
||||||
|
v-for="item in areaCodeList"
|
||||||
|
:key="item.key"
|
||||||
|
class="area-code-item"
|
||||||
|
:class="{ selected: selectedAreaCode === item.key }"
|
||||||
|
@click="selectAreaCode(item)"
|
||||||
|
>
|
||||||
|
<view class="area-info">
|
||||||
|
<text class="area-name">
|
||||||
|
{{ item.name }}
|
||||||
|
</text>
|
||||||
|
<text class="area-code">
|
||||||
|
{{ item.key }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<wd-icon
|
||||||
|
v-if="selectedAreaCode === item.key"
|
||||||
|
name="check"
|
||||||
|
custom-class="check-icon"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="sheet-footer">
|
||||||
|
<wd-button
|
||||||
|
type="primary"
|
||||||
|
custom-class="confirm-btn"
|
||||||
|
@click="closeAreaCodeSheet"
|
||||||
|
>
|
||||||
|
确认
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-action-sheet>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.app-container {
|
||||||
|
background: linear-gradient(145deg, #f5f8fd, #6baaff, #9ebbfc, #f5f8fd);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
left: -50%;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0px) rotate(0deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-20px) rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
min-height: 280rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 15% 0 40rpx 0;
|
||||||
|
|
||||||
|
.logo-section {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-text {
|
||||||
|
display: block;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
display: block;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container {
|
||||||
|
padding: 0 40rpx 40rpx 40rpx;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.form {
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
border-radius: 24rpx;
|
||||||
|
padding: 40rpx 30rpx 30rpx 30rpx;
|
||||||
|
backdrop-filter: blur(10rpx);
|
||||||
|
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
||||||
|
max-height: calc(100vh - 350rpx);
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
|
.input-wrapper {
|
||||||
|
position: relative;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 20rpx 16rpx;
|
||||||
|
border: 2rpx solid #e9ecef;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
border-color: #667eea;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.captcha-wrapper {
|
||||||
|
.captcha-image {
|
||||||
|
margin-left: 20rpx;
|
||||||
|
width: 120rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #e9ecef;
|
||||||
|
border: 1rpx solid #ddd;
|
||||||
|
|
||||||
|
.captcha-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.captcha-loading {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mobile-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
|
||||||
|
.area-code-selector {
|
||||||
|
flex: 0 0 160rpx;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 20rpx 16rpx;
|
||||||
|
border: 2rpx solid #e9ecef;
|
||||||
|
height: 45rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #667eea;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-code-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.area-code-arrow) {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-input-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 20rpx 16rpx;
|
||||||
|
border: 2rpx solid #e9ecef;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
border-color: #667eea;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.styled-input) {
|
||||||
|
background: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
outline: none !important;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: #999999;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-password {
|
||||||
|
text-align: right;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
|
||||||
|
.forgot-text {
|
||||||
|
color: #667eea;
|
||||||
|
font-size: 26rpx;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
border: none;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
background-color: var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0));
|
||||||
|
text-align: center;
|
||||||
|
line-height: 80rpx;
|
||||||
|
&:active {
|
||||||
|
transform: translateY(2rpx);
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-hint {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.hint-text {
|
||||||
|
color: #666666;
|
||||||
|
font-size: 26rpx;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-link {
|
||||||
|
color: #667eea;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
// text-decoration: underline;
|
||||||
|
// &:hover {
|
||||||
|
// text-decoration: underline;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-type-switch {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.switch-tabs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 60rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.switch-tab {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #f0f0f0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 2rpx solid transparent;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: #667eea;
|
||||||
|
color: #ffffff;
|
||||||
|
border-color: #667eea;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.wd-icon) {
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-hint {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 区号选择弹窗样式
|
||||||
|
.area-code-sheet {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 24rpx 24rpx 0 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.sheet-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 40rpx 40rpx 20rpx 40rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
.sheet-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.close-icon) {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #999999;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10rpx;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-code-list {
|
||||||
|
max-height: 60vh;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
|
||||||
|
.area-code-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 32rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f8f9fa;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
background-color: rgba(102, 126, 234, 0.05);
|
||||||
|
|
||||||
|
.area-name {
|
||||||
|
color: #667eea;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-code {
|
||||||
|
color: #667eea;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8rpx;
|
||||||
|
|
||||||
|
.area-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-code {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.check-icon) {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #667eea;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sheet-footer {
|
||||||
|
padding: 30rpx 40rpx 40rpx 40rpx;
|
||||||
|
border-top: 1rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
:deep(.confirm-btn) {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,878 @@
|
|||||||
|
<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 { getEnvBaseUrl } from '@/utils'
|
||||||
|
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 = `${getEnvBaseUrl()}/user/captcha?uuid=${uuid}&t=${Date.now()}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 发送短信验证码
|
||||||
|
async function sendSmsVerification() {
|
||||||
|
if (!formData.value.mobile) {
|
||||||
|
toast.warning('请输入手机号')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!formData.value.captcha) {
|
||||||
|
toast.warning('请输入图形验证码')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 手机号格式验证
|
||||||
|
const phoneRegex = /^1[3-9]\d{9}$/
|
||||||
|
if (!phoneRegex.test(formData.value.mobile)) {
|
||||||
|
toast.warning('请输入正确的手机号')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
smsLoading.value = true
|
||||||
|
await sendSmsCode({
|
||||||
|
phone: `${selectedAreaCode.value}${formData.value.mobile}`,
|
||||||
|
captcha: formData.value.captcha,
|
||||||
|
captchaId: formData.value.captchaId,
|
||||||
|
})
|
||||||
|
|
||||||
|
toast.success('验证码发送成功')
|
||||||
|
|
||||||
|
// 开始倒计时
|
||||||
|
smsCountdown.value = 60
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
smsCountdown.value--
|
||||||
|
if (smsCountdown.value <= 0) {
|
||||||
|
clearInterval(timer)
|
||||||
|
}
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
catch (error: any) {
|
||||||
|
// 发送失败重新获取图形验证码
|
||||||
|
refreshCaptcha()
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
smsLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 注册
|
||||||
|
async function handleRegister() {
|
||||||
|
// 表单验证
|
||||||
|
if (registerType.value === 'username') {
|
||||||
|
if (!formData.value.username) {
|
||||||
|
toast.warning('请输入用户名')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (!formData.value.mobile) {
|
||||||
|
toast.warning('请输入手机号')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 手机号格式验证
|
||||||
|
const phoneRegex = /^1[3-9]\d{9}$/
|
||||||
|
if (!phoneRegex.test(formData.value.mobile)) {
|
||||||
|
toast.warning('请输入正确的手机号')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!formData.value.mobileCaptcha) {
|
||||||
|
toast.warning('请输入短信验证码')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.value.password) {
|
||||||
|
toast.warning('请输入密码')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.value.confirmPassword) {
|
||||||
|
toast.warning('请确认密码')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (formData.value.password !== formData.value.confirmPassword) {
|
||||||
|
toast.warning('两次输入的密码不一致')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.value.captcha) {
|
||||||
|
toast.warning('请输入验证码')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
|
||||||
|
// 构建注册数据
|
||||||
|
const registerData = {
|
||||||
|
username: registerType.value === 'mobile' ? `${selectedAreaCode.value}${formData.value.mobile}` : formData.value.username,
|
||||||
|
password: formData.value.password,
|
||||||
|
confirmPassword: formData.value.confirmPassword,
|
||||||
|
captcha: formData.value.captcha,
|
||||||
|
captchaId: formData.value.captchaId,
|
||||||
|
areaCode: formData.value.areaCode,
|
||||||
|
mobile: formData.value.mobile,
|
||||||
|
mobileCaptcha: formData.value.mobileCaptcha,
|
||||||
|
}
|
||||||
|
|
||||||
|
await register(registerData)
|
||||||
|
toast.success('注册成功')
|
||||||
|
|
||||||
|
// 跳转到登录页
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateBack()
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
catch (error: any) {
|
||||||
|
// 注册失败重新获取验证码
|
||||||
|
refreshCaptcha()
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 返回登录
|
||||||
|
function goBack() {
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面加载时获取验证码
|
||||||
|
onLoad(() => {
|
||||||
|
refreshCaptcha()
|
||||||
|
})
|
||||||
|
|
||||||
|
// 组件挂载时确保配置已加载
|
||||||
|
onMounted(async () => {
|
||||||
|
if (!configStore.config.name) {
|
||||||
|
try {
|
||||||
|
await configStore.fetchPublicConfig()
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('获取配置失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="app-container box-border h-screen w-full" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
|
||||||
|
<view class="header">
|
||||||
|
<view class="back-button" @click="goBack">
|
||||||
|
<wd-icon name="arrow-left" custom-class="back-icon" />
|
||||||
|
</view>
|
||||||
|
<view class="logo-section">
|
||||||
|
<wd-img :width="80" :height="80" round src="/static/logo.png" class="logo" />
|
||||||
|
<text class="welcome-text">
|
||||||
|
欢迎注册
|
||||||
|
</text>
|
||||||
|
<text class="subtitle">
|
||||||
|
创建您的新账户
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-container">
|
||||||
|
<view class="form">
|
||||||
|
<!-- 手机号注册 -->
|
||||||
|
<template v-if="registerType === 'mobile'">
|
||||||
|
<view class="input-group">
|
||||||
|
<view class="input-wrapper mobile-wrapper">
|
||||||
|
<view class="area-code-selector" @click="openAreaCodeSheet">
|
||||||
|
<text class="area-code-text">
|
||||||
|
{{ selectedAreaCode }}
|
||||||
|
</text>
|
||||||
|
<wd-icon name="arrow-down" custom-class="area-code-arrow" />
|
||||||
|
</view>
|
||||||
|
<view class="mobile-input-wrapper">
|
||||||
|
<wd-input
|
||||||
|
v-model="formData.mobile"
|
||||||
|
custom-class="styled-input"
|
||||||
|
no-border
|
||||||
|
placeholder="请输入手机号码"
|
||||||
|
type="number"
|
||||||
|
:maxlength="11"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 用户名注册 -->
|
||||||
|
<template v-else>
|
||||||
|
<view class="input-group">
|
||||||
|
<view class="input-wrapper">
|
||||||
|
<wd-input
|
||||||
|
v-model="formData.username"
|
||||||
|
custom-class="styled-input"
|
||||||
|
no-border
|
||||||
|
placeholder="请输入用户名"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<view class="input-group">
|
||||||
|
<view class="input-wrapper">
|
||||||
|
<wd-input
|
||||||
|
v-model="formData.password"
|
||||||
|
custom-class="styled-input"
|
||||||
|
no-border
|
||||||
|
placeholder="请输入密码"
|
||||||
|
show-password
|
||||||
|
:maxlength="20"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="input-group">
|
||||||
|
<view class="input-wrapper">
|
||||||
|
<wd-input
|
||||||
|
v-model="formData.confirmPassword"
|
||||||
|
custom-class="styled-input"
|
||||||
|
no-border
|
||||||
|
placeholder="请确认密码"
|
||||||
|
show-password
|
||||||
|
:maxlength="20"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="input-group">
|
||||||
|
<view class="input-wrapper captcha-wrapper">
|
||||||
|
<wd-input
|
||||||
|
v-model="formData.captcha"
|
||||||
|
custom-class="styled-input"
|
||||||
|
no-border
|
||||||
|
placeholder="请输入验证码"
|
||||||
|
:maxlength="6"
|
||||||
|
/>
|
||||||
|
<view class="captcha-image" @click="refreshCaptcha">
|
||||||
|
<image :src="captchaImage" class="captcha-img" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 手机验证码输入框 -->
|
||||||
|
<view v-if="registerType === 'mobile'" class="input-group">
|
||||||
|
<view class="input-wrapper sms-wrapper">
|
||||||
|
<wd-input
|
||||||
|
v-model="formData.mobileCaptcha"
|
||||||
|
custom-class="styled-input"
|
||||||
|
no-border
|
||||||
|
placeholder="请输入短信验证码"
|
||||||
|
type="number"
|
||||||
|
:maxlength="6"
|
||||||
|
/>
|
||||||
|
<wd-button
|
||||||
|
:loading="smsLoading"
|
||||||
|
:disabled="smsCountdown > 0"
|
||||||
|
custom-class="sms-btn"
|
||||||
|
@click="sendSmsVerification"
|
||||||
|
>
|
||||||
|
{{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }}
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view
|
||||||
|
class="register-btn"
|
||||||
|
type="primary"
|
||||||
|
:loading="loading"
|
||||||
|
@click="handleRegister"
|
||||||
|
>
|
||||||
|
{{ loading ? '注册中...' : '注册' }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="login-hint">
|
||||||
|
<text class="hint-text">
|
||||||
|
已有账户?
|
||||||
|
</text>
|
||||||
|
<text class="login-link" @click="goBack">
|
||||||
|
立即登录
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 注册方式切换 -->
|
||||||
|
<view v-if="enableMobileRegister" class="register-type-switch">
|
||||||
|
<view class="switch-tabs">
|
||||||
|
<view
|
||||||
|
class="switch-tab"
|
||||||
|
:class="{ active: registerType === 'username' }"
|
||||||
|
@click="toggleRegisterType"
|
||||||
|
>
|
||||||
|
<wd-icon name="user" />
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="switch-tab"
|
||||||
|
:class="{ active: registerType === 'mobile' }"
|
||||||
|
@click="toggleRegisterType"
|
||||||
|
>
|
||||||
|
<wd-icon name="phone" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 区号选择弹窗 -->
|
||||||
|
<wd-action-sheet
|
||||||
|
v-model="showAreaCodeSheet"
|
||||||
|
title="选择国家/地区"
|
||||||
|
:close-on-click-modal="true"
|
||||||
|
@close="closeAreaCodeSheet"
|
||||||
|
>
|
||||||
|
<view class="area-code-sheet">
|
||||||
|
<scroll-view scroll-y class="area-code-list">
|
||||||
|
<view
|
||||||
|
v-for="item in areaCodeList"
|
||||||
|
:key="item.key"
|
||||||
|
class="area-code-item"
|
||||||
|
:class="{ selected: selectedAreaCode === item.key }"
|
||||||
|
@click="selectAreaCode(item)"
|
||||||
|
>
|
||||||
|
<view class="area-info">
|
||||||
|
<text class="area-name">
|
||||||
|
{{ item.name }}
|
||||||
|
</text>
|
||||||
|
<text class="area-code">
|
||||||
|
{{ item.key }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<wd-icon
|
||||||
|
v-if="selectedAreaCode === item.key"
|
||||||
|
name="check"
|
||||||
|
custom-class="check-icon"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="sheet-footer">
|
||||||
|
<wd-button
|
||||||
|
type="primary"
|
||||||
|
custom-class="confirm-btn"
|
||||||
|
@click="closeAreaCodeSheet"
|
||||||
|
>
|
||||||
|
确认
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-action-sheet>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.app-container {
|
||||||
|
background: linear-gradient(145deg, #f5f8fd, #6baaff, #9ebbfc, #f5f8fd);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
left: -50%;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0px) rotate(0deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-20px) rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
min-height: 280rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 15% 0 40rpx 0;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.back-button {
|
||||||
|
position: absolute;
|
||||||
|
left: 40rpx;
|
||||||
|
top: 60rpx;
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.back-icon) {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-section {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-text {
|
||||||
|
display: block;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
display: block;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container {
|
||||||
|
padding: 0 40rpx 40rpx 40rpx;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.form {
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
border-radius: 24rpx;
|
||||||
|
padding: 40rpx 30rpx 30rpx 30rpx;
|
||||||
|
backdrop-filter: blur(10rpx);
|
||||||
|
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
||||||
|
max-height: calc(100vh - 350rpx);
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
|
.input-wrapper {
|
||||||
|
position: relative;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 20rpx 16rpx;
|
||||||
|
border: 2rpx solid #e9ecef;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
border-color: #667eea;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.captcha-wrapper {
|
||||||
|
.captcha-image {
|
||||||
|
margin-left: 20rpx;
|
||||||
|
width: 120rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #e9ecef;
|
||||||
|
border: 1rpx solid #ddd;
|
||||||
|
|
||||||
|
.captcha-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.sms-wrapper {
|
||||||
|
:deep(.sms-btn) {
|
||||||
|
margin-left: 20rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
min-width: 140rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mobile-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
|
||||||
|
.area-code-selector {
|
||||||
|
flex: 0 0 160rpx;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 20rpx 16rpx;
|
||||||
|
border: 2rpx solid #e9ecef;
|
||||||
|
height: 45rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #667eea;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-code-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.area-code-arrow) {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-input-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 20rpx 16rpx;
|
||||||
|
border: 2rpx solid #e9ecef;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
border-color: #667eea;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.styled-input) {
|
||||||
|
background: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
outline: none !important;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: #999999;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.register-btn) {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
border: none;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
background-color: var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0));
|
||||||
|
text-align: center;
|
||||||
|
line-height: 80rpx;
|
||||||
|
&:active {
|
||||||
|
transform: translateY(2rpx);
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-hint {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
|
||||||
|
.hint-text {
|
||||||
|
color: #666666;
|
||||||
|
font-size: 26rpx;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-link {
|
||||||
|
color: #667eea;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-type-switch {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.switch-tabs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 60rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.switch-tab {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #f0f0f0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 2rpx solid transparent;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: #667eea;
|
||||||
|
color: #ffffff;
|
||||||
|
border-color: #667eea;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.wd-icon) {
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-hint {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 区号选择弹窗样式
|
||||||
|
.area-code-sheet {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 24rpx 24rpx 0 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.area-code-list {
|
||||||
|
max-height: 60vh;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
|
||||||
|
.area-code-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 32rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f8f9fa;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
background-color: rgba(102, 126, 234, 0.05);
|
||||||
|
|
||||||
|
.area-name {
|
||||||
|
color: #667eea;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-code {
|
||||||
|
color: #667eea;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8rpx;
|
||||||
|
|
||||||
|
.area-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-code {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.check-icon) {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #667eea;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sheet-footer {
|
||||||
|
padding: 30rpx 40rpx 40rpx 40rpx;
|
||||||
|
border-top: 1rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
:deep(.confirm-btn) {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,307 @@
|
|||||||
|
<route lang="jsonc" type="page">{
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "设置",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}</route>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { clearServerBaseUrlOverride, getEnvBaseUrl, getServerBaseUrlOverride, setServerBaseUrlOverride } from '@/utils'
|
||||||
|
import { isMp } from '@/utils/platform'
|
||||||
|
import { computed, onMounted, reactive, ref } from 'vue'
|
||||||
|
import { useToast } from 'wot-design-uni'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'SettingsPage',
|
||||||
|
})
|
||||||
|
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
// 缓存信息
|
||||||
|
const cacheInfo = reactive({
|
||||||
|
storageSize: '0MB',
|
||||||
|
imageCache: '0MB',
|
||||||
|
dataCache: '0MB',
|
||||||
|
})
|
||||||
|
|
||||||
|
// 服务端地址设置
|
||||||
|
const baseUrlInput = ref('')
|
||||||
|
|
||||||
|
// 系统信息(保留)
|
||||||
|
const systemInfo = computed(() => {
|
||||||
|
const info = uni.getSystemInfoSync()
|
||||||
|
return `${info.platform} ${info.system}`
|
||||||
|
})
|
||||||
|
|
||||||
|
// 读取本地覆盖地址
|
||||||
|
function loadServerBaseUrl() {
|
||||||
|
const override = getServerBaseUrlOverride()
|
||||||
|
baseUrlInput.value = override || getEnvBaseUrl()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取缓存信息
|
||||||
|
function getCacheInfo() {
|
||||||
|
try {
|
||||||
|
const info = uni.getStorageInfoSync()
|
||||||
|
const totalSize = (info.currentSize || 0) / 1024 // KB to MB
|
||||||
|
cacheInfo.storageSize = `${totalSize.toFixed(2)}MB`
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('获取缓存信息失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存服务端地址
|
||||||
|
function saveServerBaseUrl() {
|
||||||
|
if (!baseUrlInput.value || !/^https?:\/\//.test(baseUrlInput.value)) {
|
||||||
|
toast.warning('请输入有效的服务端地址(以 http 或 https 开头)')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
setServerBaseUrlOverride(baseUrlInput.value)
|
||||||
|
|
||||||
|
// 切换请求地址后清空所有缓存
|
||||||
|
clearAllCacheAfterUrlChange()
|
||||||
|
|
||||||
|
uni.showModal({
|
||||||
|
title: '重启应用',
|
||||||
|
content: '服务端地址已保存并清空缓存,是否立即重启生效?',
|
||||||
|
confirmText: '立即重启',
|
||||||
|
cancelText: '稍后',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
restartApp()
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
toast.success('已保存,可稍后手动重启应用')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置为 env 默认
|
||||||
|
function resetServerBaseUrl() {
|
||||||
|
clearServerBaseUrlOverride()
|
||||||
|
baseUrlInput.value = getEnvBaseUrl()
|
||||||
|
|
||||||
|
// 切换请求地址后清空所有缓存
|
||||||
|
clearAllCacheAfterUrlChange()
|
||||||
|
|
||||||
|
uni.showModal({
|
||||||
|
title: '重启应用',
|
||||||
|
content: '已重置为默认地址并清空缓存,是否立即重启生效?',
|
||||||
|
confirmText: '立即重启',
|
||||||
|
cancelText: '稍后',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
restartApp()
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
toast.success('已重置,可稍后手动重启应用')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重启应用(App 原生重启;其他端回到首页)
|
||||||
|
function restartApp() {
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
plus.runtime.restart()
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-PLUS
|
||||||
|
uni.reLaunch({ url: '/pages/index/index' })
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换地址后自动清空所有缓存
|
||||||
|
function clearAllCacheAfterUrlChange() {
|
||||||
|
try {
|
||||||
|
// 完全清空所有缓存,包括token
|
||||||
|
uni.clearStorageSync()
|
||||||
|
|
||||||
|
// 清空localStorage(H5环境)
|
||||||
|
// #ifdef H5
|
||||||
|
if (typeof localStorage !== 'undefined') {
|
||||||
|
localStorage.clear()
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// 重新获取缓存信息
|
||||||
|
getCacheInfo()
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('清除缓存失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清除缓存
|
||||||
|
async function clearCache() {
|
||||||
|
try {
|
||||||
|
uni.showModal({
|
||||||
|
title: '确认清除',
|
||||||
|
content: '确定要清除所有缓存吗?这将删除所有数据包括登录状态,需要重新登录。',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
clearAllCacheAfterUrlChange()
|
||||||
|
toast.success('缓存清除成功,即将跳转到登录页')
|
||||||
|
|
||||||
|
// 延迟跳转到登录页
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.reLaunch({ url: '/pages/login/index' })
|
||||||
|
}, 1500)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('清除缓存失败:', error)
|
||||||
|
toast.error('清除缓存失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关于我们
|
||||||
|
function showAbout() {
|
||||||
|
uni.showModal({
|
||||||
|
title: `关于${import.meta.env.VITE_APP_TITLE}`,
|
||||||
|
content: `${import.meta.env.VITE_APP_TITLE}\n\n基于 Vue.js 3 + uni-app 构建的跨平台移动端管理应用,为小智ESP32智能硬件提供设备管理、智能体配置等功能。\n\n© 2025 xiaozhi-esp32-server`,
|
||||||
|
showCancel: false,
|
||||||
|
confirmText: '确定',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// 仅在非小程序环境加载服务端地址设置
|
||||||
|
if (!isMp) {
|
||||||
|
loadServerBaseUrl()
|
||||||
|
}
|
||||||
|
getCacheInfo()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="min-h-screen bg-[#f5f7fb]">
|
||||||
|
<wd-navbar title="设置" placeholder safe-area-inset-top fixed />
|
||||||
|
|
||||||
|
<view class="p-[24rpx]">
|
||||||
|
<!-- 网络设置 - 仅在非小程序环境显示 -->
|
||||||
|
<view v-if="!isMp" class="mb-[32rpx]">
|
||||||
|
<view class="mb-[24rpx] flex items-center">
|
||||||
|
<text class="text-[32rpx] text-[#232338] font-bold">
|
||||||
|
网络设置
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="border border-[#eeeeee] rounded-[24rpx] bg-[#fbfbfb] p-[32rpx]"
|
||||||
|
style="box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);">
|
||||||
|
<view class="mb-[24rpx]">
|
||||||
|
<text class="text-[28rpx] text-[#232338] font-semibold">
|
||||||
|
服务端接口地址
|
||||||
|
</text>
|
||||||
|
<text class="mt-[8rpx] block text-[24rpx] text-[#9d9ea3]">
|
||||||
|
修改后将自动清空缓存并重启应用
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="mb-[24rpx]">
|
||||||
|
<input v-model="baseUrlInput"
|
||||||
|
class="h-[88rpx] w-full border border-[#eeeeee] rounded-[16rpx] bg-[#f5f7fb] px-[24rpx] text-[28rpx] text-[#232338] transition-all focus:border-[#336cff] focus:bg-white placeholder:text-[#9d9ea3] focus:shadow-[0_0_0_4rpx_rgba(51,108,255,0.1)]"
|
||||||
|
type="text" placeholder="输入服务端地址,如 https://example.com/api">
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="flex gap-[16rpx]">
|
||||||
|
<wd-button type="primary"
|
||||||
|
custom-class="flex-1 h-[88rpx] rounded-[20rpx] text-[28rpx] font-semibold bg-[#336cff] border-none shadow-[0_4rpx_16rpx_rgba(51,108,255,0.3)] active:shadow-[0_2rpx_8rpx_rgba(51,108,255,0.4)] active:scale-98"
|
||||||
|
@click="saveServerBaseUrl">
|
||||||
|
保存设置
|
||||||
|
</wd-button>
|
||||||
|
<wd-button type="default"
|
||||||
|
custom-class="flex-1 h-[88rpx] rounded-[20rpx] text-[28rpx] font-semibold bg-white border-[#eeeeee] text-[#65686f] active:bg-[#f5f7fb]"
|
||||||
|
@click="resetServerBaseUrl">
|
||||||
|
恢复默认
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 缓存管理 -->
|
||||||
|
<view class="mb-[32rpx]">
|
||||||
|
<view class="mb-[24rpx] flex items-center">
|
||||||
|
<text class="text-[32rpx] text-[#232338] font-bold">
|
||||||
|
缓存管理
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="border border-[#eeeeee] rounded-[24rpx] bg-[#fbfbfb] p-[32rpx]"
|
||||||
|
style="box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);">
|
||||||
|
<view class="space-y-[16rpx]">
|
||||||
|
<!-- 缓存信息展示,参考插件样式 -->
|
||||||
|
<view
|
||||||
|
class="flex items-center justify-between border border-[#eeeeee] rounded-[16rpx] bg-[#f5f7fb] p-[24rpx] transition-all active:bg-[#eef3ff]">
|
||||||
|
<view>
|
||||||
|
<text class="text-[28rpx] text-[#232338] font-medium">
|
||||||
|
总缓存大小
|
||||||
|
</text>
|
||||||
|
<text class="mt-[4rpx] block text-[24rpx] text-[#9d9ea3]">
|
||||||
|
应用数据总大小
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<text class="text-[28rpx] text-[#65686f] font-semibold">
|
||||||
|
{{ cacheInfo.storageSize }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 清除缓存按钮,参考插件编辑按钮样式 -->
|
||||||
|
<view
|
||||||
|
class="flex items-center justify-between border border-[#eeeeee] rounded-[16rpx] bg-[#f5f7fb] p-[24rpx]">
|
||||||
|
<view>
|
||||||
|
<text class="text-[28rpx] text-[#232338] font-medium">
|
||||||
|
缓存清理
|
||||||
|
</text>
|
||||||
|
<text class="mt-[4rpx] block text-[24rpx] text-[#9d9ea3]">
|
||||||
|
清空所有缓存数据
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="cursor-pointer rounded-[24rpx] bg-[rgba(255,107,107,0.1)] px-[28rpx] py-[16rpx] text-[24rpx] text-[#ff6b6b] font-semibold transition-all duration-300 active:scale-95 active:bg-[#ff6b6b] active:text-white"
|
||||||
|
@click="clearCache">
|
||||||
|
清除缓存
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 应用信息 -->
|
||||||
|
<view class="mb-[32rpx]">
|
||||||
|
<view class="mb-[24rpx] flex items-center">
|
||||||
|
<text class="text-[32rpx] text-[#232338] font-bold">
|
||||||
|
应用信息
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="border border-[#eeeeee] rounded-[24rpx] bg-[#fbfbfb] p-[32rpx]"
|
||||||
|
style="box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);">
|
||||||
|
<view
|
||||||
|
class="flex cursor-pointer items-center justify-between border border-[#eeeeee] rounded-[16rpx] bg-[#f5f7fb] p-[24rpx] transition-all active:bg-[#eef3ff]"
|
||||||
|
@click="showAbout">
|
||||||
|
<view>
|
||||||
|
<text class="text-[28rpx] text-[#232338] font-medium">
|
||||||
|
关于我们
|
||||||
|
</text>
|
||||||
|
<text class="mt-[4rpx] block text-[24rpx] text-[#9d9ea3]">
|
||||||
|
应用版本与团队信息
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<wd-icon name="arrow-right" custom-class="text-[32rpx] text-[#9d9ea3]" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部安全距离 -->
|
||||||
|
<view style="height: env(safe-area-inset-bottom);" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 保持与 edit.vue 一致的风格,样式主要通过类名控制</style>
|
||||||
@@ -0,0 +1,512 @@
|
|||||||
|
<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 { createVoicePrint, deleteVoicePrint, getChatHistory, getVoicePrintList, updateVoicePrint } from '@/api/voiceprint'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'VoicePrintManage',
|
||||||
|
})
|
||||||
|
|
||||||
|
// 接收props
|
||||||
|
interface Props {
|
||||||
|
agentId?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
agentId: 'default'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取屏幕边界到安全区域距离
|
||||||
|
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 loading = ref(false)
|
||||||
|
|
||||||
|
// 使用传入的智能体ID
|
||||||
|
const currentAgentId = computed(() => {
|
||||||
|
return props.agentId
|
||||||
|
})
|
||||||
|
|
||||||
|
// 智能体选择相关功能已移除
|
||||||
|
|
||||||
|
// 弹窗相关
|
||||||
|
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: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取声纹列表
|
||||||
|
async function loadVoicePrintList() {
|
||||||
|
try {
|
||||||
|
console.log('获取声纹列表')
|
||||||
|
|
||||||
|
// 检查是否有当前选中的智能体
|
||||||
|
if (!currentAgentId.value) {
|
||||||
|
console.warn('没有选中的智能体')
|
||||||
|
voicePrintList.value = []
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
const data = await getVoicePrintList(currentAgentId.value)
|
||||||
|
|
||||||
|
// 初始化滑动状态
|
||||||
|
const list = data || []
|
||||||
|
list.forEach((item) => {
|
||||||
|
if (!swipeStates.value[item.id]) {
|
||||||
|
swipeStates.value[item.id] = 'close'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
voicePrintList.value = list
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('获取声纹列表失败:', error)
|
||||||
|
voicePrintList.value = []
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暴露给父组件的刷新方法
|
||||||
|
async function refresh() {
|
||||||
|
await loadVoicePrintList()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取语音对话记录
|
||||||
|
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
|
||||||
|
await loadVoicePrintList()
|
||||||
|
}
|
||||||
|
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
|
||||||
|
await loadVoicePrintList()
|
||||||
|
}
|
||||||
|
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('删除成功')
|
||||||
|
await loadVoicePrintList()
|
||||||
|
}).catch(() => {
|
||||||
|
console.log('点击了取消按钮')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// 智能体已简化为默认
|
||||||
|
|
||||||
|
loadVoicePrintList()
|
||||||
|
})
|
||||||
|
|
||||||
|
// 暴露方法给父组件
|
||||||
|
defineExpose({
|
||||||
|
refresh,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="voiceprint-container" style="background: #f5f7fb; min-height: 100%;">
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<view v-if="loading && voicePrintList.length === 0" class="loading-container">
|
||||||
|
<wd-loading color="#336cff" />
|
||||||
|
<text class="loading-text">
|
||||||
|
加载中...
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 声纹列表 -->
|
||||||
|
<view v-else-if="voicePrintList.length > 0" class="voiceprint-list">
|
||||||
|
<!-- 声纹卡片列表 -->
|
||||||
|
<view class="box-border flex flex-col gap-[24rpx] p-[20rpx]">
|
||||||
|
<view v-for="item in voicePrintList" :key="item.id">
|
||||||
|
<wd-swipe-action
|
||||||
|
:model-value="swipeStates[item.id] || 'close'"
|
||||||
|
@update:model-value="swipeStates[item.id] = $event"
|
||||||
|
>
|
||||||
|
<view class="bg-[#fbfbfb] p-[32rpx]" @click="handleEdit(item)">
|
||||||
|
<view>
|
||||||
|
<text class="mb-[12rpx] block text-[32rpx] text-[#232338] font-semibold">
|
||||||
|
{{ item.sourceName }}
|
||||||
|
</text>
|
||||||
|
<text class="mb-[12rpx] block text-[28rpx] text-[#65686f] leading-[1.4]">
|
||||||
|
{{ item.introduce || '暂无描述' }}
|
||||||
|
</text>
|
||||||
|
<text class="block text-[24rpx] text-[#9d9ea3]">
|
||||||
|
{{ item.createDate }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<template #right>
|
||||||
|
<view class="h-full flex">
|
||||||
|
<view
|
||||||
|
class="h-full min-w-[120rpx] flex items-center justify-center bg-[#ff4d4f] p-x-[32rpx] text-[28rpx] text-white font-medium"
|
||||||
|
@click="handleDelete(item.id)"
|
||||||
|
>
|
||||||
|
<wd-icon name="delete" />
|
||||||
|
删除
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-swipe-action>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view v-else-if="!loading" class="empty-container">
|
||||||
|
<view class="flex flex-col items-center justify-center p-[100rpx_40rpx] text-center">
|
||||||
|
<wd-icon name="voice" custom-class="text-[120rpx] text-[#d9d9d9] mb-[32rpx]" />
|
||||||
|
<text class="mb-[16rpx] text-[32rpx] text-[#666666] font-medium">
|
||||||
|
暂无声纹数据
|
||||||
|
</text>
|
||||||
|
<text class="text-[26rpx] text-[#999999] leading-[1.5]">
|
||||||
|
点击右下角 + 号添加您的第一个说话人
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 浮动操作按钮 -->
|
||||||
|
<wd-fab type="primary" size="small" :draggable="true" :expandable="false" @click="openAddDialog">
|
||||||
|
<wd-icon name="add" />
|
||||||
|
</wd-fab>
|
||||||
|
|
||||||
|
<!-- MessageBox 组件 -->
|
||||||
|
<wd-message-box />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 添加说话人弹窗 -->
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.voiceprint-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 100rpx 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.wd-swipe-action) {
|
||||||
|
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>
|
||||||
@@ -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)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 448 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 560 B |
|
After Width: | Height: | Size: 956 KiB |
|
After Width: | Height: | Size: 13 KiB |
@@ -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>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.1 KiB |