diff --git a/frontend/src/assets/style/arco-reset.less b/frontend/src/assets/style/arco-reset.less
index aaa655d4b0..bf36e1b5ea 100644
--- a/frontend/src/assets/style/arco-reset.less
+++ b/frontend/src/assets/style/arco-reset.less
@@ -98,67 +98,37 @@
 /** 按钮 **/
 .arco-btn-primary {
   background-color: rgb(var(--primary-5)) !important;
-  &:not(:disabled):hover {
-    background-color: rgb(var(--primary-4)) !important;
-  }
-  &:not(:disabled):active {
-    background-color: rgb(var(--primary-7)) !important;
-  }
-  &:disabled {
-    background-color: rgb(var(--primary-3)) !important;
-  }
+  .btn-base-primary-hover();
+  .btn-base-primary-active();
+  .btn-base-primary-disabled();
 }
 .arco-btn-status-danger {
   background-color: rgb(var(--danger-6)) !important;
-  &:not(:disabled):hover {
-    background-color: rgb(var(--danger-5)) !important;
-  }
-  &:not(:disabled):active {
-    background-color: rgb(var(--danger-7)) !important;
-  }
-  &:disabled {
-    background-color: rgb(var(--danger-2)) !important;
-  }
+  .btn-base-danger-hover();
+  .btn-base-danger-active();
+  .btn-base-danger-disabled();
 }
 .arco-btn-secondary:not(.arco-btn-disabled) {
   color: var(--clolor-text-1) !important;
   background-color: var(--color-text-n8) !important;
-  &:not(:disabled):hover {
-    background-color: var(--color-text-input-border) !important;
-  }
-  &:not(:disabled):active {
-    background-color: var(--color-text-brand) !important;
-  }
+  .btn-base-sec-hover();
+  .btn-base-sec-active();
 }
 .arco-btn-text {
-  &:not(:disabled):hover {
-    background-color: var(--color-text-n9) !important;
-  }
-  &:not(:disabled):active {
-    background-color: var(--color-text-n8) !important;
-  }
+  .btn-text-sec-hover();
+  .btn-text-sec-active();
+  .btn-text-sec-disabled();
 }
 .arco-btn-outline {
   color: rgb(var(--primary-5)) !important;
-  &:not(:disabled):hover {
-    border-color: rgb(var(--primary-4)) !important;
-    color: rgb(var(--primary-4)) !important;
-    background-color: rgb(var(--primary-1)) !important;
-  }
-  &:not(:disabled):active {
-    border-color: rgb(var(--primary-7)) !important;
-    color: rgb(var(--primary-7)) !important;
-    background-color: rgb(var(--primary-9)) !important;
-  }
-  &:disabled {
-    border-color: rgb(var(--primary-3)) !important;
-    color: rgb(var(--primary-3)) !important;
-    background-color: rgb(var(--primary-1)) !important;
-  }
+  .btn-outline-primary-hover();
+  .btn-outline-primary-active();
+  .btn-outline-primary-disabled();
 }
 
-/** 输入框，选择器 **/
+/** 输入框，选择器，文本域 **/
 .arco-input-wrapper,
+.arco-textarea-wrapper,
 .arco-input-tag,
 .arco-select {
   border: 1px solid var(--color-text-input-border);
@@ -189,6 +159,36 @@
   background-color: var(--color-bg-2) !important;
   box-shadow: 0 0 0 0 var(--color-danger-light-2) !important;
 }
+.arco-input-outer {
+  .arco-input-wrapper {
+    border-radius: var(--border-radius-small) !important;
+  }
+}
+.arco-input-number-mode-button {
+  .arco-input-prepend {
+    .arco-input-number-step-button {
+      margin-right: 4px;
+    }
+  }
+  .arco-input-append {
+    .arco-input-number-step-button {
+      margin-left: 4px;
+    }
+  }
+  .arco-input-prepend,
+  .arco-input-append {
+    @apply bg-white;
+    .arco-input-number-step-button {
+      @apply !bg-white;
+
+      border: 1px solid var(--color-text-input-border);
+      border-radius: var(--border-radius-small) !important;
+      .btn-outline-sec-disabled();
+      .btn-outline-sec-hover();
+      .btn-outline-sec-active();
+    }
+  }
+}
 
 /** form-item **/
 .arco-form-item-content-flex {
@@ -203,6 +203,12 @@
     @apply !hidden;
   }
 }
+.arco-form-item-label {
+  color: var(--clolor-text-1) !important;
+}
+.arco-form-item-label-required-symbol {
+  @apply inline-flex;
+}
 
 /** 多选框 **/
 .arco-checkbox-checked {
diff --git a/frontend/src/assets/style/var.less b/frontend/src/assets/style/var.less
index e7c532e5a1..f7dedd5775 100644
--- a/frontend/src/assets/style/var.less
+++ b/frontend/src/assets/style/var.less
@@ -5,3 +5,151 @@
 @border-radius-large: 12px;
 
 @color-white: #fff;
+
+/** 常用颜色类 **/
+
+/** 按钮状态类 **/
+.btn-outline-primary-hover() {
+  &:not(:disabled):hover {
+    border-color: rgb(var(--primary-4)) !important;
+    color: rgb(var(--primary-4)) !important;
+    background-color: rgb(var(--primary-1)) !important;
+  }
+}
+.btn-outline-primary-active() {
+  &:not(:disabled):active {
+    border-color: rgb(var(--primary-5)) !important;
+    color: rgb(var(--primary-5)) !important;
+    background-color: rgb(var(--primary-9)) !important;
+  }
+}
+.btn-outline-primary-disabled() {
+  &:disabled {
+    @apply !bg-white;
+
+    border: 1px solid rgb(var(--primary-3)) !important;
+    color: rgb(var(--primary-3));
+  }
+}
+.btn-outline-sec-hover() {
+  &:not(:disabled):hover {
+    border: 1px solid var(--color-text-input-border) !important;
+    color: var(--color-text-2) !important;
+    background-color: var(--color-text-n9) !important;
+  }
+}
+.btn-outline-sec-active() {
+  &:not(:disabled):active {
+    border-color: var(--color-text-brand) !important;
+    color: var(--color-text-1) !important;
+    background-color: var(--color-text-n8) !important;
+  }
+}
+.btn-outline-sec-disabled() {
+  &:disabled {
+    @apply !bg-white;
+
+    border: 1px solid var(--color-text-input-border) !important;
+    color: var(--color-text-4);
+  }
+}
+.btn-outline-danger-hover() {
+  &:not(:disabled):hover {
+    border-color: rgb(var(--danger-5)) !important;
+    color: rgb(var(--danger-5)) !important;
+    background-color: rgb(var(--danger-1)) !important;
+  }
+}
+.btn-outline-danger-active() {
+  &:not(:disabled):active {
+    border-color: rgb(var(--danger-7)) !important;
+    color: rgb(var(--danger-7)) !important;
+    background-color: rgb(var(--danger-2)) !important;
+  }
+}
+.btn-outline-danger-disabled() {
+  &:disabled {
+    @apply !bg-white;
+
+    border: 1px solid rgb(var(--danger-2)) !important;
+    color: rgb(var(--danger-2));
+  }
+}
+
+.btn-base-primary-hover() {
+  &:not(:disabled):hover {
+    background-color: rgb(var(--primary-4)) !important;
+  }
+}
+.btn-base-primary-active() {
+  &:not(:disabled):active {
+    background-color: rgb(var(--primary-5)) !important;
+  }
+}
+.btn-base-primary-disabled() {
+  &:disabled {
+    background-color: rgb(var(--primary-3)) !important;
+  }
+}
+.btn-base-sec-hover() {
+  &:not(:disabled):hover {
+    background-color: var(--color-text-input-border) !important;
+  }
+}
+.btn-base-sec-active() {
+  &:not(:disabled):active {
+    background-color: var(--color-text-brand) !important;
+  }
+}
+.btn-base-sec-disabled() {
+  &:disabled {
+    color: var(--color-text-4) !important;
+    background-color: var(--color-text-n8) !important;
+  }
+}
+.btn-base-danger-hover() {
+  &:not(:disabled):hover {
+    background-color: rgb(var(--danger-5)) !important;
+  }
+}
+.btn-base-danger-active() {
+  &:not(:disabled):active {
+    background-color: rgb(var(--danger-7)) !important;
+  }
+}
+.btn-base-danger-disabled() {
+  &:disabled {
+    background-color: rgb(var(--danger-2)) !important;
+  }
+}
+
+.btn-text-sec-hover() {
+  &:not(:disabled):hover {
+    background-color: var(--color-text-n9) !important;
+  }
+}
+.btn-text-sec-active() {
+  &:not(:disabled):active {
+    background-color: var(--color-text-n8) !important;
+  }
+}
+.btn-text-sec-disabled() {
+  &:disabled {
+    color: var(--color-text-4) !important;
+  }
+}
+.btn-text-primary-hover() {
+  &:not(:disabled):hover {
+    background-color: rgb(var(--color-bg-3)) !important;
+  }
+}
+.btn-text-primary-active() {
+  &:not(:disabled):active {
+    background-color: var(--color-text-n8) !important;
+  }
+}
+.btn-text-primary-disabled() {
+  &:disabled {
+    color: rgb(var(--primary-3)) !important;
+  }
+}