Merge pull request #33 from SteveLin100132/master

fix(filter): resolve multi_select filter validation error in advanced filtering

Author: SteveLin100132

.github/workflows/deploy-website.yml

@@ -0,0 +1,65 @@
+name: Deploy Website to GitHub Pages
+
+on:
+  push:
+    branches:
+      - master # 當推送到 master 分支時觸發
+    paths:
+      - "website/**" # 只有當 website 目錄有變更時才觸發
+  workflow_dispatch: # 允許手動觸發
+
+# 設定 GITHUB_TOKEN 的權限
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# 確保同時只有一個部署任務在執行
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+          cache: "npm"
+          cache-dependency-path: "website/package-lock.json"
+
+      - name: Install dependencies
+        run: |
+          cd website
+          npm i
+
+      - name: Build website
+        run: |
+          cd website
+          npm run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "./website/dist"
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/master.yml

@@ -1,7 +1,8 @@
 name: CI - master
 
 on:
-  push:
+  pull_request:
+    types: [closed]
     branches:
       - "master"
 
@@ -54,6 +55,7 @@ jobs:
   bump-version:
     name: Bump Version and Update GitHub Variable
     runs-on: ubuntu-latest
+    if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'build')
     outputs:
       new_version: ${{ steps.bump.outputs.new_version }}
     # needs: unit-test # 等 unit-test 成功才執行
@@ -87,6 +89,7 @@ jobs:
   build-image:
     name: Build and Push Docker Image
     runs-on: ubuntu-latest
+    if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'build')
     needs:
       # - unit-test # 等 unit-test 成功才執行
       - bump-version # 等 bump-version 成功才執行

CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [1.1.7] - 2025-08-10
+
+### Fixed
+
+- **[進階篩選設定] Multi_select 欄位篩選無法生成圖表錯誤修復** ([#23](https://github.com/SteveLin100132/notion-chart-generator/issues/23))
+
+  - 修正 `multi_select` 類型屬性在進階篩選中使用「包含」和「不包含」操作符時產生的 Notion API 驗證錯誤
+  - 問題根因：Notion API 要求 `multi_select.contains` 必須是字串值，但前端傳送陣列值 `["前端","後端"]`
+  - 解決方案：
+    - 更新 `FilterCondition` 介面，支援陣列值類型 (`string | number | boolean | string[]`)
+    - 改進 `convertToNotionFilter` 函數中的轉換邏輯，將 `multi_select` 的陣列值正確轉換為多個 `contains` 條件的 `or` 組合
+    - 區分 `select` 和 `multi_select` 的操作符：`select` 使用 `equals`，`multi_select` 使用 `contains`
+    - 添加完整的錯誤處理和邊界情況檢查
+  - 修復檔案：
+    - `frontend/src/components/query-builder.tsx` - 核心轉換邏輯修復
+    - `frontend/src/lib/filter-validation.ts` - 類型定義更新
+  - 現在 `multi_select` 欄位的進階篩選可正常生成圖表，不再出現 API 驗證錯誤
+
 ## [1.1.6] - 2025-08-09
 
 ### Fixed

README.md

@@ -1,6 +1,17 @@
 <div align="center">
-  <img src="assets/images/notion-chart-generator-logo.png" width="100" />
-  <h1>Notion Chart Generator</h1>
+  <!-- <img src="assets/images/notion-chart-generator-logo.png" width="100" /> -->
+  <img src="assets/images/notion-chart-generator-title.png" />
+  <br />
+  <br />
+  <i>
+    一個採用現代前後端分離架構的 Web 應用程式，使用 NestJS + Next.js 技術棧，能夠連接 Notion 資料庫並將資料轉換為互動式圖表。支援多種圖表類型、資料聚合計算、即時分享和跨平台嵌入功能。
+  </i>
+  <br />
+  <br />
+
+![Notion Chart Generator Usage Demo](assets/images/notion-chart-generator-usage-demo.gif)
+
+  <br />
   <div>
     <img src="https://img.shields.io/github/package-json/v/stevelin100132/notion-chart-generator">
     <img src="https://img.shields.io/badge/React-18+-61dafb.svg" />
@@ -11,12 +22,10 @@
   </div>
 </div>
 
-<br />
-一個採用現代前後端分離架構的 Web 應用程式，使用 NestJS + Next.js 技術棧，能夠連接 Notion 資料庫並將資料轉換為美觀的互動式圖表。支援多種圖表類型、資料聚合計算、即時分享和跨平台嵌入功能。
 <br />
 <br />
 
-![Notion Chart Generator Usage Demo](assets/images/notion-chart-generator-usage-demo.gif)
+Notion Chart Generator 是一款專為 Notion 使用者打造的圖表生成工具。它能夠連接您的 Notion 資料庫，將原始資料自動轉換為多種互動式圖表，協助您更直觀地分析和展示資訊。無需撰寫程式碼，只需簡單設定，即可快速產生長條圖、線圖、圓餅圖等多種視覺化報表，並支援即時分享與跨平台嵌入，讓資料應用更靈活便利。
 
 ## 主要功能
 
@@ -217,3 +226,7 @@ Query Builder 提供強大且直觀的篩選條件建構功能，讓您能夠建
 - 確認選擇的屬性包含有效資料
 - 檢查 Y 軸 屬性是否為數字類型
 - 確認資料庫中有資料記錄
+
+## Activities
+
+![Alt](https://repobeats.axiom.co/api/embed/cb3faf362bfd9af1b29a17c7b4d948ff63ebe018.svg "Repobeats analytics image")