Skip to content

Commit a8760dc

Browse files
committed
feat: 网页端顶栏新增 M/R/X 三版切换器,下载页提供三版在线体验入口
- IDE(windows/android 端)顶栏新增 M 轻量 / R 标准 / X 全能切换器: 切换后引擎可编译语言、预览与导出页面均按所选版本编译 - 版本选择支持 URL 参数 ?edition=m|r|x 直达,并记忆到 localStorage - 「+ Python / + C++」代码片段按钮随所选版本自动显隐 - /ide/ 跳转页携带 ?edition= 查询串到目标端(下载页在线体验直达) - 下载页:M/R/X 三档卡片与网页端卡片新增「在线体验」入口; 打包为 .apk / .exe 指引覆盖 M/R/X 各版本 - 三端 app.js 统一(原先仅 1 行默认值差异)
1 parent 997dad2 commit a8760dc

10 files changed

Lines changed: 223 additions & 57 deletions

File tree

README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ HiCode(简称 **HC**)的诞生源于一个朴素的愿望:**让编程真
3434
- `M · 轻量版`:仅含全套 HIC 内核。
3535
- `R · 标准版`:全套 HIC 内核 + **编译 Python 为 HTML**`py:(… )end`)。
3636
- `X · 全能版`:全套 HIC 内核 + **编译 Python 与 C++ 为 HTML**`py:(… )end` / `cpp:(… )end`)。
37+
- 🌐 **网页端在线体验三版**:网页端 IDE 顶栏可随时切换 `M / R / X`(也可用 URL 参数直达:[M 版](https://HiCodeHC.github.io/ide/?edition=m) · [R 版](https://HiCodeHC.github.io/ide/?edition=r) · [X 版](https://HiCodeHC.github.io/ide/?edition=x)),切换后预览与导出页面均按所选版本编译,选择会被记忆到本地。
3738
- 🧩 **让 HIC 编译其他语言**:这里的“Python / C++ 能力”不是调用官方库,而是**让 HIC 支持编译这些语言并定义为 HTML**。HIC 内置自包含转译器,把块内源码编译成 HTML 输出,导出页 **不引用任何外部库 / CDN / 网址**,全程离线可用;M/R/X 按版本各自开放可编译的语言。
3839
- 🧩 编辑器新增「`+ Python`」「`+ C++`」代码片段按钮与关键字高亮;学习中心扩充至 17 章。
3940
- **v3.01(原生 HTML 块)**:上一版本。新增原生 HTML 块 `html:( … )end`、编辑器一键插入与关键字高亮;学习中心扩充至 16 章。
@@ -54,7 +55,7 @@ HiCode(简称 **HC**)的诞生源于一个朴素的愿望:**让编程真
5455
## 下载
5556

5657
- 下载页:**[https://HiCodeHC.github.io/download/](https://HiCodeHC.github.io/download/)**
57-
- 可选 **安卓端(.apk)****Windows 电脑端(.exe)****网页端(在线)** 三种形态,每版再分 **M 轻量 / R 标准 / X 全能** 三档(见下载页 / GitHub Releases);本地端基于网页端 IDE 封装的离线运行时,编译更快、体验一致。
58+
- 可选 **安卓端(.apk)****Windows 电脑端(.exe)****网页端(在线)** 三种形态,每版再分 **M 轻量 / R 标准 / X 全能** 三档(见下载页 / GitHub Releases);本地端基于网页端 IDE 封装的离线运行时,编译更快、体验一致。各版本(M/R/X)打包为 .apk / .exe 的步骤见下载页「打包为 .apk / .exe」指引,可分别产出对应版本的安装包。
5859
- **GitHub Releases**:自 v3.01 起,每个新版本均基于 Git Tag 在 **[GitHub Releases](https://github.com/HiCodeHC/HiCodeHC.github.io/releases)** 默认发布(含三档离线单文件版 / 源码 / 原生安装包),可前往查看各版本的发布说明与附件。
5960

6061
## 官网

android/css/style.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,11 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
6363
.ver { font-size: 11.5px; color: var(--muted); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; }
6464
.crumb { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
6565
.actions { display: flex; gap: 10px; align-items: center; }
66+
/* ===== M/R/X 三版切换器 ===== */
67+
.ed-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 252, 245, .6); }
68+
.ed-switch .ed-btn { min-width: 28px; padding: 5px 9px; border: none; border-radius: 999px; background: transparent; color: var(--dim); font-size: 12px; font-weight: 800; letter-spacing: .5px; cursor: pointer; transition: background .15s, color .15s; }
69+
.ed-switch .ed-btn:hover { color: var(--accent-strong); }
70+
.ed-switch .ed-btn.on { background: linear-gradient(140deg, #e2b878, #b38545); color: #fff; box-shadow: 0 3px 10px rgba(179, 133, 69, .35); }
6671
.menu-wrap { position: relative; }
6772
.menu {
6873
position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; z-index: 40;

android/index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@
1919
</div>
2020
<div class="crumb" id="crumb" title="当前文件"></div>
2121
<div class="actions">
22+
<div class="ed-switch" id="edSwitch" title="切换 HIC 版本:M 轻量(仅 HIC 内核)/ R 标准(+Python 编译)/ X 全能(+Python +C++ 编译)。切换后预览与导出页面均按所选版本编译">
23+
<button type="button" class="ed-btn" data-ed="m">M</button>
24+
<button type="button" class="ed-btn" data-ed="r">R</button>
25+
<button type="button" class="ed-btn on" data-ed="x">X</button>
26+
</div>
2227
<button id="btnLive" class="btn ghost live" title="观看实时转译:立即把当前页面 HIC 代码转译为 HTML">✓ 实时转译</button>
2328
<div class="menu-wrap">
2429
<button id="btnExport" class="btn solid">导出 ▾</button>

android/js/app.js

Lines changed: 60 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
addPage: $("addPage"),
5252
btnLive: $("btnLive"),
5353
btnExport: $("btnExport"),
54+
edSwitch: $("edSwitch"),
5455
fileImg: $("fileImg"),
5556
fileHc: $("fileHc"),
5657
fileApp: $("fileApp"),
@@ -112,6 +113,47 @@
112113
});
113114
}
114115

116+
/* ---- 三版切换(M 轻量 / R 标准 / X 全能) ---- */
117+
// 网页端可随时切换版本:切换后引擎可编译语言、预览与导出页面均按所选版本执行
118+
const ED_NAME = { m: "M·轻量版", r: "R·标准版", x: "X·全能版" };
119+
const ED_DESC = { m: "仅 HIC 内核", r: "内核 + Python 编译", x: "内核 + Python + C++ 编译" };
120+
function edNorm(ed) {
121+
const c = String(ed || "").toLowerCase()[0];
122+
return (c === "m" || c === "r" || c === "x") ? c : "x";
123+
}
124+
function currentEdition() { return state.edition || "x"; }
125+
// 把当前版本应用到:引擎(HC.setEdition)、全局标记(window.HIC_EDITION)、
126+
// 顶栏版本徽标、切换器高亮、代码片段按钮(+ Python / + C++)显隐
127+
function applyEditionUI() {
128+
const ed = currentEdition();
129+
if (typeof HC !== "undefined" && HC.setEdition) HC.setEdition(ed);
130+
try { window.HIC_EDITION = ed; } catch (e) {}
131+
const VT = document.getElementById("verTag");
132+
if (VT) VT.textContent = "v3.66 · " + ED_NAME[ed];
133+
if (el.edSwitch) Array.prototype.forEach.call(el.edSwitch.querySelectorAll(".ed-btn"), function (b) {
134+
b.classList.toggle("on", b.getAttribute("data-ed") === ed);
135+
});
136+
Array.prototype.forEach.call(document.querySelectorAll(".snippet"), function (b) {
137+
const needEd = (b.getAttribute("data-ed") || "").toLowerCase();
138+
if (!needEd) return;
139+
let visible = false;
140+
if (needEd === "rx") visible = (ed === "r" || ed === "x");
141+
else if (needEd === "x") visible = (ed === "x");
142+
b.style.display = visible ? "" : "none";
143+
});
144+
}
145+
function setEdition(ed, silent) {
146+
const v = edNorm(ed);
147+
if (v === state.edition) return;
148+
state.edition = v;
149+
try { localStorage.setItem("HIC_EDITION_PREF", v); } catch (e) {}
150+
applyEditionUI();
151+
if (!silent) {
152+
logConsole("output", "已切换到 " + ED_NAME[v] + "(" + ED_DESC[v] + ");预览与导出页面将按此版本编译");
153+
doLive();
154+
}
155+
}
156+
115157
/* ---- 首页引导 ---- */
116158
function showHome() {
117159
saveNow();
@@ -811,16 +853,14 @@
811853
});
812854
// 可下载文件上传
813855
el.fileApp.onchange = onFileApp;
856+
// 三版切换器:M 轻量 / R 标准 / X 全能(切换后立即按新版本重新转译)
857+
if (el.edSwitch) el.edSwitch.addEventListener("click", function (e) {
858+
const b = e.target.closest ? e.target.closest("[data-ed]") : null;
859+
if (b) setEdition(b.getAttribute("data-ed"));
860+
});
814861
// 快捷代码片段:触发区域 / use / 下载文件 / 原生HTML / 编译语言块
815-
const _ed = (window.HIC_EDITION || "x").toLowerCase(); // m=仅HIC r=+py x=+py+cpp
862+
// (「+ Python / + C++」按钮随版本显隐由 applyEditionUI 统一处理)
816863
Array.prototype.forEach.call(document.querySelectorAll(".snippet"), function (b) {
817-
const needEd = (b.getAttribute("data-ed") || "").toLowerCase();
818-
if (needEd) {
819-
let ok = false;
820-
if (needEd === "rx") ok = (_ed === "r" || _ed === "x");
821-
else if (needEd === "x") ok = (_ed === "x");
822-
if (!ok) { b.style.display = "none"; }
823-
}
824864
b.onclick = function () {
825865
const snip = b.getAttribute("data-snip");
826866
const code = el.code, s = code.selectionStart;
@@ -850,15 +890,20 @@
850890
function boot() {
851891
bind();
852892
bindNoBarPref();
853-
// 三版发布:按 HIC_EDITION 设置引擎可编译语言并在顶栏显示版本号
854-
const ed = (window.HIC_EDITION || "x").toLowerCase();
855-
if (HC.setEdition) HC.setEdition(ed);
856-
const ED_NAME = { m: "M·轻量版", r: "R·标准版", x: "X·全能版" }[ed] || "X·全能版";
857-
const VT = document.getElementById("verTag");
858-
if (VT) VT.textContent = "v3.66 · " + ED_NAME;
893+
// 三版发布:网页端可直接切换 M/R/X。优先级:
894+
// ① URL 参数 ?edition=m|r|x(下载页「在线体验三版」直达)
895+
// ② localStorage 记忆的上次选择
896+
// ③ 默认 X 全能版
897+
let ed = "x";
898+
try {
899+
const q = new URLSearchParams(window.location.search || "").get("edition");
900+
ed = q || localStorage.getItem("HIC_EDITION_PREF") || "x";
901+
} catch (e) {}
902+
state.edition = edNorm(ed);
903+
applyEditionUI();
859904
// 轻量编辑器:语法高亮 + 行号 + 自动缩进 + 括号补全
860905
if (window.HICED) window.hiced = HICED.create(el.code);
861-
if (typeof HC !== "undefined" && HC.APP) logConsole("output", "HiCode " + HC.APP.version + " " + ED_NAME + "(HIC " + (ed === "m" ? "仅 HIC 内核" : ed === "r" ? "内核 + Python" : "内核 + Python + C++") + ")已启动 · 就绪");
906+
if (typeof HC !== "undefined" && HC.APP) logConsole("output", "HiCode " + HC.APP.version + " " + ED_NAME[currentEdition()] + "(HIC " + ED_DESC[currentEdition()] + ")已启动 · 就绪");
862907
else logConsole("output", "HiCode IDE 已启动 · 就绪");
863908
if (!Store.hasAnyProject()) { showHome(); return; }
864909
showHome(); // 默认先回首页引导;也可自动恢复

download/index.html

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -176,10 +176,13 @@ <h1>下载 <span class="accent">HiCode</span> v3.66</h1>
176176
<p>无需下载,打开浏览器即可编写 HIC 代码并实时转译为网页。支持项目 / 页面管理、图形化定位、图片上传与多种导出。</p>
177177
<ul><li>零安装,即开即用</li><li>实时转译预览</li><li>导出 .hc / .html / .zip</li></ul>
178178
<div class="cta">
179-
<a class="btn primary" href="../ide/">进入网页端体验</a>
179+
<a class="btn primary" href="../ide/?edition=x">进入网页端体验</a>
180+
<a class="btn ghost" href="../ide/?edition=m">在线体验 M 轻量版</a>
181+
<a class="btn ghost" href="../ide/?edition=r">在线体验 R 标准版</a>
182+
<a class="btn ghost" href="../ide/?edition=x">在线体验 X 全能版</a>
180183
<a class="btn ghost" href="HiCode-v3.66X-offline.html" download="HiCode-v3.66X-offline.html">下载离线单文件版</a>
181184
</div>
182-
<div class="dim">离线单文件版 = 把网页端整个搬到本地,双击即可断网使用。</div>
185+
<div class="dim">离线单文件版 = 把网页端整个搬到本地,双击即可断网使用。网页端顶栏可随时切换 M / R / X,切换后预览与导出页面按所选版本编译。</div>
183186
</div>
184187
<div style="text-align:center;color:var(--dim);font-size:52px;opacity:.5;">🌐</div>
185188
</div>
@@ -193,16 +196,19 @@ <h3><span class="no">00</span>三版下载(M / R / X)</h3>
193196
<h4>M · 轻量版</h4>
194197
<p>仅含全套 HIC 内核,最精简。</p>
195198
<a class="btn primary" href="HiCode-v3.66M-offline.html" download="HiCode-v3.66M-offline.html">下载 M 轻量版</a>
199+
<a class="btn ghost" href="../ide/?edition=m">在线体验 M 版</a>
196200
</div>
197201
<div style="flex:1;min-width:230px;border:1px solid rgba(199,165,107,.35);border-radius:12px;padding:16px;">
198202
<h4>R · 标准版</h4>
199203
<p>全套 HIC 内核 + 把 <code>py:(…)</code> 编译为 HTML。</p>
200204
<a class="btn primary" href="HiCode-v3.66R-offline.html" download="HiCode-v3.66R-offline.html">下载 R 标准版</a>
205+
<a class="btn ghost" href="../ide/?edition=r">在线体验 R 版</a>
201206
</div>
202207
<div style="flex:1;min-width:230px;border:1px solid rgba(199,165,107,.35);border-radius:12px;padding:16px;">
203208
<h4>X · 全能版</h4>
204209
<p>全套 HIC 内核 + 把 <code>py:(…)</code> / <code>cpp:(…)</code> 编译为 HTML。</p>
205210
<a class="btn primary" href="HiCode-v3.66X-offline.html" download="HiCode-v3.66X-offline.html">下载 X 全能版</a>
211+
<a class="btn ghost" href="../ide/?edition=x">在线体验 X 版</a>
206212
</div>
207213
</div>
208214
</section>
@@ -218,20 +224,21 @@ <h3><span class="no">02</span>离线单文件版</h3>
218224
<h3><span class="no">03</span>GitHub Releases · 默认发布渠道</h3>
219225
<p>自 v3.01 起,每个新版本都会基于 <b>Git Tag</b><b>GitHub Releases</b> 默认发布(含三档离线单文件版 / 源码 / 后续原生安装包)。前往 <a href="https://github.com/HiCodeHC/HiCodeHC.github.io/releases" target="_blank" rel="noopener" style="color:var(--accent);border-bottom:1px dashed rgba(199,165,107,.5);">github.com/HiCodeHC/HiCodeHC.github.io/releases</a> 可查看本版本的所有发布附件与更新说明。</p>
220226

221-
<h3><span class="no">04</span>打包为 .apk(安卓端)</h3>
222-
<p><b>Capacitor</b> 把离线单文件封装为原生 Android 应用(WebView 壳):</p>
227+
<h3><span class="no">04</span>打包为 .apk(安卓端 · M / R / X 各版本</h3>
228+
<p><b>Capacitor</b> 把对应版本的离线单文件封装为原生 Android 应用(WebView 壳)。把 <code>&lt;ED&gt;</code> 换成 <code>M</code> / <code>R</code> / <code>X</code> 即可分别产出三个 .apk</p>
223229
<pre><code>npm init -y &amp;&amp; npm i @capacitor/core @capacitor/android @capacitor/cli
224-
cp 下载的离线单文件.html www/index.html
225-
npx cap init HiCode com.hicode.ide
230+
ED=X # 可选 M / R / X,逐个打包出 HiCode-v3.66X.apk / R / M
231+
cp HiCode-v3.66$ED-offline.html www/index.html
232+
npx cap init HiCode-$ED com.hicode.ide.$ED
226233
npx cap add android
227234
cd android &amp;&amp; ANDROID_HOME=/path/to/sdk ./gradlew assembleDebug # 产出 app-debug.apk</code></pre>
228235

229-
<h3><span class="no">05</span>打包为 .exe(电脑端)</h3>
230-
<p><b>Electron</b> + <b>electron-builder</b> 打包为 Windows 便携版:</p>
236+
<h3><span class="no">05</span>打包为 .exe(电脑端 · M / R / X 各版本</h3>
237+
<p><b>Electron</b> + <b>electron-builder</b> 打包为 Windows 便携版。同样把 <code>&lt;ED&gt;</code> 换成 <code>M</code> / <code>R</code> / <code>X</code> 即可分别产出三个 .exe</p>
231238
<pre><code>npm init -y &amp;&amp; npm i electron electron-builder --save-dev
232-
# 写 main.js 加载本地 index.html
233-
# 配置 package.json 的 "build" 字段
234-
npx electron-builder --win portable --x64 # 产出 HiCode.exe</code></pre>
239+
# 写 main.js 加载本地 index.html(内容 = HiCode-v3.66$ED-offline.html)
240+
# 配置 package.json 的 "build" 字段(productName: HiCode-v3.66$ED)
241+
npx electron-builder --win portable --x64 # 产出 HiCode-v3.66$ED.exe</code></pre>
235242
</section>
236243
</main>
237244

ide/index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717
var narrow = (window.innerWidth || document.documentElement.clientWidth) < 900;
1818
// 手机 / 安卓窄屏 → 手机端;电脑等大屏 → 电脑端
1919
var target = (mobile || narrow) ? "../android/" : "../windows/";
20+
// 携带 ?edition=m/r/x 到目标端(下载页「在线体验三版」直达对应版本)
21+
var q = window.location.search || "";
22+
if (/[?&]edition=(m|r|x)/i.test(q)) target += q;
2023
try { localStorage.setItem("hicode_entry", target); } catch (e) {}
2124
window.location.replace(target);
2225
})();

0 commit comments

Comments
 (0)