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

700
frontend/src/views/DashboardView.vue
View File

@@ -15,9 +15,9 @@ const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()
const pageLoading = ref(false)
const taskLoading = ref(false)
const scheduleLoading = ref(false)
const pageLoading = ref(true)
const taskLoading = ref(true)
const scheduleLoading = ref(true)
const createTaskLoading = ref(false)
const logoutLoading = ref(false)
const createTaskDialogVisible = ref(false)
@@ -31,8 +31,6 @@ const dashboardMainScale = ref(1)
const tasks = ref<TaskItem[]>([])
const todayEvents = ref<TodayEvent[]>([])
const sidebarWidth = ref(78)
const taskForm = reactive<{
title: string
priority_group: number
@@ -43,29 +41,6 @@ const taskForm = reactive<{
deadline_at: null,
})
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 activeSidebarKey = computed<SidebarItem['key']>(() => {
if (route.path.startsWith('/assistant')) {
return 'ai'
}
if (route.path.startsWith('/schedule')) {
return 'calendar'
}
return 'home'
})
const quadrantOrder = [1, 2, 3, 4] as const
@@ -101,48 +76,26 @@ const quadrantMeta: Record<
const pageTitleDate = computed(() => formatHeaderDate(new Date()))
const greetingName = computed(() => authStore.lastUsername || 'SmartFlow 用户')
const layoutStyle = computed(() => ({
'--dashboard-sidebar-width': `${sidebarWidth.value}px`,
}))
const dashboardMainScaleStyle = computed(() => ({
'--dashboard-main-scale': `${dashboardMainScale.value}`,
}))
const groupedTasks = computed(() => {
const groups: Record<number, TaskItem[]> = {
1: [],
2: [],
3: [],
4: [],
}
const groups: Record<number, TaskItem[]> = { 1: [], 2: [], 3: [], 4: [] }
for (const task of tasks.value) {
if (groups[task.priority_group]) {
groups[task.priority_group].push(task)
}
if (groups[task.priority_group]) groups[task.priority_group].push(task)
}
for (const key of Object.keys(groups)) {
groups[Number(key)].sort((left, right) => {
if (left.is_completed !== right.is_completed) {
return left.is_completed ? 1 : -1
}
if (left.is_completed !== right.is_completed) return left.is_completed ? 1 : -1
return left.id - right.id
})
}
return groups
})
async function loadTasksData() {
taskLoading.value = true
try {
tasks.value = await getTasks()
} catch (error) {
ElMessage.warning(error instanceof Error ? error.message : '任务加载失败')
} finally {
taskLoading.value = false
}
try { tasks.value = await getTasks() }
catch (error) { ElMessage.warning(error instanceof Error ? error.message : '任务加载失败') }
finally { taskLoading.value = false }
}
async function loadScheduleData() {
@@ -150,16 +103,18 @@ async function loadScheduleData() {
try {
const schedules = await getTodaySchedule()
todayEvents.value = schedules.flatMap((item) => item.events).sort((left, right) => left.order - right.order)
} catch (error) {
ElMessage.warning(error instanceof Error ? error.message : '今日日程加载失败')
} finally {
scheduleLoading.value = false
}
} catch (error) { ElMessage.warning(error instanceof Error ? error.message : '今日日程加载失败') }
finally { scheduleLoading.value = false }
}
async function loadDashboardData() {
pageLoading.value = true
await Promise.allSettled([loadTasksData(), loadScheduleData()])
// 锁死最少加载时间，确保骨架屏平稳滑入定型后，再进行内外数据的交叉溶解
const minLoadingTimer = new Promise((resolve) => setTimeout(resolve, 800))
await Promise.allSettled([loadTasksData(), loadScheduleData(), minLoadingTimer])
pageLoading.value = false
}
@@ -172,14 +127,11 @@ async function handleTaskToggle(task: TaskItem) {
ElMessage.success('任务已恢复为未完成')
return
}
const result = await completeTask(task.id)
task.is_completed = result.is_completed
task.status = result.status
ElMessage.success(result.already_completed ? '任务已经是完成状态' : '任务已标记为完成')
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '任务更新失败')
}
} catch (error) { ElMessage.error(error instanceof Error ? error.message : '任务更新失败') }
}
function openCreateTaskDialog() {
@@ -190,11 +142,7 @@ function openCreateTaskDialog() {
}
async function handleCreateTask() {
if (!taskForm.title.trim()) {
ElMessage.warning('请先填写任务标题')
return
}
if (!taskForm.title.trim()) { ElMessage.warning('请先填写任务标题'); return }
createTaskLoading.value = true
try {
const created = await createTask({
@@ -202,120 +150,34 @@ async function handleCreateTask() {
priority_group: taskForm.priority_group,
deadline_at: taskForm.deadline_at ? taskForm.deadline_at.toISOString() : null,
})
tasks.value.unshift({
id: created.id,
user_id: 0,
title: created.title,
priority_group: created.priority_group,
status: created.status,
deadline: created.deadline_at ?? '',
is_completed: false,
})
tasks.value.unshift({ id: created.id, user_id: 0, title: created.title, priority_group: created.priority_group, status: created.status, deadline: created.deadline_at ?? '', is_completed: false })
createTaskDialogVisible.value = false
ElMessage.success('任务已添加')
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '创建任务失败')
} finally {
createTaskLoading.value = false
}
} catch (error) { ElMessage.error(error instanceof Error ? error.message : '创建任务失败') }
finally { createTaskLoading.value = false }
}
async function handleLogout() {
logoutLoading.value = true
try {
await authStore.logout()
ElMessage.success('已安全退出登录')
} catch (error) {
ElMessage.warning(error instanceof Error ? `${error.message}，本地登录态已清除` : '退出接口异常，本地登录态已清除')
} finally {
logoutLoading.value = false
await router.push('/auth')
}
try { await authStore.logout(); ElMessage.success('已安全退出登录') }
catch (error) { ElMessage.warning(error instanceof Error ? `${error.message}，本地登录态已清除` : '退出接口异常，本地登录态已清除') }
finally { logoutLoading.value = false; await router.push('/auth') }
}
function handleCourseImportEntry() {
ElMessage.info('课表导入入口已预留，下一步我可以继续把导入流程页接出来')
}
function handleSidebarNavigate(item: SidebarItem) {
// 1. 已接通路由的入口直接跳转，避免侧栏按钮成为“仅装饰”元素。
// 2. 未接通的入口先给出明确提示，防止用户误以为点击失效。
// 3. 同路由不重复 push，避免产生无意义导航与日志噪音。
if (item.to) {
if (route.path !== item.to) {
void router.push(item.to)
}
return
}
ElMessage.info(`${item.label} 页面正在开发中`)
}
function clampSidebarWidth(nextWidth: number) {
return Math.min(110, Math.max(68, nextWidth))
}
function startResize(type: 'sidebar', event: PointerEvent) {
const layout = dashboardLayoutRef.value
if (!layout || window.innerWidth <= 1380) {
return
}
const rect = layout.getBoundingClientRect()
const startX = event.clientX
const startSidebarWidth = sidebarWidth.value
// 1. 拖拽时先记录容器宽度和起始位置，避免每次 move 都重复读布局造成抖动。
// 2. 主区域需要保留最小宽度，防止侧栏被拖得过宽后正文不可读。
// 3. 结束时统一解绑事件，避免指针松开后仍残留拖拽状态。
const handlePointerMove = (moveEvent: PointerEvent) => {
const deltaX = moveEvent.clientX - startX
const splitterTotalWidth = 10
const minMainWidth = 560
const nextSidebarWidth = clampSidebarWidth(startSidebarWidth + deltaX)
const maxSidebarWidth = rect.width - splitterTotalWidth - minMainWidth
sidebarWidth.value = Math.min(nextSidebarWidth, Math.max(68, maxSidebarWidth))
}
const stopResize = () => {
window.removeEventListener('pointermove', handlePointerMove)
window.removeEventListener('pointerup', stopResize)
document.body.classList.remove('dashboard-resizing')
}
document.body.classList.add('dashboard-resizing')
window.addEventListener('pointermove', handlePointerMove)
window.addEventListener('pointerup', stopResize)
}
function handleCourseImportEntry() { ElMessage.info('课表导入入口已预留') }
function syncDashboardMainScale() {
const main = dashboardMainRef.value
const inner = dashboardMainInnerRef.value
const topbar = dashboardTopbarRef.value
const content = dashboardContentRef.value
if (!main || !inner || !topbar || !content || window.innerWidth <= 980) {
dashboardMainScale.value = 1
return
}
// 1. 先回到 1:1，确保拿到未缩放状态下的真实高度。
// 2. 自然高度按“顶部栏高度 + 内容 scrollHeight + 栅格间距”计算，避免被 1fr 约束低估。
// 3. 仅在桌面端启用缩放，小屏仍走原生滚动布局。
if (!main || !inner || !topbar || !content || window.innerWidth <= 980) { dashboardMainScale.value = 1; return }
dashboardMainScale.value = 1
window.requestAnimationFrame(() => {
const availableHeight = main.clientHeight
const gridGap = 10
const naturalHeight = topbar.getBoundingClientRect().height + content.scrollHeight + gridGap
if (!availableHeight || !naturalHeight) {
dashboardMainScale.value = 1
return
}
// 预留适中安全边距，优先保证底部卡片完整可见，避免再次出现裁切。
if (!availableHeight || !naturalHeight) { dashboardMainScale.value = 1; return }
const nextScale = Math.min(1, (availableHeight / naturalHeight) * 0.98)
dashboardMainScale.value = Number(nextScale.toFixed(4))
})
@@ -329,62 +191,19 @@ onMounted(async () => {
})
onBeforeUnmount(() => {
document.body.classList.remove('dashboard-resizing')
window.removeEventListener('resize', syncDashboardMainScale)
})
watch(
[() => tasks.value.length, () => todayEvents.value.length, pageLoading],
async () => {
await nextTick()
syncDashboardMainScale()
},
{ flush: 'post' },
)
watch(
sidebarWidth,
async () => {
await nextTick()
syncDashboardMainScale()
},
{ flush: 'post' },
)
watch([() => tasks.value.length, () => todayEvents.value.length, pageLoading], async () => {
await nextTick()
syncDashboardMainScale()
}, { flush: 'post' })
</script>
<template>
<main class="dashboard-page">
<div ref="dashboardLayoutRef" class="dashboard-layout" :style="layoutStyle">
<aside class="dashboard-sidebar">
<div class="dashboard-sidebar__brand">S</div>
<nav class="dashboard-sidebar__nav">
<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>
<div
class="dashboard-splitter"
role="separator"
aria-label="调整侧边导航宽度"
@pointerdown.prevent="startResize('sidebar', $event)"
>
<span class="dashboard-splitter__line" />
</div>
<section ref="dashboardMainRef" class="dashboard-main">
<div ref="dashboardMainInnerRef" class="dashboard-main__scaled" :style="dashboardMainScaleStyle">
<header ref="dashboardTopbarRef" class="dashboard-topbar glass-panel">
<section ref="dashboardMainRef" class="dashboard-main">
<div ref="dashboardMainInnerRef" class="dashboard-main__scaled" :style="{ '--dashboard-main-scale': dashboardMainScale }">
<header ref="dashboardTopbarRef" class="dashboard-topbar glass-panel dashboard-item-pop" :style="{ '--anim-delay': '0s' }">
<div>
<div class="dashboard-topbar__brandline">
<strong>AI 智慧日程系统</strong>
@@ -393,14 +212,7 @@ watch(
</div>
<div class="dashboard-topbar__actions">
<button
type="button"
class="dashboard-topbar__logout"
:disabled="logoutLoading"
@click="handleLogout"
>
{{ logoutLoading ? '退出中…' : '登出' }}
</button>
<button type="button" class="dashboard-topbar__logout" :disabled="logoutLoading" @click="handleLogout">{{ logoutLoading ? '退出中...' : '登出' }}</button>
<div class="dashboard-topbar__profile">
<strong>{{ greetingName }}</strong>
<span>{{ greetingName.slice(0, 1).toUpperCase() }}</span>
@@ -409,18 +221,18 @@ watch(
</header>
<div ref="dashboardContentRef" class="dashboard-content page-shell">
<TodayTimeline :events="todayEvents" :loading="scheduleLoading || pageLoading" />
<TodayTimeline class="dashboard-item-pop" :style="{ '--anim-delay': '0.04s' }" :events="todayEvents" :loading="scheduleLoading || pageLoading" />
<div class="dashboard-actions">
<button type="button" class="dashboard-actions__primary" @click="openCreateTaskDialog">
添加任务
</button>
<div class="dashboard-actions dashboard-item-pop" :style="{ '--anim-delay': '0.08s' }">
<button type="button" class="dashboard-actions__primary" @click="openCreateTaskDialog">添加任务</button>
</div>
<section class="dashboard-quadrants">
<TaskQuadrantCard
v-for="group in quadrantOrder"
v-for="(group, index) in quadrantOrder"
:key="group"
class="dashboard-item-pop"
:style="{ '--anim-delay': (0.12 + index * 0.04) + 's' }"
:title="quadrantMeta[group].title"
:caption="quadrantMeta[group].caption"
:tone="quadrantMeta[group].tone"
@@ -432,14 +244,12 @@ watch(
/>
</section>
<section class="dashboard-import glass-panel">
<section class="dashboard-import glass-panel dashboard-item-pop" :style="{ '--anim-delay': '0.28s' }">
<div class="dashboard-import__content">
<p class="dashboard-import__eyebrow">课程导入</p>
<h2>导入课表</h2>
<p>导入课表后，可以在安排日程时避开上课时间，后续我会继续把导入流程页接完整。</p>
<button type="button" class="dashboard-import__button" @click="handleCourseImportEntry">
开始导入
</button>
<p>导入课表后，可以在安排日程时避开上课时间。</p>
<button type="button" class="dashboard-import__button" @click="handleCourseImportEntry">开始导入</button>
</div>
<div class="dashboard-import__shape">
<span class="dashboard-import__shape-ring" />
@@ -450,20 +260,11 @@ watch(
</div>
</section>
</div>
<el-dialog
v-model="createTaskDialogVisible"
title="添加任务"
width="460px"
align-center
class="dashboard-dialog"
>
<el-dialog v-model="createTaskDialogVisible" title="添加任务" width="460px" align-center class="dashboard-dialog">
<el-form label-position="top">
<el-form-item label="任务标题">
<el-input v-model="taskForm.title" maxlength="255" placeholder="例如：完成数据库复习" />
</el-form-item>
<el-form-item label="优先级象限">
<el-select v-model="taskForm.priority_group" class="dashboard-dialog__select">
<el-option :value="1" label="1 - 重要且紧急" />
@@ -472,142 +273,39 @@ watch(
<el-option :value="4" label="4 - 不简单不重要" />
</el-select>
</el-form-item>
<el-form-item label="截止时间">
<el-date-picker
v-model="taskForm.deadline_at"
type="datetime"
placeholder="可选，不设置也可以"
class="dashboard-dialog__select"
/>
<el-date-picker v-model="taskForm.deadline_at" type="datetime" placeholder="可选" class="dashboard-dialog__select" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="createTaskDialogVisible = false">取消</el-button>
<el-button type="primary" :loading="createTaskLoading" @click="handleCreateTask">保存任务</el-button>
</template>
</el-dialog>
</main>
</template>
<style scoped>
.dashboard-page {
height: 100vh;
padding: 10px;
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); }
@keyframes dashboard-item-spring {
0% { opacity: 0; transform: scale(0.9) translateY(20px); }
60% { opacity: 1; transform: scale(1.02) translateY(-2px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
.dashboard-layout {
--dashboard-sidebar-width: 78px;
height: calc(100vh - 20px);
display: grid;
grid-template-columns:
var(--dashboard-sidebar-width)
10px
minmax(0, 1fr);
gap: 8px;
align-items: stretch;
.dashboard-item-pop {
animation: dashboard-item-spring 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
animation-delay: var(--anim-delay, 0s);
transform-origin: center center;
}
.dashboard-sidebar {
height: 100%;
border-radius: 26px;
background: linear-gradient(180deg, #165ca8 0%, #104d8f 100%);
padding: 16px 12px;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 16px;
}
.dashboard-sidebar__brand,
.dashboard-sidebar__settings {
width: 50px;
height: 50px;
border: none;
border-radius: 16px;
background: rgba(255, 255, 255, 0.14);
color: #fff;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dashboard-sidebar__nav {
display: grid;
gap: 12px;
align-content: start;
}
.dashboard-sidebar__nav-item {
width: 54px;
border: none;
border-radius: 16px;
background: transparent;
color: rgba(255, 255, 255, 0.74);
padding: 10px 8px;
display: grid;
justify-items: center;
gap: 5px;
cursor: pointer;
}
.dashboard-sidebar__nav-item span {
width: 32px;
height: 32px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
font-weight: 700;
}
.dashboard-sidebar__nav-item small {
font-size: 10px;
}
.dashboard-sidebar__nav-item--active {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.dashboard-splitter {
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: col-resize;
touch-action: none;
}
.dashboard-splitter__line {
width: 4px;
height: 64px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(145, 163, 188, 0.24), rgba(88, 124, 177, 0.4), rgba(145, 163, 188, 0.24));
transition:
background-color 0.18s ease,
transform 0.18s ease;
}
.dashboard-splitter:hover .dashboard-splitter__line {
transform: scaleX(1.15);
background: linear-gradient(180deg, rgba(104, 140, 194, 0.34), rgba(42, 108, 214, 0.62), rgba(104, 140, 194, 0.34));
}
.dashboard-main {
min-width: 0;
min-height: 0;
overflow: hidden;
}
.dashboard-main { min-width: 0; min-height: 0; overflow: hidden; height: 100%; }
.dashboard-main__scaled {
--dashboard-main-scale: 1;
min-width: 0;
min-height: 0;
width: calc(100% / var(--dashboard-main-scale));
height: calc(100% / var(--dashboard-main-scale));
display: grid;
@@ -618,263 +316,53 @@ watch(
}
.dashboard-topbar {
border-radius: 24px;
padding: 18px 22px;
border-radius: 20px;
padding: 16px 24px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid rgba(17, 24, 39, 0.08);
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.05);
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
}
.dashboard-topbar__brandline {
display: flex;
align-items: center;
gap: 14px;
}
.dashboard-topbar__brandline { display: flex; align-items: center; gap: 14px; }
.dashboard-topbar__brandline strong { font-size: 18px; color: #14233a; }
.dashboard-topbar__brandline span { color: #677588; font-size: 13px; }
.dashboard-topbar__brandline strong {
font-size: 18px;
color: #14233a;
}
.dashboard-topbar__actions { display: flex; align-items: center; gap: 14px; }
.dashboard-topbar__logout { min-width: 88px; height: 38px; border-radius: 13px; border: 1px solid rgba(28, 98, 205, 0.22); background: #f9fbff; color: #1d63cf; cursor: pointer; }
.dashboard-topbar__profile { display: flex; align-items: center; gap: 10px; }
.dashboard-topbar__profile strong { font-size: 13px; }
.dashboard-topbar__profile span { width: 38px; height: 38px; border-radius: 999px; background: #eef3fb; color: #314156; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.dashboard-topbar__brandline span {
color: #677588;
font-size: 13px;
}
.dashboard-content { width: 100%; display: grid; gap: 14px; align-content: start; }
.dashboard-actions { display: flex; justify-content: flex-end; }
.dashboard-actions__primary { height: 42px; padding: 0 20px; border: none; border-radius: 15px; background: #3b82f6; color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); }
.dashboard-topbar__actions {
display: flex;
align-items: center;
gap: 14px;
}
.dashboard-topbar__logout {
min-width: 88px;
height: 38px;
border-radius: 13px;
border: 1px solid rgba(28, 98, 205, 0.22);
background: #f9fbff;
color: #1d63cf;
cursor: pointer;
}
.dashboard-topbar__profile {
display: flex;
align-items: center;
gap: 10px;
}
.dashboard-topbar__profile strong {
font-size: 13px;
}
.dashboard-topbar__profile span {
width: 38px;
height: 38px;
border-radius: 999px;
background: #eef3fb;
color: #314156;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
}
.dashboard-content {
width: 100%;
max-width: none;
min-height: 0;
min-width: 0;
display: grid;
gap: 14px;
overflow-y: hidden;
overflow-x: hidden;
padding-right: 0;
align-content: start;
}
.dashboard-actions {
display: flex;
justify-content: flex-end;
}
.dashboard-actions__primary {
height: 42px;
padding: 0 20px;
border: none;
border-radius: 15px;
background: linear-gradient(180deg, #246ff1 0%, #1a5dc8 100%);
color: #fff;
font-weight: 700;
cursor: pointer;
}
.dashboard-quadrants {
min-width: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
}
.dashboard-quadrants { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.dashboard-import {
border-radius: 26px;
padding: 28px 30px;
min-height: 240px;
background: linear-gradient(135deg, #0f5ca9 0%, #0b4b89 100%);
color: #fff;
border-radius: 24px;
padding: 32px;
min-height: 220px;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.05);
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02);
display: flex;
justify-content: space-between;
gap: 20px;
gap: 24px;
position: relative;
overflow: hidden;
position: relative;
}
.dashboard-import__content {
position: relative;
z-index: 1;
max-width: 460px;
padding-bottom: 22px;
}
.dashboard-import__content { position: relative; z-index: 1; max-width: 460px; }
.dashboard-import__eyebrow { margin: 0 0 10px; color: #3b82f6; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.dashboard-import h2 { margin: 0; font-size: 32px; color: #0f172a; font-weight: 800; }
.dashboard-import p { margin: 14px 0 24px; color: #64748b; font-size: 14px; }
.dashboard-import__button { height: 44px; padding: 0 24px; border: none; border-radius: 12px; background: #3b82f6; color: #ffffff; font-weight: 700; cursor: pointer; }
.dashboard-import__eyebrow {
margin: 0 0 8px;
opacity: 0.76;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 12px;
font-weight: 700;
}
.dashboard-import h2 {
margin: 0;
font-size: 38px;
line-height: 1.08;
letter-spacing: -0.04em;
}
.dashboard-import p {
margin: 12px 0 22px;
color: rgba(255, 255, 255, 0.82);
line-height: 1.7;
font-size: 14px;
}
.dashboard-import__button {
height: 46px;
padding: 0 20px;
border: none;
border-radius: 15px;
background: #fff;
color: #0d55a0;
font-weight: 800;
cursor: pointer;
}
.dashboard-import__shape {
position: relative;
width: 250px;
min-width: 250px;
display: grid;
place-items: center;
}
.dashboard-import__shape-ring,
.dashboard-import__shape-core {
position: absolute;
border-radius: 999px;
border: 14px solid rgba(255, 255, 255, 0.92);
}
.dashboard-import__shape-ring {
width: 168px;
height: 168px;
right: 22px;
bottom: 10px;
}
.dashboard-import__shape-core {
width: 96px;
height: 96px;
right: 0;
bottom: 2px;
}
.dashboard-dialog :deep(.el-dialog) {
border-radius: 24px;
}
.dashboard-dialog__select {
width: 100%;
}
@media (max-width: 1380px) {
.dashboard-layout {
height: calc(100vh - 20px);
grid-template-columns: 78px minmax(0, 1fr);
}
.dashboard-splitter {
display: none;
}
}
@media (max-width: 980px) {
.dashboard-layout {
height: auto;
grid-template-columns: 1fr;
}
.dashboard-sidebar {
height: auto;
grid-template-columns: auto 1fr auto;
grid-template-rows: none;
align-items: center;
}
.dashboard-sidebar__nav {
grid-auto-flow: column;
justify-content: center;
}
.dashboard-main {
grid-column: auto;
}
.dashboard-main__scaled {
width: 100%;
height: 100%;
transform: none;
}
.dashboard-content {
overflow-y: auto;
}
.dashboard-quadrants {
grid-template-columns: 1fr;
}
.dashboard-import {
flex-direction: column;
}
}
@media (max-width: 720px) {
.dashboard-page {
height: auto;
padding: 8px;
overflow: visible;
}
.dashboard-topbar {
flex-direction: column;
align-items: flex-start;
}
.dashboard-topbar__actions,
.dashboard-topbar__brandline {
width: 100%;
justify-content: space-between;
}
}
.dashboard-import__shape { position: absolute; right: -50px; bottom: -50px; width: 220px; height: 220px; opacity: 0.1; pointer-events: none; }
.dashboard-import__shape-ring { position: absolute; inset: 0; border: 40px solid #3b82f6; border-radius: 50%; }
.dashboard-import__shape-core { position: absolute; inset: 80px; background: #3b82f6; border-radius: 50%; }
</style>