Merge pull request #16 from besscroft/dev

besscroft · web-flow · commit 062b30a40550 · 2023-12-22T22:22:12.000+08:00
v0.1.3
diff --git a/components/Waterfall.vue b/components/Waterfall.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const smAndLarger = breakpoints.greaterOrEqual('md')
+
 const props = defineProps({
   loading: Boolean,
   handleButton: Boolean,
@@ -42,14 +47,14 @@ onUnmounted(() => {
       <Waterfall
         v-if="dataList && dataList?.length > 0"
         :list="dataList"
-        :gutter="12"
+        :gutter="smAndLarger ? 12 : 4"
         :hasAroundGutter="true"
         :crossOrigin="false"
         :backgroundColor="isDark ? '#121212' : '#FFFFFF'"
         :breakpoints="{
           9999: { rowPerView: 4 },
+          1280: { rowPerView: 3 },
           1024: { rowPerView: 2 },
-          768: { rowPerView: 1 },
         }"
       >
         <template #item="{ item }">
diff --git a/layouts/none.vue b/layouts/none.vue
@@ -4,7 +4,7 @@ const { isMobile } = useDevice()
 
 <template>
   <div h-full>
-    <div style="min-height: calc(100vh - 3.5rem);">
+    <div h-full>
       <slot />
     </div>
     <ClientOnly v-if="!isMobile">
diff --git a/package.json b/package.json
@@ -14,35 +14,35 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.4.5",
+    "@antfu/eslint-config": "^2.4.6",
     "@element-plus/nuxt": "^1.0.7",
-    "@iconify-json/carbon": "^1.1.26",
+    "@iconify-json/carbon": "^1.1.27",
     "@nuxtjs/color-mode": "^3.3.2",
     "@nuxtjs/device": "^3.1.1",
     "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
     "@pinia/nuxt": "^0.5.1",
-    "@sentry/node": "^7.87.0",
+    "@sentry/node": "^7.91.0",
     "@sentry/profiling-node": "^1.3.2",
-    "@sentry/vue": "^7.87.0",
+    "@sentry/vue": "^7.91.0",
     "@unocss/eslint-config": "^0.58.0",
     "@unocss/nuxt": "^0.58.0",
-    "@vite-pwa/nuxt": "^0.3.5",
+    "@vite-pwa/nuxt": "^0.3.6",
     "@vueuse/nuxt": "^10.7.0",
     "aplayer": "^1.10.1",
     "consola": "^3.2.3",
-    "element-plus": "^2.4.3",
-    "eslint": "^8.55.0",
+    "element-plus": "^2.4.4",
+    "eslint": "^8.56.0",
     "nuxt": "^3.8.2",
     "pinia": "^2.1.7",
     "typescript": "^5.3.3",
-    "vue-tsc": "^1.8.25"
+    "vue-tsc": "^1.8.26"
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.8.1",
     "@nuxt/ui": "^2.11.1",
-    "aws-sdk": "^2.1518.0",
+    "aws-sdk": "^2.1524.0",
     "crypto-js": "^4.2.0",
-    "exifreader": "^4.17.0",
+    "exifreader": "^4.19.1",
     "jsonwebtoken": "^9.0.2",
     "postgres": "^3.4.3",
     "vue-waterfall-plugin-next": "^2.3.1"
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
@@ -17,7 +17,6 @@ const dataHandle = async () => {
         Authorization: `${user.tokenName} ${user.token}`,
       },
     })
-    console.log(data)
     dataInfo.value = data
   } catch (e) {
     console.log(e)
diff --git a/pages/admin/upload.vue b/pages/admin/upload.vue
@@ -269,7 +269,6 @@ definePageMeta({
         </el-select>
       </div>
       <el-upload
-        class="upload-demo"
         drag
         :limit="1"
         :http-request="onRequestUpload"
@@ -286,15 +285,6 @@ definePageMeta({
         <div class="el-upload__text">
           点击或者拖动图片到该区域来上传，关闭图片可重置
         </div>
-        <template #tip>
-          <div mt-4>
-            <UAlert
-              description="同类别同名文件会被覆盖，支持大多数图片类型。受限于部署平台限制，如 Vercel，可能只允许免费用户传递 6M 内文件..."
-              :avatar="{ src: '/112962239_p0.jpg' }"
-              title="噔噔！"
-            />
-          </div>
-        </template>
       </el-upload>
       <div v-if="fileUrl" space-y-2>
         <p break-words text-green-400>图片地址：{{ fileUrl }}</p>
diff --git a/pages/login.vue b/pages/login.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { FormError, FormSubmitEvent } from '#ui/types'
 import { appName } from '~/constants'
 
 interface ModelType {
@@ -15,7 +16,18 @@ const loginForm = reactive<ModelType>({
   password: '',
 })
 
-const handleSubmitClick = async () => {
+const validate = (state: any): FormError[] => {
+  const errors = []
+  if (!state.username) {
+    errors.push({ path: 'username', message: '用户名必填！' })
+  }
+  if (!state.password) {
+    errors.push({ path: 'password', message: '密码必填！' })
+  }
+  return errors
+}
+
+async function handleSubmitClick(event: FormSubmitEvent<any>) {
   loading.value = true
   try {
     const { token, tokenName } = await $fetch('/api/login', {
@@ -27,84 +39,68 @@ const handleSubmitClick = async () => {
     router.push('/admin')
     if (token) {
       toast.add({ title: '登录成功！', timeout: 2000 })
-    } else {
+    }
+    else {
       toast.add({ title: '登录失败！', timeout: 2000, color: 'red' })
     }
-  } catch (e) {
+  }
+  catch (e) {
     toast.add({ title: '登录失败！', timeout: 2000, color: 'red' })
-  } finally {
-    loading.value = false
   }
-}
-
-const keyDown = (e) => {
-  if (e.keyCode === 13 || e.keyCode === 100) {
-    handleSubmitClick()
+  finally {
+    loading.value = false
   }
 }
 
-onMounted(() => {
-  window.addEventListener('keydown', keyDown)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', keyDown, false)
-})
-
 definePageMeta({
   layout: 'none',
 })
 </script>
 
 <template>
-  <div bg-white dark:bg-gray-900 w-full>
-    <div flex justify-center h-screen>
-      <div hidden bg-cover lg:block class="lg:w-2/3" style="background-image: url('/fufu.jpg')">
-        <div flex items-center h-full px-20 bg-gray-900 bg-opacity-40>
-          <div>
-            <h2 text-4xl text-white>旅行足迹</h2>
-
-            <p text-sm text-gray-300 mt-4>
-              鹤鸣工作室出品，一款基于 Nuxt3 构建的⌈相片集⌋。
-            </p>
+  <div flex items-center justify-center w-full h-full style="background-image: url('/fufu.jpg'); background-size: cover;"
+    md:grid md:grid-cols-10 md:gap-4
+  >
+    <div md:col-span-5></div>
+    <div
+      h-108 w-full mx-2 md:max-w-xl bg-white dark:bg-black rounded-md shadow-md md:col-span-4
+    >
+      <div h-full flex flex-col items-center>
+        <div flex items-center justify-center justify-between w-full px-4 mt-4>
+          <div text-left>
+            <div i-carbon-arrow-left cursor-pointer @click="router.push('/')" />
           </div>
+          <ClientOnly>
+            <div text-right>
+              <DarkToggle />
+            </div>
+          </ClientOnly>
         </div>
-      </div>
-
-      <div flex items-center w-full max-w-md px-6 mx-auto class="lg:w-2/6">
-        <div flex-1>
-          <div text-center>
-            <h2 text-4xl text-center text-gray-700 dark:text-white>{{ appName || '旅行足迹' }}</h2>
 
-            <p mt-3 text-gray-500 dark:text-gray-300>登录你的帐号</p>
-          </div>
+        <h2 text-center text-3xl mt-4>
+          {{ appName || '旅行足迹' }}
+        </h2>
 
-          <div mt-8>
-            <div>
-              <label for="account" block mb-2 text-sm text-gray-600 dark:text-gray-200>帐号</label>
-              <input type="account" v-model="loginForm.username" name="account" id="account" block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40 />
-            </div>
+        <UForm :validate="validate" :state="loginForm" class="space-y-6 w-2/3 mt-6" @submit="handleSubmitClick">
+          <UFormGroup label="用户名" name="username">
+            <UInput v-model="loginForm.username" />
+          </UFormGroup>
 
-            <div mt-6>
-              <div flex justify-between mb-2>
-                <label for="password" font-ark text-sm text-gray-600 dark:text-gray-200>密码</label>
-              </div>
+          <UFormGroup label="密码" name="password">
+            <UInput v-model="loginForm.password" type="password" />
+          </UFormGroup>
 
-              <input type="password" v-model="loginForm.password" name="password" id="password" block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40 />
-            </div>
+          <UButton type="submit" color="white" :loading="loading">
+            登录
+          </UButton>
+        </UForm>
 
-            <div mt-6>
-              <el-button
-                :loading="loading"
-                @click="handleSubmitClick"
-                w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-50
-                type="primary"
-              >登录</el-button>
-            </div>
-          </div>
-        </div>
+        <p text-sm text-gray-400 mt-4>
+          鹤鸣工作室出品，一款基于 Nuxt3 构建的⌈相片集⌋。
+        </p>
       </div>
     </div>
+    <div md:col-span-1></div>
   </div>
 </template>
 
diff --git a/plugins/sentry.client.ts b/plugins/sentry.client.ts
@@ -20,7 +20,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 
     // Configure this whole part as you need it!
 
-    tracesSampleRate: 0.2, // Change in prod
+    tracesSampleRate: 0.5, // Change in prod
 
     // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
     tracePropagationTargets: ['https://kamera.heming.dev'],
diff --git a/plugins/sentry.server.ts b/plugins/sentry.server.ts
@@ -16,9 +16,9 @@ export default defineNuxtPlugin((nuxtApp) => {
       new ProfilingIntegration(),
     ],
     // Performance Monitoring
-    tracesSampleRate: 0.2,
+    tracesSampleRate: 0.5,
     // Set sampling rate for profiling - this is relative to tracesSampleRate
-    profilesSampleRate: 0.2,
+    profilesSampleRate: 0.5,
   })
 
   nuxtApp.hooks.hook('error', (error) => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
