v6ole/qiji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add sidebar entry + route + dashboard leave card + on_leave status

Browse Source 
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
v6ole
2026-07-12 13:15:50 +08:00
parent 709685057b
commit 7fd0f9b706
3 changed files with 35 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/desktop/Dashboard.vue
+33 -7
View File
@@ -9,7 +9,7 @@ import api from '@/api/index'
const router = useRouter()
const auth = useAuthStore()
const loading = ref(false)
const stats = ref({ week_visits: 0, work_plans: 0, mini_business: 0, key_visits: 0, week_start: '', week_end: '' })
const stats = ref({ week_visits: 0, work_plans: 0, mini_business: 0, key_visits: 0, week_leaves: 0, week_start: '', week_end: '' })
const progress = ref<any[]>([])
const weekOffset = ref(0) // 0 = current week, -1 = last week, etc.
@@ -76,7 +76,8 @@ async function handleExport() {
} catch (e: any) { ElMessage.error('导出失败') }
}
function rowState(p: any): 'full' | 'catching' | 'missing' {
function rowState(p: any): 'full' | 'catching' | 'missing' | 'on_leave' {
if (p.on_leave) return 'on_leave'
if (p.has_reported_today && p.completed) return 'full'
if (p.has_reported_today && !p.completed) return 'catching'
return 'missing'
@@ -170,6 +171,17 @@ function rowState(p: any): 'full' | 'catching' | 'missing' {
<span class="stat-label">要客拜访</span>
</div>
</div>
<div class="stat-card stat-card--clickable stat-card--slate" @click="router.push('/leaves')">
<div class="stat-glyph stat-glyph--slate">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</div>
<div class="stat-body">
<span class="stat-num">{{ stats.week_leaves }}</span>
<span class="stat-label">本周请假</span>
</div>
</div>
</div>
<!-- ═══ Reporting Progress ═══ -->
@@ -194,24 +206,26 @@ function rowState(p: any): 'full' | 'catching' | 'missing' {
>
<!-- Chinese Seal Watermark -->
<div class="seal-stamp" :class="`seal-stamp--${rowState(p)}`" aria-hidden="true">
<span class="seal-char">{{ { full: '满', catching: '追', missing: '未' }[rowState(p)] }}</span>
<span class="seal-char">{{ { full: '', catching: '', missing: '填' }[rowState(p)] }}</span>
<span class="seal-char">{{ { full: '满', catching: '追', missing: '未', on_leave: '假' }[rowState(p)] }}</span>
<span class="seal-char">{{ { full: '', catching: '', missing: '填', on_leave: '' }[rowState(p)] }}</span>
</div>
<div class="progress-info">
<span class="progress-name">
<el-link type="primary" :underline="false" @click="goWeeklyReport(p.manager_id)">{{ p.manager_name }}</el-link>
<span class="progress-status" :class="`progress-status--${rowState(p)}`">
{{ { full: '本周已满', catching: '今日已填', missing: '今日未填' }[rowState(p)] }}
{{ { full: '本周已满', catching: '今日已填', missing: '今日未填', on_leave: '请假中' }[rowState(p)] }}
</span>
</span>
<span class="progress-count">{{ p.visit_count }} / {{ p.expected }} 条</span>
<span class="progress-count" v-if="!p.on_leave">{{ p.visit_count }} / {{ p.expected }} 条</span>
</div>
<el-progress
v-if="!p.on_leave"
:percentage="Math.min(100, Math.round((p.visit_count / Math.max(p.expected, 1)) * 100))"
:color="rowState(p) === 'full' ? '#4A6741' : rowState(p) === 'catching' ? '#C4934A' : '#B8472E'"
:stroke-width="12"
/>
<span v-else class="leave-text">请假中</span>
</div>
</div>
</el-card>
@@ -241,7 +255,7 @@ function rowState(p: any): 'full' | 'catching' | 'missing' {
/* ═══ Stat Grid ═══ */
.stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(5, 1fr);
gap: 16px;
margin-bottom: 24px;
}
@@ -258,6 +272,7 @@ function rowState(p: any): 'full' | 'catching' | 'missing' {
.stat-card:hover { box-shadow: var(--shadow-md); }
.stat-card--clickable { cursor: pointer; }
.stat-card--clickable:hover { border-color: var(--gold); }
.stat-card--slate:hover { border-color: #5B7FA5; }
.stat-glyph {
width: 48px; height: 48px;
@@ -268,6 +283,7 @@ function rowState(p: any): 'full' | 'catching' | 'missing' {
.stat-glyph--sage { background: #EDF2EC; color: var(--sage); }
.stat-glyph--gold { background: #FBF6EE; color: var(--gold); }
.stat-glyph--vermilion { background: #FBF1EE; color: var(--vermilion); }
.stat-glyph--slate { color: #5B7FA5; }
.stat-body { display: flex; flex-direction: column; }
.stat-num {
@@ -308,6 +324,7 @@ function rowState(p: any): 'full' | 'catching' | 'missing' {
.progress-row--missing { border-left-color: var(--vermilion); background: rgba(184,71,46,0.02); }
.progress-row--catching { border-left-color: var(--gold); background: rgba(196,147,74,0.03); }
.progress-row--full { border-left-color: var(--sage); background: rgba(74,103,65,0.02); }
.progress-row--on_leave { border-left-color: #5B7FA5; }
/* ═══ Chinese Seal Stamp Watermark ═══ */
.seal-stamp {
@@ -357,6 +374,13 @@ function rowState(p: any): 'full' | 'catching' | 'missing' {
color: var(--sage);
}
/* On-leave stamp — slate blue-gray ink */
.seal-stamp--on_leave {
border-color: #5B7FA5;
outline-color: #5B7FA5;
color: #5B7FA5;
}
.seal-char {
font-family: var(--font-heading);
font-size: 20px;
@@ -382,6 +406,7 @@ function rowState(p: any): 'full' | 'catching' | 'missing' {
.progress-status--missing { color: var(--vermilion); }
.progress-status--catching { color: var(--gold); }
.progress-status--full { color: var(--sage); }
.progress-status--on_leave { color: #5B7FA5; }
.progress-count {
font-family: var(--font-mono);
@@ -389,5 +414,6 @@ function rowState(p: any): 'full' | 'catching' | 'missing' {
position: relative; z-index: 1;
}
.leave-text { font-size: 13px; color: #5B7FA5; font-family: var(--font-body); }
.empty { text-align: center; color: var(--c-text-muted); padding: 40px 0; font-family: var(--font-body); }
</style>