feat: split schools

src/App.vue

@@ -3,8 +3,11 @@ import { computed, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useDark } from '@vueuse/core'
 
+import { useSchool } from './lib/school'
 import { useStore } from './lib/store'
 
+const school = useSchool()
+
 const store = useStore()
 
 const router = useRouter()
@@ -24,7 +27,7 @@ const isTabBarRoute = computed(() => {
 
 const hasTitle = computed(() => !!route.meta.title)
 const title = computed<string>(() => {
-  return route.meta?.title ?? '信息学部权益墙'
+  return route.meta?.title ?? (school.value.name + '权益墙')
 })
 
 const isNotHome = computed(() => {

src/lib/axios.ts

@@ -8,7 +8,7 @@ let instance: AxiosInstance | null = null
 export const useAxiosInstance = (): AxiosInstance => {
   if (instance === null) {
     instance = axios.create({
-      baseURL: import.meta.env.VITE_API_URL
+      baseURL: '/api'
     })
 
     instance.interceptors.request.use((config) => {

src/lib/router.ts

@@ -1,7 +1,7 @@
-import { nextTick } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import type { RouteRecordRaw } from 'vue-router'
 
+import { useSchool } from './school'
 import { useStore } from './store'
 import About from '../pages/About.vue'
 import AdminAdminList from '../pages/AdminAdminList.vue'
@@ -14,6 +14,7 @@ import QuestionCreate from '../pages/QuestionCreate.vue'
 import QuestionCreateSuccess from '../pages/QuestionCreateSuccess.vue'
 import QuestionIndex from '../pages/QuestionIndex.vue'
 import QuestionShow from '../pages/QuestionShow.vue'
+import SchoolSwitch from '../pages/SchoolSwitch.vue'
 import UserIndex from '../pages/UserIndex.vue'
 import UserLogin from '../pages/UserLogin.vue'
 
@@ -63,7 +64,7 @@ const routes: RouteRecordRaw[] = [
     path: '/announcements',
     component: AnnouncementIndex,
     meta: {
-      title: '信息学部权益墙'
+      title: '{school}权益墙'
     }
   },
   {
@@ -110,6 +111,13 @@ const routes: RouteRecordRaw[] = [
       title: '反馈问题'
     }
   },
+  {
+    path: '/schools',
+    component: SchoolSwitch,
+    meta: {
+      title: '切换学院'
+    }
+  },
   {
     path: '/user',
     component: UserIndex,
@@ -139,6 +147,18 @@ const router = createRouter({
   routes
 })
 
+/**
+ * Format page title
+ */
+router.beforeEach((to) => {
+  if (to.meta?.title) {
+    while (to.meta.title.includes('{school}')) {
+      to.meta.title = to.meta.title.replace('{school}', useSchool().value.name)
+    }
+  }
+  return true
+})
+
 /**
  * Fetch user information
  */
@@ -185,17 +205,14 @@ router.beforeEach(async (to) => {
  * Change page title
  */
 router.afterEach((to) => {
+  const school = useSchool()
   const store = useStore()
 
-  if (store.isWeixin) {
-    nextTick(() => {
-      const appTitle = '信息学部权益墙'
-      if (to.meta?.title && to.meta.title !== appTitle) {
-        document.title = `${to.meta.title} - ${appTitle}`
-      } else {
-        document.title = appTitle
-      }
-    })
+  const appTitle = school.value.name + '权益墙'
+  if (store.isWeixin && to.meta?.title && to.meta.title !== appTitle) {
+    document.title = `${to.meta.title} - ${appTitle}`
+  } else {
+    document.title = appTitle
   }
 })
 

src/lib/school.ts

@@ -0,0 +1,49 @@
+import { computed } from 'vue'
+import type { ComputedRef } from 'vue'
+
+import type { SchoolInfo, SchoolInfoBase } from '../types/school'
+
+import logoDefault from '../assets/images/bjut-logo.svg?url'
+
+export const schoolDefault: SchoolInfoBase = {
+  name: '信息学部',
+  logo: logoDefault
+}
+
+export const schools: SchoolInfo[] = [
+  {
+    domain: 'https://appeal.bjut.tech',
+    name: '信息科学技术学院'
+  },
+  {
+    domain: 'https://appeal-cs.bjut.tech',
+    name: '计算机学院'
+  }
+]
+
+const schoolRef = computed<SchoolInfoBase>(() => {
+  const domain = window.location.origin
+  const school = schools.find(school => school.domain === domain)
+  return Object.assign({}, schoolDefault, school)
+})
+
+export const useSchool = (): ComputedRef<SchoolInfoBase> => {
+  return schoolRef
+}
+
+type SchoolListItem = SchoolInfoBase & SchoolInfo & {
+  active: boolean
+}
+
+const schoolListRef = computed<SchoolListItem[]>(() => {
+  const domain = window.location.origin
+  return schools.map((school) => {
+    return Object.assign({}, schoolDefault, school, {
+      active: school.domain === domain
+    })
+  })
+})
+
+export const useSchoolList = (): ComputedRef<SchoolListItem[]> => {
+  return schoolListRef
+}

src/pages/About.vue

@@ -3,8 +3,7 @@ import { computed } from 'vue'
 import { useAxios } from '@vueuse/integrations/useAxios'
 
 import { useAxiosInstance } from '../lib/axios'
-
-import logo from '../assets/images/bjut-fit-logo.svg?inline'
+import { useSchool } from '../lib/school'
 
 interface ActuatorInfo {
   build?: {
@@ -16,6 +15,8 @@ interface ActuatorInfo {
   }
 }
 
+const school = useSchool()
+
 const { data } = useAxios<ActuatorInfo>('actuator/info', useAxiosInstance(), {
   immediate: true
 })
@@ -36,20 +37,20 @@ const version = computed(() => {
         class="w-32 h-32 bg-white"
         round
         fit="fill"
-        :src="logo"
+        :src="school.logo"
       />
     </div>
     <div class="flex flex-col items-center gap-2">
       <h1 class="text-2xl">
-        <span class="font-bold">信息学部权益墙</span>
+        <span class="font-bold">{{ school.name }}权益墙</span>
         <span
           v-if="version"
           class="ml-2 text-sm text-gray-500 dark:text-neutral-400"
           v-text="version"
         />
       </h1>
       <p class="text-gray-500 dark:text-neutral-400">
-        北京工业大学信息学部学生会生活权益部
+        北京工业大学{{ school.name }}学生会权益部
       </p>
     </div>
   </div>

src/pages/SchoolSwitch.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useSchoolList } from '../lib/school'
+import type { SchoolInfo } from '../types/school'
+
+const schools = useSchoolList()
+
+const navigate = (school: SchoolInfo): void => {
+  location.href = school.domain
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-stretch py-6 gap-4">
+    <van-cell-group inset>
+      <van-cell
+        v-for="school of schools"
+        :key="school.name"
+        size="large"
+        :title="school.name"
+        :label="school.domain"
+        :is-link="!school.active"
+        center
+        @click="navigate(school)"
+      >
+        <template #icon>
+          <img
+            :src="school.logo"
+            :alt="'logo of ' + school.name"
+            class="w-12 h-12 mr-3 rounded-full"
+          >
+        </template>
+        <template
+          v-if="school.active"
+          #right-icon
+        >
+          <van-icon
+            size="18"
+            class="text-green-500"
+            class-prefix="bi"
+            name="check2-circle"
+          />
+        </template>
+      </van-cell>
+    </van-cell-group>
+  </div>
+</template>

src/pages/UserIndex.vue

@@ -90,6 +90,14 @@ const { data: count } = useAxios<{
         :to="store.loggedIn ? '/user/history' : ''"
         :aria-disabled="!store.loggedIn"
       />
+      <van-cell
+        icon-prefix="bi"
+        icon="arrow-left-right"
+        title="切换学院"
+        center
+        is-link
+        to="/schools"
+      />
     </van-cell-group>
 
     <van-cell-group

src/pages/UserLogin.vue

@@ -2,9 +2,12 @@
 import { reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
+import { useSchool } from '../lib/school'
 import { useAxiosInstance } from '../lib/axios'
 import { useStore } from '../lib/store'
 
+const school = useSchool()
+
 const store = useStore()
 
 const router = useRouter()
@@ -63,14 +66,18 @@ const submit = (): void => {
 
 <template>
   <div class="flex flex-col items-stretch mx-4 py-6 gap-4">
-    <h1 class="text-2xl font-semibold text-center">
-      统一身份认证登录
-    </h1>
-    <!--<img
-      src="../assets/images/bjut-fit-logo-horizontal.png"
+    <img
+      v-if="school.logoHorizontal"
+      :src="school.logoHorizontal"
       alt="logo"
       class="mx-auto h-[4.5rem] mt-4 mb-6"
-    >-->
+    >
+    <h1
+      v-else
+      class="text-2xl font-semibold text-center"
+    >
+      统一身份认证登录
+    </h1>
     <van-cell-group
       class="!mx-0"
       inset

src/types/school.ts

@@ -0,0 +1,13 @@
+export interface SchoolInfoBase {
+  domain?: string
+  name: string
+  logo: string
+  logoHorizontal?: string
+}
+
+export interface SchoolInfo {
+  domain: string
+  name: string
+  logo?: string
+  logoHorizontal?: string
+}

src/utils/attachment.ts

@@ -1,5 +1,5 @@
 import type { Attachment } from '../types/Attachment'
 
 export const getUrl = (attachment: Attachment): string => {
-  return `${import.meta.env.VITE_API_URL}/attachments/${attachment.id}`
+  return `/api/attachments/${attachment.id}`
 }

src/vite-env.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_API_URL: string
   readonly VITE_ANALYTICS_CF_TOKEN?: string
 }