diff --git a/nezha-fronted/src/assets/css/components/common/globalSearch/globalSearch.scss b/nezha-fronted/src/assets/css/components/common/globalSearch/globalSearch.scss new file mode 100644 index 000000000..965b9e2cf --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/globalSearch/globalSearch.scss @@ -0,0 +1,71 @@ +.global-search-bac{ + position: fixed; + top: 0; + left: 0; + z-index: 1; + background: rgba(0,0,0,0.2); + height: 100vh; + width: 100vw; + display: flex; + justify-content: space-around; + //align-items: center; + box-sizing: border-box; + padding-top: 80px; +} +.global-search-box.search-after{ + height: 82%; + min-height: 894px; +} +.global-search-box { + //background: $--background-color-empty; + background: rgba(0,0,0,0); + width: 80%; + max-width: 1040px; + height: auto; + display: flex; + flex-direction: column; + .global-search-input { + background: $--background-color-empty; + height: 72px; + font-size: 26px; + display: flex; + border-radius: 6px; + line-height: 72px; + .nz-icon-search { + margin-left: 22px; + margin-right: 20px; + font-size: 26px; + color: $--color-text-primary; + } + .el-input__inner { + border: none !important; + border-right: 1px solid $--border-color-light !important; + font-size: 26px; + height: 40px; + line-height: 72px; + color: $--color-text-regular; + vertical-align: middle; + } + .global-search-cancel{ + font-size: 16px; + letter-spacing: 0; + font-weight: 400; + margin-left: 20px; + margin-right: 20px; + color: $--color-text-primary; + } + } + .global-search-input.search-after{ + border-radius: 6px 6px 0 0; + } + .global-search-content{ + flex: 1; + background: $--background-color-empty; + border-top: 1px solid $--border-color-light; + .global-search-footer { + height: 72px; + border-radius: 0 0 6px 6px; + background: $--background-color-empty; + } + } +} diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss index 6b21bb74e..0f0d79c10 100644 --- a/nezha-fronted/src/assets/css/components/index.scss +++ b/nezha-fronted/src/assets/css/components/index.scss @@ -53,6 +53,7 @@ @import './common/table/settings/userTable.scss'; @import './common/table/settings/switchTab.scss'; @import './common/table/special/endpointQuery.scss'; +@import './common/globalSearch/globalSearch'; @import './common/browserWindowZoom.scss'; @import './common/chartUnit.scss'; @import './common/elementSet.scss'; diff --git a/nezha-fronted/src/components/common/globalSearch/globalSearch.vue b/nezha-fronted/src/components/common/globalSearch/globalSearch.vue new file mode 100644 index 000000000..26e94a7d5 --- /dev/null +++ b/nezha-fronted/src/components/common/globalSearch/globalSearch.vue @@ -0,0 +1,95 @@ + + + + + diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue index 7f3be1186..f54c6ff86 100644 --- a/nezha-fronted/src/components/layout/header.vue +++ b/nezha-fronted/src/components/layout/header.vue @@ -5,13 +5,20 @@ {{$t(crumb.i18n)}}
+ + + +
- {{item.name}} + {{item.name}} + + @@ -20,13 +22,16 @@ import Header from './header' import webSSH from '../cli/webSSH' import leftMenu from './leftMenu' import container from './container' +import globalSearch from '@/components/common/globalSearch/globalSearch' + export default { name: 'home', components: { Header, leftMenu, container, - 'web-ssh': webSSH + 'web-ssh': webSSH, + globalSearch }, data () { return { diff --git a/nezha-fronted/src/store/index.js b/nezha-fronted/src/store/index.js index df64cc92d..5f7352af0 100644 --- a/nezha-fronted/src/store/index.js +++ b/nezha-fronted/src/store/index.js @@ -40,12 +40,16 @@ const store = new Vuex.Store({ metricsList: [], langList: [], i18nReady: false, - timeFormatMain: localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss' + timeFormatMain: localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss', + globalShow: false }, getters: { getTimeFormatMain (state) { return state.timeFormatMain }, + getGlobalShow (state) { + return state.globalShow + }, getLinkData (state) { return state.linkData }, @@ -174,6 +178,9 @@ const store = new Vuex.Store({ setTimeFormatMain (state, timeFormat) { state.timeFormatMain = timeFormat }, + setGlobalShow (state, globalShow) { + state.globalShow = globalShow + }, i18nReady (state, ready) { state.i18nReady = ready }