feat: fix some bugs and complete remaining functions

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

@@ -16,12 +16,12 @@ specific language governing permissions and limitations
 under the License. */
 
 export default {
-  database_query: 'Database Query',
+  query: 'Query',
   workbench: 'Workbench',
   task_operation_and_maintenance: 'Task Operation and Maintenance',
   settings: 'Settings',
   terminal: 'Terminal',
-  branch: 'Branch',
+  git_branch: 'Git Branch',
   data: 'Data',
   saved_query: 'Saved Query',
   query_record: 'Query Record',
@@ -31,7 +31,7 @@ export default {
   save: 'Save',
   clear: 'Clear',
   unfold: 'Unfold',
-  pack_up: 'Pack Up',
+  collapse: 'Collapse',
   logs: 'Logs',
   result: 'Result',
 }

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

@@ -16,12 +16,12 @@ specific language governing permissions and limitations
 under the License. */
 
 export default {
-  database_query: '数据库查询',
+  query: '查询',
   workbench: '工作台',
   task_operation_and_maintenance: '任务运维',
   settings: '设置',
   terminal: '终端',
-  branch: '分支',
+  git_branch: 'Git 分支',
   data: '数据',
   saved_query: '已保存查询',
   query_record: '查询记录',
@@ -31,7 +31,7 @@ export default {
   save: '保存',
   clear: '清空',
   unfold: '展开',
-  pack_up: '收起',
+  collapse: '折叠',
   logs: '日志',
   result: '结果',
 }

paimon-web-ui-new/src/router/modules/playground.ts

@@ -33,9 +33,15 @@ export default [
           {
             path: '/playground/database',
             name: 'playground-database',
-            meta: { title: '数据库查询' },
+            meta: { title: '查询' },
             component: () => import('@/views/playground/components/database')
           },
+          {
+            path: '/playground/workbench',
+            name: 'playground-workbench',
+            meta: { title: '工作台' },
+            component: () => import('@/views/playground/components/workbench')
+          },
         ]
       },
     ]

paimon-web-ui-new/src/views/playground/components/database/components/console/index.tsx

@@ -99,7 +99,7 @@ export default defineComponent({
                   </n-button>
                 )
               }}>
-              <span>{this.t('playground.pack_up')}</span>
+              <span>{this.t('playground.collapse')}</span>
             </n-popover>
           </n-space>
         </div>

paimon-web-ui-new/src/views/playground/components/database/components/menu-tree/index.module.scss

@@ -25,5 +25,9 @@ under the License. */
     .search {
       display: flex;
     }
+
+    .icon {
+      display: flex;
+    }
   }
 }

paimon-web-ui-new/src/views/playground/components/database/components/menu-tree/index.tsx

@@ -15,7 +15,7 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License. */
 
-import { FileTrayFullOutline, Search, ServerOutline } from '@vicons/ionicons5';
+import { CodeSlash, FileTrayFullOutline, Search, ServerOutline } from '@vicons/ionicons5';
 import styles from './index.module.scss'
 import { NIcon, type TreeOption } from 'naive-ui';
 
@@ -119,6 +119,48 @@ export default defineComponent({
       tabData.value = data
     })
 
+    const savedQueryList = ref([
+      {
+        key: 1,
+        label: 'test1',
+        prefix: () =>
+          h(NIcon, {color: '#0066FF'}, {
+            default: () => h(CodeSlash)
+          }),
+        content: ''
+      },
+      {
+        key: 2,
+        label: 'test2',
+        prefix: () =>
+          h(NIcon, {color: '#0066FF'}, {
+            default: () => h(CodeSlash)
+          }),
+        content: ''
+      }
+    ]) as any
+
+    const recordList = ref([
+      {
+        key: 3,
+        label: 'test3',
+        prefix: () =>
+          h(NIcon, {color: '#0066FF'}, {
+            default: () => h(CodeSlash)
+          }),
+        content: ''
+      },
+      {
+        key: 4,
+        label: 'test4',
+        prefix: () =>
+          h(NIcon, {color: '#0066FF'}, {
+            default: () => h(CodeSlash)
+          }),
+        content: ''
+      }
+    ]) as any
+
     onMounted(() => {
       mittBus.emit('initTreeData', treeVariables)
     })
@@ -127,7 +169,9 @@ export default defineComponent({
       t,
       ...toRefs(treeVariables),
       nodeProps,
-      handleTreeSelect
+      handleTreeSelect,
+      savedQueryList,
+      recordList
     }
   },
   render() {
@@ -156,10 +200,44 @@ export default defineComponent({
               </n-space>
             </n-tab-pane>
             <n-tab-pane name="saved_query" tab={this.t('playground.saved_query')}>
-              Look forward to
+              <n-space vertical>
+                <n-input placeholder={this.t('playground.search')} style="width: 100%;"
+                  v-model:value={this.filterValue}
+                  v-slots={{
+                    prefix: () => <n-icon component={Search} />
+                  }}
+                >
+                </n-input>
+                <n-tree
+                  block-line
+                  expand-on-click
+                  selected-keys={this.selectedKeys}
+                  on-update:selected-keys={this.handleTreeSelect}
+                  data={this.savedQueryList}
+                  pattern={this.filterValue}
+                  node-props={this.nodeProps}
+                />
+              </n-space>
             </n-tab-pane>
             <n-tab-pane name="query_record" tab={this.t('playground.query_record')}>
-              Look forward to
+            <n-space vertical>
+                <n-input placeholder={this.t('playground.search')} style="width: 100%;"
+                  v-model:value={this.filterValue}
+                  v-slots={{
+                    prefix: () => <n-icon component={Search} />
+                  }}
+                >
+                </n-input>
+                <n-tree
+                  block-line
+                  expand-on-click
+                  selected-keys={this.selectedKeys}
+                  on-update:selected-keys={this.handleTreeSelect}
+                  data={this.recordList}
+                  pattern={this.filterValue}
+                  node-props={this.nodeProps}
+                />
+              </n-space>
             </n-tab-pane>
           </n-tabs>
         </n-card>

paimon-web-ui-new/src/views/playground/components/database/index.tsx

@@ -123,9 +123,12 @@ export default defineComponent({
               }
             </div>
             <div class={styles.console} style={`height: ${this.consoleHeightType === 'up' ? '80%' : '40%'}`}>
-              <n-card content-style={'padding: 0;'}>
-                <EditorConsole onConsoleDown={this.handleConsoleDown} onConsoleUp={this.handleConsoleUp} />
-              </n-card>
+              {
+                this.tabData.panelsList?.length > 0 &&
+                <n-card content-style={'padding: 0;'}>
+                  <EditorConsole onConsoleDown={this.handleConsoleDown} onConsoleUp={this.handleConsoleUp} />
+                </n-card>
+              }
             </div>
           </n-card>
         </div>

paimon-web-ui-new/src/views/playground/components/slider/index.tsx

@@ -25,6 +25,7 @@ export default defineComponent({
   setup() {
     const configStore = useConfigStore()
     const { t } = useLocaleHooks()
+    const router = useRouter()
 
     const renderIcon = (icon: any) => {
       return () => h(NIcon, { size: 24 }, { default: () => h(icon) })
@@ -35,14 +36,16 @@ export default defineComponent({
         {
           icon: renderIcon(Layers),
           title: 'Layers',
-          description: computed(() => (t('playground.database_query'))),
-          isClick: true
+          description: computed(() => (t('playground.query'))),
+          isClick: true,
+          path: '/playground/database'
         },
         {
           icon: renderIcon(CodeSlashSharp),
           title: 'Code',
           description: computed(() => (t('playground.workbench'))),
-          isClick: false
+          isClick: false,
+          path: '/playground/workbench'
         },
       ],
       domainList: [
@@ -59,7 +62,7 @@ export default defineComponent({
         {
           icon: renderIcon(GitBranch),
           title: 'GitBranch',
-          description: computed(() => (t('playground.branch'))),
+          description: computed(() => (t('playground.git_branch'))),
         }
       ],
     })
@@ -70,6 +73,7 @@ export default defineComponent({
           sliderVariables.workspaceList[i].isClick = false
         }
         sliderVariables.workspaceList[index].isClick = true
+        router.push(sliderVariables.workspaceList[index].path)
       }
     }
 

paimon-web-ui-new/src/views/playground/components/workbench/components/console/index.module.scss

@@ -0,0 +1,29 @@
+/* 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. */
+
+
+.editor-console {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .operations {
+    position: absolute;
+    top: 17px;
+    right: 20px;
+  }
+}