From 5c9172c512baac4d0616acc3cc0e70dd8a243f6d Mon Sep 17 00:00:00 2001
From: qiqixiong <1016160938@qq.com>
Date: Mon, 10 Oct 2022 16:34:58 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=9F=BA=E6=9C=ACui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/style/vars.scss                    |  2 +
 .../desktop/RightMouseMenu/index.module.scss  | 35 ++++++++++
 src/pages/desktop/RightMouseMenu/index.tsx    | 69 +++++++++++++++++++
 src/pages/desktop/index.tsx                   |  2 +
 4 files changed, 108 insertions(+)
 create mode 100644 src/pages/desktop/RightMouseMenu/index.module.scss
 create mode 100644 src/pages/desktop/RightMouseMenu/index.tsx

diff --git a/src/common/style/vars.scss b/src/common/style/vars.scss
index 31adbe9..d9650b2 100644
--- a/src/common/style/vars.scss
+++ b/src/common/style/vars.scss
@@ -3,6 +3,8 @@ $primary-color: red;
 $desk-background1: rgba(32, 32, 32, 0.75);
 $desk-background2: rgba(255, 255, 255, 0.1);
 
+$right-mouse-menu-background: rgba(32, 32, 32, 0.75);
+
 $hover-background1: rgba(255, 255, 255, 0.25);
 $hover-background2: rgba(255, 255, 255, 0.15);
 
diff --git a/src/pages/desktop/RightMouseMenu/index.module.scss b/src/pages/desktop/RightMouseMenu/index.module.scss
new file mode 100644
index 0000000..cd22441
--- /dev/null
+++ b/src/pages/desktop/RightMouseMenu/index.module.scss
@@ -0,0 +1,35 @@
+.rightMouseMenuBox {
+  position: absolute;
+  width: 220px;
+  height: auto;
+  border: 1px solid #555;
+  border-radius: 3px;
+  background: $right-mouse-menu-background;
+}
+
+.item {
+  display: flex;
+  padding: 4px 15px;
+  cursor: pointer;
+  user-select: none;
+  &:hover {
+    background: $hover-background2;
+  }
+}
+
+.name {
+  display: flex;
+  flex-grow: 1;
+}
+
+.bottom {
+  border-bottom: 1px solid #555;
+}
+
+.icon {
+  margin-right: 12px;
+}
+
+.keyboard {
+  color: #555;
+}
diff --git a/src/pages/desktop/RightMouseMenu/index.tsx b/src/pages/desktop/RightMouseMenu/index.tsx
new file mode 100644
index 0000000..d5a21b2
--- /dev/null
+++ b/src/pages/desktop/RightMouseMenu/index.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import {
+  RedoOutlined,
+  SortAscendingOutlined,
+  PictureOutlined,
+  UserOutlined,
+  FieldTimeOutlined,
+  SettingOutlined
+} from '@ant-design/icons'
+import styles from './index.module.scss'
+import classnames from 'classnames'
+
+const RightMouseMenu: React.FC = () => {
+  return (
+    <div className={styles.rightMouseMenuBox} style={{ top: 100, left: 300 }}>
+      <div className={styles.item}>
+        <div className={styles.name}>
+          <div className={styles.icon}>
+            <FieldTimeOutlined />
+          </div>
+          按日期排序
+        </div>
+      </div>
+      <div className={classnames(styles.item, styles.bottom)}>
+        <div className={styles.name}>
+          <div className={styles.icon}>
+            <SortAscendingOutlined />
+          </div>
+          按名称排序
+        </div>
+      </div>
+      <div className={classnames(styles.item, styles.bottom)}>
+        <div className={styles.name}>
+          <div className={styles.icon}>
+            <RedoOutlined />
+          </div>
+          刷新
+        </div>
+        <div className={styles.keyboard}>F5</div>
+      </div>
+      <div className={styles.item}>
+        <div className={styles.name}>
+          <div className={styles.icon}>
+            <SettingOutlined />
+          </div>
+          设置
+        </div>
+      </div>
+      <div className={styles.item}>
+        <div className={styles.name}>
+          <div className={styles.icon}>
+            <UserOutlined />
+          </div>
+          个人中心
+        </div>
+      </div>
+      <div className={styles.item}>
+        <div className={styles.name}>
+          <div className={styles.icon}>
+            <PictureOutlined />
+          </div>
+          自定义背景
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default RightMouseMenu
diff --git a/src/pages/desktop/index.tsx b/src/pages/desktop/index.tsx
index 91c1cfa..42b8f72 100644
--- a/src/pages/desktop/index.tsx
+++ b/src/pages/desktop/index.tsx
@@ -6,6 +6,7 @@ import styles from './index.module.scss'
 import StartMenu from './StartMenu'
 import Mask from './Mask'
 import Window from './Window'
+import RightMouseMenu from './RightMouseMenu'
 
 const Desktop: React.FC = () => {
   const showStartMenu = useStore((state: MyState) => state.showStartMenu)
@@ -19,6 +20,7 @@ const Desktop: React.FC = () => {
       <StartToolsBar />
       {showStartMenu && <StartMenu />}
       {showStartMenu && <Mask />}
+      <RightMouseMenu />
     </div>
   )
 }
-- 
Gitee


From d7c440c15c83c8b603da2c7cd27df5a29ed67722 Mon Sep 17 00:00:00 2001
From: "DESKTOP-HR0JS52\\jun" <qqxion@163.com>
Date: Wed, 12 Oct 2022 14:50:09 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/style/vars.scss                    |  6 ++-
 src/pages/desktop/Desk/index.tsx              |  8 ++++
 src/pages/desktop/Mask/index.tsx              | 20 ++++++++-
 .../desktop/RightMouseMenu/index.module.scss  |  9 ++--
 src/pages/desktop/RightMouseMenu/index.tsx    | 21 ++++++++-
 src/pages/desktop/StartMenu/index.tsx         |  7 ++-
 .../StartToolsBar/DateTime/index.module.scss  | 17 +++++++
 .../desktop/StartToolsBar/DateTime/index.tsx  | 19 ++++++--
 .../desktop/StartToolsBar/WindonBar/index.tsx |  7 ++-
 src/pages/desktop/StartToolsBar/index.tsx     | 10 ++++-
 src/pages/desktop/index.tsx                   |  2 +-
 src/store/deskSlice.ts                        | 45 +++++++++++++++++++
 12 files changed, 157 insertions(+), 14 deletions(-)

diff --git a/src/common/style/vars.scss b/src/common/style/vars.scss
index d9650b2..769c67b 100644
--- a/src/common/style/vars.scss
+++ b/src/common/style/vars.scss
@@ -4,6 +4,8 @@ $desk-background1: rgba(32, 32, 32, 0.75);
 $desk-background2: rgba(255, 255, 255, 0.1);
 
 $right-mouse-menu-background: rgba(32, 32, 32, 0.75);
+$right-mouse-menu-width: 220px;
+$right-mouse-menu-height: 184px;
 
 $hover-background1: rgba(255, 255, 255, 0.25);
 $hover-background2: rgba(255, 255, 255, 0.15);
@@ -24,5 +26,7 @@ $start-menu-height: 550px;
 $view-border-color: #555;
 
 :export {
-  startToolsBarHeight: $start-tools-bar-height
+  startToolsBarHeight: $start-tools-bar-height;
+  rightMouseMenuWidth: $right-mouse-menu-width;
+  rightMouseMenuHeight: $right-mouse-menu-height;
 }
diff --git a/src/pages/desktop/Desk/index.tsx b/src/pages/desktop/Desk/index.tsx
index d2b020c..62c7198 100644
--- a/src/pages/desktop/Desk/index.tsx
+++ b/src/pages/desktop/Desk/index.tsx
@@ -10,6 +10,9 @@ const Desk: React.FC = () => {
   const setStartMenuList = useStore((state: MyState) => state.setStartMenuList)
   const setUserInfo = useStore((state: MyState) => state.setUserInfo)
   const setRoleInfo = useStore((state: MyState) => state.setRoleInfo)
+  const openRightMouseMenu = useStore(
+    (state: MyState) => state.openRightMouseMenu
+  )
   React.useEffect(() => {
     getUserInfo(res => {
       const { data } = res
@@ -22,6 +25,11 @@ const Desk: React.FC = () => {
   return (
     <div
       className={styles.desk}
+      onContextMenu={event => {
+        event.stopPropagation()
+        event.preventDefault()
+        openRightMouseMenu(event)
+      }}
       style={{ backgroundImage: `url(${backgroundImg})` }}>
       <Apps />
     </div>
diff --git a/src/pages/desktop/Mask/index.tsx b/src/pages/desktop/Mask/index.tsx
index e9070ea..d0f929d 100644
--- a/src/pages/desktop/Mask/index.tsx
+++ b/src/pages/desktop/Mask/index.tsx
@@ -4,11 +4,29 @@ import useStore, { MyState } from '@/store'
 
 const Mask: React.FC = () => {
   const setShowStartMenu = useStore((state: MyState) => state.setShowStartMenu)
+  const rightMouseMenu = useStore((state: MyState) => state.rightMouseMenu)
+  const closeRightMouseMenu = useStore(
+    (state: MyState) => state.closeRightMouseMenu
+  )
+  const openRightMouseMenu = useStore(
+    (state: MyState) => state.openRightMouseMenu
+  )
+  const showStartMenu = useStore((state: MyState) => state.showStartMenu)
   return (
     <div
       className={styles.mask}
+      onContextMenu={event => {
+        event.stopPropagation()
+        event.preventDefault()
+        showStartMenu && setShowStartMenu(false)
+        openRightMouseMenu(event)
+      }}
+      style={{
+        display: showStartMenu || rightMouseMenu.show ? 'block' : 'none'
+      }}
       onClick={() => {
-        setShowStartMenu(false)
+        showStartMenu && setShowStartMenu(false)
+        rightMouseMenu.show && closeRightMouseMenu()
       }}
     />
   )
diff --git a/src/pages/desktop/RightMouseMenu/index.module.scss b/src/pages/desktop/RightMouseMenu/index.module.scss
index cd22441..3eeeaad 100644
--- a/src/pages/desktop/RightMouseMenu/index.module.scss
+++ b/src/pages/desktop/RightMouseMenu/index.module.scss
@@ -1,10 +1,12 @@
 .rightMouseMenuBox {
   position: absolute;
-  width: 220px;
-  height: auto;
+  z-index: 10002;
   border: 1px solid #555;
   border-radius: 3px;
+  width: $right-mouse-menu-width;
+  height: $right-mouse-menu-height;
   background: $right-mouse-menu-background;
+  backdrop-filter: saturate(3) blur(20px);
 }
 
 .item {
@@ -12,6 +14,7 @@
   padding: 4px 15px;
   cursor: pointer;
   user-select: none;
+
   &:hover {
     background: $hover-background2;
   }
@@ -31,5 +34,5 @@
 }
 
 .keyboard {
-  color: #555;
+  color: #666;
 }
diff --git a/src/pages/desktop/RightMouseMenu/index.tsx b/src/pages/desktop/RightMouseMenu/index.tsx
index d5a21b2..6b1c543 100644
--- a/src/pages/desktop/RightMouseMenu/index.tsx
+++ b/src/pages/desktop/RightMouseMenu/index.tsx
@@ -9,10 +9,23 @@ import {
 } from '@ant-design/icons'
 import styles from './index.module.scss'
 import classnames from 'classnames'
+import useStore, { MyState } from '@/store'
 
 const RightMouseMenu: React.FC = () => {
+  const rightMouseMenu = useStore((state: MyState) => state.rightMouseMenu)
+  const closeRightMouseMenu = useStore(
+    (state: MyState) => state.closeRightMouseMenu
+  )
   return (
-    <div className={styles.rightMouseMenuBox} style={{ top: 100, left: 300 }}>
+    <div
+      id={`right_menu_${rightMouseMenu.id}`}
+      className={styles.rightMouseMenuBox}
+      style={{
+        top: rightMouseMenu.top,
+        left: rightMouseMenu.left,
+        display: rightMouseMenu.show ? 'block' : 'none'
+      }}
+      onClick={() => closeRightMouseMenu()}>
       <div className={styles.item}>
         <div className={styles.name}>
           <div className={styles.icon}>
@@ -29,7 +42,11 @@ const RightMouseMenu: React.FC = () => {
           按名称排序
         </div>
       </div>
-      <div className={classnames(styles.item, styles.bottom)}>
+      <div
+        className={classnames(styles.item, styles.bottom)}
+        onClick={() => {
+          window.location.reload()
+        }}>
         <div className={styles.name}>
           <div className={styles.icon}>
             <RedoOutlined />
diff --git a/src/pages/desktop/StartMenu/index.tsx b/src/pages/desktop/StartMenu/index.tsx
index 8b9116e..4e09daf 100644
--- a/src/pages/desktop/StartMenu/index.tsx
+++ b/src/pages/desktop/StartMenu/index.tsx
@@ -5,7 +5,12 @@ import Application from './Application'
 
 const StartMenu: React.FC = () => {
   return (
-    <div className={styles.startMenuBox}>
+    <div
+      onContextMenu={event => {
+        event.stopPropagation()
+        event.preventDefault()
+      }}
+      className={styles.startMenuBox}>
       <Control />
       <Application />
     </div>
diff --git a/src/pages/desktop/StartToolsBar/DateTime/index.module.scss b/src/pages/desktop/StartToolsBar/DateTime/index.module.scss
index 6ca657b..b1dd2ce 100644
--- a/src/pages/desktop/StartToolsBar/DateTime/index.module.scss
+++ b/src/pages/desktop/StartToolsBar/DateTime/index.module.scss
@@ -5,3 +5,20 @@
   font-weight: lighter;
   user-select: none;
 }
+
+.timeBox {
+  display: flex;
+}
+
+.time {
+  font-size: 13px;
+}
+
+.week {
+  margin-left: 4px;
+  font-size: 12px;
+}
+
+.date {
+  font-size: 12px;
+}
diff --git a/src/pages/desktop/StartToolsBar/DateTime/index.tsx b/src/pages/desktop/StartToolsBar/DateTime/index.tsx
index 2fd42d9..c979c31 100644
--- a/src/pages/desktop/StartToolsBar/DateTime/index.tsx
+++ b/src/pages/desktop/StartToolsBar/DateTime/index.tsx
@@ -53,9 +53,22 @@ const DateTime: React.FC = () => {
     }
   })
   return (
-    <div className={styles.dateTimeBox}>
-      <div>{`${dataTime.hour}:${dataTime.minute} 周${dataTime.week}`}</div>
-      <div>{`${dataTime.year}/${dataTime.month}/${dataTime.day}`}</div>
+    <div
+      className={styles.dateTimeBox}
+      onContextMenu={event => {
+        event.stopPropagation()
+        event.preventDefault()
+      }}>
+      <div className={styles.timeBox}>
+        <div className={styles.time}>
+          {`${dataTime.hour}:${dataTime.minute}`}
+        </div>
+        <div className={styles.week}>{`周${dataTime.week}`}</div>
+      </div>
+      <div
+        className={
+          styles.date
+        }>{`${dataTime.year}/${dataTime.month}/${dataTime.day}`}</div>
     </div>
   )
 }
diff --git a/src/pages/desktop/StartToolsBar/WindonBar/index.tsx b/src/pages/desktop/StartToolsBar/WindonBar/index.tsx
index 52cd93e..fe3a268 100644
--- a/src/pages/desktop/StartToolsBar/WindonBar/index.tsx
+++ b/src/pages/desktop/StartToolsBar/WindonBar/index.tsx
@@ -13,7 +13,12 @@ const WindowBar: React.FC = () => {
   )
   const closeWindow = useStore((state: MyState) => state.closeWindow)
   return (
-    <div className={styles.windowBarBox}>
+    <div
+      className={styles.windowBarBox}
+      onContextMenu={event => {
+        event.stopPropagation()
+        event.preventDefault()
+      }}>
       {windowList.map(window => (
         <div
           key={window.id}
diff --git a/src/pages/desktop/StartToolsBar/index.tsx b/src/pages/desktop/StartToolsBar/index.tsx
index 71a1897..08da4b3 100644
--- a/src/pages/desktop/StartToolsBar/index.tsx
+++ b/src/pages/desktop/StartToolsBar/index.tsx
@@ -7,19 +7,27 @@ import DateTime from './DateTime'
 
 const StartToolsBar: React.FC = () => {
   const setShowStartMenu = useStore((state: MyState) => state.setShowStartMenu)
+  const closeRightMouseMenu = useStore(
+    (state: MyState) => state.closeRightMouseMenu
+  )
+  const rightMouseMenu = useStore((state: MyState) => state.rightMouseMenu)
   const toggleShowStartMenu = useStore(
     (state: MyState) => state.toggleShowStartMenu
   )
   return (
     <div
       className={styles.startToolsBar}
-      onClick={() => setShowStartMenu(false)}>
+      onClick={() => {
+        setShowStartMenu(false)
+        rightMouseMenu.show && closeRightMouseMenu()
+      }}>
       <div className={styles.startTools}>
         <div
           className={styles.startIcon}
           onClick={event => {
             event.stopPropagation()
             event.preventDefault()
+            rightMouseMenu.show && closeRightMouseMenu()
             toggleShowStartMenu()
           }}>
           <img className={styles.startIconImg} src={startImg} alt="startLogo" />
diff --git a/src/pages/desktop/index.tsx b/src/pages/desktop/index.tsx
index 42b8f72..8bdd2a0 100644
--- a/src/pages/desktop/index.tsx
+++ b/src/pages/desktop/index.tsx
@@ -19,7 +19,7 @@ const Desktop: React.FC = () => {
       ))}
       <StartToolsBar />
       {showStartMenu && <StartMenu />}
-      {showStartMenu && <Mask />}
+      <Mask />
       <RightMouseMenu />
     </div>
   )
diff --git a/src/store/deskSlice.ts b/src/store/deskSlice.ts
index 73fc883..b5d2cde 100644
--- a/src/store/deskSlice.ts
+++ b/src/store/deskSlice.ts
@@ -1,6 +1,9 @@
+import React from 'react'
 import { StoreApi } from 'zustand'
 import { MyState } from './index'
 import { Image } from '@/components/ImageComponent'
+import getId from '@utils/getId'
+import vars from '@/common/style/vars.scss'
 
 export interface App {
   id: number
@@ -15,9 +18,19 @@ export interface OpenWith {
   name?: string
 }
 
+export interface RightMouseMenu {
+  id: string
+  show: boolean
+  top?: number
+  left?: number
+}
+
 export interface DeskSlice {
   appList: App[]
   setAppList: (value: App[]) => void
+  rightMouseMenu: RightMouseMenu
+  openRightMouseMenu: (event: React.MouseEvent) => void
+  closeRightMouseMenu: () => void
 }
 
 const deskSlice = (
@@ -27,6 +40,38 @@ const deskSlice = (
   appList: [] as App[],
   setAppList: (value: App[]) => {
     set(() => ({ appList: value }))
+  },
+  rightMouseMenu: {
+    id: getId(),
+    show: false
+  },
+  openRightMouseMenu: (event: React.MouseEvent) => {
+    set(({ rightMouseMenu }) => {
+      const menu: RightMouseMenu = {
+        ...rightMouseMenu,
+        show: true,
+        top: event.clientY,
+        left: event.clientX
+      }
+      if (
+        document.body.clientWidth <
+        event.clientX + parseInt(vars.rightMouseMenuWidth)
+      ) {
+        menu.left = event.clientX - parseInt(vars.rightMouseMenuWidth)
+      }
+      if (
+        document.body.clientHeight - parseInt(vars.startToolsBarHeight) <
+        event.clientY + parseInt(vars.rightMouseMenuHeight)
+      ) {
+        menu.top = event.clientY - parseInt(vars.rightMouseMenuHeight)
+      }
+      return { rightMouseMenu: menu }
+    })
+  },
+  closeRightMouseMenu: () => {
+    set(({ rightMouseMenu }) => ({
+      rightMouseMenu: { ...rightMouseMenu, show: false }
+    }))
   }
 })
 
-- 
Gitee