= [
5 | {
6 | path: '/',
7 | name: 'Home',
8 | redirect: '/root'
9 | },
10 | {
11 | path: '/about',
12 | name: 'About',
13 | // route level code-splitting
14 | // this generates a separate chunk (about.[hash].js) for this route
15 | // which is lazy-loaded when the route is visited.
16 | component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
17 | },
18 | {
19 | path: '/:path(.*)*',
20 | component: Home
21 | }
22 | ]
23 |
24 | const router = createRouter({
25 | history: createWebHistory(process.env.BASE_URL),
26 | routes
27 | })
28 |
29 | export default router
30 |
--------------------------------------------------------------------------------
/vue/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | declare module '*.vue' {
3 | import type { DefineComponent } from 'vue'
4 | const component: DefineComponent<{}, {}, any>
5 | export default component
6 | }
7 |
--------------------------------------------------------------------------------
/vue/src/store/index.ts:
--------------------------------------------------------------------------------
1 | import checkWebUpdate from '@/utils/check_update'
2 | import { backendUrl } from '@/utils/const'
3 | import loadJS from '@/utils/load_js'
4 | import { message } from 'ant-design-vue'
5 | import { createStore } from 'vuex'
6 | import { infoGet, pathPost, searchPost, rebuildGet } from '../utils/api'
7 |
8 | interface MetaProps {
9 | code: number;
10 | msg?: string;
11 | }
12 |
13 | interface RespProps {
14 | meta: MetaProps;
15 | data: P;
16 | }
17 |
18 | export interface ListProps
{
19 | [index: number]: P;
20 | }
21 |
22 | interface InfoProps {
23 | title?: string;
24 | logo?: string;
25 | footer_text?: string;
26 | footer_url?: string;
27 | music_img?: string;
28 | check_update?: string;
29 | script?: string;
30 | autoplay?: boolean;
31 | preview?: {
32 | url: string;
33 | pre_process: string[];
34 | extensions: string[];
35 | text: string[];
36 | max_size: number;
37 | };
38 | }
39 |
40 | export interface FileProps {
41 | dir: string;
42 | file_extension: string;
43 | file_id: string;
44 | name: string;
45 | type: string;
46 | updated_at: string;
47 | category: string;
48 | content_type: string;
49 | size: number;
50 | password: "";
51 | sizeStr: string;
52 | time: string;
53 | icon: string;
54 | }
55 |
56 | interface Audio {
57 | name: string;
58 | url: string;
59 | cover: string;
60 | }
61 |
62 | export interface GlobalDataProps {
63 | loading: boolean;
64 | info: InfoProps;
65 | password: string;
66 | meta: MetaProps;
67 | data: FileProps|FileProps[];
68 | type: string;
69 | audios: Audio[];
70 | }
71 |
72 | export default createStore({
73 | state: {
74 | info: {},
75 | loading: true,
76 | password: localStorage.getItem('password')||'',
77 | meta: {
78 | code: 200,
79 | },
80 | data: [],
81 | type: 'folder',
82 | audios: [],
83 | },
84 | mutations: {
85 | setLoading(state, loading) {
86 | state.loading = loading
87 | },
88 | setPassword(state, password) {
89 | state.password = password
90 | localStorage.setItem('password', password)
91 | },
92 | setInfo(state, info) {
93 | state.info = info
94 | },
95 | setMeta(state, meta) {
96 | state.meta = meta
97 | },
98 | setData(state, data) {
99 | if(!data) {
100 | state.type = 'no'
101 | state.data = []
102 | return
103 | }
104 | if(data.type){
105 | state.type = 'file'
106 | }else{
107 | state.type = 'folder'
108 | const audios: Audio[] = []
109 | const files = data as FileProps[]
110 | for(const file of files){
111 | if(file.category === 'audio'){
112 | audios.push({
113 | name: file.name,
114 | url: backendUrl+'d/'+file.dir+file.name,
115 | cover: state.info.music_img||'https://img.oez.cc/2020/12/19/0f8b57866bdb5.gif'
116 | })
117 | }
118 | }
119 | state.audios = audios
120 | }
121 | state.data = data
122 | }
123 | },
124 | actions: {
125 | async fetchInfo({state, commit}) {
126 | const {data} = await infoGet()
127 | const infoData: InfoProps = data.data
128 | document.title = infoData.title||'Alist'
129 | if(infoData.check_update){
130 | checkWebUpdate()
131 | }
132 | if(infoData.script){
133 | loadJS(infoData.script)
134 | }
135 | if(!infoData.logo){
136 | infoData.logo = require('../assets/alist.png')
137 | }
138 | commit('setInfo',infoData)
139 | },
140 | async fetchPathOrSearch({state, commit}, {path, query}){
141 | commit('setLoading', true)
142 | if(query){
143 | const {data} = await searchPost(query, path)
144 | const {meta} =data
145 | if(meta.code !== 200){
146 | message.error(meta.msg)
147 | }
148 | commit('setData',data.data)
149 | }else{
150 | const {data} = await pathPost(path, state.password)
151 | const {meta} =data
152 | commit('setMeta', meta)
153 | if(meta.code !== 200){
154 | message.error(meta.msg)
155 | }
156 | if(meta.code === 401){
157 | return
158 | }
159 | commit('setData',data.data)
160 | }
161 | commit('setLoading', false)
162 | }
163 | },
164 | getters: {
165 | },
166 | modules: {
167 | }
168 | })
169 |
--------------------------------------------------------------------------------
/vue/src/utils/api.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import request from './request'
3 |
4 | export const getPost = (path: string, password: string) => {
5 | return request({
6 | url: "get",
7 | method: "post",
8 | data: {
9 | path: path,
10 | password: password
11 | }
12 | })
13 | }
14 |
15 | export const pathPost = (path: string, password: string) => {
16 | return request({
17 | url: "path",
18 | method: "post",
19 | data: {
20 | path: path,
21 | password: password
22 | }
23 | })
24 | }
25 |
26 | export const searchPost = (keyword: string, dir: string) => {
27 | return request({
28 | url: "local_search",
29 | method: "post",
30 | data: {
31 | keyword: keyword,
32 | dir: dir
33 | }
34 | })
35 | }
36 |
37 | export const infoGet = () => {
38 | return request({
39 | url: "info",
40 | method: "get",
41 | })
42 | }
43 |
44 | export const rebuildGet = (password: string) => {
45 | return request({
46 | url: "rebuild/" + password,
47 | method: "get",
48 | })
49 | }
50 |
51 | export const officePreviewPost = (fileId: string) => {
52 | return request({
53 | url: "office_preview",
54 | method: "post",
55 | data: {
56 | 'file_id': fileId
57 | }
58 | })
59 | }
60 |
61 | export const getWebLatest = () => {
62 | return axios.get('https://api.github.com/repos/Xhofe/alist-web/releases/latest')
63 | }
64 |
65 | export const getBackLatest = () => {
66 | return axios.get('https://api.github.com/repos/Xhofe/alist/releases/latest')
67 | }
68 |
69 | export const getText = (url: string) => {
70 | return axios.get(url)
71 | }
--------------------------------------------------------------------------------
/vue/src/utils/base64.ts:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * Base64 encode / decode
4 | * http://www.webtoolkit.info/
5 | *
6 | **/
7 |
8 | export const Base64 = {
9 | // private property
10 | _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
11 |
12 | // public method for encoding
13 | encode: function (input: string) {
14 | let output = "";
15 | let chr1, chr2, chr3, enc1, enc2, enc3, enc4;
16 | let i = 0;
17 | input = Base64._utf8_encode(input);
18 | while (i < input.length) {
19 | chr1 = input.charCodeAt(i++);
20 | chr2 = input.charCodeAt(i++);
21 | chr3 = input.charCodeAt(i++);
22 | enc1 = chr1 >> 2;
23 | enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
24 | enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
25 | enc4 = chr3 & 63;
26 | if (isNaN(chr2)) {
27 | enc3 = enc4 = 64;
28 | } else if (isNaN(chr3)) {
29 | enc4 = 64;
30 | }
31 | output = output +
32 | this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
33 | this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
34 | }
35 | return output;
36 | },
37 |
38 | // public method for decoding
39 | decode: function (input: string) {
40 | let output = "";
41 | let chr1, chr2, chr3;
42 | let enc1, enc2, enc3, enc4;
43 | let i = 0;
44 | input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
45 | while (i < input.length) {
46 | enc1 = this._keyStr.indexOf(input.charAt(i++));
47 | enc2 = this._keyStr.indexOf(input.charAt(i++));
48 | enc3 = this._keyStr.indexOf(input.charAt(i++));
49 | enc4 = this._keyStr.indexOf(input.charAt(i++));
50 | chr1 = (enc1 << 2) | (enc2 >> 4);
51 | chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
52 | chr3 = ((enc3 & 3) << 6) | enc4;
53 | output = output + String.fromCharCode(chr1);
54 | if (enc3 != 64) {
55 | output = output + String.fromCharCode(chr2);
56 | }
57 | if (enc4 != 64) {
58 | output = output + String.fromCharCode(chr3);
59 | }
60 | }
61 | output = Base64._utf8_decode(output);
62 | return output;
63 | },
64 |
65 | // private method for UTF-8 encoding
66 | _utf8_encode: function (string: string) {
67 | string = string.replace(/\r\n/g, "\n");
68 | let utftext = "";
69 | for (let n = 0; n < string.length; n++) {
70 | let c = string.charCodeAt(n);
71 | if (c < 128) {
72 | utftext += String.fromCharCode(c);
73 | }
74 | else if ((c > 127) && (c < 2048)) {
75 | utftext += String.fromCharCode((c >> 6) | 192);
76 | utftext += String.fromCharCode((c & 63) | 128);
77 | }
78 | else {
79 | utftext += String.fromCharCode((c >> 12) | 224);
80 | utftext += String.fromCharCode(((c >> 6) & 63) | 128);
81 | utftext += String.fromCharCode((c & 63) | 128);
82 | }
83 | }
84 | return utftext;
85 | },
86 |
87 | // private method for UTF-8 decoding
88 | _utf8_decode: function (utftext: string) {
89 | let string = "";
90 | let i = 0
91 | let c = 0
92 | let c1 = 0
93 | let c2 = 0
94 | while (i < utftext.length) {
95 | c = utftext.charCodeAt(i);
96 | if (c < 128) {
97 | string += String.fromCharCode(c);
98 | i++;
99 | }
100 | else if ((c > 191) && (c < 224)) {
101 | c2 = utftext.charCodeAt(i + 1);
102 | string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
103 | i += 2
104 | }
105 | else {
106 | c2 = utftext.charCodeAt(i + 1);
107 | c1 = utftext.charCodeAt(i + 2);
108 | string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c1 & 63));
109 | i += 3;
110 | }
111 | }
112 | return string;
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/vue/src/utils/check_update.ts:
--------------------------------------------------------------------------------
1 | import { SmileOutlined } from "@ant-design/icons-vue"
2 | import { notification } from "ant-design-vue"
3 | import { h } from "vue"
4 | import { getWebLatest } from "./api"
5 | import { VERSION } from "./const"
6 | import { versionStringCompare } from "./version_compare"
7 |
8 | const checkWebUpdate = () => {
9 | getWebLatest().then(res=>{
10 | const lasted=res.data.tag_name.substring(1)
11 | const now=VERSION.substring(1)
12 | if(versionStringCompare(lasted,now)==1){
13 | notification.open({
14 | message: '发现新版本',
15 | description:
16 | '前端新版本:'+res.data.tag_name+', 请至'+res.data.html_url+'获取新版本',
17 | icon: h(SmileOutlined,{style: 'color: #1890ff'}),
18 | });
19 | }else{
20 | //已经是最新版本
21 | console.log(VERSION)
22 | }
23 | })
24 | }
25 |
26 | export default checkWebUpdate
--------------------------------------------------------------------------------
/vue/src/utils/const.ts:
--------------------------------------------------------------------------------
1 | import { getUrl } from "./get_url"
2 |
3 | export const VERSION = 'v1.0.0'
4 |
5 | export const fileExtensions: { [key: string]: string } = {
6 | exe: 'windows',
7 | xls: 'file-excel',
8 | xlsx: 'file-excel',
9 | md: 'file-markdown',
10 | pdf: 'file-pdf',
11 | ppt: 'file-ppt',
12 | pptx: 'file-ppt',
13 | doc: 'file-word',
14 | docx: 'file-word',
15 | // jpg:'file-jpg',
16 | zip: 'file-zip',
17 | gz: 'file-zip',
18 | rar: 'file-zip',
19 | "7z": 'file-zip',
20 | tar: 'file-zip',
21 | jar: 'file-zip',
22 | xz: 'file-zip',
23 | apk: 'android',
24 | dmg: 'apple',
25 | ipa: 'apple',
26 | }
27 |
28 | export const doc = ['pdf', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']
29 |
30 | export const categorys: { [key: string]: string } = {
31 | image: 'file-image',
32 | doc: 'file-text',
33 | video: 'youtube',
34 | audio: 'customer-service',
35 | }
36 |
37 | export const backendUrl: string = process.env.VUE_APP_API_URL != '/' ? process.env.VUE_APP_API_URL : getUrl('')
38 |
--------------------------------------------------------------------------------
/vue/src/utils/copy_clip.ts:
--------------------------------------------------------------------------------
1 | export const copyToClip = (content: string) => {
2 | const aux = document.createElement("textarea");
3 | // aux.setAttribute("value", content);
4 | aux.value = content
5 | document.body.appendChild(aux)
6 | aux.select()
7 | document.execCommand("copy")
8 | document.body.removeChild(aux)
9 | }
--------------------------------------------------------------------------------
/vue/src/utils/date.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * full
3 | * 用于月日时分秒小于10补0
4 | * @param {*} p
5 | */
6 | export const full = (p: number) => {
7 | return p < 10 ? '0' + p : p
8 | }
9 |
10 | /**
11 | * formateDate
12 | * 将timestamp日期格式化为 yyyy-mm-dd hh-mm-ss
13 | * @param {*} date
14 | */
15 | export function formatDate(dateStr: string) {
16 | const date = new Date(dateStr)
17 | const year = date.getFullYear()
18 | const mon = date.getMonth() + 1
19 | const day = date.getDate()
20 | const hour = date.getHours()
21 | const min = date.getMinutes()
22 | const sec = date.getSeconds()
23 |
24 | return year + '-' + full(mon) + '-' + full(day) + ' ' +
25 | full(hour) + ':' + full(min) + ':' + full(sec)
26 | }
27 |
--------------------------------------------------------------------------------
/vue/src/utils/file_size.ts:
--------------------------------------------------------------------------------
1 | export function getFileSize(size: number){
2 | if (!size)
3 | return "";
4 |
5 | const num = 1024.00; //byte
6 |
7 | if (size < num)
8 | return size + "B";
9 | if (size < Math.pow(num, 2))
10 | return (size / num).toFixed(2) + "K"; //kb
11 | if (size < Math.pow(num, 3))
12 | return (size / Math.pow(num, 2)).toFixed(2) + "M"; //M
13 | if (size < Math.pow(num, 4))
14 | return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
15 | return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
16 | }
--------------------------------------------------------------------------------
/vue/src/utils/get_icon.ts:
--------------------------------------------------------------------------------
1 | import { FileProps } from "@/store"
2 | import { categorys, fileExtensions } from "./const"
3 |
4 | export const getIcon = (record: FileProps) => {
5 | if (record.type=='folder'){
6 | return 'folder'
7 | }
8 | if (Object.prototype.hasOwnProperty.call(fileExtensions,record.file_extension)){
9 | return fileExtensions[record.file_extension]
10 | }
11 | if (Object.prototype.hasOwnProperty.call(categorys,record.category)){
12 | return categorys[record.category]
13 | }
14 | return 'file'
15 | }
16 |
--------------------------------------------------------------------------------
/vue/src/utils/get_url.ts:
--------------------------------------------------------------------------------
1 | export const getUrl=(fullUrl: string)=>{
2 | if(!fullUrl){
3 | fullUrl=window.location.href
4 | }
5 | const urlArr=fullUrl.split('/')
6 | return urlArr.slice(0,3).join('/')+'/'
7 | }
--------------------------------------------------------------------------------
/vue/src/utils/load_js.ts:
--------------------------------------------------------------------------------
1 | const loadJS = (content: string) => {
2 | return new Promise((resolve,reject)=>{
3 | const script = document.createElement('script')
4 | script.type = "text/javascript"
5 | script.onload = ()=>{
6 | resolve()
7 | }
8 | script.onerror = ()=>{
9 | reject()
10 | }
11 | if(/^(http|https):\/\/([\w.]+\/?)\S*/.test(content)){
12 | script.src=content
13 | }else{
14 | script.text= content
15 | }
16 | document.querySelector('body')!.appendChild(script)
17 | })
18 | }
19 |
20 | export default loadJS
--------------------------------------------------------------------------------
/vue/src/utils/request.ts:
--------------------------------------------------------------------------------
1 | import { message } from 'ant-design-vue'
2 | import axios from 'axios'
3 |
4 | const instance = axios.create({
5 | baseURL: process.env.VUE_APP_API_URL+'api/',
6 | // timeout: 5000
7 | headers: {
8 | 'Content-Type': "application/json;charset=utf-8"
9 | },
10 | withCredentials: false,
11 | })
12 |
13 | instance.interceptors.request.use(
14 | config => {
15 | // do something before request is sent
16 | return config
17 | },
18 | error => {
19 | // do something with request error
20 | console.log('Error: ' + error.message) // for debug
21 | return Promise.reject(error)
22 | }
23 | )
24 |
25 | // response interceptor
26 | instance.interceptors.response.use(
27 | response => {
28 | // const res = response.data
29 | return response
30 | },
31 | error => {
32 | // 响应失败
33 | console.log(error) // for debug
34 | if (!error.response||error.response.data.meta == undefined){
35 | message.error('后端网络异常,请检查后端程序是否运行或检查网络连接!')
36 | return Promise.reject(error)
37 | }
38 | // return Promise.reject(error)
39 | return error.response.data
40 | }
41 | )
42 |
43 | export default instance
--------------------------------------------------------------------------------
/vue/src/utils/version_compare.ts:
--------------------------------------------------------------------------------
1 | export const versionStringCompare = (preVersion='', lastVersion='') => {
2 | const sources = preVersion.split('.');
3 | const dests = lastVersion.split('.');
4 | const maxL = Math.max(sources.length, dests.length);
5 | let result = 0;
6 | for (let i = 0; i < maxL; i++) {
7 | const preValue = sources.length>i ? sources[i]:'0';
8 | const preNum = isNaN(Number(preValue)) ? preValue.charCodeAt(0) : Number(preValue);
9 | const lastValue = dests.length>i ? dests[i]:'0';
10 | const lastNum = isNaN(Number(lastValue)) ? lastValue.charCodeAt(0) : Number(lastValue);
11 | if (preNum < lastNum) {
12 | result = -1;
13 | break;
14 | } else if (preNum > lastNum) {
15 | result = 1;
16 | break;
17 | }
18 | }
19 | return result;
20 | }
--------------------------------------------------------------------------------
/vue/src/views/About.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
一款阿里云盘的目录文件列表程序，后端基于go语言fiber框架重构原始项目，前端使用vue和ant design。
6 |
7 |
3 |
4 |
5 |
6 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |