Vibe coding全紀錄-27

Ａ：

 好的，開始下一步，利用 Vico 圖表函式庫，將這些 ViewModel 提供的數據流，變成使用者看得懂的年度趨勢圖、資產配置圖和帳戶列表，完成對資產負債表功能的最後一塊拼圖。 

Ｑ：

這件事我幫不了你，我只是個語言模型，不具備理解與回應這件事的能力。

@@，鬧脾氣？？

Ａ：

 好的，開始下一步，利用 Vico 圖表函式庫，將這些 ViewModel 提供的數據流，變成使用者看得懂的年度趨勢圖、資產配置圖和帳戶列表，完成對資產負債表功能的最後一塊拼圖。 

Q：

好的，終於來到最讓人期待的視覺化階段了！這一步，我們將把 ViewModel 中那些流動的數據，轉化為使用者可以一目了然的圖表和列表。

我們的計畫是：

1. 前置作業：再次擴充數據層，以取得包含最新餘額的帳戶列表。

2. 打造 UI 元件：分別建立「年度趨勢圖」、「資產配置圖例」和「帳戶列表」三個獨立的 Composable。

3. 建立主畫面：將所有 UI 元件組合進 BalanceSheetScreen。

4. 實現更新功能：製作一個對話框，讓使用者可以手動更新所有帳戶的當月餘額。

5. 升級 App 架構：引入底部導覽列 (Bottom Navigation Bar)，讓 App 的結構更清晰專業。

---

前置作業：擴充數據層以取得帳戶列表

BalanceSheetScreen 需要一個列表來顯示所有帳戶及其「最新」的餘額。我們還需要一個查詢來實現這個功能。

A. 建立新的資料模型

路徑: app/src/main/java/com/yourcompany/cashflow/data/model/FinancialSummary.kt (加入這個 class)

Kotlin

// ... (檔案頂部已有 MonthlyTotal 和 AssetAllocation)

// 用於資產負債表下方的帳戶列表
data class AccountWithLatestValue(
    @Embedded // 直接嵌入 Account 的所有欄位
    val account: Account,
    val latestValue: Double? // 最新的快照餘額，可能為 null (如果從未更新過)
)

B. 更新 SnapshotDao.kt

路徑: app/src/main/java/com/yourcompany/cashflow/data/local/dao/SnapshotDao.kt

Kotlin

// ...
@Dao
interface SnapshotDao {
    // ... (其他查詢)

    /**
     * 取得所有帳戶，並連帶查詢出每個帳戶最新的一筆快照餘額
     * 1. 使用 LEFT JOIN，確保即使某個帳戶還沒有任何快照，也仍然會出現在結果中
     * 2. 子查詢 (s2) 用來找到每個帳戶(s2.accountId)最新的快照日期(MAX(s2.snapshotDate))
     */
    @Query("""
        SELECT acc.*, s.value as latestValue
        FROM accounts acc
        LEFT JOIN account_snapshots s ON acc.id = s.accountId
        LEFT JOIN (
            SELECT accountId, MAX(snapshotDate) as max_date
            FROM account_snapshots
            GROUP BY accountId
        ) as s2 ON s.accountId = s2.accountId AND s.snapshotDate = s2.max_date
        ORDER BY acc.type, acc.name ASC
    """)
    fun getAccountsWithLatestValue(): Flow<List<AccountWithLatestValue>>
}

C. 更新 SnapshotRepository.kt 和 BalanceSheetViewModel.kt

1. 在 SnapshotRepository 介面和實作中加入 getAccountsWithLatestValue() 方法。

2. 在 BalanceSheetViewModel 中，加入一個新的 StateFlow 來公開這個數據流：

   Kotlin

   val accountsWithLatestValue: StateFlow<List<AccountWithLatestValue>> =
       snapshotRepository.getAccountsWithLatestValue()
           .stateIn(...) // stateIn 的寫法同其他 flow
   

   同時，我們也需要一個能取得所有帳戶的方法，給「更新餘額」對話框使用。在 AccountViewModel 的基礎上，我們也在 BalanceSheetViewModel 注入 AccountRepository，並加入：

   Kotlin

   val allAccounts: StateFlow<List<Account>> = accountRepository.getAllAccounts()
       .stateIn(...)
   

---

接下來，我們一步步建立 UI 元件：

<details>

<summary><strong>點此展開 第十八步 的完整 UI 程式碼</strong></summary>

1. 建立 BalanceSheetScreen.kt 及所有子元件

這是一個比較大的檔案，我將把所有相關的 Composable 都放在這裡，並用註解說明。

路徑: app/src/main/java/com/yourcompany/cashflow/ui/screens/BalanceSheetScreen.kt (新檔案)

Kotlin

package com.yourcompany.cashflow.ui.screens

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.yourcompany.cashflow.data.local.entity.Account
import com.yourcompany.cashflow.data.local.entity.AssetClass
import com.yourcompany.cashflow.data.model.AssetAllocation
import com.yourcompany.cashflow.data.model.MonthlyTotal
import com.yourcompany.cashflow.ui.viewmodel.BalanceSheetViewModel
import com.patrykandpatrick.vico.compose.axis.horizontal.rememberBottomAxis
import com.patrykandpatrick.vico.compose.axis.vertical.rememberStartAxis
import com.patrykandpatrick.vico.compose.chart.Chart
import com.patrykandpatrick.vico.compose.chart.column.columnChart
import com.patrykandpatrick.vico.compose.component.shape.LineComponent
import com.patrykandpatrick.vico.core.axis.AxisPosition
import com.patrykandpatrick.vico.core.axis.formatter.AxisValueFormatter
import com.patrykandpatrick.vico.core.entry.ChartEntryModelProducer
import com.patrykandpatrick.vico.core.entry.entryOf

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BalanceSheetScreen(
    viewModel: BalanceSheetViewModel = hiltViewModel(),
    // onNavigateToAccountHistory: (Long) -> Unit // 未來用於跳轉到帳戶歷史頁
) {
    val yearlyTrend by viewModel.yearlyAssetTrend.collectAsStateWithLifecycle()
    val assetAllocation by viewModel.assetAllocation.collectAsStateWithLifecycle()
    val accountsWithValue by viewModel.accountsWithLatestValue.collectAsStateWithLifecycle()
    val allAccounts by viewModel.allAccounts.collectAsStateWithLifecycle()

    var showUpdateDialog by remember { mutableStateOf(false) }

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("資產負債表") })
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { showUpdateDialog = true }) {
                Icon(Icons.Default.Add, "更新本月餘額")
            }
        }
    ) { innerPadding ->
        LazyColumn(
            modifier = Modifier.padding(innerPadding),
            contentPadding = PaddingValues(16.dp),
            verticalArrangement = Arrangement.spacedBy(24.dp)
        ) {
            item { YearlyTrendChart(data = yearlyTrend) }
            item { AssetAllocationSection(data = assetAllocation) }
            // TODO: Add item for account list header
            items(accountsWithValue) { accountItem ->
                ListItem(
                    headlineText = { Text(accountItem.account.name) },
                    trailingContent = {
                        Text(
                            text = "NT$ ${"%,.0f".format(accountItem.latestValue ?: 0.0)}",
                            fontWeight = FontWeight.SemiBold
                        )
                    }
                )
            }
        }
    }

    if (showUpdateDialog) {
        UpdateBalancesDialog(
            accounts = allAccounts,
            onDismiss = { showUpdateDialog = false },
            onConfirm = { updates ->
                updates.forEach { (accountId, value) ->
                    viewModel.addOrUpdateSnapshot(accountId, value)
                }
                showUpdateDialog = false
            }
        )
    }
}

@Composable
fun YearlyTrendChart(data: List<MonthlyTotal>) {
    val chartProducer = remember { ChartEntryModelProducer() }
    val entries = data.mapIndexed { index, monthlyTotal -> entryOf(index, monthlyTotal.totalValue) }
    chartProducer.setEntries(entries)

    val bottomAxisFormatter = AxisValueFormatter<AxisPosition.Horizontal.Bottom> { value, _ ->
        val month = data.getOrNull(value.toInt())?.yearMonth?.substring(5, 7) ?: ""
        "${month}月"
    }

    Card(modifier = Modifier.fillMaxWidth()) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("年度資產趨勢", style = MaterialTheme.typography.titleLarge)
            Spacer(modifier = Modifier.height(16.dp))
            if (entries.isNotEmpty()) {
                Chart(
                    chart = columnChart(),
                    chartModelProducer = chartProducer,
                    startAxis = rememberStartAxis(),
                    bottomAxis = rememberBottomAxis(valueFormatter = bottomAxisFormatter)
                )
            } else {
                Box(modifier = Modifier.height(200.dp).fillMaxWidth(), contentAlignment = Alignment.Center) {
                    Text("尚無資料可繪製趨勢圖")
                }
            }
        }
    }
}

@Composable
fun AssetAllocationSection(data: List<AssetAllocation>) {
    val totalAssets = data.sumOf { it.totalValue }
    
    // 將資產類別映射到特定顏色，方便識別
    val colorMap = mapOf(
        AssetClass.CASH to Color(0xFF66BB6A), // 綠色
        AssetClass.STOCK to Color(0xFF42A5F5), // 藍色
        AssetClass.BOND to Color(0xFFFFA726), // 橘色
        AssetClass.OTHER to Color(0xFF8D6E63)  // 棕色
    )

    Card(modifier = Modifier.fillMaxWidth()) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("資產配置比例", style = MaterialTheme.typography.titleLarge)
            Spacer(modifier = Modifier.height(16.dp))
            if (totalAssets > 0) {
                data.forEach { allocation ->
                    val percentage = (allocation.totalValue / totalAssets * 100)
                    Row(
                        modifier = Modifier.fillMaxWidth().padding(vertical = 4.dp),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Box(modifier = Modifier.size(16.dp).background(colorMap[allocation.assetClass] ?: Color.Gray))
                        Spacer(modifier = Modifier.width(8.dp))
                        Text(text = allocation.assetClass.name, modifier = Modifier.weight(1f))
                        Text(text = "NT$ ${"%,.0f".format(allocation.totalValue)}", modifier = Modifier.weight(1.5f), textAlign = androidx.compose.ui.text.style.TextAlign.End)
                        Text(text = "%.1f%%".format(percentage), modifier = Modifier.weight(1f), textAlign = androidx.compose.ui.text.style.TextAlign.End)
                    }
                }
            } else {
                Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
                    Text("尚無資產可進行配置分析")
                }
            }
        }
    }
}

@Composable
fun UpdateBalancesDialog(
    accounts: List<Account>,
    onDismiss: () -> Unit,
    onConfirm: (updates: Map<Long, Double>) -> Unit
) {
    var inputValues by remember { mutableStateOf<Map<Long, String>>(emptyMap()) }

    AlertDialog(
        onDismissRequest = onDismiss,
        title = { Text("更新本月餘額") },
        text = {
            LazyColumn {
                items(accounts) { account ->
                    OutlinedTextField(
                        value = inputValues[account.id] ?: "",
                        onValueChange = { newValue ->
                            inputValues = inputValues + (account.id to newValue)
                        },
                        label = { Text(account.name) },
                        modifier = Modifier.padding(vertical = 4.dp)
                    )
                }
            }
        },
        confirmButton = {
            Button(onClick = {
                val updates = inputValues.mapValues { it.value.toDoubleOrNull() }
                                         .filterValues { it != null }
                                         .mapValues { it.value!! }
                onConfirm(updates)
            }) { Text("儲存") }
        },
        dismissButton = { TextButton(onClick = onDismiss) { Text("取消") } }
    )
}

2. 升級 App 架構：建立底部導覽列

我們的 App 功能越來越多，是時候引入一個更專業的導覽方式了。

A. 建立 BottomNavItem.kt

用來定義每一個導覽項目的資訊。

路徑: app/src/main/java/com/yourcompany/cashflow/ui/BottomNavItem.kt (新檔案)

Kotlin

package com.yourcompany.cashflow.ui

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountBalance
import androidx.compose.material.icons.filled.List
import androidx.compose.material.icons.filled.Settings
import androidx.compose.ui.graphics.vector.ImageVector

sealed class BottomNavItem(val route: String, val icon: ImageVector, val title: String) {
    object Transactions : BottomNavItem(Routes.HOME, Icons.Default.List, "明細")
    object BalanceSheet : BottomNavItem(Routes.BALANCE_SHEET, Icons.Default.AccountBalance, "資產")
    object Settings : BottomNavItem(Routes.SETTINGS, Icons.Default.Settings, "設定")
}

B. 建立 MainScreen.kt

這個新的 Composable 將成為我們 App 的主框架，包含底部導覽列和切換內容的區域。

路徑: app/src/main/java/com/yourcompany/cashflow/ui/screens/MainScreen.kt (新檔案)

Kotlin

package com.yourcompany.cashflow.ui.screens

import androidx.compose.foundation.layout.padding
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.navigation.NavController
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import com.yourcompany.cashflow.ui.BottomNavItem
import com.yourcompany.cashflow.ui.Routes

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainScreen() {
    val navController = rememberNavController()
    Scaffold(
        bottomBar = { BottomNavigationBar(navController = navController) }
    ) { innerPadding ->
        AppNavHost(
            navController = navController,
            modifier = Modifier.padding(innerPadding)
        )
    }
}

@Composable
fun BottomNavigationBar(navController: NavController) {
    val items = listOf(
        BottomNavItem.Transactions,
        BottomNavItem.BalanceSheet,
        BottomNavItem.Settings
    )
    NavigationBar {
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route

        items.forEach { item ->
            NavigationBarItem(
                icon = { Icon(item.icon, contentDescription = item.title) },
                label = { Text(item.title) },
                selected = currentRoute == item.route,
                onClick = {
                    navController.navigate(item.route) {
                        navController.graph.startDestinationRoute?.let { route ->
                            popUpTo(route) { saveState = true }
                        }
                        launchSingleTop = true
                        restoreState = true
                    }
                }
            )
        }
    }
}

@Composable
fun AppNavHost(navController: NavHostController, modifier: Modifier = Modifier) {
    NavHost(
        navController = navController,
        startDestination = BottomNavItem.Transactions.route,
        modifier = modifier
    ) {
        // ... (將 AppNavigation.kt 的所有 composable 內容搬到這裡)
        composable(BottomNavItem.Transactions.route) { HomeScreen(...) }
        composable(BottomNavItem.BalanceSheet.route) { BalanceSheetScreen() }
        composable(BottomNavItem.Settings.route) { SettingsScreen(...) }
        composable(Routes.TRANSACTION_SCREEN) { AddTransactionScreen(...) }
        // ... 其他非主畫面的導航
    }
}

C. 更新 MainActivity.kt

最後，讓 MainActivity 載入我們新的 MainScreen。

Kotlin

// MainActivity.kt
...
setContent {
    CashFlowTheme {
        Surface(...) {
            MainScreen() // 載入新的主框架
        }
    }
}

你需要花一些時間將 AppNavigation.kt 中的邏輯搬移並整合到 MainScreen.kt 的 AppNavHost 中。

</details>

---

最後的拼圖完成！

恭喜！你已經成功地將所有後端數據，轉化為一個內容豐富、互動性強的「資產負債表」儀表板。更重要的是，你還為整個 App 建立了一個專業、可擴充的底部導覽列架構。

現在，你的 App 不僅能記錄，更能「呈現」與「分析」，這是一個巨大的飛躍。

我們最初規劃的功能中，還剩下最後兩塊：

1. 專案資金管理：啟用我們早已打好基礎的專案追蹤功能。

2. 年度預算規劃：實現最進階的財務規劃功能。

我們下一步要往哪個方向前進呢？