feat: 小菜记账 v1.0 - 完整功能实现

核心功能： - 记账CRUD（支出/收入/分类/备注/日期） - 统计分析（概览/分类占比/每日趋势） - 预算管理（按月设置/进度条/超支提醒） - 数据导出CSV 安全与认证： - HMAC-SHA256签名token认证 - 用户数据隔离 - 输入验证与错误处理 - CORS配置前端优化： - 骨架屏加载 - 账单按日期分组 - 预算页面重构（快捷预设+Numpad） - SvgIcon组件（H5+微信双端适配） - 下拉刷新后端优化： - 共享日期工具函数 - 数据库连接池优化 - 健康检查端点 - 优雅关闭处理技术栈： - 前端：Uni-app (Vue 3 + Pinia) - 后端：Node.js + Express + MySQL
2026-05-29 16:14:15 +08:00
commit c7f29aa7a7
70 changed files with 32282 additions and 0 deletions
--- a/client/src/pages/category-manage/index.vue
+++ b/client/src/pages/category-manage/index.vue
@@ -0,0 +1,227 @@
+<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>
+      <text class="title">分类管理</text>
+      <view style="width: 88rpx;"></view>
+    </view>
+
+    <view class="tabs-wrap">
+      <view class="tabs">
+        <view class="tab" :class="{ active: tabType === 'expense' }" @tap="tabType = 'expense'">支出</view>
+        <view class="tab" :class="{ active: tabType === 'income' }" @tap="tabType = 'income'">收入</view>
+      </view>
+    </view>
+
+    <view class="cat-list">
+      <view v-for="cat in currentCategories" :key="cat.id" class="cat-row">
+        <view class="cat-info">
+          <CategoryIcon :label="cat.name[0]" :color="cat.color" :bg-color="cat.color + '15'" size="sm" />
+          <text class="cat-name">{{ cat.name }}</text>
+          <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" />
+        </view>
+      </view>
+    </view>
+
+    <view class="add-section">
+      <text class="add-title">添加自定义分类</text>
+      <view class="add-form">
+        <input class="add-input" v-model="newName" placeholder="分类名称" maxlength="10" />
+        <view class="add-btn" :class="{ disabled: !newName.trim() }" @tap="onAdd">添加</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+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 { statusBarHeight } from '@/utils/system'
+
+const catStore = useCategoryStore()
+const tabType = ref<'expense' | 'income'>('expense')
+const newName = ref('')
+
+const currentCategories = computed(() => catStore.getByType(tabType.value))
+
+onMounted(() => catStore.fetchCategories())
+
+async function onAdd() {
+  const name = newName.value.trim()
+  if (!name) return
+
+  const colors = ['#FF8C69', '#7BC67E', '#5B9BD5', '#FFD700', '#FF69B4', '#8B5CF6', '#F97316', '#06B6D4']
+  const color = colors[Math.floor(Math.random() * colors.length)]
+
+  try {
+    await catStore.addCategory({
+      name,
+      icon: name[0],
+      color,
+      type: tabType.value
+    })
+    newName.value = ''
+    uni.showToast({ title: '添加成功', icon: 'success' })
+  } catch {
+    uni.showToast({ title: '添加失败', icon: 'none' })
+  }
+}
+
+async function onDelete(cat: any) {
+  uni.showModal({
+    title: '删除分类',
+    content: `确定删除「${cat.name}」？该分类下的记录将变为"未分类"。`,
+    success: async (res) => {
+      if (res.confirm) {
+        try {
+          await catStore.deleteCategory(cat.id)
+          uni.showToast({ title: '已删除', icon: 'success' })
+        } catch {
+          uni.showToast({ title: '删除失败', icon: 'none' })
+        }
+      }
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  min-height: 100vh;
+  background: #FFF8F0;
+  padding: 0 0 180rpx;
+}
+
+.status-bar { background: #FFF8F0; }
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 40rpx;
+}
+
+.back {
+  width: 88rpx;
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title { font-size: 32rpx; font-weight: 600; color: #2D1B1B; }
+
+.tabs-wrap { display: flex; justify-content: center; margin: 16rpx 0 32rpx; }
+
+.tabs {
+  display: inline-flex;
+  background: #FFF0E6;
+  border-radius: 24rpx;
+  padding: 8rpx;
+}
+
+.tab {
+  padding: 16rpx 40rpx;
+  border-radius: 20rpx;
+  font-size: 28rpx;
+  color: #8B7E7E;
+  transition: all 0.2s;
+
+  &.active {
+    background: #FFFFFF;
+    color: #FF8C69;
+    font-weight: 600;
+    box-shadow: 2rpx 2rpx 8rpx rgba(45, 27, 27, 0.06);
+  }
+}
+
+.cat-list { padding: 0 40rpx; }
+
+.cat-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 0;
+  border-bottom: 1rpx solid #F0E0D6;
+
+  &:last-child { border-bottom: none; }
+}
+
+.cat-info {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.cat-name { font-size: 28rpx; color: #2D1B1B; font-weight: 500; }
+
+.cat-badge {
+  font-size: 20rpx;
+  color: #FF8C69;
+  background: #FFE8E0;
+  padding: 4rpx 12rpx;
+  border-radius: 8rpx;
+}
+
+.cat-actions {
+  width: 64rpx;
+  height: 64rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.add-section {
+  margin: 48rpx 40rpx 0;
+  padding: 32rpx;
+  background: #FFFFFF;
+  border-radius: 32rpx;
+  border: 2rpx solid #F0E0D6;
+}
+
+.add-title {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #2D1B1B;
+  display: block;
+  margin-bottom: 24rpx;
+}
+
+.add-form {
+  display: flex;
+  gap: 16rpx;
+}
+
+.add-input {
+  flex: 1;
+  height: 88rpx;
+  background: #FFF8F0;
+  border-radius: 20rpx;
+  padding: 0 24rpx;
+  font-size: 28rpx;
+}
+
+.add-btn {
+  width: 160rpx;
+  height: 88rpx;
+  background: linear-gradient(135deg, #FF8C69, #E67355);
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #FFFFFF;
+
+  &.disabled { opacity: 0.5; }
+  &:active { opacity: 0.8; }
+}
+</style>