更新页面

Author: Zaitonn

.vitepress/components/CustomLayout.vue

@@ -18,7 +18,7 @@ const plugin = computed<PluginDetailedInfo | undefined>(() => data.all[useData()
 <template>
   <Layout>
     <template #doc-before>
-      <div v-if="frontmatter.id" class="vp-doc">
+      <div v-if="frontmatter.id" class="vp-doc external-link-icon-enabled">
         <h1>
           {{ frontmatter.title }}
           <Badge v-text="frontmatter.id" type="info" />
@@ -28,7 +28,7 @@ const plugin = computed<PluginDetailedInfo | undefined>(() => data.all[useData()
     </template>
 
     <template #doc-footer-before>
-      <div v-if="frontmatter.id" class="vp-doc">
+      <div v-if="frontmatter.id" class="vp-doc external-link-icon-enabled">
         <h2>下载</h2>
         <DownloadBar :plugin="plugin" />
       </div>

.vitepress/components/DownloadBar.vue

@@ -5,21 +5,46 @@ defineProps({
   plugin: {
     type: Object as () => PluginDetailedInfo | undefined,
     required: true,
-  }
-})
+  },
+});
 </script>
 
 <template>
   <div v-if="plugin">
-    <div v-if="Object.keys(plugin.repo.releases).length > 0" v-for="tag of Object.keys(plugin.repo.releases)">
+    <div
+      class="info custom-block"
+      v-if="plugin.dependencies && plugin.dependencies.length > 0"
+    >
+      <p class="custom-block-title">信息</p>
+      <p>此插件可能还需要以下依赖：</p>
+
+      <ul>
+        <li v-for="dependency of plugin.dependencies">
+          <code> {{ dependency.id }}</code>
+
+          <ul>
+            <li v-for="version of dependency.version">
+              <code> {{ version }}</code>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+
+    <div
+      v-if="Object.keys(plugin.repo.releases).length > 0"
+      v-for="tag of Object.keys(plugin.repo.releases)"
+    >
       <h3>
         <a :href="plugin.repo.releases[tag].url" target="_blank">{{ tag }}</a>
 
-        <span class="published-at">({{
-          new Date(
-            plugin.repo.releases[tag].publishedAt
-          ).toLocaleDateString()
-        }})</span>
+        <span class="published-at"
+          >({{
+            new Date(
+              plugin.repo.releases[tag].publishedAt
+            ).toLocaleDateString()
+          }})</span
+        >
       </h3>
 
       <table v-if="plugin.repo.releases[tag].assets">
@@ -33,8 +58,8 @@ defineProps({
             <td>
               <a :href="asset.url" target="_blank">
                 <code>
-              {{ asset.name }}
-            </code>
+                  {{ asset.name }}
+                </code>
               </a>
             </td>
             <td>{{ (asset.size / 1024).toFixed(2) }} KB</td>
@@ -46,7 +71,7 @@ defineProps({
 
     <div v-else>
       <div class="warning custom-block">
-        <p class="custom-block-title">WARNING</p>
+        <p class="custom-block-title">注意</p>
         <p>
           暂无发布版本，你可以到
           <a :href="plugin.repo.url" target="_blank">插件的仓库</a>

.vitepress/components/PluginInfoBar.vue

@@ -5,8 +5,8 @@ defineProps({
   plugin: {
     type: Object as () => PluginDetailedInfo | undefined,
     required: true,
-  }
-})
+  },
+});
 </script>
 
 <template>
@@ -28,24 +28,27 @@ defineProps({
       <tr>
         <td>标签</td>
         <td>
-          <Badge v-for="tag of plugin.tags" type="tip" :text="{
-            entertainment: '娱乐',
-            development: '开发',
-            tool: '工具',
-            information: '信息',
-            management: '管理',
-            api: 'API',
-          }[tag]
-            " />
+          <Badge
+            v-for="tag of plugin.tags"
+            type="tip"
+            :text="
+              {
+                entertainment: '娱乐',
+                development: '开发',
+                tool: '工具',
+                information: '信息',
+                management: '管理',
+                api: 'API',
+              }[tag]
+            "
+          />
         </td>
       </tr>
 
       <tr>
         <td>作者</td>
         <td>
-          {{
-            plugin.authors.map((author) => author.name).join(', ') || '-'
-          }}
+          {{ plugin.authors.map((author) => author.name).join(', ') || '-' }}
         </td>
       </tr>
 
@@ -61,8 +64,7 @@ defineProps({
           </div>
 
           <div class="updated-at">
-            (
-            最后更新于
+            ( 最后更新于
             {{ new Date(plugin.repo.updatedAt).toLocaleString() }}
             )
           </div>

.vitepress/components/PluginListPage.vue

@@ -5,21 +5,35 @@ import { computed, ref } from 'vue';
 import { PluginDetailedInfo } from '../libs/type.ts';
 import { useRouter } from 'vitepress';
 
+const tags = {
+  entertainment: '娱乐',
+  development: '开发',
+  tool: '工具',
+  information: '信息',
+  management: '管理',
+  api: 'API',
+};
+
+const selectTags = ref<string[]>([]);
+
 const router = useRouter();
 const plugins = Object.entries(
   data.all as { [key: string]: PluginDetailedInfo }
 );
 
 const search = ref('');
 const filteredPlugins = computed(() => {
-  if (!search.value) return plugins;
+  if (!search.value && !selectTags.value.length) return plugins;
 
   const searchLower = search.value.toLowerCase();
-  return plugins.filter(
-    ([id, plugin]) =>
-      id.toLowerCase().includes(searchLower) ||
-      plugin.name.toLowerCase().includes(searchLower) ||
-      plugin.description.toLowerCase().includes(searchLower)
+  return plugins.filter(([id, plugin]) =>
+    search.value
+      ? id.toLowerCase().includes(searchLower) ||
+        plugin.name.toLowerCase().includes(searchLower) ||
+        plugin.description.toLowerCase().includes(searchLower)
+      : false || selectTags.value.length
+      ? plugin.tags.some((tag) => selectTags.value.includes(tag))
+      : false
   );
 });
 </script>
@@ -40,9 +54,26 @@ const filteredPlugins = computed(() => {
       />
     </div>
 
+    <div class="tag-filter">
+      <Badge
+        v-for="tag in Object.keys(tags)"
+        :key="tag"
+        :type="selectTags.includes(tag) ? 'tip' : 'info'"
+        :text="tags[tag]"
+        :class="{ selected: selectTags.includes(tag) }"
+        @click="
+          selectTags.includes(tag)
+            ? selectTags.splice(selectTags.indexOf(tag), 1)
+            : selectTags.push(tag)
+        "
+      />
+    </div>
+
     <div class="plugin-count">
-      当前共{{ plugins.length }}个插件
-      <span v-if="search">，搜索结果：{{ filteredPlugins.length }}个</span>
+      共 {{ plugins.length }} 个插件
+      <span v-if="search || selectTags.length">
+        · 搜索结果：{{ filteredPlugins.length }} 个
+      </span>
     </div>
 
     <div class="plugin-list">
@@ -102,7 +133,6 @@ h1 {
   border-radius: 8px;
   border-color: transparent;
   background: var(--vp-c-bg-alt);
-  cursor: pointer;
   outline: none;
   transition: border-color 0.25s;
 }
@@ -111,9 +141,33 @@ h1 {
   border-color: var(--vp-c-brand-1);
 }
 
+#search-box:hover:not(:focus) {
+  cursor: pointer;
+}
+
 .search-box-container {
   margin: 20px 0;
 }
+
+.tag-filter {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.tag-filter > * {
+  margin: 10px;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+  transition: opacity 0.25s;
+}
+
+.tag-filter > *:hover {
+  opacity: 0.8;
+}
+
 .plugin-count {
   width: 100%;
   text-align: center;
@@ -123,7 +177,7 @@ h1 {
 
 .plugin-list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   margin: 20px 5px;
 }
@@ -135,7 +189,6 @@ h1 {
   border-color: var(--vp-c-gray-3);
   transition: border-color 0.25s;
   cursor: pointer;
-
   display: flex;
   flex-direction: column;
   min-height: 180px;
@@ -157,4 +210,10 @@ h1 {
   flex-wrap: wrap;
   gap: 4px;
 }
+
+@media screen and (max-width: 768px) {
+  .plugin-list {
+    grid-template-columns: 1fr;
+  }
+}
 </style>

.vitepress/config.mts

@@ -1,5 +1,6 @@
 import { DefaultTheme, defineConfig } from 'vitepress';
 import { generateSidebar } from 'vitepress-sidebar';
+import { MermaidMarkdown, MermaidPlugin } from 'vitepress-plugin-mermaid';
 
 const locales: Partial<DefaultTheme.Config> = {
   outline: {
@@ -25,18 +26,35 @@ const locales: Partial<DefaultTheme.Config> = {
   darkModeSwitchTitle: '切换到深色模式',
 };
 
-// https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: 'Serein 社区',
   description: 'Serein 社区',
   cleanUrls: true,
   head: [['link', { rel: 'icon', href: '/logo.png' }]],
 
-  vite: { server: { port: 5100 } },
+  vite: {
+    server: { port: 5100 },
+    plugins: [MermaidPlugin()],
+    optimizeDeps: {
+      include: ['mermaid'],
+    },
+  },
   srcExclude: ['README.md'],
 
+  markdown: {
+    container: {
+      tipLabel: '提示',
+      warningLabel: '注意',
+      dangerLabel: '警告',
+      infoLabel: '信息',
+      detailsLabel: '详细信息',
+    },
+    config: (md) => md.use(MermaidMarkdown),
+  },
+
   themeConfig: {
-    // https://vitepress.dev/reference/default-theme-config
+    externalLinkIcon: true,
+
     nav: [
       { text: '插件', link: '/plugins/' },
       { text: '整合包', link: '/packages/' },
@@ -58,7 +76,7 @@ export default defineConfig({
 
     footer: {
       message: 'Built with VitePress',
-      copyright: 'Copyright © 2022 Zaitonn. All Rights Reserved.',
+      copyright: 'Copyright © 2025 SereinCommunity. All Rights Reserved.',
     },
 
     search: {

.vitepress/libs/pluginManager.ts

@@ -14,6 +14,6 @@ export default {
 
 function read(fileName: string) {
   return JSON.parse(
-    readFileSync(path.join('public', 'gallery', 'plugins', fileName), 'utf-8')
+    readFileSync(path.join('public', 'indexes', 'plugins', fileName), 'utf-8')
   ).data;
 }