Merge 94aaee8d9b into 7422db5fde

modules/web/.env.development

@@ -1 +0,0 @@
-VITE_API=http://192.168.10.11:1122

modules/web/.env.production

@@ -1 +0,0 @@
-VITE_API=

modules/web/README.md

@@ -12,9 +12,8 @@
 | Edge ≥ 79                                                              | Firefox ≥ 78                                                                      | Chrome ≥ 64                                                                    | Safari ≥ 12                                                                    |
 
 ## 开发
-> 需要阅读app提供后端服务，开发前修改环境变量`VITE_API`为阅读web服务地址
+> 需要阅读app提供后端服务
 
 ```bash
-echo "VITE_API=http://<ip>:<port>" > .env.development
 pnpm dev
 ```

modules/web/src/api/axios.js

@@ -1,10 +1,25 @@
 import axios from "axios";
 
 const SECOND = 1000;
+const remoteIp = ref(localStorage.getItem("remoteIp"));
 
 const ajax = axios.create({
-  baseURL: import.meta.env.VITE_API || location.origin,
+  // baseURL: import.meta.env.VITE_API || location.origin,
   timeout: 120 * SECOND,
 });
 
+ajax.interceptors.request.use((config) => {
+  config.baseURL = remoteIp.value;
+  return config;
+});
+
 export default ajax;
+
+export const setRemoteIp = (ip) => {
+  remoteIp.value = ip;
+  localStorage.setItem("remoteIp", ip);
+};
+
+export const baseUrl = () => {
+  return remoteIp.value;
+};

modules/web/src/api/index.js

@@ -1,10 +1,13 @@
-import ajax from "./axios";
+import ajax, { baseUrl } from "./axios";
 import { ElMessage } from "element-plus/es";
 
 /** https://github.com/gedoor/legado/tree/master/app/src/main/java/io/legado/app/api */
 /** https://github.com/gedoor/legado/tree/master/app/src/main/java/io/legado/app/web */
 
-const { hostname, port } = new URL(import.meta.env.VITE_API || location.origin);
+const getUrl = () => {
+  const { hostname, port } = new URL(baseUrl());
+  return `${hostname}:${Number(port) + 1}`;
+};
 
 const isSourecEditor = /source/i.test(location.href);
 const APIExceptionHandler = (error) => {
@@ -29,7 +32,7 @@ const saveBookProgressWithBeacon = (bookProgress) => {
   if (!bookProgress) return;
   // 常规请求可能会被取消 使用Fetch keep-alive 或者 navigator.sendBeacon
   navigator.sendBeacon(
-    `${import.meta.env.VITE_API || location.origin}/saveBookProgress`,
+    `${baseUrl()}/saveBookProgress`,
     JSON.stringify(bookProgress),
   );
 };
@@ -56,7 +59,7 @@ const search = (
   /** @type {() => void} */ onFinish,
 ) => {
   // webSocket
-  const url = `ws://${hostname}:${Number(port) + 1}/searchBook`;
+  const url = `ws://${getUrl()}/searchBook`;
   const socket = new WebSocket(url);
 
   socket.onopen = () => {
@@ -100,7 +103,7 @@ const debug = (
   /** @type {() => void} */ onFinish,
 ) => {
   // webSocket
-  const url = `ws://${hostname}:${Number(port) + 1}/${
+  const url = `ws://${getUrl()}/${
     isBookSource ? "bookSource" : "rssSource"
   }Debug`;
 

modules/web/src/auto-imports.d.ts

@@ -82,5 +82,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }

modules/web/src/components/BookItems.vue

@@ -50,15 +50,14 @@
 </template>
 <script setup>
 import { dateFormat } from "../utils/utils";
+import { baseUrl } from "@/api/axios.js";
 const props = defineProps(["books", "isSearch"]);
 const emit = defineEmits(["bookClick"]);
 const handleClick = (book) => emit("bookClick", book);
 const getCover = (coverUrl) => {
   return /^data:/.test(coverUrl)
     ? coverUrl
-    : (import.meta.env.VITE_API || location.origin) +
+    : baseUrl() + "/cover?path=" + encodeURIComponent(coverUrl);
-        "/cover?path=" +
-        encodeURIComponent(coverUrl);
 };
 
 const subJustify = computed(() =>
@@ -105,7 +104,7 @@ const subJustify = computed(() =>
         margin-left: 20px;
         flex: 1;
         overflow: hidden;
-        
+
         .name {
           width: fit-content;
           font-size: 16px;

modules/web/src/store/bookStore.js

@@ -57,12 +57,20 @@ export const useBookStore = defineStore("book", {
     setConnectType(connectType) {
       this.connectType = connectType;
     },
+    resetConnect() {
+      this.connectStatus = "正在连接后端服务器……";
+      this.connectType = "";
+      this.clearBooks();
+    },
     setNewConnect(newConnect) {
       this.newConnect = newConnect;
     },
     addBooks(books) {
       this.shelf = books;
     },
+    clearBooks() {
+      this.shelf = [];
+    },
     setCatalog(catalog) {
       this.catalog = catalog;
     },

modules/web/src/utils/utils.js

@@ -1,4 +1,5 @@
 import { formatDate } from "@vueuse/shared";
+import { baseUrl } from "@/api/axios.js";
 
 export const isLegadoUrl = (/** @type {string} */ url) =>
   /,\s*\{/.test(url) ||
@@ -12,7 +13,7 @@ export const isLegadoUrl = (/** @type {string} */ url) =>
  */
 export function getImageFromLegado(src) {
   return (
-    (import.meta.env.VITE_API || location.origin) +
+    baseUrl() +
     "/image?path=" +
     encodeURIComponent(src) +
     "&url=" +

modules/web/src/views/BookShelf.vue

@@ -40,14 +40,24 @@
         </div>
         <div class="setting-wrapper">
           <div class="setting-title">基本设定</div>
-          <div class="setting-item">
+          <div class="setting-ip">
+            <el-input
+              class="setting-input"
+              size="small"
+              :disabled="ipInput.disable"
+              v-model="ipInput.ip"
+              @keydown.enter="setIP"
+            />
             <el-tag
-              :type="connectType"
+              type="primary"
-              size="large"
+              class="setting-toggle"
-              class="setting-connect"
+              @click="toggleIpConfig"
-              :class="{ 'no-point': newConnect }"
-              @click="setIP"
             >
+              {{ ipInput.disable ? "修改" : "取消" }}
+            </el-tag>
+          </div>
+          <div class="setting-item">
+            <el-tag :type="connectType" size="large" class="setting-connect">
               {{ connectStatus }}
             </el-tag>
           </div>
@@ -81,6 +91,7 @@ import githubUrl from "@/assets/imgs/github.png";
 import { useLoading } from "@/hooks/loading";
 import { Search } from "@element-plus/icons-vue";
 import API from "@api";
+import { baseUrl, setRemoteIp } from "@/api/axios.js";
 
 const store = useBookStore();
 const { connectStatus, connectType, newConnect, shelf } = storeToRefs(store);
@@ -136,7 +147,7 @@ const searchBook = () => {
       }
       try {
         store.setSearchBooks(JSON.parse(data));
-        books.value = store.searchBooks
+        books.value = store.searchBooks;
         //store.searchBooks.forEach((item) => books.value.push(item));
       } catch (e) {
         ElMessage.error("后端数据错误");
@@ -152,7 +163,19 @@ const searchBook = () => {
   );
 };
 
-const setIP = () => {};
+const ipInput = reactive({
+  ip: baseUrl(),
+  disable: true,
+});
+const toggleIpConfig = () => {
+  ipInput.ip = baseUrl();
+  ipInput.disable = !ipInput.disable;
+};
+const setIP = () => {
+  setRemoteIp(ipInput.ip);
+  ipInput.disable = true;
+  loadShelf();
+};
 
 const router = useRouter();
 const handleBookClick = async (book) => {
@@ -195,13 +218,19 @@ onMounted(() => {
       readingRecent.value.chapterIndex = 0;
     }
   }
+  loadShelf();
+});
+
+const loadShelf = () => {
+  store.resetConnect();
   loadingWrapper(
     store
       .saveBookProgress()
       //确保各种网络情况下同步请求先完成
       .finally(fetchBookShelfData),
   );
-});
+};
+
 const fetchBookShelfData = () => {
   return API.getBookShelf()
     .then((response) => {
@@ -308,15 +337,31 @@ const fetchBookShelfData = () => {
         font-family: FZZCYSK;
       }
 
+      .setting-ip {
+        margin-top: 16px;
+        white-space: nowrap;
+      }
+
+      .setting-input {
+        width: 216px;
+        margin-right: 4px;
+      }
+
       .no-point {
         pointer-events: none;
       }
 
-      .setting-connect {
+      .setting-toggle {
-        font-size: 8px;
+        font-size: 10px;
-        margin-top: 16px;
-        // color: #6B7C87;
         cursor: pointer;
+        //margin-top: 4px;
+      }
+
+      .setting-connect {
+        font-size: 10px;
+        margin-top: 4px;
+        // color: #6B7C87;
+        //cursor: pointer;
       }
     }