前面完成了项目开发的大部分工作，本节我们从安全和用户体验等角度出发，对项目做一些必要的改进，我们计划完成以下功能：

• 页面权限控制；
• 加载进度反馈；
• ……

# 如何提供良好用户体验？

想要提供良好的用户体验给用户，通常需要做到以下几点：

1. 网站导航：为用户提供直观和易理解的网站导航结构。确保网站的导航条、面包屑和搜索框等元素在网站的每个页面上都存在。
2. 访问速度：确保网站能被快速加载。在移动设备上访问网站的用户特别需要更快的加载速度。
3. 响应式设计：确保网站在所有设备上都能够良好的呈现，并且自适应屏幕大小和分辨率。
4. 内容呈现：网站上的内容应该清晰明了。
5. 安全：确保网站的安全性，用户信息不被泄露。
6. 交互和反馈：简化用户交互方式，例如注册、登录、购买等过程的简化。提供及时的交互反馈，例如友好的错误提示，加载进度反馈等。

# 响应式设计

我们网站之前没有考虑移动端适配，这导致用户在移动端观看体验非常差。实际上利用 tailwind 和 naive-ui 提供的响应式特性可以很容易适配移动端。

接下来以首页为例，演示一下如何通过简单调整实现移动端适配。

首先是 banner 高度调整，之前高度为 400px，移动端显然要低一些，我们按照 1024 / 375 的比例缩放到 150px 左右，pages/index.vue：

ini
复制代码  <n-carousel show-arrow class="mb-6">
    <div
      v-for="item in slides" :key="item.label"
      class="text-white w-full rounded cursor-pointer text-center leading-[400px]
-       h-[400px]
+       h-[150px]
+       lg:h-[400px]"
      :style="{ backgroundColor: item.bgColor }"
    >
      {{ item.label }}
    </div>
  </n-carousel>

看一下效果：

接下来是调整布局整体最小宽度，之前有设置一个 min-w-[1024px]，现在显然需要是大于 1024px 之后才起作用，layouts/default.vue：

xml
复制代码<div
    class="bg-gray-100 flex flex-col min-h-screen
-     min-w-[1024px]
+     lg:min-w-[1024px]"
>
    <MyHeader />
    <main class="container m-auto mt-20">
      <slot />
    </main>
    <MyFooter />
  </div>

效果如下：

登录按钮溢出去了，这是因为 padding 没有算在容器宽度内，大屏下空间充裕看不出来。可以看到，我们添加了 box-border，同时缩小了小屏下的 padding 值，MyHeader.vue：

scss
复制代码<div class="container m-auto flex items-center h-[60px]
-  px-4"
+  lg:px-4 px-2 box-border"
>