teableio · boris-w · Dec 23, 2025 · Dec 23, 2025
diff --git a/apps/nestjs-backend/src/types/i18n.generated.ts b/apps/nestjs-backend/src/types/i18n.generated.ts
@@ -485,6 +485,8 @@ export type I18nTranslations = {
                     "addCategory": string;
                     "selectCategory": string;
                 };
+                "relatedTemplates": string;
+                "noImage": string;
                 "baseSelectPanel": {
                     "title": string;
                     "description": string;

diff --git a/apps/nextjs-app/src/features/app/components/space/template/RecommendTemplate.tsx b/apps/nextjs-app/src/features/app/components/space/template/RecommendTemplate.tsx
@@ -0,0 +1,93 @@
+import { useQuery } from '@tanstack/react-query';
+import { getPublishedTemplateList } from '@teable/openapi';
+import { ReactQueryKeys } from '@teable/sdk/config/react-query-keys';
+import { Spin } from '@teable/ui-lib/base';
+import { cn } from '@teable/ui-lib/shadcn';
+import { useTranslation } from 'next-i18next';
+import { useMemo } from 'react';
+
+interface IRecommendTemplateProps {
+  filterTemplateIds?: string[];
+  onTemplateClick?: (templateId: string) => void;
+  className?: string;
+}
+
+export const RecommendTemplate = (props: IRecommendTemplateProps) => {
+  const { onTemplateClick, className, filterTemplateIds } = props;
+  const { t } = useTranslation('common');
+
+  const { data: templates, isLoading } = useQuery({
+    queryKey: [...ReactQueryKeys.publishedTemplateList(null, '', true), 'recommend'],
+    queryFn: () => getPublishedTemplateList({ featured: true, take: 4 }).then((res) => res.data),
+  });
+
+  const filteredTemplates = useMemo(() => {
+    return templates?.filter((template) => !filterTemplateIds?.includes(template.id))?.slice(0, 3);
+  }, [templates, filterTemplateIds]);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <Spin className="size-6" />
+      </div>
+    );
+  }
+
+  if (!templates || templates.length === 0) {
+    return null;
+  }
+
+  const handleTemplateClick = (templateId: string) => {
+    onTemplateClick?.(templateId);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent, templateId: string) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleTemplateClick(templateId);
+    }
+  };
+
+  return (
+    <div className={cn('flex flex-col items-start justify-start gap-3 self-stretch', className)}>
+      <p className="text-base font-semibold text-foreground">
+        {t('settings.templateAdmin.relatedTemplates')}
+      </p>
+      <div className="flex flex-col items-start justify-start gap-4 self-stretch md:flex-row">
+        {filteredTemplates?.map((template) => (
+          <div
+            key={template.id}
+            role="button"
+            tabIndex={0}
+            className="group relative flex h-64 w-full cursor-pointer flex-col items-start justify-start overflow-hidden rounded-lg border border-border bg-background transition-shadow hover:shadow-md focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 md:max-w-[33%] md:flex-1"
+            onClick={() => handleTemplateClick(template.id)}
+            onKeyDown={(e) => handleKeyDown(e, template.id)}
+          >
+            <div className="relative h-[218px] w-full self-stretch overflow-hidden bg-secondary">
+              {template.cover?.presignedUrl ? (
+                <img
+                  src={template.cover.presignedUrl}
+                  alt={template.name}
+                  className="size-full object-cover transition-all duration-300 group-hover:scale-105"
+                />
+              ) : (
+                <div className="flex size-full items-center justify-center">
+                  <span className="text-sm text-muted-foreground">
+                    {t('settings.templateAdmin.noImage')}
+                  </span>
+                </div>
+              )}
+            </div>
+            <div className="flex flex-col items-start justify-center gap-2 self-stretch border-t border-border bg-background p-3">
+              <div className="relative flex flex-col items-start justify-start gap-1 self-stretch">
+                <p className="w-full truncate text-sm font-medium text-foreground">
+                  {template.name}
+                </p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/nextjs-app/src/features/app/components/space/template/TemplateDetail.tsx b/apps/nextjs-app/src/features/app/components/space/template/TemplateDetail.tsx
@@ -12,24 +12,29 @@ import { Badge, Button, cn } from '@teable/ui-lib/shadcn';
 import { ArrowUpRight, ChevronLeft } from 'lucide-react';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useSpaceId } from './hooks/use-space-id';
+import { RecommendTemplate } from './RecommendTemplate';
 import { TemplatePreview } from './TemplatePreview';
 import { TemplatePreviewSheet } from './TemplatePreviewSheet';
 
 interface ITemplateDetailProps {
   templateId: string;
   onBackToTemplateList?: () => void;
+  onTemplateClick?: (templateId: string) => void;
 }
 export const TemplateDetail = (props: ITemplateDetailProps) => {
-  const { templateId, onBackToTemplateList } = props;
+  const { templateId, onBackToTemplateList, onTemplateClick } = props;
   const { t } = useTranslation(['common']);
+  const detailRef = useRef<HTMLDivElement>(null);
   const isMobile = useIsMobile();
-  const { data: templateDetail } = useQuery({
+  const { data: _templateDetail } = useQuery({
     queryKey: ReactQueryKeys.templateDetail(templateId),
     queryFn: () => getTemplateDetail(templateId).then((res) => res.data),
   });
 
+  const templateDetail = _templateDetail?.id === templateId ? _templateDetail : undefined;
+
   const { name, description, categoryId, markdownDescription, cover } = templateDetail || {};
 
   const { data: categoryList } = useQuery({
@@ -71,6 +76,19 @@ export const TemplateDetail = (props: ITemplateDetailProps) => {
     },
   });
 
+  const filterTemplateIds = useMemo(() => {
+    return [templateId];
+  }, [templateId]);
+
+  useEffect(() => {
+    if (detailRef.current) {
+      detailRef.current.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    }
+  }, [templateId]);
+
   if (isMobile) {
     return (
       <div className="absolute inset-0 flex size-full flex-col rounded bg-background">
@@ -86,7 +104,7 @@ export const TemplateDetail = (props: ITemplateDetailProps) => {
           )}
           <h1 className="truncate bg-background text-lg font-bold">{name}</h1>
         </div>
-        <div className="flex flex-col gap-3 overflow-y-auto px-6 pb-3">
+        <div ref={detailRef} className="flex flex-col gap-3 overflow-y-auto px-6 pb-3">
           {categoryNames.length > 0 && (
             <div className="flex flex-wrap gap-2">
               {categoryNames.map((categoryName) => (
@@ -131,10 +149,11 @@ export const TemplateDetail = (props: ITemplateDetailProps) => {
             {markdownDescription && (
               <MarkdownPreview className="p-0">{markdownDescription}</MarkdownPreview>
             )}
-            {/* {!markdownDescription && (
-              <span className="self-center text-sm text-gray-500">{t('common:noDescription')}</span>
-            )} */}
           </div>
+          <RecommendTemplate
+            filterTemplateIds={filterTemplateIds}
+            onTemplateClick={onTemplateClick}
+          />
         </div>
       </div>
     );
@@ -187,16 +206,17 @@ export const TemplateDetail = (props: ITemplateDetailProps) => {
           {isLoading && <Spin className="size-3" />}
         </Button>
       </div>
-      <div className="flex flex-1 flex-col gap-8 overflow-y-auto px-10 py-6 2xl:flex-row">
-        <TemplatePreview detail={templateDetail} className="2xl:h-fit 2xl:min-w-0 2xl:flex-1" />
-        <div className="flex flex-col gap-1 pb-2 2xl:w-1/3 2xl:shrink-0">
+      <div ref={detailRef} className="flex flex-1 flex-col gap-8 overflow-y-auto px-10 py-6">
+        <TemplatePreview detail={templateDetail} />
+        <div className="flex flex-col gap-1 pb-2">
           {markdownDescription && (
             <MarkdownPreview className="p-0">{markdownDescription}</MarkdownPreview>
           )}
-          {/* {!markdownDescription && (
-            <span className="self-center text-sm text-gray-500">{t('common:noDescription')}</span>
-          )} */}
         </div>
+        <RecommendTemplate
+          filterTemplateIds={filterTemplateIds}
+          onTemplateClick={onTemplateClick}
+        />
       </div>
     </div>
   );

diff --git a/apps/nextjs-app/src/features/app/components/space/template/TemplateModal.tsx b/apps/nextjs-app/src/features/app/components/space/template/TemplateModal.tsx
@@ -47,7 +47,14 @@ export const TemplateModal = (props: TemplateModalProps) => {
   ) : (
     <Dialog>
       <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="flex h-[85%] max-h-[85%] max-w-[80%] flex-col gap-0 p-0">
+      <DialogContent
+        className={cn(
+          'flex h-[85%] max-h-[85%] max-w-[80%] flex-col gap-0 p-0 transition-[max-width] duration-300',
+          {
+            'max-w-7xl': currentTemplateId,
+          }
+        )}
+      >
         <DialogHeader className="flex w-full border-b p-4">
           <div className="relative flex w-full items-center justify-center gap-2">
             <div className="absolute left-0 flex shrink-0 flex-col gap-0.5">
@@ -69,6 +76,7 @@ export const TemplateModal = (props: TemplateModalProps) => {
           <TemplateDetail
             templateId={currentTemplateId}
             onBackToTemplateList={() => setCurrentTemplateId(null)}
+            onTemplateClick={(templateId) => setCurrentTemplateId(templateId)}
           />
         ) : (
           <TemplateMain

diff --git a/apps/nextjs-app/src/features/app/components/space/template/TemplatePreview.tsx b/apps/nextjs-app/src/features/app/components/space/template/TemplatePreview.tsx
@@ -4,7 +4,7 @@ import { Spin } from '@teable/ui-lib/base';
 import { Button, cn } from '@teable/ui-lib/shadcn';
 import { ArrowUpRight } from 'lucide-react';
 import { useTranslation } from 'next-i18next';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useMeasure } from 'react-use';
 
 export const TemplatePreview = (props: {
@@ -20,6 +20,13 @@ export const TemplatePreview = (props: {
   const { t } = useTranslation(['common']);
   const [ref, { width }] = useMeasure<HTMLDivElement>();
   const isHydrated = useIsHydrated();
+  const url =
+    defaultUrl || (snapshot?.baseId ? `${window.location.origin}/base/${snapshot.baseId}` : '');
+  useEffect(() => {
+    if (url) {
+      setIsLoading(true);
+    }
+  }, [url]);
 
   if (!isHydrated) {
     return (
@@ -30,8 +37,6 @@ export const TemplatePreview = (props: {
   }
 
   const height = width * (640 / 1240);
-  const url =
-    defaultUrl || (snapshot?.baseId ? `${window.location.origin}/base/${snapshot.baseId}` : '');
 
   return (
     <div className={cn('relative', className)} ref={isFull ? null : ref}>
@@ -46,7 +51,7 @@ export const TemplatePreview = (props: {
           onLoad={() => requestAnimationFrame(() => setIsLoading(false))}
         />
       )}
-      {isLoading && (
+      {(isLoading || !url) && (
         <div
           className="absolute inset-0 flex items-center justify-center rounded-sm border bg-background text-sm text-muted-foreground"
           style={{ height: isFull ? '100%' : `${height}px` }}

diff --git a/apps/nextjs-app/src/features/app/components/space/template/TemplateSheet.tsx b/apps/nextjs-app/src/features/app/components/space/template/TemplateSheet.tsx
@@ -68,6 +68,7 @@ export const TemplateSheet = (props: ITemplateSheetProps) => {
           <TemplateDetail
             templateId={currentTemplateId}
             onBackToTemplateList={() => setCurrentTemplateId(null)}
+            onTemplateClick={(templateId) => setCurrentTemplateId(templateId)}
           />
         ) : (
           <TemplateMain

diff --git a/packages/common-i18n/src/locales/en/common.json b/packages/common-i18n/src/locales/en/common.json
@@ -152,6 +152,8 @@
         "addCategory": "Add category",
         "selectCategory": "Select category"
       },
+      "relatedTemplates": "Related Templates",
+      "noImage": "No image",
       "baseSelectPanel": {
         "title": "Select template source",
         "description": "Select a base to be the template",

diff --git a/packages/common-i18n/src/locales/zh/common.json b/packages/common-i18n/src/locales/zh/common.json
@@ -152,6 +152,8 @@
         "addCategory": "添加分类",
         "selectCategory": "选择分类"
       },
+      "relatedTemplates": "相关模板",
+      "noImage": "暂无图片",
       "baseSelectPanel": {
         "title": "选择模板来源",
         "description": "选择一个数据库作为模板",