mirror of
https://gitee.com/dromara/go-view.git
synced 2026-04-23 00:00:12 +08:00
feat: 新增主题颜色选择
This commit is contained in:
MTrun
@@ -0,0 +1,3 @@
|
||||
import ThemeColorSelect from './index.vue';
|
||||
|
||||
export { ThemeColorSelect };
|
||||
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<n-button quaternary @click="modelShow = true" title="颜色">
|
||||
<n-icon size="20" :depth="1">
|
||||
<ColorWandIcon />
|
||||
</n-icon>
|
||||
</n-button>
|
||||
<n-modal v-model:show="modelShow">
|
||||
<div class="go-system-color-setting">
|
||||
<n-space justify="space-between">
|
||||
<n-h3 class="title">主题颜色选择</n-h3>
|
||||
<n-icon size="20" class="go-cursor-pointer" @click="modelShow = false">
|
||||
<CloseIcon />
|
||||
</n-icon>
|
||||
</n-space>
|
||||
<n-divider />
|
||||
<div class="model-content">
|
||||
<n-scrollbar>
|
||||
<div class="content-left">
|
||||
<n-grid x-gap="12" cols="2 600:3 1150:4 1600: 5">
|
||||
<n-gi
|
||||
class="content-left-item go-transition-quick"
|
||||
v-for="(item, index) in appThemeList"
|
||||
:key="index"
|
||||
@click="colorSelectHandle(item)"
|
||||
>
|
||||
<n-space>
|
||||
<div
|
||||
class="content-left-item-color"
|
||||
:style="{ backgroundColor: item.hex }"
|
||||
/>
|
||||
<n-space vertical>
|
||||
<n-space>
|
||||
<span :style="{ color: item.hex }">
|
||||
{{ item.name }}
|
||||
</span>
|
||||
<span class="Pinyin-upper">
|
||||
{{ item.pinyin.toUpperCase() }}
|
||||
</span>
|
||||
</n-space>
|
||||
<n-text>
|
||||
{{ item.hex }}
|
||||
<n-divider vertical />
|
||||
{{
|
||||
`rgb(${item.RGB[0]}, ${item.RGB[0]}, ${item.RGB[0]})`
|
||||
}}
|
||||
</n-text>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
<div class="content-right">
|
||||
<div class="color-name-detail">
|
||||
<n-text v-if="appThemeDetail" class="color-name">
|
||||
{{ appThemeDetail.name }}
|
||||
</n-text>
|
||||
<n-text v-else="appThemeDetail" class="color-name">
|
||||
中国色
|
||||
</n-text>
|
||||
<n-text v-if="appThemeDetail" class="color-name-Pinyin">
|
||||
{{ appThemeDetail.pinyin.toUpperCase() }}
|
||||
</n-text>
|
||||
<div
|
||||
v-if="appThemeDetail"
|
||||
class="select-color"
|
||||
:style="{ backgroundColor: designStore.appTheme }"
|
||||
/>
|
||||
</div>
|
||||
<img :src="themeColorLogo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="model-footer">
|
||||
中国色列表来自于：
|
||||
<n-a href="http://zhongguose.com">
|
||||
http://zhongguose.com
|
||||
</n-a>
|
||||
</div>
|
||||
</div>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||
import { AppThemeColorType } from '@/store/modules/designStore/designStore.d'
|
||||
import { icon } from '@/plugins'
|
||||
import themeColorLogo from '@/assets/images/exception/theme-color.png'
|
||||
|
||||
const { ColorWandIcon, CloseIcon } = icon.ionicons5
|
||||
|
||||
const designStore = useDesignStore()
|
||||
const modelShow = ref(false)
|
||||
|
||||
const { appThemeList } = designStore
|
||||
|
||||
const appThemeDetail = computed(() => {
|
||||
console.log(designStore.getAppThemeDetail)
|
||||
return designStore.getAppThemeDetail
|
||||
})
|
||||
|
||||
const colorSelectHandle = (color: AppThemeColorType) => {
|
||||
designStore.setAppColor(color)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$height: 85vh;
|
||||
@include go('system-color-setting') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
min-width: 1000px;
|
||||
padding: 20px 25px;
|
||||
height: $height;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
@extend .go-background-filter;
|
||||
@include hover-border-color('background-color5');
|
||||
.title {
|
||||
margin: 0;
|
||||
}
|
||||
.model-content {
|
||||
flex: 1;
|
||||
height: calc(#{$height} - 40px - 48px - 36px);
|
||||
/* 左侧 */
|
||||
.content-left {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 300px;
|
||||
/* 每个项 */
|
||||
&-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
&:hover {
|
||||
@include hover-border-color('background-color5');
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.7;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
@extend .go-background-filter-shallow;
|
||||
}
|
||||
&-color {
|
||||
width: 8px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.Pinyin-upper {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 右侧 */
|
||||
.content-right {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
right: 50px;
|
||||
top: 0px;
|
||||
.color-name-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 40px;
|
||||
.go-flex-items-center {
|
||||
flex-direction: column;
|
||||
}
|
||||
.select-color {
|
||||
margin-top: 20px;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
border-radius: 3px;
|
||||
background-image: url('~@/assets/images/exception/texture.png');
|
||||
}
|
||||
.color-name {
|
||||
font-family: serif;
|
||||
font-size: 80px;
|
||||
color: #fff;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: 110px;
|
||||
text-align: center;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.color-name-Pinyin {
|
||||
text-align: center;
|
||||
font-family: Georgia;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.model-footer {
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user