akoo/akmon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit of akmon project

Browse Source
This commit is contained in:
akoo
2026-01-20 08:04:15 +08:00
commit 77a2bab985
1309 changed files with 343305 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
components/message/MessageStats.uvue Normal file
View File

@@ -0,0 +1,252 @@
<template>
<view class="message-stats">
<view class="stats-header">
<text class="stats-title">消息统计</text>
<text class="stats-time">{{ getCurrentTime() }}</text>
</view>
<view class="stats-grid">
<!-- 总消息数 -->
<view class="stat-item">
<view class="stat-icon total"></view>
<view class="stat-content">
<text class="stat-number">{{ stats.total_count }}</text>
<text class="stat-label">总消息</text>
</view>
</view>
<!-- 未读消息数 -->
<view class="stat-item" :class="{ 'highlight': stats.unread_count > 0 }">
<view class="stat-icon unread"></view>
<view class="stat-content">
<text class="stat-number">{{ stats.unread_count }}</text>
<text class="stat-label">未读</text>
</view>
</view>
<!-- 收藏消息数 -->
<view class="stat-item">
<view class="stat-icon starred">⭐</view>
<view class="stat-content">
<text class="stat-number">{{ stats.starred_count }}</text>
<text class="stat-label">收藏</text>
</view>
</view>
<!-- 紧急消息数 -->
<view class="stat-item" :class="{ 'highlight': stats.urgent_count > 0 }">
<view class="stat-icon urgent"></view>
<view class="stat-content">
<text class="stat-number">{{ stats.urgent_count }}</text>
<text class="stat-label">紧急</text>
</view>
</view>
</view>
<view class="stats-detail">
<view class="detail-row">
<text class="detail-label">今日新增</text>
<text class="detail-value">{{ stats.today_count }}</text>
</view>
<view class="detail-row">
<text class="detail-label">本周新增</text>
<text class="detail-value">{{ stats.week_count }}</text>
</view>
<view class="detail-row">
<text class="detail-label">本月新增</text>
<text class="detail-value">{{ stats.month_count }}</text>
</view>
<view class="detail-row">
<text class="detail-label">已归档</text>
<text class="detail-value">{{ stats.archived_count }}</text>
</view>
</view>
<!-- 刷新按钮 -->
<view class="refresh-btn" @click="handleRefresh">
<text class="refresh-text">刷新统计</text>
</view>
</view>
</template>
<script lang="uts">
import { formatTime } from '../../utils/msgUtils.uts'
import type { MessageStats } from '../../utils/msgTypes.uts'
export default {
name: 'MessageStats',
props: {
stats: {
type: Object as PropType<MessageStats>,
required: true
},
loading: {
type: Boolean,
default: false
}
},
emits: ['refresh'],
methods: {
getCurrentTime(): string {
const now = new Date()
return formatTime(now.toISOString())
},
handleRefresh() {
this.$emit('refresh')
}
}
}
</script>
<style scoped>
.message-stats {
background-color: #ffffff;
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
}
.stats-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
}
.stats-title {
font-size: 18px;
font-weight: 700;
color: #333333;
}
.stats-time {
font-size: 12px;
color: #999999;
}
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 16px;
}
.stat-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background-color: #f8f9fa;
border-radius: 8px;
transition: background-color 0.2s;
}
.stat-item.highlight {
background-color: #fff3e0;
border: 1px solid #ff9800;
}
.stat-icon {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.stat-icon.total {
background-color: #e3f2fd;
}
.stat-icon.unread {
background-color: #ffebee;
}
.stat-icon.starred {
background-color: #fff8e1;
}
.stat-icon.urgent {
background-color: #fce4ec;
}
.stat-content {
flex: 1;
}
.stat-number {
font-size: 20px;
font-weight: 700;
color: #333333;
display: block;
line-height: 1.2;
}
.stat-label {
font-size: 12px;
color: #666666;
margin-top: 2px;
}
.stats-detail {
border-top: 1px solid #f0f0f0;
padding-top: 16px;
margin-bottom: 16px;
}
.detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
.detail-label {
font-size: 14px;
color: #666666;
}
.detail-value {
font-size: 14px;
font-weight: 400;
color: #333333;
}
.refresh-btn {
background-color: #2196f3;
color: #ffffff;
padding: 10px 16px;
border-radius: 6px;
text-align: center;
transition: background-color 0.2s;
}
.refresh-btn:active {
background-color: #1976d2;
}
.refresh-text {
font-size: 14px;
color: #ffffff;
}
/* 响应式布局 */
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: 1fr;
}
.stat-item {
padding: 10px;
}
.stat-number {
font-size: 18px;
}
}
</style>