记录页面添加管理按钮,优化编辑模式交互

功能改进:
- 新增管理按钮:点击管理按钮进入编辑模式
- 编辑模式切换:管理/取消按钮切换
- 条件显示:全选、复选框、一键清空仅在编辑模式下显示
- 优化交互:编辑模式下点击记录项选中/取消选中
- 隐藏删除按钮:编辑模式下隐藏单条删除按钮
- 自动清理:退出编辑模式时自动清空选中项

UI优化:
- 管理按钮样式:白底蓝边框,与搜索按钮区分
- 按钮布局:搜索栏三按钮并排,间距合理
- 状态提示:按钮文字动态切换(管理/取消)
This commit is contained in:
H1d3rOne committed 2026-03-08 20:55:13 +08:00
1 parent 6d80277220
commit bc3bf1a85c
1 file changed
+18 -25
@@ -16,12 +16,12 @@
@confirm="handleSearch"
/>
<button class="search-btn" @click="handleSearch">搜索</button>
<button class="manage-btn" @click="toggleManageMode">
{{ isManageMode ? '取消' : '管理' }}
<button class="manage-btn" @click="toggleEditMode">
{{ isEditMode ? '取消' : '管理' }}
</button>
</view>
<view class="action-bar" v-if="isManageMode && records.length > 0">
<view class="action-bar" v-if="isEditMode && records.length > 0">
<view class="select-all" @click="toggleSelectAll">
<view class="checkbox" :class="{ checked: isAllSelected }">
<text v-if="isAllSelected" class="check-icon">✓</text>
@@ -46,12 +46,12 @@
<view class="record-list" v-else>
<view class="record-item" v-for="(item, index) in records" :key="item.id">
<view class="checkbox-wrapper" v-if="isManageMode" @click="toggleSelect(item.id)">
<view class="checkbox-wrapper" v-if="isEditMode" @click="toggleSelect(item.id)">
<view class="checkbox" :class="{ checked: selectedIds.includes(item.id) }">
<text v-if="selectedIds.includes(item.id)" class="check-icon">✓</text>
</view>
</view>
<view class="record-content" @click="handleRecordClick(item)">
<view class="record-content" @click="isEditMode ? toggleSelect(item.id) : viewDetail(item)">
<view class="record-icon" :style="{ background: getTypeColor(item.type) }">
<text class="record-icon-text">{{ getTypeIcon(item.type) }}</text>
</view>
@@ -60,7 +60,7 @@
<text class="record-time">{{ formatTime(item.createTime) }}</text>
</view>
</view>
<view class="record-actions" v-if="!isManageMode">
<view class="record-actions" v-if="!isEditMode">
<view class="delete-btn" @click.stop="deleteRecord(item.id, index)">
<text class="delete-text">删除</text>
</view>
@@ -99,7 +99,7 @@ export default {
keyword: '',
selectedIds: [],
loading: false,
isManageMode: false
isEditMode: false
}
},
computed: {
@@ -149,24 +149,16 @@ export default {
}
},
handleSearch() {
this.page = 1
this.loadRecords()
},
toggleManageMode() {
this.isManageMode = !this.isManageMode
if (!this.isManageMode) {
toggleEditMode() {
this.isEditMode = !this.isEditMode
if (!this.isEditMode) {
this.selectedIds = []
}
},
handleRecordClick(item) {
if (this.isManageMode) {
this.toggleSelect(item.id)
} else {
this.viewDetail(item)
}
handleSearch() {
this.page = 1
this.loadRecords()
},
changePage(newPage) {
@@ -255,6 +247,7 @@ export default {
this.total = 0
this.totalPages = 0
this.selectedIds = []
this.isEditMode = false
} else {
uni.showToast({
title: result.error || '清空失败',
@@ -469,7 +462,7 @@ page {
.search-bar {
display: flex;
gap: 16rpx;
gap: 12rpx;
margin-bottom: 24rpx;
}
@@ -486,17 +479,17 @@ page {
background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
color: #fff;
border: none;
padding: 0 32rpx;
padding: 0 24rpx;
border-radius: 24rpx;
font-size: 28rpx;
font-weight: 600;
}
.manage-btn {
background: #F3F4F6;
background: rgba(255, 255, 255, 0.95);
color: #3B82F6;
border: 2rpx solid #3B82F6;
padding: 0 32rpx;
padding: 0 24rpx;
border-radius: 24rpx;
font-size: 28rpx;
font-weight: 600;