From 5b33130eb3e0a0836305cd4a78833391f52e7d6c Mon Sep 17 00:00:00 2001
From: besscroft <besscroft@foxmail.com>
Date: Sat, 13 Jan 2024 00:08:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(env):=20=E6=96=B0=E5=A2=9E=E7=8E=AF?=
 =?UTF-8?q?=E5=A2=83=E5=8F=98=E9=87=8F=20MOBOLE=5FROW?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.local               |  4 +++-
 .env.production          |  2 ++
 README.md                | 17 ++++++++++-------
 components/Waterfall.vue | 14 +++++++++-----
 nuxt.config.ts           |  6 ++++++
 5 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/.env.local b/.env.local
index c09d00a..7a872b7 100644
--- a/.env.local
+++ b/.env.local
@@ -1,5 +1,5 @@
 # Postgre 主机
-Postgre_HOST="db.kamera.supabase.co"
+Postgre_HOST="localhost"
 # Postgre 端口
 Postgre_PORT=5432
 # Postgre 数据库
@@ -8,3 +8,5 @@ Postgre_DATABASE="postgres"
 Postgre_USERNAME="postgres"
 # Postgre 密码
 Postgre_PASSWORD="postgres"
+# 移动端瀑布流显示列数，可选值[1, 2]，默认 1
+MOBOLE_ROW=2
diff --git a/.env.production b/.env.production
index c09d00a..287daa2 100644
--- a/.env.production
+++ b/.env.production
@@ -8,3 +8,5 @@ Postgre_DATABASE="postgres"
 Postgre_USERNAME="postgres"
 # Postgre 密码
 Postgre_PASSWORD="postgres"
+# 移动端瀑布流显示列数，可选值[1, 2]，默认 1
+MOBOLE_ROW=2
diff --git a/README.md b/README.md
index ad84c2e..6a6af19 100644
--- a/README.md
+++ b/README.md
@@ -62,13 +62,14 @@ nitro: {
 > 
 > 项目内默认的 key 都是用作演示用途！
 
-| Key              | 备注                                                                                                                |
-| ---------------- |-------------------------------------------------------------------------------------------------------------------|
-| Postgre_HOST     | Postgre 数据库主机，如：db.kamera.supabase.co                                                                             |
-| Postgre_PORT     | Postgre 数据库端口，默认值：5432                                                                                            |
-| Postgre_DATABASE | Postgre 数据库名称，默认值：postgres                                                                                        |
-| Postgre_USERNAME | Postgre 数据库用户名，默认值：postgres                                                                                       |
-| Postgre_PASSWORD | Postgre 数据库密码，默认值：postgres                                                                                        |
+| Key              | 备注                                    |
+|------------------|---------------------------------------|
+| Postgre_HOST     | Postgre 数据库主机，如：db.kamera.supabase.co |
+| Postgre_PORT     | Postgre 数据库端口，默认值：5432                |
+| Postgre_DATABASE | Postgre 数据库名称，默认值：postgres            |
+| Postgre_USERNAME | Postgre 数据库用户名，默认值：postgres           |
+| Postgre_PASSWORD | Postgre 数据库密码，默认值：postgres            |
+| MOBOLE_ROW       | 移动端瀑布流显示列数，可选值：`1`、`2`，默认 1           |
 
 #### 页面配置
 
@@ -173,6 +174,7 @@ docker run -d --name kamera \
   -e Postgre_DATABASE="postgres" \
   -e Postgre_USERNAME="postgres" \
   -e Postgre_PASSWORD="postgres" \
+  -e MOBOLE_ROW=1 \
   besscroft/kamera:latest
 ```
 
@@ -201,6 +203,7 @@ services:
       - Postgre_DATABASE="postgres"
       - Postgre_USERNAME="postgres"
       - Postgre_PASSWORD="postgres"
+      - Postgre_PASSWORD=1
 ```
 
 > 一样的，参考上面的环境变量表格，配置你自己的环境变量。
diff --git a/components/Waterfall.vue b/components/Waterfall.vue
index 4f80028..6be38ab 100644
--- a/components/Waterfall.vue
+++ b/components/Waterfall.vue
@@ -4,6 +4,9 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const smAndLarger = breakpoints.greaterOrEqual('md')
 
+const runtimeConfig = useRuntimeConfig()
+const { mobileRow } = runtimeConfig.public
+
 const props = defineProps({
   loading: Boolean,
   handleButton: Boolean,
@@ -15,6 +18,11 @@ const emit = defineEmits(['dataHandle'])
 const imgId = ref<number>(0)
 const showModal = ref<boolean>(false)
 const mounted = ref<boolean>(false)
+const breakPointsConfig = ref({
+  9999: { rowPerView: 4 },
+  1280: { rowPerView: 3 },
+  1024: { rowPerView: Number(mobileRow) === 2 ? 2 : 1 },
+})
 const modalUpdate = () => {
   showModal.value = false
 }
@@ -51,11 +59,7 @@ onUnmounted(() => {
         :hasAroundGutter="true"
         :crossOrigin="false"
         :backgroundColor="isDark ? '#121212' : '#FFFFFF'"
-        :breakpoints="{
-          9999: { rowPerView: 4 },
-          1280: { rowPerView: 3 },
-          1024: { rowPerView: 2 },
-        }"
+        :breakpoints="breakPointsConfig"
       >
         <template #item="{ item }">
           <div class="card">
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6105a36..42bf62a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -18,6 +18,12 @@ export default defineNuxtConfig({
     defineModel: true,
   },
 
+  runtimeConfig: {
+    public: {
+      mobileRow: process.env.MOBOLE_ROW,
+    },
+  },
+
   experimental: {
     // when using generate, payload js assets included in sw precache manifest
     // but missing on offline, disabling extraction it until fixed