diff --git a/src/layout/components/SiderBar/Components/GlobalSeach/index.scss b/src/layout/components/SiderBar/Components/GlobalSeach/index.scss index f1393dd7..2cf1af15 100644 --- a/src/layout/components/SiderBar/Components/GlobalSeach/index.scss +++ b/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; diff --git a/src/layout/components/SiderBar/Components/GlobalSeach/index.tsx b/src/layout/components/SiderBar/Components/GlobalSeach/index.tsx index 189344dc..28ca7d41 100644 --- a/src/layout/components/SiderBar/Components/GlobalSeach/index.tsx +++ b/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({ {{ @@ -154,27 +155,35 @@ const GlobalSeach = defineComponent({ - - {this.searchOptions.map((curr) => ( - -
- {curr?.meta?.icon ? ( - - ) : ( - - )} -
-
- {curr.breadcrumbLabel} -
-
- ))} -
+ {this.searchOptions.length ? ( + + {this.searchOptions.map((curr) => ( + +
+ {curr?.meta?.icon ? ( + + ) : ( + + )} +
+
+ {curr.breadcrumbLabel} +
+
+ ))} +
+ ) : ( + + {{ + icon: () => '', + }} + + )}