component quickstart

Privoce · Jan 27, 2025 · 0609475 · 0609475
1 parent ab80a4b
commit 0609475
Show file tree

Hide file tree

Showing 11 changed files with 346 additions and 6 deletions.
diff --git a/docs/v0.1.0/zh/doc/components/_meta.json b/docs/v0.1.0/zh/doc/components/_meta.json
@@ -1,6 +1,7 @@
 [
     "overview",
     "install",
+    "theme",
     "resources",
     "quick-start"
 ]
diff --git a/docs/v0.1.0/zh/doc/components/install.mdx b/docs/v0.1.0/zh/doc/components/install.mdx
@@ -0,0 +1,21 @@
+# 安装
+
+在`GenUI`项目中是无需手动对`GenUI Builtin Components`进行安装的，在使用`Ract`创建项目时这些配置都会被自动构建。
+
+## 配置说明
+
+您会在由`Ract`自动构建的`gen_ui.toml`文件中看到如下配置:
+
+```toml title="gen_ui.toml"
+[makepad.dependencies]
+gen_components = { path = "path/to/gen_components" }
+```
+
+> [!TIP]
+>
+> 若您未看到这个配置请借助`ract config`的`get`命令获取`gen_components`的目录并进行添加，
+> 并将这个问题发布到`GenUI`到`issue`或我们的Discord频道，我会尽快回复您
+>
+> 点击这里发布：
+> - [GenUI Issues](https://github.com/Privoce/GenUI/issues)
+> - [Discord](https://discord.gg/jVEJDhE75Y)
diff --git a/docs/v0.1.0/zh/doc/components/overview.md b/docs/v0.1.0/zh/doc/components/overview.md
diff --git a/docs/v0.1.0/zh/doc/components/overview.mdx b/docs/v0.1.0/zh/doc/components/overview.mdx
@@ -0,0 +1,13 @@
+# 总览
+
+> [!TIP]
+>
+> 对于内置组件库的具体文档请参考: [组件](/zh/components/overview)
+> 
+> 本系列文档只讲述在GenUI项目中简单的使用
+
+## 介绍
+
+`GenUI Builtin Components`是一个 `Makepad` 组件库，可直接集成到 `Makepad` 项目中。作为 `GenUI` 的核心组件库，它可作为 `GenUI` 项目的基础构建块，加速前端开发人员的开发过程。
+
+然而，这不仅仅是一个组件库。它包含许多内置宏和系统 API，可简化开发工作流程并扩展 `Makepad` 的当前功能。它仅代表 `GenUI` 中许多基础模块的一部分，其功能类似于 `HTML` 元素，但采用更现代的方法设计。
diff --git a/docs/v0.1.0/zh/doc/components/quick-start.mdx b/docs/v0.1.0/zh/doc/components/quick-start.mdx
@@ -0,0 +1,10 @@
+# 快速入门
+
+本文档将讲述如何将`GenUI Builtin Components`使用与`GenUI`项目，我们会提供为每个组件提供易懂的使用文档。
+
+## `label` 文本组件
+
+## `view` 视图组件
+
+
+## `button` 按钮组件
diff --git a/docs/v0.1.0/zh/doc/components/resources.mdx b/docs/v0.1.0/zh/doc/components/resources.mdx
@@ -0,0 +1,21 @@
+# 静态资源
+
+## 字体
+
+我们使用 [OPPO Sans 3.0 `OPPOSans-Regular.ttf`](https://www.coloros.com/article/A00000050/)作为内置字体。
+
+- 商业用途：✅
+- 所需授权：✅
+- 二次开发：❌
+
+### 遵循说明
+
+您应遵守以下条款，违者将会被追究法律责任：
+
+1. 不对字体进行改编或二次开发；
+2. 不对外售卖字体；
+3. 不向他方提供其他下载渠道；
+4. 不用于违法用途。
+
+> [!WARNING]
+> **OPPO Sans（含中文及西文，3 款字重）允许个人或企业免费使用，含商业用途，版权归 OPPO 广东移动通信有限公司所有。**
diff --git a/docs/v0.1.0/zh/doc/components/theme.mdx b/docs/v0.1.0/zh/doc/components/theme.mdx
@@ -0,0 +1,201 @@
+import Color from "@theme/components/Color";
+
+# 主题
+
+`GenUI Theme Color` 是 `GenUI` 的主题颜色，包括一系列用于定义组件颜色的颜色变量。我们提供了默认的配色方案。
+
+在颜色类型上，我们主要分为以下几种：
+
+1. Dark
+2. Primary
+3. Info
+4. Success
+5. Warning
+6. Error
+
+每种颜色类型都含有 11 种色值: `[25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900]`
+
+**其中主色值为`500`**
+
+## Dark
+
+<Color
+  title="Dark"
+  colors={['#6e7176',
+        '#5b5f64',
+        '#42464d',
+        '#3b4047',
+        '#2f333b',
+        '#282d35',
+        '#22272F',
+        '#1f242b',
+        '#1d2127',
+        '#1a1e24',
+        '#0f1115']}
+></Color>
+
+- `25`: `#6e7176`
+- `50`: `#5b5f64`
+- `100`: `#42464d`
+- `200`: `#3b4047`
+- `300`: `#2f333b`
+- `400`: `#282d35`
+- `500`: `#22272F`
+- `600`: `#1f242b`
+- `700`: `#1d2127`
+- `800`: `#1a1e24`
+- `900`: `#0f1115`
+
+## Primary
+
+<Color
+  title="Primary"
+  colors={[
+        '#F5FEFF',
+        '#ECFDFF',
+        '#CFF9FE',
+        '#A5F0FC',
+        '#67E3F9',
+        '#22CCEE',
+        '#06AED4',
+        '#088AB2',
+        '#0E6F90',
+        '#155B75',
+        '#164C63'
+  ]}
+></Color>
+
+- `25`: `#F5FEFF`
+- `50`: `#ECFDFF`
+- `100`: `#CFF9FE`
+- `200`: `#A5F0FC`
+- `300`: `#67E3F9`
+- `400`: `#22CCEE`
+- `500`: `#06AED4`
+- `600`: `#088AB2`
+- `700`: `#0E6F90`
+- `800`: `#155B75`
+- `900`: `#164C63`
+
+## Info
+
+<Color
+  title="Info"
+  colors={[
+        '#F6FEF9',
+        '#ECFDF3',
+        '#D1FADF',
+        '#A6F4C5',
+        '#6CE9A6',
+        '#32D583',
+        '#12B76A',
+        '#039855',
+        '#027A48',
+        '#05603A',
+        '#054F31'
+  ]}
+></Color>
+
+- `25`: `#FCFCFD`
+- `50`: `#F9FAFB`
+- `100`: `#F2F4F7`
+- `200`: `#EAECF0`
+- `300`: `#D0D5DD`
+- `400`: `#95A2D3`
+- `500`: `#667085`
+- `600`: `#475467`
+- `700`: `#344054`
+- `800`: `#1D2939`
+- `900`: `#101828`
+
+## Success
+
+<Color
+  title="Success"
+  colors={[
+        '#FCFCFD',
+        '#F9FAFB',
+        '#F2F4F7',
+        '#EAECF0',
+        '#D0D5DD',
+        '#95A2D3',
+        '#667085',
+        '#475467',
+        '#344054',
+        '#1D2939',
+        '#101828'
+  ]}
+></Color>
+
+- `25`: `#F6FEF9`
+- `50`: `#ECFDF3`
+- `100`: `#D1FADF`
+- `200`: `#A6F4C5`
+- `300`: `#6CE9A6`
+- `400`: `#32D583`
+- `500`: `#12B76A`
+- `600`: `#039855`
+- `700`: `#027A48`
+- `800`: `#05603A`
+- `900`: `#054F31`
+
+## Warning
+
+<Color
+  title="Warning"
+  colors={[
+        '#FFFCF5',
+        '#FFFAEB',
+        '#FEF0C7',
+        '#FEDF89',
+        '#FEC84B',
+        '#FDB022',
+        '#F79009',
+        '#DC6803',
+        '#B54708',
+        '#93370D',
+        '#7A2E0E'
+  ]}
+></Color>
+
+- `25`: `#FFFCF5`
+- `50`: `#FFFAEB`
+- `100`: `#FEF0C7`
+- `200`: `#FEDF89`
+- `300`: `#FEC84B`
+- `400`: `#FDB022`
+- `500`: `#F79009`
+- `600`: `#DC6803`
+- `700`: `#B54708`
+- `800`: `#93370D`
+- `900`: `#7A2E0E`
+
+## Error
+<Color
+  title="Error"
+  colors={[
+        '#FFFBFA',
+        '#FEF3F2',
+        '#FEE4E2',
+        '#FECDCA',
+        '#FDA29B',
+        '#F97066',
+        '#F04438',
+        '#D92D2D',
+        '#B42318',
+        '#912018',
+        '#7A271A'
+  ]}
+></Color>
+
+- `25`: `#FFFBFA`
+- `50`: `#FEF3F2`
+- `100`: `#FEE4E2`
+- `200`: `#FECDCA`
+- `300`: `#FDA29B`
+- `400`: `#F97066`
+- `500`: `#F04438`
+- `600`: `#D92D2D`
+- `700`: `#B42318`
+- `800`: `#912018`
+- `900`: `#7A271A`
diff --git a/docs/v0.1.0/zh/doc/config/env.mdx b/docs/v0.1.0/zh/doc/config/env.mdx
@@ -10,7 +10,7 @@ import { Tab, Tabs } from 'rspress/theme';
 > 
 > 相较于手动，我们推荐您使用`ract config`命令
 >
-> 若您不知道`Ract`如何使用请参考：[Ract 使用说明](zh/doc/tutorial/ract/introduction#使用说明)
+> 若您不知道`Ract`如何使用请参考：[Ract 使用说明](zh/tools/ract/introduction#使用说明)
 
 ## Ract安装目录结构说明
 

diff --git a/docs/v0.1.0/zh/doc/guide/tools.mdx b/docs/v0.1.0/zh/doc/guide/tools.mdx
@@ -2,6 +2,10 @@ import { Badge } from '@theme';
 
 # 工具
 
+> [!TIP]
+>
+> 详细工具文档请参考: [工具](zh/tools/overview)
+
 ## Ract
 
 > Github: https://github.com/Privoce/ract

diff --git a/theme/components/Color/index.module.scss b/theme/components/Color/index.module.scss
@@ -0,0 +1,43 @@
+.color {
+  height: 120px;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 8px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+  border: 1px solid #ff8143;
+  box-shadow: 0 0 10px 2px #ff8143;
+  flex-wrap: wrap;
+  &-info{
+    padding: 0px 16px;
+    height: 36px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    h2 {
+        font-weight: 700;
+        font-size: 18px;
+        width: 100%;
+    }
+    h3 {
+        font-weight: 700;
+        font-size: 16px;
+    }
+  }
+  &-blocks{
+    margin-top: 8px;
+    height: 46px;
+    width: 100%;
+    display: flex;
+    align-items: stretch;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    &-item{
+        height: 100%;
+        width: 9.0909%;
+    }
+  }
+}
diff --git a/theme/components/Color/index.tsx b/theme/components/Color/index.tsx
@@ -0,0 +1,31 @@
+import { memo } from "react";
+import styles from "./index.module.scss";
+
+export interface ColorProps {
+  title: string;
+  colors: string[];
+}
+
+const Color = memo(({ title, colors }: ColorProps) => {
+  return <div className={styles.color} style={{ backgroundColor: colors[6] }}>
+    <div className={styles["color-info"]}>
+      <h2>{title}</h2>
+      <h3>{colors[6]}</h3>
+    </div>
+    <div className={styles["color-blocks"]}>
+      <div className={styles["color-blocks-item"]} style={{ backgroundColor: colors[0] }}></div>
+      <div className={styles["color-blocks-item"]} style={{ backgroundColor: colors[1] }}></div>
+      <div className={styles["color-blocks-item"]} style={{ backgroundColor: colors[2] }}></div>
+      <div className={styles["color-blocks-item"]} style={{ backgroundColor: colors[3] }}></div>
+      <div className={styles["color-blocks-item"]} style={{ backgroundColor: colors[4] }}></div>
+      <div className={styles["color-blocks-item"]} style={{ backgroundColor: colors[5] }}></div>
+      <div className={styles["color-blocks-item"]} style={{ backgroundColor: colors[6] }}></div>
+      <div className={styles["color-blocks-item"]} style={{ backgroundColor: colors[7] }}></div>
+      <div className={styles["color-blocks-item"]} style={{ backgroundColor: colors[8] }}></div>
+      <div className={styles["color-blocks-item"]} style={{ backgroundColor: colors[9] }}></div>
+      <div className={styles["color-blocks-item"]} style={{ backgroundColor: colors[10] }}></div>
+    </div>
+  </div>;
+});
+
+export default Color;