tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 暗黑模式自定义样式统一调整

Browse Source 
Former-commit-id: 7af83db7f0e80c03e78db388b802168847ded436
This commit is contained in:
haoxr
2023-01-17 23:20:29 +08:00
parent 50cc85bad3
commit f7df411480
21 changed files with 256 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc-auto-import.json
View File

@@ -107,6 +107,7 @@
"useArrayMap": true, "useArrayMap": true,
"useArrayReduce": true, "useArrayReduce": true,
"useArraySome": true, "useArraySome": true,
"useArrayUnique": true,
"useAsyncQueue": true, "useAsyncQueue": true,
"useAsyncState": true, "useAsyncState": true,
"useAttrs": true, "useAttrs": true,

29
index.html
View File

@@ -1,15 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" /> <head>
<link rel="icon" href="/favicon.ico" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" href="/favicon.ico" />
<meta name="description" content="vue-element-admin的vue3升级版本" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="vue-element-admin,vue3-element-admin" /> <meta name="description" content="vue-element-admin的vue3版本" />
<title>vue3-element-admin</title> <meta name="keywords" content="vue-element-admin,vue3-element-admin" />
</head> <title>vue3-element-admin</title>
<body> </head>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script> <body>
</body> <div id="app"></div>
</html> <script type="module" src="/src/main.ts"></script>
</body>
</html>

7
src/components/Hamburger/index.vue
View File

@@ -1,13 +1,14 @@
<template> <template>
<div <div
@click="toggleClick" @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 <svg
:class="{ 'is-active': isActive }" :class="{ 'is-active': isActive } "
class="hamburger" class="hamburger"
viewBox="0 0 1024 1024" viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
style="color:#FFF!important"
> >
<path <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" 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> <style lang="scss" scoped>
.hamburger { .hamburger {
display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;
vertical-align:-4px;
&.is-active { &.is-active {
transform: rotate(180deg); transform: rotate(180deg);
} }

2
src/components/IconSelect/index.vue
View File

@@ -83,7 +83,7 @@ onMounted(() => {
<template #reference> <template #reference>
<div <div
@click="visible = !visible" @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-top v-show="visible"></i-ep-caret-top>
<i-ep-caret-bottom v-show="!visible"></i-ep-caret-bottom> <i-ep-caret-bottom v-show="!visible"></i-ep-caret-bottom>

7
src/layout/components/Settings/index.vue
View File

@@ -45,11 +45,10 @@ onMounted(() => {
<el-divider>主题</el-divider> <el-divider>主题</el-divider>
<button @click="toggleDark()">当前状态是: {{ isDark }}</button> <div class="flex justify-center" @click.stop>
<el-switch
<div class="flex justify-center" @click="toggleDark()">
<el-switch
v-model="isDark" v-model="isDark"
@change="toggleDark"
inline-prompt inline-prompt
:active-icon="Sunny" :active-icon="Sunny"
:inactive-icon="Moon" :inactive-icon="Moon"

5
src/layout/components/Sidebar/index.vue
View File

@@ -1,15 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import SidebarItem from './SidebarItem.vue'; import SidebarItem from './SidebarItem.vue';
import Logo from './Logo.vue'; import Logo from './Logo.vue';
import variables from '@/styles/variables.module.scss';
import { useSettingsStore } from '@/store/modules/settings'; import { useSettingsStore } from '@/store/modules/settings';
import { usePermissionStore } from '@/store/modules/permission'; import { usePermissionStore } from '@/store/modules/permission';
import { useAppStore } from '@/store/modules/app'; import { useAppStore } from '@/store/modules/app';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import variables from '@/styles/ts-variables.module.scss'
const settingsStore = useSettingsStore(); const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore(); const permissionStore = usePermissionStore();
@@ -23,7 +22,7 @@ const isCollapse = computed(() => !appStore.sidebar.opened);
const activeMenu = computed<string>(() => { const activeMenu = computed<string>(() => {
const { meta, path } = route; const { meta, path } = route;
if (meta?.activeMenu) { if (meta?.activeMenu) {
return meta.activeMenu as string; return meta.activeMenu;
} }
return path; return path;
}); });

40
src/layout/components/TagsView/index.vue
View File

@@ -1,5 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { ComponentInternalInstance } from 'vue'; import {
getCurrentInstance,
nextTick,
ref,
watch,
onMounted,
ComponentInternalInstance
} from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import path from 'path-browserify'; import path from 'path-browserify';
@@ -202,6 +209,9 @@ function closeAllTags(view: TagView) {
function openTagMenu(tag: TagView, e: MouseEvent) { function openTagMenu(tag: TagView, e: MouseEvent) {
const menuMinWidth = 105; const menuMinWidth = 105;
console.log("test",proxy?.$el)
const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
const offsetWidth = proxy?.$el.offsetWidth; // container width const offsetWidth = proxy?.$el.offsetWidth; // container width
const maxLeft = offsetWidth - menuMinWidth; // left boundary const maxLeft = offsetWidth - menuMinWidth; // left boundary
@@ -232,8 +242,8 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="tags-container">
<scroll-pane <scroll-pane
class="tags-container"
ref="scrollPaneRef" ref="scrollPaneRef"
@scroll="handleScroll" @scroll="handleScroll"
> >
@@ -249,7 +259,7 @@ onMounted(() => {
{{ translateRouteTitleI18n(tag.meta?.title) }} {{ translateRouteTitleI18n(tag.meta?.title) }}
<span <span
v-if="!isAffix(tag)" v-if="!isAffix(tag)"
class="rounded-[60%] hover:bg-gray-300" class="tags-item-close"
@click.prevent.stop="closeSelectedTag(tag)" @click.prevent.stop="closeSelectedTag(tag)"
> >
<i-ep-close class="text-[10px]" /> <i-ep-close class="text-[10px]" />
@@ -288,19 +298,19 @@ onMounted(() => {
关闭所有 关闭所有
</li> </li>
</ul> </ul>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.tags-container { .tags-container {
height: 34px; height: 34px;
width: 100%; width: 100%;
border: 1px solid #eee; border: 1px solid var(--el-border-color-light);
box-shadow: 0px 1px 1px #eee; box-shadow: 0px 1px 1px var(--el-box-shadow-light);
.tags-item { .tags-item {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
border: 1px solid #d8dce5; border: 1px solid var(--el-border-color-light);
padding: 3px 8px; padding: 3px 8px;
font-size: 12px; font-size: 12px;
margin: 4px 0 0 5px; margin: 4px 0 0 5px;
@@ -321,7 +331,7 @@ onMounted(() => {
background-color: var(--el-color-primary); background-color: var(--el-color-primary);
color: #fff; color: #fff;
border-color: var(--el-color-primary); border-color: var(--el-color-primary);
&::before { &::before {
content: ''; content: '';
background: #fff; background: #fff;
display: inline-block; display: inline-block;
@@ -330,7 +340,21 @@ onMounted(() => {
border-radius: 50%; border-radius: 50%;
margin-right: 5px; 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)
}
}
} }
} }

11
src/layout/index.vue
View File

@@ -10,6 +10,7 @@ import { useSettingsStore } from '@/store/modules/settings';
const { width } = useWindowSize(); const { width } = useWindowSize();
/** /**
* 响应式布局容器固定宽度 * 响应式布局容器固定宽度
* *
@@ -82,11 +83,13 @@ function handleOutsideClick() {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/styles/mixin.scss';
@import '@/styles/variables.module.scss';
.app-wrapper { .app-wrapper {
@include clearfix; &:after {
content: '';
display: table;
clear: both;
}
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;

20
src/styles/dark.scss
View File

@@ -1,11 +1,19 @@
// only scss variables // only scss variables
$--colors: ( $--colors: (
"primary": ( "primary": ("base": red),
"base": #589ef8,
),
); );
@forward "element-plus/theme-chalk/src/dark/var.scss" with ( @forward "element-plus/theme-chalk/src/dark/var.scss" with ($colors: $--colors);
$colors: $--colors
);
html.dark {
.navbar {
background-color: var(--el-bg-color);
color: var(--el-text-color-regular);
}
.hamburger {
fill: var(--el-text-color-regular);
}
}

0
src/styles/element-plus.scss → src/styles/element.scss
View File

23
src/styles/global.scss Normal file
View File

@@ -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);
}

21
src/styles/index.scss
View File

@@ -1,20 +1,5 @@
@import 'src/styles/variables.module'; @import './element.scss';
@import 'src/styles/element-plus';
@import './sidebar.scss'; @import './sidebar.scss';
@import './tailwind.scss'; @import './tailwind.scss';
@import './reset.scss'; @import './global.scss';
@import './dark.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;
}

14
src/styles/mixin.scss
View File

@@ -1,14 +0,0 @@
@mixin clearfix {
&:after {
content: '';
display: table;
clear: both;
}
}
@mixin relative {
position: relative;
width: 100%;
height: 100%;
}

4
src/styles/reset.scss
View File

@@ -1,4 +0,0 @@
svg{
display: inline-block;
}

42
src/styles/sidebar.scss
View File

@@ -70,11 +70,11 @@
} }
} }
.is-active > .el-sub-menu__title { .is-active>.el-sub-menu__title {
color: $subMenuActiveText !important; 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 { & .el-sub-menu .el-menu-item {
min-width: $sideBarWidth !important; min-width: $sideBarWidth !important;
background-color: $subMenuBg !important; background-color: $subMenuBg !important;
@@ -88,6 +88,7 @@
.hideSidebar { .hideSidebar {
.sidebar-container { .sidebar-container {
width: 54px !important; width: 54px !important;
.svg-icon { .svg-icon {
margin-right: 0px; margin-right: 0px;
} }
@@ -117,7 +118,7 @@
.el-sub-menu { .el-sub-menu {
overflow: hidden; overflow: hidden;
& > .el-sub-menu__title { &>.el-sub-menu__title {
padding: 0 !important; padding: 0 !important;
.svg-icon { .svg-icon {
@@ -136,8 +137,8 @@
.el-menu--collapse { .el-menu--collapse {
.el-sub-menu { .el-sub-menu {
& > .el-sub-menu__title { &>.el-sub-menu__title {
& > span { &>span {
height: 0; height: 0;
width: 0; width: 0;
overflow: hidden; overflow: hidden;
@@ -174,6 +175,7 @@
} }
.withoutAnimation { .withoutAnimation {
.main-container, .main-container,
.sidebar-container { .sidebar-container {
transition: none; transition: none;
@@ -183,17 +185,18 @@
// when menu collapsed // when menu collapsed
.el-menu--vertical { .el-menu--vertical {
& > .el-menu { &>.el-menu {
.svg-icon { .svg-icon {
margin-right: 16px; margin-right: 16px;
} }
.sub-el-icon { .sub-el-icon {
margin-right: 12px; margin-right: 12px;
margin-left: -2px; margin-left: -2px;
} }
} }
.nest-menu .el-sub-menu > .el-sub-menu__title, .nest-menu .el-sub-menu>.el-sub-menu__title,
.el-menu-item { .el-menu-item {
&:hover { &:hover {
// you can use $subMenuHover // you can use $subMenuHover
@@ -202,7 +205,7 @@
} }
// the scroll bar appears when the subMenu is too long // the scroll bar appears when the subMenu is too long
> .el-menu--popup { >.el-menu--popup {
max-height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-y: auto;
@@ -219,25 +222,4 @@
border-radius: 20px; 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;
}
}

6
src/styles/ts-variables.module.scss Normal file
View File

@@ -0,0 +1,6 @@
// 导出 variables.module.scss 变量提供给TypeScript使用
:export {
menuBg: $menuBg;
menuText: $menuText;
menuActiveText: $menuActiveText
}

20
src/styles/variables.module.scss
View File

@@ -1,25 +1,11 @@
// sidebar // 全局SCSS变量
$menuText: #bfcbd9; $menuText: #bfcbd9;
$menuActiveText: #409eff; $menuActiveText: #409eff;
$subMenuActiveText: #f4f4f5;
$menuBg: #304156; $menuBg: #304156;
$menuHover: #263445; $menuHover: #263445;
$subMenuBg: #1f2d3d; $subMenuBg: #1f2d3d;
$subMenuActiveText: #f4f4f5;
$subMenuHover: #001528; $subMenuHover: #001528;
$sideBarWidth: 210px; $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;
}

2
src/types/auto-imports.d.ts vendored
View File

@@ -108,6 +108,7 @@ declare global {
const useArrayMap: typeof import('@vueuse/core')['useArrayMap'] const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce'] const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
const useArraySome: typeof import('@vueuse/core')['useArraySome'] const useArraySome: typeof import('@vueuse/core')['useArraySome']
const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue'] const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
const useAsyncState: typeof import('@vueuse/core')['useAsyncState'] const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
const useAttrs: typeof import('vue')['useAttrs'] const useAttrs: typeof import('vue')['useAttrs']
@@ -373,6 +374,7 @@ declare module 'vue' {
readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']> readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']> readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']> 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 useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']> readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']> readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>

189
src/views/dashboard/components/Team/index.vue
View File

@@ -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"> <script setup lang="ts">
import { nextTick, onMounted, reactive, ref, toRefs, watchEffect } from 'vue'; import { nextTick, onMounted, reactive, ref, toRefs, watchEffect } from 'vue';
@@ -109,10 +36,10 @@ const { teamActiveName, developers, colors, indicatorImgUrl } = toRefs(state);
let bScroll = reactive({}); let bScroll = reactive({});
const dev_wrapper = ref<HTMLElement | any>(null); const developer_container = ref<HTMLElement | any>(null);
onMounted(() => { onMounted(() => {
bScroll = new BScroll(dev_wrapper.value, { bScroll = new BScroll(developer_container.value, {
mouseWheel: true, //开启鼠标滚轮 mouseWheel: true, //开启鼠标滚轮
disableMouse: false, //启用鼠标拖动 disableMouse: false, //启用鼠标拖动
scrollX: true //X轴滚动启用 scrollX: true //X轴滚动启用
@@ -126,8 +53,80 @@ watchEffect(() => {
}); });
</script> </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> <style lang="scss" scoped>
.component-container {
.team-card { .team-card {
font-size: 14px; font-size: 14px;
@@ -137,17 +136,17 @@ watchEffect(() => {
} }
} }
.developer { .developer-container {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
&__container { .developer-list {
display: inline-flex; display: inline-flex;
overflow: hidden; overflow: hidden;
justify-content: flex-start; justify-content: flex-start;
padding: 10px; padding: 10px;
.developer__item { .developer-item {
&:not(:first-child) { &:not(:first-child) {
margin-left: 20px; margin-left: 20px;
} }
@@ -157,40 +156,39 @@ watchEffect(() => {
width: 180px; width: 180px;
min-width: 180px; min-width: 180px;
.developer__inner { .developer-item-wrapper {
border: 1px solid #cccccc; border: 1px solid var(--el-border-color-light);
border-radius: 5px; border-radius: 5px;
box-shadow: 6px 6px 6px #aaa; box-shadow: var(--el-box-shadow-lighter);
padding: 8px; padding: 8px;
text-align: center; text-align: center;
.developer__img { .developer-img {
height: 100px; height: 100px;
width: 100px; width: 100px;
} }
.developer__info { .developer-info {
padding: 6px; padding: 6px;
font-size: 14px; font-size: 14px;
.developer__position { .developer-info-position {
margin-top: 10px; margin-top: 10px;
} }
.developer__homepage { .developer-info-homepage {
margin-top: 16px; margin-top: 16px;
a { a {
display: inline-block; display: inline-block;
padding: 4px 10px; padding: 4px 10px;
color: #409eff; color: var(--el-color-primary);
border: 1px solid #409eff; border: 1px solid var(--el-color-primary);
border-radius: 5px; border-radius: 5px;
background: #ecf5ff; background: var(--el-color-primary-light-9);
&:hover { &:hover {
background: #409eff; background: var(--el-color-primary);
color: #ffffff; color: var(--el-color-white);
} }
} }
} }
@@ -199,7 +197,7 @@ watchEffect(() => {
} }
} }
&__indicator { .developer-indicator {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
@@ -214,7 +212,7 @@ watchEffect(() => {
font-weight: bold; font-weight: bold;
} }
&__desc { &-way {
margin-top: 20px; margin-top: 20px;
color: #409eff; color: #409eff;
font-weight: bold; font-weight: bold;
@@ -229,12 +227,11 @@ watchEffect(() => {
} }
} }
.fw-b { .fw-b {
font-weight: bold; font-weight: bold;
} }
.f-ml { .f-ml {
margin-left: 5px; margin-left: 5px;
} }
}
</style> </style>

39
src/views/dashboard/index.vue
View File

@@ -19,8 +19,8 @@ import Team from './components/Team/index.vue';
<github-corner class="github-corner" /> <github-corner class="github-corner" />
<!-- 数据 --> <!-- 数据 -->
<el-row :gutter="40" class="card-panel__col"> <el-row :gutter="40" class="mb-[12px]">
<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">
<div class="card-panel-icon-wrapper icon-user"> <div class="card-panel-icon-wrapper icon-user">
<svg-icon icon-class="uv" size="4em" /> <svg-icon icon-class="uv" size="4em" />
@@ -32,7 +32,7 @@ import Team from './components/Team/index.vue';
</div> </div>
</el-col> </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">
<div class="card-panel-icon-wrapper icon-message"> <div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" size="4em" /> <svg-icon icon-class="message" size="4em" />
@@ -44,7 +44,7 @@ import Team from './components/Team/index.vue';
</div> </div>
</el-col> </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">
<div class="card-panel-icon-wrapper icon-money"> <div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="money" size="4em" /> <svg-icon icon-class="money" size="4em" />
@@ -55,7 +55,7 @@ import Team from './components/Team/index.vue';
</div> </div>
</div> </div>
</el-col> </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">
<div class="card-panel-icon-wrapper icon-shopping"> <div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="shopping" size="4em" /> <svg-icon icon-class="shopping" size="4em" />
@@ -71,19 +71,19 @@ import Team from './components/Team/index.vue';
<!-- 项目 + 团队成员介绍 --> <!-- 项目 + 团队成员介绍 -->
<el-row :gutter="40"> <el-row :gutter="40">
<!-- 项目介绍 --> <!-- 项目介绍 -->
<el-col :md="12" :lg="12" class="card-panel__col"> <el-col :md="12" :lg="12" class="mb-[12px]">
<Project /> <Project />
</el-col> </el-col>
<!-- 团队介绍 --> <!-- 团队介绍 -->
<el-col :md="12" :lg="12" class="card-panel__col"> <el-col :md="12" :lg="12" class="mb-[12px]">
<Team /> <Team />
</el-col> </el-col>
</el-row> </el-row>
<!-- Echarts 图表 --> <!-- Echarts 图表 -->
<el-row :gutter="40" style="margin-top: 20px"> <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 <BarChart
id="barChart" id="barChart"
height="400px" height="400px"
@@ -92,7 +92,7 @@ import Team from './components/Team/index.vue';
/> />
</el-col> </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 <PieChart
id="pieChart" id="pieChart"
height="400px" height="400px"
@@ -101,7 +101,7 @@ import Team from './components/Team/index.vue';
/> />
</el-col> </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 <RadarChart
id="radarChart" id="radarChart"
height="400px" height="400px"
@@ -116,7 +116,7 @@ import Team from './components/Team/index.vue';
<style lang="scss" scoped> <style lang="scss" scoped>
.dashboard-container { .dashboard-container {
padding: 24px; padding: 24px;
background-color: rgb(240, 242, 245); background-color:var(--el-bg-color-page);
position: relative; position: relative;
.github-corner { .github-corner {
@@ -147,7 +147,7 @@ import Team from './components/Team/index.vue';
padding-top: 30px; padding-top: 30px;
.el-table { .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 { .card-panel {
height: 108px; height: 108px;
@@ -166,10 +163,10 @@ import Team from './components/Team/index.vue';
font-size: 12px; font-size: 12px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
color: #666; color: var(--el-text-color-regular);
background: #fff; background: var(--el-bg-color-overlay);
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05); box-shadow:var(--el-box-shadow-dark);
border-color: rgba(0, 0, 0, 0.05); border-color:var(--el-border-color);
.icon-message { .icon-message {
color: #36a3f7; color: #36a3f7;
@@ -224,7 +221,7 @@ import Team from './components/Team/index.vue';
.card-panel-text { .card-panel-text {
line-height: 18px; line-height: 18px;
color: rgba(0, 0, 0, 0.45); color: var(--el-text-color-secondary);
font-size: 16px; font-size: 16px;
margin-bottom: 12px; margin-bottom: 12px;
} }
@@ -237,7 +234,7 @@ import Team from './components/Team/index.vue';
} }
.chart-container { .chart-container {
background: #ffffff; background: var(--el-bg-color-overlay);
} }
} }
</style> </style>

17
vite.config.ts
View File

@@ -23,6 +23,18 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
'@': pathSrc '@': pathSrc
} }
}, },
css: {
// CSS 预处理器
preprocessorOptions: {
//define global scss variable
scss: {
javascriptEnabled: true,
additionalData: `
@use "@/styles/variables.module.scss" as *;
`
}
}
},
// 本地反向代理解决浏览器跨域限制 // 本地反向代理解决浏览器跨域限制
server: { server: {
host: '0.0.0.0', host: '0.0.0.0',
@@ -63,6 +75,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
dts: path.resolve(pathSrc, 'types', 'auto-imports.d.ts') dts: path.resolve(pathSrc, 'types', 'auto-imports.d.ts')
}), }),
Components({ Components({
resolvers: [ resolvers: [
// 自动注册图标组件 // 自动注册图标组件
@@ -86,7 +99,9 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
iconDirs: [path.resolve(pathSrc, 'assets/icons')], iconDirs: [path.resolve(pathSrc, 'assets/icons')],
// 指定symbolId格式 // 指定symbolId格式
symbolId: 'icon-[dir]-[name]' symbolId: 'icon-[dir]-[name]'
}) }),
] ]
}; };
}); });