修复卖家发布页样式和全天时间选择

frontend/src/features/seller/views/components/OptionChips.vue

@@ -18,22 +18,29 @@ const props = withDefaults(
 )
 
 const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
   select: [value: string | number]
 }>()
 
 function isActive(value: string | number) {
   return props.activeValues.includes(value) || props.modelValue === value
 }
+
+function selectValue(value: string | number) {
+  emit('update:modelValue', value)
+  emit('select', value)
+}
 </script>
 
 <template>
-  <div class="option-chips" :class="{ compact }">
+  <div class="chip-group" :class="{ compact }">
     <button
       v-for="option in options"
       :key="`${keyPrefix}${option}`"
       type="button"
+      class="chip"
       :class="{ active: isActive(option) }"
-      @click="emit('select', option)"
+      @click="selectValue(option)"
     >
       {{ option }}{{ suffix }}
     </button>
@@ -41,33 +48,34 @@ function isActive(value: string | number) {
 </template>
 
 <style scoped>
-.option-chips {
+.chip-group {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 7px;
+  min-width: 0;
 }
 
-.option-chips button {
-  min-height: 34px;
-  padding: 0 14px;
-  border: 1px solid #dbe3ee;
-  border-radius: 8px;
-  background: #fff;
-  color: #334155;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: border-color 0.15s, background 0.15s, color 0.15s;
+.chip-group.compact {
+  align-items: center;
+  min-height: 32px;
 }
 
-.option-chips.compact button {
+.chip {
   min-height: 30px;
-  padding: 0 10px;
+  padding: 0 12px;
+  border: 1px solid #d6dce5;
+  border-radius: 15px;
+  background: #fff;
+  color: #596474;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
 }
 
-.option-chips button.active {
-  border-color: #2563eb;
-  background: #eff6ff;
-  color: #1d4ed8;
+.chip.active {
+  border-color: #ff6a00;
+  background: #ff6a00;
+  color: #fff;
 }
 </style>