UI规范和使用说明 ​

本文档用于说明Neo(3.0)的UI规范和使用说明 设计稿链接

写在最前 ​

由于目前项目内还有使用v2样式的模块，所以在v3版本的模块页面需要手动添加class="v3-style"

对于挂载于document下的元素需要手动添加class="v3-style"，如a-modal、a-popconfirm

AntD组件的改造目前以实际开发使用到的场景为主，若遇到新的场景存在样式问题，需要及时向团队反馈

一、设计稿规范 ​

1. 颜色 ​

颜色变量均已注入在根节点css变量中，可通过以下两种方式使用：

1. 通过tailwindcss的类名来使用，基本结构为${前缀}-${设计稿变量名}，其中设计稿变量名移除横杠，小写开头
   html

   <div class="bg-info5 text-fill8 border-border4"></div>

2. 通过css变量来使用，通过该方式使用需要额外添加color前缀
   css

   div {
       background-color: var(--colorInfo5);
       color: var(--colorFill8);
       border-color: var(--colorBorder4);
   }

注意

1. 设计稿中纯白色的变量不在定义内，直接使用tailwind预设类名white即可。
2. 设计稿中部分特殊变量名称为包含-0.5，重新命名为Half，eg:bg-fillHalf var(--colorFillHalf)

2. 字号和行高 ​

大部分字号在tailwind中均已预设，通过重新定义的方式微调了下对应的行高。

fontSize: {
    // 12px
    xs: ['.75rem','1.25rem'],
    // 13px，此为tailwind预设中未包含的值，给了一个新名字
    slim: ['.8125rem', '1.375rem'],
    // 14px
    sm: ['.875rem', '1.375rem'],
    // 14px 段落；在设计稿中14号字有用于段落的特殊样式，所以单独定义了一个类名
    smPara: ['.875rem', '1.3125rem'],
    // 36px
    '4xl': ['2.25','2,75rem']
}

3. 阴影 ​

使用方式类似颜色

<div class="shadow-shadow1"></div>

4. 圆角 ​

基本使用tailwind预设类名，除了Radius-4为预设中未包含的，由于设计规范该圆角的使用场景单一，考虑以场景进行命名icon

borderRadius:{
    icon: '.625rem'
}

二、静态资源 ​

静态资源均存储于oss/static/v3目录下，通过常量拼接使用

// @/core/constant/common.ts

// oss静态资源前缀
export const OSS_PREFIX = 'https://oss.cloud.custouch.com/static/v3/'
// oss通用图片资源前缀
export const OSS_COMMON_IMG = OSS_PREFIX + 'images/common/'

三、图标 ​

图标使用IconPark进行管理，引入和更新的方式与iconFont类似 使用方式：

<!-- name使用组件标识，不要使用ID -->
<iconpark-icon name="plus"></iconpark-icon>

四、全局公共类 ​

main-content ​

用于页面主体内容区域

.main-content {
   @apply px-8 pb-8 h-full overflow-y-auto flex-grow flex flex-col;
}

content-card ​

用于大区块内容卡片

.content-card {
   @apply bg-fill1 rounded-lg;
}