feat:重构按钮和icon组件

stitch-ui/buttonUi/DESIGN.md

@@ -0,0 +1,54 @@
+# Design System Strategy: Doodle Mini
+
+## 1. Overview & Creative North Star: "The Sun-Drenched Studio"
+The creative direction for this design system is **"The Sun-Drenched Studio."** We are moving away from the cold, clinical "educational app" look and toward a space that feels like a physical, tactile craft room bathed in morning light. 
+
+Instead of a rigid, boxed-in grid, we embrace **Organic Asymmetry**. Elements should feel like they were placed on a table by hand, not snapped to a pixel-perfect wireframe. We break the "template" look by using exaggerated corner radii, overlapping "paper" layers, and a hierarchy that prioritizes warmth and play over traditional data density.
+
+## 2. Colors: Tonal Radiance
+The palette is anchored by `primary` (#6c5a00) and `primary_container` (#ffd709), creating a "Yaya Yellow" experience that is vibrant yet sophisticated.
+
+*   **The "No-Line" Rule:** Under no circumstances should 1px solid borders be used to separate content. We define boundaries exclusively through background shifts. Use `surface_container_low` (#f8f0e0) for main content areas and `surface` (#fef6e7) for the global backdrop.
+*   **Surface Hierarchy & Nesting:** Treat the UI as stacked sheets of heavy-weight construction paper.
+    *   **Level 0:** `background` (#fef6e7) – The desk surface.
+    *   **Level 1:** `surface_container` (#f0e7d6) – The worksheet base.
+    *   **Level 2:** `surface_container_lowest` (#ffffff) – Active drawing cards or "Paper" modals.
+*   **The Glass & Gradient Rule:** For navigation bars or floating tool palettes, use Glassmorphism. Apply `surface_container_low` at 80% opacity with a `20px` backdrop blur. This ensures the "sunny" background bleeds through, maintaining the "Sun-Drenched" atmosphere.
+*   **Signature Textures:** Main CTAs should not be flat. Apply a subtle linear gradient from `primary_fixed` (#ffd709) to `primary_fixed_dim` (#efc900) at a 145-degree angle to give buttons a "pillowy" 3D volume.
+
+## 3. Typography: The Friendly Guide
+We use **Plus Jakarta Sans** exclusively. Its geometric yet soft terminals provide a modern, legible, and approachable voice.
+
+*   **Display & Headlines:** Use `display-lg` (3.5rem) for "Doodle Mini" brand moments. Headlines (`headline-md`) should use a tighter letter-spacing (-0.02em) to feel "hugged" and friendly.
+*   **Body & Labels:** Use `body-lg` for all instructional text. In a children's context, readability is paramount; ensure a line height of at least 1.6x the font size.
+*   **Hierarchy as Personality:** Use `on_secondary_container` (#6d3b00) for sub-headers to provide a warm, "chocolatey" contrast against the yellow, moving away from harsh blacks.
+
+## 4. Elevation & Depth: Tonal Layering
+Depth in this system is a result of light and shadow, not lines and strokes.
+
+*   **The Layering Principle:** To lift a component, place a `surface_container_highest` (#e5dcc9) element inside a `surface_container_low` (#f8f0e0) environment. This creates a "recessed" or "elevated" feel through color value alone.
+*   **Ambient Shadows:** Use shadows sparingly. When an object "floats" (like a floating action button), use a shadow color derived from `on_surface` (#322e25) at 6% opacity, with a blur of `32px` and a Y-offset of `8px`. It should look like a soft glow, not a drop shadow.
+*   **The "Ghost Border" Fallback:** If a separator is required for accessibility in input fields, use `outline_variant` (#b3ac9f) at **15% opacity**. It should be felt, not seen.
+
+## 5. Components: Tactile & Safe
+Every component must feel "squishy" and safe to touch.
+
+*   **Buttons:** 
+    *   **Primary:** Uses `primary_container` (#ffd709) with a `full` (9999px) radius. 
+    *   **States:** On press, scale the button down to 96% size to simulate a physical "click" into the screen.
+*   **Cards & Lists:** Forbid divider lines. Separate list items using a `spacing-3` (1rem) gap and alternating background colors between `surface_container_low` and `surface_container`.
+*   **Input Fields:** Use `surface_container_highest` for the input track. Corners must be `xl` (3rem). Labels sit *above* the field in `title-sm` to ensure children can always see the context.
+*   **Selection Chips:** Use `secondary_container` (#ffc697) for selected states. The roundedness must be `full` to mimic smooth river stones.
+*   **The "Joy" Progress Bar:** A custom component for Doodle Mini. Use a thick track (`1.5rem` height) in `surface_container_highest` with the progress indicator using a gradient of `tertiary` (#006b1b) to `tertiary_fixed` (#91f78e).
+
+## 6. Do’s and Don’ts
+
+### Do:
+*   **Do** use `xl` and `full` corner radii for almost everything. Sharp corners are "scary."
+*   **Do** lean into white space. Use `spacing-12` (4rem) between major sections to let the design breathe.
+*   **Do** use `on_tertiary_container` (dark green) for success states; it feels organic and "earthy" against the yellow.
+
+### Don’t:
+*   **Don’t** use pure black (#000000). Use `on_surface` (#322e25) for all dark text to maintain the warm, sunny tone.
+*   **Don’t** use 1px dividers. If you feel you need one, use a `surface_variant` (#e5dcc9) color block that is `4px` thick with `full` rounded caps.
+*   **Don’t** crowd the interface. If a screen feels busy, increase the background "paper" size and use a scrollable layout instead of shrinking elements.

stitch-ui/buttonUi/code.html

@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+
+<html lang="zh-CN">
+
+<head>
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>按钮组件库 (Button Library) - 优化版</title>
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;display=swap"
+        rel="stylesheet" />
+    <link
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
+        rel="stylesheet" />
+    <script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "surface-container-lowest": "#ffffff",
+                        "tertiary-container": "#9cd343", // Updated to #9cd343
+                        "secondary": "#8a4c00",
+                        "surface-dim": "#dcd4c0",
+                        "error-container": "#f95630",
+                        "background": "#fef6e7",
+                        "surface-container-high": "#eae2d0",
+                        "on-surface": "#322e25",
+                        "surface-tint": "#6c5a00",
+                        "inverse-surface": "#110e06",
+                        "tertiary": "#006b1b",
+                        "on-tertiary-fixed-variant": "#00691a",
+                        "on-tertiary-container": "#005e17",
+                        "inverse-on-surface": "#a29c8f",
+                        "on-secondary-container": "#6d3b00",
+                        "secondary-container": "#ffc697",
+                        "on-error-container": "#520c00",
+                        "surface-container-low": "#f8f0e0",
+                        "on-background": "#322e25",
+                        "surface": "#fef6e7",
+                        "primary-container": "#ffd709",
+                        "secondary-fixed-dim": "#ffb470",
+                        "primary-fixed": "#ffd709",
+                        "tertiary-fixed": "#9cd343", // Updated
+                        "on-primary": "#fff2cd",
+                        "error": "#b02500",
+                        "surface-bright": "#fef6e7",
+                        "tertiary-dim": "#005d16",
+                        "surface-variant": "#e5dcc9",
+                        "outline-variant": "#b3ac9f",
+                        "primary-dim": "#5e4e00",
+                        "on-secondary": "#fff0e6",
+                        "on-error": "#ffefec",
+                        "on-secondary-fixed": "#512a00",
+                        "on-secondary-fixed-variant": "#7a4300",
+                        "primary": "#6c5a00",
+                        "surface-container-highest": "#e5dcc9",
+                        "on-primary-fixed": "#453900",
+                        "tertiary-fixed-dim": "#83e881",
+                        "on-primary-container": "#5b4b00",
+                        "inverse-primary": "#ffd709",
+                        "secondary-fixed": "#ffc697",
+                        "on-surface-variant": "#605b50",
+                        "on-tertiary": "#d1ffc8",
+                        "on-tertiary-fixed": "#00480f",
+                        "error-dim": "#b92902",
+                        "on-primary-fixed-variant": "#665500",
+                        "secondary-dim": "#794200",
+                        "primary-fixed-dim": "#efc900",
+                        "outline": "#7c766a",
+                        "surface-container": "#f0e7d6"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "1rem",
+                        "lg": "1.5rem", // Changed from 2rem to reflect moderate rounding request
+                        "xl": "2rem",
+                        "2xl": "1.5rem", // Standard 24px-ish for buttons
+                        "full": "9999px"
+                    },
+                    "fontFamily": {
+                        "headline": ["Plus Jakarta Sans", "Noto Sans SC"],
+                        "body": ["Plus Jakarta Sans", "Noto Sans SC"],
+                        "label": ["Plus Jakarta Sans", "Noto Sans SC"]
+                    }
+                },
+            },
+        }
+    </script>
+    <style>
+        body {
+            font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
+        }
+
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+
+        .btn-press-simulate {
+            transform: scale(0.96);
+        }
+    </style>
+    <style>
+        body {
+            min-height: max(884px, 100dvh);
+        }
+    </style>
+</head>
+
+<body class="bg-background text-on-surface min-h-screen pb-48"> <!-- Increased padding for the double bottom bar -->
+    <!-- TopAppBar Navigation Shell -->
+    <header
+        class="sticky top-0 z-50 bg-[#f8f0e0]/80 backdrop-blur-xl shadow-[0_8px_32px_rgba(50,46,37,0.06)] rounded-b-2xl">
+        <div class="flex justify-between items-center w-full px-6 py-4 max-w-5xl mx-auto">
+            <div class="flex items-center gap-4">
+                <button
+                    class="material-symbols-outlined text-[#6c5a00] active:scale-95 transition-transform duration-200">menu</button>
+                <h1 class="text-xl font-black text-[#6d3b00] tracking-[-0.02em]">按钮组件库 - 优化版</h1>
+            </div>
+            <button
+                class="material-symbols-outlined text-[#6c5a00] active:scale-95 transition-transform duration-200">print</button>
+        </div>
+    </header>
+    <main class="max-w-5xl mx-auto px-6 py-8">
+        <!-- Intro Hero Section -->
+        <section class="mb-12">
+            <div
+                class="bg-surface-container-low rounded-2xl p-8 flex flex-col md:flex-row items-center gap-8 border-4 border-white/50">
+                <div class="flex-1 text-center md:text-left">
+                    <h2 class="text-3xl font-bold text-on-secondary-container mb-4 tracking-tight">阳光色彩调色盘</h2>
+                    <p class="text-on-surface-variant text-base leading-relaxed">
+                        触感舒适、灵动活泼，专为儿童和家长设计的按钮系统。抛弃尖锐棱角，拥抱温暖与游戏感。</p>
+                </div>
+                <div class="w-full md:w-64 h-40 bg-primary-container rounded-2xl shadow-inner overflow-hidden relative">
+                    <div class="absolute inset-0 bg-gradient-to-br from-primary-fixed to-primary-fixed-dim opacity-50">
+                    </div>
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <span class="material-symbols-outlined text-on-primary-container text-6xl"
+                            style="font-variation-settings: 'FILL' 1;">smart_toy</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Bento Grid for Categories -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <!-- Primary Buttons -->
+            <div class="bg-surface-container rounded-2xl p-8 flex flex-col gap-6">
+                <div class="flex items-center gap-3">
+                    <span class="material-symbols-outlined text-primary"
+                        style="font-variation-settings: 'FILL' 1;">star</span>
+                    <h3 class="text-xl font-bold text-on-surface">主要按钮 (Primary)</h3>
+                </div>
+                <div class="space-y-6">
+                    <div>
+                        <p class="text-xs font-bold text-outline uppercase tracking-widest mb-3">大号 / 全宽</p>
+                        <button
+                            class="w-full bg-gradient-to-br from-primary-fixed to-primary-fixed-dim text-on-primary-container font-bold py-5 px-8 rounded-2xl shadow-[0_8px_24px_rgba(108,90,0,0.15)] active:scale-95 transition-all duration-200 text-lg">开始创作</button>
+                    </div>
+                    <div class="flex items-end gap-4">
+                        <div class="flex-1">
+                            <p class="text-xs font-bold text-outline uppercase tracking-widest mb-3">中号</p>
+                            <button
+                                class="w-full bg-primary-container text-on-primary-container font-bold py-3 px-8 rounded-2xl active:scale-95 transition-all duration-200">继续</button>
+                        </div>
+                        <div>
+                            <p class="text-xs font-bold text-outline uppercase tracking-widest mb-3">小号</p>
+                            <button
+                                class="bg-primary-container text-on-primary-container font-bold py-2 px-6 rounded-2xl text-sm active:scale-95 transition-all duration-200">下一步</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Interaction States -->
+            <div class="bg-surface-container-highest rounded-2xl p-8 flex flex-col gap-6">
+                <div class="flex items-center gap-3">
+                    <span class="material-symbols-outlined text-secondary"
+                        style="font-variation-settings: 'FILL' 1;">ads_click</span>
+                    <h3 class="text-xl font-bold text-on-surface">交互状态 (States)</h3>
+                </div>
+                <div class="grid grid-cols-2 gap-4 h-full items-center">
+                    <div class="flex flex-col items-center gap-4">
+                        <button
+                            class="bg-primary-container text-on-primary-container font-bold py-3 px-8 rounded-2xl shadow-sm w-full">常规状态</button>
+                        <span class="text-xs font-medium text-outline">静止态</span>
+                    </div>
+                    <div class="flex flex-col items-center gap-4">
+                        <button
+                            class="bg-primary-dim text-on-primary font-bold py-3 px-8 rounded-2xl scale-95 shadow-none ring-4 ring-primary/10 w-full">点击状态</button>
+                        <span class="text-xs font-medium text-outline">激活态</span>
+                    </div>
+                </div>
+            </div>
+            <!-- Functional & Secondary -->
+            <div class="bg-surface-container rounded-2xl p-8 flex flex-col gap-6">
+                <div class="flex items-center gap-3">
+                    <span class="material-symbols-outlined text-tertiary"
+                        style="font-variation-settings: 'FILL' 1;">category</span>
+                    <h3 class="text-xl font-bold text-on-surface">功能与次要按钮</h3>
+                </div>
+                <div class="space-y-6">
+                    <div class="flex gap-4">
+                        <button
+                            class="flex-1 bg-[#9cd343] text-white font-bold py-3 px-6 rounded-2xl flex items-center justify-center gap-2 active:scale-95 transition-all">
+                            <span class="material-symbols-outlined text-xl">share</span> 分享
+                        </button>
+                        <button
+                            class="flex-1 bg-error-container text-on-error-container font-bold py-3 px-6 rounded-2xl flex items-center justify-center gap-2 active:scale-95 transition-all">
+                            <span class="material-symbols-outlined text-xl">delete</span> 删除
+                        </button>
+                    </div>
+                    <div class="flex gap-4">
+                        <button
+                            class="flex-1 border-4 border-surface-variant text-on-surface-variant font-bold py-3 px-6 rounded-2xl active:scale-95 transition-all">描边样式</button>
+                        <button
+                            class="flex-1 text-primary font-bold py-3 px-6 rounded-2xl active:bg-surface-container-high transition-all">幽灵按钮</button>
+                    </div>
+                </div>
+            </div>
+            <!-- Icon Buttons -->
+            <div class="bg-surface-container-low rounded-2xl p-8 flex flex-col gap-6 border-4 border-white/30">
+                <div class="flex items-center gap-3">
+                    <span class="material-symbols-outlined text-on-secondary-container"
+                        style="font-variation-settings: 'FILL' 1;">grid_view</span>
+                    <h3 class="text-xl font-bold text-on-surface">图标变体</h3>
+                </div>
+                <div class="flex flex-wrap gap-6 items-center justify-center py-4">
+                    <button
+                        class="w-16 h-16 rounded-2xl bg-secondary-container text-on-secondary-container flex items-center justify-center shadow-lg active:scale-90 transition-all">
+                        <span class="material-symbols-outlined text-3xl"
+                            style="font-variation-settings: 'FILL' 1;">brush</span>
+                    </button>
+                    <button
+                        class="w-14 h-14 rounded-2xl bg-surface-container-highest text-on-surface-variant flex items-center justify-center active:scale-90 transition-all">
+                        <span class="material-symbols-outlined text-2xl">undo</span>
+                    </button>
+                    <button
+                        class="w-14 h-14 rounded-2xl bg-primary-container text-on-primary-container flex items-center justify-center shadow-sm active:scale-90 transition-all">
+                        <span class="material-symbols-outlined text-2xl"
+                            style="font-variation-settings: 'FILL' 1;">palette</span>
+                    </button>
+                    <button
+                        class="w-12 h-12 rounded-xl border-4 border-outline-variant/20 text-on-surface flex items-center justify-center active:scale-90 transition-all">
+                        <span class="material-symbols-outlined text-xl">close</span>
+                    </button>
+                </div>
+                <p class="text-center text-sm text-outline px-4 italic">所有图标按钮均采用温润的方圆形状，强调触控感。</p>
+            </div>
+        </div>
+        <!-- Full Layout Example Section -->
+        <section
+            class="mt-12 mb-8 bg-surface-container-lowest rounded-2xl p-12 shadow-[0_8px_32px_rgba(50,46,37,0.06)] border-4 border-surface-container">
+            <div class="max-w-md mx-auto text-center space-y-8">
+                <div
+                    class="bg-surface-container-low w-24 h-24 rounded-2xl mx-auto flex items-center justify-center mb-4">
+                    <span class="material-symbols-outlined text-5xl text-primary"
+                        style="font-variation-settings: 'FILL' 1;">draw</span>
+                </div>
+                <h3 class="text-3xl font-extrabold text-on-surface">准备好开始了吗？</h3>
+                <p class="text-on-surface-variant">使用我们的“暖阳画室”工具包创造你的第一件杰作。</p>
+                <div class="flex flex-col gap-4">
+                    <button
+                        class="w-full bg-gradient-to-br from-primary-fixed to-primary-fixed-dim text-on-primary-container font-bold py-5 px-8 rounded-2xl shadow-lg active:scale-95 transition-all text-xl">立即出发！</button>
+                    <button
+                        class="w-full text-secondary font-bold py-3 px-8 rounded-2xl active:bg-surface-container-low transition-all">稍后再说</button>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- Floating Action Bar (Requested Component) -->
+    <div class="fixed bottom-24 left-0 w-full px-4 z-[60]">
+        <div
+            class="max-w-md mx-auto bg-white rounded-3xl p-4 shadow-[0_12px_40px_rgba(0,0,0,0.12)] border border-surface-container flex gap-3">
+            <button
+                class="flex-[4] bg-[#9cd343] text-white font-bold py-4 rounded-2xl flex items-center justify-center gap-2 active:scale-95 transition-all">
+                <span class="material-symbols-outlined text-xl"
+                    style="font-variation-settings: 'FILL' 1;">bubble_chart</span>
+                <span class="text-lg">分享</span>
+            </button>
+            <button
+                class="flex-[6] bg-[#FFD700] text-on-primary-container font-bold py-4 rounded-2xl flex items-center justify-center gap-2 shadow-[0_4px_12px_rgba(255,215,0,0.3)] active:scale-95 transition-all">
+                <span class="material-symbols-outlined text-xl">download</span>
+                <span class="text-lg">保存到作品库</span>
+            </button>
+        </div>
+    </div>
+    <!-- BottomNavBar -->
+    <nav
+        class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 pb-8 pt-4 bg-[#f8f0e0]/90 backdrop-blur-2xl z-50 rounded-t-3xl shadow-[0_-8px_32px_rgba(50,46,37,0.06)] border-t border-white/20">
+        <a class="flex flex-col items-center justify-center bg-[#ffd709] text-[#6d3b00] rounded-2xl px-6 py-2 transition-all duration-200"
+            href="#">
+            <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">edit_note</span>
+            <span class="text-xs font-bold mt-1">画室</span>
+        </a>
+        <a class="flex flex-col items-center justify-center text-[#b3ac9f] px-6 py-2 hover:opacity-80 transition-opacity"
+            href="#">
+            <span class="material-symbols-outlined">folder_open</span>
+            <span class="text-xs font-medium mt-1">作品集</span>
+        </a>
+        <a class="flex flex-col items-center justify-center text-[#b3ac9f] px-6 py-2 hover:opacity-80 transition-opacity"
+            href="#">
+            <span class="material-symbols-outlined">settings</span>
+            <span class="text-xs font-medium mt-1">设置</span>
+        </a>
+    </nav>
+</body>
+
+</html>

stitch-ui/letterTracing/code.html

@@ -117,9 +117,6 @@
 </button>
 <h1 class="font-bold tracking-tight text-[#6c5a00] dark:text-[#ffd709] text-xl">英语字母描红</h1>
 </div>
-<button class="text-[#6c5a00] dark:text-[#ffd709] hover:bg-[#f0e7d6] dark:hover:bg-[#4a453a] rounded-full p-2 transition-colors active:scale-95">
-<span class="material-symbols-outlined">favorite</span>
-</button>
 </header>
 <main class="pt-24 px-6 max-w-2xl mx-auto space-y-8">
 <!-- A4 Preview Area -->
@@ -155,7 +152,9 @@
 <div class="absolute bottom-4 right-4 bg-primary-container text-on-primary-container p-3 rounded-full shadow-md">
 <span class="material-symbols-outlined">zoom_in</span>
 </div>
-</section>
+<button class="absolute top-4 right-4 bg-white/90 backdrop-blur-sm text-red-500 p-2 rounded-full shadow-lg flex items-center justify-center transition-transform active:scale-95 z-10">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">favorite</span>
+</button></section>
 <!-- Parameters Setting Panel -->
 <section class="bg-surface-container rounded-xl p-6 space-y-6">
 <div class="flex items-center gap-2">