Jafeng/echo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Jafeng
2025-11-24 17:23:46 +08:00
commit bc1a909a4d
21 changed files with 2740 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/views/SettingsView.vue Normal file
View File

@@ -0,0 +1,101 @@
<script setup>
// 设置页当前只展示静态 UI，后续会接入真实设置状态和持久化逻辑
</script>
<template>
<div class="space-y-6 animate-fade-in pb-10">
<h2 class="text-2xl font-extrabold text-stone-800">设置</h2>
<!-- Profile Section -->
<div class="bg-white rounded-3xl p-5 flex items-center gap-4 shadow-sm border border-stone-100">
<img
src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix"
alt="Avatar"
class="w-16 h-16 rounded-full bg-stone-100"
/>
<div class="flex-1">
<h3 class="font-bold text-lg text-stone-800">Alex Chen</h3>
<p class="text-xs text-stone-400">Pro 会员 (2025.12 到期)</p>
</div>
<button
class="w-8 h-8 rounded-full bg-stone-50 flex items-center justify-center text-stone-400 active:bg-stone-100 transition"
>
<i class="ph-bold ph-pencil-simple" />
</button>
</div>
<!-- Settings Group 1: Automation & AI -->
<section>
<h3 class="text-xs font-bold text-stone-400 uppercase tracking-widest mb-3 ml-2">
自动化 &amp; AI
</h3>
<div class="bg-white rounded-3xl overflow-hidden shadow-sm border border-stone-100">
<div class="flex items-center justify-between p-4 border-b border-stone-50">
<div class="flex items-center gap-3">
<div
class="w-8 h-8 rounded-full bg-blue-50 text-blue-500 flex items-center justify-center"
>
<i class="ph-fill ph-bell-ringing" />
</div>
<span class="font-bold text-stone-700 text-sm">自动捕获支付通知</span>
</div>
<!-- 开关目前为静态 UI，后续接入真实状态 -->
<div class="w-11 h-6 bg-orange-400 rounded-full relative cursor-pointer">
<div class="absolute right-1 top-1 w-4 h-4 bg-white rounded-full shadow-sm" />
</div>
</div>
<div class="flex items-center justify-between p-4">
<div class="flex items-center gap-3">
<div
class="w-8 h-8 rounded-full bg-purple-50 text-purple-500 flex items-center justify-center"
>
<i class="ph-fill ph-magic-wand" />
</div>
<span class="font-bold text-stone-700 text-sm">AI 自动分类</span>
</div>
<div class="w-11 h-6 bg-orange-400 rounded-full relative cursor-pointer">
<div class="absolute right-1 top-1 w-4 h-4 bg-white rounded-full shadow-sm" />
</div>
</div>
</div>
</section>
<!-- Settings Group 2: General -->
<section>
<h3 class="text-xs font-bold text-stone-400 uppercase tracking-widest mb-3 ml-2">
通用
</h3>
<div class="bg-white rounded-3xl overflow-hidden shadow-sm border border-stone-100">
<button
class="flex w-full items-center justify-between p-4 border-b border-stone-50 active:bg-stone-50 transition text-left"
>
<div class="flex items-center gap-3">
<div
class="w-8 h-8 rounded-full bg-orange-50 text-orange-500 flex items-center justify-center"
>
<i class="ph-fill ph-export" />
</div>
<span class="font-bold text-stone-700 text-sm">导出账单数据 (Excel)</span>
</div>
<i class="ph-bold ph-caret-right text-stone-300" />
</button>
<div class="flex items-center justify-between p-4 active:bg-stone-50 transition">
<div class="flex items-center gap-3">
<div
class="w-8 h-8 rounded-full bg-red-50 text-red-500 flex items-center justify-center"
>
<i class="ph-fill ph-trash" />
</div>
<span class="font-bold text-stone-700 text-sm">清除缓存</span>
</div>
<span class="text-xs text-stone-400">128 MB</span>
</div>
</div>
</section>
<div class="text-center pt-4">
<p class="text-xs text-stone-300">Version 1.0.2 Beta</p>
</div>
</div>
</template>