2587 lines
98 KiB
HTML
2587 lines
98 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>NEON-OS | 赛博朋克未来操作系统</title>
|
||
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Roboto+Mono:wght@300;400;500&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
:root {
|
||
--neon-pink: #ff2a6d;
|
||
--neon-blue: #05d9e8;
|
||
--neon-purple: #d100d1;
|
||
--neon-cyan: #00ff9f;
|
||
--dark-bg: #0d0d16;
|
||
--glass-bg: rgba(13, 13, 22, 0.7);
|
||
--glass-border: rgba(5, 217, 232, 0.3);
|
||
--scan-line: rgba(0, 255, 159, 0.05);
|
||
--grid-color: rgba(255, 42, 109, 0.1);
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
user-select: none;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Roboto Mono', monospace;
|
||
background-color: var(--dark-bg);
|
||
color: var(--neon-blue);
|
||
overflow: hidden;
|
||
height: 100vh;
|
||
width: 100vw;
|
||
position: relative;
|
||
}
|
||
|
||
/* 桌面背景 */
|
||
.desktop-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background:
|
||
linear-gradient(rgba(13, 13, 22, 0.9), rgba(13, 13, 22, 0.7)),
|
||
repeating-linear-gradient(0deg, transparent, transparent 2px, var(--grid-color) 2px, var(--grid-color) 3px),
|
||
repeating-linear-gradient(90deg, transparent, transparent 2px, var(--grid-color) 2px, var(--grid-color) 3px);
|
||
z-index: -2;
|
||
}
|
||
|
||
.scan-lines {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(to bottom, transparent 50%, var(--scan-line) 51%);
|
||
background-size: 100% 4px;
|
||
z-index: -1;
|
||
animation: scanline 8s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
|
||
@keyframes scanline {
|
||
0% { background-position: 0 0; }
|
||
100% { background-position: 0 100%; }
|
||
}
|
||
|
||
/* 开机动画 */
|
||
#boot-screen {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: var(--dark-bg);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 10000;
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
|
||
.boot-logo {
|
||
font-family: 'Orbitron', sans-serif;
|
||
font-size: 3rem;
|
||
font-weight: 900;
|
||
color: var(--neon-pink);
|
||
text-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink), 0 0 40px var(--neon-pink);
|
||
margin-bottom: 20px;
|
||
animation: flicker 2s infinite;
|
||
}
|
||
|
||
.boot-text {
|
||
color: var(--neon-cyan);
|
||
font-size: 0.9rem;
|
||
letter-spacing: 2px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.boot-progress {
|
||
width: 300px;
|
||
height: 4px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
margin-top: 30px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.boot-progress-bar {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 0%;
|
||
background: var(--neon-blue);
|
||
box-shadow: 0 0 10px var(--neon-blue);
|
||
animation: bootProgress 3s ease forwards;
|
||
}
|
||
|
||
@keyframes bootProgress {
|
||
to { width: 100%; }
|
||
}
|
||
|
||
@keyframes flicker {
|
||
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
|
||
20%, 24%, 55% { opacity: 0.4; }
|
||
}
|
||
|
||
/* 锁屏界面 */
|
||
#lock-screen {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(13, 13, 22, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
display: none;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 9000;
|
||
}
|
||
|
||
.lock-Time {
|
||
font-family: 'Orbitron', sans-serif;
|
||
font-size: 5rem;
|
||
color: var(--neon-pink);
|
||
text-shadow: 0 0 20px var(--neon-pink);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.lock-Date {
|
||
font-size: 1.5rem;
|
||
color: var(--neon-cyan);
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.lock-input {
|
||
background: rgba(5, 217, 232, 0.1);
|
||
border: 1px solid var(--neon-blue);
|
||
color: var(--neon-blue);
|
||
padding: 12px 20px;
|
||
font-family: 'Roboto Mono', monospace;
|
||
font-size: 1rem;
|
||
width: 300px;
|
||
text-align: center;
|
||
outline: none;
|
||
transition: all 0.3s;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.lock-input:focus {
|
||
box-shadow: 0 0 15px var(--neon-blue);
|
||
background: rgba(5, 217, 232, 0.2);
|
||
}
|
||
|
||
.lock-buttons {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
gap: 15px;
|
||
}
|
||
|
||
.lock-btn {
|
||
padding: 10px 20px;
|
||
background: rgba(5, 217, 232, 0.1);
|
||
border: 1px solid var(--neon-blue);
|
||
color: var(--neon-blue);
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
transition: all 0.2s;
|
||
font-family: 'Roboto Mono', monospace;
|
||
}
|
||
|
||
.lock-btn:hover {
|
||
background: var(--neon-blue);
|
||
color: var(--dark-bg);
|
||
box-shadow: 0 0 15px var(--neon-blue);
|
||
}
|
||
|
||
.lock-hint {
|
||
margin-top: 15px;
|
||
color: var(--neon-purple);
|
||
font-size: 0.8rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 桌面 - 修复显示问题 */
|
||
#desktop {
|
||
display: none; /* 默认隐藏，通过JS控制显示 */
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
background: var(--dark-bg);
|
||
}
|
||
|
||
/* 当桌面显示时，覆盖所有内容 */
|
||
#desktop.active {
|
||
display: block !important;
|
||
}
|
||
|
||
/* 桌面小部件 */
|
||
.desktop-widgets {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
z-index: 100;
|
||
}
|
||
|
||
.widget {
|
||
background: var(--glass-bg);
|
||
border: 1px solid var(--glass-border);
|
||
backdrop-filter: blur(10px);
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
min-width: 200px;
|
||
box-shadow: 0 0 20px rgba(5, 217, 232, 0.2);
|
||
}
|
||
|
||
.widget-title {
|
||
font-family: 'Orbitron', sans-serif;
|
||
font-size: 0.8rem;
|
||
color: var(--neon-cyan);
|
||
margin-bottom: 10px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.widget-content {
|
||
font-size: 0.9rem;
|
||
color: var(--neon-blue);
|
||
}
|
||
|
||
.system-monitor-bars {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.monitor-bar {
|
||
height: 6px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.monitor-bar-fill {
|
||
height: 100%;
|
||
background: var(--neon-pink);
|
||
box-shadow: 0 0 5px var(--neon-pink);
|
||
transition: width 0.5s ease;
|
||
}
|
||
|
||
/* 桌面图标 */
|
||
.desktop-icons {
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 20px;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20px;
|
||
z-index: 50;
|
||
}
|
||
|
||
.desktop-icon {
|
||
width: 80px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
padding: 10px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.desktop-icon:hover {
|
||
background: rgba(255, 42, 109, 0.2);
|
||
box-shadow: 0 0 15px var(--neon-pink);
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.desktop-icon i {
|
||
font-size: 2rem;
|
||
margin-bottom: 5px;
|
||
color: var(--neon-blue);
|
||
text-shadow: 0 0 10px var(--neon-blue);
|
||
}
|
||
|
||
.desktop-icon span {
|
||
font-size: 0.7rem;
|
||
color: var(--neon-cyan);
|
||
text-align: center;
|
||
}
|
||
|
||
/* 任务栏 */
|
||
#taskbar {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 50px;
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(10px);
|
||
border-top: 1px solid var(--glass-border);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20px;
|
||
z-index: 8000;
|
||
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.taskbar-start {
|
||
font-family: 'Orbitron', sans-serif;
|
||
font-weight: 700;
|
||
color: var(--neon-pink);
|
||
cursor: pointer;
|
||
padding: 8px 15px;
|
||
border: 1px solid var(--neon-pink);
|
||
border-radius: 4px;
|
||
transition: all 0.2s;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.taskbar-start:hover {
|
||
background: var(--neon-pink);
|
||
color: var(--dark-bg);
|
||
box-shadow: 0 0 15px var(--neon-pink);
|
||
}
|
||
|
||
.taskbar-apps {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.taskbar-app {
|
||
padding: 8px 15px;
|
||
background: rgba(5, 217, 232, 0.1);
|
||
border: 1px solid rgba(5, 217, 232, 0.3);
|
||
color: var(--neon-blue);
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
transition: all 0.2s;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.taskbar-app:hover {
|
||
background: rgba(5, 217, 232, 0.2);
|
||
box-shadow: 0 0 10px rgba(5, 217, 232, 0.3);
|
||
}
|
||
|
||
.taskbar-app.active {
|
||
background: var(--neon-blue);
|
||
color: var(--dark-bg);
|
||
box-shadow: 0 0 15px var(--neon-blue);
|
||
}
|
||
|
||
.taskbar-system {
|
||
display: flex;
|
||
gap: 15px;
|
||
align-items: center;
|
||
}
|
||
|
||
.taskbar-icon {
|
||
color: var(--neon-cyan);
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.taskbar-icon:hover {
|
||
color: var(--neon-pink);
|
||
text-shadow: 0 0 10px var(--neon-pink);
|
||
}
|
||
|
||
.taskbar-clock {
|
||
font-family: 'Orbitron', sans-serif;
|
||
color: var(--neon-purple);
|
||
font-size: 0.9rem;
|
||
min-width: 80px;
|
||
text-align: right;
|
||
}
|
||
|
||
/* 开始菜单 */
|
||
#start-menu {
|
||
position: absolute;
|
||
bottom: 50px;
|
||
left: 20px;
|
||
width: 300px;
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(15px);
|
||
border: 1px solid var(--glass-border);
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
display: none;
|
||
z-index: 8500;
|
||
box-shadow: 0 0 30px rgba(5, 217, 232, 0.3);
|
||
}
|
||
|
||
.start-menu-title {
|
||
font-family: 'Orbitron', sans-serif;
|
||
color: var(--neon-pink);
|
||
font-size: 1.2rem;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.start-menu-apps {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.start-menu-app {
|
||
padding: 10px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.start-menu-app:hover {
|
||
background: rgba(5, 217, 232, 0.2);
|
||
border-color: var(--neon-blue);
|
||
box-shadow: 0 0 10px rgba(5, 217, 232, 0.3);
|
||
}
|
||
|
||
.start-menu-app i {
|
||
width: 20px;
|
||
text-align: center;
|
||
color: var(--neon-cyan);
|
||
}
|
||
|
||
.start-menu-options {
|
||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||
padding-top: 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.start-menu-option {
|
||
padding: 8px;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
transition: all 0.2s;
|
||
color: var(--neon-purple);
|
||
text-align: center;
|
||
}
|
||
|
||
.start-menu-option:hover {
|
||
background: rgba(255, 42, 109, 0.2);
|
||
box-shadow: 0 0 10px rgba(255, 42, 109, 0.3);
|
||
color: var(--neon-pink);
|
||
}
|
||
|
||
/* 窗口系统 */
|
||
.window {
|
||
position: absolute;
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(15px);
|
||
border: 1px solid var(--glass-border);
|
||
border-radius: 8px 8px 0 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 300px;
|
||
min-height: 200px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.window.active {
|
||
border-color: var(--neon-blue);
|
||
box-shadow: 0 10px 30px rgba(5, 217, 232, 0.3);
|
||
}
|
||
|
||
.window-header {
|
||
background: rgba(5, 217, 232, 0.1);
|
||
padding: 8px 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
cursor: move;
|
||
border-bottom: 1px solid rgba(5, 217, 232, 0.2);
|
||
}
|
||
|
||
.window-title {
|
||
font-family: 'Orbitron', sans-serif;
|
||
font-size: 0.9rem;
|
||
color: var(--neon-blue);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.window-controls {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.window-control {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.window-control.close {
|
||
background: var(--neon-pink);
|
||
box-shadow: 0 0 5px var(--neon-pink);
|
||
}
|
||
|
||
.window-control.minimize {
|
||
background: var(--neon-cyan);
|
||
box-shadow: 0 0 5px var(--neon-cyan);
|
||
}
|
||
|
||
.window-control.maximize {
|
||
background: var(--neon-purple);
|
||
box-shadow: 0 0 5px var(--neon-purple);
|
||
}
|
||
|
||
.window-control:hover {
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
.window-body {
|
||
flex: 1;
|
||
padding: 15px;
|
||
overflow: auto;
|
||
color: var(--neon-blue);
|
||
}
|
||
|
||
.window-resize {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 20px;
|
||
height: 20px;
|
||
cursor: nwse-resize;
|
||
background: linear-gradient(135deg, transparent 50%, var(--neon-blue) 50%);
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* 终端 */
|
||
.terminal {
|
||
font-family: 'Roboto Mono', monospace;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.terminal-output {
|
||
flex: 1;
|
||
padding: 10px;
|
||
overflow-y: auto;
|
||
white-space: pre-wrap;
|
||
font-size: 0.9rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.terminal-input-line {
|
||
display: flex;
|
||
padding: 10px;
|
||
background: rgba(5, 217, 232, 0.1);
|
||
}
|
||
|
||
.terminal-prompt {
|
||
color: var(--neon-green);
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.terminal-input {
|
||
background: transparent;
|
||
border: none;
|
||
outline: none;
|
||
color: var(--neon-blue);
|
||
flex: 1;
|
||
font-family: 'Roboto Mono', monospace;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.terminal .green { color: var(--neon-cyan); }
|
||
.terminal .pink { color: var(--neon-pink); }
|
||
.terminal .purple { color: var(--neon-purple); }
|
||
.terminal .error { color: #ff5555; }
|
||
|
||
/* 通知系统 */
|
||
#notification-area {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
width: 300px;
|
||
z-index: 9500;
|
||
}
|
||
|
||
.notification {
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(15px);
|
||
border: 1px solid var(--glass-border);
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
animation: slideIn 0.3s ease;
|
||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
transform: translateX(100%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.notification-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.notification-title {
|
||
font-family: 'Orbitron', sans-serif;
|
||
font-size: 0.9rem;
|
||
color: var(--neon-pink);
|
||
}
|
||
|
||
.notification-close {
|
||
cursor: pointer;
|
||
color: var(--neon-cyan);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.notification-close:hover {
|
||
opacity: 1;
|
||
color: var(--neon-pink);
|
||
}
|
||
|
||
.notification-body {
|
||
font-size: 0.8rem;
|
||
color: var(--neon-blue);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.notification.success { border-left: 3px solid var(--neon-cyan); }
|
||
.notification.error { border-left: 3px solid #ff5555; }
|
||
.notification.warning { border-left: 3px solid #ffaa00; }
|
||
.notification.info { border-left: 3px solid var(--neon-blue); }
|
||
|
||
/* 右键菜单 */
|
||
#context-menu {
|
||
position: absolute;
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(15px);
|
||
border: 1px solid var(--glass-border);
|
||
border-radius: 8px;
|
||
padding: 8px 0;
|
||
display: none;
|
||
z-index: 10000;
|
||
min-width: 180px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.context-menu-item {
|
||
padding: 10px 15px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: var(--neon-blue);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.context-menu-item:hover {
|
||
background: rgba(5, 217, 232, 0.2);
|
||
color: var(--neon-cyan);
|
||
}
|
||
|
||
.context-menu-item i {
|
||
width: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.context-menu-divider {
|
||
height: 1px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
margin: 5px 0;
|
||
}
|
||
|
||
/* 矩阵雨画布 */
|
||
#matrix-canvas {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 9999;
|
||
display: none;
|
||
background: black;
|
||
}
|
||
|
||
/* 隐藏类 - 用于灵活控制 */
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 开机动画 -->
|
||
<div id="boot-screen">
|
||
<div class="boot-logo">NEON-OS</div>
|
||
<div class="boot-text">初始化系统核心模块...</div>
|
||
<div class="boot-progress">
|
||
<div class="boot-progress-bar"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 锁屏界面 -->
|
||
<div id="lock-screen">
|
||
<div class="lock-Time" id="lock-time">00:00</div>
|
||
<div class="lock-Date" id="lock-date">加载中...</div>
|
||
<input type="password" class="lock-input" placeholder="输入密码或点击跳过" id="lock-password">
|
||
<div class="lock-buttons">
|
||
<button class="lock-btn" onclick="unlockSystem()">进入系统</button>
|
||
<button class="lock-btn" onclick="skipLockScreen()">跳过</button>
|
||
</div>
|
||
<div class="lock-hint">提示：直接点击"跳过"即可进入</div>
|
||
</div>
|
||
|
||
<!-- 桌面 -->
|
||
<div id="desktop" style="display:none;">
|
||
<div class="desktop-bg"></div>
|
||
<div class="scan-lines"></div>
|
||
|
||
<!-- 桌面小部件 -->
|
||
<div class="desktop-widgets">
|
||
<div class="widget">
|
||
<div class="widget-title">系统时钟</div>
|
||
<div class="widget-content" id="widget-clock">00:00:00</div>
|
||
</div>
|
||
<div class="widget">
|
||
<div class="widget-title">系统状态</div>
|
||
<div class="widget-content" id="widget-status">运行中</div>
|
||
<div class="system-monitor-bars">
|
||
<div class="monitor-bar">
|
||
<div class="monitor-bar-fill" id="cpu-bar" style="width: 45%"></div>
|
||
</div>
|
||
<div class="monitor-bar">
|
||
<div class="monitor-bar-fill" id="mem-bar" style="width: 62%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="widget">
|
||
<div class="widget-title">快速命令</div>
|
||
<div class="widget-content" style="cursor: pointer; padding: 5px;">
|
||
<div style="margin: 5px 0;" onclick="openTerminal()">打开终端</div>
|
||
<div style="margin: 5px 0;" onclick="showNotification('info', '系统信息', 'NEON-OS 版本 1.0.0')">系统信息</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 桌面图标 -->
|
||
<div class="desktop-icons">
|
||
<div class="desktop-icon" onclick="openApp('file-manager')">
|
||
<i class="fas fa-folder"></i>
|
||
<span>文件管理器</span>
|
||
</div>
|
||
<div class="desktop-icon" onclick="openTerminal()">
|
||
<i class="fas fa-terminal"></i>
|
||
<span>终端</span>
|
||
</div>
|
||
<div class="desktop-icon" onclick="openApp('browser')">
|
||
<i class="fas fa-globe"></i>
|
||
<span>浏览器</span>
|
||
</div>
|
||
<div class="desktop-icon" onclick="openApp('settings')">
|
||
<i class="fas fa-cog"></i>
|
||
<span>设置中心</span>
|
||
</div>
|
||
<div class="desktop-icon" onclick="openApp('music-player')">
|
||
<i class="fas fa-music"></i>
|
||
<span>音乐播放器</span>
|
||
</div>
|
||
<div class="desktop-icon" onclick="openApp('notepad')">
|
||
<i class="fas fa-sticky-note"></i>
|
||
<span>便签</span>
|
||
</div>
|
||
<div class="desktop-icon" onclick="openApp('monitor')">
|
||
<i class="fas fa-chart-line"></i>
|
||
<span>系统监控</span>
|
||
</div>
|
||
<div class="desktop-icon" onclick="openApp('about')">
|
||
<i class="fas fa-info-circle"></i>
|
||
<span>关于系统</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 任务栏 -->
|
||
<div id="taskbar">
|
||
<div class="taskbar-start" onclick="toggleStartMenu()">
|
||
<i class="fas fa-power-off"></i> 开始
|
||
</div>
|
||
<div class="taskbar-apps" id="taskbar-apps"></div>
|
||
<div class="taskbar-system">
|
||
<i class="fas fa-bell taskbar-icon" onclick="showNotification('info', '通知中心', '暂无新通知')"></i>
|
||
<i class="fas fa-volume-up taskbar-icon" onclick="toggleVolume()"></i>
|
||
<div class="taskbar-clock" id="taskbar-clock">00:00</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 开始菜单 -->
|
||
<div id="start-menu">
|
||
<div class="user-avatar">NE</div>
|
||
<div class="start-menu-title">NEON-OS</div>
|
||
<div class="start-menu-apps">
|
||
<div class="start-menu-app" onclick="openApp('file-manager')">
|
||
<i class="fas fa-folder"></i> 文件管理器
|
||
</div>
|
||
<div class="start-menu-app" onclick="openTerminal()">
|
||
<i class="fas fa-terminal"></i> 终端
|
||
</div>
|
||
<div class="start-menu-app" onclick="openApp('browser')">
|
||
<i class="fas fa-globe"></i> 浏览器
|
||
</div>
|
||
<div class="start-menu-app" onclick="openApp('settings')">
|
||
<i class="fas fa-cog"></i> 设置中心
|
||
</div>
|
||
</div>
|
||
<div class="start-menu-options">
|
||
<div class="start-menu-option" onclick="rebootSystem()">重启系统</div>
|
||
<div class="start-menu-option" onclick="logout()">切换用户</div>
|
||
<div class="start-menu-option" onclick="shutdown()">关机</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 通知区域 -->
|
||
<div id="notification-area"></div>
|
||
|
||
<!-- 右键菜单 -->
|
||
<div id="context-menu">
|
||
<div class="context-menu-item" onclick="refreshDesktop()">
|
||
<i class="fas fa-sync-alt"></i> 刷新
|
||
</div>
|
||
<div class="context-menu-item" onclick="openApp('settings')">
|
||
<i class="fas fa-cog"></i> 个性化设置
|
||
</div>
|
||
<div class="context-menu-divider"></div>
|
||
<div class="context-menu-item" onclick="openApp('about')">
|
||
<i class="fas fa-info-circle"></i> 关于 NEON-OS
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 矩阵雨画布 -->
|
||
<canvas id="matrix-canvas"></canvas>
|
||
</div>
|
||
|
||
<script>
|
||
// 全局状态管理
|
||
const state = {
|
||
apps: {},
|
||
nextZIndex: 100,
|
||
settings: {
|
||
theme: 'cyberpunk',
|
||
volume: 0.7,
|
||
wallpaper: 'default',
|
||
notifications: true
|
||
},
|
||
fileSystem: {
|
||
root: {
|
||
type: 'folder',
|
||
children: {
|
||
'Documents': {
|
||
type: 'folder',
|
||
children: {
|
||
'readme.txt': { type: 'file', content: '欢迎使用 NEON-OS!\n这是一个赛博朋克风格的操作系统。\n尝试在终端输入 help 查看可用命令。' },
|
||
'notes.txt': { type: 'file', content: '我的笔记：\n- 优化render循环\n- 修复拖拽bug\n- 添加更多命令' }
|
||
}
|
||
},
|
||
'Projects': {
|
||
type: 'folder',
|
||
children: {
|
||
'neon-os.html': { type: 'file', content: '<!DOCTYPE html>\n<!-- 这是我们之前的工作 -->' },
|
||
'design.fig': { type: 'file', content: '二进制文件预览：\n[FIGMA设计原型数据]' }
|
||
}
|
||
},
|
||
'Music': {
|
||
type: 'folder',
|
||
children: {
|
||
'synthwave.mp3': { type: 'file', content: '音频文件' },
|
||
'cyberpunk.flac': { type: 'file', content: '无损音频' }
|
||
}
|
||
},
|
||
'config.json': { type: 'file', content: '{\n "theme": "cyberpunk",\n "notifications": true\n}' }
|
||
}
|
||
}
|
||
},
|
||
currentDirectory: [],
|
||
musicPlayer: {
|
||
playing: false,
|
||
currentTrack: 0,
|
||
tracks: [
|
||
{ title: '霓虹之夜', artist: 'SynthWave', duration: 180 },
|
||
{ title: '数字梦境', artist: 'CyberPunk', duration: 220 },
|
||
{ title: '未来都市', artist: 'NeoTokyo', duration: 200 }
|
||
]
|
||
},
|
||
terminalHistory: [],
|
||
matrixRunning: false
|
||
};
|
||
|
||
// 初始化系统
|
||
function initSystem() {
|
||
console.log('[SYSTEM] 正在初始化...');
|
||
const savedSettings = localStorage.getItem('neon-os-settings');
|
||
if (savedSettings) {
|
||
try {
|
||
const parsed = JSON.parse(savedSettings);
|
||
state.settings = { ...state.settings, ...parsed };
|
||
console.log('[SYSTEM] 设置已加载');
|
||
} catch (e) {
|
||
console.log('[SYSTEM] 设置加载失败，使用默认值');
|
||
}
|
||
}
|
||
|
||
setTimeout(() => {
|
||
const bootScreen = document.getElementById('boot-screen');
|
||
if (bootScreen) {
|
||
bootScreen.style.opacity = '0';
|
||
setTimeout(() => {
|
||
bootScreen.style.display = 'none';
|
||
showLockScreen();
|
||
}, 500);
|
||
}
|
||
}, 2000); // 缩短开机动画时间，加快测试
|
||
}
|
||
|
||
// 显示锁屏
|
||
function showLockScreen() {
|
||
console.log('[LOCK] 显示锁屏界面');
|
||
const lockScreen = document.getElementById('lock-screen');
|
||
if (lockScreen) {
|
||
lockScreen.style.display = 'flex';
|
||
}
|
||
|
||
updateLockTime();
|
||
setInterval(updateLockTime, 1000);
|
||
|
||
const passwordInput = document.getElementById('lock-password');
|
||
const hint = document.querySelector('.lock-hint');
|
||
|
||
if (passwordInput) {
|
||
passwordInput.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter') {
|
||
unlockSystem();
|
||
}
|
||
});
|
||
}
|
||
|
||
if (hint) {
|
||
hint.addEventListener('click', skipLockScreen);
|
||
}
|
||
}
|
||
|
||
function updateLockTime() {
|
||
const now = new Date();
|
||
const hours = String(now.getHours()).padStart(2, '0');
|
||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||
const seconds = String(now.getSeconds()).padStart(2, '0');
|
||
const timeStr = `${hours}:${minutes}:${seconds}`;
|
||
|
||
const dateStr = now.toLocaleDateString('zh-CN', {
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric',
|
||
weekday: 'long'
|
||
});
|
||
|
||
const lockTime = document.getElementById('lock-time');
|
||
const lockDate = document.getElementById('lock-date');
|
||
|
||
if (lockTime) lockTime.textContent = timeStr;
|
||
if (lockDate) lockDate.textContent = dateStr;
|
||
|
||
const taskbarClock = document.getElementById('taskbar-clock');
|
||
if (taskbarClock) {
|
||
taskbarClock.textContent = `${hours}:${minutes}`;
|
||
}
|
||
|
||
const widgetClock = document.getElementById('widget-clock');
|
||
if (widgetClock) {
|
||
widgetClock.textContent = timeStr;
|
||
}
|
||
}
|
||
|
||
// 跳过锁屏（直接进入）
|
||
function skipLockScreen() {
|
||
console.log('[LOCK] 跳过锁屏，直接进入系统');
|
||
unlockSystem();
|
||
}
|
||
|
||
// 解锁系统 - 修复显示问题
|
||
function unlockSystem() {
|
||
console.log('[UNLOCK] 开始解锁流程');
|
||
const lockScreen = document.getElementById('lock-screen');
|
||
const desktop = document.getElementById('desktop');
|
||
|
||
if (!lockScreen || !desktop) {
|
||
console.error('[UNLOCK] 必要元素未找到');
|
||
return;
|
||
}
|
||
|
||
// 简化解锁流程
|
||
lockScreen.style.opacity = '0';
|
||
console.log('[UNLOCK] 锁屏透明度设置为0');
|
||
|
||
setTimeout(() => {
|
||
console.log('[UNLOCK] 隐藏锁屏，显示桌面');
|
||
lockScreen.style.display = 'none';
|
||
|
||
// 显示桌面 - 使用多种方式确保显示
|
||
desktop.style.display = 'block';
|
||
desktop.classList.remove('hidden');
|
||
desktop.classList.add('active');
|
||
|
||
console.log('[UNLOCK] 桌面display样式:', desktop.style.display);
|
||
console.log('[UNLOCK] 桌面classList:', desktop.className);
|
||
|
||
// 启动桌面动画
|
||
try {
|
||
startDesktopAnimation();
|
||
console.log('[UNLOCK] 桌面动画已启动');
|
||
} catch (e) {
|
||
console.error('[UNLOCK] 桌面动画启动失败:', e);
|
||
}
|
||
|
||
// 显示欢迎通知
|
||
setTimeout(() => {
|
||
showNotification('success', '系统启动', '欢迎回来，用户');
|
||
console.log('[UNLOCK] 已显示欢迎通知');
|
||
}, 500);
|
||
|
||
setTimeout(() => {
|
||
showNotification('info', '提示', '右键点击桌面访问菜单，或使用开始菜单打开应用');
|
||
}, 3000);
|
||
|
||
}, 500);
|
||
}
|
||
|
||
// 桌面动画
|
||
function startDesktopAnimation() {
|
||
console.log('[ANIM] 开始桌面监控动画');
|
||
|
||
// CPU/内存监控
|
||
setInterval(() => {
|
||
if (!document.getElementById('desktop') || document.getElementById('desktop').style.display === 'none') return;
|
||
|
||
const cpu = Math.floor(Math.random() * 30) + 20;
|
||
const mem = Math.floor(Math.random() * 30) + 40;
|
||
|
||
const cpuBar = document.getElementById('cpu-bar');
|
||
const memBar = document.getElementById('mem-bar');
|
||
|
||
if (cpuBar) cpuBar.style.width = cpu + '%';
|
||
if (memBar) memBar.style.width = mem + '%';
|
||
}, 2000);
|
||
|
||
// 随机通知
|
||
setInterval(() => {
|
||
if (!document.getElementById('desktop') || document.getElementById('desktop').style.display === 'none') return;
|
||
|
||
if (Math.random() > 0.9 && state.settings.notifications) {
|
||
const messages = [
|
||
{ type: 'info', title: '系统更新', msg: '检查到可用的系统更新' },
|
||
{ type: 'success', title: '备份完成', msg: '所有文件已自动备份' },
|
||
{ type: 'warning', title: '磁盘空间', msg: 'C盘剩余空间不足20%' }
|
||
];
|
||
const msg = messages[Math.floor(Math.random() * messages.length)];
|
||
showNotification(msg.type, msg.title, msg.msg);
|
||
}
|
||
}, 15000);
|
||
}
|
||
|
||
// 窗口管理系统（保持原有逻辑，略作简化）
|
||
function createWindow(appId, title, icon, initialContent = '') {
|
||
if (state.apps[appId]) {
|
||
activateWindow(appId);
|
||
return;
|
||
}
|
||
|
||
const window = document.createElement('div');
|
||
window.className = 'window';
|
||
window.id = `window-${appId}`;
|
||
window.style.left = '100px';
|
||
window.style.top = '100px';
|
||
window.style.width = '600px';
|
||
window.style.height = '400px';
|
||
window.style.zIndex = state.nextZIndex++;
|
||
|
||
window.innerHTML = `
|
||
<div class="window-header" data-app="${appId}">
|
||
<div class="window-title">
|
||
<i class="${icon}"></i>
|
||
<span>${title}</span>
|
||
</div>
|
||
<div class="window-controls">
|
||
<div class="window-control minimize" onclick="minimizeWindow('${appId}')"></div>
|
||
<div class="window-control maximize" onclick="maximizeWindow('${appId}')"></div>
|
||
<div class="window-control close" onclick="closeWindow('${appId}')"></div>
|
||
</div>
|
||
</div>
|
||
<div class="window-body" id="body-${appId}">
|
||
${initialContent}
|
||
</div>
|
||
<div class="window-resize" data-app="${appId}"></div>
|
||
`;
|
||
|
||
document.getElementById('desktop').appendChild(window);
|
||
|
||
state.apps[appId] = {
|
||
element: window,
|
||
minimized: false,
|
||
maximized: false,
|
||
originalSize: { width: '600px', height: '400px', left: '100px', top: '100px' }
|
||
};
|
||
|
||
makeDraggable(window);
|
||
makeResizable(window);
|
||
activateWindow(appId);
|
||
addToTaskbar(appId, title, icon);
|
||
}
|
||
|
||
function makeDraggable(element) {
|
||
const header = element.querySelector('.window-header');
|
||
let isDragging = false;
|
||
let currentX, currentY, initialX, initialY;
|
||
|
||
header.addEventListener('mousedown', (e) => {
|
||
if (e.target.classList.contains('window-control')) return;
|
||
isDragging = true;
|
||
initialX = e.clientX - element.offsetLeft;
|
||
initialY = e.clientY - element.offsetTop;
|
||
activateWindow(element.id.replace('window-', ''));
|
||
e.preventDefault();
|
||
});
|
||
|
||
document.addEventListener('mousemove', (e) => {
|
||
if (!isDragging) return;
|
||
currentX = e.clientX - initialX;
|
||
currentY = e.clientY - initialY;
|
||
currentX = Math.max(0, Math.min(currentX, window.innerWidth - element.offsetWidth));
|
||
currentY = Math.max(0, Math.min(currentY, window.innerHeight - 50));
|
||
element.style.left = currentX + 'px';
|
||
element.style.top = currentY + 'px';
|
||
});
|
||
|
||
document.addEventListener('mouseup', () => { isDragging = false; });
|
||
}
|
||
|
||
function makeResizable(element) {
|
||
const resizeHandle = element.querySelector('.window-resize');
|
||
let isResizing = false;
|
||
let startX, startY, startWidth, startHeight;
|
||
|
||
resizeHandle.addEventListener('mousedown', (e) => {
|
||
isResizing = true;
|
||
startX = e.clientX;
|
||
startY = e.clientY;
|
||
startWidth = element.offsetWidth;
|
||
startHeight = element.offsetHeight;
|
||
e.preventDefault();
|
||
});
|
||
|
||
document.addEventListener('mousemove', (e) => {
|
||
if (!isResizing) return;
|
||
const newWidth = startWidth + (e.clientX - startX);
|
||
const newHeight = startHeight + (e.clientY - startY);
|
||
if (newWidth > 300) element.style.width = newWidth + 'px';
|
||
if (newHeight > 200) element.style.height = newHeight + 'px';
|
||
});
|
||
|
||
document.addEventListener('mouseup', () => { isResizing = false; });
|
||
}
|
||
|
||
function activateWindow(appId) {
|
||
const app = state.apps[appId];
|
||
if (!app) return;
|
||
|
||
app.element.style.zIndex = state.nextZIndex++;
|
||
Object.values(state.apps).forEach(appItem => appItem.element.classList.remove('active'));
|
||
app.element.classList.add('active');
|
||
|
||
if (app.minimized) {
|
||
app.element.style.display = 'flex';
|
||
app.minimized = false;
|
||
updateTaskbarActive(appId);
|
||
}
|
||
}
|
||
|
||
function minimizeWindow(appId) {
|
||
const app = state.apps[appId];
|
||
if (!app) return;
|
||
app.element.style.display = 'none';
|
||
app.minimized = true;
|
||
updateTaskbarActive(appId);
|
||
}
|
||
|
||
function maximizeWindow(appId) {
|
||
const app = state.apps[appId];
|
||
if (!app) return;
|
||
|
||
if (app.maximized) {
|
||
app.element.style.width = app.originalSize.width;
|
||
app.element.style.height = app.originalSize.height;
|
||
app.element.style.left = app.originalSize.left;
|
||
app.element.style.top = app.originalSize.top;
|
||
app.maximized = false;
|
||
} else {
|
||
app.originalSize = {
|
||
width: app.element.style.width,
|
||
height: app.element.style.height,
|
||
left: app.element.style.left,
|
||
top: app.element.style.top
|
||
};
|
||
app.element.style.width = '100%';
|
||
app.element.style.height = 'calc(100% - 50px)';
|
||
app.element.style.left = '0';
|
||
app.element.style.top = '0';
|
||
app.maximized = true;
|
||
const body = document.getElementById(`body-${appId}`);
|
||
if (body) body.style.height = 'calc(100% - 41px)';
|
||
}
|
||
activateWindow(appId);
|
||
}
|
||
|
||
function closeWindow(appId) {
|
||
const app = state.apps[appId];
|
||
if (!app) return;
|
||
|
||
if (appId === 'music-player' && state.musicPlayer.playing) {
|
||
state.musicPlayer.playing = false;
|
||
stopMusicProgress();
|
||
}
|
||
|
||
if (appId === 'monitor') {
|
||
stopMonitorCharts();
|
||
}
|
||
|
||
app.element.remove();
|
||
delete state.apps[appId];
|
||
removeFromTaskbar(appId);
|
||
}
|
||
|
||
// 任务栏管理
|
||
function addToTaskbar(appId, title, icon) {
|
||
const taskbarApps = document.getElementById('taskbar-apps');
|
||
const appButton = document.createElement('div');
|
||
appButton.className = 'taskbar-app';
|
||
appButton.id = `taskbar-${appId}`;
|
||
appButton.innerHTML = `<i class="${icon}"></i> ${title}`;
|
||
appButton.onclick = () => {
|
||
if (state.apps[appId].minimized) {
|
||
activateWindow(appId);
|
||
} else {
|
||
minimizeWindow(appId);
|
||
}
|
||
};
|
||
taskbarApps.appendChild(appButton);
|
||
updateTaskbarActive(appId);
|
||
}
|
||
|
||
function removeFromTaskbar(appId) {
|
||
const button = document.getElementById(`taskbar-${appId}`);
|
||
if (button) button.remove();
|
||
}
|
||
|
||
function updateTaskbarActive(appId) {
|
||
const buttons = document.querySelectorAll('.taskbar-app');
|
||
buttons.forEach(btn => btn.classList.remove('active'));
|
||
|
||
if (state.apps[appId] && !state.apps[appId].minimized) {
|
||
const activeButton = document.getElementById(`taskbar-${appId}`);
|
||
if (activeButton) activeButton.classList.add('active');
|
||
}
|
||
}
|
||
|
||
// 应用程序逻辑
|
||
function openApp(appId) {
|
||
switch(appId) {
|
||
case 'file-manager': openFileManager(); break;
|
||
case 'browser': openBrowser(); break;
|
||
case 'settings': openSettings(); break;
|
||
case 'music-player': openMusicPlayer(); break;
|
||
case 'notepad': openNotepad(); break;
|
||
case 'monitor': openMonitor(); break;
|
||
case 'about': openAbout(); break;
|
||
}
|
||
}
|
||
|
||
function openTerminal() {
|
||
if (state.apps['terminal']) {
|
||
activateWindow('terminal');
|
||
return;
|
||
}
|
||
|
||
const initialContent = `
|
||
<div class="terminal">
|
||
<div class="terminal-output" id="terminal-output"></div>
|
||
<div class="terminal-input-line">
|
||
<span class="terminal-prompt">user@neon-os:~$</span>
|
||
<input type="text" class="terminal-input" id="terminal-input" placeholder="输入 help 查看可用命令">
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
createWindow('terminal', '终端模拟器', 'fas fa-terminal', initialContent);
|
||
|
||
setTimeout(() => {
|
||
const input = document.getElementById('terminal-input');
|
||
const output = document.getElementById('terminal-output');
|
||
|
||
if (output) {
|
||
output.innerHTML = `
|
||
<span class="green">NEON-OS 终端模拟器 v1.0</span>
|
||
<br><span class="purple">输入 'help' 查看可用命令</span>
|
||
<br>
|
||
`;
|
||
}
|
||
|
||
if (input) {
|
||
input.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter') {
|
||
const command = input.value.trim();
|
||
if (command) {
|
||
state.terminalHistory.push(command);
|
||
executeCommand(command, output);
|
||
input.value = '';
|
||
output.scrollTop = output.scrollHeight;
|
||
}
|
||
} else if (e.key === 'ArrowUp') {
|
||
if (state.terminalHistory.length > 0) {
|
||
input.value = state.terminalHistory[state.terminalHistory.length - 1];
|
||
}
|
||
}
|
||
});
|
||
input.focus();
|
||
}
|
||
}, 100);
|
||
}
|
||
|
||
function executeCommand(command, output) {
|
||
const parts = command.split(' ');
|
||
const cmd = parts[0].toLowerCase();
|
||
const args = parts.slice(1);
|
||
|
||
const prompt = document.createElement('div');
|
||
prompt.innerHTML = `<span class="terminal-prompt">user@neon-os:~$</span> ${command}`;
|
||
output.appendChild(prompt);
|
||
|
||
let response = '';
|
||
|
||
switch(cmd) {
|
||
case 'help':
|
||
response = '可用命令：\nhelp - 显示此帮助信息\nclear - 清屏\ndate - 显示当前日期时间\nwhoami - 显示当前用户\nls - 列出文件\ncd - 切换目录\ncat - 查看文件内容\necho - 输出文本\nneofetch - 显示系统信息\nmatrix - 启动矩阵雨特效\ntheme - 切换主题\nreboot - 重启系统\nexit - 关闭终端';
|
||
break;
|
||
case 'clear':
|
||
output.innerHTML = '';
|
||
return;
|
||
case 'date':
|
||
response = new Date().toString();
|
||
break;
|
||
case 'whoami':
|
||
response = 'user@neon-os';
|
||
break;
|
||
case 'ls':
|
||
const currentDir = getCurrentDirectory();
|
||
if (typeof currentDir === 'object') {
|
||
response = Object.keys(currentDir.children).map(name => {
|
||
const item = currentDir.children[name];
|
||
return item.type === 'folder' ? `<span class="green">${name}/</span>` : name;
|
||
}).join(' ');
|
||
} else {
|
||
response = '<span class="error">错误：无法读取目录</span>';
|
||
}
|
||
break;
|
||
case 'cd':
|
||
if (args.length === 0) {
|
||
state.currentDirectory = [];
|
||
response = '已返回根目录';
|
||
} else if (args[0] === '..') {
|
||
if (state.currentDirectory.length > 0) {
|
||
state.currentDirectory.pop();
|
||
response = '已返回上级目录';
|
||
} else {
|
||
response = '已在根目录';
|
||
}
|
||
} else {
|
||
const currentDir = getCurrentDirectory();
|
||
if (currentDir.children && currentDir.children[args[0]] && currentDir.children[args[0]].type === 'folder') {
|
||
state.currentDirectory.push(args[0]);
|
||
response = `已切换到 /${state.currentDirectory.join('/')}`;
|
||
} else {
|
||
response = `<span class="error">目录不存在: ${args[0]}</span>`;
|
||
}
|
||
}
|
||
break;
|
||
case 'cat':
|
||
if (args.length === 0) {
|
||
response = '<span class="error">用法: cat <文件名></span>';
|
||
} else {
|
||
const currentDir = getCurrentDirectory();
|
||
if (currentDir.children && currentDir.children[args[0]] && currentDir.children[args[0]].type === 'file') {
|
||
const content = currentDir.children[args[0]].content;
|
||
response = `<pre>${content}</pre>`;
|
||
} else {
|
||
response = `<span class="error">文件不存在: ${args[0]}</span>`;
|
||
}
|
||
}
|
||
break;
|
||
case 'echo':
|
||
response = args.join(' ');
|
||
break;
|
||
case 'neofetch':
|
||
response = '<span style="color: #ff2a6d; font-weight: bold;">NEON-OS</span> 版本 1.0.0\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n<span style="color: #05d9e8;">内核</span>: CyberKernel 2.6.18\n<span style="color: #d100d1;">架构</span>: WebAssembly x86_64\n<span style="color: #00ff9f;">Shell</span>: NeonTerminal v1.0\n<span style="color: #ff2a6d;">主题</span>: ' + state.settings.theme + '\n<span style="color: #05d9e8;">内存占用</span>: ' + (Math.floor(Math.random() * 30 + 20)) + '% / 16GB\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━';
|
||
break;
|
||
case 'matrix':
|
||
if (!state.matrixRunning) {
|
||
startMatrixRain();
|
||
response = '<span class="green">矩阵雨已启动... 输入任意命令或刷新页面退出</span>';
|
||
} else {
|
||
response = '<span class="error">矩阵雨已在运行</span>';
|
||
}
|
||
break;
|
||
case 'theme':
|
||
const themes = ['cyberpunk', 'retro', 'minimal', 'dark', 'light'];
|
||
const nextTheme = themes[(themes.indexOf(state.settings.theme) + 1) % themes.length];
|
||
state.settings.theme = nextTheme;
|
||
saveSettings();
|
||
applyTheme();
|
||
response = '<span class="green">主题已切换至: ' + nextTheme + '</span>';
|
||
break;
|
||
case 'reboot':
|
||
response = '<span class="purple">系统将在3秒后重启...</span>';
|
||
setTimeout(rebootSystem, 3000);
|
||
break;
|
||
case 'exit':
|
||
closeWindow('terminal');
|
||
return;
|
||
case 'mkdir':
|
||
case 'touch':
|
||
case 'rm':
|
||
response = '<span class="error">只读文件系统: ' + cmd + ' 命令已被禁用</span>';
|
||
break;
|
||
default:
|
||
if (command.trim() !== '') {
|
||
response = '<span class="error">命令未找到: ' + cmd + '</span>';
|
||
} else {
|
||
return;
|
||
}
|
||
}
|
||
|
||
if (response) {
|
||
const responseDiv = document.createElement('div');
|
||
responseDiv.style.marginTop = '5px';
|
||
responseDiv.innerHTML = response;
|
||
output.appendChild(responseDiv);
|
||
}
|
||
|
||
if (response.length > 50) {
|
||
const lastChild = output.lastChild;
|
||
if (lastChild) {
|
||
lastChild.classList.add('typewriter');
|
||
setTimeout(() => lastChild.classList.remove('typewriter'), 2000);
|
||
}
|
||
}
|
||
}
|
||
|
||
function getCurrentDirectory() {
|
||
let current = state.fileSystem.root;
|
||
for (let dir of state.currentDirectory) {
|
||
if (current.children && current.children[dir]) {
|
||
current = current.children[dir];
|
||
} else {
|
||
return state.fileSystem.root;
|
||
}
|
||
}
|
||
return current;
|
||
}
|
||
|
||
function openFileManager() {
|
||
if (state.apps['file-manager']) {
|
||
activateWindow('file-manager');
|
||
return;
|
||
}
|
||
|
||
const content = `
|
||
<div class="file-manager">
|
||
<div class="fm-sidebar">
|
||
<div style="color: var(--neon-cyan); margin-bottom: 10px; font-family: 'Orbitron', sans-serif;">位置</div>
|
||
<div style="cursor: pointer; margin-bottom: 8px;" onclick="resetFMPath()">🏠 根目录</div>
|
||
<div style="cursor: pointer; margin-bottom: 8px;" onclick="setFMPath(['Documents'])">📁 Documents</div>
|
||
<div style="cursor: pointer; margin-bottom: 8px;" onclick="setFMPath(['Projects'])">📁 Projects</div>
|
||
<div style="cursor: pointer; margin-bottom: 8px;" onclick="setFMPath(['Music'])">📁 Music</div>
|
||
<div style="margin-top: 20px; padding-top: 10px; border-top: 1px solid rgba(5, 217, 232, 0.2);">
|
||
<div style="font-size: 0.7rem; color: var(--neon-purple);">
|
||
当前: /${state.currentDirectory.join('/')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="fm-main" id="fm-main"></div>
|
||
</div>
|
||
`;
|
||
|
||
createWindow('file-manager', '文件管理器', 'fas fa-folder', content);
|
||
|
||
setTimeout(() => renderFileManager(), 100);
|
||
}
|
||
|
||
function renderFileManager() {
|
||
const fmMain = document.getElementById('fm-main');
|
||
if (!fmMain) return;
|
||
|
||
const current = getCurrentDirectory();
|
||
let html = '';
|
||
|
||
if (state.currentDirectory.length > 0) {
|
||
html += `
|
||
<div class="fm-item folder" onclick="goUpDirectory()">
|
||
<i class="fas fa-level-up-alt"></i>
|
||
<span>上一级</span>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
if (current.children) {
|
||
Object.entries(current.children).forEach(([name, item]) => {
|
||
const iconClass = item.type === 'folder' ? 'fas fa-folder' : 'fas fa-file-alt';
|
||
const itemClass = item.type === 'folder' ? 'folder' : 'file';
|
||
html += `
|
||
<div class="fm-item ${itemClass}" oncontextmenu="showFMContextMenu(event, '${name}', '${item.type}')" onclick="openFMItem('${name}', '${item.type}')">
|
||
<i class="${iconClass}"></i>
|
||
<span>${name}</span>
|
||
</div>
|
||
`;
|
||
});
|
||
}
|
||
fmMain.innerHTML = html;
|
||
}
|
||
|
||
function setFMPath(path) {
|
||
state.currentDirectory = path;
|
||
setTimeout(() => renderFileManager(), 50);
|
||
}
|
||
|
||
function resetFMPath() {
|
||
state.currentDirectory = [];
|
||
setTimeout(() => renderFileManager(), 50);
|
||
}
|
||
|
||
function goUpDirectory() {
|
||
if (state.currentDirectory.length > 0) {
|
||
state.currentDirectory.pop();
|
||
setTimeout(() => renderFileManager(), 50);
|
||
}
|
||
}
|
||
|
||
function openFMItem(name, type) {
|
||
if (type === 'folder') {
|
||
state.currentDirectory.push(name);
|
||
setTimeout(() => renderFileManager(), 50);
|
||
} else {
|
||
const current = getCurrentDirectory();
|
||
if (current.children[name]) {
|
||
showNotification('info', '文件预览', '文件: ' + name + ' \\n内容已显示在终端（使用 cat 命令）');
|
||
}
|
||
}
|
||
}
|
||
|
||
function showFMContextMenu(event, name, type) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
const contextMenu = document.getElementById('context-menu');
|
||
contextMenu.innerHTML = `
|
||
<div class="context-menu-item" onclick="showNotification('info', '属性', '文件: ${name} \\n类型: ${type} \\n大小: ' + (Math.floor(Math.random() * 1000)) + 'KB')">
|
||
<i class="fas fa-info-circle"></i> 属性
|
||
</div>
|
||
<div class="context-menu-item" onclick="showNotification('warning', '权限', '该操作需要管理员权限')">
|
||
<i class="fas fa-lock"></i> 权限管理
|
||
</div>
|
||
${type === 'file' ? `
|
||
<div class="context-menu-item" onclick="showNotification('info', '编辑', '在终端使用 cat 查看内容')">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</div>
|
||
` : ''}
|
||
<div class="context-menu-divider"></div>
|
||
<div class="context-menu-item" onclick="showNotification('error', '错误', '只读文件系统：无法删除')">
|
||
<i class="fas fa-trash"></i> 删除
|
||
</div>
|
||
`;
|
||
|
||
contextMenu.style.display = 'block';
|
||
contextMenu.style.left = event.pageX + 'px';
|
||
contextMenu.style.top = event.pageY + 'px';
|
||
|
||
setTimeout(() => {
|
||
document.addEventListener('click', closeContextMenuOnce);
|
||
}, 100);
|
||
}
|
||
|
||
function openBrowser() {
|
||
if (state.apps['browser']) {
|
||
activateWindow('browser');
|
||
return;
|
||
}
|
||
|
||
const content = `
|
||
<div class="browser">
|
||
<div class="browser-toolbar">
|
||
<input type="text" class="browser-url" id="browser-url" value="https://example.com" placeholder="输入URL...">
|
||
<button class="browser-btn" onclick="navigateBrowser()">前往</button>
|
||
<button class="browser-btn" onclick="refreshBrowser()">刷新</button>
|
||
</div>
|
||
<div class="browser-content" id="browser-content">
|
||
<iframe src="https://example.com"></iframe>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
createWindow('browser', 'Web浏览器', 'fas fa-globe', content);
|
||
}
|
||
|
||
function navigateBrowser() {
|
||
const urlInput = document.getElementById('browser-url');
|
||
const content = document.getElementById('browser-content');
|
||
if (urlInput && content) {
|
||
let url = urlInput.value;
|
||
if (!url.startsWith('http://') && !url.startsWith('https://')) {
|
||
url = 'https://' + url;
|
||
}
|
||
content.innerHTML = '<iframe src="' + url + '"></iframe>';
|
||
showNotification('info', '浏览器', '正在访问: ' + url);
|
||
}
|
||
}
|
||
|
||
function refreshBrowser() {
|
||
const content = document.getElementById('browser-content');
|
||
if (content) {
|
||
const iframe = content.querySelector('iframe');
|
||
if (iframe) {
|
||
iframe.src = iframe.src;
|
||
showNotification('info', '浏览器', '页面已刷新');
|
||
}
|
||
}
|
||
}
|
||
|
||
function openSettings() {
|
||
if (state.apps['settings']) {
|
||
activateWindow('settings');
|
||
return;
|
||
}
|
||
|
||
const content = `
|
||
<div class="settings">
|
||
<div class="setting-group">
|
||
<h3>主题设置</h3>
|
||
<div class="setting-item">
|
||
<span class="setting-label">当前主题: ${state.settings.theme}</span>
|
||
<div class="setting-control">
|
||
<button onclick="changeTheme()">切换主题</button>
|
||
</div>
|
||
</div>
|
||
<div class="setting-item">
|
||
<span class="setting-label">壁纸风格</span>
|
||
<div class="setting-control">
|
||
<button onclick="changeWallpaper()">更换壁纸</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="setting-group">
|
||
<h3>系统设置</h3>
|
||
<div class="setting-item">
|
||
<span class="setting-label">音量: ${Math.round(state.settings.volume * 100)}%</span>
|
||
<div class="setting-control">
|
||
<input type="range" min="0" max="100" value="${state.settings.volume * 100}"
|
||
oninput="setVolume(this.value)">
|
||
</div>
|
||
</div>
|
||
<div class="setting-item">
|
||
<span class="setting-label">启用通知</span>
|
||
<div class="setting-control">
|
||
<button onclick="toggleNotifications()">${state.settings.notifications ? '禁用' : '启用'}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="setting-group">
|
||
<h3>隐私与安全</h3>
|
||
<div class="setting-item">
|
||
<span class="setting-label">清除本地数据</span>
|
||
<div class="setting-control">
|
||
<button onclick="clearData()">清除</button>
|
||
</div>
|
||
</div>
|
||
<div class="setting-item">
|
||
<span class="setting-label">导出配置</span>
|
||
<div class="setting-control">
|
||
<button onclick="exportConfig()">导出</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
createWindow('settings', '设置中心', 'fas fa-cog', content);
|
||
}
|
||
|
||
function changeTheme() {
|
||
const themes = ['cyberpunk', 'retro', 'minimal', 'dark', 'light'];
|
||
const currentIndex = themes.indexOf(state.settings.theme);
|
||
const nextIndex = (currentIndex + 1) % themes.length;
|
||
state.settings.theme = themes[nextIndex];
|
||
saveSettings();
|
||
applyTheme();
|
||
showNotification('success', '主题切换', '已切换至: ' + themes[nextIndex]);
|
||
|
||
setTimeout(() => {
|
||
if (state.apps['settings']) {
|
||
closeWindow('settings');
|
||
openSettings();
|
||
}
|
||
}, 500);
|
||
}
|
||
|
||
function changeWallpaper() {
|
||
const wallpapers = ['default', 'neon', 'grid', 'city', 'matrix'];
|
||
const currentWallpaper = state.settings.wallpaper;
|
||
const nextIndex = (wallpapers.indexOf(currentWallpaper) + 1) % wallpapers.length;
|
||
state.settings.wallpaper = wallpapers[nextIndex];
|
||
saveSettings();
|
||
applyWallpaper();
|
||
showNotification('success', '壁纸更换', '已更换为: ' + wallpapers[nextIndex]);
|
||
}
|
||
|
||
function setVolume(value) {
|
||
state.settings.volume = value / 100;
|
||
saveSettings();
|
||
if (state.apps['settings']) {
|
||
const label = document.querySelector('.setting-item span');
|
||
if (label) {
|
||
label.textContent = '音量: ' + value + '%';
|
||
}
|
||
}
|
||
}
|
||
|
||
function toggleNotifications() {
|
||
state.settings.notifications = !state.settings.notifications;
|
||
saveSettings();
|
||
showNotification('info', '通知设置', '通知已' + (state.settings.notifications ? '启用' : '禁用'));
|
||
|
||
setTimeout(() => {
|
||
if (state.apps['settings']) {
|
||
closeWindow('settings');
|
||
openSettings();
|
||
}
|
||
}, 500);
|
||
}
|
||
|
||
function clearData() {
|
||
if (confirm('确定要清除所有本地数据吗？这将重置所有设置。')) {
|
||
localStorage.removeItem('neon-os-settings');
|
||
showNotification('success', '数据清除', '本地数据已清除');
|
||
setTimeout(rebootSystem, 1000);
|
||
}
|
||
}
|
||
|
||
function exportConfig() {
|
||
const config = JSON.stringify(state.settings, null, 2);
|
||
showNotification('info', '导出配置', '配置信息已复制到终端（模拟操作）\\n\\n' + config);
|
||
}
|
||
|
||
function openMusicPlayer() {
|
||
if (state.apps['music-player']) {
|
||
activateWindow('music-player');
|
||
return;
|
||
}
|
||
|
||
const content = `
|
||
<div class="music-player">
|
||
<div class="album-cover">
|
||
<i class="fas fa-music"></i>
|
||
</div>
|
||
<div class="music-info">
|
||
<div class="music-title" id="music-title">${state.musicPlayer.tracks[state.musicPlayer.currentTrack].title}</div>
|
||
<div class="music-artist" id="music-artist">${state.musicPlayer.tracks[state.musicPlayer.currentTrack].artist}</div>
|
||
<div class="progress-bar" onclick="seekMusic(event)">
|
||
<div class="progress-fill" id="music-progress"></div>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between; margin-top: 5px; font-size: 0.7rem; color: var(--neon-purple);">
|
||
<span id="current-time">0:00</span>
|
||
<span id="total-time">${formatTime(state.musicPlayer.tracks[state.musicPlayer.currentTrack].duration)}</span>
|
||
</div>
|
||
<div class="audio-visualizer" id="audio-visualizer"></div>
|
||
</div>
|
||
<div class="music-controls">
|
||
<div class="music-control" onclick="prevTrack()"><i class="fas fa-step-backward"></i></div>
|
||
<div class="music-control" id="play-pause-btn" onclick="togglePlay()"><i class="fas fa-play"></i></div>
|
||
<div class="music-control" onclick="nextTrack()"><i class="fas fa-step-forward"></i></div>
|
||
</div>
|
||
<div class="volume-control">
|
||
<i class="fas fa-volume-up"></i>
|
||
<input type="range" min="0" max="100" value="${state.settings.volume * 100}" oninput="setTrackVolume(this.value)">
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
createWindow('music-player', '音乐播放器', 'fas fa-music', content);
|
||
|
||
setTimeout(() => {
|
||
if (!state.musicPlayer.playing) {
|
||
createAudioVisualizer();
|
||
}
|
||
}, 100);
|
||
}
|
||
|
||
function togglePlay() {
|
||
state.musicPlayer.playing = !state.musicPlayer.playing;
|
||
const btn = document.getElementById('play-pause-btn');
|
||
|
||
if (btn) {
|
||
btn.innerHTML = state.musicPlayer.playing ? '<i class="fas fa-pause"></i>' : '<i class="fas fa-play"></i>';
|
||
}
|
||
|
||
if (state.musicPlayer.playing) {
|
||
showNotification('info', '音乐播放器', '正在播放: ' + state.musicPlayer.tracks[state.musicPlayer.currentTrack].title);
|
||
startMusicProgress();
|
||
} else {
|
||
showNotification('info', '音乐播放器', '已暂停');
|
||
stopMusicProgress();
|
||
}
|
||
}
|
||
|
||
function prevTrack() {
|
||
const currentIndex = state.musicPlayer.currentTrack;
|
||
state.musicPlayer.currentTrack = currentIndex > 0 ? currentIndex - 1 : state.musicPlayer.tracks.length - 1;
|
||
updateTrackInfo();
|
||
showNotification('info', '音乐切换', '播放: ' + state.musicPlayer.tracks[state.musicPlayer.currentTrack].title);
|
||
}
|
||
|
||
function nextTrack() {
|
||
const currentIndex = state.musicPlayer.currentTrack;
|
||
state.musicPlayer.currentTrack = (currentIndex + 1) % state.musicPlayer.tracks.length;
|
||
updateTrackInfo();
|
||
showNotification('info', '音乐切换', '播放: ' + state.musicPlayer.tracks[state.musicPlayer.currentTrack].title);
|
||
}
|
||
|
||
function updateTrackInfo() {
|
||
const track = state.musicPlayer.tracks[state.musicPlayer.currentTrack];
|
||
const titleEl = document.getElementById('music-title');
|
||
const artistEl = document.getElementById('music-artist');
|
||
const totalTimeEl = document.getElementById('total-time');
|
||
|
||
if (titleEl) titleEl.textContent = track.title;
|
||
if (artistEl) artistEl.textContent = track.artist;
|
||
if (totalTimeEl) totalTimeEl.textContent = formatTime(track.duration);
|
||
|
||
const progress = document.getElementById('music-progress');
|
||
if (progress) progress.style.width = '0%';
|
||
|
||
if (state.musicPlayer.playing) {
|
||
stopMusicProgress();
|
||
setTimeout(startMusicProgress, 100);
|
||
}
|
||
}
|
||
|
||
function startMusicProgress() {
|
||
stopMusicProgress();
|
||
const track = state.musicPlayer.tracks[state.musicPlayer.currentTrack];
|
||
const progress = document.getElementById('music-progress');
|
||
const currentTimeEl = document.getElementById('current-time');
|
||
|
||
if (!progress || !currentTimeEl) return;
|
||
|
||
let currentSeconds = 0;
|
||
|
||
state.musicPlayer.progressInterval = setInterval(() => {
|
||
currentSeconds++;
|
||
if (currentSeconds >= track.duration) {
|
||
nextTrack();
|
||
return;
|
||
}
|
||
|
||
const percentage = (currentSeconds / track.duration) * 100;
|
||
progress.style.width = percentage + '%';
|
||
currentTimeEl.textContent = formatTime(currentSeconds);
|
||
|
||
updateVisualizer();
|
||
}, 1000);
|
||
}
|
||
|
||
function stopMusicProgress() {
|
||
if (state.musicPlayer.progressInterval) {
|
||
clearInterval(state.musicPlayer.progressInterval);
|
||
state.musicPlayer.progressInterval = null;
|
||
}
|
||
}
|
||
|
||
function seekMusic(event) {
|
||
if (state.musicPlayer.playing) {
|
||
const bar = event.currentTarget;
|
||
const rect = bar.getBoundingClientRect();
|
||
const clickX = event.clientX - rect.left;
|
||
const percentage = clickX / rect.width;
|
||
const track = state.musicPlayer.tracks[state.musicPlayer.currentTrack];
|
||
const newSeconds = Math.floor(percentage * track.duration);
|
||
|
||
const progress = document.getElementById('music-progress');
|
||
const currentTimeEl = document.getElementById('current-time');
|
||
|
||
if (progress && currentTimeEl) {
|
||
progress.style.width = (percentage * 100) + '%';
|
||
currentTimeEl.textContent = formatTime(newSeconds);
|
||
}
|
||
}
|
||
}
|
||
|
||
function setTrackVolume(value) {
|
||
state.settings.volume = value / 100;
|
||
saveSettings();
|
||
showNotification('info', '音量调整', '当前音量: ' + value + '%');
|
||
}
|
||
|
||
function createAudioVisualizer() {
|
||
const visualizer = document.getElementById('audio-visualizer');
|
||
if (!visualizer) return;
|
||
|
||
visualizer.innerHTML = '';
|
||
for (let i = 0; i < 20; i++) {
|
||
const bar = document.createElement('div');
|
||
bar.className = 'audio-bar';
|
||
bar.style.height = Math.random() * 20 + 5 + 'px';
|
||
visualizer.appendChild(bar);
|
||
}
|
||
}
|
||
|
||
function updateVisualizer() {
|
||
const visualizer = document.getElementById('audio-visualizer');
|
||
if (!visualizer) return;
|
||
|
||
if (state.musicPlayer.playing) {
|
||
const bars = visualizer.children;
|
||
for (let bar of bars) {
|
||
bar.style.height = Math.random() * 30 + 10 + 'px';
|
||
}
|
||
}
|
||
}
|
||
|
||
function formatTime(seconds) {
|
||
const mins = Math.floor(seconds / 60);
|
||
const secs = seconds % 60;
|
||
return mins + ':' + (secs < 10 ? '0' : '') + secs;
|
||
}
|
||
|
||
function openNotepad() {
|
||
if (state.apps['notepad']) {
|
||
activateWindow('notepad');
|
||
return;
|
||
}
|
||
|
||
const savedContent = localStorage.getItem('neon-os-notepad') || '';
|
||
|
||
const content = `
|
||
<div class="notepad">
|
||
<div class="notepad-toolbar">
|
||
<button class="notepad-btn" onclick="saveNotepad()">保存</button>
|
||
<button class="notepad-btn" onclick="clearNotepad()">清空</button>
|
||
<button class="notepad-btn" onclick="exportNotepad()">导出</button>
|
||
</div>
|
||
<textarea class="notepad-editor" id="notepad-editor" placeholder="输入您的笔记...">${savedContent}</textarea>
|
||
<div class="notepad-status" id="notepad-status">已保存至本地存储</div>
|
||
</div>
|
||
`;
|
||
|
||
createWindow('notepad', '便签', 'fas fa-sticky-note', content);
|
||
|
||
setTimeout(() => {
|
||
const editor = document.getElementById('notepad-editor');
|
||
if (editor) {
|
||
editor.addEventListener('input', () => {
|
||
localStorage.setItem('neon-os-notepad', editor.value);
|
||
updateNotepadStatus('已自动保存');
|
||
});
|
||
}
|
||
}, 100);
|
||
}
|
||
|
||
function saveNotepad() {
|
||
const editor = document.getElementById('notepad-editor');
|
||
if (editor) {
|
||
localStorage.setItem('neon-os-notepad', editor.value);
|
||
updateNotepadStatus('保存成功！');
|
||
showNotification('success', '便签', '笔记已保存');
|
||
}
|
||
}
|
||
|
||
function clearNotepad() {
|
||
const editor = document.getElementById('notepad-editor');
|
||
if (editor && confirm('确定要清空所有内容吗？')) {
|
||
editor.value = '';
|
||
localStorage.removeItem('neon-os-notepad');
|
||
updateNotepadStatus('已清空');
|
||
showNotification('success', '便签', '内容已清空');
|
||
}
|
||
}
|
||
|
||
function exportNotepad() {
|
||
const editor = document.getElementById('notepad-editor');
|
||
if (editor) {
|
||
const content = editor.value;
|
||
showNotification('info', '导出', '笔记内容已复制到剪贴板（模拟操作）');
|
||
navigator.clipboard.writeText(content).catch(() => {});
|
||
}
|
||
}
|
||
|
||
function updateNotepadStatus(message) {
|
||
const status = document.getElementById('notepad-status');
|
||
if (status) {
|
||
status.textContent = message;
|
||
setTimeout(() => {
|
||
status.textContent = '已保存至本地存储';
|
||
}, 2000);
|
||
}
|
||
}
|
||
|
||
function openMonitor() {
|
||
if (state.apps['monitor']) {
|
||
activateWindow('monitor');
|
||
return;
|
||
}
|
||
|
||
const content = `
|
||
<div class="monitor" id="monitor-content">
|
||
<div class="monitor-item">
|
||
<div class="monitor-item-title">CPU 使用率</div>
|
||
<div class="monitor-chart" id="cpu-chart"></div>
|
||
<div class="monitor-stats" id="cpu-stats">核心: 4 | 频率: 3.2GHz | 负载: 42%</div>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<div class="monitor-item-title">内存使用</div>
|
||
<div class="monitor-chart" id="mem-chart"></div>
|
||
<div class="monitor-stats" id="mem-stats">总共: 16GB | 已用: 9.8GB | 可用: 6.2GB</div>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<div class="monitor-item-title">磁盘 I/O</div>
|
||
<div class="monitor-chart" id="disk-chart"></div>
|
||
<div class="monitor-stats" id="disk-stats">读取: 12MB/s | 写入: 8MB/s</div>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<div class="monitor-item-title">网络状态</div>
|
||
<div class="monitor-chart" id="network-chart"></div>
|
||
<div class="monitor-stats" id="network-stats">下载: 45Mbps | 上传: 12Mbps</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
createWindow('monitor', '系统监控', 'fas fa-chart-line', content);
|
||
|
||
setTimeout(() => startMonitorUpdate(), 500);
|
||
}
|
||
|
||
function startMonitorUpdate() {
|
||
stopMonitorCharts();
|
||
|
||
if (!state.apps['monitor']) return;
|
||
|
||
state.monitorInterval = setInterval(() => {
|
||
if (!state.apps['monitor']) {
|
||
stopMonitorCharts();
|
||
return;
|
||
}
|
||
|
||
updateMonitorChart('cpu-chart', Math.floor(Math.random() * 40) + 30, 'cpu-stats',
|
||
'核心: 4 | 频率: 3.2GHz | 负载: ' + (Math.floor(Math.random() * 20) + 30) + '%');
|
||
|
||
updateMonitorChart('mem-chart', Math.floor(Math.random() * 30) + 40, 'mem-stats',
|
||
'总共: 16GB | 已用: ' + (Math.random() * 4 + 9).toFixed(1) + 'GB | 可用: ' + (Math.random() * 2 + 4).toFixed(1) + 'GB');
|
||
|
||
updateMonitorChart('disk-chart', Math.floor(Math.random() * 30) + 20, 'disk-stats',
|
||
'读取: ' + (Math.floor(Math.random() * 20) + 5) + 'MB/s | 写入: ' + (Math.floor(Math.random() * 15) + 3) + 'MB/s');
|
||
|
||
updateMonitorChart('network-chart', Math.floor(Math.random() * 30) + 20, 'network-stats',
|
||
'下载: ' + (Math.floor(Math.random() * 50) + 10) + 'Mbps | 上传: ' + (Math.floor(Math.random() * 20) + 5) + 'Mbps');
|
||
}, 2000);
|
||
}
|
||
|
||
function updateMonitorChart(chartId, value, statsId, statsText) {
|
||
const chart = document.getElementById(chartId);
|
||
const stats = document.getElementById(statsId);
|
||
|
||
if (chart && stats) {
|
||
chart.innerHTML = '';
|
||
const barContainer = document.createElement('div');
|
||
barContainer.className = 'monitor-bar-chart';
|
||
|
||
for (let i = 0; i < 8; i++) {
|
||
const barItem = document.createElement('div');
|
||
barItem.className = 'monitor-bar-item';
|
||
const randomValue = Math.random() * 30 + value - 15;
|
||
barItem.style.height = Math.max(5, randomValue) + '%';
|
||
barContainer.appendChild(barItem);
|
||
}
|
||
|
||
chart.appendChild(barContainer);
|
||
|
||
if (stats) {
|
||
stats.textContent = statsText;
|
||
}
|
||
}
|
||
}
|
||
|
||
function stopMonitorCharts() {
|
||
if (state.monitorInterval) {
|
||
clearInterval(state.monitorInterval);
|
||
state.monitorInterval = null;
|
||
}
|
||
}
|
||
|
||
function openAbout() {
|
||
if (state.apps['about']) {
|
||
activateWindow('about');
|
||
return;
|
||
}
|
||
|
||
const content = `
|
||
<div style="padding: 20px; line-height: 1.6; color: var(--neon-blue);">
|
||
<div style="text-align: center; margin-bottom: 20px;">
|
||
<h2 style="color: var(--neon-pink); font-family: 'Orbitron', sans-serif; margin-bottom: 10px;">NEON-OS</h2>
|
||
<p style="color: var(--neon-cyan);">赛博朋克未来操作系统</p>
|
||
</div>
|
||
|
||
<div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; margin-bottom: 15px;">
|
||
<h3 style="color: var(--neon-pink); margin-bottom: 8px;">系统规格</h3>
|
||
<p>版本: <span class="highlight">1.0.0</span></p>
|
||
<p>架构: WebAssembly/JS</p>
|
||
<p>构建日期: 2024</p>
|
||
</div>
|
||
|
||
<div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; margin-bottom: 15px;">
|
||
<h3 style="color: var(--neon-pink); margin-bottom: 8px;">功能特性</h3>
|
||
<ul style="margin-left: 20px;">
|
||
<li>完整的窗口管理系统</li>
|
||
<li>终端模拟器（支持Linux命令）</li>
|
||
<li>多媒体音乐播放器</li>
|
||
<li>系统监控与性能分析</li>
|
||
<li>本地化数据持久化</li>
|
||
<li>赛博朋克主题UI</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div style="text-align: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(5, 217, 232, 0.2);">
|
||
<p style="color: var(--neon-purple);">© 2024 NEON-OS Project | 全栈工程示例</p>
|
||
<p style="color: var(--neon-cyan); font-size: 0.8rem; margin-top: 8px;">右键桌面探索更多功能</p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
createWindow('about', '关于系统', 'fas fa-info-circle', content);
|
||
}
|
||
|
||
// 系统函数
|
||
function toggleStartMenu() {
|
||
const menu = document.getElementById('start-menu');
|
||
if (menu.style.display === 'block') {
|
||
menu.style.display = 'none';
|
||
} else {
|
||
menu.style.display = 'block';
|
||
setTimeout(() => {
|
||
document.addEventListener('click', closeStartMenuOnce);
|
||
}, 100);
|
||
}
|
||
}
|
||
|
||
function closeStartMenuOnce(e) {
|
||
const menu = document.getElementById('start-menu');
|
||
const startBtn = document.querySelector('.taskbar-start');
|
||
|
||
if (menu && menu.style.display === 'block' &&
|
||
!menu.contains(e.target) && !startBtn.contains(e.target)) {
|
||
menu.style.display = 'none';
|
||
document.removeEventListener('click', closeStartMenuOnce);
|
||
}
|
||
}
|
||
|
||
function toggleVolume() {
|
||
showNotification('info', '音量', '当前音量: ' + Math.round(state.settings.volume * 100) + '%');
|
||
}
|
||
|
||
function showNotification(type, title, message) {
|
||
if (!state.settings.notifications) return;
|
||
|
||
const area = document.getElementById('notification-area');
|
||
const notification = document.createElement('div');
|
||
notification.className = 'notification ' + type;
|
||
|
||
const icons = {
|
||
success: 'fa-check-circle',
|
||
error: 'fa-times-circle',
|
||
warning: 'fa-exclamation-triangle',
|
||
info: 'fa-info-circle'
|
||
};
|
||
|
||
notification.innerHTML = `
|
||
<div class="notification-header">
|
||
<div class="notification-title"><i class="fas ${icons[type]}"></i> ${title}</div>
|
||
<div class="notification-close" onclick="this.parentElement.parentElement.remove()">
|
||
<i class="fas fa-times"></i>
|
||
</div>
|
||
</div>
|
||
<div class="notification-body">${message}</div>
|
||
`;
|
||
|
||
area.appendChild(notification);
|
||
|
||
setTimeout(() => {
|
||
if (notification.parentElement) {
|
||
notification.style.opacity = '0';
|
||
notification.style.transform = 'translateX(100%)';
|
||
setTimeout(() => notification.remove(), 300);
|
||
}
|
||
}, 4000);
|
||
}
|
||
|
||
function closeContextMenuOnce(e) {
|
||
const contextMenu = document.getElementById('context-menu');
|
||
if (contextMenu && contextMenu.style.display === 'block' && !contextMenu.contains(e.target)) {
|
||
contextMenu.style.display = 'none';
|
||
document.removeEventListener('click', closeContextMenuOnce);
|
||
}
|
||
}
|
||
|
||
// 桌面右键菜单
|
||
document.addEventListener('contextmenu', (e) => {
|
||
const desktop = document.getElementById('desktop');
|
||
const contextMenu = document.getElementById('context-menu');
|
||
|
||
// 确保是在桌面上的右键
|
||
if (!desktop || desktop.style.display === 'none') return;
|
||
if (desktop.contains(e.target)) {
|
||
e.preventDefault();
|
||
contextMenu.style.display = 'block';
|
||
contextMenu.style.left = e.pageX + 'px';
|
||
contextMenu.style.top = e.pageY + 'px';
|
||
|
||
setTimeout(() => {
|
||
document.addEventListener('click', closeContextMenuOnce);
|
||
}, 100);
|
||
}
|
||
});
|
||
|
||
function refreshDesktop() {
|
||
if (state.apps['file-manager']) {
|
||
renderFileManager();
|
||
}
|
||
showNotification('success', '刷新', '桌面已刷新');
|
||
}
|
||
|
||
// 主题和壁纸应用
|
||
function applyTheme() {
|
||
const root = document.documentElement;
|
||
const theme = state.settings.theme;
|
||
|
||
const themes = {
|
||
cyberpunk: {
|
||
neonPink: '#ff2a6d',
|
||
neonBlue: '#05d9e8',
|
||
neonPurple: '#d100d1',
|
||
neonCyan: '#00ff9f',
|
||
darkBg: '#0d0d16'
|
||
},
|
||
retro: {
|
||
neonPink: '#ff7700',
|
||
neonBlue: '#00ff88',
|
||
neonPurple: '#ff00aa',
|
||
neonCyan: '#ffff00',
|
||
darkBg: '#1a1a2e'
|
||
},
|
||
minimal: {
|
||
neonPink: '#00ff88',
|
||
neonBlue: '#00ccff',
|
||
neonPurple: '#aa88ff',
|
||
neonCyan: '#ffffff',
|
||
darkBg: '#0a0a0a'
|
||
},
|
||
dark: {
|
||
neonPink: '#bb0044',
|
||
neonBlue: '#0088cc',
|
||
neonPurple: '#6600cc',
|
||
neonCyan: '#00cc88',
|
||
darkBg: '#000000'
|
||
},
|
||
light: {
|
||
neonPink: '#cc0066',
|
||
neonBlue: '#0066cc',
|
||
neonPurple: '#6600cc',
|
||
neonCyan: '#009966',
|
||
darkBg: '#f0f0f0'
|
||
}
|
||
};
|
||
|
||
const selectedTheme = themes[theme] || themes.cyberpunk;
|
||
|
||
root.style.setProperty('--neon-pink', selectedTheme.neonPink);
|
||
root.style.setProperty('--neon-blue', selectedTheme.neonBlue);
|
||
root.style.setProperty('--neon-purple', selectedTheme.neonPurple);
|
||
root.style.setProperty('--neon-cyan', selectedTheme.neonCyan);
|
||
root.style.setProperty('--dark-bg', selectedTheme.darkBg);
|
||
|
||
if (theme === 'light') {
|
||
root.style.setProperty('--glass-bg', 'rgba(255, 255, 255, 0.8)');
|
||
root.style.setProperty('--glass-border', 'rgba(0, 102, 204, 0.3)');
|
||
} else {
|
||
root.style.setProperty('--glass-bg', 'rgba(13, 13, 22, 0.7)');
|
||
root.style.setProperty('--glass-border', 'rgba(5, 217, 232, 0.3)');
|
||
}
|
||
}
|
||
|
||
function applyWallpaper() {
|
||
const bg = document.querySelector('.desktop-bg');
|
||
const wallpaper = state.settings.wallpaper;
|
||
|
||
if (!bg) return;
|
||
|
||
let background = '';
|
||
|
||
switch(wallpaper) {
|
||
case 'neon':
|
||
background = `linear-gradient(135deg, rgba(255, 42, 109, 0.1), rgba(5, 217, 232, 0.1)), radial-gradient(circle at 20% 50%, rgba(255, 42, 109, 0.1), transparent 50%), radial-gradient(circle at 80% 80%, rgba(5, 217, 232, 0.1), transparent 50%)`;
|
||
break;
|
||
case 'grid':
|
||
background = `linear-gradient(rgba(0, 255, 159, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 159, 0.05) 1px, transparent 1px), repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 159, 0.03) 2px, rgba(0, 255, 159, 0.03) 3px), repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 255, 159, 0.03) 2px, rgba(0, 255, 159, 0.03) 3px)`;
|
||
break;
|
||
case 'city':
|
||
background = `linear-gradient(180deg, rgba(13, 13, 22, 0.7), rgba(13, 13, 22, 0.3)), repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 42, 109, 0.1) 2px, rgba(255, 42, 109, 0.1) 3px)`;
|
||
break;
|
||
case 'matrix':
|
||
background = `linear-gradient(rgba(0, 255, 159, 0.02) 2px, transparent 2px), linear-gradient(90deg, rgba(0, 255, 159, 0.02) 2px, transparent 2px)`;
|
||
break;
|
||
default:
|
||
background = `linear-gradient(rgba(13, 13, 22, 0.9), rgba(13, 13, 22, 0.7)), repeating-linear-gradient(0deg, transparent, transparent 2px, var(--grid-color) 2px, var(--grid-color) 3px), repeating-linear-gradient(90deg, transparent, transparent 2px, var(--grid-color) 2px, var(--grid-color) 3px)`;
|
||
}
|
||
|
||
bg.style.background = background;
|
||
}
|
||
|
||
function saveSettings() {
|
||
localStorage.setItem('neon-os-settings', JSON.stringify(state.settings));
|
||
}
|
||
|
||
// 矩阵雨特效
|
||
function startMatrixRain() {
|
||
const canvas = document.getElementById('matrix-canvas');
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
canvas.style.display = 'block';
|
||
state.matrixRunning = true;
|
||
|
||
canvas.width = window.innerWidth;
|
||
canvas.height = window.innerHeight;
|
||
|
||
const cols = Math.floor(canvas.width / 20);
|
||
const drops = [];
|
||
const chars = '01abcdef0123456789@$%&*';
|
||
|
||
for (let i = 0; i < cols; i++) {
|
||
drops[i] = 1;
|
||
}
|
||
|
||
function draw() {
|
||
if (!state.matrixRunning) {
|
||
canvas.style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||
|
||
ctx.fillStyle = '#00ff9f';
|
||
ctx.font = '16px monospace';
|
||
|
||
for (let i = 0; i < drops.length; i++) {
|
||
const text = chars.charAt(Math.floor(Math.random() * chars.length));
|
||
ctx.fillText(text, i * 20, drops[i] * 20);
|
||
|
||
if (drops[i] * 20 > canvas.height && Math.random() > 0.975) {
|
||
drops[i] = 0;
|
||
}
|
||
|
||
drops[i]++;
|
||
}
|
||
|
||
requestAnimationFrame(draw);
|
||
}
|
||
|
||
draw();
|
||
|
||
const exitHandler = () => {
|
||
state.matrixRunning = false;
|
||
document.removeEventListener('keydown', exitHandler);
|
||
document.removeEventListener('click', exitHandler);
|
||
};
|
||
|
||
setTimeout(() => {
|
||
document.addEventListener('keydown', exitHandler);
|
||
document.addEventListener('click', exitHandler);
|
||
}, 100);
|
||
}
|
||
|
||
// 系统操作
|
||
function rebootSystem() {
|
||
showNotification('warning', '系统重启', '正在重启系统...');
|
||
setTimeout(() => {
|
||
location.reload();
|
||
}, 2000);
|
||
}
|
||
|
||
function logout() {
|
||
showNotification('info', '切换用户', '正在切换用户...');
|
||
|
||
Object.keys(state.apps).forEach(appId => closeWindow(appId));
|
||
|
||
state.currentDirectory = [];
|
||
|
||
setTimeout(() => {
|
||
document.getElementById('desktop').style.display = 'none';
|
||
document.getElementById('start-menu').style.display = 'none';
|
||
showLockScreen();
|
||
}, 1000);
|
||
}
|
||
|
||
function shutdown() {
|
||
showNotification('error', '关机', '系统正在关闭...');
|
||
const desktop = document.getElementById('desktop');
|
||
if (desktop) desktop.style.opacity = '0';
|
||
setTimeout(() => {
|
||
document.body.innerHTML = `
|
||
<div style="display: flex; justify-content: center; align-items: center; height: 100vh; background: #000; color: var(--neon-pink); font-family: 'Orbitron', sans-serif; font-size: 2rem;">
|
||
系统已关机
|
||
</div>
|
||
`;
|
||
}, 2000);
|
||
}
|
||
|
||
// 键盘快捷键
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.ctrlKey && e.altKey && e.key === 't') {
|
||
e.preventDefault();
|
||
openTerminal();
|
||
}
|
||
|
||
if (e.ctrlKey && e.altKey && e.key === 'w') {
|
||
e.preventDefault();
|
||
let topZIndex = 0;
|
||
let topAppId = null;
|
||
|
||
Object.entries(state.apps).forEach(([appId, app]) => {
|
||
const zIndex = parseInt(app.element.style.zIndex);
|
||
if (zIndex > topZIndex && !app.minimized) {
|
||
topZIndex = zIndex;
|
||
topAppId = appId;
|
||
}
|
||
});
|
||
|
||
if (topAppId) {
|
||
closeWindow(topAppId);
|
||
}
|
||
}
|
||
|
||
if (e.ctrlKey && e.altKey && e.key === 'm') {
|
||
e.preventDefault();
|
||
let topZIndex = 0;
|
||
let topAppId = null;
|
||
|
||
Object.entries(state.apps).forEach(([appId, app]) => {
|
||
const zIndex = parseInt(app.element.style.zIndex);
|
||
if (zIndex > topZIndex && !app.minimized) {
|
||
topZIndex = zIndex;
|
||
topAppId = appId;
|
||
}
|
||
});
|
||
|
||
if (topAppId) {
|
||
minimizeWindow(topAppId);
|
||
}
|
||
}
|
||
|
||
if (e.ctrlKey && e.altKey && e.key === 'e') {
|
||
e.preventDefault();
|
||
openApp('file-manager');
|
||
}
|
||
});
|
||
|
||
// 窗口点击事件（激活窗口）
|
||
document.addEventListener('click', (e) => {
|
||
const windowElement = e.target.closest('.window');
|
||
if (windowElement && !e.target.closest('.window-control')) {
|
||
const appId = windowElement.id.replace('window-', '');
|
||
activateWindow(appId);
|
||
}
|
||
});
|
||
|
||
// 响应式处理
|
||
window.addEventListener('resize', () => {
|
||
Object.values(state.apps).forEach(app => {
|
||
if (!app.maximized && !app.minimized) {
|
||
const rect = app.element.getBoundingClientRect();
|
||
if (rect.left > window.innerWidth || rect.top > window.innerHeight) {
|
||
app.element.style.left = '50px';
|
||
app.element.style.top = '50px';
|
||
}
|
||
}
|
||
});
|
||
|
||
const matrixCanvas = document.getElementById('matrix-canvas');
|
||
if (matrixCanvas && matrixCanvas.style.display !== 'none') {
|
||
matrixCanvas.width = window.innerWidth;
|
||
matrixCanvas.height = window.innerHeight;
|
||
}
|
||
});
|
||
|
||
// 系统初始化
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
console.log('[INIT] DOM加载完成，开始初始化系统');
|
||
initSystem();
|
||
|
||
setTimeout(() => {
|
||
applyTheme();
|
||
applyWallpaper();
|
||
}, 100);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|