workApp/pages/workspace/index.vue

<template>
	<view class="page_workspace">
		<page-header></page-header>
		<view class="workspace_content">
			<!-- 系统列表 -->
			<view class="system_list">
				<view class="section_title">系统列表</view>
				<view class="system_grid">
					<view 
						v-for="(item, index) in systemItems" 
						:key="index" 
						class="system_item"
						@click="handleSystemClick(item)"
					>
						<image :src="item.image" class="system_icon" mode="aspectFit"></image>
						<text class="system_name">{{ item.name }}</text>
					</view>
				</view>
			</view>
			<!-- 校历安排 -->
			<view class="calendar_section">
				<view class="calendar_header">
					<text class="section_title">校历安排</text>
					<text class="view_schedule" @click="handleViewSchedule">查看日程</text>
				</view>
				<!-- 日历工具栏 -->
				<view class="calendar_toolbar">
					<view class="year_month_select">
						<picker :value="yearIndex" :range="yearList" @change="handleYearChange" class="select_item">
							<view class="select_content">
								<text class="select_text">{{ yearList[yearIndex] }}</text>
								<uni-icons type="down" size="20" color="#999999"></uni-icons>
							</view>
						</picker>
						<picker :value="monthIndex" :range="monthList" @change="handleMonthChange" class="select_item">
							<view class="select_content">
								<text class="select_text">{{ monthList[monthIndex] }}</text>
								<uni-icons type="down" size="20" color="#999999"></uni-icons>
							</view>
						</picker>
					</view>
					<view class="week_nav">
						<view class="nav_btn" @click="handlePrevWeek">
							<text class="nav_text">上一周</text>
						</view>
						<view class="nav_btn" @click="handleNextWeek">
							<text class="nav_text">下一周</text>
						</view>
					</view>
				</view>
				<!-- 日历网格 -->
				<view v-if="isLoading" class="loading-container">
					<view class="loading-spinner"></view>
					<text class="loading-text">加载中...</text>
				</view>
				<view v-else class="calendar_grid">
					<view class="calendar_weekday">
						<text v-for="day in weekdays" :key="day" class="weekday_text">{{ day }}</text>
					</view>
					<view class="calendar_days">
						<view v-for="day in calendarDays" :key="day.fullDate" class="day_item"
							:class="{ active: day.isActive, weekend: day.isWeekend, today: day.isToday }" @click="handleDayClick(day)">
							<text class="day_text">{{ day.date }}</text>
							<view class="schedule_dot" :class="{ visible: day.hasSchedule }"></view>
						</view>
					</view>
				</view>
				<!-- 日程列表 -->
				<view class="schedule_list">
					<view class="schedule_title">当日日程</view>
					<no-data v-if="scheduleList.length === 0" text="暂无日程安排" />
					<view 
						v-else 
						v-for="item in scheduleList" 
						:key="item.id" 
						class="schedule_item"
					>
						<view class="schedule_dot"></view>
						<view class="schedule_text_container">
							<text class="schedule_text" :class="{ expanded: expandedItems[item.id] }">{{ item.title }}</text>
							<text 
								v-if="item.title.length > 30" 
								class="toggle_text" 
								@click.stop="toggleExpand(item.id)"
							>{{ expandedItems[item.id] ? '收起' : '更多' }}</text>
						</view>
					</view>
				</view>
				<view class="add_schedule_btn" @click="handleAddSchedule">
					<image src="/static/image/workspace/add_icon.png" class="add_icon" mode="aspectFit"></image>
					<text class="btn_text">新增日程</text>
				</view>
			</view>
		</view>

		<view v-if="showAddScheduleModal" class="modal-overlay" @click="handleCloseModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">新增日程</text>
					<view class="modal-close" @click="handleCloseModal">
						<image src="/static/image/workspace/close.png" class="close-icon" mode="aspectFit"></image>
					</view>
				</view>
				<view class="modal-body">
					<text class="modal-date">{{ currentYear }}-{{ String(currentMonth).padStart(2, '0') }}-{{ String(currentDay).padStart(2, '0') }}日程</text>
					<textarea 
						class="schedule-textarea" 
						v-model="scheduleContent" 
						placeholder="请输入日程内容"
						placeholder-class="textarea-placeholder"
					></textarea>
				</view>
				<view class="modal-footer">
					<view class="modal-btn cancel-btn" @click="handleCloseModal">
						<text>取消</text>
					</view>
					<view class="modal-btn confirm-btn" @click="handleConfirmSchedule">
						<text>确定</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<common-tabbar></common-tabbar>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { useStore } from 'vuex';
import workspaceApi from '@/reqApi/workspace.js';
import PageHeader from '@/components/page-header.vue';
import NoData from '@/components/no-data.vue';

const store = useStore();
const schoolName = ref('');

const systemItems = ref([
	{ name: '精准教学', key:'', image: '/static/image/workspace/icon1.png' },
	{ name: '教师研修', key:'teacherStudy', image: '/static/image/workspace/icon2.png' },
	{ name: '协同备课', key:'', image: '/static/image/workspace/icon3.png' },
	{ name: '材料采集', key:'', image: '/static/image/workspace/icon4.png' },
	{ name: '教师发展', key:'', image: '/static/image/workspace/icon5.png' },
	{ name: '校内通知', key:'notice', image: '/static/image/workspace/icon6.png' },
	{ name: '选择题判分', key:'', image: '/static/image/workspace/icon7.png' },
	{ name: '智能选课', key:'', image: '/static/image/workspace/icon8.png' },
	{ name: '学生学习', key:'', image: '/static/image/workspace/icon9.png' },
	{ name: '基础数据', key:'', image: '/static/image/workspace/icon10.png' }
]);

const weekdays = ['日', '一', '二', '三', '四', '五', '六'];

const calendarDays = ref([]);
const scheduleEvents = ref({});
const isLoading = ref(false);

const today = new Date();
const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;

const currentYear = ref(new Date().getFullYear());
const currentMonth = ref(new Date().getMonth() + 1);
const currentDay = ref(new Date().getDate());

const weekStartDate = ref(null);
const weekEndDate = ref(null);

const yearList = ref([]);
const monthList = ref([]);
const yearIndex = ref(0);
const monthIndex = ref(0);

const expandedItems = ref({});

const toggleExpand = (id) => {
	expandedItems.value[id] = !expandedItems.value[id];
};

const scheduleList = computed(() => {
	const dateKey = `${currentYear.value}-${String(currentMonth.value).padStart(2, '0')}-${String(currentDay.value).padStart(2, '0')}`;
	return scheduleEvents.value[dateKey] || [];
});

const weekDateRange = computed(() => {
	if (!weekStartDate.value || !weekEndDate.value) return '';
	return `${weekStartDate.value.getFullYear()}年${weekStartDate.value.getMonth() + 1}月${weekStartDate.value.getDate()}日 - ${weekEndDate.value.getFullYear()}年${weekEndDate.value.getMonth() + 1}月${weekEndDate.value.getDate()}日`;
});

const generateYearList = () => {
	const years = [];
	for (let i = currentYear.value - 5; i <= currentYear.value + 5; i++) {
		years.push(`${i}年`);
	}
	yearList.value = years;
};

const generateMonthList = () => {
	const months = [];
	for (let i = 1; i <= 12; i++) {
		months.push(`${i}月`);
	}
	monthList.value = months;
};

const getWeekRange = (date) => {
	const d = new Date(date);
	const day = d.getDay();
	const diff = day === 0 ? -6 : 1 - day;
	const monday = new Date(d);
	monday.setDate(d.getDate() + diff);
	monday.setHours(0, 0, 0, 0);
	const sunday = new Date(monday);
	sunday.setDate(monday.getDate() + 6);
	sunday.setHours(23, 59, 59, 999);
	return { monday, sunday };
};

const updateCalendarDays = () => {
	const days = [];
	const { monday } = getWeekRange(new Date(currentYear.value, currentMonth.value - 1, currentDay.value));
	
	weekStartDate.value = monday;
	const sunday = new Date(monday);
	sunday.setDate(monday.getDate() + 6);
	weekEndDate.value = sunday;
	
	for (let i = 0; i < 7; i++) {
		const date = new Date(monday);
		date.setDate(monday.getDate() + i);
		const dayOfWeek = date.getDay();
		const dateKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
		days.push({
			date: date.getDate(),
			fullDate: dateKey,
			year: date.getFullYear(),
			month: date.getMonth() + 1,
			isActive: date.getDate() === currentDay.value && date.getMonth() + 1 === currentMonth.value && date.getFullYear() === currentYear.value,
			isWeekend: dayOfWeek === 0 || dayOfWeek === 6,
			isToday: dateKey === todayStr,
			hasSchedule: !!scheduleEvents.value[dateKey] && scheduleEvents.value[dateKey].length > 0
		});
	}
	calendarDays.value = days;
};

const fetchScheduleList = async () => {
	const { monday, sunday } = getWeekRange(new Date(currentYear.value, currentMonth.value - 1, currentDay.value));
	const startDate = `${monday.getFullYear()}-${String(monday.getMonth() + 1).padStart(2, '0')}-${String(monday.getDate()).padStart(2, '0')}`;
	const endDate = `${sunday.getFullYear()}-${String(sunday.getMonth() + 1).padStart(2, '0')}-${String(sunday.getDate()).padStart(2, '0')}`;
	
	isLoading.value = true;
	try {
		const res = await workspaceApi.getSchedule({ startDate, endDate });
		updateScheduleEvents(res.data);
	} catch (error) {
		console.error('获取日程列表失败:', error);
		uni.showToast({ title: '获取日程失败，请稍后重试', icon: 'none', duration: 3000 });
	} finally {
		isLoading.value = false;
	}
};

const updateScheduleEvents = (data) => {
	Object.keys(scheduleEvents.value).forEach(key => {
		delete scheduleEvents.value[key];
	});
	Object.keys(data).forEach(dateKey => {
		const list = data[dateKey] || [];
		scheduleEvents.value[dateKey] = list.map(item => ({
			id: String(item.id),
			title: item.content || ''
		}));
	});
	updateCalendarDays();
};

const updateYearMonthIndex = () => {
	yearIndex.value = yearList.value.indexOf(`${currentYear.value}年`);
	monthIndex.value = monthList.value.indexOf(`${currentMonth.value}月`);
};

onMounted(() => {
	schoolName.value = store.state.userStore.userInfo.schoolName || '';
	generateYearList();
	generateMonthList();
	updateYearMonthIndex();
	updateCalendarDays();
});

onShow(() => {
	fetchScheduleList();
});

const handleSystemClick = (item) => {
	if (item.key === 'notice') {
		uni.navigateTo({
			url: '/pages/notice/overview/index'
		});
	}else if(item.key == 'teacherStudy'){
		uni.navigateTo({
			url: '/pages/teacherStudy/index'
		});
	} else {
		uni.showToast({ title: `即将打开：${item.name}`, icon: 'none' });
	}
};

const handleViewSchedule = () => {
	uni.navigateTo({	
		url: '/pages/workspace/schedule'
	});
};

const handlePrevWeek = () => {
	const currentDate = new Date(currentYear.value, currentMonth.value - 1, currentDay.value);
	currentDate.setDate(currentDate.getDate() - 7);
	currentYear.value = currentDate.getFullYear();
	currentMonth.value = currentDate.getMonth() + 1;
	currentDay.value = currentDate.getDate();
	updateYearMonthIndex();
	updateCalendarDays();
	fetchScheduleList();
};

const handleNextWeek = () => {
	const currentDate = new Date(currentYear.value, currentMonth.value - 1, currentDay.value);
	currentDate.setDate(currentDate.getDate() + 7);
	currentYear.value = currentDate.getFullYear();
	currentMonth.value = currentDate.getMonth() + 1;
	currentDay.value = currentDate.getDate();
	updateYearMonthIndex();
	updateCalendarDays();
	fetchScheduleList();
};

const handleDayClick = (day) => {
	calendarDays.value.forEach(d => d.isActive = false);
	day.isActive = true;
	currentYear.value = day.year;
	currentMonth.value = day.month;
	currentDay.value = day.date;
	updateYearMonthIndex();
};

const handleYearChange = (e) => {
	yearIndex.value = e.detail.value;
	currentYear.value = parseInt(yearList.value[e.detail.value].replace('年', ''));
	updateCalendarDays();
	fetchScheduleList();
};

const handleMonthChange = (e) => {
	monthIndex.value = e.detail.value;
	currentMonth.value = parseInt(monthList.value[e.detail.value].replace('月', ''));
	updateCalendarDays();
	fetchScheduleList();
};

const showAddScheduleModal = ref(false);
const scheduleContent = ref('');

const handleAddSchedule = () => {
	showAddScheduleModal.value = true;
	scheduleContent.value = '';
};

const handleCloseModal = () => {
	showAddScheduleModal.value = false;
	scheduleContent.value = '';
};

const handleConfirmSchedule = async () => {
	if (!scheduleContent.value.trim()) {
		uni.showToast({ title: '请输入日程内容', icon: 'none' });
		return;
	}
	const scheduleDate = `${currentYear.value}-${String(currentMonth.value).padStart(2, '0')}-${String(currentDay.value).padStart(2, '0')}`;
	try {
		await workspaceApi.saveSchedule({
			content: scheduleContent.value.trim(),
			scheduleDate
		});
		uni.showToast({ title: '添加成功', icon: 'success' });
		showAddScheduleModal.value = false;
		scheduleContent.value = '';
		fetchScheduleList();
	} catch (error) {
		console.error('添加日程失败:', error);
		uni.showToast({ title: '添加日程失败，请稍后重试', icon: 'none', duration: 3000 });
	}
};
</script>

<style lang="scss">
$primary-color: #2E64FA;
$text-primary: #333333;
$text-secondary: #666666;
$text-tertiary: #999999;
$bg-color: #F5F7FA;
$bg-white: #FFFFFF;
$border-color: #F0F0F0;
$header-border: #EEEEEE;

$font-lg: 44rpx;
$font-md: 34rpx;
$font-sm: 32rpx;
$font-xs: 26rpx;
$font-xxs: 24rpx;

$radius-lg: 20rpx;
$radius-md: 12rpx;
$radius-sm: 8rpx;
$radius-circle: 50%;

$spacing-xl: 80rpx;
$spacing-lg: 32rpx;
$spacing-md: 24rpx;
$spacing-sm: 24rpx;
$spacing-xs: 16rpx;
$spacing-xxs: 12rpx;

$shadow-sm: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

@mixin flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

@mixin flex-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@mixin flex-column {
	display: flex;
	flex-direction: column;
	align-items: center;
}

@mixin bg-card {
	background-color: $bg-white;
	border-radius: $radius-lg;
	padding: $spacing-md;
}

@mixin text-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.page_workspace {
	min-height: 100vh;
	background-color: #F8F9FD;
	// padding-bottom: 120rpx;
	// font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
}

.workspace_content {
	padding: 140rpx 24rpx 30rpx 24rpx;
}

// 系统列表
.system_list {
	@include bg-card;
	margin-bottom: $spacing-sm;

	.section_title {
		font-size: $font-sm;
		font-weight: 500;
		color: $text-primary;
		margin-bottom: $spacing-sm;
	}

	.system_grid {
		display: grid;
		grid-template-columns: repeat(4, 130rpx);
		justify-content: space-between;
	}

	.system_item {
		@include flex-column;
		padding: 20rpx 0;

		.system_icon {
			width: 96rpx;
			height: 96rpx;
			margin-bottom: 20rpx;
		}

		.system_name {
			font-size: $font-xxs;
			color: $text-secondary;
		}
	}
}

// 日程
.calendar_section {
	@include bg-card;

	.calendar_header {
		@include flex-between;
		margin-bottom: 32rpx;

		.section_title {
			font-size: $font-sm;
			font-weight: 500;
			color: $text-primary;
		}

		.view_schedule {
			font-size: 28rpx;
			color: $primary-color;
		}
	}

	.calendar_toolbar {
		display: flex;
		gap: 18rpx;
		padding-bottom: 32rpx;

		.year_month_select {
			display: flex;
			gap: 18rpx;
			flex: 1;

			.select_item {
				flex: 1;
				// @include flex-center;
				gap: 8rpx;
				padding: 0;
				height: 72rpx;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #DCDFE6;

				.select_content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 81%;
					padding: 0 16rpx;
					height: 72rpx;
				}

				.select_text {
					font-size: $font-xs;
					color: $text-primary;
				}
			}
		}

		.week_nav {
			display: flex;
			gap: 18rpx;

			.nav_btn {
				width: 122rpx;
				height: 72rpx;
				@include flex-center;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #DCDFE6;

				.nav_text {
					font-size: $font-xs;
					color: $text-secondary;
				}
			}
		}
	}

	.calendar_grid {
		margin-bottom: $spacing-lg;

		.calendar_weekday {
			display: flex;
			margin-bottom: $spacing-xs;

			.weekday_text {
				flex: 1;
				text-align: center;
				font-size: 28rpx;
				color: $text-secondary;
			}
		}

		.calendar_days {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 80rpx;

			.day_item {
				flex-shrink: 0;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 2rpx solid transparent;
				position: relative;

				&.active {
					background-color: rgba(46, 100, 250, 0.1);
					border-color: #2E64FA;

					.day_text {
						color: #2E64FA;
					}
				}

				.day_text {
					font-size: $font-sm;
					color: $text-primary;
				}

				&.weekend:not(.active) {
					.day_text {
						color: #999999;
					}
				}

				.schedule_dot {
					position: absolute;
					bottom: 12rpx;
					width: 8rpx;
					height: 8rpx;
					background-color: transparent;
					border-radius: 50%;
					
					&.visible {
						background-color: #2E64FA;
					}
				}
			}
		}
	}

	.schedule_list {
		margin-bottom: $spacing-lg;
		background: #F9FAFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: $spacing-lg;
		.schedule_title {
			font-size: 28rpx;
			font-weight: 500;
			color: $text-primary;
			margin-bottom: $spacing-xs;
		}

		.schedule_item {
			display: flex;
			align-items: flex-start;
			padding: 24rpx 0;
			border-bottom: 2rpx solid #EBEEF5;

			&:last-child {
				border-bottom: none;
			}

			.schedule_dot {
				width: 16rpx;
				height: 16rpx;
				background-color: $primary-color;
				border-radius: $radius-circle;
				margin-top: 14rpx;
				margin-right: 14rpx;
				flex-shrink: 0;
			}

			.schedule_text_container {
				flex: 1;
				position: relative;
			}

			.schedule_text {
				font-size: 28rpx;
				color: #666666;
				line-height: 1.6;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;

				&.expanded {
					-webkit-line-clamp: unset;
					overflow: visible;
					text-overflow: unset;
				}
			}

			.toggle_text {
				font-size: 24rpx;
				color: #2E64FA;
				float: right;
				margin-top: 14rpx;
				display: inline;
			}
		}
	}

	.add_schedule_btn {
		@include flex-center;
		gap: 16rpx;
		height: 56rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;;
		border: 1px solid #2E64FA;

		.btn_text {
			font-size: 28rpx;
			color: #2E64FA;
			font-weight: 500;
		}

		.add_icon {
			width: 32rpx;
			height: 32rpx;
		}
	}
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.modal-content {
	width: 702rpx;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	overflow: hidden;

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 96rpx;
		padding: 0 40rpx;
		background-color: #F5F7FA;

		.modal-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #303133;
		}

		.modal-close {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.close-icon {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.modal-body {
		padding: 24rpx;

		.modal-date {
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 24rpx;
			display: block;
		}

		.schedule-textarea {
			width: 100%;
			height: 364rpx;
			padding: 20rpx;
			border: 2rpx solid #E8E8E8;
			border-radius: 12rpx;
			font-size: 28rpx;
			color: #333333;
			box-sizing: border-box;
		}

		.textarea-placeholder {
			color: #999999;
		}
	}

	.modal-footer {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 28rpx 40rpx;
		gap: 16rpx;
		border-top: 2rpx solid #EBEEF5;
		.modal-btn {
			height: 72rpx;
			// padding: 0 48rpx;
			width: 136rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			border-radius: 8rpx;
			flex-shrink: 0;

			&.cancel-btn {
				color: #666666;
				background-color: #FFFFFF;
				border: 2rpx solid #DCDFE6;
				height: 68rpx;
			}

			&.confirm-btn {
				color: #FFFFFF;
				background-color: #2E64FA;
				border: none;
			}
		}
	}
}
</style>