ui 图形界面初始化 #45

LDmoxeii · May 4, 2024 · ca36e75 · ca36e75
1 parent 7bdae3b
commit ca36e75
Show file tree

Hide file tree

Showing 39 changed files with 135 additions and 37 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 /log
 /db
+/ui
+**/*.js
 tc.json
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -4,18 +4,33 @@
 		{
 			"label": "deno test",
 			"type": "shell",
-			"command": "zsh cli/db.zsh; deno test --allow-net --allow-read tst",
+			"command": "zsh cli/db.zsh; deno test --allow-net --allow-read ismism.ts/tst",
+			"group": "test",
+			"presentation": {
+				"echo": true,
+				"reveal": "always",
+				"panel": "dedicated",
+				"showReuseMessage": true,
+				"clear": true
+			},
+			"problemMatcher": []
+		},
+		{
+			"label": "build",
+			"type": "shell",
+			"command": "zsh cli/build.zsh",
 			"group": {
 				"kind": "test",
-				"isDefault": true,
+				"isDefault": true
 			},
 			"presentation": {
 				"echo": true,
 				"reveal": "always",
 				"panel": "dedicated",
 				"showReuseMessage": true,
-				"clear": true,
-			}
+				"clear": true
+			},
+			"problemMatcher": []
 		}
 	]
 }
diff --git a/cli/build.zsh b/cli/build.zsh
@@ -0,0 +1,14 @@
+echo "building ismism.ts\n"
+
+rm -f cli/*.js
+rm -rf ui
+mkdir ui
+
+cd ismism.ts
+
+set -e
+deno check src/ser.ts ui/bind/bind.ts
+deno run -A cli/bundle.ts src/ser ui/bind/bind
+deno run -A ui/ui.ts
+
+mv src/ser.js ../cli
diff --git a/ismism.ts/cli/bundle.ts b/ismism.ts/cli/bundle.ts
@@ -0,0 +1,7 @@
+import { bundle } from "https://deno.land/x/[email protected]/mod.ts"
+
+await Promise.all(Deno.args.map(async p => {
+    const b = await bundle(`${p}.ts`)
+    const c = b.code
+    await Deno.writeTextFile(`${p}.js`, c)
+}))
diff --git a/cli/sendsms.ts → ismism.ts/cli/sendsms.ts b/cli/sendsms.ts → ismism.ts/cli/sendsms.ts
diff --git a/src/eid/agd.ts → ismism.ts/src/eid/agd.ts b/src/eid/agd.ts → ismism.ts/src/eid/agd.ts
diff --git a/src/eid/aut.ts → ismism.ts/src/eid/aut.ts b/src/eid/aut.ts → ismism.ts/src/eid/aut.ts
diff --git a/src/eid/db.ts → ismism.ts/src/eid/db.ts b/src/eid/db.ts → ismism.ts/src/eid/db.ts
diff --git a/src/eid/id.ts → ismism.ts/src/eid/id.ts b/src/eid/id.ts → ismism.ts/src/eid/id.ts
diff --git a/src/eid/is.ts → ismism.ts/src/eid/is.ts b/src/eid/is.ts → ismism.ts/src/eid/is.ts
diff --git a/src/eid/msg.ts → ismism.ts/src/eid/msg.ts b/src/eid/msg.ts → ismism.ts/src/eid/msg.ts
diff --git a/src/eid/rec.ts → ismism.ts/src/eid/rec.ts b/src/eid/rec.ts → ismism.ts/src/eid/rec.ts
diff --git a/src/eid/soc.ts → ismism.ts/src/eid/soc.ts b/src/eid/soc.ts → ismism.ts/src/eid/soc.ts
diff --git a/src/eid/typ.ts → ismism.ts/src/eid/typ.ts b/src/eid/typ.ts → ismism.ts/src/eid/typ.ts
diff --git a/src/eid/usr.ts → ismism.ts/src/eid/usr.ts b/src/eid/usr.ts → ismism.ts/src/eid/usr.ts
diff --git a/src/ont/adm.ts → ismism.ts/src/ont/adm.ts b/src/ont/adm.ts → ismism.ts/src/ont/adm.ts
diff --git a/src/ont/base.ts → ismism.ts/src/ont/base.ts b/src/ont/base.ts → ismism.ts/src/ont/base.ts
diff --git a/src/ont/crypt.ts → ismism.ts/src/ont/crypt.ts b/src/ont/crypt.ts → ismism.ts/src/ont/crypt.ts
diff --git a/src/ont/json.ts → ismism.ts/src/ont/json.ts b/src/ont/json.ts → ismism.ts/src/ont/json.ts
diff --git a/src/ont/jwt.ts → ismism.ts/src/ont/jwt.ts b/src/ont/jwt.ts → ismism.ts/src/ont/jwt.ts
diff --git a/src/ont/sms.ts → ismism.ts/src/ont/sms.ts b/src/ont/sms.ts → ismism.ts/src/ont/sms.ts
diff --git a/src/ont/utc.ts → ismism.ts/src/ont/utc.ts b/src/ont/utc.ts → ismism.ts/src/ont/utc.ts
diff --git a/src/pra/can.ts → ismism.ts/src/pra/can.ts b/src/pra/can.ts → ismism.ts/src/pra/can.ts
diff --git a/src/pra/doc.ts → ismism.ts/src/pra/doc.ts b/src/pra/doc.ts → ismism.ts/src/pra/doc.ts
diff --git a/src/pra/pas.ts → ismism.ts/src/pra/pas.ts b/src/pra/pas.ts → ismism.ts/src/pra/pas.ts
diff --git a/src/pra/pos.ts → ismism.ts/src/pra/pos.ts b/src/pra/pos.ts → ismism.ts/src/pra/pos.ts
diff --git a/src/pra/pre.ts → ismism.ts/src/pra/pre.ts b/src/pra/pre.ts → ismism.ts/src/pra/pre.ts
diff --git a/src/pra/put.ts → ismism.ts/src/pra/put.ts b/src/pra/put.ts → ismism.ts/src/pra/put.ts
diff --git a/src/pra/que.ts → ismism.ts/src/pra/que.ts b/src/pra/que.ts → ismism.ts/src/pra/que.ts
diff --git a/src/ser.ts → ismism.ts/src/ser.ts b/src/ser.ts → ismism.ts/src/ser.ts
diff --git a/tst/eid.test.ts → ismism.ts/tst/eid.test.ts b/tst/eid.test.ts → ismism.ts/tst/eid.test.ts
diff --git a/tst/mod.test.ts → ismism.ts/tst/mod.test.ts b/tst/mod.test.ts → ismism.ts/tst/mod.test.ts
diff --git a/tst/ont.test.ts → ismism.ts/tst/ont.test.ts b/tst/ont.test.ts → ismism.ts/tst/ont.test.ts
diff --git a/tst/pos.test.ts → ismism.ts/tst/pos.test.ts b/tst/pos.test.ts → ismism.ts/tst/pos.test.ts
diff --git a/tst/que.test.ts → ismism.ts/tst/que.test.ts b/tst/que.test.ts → ismism.ts/tst/que.test.ts
diff --git a/ismism.ts/ui/bind/bind.ts b/ismism.ts/ui/bind/bind.ts
@@ -0,0 +1 @@
+console.log("从零开发！")
diff --git a/ismism.ts/ui/index/index.html b/ismism.ts/ui/index/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="utf-8">
+    <title>主义主义</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="refresh" content="3600">
+    <link rel="icon" type="image/png" sizes="32x32" href="//s1.ax1x.com/2023/06/15/pCu2bZQ.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="//s1.ax1x.com/2023/06/15/pCu2LIs.png">
+    <link rel="icon" type="image/png" href="//s1.ax1x.com/2023/06/15/pCu25xf.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="//s1.ax1x.com/2023/06/15/pCu25xf.png">
+</head>
+
+<template></template>
+
+<style></style>
+
+<body>
+    <nav>
+        <menu>
+            <li><a href="">主义主义</a></li>
+            <li><a href="#soc">同城俱乐部</a></li>
+            <li><a href="#wsl">法律援助</a></li>
+            <li><a href="#lit">理论学习</a></li>
+            <li><a href="#pas">用户登录</a></li>
+        </menu>
+    </nav>
+    <hr>
+    <div id="main"></div>
+</body>
+
+<script></script>
+
+</html>
diff --git a/ismism.ts/ui/ui.ts b/ismism.ts/ui/ui.ts
@@ -0,0 +1,10 @@
+const [index, bind] = await Promise.all([
+    Deno.readTextFile("./ui/index/index.html"),
+    Deno.readTextFile("./ui/bind/bind.js"),
+])
+
+const ui = index
+    .replace("<script></script>", `<script type="module">${bind}</script>`)
+
+console.log(`emitting ui/index.html #${ui.length}`)
+Deno.writeTextFileSync("../ui/index.html", ui)
diff --git a/readme.md b/readme.md
@@ -1,37 +1,51 @@
 ## 代码结构
 
-* `cli` 命令接口 `command line interface`
-* `src` 源代码 `source`
-	* `ont` 基础操作 `ontic`
-		- `base.ts` 进制转换
-		- `utc.ts` 时间格式 `Universal Time Convention`
-		- `crypt.ts` 签名验证 `cryptography`
-		- `jwt.ts` 身份验证 `JSON Web Token`
-		- `adm.ts` 行政区划 `administrative region`
-		- `json.ts` JSON数据声明
-	* `eid` 核心操作 `eidetic`
-		- `typ.ts` 数据类型声明 `type`
-		- `db.ts` 数据库初始化与数据操作类型声明 `database`
-		- `is.ts` 数据定义与检查
-		- `id.ts` 实体数据操作 `identity`
-		- `usr.ts` 用户数据操作 `user`
-		- `soc.ts` 俱乐部数据操作 `sociation` `social`
-		- `agd.ts` 活动数据操作 `agenda`
-		- `rec.ts` 记录数据操作 `record` - `credit` `debit` `earn`
-		- `msg.ts` 文章数据操作 `message` - `wsl` `lit`
-		- `aut.ts` 权限数据操作 `author` `authority`
-	* `pra` 业务操作 `praxic`
-		- `can.ts` 操作权限
-		- `doc.ts` 数据组合 `document`
-		- `que.ts` 查询接口 `query`
-		- `pas.ts` 用户登陆 `pass`
-		- `que.ts` 查询接口 `query` `HTTP GET` 对数据组合做请求
-		- `pas.ts` 用户登陆 `pass` (的操作组合)
-		- `pre.ts` 创建操作 `pre-data` `prepare` （的操作组合）
-		- `put.ts` 更新操作 `put-data`（的操作组合）
-		- `pos.ts` 请求接口 `post` `HTTP POST` 对操作组合做请求
-	* `ser.ts` 服务接口 `serve`
-* `tst` 测试代码 `tests`
-* `ui` 图形界面 `user interface`
+* `ismism.ts` 编译环境
+	* `cli` 命令接口 `command line interface`
+		- `sendsms.ts` 发送测试短信
+		- `bundle.ts` 编译并打包 `build and bundle`
+	* `src` 源代码 `source`
+		* `ont` 基础操作 `ontic`
+			- `base.ts` 进制转换
+			- `utc.ts` 时间格式 `Universal Time Convention`
+			- `crypt.ts` 签名验证 `cryptography`
+			- `jwt.ts` 身份验证 `JSON Web Token`
+			- `adm.ts` 行政区划 `administrative region`
+			- `json.ts` JSON数据声明
+		* `eid` 核心操作 `eidetic`
+			- `typ.ts` 数据类型声明 `type`
+			- `db.ts` 数据库初始化与数据操作类型声明 `database`
+			- `is.ts` 数据定义与检查
+			- `id.ts` 实体数据操作 `identity`
+			- `usr.ts` 用户数据操作 `user`
+			- `soc.ts` 俱乐部数据操作 `sociation` `social`
+			- `agd.ts` 活动数据操作 `agenda`
+			- `rec.ts` 记录数据操作 `record` - `credit` `debit` `earn`
+			- `msg.ts` 文章数据操作 `message` - `wsl` `lit`
+			- `aut.ts` 权限数据操作 `author` `authority`
+		* `pra` 业务操作 `praxic`
+			- `can.ts` 操作权限
+			- `doc.ts` 数据组合 `document`
+			- `que.ts` 查询接口 `query` `HTTP GET` 对数据组合做请求
+			- `pas.ts` 用户登陆 `pass` (的操作组合)
+			- `pre.ts` 创建操作 `pre-data` `prepare` （的操作组合）
+			- `put.ts` 更新操作 `put-data`（的操作组合）
+			- `pos.ts` 请求接口 `post` `HTTP POST` 对操作组合做请求
+		* `ser.ts` 服务接口 `serve`
+	* `tst` 测试代码 `tests`
+	* `ui` 图形界面 `graphical user interface`
+		* `index` UI声明（HTML/CSS）
+			- `index.html` UI入口 
+			- `template.html` UI元素
+			- `style.css` UI样式
+		* `bind` UI定义（TS/JS）绑定服务器端与浏览器端的数据
+			- `bind.ts` 绑定UI入口
+			- `template.ts` 绑定UI元素
+		* `ui.ts` 打包UI `ui bundle`
+* `cli` 命令接口（运行环境）（服务器端）
+	- `build.zsh` 构建运行环境
+* `ui` 图形界面（运行环境）（浏览器端）
+* `mongod.service` `mongod.yaml` 数据库配置（服务器端）
+* `nginx.conf` 端口配置（服务器端）
 
 ## [系列视频](https://space.bilibili.com/483417795/video)
-Original file line number
+Diff line change
@@ -1,3 +1,5 @@
     /log
     /db
+    /ui
+    **/*.js
     tc.json