to: 完善一些细节

journey-ad · Dec 18, 2023 · 2f5e307 · 2f5e307
1 parent ccb5946
commit 2f5e307
Show file tree

Hide file tree

Showing 8 changed files with 172 additions and 77 deletions.
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -32,7 +32,9 @@ export default {
   watch: {
     showNav: {
       handler(val) {
-        this.$root.$el.classList[val ? "add" : "remove"]("show-nav");
+        this.$nextTick(() => {
+          this.$root.$el.classList[val ? "add" : "remove"]("show-nav");
+        });
       },
       immediate: true,
     },

diff --git a/src/router/index.js b/src/router/index.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-// import Home from '../views/Home.vue'
+import { setThemeColor } from '@/utils';
 
 import BaseLayout from '@/layouts/BaseLayout'
 import MainLayout from '@/layouts/MainLayout'
@@ -103,6 +103,9 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   document.title = to.meta.title || 'pixiv-viewer'
+
+  setThemeColor(to.meta.themeColor || '#fff')
+
   next()
 })
 

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -0,0 +1,40 @@
+export const setThemeColor = (color) => {
+  if (!color) return
+
+  let metaThemeColor = document.querySelector('meta[name="theme-color"]')
+
+  if (!metaThemeColor) {
+    metaThemeColor = document.createElement('meta')
+    metaThemeColor.setAttribute('name', 'theme-color')
+    document.head.appendChild(metaThemeColor)
+  }
+
+  metaThemeColor.setAttribute('content', color)
+}
+
+export const dateFormat = (ts, fmt = 'yyyy-MM-dd hh:mm:ss') => {
+  if (!ts) ts = new Date()
+
+  if (typeof ts === 'number' && ts.toString().length === 10) {
+    ts *= 1000
+  }
+
+  const date = ts instanceof Date ? ts : new Date(ts)
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, `${date.getFullYear()}`)
+  }
+  const o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds()
+  }
+  for (const k in o) {
+    if (new RegExp(`(${k})`).test(fmt)) {
+      const str = o[k] + ''
+      fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : `00${str}`.substr(str.length))
+    }
+  }
+  return fmt
+}
diff --git a/src/views/Artwork/components/ImageView.vue b/src/views/Artwork/components/ImageView.vue
@@ -588,9 +588,9 @@ export default {
 
 .preview-action__wrapper {
   position: fixed;
-  right: 50px;
-  bottom: 60px;
-  bottom: calc(60px + env(safe-area-inset-bottom));
+  right: 40px;
+  bottom: 40px;
+  bottom: calc(40px + env(safe-area-inset-bottom));
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -600,8 +600,8 @@ export default {
     font-size: 0;
 
     svg {
-      width: 70px;
-      height: 70px;
+      width: 100px;
+      height: 100px;
     }
   }
 }

diff --git a/src/views/Novel/chapter.vue b/src/views/Novel/chapter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chapter" v-if="novel.id" @scroll="scrollHandler" ref="chapterEl">
+  <div class="chapter" @scroll="scrollHandler" ref="chapterEl">
     <div class="topbar__wrapper" :class="{ show: isActionShow }">
       <div class="chapter-name">{{ novel.title }}</div>
       <TopBar :transparent="true" color="dark" :padding="false" />
@@ -15,66 +15,71 @@
       }"
       @click="handleActionDisplay"
     >
-      <div class="novel-meta">
-        <h1 class="novel-title">
-          <van-tag
-            class="tag"
-            round
-            :color="tagText === 'R-18' ? '#fb7299' : '#ff3f3f'"
-            v-if="tagText"
-          >
-            {{ tagText }}
-          </van-tag>
-          {{ novel.title }}
-        </h1>
-        <div class="info-box">
-          <router-link
-            class="info author"
-            :to="{
-              name: 'Users',
-              params: { id: novel.user.id },
-            }"
-          >
-            {{ novel.user.name }}
-          </router-link>
-          <span class="info words">
-            <Icon name="novel" class="icon" scale="1.1"></Icon
-            >{{ novel.text_length.toLocaleString("en-US") }}字
-          </span>
-          <span class="info like">
-            <Icon name="like" class="icon"></Icon>
-            {{ novel.like.toLocaleString("en-US") }}
-          </span>
-          <span class="pixiv">
-            <a
-              :href="`https://www.pixiv.net/novel/show.php?id=${novel.id}`"
-              target="_blank"
-              rel="noreferrer"
-              title="前往Pixiv查看作品"
+      <transition name="fade">
+        <div class="loading" v-if="loading">加载中...</div>
+      </transition>
+      <template v-if="!loading">
+        <div class="novel-meta" v-if="novel.id">
+          <h1 class="novel-title">
+            <van-tag
+              class="tag"
+              round
+              :color="tagText === 'R-18' ? '#fb7299' : '#ff3f3f'"
+              v-if="tagText"
             >
-              <Icon name="pixiv" class="icon"></Icon>
-            </a>
-          </span>
-        </div>
-        <div class="tag-box">
-          <router-link
-            class="tag"
-            :to="{
-              name: 'Search',
-              query: { type: 'novel', keyword: tag.name },
-            }"
-            v-for="tag in novel.tags"
-            :key="tag.name"
-            >#{{ tag.name }}</router-link
-          >
+              {{ tagText }}
+            </van-tag>
+            {{ novel.title }}
+          </h1>
+          <div class="info-box">
+            <router-link
+              class="info author"
+              :to="{
+                name: 'Users',
+                params: { id: novel.user.id },
+              }"
+            >
+              {{ novel.user.name }}
+            </router-link>
+            <span class="info words">
+              <Icon name="novel" class="icon" scale="1.1"></Icon
+              >{{ novel.text_length.toLocaleString("en-US") }}字
+            </span>
+            <span class="info like">
+              <Icon name="like" class="icon"></Icon>
+              {{ novel.like.toLocaleString("en-US") }}
+            </span>
+            <span class="pixiv">
+              <a
+                :href="`https://www.pixiv.net/novel/show.php?id=${novel.id}`"
+                target="_blank"
+                rel="noreferrer"
+                title="前往Pixiv查看作品"
+              >
+                <Icon name="pixiv" class="icon"></Icon>
+              </a>
+            </span>
+          </div>
+          <div class="tag-box">
+            <router-link
+              class="tag"
+              :to="{
+                name: 'Search',
+                query: { type: 'novel', keyword: tag.name },
+              }"
+              v-for="tag in novel.tags"
+              :key="tag.name"
+              >#{{ tag.name }}</router-link
+            >
+          </div>
         </div>
-      </div>
-      <div
-        class="novel-content"
-        :class="{ censored: isCensored(novel) }"
-        :style="viewerStyle"
-        v-html="parsedContent"
-      ></div>
+        <div
+          class="novel-content"
+          :class="{ censored: isCensored(novel) }"
+          :style="viewerStyle"
+          v-html="parsedContent"
+        ></div>
+      </template>
     </div>
     <div class="action__wrapper" :class="{ show: isSettingShow }">
       <transition name="fade">
@@ -171,12 +176,13 @@ import { debounce } from "lodash";
 import { Tag, Slider } from "vant";
 import { mapGetters, mapState } from "vuex";
 import TopBar from "@/components/TopBar";
+import { setThemeColor } from "@/utils";
 import { LocalStorage } from "@/utils/storage";
 import api from "@/api";
 
 const _READER_SETTING_KEY = "__PIXIV_readerSetting";
 
-const readerSetting = LocalStorage.get(_READER_SETTING_KEY, {
+let readerSetting = LocalStorage.get(_READER_SETTING_KEY, {
   fontSize: 15,
   padding: 14,
   lineHeight: 1.5,
@@ -206,15 +212,20 @@ export default {
     },
     readerConfig: {
       handler: debounce(function () {
-        const _setings = {};
         for (let key in this.readerConfig) {
-          _setings[key] = this.readerConfig[key].value;
+          readerSetting[key] = this.readerConfig[key].value;
         }
 
-        LocalStorage.set(_READER_SETTING_KEY, _setings);
+        LocalStorage.set(_READER_SETTING_KEY, readerSetting);
       }, 300),
       deep: true,
     },
+    "viewerStyle.backgroundColor": {
+      handler() {
+        setThemeColor(this.viewerStyle.backgroundColor);
+      },
+      immediate: true,
+    },
   },
   data() {
     return {
@@ -302,23 +313,27 @@ export default {
       }
     },
     init() {
+      this.reset();
       this.initSetting();
+      setThemeColor(this.viewerStyle.backgroundColor);
       document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
-      this.loading = true;
       const id = +this.$route.params.id;
-      this.novel = {};
       this.getNovel(id);
     },
+    reset() {
+      this.loading = false;
+      this.novel = {};
+      this.parsedContent = "";
+    },
     async getNovel(id) {
+      this.loading = true;
       const res = await api.getNovel(id);
 
       if (res.status === 0) {
         this.novel = res.data;
 
         this.parseNovel(this.novel);
 
-        this.loading = false;
-
         let title = "";
         if (this.novel.x_restrict === 1) {
           title += "[R-18] ";
@@ -328,11 +343,11 @@ export default {
 
         title += `${this.novel.title}`;
 
-        if (this.novel.series) {
+        if (this.novel.series?.title) {
           title += ` | ${this.novel.series.title}`;
         }
 
-        if (this.novel.user) {
+        if (this.novel.user?.name) {
           title += ` /「${this.novel.user.name}」的作品`;
         }
 
@@ -351,6 +366,8 @@ export default {
           }, 5000);
         }
       }
+
+      this.loading = false;
     },
     parseNovel(novel) {
       let content = novel.content;
@@ -498,10 +515,24 @@ export default {
 }
 
 .novel-content__wrapper {
+  position: relative;
   min-height: 100%;
   overflow: hidden;
   transition: color 0.3s, background 0.3s;
   user-select: text;
+  padding-bottom: 400px;
+  box-sizing: border-box;
+
+  .loading {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    font-size: 34px;
+    color: #1f1f1f;
+  }
 
   .novel-meta {
     color: #1f1f1f;

diff --git a/src/views/Search/index.vue b/src/views/Search/index.vue
@@ -545,7 +545,7 @@ export default {
       align-items: center;
       border-radius: 999px;
       overflow: hidden;
-      outline: 1px solid #eee;
+      outline: 1PX solid #eee;
 
       .seacch-type__item {
         display: flex;

diff --git a/src/views/Setting/index.vue b/src/views/Setting/index.vue
@@ -30,17 +30,26 @@
       label="API地址"
       placeholder="填写一个可用的API地址"
     />
+    <van-cell
+      center
+      title="Pixiv Viewer"
+      label="https://github.com/journey-ad/pixiv-viewer"
+      url="https://github.com/journey-ad/pixiv-viewer"
+    ></van-cell>
+    <van-cell center title="构建日期" :label="buildDate"></van-cell>
   </div>
 </template>
 
 <script>
 import { Cell, Switch, Button, Dialog, Field } from "vant";
 import { mapState, mapActions } from "vuex";
+import { dateFormat } from "@/utils";
 import { DBStorage, SessionStorage } from "@/utils/storage";
 export default {
   name: "Setting",
   data() {
     return {
+      buildDate: dateFormat(__BUILD_TIMESTAMP__, "yyyy-MM-dd"),
       currentSETTING: {
         api: "https://hibiapi.journeyad.repl.co/api/",
         r18: false,