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

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;