675704e4da
This commit introduces the ability to delete items. A new `ItemDeleteModal` component provides a confirmation step before removal. - Adds a 'Delete' option to the action menu in the items table. - Refactors the `useItems` composable to ensure reactivity with `useLocalStorage` by creating new array references on add/remove operations. - Renames `AddModal` to `EditModal` to better align with its future role in both adding and editing items.
65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import { useLocalStorage, createSharedComposable } from "@vueuse/core";
|
||
|
||
export type Item = {
|
||
id: number;
|
||
name: string;
|
||
imageUrl?: string | null;
|
||
description?: string | null;
|
||
tags?: string[] | null;
|
||
createdAt: Date;
|
||
updatedAt: Date;
|
||
};
|
||
|
||
const _useItems = () => {
|
||
const stored = useLocalStorage<Item[]>("item-database", [], {
|
||
serializer: {
|
||
read: (v) => {
|
||
if (!v) return [];
|
||
const parsed = JSON.parse(v);
|
||
return parsed.map((item: any) => ({
|
||
...item,
|
||
createdAt: new Date(item.createdAt),
|
||
updatedAt: new Date(item.updatedAt),
|
||
}));
|
||
},
|
||
write: (v) => JSON.stringify(v),
|
||
},
|
||
});
|
||
|
||
// 直接使用 stored（Ref<Item[]>）。模板会自动解包，其他逻辑也简单。
|
||
const items = stored; // Ref<Item[]>
|
||
|
||
// 统计项使用 items.value
|
||
const stats = {
|
||
totalItems: computed(() => (items.value ?? []).length),
|
||
addedThisMonth: computed(() => {
|
||
const now = new Date();
|
||
const thisMonth = now.getMonth();
|
||
const thisYear = now.getFullYear();
|
||
return (items.value ?? []).filter(
|
||
(item) =>
|
||
item.createdAt.getMonth() === thisMonth &&
|
||
item.createdAt.getFullYear() === thisYear
|
||
).length;
|
||
}),
|
||
latestId: computed(
|
||
() => (items.value?.[items.value.length - 1]?.id ?? 0) + 1
|
||
),
|
||
};
|
||
|
||
const isNameAvailable = (name: string) =>
|
||
!(items.value ?? []).some((item) => item.name === name);
|
||
|
||
const addItem = (item: Item) => {
|
||
items.value = [...(items.value ?? []), item]; // <-- 替换数组引用
|
||
};
|
||
|
||
const removeItem = (id: number) => {
|
||
items.value = (items.value ?? []).filter((i) => i.id !== id); // <-- 替换数组引用
|
||
};
|
||
|
||
return { items, stats, isNameAvailable, addItem, removeItem };
|
||
};
|
||
|
||
export const useItemsStore = createSharedComposable(_useItems);
|