LUI是一款純前端框架，是對WEB桌面UI的一個大膽嘗試。
它凝聚了作者近一年的心血，作為WIN10UI開源項目的升級版，承載了作者對WEB桌面設計風格的追求。
在前端技術日新月異的背景下，YLUI力圖提供一種新的web應用組織形式。
如果你正在尋找一個漂亮的UI組件庫，你應該選擇bootstrap,layui,element-ui等項目。而你想要讓這些應用建立聯系，構成組織，并提供一個統一的門戶，那么YLUI將會是一個不錯的選擇。
YLUI最大程度地還原廣了大用戶熟悉的桌面操作模式，以各種形式的快捷方式定義操作入口，以子窗口承載信息主體。
由HTML+CSS+JS打造，完美運行于主流瀏覽器，不限制后端語言。支持使用第三方工具打包為APP或桌面應用程序。
YLUI在運行過程中的狀態支持以json格式隨時被序列化及反序列化，這將為本地緩存，網絡傳輸、多用戶定制帶來極大的便利。
窗體是桌面UI的靈魂，YLUI的窗體支持動態URL管理，跨域級別的子窗口通信。基于此特性您輕松實現多窗體聯動，開發出可靈活可復用的子窗口；強大的API讓您能使用代碼控制整個UI的runtime，甚至可以構造自己的應用商店！
需要已安裝Node.js+npm環境。
在項目目錄輸入命令：
npm inpm start根據提示訪問對應網址。
將代碼部署至您的web服務目錄，如nginx、apache服務器的www目錄下，訪問對應網址（如http://127.0.0.1/ylui/）。
2.1.9
我們提供了詳細的開發文檔，但是作為一款非開箱即用的UI，一些配置和編碼是不可避免的，不建議前端初學者使用。
原則上不可以，因為這不是一款免費軟件，開源軟件的傳播可能會侵犯作者的權益。如果您有這方面的意愿和想法，可以邀請作者一起加入您的開源項目。
下載源碼后，將文件夾置于WEB目錄下，用瀏覽器訪問對應的URL，支持主流web服務（如Apache，Nginx, IIS）。
YLUI對各尺寸及點擊、觸摸操作給予了最大程度的兼容。支持IE10+及其他主流瀏覽器，更低版本IE不能保證完整的體驗。
一些網站設置了iframe限制，還有一些網站監測到iframe后會主動發起跳出。解決方案，如果您有操作權限關閉相關限制即可。
取件鏈接： https://c-t.work/s/bdaf81f9e12c4d
開源地址：https://github.com/yuri2peter/ylui
有些在線圖文編輯器不支持直接插入代碼塊，但可以直接粘貼 HTML 格式的高亮代碼塊。
花了一點時間研究了一下各家的編輯器，規則卻各不相同。有的要求代碼塊被包含于 <code> ... </code> 或者 <pre> <code> ... </code> </pre> , 有些要求 class 屬性里包含 "code" 關鍵詞，或者要求代碼塊里必須包含至少一個 <br> 。如果不符合這些要求，不是變成普通文本，就是丟失換行縮進，或者丟失顏色樣式。
所以，這就難了。先得找個支持代碼高亮的編輯器，仔細地選擇并復制代碼塊，復制完還得編輯剪貼板里的 HTML 。這就不如干脆寫個轉換工具了。
因為瀏覽器操作系統剪貼板可能不太方便，下面用 aardio 寫一個工具軟件。
先看軟件成品演示：
軟件用法：
1、輸入編程語言名稱（支持自動完成）。
2、然后在輸入框中粘貼要轉換的編程代碼。
3、點擊「復制高亮代碼塊」按鈕。
然后我們就可以打開在線圖文編輯器直接粘貼生成的高亮代碼塊了。
下面是這個軟件的 aardio 源代碼：
import win.ui;
/*DSG{{*/
var winform=win.form(text="HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫";right=1055;bottom=674;bgcolor=16777215)
winform.add(
button={cls="button";text="復制高亮代碼塊";left=633;top=609;right=1000;bottom=665;bgcolor=16777215;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note="可在網頁編輯器直接粘貼";z=4};
cmbLangs={cls="combobox";left=262;top=625;right=446;bottom=651;db=1;dl=1;edge=1;items={"javascript"};mode="dropdown";z=2};
editCode={cls="edit";left=1;top=4;right=1052;bottom=599;db=1;dl=1;dr=1;dt=1;edge=1;hscroll=1;multiline=1;vscroll=1;z=5};
static={cls="static";text="請選擇語言：";left=70;top=629;right=248;bottom=649;align="right";db=1;dl=1;transparent=1;z=3};
webCtrl={cls="custom";text="自定義控件";left=8;top=10;right=1048;bottom=604;db=1;dl=1;dr=1;dt=1;hide=1;z=1}
)
/*}}*/
import web.view;
var wb=web.view(winform.webCtrl);
import win.clip.html;
wb.export({
onHighlight=function(html,background,foreground){
html=`<pre class="code" style="overflow-x:auto;text-align:left;box-shadow: rgba(216, 216, 216, 0.5) 0px 0px 0px 1px inset;padding:10px;border-radius:3px;background-color:`+background+`;color:`+foreground+`;white-space:pre;word-break:break-all;display:block;font-size:14px;font-style:normal;font-variant-ligatures:normal;font-variant-caps: normal;font-family: "Consolas", Consolas, "Liberation Mono", Menlo, Courier, monospace"><code>`
+ html + `</code></pre>`;
html,count=string.replace(html,'\n',"<br>");
if(!count){
html=string.replace(html,`\</code\>\</pre\>$`,`<br></code></pre>`);
}
var cb=win.clip.html();
cb.write(html);
winform.setTimeout(
function(){
winform.editCode.show(true);
winform.webCtrl.show(false);
winform.text="HTML 代碼塊生成工具 - 已復制高亮代碼塊到剪貼板，可在網頁直接粘貼";
},1000);
};
setLanguages=function(langs){
winform.languages=langs;
}
})
winform.cmbLangs.onEditChange=function(){
var text=string.lower(winform.cmbLangs.text);
var items=table.filter( winform.languages : {}, lambda(v) string.startWith(v,text) );
winform.cmbLangs.autoComplete(items);
}
winform.cmbLangs.editBox.disableInputMethod();
import web.prism;
import wsock.tcp.asynHttpServer;
var httpServer=wsock.tcp.asynHttpServer();
httpServer.run(web.prism,{
["/index.html"]=/*****
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="prism.css" rel="stylesheet" />
</head>
<body>
<pre id="code-pre"><code id="code" class="lang-javascript"></code></pre>
<script src="prism.js"></script>
<script>
function computedColorStyle(element, options={}) {
Array.prototype.forEach.call(element.children,child=> {
computedColorStyle(child, options);
});
const computedStyle=getComputedStyle(element);
element.style["color"]=computedStyle.getPropertyValue("color");
}
highlight=function(code,language){
var html=Prism.highlight(code, Prism.languages[language], language);
var codeEle=document.getElementById("code");
codeEle.innerHTML=html;
computedColorStyle(codeEle);
const computedStyle=getComputedStyle(codeEle);
onHighlight(codeEle.innerHTML
,getComputedStyle(document.getElementById("code-pre")).getPropertyValue("background-color")
,computedStyle.getPropertyValue("color"));
}
setLanguages( Object.keys(Prism.languages) );
</script>
</body>
</html>
*****/
});
wb.go( httpServer.getUrl("/index.html"));
winform.button.oncommand=function(id,event){
winform.text="HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫"
winform.editCode.show(false);
winform.webCtrl.show(true);
wb.xcall("highlight",winform.editCode.text,winform.cmbLangs.text);
}
winform.show();
win.loopMessage();打開 aardio 創建工程，然后復制粘貼上面的代碼到 main.aardio 里面就可以直接運行，或生成獨立 EXE 文件：
這個軟件的原理：
1、首先通過 WebView2 調用 Prism.js 高亮代碼。為了可以內存加載 Prism.js （ 支持生成獨立 EXE ），我寫了一個 aardio 擴展庫 web.prism 。關于 WebView2 請參考：放棄 Electron，擁抱 WebView2！JavaScript 快速開發獨立 EXE 程序
2、因為 Prism.js 生成的 HTML 代碼塊都是使用 class 屬性指定樣式，所以我們需要調用 getComputedStyle 獲取最終渲染的字體顏色屬性。
3、最后在 JavaScript 里調用 aardio 函數處理生成的 HTML 代碼塊，aardio 的任務是將 HTML 修改為更合適直接粘貼的格式，并盡可能地處理各圖文編輯器的兼容問題。然后調用 win.clip.html 將處理好的 HTML 復制到系統剪貼板：
import win.clip.html;
var cb=win.clip.html();
cb.write(html); 然后只要愉快地粘貼代碼塊就可以。
如果是 aardio 代碼不需要用這個工具，在 aardio 編輯器里右鍵直接點『 復制全部到 HTML 代碼塊 』就可以了：