From 352f104eb6c6bbfc68fc2a33d5790a12ddc38a3e Mon Sep 17 00:00:00 2001
From: "DESKTOP-HR0JS52\\jun" <qqxion@163.com>
Date: Tue, 4 Oct 2022 14:43:02 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AA=97=E5=8F=A3=E5=88=B7=E6=96=B0=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WindowBox/Content/index.module.scss       | 12 +++++++++
 .../Window/WindowBox/Content/index.tsx        | 25 +++++++++++++++++++
 .../Desktop/Window/WindowBox/Header/index.tsx | 16 ++++++++++--
 .../Window/WindowBox/index.module.scss        |  5 ----
 src/pages/Desktop/Window/WindowBox/index.tsx  |  7 ++++--
 src/pages/Desktop/Window/index.tsx            |  2 +-
 6 files changed, 57 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/Desktop/Window/WindowBox/Content/index.module.scss
 create mode 100644 src/pages/Desktop/Window/WindowBox/Content/index.tsx

diff --git a/src/pages/Desktop/Window/WindowBox/Content/index.module.scss b/src/pages/Desktop/Window/WindowBox/Content/index.module.scss
new file mode 100644
index 0000000..f48db13
--- /dev/null
+++ b/src/pages/Desktop/Window/WindowBox/Content/index.module.scss
@@ -0,0 +1,12 @@
+.content {
+  width: 100%;
+  height: calc( 100% - #{$window-header-height} );
+}
+
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/pages/Desktop/Window/WindowBox/Content/index.tsx b/src/pages/Desktop/Window/WindowBox/Content/index.tsx
new file mode 100644
index 0000000..7b30cd4
--- /dev/null
+++ b/src/pages/Desktop/Window/WindowBox/Content/index.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { Spin } from 'antd'
+import { Loading3QuartersOutlined } from '@ant-design/icons'
+
+interface Props {
+  loading: boolean
+  children: React.ReactNode
+}
+
+const Content: React.FC<Props> = ({ loading, children }) => {
+  return (
+    <div className={styles.content}>
+      {loading ? (
+        <div className={styles.loading}>
+          <Spin size="large" spinning={loading} />
+        </div>
+      ) : (
+        children
+      )}
+    </div>
+  )
+}
+
+export default Content
diff --git a/src/pages/Desktop/Window/WindowBox/Header/index.tsx b/src/pages/Desktop/Window/WindowBox/Header/index.tsx
index 75cb53f..26b900e 100644
--- a/src/pages/Desktop/Window/WindowBox/Header/index.tsx
+++ b/src/pages/Desktop/Window/WindowBox/Header/index.tsx
@@ -3,7 +3,8 @@ import {
   MinusOutlined,
   CloseOutlined,
   BorderOutlined,
-  BlockOutlined
+  BlockOutlined,
+  ReloadOutlined
 } from '@ant-design/icons'
 import classnames from 'classnames'
 import styles from './index.module.scss'
@@ -15,6 +16,7 @@ import vars from '@/common/style/vars.scss'
 
 interface Props {
   windowRef: RefObject<HTMLDivElement>
+  setLoading: { (value: boolean): void }
 }
 
 interface Drag {
@@ -22,7 +24,7 @@ interface Drag {
   startY: number
 }
 
-const Header: React.FC<Props> = ({ windowRef }) => {
+const Header: React.FC<Props> = ({ windowRef, setLoading }) => {
   const { window: windowObj, id: windowId } = React.useContext(WindowContext)
   const editWindowStatus = useStore((state: MyState) => state.setWindowStatus)
   const closeWindow = useStore((state: MyState) => state.closeWindow)
@@ -95,6 +97,16 @@ const Header: React.FC<Props> = ({ windowRef }) => {
         {windowObj.title}
       </div>
       <div className={styles.tools}>
+        <div
+          className={styles.tool}
+          onClick={() => {
+            setLoading(true)
+            window.setTimeout(() => {
+              setLoading(false)
+            }, 200)
+          }}>
+          <ReloadOutlined />
+        </div>
         <div
           className={styles.tool}
           onClick={() => editWindowStatus(WINDOW_STATUS.MIN, windowId)}>
diff --git a/src/pages/Desktop/Window/WindowBox/index.module.scss b/src/pages/Desktop/Window/WindowBox/index.module.scss
index 7983fa1..bc65823 100644
--- a/src/pages/Desktop/Window/WindowBox/index.module.scss
+++ b/src/pages/Desktop/Window/WindowBox/index.module.scss
@@ -14,11 +14,6 @@ $shift: -6px;
   height: 100%;
 }
 
-.content {
-  width: 100%;
-  height: calc(100% - #{$window-header-height});
-}
-
 .dragRight {
   position: absolute;
   top: 32px;
diff --git a/src/pages/Desktop/Window/WindowBox/index.tsx b/src/pages/Desktop/Window/WindowBox/index.tsx
index 776355d..6b7ed75 100644
--- a/src/pages/Desktop/Window/WindowBox/index.tsx
+++ b/src/pages/Desktop/Window/WindowBox/index.tsx
@@ -6,6 +6,7 @@ import { WINDOW_STATUS, WINDOW_DRAG, WINDOW_MIN } from '@/common/constants'
 import vars from '@/common/style/vars.scss'
 import useMethods from '@utils/useMethods'
 import useStore, { MyState } from '@/store'
+import Content from '@/pages/Desktop/Window/WindowBox/Content'
 
 interface Props {
   children: React.ReactNode
@@ -21,6 +22,7 @@ const WindowBox: React.FC<Props> = props => {
   const { window: windowObj } = React.useContext(WindowContext)
   const editWindow = useStore((state: MyState) => state.editWindow)
   const windowRef = React.useRef<HTMLDivElement>(null)
+  const [loading, setLoading] = React.useState<boolean>(false)
   const [drag, setDrag] = React.useState<Drag>({
     startX: 0,
     startY: 0,
@@ -131,8 +133,9 @@ const WindowBox: React.FC<Props> = props => {
   return (
     <div className={styles.windowBox} ref={windowRef} style={windowStyle}>
       <div className={styles.main} style={{ zIndex: windowStyle.zIndex + 1 }}>
-        <Header windowRef={windowRef} />
-        <div className={styles.content}>{props.children}</div>
+        <Header setLoading={setLoading} windowRef={windowRef} />
+        {/* eslint-disable-next-line react/no-children-prop */}
+        <Content loading={loading} children={props.children} />
         {windowObj.status === WINDOW_STATUS.NORMAL && (
           <>
             <div
diff --git a/src/pages/Desktop/Window/index.tsx b/src/pages/Desktop/Window/index.tsx
index ca98239..f06fa56 100644
--- a/src/pages/Desktop/Window/index.tsx
+++ b/src/pages/Desktop/Window/index.tsx
@@ -13,7 +13,7 @@ const Window: React.FC = () => {
   const { window } = React.useContext(WindowContext)
   return (
     <WindowBox>
-      <div></div>
+      <div>asd</div>
     </WindowBox>
   )
 }
-- 
Gitee