feat: support render page when initialized

family-flix · Apr 28, 2023 · 29f63c8 · 29f63c8
commit 29f63c8
Show file tree

Hide file tree

Showing 127 changed files with 17,309 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="referrer" content="no-referrer" />
+  <meta name="theme-color" content="#000000" />
+  <title>Solid App</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+
+  <script src="/src/index.tsx" type="module"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "pc1",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/node": "^18.15.11",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.3.1",
+    "typescript": "^4.9.5",
+    "vite": "^4.2.0",
+    "vite-plugin-solid": "^2.7.0",
+    "vitest": "^0.30.1"
+  },
+  "dependencies": {
+    "axios": "^1.3.5",
+    "class-variance-authority": "^0.5.2",
+    "clsx": "^1.2.1",
+    "dayjs": "^1.11.7",
+    "hls.js": "^1.4.0",
+    "lodash": "^4.17.21",
+    "mitt": "^3.0.0",
+    "nzh": "^1.0.8",
+    "path-to-regexp": "^6.2.1",
+    "qs": "^6.11.1",
+    "solid-js": "^1.7.3",
+    "tailwind-merge": "^1.12.0",
+    "tailwindcss-animate": "^1.0.5",
+    "tapable": "^2.2.1"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/components/CopyIcon/index.tsx b/src/components/CopyIcon/index.tsx
@@ -0,0 +1,35 @@
+// import { useRef, useState } from "react";
+// import { Check, Copy } from "lucide-react";
+
+import { noop } from "@/utils";
+import { createSignal } from "solid-js";
+
+const CopyAndCheckIcon = (props: { on_click: () => void }) => {
+  const { on_click = noop } = props;
+
+  const [check_visible, set_check_visible] = createSignal(false);
+  // const timer_ref = useRef<NodeJS.Timeout | null>(null);
+
+  return (
+    <div
+      onClick={() => {
+        if (check_visible) {
+          return;
+        }
+        // if (timer_ref.current) {
+        //   return;
+        // }
+        on_click();
+        set_check_visible(true);
+        // timer_ref.current = setTimeout(() => {
+        //   set_check_visible(false);
+        //   clearTimeout(timer_ref.current!);
+        // }, 1000);
+      }}
+    >
+      {check_visible ? <div>✅</div> : <div>❎</div>}
+    </div>
+  );
+};
+
+export default CopyAndCheckIcon;
diff --git a/src/components/DriveCard/index.tsx b/src/components/DriveCard/index.tsx
@@ -0,0 +1,185 @@
+/**
+ * @file 云盘卡片，包含对云盘的业务逻辑
+ */
+import { onMount } from "solid-js";
+// import { useEffect, useRef } from "react";
+// import { RefreshCw } from "lucide-react";
+// import { useRouter } from "next/router";
+
+import { Drive } from "@/domains/drive";
+import {
+  AliyunDriveItem,
+  set_drive_root_file_id,
+} from "@/domains/drive/services";
+// import { useToast } from "@/hooks/use-toast";
+import LazyImage from "@/components/LazyImage";
+import { Button } from "@/components/ui/button";
+// import Modal from "@/components/Modal";
+import { Input } from "@/components/ui/input";
+import FolderMenu from "@/components/FolderMenu";
+import { ContextMenuCore } from "@/domains/ui/context-menu";
+import { MoreHorizontalIcon } from "@/components/icons/more-horizontal";
+import { LoaderIcon } from "@/components/icons/loader";
+
+const DriveCard = (props: AliyunDriveItem) => {
+  const { id, user_name, avatar, total_size, used_size } = props;
+  // const { toast } = useToast();
+
+  // const drive_ref = useRef(new Drive({ id }));
+  const drive = new Drive({ id });
+  const contextMenu = new ContextMenuCore([
+    {
+      label: "详情",
+      on_click: () => {
+        // router.push(`/admin/drive/${id}`);
+      },
+    },
+    {
+      label: "导出",
+      on_click() {
+        drive.export();
+      },
+    },
+    {
+      label: "刷新",
+      on_click() {
+        drive.refresh();
+      },
+    },
+    {
+      label: "修改 refresh_token",
+      on_click() {
+        // drive.update_refresh_token(),
+      },
+    },
+    {
+      label: "查看重复影片",
+      on_click() {
+        // router.push(`/admin/drive/duplicate/${id}`);
+      },
+    },
+  ]);
+
+  console.log("");
+
+  onMount(() => {
+    drive.onError((error) => {
+      // toast({
+      //   title: error.message,
+      // });
+    });
+    drive.onTip((msg) => {
+      // toast({
+      //   title: msg,
+      // });
+    });
+    drive.onCompleted((data) => {
+      // toast({
+      //   title: "刮削完成",
+      //   description: `${data.desc} 完成`,
+      // });
+    });
+  });
+
+  return (
+    <div class="relative p-4 bg-white rounded-xl">
+      <div
+        onContextMenu={(event) => {
+          const { x, y } = event;
+          contextMenu.show({ x, y });
+        }}
+      >
+        <div class="">
+          <div class="absolute top-2 right-2">
+            <MoreHorizontalIcon class="w-6 h-6 text-gray-600" />
+          </div>
+          <div class="flex">
+            <LazyImage
+              className="overflow-hidden w-16 h-16 mr-4 rounded"
+              src={avatar}
+              alt={user_name}
+            />
+            <div>
+              <div class="text-xl">{user_name}</div>
+              <div class="flex items-center space-x-2">
+                <p>
+                  {used_size}/{total_size}
+                </p>
+                <div
+                  class="cursor-pointer"
+                  onClick={async (event) => {
+                    event.stopPropagation();
+                    drive.refresh();
+                  }}
+                >
+                  {/* <RefreshCw class="mr-2 h-4 w-4 opacity-70" /> */}
+                </div>
+              </div>
+              <div class="mt-4 space-x-2">
+                <Button
+                  variant="subtle"
+                  size="sm"
+                  onClick={async (event) => {
+                    event.stopPropagation();
+                    drive.startScrape();
+                  }}
+                >
+                  <LoaderIcon class="w-4 h-4" />
+                  刮削
+                </Button>
+                {/* <Modal
+                  title="设置索引文件夹"
+                  trigger={
+                    <Button
+                      variant="subtle"
+                      size="sm"
+                      onClick={async (event) => {
+                        event.stopPropagation();
+                      }}
+                    >
+                      设置索引文件夹
+                    </Button>
+                  }
+                  on_ok={() => {
+                    return drive.submit_root_folder();
+                  }}
+                >
+                  <Input
+                    onChange={(event) => {
+                      drive.set_root_folder_id(event.target.value);
+                    }}
+                  />
+                </Modal> */}
+                {/* <Modal
+                  title="修改 refresh_token"
+                  trigger={
+                    <Button
+                      variant="subtle"
+                      size="sm"
+                      onClick={async (event) => {
+                        event.stopPropagation();
+                      }}
+                    >
+                      修改token
+                    </Button>
+                  }
+                  on_ok={() => {
+                    return drive.submit_refresh_token();
+                  }}
+                >
+                  <Input
+                    onChange={(event) => {
+                      drive.set_refresh_token(event.target.value);
+                    }}
+                  />
+                </Modal> */}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DriveCard;
diff --git a/src/components/DriveDropdown/index.tsx b/src/components/DriveDropdown/index.tsx
@@ -0,0 +1,34 @@
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+const DriveDropdown = (props: { children: React.ReactNode }) => {
+  const { children } = props;
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuItem>
+          <span>138221356</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <span>something</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default DriveDropdown;