Skip to content

002 前端开发周报

尝试第二次写周报. 没什么压力, 但依旧拖延.

本周内容

  • 新增了配置项: 免登录的白名单. 在名单内的页面不进行权限校验.
  • 完善了权限的验证: 通过 url 访问无权页面时会给与提示.
  • 给登录页面加了个样式.
  • 登录后的框架也加了个样式. 当然还不够细节, 慢慢完善.
  • 基于 simpleBar 写了一个滚动组件. 侧边菜单及头部标签页超出时会显示 simpleBar 的滚动条.
  • 尝试写了两个组件:
    • MyButton 按钮组件.
    • MyInput 输入框/文本域组件.

免登录白名单

nuxt.config.ts 配置文件中, 新增了配置项 runtimeConfig.public.loginFreeList 是个数组. 不包括登录页.

在这里配置没大问题, 但在 .env 文件中配置时要注意. 每项内容必须为双引号. 如:

NUXT_PUBLIC_LOGIN_FREE_LIST=["admin", "testaa"]

启用了 nuxt 的布局

为了项目灵活度. 启用了 nuxt 的布局.

目前, 有两个布局文件.

1. default.vue

默认布局, 登录后的面板框架. 无需做任何设置默认使用该布局.

2. page.vue

单页布局, 目前有两个页面使用了此布局:

  • /pages/login.vue 登录页面.
  • /pages/testaa.vue 测试免登录白名单的页面.

只需要在组件页面做个声明即可, 这是 [email protected] 自己的 方法.

<script setup>
    definePageMeta({
        layout: 'page'
    })
</script>

多标签模式

以前在开发企业内部管理系统的时候, 大家对多标签这个功能情有独钟. 只要没有, 就一直提需求. 但是 vue 实现的多标签并不是过去那种堆叠 iframe 的模式. 就会出现 keep-alive 的问题.

这次依旧选用多标签模式, 依旧会碰到 keep-alive 的问题. 依旧打算使用 dialog 的把这个问题绕过去.

由于目前组件还没完成. 所以还不确定能不能绕过去 🤣

尝试封装 ui 组件

目前做了两个: MyButton MyInput. 还没有成熟框架那些复杂的功能逻辑, 仅仅是配置了一下预设样式:

  • 展示样式
  • 尺寸
  • 边框
  • 边角
  • 禁用

另外, 给 MyInput 做了个小眼睛, 用来 显示/隐藏 密码状态.

这都不是重点, 重点有两个:

  • 赶紧尝试两个组件, 没问题后要把 ezAdmin 中特色的 table dialog 模式拿过来.
  • 总结出一套通用的模式, 方便后续组件的开发.

尺寸命名的问题

在尝试写组件的时候, 发现个tailwindcss的问题:

字体大小是: xs sm base lg ..., 其中 base 是默认值;

但在边框圆角那里就变成了: sm default md lg ..., 其中 default 是默认值.

单看, 两个都没问题, 但会给使用者造成混乱. 一会是 xs 最小, 一会又变成了sm最小; 一个没有md, 一个由多出来个md.

我希望能把他们统一了, 但反复尝试后, 还没找到一个更好的统一方式. 目前使用的方式如下:

  • 涉及到尺寸的地方, 都会有 xs sm md lg. 在不考虑默认值的前提下, 保证使用者不迷糊. 当然, 有些组件/配置项可能会有更多选项, 比如: round 还有 none full.
  • 根据实际视觉感受, 设定 default 值. 比如: size 的 default 是 md; 而 round 的 default 是 sm

nuxt/vite 热更新问题

尝试基于 unocss 写 MyButton 组件时, 发现当改变组件的 type 属性值后, 热更正常但实际渲染没有发生任何改变. 翻来覆去的尝试, 可以稳定复现. 然后基于 vite 又试了一下, 依旧稳定复现. 立马登录 github 发起 讨论. 后来发现不是 unocss 的问题, 因为背景色这个不渲染是毕现, 但其它基于 unocss 的配置项就可以刷出来. 暂时没有解决, 不过不影响继续开发.