fixed markdown font style

app.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 const loading = ref<HTMLDivElement | null>(null)
+const {$mitt} = useNuxtApp()
 
-emitter.on('startLoading', on => {
+$mitt.on('startLoading', on => {
   if (on) {
     loading.value?.classList.remove('stop')
     removeMobileTopColor()

components/alert/Notification.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+const {$mitt} = useNuxtApp()
 const notifications = ref<INotification[]>([]);
-
 const typeClasses = {
   success: 'bg-green-100 text-green-800 border border-green-400',
   error: 'bg-red-100 text-red-800 border border-red-400',
@@ -19,10 +19,10 @@ const addNotification = (notification: INotification) => {
 
 };
 
-emitter.on('eventBus', addNotification)
+$mitt.on('eventBus', addNotification)
 
 onBeforeUnmount(() => {
-  emitter.off('eventBus', addNotification);
+  $mitt.off('eventBus', addNotification);
 });
 </script>
 

components/card/ArticleCard.vue

@@ -5,13 +5,11 @@ const props = defineProps<{
   post: IPost
 }>()
 
-const thumbUrl = computed(() => {
-  // 如果文章缩略图为空，则从本地随机获取默认缩略图
-  props.post.fields.thumb.value = props.post.fields.thumb.value ? props.post.fields.thumb.value : getAssetURL(
-      `common/${Math.floor(Math.random() * (7 - 1 + 1)) + 1}.jpg`
-  )
-  return props.post.fields.thumb.value
-})
+const pid = useAsyncData('pid', async () => (Math.floor(Math.random() * (7 - 1 + 1)) + 1).toString())
+
+const thumbUrl = computed(() => props.post.fields.thumb.value)
+
+const randomId = computed(() => pid.data.value!)
 
 </script>
 
@@ -21,8 +19,9 @@ const thumbUrl = computed(() => {
        :to="{name: 'article-cid', params: {cid: post.cid}}">
     <!-- 图片 -->
     <div class="container h-full">
-      <img :src="thumbUrl" alt=""
+      <img v-if="thumbUrl" :src="thumbUrl" alt=""
            class="h-full w-full object-cover object-center transition-all duration-300 hover:scale-110">
+      <card-article-default-image :id="randomId"/>
     </div>
     <!-- 文字部分 -->
     <div class="container relative">

components/card/ArticleDefaultImage.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  id: string
+}>()
+</script>
+
+<template>
+  <img src="~/assets/images/common/1.jpg" alt="" v-if="id === '1'"/>
+  <img src="~/assets/images/common/2.jpg" alt="" v-else-if="id === '2'"/>
+  <img src="~/assets/images/common/3.jpg" alt="" v-else-if="id === '3'"/>
+  <img src="~/assets/images/common/4.jpg" alt="" v-else-if="id === '4'"/>
+  <img src="~/assets/images/common/5.jpg" alt="" v-else-if="id === '5'"/>
+  <img src="~/assets/images/common/6.jpg" alt="" v-else-if="id === '6'"/>
+  <img src="~/assets/images/common/7.jpg" alt="" v-else-if="id === '7'"/>
+</template>
+
+<style scoped>
+img {
+  @apply h-full w-full object-cover object-center transition-all duration-300 hover:scale-110
+}
+</style>

components/markdown/Section.vue

@@ -11,11 +11,9 @@ defineProps<{
 
 <style lang="scss">
 .markdown-body {
-  .MathJax {
-    * {
-      font-family: "LXGW WenKai", sans-serif !important;
-    }
+  font-family: "LXGW WenKai", sans-serif;
 
+  .MathJax {
     display: inline-block;
 
     svg {

composables/emitter.ts

@@ -1,10 +0,0 @@
-import mitt from 'mitt'
-
-type Events = {
-  openPost: IPost
-  startLoading: boolean
-  eventBus: INotification
-}
-
-const emitter = mitt<Events>()
-export default emitter

composables/network.ts

@@ -2,6 +2,7 @@ import type { AsyncData, UseFetchOptions } from '#app'
 
 export function requestCore<DataT>(url: string, options: UseFetchOptions<DataT>) {
   // const config = useRuntimeConfig()
+  const {$mitt} = useNuxtApp()
   return useFetch(url, {
     baseURL: "https://cantyonion.site",
     retry: false,
@@ -25,7 +26,7 @@ export function requestCore<DataT>(url: string, options: UseFetchOptions<DataT>)
       // }
     },
     onResponseError({ response }) {
-      emitter.emit('eventBus', {
+      $mitt.emit('eventBus', {
         level: 'error',
         title: `HTTP错误：${response.status}`,
         message: response.statusText

error.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import type { NuxtError } from '#app'
+import { setMobileTopColor } from '~/composables/function'
 
 const props = defineProps({
   error: Object as () => NuxtError
 })
 
+const {$mitt} = useNuxtApp()
+
 const errorMessages: Record<string, { icon: string; title: string; message: string }> = {
   '400': {
     icon: '❓',
@@ -42,7 +45,12 @@ const errorContent = computed(() => errorMessages[props.error!.statusCode] || er
 console.error(props.error)
 
 onMounted(() => {
-  emitter.emit("startLoading", false)
+  $mitt.emit("startLoading", false)
+  setMobileTopColor()
+})
+
+onUnmounted(() => {
+  removeMobileTopColor()
 })
 </script>
 

nuxt.config.ts

@@ -21,7 +21,7 @@ export default defineNuxtConfig({
   components: true,
   css: [
     '@fortawesome/fontawesome-svg-core/styles.css',
-    'github-markdown-css/github-markdown.css',
+    'github-markdown-css/github-markdown-light.css',
     '~/assets/css/main.scss'
   ],
   postcss: {

pages/article.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+const {$mitt} = useNuxtApp()
 
 onMounted( () => {
-  emitter.emit('startLoading', false)
+  $mitt.emit('startLoading', false)
 })
 </script>
 

pages/error/maintenance.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+const {$mitt} = useNuxtApp()
+
 onMounted(() => {
-  emitter.emit("startLoading", false)
+  $mitt.emit("startLoading", false)
 })
 </script>
 

pages/index.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import {computed, onMounted, ref} from "vue";
 
+const {$mitt} = useNuxtApp()
 const recentPosts = ref<IPost[] | null>(null);
 const recentActivities = ref<IActivity[] | null>(null);
 const isLoading = ref({
@@ -76,7 +77,7 @@ await reloadPosts()
 await reloadActivities()
 
 onMounted(() => {
-  emitter.emit('startLoading', false)
+  $mitt.emit('startLoading', false)
 })
 </script>
 

plugins/mitt.ts

@@ -0,0 +1,19 @@
+import mitt from 'mitt'
+
+type Events = {
+    openPost: IPost
+    startLoading: boolean
+    eventBus: INotification
+}
+
+
+
+export default defineNuxtPlugin(() => {
+    const emitter = mitt<Events>()
+
+    return {
+        provide: {
+            mitt: emitter
+        }
+    }
+})