Publish PythonIDE website deployment guide

Author: jinwandalaohu66

docs/assets/site.css

@@ -104,6 +104,59 @@ body::before {
 
 ::selection { background: var(--ink); color: var(--bg); }
 
+/* Website deployment */
+.website-hero { position: relative; min-height: min(760px, calc(100svh - 62px)); overflow: hidden; display: flex; align-items: center; background: #0d0d0d; color: #fff; }
+.website-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .34); pointer-events: none; }
+.website-hero-media { position: absolute; inset: 0; background: #0d0d0d url("/assets/website-deploy-screen.png") no-repeat calc(50% + 350px) 48%; background-size: auto 92%; opacity: .92; }
+.website-hero-content { position: relative; z-index: 1; padding-block: 96px 112px; }
+.website-hero-content > * { max-width: 660px; }
+.website-display { margin: 14px 0 22px; max-width: 760px; font-size: clamp(48px, 6.8vw, 92px); line-height: .98; letter-spacing: 0; font-weight: 620; text-wrap: balance; }
+.website-lede { margin: 0; max-width: 650px; color: rgba(255,255,255,.78); font-size: clamp(18px, 2vw, 23px); line-height: 1.55; }
+.website-hero .button-row { margin-top: 34px; }
+.website-hero-primary { background: #fff !important; color: #111 !important; border-color: #fff !important; }
+.website-hero-secondary { color: #fff; border-color: rgba(255,255,255,.42); background: rgba(0,0,0,.28); }
+.website-proof { display: none; background: #0d0d0d; }
+.website-proof-inner { padding-block: 24px 42px; }
+.website-proof img { width: 100%; max-height: 760px; object-fit: contain; object-position: center; }
+.website-workflow { scroll-margin-top: 72px; }
+.website-steps { border-top: 1px solid var(--line-strong); }
+.website-step { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 22px; padding: 34px 0; border-bottom: 1px solid var(--line); }
+.website-step-number { color: var(--faint); font-family: var(--mono); font-size: 13px; padding-top: 4px; }
+.website-step h3 { margin: 0 0 9px; color: var(--ink); font-size: clamp(24px, 3vw, 36px); font-weight: 590; letter-spacing: 0; }
+.website-step p { margin: 0; max-width: 760px; color: var(--muted); font-size: 17px; line-height: 1.68; }
+.website-case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
+.website-case-grid article { min-height: 250px; padding: 30px 36px 34px 0; border-bottom: 1px solid var(--line); }
+.website-case-grid article:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 44px; }
+.website-case-grid article:nth-child(even) { padding-left: 44px; }
+.website-case-grid span { color: var(--faint); font-family: var(--mono); font-size: 13px; }
+.website-case-grid h3 { margin: 54px 0 9px; color: var(--ink); font-size: 25px; font-weight: 590; letter-spacing: 0; }
+.website-case-grid p { margin: 0; color: var(--muted); line-height: 1.65; }
+.website-detail-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr); gap: 84px; align-items: start; }
+.website-detail-list { border-top: 1px solid var(--line-strong); }
+.website-detail-list > div { padding: 24px 0 26px; border-bottom: 1px solid var(--line); }
+.website-detail-list strong { display: block; color: var(--ink); font-size: 18px; font-weight: 620; }
+.website-detail-list p { margin: 8px 0 0; color: var(--muted); line-height: 1.65; }
+.website-cta .section-copy { margin-top: 18px; }
+
+@media (max-width: 820px) {
+  .website-hero { min-height: min(720px, calc(100svh - 62px)); align-items: flex-end; }
+  .website-hero-media { background-position: 72% 24%; background-size: auto 78%; opacity: .48; }
+  .website-hero::after { background: rgba(0,0,0,.48); }
+  .website-hero-content { padding-block: 180px 64px; }
+  .website-display { font-size: clamp(42px, 12vw, 64px); }
+  .website-case-grid, .website-detail-grid { grid-template-columns: 1fr; }
+  .website-detail-grid { gap: 42px; }
+  .website-case-grid article:nth-child(odd), .website-case-grid article:nth-child(even) { border-right: 0; padding: 28px 0 30px; min-height: 210px; }
+  .website-case-grid h3 { margin-top: 34px; }
+}
+
+@media (max-width: 520px) {
+  .website-hero-content { padding-block: 158px 54px; }
+  .website-hero .button-row { align-items: stretch; }
+  .website-hero .button { width: 100%; }
+  .website-step { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 28px 0; }
+}
+
 a { color: inherit; text-decoration: none; }
 button, input, textarea, select { color: inherit; font: inherit; }
 button { cursor: pointer; }

docs/assets/site.js

@@ -58,6 +58,10 @@
       if (!node.dataset.labelZh) node.dataset.labelZh = node.getAttribute("aria-label") || "";
       node.setAttribute("aria-label", lang === "en" ? node.dataset.labelEn : node.dataset.labelZh);
     });
+    document.querySelectorAll("[data-alt-en]").forEach(function (node) {
+      if (!node.dataset.altZh) node.dataset.altZh = node.getAttribute("alt") || "";
+      node.setAttribute("alt", lang === "en" ? node.dataset.altEn : node.dataset.altZh);
+    });
 
     setMeta("title[data-zh]", lang);
     setMeta('meta[name="description"][data-zh]', lang);

docs/assets/website-deploy-screen.png

@@ -4,94 +4,19 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="theme-color" content="#ffffff">
-  <meta name="apple-itunes-app" content="app-id=6753987304">
-  <meta name="description" content="PythonIDE 邀请活动联系方式：提交 Pro 终身 5 折申请后，按本页说明联系开发者。">
-  <meta property="og:type" content="website">
-  <meta property="og:title" content="PythonIDE 邀请活动联系方式">
-  <meta property="og:description" content="提交 Pro 终身 5 折申请后，按本页说明发送申请编号。">
-  <meta property="og:image" content="https://pythonide.xin/assets/brand-mark.svg">
+  <meta http-equiv="refresh" content="0; url=/support/#referral-claim">
+  <meta name="robots" content="noindex,follow">
+  <link rel="canonical" href="https://pythonide.xin/support/#referral-claim">
   <link rel="icon" href="/assets/brand-mark.svg" type="image/svg+xml">
-  <link rel="stylesheet" href="/referral/referral.css">
-  <script defer src="/referral/referral.js"></script>
-  <title>PythonIDE 邀请活动联系方式</title>
+  <link rel="stylesheet" href="/assets/site.css">
+  <title>正在打开邀请支持 — PythonIDE</title>
 </head>
 <body>
-  <div class="page">
-    <header class="site-header">
-      <nav class="nav" aria-label="PythonIDE">
-        <a class="brand" href="/" aria-label="PythonIDE">
-          <img class="brand-mark" src="/assets/brand-mark.svg" alt="">
-          <span>PythonIDE</span>
-        </a>
-        <div class="nav-links" aria-label="Primary">
-          <a class="nav-link" href="/i/" data-t="navInvite">邀请</a>
-          <a class="nav-link" href="/activity/" data-t="navRules">规则</a>
-          <a class="nav-link" href="/contact/" aria-current="page" data-t="navContact">联系</a>
-          <a class="nav-download" href="#" data-download data-t="download">下载 App</a>
-        </div>
-        <div class="language-toggle" aria-label="Language">
-          <button type="button" data-lang="zh" aria-pressed="true">中</button>
-          <button type="button" data-lang="en" aria-pressed="false">EN</button>
-        </div>
-      </nav>
-    </header>
-
-    <main class="main">
-      <div class="contact-layout">
-        <section class="contact-hero" aria-labelledby="contact-title">
-          <p class="eyebrow reveal" data-t="brandSub">邀请活动</p>
-          <h1 class="contact-title reveal" id="contact-title" data-t="contactTitle">领取 Pro 终身 5 折</h1>
-          <p class="contact-summary reveal" data-t="contactSummary">达到 20 位有效邀请后，请在 App 内提交申请，并带上申请编号联系开发者。</p>
-        </section>
-
-        <section class="contact-panel reveal" aria-labelledby="contact-method-title">
-          <h2 class="section-title" id="contact-method-title" data-t="contactMethodTitle">联系方式</h2>
-          <p class="contact-body" data-t="contactMethodBody">选择一个平台联系开发者，并发送申请编号。此页面会保持最新联系方式。</p>
-          <div class="contact-link-list" aria-label="联系方式">
-            <a class="contact-link" href="https://qm.qq.com/q/JvD7H91BmI" target="_blank" rel="noopener noreferrer" data-t="contactQQ">QQ</a>
-            <a class="contact-link" href="https://t.me/DLH52" target="_blank" rel="noopener noreferrer" data-t="contactTelegram">Telegram</a>
-            <a class="contact-link" href="https://xhslink.com/m/6Js4Cnqx8fM" target="_blank" rel="noopener noreferrer" data-t="contactXiaohongshu">小红书</a>
-          </div>
-        </section>
-
-        <section class="contact-panel reveal" aria-labelledby="contact-request-title">
-          <h2 class="section-title" id="contact-request-title" data-t="contactRequestTitle">发送时包含</h2>
-          <div class="contact-request-list">
-            <div class="contact-request">
-              <div class="contact-request-number">1</div>
-              <div>
-                <strong data-t="contactRequest1Title">申请编号</strong>
-                <span data-t="contactRequest1Body">在 App 的邀请页点击「Pro 终身 5 折」-「查看」，复制 REF 开头的编号。</span>
-              </div>
-            </div>
-            <div class="contact-request">
-              <div class="contact-request-number">2</div>
-              <div>
-                <strong data-t="contactRequest2Title">你的邀请码</strong>
-                <span data-t="contactRequest2Body">在 App 邀请页复制自己的邀请码，方便后台核对。</span>
-              </div>
-            </div>
-            <div class="contact-request">
-              <div class="contact-request-number">3</div>
-              <div>
-                <strong data-t="contactRequest3Title">领取说明</strong>
-                <span data-t="contactRequest3Body">说明你要领取 Pro 终身 5 折资格，不需要发送截图作为凭证。</span>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <div class="contact-actions reveal">
-          <a class="button primary" href="/activity/">
-            <span data-t="viewRules">查看活动规则</span>
-          </a>
-        </div>
-
-        <p class="note reveal" data-t="contactNote">最终是否满足条件，以后台有效邀请与领取记录为准。</p>
-      </div>
-    </main>
-
-    <footer class="footer" data-t="footer">活动解释权与兑换记录以后台数据为准</footer>
-  </div>
+  <main class="main"><section class="hero"><div class="shell hero-center">
+    <p class="kicker">PythonIDE</p>
+    <h1 class="display small">联系方式已移至支持中心。</h1>
+    <p class="lede">正在打开邀请奖励与社区支持。如未自动跳转，请点击下方按钮。</p>
+    <div class="button-row"><a class="button primary" href="/support/#referral-claim">打开支持中心</a></div>
+  </div></section></main>
 </body>
 </html>

docs/contact/index.html

@@ -285,7 +285,7 @@
     <h1>Agent Skills 安装与说明</h1>
     <p>一行命令安装 Skills，配合 AppUI、Widget 与 iOS 原生文档使用。</p>
   </header>
-  <section class="agent-install-panel" id="agent-skills-install"><div class="install-cmd" data-install-cmd><span class="install-cmd-prompt" aria-hidden="true">$</span><code class="install-cmd-text" id="code-211b7af28bee">npx skills add Python-IDE/pythonide-skills -g</code><div class="install-cmd-actions"><button class="install-cmd-copy" type="button" data-copy-code="211b7af28bee" aria-label="复制"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2.25" stroke="currentColor" stroke-width="1.75"/><rect x="4" y="4" width="11" height="11" rx="2.25" stroke="currentColor" stroke-width="1.75"/></svg></button><span class="install-cmd-toast" role="status" aria-live="polite" hidden>已复制</span></div></div></section>
+  <section class="agent-install-panel" id="agent-skills-install"><div class="install-cmd" data-install-cmd><span class="install-cmd-prompt" aria-hidden="true">$</span><code class="install-cmd-text" id="code-93145cf4bc63">npx skills add Python-IDE/pythonide-skills -g</code><div class="install-cmd-actions"><button class="install-cmd-copy" type="button" data-copy-code="93145cf4bc63" aria-label="复制"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2.25" stroke="currentColor" stroke-width="1.75"/><rect x="4" y="4" width="11" height="11" rx="2.25" stroke="currentColor" stroke-width="1.75"/></svg></button><span class="install-cmd-toast" role="status" aria-live="polite" hidden>已复制</span></div></div></section>
   <div class="markdown-body">
     <p>在 <strong>编码 Agent</strong>（如 Codex、Claude Code、Gemini CLI 等）中编写 PythonIDE 代码时，先安装本站的 Agent Skills。Skills 提供执行规则；完整 API 仍以左侧文档与公开 schema 为准。</p>
 <blockquote class="callout note"><strong>边界</strong>：这是给 <strong>电脑上的编码 Agent</strong> 用的安装包，不是 PythonIDE App 内的 AI 助手，也不是替代在线文档的第二套手册。</blockquote>
@@ -305,12 +305,12 @@ <h2 id="常见误区"><a class="heading-anchor" href="#常见误区">#</a>常见
 <h2 id="相关文档"><a class="heading-anchor" href="#相关文档">#</a>相关文档</h2>
 <ul><li><a href="../../pages/ios-native/">iOS 原生能力</a> — 入口模型、AppUI 原生组件、模块导航</li><li><a href="../../pages/miniapp-choose-runtime/">运行时选择</a> — 选择 appui / widget / scene / ui</li><li><a href="../../pages/appui-quickstart/">appui 快速上手</a></li></ul>
 <h2 id="安装示例"><a class="heading-anchor" href="#安装示例">#</a>安装示例</h2>
-<figure class="code-block" data-code-id="f9d4462acf67">
+<figure class="code-block" data-code-id="3e2d8d6340a5">
   <figcaption>
     <span>bash</span>
-    <div class="code-copy-actions"><button class="copy-code" type="button" data-copy-code="f9d4462acf67" aria-label="复制"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2.25" stroke="currentColor" stroke-width="1.75"/><rect x="4" y="4" width="11" height="11" rx="2.25" stroke="currentColor" stroke-width="1.75"/></svg></button><span class="copy-code-toast" role="status" aria-live="polite" hidden>已复制</span></div>
+    <div class="code-copy-actions"><button class="copy-code" type="button" data-copy-code="3e2d8d6340a5" aria-label="复制"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2.25" stroke="currentColor" stroke-width="1.75"/><rect x="4" y="4" width="11" height="11" rx="2.25" stroke="currentColor" stroke-width="1.75"/></svg></button><span class="copy-code-toast" role="status" aria-live="polite" hidden>已复制</span></div>
   </figcaption>
-  <pre><code id="code-f9d4462acf67" class="language-bash">npx skills add Python-IDE/pythonide-skills</code></pre>
+  <pre><code id="code-3e2d8d6340a5" class="language-bash">npx skills add Python-IDE/pythonide-skills</code></pre>
 </figure>
 <p>预期效果：编码 Agent 工作区出现 <code>pythonide</code>、<code>pythonide-appui</code> 等 Skills，可在写 MiniApp 前自动加载规则。</p>
   </div>

docs/docs/pages/agent-development-index/index.html

@@ -288,7 +288,8 @@ <h1>storage</h1>
 
   <div class="markdown-body">
     <p>轻量级键值存储（基于 UserDefaults）：保存设置项、开关、计数和小型 JSON 配置。</p>
-<blockquote class="callout note"><strong>边界</strong>：适合小数据偏好，不是文件数据库，也不是敏感数据存储。token / 密码用 <a href="../../pages/keychain-module/">keychain</a>；大列表、离线缓存用 <a href="../../pages/database-module/">database</a>。MiniApp 内键名会自动按应用目录隔离，不同 MiniApp 不会互相覆盖。</blockquote>
+<blockquote class="callout note"><strong>边界</strong>：适合小数据偏好，不是文件数据库，也不是敏感数据存储。token / 密码用 <a href="../../pages/keychain-module/">keychain</a>；大列表、离线缓存用 <a href="../../pages/database-module/">database</a>。MiniApp 内键名会自动按应用隔离，不同 MiniApp 不会互相覆盖。</blockquote>
+<p>写入后可在「设置 → 应用数据」中直接查看和修改，不需要把经常变化的值写死在代码里。关联小组件会读取同一份数据；界面只显示脚本使用的简单键名，不显示内部隔离前缀。</p>
 <h2 id="模块概览"><a class="heading-anchor" href="#模块概览">#</a>模块概览</h2>
 <div class="table-scroll"><table><thead><tr><th>项</th><th>说明</th></tr></thead><tbody><tr><td>导入</td><td><code>import storage</code></td></tr><tr><td>适合做什么</td><td>主题、排序、筛选条件、开关、小型 JSON 配置</td></tr><tr><td>调用时机</td><td>在 <code>on_change</code>、按钮回调或启动时读写；不要在 <code>body()</code> 里反复写入</td></tr><tr><td>推荐顺序</td><td>启动时 <code>get</code>（带默认值）→ 用户操作后 <code>set</code> → 需要时 <code>remove</code> / <code>all_keys</code></td></tr><tr><td>键名规范</td><td>用 <code>settings.theme</code> 这类命名空间，避免不同脚本冲突</td></tr></tbody></table></div>
 <hr>