diff --git a/src/common/style/vars.scss b/src/common/style/vars.scss
index 31adbe904dbc41ff076f74b0bf36b2c455664a38..769c67b8535a86f5034618363581d41097af810d 100644
--- a/src/common/style/vars.scss
+++ b/src/common/style/vars.scss
@@ -3,6 +3,10 @@ $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);
+$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);
 
@@ -22,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 d2b020c810be4d4ae78eda387f2f15d93fafd0f3..62c7198e6b4b998adaed198b3c2d0ddc0ae39b9a 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 e9070ea28c79c208f937518d57fce19ed8a393c3..d0f929d2f9b36bf103d524524a4e18346d4e21a4 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
new file mode 100644
index 0000000000000000000000000000000000000000..3eeeaada7111043957f444e8262586783fae99ba
--- /dev/null
+++ b/src/pages/desktop/RightMouseMenu/index.module.scss
@@ -0,0 +1,38 @@
+.rightMouseMenuBox {
+  position: absolute;
+  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 {
+  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: #666;
+}
diff --git a/src/pages/desktop/RightMouseMenu/index.tsx b/src/pages/desktop/RightMouseMenu/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6b1c5437b6b39999df6a9d83bd7438b501e1eb84
--- /dev/null
+++ b/src/pages/desktop/RightMouseMenu/index.tsx
@@ -0,0 +1,86 @@
+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'
+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
+      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}>
+            <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)}
+        onClick={() => {
+          window.location.reload()
+        }}>
+        <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/StartMenu/index.tsx b/src/pages/desktop/StartMenu/index.tsx
index 8b9116e922a2489fbef6ddc687b4eddce342c990..4e09daf76abec4dfca85beca8d3f30c6fb3e673e 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 6ca657b20d87141439f88f34175cb275c4f670d5..b1dd2cee2def96e6b4d3d0981093655572a1da07 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 2fd42d91da4e91dace1a05053bd41f98aa253026..c979c316dffa069a044b83d2bbc48238d95aa647 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 52cd93e786c676c9f7a0168ef57b9130ffbf3e4d..fe3a268d1c9feb85be5f6b8028ee7d6f0a3d9b97 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 71a189735b667c72ff202b04ec5a53e44f1c6ac2..08da4b33ccbec0e3fa49ee2d7b4152b5dbb6dfa2 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 91c1cfa1ba63d804742f435c04ef78e05d8e7ae6..8bdd2a0c4ee5cc258884d45743feac8c36e7d450 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)
@@ -18,7 +19,8 @@ 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 73fc88364aa5b5ac2f0612f0897e004c84ce2238..b5d2cdec9c8a621a345398a596b99ddd914f699e 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 }
+    }))
   }
 })