feat: 优化主题切换代码

This commit is contained in:
奔跑的面条 2024-12-18 09:01:21 +08:00
parent 5d6850b47d
commit 026e4809c8

View File

@ -7,17 +7,15 @@
size="small" size="small"
@click="selectThemeHandle(item)" @click="selectThemeHandle(item)"
> >
<div class="go-flex-items-center"> <n-ellipsis class="go-mr-1" style="text-align: left">{{ item.name }} </n-ellipsis>
<n-ellipsis style="text-align: left; width: 72px">{{ item.name }} </n-ellipsis> <n-space :wrap="false" :wrap-item="false" :size="2">
<n-space :wrap-item="false" :size="2"> <span
<span class="theme-color-item"
class="theme-color-item" v-for="colorItem in item.colors"
v-for="colorItem in item.colors" :key="colorItem"
:key="colorItem" :style="{ backgroundColor: colorItem }"
:style="{ backgroundColor: colorItem }" ></span>
></span> </n-space>
</n-space>
</div>
</div> </div>
</n-gi> </n-gi>
</n-grid> </n-grid>
@ -30,17 +28,15 @@
size="small" size="small"
@click="selectThemeHandle(item)" @click="selectThemeHandle(item)"
> >
<div class="go-flex-items-center"> <n-ellipsis class="go-mr-2" style="text-align: left">{{ item.name }} </n-ellipsis>
<n-ellipsis style="text-align: left; width: 72px">{{ item.name }} </n-ellipsis> <n-space :wrap="false" :wrap-item="false" :size="2">
<n-space :wrap-item="false" :size="2"> <span
<span class="theme-color-item"
class="theme-color-item" v-for="colorItem in item.colors"
v-for="colorItem in item.colors" :key="colorItem"
:key="colorItem" :style="{ backgroundColor: colorItem }"
:style="{ backgroundColor: colorItem }" ></span>
></span> </n-space>
</n-space>
</div>
</div> </div>
</n-gi> </n-gi>
</n-grid> </n-grid>
@ -227,17 +223,16 @@ $radius: 6px;
$itemRadius: 2px; $itemRadius: 2px;
.theme-item { .theme-item {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
height: 34px; height: 34px;
padding: 0 16px; padding: 0 8px;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
border-radius: $radius; border-radius: $radius;
@include fetch-bg-color('background-color4-shallow'); @include fetch-bg-color('background-color4-shallow');
&.active { &.active {
/* border: 1px solid v-bind('themeColor'); */
/* border-bottom: 1px solid rgba(0, 0, 0, 0); */
color: v-bind('themeColor'); color: v-bind('themeColor');
} }
.theme-color-item { .theme-color-item {