suncheng/EmailBill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: unify card styles across calendar, statistics, and budget pages

Browse Source 
- 调整 theme.css 中的 --radius-lg 为 12px 以符合设计标准
- 统一日历页面卡片样式（padding, border-radius, shadow）
- 统一统计页面所有卡片组件的样式
- 统一预算页面图表卡片样式，替换硬编码值为 CSS 变量
- 为关键样式添加 fallback 值以防止变量未定义
- 所有卡片现在使用统一的样式变量：
  - padding: var(--spacing-xl, 16px)
  - border-radius: var(--radius-lg, 12px)
  - box-shadow: var(--shadow-sm)
  - background: var(--bg-secondary)
This commit is contained in:
SunCheng
2026-02-18 20:44:58 +08:00
parent c1e2adacea
commit 61aa19b3d2
6 changed files with 491 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
Web/src/components/Budget/BudgetChartAnalysis.vue
View File

@@ -26,44 +26,29 @@
:style="{ transform: activeTab === BudgetCategory.Expense ? 'scaleX(-1)' : '' }"
/>
<div class="gauge-text-overlay">
<div
class="remaining-label"
>
{{
activeTab === BudgetCategory.Expense
? (
overallStats.month.current > overallStats.month.limit
? '超支'
: '余额'
)
: overallStats.month.current > overallStats.month.limit
? '超额'
: '差额'
}}
<div class="balance-label">
余额
</div>
<div
class="remaining-value"
:style="{ color:
overallStats.month.current > overallStats.month.limit
? activeTab === BudgetCategory.Expense ? 'var(--van-danger-color)' : 'var(--van-success-color)'
: ''
class="balance-value"
:style="{
color:
overallStats.month.current > overallStats.month.limit
? 'var(--van-danger-color)'
: ''
}"
>
¥{{ formatMoney(Math.abs(overallStats.month.limit - overallStats.month.current)) }}
</div>
</div>
</div>
<div class="gauge-footer compact">
<div class="gauge-footer">
<div class="gauge-item">
<span class="label">
{{ activeTab === BudgetCategory.Expense ? '已用' : '已收' }}
</span>
<span class="value expense">¥{{ formatMoney(overallStats.month.current) }}</span>
<span class="label">已用</span>
<span class="value">¥{{ formatMoney(overallStats.month.current) }}</span>
</div>
<div class="gauge-item">
<span class="label">
{{ activeTab === BudgetCategory.Expense ? '预算' : '目标' }}
</span>
<span class="label">预算</span>
<span class="value">¥{{ formatMoney(overallStats.month.limit) }}</span>
</div>
</div>
@@ -92,30 +77,30 @@
:style="{ transform: activeTab === BudgetCategory.Expense ? 'scaleX(-1)' : '' }"
/>
<div class="gauge-text-overlay">
<div
class="remaining-label"
>
{{ activeTab === BudgetCategory.Expense ? (overallStats.year.current > overallStats.year.limit ? '超支' : '余额') : '差额' }}
<div class="balance-label">
余额
</div>
<div
class="remaining-value"
:style="{ color: activeTab === BudgetCategory.Expense && overallStats.year.current > overallStats.year.limit ? 'var(--van-danger-color)' : '' }"
class="balance-value"
:style="{
color:
activeTab === BudgetCategory.Expense &&
overallStats.year.current > overallStats.year.limit
? 'var(--van-danger-color)'
: ''
}"
>
¥{{ formatMoney(Math.abs(overallStats.year.limit - overallStats.year.current)) }}
</div>
</div>
</div>
<div class="gauge-footer compact">
<div class="gauge-footer">
<div class="gauge-item">
<span class="label">
{{ activeTab === BudgetCategory.Expense ? '已用' : '已收' }}
</span>
<span class="value expense">¥{{ formatMoney(overallStats.year.current) }}</span>
<span class="label">已用</span>
<span class="value">¥{{ formatMoney(overallStats.year.current) }}</span>
</div>
<div class="gauge-item">
<span class="label">
{{ activeTab === BudgetCategory.Expense ? '预算' : '目标' }}
</span>
<span class="label">预算</span>
<span class="value">¥{{ formatMoney(overallStats.year.limit) }}</span>
</div>
</div>
@@ -146,8 +131,7 @@
<!-- 年度预算进度 -->
<div
v-if="budgets.length > 0"
class="chart-card"
style="margin-top: 12px"
class="chart-card chart-card-spacing"
>
<div class="chart-header">
<div class="chart-title">
@@ -168,8 +152,7 @@
<!-- 偏差分析 -->
<div
v-if="budgets.length > 0"
class="chart-card"
style="margin-top: 12px"
class="chart-card chart-card-spacing"
>
<div class="chart-header">
<div class="chart-title">
@@ -207,9 +190,14 @@
height="70%"
>
<div
class="rich-html-content"
style="padding: 16px"
v-html="activeDescTab === 'month' ? (overallStats.month?.description || '<p style=\'text-align:center;color:var(--van-text-color-3)\'>暂无数据</p>') : (overallStats.year?.description || '<p style=\'text-align:center;color:var(--van-text-color-3)\'>暂无数据</p>')"
class="rich-html-content popup-content-padding"
v-html="
activeDescTab === 'month'
? overallStats.month?.description ||
'<p style=\'text-align:center;color:var(--van-text-color-3)\'>暂无数据</p>'
: overallStats.year?.description ||
'<p style=\'text-align:center;color:var(--van-text-color-3)\'>暂无数据</p>'
"
/>
</PopupContainer>
</template>
@@ -222,6 +210,10 @@ import PopupContainer from '@/components/PopupContainer.vue'
import BaseChart from '@/components/Charts/BaseChart.vue'
import { useChartTheme } from '@/composables/useChartTheme'
import { chartjsGaugePlugin } from '@/plugins/chartjs-gauge-plugin'
import { Chart as ChartJS } from 'chart.js'
// 注册仪表盘插件
ChartJS.register(chartjsGaugePlugin)
const props = defineProps({
overallStats: {
@@ -247,7 +239,7 @@ const showDescriptionPopup = ref(false)
const activeDescTab = ref('month')
// Chart.js 相关
const { getChartOptions } = useChartTheme()
const { getChartOptions, getChartOptionsByType } = useChartTheme()
const formatMoney = (val) => {
if (Math.abs(val) >= 10000) {
@@ -264,13 +256,15 @@ const monthGaugeData = computed(() => {
// 防御性检查：如果数据未加载，返回默认结构
if (!props.overallStats || !props.overallStats.month) {
return {
datasets: [{
data: [0, 100],
backgroundColor: [getCssVar('--chart-axis'), getCssVar('--chart-axis')],
borderWidth: 0,
circumference: 180,
rotation: 270
}]
datasets: [
{
data: [0, 100],
backgroundColor: [getCssVar('--chart-axis'), getCssVar('--chart-axis')],
borderWidth: 0,
circumference: 180,
rotation: 270
}
]
}
}
@@ -317,8 +311,8 @@ const monthGaugeData = computed(() => {
data: [displayRate, remaining],
backgroundColor: [color, getCssVar('--chart-axis')],
borderWidth: 0,
circumference: 180,
rotation: 270
circumference: 220,
rotation: 250
}
]
}
@@ -328,14 +322,24 @@ const monthGaugeOptions = computed(() => {
return {
cutout: '75%',
responsive: true,
maintainAspectRatio: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
},
datalabels: {
display: false
},
gaugePlugin: {
centerText: false
}
},
scales: {
x: { display: false },
y: { display: false }
}
}
})
@@ -345,13 +349,15 @@ const yearGaugeData = computed(() => {
// 防御性检查：如果数据未加载，返回默认结构
if (!props.overallStats || !props.overallStats.year) {
return {
datasets: [{
data: [0, 100],
backgroundColor: [getCssVar('--chart-axis'), getCssVar('--chart-axis')],
borderWidth: 0,
circumference: 180,
rotation: 270
}]
datasets: [
{
data: [0, 100],
backgroundColor: [getCssVar('--chart-axis'), getCssVar('--chart-axis')],
borderWidth: 0,
circumference: 180,
rotation: 270
}
]
}
}
@@ -397,8 +403,8 @@ const yearGaugeData = computed(() => {
data: [displayRate, remaining],
backgroundColor: [color, getCssVar('--chart-axis')],
borderWidth: 0,
circumference: 180,
rotation: 270
circumference: 220,
rotation: 250
}
]
}
@@ -408,20 +414,32 @@ const yearGaugeOptions = computed(() => {
return {
cutout: '75%',
responsive: true,
maintainAspectRatio: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
},
datalabels: {
display: false
},
gaugePlugin: {
centerText: false
}
},
scales: {
x: { display: false },
y: { display: false }
}
}
})
const calculateChartHeight = (budgets) => {
if (!budgets) { return 100 }
if (!budgets) {
return 100
}
const dataCount = budgets.length
const minHeight = 100
const heightPerItem = 30
@@ -435,7 +453,7 @@ const varianceChartData = computed(() => {
return { labels: [], datasets: [] }
}
const data = props.budgets.map(b => {
const data = props.budgets.map((b) => {
const limit = b.limit || 0
const current = b.current || 0
const diff = current - limit
@@ -448,8 +466,8 @@ const varianceChartData = computed(() => {
}
})
const monthlyData = data.filter(item => item.type === BudgetPeriodType.Month)
const annualData = data.filter(item => item.type === BudgetPeriodType.Year)
const monthlyData = data.filter((item) => item.type === BudgetPeriodType.Month)
const annualData = data.filter((item) => item.type === BudgetPeriodType.Year)
monthlyData.sort((a, b) => Math.abs(b.value) - Math.abs(a.value))
annualData.sort((a, b) => Math.abs(b.value) - Math.abs(a.value))
@@ -457,16 +475,20 @@ const varianceChartData = computed(() => {
const sortedData = [...annualData, ...monthlyData]
return {
labels: sortedData.map(item => item.name),
labels: sortedData.map((item) => item.name),
datasets: [
{
label: '偏差',
data: sortedData.map(item => item.value),
backgroundColor: sortedData.map(item => {
data: sortedData.map((item) => item.value),
backgroundColor: sortedData.map((item) => {
if (props.activeTab === BudgetCategory.Expense) {
return item.value > 0 ? getCssVar('--van-danger-color') : getCssVar('--van-success-color')
return item.value > 0
? getCssVar('--van-danger-color')
: getCssVar('--van-success-color')
} else {
return item.value > 0 ? getCssVar('--van-success-color') : getCssVar('--van-danger-color')
return item.value > 0
? getCssVar('--van-success-color')
: getCssVar('--van-danger-color')
}
}),
borderRadius: 4,
@@ -478,19 +500,23 @@ const varianceChartData = computed(() => {
})
const varianceChartOptions = computed(() => {
return getChartOptions({
return getChartOptionsByType('bar', {
indexAxis: 'y',
plugins: {
legend: {
display: false
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 12,
cornerRadius: 8,
callbacks: {
label: (context) => {
const item = context.dataset._meta[context.dataIndex]
const diffText = item.value > 0
? `超支: ¥${formatMoney(item.value)}`
: `结余: ¥${formatMoney(Math.abs(item.value))}`
const diffText =
item.value > 0
? `超支: ¥${formatMoney(item.value)}`
: `结余: ¥${formatMoney(Math.abs(item.value))}`
return [
`预算: ¥${formatMoney(item.limit)}`,
`实际: ¥${formatMoney(item.current)}`,
@@ -505,8 +531,15 @@ const varianceChartOptions = computed(() => {
display: false
},
y: {
grid: {
display: false
},
ticks: {
autoSkip: false,
font: {
family: '"PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif',
size: 11
},
callback: function (value, index) {
const label = this.getLabelForValue(index)
return label.length > 10 ? label.substring(0, 10) + '...' : label
@@ -564,7 +597,7 @@ const burndownChartData = computed(() => {
}
} else {
if (i <= currentDay && totalBudget > 0) {
const actualRemaining = totalBudget - (currentExpense * i / currentDay)
const actualRemaining = totalBudget - (currentExpense * i) / currentDay
actualBurndown.push(Math.round(actualRemaining))
} else {
actualBurndown.push(null)
@@ -583,7 +616,7 @@ const burndownChartData = computed(() => {
}
} else {
if (i <= currentDay && totalBudget > 0) {
const actualAccumulated = Math.min(totalBudget, currentExpense * i / currentDay)
const actualAccumulated = Math.min(totalBudget, (currentExpense * i) / currentDay)
actualBurndown.push(Math.round(actualAccumulated))
} else {
actualBurndown.push(null)
@@ -622,13 +655,21 @@ const burndownChartData = computed(() => {
})
const burndownChartOptions = computed(() => {
return getChartOptions({
return getChartOptionsByType('line', {
plugins: {
legend: {
display: true,
position: 'top'
position: 'top',
labels: {
usePointStyle: true,
pointStyle: 'line',
boxWidth: 20
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 12,
cornerRadius: 8,
callbacks: {
label: (context) => {
const value = context.parsed.y
@@ -641,6 +682,18 @@ const burndownChartOptions = computed(() => {
}
},
scales: {
x: {
grid: {
display: false
},
ticks: {
maxTicksLimit: 10,
font: {
family: '"PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif',
size: 10
}
}
},
y: {
ticks: {
callback: (value) => {
@@ -648,6 +701,9 @@ const burndownChartOptions = computed(() => {
return (value / 10000).toFixed(0) + 'w'
}
return value
},
font: {
size: 10
}
}
}
@@ -700,7 +756,7 @@ const yearBurndownChartData = computed(() => {
const isFuture = year > currentYear || (year === currentYear && i > currentMonth)
if (!isFuture && totalBudget > 0) {
const progress = (i + 1) / 12
const actualRemaining = totalBudget - (currentExpense * progress)
const actualRemaining = totalBudget - currentExpense * progress
actualBurndown.push(Math.round(actualRemaining))
} else {
actualBurndown.push(null)
@@ -760,13 +816,21 @@ const yearBurndownChartData = computed(() => {
})
const yearBurndownChartOptions = computed(() => {
return getChartOptions({
return getChartOptionsByType('line', {
plugins: {
legend: {
display: true,
position: 'top'
position: 'top',
labels: {
usePointStyle: true,
pointStyle: 'line',
boxWidth: 20
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 12,
cornerRadius: 8,
callbacks: {
label: (context) => {
const value = context.parsed.y
@@ -779,6 +843,16 @@ const yearBurndownChartOptions = computed(() => {
}
},
scales: {
x: {
grid: {
display: false
},
ticks: {
font: {
size: 10
}
}
},
y: {
ticks: {
callback: (value) => {
@@ -786,6 +860,9 @@ const yearBurndownChartOptions = computed(() => {
return (value / 10000).toFixed(0) + 'w'
}
return value
},
font: {
size: 10
}
}
}
@@ -796,65 +873,77 @@ const yearBurndownChartOptions = computed(() => {
<style scoped>
.chart-analysis-container {
padding: 12px;
padding: var(--spacing-lg, 12px);
padding-bottom: 80px;
}
.gauges-row {
display: flex;
gap: 12px;
margin-bottom: 12px;
gap: var(--spacing-xl, 16px);
margin-bottom: var(--spacing-xl, 16px);
}
.chart-card {
background: var(--van-background-2);
border-radius: 12px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
border-radius: var(--radius-lg, 12px);
padding: var(--spacing-xl, 16px);
box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.04));
}
.gauge-card {
flex: 1;
min-width: 0;
/* 防止 flex 子项溢出 */
padding: 12px;
padding: var(--spacing-lg, 12px);
/* 减小内边距 */
}
.chart-card-spacing {
margin-top: var(--spacing-lg, 12px);
}
.popup-content-padding {
padding: var(--spacing-xl, 16px);
}
.gauge-wrapper {
position: relative;
width: 100%;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
}
.gauge-text-overlay {
position: absolute;
bottom: 20%;
top: 50%;
left: 50%;
transform: translateX(-50%);
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 10;
margin-top: 8px;
}
.remaining-value {
font-size: 24px;
font-weight: bold;
font-family: DIN Alternate, system-ui;
color: var(--van-text-color);
line-height: 1;
transform-origin: center;
}
.remaining-label {
font-size: 10px;
.balance-label {
font-size: 11px;
color: var(--van-text-color-2);
margin-top: 4px;
font-family: system-ui;
transform-origin: center;
letter-spacing: 1px;
}
.balance-value {
margin-top: 6px;
font-size: 24px;
font-weight: 700;
font-family:
DIN Alternate,
system-ui;
color: var(--van-text-color);
line-height: 1.1;
}
.chart-header {
@@ -896,37 +985,33 @@ const yearBurndownChartOptions = computed(() => {
.gauge-footer {
display: flex;
justify-content: space-around;
/* 分散对齐 */
justify-content: space-between;
align-items: center;
margin-top: -20px;
position: relative;
z-index: 10;
padding: 0 8px 6px;
margin-top: -6px;
}
.gauge-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
}
.gauge-item .label {
font-size: 10px;
color: var(--van-text-color-2);
transform: scale(0.9);
/* 视觉上更小 */
margin-bottom: 4px;
}
.gauge-item .value {
font-size: 12px;
font-weight: 600;
font-family: DIN Alternate, system-ui;
font-family:
DIN Alternate,
system-ui;
color: var(--van-text-color);
}
.gauge-item .value.expense {
color: var(--van-primary-color);
}
/* expand styles removed as they are no longer used */
</style>