mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-05-06 23:31:35 +00:00
优化仪表盘自动刷新UI布局
- 调整Element Plus日期选择器宽度为400px,确保时间完整显示 - 重新设计自动刷新控制的样式和布局 - 统一控制栏所有元素的高度,保持视觉一致性 - 使用更精致的开关组件和优化的交互效果 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user