✨ feat(components): add Helpme, update NCard

components/Helpme.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+// @ts-ignore: 2307
+import { withDefaults, defineProps } from 'vue'
+import NCard from './NCard.vue'
+const props = withDefaults(
+    // @ts-ignore: 2307
+    defineProps<{
+        afdian?: boolean,
+        readBeforeAsk?: boolean
+    }>(),
+    {
+        afdian: false,
+        readBeforeAsk: false,
+    }
+)
+</script>
+<template>
+    <div class="ncard">
+
+        <div class="ncard-desc">
+            <p class="ncard-title">向我们寻求帮助</p>
+            <slot></slot>
+            <NCard v-if="props.readBeforeAsk" title="✨ 遇到问题了怎么办？" link="/problems#运营团队-或是帮助你的人-并不是神" target="_blank">
+                在联系我们之前，请<mark>务必认真仔细地阅读一下这篇文章</mark>，有助于更好地帮助你解决问题
+            </NCard>
+        </div>
+
+
+        <div class="card-container">
+            <div class="support-card">
+                <a href="/user-group" target="_blank">
+                    <div class="support-card-body">
+                        <div class="title-text text">
+                            🙋 加入用户交流群
+                        </div>
+                    </div>
+                </a>
+            </div>
+            <div class="support-card">
+                <a href="/email" target="_blank">
+                    <div class="support-card-body">
+                        <div class="title-text text">
+                            📬️ 发送邮件工单
+                        </div>
+                    </div>
+                </a>
+            </div>
+            <div v-if="props.afdian" class="support-card">
+                <a href="https://afdian.net/a/tnqzh123" target="_blank">
+                    <div class="support-card-body">
+                        <div class="title-text text">
+                            🧑‍🔬 1v1 技术支持
+                        </div>
+                    </div>
+                </a>
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<style scoped>
+.ncard {
+    margin: 2em 0;
+}
+.card-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+.support-card {
+    border: 1px solid #ebedf0;
+    box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, .15);
+    margin-bottom: 2em;
+    border-radius: 8px;
+    transition: all 200ms ease;
+
+    margin: .5em .5em;
+    flex-grow: 1;
+    flex-basis: 14em;
+}
+
+.support-card:hover {
+    border: 1px solid var(--vp-c-brand);
+    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .1);
+}
+
+.support-card-body {
+    padding: 1.8em;
+}
+
+a {
+    color: var(--vp-c-text-1);
+    text-decoration-line: none;
+}
+
+a::after {
+    content: none !important;
+}
+
+.title-text {
+    font-size: 1.2em;
+}
+
+.ncard-title {
+    font-size: 1.5em;
+}
+
+.ncard-desc {
+    font-size: 0.9em;
+    margin-left: 1em;
+    margin-right: 1em;
+    margin-bottom: .8em;
+}
+</style>

components/NCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // @ts-ignore: 2307
-import { withDefaults } from 'vue'
+import { withDefaults, defineProps } from 'vue'
 const props = withDefaults(
     // @ts-ignore: 2307
     defineProps<{

docs/.vitepress/theme/index.ts

@@ -25,6 +25,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import BSButton from '../../../components/BSButton.vue'
 import BSSection from '../../../components/BSSection.vue'
 import NCard from '../../../components/NCard.vue'
+import Helpme from "../../../components/Helpme.vue"
 
 export const Theme: ThemeConfig = {
     extends: DefaultTheme,
@@ -53,6 +54,7 @@ export const Theme: ThemeConfig = {
             .component('BSButton', BSButton)
             .component('BSSection', BSSection)
             .component('NCard', NCard)
+            .component("Helpme", Helpme)
     }
 }
 export default Theme