feat: add budget update functionality and enhance budget management UI

- Implemented UpdateAsync method in BudgetController for updating budget details.
- Created UpdateBudgetDto for handling budget update requests.
- Added BudgetCard component for displaying budget information with progress tracking.
- Developed BudgetEditPopup component for creating and editing budget entries.
- Introduced BudgetSummary component for summarizing budget statistics by period.
- Enhanced budget period display logic in BudgetDto to support various timeframes.

Web/src/components/Budget/BudgetSummary.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="summary-card common-card">
+    <template v-for="(config, key) in periodConfigs" :key="key">
+      <div class="summary-item">
+        <div class="label">{{ config.label }}{{ title }}率</div>
+        <div class="value" :class="getValueClass(stats[key].rate)">
+          {{ stats[key].rate }}<span class="unit">%</span>
+        </div>
+        <div class="sub-label">{{ stats[key].count }}个预算</div>
+      </div>
+      <div v-if="config.showDivider" class="divider"></div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  stats: {
+    type: Object,
+    required: true
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  getValueClass: {
+    type: Function,
+    required: true
+  }
+})
+
+const periodConfigs = {
+  week: { label: '本周', showDivider: true },
+  month: { label: '本月', showDivider: true },
+  year: { label: '年度', showDivider: false }
+}
+</script>
+
+<style scoped>
+.summary-card {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  text-align: center;
+  padding: 12px 16px;
+  margin-top: 12px;
+  margin-bottom: 4px;
+}
+
+.summary-item {
+  flex: 1;
+}
+
+.summary-item .label {
+  font-size: 12px;
+  color: #969799;
+  margin-bottom: 6px;
+}
+
+.summary-item .value {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 2px;
+  color: #323233;
+}
+
+.summary-item :deep(.value.expense) {
+  color: #ee0a24;
+}
+
+.summary-item :deep(.value.income) {
+  color: #07c160;
+}
+
+.summary-item :deep(.value.warning) {
+  color: #ff976a;
+}
+
+.summary-item .unit {
+  font-size: 11px;
+  margin-left: 1px;
+  font-weight: normal;
+}
+
+.summary-item .sub-label {
+  font-size: 11px;
+  color: #c8c9cc;
+}
+
+.divider {
+  width: 1px;
+  height: 24px;
+  background-color: #ebedf0;
+  margin: 0 4px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .summary-item .value {
+    color: #f5f5f5;
+  }
+  .divider {
+    background-color: #2c2c2c;
+  }
+}
+</style>