From cab0c9d879c5830fe710e0f2b99208da23a401a1 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 1 May 2024 18:03:23 +0800
Subject: [PATCH] Fix(ToolBase and ToolTemplate): Optimize panel side

---
 .../assets/css/pages/system/tools/base.scss   |  1 +
 .../css/pages/system/tools/template.scss      | 43 +++++++++++++++++++
 .../src/pages/System/Tools/Template.tsx       |  4 +-
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/src/assets/css/pages/system/tools/template.scss

diff --git a/src/renderer/src/assets/css/pages/system/tools/base.scss b/src/renderer/src/assets/css/pages/system/tools/base.scss
index bab7210..e23e257 100644
--- a/src/renderer/src/assets/css/pages/system/tools/base.scss
+++ b/src/renderer/src/assets/css/pages/system/tools/base.scss
@@ -13,6 +13,7 @@
     }
 
     >*:first-child {
+      width: 0;
       height: fit-content;
     }
 
diff --git a/src/renderer/src/assets/css/pages/system/tools/template.scss b/src/renderer/src/assets/css/pages/system/tools/template.scss
new file mode 100644
index 0000000..dacf2c0
--- /dev/null
+++ b/src/renderer/src/assets/css/pages/system/tools/template.scss
@@ -0,0 +1,43 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=system-tools-template] {
+  .root-content {
+    padding: 20px;
+    gap: 10px;
+    height: 100%;
+    width: 100%;
+
+    .has-edited::after {
+      content: '*';
+      color: constants.$font-secondary-color;
+    }
+
+    >*:first-child {
+      width: 0;
+      height: fit-content;
+    }
+
+    > *:nth-child(2) {
+      position: sticky;
+      top: 20px;
+      height: calc(100vh - 40px);
+    }
+
+    .close-editor-btn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      background-color: constants.$font-secondary-color;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      color: white;
+      opacity: 0.6;
+      box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
+      cursor: pointer;
+    }
+  }
+}
diff --git a/src/renderer/src/pages/System/Tools/Template.tsx b/src/renderer/src/pages/System/Tools/Template.tsx
index bf7d6b0..1a04639 100644
--- a/src/renderer/src/pages/System/Tools/Template.tsx
+++ b/src/renderer/src/pages/System/Tools/Template.tsx
@@ -1,5 +1,5 @@
 import Icon from '@ant-design/icons'
-import '@/assets/css/pages/system/tools/base.scss'
+import '@/assets/css/pages/system/tools/template.scss'
 import {
     COLOR_PRODUCTION,
     DATABASE_DELETE_SUCCESS,
@@ -1021,7 +1021,7 @@ const Template = () => {
 
     return (
         <>
-            <FitFullscreen data-component={'system-tools-base'}>
+            <FitFullscreen data-component={'system-tools-template'}>
                 <HideScrollbar>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <Card>