diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index c644ba5..281c877 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -2,13 +2,19 @@ # These owners will be the default owners for everything in # the repo. Unless a later match takes precedence -* @leoyuan @alvarto +* @liujuping @JackLian @alvarto /packages/plugin-manual/ @alvarto -/packages/base-monaco-editor/ @alvarto @wangshihao111 -/packages/plugin-code-editor/ @alvarto +/packages/base-monaco-editor/ @alvarto @wangshihao111 @SuSunSam +/packages/plugin-code-editor/ @alvarto @SuSunSam /packages/plugin-schema/ @alvarto -/packages/plugin-components-pane/ @mark-ck -/packages/plugin-datasource-pane/ @xingmolu -/packages/plugin-zh-en/ @leoyuan -/packages/plugin-undo-redo/ @leoyuan +/packages/plugin-components-pane/ @mark-ck @love999262 +/packages/plugin-datasource-pane/ @YSMJ1994 +/packages/plugin-zh-en/ @JackLian @liujuping +/packages/plugin-undo-redo/ @JackLian @liujuping +/packages/plugin-resource-tabs/ @JackLian @liujuping +/packages/plugin-set-ref-prop/ @JackLian @liujuping +/packages/plugin-view-manager-pane/ @JackLian @liujuping +/packages/base-monaco-editor/ @hzd822 +/packages/plugin-multiple-editor/ @hzd822 +/packages/action-block @liujuping \ No newline at end of file diff --git a/.github/workflows/deprecate npm.yml b/.github/workflows/deprecate npm.yml new file mode 100644 index 0000000..ea096ec --- /dev/null +++ b/.github/workflows/deprecate npm.yml @@ -0,0 +1,32 @@ +name: deprecate Package Version + +on: + workflow_dispatch: + inputs: + version: + description: 'Version to be deleted package@version' + required: true + +jobs: + delete-package-version: + runs-on: ubuntu-latest + if: >- + github.ref == 'refs/heads/main' && + (github.actor == 'JackLian' || github.actor == 'liujuping') + + steps: + - name: Checkout repository + uses: actions/checkout@v2 + + - name: Set up Node.js + uses: actions/setup-node@v2 + with: + node-version: '14' + + - name: deprecate Package Version + run: | + git config --local user.email "action@github.com" + git config --local user.name "GitHub Action" + + echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc + npm deprecate ${{ github.event.inputs.version }} "This version is deprecated. Please consider upgrading to a newer version." diff --git a/.github/workflows/publish beta npm.yml b/.github/workflows/publish beta npm.yml new file mode 100644 index 0000000..01ab685 --- /dev/null +++ b/.github/workflows/publish beta npm.yml @@ -0,0 +1,38 @@ +name: Publish Beta NPM Packages +on: + workflow_dispatch: + inputs: + packagePath: + description: 'Path to the package (e.g., action-block)' + required: true + betaVersion: + description: 'Beta version number (e.g., 1.0.1-beta.0)' + required: true + +jobs: + publish-package: + runs-on: ubuntu-latest + if: >- + github.actor == 'JackLian' || github.actor == 'liujuping' + + steps: + - name: Checkout Repository + uses: actions/checkout@v2 + + - name: Setup Node.js + uses: actions/setup-node@v2 + with: + node-version: '16' # 或者您希望的任何版本 + + - name: Change to Package Directory + run: | + git config --local user.email "action@github.com" + git config --local user.name "GitHub Action" + npm install --legacy-peer-deps + echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc + cd packages/${{ github.event.inputs.packagePath }} + npm install --legacy-peer-deps + npm run build + npm version ${{ github.event.inputs.betaVersion }} + echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc + npm publish --tag beta \ No newline at end of file diff --git a/.github/workflows/publish npm.yml b/.github/workflows/publish npm.yml new file mode 100644 index 0000000..5ada959 --- /dev/null +++ b/.github/workflows/publish npm.yml @@ -0,0 +1,51 @@ +name: Publish NPM Packages +on: + workflow_dispatch: + inputs: + packagePath: + description: 'Path to the package (e.g., action-block)' + required: true + versionType: + description: 'Version update type (major, minor, patch)' + required: true + default: 'patch' + +jobs: + publish-package: + runs-on: ubuntu-latest + if: >- + github.ref == 'refs/heads/main' && + (github.actor == 'JackLian' || github.actor == 'liujuping') + + steps: + - name: Checkout Repository + uses: actions/checkout@v2 + + - name: Setup Node.js + uses: actions/setup-node@v2 + with: + node-version: '16' # 或者您希望的任何版本 + + - name: Publish Package + run: | + git config --local user.email "action@github.com" + git config --local user.name "GitHub Action" + + echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc + npm install --legacy-peer-deps + cd packages/${{ github.event.inputs.packagePath }} + npm install --legacy-peer-deps + npm version ${{ github.event.inputs.versionType }} + npm run build + + echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc + npm publish + + echo "PACKAGE_NAME=$(node -p "require('./package.json').name")" >> $GITHUB_ENV + echo "PACKAGE_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV + + git add package.json + git commit -m "Bump version to ${PACKAGE_VERSION}" + + git tag -a "${PACKAGE_NAME}@${PACKAGE_VERSION}" -m "Release ${PACKAGE_NAME} version ${PACKAGE_VERSION}" + git push origin "${PACKAGE_NAME}@${PACKAGE_VERSION}" \ No newline at end of file diff --git a/package.json b/package.json index 58231d4..761e9e0 100644 --- a/package.json +++ b/package.json @@ -40,9 +40,9 @@ } }, "devDependencies": { - "lerna": "^4.x", "f2elint": "^2.0.1", "husky": "^7.0.4", + "lerna": "^4.x", "typescript": "^3.2.2" }, "engines": { @@ -54,5 +54,6 @@ }, "resolutions": { "@builder/babel-preset-ice": "1.0.1" - } -} + }, + "repository": "https://github.com/alibaba/lowcode-plugins.git" +} \ No newline at end of file diff --git a/packages/action-block/package.json b/packages/action-block/package.json index 80aaf97..e9c0c00 100644 --- a/packages/action-block/package.json +++ b/packages/action-block/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/action-block", - "version": "1.0.0-beta.0", + "version": "1.0.1", "description": "", "main": "lib/index.js", "repository": { @@ -27,5 +27,5 @@ "build-plugin-fusion": "^0.1.22", "build-plugin-moment-locales": "^0.1.3" }, - "homepage": "https://unpkg.com/@alilc/action-block@1.0.0-beta.0/build/index.html" + "homepage": "https://unpkg.com/@alilc/action-block@1.0.1/build/index.html" } diff --git a/packages/action-block/src/index.tsx b/packages/action-block/src/index.tsx index 02e69eb..22eaa46 100644 --- a/packages/action-block/src/index.tsx +++ b/packages/action-block/src/index.tsx @@ -30,7 +30,7 @@ const SaveAsBlock = (props: SaveAsBlockProps) => { React.useEffect(() => { const generateImage = async () => { let dom2 = node.getDOMNode(); - console.log('html2canvas: ', html2canvas); + // console.log('html2canvas: ', html2canvas); const canvas = await html2canvas?.(dom2, { scale: 0.5 }); const dataUrl = canvas.toDataURL(); setSrc(dataUrl); @@ -106,7 +106,7 @@ export default { }, title: '新增', action(node: Node) { - console.log('node: ', node); + // console.log('node: ', node); dialog = Dialog.show({ v2: true, title: "保存为区块", @@ -116,4 +116,4 @@ export default { }, }, important: true, -}; \ No newline at end of file +}; diff --git a/packages/base-monaco-editor/package.json b/packages/base-monaco-editor/package.json index c6153a3..6dfa41a 100644 --- a/packages/base-monaco-editor/package.json +++ b/packages/base-monaco-editor/package.json @@ -1,8 +1,9 @@ { "name": "@alilc/lowcode-plugin-base-monaco-editor", - "version": "1.1.1", + "version": "1.1.2", "description": "代码编辑组件，monaco-editor 的低代码适配封装", "publishConfig": { + "registry": "https://registry.npmjs.org/", "access": "public" }, "files": [ @@ -62,7 +63,7 @@ "commit-msg": "f2elint commit-msg-scan" } }, - "homepage": "https://unpkg.com/@alilc/lowcode-plugin-base-monaco-editor@1.1.1/build/index.html", + "homepage": "https://unpkg.com/@alilc/lowcode-plugin-base-monaco-editor@1.1.2/build/index.html", "repository": { "type": "git", "url": "https://github.com/alibaba/lowcode-plugins.git", diff --git a/packages/base-monaco-editor/src/helper.ts b/packages/base-monaco-editor/src/helper.ts index 614ee8d..5180c52 100644 --- a/packages/base-monaco-editor/src/helper.ts +++ b/packages/base-monaco-editor/src/helper.ts @@ -44,6 +44,7 @@ export interface IGeneralManacoEditorProps { enableOutline?: boolean; /** style of wrapper */ style?: CSSProperties; + overrideServices?: oEditor.IEditorOverrideServices; enhancers?: EditorEnhancer[]; } @@ -113,7 +114,7 @@ const DIFF_EDITOR_INITIAL_OPTIONS: oEditor.IStandaloneDiffEditorConstructionOpti export const useEditor = (type: 'single' | 'diff', props: IGeneralManacoEditorProps) => { const { - editorDidMount, editorWillMount, theme, value, path, language, saveViewState, defaultValue, enhancers, + editorDidMount, editorWillMount, theme, value, path, language, saveViewState, defaultValue, enhancers, overrideServices } = props; const [isEditorReady, setIsEditorReady] = useState(false); @@ -196,7 +197,7 @@ export const useEditor = (type: 'single' | 'diff', props: I automaticLayout: true, ...INITIAL_OPTIONS, ...optionRef.current, - }); + }, overrideServices); editor.setModel(model); } else { const originalModel = monaco @@ -211,7 +212,7 @@ export const useEditor = (type: 'single' | 'diff', props: I automaticLayout: true, ...DIFF_EDITOR_INITIAL_OPTIONS, ...optionRef.current, - }); + }, overrideServices); editor.setModel({ original: originalModel, modified: modifiedModel }); } diff --git a/packages/plugin-block/src/index.tsx b/packages/plugin-block/src/index.tsx index afd3b29..dfbbb71 100644 --- a/packages/plugin-block/src/index.tsx +++ b/packages/plugin-block/src/index.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import { default as BlockPane } from './pane'; -const LowcodePluginCusPlugin = (ctx: ILowCodePluginContext) => { +const LowcodePluginCusPlugin = (ctx: IPublicModelPluginContext) => { return { // 插件名，注册环境下唯一 name: 'LowcodePluginCusPlugin', diff --git a/packages/plugin-code-editor/package.json b/packages/plugin-code-editor/package.json index 1233684..340bc01 100644 --- a/packages/plugin-code-editor/package.json +++ b/packages/plugin-code-editor/package.json @@ -1,7 +1,7 @@ { "name": "@alilc/lowcode-plugin-code-editor", "author": "59174526@qq.com & humphry.huang9@gmail.com", - "version": "1.0.5", + "version": "1.0.9", "description": "CodeEditor", "files": [ "es", @@ -17,6 +17,7 @@ "build": "build-scripts build --config build.js" }, "publishConfig": { + "registry": "https://registry.npmjs.org/", "access": "public" }, "dependencies": { @@ -24,7 +25,7 @@ "@alilc/lowcode-plugin-base-monaco-editor": "^1.1.1", "@babel/core": "^7.15.8", "@babel/parser": "^7.15.8", - "@babel/preset-env": "^7.15.8", + "@babel/preset-env": "7.22.9", "@babel/preset-react": "^7.14.5", "@babel/standalone": "^7.15.8", "@babel/traverse": "^7.15.4", diff --git a/packages/plugin-code-editor/src/components/ErrorBoundary/ErrorBoundary.less b/packages/plugin-code-editor/src/components/ErrorBoundary/ErrorBoundary.less index ab8f7b3..5a9324d 100644 --- a/packages/plugin-code-editor/src/components/ErrorBoundary/ErrorBoundary.less +++ b/packages/plugin-code-editor/src/components/ErrorBoundary/ErrorBoundary.less @@ -1,7 +1,4 @@ -.container { - min-width: 300px; -} -.actions { +.plugin-code-editor-errorBoundary-actions { margin: 12px auto; width: fit-content; text-align: center; diff --git a/packages/plugin-code-editor/src/components/ErrorBoundary/ErrorBoundary.tsx b/packages/plugin-code-editor/src/components/ErrorBoundary/ErrorBoundary.tsx index fabd328..72159fd 100644 --- a/packages/plugin-code-editor/src/components/ErrorBoundary/ErrorBoundary.tsx +++ b/packages/plugin-code-editor/src/components/ErrorBoundary/ErrorBoundary.tsx @@ -1,7 +1,7 @@ import React, { Component, ErrorInfo, Suspense } from 'react'; import { Loading, Message, Button } from '@alifd/next'; -import styles from './ErrorBoundary.less'; +import './ErrorBoundary.less'; interface ErrorBoundaryProps { onCatch?: (error: Error, info: ErrorInfo) => void; @@ -41,7 +41,7 @@ export class ErrorBoundary extends Component

详细错误: {errorInfo || '未知原因'}

-
+
diff --git a/packages/plugin-code-editor/src/components/JSEditor/JsEditor.tsx b/packages/plugin-code-editor/src/components/JSEditor/JsEditor.tsx index 6eb275a..4b0acfd 100644 --- a/packages/plugin-code-editor/src/components/JSEditor/JsEditor.tsx +++ b/packages/plugin-code-editor/src/components/JSEditor/JsEditor.tsx @@ -178,8 +178,14 @@ export class JsEditor extends PureComponent { if (!monacoEditor || !monaco) { return; } - const count = monacoEditor.getModel()?.getLineCount() ?? 0; - const range = new monaco.Range(count, 1, count, 1); + + // 找到最后一个 }，在他前面插入新的 function 字符串 + const matches = monacoEditor.getModel()?.findMatches('}'); + let range = {} + if(matches && matches.length > 0) { + const { startLineNumber, startColumn } = matches[matches.length - 1]?.range || {} + range = new monaco.Range(startLineNumber, startColumn, startLineNumber, startColumn); + } const functionCode = params.template ? params.template : diff --git a/packages/plugin-code-editor/src/index.tsx b/packages/plugin-code-editor/src/index.tsx index d7caf4c..c40e74e 100644 --- a/packages/plugin-code-editor/src/index.tsx +++ b/packages/plugin-code-editor/src/index.tsx @@ -1,8 +1,9 @@ import { CodeEditorPane } from './pane'; -import { project, ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { project } from '@alilc/lowcode-engine'; import icon from './icon'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; -const plugin = (ctx: ILowCodePluginContext) => { +const plugin = (ctx: IPublicModelPluginContext) => { return { name: 'codeEditor', width: 600, diff --git a/packages/plugin-code-editor/src/pane/index.tsx b/packages/plugin-code-editor/src/pane/index.tsx index 6f229b5..dae3b0c 100644 --- a/packages/plugin-code-editor/src/pane/index.tsx +++ b/packages/plugin-code-editor/src/pane/index.tsx @@ -94,7 +94,7 @@ export const CodeEditorPane = memo(({ project, event, skeleton }: CodeEditorPane useEffect(() => { // load schema on open - eventRef.current?.on('skeleton.panel-dock.active', (pluginName) => { + skeletonRef.current?.onShowPanel((pluginName: string) => { if (pluginName === 'codeEditor') { const schema = lowcodeProjectRef.current?.exportSchema(common.designerCabin.TransformStage.Save); if (!schema) { @@ -109,7 +109,7 @@ export const CodeEditorPane = memo(({ project, event, skeleton }: CodeEditorPane }); // save schema when panel closed - eventRef.current?.on('skeleton.panel-dock.unactive', (pluginName) => { + skeletonRef.current?.onHidePanel((pluginName: string) => { if (pluginName === 'codeEditor') { saveSchemaRef.current?.(); } diff --git a/packages/plugin-components-pane/build.json b/packages/plugin-components-pane/build.json index 90ae90f..36f5196 100644 --- a/packages/plugin-components-pane/build.json +++ b/packages/plugin-components-pane/build.json @@ -1,6 +1,14 @@ { "plugins": [ "build-plugin-component", + [ + "@alilc/build-plugin-alt", + { + "type": "plugin", + "inject": true, + "openUrl": "https://lowcode-engine.cn/demo/index.html?debug" + } + ], "build-plugin-fusion", [ "build-plugin-moment-locales", diff --git a/packages/plugin-components-pane/demo/demo.hbs b/packages/plugin-components-pane/demo/demo.hbs index bcca41a..f5147dd 100644 --- a/packages/plugin-components-pane/demo/demo.hbs +++ b/packages/plugin-components-pane/demo/demo.hbs @@ -11,9 +11,9 @@ - - - + + + @@ -21,4 +21,4 @@
- \ No newline at end of file + diff --git a/packages/plugin-components-pane/package.json b/packages/plugin-components-pane/package.json index 28e9134..7f12a94 100644 --- a/packages/plugin-components-pane/package.json +++ b/packages/plugin-components-pane/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-components-pane", - "version": "1.0.3", + "version": "2.0.4", "description": "低代码组件面板", "files": [ "es/", @@ -31,19 +31,20 @@ ], "license": "ISC", "devDependencies": { - "@alib/build-scripts": "^0.1.3", + "@alib/build-scripts": "^0.1.32", "@alifd/next": "^1.23.12", "@svgr/webpack": "^5.5.0", "@types/react": "^16.9.13", "@types/react-dom": "^16.9.4", "@typescript-eslint/parser": "^4.28.3", - "build-plugin-component": "^0.2.7-1", + "build-plugin-component": "^1.12.0", "build-plugin-fusion": "^0.1.0", "build-plugin-moment-locales": "^0.1.0", "eventemitter3": "^4.0.7", "f2elint": "^1.2.0", "html-webpack-plugin": "^5.3.2", "moment": "^2.29.1", + "@alilc/build-plugin-alt": "^1.0.0", "react-dom": "^16.0.0" }, "husky": { diff --git a/packages/plugin-components-pane/src/components/Component/index.tsx b/packages/plugin-components-pane/src/components/Component/index.tsx index 5fae255..681a414 100644 --- a/packages/plugin-components-pane/src/components/Component/index.tsx +++ b/packages/plugin-components-pane/src/components/Component/index.tsx @@ -2,12 +2,13 @@ import React from 'react'; import cls from 'classnames/bind'; import Svg from '../../Icon/Component'; import style from './index.module.scss'; -import { getTextReader, StandardComponentMeta } from '../../utils/transform'; +import { Text, StandardComponentMeta } from '../../utils/transform'; const cx = cls.bind(style); interface Props { data: StandardComponentMeta; + t: (input: Text) => string; } interface State { @@ -37,7 +38,7 @@ export default class Component extends React.Component { constructor(props) { super(props); - this.t = getTextReader('zh_CN'); + this.t = props.t; } renderIcon() { diff --git a/packages/plugin-components-pane/src/components/Tab/index.module.scss b/packages/plugin-components-pane/src/components/Tab/index.module.scss index b443fca..ffa7ab5 100644 --- a/packages/plugin-components-pane/src/components/Tab/index.module.scss +++ b/packages/plugin-components-pane/src/components/Tab/index.module.scss @@ -6,6 +6,7 @@ position: relative; flex-grow: 0; flex-shrink: 0; + overflow-x: scroll; .items { display: flex; diff --git a/packages/plugin-components-pane/src/index.tsx b/packages/plugin-components-pane/src/index.tsx index a6130a7..6b26af8 100644 --- a/packages/plugin-components-pane/src/index.tsx +++ b/packages/plugin-components-pane/src/index.tsx @@ -1,308 +1,29 @@ -import React from 'react'; -import { Search } from '@alifd/next'; -import { PluginProps } from '@alilc/lowcode-types'; -import cls from 'classnames/bind'; -import debounce from 'lodash.debounce'; -import style from './index.module.scss'; -import IconOfPane from './Icon'; -import Category from './components/Category'; -import List from './components/List'; -import Component from './components/Component'; -import Tab from './components/Tab'; -import ComponentManager from './store'; -import transform, { getTextReader, SortedGroups, Text } from './utils/transform'; - -const { material, common, project, event } = window.AliLowCodeEngine || {}; - -const isNewEngineVersion = !!material; - -const store = new ComponentManager(); - -const cx = cls.bind(style); - -interface ComponentPaneProps extends PluginProps { - [key: string]: any; -} - -interface ComponentPaneState { - groups: SortedGroups[]; - filter: SortedGroups[]; - keyword: string; -} - -export default class ComponentPane extends React.Component { - static displayName = 'LowcodeComponentPane'; - - static defaultProps = { - lang: 'zh_CN', - }; - - state: ComponentPaneState = { - groups: [], - filter: [], - keyword: '', - }; - - store = store; - - t: (input: Text) => string; - - getStrKeywords: (keywords: Text[]) => string; - - getFilteredComponents = debounce(() => { - const { groups = [], keyword } = this.state; - if (!keyword) { - this.setState({ - filter: groups, +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; +import ComponentsPane from './pane'; +const ComponentPanelPlugin = (ctx: IPublicModelPluginContext) => { + return { + async init() { + const { skeleton, project } = ctx; + // 注册组件面板 + const componentsPane = skeleton.add({ + area: 'leftArea', + type: 'PanelDock', + name: 'componentsPane', + content: ComponentsPane, + contentProps: {}, + props: { + align: 'top', + icon: 'zujianku', + description: '组件库', + }, }); - return; - } - - const filter = groups.map((group) => ({ - ...group, - categories: group.categories - .map((category) => ({ - ...category, - components: category.components.filter((c) => { - const strTitle = this.t(c.title); - const strComponentName = this.t(c.componentName); - const strDescription = this.t(c.description); - const strKeywords = this.getStrKeywords(c.keywords); - const keyToSearch = `${strTitle}#${strComponentName}#${strDescription}#${strKeywords}`.toLowerCase(); - return keyToSearch.includes(keyword); - }), - })) - .filter((c) => c?.components?.length), - })); - - this.setState({ - filter, - }); - }, 200); - - constructor(props) { - super(props); - this.t = getTextReader(props.lang); - this.getStrKeywords = (keywords: Text[]): string => { - if (typeof keywords === 'string') { - return keywords; - } - if (keywords && Array.isArray(keywords) && keywords.length) { - return keywords.map(keyword => this.t(keyword)).join('-'); - } - return ''; - }; - } - - componentDidMount() { - const { editor } = this.props; - if (!editor) { - this.initComponentList(); - return; - } - const assets = isNewEngineVersion ? material.getAssets() : editor.get('assets'); - if (assets) { - this.initComponentList(); - } else { - console.warn('[ComponentsPane]: assets not ready, wait for assets ready event.') - } - - if (isNewEngineVersion) { - event.on('trunk.change', this.initComponentList.bind(this)); - material.onChangeAssets(this.initComponentList.bind(this)); - } else { - editor.on('trunk.change', this.initComponentList.bind(this)); - editor.once('editor.ready', this.initComponentList.bind(this)); - editor.on('designer.incrementalAssetsReady', this.initComponentList.bind(this)); - } - } - - /** - * 初始化组件列表 - * TODO: 无副作用，可多次执行 - */ - initComponentList() { - const { editor } = this.props; - const rawData = isNewEngineVersion ? material.getAssets() : editor.get('assets'); - - const meta = transform(rawData); - - const { groups, snippets } = meta; - - this.store.setSnippets(snippets); - - this.setState({ - groups, - filter: groups, - }); - } - - registerAdditive = (shell: HTMLDivElement | null) => { - if (!shell || shell.dataset.registered) { - return; - } - - function getSnippetId(elem: any) { - if (!elem) { - return null; - } - while (shell !== elem) { - if (elem.classList.contains('snippet')) { - return elem.dataset.id; - } - elem = elem.parentNode; - } - return null; - } - - const { editor } = this.props; - const designer = !isNewEngineVersion ? editor?.get('designer') : null; - const _dragon = isNewEngineVersion ? common.designerCabin.dragon : designer?.dragon; - if (!_dragon || (!isNewEngineVersion && !designer)) { - return; - } - - // eslint-disable-next-line - const click = (e: Event) => {}; - - shell.addEventListener('click', click); - - _dragon.from(shell, (e: Event) => { - const doc = isNewEngineVersion ? project.getCurrentDocument() : designer?.currentDocument; - const id = getSnippetId(e.target); - if (!doc || !id) { - return false; - } - - const dragTarget = { - type: 'nodedata', - data: this.store.getSnippetById(id), - }; - - return dragTarget; - }); - - shell.dataset.registered = 'true'; + componentsPane?.disable?.(); + project.onSimulatorRendererReady(() => { + componentsPane?.enable?.(); + }) + }, }; - - handleSearch = (keyword = '') => { - this.setState({ - keyword: keyword.toLowerCase(), - }); - this.getFilteredComponents(); - }; - - renderEmptyContent() { - return ( -
- -
暂无组件，请在物料站点添加
-
- ) - } - - renderContent() { - const { filter = [], keyword } = this.state; - const hasContent = filter.filter(item => { - return item?.categories?.filter(category => { - return category?.components?.length; - }).length; - }).length; - if (!hasContent) { - return this.renderEmptyContent(); - } - if (keyword) { - return ( -
- {filter.map((group) => { - const { categories } = group; - {return categories.map((category) => { - const { components } = category; - const cname = this.t(category.name); - return ( - - - {components.map((component) => { - const { componentName, snippets = [] } = component; - return snippets.filter(snippet => snippet.id).map(snippet => { - return ( - - ); - }); - })} - - - ); - })} - })} -
- ) - } - return ( - - {filter.map((group) => { - const { categories } = group; - return ( - -
- {categories.map((category) => { - const { components } = category; - const cname = this.t(category.name); - return ( - - - {components.map((component) => { - const { componentName, snippets = [] } = component; - return snippets.filter(snippet => snippet.id).map(snippet => { - return ( - - ); - }); - })} - - - ); - })} -
- - ); - })} - - ); - } - - render() { - return ( -
-
- -
- {this.renderContent()} -
- ); - } } +ComponentPanelPlugin.pluginName = 'ComponentPanelPlugin'; +export default ComponentPanelPlugin; -export const PaneIcon = IconOfPane; diff --git a/packages/plugin-components-pane/src/index.module.scss b/packages/plugin-components-pane/src/pane/index.module.scss similarity index 87% rename from packages/plugin-components-pane/src/index.module.scss rename to packages/plugin-components-pane/src/pane/index.module.scss index 2d8c140..d63baaf 100644 --- a/packages/plugin-components-pane/src/index.module.scss +++ b/packages/plugin-components-pane/src/pane/index.module.scss @@ -33,4 +33,9 @@ line-height: 2; } } + + > .filtered-content { + overflow-y: overlay; + overflow-x: hidden; + } } diff --git a/packages/plugin-components-pane/src/pane/index.tsx b/packages/plugin-components-pane/src/pane/index.tsx new file mode 100644 index 0000000..eacb5db --- /dev/null +++ b/packages/plugin-components-pane/src/pane/index.tsx @@ -0,0 +1,321 @@ +import React from 'react'; +import { Search } from '@alifd/next'; +import { PluginProps } from '@alilc/lowcode-types'; +import cls from 'classnames/bind'; +import debounce from 'lodash.debounce'; +import style from './index.module.scss'; +import IconOfPane from '../Icon'; +import Category from '../components/Category'; +import List from '../components/List'; +import Component from '../components/Component'; +import Tab from '../components/Tab'; +import ComponentManager from '../store'; +import transform, { getTextReader, SortedGroups, Text, StandardComponentMeta, SnippetMeta, createI18n } from '../utils/transform'; + +const { material, common, project, event } = window.AliLowCodeEngine || {}; + +const isNewEngineVersion = !!material; + +const store = new ComponentManager(); + +const cx = cls.bind(style); + +interface ComponentPaneProps extends PluginProps { + [key: string]: any; +} + +interface ComponentPaneState { + groups: SortedGroups[]; + filter: SortedGroups[]; + keyword: string; +} + +export default class ComponentPane extends React.Component { + static displayName = 'LowcodeComponentPane'; + + static defaultProps = { + lang: 'zh_CN', + }; + + state: ComponentPaneState = { + groups: [], + filter: [], + keyword: '', + }; + + store = store; + + t: (input: Text) => string; + + getStrKeywords: (keywords: Text[]) => string; + + getKeyToSearch (c:StandardComponentMeta|SnippetMeta){ + const strTitle = this.t(c.title); + const strComponentName = this.t((c as SnippetMeta).schema?.componentName); + const strDescription = "description" in c ? this.t(c.description):''; + const strKeywords = "keywords" in c ? this.getStrKeywords(c.keywords||[]):''; + return `${strTitle}#${strComponentName}#${strDescription}#${strKeywords}`.toLowerCase(); + } + + getFilteredComponents = debounce(() => { + const { groups = [], keyword } = this.state; + if (!keyword) { + this.setState({ + filter: groups, + }); + return; + } + + + + const filter = groups.map((group) => ({ + ...group, + categories: group.categories + .map((category) => ({ + ...category, + components: category.components.filter((c) => { + let keyToSearch = this.getKeyToSearch(c); + if(c.snippets){ + c.snippets.map((item)=>{ + keyToSearch += `_${this.getKeyToSearch(item)}` + }) + } + return keyToSearch.includes(keyword); + }), + })) + .filter((c) => c?.components?.length), + })); + + this.setState({ + filter, + }); + }, 200); + + constructor(props) { + super(props); + this.t = getTextReader(props.lang); + this.getStrKeywords = (keywords: Text[]): string => { + if (typeof keywords === 'string') { + return keywords; + } + if (keywords && Array.isArray(keywords) && keywords.length) { + return keywords.map(keyword => this.t(keyword)).join('-'); + } + return ''; + }; + } + + componentDidMount() { + const { editor } = this.props; + if (!editor) { + this.initComponentList(); + return; + } + const assets = isNewEngineVersion ? material.getAssets() : editor.get('assets'); + if (assets) { + this.initComponentList(); + } else { + console.warn('[ComponentsPane]: assets not ready, wait for assets ready event.') + } + + if (isNewEngineVersion) { + event.on('trunk.change', this.initComponentList.bind(this)); + material.onChangeAssets(this.initComponentList.bind(this)); + } else { + editor.on('trunk.change', this.initComponentList.bind(this)); + editor.once('editor.ready', this.initComponentList.bind(this)); + editor.on('designer.incrementalAssetsReady', this.initComponentList.bind(this)); + } + } + + /** + * 初始化组件列表 + * TODO: 无副作用，可多次执行 + */ + initComponentList() { + const { editor } = this.props; + const rawData = isNewEngineVersion ? material.getAssets() : editor.get('assets'); + + const meta = transform(rawData, this.t); + + const { groups, snippets } = meta; + + this.store.setSnippets(snippets); + + this.setState({ + groups, + filter: groups, + }); + } + + registerAdditive = (shell: HTMLDivElement | null) => { + if (!shell || shell.dataset.registered) { + return; + } + + function getSnippetId(elem: any) { + if (!elem) { + return null; + } + while (shell !== elem) { + if (elem.classList.contains('snippet')) { + return elem.dataset.id; + } + elem = elem.parentNode; + } + return null; + } + + const { editor } = this.props; + const designer = !isNewEngineVersion ? editor?.get('designer') : null; + const _dragon = isNewEngineVersion ? common.designerCabin.dragon : designer?.dragon; + if (!_dragon || (!isNewEngineVersion && !designer)) { + return; + } + + // eslint-disable-next-line + const click = (e: Event) => {}; + + shell.addEventListener('click', click); + + _dragon.from(shell, (e: Event) => { + const doc = isNewEngineVersion ? project.getCurrentDocument() : designer?.currentDocument; + const id = getSnippetId(e.target); + if (!doc || !id) { + return false; + } + + const dragTarget = { + type: 'nodedata', + data: this.store.getSnippetById(id), + }; + + return dragTarget; + }); + + shell.dataset.registered = 'true'; + }; + + handleSearch = (keyword = '') => { + this.setState({ + keyword: keyword.toLowerCase(), + }); + this.getFilteredComponents(); + }; + + renderEmptyContent() { + return ( +
+ +
{this.t(createI18n('暂无组件，请在物料站点添加', 'No components, please add materials'))}
+
+ ) + } + + renderContent() { + const { filter = [], keyword } = this.state; + const hasContent = filter.filter(item => { + return item?.categories?.filter(category => { + return category?.components?.length; + }).length; + }).length; + if (!hasContent) { + return this.renderEmptyContent(); + } + if (keyword) { + return ( +
+ {filter.map((group) => { + const { categories } = group; + {return categories.map((category) => { + const { components } = category; + const cname = this.t(category.name); + return ( + + + {components.map((component) => { + const { componentName, snippets = [] } = component; + return snippets.filter(snippet => snippet.id && this.getKeyToSearch(snippet).toLowerCase().includes(keyword)).map(snippet => { + return ( + + ); + }); + })} + + + ); + })} + })} +
+ ) + } + return ( + + {filter.map((group) => { + const { categories } = group; + return ( + +
+ {categories.map((category) => { + const { components } = category; + const cname = this.t(category.name); + return ( + + + {components.map((component) => { + const { componentName, snippets = [] } = component; + return snippets.filter(snippet => snippet.id).map(snippet => { + return ( + + ); + }); + })} + + + ); + })} +
+ + ); + })} + + ); + } + + render() { + return ( +
+
+ +
+ {this.renderContent()} +
+ ); + } +} + +export const PaneIcon = IconOfPane; diff --git a/packages/plugin-components-pane/src/utils/transform.ts b/packages/plugin-components-pane/src/utils/transform.ts index 7406842..69f3f59 100644 --- a/packages/plugin-components-pane/src/utils/transform.ts +++ b/packages/plugin-components-pane/src/utils/transform.ts @@ -51,8 +51,7 @@ export interface IgnoreComponents { [key: string]: string[]; } -export default function transform(raw: any) { - const t = getTextReader('zh_CN'); +export default function transform(raw: any, t: (input: Text) => string) { let groupList: Text[] = []; let categoryList: Text[] = []; let ignoreComponents: IgnoreComponents = {}; @@ -136,7 +135,7 @@ export default function transform(raw: any) { const { sort } = stdComponent; const { group, category, priority = 0 } = sort; - const hasGroup = textExistIn(group, groupList); + const hasGroup = textExistIn(group, groupList, t); if (hasGroup) { if (!map[t(group)]) { @@ -319,7 +318,6 @@ export function pipe(arr: any[]) { }; } -export function textExistIn(text: Text, arr: Text[]) { - const t = getTextReader('zh_CN'); +export function textExistIn(text: Text, arr: Text[], t: (input: Text) => string) { return !!arr.find((item) => t(item) === t(text)); } diff --git a/packages/plugin-datasource-pane/package.json b/packages/plugin-datasource-pane/package.json index fe5a1db..898bd5f 100644 --- a/packages/plugin-datasource-pane/package.json +++ b/packages/plugin-datasource-pane/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-plugin-datasource-pane", - "version": "1.0.7", + "version": "1.0.11", "description": "低代码引擎数据源面板", "main": "lib/index.js", "files": [ @@ -74,7 +74,7 @@ "traverse": "^0.6.6", "xstate": "^4.26.0" }, - "homepage": "https://unpkg.com/@alilc/lowcode-plugin-datasource-pane@1.0.6/build/index.html", + "homepage": "https://unpkg.com/@alilc/lowcode-plugin-datasource-pane@1.0.11/build/index.html", "repository": { "type": "git", "url": "https://github.com/alibaba/lowcode-plugins.git", diff --git a/packages/plugin-datasource-pane/src/components/DataSourceForm/DataSourceForm.tsx b/packages/plugin-datasource-pane/src/components/DataSourceForm/DataSourceForm.tsx index 7dc035e..4597b79 100644 --- a/packages/plugin-datasource-pane/src/components/DataSourceForm/DataSourceForm.tsx +++ b/packages/plugin-datasource-pane/src/components/DataSourceForm/DataSourceForm.tsx @@ -42,11 +42,7 @@ const SCHEMA = { type: { title: '类型', type: 'string', - editable: false, readOnly: true, - hidden: true, - display: 'hidden', - visible: false, 'x-decorator': 'FormItem', 'x-component-props': { // labelWidth: 300, @@ -90,7 +86,7 @@ const SCHEMA = { type: 'string', title: '请求方法', required: true, - enum: ['GET', 'POST', 'OPTIONS', 'PUT', 'DELETE'].map((i) => ({ + enum: ['GET', 'POST', 'OPTIONS', 'PUT', 'PATCH', 'DELETE'].map((i) => ({ label: i, value: i, })), @@ -199,8 +195,10 @@ export class DataSourceForm extends PureComponent { + return new Promise((resolve, reject) => { + const { isCodeValid, code } = this.state; + + if (!isCodeValid) reject(new Error('导入格式有误')); + + // 只 resolve 通过 schema 校验的数据 + resolve(this.deriveValue(JSON.parse(code))); + }); + }; + private monacoRef: any; constructor(props: DataSourceImportPluginCodeProps) { @@ -75,7 +89,8 @@ export class DataSourceImportPluginCode extends PureComponent< (type) => type.type === dataSource.type, ); if (!dataSourceType) return false; - return ajv.validate(dataSourceType.schema, dataSource); + // 处理下默认为空的情况，向下兼容 + return ajv.validate(dataSourceType.schema || {}, dataSource); }); }; @@ -86,10 +101,11 @@ export class DataSourceImportPluginCode extends PureComponent< .getModelMarkers() .find((marker: editor.IMarker) => marker.owner === 'json') ) { + Message.success("检验成功，点击右上方确定完成导入！") this.setState({ isCodeValid: true }); - const model: any = _last(this.monacoRef.getModels()); - if (!model) return; - this.props.onImport?.(this.deriveValue(JSON.parse(model.getValue()))); + // const model: any = _last(this.monacoRef.getModels()); + // if (!model) return; + // this.props.onImport?.(this.deriveValue(JSON.parse(model.getValue()))); return; } } @@ -108,10 +124,14 @@ export class DataSourceImportPluginCode extends PureComponent< } }; - handleEditorDidMount = (isFullscreen, editor, monaco) => { - this.monacoRef = monaco?.editor; + /* @author daifuyang + ** @description：修复编辑器挂载事件 + */ + handleEditorDidMount = (editor: MonacoEditor, monaco: MonacoEditor) => { + this.monacoRef = editor?.editor; }; + render() { const { onCancel = _noop } = this.props; const { code, isCodeValid } = this.state; @@ -133,7 +153,7 @@ export class DataSourceImportPluginCode extends PureComponent<

diff --git a/packages/plugin-datasource-pane/src/components/Forms/form-lazy-obj.tsx b/packages/plugin-datasource-pane/src/components/Forms/form-lazy-obj.tsx index 45cc7a5..0d65f38 100644 --- a/packages/plugin-datasource-pane/src/components/Forms/form-lazy-obj.tsx +++ b/packages/plugin-datasource-pane/src/components/Forms/form-lazy-obj.tsx @@ -48,9 +48,15 @@ export const FormLazyObj = observer((props: FormLazyObjProps) => { setSelectedProperties((selectedProperties) => selectedProperties.concat(propertyKey)); }, []); + /* 改成formily内部支持 */ const handleRemove = useCallback((propertyKey) => { - setSelectedProperties((selectedProperties) => selectedProperties.filter((i) => i !== propertyKey)); - }, []); + field?.form?.query(propertyKey)?.take()?.setState((state) => { + state.visible = !state.visible; + }); + // setSelectedProperties((selectedProperties) => + // selectedProperties.filter((i) => i !== propertyKey) + // ); + }, [field]); const addition = useMemo(() => { if (properties.length === 0) return null; diff --git a/packages/plugin-datasource-pane/src/index.tsx b/packages/plugin-datasource-pane/src/index.tsx index 21f8935..838ada5 100644 --- a/packages/plugin-datasource-pane/src/index.tsx +++ b/packages/plugin-datasource-pane/src/index.tsx @@ -1,10 +1,10 @@ -import { ILowCodePluginContext } from '@alilc/lowcode-engine'; import DataSourcePanePlugin from './pane'; import { DataSourcePaneImportPlugin, DataSourceType, } from './types'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; export interface Options { importPlugins?: DataSourcePaneImportPlugin[]; @@ -13,7 +13,7 @@ export interface Options { } // TODO: 2.0插件传参修改，不支持直接options: Options -const plugin = (ctx: ILowCodePluginContext, options: Options) => { +const plugin = (ctx: IPublicModelPluginContext, options: Options) => { return { name: 'com.alibaba.lowcode.datasource.pane', width: 300, @@ -39,19 +39,15 @@ const plugin = (ctx: ILowCodePluginContext, options: Options) => { width: '300px', // title: '源码面板', }, - content: ( - - ), + content: DataSourcePanePlugin, + contentProps: { + importPlugins, + dataSourceTypes, + event: ctx.event, + project: ctx.project, + logger: ctx.logger, + setters: ctx.setters, + }, }); schemaDock && schemaDock.disable(); diff --git a/packages/plugin-datasource-pane/src/pane/DataSourcePane.tsx b/packages/plugin-datasource-pane/src/pane/DataSourcePane.tsx index aef0d81..bb74ecc 100644 --- a/packages/plugin-datasource-pane/src/pane/DataSourcePane.tsx +++ b/packages/plugin-datasource-pane/src/pane/DataSourcePane.tsx @@ -9,8 +9,6 @@ import { } from '@alilc/lowcode-datasource-types'; import { Button, Message, Dialog } from '@alifd/next'; import _isArray from 'lodash/isArray'; -import { HTML5Backend } from 'react-dnd-html5-backend'; -import { DndProvider } from 'react-dnd'; import { createStateMachine } from '../utils/stateMachine'; import { DataSourcePaneContext } from '../utils/panel-context'; import { DataSourceFilter } from '../components/DataSourceFilter'; @@ -95,7 +93,11 @@ export class DataSourcePane extends PureComponent< }); this.send({ type: 'UPDATE_DS', payload: this.props.initialSchema?.list }); } - + componentDidUpdate(newValue:DataSourcePaneProps) { + if (this.props.initialSchema !== newValue.initialSchema) { + this.send({ type: 'UPDATE_DS', payload: this.props.initialSchema?.list }); + } + } componentWillUnmount() { this.serviceS?.unsubscribe?.(); } @@ -350,54 +352,52 @@ export class DataSourcePane extends PureComponent< const isEmpty = current.context.dataSourceList.length === 0; return ( - -
-
- 数据源 - {helpLink && } -
- - +
+ 数据源 + {helpLink && } +
+ + +
+ { + return ( + i.id.indexOf(current.context.dataSourceListFilter.keyword) !== + -1 && + (!current.context.dataSourceListFilter.dataSourceType || + current.context.dataSourceListFilter.dataSourceType === + i.type) + ); + })} + onOperationClick={this.handleOperationClick} /> -
- { - return ( - i.id.indexOf(current.context.dataSourceListFilter.keyword) !== - -1 && - (!current.context.dataSourceListFilter.dataSourceType || - current.context.dataSourceListFilter.dataSourceType === - i.type) - ); - })} - onOperationClick={this.handleOperationClick} - /> -
- {this.renderDetail()}
- + {this.renderDetail()} +
); } } diff --git a/packages/plugin-datasource-pane/src/pane/index.tsx b/packages/plugin-datasource-pane/src/pane/index.tsx index 096463e..1e5f4be 100644 --- a/packages/plugin-datasource-pane/src/pane/index.tsx +++ b/packages/plugin-datasource-pane/src/pane/index.tsx @@ -7,6 +7,8 @@ import _get from 'lodash/get'; import _set from 'lodash/set'; import _isEmpty from 'lodash/isEmpty'; import _isFunction from 'lodash/isFunction'; +import { HTML5Backend } from 'react-dnd-html5-backend'; +import { DndProvider } from 'react-dnd'; import { EditorContext } from '../utils/editor-context'; import { DataSourcePane } from './DataSourcePane'; import { DataSourceFilter } from '../components/DataSourceFilter'; @@ -32,8 +34,6 @@ export interface DataSource { list: InterpretDataSourceConfig[]; } -const stateService = createStateService(); - export { DataSourceForm } from '../components/DataSourceForm'; const PLUGIN_NAME = 'dataSourcePane'; @@ -83,6 +83,8 @@ export default class DataSourcePanePlugin extends PureComponent< exportPlugins: [], }; + stateService = createStateService(); + state = { active: false, panelKey: 1, @@ -110,11 +112,11 @@ export default class DataSourcePanePlugin extends PureComponent< } componentDidMount() { - stateService.start(); + this.stateService.start(); } componentWillUnmount() { - stateService.stop(); + this.stateService.stop(); } handleSchemaChange = (schema: DataSource) => { @@ -166,32 +168,34 @@ export default class DataSourcePanePlugin extends PureComponent< return ( - - { /* @ts-ignore */ } - >, - importPlugins as unknown as Array>, - 'name', - )} - exportPlugins={mergeTwoObjectListByKey( - BUILTIN_IMPORT_PLUGINS as unknown as Array>, - exportPlugins as unknown as Array>, - 'name', - )} - dataSourceTypes={dataSourceTypes} - initialSchema={schema} - onSchemaChange={this.handleSchemaChange} - /> - + + + { /* @ts-ignore */ } + >, + importPlugins as unknown as Array>, + 'name', + )} + exportPlugins={mergeTwoObjectListByKey( + BUILTIN_IMPORT_PLUGINS as unknown as Array>, + exportPlugins as unknown as Array>, + 'name', + )} + dataSourceTypes={dataSourceTypes} + initialSchema={schema} + onSchemaChange={this.handleSchemaChange} + /> + + ); diff --git a/packages/plugin-manual/build.json b/packages/plugin-manual/build.json index 1edfc2f..1767fef 100644 --- a/packages/plugin-manual/build.json +++ b/packages/plugin-manual/build.json @@ -3,7 +3,8 @@ [ "@alilc/build-plugin-alt", { - "type": "plugin" + "type": "plugin", + "inject": true } ], [ diff --git a/packages/plugin-manual/package.json b/packages/plugin-manual/package.json index 84a6bfd..700637d 100644 --- a/packages/plugin-manual/package.json +++ b/packages/plugin-manual/package.json @@ -1,7 +1,7 @@ { "name": "@alilc/lowcode-plugin-manual", "author": "humphry.huang9@gmail.com", - "version": "1.0.3", + "version": "1.0.4", "description": "低代码产品使用手册", "main": "lib/index.js", "module": "es/index.js", @@ -15,6 +15,7 @@ "pub": "npm publish" }, "publishConfig": { + "registry": "https://registry.npmjs.org/", "access": "public" }, "dependencies": {}, diff --git a/packages/plugin-manual/src/index.tsx b/packages/plugin-manual/src/index.tsx index 2c90773..cf85189 100644 --- a/packages/plugin-manual/src/index.tsx +++ b/packages/plugin-manual/src/index.tsx @@ -1,20 +1,8 @@ -import * as React from 'react'; -import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import { IconQuestion } from './icon'; -import { Dialog } from '@alifd/next'; -import { Documents } from './popup'; -const PluginManual = (ctx: ILowCodePluginContext) => { +const PluginManual = (ctx: IPublicModelPluginContext) => { return { - // 插件名，注册环境下唯一 - name: 'PluginManual', - // 依赖的插件（插件名数组） - dep: [], - // 插件对外暴露的数据和方法 - exports() { - return {}; - }, - // 插件的初始化函数，在引擎初始化之后会立刻调用 init() { // 往引擎增加面板 ctx.skeleton.add({ @@ -26,17 +14,7 @@ const PluginManual = (ctx: ILowCodePluginContext) => { icon: IconQuestion, description: '如何使用', onClick() { - Dialog.show({ - title: '低代码产品使用文档', - content: ( - - ), - height: window.innerHeight - 100 + 'px', - style: { - width: window.innerWidth - 300, - }, - footer: false, - }); + window.open('https://lowcode-engine.cn/site/docs/demoUsage/intro', '_blank').focus(); }, }, }); diff --git a/packages/plugin-manual/src/popup.tsx b/packages/plugin-manual/src/popup.tsx deleted file mode 100644 index 3710ddc..0000000 --- a/packages/plugin-manual/src/popup.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import * as React from 'react'; -import { useEffect, useState } from 'react'; -import { material } from '@alilc/lowcode-engine'; -import { Tree, Tag, Loading } from '@alifd/next'; - -import { IconBug, IconLink } from './icon'; - -export function Documents() { - const [menu, setMenu] = useState([] as Array<{ title: string, url: string }>) - const [loading, setLoading] = useState(false) - const [selection, setSelection] = useState([] as string[]) - - useEffect(() => { - setLoading(true) - fetch('https://lowcode-engine.cn/api/get_usage') - .then((res) => res.json()) - .then((val) => { - const menu = val.data.filter((a: any) => !isNaN(parseInt(a.title))) - menu.sort((a: any, b: any) => parseInt(a.title) > parseInt(b.title) ? 1 : -1) - setMenu(menu) - setSelection(menu.length ? ['0'] : []) - }) - .catch(err => console.error(err)) - .finally(() => { - setLoading(false) - }) - }, []) - - return ( - -
-
- {!loading && ( - { - if (Array.isArray(newSelection) && newSelection.length > 0) { - setSelection(newSelection) - } - }} - isNodeBlock={{ - defaultPadingLeft: 1, - indent: 1, - }} - style={{ lineHeight: '26px' }} - > - {menu.map((item, index) => ( - - ))} - - - {IconLink} - 低代码引擎技术文档 - - )} - onClick={() => { - window.open('https://lowcode-engine.cn/doc') - }} - /> - - {IconLink} - engine - - {getVerionOf('ali-lowcode/ali-lowcode-engine') ?? (window as any).AliLowCodeEngine.version ?? '-'} - - - )} - onClick={() => { - window.open('https://lowcode-engine.cn/doc?url=engine-changelog') - }} - /> - - {IconLink} - ext - - {getVerionOf('ali-lowcode/lowcode-engine-ext') ?? (window as any).AliLowCodeEngineExt.version ?? '-'} - - - )} - onClick={() => { - window.open('https://lowcode-engine.cn/doc?url=engine-ext-changelog') - }} - /> - - {IconBug} - 提交 bug - - )} - onClick={() => { - const assets = material.getAssets() - const message = `## 复现截图 - -## 复现流程与链接 - -## 期望结果 - -## 环境信息 - -- 引擎版本 ${getVerionOf('ali-lowcode/ali-lowcode-engine') ?? (window as any).AliLowCodeEngine.version ?? '-'} -- ext 版本 ${getVerionOf('ali-lowcode/lowcode-engine-ext') ?? (window as any).AliLowCodeEngineExt.version ?? '-'} -- 物料 -${assets.packages - .filter((item: any) => !!item.package) - .map((item: any) => (` - ${item.package}${item.version ? '@' + item.version : ''}`.replace(/@/g, '﹫'))) - .join('\n') -}` - window.open(`https://github.com/alibaba/lowcode-engine/issues/new?body=${ - encodeURIComponent(message) - }`) - }} - /> - - - )} -
- {menu[+selection[0]]?.url && ( -