diff --git a/ScreenShot_2026-01-26_101148_856.png b/ScreenShot_2026-01-26_101148_856.png
new file mode 100644
index 0000000..16d1829
Binary files /dev/null and b/ScreenShot_2026-01-26_101148_856.png differ
diff --git a/ScreenShot_2026-01-26_151019_180.png b/ScreenShot_2026-01-26_151019_180.png
new file mode 100644
index 0000000..b65fb9a
Binary files /dev/null and b/ScreenShot_2026-01-26_151019_180.png differ
diff --git a/ScreenShot_2026-01-27_140219_283.png b/ScreenShot_2026-01-27_140219_283.png
new file mode 100644
index 0000000..4d2be8a
Binary files /dev/null and b/ScreenShot_2026-01-27_140219_283.png differ
diff --git a/ScreenShot_2026-01-27_142115_699.png b/ScreenShot_2026-01-27_142115_699.png
new file mode 100644
index 0000000..bfcab38
Binary files /dev/null and b/ScreenShot_2026-01-27_142115_699.png differ
diff --git a/ScreenShot_2026-01-27_142125_810.png b/ScreenShot_2026-01-27_142125_810.png
new file mode 100644
index 0000000..6d3c9ce
Binary files /dev/null and b/ScreenShot_2026-01-27_142125_810.png differ
diff --git a/ScreenShot_2026-01-27_142143_653.png b/ScreenShot_2026-01-27_142143_653.png
new file mode 100644
index 0000000..9587ce9
Binary files /dev/null and b/ScreenShot_2026-01-27_142143_653.png differ
diff --git a/ScreenShot_2026-01-27_161350_530.png b/ScreenShot_2026-01-27_161350_530.png
new file mode 100644
index 0000000..6cd0379
Binary files /dev/null and b/ScreenShot_2026-01-27_161350_530.png differ
diff --git a/ScreenShot_2026-01-27_164351_352.png b/ScreenShot_2026-01-27_164351_352.png
new file mode 100644
index 0000000..6b1d5bc
Binary files /dev/null and b/ScreenShot_2026-01-27_164351_352.png differ
diff --git a/ScreenShot_2026-01-27_164407_879.png b/ScreenShot_2026-01-27_164407_879.png
new file mode 100644
index 0000000..2db576a
Binary files /dev/null and b/ScreenShot_2026-01-27_164407_879.png differ
diff --git a/ScreenShot_2026-01-27_164417_272.png b/ScreenShot_2026-01-27_164417_272.png
new file mode 100644
index 0000000..68b7fba
Binary files /dev/null and b/ScreenShot_2026-01-27_164417_272.png differ
diff --git a/ScreenShot_2026-01-27_164425_826.png b/ScreenShot_2026-01-27_164425_826.png
new file mode 100644
index 0000000..b2dcae4
Binary files /dev/null and b/ScreenShot_2026-01-27_164425_826.png differ
diff --git a/ScreenShot_2026-01-27_164433_919.png b/ScreenShot_2026-01-27_164433_919.png
new file mode 100644
index 0000000..849ea7c
Binary files /dev/null and b/ScreenShot_2026-01-27_164433_919.png differ
diff --git a/ScreenShot_2026-01-27_164441_143.png b/ScreenShot_2026-01-27_164441_143.png
new file mode 100644
index 0000000..20a601c
Binary files /dev/null and b/ScreenShot_2026-01-27_164441_143.png differ
diff --git a/ScreenShot_2026-01-27_164454_148.png b/ScreenShot_2026-01-27_164454_148.png
new file mode 100644
index 0000000..a1f40e6
Binary files /dev/null and b/ScreenShot_2026-01-27_164454_148.png differ
diff --git a/ScreenShot_2026-01-27_164508_593.png b/ScreenShot_2026-01-27_164508_593.png
new file mode 100644
index 0000000..1b295c7
Binary files /dev/null and b/ScreenShot_2026-01-27_164508_593.png differ
diff --git a/ScreenShot_2026-01-27_164516_311.png b/ScreenShot_2026-01-27_164516_311.png
new file mode 100644
index 0000000..cde3d74
Binary files /dev/null and b/ScreenShot_2026-01-27_164516_311.png differ
diff --git a/ScreenShot_2026-01-27_164535_751.png b/ScreenShot_2026-01-27_164535_751.png
new file mode 100644
index 0000000..8ccdfcb
Binary files /dev/null and b/ScreenShot_2026-01-27_164535_751.png differ
diff --git a/ScreenShot_2026-01-28_161321_172.png b/ScreenShot_2026-01-28_161321_172.png
new file mode 100644
index 0000000..1c82f6d
Binary files /dev/null and b/ScreenShot_2026-01-28_161321_172.png differ
diff --git a/app/package-lock.json b/app/package-lock.json
index 6c3f50b..a0e5e63 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -8,6 +8,7 @@
       "name": "itab-clone",
       "version": "0.0.0",
       "dependencies": {
+        "@iconify/vue": "^5.0.0",
         "muuri": "^0.9.5",
         "pinia": "^2.1.7",
         "vue": "^3.3.11"
@@ -457,6 +458,27 @@
         "node": ">=12"
       }
     },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
+    "node_modules/@iconify/vue": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
+      "integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
diff --git a/app/package.json b/app/package.json
index 651f184..b71282f 100644
--- a/app/package.json
+++ b/app/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@iconify/vue": "^5.0.0",
     "muuri": "^0.9.5",
     "pinia": "^2.1.7",
     "vue": "^3.3.11"
diff --git a/app/src/App.vue b/app/src/App.vue
index 1ef6ee0..216a05a 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,15 +1,305 @@
 <template>
   <div id="desktop-app">
-    <TheSidebar />
+    <TheSidebar
+      :groups="sidebarGroups"
+      :base-overrides="sidebarOverrides"
+      :hidden-base-ids="hiddenBaseIds"
+      @add="openAddGroup"
+      @edit-group="openEditGroup"
+      @remove-group="handleRemoveGroup"
+      @settings="toggleSettings"
+    />
     <MainContent />
-    <TheContextMenu />
+    <TheContextMenu
+      @add-icon="openAddIcon"
+      @edit-icon="openEditIcon"
+      @edit-widget="openEditWidget"
+      @settings="openSettings"
+    />
+    <SettingsPanel v-model:open="isSettingsOpen" />
+    <EditIconDialog
+      v-model:open="isEditIconOpen"
+      :icon="editingIcon"
+      @submit="handleEditIcon"
+    />
+    <AddGroupDialog
+      v-model:open="isGroupDialogOpen"
+      :title="dialogTitle"
+      :submit-text="dialogSubmitText"
+      :initial-name="dialogInitialName"
+      :initial-icon-id="dialogInitialIconId"
+      @submit="handleGroupSubmit"
+    />
+    <AddIconDialog
+      v-model:open="isAddIconOpen"
+      :mode="addIconMode"
+      :initial-tab="addIconInitialTab"
+      :target-widget-id="replaceWidgetId"
+      @submit="handleAddIcon"
+      @add-widget="handleAddWidget"
+      @replace-widget="handleReplaceWidget"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, ref, watch } from 'vue';
 import TheSidebar from './components/TheSidebar/index.vue';
 import MainContent from './components/MainContent/index.vue';
 import TheContextMenu from './components/TheContextMenu/index.vue';
+import AddGroupDialog from './components/AddGroupDialog/index.vue';
+import AddIconDialog from './components/AddIconDialog/index.vue';
+import EditIconDialog from './components/EditIconDialog/index.vue';
+import SettingsPanel from './components/SettingsPanel/index.vue';
+import { sidebarBaseItems } from './config/sidebarItems';
+import { useLayoutStore } from './store/useLayoutStore';
+import { useWidgetsStore } from './store/useWidgetsStore';
+import { useSettingsSync } from './composables/useSettingsSync';
+
+type SidebarGroup = {
+  id: string;
+  label: string;
+  iconId: string;
+};
+
+type SidebarOverride = {
+  label: string;
+  iconId: string;
+};
+
+const GROUPS_STORAGE_KEY = 'itab_sidebar_groups';
+const OVERRIDES_STORAGE_KEY = 'itab_sidebar_overrides';
+const HIDDEN_STORAGE_KEY = 'itab_sidebar_hidden';
+
+const loadGroups = (): SidebarGroup[] => {
+  const raw = localStorage.getItem(GROUPS_STORAGE_KEY);
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(
+      (item): item is SidebarGroup =>
+        item &&
+        typeof item.id === 'string' &&
+        typeof item.label === 'string' &&
+        typeof item.iconId === 'string'
+    );
+  } catch {
+    return [];
+  }
+};
+
+const sidebarGroups = ref<SidebarGroup[]>(loadGroups());
+const sidebarOverrides = ref<Record<string, SidebarOverride>>({});
+const hiddenBaseIds = ref<string[]>([]);
+const isGroupDialogOpen = ref(false);
+const isAddIconOpen = ref(false);
+const isEditIconOpen = ref(false);
+const isSettingsOpen = ref(false);
+const addIconMode = ref<'add' | 'replace-widget'>('add');
+const addIconInitialTab = ref<'widgets' | 'sites' | 'custom'>('widgets');
+const replaceWidgetId = ref<string | null>(null);
+const editTarget = ref<{ id: string; source: 'base' | 'group' } | null>(null);
+const layoutStore = useLayoutStore();
+const widgetsStore = useWidgetsStore();
+const editingIcon = ref<{ id: string; name: string; url: string; img?: string; text?: string; bgColor?: string } | null>(null);
+
+useSettingsSync();
+
+const loadOverrides = (): Record<string, SidebarOverride> => {
+  const raw = localStorage.getItem(OVERRIDES_STORAGE_KEY);
+  if (!raw) return {};
+  try {
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== 'object') return {};
+    return Object.fromEntries(
+      Object.entries(parsed).filter(
+        ([, value]) =>
+          value &&
+          typeof value === 'object' &&
+          typeof (value as SidebarOverride).label === 'string' &&
+          typeof (value as SidebarOverride).iconId === 'string'
+      )
+    );
+  } catch {
+    return {};
+  }
+};
+
+const loadHidden = (): string[] => {
+  const raw = localStorage.getItem(HIDDEN_STORAGE_KEY);
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((value): value is string => typeof value === 'string');
+  } catch {
+    return [];
+  }
+};
+
+sidebarOverrides.value = loadOverrides();
+hiddenBaseIds.value = loadHidden();
+
+const openAddGroup = () => {
+  editTarget.value = null;
+  isGroupDialogOpen.value = true;
+};
+
+const openSettings = () => {
+  isSettingsOpen.value = true;
+};
+
+const toggleSettings = () => {
+  isSettingsOpen.value = !isSettingsOpen.value;
+};
+
+const openAddIcon = () => {
+  addIconMode.value = 'add';
+  addIconInitialTab.value = 'widgets';
+  replaceWidgetId.value = null;
+  isAddIconOpen.value = true;
+};
+
+const openEditWidget = (widgetId: string) => {
+  addIconMode.value = 'replace-widget';
+  addIconInitialTab.value = 'widgets';
+  replaceWidgetId.value = widgetId;
+  isAddIconOpen.value = true;
+};
+
+const openEditIcon = (iconId: string) => {
+  const icon = layoutStore.icons.find(item => item.id === iconId);
+  if (!icon) return;
+  editingIcon.value = { ...icon };
+  isEditIconOpen.value = true;
+};
+
+const openEditGroup = (payload: { id: string; source: 'base' | 'group' }) => {
+  editTarget.value = payload;
+  isGroupDialogOpen.value = true;
+};
+
+const handleRemoveGroup = (payload: { id: string; source: 'base' | 'group' }) => {
+  if (payload.source === 'group') {
+    sidebarGroups.value = sidebarGroups.value.filter(group => group.id !== payload.id);
+    localStorage.setItem(GROUPS_STORAGE_KEY, JSON.stringify(sidebarGroups.value));
+    return;
+  }
+  if (!hiddenBaseIds.value.includes(payload.id)) {
+    hiddenBaseIds.value = [...hiddenBaseIds.value, payload.id];
+    localStorage.setItem(HIDDEN_STORAGE_KEY, JSON.stringify(hiddenBaseIds.value));
+  }
+};
+
+const dialogTitle = computed(() => (editTarget.value ? '编辑分组' : '添加分组'));
+const dialogSubmitText = computed(() => (editTarget.value ? '保存' : '添加'));
+
+const dialogInitialData = computed(() => {
+  if (!editTarget.value) return null;
+  if (editTarget.value.source === 'group') {
+    return sidebarGroups.value.find(group => group.id === editTarget.value?.id) ?? null;
+  }
+  const base = sidebarBaseItems.find(item => item.id === editTarget.value?.id);
+  if (!base) return null;
+  const override = sidebarOverrides.value[base.id];
+  return {
+    id: base.id,
+    label: override?.label ?? base.label,
+    iconId: override?.iconId ?? base.iconId ?? '',
+  };
+});
+
+const dialogInitialName = computed(() => dialogInitialData.value?.label ?? '');
+const dialogInitialIconId = computed(() => dialogInitialData.value?.iconId ?? '');
+
+const handleGroupSubmit = (payload: { name: string; iconId: string }) => {
+  const name = payload.name.trim();
+  if (!name) return;
+  if (editTarget.value) {
+    if (editTarget.value.source === 'group') {
+      sidebarGroups.value = sidebarGroups.value.map(group =>
+        group.id === editTarget.value?.id
+          ? { ...group, label: name, iconId: payload.iconId }
+          : group
+      );
+      localStorage.setItem(GROUPS_STORAGE_KEY, JSON.stringify(sidebarGroups.value));
+    } else {
+      sidebarOverrides.value = {
+        ...sidebarOverrides.value,
+        [editTarget.value.id]: { label: name, iconId: payload.iconId },
+      };
+      localStorage.setItem(OVERRIDES_STORAGE_KEY, JSON.stringify(sidebarOverrides.value));
+      hiddenBaseIds.value = hiddenBaseIds.value.filter(id => id !== editTarget.value?.id);
+      localStorage.setItem(HIDDEN_STORAGE_KEY, JSON.stringify(hiddenBaseIds.value));
+    }
+  } else {
+    const group: SidebarGroup = {
+      id: `group-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
+      label: name,
+      iconId: payload.iconId,
+    };
+    sidebarGroups.value = [...sidebarGroups.value, group];
+    localStorage.setItem(GROUPS_STORAGE_KEY, JSON.stringify(sidebarGroups.value));
+  }
+  isGroupDialogOpen.value = false;
+};
+
+const handleAddIcon = (payload: { name: string; url: string; bgColor: string; img?: string; text?: string }) => {
+  layoutStore.addIcon({
+    name: payload.name,
+    url: payload.url,
+    bgColor: payload.bgColor,
+    img: payload.img,
+    text: payload.text,
+  });
+};
+
+const handleEditIcon = (payload: { id: string; name: string; url: string; bgColor: string; img?: string; text?: string }) => {
+  layoutStore.updateIcon(payload.id, {
+    name: payload.name,
+    url: payload.url,
+    bgColor: payload.bgColor,
+    img: payload.img,
+    text: payload.text,
+  });
+};
+
+const handleAddWidget = (payload: { component: string; size?: '1x1' | '1x2' | '2x1' | '2x2' | '2x4'; data?: any }) => {
+  widgetsStore.addWidget({
+    component: payload.component,
+    size: payload.size,
+    data: payload.data,
+  });
+};
+
+const handleReplaceWidget = (payload: { id: string; component: string; size?: '1x1' | '1x2' | '2x1' | '2x2' | '2x4'; data?: any }) => {
+  widgetsStore.replaceWidget(payload.id, {
+    component: payload.component,
+    size: payload.size,
+    data: payload.data,
+  });
+};
+
+watch(isGroupDialogOpen, open => {
+  if (!open) {
+    editTarget.value = null;
+  }
+});
+
+watch(isEditIconOpen, open => {
+  if (!open) {
+    editingIcon.value = null;
+  }
+});
+
+watch(isAddIconOpen, open => {
+  if (!open) {
+    addIconMode.value = 'add';
+    addIconInitialTab.value = 'widgets';
+    replaceWidgetId.value = null;
+  }
+});
 </script>
 
 <style lang="scss">
diff --git a/app/src/components/AddGroupDialog/index.vue b/app/src/components/AddGroupDialog/index.vue
new file mode 100644
index 0000000..b98c2ad
--- /dev/null
+++ b/app/src/components/AddGroupDialog/index.vue
@@ -0,0 +1,324 @@
+<template>
+  <teleport to="body">
+    <transition name="add-group-fade" appear>
+      <div
+        v-if="open"
+        class="add-group-backdrop"
+        @click.self="closeDialog"
+      >
+        <div class="add-group-dialog" role="dialog" aria-modal="true" :aria-label="titleText">
+          <div class="add-group-title">{{ titleText }}</div>
+          <div class="add-group-icons" role="listbox" aria-label="选择分组图标">
+            <button
+              v-for="icon in iconOptions"
+              :key="icon.id"
+              class="add-group-icon"
+              :class="{ selected: selectedIcon === icon.id }"
+              type="button"
+              :title="icon.label"
+              :aria-pressed="selectedIcon === icon.id"
+              @click="selectIcon(icon)"
+            >
+              <Icon class="add-group-icon-svg" :icon="icon.icon" aria-hidden="true" />
+            </button>
+          </div>
+          <div class="add-group-field">
+            <label for="add-group-name">名称</label>
+            <input
+              id="add-group-name"
+              ref="inputRef"
+              v-model="name"
+              type="text"
+              maxlength="12"
+              placeholder="常用"
+              @keydown.enter.prevent="submit"
+            />
+          </div>
+          <div class="add-group-actions">
+            <button class="btn btn-primary" type="button" :disabled="!canSubmit" @click="submit">
+              {{ submitText }}
+            </button>
+            <button class="btn btn-secondary" type="button" @click="closeDialog">
+              取消
+            </button>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { Icon } from '@iconify/vue';
+import { groupIcons } from '@/config/groupIcons';
+
+const props = defineProps<{
+  open: boolean;
+  title?: string;
+  submitText?: string;
+  initialName?: string;
+  initialIconId?: string;
+}>();
+
+const emit = defineEmits<{
+  (event: 'update:open', value: boolean): void;
+  (event: 'submit', payload: { name: string; iconId: string }): void;
+}>();
+
+const iconOptions = groupIcons;
+
+const inputRef = ref<HTMLInputElement | null>(null);
+const name = ref('');
+const selectedIcon = ref(iconOptions[0]?.id ?? '');
+
+const canSubmit = computed(() => name.value.trim().length > 0);
+const titleText = computed(() => props.title ?? '添加分组');
+const submitText = computed(() => props.submitText ?? '保存');
+
+const resetForm = () => {
+  const fallbackIcon = iconOptions[0];
+  const providedIcon = props.initialIconId?.trim();
+  const initialIcon = providedIcon || fallbackIcon?.id || '';
+  const providedName = props.initialName?.trim();
+  const initialLabel =
+    providedName ||
+    iconOptions.find(icon => icon.id === initialIcon)?.label ||
+    fallbackIcon?.label ||
+    '';
+  selectedIcon.value = initialIcon;
+  name.value = initialLabel;
+};
+
+const selectIcon = (icon: (typeof iconOptions)[number]) => {
+  selectedIcon.value = icon.id;
+  name.value = icon.label;
+};
+
+const closeDialog = () => {
+  emit('update:open', false);
+};
+
+const submit = () => {
+  if (!canSubmit.value) return;
+  emit('submit', { name: name.value.trim(), iconId: selectedIcon.value });
+};
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (!props.open) return;
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    closeDialog();
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleKeydown);
+});
+
+watch(
+  () => props.open,
+  value => {
+    if (value) {
+      resetForm();
+      nextTick(() => inputRef.value?.focus());
+    }
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/tokens.scss';
+
+.add-group-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: $z-index-modal;
+}
+
+.add-group-dialog {
+  width: min(500px, 92vw);
+  padding: 18px 20px 20px;
+  border-radius: $border-radius-large;
+  background: rgba(18, 18, 18, 0.92);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: $shadow-lg;
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur($backdrop-filter-blur) saturate($backdrop-filter-saturation);
+}
+
+.add-group-dialog::before {
+  content: '';
+  position: absolute;
+  inset: auto auto -120px -120px;
+  width: 280px;
+  height: 280px;
+  background: radial-gradient(circle, rgba(255, 149, 0, 0.4), transparent 70%);
+  pointer-events: none;
+}
+
+.add-group-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: $color-text-primary;
+  margin-bottom: 12px;
+}
+
+.add-group-icons {
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  gap: 10px;
+  padding: 12px;
+  border-radius: $border-radius-medium;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  margin-bottom: 14px;
+}
+
+.add-group-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 9px;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.02);
+  color: $color-text-secondary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color $motion-duration-sm $motion-easing-standard,
+    color $motion-duration-sm $motion-easing-standard,
+    border-color $motion-duration-sm $motion-easing-standard,
+    box-shadow $motion-duration-sm $motion-easing-standard,
+    transform $motion-duration-sm $motion-easing-standard;
+}
+
+.add-group-icon-svg {
+  width: 18px;
+  height: 18px;
+}
+
+.add-group-icon:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: $color-text-primary;
+  transform: translateY(-1px);
+}
+
+.add-group-icon.selected {
+  border-color: rgba(255, 149, 0, 0.5);
+  background: rgba(255, 149, 0, 0.18);
+  color: $color-text-primary;
+  box-shadow: 0 0 0 1px rgba(255, 149, 0, 0.35);
+}
+
+.add-group-field {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.add-group-field label {
+  font-size: 13px;
+  color: $color-text-secondary;
+  min-width: 36px;
+}
+
+.add-group-field input {
+  flex: 1;
+  height: 34px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.08);
+  color: $color-text-primary;
+  padding: 0 14px;
+  font-size: 13px;
+  outline: none;
+  transition: border-color $motion-duration-sm $motion-easing-standard,
+    box-shadow $motion-duration-sm $motion-easing-standard;
+}
+
+.add-group-field input:focus {
+  border-color: rgba(255, 149, 0, 0.5);
+  box-shadow: 0 0 0 2px rgba(255, 149, 0, 0.2);
+}
+
+.add-group-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.btn {
+  padding: 6px 16px;
+  border-radius: 999px;
+  border: none;
+  font-size: 13px;
+  cursor: pointer;
+  transition: transform $motion-duration-sm $motion-easing-standard,
+    box-shadow $motion-duration-sm $motion-easing-standard,
+    background-color $motion-duration-sm $motion-easing-standard,
+    color $motion-duration-sm $motion-easing-standard;
+}
+
+.btn-primary {
+  background: $color-accent;
+  color: #1a1206;
+  box-shadow: 0 6px 16px rgba(255, 149, 0, 0.25);
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.btn-primary:not(:disabled):hover {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 18px rgba(255, 149, 0, 0.35);
+}
+
+.btn-secondary {
+  background: rgba(255, 255, 255, 0.1);
+  color: $color-text-primary;
+}
+
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.16);
+}
+
+.add-group-fade-enter-active,
+.add-group-fade-leave-active {
+  transition: opacity 220ms ease;
+}
+
+.add-group-fade-enter-from,
+.add-group-fade-leave-to {
+  opacity: 0;
+}
+
+.add-group-fade-enter-active .add-group-dialog,
+.add-group-fade-leave-active .add-group-dialog {
+  transition: transform 240ms ease, opacity 240ms ease;
+}
+
+.add-group-fade-enter-from .add-group-dialog,
+.add-group-fade-leave-to .add-group-dialog {
+  transform: translateY(6px) scale(0.98);
+  opacity: 0;
+}
+
+@media (max-width: 520px) {
+  .add-group-icons {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+</style>
diff --git a/app/src/components/AddIconDialog/index.vue b/app/src/components/AddIconDialog/index.vue
new file mode 100644
index 0000000..5a1d78b
--- /dev/null
+++ b/app/src/components/AddIconDialog/index.vue
@@ -0,0 +1,1112 @@
+<template>
+  <teleport to="body">
+    <transition name="add-icon-fade" appear>
+      <div
+        v-if="open"
+        class="add-icon-backdrop"
+        @click.self="closeDialog"
+      >
+        <div class="add-icon-dialog" role="dialog" aria-modal="true" aria-label="添加图标">
+          <aside class="add-icon-sidebar">
+            <button
+              class="sidebar-item"
+              :class="{ active: activeTab === 'widgets' }"
+              type="button"
+              @click="setTab('widgets')"
+            >
+              <Icon class="sidebar-icon" icon="lucide:layout-grid" aria-hidden="true" />
+              小组件
+            </button>
+            <button
+              v-if="!isReplaceWidgetMode"
+              class="sidebar-item"
+              :class="{ active: activeTab === 'sites' }"
+              type="button"
+              @click="setTab('sites')"
+            >
+              <Icon class="sidebar-icon" icon="lucide:globe" aria-hidden="true" />
+              网址导航
+            </button>
+            <button
+              v-if="!isReplaceWidgetMode"
+              class="sidebar-item"
+              :class="{ active: activeTab === 'custom' }"
+              type="button"
+              @click="setTab('custom')"
+            >
+              <Icon class="sidebar-icon" icon="lucide:pencil" aria-hidden="true" />
+              自定义图标
+            </button>
+          </aside>
+          <div class="add-icon-content">
+            <button class="dialog-close" type="button" @click="closeDialog">
+              <Icon icon="lucide:x" aria-hidden="true" />
+            </button>
+            <div v-if="activeTab === 'custom'" class="custom-panel">
+            <div class="form-row">
+              <label>地址</label>
+              <div class="input-group">
+                <input
+                  ref="urlInputRef"
+                  v-model="url"
+                  type="text"
+                  placeholder="https://"
+                />
+                <button
+                  class="ghost-button"
+                  type="button"
+                  :disabled="!url.trim()"
+                  @click="fetchFavicon"
+                >
+                  获取图标
+                </button>
+              </div>
+            </div>
+            <div class="form-row">
+              <label>名称</label>
+              <input v-model="name" type="text" placeholder="网站名称" maxlength="16" />
+            </div>
+            <div class="form-row">
+              <label>图标颜色</label>
+              <div class="color-row">
+                <button
+                  v-for="item in colorOptions"
+                  :key="item.id"
+                  class="color-dot"
+                  :class="{ selected: selectedColorId === item.id }"
+                  type="button"
+                  :style="item.previewStyle"
+                  @click="selectColor(item)"
+                ></button>
+                <input
+                  ref="colorInputRef"
+                  v-model="customColor"
+                  type="color"
+                  class="color-input"
+                  @input="updateCustomColor"
+                />
+              </div>
+            </div>
+            <div class="form-row">
+              <label>图标文字</label>
+              <input v-model="iconText" type="text" placeholder="A" maxlength="2" />
+            </div>
+            <div class="icon-type-row">
+              <button
+                class="icon-type-card"
+                :class="{ active: iconType === 'text' }"
+                type="button"
+                @click="selectType('text')"
+              >
+                <div class="icon-preview" :style="{ backgroundColor: previewColor }">
+                  <span>{{ previewText }}</span>
+                </div>
+                <span class="icon-type-label">文字图标</span>
+              </button>
+              <button
+                class="icon-type-card"
+                :class="{ active: iconType === 'image' }"
+                type="button"
+                @click="triggerUpload"
+              >
+                <div class="icon-preview image" :style="imagePreviewStyle">
+                  <Icon v-if="!previewImage" icon="lucide:plus" aria-hidden="true" />
+                </div>
+                <span class="icon-type-label">上传</span>
+              </button>
+              <input
+                ref="fileInputRef"
+                class="file-input"
+                type="file"
+                accept="image/*"
+                @change="handleFileChange"
+              />
+            </div>
+            <div class="form-actions">
+              <button
+                class="btn btn-primary"
+                type="button"
+                :disabled="!canSubmit"
+                @click="submit(false)"
+              >
+                保存
+              </button>
+              <button
+                class="btn btn-secondary"
+                type="button"
+                :disabled="!canSubmit"
+                @click="submit(true)"
+              >
+                保存并继续
+              </button>
+            </div>
+            <div v-if="errorMessage" class="form-error">{{ errorMessage }}</div>
+            </div>
+            <div v-else class="list-panel">
+              <div class="list-toolbar">
+                <div class="search-input">
+                  <Icon icon="lucide:search" aria-hidden="true" />
+                  <input v-model="searchQuery" type="text" placeholder="输入并搜索" />
+                </div>
+                <button class="ghost-button small" type="button" @click="shuffleCurrent">
+                  换一批
+                </button>
+              </div>
+              <div class="category-row">
+                <button
+                  v-for="category in currentCategories"
+                  :key="category"
+                  class="category-chip"
+                  :class="{ active: activeCategory === category }"
+                  type="button"
+                  @click="activeCategory = category"
+                >
+                  {{ category }}
+                </button>
+              </div>
+              <div v-if="activeTab === 'widgets'" class="list-grid">
+                <div
+                  v-for="widget in filteredWidgets"
+                  :key="widget.id"
+                  class="list-card"
+                >
+                  <div class="list-card-header">
+                    <div class="list-card-icon">
+                      <Icon :icon="widget.icon" aria-hidden="true" />
+                    </div>
+                    <div>
+                      <div class="list-card-title">{{ widget.name }}</div>
+                      <div class="list-card-desc">{{ widget.description }}</div>
+                    </div>
+                  </div>
+                  <div class="list-card-footer">
+                    <span class="list-card-meta">{{ widget.size }}</span>
+                    <button
+                      class="card-add"
+                      type="button"
+                      @click="addWidget(widget)"
+                    >
+                      {{ isReplaceWidgetMode ? '替换' : '添加' }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div v-else-if="activeTab === 'sites'" class="list-grid">
+                <div
+                  v-for="site in filteredSites"
+                  :key="site.id"
+                  class="list-card site-card"
+                >
+                  <div class="list-card-header">
+                    <div
+                      class="site-logo"
+                      :style="{ backgroundImage: `url('${site.logo}')`, backgroundColor: site.color }"
+                    ></div>
+                    <div>
+                      <div class="list-card-title">{{ site.name }}</div>
+                      <div class="list-card-desc">{{ site.description }}</div>
+                    </div>
+                  </div>
+                  <div class="list-card-footer">
+                    <span class="list-card-meta">{{ site.meta }}</span>
+                    <button
+                      class="card-add"
+                      type="button"
+                      @click="addSite(site)"
+                    >
+                      添加
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { Icon } from '@iconify/vue';
+
+type ColorOption = {
+  id: string;
+  value: string;
+  previewStyle: Record<string, string>;
+  isCustom?: boolean;
+};
+
+type WidgetSize = '1x1' | '1x2' | '2x1' | '2x2' | '2x4';
+
+type WidgetOption = {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+  component: string;
+  size: WidgetSize;
+  category: string;
+  data?: any;
+};
+
+type SiteOption = {
+  id: string;
+  name: string;
+  description: string;
+  url: string;
+  logo: string;
+  category: string;
+  meta: string;
+  color: string;
+};
+
+const props = defineProps<{
+  open: boolean;
+  mode?: 'add' | 'replace-widget';
+  initialTab?: 'widgets' | 'sites' | 'custom';
+  targetWidgetId?: string | null;
+}>();
+
+const emit = defineEmits<{
+  (event: 'update:open', value: boolean): void;
+  (event: 'submit', payload: { name: string; url: string; bgColor: string; img?: string; text?: string }): void;
+  (event: 'add-widget', payload: { component: string; size?: WidgetSize; data?: any }): void;
+  (event: 'replace-widget', payload: { id: string; component: string; size?: WidgetSize; data?: any }): void;
+}>();
+
+const colorOptions: ColorOption[] = [
+  { id: 'blue', value: '#2f80ed', previewStyle: { backgroundColor: '#2f80ed' } },
+  { id: 'orange', value: '#f2c94c', previewStyle: { backgroundColor: '#f2c94c' } },
+  { id: 'red', value: '#eb5757', previewStyle: { backgroundColor: '#eb5757' } },
+  { id: 'brown', value: '#4f4f4f', previewStyle: { backgroundColor: '#4f4f4f' } },
+  { id: 'green', value: '#6fcf97', previewStyle: { backgroundColor: '#6fcf97' } },
+  { id: 'navy', value: '#2d9cdb', previewStyle: { backgroundColor: '#2d9cdb' } },
+  { id: 'gold', value: '#bb8f3e', previewStyle: { backgroundColor: '#bb8f3e' } },
+  { id: 'plum', value: '#9b51e0', previewStyle: { backgroundColor: '#9b51e0' } },
+  { id: 'rose', value: '#f15b5b', previewStyle: { backgroundColor: '#f15b5b' } },
+  { id: 'blue-dark', value: '#2f5fd1', previewStyle: { backgroundColor: '#2f5fd1' } },
+  { id: 'mint', value: '#8bd8bd', previewStyle: { backgroundColor: '#8bd8bd' } },
+  { id: 'custom', value: '#7a7a7a', previewStyle: { backgroundImage: 'conic-gradient(#f66, #fa0, #6f6, #6cf, #66f, #c6f, #f66)' }, isCustom: true },
+];
+
+const widgetOptions: WidgetOption[] = [
+  {
+    id: 'calendar',
+    name: '日历',
+    description: '快速查看今天日期',
+    icon: 'lucide:calendar',
+    component: 'CalendarWidget',
+    size: '1x1',
+    category: '工具',
+  },
+  {
+    id: 'hot-search',
+    name: '热搜榜',
+    description: '实时热门话题',
+    icon: 'lucide:flame',
+    component: 'HotSearchWidget',
+    size: '2x1',
+    category: '资讯',
+    data: {
+      tabs: ['微博', '抖音', '知乎'],
+      items: [
+        { title: '新品发布会', value: '78.9万' },
+        { title: '节日出行攻略', value: '62.1万' },
+        { title: '城市夜跑路线', value: '55.4万' },
+        { title: '效率工具清单', value: '41.6万' },
+      ],
+    },
+  },
+  {
+    id: 'countdown',
+    name: '倒计时',
+    description: '重要日程提醒',
+    icon: 'lucide:timer',
+    component: 'CountdownWidget',
+    size: '2x1',
+    category: '效率',
+  },
+];
+
+const siteOptions: SiteOption[] = [
+  {
+    id: 'pdf',
+    name: 'PDF转换大师',
+    description: '在线转换与压缩',
+    url: 'https://www.ilovepdf.com',
+    logo: 'https://www.google.com/s2/favicons?domain=www.ilovepdf.com&sz=128',
+    category: '效率',
+    meta: '2604',
+    color: '#2f80ed',
+  },
+  {
+    id: 'video',
+    name: '视频剪切',
+    description: '剪辑、压缩、格式转换',
+    url: 'https://www.clipchamp.com',
+    logo: 'https://www.google.com/s2/favicons?domain=www.clipchamp.com&sz=128',
+    category: '效率',
+    meta: '4.73万',
+    color: '#5b8cff',
+  },
+  {
+    id: 'figma',
+    name: 'Figma',
+    description: '在线协作设计',
+    url: 'https://www.figma.com',
+    logo: 'https://www.google.com/s2/favicons?domain=www.figma.com&sz=128',
+    category: '设计',
+    meta: '1.9万',
+    color: '#ff7262',
+  },
+  {
+    id: 'github',
+    name: 'GitHub',
+    description: '代码托管与协作',
+    url: 'https://github.com',
+    logo: 'https://www.google.com/s2/favicons?domain=github.com&sz=128',
+    category: '开发',
+    meta: '3.4万',
+    color: '#2f2f2f',
+  },
+  {
+    id: 'notion',
+    name: 'Notion',
+    description: '笔记与知识管理',
+    url: 'https://www.notion.so',
+    logo: 'https://www.google.com/s2/favicons?domain=www.notion.so&sz=128',
+    category: '工具',
+    meta: '2.6万',
+    color: '#d4b48d',
+  },
+  {
+    id: 'bilibili',
+    name: '哔哩哔哩',
+    description: '视频与创作社区',
+    url: 'https://www.bilibili.com',
+    logo: 'https://www.google.com/s2/favicons?domain=www.bilibili.com&sz=128',
+    category: '娱乐',
+    meta: '9.2万',
+    color: '#59c4f4',
+  },
+];
+
+const widgetCategories = ['全部', '效率', '工具', '资讯'];
+const siteCategories = ['全部', '效率', '工具', '开发', '设计', '创意', '娱乐', '其他'];
+
+const url = ref('');
+const name = ref('');
+const iconText = ref('');
+const selectedColorId = ref(colorOptions[0].id);
+const customColor = ref('#8a8a8a');
+const iconType = ref<'text' | 'image'>('text');
+const fetchedImage = ref('');
+const uploadedImage = ref('');
+const errorMessage = ref('');
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const colorInputRef = ref<HTMLInputElement | null>(null);
+const urlInputRef = ref<HTMLInputElement | null>(null);
+const activeTab = ref<'widgets' | 'sites' | 'custom'>('widgets');
+const searchQuery = ref('');
+const activeCategory = ref('全部');
+const widgetOrder = ref(widgetOptions.map(item => item.id));
+const siteOrder = ref(siteOptions.map(item => item.id));
+
+const canSubmit = computed(() => name.value.trim().length > 0);
+const previewText = computed(() => {
+  const manual = iconText.value.trim();
+  if (manual) return manual.slice(0, 2);
+  const fallback = name.value.trim();
+  return fallback ? fallback.charAt(0) : 'A';
+});
+
+const previewImage = computed(() => uploadedImage.value || fetchedImage.value);
+const previewColor = computed(() => {
+  const option = colorOptions.find(item => item.id === selectedColorId.value);
+  if (option?.isCustom) return customColor.value;
+  return option?.value ?? colorOptions[0].value;
+});
+
+const imagePreviewStyle = computed(() => ({
+  backgroundImage: previewImage.value ? `url('${previewImage.value}')` : 'none',
+}));
+
+const dialogMode = computed(() => props.mode ?? 'add');
+const isReplaceWidgetMode = computed(() => dialogMode.value === 'replace-widget');
+
+const currentCategories = computed(() =>
+  activeTab.value === 'widgets' ? widgetCategories : siteCategories
+);
+
+const orderedWidgets = computed(() => {
+  const map = new Map(widgetOptions.map(item => [item.id, item]));
+  return widgetOrder.value.map(id => map.get(id)).filter((item): item is WidgetOption => !!item);
+});
+
+const orderedSites = computed(() => {
+  const map = new Map(siteOptions.map(item => [item.id, item]));
+  return siteOrder.value.map(id => map.get(id)).filter((item): item is SiteOption => !!item);
+});
+
+const filteredWidgets = computed(() => {
+  const query = searchQuery.value.trim().toLowerCase();
+  return orderedWidgets.value.filter(item => {
+    const matchCategory = activeCategory.value === '全部' || item.category === activeCategory.value;
+    const matchQuery =
+      !query ||
+      item.name.toLowerCase().includes(query) ||
+      item.description.toLowerCase().includes(query);
+    return matchCategory && matchQuery;
+  });
+});
+
+const filteredSites = computed(() => {
+  const query = searchQuery.value.trim().toLowerCase();
+  return orderedSites.value.filter(item => {
+    const matchCategory = activeCategory.value === '全部' || item.category === activeCategory.value;
+    const matchQuery =
+      !query ||
+      item.name.toLowerCase().includes(query) ||
+      item.description.toLowerCase().includes(query);
+    return matchCategory && matchQuery;
+  });
+});
+
+const resetForm = () => {
+  url.value = '';
+  name.value = '';
+  iconText.value = '';
+  selectedColorId.value = colorOptions[0].id;
+  customColor.value = '#8a8a8a';
+  iconType.value = 'text';
+  fetchedImage.value = '';
+  uploadedImage.value = '';
+  errorMessage.value = '';
+};
+
+const setTab = (tab: 'widgets' | 'sites' | 'custom') => {
+  if (isReplaceWidgetMode.value && tab !== 'widgets') return;
+  activeTab.value = tab;
+  searchQuery.value = '';
+  activeCategory.value = tab === 'widgets' ? widgetCategories[0] : siteCategories[0];
+  if (tab === 'custom') {
+    nextTick(() => urlInputRef.value?.focus());
+  }
+};
+
+const shuffleCurrent = () => {
+  if (activeTab.value === 'widgets') {
+    widgetOrder.value = [...widgetOrder.value].sort(() => Math.random() - 0.5);
+    return;
+  }
+  if (activeTab.value === 'sites') {
+    siteOrder.value = [...siteOrder.value].sort(() => Math.random() - 0.5);
+  }
+};
+
+const closeDialog = () => {
+  emit('update:open', false);
+};
+
+const addWidget = (widget: WidgetOption) => {
+  if (isReplaceWidgetMode.value) {
+    if (!props.targetWidgetId) return;
+    emit('replace-widget', {
+      id: props.targetWidgetId,
+      component: widget.component,
+      size: widget.size,
+      data: widget.data,
+    });
+    closeDialog();
+    return;
+  }
+  emit('add-widget', {
+    component: widget.component,
+    size: widget.size,
+    data: widget.data,
+  });
+};
+
+const addSite = (site: SiteOption) => {
+  emit('submit', {
+    name: site.name,
+    url: normalizeUrl(site.url),
+    bgColor: site.color,
+    img: site.logo,
+  });
+};
+
+const selectColor = (item: ColorOption) => {
+  selectedColorId.value = item.id;
+  if (item.isCustom && colorInputRef.value) {
+    colorInputRef.value.click();
+  }
+};
+
+const updateCustomColor = () => {
+  selectedColorId.value = 'custom';
+};
+
+const selectType = (type: 'text' | 'image') => {
+  iconType.value = type;
+};
+
+const triggerUpload = () => {
+  iconType.value = 'image';
+  fileInputRef.value?.click();
+};
+
+const handleFileChange = (event: Event) => {
+  const input = event.target as HTMLInputElement | null;
+  const file = input?.files?.[0];
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = () => {
+    uploadedImage.value = String(reader.result);
+    iconType.value = 'image';
+  };
+  reader.readAsDataURL(file);
+};
+
+const normalizeUrl = (value: string) => {
+  if (!value.trim()) return '#';
+  try {
+    return new URL(value).toString();
+  } catch {
+    try {
+      return new URL(`https://${value}`).toString();
+    } catch {
+      return '#';
+    }
+  }
+};
+
+const fetchFavicon = () => {
+  errorMessage.value = '';
+  const raw = url.value.trim();
+  if (!raw) return;
+  const resolved = normalizeUrl(raw);
+  if (resolved === '#') {
+    errorMessage.value = '请输入有效的网址';
+    return;
+  }
+  const parsed = new URL(resolved);
+  const favicon = `https://www.google.com/s2/favicons?domain=${parsed.hostname}&sz=128`;
+  fetchedImage.value = favicon;
+  iconType.value = 'image';
+  if (!name.value.trim()) {
+    name.value = parsed.hostname.replace(/^www\./, '');
+  }
+};
+
+const submit = (keepOpen: boolean) => {
+  if (!canSubmit.value) return;
+  const iconPayload = {
+    name: name.value.trim(),
+    url: normalizeUrl(url.value.trim()),
+    bgColor: previewColor.value,
+    img: iconType.value === 'image' && previewImage.value ? previewImage.value : undefined,
+    text: iconType.value === 'text' ? iconText.value.trim() || previewText.value : undefined,
+  };
+  emit('submit', iconPayload);
+  if (keepOpen) {
+    resetForm();
+    nextTick(() => {
+      fileInputRef.value?.value && (fileInputRef.value.value = '');
+    });
+  } else {
+    closeDialog();
+  }
+};
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (!props.open) return;
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    closeDialog();
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleKeydown);
+});
+
+watch(
+  () => props.open,
+  value => {
+    if (value) {
+      resetForm();
+      setTab(props.initialTab ?? 'widgets');
+      nextTick(() => urlInputRef.value?.focus());
+    }
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/tokens.scss';
+
+.add-icon-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: $z-index-modal;
+}
+
+.add-icon-dialog {
+  width: min(920px, 92vw);
+  height: min(560px, 90vh);
+  display: grid;
+  grid-template-columns: 180px 1fr;
+  gap: 0;
+  border-radius: $border-radius-large;
+  background: rgba(24, 24, 24, 0.88);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: $shadow-lg;
+  overflow: hidden;
+  backdrop-filter: blur($backdrop-filter-blur) saturate($backdrop-filter-saturation);
+  position: relative;
+}
+
+.add-icon-sidebar {
+  padding: 24px 16px;
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: $border-radius-medium;
+  color: $color-text-secondary;
+  font-size: 14px;
+  background: transparent;
+  border: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color $motion-duration-sm $motion-easing-standard,
+    color $motion-duration-sm $motion-easing-standard;
+}
+
+.sidebar-item:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: $color-text-primary;
+}
+
+.sidebar-item.active {
+  background: rgba(255, 255, 255, 0.08);
+  color: $color-text-primary;
+  position: relative;
+}
+
+.sidebar-item.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 3px;
+  height: 20px;
+  transform: translateY(-50%);
+  border-radius: 2px;
+  background: $color-accent;
+}
+
+.sidebar-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.add-icon-content {
+  padding: 36px 48px 32px 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  min-height: 0;
+}
+
+.dialog-close {
+  position: absolute;
+  right: 18px;
+  top: 16px;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(255, 255, 255, 0.12);
+  color: $color-text-primary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  gap: 12px;
+  align-items: center;
+  font-size: 13px;
+  color: $color-text-secondary;
+}
+
+.form-row input {
+  height: 34px;
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.08);
+  color: $color-text-primary;
+  padding: 0 12px;
+  outline: none;
+}
+
+.input-group {
+  display: flex;
+  gap: 12px;
+}
+
+.input-group input {
+  flex: 1;
+}
+
+.ghost-button {
+  padding: 6px 14px;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  background: transparent;
+  color: $color-text-primary;
+  cursor: pointer;
+}
+
+.ghost-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.color-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.color-dot {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+}
+
+.color-dot.selected {
+  border-color: #fff;
+}
+
+.color-input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.icon-type-row {
+  display: flex;
+  gap: 14px;
+  align-items: flex-end;
+}
+
+.icon-type-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: $color-text-secondary;
+  cursor: pointer;
+}
+
+.icon-type-card.active {
+  color: $color-text-primary;
+}
+
+.icon-preview {
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 600;
+  box-shadow: $shadow-sm;
+  background-size: cover;
+  background-position: center;
+}
+
+.icon-preview.image {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+.icon-type-label {
+  font-size: 12px;
+}
+
+.file-input {
+  display: none;
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 6px;
+}
+
+.btn {
+  padding: 8px 18px;
+  border-radius: 16px;
+  border: none;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.btn-primary {
+  background: #1e88ff;
+  color: #fff;
+}
+
+.btn-secondary {
+  background: rgba(255, 255, 255, 0.12);
+  color: $color-text-primary;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.form-error {
+  color: #ff8181;
+  font-size: 12px;
+}
+
+.custom-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.list-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  height: 100%;
+  min-height: 0;
+}
+
+.list-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.search-input {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.08);
+  color: $color-text-secondary;
+  font-size: 13px;
+}
+
+.search-input input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: $color-text-primary;
+  outline: none;
+  font-size: 13px;
+}
+
+.ghost-button.small {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
+.category-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.category-chip {
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: none;
+  background: rgba(255, 255, 255, 0.08);
+  color: $color-text-secondary;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.category-chip.active {
+  background: rgba(30, 136, 255, 0.28);
+  color: $color-text-primary;
+}
+
+.list-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  overflow: auto;
+  padding-right: 4px;
+  flex: 1;
+}
+
+.list-card {
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 150px;
+}
+
+.list-card-header {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.list-card-icon,
+.site-logo {
+  width: 48px;
+  height: 48px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $color-text-primary;
+  background-size: cover;
+  background-position: center;
+}
+
+.site-logo {
+  background-size: 60%;
+  background-repeat: no-repeat;
+}
+
+.list-card-icon svg {
+  width: 22px;
+  height: 22px;
+}
+
+.list-card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.list-card-desc {
+  margin-top: 4px;
+  font-size: 12px;
+  color: $color-text-secondary;
+}
+
+.list-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
+}
+
+.list-card-meta {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.6);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.site-card .list-card-meta::before {
+  content: '🔥';
+  font-size: 12px;
+}
+
+.card-add {
+  padding: 4px 12px;
+  border-radius: 12px;
+  border: none;
+  background: #1e88ff;
+  color: #fff;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.card-add:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (max-width: 720px) {
+  .list-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.add-icon-fade-enter-active,
+.add-icon-fade-leave-active {
+  transition: opacity 220ms ease;
+}
+
+.add-icon-fade-enter-from,
+.add-icon-fade-leave-to {
+  opacity: 0;
+}
+
+.add-icon-fade-enter-active .add-icon-dialog,
+.add-icon-fade-leave-active .add-icon-dialog {
+  transition: transform 240ms ease, opacity 240ms ease;
+}
+
+.add-icon-fade-enter-from .add-icon-dialog,
+.add-icon-fade-leave-to .add-icon-dialog {
+  transform: translateY(6px) scale(0.98);
+  opacity: 0;
+}
+
+@media (max-width: 860px) {
+  .add-icon-dialog {
+    grid-template-columns: 1fr;
+  }
+
+  .add-icon-sidebar {
+    flex-direction: row;
+    justify-content: space-around;
+  }
+}
+</style>
diff --git a/app/src/components/EditIconDialog/index.vue b/app/src/components/EditIconDialog/index.vue
new file mode 100644
index 0000000..31eee5c
--- /dev/null
+++ b/app/src/components/EditIconDialog/index.vue
@@ -0,0 +1,541 @@
+<template>
+  <teleport to="body">
+    <transition name="edit-icon-fade" appear>
+      <div v-if="open" class="edit-icon-backdrop" @click.self="closeDialog">
+        <div class="edit-icon-dialog" role="dialog" aria-modal="true" aria-label="编辑图标">
+          <button class="dialog-close" type="button" @click="closeDialog">
+            <Icon icon="lucide:x" aria-hidden="true" />
+          </button>
+          <div class="form-row">
+            <label>地址</label>
+            <div class="input-group">
+              <input ref="urlInputRef" v-model="url" type="text" placeholder="https://"/>
+              <button
+                class="ghost-button"
+                type="button"
+                :disabled="!url.trim()"
+                @click="fetchFavicon"
+              >
+                获取图标
+              </button>
+            </div>
+          </div>
+          <div class="form-row">
+            <label>名称</label>
+            <input v-model="name" type="text" placeholder="网站名称" maxlength="16" />
+          </div>
+          <div class="form-row">
+            <label>图标颜色</label>
+            <div class="color-row">
+              <button
+                v-for="item in colorOptions"
+                :key="item.id"
+                class="color-dot"
+                :class="{ selected: selectedColorId === item.id }"
+                type="button"
+                :style="item.previewStyle"
+                @click="selectColor(item)"
+              ></button>
+              <input
+                ref="colorInputRef"
+                v-model="customColor"
+                type="color"
+                class="color-input"
+                @input="updateCustomColor"
+              />
+            </div>
+          </div>
+          <div class="form-row">
+            <label>图标文字</label>
+            <input v-model="iconText" type="text" placeholder="A" maxlength="2" />
+          </div>
+          <div class="icon-type-row">
+            <button
+              class="icon-type-card"
+              :class="{ active: iconType === 'current' }"
+              type="button"
+              @click="selectType('current')"
+            >
+              <div class="icon-preview" :style="currentPreviewStyle">
+                <span v-if="!currentImg">{{ currentPreviewText }}</span>
+              </div>
+              <span class="icon-type-label">当前图标</span>
+            </button>
+            <button
+              class="icon-type-card"
+              :class="{ active: iconType === 'text' }"
+              type="button"
+              @click="selectType('text')"
+            >
+              <div class="icon-preview" :style="{ backgroundColor: previewColor }">
+                <span>{{ previewText }}</span>
+              </div>
+              <span class="icon-type-label">文字图标</span>
+            </button>
+            <button
+              class="icon-type-card"
+              :class="{ active: iconType === 'image' }"
+              type="button"
+              @click="triggerUpload"
+            >
+              <div class="icon-preview image" :style="imagePreviewStyle">
+                <Icon v-if="!previewImage" icon="lucide:plus" aria-hidden="true" />
+              </div>
+              <span class="icon-type-label">上传</span>
+            </button>
+            <input
+              ref="fileInputRef"
+              class="file-input"
+              type="file"
+              accept="image/*"
+              @change="handleFileChange"
+            />
+          </div>
+          <div class="form-actions">
+            <button class="btn btn-primary" type="button" :disabled="!canSubmit" @click="submit">
+              保存
+            </button>
+          </div>
+          <div v-if="errorMessage" class="form-error">{{ errorMessage }}</div>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { Icon } from '@iconify/vue';
+
+type IconItem = {
+  id: string;
+  name: string;
+  url: string;
+  img?: string;
+  text?: string;
+  bgColor?: string;
+};
+
+type ColorOption = {
+  id: string;
+  value: string;
+  previewStyle: Record<string, string>;
+  isCustom?: boolean;
+};
+
+const props = defineProps<{
+  open: boolean;
+  icon: IconItem | null;
+}>();
+
+const emit = defineEmits<{
+  (event: 'update:open', value: boolean): void;
+  (event: 'submit', payload: { id: string; name: string; url: string; bgColor: string; img?: string; text?: string }): void;
+}>();
+
+const colorOptions: ColorOption[] = [
+  { id: 'blue', value: '#2f80ed', previewStyle: { backgroundColor: '#2f80ed' } },
+  { id: 'orange', value: '#f2c94c', previewStyle: { backgroundColor: '#f2c94c' } },
+  { id: 'red', value: '#eb5757', previewStyle: { backgroundColor: '#eb5757' } },
+  { id: 'brown', value: '#4f4f4f', previewStyle: { backgroundColor: '#4f4f4f' } },
+  { id: 'green', value: '#6fcf97', previewStyle: { backgroundColor: '#6fcf97' } },
+  { id: 'navy', value: '#2d9cdb', previewStyle: { backgroundColor: '#2d9cdb' } },
+  { id: 'gold', value: '#bb8f3e', previewStyle: { backgroundColor: '#bb8f3e' } },
+  { id: 'plum', value: '#9b51e0', previewStyle: { backgroundColor: '#9b51e0' } },
+  { id: 'rose', value: '#f15b5b', previewStyle: { backgroundColor: '#f15b5b' } },
+  { id: 'blue-dark', value: '#2f5fd1', previewStyle: { backgroundColor: '#2f5fd1' } },
+  { id: 'mint', value: '#8bd8bd', previewStyle: { backgroundColor: '#8bd8bd' } },
+  { id: 'custom', value: '#7a7a7a', previewStyle: { backgroundImage: 'conic-gradient(#f66, #fa0, #6f6, #6cf, #66f, #c6f, #f66)' }, isCustom: true },
+];
+
+const url = ref('');
+const name = ref('');
+const iconText = ref('');
+const selectedColorId = ref(colorOptions[0].id);
+const customColor = ref('#8a8a8a');
+const iconType = ref<'current' | 'text' | 'image'>('current');
+const currentImg = ref('');
+const currentText = ref('');
+const fetchedImage = ref('');
+const uploadedImage = ref('');
+const errorMessage = ref('');
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const colorInputRef = ref<HTMLInputElement | null>(null);
+const urlInputRef = ref<HTMLInputElement | null>(null);
+
+const canSubmit = computed(() => {
+  if (!name.value.trim() || !props.icon) return false;
+  if (iconType.value === 'image' && !previewImage.value) return false;
+  return true;
+});
+
+const previewText = computed(() => {
+  const manual = iconText.value.trim();
+  if (manual) return manual.slice(0, 2);
+  const fallback = name.value.trim();
+  return fallback ? fallback.charAt(0) : 'A';
+});
+
+const currentPreviewText = computed(() => {
+  if (currentText.value.trim()) return currentText.value.trim().slice(0, 2);
+  const fallback = name.value.trim();
+  return fallback ? fallback.charAt(0) : 'A';
+});
+
+const previewImage = computed(() => uploadedImage.value || fetchedImage.value);
+
+const previewColor = computed(() => {
+  const option = colorOptions.find(item => item.id === selectedColorId.value);
+  if (option?.isCustom) return customColor.value;
+  return option?.value ?? colorOptions[0].value;
+});
+
+const currentPreviewStyle = computed(() => ({
+  backgroundColor: previewColor.value,
+  backgroundImage: currentImg.value ? `url('${currentImg.value}')` : 'none',
+}));
+
+const imagePreviewStyle = computed(() => ({
+  backgroundImage: previewImage.value ? `url('${previewImage.value}')` : 'none',
+}));
+
+const normalizeUrl = (value: string) => {
+  if (!value.trim()) return '#';
+  try {
+    return new URL(value).toString();
+  } catch {
+    try {
+      return new URL(`https://${value}`).toString();
+    } catch {
+      return '#';
+    }
+  }
+};
+
+const closeDialog = () => {
+  emit('update:open', false);
+};
+
+const selectColor = (item: ColorOption) => {
+  selectedColorId.value = item.id;
+  if (item.isCustom && colorInputRef.value) {
+    colorInputRef.value.click();
+  }
+};
+
+const updateCustomColor = () => {
+  selectedColorId.value = 'custom';
+};
+
+const selectType = (type: 'current' | 'text' | 'image') => {
+  iconType.value = type;
+};
+
+const triggerUpload = () => {
+  iconType.value = 'image';
+  fileInputRef.value?.click();
+};
+
+const handleFileChange = (event: Event) => {
+  const input = event.target as HTMLInputElement | null;
+  const file = input?.files?.[0];
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = () => {
+    uploadedImage.value = String(reader.result);
+    iconType.value = 'image';
+  };
+  reader.readAsDataURL(file);
+};
+
+const fetchFavicon = () => {
+  errorMessage.value = '';
+  const raw = url.value.trim();
+  if (!raw) return;
+  const resolved = normalizeUrl(raw);
+  if (resolved === '#') {
+    errorMessage.value = '请输入有效的网址';
+    return;
+  }
+  const parsed = new URL(resolved);
+  const favicon = `https://www.google.com/s2/favicons?domain=${parsed.hostname}&sz=128`;
+  fetchedImage.value = favicon;
+  iconType.value = 'image';
+};
+
+const submit = () => {
+  if (!props.icon || !canSubmit.value) return;
+  const payload = {
+    id: props.icon.id,
+    name: name.value.trim(),
+    url: normalizeUrl(url.value.trim()),
+    bgColor: previewColor.value,
+    img: undefined as string | undefined,
+    text: undefined as string | undefined,
+  };
+  if (iconType.value === 'current') {
+    payload.img = currentImg.value || undefined;
+    payload.text = currentImg.value ? undefined : currentText.value.trim() || currentPreviewText.value;
+  } else if (iconType.value === 'text') {
+    payload.text = iconText.value.trim() || previewText.value;
+  } else if (iconType.value === 'image') {
+    payload.img = previewImage.value || undefined;
+  }
+  emit('submit', payload);
+  closeDialog();
+};
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (!props.open) return;
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    closeDialog();
+  }
+};
+
+const initFromIcon = () => {
+  if (!props.icon) return;
+  url.value = props.icon.url ?? '';
+  name.value = props.icon.name ?? '';
+  iconText.value = props.icon.text ?? '';
+  currentImg.value = props.icon.img ?? '';
+  currentText.value = props.icon.text ?? '';
+  fetchedImage.value = '';
+  uploadedImage.value = '';
+  errorMessage.value = '';
+  iconType.value = props.icon.img ? 'current' : 'text';
+  const match = colorOptions.find(item => item.value === props.icon?.bgColor);
+  if (match) {
+    selectedColorId.value = match.id;
+  } else if (props.icon.bgColor) {
+    selectedColorId.value = 'custom';
+    customColor.value = props.icon.bgColor;
+  } else {
+    selectedColorId.value = colorOptions[0].id;
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleKeydown);
+});
+
+watch(
+  () => [props.open, props.icon?.id],
+  ([open]) => {
+    if (open) {
+      initFromIcon();
+      nextTick(() => urlInputRef.value?.focus());
+    }
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/tokens.scss';
+
+.edit-icon-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: $z-index-modal;
+}
+
+.edit-icon-dialog {
+  width: min(860px, 90vw);
+  padding: 28px 36px 32px;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.96);
+  color: #2a2a2a;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
+  position: relative;
+}
+
+.dialog-close {
+  position: absolute;
+  top: 16px;
+  right: 18px;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0, 0, 0, 0.06);
+  color: #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  gap: 12px;
+  align-items: center;
+  font-size: 13px;
+  color: #6b6b6b;
+  margin-bottom: 12px;
+}
+
+.form-row input {
+  height: 34px;
+  border-radius: 18px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: rgba(0, 0, 0, 0.04);
+  color: #2a2a2a;
+  padding: 0 12px;
+  outline: none;
+}
+
+.input-group {
+  display: flex;
+  gap: 12px;
+}
+
+.input-group input {
+  flex: 1;
+}
+
+.ghost-button {
+  padding: 6px 14px;
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: transparent;
+  color: #2a2a2a;
+  cursor: pointer;
+}
+
+.ghost-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.color-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.color-dot {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+}
+
+.color-dot.selected {
+  border-color: #111;
+}
+
+.color-input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.icon-type-row {
+  display: flex;
+  gap: 14px;
+  align-items: flex-end;
+  margin: 10px 0 18px;
+}
+
+.icon-type-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: #7a7a7a;
+  cursor: pointer;
+}
+
+.icon-type-card.active {
+  color: #2a2a2a;
+}
+
+.icon-preview {
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  background: rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 600;
+  background-size: cover;
+  background-position: center;
+}
+
+.icon-preview.image {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.icon-type-label {
+  font-size: 12px;
+}
+
+.file-input {
+  display: none;
+}
+
+.form-actions {
+  margin-top: 4px;
+}
+
+.btn {
+  padding: 8px 28px;
+  border-radius: 16px;
+  border: none;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.btn-primary {
+  background: #1e88ff;
+  color: #fff;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.form-error {
+  color: #e24b4b;
+  font-size: 12px;
+  margin-top: 8px;
+}
+
+.edit-icon-fade-enter-active,
+.edit-icon-fade-leave-active {
+  transition: opacity 220ms ease;
+}
+
+.edit-icon-fade-enter-from,
+.edit-icon-fade-leave-to {
+  opacity: 0;
+}
+
+.edit-icon-fade-enter-active .edit-icon-dialog,
+.edit-icon-fade-leave-active .edit-icon-dialog {
+  transition: transform 240ms ease, opacity 240ms ease;
+}
+
+.edit-icon-fade-enter-from .edit-icon-dialog,
+.edit-icon-fade-leave-to .edit-icon-dialog {
+  transform: translateY(6px) scale(0.98);
+  opacity: 0;
+}
+</style>
diff --git a/app/src/components/GridCanvas/index.vue b/app/src/components/GridCanvas/index.vue
index f7b85b2..553806d 100644
--- a/app/src/components/GridCanvas/index.vue
+++ b/app/src/components/GridCanvas/index.vue
@@ -4,6 +4,7 @@ import Muuri from 'muuri';
 import { useLayoutStore } from '@/store/useLayoutStore';
 import { useWidgetsStore } from '@/store/useWidgetsStore';
 import { useUIStore } from '@/store/useUIStore';
+import { useSettingsStore } from '@/store/useSettingsStore';
 import IconCard from '@/components/IconCard/index.vue';
 import WidgetCard from '@/components/WidgetCard/index.vue';
 
@@ -15,6 +16,7 @@ interface Icon {
   name: string;
   url: string;
   img?: string;
+  text?: string;
   bgColor?: string;
   size?: GridItemSize;
 }
@@ -41,6 +43,7 @@ const GRID_ORDER_STORAGE_KEY = 'itab_grid_order';
 const layoutStore = useLayoutStore();
 const widgetsStore = useWidgetsStore();
 const uiStore = useUIStore();
+const settingsStore = useSettingsStore();
 const gridRef = ref<HTMLElement | null>(null);
 const grid = ref<any | null>(null);
 const isDragging = ref(false);
@@ -51,6 +54,9 @@ const resizedKeys = ref(new Set<string>());
 const pendingResizedKeys = new Set<string>();
 const widgetSizeMap = new Map<string, GridItemSize>();
 const iconSizeMap = new Map<string, GridItemSize>();
+const enteringKeys = ref(new Set<string>());
+const previousIconIds = ref(new Set<string>());
+const previousWidgetIds = ref(new Set<string>());
 const layoutAnimationMs = 240;
 const layoutEasing = 'cubic-bezier(0.4, 0, 0.2, 1)';
 
@@ -59,9 +65,10 @@ const buildDefaultOrder = (): GridOrderEntry[] => [
   ...layoutStore.icons.map(icon => ({ id: icon.id, type: 'icon' as const })),
 ];
 
-const persistGridOrder = (order: GridOrderEntry[]) => {
+const applyGridOrder = (order: GridOrderEntry[], syncStoreOrder = true) => {
   gridOrder.value = order;
   localStorage.setItem(GRID_ORDER_STORAGE_KEY, JSON.stringify(order));
+  if (!syncStoreOrder) return;
   const iconOrder = order.filter(item => item.type === 'icon').map(item => item.id);
   const widgetOrder = order.filter(item => item.type === 'widget').map(item => item.id);
   if (iconOrder.length) {
@@ -87,7 +94,7 @@ const loadGridOrder = () => {
   if (!gridOrder.value.length) {
     gridOrder.value = buildDefaultOrder();
   }
-  persistGridOrder(gridOrder.value);
+  applyGridOrder(gridOrder.value, true);
 };
 
 const ensureOrderConsistency = () => {
@@ -124,7 +131,7 @@ const ensureOrderConsistency = () => {
     });
 
   if (orderChanged) {
-    persistGridOrder(nextOrder);
+    applyGridOrder(nextOrder, false);
   } else {
     gridOrder.value = nextOrder;
   }
@@ -176,7 +183,8 @@ const handleClick = (event: MouseEvent) => {
   if (!itemEl || itemEl.dataset.type !== 'icon') return;
   const link = target.closest('a') as HTMLAnchorElement | null;
   if (link && link.href) {
-    window.open(link.href, '_blank');
+    const targetMode = settingsStore.openInNewTab ? '_blank' : '_self';
+    window.open(link.href, targetMode);
   }
 };
 
@@ -190,7 +198,10 @@ const handleClickCapture = (event: MouseEvent) => {
 const handleContextMenu = (event: MouseEvent) => {
   const target = event.target as HTMLElement;
   const itemEl = target.closest('.grid-item') as HTMLElement | null;
-  if (!itemEl) return;
+  if (!itemEl) {
+    uiStore.openContextMenu(event.clientX, event.clientY, null, 'desktop');
+    return;
+  }
   const id = itemEl.dataset.id;
   const type = itemEl.dataset.type as GridItemType | undefined;
   if (id && type) {
@@ -211,15 +222,31 @@ const persistOrderFromGrid = async () => {
     }
   }
   if (nextOrder.length) {
-    persistGridOrder(nextOrder);
+    applyGridOrder(nextOrder, true);
   }
   await nextTick();
   grid.value?.synchronize();
   grid.value?.layout();
 };
 
+const syncGridItems = () => {
+  if (!grid.value || !gridRef.value) return;
+  const existingItems = grid.value.getItems() ?? [];
+  const existingElements = new Set(existingItems.map((item: any) => item.getElement()));
+  const domElements = Array.from(gridRef.value.querySelectorAll('.grid-item'));
+  const toAdd = domElements.filter(element => !existingElements.has(element));
+  if (toAdd.length) {
+    grid.value.add(toAdd, { layout: false });
+  }
+  const toRemove = existingItems.filter((item: any) => !gridRef.value?.contains(item.getElement()));
+  if (toRemove.length) {
+    grid.value.remove(toRemove, { removeElements: false });
+  }
+};
+
 const refreshLayout = async (instant = false) => {
   await nextTick();
+  syncGridItems();
   grid.value?.refreshItems();
   if (instant) {
     grid.value?.layout(true);
@@ -256,6 +283,8 @@ const syncSizeMap = (
 
 onMounted(async () => {
   loadGridOrder();
+  previousIconIds.value = new Set(layoutStore.icons.map(icon => icon.id));
+  previousWidgetIds.value = new Set(widgetsStore.widgets.map(widget => widget.id));
   await nextTick();
   if (!gridRef.value) return;
   grid.value = new Muuri(gridRef.value, {
@@ -267,7 +296,7 @@ onMounted(async () => {
     },
     dragSort: true,
     layout: {
-      fillGaps: true,
+      fillGaps: settingsStore.autoAlign,
       rounding: true,
     },
     layoutDuration: layoutAnimationMs,
@@ -297,19 +326,36 @@ onMounted(async () => {
   });
 
   grid.value.on('layoutEnd', () => {
-    if (!pendingResizedKeys.size) return;
-    pendingResizedKeys.clear();
-    resizedKeys.value = new Set<string>();
+    if (pendingResizedKeys.size) {
+      pendingResizedKeys.clear();
+      resizedKeys.value = new Set<string>();
+    }
+    if (enteringKeys.value.size) {
+      enteringKeys.value = new Set<string>();
+    }
   });
 
   grid.value.layout(true);
 });
 
 watch(
-  () => [layoutStore.icons.length, widgetsStore.widgets.length],
-  () => {
+  () => [layoutStore.icons.map(icon => icon.id), widgetsStore.widgets.map(widget => widget.id)],
+  ([iconIds, widgetIds]) => {
     ensureOrderConsistency();
-    refreshLayout();
+    const nextIconIds = new Set(iconIds);
+    const nextWidgetIds = new Set(widgetIds);
+    const addedIcons = iconIds.filter(id => !previousIconIds.value.has(id));
+    const addedWidgets = widgetIds.filter(id => !previousWidgetIds.value.has(id));
+    if (addedIcons.length || addedWidgets.length) {
+      const nextEntering = new Set(enteringKeys.value);
+      for (const id of addedIcons) nextEntering.add(`icon:${id}`);
+      for (const id of addedWidgets) nextEntering.add(`widget:${id}`);
+      enteringKeys.value = nextEntering;
+    }
+    previousIconIds.value = nextIconIds;
+    previousWidgetIds.value = nextWidgetIds;
+    const instant = addedIcons.length > 0 || addedWidgets.length > 0;
+    refreshLayout(instant);
   }
 );
 
@@ -341,6 +387,28 @@ watch(
   }
 );
 
+watch(
+  () => settingsStore.autoAlign,
+  value => {
+    if (!grid.value) return;
+    // Muuri has no public setter for fillGaps; update internal setting and relayout.
+    grid.value._settings.layout.fillGaps = value;
+    grid.value.layout(true);
+  }
+);
+
+watch(
+  () => [
+    settingsStore.layoutDensity,
+    settingsStore.iconDensity,
+    settingsStore.compactSidebar,
+  ],
+  () => {
+    if (!grid.value) return;
+    refreshLayout(true);
+  }
+);
+
 onUnmounted(() => {
   pendingResizedKeys.clear();
   grid.value?.destroy();
@@ -363,7 +431,10 @@ onUnmounted(() => {
       class="grid-item"
       :class="[
         `size-${item.type === 'widget' ? item.widget.size : (item.icon.size ?? '1x1')}`,
-        { 'is-resized': resizedKeys.has(`${item.type}:${item.id}`) }
+        {
+          'is-resized': resizedKeys.has(`${item.type}:${item.id}`),
+          'is-entering': enteringKeys.has(`${item.type}:${item.id}`)
+        }
       ]"
       :data-id="item.id"
       :data-type="item.type"
@@ -388,7 +459,8 @@ onUnmounted(() => {
   -ms-user-select: none;      /* IE 10+/Edge 浏览器 */
   --cell-size: var(--grid-cell-size);
   --cell-gap: var(--grid-gap);
-  padding: calc(var(--cell-gap) / 2);
+  --cell-gap-padding: max(var(--cell-gap), 0px);
+  padding: calc(var(--cell-gap-padding) / 2);
   box-sizing: border-box;
 }
 
@@ -399,6 +471,7 @@ onUnmounted(() => {
   margin: calc(var(--cell-gap) / 2);
   cursor: grab;
   will-change: transform;
+  transition: opacity 160ms ease;
 }
 
 .grid-item.is-resized {
@@ -406,6 +479,10 @@ onUnmounted(() => {
   border-radius: $border-radius-small;
 }
 
+.grid-item.is-entering {
+  opacity: 0;
+}
+
 .grid-item.size-1x2 {
   height: calc(var(--cell-size) * 2 + var(--cell-gap));
 }
diff --git a/app/src/components/IconCard/index.vue b/app/src/components/IconCard/index.vue
index 796a50e..640cd4a 100644
--- a/app/src/components/IconCard/index.vue
+++ b/app/src/components/IconCard/index.vue
@@ -8,8 +8,9 @@
   >
     <div class="icon-card" :style="{ backgroundColor: props.icon.bgColor }">
       <img v-if="props.icon.img" :src="props.icon.img" :alt="props.icon.name" />
-      <span v-else>{{ props.icon.name.charAt(0) }}</span>
+      <span v-else>{{ props.icon.text?.trim() || props.icon.name.charAt(0) }}</span>
     </div>
+    <div class="card-spacer"></div>
     <div class="label">{{ props.icon.name }}</div>
   </a>
 </template>
@@ -23,6 +24,7 @@ interface Icon {
   url: string;
   size?: IconSize;
   img?: string;
+  text?: string;
   bgColor?: string;
 }
 
@@ -36,14 +38,13 @@ const props = defineProps<{
 @import '@/styles/tokens.scss';
 
 .icon-card-wrapper {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) var(--icon-label-margin-top) auto;
   align-items: stretch;
-  justify-content: flex-start;
   width: 100%;
   height: 100%;
   text-decoration: none;
-  border-radius: $border-radius-small;
+  border-radius: var(--icon-radius, #{$border-radius-small});
   padding: var(--icon-card-padding);
   transition: transform $motion-duration-sm $motion-easing-standard;
   user-select: none; // 拖拽时避免选中文本
@@ -59,9 +60,9 @@ const props = defineProps<{
 
 .icon-card {
   width: 100%;
-  flex: 1 1 auto;
+  height: 100%;
   min-height: 0;
-  border-radius: $border-radius-small;
+  border-radius: var(--icon-radius, #{$border-radius-small});
   display: flex;
   align-items: center;
   justify-content: center;
@@ -70,7 +71,6 @@ const props = defineProps<{
   color: white;
   box-shadow: $shadow-md;
   transition: box-shadow $motion-duration-sm $motion-easing-standard;
-  margin-bottom: var(--icon-label-margin-top);
   background-size: cover;
   background-position: center;
   pointer-events: none; // 指针事件交给外层容器处理
@@ -78,20 +78,21 @@ const props = defineProps<{
   img {
     width: 100%;
     height: 100%;
-    border-radius: $border-radius-small;
+    border-radius: var(--icon-radius, #{$border-radius-small});
     object-fit: cover;
   }
 }
 
-.icon-card-wrapper.size-1x1 {
-  align-items: center;
-  justify-content: center;
+.card-spacer {
+  height: 100%;
+  pointer-events: none;
 }
 
 .icon-card-wrapper.size-1x1 .icon-card {
-  width: var(--icon-size);
-  height: var(--icon-size);
-  flex: 0 0 auto;
+  width: auto;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  justify-self: center;
 }
 
 .label {
@@ -99,6 +100,7 @@ const props = defineProps<{
   color: $color-text-primary;
   text-align: center;
   width: 100%;
+  display: var(--icon-label-display, block);
   white-space: normal;
   word-break: break-word;
   line-height: 1.2;
diff --git a/app/src/components/MainContent/index.vue b/app/src/components/MainContent/index.vue
index 9411977..66f0b0a 100644
--- a/app/src/components/MainContent/index.vue
+++ b/app/src/components/MainContent/index.vue
@@ -1,8 +1,13 @@
 <template>
-  <main class="main-content">
+  <main class="main-content" @contextmenu="handleDesktopContextMenu">
     <div class="main-content-container">
-      <TheClock />
-      <TheSearchBar />
+      <TheClock
+        v-if="showClock"
+        :show-date="showDate"
+        :show-seconds="showSeconds"
+        :use-24-hour="use24Hour"
+      />
+      <TheSearchBar v-if="showSearch" />
       <GridCanvas />
     </div>
   </main>
@@ -10,11 +15,28 @@
 
 <script setup lang="ts">
 
+import { useUIStore } from '@/store/useUIStore';
 import TheClock from '@/components/TheClock/index.vue';
 
 import TheSearchBar from '@/components/TheSearchBar/index.vue';
 
 import GridCanvas from '@/components/GridCanvas/index.vue';
+import { useSettingsStore } from '@/store/useSettingsStore';
+import { storeToRefs } from 'pinia';
+
+const uiStore = useUIStore();
+const settingsStore = useSettingsStore();
+const { showSearch, showClock, showDate, showSeconds, use24Hour } = storeToRefs(settingsStore);
+
+const handleDesktopContextMenu = (event: MouseEvent) => {
+  const target = event.target as HTMLElement | null;
+  if (!target) return;
+  if (target.closest('.grid-item')) return;
+  if (target.closest('.grid-canvas')) return;
+  if (target.closest('input, textarea')) return;
+  event.preventDefault();
+  uiStore.openContextMenu(event.clientX, event.clientY, null, 'desktop');
+};
 
 </script>
 
diff --git a/app/src/components/SettingsPanel/index.vue b/app/src/components/SettingsPanel/index.vue
new file mode 100644
index 0000000..a9a3aee
--- /dev/null
+++ b/app/src/components/SettingsPanel/index.vue
@@ -0,0 +1,1240 @@
+<template>
+  <teleport to="body">
+    <transition name="settings-panel" appear>
+      <div v-if="open" class="settings-overlay" @click.self="closePanel">
+        <aside
+          class="settings-panel"
+          role="dialog"
+          aria-modal="true"
+          aria-label="设置"
+        >
+          <button
+            ref="closeButtonRef"
+            class="settings-close"
+            type="button"
+            aria-label="关闭"
+            @click="closePanel"
+          >
+            <Icon icon="lucide:x" aria-hidden="true" />
+          </button>
+          <header class="settings-header">
+            <div class="settings-avatar" aria-hidden="true"></div>
+            <div>
+              <div class="settings-title">订阅中心</div>
+              <div class="settings-subtitle">订阅更多丰富功能</div>
+            </div>
+          </header>
+          <div class="settings-body">
+            <nav class="settings-nav">
+              <button class="settings-login" type="button" @click="setSection('auth')">
+                登录/注册
+              </button>
+              <div class="settings-nav-list">
+                <button
+                  v-for="section in navSections"
+                  :key="section.id"
+                  class="settings-nav-item"
+                  :class="[
+                    { active: activeSectionId === section.id },
+                    section.tone ? `is-${section.tone}` : ''
+                  ]"
+                  type="button"
+                  @click="setSection(section.id)"
+                >
+                  <span class="nav-icon">
+                    <Icon :icon="section.icon" aria-hidden="true" />
+                  </span>
+                  <span class="nav-label">{{ section.label }}</span>
+                </button>
+              </div>
+            </nav>
+            <div class="settings-content">
+              <header class="content-header">
+                <div>
+                  <div class="content-title">{{ activeSection.title }}</div>
+                  <div class="content-desc">{{ activeSection.description }}</div>
+                </div>
+              </header>
+              <div class="content-body">
+                <section v-if="activeSectionId === 'subscription'" class="content-section">
+                  <div class="settings-card highlight">
+                    <div class="card-title">登录后订阅更多功能</div>
+                    <div class="card-desc">
+                      解锁云同步、主题扩展、效率组件等订阅权益。
+                    </div>
+                    <button class="primary-button" type="button" @click="setSection('auth')">
+                      登录/注册
+                    </button>
+                  </div>
+                  <div class="settings-card">
+                    <div class="card-title">订阅特权</div>
+                    <div class="card-desc">一次订阅，多端同步，专属主题持续更新。</div>
+                    <ul class="feature-list">
+                      <li>云端备份与跨设备同步</li>
+                      <li>高效桌面与组件包</li>
+                      <li>专属主题与壁纸库</li>
+                    </ul>
+                  </div>
+                </section>
+                <section v-else-if="activeSectionId === 'auth'" class="content-section">
+                  <div class="settings-card">
+                    <div class="card-title">登录 / 注册</div>
+                    <div class="card-desc">登录后可同步设置与订阅记录。</div>
+                    <div class="form-stack">
+                      <input class="settings-input" type="text" placeholder="手机号 / 邮箱" />
+                      <input class="settings-input" type="password" placeholder="密码" />
+                    </div>
+                    <div class="button-row">
+                      <button class="primary-button" type="button">登录</button>
+                      <button class="ghost-button" type="button">注册</button>
+                    </div>
+                  </div>
+                </section>
+                <section v-else-if="activeSectionId === 'open'" class="content-section">
+                  <div class="settings-card">
+                    <div class="settings-row">
+                      <div>
+                        <div class="row-title">链接打开方式</div>
+                        <div class="row-desc">点击图标时的默认行为。</div>
+                      </div>
+                      <div class="pill-group">
+                        <button
+                          class="pill"
+                          :class="{ active: openInNewTab }"
+                          type="button"
+                          @click="openInNewTab = true"
+                        >
+                          新标签页
+                        </button>
+                        <button
+                          class="pill"
+                          :class="{ active: !openInNewTab }"
+                          type="button"
+                          @click="openInNewTab = false"
+                        >
+                          当前页面
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </section>
+                <section v-else-if="activeSectionId === 'search'" class="content-section">
+                  <div class="settings-card">
+                    <div class="settings-row">
+                      <div>
+                        <div class="row-title">显示搜索栏</div>
+                        <div class="row-desc">快速聚焦输入框提升效率。</div>
+                      </div>
+                      <label class="toggle">
+                        <input v-model="showSearch" type="checkbox" />
+                        <span class="toggle-slider" aria-hidden="true"></span>
+                      </label>
+                    </div>
+                    <div class="settings-row">
+                      <div>
+                        <div class="row-title">默认搜索引擎</div>
+                        <div class="row-desc">选择你常用的搜索入口。</div>
+                      </div>
+                      <select v-model="searchProvider" class="settings-select">
+                        <option
+                          v-for="provider in searchProviders"
+                          :key="provider.id"
+                          :value="provider.id"
+                        >
+                          {{ provider.label }}
+                        </option>
+                      </select>
+                    </div>
+                  </div>
+                </section>
+                <section v-else-if="activeSectionId === 'icons'" class="content-section">
+                  <div class="settings-card">
+                    <div class="settings-row">
+                      <div>
+                        <div class="row-title">显示图标文字</div>
+                        <div class="row-desc">开启后显示图标名称。</div>
+                      </div>
+                      <label class="toggle">
+                        <input v-model="showIconLabels" type="checkbox" />
+                        <span class="toggle-slider" aria-hidden="true"></span>
+                      </label>
+                    </div>
+                    <div class="settings-row">
+                      <div>
+                        <div class="row-title">图标密度</div>
+                        <div class="row-desc">控制图标间距与密度。</div>
+                      </div>
+                      <input
+                        v-model.number="iconDensity"
+                        class="settings-range"
+                        type="range"
+                        :min="iconDensityRange.min"
+                        :max="iconDensityRange.max"
+                        :step="iconDensityRange.step"
+                      />
+                    </div>
+                    <div class="settings-row">
+                      <div>
+                        <div class="row-title">图标大小</div>
+                        <div class="row-desc">用网格密度统一控制图标与组件大小。</div>
+                      </div>
+                      <input
+                        v-model.number="layoutDensity"
+                        class="settings-range"
+                        type="range"
+                        min="1"
+                        max="4"
+                        step="1"
+                      />
+                    </div>
+                    <div class="settings-row">
+                      <div>
+                        <div class="row-title">图标圆角</div>
+                        <div class="row-desc">控制图标卡片的圆角强度。</div>
+                      </div>
+                      <input
+                        v-model.number="iconRadius"
+                        class="settings-range"
+                        type="range"
+                        :min="iconRadiusRange.min"
+                        :max="iconRadiusRange.max"
+                        :step="iconRadiusRange.step"
+                      />
+                    </div>
+                  </div>
+                </section>
+                <section v-else-if="activeSectionId === 'time'" class="content-section">
+                  <div class="settings-card">
+                    <div class="settings-row">
+                      <div>
+                        <div class="row-title">显示时间</div>
+                        <div class="row-desc">主屏幕时间组件。</div>
+                      </div>
+                      <label class="toggle">
+                        <input v-model="showClock" type="checkbox" />
+                        <span class="toggle-slider" aria-hidden="true"></span>
+                      </label>
+                    </div>
+                    <div class="settings-row">
+                      <div>
+                        <div class="row-title">显示日期</div>
+                        <div class="row-desc">展示完整日期信息。</div>
+                      </div>
+                      <label class="toggle">
+                        <input v-model="showDate" type="checkbox" :disabled="!showClock" />
+                        <span class="toggle-slider" aria-hidden="true"></span>
+                      </label>
+                    </div>
+                    <div class="settings-row">
+                      <div>
+                        <div class="row-title">显示秒数</div>
+                        <div class="row-desc">时间精确到秒。</div>
+                      </div>
+                      <label class="toggle">
+                        <input v-model="showSeconds" type="checkbox" :disabled="!showClock" />
+                        <span class="toggle-slider" aria-hidden="true"></span>
+                      </label>
+                    </div>
+                    <div class="settings-row">
+                      <div>
+                        <div class="row-title">24 小时制</div>
+                        <div class="row-desc">使用 24 小时格式显示。</div>
+                      </div>
+                      <label class="toggle">
+                        <input v-model="use24Hour" type="checkbox" :disabled="!showClock" />
+                        <span class="toggle-slider" aria-hidden="true"></span>
+                      </label>
+                    </div>
+                  </div>
+                </section>
+                <section v-else-if="activeSectionId === 'theme'" class="content-section">
+                  <div class="settings-card">
+                    <div class="row-title">主题 / 壁纸</div>
+                    <div class="row-desc">选择心情主题或更换壁纸。</div>
+                    <div class="theme-grid">
+                      <button
+                        v-for="theme in themePresets"
+                        :key="theme.id"
+                        class="theme-card"
+                        :class="{ active: themeId === theme.id }"
+                        type="button"
+                        @click="themeId = theme.id"
+                      >
+                        <span
+                          class="theme-swatch"
+                          :style="{
+                            background: theme.overlay === 'none'
+                              ? 'linear-gradient(135deg, #e2e8f0, #ffffff)'
+                              : theme.overlay
+                          }"
+                        ></span>
+                        <span class="theme-label">{{ theme.label }}</span>
+                      </button>
+                    </div>
+                    <button class="ghost-button full" type="button">更换壁纸</button>
+                  </div>
+                </section>
+                <section v-else-if="activeSectionId === 'sidebar'" class="content-section">
+                  <div class="settings-card">
+                    <div class="settings-row">
+                      <div>
+                        <div class="row-title">紧凑模式</div>
+                        <div class="row-desc">缩小侧边栏间距。</div>
+                      </div>
+                      <label class="toggle">
+                        <input v-model="compactSidebar" type="checkbox" />
+                        <span class="toggle-slider" aria-hidden="true"></span>
+                      </label>
+                    </div>
+                    <div class="settings-row">
+                      <div>
+                        <div class="row-title">显示分组名称</div>
+                        <div class="row-desc">在图标下方展示文字。</div>
+                      </div>
+                      <label class="toggle">
+                        <input v-model="showGroupLabels" type="checkbox" />
+                        <span class="toggle-slider" aria-hidden="true"></span>
+                      </label>
+                    </div>
+                  </div>
+                </section>
+                <section v-else-if="activeSectionId === 'backup'" class="content-section">
+                  <div class="settings-card">
+                    <div class="row-title">备份与恢复</div>
+                    <div class="row-desc">导出当前配置或从备份恢复。</div>
+                    <div class="button-row">
+                      <button class="primary-button" type="button" @click="exportBackup">
+                        导出配置
+                      </button>
+                      <button class="ghost-button" type="button" @click="triggerImport">
+                        导入配置
+                      </button>
+                    </div>
+                    <input
+                      ref="importInputRef"
+                      class="hidden-input"
+                      type="file"
+                      accept="application/json"
+                      @change="handleImport"
+                    />
+                    <div v-if="feedbackMessage" class="feedback">{{ feedbackMessage }}</div>
+                  </div>
+                </section>
+                <section v-else-if="activeSectionId === 'reset'" class="content-section">
+                  <div class="settings-card danger">
+                    <div class="row-title">重置设置</div>
+                    <div class="row-desc">恢复默认设置，保留图标与组件数据。</div>
+                    <button class="danger-button" type="button" @click="resetSettings">
+                      恢复默认设置
+                    </button>
+                    <div v-if="feedbackMessage" class="feedback">{{ feedbackMessage }}</div>
+                  </div>
+                </section>
+                <section v-else-if="activeSectionId === 'about'" class="content-section">
+                  <div class="settings-card">
+                    <div class="row-title">关于</div>
+                    <div class="row-desc">iTab 新标签页插件</div>
+                    <div class="about-list">
+                      <div class="about-item">
+                        <span>版本</span>
+                        <span>0.1.0</span>
+                      </div>
+                      <div class="about-item">
+                        <span>反馈</span>
+                        <span>support@itab.local</span>
+                      </div>
+                    </div>
+                  </div>
+                </section>
+              </div>
+            </div>
+          </div>
+        </aside>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { Icon } from '@iconify/vue';
+import { useSettingsStore } from '@/store/useSettingsStore';
+import {
+  iconDensityRange,
+  iconRadiusRange,
+  searchProviders,
+  themePresets,
+} from '@/config/settingsPresets';
+
+type SettingsSection = {
+  id: string;
+  label: string;
+  icon: string;
+  title: string;
+  description: string;
+  showInNav?: boolean;
+  tone?: 'danger';
+};
+
+const props = defineProps<{
+  open: boolean;
+}>();
+
+const emit = defineEmits<{
+  (event: 'update:open', value: boolean): void;
+}>();
+
+const settingsStore = useSettingsStore();
+
+const openInNewTab = computed({
+  get: () => settingsStore.openInNewTab,
+  set: value => settingsStore.setSetting('openInNewTab', value),
+});
+
+const showSearch = computed({
+  get: () => settingsStore.showSearch,
+  set: value => settingsStore.setSetting('showSearch', value),
+});
+
+const showClock = computed({
+  get: () => settingsStore.showClock,
+  set: value => settingsStore.setSetting('showClock', value),
+});
+
+const showDate = computed({
+  get: () => settingsStore.showDate,
+  set: value => settingsStore.setSetting('showDate', value),
+});
+
+const showSeconds = computed({
+  get: () => settingsStore.showSeconds,
+  set: value => settingsStore.setSetting('showSeconds', value),
+});
+
+const use24Hour = computed({
+  get: () => settingsStore.use24Hour,
+  set: value => settingsStore.setSetting('use24Hour', value),
+});
+
+const searchProvider = computed({
+  get: () => settingsStore.searchProvider,
+  set: value => settingsStore.setSetting('searchProvider', value as typeof settingsStore.searchProvider),
+});
+
+const showIconLabels = computed({
+  get: () => settingsStore.showIconLabels,
+  set: value => settingsStore.setSetting('showIconLabels', value),
+});
+
+const iconDensity = computed({
+  get: () => settingsStore.iconDensity,
+  set: value => settingsStore.setSetting('iconDensity', value),
+});
+
+const iconRadius = computed({
+  get: () => settingsStore.iconRadius,
+  set: value => settingsStore.setSetting('iconRadius', value),
+});
+
+const themeId = computed({
+  get: () => settingsStore.themeId,
+  set: value => settingsStore.setSetting('themeId', value as typeof settingsStore.themeId),
+});
+
+const layoutDensity = computed({
+  get: () => settingsStore.layoutDensity,
+  set: value => settingsStore.setSetting('layoutDensity', value),
+});
+
+const compactSidebar = computed({
+  get: () => settingsStore.compactSidebar,
+  set: value => settingsStore.setSetting('compactSidebar', value),
+});
+
+const showGroupLabels = computed({
+  get: () => settingsStore.showGroupLabels,
+  set: value => settingsStore.setSetting('showGroupLabels', value),
+});
+
+const feedbackMessage = ref('');
+
+const sections: SettingsSection[] = [
+  {
+    id: 'subscription',
+    label: '订阅中心',
+    icon: 'lucide:badge-check',
+    title: '订阅中心',
+    description: '订阅更多丰富功能',
+  },
+  {
+    id: 'open',
+    label: '打开方式',
+    icon: 'lucide:arrow-up-right',
+    title: '打开方式',
+    description: '设置链接的默认打开方式',
+  },
+  {
+    id: 'search',
+    label: '搜索栏',
+    icon: 'lucide:search',
+    title: '搜索栏',
+    description: '搜索相关展示与默认引擎',
+  },
+  {
+    id: 'icons',
+    label: '图标',
+    icon: 'lucide:grid-3x3',
+    title: '图标管理',
+    description: '控制图标显示与密度',
+  },
+  {
+    id: 'time',
+    label: '时间/日期',
+    icon: 'lucide:clock',
+    title: '时间与日期',
+    description: '时间显示格式与细节设置',
+  },
+  {
+    id: 'theme',
+    label: '主题/壁纸',
+    icon: 'lucide:palette',
+    title: '主题与壁纸',
+    description: '挑选你喜欢的视觉风格',
+  },
+  {
+    id: 'sidebar',
+    label: '侧边栏',
+    icon: 'lucide:panel-left',
+    title: '侧边栏',
+    description: '侧边栏展示与紧凑模式',
+  },
+  {
+    id: 'backup',
+    label: '备份与恢复',
+    icon: 'lucide:cloud',
+    title: '备份与恢复',
+    description: '导出配置或导入备份',
+  },
+  {
+    id: 'reset',
+    label: '重置设置',
+    icon: 'lucide:rotate-ccw',
+    title: '重置设置',
+    description: '恢复默认设置项',
+    tone: 'danger',
+  },
+  {
+    id: 'about',
+    label: '关于',
+    icon: 'lucide:info',
+    title: '关于',
+    description: '产品信息与反馈渠道',
+  },
+  {
+    id: 'auth',
+    label: '登录/注册',
+    icon: 'lucide:user',
+    title: '登录/注册',
+    description: '登录后同步配置',
+    showInNav: false,
+  },
+];
+
+const navSections = computed(() => sections.filter(section => section.showInNav !== false));
+const activeSectionId = ref('subscription');
+const activeSection = computed(
+  () => sections.find(section => section.id === activeSectionId.value) ?? sections[0]
+);
+
+const closeButtonRef = ref<HTMLButtonElement | null>(null);
+const importInputRef = ref<HTMLInputElement | null>(null);
+
+const closePanel = () => {
+  emit('update:open', false);
+};
+
+const setSection = (id: string) => {
+  activeSectionId.value = id;
+  feedbackMessage.value = '';
+};
+
+const resetFeedback = (message: string) => {
+  feedbackMessage.value = message;
+  window.setTimeout(() => {
+    feedbackMessage.value = '';
+  }, 2000);
+};
+
+const exportBackup = () => {
+  const payload = {
+    version: 1,
+    exportedAt: new Date().toISOString(),
+    data: {
+      settings: settingsStore.$state,
+      icons: safeParse('itab_icons'),
+      widgets: safeParse('itab_widgets'),
+      gridOrder: safeParse('itab_grid_order'),
+      sidebarGroups: safeParse('itab_sidebar_groups'),
+      sidebarOverrides: safeParse('itab_sidebar_overrides'),
+      sidebarHidden: safeParse('itab_sidebar_hidden'),
+    },
+  };
+  const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `itab-backup-${new Date().toISOString().slice(0, 10)}.json`;
+  link.click();
+  URL.revokeObjectURL(url);
+  resetFeedback('备份已导出');
+};
+
+const triggerImport = () => {
+  importInputRef.value?.click();
+};
+
+const handleImport = (event: Event) => {
+  const input = event.target as HTMLInputElement | null;
+  const file = input?.files?.[0];
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = () => {
+    try {
+      const parsed = JSON.parse(String(reader.result));
+      if (!parsed?.data || typeof parsed.data !== 'object') {
+        resetFeedback('备份文件格式不正确');
+        return;
+      }
+      const data = parsed.data as Record<string, unknown>;
+      restoreEntry('itab_icons', data.icons);
+      restoreEntry('itab_widgets', data.widgets);
+      restoreEntry('itab_grid_order', data.gridOrder);
+      restoreEntry('itab_sidebar_groups', data.sidebarGroups);
+      restoreEntry('itab_sidebar_overrides', data.sidebarOverrides);
+      restoreEntry('itab_sidebar_hidden', data.sidebarHidden);
+      const settings = data.settings as Partial<typeof settingsStore.$state> | undefined;
+      if (settings && typeof settings === 'object') {
+        applyImportedSettings(settings);
+      }
+      resetFeedback('备份已导入，刷新后生效');
+    } catch {
+      resetFeedback('备份文件解析失败');
+    }
+  };
+  reader.readAsText(file);
+  if (input) {
+    input.value = '';
+  }
+};
+
+const resetSettings = () => {
+  settingsStore.reset();
+  resetFeedback('已恢复默认设置');
+};
+
+const safeParse = (key: string) => {
+  const raw = localStorage.getItem(key);
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return raw;
+  }
+};
+
+const restoreEntry = (key: string, value: unknown) => {
+  if (value === undefined || value === null) {
+    localStorage.removeItem(key);
+    return;
+  }
+  localStorage.setItem(key, JSON.stringify(value));
+};
+
+const clampRange = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+const applyImportedSettings = (settings: Partial<typeof settingsStore.$state>) => {
+  const providerIds = new Set(searchProviders.map(item => item.id));
+  const themeIds = new Set(themePresets.map(item => item.id));
+  const layoutDensityValues = new Set([1, 2, 3, 4]);
+
+  if (typeof settings.showSearch === 'boolean') {
+    settingsStore.setSetting('showSearch', settings.showSearch);
+  }
+  if (typeof settings.showClock === 'boolean') {
+    settingsStore.setSetting('showClock', settings.showClock);
+  }
+  if (typeof settings.showDate === 'boolean') {
+    settingsStore.setSetting('showDate', settings.showDate);
+  }
+  if (typeof settings.showSeconds === 'boolean') {
+    settingsStore.setSetting('showSeconds', settings.showSeconds);
+  }
+  if (typeof settings.use24Hour === 'boolean') {
+    settingsStore.setSetting('use24Hour', settings.use24Hour);
+  }
+  if (typeof settings.openInNewTab === 'boolean') {
+    settingsStore.setSetting('openInNewTab', settings.openInNewTab);
+  }
+  if (typeof settings.showIconLabels === 'boolean') {
+    settingsStore.setSetting('showIconLabels', settings.showIconLabels);
+  }
+  if (typeof settings.autoAlign === 'boolean') {
+    settingsStore.setSetting('autoAlign', settings.autoAlign);
+  }
+  if (typeof settings.compactSidebar === 'boolean') {
+    settingsStore.setSetting('compactSidebar', settings.compactSidebar);
+  }
+  if (typeof settings.showGroupLabels === 'boolean') {
+    settingsStore.setSetting('showGroupLabels', settings.showGroupLabels);
+  }
+  if (typeof settings.iconRadius === 'number') {
+    settingsStore.setSetting(
+      'iconRadius',
+      clampRange(settings.iconRadius, iconRadiusRange.min, iconRadiusRange.max)
+    );
+  }
+  if (typeof settings.searchProvider === 'string' && providerIds.has(settings.searchProvider)) {
+    settingsStore.setSetting(
+      'searchProvider',
+      settings.searchProvider as typeof settingsStore.searchProvider
+    );
+  }
+  if (typeof settings.themeId === 'string' && themeIds.has(settings.themeId)) {
+    settingsStore.setSetting('themeId', settings.themeId as typeof settingsStore.themeId);
+  }
+  if (typeof settings.iconDensity === 'number') {
+    settingsStore.setSetting(
+      'iconDensity',
+      clampRange(settings.iconDensity, iconDensityRange.min, iconDensityRange.max)
+    );
+  }
+  if (typeof settings.layoutDensity === 'number' && layoutDensityValues.has(settings.layoutDensity)) {
+    settingsStore.setSetting('layoutDensity', settings.layoutDensity as typeof settingsStore.layoutDensity);
+  }
+};
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (!props.open) return;
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    closePanel();
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown);
+});
+
+watch(
+  () => props.open,
+  open => {
+    if (!open) return;
+    activeSectionId.value = 'subscription';
+    nextTick(() => closeButtonRef.value?.focus());
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/tokens.scss';
+
+.settings-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: stretch;
+  background: rgba(8, 10, 18, 0.35);
+  backdrop-filter: blur(3px);
+  z-index: $z-index-modal;
+}
+
+.settings-panel {
+  --panel-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(243, 245, 249, 0.98));
+  --panel-text: #1d1f23;
+  --panel-muted: #6b7280;
+  --panel-accent: #1e88ff;
+  width: min(460px, 94vw);
+  height: calc(100% - 24px);
+  margin: 12px;
+  background: var(--panel-bg);
+  border-radius: 26px;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
+  color: var(--panel-text);
+  display: flex;
+  flex-direction: column;
+  padding: 18px 18px 20px;
+  position: relative;
+  overflow: hidden;
+}
+
+.settings-panel::before {
+  content: '';
+  position: absolute;
+  inset: auto -120px -120px auto;
+  width: 260px;
+  height: 260px;
+  background: radial-gradient(circle, rgba(30, 136, 255, 0.2), transparent 70%);
+  pointer-events: none;
+}
+
+.settings-close {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0, 0, 0, 0.08);
+  color: var(--panel-text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color $motion-duration-sm $motion-easing-standard;
+}
+
+.settings-close:hover {
+  background: rgba(0, 0, 0, 0.14);
+}
+
+.settings-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-right: 36px;
+  margin-bottom: 12px;
+}
+
+.settings-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 30% 30%, #fff, #111);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+.settings-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.settings-subtitle {
+  font-size: 12px;
+  color: var(--panel-muted);
+}
+
+.settings-body {
+  display: grid;
+  grid-template-columns: 150px 1fr;
+  gap: 16px;
+  flex: 1;
+  min-height: 0;
+}
+
+.settings-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+}
+
+.settings-login {
+  background: var(--panel-accent);
+  color: #fff;
+  border: none;
+  border-radius: 14px;
+  padding: 8px 12px;
+  font-size: 13px;
+  cursor: pointer;
+  box-shadow: 0 8px 16px rgba(30, 136, 255, 0.25);
+}
+
+.settings-nav-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: auto;
+  padding-right: 4px;
+}
+
+.settings-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 14px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--panel-muted);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background-color $motion-duration-sm $motion-easing-standard,
+    color $motion-duration-sm $motion-easing-standard,
+    border-color $motion-duration-sm $motion-easing-standard;
+}
+
+.settings-nav-item .nav-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.06);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--panel-text);
+}
+
+.settings-nav-item.active {
+  background: rgba(30, 136, 255, 0.12);
+  border-color: rgba(30, 136, 255, 0.25);
+  color: var(--panel-text);
+}
+
+.settings-nav-item.active .nav-icon {
+  background: rgba(30, 136, 255, 0.18);
+  color: var(--panel-accent);
+}
+
+.settings-nav-item.is-danger {
+  color: #c22f2f;
+}
+
+.settings-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+}
+
+.content-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.content-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.content-desc {
+  font-size: 12px;
+  color: var(--panel-muted);
+  margin-top: 4px;
+}
+
+.content-body {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-right: 4px;
+}
+
+.settings-card {
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 18px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
+}
+
+.settings-card.highlight {
+  background: linear-gradient(135deg, rgba(30, 136, 255, 0.12), rgba(255, 255, 255, 0.95));
+  border-color: rgba(30, 136, 255, 0.2);
+}
+
+.settings-card.danger {
+  border-color: rgba(194, 47, 47, 0.2);
+  background: rgba(255, 236, 236, 0.9);
+}
+
+.card-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.card-desc {
+  font-size: 12px;
+  color: var(--panel-muted);
+}
+
+.feature-list {
+  padding-left: 16px;
+  display: grid;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--panel-muted);
+}
+
+.settings-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.row-title {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.row-desc {
+  font-size: 12px;
+  color: var(--panel-muted);
+  margin-top: 4px;
+}
+
+.pill-group {
+  display: flex;
+  gap: 6px;
+}
+
+.pill {
+  padding: 6px 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: transparent;
+  color: var(--panel-muted);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.pill.active {
+  background: rgba(30, 136, 255, 0.16);
+  border-color: rgba(30, 136, 255, 0.35);
+  color: var(--panel-text);
+}
+
+.toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  width: 38px;
+  height: 20px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.2);
+  position: relative;
+  transition: background-color $motion-duration-sm $motion-easing-standard;
+}
+
+.toggle-slider::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  transition: transform $motion-duration-sm $motion-easing-standard;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.toggle input:checked + .toggle-slider {
+  background: var(--panel-accent);
+}
+
+.toggle input:checked + .toggle-slider::after {
+  transform: translateX(18px);
+}
+
+.toggle input:disabled + .toggle-slider {
+  opacity: 0.5;
+}
+
+.settings-select {
+  min-width: 120px;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 6px 10px;
+  background: #fff;
+  color: var(--panel-text);
+  font-size: 12px;
+}
+
+.settings-range {
+  width: 120px;
+}
+
+.form-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.settings-input {
+  height: 36px;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  padding: 0 12px;
+  font-size: 13px;
+}
+
+.button-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.primary-button {
+  padding: 8px 14px;
+  border-radius: 14px;
+  border: none;
+  background: var(--panel-accent);
+  color: #fff;
+  font-size: 13px;
+  cursor: pointer;
+  box-shadow: 0 8px 18px rgba(30, 136, 255, 0.25);
+}
+
+.ghost-button {
+  padding: 8px 14px;
+  border-radius: 14px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: transparent;
+  color: var(--panel-text);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.ghost-button.full {
+  width: 100%;
+}
+
+.danger-button {
+  padding: 8px 14px;
+  border-radius: 14px;
+  border: none;
+  background: #d93f3f;
+  color: #fff;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.theme-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.theme-card {
+  border: 1px solid transparent;
+  border-radius: 14px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+}
+
+.theme-card.active {
+  border-color: rgba(30, 136, 255, 0.3);
+  box-shadow: 0 0 0 2px rgba(30, 136, 255, 0.12);
+}
+
+.theme-swatch {
+  height: 36px;
+  border-radius: 12px;
+}
+
+.theme-label {
+  font-size: 12px;
+}
+
+.about-list {
+  display: grid;
+  gap: 8px;
+}
+
+.about-item {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--panel-muted);
+}
+
+.feedback {
+  font-size: 12px;
+  color: var(--panel-muted);
+}
+
+.hidden-input {
+  display: none;
+}
+
+.settings-panel-enter-active,
+.settings-panel-leave-active {
+  transition: opacity 220ms ease;
+}
+
+.settings-panel-enter-from,
+.settings-panel-leave-to {
+  opacity: 0;
+}
+
+.settings-panel-enter-active .settings-panel,
+.settings-panel-leave-active .settings-panel {
+  transition: transform 260ms ease, opacity 260ms ease;
+}
+
+.settings-panel-enter-from .settings-panel,
+.settings-panel-leave-to .settings-panel {
+  transform: translateX(24px);
+  opacity: 0;
+}
+
+@media (max-width: 720px) {
+  .settings-panel {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    border-radius: 0;
+  }
+
+  .settings-body {
+    grid-template-columns: 1fr;
+  }
+
+  .settings-nav {
+    flex-direction: row;
+    align-items: center;
+    overflow: auto;
+  }
+
+  .settings-login {
+    flex: 0 0 auto;
+  }
+
+  .settings-nav-list {
+    flex-direction: row;
+  }
+
+  .settings-nav-item {
+    flex: 0 0 auto;
+  }
+}
+</style>
diff --git a/app/src/components/TheClock/index.vue b/app/src/components/TheClock/index.vue
index d5c08af..5fec452 100644
--- a/app/src/components/TheClock/index.vue
+++ b/app/src/components/TheClock/index.vue
@@ -1,26 +1,52 @@
 <template>
   <div class="clock-container">
     <div class="time">{{ currentTime }}</div>
-    <div class="date">{{ currentDate }}</div>
+    <div v-if="showDate" class="date">{{ currentDate }}</div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+
+const props = defineProps<{
+  showDate?: boolean;
+  showSeconds?: boolean;
+  use24Hour?: boolean;
+}>();
 
 const currentTime = ref('');
 const currentDate = ref('');
 let timerId: number;
 
+const showDate = computed(() => props.showDate !== false);
+const showSeconds = computed(() => props.showSeconds === true);
+const use24Hour = computed(() => props.use24Hour !== false);
+
+const buildTimeOptions = (): Intl.DateTimeFormatOptions => {
+  const options: Intl.DateTimeFormatOptions = {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: !use24Hour.value,
+  };
+  if (showSeconds.value) {
+    options.second = '2-digit';
+  }
+  return options;
+};
+
 const updateTime = () => {
   const now = new Date();
-  currentTime.value = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-  currentDate.value = new Intl.DateTimeFormat('zh-CN', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    weekday: 'long',
-  }).format(now);
+  currentTime.value = now.toLocaleTimeString('zh-CN', buildTimeOptions());
+  if (showDate.value) {
+    currentDate.value = new Intl.DateTimeFormat('zh-CN', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+    }).format(now);
+  } else {
+    currentDate.value = '';
+  }
 };
 
 onMounted(() => {
@@ -31,6 +57,10 @@ onMounted(() => {
 onUnmounted(() => {
   clearInterval(timerId);
 });
+
+watch([showDate, showSeconds, use24Hour], () => {
+  updateTime();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/app/src/components/TheContextMenu/index.vue b/app/src/components/TheContextMenu/index.vue
index f1f97b4..038097e 100644
--- a/app/src/components/TheContextMenu/index.vue
+++ b/app/src/components/TheContextMenu/index.vue
@@ -1,6 +1,11 @@
-<template>
-  <div v-if="uiStore.contextMenu.isOpen" class="context-menu-overlay" @click="close" @contextmenu.prevent="close">
-    <div class="context-menu" :style="menuStyle">
+<template>
+  <div
+    v-if="uiStore.contextMenu.isOpen"
+    class="context-menu-overlay"
+    @click="close"
+    @contextmenu.prevent="close"
+  >
+    <div ref="menuRef" class="context-menu" :style="menuStyle">
       <ul v-if="uiStore.contextMenu.itemType === 'icon'">
         <li class="layout-section">
           <div class="layout-title">
@@ -12,9 +17,9 @@
           </div>
         </li>
         <li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-icon"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>在新标签页打开</li>
-        <li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-icon"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"></path><path d="m15 5 4 4"></path></svg>编辑图标</li>
+        <li @click="handleEditIcon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-icon"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"></path><path d="m15 5 4 4"></path></svg>编辑图标</li>
         <li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-icon"><path d="m12 19-7-7 7-7 7 7-7 7Z"></path><path d="M19 5v14"></path><path d="M5 5v14"></path></svg>编辑主页</li>
-        <li @click="deleteItem"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-icon"><path d="M3 6h18"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>删除</li>
+        <li class="menu-danger" @click="deleteItem"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-icon"><path d="M3 6h18"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>删除</li>
       </ul>
       <ul v-else-if="uiStore.contextMenu.itemType === 'widget'">
         <li class="layout-section">
@@ -26,33 +31,115 @@
             <span v-for="size in widgetSizes" :key="size" @click="changeWidgetSize(size)" class="size-option">{{ size }}</span>
           </div>
         </li>
-        <li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-icon"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"></path></svg>编辑组件</li>
-        <li @click="deleteItem"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-icon"><path d="M3 6h18"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>删除</li>
+        <li @click="handleEditWidget"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-icon"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"></path></svg>编辑组件</li>
+        <li class="menu-danger" @click="deleteItem"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-icon"><path d="M3 6h18"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>删除</li>
+      </ul>
+      <ul v-else-if="uiStore.contextMenu.itemType === 'desktop'" class="desktop-menu">
+        <li class="desktop-item" @click="handleDesktopAction('add-icon')">
+          <span class="desktop-label">添加图标</span>
+          <span class="desktop-trailing">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-trailing-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+          </span>
+        </li>
+        <li class="desktop-item" @click="handleDesktopAction('wallpaper')">
+          <span class="desktop-label">换壁纸</span>
+          <span class="desktop-trailing">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-trailing-icon"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-trailing-icon"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z"></path></svg>
+          </span>
+        </li>
+        <li class="desktop-item" @click="handleDesktopAction('search')">
+          <span class="desktop-label">本地搜索</span>
+          <span class="desktop-shortcut">Ctrl+F</span>
+        </li>
+        <li class="desktop-item" @click="handleDesktopAction('backup')">
+          <span class="desktop-label">立即备份</span>
+          <span class="desktop-trailing">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-trailing-icon"><path d="M20 16.5a4.5 4.5 0 0 0-1.4-8.8A6 6 0 0 0 6 9.8a4 4 0 0 0 0 8h13.5z"></path><polyline points="12 12 12 19"></polyline><polyline points="9 16 12 19 15 16"></polyline></svg>
+          </span>
+        </li>
+        <li class="desktop-item" @click="handleDesktopAction('settings')">
+          <span class="desktop-label">设置</span>
+          <span class="desktop-trailing">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-trailing-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.65 1.65 0 0 0-1.8-.3 1.65 1.65 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.65 1.65 0 0 0-1-1.5 1.65 1.65 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.65 1.65 0 0 0 .3-1.8 1.65 1.65 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.65 1.65 0 0 0 1.5-1 1.65 1.65 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.65 1.65 0 0 0 1.8.3H9a1.65 1.65 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.65 1.65 0 0 0 1 1.5 1.65 1.65 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.65 1.65 0 0 0-.3 1.8V9a1.65 1.65 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.65 1.65 0 0 0-1.5 1z"></path></svg>
+          </span>
+        </li>
       </ul>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useUIStore } from '@/store/useUIStore';
 import { useLayoutStore } from '@/store/useLayoutStore';
 import { useWidgetsStore } from '@/store/useWidgetsStore';
 
+const emit = defineEmits<{
+  (event: 'add-icon'): void;
+  (event: 'edit-icon', id: string): void;
+  (event: 'edit-widget', id: string): void;
+  (event: 'settings'): void;
+}>();
+
 const uiStore = useUIStore();
 const layoutStore = useLayoutStore();
 const widgetsStore = useWidgetsStore();
 
 type ItemSize = '1x1' | '1x2' | '2x1' | '2x2' | '2x4';
 
+type DesktopAction = 'add-icon' | 'wallpaper' | 'search' | 'backup' | 'settings';
+
 const widgetSizes: ItemSize[] = ['1x1', '1x2', '2x1', '2x2', '2x4'];
 const iconSizes: ItemSize[] = ['1x1', '1x2', '2x1', '2x2', '2x4'];
 
+const menuRef = ref<HTMLElement | null>(null);
+const menuPosition = ref({ x: 0, y: 0 });
+const viewportPadding = 8;
+
+const clampMenuPosition = () => {
+  const menuEl = menuRef.value;
+  const baseX = uiStore.contextMenu.x;
+  const baseY = uiStore.contextMenu.y;
+  if (!menuEl) {
+    menuPosition.value = { x: baseX, y: baseY };
+    return;
+  }
+  const rect = menuEl.getBoundingClientRect();
+  const maxX = Math.max(viewportPadding, window.innerWidth - rect.width - viewportPadding);
+  const maxY = Math.max(viewportPadding, window.innerHeight - rect.height - viewportPadding);
+  const x = Math.min(Math.max(baseX, viewportPadding), maxX);
+  const y = Math.min(Math.max(baseY, viewportPadding), maxY);
+  menuPosition.value = { x, y };
+};
+
 const menuStyle = computed(() => ({
-  left: `${uiStore.contextMenu.x}px`,
-  top: `${uiStore.contextMenu.y}px`,
+  left: `${menuPosition.value.x}px`,
+  top: `${menuPosition.value.y}px`,
 }));
 
+watch(
+  () => [
+    uiStore.contextMenu.isOpen,
+    uiStore.contextMenu.x,
+    uiStore.contextMenu.y,
+    uiStore.contextMenu.itemType,
+  ],
+  async () => {
+    if (!uiStore.contextMenu.isOpen) return;
+    await nextTick();
+    clampMenuPosition();
+  }
+);
+
+onMounted(() => {
+  window.addEventListener('resize', clampMenuPosition);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', clampMenuPosition);
+});
+
 const close = () => {
   uiStore.closeContextMenu();
 };
@@ -62,12 +149,28 @@ const deleteItem = () => {
     if (uiStore.contextMenu.itemType === 'icon') {
       layoutStore.deleteIcon(uiStore.contextMenu.itemId);
     } else if (uiStore.contextMenu.itemType === 'widget') {
-      // 组件删除逻辑
+      widgetsStore.deleteWidget(uiStore.contextMenu.itemId);
     }
   }
   close();
 };
 
+const handleEditIcon = () => {
+  if (uiStore.contextMenu.itemType !== 'icon') return;
+  if (uiStore.contextMenu.itemId) {
+    emit('edit-icon', uiStore.contextMenu.itemId);
+  }
+  close();
+};
+
+const handleEditWidget = () => {
+  if (uiStore.contextMenu.itemType !== 'widget') return;
+  if (uiStore.contextMenu.itemId) {
+    emit('edit-widget', uiStore.contextMenu.itemId);
+  }
+  close();
+};
+
 const changeWidgetSize = (newSize: ItemSize) => {
   if (uiStore.contextMenu.itemId) {
     widgetsStore.updateWidgetSize(uiStore.contextMenu.itemId, newSize);
@@ -81,6 +184,16 @@ const changeIconSize = (newSize: ItemSize) => {
   }
   close();
 };
+
+const handleDesktopAction = (action: DesktopAction) => {
+  if (action === 'add-icon') {
+    emit('add-icon');
+  }
+  if (action === 'settings') {
+    emit('settings');
+  }
+  close();
+};
 </script>
 
 <style lang="scss" scoped>
@@ -105,6 +218,8 @@ const changeIconSize = (newSize: ItemSize) => {
   box-shadow: $shadow-lg;
   z-index: $z-index-menu;
   padding: var(--context-menu-padding);
+  transform-origin: top left;
+  animation: context-menu-pop 110ms cubic-bezier(0.16, 1, 0.3, 1);
 
   ul {
     list-style: none;
@@ -136,8 +251,8 @@ const changeIconSize = (newSize: ItemSize) => {
     }
   }
 
-  li:last-child {
-    color: #ff5c5c; // 删除项浅红色
+  li.menu-danger {
+    color: #ff5c5c;
 
     .menu-icon {
       stroke: #ff5c5c;
@@ -151,6 +266,16 @@ const changeIconSize = (newSize: ItemSize) => {
   }
 }
 
+@keyframes context-menu-pop {
+  0% {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
 .layout-title {
   display: flex;
   align-items: center;
@@ -162,14 +287,14 @@ const changeIconSize = (newSize: ItemSize) => {
   display: flex;
   flex-wrap: wrap;
   gap: var(--context-menu-layout-options-gap);
-  
+
   .size-option {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: var(--context-menu-layout-option-width); // 固定宽度便于对齐
-    padding: var(--context-menu-layout-option-padding-y) 0; // 固定宽度下调整内边距
-    border-radius: var(--radius-pill); // 胶囊形状
+    width: var(--context-menu-layout-option-width);
+    padding: var(--context-menu-layout-option-padding-y) 0;
+    border-radius: var(--radius-pill);
     background-color: rgba(255, 255, 255, 0.08);
     cursor: pointer;
     font-size: 12px;
@@ -179,4 +304,33 @@ const changeIconSize = (newSize: ItemSize) => {
     }
   }
 }
+
+.desktop-menu {
+  .desktop-item {
+    justify-content: space-between;
+    gap: 12px;
+  }
+}
+
+.desktop-label {
+  font-size: 14px;
+}
+
+.desktop-trailing {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: $color-text-secondary;
+}
+
+.menu-trailing-icon {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+}
+
+.desktop-shortcut {
+  font-size: 12px;
+  color: $color-text-secondary;
+}
 </style>
diff --git a/app/src/components/TheSearchBar/index.vue b/app/src/components/TheSearchBar/index.vue
index 17d96ff..4f1ce6c 100644
--- a/app/src/components/TheSearchBar/index.vue
+++ b/app/src/components/TheSearchBar/index.vue
@@ -1,17 +1,39 @@
-<template>
+<template>
   <div class="search-bar-wrapper">
     <div class="search-bar">
-      <div class="search-icon">
+      <button class="search-icon" type="button" @click="handleSubmit">
         <!-- 搜索图标（矢量） -->
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-      </div>
-      <input type="text" placeholder="输入搜索内容" />
+      </button>
+      <input
+        v-model="query"
+        type="text"
+        :placeholder="placeholderText"
+        @keydown.enter.prevent="handleSubmit"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-// 搜索逻辑后续补充
+import { computed, ref } from 'vue';
+import { useSettingsStore } from '@/store/useSettingsStore';
+import { getSearchProvider } from '@/config/settingsPresets';
+
+const settingsStore = useSettingsStore();
+const query = ref('');
+const provider = computed(() => getSearchProvider(settingsStore.searchProvider));
+const placeholderText = computed(
+  () => provider.value.placeholder || '输入搜索内容'
+);
+
+const handleSubmit = () => {
+  const text = query.value.trim();
+  if (!text) return;
+  const target = settingsStore.openInNewTab ? '_blank' : '_self';
+  const url = `${provider.value.url}${encodeURIComponent(text)}`;
+  window.open(url, target);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -45,6 +67,13 @@
 .search-icon {
   color: $color-text-secondary;
   margin-right: 12px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
 }
 
 input {
diff --git a/app/src/components/TheSidebar/index.vue b/app/src/components/TheSidebar/index.vue
index 37c1afb..d503f68 100644
--- a/app/src/components/TheSidebar/index.vue
+++ b/app/src/components/TheSidebar/index.vue
@@ -1,53 +1,274 @@
-<template>
+<template>
   <aside class="sidebar">
     <div class="sidebar-top">
-      <div class="profile-icon">
-        <!-- 用户头像占位 -->
-      </div>
+      <button
+        class="profile-icon"
+        type="button"
+        title="Profile"
+        aria-label="Profile"
+        @click="handleProfile"
+      >
+        <span class="profile-initial">U</span>
+      </button>
     </div>
     <nav class="sidebar-nav">
-      <a href="#" class="nav-item active">
-        <!-- 图标：主页 -->
-        <span>主页</span>
-      </a>
-      <a href="#" class="nav-item">
-        <!-- 图标：编程 -->
-        <span>编程</span>
-      </a>
-      <a href="#" class="nav-item">
-        <!-- 图标：设计 -->
-        <span>设计</span>
-      </a>
-      <a href="#" class="nav-item">
-        <!-- 图标：产品 -->
-        <span>产品</span>
-      </a>
-      <a href="#" class="nav-item">
-        <!-- 图标：AI -->
-        <span>AI</span>
-      </a>
-      <a href="#" class="nav-item">
-        <!-- 图标：摸鱼 -->
-        <span>摸鱼</span>
-      </a>
-      <a href="#" class="nav-item add-item">
-        <!-- 图标：新增 -->
-      </a>
+      <button
+        v-for="item in topItems"
+        :key="item.id"
+        class="nav-item"
+        :class="[
+          item.variant ? `nav-item--${item.variant}` : '',
+          { active: activeId === item.id, 'has-icon': !!getGroupIcon(item.iconId) }
+        ]"
+        type="button"
+        :title="item.label"
+        :aria-current="activeId === item.id ? 'page' : undefined"
+        @click="handleItemClick(item)"
+        @contextmenu.prevent="handleItemContextMenu($event, item)"
+      >
+        <Icon
+          v-if="getGroupIcon(item.iconId)"
+          class="nav-icon"
+          :icon="getGroupIcon(item.iconId)"
+          aria-hidden="true"
+        />
+        <span class="nav-text">{{ item.label }}</span>
+      </button>
     </nav>
     <div class="sidebar-bottom">
-      <a href="#" class="nav-item">
-        <!-- 图标：设置 -->
-      </a>
+      <button
+        v-for="item in bottomItems"
+        :key="item.id"
+        class="nav-item"
+        :class="{ active: activeId === item.id, 'has-icon': !!getGroupIcon(item.iconId) }"
+        type="button"
+        :title="item.label"
+        :aria-current="activeId === item.id ? 'page' : undefined"
+        @click="handleItemClick(item)"
+        @contextmenu.prevent="handleItemContextMenu($event, item)"
+      >
+        <Icon
+          v-if="getGroupIcon(item.iconId)"
+          class="nav-icon"
+          :icon="getGroupIcon(item.iconId)"
+          aria-hidden="true"
+        />
+        <span class="nav-text">{{ item.label }}</span>
+      </button>
     </div>
   </aside>
+  <teleport to="body">
+    <div
+      v-if="menuState.open"
+      class="sidebar-menu-overlay"
+      @click.self="closeMenu"
+      @contextmenu.prevent="closeMenu"
+    >
+      <div ref="menuRef" class="sidebar-menu" :style="menuStyle">
+        <button class="sidebar-menu-item" type="button" @click="handleEdit">
+          <Icon class="menu-icon" icon="lucide:pencil" aria-hidden="true" />
+          编辑
+        </button>
+        <button
+          class="sidebar-menu-item menu-danger"
+          type="button"
+          @click="handleRemove"
+        >
+          <Icon class="menu-icon" icon="lucide:trash-2" aria-hidden="true" />
+          移除
+        </button>
+      </div>
+    </div>
+  </teleport>
 </template>
 
 <script setup lang="ts">
-// 该组件暂时不需要脚本逻辑。
+import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue';
+import { Icon } from '@iconify/vue';
+import { groupIcons } from '@/config/groupIcons';
+import {
+  sidebarBaseItems,
+  sidebarAddItem,
+  sidebarBottomItems,
+  type SidebarItem
+} from '@/config/sidebarItems';
+
+type NavItem = SidebarItem;
+
+type SidebarOverride = {
+  label?: string;
+  iconId?: string;
+};
+
+const STORAGE_KEY = 'itab_sidebar_active';
+
+const props = defineProps<{
+  groups?: NavItem[];
+  baseOverrides?: Record<string, SidebarOverride>;
+  hiddenBaseIds?: string[];
+}>();
+
+const baseIdSet = new Set(sidebarBaseItems.map(item => item.id));
+
+const resolvedBaseItems = computed(() => {
+  const overrides = props.baseOverrides ?? {};
+  const hidden = new Set(props.hiddenBaseIds ?? []);
+  return sidebarBaseItems
+    .filter(item => !hidden.has(item.id))
+    .map(item => {
+      const override = overrides[item.id];
+      return {
+        ...item,
+        label: override?.label ?? item.label,
+        iconId: override?.iconId ?? item.iconId,
+      };
+    });
+});
+
+const topItems = computed(() => [...resolvedBaseItems.value, ...(props.groups ?? []), sidebarAddItem]);
+const bottomItems = computed(() => sidebarBottomItems);
+const allItems = computed(() => [...topItems.value, ...bottomItems.value]);
+const selectableItems = computed(() => allItems.value.filter(item => !item.action));
+const groupIconMap = new Map(groupIcons.map(icon => [icon.id, icon.icon]));
+const getGroupIcon = (iconId?: string) => (iconId ? groupIconMap.get(iconId) : undefined);
+
+const emit = defineEmits<{
+  (event: 'select', id: string): void;
+  (event: 'add'): void;
+  (event: 'edit-group', payload: { id: string; source: 'base' | 'group' }): void;
+  (event: 'remove-group', payload: { id: string; source: 'base' | 'group' }): void;
+  (event: 'settings'): void;
+  (event: 'profile'): void;
+}>();
+
+const activeId = ref(
+  resolvedBaseItems.value[0]?.id ??
+    props.groups?.[0]?.id ??
+    selectableItems.value[0]?.id ??
+    sidebarAddItem.id
+);
+
+onMounted(() => {
+  const saved = localStorage.getItem(STORAGE_KEY);
+  const allowed = selectableItems.value.some(item => item.id === saved);
+  if (saved && allowed) {
+    activeId.value = saved;
+  }
+});
+
+watch(selectableItems, items => {
+  if (!items.length) return;
+  if (!items.some(item => item.id === activeId.value)) {
+    setActive(items[0].id);
+  }
+});
+
+const setActive = (id: string) => {
+  if (!selectableItems.value.some(item => item.id === id)) return;
+  activeId.value = id;
+  localStorage.setItem(STORAGE_KEY, id);
+};
+
+const handleItemClick = (item: NavItem) => {
+  if (item.action === 'add') {
+    emit('add');
+    return;
+  }
+
+  if (item.action === 'settings') {
+    emit('settings');
+    return;
+  }
+
+  setActive(item.id);
+  emit('select', item.id);
+};
+
+const handleProfile = () => {
+  emit('profile');
+};
+
+const menuRef = ref<HTMLElement | null>(null);
+const menuPosition = ref({ x: 0, y: 0 });
+const menuState = ref<{ open: boolean; itemId: string | null; source: 'base' | 'group' | null }>({
+  open: false,
+  itemId: null,
+  source: null,
+});
+
+const viewportPadding = 8;
+
+const menuStyle = computed(() => ({
+  left: `${menuPosition.value.x}px`,
+  top: `${menuPosition.value.y}px`,
+}));
+
+const clampMenuPosition = () => {
+  const menuEl = menuRef.value;
+  if (!menuEl) return;
+  const rect = menuEl.getBoundingClientRect();
+  const maxX = Math.max(viewportPadding, window.innerWidth - rect.width - viewportPadding);
+  const maxY = Math.max(viewportPadding, window.innerHeight - rect.height - viewportPadding);
+  const x = Math.min(Math.max(menuPosition.value.x, viewportPadding), maxX);
+  const y = Math.min(Math.max(menuPosition.value.y, viewportPadding), maxY);
+  menuPosition.value = { x, y };
+};
+
+const closeMenu = () => {
+  menuState.value = { open: false, itemId: null, source: null };
+};
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && menuState.value.open) {
+    event.preventDefault();
+    closeMenu();
+  }
+};
+
+const handleItemContextMenu = async (event: MouseEvent, item: NavItem) => {
+  if (item.action) return;
+  menuState.value = {
+    open: true,
+    itemId: item.id,
+    source: baseIdSet.has(item.id) ? 'base' : 'group',
+  };
+  menuPosition.value = { x: event.clientX, y: event.clientY };
+  await nextTick();
+  clampMenuPosition();
+};
+
+const handleEdit = () => {
+  if (!menuState.value.itemId || !menuState.value.source) return;
+  emit('edit-group', { id: menuState.value.itemId, source: menuState.value.source });
+  closeMenu();
+};
+
+const handleRemove = () => {
+  if (!menuState.value.itemId || !menuState.value.source) return;
+  emit('remove-group', { id: menuState.value.itemId, source: menuState.value.source });
+  closeMenu();
+};
+
+watch(
+  () => menuState.value.open,
+  open => {
+    if (!open) return;
+    clampMenuPosition();
+  }
+);
+
+onMounted(() => {
+  window.addEventListener('resize', clampMenuPosition);
+  window.addEventListener('keydown', handleKeydown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', clampMenuPosition);
+  window.removeEventListener('keydown', handleKeydown);
+});
 </script>
 
 <style lang="scss" scoped>
-
 @import '@/styles/tokens.scss';
 
 .sidebar {
@@ -57,7 +278,7 @@
   flex-direction: column;
   align-items: center;
   padding: var(--sidebar-padding-y) 0;
-  background-color: rgba(10, 10, 10, 0.5); // 半透明黑色
+  background-color: rgba(10, 10, 10, 0.5);
   backdrop-filter: blur($backdrop-filter-blur) saturate($backdrop-filter-saturation);
   border-right: 1px solid rgba(255, 255, 255, 0.08);
   position: fixed;
@@ -72,11 +293,28 @@
   border-radius: 50%;
   background-color: $color-accent;
   margin-bottom: var(--sidebar-profile-margin-bottom);
-  // 可放置“登录”文本或真实头像
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
+  color: $color-text-primary;
+  border: none;
+  cursor: pointer;
+  transition: transform $motion-duration-sm $motion-easing-standard,
+    box-shadow $motion-duration-sm $motion-easing-standard;
+}
+
+.profile-icon:hover {
+  box-shadow: $shadow-sm;
+}
+
+.profile-icon:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.35);
+  outline-offset: 2px;
+}
+
+.profile-initial {
+  font-weight: 600;
 }
 
 .sidebar-nav {
@@ -97,43 +335,156 @@
   justify-content: center;
   text-decoration: none;
   color: $color-text-secondary;
-  transition: background-color $motion-duration-sm $motion-easing-standard;
+  background: transparent;
+  border: 1px solid transparent;
+  transition: background-color $motion-duration-sm $motion-easing-standard,
+    color $motion-duration-sm $motion-easing-standard,
+    transform $motion-duration-sm $motion-easing-standard,
+    box-shadow $motion-duration-sm $motion-easing-standard,
+    border-color $motion-duration-sm $motion-easing-standard;
   position: relative;
-
-  span {
-    font-size: 12px;
-    margin-top: 4px; // 预留图标间距
-  }
-  
-  &.active, &:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-    color: $color-text-primary;
-  }
-
-  &.active::before {
-    content: '';
-    position: absolute;
-    left: var(--sidebar-active-indicator-offset);
-    top: 50%;
-    transform: translateY(-50%);
-    width: var(--sidebar-active-indicator-width);
-    height: var(--sidebar-active-indicator-height);
-    background-color: $color-accent;
-    border-radius: 2px;
-  }
+  cursor: pointer;
 }
 
-.add-item {
+.nav-item::before {
+  content: '';
+  position: absolute;
+  left: var(--sidebar-active-indicator-offset);
+  top: 50%;
+  transform: translateY(-50%) scaleY(0.6);
+  width: var(--sidebar-active-indicator-width);
+  height: var(--sidebar-active-indicator-height);
+  background-color: $color-accent;
+  border-radius: 2px;
+  opacity: 0;
+  transition: opacity $motion-duration-sm $motion-easing-standard,
+    transform $motion-duration-sm $motion-easing-standard;
+}
+
+.nav-item:hover { 
+  background-color: rgba(255, 255, 255, 0.1);
+  color: $color-text-primary;
+  box-shadow: $shadow-sm;
+}
+
+.nav-item:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.35);
+  outline-offset: 2px;
+}
+
+.nav-item.active {
+  background-color: rgba(255, 255, 255, 0.14);
+  color: $color-text-primary;
+}
+
+.nav-item.active::before {
+  opacity: 1;
+  transform: translateY(-50%) scaleY(1.5);
+}
+
+.nav-icon {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  margin-bottom: var(--sidebar-icon-margin-bottom, 4px);
+}
+
+.nav-item.has-icon .nav-text {
+  font-size: 10px;
+  line-height: 1;
+}
+
+.nav-text {
+  font-size: 12px;
+  line-height: 1.1;
+  display: var(--sidebar-label-display, block);
+}
+
+.nav-item--add {
   margin-top: var(--sidebar-add-margin-top);
   border: 1px dashed rgba(255, 255, 255, 0.2);
-  color: rgba(255, 255, 255, 0.4);
-   &:hover {
-    border-color: rgba(255, 255, 255, 0.5);
-    color: white;
-  }
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.nav-item--add::before {
+  opacity: 0;
+}
+
+.nav-item--add:hover {
+  border-color: rgba(255, 255, 255, 0.6);
+  color: $color-text-primary;
+  background-color: rgba(255, 255, 255, 0.05);
+  box-shadow: none;
 }
 
 .sidebar-bottom {
   margin-top: auto;
 }
+
+.sidebar-menu-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: $z-index-menu - 1;
+}
+
+.sidebar-menu {
+  position: absolute;
+  min-width: 140px;
+  background-color: $color-surface-2;
+  backdrop-filter: blur($backdrop-filter-blur) saturate($backdrop-filter-saturation);
+  border-radius: $border-radius-medium;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: $shadow-lg;
+  z-index: $z-index-menu;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  animation: sidebar-menu-pop 110ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.sidebar-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: $border-radius-small;
+  background: transparent;
+  border: none;
+  color: $color-text-primary;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background-color $motion-duration-sm $motion-easing-standard;
+}
+
+.sidebar-menu-item:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.sidebar-menu-item.menu-danger {
+  color: #ff5c5c;
+}
+
+.sidebar-menu-item.menu-danger .menu-icon {
+  color: #ff5c5c;
+}
+
+.menu-icon {
+  width: 16px;
+  height: 16px;
+}
+
+@keyframes sidebar-menu-pop {
+  0% {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
 </style>
diff --git a/app/src/components/WidgetCard/index.vue b/app/src/components/WidgetCard/index.vue
index 4e772e6..7685d98 100644
--- a/app/src/components/WidgetCard/index.vue
+++ b/app/src/components/WidgetCard/index.vue
@@ -5,6 +5,7 @@
         <component :is="widgetComponent" :data="props.widget.data" :size="props.widget.size" />
       </div>
     </div>
+    <div class="card-spacer"></div>
     <div class="label label-below">{{ label }}</div>
   </div>
 </template>
@@ -42,9 +43,9 @@ const label = computed(() => {
 .widget-card-wrapper {
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: var(--icon-card-padding);
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) var(--icon-label-margin-top) auto;
+  padding: var(--widget-card-padding, var(--icon-card-padding));
 
   // 鏍规嵁灏哄绫诲悕鎺у埗灏哄
   &.size-1x1 { grid-column: span 1; grid-row: span 1; }
@@ -53,15 +54,11 @@ const label = computed(() => {
   &.size-2x2 { grid-column: span 2; grid-row: span 2; }
   &.size-2x4 { grid-column: span 2; grid-row: span 4; }
 
-  &.size-1x1 {
-    align-items: center;
-    justify-content: center;
-  }
 }
 
 .widget-card {
   width: 100%;
-  flex: 1 1 auto;
+  height: 100%;
   min-height: 0;
   background-color: $color-surface-1;
   backdrop-filter: blur($backdrop-filter-blur) saturate($backdrop-filter-saturation);
@@ -71,13 +68,20 @@ const label = computed(() => {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  margin-bottom: var(--icon-label-margin-top);
+  transform: scale(var(--widget-scale, 1));
+  transform-origin: center;
+}
+
+.card-spacer {
+  height: 100%;
+  pointer-events: none;
 }
 
 .widget-card-wrapper.size-1x1 .widget-card {
-  width: var(--icon-size);
-  height: var(--icon-size);
-  flex: 0 0 auto;
+  width: auto;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  justify-self: center;
 }
 
 .widget-content {
@@ -90,6 +94,7 @@ const label = computed(() => {
   color: $color-text-primary;
   text-align: center;
   width: 100%;
+  display: var(--widget-label-display, block);
   white-space: normal;
   word-break: break-word;
   line-height: 1.2;
diff --git a/app/src/composables/useSettingsSync.ts b/app/src/composables/useSettingsSync.ts
new file mode 100644
index 0000000..f543a2c
--- /dev/null
+++ b/app/src/composables/useSettingsSync.ts
@@ -0,0 +1,110 @@
+import { watchEffect } from 'vue';
+import { useSettingsStore } from '@/store/useSettingsStore';
+import {
+  getIconDensityScale,
+  getLayoutDensityPreset,
+  getThemePreset,
+  iconRadiusRange,
+} from '@/config/settingsPresets';
+import { layoutConfig } from '@/config/layout';
+
+const setPx = (root: HTMLElement, name: string, value: number) => {
+  root.style.setProperty(name, `${value}px`);
+};
+
+const setVar = (root: HTMLElement, name: string, value: string) => {
+  root.style.setProperty(name, value);
+};
+
+const clampRange = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+const getSidebarVars = (compact: boolean) => {
+  const base = layoutConfig.sidebar;
+  if (!compact) {
+    return {
+      width: base.width,
+      paddingY: base.paddingY,
+      profileSize: base.profileSize,
+      profileMarginBottom: base.profileMarginBottom,
+      navItemSize: base.navItemSize,
+      navGap: base.navGap,
+    };
+  }
+  return {
+    width: Math.max(56, base.width - 8),
+    paddingY: Math.max(12, base.paddingY - 6),
+    profileSize: Math.max(30, base.profileSize - 8),
+    profileMarginBottom: Math.max(16, base.profileMarginBottom - 12),
+    navItemSize: Math.max(34, base.navItemSize - 8),
+    navGap: Math.max(10, base.navGap - 6),
+  };
+};
+
+export const useSettingsSync = () => {
+  const settingsStore = useSettingsStore();
+  const root = document.documentElement;
+
+  watchEffect(() => {
+    const layoutPreset = getLayoutDensityPreset(settingsStore.layoutDensity);
+    const themePreset = getThemePreset(settingsStore.themeId);
+    const baseIcon = layoutConfig.icon;
+    const iconRadius = clampRange(settingsStore.iconRadius, iconRadiusRange.min, iconRadiusRange.max);
+    const baseGrid = layoutConfig.grid;
+    const sizeScale = layoutPreset.cellSize / baseGrid.cellSize;
+    const labelScale = clampRange(sizeScale, 0.7, 1);
+    const iconPadding = Math.max(0, baseIcon.padding * sizeScale);
+    const widgetScale = sizeScale;
+    const widgetPadding = Math.max(0, baseIcon.padding * sizeScale);
+    const iconFontSize = Math.max(14, Math.round(baseIcon.fontSize * sizeScale));
+    const iconLabelFontSize = Math.max(10, Math.round(baseIcon.labelFontSize * labelScale));
+    const iconLabelMarginTop = Math.max(4, Math.round(baseIcon.labelMarginTop * labelScale));
+    const widgetLabelFontSize = Math.max(
+      10,
+      Math.round(layoutConfig.widget.labelFontSize * labelScale)
+    );
+    const widgetLabelPaddingY = Math.max(
+      4,
+      Math.round(layoutConfig.widget.labelPaddingY * labelScale)
+    );
+    const densityScale = getIconDensityScale(settingsStore.iconDensity);
+    const baseVisualGap = (layoutPreset.gap + iconPadding * 2) * densityScale;
+    // Keep density purely controlling spacing; allow deeper negative gap for extra-tight layouts.
+    const minGap = -layoutPreset.cellSize * 0.75;
+    const gridGap = Math.max(minGap, baseVisualGap - iconPadding * 2);
+
+    setPx(root, '--grid-cell-size', layoutPreset.cellSize);
+    setPx(root, '--grid-gap', gridGap);
+
+    setPx(root, '--icon-card-padding', iconPadding);
+    setPx(root, '--widget-card-padding', widgetPadding);
+    setVar(root, '--widget-scale', widgetScale.toFixed(3));
+    setPx(root, '--icon-font-size', iconFontSize);
+    setPx(root, '--icon-label-font-size', iconLabelFontSize);
+    setPx(root, '--icon-radius', iconRadius);
+    setPx(
+      root,
+      '--icon-label-margin-top',
+      settingsStore.showIconLabels ? iconLabelMarginTop : 0
+    );
+    setPx(root, '--widget-label-font-size', widgetLabelFontSize);
+    setPx(root, '--widget-label-padding-y', widgetLabelPaddingY);
+
+    setVar(root, '--icon-label-display', settingsStore.showIconLabels ? 'block' : 'none');
+    setVar(root, '--widget-label-display', settingsStore.showIconLabels ? 'block' : 'none');
+
+    const sidebarVars = getSidebarVars(settingsStore.compactSidebar);
+    setPx(root, '--sidebar-width', sidebarVars.width);
+    setPx(root, '--sidebar-padding-y', sidebarVars.paddingY);
+    setPx(root, '--sidebar-profile-size', sidebarVars.profileSize);
+    setPx(root, '--sidebar-profile-margin-bottom', sidebarVars.profileMarginBottom);
+    setPx(root, '--sidebar-nav-item-size', sidebarVars.navItemSize);
+    setPx(root, '--sidebar-nav-gap', sidebarVars.navGap);
+
+    setVar(root, '--sidebar-label-display', settingsStore.showGroupLabels ? 'block' : 'none');
+    setVar(root, '--sidebar-icon-margin-bottom', settingsStore.showGroupLabels ? '4px' : '0px');
+
+    setVar(root, '--desktop-bg-image', themePreset.image);
+    setVar(root, '--desktop-bg-overlay', themePreset.overlay);
+  });
+};
diff --git a/app/src/config/groupIcons.ts b/app/src/config/groupIcons.ts
new file mode 100644
index 0000000..c9aef0b
--- /dev/null
+++ b/app/src/config/groupIcons.ts
@@ -0,0 +1,133 @@
+export type GroupIcon = {
+  id: string;
+  label: string;
+  icon: string;
+};
+
+export const groupIcons: GroupIcon[] = [
+  {
+    id: 'home',
+    label: '主页',
+    icon: 'lucide:home'
+  },
+  {
+    id: 'heart',
+    label: '收藏',
+    icon: 'lucide:heart'
+  },
+  {
+    id: 'music',
+    label: '音乐',
+    icon: 'lucide:music'
+  },
+  {
+    id: 'message',
+    label: '消息',
+    icon: 'lucide:message-circle'
+  },
+  {
+    id: 'briefcase',
+    label: '工作',
+    icon: 'lucide:briefcase'
+  },
+  {
+    id: 'gamepad',
+    label: '游戏',
+    icon: 'lucide:gamepad-2'
+  },
+  {
+    id: 'code',
+    label: '代码',
+    icon: 'lucide:code-2'
+  },
+  {
+    id: 'design',
+    label: '设计',
+    icon: 'lucide:palette'
+  },
+  {
+    id: 'product',
+    label: '产品',
+    icon: 'lucide:package'
+  },
+  {
+    id: 'ai',
+    label: 'AI',
+    icon: 'lucide:sparkles'
+  },
+  {
+    id: 'fun',
+    label: '摸鱼',
+    icon: 'lucide:party-popper'
+  },
+  {
+    id: 'book',
+    label: '读书',
+    icon: 'lucide:book'
+  },
+  {
+    id: 'tool',
+    label: '工具',
+    icon: 'lucide:wrench'
+  },
+  {
+    id: 'star',
+    label: '收藏夹',
+    icon: 'lucide:star'
+  },
+  {
+    id: 'cube',
+    label: '应用',
+    icon: 'lucide:app-window'
+  },
+  {
+    id: 'leaf',
+    label: '生活',
+    icon: 'lucide:leaf'
+  },
+  {
+    id: 'image',
+    label: '图片',
+    icon: 'lucide:image'
+  },
+  {
+    id: 'flag',
+    label: '目标',
+    icon: 'lucide:flag'
+  },
+  {
+    id: 'plane',
+    label: '旅行',
+    icon: 'lucide:plane'
+  },
+  {
+    id: 'map',
+    label: '地图',
+    icon: 'lucide:map-pin'
+  },
+  {
+    id: 'bookmark',
+    label: '阅读',
+    icon: 'lucide:bookmark'
+  },
+  {
+    id: 'tag',
+    label: '标签',
+    icon: 'lucide:tag'
+  },
+  {
+    id: 'folder',
+    label: '文件',
+    icon: 'lucide:folder'
+  },
+  {
+    id: 'settings',
+    label: '设置',
+    icon: 'lucide:settings'
+  },
+  {
+    id: 'add',
+    label: '新增',
+    icon: 'lucide:plus'
+  }
+];
diff --git a/app/src/config/layout.ts b/app/src/config/layout.ts
index eda8f04..dfe6f18 100644
--- a/app/src/config/layout.ts
+++ b/app/src/config/layout.ts
@@ -55,6 +55,8 @@ export const layoutConfig = {
     fontSize: 28,
     // 卡片内边距（像素）。
     padding: 8,
+    // 图标卡片圆角（像素）。
+    radius: 12,
     // 标签字体大小（像素）。
     labelFontSize: 13,
     // 图标与标签间距（像素）。
@@ -143,6 +145,8 @@ export const applyLayoutConfig = (root: HTMLElement = document.documentElement)
   setPx(root, '--icon-size', layoutConfig.icon.size);
   setPx(root, '--icon-font-size', layoutConfig.icon.fontSize);
   setPx(root, '--icon-card-padding', layoutConfig.icon.padding);
+  setPx(root, '--widget-card-padding', layoutConfig.icon.padding);
+  setPx(root, '--icon-radius', layoutConfig.icon.radius);
   setPx(root, '--icon-label-font-size', layoutConfig.icon.labelFontSize);
   setPx(root, '--icon-label-margin-top', layoutConfig.icon.labelMarginTop);
 
diff --git a/app/src/config/settingsPresets.ts b/app/src/config/settingsPresets.ts
new file mode 100644
index 0000000..4e11102
--- /dev/null
+++ b/app/src/config/settingsPresets.ts
@@ -0,0 +1,171 @@
+import { layoutConfig } from './layout';
+
+export type SearchProvider = {
+  id: 'baidu' | 'bing' | 'google' | 'zhihu';
+  label: string;
+  url: string;
+  placeholder: string;
+};
+
+export const searchProviders: SearchProvider[] = [
+  {
+    id: 'baidu',
+    label: '百度',
+    url: 'https://www.baidu.com/s?wd=',
+    placeholder: '百度一下',
+  },
+  {
+    id: 'bing',
+    label: '必应',
+    url: 'https://www.bing.com/search?q=',
+    placeholder: '搜索必应',
+  },
+  {
+    id: 'google',
+    label: '谷歌',
+    url: 'https://www.google.com/search?q=',
+    placeholder: '搜索谷歌',
+  },
+  {
+    id: 'zhihu',
+    label: '知乎',
+    url: 'https://www.zhihu.com/search?q=',
+    placeholder: '知乎搜索',
+  },
+];
+
+export type SearchProviderId = SearchProvider['id'];
+
+export const getSearchProvider = (id?: string) =>
+  searchProviders.find(item => item.id === id) ?? searchProviders[0];
+
+export type ThemePreset = {
+  id: 'default' | 'warm' | 'sea' | 'forest';
+  label: string;
+  overlay: string;
+  image: string;
+};
+
+export const themePresets: ThemePreset[] = [
+  {
+    id: 'default',
+    label: '默认',
+    overlay: 'none',
+    image: "url('/bg.png')",
+  },
+  {
+    id: 'warm',
+    label: '暖阳',
+    overlay: 'linear-gradient(135deg, rgba(255, 185, 110, 0.32), rgba(255, 221, 149, 0.14))',
+    image: "url('/bg.png')",
+  },
+  {
+    id: 'sea',
+    label: '海盐',
+    overlay: 'linear-gradient(135deg, rgba(88, 200, 255, 0.3), rgba(183, 240, 255, 0.14))',
+    image: "url('/bg.png')",
+  },
+  {
+    id: 'forest',
+    label: '松林',
+    overlay: 'linear-gradient(135deg, rgba(96, 198, 137, 0.28), rgba(217, 247, 201, 0.12))',
+    image: "url('/bg.png')",
+  },
+];
+
+export type ThemePresetId = ThemePreset['id'];
+
+export const getThemePreset = (id?: string) =>
+  themePresets.find(item => item.id === id) ?? themePresets[0];
+
+const clamp = (value: number, min: number) => (value < min ? min : value);
+const clampRange = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+export type LayoutDensityPreset = {
+  value: 1 | 2 | 3 | 4;
+  label: string;
+  cellSize: number;
+  gap: number;
+};
+
+const baseGrid = layoutConfig.grid;
+const baseIcon = layoutConfig.icon;
+
+export const layoutDensityPresets: LayoutDensityPreset[] = [
+  {
+    value: 1,
+    label: '宽松',
+    cellSize: baseGrid.cellSize + 16,
+    gap: baseGrid.gap + 10,
+  },
+  {
+    value: 2,
+    label: '标准',
+    cellSize: baseGrid.cellSize,
+    gap: baseGrid.gap,
+  },
+  {
+    value: 3,
+    label: '紧凑',
+    cellSize: clamp(baseGrid.cellSize - 18, 76),
+    gap: clamp(baseGrid.gap - 6, 8),
+  },
+  {
+    value: 4,
+    label: '更紧凑',
+    cellSize: clamp(baseGrid.cellSize - 32, 64),
+    gap: clamp(baseGrid.gap - 10, 4),
+  },
+];
+
+export const getLayoutDensityPreset = (value?: number) =>
+  layoutDensityPresets.find(item => item.value === value) ?? layoutDensityPresets[1];
+
+export const iconDensityRange = {
+  min: 0,
+  max: 10,
+  step: 1,
+  default: 5,
+};
+
+const iconDensityScaleRange = {
+  loose: 1.3,
+  dense: 0.05,
+};
+
+export const getIconDensityScale = (value?: number) => {
+  const normalized = clampRange(
+    typeof value === 'number' ? value : iconDensityRange.default,
+    iconDensityRange.min,
+    iconDensityRange.max
+  );
+  if (normalized === iconDensityRange.default) {
+    return 1;
+  }
+  if (normalized < iconDensityRange.default) {
+    // Smaller slider value = denser布局
+    const t = (iconDensityRange.default - normalized) /
+      (iconDensityRange.default - iconDensityRange.min);
+    return 1 - t * (1 - iconDensityScaleRange.dense);
+  }
+  const t = (normalized - iconDensityRange.default) /
+    (iconDensityRange.max - iconDensityRange.default);
+  return 1 + t * (iconDensityScaleRange.loose - 1);
+};
+
+export const iconSizeRange = {
+  min: 70,
+  max: 100,
+  step: 1,
+  default: Math.round(
+    ((baseGrid.cellSize - baseIcon.padding * 2) / baseGrid.cellSize) * 100
+  ),
+};
+
+export const iconRadiusRange = {
+  min: 0,
+  max: 24,
+  step: 1,
+  default: baseIcon.radius,
+};
diff --git a/app/src/config/sidebarItems.ts b/app/src/config/sidebarItems.ts
new file mode 100644
index 0000000..4c4b4c9
--- /dev/null
+++ b/app/src/config/sidebarItems.ts
@@ -0,0 +1,28 @@
+export type SidebarItem = {
+  id: string;
+  label: string;
+  iconId?: string;
+  action?: 'add' | 'settings';
+  variant?: 'add';
+};
+
+export const sidebarBaseItems: SidebarItem[] = [
+  { id: 'home', label: '主页', iconId: 'home' },
+  { id: 'code', label: '编程', iconId: 'code' },
+  { id: 'design', label: '设计', iconId: 'design' },
+  { id: 'product', label: '产品', iconId: 'product' },
+  { id: 'ai', label: 'AI', iconId: 'ai' },
+  { id: 'fun', label: '摸鱼', iconId: 'fun' },
+];
+
+export const sidebarAddItem: SidebarItem = {
+  id: 'add',
+  label: '新增',
+  action: 'add',
+  variant: 'add',
+  iconId: 'add',
+};
+
+export const sidebarBottomItems: SidebarItem[] = [
+  { id: 'settings', label: '设置', action: 'settings', iconId: 'settings' }
+];
diff --git a/app/src/config/theme.ts b/app/src/config/theme.ts
index c576894..d0cc1f7 100644
--- a/app/src/config/theme.ts
+++ b/app/src/config/theme.ts
@@ -4,7 +4,7 @@ export const themeConfig = {
     // 小圆角（像素）。
     sm: 12,
     // 中圆角（像素）。
-    md: 16,
+    md: 8,
     // 大圆角（像素）。
     lg: 24,
     // 胶囊圆角（像素）。
diff --git a/app/src/store/useLayoutStore.ts b/app/src/store/useLayoutStore.ts
index 2d44154..bb4f834 100644
--- a/app/src/store/useLayoutStore.ts
+++ b/app/src/store/useLayoutStore.ts
@@ -1,4 +1,4 @@
-import { defineStore } from 'pinia';
+import { defineStore, acceptHMRUpdate } from 'pinia';
 
 type IconSize = '1x1' | '1x2' | '2x1' | '2x2' | '2x4';
 
@@ -9,6 +9,7 @@ interface Icon {
   url: string;
   size?: IconSize;
   img?: string; // 可选：用于图片图标（如徽标）
+  text?: string; // 可选：用于文字图标
   bgColor?: string; // 可选：纯色背景
 }
 
@@ -74,6 +75,17 @@ export const useLayoutStore = defineStore('layout', {
     }
   }),
   actions: {
+    addIcon(icon: Omit<Icon, 'id'>) {
+      const nextId = `custom-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+      this.icons.push({ ...icon, id: nextId });
+      localStorage.setItem('itab_icons', JSON.stringify(this.icons));
+    },
+    updateIcon(iconId: string, updates: Partial<Omit<Icon, 'id'>>) {
+      const icon = this.icons.find(item => item.id === iconId);
+      if (!icon) return;
+      Object.assign(icon, updates);
+      localStorage.setItem('itab_icons', JSON.stringify(this.icons));
+    },
     reorderIcons(draggedId: string, targetId: string) {
       const draggedIndex = this.icons.findIndex(p => p.id === draggedId);
       const targetIndex = this.icons.findIndex(p => p.id === targetId);
@@ -123,3 +135,7 @@ export const useLayoutStore = defineStore('layout', {
     },
   }
 });
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useLayoutStore, import.meta.hot));
+}
diff --git a/app/src/store/useSettingsStore.ts b/app/src/store/useSettingsStore.ts
new file mode 100644
index 0000000..77ef221
--- /dev/null
+++ b/app/src/store/useSettingsStore.ts
@@ -0,0 +1,129 @@
+import { defineStore, acceptHMRUpdate } from 'pinia';
+import {
+  getSearchProvider,
+  getThemePreset,
+  iconDensityRange,
+  iconRadiusRange,
+  layoutDensityPresets,
+  searchProviders,
+  themePresets,
+  type SearchProviderId,
+  type ThemePresetId,
+} from '@/config/settingsPresets';
+
+type IconDensity = number;
+type LayoutDensity = 1 | 2 | 3 | 4;
+
+type SettingsState = {
+  showSearch: boolean;
+  showClock: boolean;
+  showDate: boolean;
+  showSeconds: boolean;
+  use24Hour: boolean;
+  openInNewTab: boolean;
+  searchProvider: SearchProviderId;
+  showIconLabels: boolean;
+  iconDensity: IconDensity;
+  iconRadius: number;
+  themeId: ThemePresetId;
+  layoutDensity: LayoutDensity;
+  autoAlign: boolean;
+  compactSidebar: boolean;
+  showGroupLabels: boolean;
+};
+
+const SETTINGS_STORAGE_KEY = 'itab_settings';
+
+const defaultSettings: SettingsState = {
+  showSearch: true,
+  showClock: true,
+  showDate: true,
+  showSeconds: false,
+  use24Hour: true,
+  openInNewTab: true,
+  searchProvider: getSearchProvider().id,
+  showIconLabels: true,
+  iconDensity: iconDensityRange.default,
+  iconRadius: iconRadiusRange.default,
+  themeId: getThemePreset().id,
+  layoutDensity: 2,
+  autoAlign: true,
+  compactSidebar: false,
+  showGroupLabels: true,
+};
+
+const searchProviderIds = new Set(searchProviders.map(item => item.id));
+const themePresetIds = new Set(themePresets.map(item => item.id));
+const layoutDensityValues = new Set(layoutDensityPresets.map(item => item.value));
+const clampRange = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+const loadSettings = (): SettingsState => {
+  const raw = localStorage.getItem(SETTINGS_STORAGE_KEY);
+  if (!raw) return { ...defaultSettings };
+  try {
+    const parsed = JSON.parse(raw) as Partial<SettingsState> | null;
+    if (!parsed || typeof parsed !== 'object') {
+      return { ...defaultSettings };
+    }
+    return {
+      showSearch: typeof parsed.showSearch === 'boolean' ? parsed.showSearch : defaultSettings.showSearch,
+      showClock: typeof parsed.showClock === 'boolean' ? parsed.showClock : defaultSettings.showClock,
+      showDate: typeof parsed.showDate === 'boolean' ? parsed.showDate : defaultSettings.showDate,
+      showSeconds: typeof parsed.showSeconds === 'boolean' ? parsed.showSeconds : defaultSettings.showSeconds,
+      use24Hour: typeof parsed.use24Hour === 'boolean' ? parsed.use24Hour : defaultSettings.use24Hour,
+      openInNewTab: typeof parsed.openInNewTab === 'boolean' ? parsed.openInNewTab : defaultSettings.openInNewTab,
+      searchProvider:
+        typeof parsed.searchProvider === 'string' && searchProviderIds.has(parsed.searchProvider)
+          ? parsed.searchProvider
+          : defaultSettings.searchProvider,
+      showIconLabels:
+        typeof parsed.showIconLabels === 'boolean' ? parsed.showIconLabels : defaultSettings.showIconLabels,
+      iconDensity:
+        typeof parsed.iconDensity === 'number'
+          ? clampRange(parsed.iconDensity, iconDensityRange.min, iconDensityRange.max)
+          : defaultSettings.iconDensity,
+      iconRadius:
+        typeof parsed.iconRadius === 'number'
+          ? clampRange(parsed.iconRadius, iconRadiusRange.min, iconRadiusRange.max)
+          : defaultSettings.iconRadius,
+      themeId:
+        typeof parsed.themeId === 'string' && themePresetIds.has(parsed.themeId)
+          ? parsed.themeId
+          : defaultSettings.themeId,
+      layoutDensity:
+        typeof parsed.layoutDensity === 'number' && layoutDensityValues.has(parsed.layoutDensity)
+          ? parsed.layoutDensity
+          : defaultSettings.layoutDensity,
+      autoAlign: typeof parsed.autoAlign === 'boolean' ? parsed.autoAlign : defaultSettings.autoAlign,
+      compactSidebar:
+        typeof parsed.compactSidebar === 'boolean' ? parsed.compactSidebar : defaultSettings.compactSidebar,
+      showGroupLabels:
+        typeof parsed.showGroupLabels === 'boolean' ? parsed.showGroupLabels : defaultSettings.showGroupLabels,
+    };
+  } catch {
+    return { ...defaultSettings };
+  }
+};
+
+const persistSettings = (state: SettingsState) => {
+  localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(state));
+};
+
+export const useSettingsStore = defineStore('settings', {
+  state: (): SettingsState => loadSettings(),
+  actions: {
+    setSetting<K extends keyof SettingsState>(key: K, value: SettingsState[K]) {
+      this[key] = value;
+      persistSettings(this.$state);
+    },
+    reset() {
+      Object.assign(this.$state, defaultSettings);
+      persistSettings(this.$state);
+    },
+  }
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useSettingsStore, import.meta.hot));
+}
diff --git a/app/src/store/useUIStore.ts b/app/src/store/useUIStore.ts
index 6a41c6e..fb0eef1 100644
--- a/app/src/store/useUIStore.ts
+++ b/app/src/store/useUIStore.ts
@@ -5,7 +5,7 @@ interface ContextMenuState {
   x: number;
   y: number;
   itemId: string | null;
-  itemType?: 'icon' | 'widget';
+  itemType?: 'icon' | 'widget' | 'desktop';
 }
 
 interface UIState {
@@ -23,7 +23,12 @@ export const useUIStore = defineStore('ui', {
     }
   }),
   actions: {
-    openContextMenu(x: number, y: number, itemId: string, itemType: 'icon' | 'widget') {
+    openContextMenu(
+      x: number,
+      y: number,
+      itemId: string | null,
+      itemType: 'icon' | 'widget' | 'desktop'
+    ) {
       this.contextMenu = {
         isOpen: true,
         x,
diff --git a/app/src/store/useWidgetsStore.ts b/app/src/store/useWidgetsStore.ts
index bb5e12e..91a881b 100644
--- a/app/src/store/useWidgetsStore.ts
+++ b/app/src/store/useWidgetsStore.ts
@@ -1,4 +1,4 @@
-import { defineStore } from 'pinia';
+import { defineStore, acceptHMRUpdate } from 'pinia';
 
 // 组件数据结构
 type WidgetSize = '1x1' | '1x2' | '2x1' | '2x2' | '2x4';
@@ -52,6 +52,35 @@ export const useWidgetsStore = defineStore('widgets', {
     widgets: savedWidgets ? JSON.parse(savedWidgets) : defaultWidgets,
   }),
   actions: {
+    addWidget(payload: { component: string; size?: WidgetSize; data?: any }) {
+      const nextId = `widget-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+      const nextWidget: Widget = {
+        id: nextId,
+        component: payload.component,
+        size: payload.size ?? '1x1',
+        gridPosition: { x: 0, y: 0 },
+        data: payload.data,
+      };
+      this.widgets.push(nextWidget);
+      localStorage.setItem('itab_widgets', JSON.stringify(this.widgets));
+    },
+    replaceWidget(widgetId: string, payload: { component: string; size?: WidgetSize; data?: any }) {
+      const widget = this.widgets.find(item => item.id === widgetId);
+      if (!widget) return;
+      widget.component = payload.component;
+      if (payload.size) {
+        widget.size = payload.size;
+      }
+      widget.data = payload.data;
+      localStorage.setItem('itab_widgets', JSON.stringify(this.widgets));
+    },
+    deleteWidget(widgetId: string) {
+      const index = this.widgets.findIndex(widget => widget.id === widgetId);
+      if (index !== -1) {
+        this.widgets.splice(index, 1);
+        localStorage.setItem('itab_widgets', JSON.stringify(this.widgets));
+      }
+    },
     updateWidgetSize(widgetId: string, newSize: WidgetSize) {
       const widget = this.widgets.find(w => w.id === widgetId);
       if (widget) {
@@ -86,3 +115,7 @@ export const useWidgetsStore = defineStore('widgets', {
     }
   }
 });
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useWidgetsStore, import.meta.hot));
+}
diff --git a/app/src/styles/global.scss b/app/src/styles/global.scss
index f17d364..6340673 100644
--- a/app/src/styles/global.scss
+++ b/app/src/styles/global.scss
@@ -27,7 +27,7 @@ body {
   width: 100%;
   height: 100%;
   background-color: $color-background;
-  background-image: url('/bg.png');
+  background-image: var(--desktop-bg-overlay, none), var(--desktop-bg-image, url('/bg.png'));
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
diff --git a/wechat_2026-01-27_113656_942.png b/wechat_2026-01-27_113656_942.png
new file mode 100644
index 0000000..2b9063d
Binary files /dev/null and b/wechat_2026-01-27_113656_942.png differ