@aloudata/aloudata-design 1.0.2 → 1.0.3

package/README.md

@@ -1,40 +1,228 @@
-# @aloudata/aloudata-design
+# 组件库开发规范
 
-[![NPM version](https://img.shields.io/npm/v/@aloudata/aloudata-design.svg?style=flat)](https://npmjs.org/package/@aloudata/aloudata-design)
-[![NPM downloads](http://img.shields.io/npm/dm/@aloudata/aloudata-design.svg?style=flat)](https://npmjs.org/package/@aloudata/aloudata-design)
+## 简介
 
+本文档用于介绍组件库开发相关的规范以及组件库开发过程中的注意事项。
 
+## 环境配置
 
-## Usage
+组件库开发过程中，需要满足以下条件：
 
-TODO
+Node version >= 16.0.0
 
-## Options
+## 组件库介绍
 
-TODO
+### 1 快速开始
 
-## Development
+#### 安装和启动
 
 ```bash
-# install dependencies
-$ yarn install
+  git clone https://codeup.aliyun.com/60dd34bf4690c27532d3d021/fe/aloudata-design.git
+  cd aloudata-design
+  yarn install
+  yarn start
+```
+
+#### 创建组件模板
+
+```bash
+  yarn run cmt //根据指令输入组件名称，创建组件开发模板
+```
+
+#### 组件校验
+
+```bash
+  yarn run lint //stylelint、eslint 校验
+```
+
+#### 组件测试
+  
+```bash
+  yarn run test //单元测试
+```
 
-# develop library by docs demo
-$ yarn start
+#### 组件打包
 
-# build library source code
-$ yarn run build
+```bash
+  yarn run build //打包
+```
 
-# build library source code in watch mode
-$ yarn run build:watch
+#### 组件本地link
 
-# build docs
-$ yarn run docs:build
+```bash
+  npm link //将组件库link到本地npm
+  // 切换到业务项目目录，·引入组件库
+  npm link @aloudata/aloudata-design // 业务项目中引入组件库
+```
 
-# check your project for potential problems
-$ yarn run doctor
+### 2 目录结构
+
+```text
+.
+├── README.md --> readme
+├── docs --> 文档目录
+│   └── index.md
+├── scripts --> 自定义脚本目录
+│   └── createComponentTemplate.mjs
+├── dist --> 组件打包生成的组件目录
+├── src --> 组件目录
+├── tsconfig.json --> tsconfig ts配置文件
+├── .editorconfig 
+├── .eslintrc.js  --> eslint ts等校验规则配置
+├── .fatherrc.ts  ---> father组件打包配置
+├── .prettierrc.js ---> prettier 代码格式化配置
+├── .stylelintrc.json ---> less 校验规则配置
+├── .umirc.js          ---> 脚手架配置
+├── commitlint.config.js --> commit 配置规则
+├── typings.d.ts
+├── package-lock.json
+├── package.json
+├── yarn-error.log
+└── yarn.lock
 ```
 
-## LICENSE
+### 3 代码风格
+
+我们使用eslint+stylelint+prettier 来统一代码风格，同时**需要对vscode做一定的配置**，具体[配置参考](https://docs.dingtalk.com/i/nodes/mM3zoYAw1Rr8D5Nong2XWnZ07y9NpXxD?dontjump=true&iframeQuery=utm_source%3Dportal%26utm_medium%3Dportal_space_file_tree&navQuery=spaceId%3Da0gX104nML97WzeJ&nav=spaces)
+
+ts文件使用 *eslint* 校验， 配置文件 .eslintrc.js [查看规则](https://cn.eslint.org/docs/rules/)
+less文件使用 *stylelint* 校验， 配置文件 .stylelintrc.json [查看规则](https://stylelint.bootcss.com/user-guide/rules/list)
+使用 *prettier* 格式化代码，配置文件 .prettierrc.js  
+
+## 组件开发指南（必读）
+
+### 了解组件分类
+
+1. 毛坯组件
+   原始的未做任何修改的antd组件
+2. 简装组件
+   是指在毛坯组件的基础上，只简单了修改了一些颜色、样式等的组件
+3. 精装组件
+   所谓精装组件，是指设计师精心设计过组件应用场景和UI的组件，可能基于antd，也可以完全自定义
+
+### 单元测试
+
+组件开发过程中需要写单测的，建议先写单测，然后进行开发。[了解TDD](https://baike.baidu.com/item/TDD/9064369)
+
+哪些情况需要写单元测试：
+
+1. 如果是基于antd的组件，但凡组件有api接口变动，必须要写单元测试
+2. 非基于antd的组件，必须要写单元测试
+3. 单元测试需要覆盖组件每一个api接口的各个状态
+4. 单元测试文件以 *.test.tsx* 结尾
+
+单元测试参考资料：
+
+- [jestjs](https://jestjs.io/zh-Hans/docs/getting-started)
+- [jest-dom](https://testing-library.com/docs/ecosystem-jest-dom/)
+
+### 组件开发注意事项
+
+组件开发支持两种模式，基于antd开发和其它自定义开发。
+
+**基于antd开发:** 在业务满足的情况下，建议基于antd开发或者rc组件开发。方式是把antd组件引用过来，然后做升级修改之后，再作为ald组件暴露出去
+
+**自定义开发：** 当antd组件不满足业务的时候，可以自定义开发，允许引用其它基础组件进行二次开发或者完全自定义组件进行开发。通常是精装组件。
+
+组件开发有以下几个**必须要注意**的点
+
+1. 组件样式要和组件类进行分离，即在组件开发的过程中，不允许引用css、less等样式组件。样式单独写在style文件夹下。
+2. 组件文档内的api接口展示，是获取组件属性props的接口interface定义来实现的（自定义md表格除外）。组件库脚手架对于组件接口interface有处理，即凡是接口来自于外部库引入的部分，不会被文档api识别，即无法展示。interface接口的每一个想要暴露的属性，都必须要写注释，主要包括类型、描述、默认值等。
+3. 组件简装及以上，必须要写demo样例，用于展示已经支持的样式及功能
+4. 精装组件必须要写单元测试。每一个组件的属性，都要在测例中进行测试，保证在组件的的维护修改过程中，不会出现bug。
+5. 组件由ts编写，必须对外暴露所有可能在业务使用过程中需要的ts类型。
+6. 组件库不使用css-module，请考虑权重问题，禁止出现 **!important** 这样的样式
+
+### 组件库文档编写注意事项
+
+#### 文档前文frontMatter编写
+
+在组件库官网展示的时候，会根据文档头部的信息，对文档进行分类，我们当前的计划是分成三类：设计、文档、组件；
+
+在文档头部，使用YAML预发进行编写，用于描述组件的文档的信息，如：
+
+```yaml
+---
+nav:
+  title: 组件
+  path: /components
+title: Select 选择器
+group:
+  title: 组件
+---
+```
+
+具体参考：[FrontMatter](https://d.umijs.org/zh-CN/config/frontmatter)
+
+#### 组件场景用例demo展示
+
+每个简装以上组件都需要展示场景用例，写在src/**/demos/文件夹下
+demo项目中，像在业务中使用aloudata-design一样，脚手架会自动关联项目到node-modules下。(建议先build一下，然后再进行demo展示)
+在组件的md文档中使用code引入用例，在文档中展示用例，如：
+  
+  ```jsx
+  <code src="./demos/single/index.tsx" title="单项选择"/>
+  ```
+
+关于demo的配置，即code的用法，请参考[demo配置](https://d.umijs.org/zh-CN/config/frontmatter#demo-%E9%85%8D%E7%BD%AE%E9%A1%B9)
+
+#### 组件api展示
+
+api展示为表格形势，可以使用**API**标签，如：
+
+```jsx
+  <API src="/path/to/your/component.tsx" hideTitle></API>
+```
+
+参考文档：[API](https://d.umijs.org/zh-CN/guide/advanced#%E5%9C%A8%E6%96%87%E6%A1%A3%E4%B8%AD%E5%B1%95%E7%A4%BA-api)
+
+也可以自己使用md语法写表格
+  
+  ```md
+  | 属性 | 描述 | 类型 | 默认值 |
+  | ---- | ---- | ---- | ---- |
+  | value | 某个值 | string | 当前选中的值 |
+  ```
+
+### 关于组件模板创建
+
+使用 *npm run cmt* 创建的组件模板只是做一个参考，需要自己根据实际需求进行修改
+
+## 关于组件库打包
+
+### 一、组件打包
+
+```bash
+  npm run build
+```
+
+组件打包的入口在src/index.tsx，必须在文件总暴露出来，组件才会被打包。
+组件打包使用umi框架的 [falter](https://github.com/umijs/father) 打包工具, 具体配置在 .fatherrc.ts中。打包后会生成lib目录，es目录。
+
+### 二、官方网站打包
+
+```bash
+  npm run docs:build
+```
 
-MIT
+官网打包我们默认使用dumi站点模式，会分为设计、文档、组件三个版块，其中设计和文档版块的内容在docs目录下，组件版块的内容在src/**/*.test.md文件中。
+
+1. 设计部分用于描述组件的设计理念，内容由设计师提供，可以是链接，也可以是资料等。
+2. 文档用于描述组件库开发的一些信息等。
+3. 组件用于展示组件的使用场景用例，组件的一些信息，组件的api接口等
+
+## 按需引用
+
+```js
+[
+    'import',
+    {
+      libraryName: '@aloudata/aloudata-design',
+      libraryDirectory: 'dist',
+      style:(name)=>{
+        return `${name}/style/index.less`
+      },
+      camel2DashComponentName: false,
+    },
+]
+```

package/dist/Dropdown/index.d.ts

@@ -36,6 +36,12 @@ export interface IDropdownProps {
      * @default -
      */
     overlay: ReactElement | (() => ReactElement);
+    /**
+     * @description 菜单
+     * @type Menu | () => Menu
+     * @default -
+     */
+    menu: ReactElement | (() => ReactElement);
     /**
      * @description 下拉根元素的类名称
      * @default -

package/dist/Select/components/MultipleOption.js

@@ -1,6 +1,6 @@
-import { Checkbox } from 'antd';
 import classnames from 'classnames';
 import React from 'react';
+import Checkbox from "../../Checkbox";
 export default function MultipleList(params) {
   var disabled = params.disabled,
       option = params.option,

package/dist/Select/index.d.ts

@@ -5,5 +5,9 @@ export interface ISelectProps extends Omit<SelectProps, 'mode'> {
     mode?: 'multiple';
 }
 export declare type IRefSelectProps = RefSelectProps;
-declare const Select: React.ForwardRefExoticComponent<ISelectProps & React.RefAttributes<RefSelectProps>>;
+export declare type IAldRefSelectProps = IRefSelectProps & {
+    open: () => void;
+    close: () => void;
+};
+declare const Select: React.ForwardRefExoticComponent<ISelectProps & React.RefAttributes<IAldRefSelectProps>>;
 export default Select;

package/dist/Select/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["mode", "options", "dropdownRender", "onDropdownVisibleChange", "defaultValue", "onChange", "open", "defaultOpen", "prefix", "className", "popupClassName", "listHeight", "listItemHeight", "notFoundContent", "value", "tagRender", "style"];
+var _excluded = ["mode", "options", "dropdownRender", "onDropdownVisibleChange", "defaultValue", "onChange", "open", "defaultOpen", "prefix", "className", "popupClassName", "listHeight", "listItemHeight", "notFoundContent", "value", "tagRender", "style", "autoFocus"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -32,11 +32,11 @@ import { FoldDownFill } from '@aloudata/icons-react';
 import { Select as AntdSelect } from 'antd';
 import classNames from 'classnames';
 import List from 'rc-virtual-list';
-import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import Empty from "../Empty";
+import theme from "../style/themes/default/themeColor.module.less";
 import MultipleOption from "./components/MultipleOption";
 import SingleOption from "./components/SingleOption";
-import theme from "../style/themes/default/themeColor.module.less";
 var suffixIconSizeMap = {
   large: 20,
   middle: 16,
@@ -93,7 +93,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       _onDropdownVisibleChange = props.onDropdownVisibleChange,
       defaultValue = props.defaultValue,
       onChange = props.onChange,
-      open = props.open,
+      _open = props.open,
       defaultOpen = props.defaultOpen,
       prefix = props.prefix,
       className = props.className,
@@ -111,6 +111,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       tagRender = props.tagRender,
       _props$style = props.style,
       style = _props$style === void 0 ? {} : _props$style,
+      autoFocus = props.autoFocus,
       restProps = _objectWithoutProperties(props, _excluded);
 
   var isMultiple = mode === 'multiple';
@@ -122,19 +123,59 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var dropDownTimeRef = React.useRef(0);
 
-  var _React$useState3 = React.useState(typeof open === 'boolean' ? open : defaultOpen),
+  var _React$useState3 = React.useState(typeof _open === 'boolean' ? _open : defaultOpen),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       isOpen = _React$useState4[0],
       setIsOpen = _React$useState4[1];
 
+  var _React$useState5 = React.useState(typeof autoFocus === 'boolean' ? autoFocus : false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      isFocus = _React$useState6[0],
+      setIsFocus = _React$useState6[1];
+
   var prefixRef = React.useRef(null);
 
-  var _React$useState5 = React.useState(0),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      prefixWidth = _React$useState6[0],
-      setPrefixWidth = _React$useState6[1];
+  var _React$useState7 = React.useState(0),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      prefixWidth = _React$useState8[0],
+      setPrefixWidth = _React$useState8[1];
 
   var updatedRef = useRef(false);
+  var selectRef = useRef(null); // 处理 ref 方法
+
+  useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        var _selectRef$current;
+
+        (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.focus();
+      },
+      blur: function blur() {
+        var _selectRef$current2;
+
+        (_selectRef$current2 = selectRef.current) === null || _selectRef$current2 === void 0 ? void 0 : _selectRef$current2.blur();
+      },
+      scrollTo: function scrollTo(index) {
+        var _selectRef$current3;
+
+        (_selectRef$current3 = selectRef.current) === null || _selectRef$current3 === void 0 ? void 0 : _selectRef$current3.scrollTo(index);
+      },
+      open: function open() {
+        var _selectRef$current4;
+
+        if (_open) return;
+        setIsOpen(true);
+        (_selectRef$current4 = selectRef.current) === null || _selectRef$current4 === void 0 ? void 0 : _selectRef$current4.focus();
+      },
+      close: function close() {
+        var _selectRef$current5;
+
+        if (!_open) return;
+        setIsOpen(false);
+        (_selectRef$current5 = selectRef.current) === null || _selectRef$current5 === void 0 ? void 0 : _selectRef$current5.blur();
+      }
+    };
+  });
 
   var onMultipleOptionChange = function onMultipleOptionChange(option, selected) {
     var newOptions = [];
@@ -313,7 +354,8 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       'ald-select-small': props.size === 'small',
       'ald-select-disabled': props.disabled,
       'ald-select-middle': props.size !== 'large' && props.size !== 'small',
-      'ald-select-open': isOpen
+      'ald-select-open': isOpen,
+      'ald-select-focus': isFocus
     }),
     style: Object.assign(styleVar, style)
   }, !!prefix && /*#__PURE__*/React.createElement("span", {
@@ -328,9 +370,9 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     options: options,
     mode: isMultiple ? 'multiple' : undefined,
     bordered: false,
-    open: typeof open === 'boolean' ? open : isOpen,
+    open: typeof _open === 'boolean' ? _open : isOpen,
     maxTagCount: "responsive",
-    ref: ref,
+    ref: selectRef,
     tagRender: tagRender || defaultTagRender,
     onChange: onChange,
     popupClassName: classNames('ald-select-popup', popupClassName),
@@ -355,7 +397,14 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       _onDropdownVisibleChange === null || _onDropdownVisibleChange === void 0 ? void 0 : _onDropdownVisibleChange(open);
     },
     value: value !== null && value !== void 0 ? value : currentValue,
-    dropdownRender: getDropdownRender()
+    dropdownRender: getDropdownRender(),
+    autoFocus: isFocus,
+    onFocus: function onFocus() {
+      setIsFocus(true);
+    },
+    onBlur: function onBlur() {
+      setIsFocus(false);
+    }
   })));
 });
 export default Select;

package/dist/Select/style/status.less

@@ -1,32 +1,33 @@
-
-
-.ald-select{
-  /** 
-   * @file focused状态 
+.ald-select {
+  /**
+   * @file focused状态
    */
-  &:hover,&.ald-select-open{
-    border-color:@B40;
+  &:hover,
+  &.ald-select-open,
+  &.ald-select-focus {
+    border-color: @B40;
     // box-shadow: @shadow-drop;
   }
 
-  /** 
-   * @file disabled状态 
+  /**
+   * @file disabled状态
    */
-  &.ald-select-disabled{
-    border-color:@BG60;
-    background-color:@BG90;
+  &.ald-select-disabled {
+    border-color: @BG60;
+    background-color: @BG90;
     box-shadow: none;
     cursor: default;
 
-    .ant-select .ant-select-selector{
+    .ant-select .ant-select-selector {
       cursor: default;
 
-      .ant-select-selection-search input{
+      .ant-select-selection-search input {
         cursor: default;
       }
 
-      .ant-select-selection-placeholder,.ant-select-selection-item{
-        color:@NL40;
+      .ant-select-selection-placeholder,
+      .ant-select-selection-item {
+        color: @NL40;
       }
     }
   }

package/dist/style/themes/default/themeColor.module.less

@@ -2,24 +2,24 @@
 *中性浅色背景 Neutral Light
 * 中性色是色彩系统的基础。 UI 设计中的几乎所有东西：文本、表单、背景、分隔线等等通常都是中性的。
 **/
-@NL0: #101828;
+@NL0: #171717;
 @NL97: fade(@NL0, 3%); //TODO: 版本升级后，删除NL97;新版无此色号
 @NL95: #fcfcfd;
 @NL90: #f9fafb;
 @NL80: #f2f4f7;
 @NL70: #eaecf0;
-@NL60: #d0d5dd;
-@NL50: #98a2b3;
-@NL40: #667085;
+@NL60: #dbdbdb;
+@NL50: #858585;
+@NL40: #575757;
 @NL30: #475467;
-@NL20: #344054;
-@NL10: #1d2939;
+@NL20: #171717;
+@NL10: #171717;
 
 /**
 *中性深色背景 Neutral Dark
 * 中性色是色彩系统的基础。 UI 设计中的几乎所有东西：文本、表单、背景、分隔线等等通常都是中性的。
 **/
-@ND0: #fcfcfd;
+@ND0: #ffffff;
 @ND97: fade(@ND0, 3%); //TODO: 版本升级后，删除ND97;新版无此色号
 @ND95: #101828;
 @ND90: #1d2939;
@@ -27,7 +27,7 @@
 @ND70: #475467;
 @ND60: #667085;
 @ND50: #98a2b3;
-@ND40: #d0d5dd;
+@ND40: #d5d5d5;
 @ND30: #eaecf0;
 @ND20: #f2f4f7;
 @ND10: #f9fafb;
@@ -36,97 +36,101 @@
 * 品牌色 Brand
 * 主色调是你的 "品牌 "颜色，用于所有互动元素，如按钮、链接、输入等。这种颜色可以定义整体感觉，并能引起人们的情感。
 **/
-@B10: #194185;
-@B20: #1849a9;
-@B30: #175cd3;
-@B40: #1570ef;
-@B50: #2e90fa;
-@B60: #53b1fd;
-@B70: #84caff;
-@B80: #b2ddff;
-@B90: #d1e9ff;
-@B95: #ebf6ff;
-@B98: #f5faff;
+@B10: #15325b;
+@B20: #1e4479;
+@B30: #3769ad;
+@B40: #3271c9;
+@B50: #3271c9;
+@B60: #84aadf;
+@B70: #adc6e9;
+@B80: #d6e3f4;
+@B90: #f0f6ff;
+@B95: #f2f5fa;
+@B98: #f2f5fa;
 
 /**
 * 辅助A Secondary A
 * 绿色传达了一个积极的行动，积极的趋势，或成功的确认。
 **/
-@SA10: #054f31;
-@SA20: #05603a;
-@SA30: #027a48;
-@SA40: #039855;
-@SA50: #12b76a;
-@SA60: #32d583;
-@SA70: #6ce9a6;
-@SA80: #a6f4c5;
-@SA90: #d1fadf;
-@SA95: #ecfdf3;
-@SA98: #f6fef9;
+@SA10: #084c2b;
+@SA20: #0d7240;
+@SA30: #0a9953;
+@SA40: #16b667;
+@SA50: #44cb89;
+@SA60: #73d8a6;
+@SA70: #a1e5c4;
+@SA80: #d0f2e1;
+@SA90: #e8f9f0;
+@SA95: #f0faf5;
+@SA98: #f0faf5;
 
 /**
 * 辅助B Secondary B
 * 橙色可以传达一个警示信号。这些颜色通常被用于提醒，以抓住用户的注意力。
 **/
-@SB10: #7a2e0e;
-@SB20: #93370d;
-@SB30: #b54708;
-@SB40: #dc6803;
-@SB50: #f79009;
-@SB60: #fdb022;
-@SB70: #fec84b;
-@SB80: #fedf89;
-@SB90: #fef0c7;
-@SB95: #fffaeb;
-@SB98: #fffcf5;
+@SB10: #7b341e;
+@SB20: #ad5c0b;
+@SB30: #f28e2c;
+@SB40: #ffb01f;
+@SB50: #ffc04d;
+@SB60: #ffd180;
+@SB70: #fbd99d;
+@SB80: #feebc8;
+@SB90: #fffaf0;
+@SB95: #fefaf1;
+@SB98: #fefaf1;
 
 /**
 * 辅助C Secondary C
 * 红色在错误状态和 "破坏性 "行动中使用。它们传达了一种破坏性/负面消极的行动，例如将一个用户从你的团队中删除。
 **/
-@SC10: #7a271a;
-@SC20: #912018;
-@SC30: #b42318;
-@SC40: #d92d20;
-@SC50: #f04438;
-@SC60: #f97066;
-@SC70: #fda29b;
-@SC80: #fecdca;
-@SC90: #fee4e2;
-@SC95: #fef3f2;
-@SC98: #fffbfa;
+@SC10: #6b1a1a;
+@SC20: #832525;
+@SC30: #b82828;
+@SC40: #d64343;
+@SC50: #e26464;
+@SC60: #e98b8b;
+@SC70: #f1b1b1;
+@SC80: #f8d8d8;
+@SC90: #fbecec;
+@SC95: #fcf3f3;
+@SC98: #fcf3f3;
 
 /**
 * 背景色 Background
 * 中性色是色彩系统的基础。 UI 设计中的几乎所有东西：文本、表单、背景、分隔线等等通常都是中性的。
 **/
 @BG0: #000000;
-@BG10: #101825;
-@BG20: #1d2939;
+@BG10: #171717;
+@BG20: #575757;
 @BG30: #475467;
 @BG40: #667085;
 @BG50: #98a2b3;
-@BG60: #d3d7de;
-@BG70: #e3e5ea;
-@BG80: #eff2f5;
-@BG90: #f5f6f7;
-@BG95: #f9fafb;
-@BG97: #fcfcfd;
+@BG60: #dbdbdb;
+@BG70: #d5d5d5;
+@BG80: #f1f1f1;
+@BG90: #f8f8f8;
+@BG95: #ffffff;
+@BG97: #ffffff;
 @BG100: #ffffff;
 
 /***
 * 投影
 ***/
-@shadow-L: 0px 11px 15px rgba(0, 26, 51, 0.1), 0px 9px 46px rgba(0, 26, 51, 0.05),
-  0px 24px 38px rgba(0, 26, 51, 0.03);
-@shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
-@shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-@shadow-md: 0px 4px 6px -2px rgba(16, 24, 40, 0.08), 0px 2px 4px -2px rgba(16, 24, 40, 0.03);
-@shadow-sm: 0px 1px 4px rgba(16, 24, 40, 0.06), 0px 1px 2px rgba(16, 24, 40, 0.04);
+@shadow-L: 0px 11px 15px rgba(0, 26, 51, 0.1),
+  0px 9px 46px rgba(0, 26, 51, 0.05), 0px 24px 38px rgba(0, 26, 51, 0.03);
+@shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+  0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+@shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
+  0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+@shadow-md: 0px 4px 6px -2px rgba(16, 24, 40, 0.08),
+  0px 2px 4px -2px rgba(16, 24, 40, 0.03);
+@shadow-sm: 0px 1px 4px rgba(16, 24, 40, 0.06),
+  0px 1px 2px rgba(16, 24, 40, 0.04);
 @shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
 @shadow-body-top-left: -4px -4px 2px rgba(0, 0, 0, 0.05);
-@shadow-primary:0 0 0 4px rgba(21, 111, 238, 0.12);
-@shadow-drop:0 0 0 4px #1570EF1F;
+@shadow-primary: 0 0 0 4px rgba(21, 111, 238, 0.12);
+@shadow-drop: 0 0 0 4px #1570ef1f;
 // 业务颜色
 // 除了原色之外，在业务、提示和标签等组件中使用一些次要颜色也很有帮助。这些次要颜色应该少用或作为重点使用，而主要颜色应该占优先地位。
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "",
   "license": "MIT",
   "module": "dist/index.js",