uniapp-dyckui 4.1.1

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

@@ -0,0 +1,413 @@
+<template>
+  <view
+    class="sw-button" :class="[
+      `sw-button--${type}`,
+      `sw-button--${size}`,
+      `sw-button--${shape}`,
+      { 'is-disabled': disabled },
+      { 'is-loading': loading },
+      { 'is-block': block },
+      { 'is-round': round },
+      { 'is-plain': plain },
+      { 'is-outline': outline },
+      { 'is-link': link },
+    ]"
+    :disabled="disabled || loading"
+    @click="handleClick"
+  >
+    <!-- 加载动画 -->
+    <template v-if="loading">
+      <view class="sw-button__loading">
+        <text class="loading-spinner" />
+      </view>
+    </template>
+
+    <!-- 图标 -->
+    <template v-if="!loading">
+      <!-- 自定义图标插槽 -->
+      <view v-if="$slots.icon" class="sw-button__icon">
+        <slot name="icon" />
+      </view>
+      <!-- 传统图标类名方式 -->
+      <text v-if="icon" class="sw-button__icon" :class="[icon]" />
+    </template>
+
+    <!-- 文本内容 -->
+    <text v-if="$slots.default" class="sw-button__text">
+      <slot />
+    </text>
+  </view>
+</template>
+
+<script setup lang="ts">
+// 按钮类型
+type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+
+// 按钮尺寸
+type ButtonSize = 'large' | 'normal' | 'small' | 'mini'
+
+// 按钮形状
+type ButtonShape = 'default' | 'circle' | 'round'
+
+// 按钮样式
+type ButtonStyle = 'solid' | 'outline' | 'plain' | 'link'
+
+interface Props {
+  // 按钮类型
+  type?: ButtonType
+  // 按钮尺寸
+  size?: ButtonSize
+  // 按钮形状
+  shape?: ButtonShape
+  // 是否禁用
+  disabled?: boolean
+  // 是否加载中
+  loading?: boolean
+  // 是否为块级元素
+  block?: boolean
+  // 是否为圆形
+  round?: boolean
+  // 是否为朴素按钮
+  plain?: boolean
+  // 是否为描边按钮
+  outline?: boolean
+  // 是否为链接按钮
+  link?: boolean
+  // 图标类名
+  icon?: string
+  // 自定义类名
+  customClass?: string
+  // 自定义样式
+  customStyle?: Record<string, any>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  size: 'normal',
+  shape: 'default',
+  disabled: false,
+  loading: false,
+  block: false,
+  round: false,
+  plain: false,
+  outline: false,
+  link: false,
+  icon: '',
+  customClass: '',
+  customStyle: () => ({}),
+})
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void
+}>()
+
+function handleClick(event: MouseEvent) {
+  if (!props.disabled && !props.loading) {
+    emit('click', event)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+// 主题色变量
+@primary-color: #409eff;
+@success-color: #67c23a;
+@warning-color: #e6a23c;
+@danger-color: #f56c6c;
+@info-color: #909399;
+
+// 尺寸变量
+@button-height-large: 88rpx;
+@button-height-normal: 72rpx;
+@button-height-small: 60rpx;
+@button-height-mini: 48rpx;
+
+@button-padding-large: 0 48rpx;
+@button-padding-normal: 0 32rpx;
+@button-padding-small: 0 24rpx;
+@button-padding-mini: 0 16rpx;
+
+@button-font-size-large: 32rpx;
+@button-font-size-normal: 28rpx;
+@button-font-size-small: 26rpx;
+@button-font-size-mini: 24rpx;
+
+// 圆角变量
+@button-border-radius: 8rpx;
+@button-round-border-radius: 40rpx;
+@button-circle-border-radius: 50%;
+
+// 基础样式
+.sw-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  font-size: @button-font-size-normal;
+  font-weight: 400;
+  line-height: 1;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+  position: relative;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  // 文本样式
+  .sw-button__text {
+    display: inline-block;
+    line-height: 1;
+    vertical-align: middle;
+  }
+
+  // 图标样式
+  .sw-button__icon {
+    display: inline-block;
+    margin-right: 12rpx;
+    font-size: inherit;
+    line-height: inherit;
+    vertical-align: middle;
+  }
+
+  // 加载动画
+  .sw-button__loading {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 12rpx;
+    vertical-align: middle;
+
+    .loading-spinner {
+      display: inline-block;
+      width: 32rpx;
+      height: 32rpx;
+      border: 4rpx solid rgba(255, 255, 255, 0.3);
+      border-top-color: #fff;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+  }
+}
+
+// 按钮类型
+.sw-button--primary {
+  background-color: @primary-color;
+  color: #fff;
+}
+
+.sw-button--success {
+  background-color: @success-color;
+  color: #fff;
+}
+
+.sw-button--warning {
+  background-color: @warning-color;
+  color: #fff;
+}
+
+.sw-button--danger {
+  background-color: @danger-color;
+  color: #fff;
+}
+
+.sw-button--info {
+  background-color: @info-color;
+  color: #fff;
+}
+
+// 按钮尺寸
+.sw-button--large {
+  height: @button-height-large;
+  padding: @button-padding-large;
+  font-size: @button-font-size-large;
+  border-radius: @button-border-radius;
+}
+
+.sw-button--normal {
+  height: @button-height-normal;
+  padding: @button-padding-normal;
+  font-size: @button-font-size-normal;
+  border-radius: @button-border-radius;
+}
+
+.sw-button--small {
+  height: @button-height-small;
+  padding: @button-padding-small;
+  font-size: @button-font-size-small;
+  border-radius: @button-border-radius;
+}
+
+.sw-button--mini {
+  height: @button-height-mini;
+  padding: @button-padding-mini;
+  font-size: @button-font-size-mini;
+  border-radius: @button-border-radius;
+}
+
+// 按钮形状
+.sw-button--circle {
+  padding: 0;
+  border-radius: @button-circle-border-radius;
+
+  // 确保圆形按钮有固定的宽高
+  &.sw-button--large {
+    width: @button-height-large;
+  }
+
+  &.sw-button--normal {
+    width: @button-height-normal;
+  }
+
+  &.sw-button--small {
+    width: @button-height-small;
+  }
+
+  &.sw-button--mini {
+    width: @button-height-mini;
+  }
+
+  .sw-button__icon {
+    margin-right: 0;
+  }
+}
+
+.sw-button--round {
+  border-radius: @button-round-border-radius;
+}
+
+// 块级按钮
+.is-block {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+// 朴素按钮
+.is-plain {
+  background-color: #fff;
+
+  &.sw-button--primary {
+    color: @primary-color;
+    border: 1px solid @primary-color;
+  }
+
+  &.sw-button--success {
+    color: @success-color;
+    border: 1px solid @success-color;
+  }
+
+  &.sw-button--warning {
+    color: @warning-color;
+    border: 1px solid @warning-color;
+  }
+
+  &.sw-button--danger {
+    color: @danger-color;
+    border: 1px solid @danger-color;
+  }
+
+  &.sw-button--info {
+    color: @info-color;
+    border: 1px solid @info-color;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+  }
+}
+
+// 描边按钮
+.is-outline {
+  background-color: transparent;
+
+  &.sw-button--primary {
+    color: @primary-color;
+    border: 1px solid @primary-color;
+  }
+
+  &.sw-button--success {
+    color: @success-color;
+    border: 1px solid @success-color;
+  }
+
+  &.sw-button--warning {
+    color: @warning-color;
+    border: 1px solid @warning-color;
+  }
+
+  &.sw-button--danger {
+    color: @danger-color;
+    border: 1px solid @danger-color;
+  }
+
+  &.sw-button--info {
+    color: @info-color;
+    border: 1px solid @info-color;
+  }
+}
+
+// 链接按钮
+.is-link {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  height: auto;
+  line-height: inherit;
+
+  &.sw-button--primary {
+    color: @primary-color;
+  }
+
+  &.sw-button--success {
+    color: @success-color;
+  }
+
+  &.sw-button--warning {
+    color: @warning-color;
+  }
+
+  &.sw-button--danger {
+    color: @danger-color;
+  }
+
+  &.sw-button--info {
+    color: @info-color;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+// 禁用状态
+.is-disabled {
+  opacity: 0.6;
+}
+
+// 加载状态
+.is-loading {
+  .sw-button__text {
+    display: none;
+  }
+
+  .sw-button__loading {
+    margin-right: 0;
+  }
+}
+
+// 动画
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

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

@@ -0,0 +1,160 @@
+# Dialog 弹窗组件
+
+## 组件名称
+Dialog 弹窗组件
+
+## 详细功能描述
+该组件是一个移动端H5页面的弹窗组件，主要用于展示提示信息并提供用户交互按钮。组件支持三种类型的弹窗，具有统一的视觉风格和动画效果。
+
+## 主要功能类型
+1. **取消和打开app** - 提供取消和打开app两个按钮
+2. **知道了** - 提供单个确认按钮
+3. **取消和继续访问** - 提供取消和继续访问两个按钮
+
+## 组件结构
+- **上部分**：居中显示图标、提示标题和说明文字
+- **下部分**：根据弹窗类型显示不同的按钮组合
+- **背景**：采用assets/u2.png作为背景图
+- **样式**：弹窗圆角、上下部分用灰色分割线分隔
+- **动画**：采用缩放动画形式，居中显示
+
+## 属性参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+| ------ | ---- | ------ | ---- |
+| modelValue | Boolean | false | 控制弹窗显示/隐藏（支持v-model） |
+| type | String | 'confirm' | 弹窗类型：open-app(取消和打开app), confirm(知道了), continue(取消和继续访问) |
+| title | String | '' | 弹窗标题 |
+| description | String | '' | 弹窗说明文字 |
+| icon | String | '' | 图标路径 |
+| mask | Boolean | true | 是否显示遮罩层 |
+| maskOpacity | Number | 0.5 | 遮罩层透明度（0-1） |
+| closeOnMaskClick | Boolean | true | 点击遮罩是否关闭弹窗 |
+
+## 事件回调
+
+| 事件名 | 说明 |
+| ------ | ---- |
+| update:modelValue | v-model双向绑定事件 |
+| confirm | 点击确认按钮（知道了/打开app/继续访问）时触发 |
+| cancel | 点击取消按钮时触发 |
+
+## 使用示例代码片段
+
+### 基本使用
+```vue
+<template>
+  <button @click="showDialog = true">打开弹窗</button>
+  
+  <Dialog v-model="showDialog" title="提示" description="这是一个提示信息">
+  </Dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Dialog from '@/components/MyComs/Dialog/index.vue'
+
+const showDialog = ref(false)
+</script>
+```
+
+### 类型1: 取消和打开app
+```vue
+<template>
+  <button @click="showOpenAppDialog = true">打开app弹窗</button>
+  
+  <Dialog 
+    v-model="showOpenAppDialog" 
+    type="open-app" 
+    title="打开app" 
+    description="建议您使用app进行操作，体验更佳"
+    @confirm="handleOpenApp"
+    @cancel="handleCancel"
+  >
+  </Dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Dialog from '@/components/MyComs/Dialog/index.vue'
+
+const showOpenAppDialog = ref(false)
+
+const handleOpenApp = () => {
+  console.log('打开app')
+  // 打开app的逻辑
+}
+
+const handleCancel = () => {
+  console.log('取消')
+}
+</script>
+```
+
+### 类型2: 知道了
+```vue
+<template>
+  <button @click="showConfirmDialog = true">打开知道了弹窗</button>
+  
+  <Dialog 
+    v-model="showConfirmDialog" 
+    type="confirm" 
+    title="提示" 
+    description="您的操作已完成"
+    @confirm="handleConfirm"
+  >
+  </Dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Dialog from '@/components/MyComs/Dialog/index.vue'
+
+const showConfirmDialog = ref(false)
+
+const handleConfirm = () => {
+  console.log('知道了')
+}
+</script>
+```
+
+### 类型3: 取消和继续访问
+```vue
+<template>
+  <button @click="showContinueDialog = true">打开继续访问弹窗</button>
+  
+  <Dialog 
+    v-model="showContinueDialog" 
+    type="continue" 
+    title="提示" 
+    description="您即将离开当前页面，确定要继续访问吗？"
+    @confirm="handleContinue"
+    @cancel="handleCancel"
+  >
+  </Dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Dialog from '@/components/MyComs/Dialog/index.vue'
+
+const showContinueDialog = ref(false)
+
+const handleContinue = () => {
+  console.log('继续访问')
+  // 继续访问的逻辑
+}
+
+const handleCancel = () => {
+  console.log('取消')
+}
+</script>
+```
+
+## 注意事项
+1. 确保在使用v-model时正确绑定布尔值来控制弹窗的显示和隐藏
+2. 根据需要选择合适的弹窗类型
+3. 可以自定义图标路径，若不提供则显示默认图标
+4. 背景图采用assets/u2.png，确保该图片存在
+5. 弹窗使用缩放动画，提供流畅的视觉体验
+6. 弹窗居中显示，适配不同屏幕尺寸

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

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