From 7af83db7f0e80c03e78db388b802168847ded436 Mon Sep 17 00:00:00 2001
From: haoxr <1490493387@qq.com>
Date: Tue, 17 Jan 2023 23:20:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9A=97=E9=BB=91=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=A0=B7=E5=BC=8F=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc-auto-import.json                    |   1 +
 index.html                                    |  29 +--
 src/components/Hamburger/index.vue            |   7 +-
 src/components/IconSelect/index.vue           |   2 +-
 src/layout/components/Settings/index.vue      |   7 +-
 src/layout/components/Sidebar/index.vue       |   5 +-
 src/layout/components/TagsView/index.vue      |  40 +++-
 src/layout/index.vue                          |  11 +-
 src/styles/dark.scss                          |  20 +-
 .../{element-plus.scss => element.scss}       |   0
 src/styles/global.scss                        |  23 +++
 src/styles/index.scss                         |  21 +-
 src/styles/mixin.scss                         |  14 --
 src/styles/reset.scss                         |   4 -
 src/styles/sidebar.scss                       |  42 ++--
 src/styles/ts-variables.module.scss           |   6 +
 src/styles/variables.module.scss              |  20 +-
 src/types/auto-imports.d.ts                   |   2 +
 src/views/dashboard/components/Team/index.vue | 189 +++++++++---------
 src/views/dashboard/index.vue                 |  39 ++--
 vite.config.ts                                |  17 +-
 21 files changed, 256 insertions(+), 243 deletions(-)
 rename src/styles/{element-plus.scss => element.scss} (100%)
 create mode 100644 src/styles/global.scss
 delete mode 100644 src/styles/mixin.scss
 delete mode 100644 src/styles/reset.scss
 create mode 100644 src/styles/ts-variables.module.scss
diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
index 0d99f35..7349931 100644
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -107,6 +107,7 @@
     "useArrayMap": true,
     "useArrayReduce": true,
     "useArraySome": true,
+    "useArrayUnique": true,
     "useAsyncQueue": true,
     "useAsyncState": true,
     "useAttrs": true,
diff --git a/index.html b/index.html
index efe1a8a..74ae187 100644
--- a/index.html
+++ b/index.html
@@ -1,15 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="vue-element-admin的vue3升级版本" />
-    <meta name="keywords" content="vue-element-admin,vue3-element-admin" />
-    <title>vue3-element-admin</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="vue-element-admin的vue3版本" />
+  <meta name="keywords" content="vue-element-admin,vue3-element-admin" />
+  <title>vue3-element-admin</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 24d1f49..1e34583 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -1,13 +1,14 @@
 <template>
   <div
     @click="toggleClick"
-    class="px-[15px] hover:bg-gray-50 cursor-pointer h-[50px] leading-[50px]"
+    class="px-[15px] hover:bg-gray-50 cursor-pointer h-[50px] leading-[50px] dark:hover:bg-[var(--el-fill-color-light)]"
   >
     <svg
-      :class="{ 'is-active': isActive }"
+      :class="{ 'is-active': isActive  } "
       class="hamburger"
       viewBox="0 0 1024 1024"
       xmlns="http://www.w3.org/2000/svg"
+      style="color:#FFF!important"
     >
       <path
         d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
@@ -34,9 +35,9 @@ function toggleClick() {
 
 <style lang="scss" scoped>
 .hamburger {
-  display: inline-block;
   width: 20px;
   height: 20px;
+  vertical-align:-4px;
   &.is-active {
     transform: rotate(180deg);
   }
diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
index 7da7fbb..b0a1877 100644
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -83,7 +83,7 @@ onMounted(() => {
       <template #reference>
         <div
           @click="visible = !visible"
-          class="cursor-pointer text-[#999] absolute right-[10px] top-0"
+          class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]"
         >
           <i-ep-caret-top v-show="visible"></i-ep-caret-top>
           <i-ep-caret-bottom v-show="!visible"></i-ep-caret-bottom>
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index fc0a15c..8c5a4aa 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -45,11 +45,10 @@ onMounted(() => {
 
     <el-divider>主题</el-divider>
 
-    <button @click="toggleDark()">当前状态是: {{ isDark }}</button>
-
-    <div class="flex justify-center" @click="toggleDark()">
-      <el-switch
+    <div class="flex justify-center" @click.stop>
+     <el-switch
         v-model="isDark"
+        @change="toggleDark"
         inline-prompt
         :active-icon="Sunny"
         :inactive-icon="Moon"
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 6f3b45e..de6b5b2 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 
 import SidebarItem from './SidebarItem.vue';
 import Logo from './Logo.vue';
-import variables from '@/styles/variables.module.scss';
 
 import { useSettingsStore } from '@/store/modules/settings';
 import { usePermissionStore } from '@/store/modules/permission';
 import { useAppStore } from '@/store/modules/app';
 import { storeToRefs } from 'pinia';
+import variables from '@/styles/ts-variables.module.scss'
 
 const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
@@ -23,7 +22,7 @@ const isCollapse = computed(() => !appStore.sidebar.opened);
 const activeMenu = computed<string>(() => {
   const { meta, path } = route;
   if (meta?.activeMenu) {
-    return meta.activeMenu as string;
+    return meta.activeMenu;
   }
   return path;
 });
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index a4b2cfc..6be3782 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { ComponentInternalInstance } from 'vue';
+import {
+  getCurrentInstance,
+  nextTick,
+  ref,
+  watch,
+  onMounted,
+  ComponentInternalInstance
+} from 'vue';
 import { storeToRefs } from 'pinia';
 
 import path from 'path-browserify';
@@ -202,6 +209,9 @@ function closeAllTags(view: TagView) {
 
 function openTagMenu(tag: TagView, e: MouseEvent) {
   const menuMinWidth = 105;
+
+  console.log("test",proxy?.$el)
+
   const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
   const offsetWidth = proxy?.$el.offsetWidth; // container width
   const maxLeft = offsetWidth - menuMinWidth; // left boundary
@@ -232,8 +242,8 @@ onMounted(() => {
 </script>
 
 <template>
+<div  class="tags-container">
   <scroll-pane
-    class="tags-container"
     ref="scrollPaneRef"
     @scroll="handleScroll"
   >
@@ -249,7 +259,7 @@ onMounted(() => {
       {{ translateRouteTitleI18n(tag.meta?.title) }}
       <span
         v-if="!isAffix(tag)"
-        class="rounded-[60%] hover:bg-gray-300"
+        class="tags-item-close"
         @click.prevent.stop="closeSelectedTag(tag)"
       >
         <i-ep-close class="text-[10px]" />
@@ -288,19 +298,19 @@ onMounted(() => {
       关闭所有
     </li>
   </ul>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .tags-container {
   height: 34px;
   width: 100%;
-  border: 1px solid #eee;
-  box-shadow: 0px 1px 1px #eee;
-
+  border: 1px solid var(--el-border-color-light);
+  box-shadow: 0px 1px 1px var(--el-box-shadow-light);
   .tags-item {
     display: inline-block;
     cursor: pointer;
-    border: 1px solid #d8dce5;
+    border: 1px solid var(--el-border-color-light);
     padding: 3px 8px;
     font-size: 12px;
     margin: 4px 0 0 5px;
@@ -321,7 +331,7 @@ onMounted(() => {
       background-color: var(--el-color-primary);
       color: #fff;
       border-color: var(--el-color-primary);
-      &::before {
+        &::before {
         content: '';
         background: #fff;
         display: inline-block;
@@ -330,7 +340,21 @@ onMounted(() => {
         border-radius: 50%;
         margin-right: 5px;
       }
+       .tags-item-close{
+          &:hover{
+            background:rgb(0 0 0 / 0.16)
+          }
+        }
     }
+
+    &-close{
+      border-radius:100%;
+      &:hover{
+        color:#FFF;
+       background:rgb(0 0 0 / 0.16)
+      }
+    }
+
   }
 }
 
diff --git a/src/layout/index.vue b/src/layout/index.vue
index ecdda06..511aa00 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -10,6 +10,7 @@ import { useSettingsStore } from '@/store/modules/settings';
 
 const { width } = useWindowSize();
 
+
 /**
  * 响应式布局容器固定宽度
  *
@@ -82,11 +83,13 @@ function handleOutsideClick() {
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/mixin.scss';
-@import '@/styles/variables.module.scss';
-
 .app-wrapper {
-  @include clearfix;
+   &:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+
   position: relative;
   height: 100%;
   width: 100%;
diff --git a/src/styles/dark.scss b/src/styles/dark.scss
index 05dbe31..e8039b4 100644
--- a/src/styles/dark.scss
+++ b/src/styles/dark.scss
@@ -1,11 +1,19 @@
 // only scss variables
 
 $--colors: (
-  "primary": (
-    "base": #589ef8,
-  ),
+  "primary": ("base": red),
 );
 
-@forward "element-plus/theme-chalk/src/dark/var.scss" with (
-  $colors: $--colors
-);
+@forward "element-plus/theme-chalk/src/dark/var.scss" with ($colors: $--colors);
+
+
+html.dark {
+  .navbar {
+    background-color: var(--el-bg-color);
+    color: var(--el-text-color-regular);
+  }
+
+  .hamburger {
+    fill: var(--el-text-color-regular);
+  }
+}
\ No newline at end of file
diff --git a/src/styles/element-plus.scss b/src/styles/element.scss
similarity index 100%
rename from src/styles/element-plus.scss
rename to src/styles/element.scss
diff --git a/src/styles/global.scss b/src/styles/global.scss
new file mode 100644
index 0000000..b17338e
--- /dev/null
+++ b/src/styles/global.scss
@@ -0,0 +1,23 @@
+html,
+body,
+#app {
+    height: 100%;
+}
+
+svg {
+    display: inline-block;
+    vertical-align: -0.15em; //因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果
+}
+
+// main-container global css
+.app-container {
+    padding: 20px;
+}
+
+.search {
+    padding: 18px 0 0 10px;
+    margin-bottom: 10px;
+    border-radius: var(--el-card-border-radius);
+    border: 1px solid var(--el-border-color-light);
+    box-shadow: var(--el-box-shadow-light);
+}
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index f6a09d3..eb300be 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,20 +1,5 @@
-@import 'src/styles/variables.module';
-@import 'src/styles/element-plus';
+@import './element.scss';
 @import './sidebar.scss';
 @import './tailwind.scss';
-@import './reset.scss';
-
-
-// main-container global css
-.app-container {
-  padding: 20px;
-}
-
-.search{
-  padding: 18px 0 0 10px;
-  margin-bottom: 10px;
-  border-radius: 5px;
-  border: 1px solid #eee;
-  box-shadow: 1px 1px 1px #eee;
-}
-
+@import './global.scss';
+@import './dark.scss';
\ No newline at end of file
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
deleted file mode 100644
index 7b42833..0000000
--- a/src/styles/mixin.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@mixin clearfix {
-  &:after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-}
-
-
-@mixin relative {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
deleted file mode 100644
index 4b61fc8..0000000
--- a/src/styles/reset.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-
-svg{
-  display: inline-block;
-}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 59f0ded..8334ae6 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -70,11 +70,11 @@
       }
     }
 
-    .is-active > .el-sub-menu__title {
+    .is-active>.el-sub-menu__title {
       color: $subMenuActiveText !important;
     }
 
-    & .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
@@ -88,6 +88,7 @@
   .hideSidebar {
     .sidebar-container {
       width: 54px !important;
+
       .svg-icon {
         margin-right: 0px;
       }
@@ -117,7 +118,7 @@
     .el-sub-menu {
       overflow: hidden;
 
-      & > .el-sub-menu__title {
+      &>.el-sub-menu__title {
         padding: 0 !important;
 
         .svg-icon {
@@ -136,8 +137,8 @@
 
     .el-menu--collapse {
       .el-sub-menu {
-        & > .el-sub-menu__title {
-          & > span {
+        &>.el-sub-menu__title {
+          &>span {
             height: 0;
             width: 0;
             overflow: hidden;
@@ -174,6 +175,7 @@
   }
 
   .withoutAnimation {
+
     .main-container,
     .sidebar-container {
       transition: none;
@@ -183,17 +185,18 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  & > .el-menu {
+  &>.el-menu {
     .svg-icon {
       margin-right: 16px;
     }
+
     .sub-el-icon {
       margin-right: 12px;
       margin-left: -2px;
     }
   }
 
-  .nest-menu .el-sub-menu > .el-sub-menu__title,
+  .nest-menu .el-sub-menu>.el-sub-menu__title,
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
@@ -202,7 +205,7 @@
   }
 
   // the scroll bar appears when the subMenu is too long
-  > .el-menu--popup {
+  >.el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
 
@@ -219,25 +222,4 @@
       border-radius: 20px;
     }
   }
-}
-body[layout="mix"] {
-
-  .horizontal-header{
-    .el-menu-item{
-      height: 50px!important;
-      line-height: 50px!important;
-    }
-
-    .el-sub-menu__title {
-      background-color: #001529!important;
-      height: 50px!important;
-    }
-  }
-  .horizontal-header-right>div {
-    color: #FFF;
-  }
-  .svg-icon{
-    margin-right: 16px;
-  }
-
-}
+}
\ No newline at end of file
diff --git a/src/styles/ts-variables.module.scss b/src/styles/ts-variables.module.scss
new file mode 100644
index 0000000..cbc114a
--- /dev/null
+++ b/src/styles/ts-variables.module.scss
@@ -0,0 +1,6 @@
+// 导出 variables.module.scss 变量提供给TypeScript使用
+:export {
+    menuBg: $menuBg;
+    menuText: $menuText;
+    menuActiveText: $menuActiveText
+}
\ No newline at end of file
diff --git a/src/styles/variables.module.scss b/src/styles/variables.module.scss
index 1232e20..30a94df 100644
--- a/src/styles/variables.module.scss
+++ b/src/styles/variables.module.scss
@@ -1,25 +1,11 @@
-// sidebar
+// 全局SCSS变量
 $menuText: #bfcbd9;
 $menuActiveText: #409eff;
-$subMenuActiveText: #f4f4f5;
-
 $menuBg: #304156;
 $menuHover: #263445;
 
 $subMenuBg: #1f2d3d;
+$subMenuActiveText: #f4f4f5;
 $subMenuHover: #001528;
 
-$sideBarWidth: 210px;
-
-// the :export directive is the magic sauce for webpack
-// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
-:export {
-  menuText: $menuText;
-  menuActiveText: $menuActiveText;
-  subMenuActiveText: $subMenuActiveText;
-  menuBg: $menuBg;
-  menuHover: $menuHover;
-  subMenuBg: $subMenuBg;
-  subMenuHover: $subMenuHover;
-  sideBarWidth: $sideBarWidth;
-}
+$sideBarWidth: 210px;
\ No newline at end of file
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 9fd5106..5ec56ed 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -108,6 +108,7 @@ declare global {
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
   const useArraySome: typeof import('@vueuse/core')['useArraySome']
+  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']
@@ -373,6 +374,7 @@ declare module 'vue' {
     readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
     readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
     readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
+    readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
     readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
     readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
diff --git a/src/views/dashboard/components/Team/index.vue b/src/views/dashboard/components/Team/index.vue
index 8b0cf8d..dedcd08 100644
--- a/src/views/dashboard/components/Team/index.vue
+++ b/src/views/dashboard/components/Team/index.vue
@@ -1,76 +1,3 @@
-<!-- 团队介绍 -->
-<template>
-  <div class="component-container">
-    <el-card class="team-card">
-      <template #header>
-        <span class="fw-b">有来开源组织 & 技术团队</span>
-      </template>
-      <el-tabs v-model="teamActiveName">
-        <el-tab-pane label="开发者" name="1">
-          <div class="developer" ref="dev_wrapper">
-            <ul class="developer__container">
-              <li
-                class="developer__item"
-                v-for="(item, index) in developers"
-                :key="index"
-              >
-                <div class="developer__inner">
-                  <el-image
-                    class="developer__img"
-                    :src="item.imgUrl"
-                    :preview-src-list="[item.imgUrl]"
-                  ></el-image>
-                  <div class="developer__info">
-                    <span class="developer__nickname">{{ item.nickname }}</span>
-                    <div class="developer__position">
-                      <el-tag
-                        v-for="(position, i) in item.positions"
-                        :type="(colors[i % colors.length] as any)"
-                        :class="i !== 0 ? 'f-ml' : ''"
-                        size="small"
-                        :key="i"
-                        >{{ position }}</el-tag
-                      >
-                    </div>
-                    <div class="developer__homepage">
-                      <a :href="item.homepage" target="_blank">个人主页</a>
-                    </div>
-                  </div>
-                </div>
-              </li>
-            </ul>
-            <el-image class="developer__indicator" :src="indicatorImgUrl" />
-          </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="交流群" name="2">
-          <div class="group">
-            <el-image
-              class="group-img"
-              src="https://www.youlai.tech/files/blog/youlaiqun.png"
-              :preview-src-list="[
-                'https://www.youlai.tech/files/blog/youlaiqun.png'
-              ]"
-            />
-            <div class="group-tip">
-              群二维码过期可添加开发者微信由其拉入群，备注「有来」即可。
-            </div>
-          </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="加入我们" name="3">
-          <div class="join">
-            <p>1. 人品良好、善于思考、执行力强；</p>
-            <p>2. 熟悉项目，且至少给项目提交(过)一个PR；</p>
-            <p>3. Git代码库活跃，个人主页或博客完善者优先；</p>
-            <p>4. 过分优秀者我们会主动联系您...</p>
-            <div class="join__desc">申请加入方式: 添加开发者微信申请即可。</div>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
-    </el-card>
-  </div>
-</template>
 
 <script setup lang="ts">
 import { nextTick, onMounted, reactive, ref, toRefs, watchEffect } from 'vue';
@@ -109,10 +36,10 @@ const { teamActiveName, developers, colors, indicatorImgUrl } = toRefs(state);
 
 let bScroll = reactive({});
 
-const dev_wrapper = ref<HTMLElement | any>(null);
+const developer_container = ref<HTMLElement | any>(null);
 
 onMounted(() => {
-  bScroll = new BScroll(dev_wrapper.value, {
+  bScroll = new BScroll(developer_container.value, {
     mouseWheel: true, //开启鼠标滚轮
     disableMouse: false, //启用鼠标拖动
     scrollX: true //X轴滚动启用
@@ -126,8 +53,80 @@ watchEffect(() => {
 });
 </script>
 
+
+<template>
+    <el-card class="team-card">
+      <template #header>
+        <span class="fw-b">有来开源组织 & 技术团队</span>
+      </template>
+      <el-tabs v-model="teamActiveName">
+        <el-tab-pane label="开发者" name="1">
+          <div class="developer-container" ref="developer_container">
+            <ul class="developer-list">
+              <li
+                class="developer-item"
+                v-for="(item, index) in developers"
+                :key="index"
+              >
+                <div class="developer-item-wrapper">
+                  <el-image
+                    class="developer-img"
+                    :src="item.imgUrl"
+                    :preview-src-list="[item.imgUrl]"
+                  ></el-image>
+                  <div class="developer-info">
+                    <span class="developer-info-nickname">{{ item.nickname }}</span>
+                    <div class="developer-info-position">
+                      <el-tag
+                        v-for="(position, i) in item.positions"
+                        :type="(colors[i % colors.length] as any)"
+                        :class="i !== 0 ? 'f-ml' : ''"
+                        size="small"
+                        :key="i"
+                        >{{ position }}</el-tag
+                      >
+                    </div>
+                    <div class="developer-info-homepage">
+                      <a :href="item.homepage" target="_blank">个人主页</a>
+                    </div>
+                  </div>
+                </div>
+              </li>
+            </ul>
+            <el-image class="developer-indicator" :src="indicatorImgUrl" />
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="交流群" name="2">
+          <div class="group">
+            <el-image
+              class="group-img"
+              src="https://www.youlai.tech/files/blog/youlaiqun.png"
+              :preview-src-list="[
+                'https://www.youlai.tech/files/blog/youlaiqun.png'
+              ]"
+            />
+            <div class="group-tip">
+              群二维码过期可添加开发者微信由其拉入群，备注「有来」即可。
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="加入我们" name="3">
+          <div class="join">
+            <p>1. 人品良好、善于思考、执行力强；</p>
+            <p>2. 熟悉项目，且至少给项目提交(过)一个PR；</p>
+            <p>3. Git代码库活跃，个人主页或博客完善者优先；</p>
+            <p>4. 过分优秀者我们会主动联系您...</p>
+            <div class="join-way">申请加入方式: 添加开发者微信申请即可。</div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+</template>
+
+
 <style lang="scss" scoped>
-.component-container {
   .team-card {
     font-size: 14px;
 
@@ -137,17 +136,17 @@ watchEffect(() => {
       }
     }
 
-    .developer {
+    .developer-container {
       width: 100%;
       overflow: hidden;
 
-      &__container {
+      .developer-list {
         display: inline-flex;
         overflow: hidden;
         justify-content: flex-start;
         padding: 10px;
 
-        .developer__item {
+        .developer-item {
           &:not(:first-child) {
             margin-left: 20px;
           }
@@ -157,40 +156,39 @@ watchEffect(() => {
           width: 180px;
           min-width: 180px;
 
-          .developer__inner {
-            border: 1px solid #cccccc;
+          .developer-item-wrapper {
+            border: 1px solid var(--el-border-color-light);
             border-radius: 5px;
-            box-shadow: 6px 6px 6px #aaa;
+            box-shadow: var(--el-box-shadow-lighter);
             padding: 8px;
             text-align: center;
 
-            .developer__img {
+            .developer-img {
               height: 100px;
               width: 100px;
             }
 
-            .developer__info {
+            .developer-info {
               padding: 6px;
               font-size: 14px;
 
-              .developer__position {
+              .developer-info-position {
                 margin-top: 10px;
               }
 
-              .developer__homepage {
+              .developer-info-homepage {
                 margin-top: 16px;
 
                 a {
                   display: inline-block;
                   padding: 4px 10px;
-                  color: #409eff;
-                  border: 1px solid #409eff;
+                  color: var(--el-color-primary);
+                  border: 1px solid var(--el-color-primary);
                   border-radius: 5px;
-                  background: #ecf5ff;
-
+                  background: var(--el-color-primary-light-9);
                   &:hover {
-                    background: #409eff;
-                    color: #ffffff;
+                    background: var(--el-color-primary);
+                    color: var(--el-color-white);
                   }
                 }
               }
@@ -199,7 +197,7 @@ watchEffect(() => {
         }
       }
 
-      &__indicator {
+      .developer-indicator {
         position: absolute;
         right: 0;
         bottom: 0;
@@ -214,7 +212,7 @@ watchEffect(() => {
         font-weight: bold;
       }
 
-      &__desc {
+      &-way {
         margin-top: 20px;
         color: #409eff;
         font-weight: bold;
@@ -229,12 +227,11 @@ watchEffect(() => {
     }
   }
 
-  .fw-b {
+ .fw-b {
     font-weight: bold;
   }
 
   .f-ml {
     margin-left: 5px;
   }
-}
 </style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index faf88b2..ffda4cf 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -19,8 +19,8 @@ import Team from './components/Team/index.vue';
     <github-corner class="github-corner" />
 
     <!-- 数据 -->
-    <el-row :gutter="40" class="card-panel__col">
-      <el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
+    <el-row :gutter="40" class="mb-[12px]">
+      <el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper icon-user">
             <svg-icon icon-class="uv" size="4em" />
@@ -32,7 +32,7 @@ import Team from './components/Team/index.vue';
         </div>
       </el-col>
 
-      <el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
+      <el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper icon-message">
             <svg-icon icon-class="message" size="4em" />
@@ -44,7 +44,7 @@ import Team from './components/Team/index.vue';
         </div>
       </el-col>
 
-      <el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
+      <el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper icon-money">
             <svg-icon icon-class="money" size="4em" />
@@ -55,7 +55,7 @@ import Team from './components/Team/index.vue';
           </div>
         </div>
       </el-col>
-      <el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
+      <el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper icon-shopping">
             <svg-icon icon-class="shopping" size="4em" />
@@ -71,19 +71,19 @@ import Team from './components/Team/index.vue';
     <!-- 项目 + 团队成员介绍 -->
     <el-row :gutter="40">
       <!-- 项目介绍 -->
-      <el-col :md="12" :lg="12" class="card-panel__col">
+      <el-col :md="12" :lg="12" class="mb-[12px]">
         <Project />
       </el-col>
 
       <!-- 团队介绍 -->
-      <el-col :md="12" :lg="12" class="card-panel__col">
+      <el-col :md="12" :lg="12" class="mb-[12px]">
         <Team />
       </el-col>
     </el-row>
 
     <!-- Echarts 图表 -->
     <el-row :gutter="40" style="margin-top: 20px">
-      <el-col :sm="24" :lg="8" class="card-panel__col">
+      <el-col :sm="24" :lg="8" class="mb-[12px]">
         <BarChart
           id="barChart"
           height="400px"
@@ -92,7 +92,7 @@ import Team from './components/Team/index.vue';
         />
       </el-col>
 
-      <el-col :xs="24" :sm="12" :lg="8" class="card-panel__col">
+      <el-col :xs="24" :sm="12" :lg="8" class="mb-[12px]">
         <PieChart
           id="pieChart"
           height="400px"
@@ -101,7 +101,7 @@ import Team from './components/Team/index.vue';
         />
       </el-col>
 
-      <el-col :xs="24" :sm="12" :lg="8" class="card-panel__col">
+      <el-col :xs="24" :sm="12" :lg="8" class="mb-[12px]">
         <RadarChart
           id="radarChart"
           height="400px"
@@ -116,7 +116,7 @@ import Team from './components/Team/index.vue';
 <style lang="scss" scoped>
 .dashboard-container {
   padding: 24px;
-  background-color: rgb(240, 242, 245);
+  background-color:var(--el-bg-color-page);
   position: relative;
 
   .github-corner {
@@ -147,7 +147,7 @@ import Team from './components/Team/index.vue';
       padding-top: 30px;
 
       .el-table {
-        border-top: 1px solid #dfe6ec;
+        border-top: 1px solid var(--el-border-color-light);
       }
     }
 
@@ -156,9 +156,6 @@ import Team from './components/Team/index.vue';
     }
   }
 
-  .card-panel__col {
-    margin-bottom: 12px;
-  }
 
   .card-panel {
     height: 108px;
@@ -166,10 +163,10 @@ import Team from './components/Team/index.vue';
     font-size: 12px;
     position: relative;
     overflow: hidden;
-    color: #666;
-    background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
-    border-color: rgba(0, 0, 0, 0.05);
+    color: var(--el-text-color-regular);
+    background: var(--el-bg-color-overlay);
+    box-shadow:var(--el-box-shadow-dark);
+    border-color:var(--el-border-color);
 
     .icon-message {
       color: #36a3f7;
@@ -224,7 +221,7 @@ import Team from './components/Team/index.vue';
 
       .card-panel-text {
         line-height: 18px;
-        color: rgba(0, 0, 0, 0.45);
+        color: var(--el-text-color-secondary);
         font-size: 16px;
         margin-bottom: 12px;
       }
@@ -237,7 +234,7 @@ import Team from './components/Team/index.vue';
   }
 
   .chart-container {
-    background: #ffffff;
+    background: var(--el-bg-color-overlay);
   }
 }
 </style>
diff --git a/vite.config.ts b/vite.config.ts
index 6af3469..285bf8e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -23,6 +23,18 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
         '@': pathSrc
       }
     },
+    css: {
+      // CSS 预处理器
+      preprocessorOptions: {
+        //define global scss variable
+        scss: {
+          javascriptEnabled: true,
+          additionalData: `
+            @use "@/styles/variables.module.scss" as *; 
+          `
+        }
+      }
+    },
     // 本地反向代理解决浏览器跨域限制
     server: {
       host: '0.0.0.0',
@@ -63,6 +75,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
         dts: path.resolve(pathSrc, 'types', 'auto-imports.d.ts')
       }),
 
+
       Components({
         resolvers: [
           // 自动注册图标组件
@@ -86,7 +99,9 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
         iconDirs: [path.resolve(pathSrc, 'assets/icons')],
         // 指定symbolId格式
         symbolId: 'icon-[dir]-[name]'
-      })
+      }),
+
+
     ]
   };
 });
