@doubao-apps/create 0.0.33 → 0.0.34

package/dist/template-starter/src/widgets/weather-card/index.scss

@@ -1,272 +0,0 @@
-:root {
-  --primary-bg: #0a0a0a;
-  --secondary-bg: #1a1a1a;
-  --card-bg: #161616;
-  --primary-text: #ffffff;
-  --secondary-text: #a0a0a0;
-  --accent-text: #00d4ff;
-  --border-color: #2a2a2a;
-  --success-color: #00ff88;
-  --warning-color: #ffaa00;
-  --error-color: #ff4444;
-  
-  --space-xs: 6rpx;
-  --space-sm: 12rpx;
-  --space-md: 18rpx;
-  --space-lg: 24rpx;
-  --space-xl: 32rpx;
-  --space-xxl: 48rpx;
-  --space-xxxl: 64rpx;
-  
-  --border-radius-sm: 8rpx;
-  --border-radius-md: 12rpx;
-  --border-radius-lg: 16rpx;
-  --border-radius-xl: 20rpx;
-  
-  --shadow-sm: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 6rpx 20rpx rgba(0, 0, 0, 0.5);
-  --shadow-xl: 0 8rpx 32rpx rgba(0, 0, 0, 0.6);
-}
-
-.weather-card {
-  background: var(--card-bg);
-  border-radius: var(--border-radius-xl);
-  border: 1rpx solid rgba(255, 255, 255, 0.08);
-  box-shadow: var(--shadow-lg);
-  overflow: hidden;
-  position: relative;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  
-  // Weather-specific gradients
-  &--sunny {
-    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
-    border-color: rgba(255, 215, 0, 0.2);
-  }
-  
-  &--cloudy {
-    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e8ba3 100%);
-    border-color: rgba(135, 206, 235, 0.2);
-  }
-  
-  &--overcast {
-    background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #7f8c8d 100%);
-    border-color: rgba(112, 128, 144, 0.2);
-  }
-  
-  &--rainy {
-    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #4a6fa5 100%);
-    border-color: rgba(70, 130, 180, 0.2);
-  }
-  
-  &--stormy {
-    background: linear-gradient(135deg, #0c0c1e 0%, #1a1a3e 50%, #2d1b69 100%);
-    border-color: rgba(25, 25, 112, 0.2);
-  }
-  
-  &--snowy {
-    background: linear-gradient(135deg, #e6e9f0 0%, #eef1f5 50%, #f5f7fa 100%);
-    border-color: rgba(240, 248, 255, 0.3);
-    
-    .weather-card__city,
-    .weather-card__temperature,
-    .weather-card__condition,
-    .weather-card__detail-value,
-    .weather-card__forecast-day,
-    .weather-card__forecast-high,
-    .weather-card__forecast-low {
-      color: #2c3e50 !important;
-    }
-    
-    .weather-card__detail-label,
-    .weather-card__update-time {
-      color: #7f8c8d !important;
-    }
-  }
-
-  &__container {
-    padding: var(--space-lg);
-    position: relative;
-    z-index: 1;
-  }
-
-  &__header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: var(--space-md);
-  }
-
-  &__location-info {
-    flex: 1;
-  }
-
-  &__city {
-    font-size: 32rpx;
-    font-weight: 700;
-    color: var(--primary-text);
-    margin-bottom: var(--space-xs);
-    display: block;
-    letter-spacing: 0.5rpx;
-  }
-
-  &__update-time {
-    font-size: 20rpx;
-    color: var(--secondary-text);
-    display: block;
-    opacity: 0.8;
-  }
-
-  &__refresh {
-    padding: var(--space-sm);
-    border-radius: var(--border-radius-md);
-    background: rgba(255, 255, 255, 0.05);
-    border: 1rpx solid rgba(255, 255, 255, 0.1);
-    transition: all 0.3s ease;
-    
-    &--loading {
-      animation: pulse 1.5s ease-in-out infinite;
-    }
-    
-    &:active {
-      background: rgba(255, 255, 255, 0.1);
-      transform: scale(0.95);
-    }
-  }
-
-  &__refresh-icon {
-    font-size: 24rpx;
-    color: var(--accent-text);
-  }
-
-  &__main {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: var(--space-lg);
-  }
-
-  &__current {
-    flex: 1;
-  }
-
-  &__temperature {
-    font-size: 72rpx;
-    font-weight: 700;
-    color: var(--primary-text);
-    margin-bottom: var(--space-xs);
-    display: block;
-    line-height: 1;
-    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
-  }
-
-  &__condition {
-    font-size: 24rpx;
-    color: var(--primary-text);
-    display: block;
-    opacity: 0.9;
-    font-weight: 500;
-  }
-
-  &__icon {
-    font-size: 64rpx;
-    line-height: 1;
-    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
-  }
-
-  &__details {
-    display: flex;
-    gap: var(--space-md);
-    margin-bottom: var(--space-lg);
-    padding: var(--space-md);
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: var(--border-radius-md);
-    border: 1rpx solid rgba(255, 255, 255, 0.05);
-    
-    .weather-card__detail-item {
-      flex: 1;
-    }
-  }
-
-  &__detail-item {
-    text-align: center;
-    padding: var(--space-sm) 0;
-  }
-
-  &__detail-value {
-    font-size: 24rpx;
-    font-weight: 600;
-    color: var(--primary-text);
-    margin-bottom: var(--space-xs);
-    display: block;
-    line-height: 1.2;
-  }
-
-  &__detail-label {
-    font-size: 18rpx;
-    color: var(--secondary-text);
-    display: block;
-    opacity: 0.8;
-  }
-
-  &__forecast {
-    display: flex;
-    justify-content: space-between;
-    padding-top: var(--space-md);
-    border-top: 1rpx solid rgba(255, 255, 255, 0.1);
-  }
-
-  &__forecast-item {
-    flex: 1;
-    text-align: center;
-    padding: var(--space-sm);
-    border-radius: var(--border-radius-sm);
-    transition: all 0.3s ease;
-    
-    &:active {
-      background: rgba(255, 255, 255, 0.05);
-    }
-  }
-
-  &__forecast-day {
-    font-size: 20rpx;
-    color: var(--primary-text);
-    margin-bottom: var(--space-xs);
-    display: block;
-    font-weight: 500;
-  }
-
-  &__forecast-icon {
-    font-size: 28rpx;
-    margin-bottom: var(--space-xs);
-    display: block;
-    line-height: 1;
-  }
-
-  &__forecast-temps {
-    display: flex;
-    justify-content: center;
-    gap: var(--space-xs);
-  }
-
-  &__forecast-high {
-    font-size: 20rpx;
-    font-weight: 600;
-    color: var(--primary-text);
-  }
-
-  &__forecast-low {
-    font-size: 20rpx;
-    color: var(--secondary-text);
-    opacity: 0.8;
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}

package/dist/template-starter/src/widgets/weather-card/index.tsx

@@ -1,193 +0,0 @@
-import { defineWidget, useEffect, useState } from '@doubao-apps/framework';
-import './index.scss';
-
-interface WeatherData {
-  city: string;
-  temperature: number;
-  condition: string;
-  humidity: number;
-  pressure: number;
-  windSpeed: number;
-  icon: string;
-  lastUpdate: Date;
-}
-
-interface WeatherForecast {
-  day: string;
-  high: number;
-  low: number;
-  icon: string;
-  condition: string;
-}
-
-function WeatherCard() {
-  const [weather, setWeather] = useState<WeatherData>({
-    city: '北京',
-    temperature: 22,
-    condition: '晴朗',
-    humidity: 45,
-    pressure: 1013,
-    windSpeed: 5,
-    icon: '☀️',
-    lastUpdate: new Date()
-  });
-
-  const [forecast, setForecast] = useState<WeatherForecast[]>([
-    { day: '明天', high: 24, low: 16, icon: '🌤️', condition: '多云' },
-    { day: '后天', high: 22, low: 14, icon: '⛅', condition: '阴天' },
-    { day: '周四', high: 20, low: 12, icon: '🌦️', condition: '小雨' }
-  ]);
-
-  const [loading, setLoading] = useState(false);
-
-  const weatherConditions = [
-    { condition: '晴朗', icon: '☀️', gradient: 'sunny', color: '#FFD700' },
-    { condition: '多云', icon: '⛅', gradient: 'cloudy', color: '#87CEEB' },
-    { condition: '阴天', icon: '☁️', gradient: 'overcast', color: '#708090' },
-    { condition: '小雨', icon: '🌦️', gradient: 'rainy', color: '#4682B4' },
-    { condition: '中雨', icon: '🌧️', gradient: 'rainy', color: '#1E90FF' },
-    { condition: '大雨', icon: '⛈️', gradient: 'stormy', color: '#191970' },
-    { condition: '雪', icon: '❄️', gradient: 'snowy', color: '#F0F8FF' }
-  ];
-
-  const formatTime = (date: Date) =>
-    date.toLocaleTimeString('zh-CN', {
-      hour: '2-digit',
-      minute: '2-digit'
-    });
-
-  const loadWeather = () => {
-    setLoading(true);
-    setTimeout(() => {
-      const randomCondition = weatherConditions[Math.floor(Math.random() * weatherConditions.length)];
-
-      const newWeather = {
-        city: '北京',
-        temperature: Math.floor(Math.random() * 20) + 15,
-        condition: randomCondition.condition,
-        humidity: Math.floor(Math.random() * 40) + 30,
-        pressure: 1010 + Math.floor(Math.random() * 20),
-        windSpeed: Math.floor(Math.random() * 15) + 2,
-        icon: randomCondition.icon,
-        lastUpdate: new Date()
-      };
-
-      const newForecast = [
-        {
-          day: '明天',
-          high: newWeather.temperature + Math.floor(Math.random() * 6) - 2,
-          low: newWeather.temperature - Math.floor(Math.random() * 6) - 2,
-          icon: weatherConditions[Math.floor(Math.random() * weatherConditions.length)].icon,
-          condition: weatherConditions[Math.floor(Math.random() * weatherConditions.length)].condition
-        },
-        {
-          day: '后天',
-          high: newWeather.temperature + Math.floor(Math.random() * 4) - 2,
-          low: newWeather.temperature - Math.floor(Math.random() * 4) - 2,
-          icon: weatherConditions[Math.floor(Math.random() * weatherConditions.length)].icon,
-          condition: weatherConditions[Math.floor(Math.random() * weatherConditions.length)].condition
-        },
-        {
-          day: '周四',
-          high: newWeather.temperature + Math.floor(Math.random() * 8) - 4,
-          low: newWeather.temperature - Math.floor(Math.random() * 8) - 4,
-          icon: weatherConditions[Math.floor(Math.random() * weatherConditions.length)].icon,
-          condition: weatherConditions[Math.floor(Math.random() * weatherConditions.length)].condition
-        }
-      ];
-
-      setWeather(newWeather);
-      setForecast(newForecast);
-      setLoading(false);
-    }, 800);
-  };
-
-  useEffect(() => {
-    loadWeather();
-    const interval = setInterval(loadWeather, 60000);
-    return () => clearInterval(interval);
-  }, []);
-
-  const handleRefresh = () => {
-    loadWeather();
-  };
-
-  const currentCondition = weatherConditions.find((c) => c.condition === weather.condition);
-
-  return (
-    <view className={`weather-card weather-card--${currentCondition?.gradient || 'sunny'}`}>
-      <view className="weather-card__container">
-        {/* Header - Compact */}
-        <view className="weather-card__header">
-          <view className="weather-card__location-info">
-            <text className="weather-card__city">{weather.city}</text>
-            <text className="weather-card__update-time">{formatTime(weather.lastUpdate)}</text>
-          </view>
-          <view
-            className={`weather-card__refresh ${loading ? 'weather-card__refresh--loading' : ''}`}
-            bindtap={handleRefresh}
-          >
-            <text className="weather-card__refresh-icon">⟳</text>
-          </view>
-        </view>
-
-        {/* Main Weather Display */}
-        <view className="weather-card__main">
-          <view className="weather-card__current">
-            <text className="weather-card__temperature">{weather.temperature}°</text>
-            <text className="weather-card__condition">{weather.condition}</text>
-          </view>
-          <text className="weather-card__icon">{weather.icon}</text>
-        </view>
-
-        {/* Weather Details - Compact Grid */}
-        <view className="weather-card__details">
-          <view className="weather-card__detail-item">
-            <text className="weather-card__detail-value">{weather.humidity}%</text>
-            <text className="weather-card__detail-label">湿度</text>
-          </view>
-          <view className="weather-card__detail-item">
-            <text className="weather-card__detail-value">{weather.windSpeed}m/s</text>
-            <text className="weather-card__detail-label">风速</text>
-          </view>
-          <view className="weather-card__detail-item">
-            <text className="weather-card__detail-value">{weather.pressure}</text>
-            <text className="weather-card__detail-label">气压</text>
-          </view>
-        </view>
-
-        {/* Forecast - Compact */}
-        <view className="weather-card__forecast">
-          {forecast.map((item) => (
-            <view key={item.day} className="weather-card__forecast-item">
-              <text className="weather-card__forecast-day">{item.day}</text>
-              <text className="weather-card__forecast-icon">{item.icon}</text>
-              <view className="weather-card__forecast-temps">
-                <text className="weather-card__forecast-high">{item.high}°</text>
-                <text className="weather-card__forecast-low">{item.low}°</text>
-              </view>
-            </view>
-          ))}
-        </view>
-      </view>
-    </view>
-  );
-}
-
-export default defineWidget({
-  onShow() {
-    console.log('Weather card shown');
-  },
-  onHide() {
-    console.log('Weather card hidden');
-  },
-  onForeground() {
-    console.log('Weather card on foreground');
-  },
-  onBackground() {
-    console.log('Weather card on background');
-  },
-  render() {
-    return <WeatherCard />;
-  }
-});