feat: add search

src/main.css

@@ -52,14 +52,6 @@ button {
     height: 2rem;
 }
 
-
-.left-bar span {
-  display: flex;
-  margin-right: 2rem;
-  align-items: center;
-  color: rgb(156 163 175);
-}
-
 .header >div {
     margin-left: auto;
     margin-right: auto;
@@ -211,4 +203,104 @@ button {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
+}
+
+/* search css */
+:root {
+  --docsearch-primary-color: #5468ff;
+  --docsearch-text-color: #1c1e21;
+  --docsearch-spacing: 12px;
+  --docsearch-icon-stroke-width: 1.4;
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+  --docsearch-muted-color: #969faf;
+  --docsearch-container-background: rgba(101,108,133,0.8);
+  --docsearch-logo-color: #5468ff;
+  --docsearch-modal-width: 560px;
+  --docsearch-modal-height: 600px;
+  --docsearch-modal-background: #f5f6f7;
+  --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0,0%,100%,0.5),0 3px 8px 0 #555a64;
+  --docsearch-searchbox-height: 56px;
+  --docsearch-searchbox-background: #ebedf0;
+  --docsearch-searchbox-focus-background: #fff;
+  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
+  --docsearch-hit-height: 56px;
+  --docsearch-hit-color: #444950;
+  --docsearch-hit-active-color: #fff;
+  --docsearch-hit-background: #fff;
+  --docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1;
+  --docsearch-key-gradient: linear-gradient(-225deg,#d5dbe4,#f8f8f8);
+  --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);
+  --docsearch-footer-height: 44px;
+  --docsearch-footer-background: #fff;
+  --docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,0.12);
+}
+
+.DocSearch-Button-Container {
+  align-items: center;
+  display: flex;
+}
+
+.DocSearch-Button {
+  align-items: center;
+  background: var(--docsearch-searchbox-background, #969faf);
+  border: 0;
+  border-radius: 40px;
+  color: var(--docsearch-muted-color, #969faf);
+  cursor: pointer;
+  display: flex;
+  font-weight: 500;
+  height: 36px;
+  justify-content: space-between;
+  margin: 0 0 0 16px;
+  padding: 0 8px;
+  user-select: none;
+}
+
+.DocSearch-Button .DocSearch-Search-Icon {
+  color: var(--docsearch-text-color);
+}
+
+.DocSearch-Button-Placeholder {
+  font-size: 1rem;
+  padding: 0 12px 0 6px;
+}
+
+.DocSearch-Search-Icon {
+  stroke-width: 1.6;
+}
+
+.left-bar span {
+  display: flex;
+  align-items: center;
+  color: rgb(156 163 175);
+  font-size: 14px;
+}
+
+.DocSearch-Button-Keys {
+  display: flex;
+  min-width: calc(40px + 0.8em);
+}
+
+.DocSearch-Button-Key {
+  align-items: center;
+  background: var(--docsearch-key-gradient);
+  border-radius: 3px;
+  box-shadow: var(--docsearch-key-shadow);
+  color: var(--docsearch-muted-color);
+  display: flex;
+  height: 18px;
+  justify-content: center;
+  margin-right: 0.4em;
+  position: relative;
+  padding: 0 0 2px;
+  border: 0;
+  top: -1px;
+  width: 20px;
+}
+
+.DocSearch-Button:active, .DocSearch-Button:focus, .DocSearch-Button:hover {
+  background: var(--docsearch-searchbox-focus-background);
+  box-shadow: var(--docsearch-searchbox-shadow);
+  color: var(--docsearch-text-color);
+  outline: none;
 }

src/main.tsx

@@ -1,4 +1,4 @@
-import { QuarkElement, Fragment, property, state, customElement } from "quarkc"
+import { QuarkElement, Fragment, createRef, customElement } from "quarkc"
 import style from "./main.css"
 import "./dark-light-mode.mjs"
 
@@ -52,6 +52,8 @@ class MyComponent extends QuarkElement {
   #ecosystemLangs
   #isSearchShow
 
+  searchRef = createRef()
+
   constructor() {
     super()
     this.#isZhLang = localStorage.getItem("language") === "zh-CN"
@@ -61,25 +63,23 @@ class MyComponent extends QuarkElement {
 
 
   componentDidMount(): void {
-    console.log(location, 333);
+    const container = this.searchRef.current;
     if(location.host.indexOf("vue-quarkdesign") > -1) {
       docsearch({
-        container: "#docsearch",
+        container,
         appId: "EA4BY59U66",
         indexName:
           localStorage.getItem("language") === "en-US" ? "ENDoc" : "CNDoc",
         apiKey: "5d1fd7c976a98a74421011f1374dd200",
       });
     } else if(location.host.indexOf("react-quarkdesign") > -1) {
       docsearch({
-        container: "#docsearch",
+        container,
         appId: "EA4BY59U66",
         indexName:
           localStorage.getItem("language") === "en-US" ? "react-ENDoc" : "react-CNDoc",
         apiKey: "5d1fd7c976a98a74421011f1374dd200",
       });
-    } else {
-      this.#isSearchShow = false
     }
   }
 
@@ -106,10 +106,8 @@ class MyComponent extends QuarkElement {
                 <a href="/">
                   <img src="https://quark.hellobike.com/assets/quark-logo.f9a6a307.png" alt="" />
                 </a>
-                {/* <span href="/"> @2023 </span> */}
-                {
-                  this.#isSearchShow ? <div id="docsearch"></div> : null
-                }
+
+                <div ref={this.searchRef} id="docsearch"></div>
               </div>
 
               <div class="toper-bar">

vite.config.js

@@ -1,6 +1,9 @@
 import { defineConfig } from 'vite';
+import FullReload from 'vite-plugin-full-reload'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [],
+  plugins: [
+    FullReload(['src/**/*.css'])
+  ],
 });