feat: @vercel/kv

.gitignore

@@ -54,3 +54,4 @@ public/worker-*.js
 .vercel/
 cache/
 .wrangler/
+.vercel

package.json

@@ -80,6 +80,7 @@
     "@trpc/react-query": "10.43.0",
     "@trpc/server": "10.43.0",
     "@vercel/analytics": "^1.1.1",
+    "@vercel/kv": "^0.2.4",
     "@volar/monaco": "1.10.9",
     "@vue/language-service": "1.8.22",
     "canvas-confetti": "1.9.0",
@@ -184,7 +185,8 @@
     "rimraf": "5.0.5",
     "swagger-typescript-api": "13.0.3",
     "tailwindcss": "3.3.5",
-    "typescript": "5.2.2"
+    "typescript": "5.2.2",
+    "vercel": "32.5.0"
   },
   "bundledDependencies": [
     "katex",

src/components/MarkdownContainer/TOC/index.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { generateTOC } from '@/utils/toc';
+import { useQuery } from '@tanstack/react-query';
 import type { FC } from 'react';
 import React, { useRef } from 'react';
 import classNames from 'classnames';
@@ -15,12 +17,16 @@ export type TOCItem = {
 };
 
 export const MarkdownTOC: FC<{
-  toc: TOCItem[];
+  content: string;
   logs: PostLog[];
   id: number | string;
   app_folder?: boolean;
-}> = ({ toc, logs, id: postId, app_folder }) => {
+}> = ({ content, logs, id: postId, app_folder }) => {
   const hashRef = useRef('');
+  const { data: toc = [] } = useQuery({
+    queryKey: ['toc', content],
+    queryFn: () => generateTOC(content),
+  });
 
   return (
     <div className={classNames('hidden sm:block', styles.toc)}>
@@ -78,3 +84,5 @@ export const MarkdownTOC: FC<{
     </div>
   );
 };
+
+export default MarkdownTOC;

src/components/NavBar/User/index.tsx

@@ -1,8 +1,20 @@
-import { loginUrl } from '@/constant/Constant';
-import React, { useMemo } from 'react';
-import classNames from 'classnames';
 import { LazyImage } from '@/components/LazyImage';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { loginUrl } from '@/constant/Constant';
 import { useUser } from '@/hooks/useUser';
+import { clientApi } from '@/request/requestTool';
+import classNames from 'classnames';
+import { LogOut, User } from 'lucide-react';
+import React, { useMemo } from 'react';
 import styles from './index.module.scss';
 
 export const login = () => {
@@ -12,24 +24,49 @@ export const login = () => {
 };
 
 export const NavBarUser = () => {
-  const { isFetching, user } = useUser(true);
+  const { isFetching, user, refetch } = useUser(true);
 
   const Component = useMemo(() => {
     return user ? (
-      <div className={classNames(styles.user, 'pointer')}>
-        <span className={styles.nickname}>{user.nickname}</span>
-        <LazyImage
-          className="aspect-square"
-          src={user.avatar}
-          containerClassName={styles.avatar}
-          alt="avatar"
-        />
-      </div>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <div className={classNames(styles.user, 'pointer')}>
+            <span className={styles.nickname}>{user.nickname}</span>
+            <LazyImage
+              className="aspect-square"
+              src={user.avatar}
+              containerClassName={styles.avatar}
+              alt="avatar"
+            />
+          </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56">
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <User className="mr-2 h-4 w-4" />
+              <span>Profile</span>
+              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={async () => {
+                await clientApi.logout();
+                return refetch();
+              }}
+            >
+              <LogOut className="mr-2 h-4 w-4" />
+              <span>Logout</span>
+              <DropdownMenuShortcut>⇧⌘L</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
     ) : (
       <button type="button" className="pointer mr-4 block text-pink-400" onClick={login}>
         Login
       </button>
     );
-  }, [user]);
+  }, [refetch, user]);
   return isFetching && !user ? <span className="pr-4 text-pink-400">Loading...</span> : Component;
 };

src/components/Timeline/TimelineForm/index.tsx

@@ -13,6 +13,7 @@ import {
   removeFromFileList,
   sourceUrlToFile,
 } from '@/utils/copy';
+import { trpc } from '@/utils/trpc';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useImmer, useIsomorphicLayoutEffect } from '@powerfulyang/hooks';
 import { useMutation } from '@tanstack/react-query';
@@ -73,6 +74,8 @@ export const TimeLineForm = memo<Props>(({ onSubmitSuccess }) => {
     }
   }, [editItem, setValue]);
 
+  const cacheClean = trpc.cacheClean.useMutation();
+
   const mutation = useMutation({
     onMutate() {
       confetti();
@@ -85,14 +88,15 @@ export const TimeLineForm = memo<Props>(({ onSubmitSuccess }) => {
       const res_1 = await clientApi.createFeed(variables);
       return res_1.data;
     },
-    onSuccess(data) {
+    async onSuccess(data) {
       reset();
       if (editItem) {
         onSubmitSuccess('modify', data);
         setEditItem(undefined);
       } else {
         onSubmitSuccess('create', data);
       }
+      await cacheClean.mutateAsync();
     },
   });
 

src/pages/gallery/index.tsx

@@ -10,9 +10,10 @@ import Masonry from '@/components/Masonry';
 import { UserLayout } from '@/layout/UserLayout';
 import { clientApi, serverApi } from '@/request/requestTool';
 import type { LayoutFC } from '@/types/GlobalContext';
-import { extractRequestHeaders } from '@/utils/extractRequestHeaders';
+import { checkAuthInfo, extractRequestHeaders } from '@/utils/extractRequestHeaders';
 import { firstItem, lastItem } from '@powerfulyang/utils';
 import { useInfiniteQuery } from '@tanstack/react-query';
+import { kv } from '@vercel/kv';
 import { flatten } from 'lodash-es';
 import type { GetServerSideProps } from 'next';
 import React, { useCallback } from 'react';
@@ -103,17 +104,31 @@ export const Gallery: LayoutFC<GalleryProps> = ({ assets, nextCursor, prevCursor
 };
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const requestHeaders = extractRequestHeaders(ctx.req.headers);
+  const hasAuthInfo = checkAuthInfo(requestHeaders);
+
+  if (!hasAuthInfo) {
+    try {
+      const _ = await kv.get<any>('props:gallery:index');
+      if (_) {
+        return _;
+      }
+    } catch (e) {
+      // ignore
+    }
+  }
+
   const res = await serverApi.infiniteQueryPublicAsset(
     {
       take: 20,
     },
     {
-      headers: extractRequestHeaders(ctx.req.headers),
+      headers: requestHeaders,
     },
   );
   const pathViewCount = res.headers.get('x-path-view-count');
   const { data } = res;
-  return {
+  const props = {
     props: {
       assets: data.resources,
       nextCursor: data.nextCursor,
@@ -130,6 +145,14 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
       },
     },
   };
+  if (!hasAuthInfo) {
+    try {
+      await kv.set('props:gallery:index', props);
+    } catch {
+      // ignore
+    }
+  }
+  return props;
 };
 
 Gallery.getLayout = (page) => {