From 9ca74422c9e1c2a0bee1b8cda3273b07d774bf35 Mon Sep 17 00:00:00 2001
From: WeiCHEN <weichen@WeiCHENdeMac-mini.local>
Date: Tue, 8 Sep 2026 20:38:06 +0800
Subject: [PATCH] feat(web): add template status badges to deck drawer and tab
 bar

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 web/src/components/doc/SlimTabBar.tsx | 39 ++++++++++++++++++++++++---
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/web/src/components/doc/SlimTabBar.tsx b/web/src/components/doc/SlimTabBar.tsx
index 252762b9..0d322fd5 100644
--- a/web/src/components/doc/SlimTabBar.tsx
+++ b/web/src/components/doc/SlimTabBar.tsx
@@ -92,7 +92,10 @@ export const SlimTabBar: React.FC<SlimTabBarProps> = ({
     };
   }, []);
 
-  const getStatusDot = (state: DocLifecycleState) => {
+  const getStatusDot = (state: DocLifecycleState, isTemplateOnly?: boolean) => {
+    if (isTemplateOnly || state === 'template') {
+      return { color: '#0284c7', label: '初始模板' };
+    }
     switch (state) {
       case 'approved':
         return { color: 'var(--success)', label: '已生效受控' };
@@ -149,7 +152,7 @@ export const SlimTabBar: React.FC<SlimTabBarProps> = ({
   };
 
   const currentCatInfo = categoryConfig[activeCategory] || categoryConfig.workflow;
-  const docStatus = activeDoc ? getStatusDot(activeDoc.lifecycleState) : null;
+  const docStatus = activeDoc ? getStatusDot(activeDoc.lifecycleState, activeDoc.isTemplateOnly) : null;
   const isCompact = containerWidth < 460;
 
   return (
@@ -326,6 +329,22 @@ export const SlimTabBar: React.FC<SlimTabBarProps> = ({
             {activeDoc ? activeDoc.title : '请选择文档'}
           </span>
 
+          {activeDoc?.isTemplateOnly && (
+            <span
+              style={{
+                fontSize: '9.5px',
+                color: '#0284c7',
+                background: '#e0f2fe',
+                padding: '1px 5px',
+                borderRadius: '3px',
+                fontWeight: 500,
+                flexShrink: 0,
+              }}
+            >
+              模板
+            </span>
+          )}
+
           <ChevronDown size={11} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
         </button>
 
@@ -362,7 +381,7 @@ export const SlimTabBar: React.FC<SlimTabBarProps> = ({
             ) : (
               visibleTabs.map((doc) => {
                 const isCur = doc.docId === activeDocId;
-                const st = getStatusDot(doc.lifecycleState);
+                const st = getStatusDot(doc.lifecycleState, doc.isTemplateOnly);
                 return (
                   <button
                     key={doc.docId}
@@ -398,6 +417,20 @@ export const SlimTabBar: React.FC<SlimTabBarProps> = ({
                     <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                       {doc.title}
                     </span>
+                    {doc.isTemplateOnly && (
+                      <span
+                        style={{
+                          fontSize: '9.5px',
+                          color: '#0284c7',
+                          background: '#e0f2fe',
+                          padding: '1px 4px',
+                          borderRadius: '3px',
+                          flexShrink: 0,
+                        }}
+                      >
+                        模板
+                      </span>
+                    )}
                     {isCur && <Check size={11} color="var(--brand-500)" style={{ flexShrink: 0 }} />}
                   </button>
                 );