feat: add public homepage and downloads
This commit is contained in:
QiuSW
@@ -6,78 +6,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}cmhub{% endblock %}</title>
|
||||
<link href="{% static 'portal/vendor/bootstrap/bootstrap.min.css' %}" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--cmhub-bg: #f6f7f9;
|
||||
--cmhub-ink: #17202a;
|
||||
--cmhub-line: #d8dee6;
|
||||
--cmhub-accent: #0f766e;
|
||||
}
|
||||
body {
|
||||
background: var(--cmhub-bg);
|
||||
color: var(--cmhub-ink);
|
||||
}
|
||||
.navbar {
|
||||
border-bottom: 1px solid var(--cmhub-line);
|
||||
background: #ffffff;
|
||||
}
|
||||
.cmhub-shell {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 16px;
|
||||
}
|
||||
.cmhub-panel {
|
||||
max-width: 440px;
|
||||
margin: 0 auto;
|
||||
border: 1px solid var(--cmhub-line);
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
padding: 28px;
|
||||
}
|
||||
.cmhub-panel form p {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.cmhub-panel label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.cmhub-panel input {
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
border: 1px solid #b9c2cf;
|
||||
border-radius: 6px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.cmhub-panel .errorlist {
|
||||
margin: 0 0 12px;
|
||||
padding-left: 18px;
|
||||
color: #b42318;
|
||||
}
|
||||
.btn-primary {
|
||||
--bs-btn-bg: var(--cmhub-accent);
|
||||
--bs-btn-border-color: var(--cmhub-accent);
|
||||
--bs-btn-hover-bg: #0b5f59;
|
||||
--bs-btn-hover-border-color: #0b5f59;
|
||||
}
|
||||
.metric {
|
||||
border: 1px solid var(--cmhub-line);
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
padding: 18px;
|
||||
}
|
||||
.cmhub-surface {
|
||||
border: 1px solid var(--cmhub-line);
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
padding: 20px;
|
||||
}
|
||||
.key-value {
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
<link href="{% static 'portal/brand.css' %}" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<body class="{% block body_class %}{% endblock %}">
|
||||
<nav class="navbar navbar-expand">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-semibold" href="{% url 'portal-home' %}">cmhub</a>
|
||||
@@ -102,6 +33,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% block body %}
|
||||
<main class="cmhub-shell">
|
||||
{% if messages %}
|
||||
<div class="mb-3">
|
||||
@@ -112,5 +44,6 @@
|
||||
{% endif %}
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,199 @@
|
||||
{% extends "portal/base.html" %}
|
||||
|
||||
{% block title %}cmhub AI 电商生成台{% endblock %}
|
||||
{% block body_class %}home-page{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<main class="home-main">
|
||||
<section class="home-hero">
|
||||
<div class="home-container home-hero-grid">
|
||||
<div>
|
||||
<div class="home-eyebrow">AI 生成 / 点数计费 / 桌面端接入</div>
|
||||
<h1>cmhub AI 电商生成台</h1>
|
||||
<p class="home-lead">
|
||||
把生成标题、生成主图能力封装成稳定的 HTTP API。桌面端填入 API Key 后按本地点数扣费，
|
||||
余额不足直接拦截，失败自动退点。
|
||||
</p>
|
||||
<div class="home-actions">
|
||||
{% if user.is_authenticated %}
|
||||
<a class="btn btn-primary btn-lg" href="{% url 'portal-dashboard' %}">进入控制台</a>
|
||||
{% else %}
|
||||
<a class="btn btn-primary btn-lg" href="{% url 'portal-signup' %}">免费注册</a>
|
||||
<a class="btn btn-outline-secondary btn-lg" href="{% url 'portal-login' %}">登录</a>
|
||||
{% endif %}
|
||||
{% if current_release and current_release.has_download %}
|
||||
<a class="btn btn-outline-secondary btn-lg" href="{{ current_release.download_url }}">下载客户端</a>
|
||||
{% else %}
|
||||
<a class="btn btn-outline-secondary btn-lg disabled" aria-disabled="true" href="#download">客户端下载暂未发布</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="home-proof" aria-label="服务要点">
|
||||
<span class="home-chip">注册即可用</span>
|
||||
<span class="home-chip">按点数扣点</span>
|
||||
<span class="home-chip">API Key 接入</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-stage" aria-label="生成台示意">
|
||||
<div class="home-product-shot">
|
||||
<div class="home-product-frame">
|
||||
<div class="home-product-image">商品图</div>
|
||||
<div class="home-product-copy">
|
||||
轻量夹克，春秋外套，通勤穿搭，图片清晰，适合电商标题与主图优化。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-thread" aria-hidden="true"></div>
|
||||
<div class="home-output-grid">
|
||||
<div class="home-output">
|
||||
<div class="home-output-title">吸睛标题</div>
|
||||
<div class="home-output-text">春秋通勤轻量夹克，防风舒适，男女日常外套</div>
|
||||
<span class="home-point-pill">-2 点</span>
|
||||
</div>
|
||||
<div class="home-output">
|
||||
<div class="home-output-title">生成主图</div>
|
||||
<div class="home-output-text">保留商品主体，生成干净背景和电商展示构图。</div>
|
||||
<span class="home-point-pill">-12 点</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="home-section">
|
||||
<div class="home-container">
|
||||
<div class="home-section-heading">
|
||||
<h2 class="home-section-title">四步接入桌面端</h2>
|
||||
<p class="home-section-copy">从账号到调用链路保持简单：账号、点数、API Key 和客户端配置各司其职。</p>
|
||||
</div>
|
||||
<div class="home-steps">
|
||||
<div class="home-step">
|
||||
<div class="home-step-num">01</div>
|
||||
<h3>注册账号</h3>
|
||||
<p>邮箱注册后直接登录，系统创建 0 点钱包，不赠点、不写虚假流水。</p>
|
||||
</div>
|
||||
<div class="home-step">
|
||||
<div class="home-step-num">02</div>
|
||||
<h3>充值点数</h3>
|
||||
<p>扫码创建充值订单，到账后按汇率入账到本地点数账本。</p>
|
||||
</div>
|
||||
<div class="home-step">
|
||||
<div class="home-step-num">03</div>
|
||||
<h3>生成 API Key</h3>
|
||||
<p>在控制台生成 Key，明文只显示一次，后续列表只展示 prefix。</p>
|
||||
</div>
|
||||
<div class="home-step">
|
||||
<div class="home-step-num">04</div>
|
||||
<h3>填入桌面端</h3>
|
||||
<p>客户端使用能力别名调用标题或图片接口，按规则扣点。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="home-section" id="api">
|
||||
<div class="home-container">
|
||||
<div class="home-section-heading">
|
||||
<h2 class="home-section-title">面向电商流程的两类能力</h2>
|
||||
<p class="home-section-copy">对外只暴露能力别名，不暴露底层供应商 SKU、URL、密钥或 extra_body。</p>
|
||||
</div>
|
||||
<div class="home-cards">
|
||||
<article class="home-card">
|
||||
<div class="home-card-icon">文</div>
|
||||
<h3>生成标题</h3>
|
||||
<p>按商品信息、提示词和能力别名生成标题。敏感词命中会在扣点和上游调用前拦截。</p>
|
||||
</article>
|
||||
<article class="home-card">
|
||||
<div class="home-card-icon">图</div>
|
||||
<h3>生成主图（改图）</h3>
|
||||
<p>支持需要原图的图片能力，图片输入先做公网地址和大小校验，结果保存后返回 URL。</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="home-band">
|
||||
<div class="home-container home-band-grid">
|
||||
<div>
|
||||
<h2 class="home-band-title">点数余额是唯一权威账本</h2>
|
||||
<p>
|
||||
充值成功后写入本地点数；每次生成先预扣，成功确认，失败退点。调用链路不实时查询支付系统。
|
||||
</p>
|
||||
</div>
|
||||
<div class="home-band-meter">
|
||||
<strong>本地扣点</strong>
|
||||
<p>余额不足返回“点数不足，请先充值”，不会继续调用上游模型。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="home-section" id="download">
|
||||
<div class="home-container">
|
||||
<div class="home-section-heading">
|
||||
<h2 class="home-section-title">下载桌面端</h2>
|
||||
<p class="home-section-copy">下载走 HTTPS，页面展示 SHA256 供校验；安装包前期由服务器 media 目录托管，生产 Nginx 直接服务。</p>
|
||||
</div>
|
||||
<div class="home-download-grid">
|
||||
<div class="home-download-box">
|
||||
{% if current_release and current_release.has_download %}
|
||||
<h3>Windows 客户端 {{ current_release.version }}</h3>
|
||||
<p>当前版本已发布，可下载后填入 cmhub API Key 使用。</p>
|
||||
<div class="home-actions">
|
||||
<a class="btn btn-primary" href="{{ current_release.download_url }}">下载客户端</a>
|
||||
{% if user.is_authenticated %}
|
||||
<a class="btn btn-outline-secondary" href="{% url 'portal-apikeys' %}">管理 API Key</a>
|
||||
{% else %}
|
||||
<a class="btn btn-outline-secondary" href="{% url 'portal-signup' %}">注册账号</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="home-release-meta">
|
||||
<div class="home-release-row">
|
||||
<span>版本</span>
|
||||
<strong>{{ current_release.version }}</strong>
|
||||
</div>
|
||||
<div class="home-release-row">
|
||||
<span>SHA256</span>
|
||||
<code>{{ current_release.sha256|default:"未提供" }}</code>
|
||||
</div>
|
||||
{% if current_release.release_notes %}
|
||||
<div class="home-release-row">
|
||||
<span>说明</span>
|
||||
<strong>{{ current_release.release_notes|linebreaksbr }}</strong>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="home-notice">
|
||||
首期安装包可能未签名。Windows 若提示未知发布者，请先核对 SHA256，再选择“仍要运行”；正式代码签名后会更新版本说明。
|
||||
</div>
|
||||
{% else %}
|
||||
<h3>客户端暂未发布</h3>
|
||||
<p>后台尚未配置当前 Windows 版本。发布后这里会展示版本号、下载按钮、SHA256 和版本说明。</p>
|
||||
<div class="home-actions">
|
||||
<a class="btn btn-primary disabled" aria-disabled="true" href="#">暂未发布</a>
|
||||
{% if user.is_authenticated %}
|
||||
<a class="btn btn-outline-secondary" href="{% url 'portal-dashboard' %}">进入控制台</a>
|
||||
{% else %}
|
||||
<a class="btn btn-outline-secondary" href="{% url 'portal-signup' %}">先注册账号</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="home-download-box">
|
||||
<h3>接口与控制台</h3>
|
||||
<div class="home-links">
|
||||
{% if user.is_authenticated %}
|
||||
<a class="home-link-row" href="{% url 'portal-dashboard' %}"><span>控制台</span><span>余额与记录</span></a>
|
||||
<a class="home-link-row" href="{% url 'portal-models' %}"><span>可用模型</span><span>能力别名与价格</span></a>
|
||||
<a class="home-link-row" href="{% url 'portal-apikeys' %}"><span>API Key</span><span>创建与吊销</span></a>
|
||||
{% else %}
|
||||
<a class="home-link-row" href="{% url 'portal-signup' %}"><span>注册</span><span>创建账号</span></a>
|
||||
<a class="home-link-row" href="{% url 'portal-login' %}"><span>登录</span><span>进入控制台</span></a>
|
||||
<a class="home-link-row" href="#api"><span>API 能力</span><span>标题 / 图片</span></a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user