响应式布局

响应式设计应当顺应内容，而不是等比压缩。在开始搭界面之前，先思考各个区块在屏幕变窄时应当如何演变：某些辅助区域可以留下来并适当收缩；某些可以暂时收进按需展开的抽屉浮层中；而某些不关键的次要内容则可以直接隐藏。当三栏内容并排太挤时，应把次要的一栏收起或折叠，不要把文字和按钮压得变形。

页面外壳（AppShell）断点设置

AppShell 的 mobileNav.breakpoint 决定了侧边导航栏（SideNav）在什么时候自动折叠进移动端抽屉里。默认的折叠断点是 md。

选项值	触发宽度	说明
`sm`	640px	仅在超小手机屏幕上折叠
`md`	768px	平板及以下屏幕折叠（默认推荐）
`lg`	1024px	小屏笔记本或横屏平板以下折叠
`xl`	1280px	普通桌面屏幕以下折叠
`2xl`	1536px	大屏幕以下折叠
`none`	不收起	始终保持左侧栏常驻，不使用移动端抽屉

当视口宽度小于所设断点时，原本常驻的左侧栏会移出主版面，转由汉堡按钮和呼出的抽屉来接管。同属于一个外壳内的顶栏也会复用这只抽屉，避免重复生成弹层。如果传入 :mobile-nav="false"，则完全关闭移动端抽屉行为。

在 AppShell 内部的任何子组件里，你都可以随时调用 useAppShellMobile() 组合式函数，实时读取当前是否处于窄屏移动状态，以及抽屉是否正处于打开状态。

内容版心与布局（Layout）

Layout 负责把页面的布局结构清晰切分为：页眉（header）、起始侧（start）、主要内容（content）、结束侧（end）和页脚（footer）等插槽。

舒适阅读宽度：通常一行正文文本在 40 到 60 个中文字符（或 60 到 80 个英文字符）时人眼读起来最不容易疲劳。Layout 提供了 contentWidth 属性（单位是像素），能方便地限制中间正文栏的宽度，同时保持上下的分隔线横向拉通铺满，无需在每个段落里层层包裹容器。
自适应侧面板：放在结束插槽（end slot）里的 LayoutPanel 经常用来展示选中的条目详情。当屏幕变窄空间不够时，可以借助条件渲染在窄屏时隐藏它，改为需要时通过弹窗或底部抽屉查看。

vue

<script setup lang="ts">
import { useMediaQuery } from '@astryx-vue/core'
import { AppShell } from '@astryx-vue/core/AppShell'
import { Layout, LayoutContent, LayoutPanel } from '@astryx-vue/core/Layout'
import { SideNav, SideNavItem } from '@astryx-vue/core/SideNav'

// 监听屏幕是否小于 1024px
const isNarrow = useMediaQuery('(max-width: 1024px)')
</script>

<template>
  <AppShell :mobile-nav="{ breakpoint: 'md' }">
    <template #sideNav>
      <SideNav>
        <SideNavItem href="/orders" label="订单" />
      </SideNav>
    </template>

    <Layout :content-width="720">
      <LayoutContent>
        <p>订单列表</p>
      </LayoutContent>

      <!-- 仅在宽屏展示右侧面板，窄屏时隐藏以保证阅读体验 -->
      <template v-if="!isNarrow" #end>
        <LayoutPanel :width="380" has-divider>
          <p>订单详情</p>
        </LayoutPanel>
      </template>
    </Layout>
  </AppShell>
</template>

在这个例子里：

当屏幕宽于 1024px 时，呈现三栏结构：侧导航、正文、380px 的右侧面板；
宽度小于 1024px 时，右侧面板隐藏，腾出完整空间显示正文；需要看详情时可通过 Dialog 或 BottomSheet 调出；
进一步变窄到 md（768px）以下时，侧导航自动收录到移动端抽屉里。

useMediaQuery 在组件 setup 初始化时就会同步计算一次状态，并在窗口缩放时平滑响应。

自动换行的网格布局（Grid）

Grid 组件的 columns 属性如果直接写成固定的数字，例如 :columns="7"，那么即便在屏幕极窄的手机上，它也依旧会死板地强行挤成 7 列（适合用来做固定星期的日历排版）。

如果你希望网格能根据容器宽度自动增减列数，可以传入 { minWidth, max } 配置对象：

minWidth：每列最小允许的宽度（像素）；
max：最多允许排成多少列。

容器放不下更多列时会自动少一列，并把剩余卡片顺延换行；当缩窄到只剩一列时，卡片宽度会自动伸展填满整个容器。gap 属性设置的卡片间隙，也会被精准计算进列宽的容量判断中。

vue

<!-- 宽屏时最多 4 列，屏幕变窄时自动减少列数换行 -->
<Grid :columns="{ minWidth: 240, max: 4 }" :gap="3">
  <!-- 卡片内容 -->
</Grid>

<!-- 一周 7 天的日历视图，每一档宽度都保持固定的 7 列 -->
<Grid :columns="7" :gap="1">
  <!-- 日期内容 -->
</Grid>

此外，你还可以通过 repeat 属性控制未填满时的排版策略：

repeat="fill"（默认值）：保留空列占位，确保每一列的卡片都保持相同宽度。
repeat="fit"：收起多余的空列，让已有的卡片均分并撑满整行空间。

响应式布局 ​

页面外壳（AppShell）断点设置 ​

内容版心与布局（Layout） ​

自动换行的网格布局（Grid） ​

响应式布局

页面外壳（AppShell）断点设置

内容版心与布局（Layout）

自动换行的网格布局（Grid）