From a185bd946378735e2e5a41ab689979322b20f3db Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Fri, 25 Oct 2024 20:51:16 +0800
Subject: [PATCH] style: viewcode scrollbar color

---
 src/components/highlight-code/code-viewer.tsx |  5 ++++-
 .../highlight-code/styles/index.less          | 19 +++++++++++++----
 src/global.less                               |  1 +
 .../playground/components/message-input.tsx   |  7 ++++++-
 .../playground/components/view-code-modal.tsx | 21 ++++++++++++-------
 5 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/components/highlight-code/code-viewer.tsx b/src/components/highlight-code/code-viewer.tsx
index ec9d83cc..29228ab2 100644
--- a/src/components/highlight-code/code-viewer.tsx
+++ b/src/components/highlight-code/code-viewer.tsx
@@ -74,7 +74,10 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
     >
       <code
         style={{ minHeight: height }}
-        className={highlightedCode.className}
+        className={classNames(highlightedCode.className, {
+          dark: props.theme === 'dark',
+          light: props.theme === 'light'
+        })}
         dangerouslySetInnerHTML={{
           __html: highlightedCode.value
         }}
diff --git a/src/components/highlight-code/styles/index.less b/src/components/highlight-code/styles/index.less
index adfc7f42..5cc48d50 100644
--- a/src/components/highlight-code/styles/index.less
+++ b/src/components/highlight-code/styles/index.less
@@ -20,10 +20,21 @@
       background-color: transparent;
     }
 
-    &:hover {
-      &::-webkit-scrollbar-thumb {
-        background-color: var(--color-scrollbar-thumb);
-        border-radius: 4px;
+    &.light {
+      &:hover {
+        &::-webkit-scrollbar-thumb {
+          background-color: var(--color-scrollbar-thumb);
+          border-radius: 4px;
+        }
+      }
+    }
+
+    &.dark {
+      &:hover {
+        &::-webkit-scrollbar-thumb {
+          background-color: var(--scrollbar-handle-light-bg);
+          border-radius: 4px;
+        }
       }
     }
   }
diff --git a/src/global.less b/src/global.less
index 9f8decac..84f60e41 100644
--- a/src/global.less
+++ b/src/global.less
@@ -15,6 +15,7 @@ html {
   --color-scrollbar-thumb: rgba(193, 193, 193, 80%);
   --scrollbar-size: 6px;
   --scrollbar-handle-bg: rgba(0, 0, 0, 44%);
+  --scrollbar-handle-light-bg: rgba(255, 255, 255, 44%);
   --scrollbar-handle-hover-bg: rgba(0, 0, 0, 55%);
   --color-editor-dark: #282c34;
   --color-editor-light: #fafafa;
diff --git a/src/pages/playground/components/message-input.tsx b/src/pages/playground/components/message-input.tsx
index 0d189585..dcd795ea 100644
--- a/src/pages/playground/components/message-input.tsx
+++ b/src/pages/playground/components/message-input.tsx
@@ -162,9 +162,14 @@ const MessageInput: React.FC<MessageInputProps> = ({
     setOpen(true);
   };
 
-  const handleAddMessage = () => {
+  const handleAddMessage = (e?: any) => {
+    e?.preventDefault();
     addMessage?.({ ...message });
     resetMessage();
+    setFocused(true);
+    setTimeout(() => {
+      inputRef.current?.focus?.();
+    }, 100);
   };
 
   const getPasteContent = useCallback(
diff --git a/src/pages/playground/components/view-code-modal.tsx b/src/pages/playground/components/view-code-modal.tsx
index 2e4d5722..0c7eec1a 100644
--- a/src/pages/playground/components/view-code-modal.tsx
+++ b/src/pages/playground/components/view-code-modal.tsx
@@ -136,13 +136,20 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
               }
             }}
           >
-            <HighlightCode
-              height={380}
-              theme="dark"
-              code={codeValue}
-              lang={lang}
-              copyable={false}
-            ></HighlightCode>
+            <div
+              style={{
+                paddingRight: 2,
+                paddingBottom: 2
+              }}
+            >
+              <HighlightCode
+                height={380}
+                theme="dark"
+                code={codeValue}
+                lang={lang}
+                copyable={false}
+              ></HighlightCode>
+            </div>
           </EditorWrap>
           <div
             style={{ marginTop: 10, display: 'flex', alignItems: 'baseline' }}