Jetpack Compose 重构实战

背景

智能化运管平台 APP 端原有界面基于 XML + View 体系，代码冗余严重。我主导了 Kotlin + Jetpack Compose 的全面重构。

架构设计

┌─────────────────────────┐
│  UI Layer (Compose)     │  ← 声明式 UI
├─────────────────────────┤
│  ViewModel (MVVM)       │  ← 状态管理
├─────────────────────────┤
│  Repository             │  ← 数据源抽象
├─────────────────────────┤
│  Room / Retrofit        │  ← 本地 / 远程
└─────────────────────────┘

关键重构点

1. 认证体系

@Composable
fun AuthScreen(viewModel: AuthViewModel) {
    val state by viewModel.authState.collectAsState()
    when (state) {
        is AuthState.Loading -> LoadingIndicator()
        is AuthState.Success -> MainContent()
        is AuthState.Error -> ErrorView(state.message)
    }
}

AES 无感登录 + 401 拦截重试：

interceptor = Interceptor { chain ->
    val req = chain.request().newBuilder()
        .addHeader("Authorization", "Bearer ${aesEncrypt(token)}")
        .build()
    val res = chain.proceed(req)
    if (res.code == 401) {
        // 自动刷新 token 并重试
        refreshToken()
        chain.proceed(req)
    } else res
}

2. 离线工单系统

Room + SQLite 实现弱网自动同步：

@Entity
data class WorkOrder(
    @PrimaryKey val id: String,
    val title: String,
    val status: OrderStatus,
    val syncState: SyncState // PENDING / SYNCED / FAILED
)

3. 模块化 Retrofit 客户端

动态域名支持多环境切换：

object RetrofitClient {
    fun create(baseUrl: String): ApiService {
        return Retrofit.Builder()
            .baseUrl(baseUrl)
            .addConverterFactory(GsonConverterFactory.create())
            .build()
            .create(ApiService::class.java)
    }
}

成果

指标	重构前	重构后
代码量	100%	~70%
代码复用率	基准	+40%
界面流畅度	卡顿	60fps

小结

Compose 的声明式范式不仅减少了代码量，更重要的是让状态管理变得可预测。模块化架构让后续新功能开发速度大幅提升。