uniapp-dyckui 4.1.1

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

@@ -0,0 +1,275 @@
+<template>
+  <view v-if="showDialog" class="dialog-wrapper" @click="handleMaskClick">
+    <view class="dialog-container" @click.stop>
+      <!-- 上部分内容 -->
+      <view class="dialog-content">
+        <view class="dialog-icon">
+          <image v-if="icon" :src="icon" alt="dialog-icon" />
+          <!-- 默认图标 -->
+          <view v-else class="default-icon" />
+        </view>
+        <text class="dialog-title">{{ title }}</text>
+        <text class="dialog-description">{{ description }}</text>
+      </view>
+
+      <!-- 分割线 -->
+      <view class="dialog-divider" />
+
+      <!-- 下部分按钮 -->
+      <view class="dialog-buttons">
+        <!-- 类型1: 取消和打开app -->
+        <template v-if="type === 'open-app'">
+          <view class="dialog-button dialog-button-cancel" @click="handleCancel">
+            取消
+          </view>
+          <view class="dialog-button dialog-button-primary" @click="handleConfirm">
+            打开app
+          </view>
+        </template>
+
+        <!-- 类型2: 知道了 -->
+        <template v-else-if="type === 'confirm'">
+          <view class="dialog-button dialog-button-full dialog-button-primary" @click="handleConfirm">
+            知道了
+          </view>
+        </template>
+
+        <!-- 类型3: 取消和继续访问 -->
+        <template v-else-if="type === 'continue'">
+          <view class="dialog-button dialog-button-cancel" @click="handleCancel">
+            取消
+          </view>
+          <view class="dialog-button dialog-button-primary" @click="handleConfirm">
+            继续访问
+          </view>
+        </template>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+// 弹窗类型定义
+type DialogType = 'open-app' | 'confirm' | 'continue'
+
+// Props定义
+interface Props {
+  // 控制弹窗显示/隐藏（支持v-model）
+  modelValue: boolean
+  // 弹窗类型
+  type?: DialogType
+  // 弹窗标题
+  title?: string
+  // 弹窗说明文字
+  description?: string
+  // 图标路径
+  icon?: string
+  // 是否显示遮罩层
+  mask?: boolean
+  // 遮罩层透明度
+  maskOpacity?: number
+  // 点击遮罩是否关闭弹窗
+  closeOnMaskClick?: boolean
+}
+
+// Props默认值
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  type: 'confirm',
+  title: '',
+  description: '',
+  icon: '',
+  mask: true,
+  maskOpacity: 0.5,
+  closeOnMaskClick: true,
+})
+
+// Emits定义
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'confirm'): void
+  (e: 'cancel'): void
+}>()
+
+// 本地状态
+const showDialog = ref(props.modelValue)
+
+// 监听modelValue变化
+watch(() => props.modelValue, (newVal) => {
+  showDialog.value = newVal
+})
+
+// 监听showDialog变化
+watch(() => showDialog.value, (newVal) => {
+  emit('update:modelValue', newVal)
+})
+
+// 点击遮罩层
+function handleMaskClick() {
+  if (props.closeOnMaskClick) {
+    showDialog.value = false
+  }
+}
+
+// 点击确认按钮
+function handleConfirm() {
+  emit('confirm')
+  // 确认后关闭弹窗
+  showDialog.value = false
+}
+
+// 点击取消按钮
+function handleCancel() {
+  emit('cancel')
+  // 取消后关闭弹窗
+  showDialog.value = false
+}
+</script>
+
+<style scoped>
+/* 弹窗容器 */
+.dialog-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, v-bind('maskOpacity'));
+  animation: fadeIn 300ms ease;
+}
+
+/* 弹窗主体 */
+.dialog-container {
+  width: 80%;
+  max-width: 800rpx;
+  background-color: #fff;
+  border-radius: 32rpx;
+  overflow: hidden;
+  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.15);
+  animation: scaleIn 300ms ease;
+  background-image: url('@/assets/u2.png');
+  background-size: cover;
+  background-position: center;
+}
+
+/* 上部分内容 */
+.dialog-content {
+  padding: 60rpx 40rpx;
+  text-align: center;
+}
+
+/* 图标 */
+.dialog-icon {
+  margin-bottom: 40rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dialog-icon image {
+  width: 120rpx;
+  height: 120rpx;
+  object-fit: contain;
+}
+
+.default-icon {
+  width: 120rpx;
+  height: 120rpx;
+  background-color: #f0f0f0;
+  border-radius: 50%;
+}
+
+/* 标题 */
+.dialog-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  margin: 0 0 20rpx 0;
+}
+
+/* 说明文字 */
+.dialog-description {
+  font-size: 28rpx;
+  color: #666;
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* 分割线 */
+.dialog-divider {
+  height: 2rpx;
+  background-color: #e5e5e5;
+  margin: 0;
+}
+
+/* 按钮区域 */
+.dialog-buttons {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+/* 按钮 */
+.dialog-button {
+  flex: 1;
+  padding: 30rpx;
+  border: none;
+  background: none;
+  font-size: 32rpx;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+/* 全宽按钮 */
+.dialog-button-full {
+  width: 100%;
+}
+
+/* 取消按钮 */
+.dialog-button-cancel {
+  color: #666;
+}
+
+.dialog-button-cancel:hover {
+  background-color: #f5f5f5;
+}
+
+/* 主要按钮 */
+.dialog-button-primary {
+  color: #1989fa;
+}
+
+.dialog-button-primary:hover {
+  background-color: #f0f9ff;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,106 @@
+<template>
+  <view
+    class="sw-divider"
+    :class="[
+      { 'is-vertical': vertical },
+      { 'is-dashed': dashed },
+      { [`sw-divider--${position}`]: position !== 'center' },
+    ]"
+  >
+    <text v-if="$slots.default" class="sw-divider__text">
+      <slot />
+    </text>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface DividerProps {
+  // 是否为垂直分隔线
+  vertical?: boolean
+  // 是否为虚线
+  dashed?: boolean
+  // 文本位置，可选值为 left、center、right
+  position?: 'left' | 'center' | 'right'
+  // 自定义类名
+  customClass?: string
+  // 自定义样式
+  customStyle?: Record<string, any>
+}
+
+const props = withDefaults(defineProps<DividerProps>(), {
+  vertical: false,
+  dashed: false,
+  position: 'center',
+  customClass: '',
+  customStyle: () => ({}),
+})
+</script>
+
+<style scoped lang="less">
+// 主题色变量
+@primary-color: #409eff;
+@gray-3: #c0c4cc;
+
+// 基础样式
+.sw-divider {
+  background-color: @gray-3;
+  position: relative;
+  box-sizing: border-box;
+
+  &.is-vertical {
+    display: inline-block;
+    width: 2rpx;
+    height: 32rpx;
+    margin: 0 24rpx;
+    vertical-align: middle;
+  }
+
+  &:not(.is-vertical) {
+    width: 100%;
+    height: 2rpx;
+    margin: 32rpx 0;
+  }
+
+  &.is-dashed {
+    background: none;
+    border-top: 2rpx dashed @gray-3;
+  }
+
+  &__text {
+    position: absolute;
+    background-color: #fff;
+    padding: 0 32rpx;
+    font-size: 28rpx;
+    color: #606266;
+    transform: translateY(-50%);
+
+    &.is-vertical {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      padding: 32rpx 0;
+    }
+  }
+
+  &--left {
+    .sw-divider__text {
+      left: 0;
+      padding-left: 0;
+    }
+  }
+
+  &--center {
+    .sw-divider__text {
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+  }
+
+  &--right {
+    .sw-divider__text {
+      right: 0;
+      padding-right: 0;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,112 @@
+# DropdownSelect 使用指南
+
+**组件概述**
+- 基于 `Vant` 的 `DropdownMenu/DropdownItem` 封装的下拉选择组件
+- 支持双向绑定、图标自定义、插槽扩展
+- 组件入口：`src/components/DropdownSelect/index.vue`
+
+**快速使用**
+- 引入组件：`import DropdownSelect from "@/components/DropdownSelect"`
+- 基本用法
+```vue
+<template>
+  <DropdownSelect v-model="selectedType" :options="[
+    { text: '全部证件', value: '' },
+    { text: '身份证', value: 'ID_CARD' },
+    { text: '护照', value: 'PASSPORT' }
+  ]" />
+</template>
+<script setup lang="ts">
+import DropdownSelect from "@/components/DropdownSelect";
+import { ref } from "vue";
+const selectedType = ref('');
+</script>
+```
+
+**自定义图标（属性）**
+- 通过 `iconName` 指定 `Vant Icon` 名称
+```vue
+<DropdownSelect v-model="selectedType" icon-name="add-o" :options="[
+  { text: '全部应用', value: '' },
+  { text: '金融服务', value: 'ID_CARD' },
+  { text: '企业管理', value: 'PASSPORT' }
+]"/>
+```
+
+**自定义显示（默认插槽）**
+- 覆盖标题区域默认文本的展示
+```vue
+<DropdownSelect v-model="selectedType" :options="[
+  { text: '全部应用', value: '' },
+  { text: '金融服务', value: 'ID_CARD' },
+  { text: '企业管理', value: 'PASSPORT' }
+]">
+  <template #default="{ text }">
+    {{ text }}...
+  </template>
+</DropdownSelect>
+```
+
+**自定义图标（插槽）**
+- 使用插槽完全替换默认图标
+```vue
+<script setup lang="ts">
+import { Icon } from "vant";
+</script>
+<DropdownSelect v-model="selectedType" :options="[
+  { text: '全部应用', value: '' },
+  { text: '金融服务', value: 'ID_CARD' },
+  { text: '企业管理', value: 'PASSPORT' }
+]">
+  <template #icon>
+    <icon name="close" />
+  </template>
+</DropdownSelect>
+```
+
+**Props**
+- `modelValue`：`string | number`，当前选中值（双向绑定）
+- `iconName`：`string`，标题右侧图标名称，默认 `'arrow-down'`
+- `options`：`DropdownItemOption[]`（来自 `vant`），每项结构 `{ text: string; value: string | number }`
+- 定义位置：`src/components/DropdownSelect/type.ts:3-7`
+
+**Emits**
+- `update:modelValue`：选中项变更时触发，携带新值
+- `change`：透传 `vant` 的 `@change` 事件
+- 定义位置：`src/components/DropdownSelect/type.ts:8-11`
+
+**插槽**
+- `default`：用于自定义标题区域文本展示，插槽入参 `{ text }`
+- `icon`：用于自定义标题区域图标
+- 实现位置：`src/components/DropdownSelect/index.vue:5-16`
+
+**行为说明**
+- 标题中的文案选择逻辑：`dropdownSelect.ts:10-23`
+  - 有有效 `modelValue` 时，匹配 `options` 中对应项的 `text`
+  - 无有效 `modelValue` 时，显示 `options[0].text`，若无则显示“请选择”
+- 选中高亮绑定值：`dropdownSelect.ts:25-36`
+  - `internalValue` 用于高亮和选择，未提供 `modelValue` 时回落为第一个选项的 `value`
+- 图标旋转状态：`isOpen` 受 `open/close` 事件控制：`dropdownSelect.ts:42-47`
+- `change` 事件透传：`dropdownSelect.ts:38-40`
+
+**样式**
+- 样式文件：`src/components/DropdownSelect/dropdownSelect.less`
+- 根类名：`.dropdown-select`，标题包裹类 `.dropdown-title`，图标包裹类 `.dropdown-icon`（激活态加 `.is-active`）
+- 引入方式：`index.vue:35-36`
+
+**依赖**
+- `Vant`：`DropdownMenu`、`DropdownItem`、`Icon`
+- 使用位置：`src/components/DropdownSelect/index.vue:21-23`
+
+**Demo 参考**
+- 组件演示页面：`src/views/demo/dropdownSelect/index.vue:2-58`
+- 展示内容：
+  - 基础用法
+  - 通过 `iconName` 自定义图标
+  - 使用 `default` 插槽自定义显示文本
+  - 使用 `icon` 插槽自定义图标
+
+**最佳实践**
+- 始终为 `options` 提供稳定的 `value` 值，避免字符串与数字混用导致匹配失败
+- 若希望初始高亮特定项，请显式传入 `v-model` 的初始值
+- 使用插槽时，确保已引入并注册所需的图标组件（如 `Vant Icon`）

package/src/components/MyComs/DropdownSelect/dropdownSelect.less

@@ -0,0 +1,75 @@
+.dropdown-select {
+  background-color: rgba(0, 0, 0, 0);
+  display: inline-block;
+
+  // 触发器样式
+  .dropdown-trigger {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  // 标题样式
+  .dropdown-title {
+    display: flex;
+    align-items: center;
+    font-size: 28rpx;
+    color: #333;
+    line-height: 1.4;
+    padding: 8rpx;
+  }
+
+  // 文本样式
+  .dropdown-text {
+    flex: 1;
+  }
+
+  // 图标容器样式
+  .dropdown-icon {
+    padding-left: 16rpx;
+    font-size: 28rpx;
+    color: #999;
+    transition: transform 0.3s;
+
+    // 展开状态
+    &.is-active {
+      transform: rotate(180deg);
+    }
+  }
+
+  // 自定义箭头图标
+  .uni-icon {
+    width: 28rpx;
+    height: 28rpx;
+    position: relative;
+
+    &.arrow-down {
+      &:after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 0;
+        height: 0;
+        border-left: 8rpx solid transparent;
+        border-right: 8rpx solid transparent;
+        border-top: 8rpx solid #999;
+      }
+    }
+
+    &.arrow-up {
+      &:after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 0;
+        height: 0;
+        border-left: 8rpx solid transparent;
+        border-right: 8rpx solid transparent;
+        border-bottom: 8rpx solid #999;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+import type { DropdownSelectEmits, DropdownSelectProps } from './type'
+import { computed, ref } from 'vue'
+
+export function useDropdownSelect<T>(
+  props: DropdownSelectProps<T>,
+  emit: DropdownSelectEmits<T>,
+) {
+  // 控制箭头旋转状态
+  const isOpen = ref(false)
+  // 查找当前应显示的文本
+  const displayText = computed(() => {
+    if (!props.options?.length) {
+      return '请选择'
+    }
+    // 优先根据 modelValue 匹配
+    if (props.modelValue !== undefined && props.modelValue !== null) {
+      const matched = props.options.find(
+        opt => opt.value === props.modelValue,
+      )
+      if (matched)
+        return matched.text
+    }
+    // 无有效 modelValue 时，默认显示第一项文本（仅 UI 展示）
+    return props.options[0]?.text || '请选择'
+  })
+  // 内部绑定值：用于控制 Vant 选中高亮
+  const internalValue = computed({
+    get() {
+      if (props.modelValue !== undefined && props.modelValue !== null) {
+        return props.modelValue
+      }
+      // 无外部值时，返回第一个选项的 value（仅用于 UI 高亮，不 emit）
+      return props.options?.[0]?.value ?? ''
+    },
+    set(val) {
+      emit('update:modelValue', val as T)
+    },
+  })
+  // 事件处理
+  const handleChange = (value: T) => {
+    emit('change', value)
+  }
+
+  const handleOpen = () => {
+    isOpen.value = true
+  }
+  const handleClose = () => {
+    isOpen.value = false
+  }
+
+  return {
+    displayText,
+    internalValue,
+    isOpen,
+    handleChange,
+    handleOpen,
+    handleClose,
+  }
+}

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

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