Refactor: deafult size

This commit is contained in:
unitwk 2023-08-23 17:53:04 +08:00
parent a35873fc23
commit 10fdbe1b3b
9 changed files with 29 additions and 35 deletions

View File

@ -39,6 +39,12 @@ if (isDarkUI) {
document.body.classList.add("app-light-theme"); document.body.classList.add("app-light-theme");
} }
import { Button, Select, Input, Table } from "ant-design-vue";
[Button, Select, Input, Table].forEach((element) => {
element.props.size.default = "middle";
});
const { execute: reqUserInfo } = userInfoApi(); const { execute: reqUserInfo } = userInfoApi();
onMounted(async () => { onMounted(async () => {

View File

@ -1,7 +1,7 @@
.app-light-theme { .app-light-theme {
@extend .app-light-base-color; @extend .app-light-base-color;
--background-color: rgb(240, 240, 240); --background-color: rgb(245, 245, 245);
--background-color-white: var(--color-gray-1); --background-color-white: var(--color-gray-1);
--drag-background-color: rgb(212, 212, 212); --drag-background-color: rgb(212, 212, 212);
--new-card-list-background-color: rgba(201, 200, 200, 0.2); --new-card-list-background-color: rgba(201, 200, 200, 0.2);

View File

@ -61,7 +61,6 @@ const props = defineProps({
.card-panel-content { .card-panel-content {
flex-grow: 1; flex-grow: 1;
color: var(--text-color); color: var(--text-color);
font-size: 14px;
} }
} }
@ -69,6 +68,5 @@ const props = defineProps({
overflow: hidden; overflow: hidden;
zoom: 1; zoom: 1;
word-break: break-all; word-break: break-all;
font-size: 14px;
} }
</style> </style>

View File

@ -45,15 +45,17 @@ const handleChangeMenu = (item: LeftMenuItem) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.menu-body { .menu-body {
height: 100%; height: 100%;
display: flex;
.left-menu { .left-menu {
width: 280px; height: 100%;
float: left;
width: 240px;
padding: 12px 16px; padding: 12px 16px;
background-color: var(--color-gray-4); background-color: var(--color-gray-4);
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
} }
.right-content { .right-content {
overflow: hidden;
flex-grow: 1; flex-grow: 1;
padding: 20px; padding: 20px;
text-align: left; text-align: left;

View File

@ -303,17 +303,17 @@ export const ORIGIN_LAYOUT_CONFIG: PageLayoutConfig[] = [
meta: {}, meta: {},
type: "UserInfo", type: "UserInfo",
title: t("个人信息"), title: t("个人信息"),
width: 12, width: 8,
height: LayoutCardHeight.AUTO height: LayoutCardHeight.MEDIUM
},
{
id: getRandomId(),
meta: {},
type: "EmptyCard",
title: "",
width: 12,
height: LayoutCardHeight.MINI
} }
// {
// id: getRandomId(),
// meta: {},
// type: "EmptyCard",
// title: "",
// width: 12,
// height: LayoutCardHeight.MINI
// }
] ]
}, },

View File

@ -155,12 +155,7 @@ const rowSelection = () => {};
<a-col :span="24"> <a-col :span="24">
<CardPanel style="height: 100%"> <CardPanel style="height: 100%">
<template #body> <template #body>
<a-table <a-table :row-selection="rowSelection" :data-source="dataSource" :columns="columns">
size="middle"
:row-selection="rowSelection"
:data-source="dataSource"
:columns="columns"
>
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<a-dropdown> <a-dropdown>

View File

@ -187,12 +187,7 @@ breadcrumbs.push({
</a-breadcrumb-item> </a-breadcrumb-item>
</a-breadcrumb> </a-breadcrumb>
</div> </div>
<a-table <a-table :row-selection="rowSelection" :data-source="dataSource" :columns="columns">
size="middle"
:row-selection="rowSelection"
:data-source="dataSource"
:columns="columns"
>
<!-- eslint-disable-next-line vue/no-unused-vars --> <!-- eslint-disable-next-line vue/no-unused-vars -->
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">

View File

@ -98,7 +98,7 @@ const columns = computed(() => {
<a-col :span="24"> <a-col :span="24">
<CardPanel style="height: 100%"> <CardPanel style="height: 100%">
<template #body> <template #body>
<a-table size="middle" :data-source="dataSource" :columns="columns"> <a-table :data-source="dataSource" :columns="columns">
<template #bodyCell="{ column }"> <template #bodyCell="{ column }">
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<a-button danger> <a-button danger>

View File

@ -1,14 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import CardPanel from "@/components/CardPanel.vue";
import DataStatistic from "@/components/DataStatistic.vue";
import LeftMenusPanel from "@/components/LeftMenusPanel.vue"; import LeftMenusPanel from "@/components/LeftMenusPanel.vue";
import { t } from "@/lang/i18n"; import { t } from "@/lang/i18n";
import { useAppStateStore } from "@/stores/useAppStateStore"; import { useAppStateStore } from "@/stores/useAppStateStore";
import type { LayoutCard } from "@/types/index"; import type { LayoutCard } from "@/types/index";
import { MenuOutlined, ProjectOutlined, RobotOutlined } from "@ant-design/icons-vue"; import { ProjectOutlined, RobotOutlined } from "@ant-design/icons-vue";
import type { UnwrapRef } from "vue";
import { reactive, toRaw } from "vue"; import { reactive, toRaw } from "vue";
const { state } = useAppStateStore(); const { state } = useAppStateStore();
const props = defineProps<{ const props = defineProps<{
card: LayoutCard; card: LayoutCard;
}>(); }>();
@ -50,8 +48,6 @@ const onSubmit = () => {
}; };
const labelCol = { style: { width: "150px" } }; const labelCol = { style: { width: "150px" } };
const wrapperCol = { span: 14 }; const wrapperCol = { span: 14 };
const userInfo = state.userInfo;
</script> </script>
<template> <template>
@ -98,7 +94,9 @@ const userInfo = state.userInfo;
</a-form-item> </a-form-item>
</a-form> </a-form>
</template> </template>
<template #api>BBB</template> <template #api>
{{ state.userInfo }}
</template>
</LeftMenusPanel> </LeftMenusPanel>
</div> </div>
</template> </template>