修复狸豆页面

Author: ewt45

docs/.vuepress/client.ts

@@ -1,7 +1,9 @@
 import { defineClientConfig } from '@vuepress/client'
-// import CustomLayout from './CustomLayout.vue'
+//element plus 组件全局导入。还有默认/暗黑模式的样式
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css';
+import 'element-plus/theme-chalk/dark/css-vars.css'
+
 import EmptyLayout from './layouts/EmptyLayout.vue'
 
 

docs/.vuepress/components/PokopeaMain.vue

@@ -1,34 +1,24 @@
 <template>
-  <el-space fill direction="vertical" :size="24" alignment="center" style=" width:100%; padding:20px;">
-
-    <!-- <el-collapse>
-      <el-collapse-item>
-        <template #title>
-          <div style="width:100%;">筛选条件</div>
-        </template>
-<FilterOptions v-model="filterData" :onSubmit="doFilter" :unmodifiedVideos="videos.orignal" />
-</el-collapse-item>
-</el-collapse> -->
+  <el-space fill direction="vertical" :size="24" alignment="center" style=" width:100%; padding:10px;">
 
     <!-- 工具菜单 -->
     <ToolMenus />
 
-
     <!-- 视频列表 -->
-    <el-row class="video-list">
-      <el-col :xs="12" :sm="12" :md="8" :lg="6" v-for="video in paginatedVideos" :key="video.video_id"
-        class="video-card-col">
+    <el-row :gutter="8" class="video-list">
+      <el-col :xs="12" :sm="12" :md="8" :lg="6" style="padding-bottom: 8px;"
+      v-for="video in paginatedVideos" :key="video.video_id">
         <el-card shadow="hover">
-          <div style="position: relative;">
+          <div class="card-img-wrapper">
             <img :src="`https://i.ytimg.com/vi/${video.video_id}/mqdefault.jpg`" alt="thumbnail" loading="lazy" />
-            <div class="card-bottom-shadow">
+            <div class="card-img-bottom-shadow">
               <el-row>
                 <el-col :span="12">{{ formatDate(video.published_at) }}</el-col>
                 <el-col :span="12" style="text-align: end;">{{ formatDuration(video.duration) }}</el-col>
               </el-row>
             </div>
           </div>
-          <div style="padding: 10px 6px 0px 6px;">
+          <div style="padding: 6px 6px 0px 6px;">
             <h3 :title="video.title">{{ video.title }}</h3>
             <el-text size="small" line-clamp="1" truncated>{{ video.channel_title }}</el-text>
           </div>
@@ -47,21 +37,20 @@
       </el-col>
     </el-row>
 
-    <!-- 分页 -->
+    <!-- 分页 这个宽度怎么这么长。。。 -->
     <div class="width-center">
       <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="videos.filtered.length"
-        layout="prev, pager, next" background size="default" />
+        layout="pager" :pager-count="5" background :size="paginationSize" />
     </div>
 
+    <!-- 操作按钮点击后弹窗 -->
+    <ActionDialog v-model="dialogInfo.visible">
+      <ActionYt v-if="dialogInfo.type === 'Yt'" :video_id="dialogInfo.videoData.video_id" />
+      <ActionBili v-else-if="dialogInfo.type === 'Bili'" :video_list="dialogInfo.videoData.zh!" />
+      <ActionSub v-else-if="dialogInfo.type === 'Sub'" :video="dialogInfo.videoData" />
+      <ActionInfo v-else-if="dialogInfo.type === 'Info'" :video="dialogInfo.videoData" />
+    </ActionDialog>
   </el-space>
-
-  <!-- 操作按钮点击后弹窗 -->
-  <ActionDialog v-model="dialogInfo.visible">
-    <ActionYt v-if="dialogInfo.type === 'Yt'" :video_id="dialogInfo.videoData.video_id" />
-    <ActionBili v-else-if="dialogInfo.type === 'Bili'" :video_list="dialogInfo.videoData.zh!" />
-    <ActionSub v-else-if="dialogInfo.type === 'Sub'" :video="dialogInfo.videoData" />
-    <ActionInfo v-else-if="dialogInfo.type === 'Info'" :video="dialogInfo.videoData" />
-  </ActionDialog>
 </template>
 
 <script setup lang="ts">
@@ -115,6 +104,8 @@ const paginatedVideos = computed<YtVideo[]>(() => {
   return videos.value.filtered.slice(start, end)
 });
 
+/** 分页组件的大小 onMount时检测窗口宽度如果过小就改成 small*/
+let paginationSize = ref('default')
 
 // 视频卡片点击事件
 const card_action_click = (name: ActionType, video: YtVideo) => {
@@ -148,27 +139,31 @@ const fetchVideos = async () => {
 
 onMounted(async () => {
   fetchVideos();
+  paginationSize.value = window && window.innerWidth < 768 ? 'small' : 'default'
 });
 
 
 </script>
 
 
 <style scoped>
+@import './pokopea/style.css';
+
 .video-list {
   width: 100%;
 }
 
-.video-card-col {
-  padding: 10px;
+.video-list .el-card {
+  --el-card-padding: 0px;
 }
 
-.el-card {
-  --el-card-padding: 0px;
+.video-list .el-card:hover,
+.video-list .el-card:focus {
+  box-shadow: var(--el-box-shadow-dark);
 }
 
 /* 视频标题 */
-.el-card h3 {
+.video-list .el-card h3 {
   all: unset;
   font-size: 15px;
   /* margin: 10px 6px 10px 6px; */
@@ -187,23 +182,29 @@ onMounted(async () => {
 
 }
 
-.el-card img {
-  width: 100%;
-  height: auto;
+.video-list .card-img-wrapper {
+  position: relative;
   /* 图片未加载时也会留出高度 */
   aspect-ratio: 16 / 9;
 }
 
-.card-bottom-shadow {
+
+.video-list .el-card img {
+  width: 100%;
+  height: auto;
+
+}
+
+.card-img-bottom-shadow {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 38px;
+  height: 42px;
   font-size: 13px;
   line-height: 18px;
   z-index: 2;
-  padding: 16px 6px 6px 6px;
+  padding: 16px 10px 10px 10px;
   background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
   color: #fff;
   opacity: 1;
@@ -219,13 +220,11 @@ onMounted(async () => {
   justify-content: center;
   transition: box-shadow 0.3s ease;
   /* 添加过渡效果 */
-
 }
 
-
 .card-footer .el-col:hover,
 .card-footer .el-col:active {
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--el-box-shadow);
   /* 添加灰色阴影 */
   cursor: pointer;
   /* 鼠标悬停时显示手型 */
@@ -242,6 +241,9 @@ onMounted(async () => {
   margin: auto;
 }
 
+
+
+
 .width-center {
   display: flex;
   justify-content: center;

docs/.vuepress/components/pokopea/ActionDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog v-model="visible" class="action-dialog" fullscreen destroy-on-close>
+  <el-dialog v-model="visible" class="ppk-action-dialog" fullscreen destroy-on-close>
     <slot></slot>
   </el-dialog>
 </template>
@@ -15,20 +15,20 @@ const visible = defineModel<Boolean>({ required: true, default: false, })
  所以这部分写成全局样式 -->
 <style>
 /* 点击卡片按钮后显示的弹窗 */
-.action-dialog {
+.ppk-action-dialog {
   display: flex;
   flex-direction: column;
 }
 
-.action-dialog .el-dialog__header {
+.ppk-action-dialog .el-dialog__header {
   /* 确保高度不受下面挤压 */
   flex-shrink: 0;
   margin-bottom: 20px;
 
 }
 
 
-.action-dialog .el-dialog__body {
+.ppk-action-dialog .el-dialog__body {
   /* 占据剩余空间 */
   flex-grow: 1;
   display: flex;
@@ -39,7 +39,7 @@ const visible = defineModel<Boolean>({ required: true, default: false, })
 此方法需要iframe的父布局是display: flex。本vue内只能设置body为flex
 如果子组件中dialog不是直接在template下则需要手动将其父布局设置为flex 
 */
-.action-dialog iframe {
+.ppk-action-dialog iframe {
   /* 填满宽度。iframe宽高比无所谓，内部视频元素会自动按比例缩放 */
   width: 100%;
   height: auto;

docs/.vuepress/components/pokopea/ToolDarkMode.vue

@@ -0,0 +1,31 @@
+<template>
+   <el-button circle size="large" @click="toggleDark()">
+    <el-icon :size="24" v-if="isDark">
+        <svg darkmode xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
+            fill="#5f6368">
+            <path
+                d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z" />
+        </svg>
+    </el-icon>
+    <el-icon :size="24" v-else>
+        <svg lightmode xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
+            fill="#5f6368">
+            <path
+                d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z" />
+        </svg>
+    </el-icon>
+   </el-button>
+
+</template>
+<script setup lang="ts">
+import { useDark, useToggle } from '@vueuse/core'
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+
+</script>
+<style scoped>
+@import './style.css';
+.el-button {
+    border: 0px;
+}
+</style>

docs/.vuepress/components/pokopea/ToolInfoLink.vue

@@ -1,17 +1,11 @@
 <template>
     <div class="content-width-center">
-        <el-space >
         <el-text>外部链接：</el-text>
-            <el-link href="https://zh.moegirl.org.cn/甲贺流忍者Ponpoko" target="_blank">萌娘百科: 甲贺流忍者Ponpoko</el-link>
-            <el-link href="https://youtube.com/@pokopea" target="_blank">YouTube: ぽんぽこちゃんねる</el-link>
-        </el-space>
+        <el-link href="https://zh.moegirl.org.cn/甲贺流忍者Ponpoko" target="_blank">萌娘百科: 甲贺流忍者Ponpoko</el-link>
+        <el-link href="https://youtube.com/@pokopea" target="_blank">YouTube: ぽんぽこちゃんねる</el-link>
     </div>
 </template>
 
 <style scoped>
-.content-width-center {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
+@import './style.css';
 </style>

docs/.vuepress/components/pokopea/ToolMenus.vue

@@ -2,25 +2,28 @@
   <!-- 父布局是flex-grow:1 填满宽度 -->
 
   <div class="content-width-center toolmenu-root">
-    <div style="display: flex; justify-content: center;">
-      <el-space alignment="center">
-        <el-text>工具栏：</el-text>
-        <el-segmented v-model="currTool" :options="toolOptions" @change="onChange">
-          <template #default="scope: { item: ToolOption }">
-            <el-icon size="20" style="min-width: 40px;">
-              <component :is="scope.item.icon" />
-            </el-icon>
-          </template>
-        </el-segmented>
-      </el-space>
+    <!-- 用space-between 使子布局一个靠左一个靠右。只能有两个子布局 -->
+    <div class="titlebar">
+      <el-text style="font-size: 25px;">狸猫花生</el-text>
+      <ToolDarkMode />
+    </div>
+
+    <div class="content-width-center">
+      <el-segmented v-model="currTool" :options="toolOptions" @change="onChange">
+        <template #default="scope: { item: ToolOption }">
+          <el-icon size="20" style="min-width: 30px;">
+            <component :is="scope.item.icon" />
+          </el-icon>
+        </template>
+      </el-segmented>
     </div>
 
     <!-- 具体的工具内容 -->
     <div class="content-width-center">
       <!-- <slot :currToolValue="currTool"></slot> -->
 
       <el-collapse-transition>
-        <div style="height: 10px;" v-show="currTool !== 'none'" ></div>
+        <div style="height: 10px;" v-show="currTool !== 'none'"></div>
       </el-collapse-transition>
 
       <el-collapse-transition>
@@ -29,7 +32,7 @@
 
       <!-- 筛选选项 -->
       <el-collapse-transition>
-        <FilterOptions  v-show="currTool === 'filter'" />
+        <FilterOptions v-show="currTool === 'filter'" />
       </el-collapse-transition>
     </div>
 
@@ -49,6 +52,7 @@ import { ToolMenuValue } from './types';
 import { Link, Filter, CircleClose, } from '@element-plus/icons-vue'
 import FilterOptions from './ToolFilter.vue';
 import ToolInfoLink from './ToolInfoLink.vue';
+import ToolDarkMode from './ToolDarkMode.vue';
 type ToolOption = { label: string, value: ToolMenuValue, icon: any }
 
 const currTool = defineModel<ToolMenuValue>({ default: 'none' })
@@ -79,15 +83,25 @@ const onChange = (val: ToolMenuValue) => {
 
 </script>
 <style scoped>
-.content-width-center {
+@import './style.css';
+
+.toolmenu-root>* {
+  flex-grow: 1;
+  width: 100%;
+}
+
+.titlebar {
   display: flex;
-  flex-direction: column;
   align-items: center;
+  justify-content: space-between;
+  margin: 10px;
 }
 
-.toolmenu-root>* {
+.titlebar-left {
   flex-grow: 1;
-  width: 100%;
 }
 
+.titlebar-right {
+  margin-left: auto;
+}
 </style>

docs/.vuepress/components/pokopea/style.css

@@ -3,4 +3,9 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-}
+}
+
+  /* 深色模式下图标颜色 */
+  .dark svg {
+    fill: #bbbbbb;
+  }