feat: initialize aivideo project

frontend-web/src/app/(dashboard)/workspace/assets/page.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+import { api } from "@/lib/api";
+import type { AssetItem } from "@/lib/types";
+
+export default function AssetsPage() {
+  const [mediaType, setMediaType] = useState("image");
+  const assetsQuery = useQuery({
+    queryKey: ["asset-list"],
+    queryFn: () => api.get<AssetItem[]>("/api/v1/assets"),
+  });
+
+  const uploadMutation = useMutation({
+    mutationFn: async (file: File) => {
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("mediaType", mediaType);
+      return api.post("/api/v1/assets", formData);
+    },
+    onSuccess: () => assetsQuery.refetch(),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (assetId: number) => api.del(`/api/v1/assets/${assetId}`),
+    onSuccess: () => assetsQuery.refetch(),
+  });
+
+  return (
+    <div className="two-col-grid">
+      <section className="panel">
+        <h3>上传素材</h3>
+        <div className="form-stack">
+          <label className="field-label">
+            素材类型
+            <select value={mediaType} onChange={(event) => setMediaType(event.target.value)}>
+              <option value="image">图片</option>
+              <option value="video">视频</option>
+              <option value="audio">音频</option>
+            </select>
+          </label>
+          <label className="field-label">
+            文件
+            <input
+              type="file"
+              onChange={(event) => {
+                const file = event.target.files?.[0];
+                if (file) {
+                  uploadMutation.mutate(file);
+                }
+              }}
+            />
+          </label>
+        </div>
+      </section>
+
+      <section className="panel">
+        <h3>已上传素材</h3>
+        <div className="list-grid">
+          {assetsQuery.data?.map((asset) => (
+            <div className="list-item" key={asset.id}>
+              <strong>{asset.originalFilename}</strong>
+              <div className="muted">
+                {asset.mediaType} · {Math.round(asset.fileSize / 1024)} KB
+              </div>
+              <div className="row" style={{ marginTop: 12 }}>
+                <a className="ghost-button" href={asset.publicUrl} target="_blank">
+                  查看文件
+                </a>
+                <button
+                  className="danger-button"
+                  onClick={() => deleteMutation.mutate(asset.id)}
+                >
+                  删除
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+