From 4cfe31e3f41535bf7f132107c4891aa7fc3d6dd0 Mon Sep 17 00:00:00 2001
From: Northword <44738481+northword@users.noreply.github.com>
Date: Thu, 20 Jun 2024 10:34:39 +0800
Subject: [PATCH] feat(styles): support for always-on preview (#68)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: support for always-on preview

* 显示加载数量
---
 src/components.d.ts                           |  1 +
 src/styles/components/StyleListItem.vue       | 52 ++++---------
 .../components/StyleListItemPreview.vue       | 18 +++++
 src/styles/components/StylesList.vue          | 75 ++++++-------------
 4 files changed, 53 insertions(+), 93 deletions(-)
 create mode 100644 src/styles/components/StyleListItemPreview.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index 0dbaf6e..837497a 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -28,6 +28,7 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
diff --git a/src/styles/components/StyleListItem.vue b/src/styles/components/StyleListItem.vue
index 27fc318..1703289 100644
--- a/src/styles/components/StyleListItem.vue
+++ b/src/styles/components/StyleListItem.vue
@@ -1,48 +1,22 @@
 <script setup lang="ts">
 const props = defineProps<{
   style: Style;
-  mode?: "sample" | "full";
 }>();
 const style = props.style;
-const mode = props.mode ?? "sample";
 </script>
 
 <template>
-  <template v-if="mode === 'sample'">
-    <client-only>
-      <el-popover trigger="hover" width="90%">
-        <template #reference>
-          {{ style.title }}
-        </template>
-        <div class="csl-preview">
-          <h3>引注</h3>
-          <div v-html="style.citations"></div>
-          <h3>参考文献表</h3>
-          <div v-html="style.bibliography"></div>
-        </div>
-      </el-popover>
-    </client-only>
-  </template>
-  <template v-else>
-    <h2>{{ style.title }}</h2>
-    <div class="csl-preview">
-      <h3>引注</h3>
-      <div v-html="style.citations" class="csl-preview-citations"></div>
-      <h3>参考文献表</h3>
-      <div v-html="style.bibliography" class="csl-preview-bibliography"></div>
-    </div>
-  </template>
+  <client-only>
+    <el-popover trigger="hover" width="90%">
+      <template #reference>
+        <a :href="style.dir">{{ style.title }}</a>
+      </template>
+      <div class="csl-preview">
+        <h3>引注</h3>
+        <div v-html="style.citations"></div>
+        <h3>参考文献表</h3>
+        <div v-html="style.bibliography"></div>
+      </div>
+    </el-popover>
+  </client-only>
 </template>
-
-<style>
-.csl-preview {
-  /* font-family: Georgia, Times, "Times New Roman", serif; */
-  font-size: 1rem;
-}
-
-.csl-preview h3 {
-  font-weight: bold;
-  font-size: 1.5rem;
-  margin: 1rem 0;
-}
-</style>
diff --git a/src/styles/components/StyleListItemPreview.vue b/src/styles/components/StyleListItemPreview.vue
new file mode 100644
index 0000000..d3d39ca
--- /dev/null
+++ b/src/styles/components/StyleListItemPreview.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps<{
+  style: Style;
+}>();
+const style = props.style;
+</script>
+
+<template>
+  <a :href="style.dir">
+    <h2>{{ style.title }}</h2>
+  </a>
+  <div class="csl-preview">
+    <h3>引注</h3>
+    <div v-html="style.citations" class="csl-preview-citations"></div>
+    <h3>参考文献表</h3>
+    <div v-html="style.bibliography" class="csl-preview-bibliography"></div>
+  </div>
+</template>
diff --git a/src/styles/components/StylesList.vue b/src/styles/components/StylesList.vue
index 080b051..37b3be6 100644
--- a/src/styles/components/StylesList.vue
+++ b/src/styles/components/StylesList.vue
@@ -5,6 +5,7 @@ import { syncRef, useUrlSearchParams } from "@vueuse/core";
 import Search from "@theme/components/Search.vue";
 import TagsFilter from "@theme/components/TagsFilter.vue";
 import StyleListItem from "./StyleListItem.vue";
+import StyleListItemPreview from "./StyleListItemPreview.vue";
 
 import { data as styles } from "../data/styles.data";
 
@@ -85,24 +86,33 @@ const filtered = computed(() => {
     <Search v-model="searchText" placeholder="搜索样式名称..." />
 
     <!-- 显示预览 -->
-    <!-- <el-switch v-model="showPreview" /> -->
+    <el-switch
+      v-model="showPreview"
+      size="large"
+      inline-prompt
+      active-text="始终显示预览"
+      inactive-text="仅在悬浮时显示预览"
+    />
   </div>
 
   <!-- 标签筛选 -->
   <TagsFilter v-model="selectedTags" :tags="allTags" />
 
   <!-- 插件卡片列表 -->
-  <div class="styles-list">
-    <ul>
+  <div class="styles-list vp-doc">
+    <p>共加载 {{ filtered.length }} 条样式。</p>
+    <ul v-if="!showPreview">
       <li v-for="style in filtered" :key="style.id">
-        <a :href="style.dir">
-          <StyleListItem
-            :style="style"
-            :mode="showPreview ? 'full' : 'sample'"
-          />
-        </a>
+        <StyleListItem :style="style" />
       </li>
     </ul>
+    <div v-else>
+      <StyleListItemPreview
+        v-for="style in filtered"
+        :key="style.id"
+        :style="style"
+      />
+    </div>
   </div>
 
   <!-- 空状态 -->
@@ -118,51 +128,8 @@ const filtered = computed(() => {
 .toolbar > * {
   margin: 0 8px;
 }
-.toolbar > :first-child {
-  margin-left: 0;
-}
-.toolbar > :last-child {
-  margin-right: 0;
-}
-.el-checkbox-group {
-  display: flex;
-  justify-content: center;
-  padding-bottom: 20px;
-  flex-wrap: wrap;
-}
-
-.el-checkbox {
-  margin: 0px 10px 10px 0px;
-}
-
-.el-checkbox > :deep(.el-checkbox__input) {
-  display: none !important;
-}
-
-.el-checkbox-button {
-  border: var(--el-border);
-  border-radius: var(--el-border-radius-base);
-  /* box-shadow: none!important; */
-}
-.el-checkbox-button__inner {
-  border: unset !important;
-  border-left-color: unset !important;
-}
-
-.el-col {
-  border-radius: 4px;
-  min-height: 36px;
-  padding-bottom: 20px;
-}
 
-.styles-list ul {
-  display: block;
-  list-style-type: disc;
-  margin-block-start: 1em;
-  margin-block-end: 1em;
-  margin-inline-start: 0px;
-  margin-inline-end: 0px;
-  padding-inline-start: 40px;
-  unicode-bidi: isolate;
+.styles-list {
+  padding: 0 10rem;
 }
 </style>