Version: 0.9.33.dev.260419
后端: 1. deliver 收口上下文重构——历史折叠到工作区,仅基于本轮 execute 窗口诚实收口 - newAgent/prompt/deliver.go:BuildDeliverMessages 改为向 buildDeliverWorkspace 透传 ConversationContext - newAgent/prompt/deliver_context.go:deliver 的 msg1 改为轻量提示,不再回灌完整历史;msg2 追加本轮 execute 窗口与结果态信息 前端: 2. 品牌命名统一切换为 SmartMate - index.html:页面标题从 SmartFlow 改为 SmartMate - package.json:前端包名改为 smartmate-frontend - App.vue:布局类名从 smartflow-* 统一改为 smartmate-* - stores/auth.ts:access/refresh token 与 last username 的 localStorage key 全部切到 smartmate_* - utils/idempotency.ts:默认幂等键前缀从 smartflow 改为 smartmate - DashboardView.vue:首页默认问候名从 SmartFlow 用户改为 SmartMate 用户 3. 助手页体验重做——默认空会话、排程卡片懒加载、上下文统计刷新时机收口 - components/dashboard/AssistantPanel.vue:进入页面不再自动打开最后一次会话,改为展示居中欢迎空态 - components/dashboard/AssistantPanel.vue:schedule_completed 改为先展示占位卡片,点击后再拉取 schedule preview,避免预览未落库时并发 404 - components/dashboard/AssistantPanel.vue:tool done、schedule card、SSE block done、[DONE] 与整轮流结束后统一刷新 context stats - components/dashboard/AssistantPanel.vue:重构聊天区布局、空态欢迎内容、底部交互区与内外边距,整体视觉切到更轻的阅读式界面 - views/AssistantView.vue:移除外层白底卡片壳,交由 AssistantPanel 自己承接容器视觉 4. 排程微调保存链路补幂等保护,并修正请求头口径 - api/schedule_agent.ts:正式应用接口请求头从 Idempotency-Key 改为 X-Idempotency-Key - components/assistant/ScheduleFineTuneModal.vue:同一预览会话复用稳定幂等键,保存成功后再刷新新 key,避免重试或延迟导致重复落库 - components/assistant/ScheduleResultCard.vue:结果卡片样式、hover 与进场动效整体升级 5. 任务类选择器与侧边导航细节调整 - components/assistant/TaskClassPlanningPicker.vue:popover、骨架屏、列表项、选中态与按钮视觉整体重绘 - components/common/MainSidebar.vue:移除“任务”占位入口,侧栏只保留总览 / 日程 / 助手 6. 登录页与首页展示风格重做 - views/AuthView.vue:品牌文案切到 SmartMate,登录/注册从 tabs 改为自定义双态切换,重做背景、玻璃卡片、表单与动效 - views/DashboardView.vue:首页主区改为 auto + 1fr 布局,锁定顶部栏高度,避免缩放时形变 仓库: 7. README 全量更新到当前版本能力边界 - README.md:重写项目定位、功能描述、业务闭环图、newAgent graph 流程、工具定义、前端衔接边界、页面展示、部署方案与监控说明
This commit is contained in:
@@ -11,9 +11,9 @@ const showLayout = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="showLayout" class="smartflow-layout">
|
||||
<div v-if="showLayout" class="smartmate-layout">
|
||||
<MainSidebar />
|
||||
<div class="smartflow-content">
|
||||
<div class="smartmate-content">
|
||||
<router-view v-slot="{ Component }">
|
||||
<component :is="Component" />
|
||||
</router-view>
|
||||
@@ -28,7 +28,7 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.smartflow-layout {
|
||||
.smartmate-layout {
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
box-sizing: border-box;
|
||||
@@ -41,7 +41,7 @@ body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.smartflow-content {
|
||||
.smartmate-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
|
||||
@@ -90,7 +90,7 @@ export async function applyBatchIntoSchedule(
|
||||
items,
|
||||
}, {
|
||||
headers: {
|
||||
'Idempotency-Key': idempotencyKey
|
||||
'X-Idempotency-Key': idempotencyKey
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
|
||||
@@ -86,6 +86,9 @@ async function handleSaveToState() {
|
||||
}
|
||||
}
|
||||
|
||||
// 每个预览会话维持一个稳定的幂等键,避免重试或延迟导致的重复落库
|
||||
const officialSaveIdempotencyKey = ref(crypto.randomUUID())
|
||||
|
||||
/**
|
||||
* 正式保存到数据库 (MySQL)
|
||||
*/
|
||||
@@ -122,13 +125,16 @@ async function handleOfficialSave() {
|
||||
}
|
||||
})
|
||||
|
||||
const idempotencyKey = crypto.randomUUID()
|
||||
const promises = Array.from(groups.entries()).map(([classId, groupItems]) =>
|
||||
applyBatchIntoSchedule(classId, groupItems, idempotencyKey)
|
||||
applyBatchIntoSchedule(classId, groupItems, officialSaveIdempotencyKey.value)
|
||||
)
|
||||
|
||||
await Promise.all(promises)
|
||||
ElMessage.success('日程已正式保存到数据库')
|
||||
|
||||
// 保存成功后刷新幂等键,虽然通常弹窗会关闭,但这是为了逻辑严密
|
||||
officialSaveIdempotencyKey.value = crypto.randomUUID()
|
||||
|
||||
emit('saved')
|
||||
emit('close')
|
||||
} catch (error: any) {
|
||||
|
||||
@@ -41,30 +41,49 @@ const emit = defineEmits<{
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(15, 23, 42, 0.08);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(15, 23, 42, 0.06);
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
|
||||
margin: 8px 0;
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
margin: 12px 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* 弹出动画 */
|
||||
animation: schedule-card-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
||||
}
|
||||
|
||||
@keyframes schedule-card-pop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.9) translateY(10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-result-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.15);
|
||||
background: #fcfdfe;
|
||||
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.04);
|
||||
}
|
||||
|
||||
.schedule-result-card__icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #eff6ff;
|
||||
background: linear-gradient(135deg, #eff6ff 0%, #dbebff 100%);
|
||||
color: #3b82f6;
|
||||
border-radius: 12px;
|
||||
border-radius: 14px;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.schedule-result-card:hover .schedule-result-card__icon {
|
||||
transform: rotate(-5deg) scale(1.05);
|
||||
}
|
||||
|
||||
.schedule-result-card__content {
|
||||
@@ -75,23 +94,33 @@ const emit = defineEmits<{
|
||||
.schedule-result-card__summary {
|
||||
margin: 0 0 4px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
font-weight: 850;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.schedule-result-card__detail {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.schedule-result-card__arrow {
|
||||
color: #cbd5e1;
|
||||
transition: transform 0.3s;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f8fafc;
|
||||
border-radius: 10px;
|
||||
color: #94a3b8;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.schedule-result-card:hover .schedule-result-card__arrow {
|
||||
transform: translateX(4px);
|
||||
color: #3b82f6;
|
||||
background: #3b82f6;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -352,33 +352,57 @@ function formatDateLabel(value: string) {
|
||||
.assistant-planning__panel {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
/* 弹出动画 */
|
||||
animation: planning-panel-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
||||
}
|
||||
|
||||
@keyframes planning-panel-pop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(8px) scale(0.98);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.assistant-planning__panel-header strong {
|
||||
display: block;
|
||||
color: #1f2937;
|
||||
font-size: 15px;
|
||||
color: #0f172a;
|
||||
font-size: 16px;
|
||||
font-weight: 850;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.assistant-planning__panel-header p {
|
||||
margin: 6px 0 0;
|
||||
color: #6b7280;
|
||||
margin: 4px 0 0;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.assistant-planning__loading,
|
||||
.assistant-planning__list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
max-height: 260px;
|
||||
gap: 6px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
padding: 2px;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.assistant-planning__loading-item {
|
||||
height: 62px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(90deg, rgba(241, 245, 249, 0.9), rgba(226, 232, 240, 0.72), rgba(241, 245, 249, 0.9));
|
||||
height: 60px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
.assistant-planning__item {
|
||||
@@ -387,66 +411,89 @@ function formatDateLabel(value: string) {
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgba(15, 23, 42, 0.08);
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(15, 23, 42, 0.04);
|
||||
border-radius: 14px;
|
||||
background: #f8fafc;
|
||||
text-align: left;
|
||||
transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.assistant-planning__item:hover {
|
||||
border-color: rgba(57, 86, 178, 0.24);
|
||||
background: #fafcff;
|
||||
border-color: rgba(59, 130, 246, 0.2);
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.assistant-planning__item--selected {
|
||||
border-color: rgba(57, 86, 178, 0.28);
|
||||
background: #f5f8ff;
|
||||
border-color: #3b82f6;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.06);
|
||||
}
|
||||
|
||||
.assistant-planning__item-check {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 999px;
|
||||
border: 1.5px solid rgba(148, 163, 184, 0.8);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 6px;
|
||||
border: 2px solid #e2e8f0;
|
||||
background: #ffffff;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.assistant-planning__item-check--selected {
|
||||
border-color: #3357c2;
|
||||
background: radial-gradient(circle at center, #3357c2 0 45%, transparent 46%);
|
||||
border-color: #3b82f6;
|
||||
background: #3b82f6;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.assistant-planning__item-check--selected::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 6px;
|
||||
height: 3px;
|
||||
border-left: 2px solid #ffffff;
|
||||
border-bottom: 2px solid #ffffff;
|
||||
transform: translate(-50%, -65%) rotate(-45deg);
|
||||
}
|
||||
|
||||
.assistant-planning__item-body {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.assistant-planning__item-body strong {
|
||||
color: #1f2430;
|
||||
font-size: 13px;
|
||||
color: #1e293b;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.assistant-planning__item-body small {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.assistant-planning__item-slots {
|
||||
color: #475569;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
background: #f1f5f9;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.assistant-planning__empty {
|
||||
padding: 18px 16px;
|
||||
border-radius: 16px;
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.assistant-planning__panel-actions {
|
||||
@@ -465,20 +512,31 @@ function formatDateLabel(value: string) {
|
||||
}
|
||||
|
||||
.assistant-planning__panel-button--ghost {
|
||||
background: #ffffff;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.assistant-planning__panel-button--ghost:hover {
|
||||
background: #e2e8f0;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.assistant-planning__panel-button--primary {
|
||||
border-color: transparent;
|
||||
background: #3357c2;
|
||||
background: #3b82f6;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.assistant-planning__panel-button--primary:hover {
|
||||
background: #2563eb;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 15px rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
|
||||
:global(.assistant-planning-popover) {
|
||||
padding: 14px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(203, 213, 225, 0.78);
|
||||
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
|
||||
padding: 18px !important;
|
||||
border-radius: 20px !important;
|
||||
border: 1px solid rgba(15, 23, 42, 0.08) !important;
|
||||
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,7 +12,6 @@ interface SidebarItem {
|
||||
|
||||
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' },
|
||||
]
|
||||
|
||||
@@ -230,6 +230,7 @@ const conversationContextStatsReadyMap = reactive<Record<string, boolean>>({})
|
||||
const conversationListItemRevealMap = reactive<Record<string, boolean>>({})
|
||||
const scheduleResultMap = reactive<Record<string, SchedulePreviewData>>({})
|
||||
const isFineTuneModalVisible = ref(false)
|
||||
const fineTuneLoading = ref(false)
|
||||
const activeFineTuneData = ref<SchedulePreviewData | null>(null)
|
||||
|
||||
const quickActions = [
|
||||
@@ -1301,9 +1302,14 @@ function scheduleScrollMessagesToBottom(smooth = false, force = false) {
|
||||
}
|
||||
|
||||
async function ensureSelectedConversationAfterListLoad() {
|
||||
// 1. 根据用户最新要求:进入页面时不自动加载最后一次对话。
|
||||
// 2. 默认保持 selectedConversationId 为空,从而触发居中的“新会话”看板及动画过渡逻辑。
|
||||
// 3. 用户若需查看历史,可从左侧列表中手动点击。
|
||||
/*
|
||||
if (!selectedConversationId.value && conversationList.value.length > 0) {
|
||||
await selectConversation(conversationList.value[0].conversation_id)
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
// loadConversationListData 负责按页读取会话列表,并驱动首屏选中与懒加载状态。
|
||||
@@ -1601,16 +1607,16 @@ function rebuildStateFromTimeline(conversationId: string, events: TimelineEvent[
|
||||
break
|
||||
|
||||
case 'schedule_completed':
|
||||
// 标记该消息需要排程卡片
|
||||
// 详情通过 schedule_completed 事件触发的 getSchedulePreview 异步填充
|
||||
void (async () => {
|
||||
try {
|
||||
const preview = await getSchedulePreview(conversationId)
|
||||
scheduleResultMap[mid] = preview
|
||||
} catch {
|
||||
// 吞掉,可能是过期的预览
|
||||
}
|
||||
})()
|
||||
// 1. 标记该消息需要排程卡片。
|
||||
// 2. 改造点:不在此处立即进行 getSchedulePreview 的异步拉取,
|
||||
// 避免后端还未完成落库、或者并发过高导致的 'schedule plan preview not found' 404 捕获。
|
||||
// 3. 这里先存入占位标志,真正的拉取推迟到用户“点击卡片”时。
|
||||
scheduleResultMap[mid] = {
|
||||
summary: '智能编排方案已就绪',
|
||||
conversation_id: conversationId,
|
||||
hybrid_entries: [],
|
||||
is_placeholder: true, // 内部临时标记
|
||||
} as any
|
||||
break
|
||||
}
|
||||
}
|
||||
@@ -1761,8 +1767,34 @@ function isManualThinkingEnabled(mode: ThinkingModeType) {
|
||||
return mode === 'true'
|
||||
}
|
||||
|
||||
function openFineTuneModal(data: SchedulePreviewData) {
|
||||
activeFineTuneData.value = data
|
||||
async function openFineTuneModal(data: SchedulePreviewData) {
|
||||
// 1. 如果点击的是占位卡片(尚未加载详情),则触发实时拉取。
|
||||
if ((data as any).is_placeholder) {
|
||||
if (fineTuneLoading.value) return
|
||||
|
||||
fineTuneLoading.value = true
|
||||
try {
|
||||
const realData = await getSchedulePreview(selectedConversationId.value)
|
||||
// 成功后覆盖占位符,下次点击无需再查
|
||||
activeFineTuneData.value = realData
|
||||
|
||||
// 这里的逻辑主要是为了同步界面上的 card 状态(如果是合并消息,对应的 id 为 dm.id)
|
||||
for (const mid of Object.keys(scheduleResultMap)) {
|
||||
if ((scheduleResultMap[mid] as any).is_placeholder) {
|
||||
scheduleResultMap[mid] = realData
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Lazy load schedule failed:', error)
|
||||
ElMessage.warning('编排方案正在生成中,请稍候再试...')
|
||||
return
|
||||
} finally {
|
||||
fineTuneLoading.value = false
|
||||
}
|
||||
} else {
|
||||
activeFineTuneData.value = data
|
||||
}
|
||||
|
||||
isFineTuneModalVisible.value = true
|
||||
}
|
||||
|
||||
@@ -1965,6 +1997,9 @@ function handleStreamExtraEvent(extra: StreamExtraPayload | undefined, assistant
|
||||
return
|
||||
}
|
||||
|
||||
// 结构化 extra 事件(如卡片、工具调用、状态变更)处理逻辑。
|
||||
// 注意:为了避免请求爆炸,不再每个事件都刷新统计信息。仅在里程碑事件(如卡片生成)处精准刷新。
|
||||
|
||||
if (extra.kind === 'confirm_request') {
|
||||
// 1. 记录“confirm 到来前是否已存在可见正文/思考”。
|
||||
// 2. 若已有可见前缀,后续流结束时只隐藏 confirm 相关部分,不删除整条消息。
|
||||
@@ -1995,6 +2030,9 @@ function handleStreamExtraEvent(extra: StreamExtraPayload | undefined, assistant
|
||||
buildToolDetail(extra.tool),
|
||||
`${extra.tool.name || ''}`,
|
||||
)
|
||||
if (extra.tool.status === 'done') {
|
||||
void loadConversationContextStats(selectedConversationId.value, true)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
@@ -2022,16 +2060,18 @@ function handleStreamExtraEvent(extra: StreamExtraPayload | undefined, assistant
|
||||
}
|
||||
|
||||
if (extra.kind === 'schedule_completed') {
|
||||
// 异步拉取详细排程方案
|
||||
void (async () => {
|
||||
try {
|
||||
const preview = await getSchedulePreview(selectedConversationId.value)
|
||||
scheduleResultMap[assistantMessage.id] = preview
|
||||
scheduleScrollMessagesToBottom(true)
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '获取排程方案失败')
|
||||
}
|
||||
})()
|
||||
// 1. 每当“排程卡片”这种重量级里程碑出现时,刷新统计信息,让用户感知到上下文变动。
|
||||
void loadConversationContextStats(selectedConversationId.value, true)
|
||||
|
||||
// 2. 收到编排完成事件,仅在前端打上占位标记,展示展示卡片。
|
||||
// 不再并发执行异步 fetch,防止后端落库延迟导致的 NotFound。
|
||||
scheduleResultMap[assistantMessage.id] = {
|
||||
summary: '智能编排方案已就绪',
|
||||
conversation_id: selectedConversationId.value,
|
||||
hybrid_entries: [],
|
||||
is_placeholder: true,
|
||||
} as any
|
||||
scheduleScrollMessagesToBottom(true)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2069,6 +2109,8 @@ function processSseBlock(block: string, assistantMessage: AssistantMessage) {
|
||||
}
|
||||
activeStreamingMessageId.value = ''
|
||||
reasoningCollapsedMap[assistantMessage.id] = true
|
||||
// 整个 SSE 流结束信号
|
||||
void loadConversationContextStats(selectedConversationId.value, true)
|
||||
return
|
||||
}
|
||||
|
||||
@@ -2127,6 +2169,8 @@ function processSseBlock(block: string, assistantMessage: AssistantMessage) {
|
||||
}
|
||||
activeStreamingMessageId.value = ''
|
||||
reasoningCollapsedMap[assistantMessage.id] = true
|
||||
// 单条消息结束标志
|
||||
void loadConversationContextStats(selectedConversationId.value, true)
|
||||
}
|
||||
|
||||
if (!shouldSuppressVisibleDelta) {
|
||||
@@ -2202,6 +2246,9 @@ async function streamAssistantReply(
|
||||
: '暂未收到回复正文,请稍后重试。'
|
||||
}
|
||||
|
||||
// 4. 传输彻底结束后,做最后一次上下文统计更新,确保最终的 Token 用量胶囊是准确的。
|
||||
void loadConversationContextStats(actualConversationId, true)
|
||||
|
||||
if (shouldSyncCurrentConversationMeta) {
|
||||
await syncNewConversationTitleAfterFirstReply(actualConversationId)
|
||||
}
|
||||
@@ -2383,14 +2430,7 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="assistant-shell glass-panel" :class="{ 'assistant-shell--standalone': isStandaloneMode }">
|
||||
<header class="assistant-header dashboard-item-pop" :style="{ '--anim-delay': '0s' }">
|
||||
<div class="assistant-header__text">
|
||||
<span class="assistant-header__eyebrow">AI 对话</span>
|
||||
<strong>{{ selectedConversationTitle }}</strong>
|
||||
<p>{{ selectedConversationSubtitle }}</p>
|
||||
</div>
|
||||
</header>
|
||||
<aside class="assistant-shell" :class="{ 'assistant-shell--standalone': isStandaloneMode }">
|
||||
|
||||
<div
|
||||
ref="assistantBodyRef"
|
||||
@@ -2491,7 +2531,12 @@ onBeforeUnmount(() => {
|
||||
<span class="assistant-splitter__line" />
|
||||
</div>
|
||||
|
||||
<section class="assistant-chat dashboard-item-pop" :style="{ '--anim-delay': '0.1s' }">
|
||||
<section
|
||||
class="assistant-chat dashboard-item-pop"
|
||||
:class="{ 'assistant-chat--empty': !selectedMessages.length && !chatLoading }"
|
||||
:style="{ '--anim-delay': '0.1s' }"
|
||||
>
|
||||
<div class="assistant-chat__spacer-top" />
|
||||
<div
|
||||
ref="messageViewportRef"
|
||||
class="assistant-messages"
|
||||
@@ -2502,14 +2547,7 @@ onBeforeUnmount(() => {
|
||||
当前会话的历史消息暂时不可读,但你仍然可以继续追问;后续刷新后会自动恢复。
|
||||
</div>
|
||||
|
||||
<transition name="fade-switch" mode="out-in">
|
||||
<div v-if="!selectedMessages.length && !chatLoading" key="empty" class="assistant-empty">
|
||||
<div class="assistant-empty__halo" />
|
||||
<strong>从这里开始和 AI 协作</strong>
|
||||
<p>右侧采用更接近 DeepSeek 的阅读式布局,只保留用户气泡,AI 回复直接按正文流展示。</p>
|
||||
</div>
|
||||
|
||||
<TransitionGroup v-else tag="div" name="message-stagger" class="assistant-message-list" key="list">
|
||||
<TransitionGroup v-if="selectedMessages.length" tag="div" name="message-stagger" class="assistant-message-list">
|
||||
<article
|
||||
v-for="dm in displayMessages"
|
||||
:key="dm.id"
|
||||
@@ -2723,22 +2761,34 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</article>
|
||||
</TransitionGroup>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<div class="assistant-actions">
|
||||
<button
|
||||
v-for="action in quickActions"
|
||||
:key="action"
|
||||
type="button"
|
||||
class="assistant-actions__chip"
|
||||
:disabled="chatLoading"
|
||||
@click="sendMessage(action)"
|
||||
>
|
||||
{{ action }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="assistant-chat__interaction-group">
|
||||
<!-- Welcome Content (Only in empty state) -->
|
||||
<Transition name="fade-switch">
|
||||
<div v-if="!selectedMessages.length && !chatLoading" class="assistant-empty">
|
||||
<div class="assistant-empty__halo" />
|
||||
<div class="assistant-empty__content">
|
||||
<strong>SmartMate AI 伙伴</strong>
|
||||
<p>我是你的智能助理,你可以从直接输入任务开始。</p>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- Suggestion Chips -->
|
||||
<div v-if="quickActions.length" class="assistant-actions">
|
||||
<button
|
||||
v-for="action in quickActions"
|
||||
:key="action"
|
||||
type="button"
|
||||
class="assistant-actions__chip"
|
||||
:disabled="chatLoading"
|
||||
@click="sendMessage(action)"
|
||||
>
|
||||
{{ action }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="_9a2f8e4 assistant-composer-ds" :class="{ 'assistant-composer-ds--confirm': shouldShowDialogConfirmOverlay }">
|
||||
<div
|
||||
v-if="shouldShowDialogConfirmOverlay"
|
||||
@@ -2805,6 +2855,7 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
|
||||
<div v-else class="aaff8b8f">
|
||||
<div class="assistant-chat__spacer-bottom" />
|
||||
<div class="_77cefa5 _9996a53">
|
||||
<div class="_020ab5b">
|
||||
<TaskClassPlanningPicker
|
||||
@@ -2916,7 +2967,9 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="assistant-chat__spacer-bottom" />
|
||||
</section>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -2994,10 +3047,12 @@ onBeforeUnmount(() => {
|
||||
.assistant-shell {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: #f8fafc;
|
||||
background: transparent;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Inter', 'Segoe UI', Roboto, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
@@ -3104,11 +3159,13 @@ onBeforeUnmount(() => {
|
||||
|
||||
.assistant-body {
|
||||
--assistant-history-width: 228px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: var(--assistant-history-width) 8px minmax(0, 1fr);
|
||||
grid-template-columns: var(--assistant-history-width) auto minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
position: relative;
|
||||
transition: grid-template-columns 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* 核心过渡动效 */
|
||||
transition: grid-template-columns 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.assistant-body--collapsed {
|
||||
@@ -3116,7 +3173,8 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.assistant-body--standalone {
|
||||
grid-template-columns: var(--assistant-history-width) 8px minmax(0, 1fr);
|
||||
grid-template-columns: var(--assistant-history-width) auto minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.assistant-body--standalone.assistant-body--collapsed {
|
||||
@@ -3128,10 +3186,12 @@ onBeforeUnmount(() => {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
background: #f8fafc;
|
||||
border-right: 1px solid #f1f5f9;
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(15, 23, 42, 0.05);
|
||||
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02);
|
||||
}
|
||||
|
||||
.assistant-history__toolbar {
|
||||
@@ -3435,6 +3495,9 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: col-resize;
|
||||
width: 8px;
|
||||
margin: 0 -4px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.assistant-splitter--hidden {
|
||||
@@ -3460,8 +3523,46 @@ onBeforeUnmount(() => {
|
||||
.assistant-chat {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr) auto auto auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(15, 23, 42, 0.05);
|
||||
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.assistant-chat__spacer-top {
|
||||
flex: 0;
|
||||
transition: flex 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.assistant-chat__spacer-bottom {
|
||||
flex: 0;
|
||||
transition: flex 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.assistant-chat--empty .assistant-chat__spacer-top {
|
||||
flex: 1.2; /* 稍微偏上一点,视觉重心更舒适 */
|
||||
}
|
||||
|
||||
.assistant-chat--empty .assistant-chat__spacer-bottom {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.assistant-messages {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
/* 隐藏滚动条,保持纯净感,仅在非空时显示 */
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.assistant-chat--empty .assistant-messages {
|
||||
flex: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.assistant-shell--standalone .assistant-chat {
|
||||
@@ -3742,32 +3843,46 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.assistant-empty {
|
||||
min-height: 260px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
justify-items: center;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 10px;
|
||||
color: #68778e;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.assistant-empty strong {
|
||||
color: #162334;
|
||||
}
|
||||
|
||||
.assistant-empty p {
|
||||
margin: 0;
|
||||
max-width: 420px;
|
||||
line-height: 1.75;
|
||||
.assistant-empty__content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.assistant-empty__halo {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 26px;
|
||||
background: radial-gradient(circle at center, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0.02));
|
||||
animation: halo-breathe 2.4s ease-in-out infinite;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.assistant-empty strong {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 850;
|
||||
color: #0f172a;
|
||||
margin-bottom: 12px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.assistant-empty p {
|
||||
color: #64748b;
|
||||
font-size: 15px;
|
||||
max-width: 320px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.chat-message__user-row {
|
||||
|
||||
@@ -4,9 +4,9 @@ import { defineStore } from 'pinia'
|
||||
import type { LoginPayload, RegisterPayload, TokenPair } from '@/types/api'
|
||||
import { login as loginApi, logout as logoutApi, register as registerApi } from '@/api/auth'
|
||||
|
||||
const ACCESS_TOKEN_KEY = 'smartflow_access_token'
|
||||
const REFRESH_TOKEN_KEY = 'smartflow_refresh_token'
|
||||
const LAST_USERNAME_KEY = 'smartflow_last_username'
|
||||
const ACCESS_TOKEN_KEY = 'smartmate_access_token'
|
||||
const REFRESH_TOKEN_KEY = 'smartmate_refresh_token'
|
||||
const LAST_USERNAME_KEY = 'smartmate_last_username'
|
||||
|
||||
export const useAuthStore = defineStore('auth', () => {
|
||||
const accessToken = ref(localStorage.getItem(ACCESS_TOKEN_KEY) ?? '')
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
// 职责边界:
|
||||
// 1. 只负责生成前端唯一键,不负责持久化或重试策略。
|
||||
// 2. 优先使用浏览器原生 randomUUID,缺失时退回时间戳方案。
|
||||
export function createIdempotencyKey(prefix = 'smartflow') {
|
||||
export function createIdempotencyKey(prefix = 'smartmate') {
|
||||
if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
|
||||
return `${prefix}-${crypto.randomUUID()}`
|
||||
}
|
||||
|
||||
@@ -11,10 +11,6 @@ import AssistantPanel from '@/components/dashboard/AssistantPanel.vue'
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
border-radius: 24px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
|
||||
@@ -96,40 +96,57 @@ async function submitRegister() {
|
||||
<main class="auth-page">
|
||||
<div class="page-shell auth-layout">
|
||||
<section class="auth-brand glass-panel">
|
||||
<div class="auth-brand__badge">SmartFlow</div>
|
||||
<h1>把任务、课程与智能规划放在同一个工作台里。</h1>
|
||||
<div class="auth-brand__badge">SmartMate</div>
|
||||
<h1>您的全能智能排程伙伴。</h1>
|
||||
<p>
|
||||
这一版先把登录链路跑通。后面我们会在这个基础上继续接任务管理、课表总览和智能体排程能力。
|
||||
SmartMate 将碎片化的任务管理、精准的课表同步与大模型驱动的智能规划深度融合,助您掌控每一刻,实现效率飞跃。
|
||||
</p>
|
||||
|
||||
<div class="auth-brand__points">
|
||||
<article>
|
||||
<strong>扁平化界面</strong>
|
||||
<span>去掉多余装饰,把信息层级讲清楚。</span>
|
||||
<strong>智能代办规划</strong>
|
||||
<span>AI 助手自动分析任务优先级,平衡学业与生活,为您量身定制平衡的每日日程。</span>
|
||||
</article>
|
||||
<article>
|
||||
<strong>登录态托管</strong>
|
||||
<span>统一管理 access token,后续接业务页面更轻松。</span>
|
||||
<strong>多源数据融合</strong>
|
||||
<span>无缝对接教务系统课表与个人待办清单,打破信息孤岛,实现真正的一站式时间管理。</span>
|
||||
</article>
|
||||
<article>
|
||||
<strong>可持续扩展</strong>
|
||||
<span>路由、状态、接口层已经拆开,后面直接加页面即可。</span>
|
||||
<strong>极简设计哲学</strong>
|
||||
<span>采用现代建筑感扁平化设计,通过灵动的动效与极简层级,提升您的生产力与视觉愉悦感。</span>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="auth-card glass-panel">
|
||||
<div class="auth-card__header">
|
||||
<div>
|
||||
<span class="auth-card__eyebrow">欢迎使用</span>
|
||||
<h2>账号入口</h2>
|
||||
</div>
|
||||
<p>先登录,再进入示例工作台。</p>
|
||||
<span class="auth-card__eyebrow">SmartMate 智能日程</span>
|
||||
<h2>欢迎回来</h2>
|
||||
<p>请登录以同步您的学习与生活编排。</p>
|
||||
</div>
|
||||
|
||||
<el-tabs v-model="activePanel" stretch class="auth-tabs">
|
||||
<el-tab-pane label="登录" name="login">
|
||||
<el-form label-position="top" class="auth-form" @submit.prevent="submitLogin">
|
||||
<div class="auth-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="['auth-toggle__btn', { active: activePanel === 'login' }]"
|
||||
@click="activePanel = 'login'"
|
||||
>
|
||||
登 录
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="['auth-toggle__btn', { active: activePanel === 'register' }]"
|
||||
@click="activePanel = 'register'"
|
||||
>
|
||||
注 册
|
||||
</button>
|
||||
<div class="auth-toggle__slider" :style="{ transform: `translateX(${activePanel === 'login' ? '0' : '100%'})` }" />
|
||||
</div>
|
||||
|
||||
<div class="auth-form-container">
|
||||
<Transition name="auth-fade" mode="out-in">
|
||||
<div v-if="activePanel === 'login'" key="login">
|
||||
<el-form label-position="top" class="auth-form" @submit.prevent="submitLogin">
|
||||
<el-form-item label="用户名">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
@@ -156,13 +173,13 @@ async function submitRegister() {
|
||||
:loading="loginLoading"
|
||||
@click="submitLogin"
|
||||
>
|
||||
登录并进入示例页
|
||||
登 录
|
||||
</el-button>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-tab-pane label="注册" name="register">
|
||||
<el-form label-position="top" class="auth-form" @submit.prevent="submitRegister">
|
||||
<div v-else key="register">
|
||||
<el-form label-position="top" class="auth-form" @submit.prevent="submitRegister">
|
||||
<el-form-item label="用户名">
|
||||
<el-input
|
||||
v-model="registerForm.username"
|
||||
@@ -211,8 +228,9 @@ async function submitRegister() {
|
||||
创建账号
|
||||
</el-button>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
@@ -223,149 +241,267 @@ async function submitRegister() {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32px 0;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
background: #f8fafc;
|
||||
background-image:
|
||||
radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.05) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 0%, rgba(96, 165, 250, 0.08) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 100%, rgba(37, 99, 235, 0.05) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 100%, rgba(59, 130, 246, 0.08) 0px, transparent 50%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.auth-page::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
width: 120%;
|
||||
height: 120%;
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||||
opacity: 0.02;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.auth-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(380px, 460px);
|
||||
gap: 24px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.auth-brand,
|
||||
.auth-card {
|
||||
border-radius: 28px;
|
||||
grid-template-columns: 1fr 440px;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
max-width: 1100px;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.auth-brand {
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 680px;
|
||||
padding: 60px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.auth-brand__badge {
|
||||
width: fit-content;
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
background: #e8f2ff;
|
||||
color: #1f5fbf;
|
||||
display: inline-block;
|
||||
padding: 6px 14px;
|
||||
background: #3b82f6;
|
||||
color: #ffffff;
|
||||
border-radius: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 32px;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
|
||||
.auth-brand h1 {
|
||||
margin: 24px 0 16px;
|
||||
max-width: 10em;
|
||||
font-size: clamp(36px, 5vw, 56px);
|
||||
line-height: 1.08;
|
||||
letter-spacing: -0.04em;
|
||||
color: var(--text-main);
|
||||
font-size: clamp(40px, 4vw, 52px);
|
||||
font-weight: 900;
|
||||
color: #0f172a;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.auth-brand p {
|
||||
margin: 0;
|
||||
max-width: 38rem;
|
||||
color: var(--text-secondary);
|
||||
font-size: 16px;
|
||||
font-size: 17px;
|
||||
color: #64748b;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 48px;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.auth-brand__points {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
margin-top: 36px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.auth-brand__points article {
|
||||
padding: 18px 20px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border: 1px solid rgba(17, 24, 39, 0.06);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.auth-brand__points strong {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin-bottom: 6px;
|
||||
color: var(--text-main);
|
||||
font-weight: 800;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.auth-brand__points span {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
padding: 30px 30px 24px;
|
||||
min-height: 680px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
border-radius: 32px;
|
||||
padding: 48px 40px;
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.05),
|
||||
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||
0 20px 25px -5px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.auth-card__header {
|
||||
margin-bottom: 18px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.auth-card__header h2 {
|
||||
margin: 8px 0 8px;
|
||||
font-size: 30px;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.03em;
|
||||
font-size: 28px;
|
||||
font-weight: 850;
|
||||
color: #0f172a;
|
||||
margin: 6px 0 10px;
|
||||
}
|
||||
|
||||
.auth-card__header p {
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.auth-card__eyebrow {
|
||||
color: #1f5fbf;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: #3b82f6;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.auth-tabs {
|
||||
--el-color-primary: var(--brand);
|
||||
/* Custom Toggle Switch */
|
||||
.auth-toggle {
|
||||
display: flex;
|
||||
background: #f1f5f9;
|
||||
border-radius: 14px;
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.auth-toggle__btn {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 10px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.auth-toggle__btn.active {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.auth-toggle__slider {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: calc(50% - 4px);
|
||||
height: calc(100% - 8px);
|
||||
background: #ffffff;
|
||||
border-radius: 11px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
margin-top: 16px;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
:deep(.auth-form .el-form-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.auth-form .el-form-item__label) {
|
||||
font-size: 13px !important;
|
||||
font-weight: 750 !important;
|
||||
color: #475569 !important;
|
||||
margin-bottom: 6px !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
:deep(.auth-form .el-input__wrapper) {
|
||||
background: #f8fafc !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 0 0 1px #e2e8f0 inset !important;
|
||||
padding: 8px 16px !important;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
:deep(.auth-form .el-input__wrapper.is-focus) {
|
||||
background: #ffffff !important;
|
||||
box-shadow: 0 0 0 2px #3b82f6 inset !important;
|
||||
}
|
||||
|
||||
.auth-submit {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
height: 48px;
|
||||
border-radius: 14px;
|
||||
font-weight: 600;
|
||||
height: 52px;
|
||||
margin-top: 12px;
|
||||
border: none;
|
||||
background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
|
||||
border-radius: 14px;
|
||||
background: #0f172a;
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: 750;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.auth-submit:hover {
|
||||
background: #1e293b;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.3);
|
||||
}
|
||||
|
||||
/* Transitions */
|
||||
.auth-fade-enter-active,
|
||||
.auth-fade-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.auth-fade-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
.auth-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.auth-layout {
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.auth-brand,
|
||||
.auth-card {
|
||||
min-height: auto;
|
||||
|
||||
.auth-brand {
|
||||
text-align: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.auth-brand h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.auth-brand p {
|
||||
margin: 0 auto 32px;
|
||||
}
|
||||
|
||||
.auth-brand__points {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.auth-page {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.auth-brand,
|
||||
@media (max-width: 480px) {
|
||||
.auth-card {
|
||||
padding: 22px;
|
||||
border-radius: 22px;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -75,7 +75,7 @@ const quadrantMeta: Record<
|
||||
}
|
||||
|
||||
const pageTitleDate = computed(() => formatHeaderDate(new Date()))
|
||||
const greetingName = computed(() => authStore.lastUsername || 'SmartFlow 用户')
|
||||
const greetingName = computed(() => authStore.lastUsername || 'SmartMate 用户')
|
||||
|
||||
const groupedTasks = computed(() => {
|
||||
const groups: Record<number, TaskItem[]> = { 1: [], 2: [], 3: [], 4: [] }
|
||||
@@ -325,7 +325,8 @@ watch([() => tasks.value.length, () => todayEvents.value.length, pageLoading], a
|
||||
width: calc(100% / var(--dashboard-main-scale));
|
||||
height: calc(100% / var(--dashboard-main-scale));
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-rows: auto 1fr;
|
||||
align-content: start;
|
||||
gap: 10px;
|
||||
transform: scale(var(--dashboard-main-scale));
|
||||
transform-origin: top left;
|
||||
@@ -340,6 +341,8 @@ watch([() => tasks.value.length, () => todayEvents.value.length, pageLoading], a
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(15, 23, 42, 0.05);
|
||||
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
|
||||
flex-shrink: 0;
|
||||
max-height: 72px; /* 锁定高度,防止在布局缩放时发生形变 */
|
||||
}
|
||||
|
||||
.dashboard-topbar__brandline { display: flex; align-items: center; gap: 14px; }
|
||||
|
||||
Reference in New Issue
Block a user