feat: import animal-island-ui snapshot

2026-05-19 19:31:52 +08:00
commit e1065947d6
139 changed files with 14957 additions and 0 deletions
@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { Loading as LoadingComponent, Button } from '../../../src';
+import { CodeBlock, ApiTable, ApiRow, sectionStyle, sectionTitleStyle, tagStyle, demoBodyStyle, labelStyle } from '../../tools';
+
+const LoadingDemo: React.FC = () => {
+    const [active, setActive] = useState(true);
+
+    return (
+        <div style={sectionStyle}>
+            <div style={sectionTitleStyle}>
+                Loading <span style={tagStyle}>加载动画</span>
+            </div>
+            <div style={labelStyle}>
+                动森风格小岛 Loading 动画组件，带有漂浮的小岛、摇曳的树叶和游动的鱼。关闭时会从中间圆形透明扩散，露出底层内容。
+            </div>
+            <div style={{ marginBottom: 16 }}>
+                <Button type={active ? 'default' : 'primary'} onClick={() => setActive(!active)}>
+                    {active ? '关闭 Loading' : '开启 Loading'}
+                </Button>
+            </div>
+            <div style={{ ...demoBodyStyle, position: 'relative', height: 800, padding: 0, overflow: 'hidden' }}>
+                <div
+                    style={{
+                        position: 'absolute',
+                        inset: 0,
+                        background: 'linear-gradient(135deg, #ffd6a5 0%, #fdffb6 25%, #caffbf 50%, #9bf6ff 75%, #a0c4ff 100%)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontSize: 28,
+                        fontWeight: 600,
+                        color: '#333',
+                    }}
+                >
+                    底层内容 · Underlying Content
+                </div>
+                <LoadingComponent
+                    active={active}
+                    style={{ height: '100%', position: 'absolute', inset: 0 }}
+                />
+            </div>
+            <CodeBlock
+                code={`import React, { useState } from 'react';
+import { Loading } from 'animal-island-ui';
+
+const App = () => {
+    const [active, setActive] = useState(true);
+    return (
+        <div style={{ position: 'relative', height: 800 }}>
+            {/* 底层内容 */}
+            <div style={{ position: 'absolute', inset: 0 }}>Underlying Content</div>
+            {/* Loading 覆盖层，关闭时透明圆形扩散露出底层 */}
+            <Loading
+                active={active}
+                style={{ position: 'absolute', inset: 0, height: '100%' }}
+            />
+            <button onClick={() => setActive(!active)}>
+                {active ? '关闭 Loading' : '开启 Loading'}
+            </button>
+        </div>
+    );
+};`}
+            />
+            <ApiTable rows={LOADING_API} />
+        </div>
+    );
+};
+
+const LOADING_API: ApiRow[] = [
+    { prop: 'active', desc: '是否显示加载动画', type: 'boolean', defaultVal: 'true' },
+    { prop: 'className', desc: '自定义类名', type: 'string', defaultVal: '-' },
+    { prop: 'style', desc: '自定义样式', type: 'CSSProperties', defaultVal: '-' },
+];
+
+export default LoadingDemo;