dao3-aui & fix edit link & logo

blog/2024-2-14-box3convert-comes-out.md

@@ -9,7 +9,7 @@ hide_table_of_contents: false
 ---
 
 Box3Convert是一个岛三在线转换工具，支持vox模型转建筑、建筑转vox模型，后续功能仍在开发中。
-
+<!-- truncate -->
 # box3convert
 Box3Convert，在线进行 `Box3` 相关的转换操作
 

docs/dao3-aui/getting-started.mdx

@@ -0,0 +1,105 @@
+---
+title: 快速上手
+sidebar_position: 2
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# 快速上手
+:::warning
+本文默认你已经掌握 **ArenaPro(或者ArenaLess)** 插件的基本用法，如未了解，请先阅读[ArenaPro](https://www.yuque.com/box3lab/arenapro)插件文档。
+:::
+## 设置开发环境
+:::info
+为了使用React+JSX/TSX，你在每个需要dao3-aui的项目都需要先完成以下步骤
+:::
+1. 请确保你已经配置好 VSCode 插件`ArenaPro`并安装好`Node.js`
+2. 创建一个ArenaPro项目
+3. 修改文件名、文件入口点
+    - 将 `client/src/clientApp.ts` 重命名为-> `client/src/clientApp.tsx`
+    - 将 `dao3.config.json` 中的 `client->entry` 改为 `src/clientApp.tsx`（类似下面这样）
+    ```js title="dao3.config.json"
+    {
+        "client": {
+            "base": "./client",
+            "entry": "src/clientApp.tsx",
+            ...省略...
+        }
+    }
+    ```
+4. 修改`client/tsconfig.json`
+    - 需要在`compilerOptions`中加入一些jsx/tsx相关的配置
+    ```js title="client/tsconfig.json"
+    {
+        "compilerOptions": {
+            // ...省略...
+            "noImplicitAny": false,// 这四行是要添加的内容
+            "jsx": "react",
+            "jsxFactory": "AUIApp.h",
+            "jsxFragmentFactory": "AUIApp.frag"
+            // ...省略...
+        }
+    }
+    ```
+
+## 安装 dao3-aui 库
+:::info
+以下是ArenaPro和ArenaLess安装dao3-aui库的方式
+:::
+<Tabs>
+  <TabItem value="ap" label="ArenaPro Creator" default>
+    打开终端，切换到项目根目录，执行如下命令
+    ```sh
+    npm install --save dao3-aui
+    ```
+  </TabItem>
+  <TabItem value="al" label="ArenaLess">
+    修改 `importMap.arenaless.jsonc`，在 `"imports"` 下添加 `"dao3-aui":"npm:dao3-aui"`，类似下图。
+    ```js title="importMap.arenaless.jsonc"
+    {
+        "imports": {
+            "dao3-aui":"npm:dao3-aui"
+        }
+    }
+    ```
+  </TabItem>
+</Tabs>
+
+## 你的第一段代码
+:::info
+理解以下内容需要有React基础知识，如果没有的话，请先阅读React的[这篇文档](https://zh-hans.react.dev/learn)。阅读完后你会掌握基本概念。(当然，我们这里没有这么多的html标签……)
+:::
+
+那我们先来一个`Counter`示例吧！点击一个按钮，显示的数字会随之增加。
+### Counter 计数器
+```tsx title="client/src/clientApp.tsx"
+import { AUIApp, hooks } from "dao3-aui";
+// 创建一个AUIApp实例
+let aui = new AUIApp();
+
+// 这个就是入口点的组件，渲染从这里开始
+function App() {
+  const [count,setCount]=hooks.useState<number>(0);
+  return (<>
+    <ui-text x="0" y="0" height="50px" width="200px" 
+      background-color="#ffffff" background-opacity="100%" 
+      onClick={()=>setCount(count+1)}
+      text-content={"点击次数："+count.toString()+"次"}></ui-text>
+  </>)
+}
+// 挂载到屏幕上
+aui.mount(<App />, ui);
+```
+使用ArenaPro或ArenaLess `构建->上传` 到链接地图
+
+#### 效果
+- 点击按钮，数字会增加
+
+  ![出现在左上角的按钮-0](./getting-started/1726421489338.png)
+- 点击后
+
+  ![出现在左上角的按钮-1](./getting-started/1726421512496.png)
+
+## 更多教程
+[点击阅读教程](./guide)

docs/dao3-aui/guide/index.md

@@ -0,0 +1,4 @@
+---
+title: 教程
+---
+这里有一些 Dao3-AUI 的教程。

docs/dao3-aui/guide/ui-events.md

@@ -0,0 +1,53 @@
+---
+title: UI事件
+sidebar_position: 2
+---
+# UI事件
+## onClick 点击事件
+任意ui组件可以通过onClick属性来绑定点击事件
+```tsx
+<ui-text
+    textContent="click me"
+    onClick={() => {
+        console.log("clicked!")
+    }}
+></ui-text>
+```
+## onInput 文本输入事件
+输入框组件`<ui-input></ui-input>`可以通过onInput属性来绑定文本输入事件
+```tsx
+<ui-input textContent="这是默认的文本"
+    onInput={(event)=>{
+        // 获取并输出输入框的文本
+        console.log(event.target.getAttribute("text-content"));
+    }}
+></ui-input>
+```
+### 示例
+```tsx title="client/src/clientApp.tsx"
+import { AUIApp, hooks } from "dao3-aui";
+let aui = new AUIApp();
+
+function App() {
+  // 调用setName会引发状态更新。更新name状态，下面的ui-text会随之改变（实时）
+  const [name,setName]=hooks.useState("默认文字");
+  // 关于useState的详细用法，请见React文档
+  // https://zh-hans.react.dev/reference/react/useState
+  return (<>
+    <ui-text
+      x="0px" y="0px" height="50px" width="200px" text-content={"你输入了： " + name}
+      background-color="#000000"
+      text-color="#ffffff"
+      background-opacity="100%"
+    ></ui-text>
+    <ui-input
+      x="0px" y="50px" width="200px" height="50px" placeholder="在这里输入文字，上面会实时更新"
+      // 检测输入事件，更新name为文本框内容
+      onInput={(e)=>setName(e.target.getAttribute("text-content"))}
+      // 同时文本框内容也是name
+      text-content={name}
+    ></ui-input>
+  </>);
+}
+aui.mount(<App />, ui);
+```

docs/dao3-aui/guide/ui-node.md

@@ -0,0 +1,43 @@
+---
+title: UI组件
+sidebar_position: 1
+---
+# UI组件
+Dao3-AUI 有一些标签组件，连接到的是岛三的UI组件。
+
+## 组件基本使用
+- 组件长这样：`<ui-xxx></ui-xxx>`
+- 组件有： ui-text,ui-image,ui-box,ui-input，对应岛三的UI组件类型
+- 组件的属性就是原有岛三属性的横杠形式，例如：
+    - `textContent(岛三UI)` -> `text-content(组件)`
+    - `textColor(岛三UI)` -> `text-color(组件)`
+    - `backgroundColor(岛三UI)` -> `background-color(组件)`
+```tsx
+<ui-text
+    text-content="hello world"
+    text-color="red"
+    text-x-alignment="Left"
+    background-color="green"
+    background-opacity="50%"
+></ui-text>
+```
+
+## 组件属性类型
+### 位置/尺寸 属性
+- 指定位置的属性：`x`,`y`
+- 指定尺寸的属性：`width`,`height`
+#### 格式
+可以是很多个值，用加号连接，offset的值为??px，scale的值为??%。举例：
+- `x="50px+50%"` x在50%的scale基础上再加50px的offset
+- ⚠`x="50%+-50px"` 负数目前也需要带+在前面
+### 其他属性
+| 属性类型 | 描述 | 举例 |
+| --- | --- | --- |
+| string | 文本类型 | `text-content="hello world"` |
+| number | 数字类型 | `text-font-size="20"` |
+| boolean | 布尔类型 | `text-bold="true"` |
+| color | 颜色类型(css颜色) | `text-color="red"` `background-color="green"` <br/> 也可以用rgb(r,g,b)和#rrggbb这样格式的颜色 |
+| enum | 枚举类型 | 目前仅 `pointerEventBehavior="ENABLE"`，见[岛三API](https://box3.yuque.com/staff-khn556/wupvz3/ksy9e996672upyqp) |
+| vec2 | 二维向量类型 | 暂无属性，格式为`x,y` |
+| anchor-vec2 | 二维锚点向量类型 | `anchor="50%,50%"` |
+| percent | 百分比类型 | `background-opacity="50%"` |

docs/dao3-aui/index.md

@@ -0,0 +1,23 @@
+---
+title: Dao3-AUI (React on 神岛)
+---
+# Dao3-AUI
+## 什么是Dao3-AUI ⚛️+📦
+- Dao3-AUI 是一个基于`Preact`的库，能够让神岛支持使用`React`的写法来编写客户端(Client)UI
+- Dao3-AUI 需要配合[ArenaPro](https://www.yuque.com/box3lab/arenapro)或者[ArenaLess](/docs/arenaless/)使用
+## 快速上手
+:::info[快速上手]
+需要新手入门教程？请点击[这里](./getting-started)
+:::
+
+## Dao3-AUI 的优势 
+- React 的写法，有React的优点，例如状态更新等
+- 支持`React`的`Hooks`，例如`useState`、`useEffect`等
+- 事件写法更为清晰，可以在节点上`onClick`,`onInput`等
+- 组件化的编程方式，十分简单地创建起属于你的组件库，避免了复制粘贴。
+- 近似于`html`的风格，有特色的组件参数绑定
+
+## Dao3-AUI 的缺点
+- 性能开销略高
+- 目前处于**早期开发阶段**，基本功能完备，但预计可能出现bug
+

docusaurus.config.js

@@ -44,14 +44,14 @@ const config = {
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:
-            'https://github.com/Box3TRC/documentation',
+            'https://github.com/Box3TRC/documentation/blob/main',
         },
         blog: {
           showReadingTime: true,
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:
-            'https://github.com/Box3TRC/documentation',
+            'https://github.com/Box3TRC/documentation/blob/main',
         },
         theme: {
           customCss: './src/css/custom.css',
@@ -64,12 +64,12 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       // Replace with your project's social card
-      image: 'https://one.trc.tobylai.fun/logo.png',
+      image: '/img/trclogo.png',
       navbar: {
         title: 'Box3TRC',
         logo: {
-          alt: 'Box3TRC logo',
-          src: 'https://one.trc.tobylai.fun/logo.png',
+          alt: '[logo]',
+          src: '/img/trclogo.png',
         },
         items: [
           {
@@ -105,10 +105,10 @@ const config = {
                 label: '论坛 (Github Discussions)',
                 href: 'https://github.com/orgs/Box3TRC/discussions/',
               },
-              {
-                label: 'QQ群',
-                href: 'https://qm.qq.com/q/Uzgx47iWWK',
-              },
+              // {
+              //   label: 'QQ群',
+              //   href: 'https://qm.qq.com/q/Uzgx47iWWK',
+              // },
             ],
           },
           {
@@ -128,8 +128,8 @@ const config = {
         copyright: `Copyright © ${new Date().getFullYear()} Box3TRC。使用Docusaurus构建。`,
       },
       prism: {
-        theme: prismThemes.github,
-        darkTheme: prismThemes.dracula,
+        theme: prismThemes.vsLight,
+        darkTheme: prismThemes.vsDark,
       },
     }),
 };