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

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

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