diff --git a/README-EN.md b/README-EN.md index f485cc706..74f32c5a0 100644 --- a/README-EN.md +++ b/README-EN.md @@ -4,6 +4,24 @@ Free Image Hosting solution, Flickr/imgur alternative. Using Cloudflare Pages an English|[中文](readme-zh.md) +Use tg channel/chat for storage + +How to use? + +First, you need to create a new telegram bot to obtain the token and a telegram channel to obtain Chat_ID +## How to Obtain `Bot_Token` and `Chat_ID` for Telegram + +If you don't have a Telegram account yet, please create one first. Then, follow these steps to get the `Bot_Token` and `Chat_ID`: + +1. **Get the `Bot_Token`** + - In Telegram, send the command `/newbot` to [@BotFather](https://t.me/BotFather), and follow the prompts to input your bot's name and username. Once successfully created, you will receive a `Bot_Token`, which is used to interact with the Telegram API. + +2. **Set the bot as a channel administrator** + - Create a new channel and, after entering the channel, go to channel settings. Add the bot you just created as a channel administrator, so it can send messages. + +3. **Get the `Chat_ID`** + - Use [@GetTheirIDBot](https://t.me/GetTheirIDBot) to get your channel ID. Send a message to this bot and follow the instructions to receive your `Chat_ID` (the ID of your channel). + ## Deployment ### Preparation diff --git a/README.md b/README.md index 9c540cd59..98fca1e97 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,38 @@ [English](README-EN.md)|中文 +> [!IMPORTANT] +> +> 由于原有的Telegraph API接口被官方关闭，需要将上传渠道切换至Telegram Channel，请按照文档中的部署要求设置`TG_Bot_Token`和`TG_Chat_ID`，否则将无法正常使用上传功能。 + +## 如何获取Telegram的`Bot_Token`和`Chat_ID` + +如果您还没有Telegram账户，请先创建一个。接着，按照以下步骤操作以获取`BOT_TOKEN`和`CHAT_ID`： + +1. **获取`Bot_Token`** + - 在Telegram中，向[@BotFather](https://t.me/BotFather)发送命令`/newbot`，根据提示依次输入您的机器人名称和用户名。成功创建机器人后，您将会收到一个`BOT_TOKEN`，用于与Telegram API进行交互。 + +![202409071744569](https://github.com/user-attachments/assets/04f01289-205c-43e0-ba03-d9ab3465e349) + +2. **设置机器人为频道管理员** + - 创建一个新的频道（Channel），进入该频道后，选择频道设置。将刚刚创建的机器人添加为频道管理员，这样机器人才能发送消息。 + +![202409071758534](https://github.com/user-attachments/assets/cedea4c7-8b31-42e0-98a1-8a72ff69528f) + +![202409071758796](https://github.com/user-attachments/assets/16393802-17eb-4ae4-a758-f0fdb7aaebc4) + + +3. **获取`Chat_ID`** + - 通过[@VersaToolsBot](https://t.me/VersaToolsBot)获取您的频道ID。向该机器人发送消息，按照指示操作，最后您将得到`CHAT_ID`（即频道的ID）。 + - 或者通过[@GetTheirIDBot](https://t.me/GetTheirIDBot)获取您的频道ID。向该机器人发送消息，按照指示操作，最后您将得到`CHAT_ID`（即频道的ID）。 + + ![202409071751619](https://github.com/user-attachments/assets/59fe8b20-c969-4d13-8d46-e58c0e8b9e79) + +最后去Cloudflare Pages后台设置相关的环境变量（注：修改环境变量后，需要重新部署才能生效） +| 环境变量 | 示例值 | 说明 | +|-----------------|---------------------------|----------------------------------------------------------------------------------------| +| `TG_Bot_Token` | `123468:AAxxxGKrn5` | 从[@BotFather](https://t.me/BotFather)获取的Telegram Bot Token。 | +| `TG_Chat_ID` | `-1234567` | 频道的ID，确保TG Bot是该频道或群组的管理员。 | ## 如何部署 diff --git a/admin-imgtc.html b/admin-imgtc.html index 9aefb5811..3665e3ece 100644 --- a/admin-imgtc.html +++ b/admin-imgtc.html @@ -1,5 +1,6 @@ + @@ -45,7 +46,8 @@ } .title:hover { - color: #B39DDB; /* 使用柔和的淡紫色 */ + color: #B39DDB; + /* 使用柔和的淡紫色 */ } .search-card { @@ -74,13 +76,16 @@ } .stats:hover { - background-color: #f0eaf8; /* 使用柔和的淡紫色 */ + background-color: #f0eaf8; + /* 使用柔和的淡紫色 */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); - color: #B39DDB; /* 使用柔和的淡紫色 */ + color: #B39DDB; + /* 使用柔和的淡紫色 */ } .stats:hover .fa-database { - color: #B39DDB; /* 使用柔和的淡紫色 */ + color: #B39DDB; + /* 使用柔和的淡紫色 */ } .header-content .actions { @@ -97,7 +102,8 @@ } .header-content .actions i:hover { - color: #B39DDB; /* 使用柔和的淡紫色 */ + color: #B39DDB; + /* 使用柔和的淡紫色 */ transform: scale(1.2); } @@ -106,7 +112,8 @@ } .header-content .actions .el-dropdown-link i:hover { - color: #B39DDB; /* 使用柔和的淡紫色 */ + color: #B39DDB; + /* 使用柔和的淡紫色 */ } .header-content .actions .disabled { @@ -115,7 +122,8 @@ } .header-content .actions .enabled { - color: #B39DDB; /* 使用柔和的淡紫色 */ + color: #B39DDB; + /* 使用柔和的淡紫色 */ } .search-card .el-input__inner { @@ -229,6 +237,7 @@ } +
@@ -248,8 +257,10 @@ - 按时间倒序 - 按名称升序 + 按时间倒序 + 按名称升序 @@ -257,7 +268,8 @@ - + @@ -270,10 +282,7 @@
- +
@@ -428,7 +432,15 @@ mounted() { fetch("./api/manage/check", { method: 'GET', credentials: 'include' }) .then(response => response.text()) - .then(result => result === "true" ? this.showLogoutButton = true : window.location.href = "./api/manage/login") + .then(result => { + if (result == "true") { + this.showLogoutButton = true; + } else if (result == "Not using basic auth.") { + // Do nothing + } else { + window.location.href = "./api/manage/login"; + } + }) .catch(() => this.$message.error('同步数据时出错，请检查网络连接')); fetch("./api/manage/list", { method: 'GET', credentials: 'include' }) @@ -447,4 +459,5 @@ }); + \ No newline at end of file diff --git a/admin.html b/admin.html index 10719b682..943e84e04 100644 --- a/admin.html +++ b/admin.html @@ -1,64 +1,61 @@ + - + +
- -
Dashboard - - - - 网格视图 - - - 瀑布流 - - 退出登录
- - - - - 记录总数量: - {{ Number }} - - - - -