From 35cc98f11150d068032df597e542c62480249e04 Mon Sep 17 00:00:00 2001
From: xiaoyi <908147524@qq.com>
Date: 星期一, 24 八月 2026 09:48:58 +0800
Subject: [PATCH] fix 修正页面高度问题
---
src/packages/@core/ui-kit/form-ui/src/components/form-actions.vue | 6 +
src/packages/@core/base/design/src/design-tokens/default.css | 38 ++++++------
src/packages/styles/src/antd/index.css | 26 ++++++++
src/views/_core/authentication/login.vue | 2
src/packages/@core/ui-kit/shadcn-ui/src/components/table-action/table-action.vue | 4
src/packages/effects/plugins/src/vxe-table/style.css | 11 +++
src/packages/@core/base/design/src/design-tokens/dark.css | 16 ++--
src/views/mes/pd/basedata/index.vue | 20 +++++-
8 files changed, 89 insertions(+), 34 deletions(-)
diff --git a/src/packages/@core/base/design/src/design-tokens/dark.css b/src/packages/@core/base/design/src/design-tokens/dark.css
index 3881041..2e82ef1 100644
--- a/src/packages/@core/base/design/src/design-tokens/dark.css
+++ b/src/packages/@core/base/design/src/design-tokens/dark.css
@@ -33,7 +33,7 @@
/* 涓婚棰滆壊 */
- /* --primary: 245 82% 67%; */
+ --primary: 207 78% 58%;
--primary-foreground: 0 0% 98%;
/* Used for destructive actions such as <Button variant="destructive"> */
@@ -61,11 +61,11 @@
--secondary-foreground: 0 0% 98%;
/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
- --accent: 216 5% 19%;
- --accent-dark: 240 0% 22%;
- --accent-darker: 240 0% 26%;
- --accent-lighter: 216 5% 12%;
- --accent-hover: 216 5% 24%;
+ --accent: 214 18% 18%;
+ --accent-dark: 214 18% 22%;
+ --accent-darker: 214 18% 26%;
+ --accent-lighter: 214 18% 13%;
+ --accent-hover: 214 22% 24%;
--accent-foreground: 0 0% 98%;
/* Darker color */
@@ -73,10 +73,10 @@
--heavy-foreground: var(--accent-foreground);
/* Default border color */
- --border: 240 3.7% 22%;
+ --border: 214 18% 28%;
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
- --input: 0deg 0% 100% / 10%;
+ --input: 214 18% 34%;
--input-placeholder: 218deg 11% 65%;
--input-background: 0deg 0% 100% / 5%;
diff --git a/src/packages/@core/base/design/src/design-tokens/default.css b/src/packages/@core/base/design/src/design-tokens/default.css
index cf7dc28..ad404c8 100644
--- a/src/packages/@core/base/design/src/design-tokens/default.css
+++ b/src/packages/@core/base/design/src/design-tokens/default.css
@@ -10,8 +10,8 @@
--background: 0 0% 100%;
/* 涓讳綋鍖哄煙鑳屾櫙鑹� */
- --background-deep: 216 20.11% 95.47%;
- --foreground: 210 6% 21%;
+ --background-deep: 214 24% 96%;
+ --foreground: 213 32% 18%;
/* Background color for <Card /> */
--card: 0 0% 100%;
@@ -31,7 +31,7 @@
/* 涓婚棰滆壊 */
- --primary: 212 100% 45%;
+ --primary: 207 78% 35%;
--primary-foreground: 0 0% 98%;
/* Used for destructive actions such as <Button variant="destructive"> */
@@ -60,11 +60,11 @@
--secondary-foreground: 240 6% 10%;
/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
- --accent: 240 5% 96%;
- --accent-dark: 216 14% 93%;
- --accent-darker: 216 11% 91%;
- --accent-lighter: 240 0% 98%;
- --accent-hover: 200deg 10% 90%;
+ --accent: 214 24% 95%;
+ --accent-dark: 214 22% 92%;
+ --accent-darker: 214 20% 88%;
+ --accent-lighter: 214 30% 98%;
+ --accent-hover: 214 28% 91%;
--accent-foreground: 240 6% 10%;
/* Darker color */
@@ -72,10 +72,10 @@
--heavy-foreground: var(--accent-foreground);
/* Default border color */
- --border: 240 5.9% 90%;
+ --border: 214 20% 86%;
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
- --input: 240deg 5.88% 90%;
+ --input: 214 20% 82%;
--input-placeholder: 217 10.6% 65%;
--input-background: 0 0% 100%;
@@ -116,8 +116,8 @@
--background: 0 0% 100%;
/* 涓讳綋鍖哄煙鑳屾櫙鑹� */
- --background-deep: 216 20.11% 95.47%;
- --foreground: 210 6% 21%;
+ --background-deep: 214 24% 96%;
+ --foreground: 213 32% 18%;
/* Background color for <Card /> */
--card: 0 0% 100%;
@@ -149,11 +149,11 @@
--secondary-foreground: 240 6% 10%;
/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
- --accent: 240 5% 96%;
- --accent-dark: 216 14% 93%;
- --accent-darker: 216 11% 91%;
- --accent-lighter: 240 0% 98%;
- --accent-hover: 200deg 10% 90%;
+ --accent: 214 24% 95%;
+ --accent-dark: 214 22% 92%;
+ --accent-darker: 214 20% 88%;
+ --accent-lighter: 214 30% 98%;
+ --accent-hover: 214 28% 91%;
--accent-foreground: 240 6% 10%;
/* Darker color */
@@ -161,10 +161,10 @@
--heavy-foreground: var(--accent-foreground);
/* Default border color */
- --border: 240 5.9% 90%;
+ --border: 214 20% 86%;
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
- --input: 240deg 5.88% 90%;
+ --input: 214 20% 82%;
--input-placeholder: 217 10.6% 65%;
--input-background: 0 0% 100%;
diff --git a/src/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/src/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
index f67dd5e..b46d346 100644
--- a/src/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
+++ b/src/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@@ -79,7 +79,8 @@
const cls = [
'flex',
'items-center',
- 'gap-3',
+ 'gap-2',
+ 'pt-2',
props.compact ? 'pb-2' : 'pb-4',
props.layout === 'vertical' ? 'self-end' : 'self-center',
props.layout === 'inline' ? '' : 'w-full',
@@ -131,6 +132,7 @@
<component
:is="COMPONENT_MAP.PrimaryButton"
v-if="submitButtonOptions.show"
+ class="min-w-20"
type="button"
@click="handleSubmit"
v-bind="submitButtonOptions"
@@ -145,6 +147,7 @@
<component
:is="COMPONENT_MAP.DefaultButton"
v-if="resetButtonOptions.show"
+ class="min-w-20"
type="button"
@click="handleReset"
v-bind="resetButtonOptions"
@@ -159,6 +162,7 @@
<component
:is="COMPONENT_MAP.PrimaryButton"
v-if="submitButtonOptions.show"
+ class="min-w-20"
type="button"
@click="handleSubmit"
v-bind="submitButtonOptions"
diff --git a/src/packages/@core/ui-kit/shadcn-ui/src/components/table-action/table-action.vue b/src/packages/@core/ui-kit/shadcn-ui/src/components/table-action/table-action.vue
index 366b520..765d017 100644
--- a/src/packages/@core/ui-kit/shadcn-ui/src/components/table-action/table-action.vue
+++ b/src/packages/@core/ui-kit/shadcn-ui/src/components/table-action/table-action.vue
@@ -61,7 +61,7 @@
// 缂撳瓨鏍硅妭鐐圭被鍚嶏紝閬垮厤姣忔娓叉煋閮芥墽琛� cn()锛堝唴閮� tailwind-merge 瑙ｆ瀽寮�閿�杈冨ぇ锛�
const wrapperClass = computed(() =>
- cn('flex items-center gap-1', alignClass.value, props.class),
+ cn('flex items-center gap-0.5', alignClass.value, props.class),
);
function tooltipSide(action: ActionItem) {
@@ -89,7 +89,7 @@
return {
action,
buttonClass: cn(
- 'gap-1 p-2',
+ 'gap-1 rounded-md px-2 py-1.5',
action.danger && 'text-destructive hover:text-destructive',
action.class,
),
diff --git a/src/packages/effects/plugins/src/vxe-table/style.css b/src/packages/effects/plugins/src/vxe-table/style.css
index 11c8761..c507785 100644
--- a/src/packages/effects/plugins/src/vxe-table/style.css
+++ b/src/packages/effects/plugins/src/vxe-table/style.css
@@ -33,6 +33,7 @@
/* table */
--vxe-ui-table-header-background-color: hsl(var(--accent));
+ --vxe-ui-table-header-font-weight: 600;
--vxe-ui-table-border-color: hsl(var(--border));
--vxe-ui-table-row-hover-background-color: hsl(var(--accent-hover));
--vxe-ui-table-row-striped-background-color: hsl(var(--accent) / 60%);
@@ -56,6 +57,16 @@
/* --vxe-ui-table-fixed-scrolling-box-shadow-color: rgb(0 0 0 / 80%); */
}
+.vxe-table--render-default .vxe-body--row.row--current,
+.vxe-table--render-default .vxe-body--row.row--radio,
+.vxe-table--render-default .vxe-body--row.row--checked {
+ background-color: hsl(var(--accent));
+}
+
+.vxe-table--render-default .vxe-body--row:hover {
+ background-color: hsl(var(--accent-hover));
+}
+
.vxe-pager {
.vxe-pager--prev-btn:not(.is--disabled):active,
.vxe-pager--next-btn:not(.is--disabled):active,
diff --git a/src/packages/styles/src/antd/index.css b/src/packages/styles/src/antd/index.css
index 03b9e9e..c95784b 100644
--- a/src/packages/styles/src/antd/index.css
+++ b/src/packages/styles/src/antd/index.css
@@ -8,6 +8,15 @@
}
.ant-btn {
+ border-radius: calc(var(--radius) - 0.125rem);
+ font-weight: 500;
+ transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
+
+ &:focus-visible {
+ outline: 2px solid hsl(var(--primary) / 35%);
+ outline-offset: 2px;
+ }
+
.anticon {
display: inline-flex;
}
@@ -22,7 +31,24 @@
}
}
+.ant-input,
+.ant-input-affix-wrapper,
+.ant-input-number,
+.ant-select-selector,
+.ant-picker {
+ border-color: hsl(var(--input));
+ border-radius: calc(var(--radius) - 0.125rem);
+
+ &:focus,
+ &:focus-within {
+ border-color: hsl(var(--primary));
+ box-shadow: 0 0 0 2px hsl(var(--primary) / 16%);
+ }
+}
+
.ant-tag {
+ border-radius: calc(var(--radius) - 0.2rem);
+
> svg {
display: inline-block;
}
diff --git a/src/views/_core/authentication/login.vue b/src/views/_core/authentication/login.vue
index 7529cdf..b8dbe71 100644
--- a/src/views/_core/authentication/login.vue
+++ b/src/views/_core/authentication/login.vue
@@ -214,7 +214,7 @@
.login-card { padding: clamp(30px, 3.4vw, 48px); border: 1px solid rgb(6 27 51 / 8%); border-radius: 20px; background: #fff; box-shadow: 0 24px 70px rgb(6 27 51 / 10%), 0 4px 14px rgb(6 27 51 / 5%); }
.login-card-top, .login-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card-kicker, .lock-mark { color: #9aa8b7; font-size: 9px; letter-spacing: .1em; }.lock-mark { color: #5c9a76; }
-.login-card :deep(.mb-7) { margin-bottom: 34px; }.login-card :deep(h2) { margin-top: 26px; color: var(--ink); font-size: 34px; font-weight: 650; letter-spacing: -.06em; }.login-card :deep(.text-muted-foreground) { display: block; margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.6; }.login-card :deep(.grid) { gap: 17px; }.login-card :deep(label) { margin: 0; color: inherit; font-size: inherit; font-weight: inherit; }.login-card :deep([data-slot='checkbox'] + label) { margin-left: 8px; color: #51657a; font-size: 13px; font-weight: 500; line-height: 16px; }.login-card :deep(input) { min-height: 52px; border: 1px solid #d9e0e8; border-radius: 10px; color: var(--ink); background: #fff; box-shadow: none; font-family: inherit; font-size: 14px; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }.login-card :deep(input::placeholder) { color: #9aa7b6; }.login-card :deep(input:hover), .login-card :deep(input:focus) { border-color: var(--tech-blue); box-shadow: 0 0 0 4px rgb(22 119 255 / 10%); transform: translateY(-1px); }.login-card :deep([data-slot='input-group']) { border: 1px solid #d9e0e8; border-radius: 10px; background: #fff; }.login-card :deep([data-slot='input-group']:focus-within) { border-color: var(--tech-blue); box-shadow: 0 0 0 4px rgb(22 119 255 / 10%); }.login-card :deep([data-slot='input-group'] input) { border: 0; box-shadow: none; transform: none; }.login-card :deep(button:not([data-slot='checkbox'])) { min-height: 52px; border-radius: 10px; font-family: inherit; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }.login-card :deep(button[type='submit']) { margin-top: 10px; color: #fff; background: var(--tech-blue); font-size: 14px; font-weight: 650; letter-spacing: .05em; }.login-card :deep(button[type='submit']:hover) { background: #0f65db; box-shadow: 0 12px 24px rgb(22 119 255 / 22%); transform: translateY(-2px); }.login-card :deep(button[type='submit']:active) { transform: translateY(0) scale(.985); }.login-card :deep([data-slot='checkbox']) { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; border: 1px solid #c2ccd6; border-radius: 4px; color: #fff; background: transparent; box-shadow: none; cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }.login-card :deep([data-slot='checkbox']:hover) { border-color: var(--tech-blue); }.login-card :deep([data-slot='checkbox'][data-state='checked']) { border-color: var(--tech-blue); background: var(--tech-blue); }.login-card :deep([data-slot='checkbox']:focus-visible) { box-shadow: 0 0 0 3px rgb(22 119 255 / 22%); outline: none; }.login-card-footer { margin-top: 30px; padding-top: 16px; border-top: 1px solid #e8edf2; color: #9aa7b6; font-size: 10px; }.security-caption { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 18px 0 0; color: #8a98a8; font-size: 11px; }
+.login-card :deep(.mb-7) { margin-bottom: 34px; }.login-card :deep(h2) { margin-top: 26px; color: var(--ink); font-size: 34px; font-weight: 650; letter-spacing: -.06em; }.login-card :deep(.text-muted-foreground) { display: block; margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.6; }.login-card :deep(.grid) { gap: 17px; }.login-card :deep(label) { margin: 0; color: inherit; font-size: inherit; font-weight: inherit; }.login-card :deep([data-slot='checkbox'] + label) { margin-left: 8px; color: #51657a; font-size: 13px; font-weight: 500; line-height: 16px; }.login-card :deep(input) { min-height: 52px; box-sizing: border-box; border: 1px solid #d9e0e8; border-radius: 10px; color: var(--ink); background: #fff; box-shadow: none; font-family: inherit; font-size: 14px; transition: border-color .2s ease, box-shadow .2s ease; }.login-card :deep(input::placeholder) { color: #9aa7b6; }.login-card :deep(input:hover), .login-card :deep(input:focus) { border-color: var(--tech-blue); box-shadow: 0 0 0 3px rgb(22 119 255 / 10%); outline: none; }.login-card :deep([data-slot='input-group']) { box-sizing: border-box; border: 1px solid #d9e0e8; border-radius: 10px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }.login-card :deep([data-slot='input-group']:hover), .login-card :deep([data-slot='input-group']:focus-within) { border-color: var(--tech-blue); box-shadow: 0 0 0 3px rgb(22 119 255 / 10%); }.login-card :deep([data-slot='input-group'] input) { min-height: 50px; border: 0; border-radius: 9px; box-shadow: none; outline: none; }.login-card :deep([data-slot='input-group'] input:hover), .login-card :deep([data-slot='input-group'] input:focus) { border: 0; box-shadow: none; }.login-card :deep(button:not([data-slot='checkbox'])) { min-height: 52px; border-radius: 10px; font-family: inherit; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }.login-card :deep(button[type='submit']) { margin-top: 10px; color: #fff; background: var(--tech-blue); font-size: 14px; font-weight: 650; letter-spacing: .05em; }.login-card :deep(button[type='submit']:hover) { background: #0f65db; box-shadow: 0 12px 24px rgb(22 119 255 / 22%); transform: translateY(-2px); }.login-card :deep(button[type='submit']:active) { transform: translateY(0) scale(.985); }.login-card :deep([data-slot='checkbox']) { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; border: 1px solid #c2ccd6; border-radius: 4px; color: #fff; background: transparent; box-shadow: none; cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }.login-card :deep([data-slot='checkbox']:hover) { border-color: var(--tech-blue); }.login-card :deep([data-slot='checkbox'][data-state='checked']) { border-color: var(--tech-blue); background: var(--tech-blue); }.login-card :deep([data-slot='checkbox']:focus-visible) { box-shadow: 0 0 0 3px rgb(22 119 255 / 22%); outline: none; }.login-card-footer { margin-top: 30px; padding-top: 16px; border-top: 1px solid #e8edf2; color: #9aa7b6; font-size: 10px; }.security-caption { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 18px 0 0; color: #8a98a8; font-size: 11px; }
@media (max-width: 1050px) { .mes-login-page { grid-template-columns: minmax(0, 55%) minmax(400px, 45%); }.industrial-hero { padding-inline: 42px; }.capability-item { font-size: 12px; }.capability-item b { font-size: 7px; } }
@media (max-width: 760px) { .mes-login-page { display: block; }.industrial-hero { min-height: 430px; padding: 28px 24px 22px; }.hero-content { margin: 66px 0 0; }.hero-content h1 { margin-top: 16px; font-size: 48px; }.capability-list { margin-top: 28px; }.capability-item { padding-top: 11px; font-size: 11px; }.capability-item:not(:first-child) { padding-left: 10px; }.capability-item b, .system-mark, .data-widget { display: none; }.factory-visual { bottom: 24px; opacity: .65; }.hero-footer { position: relative; z-index: 2; margin-top: auto; font-size: 7px; }.hero-footer span:nth-child(2) { display: none; }.login-side { padding: 38px 22px 48px; }.login-card { padding: 30px 24px; } }
@media (max-width: 400px) { .industrial-hero { min-height: 390px; padding-inline: 20px; }.company-logo { width: 40px; height: 40px; }.company-name strong { font-size: 16px; }.company-name span { font-size: 9px; }.hero-content h1 { font-size: 41px; }.capability-list { grid-template-columns: repeat(2, 1fr); gap: 10px 0; border-bottom: 1px solid var(--line-blue); padding-bottom: 10px; }.capability-item:nth-child(2) { border-right: 0; }.capability-item:nth-child(3) { padding-left: 0; }.login-side { padding-inline: 18px; } }
diff --git a/src/views/mes/pd/basedata/index.vue b/src/views/mes/pd/basedata/index.vue
index 8a15b50..2de29cd 100644
--- a/src/views/mes/pd/basedata/index.vue
+++ b/src/views/mes/pd/basedata/index.vue
@@ -13,16 +13,30 @@
<template>
<Page auto-content-height>
- <div class="p-4">
- <Tabs v-model:activeKey="activeKey">
+ <div class="basedata-page flex h-full min-h-0 flex-col p-4">
+ <Tabs v-model:activeKey="activeKey" class="basedata-tabs min-h-0 flex-1">
<Tabs.TabPane
v-for="cfg in BaseDataConfigs"
:key="cfg.key"
:tab="cfg.title"
+ class="min-h-0"
>
- <BaseTable :key="cfg.key" :config="cfg" />
+ <div class="h-full min-h-0">
+ <BaseTable :key="cfg.key" :config="cfg" />
+ </div>
</Tabs.TabPane>
</Tabs>
</div>
</Page>
</template>
+
+<style scoped>
+.basedata-tabs :deep(.ant-tabs-content),
+.basedata-tabs :deep(.ant-tabs-tabpane) {
+ height: 100%;
+}
+
+.basedata-tabs :deep(.ant-tabs-content) {
+ min-height: 0;
+}
+</style>
--
Gitblit v1.9.3