refactor: 导航栏

.vscode/settings.json

@@ -6,6 +6,7 @@
   "files.associations": {
     "*.css": "postcss"
   },
+  "css.lint.unknownAtRules": "ignore",
   // "editor.formatOnSave": true,
   // "editor.defaultFormatter": "esbenp.prettier-vscode",
   // "prettier.requireConfig": true,

frontend/app.vue

@@ -58,12 +58,4 @@ body,
   margin: 0;
   padding: 0;
 }
-
-html.dark {
-  background: #18181c;
-  color: white;
-}
-html.light {
-  background-color: #F4F5F5;
-}
 </style>

frontend/assets/css/main.css

@@ -1,5 +1,5 @@
 :root {
-  --primary-color: #316c72;
+  --primary-color: #1e80ff;
   --dark-bg: #18181c;
   --link: #007fff;
   --jjext-color-brand: #1e80ff;
@@ -81,6 +81,194 @@
   --jjext-color-bg-gray:#27272a;
 }
 
+html.light{
+  --juejin-layer-golden-1: #faf3e5;
+  --juejin-layer-golden-2: #f6e7cb;
+  --juejin-component-hover: #e4e6eb;
+  --juejin-gradientgold_normal_start: #fde8c3;
+  --juejin-gradientgold_normal_end: #edd3a7;
+  --juejin-gradientgold_hover_start: #f1dfc0;
+  --juejin-gradientgold_hover_end: #e6c99b;
+  --juejin-gradientgold_click_start: #e9d5b3;
+  --juejin-gradientgold_click_end: #dac29a;
+  --juejin-layer_loading_start: rgba(228,230,235,0);
+  --juejin-layer_loading_end: rgba(228,230,235,0.5);
+  --juejin-layer_golden_2: #faf3e5;
+  --juejin-font_golden_4: #7e5d25;
+  --juejin-font-golden-1: #7e5d25;
+  --juejin-font-golden-2: #8a795c;
+  --juejin-font-golden-3: #d6b885;
+  --juejin-gray-0: #fff;
+  --juejin-gray-1-1: #e4e6eb;
+  --juejin-gray-1-2: rgba(228,230,235,0.5);
+  --juejin-gray-1-3: #e4e6eb;
+  --juejin-gray-2: #f2f3f5;
+  --juejin-gray-3: #f7f8fa;
+  --juejin-background: #f2f3f5;
+  --juejin-layer-1: #fff;
+  --juejin-layer-2-1: #f7f8fa;
+  --juejin-layer-2-2: rgba(247,248,250,0.7);
+  --juejin-layer-3-fill: #f2f3f5;
+  --juejin-layer-3-border: #e4e6eb;
+  --juejin-layer-4-dropdown: #fff;
+  --juejin-layer-5: #fff;
+  --juejin-brand-1-normal: #1e80ff;
+  --juejin-brand-2-hover: #1171ee;
+  --juejin-brand-3-click: #0060dd;
+  --juejin-brand-4-disable: #abcdff;
+  --juejin-brand-5-light: #eaf2ff;
+  --juejin-mask-1: rgba(0,0,0,0.4);
+  --juejin-mask-2: #fff;
+  --juejin-mask-3: none;
+  --juejin-brand-fill1-normal: rgba(30,128,255,0.05);
+  --juejin-brand-fill2-hover: rgba(30,128,255,0.1);
+  --juejin-brand-fill3-click: rgba(30,128,255,0.2);
+  --juejin-brand-stroke1-normal: rgba(30,128,255,0.3);
+  --juejin-brand-stroke2-hover: rgba(30,128,255,0.45);
+  --juejin-brand-stroke3-click: rgba(30,128,255,0.6);
+  --juejin-font_danger: #ff5132;
+  --juejin-font-1: #252933;
+  --juejin-font-2: #515767;
+  --juejin-font-3: #8a919f;
+  --juejin-font-4: #c2c8d1;
+  --juejin-font-brand1-normal: #1e80ff;
+  --juejin-font-brand2-hover: #1171ee;
+  --juejin-font-brand3-click: #0060dd;
+  --juejin-font-brand4-disable: #abcdff;
+  --juejin-font-success: #2bb91b;
+  --juejin-font-warning: #ff8412;
+  --juejin-font-danger: #ff5132;
+  --juejin-font-white-disable: #fff;
+  --juejin-font-white: #fff;
+  --juejin-success-1-normal: #00b453;
+  --juejin-success-2-deep: #00964e;
+  --juejin-success-3-light: #e2faed;
+  --juejin-warning-1-normal: #ff7426;
+  --juejin-warning-2-deep: #e05e00;
+  --juejin-warning-3-light: #fff3e5;
+  --juejin-danger-1-normal: #f64242;
+  --juejin-danger-2-deep: #cb2634;
+  --juejin-danger-3-light: #fff2ff;
+  --juejin-sub-1-purple: #9f54ff;
+  --juejin-sub-2-blue: #57a0ff;
+  --juejin-sub-3-cyan: #5ad7ff;
+  --juejin-sub-4-green: #33d790;
+  --juejin-sub-5-yellow: #ffcc15;
+  --juejin-sub-6-orange: #ff834e;
+  --juejin-sub-7-red: #ff5e54;
+  --juejin-coupon_1_button: #f64242;
+  --juejin-coupon_1_button_disable: #faa0a0;
+  --juejin-coupon_2_card: rgba(255,245,244,0.7);
+  --juejin-coupon_3_stroke: rgba(246,66,66,0.2);
+  --juejin-navigation: #fff;
+  --juejin-shade-1: rgba(0,0,0,0.4);
+  --juejin-shade-2: rgba(0,0,0,0.6);
+  --juejin-popup: #fff;
+  --juejin-popover: rgba(0,0,0,0.8);
+  --juejin-sheets: #f7f8fa;
+  --juejin-coupon-button: #f64242;
+  --juejin-coupon-button-disable: #faa0a0;
+  --juejin-coupon-card: rgba(255,245,244,0.7);
+  --juejin-layer-loading-start: #e4e6eb;
+  --juejin-layer-loading-end: rgba(228,230,235,0.5);
+  --juejin-font-priv-hint: #916be1;
+  --juejin-background-jscore-radar: #232323
+}
+
+html.dark{
+  --juejin-layer-golden-1: rgba(209,171,97,0.23);
+  --juejin-layer-golden-2: rgba(237,211,167,0.4);
+  --juejin-component-hover: hsla(0,0%,100%,0.2);
+  --juejin-gradientgold_normal_start: #fde8c3;
+  --juejin-gradientgold_normal_end: #edd3a7;
+  --juejin-gradientgold_hover_start: #f1dfc0;
+  --juejin-gradientgold_hover_end: #e6c99b;
+  --juejin-gradientgold_click_start: #e9d5b3;
+  --juejin-gradientgold_click_end: #dac29a;
+  --juejin-layer_loading_start: hsla(0,0%,100%,0);
+  --juejin-layer_loading_end: hsla(0,0%,100%,0.2);
+  --juejin-layer_golden_2: rgba(209,171,97,0.12);
+  --juejin-font_golden_4: #7e5d25;
+  --juejin-font-golden-1: #edd3a7;
+  --juejin-font-golden-2: #bea985;
+  --juejin-font-golden-3: #8e7f64;
+  --juejin-gray-0: #000;
+  --juejin-gray-1-1: hsla(0,0%,100%,0.2);
+  --juejin-gray-1-2: hsla(0,0%,100%,0.1);
+  --juejin-gray-1-3: #464646;
+  --juejin-gray-2: hsla(0,0%,100%,0.12);
+  --juejin-gray-3: hsla(0,0%,100%,0.08);
+  --juejin-background: #000;
+  --juejin-layer-1: #181818;
+  --juejin-layer-2-1: hsla(0,0%,100%,0.08);
+  --juejin-layer-2-2: hsla(0,0%,100%,0.08);
+  --juejin-layer-3-fill: hsla(0,0%,100%,0.08);
+  --juejin-layer-3-border: hsla(0,0%,100%,0.2);
+  --juejin-layer-4-dropdown: #2f2f2f;
+  --juejin-layer-5: hsla(0,0%,100%,0.12);
+  --juejin-brand-1-normal: #2986ff;
+  --juejin-brand-2-hover: #1473ed;
+  --juejin-brand-3-click: #0563dd;
+  --juejin-brand-4-disable: rgba(41,134,255,0.4);
+  --juejin-brand-5-light: rgba(30,128,255,0.2);
+  --juejin-mask-1: hsla(0,0%,100%,0.4);
+  --juejin-mask-2: #282828;
+  --juejin-mask-3: rgba(0,0,0,0.05);
+  --juejin-brand-fill1-normal: rgba(41,134,255,0.15);
+  --juejin-brand-fill2-hover: rgba(20,115,237,0.25);
+  --juejin-brand-fill3-click: rgba(5,99,221,0.35);
+  --juejin-brand-stroke1-normal: rgba(41,134,255,0.4);
+  --juejin-brand-stroke2-hover: rgba(20,115,237,0.6);
+  --juejin-brand-stroke3-click: rgba(5,99,221,0.6);
+  --juejin-font_danger: #f85959;
+  --juejin-font-1: hsla(0,0%,100%,0.9);
+  --juejin-font-2: hsla(0,0%,100%,0.7);
+  --juejin-font-3: hsla(0,0%,100%,0.55);
+  --juejin-font-4: hsla(0,0%,100%,0.45);
+  --juejin-font-brand1-normal: #4495ff;
+  --juejin-font-brand2-hover: #2b88ff;
+  --juejin-font-brand3-click: #1371ec;
+  --juejin-font-brand4-disable: rgba(19,113,236,0.4);
+  --juejin-font-success: #40c17b;
+  --juejin-font-warning: #ff8541;
+  --juejin-font-danger: #c62633;
+  --juejin-font-white-disable: hsla(0,0%,100%,0.6);
+  --juejin-font-white: #fff;
+  --juejin-success-1-normal: #40c17b;
+  --juejin-success-2-deep: #008445;
+  --juejin-success-3-light: rgba(64,193,123,0.2);
+  --juejin-warning-1-normal: #ff8541;
+  --juejin-warning-2-deep: #d85c02;
+  --juejin-warning-3-light: rgba(255,133,65,0.2);
+  --juejin-danger-1-normal: #f85959;
+  --juejin-danger-2-deep: #c62633;
+  --juejin-danger-3-light: rgba(248,89,89,0.2);
+  --juejin-sub-1-purple: #a965ff;
+  --juejin-sub-2-blue: #68a9ff;
+  --juejin-sub-3-cyan: #74f4ed;
+  --juejin-sub-4-green: #50e68c;
+  --juejin-sub-5-yellow: #ffd748;
+  --juejin-sub-6-orange: #ff8f60;
+  --juejin-sub-7-red: #ff6e65;
+  --juejin-coupon_1_button: rgba(251,86,83,0.8);
+  --juejin-coupon_1_button_disable: #782928;
+  --juejin-coupon_2_card: rgba(255,176,176,0.08);
+  --juejin-coupon_3_stroke: rgba(246,66,66,0.18);
+  --juejin-navigation: #181818;
+  --juejin-shade-1: rgba(0,0,0,0.6);
+  --juejin-shade-2: rgba(0,0,0,0.7);
+  --juejin-popup: #282828;
+  --juejin-popover: #323232;
+  --juejin-sheets: #222;
+  --juejin-coupon-button: rgba(251,86,83,0.8);
+  --juejin-coupon-button-disable: #782928;
+  --juejin-coupon-card: rgba(255,176,176,0.08);
+  --juejin-layer-loading-start: #fff;
+  --juejin-layer-loading-end: hsla(0,0%,100%,0.2);
+  --juejin-font-priv-hint: #916be1;
+  --juejin-background-jscore-radar: #232323
+}
+
 .page-enter-active,
 .page-leave-active {
   transition: all 0.3s ease-in-out;

frontend/components/ArticlesContent/index.vue

@@ -54,7 +54,6 @@ function transformToId() {
     }
   }
 }
-
 onMounted(() => {
   if (article.value)
     handleChange(article.value.content)

frontend/components/Logo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="!flex h-[2.25rem]">
+  <div class="!flex h-[2rem]">
     <svg
       viewBox="0 0 36 28"
       xmlns="http://www.w3.org/2000/svg"

frontend/components/Navs/Item.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { INavItem } from '~~/types/INav'
+defineProps({
+  nav: {
+    type: Object as PropType<INavItem>,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <div>
+    <NuxtLink v-if="nav.nav" :to="nav.url" class="nav-item" :data-badge="nav?.badge || ''">
+      {{ nav.nav }}
+    </NuxtLink>
+  </div>
+</template>
+
+<style scoped>
+.nav-item {
+  @apply h-full flex items-center text-[15px] border-b-2 border-transparent;
+  @apply relative opacity-85 whitespace-nowrap;
+  @apply text-black dark:text-[#e8ecfa];
+
+}
+.nav-item:hover {
+    @apply border-b-primary;
+    @apply opacity-100;
+}
+.nav-item::after {
+  @apply absolute left-2/3 top-2;
+  @apply bg-red-500 text-white;
+  @apply rounded-full px-1.5 py-0.4 whitespace-nowrap;
+  @apply transform-gpu scale-60 origin-top-left;
+  content: attr(data-badge);
+}
+.nav-item[data-badge='']::after {
+  content: unset;
+}
+.nav-item.router-link-exact-active {
+    @apply opacity-100 text-primary;
+}
+</style>