From f8271161cb166508356334c5495339486c9f02d5 Mon Sep 17 00:00:00 2001 From: nyne Date: Thu, 15 May 2025 19:53:30 +0800 Subject: [PATCH] Improve publish page. --- frontend/src/i18n.ts | 49 +++++++++++++++++++---------- frontend/src/index.css | 12 +++---- frontend/src/pages/publish_page.tsx | 37 +++++++++++----------- 3 files changed, 57 insertions(+), 41 deletions(-) diff --git a/frontend/src/i18n.ts b/frontend/src/i18n.ts index df0b3b6..99a19c4 100644 --- a/frontend/src/i18n.ts +++ b/frontend/src/i18n.ts @@ -19,7 +19,7 @@ export const i18nData = { "Don't have an account? Register": "Don't have an account? Register", "Already have an account? Login": "Already have an account? Login", "Publish Resource": "Publish Resource", - "All information, images, and files can be modified after publishing": "All information, images, and files can be modified after publishing", + "All information can be modified after publishing": "All information can be modified after publishing", "Title": "Title", "Alternative Titles": "Alternative Titles", "Add Alternative Title": "Add Alternative Title", @@ -41,14 +41,14 @@ export const i18nData = { "Enter a search keyword to continue": "Enter a search keyword to continue", "My Info": "My Info", "Server": "Server", - + // Management page translations "Manage": "Manage", "Storage": "Storage", "Users": "Users", "You are not logged in. Please log in to access this page.": "You are not logged in. Please log in to access this page.", "You are not authorized to access this page.": "You are not authorized to access this page.", - + // Storage management "No storage found. Please create a new storage.": "No storage found. Please create a new storage.", "Name": "Name", @@ -72,7 +72,7 @@ export const i18nData = { "Storage created successfully": "Storage created successfully", "Close": "Close", "Submit": "Submit", - + // User management "Admin": "Admin", "Can Upload": "Can Upload", @@ -109,28 +109,28 @@ export const i18nData = { "Upload a file to server, then the file will be moved to the selected storage.": "Upload a file to server, then the file will be moved to the selected storage.", "Select Storage": "Select Storage", "Resource Details": "Resource Details", - "Delete Resource": "Delete Resource", + "Delete Resource": "Delete Resource", "Are you sure you want to delete the resource": "Are you sure you want to delete the resource", "Delete File": "Delete File", "Are you sure you want to delete the file": "Are you sure you want to delete the file", // New translations "Change Avatar": "Change Avatar", - "Change Username": "Change Username", + "Change Username": "Change Username", "Change Password": "Change Password", "New Username": "New Username", "Enter new username": "Enter new username", "Save": "Save", "Current Password": "Current Password", "Enter current password": "Enter current password", - "New Password": "New Password", + "New Password": "New Password", "Enter new password": "Enter new password", "Confirm New Password": "Confirm New Password", "Confirm new password": "Confirm new password", "Avatar changed successfully": "Avatar changed successfully", "Username changed successfully": "Username changed successfully", "Password changed successfully": "Password changed successfully", - + // Manage server config page translations "Update server config successfully": "Update server config successfully", "Max uploading size (MB)": "Max uploading size (MB)", @@ -138,10 +138,15 @@ export const i18nData = { "Max downloads per day for single IP": "Max downloads per day for single IP", "Allow register": "Allow register", "Server name": "Server name", - "Server description": "Server description", + "Server description": "Server description", "Cloudflare Turnstile Site Key": "Cloudflare Turnstile Site Key", "Cloudflare Turnstile Secret Key": "Cloudflare Turnstile Secret Key", "If the cloudflare turnstile keys are not empty, the turnstile will be used for register and download.": "If the cloudflare turnstile keys are not empty, the turnstile will be used for register and download.", + "The first image will be used as the cover image": "The first image will be used as the cover image", + "Please enter a search keyword": "Please enter a search keyword", + "Searching...": "Searching...", + "Create Tag": "Create Tag", + "Search Tags": "Search Tags", } }, "zh-CN": { @@ -164,7 +169,7 @@ export const i18nData = { "Don't have an account? Register": "没有账号？注册", "Already have an account? Login": "已有账号？登录", "Publish Resource": "发布资源", - "All information, images, and files can be modified after publishing": "所有的信息, 图片, 文件均可在发布后修改", + "All information can be modified after publishing": "所有的信息均可在发布后修改", "Title": "标题", "Alternative Titles": "其他标题", "Add Alternative Title": "新增标题", @@ -267,15 +272,15 @@ export const i18nData = { "Enter new username": "输入新用户名", "Save": "保存", "Current Password": "当前密码", - "Enter current password": "输入当前密码", + "Enter current password": "输入当前密码", "New Password": "新密码", "Enter new password": "输入新密码", "Confirm New Password": "确认新密码", "Confirm new password": "确认新密码", "Avatar changed successfully": "头像更改成功", - "Username changed successfully": "用户名更改成功", + "Username changed successfully": "用户名更改成功", "Password changed successfully": "密码更改成功", - + // Manage server config page translations "Update server config successfully": "成功更新服务器配置", "Max uploading size (MB)": "最大上传大小 (MB)", @@ -287,6 +292,11 @@ export const i18nData = { "Cloudflare Turnstile Site Key": "Cloudflare Turnstile 站点密钥", "Cloudflare Turnstile Secret Key": "Cloudflare Turnstile 密钥", "If the cloudflare turnstile keys are not empty, the turnstile will be used for register and download.": "如果设置了 Cloudflare Turnstile 密钥，将在注册和下载时启用验证", + "The first image will be used as the cover image": "第一张图片将用作封面图片", + "Please enter a search keyword": "请输入搜索关键词", + "Searching...": "搜索中...", + "Create Tag": "创建标签", + "Search Tags": "搜索标签", } }, "zh-TW": { @@ -309,7 +319,7 @@ export const i18nData = { "Don't have an account? Register": "沒有賬號？註冊", "Already have an account? Login": "已有賬號？登入", "Publish Resource": "發布資源", - "All information, images, and files can be modified after publishing": "所有資訊、圖片、檔案均可於發布後修改", + "All information can be modified after publishing": "所有資訊均可於發布後修改", "Title": "標題", "Alternative Titles": "其他標題", "Add Alternative Title": "新增標題", @@ -401,7 +411,7 @@ export const i18nData = { "Resource Details": "資源詳情", "Delete Resource": "刪除資源", "Are you sure you want to delete the resource": "您確定要刪除此資源嗎", - "Delete File": "刪除檔案", + "Delete File": "刪除檔案", "Are you sure you want to delete the file": "您確定要刪除此檔案嗎", // New translations @@ -414,13 +424,13 @@ export const i18nData = { "Current Password": "當前密碼", "Enter current password": "輸入當前密碼", "New Password": "新密碼", - "Enter new password": "輸入新密碼", + "Enter new password": "輸入新密碼", "Confirm New Password": "確認新密碼", "Confirm new password": "確認新密碼", "Avatar changed successfully": "頭像更改成功", "Username changed successfully": "用戶名更改成功", "Password changed successfully": "密碼更改成功", - + // Manage server config page translations "Update server config successfully": "成功更新伺服器配置", "Max uploading size (MB)": "最大上傳大小 (MB)", @@ -432,6 +442,11 @@ export const i18nData = { "Cloudflare Turnstile Site Key": "Cloudflare Turnstile 網站密鑰", "Cloudflare Turnstile Secret Key": "Cloudflare Turnstile 密鑰", "If the cloudflare turnstile keys are not empty, the turnstile will be used for register and download.": "如果設置了 Cloudflare Turnstile 密鑰，將在註冊和下載時啟用驗證", + "The first image will be used as the cover image": "第一張圖片將用作封面圖片", + "Please enter a search keyword": "請輸入搜尋關鍵字", + "Searching...": "搜尋中...", + "Create Tag": "創建標籤", + "Search Tags": "搜尋標籤", } } } diff --git a/frontend/src/index.css b/frontend/src/index.css index fd30959..04707cf 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -7,18 +7,18 @@ prefersdark: false; color-scheme: "light"; --color-base-100: oklch(99% 0.014 343.198); - --color-base-200: oklch(96% 0.028 342.258); + --color-base-200: oklch(97% 0.028 342.258); --color-base-300: oklch(84% 0.061 343.231); --color-base-content: oklch(0% 0 0); --color-primary: oklch(65% 0.241 354.308); --color-primary-content: oklch(100% 0 0); --color-secondary: oklch(62% 0.265 303.9); --color-secondary-content: oklch(97% 0.014 308.299); - --color-accent: oklch(78% 0.115 274.713); - --color-accent-content: oklch(39% 0.09 240.876); + --color-accent: oklch(0.759 0.124 274.458); + --color-accent-content: oklch(20% 0.09 240.876); --color-neutral: oklch(40% 0.153 2.432); --color-neutral-content: oklch(89% 0.061 343.231); - --color-info: oklch(80% 0.105 251.813); + --color-info: oklch(75% 0.105 251.813); --color-info-content: oklch(44% 0.11 240.79); --color-success: oklch(70% 0.14 182.503); --color-success-content: oklch(43% 0.095 166.913); @@ -27,7 +27,7 @@ --color-error: oklch(63% 0.237 25.331); --color-error-content: oklch(97% 0.013 17.38); --radius-selector: 1rem; - --radius-field: 1rem; + --radius-field: 1.5rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; @@ -62,7 +62,7 @@ --color-error: oklch(68.22% 0.206 24.43); --color-error-content: oklch(13.644% 0.041 24.43); --radius-selector: 1rem; - --radius-field: 1rem; + --radius-field: 1.5rem; --radius-box: 1rem; --size-selector: 0.25rem; --size-field: 0.25rem; diff --git a/frontend/src/pages/publish_page.tsx b/frontend/src/pages/publish_page.tsx index 030f590..807e104 100644 --- a/frontend/src/pages/publish_page.tsx +++ b/frontend/src/pages/publish_page.tsx @@ -1,5 +1,5 @@ import { useEffect, useRef, useState } from "react"; -import { MdAdd, MdDelete, MdOutlineInfo } from "react-icons/md"; +import {MdAdd, MdClose, MdDelete, MdOutlineInfo, MdSearch} from "react-icons/md"; import { Tag } from "../network/models.ts"; import { network } from "../network/network.ts"; import { LuInfo } from "react-icons/lu"; @@ -24,7 +24,7 @@ export default function PublishPage() { useEffect(() => { document.title = t("Publish Resource"); - }, []) + }, [t]) const handleSubmit = async () => { if (isSubmitting) { @@ -102,7 +102,7 @@ export default function PublishPage() {

{t("Publish Resource")}

- {t("All information, images, and files can be modified after publishing")} + {t("All information can be modified after publishing")}

{t("Title")}

setTitle(e.target.value)} /> @@ -137,7 +137,16 @@ export default function PublishPage() {

{ tags.map((tag, index) => { - return {tag.name} + return + {tag.name} + { + const newTags = [...tags] + newTags.splice(index, 1) + setTags(newTags) + }}> + + + }) }

@@ -155,7 +164,10 @@ export default function PublishPage() {

{t("Images")}

- {t("Images will not be displayed automatically, you need to reference them in the description")} +
+

{t("Images will not be displayed automatically, you need to reference them in the description")}

+

{t("The first image will be used as the cover image")}

+
@@ -273,7 +285,7 @@ function TagInput({ onAdd }: { onAdd: (tag: Tag) => void }) { input.blur() } - let dropdownContent = <> + let dropdownContent if (error) { dropdownContent =
void }) { return