chore: remove useless fixedHeader prop for Page

vbenjs · Dec 7, 2024 · 6536921 · 6536921
1 parent bac0275
commit 6536921
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 50 deletions.
diff --git a/docs/src/components/layout-ui/page.md b/docs/src/components/layout-ui/page.md
@@ -26,7 +26,6 @@ outline: deep
 | headerClass | 头部区域的class | `string` | - | - |
 | footerClass | 底部区域的class | `string` | - | - |
 | autoContentHeight | 自动调整内容区域的高度 | `boolean` | `false` | - |
-| ~~fixedHeader~~ | ~~固定头部在页面内容区域顶部，在滚动时保持可见~~ | `boolean` | `false` | 待实现 |
 
 ::: tip 注意
 

diff --git a/packages/effects/common-ui/src/components/page/page.vue b/packages/effects/common-ui/src/components/page/page.vue
@@ -1,14 +1,7 @@
 <script setup lang="ts">
-import {
-  computed,
-  nextTick,
-  onMounted,
-  ref,
-  type StyleValue,
-  useTemplateRef,
-} from 'vue';
+import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
 
-import { preferences } from '@vben-core/preferences';
+import { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT } from '@vben-core/shared/constants';
 import { cn } from '@vben-core/shared/utils';
 
 interface Props {
@@ -19,8 +12,6 @@ interface Props {
    * 根据content可见高度自适应
    */
   autoContentHeight?: boolean;
-  /** 头部固定（暂未实现） */
-  fixedHeader?: boolean;
   headerClass?: string;
   footerClass?: string;
 }
@@ -29,13 +20,7 @@ defineOptions({
   name: 'Page',
 });
 
-const {
-  contentClass = '',
-  description = '',
-  autoContentHeight = false,
-  title = '',
-  fixedHeader = false,
-} = defineProps<Props>();
+const { autoContentHeight = false } = defineProps<Props>();
 
 const headerHeight = ref(0);
 const footerHeight = ref(0);
@@ -44,22 +29,11 @@ const shouldAutoHeight = ref(false);
 const headerRef = useTemplateRef<HTMLDivElement>('headerRef');
 const footerRef = useTemplateRef<HTMLDivElement>('footerRef');
 
-const headerStyle = computed<StyleValue>(() => {
-  return fixedHeader
-    ? {
-        position: 'sticky',
-        zIndex: 200,
-        top:
-          preferences.header.mode === 'fixed' ? 'var(--vben-header-height)' : 0,
-      }
-    : undefined;
-});
-
 const contentStyle = computed(() => {
   if (autoContentHeight) {
     return {
       height: shouldAutoHeight.value
-        ? `calc(var(--vben-content-height) - ${headerHeight.value}px - ${footerHeight.value}px)`
+        ? `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px)`
         : '0',
       // 'overflow-y': shouldAutoHeight.value?'auto':'unset',
     };
@@ -97,28 +71,26 @@ onMounted(() => {
       ref="headerRef"
       :class="
         cn(
-          'bg-card relative px-6 py-4',
+          'bg-card border-border relative flex items-end border-b px-6 py-4',
           headerClass,
-          fixedHeader
-            ? 'border-border border-b transition-all duration-200'
-            : '',
         )
       "
-      :style="headerStyle"
     >
-      <slot name="title">
-        <div v-if="title" class="mb-2 flex text-lg font-semibold">
-          {{ title }}
-        </div>
-      </slot>
+      <div class="flex-auto">
+        <slot name="title">
+          <div v-if="title" class="mb-2 flex text-lg font-semibold">
+            {{ title }}
+          </div>
+        </slot>
 
-      <slot name="description">
-        <p v-if="description" class="text-muted-foreground">
-          {{ description }}
-        </p>
-      </slot>
+        <slot name="description">
+          <p v-if="description" class="text-muted-foreground">
+            {{ description }}
+          </p>
+        </slot>
+      </div>
 
-      <div v-if="$slots.extra" class="absolute bottom-4 right-4">
+      <div v-if="$slots.extra">
         <slot name="extra"></slot>
       </div>
     </div>
@@ -132,8 +104,8 @@ onMounted(() => {
       ref="footerRef"
       :class="
         cn(
-          footerClass,
           'bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4',
+          footerClass,
         )
       "
     >

diff --git a/playground/src/views/examples/form/basic.vue b/playground/src/views/examples/form/basic.vue
@@ -362,7 +362,6 @@ function handleSetFormValue() {
   <Page
     content-class="flex flex-col gap-4"
     description="表单组件基础示例，请注意，该页面用到的参数代码会添加一些简单注释，方便理解，请仔细查看。"
-    fixed-header
     header-class="pb-0"
     title="表单组件"
   >

diff --git a/playground/src/views/examples/modal/index.vue b/playground/src/views/examples/modal/index.vue
@@ -77,7 +77,6 @@ function openFormModal() {
 <template>
   <Page
     description="弹窗组件常用于在不离开当前页面的情况下，显示额外的信息、表单或操作提示，更多api请查看组件文档。"
-    fixed-header
     title="弹窗组件示例"
   >
     <template #extra>