refactor header.

src/components.d.ts

@@ -12,8 +12,10 @@ declare module '@vue/runtime-core' {
     IEpLoading: typeof import('~icons/ep/loading')['default']
     IEpLock: typeof import('~icons/ep/lock')['default']
     IEpMenu: typeof import('~icons/ep/menu')['default']
+    IEpMoon: typeof import('~icons/ep/moon')['default']
     IEpMore: typeof import('~icons/ep/more')['default']
     IEpMoreFilled: typeof import('~icons/ep/more-filled')['default']
+    IEpSunny: typeof import('~icons/ep/sunny')['default']
     NAlert: typeof import('naive-ui')['NAlert']
     NButton: typeof import('naive-ui')['NButton']
     NButtonGroup: typeof import('naive-ui')['NButtonGroup']

src/learn/index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import Monaco from "~/shared/Monaco.vue"
 import { isDesktop } from "~/shared/composables/breakpoints"
+import { code } from "~/shared/composables/learn"
+
 const route = useRoute()
 const router = useRouter()
 
@@ -9,7 +11,6 @@ const TOTAL = 3
 const Mds = Array.from({ length: TOTAL }, (_, i) => i + 1).map((v) =>
   defineAsyncComponent(() => import(`./step-${v}/index.md`))
 )
-const code = ref("")
 const step = computed(() => {
   if (!route.params.step || !route.params.step.length) return 1
   else {
@@ -40,9 +41,6 @@ function prev() {
 function next() {
   router.push(`/learn/step-${step.value + 1}`)
 }
-function run() {
-  console.log(code.value)
-}
 </script>
 
 <template>
@@ -60,27 +58,23 @@ function run() {
         </n-space>
       </n-scrollbar>
     </n-gi>
-    <n-gi :span="14" class="relative">
-      <n-button type="primary" class="action" @click="run">运行</n-button>
+    <n-gi :span="14">
       <Monaco :value="code" @change="change" />
     </n-gi>
   </n-grid>
   <div v-else>
-    <n-scrollbar style="height: calc(50vh - 50px)">
+    <n-scrollbar style="height: calc(50vh - 42px)">
       <component :is="Mds[step - 1]"></component>
+      <n-space justify="space-around">
+        <n-button v-if="step !== 1" text type="primary" @click="prev">
+          上一步
+        </n-button>
+        <n-button v-if="step !== TOTAL" text type="primary" @click="next">
+          下一步
+        </n-button>
+      </n-space>
     </n-scrollbar>
-    <n-space justify="space-around">
-      <n-button v-if="step !== 1" text type="primary" @click="prev">
-        上一步
-      </n-button>
-      <n-button v-if="step !== TOTAL" text type="primary" @click="next">
-        下一步
-      </n-button>
-    </n-space>
-    <div class="relative">
-      <n-button type="primary" class="action" @click="run">运行</n-button>
-      <Monaco :value="code" @change="change" height="calc(50vh - 55px)" />
-    </div>
+    <Monaco :value="code" @change="change" height="calc(50vh - 42px)" />
   </div>
 </template>
 
@@ -119,15 +113,4 @@ function run() {
   text-align: right;
   color: rgba(115, 138, 148, 0.4);
 }
-
-.relative {
-  position: relative;
-}
-
-.action {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 10;
-}
 </style>

src/shared/Header.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Sunny, Moon } from "@element-plus/icons-vue"
 import { logout } from "./api"
 import { useUserStore } from "./store/user"
 import { isDark, toggleDark } from "~/shared/composables/dark"
@@ -11,6 +10,7 @@ import type {
 } from "naive-ui"
 import { RouterLink } from "vue-router"
 import { isDesktop } from "~/shared/composables/breakpoints"
+import { code } from "~/shared/composables/learn"
 
 const userStore = useUserStore()
 const route = useRoute()
@@ -67,6 +67,10 @@ const options = computed<Array<DropdownOption | DropdownDividerOption>>(() => [
   { type: "divider" },
   { label: "退出", key: "logout" },
 ])
+
+function run() {
+  console.log(code.value)
+}
 </script>
 
 <template>
@@ -75,14 +79,15 @@ const options = computed<Array<DropdownOption | DropdownDividerOption>>(() => [
     <n-space>
       <n-button circle @click="toggleDark()">
         <template #icon>
-          <n-icon v-if="isDark"><Sunny /></n-icon>
-          <n-icon v-else><Moon /></n-icon>
+          <n-icon v-if="isDark"><i-ep-sunny /></n-icon>
+          <n-icon v-else> <i-ep-moon /></n-icon>
         </template>
       </n-button>
       <div v-if="userStore.isFinished">
         <n-dropdown
           v-if="userStore.isAuthed"
           :options="options"
+          trigger="click"
           @select="handleDropdown"
         >
           <n-button>{{ userStore.user.username }}</n-button>
@@ -92,13 +97,20 @@ const options = computed<Array<DropdownOption | DropdownDividerOption>>(() => [
           <n-button @click="toggleSignup(true)">注册</n-button>
         </n-space>
       </div>
+      <n-button v-if="$route.name === 'learn'" type="primary" @click="run">
+        运行
+      </n-button>
     </n-space>
   </n-space>
   <n-space v-else justify="end">
+    <n-button v-if="$route.name === 'learn'" type="primary" @click="run">
+      运行
+    </n-button>
     <n-dropdown
       v-if="userStore.isAuthed"
       :options="options"
       @select="handleDropdown"
+      trigger="click"
     >
       <n-button>{{ userStore.user.username }}</n-button>
     </n-dropdown>
@@ -106,7 +118,7 @@ const options = computed<Array<DropdownOption | DropdownDividerOption>>(() => [
       <n-button @click="toggleLogin(true)">登录</n-button>
       <n-button @click="toggleSignup(true)">注册</n-button>
     </n-space>
-    <n-dropdown :options="menus">
+    <n-dropdown :options="menus" trigger="click">
       <n-button>
         <template #icon>
           <n-icon>

src/shared/composables/learn.ts

@@ -0,0 +1 @@
+export const code = ref("")