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

13
frontend/package-lock.json generated
View File

@@ -845,7 +845,6 @@
"resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
"integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@types/lodash": "*"
}
@@ -874,7 +873,6 @@
"integrity": "sha512-F0R/h2+dsy5wJAUe3tAU6oqa2qbWY5TpNfL/RGmo1y38hiyO1w3x2jPtt76wmuaJI4DQnOBu21cNXQ2STIUUWg==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"undici-types": "~6.21.0"
}
@@ -1524,15 +1522,13 @@
"version": "4.17.23",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
"integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/lodash-es": {
"version": "4.17.23",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz",
"integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/lodash-unified": {
"version": "1.0.3",
@@ -1688,7 +1684,6 @@
"integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
"dev": true,
"license": "MIT",
"peer": true,
"engines": {
"node": ">=12"
},
@@ -1702,7 +1697,6 @@
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"devOptional": true,
"license": "Apache-2.0",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -1730,7 +1724,6 @@
"integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"esbuild": "^0.25.0",
"fdir": "^6.4.4",
@@ -1944,7 +1937,6 @@
"integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
"dev": true,
"license": "MIT",
"peer": true,
"engines": {
"node": ">=12"
},
@@ -2048,7 +2040,6 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.30.tgz",
"integrity": "sha512-hTHLc6VNZyzzEH/l7PFGjpcTvUgiaPK5mdLkbjrTeWSRcEfxFrv56g/XckIYlE9ckuobsdwqd5mk2g1sBkMewg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/compiler-dom": "3.5.30",
"@vue/compiler-sfc": "3.5.30",

132
frontend/src/api/scheduleCenter.ts Normal file
View File

@@ -0,0 +1,132 @@
import http from '@/api/http'
import type { ApiResponse, PlainResponse } from '@/types/api'
import type {
ApplyBatchIntoScheduleItem,
ScheduleDeletePayloadItem,
ScheduleWeekData,
TaskClassCreatePayload,
TaskClassDetail,
TaskClassListItem,
} from '@/types/schedule'
import { extractErrorMessage } from '@/utils/http'
import { createIdempotencyKey } from '@/utils/idempotency'
export async function getWeekSchedule(week?: number) {
try {
const response = await http.get<ApiResponse<ScheduleWeekData[]>>('/schedule/week', {
params: typeof week === 'number' ? { week } : undefined,
})
return response.data.data ?? []
} catch (error) {
throw new Error(extractErrorMessage(error, '周日程加载失败，请稍后重试'))
}
}
export async function getTaskClassList() {
try {
const response = await http.get<ApiResponse<{ task_classes: TaskClassListItem[] }>>('/task-class/list')
return response.data.data?.task_classes ?? []
} catch (error) {
throw new Error(extractErrorMessage(error, '任务类列表加载失败，请稍后重试'))
}
}
export async function getTaskClassDetail(taskClassId: number) {
try {
const response = await http.get<ApiResponse<TaskClassDetail>>('/task-class/get', {
params: {
task_class_id: taskClassId,
},
})
return response.data.data
} catch (error) {
throw new Error(extractErrorMessage(error, '任务类详情加载失败，请稍后重试'))
}
}
export async function createTaskClass(payload: TaskClassCreatePayload, idempotencyKey = createIdempotencyKey('task-class-add')) {
try {
const response = await http.post<PlainResponse>('/task-class/add', payload, {
headers: {
'X-Idempotency-Key': idempotencyKey,
},
})
return response.data
} catch (error) {
throw new Error(extractErrorMessage(error, '创建任务类失败，请稍后重试'))
}
}
export async function smartPlanning(taskClassId: number) {
try {
const response = await http.get<ApiResponse<ScheduleWeekData[]>>('/schedule/smart-planning', {
params: {
task_class_id: taskClassId,
},
})
return response.data.data ?? []
} catch (error) {
throw new Error(extractErrorMessage(error, '智能粗排失败，请稍后重试'))
}
}
export async function smartPlanningMulti(taskClassIds: number[]) {
try {
const response = await http.post<ApiResponse<ScheduleWeekData[]>>('/schedule/smart-planning-multi', {
task_class_ids: taskClassIds,
})
return response.data.data ?? []
} catch (error) {
throw new Error(extractErrorMessage(error, '批量智能粗排失败，请稍后重试'))
}
}
export async function applyBatchIntoSchedule(taskClassId: number, items: ApplyBatchIntoScheduleItem[], idempotencyKey = createIdempotencyKey('schedule-apply')) {
try {
const response = await http.put<PlainResponse>(
'/task-class/apply-batch-into-schedule',
{
task_class_id: taskClassId,
items,
},
{
headers: {
'X-Idempotency-Key': idempotencyKey,
},
},
)
return response.data
} catch (error) {
throw new Error(extractErrorMessage(error, '正式应用日程失败，请稍后重试'))
}
}
export async function deleteScheduleEntries(items: ScheduleDeletePayloadItem[], idempotencyKey = createIdempotencyKey('schedule-delete')) {
try {
const response = await http.delete<PlainResponse>('/schedule/delete', {
data: items,
headers: {
'X-Idempotency-Key': idempotencyKey,
},
})
return response.data
} catch (error) {
throw new Error(extractErrorMessage(error, '解除安排失败，请稍后重试'))
}
}
export async function deleteTaskClassItem(taskItemId: number, idempotencyKey = createIdempotencyKey('task-class-item-delete')) {
try {
const response = await http.delete<PlainResponse>('/task-class/delete-item', {
params: {
task_item_id: taskItemId,
},
headers: {
'X-Idempotency-Key': idempotencyKey,
},
})
return response.data
} catch (error) {
throw new Error(extractErrorMessage(error, '删除任务块失败，请稍后重试'))
}
}

865
frontend/src/components/dashboard/AssistantPanel.vue
View File

File diff suppressed because it is too large Load Diff

305
frontend/src/components/schedule/CreateTaskClassDialog.vue Normal file
View File

@@ -0,0 +1,305 @@
<script setup lang="ts">
import { reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { TaskClassCreatePayload, TaskClassCreateItemPayload } from '@/types/schedule'
const props = defineProps<{
modelValue: boolean
loading?: boolean
}>()
const emit = defineEmits<{
'update:modelValue': [value: boolean]
submit: [payload: TaskClassCreatePayload]
}>()
const form = reactive({
name: '',
start_date: '',
end_date: '',
total_slots: 8,
allow_filler_course: true,
strategy: 'steady',
excluded_slots: [] as number[],
items: [
{ order: 1, content: '', embedded_time: null },
{ order: 2, content: '', embedded_time: null },
{ order: 3, content: '', embedded_time: null },
] as TaskClassCreateItemPayload[],
})
watch(
() => props.modelValue,
(visible) => {
if (!visible) {
return
}
form.name = ''
form.start_date = ''
form.end_date = ''
form.total_slots = 8
form.allow_filler_course = true
form.strategy = 'steady'
form.excluded_slots = []
form.items = [
{ order: 1, content: '', embedded_time: null },
{ order: 2, content: '', embedded_time: null },
{ order: 3, content: '', embedded_time: null },
]
},
)
function addItem() {
form.items.push({
order: form.items.length + 1,
content: '',
embedded_time: null,
})
}
function removeItem(index: number) {
form.items.splice(index, 1)
form.items.forEach((item, itemIndex) => {
item.order = itemIndex + 1
})
}
function handleSubmit() {
const filteredItems = form.items
.map((item, index) => ({
order: index + 1,
content: item.content.trim(),
embedded_time: null,
}))
.filter((item) => item.content)
if (!form.name.trim()) {
ElMessage.warning('请先填写任务类名称')
return
}
if (!form.start_date || !form.end_date) {
ElMessage.warning('请先补齐开始与结束日期')
return
}
if (filteredItems.length === 0) {
ElMessage.warning('至少添加一个任务块内容')
return
}
emit('submit', {
name: form.name.trim(),
start_date: form.start_date,
end_date: form.end_date,
mode: 'auto',
config: {
total_slots: form.total_slots,
allow_filler_course: form.allow_filler_course,
strategy: form.strategy,
excluded_slots: form.excluded_slots,
},
items: filteredItems,
})
}
</script>
<template>
<el-dialog
:model-value="modelValue"
title="创建任务类"
width="720px"
align-center
class="task-class-dialog"
@update:model-value="emit('update:modelValue', $event)"
>
<div class="task-class-dialog__body">
<div class="task-class-dialog__grid">
<label class="task-class-dialog__field">
<span>任务类名称</span>
<el-input v-model="form.name" placeholder="例如：数据结构复习" maxlength="64" />
</label>
<label class="task-class-dialog__field">
<span>编排策略</span>
<el-select v-model="form.strategy">
<el-option value="steady" label="均衡推进" />
<el-option value="rapid" label="快速冲刺" />
</el-select>
</label>
<label class="task-class-dialog__field">
<span>开始日期</span>
<el-date-picker
v-model="form.start_date"
type="date"
value-format="YYYY-MM-DD"
placeholder="选择开始日期"
/>
</label>
<label class="task-class-dialog__field">
<span>结束日期</span>
<el-date-picker
v-model="form.end_date"
type="date"
value-format="YYYY-MM-DD"
placeholder="选择结束日期"
/>
</label>
<label class="task-class-dialog__field">
<span>总节数</span>
<el-input-number v-model="form.total_slots" :min="1" :max="48" />
</label>
<label class="task-class-dialog__field task-class-dialog__field--switch">
<span>允许嵌入水课</span>
<el-switch v-model="form.allow_filler_course" />
</label>
</div>
<div class="task-class-dialog__items">
<div class="task-class-dialog__items-head">
<strong>任务块列表</strong>
<button type="button" class="task-class-dialog__add" @click="addItem">新增任务块</button>
</div>
<div class="task-class-dialog__items-list">
<div v-for="(item, index) in form.items" :key="index" class="task-class-dialog__item">
<span class="task-class-dialog__item-order">{{ index + 1 }}</span>
<el-input v-model="item.content" placeholder="填写任务块内容，例如：树与二叉树" />
<button
type="button"
class="task-class-dialog__item-remove"
:disabled="form.items.length <= 1"
@click="removeItem(index)"
>
删除
</button>
</div>
</div>
</div>
</div>
<template #footer>
<div class="task-class-dialog__footer">
<el-button @click="emit('update:modelValue', false)">取消</el-button>
<el-button type="primary" :loading="loading" @click="handleSubmit">创建任务类</el-button>
</div>
</template>
</el-dialog>
</template>
<style scoped>
.task-class-dialog__body {
display: grid;
gap: 22px;
}
.task-class-dialog__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.task-class-dialog__field {
display: grid;
gap: 8px;
}
.task-class-dialog__field span,
.task-class-dialog__items-head strong {
color: #1d2940;
font-size: 13px;
font-weight: 700;
}
.task-class-dialog__field--switch {
align-content: start;
}
.task-class-dialog__field :deep(.el-input),
.task-class-dialog__field :deep(.el-select),
.task-class-dialog__field :deep(.el-date-editor) {
width: 100%;
}
.task-class-dialog__items {
display: grid;
gap: 14px;
}
.task-class-dialog__items-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.task-class-dialog__add {
height: 34px;
border: 1px solid rgba(28, 98, 206, 0.18);
border-radius: 12px;
background: #f6f9ff;
color: #1d64d2;
font-size: 12px;
font-weight: 700;
padding: 0 14px;
cursor: pointer;
}
.task-class-dialog__items-list {
display: grid;
gap: 10px;
}
.task-class-dialog__item {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
}
.task-class-dialog__item-order {
width: 36px;
height: 36px;
border-radius: 12px;
background: #eef3f8;
color: #354259;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.task-class-dialog__item-remove {
height: 36px;
border: 1px solid rgba(185, 42, 29, 0.16);
border-radius: 12px;
background: #fff6f5;
color: #bd3e2f;
font-size: 12px;
font-weight: 700;
padding: 0 12px;
cursor: pointer;
}
.task-class-dialog__item-remove:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.task-class-dialog__footer {
display: flex;
justify-content: flex-end;
}
@media (max-width: 840px) {
.task-class-dialog__grid {
grid-template-columns: 1fr;
}
}
</style>

419
frontend/src/components/schedule/TaskClassSidebar.vue Normal file
View File

@@ -0,0 +1,419 @@
<script setup lang="ts">
import { computed } from 'vue'
import type { TaskClassDetail, TaskClassListItem } from '@/types/schedule'
const props = defineProps<{
taskClasses: TaskClassListItem[]
loading?: boolean
detailLoading?: boolean
expandedTaskClassId: number | null
expandedTaskClassDetail: TaskClassDetail | null
selectedTaskClassIds: number[]
taskClassMultiSelectMode: boolean
}>()
const emit = defineEmits<{
activate: [taskClassId: number]
toggleMultiMode: []
create: []
deleteItem: [taskItemId: number]
}>()
const taskClassCountLabel = computed(() => `共 ${props.taskClasses.length} 个`)
function isExpanded(taskClassId: number) {
return props.expandedTaskClassId === taskClassId && !props.taskClassMultiSelectMode
}
function isSelected(taskClassId: number) {
return props.selectedTaskClassIds.includes(taskClassId)
}
function formatEmbeddedTime(value: TaskClassDetail['items'][number]['embedded_time']) {
if (!value?.date) {
return '未安排'
}
const date = new Date(value.date)
const month = `${date.getMonth() + 1}`.padStart(2, '0')
const day = `${date.getDate()}`.padStart(2, '0')
return `${month}.${day} ${value.section_from}-${value.section_to}节`
}
</script>
<template>
<aside class="task-class-sidebar">
<div class="task-class-sidebar__header">
<div class="task-class-sidebar__title-row">
<div class="task-class-sidebar__title-wrap">
<span class="task-class-sidebar__title-icon" aria-hidden="true">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.40039 5.10742L7.99902 1.59961L13.5996 5.10742L7.99902 8.61523L2.40039 5.10742Z" fill="currentColor" />
<path d="M2.40039 8.20312L7.99902 11.7109L13.5996 8.20312" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M2.40039 11.2891L7.99902 14.7969L13.5996 11.2891" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<strong>任务类别列表</strong>
</div>
<span class="task-class-sidebar__count">{{ taskClassCountLabel }}</span>
</div>
<button type="button" class="task-class-sidebar__mode" @click="emit('toggleMultiMode')">
{{ taskClassMultiSelectMode ? '取消批量' : '批量选择' }}
</button>
</div>
<div v-if="loading" class="task-class-sidebar__skeleton">
<div v-for="index in 4" :key="index" class="task-class-sidebar__skeleton-item" />
</div>
<div v-else class="task-class-sidebar__list">
<article
v-for="taskClass in taskClasses"
:key="taskClass.id"
class="task-class-card"
:class="{
'task-class-card--expanded': isExpanded(taskClass.id),
'task-class-card--selected': isSelected(taskClass.id),
}"
>
<button type="button" class="task-class-card__summary" @click="emit('activate', taskClass.id)">
<span
v-if="taskClassMultiSelectMode"
class="task-class-card__selector"
:class="{ 'task-class-card__selector--active': isSelected(taskClass.id) }"
aria-hidden="true"
/>
<div class="task-class-card__content">
<strong>{{ taskClass.name }}</strong>
<span>{{ taskClass.total_slots }}节课</span>
</div>
<span class="task-class-card__corner" aria-hidden="true">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.22559 3.94922H12.0498V10.7734H10.7998V6.08301L4.3916 12.4912L3.50781 11.6074L9.91602 5.19922H5.22559V3.94922Z" fill="currentColor" />
</svg>
</span>
</button>
<div v-if="isExpanded(taskClass.id)" class="task-class-card__detail">
<div v-if="detailLoading" class="task-class-card__detail-loading">正在载入任务块…</div>
<div v-else-if="expandedTaskClassDetail" class="task-class-card__detail-list">
<div
v-for="item in expandedTaskClassDetail.items"
:key="item.order"
class="task-class-card__detail-item"
>
<span class="task-class-card__detail-order">{{ item.order }}</span>
<span class="task-class-card__detail-text">{{ item.content }}</span>
<span
class="task-class-card__detail-status"
:class="{ 'task-class-card__detail-status--arranged': item.embedded_time }"
>
{{ formatEmbeddedTime(item.embedded_time) }}
</span>
<button
type="button"
class="task-class-card__detail-delete"
aria-label="删除任务块"
:disabled="typeof item.id !== 'number'"
@click="typeof item.id === 'number' && emit('deleteItem', item.id)"
>
×
</button>
</div>
</div>
</div>
</article>
<button type="button" class="task-class-sidebar__create" @click="emit('create')">
<span class="task-class-sidebar__create-icon" aria-hidden="true">＋</span>
<span>点击新建任务类</span>
</button>
</div>
</aside>
</template>
<style scoped>
.task-class-sidebar {
min-width: 0;
min-height: 0;
height: 100%;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
border-right: 1px solid rgba(196, 209, 227, 0.55);
background: linear-gradient(180deg, rgba(251, 253, 255, 0.96), rgba(247, 250, 254, 0.98));
}
.task-class-sidebar__header {
padding: 16px 24px 14px;
border-bottom: 1px solid rgba(214, 223, 238, 0.68);
display: grid;
gap: 12px;
}
.task-class-sidebar__title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.task-class-sidebar__title-wrap {
display: inline-flex;
align-items: center;
gap: 10px;
color: #1f2c42;
}
.task-class-sidebar__title-wrap strong {
font-size: 15px;
font-weight: 800;
}
.task-class-sidebar__title-icon {
width: 16px;
height: 16px;
display: inline-flex;
color: #165fd0;
}
.task-class-sidebar__count {
padding: 5px 12px;
border-radius: 10px;
background: #eef3f9;
color: #75839a;
font-size: 12px;
line-height: 1;
}
.task-class-sidebar__mode {
height: 34px;
border: 1px solid rgba(25, 95, 213, 0.18);
border-radius: 12px;
background: #f6f9ff;
color: #1d64d2;
font-size: 12px;
font-weight: 700;
justify-self: start;
padding: 0 14px;
cursor: pointer;
transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
.task-class-sidebar__mode:hover {
border-color: rgba(25, 95, 213, 0.34);
background: #edf4ff;
}
.task-class-sidebar__list,
.task-class-sidebar__skeleton {
min-height: 0;
overflow-y: auto;
padding: 24px;
display: grid;
align-content: start;
gap: 14px;
}
.task-class-sidebar__skeleton-item {
height: 120px;
border-radius: 24px;
background: linear-gradient(90deg, rgba(234, 239, 246, 0.9), rgba(248, 251, 255, 1), rgba(234, 239, 246, 0.9));
background-size: 200% 100%;
animation: task-class-skeleton 1.25s linear infinite;
}
.task-class-card {
border-radius: 24px;
border: 1px solid rgba(216, 225, 238, 0.9);
background: linear-gradient(180deg, #fdfefe 0%, #f8fbff 100%);
box-shadow: 0 10px 22px rgba(19, 51, 107, 0.04);
overflow: hidden;
}
.task-class-card--selected {
border-color: rgba(28, 98, 206, 0.28);
box-shadow: 0 14px 24px rgba(22, 95, 208, 0.08);
}
.task-class-card__summary {
width: 100%;
border: none;
background: transparent;
padding: 18px 20px 18px 18px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 12px;
align-items: start;
text-align: left;
cursor: pointer;
}
.task-class-card__summary:hover .task-class-card__corner {
background: #edf4ff;
color: #2067d5;
}
.task-class-card__selector {
width: 16px;
height: 16px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid rgba(148, 163, 184, 0.55);
background: #ffffff;
}
.task-class-card__selector--active {
border-color: #1e66d4;
background: #1e66d4;
box-shadow: inset 0 0 0 3px #ffffff;
}
.task-class-card__content {
min-width: 0;
display: grid;
gap: 8px;
}
.task-class-card__content strong {
color: #182741;
font-size: 16px;
line-height: 1.35;
font-weight: 800;
}
.task-class-card__content span {
color: #71819a;
font-size: 13px;
}
.task-class-card__corner {
width: 48px;
height: 48px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(246, 249, 253, 0.9);
color: #1e66d4;
transition: background-color 0.16s ease, color 0.16s ease;
}
.task-class-card__detail {
padding: 0 14px 14px;
}
.task-class-card__detail-loading {
padding: 14px 12px 10px;
color: #7b88a1;
font-size: 13px;
}
.task-class-card__detail-list {
display: grid;
gap: 6px;
}
.task-class-card__detail-item {
min-width: 0;
padding: 10px 12px;
border-radius: 16px;
border: 1px solid rgba(197, 209, 226, 0.8);
background: rgba(255, 255, 255, 0.92);
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto 24px;
gap: 10px;
align-items: center;
}
.task-class-card__detail-order {
color: #17253d;
font-weight: 700;
text-align: center;
}
.task-class-card__detail-text {
min-width: 0;
color: #1e293b;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.task-class-card__detail-status {
padding: 4px 10px;
border-radius: 999px;
background: #f1f5f9;
color: #74839a;
font-size: 12px;
}
.task-class-card__detail-status--arranged {
background: #dcf4bd;
color: #486a18;
}
.task-class-card__detail-delete {
width: 24px;
height: 24px;
border: none;
border-radius: 999px;
background: #bb3326;
color: #ffffff;
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.task-class-card__detail-delete:disabled {
opacity: 0.32;
cursor: not-allowed;
}
.task-class-sidebar__create {
min-height: 108px;
border: 1px dashed rgba(204, 216, 232, 0.92);
border-radius: 24px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(249, 251, 255, 0.98));
color: #b1bccd;
display: grid;
justify-items: center;
align-content: center;
gap: 10px;
cursor: pointer;
transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
.task-class-sidebar__create:hover {
border-color: rgba(25, 95, 213, 0.22);
background: #f7fbff;
color: #6d7f99;
}
.task-class-sidebar__create-icon {
width: 24px;
height: 24px;
border-radius: 999px;
border: 1px solid currentColor;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
}
@keyframes task-class-skeleton {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
</style>

327
frontend/src/components/schedule/WeekPlanningBoard.vue Normal file
View File

@@ -0,0 +1,327 @@
<script setup lang="ts">
import { computed } from 'vue'
import type { ScheduleWeekData, ScheduleWeekEvent } from '@/types/schedule'
interface WeekDayHeader {
dayOfWeek: number
label: string
dateLabel: string
}
interface SectionSlot {
order: number
title: string
timeRange: string
}
const props = defineProps<{
weekLabel: string
weekHeaders: WeekDayHeader[]
weekData: ScheduleWeekData | null
scheduleSelectionMode: boolean
selectedScheduleEventIds: number[]
}>()
const emit = defineEmits<{
toggleScheduleEvent: [eventId: number]
}>()
const sectionSlots: SectionSlot[] = [
{ order: 1, title: '1-2', timeRange: '08:00\n09:40' },
{ order: 2, title: '3-4', timeRange: '10:15\n11:55' },
{ order: 3, title: '5-6', timeRange: '14:00\n15:40' },
{ order: 4, title: '7-8', timeRange: '16:15\n17:55' },
{ order: 5, title: '9-10', timeRange: '19:00\n20:40' },
{ order: 6, title: '11-12', timeRange: '20:50\n22:30' },
]
const eventLookup = computed(() => {
const map = new Map<string, ScheduleWeekEvent>()
for (const event of props.weekData?.events ?? []) {
map.set(`${event.day_of_week}-${event.order}`, event)
}
return map
})
function resolveEvent(dayOfWeek: number, order: number) {
return eventLookup.value.get(`${dayOfWeek}-${order}`)
}
function isSelected(eventId: number) {
return props.selectedScheduleEventIds.includes(eventId)
}
function resolveEventTone(event?: ScheduleWeekEvent) {
if (!event || event.type === 'empty') {
return 'empty'
}
if (event.type === 'course') {
return 'course'
}
const toneByOrder: Record<number, string> = {
1: 'amber',
2: 'mint',
3: 'emerald',
4: 'rose',
5: 'violet',
6: 'sky',
}
return toneByOrder[event.order] ?? 'task'
}
function resolveCellTitle(event?: ScheduleWeekEvent) {
if (!event || event.type === 'empty') {
return '空'
}
return event.name
}
function resolveCellMeta(event?: ScheduleWeekEvent) {
if (!event || event.type === 'empty') {
return ''
}
return event.location || '未定'
}
</script>
<template>
<section class="planning-board">
<header class="planning-board__header">
<strong>{{ weekLabel }}</strong>
</header>
<div class="planning-board__grid">
<div class="planning-board__corner" />
<div v-for="header in weekHeaders" :key="header.dayOfWeek" class="planning-board__day-head">
<span>{{ header.label }}</span>
<small>{{ header.dateLabel }}</small>
</div>
<template v-for="slot in sectionSlots" :key="slot.order">
<div class="planning-board__time-cell">
<strong>{{ slot.title }}</strong>
<small>{{ slot.timeRange }}</small>
</div>
<article
v-for="header in weekHeaders"
:key="`${header.dayOfWeek}-${slot.order}`"
class="planning-board__cell"
:class="[
`planning-board__cell--${resolveEventTone(resolveEvent(header.dayOfWeek, slot.order))}`,
{
'planning-board__cell--selectable': scheduleSelectionMode && resolveEvent(header.dayOfWeek, slot.order)?.type !== 'empty',
'planning-board__cell--selected': resolveEvent(header.dayOfWeek, slot.order) && isSelected(resolveEvent(header.dayOfWeek, slot.order)!.id),
},
]"
>
<button
v-if="scheduleSelectionMode && resolveEvent(header.dayOfWeek, slot.order)?.type !== 'empty'"
type="button"
class="planning-board__checkbox"
:class="{ 'planning-board__checkbox--active': isSelected(resolveEvent(header.dayOfWeek, slot.order)!.id) }"
@click="emit('toggleScheduleEvent', resolveEvent(header.dayOfWeek, slot.order)!.id)"
/>
<template v-if="resolveEvent(header.dayOfWeek, slot.order)">
<div class="planning-board__cell-main">
<strong>{{ resolveCellTitle(resolveEvent(header.dayOfWeek, slot.order)) }}</strong>
<span>{{ resolveCellMeta(resolveEvent(header.dayOfWeek, slot.order)) }}</span>
</div>
</template>
</article>
</template>
</div>
</section>
</template>
<style scoped>
.planning-board {
min-width: 0;
min-height: 0;
border-radius: 28px;
border: 1px solid rgba(214, 223, 236, 0.82);
background: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(248, 251, 255, 0.98));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
.planning-board__header {
padding: 18px 28px 16px;
border-bottom: 1px solid rgba(221, 229, 240, 0.86);
color: #1f2b42;
font-size: 18px;
}
.planning-board__grid {
min-width: 0;
display: grid;
grid-template-columns: 74px repeat(7, minmax(0, 1fr));
gap: 10px 12px;
padding: 28px 24px 24px;
}
.planning-board__corner {
min-height: 1px;
}
.planning-board__day-head {
display: grid;
justify-items: center;
gap: 4px;
color: #8ca0bd;
}
.planning-board__day-head span {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.08em;
}
.planning-board__day-head small {
font-size: 12px;
}
.planning-board__time-cell {
min-height: 112px;
display: grid;
align-content: center;
justify-items: end;
color: #9aacbf;
padding-right: 8px;
}
.planning-board__time-cell strong {
font-size: 15px;
color: #8da0bc;
}
.planning-board__time-cell small {
white-space: pre-line;
text-align: right;
line-height: 1.35;
font-size: 11px;
}
.planning-board__cell {
position: relative;
min-height: 112px;
border-radius: 22px;
border: 1px solid rgba(228, 234, 243, 0.92);
padding: 18px 14px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
.planning-board__cell-main {
display: grid;
gap: 10px;
}
.planning-board__cell-main strong {
color: #7387a3;
font-size: 15px;
line-height: 1.35;
font-weight: 700;
}
.planning-board__cell-main span {
color: #9badc5;
font-size: 12px;
}
.planning-board__cell--course {
background: #acd6f4;
}
.planning-board__cell--course .planning-board__cell-main strong,
.planning-board__cell--course .planning-board__cell-main span {
color: #2576cc;
}
.planning-board__cell--amber {
background: #ffe58b;
}
.planning-board__cell--amber .planning-board__cell-main strong,
.planning-board__cell--amber .planning-board__cell-main span {
color: #7d6917;
}
.planning-board__cell--mint {
background: #d7f7a7;
}
.planning-board__cell--mint .planning-board__cell-main strong,
.planning-board__cell--mint .planning-board__cell-main span,
.planning-board__cell--emerald .planning-board__cell-main strong,
.planning-board__cell--emerald .planning-board__cell-main span {
color: #72a91d;
}
.planning-board__cell--emerald {
background: #d3f3ac;
}
.planning-board__cell--rose {
background: #f6dfe2;
}
.planning-board__cell--rose .planning-board__cell-main strong,
.planning-board__cell--rose .planning-board__cell-main span {
color: #e6696e;
}
.planning-board__cell--violet {
background: #e9dcfb;
}
.planning-board__cell--sky {
background: #d8ecfb;
}
.planning-board__cell--empty {
background: #f8fbff;
}
.planning-board__cell--selectable {
cursor: pointer;
}
.planning-board__cell--selected {
box-shadow: inset 0 0 0 2px rgba(32, 102, 212, 0.52);
}
.planning-board__checkbox {
position: absolute;
top: 16px;
right: 16px;
width: 20px;
height: 20px;
border-radius: 6px;
border: 1px solid rgba(118, 133, 160, 0.46);
background: rgba(255, 255, 255, 0.92);
cursor: pointer;
}
.planning-board__checkbox--active {
border-color: #1e66d4;
background: #1e66d4;
box-shadow: inset 0 0 0 3px #ffffff;
}
@media (max-width: 1560px) {
.planning-board__grid {
grid-template-columns: 64px repeat(7, minmax(118px, 1fr));
}
}
</style>

9
frontend/src/router/index.ts
View File

@@ -4,6 +4,7 @@ import { useAuthStore } from '@/stores/auth'
import AuthView from '@/views/AuthView.vue'
import AssistantView from '@/views/AssistantView.vue'
import DashboardView from '@/views/DashboardView.vue'
import ScheduleView from '@/views/ScheduleView.vue'
const router = createRouter({
history: createWebHistory(),
@@ -36,6 +37,14 @@ const router = createRouter({
requiresAuth: true,
},
},
{
path: '/schedule',
name: 'schedule',
component: ScheduleView,
meta: {
requiresAuth: true,
},
},
],
})

99
frontend/src/types/schedule.ts Normal file
View File

@@ -0,0 +1,99 @@
export type ScheduleEventType = 'course' | 'task' | 'empty'
export interface ScheduleEmbeddedTaskInfo {
id: number
name: string
type: string
}
export interface ScheduleWeekEvent {
id: number
order: number
day_of_week: number
name: string
start_time: string
end_time: string
location: string
type: ScheduleEventType | string
span: number
status?: string
embedded_task_info: ScheduleEmbeddedTaskInfo
}
export interface ScheduleWeekData {
week: number
events: ScheduleWeekEvent[]
}
export interface TaskClassListItem {
id: number
name: string
mode: string
strategy: string
start_date: string
end_date: string
total_slots: number
}
export interface TaskClassEmbeddedTime {
date: string
section_from: number
section_to: number
}
export interface TaskClassDetailItem {
id?: number
order: number
content: string
embedded_time: TaskClassEmbeddedTime | null
}
export interface TaskClassConfig {
total_slots: number
allow_filler_course: boolean
strategy: string
excluded_slots: number[]
}
export interface TaskClassDetail {
name: string
start_date: string
end_date: string
mode: string
config: TaskClassConfig
items: TaskClassDetailItem[]
}
export interface TaskClassCreateItemPayload {
order: number
content: string
embedded_time: TaskClassEmbeddedTime | null
}
export interface TaskClassCreatePayload {
name: string
start_date: string
end_date: string
mode: string
config: TaskClassConfig
items: TaskClassCreateItemPayload[]
}
export interface SmartPlanningMultiPayload {
task_class_ids: number[]
}
export interface ApplyBatchIntoScheduleItem {
task_item_id: number
week: number
day_of_week: number
start_section: number
end_section: number
embed_course_event_id: number
}
export interface ScheduleDeletePayloadItem {
id: number
delete_course: boolean
delete_embedded_task: boolean
}

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>