增加日程提醒
This commit is contained in:
@@ -0,0 +1,991 @@
|
||||
<template>
|
||||
<div class="schedule-page">
|
||||
<!-- 页头 -->
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h2>日程管理</h2>
|
||||
<p>按日历安排个人日程，跟进待办完成情况</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-radio-group v-model="viewMode">
|
||||
<el-radio-button value="calendar">日历</el-radio-button>
|
||||
<el-radio-button value="list">列表</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-button type="primary" :icon="Plus" @click="openCreate()"
|
||||
>新建日程</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">今日待办</div>
|
||||
<div class="stat-value">{{ stats.today_total || 0 }}</div>
|
||||
<div class="stat-sub">已完成 {{ stats.today_done || 0 }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">本周日程</div>
|
||||
<div class="stat-value">{{ stats.week_total || 0 }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">本月日程</div>
|
||||
<div class="stat-value">{{ stats.month_total || 0 }}</div>
|
||||
<div class="stat-sub">已完成 {{ stats.month_done || 0 }}</div>
|
||||
</div>
|
||||
<div class="stat-card" :class="{ danger: (stats.overdue || 0) > 0 }">
|
||||
<div class="stat-label">逾期未完成</div>
|
||||
<div class="stat-value">{{ stats.overdue || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日历视图 -->
|
||||
<div v-if="viewMode === 'calendar'" class="calendar-layout">
|
||||
<div class="calendar-card">
|
||||
<div class="calendar-toolbar">
|
||||
<div class="toolbar-left">
|
||||
<el-button :icon="ArrowLeft" circle @click="changeMonth(-1)" />
|
||||
<span class="month-title"
|
||||
>{{ calendarYear }} 年 {{ calendarMonth }} 月</span
|
||||
>
|
||||
<el-button :icon="ArrowRight" circle @click="changeMonth(1)" />
|
||||
<el-button @click="goToday">今天</el-button>
|
||||
</div>
|
||||
<el-radio-group
|
||||
v-model="calendarStatus"
|
||||
size="small"
|
||||
@change="loadCalendarData"
|
||||
>
|
||||
<el-radio-button value="">全部</el-radio-button>
|
||||
<el-radio-button value="0">待办</el-radio-button>
|
||||
<el-radio-button value="1">已完成</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="calendar-week-header">
|
||||
<div v-for="w in weekNames" :key="w" class="week-name">{{ w }}</div>
|
||||
</div>
|
||||
<div class="calendar-grid">
|
||||
<div
|
||||
v-for="cell in calendarCells"
|
||||
:key="cell.date"
|
||||
class="calendar-cell"
|
||||
:class="{
|
||||
'other-month': !cell.inMonth,
|
||||
today: cell.isToday,
|
||||
selected: cell.date === selectedDate,
|
||||
'has-items': cell.items.length > 0
|
||||
}"
|
||||
@click="selectedDate = cell.date"
|
||||
@dblclick="openCreate(cell.date)"
|
||||
>
|
||||
<div class="cell-date">
|
||||
<span class="day-num">{{ cell.day }}</span>
|
||||
<span v-if="cell.isToday" class="today-tag">今</span>
|
||||
<span v-else-if="cell.day === 1" class="month-tag"
|
||||
>{{ cell.month }}月</span
|
||||
>
|
||||
</div>
|
||||
<div class="cell-items">
|
||||
<div
|
||||
v-for="item in cell.items.slice(0, 3)"
|
||||
:key="item.id"
|
||||
class="cell-item"
|
||||
:style="{ '--item-color': item.color }"
|
||||
:title="item.title"
|
||||
@click.stop="selectedDate = cell.date"
|
||||
>
|
||||
<span v-if="item.all_day === 0" class="item-time">{{
|
||||
item.start_time
|
||||
}}</span>
|
||||
<span class="item-title" :class="{ done: item.status === 1 }">{{
|
||||
item.title
|
||||
}}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="cell.items.length > 3"
|
||||
class="cell-more"
|
||||
@click.stop="selectedDate = cell.date"
|
||||
>
|
||||
还有 {{ cell.items.length - 3 }} 项
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选中日期侧栏 -->
|
||||
<div class="day-panel">
|
||||
<div class="day-panel-header">
|
||||
<div>
|
||||
<div class="day-title">{{ selectedDateLabel }}</div>
|
||||
<div class="day-sub">{{ selectedItems.length }} 项日程</div>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:icon="Plus"
|
||||
@click="openCreate(selectedDate)"
|
||||
>新增</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="day-list">
|
||||
<div
|
||||
v-for="item in selectedItems"
|
||||
:key="item.id"
|
||||
class="day-item"
|
||||
:style="{ '--item-color': item.color }"
|
||||
>
|
||||
<el-checkbox
|
||||
:model-value="item.status === 1"
|
||||
@change="toggleFinish(item)"
|
||||
/>
|
||||
<div class="day-item-main" @click="openDetail(item)">
|
||||
<div class="day-item-title" :class="{ done: item.status === 1 }">
|
||||
{{ item.title }}
|
||||
<el-tag
|
||||
v-if="item.priority > 0"
|
||||
:type="priorityTagType(item.priority)"
|
||||
size="small"
|
||||
effect="light"
|
||||
>
|
||||
{{ priorityLabel(item.priority) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="day-item-time">{{ timeText(item) }}</div>
|
||||
</div>
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
@command="cmd => handleItemCommand(cmd, item)"
|
||||
>
|
||||
<el-button
|
||||
text
|
||||
:icon="MoreFilled"
|
||||
class="day-item-more"
|
||||
@click.stop
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="edit">编辑</el-dropdown-item>
|
||||
<el-dropdown-item command="delete" divided
|
||||
>删除</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<el-empty
|
||||
v-if="selectedItems.length === 0"
|
||||
description="当天暂无日程"
|
||||
:image-size="80"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表视图 -->
|
||||
<div v-else class="table-card">
|
||||
<div class="filter-bar">
|
||||
<el-input
|
||||
v-model="listFilters.keyword"
|
||||
clearable
|
||||
placeholder="搜索日程标题"
|
||||
style="width: 200px"
|
||||
@keyup.enter="loadListData"
|
||||
/>
|
||||
<el-select
|
||||
v-model="listFilters.status"
|
||||
clearable
|
||||
placeholder="全部状态"
|
||||
style="width: 120px"
|
||||
>
|
||||
<el-option label="待办" value="0" />
|
||||
<el-option label="已完成" value="1" />
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-model="listFilters.range"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
style="width: 260px"
|
||||
/>
|
||||
<el-button type="primary" :icon="Search" @click="loadListData"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button :icon="Refresh" @click="resetListFilters">重置</el-button>
|
||||
</div>
|
||||
<el-table v-loading="listLoading" :data="listData" stripe>
|
||||
<el-table-column prop="schedule_date" label="日期" width="120" />
|
||||
<el-table-column label="时间" width="150">
|
||||
<template #default="{ row }">{{ timeText(row) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="title"
|
||||
label="标题"
|
||||
min-width="220"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<span class="list-title" :class="{ done: row.status === 1 }">
|
||||
<span
|
||||
class="color-chip"
|
||||
:style="{ background: row.color }"
|
||||
/>{{ row.title }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="优先级" width="90">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
v-if="row.priority > 0"
|
||||
:type="priorityTagType(row.priority)"
|
||||
size="small"
|
||||
>{{ priorityLabel(row.priority) }}</el-tag
|
||||
>
|
||||
<span v-else>普通</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="90">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="row.status === 1 ? 'success' : 'warning'"
|
||||
size="small"
|
||||
>{{ row.status === 1 ? "已完成" : "待办" }}</el-tag
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" @click="toggleFinish(row)">{{
|
||||
row.status === 1 ? "取消完成" : "完成"
|
||||
}}</el-button>
|
||||
<el-button link type="primary" @click="openEdit(row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button link type="danger" @click="handleDelete(row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty><el-empty description="暂无日程" /></template>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
:current-page="listPagination.page"
|
||||
:page-size="listPagination.pageSize"
|
||||
:total="listPagination.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@update:current-page="listPagination.page = $event"
|
||||
@update:page-size="listPagination.pageSize = $event"
|
||||
@current-change="loadListData"
|
||||
@size-change="loadListData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑抽屉 -->
|
||||
<ScheduleEdit
|
||||
v-model="editVisible"
|
||||
:schedule="editingItem"
|
||||
:default-date="selectedDate"
|
||||
@saved="reloadAll"
|
||||
/>
|
||||
|
||||
<!-- 日程详情抽屉 -->
|
||||
<ScheduleDetail
|
||||
v-model="detailVisible"
|
||||
:schedule="detailItem"
|
||||
@edit="handleDetailEdit"
|
||||
@toggle="toggleFromDetail"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, reactive, ref, watch } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import {
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
MoreFilled,
|
||||
Plus,
|
||||
Refresh,
|
||||
Search
|
||||
} from "@element-plus/icons-vue";
|
||||
import ScheduleEdit from "./components/edit.vue";
|
||||
import ScheduleDetail from "./components/detail.vue";
|
||||
import {
|
||||
deleteSchedule,
|
||||
finishSchedule,
|
||||
getScheduleList,
|
||||
getScheduleStats
|
||||
} from "@/api/oaSchedule";
|
||||
|
||||
const viewMode = ref("calendar");
|
||||
const stats = ref({});
|
||||
|
||||
// ---------- 日期工具（避免额外依赖） ----------
|
||||
function pad2(n) {
|
||||
return String(n).padStart(2, "0");
|
||||
}
|
||||
|
||||
function fmtDate(d) {
|
||||
return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
|
||||
}
|
||||
|
||||
function todayStr() {
|
||||
return fmtDate(new Date());
|
||||
}
|
||||
|
||||
// 后端 DSN 开启 parseTime 时 DATE 字段可能返回 Go 默认格式
|
||||
// （"2026-08-29 00:00:00 +0800 CST"），统一截取为 YYYY-MM-DD，
|
||||
// 保证日历分组与选中日期侧栏能正确匹配。
|
||||
function normDate(value) {
|
||||
return typeof value === "string" && value.length >= 10
|
||||
? value.slice(0, 10)
|
||||
: value || "";
|
||||
}
|
||||
|
||||
// ---------- 日历视图 ----------
|
||||
const weekNames = ["一", "二", "三", "四", "五", "六", "日"];
|
||||
const now = new Date();
|
||||
const calendarYear = ref(now.getFullYear());
|
||||
const calendarMonth = ref(now.getMonth() + 1);
|
||||
const calendarStatus = ref("");
|
||||
const calendarItems = ref([]);
|
||||
const selectedDate = ref(todayStr());
|
||||
|
||||
// 日历 42 格（6 行 x 7 列，周一起始）
|
||||
const calendarCells = computed(() => {
|
||||
const map = calendarMap.value;
|
||||
const today = todayStr();
|
||||
const start = calendarRangeStart();
|
||||
const cells = [];
|
||||
for (let i = 0; i < 42; i++) {
|
||||
const d = new Date(
|
||||
start.getFullYear(),
|
||||
start.getMonth(),
|
||||
start.getDate() + i
|
||||
);
|
||||
const date = fmtDate(d);
|
||||
cells.push({
|
||||
date,
|
||||
day: d.getDate(),
|
||||
month: d.getMonth() + 1,
|
||||
inMonth: d.getMonth() + 1 === calendarMonth.value,
|
||||
isToday: date === today,
|
||||
items: map[date] || []
|
||||
});
|
||||
}
|
||||
return cells;
|
||||
});
|
||||
|
||||
// 当前月历网格的起始日期（含上月补齐）
|
||||
function calendarRangeStart() {
|
||||
const first = new Date(calendarYear.value, calendarMonth.value - 1, 1);
|
||||
const offset = (first.getDay() + 6) % 7;
|
||||
return new Date(calendarYear.value, calendarMonth.value - 1, 1 - offset);
|
||||
}
|
||||
|
||||
// 按日期分组：{ 'YYYY-MM-DD': [日程...] }
|
||||
const calendarMap = computed(() => {
|
||||
const map = {};
|
||||
for (const item of calendarItems.value) {
|
||||
if (!map[item.schedule_date]) {
|
||||
map[item.schedule_date] = [];
|
||||
}
|
||||
map[item.schedule_date].push(item);
|
||||
}
|
||||
return map;
|
||||
});
|
||||
|
||||
const selectedItems = computed(
|
||||
() => calendarMap.value[selectedDate.value] || []
|
||||
);
|
||||
|
||||
const selectedDateLabel = computed(() => {
|
||||
const [y, m, d] = selectedDate.value.split("-").map(Number);
|
||||
const week = "日一二三四五六"[new Date(y, m - 1, d).getDay()];
|
||||
return `${m}月${d}日 星期${week}`;
|
||||
});
|
||||
|
||||
async function loadCalendarData() {
|
||||
// 拉取整个 42 格区间的数据，一次覆盖前后补齐的日期
|
||||
const start = calendarRangeStart();
|
||||
const end = new Date(
|
||||
start.getFullYear(),
|
||||
start.getMonth(),
|
||||
start.getDate() + 41
|
||||
);
|
||||
const res = await getScheduleList({
|
||||
start_date: fmtDate(start),
|
||||
end_date: fmtDate(end),
|
||||
page: 1,
|
||||
pageSize: 500,
|
||||
status: calendarStatus.value
|
||||
});
|
||||
const data = res?.data || {};
|
||||
calendarItems.value = (data.list || []).map(item => ({
|
||||
...item,
|
||||
schedule_date: normDate(item.schedule_date)
|
||||
}));
|
||||
}
|
||||
|
||||
function changeMonth(delta) {
|
||||
const d = new Date(calendarYear.value, calendarMonth.value - 1 + delta, 1);
|
||||
calendarYear.value = d.getFullYear();
|
||||
calendarMonth.value = d.getMonth() + 1;
|
||||
loadCalendarData();
|
||||
}
|
||||
|
||||
function goToday() {
|
||||
const d = new Date();
|
||||
calendarYear.value = d.getFullYear();
|
||||
calendarMonth.value = d.getMonth() + 1;
|
||||
selectedDate.value = todayStr();
|
||||
loadCalendarData();
|
||||
}
|
||||
|
||||
// ---------- 统计 ----------
|
||||
async function loadStats() {
|
||||
const res = await getScheduleStats();
|
||||
if (res?.code === 200) {
|
||||
stats.value = res.data || {};
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 列表视图 ----------
|
||||
const listFilters = reactive({ keyword: "", status: "", range: null });
|
||||
const listData = ref([]);
|
||||
const listLoading = ref(false);
|
||||
const listPagination = reactive({ page: 1, pageSize: 20, total: 0 });
|
||||
|
||||
async function loadListData() {
|
||||
listLoading.value = true;
|
||||
try {
|
||||
const params = {
|
||||
page: listPagination.page,
|
||||
pageSize: listPagination.pageSize,
|
||||
keyword: listFilters.keyword,
|
||||
status: listFilters.status
|
||||
};
|
||||
if (listFilters.range && listFilters.range.length === 2) {
|
||||
params.start_date = listFilters.range[0];
|
||||
params.end_date = listFilters.range[1];
|
||||
}
|
||||
const res = await getScheduleList(params);
|
||||
const data = res?.data || {};
|
||||
listData.value = (data.list || []).map(item => ({
|
||||
...item,
|
||||
schedule_date: normDate(item.schedule_date)
|
||||
}));
|
||||
listPagination.total = data.total || 0;
|
||||
} finally {
|
||||
listLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function resetListFilters() {
|
||||
listFilters.keyword = "";
|
||||
listFilters.status = "";
|
||||
listFilters.range = null;
|
||||
listPagination.page = 1;
|
||||
loadListData();
|
||||
}
|
||||
|
||||
// 切到列表视图时按需加载
|
||||
watch(viewMode, mode => {
|
||||
if (mode === "list" && listData.value.length === 0) {
|
||||
loadListData();
|
||||
}
|
||||
});
|
||||
|
||||
// ---------- 详情/新增/编辑/操作 ----------
|
||||
const editVisible = ref(false);
|
||||
const editingItem = ref(null);
|
||||
const detailVisible = ref(false);
|
||||
const detailItem = ref(null);
|
||||
|
||||
function openCreate(date) {
|
||||
editingItem.value = null;
|
||||
if (date) {
|
||||
selectedDate.value = date;
|
||||
}
|
||||
editVisible.value = true;
|
||||
}
|
||||
|
||||
function openEdit(item) {
|
||||
editingItem.value = item;
|
||||
editVisible.value = true;
|
||||
}
|
||||
|
||||
function openDetail(item) {
|
||||
detailItem.value = item;
|
||||
detailVisible.value = true;
|
||||
}
|
||||
|
||||
// 详情里点编辑：关闭详情后打开编辑抽屉
|
||||
function handleDetailEdit(item) {
|
||||
detailVisible.value = false;
|
||||
openEdit(item);
|
||||
}
|
||||
|
||||
// 详情内完成/取消完成后从最新数据重新定位，保持详情内容同步
|
||||
async function toggleFromDetail(item) {
|
||||
await toggleFinish(item);
|
||||
detailItem.value = calendarItems.value.find(i => i.id === item.id) || null;
|
||||
if (!detailItem.value) {
|
||||
detailVisible.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleItemCommand(cmd, item) {
|
||||
if (cmd === "edit") {
|
||||
openEdit(item);
|
||||
} else if (cmd === "delete") {
|
||||
handleDelete(item);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleFinish(item) {
|
||||
const res = await finishSchedule(item.id);
|
||||
if (res?.code === 200) {
|
||||
ElMessage.success(res.data?.status === 1 ? "已完成" : "已恢复待办");
|
||||
return reloadAll();
|
||||
} else {
|
||||
ElMessage.error(res?.msg || "操作失败");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(item) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定删除日程「${item.title}」吗？`,
|
||||
"删除确认",
|
||||
{ type: "warning", confirmButtonText: "删除", cancelButtonText: "取消" }
|
||||
);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
const res = await deleteSchedule(item.id);
|
||||
if (res?.code === 200) {
|
||||
ElMessage.success("删除成功");
|
||||
reloadAll();
|
||||
} else {
|
||||
ElMessage.error(res?.msg || "删除失败");
|
||||
}
|
||||
}
|
||||
|
||||
function reloadAll() {
|
||||
const tasks = [loadStats(), loadCalendarData()];
|
||||
if (viewMode.value === "list") {
|
||||
tasks.push(loadListData());
|
||||
}
|
||||
return Promise.all(tasks);
|
||||
}
|
||||
|
||||
// ---------- 展示辅助 ----------
|
||||
function timeText(item) {
|
||||
if (item.all_day === 1) {
|
||||
return "全天";
|
||||
}
|
||||
return item.end_time
|
||||
? `${item.start_time} - ${item.end_time}`
|
||||
: item.start_time;
|
||||
}
|
||||
|
||||
function priorityLabel(priority) {
|
||||
return { 1: "重要", 2: "紧急" }[priority] || "普通";
|
||||
}
|
||||
|
||||
function priorityTagType(priority) {
|
||||
return { 1: "warning", 2: "danger" }[priority] || "info";
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadStats();
|
||||
loadCalendarData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.schedule-page {
|
||||
padding: 16px 20px 24px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
margin: 0;
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 统计卡片 */
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
padding: 14px 18px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
margin: 4px 0 2px;
|
||||
}
|
||||
|
||||
.stat-card.danger .stat-value {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.stat-sub {
|
||||
font-size: 12px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
/* 日历视图布局 */
|
||||
.calendar-layout {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.calendar-card {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.calendar-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.month-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar-week-header {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.week-name {
|
||||
padding: 8px 0;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.calendar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-auto-rows: minmax(96px, auto);
|
||||
}
|
||||
|
||||
.calendar-cell {
|
||||
border-right: 1px solid #f2f4f8;
|
||||
border-bottom: 1px solid #f2f4f8;
|
||||
padding: 6px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.calendar-cell:nth-child(7n) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.calendar-cell:hover {
|
||||
background: #f5f8ff;
|
||||
}
|
||||
|
||||
.calendar-cell.other-month {
|
||||
color: #c0c4cc;
|
||||
background: #fafbfc;
|
||||
}
|
||||
|
||||
.calendar-cell.selected {
|
||||
background: #ecf5ff;
|
||||
box-shadow: inset 0 0 0 2px #409eff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cell-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.day-num {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.calendar-cell.today .day-num {
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.today-tag,
|
||||
.month-tag {
|
||||
font-size: 11px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.cell-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.cell-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 1px 4px 1px 6px;
|
||||
border-left: 3px solid var(--item-color);
|
||||
background: #f5f7fa;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cell-item:hover {
|
||||
background: #ebeef5;
|
||||
}
|
||||
|
||||
.item-time {
|
||||
color: #909399;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item-title.done {
|
||||
text-decoration: line-through;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.cell-more {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.cell-more:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
/* 选中日期侧栏 */
|
||||
.day-panel {
|
||||
width: 320px;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.day-panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f2f4f8;
|
||||
}
|
||||
|
||||
.day-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.day-sub {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.day-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.day-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 10px 8px;
|
||||
border-left: 3px solid var(--item-color);
|
||||
border-radius: 4px;
|
||||
background: #fafbfc;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.day-item-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.day-item-title {
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.day-item-title.done {
|
||||
text-decoration: line-through;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.day-item-time {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.day-item-more {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 列表视图 */
|
||||
.table-card {
|
||||
background: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.list-title.done {
|
||||
text-decoration: line-through;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.color-chip {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 1200px) {
|
||||
.calendar-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.day-panel {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stats-row {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.calendar-grid {
|
||||
grid-auto-rows: minmax(64px, auto);
|
||||
}
|
||||
|
||||
.cell-items {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.calendar-cell {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.calendar-cell.has-items::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #409eff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user