feat(phone-image): 增加翻页预览与无封面图排版样式

- 为手机截图生成器添加翻页功能,支持在生成前预览各页内容
- 增加无封面图时的排版样式,使用装饰线条和居中布局
- 改进图片处理逻辑,清除内联样式并展平嵌套包装元素
- 修复 models.dev 同步接口,支持 GET 请求获取缓存数据
- 优化网络请求,添加直连失败后的本地代理重试机制
This commit is contained in:
augushong
2026-05-01 16:31:26 +08:00
parent eab8cee8a8
commit 34fe255829
11 changed files with 334 additions and 27 deletions

View File

@@ -116,6 +116,80 @@
margin-top: var(--pi-spacing-sm);
}
/* --- 封面页 - 无封面图装饰排版 --- */
.page-cover.no-cover-image {
justify-content: center;
padding: var(--pi-spacing-lg);
}
.page-cover.no-cover-image .cover-decor-line {
position: absolute;
left: 30px;
right: 30px;
height: 2px;
background: var(--pi-color-border);
}
.page-cover.no-cover-image .cover-decor-top {
top: 80px;
}
.page-cover.no-cover-image .cover-decor-bottom {
bottom: 80px;
}
.page-cover.no-cover-image .cover-no-img-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--pi-spacing) 0;
}
.page-cover.no-cover-image .cover-no-img-title {
font-size: 36px;
font-weight: bold;
line-height: 1.4;
color: var(--pi-color-text);
word-break: break-word;
margin-bottom: var(--pi-spacing);
padding: 0 20px;
}
.page-cover.no-cover-image .cover-decor-divider {
width: 60px;
height: 3px;
background: var(--pi-color-accent);
margin-bottom: var(--pi-spacing);
}
.page-cover.no-cover-image .cover-no-img-desc {
font-size: var(--pi-font-size-subtitle);
color: var(--pi-color-text-light);
line-height: 1.8;
margin-bottom: var(--pi-spacing);
padding: 0 30px;
word-break: break-word;
}
.page-cover.no-cover-image .cover-no-img-meta {
display: flex;
gap: 15px;
font-size: var(--pi-font-size-small);
color: var(--pi-color-text-lighter);
flex-wrap: wrap;
justify-content: center;
}
/* --- 内容页图片强制约束 --- */
.page-content img {
max-width: 100% !important;
height: auto !important;
display: block;
margin: 10px 0;
}
/* --- 内容页 --- */
.page-body {
display: flex;
@@ -170,6 +244,28 @@
margin-bottom: var(--pi-spacing-sm);
}
.page-content h4 {
font-size: var(--pi-font-size-base);
font-weight: bold;
margin-top: var(--pi-spacing-sm);
margin-bottom: 5px;
}
.page-content h5 {
font-size: 13px;
font-weight: bold;
margin-top: var(--pi-spacing-sm);
margin-bottom: 5px;
}
.page-content h6 {
font-size: 12px;
font-weight: bold;
margin-top: var(--pi-spacing-sm);
margin-bottom: 5px;
color: var(--pi-color-text-light);
}
.page-content blockquote {
border-left: 3px solid var(--pi-color-accent);
padding-left: var(--pi-spacing-sm);