add doc

packages/dooringx-doc/src/changelog/1.1.md

@@ -1,4 +1,3 @@
-
 ---
 title: CHANGELOG
 order: 1

packages/dooringx-doc/src/docs/1.2.md

@@ -6,6 +6,6 @@ order: 2
  
 dooringx-lib 在运行时维护一套数据流，主要分为json数据部分，左侧组件部分，右侧配置项部分，快捷键部分，弹窗部分，事件与函数部分，数据源部分。
 
-其除了提供基础的拖拽、移动、缩放、全选等功能外，还可以使用暴露的组件。如果觉得组件不够定制化，可以调整样式或者自己重新写。
+其除了提供基础的拖拽、移动、缩放、全选、旋转等功能外，还可以使用暴露的组件。如果觉得组件不够定制化，可以调整样式或者自己重新写。
 
 

packages/dooringx-doc/src/docs/1.3.md

@@ -18,6 +18,8 @@ dooringx-lib在编辑时提供两种容器，可以根据需要选择使用。
 
 使用普通容器即在编辑时为普通的div并非iframe，而使用iframe则编辑时看见的为iframe内容。在预览时，使用preview组件，preview可以放到任何容器，包括去使用iframe查看。
 
+建议预览时使用iframe查看preview，如果有弹窗，在非iframe或pc中会显示异常。
+
 iframe容器由于使用postmessage通信，所以在操作上可能会有略微延迟。如果对样式隔离要求不高可以使用普通容器，预览的样式正常即可。
 
 普通容器使用参考demo:

packages/dooringx-doc/src/docs/2.1.md

@@ -10,7 +10,7 @@ store 可以在 config 中获取。
 
 在最开始时，需要通过 useStoreState 与 react 结合，此时可以在任意位置使用 store.forceUpdate 强刷，也可以使用 state 获取 store 中的数据。
 
-store 的最重要功能是保存着每次修改 jsonSchema 队列。
+store 的最重要功能是保存着每次修改 json  队列。
 
 如果你需要更新数据，在深拷贝后使用 setData 方法进行更新。
 

packages/dooringx-doc/src/docs/3.3.md

@@ -71,7 +71,7 @@ export default MButton;
 
 第三个参数用来配置右侧面板的配置项组件。其中键为右侧面板的分类，值为配置项组件数组。
 
-第四个参数会配置组件的初始值，特别注意的是，制作组件必须要有初始宽度（非由内容撑开），否则会在适配时产生问题。
+第四个参数会配置组件的初始值，特别注意的是，制作组件必须要有初始宽度高度（非由内容撑开），否则会在适配时全选时产生问题。
 
 这个初始值里有很多有用的属性，比如fixed代表使用固定定位，可以结合配置项更改该值，使得组件可以fixed定位。
 

packages/dooringx-doc/src/docs/4.1.md

@@ -0,0 +1,7 @@
+---
+title:  图表在位移时不断刷新
+sTitle: 常见问题
+order: 17
+---
+
+请使用fast-deep-equal比对所需要的数据，如果相同，则忽略更新即可。

packages/dooringx-doc/src/docs/4.2.md

@@ -0,0 +1,7 @@
+---
+title:  无法选中组件或预览适配有问题
+sTitle: 常见问题
+order: 18
+---
+
+绝对定位组件必须有初始宽高，虽然在拖拽中会给组件加上宽高，但如果用户一开始就未拖动，则组件无宽高，不止影响选中判定，也会影响最后预览的计算。

packages/dooringx-doc/src/docs/4.3.md

@@ -0,0 +1,7 @@
+---
+title:  组件动态注册的函数会一直保留
+sTitle: 常见问题
+order: 19
+---
+
+组件函数需要在组件卸载时调用卸载方法，否则一直存在。

packages/dooringx-doc/src/lib/Header/index.svelte

@@ -3,7 +3,7 @@
 	import { base } from '$app/paths';
 	import Button from '../Button/index.svelte';
 	import Switch from '../Switch/index.svelte';
-	import logo from './logo.svg';
+	import logo from './logo.png';
 	import { getContext } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	const lang = getContext<Writable<string>>('lang');
@@ -73,7 +73,6 @@
 		align-items: center;
 		margin-left: 20px;
 		img {
-			width: $height - 5px;
 			height: $height - 5px;
 		}
 	}

packages/dooringx-doc/src/routes/index.svelte

@@ -3,6 +3,8 @@
 </script>
 
 <script lang="ts">
+	import { base } from '$app/paths';
+	const docs = base + '/docs';
 </script>
 
 <svelte:head>
@@ -10,41 +12,93 @@
 </svelte:head>
 
 <section>
-	<h1>
-		<div class="welcome">
-			<picture>
-				<source srcset="svelte-welcome.webp" type="image/webp" />
-				<img src="svelte-welcome.png" alt="Welcome" />
-			</picture>
+		<div class="middle" style="background:#282c34">
+				<div class="title">
+					Dooringx-lib 文档
+				</div>
+				<div class="subtitle">
+					快速高效搭建可视化拖拽平台
+				</div>
+				<div class="btn" on:click={()=>location.href=docs}>
+					快速入门
+				</div>
 		</div>
-	</h1>
+		<div class="bottom">
+			<div class="card">
+				<div class="stitle">上手简单</div>
+				<div class="description">
+					无需编写拖拽、缩放、参考线等逻辑，只需要开发组件即可。
+				</div>
+			</div>
+			<div class="card">
+				<div class="stitle">独特的弹窗与事件机制</div>
+				<div class="description">
+					弹窗机制解决了很多编辑器无法配置弹窗的问题。独特的事件机制可以让组件间联动，使得组件无限可能。
+				</div>
+			</div>
+			<div class="card">
+				<div class="stitle">可定制化</div>
+				<div class="description">
+					编辑器完全拆分，提供了内置组件可供使用，如果觉得组件不能满足需求，也可以重写部分组件。
+				</div>
+			</div>
+		</div>
+		
 </section>
 
-<style>
+<style lang="scss">
 	section {
 		display: flex;
 		flex-direction: column;
+	}
+	.middle{
+		width: 100%;
+		height: 300px;
+		display: flex ;
 		justify-content: center;
 		align-items: center;
-		flex: 1;
+		flex-direction: column;
+	}
+	.title{
+		color:white;
+		font-size: 50px;
+		margin-bottom: 20px;
+	}
+	.subtitle{
+		color:white;
+		margin-bottom: 30px;
+		font-size: 20px;
+	}
+	.btn{
+		color:white;
+		padding:10px;
+		border:1px solid white;
+		&:hover{
+			cursor: pointer;
+		}
+	}
+	.bottom{
+		width: 100%;
+		height: 300px;
+		padding:0 100px;
+		box-sizing: border-box;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.card{
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		padding: 20px;
+	}
+	.stitle{
+		width: 100%;
+		font-size: 20px;
+		font-weight: bold;
+		margin-bottom: 20px;
 	}
 
-	h1 {
-		width: 100%;
-	}
-
-	.welcome {
-		position: relative;
-		width: 100%;
-		height: 0;
-		padding: 0 0 calc(100% * 495 / 2048) 0;
-	}
-
-	.welcome img {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		display: block;
-	}
 </style>