this repo has no description
tweaks
+40
-28
+37
-28
src/app.tsx
+37
-28
src/app.tsx
···
1
-
import { useRef, useState } from "react";
2
-
import animeData from "../anime-data";
3
-
import { domToBlob } from "modern-screenshot";
4
-
import { toast } from "sonner";
5
-
import { usePersistState } from "./hooks";
1
+
import { useRef, useState } from "react"
2
+
import animeData from "../anime-data"
3
+
import { domToBlob } from "modern-screenshot"
4
+
import { toast } from "sonner"
5
+
import { usePersistState } from "./hooks"
6
6
7
7
export const App = () => {
8
8
const [selectedAnime, setSelectedAnime] = usePersistState<string[]>(
9
9
"selectedAnime",
10
10
[]
11
-
);
11
+
)
12
12
13
-
const wrapper = useRef<HTMLDivElement>(null);
13
+
const wrapper = useRef<HTMLDivElement>(null)
14
14
15
15
const copyImage = async () => {
16
-
if (!wrapper.current) return;
16
+
if (!wrapper.current) return
17
17
18
18
const blob = await domToBlob(wrapper.current, {
19
19
scale: 2,
20
20
filter(el) {
21
21
if (el instanceof HTMLElement && el.classList.contains("remove")) {
22
-
return false;
22
+
return false
23
23
}
24
-
return true;
24
+
return true
25
25
},
26
-
});
27
-
await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
28
-
};
26
+
})
27
+
28
+
await navigator.clipboard.write([
29
+
new ClipboardItem({
30
+
[blob.type]: blob,
31
+
}),
32
+
])
33
+
}
29
34
30
35
return (
31
36
<>
···
46
51
我看过 {selectedAnime.length}/
47
52
{
48
53
Object.values(animeData).flatMap((year) => {
49
-
return year.map((item) => item.title).slice(0, 12);
54
+
return year.map((item) => item.title).slice(0, 12)
50
55
}).length
51
56
}{" "}
52
57
部动画
53
58
</span>
54
59
</div>
55
60
{Object.keys(animeData).map((year) => {
56
-
const items = animeData[year] || [];
61
+
const items = animeData[year] || []
57
62
return (
58
63
<div key={year} className="flex border-b">
59
64
<div className="bg-red-500 shrink-0 text-white flex items-center font-bold justify-center p-1 size-16 md:size-20 border-black">
···
61
66
</div>
62
67
<div className="flex shrink-0">
63
68
{items.slice(0, 12).map((item) => {
64
-
const isSelected = selectedAnime.includes(item.title);
69
+
const isSelected = selectedAnime.includes(item.title)
65
70
return (
66
71
<button
67
72
key={item.title}
···
74
79
if (isSelected) {
75
80
return prev.filter(
76
81
(title) => title !== item.title
77
-
);
82
+
)
78
83
}
79
-
return [...prev, item.title];
80
-
});
84
+
return [...prev, item.title]
85
+
})
81
86
}}
82
87
>
83
88
<span className="leading-tight w-full line-clamp-3">
84
89
{item.title}
85
90
</span>
86
91
</button>
87
-
);
92
+
)
88
93
})}
89
94
</div>
90
95
</div>
91
-
);
96
+
)
92
97
})}
93
98
</div>
94
99
</div>
···
100
105
onClick={() => {
101
106
setSelectedAnime(
102
107
Object.values(animeData).flatMap((year) => {
103
-
return year.map((item) => item.title).slice(0, 12);
108
+
return year.map((item) => item.title).slice(0, 12)
104
109
})
105
-
);
110
+
)
106
111
}}
107
112
>
108
113
全选
···
113
118
type="button"
114
119
className="border rounded-md px-4 py-2 inline-flex"
115
120
onClick={() => {
116
-
setSelectedAnime([]);
121
+
setSelectedAnime([])
117
122
}}
118
123
>
119
124
清除
···
127
132
toast.promise(copyImage(), {
128
133
success: "复制成功",
129
134
loading: "复制中",
130
-
error: "复制失败",
131
-
});
135
+
error(error) {
136
+
return `复制失败: ${
137
+
error instanceof Error ? error.message : "未知错误"
138
+
}`
139
+
},
140
+
})
132
141
}}
133
142
>
134
143
复制图片
···
156
165
</div>
157
166
</div>
158
167
</>
159
-
);
160
-
};
168
+
)
169
+
}