系统UI美化

pull/237/head
zhangdaiscott 2022-11-07 19:11:34 +08:00
parent 0168d71154
commit abdc9da743
11 changed files with 95 additions and 11 deletions

BIN
src/assets/images/link.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

View File

@ -322,7 +322,24 @@
}
}
}
/*【美化表单】form的字体改小一号*/
.ant-form-item-label > label{
font-size: 13px;
}
.ant-form-item .ant-select {
font-size: 13px;
}
.ant-select-item-option-selected {
font-size: 13px;
}
.ant-select-item-option-content {
font-size: 13px;
}
.ant-input {
font-size: 13px;
}
/*【美化表单】form的字体改小一号*/
.ant-form-explain {
font-size: 14px;
}

View File

@ -17,7 +17,7 @@
<!-- antd v3 升级兼容阻止数据的收集防止控制台报错 -->
<!-- https://antdv.com/docs/vue/migration-v3-cn -->
<a-form-item-rest>
<Table ref="tableElRef" v-bind="getBindValues" :rowClassName="getRowClassName" v-show="getEmptyDataIsShowTable" @change="handleTableChange">
<Table ref="tableElRef" v-bind="getBindValues" :rowClassName="getRowClassName" v-show="getEmptyDataIsShowTable" @resizeColumn="handleResizeColumn" @change="handleTableChange">
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
<slot :name="item" v-bind="data || {}"></slot>
</template>
@ -289,6 +289,9 @@
wrapRef,
tableAction,
redoHeight,
handleResizeColumn: (w, col) => {
col.width = w;
},
getFormProps: getFormProps as any,
replaceFormSlotKey,
getFormSlotKeys,
@ -406,8 +409,8 @@
//
.alert {
height: 38px;
background-color: #f3f3f3;
border-color: #e3e3e3;
background-color: #e6f7ff;
border-color: #91d5ff;
}
&--inset {
.ant-table-wrapper {

View File

@ -20,7 +20,7 @@ export const basicProps = {
},
showTableSetting: propTypes.bool,
autoCreateKey: propTypes.bool.def(true),
striped: propTypes.bool.def(true),
striped: propTypes.bool.def(false),
showSummary: propTypes.bool,
summaryFunc: {
type: [Function, Array] as PropType<(...arg: any[]) => any[]>,

View File

@ -94,5 +94,9 @@
width: 17px;
height: 17px;
}
/*【美化表单】行编辑table的title字体改小一号*/
.vxe-header--column.col--ellipsis>.vxe-cell .vxe-cell--title{
font-size: 13px;
}
}

View File

@ -50,7 +50,9 @@ html[data-theme='dark'] {
.ant-pagination-next,
.ant-pagination-item {
margin: 0 4px !important;
background-color: #f4f4f5 !important;
//update-begin---author:scott ---date:2022-09-30 for【美化】Table分页页面默认背景色丑去掉-----------
//background-color: #f4f4f5 !important;
//update-end---author:scott ---date::2022-09-30 for【美化】Table分页页面默认背景色丑去掉------------
border: none;
border-radius: none !important;

View File

@ -6,7 +6,23 @@ html[data-theme='light'] {
.text-secondary {
color: rgba(0, 0, 0, 0.45);
}
/*【美化】自定义table字体颜色*/
.ant-table {
color: rgba(0, 0, 0, 0.65);
}
/*【美化】自定义table字体颜色*/
/*【美化】自定义form字体颜色*/
.ant-select-multiple .ant-select-selection-item-content {
color: rgba(0, 0, 0, 0.65);
}
.ant-input-affix-wrapper > input.ant-input {
color: rgba(0, 0, 0, 0.65);
}
.ant-select-single.ant-select-show-arrow .ant-select-selection-item, .ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder{
color: rgba(0, 0, 0, 0.65);
}
/*【美化】自定义form字体颜色*/
.ant-alert-success {
background-color: #f6ffed;
border: 1px solid #b7eb8f;

View File

@ -50,6 +50,9 @@ export function useHeaderSetting() {
const getShowBread = computed(() => {
return unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && unref(getShowBreadCrumb) && !unref(getSplit);
});
const getShowBreadTitle = computed(() => {
return unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && !unref(getShowBreadCrumb) && !unref(getSplit);
});
const getShowHeaderLogo = computed(() => {
return unref(getShowLogo) && !unref(getIsSidebarType) && !unref(getIsMixSidebar);
@ -82,5 +85,6 @@ export function useHeaderSetting() {
getShowInsetHeaderRef,
getUnFixedAndFull,
getHeaderBgColor,
getShowBreadTitle
};
}

View File

@ -235,7 +235,7 @@ export function useListTable(tableProps: TableProps): [
},
},
// 斑马纹
striped: true,
striped: false,
// 是否可以自适应高度
canResize: true,
// 表格最小高度

View File

@ -10,6 +10,8 @@
:sider="false"
/>
<LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
<!-- 欢迎语 -->
<span v-if="getShowContent && getShowBreadTitle" :class="[prefixCls, `${prefixCls}--${getHeaderTheme}`,'headerIntroductionClass']"> {{ title }} </span>
</div>
<!-- left end -->
@ -42,7 +44,7 @@
</template>
<script lang="ts">
import { defineComponent, unref, computed, ref, onMounted, toRaw } from 'vue';
import { useGlobSetting } from '/@/hooks/setting';
import { propTypes } from '/@/utils/propTypes';
import { Layout } from 'ant-design-vue';
@ -98,7 +100,8 @@
const userStore = useUserStore();
const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting();
const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
const { title } = useGlobSetting();
const {
getHeaderTheme,
getShowFullScreen,
@ -109,6 +112,7 @@
getShowHeader,
getShowSearch,
getUseLockPage,
getShowBreadTitle,
} = useHeaderSetting();
const { getShowLocalePicker } = useLocale();
@ -185,6 +189,7 @@
getHeaderTheme,
getShowHeaderTrigger,
getIsMobile,
getShowBreadTitle,
getShowBread,
getShowContent,
getSplitType,
@ -203,10 +208,43 @@
getUseLockPage,
loginSelectOk,
loginSelectRef,
title
};
},
});
</script>
<style lang="less">
@import './index.less';
//update-begin---author:scott ---date:2022-09-30 for-----------
//
@prefix-cls: ~'@{namespace}-layout-header';
.@{prefix-cls} {
display: flex;
padding: 0 8px;
align-items: center;
.headerIntroductionClass {
margin-right: 4px;
margin-bottom: 2px;
border-bottom: 0px;
border-left: 0px;
}
&--light {
.headerIntroductionClass {
color: @breadcrumb-item-normal-color;
}
}
&--dark {
.headerIntroductionClass {
color: rgba(255, 255, 255, 0.6);
}
.anticon {
color: rgba(255, 255, 255, 0.8);
}
}
//update-end---author:scott ---date::2022-09-30 for--------------
}
</style>

View File

@ -167,7 +167,7 @@ const setting: ProjectConfig = {
lockTime: 0,
// 显示面包屑
showBreadCrumb: true,
showBreadCrumb: false,
// 显示面包屑图标
showBreadCrumbIcon: true,