fix 修正页面高度问题

xiaoyi

2 天以前 35cc98f11150d068032df597e542c62480249e04

fix 修正页面高度问题

 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%;


 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%;


 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"

 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,
      ),

 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,

 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;
  }

 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; } }

 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>