@uxda/appkit 4.3.24 → 4.3.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.cursor/rules/nutshell.mdc +2166 -0
- package/.cursor/rules/project.mdc +209 -0
- package/.cursor/skills/appkit-build-update-component-rules/SKILL.md +49 -0
- package/{COMPONENT_USAGE.md → Appkit/347/273/204/344/273/266/344/275/277/347/224/250/350/247/204/345/210/231.md} +212 -11
- package/README.md +8 -1
- package/dist/index.js +4 -1
- package/package.json +1 -1
- package/src/payment/components/TradeView.vue +6 -2
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
---
|
|
2
|
+
alwaysApply: true
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Appkit 项目开发规范
|
|
6
|
+
|
|
7
|
+
> @uxda/appkit - 小程序应用开发包（组件库）
|
|
8
|
+
> 版本：见 package.json | 构建：Rollup | 支持：微信小程序、H5（Taro 环境）
|
|
9
|
+
|
|
10
|
+
## 📚 目录
|
|
11
|
+
|
|
12
|
+
- [技术栈](#技术栈)
|
|
13
|
+
- [目录结构](#目录结构)
|
|
14
|
+
- [编码规范](#编码规范)
|
|
15
|
+
- [命名规范](#命名规范)
|
|
16
|
+
- [构建与导出](#构建与导出)
|
|
17
|
+
- [注意事项](#注意事项)
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## 技术栈
|
|
22
|
+
|
|
23
|
+
**核心**: Vue 3 + TypeScript + SCSS，单文件组件（SFC）
|
|
24
|
+
|
|
25
|
+
**构建**: Rollup（`rollup -c rollup.config.mjs`），产出 `dist/index.js`、`dist/appkit.css`
|
|
26
|
+
|
|
27
|
+
**运行依赖**（宿主为 Taro 小程序/H5）:
|
|
28
|
+
- `@tarojs/taro`、`@tarojs/components` 等
|
|
29
|
+
- `@nutui/nutui-taro`、`@nutui/icons-vue-taro`
|
|
30
|
+
- `@uxda/nutshell`（详见 .cursor/rules/nutshell.mdc）
|
|
31
|
+
|
|
32
|
+
**工具库**: lodash-es、dayjs、validator、pako、dsbridge
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## 目录结构
|
|
37
|
+
|
|
38
|
+
```
|
|
39
|
+
src/
|
|
40
|
+
├── index.ts # 库入口，统一 export 各模块
|
|
41
|
+
├── Appkit.ts # 插件安装与全局配置
|
|
42
|
+
├── main.scss # 全局样式入口
|
|
43
|
+
├── global.ts
|
|
44
|
+
├── styles/ # 全局样式变量、字体等
|
|
45
|
+
├── utils/ # 工具函数
|
|
46
|
+
├── payment/ # 支付模块
|
|
47
|
+
│ ├── api/ # 接口与 endpoints
|
|
48
|
+
│ ├── components/ # TradeView、RechargeView、AmountPicker 等
|
|
49
|
+
│ ├── services/ # 支付、充值等业务服务
|
|
50
|
+
│ ├── index.ts
|
|
51
|
+
│ ├── types.ts
|
|
52
|
+
│ └── consts.ts
|
|
53
|
+
├── balance/ # 余额/账户模块
|
|
54
|
+
│ ├── api/
|
|
55
|
+
│ ├── components/
|
|
56
|
+
│ ├── index.ts
|
|
57
|
+
│ └── types.ts
|
|
58
|
+
├── notice/ # 消息通知模块
|
|
59
|
+
│ ├── api/
|
|
60
|
+
│ ├── components/
|
|
61
|
+
│ ├── index.ts
|
|
62
|
+
│ └── types.ts
|
|
63
|
+
├── user/ # 用户模块
|
|
64
|
+
│ ├── api/
|
|
65
|
+
│ ├── components/
|
|
66
|
+
│ ├── index.ts
|
|
67
|
+
├── register/ # 注册模块
|
|
68
|
+
│ ├── components/
|
|
69
|
+
│ └── index.ts
|
|
70
|
+
├── scenarios/ # 业务场景（如分享海报）
|
|
71
|
+
│ ├── components/
|
|
72
|
+
│ └── index.ts
|
|
73
|
+
├── shared/ # 跨模块共享
|
|
74
|
+
│ ├── components/ # AppDrawer、PageHeader、OCR 等
|
|
75
|
+
│ ├── composables/ # useAmount、useValidator、useWxAuth 等
|
|
76
|
+
│ ├── http/ # 请求封装
|
|
77
|
+
│ ├── weixin/ # 微信 JSSDK、支付
|
|
78
|
+
│ ├── tracking/ # 埋点指令与 SDK
|
|
79
|
+
│ └── index.ts
|
|
80
|
+
└── components/ # 通用基础组件（dd-*、bt-cropper 等）
|
|
81
|
+
├── dd-search/
|
|
82
|
+
├── dd-icon/
|
|
83
|
+
├── dd-skeleton/
|
|
84
|
+
├── dd-notice-bar/
|
|
85
|
+
├── dd-area/
|
|
86
|
+
├── dd-selector/
|
|
87
|
+
└── bt-cropper/
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
**组织规则**:
|
|
91
|
+
- 按业务域分模块（payment、balance、notice、user、register、scenarios）
|
|
92
|
+
- 每模块通过 `index.ts` 对外 export；组件在 `components/index.ts` 中具名导出
|
|
93
|
+
- 共享能力放在 `shared/`；与 UI 强相关的通用组件放在 `src/components/`
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
## 编码规范
|
|
98
|
+
|
|
99
|
+
### TypeScript
|
|
100
|
+
|
|
101
|
+
- 优先使用类型，避免 `any`；必要时用 `unknown` 或明确类型
|
|
102
|
+
- 使用 `interface` 定义对象类型，`type` 做联合/工具类型
|
|
103
|
+
- 布尔命名使用 `is`、`has`、`can` 等前缀；函数用动词开头
|
|
104
|
+
|
|
105
|
+
### Vue 3 Composition API
|
|
106
|
+
|
|
107
|
+
- 统一使用 `<script setup lang="ts">`
|
|
108
|
+
- 使用 `defineProps` / `defineEmits`（建议带类型）；可选 props 用 `?` 并配合 `withDefaults`
|
|
109
|
+
- 事件名在模板中使用 kebab-case
|
|
110
|
+
|
|
111
|
+
```vue
|
|
112
|
+
<script setup lang="ts">
|
|
113
|
+
interface Props {
|
|
114
|
+
title: string
|
|
115
|
+
count?: number
|
|
116
|
+
}
|
|
117
|
+
const props = withDefaults(defineProps<Props>(), { count: 0 })
|
|
118
|
+
|
|
119
|
+
const emit = defineEmits<{
|
|
120
|
+
(e: 'update:modelValue', v: string): void
|
|
121
|
+
(e: 'change'): void
|
|
122
|
+
}>()
|
|
123
|
+
</script>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
### 代码风格
|
|
127
|
+
|
|
128
|
+
- 单引号、2 空格缩进；风格与现有代码保持一致
|
|
129
|
+
- 组件文件 PascalCase（如 `TradeView.vue`）；目录/工具 kebab-case
|
|
130
|
+
|
|
131
|
+
### 组件文件结构
|
|
132
|
+
|
|
133
|
+
```vue
|
|
134
|
+
<template>...</template>
|
|
135
|
+
|
|
136
|
+
<script setup lang="ts">
|
|
137
|
+
// 1. 导入
|
|
138
|
+
// 2. 类型 / defineProps / defineEmits
|
|
139
|
+
// 3. 组合式函数与响应式数据
|
|
140
|
+
// 4. 计算属性与方法
|
|
141
|
+
// 5. 生命周期 / defineExpose（如有）
|
|
142
|
+
</script>
|
|
143
|
+
|
|
144
|
+
<style lang="scss" scoped>...</style>
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
---
|
|
148
|
+
|
|
149
|
+
## 命名规范
|
|
150
|
+
|
|
151
|
+
### 文件与目录
|
|
152
|
+
|
|
153
|
+
- **组件**: PascalCase - `UserInfo.vue`、`TradeView.vue`
|
|
154
|
+
- **基础组件目录**: kebab-case - `dd-skeleton/`、`dd-notice-bar/`
|
|
155
|
+
- **工具/类型**: kebab-case - `request-payment.ts`、`use-amount.ts`（或与现有 composables 一致用 camelCase 文件名）
|
|
156
|
+
|
|
157
|
+
### 变量与类型
|
|
158
|
+
|
|
159
|
+
- **常量**: UPPER_SNAKE_CASE
|
|
160
|
+
- **变量/函数**: camelCase
|
|
161
|
+
- **类型/接口**: PascalCase
|
|
162
|
+
|
|
163
|
+
### 样式
|
|
164
|
+
|
|
165
|
+
- 类名 kebab-case，可按 BEM 组织；避免与 NutUI/Nutshell 冲突，必要时加前缀
|
|
166
|
+
|
|
167
|
+
---
|
|
168
|
+
|
|
169
|
+
## 构建与导出
|
|
170
|
+
|
|
171
|
+
- **构建命令**: `npm run build`（即 `rollup -c rollup.config.mjs`）
|
|
172
|
+
- **入口**: `src/index.ts`；样式入口 `src/main.scss`，打包为 `dist/appkit.css`
|
|
173
|
+
- **对外导出**: 通过 `package.json` 的 `exports` 暴露 `"."` 和 `"./appkit.css"`；各业务模块在 `src/index.ts` 中 `export * from './payment'` 等
|
|
174
|
+
- **组件导出**: 各模块的 `components/index.ts` 仅导出需对宿主暴露的组件，内部使用的组件不导出
|
|
175
|
+
|
|
176
|
+
**文档同步**: 执行 `npm run build` 后，应同步更新根目录 `Appkit组件使用规则.md`（参见 .cursor/skills/appkit-build-update-component-rules）。
|
|
177
|
+
|
|
178
|
+
---
|
|
179
|
+
|
|
180
|
+
## 注意事项
|
|
181
|
+
|
|
182
|
+
### 运行环境
|
|
183
|
+
|
|
184
|
+
- 本库在 **Taro 小程序 / H5** 项目中通过 `App.use(AppKit, options)` 使用，依赖宿主提供 `app`、`tenant`、`token`、`baseUrl`、`401` 等配置
|
|
185
|
+
- 样式需考虑小程序无 `scoped` 的情况，使用唯一类名前缀避免污染
|
|
186
|
+
|
|
187
|
+
### 依赖说明
|
|
188
|
+
|
|
189
|
+
- Vue、Taro、NutUI、Nutshell 等为 `dependencies`，由宿主安装；本库不打包它们（Rollup `external`）
|
|
190
|
+
- 新增对外 API 或组件时，需在对应模块 `index.ts` 与根 `src/index.ts` 中补充 export，并视情况更新 `Appkit组件使用规则.md`
|
|
191
|
+
|
|
192
|
+
### Git 提交
|
|
193
|
+
|
|
194
|
+
- 建议使用约定式提交：`<type>(<scope>): <subject>`
|
|
195
|
+
- type: `feat`、`fix`、`docs`、`style`、`refactor`、`perf`、`test`、`chore`
|
|
196
|
+
- 示例：`feat(payment): TradeView 支持组合支付`
|
|
197
|
+
|
|
198
|
+
---
|
|
199
|
+
|
|
200
|
+
## 相关文档
|
|
201
|
+
|
|
202
|
+
- [Appkit 组件使用规则](../../Appkit组件使用规则.md)（项目根目录）
|
|
203
|
+
- [Nutshell UI 组件库](./nutshell.mdc)
|
|
204
|
+
- [Vue 3 文档](https://cn.vuejs.org/)
|
|
205
|
+
- [Taro 文档](https://taro-docs.jd.com/)
|
|
206
|
+
|
|
207
|
+
---
|
|
208
|
+
|
|
209
|
+
**最后更新**: 2025-02-05
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: appkit-build-update-component-rules
|
|
3
|
+
description: After running npm run build for @uxda/appkit, updates Appkit组件使用规则.md so the component usage doc stays in sync with the built package. Use when the user runs build, asks to update or sync component rules, or mentions keeping Appkit组件使用规则.md up to date.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Appkit 构建后更新组件使用规则
|
|
7
|
+
|
|
8
|
+
在项目执行 `npm run build` 后，同步更新根目录下的 `Appkit组件使用规则.md`，使文档与当前源码导出和组件 API 保持一致。
|
|
9
|
+
|
|
10
|
+
## 工作流程
|
|
11
|
+
|
|
12
|
+
按顺序执行：
|
|
13
|
+
|
|
14
|
+
1. **执行构建**
|
|
15
|
+
- 在项目根目录运行：`npm run build`
|
|
16
|
+
- 确认构建成功（无报错）
|
|
17
|
+
|
|
18
|
+
2. **收集当前组件导出**
|
|
19
|
+
- 扫描以下入口的**具名导出**（仅组件，不含 composables/services）：
|
|
20
|
+
- `src/payment/components/index.ts`
|
|
21
|
+
- `src/balance/components/index.ts`
|
|
22
|
+
- `src/notice/components/index.ts`
|
|
23
|
+
- `src/user/components/index.ts`
|
|
24
|
+
- `src/register/components/index.ts`
|
|
25
|
+
- `src/scenarios/components/index.ts`
|
|
26
|
+
- `src/shared/components/index.ts`（若文档中有「通用基础组件」则也对照 `src/components/` 下 dd-* 等）
|
|
27
|
+
- 按模块整理为：模块名 → 组件名列表
|
|
28
|
+
|
|
29
|
+
3. **对照并更新文档**
|
|
30
|
+
- 打开 `Appkit组件使用规则.md`，定位到「目录」部分（各模块下的链接列表）。
|
|
31
|
+
- **新增**：若某模块在源码中有导出但文档目录/正文没有的组件，在对应模块下增加目录项，并在文档正文中为该组件新增一节（至少包含：功能描述、导入方式、Props/Events/Slots 表）。
|
|
32
|
+
- **删除/弃用**：若文档中某组件在对应模块的 index 中已不再导出，从目录中移除该链接，正文中可保留并标注「已废弃」或删除该节（按项目习惯二选一）。
|
|
33
|
+
- **命名与锚点**：目录链接格式保持为 `[ComponentName - 中文描述](#componentname---中文描述)`，锚点使用小写+连字符，与现有文档风格一致。
|
|
34
|
+
|
|
35
|
+
4. **（可选）核对组件 API**
|
|
36
|
+
- 对文档中已有详细说明的组件，可对照其 Vue 文件中的 `defineProps` / `defineEmits` 与文档中的 Props/Events 表，若不一致则更新文档（类型、必填、默认值、说明）。
|
|
37
|
+
- 若组件仅有占位节（如“待补充”），可根据 Vue 源码补充 Props/Events/Slots 表。
|
|
38
|
+
|
|
39
|
+
## 文档结构约定
|
|
40
|
+
|
|
41
|
+
- 文档路径：项目根目录 `Appkit组件使用规则.md`。
|
|
42
|
+
- 目录按模块分组：支付模块 (Payment)、余额模块 (Balance)、消息通知模块 (Notice)、用户模块 (User)、注册模块 (Register)、业务场景 (Scenarios)、通用基础组件 (Components)。
|
|
43
|
+
- 每个组件一节，包含：功能描述、导入方式、Props 表、Events 表、Slots 表（如有）、使用示例、功能特性等；可随现有文档风格微调。
|
|
44
|
+
|
|
45
|
+
## 注意事项
|
|
46
|
+
|
|
47
|
+
- 仅以各模块的 `components/index.ts` 的**导出组件**为“当前应有”的清单；内部使用但未导出的组件（如 RightsPicker 仅在 TradeView 内用）是否写入文档由项目约定决定，本技能以导出清单为准做同步。
|
|
48
|
+
- 更新时保持现有 Markdown 格式与标题层级不变；新增小节时与同模块其他组件节的格式一致。
|
|
49
|
+
- 若构建失败，先解决构建问题再执行文档更新。
|
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
- [TradeView - 权益充值视图](#tradeview---权益充值视图)
|
|
9
9
|
- [RechargeView - 云豆充值视图](#rechargeview---云豆充值视图)
|
|
10
10
|
- [AmountPicker - 金额选择器](#amountpicker---金额选择器)
|
|
11
|
-
- [RightsPicker - 权益选择器](#rightspicker---权益选择器)
|
|
12
11
|
- [RechargeResult - 充值结果页](#rechargeresult---充值结果页)
|
|
13
12
|
- [UserAgreement - 用户协议](#useragreement---用户协议)
|
|
14
13
|
|
|
@@ -16,17 +15,27 @@
|
|
|
16
15
|
- [AccountView - 账户总览](#accountview---账户总览)
|
|
17
16
|
- [BalanceCard - 余额卡片](#balancecard---余额卡片)
|
|
18
17
|
- [BalanceReminder - 余额提醒](#balancereminder---余额提醒)
|
|
18
|
+
- [DateRange - 日期范围](#daterange---日期范围)
|
|
19
|
+
- [ListFilter - 列表筛选](#listfilter---列表筛选)
|
|
20
|
+
- [PromoterCard - 推广员卡片](#promotercard---推广员卡片)
|
|
19
21
|
|
|
20
22
|
### 消息通知模块 (Notice)
|
|
21
23
|
- [NoticeBanner - 通知横幅](#noticebanner---通知横幅)
|
|
22
24
|
- [NoticeList - 消息列表](#noticelist---消息列表)
|
|
25
|
+
- [NoticeList2 - 消息列表（二代）](#noticelist2---消息列表二代)
|
|
23
26
|
- [NoticeEntry - 消息入口](#noticeentry---消息入口)
|
|
24
|
-
- [NoticePopup - 通知弹窗](#noticepopup---通知弹窗)
|
|
25
27
|
|
|
26
28
|
### 用户模块 (User)
|
|
29
|
+
- [UserEntry - 用户入口](#userentry---用户入口)
|
|
27
30
|
- [UserInfo - 用户信息](#userinfo---用户信息)
|
|
28
31
|
- [UserAuth - 用户认证](#userauth---用户认证)
|
|
29
32
|
- [UserBinding - 账号绑定](#userbinding---账号绑定)
|
|
33
|
+
- [UserBindingSuccess - 绑定成功](#userbindingsuccess---绑定成功)
|
|
34
|
+
- [UserHeadCrop - 头像裁剪](#userheadcrop---头像裁剪)
|
|
35
|
+
- [UserFeedback - 用户反馈](#userfeedback---用户反馈)
|
|
36
|
+
- [UserFeedbackEntry - 反馈入口](#userfeedbackentry---反馈入口)
|
|
37
|
+
- [LoginSetting - 登录设置](#loginsetting---登录设置)
|
|
38
|
+
- [UserResourceEmpty - 资源空状态](#userresourceempty---资源空状态)
|
|
30
39
|
|
|
31
40
|
### 注册模块 (Register)
|
|
32
41
|
- [SelfRegistration - 自助注册](#selfregistration---自助注册)
|
|
@@ -304,6 +313,8 @@ const handleAmountChange = (index) => {
|
|
|
304
313
|
|
|
305
314
|
## RightsPicker - 权益选择器
|
|
306
315
|
|
|
316
|
+
**说明**: 本组件为内部组件，未从 `@uxda/appkit/payment` 直接导出，仅在 TradeView 等内部使用。
|
|
317
|
+
|
|
307
318
|
**功能描述**: 用于权益充值场景的权益套餐选择网格组件。
|
|
308
319
|
|
|
309
320
|
### 导入方式
|
|
@@ -821,6 +832,100 @@ const handleRecharge = () => {
|
|
|
821
832
|
|
|
822
833
|
---
|
|
823
834
|
|
|
835
|
+
## DateRange - 日期范围
|
|
836
|
+
|
|
837
|
+
**功能描述**: 底部弹窗形式的日期范围选择器，支持 v-model 绑定 `{ from, to }`（日期字符串 YYYY-MM-DD），点击区域打开日期筛选面板，选择完成后更新模型并触发 `complete`。
|
|
838
|
+
|
|
839
|
+
### 导入方式
|
|
840
|
+
|
|
841
|
+
```typescript
|
|
842
|
+
import { DateRange } from '@uxda/appkit/balance'
|
|
843
|
+
```
|
|
844
|
+
|
|
845
|
+
### Props
|
|
846
|
+
|
|
847
|
+
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|
|
848
|
+
|--------|------|------|--------|------|
|
|
849
|
+
| `modelValue` | `DateRangeModel` | ❌ | `{ from, to }`（最近一个月） | v-model 绑定的日期范围<br/>`DateRangeModel = { from: string, to: string }` |
|
|
850
|
+
|
|
851
|
+
### Events
|
|
852
|
+
|
|
853
|
+
| 事件名 | 参数类型 | 说明 |
|
|
854
|
+
|--------|----------|------|
|
|
855
|
+
| `complete` | `DateRangeModel` | 用户确认选择后触发，参数为当前选中的 `{ from, to }` |
|
|
856
|
+
| `reset` | - | 用户点击重置时触发 |
|
|
857
|
+
|
|
858
|
+
### Slots
|
|
859
|
+
|
|
860
|
+
无。
|
|
861
|
+
|
|
862
|
+
---
|
|
863
|
+
|
|
864
|
+
## ListFilter - 列表筛选
|
|
865
|
+
|
|
866
|
+
**功能描述**: 点击「筛选」打开底部筛选面板（ListFilterPicker），选择后通过 v-model 回写筛选结果，用于列表页的筛选入口。
|
|
867
|
+
|
|
868
|
+
### 导入方式
|
|
869
|
+
|
|
870
|
+
```typescript
|
|
871
|
+
import { ListFilter } from '@uxda/appkit/balance'
|
|
872
|
+
```
|
|
873
|
+
|
|
874
|
+
### Props
|
|
875
|
+
|
|
876
|
+
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|
|
877
|
+
|--------|------|------|--------|------|
|
|
878
|
+
| `modelValue` | `ListFilterValue` | ❌ | `{ type: '' }` | v-model 绑定的筛选值<br/>`ListFilterValue = { type: string }` |
|
|
879
|
+
|
|
880
|
+
### Events
|
|
881
|
+
|
|
882
|
+
| 事件名 | 参数类型 | 说明 |
|
|
883
|
+
|--------|----------|------|
|
|
884
|
+
| `update:modelValue` | `ListFilterValue` | 用户在筛选面板完成选择时触发，用于 v-model 同步 |
|
|
885
|
+
| `change` | - | 筛选变更时触发（与类型定义一致，可按需使用） |
|
|
886
|
+
|
|
887
|
+
### Slots
|
|
888
|
+
|
|
889
|
+
无。
|
|
890
|
+
|
|
891
|
+
---
|
|
892
|
+
|
|
893
|
+
## PromoterCard - 推广员卡片
|
|
894
|
+
|
|
895
|
+
**功能描述**: 展示推广员可提现余额、产品销售收益、分销返佣收益等信息的卡片；在「企业」场景且为管理员时支持个人/企业 Tab 切换，并支持点击跳转余额/收益/返佣页。
|
|
896
|
+
|
|
897
|
+
### 导入方式
|
|
898
|
+
|
|
899
|
+
```typescript
|
|
900
|
+
import { PromoterCard } from '@uxda/appkit/balance'
|
|
901
|
+
```
|
|
902
|
+
|
|
903
|
+
### Props
|
|
904
|
+
|
|
905
|
+
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|
|
906
|
+
|--------|------|------|--------|------|
|
|
907
|
+
| `useCase` | `string` | ❌ | `''` | 使用场景，如 `'company'` 时与 `isAdmin` 配合显示 Tab |
|
|
908
|
+
| `applyRecord` | `any` | ❌ | `{}` | 申请/准入记录，含 `distributorFlag`、`accessCheckStatus` 等，用于控制可提现、下级分销商、收益等区块显示 |
|
|
909
|
+
| `isAdmin` | `boolean` | ❌ | `false` | 是否管理员，企业场景下为 true 时显示个人/企业 Tab |
|
|
910
|
+
| `显示下级分销商` | `boolean` | ❌ | `false` | 为 true 时展示下级分销商数量，否则展示产品销售收益 |
|
|
911
|
+
|
|
912
|
+
### Events
|
|
913
|
+
|
|
914
|
+
| 事件名 | 参数类型 | 说明 |
|
|
915
|
+
|--------|----------|------|
|
|
916
|
+
| `blance` | `tab: string` | 点击可提现余额区域时触发 |
|
|
917
|
+
| `profits` | `tab: string` | 点击产品销售收益时触发 |
|
|
918
|
+
| `rebate` | `tab: string` | 点击分销返佣收益时触发 |
|
|
919
|
+
| `tab` | `tab: string` | 个人/企业 Tab 切换时触发 |
|
|
920
|
+
|
|
921
|
+
### Slots
|
|
922
|
+
|
|
923
|
+
| 插槽名 | 说明 |
|
|
924
|
+
|--------|------|
|
|
925
|
+
| `tab-btn` | 在 Tab 区域右侧预留的自定义按钮区域 |
|
|
926
|
+
|
|
927
|
+
---
|
|
928
|
+
|
|
824
929
|
# 消息通知模块组件使用规则
|
|
825
930
|
|
|
826
931
|
## NoticeBanner - 通知横幅
|
|
@@ -956,11 +1061,14 @@ const handleView = (link) => {
|
|
|
956
1061
|
4. **已读标记**: 自动标记消息为已读
|
|
957
1062
|
5. **时间显示**: 智能显示相对时间（如"5分钟前"）或绝对时间
|
|
958
1063
|
|
|
1064
|
+
---
|
|
1065
|
+
|
|
1066
|
+
|
|
959
1067
|
---
|
|
960
1068
|
|
|
961
1069
|
## NoticeEntry - 消息入口
|
|
962
1070
|
|
|
963
|
-
**功能描述**:
|
|
1071
|
+
**功能描述**: 通常带红点或未读数的消息中心入口图标；挂载后根据 `app`、`userId` 请求未读数量并显示红点。
|
|
964
1072
|
|
|
965
1073
|
### 导入方式
|
|
966
1074
|
|
|
@@ -970,17 +1078,22 @@ import { NoticeEntry } from '@uxda/appkit/notice'
|
|
|
970
1078
|
|
|
971
1079
|
### Props
|
|
972
1080
|
|
|
973
|
-
|
|
1081
|
+
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|
|
1082
|
+
|--------|------|------|--------|------|
|
|
1083
|
+
| `app` | `string` | ❌ | `''` | 应用标识（必填时传入，否则会 toast 提示缺少 appcode） |
|
|
1084
|
+
| `userId` | `string` | ❌ | `''` | 用户ID，用于请求未读数量 |
|
|
974
1085
|
|
|
975
1086
|
### Events
|
|
976
1087
|
|
|
977
|
-
|
|
1088
|
+
无（组件仅做展示与红点状态，点击跳转由页面容器或路由处理）。
|
|
978
1089
|
|
|
979
1090
|
---
|
|
980
1091
|
|
|
981
1092
|
## NoticePopup - 通知弹窗
|
|
982
1093
|
|
|
983
|
-
|
|
1094
|
+
**说明**: 当前未从 `@uxda/appkit/notice` 导出，文档保留供参考。
|
|
1095
|
+
|
|
1096
|
+
**功能描述**: 强提醒类型的消息弹窗，展示系统公告内容，支持「我知道了」关闭与「点击查看附件」跳转。
|
|
984
1097
|
|
|
985
1098
|
### 导入方式
|
|
986
1099
|
|
|
@@ -990,16 +1103,83 @@ import { NoticePopup } from '@uxda/appkit/notice'
|
|
|
990
1103
|
|
|
991
1104
|
### Props
|
|
992
1105
|
|
|
993
|
-
|
|
1106
|
+
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|
|
1107
|
+
|--------|------|------|--------|------|
|
|
1108
|
+
| `message` | `any` | ❌ | `{}` | 消息对象，需含 `context`、`id`、`jumpUrl` 或 `link` 等字段 |
|
|
1109
|
+
| `device` | `string` | ❌ | `'MINI'` | 设备类型，用于已读上报接口 |
|
|
1110
|
+
|
|
1111
|
+
### Events
|
|
1112
|
+
|
|
1113
|
+
| 事件名 | 参数类型 | 说明 |
|
|
1114
|
+
|--------|----------|------|
|
|
1115
|
+
| `close` | - | 用户点击「我知道了」或关闭弹窗时触发 |
|
|
1116
|
+
| `view` | `string` | 用户点击「点击查看附件」时触发，参数为 `message.jumpUrl` 或 `message.link` |
|
|
1117
|
+
|
|
1118
|
+
---
|
|
1119
|
+
|
|
1120
|
+
## NoticeList2 - 消息列表（二代）
|
|
1121
|
+
|
|
1122
|
+
**功能描述**: 消息列表二代页面组件，支持全部/业务消息/系统公告/未读 Tab、下拉刷新、上拉分页、全部已读，点击列表项触发 `itemClick` 并标记已读。
|
|
1123
|
+
|
|
1124
|
+
### 导入方式
|
|
1125
|
+
|
|
1126
|
+
```typescript
|
|
1127
|
+
import { NoticeList2 } from '@uxda/appkit/notice'
|
|
1128
|
+
```
|
|
1129
|
+
|
|
1130
|
+
### Props
|
|
1131
|
+
|
|
1132
|
+
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|
|
1133
|
+
|--------|------|------|--------|------|
|
|
1134
|
+
| `deviceType` | `string` | ❌ | `'2'` | 设备类型，用于列表与已读接口 |
|
|
1135
|
+
| `userId` | `string` | ❌ | `''` | 用户ID |
|
|
1136
|
+
| `app` | `string` | ❌ | `''` | 应用标识，必填时传入否则列表为空 |
|
|
994
1137
|
|
|
995
1138
|
### Events
|
|
996
1139
|
|
|
997
|
-
|
|
1140
|
+
| 事件名 | 参数类型 | 说明 |
|
|
1141
|
+
|--------|----------|------|
|
|
1142
|
+
| `itemClick` | `item: any` | 点击某条消息时触发，参数为该条消息对象 |
|
|
1143
|
+
|
|
1144
|
+
### Slots
|
|
1145
|
+
|
|
1146
|
+
无（Tab 标题使用组件内部模板，如需自定义可参考源码 `#titles`）。
|
|
998
1147
|
|
|
999
1148
|
---
|
|
1000
1149
|
|
|
1001
1150
|
# 用户模块组件使用规则
|
|
1002
1151
|
|
|
1152
|
+
## UserEntry - 用户入口
|
|
1153
|
+
|
|
1154
|
+
**功能描述**: 用户中心入口区块，展示头像、昵称/手机号（脱敏）；未登录时显示「请登录」并可触发 `login`，登录后点击触发 `jump` 跳转个人资料等。
|
|
1155
|
+
|
|
1156
|
+
### 导入方式
|
|
1157
|
+
|
|
1158
|
+
```typescript
|
|
1159
|
+
import { UserEntry } from '@uxda/appkit/user'
|
|
1160
|
+
```
|
|
1161
|
+
|
|
1162
|
+
### Props
|
|
1163
|
+
|
|
1164
|
+
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|
|
1165
|
+
|--------|------|------|--------|------|
|
|
1166
|
+
| `avatar` | `string` | ❌ | `''` | 用户头像 URL |
|
|
1167
|
+
| `mobile` | `string` | ❌ | `''` | 手机号（展示时会脱敏） |
|
|
1168
|
+
| `name` | `string` | ❌ | `''` | 用户昵称或名称 |
|
|
1169
|
+
|
|
1170
|
+
### Events
|
|
1171
|
+
|
|
1172
|
+
| 事件名 | 参数类型 | 说明 |
|
|
1173
|
+
|--------|----------|------|
|
|
1174
|
+
| `jump` | - | 已登录用户点击头像/名称/手机号时触发，用于跳转个人资料等页 |
|
|
1175
|
+
| `login` | - | 未登录用户点击「请登录」时触发，用于跳转登录页 |
|
|
1176
|
+
|
|
1177
|
+
### Slots
|
|
1178
|
+
|
|
1179
|
+
无。
|
|
1180
|
+
|
|
1181
|
+
---
|
|
1182
|
+
|
|
1003
1183
|
## UserInfo - 用户信息
|
|
1004
1184
|
|
|
1005
1185
|
**功能描述**: 展示用户头像、昵称、认证信息、企业/团队信息等完整用户资料页面。
|
|
@@ -1418,7 +1598,7 @@ import DdIcon from '@uxda/appkit/components/dd-icon/index.vue'
|
|
|
1418
1598
|
|
|
1419
1599
|
## DdSkeleton - 骨架屏
|
|
1420
1600
|
|
|
1421
|
-
**功能描述**:
|
|
1601
|
+
**功能描述**: 数据加载过程中的占位显示，基于 NutUI Skeleton，支持多行与长短行配置，提升用户体验。
|
|
1422
1602
|
|
|
1423
1603
|
### 导入方式
|
|
1424
1604
|
|
|
@@ -1428,7 +1608,11 @@ import DdSkeleton from '@uxda/appkit/components/dd-skeleton/index.vue'
|
|
|
1428
1608
|
|
|
1429
1609
|
### Props
|
|
1430
1610
|
|
|
1431
|
-
|
|
1611
|
+
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|
|
1612
|
+
|--------|------|------|--------|------|
|
|
1613
|
+
| `row` | `number` | ❌ | `3` | 骨架行数（每组一行短+一行长） |
|
|
1614
|
+
| `shortRow` | `string` | ❌ | `'2'` | 短行骨架的 row 配置（NutUI Skeleton） |
|
|
1615
|
+
| `longRow` | `string` | ❌ | `'4'` | 长行骨架的 row 配置（NutUI Skeleton） |
|
|
1432
1616
|
|
|
1433
1617
|
### 使用示例
|
|
1434
1618
|
|
|
@@ -1462,7 +1646,24 @@ import DdNoticeBar from '@uxda/appkit/components/dd-notice-bar/index.vue'
|
|
|
1462
1646
|
|
|
1463
1647
|
### Props
|
|
1464
1648
|
|
|
1465
|
-
|
|
1649
|
+
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|
|
1650
|
+
|--------|------|------|--------|------|
|
|
1651
|
+
| `text` | `string` | ❌ | - | 通告文案；与默认插槽二选一 |
|
|
1652
|
+
| `style` | `object \| string` | ❌ | - | 根节点样式 |
|
|
1653
|
+
| `showClose` | `boolean` | ❌ | - | 是否显示关闭按钮；为 true 时样式变为「已关闭」风格（黄底） |
|
|
1654
|
+
|
|
1655
|
+
### Events
|
|
1656
|
+
|
|
1657
|
+
| 事件名 | 参数类型 | 说明 |
|
|
1658
|
+
|--------|----------|------|
|
|
1659
|
+
| `close` | - | 点击关闭按钮时触发 |
|
|
1660
|
+
| `txtClick` | - | 点击通告文本时触发 |
|
|
1661
|
+
|
|
1662
|
+
### Slots
|
|
1663
|
+
|
|
1664
|
+
| 插槽名 | 说明 |
|
|
1665
|
+
|--------|------|
|
|
1666
|
+
| 默认 | 自定义通告内容，与 `text` 二选一使用 |
|
|
1466
1667
|
|
|
1467
1668
|
### 使用示例
|
|
1468
1669
|
|
package/README.md
CHANGED
|
@@ -185,4 +185,11 @@ onTabChange((value: string) => {
|
|
|
185
185
|
selected.value = value
|
|
186
186
|
})
|
|
187
187
|
```
|
|
188
|
-
以上代码设置响应页面内的 setTab() 动作
|
|
188
|
+
以上代码设置响应页面内的 setTab() 动作
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
## Skills使用
|
|
192
|
+
1. 「构建后更新组件使用规则」的技能：执行npm run build，并更新 Appkit组件使用规则.md
|
|
193
|
+
```
|
|
194
|
+
只要说「先 build 再更新一下组件使用规则」或「同步 Appkit组件使用规则.md」，Agent 就会按「构建后更新组件使用规则」的技能更新 Appkit组件使用规则.md。
|
|
195
|
+
```
|
package/dist/index.js
CHANGED
|
@@ -3966,10 +3966,13 @@ var script$A = /* @__PURE__ */ defineComponent({
|
|
|
3966
3966
|
const $http = useHttp$2({ Appcode: props.headerApp, Tenant: props.tenant });
|
|
3967
3967
|
$http.get(endpoints$1.\u83B7\u53D6\u589E\u503C\u6743\u76CA\u7C7B\u76EE, {
|
|
3968
3968
|
rightCode: props.app === "corporateStar" ? "riskQueryCompany" : "riskQueryMulti",
|
|
3969
|
-
scene: isWechat() ? "" : "APP"
|
|
3969
|
+
scene: isWechat() && props.headerApp ? "" : "APP"
|
|
3970
3970
|
}).then((res) => {
|
|
3971
3971
|
balance.value = res.balance;
|
|
3972
3972
|
amounts.value = res.paymentCaseConfigVOS;
|
|
3973
|
+
if (!props.headerApp) {
|
|
3974
|
+
amounts.value = amounts.value.filter((item) => item.paymentAmount === 5e3);
|
|
3975
|
+
}
|
|
3973
3976
|
emit("loaded");
|
|
3974
3977
|
});
|
|
3975
3978
|
});
|
package/package.json
CHANGED
|
@@ -108,7 +108,7 @@ import { endpoints as balanceEndpoints } from "../../balance/api";
|
|
|
108
108
|
import { requestBrandWCPayByBean, requestPaymentByBean } from '../services'
|
|
109
109
|
import Taro, { showToast, useRouter, showModal } from '@tarojs/taro'
|
|
110
110
|
import { useAmount } from '../../shared/composables/useAmount'
|
|
111
|
-
import {
|
|
111
|
+
import { isWechat } from '../../shared/composables/useDeviceEnv'
|
|
112
112
|
|
|
113
113
|
// 充值用户界面
|
|
114
114
|
// 配置了必须的属性后
|
|
@@ -218,10 +218,14 @@ onMounted(() => {
|
|
|
218
218
|
const $http = useHttp({ Appcode: props.headerApp, Tenant: props.tenant })
|
|
219
219
|
$http.get<any[]>(endpoints.获取增值权益类目, {
|
|
220
220
|
rightCode: props.app === 'corporateStar' ? 'riskQueryCompany' : 'riskQueryMulti',
|
|
221
|
-
scene: isWechat() ? '' : 'APP'
|
|
221
|
+
scene: isWechat() && props.headerApp ? '' : 'APP'
|
|
222
222
|
}).then((res: any) => {
|
|
223
223
|
balance.value = res.balance
|
|
224
224
|
amounts.value = res.paymentCaseConfigVOS
|
|
225
|
+
// 如果没有应用权限，只显示5000元多充值档位
|
|
226
|
+
if (!props.headerApp) {
|
|
227
|
+
amounts.value = amounts.value.filter((item: any) => item.paymentAmount === 5000)
|
|
228
|
+
}
|
|
225
229
|
emit('loaded')
|
|
226
230
|
})
|
|
227
231
|
})
|