openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Demo:优化主题侧边栏的交互

Browse Source
This commit is contained in:
wanglin2 2025-04-05 21:01:38 +08:00
parent 121eba1799
commit cd2d5943c2
1 changed files with 61 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
web/src/pages/Edit/components/Theme.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Sidebar ref="sidebar" :title="$t('theme.title')"> <Sidebar ref="sidebar" :title="$t('theme.title')">
<div class="themeList" :class="{ isDark: isDark }"> <div class="themeGroupList" :class="{ isDark: isDark }">
<el-tabs v-model="activeName"> <el-tabs v-model="activeName" class="tabBox">
<el-tab-pane <el-tab-pane
v-for="group in groupList" v-for="group in groupList"
:key="group.name" :key="group.name"
@ -9,17 +9,19 @@
:name="group.name" :name="group.name"
></el-tab-pane> ></el-tab-pane>
</el-tabs> </el-tabs>
<div <div class="themeListTheme customScrollbar">
class="themeItem" <div
v-for="item in currentList" class="themeItem"
:key="item.value" v-for="item in currentList"
@click="useTheme(item)" :key="item.value"
:class="{ active: item.value === theme }" @click="useTheme(item)"
> :class="{ active: item.value === theme }"
<div class="imgBox"> >
<img :src="item.img || themeImgMap[item.value]" alt="" /> <div class="imgBox">
<img :src="item.img || themeImgMap[item.value]" alt="" />
</div>
<div class="name">{{ item.name }}</div>
</div> </div>
<div class="name">{{ item.name }}</div>
</div> </div>
</div> </div>
</Sidebar> </Sidebar>
@ -205,9 +207,11 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.themeList { .themeGroupList {
padding: 20px; display: flex;
padding-top: 0; flex-direction: column;
overflow: hidden;
height: 100%;
&.isDark { &.isDark {
.name { .name {
@ -215,40 +219,55 @@ export default {
} }
} }
.themeItem { .tabBox {
width: 100%; flex-shrink: 0;
cursor: pointer;
border-bottom: 1px solid #e9e9e9;
margin-bottom: 20px;
padding-bottom: 20px;
transition: all 0.2s;
border: 3px solid transparent;
border-radius: 5px;
overflow: hidden;
&:last-of-type { /deep/ .el-tabs__nav-wrap {
border: none; display: flex;
justify-content: center;
} }
}
&:hover { .themeListTheme {
box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), height: 100%;
0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09); overflow-y: auto;
} padding: 0 20px;
&.active { .themeItem {
border: 3px solid rgb(154, 198, 250);
}
.imgBox {
width: 100%; width: 100%;
cursor: pointer;
border-bottom: 1px solid #e9e9e9;
margin-bottom: 20px;
padding-bottom: 20px;
transition: all 0.2s;
border: 3px solid transparent;
border-radius: 5px;
overflow: hidden;
img { &:last-of-type {
width: 100%; border: none;
}
&:hover {
box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
}
&.active {
border: 3px solid rgb(154, 198, 250);
}
.imgBox {
width: 100%;
img {
width: 100%;
}
}
.name {
text-align: center;
font-size: 14px;
} }
}
.name {
text-align: center;
font-size: 14px;
} }
} }
} }