init
2
.browserslistrc
Normal file
@ -0,0 +1,2 @@
|
||||
> 1%
|
||||
last 2 versions
|
21
.gitignore
vendored
Normal file
@ -0,0 +1,21 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
201
LICENSE
Normal file
@ -0,0 +1,201 @@
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "{}"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright 2019 diaogroup
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
19
README.md
Normal file
@ -0,0 +1,19 @@
|
||||
# codebook
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
5
babel.config.js
Normal file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
12007
package-lock.json
generated
Normal file
37
package.json
Normal file
@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "codebook",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"buildsuper": "vue-cli-service build --modern"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.19.2",
|
||||
"core-js": "^3.6.4",
|
||||
"crc-32": "^1.2.0",
|
||||
"crypto-js": "^4.0.0",
|
||||
"material-design-icons": "^3.0.1",
|
||||
"register-service-worker": "^1.6.2",
|
||||
"roboto-fontface": "^0.6.0",
|
||||
"vconsole": "^3.3.4",
|
||||
"vue": "^2.6.11",
|
||||
"vue-clipboard2": "^0.3.1",
|
||||
"vue-material": "^1.0.0-beta-11",
|
||||
"vue-router": "^3.1.5",
|
||||
"vue-svg-icon": "^1.2.9",
|
||||
"vue-touch": "^2.0.0-beta.4",
|
||||
"vuex": "^3.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^4.2.0",
|
||||
"@vue/cli-plugin-pwa": "^4.2.0",
|
||||
"@vue/cli-plugin-router": "^4.2.0",
|
||||
"@vue/cli-plugin-vuex": "^4.2.0",
|
||||
"@vue/cli-service": "^4.2.0",
|
||||
"node-sass": "^4.12.0",
|
||||
"sass-loader": "^8.0.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
}
|
||||
}
|
BIN
public/favicon.ico
Normal file
After Width: | Height: | Size: 17 KiB |
BIN
public/img/icons/android-chrome-192x192.png
Normal file
After Width: | Height: | Size: 3.8 KiB |
BIN
public/img/icons/android-chrome-512x512.png
Normal file
After Width: | Height: | Size: 10 KiB |
BIN
public/img/icons/apple-touch-icon-120x120.png
Normal file
After Width: | Height: | Size: 2.2 KiB |
BIN
public/img/icons/apple-touch-icon-152x152.png
Normal file
After Width: | Height: | Size: 2.9 KiB |
BIN
public/img/icons/apple-touch-icon-180x180.png
Normal file
After Width: | Height: | Size: 3.4 KiB |
BIN
public/img/icons/apple-touch-icon-60x60.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
public/img/icons/apple-touch-icon-76x76.png
Normal file
After Width: | Height: | Size: 1.5 KiB |
BIN
public/img/icons/apple-touch-icon.png
Normal file
After Width: | Height: | Size: 3.4 KiB |
BIN
public/img/icons/favicon-16x16.png
Normal file
After Width: | Height: | Size: 387 B |
BIN
public/img/icons/favicon-32x32.png
Normal file
After Width: | Height: | Size: 726 B |
BIN
public/img/icons/msapplication-icon-144x144.png
Normal file
After Width: | Height: | Size: 2.6 KiB |
BIN
public/img/icons/mstile-150x150.png
Normal file
After Width: | Height: | Size: 2.8 KiB |
1
public/img/icons/safari-pinned-tab.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1582191167349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3270" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M921.6 716.75904L415.46752 210.66752a136.25344 136.25344 0 0 0-96.54272-39.99744c-70.93248 0-128.53248 54.272-135.19872 123.43296L102.4 375.43936h86.12864C210.59584 506.39872 294.57408 616.09984 409.6 673.49504v179.84512h68.27008V700.34432a405.18656 405.18656 0 0 0 68.25984 13.70112v139.30496H614.4V716.75904h307.2zM448.93184 340.6336L620.2368 511.95904h-39.95648c-75.27424 0-136.54016-61.22496-136.54016-136.52992-0.01024-12.12416 2.12992-23.63392 5.19168-34.79552z m-198.26688-33.46432a68.32128 68.32128 0 0 1 68.25984-68.22912c18.19648 0 35.36896 7.09632 48.27136 19.99872l28.4672 28.4672a202.37312 202.37312 0 0 0-20.20352 88.03328c0 112.92672 91.86304 204.8 204.8 204.8h108.22656l68.27008 68.25984H592.00512c-188.20096 0-341.34016-153.1392-341.34016-341.32992z" p-id="3271" fill="#bbdefb"></path></svg>
|
After Width: | Height: | Size: 1.2 KiB |
45
public/index.html
Normal file
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>Canary Codebook</title>
|
||||
<meta name="description" content="Canary Codebook!稳健,靠谱的密码存储服务" />
|
||||
<meta name="keywords" content="Canary Codebook,ccb,长春理工大学,长理,Canary,密码,加密,存储" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<link rel="apple-touch-icon-precomposed" href="<%= BASE_URL %>favicon.ico">
|
||||
<!-- 标题 -->
|
||||
<meta itemprop="name" content="Canary Codebook" />
|
||||
<!-- 描述 -->
|
||||
<meta itemprop="description" content="Canary Codebook!稳健,靠谱的密码存储服务" />
|
||||
<!-- 图片 -->
|
||||
<meta itemprop="image" content="http://canary.moe/img/canary.png" />
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
(function() {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?35b0fc0ea03411a05a7c0cef22df2bff";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
console.log('%cRainSun Copyright \xa9 2019-%s',
|
||||
'font-size:12px;color:#999999;', (new Date).getFullYear());
|
||||
}
|
||||
catch (e) {
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
2
public/robots.txt
Normal file
@ -0,0 +1,2 @@
|
||||
User-agent: *
|
||||
Disallow:
|
193
src/App.vue
Normal file
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<icon class="bg" name="canary"></icon>
|
||||
<!-- 缓存 -->
|
||||
<keep-alive>
|
||||
<router-view v-if="this.$route.meta.keepAlive"></router-view>
|
||||
</keep-alive>
|
||||
<!-- 非缓存 -->
|
||||
<router-view v-if="!this.$route.meta.keepAlive"></router-view>
|
||||
<md-bottom-bar style="position: fixed; bottom: 0; left: 0; width: 100%;" md-sync-route>
|
||||
<md-bottom-bar-item id="bottom-bar-item-home" md-label="审核" md-icon="gavel" to="/verify"></md-bottom-bar-item>
|
||||
<md-bottom-bar-item
|
||||
id="bottom-bar-item-pages"
|
||||
md-label="言论"
|
||||
md-icon="speaker_notes"
|
||||
to="/comment"
|
||||
></md-bottom-bar-item>
|
||||
<md-bottom-bar-item
|
||||
id="bottom-bar-item-favorites"
|
||||
md-label="清除"
|
||||
md-icon="delete_sweep"
|
||||
to="/clear"
|
||||
></md-bottom-bar-item>
|
||||
<md-bottom-bar-item
|
||||
id="bottom-bar-item-favorites"
|
||||
md-label="管理"
|
||||
md-icon="account_circle"
|
||||
to="/admin"
|
||||
></md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
@import "./style/main";
|
||||
@import "./style/font";
|
||||
@import "~vue-material/dist/theme/engine";
|
||||
@import "~vue-material/dist/theme/all";
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
p,
|
||||
blockquote,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
pre,
|
||||
form,
|
||||
fieldset,
|
||||
legend,
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
th,
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: 12px/1.5tahoma, arial, \5b8b\4f53;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
}
|
||||
address,
|
||||
cite,
|
||||
dfn,
|
||||
em,
|
||||
var {
|
||||
font-style: normal;
|
||||
}
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: couriernew, courier, monospace;
|
||||
}
|
||||
small {
|
||||
font-size: 12px;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
sup {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
sub {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
legend {
|
||||
color: #000;
|
||||
}
|
||||
fieldset,
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
html[data-theme="dark"] {
|
||||
@include set-theme-dark();
|
||||
@import "~vue-material/dist/theme/all";
|
||||
.md-caption {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
html[data-theme="light"] {
|
||||
@include set-theme-light();
|
||||
@import "~vue-material/dist/theme/all";
|
||||
}
|
||||
#app {
|
||||
font-family: "Roboto", "Helvetica Neue", Helvetica, "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* text-align: center; */
|
||||
// color: #2c3e50;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.bg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: -100;
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
margin-top: -2.5rem;
|
||||
margin-left: -2.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.md-autocomplete-box-content {
|
||||
left: 0.2rem !important;
|
||||
}
|
||||
}
|
||||
#__vconsole {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vconsole-show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.md-bottom-bar.md-type-shift .md-bottom-bar-item {
|
||||
max-width: 1000px !important;
|
||||
}
|
||||
</style>
|
BIN
src/assets/KFOmCnqEu92Fr1Mu4WxKOzY.woff2
Normal file
BIN
src/assets/MaterialIcons-Regular.eot
Normal file
BIN
src/assets/MaterialIcons-Regular.ttf
Normal file
BIN
src/assets/MaterialIcons-Regular.woff
Normal file
BIN
src/assets/MaterialIcons-Regular.woff2
Normal file
BIN
src/assets/canary.png
Normal file
After Width: | Height: | Size: 1.9 KiB |
BIN
src/assets/logo.png
Normal file
After Width: | Height: | Size: 6.7 KiB |
40
src/axios/api.js
Normal file
@ -0,0 +1,40 @@
|
||||
import { api } from "./fetch";
|
||||
|
||||
|
||||
var CryptoJS = require("crypto-js");
|
||||
|
||||
// 登录 传参 data => mail_addr, password, update_time
|
||||
export function login(data) {
|
||||
var sign = CryptoJS.MD5(JSON.stringify(data).replace(/\"/g,"'")).toString().toUpperCase();
|
||||
data.sign = sign
|
||||
let params = new URLSearchParams();
|
||||
params.append('data', JSON.stringify(data));
|
||||
return api.post('/login', params)
|
||||
}
|
||||
|
||||
// 激活 传参 data => uuid mail_addr
|
||||
export function activation(data) {
|
||||
var sign = CryptoJS.MD5(JSON.stringify(data).replace(/\"/g,"'")).toString().toUpperCase();
|
||||
data.sign = sign
|
||||
let params = new URLSearchParams();
|
||||
params.append('data', JSON.stringify(data));
|
||||
return api.post('/activation', params)
|
||||
}
|
||||
|
||||
// 更新本地 传参 data => mail_addr password
|
||||
export function syncLocal(data) {
|
||||
var sign = CryptoJS.MD5(JSON.stringify(data).replace(/\"/g,"'")).toString().toUpperCase();
|
||||
data.sign = sign
|
||||
let params = new URLSearchParams();
|
||||
params.append('data', JSON.stringify(data));
|
||||
return api.post('/download', params)
|
||||
}
|
||||
|
||||
// 更新云端 传参 data => mail_addr password codebook update_time
|
||||
export function syncCloud(data) {
|
||||
var sign = CryptoJS.MD5(JSON.stringify(data).replace(/\"/g,"'")).toString().toUpperCase();
|
||||
data.sign = sign
|
||||
let params = new URLSearchParams();
|
||||
params.append('data', JSON.stringify(data));
|
||||
return api.post('/upload', params)
|
||||
}
|
23
src/axios/fetch.js
Normal file
@ -0,0 +1,23 @@
|
||||
import axios from 'axios'
|
||||
|
||||
export const api = axios.create({
|
||||
baseURL: 'https://yg.canary.moe/v1/admin/',
|
||||
// baseURL: window.location.origin + '/api/',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'Access-Control-Allow-Origin': '*'
|
||||
},
|
||||
timeout: 30 * 1000
|
||||
})
|
||||
|
||||
//设置拦截器
|
||||
api.interceptors.response.use(
|
||||
(response) => {
|
||||
// console.log('拦截器:请求成功', response)
|
||||
return response
|
||||
}, (error) => {
|
||||
// console.log('拦截器:发生错误', error.response)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
40
src/main.js
Normal file
@ -0,0 +1,40 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import './registerServiceWorker'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import { setHtmlFontSize } from './utils/px2rem.js'
|
||||
// icon-loader
|
||||
import Icon from 'vue-svg-icon/Icon.vue'
|
||||
Vue.component('icon', Icon);
|
||||
|
||||
// material
|
||||
import VueMaterial from 'vue-material'
|
||||
import 'vue-material/dist/vue-material.min.css'
|
||||
import 'vue-material/dist/theme/default.css'
|
||||
// import 'vue-material/dist/theme/default-dark.css'
|
||||
import 'material-design-icons/iconfont/material-icons.css'
|
||||
Vue.use(VueMaterial)
|
||||
|
||||
//px2rem
|
||||
setHtmlFontSize();
|
||||
|
||||
// 剪切板
|
||||
import VueClipboard from "vue-clipboard2";
|
||||
Vue.use(VueClipboard);
|
||||
|
||||
// 手势控件
|
||||
var VueTouch = require('vue-touch')
|
||||
Vue.use(VueTouch, {name: 'v-touch'})
|
||||
|
||||
// vconsole
|
||||
import Vconsole from 'vconsole';
|
||||
new Vconsole();
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
33
src/registerServiceWorker.js
Normal file
@ -0,0 +1,33 @@
|
||||
/* eslint-disable no-console */
|
||||
|
||||
import { register } from 'register-service-worker'
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
register(`${process.env.BASE_URL}service-worker.js`, {
|
||||
ready () {
|
||||
console.log(
|
||||
'App is being served from cache by a service worker.\n' +
|
||||
'For more details, visit https://goo.gl/AFskqB'
|
||||
)
|
||||
},
|
||||
registered () {
|
||||
console.log('Service worker has been registered.')
|
||||
},
|
||||
cached () {
|
||||
console.log('Content has been cached for offline use.')
|
||||
},
|
||||
updatefound () {
|
||||
console.log('New content is downloading.')
|
||||
},
|
||||
updated () {
|
||||
console.log('New content is available; please refresh.')
|
||||
window.location.reload(true)
|
||||
},
|
||||
offline () {
|
||||
console.log('No internet connection found. App is running in offline mode.')
|
||||
},
|
||||
error (error) {
|
||||
console.error('Error during service worker registration:', error)
|
||||
}
|
||||
})
|
||||
}
|
37
src/router/index.js
Normal file
@ -0,0 +1,37 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/clear',
|
||||
name: 'Clear',
|
||||
component: () => import(/* webpackChunkName: "clear" */ '../views/Clear/Clear.vue'),
|
||||
meta: {
|
||||
keepAlive: true
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/comment',
|
||||
name: 'Comment',
|
||||
component: () => import(/* webpackChunkName: "comment" */ '../views/Comment/Comment.vue'),
|
||||
meta: {
|
||||
keepAlive: true
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '*', // 页面不存在的情况下会跳到home
|
||||
redirect: '/clear',
|
||||
name: 'notFound',
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes,
|
||||
})
|
||||
|
||||
export default router
|
40
src/store/index.js
Normal file
@ -0,0 +1,40 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
// 用户信息
|
||||
user_info: {},
|
||||
// 配置信息
|
||||
settings: {},
|
||||
},
|
||||
mutations: {
|
||||
// 设置用户信息
|
||||
SET_USERINFO(state, user_info) {
|
||||
state.user_info = user_info;
|
||||
},
|
||||
// 设置配置信息
|
||||
SET_SETTINGS(state, settings) {
|
||||
state.settings = settings;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
// 设置用户信息
|
||||
setUserInfo({
|
||||
commit
|
||||
}, arg) {
|
||||
commit('SET_USERINFO', arg[0]);
|
||||
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
|
||||
},
|
||||
// 设置配置信息
|
||||
setSettings({
|
||||
commit
|
||||
}, arg) {
|
||||
commit('SET_SETTINGS', arg[0]);
|
||||
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
|
||||
},
|
||||
},
|
||||
modules: {}
|
||||
})
|
99
src/style/font.scss
Normal file
@ -0,0 +1,99 @@
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
// @font-face {
|
||||
// font-family: 'Material Icons';
|
||||
// font-style: normal;
|
||||
// font-weight: 400;
|
||||
// src: url(/assets/MaterialIcons-Regular.eot); /* For IE6-8 */
|
||||
// src: local('Material Icons'),
|
||||
// local('MaterialIcons-Regular'),
|
||||
// url(/assets/MaterialIcons-Regular.woff2) format('woff2'),
|
||||
// url(/assets/MaterialIcons-Regular.woff) format('woff'),
|
||||
// url(/assets/MaterialIcons-Regular.ttf) format('truetype');
|
||||
// }
|
||||
|
||||
// .material-icons {
|
||||
// font-family: 'Material Icons';
|
||||
// font-weight: normal;
|
||||
// font-style: normal;
|
||||
// font-size: 24px; /* Preferred icon size */
|
||||
// display: inline-block;
|
||||
// line-height: 1;
|
||||
// text-transform: none;
|
||||
// letter-spacing: normal;
|
||||
// word-wrap: normal;
|
||||
// white-space: nowrap;
|
||||
// direction: ltr;
|
||||
|
||||
// /* Support for all WebKit browsers. */
|
||||
// -webkit-font-smoothing: antialiased;
|
||||
// /* Support for Safari and Chrome. */
|
||||
// text-rendering: optimizeLegibility;
|
||||
|
||||
// /* Support for Firefox. */
|
||||
// -moz-osx-font-smoothing: grayscale;
|
||||
|
||||
// /* Support for IE. */
|
||||
// font-feature-settings: 'liga';
|
||||
// }
|
30
src/style/main.scss
Normal file
@ -0,0 +1,30 @@
|
||||
$main-color: #448aff;
|
||||
|
||||
@import '~vue-material/dist/theme/engine'; // Import the theme engine
|
||||
|
||||
@mixin set-theme-light() {
|
||||
@include md-register-theme(
|
||||
'default',
|
||||
(
|
||||
primary: md-get-palette-color(blue, A200),
|
||||
// The primary color of your application
|
||||
accent: md-get-palette-color(red, A200),
|
||||
// The accent or secondary color
|
||||
theme: light// This can be dark or light
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@mixin set-theme-dark() {
|
||||
@include md-register-theme(
|
||||
'default',
|
||||
(
|
||||
primary: md-get-palette-color(blue, A200),
|
||||
// The primary color of your application
|
||||
accent: md-get-palette-color(red, A200),
|
||||
// The accent or secondary color
|
||||
theme: dark// This can be dark or light
|
||||
)
|
||||
);
|
||||
}
|
||||
@import '~vue-material/dist/theme/all'; // Apply the theme
|
1
src/svg/canary-white.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M921.6 716.75904L415.46752 210.66752a136.25344 136.25344 0 0 0-96.54272-39.99744c-70.93248 0-128.53248 54.272-135.19872 123.43296L102.4 375.43936h86.12864C210.59584 506.39872 294.57408 616.09984 409.6 673.49504v179.84512h68.27008V700.34432a405.18656 405.18656 0 0 0 68.25984 13.70112v139.30496H614.4V716.75904h307.2zM448.93184 340.6336L620.2368 511.95904h-39.95648c-75.27424 0-136.54016-61.22496-136.54016-136.52992-0.01024-12.12416 2.12992-23.63392 5.19168-34.79552z m-198.26688-33.46432a68.32128 68.32128 0 0 1 68.25984-68.22912c18.19648 0 35.36896 7.09632 48.27136 19.99872l28.4672 28.4672a202.37312 202.37312 0 0 0-20.20352 88.03328c0 112.92672 91.86304 204.8 204.8 204.8h108.22656l68.27008 68.25984H592.00512c-188.20096 0-341.34016-153.1392-341.34016-341.32992z" /></svg>
|
After Width: | Height: | Size: 1.0 KiB |
1
src/svg/canary.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1582191167349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3270" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M921.6 716.75904L415.46752 210.66752a136.25344 136.25344 0 0 0-96.54272-39.99744c-70.93248 0-128.53248 54.272-135.19872 123.43296L102.4 375.43936h86.12864C210.59584 506.39872 294.57408 616.09984 409.6 673.49504v179.84512h68.27008V700.34432a405.18656 405.18656 0 0 0 68.25984 13.70112v139.30496H614.4V716.75904h307.2zM448.93184 340.6336L620.2368 511.95904h-39.95648c-75.27424 0-136.54016-61.22496-136.54016-136.52992-0.01024-12.12416 2.12992-23.63392 5.19168-34.79552z m-198.26688-33.46432a68.32128 68.32128 0 0 1 68.25984-68.22912c18.19648 0 35.36896 7.09632 48.27136 19.99872l28.4672 28.4672a202.37312 202.37312 0 0 0-20.20352 88.03328c0 112.92672 91.86304 204.8 204.8 204.8h108.22656l68.27008 68.25984H592.00512c-188.20096 0-341.34016-153.1392-341.34016-341.32992z" p-id="3271" fill="#bbdefb"></path></svg>
|
After Width: | Height: | Size: 1.2 KiB |
1
src/svg/file_copy.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/></svg>
|
After Width: | Height: | Size: 274 B |
48
src/utils/aes.js
Normal file
@ -0,0 +1,48 @@
|
||||
import CryptoJS from 'crypto-js'
|
||||
import CRC32 from 'crc-32'
|
||||
|
||||
// aes加密
|
||||
export function encrypt(code, json_row) {
|
||||
// 循环冗余校验
|
||||
let aesKey = CRC32.str(code)
|
||||
// 取八位
|
||||
aesKey = aesKey.toString().slice(0,8)
|
||||
// 字符串化
|
||||
let json_str = JSON.stringify(json_row)
|
||||
// 加密
|
||||
return CryptoJS.AES.encrypt(json_str, CryptoJS.enc.Utf8.parse(aesKey), {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
}).toString();
|
||||
}
|
||||
|
||||
// aes解密
|
||||
export function decrypt(code, encrypt_str) {
|
||||
// 循环冗余校验
|
||||
let aesKey = CRC32.str(code)
|
||||
// 取八位
|
||||
aesKey = aesKey.toString().slice(0,8)
|
||||
// 解密
|
||||
return CryptoJS.AES.decrypt(encrypt_str, CryptoJS.enc.Utf8.parse(aesKey), {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
}).toString(CryptoJS.enc.Utf8);
|
||||
}
|
||||
|
||||
// aes加密用户密码
|
||||
export function encryptMainCode(code) {
|
||||
let default_key = 'e08b44a351a3'
|
||||
return CryptoJS.AES.encrypt(code, CryptoJS.enc.Utf8.parse(default_key), {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
}).toString();
|
||||
}
|
||||
|
||||
// aes解密用户密码
|
||||
export function decryptMainCode(row_code) {
|
||||
let default_key = 'e08b44a351a3'
|
||||
return CryptoJS.AES.decrypt(row_code, CryptoJS.enc.Utf8.parse(default_key), {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
}).toString(CryptoJS.enc.Utf8);
|
||||
}
|
15
src/utils/formatTime.js
Normal file
@ -0,0 +1,15 @@
|
||||
export function formatDateTime(inputTime) {
|
||||
var date = new Date(inputTime);
|
||||
var y = date.getFullYear();
|
||||
var m = date.getMonth() + 1;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
var d = date.getDate();
|
||||
d = d < 10 ? "0" + d : d;
|
||||
var h = date.getHours();
|
||||
h = h < 10 ? "0" + h : h;
|
||||
var minute = date.getMinutes();
|
||||
var second = date.getSeconds();
|
||||
minute = minute < 10 ? "0" + minute : minute;
|
||||
second = second < 10 ? "0" + second : second;
|
||||
return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
|
||||
}
|
40
src/utils/generator.js
Normal file
@ -0,0 +1,40 @@
|
||||
// Object of all the function names that we will use to create random letters of password
|
||||
const randomFunc = {
|
||||
lower: getRandomLower,
|
||||
upper: getRandomUpper,
|
||||
number: getRandomNumber,
|
||||
symbol: getRandomSymbol,
|
||||
};
|
||||
|
||||
// Generator Functions
|
||||
// All the functions that are responsible to return a random value taht we will use to create password.
|
||||
function getRandomLower() {
|
||||
return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
|
||||
}
|
||||
function getRandomUpper() {
|
||||
return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
|
||||
}
|
||||
function getRandomNumber() {
|
||||
return String.fromCharCode(Math.floor(Math.random() * 10) + 48);
|
||||
}
|
||||
function getRandomSymbol() {
|
||||
const symbols = '~!@#$%^&*()_+{}":?><;.,';
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
// Function responsible to generate password and then returning it.
|
||||
export function generatePassword(length, lower, upper, number, symbol) {
|
||||
let generatedPassword = "";
|
||||
const typesCount = lower + upper + number + symbol;
|
||||
const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(item => Object.values(item)[0]);
|
||||
if (typesCount === 0) {
|
||||
return "";
|
||||
}
|
||||
for (let i = 0; i < length; i++) {
|
||||
typesArr.forEach(type => {
|
||||
const funcName = Object.keys(type)[0];
|
||||
generatedPassword += randomFunc[funcName]();
|
||||
});
|
||||
}
|
||||
return generatedPassword.slice(0, length);
|
||||
}
|
572
src/utils/language.js
Normal file
@ -0,0 +1,572 @@
|
||||
export function lang() {
|
||||
return {
|
||||
home: {
|
||||
CHS: {
|
||||
title: '密码本',
|
||||
search: '搜索...',
|
||||
menu: ['按首字母', '按最常使用'],
|
||||
drawer: ['账户', '设置', '生成密码', '更新日志', '分享链接', '下载apk', '立即锁定'],
|
||||
empty_state: {
|
||||
label: '创建你的第一个密码',
|
||||
description: '创建密码后,您就可以将信息上载到服务器并保存',
|
||||
button: '立即创建'
|
||||
},
|
||||
unlock_msg: {
|
||||
expired: '密码校验过期,请重新输入',
|
||||
wrong: '密码错误,请重新输入'
|
||||
},
|
||||
copy: {
|
||||
successful: '恭喜!复制成功',
|
||||
failed: '抱歉,复制失败。夸克等浏览器复制成功也会报错,请试着粘贴看看'
|
||||
}
|
||||
},
|
||||
EN: {
|
||||
title: 'Codebook',
|
||||
search: 'Search...',
|
||||
menu: ['Alphabetically', 'Recently Used'],
|
||||
drawer: ['Account', 'Settings', 'Generate Password', 'Update Log', 'Share', 'Download apk', 'Lock Now'],
|
||||
empty_state: {
|
||||
label: 'Create your first code',
|
||||
description: "Creating code, you'll be able to upload your information to the server and save it.",
|
||||
button: 'Create first code'
|
||||
},
|
||||
unlock_msg: {
|
||||
expired: 'Password validity period has expired, please re-enter.',
|
||||
wrong: 'Wrong password, please re-enter.'
|
||||
},
|
||||
copy: {
|
||||
successful: 'Copy successful',
|
||||
failed: 'Failed to copy, but failed in some cases. Try to paste'
|
||||
}
|
||||
}
|
||||
},
|
||||
settings: {
|
||||
CHS: {
|
||||
title: '设置',
|
||||
subheader: ['重置', '选项'],
|
||||
reset_list: ['账户', '密码本', '应用', '主密码'],
|
||||
option_list: ['语言', '黑暗模式', '密码超时时间'],
|
||||
expired_time: '无限',
|
||||
dialog: {
|
||||
title: '输入新的主密码',
|
||||
placeholder: '输入...',
|
||||
confirm: '完成',
|
||||
cancel: '取消'
|
||||
},
|
||||
snakebar_msg: {
|
||||
reset_account: '恭喜! 账户重置完成',
|
||||
reset_codebook: '恭喜! 密码本重置完成',
|
||||
reset_settings: '恭喜! 个性化设置成功',
|
||||
reset_pwd_failed: '密码不能为空',
|
||||
reset_pwd_successful: '恭喜! 新的密码已经应用'
|
||||
},
|
||||
reset_dialog: {
|
||||
title: '警告',
|
||||
content: '该操作不可复原,是否继续',
|
||||
confirm: '继续',
|
||||
cancel: '取消'
|
||||
}
|
||||
},
|
||||
EN: {
|
||||
title: 'Settings',
|
||||
subheader: ['Reset', 'Option'],
|
||||
reset_list: ['Account', 'Codebook', 'Application', 'Main Password'],
|
||||
option_list: ['Language', 'Dark Mode', 'Expired Time'],
|
||||
expired_time: 'Infinite',
|
||||
dialog: {
|
||||
title: 'Enter new password',
|
||||
placeholder: 'Enter here...',
|
||||
confirm: 'Done',
|
||||
cancel: 'Cancel'
|
||||
},
|
||||
snakebar_msg: {
|
||||
reset_account: 'Congratulations! Reset account completed',
|
||||
reset_codebook: 'Congratulations! Reset codebook completed',
|
||||
reset_settings: 'Congratulations! Reset settings completed',
|
||||
reset_pwd_failed: 'Password can not be none',
|
||||
reset_pwd_successful: 'Congratulations! New password set up successfully'
|
||||
},
|
||||
reset_dialog: {
|
||||
title: 'Warning',
|
||||
content: 'This operation cannot be undone, whether to continue',
|
||||
confirm: 'Continue',
|
||||
cancel: 'Cancel'
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
CHS: {
|
||||
label: ['用户名', '密码', '网址', '备注'],
|
||||
copy: {
|
||||
successful: '恭喜!复制成功',
|
||||
failed: '抱歉,复制失败。夸克等浏览器复制成功也会报错,请试着粘贴看看'
|
||||
},
|
||||
snakebar_msg_empty: '网址为空',
|
||||
empty_placeholder: '空空如也呢',
|
||||
dialog: {
|
||||
title: "删除该记录",
|
||||
content: "此操作不可复原,是否继续",
|
||||
confirm: "删除",
|
||||
cancel: "取消"
|
||||
}
|
||||
},
|
||||
EN: {
|
||||
label: ['Username', 'Password', 'Web address', 'Node'],
|
||||
copy: {
|
||||
successful: 'Copy successful',
|
||||
failed: 'Failed to copy, but failed in some cases. Try to paste'
|
||||
},
|
||||
snakebar_msg_empty: 'Web address is empty',
|
||||
empty_placeholder: 'Empty',
|
||||
dialog: {
|
||||
title: "Delete this password?",
|
||||
content: "This operation cannot be resumed. Are you sure to continue?",
|
||||
confirm: "Continue",
|
||||
cancel: "Cancel"
|
||||
}
|
||||
}
|
||||
},
|
||||
add: {
|
||||
CHS: {
|
||||
title: ['新建密码', '编辑'],
|
||||
subheader: ['密码标题', '用户名', '密码', '网址', '备注...'],
|
||||
enter: '提交',
|
||||
empty_error: ['密码标题不可为空', '用户名不可为空', '密码不可为空'],
|
||||
generator: {
|
||||
title: '生成密码',
|
||||
subheader: ['结果', '设置'],
|
||||
length_setter:{
|
||||
label: '密码长度',
|
||||
options:['6 位', '12 位', '18 位', '24 位', '32 位']
|
||||
},
|
||||
settings:['包含大写', '包含小写', '包含数字', '包含符号'],
|
||||
actions: ['生成', '复制', '关闭'],
|
||||
code_res_empty: '未生成',
|
||||
copy_successful: '(复制成功)',
|
||||
copy_failed: '(复制失败)',
|
||||
}
|
||||
},
|
||||
EN: {
|
||||
title: ['Add New Code', 'Edit'],
|
||||
subheader: ['Code Title', 'Username', 'Password', 'Web address', 'Node'],
|
||||
enter: 'Enter',
|
||||
empty_error: ['Title can not be none.', 'Username can not be none.', 'Password can not be none.'],
|
||||
generator: {
|
||||
title: 'Generate Password',
|
||||
subheader: ['Results (click to copy)', 'Settings'],
|
||||
length_setter:{
|
||||
label: 'Password Length',
|
||||
options:['6 Digit', '12 Digit', '18 Digit', '24 Digit', '32 Digit']
|
||||
},
|
||||
settings:['Contain Uppercase', 'Contain Lowercase', 'Contain Number', 'Contain Symbol'],
|
||||
actions: ['Generate', 'Copy','Close'],
|
||||
code_res_empty: 'Not generated',
|
||||
copy_successful: '(Copy successful)',
|
||||
copy_failed: '(Failed to copy)',
|
||||
}
|
||||
}
|
||||
},
|
||||
account: {
|
||||
CHS: {
|
||||
title: '账户',
|
||||
login: {
|
||||
input_placeholder: ['邮箱地址', '密码'],
|
||||
password_errmsg: '密码不能为空',
|
||||
submit: '登录 / 注册'
|
||||
},
|
||||
activation: {
|
||||
title: '恭喜! 激活码已经下发到你的邮箱',
|
||||
subheader: '激活码',
|
||||
input_errmsg: '激活码不可为空',
|
||||
submit: '立即激活'
|
||||
},
|
||||
account: {
|
||||
label: ['云端信息最后修改时间', '同步本地密码本至云端', '同步云端密码本至本地'],
|
||||
logout: '退出登录'
|
||||
},
|
||||
mail_addr_errmsg: ['邮箱地址不能为空', '邮箱地址不合法'],
|
||||
snakebar_msg: ['抱歉, 网络错误',
|
||||
'恭喜! 登录成功!',
|
||||
'恭喜! 请在您的邮箱里找到激活码!',
|
||||
'抱歉, 密码错误, 请重新输入',
|
||||
'抱歉, 网络错误. 错误码:',
|
||||
'恭喜! 激活成功!',
|
||||
'抱歉, 激活码错误, 请重新输入',
|
||||
'恭喜! 本地数据更新成功!',
|
||||
'恭喜! 云端数据更新成功!'
|
||||
]
|
||||
},
|
||||
EN: {
|
||||
title: 'Account',
|
||||
login: {
|
||||
input_placeholder: ['Mail addr', 'Password'],
|
||||
password_errmsg: 'Password can not be none.',
|
||||
submit: 'Login / Sign'
|
||||
},
|
||||
activation: {
|
||||
title: 'Congratulations! Activation code has been sent to your email',
|
||||
subheader: 'Activation Code',
|
||||
input_errmsg: 'Activation Code can not be none.',
|
||||
submit: 'activation'
|
||||
},
|
||||
account: {
|
||||
label: ['Cloud last modified time', 'Sync local codebook to cloud', 'Sync cloud codebook to local'],
|
||||
logout: 'Logout'
|
||||
},
|
||||
mail_addr_errmsg: ['Mail addr can not be none.', 'Mail addr is invalid.'],
|
||||
snakebar_msg: ['Sorry, network error',
|
||||
'Congratulations! Login is successful!',
|
||||
'Congratulations! Please find the activation code in your email!',
|
||||
'Sorry, the password is wrong, please re-enter',
|
||||
'Sorry, network error. errcode:',
|
||||
'Congratulations! Activation is successful!',
|
||||
'Sorry, the activation is wrong, please re-enter',
|
||||
'Congratulations! Local data update completed!',
|
||||
'Congratulations! Cloud data update completed!'
|
||||
]
|
||||
}
|
||||
},
|
||||
unlock: {
|
||||
CHS: {
|
||||
title: ['创建主密码','解锁'],
|
||||
subheader: ['创建主密码', '解锁Canary Codebook'],
|
||||
pwd_label: ['主密码','解锁密码'],
|
||||
repeat_pwd: '再次输入主密码',
|
||||
enter: '提交',
|
||||
dialog: {
|
||||
title: '确认提交',
|
||||
content: '该密码提交之后不可被修改, 请不要将此密码告诉任何人',
|
||||
confirm: '同意',
|
||||
cancel: '不同意'
|
||||
},
|
||||
empty_pwd_error: '主密码不能为空',
|
||||
wrong_pwd_error: '主密码错误',
|
||||
match_pwd_error: '两次输入密码不一致'
|
||||
},
|
||||
EN: {
|
||||
title: ['Create Password','Unlock'],
|
||||
subheader: ['Create New Password', 'Unlock Canary Codebook'],
|
||||
pwd_label: ['New Password','Unlock Password'],
|
||||
repeat_pwd: 'Repeat Password',
|
||||
enter: 'Enter',
|
||||
dialog: {
|
||||
title: 'Confirm you new password?',
|
||||
content: 'The password will not be modified after submission, please make sure you don’t tell anyone this password.',
|
||||
confirm: 'Agree',
|
||||
cancel: 'Disagree'
|
||||
},
|
||||
empty_pwd_error: 'Password can not be none',
|
||||
wrong_pwd_error: 'Wrong password',
|
||||
match_pwd_error: 'The two passwords do not match'
|
||||
}
|
||||
},
|
||||
generator: {
|
||||
CHS:{
|
||||
title: '生成密码',
|
||||
subheader: ['结果(点击复制)', '设置'],
|
||||
length_setter:{
|
||||
label: '密码长度',
|
||||
options:['6 位', '12 位', '18 位', '24 位', '32 位']
|
||||
},
|
||||
settings:['包含大写', '包含小写', '包含数字', '包含符号'],
|
||||
submit: '生成',
|
||||
generate_successful: '生成成功',
|
||||
copy_successful: '复制成功',
|
||||
copy_failed: '抱歉,复制失败。夸克等浏览器复制成功也会报错,请试着粘贴看看',
|
||||
code_res_empty: '未生成'
|
||||
},
|
||||
EN:{
|
||||
title: 'Generate Password',
|
||||
subheader: ['Results (click to copy)', 'Settings'],
|
||||
length_setter:{
|
||||
label: 'Password Length',
|
||||
options:['6 Digit', '12 Digit', '18 Digit', '24 Digit', '32 Digit']
|
||||
},
|
||||
settings:['Contain Uppercase', 'Contain Lowercase', 'Contain Number', 'Contain Symbol'],
|
||||
submit: 'Generate',
|
||||
generate_successful: 'Generated successfully',
|
||||
copy_successful: 'Copy successful',
|
||||
copy_failed: 'Failed to copy, but failed in some cases. Try to paste',
|
||||
code_res_empty: 'Not generated'
|
||||
}
|
||||
},
|
||||
update_log: {
|
||||
CHS:{
|
||||
title: '更新日志',
|
||||
timeline: [
|
||||
{
|
||||
label: '修复搜索后关闭搜索框密码本内容消失',
|
||||
tag:'bug修复',
|
||||
content: [
|
||||
'进行搜索后关闭搜索框由于执行顺序问题,空缓存覆盖掉了要显示的信息导致密码本“视觉上”的消失,已修复',
|
||||
'2020-03-24'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '切换页面之后保存主页状态',
|
||||
tag:'bug修复',
|
||||
content: [
|
||||
'正常情况下不保存主页状态进行页面跳转的时候会导致每次回到主页都是默认回顶的状态,已修复',
|
||||
'2020-03-15'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '设置中的重置功能优化',
|
||||
tag:'功能更新',
|
||||
content: [
|
||||
'所有重置操作之前会进行弹窗提醒,防止误操作',
|
||||
'2020-03-08'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '设置中的重置主密码功能启用',
|
||||
tag:'功能更新',
|
||||
content: [
|
||||
'设置中的重置主密码功能启用,重置后即可使用新密码解锁密码本,另改进了解锁页的密码错误判断逻辑',
|
||||
'2020-03-08'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '新建密码记录生成的密码支持复制',
|
||||
tag:'功能更新',
|
||||
content: [
|
||||
'在新建密码页生成密码支持一键复制',
|
||||
'2020-03-07'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '修复云端最后修改时间不更新的问题',
|
||||
tag:'bug修复',
|
||||
content: [
|
||||
'之前同步密码本至本地后云端最后修改时间不会同时更新,现已修复',
|
||||
'2020-03-06'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '新增页面返回手势',
|
||||
tag:'功能更新',
|
||||
content: [
|
||||
'所有子页面支持右滑返回上一页面',
|
||||
'2020-03-06'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '新建密码记录时支持生成密码',
|
||||
tag:'功能更新',
|
||||
content: [
|
||||
'新建密码记录页的的密码输入框右侧支持打开生成密码页',
|
||||
'2020-03-05'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '修复黑暗模式下主页分割线显示问题',
|
||||
tag:'bug修复',
|
||||
content: [
|
||||
'之前黑暗模式下主页密码分割线过亮,造成强烈的视觉撕裂感,现已修复',
|
||||
'2020-03-04'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '新增控制台vConsole',
|
||||
tag:'功能更新',
|
||||
content: [
|
||||
'主页呼出菜单栏点击头像十次即可唤出或隐藏控制台',
|
||||
'2020-03-04'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '扩大一键回顶点击面积',
|
||||
tag:'功能更新',
|
||||
content: [
|
||||
'一键回顶点击范围从标题文字延展到整个导航栏非功能区',
|
||||
'2020-03-03'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '新增更新日志页',
|
||||
tag:'功能更新',
|
||||
content: [
|
||||
'主页呼出菜单栏即可发现功能入口',
|
||||
'2020-03-03'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '新增一键回顶',
|
||||
tag:'功能更新',
|
||||
content: [
|
||||
'在主页点击导航栏页面标题即可一键回顶',
|
||||
'2020-03-02'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '新增密码生成页',
|
||||
tag:'功能更新',
|
||||
content: [
|
||||
'主页呼出菜单栏即可发现功能入口',
|
||||
'2020-02-29'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '新增呼出菜单手势',
|
||||
tag:'功能更新',
|
||||
content: [
|
||||
'在主页非导航栏任意处右滑即可呼出菜单栏',
|
||||
'2020-02-26'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
EN:{
|
||||
title: 'Update Log',
|
||||
timeline: [
|
||||
{
|
||||
label: 'Fixed search box password content disappeared after searching',
|
||||
tag:'Bug fix',
|
||||
content: [
|
||||
'Close the search box after searching. Due to the execution order problem, the empty cache has overwritten the information to be displayed, causing the codebook to "visually" disappear. It has been fixed.',
|
||||
'2020-03-24'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Save homepage status after switching pages',
|
||||
tag:'Bug fix',
|
||||
content: [
|
||||
'Normally, when you do n’t save the homepage state, the page jump will result in the default backing state every time you return to the homepage.',
|
||||
'2020-03-15'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Optimization of reset function in settings',
|
||||
tag:'Feature update',
|
||||
content: [
|
||||
'Pop-up window reminder before all reset operations to prevent misoperation',
|
||||
'2020-03-08'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'The reset master password function is enabled in the settings',
|
||||
tag:'Feature update',
|
||||
content: [
|
||||
'The reset master password function is enabled in the settings. After resetting, you can use the new password to unlock the password book, and improve the password error judgment logic on the unlock page',
|
||||
'2020-03-08'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Generated passwords support replication',
|
||||
tag:'Feature update',
|
||||
content: [
|
||||
'Generate a password on the new password page',
|
||||
'2020-03-07'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Fix the problem that the last modification time of the cloud is not updated',
|
||||
tag:'Bug fix',
|
||||
content: [
|
||||
'The last modified time in the cloud will not be updated at the same time after syncing the password book to the local, it is now fixed',
|
||||
'2020-03-06'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Add page back gesture',
|
||||
tag:'Feature update',
|
||||
content: [
|
||||
'All subpages support swiping right to return to the previous page',
|
||||
'2020-03-06'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Support password generation when creating new password records',
|
||||
tag:'Feature update',
|
||||
content: [
|
||||
'The right side of the password input box of the new password record page supports opening a generate password page',
|
||||
'2020-03-05'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Fixed display of homepage split line in dark mode',
|
||||
tag:'Bug fix',
|
||||
content: [
|
||||
'The homepage password dividing line was too bright in the dark mode, causing a strong visual tearing.',
|
||||
'2020-03-04'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Add vConsole',
|
||||
tag:'Feature update',
|
||||
content: [
|
||||
'Home callout menu bar Click the avatar ten times to call up or hide the console',
|
||||
'2020-03-04'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Expand one click back to top click area',
|
||||
tag:'Feature update',
|
||||
content: [
|
||||
'The one-click back to top click extends from the title text to the non-functional area of the entire navigation bar',
|
||||
'2020-03-03'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'New update log page',
|
||||
tag:'Feature update',
|
||||
content: [
|
||||
'Call out the menu bar on the homepage to find the function entry',
|
||||
'2020-03-03'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Added one-click back to top',
|
||||
tag:'Feature update',
|
||||
content: [
|
||||
'Click the navigation page title on the homepage to return to the top with one click',
|
||||
'2020-03-02'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'New password generation page',
|
||||
tag:'Feature update',
|
||||
content: [
|
||||
'Call out the menu bar on the homepage to find the function entry',
|
||||
'2020-02-29'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Added callout menu gesture',
|
||||
tag:'Feature update',
|
||||
content: [
|
||||
'Swipe right anywhere on the homepage other than the navigation bar to bring up the menu bar。',
|
||||
'2020-02-26'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 引入
|
||||
import { lang } from '@/utils/language.js'
|
||||
|
||||
* data 里边加入lang
|
||||
data -> lang
|
||||
|
||||
* create() 初始化语言系统,防止报错
|
||||
this.lang = lang().home.CHS
|
||||
console.log('临时语言系统加载完成')
|
||||
|
||||
* computed 获取settings
|
||||
...mapState(['user_infos', 'row_data', 'row_pwd', 'settings'])
|
||||
|
||||
* 在合适的地方配置语言
|
||||
// 配置语言
|
||||
initLanguage() {
|
||||
if(this.settings.is_chinese) {
|
||||
this.lang = lang().home.CHS
|
||||
} else {
|
||||
this.lang = lang().home.EN
|
||||
}
|
||||
console.log('语言配置完成')
|
||||
},
|
||||
*/
|
7
src/utils/px2rem.js
Normal file
@ -0,0 +1,7 @@
|
||||
//px2rem
|
||||
export function setHtmlFontSize() {
|
||||
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
|
||||
const htmlDom = document.getElementsByTagName('html')[0]
|
||||
if (htmlWidth >= 500) htmlDom.style.fontSize = 500 / 10 + 'px'
|
||||
else htmlDom.style.fontSize = htmlWidth / 10 + 'px'
|
||||
}
|
514
src/views/Account/Account.vue
Normal file
@ -0,0 +1,514 @@
|
||||
<template>
|
||||
<div class="account">
|
||||
<md-app md-waterfall md-mode="fixed">
|
||||
<md-app-toolbar class="md-primary toolbar">
|
||||
<div class="md-toolbar-section-start">
|
||||
<md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
|
||||
<h3 class="md-title" style="flex: 1">{{ lang.title }}</h3>
|
||||
</div>
|
||||
</md-app-toolbar>
|
||||
|
||||
<md-app-content>
|
||||
<v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
|
||||
<div ref="list_placeholder" style="height: 54px;"></div>
|
||||
<icon class="logo" name="canary"></icon>
|
||||
<template v-if="page_type == 'login'">
|
||||
<md-field :class="mail_addr_verify ? '' : 'md-invalid'">
|
||||
<label>{{ lang.login.input_placeholder[0] }}</label>
|
||||
<md-input v-model="mail_addr" required></md-input>
|
||||
<span class="md-error">{{ mail_addr_errmsg }}</span>
|
||||
</md-field>
|
||||
|
||||
<md-field :class="password_verify ? '' : 'md-invalid'">
|
||||
<label>{{ lang.login.input_placeholder[1] }}</label>
|
||||
<md-input v-model="password" required></md-input>
|
||||
<span class="md-error">{{ lang.login.password_errmsg }}</span>
|
||||
</md-field>
|
||||
<md-button class="md-raised md-primary expand" @click="judgeLogin()" :disabled="login_loading">
|
||||
{{ lang.login.submit }}
|
||||
<div class="loading-box"><md-progress-spinner v-if="login_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner></div>
|
||||
</md-button>
|
||||
</template>
|
||||
|
||||
<template v-if="page_type == 'activation'">
|
||||
<p class="md-caption">{{ lang.activation.title }}</p>
|
||||
<md-field :class="activation_code_verify ? '' : 'md-invalid'">
|
||||
<label>{{ lang.activation.subheader }}</label>
|
||||
<md-input v-model="activation_code" required></md-input>
|
||||
<span class="md-error">{{ lang.activation.input_errmsg }}</span>
|
||||
</md-field>
|
||||
<md-button class="md-raised md-primary expand" :disabled="activation_loading" @click="judgeActivation()">
|
||||
{{ lang.activation.submit }}
|
||||
<div class="loading-box"><md-progress-spinner v-if="activation_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner></div>
|
||||
</md-button>
|
||||
</template>
|
||||
|
||||
<template v-if="page_type == 'account'">
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<span class="md-list-item-text">{{ user_infos.mail_addr }}</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-list-item>
|
||||
<span class="md-list-item-text">{{ lang.account.label[0] }}</span>
|
||||
<span class="time-content">{{ update_time }}</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<span class="md-list-item-text">{{ lang.account.label[1] }}</span>
|
||||
<md-button @click="syncCloudStart()" v-if="!sync_cloud_loading" class="md-icon-button md-list-action"><md-icon>cloud_upload</md-icon></md-button>
|
||||
<md-progress-spinner v-else :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<span class="md-list-item-text">{{ lang.account.label[2] }}</span>
|
||||
<md-button @click="syncLocalStart()" v-if="!sync_local_loading" class="md-icon-button md-list-action"><md-icon>cloud_download</md-icon></md-button>
|
||||
<md-progress-spinner v-else :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
|
||||
</md-list-item>
|
||||
|
||||
<md-button @click="startLogout()" class="md-raised md-primary expand" :disabled="sync_local_loading || sync_cloud_loading">{{ lang.account.logout }}</md-button>
|
||||
</md-list>
|
||||
</template>
|
||||
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
|
||||
<span>{{ snakebar_msg }}</span>
|
||||
</md-snackbar>
|
||||
</v-touch>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from 'vuex';
|
||||
import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
|
||||
import { login, activation, syncLocal, syncCloud } from '@/axios/api.js';
|
||||
import { lang } from '@/utils/language.js';
|
||||
import { setHtmlFontSize } from '@/utils/px2rem.js';
|
||||
|
||||
export default {
|
||||
name: 'Add',
|
||||
data() {
|
||||
return {
|
||||
page_type: 'login', // login activation account
|
||||
mail_addr: '',
|
||||
mail_addr_verify: true,
|
||||
mail_addr_errmsg: '',
|
||||
password: '',
|
||||
password_verify: true,
|
||||
activation_code: '',
|
||||
activation_code_verify: true,
|
||||
sync_local_loading: false,
|
||||
sync_cloud_loading: false,
|
||||
login_loading: false,
|
||||
activation_loading: false,
|
||||
show_snackbar: false,
|
||||
snakebar_msg: '',
|
||||
lang: '',
|
||||
clientHeight: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user_infos', 'row_data', 'row_pwd', 'settings']),
|
||||
update_time: function() {
|
||||
return this.formatDateTime(new Date(parseInt(this.user_infos.update_time)));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setUserInfo', 'setRowData', 'setRowPwd']),
|
||||
// 修改md-app的最小高度
|
||||
changeFixed(clientHeight) {
|
||||
//动态修改样式
|
||||
// console.log(clientHeight);
|
||||
// window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
|
||||
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight = clientHeight + 'px';
|
||||
this.$refs.list_placeholder.parentNode.style.minHeight = clientHeight - 32 + 'px';
|
||||
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
|
||||
},
|
||||
// 初始化
|
||||
init() {
|
||||
// 刷新vuex
|
||||
this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
|
||||
this.initLanguage();
|
||||
// 判断页面类型
|
||||
if (this.user_infos.has_login) {
|
||||
// 已经登录
|
||||
if (this.user_infos.activation) {
|
||||
// 已经激活用户
|
||||
this.page_type = 'account';
|
||||
} else {
|
||||
// 登录但是没激活
|
||||
this.page_type = 'activation';
|
||||
}
|
||||
} else {
|
||||
// 还没登录
|
||||
this.page_type = 'login';
|
||||
}
|
||||
console.log('当前用户状态为' + this.page_type);
|
||||
},
|
||||
|
||||
// 配置语言
|
||||
initLanguage() {
|
||||
if (this.settings.is_chinese) {
|
||||
this.lang = lang().account.CHS;
|
||||
} else {
|
||||
this.lang = lang().account.EN;
|
||||
}
|
||||
console.log('语言配置完成');
|
||||
},
|
||||
|
||||
//返回上一页
|
||||
back() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
|
||||
// 强制返回Home
|
||||
turnToHome(msg) {
|
||||
console.log(msg);
|
||||
this.$router.replace('/');
|
||||
},
|
||||
|
||||
// 点击上传
|
||||
judgeLogin() {
|
||||
// 设置flag
|
||||
let can_continue = true;
|
||||
|
||||
// 处理mail_addr
|
||||
if (!(this.mail_addr = this.mail_addr.trim())) {
|
||||
can_continue = false;
|
||||
this.mail_addr_verify = false;
|
||||
this.mail_addr_errmsg = this.lang.mail_addr_errmsg[0];
|
||||
}
|
||||
let reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
|
||||
if (!reg.test(this.mail_addr)) {
|
||||
can_continue = false;
|
||||
this.mail_addr_verify = false;
|
||||
this.mail_addr_errmsg = this.lang.mail_addr_errmsg[1];
|
||||
}
|
||||
// 处理password
|
||||
if (!(this.password = this.password.trim())) {
|
||||
can_continue = false;
|
||||
this.password_verify = false;
|
||||
}
|
||||
// 根据flag判断是否提交
|
||||
if (can_continue) this.startLogin();
|
||||
},
|
||||
|
||||
// 开始上传信息
|
||||
startLogin() {
|
||||
this.login_loading = true;
|
||||
let data = {
|
||||
mail_addr: this.mail_addr,
|
||||
password: encryptMainCode(this.password),
|
||||
update_time: new Date().getTime()
|
||||
};
|
||||
login(data)
|
||||
.then(res => {
|
||||
// console.log(res.data)
|
||||
this.manageLoginRes(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
this.login_loading = false;
|
||||
this.snakebar_msg = this.lang.snakebar_msg[0];
|
||||
this.show_snackbar = true;
|
||||
});
|
||||
},
|
||||
|
||||
// 处理登录后端返回的信息
|
||||
manageLoginRes(data) {
|
||||
if (data.errcode == 200) {
|
||||
// 登录成功,正常用户
|
||||
let user_infos = {
|
||||
mail_addr: this.mail_addr,
|
||||
has_login: true,
|
||||
activation: true,
|
||||
row_login_pwd: encryptMainCode(this.password),
|
||||
update_time: data.update_time
|
||||
};
|
||||
this.setUserInfo([user_infos, this]);
|
||||
console.log('正常用户登录,用户信息覆写完成');
|
||||
this.snakebar_msg = this.lang.snakebar_msg[1];
|
||||
this.show_snackbar = true;
|
||||
this.page_type = 'account';
|
||||
} else if (data.errcode == 107 || data.errcode == 108 || data.errcode == 105) {
|
||||
// 注册成功等待验证
|
||||
let user_infos = {
|
||||
mail_addr: this.mail_addr,
|
||||
has_login: true,
|
||||
activation: false,
|
||||
row_login_pwd: encryptMainCode(this.password),
|
||||
update_time: this.user_infos.update_time
|
||||
};
|
||||
this.setUserInfo([user_infos, this]);
|
||||
console.log('用户注册成功,验证码已下发,用户信息覆写完成');
|
||||
this.snakebar_msg = this.lang.snakebar_msg[2];
|
||||
this.show_snackbar = true;
|
||||
this.page_type = 'activation';
|
||||
} else if (data.errcode == 106) {
|
||||
this.password = '';
|
||||
console.log('用户密码错误');
|
||||
this.snakebar_msg = this.lang.snakebar_msg[3];
|
||||
this.show_snackbar = true;
|
||||
} else {
|
||||
console.log('请求出错');
|
||||
console.log(data);
|
||||
this.snakebar_msg = this.lang.snakebar_msg[4] + data.errcode;
|
||||
this.show_snackbar = true;
|
||||
}
|
||||
this.login_loading = false;
|
||||
},
|
||||
|
||||
// 点击激活
|
||||
judgeActivation() {
|
||||
// 设置flag
|
||||
let can_continue = true;
|
||||
// 处理password
|
||||
if (!(this.activation_code = this.activation_code.trim())) {
|
||||
can_continue = false;
|
||||
this.activation_code_verify = false;
|
||||
}
|
||||
// 根据flag判断是否提交
|
||||
if (can_continue) this.startActivation();
|
||||
},
|
||||
|
||||
// 开始激活
|
||||
startActivation() {
|
||||
this.activation_loading = true;
|
||||
let data = {
|
||||
mail_addr: this.user_infos.mail_addr,
|
||||
uuid: this.activation_code
|
||||
};
|
||||
activation(data)
|
||||
.then(res => {
|
||||
// console.log(res.data)
|
||||
this.manageActivation(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
this.activation_loading = false;
|
||||
this.snakebar_msg = this.lang.snakebar_msg[0];
|
||||
this.show_snackbar = true;
|
||||
});
|
||||
},
|
||||
|
||||
// 处理激活后端返回的信息
|
||||
manageActivation(data) {
|
||||
if (data.errcode == 200) {
|
||||
// 激活成功
|
||||
let user_infos = {
|
||||
mail_addr: this.user_infos.mail_addr,
|
||||
has_login: true,
|
||||
activation: true,
|
||||
row_login_pwd: this.user_infos.row_login_pwd,
|
||||
update_time: data.update_time
|
||||
};
|
||||
this.setUserInfo([user_infos, this]);
|
||||
console.log('验证成功,用户信息覆写完成');
|
||||
this.snakebar_msg = this.lang.snakebar_msg[5];
|
||||
this.show_snackbar = true;
|
||||
this.page_type = 'account';
|
||||
} else if (data.errcode == 401 || data.errcode == 404 || data.errcode == 407) {
|
||||
// 验证码输入的问题
|
||||
this.activation_code = '';
|
||||
console.log('验证码错误');
|
||||
console.log(data);
|
||||
this.snakebar_msg = this.lang.snakebar_msg[6];
|
||||
this.show_snackbar = true;
|
||||
} else {
|
||||
console.log('请求出错');
|
||||
console.log(data);
|
||||
this.snakebar_msg = this.lang.snakebar_msg[4] + data.errcode;
|
||||
this.show_snackbar = true;
|
||||
}
|
||||
this.activation_loading = false;
|
||||
},
|
||||
// 处理时间
|
||||
formatDateTime(inputTime) {
|
||||
var date = new Date(inputTime);
|
||||
var y = date.getFullYear();
|
||||
var m = date.getMonth() + 1;
|
||||
m = m < 10 ? '0' + m : m;
|
||||
var d = date.getDate();
|
||||
d = d < 10 ? '0' + d : d;
|
||||
var h = date.getHours();
|
||||
h = h < 10 ? '0' + h : h;
|
||||
var minute = date.getMinutes();
|
||||
var second = date.getSeconds();
|
||||
minute = minute < 10 ? '0' + minute : minute;
|
||||
second = second < 10 ? '0' + second : second;
|
||||
return y + '-' + m + '-' + d + ' ' + h + ':' + minute;
|
||||
// return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
|
||||
// return y + "-" + m + "-" + d;
|
||||
},
|
||||
|
||||
// 更新本地密码本
|
||||
syncLocalStart() {
|
||||
this.sync_local_loading = true;
|
||||
let data = {
|
||||
mail_addr: this.user_infos.mail_addr,
|
||||
password: this.user_infos.row_login_pwd
|
||||
};
|
||||
syncLocal(data)
|
||||
.then(res => {
|
||||
console.log(res.data)
|
||||
if (res.data.errcode == 200) {
|
||||
// 获取成功
|
||||
this.setRowData([res.data.codebook, this]);
|
||||
console.log('数据获取成功,密码本覆写成功');
|
||||
let user_infos = this.user_infos;
|
||||
user_infos.update_time = res.data.update_time;
|
||||
this.setUserInfo([user_infos, this]);
|
||||
console.log('数据获取成功,用户信息覆写成功');
|
||||
this.snakebar_msg = this.lang.snakebar_msg[7];
|
||||
this.show_snackbar = true;
|
||||
} else {
|
||||
// 获取失败
|
||||
console.log('数据获取失败');
|
||||
console.log(res.data);
|
||||
this.snakebar_msg = this.lang.snakebar_msg[4] + res.data.errcode;
|
||||
this.show_snackbar = true;
|
||||
}
|
||||
setTimeout(
|
||||
function() {
|
||||
this.sync_local_loading = false;
|
||||
}.bind(this),
|
||||
1000
|
||||
);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
this.sync_local_loading = false;
|
||||
this.snakebar_msg = this.lang.snakebar_msg[0];
|
||||
this.show_snackbar = true;
|
||||
});
|
||||
},
|
||||
|
||||
// 更新云端密码本
|
||||
syncCloudStart() {
|
||||
this.sync_cloud_loading = true;
|
||||
let data = {
|
||||
mail_addr: this.user_infos.mail_addr,
|
||||
password: this.user_infos.row_login_pwd,
|
||||
codebook: this.row_data,
|
||||
update_time: new Date().getTime()
|
||||
};
|
||||
syncCloud(data)
|
||||
.then(res => {
|
||||
// console.log(res.data)
|
||||
if (res.data.errcode == 200) {
|
||||
// 获取成功
|
||||
let user_infos = this.user_infos;
|
||||
user_infos.update_time = res.data.update_time;
|
||||
this.setUserInfo([user_infos, this]);
|
||||
console.log('数据获取成功,用户信息覆写成功');
|
||||
this.snakebar_msg = this.lang.snakebar_msg[8];
|
||||
this.show_snackbar = true;
|
||||
} else {
|
||||
// 获取失败
|
||||
console.log('数据获取失败');
|
||||
console.log(res.data);
|
||||
this.snakebar_msg = this.lang.snakebar_msg[4] + res.data.errcode;
|
||||
this.show_snackbar = true;
|
||||
}
|
||||
setTimeout(
|
||||
function() {
|
||||
this.sync_cloud_loading = false;
|
||||
}.bind(this),
|
||||
1000
|
||||
);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
this.sync_cloud_loading = false;
|
||||
this.snakebar_msg = this.lang.snakebar_msg[0];
|
||||
this.show_snackbar = true;
|
||||
});
|
||||
},
|
||||
|
||||
// 退出登录
|
||||
startLogout() {
|
||||
// 初始化用户信息
|
||||
let user_infos = {
|
||||
mail_addr: 'A Little Canary',
|
||||
has_login: false,
|
||||
activation: false,
|
||||
update_time: '1582282494434'
|
||||
};
|
||||
this.setUserInfo([user_infos, this]);
|
||||
console.log('用户信息覆写完成');
|
||||
this.back();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.lang = lang().account.CHS;
|
||||
console.log('临时语言系统加载完成');
|
||||
this.init();
|
||||
},
|
||||
mounted() {
|
||||
// 获取浏览器可视区域高度
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
//document.body.clientWidth;
|
||||
window.onresize = function temp() {
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
setHtmlFontSize();
|
||||
}.bind(this);
|
||||
},
|
||||
watch: {
|
||||
// 如果 `clientHeight` 发生改变,这个函数就会运行
|
||||
clientHeight: function() {
|
||||
this.changeFixed(this.clientHeight);
|
||||
},
|
||||
// 如果 `mail_addr` 发生改变,就会清空错误状态
|
||||
mail_addr: function() {
|
||||
this.mail_addr_verify = true;
|
||||
},
|
||||
// 如果 `password` 发生改变,就会清空错误状态
|
||||
password: function() {
|
||||
this.password_verify = true;
|
||||
},
|
||||
// 如果 `activation_code` 发生改变,就会清空错误状态
|
||||
activation_code: function() {
|
||||
this.activation_code_verify = true;
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" type="text/scss">
|
||||
@import '../../style/main';
|
||||
.account {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
.expand {
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
min-height: 1.2rem !important;
|
||||
margin-top: 0.5rem !important;
|
||||
}
|
||||
.logo {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
}
|
||||
.time-content {
|
||||
text-align: right !important;
|
||||
}
|
||||
.loading-box {
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
top: 50%;
|
||||
margin-right: -11px;
|
||||
margin-top: -11px;
|
||||
}
|
||||
.toolbar {
|
||||
position: fixed !important;
|
||||
}
|
||||
}
|
||||
</style>
|
237
src/views/Clear/Clear.vue
Normal file
@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div class="home" ref="home">
|
||||
<md-app md-waterfall md-mode="fixed">
|
||||
<md-app-toolbar class="md-primary">
|
||||
<div class="md-toolbar-section-start">
|
||||
<span class="md-title page-title">曳光 控制台</span>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<div class="sroll-top-area"></div>
|
||||
</div>
|
||||
|
||||
</md-app-toolbar>
|
||||
<md-app-content>
|
||||
<div ref="list_placeholder" :style="`height:40px`"></div>
|
||||
<md-progress-bar v-if="loading_switch" md-mode="indeterminate" style="position: absolute; top: 56px; left: 0; width: 100%;"></md-progress-bar>
|
||||
<md-field style="margin-top: 30px;">
|
||||
<label>失物招领id</label>
|
||||
<md-input v-model="id" placeholder="输入在地址栏找到的失物招领id" type="number" maxlength="17"></md-input>
|
||||
</md-field>
|
||||
<md-speed-dial class="md-bottom-right" style="margin-bottom: 60px;">
|
||||
<md-speed-dial-target class="md-primary" @click="clear" v-if="!loading_switch">
|
||||
<md-icon>delete</md-icon>
|
||||
</md-speed-dial-target>
|
||||
</md-speed-dial>
|
||||
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
|
||||
<span>{{ snakebar_msg }}</span>
|
||||
</md-snackbar>
|
||||
<div :style="`height:40px`"></div>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
import { setHtmlFontSize } from "@/utils/px2rem.js";
|
||||
import { api } from "@/axios/fetch.js";
|
||||
export default {
|
||||
name: "Clear",
|
||||
data() {
|
||||
return {
|
||||
// 显示高度,控制md-app的最小高度,防止抽屉高度塌陷
|
||||
clientHeight: "",
|
||||
// 显示的密码列表
|
||||
show_list: [],
|
||||
// snackbar控制
|
||||
show_snackbar: false,
|
||||
snakebar_msg: "",
|
||||
// 输入的失物招领id
|
||||
id: "",
|
||||
// 加载控制
|
||||
loading_switch: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user_info", "settings"])
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["setUserInfo", "setSettings"]),
|
||||
|
||||
// 修改md-app的最小高度
|
||||
changeFixed(clientHeight) {
|
||||
//动态修改样式
|
||||
this.$refs.home.children[0].style.minHeight = clientHeight + "px";
|
||||
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight =
|
||||
clientHeight + "px";
|
||||
this.$refs.list_placeholder.parentNode.style.minHeight =
|
||||
clientHeight - 32 + "px";
|
||||
window.document.documentElement.setAttribute(
|
||||
"data-theme",
|
||||
this.settings.is_dark_mode ? "dark" : "light"
|
||||
);
|
||||
},
|
||||
|
||||
// 初始化
|
||||
init() {
|
||||
// 刷新vuex
|
||||
this.$store.replaceState(
|
||||
Object.assign(
|
||||
this.$store.state,
|
||||
JSON.parse(localStorage.getItem("storeState"))
|
||||
)
|
||||
);
|
||||
this.initUserInfo();
|
||||
},
|
||||
|
||||
// 初始化用户信息
|
||||
initUserInfo() {
|
||||
if (Object.keys(this.user_info).length == 0) {
|
||||
// 初始化用户信息
|
||||
let user_info = {
|
||||
mail_addr: "zhaoyingbo@live.cn",
|
||||
openid: "123456"
|
||||
};
|
||||
this.setUserInfo([user_info, this]);
|
||||
console.log("用户信息覆写完成");
|
||||
}
|
||||
console.log("用户信息初始化完成");
|
||||
},
|
||||
// 用户点击清除
|
||||
clear() {
|
||||
// 管理员校验
|
||||
if (Object.keys(this.user_info).length == 0) {
|
||||
console.log("管理员信息校验失败");
|
||||
this.message("请先登录");
|
||||
return;
|
||||
}
|
||||
this.id = this.id.trim();
|
||||
// 格式校验
|
||||
if (!/\d{17}/.test(this.id)) {
|
||||
console.log("数据格式校验失败");
|
||||
this.message("请输入正确的id");
|
||||
return;
|
||||
}
|
||||
this.loading_switch = true;
|
||||
let data = {
|
||||
openid: this.user_info.openid,
|
||||
id: this.id
|
||||
};
|
||||
console.log(data);
|
||||
api
|
||||
.delete("/laf/close", { data })
|
||||
.then(res => {
|
||||
this.message("清除成功");
|
||||
this.loading_switch = false;
|
||||
this.id = "";
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
this.loading_switch = false;
|
||||
if (err.response && err.response.status != 500) {
|
||||
this.message(`${err.response.status}: ${err.response.data}`);
|
||||
} else {
|
||||
this.message("网络错误,请稍候重试");
|
||||
}
|
||||
});
|
||||
},
|
||||
// 调用snackBar
|
||||
message(msg) {
|
||||
this.snakebar_msg = msg;
|
||||
this.show_snackbar = true;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
mounted() {
|
||||
// 获取浏览器可视区域高度
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
//document.body.clientWidth;
|
||||
window.onresize = function temp() {
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
setHtmlFontSize();
|
||||
}.bind(this);
|
||||
this.$refs.list_placeholder.parentNode.parentNode.addEventListener(
|
||||
"scroll",
|
||||
this.scroll
|
||||
);
|
||||
},
|
||||
watch: {
|
||||
// 如果 `clientHeight` 发生改变,这个函数就会运行
|
||||
clientHeight: function() {
|
||||
this.changeFixed(this.clientHeight);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" type="text/scss">
|
||||
@import "../../style/main";
|
||||
.home {
|
||||
width: 100%;
|
||||
// max-width: 500px;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
// margin: 0 auto;
|
||||
.drawer-banner {
|
||||
padding: 1rem 0.3rem 0.3rem 0.3rem;
|
||||
box-sizing: border-box;
|
||||
background: $main-color;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
.default-avatar {
|
||||
color: #fff;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.md-caption {
|
||||
color: #fbfbfb;
|
||||
}
|
||||
}
|
||||
.md-toolbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
.md-toolbar-row {
|
||||
order: 12;
|
||||
// margin-bottom: .3rem !important;
|
||||
}
|
||||
.md-toolbar-section-start,
|
||||
.md-toolbar-section-end,
|
||||
.md-toolbar-row {
|
||||
min-height: 56px;
|
||||
}
|
||||
.md-toolbar-row {
|
||||
margin-top: -10px;
|
||||
}
|
||||
.md-speed-dial.md-bottom-right {
|
||||
position: fixed !important;
|
||||
}
|
||||
}
|
||||
// Demo purposes only
|
||||
.md-drawer {
|
||||
width: 240px;
|
||||
max-width: calc(100vw - 125px);
|
||||
}
|
||||
.md-app-scroller > div {
|
||||
overflow-y: scroll !important;
|
||||
}
|
||||
.face {
|
||||
color: #fff !important;
|
||||
}
|
||||
.page-title {
|
||||
flex: 1;
|
||||
min-height: 56px;
|
||||
line-height: 56px;
|
||||
}
|
||||
.sroll-top-area {
|
||||
flex: 1;
|
||||
min-height: 56px;
|
||||
}
|
||||
.md-bottom-bar.md-type-fixed .md-bottom-bar-item {
|
||||
max-width: 1000px !important;
|
||||
}
|
||||
</style>
|
312
src/views/Comment/Comment.vue
Normal file
@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<div class="comment" ref="comment">
|
||||
<md-app md-waterfall md-mode="fixed">
|
||||
<md-app-toolbar class="md-primary">
|
||||
<div class="md-toolbar-section-start">
|
||||
<span class="md-title page-title" @click="scrollTop()">曳光 控制台</span>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<div class="sroll-top-area" @click="scrollTop()"></div>
|
||||
<md-button class="md-icon-button" @click="getList">
|
||||
<md-icon>refresh</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-app-toolbar>
|
||||
|
||||
<md-app-content>
|
||||
<div ref="list_placeholder" :style="`height:56px`"></div>
|
||||
<md-progress-bar
|
||||
v-if="loading_switch"
|
||||
md-mode="indeterminate"
|
||||
style="position: absolute; top: 56px; left: 0; width: 100%;"
|
||||
></md-progress-bar>
|
||||
|
||||
<!-- 空内容 -->
|
||||
<md-empty-state
|
||||
class="md-primary"
|
||||
md-icon="access_time"
|
||||
md-label="暂无内容"
|
||||
md-description="Emm,当前言论表暂时没有内容,或许你可以刷新一下"
|
||||
v-if="this.show_list.length == 0"
|
||||
></md-empty-state>
|
||||
|
||||
<md-card v-for="(item, index) in show_list" :key="index">
|
||||
<md-card-content>
|
||||
{{item.content.content}}
|
||||
<div class="md-subhead">{{formatDateTime(item.content.create_time)}}</div>
|
||||
</md-card-content>
|
||||
<md-card-actions>
|
||||
<md-button @click="item_cache = item; del_confirm_switch = true" class="md-primary">删除</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
|
||||
<span>{{ snakebar_msg }}</span>
|
||||
</md-snackbar>
|
||||
<md-dialog-confirm
|
||||
:md-active.sync="del_confirm_switch"
|
||||
md-title="警告"
|
||||
md-content="您将删除该言论以及其回复,是否继续"
|
||||
md-confirm-text="继续"
|
||||
md-cancel-text="取消"
|
||||
@md-cancel="item_cache = null"
|
||||
@md-confirm="delComment"
|
||||
/>
|
||||
<div :style="`height:56px`"></div>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
import { setHtmlFontSize } from "@/utils/px2rem.js";
|
||||
import { api } from "@/axios/fetch.js";
|
||||
import { formatDateTime } from "@/utils/formatTime.js";
|
||||
|
||||
export default {
|
||||
name: "comment",
|
||||
data() {
|
||||
return {
|
||||
// 显示高度,控制md-app的最小高度,防止抽屉高度塌陷
|
||||
clientHeight: "",
|
||||
// 显示的密码列表
|
||||
show_list: [],
|
||||
// snackbar控制
|
||||
show_snackbar: false,
|
||||
snakebar_msg: "",
|
||||
// 加载控制
|
||||
loading_switch: false,
|
||||
// 删除弹窗
|
||||
del_confirm_switch: false,
|
||||
// 要删除的言论暂存
|
||||
item_cache: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user_info", "settings"])
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["setUserInfo", "setSettings"]),
|
||||
// 处理时间
|
||||
formatDateTime,
|
||||
// 修改md-app的最小高度
|
||||
changeFixed(clientHeight) {
|
||||
//动态修改样式
|
||||
this.$refs.comment.children[0].style.minHeight = clientHeight + "px";
|
||||
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight =
|
||||
clientHeight + "px";
|
||||
this.$refs.list_placeholder.parentNode.style.minHeight =
|
||||
clientHeight - 32 + "px";
|
||||
window.document.documentElement.setAttribute(
|
||||
"data-theme",
|
||||
this.settings.is_dark_mode ? "dark" : "light"
|
||||
);
|
||||
},
|
||||
|
||||
// 初始化
|
||||
init() {
|
||||
// 刷新vuex
|
||||
this.$store.replaceState(
|
||||
Object.assign(
|
||||
this.$store.state,
|
||||
JSON.parse(localStorage.getItem("storeState"))
|
||||
)
|
||||
);
|
||||
this.initUserInfo();
|
||||
this.getList();
|
||||
},
|
||||
|
||||
// 初始化用户信息
|
||||
initUserInfo() {
|
||||
if (Object.keys(this.user_info).length == 0) {
|
||||
// 初始化用户信息
|
||||
let user_info = {
|
||||
mail_addr: "zhaoyingbo@live.cn",
|
||||
openid: "123456"
|
||||
};
|
||||
this.setUserInfo([user_info, this]);
|
||||
console.log("用户信息覆写完成");
|
||||
}
|
||||
console.log("用户信息初始化完成");
|
||||
},
|
||||
|
||||
// 一键回顶
|
||||
scrollTop() {
|
||||
this.$refs.list_placeholder.parentNode.parentNode.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth"
|
||||
});
|
||||
console.log("一键回顶成功");
|
||||
},
|
||||
|
||||
// 调用snackBar
|
||||
message(msg) {
|
||||
this.snakebar_msg = msg;
|
||||
this.show_snackbar = true;
|
||||
},
|
||||
// 获取言论表
|
||||
getList() {
|
||||
if (Object.keys(this.user_info).length == 0) {
|
||||
console.log("管理员信息校验失败");
|
||||
this.message("请先登录");
|
||||
return;
|
||||
}
|
||||
this.loading_switch = true;
|
||||
let data = {
|
||||
openid: this.user_info.openid
|
||||
};
|
||||
console.log(`上传信息准备完成`);
|
||||
console.log(data)
|
||||
api
|
||||
.post("/comment/get", data)
|
||||
.then(res => {
|
||||
this.show_list = res.data.comment_list.reverse();
|
||||
console.log("请求成功,列表覆写成功");
|
||||
this.loading_switch = false;
|
||||
this.message("刷新成功");
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
this.loading_switch = false;
|
||||
if (err.response && err.response.status != 500) {
|
||||
this.message(`${err.response.status}: ${err.response.data}`);
|
||||
} else {
|
||||
this.message("网络错误,请稍候重试");
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除某言论
|
||||
delComment() {
|
||||
this.loading_switch = true;
|
||||
let data = {
|
||||
openid: this.user_info.openid,
|
||||
lafid: this.item_cache.position.lafid,
|
||||
is_comment: this.item_cache.position.is_comment,
|
||||
commentid: this.item_cache.position.commentid,
|
||||
replyid: this.item_cache.content.id ? this.item_cache.content.id : ''
|
||||
};
|
||||
console.log(`删除信息准备完成`);
|
||||
console.log(data)
|
||||
api
|
||||
.delete("/comment/del", { data })
|
||||
.then(res => {
|
||||
this.loading_switch = false;
|
||||
this.item_cache = null;
|
||||
this.message("删除成功");
|
||||
this.getList()
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
this.loading_switch = false;
|
||||
if (err.response && err.response.status != 500) {
|
||||
this.message(`${err.response.status}: ${err.response.data}`);
|
||||
} else {
|
||||
this.message("网络错误,请稍候重试");
|
||||
}
|
||||
this.item_cache = null;
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
mounted() {
|
||||
// 获取浏览器可视区域高度
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
//document.body.clientWidth;
|
||||
window.onresize = function temp() {
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
setHtmlFontSize();
|
||||
}.bind(this);
|
||||
this.$refs.list_placeholder.parentNode.parentNode.addEventListener(
|
||||
"scroll",
|
||||
this.scroll
|
||||
);
|
||||
},
|
||||
watch: {
|
||||
// 如果 `clientHeight` 发生改变,这个函数就会运行
|
||||
clientHeight: function() {
|
||||
this.changeFixed(this.clientHeight);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" type="text/scss">
|
||||
@import "../../style/main";
|
||||
.comment {
|
||||
width: 100%;
|
||||
// max-width: 500px;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
// margin: 0 auto;
|
||||
.drawer-banner {
|
||||
padding: 1rem 0.3rem 0.3rem 0.3rem;
|
||||
box-sizing: border-box;
|
||||
background: $main-color;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
.default-avatar {
|
||||
color: #fff;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.md-caption {
|
||||
color: #fbfbfb;
|
||||
}
|
||||
}
|
||||
.md-toolbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
.md-toolbar-row {
|
||||
order: 12;
|
||||
// margin-bottom: .3rem !important;
|
||||
}
|
||||
.md-toolbar-section-start,
|
||||
.md-toolbar-section-end,
|
||||
.md-toolbar-row {
|
||||
min-height: 56px;
|
||||
}
|
||||
.md-toolbar-row {
|
||||
margin-top: -10px;
|
||||
}
|
||||
.md-speed-dial.md-bottom-right {
|
||||
position: fixed !important;
|
||||
}
|
||||
}
|
||||
// Demo purposes only
|
||||
.md-drawer {
|
||||
width: 240px;
|
||||
max-width: calc(100vw - 125px);
|
||||
}
|
||||
.md-app-scroller > div {
|
||||
overflow-y: scroll !important;
|
||||
}
|
||||
.face {
|
||||
color: #fff !important;
|
||||
}
|
||||
.page-title {
|
||||
flex: 1;
|
||||
min-height: 56px;
|
||||
line-height: 56px;
|
||||
}
|
||||
.sroll-top-area {
|
||||
flex: 1;
|
||||
min-height: 56px;
|
||||
}
|
||||
.md-bottom-bar.md-type-fixed .md-bottom-bar-item {
|
||||
max-width: 1000px !important;
|
||||
}
|
||||
.md-app-content .md-card {
|
||||
margin: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.md-app-content .md-card .md-card-content {
|
||||
.md-button {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
</style>
|
267
src/views/Home/Home.vue
Normal file
@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<div class="home" ref="home">
|
||||
<md-app md-waterfall md-mode="fixed">
|
||||
<md-app-toolbar class="md-primary">
|
||||
<div class="md-toolbar-section-start">
|
||||
<md-button class="md-icon-button" @click="drawer_switch = !drawer_switch">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
<span class="md-title page-title" @click="scrollTop()">曳光 控制台</span>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<div class="sroll-top-area" @click="scrollTop()"></div>
|
||||
<md-button class="md-icon-button" @click="refresh" v-if="refresh_switch">
|
||||
<md-icon>refresh</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-app-toolbar>
|
||||
|
||||
<md-app-content>
|
||||
<v-touch @swiperight="drawer_switch = true" :swipe-options="{ direction: 'horizontal' }">
|
||||
<div ref="list_placeholder" :style="`height:40px`"></div>
|
||||
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
|
||||
<span>{{ snakebar_msg }}</span>
|
||||
</md-snackbar>
|
||||
<div :style="`height:40px`"></div>
|
||||
</v-touch>
|
||||
|
||||
</md-app-content>
|
||||
|
||||
</md-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
import { setHtmlFontSize } from "@/utils/px2rem.js";
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
data() {
|
||||
return {
|
||||
// 显示抽屉开关
|
||||
drawer_switch: false,
|
||||
// 显示高度,控制md-app的最小高度,防止抽屉高度塌陷
|
||||
clientHeight: "",
|
||||
// 内容高度,取出顶部和底部的高度
|
||||
content_height: "",
|
||||
// 显示的密码列表
|
||||
show_list: [],
|
||||
// snackbar控制
|
||||
show_snackbar: false,
|
||||
snakebar_msg: "",
|
||||
// vcnsole模块
|
||||
lastClickTime: 0,
|
||||
count: 0,
|
||||
// 滚动记录
|
||||
scrollHeight: 0,
|
||||
// 刷新控制
|
||||
refresh_switch: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user_info", "settings",])
|
||||
},
|
||||
methods: {
|
||||
...mapActions([
|
||||
"setUserInfo",
|
||||
"setSettings",
|
||||
]),
|
||||
|
||||
// 修改md-app的最小高度
|
||||
changeFixed(clientHeight) {
|
||||
//动态修改样式
|
||||
this.$refs.home.children[0].style.minHeight = clientHeight + "px";
|
||||
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight =
|
||||
clientHeight + "px";
|
||||
this.$refs.list_placeholder.parentNode.style.minHeight =
|
||||
clientHeight - 32 + "px";
|
||||
this.content_height = clientHeight - 32 - 80 + "px";
|
||||
window.document.documentElement.setAttribute(
|
||||
"data-theme",
|
||||
this.settings.is_dark_mode ? "dark" : "light"
|
||||
);
|
||||
},
|
||||
|
||||
// 初始化
|
||||
init() {
|
||||
// 刷新vuex
|
||||
this.$store.replaceState(
|
||||
Object.assign(
|
||||
this.$store.state,
|
||||
JSON.parse(localStorage.getItem("storeState"))
|
||||
)
|
||||
);
|
||||
this.initUserInfo()
|
||||
},
|
||||
|
||||
// 初始化用户信息
|
||||
initUserInfo() {
|
||||
if (Object.keys(this.user_info).length == 0) {
|
||||
// 初始化用户信息
|
||||
let user_info = {
|
||||
mail_addr: 'zhaoyingbo@live.cn',
|
||||
openid: '123456'
|
||||
};
|
||||
this.setUserInfo([user_info, this]);
|
||||
console.log('用户信息覆写完成');
|
||||
}
|
||||
console.log('用户信息初始化完成');
|
||||
},
|
||||
|
||||
// 一键回顶
|
||||
scrollTop() {
|
||||
this.$refs.list_placeholder.parentNode.parentNode.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth"
|
||||
});
|
||||
console.log("一键回顶成功");
|
||||
},
|
||||
|
||||
// 刷新子组件
|
||||
refresh() {
|
||||
this.$refs.router_view.refresh()
|
||||
},
|
||||
// 子组件调用snackBar
|
||||
message(msg) {
|
||||
this.snakebar_msg = msg
|
||||
this.show_snackbar = true
|
||||
},
|
||||
// 判断是否有class
|
||||
hasClass(obj, cls) {
|
||||
return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
|
||||
},
|
||||
// 增加class
|
||||
addClass(obj, cls) {
|
||||
if (!this.hasClass(obj, cls)) obj.className += " " + cls;
|
||||
},
|
||||
// 改变class
|
||||
toggleClass(obj, cls) {
|
||||
if (this.hasClass(obj, cls)) {
|
||||
this.removeClass(obj, cls);
|
||||
} else {
|
||||
this.addClass(obj, cls);
|
||||
}
|
||||
},
|
||||
// 移除class
|
||||
removeClass(obj, cls) {
|
||||
if (this.hasClass(obj, cls)) {
|
||||
var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
|
||||
obj.className = obj.className.replace(reg, " ");
|
||||
}
|
||||
},
|
||||
// 点击处理vconsole
|
||||
toggleVc() {
|
||||
const nowTime = new Date().getTime();
|
||||
if (nowTime - this.lastClickTime < 3000) {
|
||||
this.count++;
|
||||
} else {
|
||||
this.count = 0;
|
||||
}
|
||||
this.lastClickTime = nowTime;
|
||||
if (this.count >= 10) {
|
||||
let vconDom = document.getElementById("__vconsole");
|
||||
this.toggleClass(vconDom, "vconsole-show");
|
||||
this.count = 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
mounted() {
|
||||
// 获取浏览器可视区域高度
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
//document.body.clientWidth;
|
||||
window.onresize = function temp() {
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
setHtmlFontSize();
|
||||
}.bind(this);
|
||||
this.$refs.list_placeholder.parentNode.parentNode.addEventListener(
|
||||
"scroll",
|
||||
this.scroll
|
||||
);
|
||||
},
|
||||
watch: {
|
||||
// 如果 `clientHeight` 发生改变,这个函数就会运行
|
||||
clientHeight: function() {
|
||||
this.changeFixed(this.clientHeight);
|
||||
},
|
||||
$route: function() {
|
||||
let path = this.$router.history.current.path
|
||||
this.refresh_switch = path == '/home/clear' ? false : true
|
||||
console.log(`当前路由:${path}, 刷新按钮状态:${this.refresh_switch}`)
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" type="text/scss">
|
||||
@import "../../style/main";
|
||||
.home {
|
||||
width: 100%;
|
||||
// max-width: 500px;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
// margin: 0 auto;
|
||||
.drawer-banner {
|
||||
padding: 1rem 0.3rem 0.3rem 0.3rem;
|
||||
box-sizing: border-box;
|
||||
background: $main-color;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
.default-avatar {
|
||||
color: #fff;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.md-caption {
|
||||
color: #fbfbfb;
|
||||
}
|
||||
}
|
||||
.md-toolbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
.md-toolbar-row {
|
||||
order: 12;
|
||||
// margin-bottom: .3rem !important;
|
||||
}
|
||||
.md-toolbar-section-start,
|
||||
.md-toolbar-section-end,
|
||||
.md-toolbar-row {
|
||||
min-height: 56px;
|
||||
}
|
||||
.md-toolbar-row {
|
||||
margin-top: -10px;
|
||||
}
|
||||
.md-speed-dial.md-bottom-right {
|
||||
position: fixed !important;
|
||||
}
|
||||
}
|
||||
// Demo purposes only
|
||||
.md-drawer {
|
||||
width: 240px;
|
||||
max-width: calc(100vw - 125px);
|
||||
}
|
||||
.md-app-scroller > div {
|
||||
overflow-y: scroll !important;
|
||||
}
|
||||
.face {
|
||||
color: #fff !important;
|
||||
}
|
||||
.page-title {
|
||||
flex: 1;
|
||||
min-height: 56px;
|
||||
line-height: 56px;
|
||||
}
|
||||
.sroll-top-area {
|
||||
flex: 1;
|
||||
min-height: 56px;
|
||||
}
|
||||
.md-bottom-bar.md-type-fixed .md-bottom-bar-item {
|
||||
max-width: 1000px !important;
|
||||
}
|
||||
</style>
|
237
src/views/Home/cache.vue
Normal file
@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div class="home" ref="home">
|
||||
<md-app md-waterfall md-mode="fixed">
|
||||
<md-app-toolbar class="md-primary">
|
||||
<div class="md-toolbar-section-start">
|
||||
<span class="md-title page-title" @click="scrollTop()">曳光 控制台</span>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<div class="sroll-top-area" @click="scrollTop()"></div>
|
||||
</div>
|
||||
|
||||
</md-app-toolbar>
|
||||
<md-app-content>
|
||||
<div ref="list_placeholder" :style="`height:40px`"></div>
|
||||
<md-progress-bar v-if="loading_switch" md-mode="indeterminate" style="position: absolute; top: 56px; left: 0; width: 100%;"></md-progress-bar>
|
||||
<md-field style="margin-top: 30px;">
|
||||
<label>失物招领id</label>
|
||||
<md-input v-model="id" placeholder="输入在地址栏找到的失物招领id" type="number" maxlength="17"></md-input>
|
||||
</md-field>
|
||||
<md-speed-dial class="md-bottom-right" style="margin-bottom: 60px;">
|
||||
<md-speed-dial-target class="md-primary" @click="clear" v-if="!loading_switch">
|
||||
<md-icon>delete</md-icon>
|
||||
</md-speed-dial-target>
|
||||
</md-speed-dial>
|
||||
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
|
||||
<span>{{ snakebar_msg }}</span>
|
||||
</md-snackbar>
|
||||
<div :style="`height:40px`"></div>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
import { setHtmlFontSize } from "@/utils/px2rem.js";
|
||||
import { api } from "@/axios/fetch.js";
|
||||
export default {
|
||||
name: "Clear",
|
||||
data() {
|
||||
return {
|
||||
// 显示高度,控制md-app的最小高度,防止抽屉高度塌陷
|
||||
clientHeight: "",
|
||||
// 显示的密码列表
|
||||
show_list: [],
|
||||
// snackbar控制
|
||||
show_snackbar: false,
|
||||
snakebar_msg: "",
|
||||
// 输入的失物招领id
|
||||
id: "",
|
||||
// 加载控制
|
||||
loading_switch: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user_info", "settings"])
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["setUserInfo", "setSettings"]),
|
||||
|
||||
// 修改md-app的最小高度
|
||||
changeFixed(clientHeight) {
|
||||
//动态修改样式
|
||||
this.$refs.home.children[0].style.minHeight = clientHeight + "px";
|
||||
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight =
|
||||
clientHeight + "px";
|
||||
this.$refs.list_placeholder.parentNode.style.minHeight =
|
||||
clientHeight - 32 + "px";
|
||||
window.document.documentElement.setAttribute(
|
||||
"data-theme",
|
||||
this.settings.is_dark_mode ? "dark" : "light"
|
||||
);
|
||||
},
|
||||
|
||||
// 初始化
|
||||
init() {
|
||||
// 刷新vuex
|
||||
this.$store.replaceState(
|
||||
Object.assign(
|
||||
this.$store.state,
|
||||
JSON.parse(localStorage.getItem("storeState"))
|
||||
)
|
||||
);
|
||||
this.initUserInfo();
|
||||
},
|
||||
|
||||
// 初始化用户信息
|
||||
initUserInfo() {
|
||||
if (Object.keys(this.user_info).length == 0) {
|
||||
// 初始化用户信息
|
||||
let user_info = {
|
||||
mail_addr: "zhaoyingbo@live.cn",
|
||||
openid: "123456"
|
||||
};
|
||||
this.setUserInfo([user_info, this]);
|
||||
console.log("用户信息覆写完成");
|
||||
}
|
||||
console.log("用户信息初始化完成");
|
||||
},
|
||||
// 用户点击清除
|
||||
clear() {
|
||||
// 管理员校验
|
||||
if (Object.keys(this.user_info).length == 0) {
|
||||
console.log("管理员信息校验失败");
|
||||
this.message("请先登录");
|
||||
return;
|
||||
}
|
||||
this.id = this.id.trim();
|
||||
// 格式校验
|
||||
if (!/\d{17}/.test(this.id)) {
|
||||
console.log("数据格式校验失败");
|
||||
this.message("请输入正确的id");
|
||||
return;
|
||||
}
|
||||
this.loading_switch = true;
|
||||
let data = {
|
||||
openid: this.user_info.openid,
|
||||
id: this.id
|
||||
};
|
||||
console.log(data);
|
||||
api
|
||||
.delete("/laf/close", { data })
|
||||
.then(res => {
|
||||
this.message("清除成功");
|
||||
this.loading_switch = false;
|
||||
this.id = "";
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
this.loading_switch = false;
|
||||
if (err.response && err.response.status != 500) {
|
||||
this.message(`${err.response.status}: ${err.response.data}`);
|
||||
} else {
|
||||
this.message("网络错误,请稍候重试");
|
||||
}
|
||||
});
|
||||
},
|
||||
// 调用snackBar
|
||||
message(msg) {
|
||||
this.snakebar_msg = msg;
|
||||
this.show_snackbar = true;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
mounted() {
|
||||
// 获取浏览器可视区域高度
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
//document.body.clientWidth;
|
||||
window.onresize = function temp() {
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
setHtmlFontSize();
|
||||
}.bind(this);
|
||||
this.$refs.list_placeholder.parentNode.parentNode.addEventListener(
|
||||
"scroll",
|
||||
this.scroll
|
||||
);
|
||||
},
|
||||
watch: {
|
||||
// 如果 `clientHeight` 发生改变,这个函数就会运行
|
||||
clientHeight: function() {
|
||||
this.changeFixed(this.clientHeight);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" type="text/scss">
|
||||
@import "../../style/main";
|
||||
.home {
|
||||
width: 100%;
|
||||
// max-width: 500px;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
// margin: 0 auto;
|
||||
.drawer-banner {
|
||||
padding: 1rem 0.3rem 0.3rem 0.3rem;
|
||||
box-sizing: border-box;
|
||||
background: $main-color;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
.default-avatar {
|
||||
color: #fff;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.md-caption {
|
||||
color: #fbfbfb;
|
||||
}
|
||||
}
|
||||
.md-toolbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
.md-toolbar-row {
|
||||
order: 12;
|
||||
// margin-bottom: .3rem !important;
|
||||
}
|
||||
.md-toolbar-section-start,
|
||||
.md-toolbar-section-end,
|
||||
.md-toolbar-row {
|
||||
min-height: 56px;
|
||||
}
|
||||
.md-toolbar-row {
|
||||
margin-top: -10px;
|
||||
}
|
||||
.md-speed-dial.md-bottom-right {
|
||||
position: fixed !important;
|
||||
}
|
||||
}
|
||||
// Demo purposes only
|
||||
.md-drawer {
|
||||
width: 240px;
|
||||
max-width: calc(100vw - 125px);
|
||||
}
|
||||
.md-app-scroller > div {
|
||||
overflow-y: scroll !important;
|
||||
}
|
||||
.face {
|
||||
color: #fff !important;
|
||||
}
|
||||
.page-title {
|
||||
flex: 1;
|
||||
min-height: 56px;
|
||||
line-height: 56px;
|
||||
}
|
||||
.sroll-top-area {
|
||||
flex: 1;
|
||||
min-height: 56px;
|
||||
}
|
||||
.md-bottom-bar.md-type-fixed .md-bottom-bar-item {
|
||||
max-width: 1000px !important;
|
||||
}
|
||||
</style>
|
431
src/views/Settings/Settings.vue
Normal file
@ -0,0 +1,431 @@
|
||||
<template>
|
||||
<div class="account">
|
||||
<md-app md-waterfall md-mode="fixed">
|
||||
<md-app-toolbar class="md-primary toolbar">
|
||||
<div class="md-toolbar-section-start">
|
||||
<md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
|
||||
<h3 class="md-title" style="flex: 1">{{ lang.title }}</h3>
|
||||
</div>
|
||||
</md-app-toolbar>
|
||||
|
||||
<md-app-content>
|
||||
<v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
|
||||
<div ref="list_placeholder" style="height: 54px;"></div>
|
||||
<md-list>
|
||||
<md-subheader class="md-primary">{{ lang.subheader[0] }}</md-subheader>
|
||||
<md-list-item @click="openResetDialog('account')">
|
||||
<md-icon>person</md-icon>
|
||||
<span class="md-list-item-text">{{ lang.reset_list[0] }}</span>
|
||||
<md-progress-spinner v-if="account_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item @click="openResetDialog('codebook')">
|
||||
<md-icon>format_align_left</md-icon>
|
||||
<span class="md-list-item-text">{{ lang.reset_list[1] }}</span>
|
||||
<md-progress-spinner v-if="codebook_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item @click="openResetDialog('application')">
|
||||
<md-icon>layers</md-icon>
|
||||
<span class="md-list-item-text">{{ lang.reset_list[2] }}</span>
|
||||
<md-progress-spinner v-if="application_loading" :md-diameter="22" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item @click="open_dialog">
|
||||
<md-icon>vpn_key</md-icon>
|
||||
<span class="md-list-item-text">{{ lang.reset_list[3] }}</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-subheader class="md-primary">{{ lang.subheader[1] }}</md-subheader>
|
||||
<md-list-item>
|
||||
<md-icon>format_color_text</md-icon>
|
||||
<span class="md-list-item-text">{{ lang.option_list[0] }}</span>
|
||||
<md-switch v-model="is_chinese" class="md-primary"></md-switch>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<md-icon>brightness_6</md-icon>
|
||||
<span class="md-list-item-text">{{ lang.option_list[1] }}</span>
|
||||
<md-switch v-model="is_dark_mode" class="md-primary"></md-switch>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>update</md-icon>
|
||||
<md-field>
|
||||
<label for="expired_time">{{ lang.option_list[2] }}</label>
|
||||
<md-select v-model="expired_time" name="expired_time" id="expired_time">
|
||||
<md-option value="300000">5 min</md-option>
|
||||
<md-option value="600000">10 min</md-option>
|
||||
<md-option value="900000">15 min</md-option>
|
||||
<md-option :value="Number.MAX_SAFE_INTEGER">{{ lang.expired_time }}</md-option>
|
||||
</md-select>
|
||||
</md-field>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
|
||||
<md-dialog-prompt
|
||||
:md-active.sync="reset_main_pwd_active"
|
||||
v-model="new_main_pwd"
|
||||
:md-title="lang.dialog.title"
|
||||
md-input-maxlength="30"
|
||||
:md-input-placeholder="lang.dialog.placeholder"
|
||||
:md-confirm-text="lang.dialog.confirm"
|
||||
:md-cancel-text="lang.dialog.cancel"
|
||||
@md-confirm="resetPwd"
|
||||
/>
|
||||
|
||||
<md-dialog-confirm
|
||||
:md-active.sync="reset_confirm"
|
||||
:md-title="lang.reset_dialog.title"
|
||||
:md-content="lang.reset_dialog.content"
|
||||
:md-confirm-text="lang.reset_dialog.confirm"
|
||||
:md-cancel-text="lang.reset_dialog.cancel"
|
||||
@md-cancel="reset_confirm = false"
|
||||
@md-confirm="resetStart"
|
||||
/>
|
||||
|
||||
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
|
||||
<span>{{ snakebar_msg }}</span>
|
||||
</md-snackbar>
|
||||
</v-touch>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from 'vuex';
|
||||
import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
|
||||
import { login, activation, syncLocal, syncCloud } from '@/axios/api.js';
|
||||
import { lang } from '@/utils/language.js';
|
||||
import { setHtmlFontSize } from '@/utils/px2rem.js';
|
||||
|
||||
export default {
|
||||
name: 'Add',
|
||||
data() {
|
||||
return {
|
||||
// 重置loading
|
||||
account_loading: false,
|
||||
codebook_loading: false,
|
||||
application_loading: false,
|
||||
reset_main_pwd_active: false,
|
||||
new_main_pwd: '',
|
||||
reset_active: false,
|
||||
// 设置状态
|
||||
is_chinese: false,
|
||||
is_dark_mode: false,
|
||||
// 过期时间 300000 5分钟
|
||||
expired_time: 300000,
|
||||
// snackbar
|
||||
show_snackbar: false,
|
||||
snakebar_msg: '',
|
||||
// 初始化完成状态
|
||||
has_init: false,
|
||||
lang: '',
|
||||
clientHeight: '',
|
||||
// 重置确认
|
||||
reset_confirm: false,
|
||||
reset_type: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user_infos', 'row_data', 'row_pwd', 'settings'])
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setUserInfo', 'setRowData', 'setRowPwd', 'setSettings']),
|
||||
|
||||
// 修改md-app的最小高度
|
||||
changeFixed(clientHeight) {
|
||||
//动态修改样式
|
||||
// console.log(clientHeight);
|
||||
// window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
|
||||
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight = clientHeight + 'px';
|
||||
this.$refs.list_placeholder.parentNode.style.minHeight = clientHeight - 32 + 'px';
|
||||
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
|
||||
},
|
||||
// 初始化
|
||||
init() {
|
||||
// 刷新vuex
|
||||
this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
|
||||
// 判断有无用户密码
|
||||
if (Object.keys(this.row_pwd).length != 0) {
|
||||
// 有密码,已经输入过了
|
||||
let now = new Date().getTime();
|
||||
if (now - this.row_pwd.create_time < this.settings.expired_time) {
|
||||
// 上次写入时间距离现在在(默认五分钟)之内
|
||||
// 初始化本页信息
|
||||
this.is_chinese = this.settings.is_chinese;
|
||||
this.is_dark_mode = this.settings.is_dark_mode;
|
||||
this.expired_time = this.settings.expired_time;
|
||||
this.initLanguage();
|
||||
// 设置flag
|
||||
setTimeout(
|
||||
function() {
|
||||
this.has_init = true;
|
||||
console.log('本页信息覆写完成');
|
||||
}.bind(this),
|
||||
10
|
||||
);
|
||||
} else {
|
||||
// 密码超时
|
||||
this.turnToHome('密码超时');
|
||||
}
|
||||
} else {
|
||||
// 没有密码
|
||||
this.turnToHome('无密码');
|
||||
}
|
||||
},
|
||||
|
||||
// 配置语言
|
||||
initLanguage() {
|
||||
if (this.settings.is_chinese) {
|
||||
this.lang = lang().settings.CHS;
|
||||
} else {
|
||||
this.lang = lang().settings.EN;
|
||||
}
|
||||
console.log('语言配置完成');
|
||||
},
|
||||
|
||||
//返回上一页
|
||||
back() {
|
||||
// 重置处理拦截器
|
||||
if (this.reset_active) {
|
||||
return;
|
||||
}
|
||||
this.$router.go(-1);
|
||||
},
|
||||
|
||||
// 强制返回Home
|
||||
turnToHome(msg) {
|
||||
console.log(msg);
|
||||
this.$router.replace('/');
|
||||
},
|
||||
|
||||
// 重置账户
|
||||
resetAccount(need_loading = true) {
|
||||
this.reset_active = true;
|
||||
if (need_loading) {
|
||||
this.account_loading = true;
|
||||
setTimeout(
|
||||
function() {
|
||||
this.account_loading = false;
|
||||
this.snakebar_msg = this.lang.snakebar_msg.reset_account;
|
||||
this.show_snackbar = true;
|
||||
}.bind(this),
|
||||
1000
|
||||
);
|
||||
}
|
||||
// 初始化用户信息
|
||||
let user_infos = {
|
||||
mail_addr: 'A Little Canary',
|
||||
has_login: false,
|
||||
activation: false,
|
||||
update_time: '1582282494434'
|
||||
};
|
||||
this.setUserInfo([user_infos, this]);
|
||||
console.log('用户信息覆写完成');
|
||||
this.reset_active = false;
|
||||
},
|
||||
|
||||
// 重置密码本
|
||||
resetCodebook(need_loading = true) {
|
||||
this.reset_active = true;
|
||||
if (need_loading) {
|
||||
this.codebook_loading = true;
|
||||
setTimeout(
|
||||
function() {
|
||||
this.codebook_loading = false;
|
||||
this.snakebar_msg = this.lang.snakebar_msg.reset_codebook;
|
||||
this.show_snackbar = true;
|
||||
}.bind(this),
|
||||
1000
|
||||
);
|
||||
}
|
||||
this.setRowData(['', this]);
|
||||
console.log('密码本覆写完成');
|
||||
this.reset_active = false;
|
||||
},
|
||||
|
||||
// 重置整个项目
|
||||
resetApplication() {
|
||||
this.application_loading = true;
|
||||
this.reset_active = true;
|
||||
this.resetAccount(false);
|
||||
this.resetCodebook(false);
|
||||
this.setRowPwd(['', this]);
|
||||
console.log('主密码覆写完成');
|
||||
let settings = {
|
||||
is_chinese: true,
|
||||
is_dark_mode: false,
|
||||
expired_time: 300000
|
||||
};
|
||||
this.setSettings([settings, this]);
|
||||
console.log('个性化设置覆写完成');
|
||||
this.reset_active = false;
|
||||
this.application_loading = false;
|
||||
this.turnToHome('项目重置完成');
|
||||
},
|
||||
|
||||
//覆写个性化设置
|
||||
resetSettings() {
|
||||
let settings = {
|
||||
is_chinese: this.is_chinese,
|
||||
is_dark_mode: this.is_dark_mode,
|
||||
expired_time: this.expired_time
|
||||
};
|
||||
this.setSettings([settings, this]);
|
||||
console.log('个性化设置覆写完成');
|
||||
if (this.settings.is_chinese) {
|
||||
this.lang = lang().settings.CHS;
|
||||
} else {
|
||||
this.lang = lang().settings.EN;
|
||||
}
|
||||
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
|
||||
console.log('语言配置完成');
|
||||
this.snakebar_msg = this.lang.snakebar_msg.reset_settings;
|
||||
this.show_snackbar = true;
|
||||
},
|
||||
|
||||
open_dialog() {
|
||||
this.reset_main_pwd_active = true;
|
||||
},
|
||||
|
||||
resetPwd(new_main_pwd) {
|
||||
// 空内容拦截器
|
||||
if (!new_main_pwd.trim()) {
|
||||
this.snakebar_msg = this.lang.snakebar_msg.reset_pwd_failed;
|
||||
this.show_snackbar = true;
|
||||
}
|
||||
// 判断有无密码本
|
||||
if (this.row_data) {
|
||||
// 解密主密码
|
||||
let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
|
||||
let data_decrypt;
|
||||
// 解密密码本
|
||||
try {
|
||||
data_decrypt = decrypt(main_code_decrpt, this.row_data);
|
||||
} catch (e) {
|
||||
// 不正确
|
||||
// 跳转到解锁界面
|
||||
console.log(e);
|
||||
this.turnToHome('密码错误');
|
||||
return;
|
||||
}
|
||||
let data_list = JSON.parse(data_decrypt);
|
||||
let data_list_aes = encrypt(new_main_pwd, data_list);
|
||||
this.setRowData([data_list_aes, this]);
|
||||
console.log('密码本密码修改成功,覆写完成')
|
||||
}
|
||||
let main_code_aes = encryptMainCode(new_main_pwd);
|
||||
let row_pwd = {
|
||||
main_code: main_code_aes,
|
||||
create_time: new Date().getTime()
|
||||
};
|
||||
this.setRowPwd([row_pwd, this]);
|
||||
this.snakebar_msg = this.lang.snakebar_msg.reset_pwd_successful;
|
||||
this.show_snackbar = true;
|
||||
},
|
||||
|
||||
// 打开重置的警告提醒
|
||||
openResetDialog(type) {
|
||||
this.reset_confirm = true;
|
||||
this.reset_type = type
|
||||
},
|
||||
|
||||
// 提醒完成点击确定
|
||||
resetStart() {
|
||||
console.log('用户点击继续,重置开始')
|
||||
switch(this.reset_type) {
|
||||
case 'account':
|
||||
this.resetAccount();
|
||||
break
|
||||
case 'codebook':
|
||||
this.resetCodebook();
|
||||
break
|
||||
case 'application':
|
||||
this.resetApplication();
|
||||
break
|
||||
default:
|
||||
return
|
||||
}
|
||||
this.reset_type = ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.lang = lang().settings.CHS;
|
||||
console.log('临时语言系统加载完成');
|
||||
this.init();
|
||||
},
|
||||
mounted() {
|
||||
// 获取浏览器可视区域高度
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
//document.body.clientWidth;
|
||||
window.onresize = function temp() {
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
setHtmlFontSize();
|
||||
}.bind(this);
|
||||
},
|
||||
watch: {
|
||||
// 如果 `clientHeight` 发生改变,这个函数就会运行
|
||||
clientHeight: function() {
|
||||
this.changeFixed(this.clientHeight);
|
||||
},
|
||||
// 如果 `is_chinese` 发生改变,就会执行设置函数
|
||||
is_chinese: function() {
|
||||
if (this.has_init) this.resetSettings();
|
||||
},
|
||||
// 如果 `is_dark_mode` 发生改变,就会执行设置函数
|
||||
is_dark_mode: function() {
|
||||
if (this.has_init) this.resetSettings();
|
||||
},
|
||||
// 如果 `expired_time` 发生改变,就会执行设置函数
|
||||
expired_time: function() {
|
||||
if (this.has_init) this.resetSettings();
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" type="text/scss">
|
||||
@import '../../style/main';
|
||||
.account {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
.expand {
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
min-height: 1.2rem !important;
|
||||
margin-top: 0.5rem !important;
|
||||
}
|
||||
.time-content {
|
||||
text-align: right !important;
|
||||
}
|
||||
.loading-box {
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
top: 50%;
|
||||
margin-right: -11px;
|
||||
margin-top: -11px;
|
||||
}
|
||||
.toolbar {
|
||||
position: fixed !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
本页计划内容
|
||||
|
||||
重置账户
|
||||
重置密码本
|
||||
重置应用
|
||||
修改密码本解密密码
|
||||
-----------
|
||||
设置语言
|
||||
设置过期时间
|
||||
黑暗模式(再议
|
||||
-->
|
232
src/views/Verify/verify.vue
Normal file
@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<div class="clear" ref="clear">
|
||||
<md-app md-waterfall md-mode="fixed">
|
||||
<md-app-toolbar class="md-primary">
|
||||
<div class="md-toolbar-section-start">
|
||||
<span class="md-title page-title">曳光 控制台</span>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<div class="sroll-top-area"></div>
|
||||
<md-button class="md-icon-button" @click="getVerify">
|
||||
<md-icon>refresh</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-app-toolbar>
|
||||
<md-app-content>
|
||||
<div ref="list_placeholder" :style="`height:40px`"></div>
|
||||
<md-progress-bar v-if="loading_switch" md-mode="indeterminate" style="position: absolute; top: 56px; left: 0; width: 100%;"></md-progress-bar>
|
||||
<!-- 空内容 -->
|
||||
<md-empty-state
|
||||
v-if="!verify_content"
|
||||
class="md-primary"
|
||||
md-icon="done"
|
||||
md-label="暂无内容"
|
||||
md-description="恭喜你,当前暂时没有需要审核的内容,或许你可以刷新一下"
|
||||
></md-empty-state>
|
||||
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
|
||||
<span>{{ snakebar_msg }}</span>
|
||||
</md-snackbar>
|
||||
<div :style="`height:40px`"></div>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
import { setHtmlFontSize } from "@/utils/px2rem.js";
|
||||
import { api } from "@/axios/fetch.js";
|
||||
export default {
|
||||
name: "clear",
|
||||
data() {
|
||||
return {
|
||||
// 显示高度,控制md-app的最小高度,防止抽屉高度塌陷
|
||||
clientHeight: "",
|
||||
// 待审核
|
||||
verify_content: null,
|
||||
// snackbar控制
|
||||
show_snackbar: false,
|
||||
snakebar_msg: "",
|
||||
// 加载控制
|
||||
loading_switch: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user_info", "settings"])
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["setUserInfo", "setSettings"]),
|
||||
|
||||
// 修改md-app的最小高度
|
||||
changeFixed(clientHeight) {
|
||||
//动态修改样式
|
||||
this.$refs.clear.children[0].style.minHeight = clientHeight + "px";
|
||||
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight =
|
||||
clientHeight + "px";
|
||||
this.$refs.list_placeholder.parentNode.style.minHeight =
|
||||
clientHeight - 32 + "px";
|
||||
window.document.documentElement.setAttribute(
|
||||
"data-theme",
|
||||
this.settings.is_dark_mode ? "dark" : "light"
|
||||
);
|
||||
},
|
||||
|
||||
// 初始化
|
||||
init() {
|
||||
// 刷新vuex
|
||||
this.$store.replaceState(
|
||||
Object.assign(
|
||||
this.$store.state,
|
||||
JSON.parse(localStorage.getItem("storeState"))
|
||||
)
|
||||
);
|
||||
this.initUserInfo();
|
||||
// 获取失物招领信息
|
||||
this.getVerify()
|
||||
},
|
||||
|
||||
// 初始化用户信息
|
||||
initUserInfo() {
|
||||
if (Object.keys(this.user_info).length == 0) {
|
||||
// 初始化用户信息
|
||||
let user_info = {
|
||||
mail_addr: "zhaoyingbo@live.cn",
|
||||
openid: "123456"
|
||||
};
|
||||
this.setUserInfo([user_info, this]);
|
||||
console.log("用户信息覆写完成");
|
||||
}
|
||||
console.log("用户信息初始化完成");
|
||||
},
|
||||
|
||||
// 获取待审核信息
|
||||
getVerify() {
|
||||
if (Object.keys(this.user_info).length == 0) {
|
||||
console.log("管理员信息校验失败");
|
||||
this.message("请先登录");
|
||||
return;
|
||||
}
|
||||
this.loading_switch = true;
|
||||
let data = {
|
||||
openid: this.user_info.openid
|
||||
}
|
||||
console.log(`上传信息准备完成`);
|
||||
console.log(data)
|
||||
api
|
||||
.post("/verify/get", data)
|
||||
.then(res => {
|
||||
this.verify_content = res.data.verify;
|
||||
console.log("请求成功,待审核覆写成功");
|
||||
this.loading_switch = false;
|
||||
this.message("刷新成功");
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
this.loading_switch = false;
|
||||
if (err.response && err.response.status != 500) {
|
||||
this.message(`${err.response.status}: ${err.response.data}`);
|
||||
} else {
|
||||
this.message("网络错误,请稍候重试");
|
||||
}
|
||||
});
|
||||
},
|
||||
// 调用snackBar
|
||||
message(msg) {
|
||||
this.snakebar_msg = msg;
|
||||
this.show_snackbar = true;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
mounted() {
|
||||
// 获取浏览器可视区域高度
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
//document.body.clientWidth;
|
||||
window.onresize = function temp() {
|
||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||
setHtmlFontSize();
|
||||
}.bind(this);
|
||||
this.$refs.list_placeholder.parentNode.parentNode.addEventListener(
|
||||
"scroll",
|
||||
this.scroll
|
||||
);
|
||||
},
|
||||
watch: {
|
||||
// 如果 `clientHeight` 发生改变,这个函数就会运行
|
||||
clientHeight: function() {
|
||||
this.changeFixed(this.clientHeight);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" type="text/scss">
|
||||
@import "../../style/main";
|
||||
.clear {
|
||||
width: 100%;
|
||||
// max-width: 500px;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
// margin: 0 auto;
|
||||
.drawer-banner {
|
||||
padding: 1rem 0.3rem 0.3rem 0.3rem;
|
||||
box-sizing: border-box;
|
||||
background: $main-color;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
.default-avatar {
|
||||
color: #fff;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.md-caption {
|
||||
color: #fbfbfb;
|
||||
}
|
||||
}
|
||||
.md-toolbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
.md-toolbar-row {
|
||||
order: 12;
|
||||
// margin-bottom: .3rem !important;
|
||||
}
|
||||
.md-toolbar-section-start,
|
||||
.md-toolbar-section-end,
|
||||
.md-toolbar-row {
|
||||
min-height: 56px;
|
||||
}
|
||||
.md-toolbar-row {
|
||||
margin-top: -10px;
|
||||
}
|
||||
.md-speed-dial.md-bottom-right {
|
||||
position: fixed !important;
|
||||
}
|
||||
}
|
||||
// Demo purposes only
|
||||
.md-drawer {
|
||||
width: 240px;
|
||||
max-width: calc(100vw - 125px);
|
||||
}
|
||||
.md-app-scroller > div {
|
||||
overflow-y: scroll !important;
|
||||
}
|
||||
.face {
|
||||
color: #fff !important;
|
||||
}
|
||||
.page-title {
|
||||
flex: 1;
|
||||
min-height: 56px;
|
||||
line-height: 56px;
|
||||
}
|
||||
.sroll-top-area {
|
||||
flex: 1;
|
||||
min-height: 56px;
|
||||
}
|
||||
.md-bottom-bar.md-type-fixed .md-bottom-bar-item {
|
||||
max-width: 1000px !important;
|
||||
}
|
||||
</style>
|
47
src/views/test.js
Normal file
@ -0,0 +1,47 @@
|
||||
this.show_list = [{
|
||||
open_count: 1,
|
||||
title: 'QQ',
|
||||
user_name: '1144131090',
|
||||
password: 'test',
|
||||
node: '测试用'
|
||||
},
|
||||
{
|
||||
open_count: 2,
|
||||
title: '微信',
|
||||
user_name: '15143211127',
|
||||
password: 'test',
|
||||
node: '测试用'
|
||||
},
|
||||
{
|
||||
open_count: 3,
|
||||
title: 'WIFI',
|
||||
user_name: 'admin',
|
||||
password: 'test',
|
||||
node: '测试用'
|
||||
},
|
||||
{
|
||||
open_count: 4,
|
||||
title: 'WeGame',
|
||||
user_name: '1144131090',
|
||||
password: 'test',
|
||||
node: '测试用'
|
||||
}
|
||||
];
|
||||
|
||||
function test() {
|
||||
//
|
||||
// let main_code = '10aeff'
|
||||
// let data_aes = encrypt(main_code, this.show_list);
|
||||
// if(!this.row_data) this.setRowData([data_aes, this])
|
||||
// let main_code_aes = encryptMainCode(main_code)
|
||||
// if(!this.row_pwd) this.setRowPwd([main_code_aes, this])
|
||||
// let main_code_decrpt = decryptMainCode(main_code_aes)
|
||||
// let data_decrpt = decrypt(main_code_decrpt, data_aes)
|
||||
// console.log(data_aes, main_code_aes, main_code_decrpt,data_decrpt)
|
||||
}
|
||||
|
||||
let test_encode = encrypt('10aeff', '这是一段测试文本');
|
||||
console.log('加密后', test_encode)
|
||||
let test_decode = decrypt('10aefs', test_encode)
|
||||
console.log('解密后', test_decode)
|
||||
console.log('类型', typeof(test_decode)) // 密码错误就是空字符串
|
17
vue.config.js
Normal file
@ -0,0 +1,17 @@
|
||||
module.exports = {
|
||||
productionSourceMap: false,
|
||||
pwa: {
|
||||
name: 'Canary Codebook',
|
||||
themeColor: '#448aff',
|
||||
workboxOptions: {
|
||||
skipWaiting: true
|
||||
},
|
||||
iconPaths: {
|
||||
favicon32: 'favicon.ico',
|
||||
favicon16: 'favicon.ico',
|
||||
appleTouchIcon: 'favicon.ico',
|
||||
maskIcon: 'favicon.ico',
|
||||
msTileImage: 'favicon.ico'
|
||||
}
|
||||
}
|
||||
}
|