前言
公司最近配的一台螢幕，沒辦法調整亮度，亮得要命，眼睛要瞎掉了
所以只好自立自強搞一個螢幕遮罩

上一章節回顧
第一章：顯示 Electron 視窗，可調整透明度
第二章：參數維護移植到 main/js
第三章：增加調整顏色功能

本章節內容
隱藏 electron 應用程式視窗

音樂藝文

學習

以行動支持創作者！付費即可解鎖

軟體開發

李昀瑾的沙龍

應用程式

作業系統

面板

螢幕

執行

監聽

Electron-桌面 App-螢幕遮罩(Screen mask) - 4

前言
公司最近配的一台螢幕，沒辦法調整亮度，亮得要命，眼睛要瞎掉了
所以只好自立自強搞一個螢幕遮罩

上一章節回顧
第一章：顯示 Electron 視窗，可調整透明度
第二章：參數維護移植到 main/js

本章節內容
增加調整顏色功能

輸入

綁定

Electron-桌面 App-螢幕遮罩(Screen mask) - 3

前言
公司最近配的一台螢幕，沒辦法調整亮度，亮得要命，眼睛要瞎掉了所以只好自立自強搞一個螢幕遮罩

上一章節回顧
第一章：顯示 Electron 視窗，可調整透明度

本章節內容
參數維護移植到 main/js

Electron-桌面 App-螢幕遮罩(Screen mask) - 2

前言
公司最近配的一台螢幕，沒辦法調整亮度，亮得要命，眼睛要瞎掉了
所以只好自立自強搞一個螢幕遮罩

本章節內容
顯示 Electron 視窗，可調整透明度

檔案

專案

安裝

ChatGPT

Electron-桌面 App-螢幕遮罩(Screen mask) - 1

(進階) 搭配 Nano Stores 完成「過濾器按鈕」

index.astro 的 ALL 按鈕，改為 FilterButton.tsx

套用先前建立好的 techStore.js


1. 建立 FilterButton 元件

新增 src\components\FilterButton

文化生活

職場

Astro 專題 - DevPulse：極簡開發者技術雷達 (Tech Radar)-4

(進階) 搭配 Nano Stores 完成「即時搜尋」
靜態 HTML
Client Component
Vanilla JS / Framework JS

搜尋

開發

測試

Astro 專題 - DevPulse：極簡開發者技術雷達 (Tech Radar)-3

(進階) 在 Astro 5 中讀取並顯示

我們可以直接在頁面中把這些資料抓出來，並根據 status 分類。

Astro 專題 - DevPulse：極簡開發者技術雷達 (Tech Radar)-2

這是一個讓開發者管理自己「想學、正在學、已精通」技術清單的工具，強調極速的頁面切換與流暢的 UI。

環境架構設計
astro v5
tailwind v4
Nano Stores
vercel 佈署

生成

環境

清單

管理

Astro 專題 - DevPulse：極簡開發者技術雷達 (Tech Radar)-1

要在 Astro v5 儀表板中加入互動圖表，最推薦的方式是使用 Recharts 或 Chart.js 配合 React 或 Vue 組件，因為圖表需要客戶端（Client-side）的 JavaScript 來達成縮放、懸停提示等互動功能。

投資理財

圖表

互動

商品

數據

iPhone

Astro 專題 - 多語系商品探索儀表板 (Multi-lang Product Explorer) - 3

在 Astro v5 的架構下，為多語系儀表板加入搜索功能，最推薦的方案是 Pagefind。它是一個極其快速、靜態化的搜尋庫，非常適合 Astro 這種注重效能的框架。

以下是將 Pagefind 整合進你的專案的步驟：


1. 安裝與設定

Pagefind 是在構建（Build）完成後掃描