From edf05f5d7f67a958d645c0b16dc9e58b60128ce5 Mon Sep 17 00:00:00 2001
From: xsf0105 <allan91coder@gmail.com>
Date: Tue, 26 Mar 2024 16:14:14 +0800
Subject: [PATCH] patch: update

---
 package.json   |  2 +-
 src/index.less | 37 ++++++++++++++++++++++++++++++++-----
 src/index.tsx  | 24 +++++++++++++++++++++++-
 3 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 74f94e1..2f6e6a9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "quark-doc-header",
-  "version": "2.0.19",
+  "version": "2.0.20",
   "scripts": {
     "dev": "npm run start",
     "start": "vite --open",
diff --git a/src/index.less b/src/index.less
index bd90759..7f6cf02 100644
--- a/src/index.less
+++ b/src/index.less
@@ -328,11 +328,38 @@ button {
 }
 
 .toper-tips {
+  // display: flex;
+  // justify-content: center;
+  // align-items: center;
+  // line-height: 75px;
+  // background: #1e1e1e;
+  // position: relative;
+  // font-size: 14px;
   display: flex;
   justify-content: center;
   align-items: center;
-  line-height: 30px;
-  background: #1e1e1e;
-  color: #fff;
-  font-size: 12px;
-}
\ No newline at end of file
+  line-height: 75px;
+  position: relative;
+  font-size: 16px;
+  background-image: linear-gradient(to right, #007e50, #ff6200);
+
+  a {
+    color: #fff;
+    // background-clip: text;
+    // color: transparent;
+  }
+
+  .close {
+    position: absolute;
+    right: 80px;
+    width: 45px;
+    cursor: pointer;
+    text-align: center;
+    color: #fff;
+    margin: 0;
+  }
+  .close:hover,
+  a:hover {
+    color: #ddd;
+  }
+}
diff --git a/src/index.tsx b/src/index.tsx
index 25d5b7f..9f5304a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -83,6 +83,9 @@ class MyComponent extends QuarkElement {
   @state() // 菜单是否激活状态
   activeNav = ''
 
+  @state() // 菜单是否激活状态
+  tipsVisible = true
+
   searchRef = createRef()
 
   constructor() {
@@ -122,6 +125,9 @@ class MyComponent extends QuarkElement {
       localStorage.setItem('theme', 'light')
     }
 
+
+    this.tipsVisible = !localStorage.getItem('tipsVisible');
+
     // 主页跳转地址
     this.homeUrl = this.#curHost // e.g. https://vue-quarkd.hellobike.com
     this.guideUrl = `${this.#curHost}/quarkd-docs/${this.#techName}/#/${localStorage.getItem("language")}/guide/quickstart`
@@ -202,13 +208,29 @@ class MyComponent extends QuarkElement {
     window.location.reload();
   };
 
+  closeTips = () => {
+    localStorage.setItem('tipsVisible', 'false')
+    this.tipsVisible = false;
+  }
+
   render() {
     return (
       <>
+        {
+          this.tipsVisible ?
+          <div class="toper-tips">
+            <div><a href={ this.#isZhLang ? `./#/zh-CN/guide/tips`: `./#/en-US/guide/tips`}>🎉🎉🎉 Quarkd 2.0 正式发布！支持组件外部修改内部样式，点击跳转详情。</a></div>
+            <p class="close" onClick={this.closeTips} title="不再展示">
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M13.6894 0.321198C13.2753 -0.0929086 12.6064 -0.0929086 12.1923 0.321198L7 5.50284L1.80774 0.31058C1.39363 -0.103527 0.724687 -0.103527 0.31058 0.31058C-0.103527 0.724687 -0.103527 1.39363 0.31058 1.80774L5.50284 7L0.31058 12.1923C-0.103527 12.6064 -0.103527 13.2753 0.31058 13.6894C0.724687 14.1035 1.39363 14.1035 1.80774 13.6894L7 8.49716L12.1923 13.6894C12.6064 14.1035 13.2753 14.1035 13.6894 13.6894C14.1035 13.2753 14.1035 12.6064 13.6894 12.1923L8.49716 7L13.6894 1.80774C14.0929 1.40425 14.0929 0.724687 13.6894 0.321198Z" fill="white"></path>
+              </svg>
+            </p>
+          </div> : null
+        }
         {
           this.#isDocNotReady ?
           <div className="toper-message">
-            <a href="https://vue-quarkd.hellobike.com">文档更新中（不影响使用），可先参照 Vue 文档（Coming soon, The document is being updated, does not affect the use, you can refer to the Vue document first...）</a>
+            <a href="https://vue-quarkd.hellobike.com">文档更新中（不影响当前技术栈使用），可先参照 Vue 文档（Coming soon, The document is being updated, does not affect the use, you can refer to the Vue document first...）</a>
           </div> : null
         }
         <header class="header">