Electron+Vue3 MAC 版日历开发记录(24)——样式调整开始

这是我参与更文挑战的第24天，活动详情查看： 更文挑战

今天提个题外话，本来想着今晚好好写代码，但临时居委会说有安徽疫苗了，赶紧去打，发现整个过程：从社区发通知->填表->录入系统->打疫苗->指引进入留观室，整个过程一气呵成，所有工作人员指引到位，现场一片温暖有序，除了留观 30 分钟，其他过程基本 3 分钟内搞定 —— 不得不感慨疫情之后，所有人都有“爱”和关怀。

也因为打疫苗，今晚大概率的出现「水文」了，各位看官多多包涵。

好了，开始我们今晚的记录。

已经是第 24 天了，该到了调整样式的时候了，我做了一个实验，把应用的长和宽都缩小 200：

VITE_APP_WIDTH=500
VITE_APP_HEIGHT=400

样式问题

发现出现样式布局等都出问题：

1. 首页多了两个滚动条：

2. 创建事件页面，日期选择框超出边界了：

3. Tab 界面超出宽度

4. 菜单栏设置超出高度

5. 黄历页面更是混乱

如何解决长和宽的变化带来的布局问题是接下来的主要工作。

Tab 界面超出宽度问题

这个问题我尝试把 NDrawer 宽度增加了一点：

所以还是需要看看 NTab：

而我觉得这个间隔太大了：

--tab-gap: 36px;

所以需要减小这个值：

--tab-gap: 18px;

菜单栏设置超出高度

这个也比较简单，主要把 <n-space vertical> 布局改成 NGrid 方式，会不会更好呢，如：

<n-grid :x-gap="12" :cols="2">
  <n-grid-item>
    <h4>显示节假日(农历)</h4>
    <n-switch
      v-model:value="trayFestivalsModel"
      size="large"
      @update-value="updateTraySetting"
    />
  </n-grid-item>
  <n-grid-item>
    <h4>显示天气预报</h4>
    <n-switch
      v-model:value="trayWeatherModel"
      size="large"
      @update-value="updateTraySetting"
    />
  </n-grid-item>
  <n-grid-item>
    <h4>显示星期</h4>
    <n-switch
      v-model:value="trayWeekModel"
      size="large"
      @update-value="updateTraySetting"
    />
  </n-grid-item>
  <n-grid-item>
    <h4>显示秒钟</h4>
    <n-switch
      v-model:value="traySecondsModel"
      size="large"
      @update-value="updateTraySetting"
    />
  </n-grid-item>
</n-grid>

小结

今晚确实给自己的写代码时间太短了，所以只能记录到哪儿算哪。接下来的几天都会在布局上好好打磨，也会邀请我们的 UI 设计师帮忙设计页面和 Logo 形象，直到达到上线标准。

未完待续！