feat: 交互优化与代码质量改进
- SvgIcon 改为 PNG 图标方案,组件重命名为 Icon - 修复 TransactionItem tap 事件名冲突,改为 item-tap - 修复 Stats 页面切换 tab 时 overview 不更新 - 修复 CategoryIcon bgColor 必填问题 - 修复 ChartWrapper import 顺序 - 修复 budget onDelete 空字符串问题 - 清理 profile 页面未使用 CSS - 统一所有页面 header 为 sticky 定位 - 修复导航栏返回按钮不统一 - 添加导出功能 loading 状态 - 优化 scroll-into-view 延迟
This commit is contained in:
@@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view class="header">
|
||||
<view class="back" @tap="uni.navigateBack()">
|
||||
<SvgIcon name="arrowLeft" :size="36" color="#2D1B1B" />
|
||||
<view class="header-fixed">
|
||||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view class="header">
|
||||
<view class="nav-back" @tap="goBack">
|
||||
<Icon name="arrowLeft" :size="36" color="#2D1B1B" />
|
||||
</view>
|
||||
<text class="title">分类管理</text>
|
||||
<view style="width: 88rpx;"></view>
|
||||
</view>
|
||||
<text class="title">分类管理</text>
|
||||
<view style="width: 88rpx;"></view>
|
||||
</view>
|
||||
|
||||
<view class="tabs-wrap">
|
||||
@@ -24,7 +26,7 @@
|
||||
<text class="cat-badge" v-if="cat.is_custom">自定义</text>
|
||||
</view>
|
||||
<view class="cat-actions" v-if="cat.is_custom" @tap="onDelete(cat)">
|
||||
<SvgIcon name="trash" :size="28" color="#FF6B6B" />
|
||||
<Icon name="trash" :size="28" color="#FF6B6B" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -52,7 +54,7 @@
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useCategoryStore } from '@/stores/category'
|
||||
import CategoryIcon from '@/components/CategoryIcon/CategoryIcon.vue'
|
||||
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
|
||||
import Icon from '@/components/Icon/Icon.vue'
|
||||
import { statusBarHeight } from '@/utils/system'
|
||||
|
||||
const catStore = useCategoryStore()
|
||||
@@ -65,6 +67,10 @@ const currentCategories = computed(() => catStore.getByType(tabType.value))
|
||||
|
||||
onMounted(() => catStore.fetchCategories())
|
||||
|
||||
function goBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
async function onAdd() {
|
||||
const name = newName.value.trim()
|
||||
if (!name) return
|
||||
@@ -132,6 +138,13 @@ async function onDelete(cat: any) {
|
||||
padding: 0 0 180rpx;
|
||||
}
|
||||
|
||||
.header-fixed {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #FFF8F0;
|
||||
}
|
||||
|
||||
.status-bar { background: #FFF8F0; }
|
||||
|
||||
.header {
|
||||
@@ -141,12 +154,15 @@ async function onDelete(cat: any) {
|
||||
padding: 16rpx 40rpx;
|
||||
}
|
||||
|
||||
.back {
|
||||
.nav-back {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
|
||||
&:active { background: #F0E0D6; }
|
||||
}
|
||||
|
||||
.title { font-size: 32rpx; font-weight: 600; color: #2D1B1B; }
|
||||
|
||||
Reference in New Issue
Block a user