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

Version: 0.9.30.dev.260419

Browse Source 
后端：
1. 工具事件推送从通用 EmitStatus 重构为 EmitToolCallStart / EmitToolCallResult 结构化双事件
- newAgent/node/execute.go：executeToolCall / executePendingTool 两处调用路径分离为 Start + Result 两步推送；blocked 场景显式传入状态码，不再复用通用状态
- 新增工具事件摘要生成链：resolveToolEventResultStatus（结果状态映射）、buildToolEventResultSummary / tryExtractToolResultSummaryCN（JSON→中文结论提炼）、buildToolCallStartSummary /
buildToolArgumentsPreviewCN（参数白名单中文标签）、resolveToolDisplayNameCN（17 个工具中文名映射）、formatToolArgValueByKeyCN / formatToolArgValueCN（参数值格式化）
- newAgent/stream/emitter.go：EmitStatus / EmitToolCallStart / EmitToolCallResult 统一收敛到 emitExtraOnly，不再回写 reasoning_content；EmitToolCallResult 新增 status 参数

前端：
1. 全局侧边栏统一提升到 App.vue
- App.vue 新增 MainSidebar + smartflow-layout 双栏布局，三个页面共享导航；AssistantView / DashboardView / ScheduleView 移除各自内联 sidebar 定义、路由跳转、拖拽逻辑及全部样式
2. Assistant 消息流从纯文本重构为结构化 block 时间线
- AssistantPanel 新增 ToolTraceEvent / StatusTraceEvent / DisplayAssistantBlock 类型；handleStreamExtraEvent 按 extra.kind 分发四类事件；getDisplayAssistantBlocks 按 seq 排序统一渲染 tool/status/reasoning/content 五种 block
- 模板层改为 TransitionGroup 动态渲染；工具卡片左侧彩色状态条 + 可展开详情；状态行显示节点阶段中文文案；兼容旧协议 tool_* 状态码归并
- SSE 协议切换到 extra-only：shouldSuppressReasoningDeltaByExtraKind 抑制 status/tool 事件的 reasoning 累积；会话/首页加载锁定 800ms 最少时间保证骨架屏动画
3. 设计系统从渐变毛玻璃迁移到 Flat Modern 扁平化
- 全局色板统一 #3b82f6 / #f8fafc / #f1f5f9，替代旧蓝紫渐变；confirm 卡片琥珀色顶条、用户气泡蓝底白字、工具卡片状态色条
- 新增 dashboard-item-pop / board-item-pop / message-stagger / fade-switch / task-detail 等入场动画；WeekPlanningBoard 格子弹簧动画按行列错峰；TaskClassSidebar 详情展开 max-height 过渡 + 角标旋转
4. 路由新增 /prototype/tool-trace 原型页（ToolTracePrototypeView）
This commit is contained in:
Losita
2026-04-19 00:21:44 +08:00
parent 6760e50e4b
commit 146b94fd50
15 changed files with 3162 additions and 1639 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
frontend/src/components/common/MainSidebar.vue Normal file
View File

@@ -0,0 +1,167 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
interface SidebarItem {
key: 'home' | 'task' | 'calendar' | 'ai'
label: string
short: string
to?: '/dashboard' | '/assistant' | '/schedule'
}
const sidebarItems: SidebarItem[] = [
{ key: 'home', label: '总览', short: '总', to: '/dashboard' },
{ key: 'task', label: '任务', short: '任' },
{ key: 'calendar', label: '日程', short: '程', to: '/schedule' },
{ key: 'ai', label: '助手', short: 'AI', to: '/assistant' },
]
const route = useRoute()
const router = useRouter()
const activeSidebarKey = computed<SidebarItem['key']>(() => {
if (route.path.startsWith('/assistant')) return 'ai'
if (route.path.startsWith('/schedule')) return 'calendar'
return 'home'
})
const activeSidebarIndex = computed(() => {
return sidebarItems.findIndex(item => item.key === activeSidebarKey.value)
})
const activeIndicatorStyle = computed(() => {
return {
transform: `translateY(${activeSidebarIndex.value * 72}px)`
}
})
function handleSidebarNavigate(item: SidebarItem) {
if (item.to) {
if (route.path !== item.to) void router.push(item.to)
return
}
ElMessage.info(`${item.label} 页面正在开发中`)
}
</script>
<template>
<aside class="dashboard-sidebar">
<div class="dashboard-sidebar__brand">S</div>
<nav class="dashboard-sidebar__nav">
<div class="dashboard-sidebar__nav-indicator" :style="activeIndicatorStyle" />
<button
v-for="item in sidebarItems"
:key="item.key"
type="button"
class="dashboard-sidebar__nav-item"
:class="{ 'dashboard-sidebar__nav-item--active': item.key === activeSidebarKey }"
@click="handleSidebarNavigate(item)"
>
<span>{{ item.short }}</span>
<small>{{ item.label }}</small>
</button>
</nav>
<button type="button" class="dashboard-sidebar__settings">设</button>
</aside>
</template>
<style scoped>
.dashboard-sidebar {
width: 78px;
height: 100%;
border-radius: 24px;
background: #0f172a;
padding: 24px 12px;
display: flex;
flex-direction: column;
gap: 32px;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.dashboard-sidebar__brand {
width: 48px;
height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: #fff;
font-size: 20px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}
.dashboard-sidebar__nav { position: relative; display: grid; gap: 12px; align-content: start; }
.dashboard-sidebar__nav-indicator {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 60px;
background: rgba(255, 255, 255, 0.08);
border-radius: 16px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 0;
}
.dashboard-sidebar__nav-item {
width: 100%;
height: 60px;
border: none;
border-radius: 16px;
background: transparent;
color: rgba(255, 255, 255, 0.45);
padding: 8px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
cursor: pointer;
position: relative;
z-index: 1;
transition: color 0.2s;
}
.dashboard-sidebar__nav-item span {
width: 32px;
height: 32px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
font-weight: 700;
font-size: 14px;
transition: all 0.2s;
}
.dashboard-sidebar__nav-item:hover { color: #f8fafc; }
.dashboard-sidebar__nav-item small { font-size: 10px; font-weight: 500; opacity: 0.8; }
.dashboard-sidebar__nav-item--active { color: #fff; }
.dashboard-sidebar__nav-item--active span { background: #3b82f6; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35); }
.dashboard-sidebar__settings {
width: 48px;
height: 48px;
border: none;
border-radius: 14px;
background: rgba(255, 255, 255, 0.05);
color: #94a3b8;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
margin-top: auto;
}
.dashboard-sidebar__settings:hover { background: rgba(255, 255, 255, 0.1); color: #f8fafc; }
</style>

1540
frontend/src/components/dashboard/AssistantPanel.vue
View File

File diff suppressed because it is too large Load Diff

90
frontend/src/components/dashboard/TaskQuadrantCard.vue
View File

@@ -32,35 +32,37 @@ const visibleTasks = computed(() => props.tasks)
<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>
<transition name="fade-switch" mode="out-in">
<div v-if="loading" key="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-if="visibleTasks.length === 0" key="empty" 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>
<TransitionGroup v-else tag="div" name="list-stagger" class="quadrant-list" key="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>
</TransitionGroup>
</transition>
</section>
</template>
@@ -259,4 +261,38 @@ const visibleTasks = computed(() => props.tasks)
background-position: -200% 0;
}
}
.fade-switch-enter-active,
.fade-switch-leave-active {
transition: opacity 0.25s ease, transform 0.25s ease;
}
.fade-switch-enter-from {
opacity: 0;
transform: translateY(4px);
}
.fade-switch-leave-to {
opacity: 0;
transform: translateY(-4px);
}
.list-stagger-enter-active,
.list-stagger-leave-active {
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.list-stagger-enter-from {
opacity: 0;
transform: translateY(12px) scale(0.98);
}
.list-stagger-leave-to {
opacity: 0;
transform: translateX(12px) scale(0.98);
}
.list-stagger-leave-active {
position: absolute;
}
</style>

143
frontend/src/components/dashboard/TodayTimeline.vue
View File

@@ -125,28 +125,30 @@ const renderSlots = computed<RenderSlot[]>(() =>
<span class="timeline-card__caption">按时间顺序展示课程与任务安排</span>
</header>
<div v-if="loading" class="timeline-skeleton">
<div v-for="slot in slotBlueprint" :key="slot.key" class="timeline-skeleton__item" />
</div>
<transition name="fade-switch" mode="out-in">
<div v-if="loading" key="loading" class="timeline-skeleton">
<div v-for="slot in slotBlueprint" :key="slot.key" class="timeline-skeleton__item" />
</div>
<div v-else class="timeline-grid">
<template v-for="slot in renderSlots" :key="slot.key">
<article
v-if="slot.kind === 'event'"
class="timeline-event"
:class="`timeline-event--${slot.tone}`"
>
<span class="timeline-event__time">{{ slot.timeText }}</span>
<strong class="timeline-event__title">{{ slot.title }}</strong>
<span class="timeline-event__location">{{ slot.locationText }}</span>
</article>
<div v-else key="content" class="timeline-grid">
<template v-for="slot in renderSlots" :key="slot.key">
<article
v-if="slot.kind === 'event'"
class="timeline-event"
:class="`timeline-event--${slot.tone}`"
>
<span class="timeline-event__time">{{ slot.timeText }}</span>
<strong class="timeline-event__title">{{ slot.title }}</strong>
<span class="timeline-event__location">{{ slot.locationText }}</span>
</article>
<article v-else class="timeline-placeholder timeline-placeholder--pause">
<strong class="timeline-placeholder__title">{{ slot.title }}</strong>
<span class="timeline-placeholder__hint">{{ slot.hint }}</span>
</article>
</template>
</div>
<article v-else class="timeline-placeholder timeline-placeholder--pause">
<strong class="timeline-placeholder__title">{{ slot.title }}</strong>
<span class="timeline-placeholder__hint">{{ slot.hint }}</span>
</article>
</template>
</div>
</transition>
</section>
</template>
@@ -203,7 +205,7 @@ const renderSlots = computed<RenderSlot[]>(() =>
.timeline-skeleton__item {
min-width: 0;
min-height: 124px;
border-radius: 20px;
border-radius: 14px;
}
.timeline-event {
@@ -211,7 +213,7 @@ const renderSlots = computed<RenderSlot[]>(() =>
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid rgba(17, 24, 39, 0.06);
border: 1px solid transparent;
position: relative;
overflow: hidden;
}
@@ -222,107 +224,142 @@ const renderSlots = computed<RenderSlot[]>(() =>
left: 0;
top: 0;
bottom: 0;
width: 5px;
opacity: 0.92;
width: 4px;
}
.timeline-event__time {
font-size: 12px;
font-weight: 700;
color: #295b9b;
color: #64748b;
}
.timeline-event__title {
margin-top: 12px;
font-size: 15px;
line-height: 1.35;
color: #172033;
color: #0f172a;
}
.timeline-event__location {
margin-top: 14px;
font-size: 12px;
color: #5f6980;
color: #64748b;
}
.timeline-event--course {
background: linear-gradient(180deg, #ecf4ff 0%, #e4eefc 100%);
background: #eff6ff;
}
.timeline-event--course::before {
background: #1669c1;
background: #3b82f6;
}
.timeline-event--course .timeline-event__title,
.timeline-event--course .timeline-event__time {
color: #1d4ed8;
}
.timeline-event--sky {
background: linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%);
background: #f0f9ff;
}
.timeline-event--sky::before {
background: #c8d6e8;
background: #0ea5e9;
}
.timeline-event--sky .timeline-event__title,
.timeline-event--sky .timeline-event__time {
color: #0369a1;
}
.timeline-event--violet {
background: linear-gradient(180deg, #eef0ff 0%, #e6e8ff 100%);
background: #f5f3ff;
}
.timeline-event--violet::before {
background: #676cff;
background: #8b5cf6;
}
.timeline-event--violet .timeline-event__title,
.timeline-event--violet .timeline-event__time {
color: #6d28d9;
}
.timeline-event--mint {
background: linear-gradient(180deg, #e6f2ff 0%, #dceaff 100%);
background: #ecfdf5;
}
.timeline-event--mint::before {
background: #2f7de1;
background: #10b981;
}
.timeline-event--mint .timeline-event__title,
.timeline-event--mint .timeline-event__time {
color: #047857;
}
.timeline-event--emerald {
background: linear-gradient(180deg, #e6f8f1 0%, #def5ec 100%);
background: #dcfce7;
}
.timeline-event--emerald::before {
background: #27b482;
background: #22c55e;
}
.timeline-event--emerald .timeline-event__title,
.timeline-event--emerald .timeline-event__time {
color: #15803d;
}
.timeline-event--amber {
background: linear-gradient(180deg, #fff5db 0%, #fff0cb 100%);
background: #fffbeb;
}
.timeline-event--amber::before {
background: #f59e0b;
}
.timeline-event--amber .timeline-event__title,
.timeline-event--amber .timeline-event__time {
color: #b45309;
}
.timeline-event--cyan {
background: linear-gradient(180deg, #e1f7ff 0%, #d6f2fb 100%);
background: #cffafe;
}
.timeline-event--cyan::before {
background: #57b8ea;
background: #06b6d4;
}
.timeline-event--cyan .timeline-event__title,
.timeline-event--cyan .timeline-event__time {
color: #0e7490;
}
.timeline-event--neutral {
background: linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%);
background: #f8fafc;
border-color: rgba(15, 23, 42, 0.05);
}
.timeline-event--neutral::before {
background: #c8d6e8;
background: #94a3b8;
}
.timeline-placeholder {
border: 1px dashed rgba(120, 144, 171, 0.28);
background: rgba(255, 255, 255, 0.55);
border: 1px dashed rgba(15, 23, 42, 0.15);
background: #ffffff;
display: grid;
align-content: center;
justify-items: center;
gap: 8px;
padding: 14px 12px;
text-align: center;
color: #8a96a8;
color: #64748b;
}
.timeline-placeholder--pause {
background: linear-gradient(180deg, #f5f9ff 0%, #eef4fb 100%);
background: #f8fafc;
}
.timeline-placeholder__title {
@@ -359,6 +396,20 @@ const renderSlots = computed<RenderSlot[]>(() =>
}
}
.fade-switch-enter-active,
.fade-switch-leave-active {
transition: opacity 0.25s ease, transform 0.25s ease;
}
.fade-switch-enter-from,
.fade-switch-leave-to {
opacity: 0;
transform: translateY(4px);
}
.fade-switch-leave-to {
transform: translateY(-4px);
}
@media (max-width: 1320px) {
.timeline-grid,
.timeline-skeleton {

293
frontend/src/components/schedule/TaskClassSidebar.vue
View File

@@ -68,9 +68,6 @@ function resolveDetailPanelStyle(items: TaskClassDetail['items']) {
)
const finalHeight = Math.min(preferredHeight, maxHeightByItemCount, maxHeightByContainer)
// 1. 条目少时让卡片自然长高，避免只有两三条时还出现大块留白。
// 2. 条目超过“当前屏幕可安全展示的最大条数”后，立即锁住高度并进入内部滚动。
// 3. 这样像 8 条 task_item 这类中等长度列表会稳定触发滚动，不会再因为估算过大而失效。
return {
maxHeight: `${finalHeight}px`,
}
@@ -171,39 +168,41 @@ watch(
</span>
</button>
<div
v-if="isExpanded(taskClass.id)"
class="task-class-card__detail"
:style="expandedTaskClassDetail ? resolveDetailPanelStyle(expandedTaskClassDetail.items) : undefined"
>
<div v-if="detailLoading" class="task-class-card__detail-loading">正在载入任务块…</div>
<transition name="task-detail">
<div
v-if="isExpanded(taskClass.id)"
class="task-class-card__detail"
:style="expandedTaskClassDetail ? resolveDetailPanelStyle(expandedTaskClassDetail.items) : { maxHeight: '60px' }"
>
<div v-if="detailLoading" class="task-class-card__detail-loading">正在载入任务块…</div>
<div v-else-if="expandedTaskClassDetail" class="task-class-card__detail-list">
<div
v-for="item in expandedTaskClassDetail.items"
:key="item.order"
class="task-class-card__detail-item"
>
<span class="task-class-card__detail-order">{{ item.order }}</span>
<span class="task-class-card__detail-text">{{ item.content }}</span>
<span
class="task-class-card__detail-status"
:class="{ 'task-class-card__detail-status--arranged': item.embedded_time }"
<div v-else-if="expandedTaskClassDetail" class="task-class-card__detail-list">
<div
v-for="item in expandedTaskClassDetail.items"
:key="item.order"
class="task-class-card__detail-item"
>
{{ formatEmbeddedTime(item.embedded_time) }}
</span>
<button
type="button"
class="task-class-card__detail-delete"
aria-label="删除任务块"
:disabled="typeof item.id !== 'number'"
@click="typeof item.id === 'number' && emit('deleteItem', item.id)"
>
×
</button>
<span class="task-class-card__detail-order">{{ item.order }}</span>
<span class="task-class-card__detail-text">{{ item.content }}</span>
<span
class="task-class-card__detail-status"
:class="{ 'task-class-card__detail-status--arranged': item.embedded_time }"
>
{{ formatEmbeddedTime(item.embedded_time) }}
</span>
<button
type="button"
class="task-class-card__detail-delete"
aria-label="删除任务块"
:disabled="typeof item.id !== 'number'"
@click="typeof item.id === 'number' && emit('deleteItem', item.id)"
>
×
</button>
</div>
</div>
</div>
</div>
</transition>
</article>
<button type="button" class="task-class-sidebar__create" @click="emit('create')">
@@ -221,14 +220,33 @@ watch(
height: 100%;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
border-right: 1px solid rgba(196, 209, 227, 0.55);
background: linear-gradient(180deg, rgba(251, 253, 255, 0.96), rgba(247, 250, 254, 0.98));
border-right: 1px solid rgba(15, 23, 42, 0.05);
background: #ffffff;
overflow: hidden;
}
/* --- 全局精致滚动条 --- */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(15, 23, 42, 0.08);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(15, 23, 42, 0.15);
}
.task-class-sidebar__header {
padding: 16px 24px 14px;
border-bottom: 1px solid rgba(214, 223, 238, 0.68);
padding: 20px 24px;
border-bottom: 1px solid rgba(15, 23, 42, 0.05);
display: grid;
gap: 12px;
min-width: 0;
@@ -261,7 +279,7 @@ watch(
width: 16px;
height: 16px;
display: inline-flex;
color: #165fd0;
color: #3b82f6;
}
.task-class-sidebar__count {
@@ -275,21 +293,21 @@ watch(
.task-class-sidebar__mode {
height: 34px;
border: 1px solid rgba(25, 95, 213, 0.18);
border: 1px solid rgba(59, 130, 246, 0.18);
border-radius: 12px;
background: #f6f9ff;
color: #1d64d2;
background: #f8fafc;
color: #3b82f6;
font-size: 12px;
font-weight: 700;
justify-self: start;
padding: 0 14px;
cursor: pointer;
transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
transition: all 0.2s;
}
.task-class-sidebar__mode:hover {
border-color: rgba(25, 95, 213, 0.34);
background: #edf4ff;
border-color: rgba(59, 130, 246, 0.34);
background: #eff6ff;
}
.task-class-sidebar__list,
@@ -300,7 +318,6 @@ watch(
padding: 24px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
scrollbar-gutter: stable;
}
@@ -308,25 +325,25 @@ watch(
.task-class-sidebar__skeleton-item {
flex: 0 0 auto;
height: 120px;
border-radius: 24px;
background: linear-gradient(90deg, rgba(234, 239, 246, 0.9), rgba(248, 251, 255, 1), rgba(234, 239, 246, 0.9));
background-size: 200% 100%;
border-radius: 20px;
background: rgba(15, 23, 42, 0.03);
animation: task-class-skeleton 1.25s linear infinite;
}
.task-class-card {
flex: 0 0 auto;
min-width: 0;
border-radius: 24px;
border: 1px solid rgba(216, 225, 238, 0.9);
background: linear-gradient(180deg, #fdfefe 0%, #f8fbff 100%);
box-shadow: 0 10px 22px rgba(19, 51, 107, 0.04);
border-radius: 20px;
border: 1px solid rgba(15, 23, 42, 0.06);
background: #ffffff;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
overflow: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.task-class-card--selected {
border-color: rgba(28, 98, 206, 0.28);
box-shadow: 0 14px 24px rgba(22, 95, 208, 0.08);
border-color: #3b82f6;
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.1);
}
.task-class-card__summary {
@@ -345,8 +362,8 @@ watch(
}
.task-class-card__summary:hover .task-class-card__corner {
background: #edf4ff;
color: #2067d5;
background: #eff6ff;
color: #3b82f6;
}
.task-class-card__selector {
@@ -359,8 +376,8 @@ watch(
}
.task-class-card__selector--active {
border-color: #1e66d4;
background: #1e66d4;
border-color: #3b82f6;
background: #3b82f6;
box-shadow: inset 0 0 0 3px #ffffff;
}
@@ -391,9 +408,17 @@ watch(
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(246, 249, 253, 0.9);
color: #1e66d4;
transition: background-color 0.16s ease, color 0.16s ease;
background: #f8fafc;
color: #3b82f6;
transition: all 0.2s;
}
.task-class-card__corner svg {
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.task-class-card--expanded .task-class-card__corner svg {
transform: rotate(45deg);
}
.task-class-card__detail {
@@ -405,8 +430,20 @@ watch(
overflow-x: hidden;
scrollbar-gutter: stable;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(114, 130, 157, 0.65) transparent;
}
.task-detail-enter-active,
.task-detail-leave-active {
transition: max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), padding 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
overflow: hidden;
}
.task-detail-enter-from,
.task-detail-leave-to {
max-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
opacity: 0;
}
.task-class-card__detail-loading {
@@ -415,19 +452,6 @@ watch(
font-size: 13px;
}
.task-class-card__detail::-webkit-scrollbar {
width: 8px;
}
.task-class-card__detail::-webkit-scrollbar-track {
background: transparent;
}
.task-class-card__detail::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(114, 130, 157, 0.55);
}
.task-class-card__detail-list {
display: grid;
gap: 6px;
@@ -482,7 +506,7 @@ watch(
height: 24px;
border: none;
border-radius: 999px;
background: #bb3326;
background: #ef4444;
color: #ffffff;
font-size: 16px;
line-height: 1;
@@ -497,23 +521,23 @@ watch(
.task-class-sidebar__create {
flex: 0 0 auto;
min-width: 0;
min-height: 108px;
border: 1px dashed rgba(204, 216, 232, 0.92);
border-radius: 24px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(249, 251, 255, 0.98));
color: #b1bccd;
min-height: 96px;
border: 1.5px dashed rgba(15, 23, 42, 0.1);
border-radius: 20px;
background: transparent;
color: #94a3b8;
display: grid;
justify-items: center;
align-content: center;
gap: 10px;
cursor: pointer;
transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
transition: all 0.2s;
}
.task-class-sidebar__create:hover {
border-color: rgba(25, 95, 213, 0.22);
background: #f7fbff;
color: #6d7f99;
border-color: #3b82f6;
background: #f8fafc;
color: #3b82f6;
}
.task-class-sidebar__create-icon {
@@ -529,13 +553,8 @@ watch(
}
@keyframes task-class-skeleton {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (max-width: 1520px) {
@@ -545,102 +564,18 @@ watch(
padding-left: 18px;
padding-right: 18px;
}
.task-class-card__summary {
padding: 16px 16px 16px 15px;
min-height: 84px;
}
}
@media (max-width: 1380px) {
.task-class-sidebar {
border-right: none;
border-bottom: 1px solid rgba(196, 209, 227, 0.55);
}
}
@media (max-width: 1180px) {
.task-class-card__detail-item {
grid-template-columns: 28px minmax(0, 1fr) 24px;
align-items: start;
}
.task-class-card__detail-status {
grid-column: 2;
justify-self: start;
}
.task-class-card__detail-delete {
grid-column: 3;
grid-row: 1 / span 2;
align-self: center;
border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}
}
@media (max-height: 900px) {
.task-class-sidebar__header {
padding-top: 12px;
padding-bottom: 12px;
gap: 10px;
}
.task-class-sidebar__header { padding: 12px 18px; }
.task-class-sidebar__list,
.task-class-sidebar__skeleton {
padding-top: 16px;
padding-bottom: 16px;
gap: 10px;
}
.task-class-card {
border-radius: 20px;
}
.task-class-card__summary {
padding: 14px 14px 14px 13px;
min-height: 76px;
}
.task-class-card__content {
gap: 6px;
}
.task-class-card__content strong {
font-size: 15px;
}
.task-class-sidebar__create {
min-height: 88px;
}
}
@media (max-height: 820px) {
.task-class-sidebar__header,
.task-class-sidebar__list,
.task-class-sidebar__skeleton {
padding-left: 14px;
padding-right: 14px;
}
.task-class-card__summary {
padding: 12px;
min-height: 72px;
}
.task-class-card__corner {
width: 40px;
height: 40px;
}
.task-class-card__content strong {
font-size: 14px;
}
.task-class-card__content span,
.task-class-card__detail-text,
.task-class-card__detail-status {
font-size: 12px;
}
.task-class-sidebar__skeleton { padding: 16px 18px; }
}
</style>

128
frontend/src/components/schedule/WeekPlanningBoard.vue
View File

@@ -281,11 +281,12 @@ function handlePreviewDragEnd() {
<article
v-for="header in weekHeaders"
:key="`${header.dayOfWeek}-${slot.order}`"
:key="`${weekData?.week ?? 0}-${header.dayOfWeek}-${slot.order}`"
class="planning-board__cell"
:class="[
`planning-board__cell--${resolveEventTone(resolveEvent(header.dayOfWeek, slot.order))}`,
{
'board-item-pop': resolveEvent(header.dayOfWeek, slot.order)?.type !== 'empty',
'planning-board__cell--selectable': scheduleSelectionMode && resolveEvent(header.dayOfWeek, slot.order)?.type !== 'empty',
'planning-board__cell--selected': resolveEvent(header.dayOfWeek, slot.order) && isSelected(resolveEvent(header.dayOfWeek, slot.order)!.id),
'planning-board__cell--draggable': isWholeCellDraggable(resolveEvent(header.dayOfWeek, slot.order)),
@@ -293,6 +294,7 @@ function handlePreviewDragEnd() {
'planning-board__cell--dragover': dragOverCellKey === buildCellKey(header.dayOfWeek, slot.order),
},
]"
:style="{ '--anim-delay': (header.dayOfWeek - 1) * 0.035 + (slot.order - 1) * 0.045 + 's' }"
:draggable="isWholeCellDraggable(resolveEvent(header.dayOfWeek, slot.order))"
@dragstart="handlePreviewDragStart(header.dayOfWeek, slot.order, $event)"
@dragover="handlePreviewDragOver(header.dayOfWeek, slot.order, $event)"
@@ -347,29 +349,29 @@ function handlePreviewDragEnd() {
<style scoped>
.planning-board {
--planning-grid-padding-x: 24px;
--planning-grid-padding-y: 28px;
--planning-grid-gap-x: 12px;
--planning-grid-padding-x: 20px;
--planning-grid-padding-y: 20px;
--planning-grid-gap-x: 10px;
--planning-grid-gap-y: 10px;
--planning-time-column-width: 74px;
--planning-time-column-width: 68px;
--planning-day-column-min: 96px;
--planning-cell-height: clamp(72px, 9.2vh, 112px);
min-width: 0;
min-height: 0;
border-radius: 28px;
border: 1px solid rgba(214, 223, 236, 0.82);
background: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(248, 251, 255, 0.98));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
border-radius: 20px;
border: 1px solid rgba(15, 23, 42, 0.05);
background: #ffffff;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
overflow: hidden;
}
.planning-board__header {
padding: 18px 28px 16px;
border-bottom: 1px solid rgba(221, 229, 240, 0.86);
color: #1f2b42;
font-size: 18px;
padding: 18px 24px 16px;
border-bottom: 1px solid rgba(15, 23, 42, 0.05);
color: #0f172a;
font-size: 16px;
font-weight: 700;
}
.planning-board__grid {
@@ -391,7 +393,7 @@ function handlePreviewDragEnd() {
display: grid;
justify-items: center;
gap: 4px;
color: #8ca0bd;
color: #64748b;
}
.planning-board__day-head span {
@@ -409,13 +411,14 @@ function handlePreviewDragEnd() {
display: grid;
align-content: center;
justify-items: end;
color: #9aacbf;
padding-right: 8px;
color: #94a3b8;
padding-right: 12px;
}
.planning-board__time-cell strong {
font-size: 15px;
color: #8da0bc;
font-size: 14px;
color: #64748b;
font-weight: 700;
}
.planning-board__time-cell small {
@@ -428,14 +431,15 @@ function handlePreviewDragEnd() {
.planning-board__cell {
position: relative;
min-height: var(--planning-cell-height);
border-radius: 22px;
border: 1px solid rgba(228, 234, 243, 0.92);
padding: 18px 14px;
border-radius: 14px;
border: 1px solid transparent;
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.planning-board__cell-main {
@@ -445,34 +449,34 @@ function handlePreviewDragEnd() {
}
.planning-board__cell-main strong {
color: #7387a3;
font-size: 15px;
line-height: 1.35;
color: #334155;
font-size: 14px;
line-height: 1.4;
font-weight: 700;
min-width: 0;
overflow-wrap: anywhere;
}
.planning-board__cell-main span {
color: #9badc5;
color: #64748b;
font-size: 12px;
min-width: 0;
overflow-wrap: anywhere;
}
.planning-board__cell--course {
background: #acd6f4;
background: #e0f2fe;
}
.planning-board__cell--course-embedded {
background: linear-gradient(180deg, rgba(121, 187, 239, 0.96) 0%, rgba(88, 161, 225, 0.96) 100%);
background: #b9e6fe;
align-items: stretch;
padding: 9px;
padding: 8px;
}
.planning-board__cell--course .planning-board__cell-main strong,
.planning-board__cell--course .planning-board__cell-main span {
color: #2576cc;
color: #0284c7;
}
.planning-board__embedded-shell {
@@ -498,7 +502,7 @@ function handlePreviewDragEnd() {
.planning-board__embedded-course {
padding: 6px 4px;
color: #ffffff;
color: #0369a1;
}
.planning-board__embedded-course strong,
@@ -522,13 +526,12 @@ function handlePreviewDragEnd() {
.planning-board__embedded-task {
padding: 6px 8px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 10px 18px rgba(31, 82, 145, 0.14);
border-radius: 10px;
background: #ffffff;
}
.planning-board__embedded-task strong {
color: #1f5db3;
color: #0369a1;
font-size: 11px;
line-height: 1.24;
font-weight: 800;
@@ -544,48 +547,59 @@ function handlePreviewDragEnd() {
}
.planning-board__cell--amber {
background: #ffe58b;
background: #fef3c7;
}
.planning-board__cell--amber .planning-board__cell-main strong,
.planning-board__cell--amber .planning-board__cell-main span {
color: #7d6917;
color: #d97706;
}
.planning-board__cell--mint {
background: #d7f7a7;
background: #dcfce7;
}
.planning-board__cell--mint .planning-board__cell-main strong,
.planning-board__cell--mint .planning-board__cell-main span,
.planning-board__cell--emerald .planning-board__cell-main strong,
.planning-board__cell--emerald .planning-board__cell-main span {
color: #72a91d;
color: #059669;
}
.planning-board__cell--emerald {
background: #d3f3ac;
background: #d1fae5;
}
.planning-board__cell--rose {
background: #f6dfe2;
background: #fee2e2;
}
.planning-board__cell--rose .planning-board__cell-main strong,
.planning-board__cell--rose .planning-board__cell-main span {
color: #e6696e;
color: #e11d48;
}
.planning-board__cell--violet {
background: #e9dcfb;
background: #f3e8ff;
}
.planning-board__cell--violet .planning-board__cell-main strong,
.planning-board__cell--violet .planning-board__cell-main span {
color: #7c3aed;
}
.planning-board__cell--sky {
background: #d8ecfb;
background: #e0f2fe;
}
.planning-board__cell--sky .planning-board__cell-main strong,
.planning-board__cell--sky .planning-board__cell-main span {
color: #0284c7;
}
.planning-board__cell--empty {
background: #f8fbff;
background: #f8fafc;
border-color: rgba(15, 23, 42, 0.05);
}
.planning-board__cell--selectable {
@@ -593,12 +607,16 @@ function handlePreviewDragEnd() {
}
.planning-board__cell--selected {
box-shadow: inset 0 0 0 2px rgba(32, 102, 212, 0.52);
box-shadow: inset 0 0 0 2px #3b82f6;
}
.planning-board__cell--draggable {
cursor: grab;
}
.planning-board__cell--draggable:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.planning-board__cell--dragging {
opacity: 0.42;
@@ -606,8 +624,8 @@ function handlePreviewDragEnd() {
.planning-board__cell--dragover {
box-shadow:
inset 0 0 0 2px rgba(20, 92, 192, 0.58),
0 0 0 4px rgba(33, 109, 215, 0.1);
inset 0 0 0 2px #2563eb,
0 0 0 4px rgba(59, 130, 246, 0.15);
}
.planning-board__checkbox {
@@ -623,11 +641,23 @@ function handlePreviewDragEnd() {
}
.planning-board__checkbox--active {
border-color: #1e66d4;
background: #1e66d4;
border-color: #3b82f6;
background: #3b82f6;
box-shadow: inset 0 0 0 3px #ffffff;
}
@keyframes board-item-spring {
0% { opacity: 0; transform: scale(0.6) translateY(20px); }
60% { opacity: 1; transform: scale(1.05) translateY(-2px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
.board-item-pop {
animation: board-item-spring 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
animation-delay: var(--anim-delay, 0s);
transform-origin: center center;
}
@media (max-width: 1560px) {
.planning-board__grid {
--planning-time-column-width: 64px;