Initial project commit

clients/components/tag-bar/tag-bar.vue

@@ -0,0 +1,75 @@
+<script setup>
+defineProps({
+  tags: {
+    type: Array,
+    default: () => [],
+  },
+  activeId: {
+    type: [Number, null],
+    default: null,
+  },
+});
+
+const emit = defineEmits(["select"]);
+
+const handleSelect = (id) => {
+  emit("select", id);
+};
+</script>
+
+<template>
+  <scroll-view class="tag-bar" scroll-x enable-flex>
+    <view
+      class="tag-pill"
+      :class="{ active: activeId === null }"
+      @tap="handleSelect(null)"
+    >
+      <text class="tag-text">全部</text>
+    </view>
+    <view
+      v-for="tag in tags"
+      :key="tag.id"
+      class="tag-pill"
+      :class="{ active: activeId === tag.id }"
+      @tap="handleSelect(tag.id)"
+    >
+      <text class="tag-text">{{ tag.name }}</text>
+    </view>
+  </scroll-view>
+</template>
+
+<style scoped>
+.tag-bar {
+  white-space: nowrap;
+  padding: 16rpx 32rpx;
+  display: flex;
+}
+
+.tag-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12rpx 28rpx;
+  border-radius: 32rpx;
+  background: #ffffff;
+  margin-right: 16rpx;
+  flex-shrink: 0;
+  border: 2rpx solid #e2e8f0;
+}
+
+.tag-pill.active {
+  background: #6366f1;
+  border-color: #6366f1;
+}
+
+.tag-text {
+  font-size: 26rpx;
+  color: #475569;
+  white-space: nowrap;
+}
+
+.tag-pill.active .tag-text {
+  color: #ffffff;
+  font-weight: 500;
+}
+</style>