From 2f1c231f5a60bb838fde8240f9e6a08151b053d9 Mon Sep 17 00:00:00 2001
From: KAAANG <cunykang@gmail.com>
Date: Wed, 24 Jan 2024 18:43:51 +0800
Subject: [PATCH] fix color

---
 tailwind.config.js                            |  5 ++-
 vue/src/layouts/main/components/HeaderBar.vue | 34 +++++--------------
 .../layouts/main/components/HeaderIcon.vue    | 30 ++++++++++++++++
 vue/src/theme/color.scss                      |  6 ++++
 4 files changed, 49 insertions(+), 26 deletions(-)
 create mode 100644 vue/src/layouts/main/components/HeaderIcon.vue

diff --git a/tailwind.config.js b/tailwind.config.js
index fe087ca8..8c77252a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -51,7 +51,10 @@ export default {
         dimmer: 'var(--foreground-dimmer, #555)',
         dimmest: 'var(--foreground-dimmest, #b5b5b5)',
         // 复杂文字高亮
-        'white-default': 'var(--accent-white-default, #fff)'
+        'white-highest': 'var(--foreground-complex-highest, #B5B5B5)',
+        'white-higher': 'var(--accent-white-higher, #DADDE1)',
+        'white-default': 'var(--accent-white-default, #fff)',
+        'green-default': 'var(--accent-green-default, #99A559)'
       }
     },
     // 基础颜色
diff --git a/vue/src/layouts/main/components/HeaderBar.vue b/vue/src/layouts/main/components/HeaderBar.vue
index 887edee0..ce0cada7 100644
--- a/vue/src/layouts/main/components/HeaderBar.vue
+++ b/vue/src/layouts/main/components/HeaderBar.vue
@@ -1,45 +1,28 @@
 <template>
-  <div class="w-full h-full bg-dimmest border-b flex justify-between items-center px-6">
+  <div class="w-full h-full bg-dimmest text-dimmest border-b flex justify-between items-center px-6">
     <!-- logo and version -->
     <div class="flex items-center gap-1.5">
       <!-- icon -->
-      <div class="w-8 h-8 flex justify-center items-center rounded outline-default bg-[#99A559]">
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
-          <path
-            d="M4.30738 8.91662C4.22697 8.95157 4.15007 8.9941 4.07772 9.04362L4.05444 9.06267C4.04533 9.06852 4.03682 9.07525 4.02904 9.08278C2.49975 10.2723 1.6806 12.19 2.11663 14.112C2.36285 15.2141 2.98149 16.1976 3.86828 16.8969C4.75507 17.5961 5.8558 17.9682 6.98495 17.9505H7.15746C7.89778 17.9189 8.62135 17.7202 9.27406 17.3695C9.92678 17.0187 10.4917 16.5249 10.9267 15.9249C11.3616 15.325 11.6552 14.6345 11.7856 13.9051C11.916 13.1757 11.8798 12.4262 11.6797 11.7127C11.4839 11.0111 11.0765 10.3644 10.7198 9.73365C10.0933 8.62593 9.46533 7.51856 8.83597 6.41155C8.64971 6.08453 8.46132 5.75962 8.27717 5.4326C8.03481 5.0008 7.65487 4.5309 7.63476 4.01867C7.61466 3.50643 8.03164 3.01219 8.54175 2.91377C9.50272 2.73068 9.95357 3.77208 9.95569 3.77102C10.0723 4.04984 10.2904 4.274 10.566 4.39818C10.8415 4.52237 11.1539 4.53731 11.4401 4.44001C11.7262 4.3427 11.9647 4.1404 12.1074 3.87398C12.2502 3.60756 12.2864 3.2969 12.2089 3.00479C11.9736 2.23639 11.482 1.57187 10.8161 1.12202C10.2305 0.703176 9.52507 0.485225 8.80528 0.500778C8.30219 0.503547 7.8052 0.611133 7.346 0.816677C6.88681 1.02222 6.47549 1.32121 6.13829 1.69457C5.75508 2.12281 5.48051 2.63694 5.33776 3.19359C5.19501 3.75023 5.18826 4.33305 5.31808 4.89285C5.36995 5.10309 5.4408 5.30819 5.52975 5.50562C5.78269 6.07924 6.15416 6.60205 6.46743 7.14498C6.85195 7.81172 7.23648 8.47882 7.62101 9.14628C8.00554 9.81373 8.39359 10.484 8.78517 11.1571C9.10267 11.7138 9.44874 12.2006 9.48367 12.8695C9.49839 13.2263 9.4391 13.5822 9.30954 13.915C9.17998 14.2477 8.98295 14.5501 8.73085 14.803C8.47875 15.0559 8.17704 15.2538 7.84469 15.3845C7.51235 15.5151 7.15657 15.5755 6.79975 15.5619C5.5615 15.5058 4.62699 14.5882 4.43861 13.3881C4.2026 11.8725 5.38264 11.0407 5.38264 11.0407C5.6313 10.8944 5.81851 10.6629 5.90958 10.3892C6.00064 10.1154 5.9894 9.81791 5.87792 9.55181C5.76644 9.28571 5.56229 9.06903 5.30328 8.94193C5.04428 8.81482 4.74799 8.7859 4.4693 8.86053C4.41598 8.87553 4.36366 8.89391 4.31267 8.91556"
-            fill="#fff"
-          />
-          <path
-            d="M17.0001 13.0458C17.0004 12.6181 16.965 12.1912 16.8942 11.7694C16.7841 11.1042 16.5777 10.4585 16.2815 9.85281C16.1037 9.49192 15.8793 9.13103 15.5279 8.93418C15.352 8.83501 15.1533 8.78332 14.9513 8.78419C14.7494 8.78506 14.5511 8.83845 14.376 8.93912C14.2009 9.03979 14.0551 9.18428 13.9527 9.35839C13.8504 9.5325 13.7951 9.73024 13.7923 9.93218C13.7827 10.3777 14.024 10.7788 14.204 11.1895C14.503 11.8739 14.6384 12.6185 14.5995 13.3644C14.5605 14.1103 14.3483 14.8368 13.9796 15.4863C13.957 15.5248 13.9368 15.5648 13.9193 15.6059C13.8443 15.7805 13.8051 15.9683 13.8039 16.1583C13.8118 16.4308 13.9131 16.6923 14.091 16.8989C14.2689 17.1055 14.5124 17.2446 14.7807 17.2929C15.438 17.4103 15.9597 16.9172 16.2359 16.3668C16.7437 15.3337 17.0052 14.197 17.0001 13.0458Z"
-            fill="#fff"
-          />
-          <path
-            d="M11.2098 5.22189C11.1881 5.22605 11.1665 5.23135 11.1453 5.23777C11.102 5.24986 11.063 5.27396 11.0328 5.30728C11.0026 5.3406 10.9825 5.38179 10.9748 5.42607C10.967 5.47036 10.972 5.51593 10.989 5.55752C11.0061 5.59911 11.0346 5.63502 11.0712 5.6611C11.6095 6.06818 12.0635 6.57608 12.4079 7.15652C12.5014 7.31595 12.5828 7.48223 12.6513 7.65394C12.7084 7.8021 12.7846 7.99578 12.9773 7.98519C13.1275 7.97779 13.1889 7.84973 13.2302 7.72167C13.4265 7.05578 13.4877 6.35734 13.4101 5.66745C13.3548 5.29159 13.2684 4.92096 13.1519 4.55938C13.1342 4.47182 13.0933 4.39065 13.0333 4.32443C12.9952 4.28979 12.9468 4.26849 12.8954 4.26372C12.8441 4.25895 12.7926 4.27097 12.7487 4.29797C12.707 4.33172 12.6713 4.37213 12.6428 4.41756C12.4664 4.65488 12.2399 4.85038 11.9793 4.99012C11.8478 5.06001 11.7095 5.11605 11.5665 5.15734C11.4469 5.19226 11.3252 5.19755 11.2098 5.22189Z"
-            fill="#fff"
-          />
-          <!-- 原本svg第三个path的样式，注释掉 -->
-          <!-- fill="var(--negative-default)" -->
-        </svg>
-      </div>
+      <HeaderIcon />
       <!-- version -->
       <div class="flex items-end">
-        <span class="font-semibold text-dimmest leading-6 mr-0.5">SwanLab</span>
-        <!-- 被注释了 -->
+        <span class="font-semibold mr-0.5">SwanLab</span>
+        <!-- 版本号被注释了 -->
         <!-- <span class="whitespace-nowrap text-xs pl-2 text-dimmer"> {{ formatVersion(version) }}</span> -->
       </div>
     </div>
     <!-- links -->
     <div class="w-full grow px-8 items-center font-semibold justify-end gap-8 md:flex hidden">
-      <a :href="item.link" target="_blank" class="text-dimmest a-hover" v-for="item in links" :key="item.link">{{
-        item.title
-      }}</a>
+      <a :href="item.link" target="_blank" class="hover:text-white-higher" v-for="item in links" :key="item.link">
+        {{ item.title }}
+      </a>
     </div>
     <!-- fixeds -->
     <div class="flex items-center font-semibold">
       <a
         :href="item.link"
         target="_blank"
-        class="flex gap-1.5 items-center h-full text-dimmest a-hover"
+        class="flex gap-1.5 items-center h-full text-dimmest hover:text-white-higher"
         v-for="item in fixeds"
         :key="item.icon"
       >
@@ -58,6 +41,7 @@
  **/
 
 import { ref } from 'vue'
+import HeaderIcon from './HeaderIcon.vue'
 import SLIcon from '@swanlab-vue/components/SLIcon.vue'
 
 defineProps({
diff --git a/vue/src/layouts/main/components/HeaderIcon.vue b/vue/src/layouts/main/components/HeaderIcon.vue
new file mode 100644
index 00000000..acd36350
--- /dev/null
+++ b/vue/src/layouts/main/components/HeaderIcon.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="swan-icon">
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19">
+      <path
+        d="M4.30738 8.91662C4.22697 8.95157 4.15007 8.9941 4.07772 9.04362L4.05444 9.06267C4.04533 9.06852 4.03682 9.07525 4.02904 9.08278C2.49975 10.2723 1.6806 12.19 2.11663 14.112C2.36285 15.2141 2.98149 16.1976 3.86828 16.8969C4.75507 17.5961 5.8558 17.9682 6.98495 17.9505H7.15746C7.89778 17.9189 8.62135 17.7202 9.27406 17.3695C9.92678 17.0187 10.4917 16.5249 10.9267 15.9249C11.3616 15.325 11.6552 14.6345 11.7856 13.9051C11.916 13.1757 11.8798 12.4262 11.6797 11.7127C11.4839 11.0111 11.0765 10.3644 10.7198 9.73365C10.0933 8.62593 9.46533 7.51856 8.83597 6.41155C8.64971 6.08453 8.46132 5.75962 8.27717 5.4326C8.03481 5.0008 7.65487 4.5309 7.63476 4.01867C7.61466 3.50643 8.03164 3.01219 8.54175 2.91377C9.50272 2.73068 9.95357 3.77208 9.95569 3.77102C10.0723 4.04984 10.2904 4.274 10.566 4.39818C10.8415 4.52237 11.1539 4.53731 11.4401 4.44001C11.7262 4.3427 11.9647 4.1404 12.1074 3.87398C12.2502 3.60756 12.2864 3.2969 12.2089 3.00479C11.9736 2.23639 11.482 1.57187 10.8161 1.12202C10.2305 0.703176 9.52507 0.485225 8.80528 0.500778C8.30219 0.503547 7.8052 0.611133 7.346 0.816677C6.88681 1.02222 6.47549 1.32121 6.13829 1.69457C5.75508 2.12281 5.48051 2.63694 5.33776 3.19359C5.19501 3.75023 5.18826 4.33305 5.31808 4.89285C5.36995 5.10309 5.4408 5.30819 5.52975 5.50562C5.78269 6.07924 6.15416 6.60205 6.46743 7.14498C6.85195 7.81172 7.23648 8.47882 7.62101 9.14628C8.00554 9.81373 8.39359 10.484 8.78517 11.1571C9.10267 11.7138 9.44874 12.2006 9.48367 12.8695C9.49839 13.2263 9.4391 13.5822 9.30954 13.915C9.17998 14.2477 8.98295 14.5501 8.73085 14.803C8.47875 15.0559 8.17704 15.2538 7.84469 15.3845C7.51235 15.5151 7.15657 15.5755 6.79975 15.5619C5.5615 15.5058 4.62699 14.5882 4.43861 13.3881C4.2026 11.8725 5.38264 11.0407 5.38264 11.0407C5.6313 10.8944 5.81851 10.6629 5.90958 10.3892C6.00064 10.1154 5.9894 9.81791 5.87792 9.55181C5.76644 9.28571 5.56229 9.06903 5.30328 8.94193C5.04428 8.81482 4.74799 8.7859 4.4693 8.86053C4.41598 8.87553 4.36366 8.89391 4.31267 8.91556"
+      />
+      <path
+        d="M17.0001 13.0458C17.0004 12.6181 16.965 12.1912 16.8942 11.7694C16.7841 11.1042 16.5777 10.4585 16.2815 9.85281C16.1037 9.49192 15.8793 9.13103 15.5279 8.93418C15.352 8.83501 15.1533 8.78332 14.9513 8.78419C14.7494 8.78506 14.5511 8.83845 14.376 8.93912C14.2009 9.03979 14.0551 9.18428 13.9527 9.35839C13.8504 9.5325 13.7951 9.73024 13.7923 9.93218C13.7827 10.3777 14.024 10.7788 14.204 11.1895C14.503 11.8739 14.6384 12.6185 14.5995 13.3644C14.5605 14.1103 14.3483 14.8368 13.9796 15.4863C13.957 15.5248 13.9368 15.5648 13.9193 15.6059C13.8443 15.7805 13.8051 15.9683 13.8039 16.1583C13.8118 16.4308 13.9131 16.6923 14.091 16.8989C14.2689 17.1055 14.5124 17.2446 14.7807 17.2929C15.438 17.4103 15.9597 16.9172 16.2359 16.3668C16.7437 15.3337 17.0052 14.197 17.0001 13.0458Z"
+      />
+      <path
+        d="M11.2098 5.22189C11.1881 5.22605 11.1665 5.23135 11.1453 5.23777C11.102 5.24986 11.063 5.27396 11.0328 5.30728C11.0026 5.3406 10.9825 5.38179 10.9748 5.42607C10.967 5.47036 10.972 5.51593 10.989 5.55752C11.0061 5.59911 11.0346 5.63502 11.0712 5.6611C11.6095 6.06818 12.0635 6.57608 12.4079 7.15652C12.5014 7.31595 12.5828 7.48223 12.6513 7.65394C12.7084 7.8021 12.7846 7.99578 12.9773 7.98519C13.1275 7.97779 13.1889 7.84973 13.2302 7.72167C13.4265 7.05578 13.4877 6.35734 13.4101 5.66745C13.3548 5.29159 13.2684 4.92096 13.1519 4.55938C13.1342 4.47182 13.0933 4.39065 13.0333 4.32443C12.9952 4.28979 12.9468 4.26849 12.8954 4.26372C12.8441 4.25895 12.7926 4.27097 12.7487 4.29797C12.707 4.33172 12.6713 4.37213 12.6428 4.41756C12.4664 4.65488 12.2399 4.85038 11.9793 4.99012C11.8478 5.06001 11.7095 5.11605 11.5665 5.15734C11.4469 5.19226 11.3252 5.19755 11.2098 5.22189Z"
+      />
+    </svg>
+  </div>
+</template>
+
+<script setup>
+/**
+ * @description: 顶部图标
+ * @file: HeaderIcon.vue
+ * @since: 2024-01-24 13:32:24
+ **/
+</script>
+
+<style lang="scss" scoped>
+.swan-icon {
+  @apply w-8 h-8 flex justify-center items-center rounded text-white-default;
+  background-color: var(--accent-green-default);
+}
+</style>
diff --git a/vue/src/theme/color.scss b/vue/src/theme/color.scss
index 6919df68..a2c39672 100644
--- a/vue/src/theme/color.scss
+++ b/vue/src/theme/color.scss
@@ -61,7 +61,13 @@
    * 复杂文字颜色——文字高亮
    *******************************************/
   // 白色系
+  --accent-white-highest: #b5b5b5;
+  --accent-white-higher: #dadde1;
   --accent-white-default: #ffffff;
+
+  // 绿色系
+  --accent-green-default: #99a559;
+
   /********************************************
    * 引导色
    *******************************************/