Vuetify 2→3迁移：用order替代app/clipped-left/offset-y属性

针对你提到的app、clipped-left、offset-y这些被移除的属性，直接给你对应替换的代码示例，照着改就能还原原有功能：

1. 替换 app 属性 #

Vuetify 3里不再需要app来固定导航栏，改用position="fixed"+top="0"实现顶部固定，同时要给页面主体加padding-top避免内容被遮挡（原来app会自动处理，现在得手动加）。

原代码（Vuetify 2）：

<v-app-bar app>
  <!-- 导航栏内容 -->
</v-app-bar>

替换后（Vuetify 3）：

<v-app-bar position="fixed" top="0" style="width: 100%;">
  <!-- 导航栏内容 -->
</v-app-bar>

<!-- 页面主体容器，padding值对应导航栏高度，默认是64px，根据你的实际样式调整 -->
<v-main style="padding-top: 64px;">
  <!-- 页面内容 -->
</v-main>

2. 替换 clipped-left 属性 #

原来的clipped-left是让导航栏左侧和侧边栏重叠，现在用order属性控制堆叠层级，配合侧边栏的定位实现：

原代码（Vuetify 2）：

<v-navigation-drawer app clipped>
  <!-- 侧边栏内容 -->
</v-navigation-drawer>
<v-app-bar app clipped-left>
  <!-- 导航栏内容 -->
</v-app-bar>

替换后（Vuetify 3）：

<!-- 侧边栏固定在左侧，top设为导航栏高度（64px），order设为1 -->
<v-navigation-drawer position="fixed" left="0" top="64px" order="1" style="height: calc(100vh - 64px);">
  <!-- 侧边栏内容 -->
</v-navigation-drawer>

<!-- 导航栏order设为2（比侧边栏大），确保在侧边栏上方显示 -->
<v-app-bar position="fixed" top="0" left="0" order="2" style="width: 100%;">
  <!-- 导航栏内容 -->
</v-app-bar>

这里order的逻辑很简单：数值越大，元素层级越高（越靠上），所以导航栏order比侧边栏大，就能覆盖在侧边栏顶部，还原clipped-left的重叠效果。

3. 替换 offset-y 属性 #

原来的offset-y是让导航栏向下偏移避开系统栏，现在直接用top属性设置偏移量即可：

原代码（Vuetify 2）：

<v-system-bar app>
  <!-- 系统栏内容 -->
</v-system-bar>
<v-app-bar app offset-y>
  <!-- 导航栏内容 -->
</v-app-bar>

替换后（Vuetify 3）：

<v-system-bar position="fixed" top="0" style="width: 100%;">
  <!-- 系统栏内容 -->
</v-system-bar>

<!-- top值设为系统栏的高度（默认24px），让导航栏在系统栏下方 -->
<v-app-bar position="fixed" top="24px" style="width: 100%;">
  <!-- 导航栏内容 -->
</v-app-bar>

<!-- 页面主体的padding要加系统栏+导航栏的总高度 -->
<v-main style="padding-top: calc(24px + 64px);">
  <!-- 页面内容 -->
</v-main>

内容的提问来源于stack exchange，提问作者user3534080