<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>藤原的个人终端</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap">
<style>
:root {
--editor-bg: #1e1e1e;
--editor-secondary-bg: #252526;
--line-color: #858585;
--text-color: #d4d4d4;
--keyword-color: #569cd6;
--string-color: #ce9178;
--comment-color: #6a9955;
--number-color: #b5cea8;
--function-color: #dcdcaa;
--font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
--header-bg: #2d2d2d;
--window-btn-close: #ff5f56;
--window-btn-minimize: #ffbd2e;
--window-btn-max: #27c93f;
--ai-output-color: #4ec9b0;
--user-input-color: #d7ba7d;
--video-bg: #000000;
--accent-color: #0a84ff;
--accent-hover: #409eff;
--box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
--border-radius: 8px;
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
/* 起始页专用变量 - 暗色主题 */
--startup-bg: #0a0a0a;
--startup-overlay: radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.08) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(120, 219, 255, 0.06) 0%, transparent 50%);
--startup-card-bg: rgba(255, 255, 255, 0.04);
--startup-card-hover: rgba(255, 255, 255, 0.08);
--startup-card-border: rgba(255, 255, 255, 0.08);
--startup-text: #ffffff;
--startup-text-secondary: rgba(255, 255, 255, 0.65);
--startup-text-tertiary: rgba(255, 255, 255, 0.45);
--startup-accent: #5b9bd5;
--startup-accent-hover: #7bb3e8;
--startup-search-bg: rgba(255, 255, 255, 0.06);
--startup-search-focus: rgba(255, 255, 255, 0.1);
--startup-search-border: rgba(255, 255, 255, 0.12);
--startup-icon-bg: rgba(255, 255, 255, 0.08);
--startup-icon-hover: rgba(91, 155, 213, 0.2);
--weather-bg: rgba(255, 255, 255, 0.05);
--weather-border: rgba(255, 255, 255, 0.1);
--weather-widget-bg: rgba(255, 255, 255, 0.08);
--weather-widget-border: rgba(255, 255, 255, 0.12);
}
[data-theme="light"] {
--editor-bg: #f5f5f5;
--editor-secondary-bg: #ebebeb;
--line-color: #858585;
--text-color: #333333;
--keyword-color: #0000ff;
--string-color: #a31515;
--comment-color: #008000;
--number-color: #098658;
--function-color: #795e26;
--header-bg: #e5e5e5;
--ai-output-color: #098658;
--user-input-color: #0000ff;
--video-bg: #f0f0f0;
--box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
/* 亮色主题起始页变量 */
--startup-bg: #fafbfc;
--startup-overlay: radial-gradient(circle at 20% 50%, rgba(91, 155, 213, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.06) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(120, 219, 255, 0.05) 0%, transparent 50%);
--startup-card-bg: rgba(255, 255, 255, 0.8);
--startup-card-hover: rgba(255, 255, 255, 0.95);
--startup-card-border: rgba(0, 0, 0, 0.06);
--startup-text: #1a1a1a;
--startup-text-secondary: rgba(26, 26, 26, 0.7);
--startup-text-tertiary: rgba(26, 26, 26, 0.5);
--startup-accent: #0066cc;
--startup-accent-hover: #0052a3;
--startup-search-bg: rgba(255, 255, 255, 0.9);
--startup-search-focus: rgba(255, 255, 255, 1);
--startup-search-border: rgba(0, 0, 0, 0.1);
--startup-icon-bg: rgba(0, 0, 0, 0.04);
--startup-icon-hover: rgba(0, 102, 204, 0.1);
--weather-bg: rgba(255, 255, 255, 0.9);
--weather-border: rgba(0, 0, 0, 0.1);
--weather-widget-bg: rgba(255, 255, 255, 0.9);
--weather-widget-border: rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--editor-bg);
color: var(--text-color);
font-family: var(--font-family);
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
transition: background-color var(--transition-normal), color var(--transition-normal);
background-image:
radial-gradient(circle at 10% 20%, rgba(100, 100, 255, 0.03) 0%, transparent 20%),
radial-gradient(circle at 90% 80%, rgba(100, 255, 100, 0.03) 0%, transparent 20%);
background-attachment: fixed;
}
/* 编辑器主体 */
.editor {
width: 100%;
max-width: 900px;
margin: 20px auto;
background: var(--editor-bg);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
transition: all var(--transition-normal);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
height: 80vh;
will-change: transform;
position: relative;
z-index: 100;
}
.editor:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
.editor-header {
background: var(--header-bg);
padding: 12px;
border-radius: var(--border-radius) var(--border-radius) 0 0;
display: flex;
align-items: center;
gap: 8px;
transition: background-color var(--transition-normal);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.window-btn {
width: 12px;
height: 12px;
border-radius: 50%;
transition: all var(--transition-fast);
position: relative;
cursor: pointer;
}
.window-btn:hover::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
}
.close { background: var(--window-btn-close); }
.minimize {
background: var(--window-btn-minimize);
cursor: default; /* 禁用点击 */
opacity: 0.5; /* 视觉上表示禁用 */
}
.minimize:hover::after { display: none; } /* 移除悬停效果 */
.maximize { background: var(--window-btn-max); }
.title-bar {
color: var(--line-color);
margin-left: 20px;
font-size: 0.9em;
transition: color var(--transition-normal);
}
.editor-content {
padding: 20px;
counter-reset: line;
font-size: 14px;
overflow-x: auto;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--line-color) transparent;
flex: 1;
}
.editor-content::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.editor-content::-webkit-scrollbar-track {
background: transparent;
}
.editor-content::-webkit-scrollbar-thumb {
background-color: var(--line-color);
border-radius: 4px;
}
.line {
display: flex;
padding: 2px 0;
position: relative;
min-height: 1.6em;
}
.line::before {
counter-increment: line;
content: counter(line);
color: var(--line-color);
width: 2em;
text-align: right;
padding-right: 1em;
position: absolute;
transition: color var(--transition-normal);
opacity: 0.7;
}
.line-content {
padding-left: 3em;
width: 100%;
}
.indent { margin-left: 2em; }
.indent-2 { margin-left: 4em; }
.keyword { color: var(--keyword-color); }
.string { color: var(--string-color); }
.comment { color: var(--comment-color); }
.number { color: var(--number-color); }
.function { color: var(--function-color); }
.ai-output { color: var(--ai-output-color); }
.user-input { color: var(--user-input-color); }
a {
color: var(--accent-color);
text-decoration: none;
transition: all var(--transition-fast);
position: relative;
}
a:hover {
color: var(--accent-hover);
}
a::after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: 0;
left: 0;
background-color: var(--accent-hover);
transition: width var(--transition-normal);
}
a:hover::after {
width: 100%;
}
.cursor {
display: inline-block;
width: 2px;
height: 1.2em;
background: var(--text-color);
margin-left: 2px;
animation: blink 1s step-end infinite;
vertical-align: middle;
transition: background var(--transition-normal);
}
@keyframes blink {
50% { opacity: 0; }
}
/* 输入行 */
.input-line {
display: flex;
align-items: center;
background: var(--editor-secondary-bg);
padding: 8px 10px;
border-radius: 4px;
transition: all var(--transition-normal);
margin: 0 20px 20px;
position: sticky;
bottom: 0;
z-index: 10;
}
.input-line:focus-within {
box-shadow: 0 0 0 2px var(--accent-color);
}
.input-line::before {
content: ">";
color: var(--accent-color);
width: 2em;
text-align: right;
padding-right: 1em;
font-weight: bold;
}
.input-line input {
flex: 1;
background: transparent;
border: none;
color: var(--text-color);
font-family: var(--font-family);
font-size: 14px;
outline: none;
padding: 2px 0;
}
/* 高级起始页样式 */
/* 美化起始页背景 */
.shutdown-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--startup-bg);
background-image:
var(--startup-overlay),
radial-gradient(circle at 30% 40%, rgba(120, 119, 198, 0.15) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
linear-gradient(135deg, rgba(91, 155, 213, 0.05) 0%, rgba(255, 119, 198, 0.05) 100%);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-slow);
color: var(--startup-text);
font-family: 'Inter', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
overflow-y: auto;
padding: 0;
animation: backgroundShift 20s ease-in-out infinite;
}
@keyframes backgroundShift {
0%, 100% {
background-position: 0% 0%, 30% 40%, 70% 80%, 0% 0%;
}
50% {
background-position: 100% 100%, 60% 20%, 40% 60%, 100% 100%;
}
}
.shutdown-screen.active {
opacity: 1;
pointer-events: all;
}
.startup-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
position: relative;
}
/* 右上角按钮组和天气组件 */
.startup-top-section {
position: fixed;
top: 24px;
right: 24px;
display: flex;
align-items: center;
gap: 12px;
z-index: 1002;
}
/* 天气小组件 - 优化为与终端按钮相同大小 */
.weather-widget {
width: 48px;
height: 48px;
background: var(--weather-widget-bg);
border: 1px solid var(--weather-widget-border);
border-radius: 12px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
cursor: pointer;
transition: all var(--transition-normal);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.weather-widget:hover {
background: var(--startup-card-hover);
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.weather-icon-container {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.weather-icon-container img {
width: 20px;
height: 20px;
object-fit: cover;
border-radius: 4px;
}
.weather-icon-container svg {
width: 20px;
height: 20px;
color: var(--startup-text-secondary);
}
/* 天气信息悬浮提示 */
.weather-tooltip {
position: absolute;
top: 60px;
right: 0;
background: var(--startup-card-bg);
border: 1px solid var(--startup-card-border);
border-radius: 8px;
padding: 8px 12px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
opacity: 0;
pointer-events: none;
transition: all var(--transition-normal);
white-space: nowrap;
font-size: 0.75rem;
z-index: 1003;
min-width: 120px;
}
.weather-widget:hover .weather-tooltip {
opacity: 1;
}
.weather-tooltip::before {
content: '';
position: absolute;
top: -4px;
right: 12px;
width: 8px;
height: 8px;
background: var(--startup-card-bg);
border: 1px solid var(--startup-card-border);
border-bottom: none;
border-right: none;
transform: rotate(45deg);
}
.weather-loading {
color: var(--startup-text-secondary);
font-size: 0.75rem;
}
.weather-error {
color: #ff6b6b;
font-size: 0.75rem;
}
.startup-btn {
width: 48px;
height: 48px;
background: var(--startup-card-bg);
border: 1px solid var(--startup-card-border);
border-radius: 12px;
cursor: pointer;
transition: all var(--transition-normal);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
display: flex;
align-items: center;
justify-content: center;
}
.startup-btn:hover {
background: var(--startup-card-hover);
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.startup-btn svg {
width: 20px;
height: 20px;
color: var(--startup-text-secondary);
transition: color var(--transition-normal);
}
.startup-btn:hover svg {
color: var(--startup-accent);
}
/* 天气弹窗 */
.weather-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: none;
align-items: center;
justify-content: center;
z-index: 2000;
}
.weather-modal.active {
display: flex;
}
.weather-content {
background: var(--weather-bg);
border: 1px solid var(--weather-border);
border-radius: 16px;
padding: 24px;
max-width: 1000px;
max-height: 80vh;
overflow-y: auto;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
position: relative;
margin: 20px;
width: calc(100% - 40px);
}
.weather-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.weather-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--startup-text);
}
.weather-close {
width: 32px;
height: 32px;
border: none;
background: var(--startup-icon-bg);
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-normal);
}
.weather-close:hover {
background: var(--startup-icon-hover);
}
.weather-close svg {
width: 16px;
height: 16px;
color: var(--startup-text-secondary);
}
.weather-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.weather-day {
background: var(--startup-icon-bg);
border: 1px solid var(--startup-card-border);
border-radius: 12px;
padding: 16px;
transition: all var(--transition-normal);
text-align: center;
}
.weather-day:hover {
background: var(--startup-icon-hover);
transform: translateY(-2px);
}
.weather-day.today {
background: var(--startup-accent);
color: white;
}
.weather-day.today:hover {
background: var(--startup-accent-hover);
}
.weather-day-header {
margin-bottom: 12px;
}
.weather-date {
font-weight: 600;
color: inherit;
font-size: 0.875rem;
}
.weather-week {
font-size: 0.75rem;
color: inherit;
opacity: 0.7;
margin-top: 2px;
}
.weather-main {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.weather-icon {
width: 40px;
height: 40px;
border-radius: 8px;
object-fit: cover;
}
.weather-temp-container {
text-align: center;
}
.weather-temp-high {
font-size: 1.125rem;
font-weight: 600;
color: inherit;
}
.weather-temp-low {
font-size: 0.875rem;
color: inherit;
opacity: 0.7;
}
.weather-desc {
font-size: 0.75rem;
color: inherit;
opacity: 0.8;
text-align: center;
line-height: 1.3;
}
.weather-modal-loading {
text-align: center;
padding: 40px;
color: var(--startup-text-secondary);
}
.weather-modal-error {
text-align: center;
padding: 40px;
color: #ff6b6b;
}
/* 顶部区域 */
.startup-header {
width: 100%;
padding: 32px 0 48px;
text-align: center;
}
/* 美化标题区域 */
.startup-logo {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 8px;
background: linear-gradient(135deg, var(--startup-accent), var(--startup-accent-hover), #ff6b9d);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.02em;
animation: logoGlow 3s ease-in-out infinite alternate;
}
@keyframes logoGlow {
0% {
filter: drop-shadow(0 0 10px rgba(91, 155, 213, 0.3));
}
100% {
filter: drop-shadow(0 0 20px rgba(91, 155, 213, 0.6));
}
}
.startup-subtitle {
font-size: 1rem;
color: var(--startup-text-secondary);
font-weight: 400;
margin-bottom: 16px;
}
.startup-time {
font-size: 0.875rem;
color: var(--startup-text-tertiary);
font-weight: 400;
padding: 8px 16px;
background: var(--startup-card-bg);
border: 1px solid var(--startup-card-border);
border-radius: 20px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
display: inline-block;
}
/* 搜索区域 */
.startup-search-section {
width: 100%;
max-width: 680px;
margin-bottom: 64px;
}
.startup-search-container {
position: relative;
width: 100%;
}
/* 美化搜索框 */
.startup-search-input {
width: 100%;
height: 56px;
padding: 0 24px 0 56px;
font-size: 1rem;
border: 1px solid var(--startup-search-border);
border-radius: 28px;
background: var(--startup-search-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
color: var(--startup-text);
transition: all var(--transition-normal);
font-family: inherit;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.startup-search-input:focus {
outline: none;
background: var(--startup-search-focus);
border-color: var(--startup-accent);
box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.1), 0 8px 30px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.startup-search-input::placeholder {
color: var(--startup-text-tertiary);
}
.startup-search-icon {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
color: var(--startup-text-tertiary);
pointer-events: none;
}
.startup-search-engine {
position: absolute;
right: 8px;
top: 8px;
height: 40px;
display: flex;
align-items: center;
padding: 0 16px;
background: var(--startup-icon-bg);
border: 1px solid var(--startup-card-border);
border-radius: 20px;
cursor: pointer;
transition: all var(--transition-normal);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.startup-search-engine:hover {
background: var(--startup-icon-hover);
transform: scale(1.02);
}
.startup-search-engine img {
width: 18px;
height: 18px;
margin-right: 8px;
border-radius: 50%;
object-fit: contain;
}
.startup-search-engine span {
font-size: 0.875rem;
color: var(--startup-text-secondary);
font-weight: 500;
margin-right: 6px;
}
.startup-search-engine svg {
width: 12px;
height: 12px;
fill: var(--startup-text-tertiary);
}
/* 内容区域 */
.startup-content {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
gap: 32px;
margin-bottom: 48px;
}
.startup-section {
width: 100%;
}
.startup-section-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--startup-text);
margin-bottom: 20px;
padding-left: 4px;
}
.startup-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
/* 美化卡片 */
.startup-card {
background: var(--startup-card-bg);
border: 1px solid var(--startup-card-border);
border-radius: 16px;
padding: 24px;
transition: all var(--transition-normal);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.startup-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--startup-accent), var(--startup-accent-hover));
opacity: 0;
transition: opacity var(--transition-normal);
}
.startup-card:hover {
background: var(--startup-card-hover);
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.startup-card:hover::before {
opacity: 1;
}
.startup-card-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.startup-card-icon {
width: 24px;
height: 24px;
margin-right: 12px;
color: var(--startup-accent);
}
.startup-card-title {
font-size: 1rem;
font-weight: 600;
color: var(--startup-text);
}
.startup-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
}
.startup-link {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 12px;
background: var(--startup-icon-bg);
border: 1px solid var(--startup-card-border);
border-radius: 12px;
text-decoration: none;
color: var(--startup-text-secondary);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.startup-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.6s ease;
}
.startup-link:hover::before {
left: 100%;
}
.startup-link:hover {
background: var(--startup-icon-hover);
color: var(--startup-text);
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.startup-link-icon {
width: 40px;
height: 40px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
background: var(--startup-card-bg);
border: 1px solid var(--startup-card-border);
border-radius: 10px;
transition: all var(--transition-normal);
}
.startup-link:hover .startup-link-icon {
background: var(--startup-accent);
border-color: var(--startup-accent);
box-shadow: 0 0 20px rgba(91, 155, 213, 0.3);
}
.startup-link-icon img {
width: 20px;
height: 20px;
object-fit: contain;
filter: brightness(1.1);
}
.startup-link:hover .startup-link-icon img {
filter: brightness(1.3);
}
.startup-link-name {
font-size: 0.875rem;
font-weight: 500;
text-align: center;
line-height: 1.3;
}
/* 思考动画优化 */
.thinking-animation {
display: inline-block;
position: relative;
width: 60px;
height: 20px;
margin-left: 8px;
}
.thinking-animation span {
position: absolute;
width: 6px;
height: 6px;
background: var(--ai-output-color);
border-radius: 50%;
animation: thinking 1.4s infinite ease-in-out;
}
.thinking-animation span:nth-child(1) {
left: 0;
animation-delay: 0s;
}
.thinking-animation span:nth-child(2) {
left: 12px;
animation-delay: 0.2s;
}
.thinking-animation span:nth-child(3) {
left: 24px;
animation-delay: 0.4s;
}
@keyframes thinking {
0%, 80%, 100% {
transform: scale(0.8);
opacity: 0.5;
}
40% {
transform: scale(1.2);
opacity: 1;
}
}
/* 命令面板样式 */
.command-palette {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 600px;
background: var(--editor-bg);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
z-index: 1000;
display: none;
border: 1px solid rgba(255, 255, 255, 0.1);
max-height: 70vh;
overflow: hidden;
}
.command-palette-content {
padding: 15px;
max-height: calc(70vh - 50px);
overflow-y: auto;
}
.command-search {
width: 100%;
background: var(--editor-secondary-bg);
border: 1px solid var(--line-color);
color: var(--text-color);
padding: 12px 16px;
border-radius: 8px;
font-family: var(--font-family);
margin-bottom: 15px;
font-size: 14px;
transition: all var(--transition-normal);
}
.command-search:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.3);
}
.command-search::placeholder {
color: var(--line-color);
}
.command-list {
max-height: 50vh;
overflow-y: auto;
}
.command-item {
padding: 12px 16px;
cursor: pointer;
border-radius: 6px;
display: flex;
align-items: center;
gap: 12px;
margin: 4px 0;
transition: all var(--transition-fast);
border: 1px solid transparent;
}
.command-item:hover {
background: var(--editor-secondary-bg);
border-color: var(--accent-color);
}
.command-item.selected {
background: var(--accent-color);
color: white;
}
.command-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.command-content {
flex: 1;
min-width: 0;
}
.command-title {
font-weight: 500;
margin-bottom: 2px;
}
.command-description {
font-size: 0.85em;
opacity: 0.7;
line-height: 1.3;
}
.command-shortcut {
margin-left: auto;
color: var(--line-color);
font-size: 0.75em;
background: var(--editor-secondary-bg);
padding: 4px 8px;
border-radius: 4px;
font-family: var(--font-family);
}
.command-category {
font-size: 0.8em;
color: var(--accent-color);
padding: 8px 16px;
margin: 8px 0 4px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-weight: 600;
}
.command-category:first-child {
border-top: none;
margin-top: 0;
}
/* 命令历史记录 */
.command-history {
margin-top: 20px;
background: var(--editor-secondary-bg);
border-radius: var(--border-radius);
padding: 15px;
display: none;
}
.history-title {
font-size: 0.9em;
margin-bottom: 10px;
color: var(--accent-color);
font-weight: 600;
}
.history-list {
max-height: 200px;
overflow-y: auto;
}
.history-item {
padding: 6px 0;
cursor: pointer;
display: flex;
align-items: center;
transition: color var(--transition-fast);
font-size: 0.9em;
}
.history-item:hover {
color: var(--accent-color);
}
.history-item::before {
content: ">";
margin-right: 10px;
color: var(--line-color);
font-weight: bold;
}
/* 响应式设计 */
@media (max-width: 768px) {
body {
padding: 10px;
}
.editor {
width: 100%;
margin: 0;
font-size: 14px;
height: 90vh;
}
.editor-content {
padding: 15px 10px;
}
.line-content {
padding-left: 2.5em;
}
.indent { margin-left: 1.5em; }
.indent-2 { margin-left: 3em; }
.title-bar {
font-size: 0.8em;
margin-left: 10px;
}
.window-btn {
width: 10px;
height: 10px;
}
/* 起始页移动端适配 */
.startup-container {
padding: 0 16px;
}
.startup-top-section {
top: 16px;
right: 16px;
gap: 8px;
}
.weather-widget,
.startup-btn {
width: 44px;
height: 44px;
}
.weather-widget svg,
.startup-btn svg {
width: 18px;
height: 18px;
}
.weather-tooltip {
top: 50px;
right: -20px;
font-size: 0.7rem;
min-width: 100px;
}
.weather-tooltip::before {
right: 25px;
}
.startup-header {
padding: 24px 0 32px;
}
.startup-logo {
font-size: 2rem;
}
.startup-subtitle {
font-size: 0.9rem;
}
.startup-search-section {
margin-bottom: 48px;
}
.startup-search-input {
height: 48px;
padding: 0 20px 0 48px;
font-size: 0.9rem;
}
.startup-search-icon {
left: 16px;
width: 18px;
height: 18px;
}
.startup-search-engine {
right: 6px;
top: 6px;
height: 36px;
padding: 0 12px;
}
.startup-search-engine span {
display: none;
}
.startup-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.startup-card {
padding: 20px;
}
.startup-links {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
}
.startup-link {
padding: 12px 8px;
}
.startup-link-icon {
width: 36px;
height: 36px;
margin-bottom: 8px;
}
.startup-link-icon img {
width: 18px;
height: 18px;
}
.startup-link-name {
font-size: 0.8rem;
}
.startup-content {
gap: 24px;
margin-bottom: 32px;
}
.weather-content {
margin: 20px;
max-height: calc(100vh - 40px);
}
.weather-grid {
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.weather-day {
padding: 12px;
}
}
@media (max-width: 480px) {
.editor-content {
font-size: 12px;
}
.indent { margin-left: 1em; }
.indent-2 { margin-left: 2em; }
.startup-logo {
font-size: 1.75rem;
}
.startup-search-input {
height: 44px;
}
.startup-card {
padding: 16px;
}
.startup-links {
grid-template-columns: repeat(3, 1fr);
}
.weather-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 滚动条优化 */
* {
scrollbar-width: thin;
scrollbar-color: var(--line-color) transparent;
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: var(--line-color);
border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
background-color: var(--accent-color);
}
/* 起始页滚动条 */
.shutdown-screen::-webkit-scrollbar {
width: 6px;
}
.shutdown-screen::-webkit-scrollbar-thumb {
background-color: var(--startup-text-tertiary);
border-radius: 3px;
}
</style>
</head>
<body>
<!-- 高级起始页 -->
<div class="shutdown-screen active" id="shutdownScreen">
<!-- 右上角天气和按钮组 -->
<div class="startup-top-section">
<!-- 天气小组件 -->
<div class="weather-widget" id="weatherWidget">
<div class="weather-icon-container" id="weatherIconContainer">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
</svg>
</div>
<div class="weather-tooltip" id="weatherTooltip">
<div id="weatherLocation">正在获取位置...</div>
<div id="weatherTemp">--°</div>
<div id="weatherDesc">加载中...</div>
</div>
</div>
<!-- 终端按钮 -->
<div class="startup-btn" id="startupTerminalBtn" title="打开终端">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="4 17 10 11 4 5"></polyline>
<line x1="12" y1="19" x2="20" y2="19"></line>
</svg>
</div>
</div>
<div class="startup-container">
<header class="startup-header">
<h1 class="startup-logo">Teng Yuan</h1>
<p class="startup-subtitle">智能终端 · 高效工作 · 极致体验</p>
<div class="startup-time" id="startupTime"></div>
</header>
<section class="startup-search-section">
<div class="startup-search-container">
<svg class="startup-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.35-4.35"></path>
</svg>
<form id="startup-search-form" action="https://www.google.com/search" method="get" target="_blank">
<input class="startup-search-input" type="text" name="q" placeholder="搜索互联网，发现无限可能..." autofocus>
<div class="startup-search-engine" id="startup-engine-selector">
<img src="https://www.google.com/favicon.ico" alt="Google"
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJ3aGl0ZSI+PHBhdGggZD0iTTEyIDJhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTIgMnptMCAxOGE4IDggMCAxIDEgOC04IDggOCAwIDAgMS04IDh6Ii8+PHBhdGggZD0iTTEyIDhhNCA0IDAgMSAwIDQgNCA0IDQgMCAwIDAtNC00em0wIDZhMiAyIDAgMSAxIDItMiAyIDIgMCAwIDEtMiAyeiIvPjwvc3ZnPg=='">
<span>Google</span>
<svg viewBox="0 0 16 16">
<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
</svg>
</div>
</form>
</div>
</section>
<main class="startup-content">
<section class="startup-section">
<h2 class="startup-section-title">常用网站</h2>
<div class="startup-grid">
<div class="startup-card">
<div class="startup-card-header">
<svg class="startup-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<polygon points="10 8 16 12 10 16 10 8"></polygon>
</svg>
<h3 class="startup-card-title">娱乐媒体</h3>
</div>
<div class="startup-links">
<a href="https://www.youtube.com" class="startup-link" target="_blank">
<div class="startup-link-icon">
<img src="https://www.youtube.com/favicon.ico" alt="YouTube">
</div>
<div class="startup-link-name">YouTube</div>
</a>
<a href="https://www.bilibili.com" class="startup-link" target="_blank">
<div class="startup-link-icon">
<img src="https://www.bilibili.com/favicon.ico" alt="Bilibili">
</div>
<div class="startup-link-name">Bilibili</div>
</a>
<a href="https://music.163.com" class="startup-link" target="_blank">
<div class="startup-link-icon">
<img src="https://music.163.com/favicon.ico" alt="网易云音乐">
</div>
<div class="startup-link-name">网易云音乐</div>
</a>
<a href="https://www.netflix.com" class="startup-link" target="_blank">
<div class="startup-link-icon">
<img src="https://www.netflix.com/favicon.ico" alt="Netflix">
</div>
<div class="startup-link-name">Netflix</div>
</a>
</div>
</div>
<div class="startup-card">
<div class="startup-card-header">
<svg class="startup-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14,2 14,8 20,8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
</svg>
<h3 class="startup-card-title">开发工具</h3>
</div>
<div class="startup-links">
<a href="https://github.com" class="startup-link" target="_blank">
<div class="startup-link-icon">
<img src="https://github.com/favicon.ico" alt="GitHub">
</div>
<div class="startup-link-name">GitHub</div>
</a>
<a href="https://stackoverflow.com" class="startup-link" target="_blank">
<div class="startup-link-icon">
<img src="https://stackoverflow.com/favicon.ico" alt="Stack Overflow">
</div>
<div class="startup-link-name">Stack Overflow</div>
</a>
<a href="https://developer.mozilla.org" class="startup-link" target="_blank">
<div class="startup-link-icon">
<img src="https://developer.mozilla.org/favicon.ico" alt="MDN">
</div>
<div class="startup-link-name">MDN</div>
</a>
<a href="https://v0.dev" class="startup-link" target="_blank">
<div class="startup-link-icon">
<img src="https://v0.dev/favicon.ico" alt="v0">
</div>
<div class="startup-link-name">v0.dev</div>
</a>
</div>
</div>
</div>
</section>
<section class="startup-section">
<h2 class="startup-section-title">AI 工具</h2>
<div class="startup-grid">
<div class="startup-card">
<div class="startup-card-header">
<svg class="startup-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
<line x1="12" y1="22.08" x2="12" y2="12"></line>
</svg>
<h3 class="startup-card-title">智能助手</h3>
</div>
<div class="startup-links">
<a href="https://chat.openai.com" class="startup-link" target="_blank">
<div class="startup-link-icon">
<img src="https://chat.openai.com/favicon.ico" alt="ChatGPT">
</div>
<div class="startup-link-name">ChatGPT</div>
</a>
<a href="https://claude.ai" class="startup-link" target="_blank">
<div class="startup-link-icon">
<img src="https://claude.ai/favicon.ico" alt="Claude">
</div>
<div class="startup-link-name">Claude</div>
</a>
<a href="https://www.midjourney.com" class="startup-link" target="_blank">
<div class="startup-link-icon">
<img src="https://www.midjourney.com/favicon.ico" alt="Midjourney">
</div>
<div class="startup-link-name">Midjourney</div>
</a>
<a href="https://copilot.microsoft.com" class="startup-link" target="_blank">
<div class="startup-link-icon">
<img src="https://copilot.microsoft.com/favicon.ico" alt="Copilot">
</div>
<div class="startup-link-name">Copilot</div>
</a>
</div>
</div>
<div class="startup-card">
<div class="startup-card-header">
<svg class="startup-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"></circle>
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
</path>
</svg>
<h3 class="startup-card-title">实用工具</h3>
</div>
<div class="startup-links">
<a href="https://www.google.com" class="startup-link" target="_blank">
<div class="startup-link-icon">
<img src="https://www.google.com/favicon.ico" alt="Google">
</div>
<div class="startup-link-name">Google</div>
</a>
<a href="https://translate.google.com" class="startup-link" target="_blank">
<div class="startup-link-icon">
<img src="https://translate.google.com/favicon.ico" alt="Google 翻译">
</div>
<div class="startup-link-name">Google 翻译</div>
</a>
<a href="https://www.notion.so" class="startup-link" target="_blank">
<div class="startup-link-icon">
<img src="https://www.notion.so/favicon.ico" alt="Notion">
</div>
<div class="startup-link-name">Notion</div>
</a>
<a href="https://www.figma.com" class="startup-link" target="_blank">
<div class="startup-link-icon">
<img src="https://www.figma.com/favicon.ico" alt="Figma">
</div>
<div class="startup-link-name">Figma</div>
</a>
</div>
</div>
</div>
</section>
</main>
</div>
</div>
<!-- 天气弹窗 -->
<div class="weather-modal" id="weatherModal">
<div class="weather-content">
<div class="weather-header">
<h2 class="weather-title">15日天气预报</h2>
<button class="weather-close" id="weatherClose">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div id="weatherModalContent">
<div class="weather-modal-loading">正在加载天气数据...</div>
</div>
</div>
</div>
<!-- 个人终端 -->
<div class="editor" id="mainEditor" style="opacity: 0; pointer-events: none;">
<div class="editor-header" id="editorHeader">
<span class="window-btn close" id="closeBtn"></span>
<span class="window-btn minimize" id="minimizeBtn"></span>
<span class="window-btn maximize" id="maximizeBtn"></span>
<span class="title-bar">terminal.js - 藤原的个人终端</span>
</div>
<div class="editor-content" id="editorContent">
<div class="line">
<div class="line-content"><span class="comment">// 个人信息配置</span></div>
</div>
<div class="line">
<div class="line-content"><span class="keyword">const</span> <span class="function">profile</span> = {</div>
</div>
<div class="line">
<div class="line-content indent"><span class="keyword">name</span>: <span class="string">"藤原"</span>,</div>
</div>
<div class="line">
<div class="line-content indent"><span class="keyword">title</span>: <span class="string">"职场牛马！！！"</span>,</div>
</div>
<div class="line">
<div class="line-content indent"><span class="keyword">contact</span>: {</div>
</div>
<div class="line">
<div class="line-content indent-2"><span class="keyword">email</span>: <span class="string"><a href="mailto:2083737075@qq.com">"2083737075@qq.com"</a></span>,</div>
</div>
<div class="line">
<div class="line-content indent-2"><span class="keyword">website</span>: <span class="string"><a href="http://tengyuan.icu" target="_blank">"TengYuan.icu"</a></span>,</div>
</div>
<div class="line">
<div class="line-content indent-2"><span class="keyword">FileCodeBox</span>: <span class="string"><a href="http://wp.tengyuan.icu/" target="_blank">"wp.tengyuan.icu"</a></span>,</div>
</div>
<div class="line">
<div class="line-content indent">},</div>
</div>
<div class="line">
<div class="line-content indent"><span class="keyword">links</span>: {</div>
</div>
<div class="line">
<div class="line-content indent-2"><span class="keyword">travel blog</span>: <span class="string"><a href="http://blog.tengyuan.icu/" target="_blank">"blog.tengyuan.icu"</a></span>,</div>
</div>
<div class="line">
<div class="line-content indent-2"><span class="keyword">birthday</span>: <span class="string"><a href="http://sr.0814.cn" target="_blank">"2001/11/01"</a></span>,</div>
</div>
<div class="line">
<div class="line-content indent">},</div>
</div>
<div class="line">
<div class="line-content indent"><span class="comment">// 座右铭</span></div>
</div>
<div class="line">
<div class="line-content indent"><span class="keyword">motto</span>: <span class="string">"以清简代码，筑玖维数字宇宙。"</span>,</div>
</div>
<div class="line">
<div class="line-content indent"><span class="keyword">copyright</span>: <span class="string">"2017-<span id="year"></span> 藤原"</span>,</div>
</div>
<div class="line">
<div class="line-content">};</div>
</div>
<div class="line">
<div class="line-content"><span class="comment">// 终端交互</span></div>
</div>
<div class="line">
<div class="line-content"><span class="function">console</span>.<span class="function">log</span>(<span class="string">"欢迎访问藤原的个人终端"</span>);</div>
</div>
<div class="line">
<div class="line-content"><span class="function">console</span>.<span class="function">log</span>(<span class="string">"输入 'help' 获取可用命令"</span>);</div>
</div>
</div>
<!-- 输入行 -->
<div class="input-line">
<input type="text" id="userInput" placeholder="输入命令..." autocomplete="off">
</div>
</div>
<!-- 隐藏的文件输入元素 -->
<input type="file" id="fileInput" accept="image/*" style="display: none;">
<!-- 命令面板 -->
<div class="command-palette" id="commandPalette">
<div class="editor-header">
<span class="window-btn close" id="closeCommandPaletteBtn"></span>
<span class="window-btn minimize"></span>
<span class="window-btn maximize"></span>
<span class="title-bar">command-palette.js - 命令面板</span>
</div>
<div class="command-palette-content">
<input type="text" class="command-search" id="commandSearch" placeholder="搜索命令...">
<div class="command-list" id="commandList">
<!-- 命令将通过JS动态添加 -->
</div>
</div>
</div>
<!-- 命令历史记录 -->
<div class="command-history" id="commandHistory">
<div class="history-title">命令历史记录</div>
<div class="history-list" id="historyList"></div>
</div>
<script>
// 主题切换功能
const body = document.body;
// 检查本地存储中的主题设置
const currentTheme = localStorage.getItem('theme') || 'dark';
body.setAttribute('data-theme', currentTheme);
// 主题切换函数
function switchTheme(theme) {
if (theme === 'light' || theme === '亮色') {
body.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
return '已切换到亮色主题';
} else if (theme === 'dark' || theme === '暗色') {
body.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
return '已切换到暗色主题';
} else {
// 切换主题
const currentTheme = body.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
body.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
return `已切换到${newTheme === 'dark' ? '暗色' : '亮色'}主题`;
}
}
// 设置当前年份
const currentYear = new Date().getFullYear();
document.getElementById('year').textContent = currentYear;
// 终端交互功能
const editorContent = document.getElementById('editorContent');
const userInput = document.getElementById('userInput');
const inputLine = document.querySelector('.input-line');
const fileInput = document.getElementById('fileInput');
const closeBtn = document.getElementById('closeBtn');
const maximizeBtn = document.getElementById('maximizeBtn');
const shutdownScreen = document.getElementById('shutdownScreen');
const startupTerminalBtn = document.getElementById('startupTerminalBtn');
const mainEditor = document.getElementById('mainEditor');
const weatherWidget = document.getElementById('weatherWidget');
const weatherModal = document.getElementById('weatherModal');
const weatherClose = document.getElementById('weatherClose');
const weatherModalContent = document.getElementById('weatherModalContent');
// 天气API配置
const WEATHER_API = {
id: '10003788',
key: 'ffa8afb46dce4916c5a74fd73c8de9f6',
url: 'https://cn.apihz.cn/api/tianqi/tqybmoji15ip.php'
};
// 天气功能
async function fetchWeatherData() {
try {
const response = await fetch(`${WEATHER_API.url}?id=${WEATHER_API.id}&key=${WEATHER_API.key}`);
const data = await response.json();
if (data.code === 200 && data.data) {
return {
success: true,
place: data.place,
data: data.data
};
} else {
return {
success: false,
error: data.msg || '获取天气数据失败'
};
}
} catch (error) {
return {
success: false,
error: '网络请求失败: ' + error.message
};
}
}
// 更新天气小组件
function updateWeatherWidget(weatherData) {
const weatherIconContainer = document.getElementById('weatherIconContainer');
const weatherLocation = document.getElementById('weatherLocation');
const weatherTemp = document.getElementById('weatherTemp');
const weatherDesc = document.getElementById('weatherDesc');
if (!weatherData.success) {
weatherIconContainer.innerHTML = '<div class="weather-error">!</div>';
weatherLocation.textContent = '获取失败';
weatherTemp.textContent = '--°';
weatherDesc.textContent = weatherData.error;
return;
}
const todayWeather = weatherData.data[0];
const location = weatherData.place.split('，')[0] || '未知位置';
// 更新天气图标
weatherIconContainer.innerHTML = `<img src="${todayWeather.img1}" alt="${todayWeather.wea1}" onerror="this.style.display='none'">`;
// 更新天气信息
weatherLocation.textContent = location;
weatherTemp.textContent = todayWeather.wendu1;
weatherDesc.textContent = todayWeather.wea1 + (todayWeather.wea2 && todayWeather.wea2 !== todayWeather.wea1 ? ' 转 ' + todayWeather.wea2 : '');
}
// 渲染15日天气预报
function renderWeatherModal(weatherData) {
if (!weatherData.success) {
weatherModalContent.innerHTML = `
<div class="weather-modal-error">
<p>获取天气数据失败</p>
<p>${weatherData.error}</p>
</div>
`;
return;
}
const { place, data } = weatherData;
let html = `
<div style="margin-bottom: 24px; text-align: center;">
<h3 style="color: var(--startup-text); margin-bottom: 8px; font-size: 1.25rem;">${place}</h3>
<p style="color: var(--startup-text-secondary); font-size: 0.9rem;">未来15日天气预报</p>
</div>
<div class="weather-grid">
`;
data.forEach((day, index) => {
const isToday = index === 0;
html += `
<div class="weather-day ${isToday ? 'today' : ''}">
<div class="weather-day-header">
<div class="weather-date">${day.week2}</div>
<div class="weather-week">${day.week1}${isToday ? ' (今天)' : ''}</div>
</div>
<div class="weather-main">
<img class="weather-icon" src="${day.img1}" alt="${day.wea1}" onerror="this.style.display='none'">
<div class="weather-temp-container">
<div class="weather-temp-high">${day.wendu1}</div>
<div class="weather-temp-low">${day.wendu2}</div>
</div>
</div>
<div class="weather-desc">
${day.wea1}${day.wea2 && day.wea2 !== day.wea1 ? ' 转 ' + day.wea2 : ''}
</div>
</div>
`;
});
html += '</div>';
weatherModalContent.innerHTML = html;
}
// 初始化天气数据
async function initWeather() {
const weatherData = await fetchWeatherData();
updateWeatherWidget(weatherData);
}
// 天气组件点击事件
weatherWidget.addEventListener('click', async () => {
weatherModal.classList.add('active');
weatherModalContent.innerHTML = '<div class="weather-modal-loading">正在加载天气数据...</div>';
const weatherData = await fetchWeatherData();
renderWeatherModal(weatherData);
});
// 关闭天气弹窗
weatherClose.addEventListener('click', () => {
weatherModal.classList.remove('active');
});
// 点击弹窗外部关闭
weatherModal.addEventListener('click', (e) => {
if (e.target === weatherModal) {
weatherModal.classList.remove('active');
}
});
// 关闭按钮功能
closeBtn.addEventListener('click', () => {
// 如果在全屏状态，先退出全屏
if (document.fullscreenElement) {
document.exitFullscreen().then(() => {
// 退出全屏后显示起始页
setTimeout(() => {
shutdownScreen.classList.add('active');
mainEditor.style.opacity = '0';
mainEditor.style.pointerEvents = 'none';
}, 100);
}).catch(() => {
// 如果退出全屏失败，直接显示起始页
shutdownScreen.classList.add('active');
mainEditor.style.opacity = '0';
mainEditor.style.pointerEvents = 'none';
});
} else {
// 非全屏状态直接显示起始页
shutdownScreen.classList.add('active');
mainEditor.style.opacity = '0';
mainEditor.style.pointerEvents = 'none';
}
});
maximizeBtn.addEventListener('click', () => {
if (!document.fullscreenElement) {
mainEditor.requestFullscreen().catch(err => {
addAILine(`全屏模式错误: ${err.message}`);
});
} else {
document.exitFullscreen();
}
});
// 起始页终端按钮功能
startupTerminalBtn.addEventListener('click', () => {
shutdownScreen.classList.remove('active');
mainEditor.style.opacity = '1';
mainEditor.style.pointerEvents = 'all';
userInput.focus();
});
// 命令历史记录
let commandHistoryArray = JSON.parse(localStorage.getItem('commandHistory') || '[]');
let historyIndex = -1;
// 保存命令到历史记录
function saveToHistory(command) {
if (commandHistoryArray.length === 0 || commandHistoryArray[commandHistoryArray.length - 1] !== command) {
commandHistoryArray.push(command);
if (commandHistoryArray.length > 20) {
commandHistoryArray.shift();
}
localStorage.setItem('commandHistory', JSON.stringify(commandHistoryArray));
}
historyIndex = -1;
}
// 帮助信息
const helpText = `
可用命令:
基础命令:
- help: 显示帮助信息
- clear: 清空终端
- history: 显示命令历史记录
- theme: 切换深色/浅色主题
- 暗色: 切换到暗色主题
- 亮色: 切换到亮色主题
工具命令:
- video [url]: 解析并播放视频
例如: video https://v.qq.com/x/cover/mzc00200mp8er9d.html
- ai [message]: 与AI助手对话
例如: ai 你好
- base64 [encode/decode] [text]: 进行Base64编码/解码
例如: base64 encode 你好世界
- image [format]: 转换图片格式 (支持: jpg, png, webp, bmp)
例如: image png
新功能:
- todo [add/list/done/remove]: 管理待办事项
例如: todo add 完成项目报告
- weather: 查看15日天气预报
快捷键:
- Ctrl+K: 打开命令面板
- Ctrl+L: 清空终端
- 上/下箭头: 浏览命令历史
`;
// 打字机效果函数
function typeWriterEffect(element, text, speed = 10) {
return new Promise((resolve) => {
let i = 0;
const typing = () => {
if (i < text.length) {
element.textContent += text.charAt(i);
i++;
setTimeout(typing, speed);
} else {
const cursor = element.querySelector('.cursor');
if (cursor) cursor.remove();
resolve();
}
};
const cursorSpan = document.createElement('span');
cursorSpan.className = 'cursor';
element.appendChild(cursorSpan);
typing();
});
}
async function addAILine(text) {
const line = document.createElement('div');
line.className = 'line';
const lineContent = document.createElement('div');
lineContent.className = 'line-content ai-output';
lineContent.textContent = '藤原: ';
line.appendChild(lineContent);
editorContent.appendChild(line);
editorContent.scrollTop = editorContent.scrollHeight;
await typeWriterEffect(lineContent, text);
return line;
}
function addUserLine(text) {
const line = document.createElement('div');
line.className = 'line';
const lineContent = document.createElement('div');
lineContent.className = 'line-content user-input';
lineContent.textContent = `> ${text}`;
line.appendChild(lineContent);
editorContent.appendChild(line);
editorContent.scrollTop = editorContent.scrollHeight;
return line;
}
// 清除终端内容函数
function clearTerminal() {
const lines = document.querySelectorAll('.line');
lines.forEach(line => {
if (!line.classList.contains('input-line')) {
line.remove();
}
});
}
// Base64编码函数
function utf8_to_b64(str) {
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
return String.fromCharCode('0x' + p1);
}));
}
// Base64解码函数
function b64_to_utf8(str) {
return decodeURIComponent(atob(str).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
}
// 待办事项功能
function manageTodo(action, text) {
const todos = JSON.parse(localStorage.getItem('todos') || '[]');
switch(action) {
case 'add':
if (!text) {
addAILine('请提供待办事项内容');
return;
}
todos.push({
id: Date.now(),
text: text,
completed: false,
date: new Date().toISOString()
});
localStorage.setItem('todos', JSON.stringify(todos));
addAILine(`已添加待办事项: ${text}`);
break;
case 'list':
if (todos.length === 0) {
addAILine('没有待办事项');
} else {
let todoList = '待办事项列表:\n';
todos.forEach((todo, index) => {
todoList += `${index + 1}. [${todo.completed ? '✓' : ' '}] ${todo.text}\n`;
});
addAILine(todoList);
}
break;
case 'done':
const index = parseInt(text) - 1;
if (isNaN(index) || index < 0 || index >= todos.length) {
addAILine('无效的待办事项编号');
return;
}
todos[index].completed = true;
localStorage.setItem('todos', JSON.stringify(todos));
addAILine(`已完成待办事项: ${todos[index].text}`);
break;
case 'remove':
const removeIndex = parseInt(text) - 1;
if (isNaN(removeIndex) || removeIndex < 0 || removeIndex >= todos.length) {
addAILine('无效的待办事项编号');
return;
}
const removedTodo = todos.splice(removeIndex, 1)[0];
localStorage.setItem('todos', JSON.stringify(todos));
addAILine(`已删除待办事项: ${removedTodo.text}`);
break;
default:
addAILine('使用方法: todo [add/list/done/remove] [内容/编号]');
}
}
// 在现有变量声明后添加命令面板相关变量
const commandPalette = document.getElementById('commandPalette');
const commandSearch = document.getElementById('commandSearch');
const commandList = document.getElementById('commandList');
const commandHistory = document.getElementById('commandHistory');
const historyList = document.getElementById('historyList');
const closeCommandPaletteBtn = document.getElementById('closeCommandPaletteBtn');
// 可用命令列表
const commands = [
{ id: 'help', name: '帮助', description: '显示帮助信息', shortcut: '?', category: '基础' },
{ id: 'clear', name: '清空终端', description: '清除终端内容', shortcut: 'Ctrl+L', category: '基础' },
{ id: 'history', name: '命令历史', description: '显示命令历史记录', shortcut: 'H', category: '基础' },
{ id: 'theme', name: '切换主题', description: '切换深色/浅色主题', shortcut: 'T', category: '基础' },
{ id: 'ai', name: 'AI助手', description: '与AI助手对话', args: 'message', category: '工具' },
{ id: 'base64', name: 'Base64编解码', description: '进行Base64编码或解码', args: 'encode/decode text', category: '工具' },
{ id: 'todo', name: '待办事项', description: '管理待办事项', args: 'add/list/done/remove', category: '新功能' },
{ id: 'weather', name: '天气查询', description: '查看15日天气预报', category: '新功能' }
];
// 更新命令历史记录UI
function updateHistoryUI() {
historyList.innerHTML = '';
commandHistoryArray.slice().reverse().forEach((cmd, index) => {
const item = document.createElement('div');
item.className = 'history-item';
item.textContent = cmd;
item.addEventListener('click', () => {
userInput.value = cmd;
userInput.focus();
commandHistory.style.display = 'none';
});
historyList.appendChild(item);
});
}
// 初始化命令面板
function initCommandPalette() {
commandList.innerHTML = '';
const categories = [...new Set(commands.map(cmd => cmd.category))];
categories.forEach(category => {
const categoryCommands = commands.filter(cmd => cmd.category === category);
const categoryTitle = document.createElement('div');
categoryTitle.className = 'command-category';
categoryTitle.textContent = category;
commandList.appendChild(categoryTitle);
categoryCommands.forEach(cmd => {
const item = document.createElement('div');
item.className = 'command-item';
item.dataset.id = cmd.id;
item.dataset.category = cmd.category;
const icon = document.createElement('svg');
icon.className = 'command-icon';
icon.setAttribute('width', '18');
icon.setAttribute('height', '18');
icon.setAttribute('viewBox', '0 0 24 24');
icon.setAttribute('fill', 'none');
icon.setAttribute('stroke', 'currentColor');
icon.setAttribute('stroke-width', '2');
icon.setAttribute('stroke-linecap', 'round');
icon.setAttribute('stroke-linejoin', 'round');
let iconPath;
switch(cmd.id) {
case 'help':
iconPath = '<circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line>';
break;
case 'clear':
iconPath = '<polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>';
break;
case 'ai':
iconPath = '<circle cx="12" cy="12" r="10"></circle><polygon points="10 8 16 12 10 16 10 8"></polygon>';
break;
case 'base64':
iconPath = '<polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline>';
break;
case 'history':
iconPath = '<circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline>';
break;
case 'theme':
iconPath = '<circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>';
break;
case 'todo':
iconPath = '<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>';
break;
case 'weather':
iconPath = '<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>';
break;
default:
iconPath = '<circle cx="12" cy="12" r="10"></circle>';
}
icon.innerHTML = iconPath;
const content = document.createElement('div');
content.className = 'command-content';
const title = document.createElement('div');
title.className = 'command-title';
title.textContent = cmd.name;
const description = document.createElement('div');
description.className = 'command-description';
description.textContent = cmd.description;
content.appendChild(title);
content.appendChild(description);
const shortcut = document.createElement('div');
shortcut.className = 'command-shortcut';
shortcut.textContent = cmd.shortcut || '';
item.appendChild(icon);
item.appendChild(content);
item.appendChild(shortcut);
item.addEventListener('click', () => {
executeCommandFromPalette(cmd);
});
commandList.appendChild(item);
});
});
}
// 执行从命令面板选择的命令
function executeCommandFromPalette(cmd) {
commandPalette.style.display = 'none';
switch(cmd.id) {
case 'help':
case 'clear':
case 'history':
case 'todo':
case 'theme':
case 'weather':
userInput.value = cmd.id;
break;
case 'ai':
case 'base64':
userInput.value = cmd.id + ' ';
break;
default:
return;
}
userInput.focus();
if (['help', 'clear', 'history', 'todo', 'theme', 'weather'].includes(cmd.id)) {
const event = new KeyboardEvent('keypress', {'key': 'Enter'});
userInput.dispatchEvent(event);
}
}
// 过滤命令面板
function filterCommands(query) {
const items = commandList.querySelectorAll('.command-item');
const categories = commandList.querySelectorAll('.command-category');
query = query.toLowerCase();
let firstVisible = null;
let visibleCategories = new Set();
categories.forEach(category => {
category.style.display = 'none';
});
items.forEach(item => {
const cmd = commands.find(c => c.id === item.dataset.id);
const matchesName = cmd.name.toLowerCase().includes(query);
const matchesId = cmd.id.toLowerCase().includes(query);
const matchesDesc = cmd.description.toLowerCase().includes(query);
const matchesCategory = cmd.category.toLowerCase().includes(query);
if (matchesName || matchesId || matchesDesc || matchesCategory) {
item.style.display = 'flex';
visibleCategories.add(cmd.category);
if (!firstVisible) {
firstVisible = item;
item.classList.add('selected');
} else {
item.classList.remove('selected');
}
} else {
item.style.display = 'none';
item.classList.remove('selected');
}
});
categories.forEach(category => {
if (visibleCategories.has(category.textContent)) {
category.style.display = 'block';
}
});
if (!query) {
categories.forEach(category => {
category.style.display = 'block';
});
}
}
// 显示命令历史
function toggleCommandHistory() {
if (commandHistory.style.display === 'none' || !commandHistory.style.display) {
commandHistory.style.display = 'block';
updateHistoryUI();
// 将历史记录添加到编辑器内容中
editorContent.appendChild(commandHistory);
} else {
commandHistory.style.display = 'none';
}
}
// AI聊天功能
async function sendMessage(message) {
if (!message) return;
addUserLine(message);
const thinkingLine = document.createElement('div');
thinkingLine.className = 'line';
const thinkingContent = document.createElement('div');
thinkingContent.className = 'line-content ai-output';
const thinkingText = document.createElement('span');
thinkingText.textContent = '藤原: 正在思考中';
const thinkingAnimation = document.createElement('div');
thinkingAnimation.className = 'thinking-animation';
for (let i = 0; i < 3; i++) {
const dot = document.createElement('span');
thinkingAnimation.appendChild(dot);
}
thinkingContent.appendChild(thinkingText);
thinkingContent.appendChild(thinkingAnimation);
thinkingLine.appendChild(thinkingContent);
editorContent.appendChild(thinkingLine);
editorContent.scrollTop = editorContent.scrollHeight;
try {
const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer sk-a676938665e04742b75ce9e77e5e6d44'
},
body: JSON.stringify({
model: "deepseek-chat",
messages: [
{
role: "user",
content: message
}
],
temperature: 0.7
})
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
thinkingLine.remove();
if (data.choices && data.choices[0].message) {
const replyLine = document.createElement('div');
replyLine.className = 'line';
const replyContent = document.createElement('div');
replyContent.className = 'line-content ai-output';
replyContent.textContent = '藤原: ';
replyLine.appendChild(replyContent);
editorContent.appendChild(replyLine);
editorContent.scrollTop = editorContent.scrollHeight;
await typeWriterEffect(replyContent, data.choices[0].message.content);
} else {
addAILine('无法获取AI回复，请稍后再试');
}
} catch (error) {
thinkingLine.remove();
addAILine(`请求失败: ${error.message}`);
}
}
// 命令面板关闭按钮
closeCommandPaletteBtn.addEventListener('click', () => {
commandPalette.style.display = 'none';
userInput.focus();
});
userInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
const command = userInput.value.trim();
if (command) {
processCommand(command);
userInput.value = '';
}
}
});
// 键盘事件处理
document.addEventListener('keydown', (e) => {
// 添加Ctrl+K快捷键
if (e.ctrlKey && e.key === 'k') {
e.preventDefault();
commandPalette.style.display = 'block';
commandSearch.value = '';
filterCommands('');
commandSearch.focus();
return;
}
if (e.ctrlKey && e.key === 'l') {
e.preventDefault();
clearTerminal();
return;
}
if (e.key === 'Escape') {
commandPalette.style.display = 'none';
weatherModal.classList.remove('active');
userInput.focus();
return;
}
// 命令面板导航
if (commandPalette.style.display === 'block') {
const items = Array.from(commandList.querySelectorAll('.command-item')).filter(
item => item.style.display !== 'none'
);
if (items.length > 0) {
const currentIndex = items.findIndex(item => item.classList.contains('selected'));
if (e.key === 'ArrowDown') {
e.preventDefault();
if (currentIndex < items.length - 1) {
items[currentIndex].classList.remove('selected');
items[currentIndex + 1].classList.add('selected');
items[currentIndex + 1].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
} else if (e.key === 'ArrowUp') {
e.preventDefault();
if (currentIndex > 0) {
items[currentIndex].classList.remove('selected');
items[currentIndex - 1].classList.add('selected');
items[currentIndex - 1].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
} else if (e.key === 'Enter') {
e.preventDefault();
const selectedItem = commandList.querySelector('.command-item.selected');
if (selectedItem) {
const cmdId = selectedItem.dataset.id;
const cmd = commands.find(c => c.id === cmdId);
executeCommandFromPalette(cmd);
}
}
}
}
// 命令历史导航
if (document.activeElement === userInput) {
if (e.key === 'ArrowUp' && commandHistoryArray.length > 0) {
e.preventDefault();
if (historyIndex < commandHistoryArray.length - 1) {
historyIndex++;
userInput.value = commandHistoryArray[commandHistoryArray.length - 1 - historyIndex];
}
} else if (e.key === 'ArrowDown' && historyIndex > -1) {
e.preventDefault();
historyIndex--;
if (historyIndex === -1) {
userInput.value = '';
} else {
userInput.value = commandHistoryArray[commandHistoryArray.length - 1 - historyIndex];
}
}
}
});
// 命令搜索功能
commandSearch.addEventListener('input', () => {
filterCommands(commandSearch.value);
});
// 搜索引擎配置
const searchEngines = {
google: {
name: "Google",
url: "https://www.google.com/search",
param: "q",
icon: "https://www.google.com/favicon.ico"
},
baidu: {
name: "百度",
url: "https://www.baidu.com/s",
param: "wd",
icon: "https://www.baidu.com/favicon.ico"
},
bing: {
name: "Bing",
url: "https://www.bing.com/search",
param: "q",
icon: "https://www.bing.com/favicon.ico"
}
};
let currentEngine = 'google';
// 更新实时时间
function updateTime() {
const now = new Date();
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
};
const timeString = now.toLocaleDateString('zh-CN', options);
// 更新起始页时间
const startupTimeElement = document.getElementById('startupTime');
if (startupTimeElement) {
startupTimeElement.textContent = timeString;
}
}
updateTime();
setInterval(updateTime, 1000);
// 切换搜索引擎
function setSearchEngine(engine) {
if (searchEngines[engine]) {
currentEngine = engine;
const searchForm = document.getElementById('startup-search-form');
if (searchForm) {
searchForm.action = searchEngines[engine].url;
searchForm.querySelector('input[name="q"]').name = searchEngines[engine].param;
const img = document.querySelector('#startup-engine-selector img');
const span = document.querySelector('#startup-engine-selector span');
if (img && span) {
img.src = searchEngines[engine].icon;
img.alt = searchEngines[engine].name;
span.textContent = searchEngines[engine].name;
}
}
}
}
setSearchEngine(currentEngine);
// 初始化
initWeather();
initCommandPalette();
updateHistoryUI();
// 页面加载完成后的初始化
setTimeout(() => {
addAILine('欢迎来到藤原的个人终端！输入 "help" 获取可用命令。');
}, 500);
// 在processCommand函数中添加history命令处理
// 在现有的switch语句中添加：
function processCommand(command) {
const parts = command.split(' ');
const cmd = parts[0].toLowerCase();
const args = parts.slice(1).join(' ');
saveToHistory(command);
switch(cmd) {
case 'help':
addAILine(helpText);
break;
case 'clear':
clearTerminal();
break;
case 'ai':
if (!args) {
addAILine('请输入您想对AI说的话');
} else {
sendMessage(args);
}
break;
case 'base64':
const base64Args = args.split(' ');
const action = base64Args[0];
const text = base64Args.slice(1).join(' ');
if (action === 'encode') {
if (!text) {
addAILine('请提供要编码的文本');
} else {
addAILine(utf8_to_b64(text));
}
} else if (action === 'decode') {
if (!text) {
addAILine('请提供要解码的Base64字符串');
} else {
try {
addAILine(b64_to_utf8(text));
} catch (e) {
addAILine('解码失败：无效的Base64字符串');
}
}
} else {
addAILine('使用方法: base64 [encode/decode] [text]');
}
break;
case 'theme':
addAILine(switchTheme());
break;
case '暗色':
addAILine(switchTheme('暗色'));
break;
case '亮色':
addAILine(switchTheme('亮色'));
break;
case 'todo':
const todoArgs = args.split(' ');
const todoAction = todoArgs[0];
const todoText = todoArgs.slice(1).join(' ');
manageTodo(todoAction, todoText);
break;
case 'weather':
weatherModal.classList.add('active');
weatherModalContent.innerHTML = '<div class="weather-modal-loading">正在加载天气数据...</div>';
fetchWeatherData().then(renderWeatherModal);
addAILine('天气预报已在弹窗中显示');
break;
case 'history':
toggleCommandHistory();
break;
default:
if (command) {
sendMessage(command);
}
}
}
</script>
</body>
</html>
index.html
style.css
index.js