背景切换更优雅

README.md

@@ -109,13 +109,28 @@
 
 #### 3.1.3后台管理
 
-1. 默认关闭，开启方式如下：
+后台管理默认关闭，需按照如下方式开启：
+
+1. **绑定KV数据库**：
+
    - 创建一个新的KV数据库
+
+     > ![](https://alist.sanyue.site/d/imgbed/202408261035367.png)
+     >
+     > ![](https://alist.sanyue.site/d/imgbed/202408261037971.png)
+
    - 进入项目对应`设置`->`函数`->`KV 命名空间绑定`->`编辑绑定`->`变量名称`，填写`img_url`，KV命名空间选择刚才创建好的KV数据库
-   - 设置好后，访问`http(s)://你的域名/admin`即可进入后台管理页面
-2. 管理员认证，默认关闭，开启方式如下：
+
+2. **配置管理员认证**：
+
    - 项目对应`设置`->`环境变量`->`为生产环境定义变量`->`编辑变量` ，添加`BASIC_USER`作为管理员用户名，`BASIC_PASS`作为管理员登录密码
 
+3. **重新部署项目**：
+
+   - 进入项目对应`部署`->`所有部署`，选择最新的一个，点击后面更多按钮（`···`），选择`重试部署`
+
+   - 部署完成后，访问`http(s)://你的域名/admin`即可进入后台管理页面
+
 #### 3.1.4图片审查
 
 支持成人内容审查和自动屏蔽，开启步骤如下：
@@ -218,8 +233,14 @@ API格式：
 
 #### 3.1.10注意
 
+**修改环境变量方式**：
+
+![](https://alist.sanyue.site/d/imgbed/202408261040233.png)
+
 **修改环境变量后需要重新部署才能生效！**
 
+![](https://alist.sanyue.site/d/imgbed/202408261041507.png)
+
 ### 3.2定制化修改
 
 按照`3.1`步骤部署完成后，前往仓库[MarSeventh/Sanyue-ImgHub](https://github.com/MarSeventh/Sanyue-ImgHub?tab=readme-ov-file)，按照操作说明进行DIY和打包操作，最后将打包好的`/dist`目录中的内容替换到该仓库的根目录下即可（复制+替换）。

css/220.24ec265e.css

@@ -0,0 +1 @@
+.login[data-v-4b708caf]{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-4b708caf]{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-4b708caf]:hover{box-shadow:0 0 12px 4px rgba(0,0,0,.24);transform:translateY(-5px)}.password-input[data-v-4b708caf]{margin-bottom:15px;width:30vw}.submit[data-v-4b708caf]{margin-top:10px}.background-image1[data-v-4b708caf],.background-image2[data-v-4b708caf]{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:0;transition:all 1s ease-in-out}

css/860.518cdd8d.css

@@ -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-7ae3a220]{position:fixed;bottom:8vh;right:1.5vw;display:flex;flex-direction:column;align-items:center;z-index:100}.toolbar-button[data-v-7ae3a220]{border:none;transition:all .3s ease;margin-bottom:10px;margin-left:0}.toolbar-button[data-v-7ae3a220]:hover{box-shadow:0 0 10px 0 rgba(0,0,0,.1);transform:translateY(-3px)}[data-v-7ae3a220] .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-7ae3a220]{display:flex;justify-content:center;margin-top:20px}.header[data-v-7ae3a220]{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-7ae3a220]{background:linear-gradient(90deg,#effac3,#f3a060);-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none}.logo[data-v-7ae3a220]{height:80px;width:80px;margin-right:5px}.upload-home[data-v-7ae3a220]{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-7ae3a220]{position:fixed;top:20vh}.background-image1[data-v-7ae3a220],.background-image2[data-v-7ae3a220]{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:0;transition:all 1s ease-in-out}

index.html

@@ -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.626af7f9.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.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>

js/220.356adac2.js

@@ -0,0 +1,2 @@
+"use strict";(self["webpackChunksanyue_imghub"]=self["webpackChunksanyue_imghub"]||[]).push([[220],{8220:function(s,e,t){t.r(e),t.d(e,{default:function(){return k}});var a=t(6768),i=t(5130);const n=s=>((0,a.Qi)("data-v-4b708caf"),s=s(),(0,a.jt)(),s),l={class:"login"},o=n((()=>(0,a.Lk)("img",{id:"bg1",class:"background-image1",alt:"Background Image"},null,-1))),r=n((()=>(0,a.Lk)("img",{id:"bg2",class:"background-image2",alt:"Background Image"},null,-1))),g={class:"login-container"},u=n((()=>(0,a.Lk)("h1",null,"Login",-1)));function d(s,e,t,n,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,i.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"),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-4b708caf"]]);var k=I}}]);
+//# sourceMappingURL=220.356adac2.js.map