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

2026-07-31 14:42:05 +08:00
commit ecca407485
84 changed files with 24158 additions and 0 deletions
@@ -0,0 +1,176 @@
+<template>
+  <view class="swipeable-item">
+    <view
+      class="swipeable-item__inner"
+      :style="{ transform: `translateX(${translateX}px)`, transition: animating ? 'transform 0.3s ease' : 'none' }"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+      @touchcancel="onTouchEnd"
+    >
+      <view
+        class="swipeable-item__main"
+        :style="{ backgroundColor: themeConfig.cardBgColor }"
+        @click="onMainClick"
+      >
+        <slot></slot>
+      </view>
+      <view class="swipeable-item__actions">
+        <view
+          v-for="action in actions"
+          :key="action.key"
+          class="swipeable-item__action"
+          :style="{ backgroundColor: getActionColor(action) }"
+          @click.stop="onActionClick(action)"
+        >
+          <text class="swipeable-item__action-text">{{ action.label }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import themeMixin from '@/mixins/themeMixin.js'
+import { THEME_CHANGE_EVENT } from '@/utils/theme.js'
+
+export default {
+  name: 'SwipeableItem',
+  mixins: [themeMixin],
+  props: {
+    actions: {
+      type: Array,
+      required: true
+    },
+    autoClose: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    index: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  data() {
+    return {
+      translateX: 0,
+      animating: false,
+      isOpen: false,
+      startX: 0,
+      thresholdPx: 0,
+      maxOffsetPx: 0
+    }
+  },
+  computed: {
+    actionColorMap() {
+      return {
+        edit: this.themeConfig.primaryColor,
+        delete: this.themeConfig.dangerColor,
+        done: this.themeConfig.successColor
+      }
+    }
+  },
+  created() {
+    this.syncThemeConfig()
+    this.watchThemeChange()
+    this.thresholdPx = uni.upx2px(80)
+    this.maxOffsetPx = uni.upx2px(this.actions.length * 160)
+  },
+  beforeUnmount() {
+    if (this.themeChangeHandler) {
+      uni.$off(THEME_CHANGE_EVENT, this.themeChangeHandler)
+    }
+  },
+  methods: {
+    getActionColor(action) {
+      if (action.color) return action.color
+      return this.actionColorMap[action.key] || this.themeConfig.primaryColor
+    },
+    onTouchStart(e) {
+      if (this.disabled) return
+      this.startX = e.touches[0].clientX
+      this.animating = false
+    },
+    onTouchMove(e) {
+      if (this.disabled) return
+      const currentX = e.touches[0].clientX
+      const delta = currentX - this.startX
+      this.translateX = Math.max(-this.maxOffsetPx, Math.min(0, delta))
+    },
+    onTouchEnd() {
+      if (this.disabled) return
+      this.animating = true
+      if (this.translateX < -this.thresholdPx) {
+        this.open()
+      } else {
+        this.close()
+      }
+    },
+    open() {
+      this.translateX = -this.maxOffsetPx
+      this.isOpen = true
+      this.$emit('open', this.index)
+      this.$emit('closeOthers', this.index)
+    },
+    close() {
+      this.translateX = 0
+      this.isOpen = false
+      this.$emit('close', this.index)
+    },
+    onMainClick() {
+      if (this.isOpen) {
+        this.close()
+      }
+    },
+    onActionClick(action) {
+      this.$emit('action', action.key)
+      if (this.autoClose) {
+        this.close()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.swipeable-item {
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+.swipeable-item__inner {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  will-change: transform;
+}
+
+.swipeable-item__main {
+  flex-shrink: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.swipeable-item__actions {
+  display: flex;
+  flex-direction: row;
+}
+
+.swipeable-item__action {
+  width: 160rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.swipeable-item__action-text {
+  font-size: 24rpx;
+  color: #ffffff;
+}
+</style>