@antsoo-lib/components 0.1.2 → 0.1.4

package/src/popover/style/index.ts

@@ -0,0 +1,183 @@
+import { resetComponent } from '../../style'
+import { initZoomMotion } from '../../style/motion'
+import getArrowStyle from '../../style/placementArrow'
+import type { FullToken, GenerateStyle, PresetColorType } from '../../theme/internal'
+import { PresetColors, genComponentStyleHook, mergeToken } from '../../theme/internal'
+
+export interface ComponentToken {
+  zIndexPopup: number
+  width: number
+}
+
+export type PopoverToken = FullToken<'Popover'> & {
+  popoverBg: string
+  popoverColor: string
+  popoverPadding: number | string
+}
+
+const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
+  const {
+    componentCls,
+    popoverBg,
+    popoverColor,
+    width,
+    fontWeightStrong,
+    popoverPadding,
+    boxShadowSecondary,
+    colorTextHeading,
+    borderRadiusLG: borderRadius,
+    zIndexPopup,
+    marginXS,
+    colorBgElevated,
+  } = token
+
+  return [
+    {
+      [componentCls]: {
+        ...resetComponent(token),
+        position: 'absolute',
+        top: 0,
+        // use `left` to fix https://github.com/ant-design/ant-design/issues/39195
+        left: {
+          _skip_check_: true,
+          value: 0,
+        },
+        zIndex: zIndexPopup,
+        fontWeight: 'normal',
+        whiteSpace: 'normal',
+        textAlign: 'start',
+        cursor: 'auto',
+        userSelect: 'text',
+        '--antd-arrow-background-color': colorBgElevated,
+
+        '&-rtl': {
+          direction: 'rtl',
+        },
+
+        '&-hidden': {
+          display: 'none',
+        },
+
+        [`${componentCls}-content`]: {
+          position: 'relative',
+        },
+
+        [`${componentCls}-inner`]: {
+          backgroundColor: popoverBg,
+          backgroundClip: 'padding-box',
+          borderRadius,
+          boxShadow: boxShadowSecondary,
+          padding: popoverPadding,
+        },
+
+        [`${componentCls}-title`]: {
+          minWidth: width,
+          marginBottom: marginXS,
+          color: colorTextHeading,
+          fontWeight: fontWeightStrong,
+        },
+
+        [`${componentCls}-inner-content`]: {
+          color: popoverColor,
+        },
+      },
+    },
+
+    // Arrow Style
+    getArrowStyle(token, { colorBg: 'var(--antd-arrow-background-color)' }),
+
+    // Pure Render
+    {
+      [`${componentCls}-pure`]: {
+        position: 'relative',
+        maxWidth: 'none',
+
+        [`${componentCls}-content`]: {
+          display: 'inline-block',
+        },
+      },
+    },
+  ]
+}
+
+const genColorStyle: GenerateStyle<PopoverToken> = (token) => {
+  const { componentCls } = token
+
+  return {
+    [componentCls]: PresetColors.map((colorKey: keyof PresetColorType) => {
+      const lightColor = token[`${colorKey}-6`]
+      return {
+        [`&${componentCls}-${colorKey}`]: {
+          '--antd-arrow-background-color': lightColor,
+          [`${componentCls}-inner`]: {
+            backgroundColor: lightColor,
+          },
+          [`${componentCls}-arrow`]: {
+            background: 'transparent',
+          },
+        },
+      }
+    }),
+  }
+}
+
+const genWireframeStyle: GenerateStyle<PopoverToken> = (token) => {
+  const {
+    componentCls,
+    lineWidth,
+    lineType,
+    colorSplit,
+    paddingSM,
+    controlHeight,
+    fontSize,
+    lineHeight,
+    padding,
+  } = token
+
+  const titlePaddingBlockDist = controlHeight - Math.round(fontSize * lineHeight)
+  const popoverTitlePaddingBlockTop = titlePaddingBlockDist / 2
+  const popoverTitlePaddingBlockBottom = titlePaddingBlockDist / 2 - lineWidth
+  const popoverPaddingHorizontal = padding
+
+  return {
+    [componentCls]: {
+      [`${componentCls}-inner`]: {
+        padding: 0,
+      },
+
+      [`${componentCls}-title`]: {
+        margin: 0,
+        padding: `${popoverTitlePaddingBlockTop}px ${popoverPaddingHorizontal}px ${popoverTitlePaddingBlockBottom}px`,
+        borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
+      },
+
+      [`${componentCls}-inner-content`]: {
+        padding: `${paddingSM}px ${popoverPaddingHorizontal}px`,
+      },
+    },
+  }
+}
+
+export default genComponentStyleHook(
+  'Popover',
+  (token) => {
+    const { colorBgElevated, colorText, wireframe } = token
+
+    const popoverToken = mergeToken<PopoverToken>(token, {
+      popoverBg: colorBgElevated,
+      popoverColor: colorText,
+      popoverPadding: 12, // Fixed Value
+    })
+
+    return [
+      genBaseStyle(popoverToken),
+      genColorStyle(popoverToken),
+      wireframe && genWireframeStyle(popoverToken),
+      initZoomMotion(popoverToken, 'zoom-big'),
+    ]
+  },
+  ({ zIndexPopupBase }) => ({
+    zIndexPopup: zIndexPopupBase + 30,
+    width: 177,
+  }),
+)

package/src/progress/Circle.tsx

@@ -0,0 +1,110 @@
+import type { CSSProperties } from 'vue'
+import { computed, defineComponent } from 'vue'
+
+import { initDefaultProps } from '../_util/props-util'
+import { anyType } from '../_util/type'
+import Tooltip from '../tooltip'
+import { Circle as VCCircle } from '../vc-progress'
+import type { ProgressGradient, ProgressProps } from './props'
+import { progressProps } from './props'
+import { getPercentage, getSize, getStrokeColor } from './utils'
+
+export interface CircleProps extends ProgressProps {
+  strokeColor?: string | ProgressGradient
+}
+
+export const circleProps = () => ({
+  ...progressProps(),
+  strokeColor: anyType<string | ProgressGradient>(),
+})
+
+const CIRCLE_MIN_STROKE_WIDTH = 3
+
+const getMinPercent = (width: number): number => (CIRCLE_MIN_STROKE_WIDTH / width) * 100
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'ProgressCircle',
+  inheritAttrs: false,
+  props: initDefaultProps(circleProps(), {
+    trailColor: null as unknown as string,
+  }),
+  setup(props, { slots, attrs }) {
+    const originWidth = computed(() => props.width ?? 120)
+    const mergedSize = computed(() => props.size ?? [originWidth.value, originWidth.value])
+
+    const sizeRef = computed(() => getSize(mergedSize.value as ProgressProps['size'], 'circle'))
+    const gapDeg = computed(() => {
+      // Support gapDeg = 0 when type = 'dashboard'
+      if (props.gapDegree || props.gapDegree === 0) {
+        return props.gapDegree
+      }
+      if (props.type === 'dashboard') {
+        return 75
+      }
+      return undefined
+    })
+
+    const circleStyle = computed<CSSProperties>(() => {
+      return {
+        width: `${sizeRef.value.width}px`,
+        height: `${sizeRef.value.height}px`,
+        fontSize: `${sizeRef.value.width * 0.15 + 6}px`,
+      }
+    })
+
+    const circleWidth = computed(
+      () => props.strokeWidth ?? Math.max(getMinPercent(sizeRef.value.width), 6),
+    )
+    const gapPos = computed(
+      () => props.gapPosition || (props.type === 'dashboard' && 'bottom') || undefined,
+    )
+
+    // using className to style stroke color
+    const percent = computed(() => getPercentage(props))
+    const isGradient = computed(
+      () => Object.prototype.toString.call(props.strokeColor) === '[object Object]',
+    )
+    const strokeColor = computed(() =>
+      getStrokeColor({ success: props.success, strokeColor: props.strokeColor }),
+    )
+    const wrapperClassName = computed(() => ({
+      [`${props.prefixCls}-inner`]: true,
+      [`${props.prefixCls}-circle-gradient`]: isGradient.value,
+    }))
+
+    return () => {
+      const circleContent = (
+        <VCCircle
+          percent={percent.value}
+          strokeWidth={circleWidth.value}
+          trailWidth={circleWidth.value}
+          strokeColor={strokeColor.value}
+          strokeLinecap={props.strokeLinecap}
+          trailColor={props.trailColor}
+          prefixCls={props.prefixCls}
+          gapDegree={gapDeg.value}
+          gapPosition={gapPos.value}
+        />
+      )
+      return (
+        <div
+          {...attrs}
+          class={[wrapperClassName.value, attrs.class]}
+          style={[attrs.style as CSSProperties, circleStyle.value]}
+        >
+          {sizeRef.value.width <= 20 ? (
+            <Tooltip v-slots={{ title: slots.default }}>
+              <span>{circleContent}</span>
+            </Tooltip>
+          ) : (
+            <>
+              {circleContent}
+              {slots.default?.()}
+            </>
+          )}
+        </div>
+      )
+    }
+  },
+})

package/src/progress/Line.tsx

@@ -0,0 +1,163 @@
+import { presetPrimaryColors } from '@ant-design/colors'
+
+import type { CSSProperties, ExtractPropTypes } from 'vue'
+import { computed, defineComponent } from 'vue'
+
+import { anyType, stringType } from '../_util/type'
+import type { Direction } from '../config-provider'
+import devWarning from '../vc-util/devWarning'
+import type { ProgressGradient, ProgressSize, StringGradients } from './props'
+import { progressProps } from './props'
+import { getSize, getSuccessPercent, validProgress } from './utils'
+
+export const lineProps = () => ({
+  ...progressProps(),
+  strokeColor: anyType<string | ProgressGradient>(),
+  direction: stringType<Direction>(),
+})
+
+export type LineProps = Partial<ExtractPropTypes<ReturnType<typeof lineProps>>>
+
+/**
+ * {
+ *   '0%': '#afc163',
+ *   '75%': '#009900',
+ *   '50%': 'green',     ====>     '#afc163 0%, #66FF00 25%, #00CC00 50%, #009900 75%, #ffffff 100%'
+ *   '25%': '#66FF00',
+ *   '100%': '#ffffff'
+ * }
+ */
+export const sortGradient = (gradients: StringGradients) => {
+  let tempArr = []
+  Object.keys(gradients).forEach((key) => {
+    const formattedKey = Number.parseFloat(key.replace(/%/g, ''))
+    if (!isNaN(formattedKey)) {
+      tempArr.push({
+        key: formattedKey,
+        value: gradients[key],
+      })
+    }
+  })
+  tempArr = tempArr.sort((a, b) => a.key - b.key)
+  return tempArr.map(({ key, value }) => `${value} ${key}%`).join(', ')
+}
+
+/**
+ * Then this man came to realize the truth: Besides six pence, there is the moon. Besides bread and
+ * butter, there is the bug. And... Besides women, there is the code.
+ *
+ * @example
+ *   {
+ *     "0%": "#afc163",
+ *     "25%": "#66FF00",
+ *     "50%": "#00CC00", // ====>  linear-gradient(to right, #afc163 0%, #66FF00 25%,
+ *     "75%": "#009900", //        #00CC00 50%, #009900 75%, #ffffff 100%)
+ *     "100%": "#ffffff"
+ *   }
+ */
+export const handleGradient = (
+  strokeColor: ProgressGradient,
+  directionConfig?: Direction,
+): CSSProperties => {
+  const {
+    from = presetPrimaryColors.blue,
+    to = presetPrimaryColors.blue,
+    direction = directionConfig === 'rtl' ? 'to left' : 'to right',
+    ...rest
+  } = strokeColor
+  if (Object.keys(rest).length !== 0) {
+    const sortedGradients = sortGradient(rest as StringGradients)
+    return { backgroundImage: `linear-gradient(${direction}, ${sortedGradients})` }
+  }
+  return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` }
+}
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'ProgressLine',
+  inheritAttrs: false,
+  props: lineProps(),
+  setup(props, { slots, attrs }) {
+    const backgroundProps = computed<CSSProperties>(() => {
+      const { strokeColor, direction } = props
+      return strokeColor && typeof strokeColor !== 'string'
+        ? handleGradient(strokeColor, direction)
+        : {
+            backgroundColor: strokeColor as string,
+          }
+    })
+    const borderRadius = computed(() =>
+      props.strokeLinecap === 'square' || props.strokeLinecap === 'butt' ? 0 : undefined,
+    )
+
+    const trailStyle = computed<CSSProperties>(() =>
+      props.trailColor
+        ? {
+            backgroundColor: props.trailColor,
+          }
+        : undefined,
+    )
+
+    const mergedSize = computed(
+      () => props.size ?? [-1, props.strokeWidth || (props.size === 'small' ? 6 : 8)],
+    )
+
+    const sizeRef = computed(() =>
+      getSize(mergedSize.value as ProgressSize, 'line', { strokeWidth: props.strokeWidth }),
+    )
+
+    if (process.env.NODE_ENV !== 'production') {
+      devWarning(
+        'strokeWidth' in props,
+        'Progress',
+        '`strokeWidth` is deprecated. Please use `size` instead.',
+      )
+    }
+
+    const percentStyle = computed<CSSProperties>(() => {
+      const { percent } = props
+      return {
+        width: `${validProgress(percent)}%`,
+        height: `${sizeRef.value.height}px`,
+        borderRadius: borderRadius.value,
+        ...backgroundProps.value,
+      }
+    })
+
+    const successPercent = computed(() => {
+      return getSuccessPercent(props)
+    })
+    const successPercentStyle = computed<CSSProperties>(() => {
+      const { success } = props
+      return {
+        width: `${validProgress(successPercent.value)}%`,
+        height: `${sizeRef.value.height}px`,
+        borderRadius: borderRadius.value,
+        backgroundColor: success?.strokeColor,
+      }
+    })
+
+    const outerStyle: CSSProperties = {
+      width: sizeRef.value.width < 0 ? '100%' : sizeRef.value.width,
+      height: `${sizeRef.value.height}px`,
+    }
+
+    return () => (
+      <>
+        <div
+          {...attrs}
+          class={[`${props.prefixCls}-outer`, attrs.class]}
+          style={[attrs.style as CSSProperties, outerStyle]}
+        >
+          <div class={`${props.prefixCls}-inner`} style={trailStyle.value}>
+            <div class={`${props.prefixCls}-bg`} style={percentStyle.value} />
+            {successPercent.value !== undefined ? (
+              <div class={`${props.prefixCls}-success-bg`} style={successPercentStyle.value} />
+            ) : null}
+          </div>
+        </div>
+        {slots.default?.()}
+      </>
+    )
+  },
+})

package/src/progress/Steps.tsx

@@ -0,0 +1,67 @@
+import type { ExtractPropTypes } from 'vue'
+import { computed, defineComponent } from 'vue'
+
+import type { VueNode } from '../_util/type'
+import { someType } from '../_util/type'
+import type { ProgressSize } from './props'
+import { progressProps } from './props'
+import { getSize } from './utils'
+
+export const stepsProps = () => ({
+  ...progressProps(),
+  steps: Number,
+  strokeColor: someType<string | string[]>(),
+  trailColor: String,
+})
+
+export type StepsProps = Partial<ExtractPropTypes<ReturnType<typeof stepsProps>>>
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'Steps',
+  props: stepsProps(),
+  setup(props, { slots }) {
+    const current = computed(() => Math.round(props.steps * ((props.percent || 0) / 100)))
+    const mergedSize = computed(
+      () => props.size ?? [props.size === 'small' ? 2 : 14, props.strokeWidth || 8],
+    )
+    const sizeRef = computed(() =>
+      getSize(mergedSize.value as ProgressSize, 'step', {
+        steps: props.steps,
+        strokeWidth: props.strokeWidth || 8,
+      }),
+    )
+
+    const styledSteps = computed(() => {
+      const { steps, strokeColor, trailColor, prefixCls } = props
+
+      const temp: VueNode[] = []
+      for (let i = 0; i < steps; i += 1) {
+        const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor
+        const cls = {
+          [`${prefixCls}-steps-item`]: true,
+          [`${prefixCls}-steps-item-active`]: i <= current.value - 1,
+        }
+        temp.push(
+          <div
+            key={i}
+            class={cls}
+            style={{
+              backgroundColor: i <= current.value - 1 ? color : trailColor,
+              width: `${sizeRef.value.width / steps}px`,
+              height: `${sizeRef.value.height}px`,
+            }}
+          />,
+        )
+      }
+      return temp
+    })
+
+    return () => (
+      <div class={`${props.prefixCls}-steps-outer`}>
+        {styledSteps.value}
+        {slots.default?.()}
+      </div>
+    )
+  },
+})

package/src/progress/index.en-US.md

@@ -0,0 +1,56 @@
+---
+category: Components
+type: Feedback
+title: Progress
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gK_4S6fDRfgAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJH8Tb1lcYAAAAAAAAAAAAAADrJ8AQ/original
+---
+
+Display the current progress of an operation flow.
+
+## When To Use
+
+If it will take a long time to complete an operation, you can use `Progress` to show the current progress and status.
+
+- When an operation will interrupt the current interface, or it needs to run in the background for more than 2 seconds.
+- When you need to display the completion percentage of an operation.
+
+## API
+
+Properties that shared by all types.
+
+| Property      | Description                                                                                    | Type                                                                                                                     | Default                    | Version |
+| ------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | -------------------------- | ------- |
+| format        | The template function of the content                                                           | function(percent, successPercent)                                                                                        | (percent) => percent + `%` |         |
+| percent       | To set the completion percentage                                                               | number                                                                                                                   | 0                          |         |
+| showInfo      | Whether to display the progress value and the status icon                                      | boolean                                                                                                                  | true                       |         |
+| status        | To set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string                                                                                                                   | -                          |         |
+| strokeColor   | The color of progress bar                                                                      | string                                                                                                                   | -                          |         |
+| strokeLinecap | To set the style of the progress linecap                                                       | `round` \| `butt` \| `square`, see [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) | `round`                    | -       |
+| success       | Configs of successfully progress bar                                                           | { percent: number, strokeColor: string }                                                                                 | -                          |         |
+| title         | html dom title                                                                                 | string                                                                                                                   | -                          | 3.0     |
+| trailColor    | The color of unfilled part                                                                     | string                                                                                                                   | -                          |         |
+| type          | To set the type, options: `line` `circle` `dashboard`                                          | string                                                                                                                   | `line`                     |         |
+| size          | Progress size                                                                                  | number \| \[number, number] \| "small" \| "default"                                                                      | "default"                  |         |
+
+### `type="line"`
+
+| Property    | Description                                                                                                           | Type                                                                  | Default | Version |
+| ----------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ------- | ------- |
+| steps       | The total step count                                                                                                  | number                                                                | -       | -       |
+| strokeColor | The color of progress bar, render `linear-gradient` when passing an object, could accept `string[]` when has `steps`. | string \| string[] \| { from: string; to: string; direction: string } | -       | -       |
+
+### `type="circle"`
+
+| Property    | Description                                                                     | Type             | Default | Version |
+| ----------- | ------------------------------------------------------------------------------- | ---------------- | ------- | ------- |
+| strokeColor | The color of circular progress, render `linear-gradient` when passing an object | string \| object | -       | -       |
+| strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number           | 6       | -       |
+
+### `type="dashboard"`
+
+| Property    | Description                                                                      | Type   | Default  |
+| ----------- | -------------------------------------------------------------------------------- | ------ | -------- |
+| gapDegree   | The gap degree of half circle, 0 ~ 295                                           | number | 75       |
+| gapPosition | The gap position, options: `top` `bottom` `left` `right`                         | string | `bottom` |
+| strokeWidth | To set the width of the dashboard progress, unit: percentage of the canvas width | number | 6        |

package/src/progress/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from '../_util/type'
+import Progress from './progress'
+
+export type { ProgressProps } from './props'
+
+export default withInstall(Progress)

package/src/progress/index.zh-CN.md

@@ -0,0 +1,57 @@
+---
+category: Components
+type: 反馈
+title: Progress
+subtitle: 进度条
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gK_4S6fDRfgAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJH8Tb1lcYAAAAAAAAAAAAAADrJ8AQ/original
+---
+
+展示操作的当前进度。
+
+## 何时使用
+
+在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
+
+- 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过 2 秒时；
+- 当需要显示一个操作完成的百分比时。
+
+## API
+
+各类型共用的属性。
+
+| 属性          | 说明                                                           | 类型                                                                                                                          | 默认值                     | 版本 |
+| ------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ---- |
+| format        | 内容的模板函数                                                 | function(percent, successPercent)                                                                                             | (percent) => percent + `%` |      |
+| percent       | 百分比                                                         | number                                                                                                                        | 0                          |      |
+| showInfo      | 是否显示进度数值或状态图标                                     | boolean                                                                                                                       | true                       |      |
+| status        | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string                                                                                                                        | -                          |      |
+| strokeColor   | 进度条的色彩                                                   | string                                                                                                                        | -                          |      |
+| strokeLinecap | 进度条的样式                                                   | `round` \| `butt` \| `square`，区别详见 [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) | `round`                    | -    |
+| success       | 成功进度条相关配置                                             | { percent: number, strokeColor: string }                                                                                      | -                          |      |
+| title         | html 标签 title                                                | string                                                                                                                        | -                          | 3.0  |
+| trailColor    | 未完成的分段的颜色                                             | string                                                                                                                        | -                          |      |
+| type          | 类型，可选 `line` `circle` `dashboard`                         | string                                                                                                                        | `line`                     |      |
+| size          | 进度条的尺寸                                                   | number \| \[number, number] \| "small" \| "default"                                                                           | "default"                  |      |
+
+### `type="line"`
+
+| 属性        | 说明                                                                  | 类型                                                                  | 默认值 | 版本 |
+| ----------- | --------------------------------------------------------------------- | --------------------------------------------------------------------- | ------ | ---- |
+| steps       | 进度条总共步数                                                        | number                                                                | -      | -    |
+| strokeColor | 进度条的色彩，传入 object 时为渐变。当有 `steps` 时支持传入一个数组。 | string \| string[] \| { from: string; to: string; direction: string } | -      | -    |
+
+### `type="circle"`
+
+| 属性        | 说明                                             | 类型             | 默认值 | 版本 |
+| ----------- | ------------------------------------------------ | ---------------- | ------ | ---- |
+| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变         | string \| object | -      | -    |
+| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number           | 6      | -    |
+
+### `type="dashboard"`
+
+| 属性        | 说明                                               | 类型                                   | 默认值   | 版本 |
+| ----------- | -------------------------------------------------- | -------------------------------------- | -------- | ---- |
+| gapDegree   | 仪表盘进度条缺口角度，可取值 0 ~ 295               | number                                 | 75       | -    |
+| gapPosition | 仪表盘进度条缺口位置                               | `top` \| `bottom` \| `left` \| `right` | `bottom` | -    |
+| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number                                 | 6        | -    |