优化仪表盘自动刷新UI布局

- 调整Element Plus日期选择器宽度为400px,确保时间完整显示
- 重新设计自动刷新控制的样式和布局
- 统一控制栏所有元素的高度,保持视觉一致性
- 使用更精致的开关组件和优化的交互效果

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
shaw
2025-07-30 15:36:52 +08:00
parent 1ca753c79a
commit 7116a6e043
29 changed files with 3869 additions and 2344 deletions

View File

@@ -2,24 +2,45 @@
<div class="glass-strong rounded-3xl p-6 mb-8">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
<h2 class="text-xl font-bold text-gray-800 flex items-center">
<i class="fas fa-chart-area mr-2 text-blue-500"></i>
<i class="fas fa-chart-area mr-2 text-blue-500" />
使用趋势
</h2>
<div class="flex items-center gap-3">
<el-radio-group v-model="granularity" size="small" @change="handleGranularityChange">
<el-radio-button label="day">按天</el-radio-button>
<el-radio-button label="hour">按小时</el-radio-button>
<el-radio-group
v-model="granularity"
size="small"
@change="handleGranularityChange"
>
<el-radio-button label="day">
按天
</el-radio-button>
<el-radio-button label="hour">
按小时
</el-radio-button>
</el-radio-group>
<el-select v-model="trendPeriod" size="small" style="width: 120px" @change="handlePeriodChange">
<el-option :label="`最近${period.days}天`" :value="period.days" v-for="period in periodOptions" :key="period.days" />
<el-select
v-model="trendPeriod"
size="small"
style="width: 120px"
@change="handlePeriodChange"
>
<el-option
v-for="period in periodOptions"
:key="period.days"
:label="`最近${period.days}天`"
:value="period.days"
/>
</el-select>
</div>
</div>
<div class="relative" style="height: 300px;">
<canvas ref="chartCanvas"></canvas>
<div
class="relative"
style="height: 300px;"
>
<canvas ref="chartCanvas" />
</div>
</div>
</template>