w-ui-v1 1.0.0

package/Locale.ts

@@ -0,0 +1,19 @@
+import { Locale } from 'wot-design-uni'
+// 引入英文语言包
+import enUS from 'wot-design-uni/locale/lang/en-US'
+// 引入中文语言包
+import zhCN from 'wot-design-uni/locale/lang/zh-CN'
+
+export function changeLanguage(lang: string = 'zh-CN') {
+  switch (lang) {
+    case 'en-US':
+      Locale.use('en-US', enUS)
+      break
+    case 'zh-CN':
+      Locale.use('zh-CN', zhCN)
+      break
+    default:
+      Locale.use('en-US', enUS)
+      break
+  }
+}

package/index.ts

@@ -0,0 +1,26 @@
+import type { App } from 'vue'
+import wLogin from './w-login/w-login.vue'
+import WMenu from './w-menu/w-menu.vue'
+import wSwitchLang from './w-switch-lang/w-switch-lang.vue'
+import WTable from './w-table/w-table.vue'
+import wTest from './w-test/w-test.vue'
+
+interface NamedComponent {
+  name: string
+  new (): any
+}
+const coms: NamedComponent[] = [
+  wTest,
+  wLogin,
+  wSwitchLang,
+  WMenu,
+  WTable,
+]
+// 批量组件注册
+function install(Vue: App) {
+  coms.forEach((com) => {
+    Vue.component(com.name, com)
+  })
+}
+
+export default install // 这个方法以后再使用的时候可以被vue.use调用

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "w-ui-v1",
+  "version": "1.0.0",
+  "description": "w-ui",
+  "author": "wgxshh",
+  "license": "ISC",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "wot-design-uni": "^1.7.0",
+    "z-paging": "^2.8.5"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.13",
+    "jsencrypt": "^3.3.2",
+    "lodash": "^4.17.21"
+  }
+}

package/utils/apis/login.ts

@@ -0,0 +1,42 @@
+import dayjs from 'dayjs'
+import timezone from 'dayjs/plugin/timezone'
+import utc from 'dayjs/plugin/utc'
+import request from '../http.js'
+import rsaEncrypt from '../rsaEncrypt.js'
+
+// 获取公钥
+export function pubKey() {
+  return request({
+    url: `/v3/auth/ras-pubkey`,
+  })
+}
+
+// 登录
+export function login(username: string, password: string, pubkey: string, kaptchaToken: string = '', kaptchaText: string = '') {
+  dayjs.extend(utc)
+  dayjs.extend(timezone)
+  const datetime = dayjs(new Date())
+    .tz('Europe/London')
+    .format('YYYY-MM-DD HH:mm:ss')
+  const json = {
+    username,
+    password,
+    datetime,
+  }
+  const userInfo = rsaEncrypt(JSON.stringify(json), pubkey)
+  return request({
+    url: `/v3/auth/hctoken`,
+    data: {
+      userInfo,
+      kaptchaToken,
+      kaptchaText,
+    },
+  })
+}
+// 获取验证码
+export function getKaptchaToken() {
+  return request({
+    url: `/v3/auth/kaptcha`,
+    method: 'POST',
+  })
+}

package/utils/apis/menu.ts

@@ -0,0 +1,7 @@
+import request from '../http.js'
+// 获取菜单
+export function menu() {
+  return request({
+    url: `/v3/menu/blocks?l2MenuId=&blockId=`,
+  })
+}

package/utils/apis/pageConfig.ts

@@ -0,0 +1,35 @@
+import request from '../http.js'
+// 列表页面详细配置
+export function pageConfig(sourceId: string) {
+  return request({
+    url: `/v3/ltmpl/config?sourceId=${sourceId}`,
+  })
+}
+
+// 添加页面详细配置
+export function addPageConfig(sourceId: string) {
+  return request({
+    url: `/v3/add-dtmpl/config?sourceId=${sourceId}`,
+  })
+}
+
+// 获取页面数据key
+export function getPageKey(sourceId: string, query: string) {
+  return request({
+    url: `/v3/ltmpl/query/key?sourceId=${sourceId}&menuId=${sourceId}&${query}`,
+  })
+}
+
+// 获取页面数据
+export function getPageData(queryKey: string, pageNo: number, pageSize: number) {
+  return request({
+    url: `/v3/ltmpl/query/data?queryKey=${queryKey}&pageNo=${pageNo}&pageSize=${pageSize}`,
+  })
+}
+
+// 获取当前页总条数
+export function getPageTotal(queryKey: string) {
+  return request({
+    url: `/v3/ltmpl/query/count?queryKey=${queryKey}`,
+  })
+}

package/utils/http.ts

@@ -0,0 +1,54 @@
+// 用promise 封装uni.request
+export default function request(options: any): Promise<any> {
+  const baseUrl = uni.getStorageSync('baseUrl') || '/'
+  const hydrocarbonProgramToken = uni.getStorageSync('hydrocarbonProgramToken') || ''
+  const token = uni.getStorageSync('token') || ''
+  const header = options.header || {}
+  return new Promise((resolve, reject) => {
+    uni.request({
+      url: baseUrl + options.url,
+      method: options.method || 'GET',
+      data: options.data || {},
+      header: {
+        'content-type': 'application/x-www-form-urlencoded',
+        'hydrocarbon-program-token': hydrocarbonProgramToken, // 项目code
+        'hydrocarbon-token': token, // 登录token
+        'hydrocarbon-client': 'MOBILE',
+        // #ifdef APP-PLUS
+        'hydrocarbon-app-version': '1.0.0',
+        // #endif
+        ...header,
+      },
+      dataType: 'json',
+      // #ifndef MP-WEIXIN
+      responseType: 'json',
+      // #endif
+      success: (res: any) => {
+        // 判断状态
+        if (res.statusCode >= 200 && res.statusCode < 300) {
+          resolve(res)
+        }
+        if (res.statusCode === 401) {
+          uni.showToast({ title: '登录过期，请重新登录', icon: 'none' })
+          uni.removeStorageSync('token')
+          uni.reLaunch({ url: '/pages/login/login' })
+          // TODO 401
+        }
+        if (res.statusCode === 404) {
+          uni.showToast({ title: '请求失败', icon: 'none' })
+          reject(res)
+          // TODO 404
+        }
+        if (res.statusCode === 500) {
+          uni.showToast({ title: '服务器错误', icon: 'none' })
+          reject(res)
+          // TODO 500
+        }
+      },
+      fail: (err: any) => {
+        uni.showToast({ title: '请求失败', icon: 'none' })
+        reject(err)
+      },
+    })
+  })
+}

package/utils/rsaEncrypt.ts

@@ -0,0 +1,10 @@
+import { JSEncrypt } from 'jsencrypt'
+
+// 加密
+function rsaEncrypt(word: string, keyStr: string) {
+  const encrypt = new JSEncrypt()
+  encrypt.setPublicKey(keyStr)
+  return encrypt.encrypt(word)
+}
+
+export default rsaEncrypt

package/w-login/w-login.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { useToast } from 'wot-design-uni'
+import { login, pubKey } from '../utils/apis/login'
+import WSwitchLang from '../w-switch-lang/w-switch-lang.vue'
+
+defineOptions({
+  name: 'WLogin',
+})
+// 定义props
+const props = defineProps({
+  // 定义属性
+  loginImge: {
+    type: String,
+    default: '',
+  },
+})
+onMounted(() => {
+  getPublicKey()
+})
+const { success: showSuccess, error: showError, loading: showLoading } = useToast()
+const pKey = ref('')
+const model = reactive<{
+  username: string
+  password: string
+}>({
+  username: '',
+  password: '',
+})
+
+const form = ref()
+
+// 获取公匙
+function getPublicKey() {
+  pubKey().then(({ data }: any) => {
+    pKey.value = data.rasPubkey
+  })
+}
+
+// 登录
+function handleLogin() {
+  showLoading('登录中...')
+  login(model.username, model.password, pKey.value).then(({ data }: any) => {
+    if (data.status === 'error') {
+      return showError(data.message)
+    }
+    showSuccess('登录成功')
+    uni.setStorageSync('token', data.token)
+    uni.reLaunch({
+      url: '/pages/index/index',
+    })
+  })
+}
+function handleSubmit() {
+  form.value
+    .validate()
+    .then(({ valid }: any) => {
+      if (valid) {
+        handleLogin()
+      }
+    })
+    .catch((error: any) => {
+      console.error(error, 'error')
+    })
+}
+</script>
+
+<template>
+  <view class="login">
+    <WSwitchLang />
+    <view v-if="props.loginImge" class="avatar">
+      <wd-img width="200rpx" height="200rpx" :src="props.loginImge">
+        <template #error>
+          <view class="error-wrap">
+            <wd-icon name="image" size="200rpx" color="#ccc" />
+          </view>
+        </template>
+      </wd-img>
+    </view>
+
+    <wd-form ref="form" :model="model">
+      <wd-cell-group>
+        <wd-input
+          v-model="model.username" label="用户名" label-width="100px" prop="username" 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: '请填写密码' }]"
+        />
+      </wd-cell-group>
+      <view class="footer">
+        <wd-button type="primary" block @click="handleSubmit">
+          登录
+        </wd-button>
+      </view>
+    </wd-form>
+    <wd-toast />
+  </view>
+</template>
+
+<style scoped lang="scss">
+.login {
+    .lang{
+          display: flex;
+          justify-content: flex-end;
+    }
+    .avatar {
+        display: flex;
+        justify-content: center;
+    }
+
+    .footer {
+        padding: 12px;
+    }
+}
+</style>

package/w-menu/w-menu.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import _ from 'lodash'
+import {
+  computed,
+  onMounted,
+  ref,
+} from 'vue'
+import { menu } from '../utils/apis/menu'
+
+defineOptions({
+  name: 'WMenu',
+})
+const menuList = ref([])
+const title = ref('')
+const filtermenu = computed(() => {
+  return filterHiddenTree(menuList.value, 'items', true)
+})
+const sheetShow = ref(false)
+const actions = ref([])
+const loading = ref(false)
+onMounted(() => {
+  getMenu()
+})
+
+// 获取菜单数据
+function getMenu() {
+  menu().then((res: any) => {
+    menuList.value = res.data.blocks
+  })
+}
+// 点击菜单跳转页面
+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) {
+  if (item.pageType) {
+    uni.navigateTo({
+      url: `/pages/table/table?sourceId=${item.id}&pageType=${item.pageType}`,
+      success() {
+        // 通过eventChannel向被打开页面传送数据
+        // res.eventChannel.emit('acceptDataFromOpenerPage', {
+        // data: _.cloneDeep(item)
+        // })
+      },
+      fail(res: any) {
+        console.error(res, 'err')
+      },
+    })
+    return true
+  }
+  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',
+            ..._.cloneDeep(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)
+      }
+      return node
+    })
+}
+</script>
+
+<template>
+  <view>
+    <view class="img_box">
+      <!-- <wd-img height="250rpx" width="100%" src="../../static/bar.png" /> -->
+    </view>
+    <view v-if="loading" class="loading_box">
+      <wd-loading />
+    </view>
+
+    <view v-else-if="filtermenu.length > 0">
+      <wd-card v-for="(item, index) in filtermenu" :key="index" :title="item.title">
+        <template #default>
+          <wd-grid :column="5">
+            <wd-grid-item
+              v-for="(subItem, subIndex) in item.items" :key="subIndex" icon="picture"
+              :text="subItem.title" @click="gotoPage(subItem)"
+            />
+          </wd-grid>
+        </template>
+      </wd-card>
+    </view>
+    <wd-status-tip v-else image="content" tip="暂无内容" />
+    <wd-action-sheet
+      v-model="sheetShow" :actions="actions" :title="title"
+      @select="({ item }) => { sheetGotoPage(item) }"
+    />
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.img_box {
+    padding: 25rpx;
+}
+
+.loading_box {
+    display: flex;
+    justify-content: center;
+}
+</style>

package/w-switch-lang/w-switch-lang.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 修正导入路径
+import { changeLanguage } from '../Locale'
+
+defineOptions({ name: 'WSwitchLang' })
+// 语言:zh-CN中文
+const lang = ref('zh-CN')
+const columns = ref([
+  {
+    label: '中文',
+    value: 'zh-CN',
+  },
+  {
+    label: 'English',
+    value: 'en-US',
+  },
+])
+function confirm() {
+// 修改语言
+  changeLanguage(lang.value)
+}
+</script>
+
+<template>
+  <view class="lang">
+    <view style="min-width: 300rpx;">
+      <wd-picker v-model="lang" label-width="40px" label="语言" size="mini" :columns="columns" @confirm="confirm" />
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+ .lang{
+          display: flex;
+          justify-content: flex-end;
+    }
+</style>

package/w-table/components/foldCardTemplate.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import {
+  computed,
+  defineProps,
+  ref,
+} from 'vue'
+
+const props = defineProps({
+  page: {
+    type: Object,
+    required: true,
+  },
+  itemData: {
+    type: Object,
+    required: true,
+  },
+})
+
+// 处理单项数据、配置
+const items = computed(() => {
+  return props.page.columns?.filter((item: any) => {
+    // 过滤掉操作列
+    return item.title !== '操作'
+  }).filter((item: any) => {
+    // 过滤掉title 中有 'y'字符的列
+    return !hasY(item.title)
+  }).map((item: any) => {
+    return {
+      title: item.title,
+      content: props.itemData?.fieldMap[item.id],
+      id: item.id,
+      mstrucId: item.mstrucId,
+      sourceId: item.sourceId,
+    }
+  }) || []
+})
+
+// 单项数据转换
+function getValue(content: any, title: any): any {
+  // 判断title 是否为字符串
+  if (typeof title === 'string') {
+    // 判断title 是否有 '时间'字符
+    if (title.includes('时间')) {
+      // 判断是否为数组
+      if (Array.isArray(content)) {
+        const newArr = content.map((item) => {
+          return formatTime(splitString(item))
+        })
+
+        // 数组转换为字符串
+        return newArr.join('，')
+      }
+      else {
+        return formatTime(content)
+      }
+    }
+  }
+
+  // 判断是否为数组
+  if (Array.isArray(content)) {
+    const newArr = content.map((item) => {
+      return splitString(item)
+    })
+
+    // 数组转换为字符串
+    return newArr.join('，')
+  }
+
+  // 判断是否为JSON字符串
+  if (typeof content === 'string' && content.startsWith('{') && content.endsWith('}')) {
+    // 解析JSON字符串
+    const obj = JSON.parse(content)
+    // 图片链接
+    if (obj.base?.path && (obj.base?.type.includes('jpg') || obj.base?.type.includes('png'))) {
+      return {
+        url: `/files${obj.base.path}`,
+        type: '图片',
+      }
+    }
+  }
+
+  // 根据content中 "@R@" 分割字符串，取最后一项
+  return splitString(content)
+}
+
+// 根据 "@R@" 分割字符串，取最后一项
+function splitString(str: string) {
+  // 判断是否为字符串类型
+  if (typeof str !== 'string') {
+    // 如果不是字符串类型，直接返回
+    return str
+  }
+
+  if (str) {
+    // 判断是否有 "@R@"
+    if (str.includes('@R@')) {
+      // 分割字符串
+      const splitStr = str.split('@R@')
+      // 返回分割后的数组的最后一项
+      return splitStr[splitStr.length - 1]
+    }
+    else {
+      // 返回原字符串
+      return str
+    }
+  }
+  // 返回原字符串
+  return str
+}
+
+// 判断字符串中是否存在'y'字符
+function hasY(str: string) {
+  // 判断是否为字符串
+  if (typeof str === 'string') {
+    return str.includes('y')
+  }
+  return false
+}
+
+// 格式化时间
+function formatTime(str: string) {
+  if (typeof str === 'string') {
+    // 去掉小数点
+    return str.split('.')[0]
+  }
+  return str
+}
+
+const isExpanded = ref(false)
+const defaultVisible = 4 // 默认显示行数量
+
+const visibleItems = computed(() => {
+  return isExpanded.value ? items.value : items.value.slice(0, defaultVisible)
+})
+
+const showMore = computed(() => {
+  return items.value.length > defaultVisible
+})
+
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value
+}
+</script>
+
+<template>
+  <wd-card :title="getValue(visibleItems[0]?.content, visibleItems[0]?.title) || ' '">
+    <view class="table_collapse">
+      <view v-for="(item, index) in visibleItems" :key="index" class="cloum">
+        <wd-row style="border-bottom:1px solid #e8e5e5;padding: 10rpx;">
+          <wd-col :span="6">
+            <view class="lable">
+              <text>{{ item.title }}:</text>
+            </view>
+          </wd-col>
+          <wd-col :span="18">
+            <wd-img
+              v-if="getValue(item.content, item.title)?.type === '图片'" width="100rpx" height="100rpx"
+              :src="getValue(item.content, item.title).url" :enable-preview="true"
+            />
+            <view v-else class="value">
+              {{ getValue(item.content, item.title) }}
+            </view>
+          </wd-col>
+        </wd-row>
+      </view>
+      <wd-button
+        v-if="showMore" type="icon" :icon="isExpanded ? 'arrow-up' : 'arrow-down'" size="small"
+        custom-class="expand-btn" @click="toggleExpand"
+      />
+    </view>
+    <template #footer>
+      <wd-button size="small" class="btn">
+        删除
+      </wd-button>
+      <wd-button size="small" class="btn">
+        编辑
+      </wd-button>
+    </template>
+  </wd-card>
+</template>
+
+<style lang="scss" scoped>
+.table_collapse {
+
+    color: #000;
+    background-color: #F8F8F8;
+    padding: 20rpx;
+
+    /* 添加过渡动画 */
+    .cloum {
+        transition: all 0.3s ease;
+        overflow: hidden;
+        max-height: 100px;
+        color: #3e3e3e;
+
+        .lable {
+            // font-weight: 600;
+            text-align: left;
+            margin-right: 20rpx;
+        }
+
+        .value {
+            color: #000;
+            // text-align: justify;  /* 文字两端对齐 */
+            // word-break: break-all; /* 强制英文/数字换行时断词 */
+            word-break: break-all;
+            /* 所有字符（包括中文）强制换行 */
+            white-space: normal;
+            /* 确保不保留空白符 */
+        }
+
+    }
+
+    position: relative; // 添加定位上下文
+    padding-bottom: 80rpx; // 为按钮预留空间
+
+    .expand-btn {
+        /* 尺寸调整 */
+        padding: 8rpx 20rpx;
+        font-size: 24rpx;
+        line-height: 1.2;
+
+        /* 定位调整 */
+        position: absolute;
+        right: 50%;
+        transform: translateX(50%);
+        bottom: 0;
+        width: auto !important;
+        margin-top: 0;
+
+        /* 视觉样式 */
+        // background: #ffffff;
+        // border: 1px solid #ebedf0;
+        // border-radius: 16rpx;
+        // box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+    }
+
+}
+
+.btn {
+    margin-left: 10rpx;
+}
+</style>

package/w-table/w-table.vue

@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { onLoad } from '@dcloudio/uni-app'
+import {
+  computed,
+  ref,
+} from 'vue'
+import {
+  getPageData,
+  getPageKey,
+  pageConfig,
+} from '../utils/apis/pageConfig'
+import foldCardTemplate from './components/foldCardTemplate.vue'
+
+defineOptions({
+  name: 'WTable',
+})
+
+// 搜索类型
+const searchType = ref('全部')
+// 搜索参数
+const searchParams = ref('')
+const searchVal = ref('')
+const sourceId = ref('')
+const pageData = ref<{
+  criterias: []
+  buttons: string[]
+}>({ criterias: [], buttons: [] })
+onLoad((option: any) => {
+  sourceId.value = option.sourceId || '405889315156828169'
+  getPageConfig()
+})
+// 获取页面配置
+function getPageConfig() {
+  pageConfig(sourceId.value).then((res: any) => {
+    pageData.value = res.data.ltmplConfig
+  })
+}
+// 搜索菜单数据
+const menu = computed(() => {
+  const menulist = pageData.value.criterias?.map((item: any) => {
+    return {
+      content: item.title,
+      id: item.id,
+      mstrucId: item.mstrucId,
+      sourceId: item.sourceId,
+    }
+  }) || []
+  menulist.unshift({
+    content: '全部',
+    id: '',
+    mstrucId: '',
+    sourceId: '',
+  })
+  return menulist
+})
+
+// 搜索类型切换
+function changeSearchType({ item }: any) {
+  searchType.value = item.content
+  searchParams.value = `c_${item.id}=`
+}
+
+// z-paging实例
+const paging = ref()
+// 列表数据 v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
+const dataList = ref([])
+
+// 点击搜索按钮
+function search() {
+  paging.value.reload() // 手动触发列表重新加载
+}
+
+// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
+async function queryList(pageNo: number, pageSize: number) {
+  // 此处请求仅为演示，请替换为自己项目中的请求
+  // request.queryList({ pageNo,pageSize }).then(res => {
+  // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
+  //     paging.value.complete(res.data.list);
+  // }).catch(res => {
+  // 如果请求失败写paging.value.complete(false);
+  //  注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
+  //  在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
+  // paging.value.complete(false);
+  // paging.value.reload() // 手动触发加载
+  // })
+  try {
+    let searchQuery = searchParams.value + searchVal.value
+    if (searchType.value === '全部') {
+      searchParams.value = ''
+      searchVal.value = ''
+      searchQuery = ''
+    }
+    const key = await getPageKey(sourceId.value, searchQuery)// 获取key
+    const data = await getPageData(key.data?.key, pageNo, pageSize)// 获取数据
+    // const count = await getPageTotal(key.data?.key)// 获取总数
+    paging.value.complete(data.data.entities)
+  }
+  catch (error) {
+    paging.value.complete(false)
+    console.error(error)
+  }
+}
+
+// 点击添加按钮
+function add() {
+  uni.navigateTo({
+    url: `/pages/dynamic/dynamic?sourceId=${sourceId.value}&pageType=新增列表数据&pageTitle=`,
+  })
+}
+</script>
+
+<template>
+  <z-paging ref="paging" v-model="dataList" :show-loading-more-when-reload="true" @query="queryList">
+    <template #top>
+      <view style="margin-bottom: 20rpx;">
+        <!-- 搜索框 -->
+        <wd-search v-model="searchVal" cancel-txt="搜索" @cancel="search">
+          <template #prefix>
+            <wd-popover mode="menu" :content="menu" @menuclick="changeSearchType">
+              <view class="search-type">
+                <text class="searchType">
+                  {{ searchType }}
+                </text>
+                <wd-icon custom-class="icon-arrow" name="fill-arrow-down" />
+              </view>
+            </wd-popover>
+          </template>
+        </wd-search>
+        <view class="buttons-box">
+          <!-- 添加按钮 -->
+          <wd-button v-if="pageData.buttons.includes('dtmplAdd')" type="icon" icon="add" @click="add" />
+        </view>
+      </view>
+    </template>
+    <!-- 卡片 -->
+    <foldCardTemplate v-for="(item, index) in dataList" :key="index" :page="pageData" :item-data="item" />
+  </z-paging>
+</template>
+
+<style scoped lang="scss">
+.search-type {
+    position: relative;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 8px 0 16px;
+}
+
+.search-type::after {
+    position: absolute;
+    content: '';
+    width: 1px;
+    right: 0;
+    top: 5px;
+    bottom: 5px;
+    background: rgba(0, 0, 0, 0.25);
+}
+
+.search-type {
+    :deep(.icon-arrow) {
+        display: inline-block;
+        font-size: 40rpx;
+        vertical-align: middle;
+
+    }
+}
+
+.searchType {
+    font-size: 30rpx;
+}
+
+.card_box {
+    margin-top: 20rpx;
+}
+
+.loading_box {
+    display: flex;
+    justify-content: center;
+    margin-top: 40rpx;
+}
+
+.buttons-box {
+    text-align: right;
+    background-color: #fff;
+}
+</style>

package/w-test/w-test.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'WTest', // 定义组件名称
+})
+</script>
+
+<template>
+  <view>
+    sadasd
+    <wd-button type="success">
+      成功按钮
+    </wd-button>
+  </view>
+</template>
+
+<style scoped lang="scss"></style>