add gen-ui

Privoce · Jun 29, 2024 · 00c786a · 00c786a
1 parent 320bd17
commit 00c786a
Show file tree

Hide file tree

Showing 26 changed files with 775 additions and 5 deletions.
diff --git a/src/SUMMARY.md b/src/SUMMARY.md
@@ -154,6 +154,17 @@
 # GenUI
 ---
 - [GenUI](./gen/introduction.md)
+  - [QuickStart](./gen/exmaple/quickstart.md)
+  - [Video](./gen/exmaple/video.md)
+  - [Tutorials]()
+    - [GenUI Logger](./gen/tutorials/logger.md)
+    - [GenUI Structure](./gen/tutorials/structure.md)
+    - [GenUI Ignore](./gen/tutorials/ignore.md)
+    - [GenUI Syntex](./gen/tutorials/syntex.md)
+      - [Color](./gen/tutorials/syntex/color.md)
+      - [Import](./gen/tutorials/syntex/import.md)
+      - [Static Page](./gen/tutorials/syntex/static.md)
+      - [Dyn Widget](./gen/tutorials/syntex/dyn_widget.md)
 - [Makepad-Plugin](./gen/makepad/plugin.md)
   - [BuiltIn-UI Lib](./gen/makepad/ui_lib.md)
     - [Components](./gen/makepad/components.md)

diff --git a/src/gen/design/future.md b/src/gen/design/future.md
@@ -1,19 +1,19 @@
 # Incremental compilation
 通过将代码分成模板、脚本、和样式三个部分，已经为实现增量编译奠定了基础。增量编译的关键在于能够快速识别出自上次编译以来哪些部分发生了变化，并仅重新编译这些变化的部分，从而节省时间和资源。将代码预处理成几个独立的部分，并使用策略模式来处理这些部分，为增量编译提供了一个很好的起点。以下是一些可以考虑的方向来进一步实现和优化增量编译的功能：
 
-## 1. 变更检测机制
+## 1. 变更检测机制 ✅
 
 为了实现增量编译，你需要一种机制来比较当前代码与上一次编译版本之间的差异。这涉及到对每个部分（模板、脚本、样式）进行某种形式的哈希或签名，以便快速识别出哪些部分发生了变化。Git这样的版本控制系统就是利用哈希来追踪文件变化的一个例子。
 
-## 2. 独立部分的编译与缓存
+## 2. 独立部分的编译与缓存 ✅
 
 在检测到特定部分（模板、脚本、样式）发生变化后，你的框架应该能够仅重新编译这些变化的部分，而不是整个应用。此外，对于没有变化的部分，如果能够缓存它们的编译结果，就可以在下一次编译时直接复用，进一步提高编译效率。
 
-## 3. 策略模式的应用
+## 3. 策略模式的应用 ✅
 
 使用了策略模式进行处理，这是一个很好的选择，因为它允许你为不同类型的变化定义不同的处理策略。例如，对于模板部分的变化，可能涉及到DOM结构的更新；而脚本部分的变化可能涉及到逻辑处理的更新；样式部分的变化则涉及到视觉表现的更新。通过为这些不同的变化类型定义具体的策略，你的框架可以更加灵活地处理各种变化情况。
 
-## 4. 优化构建过程
+## 4. 优化构建过程 half ✅
 
 除了增量编译之外，还可以探索其他优化构建过程的方法。比如，是否可以并行处理某些任务？是否可以更智能地安排任务的执行顺序以减少依赖等待时间？这些都是值得考虑的优化方向。
 

diff --git a/src/gen/exmaple/quickstart.md b/src/gen/exmaple/quickstart.md
@@ -0,0 +1,119 @@
+# QuickStart
+
+这个示例将向你展示如何使用GenUI框架结合Makepad作为转换底层
+
+## Step1: Create a new WorkSpace Rust Project
+
+### Step1.1 创建项目
+
+使用`cargo new {{project_name}}`创建一个简单Rust项目
+
+```shell
+cargo new gen_makepad_simple
+```
+
+### Step1.2 清理项目并改为WorkSpace
+
+接下来删除项目中的`src`目录并修改`Cargo.toml`文件
+
+```toml
+[workspace]
+members = ["ui"] # ui表示GenUI的代码编写目录
+```
+### Step1.3 创建GenUI项目目录
+
+```shell
+cd ./gen_makepad_simple
+cargo new ui
+```
+
+### Step1.3 在ui目录中创建UI根文件
+
+在ui目录中创建`views`目录，在`views`中创建`root.gen`和`mod.gen`文件
+
+```bash
+--- ui
+|------ views
+|-------------- mod.gen
+|-------------- root.gen
+|------ src
+|-------------- main.rs
+```
+
+![](../../static/gen/examples/quickstart/struct.png)
+
+## Step2: 创建root.gen
+
+- template: widget结构部分(我称这三个widget为root铁三角)
+  - root: makepad UI root根
+    - window: 主窗口
+      - view: 主视图
+- style: 嵌套编写widget的props(你也可以称之为styles)
+
+```html
+<template>
+  <root id="ui">
+    <window id="main_window">
+      <view flow="Down" height="All" align="0.5 0.5">
+        <label text="Gen + Makepad Project Hello World!!!" font_size="16.0"></label>
+      </view>
+    </window>
+  </root>
+</template>
+
+<style>
+#ui{
+  #main_window{
+    width: Fill;
+    height: Fill;
+    show_bg: true;
+    draw_bg: #1C2128;
+    flow: Down;
+    inner_size: 600.0, 800.0;
+    position: 300.0;
+  }
+}
+</style>
+```
+## Step3: 编写mod.rs导出root
+
+```rust
+<script>
+pub mod root;
+</script>
+```
+
+## Step4: main.rs
+
+是GenUI的编译入口，提供编译指向的能力
+
+- 在这个实例中，我们通过`app()`函数创建一个App编译器实例，指定编译底层目标为Makepad平台
+- 创建`makepad-widgets`依赖并指定使用本地Git库作为依赖地址
+- 设置目标入口文件的文件名字为`app`，这会让最终Makepad的入口为`app.rs`
+- 指定`E:/Rust/try/makepad/Gen-UI/examples/gen_makepad_simple/ui/views/root.gen`这个文件作为UI的根文件(通过这种方式，来切换多个UI根)
+- `add_dep()`方法将依赖添加到编译器中
+- 调用`compile()`方法进行编译
+- 调用`run()`方法启动编译器
+
+```rust
+use gen_compiler::{app, DepType, RustDependence, Target};
+
+fn main() {
+    // set app and specify target
+    let mut app = app(Target::Makepad);
+    // add makepad widget dependence
+    let mut makepad_widget = RustDependence::new("makepad-widgets");
+    makepad_widget.set_ty(DepType::local(
+        "E:/Rust/try/makepad/makepad/rik/makepad/widgets",
+    ));
+
+    // compile and run
+    let _ = app
+        .entry("app")
+        .root("E:/Rust/try/makepad/Gen-UI/examples/gen_makepad_simple/ui/views/root.gen")
+        .add_dep(makepad_widget)
+        .compile();
+
+    let _ = app.run();
+}
+```
diff --git a/src/gen/exmaple/video.md b/src/gen/exmaple/video.md
@@ -0,0 +1,9 @@
+# Video
+
+## GenUI With Makepad QuickStart
+
+<video src="../../static/gen/gen_makepad.mp4" controls></video>
+
+<p style="margin:16px 0; font-size: 18px;font-weight:700;color:#42A5F5;with:100%;text-align: center;">GenUI With Makepad QuickStart</p>
+
+<p style="margin:16px 0; font-size: 18px;font-weight:700;with:100%;text-align: center;">Sheng (2024-06-28)</p>
diff --git a/src/gen/introduction.md b/src/gen/introduction.md
@@ -1 +1,37 @@
+<divs style="display:flex;justify-content:center;">
+<pre style="color:#FF6332">
+     _/_/_/  _/_/_/_/  _/      _/  _/    _/  _/_/_/   
+  _/        _/        _/_/    _/  _/    _/    _/      
+ _/  _/_/  _/_/_/    _/  _/  _/  _/    _/    _/       
+_/    _/  _/        _/    _/_/  _/    _/    _/        
+ _/_/_/  _/_/_/_/  _/      _/    _/_/    _/_/_/       
+</pre>
+</divs>
+
 # Introduction
+
+GenUI是一个创新的SFP前端框架，使用Rust语言开发，最初受到Vue3和Makepad的启发。旨在帮助用户更有效地使用Rust编写前端项目。
+
+## Why SFP
+
+GenUI的SFP功能是指其可插拔设计，可以根据开发者的需求调整和使用不同的底层技术或框架，如Makepad或Slint。这种设计允许GenUI通过专门为这些底层框架设计的插件来扩展和自定义其功能，从而更好地适应各种开发场景。
+
+1. 通过插件提供强大的能力
+2. 不受固有底层限制
+3. 同时也是一种挑战
+
+## Advantage
+
+- 多框架兼容性
+- 灵活
+- 可扩展
+- 社区助力
+- 尊重用户
+
+## Target Group
+
+- 前端开发人员和全栈开发人员
+- 创新和实验项目的开发人员
+- 开源社区
+- 独立开发人员
+- 中小型项目开发（现在）
diff --git a/src/gen/makepad/components.md b/src/gen/makepad/components.md
@@ -1 +1,34 @@
 # Components
+
+- [x] Label
+- [x] Link
+- [x] Button
+- [x] Card
+  - [x] VLayout
+  - [x] HLayout
+- [x] Radio
+- [x] CheckBox
+- [x] Icon
+- [x] Image
+- [x] Input
+- [ ] Popup
+- [ ] Badge
+- [ ] DropDown
+- [ ] Toggle
+- [ ] Avatar
+- [ ] ToolTip
+- [ ] Progress
+- [ ] Slider
+- [ ] Tab
+- [ ] Table
+- [ ] Dialog
+- [ ] Select
+- [ ] FileUpload
+- [ ] Divide
+- [ ] Loading
+- [ ] EmptyState
+- [ ] BreadCrumb
+- [ ] Pagination
+- [ ] Metric
+- [ ] Menu
+- [x] ScrollBar(s)
diff --git a/src/gen/makepad/ui_lib.md b/src/gen/makepad/ui_lib.md
@@ -1 +1,150 @@
 # BuiltIn-UI Lib
+
+Github Address: [gen makepad component lib](https://github.com/palpus-rs/Gen-UI/tree/main/gen/components)
+
+--- 
+
+|Version|Date|
+|--|--|
+|v0.0.1|2024-06-28|
+
+
+## Feature
+
+1. More diverse props(styles)
+2. A simpler way of writing (more similar to CSS)
+3. With default style, can be switched through themes
+4. As a built-in component of GenUI, it can also be independently applied in Makepad projects
+5. Continuous high-speed updates (currently updated approximately once a week)
+
+## Import
+
+### Toml
+
+```toml
+gen_components ={ git="https://github.com/palpus-rs/Gen-UI/tree/main/gen/components" }
+```
+### lib.rs
+
+```rust
+pub use gen_components;
+```
+
+### Live Design
+
+```rust
+live_design! {
+    import gen_components::components::*;
+}
+```
+
+## GenUI Builtin Lib
+
+
+## Themes
+
+each theme color has [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
+
+| Color Category | 25     | 50     | 100     | 200     | 300     | 400     | 500     | 600     | 700     | 800     | 900     |
+|----------------|--------|--------|---------|---------|---------|---------|---------|---------|---------|---------|---------|
+| Dark           | #FCFCFD| #F9FAFB| #F2F4F7 | #EAECF0 | #D0D5DD | #95A2D3 | #667085 | #475467 | #344054 | #1D2939 | #101828 |
+| Primary        | #F5FEFF| #ECFDFF| #CFF9FE | #A5F0FC | #67E3F9 | #22CCEE | #06AED4 | #088AB2 | #0E6F90 | #155B75 | #164C63 |
+| Error          | #FFFBFA| #FEF3F2| #FEE4E2 | #FECDCA | #FDA29B | #F97066 | #F04438 | #D92D2D | #B42318 | #912018 | #7A271A |
+| Warning        | #FFFCF5| #FFFAEB| #FEF0C7 | #FEDF89 | #FEC84B | #FDB022 | #F79009 | #DC6803 | #B54708 | #93370D | #7A2E0E |
+| Success        | #F6FEF9| #ECFDF3| #D1FADF | #A6F4C5 | #6CE9A6 | #32D583 | #12B76A | #039855 | #027A48 | #05603A | #054F31 |
+
+---
+
+
+<div style="overflow-x: scroll;">
+<table cellspacing="0" border="0">
+  <thead>
+    <tr>
+      <th>Color Category</th>
+      <th>25</th>
+      <th>50</th>
+      <th>100</th>
+      <th>200</th>
+      <th>300</th>
+      <th>400</th>
+      <th>500</th>
+      <th>600</th>
+      <th>700</th>
+      <th>800</th>
+      <th>900</th>
+    </tr>
+  </thead>
+  <tbody style="color:#FF7043;">
+    <tr>
+      <td>Dark</td>
+      <td style="background:#FCFCFD;height:3em">#FCFCFD</td>
+      <td style="background:#F9FAFB;height:3em">#F9FAFB</td>
+      <td style="background:#F2F4F7;height:3em">#F2F4F7</td>
+      <td style="background:#EAECF0;height:3em">#EAECF0</td>
+      <td style="background:#D0D5DD;height:3em">#D0D5DD</td>
+      <td style="background:#95A2D3;height:3em">#95A2D3</td>
+      <td style="background:#667085;height:3em">#667085</td>
+      <td style="background:#475467;height:3em">#475467</td>
+      <td style="background:#344054;height:3em">#344054</td>
+      <td style="background:#1D2939;height:3em">#1D2939</td>
+      <td style="background:#101828;height:3em">#101828</td>
+    </tr>
+    <tr>
+      <td>Primary</td>
+      <td style="background:#F5FEFF;height:3em">#F5FEFF</td>
+      <td style="background:#ECFDFF;height:3em">#ECFDFF</td>
+      <td style="background:#CFF9FE;height:3em">#CFF9FE</td>
+      <td style="background:#A5F0FC;height:3em">#A5F0FC</td>
+      <td style="background:#67E3F9;height:3em">#67E3F9</td>
+      <td style="background:#22CCEE;height:3em">#22CCEE</td>
+      <td style="background:#06AED4;height:3em">#06AED4</td>
+      <td style="background:#088AB2;height:3em">#088AB2</td>
+      <td style="background:#0E6F90;height:3em">#0E6F90</td>
+      <td style="background:#155B75;height:3em">#155B75</td>
+      <td style="background:#164C63;height:3em">#164C63</td>
+    </tr>
+    <tr>
+      <td>Error</td>
+      <td style="background:#FFFBFA;height:3em">#FFFBFA</td>
+      <td style="background:#FEF3F2;height:3em">#FEF3F2</td>
+      <td style="background:#FEE4E2;height:3em">#FEE4E2</td>
+      <td style="background:#FECDCA;height:3em">#FECDCA</td>
+      <td style="background:#FDA29B;height:3em">#FDA29B</td>
+      <td style="background:#F97066;height:3em">#F97066</td>
+      <td style="background:#F04438;height:3em">#F04438</td>
+      <td style="background:#D92D2D;height:3em">#D92D2D</td>
+      <td style="background:#B42318;height:3em">#B42318</td>
+      <td style="background:#912018;height:3em">#912018</td>
+      <td style="background:#7A271A;height:3em">#7A271A</td>
+    </tr>
+    <tr>
+      <td>Warning</td>
+      <td style="background:#FFFCF5;height:3em">#FFFCF5</td>
+      <td style="background:#FFFAEB;height:3em">#FFFAEB</td>
+      <td style="background:#FEF0C7;height:3em">#FEF0C7</td>
+      <td style="background:#FEDF89;height:3em">#FEDF89</td>
+      <td style="background:#FEC84B;height:3em">#FEC84B</td>
+      <td style="background:#FDB022;height:3em">#FDB022</td>
+      <td style="background:#F79009;height:3em">#F79009</td>
+      <td style="background:#DC6803;height:3em">#DC6803</td>
+      <td style="background:#B54708;height:3em">#B54708</td>
+      <td style="background:#93370D;height:3em">#93370D</td>
+      <td style="background:#7A2E0E;height:3em">#7A2E0E</td>
+    </tr>
+    <tr>
+      <td>Success</td>
+      <td style="background:#F6FEF9;height:3em">#F6FEF9</td>
+      <td style="background:#ECFDF3;height:3em">#ECFDF3</td>
+      <td style="background:#D1FADF;height:3em">#D1FADF</td>
+      <td style="background:#A6F4C5;height:3em">#A6F4C5</td>
+      <td style="background:#6CE9A6;height:3em">#6CE9A6</td>
+      <td style="background:#32D583;height:3em">#32D583</td>
+      <td style="background:#12B76A;height:3em">#12B76A</td>
+      <td style="background:#039855;height:3em">#039855</td>
+      <td style="background:#027A48;height:3em">#027A48</td>
+      <td style="background:#05603A;height:3em">#05603A</td>
+      <td style="background:#054F31;height:3em">#054F31</td>
+    </tr>
+  </tbody>
+</table>
+</div>