支持页面背景自定义

README.md

@@ -6,7 +6,7 @@
 
 ## 1.Introduction
 
-[cf-pages/Telegraph-Image](https://github.com/cf-pages/Telegraph-Image)项目的重制版，实现了**登录鉴权**、**上传图片预览**、**一键切换上传方式**（**拖拽上传**、**粘贴上传**）、**多文件上传**、**整体复制**、**多格式复制**等功能。
+[cf-pages/Telegraph-Image](https://github.com/cf-pages/Telegraph-Image)项目的重制版，实现了**登录鉴权**、**页面自定义**、**上传图片预览**、**一键切换上传方式**（**拖拽上传**、**粘贴上传**）、**多文件上传**、**整体复制**、**多格式复制**等功能。
 
 ![](https://alist.sanyue.site/d/imgbed/202408191757569.png)
 
@@ -37,6 +37,9 @@
 - **支持身份认证、防滥用**
   - 支持Web和API**上传认证**（感谢[hl128k](https://github.com/hl128k)）
   - 支持访问域名限制（感谢[hl128k](https://github.com/hl128k)）
+- **支持页面自定义**
+  - 页面背景支持**单图**、**自定义多图轮播**、**bing随机图轮播**等多种模式
+
 - **一些小功能**
   - 支持**随机图**API，从图床中随机返回一张图片
 
@@ -160,11 +163,35 @@ API格式：
 
 环境变量增加`ALLOWED_DOMAINS`，多个允许的域名用英文`,`分割，如：`域名.xyz,域名.cloudns.be,域名.pp.ua`
 
-#### 3.1.7远端遥测
+#### 3.1.7页面自定义（DIY接口）
+
+环境变量增加`USER_CONFIG`，JSON格式，具体字段用途及内容规范见下表。
+
+| 字段名      | 用途               | 类型        | 内容规范                                                     |
+| ----------- | ------------------ | ----------- | ------------------------------------------------------------ |
+| loginBkImg  | 自定义登录页面背景 | 列表/字符串 | 1、当字段类型为`列表`时，列表中元素为需要添加到轮播列表中的图片链接，形如`["1.jpg","2.jpg"]`<br />2、当字段类型为`字符串`时，目前仅支持字符串值为`bing`，设置为该值时启用bing随机图片轮播模式。 |
+| uploadBkImg | 自定义上传页面背景 | 列表/字符串 | 同上                                                         |
+
+> 整体示例：
+>
+> ```json
+> 轮播模式：
+> {
+> "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"]
+> }
+> bing随机图模式：
+> {
+> "uploadBkImg": "bing",
+> "loginBkImg": "bing"
+> }
+> ```
+
+#### 3.1.8远端遥测
 
 便于开发者进行bug的捕捉和定位，但是**过程中可能收集到访问链接、域名等信息**，如您不愿意泄露类似信息给项目开发者，可在环境变量中添加`disable_telemetry`为`true`来退出遥测。
 
-#### 3.1.8随机图API
+#### 3.1.9随机图API
 
 | 接口名称     | /random                                                      |
 | ------------ | ------------------------------------------------------------ |
@@ -189,7 +216,7 @@ API格式：
 > }
 > ```
 
-#### 3.1.9注意
+#### 3.1.10注意
 
 **修改环境变量后需要重新部署才能生效！**
 
@@ -205,6 +232,7 @@ API格式：
 2. ~~增加markdown、html等格式链接复制功能（2024.7.21已完成）~~
 3. ~~上传页面增加管理端入口（2024.7.21已完成）~~
 4. 增加用户个性化配置接口
+   - ~~登录页面和上传页面背景图自定义（2024.8.25已完成）~~
 5. ~~增加随机图API（2024.7.25已完成）~~
 6. ~~完善多格式链接展示形式，增加ubb格式链接支持（2024.8.21已完成）~~
 7. ~~完善登录逻辑，后端增加认证码校验接口（2024.8.21已完成）~~

css/391.1cd737a4.css

@@ -0,0 +1 @@
+.login[data-v-54d5a4c0]{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-54d5a4c0]{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-54d5a4c0]:hover{box-shadow:0 0 12px 4px rgba(0,0,0,.24);transform:translateY(-5px)}.password-input[data-v-54d5a4c0]{margin-bottom:15px;width:30vw}.submit[data-v-54d5a4c0]{margin-top:10px}

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

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.eef14227.js"></script><script defer="defer" src="/js/app.75ecb3aa.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.80df4b27.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/391.d5b751e3.js

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