diff --git a/docs/images/manager-mobile/打包发行步骤1.png b/docs/images/manager-mobile/打包发行步骤1.png new file mode 100644 index 00000000..88cabf48 Binary files /dev/null and b/docs/images/manager-mobile/打包发行步骤1.png differ diff --git a/docs/images/manager-mobile/打包发行步骤2.png b/docs/images/manager-mobile/打包发行步骤2.png new file mode 100644 index 00000000..747b5ffb Binary files /dev/null and b/docs/images/manager-mobile/打包发行步骤2.png differ diff --git a/docs/images/manager-mobile/本地运行.png b/docs/images/manager-mobile/本地运行.png new file mode 100644 index 00000000..c3c5b6ea Binary files /dev/null and b/docs/images/manager-mobile/本地运行.png differ diff --git a/docs/images/manager-mobile/生成appid.png b/docs/images/manager-mobile/生成appid.png new file mode 100644 index 00000000..73e6357e Binary files /dev/null and b/docs/images/manager-mobile/生成appid.png differ diff --git a/docs/images/manager-mobile/重新识别项目.png b/docs/images/manager-mobile/重新识别项目.png new file mode 100644 index 00000000..0e9c1c9f Binary files /dev/null and b/docs/images/manager-mobile/重新识别项目.png differ diff --git a/main/manager-mobile/README.md b/main/manager-mobile/README.md index d5354b15..1886be80 100644 --- a/main/manager-mobile/README.md +++ b/main/manager-mobile/README.md @@ -1,36 +1,169 @@ -# 智控台移动版 -manager-mobile是智控台手机版本，方便在手机上管理智能体。 +## 智控台移动版（manager-mobile） +基于 uni-app v3 + Vue 3 + Vite 的跨端移动管理端，支持 App（Android & iOS）和微信小程序。 -## 平台兼容性 +### 平台兼容性 -| H5 | IOS | 安卓 | 微信小程序 | 字节小程序 | 快手小程序 | 支付宝小程序 | 钉钉小程序 | 百度小程序 | -| --- | --- | ---- | ---------- | ---------- | ---------- | ------------ | ---------- | ---------- | -| √ | √ | √ | √ | √ | √ | √ | √ | √ | +| H5 | iOS | Android | 微信小程序 | 字节小程序 | 快手小程序 | 支付宝小程序 | 钉钉小程序 | 百度小程序 | +| -- | --- | ------- | ---------- | ---------- | ---------- | ------------ | ---------- | ---------- | +| × | √ | √ | √ | × | × | × | × | × | -注意每种 `UI框架` 支持的平台有所不同，详情请看各 `UI框架` 的官网，也可以看 `unibest` 文档。 +提示：不同 UI 组件在不同平台的适配度略有差异，请以对应组件库文档为准。 -## ⚙️ 环境 +### 开发环境要求 +- Node >= 18 +- pnpm >= 7.30（建议使用项目中声明的 `pnpm@10.x`） +- 可选：HBuilderX（App 调试/打包）、微信开发者工具（微信小程序） -- node>=18 -- pnpm>=7.30 -- Vue Official>=2.1.10 -- TypeScript>=5.0 +### 快速开始 +1) 配置环境变量 + - 复制 `env/.env.example` 为 `env/.env.development` + - 根据实际情况修改配置项（特别是 `VITE_SERVER_BASEURL`、`VITE_UNI_APPID`、`VITE_WX_APPID`） -## 📂 快速开始 +2) 安装依赖 -执行 `pnpm create unibest` 创建项目 -执行 `pnpm i` 安装依赖 -执行 `pnpm dev` 运行 `H5` -执行 `pnpm dev:mp` 运行 `微信小程序` +```bash +pnpm i +``` -## 📦 运行（支持热更新） +3) 本地开发（热更新） +- 微信小程序：`pnpm dev:mp` 或 `pnpm dev:mp-weixin`，然后用微信开发者工具导入 `dist/dev/mp-weixin` +- App：用 HBuilderX 导入 `manager-mobile`，然后参考下面的教程就能运行了 -- web平台： `pnpm dev:h5`, 然后打开 [http://localhost:9000/](http://localhost:9000/)。 -- weixin平台：`pnpm dev:mp` 然后打开微信开发者工具，导入本地文件夹，选择本项目的`dist/dev/mp-weixin` 文件。 -- APP平台：`pnpm dev:app`, 然后打开 `HBuilderX`，导入刚刚生成的`dist/dev/app` 文件夹，选择运行到模拟器(开发时优先使用)，或者运行的安卓/ios基座。 +### 环境变量与配置 +项目使用自定义 `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：未登录跳转的登录页路径（路由拦截器使用） -- web平台： `pnpm build:h5`，打包后的文件在 `dist/build/h5`，可以放到web服务器，如nginx运行。如果最终不是放在根目录，可以在 `manifest.config.ts` 文件的 `h5.router.base` 属性进行修改。 -- weixin平台：`pnpm build:mp`, 打包后的文件在 `dist/build/mp-weixin`，然后通过微信开发者工具导入，并点击右上角的“上传”按钮进行上传。 -- APP平台：`pnpm build:app`, 然后打开 `HBuilderX`，导入刚刚生成的`dist/build/app` 文件夹，选择发行 - APP云打包。 +示例（`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](../../docs/images/manager-mobile/生成appid.png) +- 复制生成的 AppID 到环境变量 `VITE_UNI_APPID` 中 + +#### 2. 本地运行步骤 +![本地运行](../../docs/images/manager-mobile/本地运行.png) + +**App 本地调试：** +1. 用 HBuilderX 导入 `manager-mobile` 目录 +2. 重新识别项目 +3. 连接手机或使用模拟器进行真机调试 + +**项目识别问题解决：** +![重新识别项目](../../docs/images/manager-mobile/重新识别项目.png) + +如果 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](../../docs/images/manager-mobile/打包发行步骤1.png) + +1. 确保已配置正确的 `VITE_UNI_APPID` +2. 运行 `pnpm build:app`，产物在 `dist/build/app` +3. 用 HBuilderX 导入项目目录 +4. 在 HBuilderX 中点击"发行" → "原生App-云打包" + +**步骤二：配置打包参数** +![打包发行步骤2](../../docs/images/manager-mobile/打包发行步骤2.png) + +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 diff --git a/main/manager-mobile/openapi-ts-request.config.ts b/main/manager-mobile/openapi-ts-request.config.ts deleted file mode 100644 index 05195d1a..00000000 --- a/main/manager-mobile/openapi-ts-request.config.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type { GenerateServiceProps } from 'openapi-ts-request' - -export default [ - { - schemaPath: 'http://petstore.swagger.io/v2/swagger.json', - serversPath: './src/service/app', - requestLibPath: `import request from '@/utils/request';\n import { CustomRequestOptions } from '@/http/interceptor';`, - requestOptionsType: 'CustomRequestOptions', - isGenReactQuery: true, - reactQueryMode: 'vue', - isGenJavaScript: false, - }, -] as GenerateServiceProps[] diff --git a/main/manager-mobile/src/pages/settings/index.vue b/main/manager-mobile/src/pages/settings/index.vue index 948d4e66..c64ba4a6 100644 --- a/main/manager-mobile/src/pages/settings/index.vue +++ b/main/manager-mobile/src/pages/settings/index.vue @@ -12,6 +12,7 @@ import { computed, onMounted, reactive, ref } from 'vue' import { useToast } from 'wot-design-uni' import { clearServerBaseUrlOverride, getEnvBaseUrl, getServerBaseUrlOverride, setServerBaseUrlOverride } from '@/utils' +import { isMp } from '@/utils/platform' defineOptions({ name: 'SettingsPage', @@ -171,7 +172,10 @@ function showAbout() { } onMounted(async () => { - loadServerBaseUrl() + // 仅在非小程序环境加载服务端地址设置 + if (!isMp) { + loadServerBaseUrl() + } getCacheInfo() }) @@ -181,8 +185,8 @@ onMounted(async () => { - - + + 网络设置 diff --git a/main/manager-mobile/src/utils/request.ts b/main/manager-mobile/src/utils/request.ts deleted file mode 100644 index 8b169257..00000000 --- a/main/manager-mobile/src/utils/request.ts +++ /dev/null @@ -1,78 +0,0 @@ -import type { CustomRequestOptions } from '@/http/interceptor' - -/** - * 请求方法: 主要是对 uni.request 的封装，去适配 openapi-ts-request 的 request 方法 - * @param options 请求参数 - * @returns 返回 Promise 对象 - */ -function http(options: CustomRequestOptions) { - // 1. 返回 Promise 对象 - return new Promise((resolve, reject) => { - uni.request({ - ...options, - dataType: 'json', - // #ifndef MP-WEIXIN - responseType: 'json', - // #endif - // 响应成功 - success(res) { - // 状态码 2xx，参考 axios 的设计 - if (res.statusCode >= 200 && res.statusCode < 300) { - // 2.1 提取核心数据 res.data - resolve(res.data as T) - } - else if (res.statusCode === 401) { - // 401错误 -> 清理用户信息，跳转到登录页 - // userStore.clearUserInfo() - // uni.navigateTo({ url: '/pages/login/login' }) - reject(res) - } - else { - // 其他错误 -> 根据后端错误信息轻提示 - !options.hideErrorToast - && uni.showToast({ - icon: 'none', - title: (res.data as T & { msg?: string })?.msg || '请求错误', - }) - reject(res) - } - }, - // 响应失败 - fail(err) { - uni.showToast({ - icon: 'none', - title: '网络错误，换个网络试试', - }) - reject(err) - }, - }) - }) -} - -/* - * openapi-ts-request 工具的 request 跨客户端适配方法 - */ -export default function request( - url: string, - options: Omit & { - params?: Record - headers?: Record - }, -) { - const requestOptions = { - url, - ...options, - } - - if (options.params) { - requestOptions.query = requestOptions.params - delete requestOptions.params - } - - if (options.headers) { - requestOptions.header = options.headers - delete requestOptions.headers - } - - return http(requestOptions) -} diff --git a/main/manager-mobile/tsconfig.json b/main/manager-mobile/tsconfig.json new file mode 100644 index 00000000..22a48c5d --- /dev/null +++ b/main/manager-mobile/tsconfig.json @@ -0,0 +1,41 @@ +{ + "compilerOptions": { + "composite": true, + "lib": ["esnext", "dom"], + "baseUrl": ".", + "module": "ESNext", + "moduleResolution": "Node", + "paths": { + "@/*": ["./src/*"], + "@img/*": ["./src/static/*"] + }, + "resolveJsonModule": true, + "types": [ + "@dcloudio/types", + "@uni-helper/uni-types", + "@types/wechat-miniprogram", + "wot-design-uni/global.d.ts", + "z-paging/types", + "./src/typings.d.ts" + ], + "allowJs": true, + "noImplicitThis": true, + "outDir": "dist", + "sourceMap": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true + }, + "vueCompilerOptions": { + "plugins": ["@uni-helper/uni-types/volar-plugin"] + }, + "include": [ + "src/**/*.ts", + "src/**/*.js", + "src/**/*.d.ts", + "src/**/*.tsx", + "src/**/*.jsx", + "src/**/*.vue", + "src/**/*.json" + ], + "exclude": ["node_modules"] +}