feat: double comment and bangumi addon docs (#357)

* feat: double comment and bangumi addon docs

* feat: change Switch to Select and upgrade bangumi dependency

demo/yun/valaxy.config.ts

@@ -7,6 +7,7 @@ import { addonComponents } from 'valaxy-addon-components'
 import { addonLightGallery } from 'valaxy-addon-lightgallery'
 import { addonTest } from 'valaxy-addon-test'
 import { addonWaline } from 'valaxy-addon-waline'
+import { addonTwikoo } from 'valaxy-addon-twikoo'
 
 import { addonMeting } from 'valaxy-addon-meting'
 
@@ -96,9 +97,9 @@ export default defineValaxyConfig<ThemeConfig>({
         type: 'song',
       },
     }),
-    // addonTwikoo({
-    //   envId: 'https://twikoo.vercel.app',
-    // }),
+    addonTwikoo({
+      envId: 'https://twikoo.vercel.app',
+    }),
     addonTest(),
   ],
 })

packages/valaxy-addon-bangumi/README.md

@@ -40,6 +40,24 @@ description: Bangumi 追番列表
 <ValaxyBangumi />
 ```
 
+## 样式覆盖
+
+bilibili-bangumi-component 使用 WebComponent 实现，而 Shadow DOM 具有隔离性，外部样式样式无法覆盖内部样式，可以通过下面的方式覆盖：
+
+```ts
+// valaxy.config.ts
+import { defineConfig } from 'valaxy'
+import { addonBangumi } from 'valaxy-addon-bangumi'
+
+export default defineConfig({
+  addons: [
+    addonBangumi({
+      customCss: '.bbc-bangumi-title a { color: red; }'
+    }),
+  ]
+})
+```
+
 ## API
 
 | 字段           | 描述                                     | 默认值 |
@@ -49,3 +67,4 @@ description: Bangumi 追番列表
 | bgm-uid            | Bangumi 的 uid，在后端中引入 uid 的 env 后可以不设置  | - |
 | bilibili-enabled   | 是否展示 Bilibili 平台                             | true |
 | bgm-enabled        | 是否展示 Bangumi 平台                              | true|
+| customCss          | 自定义 css                                        | - |

packages/valaxy-addon-bangumi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-addon-bangumi",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Bangumi addon for Valaxy",
   "repository": {
     "type": "git",
@@ -17,6 +17,6 @@
     "valaxy": "latest"
   },
   "dependencies": {
-    "bilibili-bangumi-component": "^0.2.0"
+    "bilibili-bangumi-component": "^0.2.1"
   }
 }

packages/valaxy-theme-yun/components/YunComment.vue

@@ -1,14 +1,25 @@
 <script lang="ts" setup>
 import { useRuntimeConfig } from 'valaxy'
+import { computed, ref } from 'vue'
 
 const runtimeConfig = useRuntimeConfig()
+const supportCommentAddons = ['valaxy-addon-waline', 'valaxy-addon-twikoo']
+
+const commentSystems = computed(() => {
+  return supportCommentAddons.filter(addonName => runtimeConfig.value.addons[addonName]).map(addonName => addonName.split('-')[2])
+})
+
+const activeComment = ref(commentSystems.value[0])
 </script>
 
 <template>
   <YunCard w="full" p="4" class="comment yun-comment sm:p-6 lg:px-12 xl:px-16">
     <ClientOnly>
-      <YunWaline v-if="runtimeConfig.addons['valaxy-addon-waline']" />
-      <YunTwikoo v-if="runtimeConfig.addons['valaxy-addon-twikoo']" />
+      <div v-if="commentSystems.length > 1" class="flex justify-end w-full mb-2">
+        <YunSelect v-model="activeComment" :options="commentSystems" />
+      </div>
+      <YunWaline v-if="activeComment === 'waline'" />
+      <YunTwikoo v-if="activeComment === 'twikoo'" />
       <slot />
     </ClientOnly>
   </YunCard>

packages/valaxy-theme-yun/components/YunSelect.vue

@@ -0,0 +1,59 @@
+<script setup lang='ts'>
+import { useEventListener } from '@vueuse/core'
+import { ref } from 'vue'
+
+defineProps<{
+  options: string[]
+}>()
+
+const activeValue = defineModel()
+const optionVisible = ref(false)
+
+useEventListener('click', () => {
+  optionVisible.value = false
+})
+</script>
+
+<template>
+  <div class="relative h-8 w-30 text-[var(--va-c-text-2)] z-100">
+    <button
+      class="flex h-full w-full px-2 items-center justify-between border rounded-2 transition"
+      :class="optionVisible ? 'border-[var(--va-c-primary)] shadow-lg' : ''"
+      @click.stop="optionVisible = true"
+    >
+      <span>{{ activeValue }}</span>
+      <div inline-flex i-ri-arrow-down-s-line />
+    </button>
+    <Transition>
+      <ul
+        v-show="optionVisible"
+        class="select-options absolute translate-y-1 left-0 top-full w-full bg-[var(--va-c-bg-light)] overflow-hidden rounded-1 border"
+      >
+        <li
+          v-for="option in options"
+          :key="option"
+          class="cursor-pointer list-none px-2 hover:bg-[var(--va-c-primary-lighter)] hover:text-white"
+          @click="activeValue = option"
+        >
+          {{ option }}
+        </li>
+      </ul>
+    </Transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.select-options {
+  margin: 0;
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity .3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>

packages/valaxy-theme-yun/components/third/YunTwikoo.vue

@@ -8,5 +8,7 @@ if (!isEmptyAddon(addonTwikoo))
 </script>
 
 <template>
-  <div id="tcomment" w="full" />
+  <div>
+    <div id="tcomment" w="full" />
+  </div>
 </template>