tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(appearance): 本地保存站点 Logo 并支持登录视频自动播放 (#435)

Browse Source
This commit is contained in:
Ray
2026-09-07 22:28:32 +08:00
committed by GitHub
parent 6a7605ec33
commit bdfccf51d1
13 changed files with 328 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/pages/admin/settings/appearance-settings-page.tsx
View File

@@ -31,6 +31,7 @@ export default function AppearanceSettingsPage() {
const [brandSlug, setBrandSlug] = useState("");
const [authHeroTitle, setAuthHeroTitle] = useState("");
const [authHeroDescription, setAuthHeroDescription] = useState("");
const [authVideoAutoplay, setAuthVideoAutoplay] = useState(true);
const [logoFrameEnabled, setLogoFrameEnabled] = useState(true);
const [skinId, setSkinId] = useState("classic");
const [skinThemes, setSkinThemes] = useState<SkinDefinition[]>([DEFAULT_CLASSIC_SKIN]);
@@ -61,6 +62,7 @@ export default function AppearanceSettingsPage() {
brandSlug.trim().toLocaleLowerCase() !== setting?.brandSlug ||
normalizeDraftCopy(authHeroTitle) !== setting?.authHeroTitle ||
normalizeDraftCopy(authHeroDescription) !== setting?.authHeroDescription ||
authVideoAutoplay !== setting?.authVideoAutoplay ||
logoFrameEnabled !== setting?.logoFrameEnabled ||
skinId !== setting?.skinId ||
JSON.stringify(skinThemes) !== JSON.stringify(setting?.skinThemes) ||
@@ -80,6 +82,7 @@ export default function AppearanceSettingsPage() {
setBrandSlug(value.brandSlug);
setAuthHeroTitle(value.authHeroTitle);
setAuthHeroDescription(value.authHeroDescription);
setAuthVideoAutoplay(value.authVideoAutoplay);
setLogoFrameEnabled(value.logoFrameEnabled);
const themes = value.skinThemes.map((theme) => normalizeSkinDefinition(theme));
setSkinThemes(themes.length ? themes : [cloneSkinDefinition(DEFAULT_CLASSIC_SKIN)]);
@@ -189,6 +192,7 @@ export default function AppearanceSettingsPage() {
setBrandSlug(setting.brandSlug);
setAuthHeroTitle(setting.authHeroTitle);
setAuthHeroDescription(setting.authHeroDescription);
setAuthVideoAutoplay(setting.authVideoAutoplay);
setLogoFrameEnabled(setting.logoFrameEnabled);
setSkinId(setting.skinId);
setSkinThemes(setting.skinThemes.map((theme) => cloneSkinDefinition(theme)));
@@ -324,6 +328,7 @@ export default function AppearanceSettingsPage() {
logoFrameEnabled,
authVideoResourceId: ids.video,
authVideoPosterResourceId: ids.poster,
authVideoAutoplay,
skinId,
skinThemes,
seoTitle: nextSeoTitle,
@@ -547,6 +552,16 @@ export default function AppearanceSettingsPage() {
</Form.Item>
</Form>
<div className="admin-appearance-media-list">
<div className="admin-appearance-video-autoplay-option">
<span className="admin-appearance-video-autoplay-copy">
<strong>登录页视频自动播放</strong>
<small>默认开启并静音循环播放；访客启用“减少动态效果”时仍尊重其系统偏好。</small>
</span>
<span className="admin-appearance-video-autoplay-control">
<span>{authVideoAutoplay ? "已开启" : "已关闭"}</span>
<Switch checked={authVideoAutoplay} disabled={saving || refreshing || restoring} aria-label="登录页视频自动播放" onChange={setAuthVideoAutoplay} />
</span>
</div>
<AssetPicker
slot="video"
title="品牌视频"
@@ -580,7 +595,7 @@ export default function AppearanceSettingsPage() {
<AdminStatusBadge label={dirty ? "未保存" : "线上版本"} tone={dirty ? "warning" : "success"} />
</div>
<div className="admin-appearance-preview-stage">
<video key={previews.video} src={previews.video} poster={previews.poster || undefined} muted loop playsInline autoPlay preload="metadata" />
<video key={`${previews.video}-${authVideoAutoplay}`} src={previews.video} poster={previews.poster || undefined} muted loop playsInline autoPlay={authVideoAutoplay} preload="metadata" />
<span className="admin-appearance-preview-shade" />
<span className="admin-appearance-preview-brand">
<img src={previews.logoDark} alt="" />