142 lines
6.4 KiB
HTML
142 lines
6.4 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>OpenClaw本地部署工具</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<div id="titlebar">
|
||
<div class="titlebar-logo">
|
||
<img src="https://www.daetool.com/openclaw/img/logo.png" alt="logo" crossorigin="anonymous">
|
||
<span>OpenClaw本地部署工具</span>
|
||
</div>
|
||
<div class="window-controls">
|
||
<button id="minimize-btn" title="最小化" tabindex="-1">
|
||
<svg viewBox="0 0 10 1" width="10" height="1"><path d="M0,0h10v1H0V0z"/></svg>
|
||
</button>
|
||
<button id="close-btn" title="关闭" tabindex="-1">
|
||
<svg viewBox="0 0 10 10" width="10" height="10"><path d="M10,1L9,0L5,4L1,0L0,1L4,5L0,9L1,10L5,6L9,10L10,9L6,5L10,1z"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="content-area">
|
||
<!-- View 1: Main Welcome -->
|
||
<div id="view-main" class="view active">
|
||
<div class="hero-section">
|
||
<!-- Placeholder for background image / gradient -->
|
||
<h1>OpenClaw本地部署工具</h1>
|
||
<p>交代一句话，剩下的AI替你完成</p>
|
||
</div>
|
||
<div class="action-section">
|
||
<button id="btn-install-now" class="primary-btn">立即安装</button>
|
||
<div class="options-row">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="agree-terms" checked>
|
||
同接受 <a href="#" class="link">用户协议</a>
|
||
</label>
|
||
<button id="btn-custom-install" class="text-btn">自定义安装 <span>→</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- View 2: Custom Install -->
|
||
<div id="view-custom" class="view">
|
||
<div class="custom-header">
|
||
<h2>自定义安装</h2>
|
||
</div>
|
||
<div class="custom-content">
|
||
<div class="path-selector">
|
||
<label>安装路径</label>
|
||
<div class="path-input-group">
|
||
<input type="text" id="install-path" value="C:\Program Files\OpenClaw" readonly>
|
||
<button id="btn-change-path" class="secondary-btn">更改目录</button>
|
||
</div>
|
||
</div>
|
||
<div class="space-info">
|
||
<span id="required-space">所需空间: 450MB</span>
|
||
<span id="available-space">可用空间: 407.5GB</span>
|
||
</div>
|
||
<div class="install-options">
|
||
<label class="checkbox-label"><input type="checkbox" checked> 创建桌面图标</label>
|
||
<label class="checkbox-label"><input type="checkbox" checked> 开机自启动</label>
|
||
<label class="checkbox-label"><input type="checkbox"> 添加到快速启动栏</label>
|
||
</div>
|
||
</div>
|
||
<div class="custom-footer">
|
||
<button id="btn-back-main" class="text-btn">← 返回</button>
|
||
<button id="btn-install-start" class="primary-btn">立即安装</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- View 3: Installing Progress -->
|
||
<div id="view-progress" class="view">
|
||
<div class="progress-hero">
|
||
<img src="https://www.daetool.com/openclaw/img/logo.png" alt="logo" class="animated-logo spinner">
|
||
<h2>正在安装 OpenClaw...</h2>
|
||
<p>请稍候，我们正在为您配置环境</p>
|
||
</div>
|
||
<div class="progress-container">
|
||
<div class="progress-bar">
|
||
<div id="progress-fill" class="progress-fill"></div>
|
||
</div>
|
||
<div class="progress-text" id="progress-text">准备提取文件... 0%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- View 4: Completed / Configuration -->
|
||
<div id="view-config" class="view">
|
||
<div class="config-header">
|
||
<h2>配置工作目录与AI服务</h2>
|
||
</div>
|
||
<div class="config-content">
|
||
<div class="form-group">
|
||
<label>工作目录 (存储日志等信息)</label>
|
||
<div class="path-input-group">
|
||
<input type="text" id="work-dir" value="D:\OpenClawData" readonly>
|
||
<button id="btn-change-workdir" class="secondary-btn">浏览</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group ai-services">
|
||
<label>选择AI服务平台</label>
|
||
<div class="service-cards">
|
||
<div class="service-card active" data-service="zhipu">
|
||
<img src="https://www.daetool.com/openclaw/img/logo.png" style="width:20px;">
|
||
<span>智谱GLM</span>
|
||
<span class="badge">免费</span>
|
||
</div>
|
||
<div class="service-card" data-service="tongyi">
|
||
<span>通义千问</span>
|
||
</div>
|
||
<div class="service-card" data-service="deepseek">
|
||
<span>DeepSeek</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>模型名称</label>
|
||
<input type="text" class="text-input" value="GLM-4">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>API Key <a href="#" class="link text-sm">点击获取API Key >></a></label>
|
||
<input type="password" class="text-input" placeholder="输入您的 API Key">
|
||
</div>
|
||
</div>
|
||
<div class="config-footer">
|
||
<button id="btn-test-api" class="secondary-btn">验证 API</button>
|
||
<button id="btn-finish" class="primary-btn" disabled>开始使用</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Include renderer script -->
|
||
<script src="renderer.js"></script>
|
||
</body>
|
||
</html>
|