first commit
This commit is contained in:
Blizzard
@@ -0,0 +1,299 @@
|
||||
/**
|
||||
* 早安电台 — 全局应用入口
|
||||
* 负责：全局状态管理、音频管理初始化、登录态检查、事件总线
|
||||
*/
|
||||
|
||||
const audioManager = require('./utils/audioManager')
|
||||
const api = require('./utils/api')
|
||||
|
||||
App({
|
||||
globalData: {
|
||||
// ======== 用户状态 ========
|
||||
isLoggedIn: false,
|
||||
isVip: false,
|
||||
userInfo: null,
|
||||
token: '',
|
||||
|
||||
// ======== 播放器状态 ========
|
||||
activeContent: null, // 当前播放的音频内容对象
|
||||
isPlaying: false,
|
||||
currentTime: 0, // 当前播放时间（秒）
|
||||
duration: 0, // 总时长（秒）
|
||||
playbackRate: 1.0, // 播放速率
|
||||
|
||||
// ======== 系统信息 ========
|
||||
statusBarHeight: 0,
|
||||
navBarHeight: 0,
|
||||
screenHeight: 0,
|
||||
windowHeight: 0,
|
||||
|
||||
// ======== 位置与天气 ========
|
||||
locationName: '', // 城市/区域名称
|
||||
weather: null // { desc, temp, icon }
|
||||
},
|
||||
|
||||
// ======== 事件总线 ========
|
||||
_events: {},
|
||||
|
||||
/**
|
||||
* 注册事件监听
|
||||
* @param {string} event - 事件名
|
||||
* @param {Function} callback - 回调函数
|
||||
*/
|
||||
on(event, callback) {
|
||||
if (!this._events[event]) {
|
||||
this._events[event] = []
|
||||
}
|
||||
this._events[event].push(callback)
|
||||
},
|
||||
|
||||
/**
|
||||
* 移除事件监听
|
||||
*/
|
||||
off(event, callback) {
|
||||
if (!this._events[event]) return
|
||||
if (callback) {
|
||||
this._events[event] = this._events[event].filter(cb => cb !== callback)
|
||||
} else {
|
||||
this._events[event] = []
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 触发事件
|
||||
*/
|
||||
emit(event, data) {
|
||||
if (!this._events[event]) return
|
||||
this._events[event].forEach(cb => cb(data))
|
||||
},
|
||||
|
||||
onLaunch() {
|
||||
// 获取系统信息，用于自定义导航栏计算
|
||||
try {
|
||||
const systemInfo = wx.getWindowInfo()
|
||||
const menuButton = wx.getMenuButtonBoundingClientRect()
|
||||
this.globalData.statusBarHeight = systemInfo.statusBarHeight || 0
|
||||
this.globalData.navBarHeight = (menuButton.top - systemInfo.statusBarHeight) * 2 + menuButton.height
|
||||
this.globalData.screenHeight = systemInfo.screenHeight
|
||||
this.globalData.windowHeight = systemInfo.windowHeight
|
||||
} catch (e) {
|
||||
this.globalData.statusBarHeight = 44
|
||||
this.globalData.navBarHeight = 44
|
||||
}
|
||||
|
||||
// 初始化音频管理器
|
||||
audioManager.init(this)
|
||||
|
||||
// 冷启动：获取位置+天气（当天内只请求一次）
|
||||
this._fetchLocationWeather()
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取位置和天气
|
||||
* 策略：当天内只请求一次，结果缓存于 Storage 和 globalData
|
||||
*/
|
||||
_fetchLocationWeather() {
|
||||
const self = this
|
||||
const today = new Date().toLocaleDateString()
|
||||
let cached = null
|
||||
try { cached = wx.getStorageSync('locationWeatherCache') } catch (e) { }
|
||||
|
||||
// 当天有效缓存，直接用（不发请求）
|
||||
if (cached && cached.date === today && cached.locationName) {
|
||||
self.globalData.locationName = cached.locationName
|
||||
self.globalData.weather = cached.weather || null
|
||||
self.emit('locationWeatherReady', {
|
||||
locationName: cached.locationName,
|
||||
weather: cached.weather || null
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 清掉无效缓存
|
||||
try { wx.removeStorageSync('locationWeatherCache') } catch (e) { }
|
||||
|
||||
// 请求微信定位
|
||||
wx.getLocation({
|
||||
type: 'gcj02',
|
||||
isHighAccuracy: false,
|
||||
success(locRes) {
|
||||
const longitude = locRes.longitude
|
||||
const latitude = locRes.latitude
|
||||
|
||||
// 调用后端：经纬度 → 城市名 + adcode
|
||||
api.getLocation(longitude, latitude)
|
||||
.then(function (res) {
|
||||
if (!res || res.code !== 200 || !res.data) return Promise.reject('位置解析失败')
|
||||
|
||||
const locationName = res.data.city || res.data.district || res.data.province || '未知'
|
||||
const adcode = res.data.adcode || ''
|
||||
|
||||
self.globalData.locationName = locationName
|
||||
// 先更新一次（有城市名，天气还没来）
|
||||
self.emit('locationWeatherReady', { locationName, weather: null })
|
||||
|
||||
if (!adcode) return Promise.reject('无 adcode，跳过天气')
|
||||
return api.getWeather(adcode)
|
||||
})
|
||||
.then(function (res) {
|
||||
if (!res || res.code !== 200 || !res.data) return
|
||||
|
||||
const w = res.data
|
||||
const weather = {
|
||||
desc: w.weather || w.desc || '',
|
||||
temp: w.temperature || w.temp || '',
|
||||
icon: _weatherIcon(w.weather || w.desc || '')
|
||||
}
|
||||
|
||||
self.globalData.weather = weather
|
||||
self.emit('locationWeatherReady', {
|
||||
locationName: self.globalData.locationName,
|
||||
weather
|
||||
})
|
||||
|
||||
// 存入 Storage 供当日复用
|
||||
try {
|
||||
wx.setStorageSync('locationWeatherCache', {
|
||||
date: today,
|
||||
locationName: self.globalData.locationName,
|
||||
weather
|
||||
})
|
||||
} catch (e) { }
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.warn('[位置天气] 请求失败:', err)
|
||||
})
|
||||
},
|
||||
fail(err) {
|
||||
console.warn('[位置天气] wx.getLocation 失败:', err.errMsg)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// ======== 用户相关方法 ========
|
||||
|
||||
/**
|
||||
* 小程序静默登录
|
||||
* wx.login() → code → 后端 /auth/miniLogin → token + user
|
||||
*/
|
||||
login() {
|
||||
const self = this
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.login({
|
||||
success(loginRes) {
|
||||
if (!loginRes.code) {
|
||||
reject(new Error('wx.login 获取 code 失败'))
|
||||
return
|
||||
}
|
||||
api.miniLogin(loginRes.code).then(res => {
|
||||
if (res.code === 200 && res.data) {
|
||||
const { token, user } = res.data
|
||||
self.globalData.isLoggedIn = true
|
||||
self.globalData.token = token
|
||||
self.globalData.userInfo = user
|
||||
wx.setStorageSync('token', token)
|
||||
self.emit('loginStateChange', { isLoggedIn: true })
|
||||
resolve(res.data)
|
||||
} else {
|
||||
reject(new Error(res.msg || '登录失败'))
|
||||
}
|
||||
}).catch(reject)
|
||||
},
|
||||
fail(err) {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 订阅频道（调用后端）
|
||||
*/
|
||||
subscribeToDomain(channelId) {
|
||||
const self = this
|
||||
return api.subscribe(channelId).then(res => {
|
||||
if (res.code === 200) {
|
||||
self.emit('subscriptionChange', {})
|
||||
return true
|
||||
}
|
||||
wx.showToast({ title: res.msg || '订阅失败', icon: 'none' })
|
||||
return false
|
||||
}).catch(err => {
|
||||
wx.showToast({ title: err.message || '订阅失败', icon: 'none' })
|
||||
return false
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 取消订阅频道（调用后端）
|
||||
*/
|
||||
unsubscribeFromDomain(channelId) {
|
||||
const self = this
|
||||
return api.unsubscribe(channelId).then(res => {
|
||||
if (res.code === 200) {
|
||||
self.emit('subscriptionChange', {})
|
||||
return true
|
||||
}
|
||||
wx.showToast({ title: res.msg || '退订失败', icon: 'none' })
|
||||
return false
|
||||
}).catch(err => {
|
||||
wx.showToast({ title: err.message || '退订失败', icon: 'none' })
|
||||
return false
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 升级VIP
|
||||
*/
|
||||
upgradeVip() {
|
||||
this.globalData.isVip = true
|
||||
this.emit('vipChange', { isVip: true })
|
||||
},
|
||||
|
||||
// ======== 播放相关方法（代理到 audioManager） ========
|
||||
|
||||
/**
|
||||
* 播放指定内容
|
||||
*/
|
||||
playContent(content) {
|
||||
audioManager.playContent(content)
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换播放/暂停
|
||||
*/
|
||||
togglePlay() {
|
||||
audioManager.togglePlay()
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到指定时间
|
||||
*/
|
||||
seekTo(time) {
|
||||
audioManager.seekTo(time)
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置播放速率
|
||||
*/
|
||||
setPlaybackRate(rate) {
|
||||
audioManager.setPlaybackRate(rate)
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 天气描述 → emoji 图标
|
||||
* @param {string} desc - 天气描述，如"晴"、"多云"、"阵雨"
|
||||
*/
|
||||
function _weatherIcon(desc) {
|
||||
if (!desc) return '🌤'
|
||||
if (/晴/.test(desc)) return '☀️'
|
||||
if (/多云|阴/.test(desc)) return '☁️'
|
||||
if (/雷|电/.test(desc)) return '⛈️'
|
||||
if (/暴雨|大雨/.test(desc)) return '🌧️'
|
||||
if (/小雨|阵雨|中雨|雨/.test(desc)) return '🌦️'
|
||||
if (/雪|冰/.test(desc)) return '❄️'
|
||||
if (/雾|霾/.test(desc)) return '🌫️'
|
||||
if (/风|大风/.test(desc)) return '💨'
|
||||
return '🌤️'
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
{
|
||||
"pages": [
|
||||
"pages/splash/index",
|
||||
"pages/index/index",
|
||||
"pages/discover/index",
|
||||
"pages/history/index",
|
||||
"pages/profile/index",
|
||||
"pages/channel-detail/index",
|
||||
"pages/player/index",
|
||||
"pages/vip/index",
|
||||
"pages/subscribe/index"
|
||||
],
|
||||
"window": {
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"navigationBarTitleText": "早安电台",
|
||||
"navigationBarTextStyle": "black",
|
||||
"backgroundColor": "#F6F6F6",
|
||||
"backgroundTextStyle": "dark"
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#999999",
|
||||
"selectedColor": "#FF9D42",
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"borderStyle": "white",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/index/index",
|
||||
"text": "首页",
|
||||
"iconPath": "assets/icons/tab-home.png",
|
||||
"selectedIconPath": "assets/icons/tab-home-active.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/discover/index",
|
||||
"text": "发现",
|
||||
"iconPath": "assets/icons/tab-discover.png",
|
||||
"selectedIconPath": "assets/icons/tab-discover-active.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/history/index",
|
||||
"text": "历史",
|
||||
"iconPath": "assets/icons/tab-history.png",
|
||||
"selectedIconPath": "assets/icons/tab-history-active.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/profile/index",
|
||||
"text": "我的",
|
||||
"iconPath": "assets/icons/tab-profile.png",
|
||||
"selectedIconPath": "assets/icons/tab-profile-active.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
"requiredBackgroundModes": [
|
||||
"audio"
|
||||
],
|
||||
"usingComponents": {
|
||||
"t-message": "tdesign-miniprogram/message/message"
|
||||
},
|
||||
"permission": {
|
||||
"scope.userLocation": {
|
||||
"desc": "用于显示您的位置和当地天气，提供更好的早晨体验"
|
||||
}
|
||||
},
|
||||
"requiredPrivateInfos": [
|
||||
"getLocation"
|
||||
],
|
||||
"sitemapLocation": "sitemap.json",
|
||||
"lazyCodeLoading": "requiredComponents"
|
||||
}
|
||||
@@ -0,0 +1,239 @@
|
||||
/* ============================================
|
||||
早安电台 — 全局样式
|
||||
品牌主色: #FF9D42 背景: #F6F6F6
|
||||
============================================ */
|
||||
|
||||
/* TDesign 主题变量覆盖 */
|
||||
page {
|
||||
/* 品牌色 */
|
||||
--td-brand-color: #FF9D42;
|
||||
--td-brand-color-light: rgba(255, 157, 66, 0.1);
|
||||
--td-brand-color-focus: rgba(255, 157, 66, 0.2);
|
||||
--td-brand-color-active: #E88A35;
|
||||
--td-brand-color-disabled: rgba(255, 157, 66, 0.4);
|
||||
|
||||
/* 成功色（森林绿） */
|
||||
--td-success-color: #2D5A27;
|
||||
--td-success-color-light: rgba(45, 90, 39, 0.1);
|
||||
|
||||
/* 警告色 */
|
||||
--td-warning-color: #E34D59;
|
||||
|
||||
/* 圆角 */
|
||||
--td-radius-default: 16rpx;
|
||||
--td-radius-large: 32rpx;
|
||||
--td-radius-extra-large: 40rpx;
|
||||
--td-radius-round: 999rpx;
|
||||
|
||||
/* 自定义品牌变量 */
|
||||
--color-primary: #FF9D42;
|
||||
--color-primary-light: rgba(255, 157, 66, 0.08);
|
||||
--color-primary-bg: rgba(255, 157, 66, 0.12);
|
||||
--color-success: #2D5A27;
|
||||
--color-warning: #E34D59;
|
||||
--color-bg-page: #F6F6F6;
|
||||
--color-bg-card: #FFFFFF;
|
||||
--color-bg-container: #FEFEFE;
|
||||
--color-text-primary: #333333;
|
||||
--color-text-secondary: #666666;
|
||||
--color-text-placeholder: #999999;
|
||||
--color-text-disabled: #CCCCCC;
|
||||
--color-border: #EEEEEE;
|
||||
--color-border-light: #F5F5F5;
|
||||
|
||||
/* 页面背景 */
|
||||
background-color: var(--color-bg-page);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
|
||||
'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
font-size: 28rpx;
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.6;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ========== 通用工具类 ========== */
|
||||
|
||||
/* Flex */
|
||||
.flex { display: flex; }
|
||||
.flex-col { display: flex; flex-direction: column; }
|
||||
.flex-row { display: flex; flex-direction: row; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-1 { flex: 1; }
|
||||
.flex-shrink-0 { flex-shrink: 0; }
|
||||
.items-center { align-items: center; }
|
||||
.items-start { align-items: flex-start; }
|
||||
.items-end { align-items: flex-end; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.justify-around { justify-content: space-around; }
|
||||
.justify-end { justify-content: flex-end; }
|
||||
.self-center { align-self: center; }
|
||||
|
||||
/* 间距 */
|
||||
.gap-sm { gap: 16rpx; }
|
||||
.gap-md { gap: 24rpx; }
|
||||
.gap-lg { gap: 32rpx; }
|
||||
|
||||
/* 文字 */
|
||||
.text-center { text-align: center; }
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-bold { font-weight: 700; }
|
||||
.text-medium { font-weight: 500; }
|
||||
.text-xs { font-size: 20rpx; }
|
||||
.text-sm { font-size: 24rpx; }
|
||||
.text-base { font-size: 28rpx; }
|
||||
.text-lg { font-size: 32rpx; }
|
||||
.text-xl { font-size: 36rpx; }
|
||||
.text-2xl { font-size: 44rpx; }
|
||||
.text-3xl { font-size: 56rpx; }
|
||||
.text-primary { color: var(--color-primary); }
|
||||
.text-secondary { color: var(--color-text-secondary); }
|
||||
.text-placeholder { color: var(--color-text-placeholder); }
|
||||
.text-white { color: #FFFFFF; }
|
||||
|
||||
/* 单行省略 */
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* 多行省略 */
|
||||
.line-clamp-1 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.line-clamp-2 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
/* ========== 卡片 ========== */
|
||||
.card {
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--td-radius-extra-large);
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
|
||||
border: 1rpx solid var(--color-border-light);
|
||||
}
|
||||
|
||||
/* ========== 按钮 ========== */
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
border-radius: var(--td-radius-round);
|
||||
padding: 20rpx 48rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.btn-primary::after { border: none; }
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--color-primary);
|
||||
border: 2rpx solid var(--color-primary);
|
||||
border-radius: var(--td-radius-round);
|
||||
padding: 20rpx 48rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
border: none;
|
||||
border-radius: var(--td-radius-round);
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn-ghost::after { border: none; }
|
||||
|
||||
/* 按钮点击反馈 */
|
||||
.btn-primary:active,
|
||||
.btn-outline:active,
|
||||
.btn-ghost:active,
|
||||
.tap-active:active {
|
||||
opacity: 0.85;
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
/* ========== 安全区 ========== */
|
||||
.safe-area-bottom {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
|
||||
/* ========== 全局隐藏滚动条 ========== */
|
||||
page {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 隐藏所有 webkit 滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 通用滚动容器滚动条隐藏 */
|
||||
page,
|
||||
view,
|
||||
scroll-view {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE / Edge */
|
||||
}
|
||||
|
||||
page::-webkit-scrollbar,
|
||||
view::-webkit-scrollbar,
|
||||
scroll-view::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
/* ========== 动画 ========== */
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20rpx); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: scaleY(0.4); }
|
||||
50% { transform: scaleY(1); }
|
||||
}
|
||||
|
||||
.anim-rotate {
|
||||
animation: rotate 10s linear infinite;
|
||||
}
|
||||
.anim-rotate-paused {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.anim-fade-in {
|
||||
animation: fadeIn 0.5s ease-out forwards;
|
||||
}
|
||||
.anim-pulse {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
|
||||
|
After Width: | Height: | Size: 189 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
|
||||
|
After Width: | Height: | Size: 191 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
|
||||
|
After Width: | Height: | Size: 190 B |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" fill="#FF9D42"/>
|
||||
<circle cx="12" cy="9" r="2.5" fill="#FFFFFF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 231 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
|
||||
|
After Width: | Height: | Size: 260 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
|
||||
|
After Width: | Height: | Size: 212 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* 全局底部悬浮播放控制条
|
||||
* 监听 app 事件总线，实时同步播放状态
|
||||
*/
|
||||
const app = getApp()
|
||||
|
||||
Component({
|
||||
data: {
|
||||
activeContent: null,
|
||||
isPlaying: false,
|
||||
progressPercent: 0,
|
||||
show: false,
|
||||
channelIcon: '📻' // 直接存储 emoji 字符（来自频道 cover 字段）
|
||||
},
|
||||
|
||||
lifetimes: {
|
||||
attached() {
|
||||
// 初始化状态
|
||||
this._syncState()
|
||||
|
||||
// 监听播放状态变化
|
||||
this._onPlayerChange = (state) => {
|
||||
this.setData({
|
||||
activeContent: state.activeContent,
|
||||
isPlaying: state.isPlaying,
|
||||
show: !!state.activeContent
|
||||
})
|
||||
this._computeIcon(state.activeContent)
|
||||
}
|
||||
app.on('playerStateChange', this._onPlayerChange)
|
||||
|
||||
// 监听时间更新
|
||||
this._onTimeUpdate = (data) => {
|
||||
if (data.duration > 0) {
|
||||
this.setData({
|
||||
progressPercent: Math.min((data.currentTime / data.duration) * 100, 100)
|
||||
})
|
||||
}
|
||||
}
|
||||
app.on('timeUpdate', this._onTimeUpdate)
|
||||
},
|
||||
|
||||
detached() {
|
||||
app.off('playerStateChange', this._onPlayerChange)
|
||||
app.off('timeUpdate', this._onTimeUpdate)
|
||||
}
|
||||
},
|
||||
|
||||
pageLifetimes: {
|
||||
show() {
|
||||
this._syncState()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 同步播放器状态
|
||||
*/
|
||||
_syncState() {
|
||||
const gd = app.globalData
|
||||
this.setData({
|
||||
activeContent: gd.activeContent,
|
||||
isPlaying: gd.isPlaying,
|
||||
show: !!gd.activeContent,
|
||||
progressPercent: gd.duration > 0
|
||||
? Math.min((gd.currentTime / gd.duration) * 100, 100)
|
||||
: 0
|
||||
})
|
||||
this._computeIcon(gd.activeContent)
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取频道 emoji（后端直接返回 emoji 字符、存在 cover 字段中）
|
||||
*/
|
||||
_computeIcon(content) {
|
||||
if (!content) return
|
||||
const ch = content.channel || {}
|
||||
var icon = ch.cover || ch.icon || content.cover || '📻'
|
||||
this.setData({ channelIcon: icon })
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换播放/暂停
|
||||
*/
|
||||
onTogglePlay() {
|
||||
app.togglePlay()
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到播放器详情页
|
||||
*/
|
||||
goToPlayer() {
|
||||
wx.navigateTo({
|
||||
url: '/pages/player/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
<!-- 全局底部悬浮播放控制条 -->
|
||||
<view class="player-bar {{show ? 'show' : ''}}" wx:if="{{activeContent}}" bindtap="goToPlayer">
|
||||
|
||||
<!-- 左侧封面圆盘（播放时旋转） -->
|
||||
<view class="disc-wrap">
|
||||
<view class="disc {{isPlaying ? 'disc-spin' : ''}}">
|
||||
<!-- 外环 -->
|
||||
<view class="disc-ring"></view>
|
||||
<text class="disc-emoji">📻</text>
|
||||
</view>
|
||||
<!-- 播放时的声波小点 -->
|
||||
<view class="disc-pulse" wx:if="{{isPlaying}}"></view>
|
||||
</view>
|
||||
|
||||
<!-- 标题区域 -->
|
||||
<view class="info">
|
||||
<text class="title">{{activeContent.title}}</text>
|
||||
<view class="subtitle-row">
|
||||
<!-- 播放中的活跃波形条 -->
|
||||
<view class="mini-wave" wx:if="{{isPlaying}}">
|
||||
<view class="mw-bar" style="animation-delay:0s"></view>
|
||||
<view class="mw-bar" style="animation-delay:0.2s"></view>
|
||||
<view class="mw-bar" style="animation-delay:0.1s"></view>
|
||||
</view>
|
||||
<text class="subtitle">{{isPlaying ? '正在播放' : '已暂停'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 播放/暂停按钮 -->
|
||||
<view class="ctrl-btn" catchtap="onTogglePlay">
|
||||
<!-- 暂停：两竖线 -->
|
||||
<view wx:if="{{isPlaying}}" class="pause-icon">
|
||||
<view class="p-bar"></view>
|
||||
<view class="p-bar"></view>
|
||||
</view>
|
||||
<!-- 播放：三角 -->
|
||||
<text wx:else class="play-icon">▶</text>
|
||||
</view>
|
||||
|
||||
<!-- 底部橙色进度线 -->
|
||||
<view class="progress-track">
|
||||
<view class="progress-fill" style="width: {{progressPercent}}%"></view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,185 @@
|
||||
/* 全局底部悬浮播放控制条 */
|
||||
|
||||
.player-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 128rpx;
|
||||
/* 暖奶油白 + 轻磨砂，与播放器主题呼应但不突兀 */
|
||||
background: rgba(255, 251, 243, 0.97);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 28rpx;
|
||||
z-index: 999;
|
||||
border-top: 1rpx solid rgba(255, 157, 66, 0.12);
|
||||
box-shadow: 0 -8rpx 32rpx rgba(200, 120, 40, 0.08);
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);
|
||||
}
|
||||
.player-bar.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ── 封面圆盘 ── */
|
||||
.disc-wrap {
|
||||
position: relative;
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.disc {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #FF9D42, #FFB366);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 157, 66, 0.35);
|
||||
}
|
||||
.disc-spin {
|
||||
animation: disc-rotate 8s linear infinite;
|
||||
}
|
||||
@keyframes disc-rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
/* 圆盘外环纹路 */
|
||||
.disc-ring {
|
||||
position: absolute;
|
||||
inset: 6rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid rgba(255,255,255,0.35);
|
||||
}
|
||||
.disc-emoji {
|
||||
font-size: 34rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
/* 图片模式：填满圆盘内圈 */
|
||||
.disc-img {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
/* 播放时的呼吸光晕 */
|
||||
.disc-pulse {
|
||||
position: absolute;
|
||||
inset: -6rpx;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid rgba(255, 157, 66, 0.35);
|
||||
animation: pulse-ring 1.8s ease-out infinite;
|
||||
}
|
||||
@keyframes pulse-ring {
|
||||
0% { transform: scale(0.9); opacity: 0.8; }
|
||||
100% { transform: scale(1.35); opacity: 0; }
|
||||
}
|
||||
|
||||
/* ── 标题区 ── */
|
||||
.info {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.title {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #2C1A08;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.subtitle-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 6rpx;
|
||||
gap: 8rpx;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 20rpx;
|
||||
color: rgba(180, 120, 60, 0.7);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 迷你声波（3 根小柱） */
|
||||
.mini-wave {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 3rpx;
|
||||
height: 22rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mw-bar {
|
||||
width: 4rpx;
|
||||
height: 12rpx;
|
||||
background: #FF9D42;
|
||||
border-radius: 2rpx;
|
||||
animation: mw-dance 0.7s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes mw-dance {
|
||||
0% { height: 4rpx; opacity: 0.4; }
|
||||
100% { height: 20rpx; opacity: 1; }
|
||||
}
|
||||
|
||||
/* ── 播放/暂停按钮 ── */
|
||||
.ctrl-btn {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
background: #FF9D42;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 6rpx 20rpx rgba(255, 157, 66, 0.4);
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.ctrl-btn:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
/* 播放三角 */
|
||||
.play-icon {
|
||||
font-size: 30rpx;
|
||||
color: #FFF;
|
||||
margin-left: 5rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 暂停双竖线 */
|
||||
.pause-icon {
|
||||
display: flex;
|
||||
gap: 8rpx;
|
||||
align-items: center;
|
||||
}
|
||||
.p-bar {
|
||||
width: 6rpx;
|
||||
height: 26rpx;
|
||||
background: #FFF;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
|
||||
/* ── 底部进度线 ── */
|
||||
.progress-track {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3rpx;
|
||||
background: rgba(255, 157, 66, 0.1);
|
||||
}
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, #FF9D42, #FFB366);
|
||||
transition: width 0.5s linear;
|
||||
border-radius: 0 2rpx 2rpx 0;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,88 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
export default class ActionSheet extends SuperComponent {
|
||||
static show: (options: import("./show").ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
|
||||
behaviors: string[];
|
||||
externalClasses: string[];
|
||||
properties: {
|
||||
align?: {
|
||||
type: StringConstructor;
|
||||
value?: "left" | "center";
|
||||
};
|
||||
cancelText?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
count?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
description?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
items: {
|
||||
type: ArrayConstructor;
|
||||
value?: (string | import("./type").ActionSheetItem)[];
|
||||
required?: boolean;
|
||||
};
|
||||
popupProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: import("../popup").TdPopupProps;
|
||||
};
|
||||
showCancel?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
showOverlay?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: "list" | "grid";
|
||||
};
|
||||
usingCustomNavbar?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
visible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
defaultVisible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
};
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
gridThemeItems: any[];
|
||||
currentSwiperIndex: number;
|
||||
defaultPopUpProps: {};
|
||||
defaultPopUpzIndex: number;
|
||||
};
|
||||
controlledProps: {
|
||||
key: string;
|
||||
event: string;
|
||||
}[];
|
||||
observers: {
|
||||
items(): void;
|
||||
};
|
||||
lifetimes: {
|
||||
ready(): void;
|
||||
};
|
||||
methods: {
|
||||
init(): void;
|
||||
memoInitialData(): void;
|
||||
splitGridThemeActions(): void;
|
||||
show(options: any): void;
|
||||
close(): void;
|
||||
onPopupVisibleChange({ detail }: {
|
||||
detail: any;
|
||||
}): void;
|
||||
onSwiperChange(e: WechatMiniprogram.TouchEvent): void;
|
||||
onSelect(event: WechatMiniprogram.TouchEvent): void;
|
||||
onCancel(): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
import{__decorate}from"tslib";import{chunk}from"../common/utils";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import{ActionSheetTheme,show}from"./show";import props from"./props";import useCustomNavbar from"../mixins/using-custom-navbar";const{prefix:prefix}=config,name=`${prefix}-action-sheet`;let ActionSheet=class extends SuperComponent{constructor(){super(...arguments),this.behaviors=[useCustomNavbar],this.externalClasses=[`${prefix}-class`,`${prefix}-class-content`,`${prefix}-class-cancel`],this.properties=Object.assign({},props),this.data={prefix:prefix,classPrefix:name,gridThemeItems:[],currentSwiperIndex:0,defaultPopUpProps:{},defaultPopUpzIndex:11500},this.controlledProps=[{key:"visible",event:"visible-change"}],this.observers={items(){this.splitGridThemeActions()}},this.lifetimes={ready(){this.init()}},this.methods={init(){this.memoInitialData(),this.splitGridThemeActions()},memoInitialData(){this.initialData=Object.assign(Object.assign({},this.properties),this.data)},splitGridThemeActions(){this.data.theme===ActionSheetTheme.Grid&&this.setData({gridThemeItems:chunk(this.data.items,this.data.count)})},show(e){this.setData(Object.assign(Object.assign(Object.assign({},this.initialData),e),{visible:!0})),this.splitGridThemeActions(),this.autoClose=!0,this._trigger("visible-change",{visible:!0})},close(){this.triggerEvent("close",{trigger:"command"}),this._trigger("visible-change",{visible:!1})},onPopupVisibleChange({detail:e}){e.visible||(this.triggerEvent("close",{trigger:"overlay"}),this._trigger("visible-change",{visible:!1})),this.autoClose&&(this.setData({visible:!1}),this.autoClose=!1)},onSwiperChange(e){const{current:t}=e.detail;this.setData({currentSwiperIndex:t})},onSelect(e){const{currentSwiperIndex:t,items:i,gridThemeItems:s,count:o,theme:r}=this.data,{index:n}=e.currentTarget.dataset,a=r===ActionSheetTheme.Grid,h=a?s[t][n]:i[n],c=a?n+t*o:n;h&&(this.triggerEvent("selected",{selected:h,index:c}),h.disabled||(this.triggerEvent("close",{trigger:"select"}),this._trigger("visible-change",{visible:!1})))},onCancel(){this.triggerEvent("cancel"),this.autoClose&&(this.setData({visible:!1}),this.autoClose=!1)}}}};ActionSheet.show=show,ActionSheet=__decorate([wxComponent()],ActionSheet);export default ActionSheet;
|
||||
@@ -0,0 +1 @@
|
||||
{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-icon":"../icon/icon","t-popup":"../popup/popup","t-grid":"../grid/grid","t-grid-item":"../grid-item/grid-item"}}
|
||||
@@ -0,0 +1 @@
|
||||
<wxs src="./action-sheet.wxs" module="_this"/><wxs src="../common/utils.wxs" module="_"/><import src="./template/grid.wxml"/><import src="../common/template/icon.wxml"/><view id="{{classPrefix}}" style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [align, theme, ['no-description', !description]])}} class {{prefix}}-class"><t-popup visible="{{visible}}" placement="bottom" usingCustomNavbar="{{usingCustomNavbar}}" bind:visible-change="onPopupVisibleChange" show-overlay="{{showOverlay}}" z-index="{{ popupProps.zIndex || defaultPopUpzIndex }}" overlay-props="{{ popupProps.overlayProps || defaultPopUpProps }}"><view class="{{classPrefix}}__content {{prefix}}-class-content" tabindex="0"><view wx:if="{{description}}" tabindex="0" class="{{classPrefix}}__description">{{description}}</view><block wx:if="{{gridThemeItems.length}}"><template is="grid" data="{{classPrefix, prefix, gridThemeItems, count, currentSwiperIndex}}"/></block><view wx:elif="{{items && items.length}}" class="{{classPrefix}}__list"><block wx:for="{{ items }}" wx:key="index"><view data-index="{{index}}" style="{{ item.color ? 'color: ' + item.color : '' }}" class="{{_.cls(classPrefix + '__list-item', [['disabled', item.disabled]])}}" bind:tap="onSelect" aria-role="{{ariaRole || 'button'}}" aria-label="{{item.label || item}}" tabindex="0"><view class="{{classPrefix}}__list-item-content"><template wx:if="{{_this.getIconData(item.icon)}}" is="icon" data="{{tClass: classPrefix + '__list-item-icon', ..._this.getIconData(item.icon)}}"/><view class="{{classPrefix}}__list-item-text">{{item.label || item}}</view><template wx:if="{{_this.getIconData(item.suffixIcon)}}" is="icon" data="{{tClass: classPrefix + '__list-item-icon--suffix', ..._this.getIconData(item.suffixIcon)}}"/></view><view wx:if="{{item.description}}" class="{{classPrefix}}__list-item-desc">{{item.description}}</view></view></block></view></view><slot/><view wx:if="{{showCancel}}" class="{{classPrefix}}__footer"><view class="{{classPrefix}}__gap-{{theme}}"/><view class="{{classPrefix}}__cancel {{prefix}}-class-cancel" hover-class="{{classPrefix}}__cancel--hover" hover-stay-time="70" bind:tap="onCancel" aria-role="button">{{ cancelText || '取消' }}</view></view></t-popup></view>
|
||||
@@ -0,0 +1,34 @@
|
||||
var utils = require('../common/utils.wxs');
|
||||
|
||||
var getListThemeItemClass = function (props) {
|
||||
var classPrefix = props.classPrefix;
|
||||
var item = props.item;
|
||||
var prefix = props.prefix;
|
||||
var classList = [classPrefix + '__list-item'];
|
||||
if (item.disabled) {
|
||||
classList.push(prefix + '-is-disabled');
|
||||
}
|
||||
return classList.join(' ');
|
||||
};
|
||||
|
||||
var getIconData = function (icon) {
|
||||
if (utils.isString(icon)) {
|
||||
return { name: icon };
|
||||
}
|
||||
|
||||
if (utils.isNoEmptyObj(icon)) {
|
||||
return icon;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
var isImage = function (name) {
|
||||
return name.indexOf('/') !== -1;
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
getListThemeItemClass: getListThemeItemClass,
|
||||
getIconData: getIconData,
|
||||
isImage: isImage,
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
@import '../common/style/index.wxss';.t-action-sheet__content{color:var(--td-action-sheet-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));border-top-left-radius:var(--td-action-sheet-border-radius,var(--td-radius-extraLarge,24rpx));border-top-right-radius:var(--td-action-sheet-border-radius,var(--td-radius-extraLarge,24rpx));background-color:var(--td-bg-color-container,var(--td-font-white-1,#fff));overflow:hidden;}
|
||||
.t-action-sheet__content:focus{outline:0;}
|
||||
.t-action-sheet--grid{padding-top:var(--td-spacer,16rpx);}
|
||||
.t-action-sheet--grid .t-action-sheet__description::after{display:none;}
|
||||
.t-action-sheet--left .t-action-sheet__description{text-align:left;}
|
||||
.t-action-sheet--left .t-action-sheet__list-item-content,.t-action-sheet--left .t-action-sheet__list-item-desc{justify-content:start;}
|
||||
.t-action-sheet--left .t-action-sheet__list-item-icon--suffix{margin-left:auto;}
|
||||
.t-action-sheet__grid{padding-bottom:16rpx;}
|
||||
.t-action-sheet__grid--swiper{padding-bottom:48rpx;}
|
||||
.t-action-sheet__description{color:var(--td-action-sheet-description-color,var(--td-text-color-placeholder,var(--td-font-gray-3,rgba(0,0,0,.4))));font:var(--td-action-sheet-description-font,var(--td-font-body-medium,28rpx / 44rpx var(--td-font-family,PingFang SC,Microsoft YaHei,Arial Regular)));text-align:center;padding:var(--td-spacer-1,24rpx) var(--td-spacer-2,32rpx);position:relative;}
|
||||
.t-action-sheet__description:focus{outline:0;}
|
||||
.t-action-sheet__description::after{content:'';display:block;position:absolute;top:unset;bottom:0;left:unset;right:unset;background-color:var(--td-action-sheet-border-color,var(--td-component-stroke,var(--td-gray-color-3,#e7e7e7)));}
|
||||
.t-action-sheet__description::after{height:1px;left:0;right:0;transform:scaleY(.5);}
|
||||
.t-action-sheet__list-item{flex-direction:column;padding:var(--td-spacer-2,32rpx);display:flex;align-items:center;justify-content:center;}
|
||||
.t-action-sheet__list-item:not(:last-child){position:relative;}
|
||||
.t-action-sheet__list-item:not(:last-child)::after{content:'';display:block;position:absolute;top:unset;bottom:0;left:unset;right:unset;background-color:var(--td-action-sheet-border-color,var(--td-component-stroke,var(--td-gray-color-3,#e7e7e7)));}
|
||||
.t-action-sheet__list-item:not(:last-child)::after{height:1px;left:0;right:0;transform:scaleY(.5);}
|
||||
.t-action-sheet__list-item:focus{outline:0;}
|
||||
.t-action-sheet__list-item--disabled{color:var(--td-action-sheet-disabled-color,var(--td-text-color-disabled,var(--td-font-gray-4,rgba(0,0,0,.26))));}
|
||||
.t-action-sheet__list-item-content,.t-action-sheet__list-item-desc{width:100%;display:flex;align-items:center;justify-content:center;}
|
||||
.t-action-sheet__list-item-text{font:var(--td-font-body-large,32rpx / 48rpx var(--td-font-family,PingFang SC,Microsoft YaHei,Arial Regular));}
|
||||
.t-action-sheet__list-item-desc{font:var(--td-font-body-small,24rpx / 40rpx var(--td-font-family,PingFang SC,Microsoft YaHei,Arial Regular));color:var(--td-action-sheet-description-color,var(--td-text-color-placeholder,var(--td-font-gray-3,rgba(0,0,0,.4))));margin-top:var(--td-spacer,16rpx);}
|
||||
.t-action-sheet__list-item-desc,.t-action-sheet__list-item-text{word-wrap:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||||
.t-action-sheet__list-item-icon{font-size:48rpx;margin-right:var(--td-spacer,16rpx);}
|
||||
.t-action-sheet__list-item-icon--suffix{margin-right:0;margin-left:var(--td-spacer,16rpx);}
|
||||
.t-action-sheet__swiper-wrap{margin-top:8rpx;position:relative;}
|
||||
.t-action-sheet__footer{background-color:var(--td-bg-color-container,var(--td-font-white-1,#fff));}
|
||||
.t-action-sheet__gap-list{height:16rpx;background-color:var(--td-action-sheet-gap-color,var(--td-bg-color-page,var(--td-gray-color-1,#f3f3f3)));}
|
||||
.t-action-sheet__gap-grid{height:1rpx;background-color:var(--td-action-sheet-border-color,var(--td-component-stroke,var(--td-gray-color-3,#e7e7e7)));}
|
||||
.t-action-sheet__cancel{padding:var(--td-spacer-1,24rpx) var(--td-spacer-2,32rpx);font:var(--td-font-body-large,32rpx / 48rpx var(--td-font-family,PingFang SC,Microsoft YaHei,Arial Regular));color:var(--td-action-sheet-cancel-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));display:flex;align-items:center;justify-content:center;}
|
||||
.t-action-sheet__dots{position:absolute;left:50%;bottom:var(--td-spacer-2,32rpx);transform:translateX(-50%);display:flex;flex-direction:row;}
|
||||
.t-action-sheet__dots-item{width:var(--td-action-sheet-dot-size,16rpx);height:var(--td-action-sheet-dot-size,16rpx);background-color:var(--td-action-sheet-dot-color,var(--td-text-color-disabled,var(--td-font-gray-4,rgba(0,0,0,.26))));border-radius:50%;margin:0 var(--td-spacer,16rpx);transition:all .4s ease-in;}
|
||||
.t-action-sheet__dots-item.t-is-active{background-color:var(--td-action-sheet-dot-active-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));}
|
||||
@@ -0,0 +1,8 @@
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
import { ActionSheetItem, ActionSheetTheme, ActionSheetShowOption } from './show';
|
||||
export { ActionSheetItem, ActionSheetTheme, ActionSheetShowOption };
|
||||
declare const _default: {
|
||||
show(options: ActionSheetShowOption): WechatMiniprogram.Component.TrivialInstance;
|
||||
close(options: ActionSheetShowOption): void;
|
||||
};
|
||||
export default _default;
|
||||
@@ -0,0 +1 @@
|
||||
import{show,close,ActionSheetTheme}from"./show";export{ActionSheetTheme};export default{show:e=>show(e),close:e=>close(e)};
|
||||
@@ -0,0 +1,3 @@
|
||||
import { TdActionSheetProps } from './type';
|
||||
declare const props: TdActionSheetProps;
|
||||
export default props;
|
||||
@@ -0,0 +1 @@
|
||||
const props={align:{type:String,value:"center"},cancelText:{type:String,value:""},count:{type:Number,value:8},description:{type:String,value:""},items:{type:Array,required:!0},popupProps:{type:Object,value:{}},showCancel:{type:Boolean,value:!0},showOverlay:{type:Boolean,value:!0},theme:{type:String,value:"list"},usingCustomNavbar:{type:Boolean,value:!1},visible:{type:Boolean,value:null},defaultVisible:{type:Boolean,value:!1}};export default props;
|
||||
@@ -0,0 +1,26 @@
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
import { ActionSheetItem } from './type';
|
||||
export { ActionSheetItem };
|
||||
declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
|
||||
export declare enum ActionSheetTheme {
|
||||
List = "list",
|
||||
Grid = "grid"
|
||||
}
|
||||
interface ActionSheetProps {
|
||||
align: 'center' | 'left';
|
||||
cancelText?: string;
|
||||
count?: number;
|
||||
description: string;
|
||||
items: Array<string | ActionSheetItem>;
|
||||
showCancel?: boolean;
|
||||
theme?: ActionSheetTheme;
|
||||
visible: boolean;
|
||||
defaultVisible?: boolean;
|
||||
}
|
||||
export interface ActionSheetShowOption extends Omit<ActionSheetProps, 'visible'> {
|
||||
context?: Context;
|
||||
selector?: string;
|
||||
}
|
||||
export declare const show: (options: ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
|
||||
export declare const close: (options: ActionSheetShowOption) => void;
|
||||
@@ -0,0 +1 @@
|
||||
import{__rest}from"tslib";import{getInstance}from"../common/utils";export var ActionSheetTheme;!function(t){t.List="list",t.Grid="grid"}(ActionSheetTheme||(ActionSheetTheme={}));export const show=function(t){const e=Object.assign({},t),{context:o,selector:n="#t-action-sheet"}=e,c=__rest(e,["context","selector"]),s=getInstance(o,n);if(s)return s.show(Object.assign({},c)),s;console.error("未找到组件,请确认 selector && context 是否正确")};export const close=function(t){const{context:e,selector:o="#t-action-sheet"}=Object.assign({},t),n=getInstance(e,o);n&&n.close()};
|
||||
@@ -0,0 +1 @@
|
||||
<wxs src="../action-sheet.wxs" module="_this"/><template name="grid"><block wx:if="{{gridThemeItems.length === 1}}"><t-grid align="center" t-class="{{classPrefix}}__grid" column="{{count / 2}}" class="{{classPrefix}}__single-wrap"><t-grid-item t-class="{{classPrefix}}__grid-item" class="{{classPrefix}}__square" wx:for="{{gridThemeItems[0]}}" wx:key="index" bind:tap="onSelect" data-index="{{index}}" icon="{{ { color: item.color, ..._this.getIconData(item.icon) } }}" text="{{item.label || ''}}" description="{{item.description || ''}}" image="{{item.image || ''}}" style="--td-grid-item-text-color: {{item.color}}"></t-grid-item></t-grid></block><block wx:elif="{{gridThemeItems.length > 1}}"><view class="{{classPrefix}}__swiper-wrap"><swiper style="height: 456rpx" autoplay="{{false}}" current="{{currentSwiperIndex}}" bindchange="onSwiperChange"><swiper-item wx:for="{{gridThemeItems}}" wx:key="index"><t-grid align="center" t-class="{{classPrefix}}__grid {{classPrefix}}__grid--swiper" column="{{count / 2}}"><t-grid-item t-class="{{classPrefix}}__grid-item" class="{{classPrefix}}__square" wx:for="{{item}}" wx:key="index" data-index="{{index}}" bind:tap="onSelect" icon="{{ { color: item.color, ..._this.getIconData(item.icon) } }}" text="{{item.label || ''}}" description="{{item.description || ''}}" image="{{item.image || ''}}" style="--td-grid-item-text-color: {{item.color}}"></t-grid-item></t-grid></swiper-item></swiper><view class="{{classPrefix}}__nav"><view class="{{classPrefix}}__dots"><view wx:for="{{gridThemeItems.length}}" wx:key="index" class="{{classPrefix}}__dots-item {{index === currentSwiperIndex ? prefix + '-is-active' : ''}}"/></view></view></view></block></template>
|
||||
@@ -0,0 +1,60 @@
|
||||
import { PopupProps } from '../popup/index';
|
||||
export interface TdActionSheetProps {
|
||||
align?: {
|
||||
type: StringConstructor;
|
||||
value?: 'center' | 'left';
|
||||
};
|
||||
cancelText?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
count?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
description?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
items: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<string | ActionSheetItem>;
|
||||
required?: boolean;
|
||||
};
|
||||
popupProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: PopupProps;
|
||||
};
|
||||
showCancel?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
showOverlay?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: 'list' | 'grid';
|
||||
};
|
||||
usingCustomNavbar?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
visible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
defaultVisible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
}
|
||||
export interface ActionSheetItem {
|
||||
label: string;
|
||||
description?: string;
|
||||
color?: string;
|
||||
disabled?: boolean;
|
||||
icon?: string | object;
|
||||
suffixIcon?: string | object;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export{};
|
||||
@@ -0,0 +1,53 @@
|
||||
import { SuperComponent, ComponentsOptionsType } from '../../../components/common/src/index';
|
||||
import { TdAttachmentsProps } from './type';
|
||||
export interface AttachmentsProps extends TdAttachmentsProps {
|
||||
}
|
||||
export default class Attachments extends SuperComponent {
|
||||
options: ComponentsOptionsType;
|
||||
properties: {
|
||||
inChat: {
|
||||
type: BooleanConstructor;
|
||||
value: boolean;
|
||||
};
|
||||
addable?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
imageViewer?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
items: {
|
||||
type: ArrayConstructor;
|
||||
value?: import("./type").FileItem[];
|
||||
required?: boolean;
|
||||
};
|
||||
removable?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
};
|
||||
data: {
|
||||
classPrefix: string;
|
||||
files: any[];
|
||||
};
|
||||
observers: {
|
||||
items(): void;
|
||||
};
|
||||
methods: {
|
||||
onFileWrapTap(e: any): void;
|
||||
onRemoveTap(e: any): void;
|
||||
handleFileClick(item: any): void;
|
||||
handleRemove(item: any, index: any): void;
|
||||
renderDesc(item: any): string;
|
||||
renderIcon(item: any): any;
|
||||
renderFileType(item: any): any;
|
||||
renderExtension(item: any): any;
|
||||
setFiles(): void;
|
||||
};
|
||||
lifetimes: {
|
||||
created(): void;
|
||||
attached(): void;
|
||||
detached(): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";const{prefix:prefix}=config,name=`${prefix}-attachments`;let Attachments=class extends SuperComponent{constructor(){super(...arguments),this.options={multipleSlots:!0},this.properties=Object.assign(Object.assign({},props),{inChat:{type:Boolean,value:!1}}),this.data={classPrefix:name,files:[]},this.observers={items(){this.setFiles()}},this.methods={onFileWrapTap(e){var i;const{index:t}=e.currentTarget.dataset||{},o=null===(i=this.data.files)||void 0===i?void 0:i[t];o&&this.handleFileClick(o)},onRemoveTap(e){var i;const{index:t}=e.currentTarget.dataset||{},o=null===(i=this.data.files)||void 0===i?void 0:i[t];"function"==typeof(null==e?void 0:e.stopPropagation)&&e.stopPropagation(),void 0!==o&&this.handleRemove(o,t)},handleFileClick(e){this.data.imageViewer&&"image"===e.fileType&&wx.previewImage({urls:[e.url]}),this.triggerEvent("fileClick",{item:e})},handleRemove(e,i){this.triggerEvent("remove",{item:e,index:i})},renderDesc(e){const i=e.size||0;let t,o;if(i<1024)t=i,o="B";else if(i<1048576){const e=i/1024;t=e%1==0?e:e.toFixed(2),o="KB"}else{const e=i/1048576;t=e%1==0?e:e.toFixed(2),o="MB"}return`${t} ${o}`},renderIcon(e){const i={file:{name:"file-zip-filled",color:"#E37318"},video:{name:"video-filled",color:"#D54941"},pdf:{name:"file-pdf-filled",color:"#D54941"},doc:{name:"file-word-filled",color:"#0052d9"},excel:{name:"file-excel-filled",color:"#2BA471"},ppt:{name:"file-powerpoint-filled",color:"#E37318"},audio:{name:"video-filled",color:"#D54941"}};return i[e.fileType]||i.file},renderFileType(e){if(e.fileType)return e.fileType;if(["image","video","audio","pdf","doc","ppt","txt","excel"].includes(e.type))return e.fileType;const i=e.url||"",t=i.lastIndexOf(".");return{jpg:"image",jpeg:"image",png:"image",gif:"image",bmp:"image",webp:"image",mp4:"video",mov:"video",avi:"video",mkv:"video",webm:"video",mp3:"audio",wav:"audio",ogg:"audio",aac:"audio",pdf:"pdf",doc:"doc",docx:"doc",ppt:"ppt",pptx:"ppt",xls:"excel",xlsx:"excel",txt:"txt"}[-1!==t?i.substring(t+1).toLowerCase():""]||""},renderExtension(e){if(e.extension)return e.extension;return e.extension||(e.url?e.url.split(".").pop().toLowerCase():"")},setFiles(){this.setData({files:this.properties.items.map(e=>Object.assign(Object.assign({},e),{fileType:this.data.renderFileType(e),desc:this.data.renderDesc(e),fileIcon:this.data.renderIcon(e)}))})}},this.lifetimes={created(){this.data.handleFileClick=this.handleFileClick.bind(this),this.data.handleRemove=this.handleRemove.bind(this),this.data.renderDesc=this.renderDesc.bind(this),this.data.renderIcon=this.renderIcon.bind(this),this.data.renderFileType=this.renderFileType.bind(this),this.data.renderExtension=this.renderExtension.bind(this)},attached(){this.setFiles()},detached(){}}}};Attachments=__decorate([wxComponent()],Attachments);export default Attachments;
|
||||
@@ -0,0 +1 @@
|
||||
{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-icon":"../icon/icon","t-image":"../image/image","t-loading":"../loading/loading"}}
|
||||
@@ -0,0 +1 @@
|
||||
<wxs src="./attachments.wxs" module="_this"/><wxs src="../common/utils.wxs" module="_"/><view class="{{classPrefix}} {{[inChat ? classPrefix + '--chatting' : '', _this.getFileTypeClass(inChat, files)]}}" style="{{_._style([style, customStyle])}}"><view class="{{classPrefix}}__left"><view class="{{classPrefix}}__scrollable scroll-x"><block wx:for="{{files}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="{{classPrefix}}__files" bindtap="onFileWrapTap" data-index="{{index}}"><block wx:if="{{item.fileType==='image'}}"><view class="file-image {{classPrefix}}__file {{removable ? classPrefix + '__file--removable' : ''}}"><block wx:if="{{item.status==='pending' || item.status==='fail' || item.status==='error'}}"><view class="{{item.status}} {{classPrefix}}__file--{{item.status}}"><t-loading theme="circular" size="48rpx"/></view></block><block wx:else><image class="image" src="{{item.url}}" mode="{{_this.getImageMode(item)}}" lazy-load="false" style="{{inChat ? _this.imageStyle(item) : ''}}"></image></block><view wx:if="{{removable}}" class="{{classPrefix}}__remove"><t-icon data-index="{{index}}" name="multiply" size="16px" catchtap="onRemoveTap"/></view></view></block><block wx:else><view class="file {{classPrefix}}__file {{removable ? classPrefix + '__file--removable' : ''}}"><view class="image"><block wx:if="{{item.status==='pending'}}"><view class="loading {{classPrefix}}__file--pending"><t-loading theme="circular" size="48rpx"/></view></block><block wx:elif="{{item.status==='fail'}}"><view class="fail {{classPrefix}}__file--fail"><t-loading theme="circular" size="48rpx"/></view></block><block wx:elif="{{item.status==='error'}}"><view class="error {{classPrefix}}__file--error"><t-loading theme="circular" size="48rpx"/></view></block><block wx:else><t-icon name="{{item.fileIcon.name}}" color="{{item.fileIcon.color}}" size="48rpx"></t-icon></block></view><view class="{{classPrefix}}__content"><view class="{{classPrefix}}__title">{{item.name}}</view><block><view wx:if="{{item.status==='pending'}}" class="{{classPrefix}}__desc">上传中...{{item.progress || 0+"%"}}</view><view wx:elif="{{item.status==='fail'}}" class="{{classPrefix}}__desc">上传失败</view><view wx:elif="{{item.status==='error'}}" class="{{classPrefix}}__desc">{{item.errorMessage}}</view><view wx:else class="{{classPrefix}}__desc">{{item.desc}}</view></block></view><view wx:if="{{removable}}" class="{{classPrefix}}__remove"><t-icon data-index="{{index}}" name="multiply" size="16px" catchtap="onRemoveTap"/></view></view></block></view></block></view></view></view>
|
||||
@@ -0,0 +1,53 @@
|
||||
var utils = require('../common/utils.wxs');
|
||||
|
||||
function imageStyle(imageProps) {
|
||||
if (imageProps && imageProps.width && imageProps.height) {
|
||||
return utils._style({
|
||||
width: utils.addUnit(imageProps.width),
|
||||
height: utils.addUnit(imageProps.height),
|
||||
});
|
||||
}
|
||||
// 兜底逻辑：没有传入 width 和 height 时，使用默认最大宽高尺寸
|
||||
return utils._style({
|
||||
width: '400rpx',
|
||||
height: '400rpx',
|
||||
});
|
||||
}
|
||||
|
||||
function getImageMode(imageProps) {
|
||||
if (imageProps && imageProps.width && imageProps.height) {
|
||||
return imageProps.width > imageProps.height ? 'widthFix' : 'heightFix';
|
||||
}
|
||||
// 兜底逻辑：没有传入 width 和 height 时，使用 aspectFit 保持图片比例
|
||||
return imageProps && imageProps.mode ? imageProps.mode : 'scaleToFill';
|
||||
}
|
||||
|
||||
function getFileTypeClass(inChat, files) {
|
||||
// 如果 inChat 不为 true，返回空字符串
|
||||
if (!inChat) {
|
||||
return '';
|
||||
}
|
||||
|
||||
// 如果 files 为空或不存在，返回空字符串
|
||||
if (!files || files.length === 0) {
|
||||
return '';
|
||||
}
|
||||
|
||||
// 检查是否所有文件的 fileType 都是 'image'
|
||||
var allImages = true;
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
if (files[i].fileType !== 'image') {
|
||||
allImages = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 根据判断结果返回相应的类名
|
||||
return allImages ? 'all_images' : 'all_files';
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
imageStyle: imageStyle,
|
||||
getImageMode: getImageMode,
|
||||
getFileTypeClass: getFileTypeClass,
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
@import '../common/style/index.wxss';.t-attachments{display:flex;width:100%;height:auto;}
|
||||
.t-attachments__scrollable{height:100%;display:flex;align-items:center;justify-content:flex-start;}
|
||||
.t-attachments .scroll-x{white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;}
|
||||
.t-attachments .scroll-x::-webkit-scrollbar{display:none;}
|
||||
.t-attachments .wrap{flex-wrap:wrap;overflow-x:hidden;}
|
||||
.t-attachments__left{flex:1;overflow:hidden;}
|
||||
.t-attachments__file--error,.t-attachments__file--fail,.t-attachments__file--pending,.t-attachments__file--success{position:absolute;width:100%;height:100%;top:0;left:0;border-radius:var(--td-radius-extraLarge,24rpx);display:flex;flex-direction:column;align-items:center;justify-content:center;}
|
||||
.t-attachments__files{box-sizing:border-box;margin-left:16rpx;}
|
||||
.t-attachments__files:first-of-type{margin-left:0;}
|
||||
.t-attachments__file{border-radius:var(--td-radius-extraLarge,24rpx);display:block;position:relative;background-color:var(--td-bg-color-secondarycontainer,var(--td-gray-color-1,#f3f3f3));overflow:visible;}
|
||||
.t-attachments__file--removable{margin-top:12rpx;margin-right:8rpx;}
|
||||
.t-attachments__file .t-attachments__remove{background-color:var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9)));color:var(--td-bg-color-container,var(--td-font-white-1,#fff));border-radius:var(--td-radius-circle,50%);position:absolute;right:-8rpx;top:-8rpx;}
|
||||
.t-attachments__file.file-image{width:104rpx;height:104rpx;}
|
||||
.t-attachments__file.file-image .image{width:100%;height:100%;border-radius:var(--td-radius-extraLarge,24rpx);}
|
||||
.t-attachments__file.file{width:256rpx;height:104rpx;display:flex;align-items:stretch;justify-content:flex-start;padding:0 24rpx;}
|
||||
.t-attachments__file.file .image{width:64rpx;height:auto;box-sizing:border-box;overflow:hidden;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;}
|
||||
.t-attachments__file.file .image image{width:100%;height:100%;}
|
||||
.t-attachments__file.file .t-attachments__content{flex:1;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;margin-left:16rpx;}
|
||||
.t-attachments__file.file .t-attachments__content .t-attachments__title{width:100%;color:var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9)));font:var(--td-font-body-medium,28rpx / 44rpx var(--td-font-family,PingFang SC,Microsoft YaHei,Arial Regular));font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:-2rpx;padding:0;}
|
||||
.t-attachments__file.file .t-attachments__content .t-attachments__desc{width:100%;color:var(--td-text-color-placeholder,var(--td-font-gray-3,rgba(0,0,0,.4)));font:var(--td-font-body-small,24rpx / 40rpx var(--td-font-family,PingFang SC,Microsoft YaHei,Arial Regular));font-style:normal;margin-top:-4rpx;}
|
||||
.t-attachments--chatting.all_images{width:100%;}
|
||||
.t-attachments--chatting.all_images .file-image.t-attachments__file{background-color:transparent!important;}
|
||||
.t-attachments--chatting.all_images .file-image{width:auto;height:auto;}
|
||||
.t-attachments--chatting.all_images .file-image .image{max-width:400rpx;max-height:400rpx;border-radius:var(--td-radius-extraLarge,24rpx);}
|
||||
.t-attachments--chatting.all_files{width:auto;}
|
||||
.t-attachments--chatting.all_files .t-attachments__files:not(:last-child){margin-bottom:16rpx;}
|
||||
.t-attachments--chatting.all_files .file-image.t-attachments__file{background-color:transparent!important;}
|
||||
.t-attachments--chatting.all_files .file-image{width:auto;height:auto;}
|
||||
.t-attachments--chatting.all_files .file-image .image{max-width:400rpx;max-height:400rpx;border-radius:var(--td-radius-extraLarge,24rpx);}
|
||||
.t-attachments--chatting.all_files .t-attachments__files{margin-left:0;}
|
||||
.t-attachments--chatting.all_files .t-attachments__scrollable{display:contents;}
|
||||
.t-attachments--chatting.all_files .file.t-attachments__file{width:352rpx;}
|
||||
.t-chat__inner.right .t-attachments--chatting .file-image.t-attachments__file{text-align:right;}
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './props';
|
||||
export * from './type';
|
||||
export * from './attachments';
|
||||
@@ -0,0 +1 @@
|
||||
export*from"./props";export*from"./type";export*from"./attachments";
|
||||
@@ -0,0 +1,3 @@
|
||||
import { TdAttachmentsProps } from './type';
|
||||
declare const props: TdAttachmentsProps;
|
||||
export default props;
|
||||
@@ -0,0 +1 @@
|
||||
const props={addable:{type:Boolean,value:!0},imageViewer:{type:Boolean,value:!0},items:{type:Array,value:[],required:!0},removable:{type:Boolean,value:!0}};export default props;
|
||||
@@ -0,0 +1,32 @@
|
||||
export interface TdAttachmentsProps {
|
||||
addable?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
imageViewer?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
items: {
|
||||
type: ArrayConstructor;
|
||||
value?: FileItem[];
|
||||
required?: boolean;
|
||||
};
|
||||
removable?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
}
|
||||
export interface FileItem {
|
||||
fileType: 'image' | 'video' | 'audio' | 'pdf' | 'doc' | 'ppt' | 'txt';
|
||||
name: string;
|
||||
url: string;
|
||||
size: number;
|
||||
status?: 'success' | 'fail' | 'pending' | 'error';
|
||||
progress?: number;
|
||||
errorMessage?: string;
|
||||
fileIcon?: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
mode?: 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'scaleToFill';
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export{};
|
||||
@@ -0,0 +1,28 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class AvatarGroup extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
properties: import("./type").TdAvatarGroupProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
hasChild: boolean;
|
||||
length: number;
|
||||
className: string;
|
||||
};
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
relations: RelationsOptions;
|
||||
lifetimes: {
|
||||
attached(): void;
|
||||
ready(): void;
|
||||
};
|
||||
observers: {
|
||||
'cascading, size'(): void;
|
||||
};
|
||||
methods: {
|
||||
setClass(): void;
|
||||
handleMax(): void;
|
||||
onCollapsedItemClick(e: WechatMiniprogram.CustomEvent): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import avatarGroupProps from"./props";const{prefix:prefix}=config,name=`${prefix}-avatar-group`;let AvatarGroup=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-content`,`${prefix}-class-image`],this.properties=avatarGroupProps,this.data={prefix:prefix,classPrefix:name,hasChild:!0,length:0,className:""},this.options={multipleSlots:!0},this.relations={"../avatar/avatar":{type:"descendant"}},this.lifetimes={attached(){this.setClass()},ready(){this.setData({length:this.$children.length}),this.handleMax()}},this.observers={"cascading, size"(){this.setClass()}},this.methods={setClass(){const{cascading:e,size:t}=this.properties,s=e.split("-")[0],a=[name,`${prefix}-class`,`${name}-offset-${s}`,`${name}-offset-${s}-${t.indexOf("px")>-1?"medium":t||"medium"}`];this.setData({className:a.join(" ")})},handleMax(){const{max:e}=this.data,t=this.$children.length;if(!e||e>t)return;this.$children.splice(e,t-e).forEach(e=>{e.hide()})},onCollapsedItemClick(e){this.triggerEvent("collapsed-item-click",e.detail)}}}};AvatarGroup=__decorate([wxComponent()],AvatarGroup);export default AvatarGroup;
|
||||
@@ -0,0 +1 @@
|
||||
{"component":true,"styleIsolation":"shared","usingComponents":{"t-avatar":"../avatar/avatar"}}
|
||||
@@ -0,0 +1 @@
|
||||
<wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="{{className}} class"><slot/><view class="{{classPrefix}}__collapse--slot"><slot name="collapse-avatar"/></view><view class="{{classPrefix}}__collapse--default" wx:if="{{max && (max < length)}}" bindtap="onCollapsedItemClick"><t-avatar t-class-image="{{prefix}}-avatar--border {{prefix}}-avatar--border-{{size}} {{prefix}}-class-image" t-class-content="{{prefix}}-class-content" size="{{size}}" shape="{{shape}}" icon="{{ collapseAvatar ? '' : 'user-add'}}" aria-role="none">{{collapseAvatar}}</t-avatar></view></view>
|
||||
@@ -0,0 +1,59 @@
|
||||
@import '../common/style/index.wxss';.t-avatar-group{display:inline-flex;flex-wrap:wrap;align-items:center;}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper,.t-avatar-group-offset-right .t-avatar__wrapper{padding:var(--td-avatar-group-line-spacing,4rpx) 0;}
|
||||
.t-avatar-group-offset-left-small,.t-avatar-group-offset-right-small{--td-avatar-margin-left:var(--td-avatar-group-margin-left-small, -16rpx);}
|
||||
.t-avatar-group-offset-left-medium,.t-avatar-group-offset-right-medium{--td-avatar-margin-left:var(--td-avatar-group-margin-left-medium, -16rpx);}
|
||||
.t-avatar-group-offset-left-large,.t-avatar-group-offset-right-large{--td-avatar-margin-left:var(--td-avatar-group-margin-left-large, -16rpx);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(1){z-index:calc(var(--td-avatar-group-init-z-index,50) - 1);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(2){z-index:calc(var(--td-avatar-group-init-z-index,50) - 2);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(3){z-index:calc(var(--td-avatar-group-init-z-index,50) - 3);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(4){z-index:calc(var(--td-avatar-group-init-z-index,50) - 4);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(5){z-index:calc(var(--td-avatar-group-init-z-index,50) - 5);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(6){z-index:calc(var(--td-avatar-group-init-z-index,50) - 6);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(7){z-index:calc(var(--td-avatar-group-init-z-index,50) - 7);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(8){z-index:calc(var(--td-avatar-group-init-z-index,50) - 8);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(9){z-index:calc(var(--td-avatar-group-init-z-index,50) - 9);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(10){z-index:calc(var(--td-avatar-group-init-z-index,50) - 10);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(11){z-index:calc(var(--td-avatar-group-init-z-index,50) - 11);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(12){z-index:calc(var(--td-avatar-group-init-z-index,50) - 12);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(13){z-index:calc(var(--td-avatar-group-init-z-index,50) - 13);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(14){z-index:calc(var(--td-avatar-group-init-z-index,50) - 14);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(15){z-index:calc(var(--td-avatar-group-init-z-index,50) - 15);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(16){z-index:calc(var(--td-avatar-group-init-z-index,50) - 16);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(17){z-index:calc(var(--td-avatar-group-init-z-index,50) - 17);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(18){z-index:calc(var(--td-avatar-group-init-z-index,50) - 18);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(19){z-index:calc(var(--td-avatar-group-init-z-index,50) - 19);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(20){z-index:calc(var(--td-avatar-group-init-z-index,50) - 20);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(21){z-index:calc(var(--td-avatar-group-init-z-index,50) - 21);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(22){z-index:calc(var(--td-avatar-group-init-z-index,50) - 22);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(23){z-index:calc(var(--td-avatar-group-init-z-index,50) - 23);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(24){z-index:calc(var(--td-avatar-group-init-z-index,50) - 24);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(25){z-index:calc(var(--td-avatar-group-init-z-index,50) - 25);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(26){z-index:calc(var(--td-avatar-group-init-z-index,50) - 26);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(27){z-index:calc(var(--td-avatar-group-init-z-index,50) - 27);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(28){z-index:calc(var(--td-avatar-group-init-z-index,50) - 28);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(29){z-index:calc(var(--td-avatar-group-init-z-index,50) - 29);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(30){z-index:calc(var(--td-avatar-group-init-z-index,50) - 30);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(31){z-index:calc(var(--td-avatar-group-init-z-index,50) - 31);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(32){z-index:calc(var(--td-avatar-group-init-z-index,50) - 32);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(33){z-index:calc(var(--td-avatar-group-init-z-index,50) - 33);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(34){z-index:calc(var(--td-avatar-group-init-z-index,50) - 34);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(35){z-index:calc(var(--td-avatar-group-init-z-index,50) - 35);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(36){z-index:calc(var(--td-avatar-group-init-z-index,50) - 36);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(37){z-index:calc(var(--td-avatar-group-init-z-index,50) - 37);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(38){z-index:calc(var(--td-avatar-group-init-z-index,50) - 38);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(39){z-index:calc(var(--td-avatar-group-init-z-index,50) - 39);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(40){z-index:calc(var(--td-avatar-group-init-z-index,50) - 40);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(41){z-index:calc(var(--td-avatar-group-init-z-index,50) - 41);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(42){z-index:calc(var(--td-avatar-group-init-z-index,50) - 42);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(43){z-index:calc(var(--td-avatar-group-init-z-index,50) - 43);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(44){z-index:calc(var(--td-avatar-group-init-z-index,50) - 44);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(45){z-index:calc(var(--td-avatar-group-init-z-index,50) - 45);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(46){z-index:calc(var(--td-avatar-group-init-z-index,50) - 46);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(47){z-index:calc(var(--td-avatar-group-init-z-index,50) - 47);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(48){z-index:calc(var(--td-avatar-group-init-z-index,50) - 48);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(49){z-index:calc(var(--td-avatar-group-init-z-index,50) - 49);}
|
||||
.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(50){z-index:calc(var(--td-avatar-group-init-z-index,50) - 50);}
|
||||
.t-avatar-group__collapse--default,.t-avatar-group__collapse--slot{z-index:0;font-weight:600;}
|
||||
.t-avatar-group__collapse--slot{float:left;}
|
||||
.t-avatar-group__collapse--slot:not(:empty)+.t-avatar-group__collapse--default{display:none;float:left;}
|
||||
.t-avatar-group__collapse--slot:empty+.t-avatar-group__collapse--default{display:block;float:left;}
|
||||
@@ -0,0 +1,3 @@
|
||||
import { TdAvatarGroupProps } from './type';
|
||||
declare const props: TdAvatarGroupProps;
|
||||
export default props;
|
||||
@@ -0,0 +1 @@
|
||||
const props={cascading:{type:String,value:"left-up"},collapseAvatar:{type:String},max:{type:Number},shape:{type:String},size:{type:String,value:""}};export default props;
|
||||
@@ -0,0 +1,24 @@
|
||||
import { ShapeEnum } from '../common/common';
|
||||
export interface TdAvatarGroupProps {
|
||||
cascading?: {
|
||||
type: StringConstructor;
|
||||
value?: CascadingValue;
|
||||
};
|
||||
collapseAvatar?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
max?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
shape?: {
|
||||
type: StringConstructor;
|
||||
value?: ShapeEnum;
|
||||
};
|
||||
size?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
}
|
||||
export declare type CascadingValue = 'left-up' | 'right-up';
|
||||
@@ -0,0 +1 @@
|
||||
export{};
|
||||
@@ -0,0 +1,22 @@
|
||||
/// <reference types="miniprogram-api-typings" />
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class Avatar extends SuperComponent {
|
||||
options: WechatMiniprogram.Component.ComponentOptions;
|
||||
externalClasses: string[];
|
||||
properties: import("./type").TdAvatarProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
isShow: boolean;
|
||||
zIndex: number;
|
||||
windowWidth: number;
|
||||
};
|
||||
relations: RelationsOptions;
|
||||
observers: {
|
||||
icon(icon: any): void;
|
||||
};
|
||||
methods: {
|
||||
hide(): void;
|
||||
onLoadError(e: WechatMiniprogram.CustomEvent): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import avatarProps from"./props";import{setIcon,systemInfo}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-avatar`;let Avatar=class extends SuperComponent{constructor(){super(...arguments),this.options={multipleSlots:!0},this.externalClasses=[`${prefix}-class`,`${prefix}-class-image`,`${prefix}-class-icon`,`${prefix}-class-alt`,`${prefix}-class-content`],this.properties=avatarProps,this.data={prefix:prefix,classPrefix:name,isShow:!0,zIndex:0,windowWidth:systemInfo.windowWidth},this.relations={"../avatar-group/avatar-group":{type:"ancestor",linked(t){this.parent=t,this.setData({shape:this.data.shape||t.data.shape||"circle",size:this.data.size||t.data.size,bordered:!0})}}},this.observers={icon(t){const e=setIcon("icon",t,"");this.setData(Object.assign({},e))}},this.methods={hide(){this.setData({isShow:!1})},onLoadError(t){this.properties.hideOnLoadFailed&&this.setData({isShow:!1}),this.triggerEvent("error",t.detail)}}}};Avatar=__decorate([wxComponent()],Avatar);export default Avatar;
|
||||
@@ -0,0 +1 @@
|
||||
{"component":true,"styleIsolation":"shared","usingComponents":{"t-icon":"../icon/icon","t-badge":"../badge/badge","t-image":"../image/image"}}
|
||||
@@ -0,0 +1 @@
|
||||
<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><wxs src="./avatar.wxs" module="_this"/><view class="{{classPrefix}}__wrapper class {{prefix}}-class" style="{{_._style([_this.getStyles(isShow), style, customStyle])}}"><t-badge color="{{badgeProps.color || ''}}" content="{{badgeProps.content || ''}}" count="{{badgeProps.count || 0}}" dot="{{badgeProps.dot || false}}" max-count="{{badgeProps.maxCount || 99}}" offset="{{badgeProps.offset || []}}" shape="{{badgeProps.shape || 'circle'}}" show-zero="{{badgeProps.showZero || false}}" size="{{badgeProps.size || 'medium'}}" t-class="{{badgeProps.tClass}}" t-class-content="{{badgeProps.tClassContent}}" t-class-count="{{badgeProps.tClassCount}}"><view class="{{_this.getClass(classPrefix, size || 'medium', shape, bordered)}} {{prefix}}-class-image" style="{{_this.getSize(size, windowWidth)}}" aria-label="{{ ariaLabel || alt ||'头像'}}" aria-role="{{ ariaRole || 'img'}}" aria-hidden="{{ ariaHidden }}"><t-image wx:if="{{image}}" t-class="{{prefix}}-image {{classPrefix}}__image" t-class-load="{{prefix}}-class-alt" style="{{imageProps && imageProps.style || ''}}" src="{{image}}" mode="{{imageProps && imageProps.mode || 'aspectFill'}}" lazy="{{imageProps && imageProps.lazy || false}}" loading="{{imageProps && imageProps.loading || 'default'}}" shape="{{imageProps && imageProps.shape || 'round'}}" webp="{{imageProps && imageProps.webp || false}}" error="{{alt || 'default'}}" bind:error="onLoadError"/><template wx:elif="{{iconName || _.isNoEmptyObj(iconData)}}" is="icon" data="{{tClass: classPrefix + '__icon ' + prefix + '-class-icon', name: iconName, ...iconData}}"/><view wx:else class="{{classPrefix}}__text {{prefix}}-class-content"><slot/></view></view></t-badge></view>
|
||||
@@ -0,0 +1,30 @@
|
||||
module.exports = {
|
||||
getClass: function (classPrefix, size, shape, bordered) {
|
||||
var hasPx = (size || '').indexOf('px') > -1;
|
||||
var borderSize = hasPx ? 'medium' : size;
|
||||
var classNames = [
|
||||
classPrefix,
|
||||
classPrefix + (shape === 'round' ? '--round' : '--circle'),
|
||||
bordered ? classPrefix + '--border' + ' ' + classPrefix + '--border-' + borderSize : '',
|
||||
hasPx ? '' : classPrefix + '--' + size,
|
||||
];
|
||||
return classNames.join(' ');
|
||||
},
|
||||
|
||||
getSize: function (size = 'medium', windowWidth) {
|
||||
var res = getRegExp('^([0-9]+)(px|rpx)$').exec(size);
|
||||
|
||||
if (res && res.length >= 3) {
|
||||
var px = res[1];
|
||||
if (res[2] === 'rpx') {
|
||||
px = Math.floor((windowWidth * res[1]) / 750);
|
||||
}
|
||||
|
||||
return 'width:' + size + ';height:' + size + ';font-size:' + ((px / 8) * 3 + 2) + 'px';
|
||||
}
|
||||
},
|
||||
|
||||
getStyles: function (isShow) {
|
||||
return isShow ? '' : 'display: none;';
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,17 @@
|
||||
@import '../common/style/index.wxss';.t-avatar{display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--td-avatar-bg-color,var(--td-brand-color-light-active,var(--td-primary-color-2,#d9e1ff)));color:var(--td-avatar-content-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));}
|
||||
.t-avatar__wrapper{display:inline-flex;position:relative;vertical-align:top;margin-left:var(--td-avatar-margin-left,0);}
|
||||
.t-avatar--large{width:var(--td-avatar-large-width,128rpx);height:var(--td-avatar-large-width,128rpx);font-size:var(--td-avatar-text-large-font-size,var(--td-font-size-xl,40rpx));}
|
||||
.t-avatar--large .t-avatar__icon{font-size:var(--td-avatar-icon-large-font-size,64rpx);}
|
||||
.t-avatar--medium{width:var(--td-avatar-medium-width,96rpx);height:var(--td-avatar-medium-width,96rpx);font-size:var(--td-avatar-text-medium-font-size,var(--td-font-size-m,32rpx));}
|
||||
.t-avatar--medium .t-avatar__icon{font-size:var(--td-avatar-icon-medium-font-size,48rpx);}
|
||||
.t-avatar--small{width:var(--td-avatar-small-width,80rpx);height:var(--td-avatar-small-width,80rpx);font-size:var(--td-avatar-text-small-font-size,var(--td-font-size-base,28rpx));}
|
||||
.t-avatar--small .t-avatar__icon{font-size:var(--td-avatar-icon-small-font-size,40rpx);}
|
||||
.t-avatar .t-image,.t-avatar__image{width:100%;height:100%;}
|
||||
.t-avatar--circle{border-radius:var(--td-avatar-circle-border-radius,var(--td-radius-circle,50%));overflow:hidden;}
|
||||
.t-avatar--round{border-radius:var(--td-avatar-round-border-radius,var(--td-radius-default,12rpx));overflow:hidden;}
|
||||
.t-avatar__icon,.t-avatar__text{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
|
||||
.t-avatar__icon:empty,.t-avatar__text:empty{width:0;height:0;}
|
||||
.t-avatar--border{border-color:var(--td-avatar-border-color,#fff);border-style:solid;}
|
||||
.t-avatar--border-small{border-width:var(--td-avatar-border-width-small,2rpx);}
|
||||
.t-avatar--border-medium{border-width:var(--td-avatar-border-width-medium,4rpx);}
|
||||
.t-avatar--border-large{border-width:var(--td-avatar-border-width-large,6rpx);}
|
||||
@@ -0,0 +1,3 @@
|
||||
import { TdAvatarProps } from './type';
|
||||
declare const props: TdAvatarProps;
|
||||
export default props;
|
||||
@@ -0,0 +1 @@
|
||||
const props={alt:{type:String,value:""},badgeProps:{type:Object},bordered:{type:Boolean,value:!1},hideOnLoadFailed:{type:Boolean,value:!1},icon:{type:null},image:{type:String,value:""},imageProps:{type:Object},shape:{type:String},size:{type:String,value:""}};export default props;
|
||||
@@ -0,0 +1,41 @@
|
||||
import { BadgeProps } from '../badge/index';
|
||||
import { ImageProps } from '../image/index';
|
||||
import { ShapeEnum } from '../common/common';
|
||||
export interface TdAvatarProps {
|
||||
alt?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
badgeProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: BadgeProps;
|
||||
};
|
||||
bordered?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
hideOnLoadFailed?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: string | object;
|
||||
};
|
||||
image?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
imageProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: ImageProps;
|
||||
};
|
||||
shape?: {
|
||||
type: StringConstructor;
|
||||
value?: ShapeEnum;
|
||||
};
|
||||
size?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export{};
|
||||
@@ -0,0 +1,26 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class BackTop extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
properties: import("./type").TdBackTopProps;
|
||||
relations: RelationsOptions;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
_icon: any;
|
||||
hidden: boolean;
|
||||
};
|
||||
observers: {
|
||||
icon(): void;
|
||||
scrollTop(value: number): void;
|
||||
};
|
||||
lifetimes: {
|
||||
ready(): void;
|
||||
};
|
||||
methods: {
|
||||
setIcon(v: any): void;
|
||||
toTop(): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{calcIcon}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-back-top`;let BackTop=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-icon`,`${prefix}-class-text`],this.options={multipleSlots:!0},this.properties=props,this.relations={"../pull-down-refresh/pull-down-refresh":{type:"ancestor"}},this.data={prefix:prefix,classPrefix:name,_icon:null,hidden:!0},this.observers={icon(){this.setIcon()},scrollTop(o){const{visibilityHeight:t}=this.properties;this.setData({hidden:o<t})}},this.lifetimes={ready(){const{icon:o}=this.properties;this.setIcon(o)}},this.methods={setIcon(o){this.setData({_icon:calcIcon(o,"backtop")})},toTop(){var o;this.triggerEvent("to-top"),this.$parent?(null===(o=this.$parent)||void 0===o||o.setScrollTop(0),this.setData({hidden:!0})):wx.pageScrollTo({scrollTop:0,duration:300})}}}};BackTop=__decorate([wxComponent()],BackTop);export default BackTop;
|
||||
@@ -0,0 +1 @@
|
||||
{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-icon":"../icon/icon"}}
|
||||
@@ -0,0 +1 @@
|
||||
<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="class {{prefix}}-class {{_.cls(classPrefix, [['fixed', fixed], theme])}}" bindtap="toTop" aria-role="button" hidden="{{hidden}}"><view class="{{classPrefix}}__icon" aria-hidden><slot name="icon"/><template wx:if="{{_icon}}" is="icon" data="{{tClass: prefix + '-class-icon', ..._icon }}"/></view><view wx:if="{{!!text}}" class="{{classPrefix}}__text--{{theme}} {{prefix}}-class-text">{{text}}</view><slot/></view>
|
||||
@@ -0,0 +1,10 @@
|
||||
@import '../common/style/index.wxss';.t-back-top{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:transparent;overflow:hidden;box-sizing:border-box;transition:height .2s;height:auto;}
|
||||
.t-back-top--fixed{position:fixed;right:var(--td-spacer,16rpx);bottom:calc(var(--td-spacer-2,32rpx) + env(safe-area-inset-bottom));}
|
||||
.t-back-top--round,.t-back-top--round-dark{width:96rpx;height:96rpx;border-radius:var(--td-back-top-round-border-radius,var(--td-radius-circle,50%));}
|
||||
.t-back-top--half-round,.t-back-top--round{color:var(--td-back-top-round-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));border:1rpx solid var(--td-back-top-round-border-color,var(--td-component-border,var(--td-gray-color-4,#dcdcdc)));background-color:var(--td-back-top-round-bg-color,var(--td-bg-color-container,var(--td-font-white-1,#fff)));}
|
||||
.t-back-top--half-round-dark,.t-back-top--round-dark{color:var(--td-back-top-round-dark-color,var(--td-text-color-anti,var(--td-font-white-1,#fff)));background-color:var(--td-back-top-round-dark-bg-color,var(--td-gray-color-13,#242424));}
|
||||
.t-back-top--half-round,.t-back-top--half-round-dark{width:120rpx;height:80rpx;border-radius:0;border-top-left-radius:var(--td-back-top-half-round-border-radius,var(--td-radius-round,999px));border-bottom-left-radius:var(--td-back-top-half-round-border-radius,var(--td-radius-round,999px));flex-direction:row;right:0;}
|
||||
.t-back-top__text--half-round,.t-back-top__text--half-round-dark,.t-back-top__text--round,.t-back-top__text--round-dark{font-weight:600;font-size:var(--td-font-size,20rpx);line-height:24rpx;}
|
||||
.t-back-top__text--half-round,.t-back-top__text--half-round-dark{width:48rpx;}
|
||||
.t-back-top__icon:not(:empty)+.t-back-top__text--half-round,.t-back-top__icon:not(:empty)+.t-back-top__text--half-round-dark{margin-left:8rpx;}
|
||||
.t-back-top__icon{display:flex;justify-content:center;align-items:center;font-size:44rpx;}
|
||||
@@ -0,0 +1,3 @@
|
||||
import { TdBackTopProps } from './type';
|
||||
declare const props: TdBackTopProps;
|
||||
export default props;
|
||||
@@ -0,0 +1 @@
|
||||
const props={fixed:{type:Boolean,value:!0},icon:{type:null,value:!0},scrollTop:{type:Number,value:0},text:{type:String,value:""},theme:{type:String,value:"round"},visibilityHeight:{type:Number,value:200}};export default props;
|
||||
@@ -0,0 +1,26 @@
|
||||
export interface TdBackTopProps {
|
||||
fixed?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: string | boolean | object;
|
||||
};
|
||||
scrollTop?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
text?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: 'round' | 'half-round' | 'round-dark' | 'half-round-dark';
|
||||
};
|
||||
visibilityHeight?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export{};
|
||||
@@ -0,0 +1,25 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
import type { TdBadgeProps } from './type';
|
||||
export interface BadgeProps extends TdBadgeProps {
|
||||
}
|
||||
export default class Badge extends SuperComponent {
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
externalClasses: string[];
|
||||
properties: TdBadgeProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
value: string;
|
||||
labelID: string;
|
||||
descriptionID: string;
|
||||
useOuterClass: boolean;
|
||||
};
|
||||
lifetimes: {
|
||||
ready(): void;
|
||||
};
|
||||
methods: {
|
||||
checkForActualContent(): Promise<void>;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{uniqueFactory,getRect}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-badge`,getUniqueID=uniqueFactory("badge");let Badge=class extends SuperComponent{constructor(){super(...arguments),this.options={multipleSlots:!0},this.externalClasses=[`${prefix}-class`,`${prefix}-class-count`,`${prefix}-class-content`],this.properties=props,this.data={prefix:prefix,classPrefix:name,value:"",labelID:"",descriptionID:"",useOuterClass:!1},this.lifetimes={ready(){const e=getUniqueID();this.setData({labelID:`${e}_label`,descriptionID:`${e}_description`}),this.checkForActualContent()}},this.methods={checkForActualContent(){if(!this.properties.content&&["ribbon","ribbon-right","ribbon-left","triangle-right","triangle-left"].includes(this.properties.shape))return getRect(this,`.${name}__content`).then(e=>{const t=e.width>0||e.height>0;this.setData({useOuterClass:!t})});this.setData({useOuterClass:!1})}}}};Badge=__decorate([wxComponent()],Badge);export default Badge;
|
||||
@@ -0,0 +1 @@
|
||||
{"component":true,"styleIsolation":"apply-shared","usingComponents":{}}
|
||||
@@ -0,0 +1 @@
|
||||
<wxs src="./badge.wxs" module="_this"/><wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="{{classPrefix}} {{ useOuterClass? classPrefix + '__' + shape + '-outer': '' }} class {{prefix}}-class" aria-labelledby="{{labelID}}" aria-describedby="{{descriptionID}}" aria-role="{{ ariaRole || 'option'}}"><view id="{{labelID}}" class="{{classPrefix}}__content {{prefix}}-class-content" aria-hidden="true"><slot wx:if="{{!content}}" class="{{classPrefix}}__content-slot"/><text wx:else class="{{classPrefix}}__content-text">{{content}}</text></view><view aria-hidden="true" aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}" wx:if="{{_this.isShowBadge({dot,count,showZero}) || count === null}}" id="{{descriptionID}}" class="{{_this.getBadgeInnerClass({classPrefix, dot, size, shape, count})}} {{prefix}}-has-count {{prefix}}-class-count" style="{{_._style([_this.getBadgeStyles({color, offset})])}}" aria-hidden="true" aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}"><view class="{{classPrefix}}__count"><block wx:if="{{_this.isShowBadge({dot,count,showZero})}}">{{ _this.getBadgeValue({dot, count, maxCount}) }}</block><slot else name="count"/></view></view></view>
|
||||
@@ -0,0 +1,64 @@
|
||||
var getBadgeValue = function (props) {
|
||||
if (props.dot) {
|
||||
return '';
|
||||
}
|
||||
if (isNaN(props.count) || isNaN(props.maxCount)) {
|
||||
return props.count;
|
||||
}
|
||||
return parseInt(props.count) > props.maxCount ? props.maxCount + '+' : props.count;
|
||||
};
|
||||
|
||||
var hasUnit = function (unit) {
|
||||
return (
|
||||
unit.indexOf('px') > 0 ||
|
||||
unit.indexOf('rpx') > 0 ||
|
||||
unit.indexOf('em') > 0 ||
|
||||
unit.indexOf('rem') > 0 ||
|
||||
unit.indexOf('%') > 0 ||
|
||||
unit.indexOf('vh') > 0 ||
|
||||
unit.indexOf('vm') > 0
|
||||
);
|
||||
};
|
||||
|
||||
var getBadgeStyles = function (props) {
|
||||
var styleStr = '';
|
||||
if (props.color) {
|
||||
styleStr += 'background:' + props.color + ';';
|
||||
}
|
||||
if (props.offset[0]) {
|
||||
styleStr +=
|
||||
'left: calc(100% + ' + (hasUnit(props.offset[0].toString()) ? props.offset[0] : props.offset[0] + 'px') + ');';
|
||||
}
|
||||
if (props.offset[1]) {
|
||||
styleStr += 'top:' + (hasUnit(props.offset[1].toString()) ? props.offset[1] : props.offset[1] + 'px') + ';';
|
||||
}
|
||||
return styleStr;
|
||||
};
|
||||
|
||||
var getBadgeInnerClass = function (props) {
|
||||
var baseClass = props.classPrefix;
|
||||
var classNames = [
|
||||
baseClass + '--basic',
|
||||
props.dot ? baseClass + '--dot' : '',
|
||||
baseClass + '--' + props.size,
|
||||
baseClass + '--' + props.shape,
|
||||
!props.dot ? baseClass + '--count' : '',
|
||||
];
|
||||
return classNames.join(' ');
|
||||
};
|
||||
|
||||
var isShowBadge = function (props) {
|
||||
if (props.dot) {
|
||||
return true;
|
||||
}
|
||||
if (!props.showZero && !isNaN(props.count) && parseInt(props.count) === 0) {
|
||||
return false;
|
||||
}
|
||||
if (props.count == null) return false;
|
||||
return true;
|
||||
};
|
||||
|
||||
module.exports.getBadgeValue = getBadgeValue;
|
||||
module.exports.getBadgeStyles = getBadgeStyles;
|
||||
module.exports.getBadgeInnerClass = getBadgeInnerClass;
|
||||
module.exports.isShowBadge = isShowBadge;
|
||||
@@ -0,0 +1,26 @@
|
||||
@import '../common/style/index.wxss';.t-badge{position:relative;display:inline-flex;align-items:start;}
|
||||
.t-badge--basic{z-index:100;padding:0 var(--td-badge-basic-padding,8rpx);font:var(--td-badge-font,var(--td-font-mark-extraSmall,600 20rpx / 32rpx var(--td-font-family,PingFang SC,Microsoft YaHei,Arial Regular)));color:var(--td-badge-text-color,var(--td-text-color-anti,var(--td-font-white-1,#fff)));background-color:var(--td-badge-bg-color,var(--td-error-color,var(--td-error-color-6,#d54941)));text-align:center;height:var(--td-badge-basic-height,32rpx);border-radius:var(--td-badge-border-radius,4rpx);}
|
||||
.t-badge--dot{height:var(--td-badge-dot-size,16rpx);border-radius:50%;min-width:var(--td-badge-dot-size,16rpx);padding:0;}
|
||||
.t-badge--count{min-width:var(--td-badge-basic-width,32rpx);white-space:nowrap;box-sizing:border-box;}
|
||||
.t-badge--circle{border-radius:calc(var(--td-badge-basic-height,32rpx)/ 2);}
|
||||
.t-badge__ribbon-left-outer,.t-badge__ribbon-outer,.t-badge__ribbon-right-outer,.t-badge__triangle-left-outer,.t-badge__triangle-right-outer{position:absolute;top:0;}
|
||||
.t-badge__ribbon-outer,.t-badge__ribbon-right-outer,.t-badge__triangle-right-outer{right:0;}
|
||||
.t-badge__ribbon-left-outer,.t-badge__triangle-left-outer{left:0;}
|
||||
.t-badge--bubble{border-radius:var(--td-badge-bubble-border-radius,20rpx 20rpx 20rpx 1px);}
|
||||
.t-badge--ribbon,.t-badge--ribbon-left,.t-badge--ribbon-right,.t-badge--triangle-left,.t-badge--triangle-right{width:calc(var(--td-badge-basic-height,32rpx) * 2);height:calc(var(--td-badge-basic-height,32rpx) * 2);border-radius:0;padding:0;position:absolute;top:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
|
||||
.t-badge--ribbon,.t-badge--ribbon-right{background:linear-gradient(45deg,transparent 50%,var(--td-badge-bg-color,var(--td-error-color,var(--td-error-color-6,#d54941))) 50%,var(--td-badge-bg-color,var(--td-error-color,var(--td-error-color-6,#d54941))) 85%,transparent 85%);}
|
||||
.t-badge--triangle-right{background:linear-gradient(45deg,transparent 50%,var(--td-badge-bg-color,var(--td-error-color,var(--td-error-color-6,#d54941))) 50%);}
|
||||
.t-badge--ribbon,.t-badge--ribbon-right,.t-badge--triangle-right{right:0;}
|
||||
.t-badge--ribbon .t-badge__count,.t-badge--ribbon-right .t-badge__count,.t-badge--triangle-right .t-badge__count{transform:rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall,32rpx)/ 2 + 1rpx));}
|
||||
.t-badge--ribbon-left{background:linear-gradient(-45deg,transparent 50%,var(--td-badge-bg-color,var(--td-error-color,var(--td-error-color-6,#d54941))) 50%,var(--td-badge-bg-color,var(--td-error-color,var(--td-error-color-6,#d54941))) 85%,transparent 85%);}
|
||||
.t-badge--triangle-left{background:linear-gradient(-45deg,transparent 50%,var(--td-badge-bg-color,var(--td-error-color,var(--td-error-color-6,#d54941))) 50%);}
|
||||
.t-badge--ribbon-left,.t-badge--triangle-left{left:0;}
|
||||
.t-badge--ribbon-left .t-badge__count,.t-badge--triangle-left .t-badge__count{transform:rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall,32rpx)/ 2 + 1rpx));}
|
||||
.t-badge--large{font:var(--td-badge-large-font,var(--td-font-mark-small,600 24rpx / 40rpx var(--td-font-family,PingFang SC,Microsoft YaHei,Arial Regular)));height:var(--td-badge-large-height,40rpx);min-width:var(--td-badge-large-height,40rpx);padding:0 var(--td-badge-large-padding,10rpx);}
|
||||
.t-badge--large.t-badge--circle{border-radius:calc(var(--td-badge-large-height,40rpx)/ 2);}
|
||||
.t-badge--large.t-badge--ribbon,.t-badge--large.t-badge--ribbon-left,.t-badge--large.t-badge--ribbon-right,.t-badge--large.t-badge--triangle-left,.t-badge--large.t-badge--triangle-right{width:calc(var(--td-badge-large-height,40rpx) * 2);height:calc(var(--td-badge-large-height,40rpx) * 2);padding:0;}
|
||||
.t-badge--large.t-badge--ribbon .t-badge__count,.t-badge--large.t-badge--ribbon-right .t-badge__count,.t-badge--large.t-badge--triangle-right .t-badge__count{transform:rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-small,40rpx)/ 2 + 3rpx));}
|
||||
.t-badge--large.t-badge--ribbon-left .t-badge__count,.t-badge--large.t-badge--triangle-left .t-badge__count{transform:rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-small,40rpx)/ 2 + 3rpx));}
|
||||
.t-badge__content:not(:empty)+.t-badge--bubble.t-has-count,.t-badge__content:not(:empty)+.t-badge--circle.t-has-count,.t-badge__content:not(:empty)+.t-badge--square.t-has-count{transform-origin:center center;transform:translate(-50%,-50%);position:absolute;top:0;left:100%;}
|
||||
.t-badge__content-text{display:block;font:var(--td-font-body-large,32rpx / 48rpx var(--td-font-family,PingFang SC,Microsoft YaHei,Arial Regular));color:var(--td-badge-content-text-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));}
|
||||
.t-badge__count:empty{display:none;}
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './type';
|
||||
export * from './props';
|
||||
export * from './badge';
|
||||
@@ -0,0 +1 @@
|
||||
export*from"./type";export*from"./props";export*from"./badge";
|
||||
@@ -0,0 +1,3 @@
|
||||
import { TdBadgeProps } from './type';
|
||||
declare const props: TdBadgeProps;
|
||||
export default props;
|
||||
@@ -0,0 +1 @@
|
||||
const props={color:{type:String,value:""},content:{type:String,value:""},count:{type:null,value:0},dot:{type:Boolean,value:!1},maxCount:{type:Number,value:99},offset:{type:Array},shape:{type:String,value:"circle"},showZero:{type:Boolean,value:!1},size:{type:String,value:"medium"}};export default props;
|
||||
@@ -0,0 +1,38 @@
|
||||
export interface TdBadgeProps {
|
||||
color?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
content?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
count?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
dot?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
maxCount?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
offset?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<string | number>;
|
||||
};
|
||||
shape?: {
|
||||
type: StringConstructor;
|
||||
value?: 'circle' | 'square' | 'bubble' | 'ribbon' | 'ribbon-right' | 'ribbon-left' | 'triangle-right' | 'triangle-left';
|
||||
};
|
||||
showZero?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
size?: {
|
||||
type: StringConstructor;
|
||||
value?: 'medium' | 'large';
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export{};
|
||||
@@ -0,0 +1,38 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
import type { TdButtonProps } from './type';
|
||||
export interface ButtonProps extends TdButtonProps {
|
||||
}
|
||||
export default class Button extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
behaviors: string[];
|
||||
properties: TdButtonProps;
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
data: {
|
||||
prefix: string;
|
||||
className: string;
|
||||
classPrefix: string;
|
||||
};
|
||||
observers: {
|
||||
'theme, size, plain, block, shape, disabled, loading, variant'(): void;
|
||||
icon(icon: any): void;
|
||||
};
|
||||
lifetimes: {
|
||||
attached(): void;
|
||||
};
|
||||
methods: {
|
||||
setClass(): void;
|
||||
getuserinfo(e: any): void;
|
||||
contact(e: any): void;
|
||||
createliveactivity(e: any): void;
|
||||
getphonenumber(e: any): void;
|
||||
getrealtimephonenumber(e: any): void;
|
||||
error(e: any): void;
|
||||
opensetting(e: any): void;
|
||||
launchapp(e: any): void;
|
||||
chooseavatar(e: any): void;
|
||||
agreeprivacyauthorization(e: any): void;
|
||||
handleTap(e: any): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{canIUseFormFieldButton}from"../common/version";import{calcIcon}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-button`;let Button=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-icon`,`${prefix}-class-loading`],this.behaviors=canIUseFormFieldButton()?["wx://form-field-button"]:[],this.properties=props,this.options={multipleSlots:!0},this.data={prefix:prefix,className:"",classPrefix:name},this.observers={"theme, size, plain, block, shape, disabled, loading, variant"(){this.setClass()},icon(t){this.setData({_icon:calcIcon(t,"")})}},this.lifetimes={attached(){this.setClass()}},this.methods={setClass(){const t=[name,`${prefix}-class`,`${name}--${this.data.variant||"base"}`,`${name}--${this.data.theme||"default"}`,`${name}--${this.data.shape||"rectangle"}`,`${name}--size-${this.data.size||"medium"}`];this.data.block&&t.push(`${name}--block`),this.data.disabled&&t.push(`${name}--disabled`),this.data.ghost&&t.push(`${name}--ghost`),this.setData({className:t.join(" ")})},getuserinfo(t){this.triggerEvent("getuserinfo",t.detail)},contact(t){this.triggerEvent("contact",t.detail)},createliveactivity(t){this.triggerEvent("createliveactivity",t.detail)},getphonenumber(t){this.triggerEvent("getphonenumber",t.detail)},getrealtimephonenumber(t){this.triggerEvent("getrealtimephonenumber",t.detail)},error(t){this.triggerEvent("error",t.detail)},opensetting(t){this.triggerEvent("opensetting",t.detail)},launchapp(t){this.triggerEvent("launchapp",t.detail)},chooseavatar(t){this.triggerEvent("chooseavatar",t.detail)},agreeprivacyauthorization(t){this.triggerEvent("agreeprivacyauthorization",t.detail)},handleTap(t){this.data.disabled||this.data.loading||this.triggerEvent("tap",t)}}}};Button=__decorate([wxComponent()],Button);export default Button;
|
||||
@@ -0,0 +1 @@
|
||||
{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-icon":"../icon/icon","t-loading":"../loading/loading"}}
|
||||
@@ -0,0 +1 @@
|
||||
<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><button id="{{tId}}" style="{{_._style([style, customStyle])}}" data-custom="{{customDataset}}" class="class {{className}}" activity-type="{{activityType ? activityType : ''}}" entrance-path="{{entrancePath}}" form-type="{{disabled || loading ? '' : type}}" open-type="{{disabled || loading ? '' : openType}}" hover-stop-propagation="{{hoverStopPropagation}}" hover-start-time="{{hoverStartTime}}" hover-stay-time="{{hoverStayTime}}" lang="{{lang}}" need-show-entrance="{{needShowEntrance}}" session-from="{{sessionFrom}}" hover-class="{{disabled || loading ? '' : (hoverClass || classPrefix + '--hover')}}" send-message-title="{{sendMessageTitle}}" send-message-path="{{sendMessagePath}}" send-message-img="{{sendMessageImg}}" app-parameter="{{appParameter}}" show-message-card="{{showMessageCard}}" catch:tap="handleTap" bind:getuserinfo="getuserinfo" bind:contact="contact" bind:createliveactivity="createliveactivity" bind:getphonenumber="getphonenumber" bind:getrealtimephonenumber="getrealtimephonenumber" bind:error="error" bind:opensetting="opensetting" bind:launchapp="launchapp" bind:chooseavatar="chooseavatar" bind:agreeprivacyauthorization="agreeprivacyauthorization" aria-label="{{ariaLabel}}"><template wx:if="{{_icon}}" is="icon" data="{{tClass: classPrefix + '__icon ' + prefix + '-class-icon', ariaHidden: true, name: iconName, ..._icon}}"/><t-loading wx:if="{{loading}}" delay="{{loadingProps.delay || 0}}" duration="{{loadingProps.duration || 800}}" indicator="{{loadingProps.indicator || true}}" inheritColor="{{loadingProps.inheritColor || true}}" layout="{{loadingProps.layout || 'horizontal'}}" pause="{{loadingProps.pause || false}}" progress="{{loadingProps.progress || 0}}" reverse="{{loadingProps.reverse || false}}" size="{{loadingProps.size || '40rpx'}}" text="{{loadingProps.text || '' }}" theme="{{loadingProps.theme || 'circular'}}" loading t-class="{{classPrefix}}__loading {{classPrefix}}__loading--wrapper" t-class-indicator="{{classPrefix}}__loading--indicator {{prefix}}-class-loading"/><view class="{{classPrefix}}__content"><slot name="content"/><block wx:if="{{content}}">{{content}}</block><slot/></view><slot name="suffix"/></button>
|
||||
@@ -0,0 +1,129 @@
|
||||
@import '../common/style/index.wxss';.t-button--size-extra-small{font-size:var(--td-button-extra-small-font-size,var(--td-font-size-base,28rpx));padding-left:var(--td-button-extra-small-padding-horizontal,16rpx);padding-right:var(--td-button-extra-small-padding-horizontal,16rpx);height:var(--td-button-extra-small-height,56rpx);line-height:var(--td-button-extra-small-height,56rpx);}
|
||||
.t-button--size-extra-small .t-button__icon{font-size:var(--td-button-extra-small-icon-size,36rpx);}
|
||||
.t-button--size-small{font-size:var(--td-button-small-font-size,var(--td-font-size-base,28rpx));padding-left:var(--td-button-small-padding-horizontal,24rpx);padding-right:var(--td-button-small-padding-horizontal,24rpx);height:var(--td-button-small-height,64rpx);line-height:var(--td-button-small-height,64rpx);}
|
||||
.t-button--size-small .t-button__icon{font-size:var(--td-button-small-icon-size,36rpx);}
|
||||
.t-button--size-medium{font-size:var(--td-button-medium-font-size,var(--td-font-size-m,32rpx));padding-left:var(--td-button-medium-padding-horizontal,32rpx);padding-right:var(--td-button-medium-padding-horizontal,32rpx);height:var(--td-button-medium-height,80rpx);line-height:var(--td-button-medium-height,80rpx);}
|
||||
.t-button--size-medium .t-button__icon{font-size:var(--td-button-medium-icon-size,40rpx);}
|
||||
.t-button--size-large{font-size:var(--td-button-large-font-size,var(--td-font-size-m,32rpx));padding-left:var(--td-button-large-padding-horizontal,40rpx);padding-right:var(--td-button-large-padding-horizontal,40rpx);height:var(--td-button-large-height,96rpx);line-height:var(--td-button-large-height,96rpx);}
|
||||
.t-button--size-large .t-button__icon{font-size:var(--td-button-large-icon-size,48rpx);}
|
||||
.t-button--default{color:var(--td-button-default-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));background-color:var(--td-button-default-bg-color,var(--td-bg-color-component,var(--td-gray-color-3,#e7e7e7)));border-color:var(--td-button-default-border-color,var(--td-bg-color-component,var(--td-gray-color-3,#e7e7e7)));}
|
||||
.t-button--default::after{border-width:var(--td-button-border-width,4rpx);border-color:var(--td-button-default-border-color,var(--td-bg-color-component,var(--td-gray-color-3,#e7e7e7)));}
|
||||
.t-button--default.t-button--hover{z-index:0;}
|
||||
.t-button--default.t-button--hover,.t-button--default.t-button--hover::after{background-color:var(--td-button-default-active-bg-color,var(--td-bg-color-component-active,var(--td-gray-color-6,#a6a6a6)));border-color:var(--td-button-default-active-border-color,var(--td-bg-color-component-active,var(--td-gray-color-6,#a6a6a6)));}
|
||||
.t-button--default.t-button--disabled{color:var(--td-button-default-disabled-color,var(--td-text-color-disabled,var(--td-font-gray-4,rgba(0,0,0,.26))));background-color:var(--td-button-default-disabled-bg,var(--td-bg-color-component-disabled,var(--td-gray-color-2,#eee)));}
|
||||
.t-button--default.t-button--disabled,.t-button--default.t-button--disabled::after{border-color:var(--td-button-default-disabled-border-color,var(--td-bg-color-component-disabled,var(--td-gray-color-2,#eee)));}
|
||||
.t-button--primary{color:var(--td-button-primary-color,var(--td-text-color-anti,var(--td-font-white-1,#fff)));background-color:var(--td-button-primary-bg-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));border-color:var(--td-button-primary-border-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));}
|
||||
.t-button--primary::after{border-width:var(--td-button-border-width,4rpx);border-color:var(--td-button-primary-border-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));}
|
||||
.t-button--primary.t-button--hover{z-index:0;}
|
||||
.t-button--primary.t-button--hover,.t-button--primary.t-button--hover::after{background-color:var(--td-button-primary-active-bg-color,var(--td-brand-color-active,var(--td-primary-color-8,#003cab)));border-color:var(--td-button-primary-active-border-color,var(--td-brand-color-active,var(--td-primary-color-8,#003cab)));}
|
||||
.t-button--primary.t-button--disabled{color:var(--td-button-primary-disabled-color,var(--td-text-color-anti,var(--td-font-white-1,#fff)));background-color:var(--td-button-primary-disabled-bg,var(--td-brand-color-disabled,var(--td-primary-color-3,#b5c7ff)));}
|
||||
.t-button--primary.t-button--disabled,.t-button--primary.t-button--disabled::after{border-color:var(--td-button-primary-disabled-border-color,var(--td-brand-color-disabled,var(--td-primary-color-3,#b5c7ff)));}
|
||||
.t-button--light{color:var(--td-button-light-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));background-color:var(--td-button-light-bg-color,var(--td-brand-color-light,var(--td-primary-color-1,#f2f3ff)));border-color:var(--td-button-light-border-color,var(--td-brand-color-light,var(--td-primary-color-1,#f2f3ff)));}
|
||||
.t-button--light::after{border-width:var(--td-button-border-width,4rpx);border-color:var(--td-button-light-border-color,var(--td-brand-color-light,var(--td-primary-color-1,#f2f3ff)));}
|
||||
.t-button--light.t-button--hover{z-index:0;}
|
||||
.t-button--light.t-button--hover,.t-button--light.t-button--hover::after{background-color:var(--td-button-light-active-bg-color,var(--td-brand-color-light-active,var(--td-primary-color-2,#d9e1ff)));border-color:var(--td-button-light-active-border-color,var(--td-brand-color-light-active,var(--td-primary-color-2,#d9e1ff)));}
|
||||
.t-button--light.t-button--disabled{color:var(--td-button-light-disabled-color,var(--td-brand-color-disabled,var(--td-primary-color-3,#b5c7ff)));background-color:var(--td-button-light-disabled-bg,var(--td-brand-color-light,var(--td-primary-color-1,#f2f3ff)));}
|
||||
.t-button--light.t-button--disabled,.t-button--light.t-button--disabled::after{border-color:var(--td-button-light-disabled-border-color,var(--td-brand-color-light,var(--td-primary-color-1,#f2f3ff)));}
|
||||
.t-button--danger{color:var(--td-button-danger-color,var(--td-text-color-anti,var(--td-font-white-1,#fff)));background-color:var(--td-button-danger-bg-color,var(--td-error-color,var(--td-error-color-6,#d54941)));border-color:var(--td-button-danger-border-color,var(--td-error-color,var(--td-error-color-6,#d54941)));}
|
||||
.t-button--danger::after{border-width:var(--td-button-border-width,4rpx);border-color:var(--td-button-danger-border-color,var(--td-error-color,var(--td-error-color-6,#d54941)));}
|
||||
.t-button--danger.t-button--hover{z-index:0;}
|
||||
.t-button--danger.t-button--hover,.t-button--danger.t-button--hover::after{background-color:var(--td-button-danger-active-bg-color,var(--td-error-color-active,var(--td-error-color-7,#ad352f)));border-color:var(--td-button-danger-active-border-color,var(--td-error-color-active,var(--td-error-color-7,#ad352f)));}
|
||||
.t-button--danger.t-button--disabled{color:var(--td-button-danger-disabled-color,var(--td-font-white-1,#fff));background-color:var(--td-button-danger-disabled-bg,var(--td-error-color-3,#ffb9b0));}
|
||||
.t-button--danger.t-button--disabled,.t-button--danger.t-button--disabled::after{border-color:var(--td-button-danger-disabled-border-color,var(--td-error-color-3,#ffb9b0));}
|
||||
.t-button{display:inline-flex;align-items:center;justify-content:center;position:relative;white-space:nowrap;text-align:center;background-image:none;transition:all .3s;touch-action:manipulation;border-radius:var(--td-button-border-radius,var(--td-radius-default,12rpx));outline:0;font-family:PingFang SC,Microsoft YaHei,Arial Regular;font-weight:var(--td-button-font-weight,600);vertical-align:top;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-appearance:none;}
|
||||
.t-button::after{border-radius:calc(var(--td-button-border-radius,var(--td-radius-default,12rpx)) * 2);}
|
||||
.t-button--text{color:var(--td-button-default-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));background-color:transparent;}
|
||||
.t-button--text,.t-button--text::after{border:0;}
|
||||
.t-button--text.t-button--hover,.t-button--text.t-button--hover::after{background-color:var(--td-button-default-text-active-bg-color,var(--td-bg-color-container-active,var(--td-gray-color-3,#e7e7e7)));}
|
||||
.t-button--text.t-button--primary{color:var(--td-button-primary-text-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));background-color:transparent;}
|
||||
.t-button--text.t-button--primary.t-button--hover,.t-button--text.t-button--primary.t-button--hover::after{background-color:var(--td-button-primary-text-active-bg-color,var(--td-bg-color-container-active,var(--td-gray-color-3,#e7e7e7)));}
|
||||
.t-button--text.t-button--primary.t-button--disabled{color:var(--td-button-primary-text-disabled-color,var(--td-brand-color-disabled,var(--td-primary-color-3,#b5c7ff)));background-color:var(--td-bg-color-container,var(--td-font-white-1,#fff));}
|
||||
.t-button--text.t-button--danger{color:var(--td-button-danger-text-color,var(--td-error-color,var(--td-error-color-6,#d54941)));background-color:transparent;}
|
||||
.t-button--text.t-button--danger.t-button--hover,.t-button--text.t-button--danger.t-button--hover::after{background-color:var(--td-button-danger-text-active-bg-color,var(--td-bg-color-container-active,var(--td-gray-color-3,#e7e7e7)));}
|
||||
.t-button--text.t-button--danger.t-button--disabled{color:var(--td-button-danger-text-disabled-color,var(--td-button-danger-disabled-color,var(--td-font-white-1,#fff)));background-color:var(--td-bg-color-container,var(--td-font-white-1,#fff));}
|
||||
.t-button--text.t-button--light{color:var(--td-button-light-text-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));background-color:transparent;}
|
||||
.t-button--text.t-button--light.t-button--hover,.t-button--text.t-button--light.t-button--hover::after{background-color:var(--td-button-light-text-active-bg-color,var(--td-bg-color-container-active,var(--td-gray-color-3,#e7e7e7)));}
|
||||
.t-button--text.t-button--disabled{color:var(--td-button-default-disabled-color,var(--td-text-color-disabled,var(--td-font-gray-4,rgba(0,0,0,.26))));}
|
||||
.t-button--outline{color:var(--td-button-default-outline-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));background-color:var(--td-bg-color-container,var(--td-font-white-1,#fff));}
|
||||
.t-button--outline,.t-button--outline::after{border-color:var(--td-button-default-outline-border-color,var(--td-component-border,var(--td-gray-color-4,#dcdcdc)));}
|
||||
.t-button--outline.t-button--hover,.t-button--outline.t-button--hover::after{background-color:var(--td-button-default-outline-active-bg-color,var(--td-bg-color-container-active,var(--td-gray-color-3,#e7e7e7)));border-color:var(--td-button-default-outline-active-border-color,var(--td-component-border,var(--td-gray-color-4,#dcdcdc)));}
|
||||
.t-button--outline.t-button--disabled{color:var(--td-button-default-outline-disabled-color,var(--td-component-border,var(--td-gray-color-4,#dcdcdc)));}
|
||||
.t-button--outline.t-button--disabled,.t-button--outline.t-button--disabled::after{border-color:var(--td-button-default-outline-disabled-color,var(--td-component-border,var(--td-gray-color-4,#dcdcdc)));}
|
||||
.t-button--outline.t-button--primary{color:var(--td-button-primary-outline-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));}
|
||||
.t-button--outline.t-button--primary,.t-button--outline.t-button--primary::after{border-color:var(--td-button-primary-outline-border-color,var(--td-button-primary-outline-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9))));}
|
||||
.t-button--outline.t-button--primary.t-button--hover{color:var(--td-button-primary-outline-active-border-color,var(--td-brand-color-active,var(--td-primary-color-8,#003cab)));}
|
||||
.t-button--outline.t-button--primary.t-button--hover::after{background-color:var(--td-button-primary-outline-active-bg-color,var(--td-bg-color-container-active,var(--td-gray-color-3,#e7e7e7)));border-color:var(--td-button-primary-outline-active-border-color,var(--td-brand-color-active,var(--td-primary-color-8,#003cab)));}
|
||||
.t-button--outline.t-button--primary.t-button--disabled{background-color:transparent;color:var(--td-button-primary-outline-disabled-color,var(--td-brand-color-disabled,var(--td-primary-color-3,#b5c7ff)));}
|
||||
.t-button--outline.t-button--primary.t-button--disabled,.t-button--outline.t-button--primary.t-button--disabled::after{border-color:var(--td-button-primary-outline-disabled-color,var(--td-brand-color-disabled,var(--td-primary-color-3,#b5c7ff)));}
|
||||
.t-button--outline.t-button--danger{color:var(--td-button-danger-outline-color,var(--td-error-color,var(--td-error-color-6,#d54941)));}
|
||||
.t-button--outline.t-button--danger,.t-button--outline.t-button--danger::after{border-color:var(--td-button-danger-outline-border-color,var(--td-button-danger-outline-color,var(--td-error-color,var(--td-error-color-6,#d54941))));}
|
||||
.t-button--outline.t-button--danger.t-button--hover{color:var(--td-button-danger-outline-active-border-color,var(--td-error-color-active,var(--td-error-color-7,#ad352f)));}
|
||||
.t-button--outline.t-button--danger.t-button--hover::after{background-color:var(--td-button-danger-outline-active-bg-color,var(--td-bg-color-container-active,var(--td-gray-color-3,#e7e7e7)));border-color:var(--td-button-danger-outline-active-border-color,var(--td-error-color-active,var(--td-error-color-7,#ad352f)));}
|
||||
.t-button--outline.t-button--danger.t-button--disabled{background-color:var(--td-bg-color-container,var(--td-font-white-1,#fff));color:var(--td-button-danger-outline-disabled-color,var(--td-error-color-3,#ffb9b0));}
|
||||
.t-button--outline.t-button--danger.t-button--disabled,.t-button--outline.t-button--danger.t-button--disabled::after{border-color:var(--td-button-danger-outline-disabled-color,var(--td-error-color-3,#ffb9b0));}
|
||||
.t-button--outline.t-button--light{color:var(--td-button-light-outline-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));background-color:var(--td-button-light-outline-bg-color,var(--td-brand-color-light,var(--td-primary-color-1,#f2f3ff)));}
|
||||
.t-button--outline.t-button--light,.t-button--outline.t-button--light::after{border-color:var(--td-button-light-outline-border-color,var(--td-button-light-outline-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9))));}
|
||||
.t-button--outline.t-button--light.t-button--hover{color:var(--td-button-light-outline-active-border-color,var(--td-brand-color-active,var(--td-primary-color-8,#003cab)));}
|
||||
.t-button--outline.t-button--light.t-button--hover,.t-button--outline.t-button--light.t-button--hover::after{background-color:var(--td-button-light-outline-active-bg-color,var(--td-brand-color-light-active,var(--td-primary-color-2,#d9e1ff)));border-color:var(--td-button-light-outline-active-border-color,var(--td-brand-color-active,var(--td-primary-color-8,#003cab)));}
|
||||
.t-button--outline.t-button--light.t-button--disabled{background-color:var(--td-bg-color-container,var(--td-font-white-1,#fff));color:var(--td-button-light-outline-disabled-color,var(--td-brand-color-disabled,var(--td-primary-color-3,#b5c7ff)));}
|
||||
.t-button--outline.t-button--light.t-button--disabled,.t-button--outline.t-button--light.t-button--disabled::after{border-color:var(--td-button-light-outline-disabled-color,var(--td-brand-color-disabled,var(--td-primary-color-3,#b5c7ff)));}
|
||||
.t-button--dashed{background-color:var(--td-bg-color-container,var(--td-font-white-1,#fff));border-style:dashed;border-width:2rpx;}
|
||||
.t-button--dashed::after{border:0;}
|
||||
.t-button--dashed.t-button--hover,.t-button--dashed.t-button--hover::after{background-color:var(--td-button-default-outline-active-bg-color,var(--td-bg-color-container-active,var(--td-gray-color-3,#e7e7e7)));border-color:var(--td-button-default-outline-active-border-color,var(--td-component-border,var(--td-gray-color-4,#dcdcdc)));}
|
||||
.t-button--dashed.t-button--primary{color:var(--td-button-primary-dashed-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));}
|
||||
.t-button--dashed.t-button--primary,.t-button--dashed.t-button--primary::after{border-color:var(--td-button-primary-dashed-border-color,var(--td-button-primary-dashed-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9))));}
|
||||
.t-button--dashed.t-button--primary.t-button--disabled{background-color:var(--td-bg-color-container,var(--td-font-white-1,#fff));color:var(--td-button-primary-dashed-disabled-color,var(--td-brand-color-disabled,var(--td-primary-color-3,#b5c7ff)));}
|
||||
.t-button--dashed.t-button--primary.t-button--disabled,.t-button--dashed.t-button--primary.t-button--disabled::after{border-color:var(--td-button-primary-dashed-disabled-color,var(--td-brand-color-disabled,var(--td-primary-color-3,#b5c7ff)));}
|
||||
.t-button--dashed.t-button--danger{color:var(--td-button-danger-dashed-color,var(--td-error-color,var(--td-error-color-6,#d54941)));}
|
||||
.t-button--dashed.t-button--danger,.t-button--dashed.t-button--danger::after{border-color:var(--td-button-danger-dashed-border-color,var(--td-button-danger-dashed-color,var(--td-error-color,var(--td-error-color-6,#d54941))));}
|
||||
.t-button--dashed.t-button--danger.t-button--disabled{background-color:transparent;color:var(--td-button-danger-dashed-disabled-color,var(--td-button-danger-disabled-color,var(--td-font-white-1,#fff)));}
|
||||
.t-button--dashed.t-button--danger.t-button--disabled::after{border-color:var(--td-button-danger-dashed-disabled-color,var(--td-button-danger-disabled-color,var(--td-font-white-1,#fff)));}
|
||||
.t-button--ghost{background-color:transparent;color:var(--td-button-ghost-color,var(--td-text-color-anti,var(--td-font-white-1,#fff)));}
|
||||
.t-button--ghost,.t-button--ghost::after{border-color:var(--td-button-ghost-border-color,var(--td-button-ghost-color,var(--td-text-color-anti,var(--td-font-white-1,#fff))));}
|
||||
.t-button--ghost.t-button--default.t-button--hover{color:var(--td-button-ghost-hover-color,var(--td-font-white-2,rgba(255,255,255,.55)));}
|
||||
.t-button--ghost.t-button--default.t-button--hover,.t-button--ghost.t-button--default.t-button--hover::after{background-color:transparent;border-color:var(--td-button-ghost-hover-color,var(--td-font-white-2,rgba(255,255,255,.55)));}
|
||||
.t-button--ghost.t-button--primary{color:var(--td-button-ghost-primary-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));}
|
||||
.t-button--ghost.t-button--primary,.t-button--ghost.t-button--primary::after{border-color:var(--td-button-ghost-primary-border-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));}
|
||||
.t-button--ghost.t-button--primary.t-button--hover{color:var(--td-button-ghost-primary-hover-color,var(--td-brand-color-active,var(--td-primary-color-8,#003cab)));}
|
||||
.t-button--ghost.t-button--primary.t-button--hover,.t-button--ghost.t-button--primary.t-button--hover::after{background-color:transparent;border-color:var(--td-button-ghost-primary-hover-color,var(--td-brand-color-active,var(--td-primary-color-8,#003cab)));}
|
||||
.t-button--ghost.t-button--primary.t-button--text.t-button--hover,.t-button--ghost.t-button--primary.t-button--text.t-button--hover::after{background-color:var(--td-gray-color-10,#4b4b4b);}
|
||||
.t-button--ghost.t-button--primary.t-button--disabled{background-color:transparent;color:var(--td-button-ghost-disabled-color,var(--td-font-white-4,rgba(255,255,255,.22)));}
|
||||
.t-button--ghost.t-button--primary.t-button--disabled,.t-button--ghost.t-button--primary.t-button--disabled::after{border-color:var(--td-button-ghost-disabled-color,var(--td-font-white-4,rgba(255,255,255,.22)));}
|
||||
.t-button--ghost.t-button--danger{color:var(--td-button-ghost-danger-color,var(--td-error-color,var(--td-error-color-6,#d54941)));}
|
||||
.t-button--ghost.t-button--danger,.t-button--ghost.t-button--danger::after{border-color:var(--td-button-ghost-danger-border-color,var(--td-error-color,var(--td-error-color-6,#d54941)));}
|
||||
.t-button--ghost.t-button--danger.t-button--hover{color:var(--td-button-ghost-danger-hover-color,var(--td-error-color-active,var(--td-error-color-7,#ad352f)));}
|
||||
.t-button--ghost.t-button--danger.t-button--hover,.t-button--ghost.t-button--danger.t-button--hover::after{background-color:transparent;border-color:var(--td-button-ghost-danger-hover-color,var(--td-error-color-active,var(--td-error-color-7,#ad352f)));}
|
||||
.t-button--ghost.t-button--danger.t-button--text.t-button--hover,.t-button--ghost.t-button--danger.t-button--text.t-button--hover::after{background-color:var(--td-gray-color-10,#4b4b4b);}
|
||||
.t-button--ghost.t-button--danger.t-button--disabled{background-color:transparent;color:var(--td-button-ghost-disabled-color,var(--td-font-white-4,rgba(255,255,255,.22)));}
|
||||
.t-button--ghost.t-button--danger.t-button--disabled,.t-button--ghost.t-button--danger.t-button--disabled::after{border-color:var(--td-button-ghost-disabled-color,var(--td-font-white-4,rgba(255,255,255,.22)));}
|
||||
.t-button--ghost.t-button--default.t-button--text.t-button--hover,.t-button--ghost.t-button--default.t-button--text.t-button--hover::after{background-color:var(--td-gray-color-10,#4b4b4b);}
|
||||
.t-button--ghost.t-button--default.t-button--disabled{background-color:transparent;color:var(--td-button-ghost-disabled-color,var(--td-font-white-4,rgba(255,255,255,.22)));}
|
||||
.t-button--ghost.t-button--default.t-button--disabled,.t-button--ghost.t-button--default.t-button--disabled::after{border-color:var(--td-button-ghost-disabled-color,var(--td-font-white-4,rgba(255,255,255,.22)));}
|
||||
.t-button__icon+.t-button__content:not(:empty),.t-button__loading+.t-button__content:not(:empty){margin-left:8rpx;}
|
||||
.t-button__icon{border-radius:var(--td-button-icon-border-radius,8rpx);}
|
||||
.t-button--round.t-button--size-large{border-radius:calc(var(--td-button-large-height,96rpx)/ 2);}
|
||||
.t-button--round.t-button--size-large::after{border-radius:var(--td-button-large-height,96rpx);}
|
||||
.t-button--round.t-button--size-medium{border-radius:calc(var(--td-button-medium-height,80rpx)/ 2);}
|
||||
.t-button--round.t-button--size-medium::after{border-radius:var(--td-button-medium-height,80rpx);}
|
||||
.t-button--round.t-button--size-small{border-radius:calc(var(--td-button-small-height,64rpx)/ 2);}
|
||||
.t-button--round.t-button--size-small::after{border-radius:var(--td-button-small-height,64rpx);}
|
||||
.t-button--round.t-button--size-extra-small{border-radius:calc(var(--td-button-extra-small-height,56rpx)/ 2);}
|
||||
.t-button--round.t-button--size-extra-small::after{border-radius:var(--td-button-extra-small-height,56rpx);}
|
||||
.t-button--square{padding:0;}
|
||||
.t-button--square.t-button--size-large{width:var(--td-button-large-height,96rpx);}
|
||||
.t-button--square.t-button--size-medium{width:var(--td-button-medium-height,80rpx);}
|
||||
.t-button--square.t-button--size-small{width:var(--td-button-small-height,64rpx);}
|
||||
.t-button--square.t-button--size-extra-small{width:var(--td-button-extra-small-height,56rpx);}
|
||||
.t-button--circle{padding:0;border-radius:50%;}
|
||||
.t-button--circle.t-button--size-large{width:var(--td-button-large-height,96rpx);}
|
||||
.t-button--circle.t-button--size-large::after{border-radius:50%;}
|
||||
.t-button--circle.t-button--size-medium{width:var(--td-button-medium-height,80rpx);}
|
||||
.t-button--circle.t-button--size-medium::after{border-radius:50%;}
|
||||
.t-button--circle.t-button--size-small{width:var(--td-button-small-height,64rpx);}
|
||||
.t-button--circle.t-button--size-small::after{border-radius:50%;}
|
||||
.t-button--circle.t-button--size-extra-small{width:var(--td-button-extra-small-height,56rpx);}
|
||||
.t-button--circle.t-button--size-extra-small::after{border-radius:50%;}
|
||||
.t-button--block{display:flex;width:100%;}
|
||||
.t-button--disabled{cursor:not-allowed;}
|
||||
.t-button__loading--wrapper{display:flex;align-items:center;justify-content:center;}
|
||||
.t-button.t-button--hover::after{z-index:-1;}
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './props';
|
||||
export * from './type';
|
||||
export * from './button';
|
||||
@@ -0,0 +1 @@
|
||||
export*from"./props";export*from"./type";export*from"./button";
|
||||
@@ -0,0 +1,3 @@
|
||||
import { TdButtonProps } from './type';
|
||||
declare const props: TdButtonProps;
|
||||
export default props;
|
||||
@@ -0,0 +1 @@
|
||||
const props={activityType:{type:Number},appParameter:{type:String,value:""},block:{type:Boolean,value:!1},content:{type:String},customDataset:{type:null},disabled:{type:null,value:void 0},entrancePath:{type:String,value:""},ghost:{type:Boolean,value:!1},hoverClass:{type:String,value:""},hoverStartTime:{type:Number,value:20},hoverStayTime:{type:Number,value:70},hoverStopPropagation:{type:Boolean,value:!1},icon:{type:null},lang:{type:String},loading:{type:Boolean,value:!1},loadingProps:{type:Object},needShowEntrance:{type:Boolean,value:!0},openType:{type:String},phoneNumberNoQuotaToast:{type:Boolean,value:!0},sendMessageImg:{type:String,value:"截图"},sendMessagePath:{type:String,value:"当前分享路径"},sendMessageTitle:{type:String,value:"当前标题"},sessionFrom:{type:String,value:""},shape:{type:String,value:"rectangle"},showMessageCard:{type:Boolean,value:!1},size:{type:String,value:"medium"},tId:{type:String,value:""},theme:{type:String,value:"default"},type:{type:String},variant:{type:String,value:"base"}};export default props;
|
||||
@@ -0,0 +1,123 @@
|
||||
import { LoadingProps } from '../loading/index';
|
||||
export interface TdButtonProps {
|
||||
activityType?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
appParameter?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
block?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
content?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
customDataset?: {
|
||||
type: null;
|
||||
value?: null;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
entrancePath?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
ghost?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
hoverClass?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
hoverStartTime?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
hoverStayTime?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
hoverStopPropagation?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: string | object;
|
||||
};
|
||||
lang?: {
|
||||
type: StringConstructor;
|
||||
value?: 'en' | 'zh_CN' | 'zh_TW';
|
||||
};
|
||||
loading?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
loadingProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: LoadingProps;
|
||||
};
|
||||
needShowEntrance?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
openType?: {
|
||||
type: StringConstructor;
|
||||
value?: 'contact' | 'share' | 'getPhoneNumber' | 'getUserInfo' | 'launchApp' | 'openSetting' | 'feedback' | 'chooseAvatar' | 'agreePrivacyAuthorization';
|
||||
};
|
||||
phoneNumberNoQuotaToast?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
sendMessageImg?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
sendMessagePath?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
sendMessageTitle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
sessionFrom?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
shape?: {
|
||||
type: StringConstructor;
|
||||
value?: 'rectangle' | 'square' | 'round' | 'circle';
|
||||
};
|
||||
showMessageCard?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
size?: {
|
||||
type: StringConstructor;
|
||||
value?: 'extra-small' | 'small' | 'medium' | 'large';
|
||||
};
|
||||
tId?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: 'default' | 'primary' | 'danger' | 'light';
|
||||
};
|
||||
type?: {
|
||||
type: StringConstructor;
|
||||
value?: 'submit' | 'reset';
|
||||
};
|
||||
variant?: {
|
||||
type: StringConstructor;
|
||||
value?: 'base' | 'outline' | 'dashed' | 'text';
|
||||
};
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user