fix(env): 更换 mobileRow 配置方式

.env.local

@@ -8,5 +8,3 @@ Postgre_DATABASE="postgres"
 Postgre_USERNAME="postgres"
 # Postgre 密码
 Postgre_PASSWORD="postgres"
-# 移动端瀑布流显示列数，可选值[1, 2]，默认 1
-MOBOLE_ROW=2

.env.production

@@ -8,5 +8,3 @@ Postgre_DATABASE="postgres"
 Postgre_USERNAME="postgres"
 # Postgre 密码
 Postgre_PASSWORD="postgres"
-# 移动端瀑布流显示列数，可选值[1, 2]，默认 1
-MOBOLE_ROW=2

README.md

@@ -153,6 +153,12 @@ export default defineAppConfig({
 
 如果你要修改音乐列表，请在 `assets/server/music.json` 下更改，可以换成你自己的。
 
+在 `app.config.ts` 文件中，可以配置：
+
+| Key              | 备注                          |
+| ---------------- |-----------------------------|
+| mobileRow     | 移动端瀑布流显示列数，可选值[1, 2]，默认 1 |
+
 ### 容器部署
 
 我把容器部署往后放，是不希望前面的内容被跳过，这样你在构建/部署时才能得心应手！
@@ -174,7 +180,6 @@ docker run -d --name kamera \
   -e Postgre_DATABASE="postgres" \
   -e Postgre_USERNAME="postgres" \
   -e Postgre_PASSWORD="postgres" \
-  -e MOBOLE_ROW=1 \
   besscroft/kamera:latest
 ```
 
@@ -203,7 +208,6 @@ services:
       - Postgre_DATABASE="postgres"
       - Postgre_USERNAME="postgres"
       - Postgre_PASSWORD="postgres"
-      - Postgre_PASSWORD=1
 ```
 
 > 一样的，参考上面的环境变量表格，配置你自己的环境变量。

app.config.ts

@@ -20,6 +20,7 @@ export default defineAppConfig({
     '/api/music',
     '/api/getImageList',
   ],
+  mobileRow: 2,
   ui: {
     notifications: {
       position: 'top-0 bottom-auto',

components/Waterfall.vue

@@ -4,8 +4,7 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const mdAndLarger = breakpoints.greaterOrEqual('md')
 
-const runtimeConfig = useRuntimeConfig()
-const { mobileRow } = runtimeConfig.public
+const appConfig = useAppConfig()
 
 const props = defineProps({
   loading: Boolean,
@@ -18,11 +17,6 @@ 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
 }
@@ -39,6 +33,14 @@ const LazyImg = defineAsyncComponent(() =>
   import('vue-waterfall-plugin-next').then((module) => module.LazyImg)
 )
 
+const breakPointsConfig = computed(() => {
+  return {
+    9999: { rowPerView: 4 },
+    1280: { rowPerView: 3 },
+    1024: { rowPerView: Number(appConfig.mobileRow) === 2 ? 2 : 1 },
+  }
+})
+
 onMounted(async () => {
   mounted.value = true
   await emit('dataHandle')

nuxt.config.ts

@@ -18,12 +18,6 @@ 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