新增搜索页面及逻辑

public/static/css/style/style.css

@@ -2276,9 +2276,6 @@ ul.sds-desktop-shortcut {
     background-image: url(../../../image/index/reset.png);
 }
 
-
-
-
 /* userSetting */
 .window-header-tool-wrapper .tool.help{
     background-image: url(../../../image/index/wdheader_bt_help.png);
@@ -2362,6 +2359,221 @@ ul.sds-desktop-shortcut {
     background-position: 0 0;
 }
 
+/* 搜索框 */
+.syno-finder.spotlight-main-window {
+    height: 48px;
+    box-shadow: 0px 2px 20px rgba(0,0,0,0.4);
+    border-radius: 7px;
+    border: 1px solid #BCC4CC;
+    overflow: visible;
+}
+
+.syno-finder.spotlight-main-window.merge{
+    height: 418px;
+}
+
+.syno-finder.spotlight-main-window .x-window-tl {
+    display: none;
+}
+
+.syno-finder.spotlight-main-window .x-window-mc {
+    font-size: 13px;
+    background: transparent;
+}
+
+.syno-finder.spotlight-main-window .x-window-mc .x-window-body {
+    background: white;
+}
+
+.syno-finder .search-bar {
+    box-sizing: border-box;
+    background: white;
+}
+
+.syno-finder.spotlight-init .search-bar {
+    border: 0;
+}
+
+.syno-finder.spotlight-init .x-window-bwrap{
+    border-radius: 6px;
+}
+
+.syno-finder.spotlight-init .x-window-bwrap.merge{
+    border-radius:6px 6px 0 0 ;
+}
+
+.syno-finder .search-bar .magnifier {
+    height: 48px !important;
+    padding-left: 16px;
+    padding-right: 12px;
+    background-repeat: no-repeat;
+    background-origin: content-box;
+    background-position: center center;
+}
+
+.syno-finder .search-bar .magnifier {
+    background-repeat: no-repeat;
+    background-position: 16px 0px;
+    background-clip: content-box;
+    padding: 12px 0;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+.syno-finder .search-bar .magnifier.everything{
+    background-image: url("../../../image/index/sn_bt_everything.png");
+}
+
+.syno-finder .search-bar .magnifier.document{
+    background-image: url("../../../image/index/sn_bt_document.png");
+}
+
+.syno-finder .search-bar .magnifier.photo{
+    background-image: url("../../../image/index/sn_bt_photo.png");
+}
+
+.syno-finder .search-bar .magnifier.audio{
+    background-image: url("../../../image/index/sn_bt_audio.png");
+}
+
+.syno-finder .search-bar .magnifier.video{
+    background-image: url("../../../image/index/sn_bt_video.png");
+}
+
+.syno-finder .search-bar .text-field {
+    height: 48px !important;
+    box-shadow: 0 0;
+    z-index: 11000;
+    border: 0;
+    padding: 0;
+    box-sizing: border-box;
+    background: transparent;
+    font-size: 15px;
+    color: #414b55;
+    position: relative;
+}
+
+.syno-finder .search-bar .text-field:lang(zh-CN), .syno-finder .search-bar .dummy-searchfield .suggestion .dummy:lang(zh-CN) {
+    font-family: Verdana,Arial,Microsoft YaHei,sans-serif;
+}
+
+.syno-finder .search-bar .dummy-searchfield {
+    z-index: 10000;
+    position: absolute !important;
+    box-sizing: border-box;
+    color: #A8B4BF;
+    overflow: hidden;
+}
+
+.syno-finder .search-bar.search-now-placeholder .dummy-searchfield {
+    color: rgba(65,75,85,0.4);
+}
+
+.syno-finder .search-bar .dummy-searchfield .suggestion {
+    font-size: 15px;
+}
+
+.syno-finder .search-bar.search-now-placeholder .dummy-searchfield {
+    color: rgba(65,75,85,0.4);
+}
+
+.syno-finder .search-bar .dummy-searchfield .suggestion {
+    font-size: 15px;
+}
+
+.syno-finder .search-bar .text-field, .syno-finder .search-bar .dummy-searchfield .suggestion .dummy {
+    font-family: Verdana,Arial,sans-serif;
+}
+
+.syno-finder .search-bar .dummy-searchfield .suggestion .dummy {
+    line-height: 48px;
+    color: transparent;
+}
+
+.syno-finder .search-bar .text-field:lang(zh-CN), .syno-finder .search-bar .dummy-searchfield .suggestion .dummy:lang(zh-CN) {
+    font-family: Verdana,Arial,Microsoft YaHei,sans-serif;
+}
+
+.syno-finder.spotlight-main-window .x-window-mc .x-window-body .main-panel {
+    border-top: 0;
+    background-color: #fff;
+}
+
+.syno-finder-spotlight-menu {
+    padding: 7px;
+    background: white;
+    box-shadow: 0 2px 2px #000;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
+    border: 1px solid #BCC4CC;
+    border-radius: 6px;
+}
+
+.syno-finder-spotlight-menu .cat-wrapper {
+    cursor: pointer;
+    height: 40px;
+    line-height: 40px;
+    font-size: 13px;
+    color: #414b55;
+    border-radius: 5px;
+}
+
+.syno-finder-spotlight-menu .cat-wrapper:hover {
+    color: #057FEB;
+    background: rgba(5,127,235,0.04);
+}
+
+.syno-finder-spotlight-menu .cat-wrapper:hover .icon {
+    background-position: center -24px;
+}
+
+.syno-finder-spotlight-menu .cat-wrapper.current {
+    color: #057FEB;
+}
+
+.syno-finder-spotlight-menu .cat-wrapper.current .icon {
+    background-position: center -24px;
+}
+
+.syno-finder-spotlight-menu .cat-wrapper .icon {
+    width: 24px;
+    height: 24px;
+    margin: 8px 14px 8px 12px;
+    display: inline-block;
+    background-position: center 0px;
+    vertical-align: top;
+}
+
+.syno-finder-spotlight-menu .cat-wrapper .icon.document {
+    background-image: url("../../../image/index/sn_filterpanel_document.png");
+}
+
+.syno-finder-spotlight-menu .cat-wrapper .icon.photo {
+    background-image: url("../../../image/index/sn_filterpanel_photo.png");
+}
+
+.syno-finder-spotlight-menu .cat-wrapper .icon.audio {
+    background-image: url("../../../image/index/sn_filterpanel_audio.png");
+}
+
+.syno-finder-spotlight-menu .cat-wrapper .icon.video {
+    background-image: url("../../../image/index/sn_filterpanel_video.png");
+}
+
+.syno-finder-spotlight-menu .cat-wrapper .icon.everything {
+    background-image: url("../../../image/index/sn_filterpanel_everything.png");
+}
+
+.syno-finder .x-panel {
+    border-radius: 0  0 6px 6px;
+}
+
+.syno-finder.spotlight-main-window .main-panel {
+    border-top: 0;
+    background-color: #fff;
+    border-top: 2px solid rgba(5,127,235,0.4);
+    box-sizing: border-box;
+}
+
 /* 遮罩层 */
 .ext-el-mask-msg{
     width: calc(100vw);
@@ -2369,7 +2581,7 @@ ul.sds-desktop-shortcut {
 }
 
 /* 消息弹出框 */
-.sds-window-v5 .x-window-body {
+.sds-window-v5.x-window-dlg .x-window-body {
     padding: 24px 30px 0 30px;
 }
 /* 清除全部notify消息弹出框 */

src/component/Container/Desktop/SearchInput/index.vue

@@ -0,0 +1,376 @@
+<template>
+  <!-- 搜索框 -->
+  <div>
+    <div
+      class="
+        x-window
+        syno-finder
+        spotlight-main-window
+        sds-window-v5
+        active-win
+        spotlight-init
+      "
+      style="
+        position: relative;
+        left: 50%;
+        transform: translateX(-50%);
+        top: 39px;
+        width: 638px;
+      "
+      :style="{
+        display: searchInputContant.display,
+        zIndex: searchInputContant.zIndex,
+      }"
+      :class="searchCls"
+      @click.stop="clickSearchInput"
+    >
+      <div class="x-dlg-focus"></div>
+      <div class="x-window-tl">
+        <div class="x-window-tr">
+          <div class="x-window-tc">
+            <div class="x-window-header x-panel-icon x-window-draggable">
+              <div class="x-window-toolCt">
+                <div class="x-tool x-tool-close">&nbsp;</div>
+                <div class="x-tool x-tool-restore" style="display: none">
+                  &nbsp;
+                </div>
+                <div class="x-tool x-tool-maximize">&nbsp;</div>
+                <div class="x-tool x-tool-minimize">&nbsp;</div>
+                <div class="x-tool x-tool-help">&nbsp;</div>
+              </div>
+              <span class="x-window-header-text">Spotlight</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="x-window-bwrap" :class="searchCls">
+        <div class="x-window-ml">
+          <div class="x-window-mr">
+            <div class="x-window-mc">
+              <div class="x-window-body" style="width: 638px; height: 48px">
+                <div
+                  class="x-panel syno-ux-panel x-panel-noborder"
+                  style="width: 638px"
+                >
+                  <div class="x-panel-bwrap">
+                    <div
+                      class="
+                        x-panel-body
+                        x-panel-body-noheader
+                        x-panel-body-noborder
+                        x-box-layout-ct
+                      "
+                      style="width: 638px; height: 48px"
+                    >
+                      <div
+                        class="x-box-inner"
+                        style="width: 638px; height: 48px"
+                      >
+                        <div
+                          class="
+                            x-panel
+                            search-bar
+                            syno-ux-panel
+                            x-panel-noborder x-box-item
+                            search-now-placeholder
+                          "
+                          style="
+                            position: absolute;
+                            z-index: 11000;
+                            visibility: visible;
+                            left: 0px;
+                            top: 0px;
+                            width: 638px;
+                          "
+                        >
+                          <div class="x-panel-bwrap">
+                            <div
+                              class="
+                                x-panel-body
+                                x-panel-body-noheader
+                                x-panel-body-noborder
+                                x-box-layout-ct
+                              "
+                              style="height: 46px; width: 638px"
+                            >
+                              <div
+                                class="x-box-inner"
+                                style="width: 638px; height: 46px"
+                              >
+                                <div
+                                  class="magnifier x-box-item"
+                                  :class="searchIconCls"
+                                  @click.stop="showOrHiddenSelect"
+                                  style="
+                                    width: 70px;
+                                    height: 22px;
+                                    left: 0px;
+                                    top: 0px;
+                                  "
+                                ></div>
+                                <input
+                                  type="text"
+                                  size="20"
+                                  autocomplete="off"
+                                  class="
+                                    x-form-text x-form-field
+                                    text-field
+                                    syno-ux-textfield
+                                    x-box-item
+                                  "
+                                  style="
+                                    margin-left: 0px;
+                                    height: 46px;
+                                    width: 512px;
+                                    left: 70px;
+                                    top: 0px;
+                                  "
+                                  v-model="keyword"
+                                  @input="searchKeyword"
+                                  @focus="searchInputFocus"
+                                />
+                                <div
+                                  class="loading-icon x-box-item"
+                                  style="
+                                    width: 24px;
+                                    height: 46px;
+                                    left: 598px;
+                                    top: 0px;
+                                  "
+                                ></div>
+                                <div class="x-form-hidden-error-msg"></div>
+                                <div
+                                  class="dummy-searchfield"
+                                  style="
+                                    width: 512px;
+                                    height: 46px;
+                                    left: 70px;
+                                    top: 0px;
+                                  "
+                                  :style="{ display: searchFieldDisplay }"
+                                >
+                                  <div
+                                    class="suggestion"
+                                    style="width: 512px; height: 46px"
+                                  >
+                                    <span class="dummy"></span>立即搜索{{
+                                      searchText
+                                    }}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="x-window-bl x-panel-nofooter">
+          <div class="x-window-br"><div class="x-window-bc"></div></div>
+        </div>
+      </div>
+      <div
+        class="x-panel x-panel-noborder x-box-item"
+        style="width: 638px; left: 0px; top: 48px"
+      >
+        <div class="x-panel-bwrap" :style="{ display: panelBwrapDisplay }">
+          <div
+            class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
+            style="width: 638px; height: 370px"
+          >
+            <div
+              class="x-panel main-panel syno-ux-panel x-panel-noborder"
+              style="width: 638px; height: 370px"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="
+          x-panel
+          syno-finder-spotlight-menu
+          x-panel-noborder
+          syno-ux-panel
+        "
+        style="
+          position: absolute;
+          z-index: 11000;
+          left: 10px;
+          top: 45px;
+          width: 184px;
+        "
+        :style="{ display: selectDisplay }"
+      >
+        <div class="x-panel-bwrap">
+          <div
+            class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
+            style="width: 184px"
+          >
+            <div style="width: 184px; height: 200px">
+              <div
+                class="cat-wrapper"
+                :class="select.cls"
+                v-for="(select, selectIndex) in searchInputDetail.selectList"
+                :key="select.id"
+                @click.stop="changeSearchMethod(selectIndex, select.cls1)"
+              >
+                <span class="icon" :class="select.cls1"></span>{{ select.text }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  mounted() {
+      this.$bus.on('openSearchInput',this.openSearchInput)
+  },
+  data() {
+    return {
+      searchInputContant: {
+        display: "none",
+        zIndex: "9050",
+      },
+      searchText: "",
+      keyword: "",
+      searchCls: "",
+      searchIconCls: "everything",
+      selectDisplay: "none",
+      searchFieldDisplay: "block",
+      panelBwrapDisplay: "none",
+      searchInputDetail: {
+        selectList: [
+          {
+            id: 0,
+            cls: "",
+            cls1: "document",
+            text: "文档",
+          },
+          {
+            id: 1,
+            cls: "",
+            cls1: "photo",
+            text: "照片",
+          },
+          {
+            id: 2,
+            cls: "",
+            cls1: "audio",
+            text: "音乐",
+          },
+          {
+            id: 3,
+            cls: "",
+            cls1: "video",
+            text: "视频",
+          },
+          {
+            id: 4,
+            cls: "current",
+            cls1: "everything",
+            text: "全部",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 显示或隐藏本页面
+    openSearchInput(e) {
+      if (this.searchInputContant.display === "none") {
+        this.searchInputContant.display = "block";
+        e.srcElement.className = e.srcElement.className + " pressed";
+        window.addEventListener('click',this.hiddenSearchInput,false)
+      } else {
+        this.searchInputContant.display = "none";
+        if (e.srcElement.className.includes(" pressed")) {
+          e.srcElement.className = e.srcElement.className.replace(
+            " pressed",
+            ""
+          );
+        }
+      }
+    },
+    // 隐藏本页面
+    hiddenSearchInput(e){
+        console.log(e)
+        let el = document.querySelector(".tray-item.search-button");
+      if(e.srcElement !== el){
+        this.searchInputContant.display = "none";
+      }
+      if (el.className && el.className.includes(" pressed")) {
+        el.className = el.className.replace(" pressed", "");
+      }
+      this.panelBwrapDisplay = "none";
+      this.searchFieldDisplay = "block";
+      this.selectDisplay = "none";
+      this.searchCls = "";
+      this.keyword = ''
+      window.removeEventListener('click',this.hiddenSearchInput,false)
+    },
+    // 点击本页面
+    clickSearchInput(){
+        
+        let el = document.querySelector(".tray-item.search-button");
+        el.className = el.className + " pressed";
+    },
+    // 显示或隐藏选择框
+    showOrHiddenSelect() {
+      if (this.selectDisplay === "none") {
+        this.selectDisplay = "block";
+      } else {
+        this.selectDisplay = "none";
+        
+      }
+    },
+    // 切换搜索方式
+    changeSearchMethod(selectIndex, cls) {
+      this.searchIconCls = cls;
+      this.searchInputDetail.selectList.forEach((item) => {
+        if (item.cls.includes("current")) {
+          item.cls = item.cls.replace("current", "");
+        }
+      });
+      if (
+        !this.searchInputDetail.selectList[selectIndex].cls.includes("current")
+      ) {
+        this.searchInputDetail.selectList[selectIndex].cls =
+          this.searchInputDetail.selectList[selectIndex].cls + "current";
+      }
+      this.selectDisplay = "none";
+      if (selectIndex < 4) {
+        this.searchText = this.searchInputDetail.selectList[selectIndex].text;
+      } else {
+        this.searchText = "";
+      }
+    },
+    // 输入搜索
+    searchKeyword() {
+      console.log(this.keyword.trim());
+      if (!this.keyword.trim()) {
+        this.panelBwrapDisplay = "none";
+        this.searchFieldDisplay = "block";
+        this.searchCls = "";
+      } else {
+        this.panelBwrapDisplay = "block";
+        this.searchFieldDisplay = "none";
+        this.searchCls = "merge";
+      }
+    },
+    // 输入框聚焦
+    searchInputFocus(){
+       this.selectDisplay = "none";
+    }
+  },
+  components: {},
+  name: "SearchInput",
+};
+</script>

src/component/Container/Desktop/UserTrayPanel/index.vue

@@ -117,7 +117,7 @@ export default {
         ]
       };
       this.$bus.emit("openMessage", obj);
-      this.$bus.emit("openMask");
+      this.$bus.emit("openMask",'v-window-container-mask');
 
     },
     // 打开关于页面

src/component/Container/Desktop/index.vue

@@ -29,6 +29,7 @@
       :userSettingData="userSettingData"
     ></UserSetting>
     <UserAbout :defaultZIndex="defaultZIndex"></UserAbout>
+    <SearchInput></SearchInput>
     <!-- <Message></Message> -->
     <!-- <Mask></Mask> -->
   </div>
@@ -45,6 +46,7 @@ import NotifySetting from "./NotifySetting";
 import UserTrayPanel from "./UserTrayPanel";
 import UserSetting from "./UserSetting";
 import UserAbout from "./UserAbout";
+import SearchInput from "./SearchInput";
 // import Message from "./Message";
 // import Mask from './Mask'
 
@@ -68,7 +70,6 @@ export default {
   methods: {
     //是否隐藏本页面
     hiddenOrShowThisWindow(bol) {
-      console.log(bol);
       if (bol) {
         this.display = "none";
       } else {
@@ -95,6 +96,7 @@ export default {
     UserTrayPanel,
     UserSetting,
     UserAbout,
+    SearchInput,
     // Message,
     // Mask,
   },

src/component/Container/Header/index.vue

@@ -26,7 +26,7 @@
         >
           <div></div>
         </button>
-        <button class="tray-item search-button system">
+        <button class="tray-item search-button system" @click.capture="openSearchInput">
           <div></div>
         </button>
       </span>
@@ -72,6 +72,10 @@ export default {
     // 打开用户页面
     openUserTrayPanel(e){
       this.$bus.emit('openUserTrayPanel',e)
+    },
+    // 打开搜索页面
+    openSearchInput(e){
+      this.$bus.emit('openSearchInput',e)
     }
   },
   name: "Header",