fix(crowdsourcing): fix md styles for crowdsourcing page

Author: SkyBird233

src/components/MarkdownDetail.vue

@@ -1,8 +1,7 @@
 <script setup>
-import CategorySecond from './CategorySecond.vue';
 import PageNotFound from './PageNotFound.vue';
 import { useRoute } from 'vue-router';
-import { ref, shallowRef, defineAsyncComponent, watchEffect } from 'vue';
+import { shallowRef, defineAsyncComponent, watch } from 'vue';
 
 const props = defineProps({
   articles: {
@@ -17,7 +16,7 @@ const props = defineProps({
 
 const route = useRoute();
 const loadError = shallowRef(false);
-const articleComponent = ref();
+const articleComponent = shallowRef();
 
 function loadArticle(slug) {
   const path = `${props.pathPrefix ?? './articles/'}${slug.split('#')[0]}${props.pathSuffix ?? '.md'}`;
@@ -32,11 +31,10 @@ function loadArticle(slug) {
 }
 
 loadArticle(route.params.slug);
-watchEffect(
+watch(
   () => route.params.slug.split('#')[0],
-  () => {
-    loadArticle(route.params.slug);
-  }
+  (newSlug) => loadArticle(newSlug),
+  { immediate: true }
 );
 </script>
 
@@ -46,11 +44,7 @@ watchEffect(
       <PageNotFound />
     </template>
     <template v-else>
-      <CategorySecond v-if="title" :title="title" />
-      <component
-        class="vuepress-markdown-body"
-        :is="articleComponent"
-        ref="mdComponent" />
+      <component class="vuepress-markdown-body" :is="articleComponent" />
     </template>
   </div>
 </template>

src/css/index.scss

@@ -60,10 +60,7 @@ $bg-secondary: #3f6075;
   height: 2rem !important;
   align-items: center !important;
   justify-content: space-between !important;
-  padding-left: 10px !important;
-  padding-right: 10px !important;
-  padding-top: 5px !important;
-  padding-bottom: 5px !important;
+  padding: 5px 10px !important;
   line-height: normal !important;
   color: #fff !important;
   user-select: none !important;
@@ -88,6 +85,12 @@ $bg-secondary: #3f6075;
     padding: 0 !important;
   }
 
+  // Vuepress' CSS has already removed the top margin for the first child
+  // Add it back as we've removed default paddings
+  > :first-child:not(h2){
+    margin-top: $space-lg !important;
+  }
+
   h1 {
     background-color: $bg-secondary;
     color: #fff;
@@ -100,8 +103,6 @@ $bg-secondary: #3f6075;
 
   h2 {
     border-bottom-width: 0;
-    // Vuepress' CSS has already removed the top margin for the first child
-    // so the top margin here works as expected
     margin-top: $space-lg !important;
     margin-bottom: $space-lg !important;
   }

src/pages/crowdsourcing/CrowdsourcingIndex.vue

@@ -29,7 +29,7 @@ const catalog = Object.entries(csArticleFrontmatters).map(([path, title]) => {
         >的要求，社区不接受作为社区及项目运转资金之用的捐款。但由于我社作为无运作资本的志愿者社区，在社区日常运营及为具体项目购置大宗物件（如构建用服务器和
         AOSCC
         年度聚会等场合）时经常需要资金及物质支持。因此，我们接受针对特定项目及购买计划的金钱、物品（如电脑机箱、电源及硬盘等）及服务（如网站服务器资源等）捐赠。</p
-      ><br />
+      >
     </div>
 
     <category-second title="补充条例" />