feat: update header

hellof2e · Jun 8, 2023 · 9fc100b · 9fc100b
1 parent e8ce636
commit 9fc100b
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 35 deletions.
diff --git a/lib/index.js b/lib/index.js
@@ -2260,6 +2260,7 @@ const langs = {
   "zh-CN": {
     ecosystem: "生态系统",
     docsTitle: "组件库文档",
+    component: '组件',
     docs: "组件库",
     guide: "指南",
     officialLibrary: "官方工具",
@@ -2269,11 +2270,12 @@ const langs = {
     vscodePlugin: "VSCode 插件",
     help: "帮助",
     gitHubDiscussions: "GitHub 论坛",
-    stacks: ["Vue", "React"]
+    stacks: ["Vue", "React", "Svelte", "Angular", "Javascript"]
   },
   "en-US": {
     ecosystem: "Ecosystem",
     docsTitle: "Docs",
+    component: 'Components',
     docs: "Docs",
     guide: "Guide",
     officialLibrary: "Offical Tools",
@@ -2283,7 +2285,7 @@ const langs = {
     vscodePlugin: "VSCode Plugin",
     help: "HELP",
     gitHubDiscussions: "GitHub Discussions",
-    stacks: ["Vue", "React"]
+    stacks: ["Vue", "React", "Svelte", "Angular", "Javascript"]
   }
 };
 let MyComponent = class MyComponent extends QuarkElement {
@@ -2293,6 +2295,8 @@ let MyComponent = class MyComponent extends QuarkElement {
   githubUrl = 'https://github.com/hellof2e/quark-design';
   homeUrl = 'https://quark.hellobike.com';
   guideUrl = '';
+  componentUrl = '';
+  isQuarkc = false;
   searchRef = createRef();
   constructor() {
     super();
@@ -2314,6 +2318,7 @@ let MyComponent = class MyComponent extends QuarkElement {
       this._quarkdLogoSwitch();
       this.homeUrl = 'https://vue-quarkdesign.hellobike.com';
       this.guideUrl = `https://vue-quarkdesign.hellobike.com/#/${localStorage.getItem("language")}/guide/quickstart`;
+      this.componentUrl = `https://vue-quarkdesign.hellobike.com/#/${localStorage.getItem("language")}/component/button`;
     } else if (location.host.indexOf("react-quarkdesign") > -1) {
       Ro({
         container,
@@ -2324,9 +2329,11 @@ let MyComponent = class MyComponent extends QuarkElement {
       this._quarkdLogoSwitch();
       this.homeUrl = 'https://react-quarkdesign.hellobike.com';
       this.guideUrl = `https://react-quarkdesign.hellobike.com/#/${localStorage.getItem("language")}/guide/quickstart`;
+      this.componentUrl = `https://react-quarkdesign.hellobike.com/#/${localStorage.getItem("language")}/component/button`;
     } else {
       this._quarkcLogoSwitch();
       this.githubUrl = 'https://github.com/hellof2e/quark';
+      this.isQuarkc = true;
     }
   }
   _quarkdLogoSwitch = () => {
@@ -2380,12 +2387,15 @@ let MyComponent = class MyComponent extends QuarkElement {
       class: "toper-bar"
     }, QuarkElement.h("div", {
       class: "menu-group"
-    }, QuarkElement.h("div", {
+    }, this.isQuarkc ? null : QuarkElement.h(Fragment, null, QuarkElement.h("div", {
       class: "nav-item menu"
     }, QuarkElement.h("a", {
-      target: "_blank",
       href: this.guideUrl
     }, this.#ecosystemLangs.guide)), QuarkElement.h("div", {
+      class: "nav-item menu"
+    }, QuarkElement.h("a", {
+      href: this.componentUrl
+    }, this.#ecosystemLangs.component))), QuarkElement.h("div", {
       class: "nav-item flyout"
     }, QuarkElement.h("button", {
       type: "button"
@@ -2426,16 +2436,7 @@ let MyComponent = class MyComponent extends QuarkElement {
       fill: "none"
     }), QuarkElement.h("path", {
       d: "M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"
-    })))), QuarkElement.h("p", {
-      class: "link menu-link",
-      style: "color: #aaa"
-    }, "Angular (Work in progress)"), QuarkElement.h("p", {
-      class: "link menu-link",
-      style: "color: #aaa"
-    }, "Svelte (Work in progress)"), QuarkElement.h("p", {
-      class: "link menu-link",
-      style: "color: #aaa"
-    }, "Javascript (Work in progress)")))))), QuarkElement.h("div", {
+    }))))))))), QuarkElement.h("div", {
       class: "nav-item menu"
     }, QuarkElement.h("a", {
       target: "_blank",
@@ -2598,6 +2599,8 @@ __decorate([state()], MyComponent.prototype, "logo", void 0);
 __decorate([state()], MyComponent.prototype, "githubUrl", void 0);
 __decorate([state()], MyComponent.prototype, "homeUrl", void 0);
 __decorate([state()], MyComponent.prototype, "guideUrl", void 0);
+__decorate([state()], MyComponent.prototype, "componentUrl", void 0);
+__decorate([state()], MyComponent.prototype, "isQuarkc", void 0);
 MyComponent = __decorate([customElement({
   tag: "quark-doc-header",
   style: css_248z

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "quark-doc-header",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "files": [

diff --git a/src/main.tsx b/src/main.tsx
@@ -9,6 +9,7 @@ const langs = {
   "zh-CN": {
     ecosystem: "生态系统",
     docsTitle: "组件库文档",
+    component: '组件',
     docs: "组件库",
     guide: "指南",
     officialLibrary: "官方工具",
@@ -21,14 +22,15 @@ const langs = {
     stacks: [
       "Vue",
       "React",
-      // "Svelte(开发中)",
-      // "Angular(开发中)",
-      // "JS/JQ(开发中)",
+      "Svelte",
+      "Angular",
+      "Javascript",
     ],
   },
   "en-US": {
     ecosystem: "Ecosystem",
     docsTitle: "Docs",
+    component: 'Components',
     docs: "Docs",
     guide: "Guide",
     officialLibrary: "Offical Tools",
@@ -41,9 +43,9 @@ const langs = {
     stacks: [
       "Vue",
       "React",
-      // "Svelte(Work in progress)",
-      // "Angular(Work in progress)",
-      // "JS/JQ(Work in progress)",
+      "Svelte",
+      "Angular",
+      "Javascript",
     ],
   },
 };
@@ -53,18 +55,25 @@ class MyComponent extends QuarkElement {
   #isZhLang
   #ecosystemLangs
 
-  @state() // 响应式内部状态
+  // 响应式内部状态
+  @state()  // logo
   logo = 'https://m.hellobike.com/resource/helloyun/13459/H3kyK_quarkc-light.png?x-oss-process=image/quality,q_80'
 
-  @state() // 响应式内部状态
+  @state() // github 地址
   githubUrl = 'https://github.com/hellof2e/quark-design'
 
-  @state() // 响应式内部状态
+  @state() // 首页地址
   homeUrl = 'https://quark.hellobike.com'
 
-  @state() // 响应式内部状态
+  @state() // 指南 url
   guideUrl = ''
 
+  @state() // 组件 url
+  componentUrl = ''
+
+  @state() // 组件 url
+  isQuarkc = false
+
   searchRef = createRef()
 
   constructor() {
@@ -92,6 +101,7 @@ class MyComponent extends QuarkElement {
       this._quarkdLogoSwitch()
       this.homeUrl = 'https://vue-quarkdesign.hellobike.com'
       this.guideUrl = `https://vue-quarkdesign.hellobike.com/#/${localStorage.getItem("language")}/guide/quickstart`
+      this.componentUrl = `https://vue-quarkdesign.hellobike.com/#/${localStorage.getItem("language")}/component/button`
     } else if(location.host.indexOf("react-quarkdesign") > -1) {
       docsearch({
         container,
@@ -103,9 +113,11 @@ class MyComponent extends QuarkElement {
       this._quarkdLogoSwitch()
       this.homeUrl = 'https://react-quarkdesign.hellobike.com'
       this.guideUrl = `https://react-quarkdesign.hellobike.com/#/${localStorage.getItem("language")}/guide/quickstart`
+      this.componentUrl = `https://react-quarkdesign.hellobike.com/#/${localStorage.getItem("language")}/component/button`
     } else {
       this._quarkcLogoSwitch()
       this.githubUrl = 'https://github.com/hellof2e/quark'
+      this.isQuarkc = true
     }
   }
 
@@ -162,15 +174,26 @@ class MyComponent extends QuarkElement {
 
               <div class="toper-bar">
                 <div class="menu-group">
-                  <div class="nav-item menu">
-                    <a
-                      target="_blank"
-                      href={this.guideUrl}
-                    >
+                  {
+                    this.isQuarkc ? null :
+                    <Fragment>
+                      <div class="nav-item menu">
+                        <a
+                          href={this.guideUrl}
+                        >
+                          {this.#ecosystemLangs.guide}
+                        </a>
+                      </div>
+                      <div class="nav-item menu">
+                        <a
+                          href={this.componentUrl}
+                        >
 
-                      {this.#ecosystemLangs.guide}
-                    </a>
-                  </div>
+                          {this.#ecosystemLangs.component}
+                        </a>
+                      </div>
+                    </Fragment>
+                  }
 
                   <div class="nav-item flyout">
                     <button type="button">
@@ -222,15 +245,15 @@ class MyComponent extends QuarkElement {
                               </a>
                               )
                             }
-                            <p class="link menu-link" style="color: #aaa">
+                            {/* <p class="link menu-link" style="color: #aaa">
                               Angular (Work in progress)
                             </p>
                             <p class="link menu-link" style="color: #aaa">
                               Svelte (Work in progress)
                             </p>
                             <p class="link menu-link" style="color: #aaa">
                               Javascript (Work in progress)
-                            </p>
+                            </p> */}
                           </div>
                         </div>
                       </div>