fix: 初始化
This commit is contained in:
jiaojinfeng
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div :class="prefixCls">
|
||||
<template v-for="item in items" :key="item.key">
|
||||
<layout-block
|
||||
:theme="item.key"
|
||||
:checked="item.key === value"
|
||||
:disabled="item.disabled"
|
||||
:title="item.title"
|
||||
@click="
|
||||
() => {
|
||||
!item.disabled && handleChange(item.key);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import type { PropType } from 'vue';
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { useI18n } from '@crami/locale';
|
||||
import { useProProvider } from '../base-layouts/pro-provider';
|
||||
import type { ThemeItem } from './index.vue';
|
||||
import LayoutBlock from './layout-block.vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: String,
|
||||
list: { type: Array as PropType<ThemeItem[]> },
|
||||
},
|
||||
emits: ['change'],
|
||||
setup(props, { emit }) {
|
||||
const { getPrefixCls } = useProProvider();
|
||||
const prefixCls = getPrefixCls('setting-drawer-block-checbox');
|
||||
const { t } = useI18n();
|
||||
const items = computed<ThemeItem[]>(() => {
|
||||
return (
|
||||
props.list || [
|
||||
{
|
||||
key: 'side',
|
||||
title: t('app.setting.layout.side'),
|
||||
},
|
||||
{
|
||||
key: 'top',
|
||||
title: t('app.setting.layout.top'),
|
||||
},
|
||||
{
|
||||
key: 'mix',
|
||||
title: t('app.setting.layout.mix'),
|
||||
},
|
||||
{
|
||||
key: 'left',
|
||||
title: t('app.setting.layout.leftmenu'),
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
const handleChange = (key: string) => {
|
||||
emit('change', key);
|
||||
};
|
||||
|
||||
return {
|
||||
items,
|
||||
prefixCls,
|
||||
handleChange,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
LayoutBlock,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div style="margin-bottom: 24px">
|
||||
<h3 :class="prefixCls">{{ title }}</h3>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import PropTypes from 'ant-design-vue/es/_util/vue-types';
|
||||
import { defineComponent } from 'vue';
|
||||
import { useProProvider } from '../base-layouts/pro-provider';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BodyWrapper',
|
||||
props: {
|
||||
title: PropTypes.string.def(''),
|
||||
},
|
||||
setup() {
|
||||
const { getPrefixCls } = useProProvider();
|
||||
const prefixCls = getPrefixCls('setting-drawer-title');
|
||||
|
||||
return {
|
||||
prefixCls,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
87
packages/icpx-ruler/src/components/setting-drawer/index.less
Normal file
87
packages/icpx-ruler/src/components/setting-drawer/index.less
Normal file
@ -0,0 +1,87 @@
|
||||
@ant-pro-setting-drawer: ~'@{ant-prefix}-pro-setting-drawer';
|
||||
|
||||
.@{ant-pro-setting-drawer} {
|
||||
&-content {
|
||||
position: relative;
|
||||
|
||||
.ant-list-item {
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-block-checbox {
|
||||
display: flex;
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
margin-right: 16px;
|
||||
// box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: @border-radius-base;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
&-selectIcon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 15px;
|
||||
padding-left: 24px;
|
||||
color: @primary-color;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
|
||||
.action {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-color_block {
|
||||
display: inline-block;
|
||||
width: 38px;
|
||||
height: 22px;
|
||||
margin: 4px;
|
||||
margin-right: 12px;
|
||||
vertical-align: middle;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 12px;
|
||||
color: @heading-color;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
&-handle {
|
||||
position: absolute;
|
||||
top: 240px;
|
||||
right: 300px;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
background: @primary-color;
|
||||
border-radius: 4px 0 0 4px;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
&-production-hint {
|
||||
margin-top: 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
349
packages/icpx-ruler/src/components/setting-drawer/index.vue
Normal file
349
packages/icpx-ruler/src/components/setting-drawer/index.vue
Normal file
@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<h-drawer
|
||||
:visible="visible"
|
||||
:width="300"
|
||||
:getContainer="getContainer"
|
||||
@close="() => setShow(false)"
|
||||
style="z-index: 99"
|
||||
placement="right"
|
||||
>
|
||||
<template #handle>
|
||||
<div :class="`${prefixCls}-handle`" @click="handleClickShowButton">
|
||||
<close-outlined v-if="visible" :style="iconStyle" />
|
||||
<setting-outlined v-else :style="iconStyle" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div :class="`${prefixCls}-content`">
|
||||
<body-wrapper key="pageStyle" :title="t('app.setting.pagestyle')">
|
||||
<block-checkbox
|
||||
:value="value.navTheme"
|
||||
:list="themeList.themeList"
|
||||
@change="val => handleChange('theme', val)"
|
||||
/>
|
||||
</body-wrapper>
|
||||
|
||||
<h-divider />
|
||||
|
||||
<body-wrapper key="mode" :title="t('app.setting.navigationmode')">
|
||||
<block-checkbox
|
||||
:value="value.layout"
|
||||
@change="val => handleChange('layout', val)"
|
||||
></block-checkbox>
|
||||
</body-wrapper>
|
||||
|
||||
<layout-change
|
||||
:contentWidth="value.contentWidth"
|
||||
:fixedHeader="value.fixedHeader"
|
||||
:fixSiderbar="value.fixSidebar"
|
||||
:layout="value.layout"
|
||||
:splitMenus="value.splitMenus"
|
||||
@change="({ type, value }) => handleChange(type, value)"
|
||||
/>
|
||||
|
||||
<h-divider />
|
||||
|
||||
<body-wrapper :title="t('app.setting.othersettings')">
|
||||
<h-list :split="false">
|
||||
<h-list-item>
|
||||
<span style="opacity: 1">{{ t('app.setting.transitionname') }}</span>
|
||||
<template #actions>
|
||||
<h-select
|
||||
size="small"
|
||||
style="width: 100px"
|
||||
:value="value.transitionName || 'null'"
|
||||
@change="val => handleChange('transition', val)"
|
||||
>
|
||||
<h-select-option value="null">Null</h-select-option>
|
||||
<h-select-option value="slide-fadein-up">Slide Up</h-select-option>
|
||||
<h-select-option value="slide-fadein-right">Slide Right</h-select-option>
|
||||
<h-select-option value="fadein">Fade In</h-select-option>
|
||||
<h-select-option value="zoom-fadein">Zoom</h-select-option>
|
||||
</h-select>
|
||||
</template>
|
||||
</h-list-item>
|
||||
|
||||
<h-tooltip>
|
||||
<h-list-item>
|
||||
<span style="opacity: 1">{{ t('app.setting.multitab') }}</span>
|
||||
<template #actions>
|
||||
<h-switch
|
||||
size="small"
|
||||
:checked="value.multiTab"
|
||||
@change="() => handleChange('multiTab', !value.multiTab)"
|
||||
/>
|
||||
</template>
|
||||
</h-list-item>
|
||||
</h-tooltip>
|
||||
|
||||
<h-tooltip placement="left" :title="t('app.setting.multitab.fixed.hit')">
|
||||
<h-list-item>
|
||||
<span :style="{ opacity: !value.multiTab ? '0.5' : '1' }">
|
||||
{{ t('app.setting.multitab.fixed') }}
|
||||
</span>
|
||||
<template #actions>
|
||||
<h-switch
|
||||
size="small"
|
||||
:checked="value.multiTabFixed"
|
||||
:disabled="!value.multiTab && !value.fixedHeader"
|
||||
@change="() => handleChange('multiTabFixed', !value.multiTabFixed)"
|
||||
/>
|
||||
</template>
|
||||
</h-list-item>
|
||||
</h-tooltip>
|
||||
|
||||
<h-list-item>
|
||||
<span style="opacity: 0.5">{{ t('app.setting.weakmode') }}</span>
|
||||
<template #actions>
|
||||
<h-switch size="small" :checked="false" :disabled="true" />
|
||||
</template>
|
||||
</h-list-item>
|
||||
</h-list>
|
||||
</body-wrapper>
|
||||
</div>
|
||||
</h-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import PropTypes from 'ant-design-vue/es/_util/vue-types';
|
||||
import { defineComponent, computed, reactive, ref } from 'vue';
|
||||
import { useProProvider } from '../base-layouts/pro-provider';
|
||||
import { CloseOutlined, SettingOutlined } from '@ant-design/icons-vue';
|
||||
import type { ContentWidth } from '../base-layouts/typing';
|
||||
import { useStore } from 'vuex';
|
||||
import {
|
||||
SET_CONTENT_WIDTH,
|
||||
SET_LAYOUT,
|
||||
SET_NAV_THEME,
|
||||
SET_SPLIT_MENUS,
|
||||
SET_TRANSITION_NAME,
|
||||
SET_FIXED_HEADER,
|
||||
SET_FIXED_SIDEBAR,
|
||||
SET_MULTI_TAB,
|
||||
SET_FIXED_MULTI_TAB,
|
||||
} from '@/store/modules/app/mutations';
|
||||
import BodyWrapper from './body-wrapper.vue';
|
||||
import BlockCheckbox from './block-checkbox.vue';
|
||||
import LayoutChange from './layout-change.vue';
|
||||
import { useI18n } from '@crami/locale';
|
||||
import type { LayoutBlockTheme } from './layout-block.vue';
|
||||
|
||||
const iconStyle = {
|
||||
color: '#fff',
|
||||
fontSize: '20px',
|
||||
};
|
||||
|
||||
export interface ThemeItem {
|
||||
disabled?: boolean;
|
||||
key: LayoutBlockTheme;
|
||||
url?: string;
|
||||
title: string;
|
||||
}
|
||||
export interface ThemeConfig {
|
||||
key: string;
|
||||
fileName?: string;
|
||||
theme: string;
|
||||
modifyVars: Record<string, any>;
|
||||
}
|
||||
|
||||
export interface SettingProps {
|
||||
theme: 'dark' | 'light' | 'realDrak';
|
||||
primaryColor: string;
|
||||
layout: 'side' | 'top' | 'mix' | 'left';
|
||||
colorWeak: boolean;
|
||||
contentWidth: ContentWidth;
|
||||
fixedHeader: boolean;
|
||||
fixSiderbar: boolean;
|
||||
hideHintAlert: boolean;
|
||||
hideCopyButton: boolean;
|
||||
}
|
||||
|
||||
export const vueSettingProps = {
|
||||
theme: PropTypes.oneOf(['dark', 'light', 'realDark']),
|
||||
primaryColor: PropTypes.string,
|
||||
layout: PropTypes.oneOf(['side', 'top', 'mix', 'left']),
|
||||
colorWeak: PropTypes.bool,
|
||||
contentWidth: PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid'),
|
||||
fixedHeader: PropTypes.bool,
|
||||
fixSiderbar: PropTypes.bool,
|
||||
hideHintAlert: PropTypes.bool.def(false),
|
||||
hideCopyButton: PropTypes.bool.def(false),
|
||||
};
|
||||
|
||||
const getThemeList = (t: (s: string) => string) => {
|
||||
// @ts-ignoe
|
||||
// const list: ThemeConfig[] = window.antdv_pro_plugin_ant_themeVar || [];
|
||||
const list: ThemeConfig[] = [];
|
||||
const themeList: ThemeItem[] = [
|
||||
{
|
||||
key: 'light',
|
||||
title: t('app.setting.pagestyle.light'),
|
||||
},
|
||||
{
|
||||
key: 'dark',
|
||||
title: t('app.setting.pagestyle.dark'),
|
||||
},
|
||||
{
|
||||
key: 'realDark',
|
||||
title: t('app.setting.pagestyle.realdark'),
|
||||
},
|
||||
];
|
||||
|
||||
const darkColorList = [
|
||||
{
|
||||
key: '#1890ff',
|
||||
color: '#1890ff',
|
||||
theme: 'dark',
|
||||
},
|
||||
];
|
||||
|
||||
const lightColorList = [
|
||||
{
|
||||
key: '#1890ff',
|
||||
color: '#1890ff',
|
||||
theme: 'dark',
|
||||
},
|
||||
];
|
||||
|
||||
if (list.find(item => item.theme === 'dark')) {
|
||||
themeList.push({
|
||||
key: 'realDark',
|
||||
url: 'https://gw.alipayobjects.com/zos/antfincdn/hmKaLQvmY2/LCkqqYNmvBEbokSDscrm.svg',
|
||||
title: t('app.setting.pagestyle.realdark'),
|
||||
});
|
||||
}
|
||||
// insert theme color List
|
||||
list.forEach(item => {
|
||||
const color = (item.modifyVars || {})['@primary-color'];
|
||||
if (item.theme === 'dark' && color) {
|
||||
darkColorList.push({
|
||||
color,
|
||||
...item,
|
||||
});
|
||||
}
|
||||
if (!item.theme || item.theme === 'light') {
|
||||
lightColorList.push({
|
||||
color,
|
||||
...item,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
colorList: {
|
||||
dark: darkColorList,
|
||||
light: lightColorList,
|
||||
},
|
||||
themeList,
|
||||
};
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SettingDrawer',
|
||||
props: {
|
||||
// value: {
|
||||
// type: Object as PropType<SettingProps>,
|
||||
// required: true,
|
||||
// },
|
||||
getContainer: PropTypes.func,
|
||||
},
|
||||
emits: ['change'],
|
||||
setup() {
|
||||
const { getPrefixCls } = useProProvider();
|
||||
const prefixCls = getPrefixCls('setting-drawer');
|
||||
const visible = ref(false);
|
||||
const { t } = useI18n();
|
||||
const themeList = getThemeList(t);
|
||||
const store = useStore();
|
||||
const value = reactive({
|
||||
layout: computed(() => store.getters['app/layout']),
|
||||
navTheme: computed(() => store.getters['app/navTheme']),
|
||||
contentWidth: computed(() => store.getters['app/contentWidth']),
|
||||
splitMenus: computed(() => store.getters['app/splitMenus']),
|
||||
fixedHeader: computed(() => store.getters['app/fixedHeader']),
|
||||
fixSidebar: computed(() => store.getters['app/fixedSidebar']),
|
||||
transitionName: computed(() => store.getters['app/transitionName']),
|
||||
multiTab: computed(() => store.getters['app/multiTab']),
|
||||
multiTabFixed: computed(() => store.getters['app/multiTabFixed']),
|
||||
});
|
||||
|
||||
const setShow = (flag: boolean) => {
|
||||
visible.value = flag;
|
||||
};
|
||||
|
||||
const handleClickShowButton = (e: Event) => {
|
||||
// 组件库内部会劫持，导致触发两遍，做一下判断，组件库修复后可去除判断
|
||||
if (e) {
|
||||
visible.value = !visible.value;
|
||||
}
|
||||
};
|
||||
const updateLayoutSetting = (val: string) => {
|
||||
if (val !== 'mix') {
|
||||
// 强制停止使用分割菜单
|
||||
store.commit(`app/${SET_SPLIT_MENUS}`, false);
|
||||
} else {
|
||||
// Mix 模式下，header 必须被锁定
|
||||
store.commit(`app/${SET_FIXED_HEADER}`, true);
|
||||
}
|
||||
store.commit(`app/${SET_LAYOUT}`, val);
|
||||
};
|
||||
|
||||
const handleChange = (type: string, val: string | boolean) => {
|
||||
console.log('change', type, val);
|
||||
if (type === 'layout') {
|
||||
updateLayoutSetting(val as string);
|
||||
} else if (type === 'theme') {
|
||||
store.commit(`app/${SET_NAV_THEME}`, val);
|
||||
} else if (type === 'splitmenus') {
|
||||
store.commit(`app/${SET_SPLIT_MENUS}`, val);
|
||||
} else if (type === 'fixSiderbar') {
|
||||
store.commit(`app/${SET_FIXED_SIDEBAR}`, val);
|
||||
} else if (type === 'fixedHeader') {
|
||||
// 关闭 header 固定时，取消 multi-tab 固定
|
||||
if (!val) {
|
||||
store.commit(`app/${SET_FIXED_MULTI_TAB}`, false);
|
||||
}
|
||||
store.commit(`app/${SET_FIXED_HEADER}`, val);
|
||||
} else if (type === 'contentWidth') {
|
||||
store.commit(`app/${SET_CONTENT_WIDTH}`, val);
|
||||
} else if (type === 'transition') {
|
||||
store.commit(`app/${SET_TRANSITION_NAME}`, val === 'null' ? '' : val);
|
||||
} else if (type === 'multiTab') {
|
||||
store.commit(`app/${SET_MULTI_TAB}`, val);
|
||||
} else if (type === 'multiTabFixed') {
|
||||
if (!value.fixedHeader) {
|
||||
store.commit(`app/${SET_FIXED_HEADER}`, true);
|
||||
}
|
||||
store.commit(`app/${SET_FIXED_MULTI_TAB}`, val);
|
||||
}
|
||||
|
||||
// emit('change', { type, value });
|
||||
};
|
||||
|
||||
return {
|
||||
t,
|
||||
value,
|
||||
prefixCls,
|
||||
iconStyle,
|
||||
themeList,
|
||||
|
||||
visible,
|
||||
setShow,
|
||||
handleChange,
|
||||
handleClickShowButton,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
CloseOutlined,
|
||||
SettingOutlined,
|
||||
|
||||
BodyWrapper,
|
||||
BlockCheckbox,
|
||||
LayoutChange,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import './index.less';
|
||||
</style>
|
||||
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<h-tooltip :title="(title && title) || undefined">
|
||||
<div :class="className" :style="disabled ? disableStyle : null" v-bind="$attrs">
|
||||
<div class="inner"></div>
|
||||
<span
|
||||
role="img"
|
||||
aria-label="check"
|
||||
class="anticon anticon-check select-icon"
|
||||
:style="{ display: checked ? 'block' : 'none' }"
|
||||
>
|
||||
<svg
|
||||
viewBox="64 64 896 896"
|
||||
focusable="false"
|
||||
data-icon="check"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</h-tooltip>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import type { PropType } from 'vue';
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { useProProvider } from '../base-layouts/pro-provider';
|
||||
|
||||
export type LayoutBlockTheme = 'light' | 'dark' | 'realDark' | 'side' | 'top' | 'mix' | 'left';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
checked: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
theme: {
|
||||
type: String as PropType<LayoutBlockTheme>,
|
||||
default: 'light',
|
||||
},
|
||||
title: {
|
||||
type: [Boolean, String, Function],
|
||||
default: (key: string) => key,
|
||||
},
|
||||
},
|
||||
inheritAttrs: false,
|
||||
setup(props) {
|
||||
const { getPrefixCls } = useProProvider();
|
||||
const baseClassName = getPrefixCls('checkbox-item');
|
||||
|
||||
const disableStyle = {
|
||||
cursor: 'not-allowed',
|
||||
};
|
||||
|
||||
const className = computed(() => {
|
||||
return {
|
||||
[baseClassName]: true,
|
||||
[`${baseClassName}-${props.theme}`]: props.theme,
|
||||
[`${baseClassName}-disabled`]: props.disabled,
|
||||
};
|
||||
});
|
||||
return {
|
||||
baseClassName,
|
||||
className,
|
||||
disableStyle,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@block-item-prefix-cls: ~'@{ant-prefix}-pro-checkbox-item';
|
||||
|
||||
.@{block-item-prefix-cls} {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 36px;
|
||||
margin-right: 16px;
|
||||
overflow: hidden;
|
||||
background-color: #f0f2f5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.18);
|
||||
cursor: pointer;
|
||||
|
||||
> .inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
background-color: @white;
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
background-color: @white;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&-light {
|
||||
&::before {
|
||||
background-color: @white;
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
background-color: @white;
|
||||
}
|
||||
}
|
||||
&-dark,
|
||||
&-side {
|
||||
&::before {
|
||||
z-index: 1;
|
||||
background-color: @menu-dark-bg;
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
background-color: @white;
|
||||
}
|
||||
}
|
||||
&-top {
|
||||
&::before {
|
||||
background-color: unset;
|
||||
content: none;
|
||||
}
|
||||
&::after {
|
||||
background-color: @menu-dark-bg;
|
||||
}
|
||||
}
|
||||
&-mix {
|
||||
&::before {
|
||||
background-color: @white;
|
||||
content: ' ';
|
||||
}
|
||||
&::after {
|
||||
background-color: @menu-dark-bg;
|
||||
}
|
||||
}
|
||||
&-realDark {
|
||||
background-color: fade(@menu-dark-bg, 85%);
|
||||
|
||||
&::before {
|
||||
z-index: 1;
|
||||
background-color: fade(@menu-dark-bg, 65%);
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
background-color: fade(@menu-dark-bg, 85%);
|
||||
}
|
||||
}
|
||||
|
||||
// 亮色主题
|
||||
&-light {
|
||||
&::before {
|
||||
background-color: @white;
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
background-color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
&-left {
|
||||
&::before {
|
||||
z-index: 1;
|
||||
width: 16%;
|
||||
background-color: @menu-dark-bg;
|
||||
content: '';
|
||||
}
|
||||
> .inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
background-color: @white;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
bottom: 4px;
|
||||
color: @primary-color;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<h-list :split="false">
|
||||
<h-tooltip>
|
||||
<h-list-item>
|
||||
<span :style="{ opacity: 1 }">
|
||||
{{ t('app.setting.content-width') }}
|
||||
</span>
|
||||
<template #actions>
|
||||
<h-select
|
||||
size="small"
|
||||
:value="contentWidth"
|
||||
@select="val => handleChange('contentWidth', val)"
|
||||
>
|
||||
<h-select-option v-if="layout === 'side'" value="Fixed">
|
||||
{{ t('app.setting.content-width.fixed') }}
|
||||
</h-select-option>
|
||||
<h-select-option value="Fluid">
|
||||
{{ t('app.setting.content-width.fluid') }}
|
||||
</h-select-option>
|
||||
</h-select>
|
||||
</template>
|
||||
</h-list-item>
|
||||
</h-tooltip>
|
||||
|
||||
<h-tooltip placement="left" :title="layout === 'mix' ? t('app.setting.fixedheader.hint') : ''">
|
||||
<h-list-item>
|
||||
<span :style="{ opacity: 1 }">{{ t('app.setting.fixedheader') }}</span>
|
||||
<template #actions>
|
||||
<h-switch
|
||||
size="small"
|
||||
:checked="!!fixedHeader"
|
||||
:disabled="layout === 'mix'"
|
||||
@change="checked => handleChange('fixedHeader', checked)"
|
||||
/>
|
||||
</template>
|
||||
</h-list-item>
|
||||
</h-tooltip>
|
||||
|
||||
<h-tooltip :title="layout === 'top' ? t('app.setting.fixedsidebar.hint') : ''">
|
||||
<h-list-item>
|
||||
<span :style="{ opacity: 1 }">{{ t('app.setting.fixedsidebar') }}</span>
|
||||
<template #actions>
|
||||
<h-switch
|
||||
size="small"
|
||||
:disabled="layout === 'top'"
|
||||
:checked="!!fixSiderbar"
|
||||
@change="checked => handleChange('fixSiderbar', checked)"
|
||||
/>
|
||||
</template>
|
||||
</h-list-item>
|
||||
</h-tooltip>
|
||||
|
||||
<h-tooltip placement="left" :title="layout === 'mix' ? '' : t('app.setting.layout.mix.hint')">
|
||||
<h-list-item>
|
||||
<span :style="{ opacity: 1 }">{{ t('app.setting.split.menus') }}</span>
|
||||
<template #actions>
|
||||
<h-switch
|
||||
size="small"
|
||||
:disabled="layout !== 'mix'"
|
||||
:checked="!!splitMenus"
|
||||
@change="checked => handleChange('splitmenus', checked)"
|
||||
/>
|
||||
</template>
|
||||
</h-list-item>
|
||||
</h-tooltip>
|
||||
</h-list>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import type { PropType } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
import { useI18n } from '@crami/locale';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
contentWidth: { type: String as PropType<'Fluid' | 'Fixed'>, default: 'Fluid' },
|
||||
fixedHeader: Boolean,
|
||||
fixSiderbar: Boolean,
|
||||
splitMenus: Boolean,
|
||||
layout: { type: String as PropType<'side' | 'top' | 'mix' | 'left'> },
|
||||
onChange: Function as PropType<(arg: { type: string; value: string }) => void>,
|
||||
},
|
||||
setup(_props, { emit }) {
|
||||
const { t } = useI18n();
|
||||
const handleChange = (type: string, value: any) => {
|
||||
emit('change', { type, value });
|
||||
};
|
||||
|
||||
return {
|
||||
t,
|
||||
handleChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,33 @@
|
||||
export default {
|
||||
'app.setting.pagestyle': 'Page style setting',
|
||||
'app.setting.pagestyle.light': 'Light style',
|
||||
'app.setting.pagestyle.dark': 'Dark style',
|
||||
'app.setting.pagestyle.realdark': 'RealDark style',
|
||||
'app.setting.layout.side': 'Side Menu Layout',
|
||||
'app.setting.layout.top': 'Top Menu Layout',
|
||||
'app.setting.layout.mix': 'Mix Layout',
|
||||
'app.setting.layout.leftmenu': 'Left Layout',
|
||||
'app.setting.layout.mix.hint': 'Split Menus',
|
||||
'app.setting.themecolor': 'Theme Color',
|
||||
'app.setting.navigationmode': 'Navigation Mode',
|
||||
'app.setting.content-width': 'Content Width',
|
||||
'app.setting.fixedheader': 'Fixed Header',
|
||||
'app.setting.fixedheader.hint': 'Mix Required fixed header',
|
||||
'app.setting.fixedsidebar': 'Fixed Sidebar',
|
||||
'app.setting.fixedsidebar.hint': '',
|
||||
'app.setting.split.menus': 'Split Menus',
|
||||
'app.setting.content-width.fixed': 'Fixed',
|
||||
'app.setting.content-width.fluid': 'Fluid',
|
||||
'app.setting.othersettings': 'Other Settings',
|
||||
'app.setting.weakmode': 'Weak Mode',
|
||||
'app.setting.transitionname': 'TransitionName',
|
||||
'app.setting.multitab': 'Multi Tabs',
|
||||
'app.setting.multitab.fixed': 'Multi Tab Fixed',
|
||||
'app.setting.multitab.fixed.hit': 'Tabs Fixed Required open MultiTab and Fixed Header',
|
||||
'app.setting.unavailable': 'Unavailable',
|
||||
'app.setting.copy': 'Copy Setting',
|
||||
'app.setting.loading': 'Loading theme',
|
||||
'app.setting.copyinfo': 'copy success，please replace defaultSettings in src/models/setting.js',
|
||||
'app.setting.production.hint': 'Setting panel shows in development environment only, please manually modify',
|
||||
};
|
||||
//# sourceMappingURL=en-US.js.map
|
||||
@ -0,0 +1 @@
|
||||
{"version":3,"file":"en-US.js","sourceRoot":"","sources":["en-US.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,uBAAuB,EAAE,oBAAoB;IAC7C,6BAA6B,EAAE,aAAa;IAC5C,4BAA4B,EAAE,YAAY;IAC1C,gCAAgC,EAAE,gBAAgB;IAClD,yBAAyB,EAAE,kBAAkB;IAC7C,wBAAwB,EAAE,iBAAiB;IAC3C,wBAAwB,EAAE,YAAY;IACtC,6BAA6B,EAAE,aAAa;IAC5C,6BAA6B,EAAE,aAAa;IAC5C,wBAAwB,EAAE,aAAa;IACvC,4BAA4B,EAAE,iBAAiB;IAC/C,2BAA2B,EAAE,eAAe;IAC5C,yBAAyB,EAAE,cAAc;IACzC,8BAA8B,EAAE,2BAA2B;IAC3D,0BAA0B,EAAE,eAAe;IAC3C,+BAA+B,EAAE,EAAE;IACnC,yBAAyB,EAAE,aAAa;IACxC,iCAAiC,EAAE,OAAO;IAC1C,iCAAiC,EAAE,OAAO;IAC1C,2BAA2B,EAAE,gBAAgB;IAC7C,sBAAsB,EAAE,WAAW;IACnC,4BAA4B,EAAE,gBAAgB;IAC9C,sBAAsB,EAAE,YAAY;IACpC,4BAA4B,EAAE,iBAAiB;IAC/C,gCAAgC,EAAE,oDAAoD;IACtF,yBAAyB,EAAE,aAAa;IACxC,kBAAkB,EAAE,cAAc;IAClC,qBAAqB,EAAE,eAAe;IACtC,sBAAsB,EAAE,sEAAsE;IAC9F,6BAA6B,EAC3B,6EAA6E;CAChF,CAAC"}
|
||||
@ -0,0 +1,33 @@
|
||||
export default {
|
||||
'app.setting.pagestyle': 'Page style setting',
|
||||
'app.setting.pagestyle.light': 'Light style',
|
||||
'app.setting.pagestyle.dark': 'Dark style',
|
||||
'app.setting.pagestyle.realdark': 'RealDark style',
|
||||
'app.setting.layout.side': 'Side Menu Layout',
|
||||
'app.setting.layout.top': 'Top Menu Layout',
|
||||
'app.setting.layout.mix': 'Mix Layout',
|
||||
'app.setting.layout.leftmenu': 'Left Layout',
|
||||
'app.setting.layout.mix.hint': 'Split Menus',
|
||||
'app.setting.themecolor': 'Theme Color',
|
||||
'app.setting.navigationmode': 'Navigation Mode',
|
||||
'app.setting.content-width': 'Content Width',
|
||||
'app.setting.fixedheader': 'Fixed Header',
|
||||
'app.setting.fixedheader.hint': 'Mix Required fixed header',
|
||||
'app.setting.fixedsidebar': 'Fixed Sidebar',
|
||||
'app.setting.fixedsidebar.hint': '',
|
||||
'app.setting.split.menus': 'Split Menus',
|
||||
'app.setting.content-width.fixed': 'Fixed',
|
||||
'app.setting.content-width.fluid': 'Fluid',
|
||||
'app.setting.othersettings': 'Other Settings',
|
||||
'app.setting.weakmode': 'Weak Mode',
|
||||
'app.setting.transitionname': 'TransitionName',
|
||||
'app.setting.multitab': 'Multi Tabs',
|
||||
'app.setting.multitab.fixed': 'Multi Tab Fixed',
|
||||
'app.setting.multitab.fixed.hit': 'Tabs Fixed Required open MultiTab and Fixed Header',
|
||||
'app.setting.unavailable': 'Unavailable',
|
||||
'app.setting.copy': 'Copy Setting',
|
||||
'app.setting.loading': 'Loading theme',
|
||||
'app.setting.copyinfo': 'copy success，please replace defaultSettings in src/models/setting.js',
|
||||
'app.setting.production.hint':
|
||||
'Setting panel shows in development environment only, please manually modify',
|
||||
};
|
||||
@ -0,0 +1,33 @@
|
||||
export default {
|
||||
'app.setting.pagestyle': '整体风格设置',
|
||||
'app.setting.pagestyle.light': '亮色主题风格',
|
||||
'app.setting.pagestyle.dark': '暗色主题风格',
|
||||
'app.setting.pagestyle.realdark': '暗黑模式',
|
||||
'app.setting.layout.side': '侧边菜单布局',
|
||||
'app.setting.layout.top': '顶部菜单布局',
|
||||
'app.setting.layout.mix': '混合布局',
|
||||
'app.setting.layout.leftmenu': '左侧混合布局',
|
||||
'app.setting.layout.mix.hint': '将菜单分割成 Header 和 Side',
|
||||
'app.setting.themecolor': '主题色',
|
||||
'app.setting.navigationmode': '导航模式',
|
||||
'app.setting.content-width': '内容区域宽度',
|
||||
'app.setting.fixedheader': '固定 Header',
|
||||
'app.setting.fixedheader.hint': '混合模式必须开启固定 Header',
|
||||
'app.setting.fixedsidebar': '固定侧边菜单',
|
||||
'app.setting.fixedsidebar.hint': '',
|
||||
'app.setting.split.menus': '自动分割菜单',
|
||||
'app.setting.content-width.fixed': 'Fixed',
|
||||
'app.setting.content-width.fluid': 'Fluid',
|
||||
'app.setting.othersettings': '其他设置',
|
||||
'app.setting.weakmode': '色弱模式',
|
||||
'app.setting.transitionname': '路由动画',
|
||||
'app.setting.multitab': '多标签',
|
||||
'app.setting.multitab.fixed': '固定多标签',
|
||||
'app.setting.multitab.fixed.hit': '固定多标签需要先开启多标签并且固定 Header',
|
||||
'app.setting.unavailable': '不可用',
|
||||
'app.setting.copy': '复制设置',
|
||||
'app.setting.loading': '主题加载中',
|
||||
'app.setting.copyinfo': '拷贝成功，请到 src/components/basic-layout/defaultSettings.ts 中替换默认配置',
|
||||
'app.setting.production.hint': 'Setting panel shows in development environment only, please manually modify',
|
||||
};
|
||||
//# sourceMappingURL=zh-CN.js.map
|
||||
@ -0,0 +1 @@
|
||||
{"version":3,"file":"zh-CN.js","sourceRoot":"","sources":["zh-CN.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,uBAAuB,EAAE,QAAQ;IACjC,6BAA6B,EAAE,QAAQ;IACvC,4BAA4B,EAAE,QAAQ;IACtC,gCAAgC,EAAE,MAAM;IACxC,yBAAyB,EAAE,QAAQ;IACnC,wBAAwB,EAAE,QAAQ;IAClC,wBAAwB,EAAE,MAAM;IAChC,6BAA6B,EAAE,QAAQ;IACvC,6BAA6B,EAAE,sBAAsB;IACrD,wBAAwB,EAAE,KAAK;IAC/B,4BAA4B,EAAE,MAAM;IACpC,2BAA2B,EAAE,QAAQ;IACrC,yBAAyB,EAAE,WAAW;IACtC,8BAA8B,EAAE,mBAAmB;IACnD,0BAA0B,EAAE,QAAQ;IACpC,+BAA+B,EAAE,EAAE;IACnC,yBAAyB,EAAE,QAAQ;IACnC,iCAAiC,EAAE,OAAO;IAC1C,iCAAiC,EAAE,OAAO;IAC1C,2BAA2B,EAAE,MAAM;IACnC,sBAAsB,EAAE,MAAM;IAC9B,4BAA4B,EAAE,MAAM;IACpC,sBAAsB,EAAE,KAAK;IAC7B,4BAA4B,EAAE,OAAO;IACrC,gCAAgC,EAAE,0BAA0B;IAC5D,yBAAyB,EAAE,KAAK;IAChC,kBAAkB,EAAE,MAAM;IAC1B,qBAAqB,EAAE,OAAO;IAC9B,sBAAsB,EACpB,gEAAgE;IAClE,6BAA6B,EAC3B,6EAA6E;CAChF,CAAC"}
|
||||
@ -0,0 +1,34 @@
|
||||
export default {
|
||||
'app.setting.pagestyle': '整体风格设置',
|
||||
'app.setting.pagestyle.light': '亮色主题风格',
|
||||
'app.setting.pagestyle.dark': '暗色主题风格',
|
||||
'app.setting.pagestyle.realdark': '暗黑模式',
|
||||
'app.setting.layout.side': '侧边菜单布局',
|
||||
'app.setting.layout.top': '顶部菜单布局',
|
||||
'app.setting.layout.mix': '混合布局',
|
||||
'app.setting.layout.leftmenu': '左侧混合布局',
|
||||
'app.setting.layout.mix.hint': '将菜单分割成 Header 和 Side',
|
||||
'app.setting.themecolor': '主题色',
|
||||
'app.setting.navigationmode': '导航模式',
|
||||
'app.setting.content-width': '内容区域宽度',
|
||||
'app.setting.fixedheader': '固定 Header',
|
||||
'app.setting.fixedheader.hint': '混合模式必须开启固定 Header',
|
||||
'app.setting.fixedsidebar': '固定侧边菜单',
|
||||
'app.setting.fixedsidebar.hint': '',
|
||||
'app.setting.split.menus': '自动分割菜单',
|
||||
'app.setting.content-width.fixed': 'Fixed',
|
||||
'app.setting.content-width.fluid': 'Fluid',
|
||||
'app.setting.othersettings': '其他设置',
|
||||
'app.setting.weakmode': '色弱模式',
|
||||
'app.setting.transitionname': '路由动画',
|
||||
'app.setting.multitab': '多标签',
|
||||
'app.setting.multitab.fixed': '固定多标签',
|
||||
'app.setting.multitab.fixed.hit': '固定多标签需要先开启多标签并且固定 Header',
|
||||
'app.setting.unavailable': '不可用',
|
||||
'app.setting.copy': '复制设置',
|
||||
'app.setting.loading': '主题加载中',
|
||||
'app.setting.copyinfo':
|
||||
'拷贝成功，请到 src/components/basic-layout/defaultSettings.ts 中替换默认配置',
|
||||
'app.setting.production.hint':
|
||||
'Setting panel shows in development environment only, please manually modify',
|
||||
};
|
||||
Reference in New Issue
Block a user