add file suffix recognition
diff --git a/studio/components/studio-content/index.tsx b/studio/components/studio-content/index.tsx
index af62d48..d0d1f69 100644
--- a/studio/components/studio-content/index.tsx
+++ b/studio/components/studio-content/index.tsx
@@ -15,14 +15,30 @@
* limitations under the License.
*/
import { defineComponent } from 'vue'
-import { NLayoutContent } from 'naive-ui'
+import { NLayout, NLayoutContent, NLayoutHeader } from 'naive-ui'
+import { Toolbar } from '../toolbar'
+import { Tabs } from '../tab'
import styles from './index.module.scss'
export const StudioContent = defineComponent({
name: 'studio-content',
setup() {
return () => (
- <NLayoutContent class={styles['studio-content']}>Content</NLayoutContent>
+ <NLayoutContent class={styles['studio-content']}>
+ <NLayout>
+ <NLayoutHeader>
+ <Toolbar />
+ </NLayoutHeader>
+ <NLayoutContent>
+ <Tabs
+ value={[
+ { id: 1, name: 'name' },
+ { id: 2, name: 'name' }
+ ]}
+ />
+ </NLayoutContent>
+ </NLayout>
+ </NLayoutContent>
)
}
})
diff --git a/studio/components/tab/index.tsx b/studio/components/tab/index.tsx
index ebd3653..8d5a1a2 100644
--- a/studio/components/tab/index.tsx
+++ b/studio/components/tab/index.tsx
@@ -19,6 +19,7 @@
import { NTabPane, NTabs } from 'naive-ui'
import { MonacoEditor } from '../monaco'
import { getFileContent } from '@/service/modules/file'
+import utils from '@/utils'
interface ITab {
id: number
@@ -37,10 +38,11 @@
props,
setup(props) {
const fileRef = ref<string | number>()
+ const contentRef = ref<string>()
const updateContent = (value: number) => {
fileRef.value = value
- getFileContent(value)
+ getFileContent(value).then((res) => (contentRef.value = res.content))
}
const handleClose = () => {}
@@ -50,9 +52,10 @@
}
const tabPanes = props.value.map((item) => {
+ const language = utils.getLanguageByName(item.name)
return (
<NTabPane name={item.id} key={item.id} tab={item.name}>
- <MonacoEditor defaultValue={item.name} />
+ <MonacoEditor value={contentRef.value} options={{ language }} />
</NTabPane>
)
})
diff --git a/studio/service/modules/file/index.ts b/studio/service/modules/file/index.ts
index c6f1cea..a2d16f0 100644
--- a/studio/service/modules/file/index.ts
+++ b/studio/service/modules/file/index.ts
@@ -16,10 +16,8 @@
*/
import { axios } from '@/service/service'
+import type { IFileContent } from './types'
-export const getFileContent = (id: number) => {
- return axios({
- url: `files/${id}`,
- method: 'get'
- })
+export const getFileContent = (id: number): Promise<IFileContent> => {
+ return axios.get(`files/${id}`)
}
diff --git a/studio/service/modules/file/types.ts b/studio/service/modules/file/types.ts
new file mode 100644
index 0000000..d4d66a0
--- /dev/null
+++ b/studio/service/modules/file/types.ts
@@ -0,0 +1,20 @@
+/*
+ * 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 interface IFileContent {
+ content: string
+}
diff --git a/studio/service/service.ts b/studio/service/service.ts
index 6109131..4f71292 100644
--- a/studio/service/service.ts
+++ b/studio/service/service.ts
@@ -32,7 +32,7 @@
}
const baseRequestConfig: AxiosRequestConfig = {
- baseURL: '/',
+ baseURL: '/studio/api',
timeout: 1500,
transformRequest: (params) => {
if (_.isPlainObject(params)) {
diff --git a/studio/utils/editor.ts b/studio/utils/editor.ts
new file mode 100644
index 0000000..ac06aea
--- /dev/null
+++ b/studio/utils/editor.ts
@@ -0,0 +1,36 @@
+/*
+ * 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 type { IEditorLanguage, ILanguageMap } from './types'
+
+const languageMap: ILanguageMap = {
+ sh: 'shell',
+ sql: 'sql',
+ py: 'python'
+}
+
+export const getLanguageByName: IEditorLanguage = (fileName) => {
+ let suffix = ''
+ try {
+ const fileArr = fileName.split('.')
+ suffix = fileArr[fileArr.length - 1]
+ } catch (error) {
+ return ''
+ }
+
+ return languageMap[suffix] || ''
+}
diff --git a/studio/utils/index.ts b/studio/utils/index.ts
new file mode 100644
index 0000000..3085523
--- /dev/null
+++ b/studio/utils/index.ts
@@ -0,0 +1,24 @@
+/*
+ * 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 { getLanguageByName } from './editor'
+
+const utils = {
+ getLanguageByName
+}
+
+export default utils
diff --git a/studio/utils/types.ts b/studio/utils/types.ts
new file mode 100644
index 0000000..4df2fa9
--- /dev/null
+++ b/studio/utils/types.ts
@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+type language = 'shell' | 'sql' | 'python'
+
+export interface IEditorLanguage {
+ (name: string): language | ''
+}
+
+export interface ILanguageMap {
+ [key: string]: language
+}
diff --git a/vite.config.ts b/vite.config.ts
index ab05d2a..84e6ed8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -46,9 +46,10 @@
},
server: {
proxy: {
- '/stdio/api': {
+ '/studio/api': {
target: loadEnv('development', './').VITE_APP_DEV_WEB_URL,
- changeOrigin: true
+ changeOrigin: true,
+ rewrite: (path) => path.replace(/^\/studio\/api/, '')
}
}
},
