1492 lines
32 KiB
Vue
1492 lines
32 KiB
Vue
<template>
|
|
<view class="tasks-page">
|
|
<!-- 统一顶部导航 -->
|
|
<view class="unified-header">
|
|
<view class="header-content">
|
|
<view class="header-left">
|
|
<i class="fas fa-search header-icon" @click="showSearch = !showSearch"></i>
|
|
</view>
|
|
<view class="header-title">任务管理</view>
|
|
<view class="header-right">
|
|
<i class="fas fa-plus header-icon" @click="showAddTask = true"></i>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 页面内容 -->
|
|
<scroll-view scroll-y class="unified-content">
|
|
<!-- 搜索栏 -->
|
|
<view class="search-container" v-if="showSearch">
|
|
<view class="search-input-container">
|
|
<i class="fas fa-search search-icon"></i>
|
|
<input
|
|
v-model="searchKeyword"
|
|
placeholder="搜索任务..."
|
|
class="search-input"
|
|
@input="handleSearch"
|
|
/>
|
|
<view class="clear-button" @click="clearSearch" v-if="searchKeyword">
|
|
<i class="fas fa-times"></i>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 统计概览 -->
|
|
<view class="stats-overview">
|
|
<view class="stats-grid">
|
|
<view class="stat-card total">
|
|
<view class="stat-icon">
|
|
<i class="fas fa-list"></i>
|
|
</view>
|
|
<view class="stat-content">
|
|
<text class="stat-number">{{ taskStats.total }}</text>
|
|
<text class="stat-label">总任务</text>
|
|
</view>
|
|
</view>
|
|
<view class="stat-card pending">
|
|
<view class="stat-icon">
|
|
<i class="fas fa-clock"></i>
|
|
</view>
|
|
<view class="stat-content">
|
|
<text class="stat-number">{{ taskStats.pending }}</text>
|
|
<text class="stat-label">待完成</text>
|
|
</view>
|
|
</view>
|
|
<view class="stat-card completed">
|
|
<view class="stat-icon">
|
|
<i class="fas fa-check-circle"></i>
|
|
</view>
|
|
<view class="stat-content">
|
|
<text class="stat-number">{{ taskStats.completed }}</text>
|
|
<text class="stat-label">已完成</text>
|
|
</view>
|
|
</view>
|
|
<view class="stat-card overdue">
|
|
<view class="stat-icon">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</view>
|
|
<view class="stat-content">
|
|
<text class="stat-number">{{ taskStats.overdue }}</text>
|
|
<text class="stat-label">已逾期</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 筛选和排序 -->
|
|
<view class="filter-container">
|
|
<view class="filter-tabs-wrapper">
|
|
<view class="filter-tabs">
|
|
<view
|
|
v-for="filter in filterOptions"
|
|
:key="filter.value"
|
|
class="filter-tab"
|
|
:class="{ active: currentFilter === filter.value }"
|
|
@click="setFilter(filter.value)"
|
|
>
|
|
<text class="filter-text">{{ filter.label }}</text>
|
|
<view class="filter-badge" v-if="getFilterCount(filter.value) > 0">
|
|
{{ getFilterCount(filter.value) }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sort-container" @click="showSortOptions = !showSortOptions">
|
|
<text class="sort-text">{{ getCurrentSortLabel() }}</text>
|
|
<i
|
|
class="fas fa-chevron-down sort-icon"
|
|
:class="{ rotated: showSortOptions }"
|
|
></i>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 排序选项下拉 -->
|
|
<view class="sort-dropdown" v-if="showSortOptions">
|
|
<view
|
|
v-for="sort in sortOptions"
|
|
:key="sort.value"
|
|
class="sort-option"
|
|
:class="{ active: currentSort === sort.value }"
|
|
@click="setSort(sort.value)"
|
|
>
|
|
<text class="sort-option-text">{{ sort.label }}</text>
|
|
<i class="fas fa-check" v-if="currentSort === sort.value"></i>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 任务列表容器 -->
|
|
<view class="task-list-container">
|
|
<scroll-view scroll-y class="task-list" v-if="filteredTasks.length > 0">
|
|
<view
|
|
v-for="task in filteredTasks"
|
|
:key="task.id"
|
|
class="task-card"
|
|
:class="{ completed: task.completed, overdue: isOverdue(task) }"
|
|
@click="toggleTask(task.id)"
|
|
>
|
|
<view class="task-main">
|
|
<view class="task-checkbox-container">
|
|
<view
|
|
class="custom-checkbox"
|
|
:class="{ checked: task.completed }"
|
|
>
|
|
<i class="fas fa-check" v-if="task.completed"></i>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="task-content">
|
|
<view class="task-header">
|
|
<text class="task-title">{{ task.title }}</text>
|
|
<view class="task-priority-indicator" :class="task.priority">
|
|
<i class="fas fa-circle"></i>
|
|
</view>
|
|
</view>
|
|
|
|
<text class="task-description" v-if="task.description">{{
|
|
task.description
|
|
}}</text>
|
|
|
|
<view class="task-footer">
|
|
<view class="task-tags" v-if="task.tags.length > 0">
|
|
<text
|
|
v-for="tag in task.tags.slice(0, 3)"
|
|
:key="tag"
|
|
class="task-tag"
|
|
>
|
|
{{ tag }}
|
|
</text>
|
|
</view>
|
|
|
|
<view class="task-due-date" v-if="task.dueDate">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
<text class="due-date-text">{{
|
|
formatDate(task.dueDate)
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="task-actions" v-if="!task.completed">
|
|
<view class="action-button edit" @click.stop="editTask(task)">
|
|
<i class="fas fa-edit"></i>
|
|
</view>
|
|
<view
|
|
class="action-button delete"
|
|
@click.stop="deleteTask(task.id)"
|
|
>
|
|
<i class="fas fa-trash"></i>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 空状态 -->
|
|
<view class="empty-state" v-else>
|
|
<view class="empty-icon-container">
|
|
<i class="fas fa-tasks empty-icon"></i>
|
|
</view>
|
|
<text class="empty-title">暂无任务</text>
|
|
<text class="empty-description">点击右上角 + 号添加新任务</text>
|
|
<view class="empty-action" @click="showAddTask = true">
|
|
<i class="fas fa-plus"></i>
|
|
<text>添加任务</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 添加任务弹窗 -->
|
|
<view class="modal-overlay" v-if="showAddTask" @click="closeModal">
|
|
<view class="modal-content" @click.stop>
|
|
<view class="modal-header">
|
|
<text class="modal-title">添加任务</text>
|
|
<view class="close-btn" @click="closeModal">
|
|
<i class="fas fa-times"></i>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="modal-body">
|
|
<view class="form-group">
|
|
<text class="form-label">任务标题 *</text>
|
|
<input
|
|
v-model="newTask.title"
|
|
placeholder="请输入任务标题"
|
|
class="form-input"
|
|
/>
|
|
</view>
|
|
|
|
<view class="form-group">
|
|
<text class="form-label">任务描述</text>
|
|
<textarea
|
|
v-model="newTask.description"
|
|
placeholder="请输入任务描述"
|
|
class="form-textarea"
|
|
>
|
|
</textarea>
|
|
</view>
|
|
|
|
<view class="form-group">
|
|
<text class="form-label">优先级</text>
|
|
<view class="priority-options">
|
|
<view
|
|
v-for="priority in priorityOptions"
|
|
:key="priority.value"
|
|
class="priority-option"
|
|
:class="{ active: newTask.priority === priority.value }"
|
|
@click="newTask.priority = priority.value"
|
|
>
|
|
<view class="priority-dot" :class="priority.value"></view>
|
|
<text class="priority-text">{{ priority.label }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-group">
|
|
<text class="form-label">截止日期</text>
|
|
<picker mode="date" :value="newTask.dueDate" @change="onDateChange">
|
|
<view class="date-picker">
|
|
<text class="date-text">{{
|
|
newTask.dueDate || "选择日期"
|
|
}}</text>
|
|
<i class="fas fa-calendar-alt"></i>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<view class="form-group">
|
|
<text class="form-label">标签</text>
|
|
<input
|
|
v-model="tagInput"
|
|
placeholder="输入标签后按回车添加"
|
|
class="form-input"
|
|
@confirm="addTag"
|
|
/>
|
|
<view class="tags-display" v-if="newTask.tags.length > 0">
|
|
<view
|
|
v-for="(tag, index) in newTask.tags"
|
|
:key="index"
|
|
class="tag-item"
|
|
>
|
|
<text class="tag-text">{{ tag }}</text>
|
|
<view class="tag-remove" @click="removeTag(index)">
|
|
<i class="fas fa-times"></i>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="modal-footer">
|
|
<button class="btn-cancel" @click="closeModal">取消</button>
|
|
<button
|
|
class="btn-confirm"
|
|
@click="saveTask"
|
|
:disabled="!newTask.title"
|
|
>
|
|
保存
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, computed, onMounted, nextTick } from "vue";
|
|
import { useTaskStore } from "../../src/store/taskStore.js";
|
|
|
|
export default {
|
|
name: "TasksPage",
|
|
setup() {
|
|
const taskStore = useTaskStore();
|
|
|
|
// 响应式数据
|
|
const showSearch = ref(false);
|
|
const showAddTask = ref(false);
|
|
const showSortOptions = ref(false);
|
|
const searchKeyword = ref("");
|
|
const tagInput = ref("");
|
|
|
|
const newTask = ref({
|
|
title: "",
|
|
description: "",
|
|
priority: "medium",
|
|
dueDate: "",
|
|
tags: [],
|
|
});
|
|
|
|
// 筛选选项
|
|
const filterOptions = [
|
|
{ label: "全部", value: "all" },
|
|
{ label: "待完成", value: "pending" },
|
|
{ label: "已完成", value: "completed" },
|
|
{ label: "已逾期", value: "overdue" },
|
|
];
|
|
|
|
// 排序选项
|
|
const sortOptions = [
|
|
{ label: "按截止日期", value: "dueDate" },
|
|
{ label: "按优先级", value: "priority" },
|
|
{ label: "按创建时间", value: "created" },
|
|
];
|
|
|
|
// 优先级选项
|
|
const priorityOptions = [
|
|
{ label: "低", value: "low" },
|
|
{ label: "中", value: "medium" },
|
|
{ label: "高", value: "high" },
|
|
];
|
|
|
|
// 计算属性
|
|
const filteredTasks = computed(() => taskStore.filteredTasks);
|
|
const taskStats = computed(() => taskStore.taskStats);
|
|
const currentFilter = computed(() => taskStore.currentFilter);
|
|
const currentSort = computed(() => taskStore.currentSort);
|
|
|
|
// 方法
|
|
const handleSearch = () => {
|
|
taskStore.setSearchKeyword(searchKeyword.value);
|
|
};
|
|
|
|
const clearSearch = () => {
|
|
searchKeyword.value = "";
|
|
taskStore.setSearchKeyword("");
|
|
};
|
|
|
|
const setFilter = (filter) => {
|
|
taskStore.setFilter(filter);
|
|
// 滚动到选中的标签
|
|
nextTick(() => {
|
|
const activeTab = document.querySelector('.filter-tab.active');
|
|
if (activeTab) {
|
|
activeTab.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'nearest',
|
|
inline: 'center'
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
const setSort = (sort) => {
|
|
taskStore.setSort(sort);
|
|
showSortOptions.value = false;
|
|
};
|
|
|
|
const getCurrentSortLabel = () => {
|
|
const option = sortOptions.find((opt) => opt.value === currentSort.value);
|
|
return option ? option.label : "按截止日期";
|
|
};
|
|
|
|
const getFilterCount = (filter) => {
|
|
switch (filter) {
|
|
case "all":
|
|
return taskStore.tasks.length;
|
|
case "pending":
|
|
return taskStore.tasks.filter((task) => !task.completed).length;
|
|
case "completed":
|
|
return taskStore.tasks.filter((task) => task.completed).length;
|
|
case "overdue":
|
|
return taskStore.getOverdueTasks().length;
|
|
default:
|
|
return 0;
|
|
}
|
|
};
|
|
|
|
const toggleTask = (id) => {
|
|
taskStore.toggleTask(id);
|
|
};
|
|
|
|
const editTask = (task) => {
|
|
newTask.value = { ...task };
|
|
showAddTask.value = true;
|
|
};
|
|
|
|
const deleteTask = (id) => {
|
|
uni.showModal({
|
|
title: "确认删除",
|
|
content: "确定要删除这个任务吗？",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
taskStore.deleteTask(id);
|
|
uni.showToast({
|
|
title: "删除成功",
|
|
icon: "success",
|
|
});
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const isOverdue = (task) => {
|
|
if (task.completed || !task.dueDate) return false;
|
|
return new Date(task.dueDate) < new Date();
|
|
};
|
|
|
|
const formatDate = (dateString) => {
|
|
const date = new Date(dateString);
|
|
const now = new Date();
|
|
const diffTime = date - now;
|
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
|
|
|
if (diffDays === 0) return "今天";
|
|
if (diffDays === 1) return "明天";
|
|
if (diffDays === -1) return "昨天";
|
|
if (diffDays < 0) return `${Math.abs(diffDays)}天前`;
|
|
if (diffDays <= 7) return `${diffDays}天后`;
|
|
|
|
return date.toLocaleDateString();
|
|
};
|
|
|
|
const onDateChange = (e) => {
|
|
newTask.value.dueDate = e.detail.value;
|
|
};
|
|
|
|
const addTag = () => {
|
|
const tag = tagInput.value.trim();
|
|
if (tag && !newTask.value.tags.includes(tag)) {
|
|
newTask.value.tags.push(tag);
|
|
tagInput.value = "";
|
|
}
|
|
};
|
|
|
|
const removeTag = (index) => {
|
|
newTask.value.tags.splice(index, 1);
|
|
};
|
|
|
|
const saveTask = () => {
|
|
if (!newTask.value.title.trim()) {
|
|
uni.showToast({
|
|
title: "请输入任务标题",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (newTask.value.id) {
|
|
// 编辑任务
|
|
taskStore.updateTask(newTask.value.id, newTask.value);
|
|
uni.showToast({
|
|
title: "任务更新成功",
|
|
icon: "success",
|
|
});
|
|
} else {
|
|
// 添加任务
|
|
taskStore.addTask(newTask.value);
|
|
uni.showToast({
|
|
title: "任务添加成功",
|
|
icon: "success",
|
|
});
|
|
}
|
|
|
|
closeModal();
|
|
};
|
|
|
|
const closeModal = () => {
|
|
showAddTask.value = false;
|
|
newTask.value = {
|
|
title: "",
|
|
description: "",
|
|
priority: "medium",
|
|
dueDate: "",
|
|
tags: [],
|
|
};
|
|
tagInput.value = "";
|
|
};
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
taskStore.loadFromStorage();
|
|
taskStore.initSampleData();
|
|
});
|
|
|
|
return {
|
|
showSearch,
|
|
showAddTask,
|
|
showSortOptions,
|
|
searchKeyword,
|
|
tagInput,
|
|
newTask,
|
|
filterOptions,
|
|
sortOptions,
|
|
priorityOptions,
|
|
filteredTasks,
|
|
taskStats,
|
|
currentFilter,
|
|
currentSort,
|
|
handleSearch,
|
|
clearSearch,
|
|
setFilter,
|
|
setSort,
|
|
getCurrentSortLabel,
|
|
getFilterCount,
|
|
toggleTask,
|
|
editTask,
|
|
deleteTask,
|
|
isOverdue,
|
|
formatDate,
|
|
onDateChange,
|
|
addTag,
|
|
removeTag,
|
|
saveTask,
|
|
closeModal,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 主容器 */
|
|
.tasks-page {
|
|
min-height: 100vh;
|
|
background: var(--gradient-surface);
|
|
position: relative;
|
|
padding-top: calc(var(--status-bar-height) + 88rpx);
|
|
}
|
|
|
|
/* 支持安全区域的设备 */
|
|
@supports (padding: max(0px)) {
|
|
.tasks-page {
|
|
padding-top: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
|
|
}
|
|
}
|
|
|
|
/* 页面头部样式已移至统一导航 */
|
|
|
|
/* 搜索容器 */
|
|
.search-container {
|
|
padding: 24rpx 30rpx;
|
|
background: var(--white);
|
|
border-bottom: 1rpx solid var(--border-light);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.search-input-container {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
background: var(--gray-lighter);
|
|
border-radius: 20rpx;
|
|
padding: 0 24rpx;
|
|
border: 2rpx solid var(--border-light);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.search-input-container:focus-within {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 4rpx var(--info-light);
|
|
background: var(--white);
|
|
}
|
|
|
|
.search-icon {
|
|
color: var(--text-secondary);
|
|
font-size: 28rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
padding: 28rpx 0;
|
|
border: none;
|
|
background: transparent;
|
|
font-size: 30rpx;
|
|
color: var(--text-color);
|
|
font-weight: 500;
|
|
letter-spacing: 0.2rpx;
|
|
}
|
|
|
|
.search-input::placeholder {
|
|
color: var(--text-muted);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.clear-button {
|
|
color: var(--text-muted);
|
|
font-size: 26rpx;
|
|
padding: 12rpx;
|
|
transition: all 0.3s ease;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.clear-button:active {
|
|
color: var(--primary-color);
|
|
background: var(--info-light);
|
|
}
|
|
|
|
/* 统计概览 */
|
|
.stats-overview {
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--white);
|
|
border-radius: 24rpx;
|
|
padding: 32rpx 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
box-shadow: var(--shadow-md);
|
|
border: 2rpx solid var(--border-light);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stat-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--gradient-surface);
|
|
opacity: 0.2;
|
|
z-index: 0;
|
|
}
|
|
|
|
.stat-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4rpx;
|
|
background: var(--gradient-primary);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
z-index: 1;
|
|
}
|
|
|
|
.stat-card:active {
|
|
transform: translateY(-4rpx);
|
|
box-shadow: var(--shadow-lg);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.stat-card:active::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.stat-icon {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28rpx;
|
|
color: var(--white);
|
|
box-shadow: var(--shadow);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.stat-card.total .stat-icon {
|
|
background: var(--gradient-primary);
|
|
}
|
|
|
|
.stat-card.pending .stat-icon {
|
|
background: var(--gradient-warning);
|
|
}
|
|
|
|
.stat-card.completed .stat-icon {
|
|
background: var(--gradient-success);
|
|
}
|
|
|
|
.stat-card.overdue .stat-icon {
|
|
background: var(--gradient-error);
|
|
}
|
|
|
|
.stat-content {
|
|
flex: 1;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 42rpx;
|
|
font-weight: 800;
|
|
color: var(--text-color);
|
|
margin-bottom: 6rpx;
|
|
display: block;
|
|
letter-spacing: -0.5rpx;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 26rpx;
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
letter-spacing: 0.2rpx;
|
|
}
|
|
|
|
/* 筛选容器 */
|
|
.filter-container {
|
|
padding: 0 30rpx 20rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.filter-tabs-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.filter-tabs-wrapper::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 20rpx;
|
|
background: linear-gradient(to left, rgba(255, 255, 255, 0.8), transparent);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.filter-tabs {
|
|
display: flex;
|
|
gap: 8rpx;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
padding: 8rpx 0;
|
|
justify-content: flex-start;
|
|
flex-wrap: nowrap;
|
|
min-width: 0;
|
|
width: 100%;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.filter-tabs::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.filter-tab {
|
|
padding: 16rpx 24rpx;
|
|
border-radius: 20rpx;
|
|
background: var(--white);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
box-shadow: var(--shadow);
|
|
border: 2rpx solid var(--border-light);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
min-width: fit-content;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.filter-tab::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--gradient-primary);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.filter-tab.active {
|
|
background: var(--gradient-primary);
|
|
color: var(--white);
|
|
border-color: transparent;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.filter-tab.active::before {
|
|
opacity: 0;
|
|
}
|
|
|
|
.filter-text {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: var(--text-color);
|
|
position: relative;
|
|
z-index: 1;
|
|
letter-spacing: 0.2rpx;
|
|
}
|
|
|
|
.filter-tab.active .filter-text {
|
|
color: var(--white);
|
|
}
|
|
|
|
.filter-badge {
|
|
background: var(--gray-dark);
|
|
color: var(--white);
|
|
font-size: 22rpx;
|
|
padding: 6rpx 12rpx;
|
|
border-radius: 12rpx;
|
|
min-width: 36rpx;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
position: relative;
|
|
z-index: 1;
|
|
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.sort-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
padding: 10rpx 16rpx;
|
|
background: var(--white);
|
|
border-radius: 16rpx;
|
|
box-shadow: var(--shadow);
|
|
border: 1rpx solid var(--border);
|
|
transition: all 0.3s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sort-container:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.sort-text {
|
|
font-size: 26rpx;
|
|
color: var(--text-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sort-icon {
|
|
font-size: 20rpx;
|
|
color: var(--text-secondary);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.sort-icon.rotated {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* 排序下拉 */
|
|
.sort-dropdown {
|
|
position: absolute;
|
|
top: 160rpx;
|
|
right: 30rpx;
|
|
background: var(--white);
|
|
border-radius: 16rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
|
z-index: 200;
|
|
min-width: 200rpx;
|
|
border: 1rpx solid var(--border);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sort-option {
|
|
padding: 20rpx 24rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid var(--border);
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.sort-option:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.sort-option.active {
|
|
background: var(--background);
|
|
}
|
|
|
|
.sort-option:active {
|
|
background: var(--gray-light);
|
|
}
|
|
|
|
.sort-option-text {
|
|
font-size: 26rpx;
|
|
color: var(--text-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sort-option i {
|
|
color: var(--primary-color);
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
/* 任务列表容器 */
|
|
.task-list-container {
|
|
flex: 1;
|
|
padding: 0 30rpx;
|
|
min-height: 0;
|
|
}
|
|
|
|
.task-list {
|
|
height: calc(100vh - 500rpx);
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
/* 任务卡片 */
|
|
.task-card {
|
|
background: var(--white);
|
|
border-radius: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: var(--shadow-md);
|
|
border: 2rpx solid var(--border-light);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.task-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--gradient-surface);
|
|
opacity: 0.3;
|
|
z-index: 0;
|
|
}
|
|
|
|
.task-card:active {
|
|
transform: translateY(-4rpx);
|
|
box-shadow: var(--shadow-lg);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.task-card.completed {
|
|
opacity: 0.7;
|
|
background: var(--gray-lighter);
|
|
border-color: var(--gray);
|
|
}
|
|
|
|
.task-card.completed::before {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.task-card.overdue {
|
|
border-left: 8rpx solid var(--red);
|
|
background: linear-gradient(90deg, var(--error-light) 0%, var(--white) 100%);
|
|
border-color: var(--red-light);
|
|
}
|
|
|
|
.task-card.overdue::before {
|
|
background: linear-gradient(90deg, var(--error-light) 0%, var(--white) 100%);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.task-main {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 20rpx;
|
|
padding: 32rpx 28rpx;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.task-checkbox-container {
|
|
margin-top: 4rpx;
|
|
}
|
|
|
|
.custom-checkbox {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border: 2rpx solid #cbd5e0;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.custom-checkbox.checked {
|
|
background: linear-gradient(135deg, #10b981, #34d399);
|
|
border-color: #10b981;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.custom-checkbox i {
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.task-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.task-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.task-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #1a202c;
|
|
flex: 1;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.task-priority-indicator {
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
border-radius: 50%;
|
|
margin-left: 12rpx;
|
|
}
|
|
|
|
.task-priority-indicator.high {
|
|
color: #dc2626;
|
|
}
|
|
|
|
.task-priority-indicator.medium {
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.task-priority-indicator.low {
|
|
color: #059669;
|
|
}
|
|
|
|
.task-description {
|
|
font-size: 26rpx;
|
|
color: #718096;
|
|
line-height: 1.5;
|
|
margin-bottom: 16rpx;
|
|
display: block;
|
|
}
|
|
|
|
.task-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.task-tags {
|
|
display: flex;
|
|
gap: 8rpx;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.task-tag {
|
|
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
|
|
color: #1e40af;
|
|
font-size: 22rpx;
|
|
padding: 6rpx 12rpx;
|
|
border-radius: 12rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.task-due-date {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6rpx;
|
|
color: #718096;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.due-date-text {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.task-actions {
|
|
display: flex;
|
|
gap: 12rpx;
|
|
padding: 0 28rpx 32rpx;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.action-button {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
border-radius: 16rpx;
|
|
background: var(--gray-lighter);
|
|
color: var(--text-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 22rpx;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border: 2rpx solid var(--border-light);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.action-button.edit {
|
|
color: var(--primary-color);
|
|
background: var(--info-light);
|
|
border-color: var(--primary-light);
|
|
}
|
|
|
|
.action-button.edit:active {
|
|
background: var(--primary-color);
|
|
color: var(--white);
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.action-button.delete {
|
|
color: var(--red);
|
|
background: var(--error-light);
|
|
border-color: var(--red-light);
|
|
}
|
|
|
|
.action-button.delete:active {
|
|
background: var(--red);
|
|
color: var(--white);
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* 空状态 */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 80rpx 30rpx;
|
|
color: #718096;
|
|
}
|
|
|
|
.empty-icon-container {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 120rpx;
|
|
color: #cbd5e0;
|
|
}
|
|
|
|
.empty-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #4a5568;
|
|
margin-bottom: 16rpx;
|
|
display: block;
|
|
}
|
|
|
|
.empty-description {
|
|
font-size: 26rpx;
|
|
color: #718096;
|
|
margin-bottom: 40rpx;
|
|
display: block;
|
|
}
|
|
|
|
.empty-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
padding: 16rpx 32rpx;
|
|
background: linear-gradient(135deg, #4f46e5, #7c3aed);
|
|
color: #ffffff;
|
|
border-radius: 20rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
box-shadow: 0 4rpx 12rpx rgba(79, 70, 229, 0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.empty-action:active {
|
|
transform: scale(0.95);
|
|
box-shadow: 0 2rpx 8rpx rgba(79, 70, 229, 0.4);
|
|
}
|
|
|
|
/* 弹窗样式 */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
padding: 40rpx;
|
|
backdrop-filter: blur(4rpx);
|
|
}
|
|
|
|
.modal-content {
|
|
background: #ffffff;
|
|
border-radius: 24rpx;
|
|
width: 100%;
|
|
max-width: 600rpx;
|
|
max-height: 80vh;
|
|
overflow: hidden;
|
|
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #e2e8f0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: linear-gradient(135deg, #f7fafc, #edf2f7);
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
color: #1a202c;
|
|
}
|
|
|
|
.close-btn {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border-radius: 12rpx;
|
|
background: #f7fafc;
|
|
color: #718096;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
transition: all 0.3s ease;
|
|
border: 1rpx solid #e2e8f0;
|
|
}
|
|
|
|
.close-btn:active {
|
|
background: #edf2f7;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 30rpx;
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.form-input,
|
|
.form-textarea {
|
|
width: 100%;
|
|
padding: 20rpx;
|
|
border: 2rpx solid #e2e8f0;
|
|
border-radius: 12rpx;
|
|
font-size: 28rpx;
|
|
color: #2d3748;
|
|
background: #ffffff;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-textarea:focus {
|
|
border-color: #4f46e5;
|
|
box-shadow: 0 0 0 4rpx rgba(79, 70, 229, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
.form-textarea {
|
|
height: 120rpx;
|
|
resize: none;
|
|
}
|
|
|
|
.priority-options {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.priority-option {
|
|
flex: 1;
|
|
padding: 16rpx;
|
|
border: 2rpx solid #e2e8f0;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
transition: all 0.3s ease;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.priority-option.active {
|
|
border-color: #4f46e5;
|
|
background: #e0e7ff;
|
|
box-shadow: 0 0 0 4rpx rgba(79, 70, 229, 0.1);
|
|
}
|
|
|
|
.priority-dot {
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.priority-dot.high {
|
|
background: #dc2626;
|
|
}
|
|
|
|
.priority-dot.medium {
|
|
background: #f59e0b;
|
|
}
|
|
|
|
.priority-dot.low {
|
|
background: #059669;
|
|
}
|
|
|
|
.priority-text {
|
|
font-size: 26rpx;
|
|
color: #2d3748;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.date-picker {
|
|
padding: 20rpx;
|
|
border: 2rpx solid #e2e8f0;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #ffffff;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.date-picker:active {
|
|
border-color: #4f46e5;
|
|
box-shadow: 0 0 0 4rpx rgba(79, 70, 229, 0.1);
|
|
}
|
|
|
|
.date-text {
|
|
font-size: 28rpx;
|
|
color: #2d3748;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tags-display {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8rpx;
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.tag-item {
|
|
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
|
|
color: #1e40af;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tag-remove {
|
|
color: #1e40af;
|
|
font-size: 20rpx;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.tag-remove:active {
|
|
color: #1e3a8a;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 30rpx;
|
|
border-top: 1rpx solid #e2e8f0;
|
|
display: flex;
|
|
gap: 20rpx;
|
|
background: #f7fafc;
|
|
}
|
|
|
|
.btn-cancel,
|
|
.btn-confirm {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
border-radius: 16rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-cancel {
|
|
background: #ffffff;
|
|
color: #718096;
|
|
border: 2rpx solid #e2e8f0;
|
|
}
|
|
|
|
.btn-cancel:active {
|
|
background: #f7fafc;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.btn-confirm {
|
|
background: linear-gradient(135deg, #4f46e5, #7c3aed);
|
|
color: #ffffff;
|
|
box-shadow: 0 4rpx 12rpx rgba(79, 70, 229, 0.3);
|
|
}
|
|
|
|
.btn-confirm:active {
|
|
transform: translateY(1rpx);
|
|
box-shadow: 0 2rpx 8rpx rgba(79, 70, 229, 0.4);
|
|
}
|
|
|
|
.btn-confirm:disabled {
|
|
opacity: 0.6;
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media screen and (max-width: 750rpx) {
|
|
.stats-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.filter-container {
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.filter-tabs-wrapper {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.filter-tabs {
|
|
justify-content: flex-start;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.filter-tabs::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.filter-tab {
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
min-width: fit-content;
|
|
}
|
|
|
|
.task-list {
|
|
height: calc(100vh - 600rpx);
|
|
}
|
|
}
|
|
</style>
|