diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index d53853d2817d45d4ec9bef0ee4d38002db40c587..031555ae98415593874694e1980518ed8b29a6c1 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -59,6 +59,8 @@
     <link href="/css/reset.css" rel="stylesheet" type="text/css">
     <link href="/css/revision_new.css" rel="stylesheet" type="text/css">
     <link href="/css/highlightjs-theme.css" rel="stylesheet" type="text/css">
+    <link href="/css/cookie.css" rel="stylesheet" type="text/css">
+    <link href="/css/o_theme.css" rel="stylesheet" type="text/css">
     <link href="{{ "css/float.css"  | relURL }}?t={{ mul 1000 (time now).Unix }}" rel="stylesheet" type="text/css">
     <script src="{{ .Site.BaseURL }}js/highlight.min.js"></script>
     <script>
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 0d7ed50ddc7234f9795a37a2d57cf50757dff7ee..5332d15742f29df83f3dd15b64d52c5e3d61236e 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -7,6 +7,7 @@
 <script src="{{ .Site.BaseURL }}js/docsearch.js"></script>
 <script src="{{ .Site.BaseURL }}js/pagination.js"></script>
 <script src="{{ .Site.BaseURL }}js/float.js"></script>
+<script src="{{ .Site.BaseURL }}js/cookie-notice.js"></script>
 <script type="text/javascript">
   $(document).ready(function () {
     function getCurrentID(wholeData, relativeURL) {
diff --git a/static/css/cookie.css b/static/css/cookie.css
new file mode 100644
index 0000000000000000000000000000000000000000..6b42761415cb8e1fb5848d4635528aad14017b8a
--- /dev/null
+++ b/static/css/cookie.css
@@ -0,0 +1,334 @@
+/* cookie管理 */
+.cookie-notice {
+  position: fixed;
+  bottom: 0;
+  z-index: 10000;
+  width: 100%;
+}
+.cookie-notice-content {
+  background-color: rgba(var(--o-mixedgray-1), 0.9);
+  backdrop-filter: blur(5px);
+  box-shadow: var(--o-shadow-1);
+}
+.content-wrapper {
+  --header-nav-height: 80px;
+  --header-menu-height: 60px;
+  --header-mobile-nav: 48px;
+  --header-height: calc(var(--header-nav-height) + var(--header-menu-height));
+  --footer-height: 96px;
+  --header-padding: 64px;
+  --content-padding: 12px;
+  --content-max-width: 1440px;
+  --nav-side: 428px;
+  padding-left: var(--content-padding);
+  padding-right: var(--content-padding);
+  margin: 0 auto;
+  max-width: var(--content-max-width);
+}
+.cookie-notice-wrap {
+  padding-top: 24px;
+  padding-bottom: 24px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  align-items: center;
+}
+.cookie-notice-left {
+  width: 60%;
+}
+.cookie-title {
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--o-color-info1);
+  font-weight: 500;
+}
+.cookie-desc {
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--o-color-info2);
+  margin-top: 8px;
+}
+.cookie-notice-right {
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+}
+.o-button {
+  border: 1px solid var(--o-color-primary1);
+  color: var(--o-color-primary1);
+  line-height: 30px;
+  padding: 0 16px;
+  display: inline-block;
+  background: none;
+  font-size: 14px;
+  border-radius: 32px;
+  cursor: pointer;
+}
+.o-button:hover {
+  border-color: var(--o-color-primary2);
+  color: var(--o-color-primary2);
+}
+.o-button + button {
+  margin-left: 16px;
+}
+
+.o-layer-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 1011;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.o-dialog {
+  z-index: 1011;
+}
+.o-layer-mask {
+  position: absolute;
+  inset: 0;
+  background-color: var(--o-color-mask1);
+  z-index: -1;
+}
+.o-dlg-main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  background-color: var(--o-color-fill2);
+  width: 930px;
+  min-height: 424px;
+  max-height: 730px;
+  border-radius: 16px;
+  box-shadow: var(--o-shadow-1);
+}
+
+.o-dlg-header {
+  font-size: 32px;
+  color: var(--o-color-info1);
+  line-height: 44px;
+  text-align: center;
+  margin-bottom: 12px;
+}
+.o-dialog-closed,
+.cookie-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  height: 24px;
+  width: 24px;
+  cursor: pointer;
+  mask-image: url(../img/common/icon-close-light.svg);
+  -webkit-mask-image: url(../img/common/icon-close-light.svg);
+  mask-size: cover;
+  -webkit-mask-size: cover;
+  background-color: var(--o-color-info2);
+  transition: all 0.25s cubic-bezier(0, 0, 0, 1);
+}
+.o-dialog-closed:hover,
+.cookie-close:hover,
+.evaluate-close:hover {
+  transform: rotate(180deg);
+  background-color: var(--o-color-primary1);
+}
+
+@media screen and (max-width: 840px) {
+  .cookie-notice-wrap {
+    flex-direction: column;
+    align-items: center;
+    padding: 16px;
+  }
+  .cookie-notice-left {
+    width: 100%;
+  }
+  .cookie-title {
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+  }
+  .cookie-notice-right button {
+    width: 100%;
+    display: block;
+    margin: 12px 0 0 !important;
+    line-height: 26px;
+  }
+  .cookie-notice-right {
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    margin: 0;
+  }
+}
+
+.o-layer-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 1011;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.o-dialog {
+  z-index: 1011;
+}
+.o-layer-mask {
+  position: absolute;
+  inset: 0;
+  background-color: var(--o-color-mask1);
+  z-index: -1;
+}
+.o-dlg-main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  background-color: var(--o-color-fill2);
+  width: 930px;
+  min-height: 424px;
+  max-height: 730px;
+  border-radius: 16px;
+  box-shadow: var(--o-shadow-1);
+}
+.o-dlg-header {
+  font-size: 32px;
+  color: var(--o-color-info1);
+  line-height: 44px;
+  text-align: center;
+  margin-bottom: 12px;
+}
+.o-dialog-closed,
+.cookie-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  height: 24px;
+  width: 24px;
+  cursor: pointer;
+  mask-image: url(../img/common/icon-close-light.svg);
+  -webkit-mask-image: url(../img/common/icon-close-light.svg);
+  mask-size: cover;
+  -webkit-mask-size: cover;
+  background-color: var(--o-color-info2);
+  transition: all 0.25s cubic-bezier(0, 0, 0, 1);
+}
+.o-dialog-closed:hover,
+.cookie-close:hover,
+.evaluate-close:hover {
+  transform: rotate(180deg);
+  background-color: var(--o-color-primary1);
+}
+
+@media screen and (min-width: 1200px) {
+  .o-dialog-small .o-dlg-main {
+    width: 450px;
+    min-height: auto;
+  }
+
+  .o-dialog-small .o-dlg-header {
+    font-size: 24px;
+    line-height: 32px;
+    font-weight: 500;
+  }
+
+  .o-dialog-small .o-dlg-main {
+    padding: 32px;
+  }
+  .privacy-content .o-button {
+    line-height: 38px;
+    font-size: 16px;
+  }
+  .privacy-detail {
+    font-size: 16px;
+    line-height: 24px;
+    color: var(--o-color-info1);
+  }
+}
+
+.o-scroller-container {
+  overflow-y: auto;
+  max-height: 400px;
+}
+.manage-content {
+  padding: 12px 0;
+}
+.manage-item .item-header {
+  display: flex;
+  align-items: center;
+}
+.manage-item .item-header .item-title {
+  font-size: 20px;
+  line-height: 28px;
+  color: var(--o-color-info1);
+  font-weight: 500;
+}
+.manage-item .item-extra {
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--o-color-info3);
+  margin-left: 24px;
+  display: flex;
+  align-items: center;
+}
+.manage-item .item-detail {
+  margin-top: 16px;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--o-color-info2);
+}
+.manage-item + .manage-item {
+  margin-top: 24px;
+}
+.manage-action {
+  margin-top: 24px;
+  text-align: center;
+}
+
+input[is="o-switch"] {
+  padding: 0;
+  -webkit-appearance: none;
+  display: inline-flex;
+  outline: none !important;
+  outline-offset: 0 !important;
+  box-sizing: border-box;
+  background-clip: content-box;
+  width: 42px;
+  height: 20px;
+  border: 2px solid var(--o-color-info4);
+  border-radius: 26px;
+  color: var(--o-color-info4);
+  background-color: var(--o-color-info4);
+  font-size: 0;
+  transition: all 0.2s;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+input[is="o-switch"]:checked {
+  color: var(--o-color-primary1);
+  border-color: var(--o-color-primary1);
+  background-color: var(--o-color-primary1);
+}
+input[is="o-switch"]::before {
+  content: "";
+  flex: 0;
+  transition: flex 0.2s;
+}
+
+input[is="o-switch"]::after {
+  content: "";
+  width: 16px;
+  height: 16px;
+  border-radius: 100%;
+  background-color: #fff;
+  opacity: 1;
+  visibility: visible;
+}
+
+input[is="o-switch"]:active {
+  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+input[is="o-switch"]:checked::before {
+  flex: 1;
+}
diff --git a/static/css/o_theme.css b/static/css/o_theme.css
new file mode 100644
index 0000000000000000000000000000000000000000..4d9cb554f58bf3b3bd192487f13a73505dc56b11
--- /dev/null
+++ b/static/css/o_theme.css
@@ -0,0 +1,560 @@
+[data-o-theme="light"] {
+  --o-color-white: 255, 255, 255;
+  --o-color-black: 0, 0, 0;
+  --o-blue-1: 240, 245, 255;
+  --o-blue-2: 214, 227, 255;
+  --o-blue-3: 173, 198, 255;
+  --o-blue-4: 133, 167, 255;
+  --o-blue-5: 92, 135, 255;
+  --o-blue-6: 51, 102, 255;
+  --o-blue-7: 37, 80, 219;
+  --o-blue-8: 26, 60, 184;
+  --o-blue-9: 16, 43, 148;
+  --o-blue-10: 9, 28, 112;
+  --o-green-1: 232, 255, 238;
+  --o-green-2: 177, 239, 195;
+  --o-green-3: 128, 224, 158;
+  --o-green-4: 84, 208, 127;
+  --o-green-5: 45, 193, 101;
+  --o-green-6: 11, 177, 81;
+  --o-green-7: 7, 152, 72;
+  --o-green-8: 4, 127, 63;
+  --o-green-9: 2, 102, 53;
+  --o-green-10: 0, 77, 42;
+  --o-orange-1: 255, 246, 232;
+  --o-orange-2: 254, 226, 186;
+  --o-orange-3: 253, 202, 140;
+  --o-orange-4: 252, 176, 95;
+  --o-orange-5: 251, 147, 50;
+  --o-orange-6: 250, 115, 5;
+  --o-orange-7: 207, 88, 3;
+  --o-orange-8: 163, 64, 2;
+  --o-orange-9: 120, 42, 1;
+  --o-orange-10: 77, 24, 0;
+  --o-red-1: 255, 234, 232;
+  --o-red-2: 250, 185, 182;
+  --o-red-3: 245, 136, 134;
+  --o-red-4: 240, 87, 90;
+  --o-red-5: 235, 43, 52;
+  --o-red-6: 230, 0, 18;
+  --o-red-7: 192, 0, 22;
+  --o-red-8: 153, 0, 23;
+  --o-red-9: 115, 0, 21;
+  --o-red-10: 77, 0, 17;
+  --o-mixedgray-1: 255, 255, 255;
+  --o-mixedgray-2: 245, 246, 248;
+  --o-mixedgray-3: 230, 232, 234;
+  --o-mixedgray-4: 198, 202, 205;
+  --o-mixedgray-5: 136, 141, 146;
+  --o-mixedgray-6: 107, 112, 117;
+  --o-mixedgray-7: 85, 91, 97;
+  --o-mixedgray-8: 65, 70, 76;
+  --o-mixedgray-9: 46, 50, 56;
+  --o-mixedgray-10: 0, 0, 0;
+  --o-amber-1: 254, 250, 236;
+  --o-amber-2: 252, 241, 207;
+  --o-amber-3: 250, 224, 161;
+  --o-amber-4: 247, 205, 115;
+  --o-amber-5: 245, 182, 70;
+  --o-amber-6: 242, 158, 26;
+  --o-amber-7: 202, 122, 20;
+  --o-amber-8: 161, 89, 14;
+  --o-amber-9: 121, 61, 9;
+  --o-amber-10: 81, 36, 5;
+  --o-cyan-1: 229, 248, 248;
+  --o-cyan-2: 195, 241, 241;
+  --o-cyan-3: 141, 225, 227;
+  --o-cyan-4: 92, 208, 212;
+  --o-cyan-5: 48, 190, 198;
+  --o-cyan-6: 10, 172, 184;
+  --o-cyan-7: 7, 141, 153;
+  --o-cyan-8: 4, 111, 123;
+  --o-cyan-9: 2, 81, 92;
+  --o-cyan-10: 1, 53, 61;
+  --o-lime-1: 244, 251, 231;
+  --o-lime-2: 231, 246, 198;
+  --o-lime-3: 212, 237, 145;
+  --o-lime-4: 196, 229, 95;
+  --o-lime-5: 184, 220, 48;
+  --o-lime-6: 175, 211, 5;
+  --o-lime-7: 143, 176, 2;
+  --o-lime-8: 112, 141, 1;
+  --o-lime-9: 82, 105, 0;
+  --o-lime-10: 53, 70, 0;
+  --o-pink-1: 253, 237, 242;
+  --o-pink-2: 251, 208, 223;
+  --o-pink-3: 247, 163, 195;
+  --o-pink-4: 243, 120, 171;
+  --o-pink-5: 238, 77, 150;
+  --o-pink-6: 235, 36, 132;
+  --o-pink-7: 199, 25, 115;
+  --o-pink-8: 164, 15, 97;
+  --o-pink-9: 128, 8, 78;
+  --o-pink-10: 92, 3, 58;
+  --o-teal-1: 228, 247, 242;
+  --o-teal-2: 193, 240, 225;
+  --o-teal-3: 137, 225, 199;
+  --o-teal-4: 87, 209, 176;
+  --o-teal-5: 43, 194, 155;
+  --o-teal-6: 5, 179, 137;
+  --o-teal-7: 3, 149, 116;
+  --o-teal-8: 1, 119, 95;
+  --o-teal-9: 0, 90, 72;
+  --o-teal-10: 0, 60, 49;
+  --o-indigo-1: 237, 240, 248;
+  --o-indigo-2: 209, 218, 241;
+  --o-indigo-3: 167, 183, 226;
+  --o-indigo-4: 129, 149, 212;
+  --o-indigo-5: 95, 118, 197;
+  --o-indigo-6: 64, 89, 183;
+  --o-indigo-7: 52, 73, 163;
+  --o-indigo-8: 41, 59, 142;
+  --o-indigo-9: 32, 46, 122;
+  --o-indigo-10: 23, 34, 101;
+  --o-purple-1: 246, 234, 247;
+  --o-purple-2: 236, 203, 240;
+  --o-purple-3: 215, 156, 225;
+  --o-purple-4: 193, 114, 209;
+  --o-purple-5: 169, 76, 194;
+  --o-purple-6: 146, 43, 179;
+  --o-purple-7: 124, 33, 159;
+  --o-purple-8: 103, 25, 138;
+  --o-purple-9: 83, 18, 118;
+  --o-purple-10: 65, 12, 97;
+  --o-violet-1: 240, 237, 250;
+  --o-violet-2: 217, 210, 244;
+  --o-violet-3: 182, 169, 233;
+  --o-violet-4: 150, 130, 223;
+  --o-violet-5: 122, 95, 212;
+  --o-violet-6: 97, 62, 201;
+  --o-violet-7: 85, 50, 181;
+  --o-violet-8: 74, 40, 160;
+  --o-violet-9: 64, 31, 140;
+  --o-violet-10: 53, 23, 119;
+  --o-yellow-1: 255, 253, 235;
+  --o-yellow-2: 254, 251, 205;
+  --o-yellow-3: 254, 243, 155;
+  --o-yellow-4: 253, 232, 105;
+  --o-yellow-5: 253, 217, 55;
+  --o-yellow-6: 252, 200, 6;
+  --o-yellow-7: 210, 156, 3;
+  --o-yellow-8: 168, 116, 1;
+  --o-yellow-9: 126, 80, 0;
+  --o-yellow-10: 84, 49, 0;
+  --o-color-primary1: rgb(var(--o-blue-6));
+  --o-color-primary2: rgb(var(--o-blue-4));
+  --o-color-primary3: rgb(var(--o-blue-7));
+  --o-color-primary4: rgb(var(--o-blue-3));
+  --o-color-primary1-light: rgb(var(--o-blue-2));
+  --o-color-primary2-light: rgb(var(--o-blue-3));
+  --o-color-primary3-light: rgb(var(--o-blue-4));
+  --o-color-primary4-light: rgb(var(--o-blue-1));
+  --o-color-success1: rgb(var(--o-green-6));
+  --o-color-success2: rgb(var(--o-green-4));
+  --o-color-success3: rgb(var(--o-green-7));
+  --o-color-success4: rgb(var(--o-green-3));
+  --o-color-success1-light: rgb(var(--o-green-2));
+  --o-color-success2-light: rgb(var(--o-green-3));
+  --o-color-success3-light: rgb(var(--o-green-4));
+  --o-color-success4-light: rgb(var(--o-green-1));
+  --o-color-warning1: rgb(var(--o-orange-6));
+  --o-color-warning2: rgb(var(--o-orange-4));
+  --o-color-warning3: rgb(var(--o-orange-7));
+  --o-color-warning4: rgb(var(--o-orange-3));
+  --o-color-warning1-light: rgb(var(--o-orange-2));
+  --o-color-warning2-light: rgb(var(--o-orange-3));
+  --o-color-warning3-light: rgb(var(--o-orange-4));
+  --o-color-warning4-light: rgb(var(--o-orange-1));
+  --o-color-danger1: rgb(var(--o-red-6));
+  --o-color-danger2: rgb(var(--o-red-4));
+  --o-color-danger3: rgb(var(--o-red-7));
+  --o-color-danger4: rgb(var(--o-red-3));
+  --o-color-danger1-light: rgb(var(--o-red-2));
+  --o-color-danger2-light: rgb(var(--o-red-3));
+  --o-color-danger3-light: rgb(var(--o-red-4));
+  --o-color-danger4-light: rgb(var(--o-red-1));
+  --o-color-fill1: rgb(var(--o-mixedgray-2));
+  --o-color-fill2: rgb(var(--o-mixedgray-1));
+  --o-color-fill3: rgb(var(--o-mixedgray-6));
+  --o-color-control1: rgba(var(--o-mixedgray-10), 0.25);
+  --o-color-control2: rgba(var(--o-mixedgray-10), 0.6);
+  --o-color-control3: rgba(var(--o-mixedgray-10), 0.8);
+  --o-color-control4: rgba(var(--o-mixedgray-10), 0.1);
+  --o-color-control1-light: rgb(var(--o-mixedgray-3), 1);
+  --o-color-control2-light: rgb(var(--o-blue-6), 0.04);
+  --o-color-control3-light: rgb(var(--o-blue-6), 0.07);
+  --o-color-control4-light: rgb(var(--o-blue-6), 0.04);
+  --o-color-control-light: rgb(var(--o-mixedgray-1), 1);
+  --o-color-info1: rgba(var(--o-mixedgray-10), 1);
+  --o-color-info2: rgba(var(--o-mixedgray-10), 0.8);
+  --o-color-info3: rgba(var(--o-mixedgray-10), 0.6);
+  --o-color-info4: rgba(var(--o-mixedgray-10), 0.4);
+  --o-color-info1-inverse: rgba(var(--o-mixedgray-1), 1);
+  --o-color-info2-inverse: rgba(var(--o-mixedgray-1), 0.8);
+  --o-color-info3-inverse: rgba(var(--o-mixedgray-1), 0.6);
+  --o-color-info4-inverse: rgba(var(--o-mixedgray-1), 0.4);
+  --o-color-mask1: rgba(var(--o-mixedgray-10), 0.4);
+  --o-color-mask2: rgba(var(--o-mixedgray-1), 0.2);
+  --o-color-link1: rgba(var(--o-blue-6));
+  --o-color-link2: rgba(var(--o-blue-4));
+  --o-color-link3: rgba(var(--o-blue-7));
+  --o-color-link4: rgba(var(--o-blue-3));
+  --o-shadow-1: 0 3px 8px rgba(var(--o-mixedgray-9), 0.08);
+  --o-shadow-2: 0 4px 24px rgba(var(--o-mixedgray-9), 0.1);
+  --o-shadow-3: 0 8px 40px rgba(var(--o-mixedgray-9), 0.1);
+  --o-gap-1: 4px;
+  --o-gap-2: 8px;
+  --o-gap-3: 12px;
+  --o-gap-4: 16px;
+  --o-gap-5: 24px;
+  --o-gap-6: 32px;
+  --o-gap-7: 40px;
+  --o-gap-8: 48px;
+  --o-gap-9: 64px;
+  --o-gap-10: 72px;
+  --o-control_size-2xs: 14px;
+  --o-control_size-xs: 16px;
+  --o-control_size-s: 24px;
+  --o-control_size-m: 32px;
+  --o-control_size-l: 40px;
+  --o-control_size-xl: 48px;
+  --o-control_size-2xl: 56px;
+  --o-icon_size-xs: 16px;
+  --o-icon_size-s: 20px;
+  --o-icon_size-m: 24px;
+  --o-icon_size-l: 32px;
+  --o-icon_size-xl: 40px;
+  --o-icon_size-2xl: 48px;
+  --o-icon_size-3xl: 56px;
+  --o-icon_size-4xl: 64px;
+  --o-icon_size_control-xs: 16px;
+  --o-icon_size_control-s: 20px;
+  --o-icon_size_control-m: 24px;
+  --o-icon_size_control-l: 32px;
+  --o-icon_size_control-xl: 40px;
+  --o-font_size-display1: 56px;
+  --o-font_size-display2: 48px;
+  --o-font_size-display3: 40px;
+  --o-font_size-h1: 32px;
+  --o-font_size-h2: 24px;
+  --o-font_size-h3: 22px;
+  --o-font_size-h4: 20px;
+  --o-font_size-text1: 16px;
+  --o-font_size-text2: 18px;
+  --o-font_size-tip1: 14px;
+  --o-font_size-tip2: 12px;
+  --o-line_height-display1: 80px;
+  --o-line_height-display2: 64px;
+  --o-line_height-display3: 56px;
+  --o-line_height-h1: 44px;
+  --o-line_height-h2: 32px;
+  --o-line_height-h3: 30px;
+  --o-line_height-h4: 28px;
+  --o-line_height-text1: 24px;
+  --o-line_height-text2: 26px;
+  --o-line_height-tip1: 22px;
+  --o-line_height-tip2: 18px;
+  --o-radius-xs: 4px;
+  --o-radius-s: 8px;
+  --o-radius-m: 12px;
+  --o-radius-l: 16px;
+  --o-radius-xl: 24px;
+  --o-radius_control-xs: 4px;
+  --o-radius_control-s: 8px;
+  --o-radius_control-m: 12px;
+  --o-radius_control-l: 16px;
+  --o-duration-s: 200ms;
+  --o-duration-m1: 250ms;
+  --o-duration-m2: 300ms;
+  --o-duration-m3: 400ms;
+  --o-duration-l: 500ms;
+  --o-duration-xl: 1000ms;
+  --o-easing-linear: cubic-bezier(0, 0, 1, 1);
+  --o-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --o-easing-standard-in: cubic-bezier(0, 0, 0, 1);
+  --o-easing-standard-out: cubic-bezier(0.3, 0, 1, 1);
+  --o-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --o-easing-emphasized-in: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1);
+}
+[data-o-theme="dark"] {
+  --o-white: 255, 255, 255;
+  --o-black: 0, 0, 0;
+  --o-blue-1: 9, 28, 112;
+  --o-blue-2: 16, 43, 148;
+  --o-blue-3: 26, 60, 184;
+  --o-blue-4: 37, 80, 219;
+  --o-blue-5: 51, 102, 255;
+  --o-blue-6: 92, 135, 255;
+  --o-blue-7: 133, 167, 255;
+  --o-blue-8: 173, 198, 255;
+  --o-blue-9: 214, 227, 255;
+  --o-blue-10: 240, 245, 255;
+  --o-green-1: 0, 77, 42;
+  --o-green-2: 2, 102, 53;
+  --o-green-3: 10, 127, 66;
+  --o-green-4: 22, 152, 80;
+  --o-green-5: 36, 177, 95;
+  --o-green-6: 51, 193, 104;
+  --o-green-7: 90, 208, 131;
+  --o-green-8: 135, 224, 163;
+  --o-green-9: 185, 239, 200;
+  --o-green-10: 240, 255, 244;
+  --o-orange-1: 77, 24, 0;
+  --o-orange-2: 120, 42, 1;
+  --o-orange-3: 163, 68, 8;
+  --o-orange-4: 207, 97, 19;
+  --o-orange-5: 250, 130, 33;
+  --o-orange-6: 251, 143, 32;
+  --o-orange-7: 252, 174, 91;
+  --o-orange-8: 253, 202, 139;
+  --o-orange-9: 254, 227, 188;
+  --o-orange-10: 255, 248, 237;
+  --o-red-1: 77, 0, 17;
+  --o-red-2: 115, 3, 24;
+  --o-red-3: 153, 9, 31;
+  --o-red-4: 192, 17, 37;
+  --o-red-5: 230, 28, 43;
+  --o-red-6: 235, 35, 45;
+  --o-red-7: 240, 82, 85;
+  --o-red-8: 245, 132, 130;
+  --o-red-9: 250, 183, 180;
+  --o-red-10: 255, 234, 232;
+  --o-mixedgray-1: 0, 0, 0;
+  --o-mixedgray-2: 22, 22, 26;
+  --o-mixedgray-3: 28, 31, 35;
+  --o-mixedgray-4: 39, 41, 55;
+  --o-mixedgray-5: 107, 112, 117;
+  --o-mixedgray-6: 136, 141, 146;
+  --o-mixedgray-7: 167, 171, 176;
+  --o-mixedgray-8: 198, 202, 205;
+  --o-mixedgray-9: 245, 246, 248;
+  --o-mixedgray-10: 255, 255, 255;
+  --o-amber-1: 81, 36, 5;
+  --o-amber-2: 121, 61, 9;
+  --o-amber-3: 161, 89, 14;
+  --o-amber-4: 202, 122, 20;
+  --o-amber-5: 242, 158, 26;
+  --o-amber-6: 245, 182, 70;
+  --o-amber-7: 247, 205, 115;
+  --o-amber-8: 250, 224, 161;
+  --o-amber-9: 252, 241, 207;
+  --o-amber-10: 254, 250, 236;
+  --o-cyan-1: 1, 53, 61;
+  --o-cyan-2: 2, 81, 92;
+  --o-cyan-3: 4, 11, 123;
+  --o-cyan-4: 7, 141, 153;
+  --o-cyan-5: 10, 172, 184;
+  --o-cyan-6: 48, 190, 198;
+  --o-cyan-7: 92, 208, 212;
+  --o-cyan-8: 141, 225, 227;
+  --o-cyan-9: 195, 241, 241;
+  --o-cyan-10: 229, 248, 248;
+  --o-lime-1: 53, 70, 0;
+  --o-lime-2: 82, 105, 0;
+  --o-lime-3: 112, 141, 1;
+  --o-lime-4: 143, 176, 2;
+  --o-lime-5: 175, 211, 5;
+  --o-lime-6: 184, 220, 48;
+  --o-lime-7: 196, 229, 95;
+  --o-lime-8: 212, 237, 145;
+  --o-lime-9: 231, 246, 198;
+  --o-lime-10: 244, 251, 231;
+  --o-pink-1: 92, 3, 58;
+  --o-pink-2: 128, 8, 78;
+  --o-pink-3: 164, 15, 97;
+  --o-pink-4: 199, 25, 115;
+  --o-pink-5: 235, 36, 132;
+  --o-pink-6: 239, 77, 150;
+  --o-pink-7: 243, 120, 171;
+  --o-pink-8: 247, 163, 195;
+  --o-pink-9: 251, 208, 223;
+  --o-pink-10: 253, 237, 242;
+  --o-teal-1: 0, 60, 49;
+  --o-teal-2: 0, 90, 72;
+  --o-teal-3: 1, 119, 95;
+  --o-teal-4: 3, 149, 116;
+  --o-teal-5: 5, 179, 137;
+  --o-teal-6: 43, 194, 155;
+  --o-teal-7: 87, 209, 176;
+  --o-teal-8: 137, 225, 199;
+  --o-teal-9: 193, 240, 225;
+  --o-teal-10: 228, 247, 241;
+  --o-indigo-1: 23, 34, 101;
+  --o-indigo-2: 32, 46, 122;
+  --o-indigo-3: 41, 59, 142;
+  --o-indigo-4: 52, 73, 163;
+  --o-indigo-5: 64, 89, 183;
+  --o-indigo-6: 95, 118, 197;
+  --o-indigo-7: 129, 149, 212;
+  --o-indigo-8: 167, 183, 226;
+  --o-indigo-9: 209, 218, 241;
+  --o-indigo-10: 237, 240, 248;
+  --o-purple-1: 65, 12, 97;
+  --o-purple-2: 83, 18, 118;
+  --o-purple-3: 103, 25, 138;
+  --o-purple-4: 124, 33, 159;
+  --o-purple-5: 146, 43, 179;
+  --o-purple-6: 169, 76, 194;
+  --o-purple-7: 193, 114, 209;
+  --o-purple-8: 215, 156, 225;
+  --o-purple-9: 236, 203, 240;
+  --o-purple-10: 246, 234, 247;
+  --o-violet-1: 77, 0, 17;
+  --o-violet-2: 53, 23, 119;
+  --o-violet-3: 64, 31, 140;
+  --o-violet-4: 74, 40, 160;
+  --o-violet-5: 85, 50, 181;
+  --o-violet-6: 97, 62, 201;
+  --o-violet-7: 150, 130, 223;
+  --o-violet-8: 182, 169, 233;
+  --o-violet-9: 217, 210, 244;
+  --o-violet-10: 240, 237, 250;
+  --o-yellow-1: 84, 49, 0;
+  --o-yellow-2: 126, 80, 0;
+  --o-yellow-3: 168, 116, 1;
+  --o-yellow-4: 210, 156, 3;
+  --o-yellow-5: 252, 200, 6;
+  --o-yellow-6: 253, 217, 55;
+  --o-yellow-7: 253, 232, 105;
+  --o-yellow-8: 254, 243, 155;
+  --o-yellow-9: 254, 251, 205;
+  --o-yellow-10: 255, 253, 235;
+  --o-color-white: rgb(var(--o-white));
+  --o-color-black: rgb(var(--o-black));
+  --o-color-primary1: rgb(var(--o-blue-6));
+  --o-color-primary2: rgb(var(--o-blue-4));
+  --o-color-primary3: rgb(var(--o-blue-7));
+  --o-color-primary4: rgb(var(--o-blue-3));
+  --o-color-primary1-light: rgb(var(--o-blue-2));
+  --o-color-primary2-light: rgb(var(--o-blue-3));
+  --o-color-primary3-light: rgb(var(--o-blue-4));
+  --o-color-primary4-light: rgb(var(--o-blue-1));
+  --o-color-success1: rgb(var(--o-green-6));
+  --o-color-success2: rgb(var(--o-green-4));
+  --o-color-success3: rgb(var(--o-green-7));
+  --o-color-success4: rgb(var(--o-green-3));
+  --o-color-success1-light: rgb(var(--o-green-2));
+  --o-color-success2-light: rgb(var(--o-green-3));
+  --o-color-success3-light: rgb(var(--o-green-4));
+  --o-color-success4-light: rgb(var(--o-green-1));
+  --o-color-warning1: rgb(var(--o-orange-6));
+  --o-color-warning2: rgb(var(--o-orange-4));
+  --o-color-warning3: rgb(var(--o-orange-7));
+  --o-color-warning4: rgb(var(--o-orange-3));
+  --o-color-warning1-light: rgb(var(--o-orange-2));
+  --o-color-warning2-light: rgb(var(--o-orange-3));
+  --o-color-warning3-light: rgb(var(--o-orange-4));
+  --o-color-warning4-light: rgb(var(--o-orange-1));
+  --o-color-danger1: rgb(var(--o-red-6));
+  --o-color-danger2: rgb(var(--o-red-4));
+  --o-color-danger3: rgb(var(--o-red-7));
+  --o-color-danger4: rgb(var(--o-red-3));
+  --o-color-danger1-light: rgb(var(--o-red-2));
+  --o-color-danger2-light: rgb(var(--o-red-3));
+  --o-color-danger3-light: rgb(var(--o-red-4));
+  --o-color-danger4-light: rgb(var(--o-red-1));
+  --o-color-fill1: rgb(var(--o-mixedgray-2));
+  --o-color-fill2: rgb(var(--o-mixedgray-3));
+  --o-color-fill3: rgb(var(--o-mixedgray-5));
+  --o-color-control1: rgba(var(--o-mixedgray-10), 0.25);
+  --o-color-control2: rgba(var(--o-mixedgray-10), 0.6);
+  --o-color-control3: rgba(var(--o-mixedgray-10), 0.8);
+  --o-color-control4: rgba(var(--o-mixedgray-10), 0.15);
+  --o-color-control1-light: rgb(var(--o-mixedgray-4), 1);
+  --o-color-control2-light: rgb(var(--o-blue-5), 0.1);
+  --o-color-control3-light: rgb(var(--o-blue-5), 0.15);
+  --o-color-control4-light: rgb(var(--o-blue-5), 0.1);
+  --o-color-control-light: rgb(var(--o-mixedgray-3), 1);
+  --o-color-info1: rgba(var(--o-mixedgray-10), 1);
+  --o-color-info2: rgba(var(--o-mixedgray-10), 0.8);
+  --o-color-info3: rgba(var(--o-mixedgray-10), 0.6);
+  --o-color-info4: rgba(var(--o-mixedgray-10), 0.4);
+  --o-color-info1-inverse: rgba(var(--o-mixedgray-1), 1);
+  --o-color-info2-inverse: rgba(var(--o-mixedgray-1), 0.8);
+  --o-color-info3-inverse: rgba(var(--o-mixedgray-1), 0.6);
+  --o-color-info4-inverse: rgba(var(--o-mixedgray-1), 0.4);
+  --o-color-mask1: rgba(var(--o-mixedgray-1), 0.4);
+  --o-color-mask2: rgba(var(--o-mixedgray-4), 0.2);
+  --o-color-link1: rgba(var(--o-blue-6));
+  --o-color-link2: rgba(var(--o-blue-4));
+  --o-color-link3: rgba(var(--o-blue-7));
+  --o-color-link4: rgba(var(--o-blue-3));
+  --o-shadow-1: 0 3px 8px rgba(var(--o-mixedgray-1), 0.08);
+  --o-shadow-2: 0 4px 24px rgba(var(--o-mixedgray-1), 0.1);
+  --o-shadow-3: 0 8px 40px rgba(var(--o-mixedgray-1), 0.1);
+  --o-gap-1: 4px;
+  --o-gap-2: 8px;
+  --o-gap-3: 12px;
+  --o-gap-4: 16px;
+  --o-gap-5: 24px;
+  --o-gap-6: 32px;
+  --o-gap-7: 40px;
+  --o-gap-8: 48px;
+  --o-gap-9: 64px;
+  --o-gap-10: 72px;
+  --o-control_size-2xs: 14px;
+  --o-control_size-xs: 16px;
+  --o-control_size-s: 24px;
+  --o-control_size-m: 32px;
+  --o-control_size-l: 40px;
+  --o-control_size-xl: 48px;
+  --o-control_size-2xl: 56px;
+  --o-icon_size-xs: 16px;
+  --o-icon_size-s: 20px;
+  --o-icon_size-m: 24px;
+  --o-icon_size-l: 32px;
+  --o-icon_size-xl: 40px;
+  --o-icon_size-2xl: 48px;
+  --o-icon_size-3xl: 56px;
+  --o-icon_size-4xl: 64px;
+  --o-icon_size_control-xs: 16px;
+  --o-icon_size_control-s: 20px;
+  --o-icon_size_control-m: 24px;
+  --o-icon_size_control-l: 32px;
+  --o-icon_size_control-xl: 40px;
+  --o-font_size-display1: 56px;
+  --o-font_size-display2: 48px;
+  --o-font_size-display3: 40px;
+  --o-font_size-h1: 32px;
+  --o-font_size-h2: 24px;
+  --o-font_size-h3: 22px;
+  --o-font_size-h4: 20px;
+  --o-font_size-text1: 16px;
+  --o-font_size-text2: 18px;
+  --o-font_size-tip1: 14px;
+  --o-font_size-tip2: 12px;
+  --o-line_height-display1: 80px;
+  --o-line_height-display2: 64px;
+  --o-line_height-display3: 56px;
+  --o-line_height-h1: 44px;
+  --o-line_height-h2: 32px;
+  --o-line_height-h3: 30px;
+  --o-line_height-h4: 28px;
+  --o-line_height-text1: 24px;
+  --o-line_height-text2: 26x;
+  --o-line_height-tip1: 22px;
+  --o-line_height-tip2: 18px;
+  --o-radius-xs: 4px;
+  --o-radius-s: 8px;
+  --o-radius-m: 12px;
+  --o-radius-l: 16px;
+  --o-radius-xl: 24px;
+  --o-radius_control-xs: 4px;
+  --o-radius_control-s: 8px;
+  --o-radius_control-m: 12px;
+  --o-radius_control-l: 16px;
+  --o-duration-s: 200ms;
+  --o-duration-m1: 250ms;
+  --o-duration-m2: 300ms;
+  --o-duration-m3: 400ms;
+  --o-duration-l: 500ms;
+  --o-duration-xl: 1000ms;
+  --o-easing-linear: cubic-bezier(0, 0, 1, 1);
+  --o-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --o-easing-standard-in: cubic-bezier(0, 0, 0, 1);
+  --o-easing-standard-out: cubic-bezier(0.3, 0, 1, 1);
+  --o-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --o-easing-emphasized-in: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1);
+}
diff --git a/static/js/cookie-notice.js b/static/js/cookie-notice.js
new file mode 100644
index 0000000000000000000000000000000000000000..62a4f50c14d4be116cbbc710bf67ce6d58e46384
--- /dev/null
+++ b/static/js/cookie-notice.js
@@ -0,0 +1,424 @@
+$(function () {
+  // cookie管理
+  const body = $("body");
+  const pathname = window.location.pathname;
+  const isEn = pathname.includes("/en/");
+  const COOKIE_VERSION = "20241230";
+  const COOKIE_DOMAIN = ".opengauss.org";
+  const theme = localStorage.getItem("opengauss-theme") || "light";
+  // 弹窗
+  const ODialog = (function () {
+    let elemDialog;
+
+    // 创建按钮
+    const createButtons = (btns) => {
+      let btnTemp = "";
+      btns.forEach((item) => {
+        btnTemp += `<button class="o-button ${item.color} ${item.id}">${item.label}</button>`;
+      });
+      return btnTemp;
+    };
+    // 按钮事件
+    const bindBtnsEvent = (btns) => {
+      btns.forEach((item) => {
+        const btn = elemDialog.querySelector(`.${item.id}`);
+        btn.addEventListener("click", (e) => {
+          hide();
+          item.onClick();
+        });
+      });
+    };
+
+    // 初始化事件
+    const initEvents = (shadeClose, closable) => {
+      // 点击遮罩
+      elemDialog.addEventListener("click", (e) => {
+        if (shadeClose && e.target.className.includes("o-layer-mask")) {
+          hide();
+        }
+      });
+      // 点击关闭按钮
+      if (closable) {
+        const closed = elemDialog.querySelector(".o-dialog-closed");
+        closed.addEventListener("click", hide);
+      }
+    };
+
+    // 显示对话框
+    const createDialog = (options) => {
+      const {
+        title,
+        size = "medium",
+        closable = true,
+        content,
+        dlgActions,
+        shadeClose = true,
+      } = options;
+
+      const isBtns = dlgActions && dlgActions.length > 0;
+
+      const dom = `
+          <div class="o-layer-mask"></div>
+          <div class="o-dialog o-dialog-${size}">
+            <div class="o-dlg-main" data-o-theme="${theme}">
+              <div class="o-dlg-header">
+                ${title}
+                ${closable ? '<em class="o-dialog-closed"></em>' : ""}
+              </div>
+              <div class="o-scroller-container">${content}</div>
+              ${
+                isBtns
+                  ? `<div class="manage-action">${createButtons(
+                      dlgActions
+                    )}</div>`
+                  : ""
+              }
+            </div>
+          </div>`;
+
+      const newDialog = document.createElement("div");
+      newDialog.classList.add("o-layer-dialog");
+      newDialog.innerHTML = dom;
+      document.body.appendChild(newDialog);
+
+      elemDialog = newDialog;
+
+      if (isBtns) {
+        bindBtnsEvent(dlgActions);
+      }
+      initEvents(shadeClose, closable);
+    };
+
+    // 隐藏
+    const hide = () => {
+      if (elemDialog) {
+        elemDialog.remove();
+        elemDialog = null;
+      }
+    };
+
+    return {
+      show: createDialog,
+      hide,
+    };
+  })();
+
+  const cookieNotice = {
+    COOKEY_KEY: "agreed-cookiepolicy",
+    COOKIE_AGREED_STATUS: {
+      NOT_SIGNED: "0", // 未签署
+      ALL_AGREED: "1", // 同意所有cookie
+      NECCESSARY_AGREED: "2", // 仅同意必要cookie
+    },
+    locale: {
+      title: !isEn
+        ? "openGauss社区重视您的隐私"
+        : "openGauss Community Respects Your Privacy",
+      desc: !isEn
+        ? "我们在本网站上使用Cookie，包括第三方Cookie，以便网站正常运行和提升浏览体验。单击“全部接受”即表示您同意这些目的；单击“全部拒绝”即表示您拒绝非必要的Cookie；单击“管理Cookie”以选择接受或拒绝某些Cookie。需要了解更多信息或随时更改您的 Cookie 首选项，请参阅我们的 "
+        : 'This site uses cookies from us and our partners to improve your browsing experience and make the site work properly. By clicking "Accept All", you consent to the use of cookies. By clicking "Reject All", you disable the use of unnecessary cookies. You can manage your cookie settings by clicking "Manage Cookies". For more information or to change your cookie settings, please refer to our',
+      cookie: !isEn ? "《关于cookies》。" : "About Cookies.",
+      cookieHref: !isEn ? "/cookies" : "/cookies/en",
+      action: [
+        {
+          btn: "全部接受",
+          btnEn: "Accept All",
+          type: "all",
+        },
+        {
+          btn: "全部拒绝",
+          btnEn: "Reject All",
+          type: "refuse",
+        },
+        {
+          btn: " 管理Cookie ",
+          btnEn: " Manage Cookies ",
+          type: "manage",
+        },
+      ],
+      manageTitle: !isEn ? "管理Cookie" : "Manage Cookies",
+      necessaryTitle: !isEn ? "必要Cookie" : "Strictly Necessary Cookies",
+      necessaryDesc: !isEn
+        ? "这些Cookie是网站正常工作所必需的，不能在我们的系统中关闭。它们通常仅是为了响应您的服务请求而设置的，例如登录或填写表单。您可以将浏览器设置为阻止Cookie来拒绝这些Cookie，但网站的某些部分将无法正常工作。这些Cookie不存储任何个人身份信息。"
+        : "These cookies are necessary for the site to work properly and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as logging in or filling in forms. You can set the browser to block these cookies, but that can make parts of the site not work. These cookies do not store any personally identifiable information.",
+      statisticsTitle: !isEn ? "统计分析Cookie" : "Analytics Cookies",
+      statisticsDesc: !isEn
+        ? "我们将根据您的同意使用和处理这些非必要Cookie。这些Cookie允许我们获得摘要统计数据，例如，统计访问量和访问者来源，便于我们改进我们的网站。"
+        : "We will use these cookies only with your consent. These cookies help us make improvements by collecting statistics such as the number of visits and traffic sources.",
+      enabled: !isEn ? "始终启用" : "Always active",
+      manageAction: [
+        {
+          btn: "保存并接受",
+          btnEn: "Save and Accept",
+          type: "save",
+        },
+        {
+          btn: "全部接受",
+          btnEn: "Accept All",
+          type: "allow-all",
+        },
+      ],
+    },
+    isNoticeVisible: true,
+    // setCookie 设置cookie
+    disableOA() {
+      import("./modules/analytics.js")
+        .then(({ disableOA }) => disableOA())
+        .catch(() => {})
+        .finally(() => {
+          const prefix = "oa-openGauss";
+          for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            if (key.startsWith(prefix)) {
+              localStorage.removeItem(key);
+            }
+          }
+        });
+    },
+    enableOA() {
+      import("./modules/analytics.js")
+        .then(({ enableOA, reportPV }) => {
+          enableOA();
+          reportPV();
+        })
+        .catch(() => {});
+    },
+    setCustomCookie: (cname, cvalue, day = 1) => {
+      let expires = new Date(Date.now() + day * 864e5);
+      if (expires) {
+        expires = expires.toUTCString();
+      }
+      document.cookie = `${cname}=${cvalue};domain=${COOKIE_DOMAIN};expires=${expires};path=/`;
+    },
+    // 获取cookie值
+    getCookieByKey: (key) => {
+      const cookieArr = document.cookie.split("; ");
+      for (let i = 0, len = cookieArr.length; i < len; i++) {
+        const item = cookieArr[i];
+        const rlt = item.split("=");
+        if (rlt[0] === key) {
+          return rlt[1];
+        }
+      }
+    },
+    // 是否未签署
+    isNotSigned: () => {
+      return (
+        cookieNotice.getUserCookieStatus() ===
+        cookieNotice.COOKIE_AGREED_STATUS.NOT_SIGNED
+      );
+    },
+    // 是否同意所有
+    isAllAgreed: () => {
+      return (
+        cookieNotice.getUserCookieStatus() ===
+        cookieNotice.COOKIE_AGREED_STATUS.ALL_AGREED
+      );
+    },
+    // 弹框 是否选中统计分析Cookie
+    isManageAgreed: () => {
+      return $(".statistics-switch").prop("checked");
+    },
+    // 显示/隐藏cookie提示
+    toggleNoticeVisible: (val) => {
+      const cookieMain = $(".cookie-notice");
+      val ? cookieMain.show() : cookieMain.hide();
+    },
+    // 获取cookie状态
+    getUserCookieStatus: () => {
+      const { COOKIE_AGREED_STATUS, COOKEY_KEY } = cookieNotice;
+      const cookieVal = cookieNotice.getCookieByKey(COOKEY_KEY) ?? "0";
+
+      const cookieStatusVal = cookieVal[0];
+      const cookieVersionVal = cookieVal.slice(1);
+
+      if (cookieVersionVal !== COOKIE_VERSION) {
+        return COOKIE_AGREED_STATUS.NOT_SIGNED;
+      }
+
+      if (cookieStatusVal === COOKIE_AGREED_STATUS.ALL_AGREED) {
+        return COOKIE_AGREED_STATUS.ALL_AGREED;
+      } else if (cookieStatusVal === COOKIE_AGREED_STATUS.NECCESSARY_AGREED) {
+        return COOKIE_AGREED_STATUS.NECCESSARY_AGREED;
+      } else {
+        return COOKIE_AGREED_STATUS.NOT_SIGNED;
+      }
+    },
+    // cookie提示内容
+    getCookieContent: () => {
+      return `
+<div class="cookie-notice" data-o-theme="${theme}">
+  <div class="cookie-notice-content">
+    <div class="content-wrapper cookie-notice-wrap">
+      <div class="cookie-notice-left">
+        <p class="cookie-title">${cookieNotice.locale.title}</p>
+        <p class="cookie-desc">
+          ${cookieNotice.locale.desc}
+          <a href="${
+            cookieNotice.locale.cookieHref
+          }" rel="noopener noreferrer" target="_blank">${
+        cookieNotice.locale.cookie
+      }</a>
+        </p>
+      </div>
+      <div class="cookie-notice-right">
+        ${cookieNotice.locale.action
+          .map((item) => {
+            return `<button class="o-button ${item.type}">${
+              isEn ? item.btnEn : item.btn
+            }</button>`;
+          })
+          .join("")}
+      </div>
+      <em class="cookie-close"></em>
+    </div>
+  </div>
+</div>`;
+    },
+    // 弹框内容
+    getManageContent: () => {
+      return `
+<div class="manage-content">
+  <div class="manage-item">
+    <div class="item-header">
+      <span class="item-title">${cookieNotice.locale.necessaryTitle}</span>
+      <span class="item-extra">${cookieNotice.locale.enabled}</span>
+    </div>
+    <p class="item-detail">
+      ${cookieNotice.locale.necessaryDesc}
+    </p>
+  </div>
+  <div class="manage-item">
+    <div class="item-header">
+      <span class="item-title">${cookieNotice.locale.statisticsTitle}</span>
+      <span class="item-extra">
+        <input type="checkbox" class="statistics-switch" is="o-switch">
+      </span>
+    </div>
+    <p class="item-detail">
+      ${cookieNotice.locale.statisticsDesc}
+    </p>
+  </div>
+</div>`;
+    },
+    // 用户同意所有cookie
+    acceptAll: () => {
+      // getBaiduSensor();
+      const {
+        setCustomCookie,
+        COOKEY_KEY,
+        COOKIE_AGREED_STATUS,
+        toggleNoticeVisible,
+        enableOA,
+      } = cookieNotice;
+      setCustomCookie(
+        COOKEY_KEY,
+        `${COOKIE_AGREED_STATUS.ALL_AGREED}${COOKIE_VERSION}`,
+        180
+      );
+      toggleNoticeVisible(false);
+      enableOA();
+    },
+    // 用户拒绝所有cookie，即仅同意必要cookie
+    rejectAll: () => {
+      const {
+        setCustomCookie,
+        COOKEY_KEY,
+        COOKIE_AGREED_STATUS,
+        toggleNoticeVisible,
+        disableOA,
+      } = cookieNotice;
+      setCustomCookie(
+        COOKEY_KEY,
+        `${COOKIE_AGREED_STATUS.NECCESSARY_AGREED}${COOKIE_VERSION}`,
+        180
+      );
+      toggleNoticeVisible(false);
+      disableOA();
+    },
+    removeNotice() {
+      $(".cookie-notice").remove();
+      document.removeEventListener("themechange", this.onThemeChange);
+    },
+    bindEvents: () => {
+      $(".cookie-notice-right button").on("click", function () {
+        const {
+          locale,
+          getManageContent,
+          isManageAgreed,
+          acceptAll,
+          rejectAll,
+          removeNotice,
+        } = cookieNotice;
+        // 同意
+        if ($(this).hasClass("all")) {
+          acceptAll();
+          removeNotice();
+        }
+        // 拒绝
+        if ($(this).hasClass("refuse")) {
+          rejectAll();
+          removeNotice();
+        }
+        // 管理cookie
+        if ($(this).hasClass("manage")) {
+          // 加载弹窗
+          ODialog &&
+            ODialog.show({
+              title: locale.manageTitle,
+              content: getManageContent(),
+              dlgActions: [
+                {
+                  id: "save",
+                  label: isEn
+                    ? locale.manageAction[0].btnEn
+                    : locale.manageAction[0].btn,
+                  color: "primary",
+                  variant: "outline",
+                  onClick: () => {
+                    isManageAgreed() ? acceptAll() : rejectAll();
+                    removeNotice();
+                  },
+                },
+                {
+                  id: "allow-all",
+                  label: isEn
+                    ? locale.manageAction[1].btnEn
+                    : locale.manageAction[1].btn,
+                  color: "primary",
+                  variant: "outline",
+                  onClick: () => {
+                    acceptAll();
+                    $(".statistics-switch").prop("checked", true);
+                    removeNotice();
+                  },
+                },
+              ],
+            });
+        }
+      });
+
+      // 隐藏cookie
+      $(".cookie-close").on("click", function () {
+        cookieNotice.toggleNoticeVisible(false);
+      });
+    },
+    onThemeChange({ detail }) {
+      $(".cookie-notice")?.attr("data-o-theme", detail || "light");
+    },
+    init() {
+      document.addEventListener("themechange", this.onThemeChange);
+      if (this.isNotSigned()) {
+        body.append(this.getCookieContent());
+        this.bindEvents();
+        this.toggleNoticeVisible(true);
+      }
+      if (this.isAllAgreed()) {
+        this.acceptAll();
+      } else {
+        this.disableOA();
+      }
+    },
+  };
+  cookieNotice.init();
+});
diff --git a/static/js/docdetail.js b/static/js/docdetail.js
index 0286e9538e605103a6ef7ae033245bd915c28496..4a70fe427395612f0d276763c22a7b46c4269e51 100644
--- a/static/js/docdetail.js
+++ b/static/js/docdetail.js
@@ -82,10 +82,10 @@ $(function ($) {
     stars: 0,
   };
   evaluateParams.lang = lang;
-  var versionStr = urlArr.length >= 4 ? urlArr[3].replace('-lite', '') : '';
-  $('#version-select .option p,#menu-top-mobile .option>p').each(function () {
-    if ($(this).children('.version-name').html() === versionStr) {
-      $(this).addClass('active');
+  var versionStr = urlArr.length >= 4 ? urlArr[3].replace("-lite", "") : "";
+  $("#version-select .option p,#menu-top-mobile .option>p").each(function () {
+    if ($(this).children(".version-name").html() === versionStr) {
+      $(this).addClass("active");
     }
   });
   if (evaluateParams.lang === "en") {
@@ -218,11 +218,17 @@ $(function ($) {
           $(this).addClass("dark").removeClass("light");
           localStorage.setItem("opengauss-theme", "dark");
           _body.addClass("dark").removeClass("light");
+          document.dispatchEvent(
+            new CustomEvent("themechange", { detail: "dark" })
+          );
         } else {
           $(".nav-menu a .logo-mobile").removeClass("dark");
           $(this).addClass("light").removeClass("dark");
           localStorage.setItem("opengauss-theme", "light");
           _body.addClass("light").removeClass("dark");
+          document.dispatchEvent(
+            new CustomEvent("themechange", { detail: "light" })
+          );
         }
       });
     })();
@@ -333,8 +339,8 @@ $(function ($) {
     });
     // 查看该版本是否有轻量版，有轻量版才显示切换按钮
     (function switchVersionHidden() {
-      if(location.pathname.split("/").length < 4){
-        return ;
+      if (location.pathname.split("/").length < 4) {
+        return;
       }
       const version = location.pathname.split("/")[3].split("-lite")[0];
       const versionData = lang === "zh" ? versionObjZh : versionObjEn;
@@ -420,7 +426,7 @@ $(function ($) {
     const mutation = new MutationObserver(addNavTitle);
     const config = { childList: true, subtree: true };
     const targetNode = document.getElementById("docstreeview");
-    if(targetNode){
+    if (targetNode) {
       mutation.observe(targetNode, config);
     }
     // 给较长的导航栏文字增加title end
diff --git a/static/js/docsearch.js b/static/js/docsearch.js
index 054078583f06e8cb06a54f1009dc01c4858c557d..a38671f83bef3510ba11069d0bc4f6d3187322ee 100644
--- a/static/js/docsearch.js
+++ b/static/js/docsearch.js
@@ -1,14 +1,4 @@
 $(async function ($) {
-  const { enableOA, reportPV, oaReport, reportPerformance, OpenEventKeys } =
-    await import("./modules/analytics.js");
-  const cookieAgreed = /agreed-cookiepolicy=([0-9]+);?/
-    .exec(document.cookie)?.[1]
-    ?.startsWith("1");
-  if (cookieAgreed) {
-    enableOA();
-    reportPV();
-    reportPerformance();
-  }
   var keyword = "";
   var selectedVersion = location.pathname.split("/")[3];
   const lang = location.href.split("/")[3];
@@ -22,9 +12,9 @@ $(async function ($) {
         page: page,
         pageSize: 10,
       };
-      if (cookieAgreed) {
-        oaReport("input", postData, OpenEventKeys.SEARCH);
-      }
+      import("./modules/analytics")
+        .then(({ reportSearch }) => reportSearch(postData))
+        .catch(() => {});
       $.ajax({
         type: "POST",
         url: "/api-search/search/sort/docs",
@@ -208,7 +198,7 @@ $(async function ($) {
   });
   var versionText = lang === "zh" ? "版本" : "Version";
   var totalAmount = 0;
-  
+
   var currentScreen = document.body.clientWidth;
   if (currentScreen <= 1000) {
     pageCount = 3;
@@ -239,16 +229,25 @@ $(async function ($) {
       insertOptionElement += `<div class="search-version-select-option" data-version="${key}">${key} (${v.state})</div>`;
       insertMobileOptionElement += `<div class="search-version-select-option-mb" data-version="${key}">${key} (${v.state})</div>`;
     });
-    $("#result-container .search-version-select-option-panel").append(insertOptionElement);
-    $(".search-version-select-option-panel-mb").append(insertMobileOptionElement);
-    
+    $("#result-container .search-version-select-option-panel").append(
+      insertOptionElement
+    );
+    $(".search-version-select-option-panel-mb").append(
+      insertMobileOptionElement
+    );
+
     selectedVersion = "latest";
-    $.each($("#result-container .search-version-select-option"), function (_, e) {
-      if (e.dataset.version === selectedVersion) {
-        e.classList.add("search-version-select-option-active");
-        $("#result-container .search-header .search-version-select .version").text(e.dataset.version);
+    $.each(
+      $("#result-container .search-version-select-option"),
+      function (_, e) {
+        if (e.dataset.version === selectedVersion) {
+          e.classList.add("search-version-select-option-active");
+          $(
+            "#result-container .search-header .search-version-select .version"
+          ).text(e.dataset.version);
+        }
       }
-    });
+    );
 
     $.each($(".search-version-select-option-mb"), function (_, e) {
       if (e.dataset.version === selectedVersion) {
@@ -260,20 +259,28 @@ $(async function ($) {
     $("#result-container .search-version-select").click(function (e) {
       const el = $("#result-container .search-version-select-option-panel");
       if (el.hasClass("search-version-select-option-panel-opened")) {
-        $("#result-container .search-version-select").removeClass("search-version-select-opened");
+        $("#result-container .search-version-select").removeClass(
+          "search-version-select-opened"
+        );
         el.removeClass("search-version-select-option-panel-opened");
       } else {
-        $("#result-container .search-version-select").addClass("search-version-select-opened");
+        $("#result-container .search-version-select").addClass(
+          "search-version-select-opened"
+        );
         el.addClass("search-version-select-option-panel-opened");
       }
-  
+
       $(document).one("click", function () {
-        $("#result-container .search-version-select").removeClass("search-version-select-opened");
-        $("#result-container .search-version-select-option-panel").removeClass("search-version-select-option-panel-opened");
+        $("#result-container .search-version-select").removeClass(
+          "search-version-select-opened"
+        );
+        $("#result-container .search-version-select-option-panel").removeClass(
+          "search-version-select-option-panel-opened"
+        );
       });
       e.stopPropagation();
     });
-  
+
     $(".search-version-select-mb").click(function (e) {
       const el = $(".search-version-select-option-panel-mb");
       if (el.css("display") === "none") {
@@ -281,38 +288,55 @@ $(async function ($) {
       } else {
         el.css("display", "none");
       }
-  
+
       $(document).one("click", function () {
         $(".search-version-select-option-panel-mb").css("display", "none");
       });
       e.stopPropagation();
     });
-  
+
     $("#result-container .search-version-select-option").click(function () {
       $.each($("#result-container .search-version-select-option"), (_, e) => {
         e.classList.remove("search-version-select-option-active");
       });
       selectedVersion = this.dataset.version;
       this.classList.add("search-version-select-option-active");
-  
+
       $.each($(".search-version-select-option-mb"), (_, e) => {
         e.classList.remove("search-version-select-option-mb-active");
         if (e.innerText === this.dataset.version) {
           e.classList.add("search-version-select-option-mb-active");
         }
       });
-  
+
       if (this.dataset.version) {
-        $("#result-container .search-version-select .version").text(this.dataset.version);
+        $("#result-container .search-version-select .version").text(
+          this.dataset.version
+        );
         $(".search-version-select-mb .version").text(this.dataset.version);
-        $("#result-container .search-version-select .prefix-text").css("display", "inline-block");
-        $(".search-version-select-mb .prefix-text").css("display", "inline-block");
+        $("#result-container .search-version-select .prefix-text").css(
+          "display",
+          "inline-block"
+        );
+        $(".search-version-select-mb .prefix-text").css(
+          "display",
+          "inline-block"
+        );
       } else {
-        $("#result-container .search-version-select .version").text(lang === 'zh' ? "全部版本" : "All");
-        $(".search-version-select-mb .version").text(lang === 'zh' ? "全部版本" : "All");
-        $("#result-container .search-version-select .prefix-text").css("display", "none");
+        $("#result-container .search-version-select .version").text(
+          lang === "zh" ? "全部版本" : "All"
+        );
+        $(".search-version-select-mb .version").text(
+          lang === "zh" ? "全部版本" : "All"
+        );
+        $("#result-container .search-version-select .prefix-text").css(
+          "display",
+          "none"
+        );
         $(".search-version-select-mb .prefix-text").css("display", "none");
-        $(".search-version-select-option-mb:first").addClass("search-version-select-option-mb-active");
+        $(".search-version-select-option-mb:first").addClass(
+          "search-version-select-option-mb-active"
+        );
       }
 
       const keyword = $(".search-header .search-text").val();
@@ -320,33 +344,52 @@ $(async function ($) {
         searchMethods.search(keyword, 1, "#baseof-pagination");
       }
     });
-  
+
     $(".search-version-select-option-mb").click(function () {
       $.each($(".search-version-select-option-mb"), (_, e) => {
         e.classList.remove("search-version-select-option-mb-active");
       });
       selectedVersion = this.dataset.version;
       this.classList.add("search-version-select-option-mb-active");
-  
+
       $.each($("#result-container .search-version-select-option"), (_, e) => {
         e.classList.remove("search-version-select-option-active");
         if (e.dataset.version === this.dataset.version) {
           e.classList.add("search-version-select-option-active");
-          $("#result-container .search-version-select .version").text(e.innerText);
+          $("#result-container .search-version-select .version").text(
+            e.innerText
+          );
         }
       });
-  
-      if (this.dataset.version) { 
-        $("#result-container .search-version-select .version").text(this.dataset.version);
+
+      if (this.dataset.version) {
+        $("#result-container .search-version-select .version").text(
+          this.dataset.version
+        );
         $(".search-version-select-mb .version").text(this.dataset.version);
-        $("#result-container .search-version-select .prefix-text").css("display", "inline-block");
-        $(".search-version-select-mb .prefix-text").css("display", "inline-block");
+        $("#result-container .search-version-select .prefix-text").css(
+          "display",
+          "inline-block"
+        );
+        $(".search-version-select-mb .prefix-text").css(
+          "display",
+          "inline-block"
+        );
       } else {
-        $("#result-container .search-version-select .version").text(lang === 'zh' ? "全部版本" : "All");
-        $(".search-version-select-mb .version").text(lang === 'zh' ? "全部版本" : "All");
-        $("#result-container .search-version-select .prefix-text").css("display", "none");
+        $("#result-container .search-version-select .version").text(
+          lang === "zh" ? "全部版本" : "All"
+        );
+        $(".search-version-select-mb .version").text(
+          lang === "zh" ? "全部版本" : "All"
+        );
+        $("#result-container .search-version-select .prefix-text").css(
+          "display",
+          "none"
+        );
         $(".search-version-select-mb .prefix-text").css("display", "none");
-        $("#result-container .search-version-select-option:first").addClass("search-version-select-option-active");
+        $("#result-container .search-version-select-option:first").addClass(
+          "search-version-select-option-active"
+        );
       }
 
       const keyword = $(".search-mobile").find("input").val();
@@ -354,6 +397,5 @@ $(async function ($) {
         searchMethods.search(keyword, 1, "#pagination");
       }
     });
-
   }
 });
diff --git a/static/js/modules/analytics.js b/static/js/modules/analytics.js
index bcb233aa5705724b4cfc5acfcf77b223e9cf6678..8199e11b8d71872bda17559479005203a8fe7281 100644
--- a/static/js/modules/analytics.js
+++ b/static/js/modules/analytics.js
@@ -1,76 +1,83 @@
-let eventBuffer;
-const MAX_BUFFER_SIZE = 10;
+import {
+  OpenAnalytics,
+  OpenEventKeys,
+  getClientInfo,
+} from "https://unpkg.com/@opensig/open-analytics@0.0.9/dist/open-analytics.mjs";
 
-export const OpenEventKeys = { DOCS: "docs", SEARCH: "search_docs" };
-export let oa;
-let oaEnabled = false;
-let importFailed = false;
+const COOKIE_AGREED_STATUS = {
+  NOT_SIGNED: "0", // 未签署
+  ALL_AGREED: "1", // 同意所有cookie
+  NECCESSARY_AGREED: "2", // 仅同意必要cookie
+};
+const COOKIE_VERSION = "20241230";
 
-const load = (async function () {
-  try {
-    const OA = await import(
-      "https://unpkg.com/@opensig/open-analytics@0.0.9/dist/open-analytics.mjs"
-    );
-    oa = new OA.OpenAnalytics({
-      appKey: "openGauss",
-      request: (data) => {
-        fetch("/api-dsapi/query/track/opengauss", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json; charset=utf-8",
-          },
-          body: JSON.stringify(data),
-        }).catch(() => ({}));
-      },
-    });
-    Object.assign(OpenEventKeys, OA.OpenEventKeys);
-    oa.setHeader(OA.getClientInfo());
-    oa.enableReporting(oaEnabled);
-    eventBuffer?.forEach((item) => {
-      oaReport(item.event, item.eventData, item.$service, item.options);
-    });
-  } catch {
-    importFailed = true;
-  } finally {
-    eventBuffer = null;
+const getUserCookieStatus = () => {
+  const cookieVal = document.cookie.match(/agreed-cookiepolicy=([^;]+);?/)?.[1];
+  if (!cookieVal) return;
+
+  const cookieStatusVal = cookieVal[0];
+  const cookieVersionVal = cookieVal.slice(1);
+
+  if (cookieVersionVal !== COOKIE_VERSION) {
+    return COOKIE_AGREED_STATUS.NOT_SIGNED;
   }
-})();
 
-export const enableOA = () => {
-  if (importFailed) {
-    return;
+  if (cookieStatusVal === COOKIE_AGREED_STATUS.ALL_AGREED) {
+    return COOKIE_AGREED_STATUS.ALL_AGREED;
+  } else if (cookieStatusVal === COOKIE_AGREED_STATUS.NECCESSARY_AGREED) {
+    return COOKIE_AGREED_STATUS.NECCESSARY_AGREED;
+  } else {
+    return COOKIE_AGREED_STATUS.NOT_SIGNED;
   }
-  if (!oa) {
-    oaEnabled = true;
+};
+
+const oa = new OpenAnalytics({
+  appKey: "openGauss",
+  request: (data) => {
+    if (getUserCookieStatus() !== COOKIE_AGREED_STATUS.ALL_AGREED) {
+      disableOA();
+      [
+        "oa-openGauss-events",
+        "oa-openGauss-client",
+        "oa-openGauss-session",
+      ].forEach((key) => localStorage.removeItem(key));
+      return;
+    }
+    fetch("/api-dsapi/query/track/opengauss", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json; charset=utf-8",
+      },
+      body: JSON.stringify(data),
+    }).catch(() => ({}));
+  },
+});
+
+let reportPerfCount = 0;
+
+export const enableOA = () => {
+  oa.setHeader(getClientInfo());
+  oa.enableReporting(true);
+  if (reportPerfCount >= 1) {
     return;
   }
-  oa.enableReporting(true);
+  reportPerfCount++;
+  reportPerformance();
 };
 
 export const disableOA = () => {
-  if (importFailed) {
-    return;
-  }
-  if (!oa) {
-    oaEnabled = false;
-    return;
-  }
   oa.enableReporting(false);
 };
 
-export const reportPV = async () => {
-  await load;
-  if (importFailed) {
-    return;
-  }
+export const reportPV = () => {
   oaReport(OpenEventKeys.PV);
 };
 
-export const reportPerformance = async () => {
-  await load;
-  if (importFailed) {
-    return;
-  }
+export const reportSearch = (data) => {
+  oaReport("input", data, "search_docs");
+};
+
+export const reportPerformance = () => {
   oaReport(OpenEventKeys.LCP);
   oaReport(OpenEventKeys.INP);
   oaReport(OpenEventKeys.PageBasePerformance);
@@ -82,27 +89,11 @@ export const reportPerformance = async () => {
  * @param {string | undefined} $service service字段取值
  * @param {Object} options options
  */
-export const oaReport = async (
-  event,
-  eventData,
-  $service = OpenEventKeys.DOCS,
-  options
-) => {
-  if (importFailed) {
-    return;
-  }
-  if (!oa) {
-    if ((eventBuffer ??= []).length < MAX_BUFFER_SIZE) {
-      eventBuffer.push({
-        event,
-        eventData,
-        $service,
-        options,
-      });
-    }
+export const oaReport = (event, eventData, $service = "docs", options) => {
+  if (!oa.enabled) {
     return;
   }
-  await oa.report(
+  return oa.report(
     event,
     async (...opt) => ({
       $service,