chore: add mock data

lizyChy0329 · Oct 28, 2024 · c8f8d83 · c8f8d83
1 parent e7f2d92
commit c8f8d83
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 22 deletions.
diff --git a/views/index.html b/views/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Vite + Vue + TS</title>
   </head>
   <body>

diff --git a/views/package.json b/views/package.json
@@ -13,6 +13,7 @@
     "vue": "^3.5.12"
   },
   "devDependencies": {
+    "@anatine/zod-mock": "3.13.4",
     "@antfu/eslint-config": "^3.8.0",
     "@faker-js/faker": "9.0.3",
     "@types/vscode-webview": "1.57.5",

diff --git a/views/pnpm-lock.yaml b/views/pnpm-lock.yaml
diff --git a/views/src/App.vue b/views/src/App.vue
@@ -10,7 +10,7 @@ import { imageSize, isLandscape } from './state'
 const vscodePostData = ref()
 
 const search = ref('')
-const imagesDataFilter = computed(() => (vscodePostData.value.imagesData as ImagesData).filter(imageData => imageData.basename.includes(search.value)))
+const imagesDataFilter = computed(() => (vscodePostData.value?.imagesData as ImagesData)?.filter(imageData => imageData.basename.includes(search.value)))
 
 window.addEventListener('message', (e) => {
   const receiveData = e.data
@@ -23,7 +23,6 @@ window.addEventListener('message', (e) => {
 
 <template>
   <div
-    v-if="vscodePostData"
     flex="~" space-y-4 :class="{
       'flex-row': isLandscape,
       'flex-col': !isLandscape,
@@ -32,7 +31,7 @@ window.addEventListener('message', (e) => {
     <SearchBar />
 
     <div w-full space-y-2>
-      <div v-if="!isLandscape" border-b-2 border-amber border-solid pb-2 class="text-base sm:text-lg">
+      <div v-if="!isLandscape && vscodePostData" border-b-2 border-amber border-solid pb-2 class="text-base sm:text-lg">
         {{ vscodePostData.currentAssetsPath }} ({{ vscodePostData.imagesData.length }})
       </div>
       <List :data="imagesDataFilter" :size="imageSize" />

diff --git a/views/src/components/List.vue b/views/src/components/List.vue
@@ -10,14 +10,27 @@ const { data = imageListMock, size = 'medium' } = defineProps<{
   size?: PineConeImageSize
 }>()
 
+// const gridRepeatMode = computed(() => {
+//   switch (size) {
+//     case 'small':
+//       return 'grid-cols-[repeat(auto-fit,minmax(60px,1fr))]'
+//     case 'medium':
+//       return 'grid-cols-[repeat(auto-fit,minmax(80px,1fr))]'
+//     case 'large':
+//       return 'grid-cols-[repeat(auto-fit,minmax(120px,1fr))]'
+
+//     default:
+//       return ''
+//   }
+// })
 const gridRepeatMode = computed(() => {
   switch (size) {
     case 'small':
-      return 'grid-cols-[repeat(auto-fit,minmax(60px,1fr))]'
+      return 'size-60px'
     case 'medium':
-      return 'grid-cols-[repeat(auto-fit,minmax(80px,1fr))]'
+      return 'size-80px'
     case 'large':
-      return 'grid-cols-[repeat(auto-fit,minmax(120px,1fr))]'
+      return 'size-100px'
 
     default:
       return ''
@@ -26,15 +39,17 @@ const gridRepeatMode = computed(() => {
 </script>
 
 <template>
-  <div class="grid w-full justify-items-center gap-3" :class="gridRepeatMode">
+  <div class="flex flex-wrap gap-2">
     <div
-      v-for="path of data" :key="path.basename" :data-vscode-context="JSON.stringify({ webviewSection: 'imgItem', preventDefaultContextMenuItems: true, selectedUri: path.imageFileUri })" size-full flex flex-col items-center
+      v-for="path of data" :key="path.basename" :data-vscode-context="JSON.stringify({ webviewSection: 'imgItem', preventDefaultContextMenuItems: true, selectedUri: path.imageFileUri })"
     >
-      <div relative aspect-ratio-square flex-1 cursor-pointer overflow-hidden rounded-1 bg-gray-300 class="max-w-30 min-w-16 hover:(ring-3 ring-amber)">
-        <img :src="path.imageVsCodePath" class="size-full rounded-1 object-contain" :alt="path.basename">
+      <!-- image -->
+      <div relative aspect-ratio-square cursor-pointer overflow-hidden rounded-1 bg-gray-300 class="max-w-30 min-w-16 hover:(ring-3 ring-amber)" :class="gridRepeatMode">
+        <img :src="path.imageVsCodePath" class="size-full object-contain" :alt="path.basename">
 
         <span absolute bottom-0 right-0 rounded-tl-1 px-1 py-0 class="bg-gray-700/70 text-white leading-tight">{{ path.extname }}</span>
       </div>
+      <!-- title -->
       <div w-full py-1>
         <span class="line-clamp-1 break-all text-center text-sm">{{ path.basename }}</span>
       </div>

diff --git a/views/src/schema.ts b/views/src/schema.ts
@@ -1,24 +1,44 @@
-import { faker } from '@faker-js/faker'
+import type { Faker } from '@faker-js/faker'
+import { generateMock } from '@anatine/zod-mock'
+// import { faker } from '@faker-js/faker'
 import { z } from 'zod'
 
+export type FakerFunction = () => string | number | boolean | Date
+
 export const ImageListSchema = z.array(z.object({
   imageFileUri: z.string(),
   imageVsCodePath: z.string(),
   basename: z.string(),
   extname: z.string(),
 }))
 
+export function mockeryMapper(
+  keyName: string,
+  fakerInstance: Faker,
+): FakerFunction | undefined {
+  const keyToFnMap: Record<string, FakerFunction> = {
+    imageFileUri: fakerInstance.image.avatar,
+    imageVsCodePath: fakerInstance.image.avatar,
+    basename: fakerInstance.string.alpha,
+    extname: fakerInstance.string.alpha,
+  }
+  return keyName && keyName in keyToFnMap
+    ? keyToFnMap[keyName as never]
+    : undefined
+}
+
+export const imageListMock = generateMock(ImageListSchema, { mockeryMapper })
 export type ImageListData = z.infer<typeof ImageListSchema>
 
 // const imageMockUrl = faker.image.urlPicsumPhotos({ width: 300, height: 300, format: 'png' })
-const imageMockUrl = faker.image.avatar()
-const imageSplitList = new URL(imageMockUrl).pathname.split('/')
-const basename = imageSplitList[imageSplitList.length - 1]
-const extname = basename.split('.')[1]
+// const imageMockUrl = faker.image.avatar()
+// const imageSplitList = new URL(imageMockUrl).pathname.split('/')
+// const basename = imageSplitList[imageSplitList.length - 1]
+// const extname = basename.split('.')[1]
 
-export const imageListMock = Array.from({ length: 20 }, () => ({
-  imageFileUri: imageMockUrl,
-  imageVsCodePath: imageMockUrl,
-  basename: imageSplitList[imageSplitList.length - 1],
-  extname,
-}))
+// export const imageListMock = Array.from({ length: 20 }, () => ({
+//   imageFileUri: imageMockUrl,
+//   imageVsCodePath: imageMockUrl,
+//   basename: imageSplitList[imageSplitList.length - 1],
+//   extname,
+// }))