diff --git a/packages/amis-editor/examples/component/Doc.tsx b/packages/amis-editor/examples/component/Doc.tsx
new file mode 100644
index 000000000..03d6e59a6
--- /dev/null
+++ b/packages/amis-editor/examples/component/Doc.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
+import {darcula} from 'react-syntax-highlighter/dist/esm/styles/prism';
+import {getSchemaTpl, tipedLabel} from 'amis-editor-core';
+import 'amis';
+import '../../src/index';
+import PanelPreview from './PanelPreview';
+export interface DocProps {
+ children?: string | null | undefined;
+}
+
+export function mdComment(fun: Function) {
+ const txt = fun.toString();
+ debugger;
+ return txt;
+}
+
+function str2schema(code: string) {
+ const fn = new Function('getSchemaTpl', 'tipedLabel', `return [${code}]`);
+ return fn.call(null, getSchemaTpl, tipedLabel);
+}
+
+export default function Doc({children}: DocProps) {
+ return (
+
+
+
{props.children};
+ }
+
+ return {props.children};
+ },
+ code(props) {
+ const {children, className, node, ref, ...rest} = props;
+ const match = /language-(\w+)/.exec(className || '');
+
+ if (match?.[1] === 'schema') {
+ const schema = str2schema(children as string);
+
+ return (
+
+ );
+ }
+
+ return match ? (
+
+ ) : (
+
+ {children}
+
+ );
+ }
+ }}
+ />
+
+
+ );
+}
diff --git a/packages/amis-editor/examples/component/PanelPreview.tsx b/packages/amis-editor/examples/component/PanelPreview.tsx
new file mode 100644
index 000000000..981fc9c05
--- /dev/null
+++ b/packages/amis-editor/examples/component/PanelPreview.tsx
@@ -0,0 +1,60 @@
+import {JsonView, render} from 'amis';
+import cx from 'classnames';
+import React from 'react';
+export interface PanelPreviewProps {
+ schema: any;
+}
+
+export default function (props: PanelPreviewProps) {
+ const schema = React.useMemo(() => {
+ return {
+ type: 'form',
+ mode: 'normal',
+ wrapWithPanel: false,
+ className: cx('config-form-content', 'ae-Settings-content'),
+ wrapperComponent: 'div',
+ body: Array.isArray(props.schema) ? props.schema : [props.schema],
+ submitOnChange: true,
+ submitOnInit: true
+ };
+ }, [JSON.stringify(props.schema)]);
+ const [data, setData] = React.useState({});
+ const onFinished = React.useCallback((data: any) => {
+ setData(data);
+ return false;
+ }, []);
+ const onJsonEdit = React.useCallback((e: any) => {
+ setData(e.updated_src);
+ }, []);
+ const dom = React.useRef
(null);
+ // const popOverContainer = React.useCallback(() => {
+ // return dom.current;
+ // }, []);
+
+ return (
+
+
+ {render(
+ schema,
+ {
+ data: data,
+ onFinished: onFinished
+ // popOverContainer
+ },
+ {
+ // theme: 'cxd' // 右侧属性配置面板固定使用cxd主题展示
+ }
+ )}
+
+
+
now、+3days、-2weeks、+1hour、+2years 等（minute|min|hour|day|week|month|year|weekday|second|millisecond）这种相对值用法')
+})
+```
+
+## 选项类输入框默认值
+
+```schema
+getSchemaTpl('valueFormula', {
+ rendererSchema: (schema) => ({
+ ...schema,
+ type: 'select',
+ options: [
+ {
+ label: '选项1',
+ value: '1'
+ },
+ {
+ label: '选项2',
+ value: '2'
+ }
+ ]
+ }),
+ // 默认值组件设计有些问题，自动发起了请求，接口数据作为了默认值选项，接口形式应该是设置静态值或者FX
+ needDeleteProps: ['source'],
+ // 当数据源是自定义静态选项时，不额外配置默认值，在选项上直接勾选即可，放开会有个bug：当去掉勾选时，默认值配置组件不清空，只是schema清空了value
+ visibleOn: 'this.selectFirst !== true && this.source != null'
+})
+```
diff --git a/packages/amis-editor/examples/style.scss b/packages/amis-editor/examples/style.scss
index b684bb45f..9c45ea41a 100644
--- a/packages/amis-editor/examples/style.scss
+++ b/packages/amis-editor/examples/style.scss
@@ -286,3 +286,31 @@ $disabled-bg-color: #f7f7f9; // 禁用背景颜色
#root > .a-Select-popover {
z-index: 1500;
}
+
+.schema-tpl-preview {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+
+ > *:first-child {
+ flex: 1;
+ min-width: 0;
+ background-color: rgb(43, 43, 43);
+ }
+}
+
+.PanelPreview {
+ background-color: #fff;
+ padding: 0 20px 20px 20px;
+ position: relative;
+ width: 400px;
+ flex-shrink: 0;
+
+ > .editor-right-panel {
+ margin-bottom: 20px;
+ }
+
+ > .react-json-view {
+ font-size: 12px;
+ }
+}
diff --git a/packages/amis-editor/index.html b/packages/amis-editor/index.html
index 51d5a1274..c3f9e92eb 100644
--- a/packages/amis-editor/index.html
+++ b/packages/amis-editor/index.html
@@ -27,6 +27,7 @@
href="../../../node_modules/@fortawesome/fontawesome-free/css/v4-shims.css"
/>
+
diff --git a/packages/amis-editor/index.tsx b/packages/amis-editor/index.tsx
index b4cee5744..2a9df8dbb 100644
--- a/packages/amis-editor/index.tsx
+++ b/packages/amis-editor/index.tsx
@@ -2,11 +2,207 @@
* @file entry of this example.
* @author fex
*/
-import * as React from 'react';
+import React from 'react';
import {createRoot} from 'react-dom/client';
-import App from './examples/App';
+
+import {Layout, AsideNav, Spinner, NotFound} from 'amis-ui';
+import {eachTree, TreeArray, TreeItem} from 'amis-core';
+import {
+ HashRouter as Router,
+ Route,
+ Redirect,
+ Switch,
+ Link,
+ NavLink
+} from 'react-router-dom';
+import Doc from './examples/component/Doc';
+
+function MDComponent(fN: () => Promise<{default: {raw: string}}>) {
+ return React.lazy(() =>
+ fN().then(ret => ({default: () => }))
+ );
+}
+
+const pages: TreeArray = [
+ {
+ label: '面板模版',
+ children: [
+ {
+ label: '基础',
+ path: '/basic',
+ component: MDComponent(() => import('./examples/route/Basic.md'))
+ },
+
+ {
+ label: '公式',
+ path: '/formula',
+ component: MDComponent(() => import('./examples/route/Formula.md'))
+ }
+ ]
+ }
+];
+
+function getPath(path: string) {
+ return path ? (path[0] === '/' ? path : `/${path}`) : '';
+}
+
+function isActive(link: any, location: any) {
+ return !!(link.path && getPath(link.path) === location.pathname);
+}
+
+export function navigations2route(
+ navigations: any,
+ additionalProperties?: any
+) {
+ let routes: any = [];
+
+ navigations.forEach((root: any) => {
+ root.children &&
+ eachTree(root.children, (item: any) => {
+ if (item.path && item.component) {
+ routes.push(
+ additionalProperties ? (
+ (
+
+ )}
+ />
+ ) : (
+
+ )
+ );
+ }
+ });
+ });
+
+ return routes;
+}
+
+export function Main() {
+ function renderAside() {
+ return (
+ ({
+ ...item,
+ children: item.children
+ ? item.children.map((item: any) => ({
+ ...item,
+ className: 'is-top'
+ }))
+ : []
+ }))}
+ renderLink={({
+ link,
+ active,
+ toggleExpand,
+ classnames: cx,
+ depth
+ }: any) => {
+ let children: any[] = [];
+
+ if (link.children && link.children.length) {
+ children.push(
+ toggleExpand(link, e)}
+ >
+ );
+ }
+
+ link.badge &&
+ children.push(
+
+ {link.badge}
+
+ );
+
+ if (link.icon) {
+ children.push(
+
+ );
+ }
+
+ children.push(
+
+ {link.label}
+
+ );
+
+ return link.path ? (
+ /^https?\:/.test(link.path) ? (
+
+ {children}
+
+ ) : (
+
+ {children}
+
+ )
+ ) : (
+ toggleExpand(link) : undefined}>
+ {children}
+
+ );
+ }}
+ isActive={(link: any) => isActive(link, location)}
+ />
+ );
+ }
+
+ return (
+
+ }
+ >
+
+ import('./examples/App'))}
+ exact
+ path="/"
+ />
+
+ }
+ aside={renderAside()}
+ >
+