Music
8 | settings
8 |
7 |
10 |
11 | )
12 | }
13 |
14 | export default memo(Loading)
15 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "sourceMap": true,
4 | "outDir": "./dist",
5 | "target": "es5",
6 | "module": "esnext",
7 | "strict": true,
8 | "allowJs": true,
9 | "jsx": "react",
10 | "esModuleInterop": true,
11 | "allowSyntheticDefaultImports": true,
12 | "typeRoots": ["node_modules/@types", "src/typings"],
13 | "moduleResolution": "node",
14 | "paths": {
15 | "@/*": ["./src/*"]
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/Button/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react'
2 | import { Button, IBtnProps } from './type-css'
3 |
4 | function index({ onClick, style, children, follow = false, size = 'small', preIcon, icon, className }: IBtnProps) {
5 | return (
6 |
11 | )
12 | }
13 |
14 | export default memo(index)
15 |
--------------------------------------------------------------------------------
/src/hooks/useStatusEff.ts:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 |
3 | export default function useStatusEff
8 | {name}
9 | })
{
12 | console.log('first')
13 | }}
14 | alt=""
15 | />
16 |
17 | {
12 | console.log('first')
13 | }}
14 | alt=""
15 | />
16 |
8 |
16 | )
17 | }
18 |
19 | export default memo(SystemInfo)
20 |
--------------------------------------------------------------------------------
/src/screen/Bootstrap/type-css.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 | import { DivFull } from '@/assets/css/common'
3 |
4 | export const Div = styled(DivFull)`
5 | background-color: #000;
6 | display: flex;
7 | justify-content: center;
8 | align-items: center;
9 | flex-direction: column;
10 | user-select: none;
11 | `
12 |
13 | export const Img = styled.img`
14 | width: 300px;
15 | animation: App-logo-spin infinite 16s linear;
16 | @keyframes App-logo-spin {
17 | from {
18 | transform: rotate(0deg);
19 | }
20 | to {
21 | transform: rotate(360deg);
22 | }
23 | }
24 | `
25 |
26 | export const LoadingDiv = styled.div`
27 | height: 200px;
28 | margin-top: 20rem;
29 | `
30 |
--------------------------------------------------------------------------------
/config/webpack.dev.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-require-imports */
2 | const path = require('path')
3 |
4 | const webpack = require('webpack')
5 | const { merge } = require('webpack-merge')
6 | const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
7 |
8 | const common = require('./webpack.common')
9 |
10 | module.exports = merge(common, {
11 | devServer: {
12 | static: {
13 | directory: path.resolve(__dirname, 'build'),
14 | },
15 | port: 4000,
16 | open: true,
17 | hot: true,
18 | compress: true,
19 | historyApiFallback: true,
20 | },
21 | plugins: [new webpack.HotModuleReplacementPlugin(), new ReactRefreshWebpackPlugin({ overlay: false })],
22 | })
23 |
--------------------------------------------------------------------------------
/scripts/deploy.js:
--------------------------------------------------------------------------------
1 | const spawn = require('child_process').spawn
2 |
3 | function exec(command, args) {
4 | const win32 = process.platform === 'win32'
5 | const cmd = win32 ? 'cmd' : command
6 | const cmdArgs = win32 ? ['/c'].concat(command, args) : args
7 | return spawn(cmd, cmdArgs, {
8 | cwd: process.cwd(),
9 | stdio: 'inherit',
10 | })
11 | }
12 |
13 | function execSync(command, args) {
14 | return new Promise((resolve, reject) => {
15 | const cp = exec(command, args)
16 | cp.on('error', (code) => {
17 | reject(code)
18 | })
19 | cp.on('exit', (code) => {
20 | resolve(code)
21 | })
22 | })
23 | }
24 |
25 | execSync('yarn', 'build').then(() => {
26 | exec('yarn', 'gp')
27 | })
28 |
--------------------------------------------------------------------------------
/src/screen/Bootstrap/index.tsx:
--------------------------------------------------------------------------------
1 | import Loading from '@/components/Loading'
2 | import { useAppDispatch } from '@/store'
3 | import { bootstrapAsync } from '@/store/win/asyncThunk'
4 | import React, { memo, useEffect } from 'react'
5 | import { Div, Img, LoadingDiv } from './type-css'
6 |
7 | import logo from '@/assets/logo.svg'
8 |
9 | function index() {
10 | const dispatch = useAppDispatch()
11 |
12 | useEffect(() => {
13 | dispatch(bootstrapAsync())
14 | }, [])
15 |
16 | if (process.env.NODE_ENV === 'development') return null
17 |
18 | return (
19 |
9 |
12 |
13 |
15 |
20 | 
21 |
22 |
24 |
25 | )
26 | }
27 |
28 | export default memo(index)
29 |
--------------------------------------------------------------------------------
/src/components/Icon/type-css.ts:
--------------------------------------------------------------------------------
1 | import styled, { CSSProperties } from 'styled-components'
2 | import React from 'react'
3 |
4 | export enum Size {
5 | small = '16px',
6 | middle = '24px',
7 | large = '36px',
8 | }
9 |
10 | export interface IIcon {
11 | src: string
12 | style?: CSSProperties
13 | size?: 'large' | 'middle' | 'small'
14 | status?: boolean
15 | type?: boolean
16 | onClick?: React.MouseEventHandler
26 | 
27 |
28 | {name}
29 | {
18 | appStatus[1](!appStatus[0])
19 | dispatch(clearNotifierCount(false))
20 | }}
21 | >
22 |
24 | {appStatus[0] && :(
13 |14 | Your PC ran into a problem and needs to restart. We're just collecting some error info, and then we'll restart 15 | for you.(0% complete) 16 |
17 |
18 | 
19 |
35 |
20 |
21 | For more information about this issue and possible fixes, visit
22 |
27 |
28 | If you call a support person, give them this info:
29 |
32 |
33 |
34 |
21 | For more information about this issue and possible fixes, visit
22 |
23 |
24 | https://github.com/CVopen/react-to-win11/issues
25 |
26 |
27 |
28 | If you call a support person, give them this info:
29 |
30 | Stop Code: {error.message}
31 |
32 |
33 |
23 |
26 | {showTime.time}
24 |{showTime.date}
25 |
41 |
50 | CVopen
43 | 49 |-
63 | {props.config.map(({ icon, line, text, children }, index) => {
64 | if (line) return
65 | return (
66 |
-
67 | {icon} {text}
68 | {children &&
} 69 | {children && ( 70 | 75 | {children.map(({ text, active }) => ( 76 | 82 | )} 83 |- 77 | {active && } 78 | {text} 79 |
80 | ))} 81 |
84 | )
85 | })}
86 |
58 |
67 | ))
68 | }, [])
69 |
70 | return (
71 | {key}
59 | {/* eslint-disable-next-line max-nested-callbacks */}
60 | {letterConfig[key as LetterConfigType].map(({ name, icon }) => (
61 |
62 |
65 | ))}
66 |
72 |
113 | )
114 | })
115 |
116 | export default StartMenu
117 |
--------------------------------------------------------------------------------
/src/api/widget.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import useSWR, { useSWRConfig } from 'swr'
3 | import useSWRImmutable from 'swr/immutable'
4 | import dayjs from 'dayjs'
5 |
6 | import { getVore } from '@/utils/request'
7 |
8 | interface IEpidemicAreaItem {
9 | info: string
10 | detail: number
11 | change?: string
12 | }
13 |
14 | export interface IEpidemic {
15 | info: {
16 | desc: string
17 | else: string
18 | time: string
19 | }
20 | area: {
21 | 全国: {
22 | title: string
23 | que_zhen: IEpidemicAreaItem
24 | yi_si: IEpidemicAreaItem
25 | zhi_yu: IEpidemicAreaItem
26 | si_wang: IEpidemicAreaItem
27 | }
28 | other: {
29 | desc: string
30 | list: {
31 | country: string
32 | title: string
33 | que_zhen: IEpidemicAreaItem
34 | zhi_yu: IEpidemicAreaItem
35 | si_wang: IEpidemicAreaItem
36 | }[]
37 | }
38 | }
39 | }
40 |
41 | export interface ISinaHot {
42 | hot: {
43 | rank: number
44 | name: string
45 | link: string
46 | score: number
47 | }[]
48 | gov: {
49 | rank: 0
50 | name: '跟着总书记学历史'
51 | link: 'http://weibo.com/2810373291/M0FvvlrB7'
52 | }
53 | }
54 |
55 | export interface IWeather {
56 | tianqi: {
57 | province: string
58 | city: string
59 | adcode: string
60 | weather: string
61 | temperature: string
62 | winddirection: string
63 | windpower: string
64 | humidity: string
65 | reporttime: string
66 | }
67 | }
68 |
69 | export function useGetEpidemic() {
70 | return useSWR('/Epidemic', (url) =>
71 | getVore(url).then((res) => {
72 | const data = res.data as unknown as IEpidemic
73 | const cn = {
74 | title: data.area['全国'].title,
75 | list: [
76 | {
77 | ...data.area['全国'].que_zhen,
78 | title: '确诊',
79 | },
80 | {
81 | ...data.area['全国'].yi_si,
82 | title: '疑似',
83 | },
84 | {
85 | ...data.area['全国'].zhi_yu,
86 | title: '治愈',
87 | },
88 | {
89 | ...data.area['全国'].si_wang,
90 | title: '死亡',
91 | },
92 | ],
93 | }
94 |
95 | const otherList = data.area.other.list.map((item) => {
96 | return {
97 | country: item.country,
98 | title: item.title,
99 | list: [
100 | {
101 | ...item.que_zhen,
102 | title: '确诊',
103 | },
104 | {
105 | ...item.zhi_yu,
106 | title: '治愈',
107 | },
108 | {
109 | ...item.si_wang,
110 | title: '死亡',
111 | },
112 | ],
113 | }
114 | })
115 | return {
116 | info: data.info,
117 | cn,
118 | other: {
119 | desc: data.area.other.desc,
120 | otherList,
121 | },
122 | }
123 | }),
124 | )
125 | }
126 |
127 | export function useGetBaiduHot() {
128 | return useSWR('/baiduHot', (url) =>
129 | getVore(url).then(
130 | (res) =>
131 | res.data as unknown as {
132 | rank: number
133 | name: string
134 | link: string
135 | }[],
136 | ),
137 | )
138 | }
139 |
140 | interface IHistory {
141 | info: string
142 | date: string
143 | }
144 |
145 | type IHistoryList = IHistory[]
146 |
147 | export function useGetHistory() {
148 | const { mutate } = useSWRConfig()
149 | const { data } = useSWRImmutable('/history', (url) =>
150 | getVore(url).then((res) => {
151 | const list = res.data as unknown as IHistoryList
152 | return {
153 | list,
154 | date: dayjs().format('MM'),
155 | }
156 | }),
157 | )
158 | useEffect(() => {
159 | if (data && data.date !== dayjs().format('MM')) {
160 | mutate('/history')
161 | }
162 | }, [])
163 | return data
164 | }
165 |
166 | export function useGetSinaHot() {
167 | return useSWR('/sinaHot', (url) => getVore(url).then((res) => res.data as unknown as ISinaHot))
168 | }
169 |
170 | export function useGetWeather() {
171 | return useSWR('/Weather', (url) => getVore(url).then((res) => (res.data as unknown as IWeather).tianqi))
172 | }
173 |
--------------------------------------------------------------------------------
/src/screen/Desktop/components/TaskBar/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { lazy, memo, MutableRefObject, ReactNode, Suspense, useRef, useState } from 'react'
2 | import { AiOutlineUp } from 'react-icons/ai'
3 |
4 | import { useAppDispatch, useAppSelector } from '@/store'
5 | import { IPreviewRef, TaskBarDiv } from '../../type-css'
6 | import TaskIcon from './TaskIcon'
7 | import Icon from '@/components/Icon'
8 | import TaskPreview from './TaskPreview'
9 | import dayjs from 'dayjs'
10 | import { changeAppActive, changeWidget } from '@/store/win'
11 | import useEvent from '@/hooks/useEvent'
12 |
13 | const TaskDate = lazy(() => import('./TaskDate'))
14 | const TaskStatus = lazy(() => import('./TaskStatus'))
15 | const Widget = lazy(() => import('./Widget'))
16 | const TaskWidget = lazy(() => import('./TaskWidget'))
17 | const Hideapp = lazy(() => import('./Hideapp'))
18 |
19 | const isWidgetChild = (target: HTMLElement | Window, calss: string) => {
20 | if (target === window) return false
21 | while (typeof (target as HTMLElement).className === 'object') {
22 | target = (target as HTMLElement).parentNode as HTMLElement
23 | }
24 |
25 | while (!(target as HTMLElement).className.includes(calss)) {
26 | if ((target as HTMLElement).tagName === document.body.tagName) return false
27 | target = (target as HTMLElement).parentNode as HTMLElement
28 | }
29 | return true
30 | }
31 |
32 | function TaskBar() {
33 | const { boot, appListTar, widgetVisible: widget } = useAppSelector(({ win }) => win)
34 | const dispatch = useAppDispatch()
35 | const previewRef = useRef() as MutableRefObject
73 |
103 |
74 | 已固定
75 | } onClick={() => setPage(true)}>
76 | 所有应用
77 |
78 |
79 |
80 | {config.map(({ name, icon }) => (
81 |
90 | 推荐的项目
91 |
92 | {recommendConfig.map(({ name, icon }) => (
93 |
102 |
104 |
112 |
105 | 所有应用
106 | } onClick={() => setPage(false)}>
107 | 返回
108 |
109 |
110 | {list}
111 | {
73 | setWidgetVisible(!widgetVisible)
74 | dispatch(changeWidget(0))
75 | }}
76 | >
77 |
79 |
80 | {appListTar.map(({ src, hide, name }, index) => (
81 |
84 |
85 |
86 |
91 |
92 |
98 |
99 |
104 |
105 |
87 |
89 |
93 |
96 |
100 | {dayjs().format('HH:mm')} {dayjs().format('YYYY/MM/DD')}
101 |
102 |
100 | }
103 | style={{ width: widgetVisible <= 1 ? 600 : 700 }}
104 | placeholder={widgetVisible === 1 ? '在此键入搜索' : '搜索'}
105 | onClick={changeSearchClick}
106 | onChange={changeValue}
107 | onEnter={openApp}
108 | />
109 | {renderWidget()}
110 | {showSwitch && (
111 |
123 | {widgetVisible === 1 && -
112 |
-
113 |
114 | 重启 115 |
116 | -
117 |
118 | 锁屏 119 |
120 |
111 | {preview.url.map((u, i) => (
112 |
122 | )
123 | }),
124 | )
125 |
126 | export default TaskPreview
127 |
--------------------------------------------------------------------------------
/src/screen/Desktop/components/TaskBar/TaskWidget/SearchMenu.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, useCallback, useState } from 'react'
2 | import { useGetHistory } from '@/api'
3 | import dayjs from 'dayjs'
4 | import { AiOutlineClose, AiOutlineExport, AiOutlineSwap } from 'react-icons/ai'
5 | import { simpleDeepClone } from '@/utils'
6 | import { useAppDispatch, useAppSelector } from '@/store'
7 | import Icon from '@/components/Icon'
8 | import { clearHistoryApp } from '@/store/win'
9 | import { searchApp } from '@/utils/appList'
10 | import useDeferState from '@/hooks/useDeferState'
11 | import Button from '@/components/Button'
12 |
13 | interface ISearchProps {
14 | value: string
15 | openApp: (name: string | undefined) => void
16 | }
17 |
18 | const SearchMenu = memo(({ value, openApp }: ISearchProps) => {
19 | return (
20 |
113 | 
119 |
120 | ))}
121 |
114 | 
115 | {preview.name}
116 | {preview.active === i &&
118 |
21 | {value ? (
22 |
30 | )
31 | })
32 |
33 | export default SearchMenu
34 |
35 | const Lately = memo(() => {
36 | const { historyApp } = useAppSelector(({ win }) => win)
37 | const dispatch = useAppDispatch()
38 |
39 | const handliClick = useCallback((e: React.MouseEvent
45 |
58 | )
59 | })
60 |
61 | const Info = memo(() => {
62 | const data = useGetHistory()
63 | const [isReverse, setReverse] = useState(true)
64 |
65 | const list = () => {
66 | if (!data) return null
67 | let list = data.list
68 | if (!isReverse) list = simpleDeepClone(list).reverse()
69 | return list.map(({ date, info }, index) => (
70 | 最近
46 | {historyApp.map(({ name, icon }, index) => ( 47 |
48 |
56 | ))}
57 |
49 |
52 |
53 |
71 |
74 | ))
75 | }
76 |
77 | return (
78 | {date}
72 |{info}
73 |
79 | 
81 |
90 | )
91 | })
92 |
93 | interface IItem {
94 | name: string
95 | icon: string
96 | }
97 |
98 | const SearchResult = memo(({ value, openApp }: ISearchProps) => {
99 | const [state, setState] = useDeferState<{ list: IItem[]; active: IItem }>(
100 | { list: [], active: { name: '', icon: '' } },
101 | () => {
102 | const list = searchApp(value) as IItem[]
103 | let active = { name: '', icon: '' }
104 | if (list.length) active = list[0]
105 | setState({ list, active })
106 | },
107 | [value],
108 | )
109 |
110 | const handleClick = useCallback(() => {
111 | openApp(state.active.name)
112 | }, [state.active.name])
113 |
114 | if (!state.active.name) {
115 | return 今天 · {dayjs().format('M月DD日')}
80 |
82 |
88 | 历史上的今天
83 | setReverse(!isReverse)}>
84 |
87 | {list()}
89 | 无结果
116 | } 117 | 118 | const changeActive = (e: React.MouseEvent
130 |
142 | 应用
131 | {state.list.map(({ name, icon }, index) => ( 132 |
137 |
140 | ))}
141 |
143 |
144 |
152 |
153 | )
154 | })
155 |
--------------------------------------------------------------------------------
/src/app/Edge/index.tsx:
--------------------------------------------------------------------------------
1 | import AppShell from '@/components/AppShell'
2 | import Icon from '@/components/Icon'
3 | import React, { memo, useCallback, useEffect, useRef, useState } from 'react'
4 | import { BiHomeAlt, BiLeftArrowAlt, BiRevision, BiRightArrowAlt, BiRightArrowCircle } from 'react-icons/bi'
5 | import { withTheme } from 'styled-components'
6 | import { EdgeBody, HeaderDiv } from './type-css'
7 |
8 | type historyType = {
9 | src: string
10 | active?: boolean | undefined
11 | }[]
12 |
13 | function Edge({ index, theme }: { index: number; theme: { [key: string]: string } }) {
14 | const [src, setSrc] = useState('https://www.bing.com')
15 | const history = useRef
145 |
151 |
57 | New Tab
59 |
112 | handlePosition(-1)} />
113 | handlePosition(1)} />
114 | hanldeSkipWeb(value)} />
125 |
126 | )
127 | },
128 | )
129 |
130 | const HeaderCollect = memo(({ hanldeSkipWeb }: { hanldeSkipWeb: (s: string) => void }) => {
131 | const handleClick = useCallback((e: React.MouseEvent
137 |
158 | )
159 | })
160 |
--------------------------------------------------------------------------------
/src/screen/Desktop/components/TaskBar/TaskIcon.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, ReactNode, useCallback, useEffect, useRef, useState } from 'react'
2 | import html2canvas from 'html2canvas'
3 |
4 | import Images from '@/components/Image'
5 | import { IPreviewRef, TaskIconDiv } from '../../type-css'
6 | import useEvent from '@/hooks/useEvent'
7 | import { useAppDispatch, useAppSelector } from '@/store'
8 | import { constant, isExploer, Timer } from '@/utils'
9 | import { changeAppIsHide, changeAppList } from '@/store/win'
10 | import { TAppList } from '@/store/win/state'
11 | import { render } from '../render'
12 |
13 | function TaskIcon({
14 | src,
15 | hide,
16 | name,
17 | index,
18 | preview,
19 | }: {
20 | src: string
21 | hide: boolean | undefined
22 | name?: string | undefined
23 | index?: number
24 | preview?: IPreviewRef
25 | }) {
26 | const [active, setActive] = useState(false)
27 | const [down, setDown] = useState(false)
28 | const ref = useRef
138 | 
139 | 必应
140 |
141 |
142 | 
143 | bilibili
144 |
145 |
146 | 
147 | react to win11
148 |
149 |
150 | 
151 | 掘金
152 |
153 |
154 | 
155 | 淘宝网
156 |
157 |
29 |
38 |
30 |
33 |
34 |
37 | {time}
57 | } placeholder="搜索网页" /> 58 |
74 |
75 |
78 |
79 |
83 |
96 | )
97 | })
98 |
99 | const WidgetEpidemic = memo(() => {
100 | const { data } = useGetEpidemic()
101 | if (!data) return null
102 |
103 | return (
104 |
75 |
78 |
79 |
83 |
84 |
85 | {data.temperature}
86 |
87 |
88 | {data.weather}
89 |
95 | -
90 |
- 湿度: {data.humidity}% 91 |
- 风力: {data.windpower} 92 |
- 风向: {data.winddirection} 93 |
105 |
134 | )
135 | })
136 |
137 | const sinaRankTopStyle = { fontWeight: 600, fontSize: '1rem', color: '#f26d5f' }
138 | const sinaRankStyle = { color: '#ff8200' }
139 | const WidgetSinaHot = memo(() => {
140 | const { data } = useGetSinaHot()
141 | if (!data) return null
142 | return (
143 | {data.info.desc}
106 |107 | {data.cn.title} 108 |
109 |
110 | {data.cn.list.map(({ title, change, detail }) => (
111 |
118 | -
112 |
- 总人数: {detail} 人 114 |
- 增加: {Number(change)} 人 115 |
{title}
113 |119 | {data.other.desc} 120 |
121 |
122 | {data.other.otherList.map(({ title, list }) => (
123 |
133 | -
124 |
- 127 | {item.title}: {item.detail} 128 | 129 | ))} 130 |
{title}
125 | {list.map((item) => ( 126 |
145 |
148 |
149 |
150 |
183 |
186 | {data.map(({ rank, name, link }) => (
187 |
188 | {rank} {name}
189 |
190 | ))}
191 |
169 |
199 | )
200 | })
201 |
202 | export default memo(SplitScreen)
203 |
--------------------------------------------------------------------------------
/src/screen/Desktop/components/TaskBar/Notifier.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
2 | import ReactDOM from 'react-dom'
3 | import Button from '@/components/Button'
4 | import { NotifierDesktopDiv, NotifierDiv } from '../../type-css'
5 | import { useAppDispatch, useAppSelector } from '@/store'
6 | import Icon from '@/components/Icon'
7 | import { Timer } from '@/utils'
8 | import { clearNotifier, NextNotifier } from '@/store/win'
9 | import { INotifierChain } from '@/store/win/state'
10 |
11 | const NotifierWidget = memo(({ active, visible }: { active: boolean; visible: boolean }) => {
12 | const {
13 | notifier: { listData },
14 | } = useAppSelector(({ win }) => win)
15 |
16 | const keys = useMemo(() => Object.keys(listData), [listData])
17 |
18 | const calcHeight = useMemo(() => ({ height: `calc(100vh - 53px - ${visible ? 520 : 134}px` }), [visible])
19 |
20 | const NotifierStyle = useMemo(
21 | () => ({
22 | transform: `translateX(${active ? -530 : 0}px)`,
23 | bottom: visible ? 508 : 122,
24 | height: keys.length ? `calc(100vh - ${visible ? 520 : 134}px` : 233,
25 | }),
26 | [visible, active, keys],
27 | )
28 |
29 | const timer = useRef
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
53 | 通知
54 | {keys.length !== 0 && (
55 |
58 | )}
59 |
60 |
61 | {keys.length ? (
62 |
63 | {keys.map((key) => {
64 | const { icon, message, name, time } = listData[key][listData[key].length - 1]
65 | return (
66 |
67 |
93 | )
94 | })}
95 |
96 | ) : (
97 |
68 |
74 |
69 | 
70 | {name}
71 |
72 |
75 |
92 |
76 | {time}
77 |
79 |
80 |
91 |
81 |
82 |
87 | {listData[key].length > 1 && (
88 | +{listData[key].length - 1} 个通知
89 | )}
90 |
83 |
86 | {name}
84 | {message} 85 |没有新通知
98 | )}
99 |
151 | {chainState.data.time}
152 |
154 |
155 |
163 |
156 | 
157 |
162 |
158 |
161 | {chainState.data.name}
159 | {chainState.data.message} 160 | {
41 | setActive(!active)
42 | dispatch(clearNotifierCount(false))
43 | }}
44 | >
45 |
48 | {
104 | const active = (e.target as HTMLElement).dataset.title
105 | if (!active) return
106 | let list: string[] = []
107 | if (activeList.includes(active)) {
108 | list = activeList.reduce((target, item) => {
109 | if (item !== active) target.push(item)
110 | return target
111 | }, [] as string[])
112 | } else {
113 | list = [...activeList, active]
114 | }
115 | setActiveList(list)
116 | }}
117 | >
118 | {config.map(({ icon, title, onClick }) => (
119 |
132 |
124 |
129 | ))}
130 |
125 |
127 | {title}
128 |
133 | {
138 | const settings = activeAppList.find(({ name }) => name === '设置')
139 | if (settings) {
140 | dispatch(changeAppActive('设置'))
141 | } else {
142 | dispatch(changeAppList({ app: render('设置') as (index: number) => ReactNode, name: '设置' }))
143 | }
144 | dispatch(changeWidget(0))
145 | }}
146 | />
147 |
148 | = 0.9 ? 0.9 : o,
186 | zIndex: 100,
187 | }}
188 | />,
189 | document.body,
190 | )
191 | }, [opacity])
192 |
193 | const Night = useCallback(() => {
194 | const { isNightlight } = useAppSelector(({ win }) => win)
195 | return ReactDOM.createPortal(
196 | ,
210 | document.body,
211 | )
212 | }, [])
213 |
214 | return (
215 | <>
216 | {mask()}
217 | {Night()}
218 |
234 |
250 |
251 | )
252 | })
253 |
--------------------------------------------------------------------------------
/src/store/win/reducers.ts:
--------------------------------------------------------------------------------
1 | import { getKeyName, isExploer } from '@/utils'
2 | import { getIcon } from '@/utils/appList'
3 | import { local, session } from '@/utils/storage'
4 | import { PayloadAction } from '@reduxjs/toolkit'
5 | import dayjs from 'dayjs'
6 | import { ReactNode } from 'react'
7 | import { TdesktopS, IWinState, TAppList, IActiveAppList, IChain, TIconSortWay } from './state'
8 |
9 | const hideApp = (state: IWinState, name: string) => {
10 | if (isExploer(name)) {
11 | state.appListTar[3].hide = false
12 | }
13 | if (name === 'Microsoft Edge') {
14 | state.appListTar[4].hide = false
15 | }
16 | if (name === '设置') {
17 | state.appListTar[2].hide = false
18 | }
19 | }
20 |
21 | const wallunlock = (state: IWinState) => {
22 | state.lock = !state.lock
23 | session.setItem('lock', state.lock)
24 | }
25 |
26 | const changeTheme = (state: IWinState) => {
27 | state.theme = state.theme === 'darkTheme' ? 'lightTheme' : 'darkTheme'
28 | local.setItem('theme', state.theme)
29 | }
30 |
31 | const changeDesktopSize = (state: IWinState, action: PayloadAction) => {
32 | state.desktopSize = action.payload
33 | local.setItem('desktopSize', action.payload)
34 | }
35 |
36 | const changeAppList = (
37 | state: IWinState,
38 | action: PayloadAction<{ info?: TAppList; app: (index: number) => ReactNode; name: string }>,
39 | ) => {
40 | action.payload.info && state.appListTar.push(action.payload.info)
41 | state.activeApp = action.payload.name
42 | state.activeAppList.push({ name: state.activeApp, app: action.payload.app, isHide: false })
43 |
44 | state.historyApp = state.historyApp.filter(({ name }) => name !== action.payload.name)
45 | state.historyApp = [{ name: action.payload.name, icon: getIcon(action.payload.name) }, ...state.historyApp]
46 | if (state.historyApp.length === 11) state.historyApp.pop()
47 | local.setItem('historyApp', state.historyApp)
48 |
49 | hideApp(state, action.payload.name)
50 | }
51 |
52 | const changeAppActive = (state: IWinState, action: PayloadAction) => {
53 | hideApp(state, action.payload)
54 | state.activeApp = action.payload
55 | }
56 |
57 | const changeAppIsHide = (state: IWinState, action: PayloadAction) => {
58 | let isPrevew = false
59 | if (typeof action.payload !== 'string') {
60 | action.payload = action.payload.name
61 | isPrevew = true
62 | }
63 |
64 | const item = state.activeAppList.find(({ name }) => name === action.payload)
65 | if (!item) return
66 |
67 | item.isHide = isPrevew ? false : !item.isHide
68 |
69 | if (!item.isHide) {
70 | state.activeApp = action.payload
71 | return
72 | }
73 |
74 | if (!isExploer(action.payload)) {
75 | state.activeApp = ''
76 | return
77 | }
78 |
79 | const eList = state.activeAppList.reduce((target, item) => {
80 | if (isExploer(item.name)) target.push(item)
81 | return target
82 | }, [] as IActiveAppList[])
83 | if (eList.length === 1) {
84 | state.activeApp = ''
85 | } else {
86 | const nextExplorerApp = eList.find((item) => !item.isHide)
87 | state.activeApp = nextExplorerApp ? nextExplorerApp.name : ''
88 | }
89 | }
90 |
91 | const closeApp = (state: IWinState, action: PayloadAction) => {
92 | state.activeAppList = state.activeAppList.reduce((target, item) => {
93 | if (item.name !== action.payload) {
94 | target.push(item)
95 | } else {
96 | changeAppIsHide(state, { payload: action.payload, type: 'win/changeAppIsHide' })
97 | }
98 | return target
99 | }, [] as IActiveAppList[])
100 |
101 | if (isExploer(action.payload)) {
102 | const isExplorerHide = state.activeAppList.reduce((target, item) => {
103 | if (isExploer(item.name)) target.push(item)
104 | return target
105 | }, [] as IActiveAppList[]).length
106 | if (!isExplorerHide) state.appListTar[3].hide = true
107 | } else if (action.payload === 'Microsoft Edge') {
108 | state.appListTar[4].hide = true
109 | } else if (action.payload === '设置') {
110 | state.appListTar[2].hide = true
111 | } else {
112 | state.appListTar = state.appListTar.reduce((target, item) => {
113 | if (item.name !== action.payload) target.push(item)
114 | return target
115 | }, [] as typeof state.appListTar)
116 | }
117 | }
118 |
119 | const changeNight = (state: IWinState) => {
120 | state.isNightlight = !state.isNightlight
121 | local.setItem('isNightlight', state.isNightlight)
122 | }
123 |
124 | const changeOpacity = (state: IWinState, action: PayloadAction) => {
125 | state.opacity = action.payload
126 | local.setItem('opacity', state.opacity)
127 | }
128 |
129 | const changeIamge = (state: IWinState, action: PayloadAction) => {
130 | state.backgroundImage = require(`@/assets/img/wapppaper/${action.payload}.jpg`)
131 | local.setItem('backgroundImage', state.backgroundImage)
132 | }
133 |
134 | const changeWidget = (state: IWinState, action: PayloadAction<0 | 1 | 2>) => {
135 | state.widgetVisible = action.payload
136 | }
137 |
138 | const changeBootResatrOrLock = (state: IWinState, action: PayloadAction) => {
139 | if (action.payload) {
140 | state.boot = true
141 | state.appListTar = [
142 | { src: 'home', hide: true, isRemove: true },
143 | { src: 'search', hide: true, isRemove: true },
144 | { src: 'settings', hide: true, name: '设置', isRemove: true },
145 | { src: 'explorer', hide: true, name: 'explorer', isRemove: true },
146 | { src: 'edge', hide: true, name: 'Microsoft Edge', isRemove: true },
147 | ]
148 | state.activeApp = ''
149 | state.activeAppList = []
150 | }
151 | wallunlock(state)
152 | }
153 |
154 | const pushNotifier = (state: IWinState, action: PayloadAction) => {
155 | const icon = getIcon(action.payload)
156 | if (!icon) return // TODO: 这里未来可能加上浏览器搜索功能
157 | const data = {
158 | name: action.payload,
159 | icon: require(`@/assets/icon/actions/${icon}.png`),
160 | message: `应用 '${action.payload}' 正在开发中， 敬请期待!`,
161 | time: dayjs().format('YYYY/MM/DD H:mm'),
162 | key: new Date().getTime(),
163 | }
164 | const tailChain = {
165 | data,
166 | next: null,
167 | }
168 |
169 | let { listData, chain } = state.notifier
170 | if (!listData[action.payload]) {
171 | listData[action.payload] = []
172 | }
173 | listData[action.payload].push(data)
174 |
175 | if (!chain) {
176 | chain = tailChain
177 | } else {
178 | let currNode = chain
179 | while (currNode.next) {
180 | currNode = currNode.next
181 | }
182 | currNode.next = tailChain
183 | }
184 |
185 | state.notifier = {
186 | chain,
187 | listData,
188 | count: ++state.notifier.count,
189 | }
190 | }
191 |
192 | const clearNotifier = (state: IWinState, action: PayloadAction) => {
193 | if (action.payload) {
194 | state.notifier.listData[action.payload].pop()
195 | if (!state.notifier.listData[action.payload].length) {
196 | delete state.notifier.listData[action.payload]
197 | }
198 | } else {
199 | state.notifier = {
200 | chain: null,
201 | listData: {},
202 | count: 0,
203 | }
204 | }
205 | }
206 |
207 | const clearNotifierCount = (state: IWinState, action: PayloadAction) => {
208 | if (action.payload) {
209 | state.notifier.count = 0
210 | }
211 | state.notifier.chain = null
212 | }
213 |
214 | const NextNotifier = (state: IWinState, action: PayloadAction) => {
215 | if (state.notifier.chain) {
216 | state.notifier.chain = state.notifier.chain.next
217 | }
218 | if (action.payload) {
219 | const count = --state.notifier.count
220 | state.notifier.count = count >= 0 ? count : 0
221 | }
222 | }
223 |
224 | const clearHistoryApp = (state: IWinState, action: PayloadAction) => {
225 | state.historyApp = state.historyApp.filter((_, index) => index !== action.payload)
226 | }
227 |
228 | const refurbishIcon = (state: IWinState) => {
229 | state.refurbish = !state.refurbish
230 | }
231 |
232 | const changeIconSort = (state: IWinState, action: PayloadAction) => {
233 | state.sortWay = action.payload
234 | }
235 |
236 | export default {
237 | wallunlock,
238 | changeTheme,
239 | changeDesktopSize,
240 | changeAppList,
241 | changeAppActive,
242 | changeAppIsHide,
243 | closeApp,
244 | changeNight,
245 | changeOpacity,
246 | changeIamge,
247 | changeWidget,
248 | changeBootResatrOrLock,
249 | pushNotifier,
250 | clearNotifier,
251 | clearNotifierCount,
252 | NextNotifier,
253 | clearHistoryApp,
254 | refurbishIcon,
255 | changeIconSort,
256 | }
257 |
--------------------------------------------------------------------------------
/src/screen/Desktop/components/TaskBar/TaskDate.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, startTransition, useCallback, useEffect, useRef, useState } from 'react'
2 | import ReactDOM from 'react-dom'
3 | import { AiOutlineCaretDown, AiOutlineCaretUp, AiOutlineDown } from 'react-icons/ai'
4 | import dayjs from 'dayjs'
5 | import useEvent from '@/hooks/useEvent'
6 | import { CalendarDiv } from '../../type-css'
7 | import useTime from '@/hooks/UseTime'
8 | import { NotifierWidget } from './Notifier'
9 | import { useAppDispatch, useAppSelector } from '@/store'
10 | import { clearNotifierCount } from '@/store/win'
11 |
12 | // eslint-disable-next-line no-sparse-arrays
13 | const week = [, '一', '二', '三', '四', '五', '六', '日']
14 |
15 | function TaskDate() {
16 | const dateRef = useRef(null)
17 | const dispatch = useAppDispatch()
18 | const { time, date } = useTime({ time: '', date: '' }, (date) => ({
19 | time: date.format('HH:mm'),
20 | date: date.format('YYYY/MM/DD'),
21 | }))
22 |
23 | const [active, setActive] = useState(false)
24 | useEvent({
25 | eventName: 'mouseup',
26 | cb(e: React.MouseEvent | MouseEvent) {
27 | const className = (e.target as HTMLElement).className || ''
28 | if (e.target === dateRef.current || typeof className !== 'string' || className.includes('calendar')) return
29 | setActive(false)
30 | },
31 | })
32 |
33 | return (
34 | <>
35 | (null)
78 |
79 | useEffect(() => {
80 | if (!active) {
81 | setActive({ month: 0, day: 0 })
82 | setCalendar([])
83 | currentDate.current.scrollTop = 0
84 | return
85 | }
86 | renderData()
87 | }, [active])
88 |
89 | useEffect(() => {
90 | if (!calendarDate.length) return
91 | bodyRef.current?.scroll(0, 48 * currentDate.current.offset + currentDate.current.scrollTop)
92 | let isEvent = false
93 | const scrollHandle = ({ target }: Event) => {
94 | if (!isEvent) {
95 | isEvent = true
96 | return
97 | }
98 | const { scrollTop, clientHeight } = target as HTMLElement
99 | if (scrollTop <= 48 * 2) {
100 | currentDate.current.scrollTop = scrollTop
101 | renderData(`${currentDate.current.currentYear}-${currentDate.current.currentMonth - 1}`)
102 | setActive({ month: 0, day: 0 })
103 | }
104 |
105 | if (clientHeight + scrollTop >= 13 * 48) {
106 | currentDate.current.scrollTop = clientHeight + scrollTop - 13 * 48
107 | renderData(`${currentDate.current.currentYear}-${currentDate.current.currentMonth + 1}`)
108 | setActive({ month: 0, day: 0 })
109 | }
110 | }
111 | bodyRef.current?.addEventListener('scroll', scrollHandle)
112 | return () => bodyRef.current?.removeEventListener('scroll', scrollHandle)
113 | }, [calendarDate])
114 |
115 | const renderData = useCallback((date?: string) => {
116 | const nowTime = dayjs(date)
117 | const { list, offset } = getCalendarData(nowTime.format('YYYY-MM'))
118 |
119 | currentDate.current = {
120 | currentDate: `${dayjs().format('MM月DD日')}, 星期${week[dayjs().day() || 7]}`,
121 | currentMonth: nowTime.month() + 1,
122 | currentDay: nowTime.format('YYYY-M') === dayjs().format('YYYY-M') ? dayjs().date() : 0,
123 | currentYear: nowTime.year(),
124 | offset,
125 | scrollTop: currentDate.current.scrollTop,
126 | }
127 | startTransition(() => setCalendar(list))
128 | }, [])
129 |
130 | const returnClassName = useCallback(
131 | (month: number, day: number) => {
132 | let className = 'calendar'
133 | if (month === currentDate.current.currentMonth) {
134 | className += ' calendar-month-current'
135 | if (day === currentDate.current.currentDay) {
136 | className += ' calendar-day-current'
137 | if (month === activeDay.month && day === activeDay.day) {
138 | className += ' calendar-active-current'
139 | }
140 | } else {
141 | if (month === activeDay.month && day === activeDay.day) {
142 | className += ' calendar-active'
143 | }
144 | }
145 | } else {
146 | if (month === activeDay.month && day === activeDay.day) {
147 | className += ' calendar-active'
148 | }
149 | }
150 | return className
151 | },
152 | [activeDay],
153 | )
154 |
155 | const clickDayHandle = useCallback((e: React.MouseEvent | MouseEvent) => {
156 | const { month, day } = (e.target as HTMLElement).dataset
157 | if (!month || !day) return
158 | setActive({ month: Number(month), day: Number(day) })
159 | }, [])
160 |
161 | const handleBtnChangeCalendar = (direction: 'previous' | 'next') => {
162 | if (direction === 'previous') {
163 | renderData(`${currentDate.current.currentYear}-${currentDate.current.currentMonth - 1}`)
164 | } else {
165 | renderData(`${currentDate.current.currentYear}-${currentDate.current.currentMonth + 1}`)
166 | }
167 | currentDate.current.scrollTop = 0
168 | setActive({ month: 0, day: 0 })
169 | }
170 |
171 | return ReactDOM.createPortal(
172 | <>
173 |
175 |
216 | ,
217 | document.body,
218 | )
219 | }
220 |
221 | function getCalendarData(currentDate: string) {
222 | const current = dayjs(currentDate)
223 | const next = dayjs(currentDate).add(1, 'month')
224 | const previous = dayjs(currentDate).subtract(1, 'month')
225 |
226 | const getMonthList = (current: dayjs.Dayjs) => {
227 | const date = new Date(current.format('YYYY-MM'))
228 | const year = date.getFullYear()
229 | const month = date.getMonth() + 1
230 | const d = new Date(year, month, 0)
231 |
232 | return Array(d.getDate())
233 | .fill(month)
234 | .map((_, index) => ({ month: month, day: index + 1 }))
235 | }
236 |
237 | const previousList = [...Array((previous.day() || 7) - 1).fill({ month: 0, day: 0 }), ...getMonthList(previous)]
238 |
239 | return {
240 | offset: Math.trunc(previousList.length / 7),
241 | list: [...previousList, ...getMonthList(current), ...getMonthList(next)],
242 | }
243 | }
244 |
--------------------------------------------------------------------------------
{
38 | setActive(!active)
39 | dispatch(clearNotifierCount(true))
40 | }}
41 | ref={dateRef}
42 | >
43 |
48 |
44 | {time} {date}
45 |
46 | {count}
60 | })
61 |
62 | export default memo(TaskDate)
63 |
64 | function Calendar({ active }: { active: boolean }) {
65 | const [visible, setVisible] = useState(true)
66 | const [calendarDate, setCalendar] = useState<{ month: number; day: number }[]>([])
67 | const [activeDay, setActive] = useState({ month: 0, day: 0 })
68 |
69 | const currentDate = useRef({
70 | currentYear: 0,
71 | currentMonth: 0,
72 | currentDay: 0,
73 | currentDate: '',
74 | offset: 0,
75 | scrollTop: 0,
76 | })
77 | const bodyRef = useRef
176 | {currentDate.current.currentDate}
177 | setVisible(!visible)}>
178 |
181 |
182 | {currentDate.current.currentYear}年{currentDate.current.currentMonth}月
183 | handleBtnChangeCalendar('next')} />
184 | handleBtnChangeCalendar('previous')} />
185 |
186 |
187 | {week.map((item) => (
188 |
193 |
194 |
189 | {item}
190 |
191 | ))}
192 |
195 | {calendarDate.map(({ month, day }, index) => {
196 | if (!day)
197 | return (
198 |
202 | )
203 | return (
204 |
215 |
210 | {day}
211 |
212 | )
213 | })}
214 |