完善图片轮播;支持自定义图床名称和logo

This commit is contained in:
MarSeventh
2024-08-26 16:02:13 +08:00
parent 71e6ba5e6c
commit 079207d9f8
10 changed files with 20 additions and 3 deletions

View File

@@ -39,7 +39,8 @@
- 支持访问域名限制(感谢[hl128k](https://github.com/hl128k)
- **支持页面自定义**
- 页面背景支持**单图**、**自定义多图轮播**、**bing随机图轮播**等多种模式
- 自定义图床名称和Logo
- **一些小功能**
- 支持**随机图**API从图床中随机返回一张图片
@@ -186,6 +187,8 @@ API格式
| ----------- | ------------------ | ----------- | ------------------------------------------------------------ |
| loginBkImg | 自定义登录页面背景 | 列表/字符串 | 1、当字段类型为`列表`时,列表中元素为需要添加到轮播列表中的图片链接(列表中只有一张图时即为固定背景),形如`["1.jpg","2.jpg"]`<br />2、当字段类型为`字符串`时,目前**仅支持**字符串值为`bing`设置为该值时启用bing随机图片轮播模式。 |
| uploadBkImg | 自定义上传页面背景 | 列表/字符串 | 同上 |
| ownerName | 图床名称 | 字符串 | 只支持`字符串`类型,设置为你自定义的图床名称(默认为`Sanyue` |
| logoUrl | 图床logo | 字符串 | 只支持`字符串`类型设置为你自定义的图床logo |
> 整体示例:
>
@@ -193,7 +196,9 @@ API格式
> 轮播模式:
> {
> "uploadBkImg": ["https://imgbed.sanyue.site/file/6910f0b5e65ed462c1362.jpg","https://imgbed.sanyue.site/file/a73c97a1e8149114dc750.jpg"],
> "loginBkImg":["https://imgbed.sanyue.site/file/ef803977f35a4ef4c03c2.jpg","https://imgbed.sanyue.site/file/0dbd5add3605a0b2e8994.jpg"]
> "loginBkImg":["https://imgbed.sanyue.site/file/ef803977f35a4ef4c03c2.jpg","https://imgbed.sanyue.site/file/0dbd5add3605a0b2e8994.jpg"],
> "ownerName": "Sanyue",
> "logoUrl": "https://demo-cloudflare-imgbed.pages.dev/random?type=img"
> }
> bing随机图模式
> {
@@ -254,6 +259,7 @@ API格式
3. ~~上传页面增加管理端入口2024.7.21已完成)~~
4. 增加用户个性化配置接口
- ~~登录页面和上传页面背景图自定义2024.8.25已完成)~~
- ~~图床名称和Logo自定义2024.8.26已完成)~~
5. ~~增加随机图API2024.7.25已完成)~~
6. ~~完善多格式链接展示形式增加ubb格式链接支持2024.8.21已完成)~~
7. ~~完善登录逻辑后端增加认证码校验接口2024.8.21已完成)~~

1
css/775.20902857.css Normal file
View File

@@ -0,0 +1 @@
.login[data-v-2e18a5aa]{display:flex;justify-content:center;align-items:center;height:100vh;transition:background-image 1s ease-in-out;background-size:cover;background-attachment:fixed}.login-container[data-v-2e18a5aa]{display:flex;flex-direction:column;justify-content:space-around;align-items:center;height:40vh;width:40vw;border-radius:12px;box-shadow:0 0 12px rgba(0,0,0,.12);background-color:hsla(0,0%,100%,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .3s ease}.login-container[data-v-2e18a5aa]:hover{box-shadow:0 0 12px 4px rgba(0,0,0,.24);transform:translateY(-5px)}.password-input[data-v-2e18a5aa]{margin-bottom:15px;width:30vw}.submit[data-v-2e18a5aa]{margin-top:10px}.background-image1[data-v-2e18a5aa],.background-image2[data-v-2e18a5aa]{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:0;transition:all 1s ease-in-out}

1
css/977.c880d587.css Normal file
View File

@@ -0,0 +1 @@
@keyframes breathe-3d98df6c{50%{box-shadow:0 0 10px 5px #409eff;opacity:.8}}.upload-form[data-v-3d98df6c],.upload-list-card[data-v-3d98df6c]{display:flex;flex-direction:column;justify-content:center;align-items:center}.upload-list-card[data-v-3d98df6c]{width:55vw;height:7vh;margin-top:10px;border-radius:15px;opacity:.8;background-color:hsla(0,0%,100%,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.upload-list-container[data-v-3d98df6c]{width:55vw;height:7vh}.upload-list-card.upload-list-busy[data-v-3d98df6c],.upload-list-container.upload-list-busy[data-v-3d98df6c]{height:35vh}.upload-list-item[data-v-3d98df6c]{display:flex;align-items:center;justify-content:space-between;margin:5px;border:1px solid #a5bef7;padding:5px;border-radius:15px}.upload-list-item-name[data-v-3d98df6c]{font-size:small;font-weight:700;width:28vw;margin-bottom:5px}.upload-list-item-content[data-v-3d98df6c]{display:flex;flex-direction:column;margin-left:10px}.upload-list-item-url-text[data-v-3d98df6c]{width:28vw}.upload-list-item-url-row[data-v-3d98df6c]{display:flex;flex-direction:row;align-items:center}.upload-list-item-progress[data-v-3d98df6c]{margin-top:3px;width:28vw}.upload-list-item-action[data-v-3d98df6c]{display:flex;flex-direction:column;align-items:center}.upload-list-item-action-button[data-v-3d98df6c]{margin:2px}.upload-card[data-v-3d98df6c]{width:55vw;padding:20px;background:none}.upload-card-busy[data-v-3d98df6c] .el-upload-dragger{height:25vh}.paste-mode[data-v-3d98df6c] .el-upload{pointer-events:none}[data-v-3d98df6c] .el-upload-dragger{display:flex;flex-direction:column;justify-content:center;align-items:center;height:45vh;border-radius:15px;border:3px dashed #409eff;opacity:.7;background-color:hsla(0,0%,100%,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}[data-v-3d98df6c] .el-upload-dragger.is-dragover,[data-v-3d98df6c] .el-upload-dragger:hover{opacity:.8;box-shadow:0 0 10px 5px #409eff}.is-uploading[data-v-3d98df6c] .el-upload-dragger{animation:breathe-3d98df6c 3s infinite}.el-upload__text[data-v-3d98df6c]{font-weight:700;font-size:medium;-webkit-user-select:none;-moz-user-select:none;user-select:none}.el-upload__tip[data-v-3d98df6c]{font-size:small;color:#faebd7;-webkit-user-select:none;-moz-user-select:none;user-select:none}.upload-list-dashboard[data-v-3d98df6c]{display:flex;justify-content:space-between;align-items:center;padding:10px}.upload-list-dashboard-title[data-v-3d98df6c]{font-size:medium;font-weight:700}.page-footer[data-v-7c801e22]{position:fixed;bottom:0;display:flex;justify-content:center;align-items:center;width:100vw;color:#f0f8ff;font-size:large;-webkit-user-select:none;-moz-user-select:none;user-select:none}.footer-name[data-v-7c801e22]{color:#faebd7;font-weight:700;text-decoration:none}.toolbar[data-v-98b4a4f4]{position:fixed;bottom:8vh;right:1.5vw;display:flex;flex-direction:column;align-items:center;z-index:100}.toolbar-button[data-v-98b4a4f4]{border:none;transition:all .3s ease;margin-bottom:10px;margin-left:0}.toolbar-button[data-v-98b4a4f4]:hover{box-shadow:0 0 10px 0 rgba(0,0,0,.1);transform:translateY(-3px)}[data-v-98b4a4f4] .el-dialog{border-radius:12px;background-color:hsla(0,0%,100%,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 10px 2px rgba(0,0,0,.1)}.dialog-action[data-v-98b4a4f4]{display:flex;justify-content:center;margin-top:20px}.header[data-v-98b4a4f4]{display:flex;justify-content:center;align-items:center;padding:15px;position:fixed;top:5vh;color:#ffebcd;-webkit-user-select:none;-moz-user-select:none;user-select:none;text-decoration:none}.main-title[data-v-98b4a4f4]{background:linear-gradient(90deg,#effac3,#f3a060);-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none}.logo[data-v-98b4a4f4]{height:80px;width:80px;margin-right:5px}.upload-home[data-v-98b4a4f4]{display:flex;flex-direction:column;justify-content:center;align-items:center;transition:background-image 1s ease-in-out;background-size:cover;background-attachment:fixed;height:100vh}.upload[data-v-98b4a4f4]{position:fixed;top:20vh}.background-image1[data-v-98b4a4f4],.background-image2[data-v-98b4a4f4]{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:0;transition:all 1s ease-in-out}

View File

@@ -1 +1 @@
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/logo.png"><title>Sanyue ImgHub</title><script defer="defer" src="/js/chunk-vendors.a7c79942.js"></script><script defer="defer" src="/js/app.0f4d900e.js"></script><link href="/css/chunk-vendors.b85f6a1a.css" rel="stylesheet"><link href="/css/app.93429def.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but sanyue_imghub doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/logo.png"><title>Sanyue ImgHub</title><script defer="defer" src="/js/chunk-vendors.a7c79942.js"></script><script defer="defer" src="/js/app.963eb1be.js"></script><link href="/css/chunk-vendors.b85f6a1a.css" rel="stylesheet"><link href="/css/app.93429def.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but sanyue_imghub doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>

2
js/775.70382038.js Normal file
View File

@@ -0,0 +1,2 @@
"use strict";(self["webpackChunksanyue_imghub"]=self["webpackChunksanyue_imghub"]||[]).push([[775],{3775:function(s,e,t){t.r(e),t.d(e,{default:function(){return k}});var a=t(6768),n=t(5130);const i=s=>((0,a.Qi)("data-v-2e18a5aa"),s=s(),(0,a.jt)(),s),l={class:"login"},o=i((()=>(0,a.Lk)("img",{id:"bg1",class:"background-image1",alt:"Background Image"},null,-1))),r=i((()=>(0,a.Lk)("img",{id:"bg2",class:"background-image2",alt:"Background Image"},null,-1))),g={class:"login-container"},u=i((()=>(0,a.Lk)("h1",null,"Login",-1)));function d(s,e,t,i,d,c){const p=(0,a.g2)("el-input"),h=(0,a.g2)("el-button");return(0,a.uX)(),(0,a.CE)("div",l,[o,r,(0,a.Lk)("div",g,[u,(0,a.bF)(p,{class:"password-input",modelValue:d.password,"onUpdate:modelValue":e[0]||(e[0]=s=>d.password=s),placeholder:"输入认证码,若未设置留空即可~",type:"password","show-password":"",onKeyup:(0,n.jR)(c.login,["enter","native"])},null,8,["modelValue","onKeyup"]),(0,a.bF)(h,{class:"submit",type:"primary",onClick:c.login},{default:(0,a.k6)((()=>[(0,a.eW)("submit")])),_:1},8,["onClick"])])])}t(4114);var c=t(4570),p=t.n(c),h=t(4373),m=t(782),y={data(){return{password:"",writtenPass:"",bingWallPaperIndex:0,customWallPaperIndex:0}},computed:{...(0,m.L8)(["userConfig","bingWallPapers"])},mounted(){const s=document.getElementById("bg1"),e=document.getElementById("bg2");"bing"===this.userConfig?.loginBkImg?this.$store.dispatch("fetchBingWallPapers").then((()=>{s.src=this.bingWallPapers[this.bingWallPaperIndex]?.url,s.onload=()=>{s.style.opacity=1},setInterval((()=>{let t=0!=s.style.opacity?s:e,a=0!=s.style.opacity?e:s;t.style.opacity=0,this.bingWallPaperIndex=(this.bingWallPaperIndex+1)%this.bingWallPapers.length,a.src=this.bingWallPapers[this.bingWallPaperIndex]?.url,a.onload=()=>{a.style.opacity=1}}),3e3)})):this.userConfig?.loginBkImg instanceof Array&&this.userConfig?.loginBkImg?.length>1?(s.src=this.userConfig.loginBkImg[this.customWallPaperIndex],s.onload=()=>{s.style.opacity=1},setInterval((()=>{let t=0!=s.style.opacity?s:e,a=0!=s.style.opacity?e:s;t.style.opacity=0,this.customWallPaperIndex=(this.customWallPaperIndex+1)%this.userConfig.loginBkImg.length,a.src=this.userConfig.loginBkImg[this.customWallPaperIndex],a.onload=()=>{a.style.opacity=1}}),3e3)):this.userConfig?.loginBkImg instanceof Array&&1==this.userConfig?.loginBkImg?.length?(s.src=this.userConfig.loginBkImg[0],s.onload=()=>{s.style.opacity=1}):(s.src="https://imgbed.sanyue.site/file/0dbd5add3605a0b2e8994.jpg",s.onload=()=>{s.style.opacity=1})},methods:{login(){""===this.password?this.writtenPass="unset":this.writtenPass=this.password,h.A.post("/login",{authCode:this.password}).then((s=>{200===s.status?(p().set("authCode",this.writtenPass,"14d"),this.$router.push("/"),this.$message.success("登录成功~")):this.$message.error("登录失败,请检查认证码是否正确~")})).catch((s=>{this.$message.error("登录失败,请检查认证码是否正确~")}))}}},b=t(1241);const I=(0,b.A)(y,[["render",d],["__scopeId","data-v-2e18a5aa"]]);var k=I}}]);
//# sourceMappingURL=775.70382038.js.map

1
js/775.70382038.js.map Normal file

File diff suppressed because one or more lines are too long

2
js/977.0726041e.js Normal file

File diff suppressed because one or more lines are too long

1
js/977.0726041e.js.map Normal file

File diff suppressed because one or more lines are too long

2
js/app.963eb1be.js Normal file

File diff suppressed because one or more lines are too long

1
js/app.963eb1be.js.map Normal file

File diff suppressed because one or more lines are too long