Claw 项目完整结构提交
This commit is contained in:
zqm
224
Claw/client/wechat_app/pages/index/index.js
Normal file
224
Claw/client/wechat_app/pages/index/index.js
Normal file
@@ -0,0 +1,224 @@
|
||||
// 首页逻辑
|
||||
const app = getApp()
|
||||
|
||||
Page({
|
||||
data: {
|
||||
userInfo: null,
|
||||
hasUserInfo: false,
|
||||
canIUse: wx.canIUse('button.open-type.getUserInfo'),
|
||||
websocketConnected: false,
|
||||
version: app.globalData.version
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
if (app.globalData.userInfo) {
|
||||
this.setData({
|
||||
userInfo: app.globalData.userInfo,
|
||||
hasUserInfo: true
|
||||
})
|
||||
} else if (this.data.canIUse) {
|
||||
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
|
||||
// 所以此处加入 callback 以防止这种情况
|
||||
app.userInfoReadyCallback = res => {
|
||||
this.setData({
|
||||
userInfo: res.userInfo,
|
||||
hasUserInfo: true
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// 在没有 open-type=getUserInfo 版本的兼容处理
|
||||
wx.getUserInfo({
|
||||
success: res => {
|
||||
app.globalData.userInfo = res.userInfo
|
||||
this.setData({
|
||||
userInfo: res.userInfo,
|
||||
hasUserInfo: true
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化WebSocket连接
|
||||
this.initWebSocket()
|
||||
},
|
||||
|
||||
getUserProfile(e) {
|
||||
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
|
||||
wx.getUserProfile({
|
||||
desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
|
||||
success: (res) => {
|
||||
app.globalData.userInfo = res.userInfo
|
||||
this.setData({
|
||||
userInfo: res.userInfo,
|
||||
hasUserInfo: true
|
||||
})
|
||||
|
||||
// 发送用户信息到服务器
|
||||
this.sendUserInfoToServer(res.userInfo)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getUserInfo(e) {
|
||||
// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
|
||||
app.globalData.userInfo = e.detail.userInfo
|
||||
this.setData({
|
||||
userInfo: e.detail.userInfo,
|
||||
hasUserInfo: true
|
||||
})
|
||||
|
||||
// 发送用户信息到服务器
|
||||
this.sendUserInfoToServer(e.detail.userInfo)
|
||||
},
|
||||
|
||||
// 发送用户信息到服务器
|
||||
sendUserInfoToServer(userInfo) {
|
||||
wx.request({
|
||||
url: `${app.globalData.apiBase}/user/info`,
|
||||
method: 'POST',
|
||||
data: {
|
||||
userInfo: userInfo,
|
||||
deviceId: app.globalData.systemInfo.model
|
||||
},
|
||||
header: {
|
||||
'content-type': 'application/json'
|
||||
},
|
||||
success: (res) => {
|
||||
console.log('用户信息上传成功', res.data)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('用户信息上传失败', err)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 初始化WebSocket连接
|
||||
initWebSocket() {
|
||||
const socket = wx.connectSocket({
|
||||
url: app.globalData.websocketUrl,
|
||||
header: {
|
||||
'content-type': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
socket.onOpen(() => {
|
||||
console.log('WebSocket连接已打开')
|
||||
this.setData({
|
||||
websocketConnected: true
|
||||
})
|
||||
|
||||
// 发送认证信息
|
||||
socket.send({
|
||||
data: JSON.stringify({
|
||||
type: 'auth',
|
||||
userId: app.globalData.userInfo ? app.globalData.userInfo.nickName : 'anonymous',
|
||||
deviceId: app.globalData.systemInfo.model,
|
||||
timestamp: Date.now()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
socket.onMessage((res) => {
|
||||
console.log('收到WebSocket消息', res.data)
|
||||
try {
|
||||
const data = JSON.parse(res.data)
|
||||
this.handleWebSocketMessage(data)
|
||||
} catch (e) {
|
||||
console.error('解析WebSocket消息失败', e)
|
||||
}
|
||||
})
|
||||
|
||||
socket.onClose(() => {
|
||||
console.log('WebSocket连接已关闭')
|
||||
this.setData({
|
||||
websocketConnected: false
|
||||
})
|
||||
|
||||
// 3秒后尝试重连
|
||||
setTimeout(() => {
|
||||
this.initWebSocket()
|
||||
}, 3000)
|
||||
})
|
||||
|
||||
socket.onError((err) => {
|
||||
console.error('WebSocket连接错误', err)
|
||||
this.setData({
|
||||
websocketConnected: false
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 处理WebSocket消息
|
||||
handleWebSocketMessage(data) {
|
||||
switch (data.type) {
|
||||
case 'task_status':
|
||||
// 处理任务状态更新
|
||||
this.handleTaskStatusUpdate(data)
|
||||
break
|
||||
case 'message':
|
||||
// 处理聊天消息
|
||||
this.handleChatMessage(data)
|
||||
break
|
||||
default:
|
||||
console.log('未知消息类型', data.type)
|
||||
}
|
||||
},
|
||||
|
||||
// 处理任务状态更新
|
||||
handleTaskStatusUpdate(data) {
|
||||
// 可以在这里更新任务列表或显示通知
|
||||
if (data.status === 'completed') {
|
||||
wx.showToast({
|
||||
title: '任务完成',
|
||||
icon: 'success'
|
||||
})
|
||||
} else if (data.status === 'failed') {
|
||||
wx.showToast({
|
||||
title: '任务失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 处理聊天消息
|
||||
handleChatMessage(data) {
|
||||
// 可以在这里显示新消息通知
|
||||
if (data.message) {
|
||||
wx.showToast({
|
||||
title: '新消息',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转到聊天页面
|
||||
goToChat() {
|
||||
wx.navigateTo({
|
||||
url: '/pages/chat/chat'
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转到任务页面
|
||||
goToTask() {
|
||||
wx.navigateTo({
|
||||
url: '/pages/task/task'
|
||||
})
|
||||
},
|
||||
|
||||
// 显示设备信息
|
||||
showDeviceInfo() {
|
||||
const systemInfo = app.globalData.systemInfo
|
||||
wx.showModal({
|
||||
title: '设备信息',
|
||||
content: `设备型号：${systemInfo.model}\n系统版本：${systemInfo.system}\n微信版本：${systemInfo.version}\n屏幕尺寸：${systemInfo.screenWidth}x${systemInfo.screenHeight}`,
|
||||
showCancel: false
|
||||
})
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '智控未来 - 企业微信智能控制系统',
|
||||
path: '/pages/index/index'
|
||||
}
|
||||
}
|
||||
})
|
||||
3
Claw/client/wechat_app/pages/index/index.json
Normal file
3
Claw/client/wechat_app/pages/index/index.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "智控未来"
|
||||
}
|
||||
50
Claw/client/wechat_app/pages/index/index.wxml
Normal file
50
Claw/client/wechat_app/pages/index/index.wxml
Normal file
@@ -0,0 +1,50 @@
|
||||
<!-- 首页 - 用户登录和主界面 -->
|
||||
<view class="container">
|
||||
<!-- 用户信息区域 -->
|
||||
<view class="user-info" wx:if="{{userInfo}}">
|
||||
<image class="avatar" src="{{userInfo.avatarUrl}}" mode="aspectFill"></image>
|
||||
<text class="nickname">{{userInfo.nickName}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<view class="login-section" wx:else>
|
||||
<button class="login-btn" bindtap="getUserProfile">授权登录</button>
|
||||
<text class="login-tip">请先授权登录以使用完整功能</text>
|
||||
</view>
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<view class="feature-menu" wx:if="{{userInfo}}">
|
||||
<view class="menu-item" bindtap="goToChat">
|
||||
<image class="menu-icon" src="/assets/icons/chat.png"></image>
|
||||
<text class="menu-title">智能聊天</text>
|
||||
<text class="menu-desc">与AI助手对话</text>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" bindtap="goToTask">
|
||||
<image class="menu-icon" src="/assets/icons/task.png"></image>
|
||||
<text class="menu-title">任务管理</text>
|
||||
<text class="menu-desc">创建和管理任务</text>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" bindtap="showDeviceInfo">
|
||||
<image class="menu-icon" src="/assets/icons/device.png"></image>
|
||||
<text class="menu-title">设备信息</text>
|
||||
<text class="menu-desc">查看设备状态</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 系统状态 -->
|
||||
<view class="system-status">
|
||||
<view class="status-item">
|
||||
<text class="status-label">连接状态：</text>
|
||||
<text class="status-value {{websocketConnected ? 'status-success' : 'status-error'}}">
|
||||
{{websocketConnected ? '已连接' : '未连接'}}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="status-item">
|
||||
<text class="status-label">系统版本：</text>
|
||||
<text class="status-value">{{version}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
125
Claw/client/wechat_app/pages/index/index.wxss
Normal file
125
Claw/client/wechat_app/pages/index/index.wxss
Normal file
@@ -0,0 +1,125 @@
|
||||
/* 首页样式 */
|
||||
.container {
|
||||
padding: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 用户信息区域 */
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 40rpx;
|
||||
background: linear-gradient(135deg, #07c160 0%, #06a050 100%);
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 30rpx;
|
||||
border: 4rpx solid white;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 登录区域 */
|
||||
.login-section {
|
||||
padding: 60rpx 40rpx;
|
||||
background: white;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
background: linear-gradient(135deg, #07c160 0%, #06a050 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50rpx;
|
||||
padding: 30rpx 80rpx;
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.login-tip {
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/* 功能菜单 */
|
||||
.feature-menu {
|
||||
background: white;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.menu-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-item:active {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.menu-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 系统状态 */
|
||||
.system-status {
|
||||
background: white;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.status-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.status-value {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
Reference in New Issue
Block a user