chore(vue): refore to vue

etc/build/monkey.ts

@@ -44,7 +44,7 @@ if (matchValueIndex > 0) {
       const metaPath = path.resolve(outPath, meta)
       fs.writeFileSync(path.resolve(outPath, deployJson), JSON.stringify(deployInfo, null, 2), 'utf-8')
       fs.writeFileSync(metaPath, banner, 'utf-8')
-      logger.log(`Building ${path.relative(ROOT_PATH, sourcePath)} --outfile=${path.relative(ROOT_PATH, targetPath)} ... Done!`)
+      logger.log(`Building ${path.relative(ROOT_PATH, sourcePath)} --outfile ${path.relative(ROOT_PATH, targetPath)} ... Done!`)
     })
   }
 })()

etc/build/monkey.utils.ts

@@ -155,6 +155,7 @@ export const buildScript = (filepath: string, extraConfig: esbuild.BuildOptions=
     entryPoints: [filepath],
     bundle: true,
     treeShaking: true,
+    external: Object.keys(require(path.resolve(ROOT_PATH, 'package.json')).devDependencies),
     ...extraConfig,
     ...(isCI ? {
       plugins: [

package.json

@@ -37,6 +37,8 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5",
     "vitest": "^1.6.0",
+    "vue": "2.7",
+    "vue-demi": "^0.14.10",
     "yn": "^4.0.0"
   }
 }

src/monkey/copymanga-enhance/index.ts

@@ -1,10 +1,8 @@
 import css from './style.css'
 import html from './template.html'
-import { chapter, comic } from './scripts/common'
 import { render } from './scripts/new'
 import { getPageInfo, refreshImage, windowScrollTo } from './scripts/old'
-
-const sessionStorageKey = `${comic}.info.${chapter}`
+import store from './scripts/store'
 
 const renderNewPage = (info: any) => render({
   info,
@@ -15,20 +13,14 @@ const renderNewPage = (info: any) => render({
 })
 
 setTimeout(() => {
-  let cacheContent = sessionStorage.getItem(sessionStorageKey)
+  const cacheContent = store.info.get()
   if (cacheContent) {
-    const info = {
-      prevUrl: void 0,
-      nextUrl: void 0,
-      menuUrl: void 0,
-      ...JSON.parse(cacheContent),
-    }
-    return renderNewPage(info)
+    return renderNewPage(cacheContent)
   }
   refreshImage(() => {
     windowScrollTo(0)
-    const  info = getPageInfo()
-    sessionStorage.setItem(sessionStorageKey, JSON.stringify(info))
+    const info = getPageInfo()
+    store.info.save(info)
     renderNewPage(info)
   })
 }, 25)

src/monkey/copymanga-enhance/scripts/components/HeaderTitle/index.ts

@@ -0,0 +1,13 @@
+import usePageInfo from "../../hooks/usePageInfo";
+import { defineComponent, unref } from "../../library/vue";
+import htmlContent from "./template.html";
+
+export default defineComponent({
+  template: htmlContent,
+  setup () {
+    const { valueRef } = usePageInfo()
+    return {
+      ...unref(valueRef)
+    }
+  },
+})

src/monkey/copymanga-enhance/scripts/components/HeaderTitle/template.html

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <a :href="prevUrl" :class="{'no-action': !prevUrl}" class="btn"><span>上一话</span></a>
+    <a :href="menuUrl" class="title"><span>{{ title }}</span></a>
+    <a :href="nextUrl" :class="{'no-action': !nextUrl}" class="btn"><span>下一话</span></a>
+  </div>
+</template>

src/monkey/copymanga-enhance/scripts/components/SwitchMode/index.ts

@@ -0,0 +1,24 @@
+import useMode from "../../hooks/useMode";
+import { ComicDirection } from "../../constant";
+import htmlContent from "./template.html";
+import { defineComponent } from "../../library/vue";
+
+export default defineComponent({
+  template: htmlContent,
+  setup () {
+    const {
+      valueRef: modeRef,
+      switch: switchMode,
+    } = useMode()
+    const selectMode = (evt: InputEvent) => {
+      const value = (evt.target as HTMLSelectElement)?.value as ComicDirection
+      switchMode(value)
+    }
+    return {
+      selectMode,
+      switchMode,
+      ComicDirection,
+      mode: modeRef,
+    }
+  },
+})

src/monkey/copymanga-enhance/scripts/components/SwitchMode/template.html

@@ -0,0 +1,7 @@
+<template>
+  <select v-model="mode" @change="selectMode">
+    <option :value="ComicDirection.LTR">正常模式</option>
+    <option :value="ComicDirection.RTL">日漫模式</option>
+    <option :value="ComicDirection.TTB">条漫模式</option>
+  </select>
+</template>

src/monkey/copymanga-enhance/scripts/components/ToggleWhitePage/index.ts

@@ -0,0 +1,29 @@
+import { ComicDirection } from "../../constant";
+import useImagesInfo from "../../hooks/useImagesInfo";
+import useMode from "../../hooks/useMode";
+import useWhitePage from "../../hooks/useWhitePage";
+import { computed, defineComponent, unref } from "../../library/vue";
+import htmlContent from "./template.html";
+
+export default defineComponent({
+  template: htmlContent,
+  setup () {
+    const { valueRef: modeRef } = useMode()
+    const {
+      valueRef: hasWhitePage,
+      toggle: toggleWhitePage,
+    } = useWhitePage()
+    const { loaded } = useImagesInfo()
+    const canWhitePage = computed(() => {
+      if (![ComicDirection.LTR, ComicDirection.RTL].includes(unref(modeRef))) {
+        return false
+      }
+      return unref(loaded)
+    })
+    return {
+      hasWhitePage,
+      toggleWhitePage,
+      canWhitePage,
+    }
+  },
+})

src/monkey/copymanga-enhance/scripts/components/ToggleWhitePage/template.html

@@ -0,0 +1,6 @@
+<template>
+  <template v-if="canWhitePage">
+    <a v-if="!hasWhitePage" class="btn" @click="() => toggleWhitePage()"><span>增加空白页</span></a>
+    <a v-else class="btn" @click="() => toggleWhitePage()"><span>移除空白页</span></a>
+  </template>
+</template>

src/monkey/copymanga-enhance/scripts/hooks/useImagesInfo.ts

@@ -0,0 +1,29 @@
+import { computed, ref, unref } from "../library/vue";
+import store from "../store";
+import usePageInfo from "./usePageInfo";
+
+const imagesRef = ref(Array(store.info.get().images.length).fill(undefined))
+
+const useImagesInfo = () => {
+  const { valueRef: pageInfoRef } = usePageInfo()
+  const loadedCount = computed(() => unref(imagesRef).filter(Boolean).length)
+  const total = computed(() => unref(pageInfoRef).images.length)
+  const loading = computed(() => unref(loadedCount) !== unref(total))
+  const loaded = computed(() => unref(loadedCount) === unref(total))
+
+  const loadFinish = (index: number, content: any = {}) => {
+    if (unref(total) <= index) {
+      return console.error('index out of range')
+    }
+    imagesRef.value.splice(index, 1, content)
+  }
+  return {
+    valueRef: imagesRef,
+    total,
+    loading,
+    loaded,
+    loadFinish,
+  }
+}
+
+export default useImagesInfo;

src/monkey/copymanga-enhance/scripts/hooks/useMode.ts

@@ -0,0 +1,17 @@
+import { ComicDirection } from "../constant";
+import { ref } from "../library/vue";
+import store from '../store'
+
+const cacheValueRef = ref(store.mode.get())
+
+const useMode = () => {
+  return {
+    valueRef: cacheValueRef,
+    switch (mode: ComicDirection) {
+      cacheValueRef.value = mode
+      store.mode.save(mode)
+    },
+  }
+}
+
+export default useMode

src/monkey/copymanga-enhance/scripts/hooks/usePageInfo.ts

@@ -0,0 +1,9 @@
+import store from "../store"
+
+const usePageInfo = () => {
+  return {
+    valueRef: store.info.get(),
+  }
+}
+
+export default usePageInfo

src/monkey/copymanga-enhance/scripts/hooks/useUserAgent.ts

@@ -0,0 +1,20 @@
+import { computed, unref } from "../library/vue"
+
+const useUserAgent = () => {
+  const valueRef = computed(() => navigator.userAgent)
+  const isWindows = computed(() => valueRef.value.includes('Windows NT'))
+  const isMac = computed(() => valueRef.value.includes(' Mac OS '))
+  const platform = computed(() => {
+    if (unref(isWindows)) return 'windows'
+    if (unref(isMac)) return 'mac'
+    return 'unknown-platform'
+  })
+  return {
+    valueRef,
+    isWindows,
+    isMac,
+    platform,
+  }
+}
+
+export default useUserAgent

src/monkey/copymanga-enhance/scripts/hooks/useWhitePage.ts

@@ -0,0 +1,19 @@
+import { ref } from "../library/vue";
+import store from '../store'
+
+const cacheValueRef = ref(store.hasWhitePage.get())
+
+const useWhitePage = () => {
+  return {
+    valueRef: cacheValueRef,
+    toggle: (nextValue?: boolean) => {
+      const value = typeof nextValue === 'undefined'
+        ? !cacheValueRef.value
+        : nextValue
+      cacheValueRef.value = value
+      store.hasWhitePage.save(value)
+    },
+  }
+}
+
+export default useWhitePage

src/monkey/copymanga-enhance/scripts/library/vue.ts

@@ -0,0 +1,17 @@
+import type VueType from "vue"
+import type {
+  unref as unrefType,
+  ref as refType,
+  computed as computedType,
+  provide as provideType,
+  inject as injectType,
+  defineComponent as defineComponentType,
+} from "vue-demi"
+
+export const Vue = window.Vue as typeof VueType
+export const unref = (Vue as any).unref as typeof unrefType
+export const ref = (Vue as any).ref as typeof refType
+export const computed = (Vue as any).computed as typeof computedType
+export const provide = (Vue as any).provide as typeof provideType
+export const inject = (Vue as any).inject as typeof injectType
+export const defineComponent = (Vue as any).defineComponent as typeof defineComponentType