feat(editor): create page inside a editor

src/components/editor/aside/page/AsidePageNew.vue

@@ -1,22 +1,15 @@
 <template>
-  <button class="wb-aside-button" @click="onCreateNewPage">
+  <InjectButtonInstance
+    class="wb-aside-button"
+    @click.prevent="usePage().onCreatePage"
+  >
     {{ t('editor.aside.project.page.new.title') }}
-  </button>
+  </InjectButtonInstance>
 </template>
 
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n'
-  import { useStore } from 'vuex'
+  import { usePage } from '@/use/page'
 
-  const store = useStore()
   const { t } = useI18n()
-
-  const onCreateNewPage = async () => {
-    store.commit('project/newPage')
-
-    const arr = store.state.project.pages
-    const obj = arr[arr.length - 1]
-
-    store.commit('context/load', obj)
-  }
 </script>

src/components/editor/main/EditorBase.vue

@@ -19,7 +19,7 @@
           rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
       "
     >
-      <EditorBaseHeader />
+      <EditorBaseHeader v-if="store.state.project.name !== '__NOT_CREATED__'" />
       <EditorBaseBlocked
         v-if="store.state.project.name === '__NOT_CREATED__'"
       />

src/components/editor/main/EditorBaseHeader.vue

@@ -2,7 +2,27 @@
   <div
     class="flex justify-end items-center relative bg-gray-300 dark:bg-gray-800"
   >
-    <HeroIcon class="wb-icon inline-flex" @click.prevent="onDeletePage">
+    <HeroIcon
+      class="wb-icon inline-flex"
+      @click.prevent="usePage().onCreatePage"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </HeroIcon>
+    <HeroIcon
+      class="wb-icon inline-flex"
+      @click.prevent="usePage().onDeletePage"
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="h-6 w-6"
@@ -21,17 +41,5 @@
 </template>
 
 <script setup lang="ts">
-  import { nextTick } from 'vue'
-  import { useStore } from 'vuex'
-
-  const store = useStore()
-
-  const onDeletePage = async () => {
-    if (store.state.project.pages.length <= 1) return
-
-    store.commit('project/deletePage', store.state.context)
-    await nextTick
-
-    store.commit('context/load', store.state.project.pages[0])
-  }
+  import { usePage } from '@/use/page'
 </script>

src/components/utils/InjectButtonInstance.vue

@@ -0,0 +1,3 @@
+<template>
+  <button><slot /></button>
+</template>

src/use/page.ts

@@ -0,0 +1,26 @@
+import { nextTick } from 'vue'
+import { useStore } from 'vuex'
+
+export const usePage = () => {
+  const store = useStore()
+
+  const onCreatePage = async () => {
+    store.commit('project/newPage')
+
+    const arr = store.state.project.pages
+    const obj = arr[arr.length - 1]
+
+    store.commit('context/load', obj)
+  }
+
+  const onDeletePage = async () => {
+    if (store.state.project.pages.length <= 1) return
+
+    store.commit('project/deletePage', store.state.context)
+    await nextTick
+
+    store.commit('context/load', store.state.project.pages[0])
+  }
+
+  return { onCreatePage, onDeletePage }
+}