feat ui设计稿

src/components/FilterPanel.vue

@@ -71,50 +71,54 @@ const emit = defineEmits<{
 
 <style lang="less" scoped>
 .filter-panel {
-  padding: @spacing-base @spacing-lg;
-  border-radius: @radius-lg;
+  padding: 24px 36px; // 设计04 搜索卡左右内缩 47 × 0.77
+  border-radius: @radius-base;
   background: @white;
-  box-shadow: @shadow-base;
 
   &__bar {
     .flex(row, flex-start);
-    gap: @spacing-sm;
+    gap: 18px; // 按钮间距 24 × 0.77
   }
 
   &__input {
-    width: 240px;
-    height: 34px;
+    flex: 1;
+    max-width: 456px; // 设计输入框 592 × 0.77
+    margin-right: 28px; // 与按钮总距 60 × 0.77（叠加 bar gap 18）
+    height: 38px; // 设计 49 × 0.77
     padding: 0 @spacing-base;
-    border: 1px solid @border-color;
-    border-radius: @radius-base;
-    background: @bg-color-light;
-    font-size: @font-size-base;
+    border: 1px solid @cases-input-border;
+    border-radius: @radius-sm;
+    background: @white;
+    color: @cases-text;
+    font-size: 15px; // 设计 20 × 0.77
     outline: none;
     transition: border-color 0.2s;
 
+    &::placeholder {
+      color: @cases-input-border;
+    }
+
     &:focus {
-      border-color: @primary-color;
+      border-color: @cases-accent;
     }
   }
 
   &__btn {
-    height: 34px;
+    min-width: 77px; // 设计 100 × 0.77
+    height: 38px; // 设计 49 × 0.77
     padding: 0 @spacing-base;
-    border: 1px solid @border-color-dark;
-    border-radius: @radius-base;
-    background: @white;
-    color: @text-color;
-    font-size: @font-size-base;
+    border-radius: @radius-sm;
+    background: @cases-accent; // 设计 重置/搜索 均为 rgba(7,92,255)
+    color: @white;
+    font-size: 15px; // 设计 20 × 0.77
     transition: all 0.2s;
 
     &:hover {
-      border-color: @primary-color;
-      color: @primary-color;
+      background: @primary-hover;
     }
 
     &--primary {
-      border-color: @primary-color;
-      background: @primary-color;
+      background: @cases-accent;
       color: @white;
 
       &:hover {
@@ -127,29 +131,36 @@ const emit = defineEmits<{
   &__chips {
     .flex(row, flex-start, center);
     flex-wrap: wrap;
-    gap: @spacing-sm;
+    gap: 11px 10px; // 行距 14 / 列距 13 × 0.77
     margin-top: @spacing-base;
-    font-size: @font-size-sm;
+    padding: 12px 18px 16px; // 「已选条件」面板内边距 16/24/21 × 0.77
+    border-radius: @radius-base;
+    background: @chips-panel-bg;
+    font-size: 15px; // 设计 20 × 0.77
+  }
+
+  &__chips-label {
+    color: @cases-text; // 设计04 标题 rgba(51,51,51)
+    font-weight: 500;
   }
 
   &__chip {
-    height: 26px;
+    height: 25px; // 设计 32 × 0.77
     padding: 0 @spacing-sm;
-    border: 1px solid @primary-light;
     border-radius: @radius-round;
-    background: @primary-light;
-    color: @primary-color;
-    font-size: @font-size-sm;
+    background: @white;
+    color: @cases-accent; // 设计 chips 文字 rgba(7,92,255)
+    font-size: 11px; // 设计 14 → 10.8，取可读下限 11
+    font-weight: 500;
     transition: all 0.2s;
 
     &:hover {
-      border-color: @primary-color;
+      color: @primary-hover;
     }
 
     &--clear {
-      border-color: @border-color;
-      background: @white;
-      color: @text-color-secondary;
+      background: transparent;
+      color: @primary-strong; // 设计15「清空」为纯文字蓝链
     }
   }