feat: 更新官网

.gitignore

@@ -10,7 +10,6 @@ pnpm-lock.yaml
 package-lock.json
 yarn-error.log
 .history
-.vscode
 .idea
 lerna-debug.log
 metadata.json

.vitepress/config.ts

@@ -1,11 +1,12 @@
 import { defineConfig } from "vitepress";
 
-const base = process.env.BASE || '/'
-
+const base = process.env.BASE || "/";
+const title = "formily.top";
+const logoUrl = "http://cdn.zuo11.com/imgs/avatar.jpg";
 // --vp-code-block-bg
 export default defineConfig({
   base,
-  title: "Formily",
+  title,
   markdown: {
     theme: {
       light: "vitesse-light",
@@ -15,22 +16,25 @@ export default defineConfig({
   head: [
     // <link rel="" type="image/x-icon" href="//img.alicdn.com/imgextra/i3/O1CN01XtT3Tv1Wd1b5hNVKy_!!6000000002810-55-tps-360-360.svg">
     [
-      'link',
-      { rel: 'shortcut icon', type:"image/x-icon", href: '/formily-icon.svg' }
+      "link",
+      {
+        rel: "shortcut icon",
+        type: "image/x-icon",
+        href: logoUrl,
+      },
     ],
   ],
   themeConfig: {
-    logo: "/formily-icon.svg",
-    siteTitle: "Formily",
+    logo: logoUrl,
+    siteTitle: title,
 
     nav: [
-      { text: "Guide", link: "/guide/" },
+      { text: "指南", link: "/guide/introduction" },
       { text: "低代码配置列表", link: "/configList/" },
       // { text: "书单", link: "/book/" },
       // { text: "github", link: "https://github.com/formily" },
     ],
 
-
     socialLinks: [
       { icon: "github", link: "https://github.com/formily" },
       {
@@ -43,10 +47,10 @@ export default defineConfig({
 
     sidebar: [
       {
-        text: "基础",
+        text: "Getting Started",
         items: [
-          { text: "快速开始", link: "/guide/" },
-          { text: "使用方法", link: "/guide/usage" },
+          { text: "Introduction", link: "/guide/introduction" },
+          { text: "Quick Start", link: "/guide/quick-start" },
         ],
       },
       {

.vitepress/theme/style/var.css

@@ -36,5 +36,5 @@
 }
 
 .VPImage.logo {
-  border-radius: 50%;
+  border-radius: 6px;
 }

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "cSpell.ignoreWords": ["formily", "vitesse", "niceone"]
+}

guide/introduction.md

@@ -0,0 +1,31 @@
+# Introduction
+
+## 什么是 formily.top?
+
+formily.top 是基于 [Alibaba Formily](https://formilyjs.org/zh-CN) 二次开发的表单、静态页面低代码解决方案，目前主要应用在 Vue3 项目中，它包含下面几个模块：
+
+- 基于 Formily Designable 二次开发的低代码设计器 [design.formily.top](http://design.formily.top)
+- 基于 Vue3 + Koa.js + MongoDB 的低代码配置列表、编辑、预览（前后端增删改查）[config.formily.top](http://config.formily.top)、[api.formily.top](https://github.com/formily/server)
+
+下面是一个最基本的示例：
+
+```vue
+<template>
+  <FormilyView :configId="configId" @confirm="confirm" />
+</template>
+
+<script setup lang="ts">
+import { FormilyView } from "@niceone/formily-comp";
+
+const configId: string = "QJQkCJlOQ6wrZ00H"; // 低代码配置 ID
+const confirm = (formData) => {
+  console.log("confirm", formData, formData.name); // 获取表单数据
+};
+</script>
+```
+
+## 实现细节
+
+- 基于 @formily/element-plus 二次扩展开发的 [@niceone/formily-element-plus](https://github.com/formily/element-plus) 组件库，用于扩展设计器支持的组件
+- 针对低代码的应用场景，简化低代码引入，二次封装的 [@niceone/formily-comp](https://github.com/formily/formily-comp) 组件
+- Vue3 项目低代码应用场景，demo 展示：[vue.formily.top](http://vue.formily.top)

index.md

@@ -2,29 +2,29 @@
 layout: home
 
 hero:
-  name: Formily
-  text: Low code
-  tagline: This is an empty template...
+  name:
+  text: Vue3 Formily 低代码
+  tagline: 基于 Formily Designable 设计器二次开发，提高 Vue3 表单、静态页面开发效率
   image:
     src: /dev.svg
     # src: /vue-logo.png
-    alt: VitePress
+    alt: formily.top
   actions:
     - theme: brand
       text: Get Started
-      link: /guide/
+      link: /guide/introduction
     - theme: alt
       text: View on GitHub
       link: https://github.com/formily
 
 features:
+  - icon: 🍉
+    title: Form 表单低代码
+    details: 基础 Form 表单无需写大量逻辑，设计器中拖拽好后，几行代码即可完成开发。
+  - icon: 🍊
+    title: 组件级别低代码
+    details: 支持以组件形式引入低代码。支持把某个业务组件做成低代码、可配置。
   - icon: ⚡️
-    title: Vite, The DX that can't be beat
-    details: Lorem ipsum...
-  - icon: 🖖
-    title: Power of Vue meets Markdown
-    details: Lorem ipsum...
-  - icon: 🛠️
-    title: Simple and minimal, always
-    details: Lorem ipsum...
+    title: 无需发版，修改配置即可迭代上线
+    details: 低代码配置的页面、组件内容可以实时热更新，无需发版，修改配置，即可完成上线。
 ---