feat: about page

open-isle-cli/src/assets/global.css

@@ -173,20 +173,24 @@ body {
 }
 
 @media (max-width: 768px) {
+  .about-content h1,
   .info-content-text h1 {
     font-size: 20px;
   }
 
+  .about-content h2,
   .info-content-text h2 {
     font-size: 18px;
   }
 
+  .about-content p,
   .info-content-text p {
     font-size: 14px;
     margin-top: 3px;
     margin-bottom: 3px;
   }
 
+  .about-content li,
   .info-content-text li {
     font-size: 14px;
   }

open-isle-cli/src/views/AboutPageView.vue

@@ -11,27 +11,34 @@
       </div>
     </div>
     <div class="about-content" v-html="renderMarkdown(content)"></div>
+    <div class="about-loading" v-if="isFetching">
+      <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
+    </div>
   </div>
 </template>
 
 <script>
 import { ref, onMounted } from 'vue'
 import { renderMarkdown } from '../utils/markdown'
+import { hatch } from 'ldrs'
+hatch.register()
 
 export default {
   name: 'AboutPageView',
   setup() {
+    const isFetching = ref(false)
     const tabs = [
       { name: 'about', label: '关于', file: '/about/about.md' },
       { name: 'agreement', label: '用户协议', file: '/about/agreement.md' },
       { name: 'guideline', label: '创作准则', file: '/about/guideline.md' },
-      { name: 'privacy', label: '隐私政策', file: '/about/privacy.md' }
+      { name: 'privacy', label: '隐私政策', file: '/about/privacy.md' },
     ]
     const selectedTab = ref(tabs[0].name)
     const content = ref('')
 
     const loadContent = async (file) => {
       try {
+        isFetching.value = true
         const res = await fetch(file)
         if (res.ok) {
           content.value = await res.text()
@@ -41,6 +48,7 @@ export default {
       } catch (e) {
         content.value = '# 内容加载失败'
       }
+      isFetching.value = false
     }
 
     const selectTab = (name) => {
@@ -53,7 +61,7 @@ export default {
       loadContent(tabs[0].file)
     })
 
-    return { tabs, selectedTab, content, renderMarkdown, selectTab }
+    return { tabs, selectedTab, content, renderMarkdown, selectTab, isFetching }
   }
 }
 </script>
@@ -72,11 +80,14 @@ export default {
   flex-direction: row;
   border-bottom: 1px solid var(--normal-border-color);
   margin-bottom: 20px;
+  overflow-x: auto;
+  scrollbar-width: none;
 }
 
 .about-tabs-item {
   padding: 10px 20px;
   cursor: pointer;
+  white-space: nowrap;
 }
 
 .about-tabs-item.selected {
@@ -88,4 +99,18 @@ export default {
   line-height: 1.6;
   padding: 20px;
 }
+
+.about-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+
+@media (max-width: 768px) {
+  .about-tabs {
+    width: 100vw;
+  }
+}
+
 </style>