包裹页面组件 PageWrapper 设置dense: true时页面vben-page-wrapper-content空白

[waney]

如题，在开发时保存文件后，[vite] hot updated，vben-page-wrapper-content 页面内容空白（版本 v2.7.0），不设置dense则正常。

[mynetfan]

https://vvbin.cn/next/#/system/account
未能重现

[waney]

https://vvbin.cn/next/#/system/account
未能重现

在线重现不了，是指在本地修改了文件并保存之后[vite] hot updated，页面热更新时class="vben-page-wrapper-content" 这个Div内出现白屏。要刷新页面才能恢复。这个就是开发的时候很碍事，后来好不容易发现不设置dense可避免。 @mynetfan

[mynetfan]

我就是在本地测试的，提供的地址是想指明我具体测试的页面。我这里未能重现你所说的问题

[waney]

@mynetfan 抱歉，我刚刚测试了，有复现，但是我也说不清楚问题在哪。
我的步骤：
1打开目标页面，2在vscode里修改部分内容，比如一些汉字。3保存修改之后，什么都别动观察页面自动重载情况。发现主体部分空白，头部和菜单均显示。(ctrl+s 保存一次出现白屏、再保存一次又显示、反复如此，我这100%复现了。win10 + chrome 版本 92.0.4515.131（正式版本） （64 位）
)

<template>
  <PageWrapper contentBackground contentClass="flex" dense contentFullHeight fixedHeight>
    <BasicTable
      @register="registerTable"
      :rowSelection="{ type: 'checkbox', selectedRowKeys: checkedKeys, onChange: onSelectChange }"
    >
      <template #headerTop>
        <a-alert type="info" show-icon v-if="checkedKeys.length > 0">
          <template #message>
            <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
            <a-button type="link" @click="checkedKeys = []" size="small">清空</a-button>
          </template>
        </a-alert>
      </template>
      <template #toolbar
        ><a-button type="primary" preIcon="ant-design:highlight" @click="goArticleAdd"
          >新建稿件</a-button
        >
        <a-button pre-icon="ic:outline-low-priority" @click="reset">重置</a-button>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              onClick: handleEdit.bind(null, record),
            },
          ]"
          :dropDownActions="[
            {
              label: '启用',
              popConfirm: {
                title: '是否启用？',
                confirm: handleOpen.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
  </PageWrapper>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { getBasicColumns } from './tableData';
import { Alert as AAlert } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import { getArticles } from '/@/api/sys/article';
import { PageWrapper } from '/@/components/Page';
import { useGo } from '/@/hooks/web/usePage';

const go = useGo();
const checkedKeys = ref<Array<string | number>>([]);
const [registerTable, { reload }] = useTable({
  title: '所有稿件',
  api: getArticles,
  columns: getBasicColumns(),
  showIndexColumn: true,
  rowKey: 'id',
  inset: true,
  actionColumn: {
    width: 160,
    title: 'Action',
    dataIndex: 'action',
    slots: { customRender: 'action' },
  },
});

function handleEdit(record: Recordable) {
  console.log('点击了编辑', record);
}
function handleOpen(record: Recordable) {
  console.log('点击了启用', record);
}

function onSelectChange(selectedRowKeys: (string | number)[]) {
  console.log(selectedRowKeys);
  checkedKeys.value = selectedRowKeys;
}

function goArticleAdd() {
  go('/article/add');
}

const reset = () => {
  reload({ page: 1 });
};
</script>
<style lang="less"></style>

[waney]

@mynetfan
下载官网例子复现了。
http://192.168.3.210:3101/#/comp/table/fetchTable

<template>
  <PageWrapper contentBackground contentClass="flex" dense contentFullHeight fixedHeight>
    <BasicTable
      @register="registerTable"
    >
    </BasicTable>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { getBasicColumns } from './tableData';
  import { demoListApi } from '/@/api/demo/table';
  import { PageWrapper } from '/@/components/Page';

  const [registerTable, { reload }] = useTable({
    title: '远程加载示例1',
    api: demoListApi,
    columns: getBasicColumns()
  });
</script>

[mynetfan]

已找到原因：
PageWrapper的fixedHeight不可与basicTable的canResize（默认为true）同时启用，二者在功能上有冲突，都是自动计算高度。请确保只启用其中一个属性。
fixedHeight：根据内部组件的高度自动调整页面高度。canResize：根据页面高度自动调整table高度。