Merge pull request #23 from besscroft/dev

v0.3.1

Author: besscroft

.env.local

@@ -1,5 +1,5 @@
 # Postgre 主机
-Postgre_HOST="db.kamera.supabase.co"
+Postgre_HOST="localhost"
 # Postgre 端口
 Postgre_PORT=5432
 # Postgre 数据库

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           |
 
 #### 页面配置
 
@@ -152,6 +153,12 @@ export default defineAppConfig({
 
 如果你要修改音乐列表，请在 `assets/server/music.json` 下更改，可以换成你自己的。
 
+在 `app.config.ts` 文件中，可以配置：
+
+| Key              | 备注                          |
+| ---------------- |-----------------------------|
+| mobileRow     | 移动端瀑布流显示列数，可选值[1, 2]，默认 1 |
+
 ### 容器部署
 
 我把容器部署往后放，是不希望前面的内容被跳过，这样你在构建/部署时才能得心应手！
@@ -270,7 +277,7 @@ pnpm run dev
 
 [提出新想法 & 提交 Bug](https://github.com/besscroft/kamera/issues/new) | [Fork & Pull Request](https://github.com/besscroft/kamera/fork)
 
-Kamera 欢迎各种贡献，包括但不限于改进，新功能，文档和代码改进，问题和错误报告。
+Kamera 欢迎各种贡献，包括但不限于改进，新功能，文档和代码改进，问题和错误报告。`dev` 分支接受 `PR`！
 
 > 有需求和建议都可以提，有空的话我会处理，但受限于 Nuxt3 / SSR 的⌈局限性⌋，很多功能的设计上可能会有取舍。
 

app.config.ts

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

app.vue

@@ -15,7 +15,7 @@ useHead({
 <template>
   <NuxtLayout>
     <NuxtLoadingIndicator />
-    <UNotifications :ui="{ width: 'w-full md:w-80' }" />
+    <UNotifications :ui="{ wrapper: 'z-[9999]', width: 'w-full md:w-80' }" />
     <ElConfigProvider :locale="zhCn">
       <NuxtPage />
     </ElConfigProvider>

components/DarkToggle.vue

@@ -2,7 +2,7 @@
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
-const smAndLarger = breakpoints.greaterOrEqual('md')
+const mdAndLarger = breakpoints.greaterOrEqual('md')
 const isDark = useDark()
 
 // @ts-expect-error: Transition API
@@ -53,7 +53,7 @@ function toggleDark(event?: MouseEvent) {
 
 <template>
   <button
-    v-if="!smAndLarger"
+    v-if="!mdAndLarger"
     flex flex-row items-center block px-5 py-2 focus-blue w-full
     class="!outline-none"
     :title="isDark ? '切换至⌈白夜⌋' : '切换至⌈常夜⌋'"

components/Header.vue

@@ -3,7 +3,7 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import photosList from '~/constants/photos.json'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
-const smAndLarger = breakpoints.greaterOrEqual('md')
+const mdAndLarger = breakpoints.greaterOrEqual('md')
 const router = useRouter()
 const route = useRoute()
 const user = useUserStore()
@@ -80,7 +80,7 @@ onBeforeUnmount(() => {
           </ClientOnly>
         </div>
 
-        <div v-if="smAndLarger" flex items-center justify-center space-x-3>
+        <div v-if="mdAndLarger" flex items-center justify-center space-x-3>
           <ClientOnly>
             <DarkToggle />
           </ClientOnly>

components/ImageExif.vue

@@ -5,14 +5,14 @@ const props = defineProps<{
   exif: any
 }>()
 const breakpoints = useBreakpoints(breakpointsTailwind)
-const smAndLarger = breakpoints.greaterOrEqual('md')
+const mdAndLarger = breakpoints.greaterOrEqual('md')
 </script>
 
 <template>
   <el-descriptions
     :title="Object.keys(exif).length === 0 ? 'EXIF 信息为空！' : 'EXIF'"
     direction="vertical"
-    :column="smAndLarger ? 3 : 2"
+    :column="mdAndLarger ? 3 : 2"
     border
   >
     <el-descriptions-item v-if="exif.make" label="相机品牌">

components/Waterfall.vue

@@ -2,7 +2,9 @@
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
-const smAndLarger = breakpoints.greaterOrEqual('md')
+const mdAndLarger = breakpoints.greaterOrEqual('md')
+
+const appConfig = useAppConfig()
 
 const props = defineProps({
   loading: Boolean,
@@ -31,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')
@@ -47,15 +57,11 @@ onUnmounted(() => {
       <Waterfall
         v-if="dataList && dataList?.length > 0"
         :list="dataList"
-        :gutter="smAndLarger ? 12 : 4"
+        :gutter="mdAndLarger ? 12 : 4"
         :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">

layouts/admin.vue

@@ -3,7 +3,7 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 
 const { isMobile } = useDevice()
 const breakpoints = useBreakpoints(breakpointsTailwind)
-const smAndLarger = breakpoints.greaterOrEqual('md')
+const mdAndLarger = breakpoints.greaterOrEqual('md')
 </script>
 
 <template>
@@ -13,9 +13,9 @@ const smAndLarger = breakpoints.greaterOrEqual('md')
       <slot />
     </div>
     <ClientOnly>
-      <el-backtop v-if="smAndLarger" :right="100" :bottom="100" z-50 />
-      <Music v-if="smAndLarger && !isMobile" />
-      <NavBottom v-if="!smAndLarger" />
+      <el-backtop v-if="mdAndLarger" :right="100" :bottom="100" z-50 />
+      <Music v-if="mdAndLarger && !isMobile" />
+      <NavBottom v-if="!mdAndLarger" />
     </ClientOnly>
   </div>
 </template>

layouts/default.vue

@@ -3,7 +3,7 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 
 const { isMobile } = useDevice()
 const breakpoints = useBreakpoints(breakpointsTailwind)
-const smAndLarger = breakpoints.greaterOrEqual('md')
+const mdAndLarger = breakpoints.greaterOrEqual('md')
 </script>
 
 <template>
@@ -12,10 +12,10 @@ const smAndLarger = breakpoints.greaterOrEqual('md')
     <div style="min-height: calc(100vh - 3.5rem);" pb-14>
       <slot />
     </div>
-    <el-backtop v-if="smAndLarger" :right="100" :bottom="100" z-50 />
+    <el-backtop v-if="mdAndLarger" :right="100" :bottom="100" z-50 />
     <ClientOnly>
-      <Music v-if="smAndLarger && !isMobile" />
-      <NavBottom v-if="!smAndLarger" />
+      <Music v-if="mdAndLarger && !isMobile" />
+      <NavBottom v-if="!mdAndLarger" />
     </ClientOnly>
   </main>
 </template>