@blocklet/component-studio-cli 0.4.134

package/templates/init/1-professional/src/atoms/DataDisplays.tsx

@@ -0,0 +1,157 @@
+import React, { CSSProperties } from 'react';
+
+import Card from './Card';
+
+// NumberDisplay
+export interface NumberDisplayProps {
+  integer?: number;
+  decimal?: number;
+  title?: string;
+  style?: CSSProperties;
+  className?: string;
+  background?: string;
+  transitionDelay?: string;
+}
+
+export const NumberDisplay: React.FC<NumberDisplayProps> = ({
+  integer,
+  decimal,
+  title = 'Number Values',
+  style,
+  className,
+  background = 'linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 248, 255, 0.9) 100%)',
+  transitionDelay = '0.1s',
+}) => {
+  return (
+    <Card style={style} className={className} background={background} transitionDelay={transitionDelay}>
+      <h3
+        style={{
+          margin: '0 0 1rem 0',
+          color: '#4F46E5',
+          fontSize: '1.3rem',
+          fontWeight: 600,
+        }}>
+        {title}
+      </h3>
+      {integer !== undefined && (
+        <div style={{ margin: '0.8rem 0', fontSize: '1.1rem', color: '#1F2937' }}>
+          <span style={{ fontWeight: 500, marginRight: '0.5rem', color: '#6366F1' }}>Integer:</span>
+          <span style={{ fontSize: '1.5rem', fontWeight: 700 }}>{integer}</span>
+        </div>
+      )}
+      {decimal !== undefined && (
+        <div style={{ margin: '0.8rem 0', fontSize: '1.1rem', color: '#1F2937' }}>
+          <span style={{ fontWeight: 500, marginRight: '0.5rem', color: '#6366F1' }}>Decimal:</span>
+          <span style={{ fontSize: '1.5rem', fontWeight: 700 }}>{decimal.toFixed(2)}</span>
+        </div>
+      )}
+    </Card>
+  );
+};
+
+// JsonDisplay
+export interface JsonDisplayProps {
+  data: Record<string, any>;
+  title?: string;
+  style?: CSSProperties;
+  className?: string;
+  background?: string;
+  transitionDelay?: string;
+  keyColor?: string;
+}
+
+export const JsonDisplay: React.FC<JsonDisplayProps> = ({
+  data,
+  title = 'JSON Data',
+  style,
+  className,
+  background = 'linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 248, 240, 0.9) 100%)',
+  transitionDelay = '0.2s',
+  keyColor = '#F59E0B',
+}) => {
+  return (
+    <Card style={style} className={className} background={background} transitionDelay={transitionDelay}>
+      <h3
+        style={{
+          margin: '0 0 1rem 0',
+          color: keyColor,
+          fontSize: '1.3rem',
+          fontWeight: 600,
+        }}>
+        {title}
+      </h3>
+      {Object.entries(data).map(([key, value], index) => (
+        <div key={index} style={{ margin: '0.8rem 0', fontSize: '1.1rem', color: '#1F2937' }}>
+          <span style={{ fontWeight: 500, marginRight: '0.5rem', color: keyColor }}>{key}:</span>
+          <span style={{ fontSize: '1.15rem' }}>{String(value)}</span>
+        </div>
+      ))}
+    </Card>
+  );
+};
+
+// YamlDisplay
+export interface YamlDisplayProps {
+  data: Record<string, any>;
+  title?: string;
+  style?: CSSProperties;
+  className?: string;
+  animate?: boolean;
+  delay?: string;
+}
+
+export const YamlDisplay: React.FC<YamlDisplayProps> = ({
+  data,
+  title = 'YAML to JSON Data',
+  style = {},
+  className,
+  animate = true,
+  delay = '0.4s',
+}) => {
+  const containerStyle: CSSProperties = {
+    margin: '2.5rem 0',
+    ...(animate && {
+      opacity: 1,
+      transform: 'translateY(0)',
+      transition: 'transform 0.4s ease, opacity 0.4s ease',
+      transitionDelay: delay,
+    }),
+    ...style,
+  };
+
+  return (
+    <div style={containerStyle} className={className}>
+      <h3
+        style={{
+          textAlign: 'center',
+          margin: '0 0 1.5rem 0',
+          color: '#4F46E5',
+          fontSize: '1.5rem',
+          fontWeight: 600,
+        }}>
+        {title}
+      </h3>
+      <pre
+        style={{
+          background: 'linear-gradient(135deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.95) 100%)',
+          padding: '1.5rem',
+          borderRadius: '12px',
+          overflow: 'auto',
+          fontSize: '0.95rem',
+          color: '#E5E7EB',
+          boxShadow: '0 15px 30px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.05)',
+          fontFamily: '"Fira Code", "Menlo", monospace',
+          lineHeight: 1.6,
+          border: '1px solid rgba(55, 65, 81, 0.5)',
+        }}>
+        {JSON.stringify(data, null, 2)}
+      </pre>
+    </div>
+  );
+};
+
+export default {
+  NumberDisplay,
+  JsonDisplay,
+  YamlDisplay,
+};

package/templates/init/1-professional/src/atoms/GradientTitle.tsx

@@ -0,0 +1,64 @@
+import React, { CSSProperties } from 'react';
+
+export interface GradientTitleProps {
+  title: string;
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  startColor?: string;
+  endColor?: string;
+  style?: CSSProperties;
+  className?: string;
+  animate?: boolean;
+}
+
+export const GradientTitle: React.FC<GradientTitleProps> = ({
+  title,
+  level = 1,
+  startColor = '#6366F1',
+  endColor = '#3773F2',
+  style = {},
+  className,
+  animate = false,
+}) => {
+  const baseStyle: CSSProperties = {
+    borderRadius: '12px',
+    textAlign: 'center',
+    fontWeight: 800,
+    letterSpacing: '-0.03em',
+    margin: '0 0 1.5rem',
+    background: `linear-gradient(135deg, ${startColor} 0%, ${endColor} 100%)`,
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+    backgroundClip: 'text',
+    color: 'transparent',
+    // @ts-ignore
+    textFillColor: 'transparent',
+    ...(animate && { animation: 'fadeSlideDown 0.7s ease forwards' }),
+    ...style,
+  };
+
+  // 根据level设置不同的字体大小
+  const sizeMap = {
+    1: '3.5rem',
+    2: '2.5rem',
+    3: '2rem',
+    4: '1.5rem',
+    5: '1.25rem',
+    6: '1rem',
+  };
+
+  const combinedStyle = {
+    ...baseStyle,
+    fontSize: sizeMap[level],
+  };
+
+  // 根据level动态渲染对应的标题元素
+  const HeadingTag = `h${level}` as keyof JSX.IntrinsicElements;
+
+  return (
+    <HeadingTag key={title} className={className} style={combinedStyle}>
+      {title}
+    </HeadingTag>
+  );
+};
+
+export default GradientTitle;

package/templates/init/1-professional/src/atoms/Logo.tsx

@@ -0,0 +1,58 @@
+import React, { CSSProperties } from 'react';
+
+export interface LogoProps {
+  src: string;
+  width?: number;
+  height?: number;
+  alt?: string;
+  animated?: boolean;
+  style?: CSSProperties;
+  className?: string;
+}
+
+export const Logo: React.FC<LogoProps> = ({
+  src,
+  width,
+  height,
+  alt = 'logo',
+  animated = true,
+  style = {},
+  className,
+}) => {
+  const baseStyle: CSSProperties = {
+    borderRadius: '4px',
+    maxWidth: '240px',
+    maxHeight: '120px',
+    filter: 'drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1))',
+    width: width ? `${width}px` : 'auto',
+    height: height ? `${height}px` : 'auto',
+    transition: 'transform 0.3s ease',
+    ...style,
+  };
+
+  const containerStyle: CSSProperties = {
+    textAlign: 'center',
+    margin: '1rem 0',
+    ...(animated && { animation: 'fadeIn 0.9s ease forwards' }),
+  };
+
+  const handleMouseOver = (e: React.MouseEvent<HTMLImageElement>) => {
+    if (animated) {
+      e.currentTarget.style.transform = 'scale(1.05)';
+    }
+  };
+
+  const handleMouseOut = (e: React.MouseEvent<HTMLImageElement>) => {
+    if (animated) {
+      e.currentTarget.style.transform = 'scale(1)';
+    }
+  };
+
+  return (
+    <div style={containerStyle} className={className}>
+      <img src={src} alt={alt} style={baseStyle} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut} />
+    </div>
+  );
+};
+
+export default Logo;

package/templates/init/1-professional/src/atoms/index.ts

@@ -0,0 +1,27 @@
+import AnimationWrapper, { useAnimationKeyframes } from './AnimationWrapper';
+import ArrayTable from './ArrayTable';
+import Card from './Card';
+import ContentWrapper from './ContentWrapper';
+import CopyrightFooter from './CopyrightFooter';
+import { NumberDisplay, JsonDisplay, YamlDisplay } from './DataDisplays';
+import GradientTitle from './GradientTitle';
+import Logo from './Logo';
+
+export {
+  // Basic
+  Card,
+  AnimationWrapper,
+  useAnimationKeyframes,
+  GradientTitle,
+  Logo,
+
+  // Data Display
+  NumberDisplay,
+  JsonDisplay,
+  YamlDisplay,
+  ArrayTable,
+
+  // Layout
+  ContentWrapper,
+  CopyrightFooter,
+};