refactor: rename component name

src/.vitepress/data/pluginTags.ts

@@ -1,4 +1,4 @@
-import type { Tag } from '@theme/components/TagsFilter.vue'
+import type { Tag } from '@theme/components/MarketTagsFilter.vue'
 import type { PluginTagType } from './plugins.data'
 
 export interface PluginTag extends Tag {

src/.vitepress/plugins/markdownTransform.ts

@@ -45,9 +45,9 @@ export function MarkdownTransform(): Plugin {
           '<!-- PLACEHOLDER FOR WEBSITE - BEFORE FILE -->',
           [
             '<script setup>',
-            'import StyleDetailCard from "@theme/components/StyleDetailCard.vue"',
+            'import StyleDetails from "@theme/components/StyleDetails.vue"',
             '</script>',
-            '<StyleDetailCard />',
+            '<StyleDetails />',
           ].join('\n'),
         )
 

src/.vitepress/theme/components/Market.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useData } from 'vitepress'
-import { defineAsyncComponent, ref } from 'vue'
+import { defineAsyncComponent } from 'vue'
 
 // @ts-expect-error data 是 vitepress 的隐式导出
 import { data as _pluginUpdateTime } from '@data/update-time.data'
@@ -11,25 +11,25 @@ import MarketHero from './MarketHero.vue'
 const { frontmatter } = useData()
 const updateTime = frontmatter.value.type === 'plugin' ? _pluginUpdateTime.lastUpdate : _updateTime
 
-const PluginsList = defineAsyncComponent(() =>
-  import('./PluginsList.vue'))
-const PluginsChart = defineAsyncComponent(() =>
-  import ('./PluginsChart.vue'))
-const StylesList = defineAsyncComponent(() =>
-  import('./StylesList.vue'))
-const TranslatorList = defineAsyncComponent(() =>
-  import('./TranslatorsList.vue'))
+const PluginCards = defineAsyncComponent(() =>
+  import('./PluginCards.vue'))
+const PluginCharts = defineAsyncComponent(() =>
+  import ('./PluginCharts.vue'))
+const StyleCards = defineAsyncComponent(() =>
+  import('./StyleCards.vue'))
+const TranslatorCards = defineAsyncComponent(() =>
+  import('./TranslatorCards.vue'))
 
 function getComponentByType(type: string) {
   switch (type) {
     case 'plugin':
-      return PluginsList
+      return PluginCards
     case 'charts':
-      return PluginsChart
+      return PluginCharts
     case 'csl':
-      return StylesList
+      return StyleCards
     case 'translator':
-      return TranslatorList
+      return TranslatorCards
     default:
       return null
   }

src/.vitepress/theme/components/PluginsList.vue → src/.vitepress/theme/components/PluginCards.vue

@@ -2,8 +2,8 @@
 import { type Ref, computed, ref, toRef } from 'vue'
 import { syncRef, useUrlSearchParams } from '@vueuse/core'
 
-import Search from '@theme/components/Search.vue'
-import TagsFilter from '@theme/components/TagsFilter.vue'
+import MarketSearch from '@theme/components/MarketSearch.vue'
+import MarketTagsFilter from '@theme/components/MarketTagsFilter.vue'
 import MarketToolBar from '@theme/components/MarketToolBar.vue'
 import { data as plugins } from '@data/plugins.data'
 import type { PluginInfo, PluginTagType } from '@data/plugins.data'
@@ -117,11 +117,11 @@ function showDownload(plugin: PluginInfo) {
     </el-select>
 
     <!-- 搜索 -->
-    <Search v-model="searchText" placeholder="搜索插件..." />
+    <MarketSearch v-model="searchText" placeholder="搜索插件..." />
   </MarketToolBar>
 
   <!-- 标签筛选 -->
-  <TagsFilter v-model="selectedTags" :tags="allTags" />
+  <MarketTagsFilter v-model="selectedTags" :tags="allTags" />
 
   <!-- 插件卡片列表 -->
   <el-row>

src/.vitepress/theme/components/StylesList.vue → src/.vitepress/theme/components/StyleCards.vue

@@ -2,13 +2,13 @@
 import { type Ref, computed, ref, toRef } from 'vue'
 import { syncRef, useUrlSearchParams } from '@vueuse/core'
 
-import Search from '@theme/components/Search.vue'
-import TagsFilter from '@theme/components/TagsFilter.vue'
+import MarketSearch from '@theme/components/MarketSearch.vue'
+import MarketTagsFilter from '@theme/components/MarketTagsFilter.vue'
 import MarketToolBar from '@theme/components/MarketToolBar.vue'
 
 import { data as styles } from '@data/styles.data'
-import StyleListItem from './StyleListItem.vue'
-import StyleListItemPreview from './StyleListItemPreview.vue'
+import StyleCardWithPop from './StyleCardWithPop.vue'
+import StyleCardWithPreview from './StyleCardWithPreview.vue'
 
 const allTags = [...new Set(styles.flatMap(style => style.tags))]
   .sort((a, b) => a.localeCompare(b, 'zh'))
@@ -153,7 +153,7 @@ const filtered = computed(() => {
     </el-select>
 
     <!-- 搜索 -->
-    <Search v-model="searchText" placeholder="搜索样式名称..." />
+    <MarketSearch v-model="searchText" placeholder="搜索样式名称..." />
 
     <!-- 显示预览 -->
     <el-switch
@@ -166,18 +166,18 @@ const filtered = computed(() => {
   </MarketToolBar>
 
   <!-- 标签筛选 -->
-  <TagsFilter v-model="selectedTags" :tags="allTags" />
+  <MarketTagsFilter v-model="selectedTags" :tags="allTags" />
 
   <!-- 列表 -->
   <div class="styles-list vp-doc">
     <p>共加载 {{ filtered.length }} 条样式。</p>
     <ul v-if="!showPreview">
       <li v-for="style in filtered" :key="style.id">
-        <StyleListItem :style="style" />
+        <StyleCardWithPop :style="style" />
       </li>
     </ul>
     <div v-else>
-      <StyleListItemPreview
+      <StyleCardWithPreview
         v-for="style in filtered"
         :key="style.id"
         :style="style"

src/.vitepress/theme/components/TranslatorsList.vue → src/.vitepress/theme/components/TranslatorCards.vue

@@ -2,8 +2,8 @@
 import { type Ref, computed, ref, toRef } from 'vue'
 import { syncRef, useUrlSearchParams } from '@vueuse/core'
 
-import Search from '@theme/components/Search.vue'
-import TagsFilter from '@theme/components/TagsFilter.vue'
+import MarketSearch from '@theme/components/MarketSearch.vue'
+import MarketTagsFilter from '@theme/components/MarketTagsFilter.vue'
 import MarketToolBar from '@theme/components/MarketToolBar.vue'
 
 import { data } from '@data/translatorsLittle.data'
@@ -60,11 +60,11 @@ const filtered = computed(() => {
 <template>
   <MarketToolBar>
     <!-- 搜索 -->
-    <Search v-model="searchText" placeholder="搜索转换器名称或匹配网址..." />
+    <MarketSearch v-model="searchText" placeholder="搜索转换器名称或匹配网址..." />
   </MarketToolBar>
 
   <!-- 标签筛选 -->
-  <TagsFilter v-model="selectedTags" :tags="translatorTypes" />
+  <MarketTagsFilter v-model="selectedTags" :tags="translatorTypes" />
 
   <!-- 插件卡片列表 -->
   <el-row>

src/.vitepress/theme/components/TranslatorDetails.vue

@@ -2,9 +2,9 @@
 // TODO: 解决此文件类型检查错误
 
 import { useData } from 'vitepress'
-import type { Translator } from '@data/translatorsLittle.data'
 import type { Ref } from 'vue'
 import { toRef } from 'vue'
+import type { Translator } from '@data/translatorsLittle.data'
 import {
   useCreatorType,
   useItemField,