cool/termi-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify homepage panels and subscription actions
Some checks failed
docker-images / resolve-build-targets (push) Successful in 5s
Details
ui-regression / playwright-regression (push) Failing after 11m59s
Details
docker-images / build-and-push (admin) (push) Successful in 3s
Details
docker-images / build-and-push (backend) (push) Successful in 3s
Details
docker-images / build-and-push (frontend) (push) Successful in 58s
Details
docker-images / submit-indexnow (push) Successful in 18s
Details

Browse Source
This commit is contained in:
limitcool
2026-04-04 00:05:38 +08:00
parent ad44dde886
commit 320595ee1c
5 changed files with 1005 additions and 786 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
frontend/src/components/SubscriptionPopup.astro
View File

@@ -155,13 +155,31 @@ const webPushAvailable = Boolean(webPushPublicKey);
<i class="fas fa-envelope-open-text"></i>
</span>
<span class="subscription-popup-channel-toggle-copy">
<span class="subscription-popup-channel-toggle-meta" aria-hidden="true">
<span class="subscription-popup-channel-toggle-tag">可选</span>
<span class="subscription-popup-channel-toggle-tag subscription-popup-channel-toggle-tag--email">
Email
</span>
</span>
<span class="subscription-popup-channel-toggle-title" data-subscription-popup-channel-toggle-label>
开启邮件订阅
添加邮件订阅
</span>
<span class="subscription-popup-channel-toggle-description">
需要时再补一个邮箱备份
<span
class="subscription-popup-channel-toggle-description"
data-subscription-popup-channel-toggle-description
>
填写邮箱后，更新也会发到你的收件箱
</span>
</span>
<span class="subscription-popup-channel-toggle-affordance" aria-hidden="true">
<span
class="subscription-popup-channel-toggle-affordance-text"
data-subscription-popup-channel-toggle-affordance
>
去填写
</span>
<i class="fas fa-chevron-right"></i>
</span>
</button>
</div>
</div>
@@ -376,6 +394,12 @@ const webPushAvailable = Boolean(webPushPublicKey);
const emailToggleLabel = emailToggleButton?.querySelector(
'[data-subscription-popup-channel-toggle-label]',
) as HTMLElement | null;
const emailToggleDescription = emailToggleButton?.querySelector(
'[data-subscription-popup-channel-toggle-description]',
) as HTMLElement | null;
const emailToggleAffordance = emailToggleButton?.querySelector(
'[data-subscription-popup-channel-toggle-affordance]',
) as HTMLElement | null;
const browserCard = root.querySelector(
'[data-subscription-popup-channel-card="browser"]',
) as HTMLElement | null;
@@ -572,7 +596,17 @@ const webPushAvailable = Boolean(webPushPublicKey);
emailInput.required = emailSelected;
if (emailToggleLabel instanceof HTMLElement) {
emailToggleLabel.textContent = emailSelected ? '收起邮件订阅' : '开启邮件订阅';
emailToggleLabel.textContent = emailSelected ? '收起邮件订阅' : '添加邮件订阅';
}
if (emailToggleDescription instanceof HTMLElement) {
emailToggleDescription.textContent = emailSelected
? '邮箱表单已经展开，填好后提交即可作为额外备份'
: '填写邮箱后，更新也会发到你的收件箱';
}
if (emailToggleAffordance instanceof HTMLElement) {
emailToggleAffordance.textContent = emailSelected ? '收起' : '去填写';
}
setToggleState(emailToggleButton, emailSelected, !browserRequired);
@@ -1210,6 +1244,43 @@ const webPushAvailable = Boolean(webPushPublicKey);
display: grid;
gap: 0.18rem;
min-width: 0;
flex: 1;
}
.subscription-popup-channel-toggle-meta {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-bottom: 0.1rem;
}
.subscription-popup-channel-toggle-tag {
display: inline-flex;
align-items: center;
border-radius: 999px;
border: 1px solid color-mix(in oklab, var(--border-color) 88%, transparent);
background: color-mix(in oklab, var(--header-bg) 84%, transparent);
color: var(--text-tertiary);
padding: 0.15rem 0.45rem;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.subscription-popup-channel-toggle-tag--email {
color: color-mix(in oklab, var(--secondary, var(--primary)) 62%, var(--title-color));
border-color: color-mix(
in oklab,
var(--secondary, var(--primary)) 22%,
var(--border-color)
);
background: color-mix(
in oklab,
var(--secondary, var(--primary)) 11%,
var(--terminal-bg)
);
}
.subscription-popup-channel-toggle-title {
@@ -1227,6 +1298,27 @@ const webPushAvailable = Boolean(webPushPublicKey);
line-height: 1.55;
}
.subscription-popup-channel-toggle-affordance {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-left: auto;
align-self: center;
color: color-mix(in oklab, var(--secondary, var(--primary)) 58%, var(--title-color));
font-size: 0.78rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
transition:
color 0.2s ease,
transform 0.2s ease;
}
.subscription-popup-channel-toggle-affordance i {
font-size: 0.72rem;
transition: transform 0.2s ease;
}
.subscription-popup-channel-toggle:hover {
transform: translateY(-1px);
border-color: color-mix(in oklab, var(--primary) 22%, var(--border-color));
@@ -1234,6 +1326,10 @@ const webPushAvailable = Boolean(webPushPublicKey);
box-shadow: 0 14px 28px rgba(var(--text-rgb), 0.08);
}
.subscription-popup-channel-toggle:hover .subscription-popup-channel-toggle-affordance {
transform: translateX(1px);
}
.subscription-popup-channel-toggle.is-active {
border-color: color-mix(in oklab, var(--primary) 28%, var(--border-color));
background:
@@ -1252,6 +1348,10 @@ const webPushAvailable = Boolean(webPushPublicKey);
background: color-mix(in oklab, var(--primary) 16%, var(--terminal-bg));
}
.subscription-popup-channel-toggle.is-active .subscription-popup-channel-toggle-affordance i {
transform: rotate(90deg);
}
.subscription-popup-channel-toggle--primary {
border-color: color-mix(in oklab, var(--primary) 48%, var(--border-color));
background: