feat(component): 全局 Dialog

4 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 {