fix init.

src/shared/Header.vue

@@ -10,6 +10,7 @@ import type {
   DropdownDividerOption,
 } from "naive-ui"
 import { RouterLink } from "vue-router"
+import { isDesktop } from "~/shared/composables/breakpoints"
 
 const userStore = useUserStore()
 const route = useRoute()
@@ -69,12 +70,8 @@ const options = computed<Array<DropdownOption | DropdownDividerOption>>(() => [
 </script>
 
 <template>
-  <n-space align="center">
-    <n-menu
-      mode="horizontal"
-      :options="menus"
-      :default-value="defaultValue"
-    ></n-menu>
+  <n-space v-if="isDesktop" justify="space-between" align="center">
+    <n-menu mode="horizontal" :options="menus" :default-value="defaultValue" />
     <n-space>
       <n-button circle @click="toggleDark()">
         <template #icon>
@@ -97,6 +94,22 @@ const options = computed<Array<DropdownOption | DropdownDividerOption>>(() => [
       </div>
     </n-space>
   </n-space>
+  <n-space v-else justify="end">
+    <n-dropdown
+      v-if="userStore.isAuthed"
+      :options="options"
+      @select="handleDropdown"
+    >
+      <n-button>{{ userStore.user.username }}</n-button>
+    </n-dropdown>
+    <n-space v-else>
+      <n-button @click="toggleLogin(true)">登录</n-button>
+      <n-button @click="toggleSignup(true)">注册</n-button>
+    </n-space>
+    <n-dropdown :options="menus">
+      <n-button>菜单</n-button>
+    </n-dropdown>
+  </n-space>
 </template>
 
 <style scoped></style>

src/shared/Monaco.vue

@@ -4,7 +4,7 @@ import { LANGUAGE_VALUE } from "utils/constants"
 import { LANGUAGE } from "utils/types"
 import { isMobile } from "~/shared/composables/breakpoints"
 import { isDark } from "./composables/dark"
-import { monaco } from "./composables/monaco"
+import { init, monaco } from "./composables/monaco"
 
 interface Props {
   value: string
@@ -29,8 +29,8 @@ const monacoEditorRef = ref()
 let editor: Monaco.editor.IStandaloneCodeEditor
 let model: Monaco.editor.ITextModel
 
-onMounted(() => {
-  if (!monaco.value) return
+onMounted(async () => {
+  if (!monaco.value) await init()
   model = monaco.value!.editor.createModel(
     props.value,
     LANGUAGE_VALUE[props.language]
@@ -99,5 +99,6 @@ onUnmounted(() => {
     :class="props.class"
     :style="{ height: props.height }"
   ></div>
+  <div v-else :style="{ height: props.height }"></div>
 </template>
 <style scoped></style>

src/shared/composables/chart.ts

@@ -0,0 +1,28 @@
+import {
+  Chart as ChartJS,
+  Title,
+  Colors,
+  Tooltip,
+  Legend,
+  BarElement,
+  ArcElement,
+  CategoryScale,
+  LinearScale,
+} from "chart.js"
+
+const [isLoaded] = useToggle()
+
+export function loadChart() {
+  if (isLoaded.value) return
+  ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    ArcElement,
+    Colors,
+    Title,
+    Tooltip,
+    Legend
+  )
+  isLoaded.value = true
+}