mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
refactor(projects): all file and folder use kebab-case
This commit is contained in:
Soybean
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<n-divider title-placement="center">主题模式</n-divider>
|
||||
<n-space vertical size="large">
|
||||
<setting-menu label="深色主题">
|
||||
<n-switch :value="theme.darkMode" @update:value="theme.setDarkMode">
|
||||
<template #checked>
|
||||
<icon-mdi-white-balance-sunny class="text-14px text-primary" />
|
||||
</template>
|
||||
<template #unchecked>
|
||||
<icon-mdi-moon-waning-crescent class="text-14px text-primary" />
|
||||
</template>
|
||||
</n-switch>
|
||||
</setting-menu>
|
||||
<setting-menu label="跟随系统">
|
||||
<n-switch :value="theme.followSystemTheme" @update:value="theme.setFollowSystemTheme">
|
||||
<template #checked>
|
||||
<icon-ic-baseline-do-not-disturb class="text-14px text-primary" />
|
||||
</template>
|
||||
<template #unchecked>
|
||||
<icon-ic-round-hdr-auto class="text-14px text-primary" />
|
||||
</template>
|
||||
</n-switch>
|
||||
</setting-menu>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useThemeStore } from '@/store';
|
||||
import SettingMenu from '../setting-menu/index.vue';
|
||||
|
||||
defineOptions({ name: 'DarkMode' });
|
||||
|
||||
const theme = useThemeStore();
|
||||
</script>
|
||||
<style scoped>
|
||||
:deep(.n-switch__rail) {
|
||||
background-color: #000e1c !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<n-button
|
||||
type="primary"
|
||||
:class="[{ '!right-330px': app.settingDrawerVisible }, app.settingDrawerVisible ? 'ease-out' : 'ease-in']"
|
||||
class="fixed top-360px right-14px z-10000 w-42px h-42px !p-0 transition-all duration-300"
|
||||
@click="app.toggleSettingDrawerVisible"
|
||||
>
|
||||
<icon-ant-design-close-outlined v-if="app.settingDrawerVisible" class="text-24px" />
|
||||
<icon-ant-design-setting-outlined v-else class="text-24px" />
|
||||
</n-button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useAppStore } from '@/store';
|
||||
|
||||
defineOptions({ name: 'DrawerButton' });
|
||||
|
||||
const app = useAppStore();
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
9
src/layouts/common/setting-drawer/components/index.ts
Normal file
9
src/layouts/common/setting-drawer/components/index.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import DrawerButton from './drawer-button/index.vue';
|
||||
import DarkMode from './dark-mode/index.vue';
|
||||
import LayoutMode from './layout-mode/index.vue';
|
||||
import ThemeColorSelect from './theme-color-select/index.vue';
|
||||
import PageFunc from './page-func/index.vue';
|
||||
import PageView from './page-view/index.vue';
|
||||
import ThemeConfig from './theme-config/index.vue';
|
||||
|
||||
export { DrawerButton, DarkMode, LayoutMode, ThemeColorSelect, PageFunc, PageView, ThemeConfig };
|
||||
@ -0,0 +1,3 @@
|
||||
import LayoutCheckbox from './layout-checkbox.vue';
|
||||
|
||||
export { LayoutCheckbox };
|
||||
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div
|
||||
class="border-2px rounded-6px cursor-pointer hover:border-primary"
|
||||
:class="[checked ? 'border-primary' : 'border-transparent']"
|
||||
>
|
||||
<n-tooltip :placement="activeConfig.placement" trigger="hover">
|
||||
<template #trigger>
|
||||
<div class="layout-checkbox__shadow relative w-56px h-48px bg-white rounded-4px overflow-hidden">
|
||||
<div class="absolute-lt bg-[#273352]" :class="activeConfig.menuClass"></div>
|
||||
<div class="absolute-rb bg-[#f0f2f5]" :class="activeConfig.mainClass"></div>
|
||||
</div>
|
||||
</template>
|
||||
<span>{{ label }}</span>
|
||||
</n-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import type { PopoverPlacement } from 'naive-ui';
|
||||
import type { EnumThemeLayoutMode } from '@/enum';
|
||||
|
||||
defineOptions({ name: 'LayoutCheckbox' });
|
||||
|
||||
interface Props {
|
||||
/** 布局模式 */
|
||||
mode: EnumType.ThemeLayoutMode;
|
||||
/** 布局模式文本 */
|
||||
label: EnumThemeLayoutMode;
|
||||
/** 选中状态 */
|
||||
checked: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
type LayoutConfig = Record<
|
||||
EnumType.ThemeLayoutMode,
|
||||
{
|
||||
placement: PopoverPlacement;
|
||||
menuClass: string;
|
||||
mainClass: string;
|
||||
}
|
||||
>;
|
||||
|
||||
const layoutConfig: LayoutConfig = {
|
||||
vertical: {
|
||||
placement: 'bottom-start',
|
||||
menuClass: 'w-1/3 h-full',
|
||||
mainClass: 'w-2/3 h-3/4'
|
||||
},
|
||||
'vertical-mix': {
|
||||
placement: 'bottom',
|
||||
menuClass: 'w-1/4 h-full',
|
||||
mainClass: 'w-2/3 h-3/4'
|
||||
},
|
||||
horizontal: {
|
||||
placement: 'bottom',
|
||||
menuClass: 'w-full h-1/4',
|
||||
mainClass: 'w-full h-3/4'
|
||||
},
|
||||
'horizontal-mix': {
|
||||
placement: 'bottom-end',
|
||||
menuClass: 'w-full h-1/4',
|
||||
mainClass: 'w-2/3 h-3/4'
|
||||
}
|
||||
};
|
||||
|
||||
const activeConfig = computed(() => layoutConfig[props.mode]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout-checkbox__shadow {
|
||||
box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<n-divider title-placement="center">布局模式</n-divider>
|
||||
<n-space justify="space-between">
|
||||
<layout-checkbox
|
||||
v-for="item in theme.layout.modeList"
|
||||
:key="item.value"
|
||||
:mode="item.value"
|
||||
:label="item.label"
|
||||
:checked="item.value === theme.layout.mode"
|
||||
@click="theme.setLayoutMode(item.value)"
|
||||
/>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useThemeStore } from '@/store';
|
||||
import { LayoutCheckbox } from './components';
|
||||
|
||||
defineOptions({ name: 'LayoutMode' });
|
||||
|
||||
const theme = useThemeStore();
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<n-divider title-placement="center">界面功能</n-divider>
|
||||
<n-space vertical size="large">
|
||||
<setting-menu label="侧边栏反转色">
|
||||
<n-switch :value="theme.sider.inverted" @update:value="theme.setSiderInverted" />
|
||||
</setting-menu>
|
||||
<setting-menu label="头部反转色">
|
||||
<n-switch :value="theme.header.inverted" @update:value="theme.setHeaderInverted" />
|
||||
</setting-menu>
|
||||
<setting-menu label="固定头部和多页签">
|
||||
<n-switch :value="theme.fixedHeaderAndTab" @update:value="theme.setIsFixedHeaderAndTab" />
|
||||
</setting-menu>
|
||||
<setting-menu label="顶部菜单位置">
|
||||
<n-select
|
||||
class="w-120px"
|
||||
size="small"
|
||||
:value="theme.menu.horizontalPosition"
|
||||
:options="theme.menu.horizontalPositionList"
|
||||
@update:value="theme.setHorizontalMenuPosition"
|
||||
/>
|
||||
</setting-menu>
|
||||
<setting-menu label="头部高度">
|
||||
<n-input-number
|
||||
class="w-120px"
|
||||
size="small"
|
||||
:value="theme.header.height"
|
||||
:step="1"
|
||||
@update:value="theme.setHeaderHeight"
|
||||
/>
|
||||
</setting-menu>
|
||||
<setting-menu label="多页签高度">
|
||||
<n-input-number
|
||||
class="w-120px"
|
||||
size="small"
|
||||
:value="theme.tab.height"
|
||||
:step="1"
|
||||
@update:value="theme.setTabHeight"
|
||||
/>
|
||||
</setting-menu>
|
||||
<setting-menu label="多页签缓存">
|
||||
<n-switch :value="theme.tab.isCache" @update:value="theme.setTabIsCache" />
|
||||
</setting-menu>
|
||||
<setting-menu label="侧边栏展开宽度">
|
||||
<n-input-number
|
||||
class="w-120px"
|
||||
size="small"
|
||||
:value="theme.sider.width"
|
||||
:step="10"
|
||||
@update:value="theme.setSiderWidth"
|
||||
/>
|
||||
</setting-menu>
|
||||
<setting-menu label="左侧混合侧边栏展开宽度">
|
||||
<n-input-number
|
||||
class="w-120px"
|
||||
size="small"
|
||||
:value="theme.sider.mixWidth"
|
||||
:step="5"
|
||||
@update:value="theme.setMixSiderWidth"
|
||||
/>
|
||||
</setting-menu>
|
||||
<setting-menu label="固定底部">
|
||||
<n-switch :value="theme.footer.fixed" @update:value="theme.setFooterIsFixed" />
|
||||
</setting-menu>
|
||||
<setting-menu label="显示底部">
|
||||
<n-switch :value="theme.footer.visible" @update:value="theme.setFooterVisible" />
|
||||
</setting-menu>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useThemeStore } from '@/store';
|
||||
import SettingMenu from '../setting-menu/index.vue';
|
||||
|
||||
defineOptions({ name: 'PageFunc' });
|
||||
|
||||
const theme = useThemeStore();
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<n-divider title-placement="center">界面显示</n-divider>
|
||||
<n-space vertical size="large">
|
||||
<setting-menu label="面包屑">
|
||||
<n-switch :value="theme.header.crumb.visible" @update:value="theme.setHeaderCrumbVisible" />
|
||||
</setting-menu>
|
||||
<setting-menu label="面包屑图标">
|
||||
<n-switch :value="theme.header.crumb.showIcon" @update:value="theme.setHeaderCrumbIconVisible" />
|
||||
</setting-menu>
|
||||
<setting-menu label="多页签">
|
||||
<n-switch :value="theme.tab.visible" @update:value="theme.setTabVisible" />
|
||||
</setting-menu>
|
||||
<setting-menu label="多页签风格">
|
||||
<n-select
|
||||
class="w-120px"
|
||||
size="small"
|
||||
:value="theme.tab.mode"
|
||||
:options="theme.tab.modeList"
|
||||
@update:value="theme.setTabMode"
|
||||
/>
|
||||
</setting-menu>
|
||||
<setting-menu label="页面切换动画">
|
||||
<n-switch :value="theme.page.animate" @update:value="theme.setPageIsAnimate" />
|
||||
</setting-menu>
|
||||
<setting-menu label="页面切换动画类型">
|
||||
<n-select
|
||||
class="w-120px"
|
||||
size="small"
|
||||
:value="theme.page.animateMode"
|
||||
:options="theme.page.animateModeList"
|
||||
@update:value="theme.setPageAnimateMode"
|
||||
/>
|
||||
</setting-menu>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useThemeStore } from '@/store';
|
||||
import SettingMenu from '../setting-menu/index.vue';
|
||||
|
||||
defineOptions({ name: 'PageView' });
|
||||
|
||||
const theme = useThemeStore();
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="flex-y-center justify-between">
|
||||
<span>{{ label }}</span>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'SettingMenu' });
|
||||
|
||||
interface Props {
|
||||
/** 文本 */
|
||||
label: string;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="flex-center w-20px h-20px rounded-2px shadow cursor-pointer" :style="{ backgroundColor: color }">
|
||||
<icon-ic-outline-check v-if="checked" :class="[iconClass, isWhite ? 'text-gray-700' : 'text-white']" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
defineOptions({ name: 'ColorCheckbox' });
|
||||
|
||||
interface Props {
|
||||
/** 颜色 */
|
||||
color: string;
|
||||
/** 是否选中 */
|
||||
checked: boolean;
|
||||
/** 图标的class */
|
||||
iconClass?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
iconClass: 'text-14px'
|
||||
});
|
||||
|
||||
const whiteColors = ['#ffffff', '#fff', 'rgb(255,255,255)'];
|
||||
const isWhite = computed(() => whiteColors.includes(props.color));
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<n-modal :show="visible" preset="card" class="w-640px h-480px" :z-index="10001" @close="handleClose">
|
||||
<div class="flex-x-center">
|
||||
<n-gradient-text type="primary" :size="24">中国传统颜色</n-gradient-text>
|
||||
</div>
|
||||
<n-tabs>
|
||||
<n-tab-pane v-for="item in traditionColors" :key="item.label" :name="item.label" :tab="item.label">
|
||||
<n-grid :cols="8" :x-gap="16" :y-gap="8">
|
||||
<n-grid-item v-for="i in item.data" :key="i.label">
|
||||
<color-checkbox
|
||||
class="!w-full !h-36px !rounded-4px"
|
||||
:color="i.color"
|
||||
:checked="i.color === theme.themeColor"
|
||||
icon-class="text-20px"
|
||||
@click="theme.setThemeColor(i.color)"
|
||||
/>
|
||||
<p class="text-center">{{ i.label }}</p>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { traditionColors } from '@/settings';
|
||||
import { useThemeStore } from '@/store';
|
||||
import ColorCheckbox from './color-checkbox.vue';
|
||||
|
||||
defineOptions({ name: 'ColorModal' });
|
||||
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
|
||||
interface Emits {
|
||||
(e: 'close'): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const theme = useThemeStore();
|
||||
|
||||
function handleClose() {
|
||||
emit('close');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,4 @@
|
||||
import ColorCheckbox from './color-checkbox.vue';
|
||||
import ColorModal from './color-modal.vue';
|
||||
|
||||
export { ColorCheckbox, ColorModal };
|
||||
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<n-divider title-placement="center">系统主题</n-divider>
|
||||
<n-grid :cols="8" :x-gap="8" :y-gap="12">
|
||||
<n-grid-item v-for="color in theme.themeColorList" :key="color" class="flex-x-center">
|
||||
<color-checkbox :color="color" :checked="color === theme.themeColor" @click="theme.setThemeColor(color)" />
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
<n-space :vertical="true" class="pt-12px">
|
||||
<n-color-picker :value="theme.themeColor" :show-alpha="false" @update-value="theme.setThemeColor" />
|
||||
<n-button :block="true" :type="otherColorBtnType" @click="openModal">更多颜色</n-button>
|
||||
</n-space>
|
||||
<color-modal :visible="visible" @close="closeModal" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { isInTraditionColors } from '@/settings';
|
||||
import { useThemeStore } from '@/store';
|
||||
import { useBoolean } from '@/hooks';
|
||||
import { ColorCheckbox, ColorModal } from './components';
|
||||
|
||||
defineOptions({ name: 'ThemeColorSelect' });
|
||||
|
||||
const theme = useThemeStore();
|
||||
|
||||
const { bool: visible, setTrue: openModal, setFalse: closeModal } = useBoolean();
|
||||
|
||||
const isInOther = computed(() => isInTraditionColors(theme.themeColor));
|
||||
const otherColorBtnType = computed(() => (isInOther.value ? 'primary' : 'default'));
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<n-divider title-placement="center">主题配置</n-divider>
|
||||
<textarea id="themeConfigCopyTarget" v-model="dataClipboardText" class="absolute opacity-0" />
|
||||
<n-space vertical>
|
||||
<div ref="copyRef" data-clipboard-target="#themeConfigCopyTarget">
|
||||
<n-button type="primary" :block="true">拷贝当前配置</n-button>
|
||||
</div>
|
||||
<n-button type="warning" :block="true" @click="handleResetConfig">重置当前配置</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import Clipboard from 'clipboard';
|
||||
import { useThemeStore } from '@/store';
|
||||
|
||||
defineOptions({ name: 'ThemeConfig' });
|
||||
|
||||
const theme = useThemeStore();
|
||||
|
||||
const copyRef = ref<HTMLElement>();
|
||||
|
||||
const dataClipboardText = ref(getClipboardText());
|
||||
|
||||
function getClipboardText() {
|
||||
return JSON.stringify(theme.$state);
|
||||
}
|
||||
|
||||
function handleResetConfig() {
|
||||
theme.resetThemeStore();
|
||||
window.$message?.success('已重置配置，请重新拷贝！');
|
||||
}
|
||||
|
||||
function clipboardEventListener() {
|
||||
if (!copyRef.value) return;
|
||||
const copy = new Clipboard(copyRef.value);
|
||||
copy.on('success', () => {
|
||||
window.$dialog?.success({
|
||||
title: '操作成功',
|
||||
content: '复制成功,请替换 src/settings/theme.json的内容！',
|
||||
positiveText: '确定'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const stopHandle = watch(
|
||||
() => theme.$state,
|
||||
() => {
|
||||
dataClipboardText.value = getClipboardText();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
clipboardEventListener();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
stopHandle();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user