修复主题动画掉帧问题
This commit is contained in:
zqlit committed
1 parent
72b1ebad11
commit
94471c4c89
4 files changed
+85
-9
No files matched your search
@@ -24,17 +24,17 @@ ai_comment: >-
|
||||
---
|
||||
|
||||
|
||||
{{< grid cols="3" >}}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{{< /grid >}}
|
||||
|
||||
{{< grid cols="3" >}}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{{< /grid >}}
|
||||
|
||||
|
||||
|
||||
@@ -2990,8 +2990,6 @@ input[type=submit] {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: 700px auto;
|
||||
}
|
||||
|
||||
.post-content .sen-image-frame,
|
||||
@@ -3006,6 +3004,8 @@ input[type=submit] {
|
||||
transform: translateY(14px);
|
||||
transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
|
||||
transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: auto 400px;
|
||||
}
|
||||
|
||||
.post-content .sen-image-frame.is-visible,
|
||||
@@ -3046,15 +3046,16 @@ input[type=submit] {
|
||||
text-overflow: ellipsis;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
transform: translateY(4px) translateZ(0);
|
||||
transition: opacity 0.4s 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
|
||||
transform 0.4s 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.post-content .sen-image-frame.is-visible[data-title]::after,
|
||||
.entry-content .sen-image-frame.is-visible[data-title]::after {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transform: translateY(0) translateZ(0);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .post-content .sen-image-frame[data-title]::after,
|
||||
@@ -3688,6 +3689,53 @@ input[type=submit] {
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Image Grid ── */
|
||||
.img-grid {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
margin: 0.6rem 0;
|
||||
}
|
||||
|
||||
.img-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
|
||||
.img-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
|
||||
.img-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
|
||||
|
||||
/* Penetrate Markdown <p> wrappers so images become grid items */
|
||||
.img-grid > p {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.img-grid .sen-image-frame {
|
||||
margin: 0;
|
||||
aspect-ratio: 1 / 1;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.img-grid .sen-image-frame > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Suppress title overlay inside grids */
|
||||
.img-grid .sen-image-frame[data-title]::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Mobile: reduce to 2 columns */
|
||||
@media screen and (max-width: 480px) {
|
||||
.img-grid.cols-3,
|
||||
.img-grid.cols-4 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.floating-tools a {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
{{ $cols := .Get "cols" | default "3" }}
|
||||
<div class="img-grid cols-{{ $cols }}">
|
||||
{{ .Inner | $.Page.RenderString (dict "display" "block") }}
|
||||
</div>
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { RefObject } from "react";
|
||||
import { Heading2, Heading3, Code, Quote, Image, Link, Minus, Bold, FileCode } from "lucide-react";
|
||||
import { Heading2, Heading3, Code, Quote, Image, Link, Minus, Bold, FileCode, Grid3X3 } from "lucide-react";
|
||||
|
||||
interface ShortcutPanelProps {
|
||||
textareaRef: RefObject<HTMLTextAreaElement | null>;
|
||||
@@ -28,6 +28,29 @@ export default function ShortcutPanel({ textareaRef, value, onChange }: Shortcut
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const insertBlock = (template: string) => {
|
||||
const el = textareaRef.current;
|
||||
if (!el) {
|
||||
onChange(value + template);
|
||||
return;
|
||||
}
|
||||
const start = el.selectionStart;
|
||||
const newVal = value.slice(0, start) + template + value.slice(start);
|
||||
onChange(newVal);
|
||||
setTimeout(() => {
|
||||
el.selectionStart = start + template.length;
|
||||
el.selectionEnd = start + template.length;
|
||||
el.focus();
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const gridTemplate = `{{< grid cols="3" >}}
|
||||
![描述]()
|
||||
![描述]()
|
||||
![描述]()
|
||||
{{< /grid >}}
|
||||
`;
|
||||
|
||||
const shortcuts = [
|
||||
{ label: "H2", icon: Heading2, action: () => insert("## ", "\n", "二级标题") },
|
||||
{ label: "H3", icon: Heading3, action: () => insert("### ", "\n", "三级标题") },
|
||||
@@ -36,6 +59,7 @@ export default function ShortcutPanel({ textareaRef, value, onChange }: Shortcut
|
||||
{ label: "行内代码", icon: Code, action: () => insert("`", "`", "code") },
|
||||
{ label: "引用", icon: Quote, action: () => insert("> ", "\n", "引用内容") },
|
||||
{ label: "图片", icon: Image, action: () => insert("![", "]()", "描述") },
|
||||
{ label: "图片网格", icon: Grid3X3, action: () => insertBlock(gridTemplate) },
|
||||
{ label: "链接", icon: Link, action: () => insert("[", "]()", "链接文本") },
|
||||
{ label: "分割线", icon: Minus, action: () => insert("\n---\n", "", "") },
|
||||
];
|
||||
|
||||
Reference in new issue
Block a user