jufubao-mall 2.0.89 → 2.0.90-beta3

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.
Files changed (28) hide show
  1. package/.trae/skills/slider-scroll-handler/SKILL.md +83 -0
  2. package/.trae/skills//345/274/200/345/217/221/350/247/204/350/214/203/346/263/250/346/204/217/344/272/213/351/241/271/SKILL.md +458 -0
  3. package/check-valuekey.js +78 -0
  4. package/package.json +1 -1
  5. package/src/components/JfbMallMarketNew/Api.js +50 -0
  6. package/src/components/JfbMallMarketNew/Attr.js +18 -0
  7. package/src/components/JfbMallMarketNew/JfbMallMarketNew.vue +3646 -0
  8. package/src/components/JfbMallMarketNew/JfbMallMarketNewLess.less +80 -0
  9. package/src/components/JfbMallMarketNew/JfbMallMarketNewMixin.js +30 -0
  10. package/src/components/JfbMallMarketNew/Mock.js +44 -0
  11. package/src/components/JfbMallMarketNew/components/CusImage.vue +223 -0
  12. package/src/components/JfbMallMarketNew/components/title.vue +132 -0
  13. package/src/components/JfbMallMarketNew/cusAttr/advanced.js +135 -0
  14. package/src/components/JfbMallMarketNew/cusAttr/content.js +284 -0
  15. package/src/components/JfbMallMarketNew/cusAttr/layouts/content-v1.js +295 -0
  16. package/src/components/JfbMallMarketNew/cusAttr/layouts/content-v2.js +671 -0
  17. package/src/components/JfbMallMarketNew/cusAttr/layouts/content-v3.js +368 -0
  18. package/src/components/JfbMallMarketNew/cusAttr/layouts/content-v4.js +928 -0
  19. package/src/components/JfbMallMarketNew/cusAttr/layouts/content-v5.js +951 -0
  20. package/src/components/JfbMallMarketNew/cusAttr/layouts/content-v6.js +202 -0
  21. package/src/components/JfbMallMarketNew/cusAttr/layouts/style-v1.js +557 -0
  22. package/src/components/JfbMallMarketNew/cusAttr/layouts/style-v2.js +649 -0
  23. package/src/components/JfbMallMarketNew/cusAttr/layouts/style-v3.js +539 -0
  24. package/src/components/JfbMallMarketNew/cusAttr/layouts/style-v4.js +666 -0
  25. package/src/components/JfbMallMarketNew/cusAttr/layouts/style-v5.js +662 -0
  26. package/src/components/JfbMallMarketNew/cusAttr/layouts/style-v6.js +78 -0
  27. package/src/components/JfbMallMarketNew/cusAttr/style.js +567 -0
  28. package/src/components/JfbMallProductList/JfbMallProductList.vue +1 -1
@@ -0,0 +1,83 @@
1
+ ---
2
+ name: "slider-scroll-handler"
3
+ description: "处理横向滑块滚动布局的方案。当需要实现固定显示N个商品、滑动查看更多商品时使用此技能。"
4
+ ---
5
+
6
+ # 滑块滚动处理方式
7
+
8
+ ## 适用场景
9
+
10
+ - 横向滚动列表
11
+ - 固定显示N个商品,滑动查看更多
12
+ - 商品数量可配置
13
+ - 需要支持动态数量调整
14
+
15
+ ## 核心原理
16
+
17
+ - **可视区域**:固定宽度(如100%或固定像素),只显示N个商品
18
+ - **内容区域**:根据总商品数量动态计算宽度
19
+ - **计算公式**:`(总数量 / 可视数量) * 100%`
20
+ - **商品宽度**:使用百分比(如48%)或固定像素
21
+
22
+ ## 实现方案
23
+
24
+ ### 1. 宽度计算逻辑
25
+
26
+ ```javascript
27
+ // 可视区域宽度(固定显示2个商品)
28
+ v6ScrollWidth() {
29
+ return '100%';
30
+ }
31
+
32
+ // 滚动内容宽度(根据商品数量动态计算)
33
+ v6ScrollContentWidth() {
34
+ const count = Number(this.v6_right_slideNumber) || 4;
35
+ return (count / 2) * 100 + '%';
36
+ }
37
+ ```
38
+
39
+ ### 2. 布局结构
40
+
41
+ ```html
42
+ <view class="scroll-container">
43
+ <scroll-view scroll-x>
44
+ <view class="scroll-content" :style="{ width: v6ScrollContentWidth }">
45
+ <view class="item" v-for="item in list">...</view>
46
+ </view>
47
+ </scroll-view>
48
+ </view>
49
+ ```
50
+
51
+ ### 3. CSS样式
52
+
53
+ ```css
54
+ .scroll-container {
55
+ overflow: hidden;
56
+ width: 100%; /* 固定可视区域 */
57
+ }
58
+
59
+ .scroll-content {
60
+ display: flex;
61
+ gap: 10rpx;
62
+ }
63
+
64
+ .item {
65
+ flex: 0 0 48%; /* 每个商品占约一半宽度 */
66
+ }
67
+ ```
68
+
69
+ ## 计算示例
70
+
71
+ | 商品数量 | 计算公式 | 内容宽度 | 显示效果 |
72
+ |---------|---------|---------|---------|
73
+ | 2个 | (2/2)*100% | 100% | 刚好占满可视区域 |
74
+ | 3个 | (3/2)*100% | 150% | 可视区域显示2个,第3个隐藏 |
75
+ | 4个 | (4/2)*100% | 200% | 可视区域显示2个,剩余2个隐藏 |
76
+ | 5个 | (5/2)*100% | 250% | 可视区域显示2个,剩余3个隐藏 |
77
+
78
+ ## 注意事项
79
+
80
+ 1. 外层容器需要设置 `overflow: hidden` 来裁剪超出部分
81
+ 2. 滚动视图需要设置 `scroll-x` 属性启用横向滚动
82
+ 3. 商品项使用 `flex: 0 0 48%` 确保每个商品占据固定比例
83
+ 4. 间距使用 `gap` 属性,会被自动计算在内容宽度内
@@ -0,0 +1,458 @@
1
+ ---
2
+ name: "开发规范注意事项"
3
+ description: "提供JfbMallMarketNew组件开发的规范和注意事项。在开发或修改JfbMallMarketNew组件相关代码时自动调用此技能。"
4
+ ---
5
+
6
+ # 开发规范注意事项
7
+
8
+ 本技能提供JfbMallMarketNew组件开发的完整规范和注意事项,确保代码质量和一致性。
9
+
10
+ ## 1. 代码结构和拆分
11
+
12
+ ### 模块化拆分
13
+ - 将不同布局的样式配置拆分到独立文件(style-v1.js、style-v2.js等)
14
+ - 主style.js文件通过动态导入整合不同布局的样式配置
15
+ - 根据当前布局类型(styleLayout)动态加载对应样式配置
16
+
17
+ ### 公用属性处理
18
+ - 根据设计图生成公用属性代码,放到style.js中
19
+ - 在style.js中定义commonStyleAttrs数组,包含外边距、内边距、描边等公用属性
20
+ - 与布局特定样式合并返回
21
+
22
+ ## 2. 组件使用规范
23
+
24
+ ### 上传图片组件
25
+ - 使用`xd-upload`组件(参考JfbMallBrandWall),不要使用`xd-upload-image`
26
+ - 配置必要属性:slot、uploadType、size等
27
+ - 示例配置:
28
+ ```javascript
29
+ {
30
+ ele: 'xd-upload',
31
+ valueKey: `${prefix}moreIcon`,
32
+ slot: true,
33
+ oneWidth: 80,
34
+ oneHeight: 80,
35
+ uploadType: 'aliyun',
36
+ size: 5,
37
+ action: 'action',
38
+ sort: true,
39
+ }
40
+ ```
41
+
42
+ ### 属性表单配置
43
+ - 所有属性表单都要加`labelInline: true`
44
+
45
+ ### 上传属性配置
46
+ - 上传属性必须包含`oneWidth`和`oneHeight`
47
+ - 参考路径:`/Users/lizhuofei/Desktop/QIAN/jufubao-mall/src/components/JfbMallMarketNew/cusAttr/layouts/style-v1.js#L164-165`
48
+
49
+ ## 3. 代码参考规范
50
+
51
+ ### 字号写法
52
+ - 参考JfbMallNavigation中的文字字号写法
53
+ - 使用`xd-site-select-list`组件选择字号
54
+
55
+ ### 文字设置
56
+ - 参考JfbMallShop中的"商品名称"配置
57
+ - 使用`xd-text-and-bgc`组件整合字号、颜色、粗细等文字相关设置
58
+
59
+ ### 描边、投影、圆角
60
+ - 参照JfbMallBrandWall文件中的写法
61
+ - 使用`xd-shadow`组件处理投影
62
+ - 使用`cRaBorShadow`函数生成默认值
63
+ - 使用`xd-site-select-list`组件生成圆角选项
64
+
65
+ ### xd-border和xd-shadow组件注意事项
66
+ - **不需要单独添加ele: 'xd-radio'**:`ele: 'xd-border'`和`ele: 'xd-shadow'`组件本身已经包含了开关功能,不需要在前面单独添加`ele: 'xd-radio'`属性
67
+ - **直接使用**:可以直接在属性配置中使用这两个组件,它们内部会处理显示/隐藏的逻辑
68
+
69
+ ### xd-shadow组件使用方法(参考JfbMallBrandHome)
70
+ - **基本配置**:使用 `ele: 'xd-shadow'` 定义投影属性表单
71
+ - **必要属性**:
72
+ - `label`:属性标签
73
+ - `valueKey`:属性唯一标识
74
+ - `value`:属性值(直接使用 `data[valueKey] || ''`)
75
+ - `setting`:配置对象,包含以下属性:
76
+ - `selected`:默认选中项,通常设置为 'N'(无)
77
+ - **可选属性**:
78
+ - `handleCustom`:自定义处理函数,用于获取选项列表
79
+ - `className`:样式类名,建议使用 'input100'
80
+ - `labelInline`:标签是否内联,设置为 true
81
+ - `hidden`:条件显示逻辑
82
+
83
+ ### 配置项说明
84
+ - **isRadio**:是否显示开关,设置为 `true` 时会显示单选开关,`false` 时不显示
85
+ - **isDef**:是否启用默认选项,设置为 `true` 时会显示默认选项
86
+ - **使用场景**:
87
+ - 当需要显示开关控制时,添加 `isRadio: true` 和 `isDef: true` 配置项
88
+ - 当不需要开关控制时,可以保持配置简洁,只设置 `selected` 属性
89
+
90
+ ### 投影配置示例(带开关)
91
+ ```javascript
92
+ {
93
+ label: '标题投影',
94
+ ele: 'xd-shadow',
95
+ groupKey: 'style',
96
+ labelInline: true,
97
+ valueKey: `${areaPrefix}titleShadow`,
98
+ value: data[`${areaPrefix}titleShadow`] || '',
99
+ className: 'input100',
100
+ hidden: currentArea !== areaPrefix.slice(0, -1),
101
+ setting: {
102
+ selected: 'N',
103
+ isRadio: true, // 显示开关
104
+ isDef: true, // 启用默认选项
105
+ },
106
+ handleCustom({action, data}) {
107
+ XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
108
+ .then(res => {
109
+ data.cb(res.list)
110
+ })
111
+ .catch(error => {
112
+ console.error(error);
113
+ data.cb([])
114
+ });
115
+ },
116
+ }
117
+ ```
118
+
119
+ ### xd-border组件使用方法
120
+ - **基本配置**:使用 `ele: 'xd-border'` 定义描边属性表单
121
+ - **必要属性**:
122
+ - `label`:属性标签
123
+ - `valueKey`:属性唯一标识
124
+ - `value`:属性值(使用 `cRaBorShadow` 函数生成)
125
+ - `setting`:配置对象,包含以下属性:
126
+ - `selected`:默认选中项
127
+ - `isRadio`:启用默认单选模式
128
+ - `isDef`:启用默认选项
129
+ - `color`:默认颜色
130
+ - `width`:默认宽度
131
+ - `style`:默认样式(如 'solid')
132
+ - **示例配置**:
133
+ ```javascript
134
+ {
135
+ label: '描边',
136
+ ele: 'xd-border',
137
+ valueKey: 'v2_moreBorder',
138
+ value: cRaBorShadow(data['v2_moreBorder'], 'v2_moreBorder', {disabled: false, old: [], dValue: 'D'}, gValue),
139
+ groupKey: 'style',
140
+ labelInline: true,
141
+ className: 'input100',
142
+ hidden: !statusShow({data, key: 'v2_moreBorderStatus', fields:['v2_moreBorder'], gValue}),
143
+ setting: {
144
+ selected: cRaBorShadow(data['v2_moreBorder'], 'v2_moreBorder', {disabled: false, old: [], dValue: 'D'}, gValue).type,
145
+ isRadio: true, //启用editx默认
146
+ isDef: true, //启动默认选项
147
+ color: '#ccc',
148
+ width: '0',
149
+ style: 'solid'
150
+ }
151
+ }
152
+ ```
153
+ - **注意事项**:
154
+ - 确保 `valueKey` 全局唯一
155
+ - 添加 `className: 'input100'` 以确保布局一致
156
+ - 使用 `statusShow` 函数控制显隐
157
+ - 在 Vue 文件中使用 `gCPVal` 函数获取描边属性值,设置 `isBorder: true`
158
+ - 示例获取方式:
159
+ ```javascript
160
+ this.v2_moreBorder = gCPVal(container, 'v2_moreBorder', [{color: '#e5e5e5',width: 0,style: 'solid'}], {isBorder: true, bsOld:['is_border','is_border_w','is_border_c'], cusFields: ['v2_moreBorder']});
161
+ ```
162
+ - 在模板中直接绑定到样式对象:
163
+ ```vue
164
+ :moreStyle="{
165
+ ...v2_moreTextStyle,
166
+ border: v2_moreBorder,
167
+ boxShadow: v2_moreShadow,
168
+ borderRadius: v2_moreRadius + 'rpx'
169
+ }"
170
+ ```
171
+
172
+ ## 4. 代码命名和唯一性
173
+
174
+ ### valueKey唯一性
175
+ - **必须保证valueKey全局唯一**:在整个cusAttr目录下,所有表单属性的valueKey都必须是唯一的,不能重复
176
+ - **复制粘贴代码时的注意事项**:复制代码片段时,必须修改valueKey以避免重复
177
+ - **检查方法**:使用工具脚本定期检查valueKey的唯一性,确保没有重复
178
+ - **命名规范**:对于不同模块的相同功能属性,使用前缀区分(如content_area和style_area)
179
+ - **布局特定属性**:不同布局的属性应使用布局前缀(如v1_、v2_),避免跨布局属性冲突
180
+
181
+ ### groupKey区分
182
+ - **内容配置**:使用 `groupKey: 'content'`,用于配置组件的功能属性(如商品展示、标题设置等)
183
+ - **样式配置**:使用 `groupKey: 'style'`,用于配置组件的样式属性(如背景、边距、圆角等)
184
+ - **高级配置**:使用 `groupKey: 'advanced'`,用于配置组件的高级功能属性
185
+ - **一致性**:确保相同类型的配置使用相同的groupKey,保持代码的一致性和可维护性
186
+
187
+ ### 属性前缀
188
+ - 不同布局中的属性要加上前缀(如layout1_)用于区分
189
+ - 避免不同布局间属性名称冲突
190
+
191
+ ## 5. 代码位置和顺序
192
+
193
+ ### 公用属性位置
194
+ - 公用属性放到style.js中的最后面,不需要加前缀
195
+ - 在style.js中定义commonStyleAttrs数组
196
+
197
+ ### 属性顺序
198
+ - 只有特定属性放到layoutStyleAttrs后面
199
+ - 之前存在的属性保持在前面
200
+ - 新添加的商品相关属性可以单独提取为productCommonAttrs数组
201
+
202
+ ## 6. 样式绑定规范
203
+
204
+ ### 小程序兼容
205
+ - 使用`[:style="arraySyntax"]`数组语法绑定样式(参考JfbMallCart)
206
+ - 示例:`:style="[styleObject]"` 而不是 `:style="styleObject"`
207
+ - 对于需要多个样式对象的情况,使用逗号分隔:`:style="[styleObject1, styleObject2]"`
208
+
209
+ ### 父子组件样式传递
210
+ - 父组件传递给子组件的样式应该是对象形式
211
+ - 到子组件内部绑定style时再写成`:style="[wrapCss]"`
212
+ - 示例:
213
+ ```vue
214
+ <!-- 父组件 -->
215
+ <Title :wrapStyle="{ padding: '20rpx', borderRadius: '10rpx' }" />
216
+
217
+ <!-- 子组件 -->
218
+ <view :style="[wrapCss]">
219
+ ```
220
+
221
+ ## 7. 图片处理规范
222
+
223
+ ### 图片URL获取
224
+ - 获取`xd-upload`属性时,需要加上`.url`获取正确地址
225
+ - 示例:`gCPVal(container, 'layout1_moreIcon', {}, {sKey:'layout1_moreIconStatus', fields:['layout1_moreIcon']}).url`
226
+
227
+ ### 图片URL处理
228
+ - 使用`getServiceUrl`函数处理图片URL(参考JfbMallBrandWall)
229
+ - 示例:
230
+ ```javascript
231
+ import getServiceUrl from "@/common/getServiceUrl";
232
+ let url = '';
233
+ if(this.moreIcon) url = getServiceUrl(this.moreIcon);
234
+ ```
235
+
236
+ ### 图片条件判断
237
+ - 背景图的绑定要使用条件判断,确保只有当背景图存在时才使用它
238
+ - 示例:`backgroundImage: titleBg ? \`url(${titleBg})\` : 'none'`
239
+
240
+ ## 8. 样式属性处理
241
+
242
+ ### 内容区边距
243
+ - 布局1中的"内容区边距"需要获取值并绑定到`jfb-mall-market-new__body-products`上
244
+ - 示例:
245
+ ```javascript
246
+ // data中定义
247
+ layout1_contentPadding: {},
248
+
249
+ // init中初始化
250
+ this.layout1_contentPadding = gCPVal(container, 'layout1_contentPadding', [0], {sKey:'layout1_contentPaddingStatus', fields:['layout1_contentPadding'], isPM: true});
251
+
252
+ // computed中计算样式
253
+ layout1ContentPaddingStyle() {
254
+ return {
255
+ 'padding': this.getMarginAndPadding(this.layout1_contentPadding, 0)
256
+ };
257
+ },
258
+
259
+ // 模板中绑定
260
+ <view class="jfb-mall-market-new__body-products" :style="[layout1ContentPaddingStyle]">
261
+ ```
262
+
263
+ ### 样式属性初始化
264
+ - **所有样式属性都必须在data中定义**:任何通过gCPVal或其他方式获取的属性值,都必须在组件的data中先定义对应的变量
265
+ - **初始化时机**:在init方法中对这些属性进行初始化,确保组件加载时就有正确的默认值
266
+ - **默认值设置**:为每个属性设置合理的默认值,避免在模板中出现undefined错误
267
+ - **类型一致性**:确保data中定义的变量类型与init方法中赋值的类型一致
268
+
269
+ ### 圆角属性初始化规范
270
+ - **默认值格式**:圆角属性的默认值必须是数组形式,如 `[16]` 而不是 `16`
271
+ - **sKey参数**:必须使用 `sKey` 参数来指定状态键,如 `sKey: 'left_moreRadiusStatus'`
272
+ - **fields参数**:必须使用 `fields` 参数来指定相关字段,如 `fields: ['left_moreRadius']`
273
+ - **无圆角处理**:保持 `|| 0` 来确保在无圆角时返回0
274
+ - **示例初始化代码**:
275
+ ```javascript
276
+ // 正确的圆角属性初始化
277
+ this.left_moreRadius = gCPVal(container, 'left_moreRadius', [16], { sKey: 'left_moreRadiusStatus', fields: ['left_moreRadius'] }) || 0;
278
+
279
+ // 错误的圆角属性初始化(不要这样写)
280
+ this.left_moreRadius = gCPVal(container, 'left_moreRadius', 16) || 0;
281
+ ```
282
+ - **适用属性**:此规范适用于所有圆角属性,包括但不限于:
283
+ - left_moreRadius
284
+ - right_moreRadius
285
+ - v2_moreRadius
286
+ - v3_moreRadius
287
+ - titleRadius
288
+ - productRadius
289
+ - imageRadius
290
+
291
+ ### 样式属性绑定
292
+ - 详细查看各个样式属性绑定的位置
293
+ - 确保所有样式属性都能正确绑定,不要遗漏
294
+ - 特别注意在组件布局1下,不同的"商图位置""展示效果"是写了不同的代码的,样式属性都要绑定到
295
+
296
+ ## 9. 组件配置规范
297
+
298
+ ### Title组件
299
+ - 支持传入主标题、副标题、更多,及它们各自的样式属性
300
+ - 与"风格配置"中的属性对应起来
301
+ - 支持自定义图标,用来替换默认的xd-font-icon组件
302
+
303
+ ### 布局特定代码
304
+ - 特别注意在组件布局1下,不同的"商图位置""展示效果"是写了不同的代码的
305
+ - 样式属性都要绑定到,不要遗漏
306
+
307
+ ## 10. 代码完整性
308
+
309
+ ### 配置一致性
310
+ - 确保所有样式属性都与"风格配置"中的属性对应
311
+ - 注意使用准确,不要有遗漏
312
+
313
+ ### 命名规范
314
+ - 使用设计图中的关键字命名新函数或参数
315
+
316
+ ### 最小影响原则
317
+ - 代码修改应遵循最小影响和低风险原则
318
+ - 保持与现有架构模式一致
319
+
320
+ ## 11. 持续更新
321
+
322
+ ### 规范更新
323
+ - 每次生成代码时,严格遵循这些注意事项和规范
324
+ - 每次有新的规范要求时,总结并添加到这个技能中
325
+ - 确保代码质量和一致性
326
+
327
+ ## 参考文件
328
+
329
+ - JfbMallBrandWall:图片URL处理、投影和圆角写法
330
+ - JfbMallCart:样式绑定语法(数组形式)
331
+ - JfbMallNavigation:文字字号写法
332
+ - JfbMallShop:商品名称配置
333
+ - JfbMallNewShopList:样式属性的定义及使用
334
+
335
+ ## 12. 设计规范
336
+
337
+ ### 375设计稿规范
338
+ - **字号**:设计稿中商品字号不会有单数
339
+ - **边距/填充/间距**:必须使用 16, 24, 32 等数值
340
+ - **背景色**:
341
+ - 默认背景色:#f8f8f8
342
+ - 内容背景色默认:rgba(0,0,0,0)
343
+
344
+ ## 13. 样式绑定规范
345
+
346
+ ### 背景色属性转换
347
+ - **仅在使用 `ele: 'xd-text-and-bgc'` 组件时需要**:当通过该组件生成的样式对象中包含 `bgColor` 属性时,需要转换为 `backgroundColor` 才能绑定到样式中
348
+ - 示例处理(在Title组件中):
349
+ ```javascript
350
+ moreCss() {
351
+ const style = { ...this.moreStyle };
352
+ if (style.bgColor) {
353
+ style.backgroundColor = style.bgColor;
354
+ delete style.bgColor;
355
+ }
356
+ return style;
357
+ }
358
+ ```
359
+
360
+ ## 14. 跳转链接处理规范
361
+
362
+ ### 跳转链接属性获取
363
+ - **推荐方式**:使用 `gCPVal` 函数获取跳转链接属性值,确保在属性不存在时返回空字符串
364
+ - **标准格式**:`this.propertyName = gCPVal(container, "propertyName", {value: ""}).value;`
365
+ - **示例**:
366
+ ```javascript
367
+ // 正确的跳转链接属性获取方式
368
+ this.v1_morePath = gCPVal(container, "v1_morePath", {value: ""}).value;
369
+ this.v2_left_morePath = gCPVal(container, "v2_left_morePath", {value: ""}).value;
370
+ ```
371
+
372
+ ### 注意事项
373
+ - **空值处理**:在获取跳转链接时,确保处理空值情况,避免跳转失败
374
+ - **区域标识一致性**:确保区域标识与属性命名保持一致,便于维护
375
+ - **权限检查**:根据实际需求,可能需要在跳转前进行权限检查
376
+ - **参数传递**:如果跳转链接需要传递参数,确保正确构建URL参数
377
+
378
+ ## 15. ele: 'xd-text-and-bgc' 属性使用规范
379
+
380
+ ### 属性说明
381
+ - **组件功能**:`xd-text-and-bgc` 是一个用于设置文字样式和背景色的组件
382
+ - **适用场景**:用于配置标题、副标题、按钮等元素的文字样式和背景色
383
+ - **属性结构**:包含字体大小、颜色、粗细、背景色等设置
384
+
385
+ ### 正确使用方式
386
+ - **在样式配置文件中**:
387
+ - 使用 `ele: 'xd-text-and-bgc'` 定义属性表单
388
+ - 设置必要的属性:`label`、`valueKey`、`value`、`groupKey`、`labelInline` 等
389
+ - 在 `setting` 对象中设置默认值,所有 `fontSize` 值必须包含 `rpx` 单位
390
+
391
+ ### 样式配置示例
392
+ ```javascript
393
+ {
394
+ label: '标题样式',
395
+ ele: 'xd-text-and-bgc',
396
+ valueKey: `${areaPrefix}titleTextStyle`,
397
+ value: dataVal({data, key:`${areaPrefix}titleTextStyle`, dValue:{}, gValue}),
398
+ groupKey: 'style',
399
+ labelInline: true,
400
+ hidden: !statusShow({data, key: `${areaPrefix}titleTextStatus`, fields:[`${areaPrefix}titleTextStyle`], gValue}),
401
+ setting: {
402
+ fontSize: true,
403
+ weight: true,
404
+ bgColor: false,
405
+ selected: false,
406
+ default: {
407
+ fontSize: '28rpx', // 必须包含 rpx 单位
408
+ color: '#333333',
409
+ fontWeight: 'normal',
410
+ textAlign: 'left'
411
+ }
412
+ }
413
+ }
414
+ ```
415
+
416
+ ### 在 Vue 组件中获取和使用
417
+ - **在 data 中定义变量**:
418
+ ```javascript
419
+ data() {
420
+ return {
421
+ titleTextStyle: {}, // 定义为空对象
422
+ // 其他属性...
423
+ };
424
+ }
425
+ ```
426
+
427
+ - **在 init 方法中初始化**:
428
+ ```javascript
429
+ this.titleTextStyle = this.getFontAndBgcStyle(
430
+ gCPVal(
431
+ container,
432
+ "titleTextStyle",
433
+ {}, // gCPVal 的默认值应为空对象
434
+ {sKey:'titleTextStatus',fields:['titleTextStyle'],isMerge: true}
435
+ ),
436
+ { fontSize: '28rpx', color: '#333', fontWeight: 'normal' } // 默认样式值
437
+ );
438
+ ```
439
+
440
+ ### 注意事项
441
+ - **fontSize 单位**:所有 `fontSize` 值必须包含 `rpx` 单位,如 `'28rpx'` 而不是 `'28'`
442
+ - **默认值设置**:在 `setting.default` 中设置默认样式值时,确保所有属性都有合理的默认值
443
+ - **data 中定义**:在组件的 data 中必须先定义对应的变量,初始值为空对象 `{}`
444
+ - **初始化方式**:使用 `getFontAndBgcStyle` 方法获取样式值,遵循正确的参数结构
445
+ - **样式绑定**:在模板中使用数组语法绑定样式,如 `:style="[titleTextStyle]"`
446
+ - **参考文件**:
447
+ - 样式配置参考:`/Users/lizhuofei/Desktop/QIAN/jufubao-mall/src/components/JfbMallMarketNew/cusAttr/layouts/style-v2.js`
448
+ - 组件使用参考:`/Users/lizhuofei/Desktop/QIAN/jufubao-mall/src/components/JfbMallCart/JfbMallCart.vue#L564-567`
449
+
450
+ ## 使用时机
451
+
452
+ 在以下情况时自动调用此技能:
453
+ - 开发或修改JfbMallMarketNew组件相关代码
454
+ - 生成新的样式属性配置
455
+ - 修改样式绑定
456
+ - 处理图片上传和显示
457
+ - 创建新的布局样式文件
458
+ - 实现跳转链接功能
@@ -0,0 +1,78 @@
1
+ #!/usr/bin/env node
2
+
3
+ const fs = require('fs');
4
+ const path = require('path');
5
+
6
+ // 要检查的文件路径
7
+ const cusAttrPath = path.join(__dirname, 'src/components/JfbMallMarketNew/cusAttr');
8
+
9
+ // 收集所有valueKey
10
+ const valueKeys = {};
11
+
12
+ // 扫描文件函数
13
+ function scanFile(filePath) {
14
+ const content = fs.readFileSync(filePath, 'utf8');
15
+ const lines = content.split('\n');
16
+
17
+ lines.forEach((line, index) => {
18
+ const match = line.match(/valueKey:\s*['"]([^'"]+)['"]/);
19
+ if (match) {
20
+ const key = match[1];
21
+ if (!valueKeys[key]) {
22
+ valueKeys[key] = [];
23
+ }
24
+ valueKeys[key].push({
25
+ file: filePath,
26
+ line: index + 1,
27
+ lineContent: line.trim()
28
+ });
29
+ }
30
+ });
31
+ }
32
+
33
+ // 递归扫描目录
34
+ function scanDirectory(dirPath) {
35
+ const files = fs.readdirSync(dirPath);
36
+
37
+ files.forEach(file => {
38
+ const fullPath = path.join(dirPath, file);
39
+ const stat = fs.statSync(fullPath);
40
+
41
+ if (stat.isDirectory()) {
42
+ scanDirectory(fullPath);
43
+ } else if (stat.isFile() && (file.endsWith('.js') || file.endsWith('.ts'))) {
44
+ scanFile(fullPath);
45
+ }
46
+ });
47
+ }
48
+
49
+ // 执行扫描
50
+ scanDirectory(cusAttrPath);
51
+
52
+ // 检查重复的valueKey
53
+ const duplicates = {};
54
+ for (const key in valueKeys) {
55
+ if (valueKeys[key].length > 1) {
56
+ duplicates[key] = valueKeys[key];
57
+ }
58
+ }
59
+
60
+ // 输出结果
61
+ if (Object.keys(duplicates).length === 0) {
62
+ console.log('✓ 所有valueKey都是唯一的,没有重复');
63
+ } else {
64
+ console.log('❌ 发现重复的valueKey:');
65
+ console.log('====================================');
66
+
67
+ for (const key in duplicates) {
68
+ console.log(`\n重复的valueKey: ${key}`);
69
+ console.log('------------------------------------');
70
+ duplicates[key].forEach(item => {
71
+ console.log(`${item.file}:${item.line}`);
72
+ console.log(` ${item.lineContent}`);
73
+ });
74
+ }
75
+
76
+ console.log('\n====================================');
77
+ console.log(`共发现 ${Object.keys(duplicates).length} 个重复的valueKey`);
78
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jufubao-mall",
3
- "version": "2.0.89",
3
+ "version": "2.0.90-beta3",
4
4
  "private": false,
5
5
  "description": "聚福宝商城业务组件插件包",
6
6
  "main": "index.js",
@@ -0,0 +1,50 @@
1
+ 'use strict';
2
+ /**
3
+ * @description 接口配置,
4
+ * 在设置方法名字当时候,别忘记加上【模块名字】:Market
5
+ * @type {*[]}
6
+ */
7
+ module.exports = [
8
+ {
9
+ mapFnName: 'getMarketMallProductList',
10
+ title: '获取商品列表',
11
+ path: '/product/v1/:xnamespace/product/blocks',
12
+ isRule: false,
13
+ data: {
14
+ xnamespace: ['path', "xnamespace", "必选"],
15
+ sort: ['排序', 'string', '必选'],
16
+ need_show_tags: ['关键词', 'array', '必选','market'],
17
+ blocks: ['分块数据', 'array', '必选'],
18
+ is_show_uprice: ['是否显示划线价', 'Number', '必选'],
19
+ city_code: ['城市CODE', 'string', '必选'],
20
+ },
21
+ isConsole: true,
22
+ disabled: true,
23
+ },
24
+ {
25
+ mapFnName: 'getListPosterContent', //自定义方法名字(必选)
26
+ title: '获取内容',
27
+ path: '/cms/v1/ad-content',
28
+ isRule: false,
29
+ params: {
30
+ scene: ['使用场景', 'String', '选填'],
31
+ container_id: ['插件ID', 'String', '必填'],
32
+ page_id: ['页面ID', 'String', '必填'],
33
+ page_size: ['记录条数', 'Number', '必填'],
34
+ },
35
+ isConsole: true,
36
+ disabled: true,
37
+ },
38
+ {
39
+ //设置方法名字当别忘记加上【模块名字】:Market
40
+ mapFnName: 'addMarketFilmcart',
41
+ title: '添加购物车',
42
+ path: '/api/account/film/paiqi-date',
43
+ isRule: false,
44
+ params: {
45
+ film_id: ['电影id', 'Number', '必选'],
46
+ },
47
+ isConsole: true,
48
+ disabled: true,
49
+ },
50
+ ];
@@ -0,0 +1,18 @@
1
+ 'use strict';
2
+
3
+ import style from "./cusAttr/style";
4
+ import advanced from "./cusAttr/advanced";
5
+ import content from "./cusAttr/content";
6
+
7
+ export default {
8
+ style: [],
9
+ advanced: [],
10
+ content: (data, gValue, gColor, oldData={})=>{
11
+
12
+ return [
13
+ ...content(data, gValue,gColor,oldData),
14
+ ...style(data, gValue,gColor,oldData),
15
+ ...advanced(data),
16
+ ].filter(i=>i)
17
+ },
18
+ }