refactor(markdown): extract MarkdownDetail component for AOSCC and Crowdsourcing pages

Author: SkyBird233

src/components/MarkdownDetail.vue

@@ -0,0 +1,56 @@
+<script setup>
+import CategorySecond from './CategorySecond.vue';
+import PageNotFound from './PageNotFound.vue';
+import { useRoute } from 'vue-router';
+import { ref, shallowRef, defineAsyncComponent, watchEffect } from 'vue';
+
+const props = defineProps({
+  articles: {
+    type: Object,
+    required: true
+  },
+  title: String,
+  pathPrefix: String,
+  pathSuffix: String
+});
+// const articles = import.meta.glob('./articles/*.zh.md');
+
+const route = useRoute();
+const loadError = shallowRef(false);
+const articleComponent = ref();
+
+function loadArticle(slug) {
+  const path = `${props.pathPrefix ?? './articles/'}${slug.split('#')[0]}${props.pathSuffix ?? '.md'}`;
+  const loader = props.articles[path];
+  if (!loader) loadError.value = true;
+  articleComponent.value = defineAsyncComponent({
+    loader,
+    onError: (error, retry, fail, attempts) => {
+      loadError.value = error;
+    }
+  });
+}
+
+loadArticle(route.params.slug);
+watchEffect(
+  () => route.params.slug.split('#')[0],
+  () => {
+    loadArticle(route.params.slug);
+  }
+);
+</script>
+
+<template>
+  <div class="pl-[1px]">
+    <template v-if="loadError">
+      <PageNotFound />
+    </template>
+    <template v-else>
+      <CategorySecond v-if="title" :title="title" />
+      <component
+        class="vuepress-markdown-body"
+        :is="articleComponent"
+        ref="mdComponent" />
+    </template>
+  </div>
+</template>

src/pages/aoscc/AosccDetail.vue

@@ -1,31 +1,9 @@
 <script setup>
-import PageNotFound from '../../components/PageNotFound.vue';
-import { useRoute } from 'vue-router';
-import { ref, defineAsyncComponent, watch } from 'vue';
+import MarkdownDetail from '../../components/MarkdownDetail.vue';
 
-const route = useRoute();
-const error = ref();
-const articleComponent = ref();
 const articles = import.meta.glob('./articles/*.zh.md');
-
-function loadArticle(slug) {
-  const path = `./articles/${slug.split('#')[0]}.zh.md`;
-  const loader = articles[path];
-  if (!loader) error.value = true;
-  articleComponent.value = defineAsyncComponent(loader);
-}
-
-loadArticle(route.params.slug);
-watch(() => route.params.slug.split('#')[0], loadArticle(route.params.slug));
 </script>
 
 <template>
-  <div class="pl-[1px]">
-    <template v-if="error">
-      <page-not-found />
-    </template>
-    <template v-else>
-      <component class="vuepress-markdown-body" :is="articleComponent" />
-    </template>
-  </div>
+  <MarkdownDetail :articles="articles" title="AOSCC" path-suffix=".zh.md" />
 </template>

src/pages/crowdsourcing/CrowdsourcingDetail.vue

@@ -1,33 +1,9 @@
 <script setup>
-import CategorySecond from '../../components/CategorySecond.vue';
-import PageNotFound from '../../components/PageNotFound.vue';
-import { useRoute } from 'vue-router';
-import { ref, defineAsyncComponent, watch } from 'vue';
+import MarkdownDetail from '../../components/MarkdownDetail.vue';
 
-const route = useRoute();
-const error = ref(false);
-const articleComponent = ref();
 const articles = import.meta.glob('./articles/*.zh.md');
-
-function loadArticle(slug) {
-  const path = `./articles/${slug.split('#')[0]}.zh.md`;
-  const loader = articles[path];
-  if (!loader) error.value = true;
-  articleComponent.value = defineAsyncComponent(loader);
-}
-
-loadArticle(route.params.slug);
-watch(() => route.params.slug.split('#')[0], loadArticle(route.params.slug));
 </script>
 
 <template>
-  <div class="pl-[1px]">
-    <template v-if="error">
-      <page-not-found />
-    </template>
-    <template v-else>
-      <category-second v-if="!error" title="AOSCC" />
-      <component class="vuepress-markdown-body" :is="articleComponent" />
-    </template>
-  </div>
+  <MarkdownDetail :articles="articles" title="众筹详情" path-suffix=".zh.md" />
 </template>