修复分页bug和设置头像favicon等bug

kingwrcy · Apr 25, 2024 · 573191c · 573191c
1 parent 1326b27
commit 573191c
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -53,6 +53,7 @@ S3兼容的对象存储配置方法(不是必须的,只有你需要把图片存
 
 | KEY  | 默认值 | 描述 |
 | ------------- | ------------- | ------------- |
+| NUXT_PUBLIC_PAGE_SIZE  | 10  | 分页大小 |
 | NUXT_PUBLIC_MOMENTS_COMMENT_ENABLE  | true  | 是否开启评论 |
 | NUXT_PUBLIC_MOMENTS_SHOW_COMMENT  | true  | 是否显示评论 |
 | NUXT_PUBLIC_MOMENTS_COMMENT_MAX_LENGTH  | 120  | 评论最大字数 |

diff --git a/config.properties b/config.properties
@@ -18,6 +18,8 @@ NUXT_PUBLIC_MOMENTS_TOOLBAR_ENABLE_VIDEO=true
 NUXT_PUBLIC_MOMENTS_MAX_LINE=4
 #recaptchaV3代码中使用此网站密钥
 NUXT_PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY=
+#分页大小
+NUXT_PUBLIC_PAGE_SIZE=10
 
 #private
 #recaptchaV3通信密钥

diff --git a/index.d.ts b/index.d.ts
@@ -24,6 +24,7 @@ declare module "nuxt/schema" {
     momentsToolbarEnableVideo: boolean;
     momentsMaxLine: number;
     siteUrl:string;
+    pageSize:number;
   }
 }
 // It is always important to ensure you import/export something when augmenting a type

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -26,6 +26,7 @@ export default defineNuxtConfig({
       momentsMaxLine: 4,
       googleRecaptchaSiteKey: "",
       siteUrl:"",
+      pageSize:10,
     },
   },
   modules: ["@nuxtjs/tailwindcss", "shadcn-nuxt", "@nuxtjs/color-mode"],

diff --git a/pages/index.vue b/pages/index.vue
@@ -22,7 +22,7 @@
 import { type User, type Memo } from '~/lib/types';
 const token = useCookie('token')
 const userinfo = useState<User>('userinfo')
-
+const config = useRuntimeConfig()
 useHead({
   title: userinfo.value.title || '极简朋友圈',
 })
@@ -31,7 +31,7 @@ useHead({
 const state = reactive({
   memoList: Array<Memo>(),
   page: 1,
-  size: 3,
+  size: config.public.pageSize,
   hasNext: false
 })
 

diff --git a/pages/settings.vue b/pages/settings.vue
@@ -15,24 +15,26 @@
     </div>
     <div class="flex flex-col gap-2 border rounded p-2">
       <Label for="avatarUrl" class="font-bold">头像</Label>
-      <Label class="w-full text-left p-2 shadow-sm cursor-pointer border rounded-sm" for="avatarUrl" >选择文件</Label>
-      <Input type="file" id="avatarUrl" @change="(e: Event) => { uploadImgs(e, 'avatarUrl') }" class="hidden"/>
+      <Label class="w-full text-left p-2 shadow-sm cursor-pointer border rounded-sm" for="avatarUrl">选择文件</Label>
+      <Input type="file" id="avatarUrl" @change="(e: Event) => { uploadImgs(e, 'avatarUrl') }" class="hidden" />
       <Label for="avatarUrl-input" class="font-medium">或者输入在线地址</Label>
       <Input type="text" id="avatarUrl-input" placeholder="或者填入在线地址" autocomplete="off" v-model="state.avatarUrl" />
       <img :src="state.avatarUrl" alt="avatar" class="w-[70px] h-[70px] rounded-xl" v-if="state.avatarUrl" />
     </div>
     <div class="flex flex-col gap-2 border rounded p-2">
       <Label for="favicon" class="font-bold">Favicon</Label>
-      <Label class="w-full text-left p-2 shadow-sm cursor-pointer border rounded-sm" for="avatarUrl" >选择文件</Label>
-      <Input type="file" id="favicon" autocomplete="off" @change="(e: Event) => { uploadImgs(e, 'favicon') }" class="hidden"/>
+      <Label class="w-full text-left p-2 shadow-sm cursor-pointer border rounded-sm" for="favicon">选择文件</Label>
+      <Input type="file" id="favicon" autocomplete="off" @change="(e: Event) => { uploadImgs(e, 'favicon') }"
+        class="hidden" />
       <Label for="favicon-input" class="font-medium">或者输入在线地址</Label>
       <Input type="text" id="favicon-input" placeholder="或者填入在线地址" autocomplete="off" v-model="state.favicon" />
       <img class="max-w-[50px] max-h-[50px]" v-if="state.favicon" :src="state.favicon" alt="" />
     </div>
     <div class="flex flex-col gap-2 border rounded p-2">
       <Label for="coverUrl" class="font-bold">顶部图片</Label>
-      <Label class="w-full text-left p-2 shadow-sm cursor-pointer border rounded-sm" for="avatarUrl" >选择文件</Label>
-      <Input type="file" id="coverUrl" autocomplete="off" @change="(e: Event) => { uploadImgs(e, 'coverUrl') }" class="hidden"/>
+      <Label class="w-full text-left p-2 shadow-sm cursor-pointer border rounded-sm" for="coverUrl">选择文件</Label>
+      <Input type="file" id="coverUrl" autocomplete="off" @change="(e: Event) => { uploadImgs(e, 'coverUrl') }"
+        class="hidden" />
       <Label for="coverUrl-input" class="font-medium">或者输入在线地址</Label>
       <Input type="text" id="coverUrl-input" placeholder="或者填入在线地址" autocomplete="off" v-model="state.coverUrl" />
       <img class="w-full " v-if="state.avatarUrl" :src="state.coverUrl" alt="" />
@@ -110,19 +112,26 @@
         <Input type="text" id="thumbnailSuffix" placeholder="" autocomplete="off" v-model="state.thumbnailSuffix" />
       </div>
     </template>
-    <Collapsible >
+    <Collapsible>
       <CollapsibleTrigger>
-        <div class="cursor-pointer font-bold text-sm flex justify-between items-center"><div>基础设置</div> <ChevronsUpDown :size=16 /></div>
+        <div class="cursor-pointer font-bold text-sm flex justify-between items-center">
+          <div>基础设置</div>
+          <ChevronsUpDown :size=16 />
+        </div>
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <table class="w-full border my-2 text-xs" >
+        <table class="w-full border my-2 text-xs">
           <thead>
             <tr class="*:border *:p-2 *:bg-gray-300">
               <td>配置项(去掉了前缀`NUXT_PUBLIC`)</td>
               <td>内容</td>
             </tr>
           </thead>
           <tbody>
+            <tr class="*:border *:p-2">
+              <td>PAGE_SIZE(分页大小)</td>
+              <td>{{ $config.public.pageSize }}</td>
+            </tr>
             <tr class="*:border *:p-2">
               <td>MOMENTS_COMMENT_ENABLE(是否可以评论)</td>
               <td>{{ $config.public.momentsCommentEnable }}</td>
@@ -174,10 +183,10 @@
           </tbody>
         </table>
       </CollapsibleContent>
-      
+
     </Collapsible>
 
-    
+
     <div class="flex flex-col gap-2 ">
       <Button @click="saveSettings">保存</Button>
     </div>
@@ -190,7 +199,7 @@ import { settingsUpdateEvent } from '~/lib/event'
 const token = useCookie('token')
 import { useStorage } from "@vueuse/core";
 import type { User } from '~/lib/types';
-import {ChevronsUpDown} from 'lucide-vue-next'
+import { ChevronsUpDown } from 'lucide-vue-next'
 
 const { data: versionData } = await useAsyncData('version', async () => $fetch('/api/version'))