一句话生成网页 + 自动化办公（OpenCode + DeepSeek-V4）

一句话生成网页 + 自动化办公（OpenCode + DeepSeek-V4）说明：它不仅能写代码，还能帮我处理日常工作。

步骤一：一句话生成静态网页

帮我生成一个基础版个人主页静态网页，只包含：头像、自我介绍、项目展示区、联系方式。要求：HTML + CSS + 一点简单JS，美观一点。

步骤二：逐步增强功能

帮我加一个按钮，点击可以切换深色/浅色模式。帮我加一个项目筛选功能，可以按分类筛选。帮我把页面优化得更现代一点，比如卡片风格、圆角、阴影。

HTML 代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XiaoHer · 个人主页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 主题切换按钮 -->
    <button class="theme-toggle" id="themeToggle" aria-label="切换深色模式">
        <span class="theme-icon">🌙</span>
    </button>

    <div class="container">

        <!-- 头像区 -->
        <section class="hero">
            <div class="avatar-ring">
                <div class="avatar">
                    <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="头像">
                </div>
            </div>
            <h1 class="name">你好，我是 XiaoHer</h1>
            <p class="tagline">全栈开发者 / 开源爱好者</p>
        </section>

        <!-- 自我介绍 -->
        <section class="about">
            <h2>关于我</h2>
            <p>
                热爱编程与技术创造，专注于 Web 开发领域。
                擅长前端与后端技术栈，喜欢探索新工具、构建实用项目。
                相信代码可以改变世界，也在不断学习与成长。
            </p>
        </section>

        <!-- 项目展示 -->
        <section class="projects">
            <h2>项目展示</h2>

            <!-- 筛选按钮 -->
            <div class="filter-bar">
                <button class="filter-btn active" data-filter="all">全部</button>
                <button class="filter-btn" data-filter="frontend">前端</button>
                <button class="filter-btn" data-filter="backend">后端</button>
                <button class="filter-btn" data-filter="tool">工具</button>
                <button class="filter-btn" data-filter="ai">AI</button>
            </div>

            <div class="project-grid">
                <div class="project-card" data-category="frontend">
                    <div class="project-icon">📝</div>
                    <h3>Todo App</h3>
                    <p>基于 React 的任务管理工具，支持拖拽排序与标签分类。</p>
                    <span class="tag">React</span><span class="tag">TypeScript</span>
                </div>
                <div class="project-card" data-category="backend">
                    <div class="project-icon">🌐</div>
                    <h3>API Gateway</h3>
                    <p>轻量级 API 网关，集成限流、鉴权与日志收集。</p>
                    <span class="tag">Go</span><span class="tag">Redis</span>
                </div>
                <div class="project-card" data-category="frontend">
                    <div class="project-icon">📊</div>
                    <h3>DataViz</h3>
                    <p>数据可视化面板，实时图表监控与导出报表。</p>
                    <span class="tag">Vue</span><span class="tag">ECharts</span>
                </div>
                <div class="project-card" data-category="ai">
                    <div class="project-icon">🤖</div>
                    <h3>ChatBot</h3>
                    <p>智能对话机器人，基于大语言模型的多轮对话引擎。</p>
                    <span class="tag">Python</span><span class="tag">LangChain</span>
                </div>
                <div class="project-card" data-category="tool">
                    <div class="project-icon">⚡</div>
                    <h3>DevCLI</h3>
                    <p>开发者命令行工具集，一键生成项目模板与代码片段。</p>
                    <span class="tag">Node.js</span><span class="tag">Commander</span>
                </div>
                <div class="project-card" data-category="backend">
                    <div class="project-icon">🗄️</div>
                    <h3>ORM Helper</h3>
                    <p>数据库 ORM 辅助库，自动生成迁移文件与类型定义。</p>
                    <span class="tag">Go</span><span class="tag">PostgreSQL</span>
                </div>
            </div>
        </section>

        <!-- 联系方式 -->
        <section class="contact">
            <h2>联系方式</h2>
            <div class="contact-links">
                <a href="mailto:example@email.com" class="contact-item">✉️ Email</a>
                <a href="https://github.com" target="_blank" class="contact-item">💻 GitHub</a>
                <a href="#" class="contact-item">🐦 Twitter</a>
                <a href="#" class="contact-item">📄 博客</a>
            </div>
        </section>

        <footer>
            <p>© 2026 XiaoHer · 使用 ❤️ 构建</p>
        </footer>
    </div>

    <script src="app.js"></script>
</body>
</html>

CSS 代码

css 复制代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========== 浅色主题变量 ========== */
:root,
[data-theme="light"] {
    --bg: #f0f2f5;
    --card-bg: rgba(255, 255, 255, 0.75);
    --card-border: rgba(255, 255, 255, 0.6);
    --text: #1a1a2e;
    --text-secondary: #6b7280;
    --accent: #6366f1;
    --accent-light: #818cf8;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
    --tag-bg: #eef2ff;
    --tag-text: #4f46e5;
    --filter-bg: rgba(255, 255, 255, 0.6);
    --filter-hover: rgba(255, 255, 255, 0.9);
    --dot-bg: #e5e7eb;
    --hero-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --body-gradient: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.08), transparent),
                     radial-gradient(ellipse 60% 40% at 80% 80%, rgba(139, 92, 246, 0.05), transparent);
    --glass-blur: blur(16px);
}

/* ========== 深色主题变量 ========== */
[data-theme="dark"] {
    --bg: #0f0f1a;
    --card-bg: rgba(30, 30, 50, 0.7);
    --card-border: rgba(255, 255, 255, 0.08);
    --text: #e8e8ee;
    --text-secondary: #9ca3af;
    --accent: #818cf8;
    --accent-light: #a5b4fc;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
    --tag-bg: rgba(99, 102, 241, 0.2);
    --tag-text: #a5b4fc;
    --filter-bg: rgba(30, 30, 50, 0.6);
    --filter-hover: rgba(30, 30, 50, 0.8);
    --dot-bg: #2d2d44;
    --hero-gradient: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
    --body-gradient: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.15), transparent),
                     radial-gradient(ellipse 60% 40% at 80% 80%, rgba(139, 92, 246, 0.1), transparent);
    --glass-blur: blur(20px);
}

/* ========== 全局过渡 ========== */
body, section, .project-card, .contact-item, .filter-btn, .theme-toggle {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease,
                box-shadow 0.4s ease, transform 0.3s ease;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
    background: var(--body-gradient), var(--bg);
    color: var(--text);
    line-height: 1.7;
    min-height: 100vh;
    position: relative;
}

/* 背景网格装饰 */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grid' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='1' cy='1' r='1' fill='%236366f1' fill-opacity='0.06'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.container {
    max-width: 860px;
    margin: 0 auto;
    padding: 60px 24px;
    position: relative;
    z-index: 1;
}

/* ========== 主题切换按钮 ========== */
.theme-toggle {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    cursor: pointer;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    z-index: 100;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-toggle:hover {
    transform: scale(1.1) rotate(12deg);
    box-shadow: var(--shadow-lg);
}
.theme-toggle:active {
    transform: scale(0.95);
}

/* ========== 通用标题 ========== */
h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

/* ========== 头像区 ========== */
.hero {
    text-align: center;
    padding: 40px 0 36px;
}
.avatar-ring {
    display: inline-block;
    padding: 4px;
    border-radius: 50%;
    background: var(--hero-gradient);
    margin-bottom: 20px;
}
.avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    transform: scale(1);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.avatar-ring:hover .avatar {
    transform: scale(1.06);
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.name {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -0.03em;
    background: var(--hero-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.tagline {
    color: var(--text-secondary);
    font-size: 1.05rem;
    font-weight: 400;
}

/* ========== 关于我 ========== */
.about {
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: 36px;
    margin-bottom: 36px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}
.about:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}
.about p {
    color: var(--text-secondary);
    font-size: 1.02rem;
    line-height: 1.8;
}

/* ========== 项目展示 ========== */
.projects {
    margin-bottom: 36px;
}

/* 筛选按钮栏 */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}
.filter-btn {
    padding: 8px 20px;
    border-radius: 24px;
    border: 1px solid var(--card-border);
    background: var(--filter-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.filter-btn:hover {
    color: var(--accent);
    border-color: var(--accent-light);
    background: var(--filter-hover);
    transform: translateY(-1px);
}
.filter-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

/* 项目网格 */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

/* 项目卡片 - 玻璃态 */
.project-card {
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 28px 24px;
    box-shadow: var(--shadow-sm);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
/* 卡片顶部渐变装饰条 */
.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 3px;
    background: var(--hero-gradient);
    border-radius: 0 0 4px 4px;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.project-card:hover::before {
    opacity: 1;
}
.project-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-light);
}
/* 隐藏/显示动画 */
.project-card.hidden {
    display: none;
}
.project-card.visible {
    animation: cardIn 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.project-icon {
    font-size: 2.2rem;
    margin-bottom: 14px;
    display: inline-block;
}
.project-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text);
}
.project-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.6;
}
.tag {
    display: inline-block;
    background: var(--tag-bg);
    color: var(--tag-text);
    font-size: 0.78rem;
    padding: 4px 12px;
    border-radius: 12px;
    margin-right: 8px;
    margin-bottom: 4px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ========== 联系方式 ========== */
.contact {
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: 36px;
    margin-bottom: 36px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}
.contact:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}
.contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.contact-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    background: var(--filter-bg);
    color: var(--text);
    padding: 12px 22px;
    border-radius: 28px;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid var(--card-border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-item:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
}

/* ========== 页脚 ========== */
footer {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    padding-top: 8px;
}

JS 代码

javascript 复制代码

(() => {
    const html = document.documentElement;
    const themeToggle = document.getElementById('themeToggle');
    const themeIcon = themeToggle.querySelector('.theme-icon');

    // ========== 深色/浅色模式切换 ==========
    function setTheme(theme) {
        html.setAttribute('data-theme', theme);
        themeIcon.textContent = theme === 'dark' ? '☀️' : '🌙';
        localStorage.setItem('theme', theme);
    }

    const saved = localStorage.getItem('theme') || 'light';
    setTheme(saved);

    themeToggle.addEventListener('click', () => {
        const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
        setTheme(next);
    });

    // ========== 项目筛选 ==========
    const filterButtons = document.querySelectorAll('.filter-btn');
    const projectCards = document.querySelectorAll('.project-card');

    filterButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            // 切换 active
            filterButtons.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');

            const category = btn.getAttribute('data-filter');

            projectCards.forEach(card => {
                card.classList.remove('visible', 'hidden');
                if (category === 'all' || card.getAttribute('data-category') === category) {
                    card.classList.remove('hidden');
                    card.classList.add('visible');
                } else {
                    card.classList.add('hidden');
                }
            });
        });
    });

    // ========== 滚动渐入动画 ==========
    const sections = document.querySelectorAll('.about, .contact');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, { threshold: 0.15 });

    sections.forEach((el, i) => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        el.style.transition = `opacity 0.6s ease ${i * 0.1}s, transform 0.6s ease ${i * 0.1}s`;
        observer.observe(el);
    });

    // 初始项目卡片动画
    projectCards.forEach((card, i) => {
        card.style.animation = `cardIn 0.45s cubic-bezier(0.4, 0, 0.2, 1) ${i * 0.08}s both`;
    });

    // ========== 头像点击问候 ==========
    document.querySelector('.avatar').addEventListener('click', () => {
        alert('👋 你好！很高兴认识你～');
    });
})();

步骤三：批量创建文件夹（批量生成文件）

帮我创建10个文件夹，命名为 Day01 到 Day10。在每个文件夹里创建一个 notes.txt 文件，并写入日期。附加：帮我把这些文件夹打包成 zip。

一句话生成网页 + 自动化办公