message: fix(Progress): fix render error when use v-show and improve performance
diff: -import {
  - ref,
  - watch,
  - computed,
  - nextTick,
  - reactive,
  - onMounted,
  - defineComponent,
  - ExtractPropTypes,
  -} from 'vue';
  +import { computed, defineComponent, ExtractPropTypes } from 'vue';
  import { truthProp, createNamespace, addUnit } from '../utils';
  -import { useExpose } from '../composables/use-expose';
  const [name, bem] = createNamespace('progress');
  @@ -36,67 +26,56 @@ export default defineComponent({
  props,
  setup(props) {
  - const root = ref<HTMLElement>();
  - const pivotRef = ref<HTMLElement>();
  -
  - const state = reactive({
  - rootWidth: 0,
  - pivotWidth: 0,
  - });
  -
  const background = computed(() =>
  props.inactive ? '#cacaca' : props.color
  );
  - const resize = () => {
  - nextTick(() => {
  - state.rootWidth = root.value ? root.value.offsetWidth : 0;
  - state.pivotWidth = pivotRef.value ? pivotRef.value.offsetWidth : 0;
  + const scaleX = computed(() => +props.percentage! / 100);
  + const translateX = computed(() => {
  + let offset = 0;
  + if (+props.percentage! !== 0) {
  + offset = (100 - +props.percentage!) / 2 / (+props.percentage! / 100);
  + }
  + return `${offset}%`;
  });
  - };
  const renderPivot = () => {
  - const { rootWidth, pivotWidth } = state;
  const { textColor, pivotText, pivotColor, percentage } = props;
  const text = pivotText ?? `${percentage}%`;
  const show = props.showPivot && text;
  if (show) {
  - const left = ((rootWidth - pivotWidth) * +percentage!) / 100;
  const style = {
  color: textColor,
  - left: `${left}px`,
  + left: `${+percentage!}%`,
  + transform: `translate(-${+percentage!}%,-50%)`,
  background: pivotColor || background.value,
  };
  return (
  - <span ref={pivotRef} style={style} class={bem('pivot')}>
  + <span style={style} class={bem('pivot')}>
  {text}
  </span>
  );
  }
  };
  - watch(() => [props.showPivot, props.pivotText], resize);
  - onMounted(resize);
  - useExpose({ resize });
  -
  return () => {
  - const { trackColor, percentage, strokeWidth } = props;
  + const { trackColor, strokeWidth } = props;
  const rootStyle = {
  background: trackColor,
  height: addUnit(strokeWidth),
  };
  const portionStyle = {
  background: background.value,
  - width: (state.rootWidth * +percentage!) / 100 + 'px',
  + width: '100%',
  + transform: `scaleX(${scaleX.value}) translateX(-${translateX.value})`,
  };
  return (
  - <div ref={root} class={bem()} style={rootStyle}>
  - <span class={bem('portion')} style={portionStyle}>
  + <div class={bem()} style={rootStyle}>
  + <span class={bem('portion')} style={portionStyle}></span>
  {renderPivot()}
  - </span>
  </div>
  );
  };
  