瀏覽代碼

添加新的字体大小选项,更新服务工作者的缓存版本,优化导航逻辑,增加路由滚动行为,调整组件样式,清理不必要的代码,提升用户体验。

wuyi 2 月之前
父節點
當前提交
9108595e50

+ 1 - 1
dev-dist/sw.js

@@ -79,7 +79,7 @@ define(['./workbox-f2cb1a81'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "index.html",
-    "revision": "0.ur6unbqg22"
+    "revision": "0.i86r50mttco"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

+ 4 - 1
src/components/layout/Header.vue

@@ -23,7 +23,10 @@ defineProps<{
 const emit = defineEmits(["show-login", "switch-tab", "search"]);
 
 const goToHome = () => {
-  router.push("/");
+  // 如果当前不在首页,才进行导航
+  if (!isHomePage.value) {
+    router.push("/");
+  }
 };
 
 // 搜索相关

+ 2 - 0
src/components/layout/MainLayout.vue

@@ -98,6 +98,8 @@ function switchTab(key: TabKey) {
 
   const targetRoute = routeMap[key];
   if (targetRoute && route.path !== targetRoute) {
+    // 使用replace而不是push,避免创建过多的历史记录
+    // 这样在底部导航栏切换时不会影响返回按钮的行为
     router.push(targetRoute);
   }
 }

+ 7 - 0
src/router/index.ts

@@ -58,6 +58,13 @@ const routes: Array<RouteRecordRaw> = [
 const router = createRouter({
   history: createWebHistory(),
   routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition;
+    } else {
+      return { top: 0 };
+    }
+  },
 });
 
 router.beforeEach((to, _, next) => {

+ 7 - 3
src/views/Account.vue

@@ -148,7 +148,7 @@ const handleUpgrade = async () => {
   try {
     // 使用临时用户的username作为正式用户的username
     const tempUsername = userStore.userInfo.username || userStore.userInfo.name;
-    
+
     const response = await upgradeGuest(
       userStore.userInfo.id,
       tempUsername, // 使用临时用户的username
@@ -374,7 +374,9 @@ onMounted(async () => {
       >
         <h3 class="text-xl font-semibold text-white/90 mb-4">成为正式用户</h3>
 
-        <div class="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4 mb-6">
+        <div
+          class="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4 mb-6"
+        >
           <p class="text-sm text-blue-200">
             升级后您将获得完整的账户功能,可以在任何设备上登录使用
           </p>
@@ -406,7 +408,9 @@ onMounted(async () => {
               class="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white placeholder-white/40 focus:ring-2 focus:ring-brand focus:border-transparent"
               placeholder="请设置登录密码"
             />
-            <p class="mt-1 text-xs text-white/50">至少6位字符,建议包含字母和数字</p>
+            <p class="mt-1 text-xs text-white/50">
+              至少6位字符,建议包含字母和数字
+            </p>
           </div>
 
           <div class="flex gap-3 pt-4">

+ 27 - 75
src/views/VideoPlayer.vue

@@ -2,13 +2,13 @@
   <section class="space-y-6">
     <!-- 返回按钮 -->
     <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
+      <div class="flex items-center gap-2 sm:gap-3">
         <button
           @click="goBack"
-          class="flex items-center gap-2 text-white/80 hover:text-white transition"
+          class="flex items-center gap-1 sm:gap-2 text-white/80 hover:text-white transition whitespace-nowrap"
         >
           <svg
-            class="w-5 h-5"
+            class="w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -20,67 +20,34 @@
               d="M15 19l-7-7 7-7"
             />
           </svg>
-          <span class="text-sm">返回</span>
+          <span class="text-xs sm:text-sm">返回</span>
         </button>
-
-        <div class="relative">
-          <button
-            @click="toggleShare"
-            class="p-2 rounded-lg bg-white/5 border border-white/10 text-white/70 hover:bg-white/10 hover:text-white transition"
-          >
-            <svg
-              class="w-5 h-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"
-              />
-            </svg>
-          </button>
-
-          <!-- 分享提示弹窗 -->
-          <div
-            v-if="showShareModal"
-            class="absolute top-0 left-full ml-2 z-50 bg-emerald-500 text-white px-3 py-1.5 rounded-lg shadow-lg flex items-center gap-1.5 whitespace-nowrap"
-          >
-            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-              <path
-                fill-rule="evenodd"
-                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1-0 011.414 0z"
-                clip-rule="evenodd"
-              />
-            </svg>
-            <span class="text-xs font-medium">已复制</span>
-          </div>
-        </div>
       </div>
 
       <!-- 购买按钮区域 -->
       <div
         v-if="!isSinglePurchased && !isVip"
-        class="flex items-center gap-1.5"
+        class="flex items-center gap-1 sm:gap-1.5"
       >
         <!-- 游客和免费用户显示试看时间信息 -->
-        <div v-if="isGuestOrFree" class="text-xs text-white/60 px-2 py-1">
-          试看 {{ trialDuration }} 秒
+        <div
+          v-if="isGuestOrFree"
+          class="text-2xs sm:text-xs text-white/60 px-1 sm:px-2 py-0.5 sm:py-1"
+        >
+          试看{{ trialDuration }}秒
         </div>
 
         <!-- 只有非游客用户才显示购买会员按钮 -->
         <button
           v-if="!isGuest"
           @click="handleMembershipClick"
-          class="px-2 py-1 rounded-md bg-brand text-slate-900 text-xs font-medium hover:bg-brand/90 transition whitespace-nowrap min-w-fit"
+          class="px-1.5 sm:px-2 py-0.5 sm:py-1 rounded-md bg-brand text-slate-900 text-2xs sm:text-xs font-medium hover:bg-brand/90 transition whitespace-nowrap min-w-fit"
         >
           开通会员
         </button>
         <button
           @click="handleSinglePurchaseClick"
-          class="px-3 py-2 rounded-lg bg-blue-500 text-white text-sm font-semibold hover:bg-blue-600 transition shadow-lg hover:shadow-xl flash-animation glow-animation hover:animate-none whitespace-nowrap min-w-fit"
+          class="px-2 sm:px-3 py-1 sm:py-2 rounded-lg bg-blue-500 text-white text-2xs sm:text-sm font-semibold hover:bg-blue-600 transition shadow-lg hover:shadow-xl flash-animation glow-animation hover:animate-none whitespace-nowrap min-w-fit"
         >
           单片购买
         </button>
@@ -654,7 +621,6 @@ const videoInfo = ref<any>({
 const relatedVideos = ref<any[]>([]);
 
 // 状态管理
-const showShareModal = ref(false);
 const showTrialEndModal = ref(false);
 const showMembershipPurchaseModal = ref(false);
 const showSinglePurchaseModal = ref(false);
@@ -687,20 +653,20 @@ const singleCurrentOrderNo = ref("");
 // 检测是否为夸克浏览器
 const isQuarkBrowser = () => {
   const ua = navigator.userAgent.toLowerCase();
-  return ua.includes('quark');
+  return ua.includes("quark");
 };
 
 // 显示成功/错误提示的函数
 const showSuccess = (message: string) => {
   successMessage.value = message;
   showSuccessDialog.value = true;
-  
+
   // 夸克浏览器自动滚动到底部
   if (isQuarkBrowser()) {
     setTimeout(() => {
       window.scrollTo({
         top: document.documentElement.scrollHeight,
-        behavior: 'smooth'
+        behavior: "smooth",
       });
     }, 100);
   }
@@ -709,13 +675,13 @@ const showSuccess = (message: string) => {
 const showError = (message: string) => {
   errorMessage.value = message;
   showErrorDialog.value = true;
-  
+
   // 夸克浏览器自动滚动到底部
   if (isQuarkBrowser()) {
     setTimeout(() => {
       window.scrollTo({
         top: document.documentElement.scrollHeight,
-        behavior: 'smooth'
+        behavior: "smooth",
       });
     }, 100);
   }
@@ -836,25 +802,11 @@ const formatNumber = (num: string | number): string => {
 
 // 返回上一页
 const goBack = () => {
+  // 使用router.back()返回上一页,而不是直接导航到主页
+  // 这样可以确保按照浏览历史顺序返回
   router.back();
 };
 
-// 分享视频(直接复制链接并显示提示)
-const toggleShare = async () => {
-  try {
-    const videoUrl = window.location.href;
-    await navigator.clipboard.writeText(videoUrl);
-    showShareModal.value = true;
-
-    // 1秒后自动隐藏提示
-    setTimeout(() => {
-      showShareModal.value = false;
-    }, 1000);
-  } catch (error) {
-    console.error("复制链接失败:", error);
-  }
-};
-
 // 播放视频
 const playVideo = (video: any) => {
   const vipLevel = userStore.getVipLevel();
@@ -896,13 +848,13 @@ const startTrial = () => {
 // 处理顶部会员购买按钮点击
 const handleMembershipClick = () => {
   showMembershipPurchaseModal.value = true;
-  
+
   // 夸克浏览器自动滚动到底部
   if (isQuarkBrowser()) {
     setTimeout(() => {
       window.scrollTo({
         top: document.documentElement.scrollHeight,
-        behavior: 'smooth'
+        behavior: "smooth",
       });
     }, 100);
   }
@@ -911,13 +863,13 @@ const handleMembershipClick = () => {
 // 处理顶部单片购买按钮点击
 const handleSinglePurchaseClick = () => {
   showSinglePurchaseModal.value = true;
-  
+
   // 夸克浏览器自动滚动到底部
   if (isQuarkBrowser()) {
     setTimeout(() => {
       window.scrollTo({
         top: document.documentElement.scrollHeight,
-        behavior: 'smooth'
+        behavior: "smooth",
       });
     }, 100);
   }
@@ -929,13 +881,13 @@ const purchaseMembership = () => {
   showTrialEndModal.value = false;
   // 打开会员购买弹窗
   showMembershipPurchaseModal.value = true;
-  
+
   // 夸克浏览器自动滚动到底部
   if (isQuarkBrowser()) {
     setTimeout(() => {
       window.scrollTo({
         top: document.documentElement.scrollHeight,
-        behavior: 'smooth'
+        behavior: "smooth",
       });
     }, 100);
   }
@@ -1045,11 +997,11 @@ const purchaseVideo = async () => {
     setTimeout(() => {
       window.scrollTo({
         top: document.documentElement.scrollHeight,
-        behavior: 'smooth'
+        behavior: "smooth",
       });
     }, 100);
   }
-  
+
   try {
     // 使用视频信息的真实ID
     if (!videoInfo.value.id || videoInfo.value.id === "unknown") {

+ 3 - 0
tailwind.config.js

@@ -10,6 +10,9 @@ export default {
         brand: 'var(--color-brand)',
         surface: 'var(--color-surface)',
       },
+      fontSize: {
+        '2xs': '0.65rem',
+      },
     },
   },
   plugins: [],