├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── api
    │   └── index.js
    ├── assets
    │   ├── css
    │   │   ├── account.css
    │   │   ├── account.less
    │   │   ├── clean.css
    │   │   └── theme.min.css
    │   ├── images
    │   │   ├── empty.png
    │   │   ├── empty1.png
    │   │   └── empty3.png
    │   └── imgs
    │   │   ├── 404.png
    │   │   ├── error.png
    │   │   ├── icon_close.png
    │   │   ├── load.gif
    │   │   ├── loading.gif
    │   │   ├── loading.png
    │   │   ├── logo.jpg
    │   │   └── logo.png
    ├── components
    │   ├── Account.vue
    │   ├── Capacity.vue
    │   ├── Copy.vue
    │   ├── Empty.vue
    │   ├── Forget.vue
    │   ├── Login.vue
    │   ├── Notice.vue
    │   ├── PortraitSelect.vue
    │   ├── Register.vue
    │   ├── UserFloat.vue
    │   ├── WangEnduit.vue
    │   └── index.js
    ├── main.js
    ├── router
    │   ├── index.js
    │   └── routes.js
    ├── store
    │   └── index.js
    ├── utils
    │   ├── index.js
    │   ├── request.js
    │   └── store
    │   │   ├── cookie.js
    │   │   └── localStorage.js
    └── views
    │   ├── error
    │       └── 404
    │       │   └── index.vue
    │   ├── gallery
    │       └── index.vue
    │   ├── home
    │       ├── base-info.vue
    │       ├── home.vue
    │       ├── left-chart.vue
    │       └── right-chart.vue
    │   ├── index
    │       └── index.vue
    │   ├── layout
    │       └── index.vue
    │   ├── setup
    │       ├── admin.vue
    │       ├── home.vue
    │       ├── member.vue
    │       ├── role.vue
    │       └── storage.vue
    │   ├── user
    │       ├── about.vue
    │       ├── update.vue
    │       ├── userInfo.vue
    │       └── userpwd.vue
    │   └── word
    │       ├── delete.vue
    │       ├── index.vue
    │       └── upload.vue
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.*
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | <p><a href="http://picture.h234.cn"><img align="right" width="400" src="http://res.eemu.cn/LightPicture/2022/01/1899c1ba43e06c7d.jpg" alt="LightPicture"/></a></p>
 4 | 
 5 | 
 6 | <h2>LightPicture - 企业/团队图床系统</h2>
 7 | ☁ 本仓库前端vue代码；如需完整系统代码请<a href="https://github.com/osuuu/LightPicture">点此查看</a>
 8 | 
 9 | 
10 | 
11 | ###  安装依赖
12 | ~~~
13 | npm install
14 | ~~~
15 | ###  启动项目
16 | ~~~
17 | npm run serve
18 | ~~~
19 | 
20 | ###  打包项目
21 | ~~~
22 | npm run build
23 | ~~~
24 | 
25 | 
26 | 
27 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ],
5 |   
6 | }
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "admin",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.21.1",
12 |     "core-js": "^2.6.5",
13 |     "crypto-js": "^4.0.0",
14 |     "echarts": "^5.2.2",
15 |     "less": "^3.12.2",
16 |     "less-loader": "^7.1.0",
17 |     "save": "^2.4.0",
18 |     "v-viewer": "^1.6.4",
19 |     "view-design": "^4.5.0-beta.1",
20 |     "vue": "^2.6.10",
21 |     "vue-clipboard2": "^0.3.3",
22 |     "vue-json-viewer": "^2.2.21",
23 |     "vue-lazyload": "^1.3.3",
24 |     "vue-router": "^3.4.9",
25 |     "vue-ueditor-wrap": "^2.4.4",
26 |     "vue-wechat-title": "^2.0.7",
27 |     "vuex": "^3.6.0"
28 |   },
29 |   "devDependencies": {
30 |     "@vue/cli-plugin-babel": "^3.12.0",
31 |     "@vue/cli-plugin-eslint": "^3.12.0",
32 |     "@vue/cli-service": "^3.12.0",
33 |     "babel-eslint": "^10.0.1",
34 |     "eslint": "^5.16.0",
35 |     "eslint-plugin-vue": "^5.0.0",
36 |     "vue-template-compiler": "^2.6.10",
37 |     "vux-loader": "^1.2.9"
38 |   },
39 |   "eslintConfig": {
40 |     "root": true,
41 |     "env": {
42 |       "node": true
43 |     },
44 |     "extends": [
45 |       "plugin:vue/essential",
46 |       "eslint:recommended"
47 |     ],
48 |     "rules": {},
49 |     "parserOptions": {
50 |       "parser": "babel-eslint"
51 |     }
52 |   },
53 |   "postcss": {
54 |     "plugins": {
55 |       "autoprefixer": {}
56 |     }
57 |   },
58 |   "browserslist": [
59 |     "> 1%",
60 |     "last 2 versions"
61 |   ]
62 | }
63 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/osuuu/LightPicture-vue/1aeb04f12d5f160748a7b99b69d410b17cf928cf/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 | 
 8 |   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
 9 |   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
10 |   <title>LightPicture</title>
11 |   <meta name="description" content="高性能、精致、扁平化、多样化储存式的企业化免费图床程序" />
12 |   <meta name="keywords" content="图床程序,图片储存,免费图床,免费相册,免费图床程序,LightPicture" />
13 |   <script>
14 |     (function () {
15 | 
16 |       if (!sessionStorage.length) {
17 |         // 这个调用能触发目标事件，从而达到共享数据的目的
18 |         localStorage.setItem('getSessionStorage', Date.now());
19 |       };
20 | 
21 |       // 该事件是核心
22 |       window.addEventListener('storage', function (event) {
23 |         if (event.key == 'getSessionStorage') {
24 |           // 已存在的标签页会收到这个事件
25 |           localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
26 |           localStorage.removeItem('sessionStorage');
27 | 
28 |         } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
29 |           // 新开启的标签页会收到这个事件
30 |           var data = JSON.parse(event.newValue),
31 |             value;
32 | 
33 |           for (key in data) {
34 |             sessionStorage.setItem(key, data[key]);
35 |           }
36 |         }
37 |       });
38 |     })();
39 |     console.log(
40 |       "%cLightPicture",
41 |       "font-size: 50px;background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat; text-shadow: 5px -5px black, 4px -4px white;  font-weight: bold;  -webkit-text-fill-color: transparent;  -webkit-background-clip: text;"
42 |     );
43 |     console.log(
44 |       "%c%s",
45 |       "color: blue; font-size: 16px;",
46 |       "作者邮箱admin@osuu.net \n\n你可以通过 https://www.osuu.net 了解我们 "
47 |     );
48 |   </script>
49 | </head>
50 | 
51 | <body>
52 |   <noscript>
53 |     <strong>We're sorry but admin doesn't work properly without JavaScript enabled. Please enable it to
54 |       continue.</strong>
55 |   </noscript>
56 |   <div id="app"></div>
57 | 
58 | </body>
59 | 
60 | </html>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view v-wechat-title="$route.meta.title + ' - LightPicture'"></router-view>
 4 |     <Account v-if="isAccount"></Account>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   import {
10 |     mapState,
11 |     mapMutations
12 |   } from "vuex";
13 |   import {
14 |     getUserInfo,
15 |     getIndex
16 |   } from "@/api/index";
17 |   export default {
18 |     name: "app",
19 |     computed: {
20 |       ...mapState(["isAccount"]),
21 |     },
22 |     created() {
23 |       // 在页面加载时读取sessionStorage里的状态信息
24 |       if (sessionStorage.getItem("store")) {
25 |         this.$store.replaceState(
26 |           Object.assign({},
27 |             this.$store.state,
28 |             JSON.parse(sessionStorage.getItem("store"))
29 |           )
30 |         );
31 |       }
32 | 
33 |       // 在页面刷新时将vuex里的信息保存到sessionStorage里
34 |       window.addEventListener("beforeunload", () => {
35 |         sessionStorage.setItem("store", JSON.stringify(this.$store.state));
36 |       });
37 | 
38 |       // 判断设备
39 |       if (document.body.clientWidth < 992) {
40 |         this.$store.state.isMobile = true;
41 |       } else {
42 |         this.$store.state.isMobile = false;
43 |       }
44 |       this.getUser()
45 |     },
46 |     methods: {
47 |       ...mapMutations(["addUserInfo", "addConfig"]),
48 |       getUser() {
49 |         let token = localStorage.getItem('lp_token')
50 |         if (token) {
51 |           getUserInfo().then((res) => {
52 |             this.addUserInfo(res.data)
53 |           });
54 |         }
55 | 
56 |         getIndex().then((res) => {
57 |           this.addConfig(res.data)
58 |         });
59 |       }
60 |     }
61 |   };
62 | </script>
63 | 
64 | <style>
65 |   @import url("//at.alicdn.com/t/font_3014911_g2wefaq6i96.css");
66 | </style>


--------------------------------------------------------------------------------
/src/api/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 前台接口
  3 |  * 2021.04.15
  4 |  */
  5 | 
  6 | import request from '@/utils/request'
  7 | 
  8 | /**
  9 |  * 查询基础配置
 10 |  */
 11 |  export function getIndex() {
 12 |   return request({
 13 |     url: '/index',
 14 |     method: 'get',
 15 |   })
 16 | }
 17 | 
 18 | 
 19 | /**
 20 |  * 登录
 21 |  * @param {array} data 请求数据
 22 |  */
 23 |  export function postLogin(data) {
 24 |   return request({
 25 |     url: '/account/login',
 26 |     method: 'post',
 27 |     data
 28 |   })
 29 | }
 30 | 
 31 | /**
 32 |  * 查询概况
 33 |  */
 34 |  export function getUserHome() {
 35 |   return request({
 36 |     url: '/user/home',
 37 |     method: 'get',
 38 |   })
 39 | }
 40 | 
 41 | /**
 42 |  * 查询存储桶概况数据
 43 |  */
 44 |  export function getHomeStorsge() {
 45 |   return request({
 46 |     url: '/user/storage',
 47 |     method: 'get',
 48 |   })
 49 | }
 50 | 
 51 | /**
 52 |  * 查询动态日志
 53 |  */
 54 |  export function getHomeLog(params) {
 55 |   return request({
 56 |     url: '/user/log',
 57 |     method: 'get',
 58 |     params
 59 |   })
 60 | }
 61 | 
 62 | /**
 63 |  * 查询用户信息
 64 |  */
 65 |  export function getUserInfo() {
 66 |   return request({
 67 |     url: '/user/info',
 68 |     method: 'get',
 69 |   })
 70 | }
 71 | 
 72 | /**
 73 |  * 修改密码
 74 |  * @param {array} data 请求数据
 75 |  */
 76 |  export function putResetPwd(data) {
 77 |   return request({
 78 |     url: '/user/resetPwd',
 79 |     method: 'put',
 80 |     data
 81 |   })
 82 | }
 83 | 
 84 | /**
 85 |  * 重置密钥
 86 |  */
 87 |  export function putResetKey() {
 88 |   return request({
 89 |     url: '/user/resetKey',
 90 |     method: 'put',
 91 |   })
 92 | }
 93 | 
 94 | /**
 95 |  * 修改资料
 96 |  * @param {array} data 请求数据
 97 |  */
 98 |  export function putUpdate(data) {
 99 |   return request({
100 |     url: '/user/update',
101 |     method: 'put',
102 |     data
103 |   })
104 | }
105 | 
106 | /**
107 |  * 查询设置信息
108 |  * @param {string} type 请求数据
109 |  */
110 |  export function getSetup(type) {
111 |   return request({
112 |     url: '/setup/index/'+type,
113 |     method: 'get',
114 |   })
115 | }
116 | 
117 | /**
118 |  * 更新设置
119 |  * @param {array} data 请求数据
120 |  */
121 |  export function putSetup(data) {
122 |   return request({
123 |     url: '/setup/update',
124 |     method: 'put',
125 |     data:data
126 |   })
127 | }
128 | 
129 | /**
130 |  * 发送测试邮件
131 |  */
132 |  export function postSendMail() {
133 |   return request({
134 |     url: '/setup/sendTest',
135 |     method: 'post',
136 |   })
137 | }
138 | 
139 | /**
140 |  * 发送验证码
141 |  * @param {array} data 请求数据
142 |  */
143 |  export function postCode(data) {
144 |   return request({
145 |     url: '/account/sendCode',
146 |     method: 'post',
147 |     data
148 |   })
149 | }
150 | 
151 | /**
152 |  * 注册
153 |  * @param {array} data 请求数据
154 |  */
155 |  export function postReg(data) {
156 |   return request({
157 |     url: '/account/register',
158 |     method: 'post',
159 |     data
160 |   })
161 | }
162 | 
163 | /**
164 |  * 找回密码
165 |  * @param {array} data 请求数据
166 |  */
167 |  export function postForget(data) {
168 |   return request({
169 |     url: '/account/forget',
170 |     method: 'post',
171 |     data
172 |   })
173 | }
174 | 
175 | /**
176 |  * 角色组列表
177 |  * @param {array} params 请求数据
178 |  */
179 |  export function getRole(params) {
180 |   return request({
181 |     url: '/role/query',
182 |     method: 'get',
183 |     params
184 |   })
185 | }
186 | 
187 | /**
188 |  * 新增角色
189 |  * @param {array} data 请求数据
190 |  */
191 |  export function postRole(data) {
192 |   return request({
193 |     url: '/role/save',
194 |     method: 'post',
195 |     data
196 |   })
197 | }
198 | 
199 | /**
200 |  * 修改角色
201 |  * @param {array} data 请求数据
202 |  */
203 |  export function putRole(data) {
204 |   return request({
205 |     url: '/role/update',
206 |     method: 'put',
207 |     data
208 |   })
209 | }
210 | 
211 | /**
212 |  * 删除角色
213 |  * @param {array} params 请求数据
214 |  */
215 |  export function delRole(params) {
216 |   return request({
217 |     url: '/role/delete',
218 |     method: 'delete',
219 |     params
220 |   })
221 | }
222 | 
223 | /**
224 |  * 查询存储桶列表
225 |  * @param {array} params 请求数据
226 |  */
227 |  export function getStorage(params) {
228 |   return request({
229 |     url: '/storage/query',
230 |     method: 'get',
231 |     params
232 |   })
233 | }
234 | 
235 | /**
236 |  * 查询存储桶类型列表
237 |  */
238 |  export function getStorageType() {
239 |   return request({
240 |     url: '/storage/type',
241 |     method: 'get',
242 |   })
243 | }
244 | 
245 | /**
246 |  * 新增桶
247 |  * @param {array} data 请求数据
248 |  */
249 |  export function postStorage(data) {
250 |   return request({
251 |     url: '/storage/save',
252 |     method: 'post',
253 |     data
254 |   })
255 | }
256 | 
257 | /**
258 |  * 修改桶
259 |  * @param {array} data 请求数据
260 |  */
261 |  export function putStorage(data) {
262 |   return request({
263 |     url: '/storage/update',
264 |     method: 'put',
265 |     data
266 |   })
267 | }
268 | 
269 | /**
270 |  * 删除桶
271 |  * @param {array} params 请求数据
272 |  */
273 |  export function delStorage(params) {
274 |   return request({
275 |     url: '/storage/delete',
276 |     method: 'delete',
277 |     params
278 |   })
279 | }
280 | 
281 | /**
282 |  * 查询图片列表
283 |  * @param {array} params 请求数据
284 |  */
285 |  export function getImages(params) {
286 |   return request({
287 |     url: '/images/query',
288 |     method: 'get',
289 |     params
290 |   })
291 | }
292 | 
293 | /**
294 |  * 删除图片
295 |  * @param {array} params 请求数据
296 |  */
297 |  export function delImages(params) {
298 |   return request({
299 |     url: '/images/delete',
300 |     method: 'delete',
301 |     params
302 |   })
303 | }
304 | 
305 | /**
306 |  * 成员列表
307 |  * @param {array} params 请求数据
308 |  */
309 |  export function getMember(params) {
310 |   return request({
311 |     url: '/member/query',
312 |     method: 'get',
313 |     params
314 |   })
315 | }
316 | 
317 | /**
318 |  * 新增成员
319 |  * @param {array} data 请求数据
320 |  */
321 |  export function postMember(data) {
322 |   return request({
323 |     url: '/member/save',
324 |     method: 'post',
325 |     data
326 |   })
327 | }
328 | 
329 | /**
330 |  * 修改成员
331 |  * @param {array} data 请求数据
332 |  */
333 |  export function putMember(data) {
334 |   return request({
335 |     url: '/member/update',
336 |     method: 'put',
337 |     data
338 |   })
339 | }
340 | 
341 | /**
342 |  * 删除成员
343 |  * @param {array} params 请求数据
344 |  */
345 |  export function delMember(params) {
346 |   return request({
347 |     url: '/member/delete',
348 |     method: 'delete',
349 |     params
350 |   })
351 | }
352 | 
353 | /**
354 |  * 上传图片
355 |  * @param {array} data 请求数据
356 |  */
357 |  export function postUpload(data) {
358 |   return request({
359 |     url: '/api/upload',
360 |     method: 'post',
361 |     data
362 |   })
363 | }
364 | 
365 | 
366 | /**
367 |  * 获取更新
368 |  */
369 |  export function getUpdate() {
370 |   return request({
371 |     url: '/updade/version',
372 |     method: 'get',
373 |   })
374 | }
375 | 
376 | /**
377 |  * 下载更新包
378 |  * @param {array} data 请求数据
379 |  */
380 |  export function postUpdate(data) {
381 |   return request({
382 |     url: '/updade/update',
383 |     method: 'post',
384 |     data
385 |   })
386 | }
387 | 
388 | 
389 | 
390 | 
391 | 
392 | 
393 | 
394 | 
395 | 
396 | 
397 | 


--------------------------------------------------------------------------------
/src/assets/css/account.css:
--------------------------------------------------------------------------------
  1 | .login_bg {
  2 |   position: fixed;
  3 |   width: 100%;
  4 |   height: 100%;
  5 |   left: 0;
  6 |   top: 0;
  7 |   background-color: rgba(34, 42, 62, 0.3);
  8 |   background-position: 50%;
  9 |   background-size: 100%;
 10 | }
 11 | .login_container {
 12 |   position: absolute;
 13 |   top: 50%;
 14 |   left: 50%;
 15 |   width: 1100px;
 16 |   margin: 0 auto;
 17 |   z-index: 1;
 18 |   transform: translate(-50%, -50%);
 19 | }
 20 | .login_body {
 21 |   width: inherit;
 22 |   display: flex;
 23 |   box-shadow: 0px 20px 80px 0px rgba(0, 0, 0, 0.3);
 24 |   border-radius: 10px;
 25 | }
 26 | .login-sidebox {
 27 |   width: 50%;
 28 |   padding: 60px;
 29 |   color: #fff;
 30 |   background: #3887e5;
 31 |   position: relative;
 32 |   overflow: hidden;
 33 |   border-radius: 0 10px 10px 0;
 34 | }
 35 | .login-sidebox__title h2 {
 36 |   font-size: 30px;
 37 | }
 38 | .login-sidebox__title h4 {
 39 |   font-size: 18px;
 40 |   margin-top: 10px;
 41 |   font-weight: normal;
 42 | }
 43 | .login-sidebox__title p {
 44 |   font-size: 14px;
 45 |   margin-top: 10px;
 46 |   line-height: 1.8;
 47 |   color: rgba(255, 255, 255, 0.6);
 48 | }
 49 | .login-sidebox img {
 50 |   position: absolute;
 51 |   left: -120px;
 52 |   bottom: -160px;
 53 |   width: 550px;
 54 | }
 55 | .login-logo {
 56 |   text-align: center;
 57 |   margin-bottom: 30px;
 58 | }
 59 | .login-logo .logo {
 60 |   width: 100px;
 61 |   margin: 0 auto;
 62 |   vertical-align: bottom;
 63 | }
 64 | .login-logo h2 {
 65 |   font-size: 24px;
 66 |   margin-top: 20px;
 67 |   color: #40485b;
 68 | }
 69 | .login-title {
 70 |   margin-top: 20px;
 71 | }
 72 | .login-title h2 {
 73 |   font-size: 22px;
 74 |   font-weight: normal;
 75 | }
 76 | .login-title p {
 77 |   font-size: 12px;
 78 |   margin-top: 40px;
 79 |   line-height: 1.8;
 80 |   color: rgba(255, 255, 255, 0.8);
 81 | }
 82 | .login-form {
 83 |   width: 50%;
 84 |   padding: 60px 100px;
 85 |   background: #fff;
 86 |   border-radius: 10px 0 0 10px;
 87 | }
 88 | .ivu-login {
 89 |   margin-bottom: 30px;
 90 | }
 91 | .ivu-login .page-account-auto-login {
 92 |   margin-bottom: 24px;
 93 |   text-align: left;
 94 | }
 95 | .ivu-login .page-account-auto-login .line {
 96 |   display: inline-block;
 97 |   width: 1px;
 98 |   height: 20px;
 99 |   background: #999;
100 | }
101 | .copy {
102 |   text-align: center;
103 |   color: #999;
104 | }
105 | @media (max-height: 650px) {
106 |   .login_container {
107 |     position: static;
108 |     transform: none;
109 |     margin: 50px auto;
110 |   }
111 | }
112 | @media (max-width: 1200px) {
113 |   .login_container {
114 |     width: 900px;
115 |   }
116 |   .login-form {
117 |     padding: 60px;
118 |   }
119 | }
120 | @media (max-width: 1000px) {
121 |   .login_container {
122 |     width: 100%;
123 |     background: #fff;
124 |     margin: 0;
125 |     transform: none;
126 |     top: 0px;
127 |     bottom: 0px;
128 |     left: 0px;
129 |     right: 0px;
130 |   }
131 |   .login_body {
132 |     box-shadow: none;
133 |   }
134 |   .login-form {
135 |     width: 100%;
136 |     padding: 60px 40px;
137 |   }
138 |   .login-sidebox {
139 |     display: none;
140 |   }
141 |   .login-footer {
142 |     margin-top: 0;
143 |   }
144 | }
145 | 


--------------------------------------------------------------------------------
/src/assets/css/account.less:
--------------------------------------------------------------------------------
  1 | .login_bg {
  2 |     position: fixed;
  3 |     width: 100%;
  4 |     height: 100%;
  5 |     left: 0;
  6 |     top: 0;
  7 |     background-color: rgba(34, 42, 62, 0.3);
  8 |     // background-repeat: no-repeat;
  9 |     background-position: 50%;
 10 |     background-size: 100%;
 11 | }
 12 | 
 13 | .login_container {
 14 |     position: absolute;
 15 |     top: 50%;
 16 |     left: 50%;
 17 |     width: 1100px;
 18 |     margin: 0 auto;
 19 |     z-index: 1;
 20 |     transform: translate(-50%, -50%);
 21 |    
 22 | }
 23 | 
 24 | .login_body {
 25 |     width: inherit;
 26 |     display: flex;
 27 |     box-shadow: 0px 20px 80px 0px rgba(0, 0, 0, 0.3);
 28 |     border-radius: 10px;
 29 | }
 30 | 
 31 | .login-sidebox {
 32 |     width: 50%;
 33 |     padding: 60px;
 34 |     color: #fff;
 35 |     background: #3887e5;
 36 |     position: relative;
 37 |     overflow: hidden;
 38 |     border-radius: 0 10px 10px 0;
 39 | }
 40 | 
 41 | .login-sidebox__title h2 {
 42 |     font-size: 30px;
 43 | }
 44 | 
 45 | .login-sidebox__title h4 {
 46 |     font-size: 18px;
 47 |     margin-top: 10px;
 48 |     font-weight: normal;
 49 | }
 50 | 
 51 | .login-sidebox__title p {
 52 |     font-size: 14px;
 53 |     margin-top: 10px;
 54 |     line-height: 1.8;
 55 |     color: rgba(255, 255, 255, 0.6);
 56 | }
 57 | 
 58 | .login-sidebox img {
 59 |     position: absolute;
 60 |     left: -120px;
 61 |     bottom: -160px;
 62 |     width: 550px;
 63 | }
 64 | 
 65 | .login-logo {
 66 |     text-align: center;
 67 |     margin-bottom: 30px;
 68 | }
 69 | 
 70 | .login-logo .logo {
 71 |     width: 100px;
 72 |     margin: 0 auto;
 73 |     vertical-align: bottom;
 74 | }
 75 | 
 76 | .login-logo h2 {
 77 |     font-size: 24px;
 78 |     margin-top: 20px;
 79 |     color: #40485b;
 80 | }
 81 | 
 82 | .login-title {
 83 |     margin-top: 20px;
 84 | }
 85 | 
 86 | .login-title h2 {
 87 |     font-size: 22px;
 88 |     font-weight: normal;
 89 | }
 90 | 
 91 | .login-title p {
 92 |     font-size: 12px;
 93 |     margin-top: 40px;
 94 |     line-height: 1.8;
 95 |     color: rgba(255, 255, 255, 0.8);
 96 | }
 97 | 
 98 | .login-form {
 99 |     width: 50%;
100 |     padding: 60px 100px;
101 |     background: #fff;
102 |     border-radius: 10px 0 0 10px;
103 | }
104 | 
105 | 
106 | 
107 | 
108 | 
109 | 
110 | .ivu-login {
111 |     margin-bottom: 30px;
112 | 
113 | 
114 | 
115 |     .page-account-auto-login {
116 |         margin-bottom: 24px;
117 |         text-align: left;
118 | 
119 |         .line {
120 |             display: inline-block;
121 |             width: 1px;
122 |             height: 20px;
123 |             background: #999;
124 |         }
125 |     }
126 | }
127 | 
128 | .copy {
129 |     text-align: center;
130 |     color: #999;
131 | }
132 | 
133 | 
134 | 
135 | 
136 | 
137 | @media (max-height: 650px) {
138 |     .login_container {
139 |         position: static;
140 |         transform: none;
141 |         margin: 50px auto;
142 |     }
143 | 
144 | 
145 | }
146 | 
147 | @media (max-width: 1200px) {
148 |     .login_container {
149 |         width: 900px;
150 |     }
151 | 
152 |     .login-form {
153 |         padding: 60px;
154 |     }
155 | }
156 | 
157 | @media (max-width: 1000px) {
158 |     .login_container {
159 |         width: 100%;
160 |         background: #fff;
161 |         margin: 0;
162 |         transform: none;
163 |         top: 0px;
164 |         bottom: 0px;
165 |         left: 0px;
166 |         right: 0px;
167 |     }
168 | 
169 |     .login_body {
170 |         box-shadow: none;
171 |     }
172 | 
173 |     .login-form {
174 |         width: 100%;
175 |         padding: 60px 40px;
176 |     }
177 | 
178 |     .login-sidebox {
179 |         display: none;
180 |     }
181 | 
182 |     .login-footer {
183 |         margin-top: 0;
184 |     }
185 | }


--------------------------------------------------------------------------------
/src/assets/css/clean.css:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 |  
  3 | html {
  4 |     -webkit-text-size-adjust: 100%;
  5 |     -ms-text-size-adjust: 100%;
  6 |     -webkit-overflow-scrolling : touch;
  7 | }
  8 | html, body, #app{width:100%;height:100%;}
  9 |  
 10 | input[type="submit"], input[type="reset"], input[type="button"], input {
 11 |     font-family: Arial, Helvetica, sans-serif;
 12 |     resize: none;
 13 |     border: none;
 14 | }
 15 |  
 16 | body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 17 |     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 18 |     font-size:14px;
 19 |     box-sizing:border-box;
 20 | }
 21 |  
 22 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 23 |     display: block;
 24 | }
 25 |  
 26 | img {
 27 |     width: 100%;
 28 |     height: auto;
 29 |     width: auto\9; /* ie8 */
 30 |     display: block;
 31 |     -ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/
 32 | }
 33 |  
 34 | body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 35 |     margin: 0;
 36 |     padding: 0;
 37 | }
 38 | body {
 39 |     font: 12px/1.5 'Microsoft YaHei','宋体', Tahoma, Arial, sans-serif;
 40 | }
 41 | em, i {
 42 |     font-style: normal;
 43 | }
 44 | ul,li{
 45 |     list-style-type: none;
 46 | }
 47 | strong {
 48 |     font-weight: normal;
 49 | }
 50 | .clearfix:after {
 51 |     content: "";
 52 |     display: block;
 53 |     visibility: hidden;
 54 |     height: 0;
 55 |     clear: both;
 56 | }
 57 | .clearfix {
 58 |     zoom: 1;
 59 | }
 60 | a {
 61 |     text-decoration: none;
 62 |     color: #969696;
 63 |     font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;
 64 | }
 65 | a:hover {
 66 |     text-decoration: none;
 67 | }
 68 | ul, ol {
 69 |     list-style: none;
 70 | }
 71 | h1, h2, h3, h4, h5, h6 {
 72 |     font-size: 100%;
 73 |     font-family: 'Microsoft YaHei';
 74 | }
 75 | img {
 76 |     border: none;
 77 | }
 78 | input{
 79 |     font-family: 'Microsoft YaHei';
 80 | }
 81 |  
 82 | .one-txt-cut{
 83 |     overflow: hidden;
 84 |     white-space: nowrap;
 85 |     text-overflow: ellipsis;
 86 | }
 87 |  
 88 | .txt-cut{
 89 |     overflow : hidden;
 90 |     text-overflow: ellipsis;
 91 |     display: -webkit-box;
 92 |     -webkit-box-orient: vertical;
 93 | }
 94 | label{
 95 |     font-weight: normal;
 96 | }
 97 | a:link,a:active,a:visited,a:hover {
 98 |     background: none;
 99 |     -webkit-tap-highlight-color: rgba(0,0,0,0);
100 |     -webkit-tap-highlight-color: transparent;
101 | }
102 | input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }


--------------------------------------------------------------------------------
/src/assets/images/empty.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/osuuu/LightPicture-vue/1aeb04f12d5f160748a7b99b69d410b17cf928cf/src/assets/images/empty.png


--------------------------------------------------------------------------------
/src/assets/images/empty1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/osuuu/LightPicture-vue/1aeb04f12d5f160748a7b99b69d410b17cf928cf/src/assets/images/empty1.png


--------------------------------------------------------------------------------
/src/assets/images/empty3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/osuuu/LightPicture-vue/1aeb04f12d5f160748a7b99b69d410b17cf928cf/src/assets/images/empty3.png


--------------------------------------------------------------------------------
/src/assets/imgs/404.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/osuuu/LightPicture-vue/1aeb04f12d5f160748a7b99b69d410b17cf928cf/src/assets/imgs/404.png


--------------------------------------------------------------------------------
/src/assets/imgs/error.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/osuuu/LightPicture-vue/1aeb04f12d5f160748a7b99b69d410b17cf928cf/src/assets/imgs/error.png


--------------------------------------------------------------------------------
/src/assets/imgs/icon_close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/osuuu/LightPicture-vue/1aeb04f12d5f160748a7b99b69d410b17cf928cf/src/assets/imgs/icon_close.png


--------------------------------------------------------------------------------
/src/assets/imgs/load.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/osuuu/LightPicture-vue/1aeb04f12d5f160748a7b99b69d410b17cf928cf/src/assets/imgs/load.gif


--------------------------------------------------------------------------------
/src/assets/imgs/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/osuuu/LightPicture-vue/1aeb04f12d5f160748a7b99b69d410b17cf928cf/src/assets/imgs/loading.gif


--------------------------------------------------------------------------------
/src/assets/imgs/loading.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/osuuu/LightPicture-vue/1aeb04f12d5f160748a7b99b69d410b17cf928cf/src/assets/imgs/loading.png


--------------------------------------------------------------------------------
/src/assets/imgs/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/osuuu/LightPicture-vue/1aeb04f12d5f160748a7b99b69d410b17cf928cf/src/assets/imgs/logo.jpg


--------------------------------------------------------------------------------
/src/assets/imgs/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/osuuu/LightPicture-vue/1aeb04f12d5f160748a7b99b69d410b17cf928cf/src/assets/imgs/logo.png


--------------------------------------------------------------------------------
/src/components/Account.vue:
--------------------------------------------------------------------------------
 1 | <!-- 
 2 | // +----------------------------------------------------------------------
 3 | // | LightPicture [ 图床 ]
 4 | // +----------------------------------------------------------------------
 5 | // | 企业团队图片资源管理系统
 6 | // +----------------------------------------------------------------------
 7 | // | Github: https://github.com/osuuu/LightPicture
 8 | // +----------------------------------------------------------------------
 9 | // | Copyright © http://picture.h234.cn All rights reserved.
10 | // +----------------------------------------------------------------------
11 | // | Author: Team <admin@osuu.net>
12 | // +---------------------------------------------------------------------- 
13 | -->
14 | <template>
15 |   <div class="page-content">
16 |     <Login v-if="isAccount == 1"> </Login>
17 |     <Register v-if="isAccount == 2"> </Register>
18 |     <Forget v-if="isAccount == 3"> </Forget>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | import { mapState } from "vuex";
24 | import Login from "./Login.vue";
25 | import Register from "./Register.vue";
26 | import Forget from "./Forget.vue";
27 | export default {
28 |   data() {
29 |     return {};
30 |   },
31 |   components: {
32 |     Login,Register,Forget
33 |   },
34 |   computed: {
35 |     ...mapState(["isAccount"]),
36 |   },
37 | };
38 | </script>
39 | 
40 | <style lang="less" scoped>
41 | .page-content {
42 |   position: fixed;
43 |   width: 100%;
44 |   height: 100%;
45 |   left: 0;
46 |   top: 0;
47 |   background-color: rgba(34, 42, 62, 0.5);
48 |   z-index: 1005;
49 |   background-position: 50%;
50 |   background-size: 100%;
51 |   display: flex;
52 |   flex-direction: column;
53 |   height: 100vh;
54 |   overflow: auto;
55 | }
56 | </style>


--------------------------------------------------------------------------------
/src/components/Capacity.vue:
--------------------------------------------------------------------------------
 1 | <!-- 
 2 | // +----------------------------------------------------------------------
 3 | // | LightPicture [ 图床 ]
 4 | // +----------------------------------------------------------------------
 5 | // | 企业团队图片资源管理系统
 6 | // +----------------------------------------------------------------------
 7 | // | Github: https://github.com/osuuu/LightPicture
 8 | // +----------------------------------------------------------------------
 9 | // | Copyright © http://picture.h234.cn All rights reserved.
10 | // +----------------------------------------------------------------------
11 | // | Author: Team <admin@osuu.net>
12 | // +---------------------------------------------------------------------- 
13 | -->
14 | <template>
15 |   <div>
16 |     <div class="prog-main">
17 |       <p class="title">容量使用:</p>
18 |       <Progress :percent="((userInfo.user_size/userInfo.capacity).toFixed(0))*100"
19 |         :stroke-color="['#10DA37', '#F92612']"  />
20 |       <p>{{turnSize(userInfo.user_size)}} / {{turnSize(userInfo.capacity)}}</p>
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 |   import {
27 |     mapState
28 |   } from "vuex";
29 |   import {
30 |     toSize
31 |   } from "@/utils/index"
32 |   export default {
33 |     data() {
34 |       return {};
35 |     },
36 |     computed: {
37 |       ...mapState(["userInfo"]),
38 |       turnSize() {
39 |         return (val) => {
40 |           return toSize(val)
41 |         };
42 |       },
43 |     },
44 |     
45 | 
46 |     methods: {
47 | 
48 |     },
49 |   };
50 | </script>
51 | 
52 | <style lang="less" scoped>
53 |   .prog-main {
54 |     position: absolute;
55 |     width: 220px;
56 |     bottom: 115px;
57 |     left: 0;
58 |     margin: 10px;
59 |     padding: 10px;
60 |     background: rgba(241, 243, 250, .6);
61 |     border-radius: 10px;
62 | 
63 |     p {
64 |       font-size: 12px;
65 |     }
66 |   }
67 | </style>


--------------------------------------------------------------------------------
/src/components/Copy.vue:
--------------------------------------------------------------------------------
 1 | <!-- 
 2 | // +----------------------------------------------------------------------
 3 | // | LightPicture [ 图床 ]
 4 | // +----------------------------------------------------------------------
 5 | // | 企业团队图片资源管理系统
 6 | // +----------------------------------------------------------------------
 7 | // | Github: https://github.com/osuuu/LightPicture
 8 | // +----------------------------------------------------------------------
 9 | // | Copyright © http://picture.h234.cn All rights reserved.
10 | // +----------------------------------------------------------------------
11 | // | Author: Team <admin@osuu.net>
12 | // +---------------------------------------------------------------------- 
13 | -->
14 | <template>
15 |   <div>
16 |     <div class="os-url-main">
17 |       <Divider>LightPicture</Divider>
18 |       <div class="os-main">
19 |         <div class="os-item">
20 |           <span class="osuu-net geek-github"></span>
21 |           <p>github</p>
22 |         </div>
23 |         <div class="os-item">
24 |           <span class="osuu-net geek-gitee2"></span>
25 |           <p>gitee</p>
26 |         </div>
27 |         
28 |       </div>
29 |       <!-- <p>作者：@王多余</p> -->
30 |     </div>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 | export default {
36 |   data() {
37 |     return {};
38 |   },
39 | 
40 |   methods: {
41 |    
42 |   },
43 | };
44 | </script>
45 | 
46 | <style lang="less" scoped>
47 | @import url("../assets/css/theme.min.css");
48 | p{
49 |   text-align: center;
50 | }
51 | </style>


--------------------------------------------------------------------------------
/src/components/Empty.vue:
--------------------------------------------------------------------------------
 1 | <!-- 
 2 | // +----------------------------------------------------------------------
 3 | // | LightPicture [ 图床 ]
 4 | // +----------------------------------------------------------------------
 5 | // | 企业团队图片资源管理系统
 6 | // +----------------------------------------------------------------------
 7 | // | Github: https://github.com/osuuu/LightPicture
 8 | // +----------------------------------------------------------------------
 9 | // | Copyright © http://picture.h234.cn All rights reserved.
10 | // +----------------------------------------------------------------------
11 | // | Author: Team <admin@osuu.net>
12 | // +---------------------------------------------------------------------- 
13 | -->
14 | <template>
15 |     <div>
16 |          <div class="empty" >
17 |             <div class="empty-main">
18 |               <img :src="require('../assets/images/empty.png')" alt class="empty-img" />
19 |               <div class="text">{{name}}</div>
20 |               
21 |             </div>
22 |           </div>
23 |     </div>
24 | </template>
25 | 
26 | <script>
27 | export default {
28 |     props:['text'],
29 |     data() {
30 |         return {
31 |             name:this.text
32 |         }
33 |     },
34 | }
35 | </script>
36 | 
37 | <style lang="less" scoped>
38 |  .empty {
39 |       width: 100%;
40 |       height: 50vh;
41 |       font-size: 16px;
42 |       position: relative;
43 |       .empty-main {
44 |         position: absolute;
45 |         left: 50%;
46 |         top: 50%;
47 |         transform: translate(-50%,-50%);
48 |         text-align: center;
49 |         .empty-img {
50 |           height: 200px;
51 |           width: 200px;
52 |         }
53 |         .text{
54 |           color: #707990;
55 |         }
56 |       }
57 |     }
58 | </style>


--------------------------------------------------------------------------------
/src/components/Forget.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div class="page-container">
 16 |     <div class="page-close" @click="switchAccount(0)">
 17 |       <img src="../assets/imgs/icon_close.png" alt="" />
 18 |     </div>
 19 |     <div class="page-container-top">
 20 |       <div class="page-container-top-logo">
 21 |         <img src="../assets/imgs/logo.jpg" alt="logo" />
 22 |       </div>
 23 |     </div>
 24 |     <div class="ivu-login">
 25 |       <Form ref="create" :model="formValidate" :rules="ruleValidate">
 26 |         <FormItem label="" prop="email">
 27 |           <Input
 28 |             prefix="ios-mail-outline"
 29 |             type="tel"
 30 |             v-model="formValidate.email"
 31 |             size="large"
 32 |             clearable
 33 |             placeholder="邮箱"
 34 |           ></Input>
 35 |         </FormItem>
 36 |       
 37 |         <FormItem label="" prop="captcha">
 38 |           <Input
 39 |             prefix="ios-lock-outline"
 40 |             type="text"
 41 |             v-model="formValidate.captcha"
 42 |             size="large"
 43 |             placeholder="验证码"
 44 |           >
 45 |             <Button
 46 |               slot="append"
 47 |               type="primary"
 48 |               @click="getCode"
 49 |               :disabled="disabled"
 50 |               >{{ codeBtn }}</Button
 51 |             >
 52 |           </Input>
 53 |         </FormItem>
 54 |       </Form>
 55 | 
 56 |       <Button
 57 |         type="primary"
 58 |         long
 59 |         size="large"
 60 |         @click="toReg"
 61 |         :loading="loading"
 62 |         >{{ loginText }}</Button
 63 |       >
 64 |       <p class="goligin" @click="switchAccount(1)">已找回账号？点此登录</p>
 65 |     </div>
 66 |   </div>
 67 | </template>
 68 | 
 69 | <script>
 70 | import {  postCode, postForget } from "@/api/index";
 71 | import { mapMutations } from "vuex";
 72 | 
 73 | export default {
 74 |   data() {
 75 |     return {
 76 |       formValidate: {
 77 |         email: "",
 78 |         captcha: "",
 79 |       },
 80 |       ruleValidate: {
 81 |         email: [
 82 |           {
 83 |             required: true,
 84 |             message: "请输入邮箱",
 85 |             trigger: "blur",
 86 |           },
 87 |         ],
 88 |       
 89 |         captcha: [
 90 |           {
 91 |             required: true,
 92 |             message: "请输入邮箱验证码",
 93 |             trigger: "blur",
 94 |           },
 95 |         ],
 96 |       
 97 |       },
 98 |       codeBtn: "获取验证码",
 99 |       countdown: 60,
100 |       disabled: false,
101 |       loading: false,
102 |       loginText: "重置密码",
103 |     };
104 |   },
105 | 
106 |   methods: {
107 |     ...mapMutations(["switchAccount"]),
108 | 
109 |     //获取验证码
110 |     getCode() {
111 |       var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g;
112 |       var user = reg.test(this.formValidate.email);
113 |       if (!user) {
114 |         return this.$Message.warning({
115 |           background: true,
116 |           content: "请填写正确的邮箱",
117 |         });
118 |       }
119 |       this.$Message.loading({
120 |         content: "获取中...",
121 |         duration: 2,
122 |       });
123 |       postCode({
124 |         email: this.formValidate.email,
125 |       }).then((res) => {
126 |         if (res.code == 200) {
127 |           this.$Message.success({
128 |             background: true,
129 |             content: res.msg,
130 |           });
131 |           this.settime(60);
132 |         } else {
133 |           this.$Message.error({
134 |             background: true,
135 |             content: res.msg,
136 |           });
137 |         }
138 |       });
139 |     },
140 | 
141 |     //验证码
142 |     settime(e) {
143 |       //验证码动态
144 |       if (this.countdown == 0) {
145 |         (this.codeBtn = "重新发送"),
146 |           (this.countdown = "60"),
147 |           (this.disabled = false);
148 |         return;
149 |       } else {
150 |         (this.codeBtn = "重新发送(" + this.countdown + ")"),
151 |           (this.disabled = true);
152 |         this.countdown--;
153 |       }
154 |       setTimeout(() => {
155 |         this.settime(60);
156 |       }, 1000);
157 |     },
158 | 
159 |     // 注册方法
160 |     toReg() {
161 |       this.$refs.create.validate((valid) => {
162 |         if (valid) {
163 |           this.loading = true;
164 |           this.loginText = "重置中...";
165 |           postForget({
166 |             email: this.formValidate.email,
167 |             code: this.formValidate.captcha,
168 |           }).then((res) => {
169 |             if (res.code == 200) {
170 |               this.$Message.success({
171 |                 background: true,
172 |                 content: res.msg,
173 |               });
174 |               // this.$router.push("/login");
175 |             } else {
176 |               this.$Message.error({
177 |                 background: true,
178 |                 content: res.msg,
179 |               });
180 |             }
181 |             this.loading = false;
182 |             this.loginText = "重置密码";
183 |           });
184 |         }
185 |       });
186 |     },
187 |   },
188 | };
189 | </script>
190 | 
191 | <style lang="less" scoped>
192 | .page-container {
193 |   padding: 32px 0;
194 |   text-align: center;
195 |   width: 420px;
196 |   margin: auto;
197 |   background: #fff;
198 |   box-shadow: 0 0 8px #eee;
199 |   padding: 20px 30px;
200 |   border-radius: 10px;
201 |   position: relative;
202 | 
203 |   .page-close {
204 |     position: absolute;
205 |     right: -15px;
206 |     top: -15px;
207 |     img {
208 |       width: 45px;
209 |       border-radius: 50%;
210 |       box-shadow: 0 0 8px #eee;
211 |     }
212 |   }
213 |   .page-container-top {
214 |     padding: 10px 0;
215 | 
216 |     .page-container-top-logo {
217 |       margin-bottom: 20px;
218 | 
219 |       img {
220 |         width: 60%;
221 |         margin: 0 auto;
222 |       }
223 |     }
224 |   }
225 | 
226 |   /deep/.ivu-login {
227 |     margin-bottom: 20px;
228 | 
229 |     a {
230 |       color: #3ca5f6;
231 |     }
232 |   }
233 |   .goligin {
234 |     color: #3ca5f6;
235 |     text-align: center;
236 |     margin-top: 20px;
237 |     cursor: pointer;
238 |   }
239 | }
240 | 
241 | @media screen and (max-width: 768px) {
242 |   .page-container {
243 |     width: 95% !important;
244 |   }
245 | }
246 | </style>


--------------------------------------------------------------------------------
/src/components/Login.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div class="page-container">
 16 |     <div class="page-close" @click="switchAccount(0)">
 17 |       <img src="../assets/imgs/icon_close.png" alt="" />
 18 |     </div>
 19 |     <div class="page-container-top">
 20 |       <div class="page-container-top-logo">
 21 |         <img src="../assets/imgs/logo.jpg" alt="logo" />
 22 |       </div>
 23 |     </div>
 24 |     <div class="ivu-login">
 25 |       <Form ref="create" :model="formValidate" :rules="ruleValidate">
 26 |         <FormItem label="" prop="username">
 27 |           <Input prefix="ios-mail-outline" type="text" v-model="formValidate.username" size="large" clearable
 28 |             placeholder="邮箱/账号"></Input>
 29 |         </FormItem>
 30 |         <FormItem label="" prop="password">
 31 |           <Input prefix="ios-lock-outline" v-model="formValidate.password" size="large" type="password" clearable
 32 |             placeholder="密码"></Input>
 33 |         </FormItem>
 34 | 
 35 |         <FormItem>
 36 |           <Checkbox v-model="formValidate.single" style="float: left">记住我</Checkbox>
 37 |           <a href="javascript:;" style="float: right;margin-left:10px" v-if="config.is_reg == 1"
 38 |             @click="switchAccount(2)">注册账号</a>
 39 |           <a href="javascript:;" style="float: right" @click="switchAccount(3)">忘记密码</a>
 40 |           <div style="clear: both"></div>
 41 |         </FormItem>
 42 |       </Form>
 43 | 
 44 |       <Button type="primary" long size="large" @click="toLogin" :loading="loading">立即登录</Button>
 45 |     </div>
 46 |   </div>
 47 | </template>
 48 | 
 49 | <script>
 50 |   import {
 51 |     postLogin
 52 |   } from "@/api/index";
 53 |   import cookie from "@/utils/store/cookie";
 54 |   import {
 55 |     mapMutations,
 56 |     mapState
 57 |   } from "vuex";
 58 | 
 59 |   export default {
 60 |     data() {
 61 |       return {
 62 |         formValidate: {
 63 |           username: "",
 64 |           password: "",
 65 |           single: false,
 66 |         },
 67 |         ruleValidate: {
 68 |           username: [{
 69 |             required: true,
 70 |             message: "请输入邮箱或账号",
 71 |             trigger: "blur",
 72 |           }, ],
 73 |           password: [{
 74 |             required: true,
 75 |             message: "请输入密码",
 76 |             trigger: "blur",
 77 |           }, ],
 78 |         },
 79 |         loading: false,
 80 |       };
 81 |     },
 82 |     computed: {
 83 |       ...mapState(["config"]),
 84 |     },
 85 |     created() {
 86 |       if (cookie.getCookie()) {
 87 |         if (cookie.getCookie().username != null && cookie.getCookie().username != 'undefined') {
 88 |           this.formValidate.username = cookie.getCookie().username;
 89 |         }
 90 |         this.formValidate.password = cookie.getCookie().password;
 91 |         this.formValidate.single = cookie.get("single");
 92 |       }
 93 |     },
 94 | 
 95 |     methods: {
 96 |       ...mapMutations(["switchAccount"]),
 97 |       // 登录方法
 98 |       toLogin() {
 99 |         this.$refs.create.validate((valid) => {
100 |           if (valid) {
101 |             this.loading = true;
102 |             postLogin({
103 |               username: this.formValidate.username,
104 |               password: this.formValidate.password,
105 |             }).then((res) => {
106 |               if (res.code == 200) {
107 |                 this.$Message.success({
108 |                   background: true,
109 |                   content: res.msg,
110 |                 });
111 | 
112 |                 if (this.formValidate.single) {
113 |                   cookie.setCookie(
114 |                     this.formValidate.phone,
115 |                     this.formValidate.password,
116 |                     7
117 |                   );
118 |                   cookie.set("single", "true", 30);
119 |                 } else {
120 |                   cookie.clearAll();
121 |                 }
122 |                 this.switchAccount(0);
123 |                 localStorage.setItem("lp_token", res.data);
124 | 
125 |                 // if (this.redirect) {
126 |                 //   this.$router.push(this.redirect);
127 |                 // }
128 |                 location.reload();
129 |               } else {
130 |                 this.$Message.error({
131 |                   background: true,
132 |                   content: res.msg,
133 |                 });
134 |               }
135 |               this.loading = false;
136 |             });
137 |           }
138 |         });
139 |       },
140 |     },
141 |   };
142 | </script>
143 | 
144 | <style lang="less" scoped>
145 |   .page-container {
146 |     padding: 32px 0;
147 |     text-align: center;
148 |     width: 420px;
149 |     margin: auto;
150 |     background: #fff;
151 |     box-shadow: 0 0 8px #eee;
152 |     padding: 20px 30px;
153 |     border-radius: 10px;
154 |     position: relative;
155 | 
156 |     .page-close {
157 |       position: absolute;
158 |       right: -15px;
159 |       top: -15px;
160 | 
161 |       img {
162 |         width: 45px;
163 |         border-radius: 50%;
164 |         box-shadow: 0 0 8px #eee;
165 |       }
166 |     }
167 | 
168 |     .page-container-top {
169 |       padding: 10px 0;
170 | 
171 |       .page-container-top-logo {
172 |         margin-bottom: 20px;
173 | 
174 |         img {
175 |           width: 60%;
176 |           margin: 0 auto;
177 |         }
178 |       }
179 |     }
180 | 
181 |     /deep/.ivu-login {
182 |       margin-bottom: 30px;
183 | 
184 |       a {
185 |         color: #3ca5f6;
186 |       }
187 |     }
188 |   }
189 | 
190 |   @media screen and (max-width: 768px) {
191 |     .page-container {
192 |       width: 95% !important;
193 |     }
194 |   }
195 | </style>


--------------------------------------------------------------------------------
/src/components/Notice.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div>
 16 |     <div class="geek-notice " :class="state">
 17 |       <div class="geek-notice-main">
 18 |         <div class="geek-notice-cont">
 19 |           <div class="geek-notice-cont-title">上传中 {{success}}/{{all}}</div>
 20 |           <div class="geek-notice-cont-html"></div>
 21 |           <Progress :percent="(success/all)*100" :stroke-color="['#108ee9', '#87d068']" />
 22 | 
 23 |         </div>
 24 |       </div>
 25 | 
 26 |     </div>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 |   import cookie from "@/utils/store/cookie";
 32 |   export default {
 33 |     props: ['success', 'all'],
 34 |     data() {
 35 |       return {
 36 |         state: "hide"
 37 |       }
 38 |     },
 39 |     watch: {
 40 |       success(newVal) {
 41 |         if (newVal == this.all) {
 42 |           setTimeout(() => {
 43 |             this.state = "hide"
 44 |           }, 1500)
 45 | 
 46 |         }
 47 |       },
 48 |       all(newVal) {
 49 |         if (newVal > 0) {
 50 |           this.state = "show"
 51 |         } else {
 52 |           this.state = "hide"
 53 |         }
 54 |       }
 55 |     },
 56 |   }
 57 | </script>
 58 | 
 59 | <style lang="less" scoped>
 60 |   .geek-notice {
 61 |     padding: 16px;
 62 |     border-radius: 4px;
 63 |     -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
 64 |     box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
 65 |     background: #fff;
 66 |     line-height: 1;
 67 |     position: fixed;
 68 |     z-index: 1015;
 69 |     transition: all 0.5s;
 70 |     right: -400px;
 71 |     top: 24px;
 72 |     width: 335px;
 73 | 
 74 |     .geek-notice-main {
 75 |       position: relative;
 76 | 
 77 | 
 78 | 
 79 |       .geek-notice-main-icon {
 80 |         position: absolute;
 81 |         left: 0;
 82 |         top: 0;
 83 |         width: 45px;
 84 |         height: 45px;
 85 |       }
 86 | 
 87 |       .geek-notice-cont {
 88 |         margin-left: 20px;
 89 | 
 90 |         .geek-notice-cont-title {
 91 |           font-size: 18px;
 92 |           font-weight: 600;
 93 |           margin-bottom: 8px;
 94 |         }
 95 | 
 96 |         .geek-notice-cont-html {
 97 |           font-size: 16px;
 98 |           line-height: 20px;
 99 |         }
100 | 
101 | 
102 |       }
103 |     }
104 | 
105 |   }
106 | 
107 |   .show {
108 |     right: 20px;
109 |   }
110 | 
111 |   .hide {
112 |     right: -400px;
113 |   }
114 | </style>


--------------------------------------------------------------------------------
/src/components/PortraitSelect.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div>
 16 |     <Modal
 17 |       title="修改头像"
 18 |       v-model="modal"
 19 |       width="430"
 20 |       @on-ok="confirm"
 21 |       @on-cancel="close"
 22 |     >
 23 |       <div class="avatarList">
 24 |         <img
 25 |           v-for="item in avatarList"
 26 |           :key="item"
 27 |           :src="item"
 28 |           :class="{ active: avatarItem == item }"
 29 |           @click="changeItem(item)"
 30 |         />
 31 |       </div>
 32 |       <p> * 以上头像素材取自阿里云，商用请留意版权</p>
 33 |     </Modal>
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 | export default {
 39 |   props: {
 40 |     avatar: {
 41 |       type: String,
 42 |     },
 43 |   },
 44 |   data() {
 45 |     return {
 46 |       modal: true,
 47 |       avatarList: [
 48 |         "https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_beauty.jpg",
 49 |         "https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_colleagues.jpg",
 50 |         "https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_family.jpg",
 51 |         "https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_friend.jpg",
 52 |         "https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg",
 53 |         "https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_trade.jpg",
 54 |       ],
 55 |       avatarItem: "",
 56 |     };
 57 |   },
 58 |   created() {
 59 |     this.avatarItem = this.avatar;
 60 |     this.modal = true;
 61 |   },
 62 |   methods: {
 63 |     changeItem(item) {
 64 |       this.avatarItem = item;
 65 |     },
 66 |     close() {
 67 |       this.$emit("close");
 68 |     },
 69 |     confirm(){
 70 |       this.$emit("confirm",this.avatarItem);
 71 |     }
 72 |   },
 73 | };
 74 | </script>
 75 | 
 76 | <style lang="less" scoped>
 77 | .vertical-center-modal {
 78 |   display: flex;
 79 |   align-items: center;
 80 |   justify-content: center;
 81 | 
 82 |   .ivu-modal {
 83 |     top: 0;
 84 |   }
 85 | }
 86 | .avatarList {
 87 |   display: flex;
 88 |   flex-wrap: wrap;
 89 |   justify-content: space-between;
 90 |   img {
 91 |     margin: 5px 0;
 92 |     width: 120px;
 93 |   }
 94 |   .active {
 95 |     border: 2px solid blue;
 96 |   }
 97 | }
 98 | p{
 99 |   text-align: center;
100 |   color: #888;
101 |   font-size: 12px;
102 | }
103 | @media (max-width: 767.98px) {
104 |   .avatarList img {
105 |     width: 100px;
106 |   }
107 | }
108 | </style>


--------------------------------------------------------------------------------
/src/components/Register.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div class="page-container">
 16 |     <div class="page-close" @click="switchAccount(0)">
 17 |       <img src="../assets/imgs/icon_close.png" alt="" />
 18 |     </div>
 19 |     <div class="page-container-top">
 20 |       <div class="page-container-top-logo">
 21 |         <img src="../assets/imgs/logo.jpg" alt="logo" />
 22 |       </div>
 23 |     </div>
 24 |     <div class="ivu-login">
 25 |       <Form ref="create" :model="formValidate" :rules="ruleValidate">
 26 |         <FormItem label="" prop="email">
 27 |           <Input
 28 |             prefix="ios-mail-outline"
 29 |             type="tel"
 30 |             v-model="formValidate.email"
 31 |             size="large"
 32 |             clearable
 33 |             placeholder="邮箱"
 34 |           ></Input>
 35 |         </FormItem>
 36 |         <FormItem label="" prop="password">
 37 |           <Input
 38 |             prefix="ios-lock-outline"
 39 |             v-model="formValidate.password"
 40 |             size="large"
 41 |             type="password"
 42 |             clearable
 43 |             placeholder="密码（6-10位字母或数字）"
 44 |           ></Input>
 45 |         </FormItem>
 46 |         <FormItem label="" prop="username">
 47 |           <Input
 48 |             prefix="ios-contact-outline"
 49 |             size="large"
 50 |             v-model="formValidate.username"
 51 |             clearable
 52 |             placeholder="姓名"
 53 |           ></Input>
 54 |         </FormItem>
 55 |         <FormItem label="" prop="captcha">
 56 |           <Input
 57 |             prefix="ios-lock-outline"
 58 |             type="text"
 59 |             v-model="formValidate.captcha"
 60 |             size="large"
 61 |             placeholder="验证码"
 62 |           >
 63 |             <Button
 64 |               slot="append"
 65 |               type="primary"
 66 |               @click="getCode"
 67 |               :disabled="disabled"
 68 |               >{{ codeBtn }}</Button
 69 |             >
 70 |           </Input>
 71 |         </FormItem>
 72 |       </Form>
 73 | 
 74 |       <Button
 75 |         type="primary"
 76 |         long
 77 |         size="large"
 78 |         @click="toReg"
 79 |         :loading="loading"
 80 |         >{{ loginText }}</Button
 81 |       >
 82 |       <p class="goligin" @click="switchAccount(1)">已有账号？点此登录</p>
 83 |     </div>
 84 |   </div>
 85 | </template>
 86 | 
 87 | <script>
 88 | import {  postCode, postReg } from "@/api/index";
 89 | import { mapMutations } from "vuex";
 90 | 
 91 | export default {
 92 |   data() {
 93 |     return {
 94 |       formValidate: {
 95 |         email: "",
 96 |         captcha: "",
 97 |         password: "",
 98 |         username: "",
 99 |       },
100 |       ruleValidate: {
101 |         email: [
102 |           {
103 |             required: true,
104 |             message: "请输入邮箱",
105 |             trigger: "blur",
106 |           },
107 |         ],
108 |         password: [
109 |           {
110 |             required: true,
111 |             message: "请输入密码",
112 |             trigger: "blur",
113 |           },
114 |         ],
115 |         captcha: [
116 |           {
117 |             required: true,
118 |             message: "请输入邮箱验证码",
119 |             trigger: "blur",
120 |           },
121 |         ],
122 |         username: [
123 |           {
124 |             required: true,
125 |             message: "请输入姓名",
126 |             trigger: "blur",
127 |           },
128 |         ],
129 |       },
130 |       avatar:"https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg",
131 |       codeBtn: "获取验证码",
132 |       countdown: 60,
133 |       disabled: false,
134 |       loading: false,
135 |       loginText: "注册",
136 |     };
137 |   },
138 | 
139 |   methods: {
140 |     ...mapMutations(["switchAccount"]),
141 | 
142 |     //获取验证码
143 |     getCode() {
144 |       var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g;
145 |       var user = reg.test(this.formValidate.email);
146 |       if (!user) {
147 |         return this.$Message.warning({
148 |           background: true,
149 |           content: "请填写正确的邮箱",
150 |         });
151 |       }
152 |       this.$Message.loading({
153 |         content: "获取中...",
154 |         duration: 0,
155 |       });
156 |       postCode({
157 |         email: this.formValidate.email,
158 |       }).then((res) => {
159 |         this.$Message.destroy()
160 |         if (res.code == 200) {
161 |           this.$Message.success({
162 |             background: true,
163 |             content: res.msg,
164 |           });
165 |           this.settime(60);
166 |         } else {
167 |           this.$Message.error({
168 |             background: true,
169 |             content: res.msg,
170 |           });
171 |         }
172 |       });
173 |     },
174 | 
175 |     //验证码
176 |     settime(e) {
177 |       //验证码动态
178 |       if (this.countdown == 0) {
179 |         (this.codeBtn = "重新发送"),
180 |           (this.countdown = "60"),
181 |           (this.disabled = false);
182 |         return;
183 |       } else {
184 |         (this.codeBtn = "重新发送(" + this.countdown + ")"),
185 |           (this.disabled = true);
186 |         this.countdown--;
187 |       }
188 |       setTimeout(() => {
189 |         this.settime(60);
190 |       }, 1000);
191 |     },
192 | 
193 |     // 注册方法
194 |     toReg() {
195 |       this.$refs.create.validate((valid) => {
196 |         if (valid) {
197 |           this.loading = true;
198 |           this.loginText = "注册中...";
199 |           postReg({
200 |             email: this.formValidate.email,
201 |             password: this.formValidate.password,
202 |             username: this.formValidate.username,
203 |             code: this.formValidate.captcha,
204 |             avatar: this.avatar,
205 |           }).then((res) => {
206 |             if (res.code == 200) {
207 |               this.$Message.success({
208 |                 background: true,
209 |                 content: res.msg,
210 |               });
211 |               this.switchAccount(1)
212 |             } else {
213 |               this.$Message.error({
214 |                 background: true,
215 |                 content: res.msg,
216 |               });
217 |             }
218 |             this.loading = false;
219 |             this.loginText = "注册";
220 |           });
221 |         }
222 |       });
223 |     },
224 |   },
225 | };
226 | </script>
227 | 
228 | <style lang="less" scoped>
229 | .page-container {
230 |   padding: 32px 0;
231 |   text-align: center;
232 |   width: 420px;
233 |   margin: auto;
234 |   background: #fff;
235 |   box-shadow: 0 0 8px #eee;
236 |   padding: 20px 30px;
237 |   border-radius: 10px;
238 |   position: relative;
239 | 
240 |   .page-close {
241 |     position: absolute;
242 |     right: -15px;
243 |     top: -15px;
244 |     img {
245 |       width: 45px;
246 |       border-radius: 50%;
247 |       box-shadow: 0 0 8px #eee;
248 |     }
249 |   }
250 |   .page-container-top {
251 |     padding: 10px 0;
252 | 
253 |     .page-container-top-logo {
254 |       margin-bottom: 20px;
255 | 
256 |       img {
257 |         width: 60%;
258 |         margin: 0 auto;
259 |       }
260 |     }
261 |   }
262 | 
263 |   /deep/.ivu-login {
264 |     margin-bottom: 20px;
265 | 
266 |     a {
267 |       color: #3ca5f6;
268 |     }
269 |   }
270 |   .goligin {
271 |     color: #3ca5f6;
272 |     text-align: center;
273 |     margin-top: 20px;
274 |     cursor: pointer;
275 |   }
276 | }
277 | 
278 | @media screen and (max-width: 768px) {
279 |   .page-container {
280 |     width: 95% !important;
281 |   }
282 | }
283 | </style>


--------------------------------------------------------------------------------
/src/components/UserFloat.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div>
 16 |     <Dropdown trigger="click">
 17 |       <a href="javascript:void(0)">
 18 |         <img :src="userInfo.avatar" class="avatar" alt="" />
 19 |       </a>
 20 |       <DropdownMenu slot="list">
 21 |         <DropdownItem>
 22 |           <div @click="$router.push('/userInfo')" class="right-btn">
 23 |             <span class="osuu-net geek-geren"></span>
 24 |             个人资料
 25 |           </div>
 26 |         </DropdownItem>
 27 |         <DropdownItem>
 28 |           <div @click="$router.push('/userpwd')" class="right-btn">
 29 |             <span class="osuu-net geek-xiugaimima"></span>
 30 |             修改密码
 31 |           </div>
 32 |         </DropdownItem>
 33 |         <DropdownItem>
 34 |           <div @click="$router.push('/about')" class="right-btn">
 35 |             <span class="osuu-net geek-guanyu"></span>
 36 |             关于系统
 37 |           </div>
 38 |         </DropdownItem>
 39 |         <DropdownItem v-if="userInfo.role.is_admin == 1">
 40 |           <div @click="$router.push('/update')" class="right-btn">
 41 |             <span class="osuu-net geek-iconfontzhizuobiaozhun0254"></span>
 42 |             检测更新
 43 |           </div>
 44 |         </DropdownItem>
 45 |         <DropdownItem divided>
 46 |           <div @click="exit">
 47 |             <span class="osuu-net geek-zhuxiaodenglu"></span>
 48 |             退出登录
 49 |           </div>
 50 |         </DropdownItem>
 51 |       </DropdownMenu>
 52 |     </Dropdown>
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script>
 57 |   import cookie from "@/utils/store/cookie";
 58 |   import {
 59 |     mapState,mapMutations
 60 |   } from "vuex";
 61 |   export default {
 62 | 
 63 |     data() {
 64 |       return {};
 65 |     },
 66 |     computed: {
 67 |       ...mapState(["userInfo"]),
 68 |     },
 69 | 
 70 |     methods: {
 71 |        ...mapMutations(["addUserInfo"]),
 72 |       // 退出登录
 73 |       exit() {
 74 |         this.$Modal.confirm({
 75 |           title: "退出确认",
 76 |           content: "即将退出登录，是否继续？",
 77 |           onOk: () => {
 78 |             // cookie.clearAll();
 79 |             
 80 |             
 81 |             this.$router.push({name:"index"});
 82 |             localStorage.removeItem("lp_token", true);
 83 |             this.addUserInfo({})
 84 |             location.reload();
 85 |           },
 86 |         });
 87 |       },
 88 |     },
 89 |   };
 90 | </script>
 91 | 
 92 | <style lang="less" scoped>
 93 |   .vertical-center-modal {
 94 |     display: flex;
 95 |     align-items: center;
 96 |     justify-content: center;
 97 | 
 98 |     .ivu-modal {
 99 |       top: 0;
100 |     }
101 |   }
102 | 
103 |   .avatarList {
104 |     display: flex;
105 |     flex-wrap: wrap;
106 |     justify-content: space-between;
107 | 
108 |     img {
109 |       margin: 5px 0;
110 |       width: 120px;
111 |     }
112 | 
113 |     .active {
114 |       border: 2px solid blue;
115 |     }
116 |   }
117 | 
118 |   p {
119 |     text-align: center;
120 |     color: #888;
121 |     font-size: 12px;
122 |   }
123 | 
124 |   @media (max-width: 767.98px) {
125 |     .avatarList img {
126 |       width: 100px;
127 |     }
128 |   }
129 | </style>


--------------------------------------------------------------------------------
/src/components/WangEnduit.vue:
--------------------------------------------------------------------------------
 1 | <!-- 已弃用 -->
 2 | 
 3 | <template>
 4 |   <div class="home">
 5 |     <h3>wangEditor with vue</h3>
 6 |     <div id="demo1"></div>
 7 |     <button type="button" class="btn" @click="getEditorData">获取当前内容</button>
 8 |     <h3>内容预览</h3>
 9 |     <textarea name="" id="" cols="170" rows="20" readonly v-model="editorData"></textarea>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | 
15 | // 引入 wangEditor
16 | import wangEditor from 'wangeditor'
17 | 
18 | export default {
19 |   data() {
20 |     return {
21 |       editor: null,
22 |       editorData: '<p><img src="http://shoptest.osuu.net/uploads/2021-01-111610330491.png" style="max-width:100%;" width="177" height="158.17"></p>'
23 |     }
24 |   },
25 |   mounted() {
26 |     const editor = new wangEditor(`#demo1`)
27 | 
28 |     // 配置 onchange 回调函数，将数据同步到 vue 中
29 |     editor.config.onchange = (newHtml) => {
30 |        this.editorData = newHtml
31 |     }
32 | editor.config.height = 1800
33 |     // 创建编辑器
34 |     editor.create()
35 | 
36 |     this.editor = editor
37 |   },
38 |   methods: {
39 |     getEditorData() {
40 |       // 通过代码获取编辑器内容
41 |       // let data = this.editor.txt.html()
42 |       // alert(data)
43 |       this.editor.txt.html(this.editorData)
44 |     }
45 |   },
46 |   beforeDestroy() {
47 |     // 调用销毁 API 对当前编辑器实例进行销毁
48 |     this.editor.destroy()
49 |     this.editor = null
50 |   }
51 | }
52 | </script>
53 | 
54 | <style lang="less">
55 |   .home {
56 |     width: 1200px;
57 |     margin: auto;
58 |     position: relative;
59 |     .btn {
60 |       position: absolute;
61 |       right: 0;
62 |       top: 0;
63 |       padding: 5px 10px;
64 |       cursor: pointer;
65 |     }
66 |     h3 {
67 |       margin: 30px 0 15px;
68 |     }
69 |   }
70 | </style>
71 | 


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
 1 | // +----------------------------------------------------------------------
 2 | // | LightPicture [ 图床 ]
 3 | // +----------------------------------------------------------------------
 4 | // | 企业团队图片资源管理系统
 5 | // +----------------------------------------------------------------------
 6 | // | Github: https://github.com/osuuu/LightPicture
 7 | // +----------------------------------------------------------------------
 8 | // | Copyright © http://picture.h234.cn All rights reserved.
 9 | // +----------------------------------------------------------------------
10 | // | Author: Team <admin@osuu.net>
11 | // +----------------------------------------------------------------------
12 | import Empty from './Empty'
13 | import Account from './Account.vue'
14 | import PortraitSelect from './PortraitSelect.vue'
15 | import UserFloat from './UserFloat.vue'
16 | import osCopy from './Copy.vue'
17 | import Notice from './Notice.vue'
18 | import Capacity from './Capacity.vue'
19 | 
20 | export default {
21 |     install(Vue, options) {
22 |         Vue.component('Empty', Empty)
23 |         Vue.component('Account', Account)
24 |         Vue.component('PortraitSelect', PortraitSelect)
25 |         Vue.component('UserFloat', UserFloat)
26 |         Vue.component('osCopy', osCopy)
27 |         Vue.component('Notice', Notice)
28 |         Vue.component('Capacity', Capacity)
29 | 　　}
30 | }     


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | 
 6 | import ViewUI from 'view-design';
 7 | import 'view-design/dist/styles/iview.css';
 8 | 
 9 | Vue.use(ViewUI);
10 | 
11 | // 加载插件
12 | import components from './components'
13 | Vue.use(components)
14 | // 点击复制
15 | import VueClipboard from 'vue-clipboard2'
16 | Vue.use(VueClipboard)
17 | // 加载进度条
18 | router.beforeEach((to, from, next) => {
19 |   ViewUI.LoadingBar.start();
20 |   next();
21 | });
22 | router.afterEach(route => {
23 |   ViewUI.LoadingBar.finish();
24 | });
25 | 
26 | // 图片预览
27 | import Viewer from 'v-viewer'
28 | import 'viewerjs/dist/viewer.css'
29 | Vue.use(Viewer)
30 | Viewer.setDefaults({
31 |   Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
32 | })
33 | 
34 | // 图片懒加载
35 | import VueLazyLoad from 'vue-lazyload';
36 | Vue.use(VueLazyLoad, {
37 |   // preLoad: 1.3, // 预加载高度的比例
38 |   error: require("@/assets/imgs/error.png"), // 加载失败图片
39 |   loading: require("@/assets/imgs/load.gif"), // 加载中图片
40 |   attempt: 3, // 尝试加载次数
41 |   // 不常用参数的一些说明
42 |   // 懒加载模块，滚动到对应视图区域之前才加载该模块，模块内容较多时不推荐使用
43 |   // 加载速度可能会为用户带来不好的体验，适用于一些信息模块，或者一些非主体模块，适用于少部分用户关注的模块
44 |   lazyComponent: true,
45 |   // 默认的方法有['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
46 |   listenEvents: ['scroll'],
47 | })
48 | 
49 | 
50 | import VueWechatTitle from 'vue-wechat-title'
51 | Vue.use(VueWechatTitle)
52 | 
53 | 
54 | 
55 | Vue.config.productionTip = false
56 | 
57 | new Vue({
58 |   router,
59 |   store,
60 |   render: h => h(App),
61 | }).$mount('#app')
62 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | // +----------------------------------------------------------------------
 2 | // | LightPicture [ 图床 ]
 3 | // +----------------------------------------------------------------------
 4 | // | 企业团队图片资源管理系统
 5 | // +----------------------------------------------------------------------
 6 | // | Github: https://github.com/osuuu/LightPicture
 7 | // +----------------------------------------------------------------------
 8 | // | Copyright © http://picture.h234.cn All rights reserved.
 9 | // +----------------------------------------------------------------------
10 | // | Author: Team <admin@osuu.net>
11 | // +----------------------------------------------------------------------
12 | import Vue from 'vue'
13 | import VueRouter from 'vue-router'
14 | // 路由数据
15 | import routes from './routes';
16 | import store from '@/store'
17 | 
18 | Vue.use(VueRouter)
19 | 
20 | //解决点击相同路由报错问题
21 | const routerPush = VueRouter.prototype.push
22 | VueRouter.prototype.push = function push(location) {
23 |   return routerPush.call(this, location).catch(error=> error)
24 | }
25 | 
26 | const router = new VueRouter({
27 |   routes,
28 |   // mode: "history",  // 路由模式，可选值为 history 或 hash
29 |   // base: Setting.routerBase,  // 应用的基路径
30 | });
31 | 
32 | /**
33 |  * 路由拦截
34 |  * 权限验证
35 |  */
36 | 
37 |  router.beforeEach((to, from, next) => {
38 |   // 判断是否需要登录才可以进入
39 |   if (to.matched.some(_ => _.meta.auth)) {
40 |       // 这里依据 token 判断是否登录，可视情况修改
41 |       const token = localStorage.getItem('lp_token');
42 | 
43 |       if (token && token !== 'undefined') {
44 |           next();
45 |       } else {
46 |           // 没有登录的时候跳转到登录界面
47 |           // 携带上登陆成功之后需要跳转的页面完整路径
48 |           store.state.isAccount = 1
49 |       }
50 |   } else {
51 |       // 不需要身份校验 直接通过
52 |       next();
53 |   }
54 | });
55 | 
56 | 
57 | 
58 | export default router;
59 | 


--------------------------------------------------------------------------------
/src/router/routes.js:
--------------------------------------------------------------------------------
  1 | // +----------------------------------------------------------------------
  2 | // | LightPicture [ 图床 ]
  3 | // +----------------------------------------------------------------------
  4 | // | 企业团队图片资源管理系统
  5 | // +----------------------------------------------------------------------
  6 | // | Github: https://github.com/osuuu/LightPicture
  7 | // +----------------------------------------------------------------------
  8 | // | Copyright © http://picture.h234.cn All rights reserved.
  9 | // +----------------------------------------------------------------------
 10 | // | Author: Team <admin@osuu.net>
 11 | // +----------------------------------------------------------------------
 12 | const meta = {
 13 |     auth: true
 14 | };
 15 | 
 16 | const frameIn = [{
 17 |     path: '/',
 18 |     component: () => import("@/views/layout/index.vue"),
 19 |     children: [
 20 |         {
 21 |             path: '',
 22 |             name: 'index',
 23 |             component: () => import("@/views/index/index.vue"),
 24 |             meta: {
 25 |                 title: '首页',
 26 |                 icon: 'osuu-net geek-menu_kongzhitai',
 27 |                 isShow: true,
 28 |                 isFold: false,
 29 |             }
 30 |         },
 31 |         {
 32 |             path: 'gallery',
 33 |             name: 'gallery',
 34 |             component: () => import("@/views/gallery/index.vue"),
 35 |             meta: {
 36 |                 ...meta,
 37 |                 title: '图库',
 38 |                 icon: 'osuu-net geek-yingxiaogongju-zhututubiao',
 39 |                 isShow: true,
 40 |                 isFold: false,
 41 |             }
 42 |         },
 43 |         {
 44 |             path: 'word',
 45 |             name: 'word',
 46 |             component: () => import("@/views/word/index.vue"),
 47 |             meta: {
 48 |                 ...meta,
 49 |                 title: '接口',
 50 |                 icon: 'osuu-net geek-shuju',
 51 |                 isShow: true,
 52 |                 isFold: false,
 53 |             }
 54 |         },
 55 |         {
 56 |             path: 'setup',
 57 |             name: 'setup',
 58 |             component: { render: (e) => e("router-view") },
 59 |             meta: {
 60 |                 title: '系统管理',
 61 |                 icon: 'osuu-net geek-shezhi',
 62 |                 isShow: true,
 63 |                 isFold: true,
 64 |             },
 65 |             children: [{
 66 |                 path: 'home',
 67 |                 name: "setup-home",
 68 |                 component: () => import("@/views/home/home.vue"),
 69 |                 meta: {
 70 |                     ...meta,
 71 |                     title: '概况',
 72 |                     isShow:true
 73 |                 }
 74 |             },
 75 |             
 76 |             {
 77 |                 path: 'storage',
 78 |                 name: "setup-storage",
 79 |                 component: () => import("@/views/setup/storage.vue"),
 80 |                 meta: {
 81 |                     ...meta,
 82 |                     title: '存储桶',
 83 |                     isShow:true
 84 |                 }
 85 |             },
 86 |             {
 87 |                 path: 'role',
 88 |                 name: "setup-role",
 89 |                 component: () => import("@/views/setup/role.vue"),
 90 |                 meta: {
 91 |                     ...meta,
 92 |                     title: '角色组',
 93 |                     isShow:true
 94 |                 }
 95 |             },
 96 |             {
 97 |                 path: 'member',
 98 |                 name: "setup-member",
 99 |                 component: () => import("@/views/setup/member.vue"),
100 |                 meta: {
101 |                     ...meta,
102 |                     title: '团队成员',
103 |                     isShow:true
104 |                 }
105 |             },
106 |             {
107 |                 path: 'admin',
108 |                 name: "setup-admin",
109 |                 component: () => import("@/views/setup/admin.vue"),
110 |                 meta: {
111 |                     ...meta,
112 |                     title: '系统设置',
113 |                     isShow:false
114 |                 }
115 |             },
116 | 
117 |             ]
118 |         },
119 |         {
120 |             path: 'userInfo',
121 |             name: 'userInfo',
122 |             component: () => import("@/views/user/userInfo.vue"),
123 |             meta: {
124 |                 ...meta,
125 |                 title: '个人资料',
126 |                 isShow: false
127 |             }
128 |         },
129 |         {
130 |             path: 'userpwd',
131 |             name: 'userpwd',
132 |             component: () => import("@/views/user/userpwd.vue"),
133 |             meta: {
134 |                 ...meta,
135 |                 title: '修改密码',
136 |                 isShow: false
137 |             }
138 |         },
139 |         {
140 |             path: 'about',
141 |             name: 'about',
142 |             component: () => import("@/views/user/about.vue"),
143 |             meta: {
144 |                 ...meta,
145 |                 title: '关于系统',
146 |                 isShow: false
147 |             }
148 |         },
149 |         {
150 |             path: 'update',
151 |             name: 'update',
152 |             component: () => import("@/views/user/update.vue"),
153 |             meta: {
154 |                 ...meta,
155 |                 title: '系统更新',
156 |                 isShow: false
157 |             }
158 |         },
159 | 
160 |     ]
161 | },
162 | 
163 | ];
164 | 
165 | 
166 | 
167 | 
168 | /**
169 |  * 错误页面
170 |  */
171 | 
172 | const errorPage = [
173 |     {
174 |         path: '*',
175 |         name: '404',
176 |         meta: {
177 |             title: '404'
178 |         },
179 |         component: () => import('@/views/error/404/index.vue')
180 |     },
181 | ];
182 | 
183 | // 导出需要显示菜单的
184 | export const frameInRoutes = frameIn;
185 | 
186 | // 重新组织后导出
187 | export default [
188 |     ...frameIn,
189 |     ...errorPage
190 | ];


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | // +----------------------------------------------------------------------
 2 | // | LightPicture [ 图床 ]
 3 | // +----------------------------------------------------------------------
 4 | // | 企业团队图片资源管理系统
 5 | // +----------------------------------------------------------------------
 6 | // | Github: https://github.com/osuuu/LightPicture
 7 | // +----------------------------------------------------------------------
 8 | // | Copyright © http://picture.h234.cn All rights reserved.
 9 | // +----------------------------------------------------------------------
10 | // | Author: Team <admin@osuu.net>
11 | // +----------------------------------------------------------------------
12 | import Vue from 'vue'
13 | import Vuex from 'vuex'
14 | import router from '@/router'
15 | 
16 | Vue.use(Vuex)
17 | 
18 | export default new Vuex.Store({
19 | 
20 |     state: {
21 |         isMobile: document.body.clientWidth < 768 ? true : false,//设备类型
22 |         isAccount: 0,
23 |         userInfo:{},
24 |         config:{},
25 |         isMenu:false
26 | 
27 |     },
28 |     mutations: {
29 |         switchAccount(state, param) {
30 |             state.isAccount = param;
31 |             if(param == 0){
32 |                 router.push({name:"index"})
33 |             }
34 |         },
35 |         addUserInfo(state, param) {
36 |             state.userInfo = param;
37 |         },
38 |         addConfig(state, param) {
39 |             state.config = param;
40 |             state.config.upload_rule =  param.upload_rule.split(",");
41 |         },
42 | 
43 |     },
44 |     actions: {
45 | 
46 |     },
47 | 
48 | })
49 | 


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
 1 | // +----------------------------------------------------------------------
 2 | // | LightPicture [ 图床 ]
 3 | // +----------------------------------------------------------------------
 4 | // | 企业团队图片资源管理系统
 5 | // +----------------------------------------------------------------------
 6 | // | Github: https://github.com/osuuu/LightPicture
 7 | // +----------------------------------------------------------------------
 8 | // | Copyright © http://picture.h234.cn All rights reserved.
 9 | // +----------------------------------------------------------------------
10 | // | Author: Team <admin@osuu.net>
11 | // +----------------------------------------------------------------------
12 | export function trim(str) {
13 |   return String.prototype.trim.call(str);
14 | }
15 | 
16 | export function isType(arg, type) {
17 |   return Object.prototype.toString.call(arg) === "[object " + type + "]";
18 | }
19 | 
20 | export function isWeixin() {
21 |   return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
22 | }
23 | 
24 | // 存储单位转换
25 | export function toSize(val) {
26 |   let size = Number(val)
27 |   if (size / 1024 / 1024 / 1024 / 1024 >= 1) {
28 |     return (size / 1024 / 1024 / 1024 / 1024).toFixed(2) + " TB"
29 |   } else
30 |   if (size / 1024 / 1024 / 1024 >= 1) {
31 |     return (size / 1024 / 1024 / 1024).toFixed(2) + " GB"
32 |   } else
33 |   if (size / 1024 / 1024 >= 1) {
34 |     return (size / 1024 / 1024).toFixed(2) + " MB"
35 |   } else
36 |   if (size / 1024 >= 1) {
37 |     return (size / 1024).toFixed(2) + " KB"
38 |   } else {
39 |     return size.toFixed(2) + " B"
40 |   }
41 | }
42 | 
43 | export function parseQuery() {
44 |   const res = {};
45 | 
46 |   const query = (location.href.split("?")[1] || "")
47 |     .trim()
48 |     .replace(/^(\?|#|&)/, "");
49 | 
50 |   if (!query) {
51 |     return res;
52 |   }
53 | 
54 |   query.split("&").forEach(param => {
55 |     const parts = param.replace(/\+/g, " ").split("=");
56 |     const key = decodeURIComponent(parts.shift());
57 |     const val = parts.length > 0 ? decodeURIComponent(parts.join("=")) : null;
58 | 
59 |     if (res[key] === undefined) {
60 |       res[key] = val;
61 |     } else if (Array.isArray(res[key])) {
62 |       res[key].push(val);
63 |     } else {
64 |       res[key] = [res[key], val];
65 |     }
66 |   });
67 | 
68 |   return res;
69 | }
70 | 
71 | 
72 | 
73 | const VUE_APP_API_URL = process.env.VUE_APP_API_URL || `${location.origin}/api`;
74 | const VUE_APP_WS_URL =
75 |   process.env.VUE_APP_WS_URL || `ws:${location.hostname}:20003`;
76 | 
77 | export {
78 |   VUE_APP_API_URL,
79 |   VUE_APP_WS_URL
80 | };


--------------------------------------------------------------------------------
/src/utils/request.js:
--------------------------------------------------------------------------------
  1 | // +----------------------------------------------------------------------
  2 | // | LightPicture [ 图床 ]
  3 | // +----------------------------------------------------------------------
  4 | // | 企业团队图片资源管理系统
  5 | // +----------------------------------------------------------------------
  6 | // | Github: https://github.com/osuuu/LightPicture
  7 | // +----------------------------------------------------------------------
  8 | // | Copyright © http://picture.h234.cn All rights reserved.
  9 | // +----------------------------------------------------------------------
 10 | // | Author: Team <admin@osuu.net>
 11 | // +----------------------------------------------------------------------
 12 | import axios from 'axios'
 13 | import router from '@/router'
 14 | import { Message,Notice } from 'view-design';
 15 | import store from '@/store'
 16 | 
 17 | const service = axios.create({
 18 |   baseURL: process.env.VUE_APP_BASE_API,
 19 |   timeout: 10000
 20 | })
 21 | 
 22 | // http request 请求拦截器
 23 | service.interceptors.request.use(
 24 |   config => {
 25 |     const AccessToken = localStorage.getItem('lp_token')
 26 |     if (AccessToken) {
 27 |       config.headers['Content-Type'] = 'application/json;charset=UTF-8'
 28 |       config.headers['Token'] = AccessToken
 29 |     }
 30 |     config.headers['Accept-Token'] = 'AVOCqrcST9Wy5hr2'
 31 |     config.headers['User-Time'] = Date.parse(new Date())
 32 | 
 33 |     return config
 34 |   },
 35 |   error => {
 36 |     return Promise.reject(error)
 37 |   }
 38 | )
 39 | 
 40 | // http response 响应拦截器
 41 | service.interceptors.response.use(
 42 | 
 43 |   response => {
 44 |     const res = response.data
 45 |     if (res.code == -1) {
 46 |       router.replace({
 47 |         path: '/',
 48 |         // query: {
 49 |         //   redirect: router.currentRoute.fullPath
 50 |         // }
 51 |       });
 52 |       store.state.isAccount = 1
 53 |       store.state.userInfo = {}
 54 |       return
 55 |     }
 56 |     return response.data;
 57 |   },
 58 |   err => {
 59 |     if (err && err.response && err.response.status) {
 60 |       switch (err.response.status) {
 61 |         case 400:
 62 |           err.message = "错误请求";
 63 |           break;
 64 |         case 401:
 65 |           err.message = "未授权，请重新登录";
 66 |           break;
 67 |         case 403:
 68 |           err.message = "拒绝访问，请重新登录";
 69 |           break;
 70 |         case 404:
 71 |           err.message = "请求错误,未找到该资源";
 72 |           break;
 73 |         case 405:
 74 |           err.message = "请求方法未允许";
 75 |           break;
 76 |         case 408:
 77 |           err.message = "请求超时";
 78 |           break;
 79 |         case 500:
 80 |           err.message = "服务器端出错";
 81 |           break;
 82 |         case 501:
 83 |           err.message = "网络未实现";
 84 |           break;
 85 |         case 502:
 86 |           err.message = "网络错误";
 87 |           break;
 88 |         case 503:
 89 |           err.message = "服务不可用";
 90 |           break;
 91 |         case 504:
 92 |           err.message = "网络超时";
 93 |           break;
 94 |         case 505:
 95 |           err.message = "http版本不支持该请求";
 96 |           break;
 97 |         default:
 98 |           err.message = "连接错误";
 99 |       }
100 |     }
101 |     if (err.response.data.message) {
102 |       Notice.error({
103 |         title: '系统出错',
104 |         desc: err.response.data.message
105 |       });
106 |     }
107 | 
108 |     Message.error(err.message + ' ' + err.response.status);
109 |     return Promise.reject(err)
110 |   }
111 | )
112 | 
113 | export default service
114 | 


--------------------------------------------------------------------------------
/src/utils/store/cookie.js:
--------------------------------------------------------------------------------
  1 | // +----------------------------------------------------------------------
  2 | // | LightPicture [ 图床 ]
  3 | // +----------------------------------------------------------------------
  4 | // | 企业团队图片资源管理系统
  5 | // +----------------------------------------------------------------------
  6 | // | Github: https://github.com/osuuu/LightPicture
  7 | // +----------------------------------------------------------------------
  8 | // | Copyright © http://picture.h234.cn All rights reserved.
  9 | // +----------------------------------------------------------------------
 10 | // | Author: Team <admin@osuu.net>
 11 | // +----------------------------------------------------------------------
 12 | import { trim, isType } from "@/utils";
 13 | import CryptoJS from "crypto-js"; //加密js
 14 | 
 15 | 
 16 | // 加密设置cookie
 17 | function setCookie(portId, psw, exdays) {
 18 |   // Encrypt，加密账号密码
 19 |   var cipherPortId = CryptoJS.AES.encrypt(
 20 |     portId + "",
 21 |     "secretkey123"
 22 |   ).toString();
 23 |   var cipherPsw = CryptoJS.AES.encrypt(psw + "", "secretkey123").toString();
 24 | 
 25 |   var exdate = new Date(); //获取时间
 26 |   exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
 27 |   //字符串拼接cookie，为什么这里用了==，因为加密后的字符串也有个=号，影响下面getcookie的字符串切割，你也可以使用更炫酷的符号。
 28 |   window.document.cookie =
 29 |     "username" +
 30 |     "==" +
 31 |     cipherPortId +
 32 |     ";path=/;expires=" +
 33 |     exdate.toGMTString();
 34 |   window.document.cookie =
 35 |     "password" +
 36 |     "==" +
 37 |     cipherPsw +
 38 |     ";path=/;expires=" +
 39 |     exdate.toGMTString();
 40 | }
 41 | 
 42 | //读取加密cookie
 43 | function getCookie() {
 44 |   if (document.cookie.length > 0) {
 45 |     var arr = document.cookie.split("; "); //这里显示的格式请根据自己的代码更改
 46 |     for (var i = 0; i < arr.length; i++) {
 47 |       var arr2 = arr[i].split("=="); //根据==切割
 48 |       //判断查找相对应的值
 49 |       if (arr2[0] == "username") {
 50 |         // Decrypt，将解密后的内容赋值给账号
 51 |         var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
 52 |         var username = bytes.toString(CryptoJS.enc.Utf8);
 53 |       } else if (arr2[0] == "password") {
 54 |         // Decrypt，将解密后的内容赋值给密码
 55 |         var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
 56 |         var password = bytes.toString(CryptoJS.enc.Utf8);
 57 |       }
 58 |     }
 59 |     return {username,password};
 60 |     
 61 |   }
 62 | }
 63 | 
 64 | // 取cookie
 65 | function get(key) {
 66 |   if (!key || !_has(key)) {
 67 |     return null;
 68 |   }
 69 |   let regexpStr =
 70 |     "(?:^|.*;\\s*)" +
 71 |     escape(key).replace(/[-.+*]/g, "\\$&") +
 72 |     "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*";
 73 |   return JSON.parse(unescape(window.document.cookie.replace(new RegExp(regexpStr), "$1")));
 74 | }
 75 | 
 76 | function all() {
 77 |   let cookies = window.document.cookie.split(/; ?/g),
 78 |     data = {};
 79 |   for (let i = cookies.length - 1; i >= 0; i--) {
 80 |     if (!trim(cookies[i])) {
 81 |       continue;
 82 |     }
 83 |     let kvp = cookies[i].split("=");
 84 |     let key = unescape(kvp[0]);
 85 |     data[key] = unescape(kvp[1]);
 86 |   }
 87 |   return data;
 88 | }
 89 | 
 90 | // 存cookie
 91 | function set(key, data, time) {
 92 |   if (!key) {
 93 |     return;
 94 |   }
 95 |   var expiresds = new Date(); //获取时间
 96 |   expiresds.setTime(expiresds.getTime() + 24 * 60 * 60 * 1000 * time); //保存的天数
 97 |   data = JSON.stringify(data);
 98 |   window.document.cookie =
 99 |     escape(key) + "=" + escape(data) + "; expires=" + expiresds + "; path=/";
100 | }
101 | 
102 | 
103 | 
104 | 
105 | 
106 | function remove(key) {
107 |   if (!key || !_has(key)) {
108 |     return;
109 |   }
110 |   window.document.cookie = escape(key) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
111 | }
112 | 
113 | function clearAll() {
114 |   Object.keys(all()).forEach(function (key) {
115 |     remove(key);
116 |   });
117 | }
118 | 
119 | function _has(key) {
120 |   return new RegExp(
121 |     "(?:^|;\\s*)" + escape(key).replace(/[-.+*]/g, "\\$&") + "\\s*\\="
122 |   ).test(window.document.cookie);
123 | }
124 | 
125 | export default {
126 |   setCookie,
127 |   getCookie,
128 |   get,
129 |   all,
130 |   set,
131 |   remove,
132 |   clearAll,
133 |   has: _has
134 | };
135 | 


--------------------------------------------------------------------------------
/src/utils/store/localStorage.js:
--------------------------------------------------------------------------------
 1 | // +----------------------------------------------------------------------
 2 | // | LightPicture [ 图床 ]
 3 | // +----------------------------------------------------------------------
 4 | // | 企业团队图片资源管理系统
 5 | // +----------------------------------------------------------------------
 6 | // | Github: https://github.com/osuuu/LightPicture
 7 | // +----------------------------------------------------------------------
 8 | // | Copyright © http://picture.h234.cn All rights reserved.
 9 | // +----------------------------------------------------------------------
10 | // | Author: Team <admin@osuu.net>
11 | // +----------------------------------------------------------------------
12 | function localStorage() {
13 |   return window.localStorage;
14 | }
15 | 
16 | function get(key) {
17 |   return JSON.parse(localStorage().getItem(key));
18 | }
19 | 
20 | function set(key, data) {
21 |   return localStorage().setItem(key, JSON.stringify(data));
22 | }
23 | 
24 | function all() {
25 |   const data = {};
26 |   for (var i = localStorage().length - 1; i >= 0; i--) {
27 |     var key = localStorage().key(i);
28 |     data[key] = get(key);
29 |   }
30 | 
31 |   return data;
32 | }
33 | 
34 | function remove(key) {
35 |   return localStorage().removeItem(key);
36 | }
37 | 
38 | function clearAll() {
39 |   return localStorage().clear();
40 | }
41 | 
42 | function has(key) {
43 |   return localStorage().getItem(key) !== null;
44 | }
45 | 
46 | export default {
47 |   get,
48 |   set,
49 |   all,
50 |   remove,
51 |   clearAll,
52 |   has
53 | };
54 | 


--------------------------------------------------------------------------------
/src/views/error/404/index.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |     <div>
 16 |         <div class="pages">
 17 |             <div class="pages-img">
 18 |                 <div class="pages-img-element">
 19 |                 </div>
 20 |             </div>
 21 |             <div class="pages-content">
 22 |                 <h1>404</h1>
 23 |                 <div class="pages-content-desc">抱歉，你访问的页面不存在</div>
 24 |                 <Button type="primary" @click="$router.push('/')">返回首页</Button>
 25 |                 <Button style="margin-left:10px" @click="$router.go(-1)">返回上一页</Button>
 26 |             </div>
 27 |         </div>
 28 |     </div>
 29 | </template>
 30 | <script>
 31 | 
 32 | </script>
 33 | 
 34 | <style lang="less" scoped>
 35 |     .pages {
 36 |         display: -webkit - box;
 37 |         display: -ms - flexbox;
 38 |         display: flex;
 39 |         webkit-box-align: center;
 40 |         ms-flex-align: center;
 41 |         align-items: center;
 42 |         height: 80%;
 43 |         min-height: 500 px;
 44 | 
 45 |         .pages-img {
 46 |             padding-right: 88px;
 47 |             -webkit-box-flex: 0;
 48 |             -ms-flex: 0 0 62.5%;
 49 |             flex: 0 0 62.5%;
 50 |             width: 62.5%;
 51 |             padding-right: 152px;
 52 |             zoom: 1;
 53 | 
 54 |             .pages-img-element {
 55 |                 float: right;
 56 |                 width: 100%;
 57 |                 max-width: 430px;
 58 |                 height: 360px;
 59 |                 background-image: url('../../../assets/imgs/404.png');
 60 |                 background-repeat: no-repeat;
 61 |                 background-position: 50% 50%;
 62 |                 background-size: contain;
 63 |             }
 64 |         }
 65 | 
 66 |         .pages-content {
 67 |             -webkit-box-flex: 1;
 68 |             -ms-flex: auto;
 69 |             flex: auto;
 70 | 
 71 |             h1 {
 72 |                 margin-bottom: 24px;
 73 |                 color: #515a6e;
 74 |                 font-weight: 600;
 75 |                 font-size: 72px;
 76 |                 line-height: 72px;
 77 |             }
 78 | 
 79 |             .pages-content-desc {
 80 |                 margin-bottom: 16px;
 81 |                 color: #808695;
 82 |                 font-size: 20px;
 83 |                 line-height: 28px;
 84 |             }
 85 |         }
 86 |     }
 87 | 
 88 |     @media screen and (max-width: 576px) {
 89 |         .pages {
 90 |             display: block;
 91 |             text-align: center;
 92 | 
 93 |             .pages-img {
 94 |                 margin: 0 auto 24px;
 95 |                 padding-right: 0;
 96 |             }
 97 |         }
 98 |     }
 99 | 
100 |     @media screen and (max-width: 480px) {
101 |         .pages-img {
102 |             margin-bottom: -24px;
103 |             overflow: hidden;
104 |         }
105 |     }
106 | </style>


--------------------------------------------------------------------------------
/src/views/gallery/index.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div>
 16 |     <div class="page-content">
 17 |       <div class="container-fluid">
 18 |         <div class="card">
 19 |           <div class="card-head">图库
 20 |             <div class="search-input">
 21 |               <Input v-model="name" size="small" placeholder="请输入名称搜索" search />
 22 |             </div>
 23 |           </div>
 24 |           <div class="card-body padding-top0">
 25 |             <div class="card-menu">
 26 |               <Row>
 27 |                 <Col :xs="{ span: 24 }" :lg="{ span: 12 }" style="margin: 5px 0">
 28 |                 <RadioGroup v-model="type" type="button" button-style="solid">
 29 |                   <Radio :label="2">全部</Radio>
 30 |                   <Radio :label="1">只看我的</Radio>
 31 |                 </RadioGroup>
 32 |                 </Col>
 33 |                 <Col :xs="{ span: 24 }" :lg="{ span: 12 }" style="margin: 5px 0"
 34 |                   :class="{right:!$store.state.isMobile}">
 35 |                 <Button type="primary" icon="md-checkbox-outline" @click="allClick">全选</Button>
 36 |                 <Button type="error" icon="md-trash" style="margin-left:10px" @click="allDel" :loading="loading2"
 37 |                   :disabled="selectList.length==0?true:false">删除所选</Button>
 38 |                 </Col>
 39 |               </Row>
 40 | 
 41 |             </div>
 42 |             <div v-if="data.length == 0 && !loading">
 43 |               <Empty :text="'暂无数据'"></Empty>
 44 |             </div>
 45 |             <Row :gutter="24" v-viewer>
 46 |               <div class="demo-spin-container" v-if="loading">
 47 |                 <Spin fix size="large"></Spin>
 48 |               </div>
 49 |               <Col :xxl="3" :xl="4" :lg="6" :md="8" :sm="8" :xs="12" class="ivu-mb " v-for="item in data"
 50 |                 :key="item.id">
 51 |               <Card class="list-goods-list-item" :class="{active:selectList.indexOf(item.id) != -1}">
 52 | 
 53 |                 <div class="img-main">
 54 |                   <img v-lazy="item.url" :src="item.url" alt="">
 55 |                 </div>
 56 | 
 57 | 
 58 |                 <Tooltip :content="item.name" placement="top">
 59 |                   <div class="name">
 60 |                     {{item.name}}
 61 |                   </div>
 62 |                 </Tooltip>
 63 |                 <div class="btn-main">
 64 |                   <Button type="info" ghost @click="select(item)">选择</Button>
 65 |                   <Button type="success" ghost @click="details(item)">详情</Button>
 66 |                 </div>
 67 |               </Card>
 68 |               </Col>
 69 |             </Row>
 70 |             <div class="paging">
 71 |               <Page :total="Number(total)" :current="page" :page-size="size" :page-size-opts="[12, 24, 36, 48]"
 72 |                 :simple="$store.state.isMobile" @on-change="pageChange" @on-page-size-change="pageSizeChange" show-total
 73 |                 show-sizer show-elevator />
 74 |             </div>
 75 |           </div>
 76 |         </div>
 77 |       </div>
 78 |     </div>
 79 |     <Modal :title="'图片ID:'+detailsItem.id" v-model="modal" class-name="vertical-center-modal">
 80 |       <List border size="small">
 81 |         <ListItem>链接：
 82 |           <Input v-model="detailsItem.url" style="width:85%">
 83 |           <Button slot="append" type="primary" v-clipboard:copy="detailsItem.url" v-clipboard:success="onCopy"
 84 |             v-clipboard:error="onError">复制</Button>
 85 |           </Input>
 86 | 
 87 |         </ListItem>
 88 |         <ListItem>位置：
 89 |           <Input v-model="detailsItem.path" style="width:85%"> </Input>
 90 |         </ListItem>
 91 |         <ListItem>大小：{{turnSize(detailsItem.size)}} </ListItem>
 92 |         <ListItem>类型：{{detailsItem.mime}}</ListItem>
 93 |         <ListItem>时间：{{detailsItem.create_time}}</ListItem>
 94 |         <ListItem>所属：{{detailsItem.user_email}} （{{detailsItem.user_name}}）</ListItem>
 95 | 
 96 |       </List>
 97 |       <div slot="footer">
 98 |         <Button type="error" @click="del(detailsItem.id)">删除</Button>
 99 |         <Button type="primary" @click="saveTx(detailsItem.url)">设为头像</Button>
100 |         <Button type="success" @click="goImg">打开链接</Button>
101 |       </div>
102 |     </Modal>
103 |   </div>
104 | </template>
105 | 
106 | <script>
107 |   import {
108 |     getImages,
109 |     delImages,
110 |     putUpdate
111 |   } from "@/api"
112 |   import {
113 |     toSize
114 |   } from "@/utils/index"
115 |   export default {
116 |     data() {
117 |       return {
118 |         page: 1,
119 |         size: 12,
120 |         name: "",
121 |         type: 1,
122 |         total: "",
123 |         loading: true,
124 |         loading2: false,
125 |         data: [],
126 |         selectList: [],
127 |         detailsItem: {},
128 |         modal: false,
129 |         all: true,
130 |         delLength: 0
131 |       };
132 |     },
133 |     watch: {
134 |       name(newVal, oldVal) {
135 |         if (newVal != oldVal) {
136 |           this.page = 1
137 |           this.loading = true
138 |           this._getData();
139 |         }
140 |       },
141 |       type(newVal, oldVal) {
142 |         if (newVal != oldVal) {
143 |           this.page = 1
144 |           this.loading = true
145 |           this._getData();
146 |         }
147 |       },
148 |     },
149 |     created() {
150 |       this._getData()
151 |     },
152 |     computed: {
153 |       turnSize() {
154 |         return (val) => {
155 |           return toSize(val)
156 |         };
157 |       },
158 |     },
159 | 
160 |     methods: {
161 |       // 获取列表
162 |       _getData() {
163 |         this.selectList = []
164 |         this.data = []
165 |         this.loading = true
166 |         getImages({
167 |           page: this.page,
168 |           size: this.size,
169 |           name: this.name,
170 |           type: this.type,
171 |         }).then((res) => {
172 |           this.data = res.data.data;
173 |           this.total = res.data.total;
174 |           this.loading = false
175 | 
176 |         });
177 |       },
178 |       // 详情
179 |       details(item) {
180 |         this.detailsItem = {
181 |           ...item
182 |         }
183 |         this.modal = true
184 |       },
185 |       // 打开图片
186 |       goImg() {
187 |         window.open(this.detailsItem.url);
188 |       },
189 |       select(item) {
190 |         let e = this.selectList.indexOf(item.id)
191 |         if (e == -1) {
192 |           this.selectList.push(item.id)
193 |         } else {
194 |           this.selectList.splice(e, 1)
195 |         }
196 |       },
197 |       onCopy(e) {
198 |         this.$Message.success({
199 |           background: true,
200 |           content: '复制成功'
201 |         });
202 |       },
203 |       onError(e) {
204 |         this.$Message.error({
205 |           background: true,
206 |           content: '复制失败'
207 |         });
208 |       },
209 |       // 全选
210 |       allClick() {
211 |         let _this = this
212 |         this.data.map(function (item) {
213 |           let e = _this.selectList.indexOf(item.id)
214 |           if (_this.all) {
215 |             if (e == -1) {
216 |               _this.selectList.push(item.id)
217 |             }
218 |           } else {
219 |             if (e != -1) {
220 |               _this.selectList.splice(e, 1)
221 |             }
222 |           }
223 |         })
224 |         this.all = !this.all
225 |         console.log(this.selectList)
226 |       },
227 |       // 删除
228 |       del(id) {
229 |         this.$Modal.confirm({
230 |           title: "删除确认",
231 |           content: "删除后无法恢复，是否继续？",
232 |           onOk: () => {
233 |             this.modal = false
234 |             this.delFunction(id);
235 |           },
236 |         });
237 |       },
238 |       // 删除所选
239 |       allDel() {
240 |         this.$Modal.confirm({
241 |           title: "删除确认",
242 |           content: "删除后无法恢复，是否继续？",
243 |           onOk: () => {
244 |             this.modal = false
245 |             let _this = this
246 |             this.delLength = this.selectList.length
247 |             this.selectList.map(function (item) {
248 |               _this.delFunction(item);
249 |             })
250 |           },
251 |         });
252 |       },
253 |       // 删除方法
254 |       delFunction(id) {
255 |         this.loading2 = true
256 |         this.load = true
257 |         delImages({
258 |           id: id,
259 |         }).then((res) => {
260 |           if (res.code == 200) {
261 |             this.$Notice.success({
262 |               title: res.msg,
263 |               desc: res.data
264 |             });
265 | 
266 |           } else {
267 |             this.$Notice.error({
268 |               title: res.msg,
269 |               desc: res.data
270 |             });
271 |           }
272 |           if (this.delLength <= 1) {
273 |             this.page = 1
274 |             this._getData();
275 |           }else{
276 |             this.delLength--
277 |           }
278 |           this.loading2 = false
279 |         });
280 |       },
281 |       // 设为头像
282 |       saveTx(url) {
283 |         putUpdate({
284 |           avatar: url,
285 |         }).then((res) => {
286 |           this.modal = false
287 |           this.$Message.success({
288 |             background: true,
289 |             content: res.msg,
290 |           });
291 |         });
292 |       },
293 |       // 分页跳转
294 |       pageChange(val) {
295 |         this.page = val;
296 |         this._getData();
297 |       },
298 |       pageSizeChange(val) {
299 |         this.page = 1;
300 |         this.size = val;
301 |         this._getData();
302 |       },
303 |     },
304 |   };
305 | </script>
306 | 
307 | <style lang="less" scoped>
308 |   .ivu-mb {
309 |     margin-bottom: 15px;
310 | 
311 |     .list-goods-list-item {
312 |       .img-main {
313 |         height: 150px;
314 | 
315 |         img {
316 |           max-height: 100%;
317 |         }
318 |       }
319 | 
320 |       .ivu-tooltip {
321 |         display: block;
322 | 
323 |         /deep/.ivu-tooltip-rel {
324 |           display: block;
325 |         }
326 |       }
327 | 
328 |       .name {
329 |         text-align: center;
330 |         font-size: 14px;
331 |         white-space: nowrap;
332 |         overflow: hidden;
333 |         text-overflow: ellipsis;
334 |         margin-top: 10px;
335 |         cursor: pointer;
336 |       }
337 | 
338 |       .btn-main {
339 |         margin-top: 10px;
340 |         display: flex;
341 |         justify-content: space-between;
342 | 
343 |         button {
344 |           width: 48%;
345 |         }
346 | 
347 |         .ivu-btn {
348 |           padding: 0;
349 |         }
350 |       }
351 |     }
352 | 
353 |     .active {
354 |       background: rgba(204, 232, 255, 0.5);
355 |       border: 1px solid rgba(153, 209, 255, 0.57);
356 |     }
357 |   }
358 | 
359 |   .vertical-center-modal {
360 |     display: flex;
361 |     align-items: center;
362 |     justify-content: center;
363 | 
364 |     .ivu-modal {
365 |       top: 0;
366 |     }
367 |   }
368 | 
369 |   /deep/ .ivu-radio-wrapper-checked {
370 |     background: #2d8cf0;
371 |     color: #fff;
372 |   }
373 | 
374 | 
375 |   .right {
376 |     text-align: right;
377 |   }
378 | </style>


--------------------------------------------------------------------------------
/src/views/home/base-info.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <Row :gutter="24">
 16 |     <Col v-bind="grid" class="ivu-mb">
 17 |     <div class="card card-animate">
 18 |       <div class="card-body">
 19 |         <div class="avatar-sm float-right">
 20 |           <span class="avatar-title bg-soft-primary rounded-circle">
 21 |             <span class="osuu-net geek-chengyuan"></span>
 22 |           </span>
 23 |         </div>
 24 |         <h6 class="text-muted text-uppercase mt-0">成员总数</h6>
 25 | 
 26 |         <h3 class="my-3">
 27 |           <span v-if="!loading">{{data.userCount}}</span>
 28 |           <Icon custom="osuu-net geek-jiazai" v-else />
 29 |         </h3>
 30 | 
 31 |       </div>
 32 |     </div>
 33 |     </Col>
 34 |     <Col v-bind="grid" class="ivu-mb">
 35 |     <div class="card card-animate">
 36 |       <div class="card-body">
 37 |         <div class="avatar-sm float-right">
 38 |           <span class="avatar-title bg-soft-primary rounded-circle">
 39 |             <span class="osuu-net geek-cunchushebei"></span>
 40 |           </span>
 41 |         </div>
 42 |         <h6 class="text-muted text-uppercase mt-0">占用存储</h6>
 43 |         <h3 class="my-3">
 44 |           <span v-if="!loading">{{turnSize(data.imgSize)}}</span>
 45 |           <Icon custom="osuu-net geek-jiazai" v-else />
 46 |         </h3>
 47 |       </div>
 48 |     </div>
 49 |     </Col>
 50 |     <Col v-bind="grid" class="ivu-mb">
 51 |     <div class="card card-animate">
 52 |       <div class="card-body">
 53 |         <div class="avatar-sm float-right">
 54 |           <span class="avatar-title bg-soft-primary rounded-circle">
 55 |             <span class="osuu-net geek-duosucai"></span>
 56 |           </span>
 57 |         </div>
 58 |         <h6 class="text-muted text-uppercase mt-0">图片总数</h6>
 59 |         <h3 class="my-3">
 60 |           <span v-if="!loading">{{data.imgCount}}</span>
 61 |           <Icon custom="osuu-net geek-jiazai" v-else />
 62 |         </h3>
 63 | 
 64 |       </div>
 65 |     </div>
 66 |     </Col>
 67 |     <Col v-bind="grid" class="ivu-mb">
 68 |     <div class="card card-animate">
 69 |       <div class="card-body">
 70 |         <div class="avatar-sm float-right">
 71 |           <span class="avatar-title bg-soft-primary rounded-circle">
 72 |             <span class="osuu-net geek-ai-img"></span>
 73 |           </span>
 74 |         </div>
 75 |         <h6 class="text-muted text-uppercase mt-0">我的图片</h6>
 76 |         <h3 class="my-3">
 77 |           <span v-if="!loading">{{data.imgMyCount}}</span>
 78 |           <Icon custom="osuu-net geek-jiazai" v-else />
 79 |         </h3>
 80 |       </div>
 81 |     </div>
 82 |     </Col>
 83 |   </Row>
 84 | </template>
 85 | <script>
 86 |   import {
 87 |     getUserHome
 88 |   } from "@/api/index";
 89 |   import {
 90 |     toSize
 91 |   } from "@/utils/index"
 92 |   export default {
 93 |     data() {
 94 |       return {
 95 |         grid: {
 96 |           xl: 6,
 97 |           lg: 12,
 98 |           md: 12,
 99 |           sm: 12,
100 |           xs: 24,
101 |         },
102 |         data: {},
103 |         loading:true
104 |       };
105 |     },
106 | 
107 |     computed: {
108 |       turnSize() {
109 |         return (val) => {
110 |           return toSize(val)
111 |         };
112 |       },
113 |     },
114 |     created() {
115 |       this._getHome();
116 |     },
117 |     methods: {
118 |       _getHome() {
119 |         getUserHome().then((res) => {
120 |           this.data = res.data;
121 |           this.loading = false
122 |         });
123 |       },
124 |     },
125 |   };
126 | </script>
127 | <style scoped>
128 |   .avatar-title .osuu-net {
129 |     font-size: 25px;
130 |     color: #2d8cf0;
131 | 
132 |   }
133 | 
134 |   .geek-jiazai {
135 |     -webkit-animation: turn 2s linear infinite;
136 |   }
137 | 
138 |   @-webkit-keyframes turn {
139 |     0% {
140 |       -webkit-transform: rotate(0deg);
141 |     }
142 | 
143 |     100% {
144 |       -webkit-transform: rotate(360deg);
145 |     }
146 |   }
147 | </style>


--------------------------------------------------------------------------------
/src/views/home/home.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div>
 16 |     <div class="page-content">
 17 |       <div class="container-fluid">
 18 |         <base-info />
 19 |         <Row :gutter="24">
 20 |           <Col :lg="{ span: 16 }">
 21 |           <leftchart></leftchart>
 22 |           </Col>
 23 |           <Col :lg="{ span: 8 }">
 24 |           <rightchart></rightchart>
 25 |           </Col>
 26 |         </Row>
 27 |       </div>
 28 |     </div>
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script>
 33 |   import baseInfo from "./base-info";
 34 |   import leftchart from "./left-chart";
 35 |   import rightchart from "./right-chart";
 36 | 
 37 |   import {
 38 |     getUser
 39 |   } from "@/api/index";
 40 | 
 41 |   export default {
 42 |     data() {
 43 |       return {
 44 |         user: {},
 45 | 
 46 |       };
 47 |     },
 48 |     created() {},
 49 | 
 50 |     components: {
 51 |       baseInfo,
 52 |       leftchart,
 53 |       rightchart
 54 |     },
 55 |     methods: {
 56 |       goLink(url) {
 57 |         var {
 58 |           href
 59 |         } = this.$router.resolve({
 60 |           path: url,
 61 |         });
 62 |         window.open(href);
 63 |       },
 64 | 
 65 |     },
 66 |   };
 67 | </script>
 68 | 
 69 | <style lang="less" scoped>
 70 |   @deep: ~">>>";
 71 | 
 72 |   .ivu-mb {
 73 |     width: 33.33%;
 74 |     position: relative;
 75 |     float: left;
 76 |     margin-bottom: 30px !important;
 77 |     text-align: center;
 78 |     cursor: pointer;
 79 | 
 80 |     .iconfont {
 81 |       margin-bottom: 10px;
 82 |     }
 83 | 
 84 |     p:hover {
 85 |       color: #2d8cf0
 86 |     }
 87 |   }
 88 | 
 89 |   .card-title {
 90 |     margin-bottom: 10px;
 91 |   }
 92 | 
 93 |   @{deep}.ivu-divider-inner-text {
 94 |     color: #999
 95 |   }
 96 | 
 97 |   .ivu-alert {
 98 |     padding-right: 8px;
 99 |   }
100 | </style>


--------------------------------------------------------------------------------
/src/views/home/left-chart.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div class="card card-animate">
 16 |     <div class="card-body">
 17 |       <h4 class="card-title d-inline-block">
 18 |         近期动态
 19 |         <div class="menu">
 20 |           <Select v-model="read" style="width:100px" size="small" @on-change="onChange" v-if="userInfo.role.is_admin == 1">
 21 |             <Option v-for="item in userList" :value="item.key" :key="item.key">{{ item.name }}</Option>
 22 |           </Select>
 23 |           <Select v-model="type" style="width:100px;margin-left:10px" @on-change="onChange" size="small">
 24 |             <Option v-for="item in typeList" :value="item.key" :key="item.key">{{ item.name }}</Option>
 25 |           </Select>
 26 |         </div>
 27 |       </h4>
 28 | 
 29 |       <div style="height:380px">
 30 | 
 31 | 
 32 |         <div class="loading" v-if="loading">
 33 |           <div class="main">
 34 |             <span></span>
 35 |           </div>
 36 |           <div class="text">客官请稍后</div>
 37 |         </div>
 38 |         <List v-else>
 39 |           <Scroll height="380" :on-reach-bottom="handleReachBottom">
 40 |             <ListItem v-for="item in data" :key="item.id">
 41 |               <ListItemMeta :avatar="item.user.avatar"
 42 |                 :title="`${item.content} ${item.operate_cont?' - '+item.operate_cont:''} ${item.operate_id?' （'+item.operate_id+'）':''} `"
 43 |                 :description="`${item.create_time} - ${item.user.email} ${item.user.username?' ('+item.user.username+')':''}`" />
 44 |             </ListItem>
 45 |           </Scroll>
 46 |         </List>
 47 | 
 48 |       </div>
 49 |     </div>
 50 |   </div>
 51 | </template>
 52 | <script>
 53 |   import {
 54 |     getHomeLog
 55 |   } from "@/api/index";
 56 |   import {
 57 |     mapState
 58 |   } from "vuex";
 59 |   export default {
 60 |     data() {
 61 |       return {
 62 |         data: [],
 63 |         page: 1,
 64 |         size: 10,
 65 |         read: 1,
 66 |         userList: [{
 67 |             key: 1,
 68 |             name: "只看我的"
 69 |           },
 70 |           {
 71 |             key: 2,
 72 |             name: "全部成员"
 73 |           },
 74 | 
 75 |         ],
 76 |         type: 1,
 77 |         typeList: [{
 78 |             key: 1,
 79 |             name: "全部动态"
 80 |           },
 81 |           {
 82 |             key: 2,
 83 |             name: "图片操作"
 84 |           }, {
 85 |             key: 3,
 86 |             name: "系统操作"
 87 |           }
 88 |         ],
 89 |         loading: true,
 90 | 
 91 |       };
 92 |     },
 93 |     created() {
 94 |       this._getData();
 95 |     },
 96 |     computed: {
 97 |       ...mapState(["userInfo", "config"]),
 98 |     },
 99 | 
100 |     methods: {
101 |       _getData() {
102 |         getHomeLog({
103 |           page: this.page,
104 |           size: this.size,
105 |           read: this.read,
106 |           type: this.type,
107 |         }).then((res) => {
108 |           res.data.data.map((item) => {
109 |             this.data.push(item)
110 |           })
111 |           this.loading = false
112 |         });
113 |       },
114 |       onChange() {
115 |         this.loading = true
116 |         this.page = 1
117 |         this.data = []
118 |         this._getData();
119 |       },
120 |       handleReachBottom() {
121 |         return new Promise(resolve => {
122 |           setTimeout(() => {
123 |             this.page++
124 |             this._getData();
125 |             resolve();
126 |           }, 2000);
127 |         });
128 |       }
129 | 
130 |     },
131 | 
132 |   };
133 | </script>
134 | <style scoped lang="less">
135 |   /deep/.ivu-scroll-container::-webkit-scrollbar {
136 |     /*滚动条整体样式*/
137 |     width: 10px;
138 |     /*高宽分别对应横竖滚动条的尺寸*/
139 |     height: 1px;
140 |   }
141 | 
142 |   /deep/.ivu-scroll-container::-webkit-scrollbar-thumb {
143 |     /*滚动条里面小方块*/
144 |     -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
145 |     background: rgb(204, 204, 204);
146 |     border-radius: 9px;
147 |   }
148 | 
149 |   /deep/.ivu-scroll-container::-webkit-scrollbar-track {
150 |     background-color: rgb(238, 238, 238);
151 |     border-radius: 9px;
152 |   }
153 | 
154 |   .menu {
155 |     float: right;
156 |     font-weight: normal;
157 |   }
158 | 
159 |   .card-title {
160 |     margin-bottom: 20px;
161 |   }
162 | 
163 |   .loading {
164 |     position: absolute;
165 |     left: 50%;
166 |     top: 50%;
167 |     transform: translate(-50%, -50%);
168 | 
169 |     .text {
170 |       margin-top: 10px;
171 |       font-size: 14px;
172 |       text-align: center;
173 |     }
174 | 
175 |     .main {
176 |       width: 80px;
177 |       height: 80px;
178 |       border-radius: 50%;
179 |       margin: 0 auto;
180 |       position: relative;
181 |       border: 5px solid lightgreen;
182 |       -webkit-animation: turn 2s linear infinite;
183 |     }
184 | 
185 |     .main span {
186 |       display: inline-block;
187 |       width: 30px;
188 |       height: 30px;
189 |       border-radius: 50%;
190 |       background: lightgreen;
191 |       position: absolute;
192 |       left: 50%;
193 |       margin-top: -15px;
194 |       margin-left: -15px;
195 |       -webkit-animation: changeBgColor 2s linear infinite;
196 |     }
197 | 
198 |     @-webkit-keyframes changeBgColor {
199 |       0% {
200 |         background: lightgreen;
201 |       }
202 | 
203 |       100% {
204 |         background: lightblue;
205 |       }
206 |     }
207 | 
208 |     @-webkit-keyframes turn {
209 |       0% {
210 |         -webkit-transform: rotate(0deg);
211 |         border-color: lightgreen;
212 |       }
213 | 
214 |       100% {
215 |         -webkit-transform: rotate(360deg);
216 |         border-color: lightblue;
217 |       }
218 |     }
219 |   }
220 | </style>


--------------------------------------------------------------------------------
/src/views/home/right-chart.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div class="card card-animate">
 16 |     <div class="card-body">
 17 |       <h4 class="card-title d-inline-block">存储桶概况</h4>
 18 |       <div class="content" ref="visitChart">
 19 |         <div class="loading">
 20 |           <div class="main">
 21 |             <span></span>
 22 |           </div>
 23 |           <div class="text">客官请稍后</div>
 24 |         </div>
 25 |       </div>
 26 |     </div>
 27 |   </div>
 28 | </template>
 29 | <script>
 30 |   let echarts = require('echarts');
 31 | 
 32 |   import {
 33 |     getHomeStorsge
 34 |   } from "@/api";
 35 | 
 36 |   export default {
 37 |     data() {
 38 |       return {
 39 |         Data: [],
 40 |         y1Data: [],
 41 |         y2Data: [],
 42 |       };
 43 |     },
 44 |     created() {
 45 |       this._getRightChart();
 46 |     },
 47 |     methods: {
 48 |       _getRightChart() {
 49 |         getHomeStorsge().then((res) => {
 50 |           this.Data = res.data;
 51 |           this.handleSetVisitChart();
 52 | 
 53 |         });
 54 |       },
 55 | 
 56 |       handleSetVisitChart() {
 57 |         this.visitChart = echarts.init(this.$refs.visitChart);
 58 |         this.visitChart.setOption({
 59 | 
 60 | 
 61 |           tooltip: {
 62 |             trigger: 'item'
 63 |           },
 64 |         
 65 |           series: [{
 66 |             name: '存储量/MB',
 67 |             type: 'pie',
 68 |             radius: '50%',
 69 |             data: this.Data,
 70 |             emphasis: {
 71 |               itemStyle: {
 72 |                 shadowBlur: 10,
 73 |                 shadowOffsetX: 0,
 74 |                 shadowColor: 'rgba(0, 0, 0, 0.5)'
 75 |               }
 76 |             }
 77 |           }]
 78 |         });
 79 | 
 80 |       },
 81 |       handleResize() {
 82 |         this.visitChart.resize();
 83 |       },
 84 |     },
 85 |     mounted() {},
 86 |     beforeDestroy() {
 87 |       if (this.visitChart) {
 88 |         this.visitChart.dispose();
 89 |         this.visitChart = null;
 90 |       }
 91 |     },
 92 |   };
 93 | </script>
 94 | <style scoped lang="less">
 95 |   .content {
 96 |     height: 400px;
 97 |     margin-top: 0;
 98 |   }
 99 | 
100 |   .loading {
101 |     position: absolute;
102 |     left: 50%;
103 |     top: 50%;
104 |     transform: translate(-50%, -50%);
105 | 
106 |     .text {
107 |       margin-top: 10px;
108 |       font-size: 14px;
109 |       text-align: center;
110 |     }
111 | 
112 |     .main {
113 |       width: 80px;
114 |       height: 80px;
115 |       border-radius: 50%;
116 |       margin: 0 auto;
117 |       position: relative;
118 |       border: 5px solid lightgreen;
119 |       -webkit-animation: turn 2s linear infinite;
120 |     }
121 | 
122 |     .main span {
123 |       display: inline-block;
124 |       width: 30px;
125 |       height: 30px;
126 |       border-radius: 50%;
127 |       background: lightgreen;
128 |       position: absolute;
129 |       left: 50%;
130 |       margin-top: -15px;
131 |       margin-left: -15px;
132 |       -webkit-animation: changeBgColor 2s linear infinite;
133 |     }
134 | 
135 |     @-webkit-keyframes changeBgColor {
136 |       0% {
137 |         background: lightgreen;
138 |       }
139 | 
140 |       100% {
141 |         background: lightblue;
142 |       }
143 |     }
144 | 
145 |     @-webkit-keyframes turn {
146 |       0% {
147 |         -webkit-transform: rotate(0deg);
148 |         border-color: lightgreen;
149 |       }
150 | 
151 |       100% {
152 |         -webkit-transform: rotate(360deg);
153 |         border-color: lightblue;
154 |       }
155 |     }
156 |   }
157 | </style>


--------------------------------------------------------------------------------
/src/views/index/index.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div>
 16 |     <div class="page-content">
 17 |       <div class="container-fluid">
 18 | 
 19 |         <Row :gutter="24">
 20 |           <Col :xxl="imgInfo.id == 0?24:12" :xl="imgInfo.id == 0?24:12" :lg="imgInfo.id == 0?24:12"
 21 |             :md="imgInfo.id == 0?24:12" :sm="24" :xs="24">
 22 |           <div :class="['card',{w100:imgInfo.id == 0}]">
 23 |             <div class="card-body">
 24 |               <Upload multiple type="drag" :action="action" :show-upload-list="false" :format="config.upload_rule"
 25 |                 :max-size="config.upload_max" paste :on-success="onSuccess" :on-error="onError"
 26 |                 :on-format-error="onFormatError" :on-exceeded-size="onExceededSize" :before-upload="beforeUpload"
 27 |                 :data="data">
 28 |                 <div :class="['p50',{p100:imgInfo.id == 0}]">
 29 |                   <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
 30 |                   <p>点此上传图片，支持拖拽上传</p>
 31 |                 </div>
 32 |               </Upload>
 33 |             </div>
 34 |           </div>
 35 |           </Col>
 36 |           <Col v-if="imgInfo.id != 0" :xxl="12" :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
 37 |           <div class="card">
 38 |             <div class="card-body">
 39 |               <Tabs value="URL" :animated="false">
 40 |                 <TabPane v-for="(item,key,index) in TabsList" :key="index" :label="key" :name="key">
 41 |                   <div class="pre" v-clipboard:copy="item" v-clipboard:success="onCopy" v-clipboard:error="onError">
 42 |                     {{item}}
 43 |                   </div>
 44 |                 </TabPane>
 45 |               </Tabs>
 46 |             </div>
 47 |           </div>
 48 |           </Col>
 49 |         </Row>
 50 | 
 51 | 
 52 | 
 53 |         <div class="card" v-if="imgList.length > 0">
 54 |           <div class="card-body">
 55 |             <Row :gutter="24">
 56 | 
 57 |               <Col :xxl="3" :xl="4" :lg="6" :md="8" :sm="8" :xs="12" class="ivu-mb " v-for="item in imgList"
 58 |                 :key="item.id">
 59 |               <Card class="list-goods-list-item" :class="{active:item.id == imgInfo.id}">
 60 |                 <div class="img-main" @click="imgClick(item)">
 61 |                   <img :src="item.url" alt="">
 62 |                 </div>
 63 |                 <Tooltip :content="item.name" placement="top">
 64 |                   <div class="name">
 65 |                     {{item.name}}
 66 |                   </div>
 67 |                 </Tooltip>
 68 |               </Card>
 69 |               </Col>
 70 |             </Row>
 71 |           </div>
 72 |         </div>
 73 | 
 74 |       </div>
 75 |     </div>
 76 |     <Notice :success="success" :all="all"></Notice>
 77 |   </div>
 78 | </template>
 79 | 
 80 | <script>
 81 |   import {
 82 |     postUpload
 83 |   } from "@/api"
 84 |   import Notice from '../../components/Notice.vue';
 85 |   import {
 86 |     mapState
 87 |   } from "vuex";
 88 |   export default {
 89 |     components: {
 90 |       Notice
 91 |     },
 92 |     data() {
 93 |       return {
 94 |         action: process.env.VUE_APP_BASE_API + "/api/upload",
 95 |         data: {
 96 |           key: ""
 97 |         },
 98 |         imgInfo: {
 99 |           id: 0
100 |         },
101 |         imgList: [],
102 |         TabsList: {
103 |           URL: "",
104 |           HTML: "",
105 |           CSS: "",
106 |           BBCode: "",
107 |           Markdown: "",
108 |         },
109 |         success: 0,
110 |         all: 0,
111 |       };
112 |     },
113 |     created(){
114 |       this.data.key = this.userInfo.Secret_key
115 |     },
116 | 
117 |     watch: {
118 |       userInfo: {
119 |         handler: function (val, oldVal) {
120 |           if (this.userInfo.Secret_key) {
121 |             this.data.key = this.userInfo.Secret_key
122 |           }
123 |         },
124 |         // 深度观察监听
125 |         deep: true,
126 |       },
127 |     },
128 |     computed: {
129 |       ...mapState(["userInfo", "config"]),
130 |     },
131 | 
132 |     methods: {
133 |       onCopy(e) {
134 |         this.$Message.success({
135 |           background: true,
136 |           content: '复制成功'
137 |         });
138 |       },
139 |       onError(e) {
140 |         this.$Message.error({
141 |           background: true,
142 |           content: '复制失败'
143 |         });
144 |       },
145 |       imgClick(item) {
146 |         this.imgInfo = {
147 |           ...item
148 |         }
149 |         for (let key in this.TabsList) {
150 |           switch (key) {
151 |             case 'URL':
152 |               this.TabsList[key] = this.imgInfo.url
153 |               break;
154 |             case 'HTML':
155 |               this.TabsList[key] = '<img src="' + this.imgInfo.url + '" alt="' + this.imgInfo.name + '">'
156 |               break;
157 |             case 'CSS':
158 |               this.TabsList[key] = 'background: url(' + this.imgInfo.url + ') no-repeat; \n background-size: 100% 100%;'
159 |               break;
160 |             case 'BBCode':
161 |               this.TabsList[key] = '[img]' + this.imgInfo.url + '[/img]'
162 |               break;
163 |             case 'Markdown':
164 |               this.TabsList[key] = '![' + this.imgInfo.name + '](' + this.imgInfo.url + ')'
165 |               break;
166 |             default:
167 |               this.TabsList[key] = "error";
168 |           }
169 |         }
170 |       },
171 |       //  上传成功钩子
172 |       onSuccess(res, file, fileList) {
173 |         if (res.code == 200) {
174 |           this.imgList.unshift(res.data)
175 |           this.imgClick(res.data)
176 | 
177 |           this.success++
178 |           setTimeout(() => {
179 |             if (this.success == this.all) {
180 |               this.success = 0
181 |               this.all = 0
182 |             }
183 |           }, 2000)
184 |         } else {
185 |           if (this.success > 0) this.success--
186 |           if (this.all > 0) this.all--
187 |           this.$Message.error({
188 |             background: true,
189 |             content: res.msg,
190 |           });
191 |         }
192 | 
193 |       },
194 |       // 上传失败钩子
195 |       onError(error, file, fileList) {
196 |         this.$Message.error({
197 |           background: true,
198 |           content: "上传失败 - " + file.name,
199 |         });
200 |       },
201 |       // 上传之前钩子
202 |       beforeUpload(res, file, fileList) {
203 |         this.all++
204 |       },
205 |       // 文件格式验证失败时的钩子
206 |       onFormatError(file) {
207 |         this.$Message.error({
208 |           background: true,
209 |           content: "不支持此格式上传",
210 |         });
211 |       },
212 |       // 文件超出指定大小限制时的钩子
213 |       onExceededSize(file) {
214 |         this.$Message.error({
215 |           background: true,
216 |           content: "文件超出指定大小限制",
217 |         });
218 |       }
219 | 
220 |     },
221 |   };
222 | </script>
223 | 
224 | <style lang="less" scoped>
225 |   .list-goods-list-item {
226 |     margin-bottom: 15px;
227 | 
228 |     .img-main {
229 |       height: 150px;
230 | 
231 |       img {
232 |         max-height: 100%;
233 |       }
234 |     }
235 | 
236 | 
237 | 
238 |     .ivu-tooltip {
239 |       display: block;
240 | 
241 |       /deep/.ivu-tooltip-rel {
242 |         display: block;
243 |       }
244 |     }
245 | 
246 |     .name {
247 |       text-align: center;
248 |       font-size: 14px;
249 |       white-space: nowrap;
250 |       overflow: hidden;
251 |       text-overflow: ellipsis;
252 |       margin-top: 10px;
253 |       cursor: pointer;
254 |     }
255 | 
256 | 
257 |   }
258 | 
259 |   .active {
260 |     background: rgba(204, 232, 255, 0.5);
261 |     border: 1px solid rgba(153, 209, 255, 0.57);
262 |   }
263 | 
264 |   .pre {
265 |     height: 123px;
266 |     padding: 10px 15px;
267 |     overflow-y: scroll;
268 |     border: 1px solid #dadada;
269 |     background-color: #f7f7f7;
270 |     font-size: 14px;
271 |     color: #555;
272 |     border-radius: 3px;
273 |     cursor: pointer;
274 |     font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
275 |   }
276 | 
277 |   .w100 {
278 |     width: 100%;
279 |   }
280 | 
281 |   .p50 {
282 |     padding: 50px 0;
283 |   }
284 | 
285 |   .p100 {
286 |     padding: 150px 0;
287 |   }
288 | </style>


--------------------------------------------------------------------------------
/src/views/layout/index.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div :class="$store.state.isMenu ? 'enable-vertical-menu' : ''">
 16 |     <div id="layout-wrapper">
 17 |       <div class="vertical-menu mm-active">
 18 |         <div class="h-100">
 19 |           <div class="navbar-brand-box">
 20 |             <img :src="require('@/assets/imgs/logo.jpg')" />
 21 |           </div>
 22 | 
 23 |           <div id="sidebar-menu">
 24 |             <!-- 左侧导航 -->
 25 |             <Menu :open-names="openItem" :active-name="activeName" accordion>
 26 |               <div v-for="item in menuItem" :key="item.path">
 27 |                 <div v-if="item.meta.isShow">
 28 |                   <Submenu v-if="item.meta.isFold" :name="item.name">
 29 |                     <template slot="title">
 30 |                       <span :class="item.meta.icon"></span>
 31 |                       {{ item.meta.title }}
 32 |                     </template>
 33 |                     <MenuItem v-for="list in item.children" v-show="list.meta.isShow" :key="list.path" :name="list.name"
 34 |                       :to="'/' + item.path + '/' + list.path">
 35 |                     {{ list.meta.title }}
 36 |                     </MenuItem>
 37 |                   </Submenu>
 38 |                   <MenuItem v-else :name="item.name" :to="'/' + item.path">
 39 |                   <span :class="item.meta.icon"></span>
 40 |                   {{ item.meta.title }}
 41 |                   </MenuItem>
 42 |                 </div>
 43 |               </div>
 44 |             </Menu>
 45 |           </div>
 46 | 
 47 |           <Capacity v-if="userInfo.capacity && !isMobile"></Capacity>
 48 | 
 49 |         </div>
 50 |       </div>
 51 | 
 52 |       <header id="page-topbar">
 53 |         <div class="navbar-header">
 54 |           <div class="d-flex align-items-left">
 55 |             <span class="osuu-net geek-caidan" @click="$store.state.isMenu = !$store.state.isMenu"></span>
 56 |             <div class="dropdown d-inline-block" @click="toGit">
 57 |               <Icon custom="osuu-net geek-github" size="26"></Icon>
 58 |             </div>
 59 |           </div>
 60 |           <div class="d-flex align-items-center" v-if="update">
 61 |             <div class="dropdown d-inline-block" @click="$router.push('/update')">
 62 |               <Tooltip content="版本更新" placement="bottom">
 63 |                 <Icon custom="osuu-net geek-iconfontzhizuobiaozhun0254" size="26"></Icon>
 64 |               </Tooltip>
 65 |             </div>
 66 |           </div>
 67 | 
 68 |           <div class="d-flex align-items-center">
 69 | 
 70 |             <!-- 登录注册 -->
 71 |             <div class="dropdown d-inline-block" style="width:100px" @click="switchAccount(1)" v-if="!userInfo.avatar">
 72 |               <span style="font-size: 16px">登录/注册 </span>
 73 |             </div>
 74 |             <div class="dropdown d-inline-block" v-else>
 75 |               <UserFloat></UserFloat>
 76 |             </div>
 77 |           </div>
 78 |         </div>
 79 |       </header>
 80 | 
 81 |       <div class="main-content">
 82 |         <router-view></router-view>
 83 |       </div>
 84 |     </div>
 85 |     <div class="menu-overlay" @click="$store.state.isMenu = false"></div>
 86 |   </div>
 87 | </template>
 88 | 
 89 | <script>
 90 |   import {
 91 |     mapState,
 92 |     mapMutations
 93 |   } from "vuex";
 94 |   export default {
 95 |     data() {
 96 |       return {
 97 |         menuItem: [],
 98 |         activeName: "",
 99 |         openItem: ["setup"],
100 |         update: false
101 |       };
102 |     },
103 |     computed: {
104 |       ...mapState(["isAccount", "userInfo", "config", "isMobile"]),
105 |     },
106 | 
107 |     methods: {
108 |       ...mapMutations(["switchAccount"]),
109 |       toGit() {
110 |         window.open('https://github.com/osuuu/LightPicture');
111 |       },
112 |     },
113 |     created() {
114 |       this.menuItem = this.$router.options.routes[0].children;
115 |       this.activeName = this.$route.name;
116 |       if (this.$route.name.indexOf("-") != -1) {
117 |         this.openItem.push(this.$route.name.split("-")[0]);
118 |       }
119 |     },
120 |     watch: {
121 |       // 监听路由刷新
122 |       $route: {
123 |         handler: function (val, oldVal) {
124 |           if (this.isMobile) {
125 |             this.$store.state.isMenu = false;
126 |           }
127 |         },
128 |         // 深度观察监听
129 |         deep: true,
130 |       },
131 |       userInfo: {
132 |         handler: function (val, oldVal) {
133 |           if (this.userInfo.role.is_admin == 1) {
134 |             this.update = true
135 |             this.menuItem[3]['children'][4]['meta']['isShow'] = true
136 |           } else {
137 |             if (this.config.is_show_storage == 0) {
138 |               this.menuItem[3]['children'][1]['meta']['isShow'] = false
139 |             }
140 |             if (this.config.is_show_role == 0) {
141 |               this.menuItem[3]['children'][2]['meta']['isShow'] = false
142 |             }
143 |             if (this.config.is_show_member == 0) {
144 |               this.menuItem[3]['children'][3]['meta']['isShow'] = false
145 |             }
146 |           }
147 |         },
148 |         // 深度观察监听
149 |         deep: true,
150 |       },
151 |     },
152 |   };
153 | </script>
154 | 
155 | <style lang="less" scoped>
156 |   @import url("../../assets/css/theme.min.css");
157 |   @import url("../../assets/css/clean.css");
158 |   @deep: ~">>>";
159 | 
160 |   @{deep}.ivu-dropdown,
161 |   .ivu-icon {
162 |     vertical-align: middle;
163 |   }
164 | 
165 |   .align-items-left {
166 |     width: 100%;
167 |     height: 60px;
168 |     // padding: 0 20px;
169 |     text-align: center;
170 |     line-height: 60px;
171 | 
172 |     span {
173 |       width: 60px;
174 |       font-size: 20px;
175 |       vertical-align: middle;
176 |     }
177 |   }
178 | 
179 |   .badge-got {
180 |     position: absolute;
181 |     transform: translateX(-50%);
182 |     transform-origin: 0 center;
183 |     top: 12px;
184 |     right: 5px;
185 |     height: 8px;
186 |     width: 8px;
187 |     border-radius: 100%;
188 |     background: #ed4014;
189 |     z-index: 10;
190 |     box-shadow: 0 0 0 1px #fff;
191 |   }
192 | 
193 |   .navbar-brand-box {
194 |     width: 240px;
195 |     margin-top: 10px;
196 | 
197 |     img {
198 |       margin: 0 auto;
199 |       width: 80%;
200 |     }
201 |   }
202 | 
203 |   .right {
204 |     float: right;
205 |     color: #ff5656;
206 |   }
207 | 
208 |   .hot {
209 |     color: #ff5656;
210 |   }
211 | 
212 |   .right-btn .iconfont {
213 |     vertical-align: middle;
214 |   }
215 | 
216 |   .h-100 {
217 |     min-height: 100vh;
218 |     position: relative;
219 | 
220 |     .over {
221 |       position: absolute;
222 |       right: 10px;
223 |       bottom: 10px;
224 |     }
225 |   }
226 | 
227 |   @{deep}.ivu-menu-light:after {
228 |     width: 0;
229 |   }
230 | 
231 |   @{deep}.ivu-form-item-label {
232 |     font-weight: 100;
233 |     font-size: 14px;
234 |   }
235 | </style>


--------------------------------------------------------------------------------
/src/views/setup/admin.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div>
 16 |     <div class="page-content">
 17 |       <div class="container-fluid">
 18 |         <div class="card">
 19 |           <div class="card-head">系统设置</div>
 20 |           <div class="card-body">
 21 |             <div class="demo-spin-container" v-if="loading">
 22 |               <Spin fix size="large"></Spin>
 23 |             </div>
 24 |             <Tabs type="card" :animated="false" v-else>
 25 |               <TabPane label="基础配置">
 26 |                 <Form :label-width="140">
 27 |                   <FormItem v-for="item in basicsList" :key="item.id" :label="item.title">
 28 |                     <i-switch v-if="item.attr == 'switch'" v-model="item.value" true-value="1" false-value="0" />
 29 |                     <InputNumber v-if="item.attr == 'number'" v-model="item.value" :min="0" style="width: 70%">
 30 |                     </InputNumber>
 31 |                     <Input v-if="item.attr == 'input'" v-model="item.value" :placeholder="item.title"></Input>
 32 |                     <RadioGroup v-if="item.attr == 'radio'" v-model="item.value">
 33 |                       <Radio v-for="(items, ind) in item.extend" :key="ind" :label="items">{{ items }}</Radio>
 34 |                     </RadioGroup>
 35 |                     <p style="font-size:12px;color:#999" v-if="item.des">
 36 |                       * {{item.des}}
 37 |                     </p>
 38 |                   </FormItem>
 39 |                   <FormItem>
 40 |                     <Button type="primary" @click="Save(basicsList,true)" :loading="creating">保存</Button>
 41 |                   </FormItem>
 42 |                 </Form>
 43 |               </TabPane>
 44 |               <TabPane label="邮箱配置">
 45 |                 <Form :label-width="120">
 46 |                   <FormItem v-for="item in emailList" :key="item.id" :label="item.title">
 47 |                     <Input v-if="item.attr == 'input'" v-model="item.value" :placeholder="item.title"></Input>
 48 |                     <RadioGroup v-if="item.attr == 'radio'" v-model="item.value">
 49 |                       <Radio v-for="(items, ind) in item.extend" :key="ind" :label="items">{{ items }}</Radio>
 50 |                     </RadioGroup>
 51 |                   </FormItem>
 52 |                   <FormItem>
 53 |                     <Button type="primary" @click="Save(emailList)" :loading="creating">保存</Button>
 54 |                     <Button type="warning" @click="sendTest" :loading="creating2">发送测试邮件</Button>
 55 |                     <p style="font-size:12px;color:#999">* 发送测试邮件会发送至当前登录用户的邮箱，请确保当前登录用户的账号为邮箱格式</p>
 56 |                   </FormItem>
 57 |                 </Form>
 58 |               </TabPane>
 59 |             </Tabs>
 60 |           </div>
 61 |         </div>
 62 |       </div>
 63 |     </div>
 64 |   </div>
 65 | </template>
 66 | 
 67 | <script>
 68 |   import {
 69 |     getSetup,
 70 |     putSetup,
 71 |     postSendMail,
 72 |     getIndex
 73 |   } from "@/api";
 74 |   import {
 75 |     mapMutations
 76 |   } from "vuex";
 77 |   export default {
 78 |     data() {
 79 |       return {
 80 |         emailList: [],
 81 |         basicsList: [],
 82 |         sms: {},
 83 |         creating: false,
 84 |         creating2: false,
 85 |         loading: true
 86 |       };
 87 |     },
 88 |     created() {
 89 |       this._getData();
 90 |     },
 91 | 
 92 |     methods: {
 93 |       ...mapMutations(["addConfig"]),
 94 |       // 获取列表
 95 |       _getData() {
 96 |         getSetup("basics").then((res) => {
 97 |           this.basicsList = res.data;
 98 |           this.loading = false
 99 |         });
100 |         getSetup("email").then((res) => {
101 |           this.emailList = res.data;
102 |           this.loading = false
103 |         });
104 |       },
105 |       // 基础配置
106 |       Save(arr, reload) {
107 |         this.creating = true;
108 |         putSetup({
109 |           createData: arr,
110 |         }).then((res) => {
111 |           if (res.code == 200) {
112 |             this.$Message.success({
113 |               background: true,
114 |               content: res.msg,
115 |             });
116 |             this._getData();
117 | 
118 |             if (reload == true) {
119 |               getIndex().then((res) => {
120 |                 this.addConfig(res.data)
121 |                 location.reload();
122 |               });
123 |             }
124 | 
125 |           } else {
126 |             this.$Message.error({
127 |               background: true,
128 |               content: res.msg,
129 |             });
130 |           }
131 |           this.creating = false;
132 |         });
133 |       },
134 |       // 测试邮件
135 |       sendTest() {
136 |         this.$Modal.confirm({
137 |           title: "发送测试邮件",
138 |           content: "请确保当前设置已配置完毕且已保存，当前登录用户邮箱是否能接收邮件，是否发送测试？",
139 |           onOk: () => {
140 |             this.creating2 = true
141 |             postSendMail().then(res => {
142 |               if (res.code == 200) {
143 |                 this.$Message.success({
144 |                   background: true,
145 |                   content: res.msg,
146 |                 });
147 |               } else {
148 |                 this.$Message.error({
149 |                   background: true,
150 |                   content: res.msg,
151 |                 });
152 |               }
153 |               this.creating2 = false
154 |             })
155 |           },
156 |         });
157 | 
158 |       }
159 |     },
160 |   };
161 | </script>
162 | 
163 | <style lang="less" scoped>
164 |   .card-body {
165 |     min-height: 435px;
166 |   }
167 | 
168 |   .ivu-radio-wrapper {
169 |     margin-right: 20px;
170 |   }
171 | 
172 |   .ivu-btn {
173 |     margin-right: 10px;
174 |   }
175 | </style>


--------------------------------------------------------------------------------
/src/views/setup/home.vue:
--------------------------------------------------------------------------------
 1 | <!-- 
 2 | // +----------------------------------------------------------------------
 3 | // | LightPicture [ 图床 ]
 4 | // +----------------------------------------------------------------------
 5 | // | 企业团队图片资源管理系统
 6 | // +----------------------------------------------------------------------
 7 | // | Github: https://github.com/osuuu/LightPicture
 8 | // +----------------------------------------------------------------------
 9 | // | Copyright © http://picture.h234.cn All rights reserved.
10 | // +----------------------------------------------------------------------
11 | // | Author: Team <admin@osuu.net>
12 | // +---------------------------------------------------------------------- 
13 | -->
14 | <template>
15 |   <div>
16 |     <div class="page-content">
17 |       <div class="container-fluid">
18 |         <div class="card">
19 |           <div class="card-head">设置</div>
20 |           <div class="card-body">
21 |            
22 |           </div>
23 |         </div>
24 |       </div>
25 |     </div>
26 |   </div>
27 | </template>
28 | 
29 | <script>
30 | export default {
31 |   data() {
32 |     return {
33 |      
34 |     };
35 |   },
36 |   created() {
37 |   },
38 | 
39 |   methods: {
40 |    
41 |   },
42 | };
43 | </script>
44 | 
45 | <style lang="less" scoped>
46 | </style>


--------------------------------------------------------------------------------
/src/views/setup/member.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div>
 16 |     <div class="page-content">
 17 |       <div class="container-fluid">
 18 |         <div class="card">
 19 |           <div class="card-head">
 20 |             团队成员
 21 | 
 22 |             <div class="search-input">
 23 |               <Input v-model="name" size="small" placeholder="请输入邮箱搜索" search />
 24 |             </div>
 25 |           </div>
 26 |           <div class="card-body padding-top0">
 27 |             <div class="card-menu">
 28 |               <Button v-if="userInfo.role.is_admin == 1" type="primary" icon="md-add" @click="addClick" style="margin-right: 10px">新增</Button>
 29 |             </div>
 30 |             <Table border :loading="load" :columns="columns" :data="data">
 31 |               <template slot-scope="{ row }" slot="avatar">
 32 |                 <Avatar :src="row.avatar" />
 33 |               </template>
 34 |               <template slot-scope="{ row }" slot="capacity">
 35 |                 <span>{{(row.capacity/1024/1024/1024).toFixed(2)}} G</span>
 36 |               </template>
 37 |               <template slot-scope="{ row }" slot="user_size">
 38 |                 <span>{{(row.user_size/1024/1024/1024).toFixed(2)}} G</span>
 39 |               </template>
 40 | 
 41 |               <template slot-scope="{ row }" slot="state">
 42 |                 <Badge v-if="row.state === 0" status="error" text="已停用" />
 43 |                 <Badge v-if="row.state === 1" status="success" text="已启用" />
 44 |                 <Badge v-if="row.state === 2" status="warning" text="待审核" />
 45 |               </template>
 46 | 
 47 |               <template slot-scope="{ row }" slot="action">
 48 |                 <Button type="primary" size="small" style="margin-right: 5px" @click="editClick(row)">编辑</Button>
 49 |                 <Button type="error" size="small" @click="del(row.id)">删除</Button>
 50 |               </template>
 51 |             </Table>
 52 |             <div class="paging">
 53 |               <Page :total="Number(total)" :current="page" :page-size="size" :simple="$store.state.isMobile"
 54 |                 @on-change="pageChange" @on-page-size-change="pageSizeChange" show-total show-sizer show-elevator />
 55 |             </div>
 56 |           </div>
 57 |         </div>
 58 |       </div>
 59 |     </div>
 60 | 
 61 |     <Modal v-model="modal2" :width="600" :title="edit ? '编辑成员' : '新增成员'" :loading="creating"
 62 |       @on-ok="edit ? editSave() : addSave()" class-name="vertical-center-modal">
 63 |       <Form ref="create" :model="createData" :rules="createRules" :label-width="100">
 64 |         <FormItem label="邮箱/账号" prop="email">
 65 |           <Input v-model="createData.email" placeholder="请输入邮箱" />
 66 |         </FormItem>
 67 |         <FormItem label="角色组" prop="role_id">
 68 |           <Select v-model="createData.role_id" style="width: 200px" placeholder="请选择角色组">
 69 |             <Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.name }}</Option>
 70 |           </Select>
 71 |         </FormItem>
 72 |         <FormItem label="总配额/G" prop="capacity">
 73 |           <InputNumber v-model="createData.capacity" :min="0" style="width: 70%">
 74 |           </InputNumber>
 75 |         </FormItem>
 76 |         <FormItem label="姓名">
 77 |           <Input v-model="createData.username" placeholder="请输入姓名" />
 78 |         </FormItem>
 79 |         <FormItem label="联系电话">
 80 |           <Input v-model="createData.phone" placeholder="请输入联系电话" />
 81 |         </FormItem>
 82 | 
 83 |         <FormItem label="重置密码" prop="pwd" v-show="edit">
 84 |           <i-switch v-model="createData.pwd" :true-value="1" :false-value="0" />
 85 |           <p style="font-size:12px;color:red" v-show="createData.pwd == 1">
 86 |             * 密码将会重置为：123456
 87 |           </p>
 88 |         </FormItem>
 89 |         <FormItem label="状态" prop="state">
 90 |           <i-switch v-model="createData.state" :true-value="1" :false-value="0" />
 91 |         </FormItem>
 92 | 
 93 | 
 94 |       </Form>
 95 |     </Modal>
 96 | 
 97 |     <Modal v-model="modal3" width="360">
 98 |       <p slot="header" style="color: #f60">
 99 |         <Icon type="ios-information-circle"></Icon>
100 |         <span>删除确认</span>
101 |       </p>
102 |       <div>
103 |         <p>删除用户不会删除此用户之前上传的图片，可通过新增相同邮箱恢复用户，是否删除？
104 |         </p>
105 |       </div>
106 |       <div slot="footer">
107 |         <Button type="error" size="large" long :loading="modal_loading" @click="delFunction">确认删除</Button>
108 |       </div>
109 |     </Modal>
110 |   </div>
111 | </template>
112 | 
113 | <script>
114 |   import {
115 |     getMember,
116 |     getRole,
117 |     postMember,
118 |     putMember,
119 |     delMember
120 |   } from "@/api/index";
121 |   import {
122 |     mapState
123 |   } from "vuex";
124 |   export default {
125 |     data() {
126 |       return {
127 |         page: 1,
128 |         size: 10,
129 |         name: "",
130 |         total: "",
131 |         load: true,
132 |         data: [],
133 |         roleInfo: {},
134 |         modal2: false,
135 |         modal3: false,
136 |         edit: false,
137 |         columns: [{
138 |             title: "ID",
139 |             key: "id",
140 |             align: "center",
141 |             minWidth: 80,
142 |             fixed: 'left'
143 |           },
144 |           {
145 |             title: "头像",
146 |             align: "center",
147 |             slot: "avatar",
148 |             minWidth: 70,
149 |           },
150 |           {
151 |             title: "邮箱/账号",
152 |             key: "email",
153 |             align: "center",
154 |             minWidth: 200,
155 |             fixed: 'left'
156 |           },
157 |           {
158 |             title: "姓名",
159 |             key: "username",
160 |             align: "center",
161 |             minWidth: 120,
162 |           },
163 |           {
164 |             title: "联系电话",
165 |             key: "phone",
166 |             align: "center",
167 |             minWidth: 130,
168 |           },
169 |           {
170 |             title: "角色组",
171 |             key: "role_name",
172 |             align: "center",
173 |             minWidth: 130,
174 |           },
175 |           {
176 |             title: "创建时间",
177 |             key: "create_time",
178 |             align: "center",
179 |             minWidth: 180,
180 |           },
181 | 
182 |           {
183 |             title: "总配额",
184 |             align: "center",
185 |             slot: "capacity",
186 |             minWidth: 100,
187 |           },
188 |           {
189 |             title: "已用容量",
190 |             align: "center",
191 |             slot: "user_size",
192 |             minWidth: 100,
193 |           },
194 | 
195 |           {
196 |             title: "状态",
197 |             minWidth: 130,
198 |             align: "center",
199 |             slot: "state",
200 |           },
201 |           {
202 |             title: "操作",
203 |             minWidth: 150,
204 |             align: "center",
205 |             slot: "action",
206 |             fixed: 'right'
207 |           },
208 |         ],
209 |         roleList: [],
210 |         createData: {},
211 |         createRules: {
212 |           email: [{
213 |             required: true,
214 |             message: "请输入邮箱",
215 |             trigger: "blur"
216 |           }],
217 |           role_id: [{
218 |             required: true,
219 |             message: "请选择角色组",
220 |           }],
221 |           capacity: [{
222 |             required: true,
223 |             message: "请输入总配额",
224 |           }],
225 |         },
226 |         creating: true,
227 |         delId: "",
228 |         modal_loading: false,
229 |       };
230 |     },
231 |     created() {
232 |       this._getData();
233 |       this._getRole();
234 |       if (this.userInfo.role.is_admin != 1) {
235 |         this.columns.pop()
236 |       }
237 |     },
238 |     computed: {
239 |       ...mapState(["userInfo"]),
240 |     },
241 |     watch: {
242 |       name(newVal, oldVal) {
243 |         if (newVal != oldVal) {
244 |           this.page = 1
245 |           this.load = true
246 |           this._getData();
247 |         }
248 |       },
249 |     },
250 | 
251 |     methods: {
252 |       // 获取列表
253 |       _getData() {
254 |         getMember({
255 |           page: this.page,
256 |           size: this.size,
257 |           name: this.name,
258 |         }).then((res) => {
259 |           this.data = res.data.data;
260 |           this.total = res.data.total;
261 |           this.load = false;
262 |         });
263 |       },
264 | 
265 |       editClick(row) {
266 |         this.createData = {}
267 |         this.edit = true;
268 |         this.modal2 = true;
269 |         this.createData = {
270 |           ...row,
271 |           pwd: 0
272 |         };
273 | 
274 |         this.createData.capacity = this.createData.capacity > 0 ? this.createData.capacity / 1024 / 1024 / 1024 : this
275 |           .createData.capacity
276 |       },
277 |       addClick() {
278 |         this.edit = false;
279 |         this.modal2 = true;
280 |         this.createData = {
281 |           email: "",
282 |           role_id: "",
283 |           username: "",
284 |           phone: "",
285 |           capacity: 0,
286 |           state: 1,
287 |           avatar: "https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg",
288 |         };
289 |       },
290 |       // 新增
291 |       addSave() {
292 |         this.$refs.create.validate((valid) => {
293 |           if (valid) {
294 |             postMember({
295 |               email: this.createData.email,
296 |               role_id: this.createData.role_id,
297 |               username: this.createData.username,
298 |               phone: this.createData.phone,
299 |               capacity: this.createData.capacity * 1024 * 1024 * 1024,
300 |               state: this.createData.state,
301 |               avatar: this.createData.avatar,
302 |             }).then((res) => {
303 |               if (res.code == 200) {
304 |                 this.$Message.success({
305 |                   background: true,
306 |                   content: res.msg,
307 |                 });
308 |                 this._getData();
309 |                 this.modal2 = false;
310 |               } else {
311 |                 this.$Message.error({
312 |                   background: true,
313 |                   content: res.msg,
314 |                 });
315 |               }
316 |             });
317 | 
318 |             this.creating = false;
319 |             this.$nextTick(() => {
320 |               this.creating = true;
321 |             });
322 |           } else {
323 |             this.creating = false;
324 |             this.$nextTick(() => {
325 |               this.creating = true;
326 |             });
327 |           }
328 |         });
329 | 
330 |       },
331 |       // 编辑
332 |       editSave() {
333 |         this.$refs.create.validate((valid) => {
334 |           if (valid) {
335 |             putMember({
336 |               id: this.createData.id,
337 |               email: this.createData.email,
338 |               role_id: this.createData.role_id,
339 |               username: this.createData.username,
340 |               phone: this.createData.phone,
341 |               capacity: this.createData.capacity * 1024 * 1024 * 1024,
342 |               state: this.createData.state,
343 |               pwd: this.createData.pwd,
344 |             }).then((res) => {
345 |               if (res.code == 200) {
346 |                 this.$Message.success({
347 |                   background: true,
348 |                   content: res.msg,
349 |                 });
350 |                 this._getData();
351 |                 this.modal2 = false;
352 |               } else {
353 |                 this.$Message.error({
354 |                   background: true,
355 |                   content: res.msg,
356 |                 });
357 |               }
358 |             });
359 | 
360 |             this.creating = false;
361 |             this.$nextTick(() => {
362 |               this.creating = true;
363 |             });
364 |           } else {
365 |             this.creating = false;
366 |             this.$nextTick(() => {
367 |               this.creating = true;
368 |             });
369 |           }
370 |         });
371 |       },
372 | 
373 | 
374 |       // 删除
375 |       del(id) {
376 |         this.delId = id;
377 |         this.modal3 = true
378 |       },
379 |       // 删除方法
380 |       delFunction() {
381 |         this.modal_loading = true
382 |         delMember({
383 |           id: this.delId,
384 |         }).then((res) => {
385 |           if (res.code == 200) {
386 |             this.$Message.success({
387 |               background: true,
388 |               content: res.msg,
389 |             });
390 |             this._getData();
391 |           } else {
392 |             this.$Message.error({
393 |               background: true,
394 |               content: res.msg,
395 |             });
396 |           }
397 |           this.modal_loading = false
398 |           this.modal3 = false
399 |         });
400 |       },
401 | 
402 |       // 分页跳转
403 |       pageChange(val) {
404 |         this.page = val;
405 |         this.load = true;
406 |         this._getData();
407 |       },
408 |       pageSizeChange(val) {
409 |         this.load = true;
410 |         this.page = 1;
411 |         this.size = val;
412 |         this._getData();
413 |       },
414 |       // 获取存储桶列表
415 |       _getRole() {
416 |         getRole({
417 |           page: 1,
418 |           size: 100,
419 |           name: ""
420 |         }).then((res) => {
421 |           this.roleList = res.data.data;
422 |         });
423 |       },
424 |     },
425 |   };
426 | </script>
427 | 
428 | <style lang="less" scoped>
429 |   /deep/.ivu-badge-status-dot {
430 |     width: 10px;
431 |     height: 10px;
432 |   }
433 | </style>


--------------------------------------------------------------------------------
/src/views/setup/role.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div>
 16 |     <div class="page-content">
 17 |       <div class="container-fluid">
 18 |         <div class="card">
 19 |           <div class="card-head">
 20 |             角色组
 21 | 
 22 |             <div class="search-input">
 23 |               <Input v-model="name" size="small" placeholder="请输入名称搜索" search />
 24 |             </div>
 25 |           </div>
 26 |           <div class="card-body padding-top0">
 27 |             <div class="card-menu">
 28 |               <Button v-if="userInfo.role.is_admin == 1" type="primary" icon="md-add" @click="addClick"
 29 |                 style="margin-right: 10px">新增</Button>
 30 |             </div>
 31 |             <Table border :loading="load" :columns="columns" :data="data">
 32 |               <template slot-scope="{ row }" slot="power">
 33 |                 <Button @click="read(row)">查看</Button>
 34 |               </template>
 35 |               <template slot-scope="{ row }" slot="default">
 36 |                 <i-switch v-model="row.default" @on-change="onChange(row)" :true-value="1" :false-value="0" />
 37 |               </template>
 38 | 
 39 |               <template slot-scope="{ row }" slot="action">
 40 |                 <Button type="primary" size="small" style="margin-right: 5px" @click="editClick(row)">编辑</Button>
 41 |                 <Button type="error" size="small" @click="del(row.id)">删除</Button>
 42 |               </template>
 43 |             </Table>
 44 |             <div class="paging">
 45 |               <Page :total="Number(total)" :current="page" :page-size="size" :simple="$store.state.isMobile"
 46 |                 @on-change="pageChange" @on-page-size-change="pageSizeChange" show-total show-sizer show-elevator />
 47 |             </div>
 48 |           </div>
 49 |         </div>
 50 |       </div>
 51 |     </div>
 52 |     <Modal v-model="modal1" width="360">
 53 |       <p slot="header" style="color: #2d8cf0">
 54 |         <Icon type="md-checkbox" />
 55 |         <span>权限列表</span>
 56 |       </p>
 57 |       <div style="text-align: center">
 58 |         <Tag color="success" v-if="roleInfo.is_admin">管理员权限</Tag>
 59 |         <Tag color="success" v-if="roleInfo.is_add && roleInfo.is_admin == 0">允许其成员上传图片</Tag>
 60 |         <Tag color="success" v-if="roleInfo.is_del_own && roleInfo.is_admin == 0">允许其成员删除自己上传的图片</Tag>
 61 |         <Tag color="success" v-if="roleInfo.is_read && roleInfo.is_admin == 0">允许其成员查看所在存储桶其他人上传的图片</Tag>
 62 |         <Tag color="success" v-if="roleInfo.is_del_all && roleInfo.is_admin == 0">允许其成员删除所在存储桶其他人上传的图片</Tag>
 63 |         <Tag color="success" v-if="roleInfo.is_read_all && roleInfo.is_admin == 0">允许其成员查看系统全部图片</Tag>
 64 |       </div>
 65 |       <div slot="footer">
 66 |         <Button type="primary" size="large" long @click="modal1 = false">我知道了</Button>
 67 |       </div>
 68 |     </Modal>
 69 |     <Modal v-model="modal2" :width="600" :title="edit ? '编辑分组' : '新增分组'" :loading="creating"
 70 |       @on-ok="edit ? editSave() : addSave()" class-name="vertical-center-modal">
 71 |       <Form ref="create" :model="createData" :label-width="100">
 72 |         <FormItem label="分组名称">
 73 |           <Input v-model="createData.name" placeholder="请输入分组名称" />
 74 |         </FormItem>
 75 |         <FormItem label="存储桶">
 76 |           <Select v-model="createData.storage_id" style="width: 200px" placeholder="请选择存储桶">
 77 |             <Option v-for="item in storageList" :value="item.id" :key="item.id">{{ item.name }}</Option>
 78 |           </Select>
 79 |         </FormItem>
 80 | 
 81 |         <FormItem label="分组权限">
 82 |           <p>
 83 |             <Checkbox border :true-value="1" :false-value="0" v-model="createData.is_admin">设置其成员权限为管理员</Checkbox>
 84 |           </p>
 85 |           <p v-show="createData.is_admin == 0">
 86 |             <Checkbox border :true-value="1" :false-value="0" v-model="createData.is_add">允许其成员上传图片</Checkbox>
 87 |           </p>
 88 |           <p v-show="createData.is_admin == 0">
 89 |             <Checkbox border :true-value="1" :false-value="0" v-model="createData.is_read">允许其成员查看所在存储桶其他人上传的图片
 90 |             </Checkbox>
 91 |           </p>
 92 |           <p v-show="createData.is_admin == 0">
 93 |             <Checkbox border :true-value="1" :false-value="0" v-model="createData.is_read_all">允许其成员查看系统全部图片</Checkbox>
 94 |           </p>
 95 |           <p v-show="createData.is_admin == 0">
 96 |             <Checkbox border :true-value="1" :false-value="0" v-model="createData.is_del_own">允许其成员删除自己上传的图片</Checkbox>
 97 |           </p>
 98 |           <p v-show="createData.is_admin == 0">
 99 |             <Checkbox border :true-value="1" :false-value="0" v-model="createData.is_del_all">允许其成员删除所在存储桶其他人上传的图片
100 |             </Checkbox>
101 |           </p>
102 |         </FormItem>
103 |         <FormItem label="注册默认">
104 |           <i-switch v-model="createData.default" :true-value="1" :false-value="0" />
105 |         </FormItem>
106 |       </Form>
107 |     </Modal>
108 |     <Modal v-model="modal3" width="360">
109 |       <p slot="header" style="color: #f60">
110 |         <Icon type="ios-information-circle"></Icon>
111 |         <span>删除确认</span>
112 |       </p>
113 |       <div>
114 |         <p>至少保留一个默认角色组，请确保当前删除的角色组不是注册默认角色组，角色组删除后，该组下面的用户将重置默认角色组。
115 |         </p>
116 |       </div>
117 |       <div slot="footer">
118 |         <Button type="error" size="large" long :loading="modal_loading" @click="delFunction">确认删除</Button>
119 |       </div>
120 |     </Modal>
121 |   </div>
122 | </template>
123 | 
124 | <script>
125 |   import {
126 |     getRole,
127 |     getStorage,
128 |     postRole,
129 |     putRole,
130 |     delRole
131 |   } from "@/api/index";
132 |   import {
133 |     mapState
134 |   } from "vuex";
135 |   export default {
136 |     data() {
137 |       return {
138 |         page: 1,
139 |         size: 10,
140 |         name: "",
141 |         total: "",
142 |         load: true,
143 |         data: [],
144 |         roleInfo: {},
145 |         modal1: false,
146 |         modal2: false,
147 |         modal3: false,
148 |         edit: false,
149 |         columns: [{
150 |             title: "ID",
151 |             key: "id",
152 |             align: "center",
153 |             minWidth: 80,
154 |           },
155 |           {
156 |             title: "名称",
157 |             key: "name",
158 |             align: "center",
159 |             minWidth: 120,
160 |           },
161 |           {
162 |             title: "存储桶",
163 |             key: "storage_name",
164 |             align: "center",
165 |             minWidth: 130,
166 |           },
167 |           {
168 |             title: "成员数",
169 |             key: "user_num",
170 |             align: "center",
171 |             minWidth: 80,
172 |           },
173 | 
174 |           {
175 |             title: "权限",
176 |             align: "center",
177 |             slot: "power",
178 |             minWidth: 100,
179 |           },
180 |           {
181 |             title: "注册默认",
182 |             align: "center",
183 |             slot: "default",
184 |             minWidth: 100,
185 |           },
186 |           {
187 |             title: "操作",
188 |             minWidth: 150,
189 |             align: "center",
190 |             slot: "action",
191 |           },
192 |         ],
193 |         storageList: [],
194 |         createData: {},
195 |         creating: true,
196 |         delId: "",
197 |         modal_loading: false,
198 |       };
199 |     },
200 |     created() {
201 |       this._getData();
202 |       this._getStorage();
203 |       if (this.userInfo.role.is_admin != 1) {
204 |         this.columns.pop()
205 |         this.columns.pop()
206 |       }
207 |     },
208 |     computed: {
209 |       ...mapState(["userInfo"]),
210 |     },
211 | 
212 |     watch: {
213 |       name(newVal, oldVal) {
214 |         if (newVal != oldVal) {
215 |           this.page = 1
216 |           this.load = true
217 |           this._getData();
218 |         }
219 |       },
220 |     },
221 | 
222 |     methods: {
223 |       // 获取列表
224 |       _getData() {
225 |         getRole({
226 |           page: this.page,
227 |           size: this.size,
228 |           name: this.name,
229 |         }).then((res) => {
230 |           this.data = res.data.data;
231 |           this.total = res.data.total;
232 |           this.load = false;
233 |         });
234 |       },
235 |       read(row) {
236 |         this.roleInfo = row;
237 |         this.modal1 = true;
238 |       },
239 |       editClick(row) {
240 |         this.createData = {}
241 |         this.edit = true;
242 |         this.modal2 = true;
243 |         this.createData = {
244 |           ...row,
245 |         };
246 |       },
247 |       addClick() {
248 |         this.edit = false;
249 |         this.modal2 = true;
250 |         this.createData = {
251 |           name: "",
252 |           storage_id: "",
253 |           is_admin: 0,
254 |           is_add: 0,
255 |           is_read: 0,
256 |           is_read_all: 0,
257 |           is_del_own: 0,
258 |           is_del_all: 0,
259 |           default: 0,
260 |         };
261 |       },
262 |       // 新增
263 |       addSave() {
264 |         if (!this.createData.name) {
265 |           this.nextTick()
266 |           return this.$Message.error({
267 |             background: true,
268 |             content: "名称不能为空",
269 |           });
270 |         }
271 |         if (!this.createData.storage_id) {
272 |           this.nextTick()
273 |           return this.$Message.error({
274 |             background: true,
275 |             content: "请选择存储桶",
276 |           });
277 |         }
278 |         postRole({
279 |           name: this.createData.name,
280 |           storage_id: this.createData.storage_id,
281 |           is_admin: this.createData.is_admin,
282 |           is_add: this.createData.is_add,
283 |           is_read: this.createData.is_read,
284 |           is_read_all: this.createData.is_read_all,
285 |           is_del_own: this.createData.is_del_own,
286 |           is_del_all: this.createData.is_del_all,
287 |           default: this.createData.default,
288 |         }).then((res) => {
289 |           if (res.code == 200) {
290 |             this.$Message.success({
291 |               background: true,
292 |               content: res.msg,
293 |             });
294 |             this.modal2 = false;
295 |             this._getData();
296 |           } else {
297 |             this.$Message.error({
298 |               background: true,
299 |               content: res.msg,
300 |             });
301 |             this.load = false
302 |           }
303 |           this.nextTick()
304 |         });
305 |       },
306 |       // 编辑
307 |       editSave() {
308 |         if (!this.createData.name) {
309 |           this.nextTick()
310 |           return this.$Message.error({
311 |             background: true,
312 |             content: "名称不能为空",
313 |           });
314 |         }
315 |         if (!this.createData.storage_id) {
316 |           this.nextTick()
317 |           return this.$Message.error({
318 |             background: true,
319 |             content: "请选择存储桶",
320 |           });
321 |         }
322 |         this.load = true
323 |         putRole({
324 |           id: this.createData.id,
325 |           name: this.createData.name,
326 |           storage_id: this.createData.storage_id,
327 |           is_admin: this.createData.is_admin,
328 |           is_add: this.createData.is_add,
329 |           is_read: this.createData.is_read,
330 |           is_read_all: this.createData.is_read_all,
331 |           is_del_own: this.createData.is_del_own,
332 |           is_del_all: this.createData.is_del_all,
333 |           default: this.createData.default,
334 |         }).then((res) => {
335 |           if (res.code == 200) {
336 |             this.$Message.success({
337 |               background: true,
338 |               content: res.msg,
339 |             });
340 |             this.modal2 = false;
341 | 
342 |           } else {
343 |             this.$Message.error({
344 |               background: true,
345 |               content: res.msg,
346 |             });
347 |             this.load = false
348 |           }
349 |           this._getData();
350 |           this.nextTick()
351 |         });
352 |       },
353 |       onChange(row) {
354 |         this.createData = {
355 |           ...row,
356 |         };
357 |         this.editSave()
358 |       },
359 | 
360 |       // 删除
361 |       del(id) {
362 |         this.delId = id;
363 |         this.modal3 = true
364 |       },
365 |       // 删除方法
366 |       delFunction() {
367 |         this.modal_loading = true
368 |         delRole({
369 |           id: this.delId,
370 |         }).then((res) => {
371 |           if (res.code == 200) {
372 |             this.$Message.success({
373 |               background: true,
374 |               content: res.msg,
375 |             });
376 |             this._getData();
377 |           } else {
378 |             this.$Message.error({
379 |               background: true,
380 |               content: res.msg,
381 |             });
382 |           }
383 |           this.modal_loading = false
384 |           this.modal3 = false
385 |         });
386 |       },
387 | 
388 |       // 分页跳转
389 |       pageChange(val) {
390 |         this.page = val;
391 |         this.load = true;
392 |         this._getData();
393 |       },
394 |       pageSizeChange(val) {
395 |         this.load = true;
396 |         this.page = 1;
397 |         this.size = val;
398 |         this._getData();
399 |       },
400 |       // 获取存储桶列表
401 |       _getStorage() {
402 |         getStorage({
403 |           page: 1,
404 |           size: 100,
405 |         }).then((res) => {
406 |           this.storageList = res.data.data;
407 |         });
408 |       },
409 | 
410 |       nextTick() {
411 |         this.creating = false;
412 |         this.$nextTick(() => {
413 |           this.creating = true;
414 |         });
415 |       }
416 |     },
417 |   };
418 | </script>
419 | 
420 | <style lang="less" scoped>
421 |   .ivu-checkbox-wrapper {
422 |     margin-bottom: 5px;
423 |   }
424 | </style>


--------------------------------------------------------------------------------
/src/views/setup/storage.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div>
 16 |     <div class="page-content">
 17 |       <div class="container-fluid">
 18 |         <div class="card">
 19 |           <div class="card-head">存储桶</div>
 20 |           <div class="card-body">
 21 |             <div class="demo-spin-container" v-if="loading">
 22 |                 <Spin fix size="large"></Spin>
 23 |               </div>
 24 |             <Row :gutter="24" v-else>
 25 |               <Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24" class="ivu-mb" v-if="userInfo.role.is_admin == 1">
 26 |               <Card class="list-goods-list-item">
 27 |                 <div class="main" @click="addClick">
 28 |                   <Icon type="ios-add" size="18" /> 新建桶
 29 |                 </div>
 30 |               </Card>
 31 |               </Col>
 32 |               <Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24" class="ivu-mb" v-for="item in data"
 33 |                 :key="item.id">
 34 |               <Card class="list-goods-list-item">
 35 |                 <div style="padding: 16px;height:110px">
 36 |                   <div class="name">
 37 |                     {{ item.name }}
 38 |                     <Tag color="green" style="float: right">{{
 39 |                         getName(item.type)
 40 |                       }}</Tag>
 41 |                   </div>
 42 |                   <div class="explain">
 43 |                     <Tag color="default">图片数量：{{ item.imgCount}}</Tag><br />
 44 |                     <Tag color="default">占用存储：{{ turnSize(item.imgSize)}}</Tag>
 45 |                   </div>
 46 |                 </div>
 47 |                 <div class="btn-main" v-if="userInfo.role.is_admin == 1">
 48 |                   <div class="btn" @click="editClick(item)">编辑</div>
 49 |                   <div class="btn" @click="del(item.id)">删除</div>
 50 |                   <div style="clear: both"></div>
 51 |                 </div>
 52 |               </Card>
 53 |               </Col>
 54 |             </Row>
 55 |             <div class="paging">
 56 |               <Page :total="Number(total)" :current="page" :page-size="size" :simple="$store.state.isMobile"
 57 |                 @on-change="pageChange" @on-page-size-change="pageSizeChange" show-total show-sizer show-elevator />
 58 |             </div>
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 |     </div>
 63 |     <Modal v-model="showCreate" :width="600" :title="edit ? '编辑桶' : '新增桶'" :loading="creating"
 64 |       @on-ok="edit ? editSave() : addSave()" class-name="vertical-center-modal">
 65 |       <Form ref="create" :model="createData" :label-width="130">
 66 |         <FormItem label="存储源">
 67 |           <Select v-model="createData.type" style="width: 200px" placeholder="请选择存储源" :disabled="edit">
 68 |             <Option v-for="(val, key,index) in sourceList" :value="key" :key="index">{{ val }}</Option>
 69 |           </Select>
 70 |           <p style="font-size:12px;color:red" v-show="!edit">
 71 |             * 添加成功后存储源不可修改
 72 |           </p>
 73 |         </FormItem>
 74 |         <FormItem label="桶名称">
 75 |           <Input v-model="createData.name" placeholder="请输入自定义名称" />
 76 |         </FormItem>
 77 |         <FormItem label="空间域名" v-show="createData.type != 'local'">
 78 |           <Input v-model="createData.space_domain" placeholder="请输入空间域名" />
 79 |         </FormItem>
 80 | 
 81 |         <FormItem :label="getLabel('AccessKey')" v-show="createData.type != 'local'">
 82 |           <Input v-model="createData.AccessKey" :placeholder="'请输入' + getLabel('AccessKey')" />
 83 |         </FormItem>
 84 |         <FormItem :label="getLabel('SecretKey')" v-show="createData.type != 'local'">
 85 |           <Input v-model="createData.SecretKey" :placeholder="'请输入' + getLabel('AccessKey')" />
 86 |         </FormItem>
 87 | 
 88 |         <FormItem label="所属地域" v-show="createData.type == 'cos' || createData.type == 'oss'">
 89 |           <Input v-model="createData.region" placeholder="请输入所属地域" />
 90 |         </FormItem>
 91 |         <FormItem label="空间名称" v-show="createData.type != 'local'">
 92 |           <Input v-model="createData.bucket" placeholder="请输入空间名称 bucket" />
 93 |         </FormItem>
 94 | 
 95 |       </Form>
 96 |     </Modal>
 97 | 
 98 |     <Modal v-model="showDel" width="360">
 99 |       <p slot="header" style="color: #f60">
100 |         <Icon type="ios-information-circle"></Icon>
101 |         <span>删除确认</span>
102 |       </p>
103 |       <div>
104 |         <p>
105 |           为安全起见，删除桶会删除系统内此桶的所有数据，但不会删除此桶内已有的图片文件；通俗的讲就是删除桶后不会影响之前上传的图片链接，但系统将会无法管理之前的图片，仍可以前往服务器图片文件所在文件夹或所属对象存储控制台管理
106 |         </p>
107 |       </div>
108 |       <div slot="footer">
109 |         <Button type="error" size="large" long :loading="modal_loading" @click="delFunction">确认删除</Button>
110 |       </div>
111 |     </Modal>
112 |   </div>
113 | </template>
114 | 
115 | <script>
116 |   import {
117 |     getStorage,
118 |     postStorage,
119 |     putStorage,
120 |     delStorage,
121 |     getStorageType
122 |   } from "@/api/index";
123 |   import {
124 |     toSize
125 |   } from "@/utils/index"
126 |   import {
127 |     mapState
128 |   } from "vuex";
129 |   export default {
130 |     data() {
131 |       return {
132 |         showCreate: false,
133 |         showDel: false,
134 |         creating: true,
135 |         loading: true,
136 |         modal_loading: false,
137 |         edit: false,
138 |         createData: {},
139 |         sourceList: {},
140 |         data: [],
141 |         page: 1,
142 |         size: 10,
143 |         total: "",
144 |         delId: "",
145 |       };
146 |     },
147 |     computed: {
148 |       ...mapState(["userInfo"]),
149 |       getLabel() {
150 |         return (value) => {
151 |           if (value == "AccessKey") {
152 |             if (this.createData.type == "oss") {
153 |               return "AccessKey ID";
154 |             }
155 |             if (this.createData.type == "cos") {
156 |               return "secretId";
157 |             }
158 |             if (this.createData.type == "kodo") {
159 |               return "AccessKey";
160 |             }
161 |           } else {
162 |             if (this.createData.type == "oss") {
163 |               return "AccessKey Secret";
164 |             }
165 |             if (this.createData.type == "cos") {
166 |               return "secretKey";
167 |             }
168 |             if (this.createData.type == "kodo") {
169 |               return "SecretKey";
170 |             }
171 |           }
172 |         };
173 |       },
174 |       turnSize() {
175 |         return (val) => {
176 |           return toSize(val)
177 |         };
178 |       },
179 |       getName() {
180 |         return (value) => {
181 |           for (let key in this.sourceList) {
182 |             if (value == key) {
183 |               return this.sourceList[key]
184 |             }
185 |           }
186 |         };
187 |       },
188 |     },
189 |     created() {
190 |       this._getData();
191 |       this._getStorageType();
192 |     },
193 | 
194 |     methods: {
195 |       del(id) {
196 |         this.delId = id;
197 |         this.showDel = true;
198 |       },
199 |       // 删除方法
200 |       delFunction() {
201 |         this.modal_loading = true
202 |         delStorage({
203 |           id: this.delId,
204 |         }).then((res) => {
205 |           if (res.code == 200) {
206 |             this.$Message.success({
207 |               background: true,
208 |               content: res.msg,
209 |             });
210 |             this._getData();
211 |           } else {
212 |             this.$Message.error({
213 |               background: true,
214 |               content: res.msg,
215 |             });
216 |           }
217 |           this.modal_loading = false
218 |           this.showDel = false
219 |         });
220 |       },
221 |       //  新增按钮
222 |       addClick() {
223 |         this.edit = false;
224 |         this.showCreate = true;
225 |         this.createData = {
226 |           name: "",
227 |           type: "local",
228 |           space_domain: "",
229 |           AccessKey: "",
230 |           SecretKey: "",
231 |           region: "",
232 |           bucket: "",
233 |         };
234 |       },
235 |       // 获取列表
236 |       _getData() {
237 |         this.loading = true
238 |         getStorage({
239 |           page: this.page,
240 |           size: this.size,
241 |         }).then((res) => {
242 |           this.loading = false
243 |           this.data = res.data.data;
244 |           this.total = res.data.total;
245 |         });
246 |       },
247 |       _getStorageType() {
248 |         getStorageType().then((res) => {
249 |           this.sourceList = res.data
250 |         });
251 |       },
252 | 
253 |       // 新增
254 |       addSave() {
255 |         if (!this.createData.name) {
256 |           this.nextTick()
257 |           return this.$Message.error({
258 |             background: true,
259 |             content: "名称不能为空",
260 |           });
261 |         }
262 |         postStorage({
263 |           name: this.createData.name,
264 |           type: this.createData.type,
265 |           space_domain: this.createData.space_domain,
266 |           AccessKey: this.createData.AccessKey,
267 |           SecretKey: this.createData.SecretKey,
268 |           region: this.createData.region,
269 |           bucket: this.createData.bucket,
270 |         }).then((res) => {
271 |           if (res.code == 200) {
272 |             this.$Message.success({
273 |               background: true,
274 |               content: res.msg,
275 |             });
276 |             this.showCreate = false;
277 |             this._getData();
278 |           } else {
279 |             this.$Message.error({
280 |               background: true,
281 |               content: res.msg,
282 |             });
283 |           }
284 |           this.nextTick()
285 |         });
286 |       },
287 | 
288 |       //  编辑按钮
289 |       editClick(row) {
290 |         this.edit = true;
291 |         this.showCreate = true;
292 |         this.createData = {
293 |           ...row,
294 |         };
295 |       },
296 |       // 编辑
297 |       editSave() {
298 |         if (!this.createData.name) {
299 |           this.nextTick()
300 |           return this.$Message.error({
301 |             background: true,
302 |             content: "名称不能为空",
303 |           });
304 |         }
305 |         putStorage({
306 |           id: this.createData.id,
307 |           name: this.createData.name,
308 |           type: this.createData.type,
309 |           space_domain: this.createData.space_domain,
310 |           AccessKey: this.createData.AccessKey,
311 |           SecretKey: this.createData.SecretKey,
312 |           region: this.createData.region,
313 |           bucket: this.createData.bucket,
314 |         }).then((res) => {
315 |           if (res.code == 200) {
316 |             this.$Message.success({
317 |               background: true,
318 |               content: res.msg,
319 |             });
320 |             this.showCreate = false;
321 |             this._getData();
322 |           } else {
323 |             this.$Message.error({
324 |               background: true,
325 |               content: res.msg,
326 |             });
327 |           }
328 |           this.nextTick()
329 |         });
330 |       },
331 | 
332 |       // 分页跳转
333 |       pageChange(val) {
334 |         this.page = val;
335 |         this._getData();
336 |       },
337 |       pageSizeChange(val) {
338 |         this.page = 1;
339 |         this.size = val;
340 |         this._getData();
341 |       },
342 |       nextTick() {
343 |         this.creating = false;
344 |         this.$nextTick(() => {
345 |           this.creating = true;
346 |         });
347 |       }
348 |     },
349 |   };
350 | </script>
351 | 
352 | <style lang="less" scoped>
353 |   .list-goods-list-item {
354 |     margin-bottom: 20px;
355 |     // height: 156px;
356 | 
357 |     .main {
358 |       line-height: 151px;
359 |       text-align: center;
360 |       cursor: pointer;
361 |     }
362 | 
363 |     .main:hover {
364 |       color: #2d8cf0;
365 |       background: rgba(25, 129, 243, 0.07);
366 |     }
367 | 
368 |     .name {
369 |       font-size: 16px;
370 |       font-weight: 600;
371 |       color: #000000;
372 |     }
373 | 
374 |     .btn-main {
375 |       border-top: 1px solid #e5e9f3;
376 | 
377 |       .btn {
378 |         width: 50%;
379 |         float: left;
380 |         text-align: center;
381 |         padding: 10px;
382 |         cursor: pointer;
383 |         position: relative;
384 |       }
385 | 
386 |       .btn:hover {
387 |         color: red;
388 |       }
389 |     }
390 | 
391 |     .btn-main .btn:first-child {
392 |       border-right: 1px solid #e5e9f3;
393 |     }
394 | 
395 |     .btn-main .btn:first-child:hover {
396 |       color: #2d8cf0;
397 |     }
398 | 
399 |     .explain {
400 |       font-size: 14px;
401 |       color: #000000;
402 |       margin-top: 5px;
403 |     }
404 | 
405 |     /deep/.ivu-card-body {
406 |       padding: 0 !important;
407 |     }
408 |   }
409 | 
410 |  
411 | </style>


--------------------------------------------------------------------------------
/src/views/user/about.vue:
--------------------------------------------------------------------------------
 1 | <!-- 
 2 | // +----------------------------------------------------------------------
 3 | // | LightPicture [ 图床 ]
 4 | // +----------------------------------------------------------------------
 5 | // | 企业团队图片资源管理系统
 6 | // +----------------------------------------------------------------------
 7 | // | Github: https://github.com/osuuu/LightPicture
 8 | // +----------------------------------------------------------------------
 9 | // | Copyright © http://picture.h234.cn All rights reserved.
10 | // +----------------------------------------------------------------------
11 | // | Author: Team <admin@osuu.net>
12 | // +---------------------------------------------------------------------- 
13 | -->
14 | <template>
15 |   <div>
16 |     <div class="page-content">
17 |       <div class="container-fluid">
18 |         <div class="card">
19 |           <div class="card-head">关于系统</div>
20 |           <div class="card-body">
21 |             <Alert type="success">
22 |               LightPicture
23 |               <span slot="desc">
24 |                 <Tag color="success">当前版本：{{config.version}} （{{config.time}}）</Tag>
25 |                 <p>一套轻量级企业团队图片资源管理系统、图床系统</p>
26 |                 <p>2021年底，苦于创作时没有一款方便快捷且适合需求的图床，在自己折腾下开发了LightPicture，本系统遵循GPL 3.0开源许可</p>
27 |                 <p>如果您认可我的作品，请为我点击一个star，你的支持也将帮助LightPicture变的更好</p>
28 |                 <p>
29 |                   <a href="http://picture.h234.cn" target="_blank">官网</a>
30 |                   <span class="line">-</span>
31 |                   <a href="https://github.com/osuuu/LightPicture" target="_blank">Github</a></p>
32 |                 <p>
33 |                   bug反馈请联系作者：admin@osuu.net
34 |                 </p>
35 |               </span>
36 |             </Alert>
37 |           </div>
38 |         </div>
39 |       </div>
40 |     </div>
41 |   </div>
42 | </template>
43 | 
44 | <script>
45 | import {
46 |     mapState,
47 |   } from 'vuex'
48 |   export default {
49 |     data() {
50 |       return {
51 |         
52 |       };
53 |     },
54 |     computed: {
55 |       ...mapState(['config']),
56 |     },
57 | 
58 | 
59 |   };
60 | </script>
61 | 
62 | <style lang="less" scoped>
63 |   p {
64 |     line-height: 30px;
65 |   }
66 | 
67 |   a {
68 |     color: blue;
69 |   }
70 | 
71 |   .line {
72 |     margin: 0 10px;
73 |   }
74 | </style>


--------------------------------------------------------------------------------
/src/views/user/update.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="page-content">
  4 |       <div class="container-fluid">
  5 |         <div class="card">
  6 |           <div class="card-head">软件更新</div>
  7 |           <div class="card-body">
  8 |              <Alert show-icon>为较好的体验感，系统不会自动检测新版本，需点击“检测更新”手动获取</Alert>
  9 |             <div class="auth">
 10 |               <div class="title" v-if="isUpdate"> 发现新版本啦</div>
 11 |               <div class="title" v-else>
 12 |                 <Icon type="md-thumbs-up" color="#ff5473" />
 13 |                 当前已是最新版啦</div>
 14 |               <div class="version"> 当前程序版本：{{config.version}} （{{config.time}}）</div>
 15 | 
 16 |               <div class="version" v-if="isUpdate"> 最新程序版本：{{data.version}} （{{data.time}}） </div>
 17 | 
 18 | 
 19 | 
 20 |               <Button v-if="!isUpdate" type="primary" @click="_getData" :loading="loading">检测更新</Button>
 21 | 
 22 | 
 23 | 
 24 |               <p style="margin:5px 0 15px 0" v-if="isUpdate" v-html="data.info"></p>
 25 |               <Button v-if="isUpdate" type="success" @click="_postUpdate" :loading="editload">立即更新</Button>
 26 | 
 27 | 
 28 | 
 29 |             </div>
 30 | 
 31 |             <Divider />
 32 |             <div class="auth" v-if="speedload">
 33 |               <div class="speed" v-if="!error">
 34 |                 <span class="loader-77"> </span>
 35 |               </div>
 36 |               <div class="speed-sm">
 37 |                 {{explain}}
 38 |               </div>
 39 | 
 40 | 
 41 |             </div>
 42 | 
 43 |           </div>
 44 |         </div>
 45 |       </div>
 46 |     </div>
 47 |     <Modal v-model="modal" title="数据库更新" class-name="vertical-center-modal" footer-hide>
 48 |       <iframe src="/admin/home/update" frameborder="0"></iframe>
 49 |     </Modal>
 50 |   </div>
 51 | </template>
 52 | 
 53 | <script>
 54 |   import {
 55 |     getUpdate,
 56 |     postUpdate,
 57 |   } from "@/api/index";
 58 |   import {
 59 |     mapState,
 60 |   } from 'vuex'
 61 |   export default {
 62 |     data() {
 63 |       return {
 64 |         data: {},
 65 |         loading: false,
 66 |         isUpdate: false,
 67 |         editload: false,
 68 |         speedload: false,
 69 |         error: false,
 70 |         explain: "",
 71 | 
 72 |         file: ""
 73 |       };
 74 |     },
 75 |     computed: {
 76 |       ...mapState(['config']),
 77 |     },
 78 | 
 79 |     methods: {
 80 |       // 获取更新
 81 |       _getData() {
 82 |         this.loading = true
 83 |         getUpdate().then((res) => {
 84 |           this.loading = false
 85 |           if (res.code == 1001) {
 86 |             this.$Message.success({
 87 |               background: true,
 88 |               content: res.msg,
 89 |             });
 90 |           }
 91 |           if (res.code == 1002) {
 92 |             this.data = res.data
 93 |             this.isUpdate = true
 94 |           }
 95 |         });
 96 |       },
 97 | 
 98 |       // 更新
 99 |       _postUpdate() {
100 |         this.editload = true
101 |         this.speedload = true
102 |         this.explain = "程序更新中...请不要返回和关闭页面，请保持网络通畅"
103 |         postUpdate().then((res) => {
104 |           if (res.code == 200) {
105 |             this.error = true
106 |             this.editload = false
107 |             this.explain = res.msg
108 |           } else {
109 |             this.error = true
110 |             this.explain = '更新失败... '+res.msg
111 |             this.editload = false
112 |           }
113 |         });
114 | 
115 |         // this.error = false
116 |       },
117 | 
118 |     
119 |     
120 | 
121 | 
122 | 
123 |     },
124 |   };
125 | </script>
126 | 
127 | <style lang="less" scoped>
128 |   iframe {
129 |     width: 100%;
130 |     min-height: 200px;
131 |   }
132 | 
133 |   .auth {
134 |     padding: 12px;
135 |     background-color: #fff;
136 |     border: 1px solid #f7f7f7;
137 |     border-left: 4px solid #339fd4;
138 |     border-radius: 5px;
139 |     position: relative;
140 |     margin-bottom: 20px;
141 | 
142 |     .title {
143 |       color: #ff5473;
144 |       font-weight: 600;
145 |       font-size: 18px;
146 |     }
147 | 
148 |     .version {
149 |       line-height: 35px;
150 |     }
151 | 
152 |     .btn {
153 |       margin: 10px 0;
154 |     }
155 |   }
156 | 
157 |   .speed-sm {
158 |     margin: 5px 0;
159 |     font-size: 14px;
160 |     color: #1C1D1F;
161 |   }
162 | 
163 |   .speed {
164 | 
165 | 
166 |     .loader-77 {
167 |       width: 100%;
168 |       height: 8px;
169 |       display: inline-block;
170 |       position: relative;
171 |       overflow: hidden;
172 |     }
173 | 
174 |     .loader-77::before {
175 |       content: "";
176 |       top: 0;
177 |       left: 0;
178 |       height: 100%;
179 |       width: 100%;
180 |       position: absolute;
181 |       background-color: rgba(255, 255, 255, 0.15);
182 |       background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
183 |       background-size: 15px 15px;
184 |       z-index: 10;
185 |     }
186 | 
187 |     .loader-77::after {
188 |       content: "";
189 |       width: 0%;
190 |       height: 100%;
191 |       background-image: linear-gradient(to right, rgb(16, 142, 233) 0%, rgb(135, 208, 104) 100%);
192 |       position: absolute;
193 |       border-radius: 0 4px 4px 0;
194 |       top: 0;
195 |       left: 0;
196 |       -webkit-animation: animFw 10s ease-in infinite;
197 |       animation: animFw 10s ease-in infinite;
198 |     }
199 | 
200 |     @-webkit-keyframes animFw {
201 |       0% {
202 |         width: 0;
203 |       }
204 | 
205 |       100% {
206 |         width: 100%;
207 |       }
208 |     }
209 | 
210 |     @keyframes animFw {
211 |       0% {
212 |         width: 0;
213 |       }
214 | 
215 |       100% {
216 |         width: 100%;
217 |       }
218 |     }
219 |   }
220 | </style>


--------------------------------------------------------------------------------
/src/views/user/userInfo.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div>
 16 |     <div class="page-content">
 17 |       <div class="container-fluid">
 18 |         <div class="card">
 19 |           <div class="card-head">个人信息</div>
 20 |           <div class="card-body">
 21 |             <div class="demo-spin-container" v-if="loading2">
 22 |               <Spin fix size="large"></Spin>
 23 |             </div>
 24 |             <Form ref="create" :model="formValidate" :label-width="100" v-else>
 25 |               <FormItem label="头像">
 26 |                 <div class="portrait">
 27 |                   <img v-lazy="formValidate.avatar" alt="LightPicture" />
 28 |                   <p class="btn" @click="isPortrait = true">修改</p>
 29 |                 </div>
 30 |               </FormItem>
 31 |               <FormItem label="邮箱/账号">
 32 |                 <Input v-model="formValidate.email" disabled></Input>
 33 |               </FormItem>
 34 | 
 35 | 
 36 |               <FormItem label="API秘钥">
 37 |                 <Input v-model="formValidate.Secret_key" disabled>
 38 |                 <Button slot="append" @click="resetKEY">重置</Button>
 39 |                 </Input>
 40 |               </FormItem>
 41 | 
 42 |               <FormItem label="注册时间">
 43 |                 <Input v-model="formValidate.create_time" disabled></Input>
 44 |               </FormItem>
 45 | 
 46 |               <FormItem label="角色组">
 47 |                 <Input v-model="formValidate.role.name" disabled></Input>
 48 |               </FormItem>
 49 | 
 50 |               <FormItem label="角色权限">
 51 |                 <Tag color="blue" v-if="formValidate.role.is_admin">管理员</Tag>
 52 |                 <Tag color="blue" v-if="!formValidate.role.is_admin && formValidate.role.is_add">上传图片</Tag>
 53 |                 <Tag color="blue" v-if="!formValidate.role.is_admin && formValidate.role.is_del_own">删除自己上传的图片</Tag>
 54 |                 <Tag color="blue" v-if="!formValidate.role.is_admin && formValidate.role.is_read">查看所在存储桶其他人上传的图片</Tag>
 55 |                 <Tag color="blue" v-if="!formValidate.role.is_admin && formValidate.role.is_del_all">删除所在存储桶其他人上传的图片</Tag>
 56 |                 <Tag color="blue" v-if="!formValidate.role.is_admin && formValidate.role.is_read_all">查看系统全部图片</Tag>
 57 |               </FormItem>
 58 | 
 59 | 
 60 |               <FormItem label="姓名">
 61 |                 <Input v-model="formValidate.username" placeholder="请输入姓名"></Input>
 62 |               </FormItem>
 63 |               <FormItem label="联系电话">
 64 |                 <Input v-model="formValidate.phone" placeholder="请输入联系电话"></Input>
 65 |               </FormItem>
 66 | 
 67 |               <FormItem>
 68 |                 <Button type="primary" @click="edit()" :loading="loading">保存</Button>
 69 |               </FormItem>
 70 |             </Form>
 71 |           </div>
 72 |         </div>
 73 |       </div>
 74 |     </div>
 75 |     <PortraitSelect v-if="isPortrait" :avatar="formValidate.avatar" @close="close" @confirm="confirm"></PortraitSelect>
 76 | 
 77 | 
 78 |   </div>
 79 | </template>
 80 | 
 81 | <script>
 82 |   import {
 83 |     getUserInfo,
 84 |     putResetKey,
 85 |     putUpdate
 86 |   } from "@/api/index";
 87 |   import {
 88 |     mapMutations
 89 |   } from "vuex";
 90 |   export default {
 91 |     data() {
 92 |       return {
 93 |         formValidate: {},
 94 |         isPortrait: false,
 95 |         modal: false,
 96 |         old_pwd: "",
 97 |         new_pwd: "",
 98 |         new_pwd2: "",
 99 |         loading: false,
100 |         loading2: true,
101 |       };
102 |     },
103 |     created() {
104 |       this._getData();
105 |     },
106 | 
107 |     methods: {
108 |       ...mapMutations(["addUserInfo"]),
109 |       close() {
110 |         this.isPortrait = false;
111 |       },
112 |       confirm(e) {
113 |         this.formValidate.avatar = e;
114 |         this.isPortrait = false;
115 |       },
116 |       // 重置KEY
117 |       resetKEY() {
118 |         this.$Modal.confirm({
119 |           title: "是否确认重置",
120 |           onOk: () => {
121 |             putResetKey().then((res) => {
122 |               this.$Message.success({
123 |                 background: true,
124 |                 content: res.msg,
125 |               });
126 |               this._getData();
127 |             });
128 |           },
129 |         });
130 |       },
131 | 
132 |       // 获取列表
133 |       _getData() {
134 |         this.loading2 = true
135 |         getUserInfo().then((res) => {
136 |           this.formValidate = {...res.data};
137 |           this.loading2 = false
138 |           this.addUserInfo(res.data)
139 |         });
140 |       },
141 | 
142 |       // 更新信息
143 |       edit() {
144 |         this.loading = true;
145 |         putUpdate({
146 |           avatar: this.formValidate.avatar,
147 |           username: this.formValidate.username,
148 |           phone: this.formValidate.phone,
149 |         }).then((res) => {
150 |           this.$Message.success({
151 |             background: true,
152 |             content: res.msg,
153 |           });
154 |           this._getData();
155 |           
156 |           this.loading = false;
157 |         });
158 |       },
159 |     },
160 |   };
161 | </script>
162 | 
163 | <style lang="less" scoped>
164 |   .portrait {
165 |     position: relative;
166 |     width: 120px;
167 |     height: 120px;
168 |     border-radius: 50%;
169 |     overflow: hidden;
170 | 
171 |     img {
172 |       width: 120px;
173 |       border-radius: 50%;
174 |     }
175 | 
176 |     .btn {
177 |       position: absolute;
178 |       left: 0;
179 |       bottom: 0;
180 |       opacity: 0.75;
181 |       background: rgb(24, 24, 24);
182 |       color: #ffffff;
183 |       width: 120px;
184 |       text-align: center;
185 |       cursor: pointer;
186 |     }
187 |   }
188 | </style>


--------------------------------------------------------------------------------
/src/views/user/userpwd.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div>
 16 |     <div class="page-content">
 17 |       <div class="container-fluid">
 18 |         <div class="card">
 19 |           <div class="card-head">修改密码</div>
 20 |           <div class="card-body">
 21 |             <Form
 22 |               ref="create"
 23 |               :model="formValidate"
 24 |               :rules="ruleValidate"
 25 |               :label-width="100"
 26 |             >
 27 |               <FormItem label="当前密码" prop="old_pwd">
 28 |                 <Input
 29 |                   v-model="formValidate.old_pwd"
 30 |                   placeholder="请输入当前密码"
 31 |                 ></Input>
 32 |               </FormItem>
 33 |               <FormItem label="新密码" prop="new_pwd">
 34 |                 <Input
 35 |                   v-model="formValidate.new_pwd"
 36 |                   type="password"
 37 |                   placeholder="请输入新密码"
 38 |                 ></Input>
 39 |               </FormItem>
 40 |               <FormItem label="确认密码" prop="new_pwd2">
 41 |                 <Input
 42 |                   v-model="formValidate.new_pwd2"
 43 |                   type="password"
 44 |                   placeholder="请再次输入新密码"
 45 |                 ></Input>
 46 |               </FormItem>
 47 |               <FormItem>
 48 |                 <Button type="primary" @click="edit()" :loading="loading"
 49 |                   >确认修改</Button
 50 |                 >
 51 |               </FormItem>
 52 |             </Form>
 53 |           </div>
 54 |         </div>
 55 |       </div>
 56 |     </div>
 57 |   </div>
 58 | </template>
 59 | 
 60 | <script>
 61 | import { putResetPwd } from "@/api/index";
 62 | export default {
 63 |   data() {
 64 |     return {
 65 |       formValidate: {
 66 |         old_pwd: "",
 67 |         new_pwd: "",
 68 |         new_pwd2: "",
 69 |       },
 70 |       ruleValidate: {
 71 |         old_pwd: [
 72 |           {
 73 |             required: true,
 74 |             message: "请输入当前密码",
 75 |             trigger: "blur",
 76 |           },
 77 |         ],
 78 |         new_pwd: [
 79 |           {
 80 |             required: true,
 81 |             message: "请输入新密码",
 82 |             trigger: "blur",
 83 |           },
 84 |         ],
 85 |         new_pwd2: [
 86 |           {
 87 |             required: true,
 88 |             message: "请再次输入新密码",
 89 |             trigger: "blur",
 90 |           },
 91 |         ],
 92 |       },
 93 | 
 94 |       loading: false,
 95 |     };
 96 |   },
 97 | 
 98 |   methods: {
 99 |     // 更新信息
100 |     edit() {
101 |       this.$refs.create.validate((valid) => {
102 |         if (valid) {
103 |           if (this.formValidate.new_pwd != this.formValidate.new_pwd2) {
104 |             return this.$Message.error({
105 |               background: true,
106 |               content: "两次密码输入不一致",
107 |             });
108 |           }
109 | 
110 |           this.loading = true;
111 |           putResetPwd({
112 |             oldPwd: this.formValidate.old_pwd,
113 |             newPwd: this.formValidate.new_pwd,
114 |           }).then((res) => {
115 |             if (res.code == 200) {
116 |               this.$Message.success({
117 |                 background: true,
118 |                 content: res.msg,
119 |               });
120 |               this.formValidate.old_pwd = ""
121 |               this.formValidate.new_pwd = ""
122 |               this.formValidate.new_pwd2 = ""
123 |             } else {
124 |               this.$Message.error({
125 |                 background: true,
126 |                 content: res.msg,
127 |               });
128 |             }
129 |             this.loading = false;
130 |           });
131 |         }
132 |       });
133 |     },
134 |   },
135 | };
136 | </script>
137 | 
138 | <style lang="less" scoped>
139 | 
140 | </style>


--------------------------------------------------------------------------------
/src/views/word/delete.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div class="setting-account-account">
 16 |     <h2>删除图片</h2>
 17 | 
 18 |     <div class="ivu-mt ivu-pl ivu-pr">
 19 |       <Divider orientation="left">请求接口</Divider>
 20 |       <Alert type="success">{{userInfo.scheme}}://{{userInfo.url}}/api/delete</Alert>
 21 |       <Divider orientation="left">请求方式</Divider>
 22 |       <Alert>DELETE</Alert>
 23 |       <Divider orientation="left">JSON 请求示例</Divider>
 24 |       <Table :columns="columns1" :data="data1" border> </Table>
 25 |       <json-viewer :value="jsonData1" :copyable="{ copyText: '复制', copiedText: '复制成功' }" preview-mode></json-viewer>
 26 |       <Divider orientation="left">JSON 响应示例</Divider>
 27 |       <Table :columns="columns2" :data="data2" border> </Table>
 28 | 
 29 |       <json-viewer :value="jsonData2" :copyable="{ copyText: '复制', copiedText: '复制成功' }" preview-mode></json-viewer>
 30 |     </div>
 31 |   </div>
 32 | </template>
 33 | <script>
 34 |   import JsonViewer from "vue-json-viewer";
 35 |   import {
 36 |     mapState
 37 |   } from "vuex";
 38 |   export default {
 39 |     data() {
 40 |       return {
 41 |         jsonData1: {
 42 |           id: "1001",
 43 |           key: "0135b7d8cd98e4a8289be628ff35aab9",
 44 |         },
 45 |         jsonData2: {
 46 |           code: "200",
 47 |           msg: "成功",
 48 |           data: "202201082323395119.png"
 49 |         },
 50 |         columns1: [{
 51 |             title: "参数",
 52 |             align: "center",
 53 |             minWidth:60,
 54 |             key: "param",
 55 |           },
 56 |           {
 57 |             title: "类型",
 58 |             align: "center",
 59 |             minWidth: 120,
 60 |             key: "type",
 61 |           },
 62 |           {
 63 |             title: "约束",
 64 |             align: "center",
 65 |             minWidth: 120,
 66 |             key: "restrain",
 67 |           },
 68 |           {
 69 |             title: "描述",
 70 |             align: "center",
 71 |             minWidth: 120,
 72 |             key: "des",
 73 |           },
 74 |           {
 75 |             title: "示例",
 76 |             align: "center",
 77 |             minWidth: 120,
 78 |             key: "example",
 79 |           },
 80 |         ],
 81 |         columns2: [{
 82 |             title: "参数",
 83 |             align: "center",
 84 |             minWidth: 80,
 85 |             key: "param",
 86 |           },
 87 |           {
 88 |             title: "类型",
 89 |             align: "center",
 90 |             minWidth:120,
 91 |             key: "type",
 92 |           },
 93 |           {
 94 |             title: "描述",
 95 |             align: "center",
 96 |             minWidth: 120,
 97 |             key: "des",
 98 |           },
 99 |           {
100 |             title: "示例",
101 |             align: "center",
102 |             minWidth: 120,
103 |             key: "example",
104 |           },
105 |         ],
106 |         data1: [{
107 |             param: "id",
108 |             type: "String",
109 |             restrain: "必填",
110 |             des: "图片id",
111 |             example: "-",
112 |           },
113 |           {
114 |             param: "key",
115 |             type: "String",
116 |             restrain: "必填",
117 |             des: "用户API密钥",
118 |             example: "-",
119 |           },
120 |         ],
121 |         data2: [{
122 |             param: "code",
123 |             type: "String",
124 |             des: "状态码",
125 |             example: "200成功 400失败",
126 |           },
127 |           {
128 |             param: "msg",
129 |             type: "String",
130 |             des: "对应状态码的信息",
131 |             example: "例如：“删除成功”",
132 |           },
133 |           {
134 |             param: "data",
135 |             type: "String",
136 |             des: "图片信息",
137 |             example: "失败的原因或图片名称",
138 |           },
139 |         ],
140 |       };
141 |     },
142 |     components: {
143 |       JsonViewer,
144 |     },
145 |     computed: {
146 |       ...mapState(["userInfo"]),
147 |     },
148 |   };
149 | </script>
150 | <style lang="less" scoped>
151 |   .setting-account-account {
152 |     h2 {
153 |       font-size: 21px;
154 |     }
155 | 
156 |     .ivu-col {
157 |       h4 {
158 |         span {
159 |           margin-right: 8px;
160 |         }
161 |       }
162 | 
163 |       p {
164 |         margin-top: 8px;
165 |         color: #808695;
166 |       }
167 |     }
168 |   }
169 | 
170 |   .jv-container.jv-light {
171 |     outline: 1px solid #ccc;
172 |     margin-top: 10px;
173 |   }
174 | 
175 |   .string {
176 |     color: green;
177 |   }
178 | 
179 |   .number {
180 |     color: darkorange;
181 |   }
182 | 
183 |   .boolean {
184 |     color: blue;
185 |   }
186 | 
187 |   .null {
188 |     color: magenta;
189 |   }
190 | 
191 |   .key {
192 |     color: red;
193 |   }
194 | 
195 |   
196 | </style>


--------------------------------------------------------------------------------
/src/views/word/index.vue:
--------------------------------------------------------------------------------
 1 | <!-- 
 2 | // +----------------------------------------------------------------------
 3 | // | LightPicture [ 图床 ]
 4 | // +----------------------------------------------------------------------
 5 | // | 企业团队图片资源管理系统
 6 | // +----------------------------------------------------------------------
 7 | // | Github: https://github.com/osuuu/LightPicture
 8 | // +----------------------------------------------------------------------
 9 | // | Copyright © http://picture.h234.cn All rights reserved.
10 | // +----------------------------------------------------------------------
11 | // | Author: Team <admin@osuu.net>
12 | // +---------------------------------------------------------------------- 
13 | -->
14 | <template>
15 |   <div>
16 |     <div class="page-content">
17 |       <div class="container-fluid">
18 |         <Row :gutter="24">
19 |           <Col :xl="6" :lg="6" :md="0" :sm="0" :xs="0">
20 |           <Card shadow title="接口文档" icon="md-book" :padding="0">
21 |             <CellGroup @on-click="handleChangeCell" class="ivu-pt-8 ivu-pb-8">
22 |               <Cell v-for="(item,index) in menuList" :key="index" :title="item.title" :name="item.id"
23 |                 :label="item.label" :selected="currentType === item.id" />
24 | 
25 |             </CellGroup>
26 |           </Card>
27 |           </Col>
28 |           <Col :xl="18" :lg="18" :md="24" :sm="24" :xs="24">
29 |           <Card :bordered="false" dis-hover>
30 |             <Row>
31 |               <Col :xl="0" :lg="0" :md="24" :sm="24" :xs="24">
32 |               <Tabs :value="currentType" @on-click="handleChangeCell">
33 |                 <TabPane v-for="(item,index) in menuList" :key="index" :name="item.id" :label="item.title" />
34 | 
35 |               </Tabs>
36 |               </Col>
37 |             </Row>
38 |             <uploads v-if="currentType === 'uploads'" />
39 |             <deletes v-if="currentType === 'deletes'" />
40 |          
41 |           </Card>
42 |           </Col>
43 |         </Row>
44 |       </div>
45 |     </div>
46 |   </div>
47 | </template>
48 | 
49 | <script>
50 |   import uploads from "./upload";
51 |   import deletes from "./delete";
52 | 
53 |   export default {
54 |     components: {
55 |       uploads,
56 |       deletes,
57 |     
58 |     },
59 |     data() {
60 |       return {
61 |         currentType: "uploads",
62 |         menuList: [{
63 |           id: "uploads",
64 |           title: "上传图片",
65 |           label: "上传图片接口说明",
66 |         },{
67 |           id: "deletes",
68 |           title: "删除图片",
69 |           label: "删除图片接口说明",
70 |         }]
71 |       };
72 |     },
73 |     methods: {
74 |       handleChangeCell(name) {
75 |         this.currentType = name;
76 |       },
77 |     },
78 |   };
79 | </script>
80 | 
81 | <style lang="less" scoped>
82 |   @deep: ~">>>";
83 | 
84 |   @{deep}.ivu-cell-label {
85 |     color: #999;
86 |   }
87 |   /deep/.ivu-card-shadow {
88 |     border: 1px solid #ffffff;
89 |   }
90 | </style>


--------------------------------------------------------------------------------
/src/views/word/upload.vue:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 | // +----------------------------------------------------------------------
  3 | // | LightPicture [ 图床 ]
  4 | // +----------------------------------------------------------------------
  5 | // | 企业团队图片资源管理系统
  6 | // +----------------------------------------------------------------------
  7 | // | Github: https://github.com/osuuu/LightPicture
  8 | // +----------------------------------------------------------------------
  9 | // | Copyright © http://picture.h234.cn All rights reserved.
 10 | // +----------------------------------------------------------------------
 11 | // | Author: Team <admin@osuu.net>
 12 | // +---------------------------------------------------------------------- 
 13 | -->
 14 | <template>
 15 |   <div class="setting-account-account">
 16 |     <h2>上传图片</h2>
 17 | 
 18 |     <div class="ivu-mt ivu-pl ivu-pr">
 19 |       <Divider orientation="left">请求接口</Divider>
 20 |       <Alert type="success">{{userInfo.scheme}}://{{userInfo.url}}/api/upload</Alert>
 21 |       <Divider orientation="left">请求方式</Divider>
 22 |       <Alert>POST</Alert>
 23 |       <Divider orientation="left">JSON 请求示例</Divider>
 24 |       <Table :columns="columns1" :data="data1" border> </Table>
 25 |       <json-viewer :value="jsonData1" :copyable="{ copyText: '复制', copiedText: '复制成功' }" preview-mode></json-viewer>
 26 |       <Divider orientation="left">JSON 响应示例</Divider>
 27 |       <Table :columns="columns2" :data="data2" border> </Table>
 28 | 
 29 |       <json-viewer :value="jsonData2" :copyable="{ copyText: '复制', copiedText: '复制成功' }" preview-mode></json-viewer>
 30 |     </div>
 31 |   </div>
 32 | </template>
 33 | <script>
 34 |   import JsonViewer from "vue-json-viewer";
 35 |   import {
 36 |     mapState
 37 |   } from "vuex";
 38 |   export default {
 39 |     data() {
 40 |       return {
 41 |         jsonData1: {
 42 |           file: "(binary)",
 43 |           key: "0135b7d8cd98e4a8289be628ff35aab9",
 44 |         },
 45 |         jsonData2: {
 46 |           code: "200",
 47 |           msg: "成功",
 48 |           data: {
 49 |             create_time: "2022-01-08 23:23:39",
 50 |             id: "1083",
 51 |             ip: "192.168.1.3",
 52 |             md5: "123",
 53 |             mime: "image/gif",
 54 |             name: "202201082323395119.gif",
 55 |             path: "LightPicture/2022/01/202201082323395119.gif",
 56 |             size: 17887,
 57 |             storage_id: 1003,
 58 |             update_time: "2022-01-08 23:23:39",
 59 |             url: "https://geek-1252271632.cos.ap-chengdu.myqcloud.com/LightPicture/2022/01/202201082323395119.gif",
 60 |             user_id: 1
 61 |           }
 62 |         },
 63 |         columns1: [{
 64 |             title: "参数",
 65 |             align: "center",
 66 |             minWidth: 60,
 67 |             key: "param",
 68 |           },
 69 |           {
 70 |             title: "类型",
 71 |             align: "center",
 72 |             minWidth: 120,
 73 |             key: "type",
 74 |           },
 75 |           {
 76 |             title: "约束",
 77 |             align: "center",
 78 |             minWidth: 120,
 79 |             key: "restrain",
 80 |           },
 81 |           {
 82 |             title: "描述",
 83 |             align: "center",
 84 |             minWidth: 120,
 85 |             key: "des",
 86 |           },
 87 |           {
 88 |             title: "示例",
 89 |             align: "center",
 90 |             minWidth: 120,
 91 |             key: "example",
 92 |           },
 93 |         ],
 94 |         columns2: [{
 95 |             title: "参数",
 96 |             align: "center",
 97 |             minWidth: 80,
 98 |             key: "param",
 99 |           },
100 |           {
101 |             title: "类型",
102 |             align: "center",
103 |             minWidth: 120,
104 |             key: "type",
105 |           },
106 |           {
107 |             title: "描述",
108 |             align: "center",
109 |             minWidth: 120,
110 |             key: "des",
111 |           },
112 |           {
113 |             title: "示例",
114 |             align: "center",
115 |             minWidth: 120,
116 |             key: "example",
117 |           },
118 |         ],
119 |         data1: [{
120 |             param: "file",
121 |             type: "(binary)",
122 |             restrain: "必填",
123 |             des: "图片文件",
124 |             example: "-",
125 |           },
126 |           {
127 |             param: "key",
128 |             type: "String",
129 |             restrain: "必填",
130 |             des: "用户API密钥",
131 |             example: "-",
132 |           },
133 |         ],
134 |         data2: [{
135 |             param: "code",
136 |             type: "String",
137 |             des: "状态码",
138 |             example: "200成功 400失败",
139 |           },
140 |           {
141 |             param: "msg",
142 |             type: "String",
143 |             des: "对应状态码的信息",
144 |             example: "例如：“发送成功”",
145 |           },
146 |           {
147 |             param: "data",
148 |             type: "Array",
149 |             des: "图片信息",
150 |             example: "-",
151 |           },
152 |         ],
153 |       };
154 |     },
155 |     components: {
156 |       JsonViewer,
157 |     },
158 |     computed: {
159 |       ...mapState(["userInfo"]),
160 |     },
161 |   };
162 | </script>
163 | <style lang="less" scoped>
164 |   .setting-account-account {
165 |     h2 {
166 |       font-size: 21px;
167 |     }
168 | 
169 |     .ivu-col {
170 |       h4 {
171 |         span {
172 |           margin-right: 8px;
173 |         }
174 |       }
175 | 
176 |       p {
177 |         margin-top: 8px;
178 |         color: #808695;
179 |       }
180 |     }
181 |   }
182 | 
183 |   .jv-container.jv-light {
184 |     outline: 1px solid #ccc;
185 |     margin-top: 10px;
186 |   }
187 | 
188 |   .string {
189 |     color: green;
190 |   }
191 | 
192 |   .number {
193 |     color: darkorange;
194 |   }
195 | 
196 |   .boolean {
197 |     color: blue;
198 |   }
199 | 
200 |   .null {
201 |     color: magenta;
202 |   }
203 | 
204 |   .key {
205 |     color: red;
206 |   }
207 | 
208 |   
209 | </style>


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack')
2 | module.exports = {
3 |     publicPath: '/',
4 |     outputDir: 'dist',
5 |     assetsDir: 'static',
6 |   
7 | 
8 | 
9 | }


--------------------------------------------------------------------------------