本地备份:主包优化前完整版本,可随时回退

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
XingQue
2026-06-27 05:41:55 +08:00
parent a751708d6e
commit 7f4f279b3f
124 changed files with 15837 additions and 21958 deletions

View File

@@ -1,73 +1,106 @@
// components/chenghao-tag/chenghao-tag.js
const app = getApp();
const PILL_SHAPES = ['pill', 'rectangle', 'rounded'];
Component({
properties: {
mingcheng: { type: String, value: '' },
texiaoJson: { type: Object, value: {} }
texiaoJson: { type: Object, value: {} },
},
data: {
// 默认值宽152高52六边形无背景图无动画白色字
width: 152,
height: 52,
shapeClass: 'liubianxing', // 保证至少不是矩形
inlineStyle: '',
shapeClass: 'tag-pill',
animationClass: '',
bgStyle: '',
textColor: '#FFFFFF',
textSize: 22,
imageUrl: ''
imageUrl: '',
isPill: true,
},
observers: {
'texiaoJson, mingcheng': function () {
this._applyConfig(this.properties.texiaoJson);
},
},
lifetimes: {
attached() {
const cfg = this.properties.texiaoJson || {};
// 1. 尺寸稍大一些一行能放3~4个
const width = cfg.width || 152;
const height = cfg.height || 52;
this._applyConfig(this.properties.texiaoJson);
},
},
methods: {
_applyConfig(raw) {
const cfg = raw || {};
const ossImageUrl = app.globalData.ossImageUrl || '';
// 2. 背景处理:优先背景图,否则用渐变/纯色
// 无 shape身份装饰标签 / 自定义色圆角标;有 shape考核称号等特殊形状
const isPill = !cfg.shape || PILL_SHAPES.includes(cfg.shape);
if (isPill) {
const height = Number(cfg.height) || 44;
const minWidth = Number(cfg.width) || 72;
const solidColor = cfg.bg_color || cfg.background || cfg.color;
let bgStyle = '';
if (cfg.bg_gradient) {
bgStyle = `background: ${cfg.bg_gradient};`;
} else if (solidColor) {
bgStyle = `background: ${solidColor};`;
} else {
bgStyle = 'background: linear-gradient(135deg, #FFD700, #FF8C00);';
}
const flash = cfg.flash || cfg.animation === 'shine' || cfg.animation === 'glow';
let animationClass = cfg.animation || '';
if (flash && !animationClass) {
animationClass = 'pill-flash';
}
const borderColor = cfg.borderColor || cfg.border_color;
const borderStyle = borderColor ? `border: 2rpx solid ${borderColor};` : '';
const textColor = cfg.text_color || cfg.textColor || '#FFFFFF';
this.setData({
isPill: true,
shapeClass: 'tag-pill',
animationClass,
inlineStyle: `min-width: ${minWidth}rpx; height: ${height}rpx; padding: 0 18rpx; ${bgStyle} ${borderStyle}`,
textColor,
textSize: cfg.text_size || 22,
imageUrl: '',
});
return;
}
const width = Number(cfg.width) || 152;
const height = Number(cfg.height) || 52;
let bgStyle = '';
let imageUrl = '';
if (cfg.image_url) {
const ossImageUrl = app.globalData.ossImageUrl || '';
imageUrl = cfg.image_url.startsWith('http')
? cfg.image_url
imageUrl = cfg.image_url.startsWith('http')
? cfg.image_url
: ossImageUrl + cfg.image_url;
} else if (cfg.bg_gradient) {
bgStyle = `background: ${cfg.bg_gradient};`;
} else if (cfg.bg_color) {
bgStyle = `background: ${cfg.bg_color};`;
} else {
// 默认金橙渐变
bgStyle = `background: linear-gradient(135deg, #FFD700, #FF8C00);`;
bgStyle = 'background: linear-gradient(135deg, #FFD700, #FF8C00);';
}
// 3. 形状(后端传入 shape 字段,默认 liubianxing
const shapeClass = cfg.shape || 'liubianxing';
// 4. 动画
const animationClass = cfg.animation || '';
// 5. 文字
const textColor = cfg.text_color || '#FFFFFF';
const textSize = cfg.text_size || 22;
this.setData({
width, height,
bgStyle, imageUrl,
shapeClass, animationClass,
textColor, textSize
isPill: false,
inlineStyle: `width: ${width}rpx; height: ${height}rpx; ${bgStyle}`,
shapeClass: cfg.shape || 'liubianxing',
animationClass: cfg.animation || '',
textColor: cfg.text_color || '#FFFFFF',
textSize: cfg.text_size || 22,
imageUrl,
});
}
},
methods: {
// 背景图加载失败时回退为纯色背景
},
onImageError() {
this.setData({ imageUrl: '' });
// 如果 bgStyle 为空,给个默认背景
if (!this.data.bgStyle) {
this.setData({ bgStyle: 'background: linear-gradient(135deg, #FFD700, #FF8C00);' });
if (!this.data.inlineStyle.includes('background')) {
this.setData({
inlineStyle: this.data.inlineStyle + ' background: linear-gradient(135deg, #FFD700, #FF8C00);',
});
}
}
}
});
},
},
});

View File

@@ -1,20 +1,17 @@
<!-- components/chenghao-tag/chenghao-tag.wxml -->
<view
class="tag-root {{shapeClass}} {{animationClass}}"
style="width: {{width}}rpx; height: {{height}}rpx; {{bgStyle}}"
<view
class="tag-root {{shapeClass}} {{animationClass}}"
style="{{inlineStyle}}"
>
<!-- 背景图(如果有) -->
<image
wx:if="{{imageUrl}}"
class="tag-bg-image"
src="{{imageUrl}}"
<image
wx:if="{{imageUrl && !isPill}}"
class="tag-bg-image"
src="{{imageUrl}}"
mode="aspectFill"
binderror="onImageError"
></image>
<!-- 文字层 -->
<text
class="tag-text"
/>
<text
class="tag-text"
style="color: {{textColor}}; font-size: {{textSize}}rpx;"
>{{mingcheng}}</text>
</view>
</view>

View File

@@ -12,6 +12,18 @@
margin: 4rpx;
box-sizing: border-box;
}
/* 身份装饰 / 自定义色:圆角标 */
.tag-root.tag-pill {
border-radius: 20rpx;
clip-path: none;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
}
.tag-pill .tag-text {
padding: 0;
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.25);
}
/* ========== 背景图 ========== */
.tag-bg-image {
@@ -87,4 +99,19 @@
@keyframes glow-anim {
0%, 100% { box-shadow: 0 0 8rpx rgba(255, 215, 0, 0.4); }
50% { box-shadow: 0 0 20rpx rgba(255, 215, 0, 0.8), 0 0 40rpx rgba(255, 215, 0, 0.4); }
}
/* 身份标签闪光 */
.tag-root.pill-flash::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
transform: skewX(-20deg);
animation: shine-anim 2.2s infinite;
z-index: 1;
pointer-events: none;
}

View File

@@ -0,0 +1,15 @@
Component({
properties: {
visible: { type: Boolean, value: false },
title: { type: String, value: '频道' },
channelNo: { type: String, value: '' },
images: { type: Array, value: [] },
},
methods: {
preventMove() {},
onClose() {
this.triggerEvent('close');
},
},
});

View File

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

View File

@@ -0,0 +1,24 @@
<view class="pindao-mask" wx:if="{{visible}}" catchtouchmove="preventMove">
<view class="pindao-panel" catchtap="preventMove">
<view class="pindao-head flexb">
<text class="pindao-title">{{title}}</text>
<view class="pindao-close" bindtap="onClose">×</view>
</view>
<view class="pindao-channel" wx:if="{{channelNo}}">
<text class="pindao-channel-label">频道号</text>
<text class="pindao-channel-no">{{channelNo}}</text>
</view>
<scroll-view class="pindao-scroll" scroll-y enhanced show-scrollbar="{{false}}">
<view wx:if="{{images.length === 0}}" class="pindao-empty">暂无频道内容</view>
<image
wx:for="{{images}}"
wx:key="index"
class="pindao-img"
src="{{item}}"
mode="widthFix"
lazy-load="{{false}}"
show-menu-by-longpress
/>
</scroll-view>
</view>
</view>

View File

@@ -0,0 +1,88 @@
.pindao-mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 40rpx;
box-sizing: border-box;
}
.pindao-panel {
width: 100%;
max-height: 80vh;
background: #fff;
border-radius: 24rpx;
overflow: hidden;
display: flex;
flex-direction: column;
}
.pindao-head {
padding: 28rpx 32rpx 16rpx;
align-items: center;
}
.pindao-title {
font-size: 32rpx;
font-weight: 600;
color: #222;
}
.pindao-close {
width: 56rpx;
height: 56rpx;
line-height: 52rpx;
text-align: center;
font-size: 40rpx;
color: #999;
}
.pindao-channel {
padding: 0 32rpx 20rpx;
text-align: center;
}
.pindao-channel-label {
display: block;
font-size: 24rpx;
color: #999;
margin-bottom: 8rpx;
}
.pindao-channel-no {
font-size: 36rpx;
font-weight: 700;
color: #c9a962;
}
.pindao-scroll {
flex: 1;
max-height: 60vh;
padding: 0 24rpx 24rpx;
box-sizing: border-box;
}
.pindao-img {
width: 100%;
display: block;
margin-bottom: 16rpx;
border-radius: 12rpx;
}
.pindao-empty {
text-align: center;
color: #999;
padding: 48rpx 0;
font-size: 28rpx;
}
.flexb {
display: flex;
justify-content: space-between;
}