xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-09-17 17:26:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(projects): use naive-ui color-picker

Browse Source
This commit is contained in:
Soybean 2024-01-25 18:32:00 +08:00
parent 6114b9f9bd
commit b5551d674a
2 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/layouts/modules/theme-drawer/modules/theme-color.vue
View File

@ -1,5 +1,4 @@
<script setup lang="ts">
import { ColorPicker } from '@sa/materials';
import { useThemeStore } from '@/store/modules/theme';
import { $t } from '@/locales';
import SettingItem from '../components/setting-item.vue';
@ -13,6 +12,25 @@ const themeStore = useThemeStore();
function handleUpdateColor(color: string, key: App.Theme.ThemeColorKey) {
themeStore.updateThemeColors(key, color);
}
const swatches: string[] = [
'#3b82f6',
'#6366f1',
'#8b5cf6',
'#a855f7',
'#0ea5e9',
'#06b6d4',
'#f43f5e',
'#ef4444',
'#ec4899',
'#d946ef',
'#f97316',
'#f59e0b',
'#eab308',
'#84cc16',
'#22c55e',
'#10b981'
];
</script>
<template>
@ -24,10 +42,13 @@ function handleUpdateColor(color: string, key: App.Theme.ThemeColorKey) {
{{ $t('theme.themeColor.followPrimary') }}
</NCheckbox>
</template>
<ColorPicker
:color="themeStore.themeColors[key]"
<NColorPicker
class="w-90px"
:value="themeStore.themeColors[key]"
:disabled="key === 'info' && themeStore.isInfoFollowPrimary"
@update:color="handleUpdateColor($event, key)"
:show-alpha="false"
:swatches="swatches"
@update:value="handleUpdateColor($event, key)"
/>
</SettingItem>
</div>

1
src/typings/components.d.ts vendored
View File

@ -28,6 +28,7 @@ declare module 'vue' {
NCalendar: typeof import('naive-ui')['NCalendar']
NCard: typeof import('naive-ui')['NCard']
NCheckbox: typeof import('naive-ui')['NCheckbox']
NColorPicker: typeof import('naive-ui')['NColorPicker']
NDescriptions: typeof import('naive-ui')['NDescriptions']
NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
NDialogProvider: typeof import('naive-ui')['NDialogProvider']