266 lines
9.1 KiB
Plaintext
266 lines
9.1 KiB
Plaintext
<!--pages/index/index.wxml-->
|
|
<view class="container">
|
|
<!-- 顶部渐变背景 -->
|
|
<view class="gradient-background"></view>
|
|
|
|
<!-- 顶部问候区域 -->
|
|
<view class="greeting-section">
|
|
<view class="greeting-content">
|
|
<text class="greeting">{{greeting}}</text>
|
|
<text class="date">{{formatTime(Date.now())}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 统计概览 -->
|
|
<view class="stats-overview">
|
|
<!-- 紧凑型进度卡片 -->
|
|
<view class="compact-progress-card">
|
|
<view class="progress-mini-circle">
|
|
<view class="mini-circle-bg"></view>
|
|
<view class="mini-circle-progress" style="transform: rotate({{stats.completionRate * 3.6 - 90}}deg);"></view>
|
|
<view class="mini-circle-inner">
|
|
<text class="mini-percentage">{{stats.completionRate}}%</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="compact-stats">
|
|
<view class="compact-info">
|
|
<text class="compact-title">今日进度</text>
|
|
<view class="compact-numbers">
|
|
<text class="compact-number">{{stats.completed}}/{{stats.total}} 完成</text>
|
|
<view class="achievement-mini">
|
|
<t-icon name="{{getAchievementIcon(stats.completionRate)}}" size="12" color="{{getAchievementColor(stats.completionRate)}}" />
|
|
<text class="achievement-mini-text">{{getAchievementText(stats.completionRate)}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="quick-actions-mini">
|
|
<view class="action-item" bind:tap="goToTasks">
|
|
<t-icon name="bulletpoint" size="16" color="#0052d9" />
|
|
<text class="action-text">全部</text>
|
|
</view>
|
|
<view class="action-item" bind:tap="showAddSheet">
|
|
<t-icon name="add" size="16" color="#00a870" />
|
|
<text class="action-text">添加</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 今日任务 -->
|
|
<view class="today-tasks">
|
|
<view class="section-header">
|
|
<text class="section-title">今日任务</text>
|
|
<text class="task-count">{{todayTodos.length}}</text>
|
|
</view>
|
|
|
|
<view wx:if="{{todayTodos.length === 0}}" class="empty-state">
|
|
<t-icon name="bulletpoint" size="24" color="#cccccc" />
|
|
<text class="empty-text">暂无任务</text>
|
|
</view>
|
|
|
|
<view wx:else class="task-list">
|
|
<view wx:for="{{todayTodos}}" wx:key="id" class="task-item">
|
|
<view class="task-content">
|
|
<t-checkbox
|
|
checked="{{item.completed}}"
|
|
bind:change="toggleTodo"
|
|
data-id="{{item.id}}"
|
|
/>
|
|
<text class="task-text {{item.completed ? 'completed' : ''}}">{{item.text}}</text>
|
|
</view>
|
|
<view class="task-actions">
|
|
<t-tag
|
|
theme="{{item.priority === 'high' ? 'danger' : item.priority === 'medium' ? 'warning' : 'primary'}}"
|
|
size="small"
|
|
variant="light"
|
|
>
|
|
{{item.priority === 'high' ? '高' : item.priority === 'medium' ? '中' : '低'}}
|
|
</t-tag>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 快速操作 -->
|
|
<view class="quick-actions">
|
|
<t-button
|
|
theme="light"
|
|
size="medium"
|
|
bind:tap="goToTasks"
|
|
block
|
|
>
|
|
<t-icon name="bulletpoint" slot="icon" />
|
|
查看所有任务
|
|
</t-button>
|
|
</view>
|
|
|
|
<!-- 添加任务半屏 -->
|
|
<view class="add-task-sheet {{showAddSheet ? 'show' : ''}}" bind:tap="hideAddSheet">
|
|
<view class="sheet-content" catch:tap="stopPropagation">
|
|
<view class="sheet-header">
|
|
<view class="sheet-handle"></view>
|
|
<text class="sheet-title">添加新任务</text>
|
|
<view class="sheet-close" bind:tap="hideAddSheet">
|
|
<t-icon name="close" size="20" color="#999" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sheet-body">
|
|
<!-- 任务内容输入 -->
|
|
<view class="input-section">
|
|
<view class="input-label">任务内容</view>
|
|
<t-input
|
|
placeholder="请输入要完成的任务..."
|
|
value="{{newTodoText}}"
|
|
bind:change="onNewTodoInput"
|
|
class="task-input"
|
|
autoFocus="{{showAddSheet}}"
|
|
maxlength="100"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 优先级选择 -->
|
|
<view class="input-section">
|
|
<view class="input-label">优先级</view>
|
|
<view class="priority-selector">
|
|
<view
|
|
class="priority-item {{newTodoPriority === 'high' ? 'active' : ''}}"
|
|
bind:tap="onPriorityChange"
|
|
data-value="high"
|
|
>
|
|
<view class="priority-dot high"></view>
|
|
<text class="priority-text">高优先级</text>
|
|
</view>
|
|
<view
|
|
class="priority-item {{newTodoPriority === 'medium' ? 'active' : ''}}"
|
|
bind:tap="onPriorityChange"
|
|
data-value="medium"
|
|
>
|
|
<view class="priority-dot medium"></view>
|
|
<text class="priority-text">中优先级</text>
|
|
</view>
|
|
<view
|
|
class="priority-item {{newTodoPriority === 'low' ? 'active' : ''}}"
|
|
bind:tap="onPriorityChange"
|
|
data-value="low"
|
|
>
|
|
<view class="priority-dot low"></view>
|
|
<text class="priority-text">低优先级</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分类选择 -->
|
|
<view class="input-section">
|
|
<view class="input-label">分类</view>
|
|
<view class="category-selector">
|
|
<view
|
|
class="category-item {{newTodoCategory === 'work' ? 'active' : ''}}"
|
|
bind:tap="onCategoryChange"
|
|
data-value="work"
|
|
>
|
|
<t-icon name="business" size="16" />
|
|
<text>工作</text>
|
|
</view>
|
|
<view
|
|
class="category-item {{newTodoCategory === 'personal' ? 'active' : ''}}"
|
|
bind:tap="onCategoryChange"
|
|
data-value="personal"
|
|
>
|
|
<t-icon name="user" size="16" />
|
|
<text>个人</text>
|
|
</view>
|
|
<view
|
|
class="category-item {{newTodoCategory === 'study' ? 'active' : ''}}"
|
|
bind:tap="onCategoryChange"
|
|
data-value="study"
|
|
>
|
|
<t-icon name="education" size="16" />
|
|
<text>学习</text>
|
|
</view>
|
|
<view
|
|
class="category-item {{newTodoCategory === 'life' ? 'active' : ''}}"
|
|
bind:tap="onCategoryChange"
|
|
data-value="life"
|
|
>
|
|
<t-icon name="home" size="16" />
|
|
<text>生活</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 截止时间 -->
|
|
<view class="input-section">
|
|
<view class="input-label">截止时间（可选）</view>
|
|
<view class="datetime-picker" bind:tap="showDateTimePicker">
|
|
<t-icon name="time" size="16" color="#666" />
|
|
<text class="datetime-text {{newTodoDeadline ? '' : 'placeholder'}}">
|
|
{{newTodoDeadline ? formatDateTime(newTodoDeadline) : '点击选择截止时间'}}
|
|
</text>
|
|
<t-icon name="chevron-right" size="16" color="#ccc" />
|
|
</view>
|
|
<view wx:if="{{newTodoDeadline}}" class="datetime-clear" bind:tap="clearDeadline">
|
|
<text class="clear-text">清除截止时间</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 备注 -->
|
|
<view class="input-section">
|
|
<view class="input-label">备注（可选）</view>
|
|
<t-input
|
|
placeholder="添加备注信息..."
|
|
value="{{newTodoNote}}"
|
|
bind:change="onNewTodoNoteInput"
|
|
class="note-input"
|
|
type="textarea"
|
|
maxlength="200"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sheet-footer">
|
|
<t-button
|
|
theme="light"
|
|
size="large"
|
|
bind:tap="hideAddSheet"
|
|
class="cancel-btn"
|
|
>
|
|
取消
|
|
</t-button>
|
|
<t-button
|
|
theme="primary"
|
|
size="large"
|
|
bind:tap="addTodo"
|
|
class="confirm-btn"
|
|
disabled="{{newTodoText === '' || newTodoText.length === 0}}"
|
|
>
|
|
添加任务
|
|
</t-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 日期时间选择器 -->
|
|
<picker
|
|
wx:if="{{showDateTimePicker}}"
|
|
mode="multiSelector"
|
|
range="{{dateTimeRange}}"
|
|
value="{{dateTimeValue}}"
|
|
bind:change="onDateTimeChange"
|
|
bind:cancel="hideDateTimePicker"
|
|
>
|
|
<view></view>
|
|
</picker>
|
|
|
|
<!-- 自定义标签栏 -->
|
|
<t-tab-bar value="{{activeTab}}" bind:change="onTabChange" t-class="custom-tab-bar">
|
|
<t-tab-bar-item value="home" icon="home" aria-label="首页">首页</t-tab-bar-item>
|
|
<t-tab-bar-item value="list" icon="bulletpoint" aria-label="任务">任务</t-tab-bar-item>
|
|
<t-tab-bar-item value="statistics" icon="chart" aria-label="统计">统计</t-tab-bar-item>
|
|
<t-tab-bar-item value="settings" icon="setting" aria-label="设置">设置</t-tab-bar-item>
|
|
</t-tab-bar>
|
|
</view>
|