feat(component): 全局 Dialog

7 months ago · e8eb50b846
parent 6193737e07
commit e8eb50b846
6 changed files with 74 additions and 2 deletions
--- a/README.md
+++ b/README.md
@ -43,6 +43,7 @@ http://localhost:3001
 - [ ] token 失效 modal
 - [ ] 二维码美化
 - [ ] 扫码登录
+- [ ] 初次进入bug

 ## 了解更多

--- 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 />
--- a/src/components/common/Dialog.tsx
+++ 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>
+  );
+}
--- a/src/components/common/dialogContext.tsx
+++ 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>;
+};
--- 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';
--- 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 {