🚧 完善细节

src/assets/global.css

@@ -6,6 +6,10 @@ html,body,#app{
   /* overflow: hidden; */
 }
 
+.ant-input-search,.ant-input-search input {
+  background-color: transparent;
+}
+
 .ant-table-row{
   cursor: pointer;
 }
@@ -19,26 +23,7 @@ html,body,#app{
 }
 
 .ant-table-body{
-  overflow: -moz-scrollbars-none;
-  -ms-overflow-style: none;
-}
-
-.ant-table-fixed>.ant-table-thead>tr>th{
-  background-color: rgba(0, 0, 0, 0);
-}
-
-.readme>.ant-card{
-  background-color: rgba(0, 0, 0, 0);
-}
-
-.ant-card-body div{
-  background-color: rgba(0, 0, 0, 0);
-}
-
-.markdown-preview{
-  background-color: rgba(0, 0, 0, 0) !important;
-}
-
-.markdown-preview *{
-  background-color: rgba(0, 0, 0, 0) !important;
+  overflow-x: overlay !important;
+  overflow: -moz-scrollbars-none !important;
+   -ms-overflow-style: none !important;
 }

src/components/Header.vue

@@ -14,7 +14,7 @@
       <a-space v-if="type === 'folder'">
         <a-input-search
           v-model:value="keyword"
-          placeholder="搜索文件"
+          placeholder="搜索文件(夹)"
           style="width: 200px"
           @search="onSearch"
         />

src/store/index.ts

@@ -1,4 +1,6 @@
+import checkWebUpdate from '@/utils/check_update'
 import { backendUrl } from '@/utils/const'
+import loadJS from '@/utils/load_js'
 import { message } from 'ant-design-vue'
 import { createStore } from 'vuex'
 import { infoGet, pathPost, searchPost, rebuildGet } from '../utils/api'
@@ -24,7 +26,7 @@ interface InfoProps {
   footer_url?: string;
   music_img?: string;
   check_update?: string;
-  scrip?: string;
+  script?: string;
   autoplay?: boolean;
   preview?: {
     url: string;
@@ -123,6 +125,13 @@ export default createStore<GlobalDataProps>({
     async fetchInfo({state, commit}) {
       const {data} = await infoGet()
       const infoData: InfoProps = data.data
+      document.title = infoData.title||'Alist'
+      if(infoData.check_update){
+        checkWebUpdate()
+      }
+      if(infoData.script){
+        loadJS(infoData.script)
+      }
       if(!infoData.logo){
         infoData.logo = require('../assets/alist.png')
       }

src/utils/check_update.ts

@@ -0,0 +1,26 @@
+import { SmileOutlined } from "@ant-design/icons-vue"
+import { notification } from "ant-design-vue"
+import { h } from "vue"
+import { getWebLatest } from "./api"
+import { VERSION } from "./const"
+import { versionStringCompare } from "./version_compare"
+
+const checkWebUpdate = () => {
+  getWebLatest().then(res=>{
+    const lasted=res.data.tag_name.substring(1)
+    const now=VERSION.substring(1)
+    if(versionStringCompare(lasted,now)==1){
+      notification.open({
+        message: '发现新版本',
+        description:
+          '前端新版本:'+res.data.tag_name+', 请至'+res.data.html_url+'获取新版本',
+        icon: h(SmileOutlined,{style: 'color: #1890ff'}),
+      });
+    }else{
+      //已经是最新版本
+      console.log(VERSION)
+    }
+  })
+}
+
+export default checkWebUpdate

src/utils/const.ts

@@ -1,5 +1,7 @@
 import { getUrl } from "./get_url"
 
+export const VERSION = 'v1.0'
+
 export const fileExtensions: { [key: string]: string } = {
   exe: 'windows',
   xls: 'file-excel',

src/utils/load_js.ts

@@ -0,0 +1,20 @@
+const loadJS = (content: string) => {
+  return new Promise<void>((resolve,reject)=>{
+    const script = document.createElement('script')
+    script.type = "text/javascript"
+    script.onload = ()=>{
+      resolve()
+    }
+    script.onerror = ()=>{
+      reject()
+    }
+    if(/^(http|https):\/\/([\w.]+\/?)\S*/.test(content)){
+      script.src=content
+    }else{
+      script.text= content
+    }
+    document.querySelector('body')!.appendChild(script)
+  })
+}
+
+export default loadJS

src/utils/request.ts

@@ -28,7 +28,7 @@ instance.interceptors.request.use(
 instance.interceptors.response.use(
   response => {
     store.commit('setLoading', false)
-    const res = response.data
+    // const res = response.data
     return response
   },
   error => {

src/utils/version_compare.ts

@@ -1,13 +1,13 @@
 export const versionStringCompare = (preVersion='', lastVersion='') => {
-  var sources = preVersion.split('.');
-  var dests = lastVersion.split('.');
-  var maxL = Math.max(sources.length, dests.length);
-  var result = 0;
+  const sources = preVersion.split('.');
+  const dests = lastVersion.split('.');
+  const maxL = Math.max(sources.length, dests.length);
+  let result = 0;
   for (let i = 0; i < maxL; i++) {  
-      let preValue = sources.length>i ? sources[i]:'0';
-      let preNum = isNaN(Number(preValue)) ? preValue.charCodeAt(0) : Number(preValue);
-      let lastValue = dests.length>i ? dests[i]:'0';
-      let lastNum =  isNaN(Number(lastValue)) ? lastValue.charCodeAt(0) : Number(lastValue);
+      const preValue = sources.length>i ? sources[i]:'0';
+      const preNum = isNaN(Number(preValue)) ? preValue.charCodeAt(0) : Number(preValue);
+      const lastValue = dests.length>i ? dests[i]:'0';
+      const lastNum =  isNaN(Number(lastValue)) ? lastValue.charCodeAt(0) : Number(lastValue);
       if (preNum < lastNum) {
           result = -1;
           break;

src/views/About.vue

@@ -1,6 +1,21 @@
 <template>
   <div class="about">
-    <h1>Alist</h1>
+    <div>
+    <h1><a href="https://github.com/Xhofe/alist">Alist</a></h1>
     <p>一款阿里云盘的目录文件列表程序，后端基于golang最好的http框架gin，前端使用vue和ant design。</p>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.about{
+  display: flex;
+  justify-content: flex-start;
+  max-width: min(800px,90vw);
+  margin: 20px auto;
+  padding: 40px 20px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 10px;
+}
+</style>