chore: resource search finish

arco-design · Sep 4, 2023 · dd34288 · dd34288
1 parent ea47880
commit dd34288
Show file tree

Hide file tree

Showing 6 changed files with 269 additions and 1,070 deletions.
diff --git a/packages/arcodesign/tokens/mixin/index.less b/packages/arcodesign/tokens/mixin/index.less
@@ -1,117 +1,334 @@
+/**
+ * @type asdf
+ * @name 公共mixin
+ * @name_en General Mixin
+ */
 @import '~@arco-design/mobile-utils/style/mixin.less';
 @import './vars-switch.less';
 @import './pxtorem.less';
-
+/**
+  * 根据base-font-size，设置单位尺寸为rem
+  * @desc {en} set the unit size to rem based on base-font-size
+  * @param @property css属性名
+  * @param @property {en} css property
+  * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
+  * @param @values {en} css property value, the values can be separated by commas when the style is composite
+  * @example
+  * ```
+  * @import '@arco-design/mobile-react/style/mixin.less';
+  *
+  * .demo {
+  *     .rem(font-size, 14);
+  *     .rem(padding, 16, 0);
+  * }
+  * ```
+  */
 .rem(@property; @values...) {
-    @{property}: ~`(function () {
-        var baseFontSize=@{base-font-size};
-        var sizeList = @{values};
-        if (!Array.isArray(sizeList)) {
-            sizeList = [sizeList];
-        }
-        return sizeList.map(function (item) {
-            return pxtorem(item);
-        }).join(' ');
-    }())`;
+    @{property}: ~`(
+            function () {var baseFontSize= @{base-font-size}; var sizeList = @{values}; if (
+                    !Array.isArray(sizeList)
+                ) {sizeList = [sizeList];} return sizeList.map(
+                    function (item) {return pxtorem(item) ;}
+                ) .join(' ') ; }()
+        )
+        `;
 }
-
+/**
+  * 根据base-font-size，设置常规模式和rtl模式下单位尺寸为rem
+  * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
+  * @param @property css属性名
+  * @param @property {en} css property
+  * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
+  * @param @values {en} css property value, the values can be separated by commas when the style is composite
+  * @example
+  * ```
+  * @import '@arco-design/mobile-react/style/mixin.less';
+  *
+  * .demo {
+  *     .rem-with-rtl(font-size, 14);
+  *     .rem-with-rtl(padding, 16, 0);
+  * }
+  * ```
+  */
 .rem-with-rtl(@property; @values...) {
     .rem(@property; @values...);
-    [dir="rtl"] & {
+    [dir='rtl'] & {
         @{property}: initial;
-        @new-property: .prop-with-rtl(@property)[@property-name];
+        @new-property: .prop-with-rtl(@property) [ @property-name];
         .rem(@new-property; @values...);
     }
 }
-
-// for hack dark mode
+/**
+  * 当less变量use-dark-mode=1时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则
+  * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark when the less variable use-dark-mode=1.
+  * @param @rules 对应的暗黑模式规则
+  * @param @rules {en} Corresponding dark mode rules
+  * @example
+  * ```
+  * @import '@arco-design/mobile-react/style/mixin.less';
+  *
+  * .demo {
+  *     .use-dark-mode-query({
+  *         background-color: #000;
+  *     });
+  * }
+  * ```
+  */
 .use-dark-mode-query(@rules) {
     & when (@use-dark-mode = 1) {
         @media (prefers-color-scheme: dark) {
             @rules();
         }
     }
 }
-
+/**
+  * 为属性设置arco提供的token变量
+  * @desc {en} set the token variable provided by Arco for the attribute
+  * @param @property css属性名
+  * @param @property {en} css property
+  * @param @variables token变量名
+  * @param @variables {en} token variable name
+  * @param @preValues
+  * @param @preValues {en}
+  * @param @nextValues
+  * @param @nextValues {en}
+  * @example
+  * ```
+  * @import '@arco-design/mobile-react/style/mixin.less';
+  *
+  * .demo {
+  *     .use-var(background, primary-color);
+  * }
+  * ```
+  */
 .use-var(@property, @variables, @preValues: '', @nextValues: '') {
-    @{property}: ~"@{preValues}" @@variables ~"@{nextValues}";
+    @{property}: ~'@{preValues}' @@variables ~'@{nextValues}';
     & when (@use-css-vars = 1) {
-        @{property}: ~"@{preValues}" ~"var(--@{variables})" ~"@{nextValues}";
+        @{property}: ~'@{preValues}' ~'var(--@{variables})' ~'@{nextValues}';
     }
 }
-
+/**
+  * 在常规模式和rtl模式下为属性设置arco提供的token变量
+  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
+  * @param @property css属性名
+  * @param @property {en} css property
+  * @param @variables token变量名
+  * @param @variables {en} token variable name
+  * @param @preValues
+  * @param @preValues {en}
+  * @param @nextValues
+  * @param @nextValues {en}
+  * @example
+  * ```
+  * @import '@arco-design/mobile-react/style/mixin.less';
+  *
+  * .demo {
+  *     .use-var-with-rtl(margin-left, button-icon-text-gutter);
+  * }
+  * ```
+  */
 .use-var-with-rtl(@property, @variables, @preValues: '', @nextValues: '') {
     .use-var(@property, @variables, @preValues, @nextValues);
-    [dir="rtl"] & {
+    [dir='rtl'] & {
         @{property}: initial;
-        @new-property: .prop-with-rtl(@property)[@property-name];
+        @new-property: .prop-with-rtl(@property) [ @property-name];
         .use-var(@new-property, @variables, @preValues, @nextValues);
     }
 }
-
+/**
+  * 0.5px的边框线
+  * @desc {en} a border line of 0.5 pixels
+  * @param @color 使用css变量为线设置颜色
+  * @param @color {en} set border-color by CSS variable
+  * @param @direction 边框方向，默认为全部方向
+  * @param @direction {en} border direction，default to all directions.
+  * @example
+  * ```
+  * @import '@arco-design/mobile-react/style/mixin.less';
+  *
+  * .demo {
+  *     .hairline-var(line-color);
+  *     .hairline-var(line-color, top);
+  * }
+  * ```
+  */
 .hairline-var(@color, @direction: all) {
     .hairline(@@color, @direction);
     & when (@use-css-vars = 1) {
-        .hairline(var(~"--@{color}", @@color), @direction);
+        .hairline(var(~'--@{color}', @@color), @direction);
     }
 }
-
-.text-medium-var(@color: currentColor, @stroke: 0.3PX) {
+/**
+  * 字体加粗
+  * @desc {en} font bold
+  * @param @color 使用css变量设置加粗的字体颜色，默认继承文字当前颜色
+  * @param @color {en} set color by CSS variable
+  * @param @stroke 字体粗细，默认0.3px
+  * @param @stroke {en} font weight, default 0.3 pixel
+  * @example
+  * ```
+  * @import '@arco-design/mobile-react/style/mixin.less';
+  *
+  * .demo {
+  *    .text-medium-var();
+  *    .text-medium-var(primary-color, 0.5PX);
+  * }
+  * ```
+  */
+.text-medium-var(@color: currentColor, @stroke: 0.3px) {
     .text-medium(@@color, @stroke);
     & when (@use-css-vars = 1) {
-        .text-medium(var(~"--@{color}", @@color), @stroke);
+        .text-medium(var(~'--@{color}', @@color), @stroke);
     }
 }
-
-.onepx-border-var(@direction, @borderColor, @borderRadius: 0, @borderWidth: 1PX, @borderStyle: solid) {
+/**
+  * 1px边框
+  * @desc {en} 1 pixel border
+  * @param @direction 边框方向
+  * @param @direction {en} border direction 
+  * @param @borderColor 使用css变量设置边框颜色
+  * @param @borderColor {en} set border-color by CSS variable
+  * @param @borderRadius border-radius，默认为0
+  * @param @borderRadius {en} border-radius, default value is 0
+  * @param @borderWidth border-width，默认为1px
+  * @param @borderWidth {en} border-width, default value is 1 pixel
+  * @param @borderStyle border-style，默认为solid
+  * @param @borderStyle {en} border-style, default value is solid
+  * @example
+  * ```
+  * @import '@arco-design/mobile-react/style/mixin.less';
+  *
+  * .demo {
+  *    .onepx-border-var(top, line-color);
+  *    .onepx-border-var(all, line-color, 2, 2px, dashed);
+  * }
+  * ```
+  */
+.onepx-border-var(@direction, @borderColor, @borderRadius: 0, @borderWidth: 1px, @borderStyle: solid) {
     .onepx-border(@direction, @@borderColor, @borderRadius, @borderWidth, @borderStyle);
     & when (@use-css-vars = 1) {
-        .onepx-border(@direction, var(~"--@{borderColor}", @@borderColor), @borderRadius, @borderWidth, @borderStyle);
+        .onepx-border(@direction, var(~'--@{borderColor}', @@borderColor), @borderRadius, @borderWidth, @borderStyle);
     }
 }
-
+/**
+  * 元素右下0.5px边框
+  * @desc {en} 0.5px border on bottom right
+  * @param @color 使用css变量设置边框颜色
+  * @param @color {en} set border-color by CSS variable
+  * @example
+  * ```
+  * @import '@arco-design/mobile-react/style/mixin.less';
+  *
+  * .demo {
+  *    .hairline-bottom-right-var(line-color);
+  * }
+  * ```
+  */
 .hairline-bottom-right-var(@color) {
     .hairline-bottom-right(@@color);
     & when (@use-css-vars = 1) {
-        .hairline-bottom-right(var(~"--@{color}", @@color));
+        .hairline-bottom-right(var(~'--@{color}', @@color));
     }
 }
-
+/**
+  * 元素左上0.5px边框
+  * @desc {en} 0.5px border on top left
+  * @param @color 使用css变量设置边框颜色
+  * @param @color {en} set border-color by CSS variable
+  * @example
+  * ```
+  * @import '@arco-design/mobile-react/style/mixin.less';
+  *
+  * .demo {
+  *    .hairline-top-left-var(line-color);
+  * }
+  * ```
+  */
 .hairline-top-left-var(@color) {
     .hairline-top-left(@@color);
     & when (@use-css-vars = 1) {
-        .hairline-top-left(var(~"--@{color}", @@color));
+        .hairline-top-left(var(~'--@{color}', @@color));
     }
 }
-
+/**
+  * 设置Loading组件颜色
+  * @desc {en} set Loading component color
+  * @param @color 使用css变量设置颜色
+  * @param @color {en} set color by CSS variable
+  * @example
+  * ```
+  * @import '@arco-design/mobile-react/style/mixin.less';
+  *
+  * .demo {
+  *    .set-loading-color-var(primary-color);
+  * }
+  * ```
+  */
 .set-loading-color-var(@color) {
     .set-loading-color(@@color);
     & when (@use-css-vars = 1) {
-        .set-loading-color(var(~"--@{color}", @@color));
+        .set-loading-color(var(~'--@{color}', @@color));
     }
 }
-
+/**
+  * 设置最小字号
+  * @desc {en} set minimum font-size
+  * @param @size 使用css变量设置最小字号
+  * @param @size {en} set minimum font-size by CSS variable
+  * @param @scale 设置最小字号下文字缩放比例，默认为0.9
+  * @param @scale {en} set minimum font-size down text scale，default value is 0.9
+  * @example
+  * ```
+  * @import '@arco-design/mobile-react/style/mixin.less';
+  *
+  * .demo {
+  *    .set-font-size-var(badge-font-size);
+  *    .set-font-size-var(badge-font-size, 0.5);
+  * }
+  * ```
+  */
 .set-font-size-var(@size, @scale: 0.9) {
     & when not (@use-css-vars = 1) {
         .set-font-size(@@size);
     }
     & when (@use-css-vars = 1) {
-        & when (@@size < 12PX) {
-            font-size: calc(var(~"--@{size}", @@size) / @scale);
+        & when (@@size < 12px) {
+            font-size: calc(var(~'--@{size}', @@size) / @scale);
             transform: scale(@scale);
         }
-        & when not (@@size < 12PX) {
-            font-size: var(~"--@{size}", @@size);
+        & when not (@@size < 12px) {
+            font-size: var(~'--@{size}', @@size);
         }
     }
 }
-
+/**
+  * 设置content-box盒模型下元素宽度
+  * @desc {en} set box width in content-box
+  * @param @property css属性名
+  * @param @property {en} css property
+  * @param @width 元素总宽度，包含内边距
+  * @param @width element width, include padding
+  * @param @padding-left 左侧内边距
+  * @param @padding-left {en} padding-left
+  * @param @padding-right 右侧内边距
+  * @param @padding-right {en} padding-right
+  * @example
+  * ```
+  * @import '@arco-design/mobile-react/style/mixin.less';
+  *
+  * .demo {
+  *    .set-content-box-width-var(min-width, badge-text-width, badge-text-padding-left, badge-text-padding-right);
+  * }
+  * ```
+  */
 .set-content-box-width-var(@property, @width, @padding-left, @padding-right) {
     & when not (@use-css-vars = 1) {
         .set-content-box-width(@property, @@width, @@padding-left, @@padding-right);
     }
     & when (@use-css-vars = 1) {
-        @{property}: calc(var(~"--@{width}", @@width) - var(~"--@{padding-left}", @@padding-left) - var(~"--@{padding-right}", @@padding-right));
+        @{property}: calc(
+            var(~'--@{width}', @@width) - var(~'--@{padding-left}', @@padding-left) -
+                var(~'--@{padding-right}', @@padding-right)
+        );
     }
 }
-
diff --git a/scripts/sites/plugins/SiteGeneratePlugin/generate-resource.js b/scripts/sites/plugins/SiteGeneratePlugin/generate-resource.js
@@ -292,9 +292,7 @@ export default function Demo() {
             }
         });
         const mdCompName = `${prefix}${utils.getCompName(`${mdFilename}${tsxFileSuffix}`)}`;
-        const mdDocName = `${prefix.toLowerCase()}-${utils.getFolderName(
-            mdFilename,
-        )}${tsxFileSuffix}`;
+        const mdDocName = `${prefix.toLowerCase()}-${mdFilename}${tsxFileSuffix}`;
         importStr += `import ${mdCompName} from './${category}/${mdFilename}${
             tsxFileSuffix ? `/index${tsxFileSuffix}` : ''
         }';\n`;