add toolbar for editor
diff --git a/package.json b/package.json
index f41b791..c07333b 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,9 @@
"prepare": "husky install"
},
"lint-staged": {
- ".ts,.tsx,.vue": ["eslint --fix"]
+ ".ts,.tsx,.vue": [
+ "eslint --fix"
+ ]
},
"dependencies": {
"monaco-editor": "^0.34.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 734b881..1cee548 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,7 +14,7 @@
eslint-plugin-prettier: ^4.2.1
eslint-plugin-promise: ^6.0.0
eslint-plugin-vue: ^9.4.0
- husky: ^8.0.1
+ husky: ^8.0.0
lint-staged: ^13.0.3
monaco-editor: ^0.34.0
naive-ui: 2.32.0
diff --git a/studio/pages/editor.tsx b/studio/pages/editor.tsx
index 00ad262..22774d6 100644
--- a/studio/pages/editor.tsx
+++ b/studio/pages/editor.tsx
@@ -15,11 +15,89 @@
* limitations under the License.
*/
-import { defineComponent } from 'vue'
+import {
+ NButton,
+ NIcon,
+ NLayout,
+ NLayoutContent,
+ NLayoutHeader,
+ NTabPane,
+ NTabs
+} from 'naive-ui'
+import { ref, defineComponent } from 'vue'
+import {
+ FullscreenOutlined,
+ PlayCircleOutlined,
+ SaveOutlined,
+ ToTopOutlined
+} from '@vicons/antd'
+import styles from './styles.module.scss'
export const EditorPage = defineComponent({
name: 'editor-page',
setup() {
- return () => <div>Editor - Page</div>
+ const fileRef = ref(1)
+
+ const handleClose = () => {}
+
+ const tabPanes = [1, 2, 3].map((item) => {
+ return (
+ <NTabPane name={item} key={item} tab={item.toString()}>
+ {{ item }}
+ </NTabPane>
+ )
+ })
+
+ return () => (
+ <NLayout>
+ <NLayoutHeader>
+ <div class={styles.toolbar}>
+ <div class={styles.operate}>
+ <NButton text style={{ fontSize: '24px' }}>
+ <NIcon>
+ <SaveOutlined />
+ </NIcon>
+ </NButton>
+ </div>
+ <div class={styles.operate}>
+ <NButton text style={{ fontSize: '24px' }}>
+ <NIcon>
+ <PlayCircleOutlined />
+ </NIcon>
+ </NButton>
+ </div>
+ <div class={styles.operate}>
+ <NButton text style={{ fontSize: '24px' }}>
+ <NIcon>
+ <FullscreenOutlined />
+ </NIcon>
+ </NButton>
+ </div>
+ <div class={styles.operate}>
+ <NButton text style={{ fontSize: '24px' }}>
+ <NIcon>
+ <ToTopOutlined />
+ </NIcon>
+ </NButton>
+ </div>
+ </div>
+ </NLayoutHeader>
+ <NLayoutContent
+ style={{
+ height: '664px'
+ }}
+ >
+ <NTabs
+ value={fileRef.value}
+ type='card'
+ closable
+ tabStyle={{ minWidth: '80px' }}
+ onClose={handleClose}
+ >
+ {tabPanes}
+ </NTabs>
+ </NLayoutContent>
+ </NLayout>
+ )
}
})
diff --git a/studio/pages/styles.module.scss b/studio/pages/styles.module.scss
new file mode 100644
index 0000000..3c1cf66
--- /dev/null
+++ b/studio/pages/styles.module.scss
@@ -0,0 +1,8 @@
+.toolbar {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ .operate {
+ padding: 5px 5px;
+ }
+}
