[Day 12] 進階功能：讓工具更好用

基本功能有了，但還不夠好用

昨天搞定了刪除功能，工具已經可以正常使用了。但實際操作後發現，200 多個 APP 全部列在一起很難找，需要一些篩選和搜尋功能。

今天要加入一些進階功能，讓工具更實用。

加入搜尋功能

最基本的需求就是搜尋。用 MDUI 的 TextField 做一個搜尋框：

<mdui-text-field 
  label="搜尋應用程式" 
  id="search-input"
  clearable>
</mdui-text-field>

然後實作即時搜尋：

document.getElementById('search-input').addEventListener('input', (e) => {
  const keyword = e.target.value.toLowerCase();
  this.filterApps(keyword);
});

filterApps(keyword) {
  const appItems = document.querySelectorAll('.app-item');
  
  appItems.forEach(item => {
    const displayName = item.querySelector('.app-display-name').textContent.toLowerCase();
    const packageName = item.querySelector('.app-package').textContent.toLowerCase();
    
    if (displayName.includes(keyword) || packageName.includes(keyword)) {
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  });
}

打字就能即時過濾，找 APP 方便多了。

APP 分類篩選

之前做了 APP 分類，現在加入分類篩選器：

<mdui-segmented-button-group id="category-filter">
  <mdui-segmented-button value="all">全部</mdui-segmented-button>
  <mdui-segmented-button value="system">系統應用</mdui-segmented-button>
  <mdui-segmented-button value="xiaomi">小米應用</mdui-segmented-button>
  <mdui-segmented-button value="google">Google 服務</mdui-segmented-button>
  <mdui-segmented-button value="user">使用者安裝</mdui-segmented-button>
</mdui-segmented-button-group>

點擊不同分類就只顯示該類別的 APP。

全選功能

刪除垃圾軟體時，使用者可能想一次選擇某個分類的所有 APP：

addSelectAllButton() {
  const selectAllBtn = document.createElement('mdui-button');
  selectAllBtn.textContent = '全選此分類';
  selectAllBtn.addEventListener('click', () => {
    const visibleCheckboxes = document.querySelectorAll('.app-checkbox:not([style*="display: none"])');
    visibleCheckboxes.forEach(cb => cb.checked = true);
    this.updateDeleteButton();
  });
}

在每個分類區塊加入「全選」按鈕，方便批次選擇。

APP 大小資訊

使用者想知道哪些 APP 佔用最多空間，加入 APP 大小顯示：

async getAppSize(deviceId, packageName) {
  const cmd = `"${this.adbPath}" -s ${deviceId} shell dumpsys package ${packageName} | grep "codeSize"`;
  
  try {
    const result = await this.executeCommand(cmd);
    // 解析結果取得大小資訊
    return this.parseAppSize(result);
  } catch (error) {
    return '未知';
  }
}

在 APP 列表中顯示每個 APP 的大小，讓使用者優先刪除佔空間的垃圾軟體。

加入設定頁面

用 MDUI 的 Navigation Drawer 做一個設定選單：

<mdui-navigation-drawer id="settings-drawer">
  <mdui-list>
    <mdui-list-item>
      <mdui-switch slot="end-icon" id="show-system-apps"></mdui-switch>
      <div slot="headline">顯示系統應用程式</div>
    </mdui-list-item>
    
    <mdui-list-item>
      <mdui-switch slot="end-icon" id="dark-mode"></mdui-switch>
      <div slot="headline">暗色模式</div>
    </mdui-list-item>
  </mdui-list>
</mdui-navigation-drawer>

讓使用者可以調整一些偏好設定。

記住使用者選擇

用 localStorage 記住使用者的設定：

saveSettings() {
  const settings = {
    showSystemApps: document.getElementById('show-system-apps').checked,
    darkMode: document.getElementById('dark-mode').checked,
    lastCategory: this.currentCategory
  };
  
  localStorage.setItem('app-uninstaller-settings', JSON.stringify(settings));
}

loadSettings() {
  const saved = localStorage.getItem('app-uninstaller-settings');
  if (saved) {
    const settings = JSON.parse(saved);
    // 套用設定...
  }
}

下次開啟工具時會記住上次的設定。

加入快速動作

在工具列加入一些常用的快速動作：

<mdui-button-group>
  <mdui-button id="clear-cache">清除快取</mdui-button>
  <mdui-button id="refresh-list">重新整理</mdui-button>
  <mdui-button id="export-list">匯出清單</mdui-button>
</mdui-button-group>

「重新整理」讓使用者可以重新載入 APP 列表，「匯出清單」可以把目前的 APP 列表存成文字檔。

改善錯誤提示

把之前簡陋的錯誤提示改成更友善的訊息：

showError(error) {
  let message = '發生未知錯誤';
  
  if (error.message.includes('device not found')) {
    message = '找不到裝置，請確認手機已連接並開啟 USB 偵錯';
  } else if (error.message.includes('permission denied')) {
    message = '權限不足，請確認已允許 USB 偵錯';
  } else if (error.message.includes('not installed')) {
    message = '應用程式不存在或已被移除';
  }
  
  mdui.snackbar({ 
    message,
    action: '確定'
  });
}

讓使用者更容易理解問題所在。

下一步

明天要來打包應用程式，讓它變成真正可以分發的桌面軟體。

這個工具已經很完整了，是時候讓更多人使用看看。