fix init.

src/learn/index.vue

@@ -63,10 +63,25 @@ function run() {
     <n-gi :span="14" class="relative">
       <n-button type="primary" class="action" @click="run">运行</n-button>
       <Monaco :value="code" @change="change" />
-      <div></div>
     </n-gi>
   </n-grid>
-  <div v-else></div>
+  <div v-else>
+    <n-scrollbar style="height: calc(50vh - 50px)">
+      <component :is="Mds[step - 1]"></component>
+    </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>
+  </div>
 </template>
 
 <style>

src/main.ts

@@ -8,19 +8,6 @@ import { routes } from "./routes"
 import App from "./App.vue"
 
 import { toggleLogin } from "./shared/composables/modal"
-import { init as monacoInit } from "./shared/composables/monaco"
-
-import {
-  Chart as ChartJS,
-  Title,
-  Colors,
-  Tooltip,
-  Legend,
-  BarElement,
-  ArcElement,
-  CategoryScale,
-  LinearScale,
-} from "chart.js"
 
 const router = createRouter({
   history: createWebHistory(),
@@ -39,18 +26,6 @@ router.beforeEach((to, from, next) => {
   }
 })
 
-monacoInit()
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  ArcElement,
-  Colors,
-  Title,
-  Tooltip,
-  Legend
-)
 const pinia = createPinia()
 const app = createApp(App)
 app.use(router)

src/oj/contest/list.vue

@@ -8,6 +8,7 @@ import { ContestType, CONTEST_STATUS } from "~/utils/constants"
 import ContestTitle from "./components/ContestTitle.vue"
 import { useUserStore } from "~/shared/store/user"
 import { toggleLogin } from "~/shared/composables/modal"
+import { isDesktop } from "~/shared/composables/breakpoints"
 
 const route = useRoute()
 const router = useRouter()
@@ -118,7 +119,7 @@ function rowProps(row: Contest) {
 }
 </script>
 <template>
-  <n-form label-placement="left" inline>
+  <n-form label-placement="left" :inline="isDesktop">
     <n-form-item label="状态">
       <n-select
         class="select"

src/oj/problem/components/Editor.vue

@@ -22,6 +22,22 @@ function reset() {
 function change(value: string) {
   code.value = value
 }
+
+const options = props.problem.languages.map((it) => ({
+  label: () => [
+    h("img", {
+      src: `/${it}.svg`,
+      style: {
+        width: "16px",
+        height: "16px",
+        marginRight: "8px",
+        transform: "translateY(3px)",
+      },
+    }),
+    it,
+  ],
+  value: it,
+}))
 </script>
 
 <template>
@@ -30,7 +46,7 @@ function change(value: string) {
       <n-select
         class="language"
         v-model:value="code.language"
-        :options="problem.languages.map((it) => ({ label: it, value: it }))"
+        :options="options"
       />
     </n-form-item>
     <n-form-item>
@@ -53,7 +69,7 @@ function change(value: string) {
 
 <style scoped>
 .language {
-  width: 120px;
+  width: 140px;
 }
 .editor {
   min-height: 200px;

src/routes.ts

@@ -1,4 +1,5 @@
 import { RouteRecordRaw } from "vue-router"
+import { loadChart } from "./shared/composables/chart"
 
 export const routes: RouteRecordRaw[] = [
   {
@@ -11,6 +12,9 @@ export const routes: RouteRecordRaw[] = [
         component: () => import("oj/problem/detail.vue"),
         props: true,
         name: "ProblemDetail",
+        beforeEnter() {
+          loadChart()
+        },
       },
       {
         path: "submission",
@@ -40,6 +44,9 @@ export const routes: RouteRecordRaw[] = [
       {
         path: "rank",
         component: () => import("oj/rank/list.vue"),
+        beforeEnter() {
+          loadChart()
+        },
       },
       {
         path: "learn",

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
+}

vite.config.ts

@@ -17,6 +17,16 @@ const proxyConfig = {
 }
 
 export default defineConfig({
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          fancy: ["highlight.js", "party-js"],
+          chart: ["vue-chartjs", "chart.js"],
+        },
+      },
+    },
+  },
   resolve: {
     alias: {
       "~": path.resolve(__dirname, "./src"),