chore: first login modify password

src/components/util-bar/index.less

@@ -0,0 +1,17 @@
+.util-bar-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
+
+  .title {
+    font-weight: var(--font-weight-medium);
+    padding: 20px 0;
+  }
+
+  .ant-progress.ant-progress-circle .ant-progress-text {
+    font-size: 24px;
+  }
+}

src/components/util-bar/index.tsx

@@ -0,0 +1,52 @@
+import { Progress } from 'antd';
+import './index.less';
+
+interface UitilBarProps {
+  title?: string;
+  percent: number;
+  steps?: number;
+  gapDegree?: number;
+  strokeWidth?: number;
+  size?: number;
+  trailColor?: string;
+  strokeColor?: string;
+}
+const UitilBar: React.FC<UitilBarProps> = (props) => {
+  const {
+    percent,
+    steps = 10,
+    gapDegree = 170,
+    strokeWidth = 12,
+    title,
+    size = 160,
+    strokeColor,
+    trailColor = 'rgba(221,221,221,.5)'
+  } = props;
+
+  const strokeColorFunc = (percent: number) => {
+    if (percent <= 50) {
+      return 'var(--ant-color-primary)';
+    }
+    if (percent <= 80) {
+      return 'var(--ant-color-warning)';
+    }
+    return 'var(--ant-color-error)';
+  };
+  return (
+    <div className="util-bar-box">
+      {title && <span className="title">{title}</span>}
+      <Progress
+        type="dashboard"
+        steps={steps}
+        gapDegree={gapDegree}
+        strokeWidth={strokeWidth}
+        size={size}
+        percent={percent}
+        trailColor={trailColor}
+        strokeColor={strokeColor || strokeColorFunc(percent)}
+      ></Progress>
+    </div>
+  );
+};
+
+export default UitilBar;