mirror of
https://gitee.com/dromara/go-view.git
synced 2025-02-24 08:12:49 +08:00
fix: 抽离颜色列表组件
This commit is contained in:
mtruning
parent
58d20b7c8d
commit
dd0bf5611d
75
src/components/ThemeColorSelect/components/ColorList.vue
Normal file
75
src/components/ThemeColorSelect/components/ColorList.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div
|
||||
class="content-left-item go-transition-quick"
|
||||
span="12 1000:6 1400:4 1800:4 2200:2"
|
||||
v-for="(item, index) in designColor"
|
||||
: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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { AppThemeColorType } from '@/store/modules/designStore/designStore.d'
|
||||
import designColor from '@/settings/designColor.json'
|
||||
|
||||
const emits = defineEmits(['colorSelectHandle'])
|
||||
|
||||
const colorSelectHandle = (color: AppThemeColorType) => {
|
||||
emits('colorSelectHandle', color)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-left-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 20px;
|
||||
padding: 10px 20px;
|
||||
min-width: 300px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -16,51 +16,17 @@
|
||||
<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>
|
||||
<ColorList @colorSelectHandle="colorSelectHandle" />
|
||||
</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>
|
||||
<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"
|
||||
@ -72,9 +38,7 @@
|
||||
</div>
|
||||
<div class="model-footer">
|
||||
中国色列表来自于：
|
||||
<n-a href="http://zhongguose.com">
|
||||
http://zhongguose.com
|
||||
</n-a>
|
||||
<n-a href="http://zhongguose.com">http://zhongguose.com</n-a>
|
||||
</div>
|
||||
</div>
|
||||
</n-modal>
|
||||
@ -86,16 +50,17 @@ 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'
|
||||
import { loadAsyncComponent } from '@/utils'
|
||||
|
||||
const ColorList = loadAsyncComponent(() =>
|
||||
import('./components/ColorList.vue')
|
||||
)
|
||||
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
|
||||
})
|
||||
|
||||
@ -106,7 +71,7 @@ const colorSelectHandle = (color: AppThemeColorType) => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$height: 85vh;
|
||||
@include go('system-color-setting') {
|
||||
@include go("system-color-setting") {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -117,7 +82,7 @@ $height: 85vh;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
@extend .go-background-filter;
|
||||
@include hover-border-color('background-color5');
|
||||
@include hover-border-color("background-color5");
|
||||
.title {
|
||||
margin: 0;
|
||||
}
|
||||
@ -128,41 +93,7 @@ $height: 85vh;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
margin-right: 200px;
|
||||
}
|
||||
/* 右侧 */
|
||||
.content-right {
|
||||
@ -187,7 +118,7 @@ $height: 85vh;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
border-radius: 3px;
|
||||
background-image: url('~@/assets/images/exception/texture.png');
|
||||
background-image: url("@/assets/images/exception/texture.png");
|
||||
}
|
||||
.color-name {
|
||||
font-family: serif;
|
||||
|
||||
@ -15,6 +15,10 @@ export const getThemeOverridesHook = () => {
|
||||
// 通用
|
||||
const commonObj = {
|
||||
common: {
|
||||
primaryColor: getAppTheme.value,
|
||||
primaryColorHover: toLight(getAppTheme.value, 6),
|
||||
primaryColorPressed: toLight(getAppTheme.value, 6),
|
||||
primaryColorSuppl: getAppTheme.value,
|
||||
borderRadius
|
||||
}
|
||||
}
|
||||
@ -27,10 +31,6 @@ export const getThemeOverridesHook = () => {
|
||||
// 暗色主题
|
||||
const dartObject = {
|
||||
common: {
|
||||
primaryColor: getAppTheme.value,
|
||||
primaryColorHover: toLight(getAppTheme.value, 6),
|
||||
primaryColorPressed: toLight(getAppTheme.value, 6),
|
||||
primaryColorSuppl: getAppTheme.value,
|
||||
...commonObj.common
|
||||
},
|
||||
LoadingBar: {
|
||||
|
||||
@ -4,8 +4,6 @@ import designColor from './designColor.json'
|
||||
// 默认语言
|
||||
export const lang = LangEnum.zh
|
||||
|
||||
// 主体色
|
||||
export const appThemeList = designColor
|
||||
|
||||
export const theme = {
|
||||
// 默认是否开启深色主题
|
||||
@ -13,8 +11,6 @@ export const theme = {
|
||||
//默认主题色
|
||||
appTheme: '#51d6a9',
|
||||
appThemeDetail: null,
|
||||
//系统内置主题色列表
|
||||
appThemeList
|
||||
}
|
||||
|
||||
// dialog 图标的大小
|
||||
|
||||
@ -16,6 +16,4 @@ export interface DesignStateType {
|
||||
//色号
|
||||
appTheme: string
|
||||
appThemeDetail: AppThemeColorType | null
|
||||
//系统内置风格
|
||||
appThemeList: AppThemeColorType[]
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ import { ThemeEnum } from '@/enums/styleEnum'
|
||||
|
||||
const { GO_DESIGN_STORE } = StorageEnum
|
||||
|
||||
const { darkTheme, appTheme, appThemeList, appThemeDetail } = theme
|
||||
const { darkTheme, appTheme, appThemeDetail } = theme
|
||||
|
||||
const storageDesign = getLocalStorage(GO_DESIGN_STORE)
|
||||
|
||||
@ -22,8 +22,6 @@ export const useDesignStore = defineStore({
|
||||
// 颜色色号
|
||||
appTheme,
|
||||
appThemeDetail,
|
||||
// 颜色列表
|
||||
appThemeList,
|
||||
},
|
||||
getters: {
|
||||
getDarkTheme(e): boolean {
|
||||
@ -34,9 +32,6 @@ export const useDesignStore = defineStore({
|
||||
},
|
||||
getAppThemeDetail(): AppThemeColorType | null {
|
||||
return this.appThemeDetail
|
||||
},
|
||||
getAppThemeList(): AppThemeColorType[] {
|
||||
return this.appThemeList
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user