add website config.

src/shared/Header.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { logout } from "./api"
 import { useUserStore } from "./store/user"
+import { useConfigStore } from "./store/config"
 import { isDark, toggleDark } from "~/shared/composables/dark"
 import { toggleLogin, toggleSignup } from "~/shared/composables/modal"
 import type {
@@ -9,10 +10,11 @@ import type {
   DropdownDividerOption,
 } from "naive-ui"
 import { RouterLink } from "vue-router"
-import { isDesktop } from "~/shared/composables/breakpoints"
+import { isDesktop, isMobile } from "~/shared/composables/breakpoints"
 import { code } from "~/shared/composables/learn"
 
 const userStore = useUserStore()
+const configStore = useConfigStore()
 const route = useRoute()
 const router = useRouter()
 const active = computed(() => {
@@ -26,10 +28,14 @@ async function handleLogout() {
   router.replace("/")
 }
 
-onMounted(userStore.getMyProfile)
+onMounted(() => {
+  userStore.getMyProfile()
+  configStore.getConfig()
+})
 
 const menus = computed<MenuOption[]>(() => [
   {
+    show: false,
     label: () =>
       h(RouterLink, { to: "/learn/step-1" }, { default: () => "自学" }),
     key: "learn",
@@ -90,12 +96,23 @@ function run() {
 </script>
 
 <template>
-  <n-space v-if="isDesktop" justify="space-between" align="center">
-    <n-menu mode="horizontal" :options="menus" :value="active" />
-    <n-space>
+  <n-space justify="space-between" align="center">
+    <n-space align="center">
+      <div class="websiteTitle">{{ configStore.config?.website_name }}</div>
+      <n-menu
+        v-if="isDesktop"
+        mode="horizontal"
+        :options="menus"
+        :value="active"
+      />
+    </n-space>
+    <n-space align="center">
       <n-button v-if="$route.name === 'learn'" type="primary" @click="run">
         运行
       </n-button>
+      <n-dropdown v-if="isMobile" :options="menus" trigger="click">
+        <n-button>菜单</n-button>
+      </n-dropdown>
       <div v-if="userStore.isFinished">
         <n-dropdown
           v-if="userStore.isAuthed"
@@ -104,9 +121,14 @@ function run() {
         >
           <n-button>{{ userStore.user!.username }}</n-button>
         </n-dropdown>
-        <n-space v-else>
+        <n-space align="center" v-else>
           <n-button @click="toggleLogin(true)">登录</n-button>
-          <n-button @click="toggleSignup(true)">注册</n-button>
+          <n-button
+            v-if="configStore.config?.allow_register"
+            @click="toggleSignup(true)"
+          >
+            注册
+          </n-button>
         </n-space>
       </div>
       <n-button circle @click="toggleDark()">
@@ -117,33 +139,11 @@ function 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" trigger="click">
-      <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" trigger="click">
-      <n-button>
-        <template #icon>
-          <n-icon>
-            <i-ep-menu />
-          </n-icon>
-        </template>
-      </n-button>
-    </n-dropdown>
-    <n-button circle @click="toggleDark()">
-      <template #icon>
-        <n-icon v-if="isDark"><i-ep-sunny /></n-icon>
-        <n-icon v-else><i-ep-moon /></n-icon>
-      </template>
-    </n-button>
-  </n-space>
 </template>
 
-<style scoped></style>
+<style scoped>
+.websiteTitle {
+  font-size: 18px;
+  margin-left: 8px;
+}
+</style>

src/shared/layout/default.vue

@@ -2,6 +2,9 @@
 import Login from "../Login.vue"
 import Signup from "../Signup.vue"
 import Header from "../Header.vue"
+import { useConfigStore } from "../store/config"
+
+const configStore = useConfigStore()
 </script>
 
 <template>
@@ -12,6 +15,7 @@ import Header from "../Header.vue"
     <n-layout-content content-style="padding: 16px; overflow-x: initial">
       <router-view></router-view>
     </n-layout-content>
+    <p class="footer">{{ configStore.config?.website_footer }}</p>
     <Login />
     <Signup />
   </n-layout>
@@ -21,4 +25,8 @@ import Header from "../Header.vue"
 .header {
   padding: 8px;
 }
+.footer {
+  text-align: center;
+  margin: 20px 0;
+}
 </style>

src/shared/store/config.ts

@@ -0,0 +1,14 @@
+import { getWebsiteConfig } from "~/oj/api"
+import { WebsiteConfig } from "~/utils/types"
+
+export const useConfigStore = defineStore("config", () => {
+  const config = ref<WebsiteConfig>()
+  async function getConfig() {
+    const res = await getWebsiteConfig()
+    config.value = res.data
+  }
+  return {
+    config,
+    getConfig,
+  }
+})