sync: 对齐小程序 v1.0.2 生产代码并脱敏

app/src/pages/message/components/MessageToolbar.vue

@@ -6,6 +6,7 @@ const props = defineProps<{
   placeholder: string
   modelValue: string
   filterKey: MessageFilterKey
+  loading?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -23,120 +24,18 @@ const activeFilterKey = computed({
   get: () => props.filterKey,
   set: value => emit('update:filterKey', value),
 })
-
-const dotColorMap: Record<MessageFilterKey, string> = {
-  all: '#2563eb',
-  recent30: '#2563eb',
-  asc: '#64748b',
-}
-
-function dotColor(key: MessageFilterKey) {
-  return dotColorMap[key]
-}
 </script>
 
 <template>
-  <view class="toolbar">
-    <view class="search-row">
-      <wd-search
-        v-model="keyword"
-        hide-cancel
-        placeholder-left
-        variant="filled"
-        :placeholder="props.placeholder"
-        custom-class="min-w-0 flex-1 !p-0"
-      />
-      <wd-button
-        class="refresh-btn"
-        icon="i-carbon-renew"
-        type="primary"
-        plain
-        round
-        size="small"
-        @click="emit('refresh')"
-      />
-    </view>
-
-    <view class="tag-row">
-      <view
-        v-for="option in messageFilterOptions"
-        :key="option.key"
-        class="chip"
-        :class="{ 'is-active': activeFilterKey === option.key }"
-        @click="activeFilterKey = option.key"
-      >
-        <view class="dot" :style="{ background: dotColor(option.key) }" />
-        <text class="chip-txt">{{ option.label }}</text>
-      </view>
+  <view class="card-base flex flex-col gap-20rpx p-20rpx">
+    <view class="flex items-center gap-16rpx">
+      <wd-search v-model="keyword" hide-cancel placeholder-left variant="filled" :placeholder="props.placeholder" custom-class="min-w-0 flex-1 !p-0" />
+      <wd-button type="primary" variant="text" size="small" css-icon="i-carbon-renew" custom-class="!h-56rpx !min-h-56rpx !px-8rpx !text-24rpx" :loading="props.loading" :disabled="props.loading" @click="emit('refresh')">
+        刷新
+      </wd-button>
     </view>
+    <wd-tabs v-model="activeFilterKey" line-theme="text" custom-class="!bg-transparent">
+      <wd-tab v-for="option in messageFilterOptions" :key="option.key" :name="option.key" :title="option.label" />
+    </wd-tabs>
   </view>
 </template>
-
-<style lang="scss" scoped>
-.toolbar {
-  display: flex;
-  flex-direction: column;
-  gap: 14rpx;
-}
-
-.search-row {
-  display: flex;
-  align-items: center;
-  gap: 12rpx;
-}
-
-.refresh-btn {
-  flex-shrink: 0;
-}
-
-.tag-row {
-  display: flex;
-  gap: 12rpx;
-  overflow-x: auto;
-  padding-bottom: 4rpx;
-}
-
-.chip {
-  display: flex;
-  align-items: center;
-  gap: 7rpx;
-  height: 44rpx;
-  padding: 0 18rpx;
-  border-radius: 999rpx;
-  background: #fff;
-  border: 1px solid #e2e8f0;
-  flex-shrink: 0;
-  transition: all 0.18s ease;
-}
-
-.chip:active {
-  transform: scale(0.95);
-}
-
-.chip.is-active {
-  background: #eff6ff;
-  border-color: #bfdbfe;
-}
-
-.chip-txt {
-  font-size: 22rpx;
-  font-weight: 700;
-  color: #334155;
-  white-space: nowrap;
-}
-
-.chip.is-active .chip-txt {
-  color: #2563eb;
-}
-
-.dot {
-  width: 10rpx;
-  height: 10rpx;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.chip.is-active .dot {
-  box-shadow: 0 0 0 4rpx rgba(37, 99, 235, 0.14);
-}
-</style>