Losita/smartmate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Version: 0.7.6.dev.260325

Browse Source 
后端：
- ♻️ 将 `taskquery` 模块迁移至 `agent2`，并完成与 `agent2` 业务链路及整体结构的正式接入

前端：
- 🧱 已完成基础框架搭建，并完成了登录、注册、主页等页面并对接了对应接口；但整体功能实现仍在完善中
This commit is contained in:
Losita
2026-03-25 00:49:16 +08:00
parent f4ef6fb256
commit e06284d0b0
52 changed files with 8847 additions and 468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1610
frontend/src/components/dashboard/AssistantPanel.vue Normal file
View File

File diff suppressed because it is too large Load Diff

238
frontend/src/components/dashboard/TaskQuadrantCard.vue Normal file
View File

@@ -0,0 +1,238 @@
<script setup lang="ts">
import { computed } from 'vue'
import type { TaskItem } from '@/types/dashboard'
import { formatDeadline } from '@/utils/date'
const props = defineProps<{
title: string
caption: string
count: number
tone: 'danger' | 'primary' | 'warning' | 'slate'
tasks: TaskItem[]
emptyText: string
loading?: boolean
}>()
const emit = defineEmits<{
toggle: [task: TaskItem]
}>()
const visibleTasks = computed(() => props.tasks.slice(0, 4))
</script>
<template>
<section class="quadrant-card" :class="`quadrant-card--${tone}`">
<header class="quadrant-card__header">
<div>
<p class="quadrant-card__eyebrow">{{ caption }}</p>
<h3>{{ title }}</h3>
</div>
<span class="quadrant-card__count">{{ count }}项</span>
</header>
<div v-if="loading" class="quadrant-card__skeleton">
<div v-for="index in 3" :key="index" class="quadrant-card__skeleton-item" />
</div>
<div v-else-if="visibleTasks.length === 0" class="quadrant-card__empty">
{{ emptyText }}
</div>
<div v-else class="quadrant-list">
<button
v-for="task in visibleTasks"
:key="task.id"
type="button"
class="quadrant-item"
:class="{ 'quadrant-item--completed': task.is_completed }"
@click="emit('toggle', task)"
>
<span class="quadrant-item__check">
{{ task.is_completed ? '✓' : '' }}
</span>
<span class="quadrant-item__content">
<strong>{{ task.title }}</strong>
<small>{{ formatDeadline(task.deadline) }}</small>
</span>
<span class="quadrant-item__status">
{{ task.is_completed ? '已完成' : '待处理' }}
</span>
</button>
</div>
</section>
</template>
<style scoped>
.quadrant-card {
border-radius: 28px;
padding: 22px;
border: 1px solid rgba(17, 24, 39, 0.07);
min-height: 260px;
}
.quadrant-card--danger {
background: linear-gradient(180deg, #fff1f2 0%, #fff7f7 100%);
}
.quadrant-card--primary {
background: linear-gradient(180deg, #eef7ff 0%, #f7fbff 100%);
}
.quadrant-card--warning {
background: linear-gradient(180deg, #fff8df 0%, #fffdf1 100%);
}
.quadrant-card--slate {
background: linear-gradient(180deg, #f2f5fb 0%, #f8fafc 100%);
}
.quadrant-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.quadrant-card__eyebrow {
margin: 0 0 8px;
font-size: 13px;
font-weight: 700;
color: rgba(32, 50, 79, 0.72);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.quadrant-card h3 {
margin: 0;
font-size: 28px;
line-height: 1.1;
letter-spacing: -0.03em;
}
.quadrant-card__count {
min-width: 64px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.78);
font-size: 13px;
font-weight: 700;
color: #39506f;
text-align: center;
}
.quadrant-list {
display: grid;
gap: 12px;
}
.quadrant-item,
.quadrant-card__skeleton-item {
border-radius: 18px;
min-height: 72px;
}
.quadrant-item {
width: 100%;
border: 1px solid rgba(17, 24, 39, 0.06);
background: rgba(255, 255, 255, 0.92);
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
padding: 14px 16px;
text-align: left;
cursor: pointer;
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
border-color 0.18s ease;
}
.quadrant-item:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
border-color: rgba(37, 99, 235, 0.16);
}
.quadrant-item--completed {
opacity: 0.82;
}
.quadrant-item__check {
width: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid rgba(148, 163, 184, 0.3);
background: #f8fafc;
display: inline-flex;
align-items: center;
justify-content: center;
color: #2c8d57;
font-weight: 800;
}
.quadrant-item__content {
min-width: 0;
}
.quadrant-item__content strong,
.quadrant-item__content small {
display: block;
}
.quadrant-item__content strong {
font-size: 16px;
color: #122033;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.quadrant-item--completed .quadrant-item__content strong {
color: #96a0af;
text-decoration: line-through;
}
.quadrant-item__content small {
margin-top: 6px;
color: #768396;
}
.quadrant-item__status {
font-size: 13px;
color: #8090a5;
white-space: nowrap;
}
.quadrant-card__empty {
min-height: 160px;
display: flex;
align-items: center;
justify-content: center;
color: #8b97a7;
font-size: 16px;
}
.quadrant-card__skeleton {
display: grid;
gap: 12px;
}
.quadrant-card__skeleton-item {
background: linear-gradient(90deg, rgba(230, 236, 244, 0.8), rgba(245, 248, 252, 1), rgba(230, 236, 244, 0.8));
background-size: 200% 100%;
animation: quadrant-shimmer 1.4s linear infinite;
}
@keyframes quadrant-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
</style>

283
frontend/src/components/dashboard/TodayTimeline.vue Normal file
View File

@@ -0,0 +1,283 @@
<script setup lang="ts">
import { computed } from 'vue'
import type { TodayEvent } from '@/types/dashboard'
import { formatTimeRange } from '@/utils/date'
interface TimelineSlot {
order: number
kind: 'event' | 'pause'
label: string
timeText?: string
}
const props = defineProps<{
events: TodayEvent[]
loading?: boolean
}>()
const slotBlueprint: TimelineSlot[] = [
{ order: 1, kind: 'event', label: '上午' },
{ order: 2, kind: 'event', label: '上午' },
{ order: 3, kind: 'pause', label: '午休', timeText: '11:55 - 14:00' },
{ order: 4, kind: 'event', label: '下午' },
{ order: 5, kind: 'event', label: '下午' },
{ order: 6, kind: 'pause', label: '晚餐', timeText: '17:55 - 19:00' },
{ order: 7, kind: 'event', label: '晚间' },
]
const eventMap = computed(() => {
const map = new Map<number, TodayEvent>()
for (const event of props.events ?? []) {
map.set(event.order, event)
}
return map
})
function resolveCardTone(event: TodayEvent) {
if (event.type === 'course') {
return 'course'
}
const orderToneMap: Record<number, string> = {
1: 'sky',
2: 'violet',
4: 'mint',
5: 'amber',
7: 'cyan',
}
return orderToneMap[event.order] ?? 'neutral'
}
</script>
<template>
<section class="timeline-card glass-panel">
<header class="timeline-card__header">
<div>
<p class="timeline-card__eyebrow">今日总览</p>
<h2>今日日程一览</h2>
</div>
<span class="timeline-card__caption">按时间顺序展示课程与任务安排</span>
</header>
<div v-if="loading" class="timeline-skeleton">
<div v-for="index in 7" :key="index" class="timeline-skeleton__item" />
</div>
<div v-else class="timeline-grid">
<template v-for="slot in slotBlueprint" :key="slot.order">
<article
v-if="eventMap.has(slot.order)"
class="timeline-event"
:class="`timeline-event--${resolveCardTone(eventMap.get(slot.order)!)}`"
>
<span class="timeline-event__time">
{{
formatTimeRange(
eventMap.get(slot.order)?.start_time,
eventMap.get(slot.order)?.end_time,
)
}}
</span>
<strong class="timeline-event__title">{{ eventMap.get(slot.order)?.name }}</strong>
<span class="timeline-event__location">
{{ eventMap.get(slot.order)?.location || '休息时间' }}
</span>
</article>
<article v-else class="timeline-placeholder timeline-placeholder--pause">
<span class="timeline-placeholder__time">{{ slot.timeText }}</span>
<strong class="timeline-placeholder__title">{{ slot.label }}</strong>
<span class="timeline-placeholder__hint">为中段留出缓冲与恢复时间</span>
</article>
</template>
</div>
</section>
</template>
<style scoped>
.timeline-card {
border-radius: 28px;
padding: 22px 22px 20px;
border: 1px solid rgba(17, 24, 39, 0.08);
}
.timeline-card__header {
display: flex;
justify-content: space-between;
gap: 18px;
align-items: flex-end;
margin-bottom: 18px;
}
.timeline-card__eyebrow {
margin: 0 0 6px;
font-size: 12px;
font-weight: 700;
color: #2a6fdf;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.timeline-card h2 {
margin: 0;
font-size: 28px;
line-height: 1.1;
letter-spacing: -0.03em;
}
.timeline-card__caption {
color: var(--text-secondary);
font-size: 13px;
}
.timeline-grid {
display: grid;
grid-template-columns: repeat(7, minmax(132px, 1fr));
gap: 12px;
overflow-x: auto;
padding-bottom: 4px;
}
.timeline-event,
.timeline-placeholder,
.timeline-skeleton__item {
min-height: 124px;
border-radius: 20px;
}
.timeline-event {
padding: 16px 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid rgba(17, 24, 39, 0.06);
position: relative;
overflow: hidden;
}
.timeline-event::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
opacity: 0.92;
}
.timeline-event__time {
font-size: 12px;
font-weight: 700;
color: #295b9b;
}
.timeline-event__title {
margin-top: 12px;
font-size: 15px;
line-height: 1.35;
color: #172033;
}
.timeline-event__location {
margin-top: 14px;
font-size: 12px;
color: #5f6980;
}
.timeline-event--course {
background: linear-gradient(180deg, #ecf4ff 0%, #e4eefc 100%);
}
.timeline-event--course::before {
background: #1669c1;
}
.timeline-event--violet {
background: linear-gradient(180deg, #eef0ff 0%, #e6e8ff 100%);
}
.timeline-event--violet::before {
background: #676cff;
}
.timeline-event--mint {
background: linear-gradient(180deg, #e6f8f1 0%, #def5ec 100%);
}
.timeline-event--mint::before {
background: #27b482;
}
.timeline-event--amber {
background: linear-gradient(180deg, #fff5db 0%, #fff0cb 100%);
}
.timeline-event--amber::before {
background: #f59e0b;
}
.timeline-event--cyan {
background: linear-gradient(180deg, #e1f7ff 0%, #d6f2fb 100%);
}
.timeline-event--cyan::before {
background: #57b8ea;
}
.timeline-placeholder {
border: 1px dashed rgba(120, 144, 171, 0.28);
background: rgba(255, 255, 255, 0.55);
display: grid;
align-content: center;
justify-items: center;
gap: 8px;
padding: 14px 12px;
text-align: center;
color: #8a96a8;
}
.timeline-placeholder--pause {
background: linear-gradient(180deg, #f5f9ff 0%, #eef4fb 100%);
}
.timeline-placeholder__time {
font-size: 12px;
font-weight: 700;
color: #4c6c97;
}
.timeline-placeholder__title {
font-size: 16px;
color: #22324b;
}
.timeline-placeholder__hint {
font-size: 12px;
color: #7a889d;
line-height: 1.5;
}
.timeline-skeleton {
display: grid;
grid-template-columns: repeat(7, minmax(132px, 1fr));
gap: 12px;
}
.timeline-skeleton__item {
background: linear-gradient(90deg, rgba(230, 236, 244, 0.8), rgba(245, 248, 252, 1), rgba(230, 236, 244, 0.8));
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s linear infinite;
}
@keyframes skeleton-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
</style>