replace doc
This commit is contained in:
hufeixiong
16
.editorconfig
Normal file
16
.editorconfig
Normal file
@@ -0,0 +1,16 @@
|
||||
# http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[Makefile]
|
||||
indent_style = tab
|
||||
10
.gitattributes
vendored
Normal file
10
.gitattributes
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
|
||||
|
||||
*.ts text eol=lf merge=union
|
||||
*.tsx text eol=lf merge=union
|
||||
*.rs text eol=lf merge=union
|
||||
*.js text eol=lf merge=union
|
||||
*.json text eol=lf merge=union
|
||||
*.debug text eol=lf merge=union
|
||||
2
.github/workflows/main.yml
vendored
2
.github/workflows/main.yml
vendored
@@ -17,4 +17,4 @@ jobs:
|
||||
with:
|
||||
GITHUB_TOKEN: ${{secrets.ACCESS_TOKEN}}
|
||||
BRANCH: gh-pages # The branch the action should deploy to.
|
||||
FOLDER: packages/dooringx-doc/build # The folder the action should deploy.
|
||||
FOLDER: packages/dooringx-dumi-doc/docs-dist # The folder the action should deploy.
|
||||
|
||||
9
.gitignore
vendored
9
.gitignore
vendored
@@ -14,3 +14,12 @@ dist
|
||||
.umi-production
|
||||
.umi-test
|
||||
.env.local
|
||||
# production
|
||||
docs-dist
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
|
||||
# ide
|
||||
.vscode
|
||||
.idea
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
## changelog
|
||||
|
||||
## 0.10.2
|
||||
|
||||
|
||||
@@ -6,9 +6,9 @@
|
||||
"scripts": {
|
||||
"start": "lerna exec npm run start --scope=dooringx-lib",
|
||||
"start:example":"lerna exec npm run start --scope=dooringx-example",
|
||||
"start:doc":"lerna exec npm run start --scope=dooringx-doc",
|
||||
"start:doc":"lerna exec npm run start --scope=dooringx-dumi-doc",
|
||||
"build": "lerna exec npm run build --scope=dooringx-lib",
|
||||
"deploy": "lerna exec npm run deploy --scope=dooringx-doc",
|
||||
"deploy": "lerna exec npm run docs:build --scope=dooringx-dumi-doc",
|
||||
"pub": "node ./script/publish.js",
|
||||
"changelog": "node ./script/changelog.js"
|
||||
},
|
||||
@@ -30,7 +30,7 @@
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,tsx,ts,less,md,json}": [
|
||||
"npx prettier --write ./packages/dooringx-doc/src ./packages/dooringx-lib/src",
|
||||
"npx prettier --write ./packages/dooringx-dumi-doc/docs ./packages/dooringx-lib/src",
|
||||
"git add ."
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
# dooringx-lib文档
|
||||
|
||||
用svelte制作。
|
||||
@@ -1,40 +0,0 @@
|
||||
{
|
||||
"name": "dooringx-doc",
|
||||
"version": "0.0.1",
|
||||
"private":true,
|
||||
"scripts": {
|
||||
"start": "svelte-kit dev",
|
||||
"dev": "svelte-kit dev",
|
||||
"build": "svelte-kit build",
|
||||
"deploy": "cross-env DEPLOY=TRUE svelte-kit build",
|
||||
"preview": "svelte-kit preview",
|
||||
"check": "svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --check --plugin-search-dir=. .",
|
||||
"format": "prettier --write --plugin-search-dir=. ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/kit": "next",
|
||||
"@types/cookie": "^0.4.0",
|
||||
"@types/marked": "^2.0.3",
|
||||
"prettier": "~2.2.1",
|
||||
"prettier-plugin-svelte": "^2.2.0",
|
||||
"svelte": "^3.34.0",
|
||||
"svelte-check": "^2.0.0",
|
||||
"svelte-preprocess": "^4.0.0",
|
||||
"@sveltejs/adapter-node": "^1.0.0-next.29",
|
||||
"@sveltejs/adapter-static": "^1.0.0-next.13"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@fontsource/fira-mono": "^4.2.2",
|
||||
"@lukeed/uuid": "^2.0.0",
|
||||
"cookie": "^0.4.1",
|
||||
"cross-env": "^7.0.3",
|
||||
"marked": "^2.1.3",
|
||||
"prism-svelte": "^0.4.7",
|
||||
"prismjs": "^1.24.0",
|
||||
"sass": "^1.35.1",
|
||||
"slug": "^5.1.0"
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
---
|
||||
title: 待定
|
||||
sTitle: API
|
||||
order: 1
|
||||
---
|
||||
|
||||
## 待定
|
||||
|
||||
|
||||
@@ -1,351 +0,0 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
/* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type='button']::-moz-focus-inner,
|
||||
[type='reset']::-moz-focus-inner,
|
||||
[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type='button']:-moz-focusring,
|
||||
[type='reset']:-moz-focusring,
|
||||
[type='submit']:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type='checkbox'],
|
||||
[type='radio'] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type='number']::-webkit-inner-spin-button,
|
||||
[type='number']::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type='search'] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type='search']::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
<!--
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-06-29 11:14:15
|
||||
* @LastEditors: yehuozhili
|
||||
* @LastEditTime: 2021-07-10 20:30:13
|
||||
* @FilePath: \dooringx\packages\dooringx-doc\src\app.html
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
%svelte.head%
|
||||
</head>
|
||||
<body>
|
||||
<div id="svelte">%svelte.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,9 +0,0 @@
|
||||
---
|
||||
title: dooringx-lib 是什么？
|
||||
sTitle: 介绍
|
||||
order: 1
|
||||
---
|
||||
|
||||
dooringx-lib 是 dooringx 的基座，是移除了 dooringx 插件的可视化拖拽框架。
|
||||
|
||||
dooringx-lib 提供自己的一套数据流事件机制以及弹窗等解决方案，可以让你更快地自己定制开发可视化拖拽平台。
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
title: dooringx-lib 如何工作？
|
||||
sTitle: 介绍
|
||||
order: 2
|
||||
---
|
||||
|
||||
dooringx-lib 在运行时维护一套数据流，主要分为json数据部分，左侧组件部分，右侧配置项部分，快捷键部分，弹窗部分，事件与函数部分，数据源部分。
|
||||
|
||||
其除了提供基础的拖拽、移动、缩放、全选、旋转等功能外，还可以使用暴露的组件。如果觉得组件不够定制化，可以调整样式或者自己重新写。
|
||||
|
||||
|
||||
@@ -1,264 +0,0 @@
|
||||
---
|
||||
title: 快速上手
|
||||
sTitle: 介绍
|
||||
order: 3
|
||||
---
|
||||
|
||||
### 安装
|
||||
|
||||
使用 npm 或者 yarn 安装
|
||||
|
||||
```bash
|
||||
npm i dooringx-lib
|
||||
```
|
||||
|
||||
dooringx-lib在编辑时提供两种容器，可以根据需要选择使用。
|
||||
|
||||
一种是普通容器，一种是iframe容器，这2种容器在某些实现上略有不同。
|
||||
|
||||
使用普通容器即在编辑时为普通的div并非iframe，而使用iframe则编辑时看见的为iframe内容。在预览时，使用preview组件，preview可以放到任何容器，包括去使用iframe查看。
|
||||
|
||||
建议预览时使用iframe查看preview，如果有弹窗，在非iframe或pc中会显示异常。
|
||||
|
||||
iframe容器由于使用postmessage通信，所以在操作上可能会有略微延迟。如果对样式隔离要求不高可以使用普通容器，预览的样式正常即可。
|
||||
|
||||
普通容器使用参考demo:
|
||||
|
||||
```js
|
||||
import {
|
||||
RightConfig,
|
||||
Container,
|
||||
useStoreState,
|
||||
innerContainerDragUp,
|
||||
LeftConfig,
|
||||
ContainerWrapper,
|
||||
Control,
|
||||
} from 'dooringx-lib';
|
||||
import { useContext } from 'react';
|
||||
import { configContext } from '@/layouts';
|
||||
import { useCallback } from 'react';
|
||||
import { PREVIEWSTATE } from '@/constant';
|
||||
|
||||
export const HeaderHeight = '40px';
|
||||
|
||||
export default function IndexPage() {
|
||||
const config = useContext(configContext);
|
||||
|
||||
const everyFn = () => {};
|
||||
|
||||
const subscribeFn = useCallback(() => {
|
||||
localStorage.setItem(PREVIEWSTATE, JSON.stringify(config.getStore().getData()));
|
||||
}, [config]);
|
||||
|
||||
const [state] = useStoreState(config, subscribeFn, everyFn);
|
||||
|
||||
return (
|
||||
<div {...innerContainerDragUp(config)}>
|
||||
<div style={{ height: HeaderHeight }}>
|
||||
head
|
||||
<button
|
||||
onClick={() => {
|
||||
window.open('/iframe');
|
||||
}}
|
||||
>
|
||||
go preview
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
window.open('/preview');
|
||||
}}
|
||||
>
|
||||
go preview
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: `calc(100vh - ${HeaderHeight})`,
|
||||
width: '100vw',
|
||||
}}
|
||||
>
|
||||
<div style={{ height: '100%' }}>
|
||||
<LeftConfig config={config}></LeftConfig>
|
||||
</div>
|
||||
|
||||
<ContainerWrapper config={config}>
|
||||
<>
|
||||
<Control
|
||||
config={config}
|
||||
style={{ position: 'fixed', bottom: '60px', right: '450px', zIndex: 100 }}
|
||||
></Control>
|
||||
<Container state={state} config={config} context="edit"></Container>
|
||||
</>
|
||||
</ContainerWrapper>
|
||||
<div className="rightrender" style={{ height: '100%' }}>
|
||||
<RightConfig state={state} config={config}></RightConfig>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
iframe容器使用参考demo：
|
||||
|
||||
|
||||
index.tsx
|
||||
```js
|
||||
import {
|
||||
RightConfig,
|
||||
useStoreState,
|
||||
innerContainerDragUp,
|
||||
LeftConfig,
|
||||
IframeContainerWrapper,
|
||||
Control,
|
||||
useIframeHook,
|
||||
IframeTarget,
|
||||
} from 'dooringx-lib';
|
||||
import { useContext } from 'react';
|
||||
import { configContext } from '@/layouts';
|
||||
import { useCallback } from 'react';
|
||||
import { PREVIEWSTATE } from '@/constant';
|
||||
|
||||
export const HeaderHeight = '40px';
|
||||
|
||||
export default function IndexPage() {
|
||||
const config = useContext(configContext);
|
||||
|
||||
const subscribeFn = useCallback(() => {
|
||||
localStorage.setItem(PREVIEWSTATE, JSON.stringify(config.getStore().getData()));
|
||||
}, [config]);
|
||||
|
||||
const [state] = useStoreState(config, subscribeFn);
|
||||
useIframeHook(`${location.origin}/container`, config);
|
||||
|
||||
return (
|
||||
<div {...innerContainerDragUp(config, true)}>
|
||||
<div style={{ height: HeaderHeight }}>
|
||||
head
|
||||
<button
|
||||
onClick={() => {
|
||||
window.open('/iframe');
|
||||
}}
|
||||
>
|
||||
go preview
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
window.open('/preview');
|
||||
}}
|
||||
>
|
||||
go preview
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: `calc(100vh - ${HeaderHeight})`,
|
||||
width: '100vw',
|
||||
}}
|
||||
>
|
||||
<div style={{ height: '100%' }}>
|
||||
<LeftConfig config={config}></LeftConfig>
|
||||
</div>
|
||||
|
||||
<IframeContainerWrapper
|
||||
config={config}
|
||||
extra={
|
||||
<Control
|
||||
config={config}
|
||||
style={{ position: 'fixed', bottom: '60px', right: '450px', zIndex: 100 }}
|
||||
></Control>
|
||||
}
|
||||
>
|
||||
<IframeTarget
|
||||
config={config}
|
||||
iframeProps={{
|
||||
src: '/container',
|
||||
}}
|
||||
></IframeTarget>
|
||||
</IframeContainerWrapper>
|
||||
<div className="rightrender" style={{ height: '100%' }}>
|
||||
<RightConfig state={state} config={config}></RightConfig>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
container 路由：
|
||||
|
||||
```js
|
||||
import { configContext } from '@/layouts';
|
||||
import { useContext } from 'react';
|
||||
import { IframeContainer } from 'dooringx-lib';
|
||||
|
||||
function ContainerPage() {
|
||||
const config = useContext(configContext);
|
||||
return (
|
||||
<div>
|
||||
<IframeContainer config={config} context="edit"></IframeContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ContainerPage;
|
||||
```
|
||||
|
||||
|
||||
|
||||
预览时preview套iframe:
|
||||
|
||||
```html
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<iframe style={{ width: '375px', height: '667px' }} src="/preview"></iframe>
|
||||
</div>
|
||||
```
|
||||
preview路由：
|
||||
|
||||
```js
|
||||
import { PREVIEWSTATE } from '@/constant';
|
||||
import { Preview, UserConfig } from 'dooringx-lib';
|
||||
import plugin from '../../plugin';
|
||||
|
||||
const config = new UserConfig(plugin);
|
||||
|
||||
function PreviewPage() {
|
||||
const data = localStorage.getItem(PREVIEWSTATE);
|
||||
if (data) {
|
||||
try {
|
||||
const json = JSON.parse(data);
|
||||
config.resetData([json]);
|
||||
} catch {
|
||||
console.log('err');
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Preview config={config}></Preview>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PreviewPage;
|
||||
```
|
||||
|
||||
有关 api 部分请参考 api
|
||||
@@ -1,19 +0,0 @@
|
||||
---
|
||||
title: store
|
||||
sTitle: dooringx-lib基础
|
||||
order: 4
|
||||
---
|
||||
|
||||
store 类似于 redux 的概念，它内部实现了 redo、undo、发布订阅、置换数据、强制刷新等功能。
|
||||
|
||||
store 可以在 config 中获取。
|
||||
|
||||
在最开始时，需要通过 useStoreState 与 react 结合，此时可以在任意位置使用 store.forceUpdate 强刷，也可以使用 state 获取 store 中的数据。
|
||||
|
||||
store 的最重要功能是保存着每次修改 json 队列。
|
||||
|
||||
如果你需要更新数据，在深拷贝后使用 setData 方法进行更新。
|
||||
|
||||
如果你需要更新时不记录在 redo 或 undo 上留下记录，那么请操作队列删除其中保存内容即可。
|
||||
|
||||
对于改变数据后想即使看见视图更新，那么使用forceUpdate即可。
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
title: 事件
|
||||
sTitle: dooringx-lib基础
|
||||
order: 5
|
||||
---
|
||||
|
||||
dooringx-lib 的事件是在eventCenter上，它上面会集成functionCenter与一个事件链。
|
||||
|
||||
在eventCenter中可以获取组件注册的时机。时机类似于组件生命周期一样，可以注册后在对应的时机进行调用。
|
||||
|
||||
而functionCenter中的函数则会与时机结合，再由事件链对用户设定的队列进行统一处理。
|
||||
|
||||
每个事件链在执行中会有上下文对象，这个对象会贯穿这个事件链。
|
||||
@@ -1,12 +0,0 @@
|
||||
---
|
||||
title: 命令
|
||||
sTitle: dooringx-lib基础
|
||||
order: 6
|
||||
---
|
||||
|
||||
dooringx-lib 的命令是由commander进行管理。
|
||||
|
||||
内部默认提供redo与undo的命令，您可以通过插件方式增加commander。
|
||||
|
||||
commander内部集成了快捷键配置，使用键盘事件的key进行注册，如果ctrl、alt、meta键，可加对应的加号进行组合键注册，内部忽略大小写（注意！不是忽略注册的键名大小写，而是A和a的key处理时等价）。
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
---
|
||||
title: 弹窗
|
||||
sTitle: dooringx-lib基础
|
||||
order: 7
|
||||
---
|
||||
|
||||
dooringx-lib内置弹窗系统，弹窗系统是通过storeChanger进行转换而成。
|
||||
|
||||
所以在某些情景制作时，可能需要考虑是否在弹窗编辑下的情况。
|
||||
|
||||
每个弹窗是只保存block中的数据，而事件等数据只会存在主数据内。
|
||||
|
||||
在弹窗保存后，弹窗数据会被置换于主数据内存着，需要编辑时重新置换出来。
|
||||
|
||||
可以使用storeChanger上的方法进行判断，或者直接获取数据源数据等，具体见API。
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
title: 数据源
|
||||
sTitle: dooringx-lib基础
|
||||
order: 8
|
||||
---
|
||||
|
||||
dooringx-lib 的数据源和前面说的store中存储的不是一个东西。
|
||||
|
||||
它位于dataCenter中。设计数据源的初衷是为了让不懂代码的人更好理解。
|
||||
|
||||
事件的运行完全可以脱离数据源运行，只要使用者知道如何去填写参数。
|
||||
|
||||
所以在事件配置时，可以多个选项在数据源中去获得数据转变为参数。
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: 插件导入
|
||||
sTitle: dooringx-lib插件开发
|
||||
order: 9
|
||||
---
|
||||
|
||||
dooringx-lib的插件需要一个类型为`Partial<InitConfig>`的对象。
|
||||
|
||||
对于多个插件，需要使用dooringx-lib导出的`userConfigMerge`来进行合并。
|
||||
|
||||
userConfigMerge不是所有属性都会合并，部分属性会进行覆盖。
|
||||
|
||||
```
|
||||
* 部分无法合并属性如果b传了会以b为准
|
||||
* initstore不合并
|
||||
* leftallregistmap合并
|
||||
* leftRenderListCategory合并
|
||||
* rightRenderListCategory合并
|
||||
* rightGlobalCustom 不合并
|
||||
* initComponentCache合并
|
||||
* initFunctionMap合并
|
||||
* initDataCenterMap合并
|
||||
* initCommandModule合并
|
||||
* initFormComponents合并
|
||||
```
|
||||
|
||||
config支持部分配置异步导入，比如左侧分类等，这个是实验性功能，所以不推荐这么做。
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
title: 左侧面板
|
||||
sTitle: dooringx-lib插件开发
|
||||
order: 10
|
||||
---
|
||||
|
||||
左侧面板传入leftRenderListCategory即可。
|
||||
|
||||
```js
|
||||
leftRenderListCategory: [
|
||||
{
|
||||
type: 'basic',
|
||||
icon: <HighlightOutlined />,
|
||||
displayName: '基础组件',
|
||||
},
|
||||
{
|
||||
type: 'xxc',
|
||||
icon: <ContainerOutlined />,
|
||||
custom: true,
|
||||
customRender: <div>我是自定义渲染</div>,
|
||||
},
|
||||
],
|
||||
```
|
||||
|
||||
type是分类，左侧组件显示在哪个分类由该字段决定。
|
||||
|
||||
icon则是左侧分类小图标。
|
||||
|
||||
当custom为true时，可以使用customRender自定义渲染。
|
||||
@@ -1,166 +0,0 @@
|
||||
---
|
||||
title: 左侧组件
|
||||
sTitle: dooringx-lib插件开发
|
||||
order: 11
|
||||
---
|
||||
|
||||
## 插件导入
|
||||
|
||||
左侧组件要至于对象的LeftRegistMap中。
|
||||
|
||||
左侧组件支持同步导入或者异步导入。
|
||||
|
||||
```js
|
||||
const LeftRegistMap: LeftRegistComponentMapItem[] = [
|
||||
{
|
||||
type: 'basic',
|
||||
component: 'button',
|
||||
img: 'icon-anniu',
|
||||
displayName: '按钮',
|
||||
urlFn: () => import('./registComponents/button'),
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
如果需要异步导入组件，则需要填写urlFn，需要一个返回promise的函数。也可以支持远程载入组件，只要webpack配上就行了。
|
||||
|
||||
如果需要同步导入组件，则需要将组件放入配置项的initComponentCache中，这样在载入时便会注册进componentRegister里。
|
||||
|
||||
```js
|
||||
initComponentCache: {
|
||||
modalMask: { component: MmodalMask },
|
||||
},
|
||||
```
|
||||
|
||||
## 组件编写
|
||||
|
||||
组件需要导出一个由ComponentItemFactory生成的对象。
|
||||
|
||||
```js
|
||||
const MButton = new ComponentItemFactory(
|
||||
'button',
|
||||
'按钮',
|
||||
{
|
||||
style: [
|
||||
createPannelOptions<FormMap, 'input'>('input', {
|
||||
receive: 'text',
|
||||
label: '文字',
|
||||
}),
|
||||
],
|
||||
animate: [createPannelOptions<FormMap, 'animateControl'>('animateControl', {})],
|
||||
actions: [createPannelOptions<FormMap, 'actionButton'>('actionButton', {})],
|
||||
},
|
||||
{
|
||||
props: {
|
||||
...
|
||||
text:'yehuozhili'// input配置项组件接收的初始值
|
||||
},
|
||||
},
|
||||
(data, context, store, config) => {
|
||||
return <ButtonTemp data={data} store={store} context={context} config={config}></ButtonTemp>;
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
export default MButton;
|
||||
|
||||
```
|
||||
|
||||
其中第一个参数为组件注册名，第二个参数用来展示使用。
|
||||
|
||||
|
||||
第三个参数用来配置右侧面板的配置项组件。其中键为右侧面板的分类，值为配置项组件数组。
|
||||
|
||||
第四个参数会配置组件的初始值，特别注意的是，制作组件必须要有初始宽度高度（非由内容撑开），否则会在适配时全选时产生问题。
|
||||
|
||||
这个初始值里有很多有用的属性，比如fixed代表使用固定定位，可以结合配置项更改该值，使得组件可以fixed定位。
|
||||
|
||||
还有canDrag类似于锁定命令，锁定的元素不可拖拽。
|
||||
|
||||
初始值里的rotate需要个对象，value代表旋转角度，canRotate 代表是否可以操作旋转。（0.7.0版本开始支持）
|
||||
|
||||
第五个参数是个函数，你将获得配置项中的receive属性（暂且都默认该配置为receive）传来的配置，比如上例中receive的是text，则该函数中data里会收到该字段。
|
||||
|
||||
context一般只有preview和edit，用来进行环境判断。
|
||||
|
||||
config可以拿到所有数据，用来制作事件时使用。
|
||||
|
||||
第六个参数resize 是为了判断是否能进行缩放，当为false时，无法进行缩放。
|
||||
|
||||
第七个参数needPosition，某些组件移入画布后会默认采取拖拽的落点，该配置项默认为true,就是需要拖拽的位置，为false时将使用组件自身top和left定位来放置。
|
||||
|
||||
|
||||
|
||||
## 事件注册
|
||||
|
||||
### 时机注册
|
||||
|
||||
前面说了事件有时机和函数，所以组件内可以使用hook注册时机：
|
||||
|
||||
```js
|
||||
useDynamicAddEventCenter(pr, `${pr.data.id}-init`, '初始渲染时机'); //注册名必须带id 约定！
|
||||
useDynamicAddEventCenter(pr, `${pr.data.id}-click`, '点击执行时机');
|
||||
```
|
||||
|
||||
useDynamicAddEventCenter第一个参数是render的四个参数组成的对象。第二个参数是注册的时机名，必须跟id相关，这是约定，否则多个组件可能会导致名称冲突，并且方便查找该时机。
|
||||
|
||||
注册完时机后，你需要将时机放入对应的触发位置上，比如这个button的点击执行时机就放到onclick中：
|
||||
|
||||
```js
|
||||
<Button
|
||||
onClick={() => {
|
||||
eventCenter.runEventQueue(`${pr.data.id}-click`, pr.config);
|
||||
}}
|
||||
>
|
||||
yehuozhili
|
||||
</Button>
|
||||
```
|
||||
|
||||
其中第一个参数则为注册的时机名，第二个为render函数中最后个参数config
|
||||
|
||||
|
||||
### 函数注册
|
||||
|
||||
函数由组件抛出，可以加载到事件链上。比如，注册个改变文本函数，那么我可以在任意组件的时机中去调用该函数，从而触发该组件改变文本。
|
||||
|
||||
函数注册需要放入useEffect中，在组件卸载时需要卸载函数！否则会导致函数越来越多。
|
||||
|
||||
注意id要带上组件id，因为一个组件可以拖出n个组件生成n个函数。
|
||||
|
||||
```js
|
||||
useEffect(() => {
|
||||
const functionCenter = eventCenter.getFunctionCenter();
|
||||
const unregist = functionCenter.register(
|
||||
`${pr.data.id}+改变文本函数`,
|
||||
async (ctx, next, config, args, _eventList, iname) => {
|
||||
const userSelect = iname.data;
|
||||
const ctxVal = changeUserValue(
|
||||
userSelect['改变文本数据源'],
|
||||
args,
|
||||
'_changeval',
|
||||
config,
|
||||
ctx
|
||||
);
|
||||
const text = ctxVal[0];
|
||||
setText(text);
|
||||
next();
|
||||
},
|
||||
[
|
||||
{
|
||||
name: '改变文本数据源',
|
||||
data: ['ctx', 'input', 'dataSource'],
|
||||
options: {
|
||||
receive: '_changeval',
|
||||
multi: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
`${pr.data.id}+改变文本函数`
|
||||
);
|
||||
return () => {
|
||||
unregist();
|
||||
};
|
||||
}, []);
|
||||
```
|
||||
|
||||
函数中参数与配置见后面函数开发。
|
||||
@@ -1,22 +0,0 @@
|
||||
---
|
||||
title: 右侧面板
|
||||
sTitle: dooringx-lib插件开发
|
||||
order: 12
|
||||
---
|
||||
|
||||
右侧面板的配置和左侧面板一样：
|
||||
|
||||
```js
|
||||
export interface RightMapRenderListPropsItemCategory {
|
||||
type: string;
|
||||
icon: ReactNode;
|
||||
custom?: boolean;
|
||||
customRender?: (type: string, current: IBlockType) => ReactNode;
|
||||
}
|
||||
```
|
||||
|
||||
type会影响左侧组件在开发时第三个参数的键名。那个键名中即代表该右侧中展示的type。
|
||||
|
||||
icon则是可以放文字或者图标用来进行面板切换的。
|
||||
|
||||
如果custom为true，该面板下的显示可以通过customRender自定义。
|
||||
@@ -1,101 +0,0 @@
|
||||
---
|
||||
title: 右侧组件
|
||||
sTitle: dooringx-lib插件开发
|
||||
order: 13
|
||||
---
|
||||
|
||||
## 右侧组件导入
|
||||
|
||||
导入时,只要将开发的组件配成一个对象放入initFormComponents即可。
|
||||
|
||||
```js
|
||||
initFormComponents: Formmodules,
|
||||
```
|
||||
|
||||
## 右侧组件开发
|
||||
|
||||
首先为了良好的开发体验，需要定义个formMap类型：
|
||||
|
||||
```js
|
||||
export interface FormBaseType {
|
||||
receive?: string;
|
||||
}
|
||||
export interface FormInputType extends FormBaseType {
|
||||
label: string;
|
||||
}
|
||||
export interface FormActionButtonType {}
|
||||
export interface FormAnimateControlType {}
|
||||
export interface FormMap {
|
||||
input: FormInputType;
|
||||
actionButton: FormActionButtonType;
|
||||
animateControl: FormAnimateControlType;
|
||||
}
|
||||
```
|
||||
formMap的键名就是initFormComponents键名，formMap的值对应组件需要收到的值。
|
||||
|
||||
以input组件为例，FormInputType此时有2个属性，label,receive。
|
||||
|
||||
那么在其开发该组件时，props会收到：
|
||||
|
||||
```js
|
||||
interface MInputProps {
|
||||
data: CreateOptionsRes<FormMap, 'input'>;
|
||||
current: IBlockType;
|
||||
config: UserConfig;
|
||||
}
|
||||
```
|
||||
也就是其中data是formMap类型，而current是当前点击的组件，config就不用说了。
|
||||
|
||||
还记得在左侧组件开发中的第三个参数吗？这样就都关联起来了：
|
||||
|
||||
```js
|
||||
|
||||
style: [
|
||||
createPannelOptions<FormMap, 'input'>('input', {
|
||||
receive: 'text',
|
||||
label: '文字',
|
||||
}),
|
||||
],
|
||||
|
||||
```
|
||||
createPannelOptions 这个函数的泛型里填入对应的组件，将会给收到的配置项良好的提示。
|
||||
|
||||
在配置项组件里所要做的就是接收组件传来的配置项，然后去修改current的属性：
|
||||
|
||||
|
||||
```js
|
||||
function MInput(props: MInputProps) {
|
||||
const option = useMemo(() => {
|
||||
return props.data?.option || {};
|
||||
}, [props.data]);
|
||||
return (
|
||||
<Row style={{ padding: '10px 20px' }}>
|
||||
<Col span={6} style={{ lineHeight: '30px' }}>
|
||||
{(option as any)?.label || '文字'}：
|
||||
</Col>
|
||||
<Col span={18}>
|
||||
<Input
|
||||
value={props.current.props[(option as any).receive] || ''}
|
||||
onChange={(e) => {
|
||||
const receive = (option as any).receive;
|
||||
const clonedata = deepCopy(store.getData());
|
||||
const newblock = clonedata.block.map((v: IBlockType) => {
|
||||
if (v.id === props.current.id) {
|
||||
v.props[receive] = e.target.value;
|
||||
}
|
||||
return v;
|
||||
});
|
||||
store.setData({ ...clonedata, block: [...newblock] });
|
||||
}}
|
||||
></Input>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
由于可以很轻松的拿到store，所以可以在任意地方进行修改数据。
|
||||
|
||||
将组件的value关联current的属性，onChange去修改store，这样就完成了个双向绑定。
|
||||
|
||||
注意：如果你的右侧组件需要用到block以外的属性，可能需要去判断是否处于弹窗模式。
|
||||
@@ -1,209 +0,0 @@
|
||||
---
|
||||
title: 命令开发
|
||||
sTitle: dooringx-lib插件开发
|
||||
order: 14
|
||||
---
|
||||
|
||||
## 命令的导入
|
||||
|
||||
命令对象导入到插件的initCommandModule里即可
|
||||
|
||||
```js
|
||||
initCommandModule: commandModules,
|
||||
```
|
||||
|
||||
## 命令的开发
|
||||
|
||||
命令需要导出一个CommanderItemFactory生成的对象。
|
||||
|
||||
```js
|
||||
import { CommanderItemFactory } from 'dooringx-lib';
|
||||
const undo = new CommanderItemFactory(
|
||||
'redo',
|
||||
'Control+Shift+z',
|
||||
(store) => {
|
||||
store.redo();
|
||||
},
|
||||
'重做'
|
||||
);
|
||||
|
||||
export default undo;
|
||||
```
|
||||
|
||||
第一个参数是注册名。
|
||||
第二个参数是快捷键名，快捷键映射是键盘事件key值：
|
||||
|
||||
```js
|
||||
Cancel: 3,
|
||||
Help: 6,
|
||||
Backspace: 8,
|
||||
Tab: 9,
|
||||
Clear: 12,
|
||||
Enter: 13,
|
||||
Shift: 16,
|
||||
Control: 17,
|
||||
Alt: 18,
|
||||
Pause: 19,
|
||||
CapsLock: 20,
|
||||
Escape: 27,
|
||||
Convert: 28,
|
||||
NonConvert: 29,
|
||||
Accept: 30,
|
||||
ModeChange: 31,
|
||||
' ': 32,
|
||||
PageUp: 33,
|
||||
PageDown: 34,
|
||||
End: 35,
|
||||
Home: 36,
|
||||
ArrowLeft: 37,
|
||||
ArrowUp: 38,
|
||||
ArrowRight: 39,
|
||||
ArrowDown: 40,
|
||||
Select: 41,
|
||||
Print: 42,
|
||||
Execute: 43,
|
||||
PrintScreen: 44,
|
||||
Insert: 45,
|
||||
Delete: 46,
|
||||
0: 48,
|
||||
')': 48,
|
||||
1: 49,
|
||||
'!': 49,
|
||||
2: 50,
|
||||
'@': 50,
|
||||
3: 51,
|
||||
'#': 51,
|
||||
4: 52,
|
||||
$: 52,
|
||||
5: 53,
|
||||
'%': 53,
|
||||
6: 54,
|
||||
'^': 54,
|
||||
7: 55,
|
||||
'&': 55,
|
||||
8: 56,
|
||||
'*': 56,
|
||||
9: 57,
|
||||
'(': 57,
|
||||
a: 65,
|
||||
A: 65,
|
||||
b: 66,
|
||||
B: 66,
|
||||
c: 67,
|
||||
C: 67,
|
||||
d: 68,
|
||||
D: 68,
|
||||
e: 69,
|
||||
E: 69,
|
||||
f: 70,
|
||||
F: 70,
|
||||
g: 71,
|
||||
G: 71,
|
||||
h: 72,
|
||||
H: 72,
|
||||
i: 73,
|
||||
I: 73,
|
||||
j: 74,
|
||||
J: 74,
|
||||
k: 75,
|
||||
K: 75,
|
||||
l: 76,
|
||||
L: 76,
|
||||
m: 77,
|
||||
M: 77,
|
||||
n: 78,
|
||||
N: 78,
|
||||
o: 79,
|
||||
O: 79,
|
||||
p: 80,
|
||||
P: 80,
|
||||
q: 81,
|
||||
Q: 81,
|
||||
r: 82,
|
||||
R: 82,
|
||||
s: 83,
|
||||
S: 83,
|
||||
t: 84,
|
||||
T: 84,
|
||||
u: 85,
|
||||
U: 85,
|
||||
v: 86,
|
||||
V: 86,
|
||||
w: 87,
|
||||
W: 87,
|
||||
x: 88,
|
||||
X: 88,
|
||||
y: 89,
|
||||
Y: 89,
|
||||
z: 90,
|
||||
Z: 90,
|
||||
OS: 91,
|
||||
ContextMenu: 93,
|
||||
F1: 112,
|
||||
F2: 113,
|
||||
F3: 114,
|
||||
F4: 115,
|
||||
F5: 116,
|
||||
F6: 117,
|
||||
F7: 118,
|
||||
F8: 119,
|
||||
F9: 120,
|
||||
F10: 121,
|
||||
F11: 122,
|
||||
F12: 123,
|
||||
F13: 124,
|
||||
F14: 125,
|
||||
F15: 126,
|
||||
F16: 127,
|
||||
F17: 128,
|
||||
F18: 129,
|
||||
F19: 130,
|
||||
F20: 131,
|
||||
F21: 132,
|
||||
F22: 133,
|
||||
F23: 134,
|
||||
F24: 135,
|
||||
NumLock: 144,
|
||||
ScrollLock: 145,
|
||||
VolumeMute: 181,
|
||||
VolumeDown: 182,
|
||||
VolumeUp: 183,
|
||||
';': 186,
|
||||
':': 186,
|
||||
'=': 187,
|
||||
'+': 187,
|
||||
',': 188,
|
||||
'<': 188,
|
||||
'-': 189,
|
||||
_: 189,
|
||||
'.': 190,
|
||||
'>': 190,
|
||||
'/': 191,
|
||||
'?': 191,
|
||||
'`': 192,
|
||||
'~': 192,
|
||||
'[': 219,
|
||||
'{': 219,
|
||||
'\\': 220,
|
||||
'|': 220,
|
||||
']': 221,
|
||||
'}': 221,
|
||||
"'": 222,
|
||||
'"': 222,
|
||||
Meta: 224,
|
||||
AltGraph: 225,
|
||||
Attn: 246,
|
||||
CrSel: 247,
|
||||
ExSel: 248,
|
||||
EraseEof: 249,
|
||||
Play: 250,
|
||||
ZoomOut: 251,
|
||||
```
|
||||
|
||||
26个英文字母是忽略大小写的，一个命令目前只能注册一个快捷键。不需要注册快捷键则填空字符串即可。
|
||||
|
||||
metakey与Controlkey相同，写Control即可。
|
||||
|
||||
目前第三个参数只能获得store，后续需要修改下。 0.2.0 版本第二个参数可以获得config，同时commander不从index中导出，需要使用时从config中获取。
|
||||
|
||||
最后个参数是展示名。
|
||||
@@ -1,51 +0,0 @@
|
||||
---
|
||||
title: 右键菜单
|
||||
sTitle: dooringx-lib插件开发
|
||||
order: 15
|
||||
---
|
||||
|
||||
右键菜单可以进行自定义：
|
||||
|
||||
```js
|
||||
// 自定义右键
|
||||
const contextMenuState = config.getContextMenuState();
|
||||
const unmountContextMenu = contextMenuState.unmountContextMenu;
|
||||
const commander = config.getCommanderRegister();
|
||||
const ContextMenu = () => {
|
||||
const handleclick = () => {
|
||||
unmountContextMenu();
|
||||
};
|
||||
const forceUpdate = useState(0)[1];
|
||||
contextMenuState.forceUpdate = () => {
|
||||
forceUpdate((pre) => pre + 1);
|
||||
};
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
left: contextMenuState.left,
|
||||
top: contextMenuState.top,
|
||||
position: 'fixed',
|
||||
background: 'rgb(24, 23, 23)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ width: '100%' }}
|
||||
onClick={() => {
|
||||
commander.exec('redo');
|
||||
handleclick();
|
||||
}}
|
||||
>
|
||||
<Button>自定义</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
contextMenuState.contextMenu = <ContextMenu></ContextMenu>;
|
||||
```
|
||||
先拿到contextMenuState，contextMenuState上有个unmountContextMenu是关闭右键菜单方法。
|
||||
|
||||
所以在点击后需要调用关闭。
|
||||
|
||||
同时上面的left和top是右键的位置。
|
||||
|
||||
另外，你还需要在组件内增加个强刷赋值给forceUpdate，用于在组件移动时进行跟随。
|
||||
@@ -1,136 +0,0 @@
|
||||
---
|
||||
title: 函数
|
||||
sTitle: dooringx-lib插件开发
|
||||
order: 16
|
||||
---
|
||||
|
||||
|
||||
## 函数导入
|
||||
|
||||
函数导入做成对象置入initFunctionMap即可
|
||||
|
||||
```js
|
||||
initFunctionMap: functionMap,
|
||||
```
|
||||
|
||||
## 函数开发
|
||||
|
||||
|
||||
键名会显示出来所以键名是唯一的。
|
||||
|
||||
它的值是2个对象，一个是函数内容fn，一个是配置项config (0.10.0以上还需要传入函数名称，用于显示)。
|
||||
|
||||
config中的数组里每个配置会显示出来让用户去配置，name则是展示名字，data代表数据去哪里获取，可以选择从输入框（input），数据源（dataSource）,上下文（ctx）中获取，另外还有个特殊的弹窗（modal）。
|
||||
|
||||
options中的receive表示会从args哪个键上获取该值。
|
||||
|
||||
multi代表是否允许多个选项配置。
|
||||
|
||||
dooringx-lib中写好了2个函数changeUserValue与changeUserValueRecord，第一个函数会将得到的结果做成数组，如果非multi则取第一个结果就行。而第二个函数会将结果做成对象，比如用户在数据源中选了keya，那么就会把数据源的键值对作为个对象返回。
|
||||
|
||||
|
||||
fn中，第一个ctx参数代表上下文，如果有转换函数之类，可能需要使用（比如要把第一个函数的结果导给后面的函数）
|
||||
|
||||
第二个参数next是需要运行完毕后执行的，否则事件链会一直在该函数中不退出。
|
||||
|
||||
第三个参数config就可以拿到整个config对象。
|
||||
|
||||
第四个参数args是用户填写的参数，会根据options里填写的字段进行返回。
|
||||
|
||||
第五个是eventList，可以获取整个事件链的参数。
|
||||
|
||||
第六个参数iname可以拿到用户的选择项。
|
||||
|
||||
|
||||
```js
|
||||
通用GET请求函数: {
|
||||
fn: (ctx, next, config, args, _eventList, iname) => {
|
||||
console.log(args, '参数x');
|
||||
const userSelect = iname.data;
|
||||
const urlVal = changeUserValue(
|
||||
userSelect['请求url'],
|
||||
args,
|
||||
'_url',
|
||||
config,
|
||||
ctx
|
||||
); // input datasource ctx //datasource会去取值 ，ctx取ctx上字段
|
||||
const paramSource = changeUserValueRecord(
|
||||
// 设定只能从datasource或者ctx里取
|
||||
userSelect['请求参数'],
|
||||
args,
|
||||
'_origin',
|
||||
config,
|
||||
ctx
|
||||
);
|
||||
const ctxVal = changeUserValue(
|
||||
userSelect['返回上下文字段'],
|
||||
args,
|
||||
'_ctx',
|
||||
config,
|
||||
ctx
|
||||
);
|
||||
// 检查参数是否存在
|
||||
// 都是数组，非multi则取第一个。
|
||||
const url = urlVal[0];
|
||||
if (!url) {
|
||||
return next();
|
||||
}
|
||||
const ctxKey = ctxVal[0];
|
||||
|
||||
axios
|
||||
.get(url, {
|
||||
params: {
|
||||
...paramSource,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
const data = res.data;
|
||||
ctx[ctxKey] = data;
|
||||
next();
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
next();
|
||||
});
|
||||
},
|
||||
config: [
|
||||
{
|
||||
name: '请求url',
|
||||
data: ['dataSource', 'ctx', 'input'],
|
||||
options: {
|
||||
receive: '_url',
|
||||
multi: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '请求参数',
|
||||
data: ['dataSource', 'ctx'],
|
||||
options: {
|
||||
receive: '_origin',
|
||||
multi: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '返回上下文字段',
|
||||
data: ['input'],
|
||||
options: {
|
||||
receive: '_ctx',
|
||||
multi: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
name: '通用GET请求函数'
|
||||
},
|
||||
```
|
||||
|
||||
## 时机与函数装载
|
||||
|
||||
如果有需要，一般使用：
|
||||
|
||||
```js
|
||||
eventCenter.manualUpdateMap(cur, displayName, arr);
|
||||
```
|
||||
|
||||
manualUpdateMap第一个是时机名，第二个是展示名，第三个是用户选择。
|
||||
|
||||
更新事件中心后还需要更新store，结果以store为准。
|
||||
@@ -1,7 +0,0 @@
|
||||
---
|
||||
title: 图表在位移时不断刷新
|
||||
sTitle: 常见问题
|
||||
order: 17
|
||||
---
|
||||
|
||||
请使用fast-deep-equal比对所需要的数据，如果相同，则忽略更新即可。
|
||||
@@ -1,7 +0,0 @@
|
||||
---
|
||||
title: 无法选中组件或预览适配有问题
|
||||
sTitle: 常见问题
|
||||
order: 18
|
||||
---
|
||||
|
||||
绝对定位组件必须有初始宽高，虽然在拖拽中会给组件加上宽高，但如果用户一开始就未拖动，则组件无宽高，不止影响选中判定，也会影响最后预览的计算。
|
||||
@@ -1,7 +0,0 @@
|
||||
---
|
||||
title: 组件动态注册的函数会一直保留
|
||||
sTitle: 常见问题
|
||||
order: 19
|
||||
---
|
||||
|
||||
组件函数需要在组件卸载时调用卸载方法，否则一直存在。
|
||||
@@ -1,7 +0,0 @@
|
||||
---
|
||||
title: 置顶置底问题
|
||||
sTitle: 常见问题
|
||||
order: 21
|
||||
---
|
||||
|
||||
有小伙伴反应置顶置底的操作有点不符合常理。置顶和置底其实不应该使用zindex去制作，这样和图层的换顺序相矛盾，而且使用zindex在置底时会有问题，因为元素zindex不能比画布还低，所以置顶置底符合常理的做法应该是去提升顺序。
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
title: 多语言去除
|
||||
sTitle: 常见问题
|
||||
order: 22
|
||||
---
|
||||
|
||||
config中的i18n设置为false，即可不用在外层套用IntlProvider。
|
||||
|
||||
```
|
||||
config.i18n = false;
|
||||
```
|
||||
1
packages/dooringx-doc/src/global.d.ts
vendored
1
packages/dooringx-doc/src/global.d.ts
vendored
@@ -1 +0,0 @@
|
||||
/// <reference types="@sveltejs/kit" />
|
||||
@@ -1,43 +0,0 @@
|
||||
/*
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-06-29 11:14:15
|
||||
* @LastEditors: yehuozhili
|
||||
* @LastEditTime: 2021-07-01 10:13:37
|
||||
* @FilePath: \my-app\src\hooks.ts
|
||||
*/
|
||||
import cookie from 'cookie';
|
||||
import { v4 as uuid } from '@lukeed/uuid';
|
||||
import type { Handle } from '@sveltejs/kit';
|
||||
|
||||
export const handle: Handle = async ({ request, resolve }) => {
|
||||
const cookies = cookie.parse(request.headers.cookie || '');
|
||||
request.locals.userid = cookies.userid || uuid();
|
||||
// TODO https://github.com/sveltejs/kit/issues/1046
|
||||
if (request.query.has('_method')) {
|
||||
request.method = request.query.get('_method').toUpperCase();
|
||||
}
|
||||
|
||||
const response = await resolve(request);
|
||||
|
||||
if (!cookies.userid) {
|
||||
// if this is the first time the user has visited this app,
|
||||
// set a cookie so that we recognise them when they return
|
||||
response.headers['set-cookie'] = `userid=${request.locals.userid}; Path=/; HttpOnly`;
|
||||
}
|
||||
|
||||
return response;
|
||||
};
|
||||
/** @type {import('@sveltejs/kit').ServerFetch} */
|
||||
export async function serverFetch(request) {
|
||||
/*
|
||||
if (request.url.startsWith('https://api.yourapp.com/')) {
|
||||
// clone the original request, but change the URL
|
||||
request = new Request(
|
||||
request.url.replace('https://api.yourapp.com/', 'http://localhost:9999/'),
|
||||
request
|
||||
);
|
||||
}
|
||||
*/
|
||||
|
||||
return fetch(request);
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let href = '';
|
||||
export let color = '#4d5164';
|
||||
let backgroundColor = 'white';
|
||||
export let style = '';
|
||||
export let onClick = () => {};
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="yh-btn"
|
||||
style={`color: ${color} ; background-color:${backgroundColor};${style} `}
|
||||
on:click={() => {
|
||||
if (href !== '') {
|
||||
location.href = href;
|
||||
}
|
||||
onClick();
|
||||
}}
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
|
||||
<style lang="scss">
|
||||
.yh-btn {
|
||||
border: none;
|
||||
transition: all 0.3s linear;
|
||||
padding: 5px 20px;
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: none;
|
||||
outline-width: 0;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,177 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { MarkDownItemProps } from 'src/routes/docs/_api';
|
||||
import './prism.css';
|
||||
export let sections: Map<string, MarkDownItemProps[]>;
|
||||
let arr = [];
|
||||
$: arr = Array.from(sections.keys());
|
||||
export let active = '';
|
||||
</script>
|
||||
|
||||
<div style="display: flex;">
|
||||
<div class="sidebar">
|
||||
{#each arr as stitle}
|
||||
{#if stitle !== 'default'}
|
||||
<div
|
||||
class={`stitle ahref fbold ${active === stitle ? 'active' : ''}`}
|
||||
style="cursor: pointer;"
|
||||
title={stitle}
|
||||
on:click={() => {
|
||||
location.href = `#${stitle}`;
|
||||
active = stitle;
|
||||
}}
|
||||
>
|
||||
{@html stitle}
|
||||
</div>
|
||||
{#each sections.get(stitle) as section}
|
||||
<div class="title-item" style="cursor: pointer;">
|
||||
<span
|
||||
class={`ahref ${active === section.metadata.title ? 'active' : ''}`}
|
||||
on:click={() => {
|
||||
location.href = `#${section.slug}`;
|
||||
active = section.metadata.title;
|
||||
}}
|
||||
title={section.metadata.title}
|
||||
>
|
||||
{@html section.metadata.title}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if stitle === 'default'}
|
||||
{#each sections.get(stitle) as section}
|
||||
<!-- 没有主标题则二级变一级 -->
|
||||
<div class="stitle fbold" style="cursor: pointer;">
|
||||
<span
|
||||
class={`ahref ${active === section.metadata.title ? 'active' : ''}`}
|
||||
on:click={() => {
|
||||
location.href = `#${section.slug}`;
|
||||
active = section.metadata.title;
|
||||
}}
|
||||
title={section.metadata.title}
|
||||
>
|
||||
{@html section.metadata.title}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
<div class="markdown-wrapper">
|
||||
{#each arr as stitle}
|
||||
{#if stitle !== 'default'}
|
||||
<h1 class="stitle-content" id={stitle}>
|
||||
{@html stitle}
|
||||
</h1>
|
||||
<div class="yh-interval-s" />
|
||||
{/if}
|
||||
{#each sections.get(stitle) as section}
|
||||
<section data-id={section.slug}>
|
||||
<h2>
|
||||
<span class="offset-anchor" id={section.slug} />
|
||||
{@html section.metadata.title}
|
||||
</h2>
|
||||
|
||||
{@html section.html}
|
||||
</section>
|
||||
<div class="yh-interval" />
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.yh-interval-s {
|
||||
width: 100%;
|
||||
padding: 2px;
|
||||
}
|
||||
.yh-interval {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
.markdown-wrapper {
|
||||
height: calc(100vh - 40px);
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.fbold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.sidebar {
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
height: calc(100vh - 40px);
|
||||
border-right: 1px solid #eee;
|
||||
width: 300px;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB,
|
||||
Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji,
|
||||
Segoe UI Emoji, Segoe UI Symbol;
|
||||
.ahref {
|
||||
text-decoration: none;
|
||||
color: #717484;
|
||||
&:hover {
|
||||
color: #4569d4;
|
||||
}
|
||||
&:visited,
|
||||
&:link,
|
||||
&:active {
|
||||
color: #717484;
|
||||
}
|
||||
}
|
||||
.stitle {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.title-item {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
margin: 20px 0 20px 20px;
|
||||
|
||||
& ::selection {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: #4569d4;
|
||||
}
|
||||
}
|
||||
section :global(blockquote) {
|
||||
color: hsl(204, 100%, 50%);
|
||||
border: 2px solid var(--flash);
|
||||
}
|
||||
section :global(blockquote) :global(code) {
|
||||
background: hsl(204, 100%, 95%) !important;
|
||||
color: hsl(204, 100%, 50%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px; /*对垂直流动条有效*/
|
||||
height: 5px; /*对水平流动条有效*/
|
||||
}
|
||||
|
||||
/*定义滚动条的轨道颜色、内阴影及圆角*/
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
|
||||
background-color: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/*定义滑块颜色、内阴影及圆角*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 7px;
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
background-color: #444444;
|
||||
}
|
||||
|
||||
/*定义两端按钮的样式*/
|
||||
::-webkit-scrollbar-button {
|
||||
background-color: #b9c6d2;
|
||||
}
|
||||
|
||||
/*定义右下角汇合处的样式*/
|
||||
::-webkit-scrollbar-corner {
|
||||
background: #b9c6d2;
|
||||
}
|
||||
</style>
|
||||
@@ -1,123 +0,0 @@
|
||||
/*
|
||||
-----------------------------------------------
|
||||
syntax-highlighting [prism]
|
||||
-----------------------------------------------
|
||||
*/
|
||||
|
||||
/* colors --------------------------------- */
|
||||
pre[class*='language-'] {
|
||||
--background: var(--back-light);
|
||||
--base: #545454;
|
||||
--comment: #696969;
|
||||
--keyword: #007f8a;
|
||||
--function: #bb5525;
|
||||
--string: #856e3d;
|
||||
--number: #008000;
|
||||
--tags: var(--function);
|
||||
--important: var(--string);
|
||||
}
|
||||
|
||||
/* type-base ------------------------------ */
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: none;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
font: 300 var(--code-fs) / 1.7 var(--font-mono);
|
||||
color: var(--base);
|
||||
tab-size: 2;
|
||||
-moz-tab-size: 2;
|
||||
-webkit-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* code-blocks ---------------------------- */
|
||||
pre[class*='language-'] {
|
||||
overflow: auto;
|
||||
padding: 1.5rem 2rem;
|
||||
margin: 0.8rem 0 2.4rem;
|
||||
/* max-width: var(--code-w); */
|
||||
border-radius: var(--border-r);
|
||||
box-shadow: 1px 1px 1px rgba(68, 68, 68, 0.12) inset;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
/* tokens --------------------------------- */
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: var(--comment);
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: var(--base);
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: var(--tags);
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: var(--number);
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: var(--string);
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: var(--base);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: var(--function);
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: var(--keyword);
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: var(--important);
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
p {
|
||||
line-height: 2.5;
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { base } from '$app/paths';
|
||||
import Button from '../Button/index.svelte';
|
||||
import Switch from '../Switch/index.svelte';
|
||||
import logo from './logo.png';
|
||||
import { getContext } from 'svelte';
|
||||
import type { Writable } from 'svelte/store';
|
||||
const lang = getContext<Writable<string>>('lang');
|
||||
let checked = true;
|
||||
lang.subscribe((value) => {
|
||||
value === 'cn' ? (checked = true) : (checked = false);
|
||||
});
|
||||
const home = base + '/';
|
||||
const docs = base + '/docs';
|
||||
const api = base + '/api';
|
||||
const changelog = base +'/changelog'
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<div class="corner">
|
||||
<img src={logo} alt="SvelteKit" />
|
||||
</div>
|
||||
|
||||
<nav style="width: 100%;">
|
||||
<div class="nav-item-wrapper">
|
||||
<div class:active={$page.path === '/'}>
|
||||
<Button href={home} color={$page.path === '/' ? '#4569d4' : '#4d5164'}>首页</Button>
|
||||
</div>
|
||||
<div class:active={$page.path === '/docs'}>
|
||||
<Button href={docs} color={$page.path === '/docs' ? '#4569d4' : '#4d5164'}>文档</Button>
|
||||
</div>
|
||||
<div class:active={$page.path === '/api'}>
|
||||
<Button href={api} color={$page.path === '/api' ? '#4569d4' : '#4d5164'}>API</Button>
|
||||
</div>
|
||||
<div class:active={$page.path === '/changelog'}>
|
||||
<Button href={changelog} color={$page.path === '/changelog' ? '#4569d4' : '#4d5164'}>更新</Button>
|
||||
</div>
|
||||
<div class:active={$page.path === '/about'}>
|
||||
<Button href={'https://github.com/H5-Dooring/dooringx'}>Github</Button>
|
||||
</div>
|
||||
|
||||
<!-- <Switch
|
||||
{checked}
|
||||
onChange={() => {
|
||||
lang.update((pre) => {
|
||||
return pre === 'cn' ? 'en' : 'cn';
|
||||
});
|
||||
}}
|
||||
/> -->
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<style lang="scss">
|
||||
$height: 40px;
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB,
|
||||
Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji,
|
||||
Segoe UI Emoji, Segoe UI Symbol;
|
||||
border-bottom: 1px solid #e2e2e2;
|
||||
}
|
||||
.active {
|
||||
color: #4569d4;
|
||||
}
|
||||
.corner {
|
||||
height: $height;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 20px;
|
||||
img {
|
||||
height: $height - 5px;
|
||||
}
|
||||
}
|
||||
.nav-item-wrapper {
|
||||
height: $height;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
:nth-last-child(1) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
@@ -1,17 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="69px" height="96px" viewBox="0 0 69 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>dooringX图标@1x</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="dooringX图标" transform="translate(34.500000, 48.000000) scale(1, -1) translate(-34.500000, -48.000000) ">
|
||||
<polygon id="Rectangle-42-Copy-16" fill="#5271ED" points="-9.09494702e-13 17.5 27 0 27 16 13 24.5 13.5 72 -9.09494702e-13 80"></polygon>
|
||||
<polygon id="Rectangle-42-Copy-17" fill="#5271ED" points="41 40.5 55 32 55 64 27 80 27 64 41 56"></polygon>
|
||||
<polygon id="Rectangle-42-Copy-18" fill="#E6EBFF" points="0 80.0502832 13.4014599 72.0251416 26.8029197 80.0502832 54.5985401 64 68 72.0251416 26.3065693 96"></polygon>
|
||||
<polygon id="Rectangle-42-Copy-19" fill="#9CB0FF" points="27 0 69 24.4491525 69 72 55.2830686 64.0150631 55.2830686 32 27 16"></polygon>
|
||||
<polygon id="Rectangle-42-Copy-20" fill="#9CB0FF" points="13 24.9279279 27 33 27 80 13.5 71.9279279"></polygon>
|
||||
<polygon id="Rectangle-42-Copy-21" fill="#E6EBFF" points="13 24.6734694 27 16 55 32.3265306 41 41"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1,32 +0,0 @@
|
||||
<!--
|
||||
-----------------------------------------------
|
||||
svg icon
|
||||
- https://github.com/jacobmischka/svelte-feather-icon
|
||||
- https://feathericons.com/
|
||||
-----------------------------------------------
|
||||
-->
|
||||
<script>
|
||||
export let name;
|
||||
export let size = 20;
|
||||
</script>
|
||||
|
||||
<svg class="icon" width={size} height={size}>
|
||||
<use xlink:href="#{name}" />
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
.icon {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,123 +0,0 @@
|
||||
<div style="display: none">
|
||||
<!-- wrapper div allows use of innerHTML -->
|
||||
<svg>
|
||||
<symbol id="arrow-left" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="19" y1="12" x2="5" y2="12" />
|
||||
<polyline points="12 19 5 12 12 5" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="arrow-right" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="arrow-up" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="12" y1="19" x2="12" y2="5" />
|
||||
<polyline points="5 12 12 5 19 12" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="arrow-down" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<polyline points="19 12 12 19 5 12" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="check" class="icon" viewBox="0 0 24 24">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="close" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="download" class="icon" viewBox="0 0 24 24">
|
||||
<path d="M21 15V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V15" />
|
||||
<polyline points="7 10 12 15 17 10" />
|
||||
<line x1="12" y1="15" x2="12" y2="3" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="edit" class="icon" viewBox="0 0 24 24">
|
||||
<path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34" />
|
||||
<polygon points="18 2 22 6 12 16 8 16 8 12 18 2" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="github" class="icon" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
|
||||
/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="git-branch" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="6" y1="3" x2="6" y2="15" />
|
||||
<circle cx="18" cy="6" r="3" />
|
||||
<circle cx="6" cy="18" r="3" />
|
||||
<path d="M18 9a9 9 0 0 1-9 9" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="log-in" class="icon" viewBox="0 0 24 24">
|
||||
<path d="M15 3H19A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H15" />
|
||||
<polyline points="10 17 15 12 10 7" />
|
||||
<line x1="15" y1="12" x2="3" y2="12" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="maximize" class="icon" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
|
||||
/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="maximize-2" class="icon" viewBox="0 0 24 24">
|
||||
<polyline points="15 3 21 3 21 9" />
|
||||
<polyline points="9 21 3 21 3 15" />
|
||||
<line x1="21" y1="3" x2="14" y2="10" />
|
||||
<line x1="3" y1="21" x2="10" y2="14" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="menu" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="3" y1="12" x2="21" y2="12" />
|
||||
<line x1="3" y1="6" x2="21" y2="6" />
|
||||
<line x1="3" y1="18" x2="21" y2="18" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="message-square" class="icon" viewBox="0 0 24 24">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="minus" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="plus" class="icon" viewBox="0 0 24 24">
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="save" class="icon" viewBox="0 0 24 24">
|
||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
|
||||
<polyline points="17 21 17 13 7 13 7 21" />
|
||||
<polyline points="7 3 7 8 15 8" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="link" class="icon" viewBox="0 0 24 24">
|
||||
<path d="M9,7L6,7A2 2 0 0 0 6,17L9,17" />
|
||||
<path d="M15,7L18,7A2 2 0 0 1 18,17L15,17" />
|
||||
<path d="M7,12L17,12" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="chevron" class="icon" viewBox="0 0 24 24">
|
||||
<path d="M2,7 L12,17 L20,7" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="404" class="icon" viewBox="0 0 128 128">
|
||||
<path
|
||||
d="M121.718 73.272v9.953c3.957-7.584 6.199-16.05 6.199-24.995C127.917 26.079 99.273 0 63.958 0 28.644 0 0 26.079 0 58.23c0 .403.028.806.028 1.21l22.97-25.953h13.34l-19.76 27.187h6.42V53.77l13.728-19.477v49.361H22.998V73.272H2.158c5.951 20.284 23.608 36.208 45.998 41.399-1.44 3.3-5.618 11.263-12.565 12.674-8.607 1.764 23.358.428 46.163-13.178 17.519-4.611 31.938-15.849 39.77-30.513h-13.506V73.272H85.02V59.464l22.998-25.977h13.008l-19.429 27.187h6.421v-7.433l13.727-19.402v39.433h-.027zm-78.24 2.822a10.516 10.516 0 01-.996-4.535V44.548c0-1.613.332-3.124.996-4.535a11.66 11.66 0 012.713-3.68c1.134-1.032 2.49-1.864 4.04-2.468 1.55-.605 3.21-.908 4.982-.908h11.292c1.77 0 3.431.303 4.981.908 1.522.604 2.85 1.41 3.986 2.418l-12.26 16.303v-2.898a1.96 1.96 0 00-.665-1.512c-.443-.403-.996-.604-1.66-.604-.665 0-1.218.201-1.661.604a1.96 1.96 0 00-.664 1.512v9.071L44.364 77.606a10.556 10.556 0 01-.886-1.512zm35.73-4.535c0 1.613-.332 3.124-.997 4.535a11.66 11.66 0 01-2.712 3.68c-1.134 1.032-2.49 1.864-4.04 2.469-1.55.604-3.21.907-4.982.907H55.185c-1.77 0-3.431-.303-4.981-.907-1.55-.605-2.906-1.437-4.041-2.47a12.49 12.49 0 01-1.384-1.512l13.727-18.217v6.375c0 .605.222 1.109.665 1.512.442.403.996.604 1.66.604.664 0 1.218-.201 1.66-.604a1.96 1.96 0 00.665-1.512V53.87L75.97 36.838c.913.932 1.66 1.99 2.214 3.175.664 1.41.996 2.922.996 4.535v27.011h.028z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="user" class="icon" viewBox="0 0 130 130">
|
||||
<path
|
||||
d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z"
|
||||
stroke="#979797"
|
||||
/>
|
||||
</symbol>
|
||||
</svg>
|
||||
</div>
|
||||
@@ -1,89 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let checked = true;
|
||||
export let disabled = false;
|
||||
export let onChange = () => {
|
||||
checked = !checked;
|
||||
};
|
||||
export let unCheckText = 'EN';
|
||||
export let checkText = '中文';
|
||||
</script>
|
||||
|
||||
<label class="yh-switch-label">
|
||||
<input
|
||||
class="yh-swtich-input"
|
||||
type="checkbox"
|
||||
{checked}
|
||||
{disabled}
|
||||
on:change={() => {
|
||||
onChange();
|
||||
}}
|
||||
/>
|
||||
<span class={`yh-switch-sp1`}>
|
||||
{#if !checked}
|
||||
<span class="yh-switch-sp1-uncheck">
|
||||
{unCheckText}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="yh-switch-sp1-check">
|
||||
{checkText}
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<span class={`yh-switch-sp2 ${checked ? 'right' : ''}`} />
|
||||
</label>
|
||||
|
||||
<style lang="scss">
|
||||
.yh-switch-label {
|
||||
height: 22.5px;
|
||||
width: 60px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.yh-swtich-input {
|
||||
opacity: 0;
|
||||
}
|
||||
.yh-switch-sp1 {
|
||||
background: #fff;
|
||||
box-shadow: inset 2px 2px 4px #d9d9d9, inset -2px -2px 4px #fff, 2px 2px 4px #d9d9d9;
|
||||
color: #595959;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
padding: 1px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
border-radius: 60px;
|
||||
&-uncheck {
|
||||
font-size: 10px;
|
||||
top: 7px;
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
&-check {
|
||||
font-size: 10px;
|
||||
left: 10px;
|
||||
top: 7px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.yh-switch-sp2 {
|
||||
height: 22.5px;
|
||||
width: 22.5px;
|
||||
background: #fff;
|
||||
border: none;
|
||||
box-shadow: 2px 2px 4px #d9d9d9;
|
||||
text-shadow: 1px 1px 4px #d9d9d9, -1px -1px 4px #fff;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
&.right {
|
||||
left: calc(100% - 22.5px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,60 +0,0 @@
|
||||
// this action (https://svelte.dev/tutorial/actions) allows us to
|
||||
// progressively enhance a <form> that already works without JS
|
||||
export function enhance(
|
||||
form: HTMLFormElement,
|
||||
{
|
||||
pending,
|
||||
error,
|
||||
result,
|
||||
}: {
|
||||
pending?: (data: FormData, form: HTMLFormElement) => void;
|
||||
error?: (res: Response, error: Error, form: HTMLFormElement) => void;
|
||||
result: (res: Response, form: HTMLFormElement) => void;
|
||||
}
|
||||
) {
|
||||
let current_token: {};
|
||||
|
||||
async function handle_submit(e: Event) {
|
||||
const token = (current_token = {});
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
const body = new FormData(form);
|
||||
|
||||
if (pending) pending(body, form);
|
||||
|
||||
try {
|
||||
const res = await fetch(form.action, {
|
||||
method: form.method,
|
||||
headers: {
|
||||
accept: 'application/json',
|
||||
},
|
||||
body,
|
||||
});
|
||||
|
||||
if (token !== current_token) return;
|
||||
|
||||
if (res.ok) {
|
||||
result(res, form);
|
||||
} else if (error) {
|
||||
error(res, null, form);
|
||||
} else {
|
||||
console.error(await res.text());
|
||||
}
|
||||
} catch (e) {
|
||||
if (error) {
|
||||
error(null, e, form);
|
||||
} else {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form.addEventListener('submit', handle_submit);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
form.removeEventListener('submit', handle_submit);
|
||||
},
|
||||
};
|
||||
}
|
||||
7
packages/dooringx-doc/src/lib/types.d.ts
vendored
7
packages/dooringx-doc/src/lib/types.d.ts
vendored
@@ -1,7 +0,0 @@
|
||||
/**
|
||||
* Can be made globally available by placing this
|
||||
* inside `global.d.ts` and removing `export` keyword
|
||||
*/
|
||||
export interface Locals {
|
||||
userid: string;
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
<script context="module">
|
||||
import { browser, dev } from '$app/env';
|
||||
// we don't need any JS on this page, though we'll load
|
||||
// it in dev so that we get hot module replacement...
|
||||
export const hydrate = dev;
|
||||
|
||||
// ...but if the client-side router is already loaded
|
||||
// (i.e. we came here from elsewhere in the app), use it
|
||||
export const router = browser;
|
||||
|
||||
// since there's no dynamic data here, we can prerender
|
||||
// it so that it gets served as a static asset in prod
|
||||
export const prerender = true;
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import Header from '$lib/Header/index.svelte';
|
||||
import '../app.css';
|
||||
import { setContext } from 'svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
const lang = writable('cn');
|
||||
|
||||
setContext('lang', lang);
|
||||
</script>
|
||||
|
||||
<Header />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
main {
|
||||
position: relative;
|
||||
height: calc(100vh - 41px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,45 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Icon from '$lib/Icon/index.svelte';
|
||||
import Icons from '$lib/Icons/index.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>About</title>
|
||||
</svelte:head>
|
||||
|
||||
<Icons />
|
||||
|
||||
<div class="content">
|
||||
<h1>About this app</h1>
|
||||
<Icon name="arrow-left" />
|
||||
<Icon name="arrow-right" />
|
||||
|
||||
<Icon name="arrow-up" />
|
||||
<Icon name="arrow-down" />
|
||||
<Icon name="check" />
|
||||
<Icon name="close" />
|
||||
<Icon name="download" />
|
||||
<Icon name="edit" />
|
||||
<Icon name="github" />
|
||||
<Icon name="git-branch" />
|
||||
<Icon name="log-in" />
|
||||
<Icon name="maximize" />
|
||||
<Icon name="maximize-2" />
|
||||
<Icon name="menu" />
|
||||
<Icon name="message-square" />
|
||||
<Icon name="minus" />
|
||||
<Icon name="plus" />
|
||||
<Icon name="save" />
|
||||
<Icon name="link" />
|
||||
<Icon name="chevron" />
|
||||
<Icon name="404" />
|
||||
<Icon name="user" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
width: 100%;
|
||||
max-width: var(--column-width);
|
||||
margin: var(--column-margin-top) auto 0 auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,17 +0,0 @@
|
||||
/*
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-07-06 20:19:21
|
||||
* @LastEditors: yehuozhili
|
||||
* @LastEditTime: 2021-07-06 20:20:07
|
||||
* @FilePath: \my-app\src\routes\api\index.json.ts
|
||||
*/
|
||||
// 必须建立json否则不生成json文件
|
||||
import type { RequestHandler } from '@sveltejs/kit';
|
||||
import { api } from '../docs/_api';
|
||||
|
||||
export const get: RequestHandler = async (request) => {
|
||||
const param = request.query;
|
||||
const name = param.get('name');
|
||||
const response = await api(name);
|
||||
return response;
|
||||
};
|
||||
@@ -1,64 +0,0 @@
|
||||
<script context="module" lang="ts">
|
||||
import type { Load } from '@sveltejs/kit';
|
||||
import type { MarkDownItemProps } from '../docs/_api';
|
||||
import { base } from '$app/paths';
|
||||
export const load: Load = async ({ fetch }) => {
|
||||
const path = `${base}/api.json?name=api`;
|
||||
const res = await fetch(path);
|
||||
if (res.ok) {
|
||||
const files: MarkDownItemProps[] = await res.json();
|
||||
return {
|
||||
props: { files: files }
|
||||
};
|
||||
}
|
||||
const { message } = await res.json();
|
||||
|
||||
return {
|
||||
error: new Error(message)
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import DocRender from '$lib/DocRender/index.svelte';
|
||||
import { getContext } from 'svelte';
|
||||
import type { Writable } from 'svelte/store';
|
||||
export let files: MarkDownItemProps[];
|
||||
const lang = getContext<Writable<string>>('lang');
|
||||
let sections = new Map<string, MarkDownItemProps[]>();
|
||||
lang.subscribe((la) => {
|
||||
sections = new Map<string, MarkDownItemProps[]>();
|
||||
let tmp = files.filter((v) => {
|
||||
const name = v.file;
|
||||
const sp = name.split('.');
|
||||
if (Array.isArray(sp) && sp.length > 1 && sp[sp.length - 2] === 'EN') {
|
||||
return la === 'en';
|
||||
} else {
|
||||
return la === 'cn';
|
||||
}
|
||||
});
|
||||
tmp.forEach((v) => {
|
||||
const stitle = v.sTitle || 'default';
|
||||
const value = sections.get(stitle);
|
||||
if (value) {
|
||||
value.push(v);
|
||||
} else {
|
||||
sections.set(stitle, [v]);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
let active = '';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>API Docs • Svelte</title>
|
||||
<meta name="twitter:title" content="Svelte API docs" />
|
||||
<meta name="twitter:description" content="Cybernetically enhanced web apps" />
|
||||
<meta name="Description" content="Cybernetically enhanced web apps" />
|
||||
</svelte:head>
|
||||
|
||||
<DocRender {active} {sections} />
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@@ -1,18 +0,0 @@
|
||||
/*
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-07-13 11:11:17
|
||||
* @LastEditors: yehuozhili
|
||||
* @LastEditTime: 2021-07-13 11:11:42
|
||||
* @FilePath: \dooringx\packages\dooringx-doc\src\routes\changelog\index.json.ts
|
||||
*/
|
||||
|
||||
// 必须建立json否则不生成json文件
|
||||
import type { RequestHandler } from '@sveltejs/kit';
|
||||
import { api } from '../docs/_api';
|
||||
|
||||
export const get: RequestHandler = async (request) => {
|
||||
const param = request.query;
|
||||
const name = param.get('name');
|
||||
const response = await api(name);
|
||||
return response;
|
||||
};
|
||||
@@ -1,64 +0,0 @@
|
||||
<script context="module" lang="ts">
|
||||
import type { Load } from '@sveltejs/kit';
|
||||
import type { MarkDownItemProps } from '../docs/_api';
|
||||
import { base } from '$app/paths';
|
||||
export const load: Load = async ({ fetch }) => {
|
||||
const path = `${base}/api.json?name=changelog`;
|
||||
const res = await fetch(path);
|
||||
if (res.ok) {
|
||||
const files: MarkDownItemProps[] = await res.json();
|
||||
return {
|
||||
props: { files: files }
|
||||
};
|
||||
}
|
||||
const { message } = await res.json();
|
||||
|
||||
return {
|
||||
error: new Error(message)
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import DocRender from '$lib/DocRender/index.svelte';
|
||||
import { getContext } from 'svelte';
|
||||
import type { Writable } from 'svelte/store';
|
||||
export let files: MarkDownItemProps[];
|
||||
const lang = getContext<Writable<string>>('lang');
|
||||
let sections = new Map<string, MarkDownItemProps[]>();
|
||||
lang.subscribe((la) => {
|
||||
sections = new Map<string, MarkDownItemProps[]>();
|
||||
let tmp = files.filter((v) => {
|
||||
const name = v.file;
|
||||
const sp = name.split('.');
|
||||
if (Array.isArray(sp) && sp.length > 1 && sp[sp.length - 2] === 'EN') {
|
||||
return la === 'en';
|
||||
} else {
|
||||
return la === 'cn';
|
||||
}
|
||||
});
|
||||
tmp.forEach((v) => {
|
||||
const stitle = v.sTitle || 'default';
|
||||
const value = sections.get(stitle);
|
||||
if (value) {
|
||||
value.push(v);
|
||||
} else {
|
||||
sections.set(stitle, [v]);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
let active = '';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>API Docs • Svelte</title>
|
||||
<meta name="twitter:title" content="Svelte API docs" />
|
||||
<meta name="twitter:description" content="Cybernetically enhanced web apps" />
|
||||
<meta name="Description" content="Cybernetically enhanced web apps" />
|
||||
</svelte:head>
|
||||
|
||||
<DocRender {active} {sections} />
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@@ -1,126 +0,0 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import marked from 'marked';
|
||||
import { extract_frontmatter } from '../../utils/markdown';
|
||||
import { highlight } from '../../utils/highlight';
|
||||
import slugf from 'slug';
|
||||
|
||||
export interface MarkDownItemProps {
|
||||
html: string;
|
||||
metadata: Record<string, string>;
|
||||
subsections: { slug: string; title: string; level: string }[];
|
||||
slug: string;
|
||||
file: string;
|
||||
order: number;
|
||||
sTitle: string;
|
||||
}
|
||||
|
||||
export async function api(name: string) {
|
||||
const res = await getMarkDown(name);
|
||||
return {
|
||||
status: 200,
|
||||
body: res,
|
||||
};
|
||||
}
|
||||
|
||||
const blockTypes = [
|
||||
'blockquote',
|
||||
'html',
|
||||
'heading',
|
||||
'hr',
|
||||
'list',
|
||||
'listitem',
|
||||
'paragraph',
|
||||
'table',
|
||||
'tablerow',
|
||||
'tablecell',
|
||||
];
|
||||
|
||||
export const getMarkDown = (name: string) => {
|
||||
const root = process.cwd();
|
||||
const docPath = path.resolve(root, 'src', name);
|
||||
return fs
|
||||
.readdirSync(docPath)
|
||||
.filter((file) => file[0] !== '.' && path.extname(file) === '.md')
|
||||
.map((file) => {
|
||||
const currentFilePath = path.resolve(docPath, file);
|
||||
const markdown = fs.readFileSync(currentFilePath, 'utf-8');
|
||||
const { content, metadata } = extract_frontmatter(markdown);
|
||||
const order = parseFloat(metadata.order);
|
||||
const sTitle = metadata.sTitle;
|
||||
const subsections = [];
|
||||
const section_slug = slugf(metadata.title, '_');
|
||||
const renderer = new marked.Renderer();
|
||||
let block_open = false;
|
||||
|
||||
renderer.hr = () => {
|
||||
block_open = true;
|
||||
|
||||
return '<div class="side-by-side"><div class="copy">';
|
||||
};
|
||||
|
||||
renderer.code = (source, lang) => {
|
||||
source = source.replace(/^ +/gm, (match) => match.split(' ').join('\t'));
|
||||
let prefix = '';
|
||||
let className = 'code-block';
|
||||
const html = `<div class='${className}'>${prefix}${highlight(source, lang)}</div>`;
|
||||
if (block_open) {
|
||||
block_open = false;
|
||||
return `</div><div class="code">${html}</div></div>`;
|
||||
}
|
||||
|
||||
return html;
|
||||
};
|
||||
// 这个heading是md的标题
|
||||
renderer.heading = (text, level, rawtext) => {
|
||||
let slug;
|
||||
const match = /<a href="([^"]+)"[^>]*>(.+)<\/a>/.exec(text); // 提取a标签，链接为slug
|
||||
if (match) {
|
||||
slug = match[1];
|
||||
text = match[2];
|
||||
} else {
|
||||
slug = slugf(rawtext, '_');
|
||||
}
|
||||
|
||||
if (level === 1 || level === 2 || level === 3 || level === 4) {
|
||||
const title = text
|
||||
.replace(/<\/?code>/g, '')
|
||||
.replace(/\.(\w+)(\((.+)?\))?/, (m, $1, $2, $3) => {
|
||||
if ($3) return `.${$1}(...)`;
|
||||
if ($2) return `.${$1}()`;
|
||||
return `.${$1}`;
|
||||
});
|
||||
|
||||
subsections.push({ slug, title, level });
|
||||
}
|
||||
|
||||
return `
|
||||
<h${level + 1}>
|
||||
<span id="${slug}" ></span>
|
||||
<a href="docs#${slug}" class="anchor" aria-hidden="true"></a>
|
||||
${text}
|
||||
</h${level + 1}>`;
|
||||
};
|
||||
|
||||
blockTypes.forEach((type) => {
|
||||
const fn = renderer[type];
|
||||
renderer[type] = function () {
|
||||
return fn.apply(this, arguments);
|
||||
};
|
||||
});
|
||||
|
||||
const html = marked(content, { renderer });
|
||||
|
||||
const hashes = {};
|
||||
return {
|
||||
html: html.replace(/@@(\d+)/g, (m, id) => hashes[id] || m),
|
||||
metadata,
|
||||
subsections,
|
||||
slug: section_slug,
|
||||
order,
|
||||
file,
|
||||
sTitle,
|
||||
};
|
||||
})
|
||||
.sort((a, b) => a.order - b.order);
|
||||
};
|
||||
@@ -1,16 +0,0 @@
|
||||
/*
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-06-30 16:57:15
|
||||
* @LastEditors: yehuozhili
|
||||
* @LastEditTime: 2021-07-06 14:53:18
|
||||
* @FilePath: \my-app\src\routes\docs\index.json.ts
|
||||
*/
|
||||
import type { RequestHandler } from '@sveltejs/kit';
|
||||
import { api } from './_api';
|
||||
|
||||
export const get: RequestHandler = async (request) => {
|
||||
const param = request.query;
|
||||
const name = param.get('name');
|
||||
const response = await api(name);
|
||||
return response;
|
||||
};
|
||||
@@ -1,64 +0,0 @@
|
||||
<script context="module" lang="ts">
|
||||
import type { Load } from '@sveltejs/kit';
|
||||
import type { MarkDownItemProps } from './_api';
|
||||
import { base } from '$app/paths';
|
||||
export const load: Load = async ({ fetch }) => {
|
||||
const path = `${base}/docs.json?name=docs`;
|
||||
const res = await fetch(path);
|
||||
if (res.ok) {
|
||||
const files: MarkDownItemProps[] = await res.json();
|
||||
return {
|
||||
props: { files: files }
|
||||
};
|
||||
}
|
||||
|
||||
const { message } = await res.json();
|
||||
|
||||
return {
|
||||
error: new Error(message)
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import DocRender from '$lib/DocRender/index.svelte';
|
||||
import { getContext } from 'svelte';
|
||||
import type { Writable } from 'svelte/store';
|
||||
export let files: MarkDownItemProps[];
|
||||
const lang = getContext<Writable<string>>('lang');
|
||||
let sections = new Map<string, MarkDownItemProps[]>();
|
||||
lang.subscribe((la) => {
|
||||
sections = new Map<string, MarkDownItemProps[]>();
|
||||
let tmp = files.filter((v) => {
|
||||
const name = v.file;
|
||||
const sp = name.split('.');
|
||||
if (Array.isArray(sp) && sp.length > 1 && sp[sp.length - 2] === 'EN') {
|
||||
return la === 'en';
|
||||
} else {
|
||||
return la === 'cn';
|
||||
}
|
||||
});
|
||||
tmp.forEach((v) => {
|
||||
const stitle = v.sTitle || 'default';
|
||||
const value = sections.get(stitle);
|
||||
if (value) {
|
||||
value.push(v);
|
||||
} else {
|
||||
sections.set(stitle, [v]);
|
||||
}
|
||||
});
|
||||
});
|
||||
let active = '';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>API Docs • Svelte</title>
|
||||
<meta name="twitter:title" content="Svelte API docs" />
|
||||
<meta name="twitter:description" content="Cybernetically enhanced web apps" />
|
||||
<meta name="Description" content="Cybernetically enhanced web apps" />
|
||||
</svelte:head>
|
||||
|
||||
<DocRender {active} {sections} />
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@@ -1,104 +0,0 @@
|
||||
<script context="module" lang="ts">
|
||||
export const prerender = true;
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { base } from '$app/paths';
|
||||
const docs = base + '/docs';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Home</title>
|
||||
</svelte:head>
|
||||
|
||||
<section>
|
||||
<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>
|
||||
<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 lang="scss">
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.middle{
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
display: flex ;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
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;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,21 +0,0 @@
|
||||
/*
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-06-30 19:20:22
|
||||
* @LastEditors: yehuozhili
|
||||
* @LastEditTime: 2021-06-30 21:22:04
|
||||
* @FilePath: \my-app\src\utils\highlight.ts
|
||||
*/
|
||||
import { langs } from './markdown';
|
||||
import PrismJS from 'prismjs';
|
||||
import 'prismjs/components/prism-bash.js';
|
||||
import 'prismjs/components/prism-diff.js';
|
||||
import 'prism-svelte';
|
||||
|
||||
export function highlight(source, lang) {
|
||||
const plang = langs[lang] || '';
|
||||
const highlighted = plang
|
||||
? PrismJS.highlight(source, PrismJS.languages[plang], lang)
|
||||
: source.replace(/[&<>]/g, (c) => ({ '&': '&', '<': '<', '>': '>' }[c]));
|
||||
|
||||
return `<pre class='language-${plang}'><code>${highlighted}</code></pre>`;
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
/*
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-06-30 19:09:39
|
||||
* @LastEditors: yehuozhili
|
||||
* @LastEditTime: 2021-07-06 14:19:17
|
||||
* @FilePath: \my-app\src\utils\markdown.ts
|
||||
*/
|
||||
export function extract_frontmatter(markdown) {
|
||||
const match = /---\r?\n([\s\S]+?)\r?\n---/.exec(markdown);
|
||||
let content = '';
|
||||
let metadata: Record<string, string> = {};
|
||||
if (match) {
|
||||
const frontMatter = match[1];
|
||||
content = markdown.slice(match[0].length);
|
||||
|
||||
metadata = {};
|
||||
frontMatter.split('\n').forEach((pair) => {
|
||||
// split on the colon
|
||||
const colonIndex = pair.indexOf(':');
|
||||
let value = pair.slice(colonIndex + 1).trim();
|
||||
// if surrounded by double quotes then remove those quotes
|
||||
if (value && value.charAt(0) === '"' && value.charAt(value.length - 1) === '"') {
|
||||
value = value.substring(1, value.length - 1);
|
||||
}
|
||||
metadata[pair.slice(0, colonIndex).trim()] = value;
|
||||
});
|
||||
}
|
||||
|
||||
return { metadata, content };
|
||||
}
|
||||
|
||||
// map lang to prism-language-attr
|
||||
export const langs = {
|
||||
bash: 'bash',
|
||||
html: 'markup',
|
||||
sv: 'svelte',
|
||||
js: 'javascript',
|
||||
css: 'css',
|
||||
diff: 'diff',
|
||||
};
|
||||
|
||||
// links renderer
|
||||
export function link_renderer(href, title, text) {
|
||||
let target_attr = '';
|
||||
let title_attr = '';
|
||||
|
||||
if (href.startsWith('http')) {
|
||||
target_attr = ' target="_blank"';
|
||||
}
|
||||
|
||||
if (title !== null) {
|
||||
title_attr = ` title="${title}"`;
|
||||
}
|
||||
|
||||
return `<a href="${href}"${target_attr}${title_attr} rel="noopener noreferrer">${text}</a>`;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB |
@@ -1,3 +0,0 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 352 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 113 KiB |
@@ -1,32 +0,0 @@
|
||||
/*
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-06-29 11:14:15
|
||||
* @LastEditors: yehuozhili
|
||||
* @LastEditTime: 2021-07-09 01:50:59
|
||||
* @FilePath: \dooringx\packages\dooringx-doc\svelte.config.js
|
||||
*/
|
||||
import preprocess from 'svelte-preprocess';
|
||||
import staticAdapter from '@sveltejs/adapter-static';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: preprocess(),
|
||||
kit: {
|
||||
// hydrate the <div id="svelte"> element in src/app.html
|
||||
target: '#svelte',
|
||||
adapter: staticAdapter({
|
||||
pages: 'build',
|
||||
assets: 'build',
|
||||
}),
|
||||
paths: process.env.DEPLOY
|
||||
? {
|
||||
base: '/dooringx',
|
||||
}
|
||||
: {},
|
||||
trailingSlash: 'ignore',
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -1,30 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "node",
|
||||
"module": "es2020",
|
||||
"lib": ["es2020"],
|
||||
"target": "es2019",
|
||||
/**
|
||||
svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
|
||||
to enforce using \`import type\` instead of \`import\` for Types.
|
||||
*/
|
||||
"importsNotUsedAsValues": "error",
|
||||
"isolatedModules": true,
|
||||
"resolveJsonModule": true,
|
||||
/**
|
||||
To have warnings/errors of the Svelte compiler at the correct position,
|
||||
enable source maps by default.
|
||||
*/
|
||||
"sourceMap": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"baseUrl": ".",
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"paths": {
|
||||
"$lib/*": ["src/lib/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
|
||||
}
|
||||
4
packages/dooringx-dumi-doc/.fatherrc.ts
Normal file
4
packages/dooringx-dumi-doc/.fatherrc.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default {
|
||||
esm: 'rollup',
|
||||
cjs: 'rollup',
|
||||
};
|
||||
32
packages/dooringx-dumi-doc/.umirc.ts
Normal file
32
packages/dooringx-dumi-doc/.umirc.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { defineConfig } from 'dumi';
|
||||
export default defineConfig({
|
||||
title: 'Dooringx',
|
||||
favicon: 'https://yehuozhili-1259443377.cos.ap-nanjing.myqcloud.com/dooringxlogo.png',
|
||||
logo: 'https://yehuozhili-1259443377.cos.ap-nanjing.myqcloud.com/dooringxlogo.png',
|
||||
outputPath: 'docs-dist',
|
||||
mode: 'site',
|
||||
locales: [
|
||||
['zh', '中文'],
|
||||
['en', 'English'],
|
||||
],
|
||||
navs: {
|
||||
// 多语言 key 值需与 locales 配置中的 key 一致
|
||||
en: [
|
||||
null, // null 值代表保留约定式生成的导航，只做增量配置
|
||||
{
|
||||
title: 'GitHub',
|
||||
path: 'https://github.com/H5-Dooring/dooringx',
|
||||
},
|
||||
],
|
||||
zh: [
|
||||
null, // null 值代表保留约定式生成的导航，只做增量配置
|
||||
{
|
||||
title: 'GitHub',
|
||||
path: 'https://github.com/H5-Dooring/dooringx',
|
||||
},
|
||||
],
|
||||
},
|
||||
base: process.env.NODE_ENV === 'production' ? '/dooringx' : '/',
|
||||
publicPath: process.env.NODE_ENV === 'production' ? '/dooringx/' : '/',
|
||||
// more config: https://d.umijs.org/config
|
||||
});
|
||||
27
packages/dooringx-dumi-doc/README.md
Normal file
27
packages/dooringx-dumi-doc/README.md
Normal file
@@ -0,0 +1,27 @@
|
||||
# dooringx-dumi-doc
|
||||
|
||||
## Getting Started
|
||||
|
||||
Install dependencies,
|
||||
|
||||
```bash
|
||||
$ npm i
|
||||
```
|
||||
|
||||
Start the dev server,
|
||||
|
||||
```bash
|
||||
$ npm start
|
||||
```
|
||||
|
||||
Build documentation,
|
||||
|
||||
```bash
|
||||
$ npm run docs:build
|
||||
```
|
||||
|
||||
Build library via `father-build`,
|
||||
|
||||
```bash
|
||||
$ npm run build
|
||||
```
|
||||
9
packages/dooringx-dumi-doc/docs/API/index.en.md
Normal file
9
packages/dooringx-dumi-doc/docs/API/index.en.md
Normal file
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: API
|
||||
toc: menu
|
||||
nav:
|
||||
title: API
|
||||
order: 5
|
||||
---
|
||||
|
||||
In process
|
||||
9
packages/dooringx-dumi-doc/docs/API/index.md
Normal file
9
packages/dooringx-dumi-doc/docs/API/index.md
Normal file
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: API
|
||||
toc: menu
|
||||
nav:
|
||||
title: API
|
||||
order: 5
|
||||
---
|
||||
|
||||
In process
|
||||
@@ -1,8 +1,11 @@
|
||||
---
|
||||
title: CHANGELOG
|
||||
order: 1
|
||||
title: ChangeLog
|
||||
toc: menu
|
||||
nav:
|
||||
title: ChangeLog
|
||||
order: 6
|
||||
---
|
||||
## changelog
|
||||
|
||||
|
||||
## 0.10.2
|
||||
|
||||
191
packages/dooringx-dumi-doc/docs/ChangeLog/index.md
Normal file
191
packages/dooringx-dumi-doc/docs/ChangeLog/index.md
Normal file
@@ -0,0 +1,191 @@
|
||||
---
|
||||
title: 变更日志
|
||||
toc: menu
|
||||
nav:
|
||||
title: 变更日志
|
||||
order: 6
|
||||
---
|
||||
|
||||
## 0.10.2
|
||||
|
||||
修改timeline选中底色，增加item类名方便修改。
|
||||
|
||||
## 0.10.1
|
||||
|
||||
修改timeline类名，方便修改样式。
|
||||
|
||||
## 0.10.0
|
||||
|
||||
函数名提出name作为单独配置项传递，第一个参数作为id，最后个参数作为函数名，这样函数的显示名称可以支持转换。
|
||||
|
||||
弹窗事件如果不传递弹窗名字，则不会出现弹窗。
|
||||
|
||||
## 0.9.5
|
||||
|
||||
preview组件scripts加载由并发变为线性。
|
||||
|
||||
编辑模式下使用远程组件会储存当前画布状态。
|
||||
|
||||
## 0.9.4
|
||||
|
||||
修复preview组件不能解除loading的bug
|
||||
|
||||
## 0.9.3
|
||||
|
||||
增加双击置入画布。
|
||||
|
||||
变更元素初始focus状态。
|
||||
|
||||
存在元素宽高，则置入时定位于元素中心。
|
||||
|
||||
## 0.9.2
|
||||
|
||||
增加远程组件调用全流程，component中增加url属性，便于script加载。
|
||||
|
||||
## 0.9.1
|
||||
|
||||
增加config.i18n配置，不使用国际化则不需要导入intl的context。
|
||||
control组件第一个按钮变更为拖拽，功能合并至timeline
|
||||
|
||||
## 0.9.0
|
||||
|
||||
增加react-intl，修改部分样式。
|
||||
|
||||
## 0.8.4
|
||||
|
||||
增加preview的属性，可外界控制loading。
|
||||
## 0.8.3
|
||||
|
||||
增加timeline拖动条与选中。
|
||||
修复antd menu属性报错。
|
||||
|
||||
## 0.8.2
|
||||
|
||||
增加左侧面板配置。
|
||||
|
||||
修复timeline闪烁问题。
|
||||
|
||||
## 0.8.1
|
||||
|
||||
新增动画组件timeline。可以更好预览所有动画。
|
||||
|
||||
## 0.8.0
|
||||
|
||||
动画部分重构，可支持多动画同时配置。
|
||||
|
||||
画布拖动最小值变更为0。
|
||||
|
||||
|
||||
## 0.7.7
|
||||
|
||||
优化画布拖拽逻辑，更平滑移动。
|
||||
|
||||
## 0.7.6
|
||||
|
||||
右侧自定义rightGlobalCustom类型变更为函数传入config
|
||||
|
||||
## 0.7.5
|
||||
|
||||
修改滚轮方向。
|
||||
|
||||
|
||||
## 0.7.4
|
||||
|
||||
修复框选移动bug。
|
||||
|
||||
|
||||
## 0.7.3
|
||||
|
||||
修复弹窗位置与选中问题。
|
||||
|
||||
|
||||
## 0.7.2
|
||||
|
||||
修复锁定组件影响，锁定中无法拖拽，缩放，旋转。
|
||||
|
||||
## 0.7.1
|
||||
|
||||
修复锁定组件无法选中解锁。
|
||||
|
||||
|
||||
## 0.7.0
|
||||
|
||||
已支持组件旋转！
|
||||
|
||||
修复拖拽参考线等优化逻辑。
|
||||
|
||||
## 0.6.0
|
||||
|
||||
已支持编辑模式使用Iframe！
|
||||
|
||||
修复选中条件。
|
||||
|
||||
|
||||
## 0.5.1
|
||||
|
||||
修复右侧选中不能取消选中问题。
|
||||
|
||||
## 0.5.0
|
||||
|
||||
修复control组件宽度不够问题。
|
||||
|
||||
移除antd自定义icon，容器底部icon可配置。
|
||||
|
||||
## 0.4.2
|
||||
|
||||
修复animate错误初始值。
|
||||
|
||||
修改markline样式。
|
||||
|
||||
全局设置增加容器高度。
|
||||
## 0.4.1
|
||||
|
||||
去除lib自动导入样式。
|
||||
|
||||
## 0.4.0
|
||||
|
||||
去除runtime导出，所有属性从config中获取。
|
||||
|
||||
## 0.3.1
|
||||
|
||||
1、由uuid更换为nanoid。
|
||||
|
||||
2、control组件增加标尺控制。
|
||||
|
||||
## 0.3.0
|
||||
|
||||
1、增加标尺，ContainerWrapper需要传递config才可使用。
|
||||
|
||||
2、修改容器最小拖动667。修复画布缩放下拖拽时与鼠标距离不一致。
|
||||
|
||||
3、innerContainerDragUp需要传递config。
|
||||
|
||||
## 0.2.0
|
||||
|
||||
commander的传递进行修改，可以获得config了，commander不再从index中导出 ，需要使用时从config中获取。增加左侧类名，方便自定义。
|
||||
|
||||
## 0.1.10
|
||||
|
||||
修改eslint依赖推荐
|
||||
|
||||
|
||||
## 0.1.9
|
||||
|
||||
增加全局body设置
|
||||
|
||||
## 0.1.8
|
||||
|
||||
增加弹窗设置，移除modalContainer
|
||||
|
||||
## 0.1.7
|
||||
|
||||
修改预览特殊条件显示，删除console
|
||||
## 0.1.6
|
||||
|
||||
调整初始缩放，画布初始比例，增加回正画布功能。
|
||||
## 0.1.5
|
||||
|
||||
删除未作按钮，增加fixed配置
|
||||
## 0.1.4
|
||||
|
||||
基础功能
|
||||
6
packages/dooringx-dumi-doc/docs/FAQ/index.en.md
Normal file
6
packages/dooringx-dumi-doc/docs/FAQ/index.en.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: FAQ
|
||||
nav:
|
||||
title: FAQ
|
||||
order: 4
|
||||
---
|
||||
@@ -1,9 +1,33 @@
|
||||
---
|
||||
title: 表单验证提交思路
|
||||
sTitle: 常见问题
|
||||
order: 20
|
||||
title: FAQ
|
||||
toc: menu
|
||||
nav:
|
||||
title: FAQ
|
||||
order: 4
|
||||
---
|
||||
|
||||
|
||||
## 图表在位移时不断刷新
|
||||
|
||||
|
||||
请使用fast-deep-equal比对所需要的数据，如果相同，则忽略更新即可。
|
||||
|
||||
|
||||
## 无法选中组件或预览适配有问题
|
||||
|
||||
|
||||
绝对定位组件必须有初始宽高，虽然在拖拽中会给组件加上宽高，但如果用户一开始就未拖动，则组件无宽高，不止影响选中判定，也会影响最后预览的计算。
|
||||
|
||||
|
||||
## 组件动态注册的函数会一直保留
|
||||
|
||||
|
||||
组件函数需要在组件卸载时调用卸载方法，否则一直存在。
|
||||
|
||||
|
||||
## 表单验证提交思路
|
||||
|
||||
|
||||
表单验证提交有非常多的做法，因为数据全部是联通的，或者直接写个表单组件也可以。
|
||||
|
||||
在不使用表单组件时，简单的做法是为每个输入组件做个验证函数与提交函数。
|
||||
@@ -18,4 +42,19 @@ order: 20
|
||||
|
||||
另外的做法是可以专门写个提交按钮，固定了参数，以及部分规则，比如规定在页面中的所有表单都会被收集提交。
|
||||
|
||||
那么我们可以利用数据源，将所有表单输出内容自动提交给数据源，最后的提交按钮按数据源规定格式的key提取，发送给后端。
|
||||
那么我们可以利用数据源，将所有表单输出内容自动提交给数据源，最后的提交按钮按数据源规定格式的key提取，发送给后端。
|
||||
|
||||
## 置顶置底问题
|
||||
|
||||
|
||||
有小伙伴反应置顶置底的操作有点不符合常理。置顶和置底其实不应该使用zindex去制作，这样和图层的换顺序相矛盾，而且使用zindex在置底时会有问题，因为元素zindex不能比画布还低，所以置顶置底符合常理的做法应该是去提升顺序。
|
||||
|
||||
|
||||
## 多语言去除
|
||||
|
||||
|
||||
config中的i18n设置为false，即可不用在外层套用IntlProvider。
|
||||
|
||||
```js
|
||||
config.i18n = false;
|
||||
```
|
||||
7
packages/dooringx-dumi-doc/docs/Guide/index.en.md
Normal file
7
packages/dooringx-dumi-doc/docs/Guide/index.en.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Guide
|
||||
toc: menu
|
||||
nav:
|
||||
title: Guide
|
||||
order: 1
|
||||
---
|
||||
1081
packages/dooringx-dumi-doc/docs/Guide/index.md
Normal file
1081
packages/dooringx-dumi-doc/docs/Guide/index.md
Normal file
File diff suppressed because it is too large
Load Diff
20
packages/dooringx-dumi-doc/docs/index.en.md
Normal file
20
packages/dooringx-dumi-doc/docs/index.en.md
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: Dooringx
|
||||
hero:
|
||||
desc: Quickly build your visual drag and drop application!！
|
||||
background: https://images.tuyacn.com/rms-static/b2994480-b3df-11eb-8b85-1990e48a4eb7-1620905892040.png?tyName=210513docs_bg.png
|
||||
image: https://img-blog.csdnimg.cn/img_convert/520863a38a93d960862f92c805bc97cc.png#pic_center
|
||||
actions:
|
||||
- link: /docs
|
||||
text: Get started
|
||||
features:
|
||||
- icon: https://yehuozhili-1259443377.cos.ap-nanjing.myqcloud.com/boxes.png
|
||||
title: Out of the box
|
||||
desc: It provides low-level capabilities to help developers get started at zero cost, so that all their attention can focus on component development and application design
|
||||
- icon: https://yehuozhili-1259443377.cos.ap-nanjing.myqcloud.com/typescript.png
|
||||
title: Typescript support
|
||||
desc: Providing good TS definition support makes it easier to write components
|
||||
- icon: https://yehuozhili-1259443377.cos.ap-nanjing.myqcloud.com/expand.png
|
||||
title: Scalable and configurable
|
||||
desc: Not only components, but also shortcut keys, event systems and UI layers can be configured and expanded by themselves
|
||||
---
|
||||
20
packages/dooringx-dumi-doc/docs/index.md
Normal file
20
packages/dooringx-dumi-doc/docs/index.md
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: Dooringx
|
||||
hero:
|
||||
desc: 快速搭建你的可视化拖拽应用！
|
||||
background: https://images.tuyacn.com/rms-static/b2994480-b3df-11eb-8b85-1990e48a4eb7-1620905892040.png?tyName=210513docs_bg.png
|
||||
image: https://img-blog.csdnimg.cn/img_convert/520863a38a93d960862f92c805bc97cc.png#pic_center
|
||||
actions:
|
||||
- link: /docs
|
||||
text: 快速上手
|
||||
features:
|
||||
- icon: https://yehuozhili-1259443377.cos.ap-nanjing.myqcloud.com/boxes.png
|
||||
title: 开箱即用
|
||||
desc: 提供的底层能力，帮助开发者零成本上手，让所有注意力都能放组件开发与应用设计上
|
||||
- icon: https://yehuozhili-1259443377.cos.ap-nanjing.myqcloud.com/typescript.png
|
||||
title: Typescript支持
|
||||
desc: 提供良好的ts定义支持，让编写组件更加轻松
|
||||
- icon: https://yehuozhili-1259443377.cos.ap-nanjing.myqcloud.com/expand.png
|
||||
title: 可扩展可配置
|
||||
desc: 不止是组件，快捷键、事件系统、ui层面都可自行配置与扩展
|
||||
---
|
||||
42
packages/dooringx-dumi-doc/package.json
Normal file
42
packages/dooringx-dumi-doc/package.json
Normal file
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "dooringx-dumi-doc",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"start": "dumi dev",
|
||||
"docs:build": "dumi build",
|
||||
"docs:deploy": "gh-pages -d docs-dist",
|
||||
"build": "father-build",
|
||||
"deploy": "npm run docs:build && npm run docs:deploy",
|
||||
"release": "npm run build && npm publish",
|
||||
"prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
|
||||
"test": "umi-test",
|
||||
"test:coverage": "umi-test --coverage"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.esm.js",
|
||||
"typings": "dist/index.d.ts",
|
||||
"gitHooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,less,md,json}": [
|
||||
"prettier --write"
|
||||
],
|
||||
"*.ts?(x)": [
|
||||
"prettier --parser=typescript --write"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^16.12.0 || ^17.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@umijs/test": "^3.0.5",
|
||||
"dumi": "^1.0.17",
|
||||
"father-build": "^1.17.2",
|
||||
"gh-pages": "^3.0.0",
|
||||
"lint-staged": "^10.0.7",
|
||||
"prettier": "^2.2.1",
|
||||
"yorkie": "^2.0.0"
|
||||
}
|
||||
}
|
||||
29
packages/dooringx-dumi-doc/tsconfig.json
Normal file
29
packages/dooringx-dumi-doc/tsconfig.json
Normal file
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"jsx": "react",
|
||||
"esModuleInterop": true,
|
||||
"sourceMap": true,
|
||||
"baseUrl": "./",
|
||||
"strict": true,
|
||||
"paths": {
|
||||
"@/*": ["src/*"],
|
||||
"@@/*": ["src/.umi/*"]
|
||||
},
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"lib",
|
||||
"es",
|
||||
"dist",
|
||||
"typings",
|
||||
"**/__test__",
|
||||
"test",
|
||||
"docs",
|
||||
"tests"
|
||||
]
|
||||
}
|
||||
2
packages/dooringx-dumi-doc/typings.d.ts
vendored
Normal file
2
packages/dooringx-dumi-doc/typings.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
declare module '*.css';
|
||||
declare module '*.less';
|
||||
@@ -12,10 +12,10 @@ const changelog = path.resolve(process.cwd(), 'CHANGELOG.md');
|
||||
const doclog = path.resolve(
|
||||
process.cwd(),
|
||||
'packages',
|
||||
'dooringx-doc',
|
||||
'src',
|
||||
'changelog',
|
||||
'1.1.md'
|
||||
'dooringx-dumi-doc',
|
||||
'docs',
|
||||
'ChangeLog',
|
||||
'index.md'
|
||||
);
|
||||
const isExist = fs.existsSync(doclog);
|
||||
if (isExist) {
|
||||
@@ -23,8 +23,11 @@ if (isExist) {
|
||||
}
|
||||
|
||||
const prepend = `---
|
||||
title: CHANGELOG
|
||||
order: 1
|
||||
title: 变更日志
|
||||
toc: menu
|
||||
nav:
|
||||
title: 变更日志
|
||||
order: 6
|
||||
---
|
||||
`;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user