feat(env): 新增环境变量 MOBOLE_ROW

besscroft · Jan 12, 2024 · 5b33130 · 5b33130
1 parent 7dece94
commit 5b33130
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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