wui-components-v2 1.0.13 → 1.0.14

package/components/global-toast/GlobalToast.md

@@ -0,0 +1,261 @@
+# GlobalToast 全局提示组件
+
+## 概述
+
+GlobalToast 是基于 `wot-design-uni` 的 `wd-toast` 组件封装的全局提示组件，通过 Pinia 状态管理实现全局调用。
+
+## 组件特性
+
+- 基于 `wd-toast` 组件封装
+- 支持多种提示类型：成功、错误、信息、警告
+- 自动页面路径检测，确保在正确页面显示
+- 支持自定义图标、位置、持续时间等
+- 虚拟节点设计，不在 DOM 中创建额外层级
+
+## 安装使用
+
+### 1. 注册全局组件
+
+在 `App.vue` 或根组件中注册：
+
+```vue
+<template>
+  <div>
+    <!-- 其他内容 -->
+    <GlobalToast />
+  </div>
+</template>
+```
+
+### 2. 在组件中使用
+
+```typescript
+import { useGlobalToast } from '@/composables/useGlobalToast'
+
+const toast = useGlobalToast()
+```
+
+## API 文档
+
+### 基础用法
+
+```typescript
+// 普通提示
+toast.show('这是一条提示信息')
+
+// 自定义配置
+toast.show({
+  msg: '自定义提示',
+  duration: 3000,
+  position: 'top'
+})
+```
+
+### 快捷方法
+
+#### success(option)
+成功提示，显示绿色成功图标
+
+```typescript
+toast.success('操作成功')
+toast.success({
+  msg: '保存成功',
+  duration: 2000
+})
+```
+
+**默认配置：**
+- 图标：success
+- 持续时间：1500ms
+
+#### error(option)
+错误提示，显示红色错误图标
+
+```typescript
+toast.error('操作失败')
+toast.error({
+  msg: '网络错误，请重试',
+  duration: 3000
+})
+```
+
+**默认配置：**
+- 图标：error
+- 方向：vertical（垂直布局）
+
+#### info(option)
+信息提示，显示蓝色信息图标
+
+```typescript
+toast.info('这是一条信息')
+toast.info({
+  msg: '请注意查看',
+  position: 'top'
+})
+```
+
+**默认配置：**
+- 图标：info
+
+#### warning(option)
+警告提示，显示黄色警告图标
+
+```typescript
+toast.warning('警告信息')
+toast.warning({
+  msg: '请谨慎操作',
+  iconName: 'warning'
+})
+```
+
+**默认配置：**
+- 图标：warning
+
+#### close()
+手动关闭提示
+
+```typescript
+toast.close()
+```
+
+## 参数说明
+
+### ToastOptions
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| msg | string | - | 提示内容 |
+| duration | number | 2000 | 持续时间(ms)，0表示不自动关闭 |
+| position | string | 'middle' | 显示位置：'top' \| 'middle' \| 'bottom' |
+| iconName | string | - | 图标名称 |
+| direction | string | - | 布局方向：'horizontal' \| 'vertical' |
+| cover | boolean | false | 是否显示遮罩 |
+| show | boolean | - | 是否显示（内部使用） |
+
+### 方法参数
+
+所有方法都支持两种参数类型：
+
+1. **字符串参数**：直接传入提示文本
+2. **选项对象**：传入完整的 ToastOptions 配置
+
+## 使用示例
+
+### 基础示例
+
+```typescript
+export default {
+  setup() {
+    const toast = useGlobalToast()
+
+    const handleSuccess = () => {
+      toast.success('操作成功！')
+    }
+
+    const handleError = () => {
+      toast.error('操作失败，请重试')
+    }
+
+    const handleCustom = () => {
+      toast.show({
+        msg: '自定义提示',
+        duration: 5000,
+        position: 'top',
+        iconName: 'info'
+      })
+    }
+
+    return {
+      handleSuccess,
+      handleError,
+      handleCustom
+    }
+  }
+}
+```
+
+### 异步操作示例
+
+```typescript
+async function handleSubmit() {
+  const toast = useGlobalToast()
+
+  try {
+    // 提交数据
+    await submitData()
+    toast.success('提交成功')
+  }
+  catch (error) {
+    toast.error(`提交失败：${error.message}`)
+  }
+}
+```
+
+### 长文本提示
+
+```typescript
+function showLongMessage() {
+  toast.info({
+    msg: '这是一条很长的提示信息，可能需要更长的显示时间',
+    duration: 4000,
+    position: 'top'
+  })
+}
+```
+
+## 实现原理
+
+### 状态管理
+- 使用 Pinia 管理全局状态
+- 状态包含：`toastOptions`（提示配置）、`currentPage`（当前页面路径）
+
+### 页面检测机制
+- 调用提示方法时记录当前页面路径
+- 组件监听状态变化时验证页面路径
+- 确保提示信息在正确的页面显示
+
+### 组件配置
+```typescript
+export default {
+  options: {
+    virtualHost: true, // 虚拟节点
+    addGlobalClass: true, // 支持全局样式
+    styleIsolation: 'shared' // 样式隔离共享
+  }
+}
+```
+
+## 最佳实践
+
+1. **选择合适的提示类型**
+   - 成功操作使用 `success()`
+   - 错误信息使用 `error()`
+   - 一般信息使用 `info()`
+   - 警告信息使用 `warning()`
+
+2. **控制显示时长**
+   - 简短消息：1500-2000ms
+   - 长消息：3000-4000ms
+   - 重要消息：可设置为0，用户手动关闭
+
+3. **位置选择**
+   - 一般提示：middle（默认）
+   - 不遮挡内容：top 或 bottom
+   - 重要提示：middle + cover
+
+4. **避免频繁调用**
+   ```typescript
+   // ❌ 避免快速连续调用
+   toast.success('第一条')
+   toast.success('第二条') // 会覆盖第一条
+
+   // ✅ 推荐做法
+   toast.success('操作完成')
+   ```
+
+## 注意事项
+
+1. 组件需要在应用根组件中注册才能正常使用
+2. 提示会自动在对应页面显示，切换页面时会自动关闭
+3. 同时只能显示一个提示，新的提示会覆盖旧的提示
+4. 使用 `duration: 0` 时记得手动调用 `close()` 关闭

package/components/global-toast/global-toast.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { useToast } from 'wot-design-uni'
+import { defineOptions, nextTick, ref, watch } from 'vue'
+import { useGlobalToast } from '../../composables/useGlobalToast'
+import { getCurrentPath } from '../../utils/index'
+
+defineOptions({
+  name: 'GlobalToast',
+})
+
+const { toastOptions, currentPage } = storeToRefs(useGlobalToast())
+
+const { close: closeGlobalToast } = useGlobalToast()
+
+const toast = useToast('globalToast')
+const currentPath = getCurrentPath()
+
+// #ifdef MP-ALIPAY
+const hackAlipayVisible = ref(false)
+
+nextTick(() => {
+  hackAlipayVisible.value = true
+})
+// #endif
+
+watch(() => toastOptions.value, (newVal) => {
+  if (newVal && newVal.show) {
+    if (currentPage.value === currentPath) {
+      toast.show(toastOptions.value)
+    }
+  }
+  else {
+    toast.close()
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<template>
+  <!-- #ifdef MP-ALIPAY -->
+  <wd-toast v-if="hackAlipayVisible" selector="globalToast" :closed="closeGlobalToast" />
+  <!-- #endif -->
+  <!-- #ifndef MP-ALIPAY -->
+  <wd-toast selector="globalToast" :closed="closeGlobalToast" />
+  <!-- #endif -->
+</template>

package/components/login/login.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { defineOptions } from 'vue'
+import LoginForm from '../login-form/login-form.vue'
+
+defineOptions({
+  name: 'Login',
+})
+</script>
+
+<template>
+  <view class="pa-3">
+    <view class="flex flex-col items-center justify-center pa-3 pb-5">
+      <wd-img :width="100" :height="100" round src="../../../static/vite.png" />
+      <view class="text-center">
+        <text class="text-2xl">
+          欢迎登录
+        </text>
+      </view>
+    </view>
+    <LoginForm />
+  </view>
+</template>

package/components/login-form/login-form.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { defineOptions } from 'vue'
+import { useRouter } from 'uni-mini-router'
+import { useGlobalToast } from '../../composables/useGlobalToast'
+import { getUserConfig, login } from '../../api/login'
+import { useUser } from '../../composables/useUser'
+
+defineOptions({
+  name: 'LoginForm',
+})
+const router = useRouter()
+const toast = useGlobalToast()
+const { setUserInfo } = useUser()
+const model = reactive<{
+  name: string
+  password: string
+  remember: boolean
+}>({
+  name: uni.getStorageSync('USER_NAME') || '',
+  password: uni.getStorageSync('USER_PASSWORD') || '',
+  remember: uni.getStorageSync('REMEMBER') || false,
+})
+const { setTabbarItemActive } = useTabbar()
+const form = ref()
+
+function handleSubmit() {
+  form.value
+    .validate()
+    .then(async ({ valid, errors }: any) => {
+      if (valid) {
+        try {
+          // 登录
+          const res = await login(model.name, model.password)
+
+          if (res.token) {
+            // 保存token
+            uni.setStorageSync('TOKEN', res.token)
+            // 获取用户配置
+            const res1 = await getUserConfig()
+            if (res1.status === 'success') {
+              // 保存用户信息
+              setUserInfo(res1.user)
+
+              // 记住账号密码
+              if (model.remember) {
+                uni.setStorageSync('USER_NAME', model.name)
+                uni.setStorageSync('USER_PASSWORD', model.password)
+                uni.setStorageSync('REMEMBER', model.remember)
+              }
+              else {
+                // 删除账号密码
+                uni.removeStorageSync('USER_NAME')
+                uni.removeStorageSync('USER_PASSWORD')
+                uni.removeStorageSync('REMEMBER')
+              }
+
+              // 跳转首页
+              router.pushTab('/pages/index/index')
+              setTabbarItemActive('index')
+              toast.success({ msg: '登录成功！' })
+            }
+          }
+          else {
+            toast.error({ msg: res.message })
+          }
+        }
+        catch (error) {
+          console.log(error, 'error')
+        }
+      }
+      else {
+        console.log(errors, 'errors')
+      }
+    })
+    .catch((error: any) => {
+      console.log(error, 'error')
+    })
+}
+</script>
+
+<template>
+  <view class="border-rd-2 bg-white pa-3 dark:bg-[var(--wot-dark-background2)]">
+    <wd-form ref="form" :model="model">
+      <wd-cell-group border>
+        <wd-input
+          v-model="model.name" label="用户名" label-width="100px" prop="name" clearable placeholder="请输入用户名"
+          :rules="[{ required: true, message: '请填写用户名' }]"
+        />
+        <wd-input
+          v-model="model.password" label="密码" label-width="100px" prop="password" show-password clearable
+          placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]"
+        />
+        <view class="p-4 pb-0 pt-0">
+          <wd-checkbox v-model="model.remember" shape="square">
+            记住密码
+          </wd-checkbox>
+        </view>
+      </wd-cell-group>
+      <view class="p-4">
+        <wd-button block @click="handleSubmit">
+          登录
+        </wd-button>
+      </view>
+    </wd-form>
+  </view>
+</template>

package/components/menus/menus.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { computed, defineOptions, defineProps, onMounted, ref } from 'vue'
+import { useRouter } from 'uni-mini-router'
+import { useGlobalToast } from '../../composables/useGlobalToast'
+import { menu } from '../../api/menu'
+import demoBlock from '../demo-block/demo-block.vue'
+
+defineOptions({
+  name: 'Menus',
+})
+const props = defineProps({
+  icons: {
+    type: Array as PropType<Icon[]>,
+    default: () => [],
+  },
+  load: {
+    type: Function as PropType<() => void>,
+    default: () => {},
+  },
+})
+// const router = useRouter()
+// const toast = useGlobalToast()
+interface Icon {
+  id: string
+  path: string
+}
+const menuList = ref([])
+const title = ref('')
+const filtermenu = computed(() => {
+  const arr = filterHiddenTree(menuList.value, 'items', true)
+  console.log(arr)
+  return arr
+})
+const sheetShow = ref(false)
+const actions = ref([])
+const paging = ref()
+
+// 点击菜单跳转页面
+function gotoPage(item: any) {
+  // 跳转页面
+  if (goto(item))
+    return
+  // 打开动作面板
+  openSheet(item)
+}
+
+// 点击动作面板跳转页面
+function sheetGotoPage(item: any) {
+  // 跳转页面
+  if (goto(item))
+    return
+  // 打开动作面板
+  openSheet(item, 300)
+}
+
+// 跳转页面
+function goto(item: any) {
+  return
+  console.log(item.pageType)
+  switch (item.pageType) {
+    case '列表':
+      if (item.customPath) {
+        uni.navigateTo({
+          url: `/${item.customPath}`,
+        })
+      }
+      else {
+        uni.navigateTo({
+          url: `/pages/table/table?sourceId=${item.id}&pageTitle=${item.title}`,
+        })
+      }
+
+      return true
+
+    case '报表':
+      uni.navigateTo({
+        url: `/pages/report-table/report-table?sourceId=${item.id}&pageTitle=${item.title}`,
+      })
+      return true
+
+    default:
+
+      return false
+  }
+}
+
+// 打开wd-action-sheet动作面板
+function openSheet(item: any, s = 0) {
+  if (item.items) {
+    title.value = item.title
+    actions.value = item.items
+      ? item.items.map((item: any) => {
+          return {
+            name: item.title,
+            // color: '#00000073',
+            ...item,
+          }
+        })
+      : []
+
+    // 设置二次打开的过渡时间
+    const id = setTimeout(() => {
+      sheetShow.value = true
+      clearTimeout(id)
+    }, s)
+  }
+}
+
+/**
+ * 根据 `disabled: true` 过滤树形数组（支持自定义子节点字段）
+ * @param {Array} tree 原始树形数据
+ * @param {string} [childKey] 子节点字段名
+ * @param {boolean} [deepClone] 是否深拷贝原数据
+ * @returns {Array} 过滤后的新树形数据
+ */
+function filterHiddenTree(tree: any, childKey = 'children', deepClone = false) {
+  // 深拷贝处理（可选）
+  const clone = (data: any) => {
+    if (!deepClone)
+      return data
+    return JSON.parse(JSON.stringify(data))
+  }
+
+  return clone(tree)
+    .filter((node: any) => !node.disabled) // 过滤当前层隐藏节点
+    .map((node: any) => {
+      // 递归处理子节点
+      if (Array.isArray(node[childKey])) {
+        node[childKey] = filterHiddenTree(node[childKey], childKey, deepClone)
+      }
+      const icon = props.icons.find((item: any) => {
+        return item.id === node.id
+      })
+      return {
+        ...node,
+        iconPath: (icon as any)?.path,
+      }
+    })
+}
+
+// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
+function queryList() {
+  // 此处请求仅为演示，请替换为自己项目中的请求
+  menu().then((res: any) => {
+    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
+    paging.value.complete(res?.blocks || [])
+    // uni.setNavigationBarTitle({ title: res.data?.programName || '' })
+  }).catch((res: any) => {
+    // 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
+    // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
+    // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
+    console.log(res, 'menu error')
+    paging.value.complete(false)
+  })
+}
+</script>
+
+<template>
+  <z-paging ref="paging" v-model="menuList" class="z-99" :loading-more-enabled="false" @query="queryList" @on-refresh="props.load">
+    <template #top>
+      <slot name="top" />
+    </template>
+    <demoBlock v-for="(item, index) in filtermenu" :key="index" :title=" item.title " transparent>
+      <view class="border-rd-2 bg-white pa-1 dark:bg-[var(--wot-dark-background2)]">
+        <wd-grid :column="4" clickable>
+          <wd-grid-item v-for="(subItem, subIndex) in item.items" :key="subIndex" icon="picture" :text="subItem.title" @itemclick="gotoPage(subItem)" />
+        </wd-grid>
+      </view>
+    </demoBlock>
+    <wd-action-sheet
+      v-model="sheetShow"
+      :z-index="9999" :actions="actions" :title="title"
+      @select="({ item }) => { sheetGotoPage(item) }"
+    />
+    <template #bottom>
+      <slot name="bottom" />
+    </template>
+  </z-paging>
+</template>