670 lines
18 KiB
Vue
670 lines
18 KiB
Vue
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { useUserSettingsStore } from '@/stores/useUserSettingsStore'
|
||
import { useTaskStore } from '@/stores/useTaskStore'
|
||
import { useCategoryStore } from '@/stores/useCategoryStore'
|
||
import { useTagStore } from '@/stores/useTagStore'
|
||
import { useHabitStore } from '@/stores/useHabitStore'
|
||
import { get, post, del } from '@/api/request'
|
||
import type { Task, Category, Tag, HabitGroup, Habit } from '@/api/types'
|
||
|
||
const userStore = useUserSettingsStore()
|
||
const taskStore = useTaskStore()
|
||
const categoryStore = useCategoryStore()
|
||
const tagStore = useTagStore()
|
||
const habitStore = useHabitStore()
|
||
|
||
const saving = ref(false)
|
||
const exporting = ref(false)
|
||
|
||
const viewOptions = [
|
||
{ label: '列表', value: 'list' },
|
||
{ label: '日历', value: 'calendar' },
|
||
{ label: '四象限', value: 'quadrant' }
|
||
]
|
||
|
||
const sortByOptions = [
|
||
{ label: '创建时间', value: 'created_at' },
|
||
{ label: '截止日期', value: 'due_date' },
|
||
{ label: '优先级', value: 'priority' }
|
||
]
|
||
|
||
const sortOrderOptions = [
|
||
{ label: '降序 (新到旧)', value: 'desc' },
|
||
{ label: '升序 (旧到新)', value: 'asc' }
|
||
]
|
||
|
||
const prefs = ref({
|
||
site_name: '爱莉希雅待办',
|
||
default_view: 'list',
|
||
default_sort_by: 'priority',
|
||
default_sort_order: 'desc'
|
||
})
|
||
|
||
onMounted(() => {
|
||
prefs.value.site_name = userStore.siteName || '爱莉希雅待办'
|
||
prefs.value.default_view = userStore.defaultView || 'list'
|
||
prefs.value.default_sort_by = userStore.defaultSortBy || 'priority'
|
||
prefs.value.default_sort_order = userStore.defaultSortOrder || 'desc'
|
||
})
|
||
|
||
async function handleSave() {
|
||
saving.value = true
|
||
try {
|
||
await userStore.updateSettings({
|
||
site_name: prefs.value.site_name,
|
||
default_view: prefs.value.default_view,
|
||
default_sort_by: prefs.value.default_sort_by,
|
||
default_sort_order: prefs.value.default_sort_order
|
||
})
|
||
userStore.syncFromSettings(userStore.settings!)
|
||
|
||
// 保存排序后立即应用
|
||
taskStore.setFilters({
|
||
sort_by: prefs.value.default_sort_by as 'priority' | 'due_date' | 'created_at',
|
||
sort_order: prefs.value.default_sort_order as 'asc' | 'desc'
|
||
})
|
||
|
||
ElMessage.success('偏好设置已保存~')
|
||
} catch {
|
||
ElMessage.error('保存失败了呢，请稍后再试~')
|
||
} finally {
|
||
saving.value = false
|
||
}
|
||
}
|
||
|
||
async function exportData() {
|
||
exporting.value = true
|
||
try {
|
||
const [tasks, categories, tags, habitGroups, habits] = await Promise.all([
|
||
get<Task[]>('/tasks'),
|
||
get<Category[]>('/categories'),
|
||
get<Tag[]>('/tags'),
|
||
get<HabitGroup[]>('/habit-groups'),
|
||
get<Habit[]>('/habits', { params: { include_archived: true } })
|
||
])
|
||
|
||
const exportObj = {
|
||
version: 2,
|
||
exportedAt: new Date().toISOString(),
|
||
tasks,
|
||
categories,
|
||
tags,
|
||
habitGroups,
|
||
habits
|
||
}
|
||
|
||
const blob = new Blob([JSON.stringify(exportObj, null, 2)], { type: 'application/json' })
|
||
const url = URL.createObjectURL(blob)
|
||
const a = document.createElement('a')
|
||
a.href = url
|
||
a.download = `todo-backup-${new Date().toISOString().slice(0, 10)}.json`
|
||
a.click()
|
||
URL.revokeObjectURL(url)
|
||
|
||
ElMessage.success('数据导出成功~')
|
||
} catch {
|
||
ElMessage.error('导出失败了呢~')
|
||
} finally {
|
||
exporting.value = false
|
||
}
|
||
}
|
||
|
||
function importData() {
|
||
const input = document.createElement('input')
|
||
input.type = 'file'
|
||
input.accept = '.json'
|
||
input.onchange = async (e) => {
|
||
const file = (e.target as HTMLInputElement).files?.[0]
|
||
if (!file) return
|
||
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
'导入数据会覆盖现有的所有任务、分类、标签和习惯数据，确定要继续吗？',
|
||
'确认导入',
|
||
{ confirmButtonText: '确定导入', cancelButtonText: '取消', type: 'warning' }
|
||
)
|
||
|
||
const text = await file.text()
|
||
const data = JSON.parse(text)
|
||
|
||
if (!data.tasks || !Array.isArray(data.tasks)) {
|
||
ElMessage.error('数据格式不正确呢~')
|
||
return
|
||
}
|
||
|
||
// 先删除所有现有数据
|
||
const allTasks = await get<Task[]>('/tasks')
|
||
for (const t of allTasks) {
|
||
await del(`/tasks/${t.id}`)
|
||
}
|
||
|
||
const allCategories = await get<Category[]>('/categories')
|
||
for (const c of allCategories) {
|
||
await del(`/categories/${c.id}`)
|
||
}
|
||
|
||
const allTags = await get<Tag[]>('/tags')
|
||
for (const t of allTags) {
|
||
await del(`/tags/${t.id}`)
|
||
}
|
||
|
||
// 删除习惯数据（如果有的话）
|
||
if (data.habits && Array.isArray(data.habits)) {
|
||
const allHabits = await get<Habit[]>('/habits', { params: { include_archived: true } })
|
||
for (const h of allHabits) {
|
||
await del(`/habits/${h.id}`)
|
||
}
|
||
const allGroups = await get<HabitGroup[]>('/habit-groups')
|
||
for (const g of allGroups) {
|
||
await del(`/habit-groups/${g.id}`)
|
||
}
|
||
}
|
||
|
||
// 重新导入
|
||
if (data.categories && Array.isArray(data.categories)) {
|
||
for (const cat of data.categories) {
|
||
await post('/categories', { name: cat.name, color: cat.color, icon: cat.icon })
|
||
}
|
||
}
|
||
if (data.tags && Array.isArray(data.tags)) {
|
||
for (const tag of data.tags) {
|
||
await post('/tags', { name: tag.name })
|
||
}
|
||
}
|
||
if (data.tasks && Array.isArray(data.tasks)) {
|
||
// 建立新旧ID到名称的映射
|
||
const oldCatMap = new Map<number, string>()
|
||
const oldTagMap = new Map<number, string>()
|
||
if (data.categories) {
|
||
data.categories.forEach((c: Category) => oldCatMap.set(c.id, c.name))
|
||
}
|
||
if (data.tags) {
|
||
data.tags.forEach((t: Tag) => oldTagMap.set(t.id, t.name))
|
||
}
|
||
|
||
// 获取新建后的分类和标签
|
||
const newCategories = await get<Category[]>('/categories')
|
||
const newTags = await get<Tag[]>('/tags')
|
||
const catNameToId = new Map(newCategories.map(c => [c.name, c.id]))
|
||
const tagNameToId = new Map(newTags.map(t => [t.name, t.id]))
|
||
|
||
for (const task of data.tasks) {
|
||
const taskData: Record<string, unknown> = {
|
||
title: task.title,
|
||
description: task.description || null,
|
||
priority: task.priority,
|
||
due_date: task.due_date || null
|
||
}
|
||
|
||
if (task.category_id && oldCatMap.has(task.category_id)) {
|
||
const catName = oldCatMap.get(task.category_id)
|
||
if (catName && catNameToId.has(catName)) {
|
||
taskData.category_id = catNameToId.get(catName)!
|
||
}
|
||
}
|
||
|
||
const tagIds: number[] = []
|
||
if (task.tags && Array.isArray(task.tags)) {
|
||
for (const tag of task.tags) {
|
||
if (tagNameToId.has(tag.name)) {
|
||
tagIds.push(tagNameToId.get(tag.name)!)
|
||
}
|
||
}
|
||
}
|
||
taskData.tag_ids = tagIds
|
||
|
||
await post('/tasks', taskData)
|
||
}
|
||
}
|
||
|
||
// 导入习惯数据
|
||
if (data.habitGroups && Array.isArray(data.habitGroups)) {
|
||
for (const grp of data.habitGroups) {
|
||
await post('/habit-groups', { name: grp.name, color: grp.color, icon: grp.icon, sort_order: grp.sort_order })
|
||
}
|
||
}
|
||
if (data.habits && Array.isArray(data.habits)) {
|
||
const oldGroupMap = new Map<number, string>()
|
||
if (data.habitGroups) {
|
||
data.habitGroups.forEach((g: HabitGroup) => oldGroupMap.set(g.id, g.name))
|
||
}
|
||
|
||
const newGroups = await get<HabitGroup[]>('/habit-groups')
|
||
const groupNameToId = new Map(newGroups.map(g => [g.name, g.id]))
|
||
|
||
for (const habit of data.habits) {
|
||
const habitData: Record<string, unknown> = {
|
||
name: habit.name,
|
||
description: habit.description || null,
|
||
target_count: habit.target_count || 1,
|
||
frequency: habit.frequency || 'daily',
|
||
active_days: habit.active_days || null,
|
||
is_archived: habit.is_archived || false
|
||
}
|
||
|
||
if (habit.group_id && oldGroupMap.has(habit.group_id)) {
|
||
const grpName = oldGroupMap.get(habit.group_id)
|
||
if (grpName && groupNameToId.has(grpName)) {
|
||
habitData.group_id = groupNameToId.get(grpName)!
|
||
}
|
||
}
|
||
|
||
await post('/habits', habitData)
|
||
}
|
||
}
|
||
|
||
// 刷新数据
|
||
await Promise.all([
|
||
taskStore.fetchTasks(),
|
||
categoryStore.fetchCategories(),
|
||
tagStore.fetchTags()
|
||
])
|
||
if (data.habits || data.habitGroups) {
|
||
await habitStore.init()
|
||
}
|
||
|
||
ElMessage.success('数据导入成功~')
|
||
} catch (err) {
|
||
if ((err as { toString?: () => string })?.toString?.() !== 'cancel') {
|
||
ElMessage.error('导入失败了呢~')
|
||
}
|
||
}
|
||
}
|
||
input.click()
|
||
}
|
||
|
||
async function clearCompleted() {
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
'确定要清除所有已完成的任务吗？这个操作不可撤销哦~',
|
||
'确认清除',
|
||
{ confirmButtonText: '确定清除', cancelButtonText: '取消', type: 'warning' }
|
||
)
|
||
|
||
const completed = taskStore.completedTasks
|
||
for (const task of completed) {
|
||
await del(`/tasks/${task.id}`)
|
||
}
|
||
|
||
await taskStore.fetchTasks()
|
||
ElMessage.success(`已清除 ${completed.length} 个已完成的任务~`)
|
||
} catch {
|
||
// 用户取消
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="settings-page">
|
||
<div class="settings-container">
|
||
<!-- 应用偏好 -->
|
||
<div class="settings-card">
|
||
<div class="card-header">
|
||
<div class="card-icon">
|
||
<el-icon :size="24"><Brush /></el-icon>
|
||
</div>
|
||
<div>
|
||
<h3 class="card-title">应用偏好</h3>
|
||
<p class="card-subtitle">自定义你的使用体验</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="setting-item">
|
||
<div class="setting-label">
|
||
<span class="label-text">网站名称</span>
|
||
<span class="label-desc">显示在浏览器标签页和顶部导航栏</span>
|
||
</div>
|
||
<el-input
|
||
v-model="prefs.site_name"
|
||
placeholder="爱莉希雅待办"
|
||
maxlength="50"
|
||
style="width: 200px"
|
||
/>
|
||
</div>
|
||
|
||
<div class="setting-item">
|
||
<div class="setting-label">
|
||
<span class="label-text">默认视图</span>
|
||
<span class="label-desc">打开应用时首先显示的页面</span>
|
||
</div>
|
||
<el-select v-model="prefs.default_view" style="width: 180px">
|
||
<el-option
|
||
v-for="opt in viewOptions"
|
||
:key="opt.value"
|
||
:label="opt.label"
|
||
:value="opt.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
|
||
<div class="setting-item">
|
||
<div class="setting-label">
|
||
<span class="label-text">默认排序方式</span>
|
||
<span class="label-desc">任务列表的默认排序依据</span>
|
||
</div>
|
||
<el-select v-model="prefs.default_sort_by" style="width: 180px">
|
||
<el-option
|
||
v-for="opt in sortByOptions"
|
||
:key="opt.value"
|
||
:label="opt.label"
|
||
:value="opt.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
|
||
<div class="setting-item">
|
||
<div class="setting-label">
|
||
<span class="label-text">默认排序顺序</span>
|
||
<span class="label-desc">列表的默认排列方向</span>
|
||
</div>
|
||
<el-select v-model="prefs.default_sort_order" style="width: 180px">
|
||
<el-option
|
||
v-for="opt in sortOrderOptions"
|
||
:key="opt.value"
|
||
:label="opt.label"
|
||
:value="opt.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<el-button
|
||
type="primary"
|
||
:loading="saving"
|
||
@click="handleSave"
|
||
class="save-btn"
|
||
>
|
||
保存偏好
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据管理 -->
|
||
<div class="settings-card">
|
||
<div class="card-header">
|
||
<div class="card-icon">
|
||
<el-icon :size="24"><FolderOpened /></el-icon>
|
||
</div>
|
||
<div>
|
||
<h3 class="card-title">数据管理</h3>
|
||
<p class="card-subtitle">备份、恢复和清理你的数据</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="data-actions">
|
||
<div class="data-action-item">
|
||
<div class="action-info">
|
||
<span class="action-title">导出数据</span>
|
||
<span class="action-desc">将所有任务、分类、标签和习惯导出为 JSON 文件</span>
|
||
</div>
|
||
<el-button
|
||
:loading="exporting"
|
||
@click="exportData"
|
||
class="action-btn"
|
||
>
|
||
<el-icon><Download /></el-icon>
|
||
导出
|
||
</el-button>
|
||
</div>
|
||
|
||
<div class="data-action-item">
|
||
<div class="action-info">
|
||
<span class="action-title">导入数据</span>
|
||
<span class="action-desc warning">从 JSON 文件恢复数据（会覆盖现有数据）</span>
|
||
</div>
|
||
<el-button
|
||
@click="importData"
|
||
class="action-btn"
|
||
>
|
||
<el-icon><Upload /></el-icon>
|
||
导入
|
||
</el-button>
|
||
</div>
|
||
|
||
<div class="data-action-item">
|
||
<div class="action-info">
|
||
<span class="action-title">清除已完成任务</span>
|
||
<span class="action-desc danger">删除所有标记为已完成的任务（不可撤销）</span>
|
||
</div>
|
||
<el-button
|
||
type="danger"
|
||
plain
|
||
@click="clearCompleted"
|
||
class="action-btn"
|
||
>
|
||
<el-icon><Delete /></el-icon>
|
||
清除
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.settings-page {
|
||
min-height: calc(100vh - 60px);
|
||
padding: 32px;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.settings-container {
|
||
width: 100%;
|
||
max-width: 640px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
}
|
||
|
||
.settings-card {
|
||
background: white;
|
||
border-radius: var(--radius-xl);
|
||
box-shadow: var(--shadow-md);
|
||
overflow: hidden;
|
||
animation: fadeInUp 0.4s ease;
|
||
|
||
&:nth-child(2) {
|
||
animation-delay: 0.1s;
|
||
animation-fill-mode: both;
|
||
}
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 24px 28px;
|
||
border-bottom: 1px solid rgba(255, 183, 197, 0.15);
|
||
|
||
.card-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 12px;
|
||
background: linear-gradient(135deg, rgba(255, 183, 197, 0.2) 0%, rgba(200, 162, 200, 0.2) 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--primary);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin: 0 0 4px;
|
||
}
|
||
|
||
.card-subtitle {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.card-body {
|
||
padding: 24px 28px;
|
||
}
|
||
|
||
.setting-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 0;
|
||
border-bottom: 1px solid rgba(255, 183, 197, 0.08);
|
||
|
||
&:last-of-type {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.setting-label {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
flex: 1;
|
||
margin-right: 24px;
|
||
|
||
.label-text {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.label-desc {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 16px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid rgba(255, 183, 197, 0.15);
|
||
|
||
.save-btn {
|
||
min-width: 120px;
|
||
height: 40px;
|
||
border-radius: var(--radius-md);
|
||
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
|
||
border: none;
|
||
font-weight: 500;
|
||
|
||
&:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(255, 183, 197, 0.4);
|
||
}
|
||
}
|
||
}
|
||
|
||
.data-actions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.data-action-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 0;
|
||
border-bottom: 1px solid rgba(255, 183, 197, 0.08);
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.action-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
flex: 1;
|
||
margin-right: 24px;
|
||
|
||
.action-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.action-desc {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
|
||
&.warning {
|
||
color: var(--warning);
|
||
}
|
||
|
||
&.danger {
|
||
color: var(--danger);
|
||
}
|
||
}
|
||
}
|
||
|
||
.action-btn {
|
||
min-width: 100px;
|
||
border-radius: var(--radius-md);
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.settings-page {
|
||
padding: 16px;
|
||
}
|
||
|
||
.card-header,
|
||
.card-body {
|
||
padding: 16px;
|
||
}
|
||
|
||
.setting-item {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
|
||
.setting-label {
|
||
margin-right: 0;
|
||
}
|
||
|
||
:deep(.el-select) {
|
||
width: 100% !important;
|
||
}
|
||
}
|
||
|
||
.data-action-item {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
|
||
.action-info {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.action-btn {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|