feat(All):Initial
This commit is contained in:
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-button quaternary @click="show = true">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<ColorPalette />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
{{ t("layout.header.Main color") }}
|
||||
</n-tooltip>
|
||||
|
||||
<n-modal v-model:show="show" :title="t('layout.header.Main color')" preset="card"
|
||||
class="w-300 main-colors" :segmented="{ content: 'soft'}" bordered>
|
||||
<div class="flex h-80vh overflow-y-auto">
|
||||
<div class="grid grid-cols-4 gap-4 w-70%">
|
||||
<n-card v-for="color in recommendColors" :key="color.hex" :bordered="false" embedded
|
||||
hoverable class="w-full cursor-pointer" @click="globalConfigStore.setPrimaryColor(color)">
|
||||
<div class="w-6px h-full b-rd-3px mr-5px" :style="{backgroundColor: color.hex}"></div>
|
||||
|
||||
<div class="flex flex-col justify-between h-full">
|
||||
<div class="flex items-end mb-1">
|
||||
<h4 class="text-14px">{{color.name}}</h4>
|
||||
<span class="text-10px text-gray-400 ml-5px">{{ color.pinyin.toUpperCase() }}</span>
|
||||
</div>
|
||||
|
||||
<div class="text-13px">
|
||||
{{color.hex}} <n-divider vertical /> {{`RGB(${color.RGB[0]},${color.RGB[1]},${color.RGB[2]})`}}
|
||||
</div>
|
||||
</div>
|
||||
</n-card>
|
||||
|
||||
<n-divider class="grid-col-start-1 grid-col-end-5" />
|
||||
|
||||
<n-card v-for="color in colors" :key="color.hex" :bordered="false" embedded
|
||||
hoverable class="w-full cursor-pointer" @click="globalConfigStore.setPrimaryColor(color)">
|
||||
<div class="w-6px h-full b-rd-3px mr-5px" :style="{backgroundColor: color.hex}"></div>
|
||||
|
||||
<div class="flex flex-col justify-between h-full">
|
||||
<div class="flex items-end mb-1">
|
||||
<h4 class="text-14px">{{color.name}}</h4>
|
||||
<span class="text-10px text-gray-400 ml-5px">{{ color.pinyin.toUpperCase() }}</span>
|
||||
</div>
|
||||
|
||||
<div class="text-13px">
|
||||
{{color.hex}} <n-divider vertical /> {{`RGB(${color.RGB[0]},${color.RGB[1]},${color.RGB[2]})`}}
|
||||
</div>
|
||||
</div>
|
||||
</n-card>
|
||||
</div>
|
||||
|
||||
<div class="w-30% h-full flex justify-center items-center absolute top-0 right-0">
|
||||
<n-card class="w-60% h-60%" content-class="w-full h-full flex justify-around overflow-y-auto color-show" :content-style="{backgroundColor: primaryColor.hex}">
|
||||
<div class="c-#FFF h-full flex flex-col justify-center items-center">
|
||||
<h1 class="text-60px mb-5px w-60px ">{{primaryColor.name}}</h1>
|
||||
<p>{{primaryColor.pinyin.toUpperCase()}}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col text-12px c-#fff">
|
||||
<n-divider />
|
||||
<span>C</span>
|
||||
<n-progress type="circle" :stroke-width="5" class="!w-50px" unit=""
|
||||
:percentage="primaryColor.CMYK[0]" color="#0093D3" indicator-text-color="#0093D3"/>
|
||||
<n-divider />
|
||||
<span>M</span>
|
||||
<n-progress type="circle" :stroke-width="5" class="!w-50px" unit=""
|
||||
:percentage="primaryColor.CMYK[1]" color="#CC006B" indicator-text-color="#CC006B"/>
|
||||
<n-divider />
|
||||
<span>Y</span>
|
||||
<n-progress type="circle" :stroke-width="5" class="!w-50px" unit=""
|
||||
:percentage="primaryColor.CMYK[2]" color="#FFF10C" indicator-text-color="#FFF10C"/>
|
||||
<n-divider />
|
||||
<span>K</span>
|
||||
<n-progress type="circle" :stroke-width="5" class="!w-50px" unit=""
|
||||
:percentage="primaryColor.CMYK[3]" color="#333" indicator-text-color="#333"/>
|
||||
<n-divider />
|
||||
<span>R</span>
|
||||
<div class="text-16px text-end">{{primaryColor.RGB[0]}}</div>
|
||||
<n-divider />
|
||||
<span>G</span>
|
||||
<div class="text-16px text-end">{{primaryColor.RGB[1]}}</div>
|
||||
<n-divider />
|
||||
<span>B</span>
|
||||
<div class="text-16px text-end">{{primaryColor.RGB[2]}}</div>
|
||||
<n-divider />
|
||||
</div>
|
||||
</n-card>
|
||||
</div>
|
||||
</div>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {onMounted,ref,computed} from "vue";
|
||||
import {ColorPalette} from "@vicons/carbon";
|
||||
import {useGlobalConfigStore} from "@/store/modules/globalConfig";
|
||||
import {t} from "@/language";
|
||||
import ChineseColors from "@/assets/color/ChineseColors.json";
|
||||
import Recommend from "@/assets/color/recommend.json";
|
||||
|
||||
const globalConfigStore = useGlobalConfigStore();
|
||||
|
||||
const show = ref(false);
|
||||
const recommendColors = ref<IConfig.Color[]>(Recommend);
|
||||
const colors = ref<IConfig.Color[]>(ChineseColors);
|
||||
const primaryColor = computed(() => globalConfigStore.mainColor as IConfig.Color);
|
||||
|
||||
onMounted(() => {
|
||||
getColors();
|
||||
})
|
||||
|
||||
function getColors() {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.n-card{
|
||||
:deep(&__content){
|
||||
flex: unset;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
|
||||
&:first-child{
|
||||
padding-top:10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.n-divider:not(.n-divider--vertical){
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
:deep(.n-divider__line){
|
||||
background-color: #F3F3F3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.main-colors{
|
||||
background-color:var(--n-color) !important;
|
||||
|
||||
.n-card-header{
|
||||
.n-base-close{
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-show{
|
||||
background-image: url(/static/images/color-texture.png);
|
||||
background-color: #ddd;
|
||||
transition: background-color 1s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<n-popselect v-model:value="value" :options="options" @update:value="setLocale">
|
||||
<n-button quaternary class="mr-1">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<Language />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-popselect>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from "vue";
|
||||
import {Language} from "@vicons/carbon";
|
||||
import {useGlobalConfigStore} from "@/store/modules/globalConfig";
|
||||
import {setLocale} from "@/language";
|
||||
|
||||
const globalConfigStore = useGlobalConfigStore();
|
||||
const value = ref(<string>globalConfigStore.locale);
|
||||
const options = [
|
||||
{ label: '中文', value: 'zh-CN' },
|
||||
{ label: 'English', value: 'en-US' }
|
||||
];
|
||||
</script>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-button quaternary @click="show = true">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<Settings />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
{{ t("setting.Setting") }}
|
||||
</n-tooltip>
|
||||
|
||||
<n-modal v-model:show="show" display-directive="show" :z-index="zIndex" class="w-100 h-40vh">
|
||||
<n-card size="small">
|
||||
<SettingTabs />
|
||||
</n-card>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref,onMounted} from "vue";
|
||||
import {Settings} from "@vicons/carbon";
|
||||
import {t} from "@/language";
|
||||
|
||||
const show = ref(true);
|
||||
const zIndex = ref<number | undefined>(-1);
|
||||
onMounted(() => {
|
||||
show.value = false;
|
||||
zIndex.value = undefined;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.n-tab-pane{
|
||||
width: 100%;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-button quaternary @click="globalConfigStore.setTheme()" class="mr-1">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<component :is="component"/>
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
{{ tooltip }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed,ref} from "vue";
|
||||
import {Contrast, LightFilled, AsleepFilled} from "@vicons/carbon";
|
||||
import {useGlobalConfigStore} from "@/store/modules/globalConfig";
|
||||
import {t} from "@/language";
|
||||
|
||||
const globalConfigStore = useGlobalConfigStore();
|
||||
const tooltip = ref(t("layout.header['Use system theme']"));
|
||||
|
||||
const component = computed(() => {
|
||||
switch (globalConfigStore.theme) {
|
||||
case "osTheme":
|
||||
tooltip.value = t("layout.header['Use system theme']");
|
||||
return Contrast;
|
||||
case "lightTheme":
|
||||
tooltip.value = t('layout.header.Undertint');
|
||||
return LightFilled;
|
||||
case "darkTheme":
|
||||
tooltip.value = t('layout.header.Dark');
|
||||
return AsleepFilled;
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user