Skip to content

feat: utoopack dev 启动时显示更醒目的品牌 Banner 和关键信息 #2792

@afc163

Description

@afc163

背景

当前使用 utoopack 启动 npm run dev 时,输出缺乏品牌感和设计感:

info  - [plugin: .../utoopack] Using @utoo/pack@1.3.9
info  - Umi v4.6.42
info  - Preparing...
  App listening at:
  - Local:   http://localhost:8000
  - Network: http://30.172.96.210:8000

期望效果

简洁、有设计感。参考 Vite 的风格,无需 ASCII art,用排版和色彩说话:

  utoo pack v1.3.9  ready in 1289ms

  ➜  Local:   http://localhost:8000
  ➜  Network: http://30.172.96.210:8000

设计要点:

  • 品牌名 + 版本 + 耗时在一行,用色彩区分(品牌名加粗/高亮,耗时用 dim)
  • 箭头引导地址行,轻量不啰嗦
  • 不画框,不加多余装饰,留白即设计

可选额外数据(空间允许时):

  • Node 版本
  • 缓存命中状态

涉及代码

  • @umijs/bundler-utoopack/dist/index.jsgetDevBanner() 函数(L231-239)
  • @umijs/preset-umi/dist/features/utoopack/utoopack.jsonStart hook 版本信息整合
  • @utoo/pack serve 流程 — 返回启动耗时

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions