初始提交：浏览器首页 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/CategoryForm.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+/**
+ * CategoryForm：分类增 / 改表单。
+ * P23：图标字段右侧新增「选择」按钮，弹出 AppIconPicker 网格选择器
+ */
+import { ref, watch } from 'vue';
+import { useCategoriesStore } from '@/stores/categories';
+import AppModal from './AppModal.vue';
+import AppButton from './AppButton.vue';
+import AppIcon from './AppIcon.vue';
+import AppIconPicker from './AppIconPicker.vue';
+import type { Category } from '@/types/api';
+
+interface Props {
+  category: Category | null;
+  defaultParentId: number;
+}
+const props = defineProps<Props>();
+const emit = defineEmits<{ (e: 'close'): void }>();
+
+const categories = useCategoriesStore();
+const form = ref({
+  parentId: props.category?.parentId ?? props.defaultParentId,
+  name: props.category?.name ?? '',
+  icon: props.category?.icon ?? 'layers',
+  sort: props.category?.sort ?? 0
+});
+
+watch(() => props.category, (c) => {
+  form.value = {
+    parentId: c?.parentId ?? props.defaultParentId,
+    name: c?.name ?? '',
+    icon: c?.icon ?? 'layers',
+    sort: c?.sort ?? 0
+  };
+});
+
+// P23：图标选择器
+const iconPickerOpen = ref(false);
+function onIconPick(name: string) {
+  form.value.icon = name;
+}
+
+const saving = ref(false);
+async function save() {
+  if (!form.value.name.trim()) return;
+  saving.value = true;
+  try {
+    const payload = { ...form.value, sort: Number(form.value.sort) || 0 };
+    if (props.category) {
+      await categories.update(props.category.id, payload);
+    } else {
+      await categories.create(payload);
+    }
+    emit('close');
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <AppModal :model-value="true" :title="category ? '编辑分类' : '新建分类'" size="sm" @update:model-value="emit('close')">
+    <div class="form">
+      <label class="form__row">
+        <span class="form__label">父分类</span>
+        <select v-model.number="form.parentId" class="form__input" :disabled="!!category">
+          <option :value="0">— 顶级分类 —</option>
+          <option v-for="c in categories.tree" :key="c.id" :value="c.id">{{ c.name }}</option>
+        </select>
+      </label>
+
+      <label class="form__row">
+        <span class="form__label">名称</span>
+        <input v-model="form.name" class="form__input" placeholder="分类名" />
+      </label>
+
+      <div class="form__row">
+        <span class="form__label">图标</span>
+        <div class="form__icon-row">
+          <div class="form__icon-preview">
+            <AppIcon :name="form.icon || 'layers'" :size="28" />
+          </div>
+          <input v-model="form.icon" class="form__input" placeholder="lucide 名，如 layers / bot" />
+          <AppButton size="sm" variant="ghost" type="button" @click="iconPickerOpen = true" title="从图标库选择">
+            <AppIcon name="layout-grid" :size="14" /> 选择
+          </AppButton>
+        </div>
+      </div>
+
+      <label class="form__row">
+        <span class="form__label">排序</span>
+        <input v-model.number="form.sort" type="number" class="form__input" />
+      </label>
+    </div>
+
+    <template #footer>
+      <AppButton variant="text" @click="emit('close')">取消</AppButton>
+      <AppButton variant="primary" :loading="saving" @click="save">保存</AppButton>
+    </template>
+  </AppModal>
+
+  <AppIconPicker v-model="iconPickerOpen" :selected="form.icon" @select="onIconPick" />
+</template>
+
+<style scoped>
+.form { display: flex; flex-direction: column; gap: 14px; }
+.form__row { display: flex; flex-direction: column; gap: 6px; }
+.form__label { font-size: var(--font-sm); color: var(--color-text-muted); }
+.form__input {
+  width: 100%;
+  padding: 8px 12px;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  outline: none;
+  font-size: var(--font-sm);
+  transition: border-color var(--duration-fast) var(--ease);
+}
+.form__input:focus { border-color: var(--color-accent); }
+.form__input:disabled { opacity: .6; }
+.form__icon-row { display: flex; align-items: center; gap: 8px; }
+.form__icon-preview {
+  width: 40px; height: 40px;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--color-accent-soft);
+  color: var(--color-accent);
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
+}
+.form__icon-row .form__input { flex: 1; }
+</style>