feat: 添加组件配置文件并优化页面结构

- 新增 components.d.json 文件,包含所有组件的属性配置
- 添加 card-item-plugin 组件及其相关文件(json、ts、wxml、wxss)
- 在 app.json 中添加新的生产流程管理页面路径
- 添加多个SVG图标文件用于菜单项
- 重构 popup-plugin 组件样式和关闭逻辑
- 更新 tab-bar-plugin 的激活状态逻辑
- 优化 search-popup 使用全局样式类
- 在首页添加菜单配置和页面跳转功能
- 调整组件样式细节和间距
This commit is contained in:
zhengw
2026-01-14 16:54:47 +08:00
parent 0d58fc80f4
commit b1ecd88641
58 changed files with 971 additions and 386 deletions

View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

View File

@@ -0,0 +1,24 @@
Component({
options: { multipleSlots: true },
/**
* 组件的属性列表
*/
properties: {
label: null,
value: null,
customStyle: null,
labelStyle: null,
valueStyle: null,
},
/**
* 组件的初始数据
*/
data: {},
/**
* 组件的方法列表
*/
methods: {},
});

View File

@@ -0,0 +1,11 @@
<view class="card-item" style="{{ customStyle }}">
<view class="label" style="{{ labelStyle }}">
{{ label || '' }}
<slot name="label" />
</view>
<view class="value" style="{{ valueStyle }}">
{{ value || '' }}
<slot name="value" />
</view>
</view>

View File

@@ -0,0 +1,23 @@
.card-item {
display: flex;
align-items: center;
justify-content: space-between;
line-height: 1.57;
}
.label,
.value {
min-width: 0;
word-break: break-all;
flex-shrink: 0;
}
.label {
width: var(--label-width, 5em);
}
.value {
flex: 1;
display: inline-flex;
justify-content: flex-end;
}

View File

@@ -27,6 +27,7 @@ Component({
*/
data: {
showMore: false,
showMoreBar: false,
},
/**
* 组件的方法列表

View File

@@ -1,4 +1,4 @@
<view class="card_plugin {{className}}" style="border: 1rpx solid #ddd;margin-bottom: 12px;border-radius: 4px;{{style}};{{customStyle}}" bind:tap="click">
<view class="card_plugin {{className}}" style="border: 1rpx solid #ddd;margin-bottom: 12px;border-radius: 4px;{{customStyle}}" bind:tap="click">
<view class="header" style="border-bottom: 1rpx solid #ddd;padding: 8px 12px;font-weight: bold;{{headerStyle || ''}}">
<slot name="header" />
</view>

View File

@@ -9,14 +9,14 @@
display: none;
}
.footer > view {
.footer>view {
border-top: 1rpx solid #ddd;
padding: 8px 0 0 12px;
padding: 16rpx 0 0 24rpx;
display: flex;
width: 100%;
}
.footer > view:empty {
.footer>view:empty {
display: none;
}
@@ -25,8 +25,8 @@
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
height: 26px;
font-size: 0.875em;
height: 52rpx;
}
.show-more:active {

View File

@@ -1,6 +1,7 @@
{
"component": true,
"usingComponents": {
"t-popup": "tdesign-miniprogram/popup/popup"
"t-popup": "tdesign-miniprogram/popup/popup",
"t-icon": "tdesign-miniprogram/icon/icon"
}
}
}

View File

@@ -24,5 +24,9 @@ Component({
this.triggerEvent("close");
}
},
onClose() {
this.setData({ open: false });
this.triggerEvent("close");
},
},
});

View File

@@ -1,11 +1,7 @@
<t-popup
visible="{{visible}}"
bind:visible-change="onVisibleChange"
placement="{{placement || 'bottom'}}"
close-btn
>
<view style="border-bottom: 1px solid #ddd;">
<view style="padding: 12px 12px;">{{title}}</view>
<t-popup visible="{{visible}}" bind:visible-change="onVisibleChange" placement="{{placement || 'bottom'}}">
<view class="p-header">
<view class="title">{{title}}</view>
<t-icon name="close" size="60rpx" bind:tap="onClose" />
</view>
<view style="max-height: 70vh;overflow: auto;">
<slot/>

View File

@@ -1 +1,18 @@
.title {
flex: 1;
text-align: center;
font-weight: bold;
font-size: 32rpx;
color: var(--td-text-color-primary);
}
.p-header {
border-bottom: 1rpx solid #ddd;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: calc(var(--td-popup-border-radius, var(--td-radius-extraLarge, 24rpx)) * 0.5);
padding-left: calc(var(--td-popup-border-radius, var(--td-radius-extraLarge, 24rpx)) * 0.5);
padding-top: 12rpx;
padding-bottom: 12rpx;
}

View File

@@ -1,5 +1,5 @@
Component({
options: { multipleSlots: true },
options: { multipleSlots: true, addGlobalClass: true },
/**
* 组件的属性列表
*/

View File

@@ -1,61 +1,60 @@
<view style="display: flex;align-items: center;margin-bottom: 12px;{{customStyle}}">
<view style="flex: 1;margin-right: {{hideMore ? 0 : '12px'}};">
<block wx:if="{{useInputSlot}}">
<slot name='input' />
</block>
<block wx:else>
<t-input
wx:if="{{!hideInput}}"
placeholder="{{placeholder || '请输入关键字'}}"
clearable
borderless
bindchange="change"
value="{{value || ''}}"
data-key="{{dataKey}}"
confirm-type="search"
bind:clear="clear"
custom-style="background:#f5f5f5;min-height: 34px;height:34px;padding: 0;"
size="small"
>
<t-button
name="search"
slot="prefix-icon"
size="small"
theme="primary"
bindtap="scanCode"
icon="scan"
/>
<t-button
slot="suffix-icon"
bindtap="search"
icon="search"
theme="primary"
size="small"
/>
</t-input>
</block>
</view>
<t-button
wx:if="{{!hideMore}}"
bindtap="showSearch"
theme="primary"
size="small"
>
筛选
</t-button>
<view style="flex: 1;margin-right: {{hideMore ? 0 : '12px'}};">
<block wx:if="{{useInputSlot}}">
<slot name='input' />
</block>
<block wx:else>
<t-input
wx:if="{{!hideInput}}"
placeholder="{{placeholder || '请输入关键字'}}"
clearable
borderless
bindchange="change"
value="{{value || ''}}"
data-key="{{dataKey}}"
confirm-type="search"
bind:clear="clear"
custom-style="background:#f5f5f5;min-height: var(--td-button-small-height,64rpx);height:var(--td-button-small-height,64rpx);padding: 0;"
size="small"
t-class="aaaaaa"
>
<t-button
name="search"
slot="prefix-icon"
size="small"
theme="primary"
bindtap="scanCode"
icon="scan"
/>
<t-button
slot="suffix-icon"
bindtap="search"
icon="search"
theme="primary"
size="small"
/>
</t-input>
</block>
</view>
<t-button
wx:if="{{!hideMore}}"
bindtap="showSearch"
theme="primary"
size="small"
>筛选
</t-button>
</view>
<popup-plugin visible="{{ show }}" bind:close="close" title="筛选条件">
<slot name='content' />
<slot wx:if="{{useFooterSlot}}" name="footer" />
<view wx:else style="padding: 12px 0;display: flex;justify-content: center;position: sticky;bottom: 0;left: 0;background-color: #fff;z-index: 1;">
<t-button
bindtap="ok"
style="min-width: 80px;"
size="small"
theme="primary"
>搜索
</t-button>
</view>
<slot name='content' />
<slot wx:if="{{useFooterSlot}}" name="footer" />
<view wx:else style="padding: 12px 0;display: flex;justify-content: center;position: sticky;bottom: 0;left: 0;background-color: #fff;z-index: 1;">
<t-button
bindtap="ok"
style="min-width: 80px;"
size="small"
theme="primary"
>搜索
</t-button>
</view>
</popup-plugin>

View File

@@ -3,6 +3,7 @@
"usingComponents": {
"popup-plugin": "/pages/components/popup-plugin/popup-plugin",
"t-radio-group": "tdesign-miniprogram/radio-group/radio-group",
"t-radio": "tdesign-miniprogram/radio/radio",
"t-checkbox": "tdesign-miniprogram/checkbox/checkbox",
"t-checkbox-group": "tdesign-miniprogram/checkbox-group/checkbox-group"
}

View File

@@ -4,22 +4,10 @@ Component({
* 组件的属性列表
*/
properties: {
mode: {
type: String,
value: "single",
},
title: {
type: String,
value: "请选择",
},
options: {
type: Array,
value: [],
},
value: {
type: null,
value: [],
},
mode: { type: String, value: "single" },
title: { type: String, value: "请选择" },
options: { type: Array, value: [] },
value: { type: null, value: [] },
},
observers: {
"value,mode": function (v, m) {
@@ -50,7 +38,8 @@ Component({
this.setData({ visible: false });
},
radioChange(e: any) {
this.setData({ val: e.detail.value });
this.triggerEvent("change", { value: e.detail.value });
this.setData({ val: e.detail.value, visible: false });
},
checkboxChange(e: any) {
this.setData({ val: e.detail.value });

View File

@@ -5,16 +5,30 @@
<popup-plugin visible="{{visible}}" bind:close="close" title="{{title}}">
<view>
<view style="padding: 12px 0;">
<t-radio-group
wx:if="{{mode == 'single'}}"
bind:change="radioChange"
allow-uncheck
value="{{val}}"
options="{{options}}"
/>
<t-checkbox-group wx:else value="{{val}}" bind:change="checkboxChange">
borderless
>
<t-radio
wx:for="{{options}}"
wx:key="index"
value="{{item.value}}"
style="padding-bottom: 6px;padding-top: 6px;"
>{{item.label}}
</t-radio>
</t-radio-group>
<t-checkbox-group
wx:else
value="{{val}}"
bind:change="checkboxChange"
borderless
>
<t-checkbox
style="padding-bottom: 6px;padding-top: 6px;"
wx:for="{{options}}"
icon="rectangle"
wx:key="index"
@@ -23,7 +37,7 @@
</t-checkbox>
</t-checkbox-group>
</view>
<view class="footer">
<view class="footer" wx:if="{{ mode == 'multiple' }}">
<t-button size="small" theme="primary" bindtap="ok">确定</t-button>
</view>
</popup-plugin>

View File

@@ -6,7 +6,7 @@ Component({
properties: {
active: {
type: String,
value: "home",
value: "",
},
},
@@ -15,7 +15,7 @@ Component({
*/
data: {
list: [
{ value: "home", label: "首页", icon: "home" },
{ value: "index", label: "首页", icon: "home" },
{ value: "scan", label: "扫码", icon: "scan" },
{ value: "my", label: "我的", icon: "user" },
],
@@ -31,12 +31,9 @@ Component({
*/
methods: {
onChange(e: any) {
if (e.detail.value == this.data.active) {
return;
if (e.detail.value != this.data.active) {
wx.reLaunch({ url: this.data.pages[e.detail.value] });
}
wx.reLaunch({
url: this.data.pages[e.detail.value],
});
},
},
});

View File

@@ -1,13 +1,5 @@
<t-tab-bar
t-class="t-tab-bar"
value="{{active}}"
bindchange="onChange"
theme="normal"
fixed="{{true}}"
split="{{false}}"
>
<t-tab-bar t-class="t-tab-bar" value="{{active}}" bindchange="onChange" theme="normal" fixed="{{true}}" split="{{false}}">
<t-tab-bar-item wx:for="{{list}}" wx:key="value" value="{{item.value}}" icon="{{item.icon}}">
{{item.label}}
</t-tab-bar-item>
</t-tab-bar>