hy-app 0.4.3 → 0.4.5

package/components/hy-form/README.md

@@ -1,301 +0,0 @@
-# 表单组件 (hy-form-simple)
-
-一个简单易用的表单组件，包含 `hy-form-simple` 和 `hy-form-item-simple` 两个组件，支持表单验证、数据绑定等功能。
-
-## 组件特性
-
-- ✅ 表单数据双向绑定
-- ✅ 表单验证（必填、长度、类型、自定义验证）
-- ✅ 实时验证和失焦验证
-- ✅ 支持多种表单控件
-- ✅ 灵活的标签布局
-- ✅ 错误信息显示
-- ✅ 表单重置和清除验证
-
-## 基础用法
-
-```vue
-<template>
-  <hy-form-simple
-    ref="formRef"
-    :model="formData"
-    :rules="rules"
-    label-width="80px"
-    @submit="handleSubmit"
-  >
-    <hy-form-item-simple label="用户名" prop="username" required>
-      <hy-input v-model="formData.username" placeholder="请输入用户名" />
-    </hy-form-item-simple>
-    
-    <hy-form-item-simple label="手机号" prop="phone" required>
-      <hy-input v-model="formData.phone" type="number" placeholder="请输入手机号" />
-    </hy-form-item-simple>
-    
-    <hy-form-item-simple label="性别" prop="gender">
-      <hy-radio v-model="formData.gender" :columns="genderOptions" />
-    </hy-form-item-simple>
-  </hy-form-simple>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref } from 'vue'
-
-const formData = reactive({
-  username: '',
-  phone: '',
-  gender: ''
-})
-
-const rules = {
-  username: [
-    { required: true, message: '请输入用户名' },
-    { min: 2, max: 20, message: '用户名长度在 2 到 20 个字符' }
-  ],
-  phone: [
-    { required: true, message: '请输入手机号' },
-    { type: 'phone', message: '请输入正确的手机号' }
-  ]
-}
-
-const formRef = ref()
-
-const handleSubmit = (data: any) => {
-  console.log('表单数据:', data)
-}
-</script>
-```
-
-## API
-
-### hy-form-simple Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| model | 表单数据对象 | `Record<string, any>` | `{}` |
-| rules | 验证规则 | `FormItemRule` | `{}` |
-| labelWidth | 标签宽度 | `string \| number` | `'auto'` |
-| labelPosition | 标签位置 | `'left' \| 'top'` | `'left'` |
-| labelAlign | 标签对齐方式 | `'left' \| 'center' \| 'right'` | `'left'` |
-
-### hy-form-simple Events
-
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| submit | 表单提交时触发 | `(data: Record<string, any>)` |
-| validate | 表单验证时触发 | `(valid: boolean, errors: Record<string, string>)` |
-
-### hy-form-simple Methods
-
-| 方法名 | 说明 | 参数 |
-|--------|------|------|
-| validate | 验证表单 | - |
-| resetFields | 重置表单 | - |
-| clearValidate | 清除验证 | `(fields?: string[])` |
-| submit | 提交表单 | - |
-
-### hy-form-item-simple Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| label | 标签文本 | `string` | `''` |
-| prop | 表单字段名 | `string` | `''` |
-| required | 是否必填 | `boolean` | `false` |
-| rules | 验证规则 | `any` | `{}` |
-
-### hy-form-item-simple Events
-
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| change | 值变化时触发 | `(value: any)` |
-| blur | 失焦时触发 | `(value: any)` |
-
-### hy-form-item-simple Methods
-
-| 方法名 | 说明 | 参数 |
-|--------|------|------|
-| validate | 验证字段 | `(trigger?: 'blur' \| 'change')` |
-| resetField | 重置字段 | - |
-| clearValidate | 清除验证 | - |
-
-## 验证规则
-
-### 基础验证
-
-```javascript
-const rules = {
-  username: [
-    { required: true, message: '请输入用户名' },
-    { min: 2, max: 20, message: '用户名长度在 2 到 20 个字符' }
-  ]
-}
-```
-
-### 类型验证
-
-```javascript
-const rules = {
-  phone: [
-    { required: true, message: '请输入手机号' },
-    { type: 'phone', message: '请输入正确的手机号' }
-  ],
-  email: [
-    { type: 'email', message: '请输入正确的邮箱格式' }
-  ],
-  password: [
-    { type: 'password', message: '密码格式不正确' }
-  ]
-}
-```
-
-### 自定义验证
-
-```javascript
-const rules = {
-  confirmPassword: [
-    { required: true, message: '请确认密码' },
-    {
-      validator: (value: string) => {
-        if (value !== formData.password) {
-          return '两次输入的密码不一致'
-        }
-        return true
-      }
-    }
-  ]
-}
-```
-
-### 触发时机
-
-```javascript
-const rules = {
-  username: [
-    { 
-      required: true, 
-      message: '请输入用户名',
-      trigger: ['blur', 'change'] // 失焦和变化时都验证
-    }
-  ]
-}
-```
-
-## 支持的表单控件
-
-- `hy-input` - 输入框
-- `hy-textarea` - 文本域
-- `hy-radio` - 单选框
-- `hy-check-button` - 选择按钮
-- `hy-switch` - 开关
-- `hy-picker` - 选择器
-- `hy-datetime-picker` - 时间选择器
-- `hy-address-picker` - 地址选择器
-- 其他自定义组件
-
-## 完整示例
-
-```vue
-<template>
-  <view class="form-demo">
-    <hy-form-simple
-      ref="formRef"
-      :model="formData"
-      :rules="rules"
-      label-width="100px"
-      label-position="left"
-      @submit="handleSubmit"
-    >
-      <hy-form-item-simple label="用户名" prop="username" required>
-        <hy-input v-model="formData.username" placeholder="请输入用户名" />
-      </hy-form-item-simple>
-      
-      <hy-form-item-simple label="手机号" prop="phone" required>
-        <hy-input v-model="formData.phone" type="number" placeholder="请输入手机号" />
-      </hy-form-item-simple>
-      
-      <hy-form-item-simple label="邮箱" prop="email">
-        <hy-input v-model="formData.email" placeholder="请输入邮箱" />
-      </hy-form-item-simple>
-      
-      <hy-form-item-simple label="性别" prop="gender">
-        <hy-radio v-model="formData.gender" :columns="genderOptions" />
-      </hy-form-item-simple>
-      
-      <hy-form-item-simple label="爱好" prop="hobbies">
-        <hy-check-button
-          v-model="formData.hobbies"
-          :columns="hobbyOptions"
-          select-type="multiple"
-        />
-      </hy-form-item-simple>
-      
-      <hy-form-item-simple label="备注" prop="remark">
-        <hy-textarea v-model="formData.remark" placeholder="请输入备注" />
-      </hy-form-item-simple>
-    </hy-form-simple>
-    
-    <view class="form-actions">
-      <hy-button type="primary" @click="handleSubmit">提交</hy-button>
-      <hy-button @click="handleReset">重置</hy-button>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref } from 'vue'
-
-const formData = reactive({
-  username: '',
-  phone: '',
-  email: '',
-  gender: '',
-  hobbies: [],
-  remark: ''
-})
-
-const rules = {
-  username: [
-    { required: true, message: '请输入用户名' },
-    { min: 2, max: 20, message: '用户名长度在 2 到 20 个字符' }
-  ],
-  phone: [
-    { required: true, message: '请输入手机号' },
-    { type: 'phone', message: '请输入正确的手机号' }
-  ],
-  email: [
-    { type: 'email', message: '请输入正确的邮箱格式' }
-  ]
-}
-
-const genderOptions = [
-  { text: '男', value: 'male' },
-  { text: '女', value: 'female' }
-]
-
-const hobbyOptions = [
-  { text: '阅读', value: 'reading' },
-  { text: '音乐', value: 'music' },
-  { text: '运动', value: 'sports' }
-]
-
-const formRef = ref()
-
-const handleSubmit = () => {
-  const result = formRef.value?.submit()
-  if (result) {
-    console.log('表单提交成功:', result)
-  }
-}
-
-const handleReset = () => {
-  formRef.value?.resetFields()
-}
-</script>
-```
-
-## 注意事项
-
-1. 表单组件使用 `provide/inject` 进行数据通信，确保 `hy-form-item-simple` 组件在 `hy-form-simple` 内部使用
-2. 验证规则支持数组形式，可以设置多个验证规则
-3. 自定义验证函数返回 `true` 表示验证通过，返回 `false` 或字符串表示验证失败
-4. 表单数据会自动双向绑定，无需手动处理数据同步
-5. 支持实时验证和失焦验证，可以通过 `trigger` 属性控制验证时机

package/components/yk-dialog/yk-dialog.vue

@@ -1,129 +0,0 @@
-<template>
-  <view class="promptBox">
-    <view class="prompt">
-      <image class="promptRipple" src="../../public/icons/warning.png"></image>
-
-      <view class="promptTit">
-        {{ title }}
-      </view>
-      <view class="promptDesc"> 我是内容 </view>
-      <view class="pBtnBox">
-        <button class="pBtnCancel" @click="onCancel">取消</button>
-        <button class="pBtnOk" @click="onOk('hahahhaah')">确定</button>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-
-const title = ref("我是标题");
-</script>
-
-<style lang="scss" scoped>
-.promptBox {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 9999;
-
-  .prompt {
-    position: fixed;
-    width: 300px;
-    height: 234px;
-    border-radius: 16px;
-    background: linear-gradient(180deg, #e3eeff 0%, #ffffff 100%);
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 100;
-    background-size: cover;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-
-    .promptRipple {
-      position: absolute;
-      top: -50px;
-      width: 100px;
-      height: 100px;
-      z-index: -1;
-    }
-
-    .promptIcon {
-      position: absolute;
-      top: 0;
-      transform: translateY(-50%);
-      width: 110px;
-      height: 110px;
-      border-radius: 90px;
-      overflow: hidden;
-      // background: linear-gradient(149.98deg, rgba(132, 181, 255, 1) 5.7%, rgba(33, 119, 250, 1) 90.23%);
-      // box-shadow: 0px 4px 10px rgba(18, 103, 232, 0.4);
-    }
-
-    .promptTit {
-      width: 80%;
-      font-size: 20px;
-      font-family: PingFang SC;
-      font-weight: 500;
-      color: rgba(0, 0, 0, 1);
-      text-align: center;
-      margin-top: 66px;
-    }
-
-    .promptDesc {
-      height: 40px;
-      margin-top: 12px;
-      color: rgba(102, 102, 102, 1);
-      font-family: PingFang SC;
-      font-size: 14px;
-      text-align: center;
-    }
-
-    .pBtnBox {
-      width: 280px;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      margin-top: 12px;
-
-      .pBtnOk {
-        width: 120px;
-        height: 44px;
-        line-height: 44px;
-        border-radius: 8px !important;
-        background: linear-gradient(
-          301.23deg,
-          rgba(71, 143, 253, 1) 0%,
-          rgba(18, 103, 232, 1) 102.96%
-        );
-        border: none;
-        color: #ffffff;
-        font-weight: 500;
-        font-size: 15px;
-      }
-
-      .pBtnCancel {
-        width: 120px;
-        height: 44px;
-        line-height: 44px;
-        border-radius: 8px;
-        background: rgba(224, 237, 255, 1);
-        color: rgba(18, 103, 232, 1);
-        font-weight: 500;
-        font-size: 15px;
-      }
-    }
-  }
-}
-
-button::after {
-  border: none;
-}
-</style>

package/composables/useToast.ts

@@ -1,51 +0,0 @@
-import type ToastOptions from "../components/hy-toast/typing";
-import { error } from "@/package";
-
-// 用于缓存全局唯一实例
-let toastInstance: any = null;
-
-/**
- * useToast 适用于任意页面直接调用 toast
- * 兼容 H5 + 微信小程序 + App
- */
-export const useToast = () => {
-  // 如果已经有实例，直接复用
-  if (toastInstance) return toastInstance;
-
-  const info = (msg: string, opt?: ToastOptions) =>
-    createToast({ message: msg, type: "info", ...opt });
-  const success = (msg: string, opt?: ToastOptions) =>
-    createToast({ message: msg, type: "success", ...opt });
-  const error = (msg: string, opt?: ToastOptions) =>
-    createToast({ message: msg, type: "error", ...opt });
-  const warning = (msg: string, opt?: ToastOptions) =>
-    createToast({ message: msg, type: "warning", ...opt });
-  const primary = (msg: string, opt?: ToastOptions) =>
-    createToast({ message: msg, type: "primary", ...opt });
-  const loading = (msg: string, opt?: ToastOptions) =>
-    createToast({ message: msg, loading: true, ...opt });
-  const close = (all?: boolean) => {
-    if (toastInstance && toastInstance.hide) toastInstance.hide();
-  };
-
-  return { info, success, error, warning, primary, loading, close };
-};
-
-/**
- * ✅ 实现
- * 由于小程序不支持动态 mount vue 组件
- * 所以需要依赖页面上放置 <HyToast ref="toastRef" /> 元素
- */
-function createToast(options: ToastOptions) {
-  const pages = getCurrentPages();
-  const currentPage = pages[pages.length - 1];
-  const vm = currentPage.$vm || currentPage;
-
-  // 确保页面有 ref="toastRef" 的 hy-toast
-  if (vm?.$refs?.toastRef) {
-    vm.$refs.toastRef.show(options);
-    toastInstance = vm.$refs.toastRef;
-  } else {
-    error('[useToast] 请在页面 template 中添加 <HyToast ref="toastRef" />');
-  }
-}

package/typing/modules/dialog.ts

@@ -1,17 +0,0 @@
-export interface ResultParam {
-  confirm: boolean; // 为 true 时，表示用户点击了确定按钮
-  cancel: boolean; // 为 true 时，表示用户点击了取消
-}
-
-export interface DialogParam {
-  icon?: string;
-  title?: string;
-  content?: string;
-  confirmText?: string;
-  cancelText?: string;
-  shape?: "circle" | "square";
-  confirmColor?: string;
-  cancelColor?: string;
-  showCancel?: boolean;
-  result?: Function; // 回调用户操作结果
-}