From f2c9bf433e25912bced3bca0ba525f986dc4ae60 Mon Sep 17 00:00:00 2001
From: one <wangan.cs@gmail.com>
Date: Tue, 24 Jun 2025 04:01:05 +0800
Subject: [PATCH] refactor(CodePreview): auto resize gutters (#7481)

* refactor(CodePreview): auto resize gutters

* refactor: remove unnecessary usememo
---
 .../components/CodeBlockView/CodePreview.tsx   | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/components/CodeBlockView/CodePreview.tsx b/src/renderer/src/components/CodeBlockView/CodePreview.tsx
index d3c56f295b..566a980f67 100644
--- a/src/renderer/src/components/CodeBlockView/CodePreview.tsx
+++ b/src/renderer/src/components/CodeBlockView/CodePreview.tsx
@@ -168,9 +168,15 @@ const CodePreview = ({ children, language, setTools }: CodePreviewProps) => {
     }
   }, [highlightCode])
 
-  const hasHighlightedCode = useMemo(() => {
-    return tokenLines.length > 0
-  }, [tokenLines.length])
+  useEffect(() => {
+    const container = codeContentRef.current
+    if (!container || !codeShowLineNumbers) return
+
+    const digits = Math.max(tokenLines.length.toString().length, 1)
+    container.style.setProperty('--line-digits', digits.toString())
+  }, [codeShowLineNumbers, tokenLines.length])
+
+  const hasHighlightedCode = tokenLines.length > 0
 
   return (
     <ContentContainer
@@ -242,6 +248,10 @@ const ContentContainer = styled.div<{
   border-radius: 5px;
   margin-top: 0;
 
+  /* 动态宽度计算 */
+  --line-digits: 0;
+  --gutter-width: max(calc(var(--line-digits) * 0.7rem), 2.1rem);
+
   .shiki {
     padding: 1em;
 
@@ -252,7 +262,7 @@ const ContentContainer = styled.div<{
       .line {
         display: block;
         min-height: 1.3rem;
-        padding-left: ${(props) => (props.$lineNumbers ? '2rem' : '0')};
+        padding-left: ${(props) => (props.$lineNumbers ? 'var(--gutter-width)' : '0')};
 
         * {
           overflow-wrap: ${(props) => (props.$wrap ? 'break-word' : 'normal')};