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>