DeXun/attractor
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化项目

Browse Source
This commit is contained in:
86156
2026-04-07 11:18:02 +08:00
commit e277bb47cb
1114 changed files with 125107 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
attractor-ui/pages/mine/about/index.vue Normal file
View File

@@ -0,0 +1,173 @@
<template>
<view class="manual-page">
<view class="hero-card">
<image class="logo" src="/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png" mode="aspectFit"></image>
<view class="hero-text">
<text class="title">Attractor 设备与软件说明</text>
<text class="subtitle">让连接、控制与日常使用更清晰</text>
</view>
</view>
<scroll-view class="manual-list" scroll-y>
<view class="section-card">
<text class="section-title">软件说明</text>
<view class="row">
<text class="label">当前版本</text>
<text class="value">v{{ version }}</text>
</view>
<text class="desc">Attractor App 用于设备连接、参数设置、状态查看与快捷控制。建议保持应用为最新版本，以获得更稳定的蓝牙连接和更完整的功能体验。</text>
</view>
<view class="section-card">
<text class="section-title">设备连接说明</text>
<text class="bullet">1. 首次使用前，请确保设备电量充足并处于可连接状态。</text>
<text class="bullet">2. 打开“我的设备”页面后，系统会自动搜索附近设备。</text>
<text class="bullet">3. 点击候选设备并确认连接，成功后会进入“我的设备”列表。</text>
<text class="bullet">4. 若连接失败，请重启设备蓝牙并靠近手机后重试。</text>
</view>
<view class="section-card">
<text class="section-title">治疗参数说明</text>
<text class="bullet">• 模式：舒缓模式适合日常放松，强效模式适合更高强度需求。</text>
<text class="bullet">• 档位：建议从低档逐步上调，避免突然增加刺激强度。</text>
<text class="bullet">• 频率/脉宽：请根据个人体感逐步调整，若不适请立即停止。</text>
<text class="bullet">• 电压：支持按“+/-”调整，建议先低后高，逐步适配。</text>
</view>
<view class="section-card">
<text class="section-title">安全与注意事项</text>
<text class="bullet">• 使用过程中若出现明显不适，请立即停止并咨询专业人士。</text>
<text class="bullet">• 请勿在驾驶、洗浴、睡眠等不适宜场景中使用。</text>
<text class="bullet">• 设备异常发热、无响应或连接不稳定时，请先断电后再排查。</text>
</view>
<view class="section-card">
<text class="section-title">技术支持</text>
<view class="row">
<text class="label">支持邮箱</text>
<text class="value">support@attractor.app</text>
</view>
<view class="row">
<text class="label">服务时间</text>
<text class="value">工作日 09:00 - 18:00</text>
</view>
</view>
<view class="footer-tip">
<text>© 2026 Attractor. All Rights Reserved.</text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
version: getApp().globalData?.config?.appInfo?.version || '2.3.0'
}
}
}
</script>
<style scoped>
.manual-page {
min-height: 100vh;
background: #f4f7f8;
padding: 20rpx;
box-sizing: border-box;
}
.hero-card {
background: #ffffff;
border: 1rpx solid #e7eeef;
border-radius: 18rpx;
padding: 22rpx;
display: flex;
align-items: center;
margin-bottom: 14rpx;
}
.logo {
width: 90rpx;
height: 90rpx;
border-radius: 18rpx;
margin-right: 16rpx;
}
.hero-text {
display: flex;
flex-direction: column;
}
.title {
font-size: 31rpx;
font-weight: 700;
color: #0f172a;
}
.subtitle {
margin-top: 4rpx;
font-size: 22rpx;
color: #94a3b8;
}
.manual-list {
height: calc(100vh - 170rpx);
}
.section-card {
background: #ffffff;
border: 1rpx solid #e7eeef;
border-radius: 16rpx;
padding: 18rpx;
margin-bottom: 12rpx;
}
.section-title {
display: block;
font-size: 28rpx;
font-weight: 700;
color: #0f7f7a;
margin-bottom: 10rpx;
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8rpx;
}
.label {
font-size: 24rpx;
color: #475569;
}
.value {
font-size: 24rpx;
color: #0f172a;
font-weight: 600;
}
.desc {
font-size: 24rpx;
color: #334155;
line-height: 1.65;
}
.bullet {
display: block;
font-size: 24rpx;
color: #334155;
line-height: 1.65;
margin-bottom: 6rpx;
}
.footer-tip {
text-align: center;
color: #94a3b8;
font-size: 22rpx;
padding: 16rpx 0 20rpx;
}
</style>

618
attractor-ui/pages/mine/avatar/index.vue Normal file
View File

@@ -0,0 +1,618 @@
<template>
<view class="container">
<view class="page-body uni-content-info">
<view class='cropper-content'>
<view v-if="isShowImg" class="uni-corpper" :style="'width:'+cropperInitW+'px;height:'+cropperInitH+'px;background:#000'">
<view class="uni-corpper-content" :style="'width:'+cropperW+'px;height:'+cropperH+'px;left:'+cropperL+'px;top:'+cropperT+'px'">
<image :src="imageSrc" :style="'width:'+cropperW+'px;height:'+cropperH+'px'"></image>
<view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove" @touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd"
:style="'left:'+cutL+'px;top:'+cutT+'px;right:'+cutR+'px;bottom:'+cutB+'px'">
<view class="uni-cropper-view-box">
<view class="uni-cropper-dashed-h"></view>
<view class="uni-cropper-dashed-v"></view>
<view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-tr" data-drag="topTight"></view>
<view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view>
<view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-lt" data-drag="leftTop"></view>
</view>
</view>
</view>
</view>
</view>
<view class='cropper-config'>
<button type="primary reverse" @click="getImage" style='margin-top: 30rpx;'> 选择头像 </button>
<button type="warn" @click="getImageInfo" style='margin-top: 30rpx;'> 提交 </button>
</view>
<canvas canvas-id="myCanvas" :style="'position:absolute;border: 1px solid red; width:'+imageW+'px;height:'+imageH+'px;top:-9999px;left:-9999px;'"></canvas>
</view>
</view>
</template>
<script>
import config from '@/config'
import store from "@/store"
import { uploadAvatar } from "@/api/system/user"
const baseUrl = config.baseUrl
let sysInfo = uni.getSystemInfoSync()
let SCREEN_WIDTH = sysInfo.screenWidth
let PAGE_X, // 手按下的x位置
PAGE_Y, // 手按下y的位置
PR = sysInfo.pixelRatio, // dpi
T_PAGE_X, // 手移动的时候x的位置
T_PAGE_Y, // 手移动的时候Y的位置
CUT_L, // 初始化拖拽元素的left值
CUT_T, // 初始化拖拽元素的top值
CUT_R, // 初始化拖拽元素的
CUT_B, // 初始化拖拽元素的
CUT_W, // 初始化拖拽元素的宽度
CUT_H, // 初始化拖拽元素的高度
IMG_RATIO, // 图片比例
IMG_REAL_W, // 图片实际的宽度
IMG_REAL_H, // 图片实际的高度
DRAFG_MOVE_RATIO = 1, //移动时候的比例,
INIT_DRAG_POSITION = 100, // 初始化屏幕宽度和裁剪区域的宽度之差，用于设置初始化裁剪的宽度
DRAW_IMAGE_W = sysInfo.screenWidth // 设置生成的图片宽度
export default {
/**
* 页面的初始数据
*/
data() {
return {
imageSrc: store.getters.avatar,
isShowImg: false,
// 初始化的宽高
cropperInitW: SCREEN_WIDTH,
cropperInitH: SCREEN_WIDTH,
// 动态的宽高
cropperW: SCREEN_WIDTH,
cropperH: SCREEN_WIDTH,
// 动态的left top值
cropperL: 0,
cropperT: 0,
transL: 0,
transT: 0,
// 图片缩放值
scaleP: 0,
imageW: 0,
imageH: 0,
// 裁剪框 宽高
cutL: 0,
cutT: 0,
cutB: SCREEN_WIDTH,
cutR: '100%',
qualityWidth: DRAW_IMAGE_W,
innerAspectRadio: DRAFG_MOVE_RATIO
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.loadImage()
},
methods: {
setData: function (obj) {
let that = this
Object.keys(obj).forEach(function (key) {
that.$set(that.$data, key, obj[key])
})
},
getImage: function () {
var _this = this
uni.chooseImage({
success: function (res) {
_this.setData({
imageSrc: res.tempFilePaths[0],
})
_this.loadImage()
},
})
},
loadImage: function () {
var _this = this
uni.getImageInfo({
src: _this.imageSrc,
success: function success(res) {
IMG_RATIO = 1 / 1
if (IMG_RATIO >= 1) {
IMG_REAL_W = SCREEN_WIDTH
IMG_REAL_H = SCREEN_WIDTH / IMG_RATIO
} else {
IMG_REAL_W = SCREEN_WIDTH * IMG_RATIO
IMG_REAL_H = SCREEN_WIDTH
}
let minRange = IMG_REAL_W > IMG_REAL_H ? IMG_REAL_W : IMG_REAL_H
INIT_DRAG_POSITION = minRange > INIT_DRAG_POSITION ? INIT_DRAG_POSITION : minRange
// 根据图片的宽高显示不同的效果 保证图片可以正常显示
if (IMG_RATIO >= 1) {
let cutT = Math.ceil((SCREEN_WIDTH / IMG_RATIO - (SCREEN_WIDTH / IMG_RATIO - INIT_DRAG_POSITION)) / 2)
let cutB = cutT
let cutL = Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH + INIT_DRAG_POSITION) / 2)
let cutR = cutL
_this.setData({
cropperW: SCREEN_WIDTH,
cropperH: SCREEN_WIDTH / IMG_RATIO,
// 初始化left right
cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2),
cutL: cutL,
cutT: cutT,
cutR: cutR,
cutB: cutB,
// 图片缩放值
imageW: IMG_REAL_W,
imageH: IMG_REAL_H,
scaleP: IMG_REAL_W / SCREEN_WIDTH,
qualityWidth: DRAW_IMAGE_W,
innerAspectRadio: IMG_RATIO
})
} else {
let cutL = Math.ceil((SCREEN_WIDTH * IMG_RATIO - (SCREEN_WIDTH * IMG_RATIO)) / 2)
let cutR = cutL
let cutT = Math.ceil((SCREEN_WIDTH - INIT_DRAG_POSITION) / 2)
let cutB = cutT
_this.setData({
cropperW: SCREEN_WIDTH * IMG_RATIO,
cropperH: SCREEN_WIDTH,
// 初始化left right
cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2),
cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
cutL: cutL,
cutT: cutT,
cutR: cutR,
cutB: cutB,
// 图片缩放值
imageW: IMG_REAL_W,
imageH: IMG_REAL_H,
scaleP: IMG_REAL_W / SCREEN_WIDTH,
qualityWidth: DRAW_IMAGE_W,
innerAspectRadio: IMG_RATIO
})
}
_this.setData({
isShowImg: true
})
uni.hideLoading()
}
})
},
// 拖动时候触发的touchStart事件
contentStartMove(e) {
PAGE_X = e.touches[0].pageX
PAGE_Y = e.touches[0].pageY
},
// 拖动时候触发的touchMove事件
contentMoveing(e) {
var _this = this
var dragLengthX = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
var dragLengthY = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
// 左移
if (dragLengthX > 0) {
if (this.cutL - dragLengthX < 0) dragLengthX = this.cutL
} else {
if (this.cutR + dragLengthX < 0) dragLengthX = -this.cutR
}
if (dragLengthY > 0) {
if (this.cutT - dragLengthY < 0) dragLengthY = this.cutT
} else {
if (this.cutB + dragLengthY < 0) dragLengthY = -this.cutB
}
this.setData({
cutL: this.cutL - dragLengthX,
cutT: this.cutT - dragLengthY,
cutR: this.cutR + dragLengthX,
cutB: this.cutB + dragLengthY
})
PAGE_X = e.touches[0].pageX
PAGE_Y = e.touches[0].pageY
},
contentTouchEnd() {
},
// 获取图片
getImageInfo() {
var _this = this
uni.showLoading({
title: '图片生成中...',
})
// 将图片写入画布
const ctx = uni.createCanvasContext('myCanvas')
ctx.drawImage(_this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H)
ctx.draw(true, () => {
// 获取画布要裁剪的位置和宽度 均为百分比 * 画布中图片的宽度 保证了在微信小程序中裁剪的图片模糊 位置不对的问题 canvasT = (_this.cutT / _this.cropperH) * (_this.imageH / pixelRatio)
var canvasW = ((_this.cropperW - _this.cutL - _this.cutR) / _this.cropperW) * IMG_REAL_W
var canvasH = ((_this.cropperH - _this.cutT - _this.cutB) / _this.cropperH) * IMG_REAL_H
var canvasL = (_this.cutL / _this.cropperW) * IMG_REAL_W
var canvasT = (_this.cutT / _this.cropperH) * IMG_REAL_H
uni.canvasToTempFilePath({
x: canvasL,
y: canvasT,
width: canvasW,
height: canvasH,
destWidth: canvasW,
destHeight: canvasH,
quality: 0.5,
canvasId: 'myCanvas',
success: function (res) {
uni.hideLoading()
let data = {name: 'avatarfile', filePath: res.tempFilePath}
uploadAvatar(data).then(response => {
store.commit('SET_AVATAR', baseUrl + response.imgUrl)
uni.showToast({ title: "修改成功", icon: 'success' })
uni.navigateBack()
})
}
})
})
},
// 设置大小的时候触发的touchStart事件
dragStart(e) {
T_PAGE_X = e.touches[0].pageX
T_PAGE_Y = e.touches[0].pageY
CUT_L = this.cutL
CUT_R = this.cutR
CUT_B = this.cutB
CUT_T = this.cutT
},
// 设置大小的时候触发的touchMove事件
dragMove(e) {
var _this = this
var dragType = e.target.dataset.drag
switch (dragType) {
case 'right':
var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
if (CUT_R + dragLength < 0) dragLength = -CUT_R
this.setData({
cutR: CUT_R + dragLength
})
break
case 'left':
var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
if (CUT_L - dragLength < 0) dragLength = CUT_L
if ((CUT_L - dragLength) > (this.cropperW - this.cutR)) dragLength = CUT_L - (this.cropperW - this.cutR)
this.setData({
cutL: CUT_L - dragLength
})
break
case 'top':
var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
if (CUT_T - dragLength < 0) dragLength = CUT_T
if ((CUT_T - dragLength) > (this.cropperH - this.cutB)) dragLength = CUT_T - (this.cropperH - this.cutB)
this.setData({
cutT: CUT_T - dragLength
})
break
case 'bottom':
var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
if (CUT_B + dragLength < 0) dragLength = -CUT_B
this.setData({
cutB: CUT_B + dragLength
})
break
case 'rightBottom':
var dragLengthX = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
var dragLengthY = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
if (CUT_B + dragLengthY < 0) dragLengthY = -CUT_B
if (CUT_R + dragLengthX < 0) dragLengthX = -CUT_R
let cutB = CUT_B + dragLengthY
let cutR = CUT_R + dragLengthX
this.setData({
cutB: cutB,
cutR: cutR
})
break
default:
break
}
}
}
}
</script>
<style scoped>
.cropper-config {
padding: 20rpx 40rpx;
}
.cropper-content {
min-height: 750rpx;
width: 100%;
}
.uni-corpper {
position: relative;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
box-sizing: border-box;
}
.uni-corpper-content {
position: relative;
}
.uni-corpper-content image {
display: block;
width: 100%;
min-width: 0 !important;
max-width: none !important;
height: 100%;
min-height: 0 !important;
max-height: none !important;
image-orientation: 0deg !important;
margin: 0 auto;
}
/* 移动图片效果 */
.uni-cropper-drag-box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: move;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
}
/* 内部的信息 */
.uni-corpper-crop-box {
position: absolute;
background: rgba(255, 255, 255, 0.3);
z-index: 2;
}
.uni-corpper-crop-box .uni-cropper-view-box {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: visible;
outline: 1rpx solid #69f;
outline-color: rgba(102, 153, 255, .75)
}
/* 横向虚线 */
.uni-cropper-dashed-h {
position: absolute;
top: 33.33333333%;
left: 0;
width: 100%;
height: 33.33333333%;
border-top: 1rpx dashed rgba(255, 255, 255, 0.5);
border-bottom: 1rpx dashed rgba(255, 255, 255, 0.5);
}
/* 纵向虚线 */
.uni-cropper-dashed-v {
position: absolute;
left: 33.33333333%;
top: 0;
width: 33.33333333%;
height: 100%;
border-left: 1rpx dashed rgba(255, 255, 255, 0.5);
border-right: 1rpx dashed rgba(255, 255, 255, 0.5);
}
/* 四个方向的线 为了之后的拖动事件*/
.uni-cropper-line-t {
position: absolute;
display: block;
width: 100%;
background-color: #69f;
top: 0;
left: 0;
height: 1rpx;
opacity: 0.1;
cursor: n-resize;
}
.uni-cropper-line-t::before {
content: '';
position: absolute;
top: 50%;
right: 0rpx;
width: 100%;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
bottom: 0;
height: 41rpx;
background: transparent;
z-index: 11;
}
.uni-cropper-line-r {
position: absolute;
display: block;
background-color: #69f;
top: 0;
right: 0rpx;
width: 1rpx;
opacity: 0.1;
height: 100%;
cursor: e-resize;
}
.uni-cropper-line-r::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 41rpx;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
bottom: 0;
height: 100%;
background: transparent;
z-index: 11;
}
.uni-cropper-line-b {
position: absolute;
display: block;
width: 100%;
background-color: #69f;
bottom: 0;
left: 0;
height: 1rpx;
opacity: 0.1;
cursor: s-resize;
}
.uni-cropper-line-b::before {
content: '';
position: absolute;
top: 50%;
right: 0rpx;
width: 100%;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
bottom: 0;
height: 41rpx;
background: transparent;
z-index: 11;
}
.uni-cropper-line-l {
position: absolute;
display: block;
background-color: #69f;
top: 0;
left: 0;
width: 1rpx;
opacity: 0.1;
height: 100%;
cursor: w-resize;
}
.uni-cropper-line-l::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 41rpx;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
bottom: 0;
height: 100%;
background: transparent;
z-index: 11;
}
.uni-cropper-point {
width: 5rpx;
height: 5rpx;
background-color: #69f;
opacity: .75;
position: absolute;
z-index: 3;
}
.point-t {
top: -3rpx;
left: 50%;
margin-left: -3rpx;
cursor: n-resize;
}
.point-tr {
top: -3rpx;
left: 100%;
margin-left: -3rpx;
cursor: n-resize;
}
.point-r {
top: 50%;
left: 100%;
margin-left: -3rpx;
margin-top: -3rpx;
cursor: n-resize;
}
.point-rb {
left: 100%;
top: 100%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
cursor: n-resize;
width: 36rpx;
height: 36rpx;
background-color: #69f;
position: absolute;
z-index: 1112;
opacity: 1;
}
.point-b {
left: 50%;
top: 100%;
margin-left: -3rpx;
margin-top: -3rpx;
cursor: n-resize;
}
.point-bl {
left: 0%;
top: 100%;
margin-left: -3rpx;
margin-top: -3rpx;
cursor: n-resize;
}
.point-l {
left: 0%;
top: 50%;
margin-left: -3rpx;
margin-top: -3rpx;
cursor: n-resize;
}
.point-lt {
left: 0%;
top: 0%;
margin-left: -3rpx;
margin-top: -3rpx;
cursor: n-resize;
}
/* 裁剪框预览内容 */
.uni-cropper-viewer {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.uni-cropper-viewer image {
position: absolute;
z-index: 2;
}
</style>

199
attractor-ui/pages/mine/help/index.vue Normal file
View File

@@ -0,0 +1,199 @@
<template>
<view class="record-page">
<view class="header-card">
<text class="title">使用记录</text>
<text class="sub">最近设备连接与控制行为</text>
</view>
<scroll-view class="record-list" scroll-y>
<view v-if="records.length === 0" class="empty-card">
<text class="empty-title">暂无使用记录</text>
<text class="empty-sub">连接设备并执行操作后会自动生成记录</text>
</view>
<view v-for="item in records" :key="item.id" class="record-card">
<view class="row top">
<text class="device-name">{{ item.deviceName }}</text>
<text class="time">{{ item.time }}</text>
</view>
<view class="row middle">
<text class="device-id">{{ item.deviceId }}</text>
<text class="status" :class="item.statusClass">{{ item.statusText }}</text>
</view>
<view class="event-wrap">
<text class="event-tag">{{ item.eventType }}</text>
<text class="event-desc">{{ item.desc }}</text>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
records: [
{
id: 1,
deviceName: 'Attractor 主设备',
deviceId: '8A:E5:FC:D4:C0:50',
time: '2026-03-27 14:18',
eventType: '连接',
desc: '设备连接成功并进入参数页面',
statusText: '成功',
statusClass: 'ok'
},
{
id: 2,
deviceName: 'Attractor 主设备',
deviceId: '8A:E5:FC:D4:C0:50',
time: '2026-03-27 14:22',
eventType: '快捷启动',
desc: '首页快捷启动指令发送完成（0x30/0x01）',
statusText: '成功',
statusClass: 'ok'
},
{
id: 3,
deviceName: 'Attractor 主设备',
deviceId: '8A:E5:FC:D4:C0:50',
time: '2026-03-27 14:26',
eventType: '快捷停止',
desc: '首页快捷停止指令发送完成（0x30/0x00）',
statusText: '成功',
statusClass: 'ok'
}
]
}
}
}
</script>
<style scoped>
.record-page {
min-height: 100vh;
background: #f4f7f8;
padding: 20rpx;
box-sizing: border-box;
}
.header-card {
background: #ffffff;
border: 1rpx solid #e7eeef;
border-radius: 16rpx;
padding: 20rpx;
margin-bottom: 14rpx;
}
.title {
display: block;
font-size: 32rpx;
font-weight: 700;
color: #0f172a;
}
.sub {
display: block;
margin-top: 4rpx;
font-size: 22rpx;
color: #94a3b8;
}
.record-list {
height: calc(100vh - 150rpx);
}
.record-card {
background: #ffffff;
border: 1rpx solid #e7eeef;
border-radius: 16rpx;
padding: 18rpx;
margin-bottom: 12rpx;
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
}
.row.top {
margin-bottom: 8rpx;
}
.row.middle {
margin-bottom: 10rpx;
}
.device-name {
font-size: 26rpx;
font-weight: 600;
color: #0f172a;
}
.time {
font-size: 21rpx;
color: #94a3b8;
}
.device-id {
font-size: 22rpx;
color: #64748b;
}
.status {
font-size: 20rpx;
border-radius: 999rpx;
padding: 4rpx 12rpx;
}
.status.ok {
color: #0f7f7a;
background: #e6f5f4;
}
.event-wrap {
display: flex;
gap: 10rpx;
align-items: flex-start;
}
.event-tag {
font-size: 21rpx;
color: #0f7f7a;
background: #f0fdfa;
border-radius: 8rpx;
padding: 4rpx 10rpx;
white-space: nowrap;
}
.event-desc {
font-size: 23rpx;
color: #334155;
line-height: 1.55;
}
.empty-card {
background: #ffffff;
border: 1rpx dashed #d6dde3;
border-radius: 16rpx;
padding: 36rpx 20rpx;
text-align: center;
}
.empty-title {
display: block;
font-size: 26rpx;
color: #64748b;
}
.empty-sub {
display: block;
margin-top: 6rpx;
font-size: 22rpx;
color: #94a3b8;
}
</style>

179
attractor-ui/pages/mine/index.vue Normal file
View File

@@ -0,0 +1,179 @@
<template>
<view class="mine-page">
<view class="profile-card">
<image class="avatar" :src="avatar" mode="aspectFill"></image>
<view class="profile-info">
<text class="name">{{ name }}</text>
<text class="desc">Attractor 用户</text>
</view>
</view>
<view class="menu-section">
<view class="menu-item" @click="goToDevice">
<view class="left">
<uni-icons type="gear" size="20" color="#1f9f9a"></uni-icons>
<text class="label">我的设备</text>
</view>
<uni-icons type="right" size="16" color="#94a3b8"></uni-icons>
</view>
<view class="menu-item" @click="goToNotice">
<view class="left">
<uni-icons type="notification" size="20" color="#1f9f9a"></uni-icons>
<text class="label">公告中心</text>
</view>
<uni-icons type="right" size="16" color="#94a3b8"></uni-icons>
</view>
<view class="menu-item" @click="goToUsageRecord">
<view class="left">
<uni-icons type="calendar" size="20" color="#1f9f9a"></uni-icons>
<text class="label">使用记录</text>
</view>
<uni-icons type="right" size="16" color="#94a3b8"></uni-icons>
</view>
<view class="menu-item" @click="goToDeviceGuide">
<view class="left">
<uni-icons type="help" size="20" color="#1f9f9a"></uni-icons>
<text class="label">设备说明</text>
</view>
<uni-icons type="right" size="16" color="#94a3b8"></uni-icons>
</view>
<view class="menu-item" @click="resetDeviceFactory">
<view class="left">
<uni-icons type="reload" size="20" color="#ef4444"></uni-icons>
<text class="label danger">恢复出厂</text>
</view>
<uni-icons type="right" size="16" color="#94a3b8"></uni-icons>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
name: 'Attractor_001',
avatar: '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png'
}
},
methods: {
goToDevice() {
uni.navigateTo({
url: '/pages/devices/master'
})
},
goToNotice() {
uni.switchTab({
url: '/pages/work/index'
})
},
goToUsageRecord() {
uni.navigateTo({
url: '/pages/mine/help/index'
})
},
goToDeviceGuide() {
uni.navigateTo({
url: '/pages/mine/about/index'
})
},
resetDeviceFactory() {
uni.showModal({
title: '恢复出厂',
content: '确认恢复出厂设置吗？该操作无法撤销。',
confirmText: '确认恢复',
confirmColor: '#ef4444',
success: res => {
if (res.confirm) {
uni.showToast({ title: '已提交恢复指令', icon: 'none' })
}
}
})
}
}
}
</script>
<style scoped>
.mine-page {
min-height: 100vh;
background: #f4f7f8;
padding: 24rpx;
box-sizing: border-box;
}
.profile-card {
background: #ffffff;
border-radius: 20rpx;
padding: 24rpx;
display: flex;
align-items: center;
margin-bottom: 18rpx;
border: 1rpx solid #e7eeef;
}
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
margin-right: 20rpx;
background: #f2f4f7;
}
.profile-info {
display: flex;
flex-direction: column;
}
.name {
font-size: 34rpx;
font-weight: 700;
color: #0f172a;
}
.desc {
font-size: 24rpx;
color: #94a3b8;
margin-top: 6rpx;
}
.menu-section {
background: #ffffff;
border-radius: 20rpx;
border: 1rpx solid #e7eeef;
padding: 6rpx 0;
}
.menu-item {
height: 92rpx;
padding: 0 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.menu-item + .menu-item {
border-top: 1rpx solid #f1f5f9;
}
.left {
display: flex;
align-items: center;
gap: 12rpx;
}
.label {
font-size: 28rpx;
color: #1e293b;
}
.label.danger {
color: #ef4444;
font-weight: 600;
}
</style>

127
attractor-ui/pages/mine/info/edit.vue Normal file
View File

@@ -0,0 +1,127 @@
<template>
<view class="container">
<view class="example">
<uni-forms ref="form" :model="user" labelWidth="80px">
<uni-forms-item label="用户昵称" name="nickName">
<uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
</uni-forms-item>
<uni-forms-item label="手机号码" name="phonenumber">
<uni-easyinput v-model="user.phonenumber" placeholder="请输入手机号码" />
</uni-forms-item>
<uni-forms-item label="邮箱" name="email">
<uni-easyinput v-model="user.email" placeholder="请输入邮箱" />
</uni-forms-item>
<uni-forms-item label="性别" name="sex" required>
<uni-data-checkbox v-model="user.sex" :localdata="sexs" />
</uni-forms-item>
</uni-forms>
<button type="primary" @click="submit">提交</button>
</view>
</view>
</template>
<script>
import { getUserProfile } from "@/api/system/user"
import { updateUserProfile } from "@/api/system/user"
export default {
data() {
return {
user: {
nickName: "",
phonenumber: "",
email: "",
sex: ""
},
sexs: [{
text: '男',
value: "0"
}, {
text: '女',
value: "1"
}],
rules: {
nickName: {
rules: [{
required: true,
errorMessage: '用户昵称不能为空'
}]
},
phonenumber: {
rules: [{
required: true,
errorMessage: '手机号码不能为空'
}, {
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
errorMessage: '请输入正确的手机号码'
}]
},
email: {
rules: [{
required: true,
errorMessage: '邮箱地址不能为空'
}, {
format: 'email',
errorMessage: '请输入正确的邮箱地址'
}]
}
}
}
},
onLoad() {
this.getUser()
},
onReady() {
this.$refs.form.setRules(this.rules)
},
methods: {
getUser() {
getUserProfile().then(response => {
this.user = response.data
})
},
submit(ref) {
this.$refs.form.validate().then(res => {
updateUserProfile(this.user).then(response => {
this.$modal.msgSuccess("修改成功")
})
})
}
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #ffffff;
}
.example {
padding: 15px;
background-color: #fff;
}
.segmented-control {
margin-bottom: 15px;
}
.button-group {
margin-top: 15px;
display: flex;
justify-content: space-around;
}
.form-item {
display: flex;
align-items: center;
flex: 1;
}
.button {
display: flex;
align-items: center;
height: 35px;
line-height: 35px;
margin-left: 10px;
}
</style>

44
attractor-ui/pages/mine/info/index.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<view class="container">
<uni-list>
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="昵称" :rightText="user.nickName" />
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'phone-filled'}" title="手机号码" :rightText="user.phonenumber" />
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'email-filled'}" title="邮箱" :rightText="user.email" />
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'auth-filled'}" title="岗位" :rightText="postGroup" />
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'staff-filled'}" title="角色" :rightText="roleGroup" />
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'calendar-filled'}" title="创建日期" :rightText="user.createTime" />
</uni-list>
</view>
</template>
<script>
import { getUserProfile } from "@/api/system/user"
export default {
data() {
return {
user: {},
roleGroup: "",
postGroup: ""
}
},
onLoad() {
this.getUser()
},
methods: {
getUser() {
getUserProfile().then(response => {
this.user = response.data
this.roleGroup = response.roleGroup
this.postGroup = response.postGroup
})
}
}
}
</script>
<style lang="scss">
page {
background-color: #ffffff;
}
</style>

85
attractor-ui/pages/mine/pwd/index.vue Normal file
View File

@@ -0,0 +1,85 @@
<template>
<view class="pwd-retrieve-container">
<uni-forms ref="form" :value="user" labelWidth="80px">
<uni-forms-item name="oldPassword" label="旧密码">
<uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
</uni-forms-item>
<uni-forms-item name="newPassword" label="新密码">
<uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" />
</uni-forms-item>
<uni-forms-item name="confirmPassword" label="确认密码">
<uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
</uni-forms-item>
<button type="primary" @click="submit">提交</button>
</uni-forms>
</view>
</template>
<script>
import { updateUserPwd } from "@/api/system/user"
export default {
data() {
return {
user: {
oldPassword: undefined,
newPassword: undefined,
confirmPassword: undefined
},
rules: {
oldPassword: {
rules: [{
required: true,
errorMessage: '旧密码不能为空'
}]
},
newPassword: {
rules: [{
required: true,
errorMessage: '新密码不能为空',
},
{
minLength: 6,
maxLength: 20,
errorMessage: '长度在 6 到 20 个字符'
}
]
},
confirmPassword: {
rules: [{
required: true,
errorMessage: '确认密码不能为空'
}, {
validateFunction: (rule, value, data) => data.newPassword === value,
errorMessage: '两次输入的密码不一致'
}
]
}
}
}
},
onReady() {
this.$refs.form.setRules(this.rules)
},
methods: {
submit() {
this.$refs.form.validate().then(res => {
updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
this.$modal.msgSuccess("修改成功")
})
})
}
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #ffffff;
}
.pwd-retrieve-container {
padding-top: 36rpx;
padding: 15px;
}
</style>

78
attractor-ui/pages/mine/setting/index.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<view class="setting-container" :style="{height: `${windowHeight}px`}">
<view class="menu-list">
<view class="list-cell list-cell-arrow" @click="handleToPwd">
<view class="menu-item-box">
<view class="iconfont icon-password menu-icon"></view>
<view>修改密码</view>
</view>
</view>
<view class="list-cell list-cell-arrow" @click="handleToUpgrade">
<view class="menu-item-box">
<view class="iconfont icon-refresh menu-icon"></view>
<view>检查更新</view>
</view>
</view>
<view class="list-cell list-cell-arrow" @click="handleCleanTmp">
<view class="menu-item-box">
<view class="iconfont icon-clean menu-icon"></view>
<view>清理缓存</view>
</view>
</view>
</view>
<view class="cu-list menu">
<view class="cu-item item-box">
<view class="content text-center" @click="handleLogout">
<text class="text-black">退出登录</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
windowHeight: uni.getSystemInfoSync().windowHeight
}
},
methods: {
handleToPwd() {
this.$tab.navigateTo('/pages/mine/pwd/index')
},
handleToUpgrade() {
this.$modal.showToast('模块建设中~')
},
handleCleanTmp() {
this.$modal.showToast('模块建设中~')
},
handleLogout() {
this.$modal.confirm('确定注销并退出系统吗？').then(() => {
this.$store.dispatch('LogOut').then(() => {}).finally(()=>{
this.$tab.reLaunch('/pages/index')
})
})
}
}
}
</script>
<style lang="scss" scoped>
.page {
background-color: #f8f8f8;
}
.item-box {
background-color: #FFFFFF;
margin: 30rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10rpx;
border-radius: 8rpx;
color: #303133;
font-size: 32rpx;
}
</style>