@fiscozen/警报
警示组件:及时征集信息(信息,错误,警告,成功,危险).
关于用法文档和实例,见 故事书文档 - 信件 / FzAlert。 。 。 .
发展
设置
从 repo 根: 安装依赖性 pnpm install。运行单元测试 pnpm --filter @fiscozen/alert test:unit。从 repo 根运行故事本以尝试组件.
建筑
- 备选案文数字 :
background(总是扩大,可选标题和行动),accordion(可折叠),text(只描述,没有标题/行动/解散,透明的背景,语气被忽略). - 调音: 驱动图标、背景和边框
background财务报告和审定财务报表accordion; 已忽略text(透明背景;图标仍然反映语义学的语气). - 环境数字 :
frontoffice(默认) vsbackoffice影响铺设(p-12对p-6)并传递给FzButton编号 :FzIconButton变量text+ 键environment: 'backoffice',主要图标使用大小sm; 否则md。 。 。 .
守则组织
src/FzAlert.vue: 主要组件; 计算safeVariant, (中文(简体) ),safeEnvironment, (中文(简体) ),isTextVariant, (中文(简体) ),iconSize, (中文(简体) ),containerClass等 (中文(简体) ).src/types.ts数字 :AlertProps, (中文(简体) ),AlertVariant; 破损道具alertStyle, (中文(简体) ),size。 。 。 .src/index.ts: 出口成分和类型.
关键概念
文本变体:没有标题,没有按钮/链接动作,没有相撞,没有被忽略. 集装箱用途 bg-transparent (不应用以数字为基础的背景和边框)。 图标大小为 sm 何时 environment === 'backoffice', (中文(简体) ), md 以其他方式(iconSize (计算).
环境与补丁: 根 div 获得 p-6 只有在后台。 内部 FzContainer 用途 p-6 (后台办公)或 p-12 (前沿办公室).
测试
- 单位测试 :
pnpm --filter @fiscozen/alert test:unit(或test:unit --run -u以更新快照). - 测试覆盖渲染、道具(包括所有变体)
text),事件,CSS课程,无障碍预期,边缘案例,和快照(包括:text财务报告和审定财务报表text+后台).
构建
pnpm --filter @fiscozen/alert build: 运行vue-tsc财务报告和审定财务报表vite build。 。 。 .