[Feature] Introduce Playground

paimon-web-ui-new/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "dart-sass": "^1.25.0",
+    "monaco-editor": "^0.43.0",
     "pinia": "^2.1.6",
     "pinia-plugin-persistedstate": "^3.2.0",
     "sass": "^1.66.1",

paimon-web-ui-new/src/components/monaco-editor/index.tsx

@@ -0,0 +1,126 @@
+/* Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License. */
+
+import * as monaco from 'monaco-editor'
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import { editorProps } from './type'
+import { useConfigStore } from '@/store/config'
+
+// @ts-ignore: worker
+self.MonacoEnvironment = {
+  getWorker(_: string, label: string) {
+    if (label === 'json') {
+      return new jsonWorker()
+    }
+    if (['css', 'scss', 'less'].includes(label)) {
+      return new cssWorker()
+    }
+    if (['html', 'handlebars', 'razor'].includes(label)) {
+      return new htmlWorker()
+    }
+    if (['typescript', 'javascript'].includes(label)) {
+      return new tsWorker()
+    }
+    return new EditorWorker()
+  }
+}
+
+export default defineComponent({
+  name: 'MonacoEditor',
+  props: editorProps,
+  emits: ['update:modelValue', 'change', 'EditorMounted'],
+  setup(props, { emit }) {
+    const configStore = useConfigStore()
+    const monacoEditorThemeRef = ref(configStore.getCurrentTheme === 'dark' ? 'vs-dark' : 'vs')
+    let editor: monaco.editor.IStandaloneCodeEditor
+    const codeEditBox = ref()
+    const init = () => {
+      monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+        noSemanticValidation: true,
+        noSyntaxValidation: false
+      })
+      monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+        target: monaco.languages.typescript.ScriptTarget.ES2020,
+        allowNonTsExtensions: true
+      })
+      editor = monaco.editor.create(codeEditBox.value, {
+        value: props.modelValue,
+        language: props.language,
+        theme: monacoEditorThemeRef.value,
+        ...props.options
+      })
+      // 监听值的变化
+      editor.onDidChangeModelContent(() => {
+        const value = editor.getValue() //给父组件实时返回最新文本
+        emit('update:modelValue', value)
+        emit('change', value)
+      })
+      emit('EditorMounted', editor)
+    }
+    watch(
+      () => props.modelValue,
+      newValue => {
+        if (editor) {
+          const value = editor.getValue()
+          if (newValue !== value) {
+            editor.setValue(newValue)
+          }
+        }
+      }
+    )
+    watch(
+      () => props.options,
+      newValue => {
+        editor.updateOptions(newValue)
+      },
+      { deep: true }
+    )
+    watch(
+      () => props.language,
+      newValue => {
+        monaco.editor.setModelLanguage(editor.getModel()!, newValue)
+      }
+    )
+
+    watch(
+      () => configStore.getCurrentTheme ,
+      () => {
+        editor?.dispose()
+        monacoEditorThemeRef.value = configStore.getCurrentTheme === 'dark' ? 'vs-dark' : 'vs'
+        init()
+      }
+    )
+    onBeforeUnmount(() => {
+      editor.dispose()
+    })
+    onMounted(() => {
+      init()
+    })
+    return { codeEditBox }
+  },
+  render () {
+    return (
+      <div ref='codeEditBox' style={{
+        height: '100%',
+      }}/>
+    )
+  }
+})

paimon-web-ui-new/src/components/monaco-editor/type.ts

@@ -0,0 +1,80 @@
+/* Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License. */
+
+export type Theme = 'vs' | 'vs-dark'
+export type FoldingStrategy = 'auto' | 'indentation'
+export type RenderLineHighlight = 'all' | 'line' | 'none' | 'gutter'
+export interface Options {
+  automaticLayout?: boolean // 自适应布局
+  foldingStrategy?: FoldingStrategy // 折叠方式  auto | indentation
+  renderLineHighlight?: RenderLineHighlight // 行亮
+  selectOnLineNumbers?: boolean // 显示行号
+  minimap?: {
+    // 关闭小地图
+    enabled: boolean
+  }
+  readOnly: boolean // 只读
+  contextmenu: boolean
+  fontSize?: number // 字体大小
+  scrollBeyondLastLine?: boolean // 取消代码后面一大段空白
+  overviewRulerBorder?: boolean // 不要滚动条的边框
+}
+
+export const editorProps = {
+  modelValue: {
+    type: String as PropType<string>,
+    default: null
+  },
+  width: {
+    type: [String, Number] as PropType<string | number>,
+    default: '100%'
+  },
+  height: {
+    type: [String, Number] as PropType<string | number>,
+    default: '100%'
+  },
+  language: {
+    type: String as PropType<string>,
+    default: 'javascript'
+  },
+  theme: {
+    type: String as PropType<Theme>,
+    validator(value: string): boolean {
+      return ['vs', 'vs-dark'].includes(value)
+    },
+    default: 'vs'
+  },
+  options: {
+    type: Object as PropType<Options>,
+    default() {
+      return {
+        automaticLayout: true,
+        foldingStrategy: 'indentation',
+        renderLineHighlight: 'line',
+        selectOnLineNumbers: true,
+        minimap: {
+          enabled: true
+        },
+        readOnly: false,
+        contextmenu: true,
+        fontSize: 16,
+        scrollBeyondLastLine: false,
+        overviewRulerBorder: false
+      }
+    }
+  }
+}

paimon-web-ui-new/src/layouts/content/components/toolbar/index.tsx

@@ -17,7 +17,7 @@ under the License. */
 
 import i18n from '@/locales'
 import { useConfigStore } from '@/store/config'
-import { LogoGithub, Moon, SunnyOutline, Language, PersonCircleOutline } from '@vicons/ionicons5'
+import { LogoGithub, Moon, SunnyOutline, Language } from '@vicons/ionicons5'
 
 export default defineComponent({
   name: 'ToolBar',

paimon-web-ui-new/src/locales/en/index.ts

@@ -17,8 +17,10 @@ under the License. */
 
 import layout from './modules/layout'
 import login from './modules/login'
+import playground from './modules/playground'
 
 export default {
   login,
-  layout
-}
+  layout,
+  playground
+}

paimon-web-ui-new/src/locales/en/modules/playground.ts

@@ -0,0 +1,21 @@
+/* Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License. */
+
+export default {
+  select_catalog: 'Select Catalog',
+  search: 'Search'
+}

paimon-web-ui-new/src/locales/zh/index.ts

@@ -17,8 +17,10 @@ under the License. */
 
 import layout from './modules/layout'
 import login from './modules/login'
+import playground from './modules/playground'
 
 export default {
   login,
-  layout
-}
+  layout,
+  playground
+}

paimon-web-ui-new/src/locales/zh/modules/playground.ts

@@ -0,0 +1,21 @@
+/* Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License. */
+
+export default {
+  select_catalog: '选择Catalog',
+  search: '搜索'
+}

paimon-web-ui-new/src/router/index.ts

@@ -15,25 +15,31 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License. */
 
-import { createRouter, createWebHistory } from 'vue-router'
+import {
+  createRouter,
+  createWebHistory,
+  type RouteLocationNormalized,
+  type NavigationGuardNext
+} from 'vue-router'
+import routes from './routes'
+
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/',
-      name: 'homepage',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../layouts/content')
-    },
-    {
-      path: '/login',
-      name: 'login',
-      component: () => import('../views/login')
-    }
-  ]
+  routes
 })
 
+/**
+ * Routing to intercept
+ */
+router.beforeEach(
+  async (
+    to: RouteLocationNormalized,
+    from: RouteLocationNormalized,
+    next: NavigationGuardNext
+  ) => {
+    next()
+  }
+)
+
 export default router