介面太醜了啦

昨天 ADB 功能搞定了，但現在的介面實在太陽春。就一個按鈕，完全不像個工具。

今天要把這些功能包裝成好看的介面。

重新設計版面

想了一下使用流程：連接手機 - 選擇裝置 - 看 APP 列表 - 勾選要刪的 - 執行刪除。

把 HTML 改成兩欄式版面：

<div class="app">
  <header>Android App Uninstaller</header>
  
  <main class="main">
    <!-- 左邊：裝置列表 -->
    <section class="device-section">
      <h2>連接的裝置</h2>
      <div id="device-list">請連接你的 Android 裝置</div>
    </section>
    
    <!-- 右邊：APP 列表 -->
    <section class="app-section">
      <h2>應用程式列表</h2>
      <button id="delete-btn">刪除選取的 APP</button>
      <div id="app-list">請先選擇裝置</div>
    </section>
  </main>
</div>

用 CSS Grid 做兩欄版面，看起來就專業多了。

自動偵測裝置

寫了個函數每 3 秒檢查一次連接的裝置：

startDevicePolling() {
  setInterval(() => {
    this.updateDeviceList();
  }, 3000);
}

插上手機後，左邊就會顯示裝置資訊。點擊裝置就載入 APP 列表。

APP 列表的問題

最大的問題來了：ADB 回傳的都是 com.android.systemui 這種套件名稱，使用者根本看不懂這是什麼 APP。

暫時先直接顯示套件名稱，之後再想辦法轉換成人看得懂的名稱。

加入勾選功能

每個 APP 前面加上 checkbox，讓使用者可以選擇要刪除的：

<input type="checkbox" value="${app.package}">
<label>${app.package}</label>

勾選後，刪除按鈕就會變成可點擊狀態。

第一次完整測試

測試流程：

1. 插手機 - 出現裝置資訊，成功
2. 點裝置 - 載入 200 多個 APP，成功
3. 勾選 APP - 刪除按鈕可以點，成功

雖然 APP 名稱很醜，但基本功能都有了！

遇到的問題

• 載入很慢：取得 APP 列表要好幾秒
• 名稱難懂：com.miui.securitycenter 誰看得懂
• 沒有圖示：看起來很單調

今天成果

從簡陋的 Hello World 變成有模有樣的工具介面：

• 兩欄式專業版面
• 自動偵測裝置
• APP 列表和勾選功能
• 基本的使用流程完整

下一步

明天要解決最重要的問題：把 com.android.systemui 轉換成使用者看得懂的 APP 名稱。

這個搞定的話，工具就真的可以給一般人用了。