From a815301182fffd5d3b2cc7e47bc9dada22d39e1c Mon Sep 17 00:00:00 2001
From: tianma-if <yingwaizhiying@gmail.com>
Date: Sat, 25 Jul 2026 12:40:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(templates):=20=E6=94=AF=E6=8C=81=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E6=A8=A1=E6=9D=BF=E5=8D=A1=E7=89=87=E7=9B=B4=E6=8E=A5?=
 =?UTF-8?q?=E5=94=A4=E8=B5=B7=E9=A2=84=E8=A7=88=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/TemplatesPane.tsx | 59 ++++++++++++++++++-----
 1 file changed, 47 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/TemplatesPane.tsx b/apps/web/src/components/TemplatesPane.tsx
index f3822c16..8793d33f 100644
--- a/apps/web/src/components/TemplatesPane.tsx
+++ b/apps/web/src/components/TemplatesPane.tsx
@@ -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" />