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

Version: 0.7.9.dev.260326

Browse Source 
后端：
1.把最后一块拼图：schedule_refine也搬迁到了agent2，此时agent已经完全解耦。但是它没融入新架构，Codex只尝试把它调整了一部分，回退了一些错误的更改，保持着现在的可运行状态。下次继续改。
2.agent目录先保留，直到refine彻底融入新架构。
3.改善Codex主导的新史山结构:node文件夹里面大量文件，转而改成了module.go+module_tool.go的双文件格局，极大提升架构整洁度和代码可读性。
前端：
1.新开了日历界面，正在保持往前推进。做了很多更改，感觉越来越好了。
This commit is contained in:
Losita
2026-03-26 00:38:17 +08:00
parent aa04bfb452
commit a243154e23
32 changed files with 11481 additions and 1239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
frontend/src/views/AssistantView.vue
View File

@@ -1,60 +1,71 @@
<script setup lang="ts">
import { computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import AssistantPanel from '@/components/dashboard/AssistantPanel.vue'
interface PageSwitchItem {
key: 'dashboard' | 'assistant'
interface SidebarItem {
key: 'home' | 'task' | 'calendar' | 'ai'
label: string
short: string
to: '/dashboard' | '/assistant'
to?: '/dashboard' | '/assistant' | '/schedule'
}
const router = useRouter()
const route = useRoute()
const switchItems: PageSwitchItem[] = [
{
key: 'dashboard',
label: '排程',
short: '排',
to: '/dashboard',
},
{
key: 'assistant',
label: '对话',
short: 'AI',
to: '/assistant',
},
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 activeSwitchKey = computed<PageSwitchItem['key']>(() =>
route.path.startsWith('/assistant') ? 'assistant' : 'dashboard',
)
function handlePageSwitch(targetPath: PageSwitchItem['to']) {
if (route.path !== targetPath) {
router.push(targetPath)
const activeSidebarKey = computed<SidebarItem['key']>(() => {
if (route.path.startsWith('/assistant')) {
return 'ai'
}
if (route.path.startsWith('/schedule')) {
return 'calendar'
}
return 'home'
})
function handleSidebarNavigate(item: SidebarItem) {
// 1. 和首页保持相同行为：已接通路由直接跳转，未接通入口给出明确提示。
// 2. 同路由不重复 push，避免产生冗余导航记录。
// 3. 这样可保证两个页面的侧栏交互预期完全一致。
if (item.to) {
if (route.path !== item.to) {
void router.push(item.to)
}
return
}
ElMessage.info(`${item.label} 页面正在开发中`)
}
</script>
<template>
<main class="assistant-view">
<section class="assistant-view__layout">
<aside class="assistant-view__switch-rail glass-panel">
<button
v-for="item in switchItems"
:key="item.key"
type="button"
class="assistant-view__switch-item"
:class="{ 'assistant-view__switch-item--active': activeSwitchKey === item.key }"
@click="handlePageSwitch(item.to)"
>
<span>{{ item.short }}</span>
<small>{{ item.label }}</small>
</button>
<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>
<AssistantPanel class="assistant-view__panel" view-mode="standalone" />
@@ -65,72 +76,114 @@ function handlePageSwitch(targetPath: PageSwitchItem['to']) {
<style scoped>
.assistant-view {
height: 100vh;
padding: 12px;
padding: 10px;
overflow: hidden;
background: linear-gradient(180deg, #f6f8fb 0%, #eef2f7 100%);
background: #f4f7fb;
}
.assistant-view__layout {
height: calc(100vh - 24px);
height: calc(100vh - 20px);
min-height: 0;
display: grid;
grid-template-columns: minmax(56px, 0.3fr) minmax(0, 6fr);
gap: 12px;
}
.assistant-view__switch-rail {
min-height: 0;
border-radius: 18px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: linear-gradient(180deg, rgba(249, 250, 252, 0.95), rgba(243, 247, 252, 0.98));
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
padding: 14px 7px;
display: grid;
align-content: start;
grid-template-columns: 78px minmax(0, 1fr);
gap: 8px;
align-items: stretch;
}
.assistant-view__switch-item {
border: none;
border-radius: 12px;
background: transparent;
color: #6b7789;
padding: 10px 4px 9px;
cursor: pointer;
.dashboard-sidebar {
height: 100%;
border-radius: 26px;
background: linear-gradient(180deg, #165ca8 0%, #104d8f 100%);
padding: 16px 12px;
display: grid;
justify-items: center;
gap: 4px;
grid-template-rows: auto 1fr auto;
gap: 16px;
}
.assistant-view__switch-item span {
width: 32px;
height: 32px;
border-radius: 10px;
.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;
font-size: 12px;
}
.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;
background: rgba(86, 101, 126, 0.1);
}
.assistant-view__switch-item small {
font-size: 11px;
line-height: 1;
.dashboard-sidebar__nav-item small {
font-size: 10px;
}
.assistant-view__switch-item--active {
color: #335fc2;
background: linear-gradient(180deg, rgba(88, 126, 224, 0.16), rgba(88, 126, 224, 0.08));
}
.assistant-view__switch-item--active span {
background: rgba(58, 95, 184, 0.2);
.dashboard-sidebar__nav-item--active {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.assistant-view__panel {
min-width: 0;
min-height: 0;
height: 100%;
border-radius: 18px;
}
@media (max-width: 980px) {
.assistant-view__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;
}
}
@media (max-width: 720px) {
.assistant-view {
height: auto;
padding: 8px;
overflow: visible;
}
}
</style>

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

@@ -1,9 +1,8 @@
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import AssistantPanel from '@/components/dashboard/AssistantPanel.vue'
import TaskQuadrantCard from '@/components/dashboard/TaskQuadrantCard.vue'
import TodayTimeline from '@/components/dashboard/TodayTimeline.vue'
import { completeTask, createTask, getTasks, undoCompleteTask } from '@/api/task'
@@ -23,12 +22,16 @@ const createTaskLoading = ref(false)
const logoutLoading = ref(false)
const createTaskDialogVisible = ref(false)
const dashboardLayoutRef = ref<HTMLElement | null>(null)
const dashboardMainRef = ref<HTMLElement | null>(null)
const dashboardMainInnerRef = ref<HTMLElement | null>(null)
const dashboardTopbarRef = ref<HTMLElement | null>(null)
const dashboardContentRef = ref<HTMLElement | null>(null)
const dashboardMainScale = ref(1)
const tasks = ref<TaskItem[]>([])
const todayEvents = ref<TodayEvent[]>([])
const sidebarWidth = ref(78)
const assistantWidth = ref(560)
const taskForm = reactive<{
title: string
@@ -44,13 +47,13 @@ interface SidebarItem {
key: 'home' | 'task' | 'calendar' | 'ai'
label: string
short: string
to?: '/dashboard' | '/assistant'
to?: '/dashboard' | '/assistant' | '/schedule'
}
const sidebarItems: SidebarItem[] = [
{ key: 'home', label: '总览', short: '总', to: '/dashboard' },
{ key: 'task', label: '任务', short: '任' },
{ key: 'calendar', label: '日程', short: '程' },
{ key: 'calendar', label: '日程', short: '程', to: '/schedule' },
{ key: 'ai', label: '助手', short: 'AI', to: '/assistant' },
]
@@ -58,6 +61,9 @@ const activeSidebarKey = computed<SidebarItem['key']>(() => {
if (route.path.startsWith('/assistant')) {
return 'ai'
}
if (route.path.startsWith('/schedule')) {
return 'calendar'
}
return 'home'
})
@@ -97,7 +103,9 @@ const pageTitleDate = computed(() => formatHeaderDate(new Date()))
const greetingName = computed(() => authStore.lastUsername || 'SmartFlow 用户')
const layoutStyle = computed(() => ({
'--dashboard-sidebar-width': `${sidebarWidth.value}px`,
'--dashboard-assistant-width': `${assistantWidth.value}px`,
}))
const dashboardMainScaleStyle = computed(() => ({
'--dashboard-main-scale': `${dashboardMainScale.value}`,
}))
const groupedTasks = computed(() => {
@@ -250,41 +258,7 @@ function clampSidebarWidth(nextWidth: number) {
return Math.min(110, Math.max(68, nextWidth))
}
function getAssistantWidthBounds(containerWidth: number, nextSidebarWidth = sidebarWidth.value) {
// 1. 右侧助手区默认按“主区 / 助手区”近似二分来算，贴近用户给出的 DeepSeek 参考布局。
// 2. 只允许在平衡宽度附近做小范围拖拽，避免主区被挤压后卡片内容大面积隐藏。
// 3. 若窗口过窄，则仍保留主区最小可读宽度，优先保证左侧任务与日程信息可见。
const reservedWidth = nextSidebarWidth + 20 + 32
const availableWidth = Math.max(960, containerWidth - reservedWidth)
const balancedWidth = availableWidth / 2
const dragAllowance = Math.min(72, availableWidth * 0.08)
const minWidth = Math.max(440, balancedWidth - dragAllowance)
const maxWidth = Math.max(minWidth, Math.min(760, balancedWidth + dragAllowance))
return {
balancedWidth,
minWidth,
maxWidth,
}
}
function clampAssistantWidth(nextWidth: number, containerWidth = dashboardLayoutRef.value?.getBoundingClientRect().width ?? 1600) {
const { minWidth, maxWidth } = getAssistantWidthBounds(containerWidth)
return Math.min(maxWidth, Math.max(minWidth, nextWidth))
}
function syncAssistantWidthToBalancedSplit() {
const layout = dashboardLayoutRef.value
if (!layout || window.innerWidth <= 1380) {
return
}
const containerWidth = layout.getBoundingClientRect().width
const { balancedWidth } = getAssistantWidthBounds(containerWidth)
assistantWidth.value = clampAssistantWidth(balancedWidth, containerWidth)
}
function startResize(type: 'sidebar' | 'assistant', event: PointerEvent) {
function startResize(type: 'sidebar', event: PointerEvent) {
const layout = dashboardLayoutRef.value
if (!layout || window.innerWidth <= 1380) {
return
@@ -293,26 +267,18 @@ function startResize(type: 'sidebar' | 'assistant', event: PointerEvent) {
const rect = layout.getBoundingClientRect()
const startX = event.clientX
const startSidebarWidth = sidebarWidth.value
const startAssistantWidth = assistantWidth.value
// 1. 拖拽时先记录容器宽度和起始位置，避免每次 move 都重复读布局造成抖动。
// 2. 中间主区域需要保留最小宽度，防止用户把左右面板拖到挤爆内容区。
// 2. 主区域需要保留最小宽度，防止侧栏被拖得过宽后正文不可读。
// 3. 结束时统一解绑事件，避免指针松开后仍残留拖拽状态。
const handlePointerMove = (moveEvent: PointerEvent) => {
const deltaX = moveEvent.clientX - startX
const splitterTotalWidth = 20
const splitterTotalWidth = 10
const minMainWidth = 560
if (type === 'sidebar') {
const nextSidebarWidth = clampSidebarWidth(startSidebarWidth + deltaX)
const maxSidebarWidth = rect.width - assistantWidth.value - splitterTotalWidth - minMainWidth
sidebarWidth.value = Math.min(nextSidebarWidth, Math.max(68, maxSidebarWidth))
return
}
const maxAssistantWidth = rect.width - sidebarWidth.value - splitterTotalWidth - minMainWidth
const nextAssistantWidth = clampAssistantWidth(startAssistantWidth - deltaX, rect.width)
assistantWidth.value = Math.min(nextAssistantWidth, Math.max(440, maxAssistantWidth))
const nextSidebarWidth = clampSidebarWidth(startSidebarWidth + deltaX)
const maxSidebarWidth = rect.width - splitterTotalWidth - minMainWidth
sidebarWidth.value = Math.min(nextSidebarWidth, Math.max(68, maxSidebarWidth))
}
const stopResize = () => {
@@ -326,16 +292,64 @@ function startResize(type: 'sidebar' | 'assistant', event: PointerEvent) {
window.addEventListener('pointerup', stopResize)
}
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. 仅在桌面端启用缩放，小屏仍走原生滚动布局。
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
}
// 预留适中安全边距，优先保证底部卡片完整可见，避免再次出现裁切。
const nextScale = Math.min(1, (availableHeight / naturalHeight) * 0.98)
dashboardMainScale.value = Number(nextScale.toFixed(4))
})
}
onMounted(async () => {
await loadDashboardData()
syncAssistantWidthToBalancedSplit()
window.addEventListener('resize', syncAssistantWidthToBalancedSplit)
await nextTick()
syncDashboardMainScale()
window.addEventListener('resize', syncDashboardMainScale)
})
onBeforeUnmount(() => {
document.body.classList.remove('dashboard-resizing')
window.removeEventListener('resize', syncAssistantWidthToBalancedSplit)
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' },
)
</script>
<template>
@@ -368,82 +382,74 @@ onBeforeUnmount(() => {
<span class="dashboard-splitter__line" />
</div>
<section class="dashboard-main">
<header class="dashboard-topbar glass-panel">
<div>
<div class="dashboard-topbar__brandline">
<strong>AI 智慧日程系统</strong>
<span>{{ pageTitleDate }}</span>
<section ref="dashboardMainRef" class="dashboard-main">
<div ref="dashboardMainInnerRef" class="dashboard-main__scaled" :style="dashboardMainScaleStyle">
<header ref="dashboardTopbarRef" class="dashboard-topbar glass-panel">
<div>
<div class="dashboard-topbar__brandline">
<strong>AI 智慧日程系统</strong>
<span>{{ pageTitleDate }}</span>
</div>
</div>
</div>
<div class="dashboard-topbar__actions">
<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>
<div class="dashboard-topbar__actions">
<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>
</div>
</div>
</div>
</header>
</header>
<div class="dashboard-content page-shell">
<TodayTimeline :events="todayEvents" :loading="scheduleLoading || pageLoading" />
<div ref="dashboardContentRef" class="dashboard-content page-shell">
<TodayTimeline :events="todayEvents" :loading="scheduleLoading || pageLoading" />
<div class="dashboard-actions">
<button type="button" class="dashboard-actions__primary" @click="openCreateTaskDialog">
添加任务
</button>
</div>
<section class="dashboard-quadrants">
<TaskQuadrantCard
v-for="group in quadrantOrder"
:key="group"
:title="quadrantMeta[group].title"
:caption="quadrantMeta[group].caption"
:tone="quadrantMeta[group].tone"
:empty-text="quadrantMeta[group].emptyText"
:count="groupedTasks[group].length"
:tasks="groupedTasks[group]"
:loading="taskLoading || pageLoading"
@toggle="handleTaskToggle"
/>
</section>
<section class="dashboard-import glass-panel">
<div class="dashboard-import__content">
<p class="dashboard-import__eyebrow">课程导入</p>
<h2>导入课表</h2>
<p>导入课表后，可以在安排日程时避开上课时间，后续我会继续把导入流程页接完整。</p>
<button type="button" class="dashboard-import__button" @click="handleCourseImportEntry">
开始导入
<div class="dashboard-actions">
<button type="button" class="dashboard-actions__primary" @click="openCreateTaskDialog">
添加任务
</button>
</div>
<div class="dashboard-import__shape">
<span class="dashboard-import__shape-ring" />
<span class="dashboard-import__shape-core" />
</div>
</section>
<section class="dashboard-quadrants">
<TaskQuadrantCard
v-for="group in quadrantOrder"
:key="group"
:title="quadrantMeta[group].title"
:caption="quadrantMeta[group].caption"
:tone="quadrantMeta[group].tone"
:empty-text="quadrantMeta[group].emptyText"
:count="groupedTasks[group].length"
:tasks="groupedTasks[group]"
:loading="taskLoading || pageLoading"
@toggle="handleTaskToggle"
/>
</section>
<section class="dashboard-import glass-panel">
<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>
</div>
<div class="dashboard-import__shape">
<span class="dashboard-import__shape-ring" />
<span class="dashboard-import__shape-core" />
</div>
</section>
</div>
</div>
</section>
<div
class="dashboard-splitter"
role="separator"
aria-label="调整 AI 助手宽度"
@pointerdown.prevent="startResize('assistant', $event)"
>
<span class="dashboard-splitter__line" />
</div>
<AssistantPanel class="dashboard-assistant" />
</div>
<el-dialog
@@ -494,15 +500,12 @@ onBeforeUnmount(() => {
.dashboard-layout {
--dashboard-sidebar-width: 78px;
--dashboard-assistant-width: 460px;
height: calc(100vh - 20px);
display: grid;
grid-template-columns:
var(--dashboard-sidebar-width)
10px
minmax(0, 1fr)
10px
var(--dashboard-assistant-width);
minmax(0, 1fr);
gap: 8px;
align-items: stretch;
}
@@ -598,12 +601,22 @@ onBeforeUnmount(() => {
.dashboard-main {
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 10px;
overflow: hidden;
}
.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;
grid-template-rows: auto auto;
gap: 10px;
transform: scale(var(--dashboard-main-scale));
transform-origin: top left;
}
.dashboard-topbar {
border-radius: 24px;
padding: 18px 22px;
@@ -674,7 +687,7 @@ onBeforeUnmount(() => {
min-width: 0;
display: grid;
gap: 14px;
overflow-y: auto;
overflow-y: hidden;
overflow-x: hidden;
padding-right: 0;
align-content: start;
@@ -720,6 +733,7 @@ onBeforeUnmount(() => {
position: relative;
z-index: 1;
max-width: 460px;
padding-bottom: 22px;
}
.dashboard-import__eyebrow {
@@ -785,13 +799,6 @@ onBeforeUnmount(() => {
bottom: 2px;
}
.dashboard-assistant {
min-width: 0;
min-height: 0;
height: 100%;
align-self: stretch;
}
.dashboard-dialog :deep(.el-dialog) {
border-radius: 24px;
}
@@ -800,12 +807,6 @@ onBeforeUnmount(() => {
width: 100%;
}
@media (max-width: 1640px) {
.dashboard-layout {
--dashboard-assistant-width: 520px;
}
}
@media (max-width: 1380px) {
.dashboard-layout {
height: calc(100vh - 20px);
@@ -815,11 +816,6 @@ onBeforeUnmount(() => {
.dashboard-splitter {
display: none;
}
.dashboard-assistant {
grid-column: 2;
height: auto;
}
}
@media (max-width: 980px) {
@@ -840,11 +836,20 @@ onBeforeUnmount(() => {
justify-content: center;
}
.dashboard-main,
.dashboard-assistant {
.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;
}

837
frontend/src/views/ScheduleView.vue Normal file
View File

@@ -0,0 +1,837 @@
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import {
applyBatchIntoSchedule,
createTaskClass,
deleteScheduleEntries,
deleteTaskClassItem,
getTaskClassDetail,
getTaskClassList,
getWeekSchedule,
smartPlanning,
smartPlanningMulti,
} from '@/api/scheduleCenter'
import CreateTaskClassDialog from '@/components/schedule/CreateTaskClassDialog.vue'
import TaskClassSidebar from '@/components/schedule/TaskClassSidebar.vue'
import WeekPlanningBoard from '@/components/schedule/WeekPlanningBoard.vue'
import type { ApplyBatchIntoScheduleItem, ScheduleWeekData, ScheduleWeekEvent, TaskClassDetail, TaskClassListItem } from '@/types/schedule'
import { formatHeaderDate } from '@/utils/date'
interface SidebarItem {
key: 'home' | 'task' | 'calendar' | 'ai'
label: string
short: string
to?: '/dashboard' | '/assistant' | '/schedule'
}
interface WeekDayHeader {
dayOfWeek: number
label: string
dateLabel: string
}
const router = useRouter()
const route = useRoute()
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 taskClassLoading = ref(false)
const taskClassDetailLoading = ref(false)
const weekLoading = ref(false)
const smartPlanningLoading = ref(false)
const applyingLoading = ref(false)
const deletingLoading = ref(false)
const createDialogVisible = ref(false)
const createDialogLoading = ref(false)
const taskClasses = ref<TaskClassListItem[]>([])
const expandedTaskClassId = ref<number | null>(null)
const expandedTaskClassDetail = ref<TaskClassDetail | null>(null)
const taskClassMultiSelectMode = ref(false)
const selectedTaskClassIds = ref<number[]>([])
const scheduleSelectionMode = ref(false)
const selectedScheduleEventIds = ref<number[]>([])
const liveWeeks = ref<ScheduleWeekData[]>([])
const previewWeeks = ref<ScheduleWeekData[] | null>(null)
const currentWeek = ref<number | null>(null)
const weekBase = ref<number | null>(null)
const baseMonday = ref<Date | null>(null)
const activeSidebarKey = computed<SidebarItem['key']>(() => {
if (route.path.startsWith('/assistant')) {
return 'ai'
}
if (route.path.startsWith('/schedule')) {
return 'calendar'
}
return 'home'
})
const effectiveSelectedTaskClassIds = computed(() => {
if (taskClassMultiSelectMode.value) {
return selectedTaskClassIds.value
}
return expandedTaskClassId.value ? [expandedTaskClassId.value] : []
})
const currentWeekData = computed(() => {
const source = previewWeeks.value ?? liveWeeks.value
if (!source.length) {
return null
}
const targetWeek = currentWeek.value ?? source[0].week
return source.find((item) => item.week === targetWeek) ?? source[0]
})
const weekHeaders = computed<WeekDayHeader[]>(() => {
const weekdayMap = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
return Array.from({ length: 7 }, (_, index) => {
const dayOfWeek = index + 1
const date = resolveDateByWeekDay(currentWeek.value, dayOfWeek)
return {
dayOfWeek,
label: weekdayMap[index],
dateLabel: date ? `${date.getDate()}日` : '',
}
})
})
const weekLabel = computed(() => {
if (!currentWeek.value) {
return '第--周'
}
return `第${numberToChinese(currentWeek.value)}周`
})
const currentTermLabel = computed(() => {
const now = new Date()
const semester = now.getMonth() + 1 >= 8 ? '秋季学期' : '春季学期'
return `${now.getFullYear()}学年${semester}`
})
const showSmartPlanningButton = computed(() =>
!scheduleSelectionMode.value && effectiveSelectedTaskClassIds.value.length > 0,
)
const showDeleteModeButton = computed(() =>
!scheduleSelectionMode.value && effectiveSelectedTaskClassIds.value.length === 0,
)
const showApplyButton = computed(() =>
!scheduleSelectionMode.value &&
Boolean(previewWeeks.value?.length) &&
effectiveSelectedTaskClassIds.value.length === 1,
)
function handleSidebarNavigate(item: SidebarItem) {
if (item.to) {
if (route.path !== item.to) {
void router.push(item.to)
}
return
}
ElMessage.info(`${item.label} 页面正在开发中`)
}
function startOfWeek(date: Date) {
const next = new Date(date)
const day = next.getDay()
const diff = day === 0 ? -6 : 1 - day
next.setDate(next.getDate() + diff)
next.setHours(0, 0, 0, 0)
return next
}
function resolveDateByWeekDay(week: number | null, dayOfWeek: number) {
if (weekBase.value === null || !baseMonday.value || week === null) {
return null
}
const date = new Date(baseMonday.value)
date.setDate(baseMonday.value.getDate() + (week - weekBase.value) * 7 + (dayOfWeek - 1))
return date
}
function numberToChinese(value: number) {
const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
if (value <= 10) {
return value === 10 ? '十' : digits[value]
}
if (value < 20) {
return `十${digits[value % 10]}`
}
const tens = Math.floor(value / 10)
const units = value % 10
return `${digits[tens]}十${units ? digits[units] : ''}`
}
async function loadTaskClasses() {
taskClassLoading.value = true
try {
taskClasses.value = await getTaskClassList()
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '任务类列表加载失败')
} finally {
taskClassLoading.value = false
}
}
async function loadWeekData(week?: number) {
weekLoading.value = true
try {
const result = await getWeekSchedule(week)
liveWeeks.value = result
if (result[0]?.week && weekBase.value === null) {
weekBase.value = result[0].week
baseMonday.value = startOfWeek(new Date())
}
if (typeof week === 'number') {
currentWeek.value = week
} else if (result[0]?.week) {
currentWeek.value = result[0].week
}
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '周日程加载失败')
} finally {
weekLoading.value = false
}
}
async function loadTaskClassDetail(taskClassId: number) {
taskClassDetailLoading.value = true
try {
expandedTaskClassDetail.value = await getTaskClassDetail(taskClassId)
} catch (error) {
expandedTaskClassDetail.value = null
ElMessage.error(error instanceof Error ? error.message : '任务类详情加载失败')
} finally {
taskClassDetailLoading.value = false
}
}
async function handleActivateTaskClass(taskClassId: number) {
if (taskClassMultiSelectMode.value) {
selectedTaskClassIds.value = selectedTaskClassIds.value.includes(taskClassId)
? selectedTaskClassIds.value.filter((id) => id !== taskClassId)
: [...selectedTaskClassIds.value, taskClassId]
return
}
scheduleSelectionMode.value = false
selectedScheduleEventIds.value = []
previewWeeks.value = null
if (expandedTaskClassId.value === taskClassId) {
expandedTaskClassId.value = null
expandedTaskClassDetail.value = null
return
}
expandedTaskClassId.value = taskClassId
expandedTaskClassDetail.value = null
await loadTaskClassDetail(taskClassId)
}
function handleToggleTaskClassMultiMode() {
taskClassMultiSelectMode.value = !taskClassMultiSelectMode.value
previewWeeks.value = null
scheduleSelectionMode.value = false
selectedScheduleEventIds.value = []
if (taskClassMultiSelectMode.value) {
selectedTaskClassIds.value = expandedTaskClassId.value ? [expandedTaskClassId.value] : []
expandedTaskClassId.value = null
expandedTaskClassDetail.value = null
return
}
selectedTaskClassIds.value = []
}
async function handleDeleteTaskItem(taskItemId: number) {
try {
await deleteTaskClassItem(taskItemId)
ElMessage.success('任务块已删除')
await loadTaskClasses()
if (expandedTaskClassId.value) {
await loadTaskClassDetail(expandedTaskClassId.value)
}
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '删除任务块失败')
}
}
async function handleSmartPlanning() {
const ids = effectiveSelectedTaskClassIds.value
if (ids.length === 0) {
ElMessage.info('请先选择任务类')
return
}
smartPlanningLoading.value = true
try {
previewWeeks.value = ids.length === 1 ? await smartPlanning(ids[0]!) : await smartPlanningMulti(ids)
if (previewWeeks.value[0]?.week) {
currentWeek.value = previewWeeks.value[0].week
}
ElMessage.success(ids.length === 1 ? '已生成粗排预览' : '已生成批量粗排预览')
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '智能粗排失败')
} finally {
smartPlanningLoading.value = false
}
}
function toggleScheduleSelectionMode() {
scheduleSelectionMode.value = !scheduleSelectionMode.value
selectedScheduleEventIds.value = []
}
function handleToggleScheduleEvent(eventId: number) {
selectedScheduleEventIds.value = selectedScheduleEventIds.value.includes(eventId)
? selectedScheduleEventIds.value.filter((id) => id !== eventId)
: [...selectedScheduleEventIds.value, eventId]
}
async function handleDeleteSelectedScheduleEvents() {
const events = currentWeekData.value?.events.filter((event) => selectedScheduleEventIds.value.includes(event.id)) ?? []
if (!events.length) {
ElMessage.info('请先选择要解除安排的格子')
return
}
deletingLoading.value = true
try {
await deleteScheduleEntries(events.map((event) => ({
id: event.id,
delete_course: event.type === 'course',
delete_embedded_task: Boolean(event.embedded_task_info?.id),
})))
ElMessage.success('已完成解除安排')
scheduleSelectionMode.value = false
selectedScheduleEventIds.value = []
previewWeeks.value = null
await loadWeekData(currentWeek.value ?? undefined)
await loadTaskClasses()
if (expandedTaskClassId.value) {
await loadTaskClassDetail(expandedTaskClassId.value)
}
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '解除安排失败')
} finally {
deletingLoading.value = false
}
}
function buildApplyItemsFromPreview(weeks: ScheduleWeekData[]) {
const items: ApplyBatchIntoScheduleItem[] = []
for (const week of weeks) {
for (const event of week.events) {
if (event.status !== 'suggested') {
continue
}
const startSection = (event.order - 1) * 2 + 1
const taskItemId = event.type === 'course' && event.embedded_task_info?.id
? event.embedded_task_info.id
: event.id
items.push({
task_item_id: taskItemId,
week: week.week,
day_of_week: event.day_of_week,
start_section: startSection,
end_section: startSection + Math.max(1, event.span || 2) - 1,
embed_course_event_id: event.type === 'course' ? event.id : 0,
})
}
}
return items
}
async function handleApplyPreview() {
if (!previewWeeks.value?.length || effectiveSelectedTaskClassIds.value.length !== 1) {
ElMessage.info('当前预览暂不支持正式应用')
return
}
const items = buildApplyItemsFromPreview(previewWeeks.value)
if (!items.length) {
ElMessage.info('当前预览没有可应用的建议排程')
return
}
applyingLoading.value = true
try {
await applyBatchIntoSchedule(effectiveSelectedTaskClassIds.value[0]!, items)
ElMessage.success('已正式应用到日程')
previewWeeks.value = null
await loadWeekData(currentWeek.value ?? undefined)
await loadTaskClasses()
if (expandedTaskClassId.value) {
await loadTaskClassDetail(expandedTaskClassId.value)
}
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '正式应用失败')
} finally {
applyingLoading.value = false
}
}
async function handleCreateTaskClass(payload: Parameters<typeof createTaskClass>[0]) {
createDialogLoading.value = true
try {
await createTaskClass(payload)
ElMessage.success('任务类已创建')
createDialogVisible.value = false
await loadTaskClasses()
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '创建任务类失败')
} finally {
createDialogLoading.value = false
}
}
function goPreviousWeek() {
if (currentWeek.value === null) {
return
}
currentWeek.value -= 1
}
function goNextWeek() {
if (currentWeek.value === null) {
return
}
currentWeek.value += 1
}
watch(currentWeek, async (nextWeek, previousWeek) => {
if (nextWeek === null || nextWeek === previousWeek) {
return
}
if (previewWeeks.value?.some((item) => item.week === nextWeek)) {
return
}
if (previewWeeks.value) {
previewWeeks.value = null
}
await loadWeekData(nextWeek)
})
onMounted(async () => {
await Promise.all([loadTaskClasses(), loadWeekData()])
})
</script>
<template>
<main class="schedule-page">
<div class="schedule-layout">
<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>
<section class="schedule-shell">
<header class="schedule-topbar">
<div class="schedule-topbar__brand">
<span class="schedule-topbar__brand-icon" aria-hidden="true">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="2" width="18" height="18" rx="5" fill="currentColor" />
<path d="M7 8H15V9.6H7V8ZM7 11H15V12.6H7V11ZM7 14H12V15.6H7V14Z" fill="white" />
</svg>
</span>
<strong>日程安排中心</strong>
</div>
<div class="schedule-topbar__meta">
<strong>{{ currentTermLabel }}</strong>
<span>当前日期: {{ formatHeaderDate(new Date()) }}</span>
</div>
</header>
<div class="schedule-main">
<TaskClassSidebar
:task-classes="taskClasses"
:loading="taskClassLoading"
:detail-loading="taskClassDetailLoading"
:expanded-task-class-id="expandedTaskClassId"
:expanded-task-class-detail="expandedTaskClassDetail"
:selected-task-class-ids="effectiveSelectedTaskClassIds"
:task-class-multi-select-mode="taskClassMultiSelectMode"
@activate="handleActivateTaskClass"
@toggle-multi-mode="handleToggleTaskClassMultiMode"
@create="createDialogVisible = true"
@delete-item="handleDeleteTaskItem"
/>
<section class="schedule-board-wrap">
<div class="schedule-board__toolbar">
<div class="schedule-board__toolbar-left">
<button
v-if="showDeleteModeButton"
type="button"
class="schedule-board__toolbar-button schedule-board__toolbar-button--ghost"
@click="toggleScheduleSelectionMode"
>
多选
</button>
<button
v-else-if="scheduleSelectionMode"
type="button"
class="schedule-board__toolbar-button schedule-board__toolbar-button--ghost"
@click="toggleScheduleSelectionMode"
>
取消多选
</button>
<button
v-if="showSmartPlanningButton"
type="button"
class="schedule-board__toolbar-button schedule-board__toolbar-button--primary"
:disabled="smartPlanningLoading"
@click="handleSmartPlanning"
>
{{ smartPlanningLoading ? '编排中…' : effectiveSelectedTaskClassIds.length > 1 ? '智能批量编排' : '智能一键编排' }}
</button>
</div>
<div class="schedule-board__toolbar-right">
<button
type="button"
class="schedule-board__toolbar-button schedule-board__toolbar-button--ghost"
@click="goPreviousWeek"
>
上一周
</button>
<button
type="button"
class="schedule-board__toolbar-button schedule-board__toolbar-button--primary"
@click="goNextWeek"
>
下一周
</button>
</div>
</div>
<WeekPlanningBoard
:week-label="weekLabel"
:week-headers="weekHeaders"
:week-data="currentWeekData"
:schedule-selection-mode="scheduleSelectionMode"
:selected-schedule-event-ids="selectedScheduleEventIds"
@toggle-schedule-event="handleToggleScheduleEvent"
/>
<div v-if="showApplyButton || scheduleSelectionMode" class="schedule-board__footer">
<button
v-if="showApplyButton"
type="button"
class="schedule-board__footer-button schedule-board__footer-button--primary"
:disabled="applyingLoading"
@click="handleApplyPreview"
>
{{ applyingLoading ? '应用中…' : '正式应用日程' }}
</button>
<button
v-if="scheduleSelectionMode"
type="button"
class="schedule-board__footer-button schedule-board__footer-button--danger"
:disabled="deletingLoading || selectedScheduleEventIds.length === 0"
@click="handleDeleteSelectedScheduleEvents"
>
{{ deletingLoading ? '处理中…' : '解除安排/删除课程' }}
</button>
</div>
</section>
</div>
</section>
</div>
<CreateTaskClassDialog
v-model="createDialogVisible"
:loading="createDialogLoading"
@submit="handleCreateTaskClass"
/>
</main>
</template>
<style scoped>
.schedule-page {
height: 100vh;
padding: 10px;
overflow: hidden;
background: linear-gradient(180deg, #f6f9fd 0%, #eff4fb 100%);
}
.schedule-layout {
height: calc(100vh - 20px);
display: grid;
grid-template-columns: 78px minmax(0, 1fr);
gap: 8px;
}
.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;
}
.schedule-shell {
min-width: 0;
min-height: 0;
border-radius: 28px;
border: 1px solid rgba(215, 224, 237, 0.84);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.98));
overflow: hidden;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
}
.schedule-topbar {
padding: 14px 24px;
border-bottom: 1px solid rgba(218, 227, 239, 0.92);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.schedule-topbar__brand {
display: inline-flex;
align-items: center;
gap: 16px;
}
.schedule-topbar__brand-icon {
width: 44px;
height: 44px;
border-radius: 14px;
background: linear-gradient(180deg, #1b64cf 0%, #0f56b7 100%);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.schedule-topbar__brand strong {
color: #19263d;
font-size: 20px;
font-weight: 800;
}
.schedule-topbar__meta {
display: grid;
justify-items: end;
gap: 6px;
color: #8493aa;
}
.schedule-topbar__meta strong {
color: #344055;
font-size: 14px;
}
.schedule-topbar__meta span {
font-size: 12px;
}
.schedule-main {
min-width: 0;
min-height: 0;
display: grid;
grid-template-columns: 400px minmax(0, 1fr);
}
.schedule-board-wrap {
min-width: 0;
min-height: 0;
padding: 18px 22px 22px;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 14px;
}
.schedule-board__toolbar {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;
}
.schedule-board__toolbar-left,
.schedule-board__toolbar-right {
display: flex;
gap: 10px;
align-items: center;
}
.schedule-board__toolbar-right {
margin-left: auto;
}
.schedule-board__toolbar-button,
.schedule-board__footer-button {
height: 36px;
border-radius: 10px;
border: 1px solid transparent;
padding: 0 18px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
.schedule-board__toolbar-button--primary,
.schedule-board__footer-button--primary {
background: linear-gradient(180deg, #1d64d1 0%, #1157bd 100%);
color: #ffffff;
}
.schedule-board__toolbar-button--primary:hover,
.schedule-board__footer-button--primary:hover {
background: linear-gradient(180deg, #1757b8 0%, #0f4ea9 100%);
}
.schedule-board__toolbar-button--ghost {
border-color: rgba(27, 96, 208, 0.22);
background: #ffffff;
color: #1e66d4;
}
.schedule-board__toolbar-button--ghost:hover {
border-color: rgba(27, 96, 208, 0.38);
background: #f2f7ff;
}
.schedule-board__footer {
display: flex;
justify-content: flex-end;
gap: 12px;
}
.schedule-board__footer-button--danger {
background: #bb3326;
color: #ffffff;
}
.schedule-board__footer-button--danger:disabled,
.schedule-board__footer-button--primary:disabled,
.schedule-board__toolbar-button:disabled {
opacity: 0.46;
cursor: not-allowed;
}
@media (max-width: 1520px) {
.schedule-main {
grid-template-columns: 360px minmax(0, 1fr);
}
}
@media (max-width: 1180px) {
.schedule-layout {
grid-template-columns: 1fr;
}
.dashboard-sidebar {
display: none;
}
.schedule-main {
grid-template-columns: 1fr;
}
}
</style>