feat(templates): 支持点击模板卡片直接唤起预览弹窗
This commit is contained in:
tianma-if committed
1 parent
caa49c6399
commit
a815301182
1 file changed
+47
-12
@@ -306,7 +306,18 @@ export const TemplatesPane = ({
|
||||
{savedTemplates.map((template) => (
|
||||
<div
|
||||
key={template.id}
|
||||
className="group relative flex flex-col justify-between rounded-xl border border-slate-200 bg-white p-4 transition-all duration-200 hover:border-emerald-300 hover:shadow-md"
|
||||
className="group relative flex flex-col justify-between rounded-xl border border-slate-200 bg-white p-4 transition-all duration-200 hover:border-emerald-300 hover:shadow-md cursor-pointer"
|
||||
onClick={() =>
|
||||
setPreviewTemplate({
|
||||
title: template.name,
|
||||
description: template.description,
|
||||
noteTitle: template.title,
|
||||
tags: template.tags,
|
||||
contentMarkdown: template.contentMarkdown,
|
||||
badge: t("templates.badgeCustom"),
|
||||
onUse: () => onUseSavedTemplate(template),
|
||||
})
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<div className="mb-2 flex items-start justify-between gap-2">
|
||||
@@ -344,7 +355,10 @@ export const TemplatesPane = ({
|
||||
className="p-1 hover:text-slate-700 transition rounded-md hover:bg-slate-100"
|
||||
title={t("templates.edit")}
|
||||
disabled={isCreating}
|
||||
onClick={() => startEditing(template)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
startEditing(template);
|
||||
}}
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
@@ -353,7 +367,10 @@ export const TemplatesPane = ({
|
||||
className="p-1 hover:text-rose-600 transition rounded-md hover:bg-rose-50"
|
||||
title={t("templates.delete")}
|
||||
disabled={isCreating}
|
||||
onClick={() => setDeleteConfirmTemplate(template)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDeleteConfirmTemplate(template);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
@@ -361,7 +378,8 @@ export const TemplatesPane = ({
|
||||
type="button"
|
||||
className="p-1 hover:text-slate-700 transition rounded-md hover:bg-slate-100"
|
||||
title={t("templates.previewTemplate")}
|
||||
onClick={() =>
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setPreviewTemplate({
|
||||
title: template.name,
|
||||
description: template.description,
|
||||
@@ -370,8 +388,8 @@ export const TemplatesPane = ({
|
||||
contentMarkdown: template.contentMarkdown,
|
||||
badge: t("templates.badgeCustom"),
|
||||
onUse: () => onUseSavedTemplate(template),
|
||||
})
|
||||
}
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Eye className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
@@ -381,7 +399,10 @@ export const TemplatesPane = ({
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1.5 rounded-lg border border-emerald-200/80 bg-emerald-50/70 px-3 py-1.5 text-xs font-semibold text-emerald-800 hover:bg-emerald-600 hover:text-white hover:border-emerald-600 transition-all duration-200 disabled:opacity-50"
|
||||
disabled={!canCreateMemo || isCreating}
|
||||
onClick={() => onUseSavedTemplate(template)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onUseSavedTemplate(template);
|
||||
}}
|
||||
>
|
||||
{t("templates.useThisTemplate")}
|
||||
<ArrowRight className="h-3 w-3" />
|
||||
@@ -425,7 +446,17 @@ export const TemplatesPane = ({
|
||||
return (
|
||||
<div
|
||||
key={template.id}
|
||||
className={`group relative flex flex-col justify-between rounded-xl border border-slate-200 bg-white p-4 transition-all duration-200 hover:shadow-md ${theme.accentBorder}`}
|
||||
className={`group relative flex flex-col justify-between rounded-xl border border-slate-200 bg-white p-4 transition-all duration-200 hover:shadow-md cursor-pointer ${theme.accentBorder}`}
|
||||
onClick={() =>
|
||||
setPreviewTemplate({
|
||||
title: template.title,
|
||||
description: template.description,
|
||||
tags: template.tags,
|
||||
contentMarkdown: template.contentMarkdown,
|
||||
badge: t("templates.badgeBuiltIn"),
|
||||
onUse: () => onCreateMemo(template),
|
||||
})
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<div className="mb-2.5 flex items-center justify-between gap-2">
|
||||
@@ -449,7 +480,8 @@ export const TemplatesPane = ({
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 text-xs text-slate-500 hover:text-slate-800 transition py-1"
|
||||
onClick={() =>
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setPreviewTemplate({
|
||||
title: template.title,
|
||||
description: template.description,
|
||||
@@ -457,8 +489,8 @@ export const TemplatesPane = ({
|
||||
contentMarkdown: template.contentMarkdown,
|
||||
badge: t("templates.badgeBuiltIn"),
|
||||
onUse: () => onCreateMemo(template),
|
||||
})
|
||||
}
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Eye className="h-3.5 w-3.5 text-slate-400" />
|
||||
{t("templates.previewTemplate")}
|
||||
@@ -468,7 +500,10 @@ export const TemplatesPane = ({
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1.5 rounded-lg border border-emerald-200/80 bg-emerald-50/70 px-3 py-1.5 text-xs font-semibold text-emerald-800 hover:bg-emerald-600 hover:text-white hover:border-emerald-600 transition-all duration-200 disabled:opacity-50"
|
||||
disabled={!canCreateMemo || isCreating}
|
||||
onClick={() => onCreateMemo(template)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onCreateMemo(template);
|
||||
}}
|
||||
>
|
||||
{t("templates.useThisTemplate")}
|
||||
<ArrowRight className="h-3 w-3" />
|
||||
|
||||
Reference in new issue
Block a user