From 72e478937da0cd11e310da99a372d068f912d18d Mon Sep 17 00:00:00 2001 From: louiscklaw Date: Fri, 16 May 2025 22:51:33 +0800 Subject: [PATCH] ```update Add QR code generation feature with dynamic sizing and styling, implement screen-width-based conditional rendering, update i18n translations, and adjust context providers structure``` --- 002_source/ionic_mobile/package-lock.json | 19 +++++++ 002_source/ionic_mobile/package.json | 3 +- 002_source/ionic_mobile/src/App.tsx | 4 +- .../src/components/Footer/index.tsx | 25 +++++++++ 002_source/ionic_mobile/src/constants.tsx | 2 + .../CheckScreenWidth/QrHere/avatar.jpg | Bin 0 -> 53891 bytes .../CheckScreenWidth/QrHere/index.tsx | 51 ++++++++++++++++++ .../CheckScreenWidth/QrHere/styles.css | 4 ++ .../src/contexts/CheckScreenWidth/index.tsx | 43 +++++++++++++++ .../src/contexts/I18nProvider.tsx | 5 +- .../ionic_mobile/src/contexts/index.tsx | 6 ++- 002_source/ionic_mobile/src/locale/en.ts | 7 +-- .../ionic_mobile/src/locale/resources.ts | 5 -- 002_source/ionic_mobile/src/locale/zh.ts | 7 +-- 14 files changed, 162 insertions(+), 19 deletions(-) create mode 100644 002_source/ionic_mobile/src/components/Footer/index.tsx create mode 100644 002_source/ionic_mobile/src/contexts/CheckScreenWidth/QrHere/avatar.jpg create mode 100644 002_source/ionic_mobile/src/contexts/CheckScreenWidth/QrHere/index.tsx create mode 100644 002_source/ionic_mobile/src/contexts/CheckScreenWidth/QrHere/styles.css create mode 100644 002_source/ionic_mobile/src/contexts/CheckScreenWidth/index.tsx delete mode 100644 002_source/ionic_mobile/src/locale/resources.ts diff --git a/002_source/ionic_mobile/package-lock.json b/002_source/ionic_mobile/package-lock.json index 18cf88e..aaf700d 100644 --- a/002_source/ionic_mobile/package-lock.json +++ b/002_source/ionic_mobile/package-lock.json @@ -32,6 +32,7 @@ "ionicons": "^7.0.0", "lodash": "^4.17.21", "pocketbase": "^0.26.0", + "qr-code-styling": "^1.9.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "7.50.1", @@ -13787,6 +13788,24 @@ "teleport": ">=0.2.0" } }, + "node_modules/qr-code-styling": { + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.9.2.tgz", + "integrity": "sha512-RgJaZJ1/RrXJ6N0j7a+pdw3zMBmzZU4VN2dtAZf8ZggCfRB5stEQ3IoDNGaNhYY3nnZKYlYSLl5YkfWN5dPutg==", + "license": "MIT", + "dependencies": { + "qrcode-generator": "^1.4.4" + }, + "engines": { + "node": ">=18.18.0" + } + }, + "node_modules/qrcode-generator": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz", + "integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==", + "license": "MIT" + }, "node_modules/qs": { "version": "6.13.1", "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.1.tgz", diff --git a/002_source/ionic_mobile/package.json b/002_source/ionic_mobile/package.json index 99d46d5..9df6e2c 100644 --- a/002_source/ionic_mobile/package.json +++ b/002_source/ionic_mobile/package.json @@ -43,14 +43,15 @@ "@types/react-router": "^5.1.20", "@types/react-router-dom": "^5.3.3", "axios": "^1.8.1", - "react-i18next": "^15.2.0", "i18next": "^24.2.0", "ionicons": "^7.0.0", "lodash": "^4.17.21", "pocketbase": "^0.26.0", + "qr-code-styling": "^1.9.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "7.50.1", + "react-i18next": "^15.2.0", "react-markdown": "^9.0.3", "react-router": "^5.3.4", "react-router-dom": "^5.3.4", diff --git a/002_source/ionic_mobile/src/App.tsx b/002_source/ionic_mobile/src/App.tsx index 8c1c1c7..049d9d5 100644 --- a/002_source/ionic_mobile/src/App.tsx +++ b/002_source/ionic_mobile/src/App.tsx @@ -1,4 +1,4 @@ -import { DEBUG, DEBUG_LINK, QUIZ_MAIN_MENU_LINK, RECORD_LINK, SETTING_LINK } from './constants'; +import { DEBUG_LINK, isDevelop, QUIZ_MAIN_MENU_LINK, RECORD_LINK, SETTING_LINK } from './constants'; /* Core CSS required for Ionic components to work properly */ import '@ionic/react/css/core.css'; @@ -139,7 +139,7 @@ const TabButtons: React.FC = () => {