feat: 添加 UI 状态管理，支持新增记录底部弹窗功能，优化设置和主页交互

src/views/SettingsView.vue

@@ -3,7 +3,12 @@ import { computed, onMounted, ref } from 'vue'
 import NotificationBridge, { isNativeNotificationBridgeAvailable } from '../lib/notificationBridge'
 import { useSettingsStore } from '../stores/settings'
 
+// 从 Vite 注入的版本号（来源于 package.json），用于在设置页展示
+// eslint-disable-next-line no-undef
+const appVersion = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.0.0'
+
 const settingsStore = useSettingsStore()
+const fileInputRef = ref(null)
 
 const notificationCaptureEnabled = computed({
   get: () => settingsStore.notificationCaptureEnabled,
@@ -51,6 +56,35 @@ const toggleAiAutoCategory = () => {
   aiAutoCategoryEnabled.value = !aiAutoCategoryEnabled.value
 }
 
+const handleEditProfileName = () => {
+  const current = settingsStore.profileName || 'Echo 用户'
+  const input = window.prompt('修改昵称', current)
+  if (input == null) return
+  settingsStore.setProfileName(input)
+}
+
+const handleAvatarClick = () => {
+  if (fileInputRef.value) {
+    fileInputRef.value.click()
+  }
+}
+
+const handleAvatarChange = (event) => {
+  const [file] = event.target.files || []
+  if (!file) return
+  if (!file.type || !file.type.startsWith('image/')) {
+    window.alert('请选择图片文件作为头像')
+    return
+  }
+  const reader = new FileReader()
+  reader.onload = () => {
+    if (typeof reader.result === 'string') {
+      settingsStore.setProfileAvatar(reader.result)
+    }
+  }
+  reader.readAsDataURL(file)
+}
+
 const handleExportData = () => {
   window.alert('导出功能即将上线：届时可以一键导出 CSV / Excel。当前版本建议先通过截图或复制方式备份关键信息。')
 }
@@ -78,13 +112,42 @@ onMounted(() => {
 
     <!-- 个人信息 / 简短说明 -->
     <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=Echo"
-        alt="Avatar"
-        class="w-16 h-16 rounded-full bg-stone-100"
-      />
+      <div class="relative">
+        <img
+          :src="
+            settingsStore.profileAvatar ||
+            'https://api.dicebear.com/7.x/avataaars/svg?seed=Echo'
+          "
+          alt="Avatar"
+          class="w-16 h-16 rounded-full bg-stone-100 object-cover cursor-pointer"
+          @click="handleAvatarClick"
+        />
+        <button
+          class="absolute bottom-0 right-0 w-6 h-6 rounded-full bg-white flex items-center justify-center text-[10px] text-stone-500 border border-stone-100 shadow-sm"
+          @click.stop="handleAvatarClick"
+        >
+          <i class="ph-bold ph-pencil-simple" />
+        </button>
+        <input
+          ref="fileInputRef"
+          type="file"
+          accept="image/*"
+          class="hidden"
+          @change="handleAvatarChange"
+        />
+      </div>
       <div class="flex-1">
-        <h3 class="font-bold text-lg text-stone-800">Echo 用户</h3>
+        <div class="flex items-center gap-2">
+          <h3 class="font-bold text-lg text-stone-800">
+            {{ settingsStore.profileName }}
+          </h3>
+          <button
+            class="text-[11px] text-stone-400 underline-offset-2 hover:text-stone-600"
+            @click="handleEditProfileName"
+          >
+            编辑
+          </button>
+        </div>
         <p class="text-xs text-stone-400">本地优先 · 数据只存这台设备</p>
       </div>
     </div>
@@ -222,7 +285,7 @@ onMounted(() => {
     </section>
 
     <div class="text-center pt-4">
-      <p class="text-xs text-stone-300">Echo · Local-first Beta</p>
+      <p class="text-xs text-stone-300">Echo · Local-first · v{{ appVersion }}</p>
     </div>
   </div>
 </template>