From e8eb50b8467ae8ae55386af6b0bb36adfac3a05f Mon Sep 17 00:00:00 2001
From: mackt <1033530438@qq.com>
Date: Sat, 11 May 2024 17:09:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(component):=20=E5=85=A8=E5=B1=80=20Dialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                               |  1 +
 src/app/layout.tsx                      |  5 ++--
 src/components/common/Dialog.tsx        | 31 +++++++++++++++++++++
 src/components/common/dialogContext.tsx | 37 +++++++++++++++++++++++++
 src/components/index.ts                 |  1 +
 src/utils/request/client/utils.ts       |  1 +
 6 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 src/components/common/Dialog.tsx
 create mode 100644 src/components/common/dialogContext.tsx
diff --git a/README.md b/README.md
index 99b880a..cd411e0 100644
--- a/README.md
+++ b/README.md
@@ -43,6 +43,7 @@ http://localhost:3001
 - [ ] token 失效 modal
 - [ ] 二维码美化
 - [ ] 扫码登录
+- [ ] 初次进入bug
 
 ## 了解更多
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fd6b8e1..b1faabe 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,7 +3,7 @@ import Script from 'next/script';
 
 import { Toaster } from '@/components/ui/toaster';
 
-import { Header, App, Footer, PlayerBar, ScrollTopButton } from '@/components';
+import { Header, Footer, PlayerBar, ScrollTopButton, Dialog } from '@/components';
 
 import './globals.css';
 
@@ -32,13 +32,14 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
   return (
     <html lang="zn-ch" className="relative">
       <body>
-        <App />
+        {/* <App /> */}
         <Header className="absolute top-0" />
         <div>{children}</div>
         <Footer />
         <PlayerBar />
         <ScrollTopButton className="fixed right-[50%] transform-translate-x-[600px] bottom-[160px] right-[124px]" />
         <Toaster />
+        <Dialog />
       </body>
 
       <Script src="https://hm.baidu.com/hm.js?89d54ff4e336c923a74ee045cc600c6a" async />
diff --git a/src/components/common/Dialog.tsx b/src/components/common/Dialog.tsx
new file mode 100644
index 0000000..9093c9a
--- /dev/null
+++ b/src/components/common/Dialog.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { useContext } from 'react';
+
+import { Dialog, DialogContent, DialogClose } from '@/components/ui/dialog';
+
+import { DialogContext } from './dialogContext';
+
+export default function CommonDialog() {
+  const { state } = useContext(DialogContext);
+
+  return (
+    <Dialog open={state.show}>
+      <DialogContent className="block !w-284px !h-140px !rounded-12px py-24px px-18px">
+        <div className="w-248px mx-auto text-[rgba(0,0,0,0.95)] text-center text-14px leading-24px font-500">
+          确定删除评论？
+        </div>
+        <div className="flex justify-between w-248px mt-24px">
+          <DialogClose asChild>
+            <button
+              className="w-118px h-44px rounded-999px text-center text-[rgba(0,0,0,0.7)] text-14px leading-44px bg-[rgba(0,0,0,0.05)]"
+              onClick={state.onClick}
+            >
+              {state.content}
+            </button>
+          </DialogClose>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/common/dialogContext.tsx b/src/components/common/dialogContext.tsx
new file mode 100644
index 0000000..e8489ed
--- /dev/null
+++ b/src/components/common/dialogContext.tsx
@@ -0,0 +1,37 @@
+import React, { ReactElement, createContext, useReducer } from 'react';
+
+interface IState {
+  show: boolean;
+  content: string;
+  onClick?: (...arg: any) => any;
+}
+type Action = { type: 'SHOW_DIALOG'; payload: boolean };
+
+const initialState: IState = { show: false, content: '', onClick: () => {} };
+
+function reducer(state: IState, action: Action): IState {
+  switch (action.type) {
+    case 'SHOW_DIALOG':
+      return { ...state, show: action.payload };
+    default:
+      return state;
+  }
+}
+
+export const DialogContext = createContext<{
+  state: IState;
+  dispatch: React.Dispatch<Action>;
+}>({ state: initialState, dispatch: () => null });
+
+let globalDispatch: React.Dispatch<Action> | null = null;
+
+export function openLogin() {
+  globalDispatch?.({ type: 'SHOW_DIALOG', payload: true });
+}
+
+export const DialogProvider: React.FC<{ children: ReactElement }> = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  globalDispatch = dispatch;
+
+  return <DialogContext.Provider value={{ state, dispatch }}>{children}</DialogContext.Provider>;
+};
diff --git a/src/components/index.ts b/src/components/index.ts
index 66fab27..a7042a7 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -65,3 +65,4 @@ export { default as InfiniteScroller } from './common/InfiniteScroller';
 export { default as Pagination } from './Pagination/Pagination';
 export { default as Search } from './Search/Search';
 export { default as HighlightText } from './common/HighlightText';
+export { default as Dialog } from './common/Dialog';
diff --git a/src/utils/request/client/utils.ts b/src/utils/request/client/utils.ts
index 26a91d5..ea689de 100644
--- a/src/utils/request/client/utils.ts
+++ b/src/utils/request/client/utils.ts
@@ -68,6 +68,7 @@ export const checkResponseState = async (response: FetchResponse<any>) => {
   if ([400, 401, 10000].includes(code)) {
     // 判断是否有 token
     if (checkAuthOffline()) {
+      // 身份校验失败，请 xxx
       logout();
       window.location.reload();
     } else {
