delete zip-preview.md; refine color transition animations; add theme persistence in localStorage; enhance theme toggle design with animated visuals.

Author: ForteScarlet

.junie/zip-preview.md

@@ -9,24 +9,61 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.unit.dp
+import kotlinx.browser.localStorage
 import love.forte.simbot.codegen.gen.view.GradleSettingsView
 import org.jetbrains.compose.resources.ExperimentalResourceApi
 import org.jetbrains.compose.resources.preloadFont
 import simbot_codegen.composeapp.generated.resources.LXGWNeoXiHeiScreen
 import simbot_codegen.composeapp.generated.resources.Res
+import org.w3c.dom.get
+import org.w3c.dom.set
+import web.console.console
+
+private const val THEME_PREFERENCE_KEY = "simbot_codegen_theme_preference"
+
+/**
+ * 从本地存储加载主题偏好设置
+ */
+private fun loadThemePreference(): ColorMode {
+    return try {
+        val savedTheme = localStorage[THEME_PREFERENCE_KEY]
+        when (savedTheme) {
+            "DARK" -> ColorMode.DARK
+            "LIGHT" -> ColorMode.LIGHT
+            else -> ColorMode.LIGHT // 默认亮色主题
+        }
+    } catch (e: Exception) {
+        ColorMode.LIGHT // 发生错误时使用默认主题
+    }
+}
+
+/**
+ * 保存主题偏好设置到本地存储
+ */
+private fun saveThemePreference(colorMode: ColorMode) {
+    try {
+        localStorage[THEME_PREFERENCE_KEY] = colorMode.name
+    } catch (e: Exception) {
+        // 保存失败时静默处理，不影响用户体验
+    }
+}
 
 @Composable
 fun App() {
     @OptIn(ExperimentalResourceApi::class)
     val lxgwNeo by preloadFont(resource = Res.font.LXGWNeoXiHeiScreen)
     val fm = lxgwNeo?.let { FontFamily(it) }
 
-    // 创建主题状态管理
-    var colorMode by remember { mutableStateOf(ColorMode.LIGHT) }
+    // 创建主题状态管理，从本地存储加载保存的主题偏好
+    var colorMode by remember { mutableStateOf(loadThemePreference()) }
     val appContext = remember(colorMode) {
         AppContext(
             colorMode = colorMode,
-            toggleColorMode = { colorMode = colorMode.toggle() }
+            toggleColorMode = { 
+                val newColorMode = colorMode.toggle()
+                colorMode = newColorMode
+                saveThemePreference(newColorMode)
+            }
         )
     }
 

composeApp/src/wasmJsMain/kotlin/love/forte/simbot/codegen/App.kt

@@ -1,7 +1,8 @@
 package love.forte.simbot.codegen
 
 import androidx.compose.animation.animateColorAsState
-import androidx.compose.animation.core.tween
+import androidx.compose.animation.core.spring
+import androidx.compose.animation.core.Spring
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.graphics.Color
@@ -81,9 +82,11 @@ fun rememberAnimatedColorScheme(colorMode: ColorMode): ColorScheme {
         ColorMode.DARK -> darkColors
     }
 
-    // 为每个颜色添加动画过渡
-    val animationDuration = 300
-    val animationSpec = tween<Color>(durationMillis = animationDuration)
+    // 为每个颜色添加动画过渡 - 使用弹性动画实现更自然的过渡效果
+    val animationSpec = spring<Color>(
+        dampingRatio = Spring.DampingRatioMediumBouncy,
+        stiffness = Spring.StiffnessMedium
+    )
 
     val animatedPrimary by animateColorAsState(targetColors.primary, animationSpec, label = "primary")
     val animatedSecondary by animateColorAsState(targetColors.secondary, animationSpec, label = "secondary")
@@ -100,36 +103,53 @@ fun rememberAnimatedColorScheme(colorMode: ColorMode): ColorScheme {
     val animatedPrimaryContainer by animateColorAsState(targetColors.primaryContainer, animationSpec, label = "primaryContainer")
     val animatedSecondaryContainer by animateColorAsState(targetColors.secondaryContainer, animationSpec, label = "secondaryContainer")
 
+    // 为剩余的颜色属性添加动画
+    val animatedOnPrimaryContainer by animateColorAsState(targetColors.onPrimaryContainer, animationSpec, label = "onPrimaryContainer")
+    val animatedInversePrimary by animateColorAsState(targetColors.inversePrimary, animationSpec, label = "inversePrimary")
+    val animatedOnSecondaryContainer by animateColorAsState(targetColors.onSecondaryContainer, animationSpec, label = "onSecondaryContainer")
+    val animatedTertiaryContainer by animateColorAsState(targetColors.tertiaryContainer, animationSpec, label = "tertiaryContainer")
+    val animatedOnTertiaryContainer by animateColorAsState(targetColors.onTertiaryContainer, animationSpec, label = "onTertiaryContainer")
+    val animatedOnSurfaceVariant by animateColorAsState(targetColors.onSurfaceVariant, animationSpec, label = "onSurfaceVariant")
+    val animatedSurfaceTint by animateColorAsState(targetColors.surfaceTint, animationSpec, label = "surfaceTint")
+    val animatedInverseSurface by animateColorAsState(targetColors.inverseSurface, animationSpec, label = "inverseSurface")
+    val animatedInverseOnSurface by animateColorAsState(targetColors.inverseOnSurface, animationSpec, label = "inverseOnSurface")
+    val animatedOnError by animateColorAsState(targetColors.onError, animationSpec, label = "onError")
+    val animatedErrorContainer by animateColorAsState(targetColors.errorContainer, animationSpec, label = "errorContainer")
+    val animatedOnErrorContainer by animateColorAsState(targetColors.onErrorContainer, animationSpec, label = "onErrorContainer")
+    val animatedOutline by animateColorAsState(targetColors.outline, animationSpec, label = "outline")
+    val animatedOutlineVariant by animateColorAsState(targetColors.outlineVariant, animationSpec, label = "outlineVariant")
+    val animatedScrim by animateColorAsState(targetColors.scrim, animationSpec, label = "scrim")
+    
     return ColorScheme(
         primary = animatedPrimary,
         onPrimary = animatedOnPrimary,
         primaryContainer = animatedPrimaryContainer,
-        onPrimaryContainer = targetColors.onPrimaryContainer,
-        inversePrimary = targetColors.inversePrimary,
+        onPrimaryContainer = animatedOnPrimaryContainer,
+        inversePrimary = animatedInversePrimary,
         secondary = animatedSecondary,
         onSecondary = animatedOnSecondary,
         secondaryContainer = animatedSecondaryContainer,
-        onSecondaryContainer = targetColors.onSecondaryContainer,
+        onSecondaryContainer = animatedOnSecondaryContainer,
         tertiary = animatedTertiary,
         onTertiary = animatedOnTertiary,
-        tertiaryContainer = targetColors.tertiaryContainer,
-        onTertiaryContainer = targetColors.onTertiaryContainer,
+        tertiaryContainer = animatedTertiaryContainer,
+        onTertiaryContainer = animatedOnTertiaryContainer,
         background = animatedBackground,
         onBackground = animatedOnBackground,
         surface = animatedSurface,
         onSurface = animatedOnSurface,
         surfaceVariant = animatedSurfaceVariant,
-        onSurfaceVariant = targetColors.onSurfaceVariant,
-        surfaceTint = targetColors.surfaceTint,
-        inverseSurface = targetColors.inverseSurface,
-        inverseOnSurface = targetColors.inverseOnSurface,
+        onSurfaceVariant = animatedOnSurfaceVariant,
+        surfaceTint = animatedSurfaceTint,
+        inverseSurface = animatedInverseSurface,
+        inverseOnSurface = animatedInverseOnSurface,
         error = animatedError,
-        onError = targetColors.onError,
-        errorContainer = targetColors.errorContainer,
-        onErrorContainer = targetColors.onErrorContainer,
-        outline = targetColors.outline,
-        outlineVariant = targetColors.outlineVariant,
-        scrim = targetColors.scrim,
+        onError = animatedOnError,
+        errorContainer = animatedErrorContainer,
+        onErrorContainer = animatedOnErrorContainer,
+        outline = animatedOutline,
+        outlineVariant = animatedOutlineVariant,
+        scrim = animatedScrim,
         surfaceBright = targetColors.surfaceBright,
         surfaceDim = targetColors.surfaceDim,
         surfaceContainer = targetColors.surfaceContainer,