微调细节

src/layout/components/SiderBar/Components/GlobalSeach/index.scss

@@ -1,10 +1,17 @@
+$globalSearchWidth: 650px;
+
 .global-seach {
+  position: fixed;
+  width: $globalSearchWidth;
+  left: 50%;
+  margin-left: -$globalSearchWidth / 2;
+  top: 60px;
+
   & .global-seach__wrapper {
     box-sizing: border-box;
 
     & .global-seach__card {
-      width: 650px;
-      height: 600px;
+      width: $globalSearchWidth;
       border-radius: 6px;
       padding: 12px;
 
@@ -17,7 +24,8 @@
       }
 
       & .global-seach__card-content {
-        height: calc(100% - 98px);
+        height: auto;
+        max-height: calc(100% - 98px);
 
         & .content-item {
           padding: 12px;

src/layout/components/SiderBar/Components/GlobalSeach/index.tsx

@@ -11,7 +11,7 @@
 
 import './index.scss'
 
-import { NInput, NModal, NScrollbar, NSpace } from 'naive-ui'
+import { NInput, NModal, NResult, NScrollbar, NSpace } from 'naive-ui'
 import RayIcon from '@/components/RayIcon/index'
 
 import { on, off } from '@/utils/element'
@@ -146,6 +146,7 @@ const GlobalSeach = defineComponent({
                 <NInput
                   size="large"
                   v-model:value={this.searchValue}
+                  clearable
                   onInput={this.handleSearchMenuOptions.bind(this)}
                 >
                   {{
@@ -154,27 +155,35 @@ const GlobalSeach = defineComponent({
                 </NInput>
               </div>
               <NScrollbar class="global-seach__card-content">
-                <NSpace vertical wrapItem={false} size={[8, 8]}>
-                  {this.searchOptions.map((curr) => (
-                    <NSpace
-                      align="center"
-                      wrapItem={false}
-                      class="content-item"
-                      onClick={this.handleSearchItemClick.bind(this, curr)}
-                    >
-                      <div class="content-item-icon">
-                        {curr?.meta?.icon ? (
-                          <RayIcon name={curr.meta.icon} size="24" />
-                        ) : (
-                          <RayIcon name="table" size="24" />
-                        )}
-                      </div>
-                      <div class="content-item-label">
-                        {curr.breadcrumbLabel}
-                      </div>
-                    </NSpace>
-                  ))}
-                </NSpace>
+                {this.searchOptions.length ? (
+                  <NSpace vertical wrapItem={false} size={[8, 8]}>
+                    {this.searchOptions.map((curr) => (
+                      <NSpace
+                        align="center"
+                        wrapItem={false}
+                        class="content-item"
+                        onClick={this.handleSearchItemClick.bind(this, curr)}
+                      >
+                        <div class="content-item-icon">
+                          {curr?.meta?.icon ? (
+                            <RayIcon name={curr.meta.icon} size="24" />
+                          ) : (
+                            <RayIcon name="table" size="24" />
+                          )}
+                        </div>
+                        <div class="content-item-label">
+                          {curr.breadcrumbLabel}
+                        </div>
+                      </NSpace>
+                    ))}
+                  </NSpace>
+                ) : (
+                  <NResult size="large" description="暂无搜索结果">
+                    {{
+                      icon: () => '',
+                    }}
+                  </NResult>
+                )}
               </NScrollbar>
               <div class="global-seach__card-footer">
                 <NSpace

src/layout/components/SiderBar/Components/SettingDrawer/components/ThemeSwitch/index.tsx

@@ -39,7 +39,9 @@ const ThemeSwitch = defineComponent({
         ? {
             backgroundColor: '#000000',
           }
-        : {}
+        : {
+            color: '#000000',
+          }
     }
 
     return {

src/layout/components/SiderBar/Components/SettingDrawer/index.tsx

@@ -53,14 +53,9 @@ const SettingDrawer = defineComponent({
       },
     })
 
-    const handleRailStyle = () => ({
-      backgroundColor: '#000000',
-    })
-
     return {
       modelShow,
       t,
-      handleRailStyle,
       changePrimaryColor,
       themeValue,
       primaryColorOverride,