opensource/win12
3
0
Fork 0
mirror of https://github.com/tjy-gitnub/win12.git synced 2026-08-31 01:55:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

v5.0.0 新增Edge

Browse Source 
🎉🎉项目在Github上突破✨100✨stars✨啦！🎊🎈
-新增:Microsoft Edge应用(可以在Edge应用中提出反馈与建议，谢谢)
-新增:桌面拖动选择框(没什么大用)
-返璞归真:取消列表悬停效果
-丰富:在文件资源管理器中添加了一些文件
-精简:减小动画数量和幅度
-修复:关于记事本的另存为问题
-彩蛋:你发现动态壁纸了吗？
-其它:细节优化和修复
This commit is contained in:
tjy-gitnub
2023-04-08 12:24:25 +08:00
parent 2f55e7b663
commit c49e58166d
13 changed files with 2459 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+6 -5
View File
@@ -1,6 +1,7 @@
# Windows 12 网页版
> 大家的建议我都收到了，非常感谢宝贵建议。这里对 [前景规划](#前景规划) 做了一些更改
> 🎉🎉项目在Github上突破✨100✨stars✨啦！🎊🎈`o(^o^)o`
> 向在座的各位的支持表示诚挚的感谢！
- [Windows 12 网页版](#windows-12-网页版)
- [前言](#前言)
@@ -15,8 +16,8 @@
参考[前景规划](#前景规划)
精美的ui设计，流畅丰富的动画，各种高级的功能(相较于网页版)
> 移动端适配不太完善，开桌面版网址凑合着用吧 `>v-)o`
>
> 移动端适配不太完善，开桌面版网站凑合着用吧 `>v-)o`
话不多说，来看一下截图
## 效果展示
@@ -46,9 +47,9 @@
- [x] 窗口功能
- [x] 应用完善
- [ ] 添加更多个性化方面的设置
- [ ] 添加Edge应用
- [x] 添加Edge应用
- [ ] 完善小组件，添加到桌面等功能
- [ ] 动态壁纸
- [x] 动态壁纸
- [ ] 更多任务栏的自定义
- [ ] 丰富应用生态
apps/style/about.css
+2 -2
View File
@@ -20,7 +20,7 @@
#win-about>.cnt{
overflow: auto;
transform: translate(0, 30%);
transform: translate(0, 50%);
opacity: 0;
width: 0;
transition: transform 300ms cubic-bezier(0,0,0,1), opacity 300ms 50ms;
@@ -30,7 +30,7 @@
#win-about>.cnt.show {
flex-grow: 1;
width: autos;
width: auto;
transform: none;
opacity: 1;
display: block;
apps/style/edge.css
+163
View File
@@ -0,0 +1,163 @@
.window.edge>.titbar>.tabs{
display: flex;
flex-grow: 1!important;
height: 100%;
padding: 2px 1px;
/* overflow-x:auto; */
overflow: hidden;
}
.window.edge>.titbar>.tabs>.tab{
display: flex;
border-radius: 8px;
max-width: 200px;
display: flex;
justify-content: space-between;
padding: 3px 0;
width: 0;
flex-grow: 1;
max-width: 200px;
min-width: none;
overflow: hidden;
transition: 50ms;
}
.window.edge>.titbar>.tabs>.tab::before{
content: '';
position: relative;
width: 1.5px;
height: 19px;
top: 3px;
background: var(--text);
opacity: 0.3;
transition: 50ms;
}
.window.edge>.titbar>.tabs>.tab.show{
background: var(--card) !important;
box-shadow: 0 1px 2px var(--sd);
}
.window.edge>.titbar>.tabs>.tab:hover{
background: var(--hover-half);
}
.window.edge>.titbar>.tabs>.tab:hover::before,
.window.edge>.titbar>.tabs>.tab:hover+.tab::before,
.window.edge>.titbar>.tabs>.tab.show::before,
.window.edge>.titbar>.tabs>.tab.show+.tab::before{
opacity: 0;
}
.window.edge>.titbar>.tabs>.tab>p{
font-size: 15px;
margin-left: 7px;
margin-top: 1px;
flex-grow: 1;
}
.window.edge>.titbar>.tabs>.tab>.clbtn{
border-radius: 4px;
display: block;
margin: 3px 5px 0 0;
width: 18px;
height: 18px;
}
.window.edge>.titbar>.tabs>.tab>.clbtn::before{
position: relative;
top: -3px;
left: 1px;
}
.window.edge>.titbar>.tabs>.tab>.clbtn:hover{
background: var(--hover);
}
.window.edge>.titbar>.tabs>.new{
border-radius: 7px;
margin: 3px 2px;
height: 25px;
width: 25px;
font-size: 20px;
text-align: center;
transition: 50ms;
}
.window.edge>.titbar>.tabs>.new::before{
position: relative;
top: -3px;
}
.window.edge>.titbar>.tabs>.new:hover{
background-color: var(--hover-half);
}
#win-edge{
display: flex;
flex-direction: column;
height: calc(100% - 35px);
}
#win-edge>.tool{
display: flex;
padding: 2px 5px;
}
#win-edge>.tool>.a{
font-size: 20px;
border-radius: 7px;
width: 30px;
height: 30px;
text-align: center;
transition: 50ms;
margin: 0 1px;
}
#win-edge>.tool>.a>.bi::before{
position: relative;
top: var(--top);
}
#win-edge>.tool>.a:hover{
background-color: var(--hover-half);
}
#win-edge>.tool>input{
background-color: var(--hover-half);
border-radius: 50px;
border: 1.5px solid transparent;
padding: 3px 5px 4px 8px;
outline: medium;
color: var(--text);
transition: 100ms,border 0s;
height: 30px;
margin: 0 2px;
}
#win-edge>.tool>input.url{
flex-grow: 1;
}
#win-edge>.tool>input.rename:not(.show){
width: 0;
padding: 0;
border: none;
}
#win-edge>.tool>input.rename.show{
width: 200px;
}
#win-edge>.tool>input:hover{
border-color: #7f7f7f7f;
}
#win-edge>.tool>input:focus{
border-color: var(--href);
}
#win-edge>iframe{
width: calc(100% - 4px);
flex-grow: 1;
margin: 2px;
border-radius: 10px;
--bg:var(--bg);
--text:var(--text);
display: none;
}
#win-edge>iframe.show{
display: block;
}
apps/style/explorer.css
+6
View File
@@ -218,6 +218,12 @@
height: 26px;
}
#win-explorer>.main>.content>.view>.item.file>img{
width: 20px;
height: 20px;
margin: 3px;
}
#win-explorer>.main>.content>.view>.item:hover{
background-color: var(--hover);
border: 1.5px solid #6f6f6f30;
apps/style/setting.css
+11 -6
View File
@@ -115,7 +115,6 @@
#win-setting>.page>.cnt {
overflow-y: scroll;
transform: translate(0, 50%) scale(0.8);
opacity: 0;
height: 0;
transition: transform 300ms cubic-bezier(0,0,0,1), opacity 300ms 50ms,height 0ms;
@@ -148,19 +147,17 @@
text-decoration: none;
display: flex;
padding: 10px 15px;
/* transition: 100ms; */
box-shadow: 2px 2px 3px var(--sd);
box-shadow: 2px 2px 5px var(--sd);
transition: transform 300ms cubic-bezier(0.14, 1.02, 0.17, 0.03);
justify-content: space-around;
}
.setting-list>a:hover {
text-decoration: none;
background-color: var(--hover);
background-color: var(--hover-half);
}
.setting-list>a:active {
transform: scale(0.98);
filter: opacity(0.75);
}
@@ -178,7 +175,15 @@
}
.setting-list>a.dp>.bi::before {
transition: 200ms;
transition: 150ms;
}
.setting-list>a.dp:active>.bi::before{
transform: scale(0.7);
}
.setting-list>a.dp.show:active>.bi::before{
transform: scale(0.7) rotate(-180deg);
}
.setting-list>a.dp.show>.bi::before {
bg-liv.svg
+1790
View File
File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

desktop.css
+172 -238
View File
@@ -176,6 +176,8 @@ body {
background-size: cover;
height: 100%;
font-size: 15.5px;
color: var(--text);
user-select: none;
}
.a {
@@ -202,11 +204,6 @@ hr {
background-color: #afafaf50;
}
body {
color: var(--text);
user-select: none;
}
* {
scroll-behavior: smooth;
}
@@ -259,13 +256,6 @@ list>a:active,
/* transition: transform 500ms cubic-bezier(0.24, 0.86, 0.36, 0.44) !important; */
}
#s-m-l>list>a,
#win-setting>.menu>list>a {
/* border: 2px solid #00000000; */
/* background-clip: padding-box, border-box;
background-origin: padding-box, border-box; */
}
#dock-box {
position: fixed;
bottom: 10px;
@@ -275,7 +265,6 @@ list>a:active,
width: 100%;
z-index: 100;
padding: 0 5px;
transition: 200ms;
}
.dock {
@@ -299,10 +288,10 @@ list>a:active,
padding-right: 3px;
}
/* .dock>.bi {
font-size: 28px;
margin-top: -8px;
} */
.dock.about:hover,
.dock.theme:hover {
filter: opacity(0.8) brightness(1.2);
}
.dock.about {
cursor: pointer;
@@ -332,7 +321,7 @@ list>a:active,
}
.dock.about:active {
transform: scale(0.9);
/* transform: scale(0.9); */
filter: opacity(0.6)!important;
}
@@ -486,10 +475,6 @@ list>a:active,
filter: opacity(0.6)!important;
}
.dock.date:hover {
filter: opacity(0.8) brightness(1.2);
}
.dock.date>.date {
margin-top: -8px;
}
@@ -529,10 +514,6 @@ list>a:active,
filter: opacity(0.6)!important;
}
.dock.theme:hover {
filter: opacity(0.8) brightness(1.2);
}
.dock.theme>.dark {
position: absolute;
height: 30px;
@@ -776,19 +757,22 @@ input-before {
overflow: hidden;
}
#s-m-r>.row1 {
display: flex;
transform: translate(0,50px) scale(0.9);
transition: 300ms cubic-bezier(0.4, 0.4, 0.4, 1);
transition-delay: 200ms;
#s-m-r>*{
opacity: 0;
transition: transform 200ms cubic-bezier(0,0,0,1), opacity 200ms 30ms;
transform: translate(0, 50px);
}
#start-menu.show>#s-m-r>.row1 {
#start-menu.show>#s-m-r>* {
transform: none;
opacity: 1;
}
#s-m-r>.row1 {
display: flex;
transition-delay: 200ms;
}
#s-m-r>.row1>.tool {
width: 200px;
padding: 5px 10px 0 0;
@@ -890,18 +874,10 @@ input-before {
border-radius: 10px;
background-color: var(--card);
box-shadow: 3px 3px 6px var(--sd);
transform: translate(0,50px) scale(0.9);
transition: 300ms cubic-bezier(0.6, 0.6, 0.4, 1);
transition-delay: 300ms;
opacity: 0;
border: 1.5px solid #6f6f6f30;
}
#start-menu.show>#s-m-r>.pinned {
transform: none;
opacity: 1;
}
#s-m-r>.pinned>.apps {
display: flex;
flex-wrap: wrap;
@@ -922,24 +898,14 @@ input-before {
#s-m-r>.tuijian {
padding: 10px 10px;
margin-right: 10px;
margin-left: 15px;
margin: 15px 10px 0 15px;
border-radius: 10px;
background-color: var(--card);
box-shadow: 3px 3px 6px var(--sd);
margin-top: 15px;
transform: translate(0,50px) scale(0.9);
transition: 300ms cubic-bezier(0.6, 0.6, 0.4, 1);
transition-delay: 450ms;
opacity: 0;
border: 1.5px solid #6f6f6f30;
}
#start-menu.show>#s-m-r>.tuijian {
transform: none;
opacity: 1;
}
#s-m-r>.tuijian>.apps {
display: flex;
flex-wrap: wrap;
@@ -970,7 +936,6 @@ input-before {
left: calc(50% - 50px);
background-color: var(--bggrey);
font-size: 80px;
transition: 200ms;
box-shadow: 3px 3px 6px var(--sd);
}
@@ -982,6 +947,123 @@ input-before {
height: 70px;
}
.more-btn {
background-image: linear-gradient(100deg, var(--theme-1), var(--theme-2));
color: #fff;
padding: 0;
border-radius: 5px;
font-size: 12px;
float: right;
padding: 4px 5px;
transition: 100ms;
outline: 0 solid var(--text);
}
.more-btn:hover {
filter: brightness(0.94);
outline-width: 2px;
outline-offset: 1px;
}
.more-btn>.bi {
font-size: 10px;
}
.sm-app {
width: 85px;
height: 80px;
border-radius: 10px;
text-align: center;
transition: 80ms;
padding: 0 3px;
color: #888;
cursor: inherit;
}
.sm-app.enable {
color: var(--text);
cursor: pointer;
}
.sm-app.enable:hover {
background-color: var(--hover);
}
.sm-app.enable>*:first-child {
filter: brightness(1);
}
.sm-app>*:first-child {
height: 34px;
width: 34px;
margin-top: 12px;
transition: 80ms;
filter: contrast(0.3) brightness(0.7);
text-shadow: 3px 3px 5px var(--sd);
}
.sm-app>*:last-child {
margin-top: -3px;
transition: 80ms;
font-size: 10px;
line-height: 13px;
}
.sm-app:hover {
background-color: unset;
}
.sm-app:active {
padding-top: 3px;
}
.sm-app:active>*:last-child {
margin-top: 0px;
}
.sm-app:active>*:first-child {
height: 28px;
width: 28px;
}
.sm-app.enable:active>*:first-child {
filter: brightness(0.8) opacity(0.8);
}
.tj-obj {
width: 50%;
height: 55px;
border-radius: 10px;
transition: 80ms;
padding: 0 3px;
display: flex;
padding: 10px 3px 10px 10px;
overflow: hidden;
}
.tj-obj>img {
height: 35px;
width: 35px;
transition: 200ms;
}
.tj-obj>div>*:first-child {
margin: 3px 0 2px 5px;
font-size: 15px;
line-height: 13px;
white-space: nowrap;
}
.tj-obj>div>*:last-child {
font-size: 10px;
line-height: 13px;
margin-left: 6px;
color: #7f7f7f;
}
.tj-obj:hover {
background-color: var(--hover);
}
#search-win {
display: none;
@@ -1033,13 +1115,9 @@ input-before {
text-align: center;
border-radius: 10px;
transition: 100ms;
cursor: pointer;
}
#search-win>.tab>a:hover {
background-color: var(--hover);
}
#search-win>.tab>a:hover,
#search-win>.tab>a.now {
background-color: var(--hover);
}
@@ -1072,7 +1150,6 @@ input-before {
#search-win>.ans>.list>list>a {
padding: 5px 5px 0px 10px;
display: flex;
/* transition: 70ms!important; */
}
#search-win>.ans>.list>list>a:active{
@@ -1104,7 +1181,6 @@ input-before {
border: 1.5px solid #6f6f6f30;
display: none;
overflow: auto;
/* height: 100%; */
margin: 2px 5px 5px 0;
}
@@ -1319,7 +1395,6 @@ input-before {
width: 100%;
height: 100%;
margin-top: -28px;
/* z-index: 0; */
}
@@ -1334,28 +1409,19 @@ input-before {
#widgets>.news>.content>.card {
border-radius: 10px;
box-shadow: 3px 3px 4px var(--sd);
transform: scale(0.97);
transition: 100ms;
transition: 10ms;
}
#widgets>.news>.content>.card:hover {
box-shadow: 4px 6px 7px var(--sd);
transform: none;
box-shadow: 1px 1px 7px var(--sd);
filter: brightness(0.95);
}
#widgets>.news>.content>.card>.tit {
font-size: 18px;
line-height: 1.2;
margin: 30px 0 0 10px;
transform: scale(0.96);
transition: 100ms;
text-shadow: 3px 3px 5px var(--sd);
}
#widgets>.news>.content>.card:hover>.tit {
transform: none;
text-shadow: none;
}
#widgets>.news>.content>.card>.a{
@@ -1467,25 +1533,17 @@ input-before {
height: 84px;
text-overflow: ellipsis;
border-radius: 5px;
transition: 20ms;
text-align: center;
margin: 8px 10px 2px 10px;
padding: 0 3px 3px 3px;
border: 1.5px solid transparent;
border-top: 2px solid transparent;
border-bottom: 1px solid transparent;
}
#desktop>div:hover {
border-color: var(--bd);
background-color: var(--hover-m);
#desktop>div:hover{
backdrop-filter: blur(15px) saturate(0.9) brightness(1.4);
}
#desktop>div:active{
background-color: var(--hover-m);
backdrop-filter: blur(5px) brightness(1.5);
border-color: var(--hr);
}
#desktop>div>img {
@@ -1507,6 +1565,15 @@ input-before {
margin-top: -6px;
}
#desktop>.choose{
position: fixed;
border: 2px solid var(--href);
/* border-image: linear-gradient(120deg, var(--theme-1), var(--theme-2)) 4; */
border-radius: 5px;
background-color: var(--hover-half);
display: block;
}
.input {
background-color: var(--bg70);
border-radius: 10px;
@@ -1517,12 +1584,7 @@ input-before {
outline: medium;
width: 100%;
color: var(--text);
transition: 200ms,background 0s;
}
.input:hover {
background-color: var(--bg50);
transition: 100ms,border 0s;
}
.input:focus {
@@ -1579,7 +1641,19 @@ input-before {
}
.button:active{
filter: brightness(1.2) blur(0.5px);
filter: brightness(1.2) opacity(0.8);
}
input.foc{
display: block;
height: 0;
width: 0;
opacity: 0;
padding: 0;
margin: 0;
border: none;
outline: none;
background: none;
}
#cm {
@@ -1621,9 +1695,8 @@ input-before {
display: block;
}
#cm>list>a {
padding: 4px 12px;
padding: 4.5px 12px;
margin: 0 0;
border-radius: 7px;
font-size: 15px;
@@ -1641,18 +1714,6 @@ input-before {
background-color: var(--hover-b);
}
#cm>.foc {
display: block;
height: 0;
width: 0;
opacity: 0;
padding: 0;
margin: 0;
border: none;
outline: none;
background: none;
}
#dp {
display: none;
position: absolute;
@@ -1679,11 +1740,11 @@ input-before {
}
#dp>list>a {
padding: 5px 8px;
margin: 2px 0;
padding: 4.5px 10px;
margin: 0;
transition: 80ms;
border-radius: 7px;
font-size: 15px;
font-size: 14px;
display: flex;
line-height: 19px;
}
@@ -1729,129 +1790,6 @@ input-before {
display: block;
}
.more-btn {
background-image: linear-gradient(100deg, var(--theme-1), var(--theme-2));
color: #fff;
padding: 0;
border-radius: 5px;
font-size: 12px;
float: right;
padding: 4px 5px;
transition: 100ms;
outline: 0 solid var(--text);
}
.more-btn:hover {
filter: brightness(0.94);
outline-width: 2px;
outline-offset: 1px;
}
.more-btn>.bi {
font-size: 10px;
}
.sm-app {
width: 85px;
height: 80px;
border-radius: 10px;
text-align: center;
transition: 80ms;
padding: 0 3px;
color: #888;
cursor: inherit;
}
.sm-app.enable {
color: var(--text);
cursor: pointer;
}
.sm-app.enable:hover {
background-color: var(--hover);
}
.sm-app.enable>*:first-child {
filter: brightness(1);
}
.sm-app>*:first-child {
height: 34px;
width: 34px;
margin-top: 12px;
transition: 80ms;
filter: contrast(0.3) brightness(0.7);
text-shadow: 3px 3px 5px var(--sd);
}
.sm-app>*:last-child {
margin-top: -3px;
transition: 80ms;
font-size: 10px;
line-height: 13px;
}
.sm-app:hover {
background-color: unset;
}
.sm-app:active {
padding-top: 3px;
}
.sm-app:active>*:last-child {
margin-top: 0px;
}
.sm-app:active>*:first-child {
height: 28px;
width: 28px;
}
.sm-app.enable:active>*:first-child {
filter: blur(1px);
}
.sm-app:active>*:first-child {
filter: blur(1px) contrast(0.3) brightness(0.7);
}
.tj-obj {
width: 50%;
height: 55px;
border-radius: 10px;
transition: 80ms;
padding: 0 3px;
display: flex;
padding: 10px 3px 10px 10px;
overflow: hidden;
}
.tj-obj>img {
height: 35px;
width: 35px;
transition: 200ms;
}
.tj-obj>div>*:first-child {
margin: 3px 0 2px 5px;
font-size: 15px;
line-height: 13px;
white-space: nowrap;
}
.tj-obj>div>*:last-child {
font-size: 10px;
line-height: 13px;
margin-left: 6px;
color: #7f7f7f;
}
.tj-obj:hover {
background-color: var(--hover);
}
list {
display: block;
padding-left: 0;
@@ -1867,15 +1805,10 @@ list>* {
position: relative;
display: block;
padding: 2px 20px;
/* transition: 50ms; */
cursor: pointer;
}
list>a{
border: 1.5px solid transparent;
border-top: 2px solid transparent;
border-bottom: 1px solid transparent;
transition: 80ms,transform 400ms cubic-bezier(0.14, 1.02, 0.17, 0.03),border 50ms 50ms!important;
transition: 80ms,transform 400ms cubic-bezier(0.14, 1.02, 0.17, 0.03);
}
@@ -1883,7 +1816,6 @@ list>a:hover {
color: var(--text);
background-color: var(--hover-half);
text-decoration: none;
border-color: var(--bd);
}
list>hr {
@@ -2043,7 +1975,7 @@ list>span.focs.cl{
top: calc(95%) !important;
left: 15% !important;
transform: scale(0.3) !important;
transition: cubic-bezier(0.9, 0, 0.1, 1) 200ms, top 200ms 100ms;
transition: cubic-bezier(0.9, 0, 0.1, 1) 200ms, top 200ms 100ms,backdrop-filter background-color 0s;
}
.window.show-begin {
@@ -2083,7 +2015,6 @@ list>span.focs.cl{
.window.calc {
height: 395px;
width: 262px;
}
.window.notepad-fonts {
@@ -2102,11 +2033,13 @@ list>span.focs.cl{
position: initial;
color: var(--text);
opacity: 0.5;
overflow: hidden;
}
.window>.titbar>p {
font-size: 16px;
margin-top: 5px;
flex-grow: 1;
}
.window>.titbar>.icon {
@@ -2116,7 +2049,8 @@ list>span.focs.cl{
}
.window>.titbar>div {
flex-grow: 1;
width: max-content;
min-width: max-content;
}
.window>.content {
desktop.html
+86 -85
View File
@@ -25,6 +25,7 @@
<link rel="stylesheet" href="apps/style/notepad.css">
<link rel="stylesheet" href="apps/style/terminal.css">
<link rel="stylesheet" href="apps/style/fonts.css">
<link rel="stylesheet" href="apps/style/edge.css">
<link rel="stylesheet" href="widgets.css">
<link rel="manifest" href="pwa/manifest.json">
<base target="_blank">
@@ -88,6 +89,8 @@
<img src="icon/notepad.png"><p>记事本</p></a>
<a onclick="openapp('terminal');hide_startmenu();">
<img src="icon/terminal.png"><p>终端</p></a>
<a onclick="openapp('edge');hide_startmenu();">
<img src="icon/edge.png"><p>Microsoft Edge</p></a>
<p class="text">其它</p>
<a><img src="icon/camera.png"><p>相机</p></a>
</list>
@@ -149,7 +152,8 @@
<a class="a sm-app enable" onclick="openapp('setting');hide_startmenu();" oncontextmenu="return showcm(event,'smapp',['setting','设置'])">
<img src="icon/setting.png"><p>设置 </p></a>
<a class="a sm-app"><img src="icon/store.png"><p>Microsoft Store</p></a>
<a class="a sm-app"><img src="icon/taskmanager.png"><p>任务管理器</p></a>
<a class="a sm-app enable" onclick="openapp('edge');hide_startmenu();" oncontextmenu="return showcm(event,'smapp',['edge','Microsoft Edge'])">
<img src="icon/edge.png"><p>Microsoft Edge</p></a>
<a class="a sm-app enable"><img src="icon/office.png"><p>这是Office</p></a>
<a class="a sm-app enable" onclick="openapp('terminal');hide_startmenu();" oncontextmenu="return showcm(event,'smapp',['terminal','终端'])">
<img src="icon/terminal.png"><p>终端</p></a>
@@ -217,9 +221,6 @@
</div>
</div>
</div>
<script>
// $('').add()
</script>
<div id="widgets">
<div class="widgets">
<div class="bar">
@@ -280,34 +281,34 @@
</div>
<div class="content">
<div class="card" style="grid-column: 1/6;grid-row: 1/3;color: #fff;background: var(--bgul);background-position:-20px -280px;background-size: 170%;">
<p class="tit" style="font-size: 22px;margin: 100px 0 0 180px;text-shadow: 0 0 8px #000;">Windows12 v4.2.0 发布</p>
<p class="tit" style="font-size: 20px;margin: 100px 0 0 180px;text-shadow: 0 0 8px #000;">Windows12 v5.0.0 发布</p>
<a class="a" style="margin: 5px 0 0 250px;font-size: 17px;color: #9dd0fb;text-shadow: 0 0 3px #000;" onclick="hide_widgets();
openapp('about');if($('.window.about').hasClass('min'))minwin('about');
$('#win-about>.about').removeClass('show');$('#win-about>.update').addClass('show');
$('#win-about>.update>div>details:first-child').attr('open','open')">详细信息 ></a>
</div>
<div class="card" style="grid-column: 4/6;grid-row: 7/9;background:url(img/win13.jpg) right;background-size: cover;">
<p class="tit" style="font-size: 19px;margin: 70px 0 0 10px;color: #fff;">Windows13 即将发布，官方透露: 将自带 Macos 子系统</p>
<p class="tit" style="margin: 70px 0 0 10px;color: #fff;">Windows13 即将发布，官方透露: 将自带 Macos 子系统</p>
<a class="a" style="margin: 5px 0 0 80px;font-size: 17px;color: #9dd0fb;text-shadow: 0 0 3px #000;">详细信息 ></a>
</div>
<div class="card" style="grid-column: 4/6;grid-row: 3/5;background:linear-gradient(#00000000,var(--bg) 70%),url(img/win11.jpg) center;background-size: cover;">
<p class="tit" style="font-size: 19px;margin: 100px 0 0 10px;">Windows11 将于下周停止支持</p>
<p class="tit" style="margin: 100px 0 0 10px;">Windows11 将于下周停止支持</p>
<a class="a" style="margin: 5px 0 0 80px;font-size: 17px;">详细信息 ></a>
</div>
<div class="card" style="grid-column: 1/3;grid-row: 5/7;background:linear-gradient(#00000000,#111 80%),url(img/corsiri.svg) bottom;background-size: 150%;">
<p class="tit" style="font-size: 19px;margin: 80px 0 0px 10px;color: #fff;">2029年,微软终重拾Cortana 微软员工透露:将与Siri整合</p>
<p class="tit" style="margin: 80px 0 0px 10px;color: #fff;">2029年,微软终重拾Cortana 微软员工透露:将与Siri整合</p>
<a class="a" style="margin: 0 0 0 80px;font-size: 17px;color: #9dd0fb;">详细信息 ></a>
</div>
<div class="card" style="grid-column: 1/4;grid-row: 7/9;background:linear-gradient(#00000000,#111 90%),url(img/wsm.png) left;background-size: 120%;">
<p class="tit" style="font-size: 19px;margin: 100px 0 0px 10px;color: #fff;">微软发布 Windows Subsystem for MocOS</p>
<p class="tit" style="margin: 100px 0 0px 10px;color: #fff;">微软发布 Windows Subsystem for MocOS</p>
<a class="a" style="margin: 0 0 0 170px;font-size: 17px;color: #9dd0fb;">详细信息 ></a>
</div>
<div class="card" style="grid-column: 3/6;grid-row: 5/7;background:linear-gradient(#00000000 0 30%,var(--bg) 70%),url(img/mc.jpg) bottom;background-size: cover;">
<p class="tit" style="font-size: 19px;margin: 100px 0 -20px 10px;">今日凌晨,Minecraft把代理权交给中国航天员谭景元,网易败下阵来了?</p>
<p class="tit" style="margin: 100px 0 -20px 10px;">今日凌晨,Minecraft把代理权交给中国航天员谭景元,网易败下阵来了?</p>
<a class="a" style="margin: 0 0 0 170px;font-size: 17px;">详细信息 ></a>
</div>
<div class="card" style="grid-column: 1/4;grid-row: 3/5;background:linear-gradient(#00000000 0 30%,var(--bg) 80%),url(img/yq.jpg) center;background-size: cover;">
<p class="tit" style="font-size: 19px;margin: 120px 0 -20px 10px;">中国宇航员谭景元昨天下午成功登月</p>
<p class="tit" style="margin: 120px 0 -20px 10px;">中国宇航员谭景元昨天下午成功登月</p>
<a class="a" style="margin: 0 0 0 150px;font-size: 17px;">详细信息 ></a>
</div>
<div class="card" style="grid-column: 1/3;grid-row: 9/11;background:#171b22;">
@@ -332,7 +333,6 @@
</div>
</div>
</div>
<div id="dock-box">
<!-- Dock(任务)栏 -->
<div class="dock dock-start">
@@ -494,6 +494,12 @@
<img src="icon/about.png">
<p>关于 Win12 网页版</p>
</div>
<div class="b" ondblclick="openapp('edge');" ontouchstart="openapp('edge');">
<img src="icon/edge.png">
<p>Microsoft Edge</p>
</div>
<span class="choose">
</span>
</div>
<div id="cm">
<input class="foc">
@@ -661,18 +667,18 @@
</div>
<div class="main">
<div class="tool">
<a class="a b t"><img src="apps/icons/explorer/tool-new.png">新建</a><div class="hr"></div>
<a class="a b"><img src="apps/icons/explorer/tool-cut.png"></a>
<a class="a b"><img src="apps/icons/explorer/tool-copy.png"></a>
<a class="a b"><img src="apps/icons/explorer/tool-paste.png"></a>
<a class="a b"><img src="apps/icons/explorer/tool-rename.png"></a><div class="hr"></div>
<a class="a b t"><img src="apps/icons/explorer/tool-sort.png">排序方式</a>
<a class="a b t"><img src="apps/icons/explorer/tool-view.png">布局</a>
<a class="a b t act"><img src="apps/icons/explorer/tool-new.png">新建</a><div class="hr"></div>
<a class="a b act"><img src="apps/icons/explorer/tool-cut.png"></a>
<a class="a b act"><img src="apps/icons/explorer/tool-copy.png"></a>
<a class="a b act"><img src="apps/icons/explorer/tool-paste.png"></a>
<a class="a b act"><img src="apps/icons/explorer/tool-rename.png"></a><div class="hr"></div>
<a class="a b t act"><img src="apps/icons/explorer/tool-sort.png">排序方式</a>
<a class="a b t act"><img src="apps/icons/explorer/tool-view.png">布局</a>
</div>
<div class="content" oncontextmenu="return showcm(event,'explorer.content',null);">
<div class="tool">
<a class="a btn btn-icon"><i class="bi bi-arrow-left"></i></a>
<a class="a btn btn-icon"><i class="bi bi-arrow-right"></i></a>
<a class="a btn btn-icon" style="filter: contrast(0.5);"><i class="bi bi-arrow-left"></i></a>
<a class="a btn btn-icon" style="filter: contrast(0.5);"><i class="bi bi-arrow-right"></i></a>
<a class="a btn btn-icon goback"><i class="bi bi-arrow-up"></i></a>
<p class="tit">此电脑</p>
<div class="search">
@@ -767,6 +773,17 @@
<div class="cnt update">
<h1 class="tit"><span></span>更新记录</h1>
<div style="margin-left: 20px;">
<details><summary><span>v5.0.0</span> 新增Edge</summary><p>
<strong>🎉🎉项目在Github上突破✨100✨stars✨啦！🎊🎈</strong><br>
&emsp;&emsp;-新增:Microsoft Edge应用(可以在Edge应用中提出反馈与建议，谢谢)<br>
&emsp;&emsp;-新增:桌面拖动选择框(没什么大用)<br>
&emsp;&emsp;-返璞归真:取消列表悬停效果<br>
&emsp;&emsp;-丰富:在文件资源管理器中添加了一些文件<br>
&emsp;&emsp;-精简:减小动画数量和幅度<br>
&emsp;&emsp;-修复:关于记事本的另存为问题<br>
&emsp;&emsp;-彩蛋:你发现动态壁纸了吗？<br>
&emsp;&emsp;-其它:细节优化和修复</p>
</details>
<details><summary><span>v4.3.0</span> 其实我想发布成5.0版的</summary><p>
<span>欢迎(尽量在issues中,当然也可以在下面版本中链接里)提出问题和建议</span><br>
&emsp;&emsp;-搜索菜单重新设计<br>
@@ -841,69 +858,6 @@
&emsp;&emsp;-更新记录仅显示最近的，优化速度<br>
&emsp;&emsp;-细节优化和修复</p>
</details>
<details><summary><span>v3.5.0</span> 窗口层级和焦点控制</summary>
<p>&emsp;&emsp;-增加了窗口层级的控制<br>
&emsp;&emsp;-非焦点窗口关闭模糊效果以提速<br>
&emsp;&emsp;-新增 @Planet-xu 提供的新闻<br>
&emsp;&emsp;-修复了下拉菜单停留的问题 @Samtjs<br>
&emsp;&emsp;-细节优化和修复</p>
</details>
<details><summary><span>v3.4.1</span> 移动端适配</summary>
<p>&emsp;&emsp;-适配了移动端的双(改成单击)<br>
&emsp;&emsp;-适配了移动端的拖动窗口<br>
&emsp;&emsp;-优化任务栏按钮点击效果<br>
&emsp;&emsp;-更改右键菜单样式<br>
&emsp;&emsp;-下拉菜单悬停展开<br>
&emsp;&emsp;-细节优化和修复</p>
<i>感谢 @User782Tec</i>
</details>
<details><summary><span>v3.4.0</span> 动画优化</summary>
<p>&emsp;&emsp;-别问我为什么动画占一个新版<br>
&emsp;&emsp;-基本上所有动画都进行了更新优化<br>
&emsp;&emsp;-修复了上个版本没删完的标题栏问题<br>
&emsp;&emsp;-修改了开始菜单的图标<br>
&emsp;&emsp;-细节优化和修复</p>
</details>
<details><summary><span>v3.3.0</span> 增加计算器小组件</summary>
<p>&emsp;&emsp;-增加了计算器小组件<br>
&emsp;&emsp;-修复了小组件新闻图片无法加载的问题<br>
&emsp;&emsp;-移除了上一个版本的新窗口标题栏<br>
&emsp;&emsp;-在一些图标按钮上悬停鼠标显示提示<br>
&emsp;&emsp;-去除了所有链接的左下角链接提示<br>
&emsp;&emsp;-细节优化和修复</p>
</details>
<details><summary><span>v3.2.0</span> 增加小组件菜单</summary>
<p>&emsp;&emsp;-增加了小组件(资讯和兴趣)菜单<br>
&emsp;&emsp;-小组件菜单中的新闻内容<br>
&emsp;&emsp;-小组件按钮动画效果<br>
&emsp;&emsp;-应用窗口标题栏样式新增<br>
&emsp;&emsp;-对计算器的计算代码的精简<br>
&emsp;&emsp;-细节优化和修复</p>
</details>
<details><summary><span>v3.1.0</span> 增加文件浏览功能，一些新功能</summary>
<p>&emsp;&emsp;-文件资源管理器浏览功能<br>
&emsp;&emsp;-对PWA更新的优化<br>
&emsp;&emsp;-文件资源管理器右键菜单<br>
&emsp;&emsp;-增加应用启动的加载动画<br>
&emsp;&emsp;-增加应用启动初始化<br>
&emsp;&emsp;-记事本新增"编辑"菜单<br>
&emsp;&emsp;-下拉菜单整体优化<br>
&emsp;&emsp;-右键菜单优化<br>
&emsp;&emsp;-在输入框中允许浏览器的右键菜单<br>
&emsp;&emsp;-双击窗口标题栏最大化<br>
&emsp;&emsp;-细节优化和修复</p>
</details>
<details><summary><span>v3.0.0</span> 桌面图标、记事本、可安装到电脑</summary>
<p>&emsp;&emsp;-可以在Edge、Chrome等主流浏览器中将Win12安装为pwa应用¹<br>
&emsp;&emsp;-新增桌面图标，并增加桌面右键菜单"刷新"功能<br>
&emsp;&emsp;-可以将开始菜单应用右键添加到桌面<br>
&emsp;&emsp;-新增"记事本"应用<br>
&emsp;&emsp;-新的深色模式切换按钮<br>
&emsp;&emsp;-改进了窗口的外观<br>
&emsp;&emsp;-细节优化和修复<br>
<i>1: 正常会有安装的提示，会在链接栏右上角，安装后可离线使用，有网会自动更新。感谢 @dzc120223 的建议</i>
</p>
</details>
</div>
<a class="jump" win12_title="https://github.com/tjy-gitnub/win12/blob/main/update.md" onclick="window.open('https://github.com/tjy-gitnub/win12/blob/main/update.md','_blank')" style="text-align: center;display: block;margin-top: 5px;">更多</a>
</div>
@@ -931,7 +885,7 @@
<div class="text-box" contenteditable="true" spellcheck="false">
<p>Type here...</p>
</div>
<a href="" download="未命名.txt" style="opacity: 0;" class="save">另存为</a>
<a href="" download="未命名.html" style="opacity: 0;" class="save">另存为</a>
</div>
</div>
<div class="window notepad-fonts" onmousedown="focwin('notepad-fonts')" ontouchstart="focwin('notepad-fonts')">
@@ -1042,6 +996,53 @@
C:\Windows\System32> <input type="text" oninput="setTimeout(() => {$('#win-terminal>pre')[0].innerHTML+=this.outerHTML;$('#win-terminal>pre>input').focus()}, 0);$('#win-terminal>pre')[0].innerText+=$(this).val();"></pre>
</div>
</div>
<div class="window edge" onmousedown="focwin('edge')" ontouchstart="focwin('edge')">
<div class="titbar" oncontextmenu="return showcm(event,'titbar','edge')" ondblclick="maxwin('edge')">
<img src="icon/edge.png" class="icon"><p style="display: none;">Microsoft Edge</p>
<div class="tabs">
<div class="tab">
<p>新建标签页</p>
<span class="clbtn bi bi-x"></span>
</div>
<a class="new bi bi-plus" onclick="apps.edge.newtab();"></a>
</div>
<div>
<a class="a wbtg red" onclick="hidewin('edge')"><i class="bi bi-x-lg"></i></a>
<a class="a wbtg max" onclick="maxwin('edge')"><i class="bi bi-app"></i></a>
<a class="a wbtg" onclick="minwin('edge')"><i class="bi bi-dash-lg"></i></a>
<a class="a wbtg" onclick="apps.edge.newtab();apps.edge.goto('https://forms.office.com/Pages/ResponsePage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAAAAAAAAO__SDw7SZUMlJQMUYzMDVOMlQ2MFdQOUpQQlQ2S1hTSi4u');apps.edge.rename('反馈')" win12_title="反馈"><i class="bi bi-chat-dots"></i></a>
</div>
</div>
<div class="loadback">
<img src="icon/edge.png" class="icon">
</div>
<div class="content" id="win-edge">
<div class="tool">
<a class="a" style="filter: contrast(0.2);">
<i class="bi bi-arrow-left-short" style="font-size: 25px;--top:-5px;"></i>
</a>
<a class="a" style="filter: contrast(0.2);">
<i class="bi bi-arrow-right-short" style="font-size: 25px;--top:-5px;"></i>
</a>
<a class="a" onclick="$('#win-edge>iframe.show').attr('src',$('#win-edge>iframe.show').attr('src'))">
<i class="bi bi-arrow-clockwise"></i>
</a>
<input type="text" onkeyup="if(event.keyCode==13){apps.edge.goto($(this).val())}" placeholder="输入网址" class="url">
<input type="text" onkeyup="if(event.keyCode==13){apps.edge.rename($(this).val())}" placeholder="重命名" class="rename">
<a class="a">
<i class="bi bi-info-circle" win12_title="浏览器只能访问允许嵌套的网站。由于规则限制无法获取网页标题，请右键标签页手动命名"></i>
</a>
<a class="a" style="filter: contrast(0.2);">
<i class="bi bi-star"></i>
</a>
<a class="a" style="filter: contrast(0.2);">
<i class="bi bi-code-slash"></i>
</a>
</div>
<iframe src="" frameborder="0" class="0 show">
</iframe>
</div>
</div>
<div class="msg update" oncontextmenu="return showcm(event,'msgupdate',null)">
<div class="main" onclick="openapp('about');if($('.window.about').hasClass('min'))minwin('about');
$('#win-about>.about').removeClass('show');$('#win-about>.update').addClass('show');
desktop.js
+158 -47
View File
@@ -38,6 +38,7 @@ $('html').on('contextmenu', () => {
});
function stop(e) {
e.stopPropagation();
return false;
}
$('input,textarea,*[contenteditable=true]').on('contextmenu', (e) => {
stop(e);
@@ -136,6 +137,14 @@ let cms = {
(arg) => {
return ['<i class="bi bi-folder2-open"></i> 打开', `apps.explorer.goto('${arg}')`];
}
],
'edge.tab': [
arg => {
return ['<i class="bi bi-pencil-square"></i> 命名标签页', `apps.edge.c_rename(${arg})`];
},
arg => {
return ['<i class="bi bi-x"></i> 关闭标签页', `apps.edge.close(${arg})`];
}
]
}
function showcm(e, cl, arg) {
@@ -202,7 +211,6 @@ function showcm(e, cl, arg) {
$('#cm').css('left', $('html')[0].offsetWidth - $('#cm')[0].offsetWidth - 5);
}
}, 200);
return false;
}
$('#cm>.foc').blur(() => {
let x = event.target.parentNode;
@@ -216,7 +224,7 @@ dps = {
'notepad.file': [
['<i class="bi bi-file-earmark-plus"></i> 新建', `hidedp(true);$('#win-notepad>.text-box').addClass('down');
setTimeout(()=>{$('#win-notepad>.text-box').val('');$('#win-notepad>.text-box').removeClass('down')},200);`],
['<i class="bi bi-box-arrow-right"></i> 另存为', `hidedp(true);$('#win-notepad>.save').attr('href', window.URL.createObjectURL(new Blob([$('#win-notepad>.text-box').val()])));
['<i class="bi bi-box-arrow-right"></i> 另存为', `hidedp(true);$('#win-notepad>.save').attr('href', window.URL.createObjectURL(new Blob([$('#win-notepad>.text-box').html()])));
$('#win-notepad>.save')[0].click();`],
'<hr>',
['<i class="bi bi-x"></i> 退出', `isOnDp=false;hidedp(true);hidewin('notepad')`],
@@ -301,7 +309,6 @@ function hidedp(force = false) {
}, 200);
}, 100);
}
// 悬停提示
document.querySelectorAll('*[win12_title]:not(.notip)').forEach(a => {
a.addEventListener('mouseenter', showdescp);
@@ -377,11 +384,11 @@ let apps = {
border-radius: 10px;}
#win-explorer>.main>.content>.view>.group>.item>div>.info{color: #959595;font-size: 14px;}</style>
<p class="class"><img src="apps/icons/explorer/disk.png"> 设备和驱动器</p><div class="group">
<a class="a item act" ondblclick="apps.explorer.goto('C:')" ontouchend="apps.explorer.goto('C:')" oncontextmenu="stop(event);return showcm(event,'explorer.folder','C:')">
<a class="a item act" ondblclick="apps.explorer.goto('C:')" ontouchend="apps.explorer.goto('C:')" oncontextmenu="showcm(event,'explorer.folder','C:');return stop(event);">
<img src="apps/icons/explorer/diskwin.png"><div><p class="name">本地磁盘 (C:)</p>
<div class="bar"><div class="content" style="width: 88%;"></div>
</div><p class="info">32.6 GB 可用, 共 143 GB</p></div></a><a class="a item act" ondblclick="apps.explorer.goto('D:')" ontouchend="apps.explorer.goto('D:')"
oncontextmenu="stop(event);return showcm(event,'explorer.folder','D:')">
oncontextmenu="showcm(event,'explorer.folder','D:');return stop(event);">
<img src="apps/icons/explorer/disk.png"><div><p class="name">本地磁盘 (D:)</p><div class="bar"><div class="content" style="width: 15%;"></div>
</div><p class="info">185.3 GB 可用, 共 216 GB</p></div></a></div>`;
$('#win-explorer>.main>.content>.tool>.tit')[0].innerHTML = '此电脑';
@@ -391,16 +398,22 @@ let apps = {
pathl = path.split('/');
let tmp = apps.explorer.path;
pathl.forEach(name => {
tmp = tmp[name];
tmp = tmp['folder'][name];
});
if (tmp == null) {
$('#win-explorer>.main>.content>.view')[0].innerHTML = '<p class="info">此文件夹为空。</p>';
} else {
let ht = '';
for (folder in tmp) {
ht += `<a class="a item act" ondblclick="apps.explorer.goto('${path}/${folder}')" ontouchend="apps.explorer.goto('${path}/${folder}')" oncontextmenu="stop(event);return showcm(event,'explorer.folder','${path}/${folder}')">
for (folder in tmp['folder']) {
ht += `<a class="a item act" ondblclick="apps.explorer.goto('${path}/${folder}')" ontouchend="apps.explorer.goto('${path}/${folder}')" oncontextmenu="showcm(event,'explorer.folder','${path}/${folder}');return stop(event);">
<img src="apps/icons/explorer/folder.png">${folder}</a>`;
}
if(tmp['file']){
tmp['file'].forEach(file=>{
ht += `<a class="a item act file" ondblclick="${file['command']}" ontouchend="${file['command']}" oncontextmenu="return stop(event);">
<img src="${file['ico']}">${file['name']}</a>`;
});
}
$('#win-explorer>.main>.content>.view')[0].innerHTML = ht;
}
if (pathl.length == 1) {
@@ -411,22 +424,53 @@ let apps = {
$('#win-explorer>.main>.content>.tool>.tit')[0].innerHTML = path;
},
path: {
'C:': {
'Program Files': {
'WindowsApps': null, 'Microsoft': null,
},
'Windows': {
'Boot': null, 'System': null, 'System32': null
},
'用户': {
'Administrator': {
'文档': { 'IISExpress': null, 'PowerToys': null }, '图片': { '本机照片': null, '屏幕截图': null },
'AppData': null, '音乐': { '录音机': null }
folder: {
'C:': {
folder: {
'Program Files': {
folder: { 'WindowsApps': null, 'Microsoft': null },
file: [
{ name: 'about.exe', ico: 'icon/about.png', command: "openapp('about')" },
{ name: 'setting.exe', ico: 'icon/setting.png', command: "openapp('setting')" },
]
},
'Windows': {
folder: { 'Boot': null, 'System': null, 'System32': null },
file: [
{ name: 'notepad.exe', ico: 'icon/notepad.png', command: "openapp('notepad')" },
]
},
'用户': {
folder: {
'Administrator': {
folder: {
'文档': {
folder: { 'IISExpress': null, 'PowerToys': null },
file: [
{ name: '瓶盖介绍.doc', ico: 'icon/files/word.png', command: '' },
{ name: '瓶盖质量统计分析.xlsx', ico: 'icon/files/excel.png', command: '' },
]
}, '图片': {
folder: { '本机照片': null, '屏幕截图': null },
file: [
{ name: '瓶盖构造图.png', ico: 'icon/files/img.png', command: '' },
{ name: '可口可乐瓶盖.jpg', ico: 'icon/files/img.png', command: '' },
]
},
'AppData': null, '音乐': { folder: { '录音机': null } }
}
}
}
}
}
},
'D:': {
folder:{'Microsoft': null},
file:[
{ name: '瓶盖结构说明.docx', ico: 'icon/files/word.png', command: '' },
{ name: '可口可乐瓶盖历史.pptx', ico: 'icon/files/ppt.png', command: '' },
]
}
},
'D:': {
'Microsoft': null,
}
}
},
@@ -457,7 +501,7 @@ let apps = {
init: () => {
$('#win-terminal>pre').html(`Micrsotft Windosw [版本 12.0.39035.7324]
(c) Micrsotft Corparotoin。保所留有权利。
一个摆设，后续会完善。
一个摆设，后续不会完善。
C:\Windows\System32> <input type="text" oninput="setTimeout(() => {$('#win-terminal>pre')[0].innerHTML+=this.outerHTML;$('#win-terminal>pre>input').focus()}, 0);$('#win-terminal>pre')[0].innerText+=$(this).val();">`)
}
@@ -474,10 +518,8 @@ C:\Windows\System32> <input type="text" oninput="setTimeout(() => {$('#win-termi
search: le => {
if (le > 0) {
$('#search-win>.ans>.list>list').html(
`<a class="a" onclick="apps.search.showdetail(${le % 8})"><i class="bi bi-file-earmark-${
apps.search.rand[le % 8].bi}"></i> ${apps.search.rand[le % 8].name
}</a><a class="a" onclick="apps.search.showdetail(${(le + 3) % 8})"><i class="bi bi-file-earmark-${
apps.search.rand[(le + 3) % 8].bi}"></i> ${apps.search.rand[(le + 3) % 8].name}</a>`);
`<a class="a" onclick="apps.search.showdetail(${le % 8})"><i class="bi bi-file-earmark-${apps.search.rand[le % 8].bi}"></i> ${apps.search.rand[le % 8].name
}</a><a class="a" onclick="apps.search.showdetail(${(le + 3) % 8})"><i class="bi bi-file-earmark-${apps.search.rand[(le + 3) % 8].bi}"></i> ${apps.search.rand[(le + 3) % 8].name}</a>`);
apps.search.showdetail(le % 8);
} else {
$('#search-win>.ans>.list>list').html(
@@ -504,10 +546,72 @@ C:\Windows\System32> <input type="text" oninput="setTimeout(() => {$('#win-termi
$('#search-win>.ans>.view>.fname>.name').text(inf.name);
$('#search-win>.ans>.view>.fname>.type').text(inf.ty);
}
}
},
edge: {
init: () => {
$('#win-edge>iframe').remove();
apps.edge.tabs = [];
apps.edge.len = 0;
apps.edge.newtab();
},
tabs: [],
now: null,
len: 0,
newtab: () => {
apps.edge.tabs.push([apps.edge.len++, '新建标签页']);
$('#win-edge').append(`<iframe src="" frameborder="0" class="${apps.edge.tabs[apps.edge.tabs.length - 1][0]}">`)
apps.edge.settabs();
apps.edge.tab(apps.edge.tabs.length - 1);
$('#win-edge>.tool>input.url').focus()
},
settabs: () => {
$('.window.edge>.titbar>.tabs')[0].innerHTML = '';
for (let i = 0; i < apps.edge.tabs.length; i++) {
const t = apps.edge.tabs[i];
$('.window.edge>.titbar>.tabs')[0].innerHTML += `<div class="tab ${t[0]}" onclick="apps.edge.tab(${i})" oncontextmenu="showcm(event,'edge.tab',${i});stop(event);return false"><p>${t[1]}</p><span class="clbtn bi bi-x" onclick="apps.edge.close(${i})"></span></div>`;
}
$('.window.edge>.titbar>.tabs')[0].innerHTML += '<a class="new bi bi-plus" onclick="apps.edge.newtab();"></a>';
// $('.window.edge>.titbar>.tabs>.tab.'+apps.edge.tabs[apps.edge.now][0]).addClass('show');
},
close: c => {
$('#win-edge>iframe.' + apps.edge.tabs[c][0]).remove();
apps.edge.tabs.splice(c, 1);
apps.edge.settabs();
apps.edge.tab(apps.edge.tabs.length - 1);
},
tab: c => {
console.log(c, apps.edge.tabs[c][0])
$('#win-edge>iframe.show').removeClass('show');
$('#win-edge>iframe.' + apps.edge.tabs[c][0]).addClass('show');
$('#win-edge>.tool>input.url').val($('#win-edge>iframe.' + apps.edge.tabs[c][0]).attr('src'));
$('#win-edge>.tool>input.rename').removeClass('show');
apps.edge.now = c;
$('.window.edge>.titbar>.tabs>.tab.show').removeClass('show');
$('.window.edge>.titbar>.tabs>.tab.' + apps.edge.tabs[c][0]).addClass('show');
},
c_rename: c => {
apps.edge.tab(c);
$('#win-edge>.tool>input.rename').val(apps.edge.tabs[apps.edge.now][1]);
$('#win-edge>.tool>input.rename').addClass('show');
setTimeout(() => {
$('#win-edge>.tool>input.rename').focus();
}, 300);
},
rename: n => {
apps.edge.tabs[apps.edge.now][1] = n;
apps.edge.settabs();
apps.edge.tab(apps.edge.now);
},
goto: u => {
if (!/^https?:\/\//.test(u)) {
u = 'http://' + u;
}
$('#win-edge>iframe.show').attr('src', u);
apps.edge.rename(u);
}
},
}
// 小组件
let widgets = {
widgets: {
@@ -527,8 +631,6 @@ let widgets = {
}
}
}
// 日期、时间
let da = new Date();
let date = `星期${['日', '一', '二', '三', '四', '五', '六'][da.getDay()]}, ${da.getFullYear()}年${(da.getMonth() + 1).toString().padStart(2, '0')}月${da.getDate().toString().padStart(2, '0')}日`
@@ -559,6 +661,10 @@ for (let i = 1; i <= daysum; i++) {
}
function openapp(name) {
if ($('#taskbar>.' + name).length != 0) {
if ($('.window.' + name).hasClass('min')) {
minwin(name);
}
focwin(name);
return;
}
$('.window.' + name).addClass('load');
@@ -705,6 +811,26 @@ function hide_widgets() {
$('#widgets-btn').removeClass('show');
setTimeout(() => { $('#widgets').removeClass('show-begin'); }, 200);
}
// 选择框
let chstX, chstY;
function ch(e) {
$('#desktop>.choose').css('left', Math.min(chstX, e.clientX));
$('#desktop>.choose').css('width', Math.abs(e.clientX - chstX));
$('#desktop>.choose').css('top', Math.min(chstY, e.clientY));
$('#desktop>.choose').css('height', Math.abs(e.clientY - chstY));
}
$('#desktop')[0].addEventListener('mousedown', e => {
chstX = e.clientX;
chstY = e.clientY;
this.onmousemove = ch;
})
$('#desktop')[0].addEventListener('mouseup', e => {
this.onmousemove = null;
$('#desktop>.choose').css('left', 0);
$('#desktop>.choose').css('top', 0);
$('#desktop>.choose').css('width', 0);
$('#desktop>.choose').css('height', 0);
})
// 主题
function toggletheme() {
$('.dock.theme').toggleClass('dk');
@@ -852,7 +978,6 @@ page.addEventListener('touchend', () => {
fil = false;
}
});
// 记事本选择字体
const sizes = {
'初号': '56',
@@ -968,7 +1093,6 @@ function preview() {
$('#win-notepad-font>.preview>.preview-box').attr('style', `font-family: ${typeinput.value} !important; font-size: ${fontsize}px !important;${fontstyle}`);
}
// 启动
let updated = false;
document.getElementsByTagName('body')[0].onload = function nupd() {
@@ -980,18 +1104,14 @@ document.getElementsByTagName('body')[0].onload = function nupd() {
}
};
// PWA 应用
navigator.serviceWorker.register('sw.js', { updateViaCache: 'none', scope: './' });
navigator.serviceWorker.controller.postMessage({
head: 'is_update'
});
navigator.serviceWorker.controller.postMessage({
head: 'get_userdata'
});
navigator.serviceWorker.addEventListener('message', function (e) {
if (e.data.head == 'update') {
updated = true;
@@ -1012,13 +1132,4 @@ function setData(k, v) {
key: k,
value: v
});
}
// 清除cookie
if (document.cookie != '') {
document.cookie = 'version=0.0.0;expires=Thu, 01 Jan 1970 00:00:00 UTC;';
$('.msg.update>.main>.tit').html('<i class="bi bi-stars" style="background-image: linear-gradient(100deg, var(--theme-1), var(--theme-2));-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-shadow:3px 3px 5px var(--sd);filter:saturate(200%) brightness(0.9);"></i> ' + $('#win-about>.cnt.update>div>details:first-child>summary').text());
$('.msg.update>.main>.cont').html($('#win-about>.cnt.update>div>details:first-child>p').html());
$('#loadbackupdate').css('display', 'block');
updated = true;
}
icon/edge.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

icon/taskmanager.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

sw.js
+1 -1
View File
@@ -1,4 +1,4 @@
// v4.3.0
// v5.0.0
let userdata={
'theme':'light',
'color1':'#ad6eca',
update.md
+64 -1
View File
@@ -1,5 +1,68 @@
# 更新记录
## v1.0.0~v2.3.1
## v1.0.0~v3.5.0
<details><summary><span>v3.5.0</span> 窗口层级和焦点控制</summary>
<p>&emsp;&emsp;-增加了窗口层级的控制<br>
&emsp;&emsp;-非焦点窗口关闭模糊效果以提速<br>
&emsp;&emsp;-新增 @Planet-xu 提供的新闻<br>
&emsp;&emsp;-修复了下拉菜单停留的问题 @Samtjs<br>
&emsp;&emsp;-细节优化和修复</p>
</details>
<details><summary><span>v3.4.1</span> 移动端适配</summary>
<p>&emsp;&emsp;-适配了移动端的双(改成单击)<br>
&emsp;&emsp;-适配了移动端的拖动窗口<br>
&emsp;&emsp;-优化任务栏按钮点击效果<br>
&emsp;&emsp;-更改右键菜单样式<br>
&emsp;&emsp;-下拉菜单悬停展开<br>
&emsp;&emsp;-细节优化和修复</p>
<i>感谢 @User782Tec</i>
</details>
<details><summary><span>v3.4.0</span> 动画优化</summary>
<p>&emsp;&emsp;-别问我为什么动画占一个新版<br>
&emsp;&emsp;-基本上所有动画都进行了更新优化<br>
&emsp;&emsp;-修复了上个版本没删完的标题栏问题<br>
&emsp;&emsp;-修改了开始菜单的图标<br>
&emsp;&emsp;-细节优化和修复</p>
</details>
<details><summary><span>v3.3.0</span> 增加计算器小组件</summary>
<p>&emsp;&emsp;-增加了计算器小组件<br>
&emsp;&emsp;-修复了小组件新闻图片无法加载的问题<br>
&emsp;&emsp;-移除了上一个版本的新窗口标题栏<br>
&emsp;&emsp;-在一些图标按钮上悬停鼠标显示提示<br>
&emsp;&emsp;-去除了所有链接的左下角链接提示<br>
&emsp;&emsp;-细节优化和修复</p>
</details>
<details><summary><span>v3.2.0</span> 增加小组件菜单</summary>
<p>&emsp;&emsp;-增加了小组件(资讯和兴趣)菜单<br>
&emsp;&emsp;-小组件菜单中的新闻内容<br>
&emsp;&emsp;-小组件按钮动画效果<br>
&emsp;&emsp;-应用窗口标题栏样式新增<br>
&emsp;&emsp;-对计算器的计算代码的精简<br>
&emsp;&emsp;-细节优化和修复</p>
</details>
<details><summary><span>v3.1.0</span> 增加文件浏览功能，一些新功能</summary>
<p>&emsp;&emsp;-文件资源管理器浏览功能<br>
&emsp;&emsp;-对PWA更新的优化<br>
&emsp;&emsp;-文件资源管理器右键菜单<br>
&emsp;&emsp;-增加应用启动的加载动画<br>
&emsp;&emsp;-增加应用启动初始化<br>
&emsp;&emsp;-记事本新增"编辑"菜单<br>
&emsp;&emsp;-下拉菜单整体优化<br>
&emsp;&emsp;-右键菜单优化<br>
&emsp;&emsp;-在输入框中允许浏览器的右键菜单<br>
&emsp;&emsp;-双击窗口标题栏最大化<br>
&emsp;&emsp;-细节优化和修复</p>
</details>
<details><summary><span>v3.0.0</span> 桌面图标、记事本、可安装到电脑</summary>
<p>&emsp;&emsp;-可以在Edge、Chrome等主流浏览器中将Win12安装为pwa应用¹<br>
&emsp;&emsp;-新增桌面图标，并增加桌面右键菜单"刷新"功能<br>
&emsp;&emsp;-可以将开始菜单应用右键添加到桌面<br>
&emsp;&emsp;-新增"记事本"应用<br>
&emsp;&emsp;-新的深色模式切换按钮<br>
&emsp;&emsp;-改进了窗口的外观<br>
&emsp;&emsp;-细节优化和修复<br>
<i>1: 正常会有安装的提示，会在链接栏右上角，安装后可离线使用，有网会自动更新。感谢 @dzc120223 的建议</i>
</p>
</details>
<details><summary><span>v2.3.1</span> bug修复、外观优化</summary>
<p>&emsp;&emsp;-修复了拖动窗口图标触发拖拽事件的错误<br>
&emsp;&emsp;-修复了其它拖拽图片的错误<br>