首次提交：初始化项目代码

2026-07-31 14:42:05 +08:00
commit ecca407485
84 changed files with 24158 additions and 0 deletions
@@ -0,0 +1,127 @@
+<template>
+  <view class="capsule-filter" :class="{ 'is-scrollable': scrollable }">
+    <view
+      v-for="(option, index) in normalizedOptions"
+      :key="index"
+      class="capsule-item"
+      :class="{ 'is-active': isActive(option) }"
+      :style="getItemStyle(option)"
+      @click="handleSelect(option)"
+    >
+      <text class="capsule-label">{{ getOptionLabel(option) }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import themeMixin from '@/mixins/themeMixin.js'
+import { getThemeConfigFromStorage, THEME_CHANGE_EVENT } from '@/utils/theme'
+
+export default {
+  name: 'CapsuleFilter',
+  mixins: [themeMixin],
+  props: {
+    options: {
+      type: Array,
+      required: true
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    scrollable: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'medium'
+    },
+    color: {
+      type: String,
+      default: ''
+    }
+  },
+  created() {
+    this.syncThemeConfig()
+    this.watchThemeChange()
+  },
+  beforeUnmount() {
+    if (this.themeChangeHandler) {
+      uni.$off(THEME_CHANGE_EVENT, this.themeChangeHandler)
+    }
+  },
+  computed: {
+    normalizedOptions() {
+      return this.options.map(opt => {
+        if (typeof opt === 'string') {
+          return { label: opt, value: opt }
+        }
+        return opt
+      })
+    },
+    activeColor() {
+      return this.color || this.themeConfig.primaryColor
+    },
+    sizeConfig() {
+      const map = {
+        small: { padding: '8rpx 20rpx', fontSize: '24rpx' },
+        medium: { padding: '12rpx 28rpx', fontSize: '28rpx' },
+        large: { padding: '16rpx 36rpx', fontSize: '32rpx' }
+      }
+      return map[this.size] || map.medium
+    }
+  },
+  methods: {
+    isActive(option) {
+      return option.value === this.value
+    },
+    getOptionLabel(option) {
+      return option.label
+    },
+    getItemStyle(option) {
+      const active = this.isActive(option)
+      return {
+        padding: this.sizeConfig.padding,
+        fontSize: this.sizeConfig.fontSize,
+        backgroundColor: active ? this.activeColor : this.themeConfig.borderColor,
+        color: active ? '#ffffff' : this.themeConfig.textSecondary
+      }
+    },
+    handleSelect(option) {
+      if (option.value === this.value) return
+      this.$emit('change', option.value)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.capsule-filter {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+
+.capsule-filter.is-scrollable {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.capsule-filter.is-scrollable .capsule-item {
+  flex-shrink: 0;
+}
+
+.capsule-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10rpx;
+  transition: all 0.25s ease;
+}
+
+.capsule-label {
+  line-height: 1.4;
+}
+</style>