uniapp-dyckui 4.1.1

package/src/components/MyComs/DropdownSelect/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <view class="dropdown-select">
+    <!-- 下拉选择触发器 -->
+    <view class="dropdown-trigger" @tap="togglePicker">
+      <slot v-bind="{ text: displayText }">
+        <view class="dropdown-title">
+          <text class="dropdown-text">{{ displayText }}</text>
+          <text class="dropdown-icon" :class="{ 'is-active': isOpen }">
+            <slot name="icon">
+              <!-- 使用 UniApp 内置图标或自定义图标 -->
+              <view class="uni-icon" :class="iconName" />
+            </slot>
+          </text>
+        </view>
+      </slot>
+    </view>
+
+    <!-- 选择器弹窗 -->
+    <picker
+      v-if="isOpen"
+      mode="selector"
+      :range="options"
+      range-key="text"
+      :value="selectedIndex"
+      class="dropdown-picker"
+      @change="onPickerChange"
+      @cancel="onPickerCancel"
+    >
+      <!-- UniApp picker 组件会自动渲染选择器UI -->
+    </picker>
+  </view>
+</template>
+
+<script setup lang="ts" generic="T">
+import type { DropdownSelectEmits, DropdownSelectProps } from './type'
+import { computed, ref } from 'vue'
+import { useDropdownSelect } from './dropdownSelect'
+
+const props = withDefaults(
+  defineProps<DropdownSelectProps<T>>(),
+  {
+    iconName: 'arrow-down',
+  },
+)
+const emit = defineEmits<DropdownSelectEmits<T>>()
+
+const { displayText, internalValue, handleChange, handleOpen, handleClose } = useDropdownSelect<T>(props, emit)
+
+// 控制选择器显示状态
+const isOpen = ref(false)
+
+// 计算当前选中项的索引
+const selectedIndex = computed(() => {
+  if (!props.options || !props.options.length)
+    return 0
+  return props.options.findIndex(opt => opt.value === internalValue.value)
+})
+
+// 切换选择器显示/隐藏
+function togglePicker() {
+  isOpen.value = !isOpen.value
+  if (isOpen.value) {
+    handleOpen()
+  }
+  else {
+    handleClose()
+  }
+}
+
+// 选择器确认选择
+function onPickerChange(e: any) {
+  const index = e.detail.value
+  const selectedOption = props.options[index]
+  handleChange(selectedOption.value as T)
+  isOpen.value = false
+  handleClose()
+}
+
+// 选择器取消选择
+function onPickerCancel() {
+  isOpen.value = false
+  handleClose()
+}
+</script>
+
+<style lang="less">
+@import './dropdownSelect.less';
+</style>

package/src/components/MyComs/DropdownSelect/type.ts

@@ -0,0 +1,15 @@
+// 本地定义下拉选项类型
+export interface DropdownItemOption {
+  text: string
+  value: any
+}
+
+export interface DropdownSelectProps<T> {
+  modelValue?: T
+  iconName?: string
+  options: DropdownItemOption[]
+}
+export interface DropdownSelectEmits<T> {
+  (e: 'update:modelValue', value: T): void
+  (e: 'change', value: T): void
+}

package/src/components/MyComs/DropdownWithBadge/README.md

@@ -0,0 +1,77 @@
+# DropdownWithBadge 使用指南
+
+**组件概述**
+- 在 `DropdownSelect` 基础上增加“状态红点”提示
+- 通过 `hideBadge` 控制是否隐藏红点，默认当 `modelValue` 为空（`'' | null | undefined`）时显示红点
+- 入口：`src/components/DropdownWithBadge/index.vue`
+
+**快速使用**
+```vue
+<template>
+  <DropdownWithBadge
+    v-model="selected"
+    :options="[
+      { text: '全部', value: '' },
+      { text: '待处理', value: 'todo' },
+      { text: '已处理', value: 'done' }
+    ]"
+  />
+</template>
+<script setup lang="ts">
+import DropdownWithBadge from "@/components/DropdownWithBadge";
+import { ref } from "vue";
+const selected = ref(''); // 空值时显示红点
+</script>
+```
+
+**自定义红点显示规则**
+- 通过 `hideBadge` 决定是否隐藏红点；返回 `true` 表示隐藏红点，返回 `false` 表示显示红点
+```vue
+<DropdownWithBadge
+  v-model="selected"
+  :options="options"
+  :hide-badge="(val) => val === 'done'"  <!-- 仅在选中 'done' 时隐藏红点 -->
+/>
+```
+
+**Props**
+- 继承自 `DropdownSelectProps`：`modelValue`、`iconName`、`options`
+- 额外：
+  - `hideBadge?: (value: string | number | undefined) => boolean`
+    - 默认：隐藏条件为 `value === '' || value === null || value === undefined`
+    - 定义位置：`src/components/DropdownWithBadge/type.ts:6-8`
+  - 默认图标：`iconName: 'filter-o'`（可通过属性覆盖）
+    - 设置位置：`src/components/DropdownWithBadge/index.vue:25-29`
+
+**Emits**
+- 与 `DropdownSelect` 保持一致：`update:modelValue`、`change`
+- 定义位置：`src/components/DropdownWithBadge/type.ts:9-12`
+
+**插槽**
+- `default`：自定义标题区域文案，传入 `{ text }`
+- `icon`：自定义标题区域图标
+- 插槽结构位置：`src/components/DropdownWithBadge/index.vue:4-16`
+
+**行为说明**
+- 红点显示规则：
+  - 逻辑计算：`src/components/DropdownWithBadge/dropdownWithBadge.ts:5-7`
+  - 视图控制：`src/components/DropdownWithBadge/index.vue:14-15`
+  - 当 `hideBadge(value)` 返回 `true` 时，红点隐藏；返回 `false` 时，红点显示
+- 与 `DropdownSelect` 的组合：
+  - 继承其选项展示、图标、双向绑定与事件透传能力
+  - 组合位置：`src/components/DropdownWithBadge/index.vue:2-18`
+
+**样式**
+- 文件：`src/components/DropdownWithBadge/dropdownWithBadge.less`
+- 类名：`.dropdown-with-badge__dot`（绝对定位的 8px 红色圆点）
+- 定义位置：`src/components/DropdownWithBadge/dropdownWithBadge.less:1-11`
+
+**依赖**
+- 组件基础依赖：`DropdownSelect`（`src/components/DropdownSelect`）
+- 第三方依赖：`Vant` 的 `Icon`（图标）
+
+**最佳实践**
+- 使用明确的 `modelValue` 来表示当前筛选状态，避免空值语义不清
+- 自定义 `hideBadge` 时保持返回布尔含义清晰：返回 `true` 隐藏红点，返回 `false` 显示红点
+- 当需要更换图标时，优先通过 `iconName` 设置，复杂图标则使用 `icon` 插槽
+

package/src/components/MyComs/DropdownWithBadge/dropdownWithBadge.less

@@ -0,0 +1,11 @@
+.dropdown-with-badge {
+  &__dot {
+    background: red;
+    position: absolute;
+    width: 16rpx;
+    height: 16rpx;
+    border-radius: 50%;
+    top: 8rpx;
+    right: 4rpx;
+  }
+}

package/src/components/MyComs/DropdownWithBadge/dropdownWithBadge.ts

@@ -0,0 +1,10 @@
+import type { DropdownWithBadgeProps } from './type'
+import { computed } from 'vue'
+
+export function useDropdownWithBadge<T>(props: DropdownWithBadgeProps<T>) {
+  const hasBadge = computed(() => {
+    return props.hideBadge!(props.modelValue)
+  })
+
+  return { hasBadge }
+}

package/src/components/MyComs/DropdownWithBadge/index.ts

@@ -0,0 +1,4 @@
+import DropdownWithBadge from './index.vue'
+
+export default DropdownWithBadge
+export * from './type'

package/src/components/MyComs/DropdownWithBadge/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <dropdown-select
+    v-bind="{ modelValue, options }" class="dropdown-with-badge"
+    v-on="emit"
+  >
+    <template #default="{ text }">
+      <slot v-bind="{ text }">
+        <view class="dropdown-title">
+          <text class="dropdown-text">{{ text }}</text>
+          <text class="dropdown-icon">
+            <slot name="icon">
+              <!-- 使用自定义图标类名 -->
+              <view class="uni-icon" :class="iconName" />
+            </slot>
+          </text>
+        </view>
+        <text v-show="!hasBadge" class="dropdown-with-badge__dot" />
+      </slot>
+    </template>
+  </dropdown-select>
+</template>
+
+<script lang="ts" setup generic="T">
+import type { DropdownWithBadgeEmits, DropdownWithBadgeProps } from './type'
+import DropdownSelect from '../DropdownSelect'
+import { useDropdownWithBadge } from './dropdownWithBadge'
+
+const props = withDefaults(defineProps<DropdownWithBadgeProps<T>>(), {
+  hideBadge: (modelValue?: T) => (modelValue === '' || modelValue === null || modelValue === undefined),
+  iconName: 'filter-o',
+})
+const emit = defineEmits<DropdownWithBadgeEmits<T>>()
+
+const { hasBadge } = useDropdownWithBadge(props)
+</script>
+
+<style lang="less">
+@import './dropdownWithBadge.less';
+</style>

package/src/components/MyComs/DropdownWithBadge/type.ts

@@ -0,0 +1,12 @@
+import type {
+  DropdownSelectEmits,
+  DropdownSelectProps,
+} from '../DropdownSelect'
+
+export interface DropdownWithBadgeProps<T> extends /* @vue-ignore */ DropdownSelectProps<T> {
+  hideBadge?: (value?: T) => boolean
+}
+export interface DropdownWithBadgeEmits<T> extends /* @vue-ignore */ DropdownSelectEmits<T> {
+  (e: 'update:modelValue', value: T): void
+  (e: 'change', value: T): void
+}

package/src/components/MyComs/FilterDrawer/filterDrawer.less

@@ -0,0 +1,117 @@
+.filter-drawer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  &__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 12rpx;
+    font-size: 28rpx;
+    color: #1989fa;
+    position: relative;
+    cursor: pointer;
+  }
+
+  &__badge-dot {
+    position: absolute;
+    top: -4rpx;
+    right: -12rpx;
+    width: 12rpx;
+    height: 12rpx;
+    background-color: #f56c6c;
+    border-radius: 50%;
+  }
+
+  &__header {
+    flex-shrink: 0;
+    padding: 24rpx 32rpx;
+    background: #fff;
+    z-index: 1;
+  }
+
+  &__title {
+    text-align: center;
+    font-size: 32rpx;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  &__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 32rpx;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  &__footer {
+    flex-shrink: 0;
+    display: flex;
+    background: #fff;
+    padding: 0 32rpx 24rpx;
+    z-index: 1;
+    gap: 24rpx;
+  }
+
+  &__button {
+    flex: 1;
+    height: 88rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28rpx;
+    border-radius: 8rpx;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    background-color: #1989fa;
+    color: #fff;
+    border: 2rpx solid #1989fa;
+
+    &--plain {
+      background-color: #fff;
+      color: #1989fa;
+    }
+  }
+
+  &__popup-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+  }
+
+  &__popup {
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    width: 100vw;
+    background: #fff;
+    z-index: 1000;
+    transform: translateX(100%);
+    animation: slideInRight 0.3s forwards;
+  }
+
+  &__close {
+    position: absolute;
+    top: 24rpx;
+    right: 32rpx;
+    font-size: 48rpx;
+    cursor: pointer;
+    color: #999;
+    z-index: 10;
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}

package/src/components/MyComs/FilterDrawer/hasBadge.ts

@@ -0,0 +1,41 @@
+import type { ComputedRef, Ref } from 'vue'
+import { computed, isRef } from 'vue'
+
+/**
+ * 判断是否应显示徽章（如筛选条件已应用）
+ * @param model 表单数据或者自定义方法
+ * @returns 响应式的布尔值 Ref<boolean>
+ */
+export function useHasBadge<T extends object>(
+  model?: Ref<T> | T | (() => boolean),
+): ComputedRef<boolean> {
+  if (!model) {
+    return computed(() => false)
+  }
+
+  if (typeof model === 'function') {
+    return computed(() => model())
+  }
+  if (isRef(model)) {
+    return computed(() => {
+      if (!model.value)
+        return false
+      const obj = model.value as Record<keyof T, any>
+      for (const key in obj) {
+        if (obj[key]) {
+          return true
+        }
+      }
+      return false
+    })
+  }
+  return computed(() => {
+    for (const key in model) {
+      const val = model[key as keyof typeof model]
+      if (val) {
+        return true
+      }
+    }
+    return false
+  })
+}

package/src/components/MyComs/FilterDrawer/index.ts

@@ -0,0 +1,5 @@
+import FilterDrawer from './index.vue'
+
+export default FilterDrawer
+export * from './hasBadge'
+export * from './type'

package/src/components/MyComs/FilterDrawer/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class="filter-drawer__trigger" @click="openDrawer">
+    <slot name="trigger">
+      <!-- 使用自定义图标 -->
+      <view class="uni-icon icon-filter-o" />
+    </slot>
+    <text v-if="hasBadge" class="filter-drawer__badge-dot" />
+  </view>
+
+  <!-- 使用 UniApp 内置的 popup 组件 -->
+  <view v-if="visible" class="filter-drawer__popup-mask" @click="closeDrawer" />
+  <view v-if="visible" class="filter-drawer__popup" :style="{ height: '100vh', width: '100vw' }">
+    <view class="filter-drawer__close" @click="closeDrawer">
+      ×
+    </view>
+    <view class="filter-drawer">
+      <view class="filter-drawer__header">
+        <slot name="header">
+          <text class="filter-drawer__title">筛选</text>
+        </slot>
+      </view>
+      <view class="filter-drawer__body">
+        <slot />
+      </view>
+      <view class="filter-drawer__footer">
+        <slot name="footer">
+          <view class="filter-drawer__button filter-drawer__button--plain" @click="resetDrawer">
+            重置条件
+          </view>
+          <view class="filter-drawer__button" @click="queryDrawer">
+            查询
+          </view>
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts" generic="T extends object">
+import type { FilterDrawerEmits, FilterDrawerProps } from './type'
+import { useFilterDrawer } from './useFilterDrawer'
+
+const props = withDefaults(defineProps<FilterDrawerProps<T>>(), {
+  hasBadge: false,
+})
+const emit = defineEmits<FilterDrawerEmits>()
+
+const { visible, openDrawer, closeDrawer, resetDrawer, queryDrawer, hasBadge } = useFilterDrawer(props, emit)
+</script>
+
+<style lang="less">
+@import './filterDrawer.less';
+</style>

package/src/components/MyComs/FilterDrawer/type.ts

@@ -0,0 +1,9 @@
+export interface FilterDrawerProps<T = any> {
+  hasBadge?: boolean
+  modelValue?: T
+}
+
+export interface FilterDrawerEmits {
+  (e: 'reset'): void
+  (e: 'query'): void
+}

package/src/components/MyComs/FilterDrawer/useFilterDrawer.ts

@@ -0,0 +1,38 @@
+import type { FilterDrawerEmits, FilterDrawerProps } from './type'
+import { ref } from 'vue'
+import { useHasBadge } from './hasBadge'
+
+export function useFilterDrawer<T extends object>(props: FilterDrawerProps<T>, emit: FilterDrawerEmits) {
+  // 使用ref替代useToggle
+  const visible = ref(false)
+
+  // 徽章状态
+  const hasBadge = useHasBadge(props.modelValue)
+
+  const openDrawer = () => {
+    visible.value = true
+  }
+
+  const closeDrawer = () => {
+    visible.value = false
+  }
+
+  const resetDrawer = () => {
+    emit('reset')
+    closeDrawer()
+  }
+
+  const queryDrawer = () => {
+    emit('query')
+    closeDrawer()
+  }
+
+  return {
+    visible,
+    openDrawer,
+    closeDrawer,
+    resetDrawer,
+    queryDrawer,
+    hasBadge,
+  }
+}

package/src/components/MyComs/InfiniteScroll/index.ts

@@ -0,0 +1,2 @@
+import Component from './index.vue';
+export default Component;