1

2026-01-23 15:23:04 +08:00
commit 5674ce116e
34 changed files with 3901 additions and 0 deletions
--- a/app/src/store/useLayoutStore.ts
+++ b/app/src/store/useLayoutStore.ts
@ -0,0 +1,103 @@
+import { defineStore } from 'pinia';
+
+// 模拟数据（来自截图参考）
+interface Icon {
+  id: string;
+  name: string;
+  url: string;
+  img?: string; // 可选：用于图片图标（如徽标）
+  bgColor?: string; // 可选：纯色背景
+}
+
+interface DragState {
+  isDragging: boolean;
+  itemId: string | null;
+  itemType: 'icon' | 'widget' | null;
+  startX: number;
+  startY: number;
+  currentX: number;
+  currentY: number;
+}
+
+interface LayoutState {
+  icons: Icon[];
+  dragState: DragState;
+}
+
+const defaultIcons: Icon[] = [
+  { id: '1', name: '淘宝', url: 'https://taobao.com', bgColor: '#ff4f00' },
+  { id: '2', name: '京东商城', url: 'https://jd.com', bgColor: '#e4393c' },
+  { id: '3', name: '百度', url: 'https://baidu.com', bgColor: '#3388ff' },
+  { id: '4', name: '备忘录', url: '#', bgColor: '#f9ca24' },
+  { id: '5', name: '爱奇艺', url: 'https://iqiyi.com', bgColor: '#00be06' },
+  { id: '6', name: '文件夹', url: '#', bgColor: '#4285f4' },
+  { id: '7', name: '抖音', url: 'https://douyin.com', bgColor: '#222' },
+  { id: '8', name: '小浣熊', url: '#', bgColor: '#f0932b' },
+  { id: '9', name: 'AiPPT', url: '#', bgColor: '#d63031' },
+  { id: '10', name: '电影日历', url: '#', bgColor: 'transparent', img: 'https://example.com/movie_poster.png' }, // 图片示例
+  { id: '11', name: '稿定设计', url: '#', bgColor: '#00aaff' },
+  { id: '12', name: '壁纸', url: '#', bgColor: '#1dd1a1' },
+  { id: '13', 'name': '即梦AI', url: '#', bgColor: '#6c5ce7' },
+  { id: '14', name: '码上掘金', url: '#', bgColor: '#1e80ff' },
+  { id: '15', name: '扩展管理', url: '#', bgColor: '#7f8c8d' },
+  { id: '16', name: '书签管理', url: '#', bgColor: '#f1c40f' },
+];
+
+const savedIcons = localStorage.getItem('itab_icons');
+
+export const useLayoutStore = defineStore('layout', {
+  state: (): LayoutState => ({
+    icons: savedIcons ? JSON.parse(savedIcons) : defaultIcons,
+    dragState: {
+      isDragging: false,
+      itemId: null,
+      itemType: null,
+      startX: 0,
+      startY: 0,
+      currentX: 0,
+      currentY: 0,
+    }
+  }),
+  actions: {
+    reorderIcons(draggedId: string, targetId: string) {
+      const draggedIndex = this.icons.findIndex(p => p.id === draggedId);
+      const targetIndex = this.icons.findIndex(p => p.id === targetId);
+
+      if (draggedIndex !== -1 && targetIndex !== -1) {
+        // 直接交换
+        const draggedItem = this.icons[draggedIndex];
+        this.icons[draggedIndex] = this.icons[targetIndex];
+        this.icons[targetIndex] = draggedItem;
+
+        // 持久化顺序
+        localStorage.setItem('itab_icons', JSON.stringify(this.icons));
+      }
+    },
+    setIconOrder(orderIds: string[]) {
+      const ordered: Icon[] = [];
+      const seen = new Set<string>();
+      for (const id of orderIds) {
+        const icon = this.icons.find(item => item.id === id);
+        if (icon) {
+          ordered.push(icon);
+          seen.add(icon.id);
+        }
+      }
+      for (const icon of this.icons) {
+        if (!seen.has(icon.id)) {
+          ordered.push(icon);
+        }
+      }
+      this.icons = ordered;
+      localStorage.setItem('itab_icons', JSON.stringify(this.icons));
+    },
+    deleteIcon(itemId: string) {
+      const index = this.icons.findIndex(p => p.id === itemId);
+      if (index !== -1) {
+        this.icons.splice(index, 1);
+        // 持久化顺序
+        localStorage.setItem('itab_icons', JSON.stringify(this.icons));
+      }
+    },
+  }
+});