Onedrive分享型网盘搭建 - FODI

本人有两个onedrive账号，一个自用，另外一个是前几天蹭的edu账号，之前一直想用onedrive来分享文件（毕竟容量是真的大），就在放寒假前，我发现了github的一个项目：FODI，虽说这UI不是很好看，但是不用服务器（嗯，让白嫖党有点快乐了），所以就动起了手……

官方教程：https://logi.im/front-end/scf-fodi.html

当我正在按照官方教程搭建的时候，在获取refresh_token这一步，它居然给我报错了？？？

官方教程中，是要求进入此网址进行登录后，把第一个?删掉，把第一个&改成?，然后就给我弹出以下错误：

1
Message
2
{
3
    "error": "invalid_grant",
4
    "error_description": "AADSTS54005: OAuth2 Authorization code was already redeemed, please retry with a new valid code or use an existing refresh token.\r\nTrace ID: b0425d60-48d1-4006-aec5-76d97732cd00\r\nCorrelation ID: 0d390346-7cfa-4284-9518-67444dca1511\r\nTimestamp: 2020-02-09 02:08:21Z",
5
    "error_codes": [
6
        54005
7
    ],
8
    "timestamp": "2020-02-09 02:08:21Z",
9
    "trace_id": "b0425d60-48d1-4006-aec5-76d97732cd00",
10
    "correlation_id": "0d390346-7cfa-4284-9518-67444dca1511"
11
}

我的内心是崩溃的……好了不干了！

咕咕咕

回归正题，干还是要干的，要么握着5T的onedrive没意思是吧……

然后我在Github又发现了一个新的项目——OneManager

嘤嘤嘤

打算部署这个玩意，这时候就有人问了：诶不是，你这标题不是写的FODI？怎么变成OneManager了？

别急，这玩意自然有它利用的价值

Deploy 点击这个紫色的按钮，就会进入heroku的部署界面~~（啥？你说你不会用？那没事了）~~，将此项目部署后进行安装，会要求输入heroku的api和管理员密码，这些就按要求填写就好了

接着就到了比较重要的一步：获取refresh_token（没错你知道我要干嘛了）

版本选择

第一步安装的时候选择MS（中国版选择CN，如果你喜欢搞事情，你也可以选择MSC自己申请api，我就是懒，就不自己申请api了）

然后登陆自己的微软账户，接着就会弹出自己的refresh_token，这不就搞定了refresh_token啦？！

refresh_token获取

如果你没有及时复制你自己的refresh_token，你也可以到你自己heroku项目的变量下复制

refresh_token in Heroku

接着我们返回FODI，将自己的refresh_token贴近官方给的模板的对应位置，接着将代码复制到cloudflare的workers里面（你又问我workers是什么？看这里啦！），然后保存即可！

cloudflare editor

官方模板：

1
/**
2
 * IS_CN: 如果为世纪互联版本，请将 0 改为 1
3
 * EXPOSE_PATH：暴露路径，如全盘展示请留空，否则按 '/媒体/音乐' 的格式填写
4
 * ONEDRIVE_REFRESHTOKEN: refresh_token
5
 */
6
const IS_CN = 0;
7
const EXPOSE_PATH = ""
8
const ONEDRIVE_REFRESHTOKEN = ""
9

10

11
async function handleRequest(request) {
12
  let requestPath
13
  let querySplited
14
  let queryString = request.url.split('?')[1]
15
  if (queryString) {
16
    querySplited = queryString.split('=')
17
  }
18
  if (querySplited && querySplited[0] === 'file') {
19
    const file = querySplited[1]
20
    const fileName = file.split('/').pop();
21
    requestPath = file.replace('/' + fileName, '')
22
    const url = await fetchFiles(requestPath, fileName)
23
    return Response.redirect(url, 302)
24
  } else {
25
    const { headers } = request
26
    const contentType = headers.get('content-type')
27
    let body={}
28
    if (contentType && contentType.includes('form')) {
29
      const formData = await request.formData()
30
      for (let entry of formData.entries()) {
31
        body[entry[0]] = entry[1]
32
      }
33
    }
34
    requestPath = body ? body['?path'] : '';
35
    const files = await fetchFiles(requestPath, null, body.passwd);
36
    return new Response(files, {
37
      headers: {
38
        'content-type': 'application/json; charset=utf-8',
39
        'Access-Control-Allow-Origin': '*'
40
      }
41
    })
42
  }
43
}
44

45
addEventListener('fetch', event => {
46
  return event.respondWith(handleRequest(event.request))
47
})
48

49

50
const clientId = [
51
  '4da3e7f2-bf6d-467c-aaf0-578078f0bf7c',
52
  '04c3ca0b-8d07-4773-85ad-98b037d25631'
53

54
]
55
const clientSecret = [
56
  '7/+ykq2xkfx:.DWjacuIRojIaaWL0QI6',
57
  'h8@B7kFVOmj0+8HKBWeNTgl@pU/z4yLB'
58
]
59

60
const oauthHost = [
61
  'https://login.microsoftonline.com',
62
  'https://login.partner.microsoftonline.cn'
63
]
64

65
const apiHost = [
66
  'https://graph.microsoft.com',
67
  'https://microsoftgraph.chinacloudapi.cn'
68
]
69

70
const OAUTH = {
71
  'redirectUri': 'https://scfonedrive.github.io',
72
  'refreshToken': ONEDRIVE_REFRESHTOKEN,
73
  'clientId': clientId[IS_CN],
74
  'clientSecret': clientSecret[IS_CN],
75
  'oauthUrl': oauthHost[IS_CN] + '/common/oauth2/v2.0/',
76
  'apiUrl': apiHost[IS_CN] + '/v1.0/me/drive/root',
77
  'scope': apiHost[IS_CN] + '/Files.ReadWrite.All offline_access'
78
}
79

80
async function gatherResponse(response) {
81
  const { headers } = response
82
  const contentType = headers.get('content-type')
83
  if (contentType.includes('application/json')) {
84
    return await response.json()
85
  } else if (contentType.includes('application/text')) {
86
    return await response.text()
87
  } else if (contentType.includes('text/html')) {
88
    return await response.text()
89
  } else {
90
    return await response.text()
91
  }
92
}
93

94
async function getContent(url) {
95
  const response = await fetch(url)
96
  const result = await gatherResponse(response)
97
  return result
98
}
99

100
async function getContentWithHeaders(url, headers) {
101
  const response = await fetch(url, { headers: headers })
102
  const result = await gatherResponse(response)
103
  return result
104
}
105

106
async function fetchFormData(url, data) {
107
  const formdata = new FormData();
108
  for (const key in data) {
109
    if (data.hasOwnProperty(key)) {
110
      formdata.append(key, data[key])
111
    }
112
  }
113
  const requestOptions = {
114
    method: 'POST',
115
    body: formdata
116
  };
117
  const response = await fetch(url, requestOptions)
118
  const result = await gatherResponse(response)
119
  return result
120
}
121

122
async function fetchAccessToken() {
123
  url = OAUTH['oauthUrl'] + 'token'
124
  data = {
125
    'client_id': OAUTH['clientId'],
126
    'client_secret': OAUTH['clientSecret'],
127
    'grant_type': 'refresh_token',
128
    'requested_token_use': 'on_behalf_of',
129
    'refresh_token': OAUTH['refreshToken']
130
  }
131
  const result = await fetchFormData(url, data)
132
  return result.access_token
133
}
134

135
async function fetchFiles(path, fileName, passwd) {
136
  if (!path || path === '/') {
137
    if (EXPOSE_PATH === '') {
138
      path = ''
139
    } else {
140
      path = ':' + EXPOSE_PATH
141
    }
142
  } else {
143
    if (EXPOSE_PATH === '') {
144
      path = ':' + path
145
    } else {
146
      path = ':' + EXPOSE_PATH + path
147
    }
148
  }
149

150
  const accessToken = await fetchAccessToken()
151
  const uri = OAUTH.apiUrl + encodeURI(path) + '?expand=children(select=name,size,parentReference,lastModifiedDateTime,@microsoft.graph.downloadUrl)'
152

153
  const body = await getContentWithHeaders(uri, {
154
    Authorization: 'Bearer ' + accessToken
155
  })
156
  if (fileName) {
157
    let thisFile = null
158
    body.children.forEach(file => {
159
      if (file.name === decodeURIComponent(fileName)) {
160
        thisFile = file['@microsoft.graph.downloadUrl']
161
        return
162
      }
163
    })
164
    return thisFile
165
  } else {
166
    let files = []
167
    let encrypted = false
168
    for (let i = 0; i < body.children.length; i++) {
169
      const file = body.children[i]
170
      if (file.name === '.password') {
171
        const PASSWD = await getContent(file['@microsoft.graph.downloadUrl'])
172
        if (PASSWD !== passwd) {
173
          encrypted = true;
174
          break
175
        } else {
176
          continue
177
        }
178
      }
179
      files.push({
180
        name: file.name,
181
        size: file.size,
182
        time: file.lastModifiedDateTime,
183
        url: file['@microsoft.graph.downloadUrl']
184
      })
185
    }
186
    let parent
187
    if (body.children.length) {
188
      parent = body.children[0].parentReference.path
189
    } else {
190
      parent = body.parentReference.path
191
    }
192
    parent = parent.split(':').pop().replace(EXPOSE_PATH, '') || '/'
193
    parent = decodeURIComponent(parent)
194
    if (encrypted) {
195
      return JSON.stringify({ parent: parent, files: [], encrypted: true })
196
    } else {
197
      return JSON.stringify({ parent: parent, files: files })
198
    }
199
  }
200
}

接着，我们打开官方给的html文件，将自己的workers链接贴到对应的位置，部署到github即可！

html文件备份：（可以直接复制）

1
<!DOCTYPE html>
2

3
<head>
4
    <script>
5
        /**
6
        * SCF_GATEWAY：SCF 云函数网关地址
7
        * SITE_NAME：站点名称
8
        */
9
        window.GLOBAL_CONFIG = {
10
            SCF_GATEWAY: "",
11
            SITE_NAME: "FODI",
12
            IS_CF: true
13
        };
14
        if (window.GLOBAL_CONFIG.SCF_GATEWAY.indexOf('workers') === -1) {
15
            window.GLOBAL_CONFIG.SCF_GATEWAY += '/fodi/';
16
            window.GLOBAL_CONFIG.IS_CF = false;
17
        }
18
        // if (location.protocol === 'http:') {
19
        //     location.href = location.href.replace(/http/, 'https');
20
        // }
21
    </script>
22
    <meta charset="utf-8">
23
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
24
    <script src="//s0.pstatp.com/cdn/expire-1-M/ionicons/4.5.6/ionicons.js"></script>
25
    <script src="//s0.pstatp.com/cdn/expire-1-M/marked/0.6.2/marked.min.js"></script>
26
    <script src="//s0.pstatp.com/cdn/expire-1-M/highlight.js/9.15.6/highlight.min.js"></script>
27
    <link href="//s0.pstatp.com/cdn/expire-1-M/highlight.js/9.15.6/styles/github.min.css" rel="stylesheet" />
28
    <link href="//s0.pstatp.com/cdn/expire-1-M/github-markdown-css/3.0.1/github-markdown.min.css" rel="stylesheet" />
29
    <script src="//s0.pstatp.com/cdn/expire-1-M/jquery/3.4.0/jquery.min.js"></script>
30
    <script src="//s0.pstatp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.js"></script>
31
    <link href="//s0.pstatp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet" />
32
    <style>
33
        .password-wrapper {
34
            display: flex;
35
            align-items: center;
36
        }
37

38
        .password {
39
            margin: 0 auto;
40
            padding-top: 1em;
41
            display: none;
42
        }
43

44
        .password input {
45
            height: 2em;
46
            outline: none;
47
            border: solid rgb(218, 215, 215) 1px;
48
        }
49

50
        .password button {
51
            background: white;
52
            height: 2em;
53
            outline: none;
54
            border: solid rgb(218, 215, 215) 1px;
55
        }
56

57
        .password button:hover {
58
            color: white;
59
            background: rgb(218, 215, 215);
60
        }
61

62
        pre * {
63
            font-family: Courier New;
64
        }
65

66
        .preview {
67
            display: none;
68
            font-size: .8em;
69
        }
70

71
        .content {
72
            clear: both;
73
            padding: 0 1em;
74
            margin: 0 auto;
75
            text-align: center;
76
        }
77

78
        .file-name {
79
            line-height: 1em;
80
            padding: 1em 1em 0;
81
            text-align: center;
82
            white-space: nowrap;
83
            overflow: hidden;
84
        }
85

86
        .btn {
87
            float: right;
88
            text-align: center;
89
            border: solid rgb(218, 215, 215) 1px;
90
            border-radius: 1em;
91
            margin: 1em .2em;
92
            width: 4em;
93
            height: 2em;
94
            line-height: 2em;
95
            user-select: none;
96
            -moz-user-select: none;
97
            -o-user-select: none;
98
            -khtml-user-select: none;
99
            -webkit-user-select: none;
100
            -ms-user-select: none;
101
        }
102

103
        .btn:hover {
104
            color: white;
105
            background: rgb(218, 215, 215);
106
        }
107

108
        .btn.download {
109
            margin-right: 1em;
110
        }
111

112
        #arrow-back,
113
        #arrow-forward {
114
            color: rgb(218, 215, 215);
115
        }
116

117
        .loading-wrapper {
118
            display: none;
119
            position: fixed;
120
            height: 2em;
121
            line-height: 2em;
122
            margin-top: .5em;
123
            width: 100%;
124
            z-index: 1;
125
        }
126

127
        .loading {
128
            color: white;
129
            background: rgb(218, 215, 215);
130
            height: 100%;
131
            width: 8em;
132
            margin: 0 auto;
133
            text-align: center;
134
            border-radius: 1em;
135
        }
136

137
        ion-icon {
138
            font-size: 1.5em;
139
        }
140

141
        * {
142
            box-sizing: border-box;
143
            font-family: serif;
144
        }
145

146
        .markdown-body {
147
            min-width: 200px;
148
            margin: 0 auto;
149
            padding: .7em 1em;
150
            font-size: .8em;
151
        }
152

153
        .markdown-body h1,
154
        h2,
155
        h3,
156
        h4,
157
        h5,
158
        h6 {
159
            margin-top: 0;
160
        }
161

162
        .markdown-body img {
163
            max-width: 90%;
164
            max-height: 800px;
165
            width: auto;
166
            height: auto;
167
            display: block;
168
            margin: 0 auto;
169
        }
170

171
        body {
172
            width: 100%;
173
            height: 100%;
174
            margin: 0;
175
            padding: 0;
176
        }
177

178
        .header-wrapper {
179
            position: fixed;
180
            height: 3em;
181
            width: 100%;
182
            -moz-user-select: none;
183
            -o-user-select: none;
184
            -khtml-user-select: none;
185
            -webkit-user-select: none;
186
            -ms-user-select: none;
187
            user-select: none;
188
        }
189

190
        .header {
191
            padding: 0 1.8em 0 1em;
192
            height: 100%;
193
            display: flex;
194
            align-items: center;
195
            border-bottom: solid rgb(218, 215, 215) 1px;
196
        }
197

198
        .logo {
199
            margin-right: .3em;
200
        }
201

202
        .site {
203
            white-space: nowrap;
204
            /* margin-left: auto;
205
                padding-left: 2em; */
206
        }
207

208
        .nav {
209
            width: 100%;
210
            overflow: hidden;
211
            text-overflow: ellipsis;
212
            white-space: nowrap;
213
        }
214

215
        .nav-path,
216
        .nav-arr {
217
            font-size: 1em;
218
            height: 1.5em;
219
            margin-right: .3em;
220
            overflow: hidden;
221
            text-overflow: ellipsis;
222
            white-space: nowrap;
223
            cursor: default;
224
        }
225

226
        #main-page:hover,
227
        .nav-path:hover,
228
        .tree-node:hover,
229
        .row.file-wrapper:hover {
230
            color: rgb(90, 101, 133);
231
            cursor: pointer;
232
        }
233

234

235
        .container {
236
            position: fixed;
237
            width: 100%;
238
            height: calc(100% - 3em);
239
            margin-top: 3em;
240
        }
241

242
        .main {
243
            position: relative;
244
            height: 100%;
245
            width: 100%;
246
        }
247

248
        .left {
249
            position: absolute;
250
            display: inline-grid;
251
            width: 20%;
252
            height: 100%;
253
            font-size: .8em;
254
            overflow: scroll;
255
        }
256

257
        .tree-node-wrapper {
258
            margin-left: 1.5em;
259
        }
260

261
        .tree-node {
262
            display: flex;
263
            align-items: center;
264
        }
265

266
        .tree-node-name {
267
            margin-left: .3em;
268
            white-space: nowrap;
269
        }
270

271
        .right {
272
            position: absolute;
273
            width: 80%;
274
            height: 100%;
275
            margin-left: 20%;
276
            overflow: scroll;
277
        }
278

279
        .row {
280
            height: 2.5em;
281
            padding: 0 .8em 0 1em;
282
            display: flex;
283
            align-items: center;
284
            border-bottom: solid rgb(218, 215, 215) 1px;
285
        }
286

287
        .row.file-wrapper {
288
            font-size: .8em;
289
            padding: 0 1em;
290
            height: 2em;
291
        }
292

293
        .file {
294
            width: 100%;
295
            display: flex;
296
            align-items: center;
297
        }
298

299
        .name {
300
            display: flex;
301
            align-items: center;
302
            overflow: hidden;
303
            text-overflow: ellipsis;
304
            white-space: nowrap;
305
            width: 70%;
306
            padding-left: .3em;
307
        }
308

309
        .list-header .name {
310
            width: calc(70% + 1.1em);
311
            padding-left: 0;
312
        }
313

314
        .time {
315
            overflow: hidden;
316
            text-overflow: ellipsis;
317
            white-space: nowrap;
318
            text-align: right;
319
            ;
320
            width: 133px;
321
        }
322

323
        .size {
324
            overflow: hidden;
325
            text-overflow: ellipsis;
326
            white-space: nowrap;
327
            margin-left: auto;
328
        }
329

330
        @media screen and (max-width: 1000px) {
331
            .left {
332
                display: none;
333
            }
334

335
            .right {
336
                width: 100%;
337
                margin-left: initial;
338
            }
339
        }
340

341
        @media screen and (max-width: 800px) {
342
            .name {
343
                width: 60%;
344
            }
345

346
            .list-header .name {
347
                width: calc(60% + 1.1em);
348
            }
349

350
            .file-name {
351
                overflow-x: scroll;
352
                height: 100%;
353
            }
354
        }
355

356
        @media screen and (max-width: 600px) {
357
            .name {
358
                width: 75%;
359
            }
360

361
            .time {
362
                display: none;
363
            }
364

365
            .header {
366
                padding: 0 .3em;
367
            }
368

369
            .row {
370
                padding: 0 .3em;
371
            }
372

373
            .row.file-wrapper {
374
                padding: 0 .3em;
375
                height: 3em;
376
            }
377

378
            .markdown-body {
379
                padding: .6em .3em;
380
            }
381

382
            .file-name {
383
                padding: 1em .3em 0;
384
            }
385

386
            .content {
387
                padding: 0 .3em;
388
            }
389

390
            .btn.download {
391
                margin-right: .3em;
392
            }
393

394
            .logo {
395
                width: 2em;
396
                height: 2em;
397
            }
398

399

400
        }
401
    </style>
402
    <script>
403
        function createCORSRequest(method, url, timeout) {
404
            let xhr = new XMLHttpRequest();
405
            if ('withCredentials' in xhr) {
406
                xhr.open(method, url, true);
407
            } else if (typeof XDomainRequest !== 'undefined') {
408
                xhr = new XDomainRequest();
409
                xhr.open(method, url);
410
            } else {
411
                xhr = null;
412
            }
413
            if (xhr) {
414
                xhr.timeout = timeout;
415
            }
416
            return xhr;
417
        }
418

419
        function sendRequest(method, url, data, headers, callback, error, times) {
420
            let xhr = createCORSRequest(method, url, 2500);
421
            xhr.onreadystatechange = () => {
422
                if (xhr.readyState == 4 && xhr.status == 200) {
423
                    callback(xhr.responseText);
424
                }
425
            };
426
            xhr.timeout = xhr.onerror = () => {
427
                if (!times) {
428
                    times = 0;
429
                }
430
                console.log({
431
                    url: url,
432
                    data: data,
433
                    times: times
434
                })
435
                if (times < 1) {
436
                    sendRequest(method, url, data, headers, callback, error, times + 1);
437
                } else if (typeof error === 'function') {
438
                    error();
439
                }
440
            }
441
            if (headers) {
442
                for (key in headers) {
443
                    if (headers.hasOwnProperty(key)) {
444
                        xhr.setRequestHeader(key, headers[key]);
445
                    }
446
                }
447
            }
448
            if (data) {
449
                xhr.send(data);
450
            } else {
451
                xhr.send();
452
            }
453
        }
454

455
        function renderPage(data, cache) {
456
            let files;
457
            if (data) {
458
                files = JSON.parse(data);
459
                window.fileCache.set(files.parent, files);
460
                preCache(files, 0);
461
            } else {
462
                files = cache;
463
            }
464
            if (files.parent === window.backFordwardCache.current) {
465
                renderPath(files.parent);
466
                if (files.encrypted) {
467
                    handleEncryptedFolder(files);
468
                } else {
469
                    renderFileList(files);
470
                }
471
                renderTreeNode(files);
472
            }
473
            if (document.body.getAttribute('hidden')) {
474
                document.body.removeAttribute('hidden');
475
            }
476
            document.querySelector('.loading-wrapper').style.display = 'none';
477
        }
478

479
        function renderPath(path) {
480
            const createPathSpan = (text, path) => {
481
                let pathSpan = document.createElement('span');
482
                pathSpan.innerHTML = text.length > 20 ? text.substring(0, 20) + '..' : text;
483
                pathSpan.className = text === '/' ? 'nav-arr' : 'nav-path';
484
                if (path) {
485
                    addPathListener(pathSpan, path);
486
                }
487
                return pathSpan;
488
            };
489

490
            const paths = path.split('/');
491
            let pathSpanWrapper = document.getElementById('path');
492
            pathSpanWrapper.innerHTML = '';
493
            pathSpanWrapper.appendChild(createPathSpan(window.api.root));
494
            let continualPath = '/';
495
            for (let i = 1; i < paths.length - 1; i++) {
496
                continualPath += paths[i];
497
                pathSpanWrapper.appendChild(createPathSpan(paths[i], continualPath));
498
                pathSpanWrapper.appendChild(createPathSpan('/'));
499
                continualPath += '/';
500
            }
501
            pathSpanWrapper.appendChild(createPathSpan(paths[paths.length - 1]));
502
        }
503

504
        function renderFileList(files) {
505
            switchRightDisplay();
506

507
            const createFileWrapper = (type, name, time, size, path, url) => {
508
                let fileWrapper = document.getElementById('file-wrapper-templete').content.cloneNode(true);
509
                fileWrapper.querySelector('ion-icon').setAttribute('name', type);
510
                fileWrapper.querySelector('.name').innerHTML = name;
511
                fileWrapper.querySelector('.time').innerHTML = time;
512
                fileWrapper.querySelector('.size').innerHTML = size;
513
                addFileListLineListener(fileWrapper.querySelector('.row.file-wrapper'), path, url, size);
514
                return fileWrapper;
515
            };
516

517
            const formatDate = date => {
518
                const addZero = num => num > 9 ? num : '0' + num;
519
                date = new Date(date);
520
                const year = date.getFullYear();
521
                const month = addZero(date.getMonth() + 1);
522
                const day = addZero(date.getDate());
523
                const hour = addZero(date.getHours());
524
                const minute = addZero(date.getMinutes());
525
                const second = addZero(date.getSeconds());
526
                return 'yyyy-MM-dd HH:mm:ss'
527
                    .replace('yyyy', year)
528
                    .replace('MM', month)
529
                    .replace('dd', day)
530
                    .replace('HH', hour)
531
                    .replace('mm', minute)
532
                    .replace('ss', second);
533
            };
534

535
            const formatSize = size => {
536
                let count = 0;
537
                while (size >= 1024) {
538
                    size /= 1024;
539
                    count++;
540
                }
541
                size = size.toFixed(2);
542
                switch (count) {
543
                    case 1:
544
                        size += ' KB';
545
                        break;
546
                    case 2:
547
                        size += ' MB';
548
                        break;
549
                    case 3:
550
                        size += ' GB';
551
                        break;
552
                    case 4:
553
                        size += ' TB';
554
                        break;
555
                    case 5:
556
                        size += ' PB';
557
                        break;
558
                    default:
559
                        size += ' B';
560
                }
561
                return size;
562
            };
563

564
            let fileList = document.getElementById('file-list');
565
            fileList.innerHTML = '';
566
            files.files.forEach(file => {
567
                if (file.name.split('.').pop() === 'md') {
568
                    if (file.url) {
569
                        renderReadme(files.parent + '/' + file.name, file.url);
570
                    }
571
                } else {
572
                    const parent = files.parent === window.api.root ? '' : files.parent;
573
                    fileList.appendChild(createFileWrapper(
574
                        file.url ? 'document' : 'folder',
575
                        file.name,
576
                        formatDate(file.time),
577
                        formatSize(file.size),
578
                        parent + '/' + file.name,
579
                        file.url
580
                    ));
581
                }
582
            });
583
        }
584

585
        async function renderTreeNode(files) {
586
            const createTreeNodeWrapper = (array, type, name, path) => {
587
                let treeNodeWrapper = document.getElementById('tree-node-wrapper-template').content
588
                    .cloneNode(true);
589
                let icons = treeNodeWrapper.querySelectorAll('ion-icon');
590
                icons[0].setAttribute('name', array);
591
                icons[1].setAttribute('name', type);
592
                treeNodeWrapper.querySelector('.tree-node-name').innerText = name;
593
                treeNodeWrapper.appendNode = node => treeNodeWrapper.querySelector('.tree-node-wrapper').append(
594
                    node);
595
                addTreeNodeListener(treeNodeWrapper.querySelector('.tree-node'), path);
596
                return treeNodeWrapper;
597
            }
598

599
            const paths = files.parent.split('/');
600
            let absolutePath = max => {
601
                let absolutePath = '';
602
                for (let j = 1; j <= max; j++) {
603
                    absolutePath += '/' + paths[j];
604
                }
605
                return absolutePath;
606
            };
607
            let maxIndex = paths.length - 1;
608
            let currentTreeNode = createTreeNodeWrapper('arrow-dropdown',
609
                'folder-open',
610
                paths[maxIndex],
611
                absolutePath(maxIndex)
612
            );
613
            files.files.forEach(file => {
614
                if (!file.url) {
615
                    currentTreeNode.appendNode(createTreeNodeWrapper('arrow-dropright',
616
                        'folder',
617
                        file.name,
618
                        files.parent + '/' + file.name
619
                    ));
620
                }
621
            });
622

623
            for (let i = maxIndex - 1; i > 0; i--) {
624
                const currentTreeNodeParentAbsolutePath = absolutePath(i);
625
                let currentTreeNodeParent = createTreeNodeWrapper('arrow-dropdown',
626
                    'folder',
627
                    paths[i],
628
                    currentTreeNodeParentAbsolutePath
629
                );
630
                let cache = window.fileCache.get(currentTreeNodeParentAbsolutePath);
631
                if (cache) {
632
                    cache.files.forEach(file => {
633
                        if (!file.url) {
634
                            if (file.name === paths[i + 1]) {
635
                                currentTreeNodeParent.appendNode(currentTreeNode);
636
                            } else {
637
                                currentTreeNodeParent.appendNode(createTreeNodeWrapper(
638
                                    'arrow-dropright',
639
                                    'folder',
640
                                    file.name,
641
                                    currentTreeNodeParentAbsolutePath + '/' + file.name
642
                                ));
643
                            }
644
                        }
645
                    });
646
                } else {
647
                    currentTreeNodeParent.appendNode(currentTreeNode);
648
                }
649
                currentTreeNode = currentTreeNodeParent;
650
            }
651

652
            const treeRoot = document.getElementById('tree-root');
653
            treeRoot.innerHTML = '';
654
            const cache = window.fileCache.get(window.api.root);
655
            const currentNodeName = currentTreeNode.querySelector('.tree-node-name').innerText;
656
            if (cache) {
657
                cache.files.forEach(file => {
658
                    if (!file.url) {
659
                        if (file.name === currentNodeName) {
660
                            treeRoot.append(currentTreeNode);
661
                        } else {
662
                            treeRoot.append(createTreeNodeWrapper(
663
                                'arrow-dropright',
664
                                'folder',
665
                                file.name,
666
                                window.api.root + file.name
667
                            ));
668
                        }
669
                    }
670
                });
671
            } else {
672
                treeRoot.append(currentTreeNode);
673
            }
674
        }
675

676
        async function renderReadme(path, url) {
677
            const render = text => {
678
                let markedText;
679
                try {
680
                    markedText = marked(text, {
681
                        gfm: true,
682
                        highlight: (code, lang, callback) => {
683
                            return hljs.highlight(lang, code).value;
684
                        }
685
                    });
686
                } catch (e) {
687
                    markedText = marked(text, {
688
                        gfm: true,
689
                        highlight: (code, lang, callback) => {
690
                            return hljs.highlight('bash', code).value;
691
                        }
692
                    });
693
                }
694
                if (window.backFordwardCache.current + '/README.md' === path) {
695
                    if (!window.backFordwardCache.preview) {
696
                        document.getElementById('readme').innerHTML = markedText;
697
                        document.querySelector('.markdown-body').style.display = 'block';
698
                    }
699
                }
700
                let cache = window.fileCache.get(path);
701
                if (!cache || cache === true) {
702
                    window.fileCache.set(path, text);
703
                }
704
            };
705
            let text = window.fileCache.get(path);
706
            if (text === true) {
707
                let cacheWaitReadmeFetch = setInterval(() => {
708
                    text = window.fileCache.get(path);
709
                    if (typeof text === 'object') {
710
                        render(text, path);
711
                        clearInterval(cacheWaitReadmeFetch);
712
                    } else if (text === false) {
713
                        clearInterval(cacheWaitReadmeFetch);
714
                    }
715
                }, 100);
716
            } else if (text) {
717
                render(text, path);
718
            } else {
719
                window.fileCache.set(path, true);
720
                sendRequest('GET', url, null, null, text => render(text, path), () => window.fileCache.set(path, false));
721
            }
722
        }
723

724
        function handleEncryptedFolder(files) {
725
            switchRightDisplay('encrypted');
726
            const password = document.querySelector('.password');
727
            const input = password.querySelector('input');
728
            const button = password.querySelector('button');
729
            const buttonParent = button.parentElement;
730
            const buttonClone = button.cloneNode(true);
731
            buttonParent.replaceChild(buttonClone, button);
732
            input.placeholder = '请输入密码';
733
            buttonClone.addEventListener('click', event => {
734
                const passwd = input.value;
735
                if (!input.value) {
736
                    return;
737
                }
738
                input.value = '';
739
                input.placeholder = '正在验证..';
740
                sendRequest(window.api.method,
741
                    window.api.url,
742
                    window.api.formatPayload(files.parent, passwd),
743
                    window.api.headers,
744
                    data => {
745
                        const newFiles = JSON.parse(data);
746
                        if (newFiles.encrypted) {
747
                            input.placeholder = '密码错误';
748
                        } else {
749
                            window.fileCache.set(newFiles.parent, newFiles);
750
                            fetchFileList(newFiles.parent);
751
                        }
752
                    },
753
                    () => window.fileCache.set(newFiles.parent, false)
754
                );
755
            });
756
        }
757

758
        function addPathListener(elem, path) {
759
            elem.addEventListener('click', event => {
760
                fetchFileList(path);
761
                switchBackForwardStatus(path);
762
            });
763
        }
764

765
        function addTreeNodeListener(elem, path) {
766
            elem.addEventListener('click', event => {
767
                fetchFileList(path);
768
                switchBackForwardStatus(path);
769
            });
770
        }
771

772
        function addFileListLineListener(elem, path, url, size) {
773
            if (url) {
774
                elem.addEventListener('click', event => {
775
                    window.backFordwardCache.preview = true;
776
                    const previewHandler = {
777
                        copyTextContent: (source, text) => {
778
                            let result = false;
779
                            let target = document.createElement('pre');
780
                            target.style.opacity = '0';
781
                            target.textContent = text || source.textContent;
782
                            document.body.appendChild(target);
783
                            try {
784
                                let range = document.createRange();
785
                                range.selectNode(target);
786
                                window.getSelection().removeAllRanges();
787
                                window.getSelection().addRange(range);
788
                                document.execCommand('copy');
789
                                window.getSelection().removeAllRanges();
790
                                result = true;
791
                            } catch (e) { }
792
                            document.body.removeChild(target);
793
                            return result;
794
                        },
795
                        fileType: suffix => {
796
                            Array.prototype.contains = function (search) {
797
                                const object = this;
798
                                for (const key in object) {
799
                                    if (object.hasOwnProperty(key)) {
800
                                        if ((eval('/' + search + '/i')).test(object[key])) {
801
                                            return true;
802
                                        }
803
                                    }
804
                                }
805
                                return false;
806
                            };
807
                            if (['bmp', 'jpg', 'png', 'svg', 'webp', 'gif'].contains(suffix)) {
808
                                return 'image';
809
                            } else if (['mp3', 'flac', 'wav'].contains(suffix)) {
810
                                return 'audio';
811
                            } else if (['mp4', 'avi', 'mkv', 'flv', 'm3u8'].contains(suffix)) {
812
                                return 'video';
813
                            } else if (
814
                                [
815
                                    'txt', 'js', 'json', 'css', 'html', 'java', 'c', 'cpp', 'php',
816
                                    'cmd', 'ps1',
817
                                    'bat', 'sh', 'py', 'go', 'asp',
818
                                ].contains(suffix)
819
                            ) {
820
                                return 'text';
821
                            } else if (
822
                                ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'mpp', 'rtf', 'vsd', 'vsdx'].contains(suffix)
823
                            ) {
824
                                return 'office';
825
                            }
826
                        },
827
                        loadResource: (resource, callback) => {
828
                            let type;
829
                            switch (resource.split('.').pop()) {
830
                                case 'css':
831
                                    type = 'link';
832
                                    break;
833
                                case 'js':
834
                                    type = 'script';
835
                                    break;
836
                            }
837
                            let element = document.createElement(type);
838
                            let loaded = false;
839
                            if (typeof callback === 'function') {
840
                                element.onload = element.onreadystatechange = () => {
841
                                    if (!loaded && (!element.readyState || /loaded|complete/.test(
842
                                        element.readyState))) {
843
                                        element.onload = element.onreadystatechange = null;
844
                                        loaded = true;
845
                                        callback();
846
                                    }
847
                                }
848
                            }
849
                            if (type === 'link') {
850
                                element.href = resource;
851
                                element.rel = 'stylesheet';
852
                            } else {
853
                                element.src = resource;
854
                            }
855
                            document.getElementsByTagName('head')[0].appendChild(element);
856
                        },
857

858
                        createDplayer: (video, type, elem) => {
859
                            const host = '//s0.pstatp.com/cdn/expire-1-M';
860
                            const resources = [
861
                                '/dplayer/1.25.0/DPlayer.min.css',
862
                                '/dplayer/1.25.0/DPlayer.min.js',
863
                                '/hls.js/0.12.4/hls.light.min.js',
864
                                '/flv.js/1.5.0/flv.min.js'
865
                            ];
866
                            let unloadedResourceCount = resources.length;
867
                            resources.forEach(resource => {
868
                                previewHandler.loadResource(host + resource, () => {
869
                                    if (!--unloadedResourceCount) {
870
                                        let option = {
871
                                            url: video
872
                                        }
873
                                        if (type === 'flv') {
874
                                            option.type = 'flv';
875
                                        }
876
                                        new DPlayer({
877
                                            container: elem,
878
                                            screenshot: true,
879
                                            video: option
880
                                        });
881
                                    }
882
                                })
883
                            });
884
                        }
885
                    }
886
                    const suffix = path.split('.').pop();
887
                    let content = document.querySelector('.content');
888
                    switch (previewHandler.fileType(suffix)) {
889
                        case 'image':
890
                            let img = new Image();
891
                            img.style.maxWidth = '100%';
892
                            img.src = url;
893
                            let fancy = document.createElement('a');
894
                            fancy.setAttribute('data-fancybox', 'image');
895
                            fancy.href = img.src;
896
                            fancy.append(img);
897
                            content.innerHTML = '';
898
                            content.append(fancy);
899
                            break;
900
                        case 'audio':
901
                            let audio = new Audio();
902
                            audio.style.outline = 'none';
903
                            audio.preload = 'auto';
904
                            audio.controls = 'controls';
905
                            audio.style.width = '100%';
906
                            audio.src = url;
907
                            content.innerHTML = '';
908
                            content.append(audio);
909
                            break;
910
                        case 'video':
911
                            let video = document.createElement('div');
912
                            previewHandler.createDplayer(url, suffix, video);
913
                            content.innerHTML = '';
914
                            content.append(video);
915
                            break;
916
                        case 'text':
917
                            let pre = document.createElement('pre');
918
                            let code = document.createElement('code');
919
                            pre.append(code);
920
                            pre.style.background = 'rgb(245,245,245)';
921
                            pre.style['overflow-x'] = 'scroll';
922
                            pre.classList.add(suffix);
923
                            content.style['text-align'] = 'initial';
924
                            content.innerHTML = '';
925
                            content.append(pre);
926
                            sendRequest('GET', url, null, null, data => {
927
                                code.textContent = data;
928
                                if (size.indexOf(' B') >= 0 || size.indexOf(' KB') &&
929
                                    size.split(' ')[0] < 100
930
                                ) {
931
                                    hljs.highlightBlock(pre);
932
                                }
933
                            });
934
                            break;
935
                        case 'office':
936
                            const officeOnline = '//view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(url);
937
                            let div = document.createElement('div');
938
                            div.style.lineHeight = '2em';
939
                            div.style.background = 'rgba(218, 215, 215, 0.21)';
940
                            div.style.webkitTapHighlightColor = 'rgba(0, 0, 0, 0)';
941
                            div.style.cursor = 'pointer';
942
                            div.innerHTML = '新窗口打开';
943
                            div.addEventListener('click', () => window.open(officeOnline));
944
                            content.innerHTML = '';
945
                            content.appendChild(div);
946
                            if (document.body.clientWidth >= 480) {
947
                                let iframe = document.createElement('iframe');
948
                                iframe.width = '100%';
949
                                iframe.style.height = '41em';
950
                                iframe.style.border = '0';
951
                                iframe.src = officeOnline;
952
                                content.appendChild(iframe);
953
                            }
954
                            break;
955
                        default:
956
                            content.style['text-align'] = 'center';
957
                            content.innerHTML = '该文件不支持预览';
958
                            break;
959

960
                    }
961
                    document.querySelector('.file-name').innerHTML = path;
962
                    document.querySelector('.btn.download').addEventListener('click',
963
                        () => location.href = url
964
                    );
965
                    document.querySelector('.btn.quote').addEventListener('click',
966
                        event => {
967
                            previewHandler.copyTextContent(null, window.api.url + '?file=' + path);
968
                            const btn = document.querySelector('.btn.quote');
969
                            btn.innerHTML = '已复制';
970
                            setTimeout(() => btn.innerHTML = '引用', 250);
971
                        }
972
                    );
973
                    document.querySelector('.btn.share').addEventListener('click',
974
                        event => {
975
                            const sharePath = () => {
976
                                let arr = window.backFordwardCache.current.split('/');
977
                                let r = '';
978
                                for (let i = 1; i < arr.length; i++) {
979
                                    r += '/' + arr[i];
980
                                }
981
                                return r;
982
                            }
983
                            previewHandler.copyTextContent(null,
984
                                window.location.origin +
985
                                window.location.pathname +
986
                                '?path=' + sharePath());
987
                            const btn = document.querySelector('.btn.share');
988
                            btn.innerHTML = '已复制';
989
                            setTimeout(() => btn.innerHTML = '分享', 250);
990
                        }
991
                    );
992
                    switchRightDisplay('preview');
993

994
                    let start = null;
995
                    let right = document.querySelector('.right');
996
                    const scrollToBottom = (timestamp) => {
997
                        if (!start) start = timestamp;
998
                        let progress = timestamp - start;
999
                        let last = right.scrollTop;
1000
                        right.scrollTo(0, right.scrollTop + 14);
1001
                        if (right.scrollTop !== last && progress < 1000 * 2) {
1002
                            window.requestAnimationFrame(scrollToBottom);
1003
                        }
1004
                    };
1005
                    window.requestAnimationFrame(scrollToBottom);
1006
                });
1007
            } else {
1008
                elem.addEventListener('click', event => {
1009
                    fetchFileList(path);
1010
                    switchBackForwardStatus(path);
1011
                });
1012
            }
1013
        }
1014

1015
        function addBackForwardListener() {
1016
            document.getElementById('arrow-back').addEventListener('click', back);
1017
            document.getElementById('arrow-forward').addEventListener('click', forward);
1018
            document.querySelector('#main-page').addEventListener('click', () => {
1019
                fetchFileList(window.api.root);
1020
                switchBackForwardStatus(window.api.root);
1021
            });
1022
        }
1023

1024
        function switchRightDisplay(display) {
1025
            if (display === 'preview') {
1026
                document.querySelector('.list-header').style.display = 'none';
1027
                document.querySelector('#file-list').style.display = 'none';
1028
                document.querySelector('.markdown-body').style.display = 'none';
1029
                document.querySelector('.password').style.display = 'none';
1030
                document.querySelector('.preview').style.display = 'initial'
1031
            } else if (display === 'encrypted') {
1032
                document.querySelector('.list-header').style.display = 'none';
1033
                document.querySelector('#file-list').style.display = 'none';
1034
                document.querySelector('.markdown-body').style.display = 'none';
1035
                document.querySelector('.preview').style.display = 'none';
1036
                document.querySelector('.password').style.display = 'initial';
1037
                document.querySelector('#readme').innerHTML = '';
1038
                let content = document.querySelector('.preview .content');
1039
                if (content) {
1040
                    document.querySelector('.preview .content').innerHTML = '';
1041
                }
1042
            } else {
1043
                document.querySelector('.list-header').style.display = 'initial';
1044
                document.querySelector('#file-list').style.display = 'initial';
1045
                document.querySelector('.markdown-body').style.display = 'none'
1046
                document.querySelector('.preview').style.display = 'none';
1047
                document.querySelector('.password').style.display = 'none';
1048
                document.querySelector('#readme').innerHTML = '';
1049
                let content = document.querySelector('.preview .content');
1050
                if (content) {
1051
                    document.querySelector('.preview .content').innerHTML = '';
1052
                }
1053
            }
1054
        }
1055

1056
        function switchBackForwardStatus(path) {
1057
            if (path) {
1058
                window.backFordwardCache.deepest = path;
1059
            }
1060
            if (window.backFordwardCache.root !== window.backFordwardCache.current) {
1061
                window.backFordwardCache.backable = true;
1062
                document.getElementById('arrow-back').style.color = 'black';
1063
            } else {
1064
                window.backFordwardCache.backable = false;
1065
                document.getElementById('arrow-back').style.color = 'rgb(218, 215, 215)';
1066
            }
1067
            if (window.backFordwardCache.deepest !== window.backFordwardCache.current) {
1068
                window.backFordwardCache.forwardable = true;
1069
                document.getElementById('arrow-forward').style.color = 'black';
1070
            } else {
1071
                window.backFordwardCache.forwardable = false;
1072
                document.getElementById('arrow-forward').style.color = 'rgb(218, 215, 215)';
1073
            }
1074
        }
1075

1076
        function back() {
1077
            if (!window.backFordwardCache.backable) {
1078
                return;
1079
            }
1080
            if (window.backFordwardCache.preview) {
1081
                fetchFileList(window.backFordwardCache.current);
1082
            } else {
1083
                let former = (() => {
1084
                    let formerEndIndex = window.backFordwardCache.current.lastIndexOf('/');
1085
                    return window.backFordwardCache.current.substring(0, formerEndIndex);
1086
                })();
1087
                former = former || window.api.root;
1088
                fetchFileList(former);
1089
                switchBackForwardStatus();
1090
            }
1091
            // console.log(window.backFordwardCache);
1092
        }
1093

1094
        function forward() {
1095
            if (!window.backFordwardCache.forwardable) {
1096
                return
1097
            }
1098
            const current = window.backFordwardCache.current === window.api.root ? '' : window.backFordwardCache.current
1099
            const subLength = current ? current.length : 0;
1100
            const later = current + '/' +
1101
                window.backFordwardCache.deepest.substring(subLength).split('/')[1];
1102
            fetchFileList(later);
1103
            switchBackForwardStatus();
1104
            // console.log(window.backFordwardCache);
1105
        }
1106

1107
        async function preCache(files, level) {
1108
            if (level > 2) return;
1109
            files.files.forEach(file => {
1110
                const parent = files.parent === '/' ? '' : files.parent
1111
                const path = parent + '/' + file.name;
1112
                if (!file.url) {
1113
                    // console.log('caching ' + path + ', level ' + level);
1114
                    window.fileCache.set(path, true);
1115
                    sendRequest(window.api.method,
1116
                        window.api.url,
1117
                        window.api.formatPayload(path),
1118
                        window.api.headers,
1119
                        data => {
1120
                            const files = JSON.parse(data);
1121
                            window.fileCache.set(path, files);
1122
                            preCache(files, level + 1);
1123
                        },
1124
                        () => window.fileCache.set(path, false)
1125
                    );
1126
                } else if (file.name.split('.').pop() === 'md') {
1127
                    // console.log('caching ' + path + ', level ' + level);
1128
                    window.fileCache.set(path, true);
1129
                    sendRequest('GET', file.url, null, null, text => window.fileCache.set(path, text), () => window.fileCache.set(path, false));
1130
                }
1131
            });
1132
        }
1133

1134
        async function preCacheCheck(cache, path) {
1135
            cache.files.forEach(file => {
1136
                const prefix = path === window.api.root ? '' : path;
1137
                const nextPath = prefix + '/' + file.name;
1138
                const pathCache = window.fileCache.get(nextPath);
1139
                if (!file.url) {
1140
                    if (!pathCache && pathCache !== true) {
1141
                        // console.log('inner caching ' + nextPath);
1142
                        window.fileCache.set(nextPath, true);
1143
                        sendRequest(window.api.method,
1144
                            window.api.url,
1145
                            window.api.formatPayload(nextPath),
1146
                            window.api.headers,
1147
                            data => {
1148
                                const files = JSON.parse(data);
1149
                                window.fileCache.set(nextPath, files);
1150
                                preCache(files, 0);
1151
                            },
1152
                            () => window.fileCache.set(nextPath, false)
1153
                        );
1154
                    }
1155
                } else if (file.name.split('.').pop() === 'md') {
1156
                    if (!pathCache && pathCache !== true) {
1157
                        // console.log('inner caching ' + nextPath);
1158
                        window.fileCache.set(nextPath, true);
1159
                        sendRequest('GET', file.url, null, null, text => window.fileCache.set(nextPath,
1160
                            text), () => window.fileCache.set(nextPath,
1161
                                false));
1162
                    }
1163
                }
1164
            });
1165
        }
1166

1167
        function fetchFileList(path) {
1168
            // console.log('fetching ' + path);
1169
            let loading = document.querySelector('.loading-wrapper');
1170
            loading.style.display = 'initial';
1171
            window.backFordwardCache.preview = false;
1172
            window.backFordwardCache.current = path;
1173
            let cache = window.fileCache.get(path);
1174
            if (cache === true) {
1175
                let cacheWaitFileListFetch = setInterval(() => {
1176
                    cache = window.fileCache.get(path);
1177
                    if (typeof cache === 'object') {
1178
                        renderPage(null, cache);
1179
                        preCacheCheck(cache, path);
1180
                        clearInterval(cacheWaitFileListFetch);
1181
                    } else if (cache === false) {
1182
                        clearInterval(cacheWaitFileListFetch);
1183
                        loading.style.color = 'red';
1184
                        loading.innerText = 'Failed!';
1185
                        setTimeout(() => {
1186
                            loading.style.display = 'none';
1187
                            loading.style.color = 'white';
1188
                            loading.innerText = 'Loading..';
1189
                        }, 2000);
1190
                    }
1191
                }, 100);
1192
            } else if (cache) {
1193
                renderPage(null, cache);
1194
                preCacheCheck(cache, path);
1195
            } else {
1196
                window.fileCache.set(path, true);
1197
                sendRequest(window.api.method,
1198
                    window.api.url,
1199
                    window.api.formatPayload(path),
1200
                    window.api.headers,
1201
                    renderPage
1202
                );
1203
            }
1204
        }
1205

1206
        document.addEventListener('DOMContentLoaded', () => {
1207
            document.title = window.GLOBAL_CONFIG.SITE_NAME;
1208
            document.querySelector('.site').textContent = window.GLOBAL_CONFIG.SITE_NAME;
1209
            window.api = {
1210
                root: '/',
1211
                url: window.GLOBAL_CONFIG.SCF_GATEWAY,
1212
                method: 'POST',
1213
                formatPayload: (path, passwd) => {
1214
                    return '?path=' + encodeURIComponent(path) +
1215
                        '&encrypted=' + window.api.accessToken.encrypted +
1216
                        '&plain=' + window.api.accessToken.plain +
1217
                        '&passwd=' + passwd;
1218
                },
1219
                headers: {
1220
                    'Content-type': 'application/x-www-form-urlencoded'
1221
                }
1222
            }
1223
            window.backFordwardCache = {
1224
                root: window.api.root,
1225
                deepest: window.api.root,
1226
                current: window.api.root,
1227
                backable: false,
1228
                forwardable: false,
1229
                preview: false
1230
            }
1231
            window.fileCache = new Map();
1232
            const initialPath = new URLSearchParams(window.location.search).get('path') || window.api.root;
1233
            if (window.GLOBAL_CONFIG.IS_CF) {
1234
                window.api.accessToken = {
1235
                    encrypted: '',
1236
                    plain: ''
1237
                };
1238
                fetchFileList(initialPath);
1239
                addBackForwardListener();
1240
            } else {
1241
                sendRequest(window.api.method,
1242
                    window.api.url + '?accessToken',
1243
                    null,
1244
                    window.api.headers,
1245
                    data => {
1246
                        const accessToken = JSON.parse(data);
1247
                        window.api.accessToken = {
1248
                            encrypted: accessToken.encrypted,
1249
                            plain: accessToken.plain
1250
                        };
1251
                        fetchFileList(initialPath);
1252
                        addBackForwardListener();
1253
                    }
1254
                );
1255
            }
1256
        });
1257
    </script>
1258
</head>
1259

1260
<body hidden="hidden">
1261
    <template id="tree-node-wrapper-template">
1262
        <div class="tree-node-wrapper">
1263
            <div class="tree-node">
1264
                <ion-icon></ion-icon>
1265
                <ion-icon></ion-icon>
1266
                <div class="tree-node-name"></div>
1267
            </div>
1268
        </div>
1269
    </template>
1270
    <template id="file-wrapper-templete">
1271
        <div class="row file-wrapper">
1272
            <div class="file">
1273
                <ion-icon></ion-icon>
1274
                <span class="name"></span>
1275
                <span class="time"></span>
1276
                <span class="size"></span>
1277
            </div>
1278
        </div>
1279
    </template>
1280
    <div class="loading-wrapper">
1281
        <div class="loading">Loading...</div>
1282
    </div>
1283
    <div class="header-wrapper">
1284
        <div class="header">
1285
            <ion-icon id="arrow-back" class="logo" name="arrow-back"></ion-icon>
1286
            <ion-icon id="arrow-forward" class="logo" name="arrow-forward"></ion-icon>
1287
            <ion-icon id="main-page" class="logo" name="folder"></ion-icon>
1288
            <div class="nav">
1289
                <span id="path">
1290
                </span>
1291
            </div>
1292
            <span class="site" id="nav-site">ONEDRIVE</span>
1293
        </div>
1294
    </div>
1295
    <div class="container">
1296
        <div class="main">
1297
            <div class="left">
1298
                <div id="tree-root">
1299
                </div>
1300
            </div>
1301
            <div class="right">
1302
                <div class="list-header">
1303
                    <div class="row">
1304
                        <div class="file">
1305
                            <span class="name">ITEMS</span>
1306
                            <span class="time">TIME</span>
1307
                            <span class="size">SIZE</span>
1308
                        </div>
1309
                    </div>
1310
                </div>
1311
                <div id="file-list">
1312
                </div>
1313
                <div class="markdown-body">
1314
                    <div id="readme">
1315
                    </div>
1316
                </div>
1317
                <div class="preview">
1318
                    <div class="info">
1319
                        <div class="file-name"></div>
1320
                        <div class="btn download">下载</div>
1321
                        <div class="btn quote">引用</div>
1322
                        <div class="btn share">分享</div>
1323
                    </div>
1324
                    <div class="content"></div>
1325
                </div>
1326
                <div class="password-wrapper">
1327
                    <div class="password">
1328
                        <input type="password">
1329
                        <button>提交</button>
1330
                    </div>
1331
                </div>
1332
            </div>
1333
        </div>
1334
    </div>
1335
</body>
1336

1337
</html>

完成界面： cloudflare editor

题外话：

那个获取refresh_token的网页并不是不可用，但是成功率巨低，我试了前前后后三十多次才一次成功……

heroku的登录需要科学上网，怎么科学上网就不要问我了，Google上大把……

以后发文件我会放到我的onedrive上，大家可以自取，地址是http://drive.bili33.top/，友链页面也有链接。

我自己部署的heroku项目不会开放给大家获取refresh_token，因为获取完一次要到后台删除refresh_token才能进行下一次的获取