add dark mode and fixed some bugs

wdde · May 18, 2024 · b1f4216 · b1f4216
1 parent 836b372
commit b1f4216
Show file tree

Hide file tree

Showing 12 changed files with 94 additions and 34 deletions.
diff --git a/assets/skill-icons--github-dark.svg b/assets/skill-icons--github-dark.svg
diff --git a/assets/theme/entypo--light-up.svg b/assets/theme/entypo--light-up.svg
diff --git a/assets/theme/icon-park-outline--dark-mode.svg b/assets/theme/icon-park-outline--dark-mode.svg
diff --git a/assets/theme/icon-park-solid--dark-mode.svg b/assets/theme/icon-park-solid--dark-mode.svg
diff --git a/components/diskInfoList.vue b/components/diskInfoList.vue
@@ -40,7 +40,7 @@ const formatDate = (date: string) => {
   <el-skeleton :loading="skeletonLoading" animated :count="20">
     <template #template>
       <div
-          class="bg-white shadow p-[14px] rounded-[6px] cursor-pointer mb-3
+          class="bg-white dark:bg-gray-600 shadow p-[14px] rounded-[6px] cursor-pointer mb-3
                   hover:bg-[#f5f5f5] hover:shadow-lg transition duration-300 ease-in-out"
       >
         <div class="flex flex-row gap-2 items-center">
@@ -57,8 +57,8 @@ const formatDate = (date: string) => {
     </template>
     <template #default>
       <div
-          class="bg-white shadow p-[14px] rounded-[6px] cursor-pointer max-h-[140px]
-              hover:bg-[#f5f5f5] hover:shadow-lg transition duration-300 ease-in-out"
+          class="bg-white dark:bg-gray-600 shadow p-[14px] rounded-[6px] cursor-pointer
+              hover:bg-[#f5f5f5] dark:hover:bg-gray-700 hover:shadow-lg transition duration-300 ease-in-out"
           v-for="(item,i) in sources?.list" :key="i"
           @click="handleOpenSourceLink(item.link)"
       >
@@ -67,10 +67,10 @@ const formatDate = (date: string) => {
           <img class="w-[20px]" v-if="item.disk_type === 'QUARK'" src="@/assets/netdisk/quark.png" alt="quark">
           <img class="w-[20px]" v-if="item.disk_type === 'BDY'" src="@/assets/netdisk/baidu.png" alt="baidu">
           <img class="w-[20px]" v-if="item.disk_type === 'XUNLEI'" src="@/assets/netdisk/xunlei.png" alt="xunlei">
-          <p class="text-[14px] font-inter font-[600]" v-html="item.disk_name"></p>
+          <p class="text-[14px] font-inter font-[600] truncate dark:text-white" v-html="item.disk_name"></p>
         </div>
         <div class="py-[12px]">
-          <p class="text-[12px] text-slate-400 truncate-3-lines" v-html="item.files"></p>
+          <p class="text-[12px] text-slate-400 dark:text-slate-200 truncate-3-lines" v-html="item.files"></p>
         </div>
         <div class="text-[12px] text-slate-600 flex flex-row items-center  justify-between">
           <div class="flex flex-row items-center gap-2">
@@ -98,6 +98,9 @@ em {
   color: blue;
   margin: 0 2px;
 }
+.dark em {
+  color: deepskyblue;
+}
 </style>
 <style scoped>
 .truncate-3-lines {

diff --git a/components/search/SearchHeader.vue b/components/search/SearchHeader.vue
@@ -18,16 +18,20 @@ const search = () => {
 const goGithub = () => {
   window.open('https://github.com/unilei/aipan-netdisk-search.git')
 }
+const colorMode = useColorMode()
+
+console.log(colorMode.preference)
+
 </script>
 
 <template>
   <el-affix>
-    <div class="bg-white shadow px-[20px] py-[10px]">
-      <div class="max-w-[1240px] mx-auto h-[40px]  flex flex-row items-center gap-6 relative">
+    <div class="bg-white dark:bg-gray-800 shadow px-[10px] md:px-[20px] py-[10px]">
+      <div class="max-w-[1240px] mx-auto h-[40px]  flex flex-row items-center gap-2 md:gap-6 relative">
 
         <div class="flex flex-row items-center gap-1">
           <img class="w-[30px] h-[30px] md:w-[40px] md:h-[40px] cursor-pointer" src="@/assets/my-logo.png" alt="logo" @click="goHome()">
-          <h1 class="hidden md:block text-[14px] font-serif font-bold cursor-pointer" @click="goHome()" >爱盼-网盘资源搜索</h1>
+          <h1 class="hidden md:block text-[14px] font-serif font-bold cursor-pointer dark:text-white" @click="goHome()" >爱盼-网盘资源搜索</h1>
         </div>
 
         <div class="w-[220px] md:w-[400px] border border-slate-300 font-mono overflow-hidden rounded-[50px]">
@@ -42,9 +46,15 @@ const goGithub = () => {
           </client-only>
         </div>
 
-        <div class="absolute right-[20px]">
+        <div class="absolute right-[10px] md:right-[20px]">
+          <el-button v-if="colorMode.preference === 'dark'" link @click="colorMode.preference = 'light'">
+            <img class="w-[20px] h-[20px]" src="@/assets/theme/entypo--light-up.svg" alt="">
+          </el-button>
+          <el-button v-if="colorMode.preference === 'light'" link @click="colorMode.preference = 'dark'">
+            <img class="w-[20px] h-[20px]" src="@/assets/theme/icon-park-solid--dark-mode.svg" alt="">
+          </el-button>
           <el-button link @click="goGithub()">
-            <img class="w-[20px] h-[20px]" src="@/assets/github.png" alt="github">
+            <img class="w-[20px] h-[20px]" src="@/assets/skill-icons--github-dark.svg" alt="github">
           </el-button>
         </div>
 

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -49,9 +49,13 @@ export default defineNuxtConfig({
         '@nuxtjs/tailwindcss',
         '@nuxtjs/device',
         '@nuxtjs/i18n',
-        '@nuxtjs/google-fonts'
+        '@nuxtjs/google-fonts',
+        '@nuxtjs/color-mode'
 
     ],
+    colorMode: {
+        classSuffix: ''
+    },
     tailwindcss: {
         configPath: 'tailwind.config.js'
     },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
+    "@nuxtjs/color-mode": "^3.4.1",
     "@nuxtjs/tailwindcss": "^6.8.0",
     "axios": "^1.6.2",
     "bcryptjs": "^2.4.3",

diff --git a/pages/index.vue b/pages/index.vue
@@ -12,14 +12,28 @@ const donate = () => {
   router.push({path:'/donate'})
 }
 const hotKeywords = ref(['庆余年','歌手2024','我的阿勒泰','新生','周处除三害','热辣滚烫','第二十条','承欢记','哈哈哈哈哈'])
+
+const colorMode = useColorMode()
+
+console.log(colorMode.preference)
+
+
 </script>
 
 <template>
-  <div class="bg-[#ffffff] min-h-screen py-[60px]">
+  <div class="bg-[#ffffff] dark:bg-gray-800 min-h-screen py-[60px]">
 
+    <div class="max-w-[1240px] mx-auto text-right px-[20px]">
+       <el-button v-if="colorMode.preference === 'dark'" link @click="colorMode.preference = 'light'">
+         <img class="w-[20px] h-[20px]" src="@/assets/theme/entypo--light-up.svg" alt="">
+       </el-button>
+       <el-button v-if="colorMode.preference === 'light'" link @click="colorMode.preference = 'dark'">
+         <img class="w-[20px] h-[20px]" src="@/assets/theme/icon-park-solid--dark-mode.svg" alt="">
+       </el-button>
+    </div>
     <div class="flex flex-row items-center justify-center gap-3 mt-[80px]">
       <img class="w-[40px] h-[40px] sm:w-[60px] sm:h-[60px]" src="@/assets/my-logo.png" alt="logo">
-      <h1 class="text-[18px] sm:text-[24px] font-serif font-bold ">爱盼-网盘资源搜索</h1>
+      <h1 class="text-[18px] sm:text-[24px] font-serif font-bold dark:text-white ">爱盼-网盘资源搜索</h1>
     </div>
 
     <div class="max-w-[1240px] mx-auto mt-[20px]">
@@ -36,7 +50,7 @@ const hotKeywords = ref(['庆余年','歌手2024','我的阿勒泰','新生','
       </div>
     </div>
 
-    <div class="max-w-[1240px] mx-auto mt-[20px]">
+    <div class="max-w-[520px] mx-auto mt-[20px]">
       <div class="flex flex-row flex-wrap gap-1 justify-center">
         <el-tag class="mx-1 cursor-pointer"
                 v-for="keyword in hotKeywords"
@@ -50,13 +64,13 @@ const hotKeywords = ref(['庆余年','歌手2024','我的阿勒泰','新生','
 
     </div>
 
-    <div class="fixed bottom-0 left-0 right-0 bg-white p-3">
+    <div class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 p-3">
       <div class="flex flex-row items-center justify-center  gap-3 my-3">
         <a class="" href="https://github.com/unilei/aipan-netdisk-search">
-          <img class="w-[50px] h-[50px]" src="@/assets/github.png" alt="github">
+          <img class="w-[30px] h-[30px]" src="@/assets/skill-icons--github-dark.svg" alt="github">
         </a>
-        <el-button color="#ffffff" @click="donate()">
-          <img  class="w-[50px] h-[50px]" src="@/assets/donation/dashang.svg" alt="打赏">
+        <el-button link color="#ffffff" @click="donate()">
+          <img  class="w-[30px] h-[30px]" src="@/assets/donation/dashang.svg" alt="打赏">
         </el-button>
       </div>
       <p class="text-center text-[8px] sm:text-[12px] text-slate-400">

diff --git a/pages/search.vue b/pages/search.vue
@@ -160,20 +160,24 @@ onMounted(() => {
   handleSearchByHunhe()
   getLatestSourcesData(1, 10)
 })
+
 </script>
 
 <template>
-  <div>
+  <div class="dark:bg-gray-400">
     <search-header :keyword="keyword" @search="search"></search-header>
 
     <div class="max-w-[1240px] mx-auto grid grid-cols-1 md:grid-cols-[1fr_400px] gap-8">
       <div class="flex flex-col gap-3 sm:mt-3 sm:pb-[60px] p-[20px] md:p-0">
         <div class="py-3">
           <ul class="flex flex-row gap-3 flex-wrap">
             <li v-for="(item,i) in tabsOptions" :key="i">
-              <el-check-tag :checked="item.value === currentTabValue" @click="handleChangeTab(item.value)"
-                            type="success">
-                <div class="flex flex-row items-center">
+              <el-check-tag
+                  class="dark:bg-gray-950"
+                  :checked="item.value === currentTabValue"
+                  @click="handleChangeTab(item.value)"
+                  type="success">
+                <div class="flex flex-row items-center ">
                   <span class="text-[10px] md:text-[14px]">{{ item.label }}</span>
                 </div>
               </el-check-tag>
@@ -206,17 +210,21 @@ onMounted(() => {
         </disk-info-list>
 
         <div class="py-[40px] flex justify-center">
-          <el-pagination
-              :current-page="page"
-              :page-size="10"
-              layout="prev, pager, next"
-              @current-change="handleCurrentPageChange"
-              :total="sources?.total"
-          />
+          <client-only>
+            <el-pagination
+                background
+                :current-page="page"
+                :page-size="10"
+                layout="prev, pager, next"
+                @current-change="handleCurrentPageChange"
+                :total="sources?.total"
+            />
+          </client-only>
+
         </div>
       </div>
       <div class="p-[20px] sm:py-[20px]">
-        <div class="bg-white shadow p-[14px] rounded-[6px]">
+        <div class="bg-white dark:bg-transparent dark:shadow-gray-500 shadow p-[14px] rounded-[6px]">
           <div class="flex flex-row justify-between items-center">
             <span class="text-[14px] font-bold">最近更新</span>
             <div>
@@ -228,7 +236,7 @@ onMounted(() => {
             <el-skeleton animated :loading="latestSkeletonLoading" :count="10">
               <template #template>
                 <div
-                    class="bg-white shadow p-[14px] rounded-[6px] cursor-pointer mb-3
+                    class="bg-white dark:bg-gray-600 shadow p-[14px] rounded-[6px] cursor-pointer mb-3
                 hover:bg-[#f5f5f5] hover:shadow-lg transition duration-300 ease-in-out"
                 >
                   <div class="flex flex-row gap-2 items-center">
@@ -239,8 +247,8 @@ onMounted(() => {
               </template>
               <template #default>
                 <div
-                    class="bg-white shadow p-[14px] rounded-[6px] cursor-pointer
-                hover:bg-[#f5f5f5] hover:shadow-lg transition duration-300 ease-in-out"
+                    class="bg-white dark:bg-gray-600 shadow p-[14px] rounded-[6px] cursor-pointer
+                hover:bg-[#f5f5f5] dark:hover:bg-gray-700 hover:shadow-lg transition duration-300 ease-in-out"
                     v-for="(item,i) in latestSourcesData?.list ? latestSourcesData?.list : latestSourcesData" :key="i"
                     @click="handleOpenLatestSourceLink(item)"
                 >
@@ -252,7 +260,9 @@ onMounted(() => {
                     <img class="w-[20px]" v-if="item.disk_type === 'BDY'" src="@/assets/netdisk/baidu.png" alt="baidu">
                     <img class="w-[20px]" v-if="item.disk_type === 'XUNLEI'" src="@/assets/netdisk/xunlei.png"
                          alt="xunlei">
-                    <span class="text-[14px] font-inter break-words truncate">{{ item.disk_name }}</span>
+                    <span class="text-[14px] font-inter break-words truncate dark:text-slate-200">{{
+                        item.disk_name
+                      }}</span>
                   </div>
                 </div>
               </template>
@@ -263,6 +273,7 @@ onMounted(() => {
 
       </div>
     </div>
+    <el-backtop></el-backtop>
   </div>
 </template>
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,4 +1,5 @@
 export const theme = {
+    darkMode: 'class',
     extend: {
         fontFamily: {
             'inter': ['Inter', 'sans-serif'],