{MyWorkbench}
;
+ return () => {
+ instance.dispose();
+ };
+ }, []);
+ return ;
}
window.console.log(
`%c dt-sql-parser: ${dependencies['dt-sql-parser']} \n\n monaco-sql-languages: ${version}`,
'font-family: Cabin, Helvetica, Arial, sans-serif;text-align: left;font-size:26px;color:#B21212;'
);
-
-export default App;
diff --git a/website/src/assets/checkDemo.svg b/website/src/assets/checkDemo.svg
new file mode 100644
index 00000000..29a88f33
--- /dev/null
+++ b/website/src/assets/checkDemo.svg
@@ -0,0 +1,10 @@
+
diff --git a/website/src/assets/checkFile.svg b/website/src/assets/checkFile.svg
new file mode 100644
index 00000000..7031d395
--- /dev/null
+++ b/website/src/assets/checkFile.svg
@@ -0,0 +1,10 @@
+
diff --git a/website/src/assets/quickStart.svg b/website/src/assets/quickStart.svg
new file mode 100644
index 00000000..cd9d1f1f
--- /dev/null
+++ b/website/src/assets/quickStart.svg
@@ -0,0 +1,12 @@
+
diff --git a/website/src/components/tabs/index.tsx b/website/src/components/tabs/index.tsx
new file mode 100644
index 00000000..091d8a32
--- /dev/null
+++ b/website/src/components/tabs/index.tsx
@@ -0,0 +1,51 @@
+import { components } from '@dtinsight/molecule';
+import classNames from 'classnames';
+import { useState } from 'react';
+
+import './style.css';
+
+interface ITab {
+ id: string;
+ key: string;
+ name: string;
+ children: React.ReactNode;
+}
+
+interface IProps {
+ data: ITab[];
+}
+const { Header, PanelItem, Prevent } = components;
+const Tabs = ({ data }: IProps) => {
+ const [currentId, setCurrentId] = useState
+
+
+ {data.map((p) => (
+ handelChangeTab(p.id)}
+ />
+ ))}
+
+
+
+ );
+};
+
+export default Tabs;
diff --git a/website/src/components/tabs/style.css b/website/src/components/tabs/style.css
new file mode 100644
index 00000000..89fb25f8
--- /dev/null
+++ b/website/src/components/tabs/style.css
@@ -0,0 +1,45 @@
+.mo-sidebar__container .mo-sidebar__header {
+ height: 0px !important;
+}
+
+.tabs-header {
+ margin: 8px 0;
+ width: 100%;
+ height: 38px;
+}
+
+.tabs-item {
+ color: var(--panelTitle-inactiveForeground);
+ font-size: 14px;
+ font-weight: 400;
+ padding: 8px 12px;
+ margin: 0 4px;
+ text-transform: uppercase;
+ user-select: none;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+ white-space: nowrap;
+ cursor: pointer;
+}
+
+.tabs-item-active {
+ color: var(--panelTitle-activeForeground);
+ outline: var(--contrastActiveBorder, unset) solid 1px;
+}
+
+.tabs-item-active::after {
+ background-color: #f9f9fa;
+ bottom: 1px;
+ content: ' ';
+ height: 1px;
+ left: 0;
+ position: absolute;
+ width: 100%;
+}
+
+.tabs-content {
+ padding: 0 8px;
+}
diff --git a/website/src/components/tooltip/index.tsx b/website/src/components/tooltip/index.tsx
new file mode 100644
index 00000000..23becd59
--- /dev/null
+++ b/website/src/components/tooltip/index.tsx
@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import './style.css';
+
+interface IProps {
+ children: React.ReactNode;
+ values: { href: string; title: string }[];
+}
+
+const Tooltip = ({ children, values }: IProps) => {
+ useEffect(() => {
+ const tooltip = document.querySelector('.tooltip');
+ if (!tooltip) return;
+ tooltip.addEventListener('mouseenter', () => {
+ const content = document.querySelector('.tooltip-content');
+ if (!content) return;
+ content.classList.add('tooltip-show');
+ });
+ tooltip.addEventListener('mouseleave', () => {
+ const content = document.querySelector('.tooltip-content');
+ if (!content) return;
+ content.classList.remove('tooltip-show');
+ });
+ }, []);
+ return (
+
+ {getCurrentContent()}
+
+
+
+ );
+};
+
+export default Tooltip;
diff --git a/website/src/components/tooltip/style.css b/website/src/components/tooltip/style.css
new file mode 100644
index 00000000..62438396
--- /dev/null
+++ b/website/src/components/tooltip/style.css
@@ -0,0 +1,62 @@
+.tooltip {
+ cursor: pointer;
+}
+
+.tooltip .tooltip-content {
+ opacity: 0;
+ visibility: hidden;
+ position: absolute;
+ transition: opacity 0.3s ease;
+}
+
+.tooltip .tooltip-show {
+ opacity: 1;
+ visibility: visible;
+ display: flex;
+ padding: 12px 16px 16px 16px;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 4px;
+ align-self: stretch;
+
+ position: absolute;
+ bottom: 15px;
+ left: 2px;
+ border-radius: 4px;
+ z-index: 99;
+ transition: opacity 0.3s ease;
+}
+
+.tooltip .tooltip-content li {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.tooltip .tooltip-content a {
+ color: #ffffff;
+}
+
+.tooltip .tooltip-content::before,
+.tooltip .tooltip-content::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ background: #161616;
+ z-index: -1;
+}
+
+.tooltip .tooltip-content::before {
+ clip-path: inset(0 0 5px 0 round 5px);
+}
+
+.tooltip .tooltip-content::after {
+ clip-path: polygon(
+ calc(12% - 5px) calc(100% - 5px),
+ calc(12% + 5px) calc(100% - 5px),
+ 12% 100%
+ );
+}
diff --git a/website/src/consts/index.ts b/website/src/consts/index.ts
new file mode 100644
index 00000000..d8c5252d
--- /dev/null
+++ b/website/src/consts/index.ts
@@ -0,0 +1,57 @@
+export const QUICK_GITHUB = 'quick.github';
+
+export const FILE_PATH = 'file.path';
+
+export const PARSE_LANGUAGE = 'parse.language';
+
+export const ACTIVITY_FOLDER = 'activity.folder';
+
+export const ACTIVITY_SQL = 'activity.sql';
+
+export const ACTIVITY_API = 'activity.api';
+
+export const SOURCE_FILE = 'activity.source.file';
+
+export const SOURCE_OUTLINE = 'activity.source.outline';
+
+export const QUICK_GITHUB_HREF = [
+ {
+ href: 'https://github.com/DTStack/dt-sql-parser',
+ title: 'dt-sql-parser'
+ },
+ {
+ href: 'https://github.com/DTStack/monaco-sql-languages',
+ title: 'monaco-sql-languages'
+ },
+ {
+ href: 'https://github.com/DTStack/dt-react-monaco-editor',
+ title: 'dt-react-monaco-editor'
+ }
+];
+
+export const SQL_LANGUAGES = [
+ 'HiveSQL',
+ 'SparkSQL',
+ 'FlinkSQL',
+ 'MySQL',
+ 'PGSQL',
+ 'TrinoSQL',
+ 'ImpalaSQL'
+];
+
+export const defaultLanguage = SQL_LANGUAGES[0];
+
+export const defaultEditorTab = {
+ id: `fixedTab`,
+ name: defaultLanguage,
+ data: {
+ value: ``,
+ language: defaultLanguage.toLowerCase()
+ }
+};
+
+export const defaultLanguageStatusItem = {
+ id: `fixedStatusItem`,
+ name: defaultLanguage,
+ sortIndex: 3
+};
diff --git a/website/src/extensions/actions/index.ts b/website/src/extensions/actions/index.ts
new file mode 100644
index 00000000..75154218
--- /dev/null
+++ b/website/src/extensions/actions/index.ts
@@ -0,0 +1,43 @@
+import { IContributeType, IExtension, IMenuItemProps, UniqueId } from '@dtinsight/molecule';
+import SaveFileAction from './ saveAction';
+import { concatMenu } from '@dtinsight/molecule/esm/utils';
+
+export const ExtendsActions: IExtension = {
+ id: 'ExtendsActions',
+ name: 'Extend Actions',
+ contributes: {
+ [IContributeType.Commands]: [SaveFileAction]
+ },
+ activate: function (molecule): void {
+ appendActionGroupBy(molecule.builtin.getConstants().MENUBAR_ITEM_EDIT)
+ .with(SaveFileAction)
+ .exhaust();
+
+ function appendActionGroupBy(parentId: UniqueId) {
+ const items: IMenuItemProps[] = [];
+ return new (class {
+ with = (ctor: { ID: string }) => {
+ const keybinding = molecule.action.queryGlobalKeybinding(ctor.ID);
+
+ items.push({
+ id: ctor.ID,
+ name: molecule.locale.localize(ctor.ID, ctor.ID),
+ keybinding: keybinding
+ ? molecule.action.convertSimpleKeybindingToString(keybinding)
+ : undefined
+ });
+ return this;
+ };
+ exhaust = () => {
+ const menuItems = concatMenu(
+ molecule.menuBar.get(parentId)?.children || [],
+ items
+ );
+ molecule.menuBar.update(parentId, () => ({
+ children: menuItems
+ }));
+ };
+ })();
+ }
+ }
+};
diff --git "a/website/src/extensions/actions/\302\240saveAction.ts" "b/website/src/extensions/actions/\302\240saveAction.ts"
new file mode 100644
index 00000000..6f744b75
--- /dev/null
+++ "b/website/src/extensions/actions/\302\240saveAction.ts"
@@ -0,0 +1,38 @@
+import { BaseAction } from '@dtinsight/molecule/esm/glue';
+import { CATEGORIES, KeyChord, KeyCode, KeyMod } from '@dtinsight/molecule/esm/monaco';
+import { IMoleculeContext, KeybindingWeight } from '@dtinsight/molecule/esm/types';
+
+// todo： 添加快捷指令， cmd + s 保存文件；
+export default class SaveFileAction extends BaseAction {
+ static readonly ID = 'editor.item.saveFile';
+
+ constructor(private molecule: IMoleculeContext) {
+ super({
+ id: SaveFileAction.ID,
+ label: molecule.locale.localize('editor.item.saveFile', 'Save File'),
+ title: molecule.locale.localize('editor.item.saveFile', 'Save File'),
+ category: CATEGORIES.Developer,
+ alias: 'Save File',
+ precondition: undefined,
+ f1: true,
+ keybinding: {
+ when: undefined,
+ weight: KeybindingWeight.WorkbenchContrib,
+ primary: KeyChord(KeyMod.CtrlCmd | KeyCode.KeyS)
+ }
+ });
+ }
+ run() {
+ const curGroup = this.molecule.editor.getCurrentGroup()?.id || -1;
+ const curTab = this.molecule.editor.getCurrentTab();
+ if (!curTab) return;
+ // todo: 修改当前的 tab modified 字段为 false ，并且将当前内容存储在 tab 内；
+ this.molecule.editor.updateTab(
+ {
+ ...curTab,
+ modified: false
+ },
+ curGroup
+ );
+ }
+}
diff --git a/website/src/extensions/index.ts b/website/src/extensions/index.ts
new file mode 100644
index 00000000..5e3f7cce
--- /dev/null
+++ b/website/src/extensions/index.ts
@@ -0,0 +1,7 @@
+import { mainExt } from './main';
+import { viewExt } from './view';
+import { ExtendsExplorer } from './view/explorer';
+import { ExtendsFolderTree } from './view/folderTree';
+import { ExtendsActions } from './actions';
+
+export default [viewExt, mainExt, ExtendsExplorer, ExtendsFolderTree, ExtendsActions];
diff --git a/website/src/extensions/main/index.tsx b/website/src/extensions/main/index.tsx
new file mode 100644
index 00000000..ec586b27
--- /dev/null
+++ b/website/src/extensions/main/index.tsx
@@ -0,0 +1,382 @@
+import {
+ IContributeType,
+ IEditorTab,
+ IExtension,
+ IMoleculeContext,
+ TabGroup,
+ UniqueId
+} from '@dtinsight/molecule';
+import lips from '@jcubic/lips';
+
+import * as monaco from 'monaco-editor';
+
+import Welcome from '@/workbench/welcome';
+import {
+ FILE_PATH,
+ QUICK_GITHUB,
+ PARSE_LANGUAGE,
+ ACTIVITY_FOLDER,
+ ACTIVITY_SQL,
+ ACTIVITY_API,
+ SQL_LANGUAGES
+} from '@/consts';
+import QuickGithub from '@/workbench/quickGithub';
+import SourceSpace from '@/workbench/sourceSpace';
+import UnitTest from '@/workbench/unitTest';
+import ApiDocPage from '@/workbench/apiDocPage';
+import { debounce } from '@/utils/tool';
+import { LanguageService } from '../../../../esm/languageService';
+import { ParseError } from 'dt-sql-parser';
+import { ProblemsPaneView } from '@/workbench/problems';
+import ProblemStore from '@/workbench/problems/clients/problemStore';
+import { ProblemsService } from '@/workbench/problems/services';
+import { ProblemsController } from '@/workbench/problems/controllers';
+
+const problemsService = new ProblemsService();
+
+export const mainExt: IExtension = {
+ id: 'mainExt',
+ name: 'mainExt',
+ contributes: {
+ [IContributeType.Modules]: {
+ menuBar: null
+ }
+ // [IContributeType.Grammar]: grammars
+ },
+ activate(molecule) {
+ const languageService = new LanguageService();
+ problemsService.onSelect((item) => {
+ // 写入展开的数组内； 当展开的时候 root 的icon 进行变换
+ problemsService.toggleRoot(item);
+ });
+
+ molecule.colorTheme.update('Default Dark+', (data) => ({
+ colors: {
+ ...data.colors,
+ 'statusBar.background': '#252526',
+ 'statusBar.border': '#333',
+ 'panel.background': '#202020',
+ 'sideBar.background': '#252526',
+ 'editor.background': '#161616'
+ }
+ }));
+ molecule.editor.setEntry({children}
+ -
+ {values.map((item, index) => (
+
- + + {item.title} + + + + ))} +
+
+
+ )
+ },
+ {
+ id: ACTIVITY_SQL,
+ name: '单测 SQL',
+ sortIndex: 2,
+ alignment: 'top',
+ render: () => (
+
+
+
+ )
+ },
+ {
+ id: ACTIVITY_API,
+ name: '接口文档',
+ sortIndex: 3,
+ alignment: 'top',
+ render: () => (
+
+
+
+ )
+ }
+ ]);
+
+ molecule.panel.add({
+ id: 'problem',
+ name: '问题',
+ sortIndex: 2,
+ render: () => {
+ return (
+
-
- );
- }
-}
diff --git a/website/src/extensions/workbench/utils.ts b/website/src/extensions/workbench/utils.ts
deleted file mode 100644
index e635b7f5..00000000
--- a/website/src/extensions/workbench/utils.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export function debounce
-
- - Select a language:{' '} -
- {this.renderColorThemes()} - -接口文档
;
+};
+
+export default ApiDocPage;
diff --git a/website/src/workbench/problems/clients/context.ts b/website/src/workbench/problems/clients/context.ts
new file mode 100644
index 00000000..d1e3f601
--- /dev/null
+++ b/website/src/workbench/problems/clients/context.ts
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const Context = createContext({} as any);
diff --git a/website/src/workbench/problems/clients/paneView/index.tsx b/website/src/workbench/problems/clients/paneView/index.tsx
new file mode 100644
index 00000000..be3c7241
--- /dev/null
+++ b/website/src/workbench/problems/clients/paneView/index.tsx
@@ -0,0 +1,91 @@
+import { memo, useContext, useEffect, useState } from 'react';
+import { convertNaNValue, getBEMElement, prefixClaName } from '@/utils/tool';
+
+import { Tree as TreeView, Icon, ScrollBar } from '@dtinsight/molecule/esm/client/components';
+import { useLocale } from '@dtinsight/molecule/esm/client/hooks';
+import { Context } from '../context';
+import { MarkerSeverity } from '../../model';
+import '../../style.scss';
+
+const defaultClassName = prefixClaName('problems');
+const treeClassName = getBEMElement(defaultClassName, 'treeview');
+const treeNodeClassName = getBEMElement(treeClassName, 'treeNode');
+const treeNodeBadgeClassName = getBEMElement(treeNodeClassName, 'badge');
+const treeLeafClassName = getBEMElement(treeClassName, 'treeLeaf');
+const treeLeafSubInfoClassName = getBEMElement(treeLeafClassName, 'subInfo');
+
+function ProblemsPaneView({ problemsService }: { problemsService: any }) {
+ const localize = useLocale();
+ const [data, setData] = useState(() => problemsService.get());
+
+ useEffect(() => {
+ const unsubscribe = problemsService.subscribeData(setData);
+ return unsubscribe;
+ }, []);
+ const context = useContext(Context);
+ const { onselect } = context;
+
+ if (!data?.length) {
+ return (
+
+ {localize(
+ 'panel.problems.empty',
+ 'No problems have been detected in the workspace.'
+ )}
+
+ );
+ }
+
+ const getIcon = (status: number) => {
+ switch (status) {
+ case MarkerSeverity.Error: {
+ return
+ {
+ // todo： item 参数带修复 ts类型
+ const value = item.value;
+ const children = item.children;
+ return !item.isLeaf ? (
+
+ {item?.name}
+ {children?.length}
+
+ ) : (
+
+ {getIcon(value.status)}
+ {value.message}
+ {value.code}
+
+ [{convertNaNValue(value.startLineNumber)},
+ {convertNaNValue(value.startColumn)}]
+
+
+ );
+ }}
+ onSelect={onselect}
+ />
+
+
+
+
+
+
+ );
+}
diff --git a/website/src/workbench/sourceSpace/components/outline/index.ts b/website/src/workbench/sourceSpace/components/outline/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/website/src/workbench/sourceSpace/components/parser/index.tsx b/website/src/workbench/sourceSpace/components/parser/index.tsx
new file mode 100644
index 00000000..508bf985
--- /dev/null
+++ b/website/src/workbench/sourceSpace/components/parser/index.tsx
@@ -0,0 +1,58 @@
+import { IMenuItemProps, IMoleculeContext, slots, UniqueId } from '@dtinsight/molecule';
+
+import { Tree } from '@dtinsight/molecule/esm/client/components';
+import { randomId } from '@/utils/tool';
+
+import './style.css';
+import { addFile, initMolecule, openFile, updateExplorer } from '@/services/fileManagerService';
+
+export interface IFile {
+ name: string;
+ icon: string;
+}
+
+const { Explorer } = slots;
+
+const Parser = ({ molecule }: { molecule: IMoleculeContext }) => {
+ initMolecule(molecule);
+ const handleAddFile = (item: IMenuItemProps) => {
+ const { id } = item;
+ const curSQL = (id as string).split('_')?.[1];
+ const fileName = `${curSQL.toLocaleLowerCase()}_file_${randomId()}.sql`;
+ addFile(item);
+ const { explorerData } =
+ updateExplorer({
+ name: fileName,
+ icon: 'file',
+ id: fileName,
+ language: curSQL
+ }) || {};
+
+ molecule.explorer.update({
+ id: curSQL,
+ render: () => {
+ return (
+ explorerData && (
+
+
+ );
+};
+
+export default Parser;
diff --git a/website/src/workbench/sourceSpace/components/parser/style.css b/website/src/workbench/sourceSpace/components/parser/style.css
new file mode 100644
index 00000000..6adfbbfd
--- /dev/null
+++ b/website/src/workbench/sourceSpace/components/parser/style.css
@@ -0,0 +1,29 @@
+.folder-tree .mo-tree .mo-tree__treenode {
+ display: flex;
+ width: 252px;
+ align-items: center;
+ gap: 8px;
+ border-radius: 4px;
+ background: #161616;
+ /* Base/Medium */
+ font-family: 'PingFang SC';
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 22px; /* 157.143% */
+}
+.folder-tree {
+ height: calc(100vh - 78px);
+}
+.folder-tree .mo-split {
+ margin-top: 3px;
+}
+
+.folder-tree .mo-collapse .mo-collapse__pane {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ top: 3px;
+ border-radius: 4px;
+ background-color: #161616;
+}
diff --git a/website/src/workbench/sourceSpace/index.tsx b/website/src/workbench/sourceSpace/index.tsx
new file mode 100644
index 00000000..1d2ec8cd
--- /dev/null
+++ b/website/src/workbench/sourceSpace/index.tsx
@@ -0,0 +1,22 @@
+import Tabs from '@/components/tabs';
+import { SOURCE_FILE } from '@/consts';
+import Parser from './components/parser';
+import { IMoleculeContext } from '@dtinsight/molecule';
+const SourceSpace = ({ molecule }: { molecule: IMoleculeContext }) => {
+ const items = [
+ {
+ id: SOURCE_FILE,
+ key: SOURCE_FILE,
+ name: '文件',
+ children:
+
+ );
+};
+
+export default SourceSpace;
diff --git a/website/src/workbench/unitTest/index.tsx b/website/src/workbench/unitTest/index.tsx
new file mode 100644
index 00000000..6744032c
--- /dev/null
+++ b/website/src/workbench/unitTest/index.tsx
@@ -0,0 +1,83 @@
+import Tabs from '@/components/tabs';
+import { SOURCE_FILE } from '@/consts';
+import { useUnitCatalog } from '@/hooks/useUnitCatalog';
+import { openFile } from '@/utils';
+import { components, IMoleculeContext } from '@dtinsight/molecule';
+import { Progress } from '@dtinsight/molecule/esm/client/components';
+import { useConnector } from '@dtinsight/molecule/esm/client/hooks';
+import { FolderTree } from '@dtinsight/molecule/esm/client/slots';
+import { FolderTreeEvent } from '@dtinsight/molecule/esm/models/folderTree';
+import { searchById } from '@dtinsight/molecule/esm/utils';
+import { TreeNodeModel } from '@dtinsight/molecule/esm/utils/tree';
+import { createElement, useEffect } from 'react';
+// sql-parser 的 unit 文档
+const UnitTest = ({ molecule }: { molecule: IMoleculeContext }) => {
+ const sidebar = useConnector('sidebar');
+ const pane = sidebar.data.find(searchById(sidebar.current));
+
+ const { loading } = useUnitCatalog({
+ callback: (tree) => {
+ molecule.folderTree.add(tree, 'unitTest');
+ }
+ });
+
+ useEffect(() => {
+ molecule.explorer.update({
+ id: 'unitTest',
+ // todo 这里的 any 需要看下可以具体定义不
+ render: (panel) => {
+ return createElement(FolderTree as any, { panel });
+ }
+ });
+ }, []);
+
+ const handleSelect = (treeNode: TreeNodeModel
+
+
+ );
+};
+
+export default UnitTest;
diff --git a/website/src/workbench/welcome/index.tsx b/website/src/workbench/welcome/index.tsx
new file mode 100644
index 00000000..c400af91
--- /dev/null
+++ b/website/src/workbench/welcome/index.tsx
@@ -0,0 +1,79 @@
+import './style.css';
+import { components, IEditorTab, IMoleculeContext } from '@dtinsight/molecule';
+import quickStart from '@/assets/quickStart.svg';
+import checkDemo from '@/assets/checkDemo.svg';
+import { ACTIVITY_API, ACTIVITY_FOLDER, ACTIVITY_SQL, defaultLanguage } from '@/consts';
+import { randomId } from '@/utils/tool';
+
+import { Tree } from '@dtinsight/molecule/esm/client/components';
+import { initMolecule, openFile, updateExplorer } from '@/services/fileManagerService';
+import { IFile } from '../sourceSpace/components/parser';
+
+const Welcome = ({ context: molecule }: { context: IMoleculeContext }) => {
+ initMolecule(molecule);
+ const switchWorkspaceView = (key: string) => {
+ switch (key) {
+ case 'quickStart': {
+ molecule.sidebar.setCurrent(ACTIVITY_FOLDER);
+ molecule.activityBar.setCurrent(ACTIVITY_FOLDER);
+ molecule.explorer.setActive([defaultLanguage]);
+ const fileName = `${defaultLanguage.toLocaleLowerCase()}_file_${randomId()}.sql`;
+ const initFile = {
+ name: fileName,
+ icon: 'file',
+ id: fileName,
+ language: defaultLanguage
+ };
+ openFile(initFile);
+ handleUpdateExplorer(initFile);
+ molecule.editor.setEntry(null);
+ break;
+ }
+ case 'viewApiDoc':
+ molecule.sidebar.setCurrent(ACTIVITY_API);
+ molecule.activityBar.setCurrent(ACTIVITY_API);
+ break;
+ case 'checkDemo':
+ molecule.sidebar.setCurrent(ACTIVITY_SQL);
+ molecule.activityBar.setCurrent(ACTIVITY_SQL);
+ break;
+ default:
+ break;
+ }
+ };
+
+ const handleUpdateExplorer = (file: IEditorTab
+
+ );
+};
+
+export default Welcome;
diff --git a/website/src/workbench/welcome/style.css b/website/src/workbench/welcome/style.css
new file mode 100644
index 00000000..12a611b8
--- /dev/null
+++ b/website/src/workbench/welcome/style.css
@@ -0,0 +1,51 @@
+.welcome {
+ width: 100%;
+}
+
+.welcome .welcome-header {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 16px 20px 8px 20px;
+ border-bottom: 1px solid #333;
+
+ color: #f9f9fa;
+ font-family: 'PingFang SC';
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 22px;
+}
+
+.welcome ul {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 159px;
+ gap: 36px;
+ cursor: pointer;
+}
+
+.welcome ul li {
+ list-style: none;
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.3);
+ display: flex;
+ width: 156px;
+ height: 134px;
+ padding: 24px 40px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 16px;
+ transition: all 0.3s ease-out;
+}
+
+.welcome ul li:hover {
+ transform: scale(1.1);
+ border-radius: 12px;
+ border: 1px solid rgba(255, 255, 255, 0.8);
+ background: rgba(255, 255, 255, 0.5);
+ box-shadow: 0px 4px 20px 0px rgba(167, 183, 212, 0.2);
+ transition: all 0.3s ease-out;
+}
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
new file mode 100644
index 00000000..27a5d825
--- /dev/null
+++ b/website/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ theme: {
+ extend: {}
+ },
+ plugins: []
+};
diff --git a/website/tsconfig.json b/website/tsconfig.json
index d9051027..43d65d2f 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -1,9 +1,9 @@
{
"compilerOptions": {
"baseUrl": ".",
- "target": "ES2020",
+ "target": "es2021",
"useDefineForClassFields": true,
- "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "lib": ["es2021", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
@@ -21,7 +21,8 @@
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true,
"paths": {
- "monaco-sql-languages/*": ["../"]
+ "monaco-sql-languages/*": ["../"],
+ "@/*": ["src/*"]
}
},
"include": ["src"],
diff --git a/website/vite.config.ts b/website/vite.config.ts
index 31cc2c73..aee4f638 100644
--- a/website/vite.config.ts
+++ b/website/vite.config.ts
@@ -1,14 +1,24 @@
import { resolve } from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
+import { mockDevServerPlugin } from 'vite-plugin-mock-dev-server';
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [react()],
+ plugins: [
+ react({
+ jsxRuntime: 'automatic'
+ }),
+ ...mockDevServerPlugin({
+ dir: './src/',
+ include: 'mock/**/*.mock.{ts,js,cjs,mjs,json,json5}'
+ })
+ ],
resolve: {
alias: {
'monaco-editor': resolve('node_modules/monaco-editor'),
- 'monaco-sql-languages': resolve('../')
+ 'monaco-sql-languages': resolve('../'),
+ '@': resolve(__dirname, 'src')
}
},
base: '/monaco-sql-languages/',
@@ -19,8 +29,8 @@ export default defineConfig({
outDir: resolve(__dirname, '../docs')
},
server: {
- fs: {
- allow: ['..']
+ proxy: {
+ '^/api': 'http://example.com/'
}
}
});
+ monaco-sql-languages
+
+ -
+
- switchWorkspaceView('quickStart')}>
+
+ 快速开始 +
+ - switchWorkspaceView('viewApiDoc')}>
+
+ 接口文档 +
+ - switchWorkspaceView('checkDemo')}>
+
+