Feat: Add Settings Modal

src/composables/use-photo-columns.ts

@@ -0,0 +1,38 @@
+import { computed, type Ref } from "vue";
+
+interface MediaItem {
+  id: number;
+  title: string;
+  content: string;
+  url: string;
+  thumb_url: string;
+  meta: string;
+  take_time: string;
+  width?: number;
+  height?: number;
+}
+
+/**
+ * 计算宫格图片对象的 hooks
+ * @param photos 照片数组
+ * @param gridCount 宫格数量，可以是数字或 Ref<number>，默认为 4
+ * @returns 返回一个 computed，包含按宫格数分配的图片数组
+ */
+export function usePhotoColumns(
+  photos: Ref<MediaItem[]>,
+  gridCount: number | Ref<number> = 4
+) {
+  const columns = computed<MediaItem[][]>(() => {
+    const count = typeof gridCount === 'number' ? gridCount : gridCount.value;
+    const result: MediaItem[][] = Array.from({ length: count }, () => []);
+
+    photos.value.forEach((photo, index) => {
+      const columnIndex = index % count;
+      result[columnIndex].push(photo);
+    });
+
+    return result;
+  });
+
+  return columns;
+}