ZSCGR/KVideo
1
0
Fork 0
mirror of https://github.com/KuekHaoYang/KVideo.git synced 2026-08-16 17:23:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: Improve UI responsiveness by adding flex-wrap to various components and update package version.

Browse Source
This commit is contained in:
kuekhaoyang
2026-02-19 22:11:26 +08:00
parent d59b5af38c
commit d92fc9d986
9 changed files with 38 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/settings/AccountSettings.tsx
+11 -13
View File
@@ -51,7 +51,7 @@ export function AccountSettings() {
fetch('/api/auth')
.then(res => res.json())
.then(data => setHasAuth(data.hasAuth))
.catch(() => {});
.catch(() => { });
// Fetch account list for admins
fetch('/api/auth/accounts')
@@ -60,7 +60,7 @@ export function AccountSettings() {
if (data.accounts) setAccounts(data.accounts);
if (data.hasAdminPassword) setHasAdminPassword(data.hasAdminPassword);
})
.catch(() => {});
.catch(() => { });
}, []);
const handleLogout = () => {
@@ -173,7 +173,7 @@ export function AccountSettings() {
</div>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 flex-wrap">
<button
onClick={handleLogout}
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-[var(--radius-full)] text-[var(--text-color-secondary)] hover:text-red-500 hover:border-red-500/30 transition-all duration-200 cursor-pointer"
@@ -206,12 +206,11 @@ export function AccountSettings() {
</div>
<span className="text-sm text-[var(--text-color)]">{account.name}</span>
</div>
<div className="flex items-center gap-2">
<span className={`text-xs px-2 py-0.5 rounded-[var(--radius-full)] ${
account.role === 'super_admin' || account.role === 'admin'
<div className="flex items-center gap-2 flex-wrap">
<span className={`text-xs px-2 py-0.5 rounded-[var(--radius-full)] ${account.role === 'super_admin' || account.role === 'admin'
? 'bg-[var(--accent-color)]/10 text-[var(--accent-color)]'
: 'bg-[var(--glass-bg)] text-[var(--text-color-secondary)] border border-[var(--glass-border)]'
}`}>
}`}>
{account.role === 'super_admin' ? '超级管理员' : account.role === 'admin' ? '管理员' : '观众'}
</span>
<button
@@ -233,7 +232,7 @@ export function AccountSettings() {
<p className="text-xs text-amber-400">
已标记移除 {removedAccounts.size} 个账户。请使用下方配置生成器生成新的 <code className="px-1 py-0.5 bg-black/20 rounded text-[10px]">ACCOUNTS</code> 环境变量值并更新部署配置。
</p>
<div className="flex gap-2 mt-2">
<div className="flex gap-2 mt-2 flex-wrap">
<button
onClick={loadExistingAccounts}
className="text-xs px-3 py-1 bg-amber-500/20 hover:bg-amber-500/30 text-amber-400 rounded-[var(--radius-2xl)] transition-colors cursor-pointer"
@@ -293,15 +292,14 @@ export function AccountSettings() {
{configEntries.map((entry, index) => (
<div key={index} className="flex gap-2 items-start">
<div className="flex-1 space-y-2">
<div className="flex gap-2">
<div className="flex gap-2 flex-wrap">
<input
type="text"
placeholder="密码"
value={entry.password}
onChange={(e) => updateConfigEntry(index, 'password', e.target.value)}
className={`flex-1 px-3 py-1.5 bg-[var(--glass-bg)] border rounded-[var(--radius-2xl)] text-sm text-[var(--text-color)] placeholder:text-[var(--text-color-secondary)]/50 focus:outline-none focus:border-[var(--accent-color)] ${
!entry.password && entry.name ? 'border-amber-500/50' : 'border-[var(--glass-border)]'
}`}
className={`flex-1 px-3 py-1.5 bg-[var(--glass-bg)] border rounded-[var(--radius-2xl)] text-sm text-[var(--text-color)] placeholder:text-[var(--text-color-secondary)]/50 focus:outline-none focus:border-[var(--accent-color)] ${!entry.password && entry.name ? 'border-amber-500/50' : 'border-[var(--glass-border)]'
}`}
/>
<input
type="text"
@@ -368,7 +366,7 @@ export function AccountSettings() {
<label className="text-xs font-medium text-[var(--text-color)]">
生成的 ACCOUNTS 值：
</label>
<div className="flex gap-2">
<div className="flex gap-2 flex-wrap">
<code className="flex-1 px-3 py-2 bg-black/20 border border-[var(--glass-border)] rounded-[var(--radius-2xl)] text-xs text-[var(--text-color)] break-all select-all">
{generateAccountsString()}
</code>
components/settings/ExportModal.tsx
+15 -19
View File
@@ -30,19 +30,17 @@ export function ExportModal({ isOpen, onClose, onExport }: ExportModalProps) {
<>
{/* Backdrop */}
<div
className={`fixed inset-0 z-[9998] bg-black/30 backdrop-blur-md transition-opacity duration-300 ${
isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}
className={`fixed inset-0 z-[9998] bg-black/30 backdrop-blur-md transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}
onClick={onClose}
/>
{/* Modal */}
<div
className={`fixed top-1/2 left-1/2 z-[9999] w-[90%] max-w-md -translate-x-1/2 transition-all duration-300 ${
isOpen
? 'opacity-100 -translate-y-1/2 scale-100'
className={`fixed top-1/2 left-1/2 z-[9999] w-[90%] max-w-md -translate-x-1/2 transition-all duration-300 ${isOpen
? 'opacity-100 -translate-y-1/2 scale-100'
: 'opacity-0 -translate-y-[40%] scale-95 pointer-events-none'
}`}
}`}
>
<div className="bg-[var(--glass-bg)] backdrop-blur-xl border border-[var(--glass-border)] rounded-[var(--radius-2xl)] shadow-[var(--shadow-md)] p-6">
<div className="flex items-center justify-between mb-6">
@@ -55,7 +53,7 @@ export function ExportModal({ isOpen, onClose, onExport }: ExportModalProps) {
aria-label="关闭"
>
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M18 6L6 18M6 6l12 12"/>
<path d="M18 6L6 18M6 6l12 12" />
</svg>
</button>
</div>
@@ -73,14 +71,13 @@ export function ExportModal({ isOpen, onClose, onExport }: ExportModalProps) {
onChange={(e) => setIncludeSearchHistory(e.target.checked)}
className="hidden"
/>
<div className={`w-6 h-6 rounded-[0.6rem] border-2 flex items-center justify-center transition-all duration-200 ${
includeSearchHistory
? 'bg-[var(--accent-color)] border-[var(--accent-color)]'
<div className={`w-6 h-6 rounded-[0.6rem] border-2 flex items-center justify-center transition-all duration-200 ${includeSearchHistory
? 'bg-[var(--accent-color)] border-[var(--accent-color)]'
: 'border-[var(--text-color-secondary)]'
}`}>
}`}>
{includeSearchHistory && (
<svg className="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
<path d="M20 6L9 17l-5-5"/>
<path d="M20 6L9 17l-5-5" />
</svg>
)}
</div>
@@ -95,14 +92,13 @@ export function ExportModal({ isOpen, onClose, onExport }: ExportModalProps) {
onChange={(e) => setIncludeWatchHistory(e.target.checked)}
className="hidden"
/>
<div className={`w-6 h-6 rounded-[0.6rem] border-2 flex items-center justify-center transition-all duration-200 ${
includeWatchHistory
? 'bg-[var(--accent-color)] border-[var(--accent-color)]'
<div className={`w-6 h-6 rounded-[0.6rem] border-2 flex items-center justify-center transition-all duration-200 ${includeWatchHistory
? 'bg-[var(--accent-color)] border-[var(--accent-color)]'
: 'border-[var(--text-color-secondary)]'
}`}>
}`}>
{includeWatchHistory && (
<svg className="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
<path d="M20 6L9 17l-5-5"/>
<path d="M20 6L9 17l-5-5" />
</svg>
)}
</div>
@@ -114,7 +110,7 @@ export function ExportModal({ isOpen, onClose, onExport }: ExportModalProps) {
</div>
</div>
<div className="flex gap-3">
<div className="flex gap-3 flex-wrap">
<button
onClick={onClose}
className="flex-1 px-6 py-3 rounded-[var(--radius-2xl)] bg-[var(--glass-bg)] border border-[var(--glass-border)] text-[var(--text-color)] font-semibold hover:bg-[color-mix(in_srgb,var(--text-color)_10%,transparent)] transition-all duration-200"
components/settings/PremiumSourceSettings.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ export function PremiumSourceSettings({
<div className="bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-[var(--radius-2xl)] shadow-[var(--shadow-sm)] p-6 mb-6">
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-semibold text-[var(--text-color)]">高级源管理</h2>
<div className="flex gap-2">
<div className="flex gap-2 flex-wrap">
<button
onClick={onRestoreDefaults}
className="px-4 py-2 rounded-[var(--radius-2xl)] bg-[var(--glass-bg)] border border-[var(--glass-border)] text-[var(--text-color)] text-sm font-medium hover:bg-[color-mix(in_srgb,var(--accent-color)_10%,transparent)] transition-all duration-200 cursor-pointer"
components/settings/UserSourceSettings.tsx
+5 -7
View File
@@ -53,7 +53,7 @@ export function UserSourceSettings() {
<div className="space-y-4">
{/* Add form */}
<form onSubmit={handleAdd} className="space-y-3">
<div className="flex gap-2">
<div className="flex gap-2 flex-wrap">
<input
type="text"
placeholder="源名称"
@@ -92,13 +92,11 @@ export function UserSourceSettings() {
<div className="flex items-center gap-3 min-w-0">
<button
onClick={() => userSourcesStore.toggleSource(source.id)}
className={`w-8 h-5 rounded-full transition-colors cursor-pointer relative flex-shrink-0 ${
source.enabled !== false ? 'bg-[var(--accent-color)]' : 'bg-[var(--glass-border)]'
}`}
className={`w-8 h-5 rounded-full transition-colors cursor-pointer relative flex-shrink-0 ${source.enabled !== false ? 'bg-[var(--accent-color)]' : 'bg-[var(--glass-border)]'
}`}
>
<span className={`absolute top-0.5 w-4 h-4 bg-white rounded-full transition-transform shadow-sm ${
source.enabled !== false ? 'left-3.5' : 'left-0.5'
}`} />
<span className={`absolute top-0.5 w-4 h-4 bg-white rounded-full transition-transform shadow-sm ${source.enabled !== false ? 'left-3.5' : 'left-0.5'
}`} />
</button>
<div className="min-w-0">
<p className="text-sm font-medium text-[var(--text-color)] truncate">{source.name}</p>
components/settings/import/JsonImportTab.tsx
+1 -1
View File
@@ -116,7 +116,7 @@ export function JsonImportTab() {
))}
</div>
</div>
<div className="flex gap-2">
<div className="flex gap-2 flex-wrap">
<button
onClick={() => { setPreview(null); }}
className="flex-1 px-4 py-2 bg-[var(--glass-bg)] border border-[var(--glass-border)] text-[var(--text-color)] rounded-[var(--radius-2xl)] text-sm hover:bg-[var(--glass-hover)] transition-all cursor-pointer"
components/settings/import/LinkImportTab.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ export function LinkImportTab({ onImport }: LinkImportTabProps) {
<label className="block text-sm font-medium text-[var(--text-color)] mb-2">
源配置链接
</label>
<div className="flex gap-2">
<div className="flex gap-2 flex-wrap">
<input
type="url"
value={url}
components/settings/import/SubscriptionImportTab.tsx
+1 -1
View File
@@ -79,7 +79,7 @@ export function SubscriptionImportTab({
onKeyDown={handleAddKeydown}
className="w-full bg-[color-mix(in_srgb,var(--bg-color)_50%,transparent)] border border-[var(--glass-border)] rounded-[var(--radius-2xl)] px-4 py-2 text-[var(--text-color)] placeholder:text-[var(--text-color-secondary)] focus:outline-none focus:border-[var(--accent-color)]"
/>
<div className="flex gap-2">
<div className="flex gap-2 flex-wrap">
<input
type="url"
value={url}
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "kvideo",
"version": "4.4.6",
"version": "4.4.7",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "kvideo",
"version": "4.4.6",
"version": "4.4.7",
"dependencies": {
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "kvideo",
"version": "4.4.6",
"version": "4.4.7",
"private": true,
"scripts": {
"dev": "next dev",