[src\layouts\components\SideNav.vue] 在npm run build之后，部署到nginx之后，isSidebarCompact为true 有问题。

chnykn commented 1 year ago

tdesign-vue-next-starter 版本

至少从0.6.0已发现该问题，最新0.7.0依然存在

重现链接

No response

重现步骤

npm run build编译之后、在nginx部署后，如果点击左上的view-list图标，试图让 isSidebarCompact为true（即侧边栏缩小），结果会产生如下情况（见下图）：

就是侧边栏的宽度并没有fit-content; 还是与之前一样宽。

但是npm run dev模式下，不会出现问题！经测试，浏览器为Edge 109.0.1518.78 (正式版本) (64 位)、Firefox 108.0.2 (64 位) 均如此。

初步怀疑： /src/style/layout.less中的 .t-layout__sider { width: fit-content; } 是不是在build之后， width: fit-content; 不听话了？

当然，也有不那么优雅的解决方式，在src\layouts\components\SideNav.vue文件中： 1、注释掉此行代码 const collapsed = computed(() => useSettingStore().isSidebarCompact); 2、替换为以下代码

const { isSidebarCompact } = storeToRefs(settingStore);

const collapsed = ref(false);
watch(isSidebarCompact, (value) => {
    // newVal , oldVal
    collapsed.value = value;

    const sider = document.querySelector('.t-layout__sider') as HTMLElement;
    if (sider) {
        sider.style.width = value ? '64px' : 'auto';
    }
});

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

github-actions[bot] commented 1 year ago

👋 @chnykn，感谢给 TDesign 提出了 issue。请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

github-actions[bot] commented 1 year ago

♥️ 有劳 @pengYYYYY 尽快确认问题。确认有效后将下一步计划和可能需要的时间回复给 @chnykn 。

timi137137 commented 1 year ago

这边测试下来没有发现这个问题，有可能是npm包管理器的问题（之前收到类似问题报告）也有可能是其他问题，目前PMC同学正在优化样式，可以交给那边看看

Tencent / tdesign-vue-next-starter