simpleui-py 1.0.0__py3-none-any.whl

simpleui/__init__.py

@@ -0,0 +1,73 @@
+"""
+SimpleUI - Fluent 风格 Python UI 组件库
+简约设计，无限可能
+"""
+
+__version__ = "1.0.0"
+__author__ = "SimpleUI Team"
+
+# 从 core 导入核心功能
+from .core import (
+    Component,
+    Theme,
+    ThemeType,
+    render_html,
+    export_html,
+    set_theme,
+    get_theme,
+)
+
+# 从 components 导入所有组件
+from .components import (
+    Button,
+    ButtonGroup,
+    Input,
+    TextArea,
+    Card,
+    Switch,
+    Tag,
+    Progress,
+    Alert,
+    Container,
+    Row,
+    Column,
+)
+
+# 从 utils 导入工具函数
+from .utils import preview, serve, demo, playground
+
+# 导出列表
+__all__ = [
+    # 版本信息
+    "__version__",
+    "__author__",
+    
+    # 核心类
+    "Component",
+    "Theme",
+    "ThemeType",
+    "render_html",
+    "export_html",
+    "set_theme",
+    "get_theme",
+    
+    # 组件
+    "Button",
+    "ButtonGroup",
+    "Input",
+    "TextArea",
+    "Card",
+    "Switch",
+    "Tag",
+    "Progress",
+    "Alert",
+    "Container",
+    "Row",
+    "Column",
+    
+    # 工具函数
+    "preview",
+    "serve",
+    "demo",
+    "playground",
+]

simpleui/components/__init__.py

@@ -0,0 +1,28 @@
+"""
+SimpleUI 组件模块
+导出所有 UI 组件
+"""
+
+from .button import Button, ButtonGroup
+from .input import Input, TextArea
+from .card import Card
+from .switch import Switch
+from .tag import Tag
+from .progress import Progress
+from .alert import Alert
+from .layout import Container, Row, Column
+
+__all__ = [
+    "Button",
+    "ButtonGroup",
+    "Input",
+    "TextArea",
+    "Card",
+    "Switch",
+    "Tag",
+    "Progress",
+    "Alert",
+    "Container",
+    "Row",
+    "Column",
+]

simpleui/components/alert.py

@@ -0,0 +1,168 @@
+"""
+进度条组件
+Fluent 风格进度条，支持多种状态
+"""
+
+from typing import Optional, Literal
+from ..core import Component
+
+
+class Progress(Component):
+    """
+    Fluent 风格进度条组件
+    
+    支持线性进度条和圆形进度条，支持多种状态颜色。
+    
+    参数:
+        value: 当前进度值 (0-100)
+        max_value: 最大值
+        label: 标签文本
+        show_value: 是否显示数值
+        status: 状态颜色
+        striped: 是否显示条纹
+        height: 高度
+    
+    示例:
+        Progress(value=75, label="下载进度")
+        Progress(value=100, status="success")
+        Progress.circle(value=70)
+    """
+    
+    # 状态对应的CSS类
+    STATUS_CLASSES = {
+        "default": "",
+        "success": "sui-progress-success",
+        "warning": "sui-progress-warning",
+        "danger": "sui-progress-danger",
+    }
+    
+    def __init__(
+        self,
+        value: float = 0,
+        max_value: float = 100,
+        label: Optional[str] = None,
+        show_value: bool = True,
+        status: Literal["default", "success", "warning", "danger"] = "default",
+        striped: bool = False,
+        animated: bool = False,
+        height: str = "8px",
+        **kwargs
+    ):
+        super().__init__(**kwargs)
+        self._max_value = max_value
+        self.value = max(0, min(value, self._max_value))
+        self.label = label
+        self.show_value = show_value
+        self.status = status
+        self.striped = striped
+        self.animated = animated
+        self.height = height
+    
+    def _get_progress_classes(self) -> str:
+        """获取进度条CSS类"""
+        classes = ["sui-progress"]
+        
+        if self.status in self.STATUS_CLASSES:
+            classes.append(self.STATUS_CLASSES[self.status])
+        
+        return " ".join(classes)
+    
+    def _get_percentage(self) -> float:
+        """计算百分比"""
+        if self._max_value == 0:
+            return 0
+        return (self.value / self._max_value) * 100
+    
+    def render(self) -> str:
+        """渲染进度条"""
+        html_parts = ['<div class="sui-progress-wrapper">']
+        
+        # 标签和数值
+        if self.label or self.show_value:
+            html_parts.append('<div class="sui-progress-label">')
+            
+            if self.label:
+                html_parts.append(f'<span>{self.label}</span>')
+            else:
+                html_parts.append('<span></span>')
+            
+            if self.show_value:
+                html_parts.append(f'<span>{round(self._get_percentage())}%</span>')
+            
+            html_parts.append('</div>')
+        
+        # 进度条
+        percentage = self._get_percentage()
+        html_parts.append(f'<div class="{self._get_progress_classes()}" style="height:{self.height}">')
+        
+        bar_style = f"width:{percentage}%"
+        if self.striped:
+            bar_style += ";background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-size: 1rem 1rem"
+        
+        html_parts.append(f'<div class="sui-progress-bar" style="{bar_style}"></div>')
+        html_parts.append('</div>')
+        
+        html_parts.append('</div>')
+        
+        return "".join(html_parts)
+    
+    def set_value(self, value: float) -> "Progress":
+        """设置当前值"""
+        self.value = max(0, min(value, self._max_value))
+        return self
+    
+    def set_status(self, status: Literal["default", "success", "warning", "danger"]) -> "Progress":
+        """设置状态"""
+        self.status = status
+        return self
+    
+    @staticmethod
+    def circle(
+        value: float = 0,
+        max_value: float = 100,
+        size: int = 80,
+        stroke_width: int = 6,
+        status: Literal["default", "success", "warning", "danger"] = "default",
+    ) -> str:
+        """
+        创建圆形进度条
+        
+        参数:
+            value: 当前进度值
+            max_value: 最大值
+            size: 尺寸
+            stroke_width: 线条宽度
+            status: 状态
+        
+        返回:
+            HTML字符串
+        """
+        percentage = (value / max_value) * 100 if max_value > 0 else 0
+        radius = (size - stroke_width) / 2
+        circumference = 2 * 3.14159 * radius
+        stroke_dashoffset = circumference * (1 - percentage / 100)
+        
+        colors = {
+            "default": "url(#progress-gradient)",
+            "success": "#43e97b",
+            "warning": "#fbbf24",
+            "danger": "#ef4444",
+        }
+        
+        color = colors.get(status, colors["default"])
+        
+        return f'''
+<div class="sui-progress-circle" style="width:{size}px;height:{size}px;position:relative">
+    <svg width="{size}" height="{size}" style="transform:rotate(-90deg)">
+        <defs>
+            <linearGradient id="progress-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stop-color="#667eea"/>
+                <stop offset="100%" stop-color="#764ba2"/>
+            </linearGradient>
+        </defs>
+        <circle cx="{size/2}" cy="{size/2}" r="{radius}" fill="none" stroke="var(--bg-card)" stroke-width="{stroke_width}"/>
+        <circle cx="{size/2}" cy="{size/2}" r="{radius}" fill="none" stroke="{color}" stroke-width="{stroke_width}" stroke-linecap="round" stroke-dasharray="{circumference}" stroke-dashoffset="{stroke_dashoffset}" style="transition:stroke-dashoffset 0.5s ease"/>
+    </svg>
+    <span style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:var(--text-primary)">{round(percentage)}%</span>
+</div>
+'''

simpleui/components/button.py

@@ -0,0 +1,259 @@
+"""
+按钮组件
+Fluent 风格按钮，支持多种变体和尺寸
+"""
+
+from typing import Optional, Literal, Union
+from ..core import Component
+
+
+class Button(Component):
+    """
+    Fluent 风格按钮组件
+    
+    支持6种变体：primary, secondary, outline, ghost, danger, success
+    支持3种尺寸：sm, md, lg
+    支持图标、加载状态、禁用状态
+    
+    参数:
+        text: 按钮文本
+        variant: 按钮变体
+        size: 按钮尺寸
+        icon: 图标SVG路径
+        icon_position: 图标位置
+        loading: 是否显示加载状态
+        disabled: 是否禁用
+        href: 链接地址（设置后渲染为<a>标签）
+        onclick: 点击事件处理函数
+    
+    示例:
+        Button("点击我", variant="primary")
+        Button("删除", variant="danger", icon=Button.ICONS["delete"])
+        Button.icon_button("plus")
+    """
+    
+    # 变体对应的CSS类
+    VARIANT_CLASSES = {
+        "primary": "sui-btn-primary",
+        "secondary": "sui-btn-secondary",
+        "outline": "sui-btn-outline",
+        "ghost": "sui-btn-ghost",
+        "danger": "sui-btn-danger",
+        "success": "sui-btn-success",
+    }
+    
+    # 尺寸对应的CSS类
+    SIZE_CLASSES = {
+        "sm": "sui-btn-sm",
+        "md": "",
+        "lg": "sui-btn-lg",
+    }
+    
+    # 预设图标
+    ICONS = {
+        "plus": '<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>',
+        "minus": '<path d="M19 13H5v-2h14v2z"/>',
+        "download": '<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>',
+        "upload": '<path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>',
+        "check": '<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>',
+        "close": '<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>',
+        "edit": '<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>',
+        "delete": '<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>',
+        "search": '<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>',
+        "settings": '<path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>',
+        "refresh": '<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>',
+        "arrow_right": '<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>',
+        "arrow_left": '<path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/>',
+        "play": '<path d="M8 5v14l11-7z"/>',
+        "pause": '<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>',
+        "mail": '<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>',
+        "user": '<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>',
+        "heart": '<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>',
+        "star": '<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>',
+        "home": '<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>',
+        "folder": '<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>',
+        "file": '<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>',
+        "copy": '<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>',
+        "link": '<path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>',
+        "external": '<path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>',
+        "info": '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>',
+        "warning": '<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>',
+        "error": '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>',
+        "help": '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>',
+    }
+    
+    def __init__(
+        self,
+        text: Optional[str] = None,
+        variant: Literal["primary", "secondary", "outline", "ghost", "danger", "success"] = "primary",
+        size: Literal["sm", "md", "lg"] = "md",
+        icon: Optional[str] = None,
+        icon_position: Literal["left", "right"] = "left",
+        loading: bool = False,
+        disabled: bool = False,
+        href: Optional[str] = None,
+        onclick: Optional[str] = None,
+        **kwargs
+    ):
+        """
+        初始化按钮
+        
+        参数:
+            text: 按钮文本
+            variant: 变体
+            size: 尺寸
+            icon: 图标SVG路径
+            icon_position: 图标位置
+            loading: 加载状态
+            disabled: 禁用状态
+            href: 链接地址
+            onclick: 点击事件
+        """
+        super().__init__(**kwargs)
+        self.text = text
+        self.variant = variant
+        self.size = size
+        self.icon = icon
+        self.icon_position = icon_position
+        self.loading = loading
+        self.disabled = disabled
+        self.href = href
+        self.onclick = onclick
+    
+    def _get_base_classes(self) -> str:
+        """获取CSS类名"""
+        classes = ["sui-btn"]
+        
+        # 变体类
+        if self.variant in self.VARIANT_CLASSES:
+            classes.append(self.VARIANT_CLASSES[self.variant])
+        
+        # 尺寸类
+        if self.size in self.SIZE_CLASSES:
+            classes.append(self.SIZE_CLASSES[self.size])
+        
+        # 加载状态
+        if self.loading:
+            classes.append("sui-btn-loading")
+        
+        # 用户自定义类
+        if self.class_name:
+            classes.append(self.class_name)
+        
+        return " ".join(classes)
+    
+    def _get_attributes_str(self) -> str:
+        """获取属性字符串"""
+        attrs = super()._get_attributes_str()
+        
+        # 禁用状态
+        if self.disabled or self.loading:
+            attrs += " disabled"
+        
+        # 点击事件
+        if self.onclick and not self.disabled:
+            attrs += f' onclick="{self.onclick}"'
+        
+        return attrs
+    
+    def _render_icon(self) -> str:
+        """渲染图标"""
+        if not self.icon:
+            return ""
+        
+        icon_html = f'<svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">{self.icon}</svg>'
+        
+        if self.icon_position == "right":
+            return f'<span>{self.text or ""}</span>{icon_html}'
+        else:
+            return f'{icon_html}<span>{self.text or ""}</span>'
+    
+    def render(self) -> str:
+        """渲染按钮为HTML"""
+        # 内容
+        if self.icon:
+            content = self._render_icon()
+        else:
+            content = self.text or ""
+        
+        # 子组件
+        content += self._render_children()
+        
+        # 渲染为链接或按钮
+        if self.href:
+            return f'<a href="{self.href}" {self._get_attributes_str()}>{content}</a>'
+        
+        return f'<button {self._get_attributes_str()}>{content}</button>'
+    
+    @classmethod
+    def icon_button(
+        cls,
+        icon: str,
+        variant: str = "primary",
+        size: str = "md",
+        **kwargs
+    ) -> "Button":
+        """
+        创建图标按钮
+        
+        参数:
+            icon: 图标名称或SVG路径
+            variant: 变体
+            size: 尺寸
+        
+        返回:
+            Button实例
+        
+        示例:
+            Button.icon_button("plus")
+            Button.icon_button("search", variant="secondary")
+        """
+        # 获取图标SVG
+        icon_svg = cls.ICONS.get(icon, icon)
+        
+        return cls(
+            variant=variant,
+            size=size,
+            icon=icon_svg,
+            class_name="sui-btn-icon " + kwargs.pop("class_name", ""),
+            **kwargs
+        )
+
+
+class ButtonGroup(Component):
+    """
+    按钮组组件
+    
+    将多个按钮组合在一起显示。
+    
+    参数:
+        buttons: 按钮列表
+    
+    示例:
+        group = ButtonGroup([
+            Button("左", variant="primary"),
+            Button("中", variant="primary"),
+            Button("右", variant="primary"),
+        ])
+    """
+    
+    def __init__(
+        self,
+        buttons: Optional[list] = None,
+        **kwargs
+    ):
+        super().__init__(**kwargs)
+        if buttons:
+            for btn in buttons:
+                self.add_child(btn)
+    
+    def _get_base_classes(self) -> str:
+        return f"sui-btn-group {self.class_name}".strip()
+    
+    def add_button(self, button: Button) -> "ButtonGroup":
+        """添加按钮"""
+        self.add_child(button)
+        return self
+    
+    def render(self) -> str:
+        return f'<div {self._get_attributes_str()}>{self._render_children()}</div>'

simpleui/components/card.py

@@ -0,0 +1,130 @@
+"""
+卡片组件
+Fluent 风格卡片，支持图片和多种变体
+"""
+
+from typing import Optional, Literal, Union
+from ..core import Component
+
+
+class Card(Component):
+    """
+    Fluent 风格卡片组件
+    
+    支持图片、多种变体、交互效果。
+    
+    参数:
+        title: 标题
+        text: 描述文本
+        image: 图片URL或背景色
+        image_height: 图片高度
+        variant: 变体
+        footer: 底部内容
+        onclick: 点击事件
+    
+    示例:
+        Card(title="标题", text="描述")
+        Card(title="标题", image="var(--gradient-1)")
+        Card(title="标题", variant="elevated")
+    """
+    
+    # 变体对应的CSS类
+    VARIANT_CLASSES = {
+        "default": "",
+        "elevated": "sui-card-elevated",
+        "outlined": "sui-card-outlined",
+    }
+    
+    def __init__(
+        self,
+        title: Optional[str] = None,
+        text: Optional[str] = None,
+        image: Optional[str] = None,
+        image_height: str = "120px",
+        variant: Literal["default", "elevated", "outlined"] = "default",
+        footer: Optional[Union[str, Component]] = None,
+        onclick: Optional[str] = None,
+        **kwargs
+    ):
+        super().__init__(**kwargs)
+        self.title = title
+        self.text = text
+        self.image = image
+        self.image_height = image_height
+        self.variant = variant
+        self.footer = footer
+        self.onclick = onclick
+    
+    def _get_base_classes(self) -> str:
+        """获取CSS类名"""
+        classes = ["sui-card"]
+        
+        if self.variant in self.VARIANT_CLASSES:
+            classes.append(self.VARIANT_CLASSES[self.variant])
+        
+        if self.onclick:
+            classes.append("sui-card-interactive")
+        
+        if self.class_name:
+            classes.append(self.class_name)
+        
+        return " ".join(classes)
+    
+    def _get_attributes_str(self) -> str:
+        """获取属性字符串"""
+        attrs = super()._get_attributes_str()
+        
+        if self.onclick:
+            attrs += f' onclick="{self.onclick}"'
+        
+        return attrs
+    
+    def render(self) -> str:
+        """渲染卡片"""
+        html_parts = [f'<div {self._get_attributes_str()}>']
+        
+        # 图片
+        if self.image:
+            if self.image.startswith("http") or self.image.startswith("/"):
+                html_parts.append(f'<img class="sui-card-img" src="{self.image}" alt="{self.title or ""}">')
+            else:
+                html_parts.append(f'<div class="sui-card-img" style="background:{self.image};height:{self.image_height}"></div>')
+        
+        # 内容
+        html_parts.append('<div class="sui-card-body">')
+        
+        if self.title:
+            html_parts.append(f'<h4 class="sui-card-title">{self.title}</h4>')
+        
+        if self.text:
+            html_parts.append(f'<p class="sui-card-text">{self.text}</p>')
+        
+        # 子组件
+        html_parts.append(self._render_children())
+        
+        html_parts.append('</div>')
+        
+        # 底部
+        if self.footer:
+            html_parts.append('<div class="sui-card-footer">')
+            if isinstance(self.footer, Component):
+                html_parts.append(self.footer.render())
+            else:
+                html_parts.append(str(self.footer))
+            html_parts.append('</div>')
+        
+        html_parts.append('</div>')
+        
+        return "".join(html_parts)
+    
+    def set_image(self, image: str, height: Optional[str] = None) -> "Card":
+        """设置图片"""
+        self.image = image
+        if height:
+            self.image_height = height
+        return self
+    
+    def set_footer(self, footer: Union[str, Component]) -> "Card":
+        """设置底部"""
+        self.footer = footer
+        return self