Merge branch 'yongpxu-dev' into yongpxu-dev4
# Conflicts: # nkebao/AI_ICON_GUIDE.md resolved by yongpxu-dev version # nkebao/ICON_DETAILED_MAPPING.md resolved by yongpxu-dev version # nkebao/ICON_MAPPING_GUIDE.md resolved by yongpxu-dev version # nkebao/ICON_QUICK_REFERENCE.md resolved by yongpxu-dev version # nkebao/index.html resolved by yongpxu-dev version
This commit is contained in:
超级老白兔
@@ -2,23 +2,26 @@
|
||||
|
||||
## 📋 项目简介
|
||||
|
||||
内客宝是一个专业的微信获客和流量管理平台，基于 React 技术栈构建。平台提供智能化的客户获取、管理和运营解决方案，集成了多种自动化工具，帮助企业高效管理微信营销活动。
|
||||
内客宝是一个专业的微信获客和流量管理平台，基于 React 技术栈构建。平台提供智能化的客户获取、管理和运营解决方案，集成了多种自动化工具，帮助企业高效管理存客宝活动。
|
||||
|
||||
## 🚀 技术栈详解
|
||||
|
||||
### 核心框架
|
||||
|
||||
- **React 18.2.0** - 现代化的用户界面库
|
||||
- **TypeScript 4.9.5** - 类型安全的 JavaScript 超集
|
||||
- **Create React App (CRA) 5.0.1** - React 应用脚手架
|
||||
- **React Router DOM 6.20.0** - 客户端路由管理
|
||||
|
||||
### 构建工具
|
||||
|
||||
- **CRACO 7.1.0** - Create React App Configuration Override
|
||||
- 支持自定义 webpack 配置
|
||||
- 路径别名配置
|
||||
- 构建优化
|
||||
|
||||
### UI 组件库
|
||||
|
||||
- **Radix UI** - 无样式的可访问组件库
|
||||
- 完整的组件生态系统（30+ 组件）
|
||||
- 优秀的无障碍访问支持
|
||||
@@ -29,32 +32,38 @@
|
||||
- 原子化 CSS 类
|
||||
|
||||
### 图标和样式
|
||||
|
||||
- **Lucide React 0.454.0** - 精美的图标库
|
||||
- **Tailwind CSS Animate** - CSS 动画库
|
||||
- **Class Variance Authority** - 组件变体管理
|
||||
- **Tailwind Merge** - Tailwind 类名合并工具
|
||||
|
||||
### 状态管理和表单
|
||||
|
||||
- **React Hook Form 7.54.1** - 高性能表单库
|
||||
- **Zod 3.24.1** - TypeScript 优先的模式验证
|
||||
- **@hookform/resolvers 3.9.1** - 表单验证解析器
|
||||
|
||||
### 数据可视化
|
||||
|
||||
- **Recharts** - 基于 React 的图表库
|
||||
- **Chart.js 4.5.0** - 灵活的图表库
|
||||
- **@ant-design/plots** - Ant Design 图表组件
|
||||
|
||||
### HTTP 请求和数据处理
|
||||
|
||||
- **Axios 1.6.0** - HTTP 客户端
|
||||
- **Crypto-js 4.2.0** - 加密库
|
||||
- **Date-fns** - 日期处理库
|
||||
- **XLSX 0.18.5** - Excel 文件处理
|
||||
|
||||
### 通知和反馈
|
||||
|
||||
- **React Hot Toast 2.5.2** - 轻量级通知库
|
||||
- **Sonner 1.7.4** - 现代化 Toast 组件
|
||||
|
||||
### 高级组件
|
||||
|
||||
- **@tanstack/react-table** - 功能强大的表格组件
|
||||
- **Embla Carousel React 8.5.1** - 轮播组件
|
||||
- **React Resizable Panels 2.1.7** - 可调整大小的面板
|
||||
@@ -63,6 +72,7 @@
|
||||
- **React Day Picker** - 日期选择器
|
||||
|
||||
### 开发工具
|
||||
|
||||
- **PostCSS 8** - CSS 后处理器
|
||||
- **Autoprefixer 10.4.20** - CSS 前缀自动添加
|
||||
- **ESLint** - 代码质量检查
|
||||
@@ -107,6 +117,7 @@ nkebao/
|
||||
## 🎯 核心功能模块
|
||||
|
||||
### 工作台 (Workspace)
|
||||
|
||||
- **自动点赞** - 智能点赞管理和配置
|
||||
- **自动建群** - 群组自动化创建和管理
|
||||
- **群消息推送** - 群组消息批量发送
|
||||
@@ -115,21 +126,25 @@ nkebao/
|
||||
- **流量分发** - 流量分配和策略管理
|
||||
|
||||
### 设备管理 (Devices)
|
||||
|
||||
- 设备状态监控和配置
|
||||
- 设备性能分析
|
||||
- 设备权限管理
|
||||
|
||||
### 场景管理 (Scenarios)
|
||||
|
||||
- 营销场景配置
|
||||
- 自动化流程设计
|
||||
- 场景效果分析
|
||||
|
||||
### 内容管理 (Content)
|
||||
|
||||
- 内容创建与编辑
|
||||
- 内容模板管理
|
||||
- 内容发布调度
|
||||
|
||||
### 其他模块
|
||||
|
||||
- 用户管理 (Users)
|
||||
- 订单管理 (Orders)
|
||||
- 流量池管理 (Traffic Pool)
|
||||
@@ -138,10 +153,12 @@ nkebao/
|
||||
## 🛠️ 开发指南
|
||||
|
||||
### 环境要求
|
||||
- **Node.js** 16+
|
||||
|
||||
- **Node.js** 16+
|
||||
- **npm** 或 **yarn**
|
||||
|
||||
### 安装依赖
|
||||
|
||||
```bash
|
||||
# 使用 npm
|
||||
npm install
|
||||
@@ -151,6 +168,7 @@ yarn install
|
||||
```
|
||||
|
||||
### 开发环境启动
|
||||
|
||||
```bash
|
||||
# 使用 npm
|
||||
npm start
|
||||
@@ -160,6 +178,7 @@ yarn start
|
||||
```
|
||||
|
||||
### 构建生产版本
|
||||
|
||||
```bash
|
||||
# 使用 npm
|
||||
npm run build
|
||||
@@ -169,6 +188,7 @@ yarn build
|
||||
```
|
||||
|
||||
### 运行测试
|
||||
|
||||
```bash
|
||||
# 使用 npm
|
||||
npm test
|
||||
@@ -180,7 +200,9 @@ yarn test
|
||||
## 🔧 配置说明
|
||||
|
||||
### 路径别名配置
|
||||
|
||||
项目使用 CRACO 配置了路径别名：
|
||||
|
||||
```javascript
|
||||
'@': path.resolve(__dirname, 'src'),
|
||||
'@/components': path.resolve(__dirname, 'src/components'),
|
||||
@@ -193,11 +215,13 @@ yarn test
|
||||
```
|
||||
|
||||
### Tailwind CSS 配置
|
||||
|
||||
- 自定义字体大小和间距
|
||||
- 响应式断点配置
|
||||
- 主题颜色系统
|
||||
|
||||
### TypeScript 配置
|
||||
|
||||
- 严格模式启用
|
||||
- 路径映射配置
|
||||
- JSX 支持
|
||||
@@ -205,6 +229,7 @@ yarn test
|
||||
## 📱 响应式设计
|
||||
|
||||
项目采用移动优先的响应式设计：
|
||||
|
||||
- 支持桌面端、平板端、移动端
|
||||
- 自适应布局组件
|
||||
- 触摸友好的交互设计
|
||||
@@ -212,11 +237,13 @@ yarn test
|
||||
## 🎨 UI 设计系统
|
||||
|
||||
### 设计原则
|
||||
|
||||
- 简洁现代的设计风格
|
||||
- 一致的用户体验
|
||||
- 无障碍访问支持
|
||||
|
||||
### 组件库特点
|
||||
|
||||
- 基于 Radix UI 的高质量组件
|
||||
- 完整的表单组件系统
|
||||
- 数据展示组件
|
||||
@@ -263,4 +290,4 @@ yarn test
|
||||
**项目名称**: 内客宝 (nkebao2)
|
||||
**版本**: 0.1.0
|
||||
**技术栈**: React + TypeScript + CRA + Tailwind CSS
|
||||
**最后更新**: 2024年12月
|
||||
**最后更新**: 2024 年 12 月
|
||||
|
||||
1
ckApp/.gitignore
vendored
Normal file
1
ckApp/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
unpackage
|
||||
7
ckApp/App.vue
Normal file
7
ckApp/App.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*每个页面公共css */
|
||||
</style>
|
||||
20
ckApp/index.html
Normal file
20
ckApp/index.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
22
ckApp/main.js
Normal file
22
ckApp/main.js
Normal file
@@ -0,0 +1,22 @@
|
||||
import App from './App'
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import './uni.promisify.adaptor'
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
74
ckApp/manifest.json
Normal file
74
ckApp/manifest.json
Normal file
@@ -0,0 +1,74 @@
|
||||
{
|
||||
"name" : "ckApp",
|
||||
"appid" : "__UNI__2B34F1A",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"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\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {
|
||||
"dSYMs" : false
|
||||
},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "3"
|
||||
}
|
||||
24
ckApp/pages.json
Normal file
24
ckApp/pages.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/test",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
},
|
||||
"uniIdRouter": {}
|
||||
}
|
||||
100
ckApp/pages/index/index.vue
Normal file
100
ckApp/pages/index/index.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<web-view
|
||||
ref="webviewRef"
|
||||
:src="iframeUrl"
|
||||
@message="handleMessage"
|
||||
:fullscreen="true"
|
||||
></web-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTopSafeAreaHeightAsync } from '@utils/common';
|
||||
const TYPE_EMUE = {
|
||||
CONNECT: 0,
|
||||
DATA: 1,
|
||||
FUNCTION: 2,
|
||||
CONFIG: 3,
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseUrl: 'https://kr-op.quwanzhi.com/init',
|
||||
iframeUrl: '', // 动态构建的 URL
|
||||
receivedMessages: [],
|
||||
messageId: 0,
|
||||
urlParams: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.sendBaseConfig()
|
||||
},
|
||||
methods: {
|
||||
// 构建 iframe URL，包含参数
|
||||
buildIframeUrl() {
|
||||
const params = [];
|
||||
Object.keys(this.urlParams).forEach(key => {
|
||||
const value = this.urlParams[key];
|
||||
if (value !== null && value !== undefined) {
|
||||
const encodedKey = encodeURIComponent(key);
|
||||
const encodedValue = encodeURIComponent(String(value));
|
||||
params.push(`${encodedKey}=${encodedValue}`);
|
||||
}
|
||||
});
|
||||
const queryString = params.join('&');
|
||||
this.iframeUrl = queryString ? `${this.baseUrl}?${queryString}` : this.baseUrl;
|
||||
},
|
||||
// 发送消息到 iframe（通过URL传参）
|
||||
async sendMessageToIframe() {
|
||||
const paddingTop = await getTopSafeAreaHeightAsync();
|
||||
this.messageId++;
|
||||
const message = {
|
||||
type: TYPE_EMUE.DATA, // 数据类型：0数据交互 1App功能调用
|
||||
data: {
|
||||
id: this.messageId,
|
||||
content: `Hello，我是 App 发送的消息 ${this.messageId}`,
|
||||
timestamp: Date.now(),
|
||||
paddingTop: paddingTop
|
||||
}
|
||||
};
|
||||
|
||||
// 将消息添加到URL参数中
|
||||
this.urlParams.message = encodeURIComponent(JSON.stringify(message));
|
||||
this.buildIframeUrl();
|
||||
console.log('[App]SendMessage=>\n' + JSON.stringify(message));
|
||||
},
|
||||
// 发送消息到 iframe（通过URL传参）
|
||||
async sendBaseConfig() {
|
||||
const message = {
|
||||
type: TYPE_EMUE.CONFIG,
|
||||
data: {
|
||||
paddingTop: await getTopSafeAreaHeightAsync(),
|
||||
appId: '1234567890',
|
||||
appName: '存客宝',
|
||||
appVersion: '1.0.0',
|
||||
}
|
||||
};
|
||||
|
||||
// 将消息添加到URL参数中
|
||||
this.urlParams.message = encodeURIComponent(JSON.stringify(message));
|
||||
this.buildIframeUrl();
|
||||
console.log('[App]SendMessage=>\n' + JSON.stringify(message));
|
||||
},
|
||||
// 接收 web-view 发送的消息
|
||||
handleMessage(event) {
|
||||
console.log("event", event);
|
||||
const [ResDetail] = event.detail.data;
|
||||
this.receivedMessages.push(`[${new Date().toLocaleTimeString()}] ${JSON.stringify(ResDetail)}`);
|
||||
|
||||
switch (ResDetail.type) {
|
||||
case TYPE_EMUE.DATA:
|
||||
console.log('[App]ReceiveMessage=>\n' + JSON.stringify(ResDetail.data));
|
||||
break;
|
||||
case TYPE_EMUE.FUNCTION:
|
||||
console.log('[App]ReceiveMessage=>\n' + JSON.stringify(ResDetail.data));
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
304
ckApp/pages/index/test.vue
Normal file
304
ckApp/pages/index/test.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- iframe 容器 -->
|
||||
<view class="iframe-container">
|
||||
<web-view
|
||||
ref="webviewRef"
|
||||
:src="iframeUrl"
|
||||
@message="handleMessage"
|
||||
:fullscreen="false"
|
||||
:webview-styles="{
|
||||
width:'100%',
|
||||
height:'406px'
|
||||
}"
|
||||
></web-view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 消息控制区域 -->
|
||||
<view class="message-controls">
|
||||
<text class="control-title">消息控制：</text>
|
||||
<view class="control-buttons">
|
||||
<button @click="sendMessageToIframe" class="btn-send">发送消息到iframe</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 消息显示区域 -->
|
||||
<view class="message-area">
|
||||
<text class="message-title">接收到的消息：</text>
|
||||
<view class="message-list">
|
||||
<view v-for="(msg, index) in receivedMessages" :key="index" class="message-item">
|
||||
<text class="message-text">{{msg}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTopSafeAreaHeightAsync } from '@utils/common';
|
||||
const TYPE_EMUE = {
|
||||
CONNECT: 0,
|
||||
DATA: 1,
|
||||
FUNCTION: 2,
|
||||
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseUrl: 'https://kr-op.quwanzhi.com/init',
|
||||
iframeUrl: '', // 动态构建的 URL
|
||||
receivedMessages: [],
|
||||
messageId: 0,
|
||||
urlParams: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.buildIframeUrl();
|
||||
setTimeout(() => {
|
||||
this.sendMessageToIframeConnect()
|
||||
}, 1000);
|
||||
},
|
||||
methods: {
|
||||
// 构建 iframe URL，包含参数
|
||||
buildIframeUrl() {
|
||||
const params = [];
|
||||
Object.keys(this.urlParams).forEach(key => {
|
||||
const value = this.urlParams[key];
|
||||
if (value !== null && value !== undefined) {
|
||||
const encodedKey = encodeURIComponent(key);
|
||||
const encodedValue = encodeURIComponent(String(value));
|
||||
params.push(`${encodedKey}=${encodedValue}`);
|
||||
}
|
||||
});
|
||||
const queryString = params.join('&');
|
||||
this.iframeUrl = queryString ? `${this.baseUrl}?${queryString}` : this.baseUrl;
|
||||
},
|
||||
// 发送消息到 iframe（通过URL传参）
|
||||
async sendMessageToIframe() {
|
||||
const paddingTop = await getTopSafeAreaHeightAsync();
|
||||
this.messageId++;
|
||||
const message = {
|
||||
type: TYPE_EMUE.DATA, // 数据类型：0数据交互 1App功能调用
|
||||
data: {
|
||||
id: this.messageId,
|
||||
content: `Hello，我是 App 发送的消息 ${this.messageId}`,
|
||||
timestamp: Date.now(),
|
||||
paddingTop: paddingTop
|
||||
}
|
||||
};
|
||||
|
||||
// 将消息添加到URL参数中
|
||||
this.urlParams.message = encodeURIComponent(JSON.stringify(message));
|
||||
this.buildIframeUrl();
|
||||
console.log('[App]SendMessage=>\n' + JSON.stringify(message));
|
||||
},
|
||||
// 发送消息到 iframe（通过URL传参）
|
||||
async sendMessageToIframeConnect() {
|
||||
const message = {
|
||||
type: TYPE_EMUE.CONNECT,
|
||||
data: {
|
||||
action: 'ping',
|
||||
content: '联通测试通过',
|
||||
timestamp: Date.now()
|
||||
}
|
||||
};
|
||||
|
||||
// 将消息添加到URL参数中
|
||||
this.urlParams.message = encodeURIComponent(JSON.stringify(message));
|
||||
this.buildIframeUrl();
|
||||
console.log('[App]SendMessage=>\n' + JSON.stringify(message));
|
||||
},
|
||||
// 接收 web-view 发送的消息
|
||||
handleMessage(event) {
|
||||
console.log("event", event);
|
||||
const [ResDetail] = event.detail.data;
|
||||
this.receivedMessages.push(`[${new Date().toLocaleTimeString()}] ${JSON.stringify(ResDetail)}`);
|
||||
|
||||
switch (ResDetail.type) {
|
||||
case TYPE_EMUE.DATA:
|
||||
console.log('[App]ReceiveMessage=>\n' + JSON.stringify(ResDetail.data));
|
||||
break;
|
||||
case TYPE_EMUE.FUNCTION:
|
||||
console.log('[App]ReceiveMessage=>\n' + JSON.stringify(ResDetail.data));
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
|
||||
.iframe-container {
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
position: relative;
|
||||
margin: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
height: 800rpx;
|
||||
:deep(web-view) {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
:deep(iframe) {
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.message-controls {
|
||||
padding: 20rpx;
|
||||
background: #f0f0f0;
|
||||
border-bottom: 2rpx solid #e0e0e0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.control-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16rpx;
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 2rpx solid #d0d0d0;
|
||||
}
|
||||
|
||||
.control-buttons {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.btn-send {
|
||||
flex: 1;
|
||||
background: linear-gradient(135deg, #188eee 0%, #096dd9 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx 16rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4rpx 12rpx rgba(24, 142, 238, 0.3);
|
||||
|
||||
&:active {
|
||||
transform: translateY(2rpx);
|
||||
box-shadow: 0 2rpx 8rpx rgba(24, 142, 238, 0.4);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #096dd9 0%, #0050b3 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.message-area {
|
||||
flex: 1;
|
||||
padding: 20rpx;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
padding-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
border: 2rpx solid #f0f0f0;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx;
|
||||
background: #fafafa;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8rpx;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 4rpx;
|
||||
|
||||
&:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-item {
|
||||
background: white;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
border-left: 6rpx solid #188eee;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateX(4rpx);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.message-text {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
line-height: 1.5;
|
||||
font-family: "Courier New", monospace;
|
||||
}
|
||||
|
||||
@media (max-width: 768rpx) {
|
||||
.content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.iframe-container {
|
||||
margin: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.message-area {
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
padding: 16rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
ckApp/static/logo.png
Normal file
BIN
ckApp/static/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
13
ckApp/uni.promisify.adaptor.js
Normal file
13
ckApp/uni.promisify.adaptor.js
Normal file
@@ -0,0 +1,13 @@
|
||||
uni.addInterceptor({
|
||||
returnValue (res) {
|
||||
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
|
||||
return res;
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
res.then((res) => {
|
||||
if (!res) return resolve(res)
|
||||
return res[0] ? reject(res[0]) : resolve(res[1])
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
76
ckApp/uni.scss
Normal file
76
ckApp/uni.scss
Normal file
@@ -0,0 +1,76 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 行为相关颜色 */
|
||||
$uni-color-primary: #007aff;
|
||||
$uni-color-success: #4cd964;
|
||||
$uni-color-warning: #f0ad4e;
|
||||
$uni-color-error: #dd524d;
|
||||
|
||||
/* 文字基本颜色 */
|
||||
$uni-text-color:#333;//基本色
|
||||
$uni-text-color-inverse:#fff;//反色
|
||||
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
|
||||
$uni-text-color-placeholder: #808080;
|
||||
$uni-text-color-disable:#c0c0c0;
|
||||
|
||||
/* 背景颜色 */
|
||||
$uni-bg-color:#ffffff;
|
||||
$uni-bg-color-grey:#f8f8f8;
|
||||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
||||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
||||
|
||||
/* 边框颜色 */
|
||||
$uni-border-color:#c8c7cc;
|
||||
|
||||
/* 尺寸变量 */
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm:12px;
|
||||
$uni-font-size-base:14px;
|
||||
$uni-font-size-lg:16px;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm:20px;
|
||||
$uni-img-size-base:26px;
|
||||
$uni-img-size-lg:40px;
|
||||
|
||||
/* Border Radius */
|
||||
$uni-border-radius-sm: 2px;
|
||||
$uni-border-radius-base: 3px;
|
||||
$uni-border-radius-lg: 6px;
|
||||
$uni-border-radius-circle: 50%;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-row-sm: 5px;
|
||||
$uni-spacing-row-base: 10px;
|
||||
$uni-spacing-row-lg: 15px;
|
||||
|
||||
/* 垂直间距 */
|
||||
$uni-spacing-col-sm: 4px;
|
||||
$uni-spacing-col-base: 8px;
|
||||
$uni-spacing-col-lg: 12px;
|
||||
|
||||
/* 透明度 */
|
||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
/* 文章场景相关 */
|
||||
$uni-color-title: #2C405A; // 文章标题颜色
|
||||
$uni-font-size-title:20px;
|
||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||
$uni-font-size-subtitle:26px;
|
||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||
$uni-font-size-paragraph:15px;
|
||||
36
ckApp/utils/common.js
Normal file
36
ckApp/utils/common.js
Normal file
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* 异步获取设备顶部安全区域高度
|
||||
* @returns {Promise<number>} 顶部安全区域高度
|
||||
*/
|
||||
export function getTopSafeAreaHeightAsync() {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
try {
|
||||
const safeAreaInsets = res.safeAreaInsets;
|
||||
|
||||
if (safeAreaInsets && safeAreaInsets.top !== undefined) {
|
||||
resolve(safeAreaInsets.top);
|
||||
return;
|
||||
}
|
||||
|
||||
if (res.safeArea) {
|
||||
const safeArea = res.safeArea;
|
||||
const statusBarHeight = res.statusBarHeight || 0;
|
||||
const topSafeHeight = safeArea.top - statusBarHeight;
|
||||
resolve(Math.max(0, topSafeHeight));
|
||||
return;
|
||||
}
|
||||
|
||||
resolve(`${res.statusBarHeight*2 || 0}px`);
|
||||
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
},
|
||||
fail: (error) => {
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
29
ckApp/vite.config.js
Normal file
29
ckApp/vite.config.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import uni from '@dcloudio/vite-plugin-uni'
|
||||
import { resolve } from 'path'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [uni()],
|
||||
resolve: {
|
||||
alias: {
|
||||
// 根目录别名
|
||||
'@': resolve(__dirname, '/'),
|
||||
'@root': resolve(__dirname, '/'),
|
||||
|
||||
// 页面和组件别名
|
||||
'@pages': resolve(__dirname, 'pages'),
|
||||
'@components': resolve(__dirname, 'components'),
|
||||
|
||||
// 工具和配置别名
|
||||
'@utils': resolve(__dirname, 'utils'),
|
||||
}
|
||||
},
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: `@import "@/uni.scss";`
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -1,274 +0,0 @@
|
||||
# AI图标使用指南
|
||||
|
||||
## 概述
|
||||
|
||||
本文档为AI助手提供标准化的图标选择和使用流程，确保在代码生成时使用正确的图标包和图标名称。
|
||||
|
||||
## AI使用流程
|
||||
|
||||
### 1. 项目类型判断
|
||||
首先判断项目类型：
|
||||
- **PC端项目**: 使用 `@ant-design/icons`
|
||||
- **移动端项目**: 使用 `antd-mobile-icons`
|
||||
|
||||
### 2. 图标查找流程
|
||||
1. 根据功能需求确定图标类型
|
||||
2. 在对应图标包中查找合适的图标
|
||||
3. 如果图标不存在，查找替代方案
|
||||
4. 使用正确的导入语法
|
||||
|
||||
### 3. 代码生成模板
|
||||
|
||||
#### PC端项目模板
|
||||
```typescript
|
||||
import {
|
||||
// 导航类
|
||||
HomeOutlined,
|
||||
UserOutlined,
|
||||
SettingOutlined,
|
||||
|
||||
// 操作类
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
CopyOutlined,
|
||||
SearchOutlined,
|
||||
ReloadOutlined,
|
||||
|
||||
// 状态类
|
||||
CheckOutlined,
|
||||
CloseOutlined,
|
||||
CheckCircleOutlined,
|
||||
CloseCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
InfoCircleOutlined,
|
||||
LoadingOutlined,
|
||||
|
||||
// 方向类
|
||||
UpOutlined,
|
||||
DownOutlined,
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
ArrowLeftOutlined,
|
||||
|
||||
// 其他
|
||||
MessageOutlined,
|
||||
CalendarOutlined,
|
||||
ClockCircleOutlined,
|
||||
PictureOutlined,
|
||||
FileOutlined,
|
||||
CameraOutlined,
|
||||
QrcodeOutlined,
|
||||
} from '@ant-design/icons';
|
||||
```
|
||||
|
||||
#### 移动端项目模板
|
||||
```typescript
|
||||
import {
|
||||
// 导航类
|
||||
HomeOutline,
|
||||
UserOutline,
|
||||
SettingOutline,
|
||||
|
||||
// 操作类
|
||||
AddOutline,
|
||||
EditSOutline,
|
||||
DeleteOutline,
|
||||
CopyOutline,
|
||||
SearchOutline,
|
||||
RefreshOutline,
|
||||
|
||||
// 状态类
|
||||
CheckOutline,
|
||||
CloseOutline,
|
||||
CheckCircleOutline,
|
||||
CloseCircleOutline,
|
||||
ExclamationCircleOutline,
|
||||
InfoCircleOutline,
|
||||
LoadingOutline,
|
||||
|
||||
// 方向类
|
||||
UpOutline,
|
||||
DownOutline,
|
||||
LeftOutline,
|
||||
RightOutline,
|
||||
|
||||
// 其他
|
||||
MessageOutline,
|
||||
CalendarOutline,
|
||||
ClockCircleOutline,
|
||||
PictureOutline,
|
||||
FileOutline,
|
||||
CameraOutline,
|
||||
QrCodeOutline,
|
||||
} from 'antd-mobile-icons';
|
||||
```
|
||||
|
||||
## 功能到图标映射
|
||||
|
||||
### 基础功能映射
|
||||
| 功能需求 | PC端图标 | 移动端图标 | 说明 |
|
||||
|---------|---------|-----------|------|
|
||||
| 添加/新建 | PlusOutlined | AddOutline | 通用添加功能 |
|
||||
| 编辑/修改 | EditOutlined | EditSOutline | 编辑功能 |
|
||||
| 删除/移除 | DeleteOutlined | DeleteOutline | 删除功能 |
|
||||
| 复制/克隆 | CopyOutlined | CopyOutline | 复制功能 |
|
||||
| 搜索/查找 | SearchOutlined | SearchOutline | 搜索功能 |
|
||||
| 刷新/重新加载 | ReloadOutlined | RefreshOutline | 刷新功能 |
|
||||
| 设置/配置 | SettingOutlined | SettingOutline | 设置功能 |
|
||||
| 用户/个人 | UserOutlined | UserOutline | 用户相关 |
|
||||
| 首页/主页 | HomeOutlined | HomeOutline | 首页导航 |
|
||||
| 返回/后退 | ArrowLeftOutlined | LeftOutline | 返回功能 |
|
||||
| 关闭/取消 | CloseOutlined | CloseOutline | 关闭功能 |
|
||||
| 确认/确定 | CheckOutlined | CheckOutline | 确认功能 |
|
||||
|
||||
### 状态指示映射
|
||||
| 状态需求 | PC端图标 | 移动端图标 | 说明 |
|
||||
|---------|---------|-----------|------|
|
||||
| 成功/完成 | CheckCircleOutlined | CheckCircleOutline | 成功状态 |
|
||||
| 错误/失败 | CloseCircleOutlined | CloseCircleOutline | 错误状态 |
|
||||
| 警告/注意 | ExclamationCircleOutlined | ExclamationCircleOutline | 警告状态 |
|
||||
| 信息/提示 | InfoCircleOutlined | InfoCircleOutline | 信息提示 |
|
||||
| 加载/等待 | LoadingOutlined | LoadingOutline | 加载状态 |
|
||||
| 时间/等待 | ClockCircleOutlined | ClockCircleOutline | 时间相关 |
|
||||
|
||||
### 方向导航映射
|
||||
| 方向需求 | PC端图标 | 移动端图标 | 说明 |
|
||||
|---------|---------|-----------|------|
|
||||
| 向上/上升 | UpOutlined | UpOutline | 向上方向 |
|
||||
| 向下/下降 | DownOutlined | DownOutline | 向下方向 |
|
||||
| 向左/后退 | LeftOutlined | LeftOutline | 向左方向 |
|
||||
| 向右/前进 | RightOutlined | RightOutline | 向右方向 |
|
||||
|
||||
### 业务功能映射
|
||||
| 业务需求 | PC端图标 | 移动端图标 | 说明 |
|
||||
|---------|---------|-----------|------|
|
||||
| 消息/通知 | MessageOutlined | MessageOutline | 消息功能 |
|
||||
| 日历/日期 | CalendarOutlined | CalendarOutline | 日历功能 |
|
||||
| 图片/照片 | PictureOutlined | PictureOutline | 图片功能 |
|
||||
| 文件/文档 | FileOutlined | FileOutline | 文件功能 |
|
||||
| 相机/拍照 | CameraOutlined | CameraOutline | 相机功能 |
|
||||
| 二维码 | QrcodeOutlined | QrCodeOutline | 二维码功能 |
|
||||
| 微信/社交 | WechatOutlined | WechatOutline | 微信功能 |
|
||||
| 设备/手机 | MobileOutlined | MobileOutline | 设备功能 |
|
||||
| 团队/群组 | TeamOutlined | TeamOutline | 团队功能 |
|
||||
| 订单/购物 | ShoppingOutlined | ShoppingOutline | 订单功能 |
|
||||
| 支付/钱包 | PayCircleOutlined | PayCircleOutline | 支付功能 |
|
||||
|
||||
## 特殊替换规则
|
||||
|
||||
### 移动端不存在的图标替换
|
||||
| 原需求 | 替换方案 | 说明 |
|
||||
|--------|----------|------|
|
||||
| RiseOutlined | UpOutline | 上升趋势 |
|
||||
| ThumbsUpOutlined | LikeOutline | 点赞功能 |
|
||||
| ShareAltOutlined | LinkOutline | 分享功能 |
|
||||
| BarChartOutlined | PieOutline | 图表功能 |
|
||||
| LineChartOutlined | PieOutline | 图表功能 |
|
||||
| UserAddOutlined | UserOutline | 用户添加 |
|
||||
| Progress | 自定义div | 进度条组件 |
|
||||
|
||||
### PC端不存在的图标替换
|
||||
| 原需求 | 替换方案 | 说明 |
|
||||
|--------|----------|------|
|
||||
| AntOutline | HomeOutlined | 蚂蚁图标 |
|
||||
| AppOutline | AppstoreOutlined | 应用图标 |
|
||||
|
||||
## AI代码生成示例
|
||||
|
||||
### 场景1: 移动端列表页面
|
||||
```typescript
|
||||
// AI应该生成的代码
|
||||
import {
|
||||
AddOutline, // 添加按钮
|
||||
EditSOutline, // 编辑按钮
|
||||
DeleteOutline, // 删除按钮
|
||||
CopyOutline, // 复制按钮
|
||||
SearchOutline, // 搜索框
|
||||
RefreshOutline, // 刷新按钮
|
||||
UserOutline, // 用户信息
|
||||
CalendarOutline, // 时间信息
|
||||
UpOutline, // 上升趋势（替换RiseOutlined）
|
||||
} from 'antd-mobile-icons';
|
||||
|
||||
// 使用示例
|
||||
<Button>
|
||||
<AddOutline /> 新建
|
||||
</Button>
|
||||
<Button>
|
||||
<EditSOutline /> 编辑
|
||||
</Button>
|
||||
<Button color="danger">
|
||||
<DeleteOutline /> 删除
|
||||
</Button>
|
||||
```
|
||||
|
||||
### 场景2: PC端管理页面
|
||||
```typescript
|
||||
// AI应该生成的代码
|
||||
import {
|
||||
PlusOutlined, // 添加按钮
|
||||
EditOutlined, // 编辑按钮
|
||||
DeleteOutlined, // 删除按钮
|
||||
CopyOutlined, // 复制按钮
|
||||
SearchOutlined, // 搜索框
|
||||
ReloadOutlined, // 刷新按钮
|
||||
UserOutlined, // 用户信息
|
||||
CalendarOutlined, // 时间信息
|
||||
RiseOutlined, // 上升趋势（PC端存在）
|
||||
} from '@ant-design/icons';
|
||||
|
||||
// 使用示例
|
||||
<Button icon={<PlusOutlined />}>新建</Button>
|
||||
<Button icon={<EditOutlined />}>编辑</Button>
|
||||
<Button icon={<DeleteOutlined />} danger>删除</Button>
|
||||
```
|
||||
|
||||
## 错误检测和修正
|
||||
|
||||
### 常见错误模式
|
||||
1. **混用图标包**: 同时导入PC端和移动端图标
|
||||
2. **使用不存在的图标**: 在移动端使用PC端特有的图标
|
||||
3. **命名错误**: 图标名称大小写错误
|
||||
4. **导入路径错误**: 使用错误的包名
|
||||
|
||||
### 修正策略
|
||||
1. **统一图标包**: 根据项目类型选择单一图标包
|
||||
2. **查找替代**: 使用对照表查找替代图标
|
||||
3. **验证存在**: 确保图标在目标包中存在
|
||||
4. **测试验证**: 在代码中测试图标是否正常显示
|
||||
|
||||
## AI使用检查清单
|
||||
|
||||
### 代码生成前
|
||||
- [ ] 确认项目类型（PC端/移动端）
|
||||
- [ ] 选择对应的图标包
|
||||
- [ ] 根据功能需求选择合适图标
|
||||
- [ ] 检查图标是否存在
|
||||
|
||||
### 代码生成中
|
||||
- [ ] 使用正确的导入语法
|
||||
- [ ] 图标名称大小写正确
|
||||
- [ ] 避免混用不同包的图标
|
||||
- [ ] 为不存在的图标提供替代方案
|
||||
|
||||
### 代码生成后
|
||||
- [ ] 验证图标导入正确
|
||||
- [ ] 检查图标使用语法
|
||||
- [ ] 确保样式设置合理
|
||||
- [ ] 提供使用示例
|
||||
|
||||
## 更新和维护
|
||||
|
||||
- 定期更新图标对照表
|
||||
- 记录新发现的图标差异
|
||||
- 更新替换规则
|
||||
- 优化AI使用流程
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **优先使用语义化图标**: 选择最能表达功能的图标
|
||||
2. **保持一致性**: 在同一项目中保持图标风格一致
|
||||
3. **考虑可访问性**: 为图标添加适当的aria-label
|
||||
4. **性能优化**: 按需导入图标，避免全量导入
|
||||
5. **版本兼容**: 注意图标包版本与UI框架版本的兼容性
|
||||
@@ -1,205 +0,0 @@
|
||||
# 详细图标对照表
|
||||
|
||||
## 基础图标对照
|
||||
|
||||
### 导航类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 首页 | HomeOutlined | HomeOutline | ✅ |
|
||||
| 返回 | ArrowLeftOutlined | LeftOutline | ✅ |
|
||||
| 菜单 | MenuOutlined | MenuOutline | ✅ |
|
||||
| 设置 | SettingOutlined | SettingOutline | ✅ |
|
||||
| 用户 | UserOutlined | UserOutline | ✅ |
|
||||
| 个人中心 | UserOutlined | UserOutline | ✅ |
|
||||
|
||||
### 操作类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 添加 | PlusOutlined | AddOutline | ✅ |
|
||||
| 编辑 | EditOutlined | EditSOutline | ✅ |
|
||||
| 删除 | DeleteOutlined | DeleteOutline | ✅ |
|
||||
| 复制 | CopyOutlined | CopyOutline | ✅ |
|
||||
| 保存 | SaveOutlined | SaveOutline | ✅ |
|
||||
| 刷新 | ReloadOutlined | RefreshOutline | ✅ |
|
||||
| 搜索 | SearchOutlined | SearchOutline | ✅ |
|
||||
| 关闭 | CloseOutlined | CloseOutline | ✅ |
|
||||
| 确认 | CheckOutlined | CheckOutline | ✅ |
|
||||
| 取消 | CloseOutlined | CloseOutline | ✅ |
|
||||
|
||||
### 状态类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 成功 | CheckCircleOutlined | CheckCircleOutline | ✅ |
|
||||
| 错误 | CloseCircleOutlined | CloseCircleOutline | ✅ |
|
||||
| 警告 | ExclamationCircleOutlined | ExclamationCircleOutline | ✅ |
|
||||
| 信息 | InfoCircleOutlined | InfoCircleOutline | ✅ |
|
||||
| 加载 | LoadingOutlined | LoadingOutline | ✅ |
|
||||
| 等待 | ClockCircleOutlined | ClockCircleOutline | ✅ |
|
||||
|
||||
### 方向类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 向上 | UpOutlined | UpOutline | ✅ |
|
||||
| 向下 | DownOutlined | DownOutline | ✅ |
|
||||
| 向左 | LeftOutlined | LeftOutline | ✅ |
|
||||
| 向右 | RightOutlined | RightOutline | ✅ |
|
||||
| 向上圆形 | UpCircleOutlined | UpCircleOutline | ✅ |
|
||||
| 向下圆形 | DownCircleOutlined | DownCircleOutline | ✅ |
|
||||
|
||||
### 通信类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 消息 | MessageOutlined | MessageOutline | ✅ |
|
||||
| 邮件 | MailOutlined | MailOutline | ✅ |
|
||||
| 电话 | PhoneOutlined | PhoneOutline | ✅ |
|
||||
| 视频 | VideoCameraOutlined | VideoCameraOutline | ✅ |
|
||||
| 语音 | AudioOutlined | AudioOutline | ✅ |
|
||||
|
||||
### 媒体类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 图片 | PictureOutlined | PictureOutline | ✅ |
|
||||
| 文件 | FileOutlined | FileOutline | ✅ |
|
||||
| 文件夹 | FolderOutlined | FolderOutline | ✅ |
|
||||
| 相机 | CameraOutlined | CameraOutline | ✅ |
|
||||
| 二维码 | QrcodeOutlined | QrCodeOutline | ✅ |
|
||||
|
||||
### 时间类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 日历 | CalendarOutlined | CalendarOutline | ✅ |
|
||||
| 时钟 | ClockCircleOutlined | ClockCircleOutline | ✅ |
|
||||
| 历史 | HistoryOutlined | HistoryOutline | ✅ |
|
||||
|
||||
### 数据类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 统计 | BarChartOutlined | BarChartOutline | ✅ |
|
||||
| 饼图 | PieChartOutlined | PieChartOutline | ✅ |
|
||||
| 折线图 | LineChartOutlined | LineChartOutline | ✅ |
|
||||
| 表格 | TableOutlined | TableOutline | ✅ |
|
||||
| 列表 | UnorderedListOutlined | UnorderedListOutline | ✅ |
|
||||
|
||||
## 特殊图标对照
|
||||
|
||||
### 业务相关
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 设备 | MobileOutlined | MobileOutline | ✅ |
|
||||
| 微信 | WechatOutlined | WechatOutline | ✅ |
|
||||
| 群组 | TeamOutlined | TeamOutline | ✅ |
|
||||
| 客户 | UserAddOutlined | UserAddOutline | ❌ |
|
||||
| 订单 | ShoppingOutlined | ShoppingOutline | ✅ |
|
||||
| 支付 | PayCircleOutlined | PayCircleOutline | ✅ |
|
||||
|
||||
### 工具类
|
||||
| 功能 | PC端 | 移动端 | 状态 |
|
||||
|------|------|--------|------|
|
||||
| 工具 | ToolOutlined | ToolOutline | ✅ |
|
||||
| 配置 | SettingOutlined | SettingOutline | ✅ |
|
||||
| 帮助 | QuestionCircleOutlined | QuestionCircleOutline | ✅ |
|
||||
| 反馈 | MessageOutlined | MessageOutline | ✅ |
|
||||
| 分享 | ShareAltOutlined | ShareOutline | ❌ |
|
||||
|
||||
## 不存在的图标替换方案
|
||||
|
||||
### PC端存在但移动端不存在的图标
|
||||
| PC端图标 | 推荐替换 | 说明 |
|
||||
|----------|----------|------|
|
||||
| UserAddOutlined | UserOutline | 用户添加功能 |
|
||||
| ShareAltOutlined | LinkOutline | 分享功能 |
|
||||
| RiseOutlined | UpOutline | 上升趋势 |
|
||||
| ThumbsUpOutlined | LikeOutline | 点赞功能 |
|
||||
| BarChartOutlined | PieOutline | 图表功能 |
|
||||
| LineChartOutlined | PieOutline | 图表功能 |
|
||||
|
||||
### 移动端存在但PC端不存在的图标
|
||||
| 移动端图标 | 推荐替换 | 说明 |
|
||||
|------------|----------|------|
|
||||
| AntOutline | HomeOutlined | 蚂蚁图标 |
|
||||
| AppOutline | AppstoreOutlined | 应用图标 |
|
||||
|
||||
## 使用规范
|
||||
|
||||
### 1. 导入规范
|
||||
```typescript
|
||||
// PC端项目
|
||||
import {
|
||||
HomeOutlined,
|
||||
UserOutlined,
|
||||
SettingOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
// 移动端项目
|
||||
import {
|
||||
HomeOutline,
|
||||
UserOutline,
|
||||
SettingOutline,
|
||||
} from 'antd-mobile-icons';
|
||||
```
|
||||
|
||||
### 2. 命名规范
|
||||
- PC端：使用 `Outlined` 后缀
|
||||
- 移动端：使用 `Outline` 后缀
|
||||
- 保持语义化命名
|
||||
|
||||
### 3. 使用建议
|
||||
- 优先使用语义明确的图标
|
||||
- 保持图标风格一致性
|
||||
- 考虑图标在不同尺寸下的清晰度
|
||||
- 为图标添加适当的aria-label
|
||||
|
||||
### 4. 错误处理
|
||||
当图标不存在时：
|
||||
1. 查找语义相近的图标
|
||||
2. 使用通用图标（如QuestionOutlined）
|
||||
3. 考虑使用文字替代
|
||||
4. 创建自定义图标组件
|
||||
|
||||
## 项目中的实际应用
|
||||
|
||||
### 场景获客模块使用的图标
|
||||
```typescript
|
||||
// 移动端项目中的图标使用
|
||||
import {
|
||||
AddOutline, // 添加
|
||||
UpOutline, // 上升趋势（替换RiseOutline）
|
||||
UserOutline, // 用户
|
||||
CalendarOutline, // 日历
|
||||
CopyOutline, // 复制
|
||||
DeleteOutline, // 删除
|
||||
EditSOutline, // 编辑
|
||||
SettingOutline, // 设置
|
||||
SearchOutline, // 搜索
|
||||
RefreshOutline, // 刷新
|
||||
QrCodeOutline, // 二维码
|
||||
} from 'antd-mobile-icons';
|
||||
```
|
||||
|
||||
### 工作台模块使用的图标
|
||||
```typescript
|
||||
// 移动端项目中的图标使用
|
||||
import {
|
||||
LikeOutline, // 点赞（替换ThumbsUpOutline）
|
||||
LinkOutline, // 链接（替换ShareOutline）
|
||||
PieOutline, // 饼图（替换BarChartOutline/LineChartOutline）
|
||||
UserOutline, // 用户
|
||||
TeamOutline, // 团队
|
||||
MessageOutline, // 消息
|
||||
} from 'antd-mobile-icons';
|
||||
```
|
||||
|
||||
## 更新和维护
|
||||
|
||||
1. **定期检查**: 定期检查新版本中新增的图标
|
||||
2. **文档更新**: 及时更新图标对照表
|
||||
3. **团队协作**: 团队成员共享图标使用规范
|
||||
4. **代码审查**: 在代码审查中检查图标使用是否正确
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **包版本**: 确保图标包版本与UI框架版本兼容
|
||||
2. **按需导入**: 避免全量导入图标，影响打包体积
|
||||
3. **样式覆盖**: 可以通过CSS自定义图标样式
|
||||
4. **无障碍**: 为图标添加适当的无障碍属性
|
||||
5. **性能**: 大量使用图标时注意性能优化
|
||||
@@ -1,230 +0,0 @@
|
||||
# PC端与移动端图标对照文档
|
||||
|
||||
## 概述
|
||||
|
||||
本文档记录了PC端（@ant-design/icons）和移动端（antd-mobile-icons）的图标名称对照，以及正确的导入方式。
|
||||
|
||||
## 导入方式
|
||||
|
||||
### PC端图标 (@ant-design/icons)
|
||||
```typescript
|
||||
import {
|
||||
HomeOutlined,
|
||||
UserOutlined,
|
||||
SettingOutlined,
|
||||
// ... 其他图标
|
||||
} from '@ant-design/icons';
|
||||
```
|
||||
|
||||
### 移动端图标 (antd-mobile-icons)
|
||||
```typescript
|
||||
import {
|
||||
AntOutline,
|
||||
ArrowDownCircleOutline,
|
||||
UserOutline,
|
||||
// ... 其他图标
|
||||
} from 'antd-mobile-icons';
|
||||
```
|
||||
|
||||
## 图标对照表
|
||||
|
||||
### 常用图标对照
|
||||
|
||||
| 功能描述 | PC端图标 | 移动端图标 | 备注 |
|
||||
|---------|---------|-----------|------|
|
||||
| 首页 | HomeOutlined | HomeOutline | 完全对应 |
|
||||
| 用户 | UserOutlined | UserOutline | 完全对应 |
|
||||
| 设置 | SettingOutlined | SettingOutline | 完全对应 |
|
||||
| 搜索 | SearchOutlined | SearchOutline | 完全对应 |
|
||||
| 添加 | PlusOutlined | AddOutline | 完全对应 |
|
||||
| 编辑 | EditOutlined | EditSOutline | 移动端略有不同 |
|
||||
| 删除 | DeleteOutlined | DeleteOutline | 完全对应 |
|
||||
| 复制 | CopyOutlined | CopyOutline | 完全对应 |
|
||||
| 刷新 | ReloadOutlined | RefreshOutline | 完全对应 |
|
||||
| 二维码 | QrcodeOutlined | QrCodeOutline | 完全对应 |
|
||||
| 日历 | CalendarOutlined | CalendarOutline | 完全对应 |
|
||||
| 时钟 | ClockCircleOutlined | ClockCircleOutline | 完全对应 |
|
||||
| 箭头向上 | UpOutlined | UpOutline | 完全对应 |
|
||||
| 箭头向下 | DownOutlined | DownOutline | 完全对应 |
|
||||
| 箭头向左 | LeftOutlined | LeftOutline | 完全对应 |
|
||||
| 箭头向右 | RightOutlined | RightOutline | 完全对应 |
|
||||
| 返回 | ArrowLeftOutlined | LeftOutline | 移动端使用LeftOutline |
|
||||
| 关闭 | CloseOutlined | CloseOutline | 完全对应 |
|
||||
| 检查 | CheckOutlined | CheckOutline | 完全对应 |
|
||||
| 警告 | ExclamationCircleOutlined | ExclamationCircleOutline | 完全对应 |
|
||||
| 信息 | InfoCircleOutlined | InfoCircleOutline | 完全对应 |
|
||||
| 成功 | CheckCircleOutlined | CheckCircleOutline | 完全对应 |
|
||||
| 错误 | CloseCircleOutlined | CloseCircleOutline | 完全对应 |
|
||||
|
||||
### 方向性图标
|
||||
|
||||
| 功能描述 | PC端图标 | 移动端图标 |
|
||||
|---------|---------|-----------|
|
||||
| 向上 | UpOutlined | UpOutline |
|
||||
| 向下 | DownOutlined | DownOutline |
|
||||
| 向左 | LeftOutlined | LeftOutline |
|
||||
| 向右 | RightOutlined | RightOutline |
|
||||
| 向上圆形 | UpCircleOutlined | UpCircleOutline |
|
||||
| 向下圆形 | DownCircleOutlined | DownCircleOutline |
|
||||
| 向左圆形 | LeftCircleOutlined | LeftCircleOutline |
|
||||
| 向右圆形 | RightCircleOutlined | RightCircleOutline |
|
||||
|
||||
### 编辑类图标
|
||||
|
||||
| 功能描述 | PC端图标 | 移动端图标 |
|
||||
|---------|---------|-----------|
|
||||
| 编辑 | EditOutlined | EditSOutline |
|
||||
| 删除 | DeleteOutlined | DeleteOutline |
|
||||
| 复制 | CopyOutlined | CopyOutline |
|
||||
| 剪切 | ScissorOutlined | ScissorOutline |
|
||||
| 撤销 | UndoOutlined | UndoOutline |
|
||||
| 重做 | RedoOutlined | RedoOutline |
|
||||
| 保存 | SaveOutlined | SaveOutline |
|
||||
|
||||
### 通信类图标
|
||||
|
||||
| 功能描述 | PC端图标 | 移动端图标 |
|
||||
|---------|---------|-----------|
|
||||
| 消息 | MessageOutlined | MessageOutline |
|
||||
| 邮件 | MailOutlined | MailOutline |
|
||||
| 电话 | PhoneOutlined | PhoneOutline |
|
||||
| 视频通话 | VideoCameraOutlined | VideoCameraOutline |
|
||||
| 语音 | AudioOutlined | AudioOutline |
|
||||
|
||||
### 媒体类图标
|
||||
|
||||
| 功能描述 | PC端图标 | 移动端图标 |
|
||||
|---------|---------|-----------|
|
||||
| 图片 | PictureOutlined | PictureOutline |
|
||||
| 视频 | VideoCameraOutlined | VideoCameraOutline |
|
||||
| 音频 | AudioOutlined | AudioOutline |
|
||||
| 文件 | FileOutlined | FileOutline |
|
||||
| 文件夹 | FolderOutlined | FolderOutline |
|
||||
| 相机 | CameraOutlined | CameraOutline |
|
||||
|
||||
### 导航类图标
|
||||
|
||||
| 功能描述 | PC端图标 | 移动端图标 |
|
||||
|---------|---------|-----------|
|
||||
| 菜单 | MenuOutlined | MenuOutline |
|
||||
| 汉堡菜单 | MenuFoldOutlined | MenuOutline |
|
||||
| 展开菜单 | MenuUnfoldOutlined | MenuOutline |
|
||||
| 面包屑 | BreadcrumbOutlined | BreadcrumbOutline |
|
||||
| 分页 | PaginationOutlined | PaginationOutline |
|
||||
|
||||
### 数据展示类图标
|
||||
|
||||
| 功能描述 | PC端图标 | 移动端图标 |
|
||||
|---------|---------|-----------|
|
||||
| 表格 | TableOutlined | TableOutline |
|
||||
| 列表 | UnorderedListOutlined | UnorderedListOutline |
|
||||
| 卡片 | CreditCardOutlined | CreditCardOutline |
|
||||
| 统计 | BarChartOutlined | BarChartOutline |
|
||||
| 饼图 | PieChartOutlined | PieChartOutline |
|
||||
| 折线图 | LineChartOutlined | LineChartOutline |
|
||||
| 仪表盘 | DashboardOutlined | DashboardOutline |
|
||||
|
||||
### 反馈类图标
|
||||
|
||||
| 功能描述 | PC端图标 | 移动端图标 |
|
||||
|---------|---------|-----------|
|
||||
| 成功 | CheckCircleOutlined | CheckCircleOutline |
|
||||
| 错误 | CloseCircleOutlined | CloseCircleOutline |
|
||||
| 警告 | ExclamationCircleOutlined | ExclamationCircleOutline |
|
||||
| 信息 | InfoCircleOutlined | InfoCircleOutline |
|
||||
| 加载 | LoadingOutlined | LoadingOutline |
|
||||
| 等待 | ClockCircleOutlined | ClockCircleOutline |
|
||||
|
||||
## 使用建议
|
||||
|
||||
### 1. 项目类型判断
|
||||
- **PC端项目**: 使用 `@ant-design/icons`
|
||||
- **移动端项目**: 使用 `antd-mobile-icons`
|
||||
|
||||
### 2. 图标选择原则
|
||||
- 优先选择语义化图标
|
||||
- 保持图标风格一致性
|
||||
- 考虑图标在不同尺寸下的清晰度
|
||||
|
||||
### 3. 常见错误避免
|
||||
- 不要混用PC端和移动端图标
|
||||
- 注意图标名称的大小写
|
||||
- 确保图标在对应包中存在
|
||||
|
||||
### 4. 图标替换策略
|
||||
当某个图标在目标包中不存在时：
|
||||
1. 查找语义相近的图标
|
||||
2. 使用通用图标（如QuestionOutlined）
|
||||
3. 考虑使用文字替代
|
||||
4. 创建自定义图标组件
|
||||
|
||||
## 实际项目中的使用示例
|
||||
|
||||
### PC端项目示例
|
||||
```typescript
|
||||
import {
|
||||
HomeOutlined,
|
||||
UserOutlined,
|
||||
SettingOutlined,
|
||||
SearchOutlined,
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
CopyOutlined,
|
||||
ReloadOutlined,
|
||||
QrcodeOutlined,
|
||||
CalendarOutlined,
|
||||
ClockCircleOutlined,
|
||||
UpOutlined,
|
||||
DownOutlined,
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
CloseOutlined,
|
||||
CheckOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
InfoCircleOutlined,
|
||||
CheckCircleOutlined,
|
||||
CloseCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
```
|
||||
|
||||
### 移动端项目示例
|
||||
```typescript
|
||||
import {
|
||||
HomeOutline,
|
||||
UserOutline,
|
||||
SettingOutline,
|
||||
SearchOutline,
|
||||
AddOutline,
|
||||
EditSOutline,
|
||||
DeleteOutline,
|
||||
CopyOutline,
|
||||
RefreshOutline,
|
||||
QrCodeOutline,
|
||||
CalendarOutline,
|
||||
ClockCircleOutline,
|
||||
UpOutline,
|
||||
DownOutline,
|
||||
LeftOutline,
|
||||
RightOutline,
|
||||
CloseOutline,
|
||||
CheckOutline,
|
||||
ExclamationCircleOutline,
|
||||
InfoCircleOutline,
|
||||
CheckCircleOutline,
|
||||
CloseCircleOutline,
|
||||
} from 'antd-mobile-icons';
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **包依赖**: 确保项目中已安装对应的图标包
|
||||
2. **版本兼容**: 注意图标包版本与UI框架版本的兼容性
|
||||
3. **性能考虑**: 按需导入图标，避免全量导入
|
||||
4. **样式覆盖**: 可以通过CSS自定义图标颜色和大小
|
||||
5. **无障碍**: 为图标添加适当的aria-label属性
|
||||
|
||||
## 更新记录
|
||||
|
||||
- 2024-01-XX: 初始版本，包含常用图标对照
|
||||
- 后续根据实际使用情况持续更新
|
||||
@@ -1,271 +0,0 @@
|
||||
# 图标快速参考表
|
||||
|
||||
## 快速查找
|
||||
|
||||
### 🔍 按功能查找
|
||||
|
||||
| 功能 | PC端 | 移动端 | 导入方式 |
|
||||
|------|------|--------|----------|
|
||||
| **添加** | PlusOutlined | AddOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **编辑** | EditOutlined | EditSOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **删除** | DeleteOutlined | DeleteOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **复制** | CopyOutlined | CopyOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **搜索** | SearchOutlined | SearchOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **刷新** | ReloadOutlined | RefreshOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **设置** | SettingOutlined | SettingOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **用户** | UserOutlined | UserOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **首页** | HomeOutlined | HomeOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **返回** | ArrowLeftOutlined | LeftOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **关闭** | CloseOutlined | CloseOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **确认** | CheckOutlined | CheckOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **成功** | CheckCircleOutlined | CheckCircleOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **错误** | CloseCircleOutlined | CloseCircleOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **警告** | ExclamationCircleOutlined | ExclamationCircleOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **信息** | InfoCircleOutlined | InfoCircleOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **加载** | LoadingOutlined | LoadingOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **向上** | UpOutlined | UpOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **向下** | DownOutlined | DownOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **向左** | LeftOutlined | LeftOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **向右** | RightOutlined | RightOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **消息** | MessageOutlined | MessageOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **电话** | PhoneOutlined | PhoneOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **日历** | CalendarOutlined | CalendarOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **时钟** | ClockCircleOutlined | ClockCircleOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **图片** | PictureOutlined | PictureOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **文件** | FileOutlined | FileOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **相机** | CameraOutlined | CameraOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **二维码** | QrcodeOutlined | QrCodeOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **微信** | WechatOutlined | WechatOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **设备** | MobileOutlined | MobileOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **团队** | TeamOutlined | TeamOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **订单** | ShoppingOutlined | ShoppingOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
| **支付** | PayCircleOutlined | PayCircleOutline | `@ant-design/icons` / `antd-mobile-icons` |
|
||||
|
||||
### 🔄 常见替换
|
||||
|
||||
| 原图标 | 替换为 | 说明 |
|
||||
|--------|--------|------|
|
||||
| RiseOutlined | UpOutline | 上升趋势 |
|
||||
| ThumbsUpOutlined | LikeOutline | 点赞功能 |
|
||||
| ShareAltOutlined | LinkOutline | 分享功能 |
|
||||
| BarChartOutlined | PieOutline | 图表功能 |
|
||||
| LineChartOutlined | PieOutline | 图表功能 |
|
||||
| UserAddOutlined | UserOutline | 用户添加 |
|
||||
| SettingOutline | SettingOutline | 设置（移动端） |
|
||||
|
||||
## 导入模板
|
||||
|
||||
### PC端项目模板
|
||||
```typescript
|
||||
import {
|
||||
HomeOutlined,
|
||||
UserOutlined,
|
||||
SettingOutlined,
|
||||
SearchOutlined,
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
CopyOutlined,
|
||||
ReloadOutlined,
|
||||
CloseOutlined,
|
||||
CheckOutlined,
|
||||
UpOutlined,
|
||||
DownOutlined,
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
MessageOutlined,
|
||||
CalendarOutlined,
|
||||
ClockCircleOutlined,
|
||||
PictureOutlined,
|
||||
FileOutlined,
|
||||
CameraOutlined,
|
||||
QrcodeOutlined,
|
||||
WechatOutlined,
|
||||
MobileOutlined,
|
||||
TeamOutlined,
|
||||
ShoppingOutlined,
|
||||
PayCircleOutlined,
|
||||
CheckCircleOutlined,
|
||||
CloseCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
InfoCircleOutlined,
|
||||
LoadingOutlined,
|
||||
} from '@ant-design/icons';
|
||||
```
|
||||
|
||||
### 移动端项目模板
|
||||
```typescript
|
||||
import {
|
||||
HomeOutline,
|
||||
UserOutline,
|
||||
SettingOutline,
|
||||
SearchOutline,
|
||||
AddOutline,
|
||||
EditSOutline,
|
||||
DeleteOutline,
|
||||
CopyOutline,
|
||||
RefreshOutline,
|
||||
CloseOutline,
|
||||
CheckOutline,
|
||||
UpOutline,
|
||||
DownOutline,
|
||||
LeftOutline,
|
||||
RightOutline,
|
||||
MessageOutline,
|
||||
CalendarOutline,
|
||||
ClockCircleOutline,
|
||||
PictureOutline,
|
||||
FileOutline,
|
||||
CameraOutline,
|
||||
QrCodeOutline,
|
||||
WechatOutline,
|
||||
MobileOutline,
|
||||
TeamOutline,
|
||||
ShoppingOutline,
|
||||
PayCircleOutline,
|
||||
CheckCircleOutline,
|
||||
CloseCircleOutline,
|
||||
ExclamationCircleOutline,
|
||||
InfoCircleOutline,
|
||||
LoadingOutline,
|
||||
} from 'antd-mobile-icons';
|
||||
```
|
||||
|
||||
## 使用示例
|
||||
|
||||
### 基础使用
|
||||
```typescript
|
||||
// PC端
|
||||
import { HomeOutlined, UserOutlined } from '@ant-design/icons';
|
||||
|
||||
<HomeOutlined style={{ fontSize: 16, color: '#1890ff' }} />
|
||||
<UserOutlined style={{ fontSize: 16, color: '#52c41a' }} />
|
||||
|
||||
// 移动端
|
||||
import { HomeOutline, UserOutline } from 'antd-mobile-icons';
|
||||
|
||||
<HomeOutline style={{ fontSize: 16, color: '#1890ff' }} />
|
||||
<UserOutline style={{ fontSize: 16, color: '#52c41a' }} />
|
||||
```
|
||||
|
||||
### 按钮中使用
|
||||
```typescript
|
||||
// PC端
|
||||
import { PlusOutlined, EditOutlined } from '@ant-design/icons';
|
||||
|
||||
<Button icon={<PlusOutlined />}>添加</Button>
|
||||
<Button icon={<EditOutlined />}>编辑</Button>
|
||||
|
||||
// 移动端
|
||||
import { AddOutline, EditSOutline } from 'antd-mobile-icons';
|
||||
|
||||
<Button>
|
||||
<AddOutline /> 添加
|
||||
</Button>
|
||||
<Button>
|
||||
<EditSOutline /> 编辑
|
||||
</Button>
|
||||
```
|
||||
|
||||
### 列表中使用
|
||||
```typescript
|
||||
// PC端
|
||||
import { DeleteOutlined, CopyOutlined } from '@ant-design/icons';
|
||||
|
||||
<Button icon={<DeleteOutlined />} danger>删除</Button>
|
||||
<Button icon={<CopyOutlined />}>复制</Button>
|
||||
|
||||
// 移动端
|
||||
import { DeleteOutline, CopyOutline } from 'antd-mobile-icons';
|
||||
|
||||
<Button color="danger">
|
||||
<DeleteOutline /> 删除
|
||||
</Button>
|
||||
<Button>
|
||||
<CopyOutline /> 复制
|
||||
</Button>
|
||||
```
|
||||
|
||||
## 常见错误
|
||||
|
||||
### ❌ 错误示例
|
||||
```typescript
|
||||
// 错误：混用PC端和移动端图标
|
||||
import { HomeOutlined } from '@ant-design/icons'; // PC端
|
||||
import { UserOutline } from 'antd-mobile-icons'; // 移动端
|
||||
|
||||
// 错误：使用不存在的图标
|
||||
import { RiseOutlined } from 'antd-mobile-icons'; // 不存在
|
||||
import { UserAddOutline } from 'antd-mobile-icons'; // 不存在
|
||||
```
|
||||
|
||||
### ✅ 正确示例
|
||||
```typescript
|
||||
// 正确：统一使用移动端图标
|
||||
import {
|
||||
HomeOutline,
|
||||
UserOutline,
|
||||
UpOutline, // 替换RiseOutlined
|
||||
UserOutline // 替换UserAddOutline
|
||||
} from 'antd-mobile-icons';
|
||||
|
||||
// 正确：统一使用PC端图标
|
||||
import {
|
||||
HomeOutlined,
|
||||
UserOutlined,
|
||||
RiseOutlined, // PC端存在
|
||||
UserAddOutlined // PC端存在
|
||||
} from '@ant-design/icons';
|
||||
```
|
||||
|
||||
## 快速检查清单
|
||||
|
||||
### 开发前检查
|
||||
- [ ] 确认项目类型（PC端/移动端）
|
||||
- [ ] 选择对应的图标包
|
||||
- [ ] 检查图标是否存在
|
||||
- [ ] 准备替换方案
|
||||
|
||||
### 开发中检查
|
||||
- [ ] 使用正确的导入方式
|
||||
- [ ] 图标名称大小写正确
|
||||
- [ ] 避免混用不同包的图标
|
||||
- [ ] 为图标添加适当的样式
|
||||
|
||||
### 开发后检查
|
||||
- [ ] 图标显示正常
|
||||
- [ ] 样式符合设计要求
|
||||
- [ ] 无障碍属性完整
|
||||
- [ ] 性能影响最小
|
||||
|
||||
## 紧急替换方案
|
||||
|
||||
当遇到图标不存在时，使用以下通用图标：
|
||||
|
||||
```typescript
|
||||
// 移动端通用图标
|
||||
import {
|
||||
QuestionCircleOutline, // 通用问号
|
||||
AppOutline, // 通用应用
|
||||
ToolOutline, // 通用工具
|
||||
SettingOutline, // 通用设置
|
||||
UserOutline, // 通用用户
|
||||
} from 'antd-mobile-icons';
|
||||
|
||||
// PC端通用图标
|
||||
import {
|
||||
QuestionCircleOutlined, // 通用问号
|
||||
AppstoreOutlined, // 通用应用
|
||||
ToolOutlined, // 通用工具
|
||||
SettingOutlined, // 通用设置
|
||||
UserOutlined, // 通用用户
|
||||
} from '@ant-design/icons';
|
||||
```
|
||||
|
||||
## 更新日志
|
||||
|
||||
- 2024-01-XX: 初始版本
|
||||
- 添加常用图标对照
|
||||
- 添加错误示例和正确示例
|
||||
- 添加快速检查清单
|
||||
- 添加紧急替换方案
|
||||
@@ -1,13 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Nkebao Base</title>
|
||||
<style>html{font-size:16px;}</style>
|
||||
<style>
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
<!-- 引入 uni-app web-view SDK（必须） -->
|
||||
<script type="text/javascript" src="./websdk.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
20
nkebao/package-lock.json
generated
20
nkebao/package-lock.json
generated
@@ -10,6 +10,7 @@
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.6.1",
|
||||
"@capacitor/android": "^7.4.2",
|
||||
"antd": "^5.13.1",
|
||||
"antd-mobile": "^5.39.1",
|
||||
"axios": "^1.6.7",
|
||||
@@ -444,6 +445,25 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@capacitor/android": {
|
||||
"version": "7.4.2",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/android/-/android-7.4.2.tgz",
|
||||
"integrity": "sha512-FZ7M9NwFkljR7EP5eXiE32mAIfZNcYw2CzRMCG3rQu0u0ZaIoeOeq5/oK4YcDnGpNmu8jpngKJqZ+9OiSQSwDg==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@capacitor/core": "^7.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@capacitor/core": {
|
||||
"version": "7.4.2",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/core/-/core-7.4.2.tgz",
|
||||
"integrity": "sha512-akCf9A1FUR8AWTtmgGjHEq6LmGsjA2U7igaJ9PxiCBfyxKqlDbuGHrlNdpvHEjV5tUPH3KYtkze6gtFcNKPU9A==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/hash": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
|
||||
|
||||
BIN
nkebao/public/logo.png
Normal file
BIN
nkebao/public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 488 KiB |
30
nkebao/public/manifest.json
Normal file
30
nkebao/public/manifest.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "Cunkebao",
|
||||
"short_name": "Cunkebao",
|
||||
"description": "Cunkebao Mobile App",
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"display": "standalone",
|
||||
"orientation": "portrait",
|
||||
"scope": "/",
|
||||
"start_url": "/",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "logo.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
}
|
||||
]
|
||||
}
|
||||
308
nkebao/public/websdk.js
Normal file
308
nkebao/public/websdk.js
Normal file
@@ -0,0 +1,308 @@
|
||||
!(function (e, n) {
|
||||
"object" == typeof exports && "undefined" != typeof module
|
||||
? (module.exports = n())
|
||||
: "function" == typeof define && define.amd
|
||||
? define(n)
|
||||
: ((e = e || self).uni = n());
|
||||
})(this, function () {
|
||||
"use strict";
|
||||
try {
|
||||
var e = {};
|
||||
(Object.defineProperty(e, "passive", {
|
||||
get: function () {
|
||||
!0;
|
||||
},
|
||||
}),
|
||||
window.addEventListener("test-passive", null, e));
|
||||
} catch (e) {}
|
||||
var n = Object.prototype.hasOwnProperty;
|
||||
function i(e, i) {
|
||||
return n.call(e, i);
|
||||
}
|
||||
var t = [];
|
||||
function o() {
|
||||
return window.__dcloud_weex_postMessage || window.__dcloud_weex_;
|
||||
}
|
||||
function a() {
|
||||
return window.__uniapp_x_postMessage || window.__uniapp_x_;
|
||||
}
|
||||
var r = function (e, n) {
|
||||
var i = { options: { timestamp: +new Date() }, name: e, arg: n };
|
||||
if (a()) {
|
||||
if ("postMessage" === e) {
|
||||
var r = { data: n };
|
||||
return window.__uniapp_x_postMessage
|
||||
? window.__uniapp_x_postMessage(r)
|
||||
: window.__uniapp_x_.postMessage(JSON.stringify(r));
|
||||
}
|
||||
var d = {
|
||||
type: "WEB_INVOKE_APPSERVICE",
|
||||
args: { data: i, webviewIds: t },
|
||||
};
|
||||
window.__uniapp_x_postMessage
|
||||
? window.__uniapp_x_postMessageToService(d)
|
||||
: window.__uniapp_x_.postMessageToService(JSON.stringify(d));
|
||||
} else if (o()) {
|
||||
if ("postMessage" === e) {
|
||||
var s = { data: [n] };
|
||||
return window.__dcloud_weex_postMessage
|
||||
? window.__dcloud_weex_postMessage(s)
|
||||
: window.__dcloud_weex_.postMessage(JSON.stringify(s));
|
||||
}
|
||||
var w = {
|
||||
type: "WEB_INVOKE_APPSERVICE",
|
||||
args: { data: i, webviewIds: t },
|
||||
};
|
||||
window.__dcloud_weex_postMessage
|
||||
? window.__dcloud_weex_postMessageToService(w)
|
||||
: window.__dcloud_weex_.postMessageToService(JSON.stringify(w));
|
||||
} else {
|
||||
if (!window.plus)
|
||||
return window.parent.postMessage(
|
||||
{ type: "WEB_INVOKE_APPSERVICE", data: i, pageId: "" },
|
||||
"*",
|
||||
);
|
||||
if (0 === t.length) {
|
||||
var u = plus.webview.currentWebview();
|
||||
if (!u) throw new Error("plus.webview.currentWebview() is undefined");
|
||||
var g = u.parent(),
|
||||
v = "";
|
||||
((v = g ? g.id : u.id), t.push(v));
|
||||
}
|
||||
if (plus.webview.getWebviewById("__uniapp__service"))
|
||||
plus.webview.postMessageToUniNView(
|
||||
{ type: "WEB_INVOKE_APPSERVICE", args: { data: i, webviewIds: t } },
|
||||
"__uniapp__service",
|
||||
);
|
||||
else {
|
||||
var c = JSON.stringify(i);
|
||||
plus.webview
|
||||
.getLaunchWebview()
|
||||
.evalJS(
|
||||
'UniPlusBridge.subscribeHandler("'
|
||||
.concat("WEB_INVOKE_APPSERVICE", '",')
|
||||
.concat(c, ",")
|
||||
.concat(JSON.stringify(t), ");"),
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
d = {
|
||||
navigateTo: function () {
|
||||
var e =
|
||||
arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
|
||||
n = e.url;
|
||||
r("navigateTo", { url: encodeURI(n) });
|
||||
},
|
||||
navigateBack: function () {
|
||||
var e =
|
||||
arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
|
||||
n = e.delta;
|
||||
r("navigateBack", { delta: parseInt(n) || 1 });
|
||||
},
|
||||
switchTab: function () {
|
||||
var e =
|
||||
arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
|
||||
n = e.url;
|
||||
r("switchTab", { url: encodeURI(n) });
|
||||
},
|
||||
reLaunch: function () {
|
||||
var e =
|
||||
arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
|
||||
n = e.url;
|
||||
r("reLaunch", { url: encodeURI(n) });
|
||||
},
|
||||
redirectTo: function () {
|
||||
var e =
|
||||
arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
|
||||
n = e.url;
|
||||
r("redirectTo", { url: encodeURI(n) });
|
||||
},
|
||||
getEnv: function (e) {
|
||||
a()
|
||||
? e({ uvue: !0 })
|
||||
: o()
|
||||
? e({ nvue: !0 })
|
||||
: window.plus
|
||||
? e({ plus: !0 })
|
||||
: e({ h5: !0 });
|
||||
},
|
||||
postMessage: function () {
|
||||
var e =
|
||||
arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
|
||||
r("postMessage", e.data || {});
|
||||
},
|
||||
},
|
||||
s = /uni-app/i.test(navigator.userAgent),
|
||||
w = /Html5Plus/i.test(navigator.userAgent),
|
||||
u = /complete|loaded|interactive/;
|
||||
var g =
|
||||
window.my &&
|
||||
navigator.userAgent.indexOf(
|
||||
["t", "n", "e", "i", "l", "C", "y", "a", "p", "i", "l", "A"]
|
||||
.reverse()
|
||||
.join(""),
|
||||
) > -1;
|
||||
var v =
|
||||
window.swan && window.swan.webView && /swan/i.test(navigator.userAgent);
|
||||
var c =
|
||||
window.qq &&
|
||||
window.qq.miniProgram &&
|
||||
/QQ/i.test(navigator.userAgent) &&
|
||||
/miniProgram/i.test(navigator.userAgent);
|
||||
var p =
|
||||
window.tt &&
|
||||
window.tt.miniProgram &&
|
||||
/toutiaomicroapp/i.test(navigator.userAgent);
|
||||
var _ =
|
||||
window.wx &&
|
||||
window.wx.miniProgram &&
|
||||
/micromessenger/i.test(navigator.userAgent) &&
|
||||
/miniProgram/i.test(navigator.userAgent);
|
||||
var m = window.qa && /quickapp/i.test(navigator.userAgent);
|
||||
var f =
|
||||
window.ks &&
|
||||
window.ks.miniProgram &&
|
||||
/micromessenger/i.test(navigator.userAgent) &&
|
||||
/miniProgram/i.test(navigator.userAgent);
|
||||
var l =
|
||||
window.tt &&
|
||||
window.tt.miniProgram &&
|
||||
/Lark|Feishu/i.test(navigator.userAgent);
|
||||
var E =
|
||||
window.jd && window.jd.miniProgram && /jdmp/i.test(navigator.userAgent);
|
||||
var x =
|
||||
window.xhs &&
|
||||
window.xhs.miniProgram &&
|
||||
/xhsminiapp/i.test(navigator.userAgent);
|
||||
for (
|
||||
var S,
|
||||
h = function () {
|
||||
((window.UniAppJSBridge = !0),
|
||||
document.dispatchEvent(
|
||||
new CustomEvent("UniAppJSBridgeReady", {
|
||||
bubbles: !0,
|
||||
cancelable: !0,
|
||||
}),
|
||||
));
|
||||
},
|
||||
y = [
|
||||
function (e) {
|
||||
if (s || w)
|
||||
return (
|
||||
window.__uniapp_x_postMessage ||
|
||||
window.__uniapp_x_ ||
|
||||
window.__dcloud_weex_postMessage ||
|
||||
window.__dcloud_weex_
|
||||
? document.addEventListener("DOMContentLoaded", e)
|
||||
: window.plus && u.test(document.readyState)
|
||||
? setTimeout(e, 0)
|
||||
: document.addEventListener("plusready", e),
|
||||
d
|
||||
);
|
||||
},
|
||||
function (e) {
|
||||
if (_)
|
||||
return (
|
||||
window.WeixinJSBridge && window.WeixinJSBridge.invoke
|
||||
? setTimeout(e, 0)
|
||||
: document.addEventListener("WeixinJSBridgeReady", e),
|
||||
window.wx.miniProgram
|
||||
);
|
||||
},
|
||||
function (e) {
|
||||
if (c)
|
||||
return (
|
||||
window.QQJSBridge && window.QQJSBridge.invoke
|
||||
? setTimeout(e, 0)
|
||||
: document.addEventListener("QQJSBridgeReady", e),
|
||||
window.qq.miniProgram
|
||||
);
|
||||
},
|
||||
function (e) {
|
||||
if (g) {
|
||||
document.addEventListener("DOMContentLoaded", e);
|
||||
var n = window.my;
|
||||
return {
|
||||
navigateTo: n.navigateTo,
|
||||
navigateBack: n.navigateBack,
|
||||
switchTab: n.switchTab,
|
||||
reLaunch: n.reLaunch,
|
||||
redirectTo: n.redirectTo,
|
||||
postMessage: n.postMessage,
|
||||
getEnv: n.getEnv,
|
||||
};
|
||||
}
|
||||
},
|
||||
function (e) {
|
||||
if (v)
|
||||
return (
|
||||
document.addEventListener("DOMContentLoaded", e),
|
||||
window.swan.webView
|
||||
);
|
||||
},
|
||||
function (e) {
|
||||
if (p)
|
||||
return (
|
||||
document.addEventListener("DOMContentLoaded", e),
|
||||
window.tt.miniProgram
|
||||
);
|
||||
},
|
||||
function (e) {
|
||||
if (m) {
|
||||
window.QaJSBridge && window.QaJSBridge.invoke
|
||||
? setTimeout(e, 0)
|
||||
: document.addEventListener("QaJSBridgeReady", e);
|
||||
var n = window.qa;
|
||||
return {
|
||||
navigateTo: n.navigateTo,
|
||||
navigateBack: n.navigateBack,
|
||||
switchTab: n.switchTab,
|
||||
reLaunch: n.reLaunch,
|
||||
redirectTo: n.redirectTo,
|
||||
postMessage: n.postMessage,
|
||||
getEnv: n.getEnv,
|
||||
};
|
||||
}
|
||||
},
|
||||
function (e) {
|
||||
if (f)
|
||||
return (
|
||||
window.WeixinJSBridge && window.WeixinJSBridge.invoke
|
||||
? setTimeout(e, 0)
|
||||
: document.addEventListener("WeixinJSBridgeReady", e),
|
||||
window.ks.miniProgram
|
||||
);
|
||||
},
|
||||
function (e) {
|
||||
if (l)
|
||||
return (
|
||||
document.addEventListener("DOMContentLoaded", e),
|
||||
window.tt.miniProgram
|
||||
);
|
||||
},
|
||||
function (e) {
|
||||
if (E)
|
||||
return (
|
||||
window.JDJSBridgeReady && window.JDJSBridgeReady.invoke
|
||||
? setTimeout(e, 0)
|
||||
: document.addEventListener("JDJSBridgeReady", e),
|
||||
window.jd.miniProgram
|
||||
);
|
||||
},
|
||||
function (e) {
|
||||
if (x) return window.xhs.miniProgram;
|
||||
},
|
||||
function (e) {
|
||||
return (document.addEventListener("DOMContentLoaded", e), d);
|
||||
},
|
||||
],
|
||||
M = 0;
|
||||
M < y.length && !(S = y[M](h));
|
||||
M++
|
||||
);
|
||||
S || (S = {});
|
||||
var P = "undefined" != typeof uni ? uni : {};
|
||||
if (!P.navigateTo) for (var b in S) i(S, b) && (P[b] = S[b]);
|
||||
return ((P.webView = S), P);
|
||||
});
|
||||
@@ -7,7 +7,7 @@ import request from "./request";
|
||||
*/
|
||||
export async function uploadFile(
|
||||
file: File,
|
||||
uploadUrl: string = "/v1/attachment/upload"
|
||||
uploadUrl: string = "/v1/attachment/upload",
|
||||
): Promise<string> {
|
||||
try {
|
||||
// 创建 FormData 对象用于文件上传
|
||||
|
||||
@@ -47,7 +47,7 @@ instance.interceptors.response.use(
|
||||
err => {
|
||||
Toast.show({ content: err.message || "网络异常", position: "top" });
|
||||
return Promise.reject(err);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export function request(
|
||||
@@ -55,7 +55,7 @@ export function request(
|
||||
data?: any,
|
||||
method: Method = "GET",
|
||||
config?: AxiosRequestConfig,
|
||||
debounceGap?: number
|
||||
debounceGap?: number,
|
||||
): Promise<any> {
|
||||
const gap =
|
||||
typeof debounceGap === "number" ? debounceGap : DEFAULT_DEBOUNCE_GAP;
|
||||
|
||||
@@ -117,7 +117,7 @@ export default function AccountSelection({
|
||||
acc =>
|
||||
acc.userName.includes(searchQuery) ||
|
||||
acc.realName.includes(searchQuery) ||
|
||||
acc.departmentName.includes(searchQuery)
|
||||
acc.departmentName.includes(searchQuery),
|
||||
);
|
||||
|
||||
// 处理账号选择
|
||||
|
||||
@@ -58,7 +58,7 @@ interface ContentLibrarySelectionProps {
|
||||
readonly?: boolean;
|
||||
onConfirm?: (
|
||||
selectedIds: string[],
|
||||
selectedItems: ContentLibraryItem[]
|
||||
selectedItems: ContentLibraryItem[],
|
||||
) => void;
|
||||
}
|
||||
|
||||
@@ -86,7 +86,7 @@ export default function ContentLibrarySelection({
|
||||
|
||||
// 获取已选内容库详细信息
|
||||
const selectedLibraryObjs = libraries.filter(item =>
|
||||
selectedLibraries.includes(item.id)
|
||||
selectedLibraries.includes(item.id),
|
||||
);
|
||||
|
||||
// 删除已选内容库
|
||||
@@ -161,7 +161,7 @@ export default function ContentLibrarySelection({
|
||||
onSelect(newSelected);
|
||||
if (onSelectDetail) {
|
||||
const selectedObjs = libraries.filter(item =>
|
||||
newSelected.includes(item.id)
|
||||
newSelected.includes(item.id),
|
||||
);
|
||||
onSelectDetail(selectedObjs);
|
||||
}
|
||||
|
||||
@@ -61,7 +61,7 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
|
||||
wxid: d.wechatId || "",
|
||||
nickname: d.nickname || "",
|
||||
usedInPlans: d.usedInPlans || 0,
|
||||
}))
|
||||
})),
|
||||
);
|
||||
setTotal(res.total || 0);
|
||||
}
|
||||
@@ -71,7 +71,7 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
|
||||
setLoading(false);
|
||||
}
|
||||
},
|
||||
[]
|
||||
[],
|
||||
);
|
||||
|
||||
// 打开弹窗时获取第一页
|
||||
|
||||
@@ -137,7 +137,7 @@ export default function FriendSelection({
|
||||
// 如果有 onSelectDetail 回调，传递完整的好友对象
|
||||
if (onSelectDetail) {
|
||||
const selectedFriendObjs = friends.filter(friend =>
|
||||
newSelectedFriends.includes(friend.id)
|
||||
newSelectedFriends.includes(friend.id),
|
||||
);
|
||||
onSelectDetail(selectedFriendObjs);
|
||||
}
|
||||
|
||||
@@ -59,7 +59,7 @@ export default function GroupSelection({
|
||||
|
||||
// 获取已选群聊详细信息
|
||||
const selectedGroupObjs = groups.filter(group =>
|
||||
selectedGroups.includes(group.id)
|
||||
selectedGroups.includes(group.id),
|
||||
);
|
||||
|
||||
// 删除已选群聊
|
||||
@@ -141,7 +141,7 @@ export default function GroupSelection({
|
||||
// 如果有 onSelectDetail 回调，传递完整的群聊对象
|
||||
if (onSelectDetail) {
|
||||
const selectedGroupObjs = groups.filter(group =>
|
||||
newSelectedGroups.includes(group.id)
|
||||
newSelectedGroups.includes(group.id),
|
||||
);
|
||||
onSelectDetail(selectedGroupObjs);
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ const Layout: React.FC<LayoutProps> = ({
|
||||
const setRealHeight = () => {
|
||||
document.documentElement.style.setProperty(
|
||||
"--real-vh",
|
||||
`${window.innerHeight * 0.01}px`
|
||||
`${window.innerHeight * 0.01}px`,
|
||||
);
|
||||
};
|
||||
setRealHeight();
|
||||
|
||||
@@ -1,40 +1,61 @@
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { NavBar } from "antd-mobile";
|
||||
import { ArrowLeftOutlined } from "@ant-design/icons";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import { getSafeAreaHeight } from "@/utils/common";
|
||||
interface NavCommonProps {
|
||||
title: string;
|
||||
backFn?: () => void;
|
||||
right?: React.ReactNode;
|
||||
left?: React.ReactNode;
|
||||
}
|
||||
|
||||
const NavCommon: React.FC<NavCommonProps> = ({ title, backFn, right }) => {
|
||||
const NavCommon: React.FC<NavCommonProps> = ({
|
||||
title,
|
||||
backFn,
|
||||
right,
|
||||
left,
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
const [paddingTop, setPaddingTop] = useState("0px");
|
||||
useEffect(() => {
|
||||
setPaddingTop(getSafeAreaHeight() + "px");
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<NavBar
|
||||
back={null}
|
||||
style={{ background: "#fff" }}
|
||||
left={
|
||||
<div className="nav-title">
|
||||
<ArrowLeftOutlined
|
||||
twoToneColor="#1677ff"
|
||||
onClick={() => {
|
||||
if (backFn) {
|
||||
backFn();
|
||||
} else {
|
||||
navigate(-1);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
right={right}
|
||||
<div
|
||||
style={{
|
||||
paddingTop: paddingTop,
|
||||
background: "#fff",
|
||||
}}
|
||||
>
|
||||
<span style={{ color: "var(--primary-color)", fontWeight: 600 }}>
|
||||
{title}
|
||||
</span>
|
||||
</NavBar>
|
||||
<NavBar
|
||||
back={null}
|
||||
left={
|
||||
left ? (
|
||||
left
|
||||
) : (
|
||||
<div className="nav-title">
|
||||
<ArrowLeftOutlined
|
||||
twoToneColor="#1677ff"
|
||||
onClick={() => {
|
||||
if (backFn) {
|
||||
backFn();
|
||||
} else {
|
||||
navigate(-1);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
right={right}
|
||||
>
|
||||
<span style={{ color: "var(--primary-color)", fontWeight: 600 }}>
|
||||
{title}
|
||||
</span>
|
||||
</NavBar>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
181
nkebao/src/components/Upload/AvatarUpload.tsx
Normal file
181
nkebao/src/components/Upload/AvatarUpload.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Toast, Dialog } from "antd-mobile";
|
||||
import { UserOutlined, CameraOutlined } from "@ant-design/icons";
|
||||
import style from "./index.module.scss";
|
||||
|
||||
interface AvatarUploadProps {
|
||||
value?: string;
|
||||
onChange?: (url: string) => void;
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
size?: number; // 头像尺寸
|
||||
}
|
||||
|
||||
const AvatarUpload: React.FC<AvatarUploadProps> = ({
|
||||
value = "",
|
||||
onChange,
|
||||
disabled = false,
|
||||
className,
|
||||
size = 100,
|
||||
}) => {
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [avatarUrl, setAvatarUrl] = useState(value);
|
||||
|
||||
useEffect(() => {
|
||||
setAvatarUrl(value);
|
||||
}, [value]);
|
||||
|
||||
// 文件验证
|
||||
const beforeUpload = (file: File) => {
|
||||
// 检查文件类型
|
||||
const isValidType = file.type.startsWith("image/");
|
||||
if (!isValidType) {
|
||||
Toast.show("只能上传图片文件！");
|
||||
return null;
|
||||
}
|
||||
|
||||
// 检查文件大小 (5MB)
|
||||
const isLt5M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt5M) {
|
||||
Toast.show("图片大小不能超过5MB！");
|
||||
return null;
|
||||
}
|
||||
|
||||
return file;
|
||||
};
|
||||
|
||||
// 上传函数
|
||||
const upload = async (file: File): Promise<{ url: string }> => {
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_API_BASE_URL}/v1/attachment/upload`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
body: formData,
|
||||
},
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("上传失败");
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.code === 200) {
|
||||
Toast.show("头像上传成功");
|
||||
return { url: result.data.url || result.data };
|
||||
} else {
|
||||
throw new Error(result.msg || "上传失败");
|
||||
}
|
||||
} catch (error) {
|
||||
Toast.show("头像上传失败，请重试");
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
// 处理头像上传
|
||||
const handleAvatarChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file || disabled || uploading) return;
|
||||
|
||||
const validatedFile = beforeUpload(file);
|
||||
if (!validatedFile) return;
|
||||
|
||||
setUploading(true);
|
||||
try {
|
||||
const result = await upload(validatedFile);
|
||||
setAvatarUrl(result.url);
|
||||
onChange?.(result.url);
|
||||
} catch (error) {
|
||||
console.error("头像上传失败:", error);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除头像
|
||||
const handleDelete = () => {
|
||||
return Dialog.confirm({
|
||||
content: "确定要删除头像吗？",
|
||||
onConfirm: () => {
|
||||
setAvatarUrl("");
|
||||
onChange?.("");
|
||||
Toast.show("头像已删除");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`${style.avatarUploadContainer} ${className || ""}`}>
|
||||
<div
|
||||
className={style.avatarWrapper}
|
||||
style={{ width: size, height: size }}
|
||||
>
|
||||
{avatarUrl ? (
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt="头像"
|
||||
className={style.avatarImage}
|
||||
style={{ width: size, height: size }}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={style.avatarPlaceholder}
|
||||
style={{ width: size, height: size }}
|
||||
>
|
||||
<UserOutlined />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 上传覆盖层 */}
|
||||
<div
|
||||
className={style.avatarUploadOverlay}
|
||||
onClick={() =>
|
||||
!disabled && !uploading && fileInputRef.current?.click()
|
||||
}
|
||||
>
|
||||
{uploading ? (
|
||||
<div className={style.uploadLoading}>上传中...</div>
|
||||
) : (
|
||||
<CameraOutlined />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 删除按钮 */}
|
||||
{avatarUrl && !disabled && (
|
||||
<div className={style.avatarDeleteBtn} onClick={handleDelete}>
|
||||
×
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 隐藏的文件输入 */}
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style={{ display: "none" }}
|
||||
onChange={handleAvatarChange}
|
||||
disabled={disabled || uploading}
|
||||
/>
|
||||
|
||||
{/* 提示文字 */}
|
||||
<div className={style.avatarTip}>
|
||||
{uploading
|
||||
? "正在上传头像..."
|
||||
: "点击头像可更换，支持JPG、PNG格式，大小不超过5MB"}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 创建 ref
|
||||
const fileInputRef = React.createRef<HTMLInputElement>();
|
||||
|
||||
export default AvatarUpload;
|
||||
@@ -12,6 +12,21 @@
|
||||
- ✅ 数量限制
|
||||
- ✅ 编辑和新增状态支持
|
||||
- ✅ 响应式设计
|
||||
- ✅ 头像上传专用组件
|
||||
|
||||
## 组件列表
|
||||
|
||||
### 1. UploadComponent (图片上传)
|
||||
|
||||
通用的图片上传组件，支持多张图片上传。
|
||||
|
||||
### 2. AvatarUpload (头像上传)
|
||||
|
||||
专门的头像上传组件，支持圆形头像显示、删除功能。
|
||||
|
||||
### 3. VideoUpload (视频上传)
|
||||
|
||||
视频上传组件，支持视频文件上传和预览。
|
||||
|
||||
## 使用方法
|
||||
|
||||
@@ -35,6 +50,26 @@ const MyComponent = () => {
|
||||
};
|
||||
```
|
||||
|
||||
### 头像上传
|
||||
|
||||
```tsx
|
||||
import React, { useState } from "react";
|
||||
import AvatarUpload from "@/components/Upload/AvatarUpload";
|
||||
|
||||
const AvatarComponent = () => {
|
||||
const [avatar, setAvatar] = useState<string>("");
|
||||
|
||||
return (
|
||||
<AvatarUpload
|
||||
value={avatar}
|
||||
onChange={setAvatar}
|
||||
size={100}
|
||||
disabled={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 编辑模式
|
||||
|
||||
```tsx
|
||||
@@ -63,7 +98,7 @@ const EditComponent = () => {
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
### UploadComponent Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------- | -------------- | -------------------------- | ----------- |
|
||||
@@ -74,11 +109,30 @@ const EditComponent = () => {
|
||||
| disabled | 是否禁用 | `boolean` | `false` |
|
||||
| className | 自定义类名 | `string` | - |
|
||||
|
||||
### AvatarUpload Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------- | ------------ | ----------------------- | ------- |
|
||||
| value | 头像URL | `string` | `""` |
|
||||
| onChange | 头像变化回调 | `(url: string) => void` | - |
|
||||
| disabled | 是否禁用 | `boolean` | `false` |
|
||||
| className | 自定义类名 | `string` | - |
|
||||
| size | 头像尺寸 | `number` | `100` |
|
||||
|
||||
### VideoUpload Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------- | ------------ | ----------------------- | ------- |
|
||||
| value | 视频URL | `string` | `""` |
|
||||
| onChange | 视频变化回调 | `(url: string) => void` | - |
|
||||
| disabled | 是否禁用 | `boolean` | `false` |
|
||||
| className | 自定义类名 | `string` | - |
|
||||
|
||||
### 事件
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| -------- | ------------------ | -------------------------- |
|
||||
| onChange | 图片列表变化时触发 | `(urls: string[]) => void` |
|
||||
| onChange | 文件列表变化时触发 | `(urls: string[]) => void` |
|
||||
|
||||
## 注意事项
|
||||
|
||||
@@ -88,6 +142,7 @@ const EditComponent = () => {
|
||||
4. **认证**: 自动携带 token 进行认证
|
||||
5. **预览**: 点击图片可预览
|
||||
6. **删除**: 删除图片会有确认提示
|
||||
7. **头像组件**: 支持圆形显示、删除按钮、上传覆盖层
|
||||
|
||||
## 样式定制
|
||||
|
||||
@@ -102,6 +157,13 @@ const EditComponent = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatarUploadContainer {
|
||||
// 头像上传组件样式
|
||||
.avatarWrapper {
|
||||
// 头像容器样式
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 错误处理
|
||||
@@ -110,3 +172,12 @@ const EditComponent = () => {
|
||||
- 文件大小超限时会显示错误提示
|
||||
- 上传失败时会显示错误提示
|
||||
- 网络错误时会显示错误提示
|
||||
|
||||
## 头像上传特性
|
||||
|
||||
- **圆形显示**: 头像以圆形方式显示
|
||||
- **占位符**: 无头像时显示用户图标
|
||||
- **上传覆盖**: 鼠标悬停显示上传图标
|
||||
- **删除功能**: 右上角删除按钮
|
||||
- **加载状态**: 上传时显示加载提示
|
||||
- **尺寸可调**: 支持自定义头像尺寸
|
||||
|
||||
@@ -106,3 +106,105 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 头像上传组件样式
|
||||
.avatarUploadContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.avatarWrapper {
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: #f0f0f0;
|
||||
border: 2px solid #e0e0e0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 4px 12px rgba(24, 142, 238, 0.3);
|
||||
}
|
||||
|
||||
.avatarImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatarPlaceholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.avatarUploadOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uploadLoading {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.avatarDeleteBtn {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #ff4d4f;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 10;
|
||||
|
||||
&:hover {
|
||||
background: #ff7875;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .avatarUploadOverlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.avatarTip {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,7 +68,7 @@ const UploadComponent: React.FC<UploadComponentProps> = ({
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
body: formData,
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
|
||||
13
nkebao/src/pages/guide/api.ts
Normal file
13
nkebao/src/pages/guide/api.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import request from "@/api/request";
|
||||
|
||||
// 获取设备二维码
|
||||
export const fetchDeviceQRCode = (accountId: string) =>
|
||||
request("/v1/api/device/add", { accountId }, "POST");
|
||||
|
||||
// 通过IMEI添加设备
|
||||
export const addDeviceByImei = (imei: string, name: string) =>
|
||||
request("/v1/api/device/add-by-imei", { imei, name }, "POST");
|
||||
|
||||
// 获取设备列表
|
||||
export const fetchDeviceList = (params: { accountId?: string }) =>
|
||||
request("/v1/devices/add-results", params, "GET");
|
||||
341
nkebao/src/pages/guide/index.module.scss
Normal file
341
nkebao/src/pages/guide/index.module.scss
Normal file
@@ -0,0 +1,341 @@
|
||||
.guideContainer {
|
||||
height: 100vh;
|
||||
background: var(--primary-color);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.loadingContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
.loadingText {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
margin-top: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.iconContainer {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: white;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
max-width: 280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.deviceStatus {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.statusCard {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.statusIcon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.statusInfo {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.statusTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.statusValue {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.deviceCount {
|
||||
color: var(--primary-color);
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.guideSteps {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stepsTitle {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.stepList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stepItem {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.stepNumber {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stepContent {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stepTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.stepDesc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.tips {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.tipsTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.tipsIcon {
|
||||
color: #ff6b6b;
|
||||
margin-right: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tipsContent {
|
||||
p {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.primaryButton {
|
||||
background: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
box-shadow: 0 2px 12px rgba(255, 255, 255, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 1px 6px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.buttonIcon {
|
||||
margin-left: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.secondaryButton {
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
border-radius: 8px;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: transparent;
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
&:active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 480px) {
|
||||
.guideContainer {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.statusCard {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.stepItem {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// 动画效果
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.header,
|
||||
.deviceStatus,
|
||||
.guideSteps,
|
||||
.tips {
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.guideSteps {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.tips {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.footer {
|
||||
animation: fadeInUp 0.5s ease-out 0.3s both;
|
||||
}
|
||||
349
nkebao/src/pages/guide/index.tsx
Normal file
349
nkebao/src/pages/guide/index.tsx
Normal file
@@ -0,0 +1,349 @@
|
||||
import React, { useEffect, useState, useCallback, useRef } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Button, Toast, Popup, Tabs, Input } from "antd-mobile";
|
||||
import {
|
||||
MobileOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
ArrowRightOutlined,
|
||||
QrcodeOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import { fetchDeviceQRCode, addDeviceByImei, fetchDeviceList } from "./api";
|
||||
import { useUserStore } from "@/store/module/user";
|
||||
import styles from "./index.module.scss";
|
||||
const Guide: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { user } = useUserStore();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [deviceCount, setDeviceCount] = useState(user?.deviceTotal || 0);
|
||||
|
||||
// 添加设备弹窗状态
|
||||
const [addVisible, setAddVisible] = useState(false);
|
||||
const [addTab, setAddTab] = useState("scan");
|
||||
const [qrLoading, setQrLoading] = useState(false);
|
||||
const [qrCode, setQrCode] = useState<string | null>(null);
|
||||
const [imei, setImei] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [addLoading, setAddLoading] = useState(false);
|
||||
|
||||
// 轮询监听相关
|
||||
const [isPolling, setIsPolling] = useState(false);
|
||||
const pollingRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const initialDeviceCountRef = useRef(deviceCount);
|
||||
|
||||
// 检查设备绑定状态
|
||||
const checkDeviceStatus = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// 使用store中的设备数量
|
||||
const deviceNum = user?.deviceTotal || 0;
|
||||
setDeviceCount(deviceNum);
|
||||
|
||||
// 如果已有设备，直接跳转到首页
|
||||
if (deviceNum > 0) {
|
||||
navigate("/");
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("检查设备状态失败:", error);
|
||||
Toast.show({
|
||||
content: "检查设备状态失败，请重试",
|
||||
position: "top",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [user?.deviceTotal, navigate]);
|
||||
|
||||
useEffect(() => {
|
||||
checkDeviceStatus();
|
||||
}, [checkDeviceStatus]);
|
||||
|
||||
// 开始轮询监听设备状态
|
||||
const startPolling = useCallback(() => {
|
||||
if (isPolling) return;
|
||||
|
||||
setIsPolling(true);
|
||||
initialDeviceCountRef.current = deviceCount;
|
||||
|
||||
const pollDeviceStatus = async () => {
|
||||
try {
|
||||
// 这里可以调用一个简单的设备数量接口来检查是否有新设备
|
||||
// 或者使用其他方式检测设备状态变化
|
||||
// 暂时使用store中的数量，实际项目中可能需要调用专门的接口
|
||||
let currentDeviceCount = user?.deviceTotal || 0;
|
||||
const res = await fetchDeviceList({ accountId: user?.s2_accountId });
|
||||
if (res.added) {
|
||||
currentDeviceCount = 1;
|
||||
Toast.show({ content: "设备添加成功！", position: "top" });
|
||||
setAddVisible(false);
|
||||
setDeviceCount(currentDeviceCount);
|
||||
setIsPolling(false);
|
||||
if (pollingRef.current) {
|
||||
clearInterval(pollingRef.current);
|
||||
pollingRef.current = null;
|
||||
}
|
||||
// 可以选择跳转到首页或继续留在当前页面
|
||||
navigate("/");
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("轮询检查设备状态失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 每3秒检查一次设备状态
|
||||
pollingRef.current = setInterval(pollDeviceStatus, 3000);
|
||||
}, [isPolling, user?.s2_accountId]);
|
||||
|
||||
// 停止轮询
|
||||
const stopPolling = useCallback(() => {
|
||||
setIsPolling(false);
|
||||
if (pollingRef.current) {
|
||||
clearInterval(pollingRef.current);
|
||||
pollingRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 组件卸载时清理轮询
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (pollingRef.current) {
|
||||
clearInterval(pollingRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 获取二维码
|
||||
const handleGetQr = async () => {
|
||||
setQrLoading(true);
|
||||
setQrCode(null);
|
||||
try {
|
||||
const accountId = user?.s2_accountId;
|
||||
if (!accountId) throw new Error("未获取到用户信息");
|
||||
const res = await fetchDeviceQRCode(accountId);
|
||||
setQrCode(res.qrCode);
|
||||
// 获取二维码后开始轮询监听
|
||||
startPolling();
|
||||
} catch (e: any) {
|
||||
Toast.show({ content: e.message || "获取二维码失败", position: "top" });
|
||||
} finally {
|
||||
setQrLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 跳转到设备管理页面
|
||||
const handleGoToDevices = () => {
|
||||
handleGetQr();
|
||||
setAddVisible(true);
|
||||
};
|
||||
|
||||
// 手动添加设备
|
||||
const handleAddDevice = async () => {
|
||||
if (!imei.trim() || !name.trim()) {
|
||||
Toast.show({ content: "请填写完整信息", position: "top" });
|
||||
return;
|
||||
}
|
||||
setAddLoading(true);
|
||||
try {
|
||||
await addDeviceByImei(imei, name);
|
||||
Toast.show({ content: "添加成功", position: "top" });
|
||||
setAddVisible(false);
|
||||
setImei("");
|
||||
setName("");
|
||||
// 重新检查设备状态
|
||||
await checkDeviceStatus();
|
||||
} catch (e: any) {
|
||||
Toast.show({ content: e.message || "添加失败", position: "top" });
|
||||
} finally {
|
||||
setAddLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭弹窗时停止轮询
|
||||
const handleClosePopup = () => {
|
||||
setAddVisible(false);
|
||||
stopPolling();
|
||||
setQrCode(null);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Layout loading={true}>
|
||||
<div className={styles.loadingContainer}>
|
||||
<div className={styles.loadingText}>检查设备状态中...</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className={styles.guideContainer}>
|
||||
{/* 头部区域 */}
|
||||
<div className={styles.header}>
|
||||
<div className={styles.iconContainer}>
|
||||
<img src="/logo.png" alt="存客宝" className={styles.logo} />
|
||||
</div>
|
||||
<h1 className={styles.title}>欢迎使用存客宝</h1>
|
||||
<p className={styles.subtitle}>请先绑定设备以获得完整功能体验</p>
|
||||
</div>
|
||||
|
||||
{/* 内容区域 */}
|
||||
<div className={styles.content}>
|
||||
<div className={styles.deviceStatus}>
|
||||
<div className={styles.statusCard}>
|
||||
<div className={styles.statusIcon}>
|
||||
<MobileOutlined />
|
||||
</div>
|
||||
<div className={styles.statusInfo}>
|
||||
<div className={styles.statusTitle}>设备绑定状态</div>
|
||||
<div className={styles.statusValue}>
|
||||
已绑定：
|
||||
<span className={styles.deviceCount}>{deviceCount}</span> 台
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.guideSteps}>
|
||||
<h2 className={styles.stepsTitle}>绑定步骤</h2>
|
||||
<div className={styles.stepList}>
|
||||
<div className={styles.stepItem}>
|
||||
<div className={styles.stepNumber}>1</div>
|
||||
<div className={styles.stepContent}>
|
||||
<div className={styles.stepTitle}>准备设备</div>
|
||||
<div className={styles.stepDesc}>
|
||||
确保手机已安装存客宝应用
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.stepItem}>
|
||||
<div className={styles.stepNumber}>2</div>
|
||||
<div className={styles.stepContent}>
|
||||
<div className={styles.stepTitle}>扫描二维码</div>
|
||||
<div className={styles.stepDesc}>在设备管理页面扫描绑定</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.stepItem}>
|
||||
<div className={styles.stepNumber}>3</div>
|
||||
<div className={styles.stepContent}>
|
||||
<div className={styles.stepTitle}>开始使用</div>
|
||||
<div className={styles.stepDesc}>
|
||||
绑定成功后即可使用所有功能
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.tips}>
|
||||
<div className={styles.tipsTitle}>
|
||||
<ExclamationCircleOutlined className={styles.tipsIcon} />
|
||||
温馨提示
|
||||
</div>
|
||||
<div className={styles.tipsContent}>
|
||||
<p>• 绑定设备后可享受完整功能体验</p>
|
||||
<p>• 每个账号最多可绑定10台设备</p>
|
||||
<p>• 如需帮助请联系客服</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 底部按钮区域 */}
|
||||
<div className={styles.footer}>
|
||||
<Button
|
||||
block
|
||||
color="primary"
|
||||
size="large"
|
||||
className={styles.primaryButton}
|
||||
onClick={handleGoToDevices}
|
||||
>
|
||||
立即绑定设备
|
||||
<ArrowRightOutlined className={styles.buttonIcon} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 添加设备弹窗 */}
|
||||
<Popup
|
||||
visible={addVisible}
|
||||
onMaskClick={handleClosePopup}
|
||||
bodyStyle={{
|
||||
borderTopLeftRadius: 16,
|
||||
borderTopRightRadius: 16,
|
||||
minHeight: 320,
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: 20 }}>
|
||||
<Tabs
|
||||
activeKey={addTab}
|
||||
onChange={setAddTab}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
<Tabs.Tab title="扫码添加" key="scan" />
|
||||
<Tabs.Tab title="手动添加" key="manual" />
|
||||
</Tabs>
|
||||
{addTab === "scan" && (
|
||||
<div style={{ textAlign: "center", minHeight: 200 }}>
|
||||
<Button color="primary" onClick={handleGetQr} loading={qrLoading}>
|
||||
<QrcodeOutlined />
|
||||
获取二维码
|
||||
</Button>
|
||||
{qrCode && (
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<img
|
||||
src={qrCode}
|
||||
alt="二维码"
|
||||
style={{
|
||||
width: 180,
|
||||
height: 180,
|
||||
background: "#f5f5f5",
|
||||
borderRadius: 8,
|
||||
margin: "0 auto",
|
||||
}}
|
||||
/>
|
||||
<div style={{ color: "#888", fontSize: 12, marginTop: 8 }}>
|
||||
请用手机扫码添加设备
|
||||
</div>
|
||||
{isPolling && (
|
||||
<div
|
||||
style={{ color: "#1890ff", fontSize: 12, marginTop: 8 }}
|
||||
>
|
||||
正在监听设备添加状态...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{addTab === "manual" && (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
|
||||
<Input
|
||||
placeholder="设备名称"
|
||||
value={name}
|
||||
onChange={val => setName(val)}
|
||||
clearable
|
||||
/>
|
||||
<Input
|
||||
placeholder="设备IMEI"
|
||||
value={imei}
|
||||
onChange={val => setImei(val)}
|
||||
clearable
|
||||
/>
|
||||
<Button
|
||||
color="primary"
|
||||
onClick={handleAddDevice}
|
||||
loading={addLoading}
|
||||
>
|
||||
添加
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Popup>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Guide;
|
||||
323
nkebao/src/pages/iframe/index.module.scss
Normal file
323
nkebao/src/pages/iframe/index.module.scss
Normal file
@@ -0,0 +1,323 @@
|
||||
.iframe-debug-page {
|
||||
min-height: 100vh;
|
||||
background: var(--primary-gradient);
|
||||
padding: 20px;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-bottom: 30px;
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin: 0 0 10px 0;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.control-panel,
|
||||
.message-panel {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 10px 30px var(--primary-shadow);
|
||||
|
||||
h3 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #333;
|
||||
font-size: 1.3rem;
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
background: var(--primary-gradient);
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-color-dark) 0%,
|
||||
var(--primary-color) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-color-light) 0%,
|
||||
var(--primary-color) 100%
|
||||
);
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-color) 0%,
|
||||
var(--primary-color-dark) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #ee5a52 0%, #d63031 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-list {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #e1e5e9;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
background: #f8f9fa;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.no-messages {
|
||||
text-align: center;
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
background: white;
|
||||
padding: 12px 15px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
box-shadow: 0 2px 4px var(--primary-shadow-light);
|
||||
font-size: 12px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.message-text {
|
||||
font-family: "Courier New", monospace;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.info-panel {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 10px 30px var(--primary-shadow);
|
||||
|
||||
h3 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #333;
|
||||
font-size: 1.3rem;
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 12px;
|
||||
padding: 10px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--primary-color);
|
||||
|
||||
strong {
|
||||
color: #495057;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动条样式
|
||||
.message-list::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.message-list::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.message-list::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.iframe-debug-page {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.control-panel,
|
||||
.message-panel,
|
||||
.info-panel {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 16px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.header h1 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.control-panel,
|
||||
.message-panel,
|
||||
.info-panel {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// URL 参数区域样式
|
||||
.url-params-section {
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 2px solid #e1e5e9;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 15px 0;
|
||||
color: #333;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.no-params {
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border: 2px dashed #dee2e6;
|
||||
}
|
||||
|
||||
.params-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.param-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #e9ecef;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
}
|
||||
|
||||
.param-key {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
min-width: 80px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
color: #666;
|
||||
font-family: "Courier New", monospace;
|
||||
word-break: break-all;
|
||||
flex: 1;
|
||||
}
|
||||
242
nkebao/src/pages/iframe/index.tsx
Normal file
242
nkebao/src/pages/iframe/index.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import style from "./index.module.scss";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
import { LoadingOutlined, CheckCircleOutlined } from "@ant-design/icons";
|
||||
import { Input } from "antd";
|
||||
// 声明全局的 uni 对象
|
||||
declare global {
|
||||
interface Window {
|
||||
uni: any;
|
||||
}
|
||||
}
|
||||
|
||||
interface Message {
|
||||
type: number; // 数据类型：0数据交互 1App功能调用
|
||||
data: any;
|
||||
}
|
||||
|
||||
const TYPE_EMUE = {
|
||||
CONNECT: 0,
|
||||
DATA: 1,
|
||||
FUNCTION: 2,
|
||||
CONFIG: 3,
|
||||
};
|
||||
const IframeDebugPage: React.FC = () => {
|
||||
const [receivedMessages, setReceivedMessages] = useState<string[]>([]);
|
||||
const [messageId, setMessageId] = useState(0);
|
||||
const [inputMessage, setInputMessage] = useState("");
|
||||
const [connectStatus, setConnectStatus] = useState(false);
|
||||
|
||||
// 解析 URL 参数中的消息
|
||||
const parseUrlMessage = () => {
|
||||
const search = window.location.search.substring(1);
|
||||
let messageParam = null;
|
||||
|
||||
if (search) {
|
||||
const pairs = search.split("&");
|
||||
for (const pair of pairs) {
|
||||
const [key, value] = pair.split("=");
|
||||
if (key === "message" && value) {
|
||||
messageParam = decodeURIComponent(value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (messageParam) {
|
||||
try {
|
||||
const message = JSON.parse(decodeURIComponent(messageParam));
|
||||
console.log("[存客宝]ReceiveMessage=>\n" + JSON.stringify(message));
|
||||
handleReceivedMessage(message);
|
||||
// 清除URL中的message参数
|
||||
const newUrl =
|
||||
window.location.pathname +
|
||||
window.location.search
|
||||
.replace(/[?&]message=[^&]*/, "")
|
||||
.replace(/^&/, "?");
|
||||
window.history.replaceState({}, "", newUrl);
|
||||
} catch (e) {
|
||||
console.error("解析URL消息失败:", e);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
parseUrlMessage();
|
||||
// 监听 SDK 初始化完成事件
|
||||
}, []);
|
||||
|
||||
// 处理接收到的消息
|
||||
const handleReceivedMessage = (message: Message) => {
|
||||
const messageText = `[${new Date().toLocaleTimeString()}] 收到: ${JSON.stringify(message)}`;
|
||||
setReceivedMessages(prev => [...prev, messageText]);
|
||||
console.log("message.type", message.type);
|
||||
if ([TYPE_EMUE.CONNECT].includes(message.type)) {
|
||||
setConnectStatus(true);
|
||||
}
|
||||
};
|
||||
|
||||
// 向 App 发送消息
|
||||
const sendMessageToParent = (message: Message) => {
|
||||
if (window.uni && window.uni.postMessage) {
|
||||
try {
|
||||
window.uni.postMessage({
|
||||
data: message,
|
||||
});
|
||||
console.log("[存客宝]SendMessage=>\n" + JSON.stringify(message));
|
||||
} catch (e) {
|
||||
console.error(
|
||||
"[存客宝]SendMessage=>\n" + JSON.stringify(message) + "发送失败:",
|
||||
e,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
console.error(
|
||||
"[存客宝]SendMessage=>\n" + JSON.stringify(message) + "无法发送消息",
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// 发送自定义消息到 App
|
||||
const sendCustomMessage = () => {
|
||||
if (!inputMessage.trim()) return;
|
||||
|
||||
const newMessageId = messageId + 1;
|
||||
setMessageId(newMessageId);
|
||||
|
||||
const message: Message = {
|
||||
type: TYPE_EMUE.DATA, // 数据交互
|
||||
data: {
|
||||
id: newMessageId,
|
||||
content: inputMessage,
|
||||
source: "存客宝消息源",
|
||||
timestamp: Date.now(),
|
||||
},
|
||||
};
|
||||
|
||||
sendMessageToParent(message);
|
||||
setInputMessage("");
|
||||
};
|
||||
|
||||
// 发送测试消息到 App
|
||||
const sendTestMessage = () => {
|
||||
const newMessageId = messageId + 1;
|
||||
setMessageId(newMessageId);
|
||||
|
||||
const message: Message = {
|
||||
type: TYPE_EMUE.DATA, // 数据交互
|
||||
data: {
|
||||
id: newMessageId,
|
||||
action: "ping",
|
||||
content: `存客宝测试消息 ${newMessageId}`,
|
||||
random: Math.random(),
|
||||
},
|
||||
};
|
||||
|
||||
sendMessageToParent(message);
|
||||
};
|
||||
|
||||
// 发送App功能调用消息
|
||||
const sendAppFunctionCall = () => {
|
||||
const message: Message = {
|
||||
type: 1, // App功能调用
|
||||
data: {
|
||||
action: "showToast",
|
||||
params: {
|
||||
title: "来自H5的功能调用",
|
||||
icon: "success",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
sendMessageToParent(message);
|
||||
};
|
||||
|
||||
// 清空消息列表
|
||||
const clearMessages = () => {
|
||||
setInputMessage("");
|
||||
setReceivedMessages([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<NavCommon
|
||||
title="iframe调试"
|
||||
right={
|
||||
connectStatus ? (
|
||||
<CheckCircleOutlined style={{ color: "green" }} />
|
||||
) : (
|
||||
<span>
|
||||
<span style={{ marginRight: 4, fontSize: 12 }}>连接中...</span>
|
||||
<LoadingOutlined />
|
||||
</span>
|
||||
)
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div className={style["iframe-debug-page"]}>
|
||||
<div className={style.content}>
|
||||
<div className={style["message-panel"]}>
|
||||
<h4>接收到的消息</h4>
|
||||
<div className={style["message-list"]}>
|
||||
{receivedMessages.length === 0 ? (
|
||||
<div className={style["no-messages"]}>暂无消息</div>
|
||||
) : (
|
||||
receivedMessages.map((msg, index) => (
|
||||
<div key={index} className={style["message-item"]}>
|
||||
<span className={style["message-text"]}>{msg}</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style["control-panel"]}>
|
||||
<h4>控制面板</h4>
|
||||
|
||||
<div className={style["input-group"]}>
|
||||
<Input
|
||||
type="text"
|
||||
value={inputMessage}
|
||||
onChange={e => setInputMessage(e.target.value)}
|
||||
placeholder="输入要发送的消息"
|
||||
/>
|
||||
<button
|
||||
onClick={sendCustomMessage}
|
||||
className={`${style.btn} ${style["btn-primary"]}`}
|
||||
>
|
||||
发送消息
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={style["button-group"]}>
|
||||
<button
|
||||
onClick={sendTestMessage}
|
||||
className={`${style.btn} ${style["btn-secondary"]}`}
|
||||
>
|
||||
发送测试消息
|
||||
</button>
|
||||
<button
|
||||
onClick={sendAppFunctionCall}
|
||||
className={`${style.btn} ${style["btn-warning"]}`}
|
||||
>
|
||||
功能调用
|
||||
</button>
|
||||
<button
|
||||
onClick={clearMessages}
|
||||
className={`${style.btn} ${style["btn-danger"]}`}
|
||||
>
|
||||
清空消息
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default IframeDebugPage;
|
||||
227
nkebao/src/pages/iframe/init.tsx
Normal file
227
nkebao/src/pages/iframe/init.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import style from "./index.module.scss";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
import { Input } from "antd";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
// 声明全局的 uni 对象
|
||||
declare global {
|
||||
interface Window {
|
||||
uni: any;
|
||||
}
|
||||
}
|
||||
|
||||
interface Message {
|
||||
type: number; // 数据类型：0数据交互 1App功能调用
|
||||
data: any;
|
||||
}
|
||||
|
||||
const TYPE_EMUE = {
|
||||
CONNECT: 0,
|
||||
DATA: 1,
|
||||
FUNCTION: 2,
|
||||
CONFIG: 3,
|
||||
};
|
||||
const IframeDebugPage: React.FC = () => {
|
||||
const [receivedMessages, setReceivedMessages] = useState<string[]>([]);
|
||||
const [messageId, setMessageId] = useState(0);
|
||||
const [inputMessage, setInputMessage] = useState("");
|
||||
const navigate = useNavigate();
|
||||
// 解析 URL 参数中的消息
|
||||
const parseUrlMessage = () => {
|
||||
const search = window.location.search.substring(1);
|
||||
let messageParam = null;
|
||||
|
||||
if (search) {
|
||||
const pairs = search.split("&");
|
||||
for (const pair of pairs) {
|
||||
const [key, value] = pair.split("=");
|
||||
if (key === "message" && value) {
|
||||
messageParam = decodeURIComponent(value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (messageParam) {
|
||||
try {
|
||||
const message = JSON.parse(decodeURIComponent(messageParam));
|
||||
console.log("[存客宝]ReceiveMessage=>\n" + JSON.stringify(message));
|
||||
handleReceivedMessage(message);
|
||||
// 清除URL中的message参数
|
||||
const newUrl =
|
||||
window.location.pathname +
|
||||
window.location.search
|
||||
.replace(/[?&]message=[^&]*/, "")
|
||||
.replace(/^&/, "?");
|
||||
window.history.replaceState({}, "", newUrl);
|
||||
} catch (e) {
|
||||
console.error("解析URL消息失败:", e);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
parseUrlMessage();
|
||||
// 监听 SDK 初始化完成事件
|
||||
}, []);
|
||||
|
||||
// 处理接收到的消息
|
||||
const handleReceivedMessage = (message: Message) => {
|
||||
const messageText = `[${new Date().toLocaleTimeString()}] 收到: ${JSON.stringify(message)}`;
|
||||
setReceivedMessages(prev => [...prev, messageText]);
|
||||
console.log("message.type", message.type);
|
||||
if ([TYPE_EMUE.CONFIG].includes(message.type)) {
|
||||
localStorage.setItem("paddingTop", message.data.paddingTop);
|
||||
navigate("/");
|
||||
}
|
||||
};
|
||||
|
||||
// 向 App 发送消息
|
||||
const sendMessageToParent = (message: Message) => {
|
||||
if (window.uni && window.uni.postMessage) {
|
||||
try {
|
||||
window.uni.postMessage({
|
||||
data: message,
|
||||
});
|
||||
console.log("[存客宝]SendMessage=>\n" + JSON.stringify(message));
|
||||
} catch (e) {
|
||||
console.error(
|
||||
"[存客宝]SendMessage=>\n" + JSON.stringify(message) + "发送失败:",
|
||||
e,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
console.error(
|
||||
"[存客宝]SendMessage=>\n" + JSON.stringify(message) + "无法发送消息",
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// 发送自定义消息到 App
|
||||
const sendCustomMessage = () => {
|
||||
if (!inputMessage.trim()) return;
|
||||
|
||||
const newMessageId = messageId + 1;
|
||||
setMessageId(newMessageId);
|
||||
|
||||
const message: Message = {
|
||||
type: TYPE_EMUE.DATA, // 数据交互
|
||||
data: {
|
||||
id: newMessageId,
|
||||
content: inputMessage,
|
||||
source: "存客宝消息源",
|
||||
timestamp: Date.now(),
|
||||
},
|
||||
};
|
||||
|
||||
sendMessageToParent(message);
|
||||
setInputMessage("");
|
||||
};
|
||||
|
||||
// 发送测试消息到 App
|
||||
const sendTestMessage = () => {
|
||||
const newMessageId = messageId + 1;
|
||||
setMessageId(newMessageId);
|
||||
|
||||
const message: Message = {
|
||||
type: TYPE_EMUE.DATA, // 数据交互
|
||||
data: {
|
||||
id: newMessageId,
|
||||
action: "ping",
|
||||
content: `存客宝测试消息 ${newMessageId}`,
|
||||
random: Math.random(),
|
||||
},
|
||||
};
|
||||
|
||||
sendMessageToParent(message);
|
||||
};
|
||||
|
||||
// 发送App功能调用消息
|
||||
const sendAppFunctionCall = () => {
|
||||
const message: Message = {
|
||||
type: 1, // App功能调用
|
||||
data: {
|
||||
action: "showToast",
|
||||
params: {
|
||||
title: "来自H5的功能调用",
|
||||
icon: "success",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
sendMessageToParent(message);
|
||||
};
|
||||
|
||||
// 清空消息列表
|
||||
const clearMessages = () => {
|
||||
setInputMessage("");
|
||||
setReceivedMessages([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout header={<NavCommon title="iframe调试" />}>
|
||||
<div className={style["iframe-debug-page"]}>
|
||||
<div className={style.content}>
|
||||
<div className={style["message-panel"]}>
|
||||
<h4>接收到的消息</h4>
|
||||
<div className={style["message-list"]}>
|
||||
{receivedMessages.length === 0 ? (
|
||||
<div className={style["no-messages"]}>暂无消息</div>
|
||||
) : (
|
||||
receivedMessages.map((msg, index) => (
|
||||
<div key={index} className={style["message-item"]}>
|
||||
<span className={style["message-text"]}>{msg}</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style["control-panel"]}>
|
||||
<h4>控制面板</h4>
|
||||
|
||||
<div className={style["input-group"]}>
|
||||
<Input
|
||||
type="text"
|
||||
value={inputMessage}
|
||||
onChange={e => setInputMessage(e.target.value)}
|
||||
placeholder="输入要发送的消息"
|
||||
/>
|
||||
<button
|
||||
onClick={sendCustomMessage}
|
||||
className={`${style.btn} ${style["btn-primary"]}`}
|
||||
>
|
||||
发送消息
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={style["button-group"]}>
|
||||
<button
|
||||
onClick={sendTestMessage}
|
||||
className={`${style.btn} ${style["btn-secondary"]}`}
|
||||
>
|
||||
发送测试消息
|
||||
</button>
|
||||
<button
|
||||
onClick={sendAppFunctionCall}
|
||||
className={`${style.btn} ${style["btn-warning"]}`}
|
||||
>
|
||||
功能调用
|
||||
</button>
|
||||
<button
|
||||
onClick={clearMessages}
|
||||
className={`${style.btn} ${style["btn-danger"]}`}
|
||||
>
|
||||
清空消息
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default IframeDebugPage;
|
||||
@@ -11,6 +11,7 @@ export interface LoginResponse {
|
||||
data: {
|
||||
token: string;
|
||||
token_expired: string;
|
||||
deviceTotal: number; // 设备总数
|
||||
member: {
|
||||
id: string;
|
||||
name: string;
|
||||
|
||||
@@ -116,10 +116,6 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
// 标签页样式
|
||||
.tab-container {
|
||||
display: flex;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { Form, Input, Button, Toast, Tabs, Checkbox } from "antd-mobile";
|
||||
import { Form, Input, Button, Toast, Checkbox } from "antd-mobile";
|
||||
import {
|
||||
EyeInvisibleOutline,
|
||||
EyeOutline,
|
||||
@@ -9,6 +9,8 @@ import {
|
||||
import { useUserStore } from "@/store/module/user";
|
||||
import { loginWithPassword, loginWithCode, sendVerificationCode } from "./api";
|
||||
import style from "./login.module.scss";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
|
||||
const Login: React.FC = () => {
|
||||
const [form] = Form.useForm();
|
||||
@@ -95,22 +97,32 @@ const Login: React.FC = () => {
|
||||
}
|
||||
console.log(response, "response");
|
||||
|
||||
// 获取设备总数
|
||||
const deviceTotal = response.deviceTotal || 0;
|
||||
console.log(deviceTotal, "deviceTotal");
|
||||
|
||||
// 更新状态管理（token会自动存储到localStorage，用户信息存储在状态管理中）
|
||||
login(response.token, response.member);
|
||||
login(response.token, response.member, deviceTotal);
|
||||
|
||||
Toast.show({ content: "登录成功", position: "top" });
|
||||
|
||||
// 跳转到首页或重定向URL
|
||||
const returnUrl = searchParams.get("returnUrl");
|
||||
if (returnUrl) {
|
||||
const decodedUrl = decodeURIComponent(returnUrl);
|
||||
if (isLoginPage(decodedUrl)) {
|
||||
navigate("/");
|
||||
// 根据设备数量判断跳转
|
||||
if (deviceTotal > 0) {
|
||||
// 有设备，跳转到首页或重定向URL
|
||||
const returnUrl = searchParams.get("returnUrl");
|
||||
if (returnUrl) {
|
||||
const decodedUrl = decodeURIComponent(returnUrl);
|
||||
if (isLoginPage(decodedUrl)) {
|
||||
navigate("/");
|
||||
} else {
|
||||
window.location.href = decodedUrl;
|
||||
}
|
||||
} else {
|
||||
window.location.href = decodedUrl;
|
||||
navigate("/");
|
||||
}
|
||||
} else {
|
||||
navigate("/");
|
||||
// 没有设备，跳转到引导页面
|
||||
navigate("/guide");
|
||||
}
|
||||
} catch (error: any) {
|
||||
// 错误已在request中处理，这里不需要额外处理
|
||||
@@ -127,9 +139,11 @@ const Login: React.FC = () => {
|
||||
const handleAppleLogin = () => {
|
||||
Toast.show({ content: "Apple登录功能开发中", position: "top" });
|
||||
};
|
||||
|
||||
const paddingTop = localStorage.getItem("paddingTop") || "44px";
|
||||
return (
|
||||
<div className={style["login-page"]}>
|
||||
<div style={{ height: paddingTop }}></div>
|
||||
<div style={{ height: "80px" }}></div>
|
||||
{/* 背景装饰 */}
|
||||
<div className={style["bg-decoration"]}>
|
||||
<div className={style["bg-circle"]}></div>
|
||||
|
||||
@@ -12,14 +12,14 @@ export function getContentLibraryDetail(id: string): Promise<any> {
|
||||
|
||||
// 创建内容库
|
||||
export function createContentLibrary(
|
||||
params: CreateContentLibraryParams
|
||||
params: CreateContentLibraryParams,
|
||||
): Promise<any> {
|
||||
return request("/v1/content/library/create", params, "POST");
|
||||
}
|
||||
|
||||
// 更新内容库
|
||||
export function updateContentLibrary(
|
||||
params: UpdateContentLibraryParams
|
||||
params: UpdateContentLibraryParams,
|
||||
): Promise<any> {
|
||||
const { id, ...data } = params;
|
||||
return request(`/v1/content/library/update`, { id, ...data }, "POST");
|
||||
|
||||
@@ -22,14 +22,14 @@ export function getContentLibraryDetail(id: string): Promise<any> {
|
||||
|
||||
// 创建内容库
|
||||
export function createContentLibrary(
|
||||
params: CreateContentLibraryParams
|
||||
params: CreateContentLibraryParams,
|
||||
): Promise<any> {
|
||||
return request("/v1/content/library/create", params, "POST");
|
||||
}
|
||||
|
||||
// 更新内容库
|
||||
export function updateContentLibrary(
|
||||
params: UpdateContentLibraryParams
|
||||
params: UpdateContentLibraryParams,
|
||||
): Promise<any> {
|
||||
const { id, ...data } = params;
|
||||
return request(`/v1/content/library/update`, { id, ...data }, "POST");
|
||||
@@ -43,7 +43,7 @@ export function deleteContentLibrary(id: string): Promise<any> {
|
||||
// 切换内容库状态
|
||||
export function toggleContentLibraryStatus(
|
||||
id: string,
|
||||
status: number
|
||||
status: number,
|
||||
): Promise<any> {
|
||||
return request("/v1/content/library/update-status", { id, status }, "POST");
|
||||
}
|
||||
|
||||
@@ -182,7 +182,7 @@ const ContentLibraryList: React.FC = () => {
|
||||
const filteredLibraries = libraries.filter(
|
||||
library =>
|
||||
library.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
library.creatorName?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
library.creatorName?.toLowerCase().includes(searchQuery.toLowerCase()),
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { NavBar } from "antd-mobile";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
import {
|
||||
BellOutlined,
|
||||
MobileOutlined,
|
||||
UserOutlined,
|
||||
MessageOutlined,
|
||||
TeamOutlined,
|
||||
RiseOutlined,
|
||||
@@ -27,13 +25,6 @@ interface DashboardData {
|
||||
aliveWechatNum?: number;
|
||||
}
|
||||
|
||||
interface TodayStatsData {
|
||||
momentsNum?: number;
|
||||
groupPushNum?: number;
|
||||
passRate?: string;
|
||||
sysActive?: string;
|
||||
}
|
||||
|
||||
interface SevenDayStatsData {
|
||||
date?: string[];
|
||||
allNum?: number[];
|
||||
@@ -140,15 +131,13 @@ const Home: React.FC = () => {
|
||||
navigate("/wechat-accounts");
|
||||
};
|
||||
|
||||
const handleAliveWechatClick = () => {
|
||||
navigate("/wechat-accounts?wechatStatus=1");
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<NavBar back={null} style={{ background: "#fff" }}>
|
||||
<div className={style["nav-title"]}>
|
||||
<span className={style["nav-text"]}>存客宝</span>
|
||||
</div>
|
||||
</NavBar>
|
||||
}
|
||||
header={<NavCommon left={<></>} title="存客宝" />}
|
||||
footer={<MeauMobile activeKey="home" />}
|
||||
loading={isLoading}
|
||||
>
|
||||
@@ -170,7 +159,10 @@ const Home: React.FC = () => {
|
||||
<TeamOutlined style={{ fontSize: 20, color: "#3b82f6" }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["stat-card"]}>
|
||||
<div
|
||||
className={style["stat-card"]}
|
||||
onClick={handleAliveWechatClick}
|
||||
>
|
||||
<div className={style["stat-label"]}>在线微信号</div>
|
||||
<div className={style["stat-value"]}>
|
||||
<span>{dashboard.aliveWechatNum || 35}</span>
|
||||
@@ -206,8 +198,8 @@ const Home: React.FC = () => {
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/scenarios/list/${scenario.id}/${encodeURIComponent(
|
||||
scenario.name
|
||||
)}`
|
||||
scenario.name,
|
||||
)}`,
|
||||
)
|
||||
}
|
||||
>
|
||||
|
||||
17
nkebao/src/pages/mobile/mine/consumption-records/api.ts
Normal file
17
nkebao/src/pages/mobile/mine/consumption-records/api.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import request from "@/api/request";
|
||||
import { ConsumptionRecordsResponse, ConsumptionRecordDetail } from "./data";
|
||||
|
||||
// 获取消费记录列表
|
||||
export function getConsumptionRecords(params: {
|
||||
page: number;
|
||||
limit: number;
|
||||
}): Promise<ConsumptionRecordsResponse> {
|
||||
return request("/v1/consumption-records", params, "GET");
|
||||
}
|
||||
|
||||
// 获取消费记录详情
|
||||
export function getConsumptionRecordDetail(
|
||||
id: string,
|
||||
): Promise<ConsumptionRecordDetail> {
|
||||
return request(`/v1/consumption-records/${id}`, {}, "GET");
|
||||
}
|
||||
26
nkebao/src/pages/mobile/mine/consumption-records/data.ts
Normal file
26
nkebao/src/pages/mobile/mine/consumption-records/data.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
// 消费记录类型定义
|
||||
export interface ConsumptionRecord {
|
||||
id: string;
|
||||
type: "recharge" | "ai_service" | "version_upgrade";
|
||||
amount: number;
|
||||
description: string;
|
||||
createTime: string;
|
||||
status: "success" | "pending" | "failed";
|
||||
balance?: number;
|
||||
}
|
||||
|
||||
// API响应类型
|
||||
export interface ConsumptionRecordsResponse {
|
||||
list: ConsumptionRecord[];
|
||||
total: number;
|
||||
page: number;
|
||||
limit: number;
|
||||
}
|
||||
|
||||
// 消费记录详情
|
||||
export interface ConsumptionRecordDetail extends ConsumptionRecord {
|
||||
orderNo?: string;
|
||||
paymentMethod?: string;
|
||||
remark?: string;
|
||||
operator?: string;
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
.records-page {
|
||||
padding: 16px;
|
||||
background: #f7f8fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.records-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.record-card {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.record-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.record-info {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.type-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.record-details {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.record-description {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #222;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.record-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.time-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.record-amount {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.amount-text {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.balance-info {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
color: var(--primary-color);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
color: #ccc;
|
||||
}
|
||||
212
nkebao/src/pages/mobile/mine/consumption-records/index.tsx
Normal file
212
nkebao/src/pages/mobile/mine/consumption-records/index.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Card, List, Tag, SpinLoading, Empty } from "antd-mobile";
|
||||
import { useUserStore } from "@/store/module/user";
|
||||
import style from "./index.module.scss";
|
||||
import {
|
||||
WalletOutlined,
|
||||
RobotOutlined,
|
||||
CrownOutlined,
|
||||
ClockCircleOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import { getConsumptionRecords } from "./api";
|
||||
import { ConsumptionRecord } from "./data";
|
||||
|
||||
const ConsumptionRecords: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { user } = useUserStore();
|
||||
const [records, setRecords] = useState<ConsumptionRecord[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [page, setPage] = useState(1);
|
||||
|
||||
useEffect(() => {
|
||||
loadRecords();
|
||||
}, []);
|
||||
|
||||
const loadRecords = async (reset = false) => {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const currentPage = reset ? 1 : page;
|
||||
const response = await getConsumptionRecords({
|
||||
page: currentPage,
|
||||
limit: 20,
|
||||
});
|
||||
|
||||
const newRecords = response.list || [];
|
||||
setRecords(prev => (reset ? newRecords : [...prev, ...newRecords]));
|
||||
setHasMore(newRecords.length === 20);
|
||||
if (reset) setPage(1);
|
||||
else setPage(currentPage + 1);
|
||||
} catch (error) {
|
||||
console.error("加载消费记录失败:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getTypeIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case "recharge":
|
||||
return <WalletOutlined className={style["type-icon"]} />;
|
||||
case "ai_service":
|
||||
return <RobotOutlined className={style["type-icon"]} />;
|
||||
case "version_upgrade":
|
||||
return <CrownOutlined className={style["type-icon"]} />;
|
||||
default:
|
||||
return <WalletOutlined className={style["type-icon"]} />;
|
||||
}
|
||||
};
|
||||
|
||||
const getTypeColor = (type: string) => {
|
||||
switch (type) {
|
||||
case "recharge":
|
||||
return "#52c41a";
|
||||
case "ai_service":
|
||||
return "#1890ff";
|
||||
case "version_upgrade":
|
||||
return "#722ed1";
|
||||
default:
|
||||
return "#666";
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case "success":
|
||||
return "成功";
|
||||
case "pending":
|
||||
return "处理中";
|
||||
case "failed":
|
||||
return "失败";
|
||||
default:
|
||||
return "未知";
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case "success":
|
||||
return "#52c41a";
|
||||
case "pending":
|
||||
return "#faad14";
|
||||
case "failed":
|
||||
return "#ff4d4f";
|
||||
default:
|
||||
return "#666";
|
||||
}
|
||||
};
|
||||
|
||||
const formatAmount = (amount: number, type: string) => {
|
||||
if (type === "recharge") {
|
||||
return `+￥${amount.toFixed(2)}`;
|
||||
} else {
|
||||
return `-￥${amount.toFixed(2)}`;
|
||||
}
|
||||
};
|
||||
|
||||
const formatTime = (timeStr: string) => {
|
||||
const date = new Date(timeStr);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (days === 0) {
|
||||
return date.toLocaleTimeString("zh-CN", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
} else if (days === 1) {
|
||||
return (
|
||||
"昨天 " +
|
||||
date.toLocaleTimeString("zh-CN", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})
|
||||
);
|
||||
} else if (days < 7) {
|
||||
return `${days}天前`;
|
||||
} else {
|
||||
return date.toLocaleDateString("zh-CN");
|
||||
}
|
||||
};
|
||||
|
||||
const renderRecordItem = (record: ConsumptionRecord) => (
|
||||
<Card key={record.id} className={style["record-card"]}>
|
||||
<div className={style["record-header"]}>
|
||||
<div className={style["record-info"]}>
|
||||
<div
|
||||
className={style["type-icon-wrapper"]}
|
||||
style={{ backgroundColor: `${getTypeColor(record.type)}20` }}
|
||||
>
|
||||
{getTypeIcon(record.type)}
|
||||
</div>
|
||||
<div className={style["record-details"]}>
|
||||
<div className={style["record-description"]}>
|
||||
{record.description}
|
||||
</div>
|
||||
<div className={style["record-time"]}>
|
||||
<ClockCircleOutlined className={style["time-icon"]} />
|
||||
{formatTime(record.createTime)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["record-amount"]}>
|
||||
<div
|
||||
className={style["amount-text"]}
|
||||
style={{
|
||||
color: record.type === "recharge" ? "#52c41a" : "#ff4d4f",
|
||||
}}
|
||||
>
|
||||
{formatAmount(record.amount, record.type)}
|
||||
</div>
|
||||
<Tag
|
||||
color={getStatusColor(record.status)}
|
||||
className={style["status-tag"]}
|
||||
>
|
||||
{getStatusText(record.status)}
|
||||
</Tag>
|
||||
</div>
|
||||
</div>
|
||||
{record.balance !== undefined && (
|
||||
<div className={style["balance-info"]}>
|
||||
余额: ￥{record.balance.toFixed(2)}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout header={<NavCommon title="消费记录" />}>
|
||||
<div className={style["records-page"]}>
|
||||
{records.length === 0 && !loading ? (
|
||||
<Empty
|
||||
className={style["empty-state"]}
|
||||
description="暂无消费记录"
|
||||
image={<WalletOutlined className={style["empty-icon"]} />}
|
||||
/>
|
||||
) : (
|
||||
<div className={style["records-list"]}>
|
||||
{records.map(renderRecordItem)}
|
||||
{loading && (
|
||||
<div className={style["loading-container"]}>
|
||||
<SpinLoading color="primary" />
|
||||
<div className={style["loading-text"]}>加载中...</div>
|
||||
</div>
|
||||
)}
|
||||
{!loading && hasMore && (
|
||||
<div className={style["load-more"]} onClick={() => loadRecords()}>
|
||||
加载更多
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConsumptionRecords;
|
||||
@@ -1,17 +1,24 @@
|
||||
import React, { useEffect, useState, useCallback, useRef } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { NavBar, Tabs, Switch, Toast, SpinLoading, Button } from "antd-mobile";
|
||||
import { SettingOutlined, RedoOutlined } from "@ant-design/icons";
|
||||
import {
|
||||
NavBar,
|
||||
Tabs,
|
||||
Switch,
|
||||
Toast,
|
||||
SpinLoading,
|
||||
Button,
|
||||
Avatar,
|
||||
} from "antd-mobile";
|
||||
import { SettingOutlined, RedoOutlined, UserOutlined } from "@ant-design/icons";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import {
|
||||
fetchDeviceDetail,
|
||||
fetchDeviceRelatedAccounts,
|
||||
fetchDeviceHandleLogs,
|
||||
updateDeviceTaskConfig,
|
||||
} from "@/api/devices";
|
||||
} from "./api";
|
||||
import type { Device, WechatAccount, HandleLog } from "@/types/device";
|
||||
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
const DeviceDetail: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
@@ -23,7 +30,7 @@ const DeviceDetail: React.FC = () => {
|
||||
const [logs, setLogs] = useState<HandleLog[]>([]);
|
||||
const [logsLoading, setLogsLoading] = useState(false);
|
||||
const [featureSaving, setFeatureSaving] = useState<{ [k: string]: boolean }>(
|
||||
{}
|
||||
{},
|
||||
);
|
||||
|
||||
// 获取设备详情
|
||||
@@ -82,7 +89,7 @@ const DeviceDetail: React.FC = () => {
|
||||
// 功能开关
|
||||
const handleFeatureChange = async (
|
||||
feature: keyof Device["features"],
|
||||
checked: boolean
|
||||
checked: boolean,
|
||||
) => {
|
||||
if (!id) return;
|
||||
setFeatureSaving(prev => ({ ...prev, [feature]: true }));
|
||||
@@ -94,7 +101,7 @@ const DeviceDetail: React.FC = () => {
|
||||
...prev,
|
||||
features: { ...prev.features, [feature]: checked },
|
||||
}
|
||||
: prev
|
||||
: prev,
|
||||
);
|
||||
Toast.show({
|
||||
content: `${getFeatureName(feature)}已${checked ? "开启" : "关闭"}`,
|
||||
@@ -119,19 +126,50 @@ const DeviceDetail: React.FC = () => {
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<NavBar
|
||||
onBack={() => navigate(-1)}
|
||||
style={{ background: "#fff" }}
|
||||
right={
|
||||
<Button size="small" color="primary">
|
||||
<SettingOutlined />
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<span style={{ color: "var(--primary-color)", fontWeight: 600 }}>
|
||||
设备详情
|
||||
</span>
|
||||
</NavBar>
|
||||
<>
|
||||
<NavCommon title="设备详情" />
|
||||
|
||||
{/* 基本信息卡片 */}
|
||||
{device && (
|
||||
<div
|
||||
style={{
|
||||
background: "#fff",
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 16,
|
||||
boxShadow: "0 1px 4px #eee",
|
||||
margin: "0 12px",
|
||||
}}
|
||||
>
|
||||
<div style={{ fontWeight: 600, fontSize: 18 }}>
|
||||
{device.memo || "未命名设备"}
|
||||
</div>
|
||||
<div style={{ fontSize: 13, color: "#888", marginTop: 4 }}>
|
||||
IMEI: {device.imei}
|
||||
</div>
|
||||
<div style={{ fontSize: 13, color: "#888", marginTop: 4 }}>
|
||||
微信号: {device.wechatId || "未绑定"}
|
||||
</div>
|
||||
<div style={{ fontSize: 13, color: "#888", marginTop: 4 }}>
|
||||
好友数: {device.totalFriend ?? "-"}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color:
|
||||
device.status === "online" || device.alive === 1
|
||||
? "#52c41a"
|
||||
: "#aaa",
|
||||
marginTop: 4,
|
||||
}}
|
||||
>
|
||||
{device.status === "online" || device.alive === 1
|
||||
? "在线"
|
||||
: "离线"}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
loading={loading}
|
||||
>
|
||||
@@ -142,43 +180,6 @@ const DeviceDetail: React.FC = () => {
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ padding: 12 }}>
|
||||
{/* 基本信息卡片 */}
|
||||
<div
|
||||
style={{
|
||||
background: "#fff",
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 16,
|
||||
boxShadow: "0 1px 4px #eee",
|
||||
}}
|
||||
>
|
||||
<div style={{ fontWeight: 600, fontSize: 18 }}>
|
||||
{device.memo || "未命名设备"}
|
||||
</div>
|
||||
<div style={{ fontSize: 13, color: "#888", marginTop: 4 }}>
|
||||
IMEI: {device.imei}
|
||||
</div>
|
||||
<div style={{ fontSize: 13, color: "#888", marginTop: 4 }}>
|
||||
微信号: {device.wechatId || "未绑定"}
|
||||
</div>
|
||||
<div style={{ fontSize: 13, color: "#888", marginTop: 4 }}>
|
||||
好友数: {device.totalFriend ?? "-"}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color:
|
||||
device.status === "online" || device.alive === 1
|
||||
? "#52c41a"
|
||||
: "#aaa",
|
||||
marginTop: 4,
|
||||
}}
|
||||
>
|
||||
{device.status === "online" || device.alive === 1
|
||||
? "在线"
|
||||
: "离线"}
|
||||
</div>
|
||||
</div>
|
||||
{/* 标签页 */}
|
||||
<Tabs activeKey={tab} onChange={setTab} style={{ marginBottom: 12 }}>
|
||||
<Tabs.Tab title="功能开关" key="info" />
|
||||
@@ -199,9 +200,9 @@ const DeviceDetail: React.FC = () => {
|
||||
}}
|
||||
>
|
||||
{["autoAddFriend", "autoReply", "momentsSync", "aiChat"].map(
|
||||
f => (
|
||||
(f, index) => (
|
||||
<div
|
||||
key={f}
|
||||
key={`${f}-${index}`}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
@@ -219,12 +220,12 @@ const DeviceDetail: React.FC = () => {
|
||||
onChange={checked =>
|
||||
handleFeatureChange(
|
||||
f as keyof Device["features"],
|
||||
checked
|
||||
checked,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@@ -254,9 +255,9 @@ const DeviceDetail: React.FC = () => {
|
||||
<div
|
||||
style={{ display: "flex", flexDirection: "column", gap: 12 }}
|
||||
>
|
||||
{accounts.map(acc => (
|
||||
{accounts.map((acc, index) => (
|
||||
<div
|
||||
key={acc.id}
|
||||
key={`${acc.id}-${index}`}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
@@ -265,16 +266,36 @@ const DeviceDetail: React.FC = () => {
|
||||
borderRadius: 8,
|
||||
padding: 10,
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate(`/wechat-accounts/detail/${acc.wechatId}`);
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={acc.avatar || "/placeholder.svg"}
|
||||
<Avatar
|
||||
src={acc.avatar}
|
||||
alt={acc.nickname}
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
background: "#eee",
|
||||
}}
|
||||
fallback={
|
||||
<div
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
background:
|
||||
"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
|
||||
color: "white",
|
||||
fontSize: 16,
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
>
|
||||
<UserOutlined />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontWeight: 500 }}>{acc.nickname}</div>
|
||||
@@ -334,9 +355,9 @@ const DeviceDetail: React.FC = () => {
|
||||
<div
|
||||
style={{ display: "flex", flexDirection: "column", gap: 12 }}
|
||||
>
|
||||
{logs.map(log => (
|
||||
{logs.map((log, index) => (
|
||||
<div
|
||||
key={log.id}
|
||||
key={`${log.id}-${index}`}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import request from "./request";
|
||||
import request from "@/api/request";
|
||||
|
||||
// 获取设备列表
|
||||
export const fetchDeviceList = (params: {
|
||||
@@ -19,7 +19,7 @@ export const fetchDeviceRelatedAccounts = (id: string | number) =>
|
||||
export const fetchDeviceHandleLogs = (
|
||||
id: string | number,
|
||||
page = 1,
|
||||
limit = 10
|
||||
limit = 10,
|
||||
) => request(`/v1/devices/${id}/handle-logs`, { page, limit }, "GET");
|
||||
|
||||
// 更新设备任务配置
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useEffect, useRef, useState, useCallback } from "react";
|
||||
import { NavBar, Popup, Tabs, Toast, SpinLoading, Dialog } from "antd-mobile";
|
||||
import { Popup, Tabs, Toast, SpinLoading } from "antd-mobile";
|
||||
import { Button, Input, Pagination, Checkbox } from "antd";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { AddOutline, DeleteOutline } from "antd-mobile-icons";
|
||||
@@ -7,18 +7,18 @@ import {
|
||||
ReloadOutlined,
|
||||
SearchOutlined,
|
||||
QrcodeOutlined,
|
||||
ArrowLeftOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import {
|
||||
fetchDeviceList,
|
||||
fetchDeviceQRCode,
|
||||
addDeviceByImei,
|
||||
deleteDevice,
|
||||
} from "@/api/devices";
|
||||
} from "./api";
|
||||
import type { Device } from "@/types/device";
|
||||
import { comfirm } from "@/utils/common";
|
||||
import { useUserStore } from "@/store/module/user";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
|
||||
const Devices: React.FC = () => {
|
||||
// 设备列表相关
|
||||
@@ -47,6 +47,7 @@ const Devices: React.FC = () => {
|
||||
const [delLoading, setDelLoading] = useState(false);
|
||||
|
||||
const navigate = useNavigate();
|
||||
const { user } = useUserStore();
|
||||
// 加载设备列表
|
||||
const loadDevices = useCallback(
|
||||
async (reset = false) => {
|
||||
@@ -68,7 +69,7 @@ const Devices: React.FC = () => {
|
||||
setLoading(false);
|
||||
}
|
||||
},
|
||||
[loading, search, page]
|
||||
[loading, search, page],
|
||||
);
|
||||
|
||||
// 首次加载和搜索
|
||||
@@ -86,7 +87,7 @@ const Devices: React.FC = () => {
|
||||
setPage(p => p + 1);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.5 }
|
||||
{ threshold: 0.5 },
|
||||
);
|
||||
if (observerRef.current) observer.observe(observerRef.current);
|
||||
return () => observer.disconnect();
|
||||
@@ -112,7 +113,7 @@ const Devices: React.FC = () => {
|
||||
setQrLoading(true);
|
||||
setQrCode(null);
|
||||
try {
|
||||
const accountId = localStorage.getItem("s2_accountId") || "";
|
||||
const accountId = user.s2_accountId;
|
||||
if (!accountId) throw new Error("未获取到用户信息");
|
||||
const res = await fetchDeviceQRCode(accountId);
|
||||
setQrCode(res.qrCode);
|
||||
@@ -123,6 +124,11 @@ const Devices: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const addDevice = async () => {
|
||||
await handleGetQr();
|
||||
setAddVisible(true);
|
||||
};
|
||||
|
||||
// 手动添加设备
|
||||
const handleAddDevice = async () => {
|
||||
if (!imei.trim() || !name.trim()) {
|
||||
@@ -166,7 +172,7 @@ const Devices: React.FC = () => {
|
||||
try {
|
||||
await comfirm(
|
||||
`将删除${selected.length}个设备，删除后本设备配置的计划任务操作也将失效。确认删除？`,
|
||||
{ title: "确认删除", confirmText: "确认删除", cancelText: "取消" }
|
||||
{ title: "确认删除", confirmText: "确认删除", cancelText: "取消" },
|
||||
);
|
||||
handleDelete();
|
||||
} catch {
|
||||
@@ -189,33 +195,15 @@ const Devices: React.FC = () => {
|
||||
<Layout
|
||||
header={
|
||||
<>
|
||||
<NavBar
|
||||
back={null}
|
||||
left={
|
||||
<div className="nav-title">
|
||||
<ArrowLeftOutlined
|
||||
twoToneColor="#1677ff"
|
||||
onClick={() => navigate(-1)}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
style={{ background: "#fff" }}
|
||||
<NavCommon
|
||||
title="设备管理"
|
||||
right={
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={() => setAddVisible(true)}
|
||||
>
|
||||
<Button size="small" type="primary" onClick={() => addDevice()}>
|
||||
<AddOutline />
|
||||
添加设备
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<span style={{ color: "var(--primary-color)", fontWeight: 600 }}>
|
||||
设备管理
|
||||
</span>
|
||||
</NavBar>
|
||||
|
||||
/>
|
||||
<div style={{ padding: "12px 12px 0 12px", background: "#fff" }}>
|
||||
{/* 搜索栏 */}
|
||||
<div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
|
||||
@@ -301,7 +289,7 @@ const Devices: React.FC = () => {
|
||||
setSelected(prev =>
|
||||
e.target.checked
|
||||
? [...prev, device.id!]
|
||||
: prev.filter(id => id !== device.id)
|
||||
: prev.filter(id => id !== device.id),
|
||||
);
|
||||
}}
|
||||
onClick={e => e.stopPropagation()}
|
||||
@@ -373,7 +361,7 @@ const Devices: React.FC = () => {
|
||||
{addTab === "scan" && (
|
||||
<div style={{ textAlign: "center", minHeight: 200 }}>
|
||||
<Button
|
||||
type="error"
|
||||
type="primary"
|
||||
onClick={handleGetQr}
|
||||
loading={qrLoading}
|
||||
icon={<QrcodeOutlined />}
|
||||
@@ -390,6 +378,7 @@ const Devices: React.FC = () => {
|
||||
height: 180,
|
||||
background: "#f5f5f5",
|
||||
borderRadius: 8,
|
||||
margin: "0 auto",
|
||||
}}
|
||||
/>
|
||||
<div style={{ color: "#888", fontSize: 12, marginTop: 8 }}>
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Card, NavBar, List, Button, Dialog, Toast } from "antd-mobile";
|
||||
import { Card, NavBar, List, Button } from "antd-mobile";
|
||||
import {
|
||||
LogoutOutlined,
|
||||
PhoneOutlined,
|
||||
MessageOutlined,
|
||||
DatabaseOutlined,
|
||||
FolderOpenOutlined,
|
||||
BellOutlined,
|
||||
SettingOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
@@ -15,6 +13,7 @@ import Layout from "@/components/Layout/Layout";
|
||||
import style from "./index.module.scss";
|
||||
import { useUserStore } from "@/store/module/user";
|
||||
import { getDashboard } from "./api";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
const Mine: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { user } = useUserStore();
|
||||
@@ -25,7 +24,6 @@ const Mine: React.FC = () => {
|
||||
content: 156,
|
||||
balance: 0,
|
||||
});
|
||||
const [showLogoutDialog, setShowLogoutDialog] = useState(false);
|
||||
|
||||
// 用户信息
|
||||
const currentUserInfo = {
|
||||
@@ -102,48 +100,10 @@ const Mine: React.FC = () => {
|
||||
loadStats();
|
||||
}, []);
|
||||
|
||||
const handleLogout = () => {
|
||||
// 清除本地存储的用户信息
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("token_expired");
|
||||
localStorage.removeItem("s2_accountId");
|
||||
localStorage.removeItem("userInfo");
|
||||
setShowLogoutDialog(false);
|
||||
navigate("/login");
|
||||
Toast.show({
|
||||
content: "退出成功",
|
||||
position: "top",
|
||||
});
|
||||
};
|
||||
|
||||
const handleFunctionClick = (path: string) => {
|
||||
navigate(path);
|
||||
};
|
||||
|
||||
// 渲染用户头像
|
||||
const renderUserAvatar = () => {
|
||||
if (currentUserInfo.avatar) {
|
||||
return <img src={currentUserInfo.avatar} alt="头像" />;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "#1890ff",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: "white",
|
||||
fontSize: "24px",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
售
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染功能模块图标
|
||||
const renderModuleIcon = (module: any) => (
|
||||
<div
|
||||
@@ -165,13 +125,7 @@ const Mine: React.FC = () => {
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<NavBar back={null} style={{ background: "#fff" }}>
|
||||
<div style={{ color: "var(--primary-color)", fontWeight: 600 }}>
|
||||
我的
|
||||
</div>
|
||||
</NavBar>
|
||||
}
|
||||
header={<NavCommon title="我的" />}
|
||||
footer={<MeauMobile activeKey="mine" />}
|
||||
>
|
||||
<div className={style["mine-page"]}>
|
||||
@@ -252,42 +206,7 @@ const Mine: React.FC = () => {
|
||||
))}
|
||||
</List>
|
||||
</Card>
|
||||
|
||||
{/* 退出登录按钮 */}
|
||||
<Button
|
||||
block
|
||||
color="danger"
|
||||
fill="outline"
|
||||
className={style["logout-btn"]}
|
||||
onClick={() => setShowLogoutDialog(true)}
|
||||
>
|
||||
<LogoutOutlined style={{ marginRight: "8px" }} />
|
||||
退出登录
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 退出登录确认对话框 */}
|
||||
<Dialog
|
||||
content="您确定要退出登录吗？退出后需要重新登录才能使用完整功能。"
|
||||
visible={showLogoutDialog}
|
||||
closeOnAction
|
||||
actions={[
|
||||
[
|
||||
{
|
||||
key: "cancel",
|
||||
text: "取消",
|
||||
},
|
||||
{
|
||||
key: "confirm",
|
||||
text: "确认退出",
|
||||
bold: true,
|
||||
danger: true,
|
||||
onClick: handleLogout,
|
||||
},
|
||||
],
|
||||
]}
|
||||
onClose={() => setShowLogoutDialog(false)}
|
||||
/>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,11 +1,52 @@
|
||||
.recharge-page {
|
||||
padding: 16px 0 60px 0;
|
||||
background: #f7f8fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.record-btn {
|
||||
color: var(--primary-color);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(24, 142, 238, 0.1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba(24, 142, 238, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.recharge-tabs {
|
||||
:global(.adm-tabs-header) {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
:global(.adm-tabs-tab) {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:global(.adm-tabs-tab-active) {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
:global(.adm-tabs-tab-line) {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
margin: 16px;
|
||||
margin-bottom: 16px;
|
||||
background: #f6ffed;
|
||||
border: 1px solid #b7eb8f;
|
||||
border-radius: 12px;
|
||||
@@ -43,24 +84,24 @@
|
||||
}
|
||||
|
||||
.quick-card {
|
||||
margin: 16px;
|
||||
margin-bottom: 16px;
|
||||
.quick-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.desc-card {
|
||||
margin: 16px;
|
||||
margin: 16px 0px;
|
||||
background: #fffbe6;
|
||||
border: 1px solid #ffe58f;
|
||||
}
|
||||
|
||||
.warn-card {
|
||||
margin: 16px;
|
||||
margin: 16px 0;
|
||||
background: #fff2e8;
|
||||
border: 1px solid #ffbb96;
|
||||
}
|
||||
@@ -125,3 +166,275 @@
|
||||
color: #faad14;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// AI服务样式
|
||||
.ai-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ai-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.ai-icon {
|
||||
font-size: 24px;
|
||||
color: var(--primary-color);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.ai-tag {
|
||||
background: #ff6b35;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ai-description {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ai-services {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.ai-service-card {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.service-header {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.service-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
font-size: 24px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f0f0f0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.service-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.service-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.service-price {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.service-description {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.service-features {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.feature-check {
|
||||
color: #52c41a;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.usage-progress {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.usage-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: var(--primary-color);
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.usage-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// 版本套餐样式
|
||||
.version-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.version-icon {
|
||||
font-size: 24px;
|
||||
color: #722ed1;
|
||||
}
|
||||
|
||||
.version-description {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.version-packages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.version-card {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.package-header {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.package-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.package-icon {
|
||||
font-size: 24px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f0f0f0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.package-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.package-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.package-tag {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tag-blue {
|
||||
background: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.tag-green {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.package-price {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.package-description {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.package-features {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.features-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.package-status {
|
||||
text-align: center;
|
||||
color: #52c41a;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.upgrade-btn {
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,123 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Card, Button, Toast, NavBar } from "antd-mobile";
|
||||
import { Card, Button, Toast, NavBar, Tabs } from "antd-mobile";
|
||||
import { useUserStore } from "@/store/module/user";
|
||||
import style from "./index.module.scss";
|
||||
import { WalletOutlined, WarningOutlined } from "@ant-design/icons";
|
||||
import {
|
||||
WalletOutlined,
|
||||
WarningOutlined,
|
||||
ClockCircleOutlined,
|
||||
RobotOutlined,
|
||||
CrownOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
|
||||
const quickAmounts = [50, 100, 200, 500, 1000];
|
||||
|
||||
// AI服务套餐数据
|
||||
const aiServicePackages = [
|
||||
{
|
||||
id: 1,
|
||||
name: "入门套餐",
|
||||
tag: "推荐",
|
||||
tagColor: "blue",
|
||||
description: "适合个人用户体验AI服务",
|
||||
usage: "可使用AI服务约110次",
|
||||
price: 100,
|
||||
originalPrice: 110,
|
||||
gift: 10,
|
||||
actualAmount: 110,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "标准套餐",
|
||||
tag: "热门",
|
||||
tagColor: "green",
|
||||
description: "适合小团队日常使用",
|
||||
usage: "可使用AI服务约580次",
|
||||
price: 500,
|
||||
originalPrice: 580,
|
||||
gift: 80,
|
||||
actualAmount: 580,
|
||||
},
|
||||
];
|
||||
|
||||
// AI服务列表数据
|
||||
const aiServices = [
|
||||
{
|
||||
id: 1,
|
||||
name: "添加好友及打招呼",
|
||||
icon: "💬",
|
||||
price: 1,
|
||||
description: "AI智能添加好友并发送个性化打招呼消息",
|
||||
features: ["智能筛选目标用户", "发送个性化打招呼消息", "自动记录添加结果"],
|
||||
usage: { current: 15, total: 450 },
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "小室AI内容生产",
|
||||
icon: "⚡",
|
||||
price: 1,
|
||||
description: "AI智能创建朋友圈内容,智能配文与朋友圈内容",
|
||||
features: ["智能生成朋友圈文案", "AI配文智能文案", "内容智能排版优化"],
|
||||
usage: { current: 28, total: 680 },
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "智能分发服务",
|
||||
icon: "📤",
|
||||
price: 1,
|
||||
description: "AI智能分发内容到多个平台",
|
||||
features: ["多平台智能分发", "内容智能优化", "分发效果分析"],
|
||||
usage: { current: 12, total: 300 },
|
||||
},
|
||||
];
|
||||
|
||||
// 版本套餐数据
|
||||
const versionPackages = [
|
||||
{
|
||||
id: 1,
|
||||
name: "普通版本",
|
||||
icon: "📦",
|
||||
price: "免费",
|
||||
description: "充值即可使用,包含基础AI功能",
|
||||
features: ["基础AI服务", "标准客服支持", "基础数据统计"],
|
||||
status: "当前使用中",
|
||||
buttonText: null,
|
||||
tagColor: undefined,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "标准版本",
|
||||
icon: "👑",
|
||||
price: "¥98/月",
|
||||
tag: "推荐",
|
||||
tagColor: "blue",
|
||||
description: "适合中小企业,AI功能更丰富",
|
||||
features: ["高级AI服务", "优先客服支持", "详细数据分析", "API接口访问"],
|
||||
status: null,
|
||||
buttonText: "立即升级",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "企业版本",
|
||||
icon: "🏢",
|
||||
price: "¥1980/月",
|
||||
description: "适合大型企业,提供专属服务",
|
||||
features: [
|
||||
"专属AI服务",
|
||||
"24小时专属客服",
|
||||
"高级数据分析",
|
||||
"API接口访问",
|
||||
"专属技术支持",
|
||||
],
|
||||
status: null,
|
||||
buttonText: "立即升级",
|
||||
tagColor: undefined,
|
||||
},
|
||||
];
|
||||
|
||||
const Recharge: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { user } = useUserStore();
|
||||
@@ -16,6 +125,7 @@ const Recharge: React.FC = () => {
|
||||
const [balance, setBalance] = useState(0);
|
||||
const [selected, setSelected] = useState<number | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState("account");
|
||||
|
||||
// 充值操作
|
||||
const handleRecharge = async () => {
|
||||
@@ -31,68 +141,228 @@ const Recharge: React.FC = () => {
|
||||
}, 1200);
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout header={<NavCommon title="账户充值" />}>
|
||||
<div className={style["recharge-page"]}>
|
||||
<Card className={style["balance-card"]}>
|
||||
<div className={style["balance-content"]}>
|
||||
<WalletOutlined className={style["wallet-icon"]} />
|
||||
<div className={style["balance-info"]}>
|
||||
<div className={style["balance-label"]}>当前余额</div>
|
||||
<div className={style["balance-amount"]}>
|
||||
￥{balance.toFixed(2)}
|
||||
// 渲染账户充值tab内容
|
||||
const renderAccountRecharge = () => (
|
||||
<div className={style["tab-content"]}>
|
||||
<Card className={style["balance-card"]}>
|
||||
<div className={style["balance-content"]}>
|
||||
<WalletOutlined className={style["wallet-icon"]} />
|
||||
<div className={style["balance-info"]}>
|
||||
<div className={style["balance-label"]}>当前余额</div>
|
||||
<div className={style["balance-amount"]}>
|
||||
￥{balance.toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card className={style["quick-card"]}>
|
||||
<div className={style["quick-title"]}>快捷充值</div>
|
||||
<div className={style["quick-list"]}>
|
||||
{quickAmounts.map(amt => (
|
||||
<Button
|
||||
key={amt}
|
||||
color={selected === amt ? "primary" : "default"}
|
||||
className={
|
||||
selected === amt
|
||||
? style["quick-btn-active"]
|
||||
: style["quick-btn"]
|
||||
}
|
||||
onClick={() => setSelected(amt)}
|
||||
>
|
||||
￥{amt}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
block
|
||||
color="primary"
|
||||
size="large"
|
||||
className={style["recharge-main-btn"]}
|
||||
loading={loading}
|
||||
onClick={handleRecharge}
|
||||
>
|
||||
立即充值
|
||||
</Button>
|
||||
</Card>
|
||||
<Card className={style["desc-card"]}>
|
||||
<div className={style["desc-title"]}>服务消耗</div>
|
||||
<div className={style["desc-text"]}>
|
||||
使用以下服务将从余额中扣除相应费用。
|
||||
</div>
|
||||
</Card>
|
||||
{balance < 10 && (
|
||||
<Card className={style["warn-card"]}>
|
||||
<div className={style["warn-content"]}>
|
||||
<WarningOutlined className={style["warn-icon"]} />
|
||||
<div className={style["warn-info"]}>
|
||||
<div className={style["warn-title"]}>余额不足提醒</div>
|
||||
<div className={style["warn-text"]}>
|
||||
当前余额较低，建议及时充值以免影响服务使用
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card className={style["quick-card"]}>
|
||||
<div className={style["quick-title"]}>快捷充值</div>
|
||||
<div className={style["quick-list"]}>
|
||||
{quickAmounts.map(amt => (
|
||||
<Button
|
||||
key={amt}
|
||||
color={selected === amt ? "primary" : "default"}
|
||||
className={
|
||||
selected === amt
|
||||
? style["quick-btn-active"]
|
||||
: style["quick-btn"]
|
||||
}
|
||||
onClick={() => setSelected(amt)}
|
||||
>
|
||||
￥{amt}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
block
|
||||
color="primary"
|
||||
size="large"
|
||||
className={style["recharge-main-btn"]}
|
||||
loading={loading}
|
||||
onClick={handleRecharge}
|
||||
>
|
||||
立即充值
|
||||
</Button>
|
||||
</Card>
|
||||
<Card className={style["desc-card"]}>
|
||||
<div className={style["desc-title"]}>服务消耗</div>
|
||||
<div className={style["desc-text"]}>
|
||||
使用以下服务将从余额中扣除相应费用。
|
||||
</div>
|
||||
</Card>
|
||||
{balance < 10 && (
|
||||
<Card className={style["warn-card"]}>
|
||||
<div className={style["warn-content"]}>
|
||||
<WarningOutlined className={style["warn-icon"]} />
|
||||
<div className={style["warn-info"]}>
|
||||
<div className={style["warn-title"]}>余额不足提醒</div>
|
||||
<div className={style["warn-text"]}>
|
||||
当前余额较低，建议及时充值以免影响服务使用
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
// 渲染AI服务tab内容
|
||||
const renderAiServices = () => (
|
||||
<div className={style["tab-content"]}>
|
||||
<div className={style["ai-header"]}>
|
||||
<div className={style["ai-title"]}>
|
||||
<RobotOutlined className={style["ai-icon"]} />
|
||||
AI智能服务收费
|
||||
</div>
|
||||
<div className={style["ai-tag"]}>统一按次收费</div>
|
||||
</div>
|
||||
<div className={style["ai-description"]}>
|
||||
三项核心AI服务,按使用次数收费,每次1元
|
||||
</div>
|
||||
|
||||
<div className={style["ai-services"]}>
|
||||
{aiServices.map(service => (
|
||||
<Card key={service.id} className={style["ai-service-card"]}>
|
||||
<div className={style["service-header"]}>
|
||||
<div className={style["service-info"]}>
|
||||
<div className={style["service-icon"]}>{service.icon}</div>
|
||||
<div className={style["service-details"]}>
|
||||
<div className={style["service-name"]}>{service.name}</div>
|
||||
<div className={style["service-price"]}>
|
||||
¥{service.price}/次
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["service-description"]}>
|
||||
{service.description}
|
||||
</div>
|
||||
<div className={style["service-features"]}>
|
||||
{service.features.map((feature, index) => (
|
||||
<div key={index} className={style["feature-item"]}>
|
||||
<span className={style["feature-check"]}>✓</span>
|
||||
{feature}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={style["usage-progress"]}>
|
||||
<div className={style["usage-label"]}>今日使用进度</div>
|
||||
<div className={style["progress-bar"]}>
|
||||
<div
|
||||
className={style["progress-fill"]}
|
||||
style={{
|
||||
width: `${(service.usage.current / service.usage.total) * 100}%`,
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
<div className={style["usage-text"]}>
|
||||
{service.usage.current} / {service.usage.total}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// 渲染版本套餐tab内容
|
||||
const renderVersionPackages = () => (
|
||||
<div className={style["tab-content"]}>
|
||||
<div className={style["version-header"]}>
|
||||
<CrownOutlined className={style["version-icon"]} />
|
||||
<span>存客宝版本套餐</span>
|
||||
</div>
|
||||
<div className={style["version-description"]}>
|
||||
选择适合的版本,享受不同级别的AI服务
|
||||
</div>
|
||||
|
||||
<div className={style["version-packages"]}>
|
||||
{versionPackages.map(pkg => (
|
||||
<Card key={pkg.id} className={style["version-card"]}>
|
||||
<div className={style["package-header"]}>
|
||||
<div className={style["package-info"]}>
|
||||
<div className={style["package-icon"]}>{pkg.icon}</div>
|
||||
<div className={style["package-details"]}>
|
||||
<div className={style["package-name"]}>
|
||||
{pkg.name}
|
||||
{pkg.tag && (
|
||||
<span
|
||||
className={`${style["package-tag"]} ${style[`tag-${pkg.tagColor || "blue"}`]}`}
|
||||
>
|
||||
{pkg.tag}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={style["package-price"]}>{pkg.price}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["package-description"]}>
|
||||
{pkg.description}
|
||||
</div>
|
||||
<div className={style["package-features"]}>
|
||||
<div className={style["features-title"]}>包含功能:</div>
|
||||
{pkg.features.map((feature, index) => (
|
||||
<div key={index} className={style["feature-item"]}>
|
||||
<span className={style["feature-check"]}>✓</span>
|
||||
{feature}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{pkg.status && (
|
||||
<div className={style["package-status"]}>{pkg.status}</div>
|
||||
)}
|
||||
{pkg.buttonText && (
|
||||
<Button
|
||||
block
|
||||
color="primary"
|
||||
className={style["upgrade-btn"]}
|
||||
onClick={() => {
|
||||
Toast.show({ content: "升级功能开发中", position: "top" });
|
||||
}}
|
||||
>
|
||||
{pkg.buttonText}
|
||||
</Button>
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<NavCommon
|
||||
title="充值中心"
|
||||
right={
|
||||
<div
|
||||
className={style["record-btn"]}
|
||||
onClick={() => navigate("/mine/consumption-records")}
|
||||
>
|
||||
<ClockCircleOutlined />
|
||||
记录
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div className={style["recharge-page"]}>
|
||||
<Tabs
|
||||
activeKey={activeTab}
|
||||
onChange={setActiveTab}
|
||||
className={style["recharge-tabs"]}
|
||||
>
|
||||
<Tabs.Tab title="账户充值" key="account">
|
||||
{renderAccountRecharge()}
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab title="AI服务" key="ai">
|
||||
{renderAiServices()}
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab title="版本套餐" key="version">
|
||||
{renderVersionPackages()}
|
||||
</Tabs.Tab>
|
||||
</Tabs>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
152
nkebao/src/pages/mobile/mine/setting/About.tsx
Normal file
152
nkebao/src/pages/mobile/mine/setting/About.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import React from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { NavBar, Card } from "antd-mobile";
|
||||
import {
|
||||
InfoCircleOutlined,
|
||||
MailOutlined,
|
||||
PhoneOutlined,
|
||||
GlobalOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import style from "./index.module.scss";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
const About: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
// 应用信息
|
||||
const appInfo = {
|
||||
name: "存客宝管理系统",
|
||||
version: "1.0.0",
|
||||
buildNumber: "20241201",
|
||||
description: "专业的存客宝管理平台，提供设备管理、自动营销、数据分析等功能",
|
||||
};
|
||||
|
||||
// 功能特性
|
||||
const features = [
|
||||
{
|
||||
title: "设备管理",
|
||||
description: "统一管理微信设备和账号，实时监控设备状态",
|
||||
},
|
||||
{
|
||||
title: "自动营销",
|
||||
description: "智能点赞、群发推送、朋友圈同步等自动化营销功能",
|
||||
},
|
||||
{
|
||||
title: "流量池管理",
|
||||
description: "高效管理用户流量池，精准分组和标签管理",
|
||||
},
|
||||
{
|
||||
title: "内容库",
|
||||
description: "丰富的营销内容库，支持多种媒体格式",
|
||||
},
|
||||
{
|
||||
title: "数据分析",
|
||||
description: "详细的数据统计和分析，助力营销决策",
|
||||
},
|
||||
];
|
||||
|
||||
// 联系信息
|
||||
const contactInfo = [
|
||||
{
|
||||
id: "email",
|
||||
title: "邮箱支持",
|
||||
value: "support@example.com",
|
||||
icon: <MailOutlined />,
|
||||
action: () => {
|
||||
// 复制邮箱到剪贴板
|
||||
navigator.clipboard.writeText("support@example.com");
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "phone",
|
||||
title: "客服热线",
|
||||
value: "400-123-4567",
|
||||
icon: <PhoneOutlined />,
|
||||
action: () => {
|
||||
// 拨打电话
|
||||
window.location.href = "tel:400-123-4567";
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "website",
|
||||
title: "官方网站",
|
||||
value: "www.example.com",
|
||||
icon: <GlobalOutlined />,
|
||||
action: () => {
|
||||
// 打开网站
|
||||
window.open("https://www.example.com", "_blank");
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout header={<NavCommon title="关于我们" />}>
|
||||
<div className={style["setting-page"]}>
|
||||
{/* 应用信息卡片 */}
|
||||
<Card className={style["app-info-card"]}>
|
||||
<div className={style["app-info"]}>
|
||||
<div className={style["app-logo"]}>
|
||||
<div className={style["logo-placeholder"]}>
|
||||
<img src="/public/logo.png" alt="logo" />
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["app-details"]}>
|
||||
<div className={style["app-name"]}>{appInfo.name}</div>
|
||||
<div className={style["app-version"]}>版本 {appInfo.version}</div>
|
||||
<div className={style["app-build"]}>
|
||||
Build {appInfo.buildNumber}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["app-description"]}>{appInfo.description}</div>
|
||||
</Card>
|
||||
|
||||
{/* 功能特性 */}
|
||||
<Card className={style["setting-group"]}>
|
||||
<div className={style["group-title"]}>功能特性</div>
|
||||
<div className={style["features-grid"]}>
|
||||
{features.map((feature, index) => (
|
||||
<div key={index} className={style["feature-card"]}>
|
||||
<div className={style["feature-icon"]}>
|
||||
<div className={style["icon-placeholder"]}>{index + 1}</div>
|
||||
</div>
|
||||
<div className={style["feature-content"]}>
|
||||
<div className={style["feature-title"]}>{feature.title}</div>
|
||||
<div className={style["feature-description"]}>
|
||||
{feature.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 联系信息 */}
|
||||
{/* <Card className={style["setting-group"]}>
|
||||
<div className={style["group-title"]}>联系我们</div>
|
||||
<List>
|
||||
{contactInfo.map(item => (
|
||||
<List.Item
|
||||
key={item.id}
|
||||
prefix={item.icon}
|
||||
title={item.title}
|
||||
description={item.value}
|
||||
extra={<RightOutlined style={{ color: "#ccc" }} />}
|
||||
onClick={item.action}
|
||||
arrow
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
</Card> */}
|
||||
|
||||
{/* 版权信息 */}
|
||||
<div className={style["copyright-info"]}>
|
||||
<div className={style["copyright-text"]}>© 2024 存客宝管理系统</div>
|
||||
<div className={style["copyright-subtext"]}>保留所有权利</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
135
nkebao/src/pages/mobile/mine/setting/Privacy.tsx
Normal file
135
nkebao/src/pages/mobile/mine/setting/Privacy.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
import React from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { NavBar, Card } from "antd-mobile";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import style from "./index.module.scss";
|
||||
|
||||
const Privacy: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<NavBar onBack={() => navigate(-1)} style={{ background: "#fff" }}>
|
||||
<span style={{ color: "var(--primary-color)", fontWeight: 600 }}>
|
||||
用户隐私协议
|
||||
</span>
|
||||
</NavBar>
|
||||
}
|
||||
>
|
||||
<div className={style["setting-page"]}>
|
||||
<Card className={style["privacy-card"]}>
|
||||
<div className={style["privacy-content"]}>
|
||||
<h2>用户隐私协议</h2>
|
||||
<p className={style["update-time"]}>更新时间：2024年12月1日</p>
|
||||
|
||||
<section>
|
||||
<h3>1. 信息收集</h3>
|
||||
<p>我们收集的信息包括：</p>
|
||||
<ul>
|
||||
<li>账户信息：用户名、手机号、邮箱等注册信息</li>
|
||||
<li>设备信息：设备型号、操作系统版本、设备标识符</li>
|
||||
<li>使用数据：应用使用情况、功能访问记录</li>
|
||||
<li>微信相关：微信账号信息、好友数据（经您授权）</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>2. 信息使用</h3>
|
||||
<p>我们使用收集的信息用于：</p>
|
||||
<ul>
|
||||
<li>提供和改进服务功能</li>
|
||||
<li>个性化用户体验</li>
|
||||
<li>安全防护和风险控制</li>
|
||||
<li>客户支持和问题解决</li>
|
||||
<li>合规性要求和法律义务</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>3. 信息共享</h3>
|
||||
<p>我们不会向第三方出售、交易或转让您的个人信息，除非：</p>
|
||||
<ul>
|
||||
<li>获得您的明确同意</li>
|
||||
<li>法律法规要求</li>
|
||||
<li>保护用户和公众的安全</li>
|
||||
<li>与授权合作伙伴共享必要信息</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>4. 数据安全</h3>
|
||||
<p>我们采取多种安全措施保护您的信息：</p>
|
||||
<ul>
|
||||
<li>数据加密传输和存储</li>
|
||||
<li>访问控制和身份验证</li>
|
||||
<li>定期安全审计和更新</li>
|
||||
<li>员工保密培训</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>5. 您的权利</h3>
|
||||
<p>您享有以下权利：</p>
|
||||
<ul>
|
||||
<li>访问和查看您的个人信息</li>
|
||||
<li>更正或更新不准确的信息</li>
|
||||
<li>删除您的账户和相关数据</li>
|
||||
<li>撤回同意和限制处理</li>
|
||||
<li>数据可携带性</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>6. 数据保留</h3>
|
||||
<p>我们仅在必要期间保留您的信息：</p>
|
||||
<ul>
|
||||
<li>账户活跃期间持续保留</li>
|
||||
<li>法律法规要求的保留期</li>
|
||||
<li>业务运营必要的保留期</li>
|
||||
<li>您主动删除后及时清除</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>7. 儿童隐私</h3>
|
||||
<p>
|
||||
我们的服务不面向13岁以下儿童。如果发现收集了儿童信息，我们将立即删除。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>8. 国际传输</h3>
|
||||
<p>
|
||||
您的信息可能在中国境内或境外处理。我们将确保适当的保护措施。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>9. 协议更新</h3>
|
||||
<p>
|
||||
我们可能会更新本隐私协议。重大变更将通过应用内通知或邮件告知您。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>10. 联系我们</h3>
|
||||
<p>如果您对本隐私协议有任何疑问，请联系我们：</p>
|
||||
<ul>
|
||||
<li>邮箱：privacy@example.com</li>
|
||||
<li>电话：400-123-4567</li>
|
||||
<li>地址：北京市朝阳区xxx大厦</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div className={style["privacy-footer"]}>
|
||||
<p>感谢您使用存客宝管理系统！</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Privacy;
|
||||
188
nkebao/src/pages/mobile/mine/setting/README.md
Normal file
188
nkebao/src/pages/mobile/mine/setting/README.md
Normal file
@@ -0,0 +1,188 @@
|
||||
# 设置功能说明
|
||||
|
||||
## 概述
|
||||
|
||||
设置功能为存客宝管理系统提供了完整的用户配置管理，包括账户设置、通知设置、应用设置等多个模块。
|
||||
|
||||
## 功能模块
|
||||
|
||||
### 1. 主设置页面 (`index.tsx`)
|
||||
|
||||
**功能特性：**
|
||||
|
||||
- 用户信息展示
|
||||
- 分组设置项管理
|
||||
- 设置状态持久化
|
||||
|
||||
**主要组件：**
|
||||
|
||||
- 用户信息卡片：显示头像、昵称、账号、角色
|
||||
- 设置分组：账户设置、通知设置、应用设置、其他
|
||||
- 版本信息：显示应用版本和版权信息
|
||||
|
||||
### 2. 安全设置页面 (`SecuritySetting.tsx`)
|
||||
|
||||
**功能特性：**
|
||||
|
||||
- 密码修改
|
||||
- 手机号绑定
|
||||
- 登录设备管理
|
||||
- 安全建议
|
||||
|
||||
**主要功能：**
|
||||
|
||||
- 修改密码：支持旧密码验证和新密码确认
|
||||
- 绑定手机号：提高账号安全性
|
||||
- 设备管理：查看和管理已登录设备
|
||||
- 安全提醒：提供账号安全建议
|
||||
|
||||
### 3. 关于页面 (`About.tsx`)
|
||||
|
||||
**功能特性：**
|
||||
|
||||
- 应用信息展示
|
||||
- 功能特性介绍
|
||||
- 联系方式
|
||||
- 法律信息
|
||||
|
||||
**主要内容：**
|
||||
|
||||
- 应用版本信息
|
||||
- 功能介绍：设备管理、自动营销、流量池管理等
|
||||
- 联系方式：邮箱、电话、官网
|
||||
- 法律文档：隐私政策、用户协议、开源许可
|
||||
|
||||
## 设置管理
|
||||
|
||||
### 设置Store (`settings.ts`)
|
||||
|
||||
**功能特性：**
|
||||
|
||||
- 全局设置状态管理
|
||||
- 设置持久化存储
|
||||
- 设置工具函数
|
||||
|
||||
**支持的设置项：**
|
||||
|
||||
#### 通知设置
|
||||
|
||||
- `pushNotification`: 推送通知开关
|
||||
- `emailNotification`: 邮件通知开关
|
||||
- `soundNotification`: 声音提醒开关
|
||||
|
||||
#### 应用设置
|
||||
|
||||
- `autoLogin`: 自动登录开关
|
||||
- `language`: 语言设置
|
||||
- `timezone`: 时区设置
|
||||
|
||||
#### 隐私设置
|
||||
|
||||
- `analyticsEnabled`: 数据分析开关
|
||||
- `crashReportEnabled`: 崩溃报告开关
|
||||
|
||||
#### 功能设置
|
||||
|
||||
- `autoSave`: 自动保存开关
|
||||
- `showTutorial`: 教程显示开关
|
||||
|
||||
### 工具函数
|
||||
|
||||
```typescript
|
||||
// 获取设置值
|
||||
const value = getSetting("pushNotification");
|
||||
|
||||
// 设置值
|
||||
setSetting("autoLogin", true);
|
||||
```
|
||||
|
||||
## 样式设计
|
||||
|
||||
### 设计原则
|
||||
|
||||
- 移动端优先设计
|
||||
- 统一的视觉风格
|
||||
- 良好的用户体验
|
||||
|
||||
### 样式特性
|
||||
|
||||
- 响应式布局
|
||||
- 卡片式设计
|
||||
- 圆角边框
|
||||
- 阴影效果
|
||||
- 渐变背景
|
||||
|
||||
## 路由配置
|
||||
|
||||
```typescript
|
||||
// 设置相关路由
|
||||
{
|
||||
path: "/settings",
|
||||
element: <Setting />,
|
||||
auth: true,
|
||||
},
|
||||
{
|
||||
path: "/security",
|
||||
element: <SecuritySetting />,
|
||||
auth: true,
|
||||
},
|
||||
{
|
||||
path: "/about",
|
||||
element: <About />,
|
||||
auth: true,
|
||||
}
|
||||
```
|
||||
|
||||
## 使用示例
|
||||
|
||||
### 基本使用
|
||||
|
||||
```typescript
|
||||
import { useSettingsStore } from '@/store/module/settings';
|
||||
|
||||
const MyComponent = () => {
|
||||
const { settings, updateSetting } = useSettingsStore();
|
||||
|
||||
const handleToggleNotification = () => {
|
||||
updateSetting('pushNotification', !settings.pushNotification);
|
||||
};
|
||||
|
||||
return (
|
||||
<Switch
|
||||
checked={settings.pushNotification}
|
||||
onChange={handleToggleNotification}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## 扩展功能
|
||||
|
||||
### 添加新设置项
|
||||
|
||||
1. 在 `AppSettings` 接口中添加新字段
|
||||
2. 在 `defaultSettings` 中设置默认值
|
||||
3. 在设置页面中添加对应的UI组件
|
||||
4. 在样式文件中添加相应的样式
|
||||
|
||||
### 添加新设置页面
|
||||
|
||||
1. 创建新的页面组件
|
||||
2. 在路由配置中添加路由
|
||||
3. 在主设置页面中添加导航链接
|
||||
4. 添加相应的样式
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **数据持久化**：所有设置都会自动保存到本地存储
|
||||
2. **权限控制**：某些设置可能需要管理员权限
|
||||
3. **兼容性**：确保在不同设备和浏览器上的兼容性
|
||||
4. **性能优化**：避免频繁的设置更新影响性能
|
||||
|
||||
## 未来规划
|
||||
|
||||
- [ ] 多语言支持
|
||||
- [ ] 设置导入导出
|
||||
- [ ] 云端同步设置
|
||||
- [ ] 设置备份恢复
|
||||
- [ ] 高级设置选项
|
||||
224
nkebao/src/pages/mobile/mine/setting/SecuritySetting.tsx
Normal file
224
nkebao/src/pages/mobile/mine/setting/SecuritySetting.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { NavBar, List, Dialog, Toast, Card, Input } from "antd-mobile";
|
||||
import {
|
||||
LockOutlined,
|
||||
MobileOutlined,
|
||||
SafetyOutlined,
|
||||
RightOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import { useUserStore } from "@/store/module/user";
|
||||
import style from "./index.module.scss";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
const SecuritySetting: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { user } = useUserStore();
|
||||
const [showPasswordDialog, setShowPasswordDialog] = useState(false);
|
||||
const [passwordForm, setPasswordForm] = useState({
|
||||
oldPassword: "",
|
||||
newPassword: "",
|
||||
confirmPassword: "",
|
||||
});
|
||||
|
||||
// 修改密码
|
||||
const handleChangePassword = async () => {
|
||||
const { oldPassword, newPassword, confirmPassword } = passwordForm;
|
||||
|
||||
if (!oldPassword || !newPassword || !confirmPassword) {
|
||||
Toast.show({ content: "请填写完整信息", position: "top" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
Toast.show({ content: "两次输入的新密码不一致", position: "top" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword.length < 6) {
|
||||
Toast.show({ content: "新密码长度不能少于6位", position: "top" });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// TODO: 调用修改密码API
|
||||
Toast.show({ content: "密码修改成功", position: "top" });
|
||||
setShowPasswordDialog(false);
|
||||
setPasswordForm({
|
||||
oldPassword: "",
|
||||
newPassword: "",
|
||||
confirmPassword: "",
|
||||
});
|
||||
} catch (error: any) {
|
||||
Toast.show({ content: error.message || "密码修改失败", position: "top" });
|
||||
}
|
||||
};
|
||||
|
||||
// 绑定手机号
|
||||
const handleBindPhone = () => {
|
||||
Toast.show({ content: "功能开发中", position: "top" });
|
||||
};
|
||||
|
||||
// 登录设备管理
|
||||
const handleDeviceManagement = () => {
|
||||
Toast.show({ content: "功能开发中", position: "top" });
|
||||
};
|
||||
|
||||
// 安全设置项
|
||||
const securityItems = [
|
||||
{
|
||||
id: "password",
|
||||
title: "修改密码",
|
||||
description: "定期更换密码，保护账号安全",
|
||||
icon: <LockOutlined />,
|
||||
onClick: () => setShowPasswordDialog(true),
|
||||
},
|
||||
{
|
||||
id: "phone",
|
||||
title: "绑定手机号",
|
||||
description: user?.phone
|
||||
? `已绑定：${user.phone}`
|
||||
: "绑定手机号，提高账号安全性",
|
||||
icon: <MobileOutlined />,
|
||||
onClick: handleBindPhone,
|
||||
},
|
||||
{
|
||||
id: "devices",
|
||||
title: "登录设备管理",
|
||||
description: "查看和管理已登录的设备",
|
||||
icon: <SafetyOutlined />,
|
||||
onClick: handleDeviceManagement,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout header={<NavCommon title="安全设置" />}>
|
||||
<div className={style["setting-page"]}>
|
||||
{/* 安全提示卡片 */}
|
||||
<Card className={style["security-tip-card"]}>
|
||||
<div className={style["tip-content"]}>
|
||||
<SafetyOutlined className={style["tip-icon"]} />
|
||||
<div className={style["tip-text"]}>
|
||||
<div className={style["tip-title"]}>账号安全提醒</div>
|
||||
<div className={style["tip-description"]}>
|
||||
建议定期更换密码，开启双重验证，保护您的账号安全
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 安全设置列表 */}
|
||||
<Card className={style["setting-group"]}>
|
||||
<div className={style["group-title"]}>安全设置</div>
|
||||
<List>
|
||||
{securityItems.map(item => (
|
||||
<List.Item
|
||||
key={item.id}
|
||||
prefix={item.icon}
|
||||
title={item.title}
|
||||
description={item.description}
|
||||
onClick={item.onClick}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
</Card>
|
||||
|
||||
{/* 安全建议 */}
|
||||
<Card className={style["security-advice-card"]}>
|
||||
<div className={style["advice-title"]}>安全建议</div>
|
||||
<div className={style["advice-list"]}>
|
||||
<div className={style["advice-item"]}>
|
||||
<span className={style["advice-dot"]}>•</span>
|
||||
<span>使用强密码，包含字母、数字和特殊字符</span>
|
||||
</div>
|
||||
<div className={style["advice-item"]}>
|
||||
<span className={style["advice-dot"]}>•</span>
|
||||
<span>定期更换密码，建议每3个月更换一次</span>
|
||||
</div>
|
||||
<div className={style["advice-item"]}>
|
||||
<span className={style["advice-dot"]}>•</span>
|
||||
<span>不要在公共场所登录账号</span>
|
||||
</div>
|
||||
<div className={style["advice-item"]}>
|
||||
<span className={style["advice-dot"]}>•</span>
|
||||
<span>及时清理不常用的登录设备</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 修改密码对话框 */}
|
||||
<Dialog
|
||||
visible={showPasswordDialog}
|
||||
title="修改密码"
|
||||
content={
|
||||
<div className={style["password-form"]}>
|
||||
<div className={style["line"]}>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="请输入当前密码"
|
||||
value={passwordForm.oldPassword}
|
||||
onChange={value =>
|
||||
setPasswordForm(prev => ({ ...prev, oldPassword: value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className={style["line"]}>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="请输入新密码"
|
||||
value={passwordForm.newPassword}
|
||||
onChange={value =>
|
||||
setPasswordForm(prev => ({ ...prev, newPassword: value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className={style["line"]}>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="请确认新密码"
|
||||
value={passwordForm.confirmPassword}
|
||||
onChange={value =>
|
||||
setPasswordForm(prev => ({ ...prev, confirmPassword: value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
closeOnAction
|
||||
actions={[
|
||||
[
|
||||
{
|
||||
key: "cancel",
|
||||
text: "取消",
|
||||
onClick: () => {
|
||||
setShowPasswordDialog(false);
|
||||
setPasswordForm({
|
||||
oldPassword: "",
|
||||
newPassword: "",
|
||||
confirmPassword: "",
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "confirm",
|
||||
text: "确认修改",
|
||||
bold: true,
|
||||
onClick: handleChangePassword,
|
||||
},
|
||||
],
|
||||
]}
|
||||
onClose={() => {
|
||||
setShowPasswordDialog(false);
|
||||
setPasswordForm({
|
||||
oldPassword: "",
|
||||
newPassword: "",
|
||||
confirmPassword: "",
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default SecuritySetting;
|
||||
180
nkebao/src/pages/mobile/mine/setting/UserSetting.tsx
Normal file
180
nkebao/src/pages/mobile/mine/setting/UserSetting.tsx
Normal file
@@ -0,0 +1,180 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { NavBar, Input, Button, Toast, Card } from "antd-mobile";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import AvatarUpload from "@/components/Upload/AvatarUpload";
|
||||
import { useUserStore } from "@/store/module/user";
|
||||
import style from "./index.module.scss";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
// 更新用户信息接口
|
||||
const updateUserInfo = async (data: { username: string; avatar?: string }) => {
|
||||
const response = await fetch("/api/user/update", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("更新用户信息失败");
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
const UserSetting: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { user, setUser } = useUserStore();
|
||||
const [nickname, setNickname] = useState(user?.username || "");
|
||||
const [avatar, setAvatar] = useState(user?.avatar || "");
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// 保存个人信息
|
||||
const handleSave = async () => {
|
||||
if (!nickname.trim()) {
|
||||
Toast.show({ content: "昵称不能为空", position: "top" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (nickname.length > 20) {
|
||||
Toast.show({ content: "昵称长度不能超过20个字符", position: "top" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
Toast.show({ content: "用户信息不存在", position: "top" });
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
// 调用API更新用户信息
|
||||
const updateData: { username: string; avatar?: string } = {
|
||||
username: nickname,
|
||||
};
|
||||
|
||||
// 如果头像有变化，也一起更新
|
||||
if (avatar !== user.avatar) {
|
||||
updateData.avatar = avatar;
|
||||
}
|
||||
|
||||
await updateUserInfo(updateData);
|
||||
|
||||
// 更新本地用户信息
|
||||
setUser({
|
||||
...user,
|
||||
username: nickname,
|
||||
avatar: avatar,
|
||||
});
|
||||
|
||||
Toast.show({ content: "保存成功", position: "top" });
|
||||
navigate(-1);
|
||||
} catch (error: any) {
|
||||
console.error("保存失败:", error);
|
||||
Toast.show({ content: error.message || "保存失败", position: "top" });
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 重置信息
|
||||
const handleReset = () => {
|
||||
setNickname(user?.username || "");
|
||||
setAvatar(user?.avatar || "");
|
||||
Toast.show({ content: "已重置", position: "top" });
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={<NavCommon title="个人信息" />}
|
||||
footer={
|
||||
<div className={style["save-buttons"]}>
|
||||
<Button block color="primary" onClick={handleSave} loading={saving}>
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className={style["setting-page"]}>
|
||||
{/* 头像设置 */}
|
||||
<Card className={style["avatar-card"]}>
|
||||
<div className={style["avatar-section"]}>
|
||||
<div className={style["avatar-title"]}>头像</div>
|
||||
<div className={style["avatar-container"]}>
|
||||
<AvatarUpload
|
||||
value={avatar}
|
||||
onChange={setAvatar}
|
||||
size={100}
|
||||
disabled={saving}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 基本信息 */}
|
||||
<Card className={style["info-card"]}>
|
||||
<div className={style["info-section"]}>
|
||||
<div className={style["info-title"]}>基本信息</div>
|
||||
|
||||
<div className={style["input-group"]}>
|
||||
<label className={style["input-label"]}>昵称</label>
|
||||
<Input
|
||||
className={style["input-field"]}
|
||||
value={nickname}
|
||||
onChange={setNickname}
|
||||
placeholder="请输入昵称"
|
||||
maxLength={20}
|
||||
clearable
|
||||
disabled={saving}
|
||||
/>
|
||||
<div className={style["input-tip"]}>{nickname.length}/20</div>
|
||||
</div>
|
||||
|
||||
<div className={style["input-group"]}>
|
||||
<label className={style["input-label"]}>账号</label>
|
||||
<div className={style["readonly-field"]}>
|
||||
{user?.account || "未知账号"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style["input-group"]}>
|
||||
<label className={style["input-label"]}>手机号</label>
|
||||
<div className={style["readonly-field"]}>
|
||||
{user?.phone || "未绑定"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style["input-group"]}>
|
||||
<label className={style["input-label"]}>角色</label>
|
||||
<div className={style["readonly-field"]}>
|
||||
{user?.isAdmin === 1 ? "管理员" : "普通用户"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 提示信息 */}
|
||||
<Card className={style["tip-card"]}>
|
||||
<div className={style["tip-content"]}>
|
||||
<div className={style["tip-title"]}>温馨提示</div>
|
||||
<div className={style["tip-list"]}>
|
||||
<div className={style["tip-item"]}>
|
||||
• 昵称修改后将在下次登录时生效
|
||||
</div>
|
||||
<div className={style["tip-item"]}>
|
||||
• 头像支持JPG、PNG格式，建议尺寸200x200像素
|
||||
</div>
|
||||
<div className={style["tip-item"]}>
|
||||
• 请确保上传的头像符合相关法律法规
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserSetting;
|
||||
852
nkebao/src/pages/mobile/mine/setting/index.module.scss
Normal file
852
nkebao/src/pages/mobile/mine/setting/index.module.scss
Normal file
@@ -0,0 +1,852 @@
|
||||
.save-buttons {
|
||||
padding: 12px;
|
||||
}
|
||||
.setting-page {
|
||||
padding: 12px;
|
||||
|
||||
.user-card {
|
||||
margin-bottom: 16px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-color) 0%,
|
||||
var(--primary-color-dark) 100%
|
||||
);
|
||||
position: relative;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.avatar {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 35px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
position: relative;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-color) 0%,
|
||||
var(--primary-color-dark) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.user-details {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.username {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin-bottom: 6px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.account {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: 6px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.role {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
display: inline-block;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.user-actions {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting-group {
|
||||
margin-bottom: 16px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
|
||||
.group-title {
|
||||
padding: 16px 20px 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.group-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-list {
|
||||
:global(.adm-list) {
|
||||
--border-inner: solid 1px #f0f0f0;
|
||||
--border-top: none;
|
||||
--border-bottom: none;
|
||||
--adm-font-size-main: 16px;
|
||||
--adm-color-text: #333;
|
||||
--adm-color-text-secondary: #666;
|
||||
|
||||
.adm-list-item {
|
||||
padding: 16px 20px;
|
||||
min-height: 64px;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: #f8f9fa;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #e9ecef;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.adm-list-item-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.adm-list-item-content-prefix {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.adm-list-item-content-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.adm-list-item-content-main-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.adm-list-item-content-main-description {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.adm-list-item-content-extra {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
color: var(--primary-color);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
background: rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.setting-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.setting-badge {
|
||||
background: #ff4d4f;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.version-info {
|
||||
.version-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.app-logo {
|
||||
flex-shrink: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.version-details {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
|
||||
.app-name {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.version-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.build-info {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 安全设置页面样式
|
||||
.security-tip-card {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 100%);
|
||||
|
||||
.tip-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 16px;
|
||||
gap: 12px;
|
||||
|
||||
.tip-icon {
|
||||
font-size: 24px;
|
||||
color: #fa8c16;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
flex: 1;
|
||||
|
||||
.tip-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #d46b08;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.tip-description {
|
||||
font-size: 14px;
|
||||
color: #873800;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.security-advice-card {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.advice-title {
|
||||
padding: 16px 16px 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.advice-list {
|
||||
padding: 16px;
|
||||
|
||||
.advice-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.advice-dot {
|
||||
color: var(--primary-color);
|
||||
margin-right: 8px;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.password-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
.line {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
:global(.adm-input) {
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(24, 142, 238, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 关于页面样式
|
||||
.app-info-card {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.app-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 16px;
|
||||
gap: 16px;
|
||||
|
||||
.app-logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
||||
.logo-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-color) 0%,
|
||||
var(--primary-color-dark) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-details {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.app-name {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.app-version {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.app-build {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-description {
|
||||
padding: 0 16px 20px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.features-list {
|
||||
padding: 16px;
|
||||
|
||||
.feature-item {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.feature-description {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 新的功能特性网格布局
|
||||
.features-grid {
|
||||
padding: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
|
||||
.feature-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #f0f0f0;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: #f8f9fa;
|
||||
border-color: var(--primary-color);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
flex-shrink: 0;
|
||||
|
||||
.icon-placeholder {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
background: var(--primary-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.feature-title {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 2px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.feature-description {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
// 为不同卡片添加不同的图标颜色
|
||||
&:nth-child(1) .icon-placeholder {
|
||||
background: #1890ff;
|
||||
}
|
||||
|
||||
&:nth-child(2) .icon-placeholder {
|
||||
background: #52c41a;
|
||||
}
|
||||
|
||||
&:nth-child(3) .icon-placeholder {
|
||||
background: #722ed1;
|
||||
}
|
||||
|
||||
&:nth-child(4) .icon-placeholder {
|
||||
background: #fa8c16;
|
||||
}
|
||||
|
||||
&:nth-child(5) .icon-placeholder {
|
||||
background: #eb2f96;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright-info {
|
||||
text-align: center;
|
||||
padding: 32px 16px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
|
||||
.copyright-text {
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.copyright-subtext {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
// 隐私协议页面样式
|
||||
.privacy-card {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.privacy-content {
|
||||
padding: 20px 16px;
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 24px;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 8px 0;
|
||||
padding-left: 20px;
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-footer {
|
||||
text-align: center;
|
||||
margin-top: 32px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 个人信息页面样式
|
||||
.save-buttons {
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.avatar-card {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.avatar-section {
|
||||
padding: 20px 16px;
|
||||
|
||||
.avatar-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50px;
|
||||
overflow: hidden;
|
||||
background: #f0f0f0;
|
||||
border: 2px solid #e0e0e0;
|
||||
cursor: pointer;
|
||||
|
||||
.avatar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.avatar-upload-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.upload-loading {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .avatar-upload-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-tip {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-card {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.info-section {
|
||||
padding: 20px 16px;
|
||||
|
||||
.info-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
width: 100%;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
background: #fff;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(24, 142, 238, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.readonly-field {
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
min-height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-tip {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tip-card {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.tip-content {
|
||||
padding: 16px;
|
||||
|
||||
.tip-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.tip-list {
|
||||
.tip-item {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
302
nkebao/src/pages/mobile/mine/setting/index.tsx
Normal file
302
nkebao/src/pages/mobile/mine/setting/index.tsx
Normal file
@@ -0,0 +1,302 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { NavBar, List, Switch, Button, Dialog, Toast, Card } from "antd-mobile";
|
||||
import {
|
||||
UserOutlined,
|
||||
SafetyOutlined,
|
||||
InfoCircleOutlined,
|
||||
LogoutOutlined,
|
||||
SettingOutlined,
|
||||
LockOutlined,
|
||||
HeartOutlined,
|
||||
StarOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import { useUserStore } from "@/store/module/user";
|
||||
import { useSettingsStore } from "@/store/module/settings";
|
||||
import style from "./index.module.scss";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
interface SettingItem {
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
icon: React.ReactNode;
|
||||
type: "navigate" | "switch" | "button";
|
||||
value?: boolean;
|
||||
path?: string;
|
||||
onClick?: () => void;
|
||||
badge?: string;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
const Setting: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { user, logout } = useUserStore();
|
||||
const { settings, updateSetting } = useSettingsStore();
|
||||
const [showLogoutDialog, setShowLogoutDialog] = useState(false);
|
||||
const [avatarError, setAvatarError] = useState(false);
|
||||
|
||||
// 处理头像加载错误
|
||||
const handleAvatarError = () => {
|
||||
setAvatarError(true);
|
||||
};
|
||||
|
||||
// 退出登录
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
setShowLogoutDialog(false);
|
||||
navigate("/login");
|
||||
Toast.show({
|
||||
content: "退出成功",
|
||||
position: "top",
|
||||
});
|
||||
};
|
||||
|
||||
// 清除缓存
|
||||
const handleClearCache = () => {
|
||||
Dialog.confirm({
|
||||
content: "确定要清除缓存吗？这将清除所有本地数据。",
|
||||
onConfirm: () => {
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
Toast.show({
|
||||
content: "缓存已清除",
|
||||
position: "top",
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 设置项配置
|
||||
const settingGroups: { title: string; items: SettingItem[] }[] = [
|
||||
{
|
||||
title: "账户设置",
|
||||
items: [
|
||||
{
|
||||
id: "profile",
|
||||
title: "个人信息",
|
||||
description: "修改头像、昵称等基本信息",
|
||||
icon: <UserOutlined />,
|
||||
type: "navigate",
|
||||
path: "/userSet",
|
||||
color: "var(--primary-color)",
|
||||
},
|
||||
{
|
||||
id: "security",
|
||||
title: "安全设置",
|
||||
description: "密码修改、登录设备管理",
|
||||
icon: <SafetyOutlined />,
|
||||
type: "navigate",
|
||||
path: "/security",
|
||||
color: "var(--primary-color)",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "应用设置",
|
||||
items: [
|
||||
{
|
||||
id: "privacy",
|
||||
title: "隐私保护",
|
||||
description: "数据隐私、权限管理",
|
||||
icon: <LockOutlined />,
|
||||
type: "navigate",
|
||||
path: "/privacy",
|
||||
color: "var(--primary-color)",
|
||||
},
|
||||
{
|
||||
id: "clearCache",
|
||||
title: "清除缓存",
|
||||
description: "清除本地缓存数据",
|
||||
icon: <SettingOutlined />,
|
||||
type: "button",
|
||||
onClick: handleClearCache,
|
||||
color: "var(--primary-color)",
|
||||
badge: "2.3MB",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "其他",
|
||||
items: [
|
||||
{
|
||||
id: "about",
|
||||
title: "关于我们",
|
||||
description: "版本信息、联系方式",
|
||||
icon: <InfoCircleOutlined />,
|
||||
type: "navigate",
|
||||
path: "/about",
|
||||
color: "var(--primary-color)",
|
||||
},
|
||||
{
|
||||
id: "logout",
|
||||
title: "退出登录",
|
||||
description: "安全退出当前账号",
|
||||
icon: <LogoutOutlined />,
|
||||
type: "button",
|
||||
onClick: () => setShowLogoutDialog(true),
|
||||
color: "#ff4d4f",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// 渲染设置项
|
||||
const renderSettingItem = (item: SettingItem) => {
|
||||
const handleClick = () => {
|
||||
if (item.type === "navigate" && item.path) {
|
||||
navigate(item.path);
|
||||
} else if (item.type === "switch" && item.onClick) {
|
||||
item.onClick();
|
||||
} else if (item.type === "button" && item.onClick) {
|
||||
item.onClick();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<List.Item
|
||||
key={item.id}
|
||||
prefix={
|
||||
<div
|
||||
className={style["setting-icon"]}
|
||||
style={{
|
||||
color: item.color || "var(--primary-color)",
|
||||
background: `${item.color || "var(--primary-color)"}15`,
|
||||
}}
|
||||
>
|
||||
{item.icon}
|
||||
</div>
|
||||
}
|
||||
title={
|
||||
<div className={style["setting-title"]}>
|
||||
{item.title}
|
||||
{item.badge && (
|
||||
<span className={style["setting-badge"]}>{item.badge}</span>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
description={item.description}
|
||||
extra={
|
||||
item.type === "switch" ? (
|
||||
<Switch
|
||||
checked={item.value}
|
||||
onChange={() => item.onClick?.()}
|
||||
style={
|
||||
{
|
||||
"--checked-color": item.color || "var(--primary-color)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
onClick={handleClick}
|
||||
arrow={item.type === "navigate"}
|
||||
className={style["setting-item"]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout header={<NavCommon title="设置" />}>
|
||||
<div className={style["setting-page"]}>
|
||||
{/* 用户信息卡片 */}
|
||||
<Card className={style["user-card"]}>
|
||||
<div className={style["user-info"]}>
|
||||
<div className={style["avatar"]}>
|
||||
{user?.avatar && !avatarError ? (
|
||||
<img src={user.avatar} alt="头像" onError={handleAvatarError} />
|
||||
) : (
|
||||
<div className={style["avatar-placeholder"]}>
|
||||
{user?.username?.charAt(0) || "用"}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={style["user-details"]}>
|
||||
<div className={style["username"]}>
|
||||
{user?.username || "未设置昵称"}
|
||||
</div>
|
||||
<div className={style["account"]}>
|
||||
{user?.account || "未知账号"}
|
||||
</div>
|
||||
<div className={style["role"]}>
|
||||
{user?.isAdmin === 1 ? "管理员" : "普通用户"}
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["user-actions"]}>
|
||||
<Button
|
||||
size="small"
|
||||
fill="outline"
|
||||
onClick={() => navigate("/userSet")}
|
||||
style={{
|
||||
color: "#fff",
|
||||
borderColor: "#fff",
|
||||
fontSize: "12px",
|
||||
padding: "4px 8px",
|
||||
height: "auto",
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 设置列表 */}
|
||||
{settingGroups.map((group, groupIndex) => (
|
||||
<Card key={groupIndex} className={style["setting-group"]}>
|
||||
<div className={style["group-title"]}>
|
||||
<span className={style["group-icon"]}>⚙️</span>
|
||||
{group.title}
|
||||
</div>
|
||||
<List className={style["setting-list"]}>
|
||||
{group.items.map(renderSettingItem)}
|
||||
</List>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{/* 版本信息 */}
|
||||
<div className={style["version-info"]}>
|
||||
<div className={style["version-card"]}>
|
||||
<div className={style["app-logo"]}>
|
||||
<img src="/public/logo.png" alt="" />
|
||||
</div>
|
||||
<div className={style["version-details"]}>
|
||||
<div className={style["app-name"]}>存客宝</div>
|
||||
<div className={style["version-text"]}>版本 3.0.0</div>
|
||||
<div className={style["build-info"]}>Build 2025-7-30</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["copyright"]}>
|
||||
<span>© 2024 存客宝管理系统</span>
|
||||
<span>让客户管理更简单</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 退出登录确认对话框 */}
|
||||
<Dialog
|
||||
content="您确定要退出登录吗？退出后需要重新登录才能使用完整功能。"
|
||||
visible={showLogoutDialog}
|
||||
closeOnAction
|
||||
actions={[
|
||||
[
|
||||
{
|
||||
key: "cancel",
|
||||
text: "取消",
|
||||
},
|
||||
{
|
||||
key: "confirm",
|
||||
text: "确认退出",
|
||||
bold: true,
|
||||
danger: true,
|
||||
onClick: handleLogout,
|
||||
},
|
||||
],
|
||||
]}
|
||||
onClose={() => setShowLogoutDialog(false)}
|
||||
/>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Setting;
|
||||
@@ -1,13 +1,7 @@
|
||||
import request from "@/api/request";
|
||||
import type {
|
||||
TrafficPoolUserDetail,
|
||||
UserJourneyResponse,
|
||||
UserTagsResponse,
|
||||
} from "./data";
|
||||
import type { UserTagsResponse } from "./data";
|
||||
|
||||
export function getTrafficPoolDetail(
|
||||
wechatId: string
|
||||
): Promise<TrafficPoolUserDetail> {
|
||||
export function getTrafficPoolDetail(wechatId: string) {
|
||||
return request("/v1/wechats/getWechatInfo", { wechatId }, "GET");
|
||||
}
|
||||
|
||||
@@ -16,7 +10,7 @@ export function getUserJourney(params: {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
userId: string;
|
||||
}): Promise<UserJourneyResponse> {
|
||||
}) {
|
||||
return request("/v1/traffic/pool/getUserJourney", params, "GET");
|
||||
}
|
||||
|
||||
|
||||
@@ -30,3 +30,79 @@ export interface TrafficPoolUserDetail {
|
||||
value?: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
// 扩展的用户详情类型
|
||||
export interface ExtendedUserDetail extends TrafficPoolUserDetail {
|
||||
userInfo: {
|
||||
nickname: string;
|
||||
avatar: string;
|
||||
wechatId: string;
|
||||
friendShip: {
|
||||
totalFriend: number;
|
||||
maleFriend: number;
|
||||
femaleFriend: number;
|
||||
unknowFriend: number;
|
||||
};
|
||||
};
|
||||
rfmScore: {
|
||||
recency: number;
|
||||
frequency: number;
|
||||
monetary: number;
|
||||
totalScore: number;
|
||||
};
|
||||
trafficPools: {
|
||||
currentPool: string;
|
||||
availablePools: string[];
|
||||
};
|
||||
userTags: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
color: string;
|
||||
type: string;
|
||||
}>;
|
||||
valueTags: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
color: string;
|
||||
icon: string;
|
||||
rfmScore: number;
|
||||
valueLevel: string;
|
||||
}>;
|
||||
restrictions?: Array<{
|
||||
id: string;
|
||||
reason: string;
|
||||
level: number;
|
||||
date: number | null;
|
||||
}>;
|
||||
}
|
||||
|
||||
// 互动记录类型
|
||||
export interface InteractionRecord {
|
||||
id: string;
|
||||
type: string;
|
||||
content: string;
|
||||
timestamp: string;
|
||||
value?: number;
|
||||
}
|
||||
|
||||
// 用户旅程记录类型
|
||||
export interface UserJourneyRecord {
|
||||
id: string;
|
||||
type: number;
|
||||
remark: string;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
// 用户标签响应类型
|
||||
export interface UserTagsResponse {
|
||||
wechat: string[];
|
||||
siteLabels: UserTagItem[];
|
||||
}
|
||||
|
||||
// 用户标签项类型
|
||||
export interface UserTagItem {
|
||||
id: string;
|
||||
name: string;
|
||||
color?: string;
|
||||
type?: string;
|
||||
}
|
||||
|
||||
@@ -47,6 +47,18 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatarFallback {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.userDetails {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
@@ -343,7 +355,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 16px;
|
||||
padding: 20px 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -353,14 +365,14 @@
|
||||
}
|
||||
|
||||
.emptyText {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.emptyDesc {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@@ -1,20 +1,9 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
Card,
|
||||
Button,
|
||||
Avatar,
|
||||
Tag,
|
||||
Tabs,
|
||||
List,
|
||||
Badge,
|
||||
SpinLoading,
|
||||
} from "antd-mobile";
|
||||
import { Card, Button, Avatar, Tag, List, SpinLoading } from "antd-mobile";
|
||||
import {
|
||||
UserOutlined,
|
||||
CrownOutlined,
|
||||
PlusOutlined,
|
||||
CloseOutlined,
|
||||
EyeOutlined,
|
||||
DollarOutlined,
|
||||
MobileOutlined,
|
||||
@@ -26,9 +15,7 @@ import Layout from "@/components/Layout/Layout";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
import { getTrafficPoolDetail, getUserJourney, getUserTags } from "./api";
|
||||
import type {
|
||||
TrafficPoolUserDetail,
|
||||
ExtendedUserDetail,
|
||||
InteractionRecord,
|
||||
UserJourneyRecord,
|
||||
UserTagsResponse,
|
||||
UserTagItem,
|
||||
@@ -52,6 +39,7 @@ const TrafficPoolDetail: React.FC = () => {
|
||||
// 用户标签相关状态
|
||||
const [tagsLoading, setTagsLoading] = useState(false);
|
||||
const [userTagsList, setUserTagsList] = useState<UserTagItem[]>([]);
|
||||
const [wechatTagsList, setWechatTagsList] = useState<string[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!wxid) return;
|
||||
@@ -61,6 +49,8 @@ const TrafficPoolDetail: React.FC = () => {
|
||||
// 将API数据转换为扩展的用户详情数据
|
||||
const extendedUser: ExtendedUserDetail = {
|
||||
...res,
|
||||
// 添加userInfo属性
|
||||
userInfo: res.userInfo,
|
||||
// 模拟RFM评分数据
|
||||
rfmScore: {
|
||||
recency: 5,
|
||||
@@ -92,6 +82,8 @@ const TrafficPoolDetail: React.FC = () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
console.log(extendedUser);
|
||||
|
||||
setUser(extendedUser);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
@@ -131,6 +123,7 @@ const TrafficPoolDetail: React.FC = () => {
|
||||
try {
|
||||
const response: UserTagsResponse = await getUserTags(userId);
|
||||
setUserTagsList(response.siteLabels || []);
|
||||
setWechatTagsList(response.wechat || []);
|
||||
} catch (error) {
|
||||
console.error("获取用户标签失败:", error);
|
||||
} finally {
|
||||
@@ -149,10 +142,6 @@ const TrafficPoolDetail: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
const getJourneyTypeIcon = (type: number) => {
|
||||
switch (type) {
|
||||
case 0: // 浏览
|
||||
@@ -207,32 +196,6 @@ const TrafficPoolDetail: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const formatCurrency = (amount: number) => {
|
||||
return `¥${amount.toLocaleString()}`;
|
||||
};
|
||||
|
||||
const getGenderText = (gender: number) => {
|
||||
switch (gender) {
|
||||
case 1:
|
||||
return "男";
|
||||
case 2:
|
||||
return "女";
|
||||
default:
|
||||
return "未知";
|
||||
}
|
||||
};
|
||||
|
||||
const getGenderColor = (gender: number) => {
|
||||
switch (gender) {
|
||||
case 1:
|
||||
return "#1677ff";
|
||||
case 2:
|
||||
return "#eb2f96";
|
||||
default:
|
||||
return "#999";
|
||||
}
|
||||
};
|
||||
|
||||
const getRestrictionLevelText = (level: number) => {
|
||||
switch (level) {
|
||||
case 1:
|
||||
@@ -297,7 +260,11 @@ const TrafficPoolDetail: React.FC = () => {
|
||||
<Avatar
|
||||
src={user.userInfo.avatar}
|
||||
className={styles.avatar}
|
||||
fallback={<UserOutlined />}
|
||||
fallback={
|
||||
<div className={styles.avatarFallback}>
|
||||
<UserOutlined />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<div className={styles.userDetails}>
|
||||
<div className={styles.nickname}>{user.userInfo.nickname}</div>
|
||||
@@ -520,7 +487,7 @@ const TrafficPoolDetail: React.FC = () => {
|
||||
<span>{restriction.reason || "未知原因"}</span>
|
||||
<Tag
|
||||
color={getRestrictionLevelColor(
|
||||
restriction.level
|
||||
restriction.level,
|
||||
)}
|
||||
fill="outline"
|
||||
className={styles.restrictionLevel}
|
||||
@@ -617,20 +584,22 @@ const TrafficPoolDetail: React.FC = () => {
|
||||
|
||||
{activeTab === "tags" && (
|
||||
<div className={styles.tabContent}>
|
||||
{/* 用户标签 */}
|
||||
<Card title="用户标签" className={styles.infoCard}>
|
||||
{/* 站内标签 */}
|
||||
<Card title="站内标签" className={styles.infoCard}>
|
||||
{tagsLoading && userTagsList.length === 0 ? (
|
||||
<div className={styles.loadingContainer}>
|
||||
<SpinLoading color="primary" style={{ fontSize: 24 }} />
|
||||
<SpinLoading color="primary" style={{ fontSize: 20 }} />
|
||||
<div className={styles.loadingText}>加载中...</div>
|
||||
</div>
|
||||
) : userTagsList.length === 0 ? (
|
||||
<div className={styles.emptyState}>
|
||||
<div className={styles.emptyIcon}>
|
||||
<TagOutlined style={{ fontSize: 48, color: "#ccc" }} />
|
||||
<TagOutlined style={{ fontSize: 36, color: "#ccc" }} />
|
||||
</div>
|
||||
<div className={styles.emptyText}>暂无站内标签</div>
|
||||
<div className={styles.emptyDesc}>
|
||||
该用户还没有任何站内标签
|
||||
</div>
|
||||
<div className={styles.emptyText}>暂无用户标签</div>
|
||||
<div className={styles.emptyDesc}>该用户还没有任何标签</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.tagsSection}>
|
||||
@@ -648,6 +617,39 @@ const TrafficPoolDetail: React.FC = () => {
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* 微信标签 */}
|
||||
<Card title="微信标签" className={styles.infoCard}>
|
||||
{tagsLoading && wechatTagsList.length === 0 ? (
|
||||
<div className={styles.loadingContainer}>
|
||||
<SpinLoading color="primary" style={{ fontSize: 24 }} />
|
||||
<div className={styles.loadingText}>加载中...</div>
|
||||
</div>
|
||||
) : wechatTagsList.length === 0 ? (
|
||||
<div className={styles.emptyState}>
|
||||
<div className={styles.emptyIcon}>
|
||||
<TagOutlined style={{ fontSize: 48, color: "#ccc" }} />
|
||||
</div>
|
||||
<div className={styles.emptyText}>暂无微信标签</div>
|
||||
<div className={styles.emptyDesc}>
|
||||
该用户还没有任何微信标签
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.tagsSection}>
|
||||
{wechatTagsList.map((tag, index) => (
|
||||
<Tag
|
||||
key={index}
|
||||
color="danger"
|
||||
fill="outline"
|
||||
className={styles.tagItem}
|
||||
>
|
||||
{tag}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* 价值标签 */}
|
||||
<Card title="价值标签" className={styles.infoCard}>
|
||||
{user.valueTags && user.valueTags.length > 0 ? (
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import request from "@/api/request";
|
||||
import type { TrafficPoolListResponse, DeviceOption } from "./data";
|
||||
import { fetchDeviceList } from "@/api/devices";
|
||||
|
||||
// 获取流量池列表
|
||||
export function fetchTrafficPoolList(params: {
|
||||
@@ -11,16 +9,6 @@ export function fetchTrafficPoolList(params: {
|
||||
return request("/v1/traffic/pool", params, "GET");
|
||||
}
|
||||
|
||||
// 获取设备列表（真实接口）
|
||||
export async function fetchDeviceOptions(): Promise<DeviceOption[]> {
|
||||
const res = await fetchDeviceList({ page: 1, limit: 100 });
|
||||
// 假设返回 { list: [{ id, name, ... }], ... }
|
||||
return (res.list || []).map((item: any) => ({
|
||||
id: String(item.id),
|
||||
name: item.name,
|
||||
}));
|
||||
}
|
||||
|
||||
// 获取分组列表（如无真实接口可用mock）
|
||||
export async function fetchPackageOptions(): Promise<any[]> {
|
||||
// TODO: 替换为真实接口
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import {
|
||||
fetchTrafficPoolList,
|
||||
fetchDeviceOptions,
|
||||
fetchPackageOptions,
|
||||
} from "./api";
|
||||
import { fetchTrafficPoolList, fetchPackageOptions } from "./api";
|
||||
import type {
|
||||
TrafficPoolUser,
|
||||
DeviceOption,
|
||||
@@ -69,7 +65,6 @@ export function useTrafficPoolListLogic() {
|
||||
|
||||
// 获取筛选项
|
||||
useEffect(() => {
|
||||
fetchDeviceOptions().then(setDeviceOptions);
|
||||
fetchPackageOptions().then(setPackageOptions);
|
||||
}, []);
|
||||
|
||||
@@ -90,7 +85,7 @@ export function useTrafficPoolListLogic() {
|
||||
// 单选
|
||||
const handleSelect = (id: number, checked: boolean) => {
|
||||
setSelectedIds(prev =>
|
||||
checked ? [...prev, id] : prev.filter(i => i !== id)
|
||||
checked ? [...prev, id] : prev.filter(i => i !== id),
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,115 +0,0 @@
|
||||
.user-set-page {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
.user-card {
|
||||
margin: 18px 16px 0 16px;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 24px 20px 20px 20px;
|
||||
}
|
||||
.avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
color: #1890ff;
|
||||
margin-right: 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
color: #1890ff;
|
||||
background: #e6f7ff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.info-list {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
.label {
|
||||
color: #888;
|
||||
min-width: 70px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.value {
|
||||
color: #222;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
margin-left: 8px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.avatar-upload {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
transition: box-shadow 0.2s;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.avatar-upload img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.avatar-edit {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
padding: 3px 0 2px 0;
|
||||
border-radius: 0 0 32px 32px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.avatar-upload:hover .avatar-edit {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.edit-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e5e6eb;
|
||||
padding: 4px 10px;
|
||||
background: #fafbfc;
|
||||
}
|
||||
.save-btn {
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import { useUserStore } from "@/store/module/user";
|
||||
import { Card, Button, Input, Toast } from "antd-mobile";
|
||||
import style from "./index.module.scss";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
|
||||
const UserSetting: React.FC = () => {
|
||||
const { user, setUser } = useUserStore();
|
||||
const navigate = useNavigate();
|
||||
const [nickname, setNickname] = useState(user?.username || "");
|
||||
const [avatar, setAvatar] = useState(user?.avatar || "");
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// 头像上传
|
||||
const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = ev => {
|
||||
setAvatar(ev.target?.result as string);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
// 保存
|
||||
const handleSave = async () => {
|
||||
if (!nickname.trim()) {
|
||||
Toast.show({ content: "昵称不能为空", position: "top" });
|
||||
return;
|
||||
}
|
||||
if (!user) return;
|
||||
setUser({ ...user, id: user.id, username: nickname, avatar });
|
||||
Toast.show({ content: "保存成功", position: "top" });
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={<NavCommon title="用户信息修改" />}
|
||||
footer={
|
||||
<div className={style["save-btn"]}>
|
||||
<Button
|
||||
block
|
||||
color="primary"
|
||||
onClick={handleSave}
|
||||
loading={uploading}
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className={style["user-set-page"]}>
|
||||
<Card className={style["user-card"]}>
|
||||
<div className={style["user-info"]}>
|
||||
<div className={style["avatar"]}>
|
||||
<div
|
||||
className={style["avatar-upload"]}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
{avatar ? (
|
||||
<img src={avatar} alt="头像" />
|
||||
) : (
|
||||
<div className={style["avatar-placeholder"]}>卡</div>
|
||||
)}
|
||||
<div className={style["avatar-edit"]}>更换头像</div>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style={{ display: "none" }}
|
||||
onChange={handleAvatarChange}
|
||||
disabled={uploading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["info-list"]}>
|
||||
<div className={style["info-item"]}>
|
||||
<span className={style["label"]}>昵称</span>
|
||||
<Input
|
||||
className={style["edit-input"]}
|
||||
value={nickname}
|
||||
onChange={setNickname}
|
||||
maxLength={12}
|
||||
placeholder="请输入昵称"
|
||||
/>
|
||||
</div>
|
||||
<div className={style["info-item"]}>
|
||||
<span className={style["label"]}>手机号</span>
|
||||
<span className={style["value"]}>{user?.phone || "-"}</span>
|
||||
</div>
|
||||
<div className={style["info-item"]}>
|
||||
<span className={style["label"]}>账号</span>
|
||||
<span className={style["value"]}>{user?.account || "-"}</span>
|
||||
</div>
|
||||
<div className={style["info-item"]}>
|
||||
<span className={style["label"]}>角色</span>
|
||||
<span className={style["value"]}>
|
||||
{user?.isAdmin === 1 ? "管理员" : "普通用户"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserSetting;
|
||||
@@ -19,7 +19,7 @@ export function getWechatFriends(params: {
|
||||
limit: params.limit,
|
||||
keyword: params.keyword,
|
||||
},
|
||||
"GET"
|
||||
"GET",
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -133,7 +133,7 @@ const WechatAccountDetail: React.FC = () => {
|
||||
setIsFetchingFriends(false);
|
||||
}
|
||||
},
|
||||
[id]
|
||||
[id],
|
||||
);
|
||||
|
||||
// 搜索好友
|
||||
@@ -153,7 +153,7 @@ const WechatAccountDetail: React.FC = () => {
|
||||
setFriendsPage(page);
|
||||
fetchFriendsList(page, searchQuery);
|
||||
},
|
||||
[searchQuery, fetchFriendsList]
|
||||
[searchQuery, fetchFriendsList],
|
||||
);
|
||||
|
||||
// 初始化数据
|
||||
|
||||
@@ -5,6 +5,7 @@ export function getWechatAccounts(params: {
|
||||
page: number;
|
||||
page_size: number;
|
||||
keyword?: string;
|
||||
wechatStatus?: string;
|
||||
}) {
|
||||
return request("v1/wechats", params, "GET");
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
|
||||
import { Button, SpinLoading, Toast } from "antd-mobile";
|
||||
import { Pagination, Input, Tooltip } from "antd";
|
||||
import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import style from "./index.module.scss";
|
||||
import { getWechatAccounts } from "./api";
|
||||
@@ -26,6 +26,7 @@ const PAGE_SIZE = 10;
|
||||
|
||||
const WechatAccounts: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const [accounts, setAccounts] = useState<WechatAccount[]>([]);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
@@ -33,14 +34,24 @@ const WechatAccounts: React.FC = () => {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
|
||||
// 获取路由参数 wechatStatus
|
||||
const wechatStatus = searchParams.get("wechatStatus");
|
||||
|
||||
const fetchAccounts = async (page = 1, keyword = "") => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const res = await getWechatAccounts({
|
||||
const params: any = {
|
||||
page,
|
||||
page_size: PAGE_SIZE,
|
||||
keyword,
|
||||
});
|
||||
};
|
||||
|
||||
// 如果有 wechatStatus 参数，添加到请求参数中
|
||||
if (wechatStatus) {
|
||||
params.wechatStatus = wechatStatus;
|
||||
}
|
||||
|
||||
const res = await getWechatAccounts(params);
|
||||
if (res && res.list) {
|
||||
setAccounts(res.list);
|
||||
setTotalAccounts(res.total || 0);
|
||||
@@ -87,7 +98,9 @@ const WechatAccounts: React.FC = () => {
|
||||
<Layout
|
||||
header={
|
||||
<>
|
||||
<NavCommon title="微信号管理" />
|
||||
<NavCommon
|
||||
title={wechatStatus === "1" ? "在线微信号" : "微信号管理"}
|
||||
/>
|
||||
<div className="search-bar">
|
||||
<div className="search-input-wrapper">
|
||||
<Input
|
||||
|
||||
@@ -35,7 +35,13 @@
|
||||
min-height: 100vh;
|
||||
padding: 0 0 60px 0;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 50px 30px;
|
||||
}
|
||||
// 错误提示
|
||||
.error-notice {
|
||||
margin-bottom: 12px;
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { NavBar, Button, Toast } from "antd-mobile";
|
||||
import { Button, Toast } from "antd-mobile";
|
||||
import { PlusOutlined, RiseOutlined } from "@ant-design/icons";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import { getScenarios } from "./api";
|
||||
import style from "./index.module.scss";
|
||||
@@ -17,17 +18,6 @@ interface Scenario {
|
||||
status: number;
|
||||
}
|
||||
|
||||
const scenarioDescriptions: Record<string, string> = {
|
||||
douyin: "通过抖音平台进行精准获客",
|
||||
xiaohongshu: "利用小红书平台进行内容营销获客",
|
||||
gongzhonghao: "通过微信公众号进行获客",
|
||||
haibao: "通过海报分享进行获客",
|
||||
phone: "通过电话营销进行获客",
|
||||
weixinqun: "通过微信群进行获客",
|
||||
payment: "通过付款码进行获客",
|
||||
api: "通过API接口进行获客",
|
||||
};
|
||||
|
||||
const Scene: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [scenarios, setScenarios] = useState<Scenario[]>([]);
|
||||
@@ -46,9 +36,7 @@ const Scene: React.FC = () => {
|
||||
image:
|
||||
item.image ||
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-api.png",
|
||||
description:
|
||||
scenarioDescriptions[item.name?.toLowerCase()] ||
|
||||
"通过该平台进行获客",
|
||||
description: "",
|
||||
count: item.count,
|
||||
growth: item.growth,
|
||||
status: item.status,
|
||||
@@ -69,7 +57,7 @@ const Scene: React.FC = () => {
|
||||
|
||||
const handleScenarioClick = (scenarioId: string, scenarioName: string) => {
|
||||
navigate(
|
||||
`/scenarios/list/${scenarioId}/${encodeURIComponent(scenarioName)}`
|
||||
`/scenarios/list/${scenarioId}/${encodeURIComponent(scenarioName)}`,
|
||||
);
|
||||
};
|
||||
|
||||
@@ -81,13 +69,17 @@ const Scene: React.FC = () => {
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<NavBar back={null} style={{ background: "#fff" }}>
|
||||
<div className="nav-title">场景获客</div>
|
||||
<Button size="small" color="primary" onClick={handleNewPlan}>
|
||||
<PlusOutlined /> 新建计划
|
||||
</Button>
|
||||
</NavBar>
|
||||
<NavCommon
|
||||
left={<></>}
|
||||
title="场景获客"
|
||||
right={
|
||||
<Button size="small" color="primary" onClick={handleNewPlan}>
|
||||
<PlusOutlined /> 新建计划
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
}
|
||||
footer={<MeauMobile activeKey="scenarios" />}
|
||||
>
|
||||
<div className={style["error"]}>
|
||||
<div className={style["error-text"]}>{error}</div>
|
||||
@@ -103,10 +95,9 @@ const Scene: React.FC = () => {
|
||||
<Layout
|
||||
loading={loading}
|
||||
header={
|
||||
<NavBar
|
||||
back={null}
|
||||
style={{ background: "#fff" }}
|
||||
<NavCommon
|
||||
left={<div className="nav-title">场景获客</div>}
|
||||
title={""}
|
||||
right={
|
||||
<Button
|
||||
size="small"
|
||||
@@ -117,7 +108,7 @@ const Scene: React.FC = () => {
|
||||
<PlusOutlined /> 新建计划
|
||||
</Button>
|
||||
}
|
||||
></NavBar>
|
||||
/>
|
||||
}
|
||||
footer={<MeauMobile activeKey="scenarios" />}
|
||||
>
|
||||
@@ -144,11 +135,7 @@ const Scene: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["card-title"]}>{scenario.name}</div>
|
||||
{scenario.description && (
|
||||
<div className={style["card-desc"]}>
|
||||
{scenario.description}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={style["card-stats"]}>
|
||||
<span className={style["card-count"]}>
|
||||
今日: {scenario.count}
|
||||
|
||||
@@ -39,6 +39,47 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 14px 0;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
margin-top: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
:global(.ant-pagination) {
|
||||
.ant-pagination-item {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #d9d9d9;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
&.ant-pagination-item-active {
|
||||
background: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination-prev,
|
||||
.ant-pagination-next {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #d9d9d9;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plan-item {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
NavBar,
|
||||
Button,
|
||||
Toast,
|
||||
SpinLoading,
|
||||
@@ -10,7 +9,7 @@ import {
|
||||
Card,
|
||||
Tag,
|
||||
} from "antd-mobile";
|
||||
import { Input } from "antd";
|
||||
import { Input, Pagination } from "antd";
|
||||
import {
|
||||
PlusOutlined,
|
||||
CopyOutlined,
|
||||
@@ -22,7 +21,6 @@ import {
|
||||
EditOutlined,
|
||||
MoreOutlined,
|
||||
ClockCircleOutlined,
|
||||
DownOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
@@ -157,6 +155,12 @@ const ScenarioList: React.FC = () => {
|
||||
await fetchPlanList(currentPage + 1, true);
|
||||
};
|
||||
|
||||
// 分页改变处理
|
||||
const handlePageChange = async (page: number) => {
|
||||
setCurrentPage(page);
|
||||
await fetchPlanList(page, false);
|
||||
};
|
||||
|
||||
const handleCopyPlan = async (taskId: string) => {
|
||||
const taskToCopy = tasks.find(task => task.id === taskId);
|
||||
if (!taskToCopy) return;
|
||||
@@ -211,7 +215,7 @@ const ScenarioList: React.FC = () => {
|
||||
if (response) {
|
||||
// 处理webhook URL，使用工具函数构建完整地址
|
||||
const webhookUrl = buildApiUrl(
|
||||
response.textUrl?.fullUrl || `webhook/${taskId}`
|
||||
response.textUrl?.fullUrl || `webhook/${taskId}`,
|
||||
);
|
||||
|
||||
setCurrentApiSettings({
|
||||
@@ -252,6 +256,21 @@ const ScenarioList: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 卡片点击处理 - 执行二维码动作
|
||||
const handleCardClick = (taskId: string, event: React.MouseEvent) => {
|
||||
// 检查点击是否在更多按钮区域内
|
||||
const target = event.target as HTMLElement;
|
||||
const moreButton = target.closest(`.${style["more-btn"]}`);
|
||||
|
||||
// 如果点击的是更多按钮或其子元素，不执行卡片点击动作
|
||||
if (moreButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 执行二维码动作
|
||||
handleShowQrCode(taskId);
|
||||
};
|
||||
|
||||
const getStatusColor = (status: number) => {
|
||||
switch (status) {
|
||||
case 1:
|
||||
@@ -286,7 +305,7 @@ const ScenarioList: React.FC = () => {
|
||||
};
|
||||
|
||||
const filteredTasks = tasks.filter(task =>
|
||||
task.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
task.name.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
);
|
||||
|
||||
// 生成操作菜单
|
||||
@@ -389,6 +408,18 @@ const ScenarioList: React.FC = () => {
|
||||
</>
|
||||
}
|
||||
loading={loading}
|
||||
footer={
|
||||
<div className={style["pagination-container"]}>
|
||||
<Pagination
|
||||
total={total}
|
||||
pageSize={pageSize}
|
||||
current={currentPage}
|
||||
onChange={handlePageChange}
|
||||
showSizeChanger={false}
|
||||
showQuickJumper={false}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className={style["scenario-list-page"]}>
|
||||
{/* 计划列表 */}
|
||||
@@ -409,7 +440,11 @@ const ScenarioList: React.FC = () => {
|
||||
) : (
|
||||
<>
|
||||
{filteredTasks.map(task => (
|
||||
<Card key={task.id} className={style["plan-item"]}>
|
||||
<Card
|
||||
key={task.id}
|
||||
className={style["plan-item"]}
|
||||
onClick={e => handleCardClick(task.id, e)}
|
||||
>
|
||||
{/* 头部：标题、状态和操作菜单 */}
|
||||
<div className={style["plan-header"]}>
|
||||
<div className={style["plan-name"]}>{task.name}</div>
|
||||
@@ -421,7 +456,10 @@ const ScenarioList: React.FC = () => {
|
||||
size="mini"
|
||||
fill="none"
|
||||
className={style["more-btn"]}
|
||||
onClick={() => setShowActionMenu(task.id)}
|
||||
onClick={e => {
|
||||
e.stopPropagation(); // 阻止事件冒泡
|
||||
setShowActionMenu(task.id);
|
||||
}}
|
||||
>
|
||||
<MoreOutlined />
|
||||
</Button>
|
||||
@@ -465,39 +503,6 @@ const ScenarioList: React.FC = () => {
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{/* 加载更多按钮 */}
|
||||
{hasMore && (
|
||||
<div className={style["load-more-container"]}>
|
||||
<Button
|
||||
color="primary"
|
||||
fill="outline"
|
||||
size="large"
|
||||
onClick={handleLoadMore}
|
||||
loading={loadingMore}
|
||||
className={style["load-more-btn"]}
|
||||
>
|
||||
{loadingMore ? (
|
||||
<>
|
||||
<SpinLoading color="primary" />
|
||||
加载中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<DownOutlined />
|
||||
加载更多
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 没有更多数据提示 */}
|
||||
{!hasMore && filteredTasks.length > 0 && (
|
||||
<div className={style["no-more-data"]}>
|
||||
<span>没有更多数据了</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
@@ -537,7 +542,7 @@ const ScenarioList: React.FC = () => {
|
||||
<span className={style["action-icon"]}>{item.icon}</span>
|
||||
<span className={style["action-text"]}>{item.text}</span>
|
||||
</div>
|
||||
)
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -317,7 +317,7 @@ HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.o
|
||||
onClick={() =>
|
||||
handleCopy(
|
||||
codeExamples[activeLanguage as keyof typeof codeExamples],
|
||||
"代码"
|
||||
"代码",
|
||||
)
|
||||
}
|
||||
className={style["copy-code-btn"]}
|
||||
|
||||
@@ -146,7 +146,7 @@ export default function NewPlan() {
|
||||
? error
|
||||
: isEdit
|
||||
? "更新计划失败，请重试"
|
||||
: "创建计划失败，请重试"
|
||||
: "创建计划失败，请重试",
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -105,10 +105,10 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
|
||||
const [accounts] = useState<Account[]>(generateRandomAccounts(50));
|
||||
const [materials] = useState<Material[]>(generatePosterMaterials());
|
||||
const [selectedAccounts, setSelectedAccounts] = useState<Account[]>(
|
||||
formData.accounts?.length > 0 ? formData.accounts : []
|
||||
formData.accounts?.length > 0 ? formData.accounts : [],
|
||||
);
|
||||
const [selectedMaterials, setSelectedMaterials] = useState<Material[]>(
|
||||
formData.materials?.length > 0 ? formData.materials : []
|
||||
formData.materials?.length > 0 ? formData.materials : [],
|
||||
);
|
||||
// showAllScenarios 默认为 true
|
||||
const [showAllScenarios, setShowAllScenarios] = useState(true);
|
||||
@@ -128,7 +128,7 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
|
||||
const [customTags, setCustomTags] = useState(formData.customTags || []);
|
||||
const [tips, setTips] = useState(formData.tips || "");
|
||||
const [selectedScenarioTags, setSelectedScenarioTags] = useState(
|
||||
formData.scenarioTags || []
|
||||
formData.scenarioTags || [],
|
||||
);
|
||||
|
||||
// 电话获客相关状态
|
||||
@@ -140,10 +140,10 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
|
||||
|
||||
// 群设置相关状态
|
||||
const [weixinqunName, setWeixinqunName] = useState(
|
||||
formData.weixinqunName || ""
|
||||
formData.weixinqunName || "",
|
||||
);
|
||||
const [weixinqunNotice, setWeixinqunNotice] = useState(
|
||||
formData.weixinqunNotice || ""
|
||||
formData.weixinqunNotice || "",
|
||||
);
|
||||
|
||||
// 新增：自定义海报相关状态
|
||||
@@ -232,7 +232,7 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
|
||||
onChange({ ...formData, customTags: updatedCustomTags });
|
||||
// 同时从选中标签中移除
|
||||
const updatedSelectedTags = selectedScenarioTags.filter(
|
||||
(t: string) => t !== tagId
|
||||
(t: string) => t !== tagId,
|
||||
);
|
||||
setSelectedScenarioTags(updatedSelectedTags);
|
||||
onChange({
|
||||
@@ -292,12 +292,12 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
|
||||
// 账号多选切换
|
||||
const handleAccountToggle = (account: Account) => {
|
||||
const isSelected = selectedAccounts.some(
|
||||
(a: Account) => a.id === account.id
|
||||
(a: Account) => a.id === account.id,
|
||||
);
|
||||
let newSelected;
|
||||
if (isSelected) {
|
||||
newSelected = selectedAccounts.filter(
|
||||
(a: Account) => a.id !== account.id
|
||||
(a: Account) => a.id !== account.id,
|
||||
);
|
||||
} else {
|
||||
newSelected = [...selectedAccounts, account];
|
||||
@@ -362,7 +362,7 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
|
||||
const [orderUploaded, setOrderUploaded] = useState(false);
|
||||
|
||||
const handleOrderFileUpload = async (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
event: React.ChangeEvent<HTMLInputElement>,
|
||||
) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (file) {
|
||||
@@ -518,7 +518,7 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
|
||||
<div className={styles["basic-materials-grid"]}>
|
||||
{[...materials, ...customPosters].map(material => {
|
||||
const isSelected = selectedMaterials.some(
|
||||
m => m.id === material.id
|
||||
m => m.id === material.id,
|
||||
);
|
||||
const isCustom = material.id.startsWith("custom-");
|
||||
return (
|
||||
|
||||
@@ -38,7 +38,7 @@ const FriendRequestSettings: React.FC<FriendRequestSettingsProps> = ({
|
||||
const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false);
|
||||
const [hasWarnings, setHasWarnings] = useState(false);
|
||||
const [selectedDevices, setSelectedDevices] = useState<string[]>(
|
||||
formData.device || []
|
||||
formData.device || [],
|
||||
);
|
||||
const [showRemarkTip, setShowRemarkTip] = useState(false);
|
||||
|
||||
|
||||
@@ -125,7 +125,7 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
|
||||
const handleUpdateMessage = (
|
||||
dayIndex: number,
|
||||
messageIndex: number,
|
||||
updates: Partial<MessageContent>
|
||||
updates: Partial<MessageContent>,
|
||||
) => {
|
||||
const updatedPlans = [...dayPlans];
|
||||
updatedPlans[dayIndex].messages[messageIndex] = {
|
||||
@@ -181,7 +181,7 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
|
||||
setSelectedGroupId(groupId);
|
||||
setIsGroupSelectOpen(false);
|
||||
message.success(
|
||||
`已选择群组：${mockGroups.find(g => g.id === groupId)?.name}`
|
||||
`已选择群组：${mockGroups.find(g => g.id === groupId)?.name}`,
|
||||
);
|
||||
};
|
||||
|
||||
@@ -189,7 +189,7 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
|
||||
const triggerUpload = (
|
||||
dayIdx: number,
|
||||
msgIdx: number,
|
||||
type: "miniprogram" | "link"
|
||||
type: "miniprogram" | "link",
|
||||
) => {
|
||||
setUploadingDay(dayIdx);
|
||||
setUploadingMsgIdx(msgIdx);
|
||||
@@ -539,7 +539,7 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
|
||||
handleFileUpload(
|
||||
dayIndex,
|
||||
messageIndex,
|
||||
message.type as any
|
||||
message.type as any,
|
||||
)
|
||||
}
|
||||
>
|
||||
|
||||
@@ -33,7 +33,7 @@ export function deleteScenario(id: string) {
|
||||
export function getPlanList(
|
||||
scenarioId: string,
|
||||
page: number = 1,
|
||||
limit: number = 20
|
||||
limit: number = 20,
|
||||
) {
|
||||
return request(`/api/scenarios/${scenarioId}/plans`, { page, limit }, "GET");
|
||||
}
|
||||
@@ -214,7 +214,7 @@ export function deleteAutoLikeTask(taskId: string) {
|
||||
return request(
|
||||
`/api/workspace/auto-like/tasks/${taskId}`,
|
||||
undefined,
|
||||
"DELETE"
|
||||
"DELETE",
|
||||
);
|
||||
}
|
||||
|
||||
@@ -240,7 +240,7 @@ export function deleteGroupPushTask(taskId: string) {
|
||||
return request(
|
||||
`/api/workspace/group-push/tasks/${taskId}`,
|
||||
undefined,
|
||||
"DELETE"
|
||||
"DELETE",
|
||||
);
|
||||
}
|
||||
|
||||
@@ -266,7 +266,7 @@ export function deleteAutoGroupTask(taskId: string) {
|
||||
return request(
|
||||
`/api/workspace/auto-group/tasks/${taskId}`,
|
||||
undefined,
|
||||
"DELETE"
|
||||
"DELETE",
|
||||
);
|
||||
}
|
||||
|
||||
@@ -287,7 +287,7 @@ export function getAIAnalysisReport() {
|
||||
return request(
|
||||
"/api/workspace/ai-assistant/analysis-report",
|
||||
undefined,
|
||||
"GET"
|
||||
"GET",
|
||||
);
|
||||
}
|
||||
|
||||
@@ -379,6 +379,6 @@ export function markNotificationAsRead(notificationId: string) {
|
||||
return request(
|
||||
`/api/system/notifications/${notificationId}/read`,
|
||||
undefined,
|
||||
"PUT"
|
||||
"PUT",
|
||||
);
|
||||
}
|
||||
|
||||
59
nkebao/src/pages/mobile/test/index.tsx
Normal file
59
nkebao/src/pages/mobile/test/index.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import React from "react";
|
||||
import { Card, Button, Space, Typography, Tag } from "antd";
|
||||
import { MessageOutlined, SelectOutlined } from "@ant-design/icons";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { isDevelopment } from "@/utils/env";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
const TestIndex: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Layout header={<NavCommon title="测试页面" />}>
|
||||
<div style={{ padding: "20px", maxWidth: "800px", margin: "0 auto" }}>
|
||||
<Title level={2}>
|
||||
测试页面
|
||||
{isDevelopment && (
|
||||
<Tag color="orange" style={{ marginLeft: 8, fontSize: "12px" }}>
|
||||
开发环境
|
||||
</Tag>
|
||||
)}
|
||||
</Title>
|
||||
|
||||
<Space direction="vertical" style={{ width: "100%" }} size="large">
|
||||
<Card title="组件测试" size="small">
|
||||
<Space direction="vertical" style={{ width: "100%" }}>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<MessageOutlined />}
|
||||
size="large"
|
||||
block
|
||||
onClick={() => navigate("/test/postMessage")}
|
||||
>
|
||||
UniApp桥接测试
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
icon={<SelectOutlined />}
|
||||
size="large"
|
||||
block
|
||||
onClick={() => navigate("/test/select")}
|
||||
>
|
||||
选择组件测试
|
||||
</Button>
|
||||
</Space>
|
||||
</Card>
|
||||
|
||||
<Card title="说明" size="small">
|
||||
<Text>这里提供各种功能的测试页面，方便开发和调试。</Text>
|
||||
</Card>
|
||||
</Space>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default TestIndex;
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from "react";
|
||||
import { NavBar, Tabs } from "antd-mobile";
|
||||
import { NavBar, Tabs, Tag } from "antd-mobile";
|
||||
import { ArrowLeftOutlined } from "@ant-design/icons";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
@@ -9,6 +9,7 @@ import FriendSelection from "@/components/FriendSelection";
|
||||
import GroupSelection from "@/components/GroupSelection";
|
||||
import ContentLibrarySelection from "@/components/ContentLibrarySelection";
|
||||
import AccountSelection from "@/components/AccountSelection";
|
||||
import { isDevelopment } from "@/utils/env";
|
||||
|
||||
const ComponentTest: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
@@ -26,11 +27,19 @@ const ComponentTest: React.FC = () => {
|
||||
// 内容库选择状态
|
||||
const [selectedLibraries, setSelectedLibraries] = useState<string[]>([]);
|
||||
|
||||
const [selectedAccounts, setSelectedAccounts] = useState<string[]>([]);
|
||||
const [selectedAccounts, setSelectedAccounts] = useState<number[]>([]);
|
||||
|
||||
return (
|
||||
<Layout header={<NavCommon title="组件调试" />}>
|
||||
<div style={{ padding: 16 }}>
|
||||
{isDevelopment && (
|
||||
<div style={{ marginBottom: 16, textAlign: "center" }}>
|
||||
<Tag color="orange" style={{ fontSize: "12px" }}>
|
||||
开发环境 - 组件测试
|
||||
</Tag>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Tabs activeKey={activeTab} onChange={setActiveTab}>
|
||||
<Tabs.Tab title="设备选择" key="devices">
|
||||
<div style={{ padding: "16px 0" }}>
|
||||
@@ -59,7 +59,7 @@ const mockTaskDetail: GroupTaskDetail = {
|
||||
nickname: `用户${mIndex + 1}`,
|
||||
wechatId: `wx_${mIndex}`,
|
||||
tags: [`标签${(mIndex % 3) + 1}`],
|
||||
})
|
||||
}),
|
||||
),
|
||||
})),
|
||||
createTime: "2024-11-20 19:04:14",
|
||||
@@ -169,10 +169,10 @@ const GroupCreationProgress: React.FC<{
|
||||
}> = ({ taskDetail, onComplete }) => {
|
||||
const [groups, setGroups] = useState<Group[]>(taskDetail.groups);
|
||||
const [currentGroupIndex, setCurrentGroupIndex] = useState(
|
||||
taskDetail.currentGroupIndex
|
||||
taskDetail.currentGroupIndex,
|
||||
);
|
||||
const [status, setStatus] = useState<GroupTaskDetail["status"]>(
|
||||
taskDetail.status
|
||||
taskDetail.status,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -207,7 +207,7 @@ const GroupCreationProgress: React.FC<{
|
||||
};
|
||||
}
|
||||
return group;
|
||||
})
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -149,8 +149,8 @@ const AutoGroupList: React.FC = () => {
|
||||
...task,
|
||||
status: task.status === "running" ? "paused" : "running",
|
||||
}
|
||||
: task
|
||||
)
|
||||
: task,
|
||||
),
|
||||
);
|
||||
Toast.show({ content: "状态已切换" });
|
||||
};
|
||||
@@ -160,7 +160,7 @@ const AutoGroupList: React.FC = () => {
|
||||
};
|
||||
|
||||
const filteredTasks = tasks.filter(task =>
|
||||
task.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
task.name.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
|
||||
// 获取自动点赞任务列表
|
||||
export function fetchAutoLikeTasks(
|
||||
params = { type: 1, page: 1, limit: 100 }
|
||||
params = { type: 1, page: 1, limit: 100 },
|
||||
): Promise<LikeTask[]> {
|
||||
return request("/v1/workbench/list", params, "GET");
|
||||
}
|
||||
@@ -49,7 +49,7 @@ export function fetchLikeRecords(
|
||||
workbenchId: string,
|
||||
page: number = 1,
|
||||
limit: number = 20,
|
||||
keyword?: string
|
||||
keyword?: string,
|
||||
): Promise<PaginatedResponse<LikeRecord>> {
|
||||
const params: any = {
|
||||
workbenchId,
|
||||
|
||||
@@ -224,7 +224,7 @@ const AutoLike: React.FC = () => {
|
||||
|
||||
// 过滤任务
|
||||
const filteredTasks = tasks.filter(task =>
|
||||
task.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
task.name.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
@@ -82,7 +82,7 @@ const NewAutoLike: React.FC = () => {
|
||||
});
|
||||
setAutoEnabled(
|
||||
(taskDetail as any).status === 1 ||
|
||||
(taskDetail as any).status === "running"
|
||||
(taskDetail as any).status === "running",
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
|
||||
// 获取自动点赞任务列表
|
||||
export function fetchAutoLikeTasks(
|
||||
params = { type: 1, page: 1, limit: 100 }
|
||||
params = { type: 1, page: 1, limit: 100 },
|
||||
): Promise<LikeTask[]> {
|
||||
return request("/v1/workbench/list", params, "GET");
|
||||
}
|
||||
@@ -49,7 +49,7 @@ export function fetchLikeRecords(
|
||||
workbenchId: string,
|
||||
page: number = 1,
|
||||
limit: number = 20,
|
||||
keyword?: string
|
||||
keyword?: string,
|
||||
): Promise<PaginatedResponse<LikeRecord>> {
|
||||
const params: any = {
|
||||
workbenchId,
|
||||
|
||||
@@ -40,12 +40,12 @@ export async function deleteGroupPushTask(id: string): Promise<ApiResponse> {
|
||||
|
||||
export async function toggleGroupPushTask(
|
||||
id: string,
|
||||
status: string
|
||||
status: string,
|
||||
): Promise<ApiResponse> {
|
||||
return request(
|
||||
`/v1/workspace/group-push/tasks/${id}/toggle`,
|
||||
{ status },
|
||||
"POST"
|
||||
"POST",
|
||||
);
|
||||
}
|
||||
|
||||
@@ -54,20 +54,20 @@ export async function copyGroupPushTask(id: string): Promise<ApiResponse> {
|
||||
}
|
||||
|
||||
export async function createGroupPushTask(
|
||||
taskData: Partial<GroupPushTask>
|
||||
taskData: Partial<GroupPushTask>,
|
||||
): Promise<ApiResponse> {
|
||||
return request("/v1/workspace/group-push/tasks", taskData, "POST");
|
||||
}
|
||||
|
||||
export async function updateGroupPushTask(
|
||||
id: string,
|
||||
taskData: Partial<GroupPushTask>
|
||||
taskData: Partial<GroupPushTask>,
|
||||
): Promise<ApiResponse> {
|
||||
return request(`/v1/workspace/group-push/tasks/${id}`, taskData, "PUT");
|
||||
}
|
||||
|
||||
export async function getGroupPushTaskDetail(
|
||||
id: string
|
||||
id: string,
|
||||
): Promise<GroupPushTask> {
|
||||
return request(`/v1/workspace/group-push/tasks/${id}`);
|
||||
}
|
||||
|
||||
@@ -226,7 +226,7 @@ const Detail: React.FC = () => {
|
||||
</div>
|
||||
<Progress
|
||||
percent={Math.round(
|
||||
(task.pushCount / task.maxPushPerDay) * 100
|
||||
(task.pushCount / task.maxPushPerDay) * 100,
|
||||
)}
|
||||
size="small"
|
||||
/>
|
||||
|
||||
@@ -105,7 +105,7 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
|
||||
onChange={e =>
|
||||
handleChange(
|
||||
"dailyPushCount",
|
||||
Number.parseInt(e.target.value) || 1
|
||||
Number.parseInt(e.target.value) || 1,
|
||||
)
|
||||
}
|
||||
style={{ width: 80, textAlign: "center" }}
|
||||
|
||||
@@ -81,7 +81,7 @@ const ContentSelector: React.FC<ContentSelectorProps> = ({
|
||||
const [libraries] = useState<ContentLibrary[]>(mockLibraries);
|
||||
|
||||
const filteredLibraries = libraries.filter(library =>
|
||||
library.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
library.name.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
);
|
||||
|
||||
const handleLibraryToggle = (library: ContentLibrary, checked: boolean) => {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user