@doubao-apps/create 0.0.33 → 0.0.34

package/dist/template-starter/src/pages/react-lynx/index.scss

@@ -1,335 +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: 8rpx;
-  --space-sm: 16rpx;
-  --space-md: 24rpx;
-  --space-lg: 32rpx;
-  --space-xl: 48rpx;
-  --space-xxl: 64rpx;
-  --space-xxxl: 96rpx;
-  
-  --border-radius-sm: 12rpx;
-  --border-radius-md: 16rpx;
-  --border-radius-lg: 24rpx;
-  --border-radius-xl: 32rpx;
-  
-  --shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.4);
-  --shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.6);
-  --shadow-lg: 0 8rpx 32rpx rgba(0, 0, 0, 0.8);
-  --shadow-xl: 0 16rpx 48rpx rgba(0, 0, 0, 0.9);
-}
-
-.react-lynx-page {
-  min-height: 100vh;
-  background: var(--primary-bg);
-  position: relative;
-
-  &__background-pattern {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-image: 
-      radial-gradient(circle at 15% 15%, rgba(102, 126, 234, 0.08) 0%, transparent 50%),
-      radial-gradient(circle at 85% 85%, rgba(240, 147, 251, 0.06) 0%, transparent 50%),
-      radial-gradient(circle at 45% 55%, rgba(67, 233, 123, 0.04) 0%, transparent 50%);
-    z-index: 0;
-  }
-
-  &__container {
-    position: relative;
-    z-index: 1;
-    height: 100vh;
-    padding: var(--space-xl) var(--space-lg);
-    box-sizing: border-box;
-  }
-
-  &__header {
-    text-align: center;
-    margin-bottom: var(--space-xxxl);
-  }
-
-  &__logo {
-    margin-bottom: var(--space-lg);
-  }
-
-  &__logo-icon {
-    font-size: 80rpx;
-    line-height: 1;
-  }
-
-  &__title {
-    font-size: 64rpx;
-    font-weight: 700;
-    color: var(--primary-text);
-    margin-bottom: var(--space-sm);
-    display: block;
-    letter-spacing: 2rpx;
-    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
-  }
-
-  &__subtitle {
-    font-size: 28rpx;
-    color: var(--secondary-text);
-    display: block;
-    font-weight: 400;
-    letter-spacing: 1rpx;
-  }
-
-  &__divider {
-    width: 120rpx;
-    height: 4rpx;
-    background: linear-gradient(90deg, var(--accent-text), transparent);
-    margin: var(--space-xl) 0;
-    border-radius: 2rpx;
-  }
-
-  &__content {
-    max-width: 900rpx;
-    flex: 1;
-    padding-bottom: var(--space-xxl);
-  }
-
-  &__intro {
-    margin-bottom: var(--space-xxxl);
-  }
-
-  &__features {
-    margin-bottom: var(--space-xxxl);
-  }
-
-  &__metrics {
-    margin-bottom: var(--space-xxl);
-  }
-}
-
-.section-title {
-  font-size: 40rpx;
-  font-weight: 600;
-  color: var(--primary-text);
-  margin-bottom: var(--space-xl);
-  text-align: center;
-  letter-spacing: 1rpx;
-}
-
-.intro-card {
-  background: var(--card-bg);
-  border-radius: var(--border-radius-xl);
-  border: 1rpx solid rgba(255, 255, 255, 0.1);
-  padding: var(--space-xxl);
-  box-shadow: var(--shadow-lg);
-
-  &__title {
-    font-size: 36rpx;
-    font-weight: 600;
-    color: var(--primary-text);
-    margin-bottom: var(--space-lg);
-    display: block;
-    letter-spacing: 1rpx;
-  }
-
-  &__description {
-    font-size: 28rpx;
-    line-height: 1.7;
-    color: var(--secondary-text);
-    margin-bottom: var(--space-xl);
-    display: block;
-  }
-
-  &__highlights {
-    display: flex;
-    justify-content: space-between;
-    gap: var(--space-lg);
-  }
-}
-
-.highlight-item {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  padding: var(--space-lg);
-  background: rgba(255, 255, 255, 0.03);
-  border-radius: var(--border-radius-md);
-  border: 1rpx solid rgba(255, 255, 255, 0.05);
-  transition: all 0.3s ease;
-
-  &:active {
-    background: rgba(255, 255, 255, 0.06);
-    transform: translateY(-2rpx);
-  }
-
-  &__icon {
-    font-size: 32rpx;
-    margin-bottom: var(--space-sm);
-  }
-
-  &__text {
-    font-size: 22rpx;
-    color: var(--primary-text);
-    font-weight: 500;
-  }
-}
-
-.features-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-lg);
-  
-  .feature-card {
-    flex: 1 1 calc(50% - var(--space-lg) / 2);
-    min-width: 0;
-    box-sizing: border-box;
-  }
-}
-
-.feature-card {
-  position: relative;
-  border-radius: var(--border-radius-xl);
-  overflow: hidden;
-  min-height: 220rpx;
-  cursor: pointer;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  box-sizing: border-box;
-
-  &:active {
-    transform: translateY(-4rpx) scale(0.98);
-  }
-
-  &__inner {
-    height: 100%;
-    padding: var(--space-lg);
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    text-align: left;
-    position: relative;
-    border-radius: var(--border-radius-xl);
-    background: var(--card-bg);
-    border: 1rpx solid rgba(255, 255, 255, 0.1);
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: var(--shadow-lg);
-    box-sizing: border-box;
-  }
-
-  &:active &__inner {
-    box-shadow: var(--shadow-xl);
-    transform: translateY(-4rpx) scale(0.98);
-  }
-
-  &__icon {
-    margin-bottom: var(--space-md);
-    position: relative;
-    align-self: center;
-  }
-
-  &__icon-text {
-    font-size: 48rpx;
-    line-height: 1;
-  }
-
-  &__content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    z-index: 2;
-    align-items: flex-start;
-    text-align: left;
-  }
-
-  &__title {
-    font-size: 26rpx;
-    font-weight: 600;
-    color: #ffffff;
-    margin-bottom: var(--space-sm);
-    display: block;
-    text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.3);
-    letter-spacing: 0.5rpx;
-    line-height: 1.3;
-    word-break: break-all;
-  }
-
-  &__description {
-    font-size: 20rpx;
-    color: rgba(255, 255, 255, 0.8);
-    line-height: 1.4;
-    display: block;
-    font-weight: 400;
-    text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
-    word-break: break-all;
-  }
-
-
-}
-
-.metrics-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-lg);
-  
-  .metric-card {
-    flex: 1 1 calc(50% - var(--space-lg) / 2);
-    min-width: 0;
-    box-sizing: border-box;
-  }
-}
-
-.metric-card {
-  background: var(--card-bg);
-  border-radius: var(--border-radius-xl);
-  border: 1rpx solid rgba(255, 255, 255, 0.1);
-  padding: var(--space-lg);
-  text-align: center;
-  box-shadow: var(--shadow-lg);
-  transition: all 0.3s ease;
-  min-height: 180rpx;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  &:active {
-    transform: translateY(-2rpx);
-    box-shadow: var(--shadow-xl);
-  }
-
-  &__value {
-    font-size: 48rpx;
-    font-weight: 700;
-    color: var(--accent-text);
-    margin-bottom: var(--space-sm);
-    display: block;
-    text-shadow: 0 2rpx 8rpx rgba(0, 212, 255, 0.3);
-    line-height: 1.2;
-  }
-
-  &__label {
-    font-size: 22rpx;
-    font-weight: 600;
-    color: var(--primary-text);
-    margin-bottom: var(--space-xs);
-    display: block;
-    line-height: 1.3;
-  }
-
-  &__description {
-    font-size: 18rpx;
-    color: var(--secondary-text);
-    display: block;
-    opacity: 0.8;
-    line-height: 1.3;
-  }
-}

package/dist/template-starter/src/pages/react-lynx/index.tsx

@@ -1,132 +0,0 @@
-import { definePage } from '@doubao-apps/framework';
-
-import './index.scss';
-
-function ReactLynxPage() {
-  const features = [
-    {
-      title: 'React 语法',
-      description: '使用熟悉的 React 组件和 Hooks，降低学习成本',
-      icon: '⚛️',
-      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
-    },
-    {
-      title: '高性能渲染',
-      description: '双线程架构设计，确保流畅的用户交互体验',
-      icon: '🚀',
-      gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
-    },
-    {
-      title: '原生性能',
-      description: '直接渲染为原生组件，接近原生应用的性能表现',
-      icon: '⚡',
-      gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
-    },
-    {
-      title: '跨平台',
-      description: '一套代码，多端运行，大幅提升开发效率',
-      icon: '🌍',
-      gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
-    }
-  ];
-
-  const advantages = [
-    { label: '开发效率', value: '85%', description: '相比传统开发提升' },
-    { label: '性能表现', value: '98%', description: '接近原生性能' },
-    { label: '代码复用', value: '90%', description: '跨平台代码复用率' },
-    { label: '学习成本', value: '30%', description: 'React 开发者上手时间' }
-  ];
-
-  return (
-    <view className="react-lynx-page">
-      <view className="react-lynx-page__background-pattern" />
-
-      <scroll-view
-        className="react-lynx-page__container"
-        scroll-orientation="vertical"
-        enable-scroll={true}
-        show-scrollbar="false"
-      >
-        <view className="react-lynx-page__header">
-          <view className="react-lynx-page__logo">
-            <text className="react-lynx-page__logo-icon">⚛️</text>
-          </view>
-          <text className="react-lynx-page__title">React Lynx</text>
-          <text className="react-lynx-page__subtitle">现代化的 React UI 开发框架</text>
-          <view className="react-lynx-page__divider" />
-        </view>
-
-        <view className="react-lynx-page__content">
-          <view className="react-lynx-page__intro">
-            <view className="intro-card">
-              <text className="intro-card__title">框架简介</text>
-              <text className="intro-card__description">
-                ReactLynx 是官方推出的 React 框架，让开发者能够使用 React 的心智模型和开发体验来构建 Lynx
-                原生应用。结合了 React 的生态优势与 Lynx 的高性能特性，是小程序运行环境的重要组成部分。
-              </text>
-              <view className="intro-card__highlights">
-                <view className="highlight-item">
-                  <text className="highlight-item__icon">✨</text>
-                  <text className="highlight-item__text">TypeScript 原生支持</text>
-                </view>
-                <view className="highlight-item">
-                  <text className="highlight-item__icon">🔥</text>
-                  <text className="highlight-item__text">热重载开发体验</text>
-                </view>
-                <view className="highlight-item">
-                  <text className="highlight-item__icon">🛠️</text>
-                  <text className="highlight-item__text">丰富的开发工具链</text>
-                </view>
-              </view>
-            </view>
-          </view>
-
-          <view className="react-lynx-page__features">
-            <text className="section-title">核心特性</text>
-            <view className="features-grid">
-              {features.map((feature, index) => (
-                <view key={feature.title} className="feature-card">
-                  <view className="feature-card__inner" style={{ background: feature.gradient }}>
-                    <view className="feature-card__icon">
-                      <text className="feature-card__icon-text">{feature.icon}</text>
-                    </view>
-                    <view className="feature-card__content">
-                      <text className="feature-card__title">{feature.title}</text>
-                      <text className="feature-card__description">{feature.description}</text>
-                    </view>
-                    <view className="feature-card__glow" />
-                  </view>
-                </view>
-              ))}
-            </view>
-          </view>
-
-          <view className="react-lynx-page__metrics">
-            <text className="section-title">性能指标</text>
-            <view className="metrics-grid">
-              {advantages.map((advantage, index) => (
-                <view key={advantage.value} className="metric-card">
-                  <text className="metric-card__value">{advantage.value}</text>
-                  <text className="metric-card__label">{advantage.label}</text>
-                  <text className="metric-card__description">{advantage.description}</text>
-                </view>
-              ))}
-            </view>
-          </view>
-        </view>
-      </scroll-view>
-    </view>
-  );
-}
-
-export default definePage({
-  onShow() {
-    console.log('React Lynx page shown');
-  },
-  onHide() {
-    console.log('React Lynx page hidden');
-  },
-  render() {
-    return <ReactLynxPage />;
-  }
-});