初始提交：浏览器首页 MyHomePage 全栈项目

# 项目概述
个人浏览器首页导航应用，支持书签分类管理、搜索引擎快捷搜索、
必应每日壁纸轮播、前后端分离部署，适配 1Panel 服务器（Docker 模式）。

# 技术栈
- 前端：Vue 3 + TypeScript + Vite + Pinia + Capacitor（Android 打包）
- 后端：.NET 8 + SqlSugar（多数据库） + SQLite/MySQL + Swashbuckle
- 部署：1Panel 应用商店自定义应用（Docker Compose 模式）

# 项目结构
- backend/    .NET 8 API 后端（8 个 Controller + 15 个 Service）
- frontend/   Vue 3 前端（19 个组件 + 9 个 API 模块 + 5 个 Store）
- docker/     Docker 部署文件（后端镜像 + Nginx 反代）
- docs/       部署手册（1Panel 实战版）
- scripts/    E2E 测试脚本

# 已实现功能
- 书签管理：增删改查 + 树形分类 + 拖拽排序 + 主色自适应
- 搜索引擎：8 个内置引擎 + 自定义引擎 + favicon 自动抓取
- 必应壁纸：每日轮播 + 多分辨率自动选择 + 1.6MP 质量优先
- 全局设置：主题/行为/数据/工具 4 分类 + 跨设备同步
- 文件上传：图标/书签/通用（容器持久化 + 跨域 URL 拼接）
- 同步：基于变更日志的设备间数据同步
- 跨域部署：前后端分离 + runtime config.json 无需重新编译

# 进度记录
- 已完成 P0~P52 共 53 个开发节点（详细见 说明文档.md）
- 当前版本：v1.0 部署就绪

# 部署文档
- README.md：项目说明 + 快速开始
- 说明文档.md：完整开发进度（中文）
- docs/DEPLOY.md：1Panel 部署手册（Docker 模式）

frontend/src/components/AppButton.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+/**
+ * AppButton：玻璃拟态风格的按钮，支持 variant。
+ */
+import { computed } from 'vue';
+
+interface Props {
+  variant?: 'primary' | 'ghost' | 'danger' | 'text';
+  size?: 'sm' | 'md' | 'lg';
+  iconOnly?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  type?: 'button' | 'submit';
+}
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'ghost',
+  size: 'md',
+  type: 'button',
+  disabled: false,
+  loading: false,
+  iconOnly: false
+});
+
+defineEmits<{ (e: 'click', ev: MouseEvent): void }>();
+
+const classes = computed(() => [
+  'app-btn',
+  `app-btn--${props.variant}`,
+  `app-btn--${props.size}`,
+  props.iconOnly && 'app-btn--icon',
+  props.loading && 'is-loading'
+]);
+</script>
+
+<template>
+  <button
+    :class="classes"
+    :type="type"
+    :disabled="disabled || loading"
+    @click="$emit('click', $event)"
+  >
+    <span v-if="loading" class="app-btn__spinner" />
+    <slot v-else />
+  </button>
+</template>
+
+<style scoped>
+.app-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  border-radius: var(--radius-md);
+  font-weight: var(--weight-medium);
+  transition: background var(--duration-fast) var(--ease),
+              color var(--duration-fast) var(--ease),
+              transform var(--duration-fast) var(--ease),
+              box-shadow var(--duration-fast) var(--ease);
+  user-select: none;
+  white-space: nowrap;
+}
+.app-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.app-btn:not(:disabled):active { transform: scale(0.97); }
+
+.app-btn--sm { padding: 4px 10px; font-size: var(--font-sm); min-height: 28px; }
+.app-btn--md { padding: 6px 14px; font-size: var(--font-base); min-height: 36px; }
+.app-btn--lg { padding: 10px 20px; font-size: var(--font-md); min-height: 44px; }
+
+.app-btn--icon.app-btn--sm { padding: 4px; min-width: 28px; }
+.app-btn--icon.app-btn--md { padding: 6px; min-width: 36px; }
+.app-btn--icon.app-btn--lg { padding: 10px; min-width: 44px; }
+
+.app-btn--primary {
+  background: var(--color-accent);
+  color: white;
+  box-shadow: var(--shadow-glow);
+}
+.app-btn--primary:hover:not(:disabled) { background: var(--color-accent-hover); }
+
+.app-btn--ghost {
+  background: var(--color-surface);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+.app-btn--ghost:hover:not(:disabled) { background: var(--color-surface-strong); border-color: var(--color-border-strong); }
+
+.app-btn--text {
+  color: var(--color-text-muted);
+}
+.app-btn--text:hover:not(:disabled) { color: var(--color-text); background: var(--color-accent-soft); }
+
+.app-btn--danger {
+  background: transparent;
+  color: var(--color-danger);
+  border: 1px solid transparent;
+}
+.app-btn--danger:hover:not(:disabled) { background: rgba(255,118,117,.12); }
+
+.app-btn__spinner {
+  width: 14px; height: 14px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin .8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+</style>