refactor(web): resize style

labring · Mar 6, 2023 · 68d136c · 68d136c
1 parent f2cd1ea
commit 68d136c
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 15 deletions.
diff --git a/web/src/App.css b/web/src/App.css
@@ -9,17 +9,16 @@
 /* 设置滚动条的样式 */
 ::-webkit-scrollbar {
   width: 4px;
+  height: 6px;
 }
 /* 滚动槽 */
 ::-webkit-scrollbar-track {
-  box-shadow: inset006pxrgba(0, 0, 0, 0.3);
   border-radius: 2px;
 }
 /* 滚动条滑块 */
 ::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background: rgba(0, 0, 0, 0.5);
-  box-shadow: inset006pxrgba(0, 0, 0, 0.5);
 }
 
 html,

diff --git a/web/src/components/Resize/index.tsx b/web/src/components/Resize/index.tsx
@@ -44,7 +44,7 @@ export default function Resize(props: {
           }
           {...separatorProps}
         >
-          <Center className="w-full h-full">
+          <Center className="w-full h-full relative">
             {type === "x" && width <= 20 ? (
               <div
                 className={clsx(
@@ -55,14 +55,22 @@ export default function Resize(props: {
                 {reverse ? <ChevronLeftIcon fontSize={10} /> : <ChevronRightIcon fontSize={10} />}
               </div>
             ) : (
-              <div
-                className={clsx(
-                  type === "x" && isDragging ? "h-full " : "h-0",
-                  type === "y" && isDragging ? "w-full " : "w-0",
-                  isDragging ? " border-primary-400 " : "",
-                  "border-l-2 border-t-2 transition-all",
-                )}
-              ></div>
+              <>
+                <div
+                  className={clsx(
+                    type === "x" && isDragging ? "h-full " : "h-0",
+                    type === "y" && isDragging ? "w-full " : "w-0",
+                    isDragging ? " border-primary-400 border" : "",
+                    "transition-all absolute z-10 overflow-hidden",
+                  )}
+                ></div>
+                <div
+                  className={clsx(
+                    type === "x" ? "h-[18px]" : "w-[18px]",
+                    " border rounded border-slate-300 absolute",
+                  )}
+                ></div>
+              </>
             )}
           </Center>
         </div>

diff --git a/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx b/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx
@@ -257,13 +257,12 @@ export default function DataPanel() {
                   showBg
                   tooltip={t("Copy").toString()}
                   size={32}
-                  className="ml-2 hover:bg-rose-100 group/icon"
+                  className="ml-2 hover:bg-gray-200 group/icon"
                 >
                   <CopyText
                     hideToolTip
                     text={JSON.stringify(newData, null, 2)}
                     tip={String(t("Copied"))}
-                    className="group-hover/icon:text-error-500"
                   >
                     <CopyIcon />
                   </CopyText>

diff --git a/web/src/pages/app/functions/mods/EditorPanel/index.tsx b/web/src/pages/app/functions/mods/EditorPanel/index.tsx
@@ -24,9 +24,9 @@ function EditorPanel() {
   const functionListQuery = useFunctionListQuery();
 
   return (
-    <Panel className="flex-1 flex-grow">
+    <Panel className="flex-1 flex-grow px-0">
       {currentFunction?.name ? (
-        <Panel.Header style={{ borderBottom: "2px solid #F4F6F8" }} className="!mb-3 h-[50px]">
+        <Panel.Header style={{ borderBottom: "2px solid #F4F6F8" }} className="!mb-3 h-[50px] px-2">
           <HStack maxW={"60%"} spacing={2}>
             <CopyText className="font-bold text-lg" text={currentFunction?.name}>
               <span>{currentFunction?.name}</span>

diff --git a/web/src/pages/globalStore.ts b/web/src/pages/globalStore.ts
@@ -141,6 +141,7 @@ const useGlobalStore = create<State>()(
           position: "top",
           title: text,
           status: "success",
+          variant: "subtle",
           duration: 1000,
           containerStyle: {
             maxWidth: "100%",
@@ -154,6 +155,7 @@ const useGlobalStore = create<State>()(
           position: "top",
           title: text,
           status: "error",
+          variant: "subtle",
           duration: 1500,
           containerStyle: {
             maxWidth: "100%",