stash/stash-core/templates/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="light">
    <meta name="theme-color" content="#f7f8fa">
    <title>Stash · 本地应用工作区</title>
    <link rel="stylesheet" href="/__stash__/dashboard.css">
    <script src="/__stash__/dashboard.js" defer></script>
</head>
<body class="dashboard-page">
<div class="ambient ambient-blue" aria-hidden="true"></div>
<div class="ambient ambient-warm" aria-hidden="true"></div>

<div class="workspace">
    <aside class="sidebar">
        <header class="sidebar-header">
            <a class="brand" href="/" aria-label="Stash 首页">
                <span class="brand-mark" aria-hidden="true">
                    <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="7" height="7" rx="2"></rect>
                        <rect x="14" y="3" width="7" height="7" rx="2"></rect>
                        <rect x="3" y="14" width="7" height="7" rx="2"></rect>
                        <path d="M17.5 14v7M14 17.5h7"></path>
                    </svg>
                </span>
                <span class="brand-name">stash<span>.</span></span>
            </a>
            <span class="local-badge">LOCAL</span>
        </header>

        <div class="sidebar-intro">
            <p class="eyebrow"><span class="eyebrow-dot"></span>YOUR WORKSPACE</p>
            <h1>把项目，<br>放在手边。</h1>
            <p class="sidebar-lead">Stash 正在整理当前目录下的静态前端应用，让每次预览都从一个清爽入口开始。</p>
        </div>

        <section class="overview-card" aria-label="工作区概览">
            <div class="overview-label">项目概览</div>
            <div class="project-total">
                <strong data-project-count>{{ projects.len() }}</strong>
                <span>个应用</span>
            </div>
            <div class="service-status">
                <span class="status-dot"></span>
                <span>本地服务运行中</span>
            </div>
        </section>

        <div class="sidebar-actions">
            <button class="refresh-button js-only" id="refresh-projects" type="button" aria-label="重新扫描项目">
                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M20 11a8.1 8.1 0 0 0-15.5-2M4 4v5h5"></path>
                    <path d="M4 13a8.1 8.1 0 0 0 15.5 2M20 20v-5h-5"></path>
                </svg>
                <span>重新扫描</span>
            </button>
            <p class="sidebar-hint">目录变化会自动同步，也可以手动重新扫描。</p>
        </div>

        <footer class="sidebar-footer">
            <span>STATIC HOSTING</span>
            <span class="footer-ready"><i></i>READY</span>
        </footer>
    </aside>

    <main class="content">
        <header class="content-header">
            <div class="content-heading">
                <p class="eyebrow">PROJECT LIBRARY</p>
                <h2>本地应用</h2>
                <p>一个入口，快速抵达每个正在开发或预览的页面。</p>
            </div>
            <div class="content-meta">
                <span class="live-pill" id="live-status"><i></i><span id="live-status-label">服务在线</span></span>
                <span class="count-pill"><strong data-project-count>{{ projects.len() }}</strong> 个项目</span>
            </div>
        </header>

        <section class="site-grid" id="project-grid" aria-live="polite">
            {% if projects.is_empty() %}
            <div class="empty-state">
                <span class="empty-visual" aria-hidden="true">
                    <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"></path>
                        <path d="M8 13h8M8 16h5"></path>
                    </svg>
                </span>
                <h3>这里还没有项目</h3>
                <p>在托管根目录下创建子目录，并放入 <code>index.html</code>，刷新后即可在这里看到它。</p>
            </div>
            {% else %}
            {% for project in projects %}
            <a class="site-item" href="{{ project.route_path }}" title="{{ project.name }}">
                <div class="site-card-top">
                    <span class="site-avatar" aria-hidden="true">{{ project.initial() }}</span>
                    <span class="site-open" aria-hidden="true">
                        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M7 17 17 7M8 7h9v9"></path>
                        </svg>
                    </span>
                </div>
                <div class="site-info">
                    <h3 class="site-name">{{ project.name }}</h3>
                    <span class="site-desc">本地静态应用</span>
                </div>
                <div class="site-card-footer">
                    <span class="site-path">{{ project.route_path }}</span>
                    <span class="site-ready">READY</span>
                </div>
            </a>
            {% endfor %}
            {% endif %}
        </section>
        <p class="refresh-status" id="refresh-status" role="status" aria-live="polite"></p>
    </main>
</div>
</body>
</html>