admin/danyang-match
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: add miniapp reference assets and primitives

Browse Source
This commit is contained in:
Codex
2026-09-14 06:38:44 +08:00
parent 311f251609
commit df47543501
37 changed files with 215 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniapp/components/empty/index.wxml
+1 -1
View File
@@ -1,6 +1,6 @@
<view class="ui-empty">
<view class="ui-empty__illustration ui-empty__illustration--{{illustration}}">
<view class="ui-empty__icon"></view>
<image class="ui-empty__icon" src="/assets/icons/ui/empty.png" mode="aspectFit" />
</view>
<text class="ui-empty__title">{{title}}</text>
<text wx:if="{{description}}" class="ui-empty__desc">{{description}}</text>
miniapp/components/empty/index.wxss
+3 -23
View File
@@ -16,29 +16,9 @@
margin-bottom: var(--spacing-4);
}
.ui-empty__icon {
width: 60rpx;
height: 60rpx;
background: var(--color-text-disabled);
opacity: 0.5;
border-radius: 50%;
}
.ui-empty__illustration--search .ui-empty__icon {
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
}
.ui-empty__illustration--heart .ui-empty__icon {
clip-path: polygon(50% 100%, 0 38%, 18% 18%, 50% 38%, 82% 18%, 100% 38%);
border-radius: 0;
}
.ui-empty__illustration--activity .ui-empty__icon {
border-radius: var(--radius-sm);
width: 80rpx;
height: 80rpx;
}
.ui-empty__illustration--message .ui-empty__icon {
border-radius: var(--radius-md);
width: 80rpx;
height: 60rpx;
width: 72rpx;
height: 72rpx;
opacity: 0.72;
}
.ui-empty__title {
font-size: var(--font-size-lg);
miniapp/components/error-state/index.js
+11 -1
View File
@@ -1 +1,11 @@
Component({properties:{title:{type:String,value:'加载失败'},description:{type:String,value:'请稍后重试'}},methods:{onRetry(){this.triggerEvent('retry')}}})
Component({
properties: {
title: { type: String, value: '加载失败' },
description: { type: String, value: '请稍后重试' },
},
methods: {
onRetry() {
this.triggerEvent('retry')
},
},
})
miniapp/components/error-state/index.wxml
+6 -1
View File
@@ -1 +1,6 @@
<view class="error-state"><view class="error-icon">!</view><text class="error-title">{{title}}</text><text class="error-desc">{{description}}</text><button class="retry-btn" bindtap="onRetry">重新加载</button></view>
<view class="error-state">
<image class="error-icon" src="/assets/icons/ui/warning.png" mode="aspectFit" />
<text class="error-title">{{title}}</text>
<text class="error-desc">{{description}}</text>
<button class="retry-btn" bindtap="onRetry">重新加载</button>
</view>
miniapp/components/error-state/index.wxss
+45 -1
View File
@@ -1 +1,45 @@
.error-state{padding:64rpx 32rpx;text-align:center;background:var(--color-bg-card);border-radius:var(--radius-lg)}.error-icon{width:72rpx;height:72rpx;margin:0 auto 20rpx;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--color-danger-light);color:var(--color-danger);font-weight:700}.error-title,.error-desc{display:block}.error-title{font-size:30rpx;font-weight:600}.error-desc{margin-top:8rpx;font-size:24rpx;color:var(--color-text-tertiary)}.retry-btn{width:220rpx;height:80rpx;line-height:80rpx;margin-top:24rpx;border:0;border-radius:var(--radius-full);background:var(--color-primary);color:var(--color-text-inverse);font-size:26rpx}.retry-btn::after{border:0}
.error-state {
padding: 64rpx 32rpx;
text-align: center;
background: var(--color-bg-card);
border-radius: var(--radius-lg);
}
.error-icon {
display: block;
width: 72rpx;
height: 72rpx;
margin: 0 auto 20rpx;
}
.error-title,
.error-desc {
display: block;
}
.error-title {
font-size: 30rpx;
font-weight: 600;
}
.error-desc {
margin-top: 8rpx;
color: var(--color-text-tertiary);
font-size: 24rpx;
}
.retry-btn {
width: 220rpx;
height: 80rpx;
margin-top: 24rpx;
border: 0;
border-radius: var(--radius-full);
background: var(--color-primary);
color: var(--color-text-inverse);
font-size: 26rpx;
line-height: 80rpx;
}
.retry-btn::after {
border: 0;
}
miniapp/components/loading/index.wxml
+1 -1
View File
@@ -1,7 +1,7 @@
<view class="ui-loading {{inline ? 'ui-loading--inline' : 'ui-loading--block'}}">
<block wx:if="{{mode === 'spinner'}}">
<view class="ui-loading__spinner">
<view class="ui-loading__spinner-ring"></view>
<image class="ui-loading__spinner-icon" src="/assets/icons/ui/loading.png" mode="aspectFit" />
</view>
<text wx:if="{{text}}" class="ui-loading__text">{{text}}</text>
</block>
miniapp/components/loading/index.wxss
+1 -4
View File
@@ -16,12 +16,9 @@
align-items: center;
justify-content: center;
}
.ui-loading__spinner-ring {
.ui-loading__spinner-icon {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
border: 4rpx solid var(--color-divider);
border-top-color: var(--color-primary);
animation: ui-loading-spin 0.8s linear infinite;
}
@keyframes ui-loading-spin {
miniapp/components/nav-bar/index.wxml
+1 -1
View File
@@ -1,7 +1,7 @@
<view class="ui-nav ui-nav--{{bg}}" style="{{containerStyle}}">
<view class="ui-nav__bar">
<view wx:if="{{showBack}}" class="ui-nav__back" bindtap="onBack">
<view class="ui-nav__back-arrow"></view>
<image class="ui-nav__back-icon" src="/assets/icons/ui/back.png" mode="aspectFit" />
</view>
<view wx:else class="ui-nav__placeholder"></view>
<view class="ui-nav__title">{{title}}</view>
miniapp/components/nav-bar/index.wxss
+3 -6
View File
@@ -28,12 +28,9 @@
justify-content: center;
flex-shrink: 0;
}
.ui-nav__back-arrow {
width: 20rpx;
height: 20rpx;
border-left: 4rpx solid var(--color-text-primary);
border-bottom: 4rpx solid var(--color-text-primary);
transform: rotate(45deg);
.ui-nav__back-icon {
width: 36rpx;
height: 36rpx;
}
.ui-nav__title {
flex: 1;
miniapp/components/section-header/index.wxml
+1 -1
View File
@@ -5,6 +5,6 @@
</view>
<view wx:if="{{action}}" class="ui-section__action" bindtap="onAction">
<text>{{action}}</text>
<text class="ui-section__arrow">›</text>
<image class="ui-section__arrow" src="/assets/icons/ui/chevron-right.png" mode="aspectFit" />
</view>
</view>
miniapp/components/section-header/index.wxss
+2 -2
View File
@@ -26,6 +26,6 @@
}
.ui-section__arrow {
margin-left: 4rpx;
font-size: var(--font-size-md);
line-height: 1;
width: 24rpx;
height: 24rpx;
}
miniapp/components/service-hero/index.js
+10
View File
@@ -0,0 +1,10 @@
Component({
options: { addGlobalClass: true },
properties: {
eyebrow: { type: String, value: '' },
title: { type: String, value: '' },
subtitle: { type: String, value: '' },
imageSrc: { type: String, value: '' },
tone: { type: String, value: 'rose' },
},
})
miniapp/components/service-hero/index.json
+4
View File
@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}
miniapp/components/service-hero/index.wxml
+9
View File
@@ -0,0 +1,9 @@
<view class="service-hero service-hero--{{tone}}">
<image class="service-hero__image" src="{{imageSrc}}" mode="aspectFill" />
<view class="service-hero__veil"></view>
<view class="service-hero__content">
<text wx:if="{{eyebrow}}" class="service-hero__eyebrow">{{eyebrow}}</text>
<text class="service-hero__title">{{title}}</text>
<text wx:if="{{subtitle}}" class="service-hero__subtitle">{{subtitle}}</text>
</view>
</view>
miniapp/components/service-hero/index.wxss
+63
View File
@@ -0,0 +1,63 @@
.service-hero {
position: relative;
height: 300rpx;
overflow: hidden;
border-radius: 0 0 32rpx 32rpx;
background: #fff4f7;
}
.service-hero__image,
.service-hero__veil {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.service-hero__veil {
background: linear-gradient(90deg, rgba(255, 250, 252, 0.98) 0%, rgba(255, 250, 252, 0.82) 38%, rgba(255, 250, 252, 0.08) 70%);
}
.service-hero--night .service-hero__veil {
background: linear-gradient(90deg, rgba(18, 24, 83, 0.92) 0%, rgba(34, 31, 111, 0.64) 42%, rgba(34, 31, 111, 0.08) 72%);
}
.service-hero__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 54%;
height: 100%;
padding: 0 36rpx;
box-sizing: border-box;
}
.service-hero__eyebrow {
margin-bottom: 10rpx;
color: var(--color-primary);
font-size: 22rpx;
font-weight: 600;
letter-spacing: 2rpx;
}
.service-hero__title {
color: #24305e;
font-size: 40rpx;
font-weight: 700;
line-height: 1.28;
}
.service-hero__subtitle {
margin-top: 14rpx;
color: #737c96;
font-size: 24rpx;
line-height: 1.55;
}
.service-hero--night .service-hero__eyebrow,
.service-hero--night .service-hero__title,
.service-hero--night .service-hero__subtitle {
color: #ffffff;
}