chore: update action files & fix bug (#7)

* chore: update action files

* fix: search image error

.github/workflows/autofix.yml

@@ -2,6 +2,9 @@ name: autofix.ci
 
 on:
   push:
+    branches:
+      - main
+
   pull_request:
     branches:
       - main
@@ -28,7 +31,7 @@ jobs:
       - name: Install Dependencies
         run: pnpm i --frozen-lockfile
 
-      - name: Lint Staged
-        run: pnpm lint-staged
+      # - name: Lint Staged
+        # run: pnpm lint-staged
 
-      # - uses: autofix-ci/action@dd55f44df8f7cdb7a6bf74c78677eb8acd40cd0a
+      - uses: autofix-ci/action@8bc06253bec489732e5f9c52884c7cace15c0160

.github/workflows/ci.yml

@@ -0,0 +1,58 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    branches:
+      - main
+
+  merge_group: {}
+
+jobs:
+  test:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node_version: [18.18.2, lts/*]
+        include:
+          - os: macos-latest
+            node_version: lts/*
+          - os: windows-latest
+            node_version: lts/*
+      fail-fast: false
+
+    steps:
+      - name: Set git to use LF
+        run: |
+          git config --global core.autocrlf false
+          git config --global core.eol lf
+
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set node ${{ matrix.node_version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node_version }}
+          cache: pnpm
+
+      - run: corepack enable
+
+      - name: Install
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm build
+
+      # - name: Test
+      #   run: nr test
+
+      # - name: Typecheck
+      #   run: nr typecheck

views/README.md

@@ -1,5 +1,9 @@
-# Vue 3 + TypeScript + Vite
+# Pinecone Gallery Views dev
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## Dev
 
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+pnpm dev
+
+## Build
+
+pnpm build

views/src/App.vue

@@ -3,14 +3,14 @@ import type { ImagesData } from './types'
 import { computed, ref } from 'vue'
 import List from './components/List.vue'
 import SearchBar from './components/SearchBar.vue'
-import { imageSize, isLandscape } from './state'
+import { imageListMock } from './schema.ts'
+import { imageSize, isLandscape, search } from './state'
 
 // const { setState, getState } = acquireVsCodeApi()
 
 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 || imageListMock)?.filter(imageData => (imageData.basename.toLocaleLowerCase()).includes(search.value.trim().toLocaleLowerCase())))
 
 window.addEventListener('message', (e) => {
   const receiveData = e.data
@@ -32,7 +32,7 @@ window.addEventListener('message', (e) => {
 
     <div w-full space-y-2>
       <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 }})
+        {{ vscodePostData.currentAssetsPath.slice(1) }} ({{ vscodePostData.imagesData.length }})
       </div>
       <List :data="imagesDataFilter" :size="imageSize" />
     </div>

views/src/components/List.vue

@@ -3,9 +3,8 @@
 import type { ImageListData } from '../schema.ts'
 import type { PineConeImageSize } from '../types'
 import { computed, defineProps } from 'vue'
-import { imageListMock } from '../schema.ts'
 
-const { data = imageListMock, size = 'medium' } = defineProps<{
+const { data, size = 'medium' } = defineProps<{
   data?: ImageListData
   size?: PineConeImageSize
 }>()
@@ -45,7 +44,7 @@ const gridRepeatMode = computed(() => {
     >
       <!-- 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)">
-        <img :src="path.imageVsCodePath" class="size-full object-contain" :alt="path.basename">
+        <img :src="path.imageVsCodePath" class="size-full object-scale-down" :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>

views/src/components/SearchBarLandscape.vue

@@ -6,7 +6,7 @@ const imageSizeVModel = defineModel('imageSize')
 <template>
   <div flex="~ col" my-3 mr-3 border-r-1 border-r-amber pr-3 text-white space-y-1>
     <!-- <div flex-1>
-      <input v-model="searchVModel" type="text" placeholder="我是输入框" class="w-full rounded-1 bg-gray-100 bg-gray-300 px-2 py-1 text-gray-600">
+      <input v-model="searchVModel" type="text" placeholder="ikun search" class="w-full rounded-1 bg-gray-100 bg-gray-300 px-2 py-1 text-gray-600">
     </div> -->
 
     <div

views/src/components/SearchBarPortrait.vue

@@ -6,7 +6,7 @@ const imageSizeVModel = defineModel('imageSize')
 <template>
   <div my-3 flex space-x-2>
     <div flex-1>
-      <input v-model="searchVModel" type="text" placeholder="我是输入框" class="w-full rounded-1 bg-gray-100 bg-gray-300 px-2 py-1 text-gray-600">
+      <input v-model="searchVModel" type="text" placeholder="ikun search" class="w-full rounded-1 bg-gray-100 bg-gray-300 px-2 py-1 text-gray-600">
     </div>
 
     <div flex shrink-0 items-center text-white space-x-1>

views/src/schema.ts

@@ -27,7 +27,7 @@ export function mockeryMapper(
     : undefined
 }
 
-export const imageListMock = generateMock(ImageListSchema, { mockeryMapper })
+export const imageListMock = import.meta.env.DEV ? generateMock(ImageListSchema, { mockeryMapper }) : []
 export type ImageListData = z.infer<typeof ImageListSchema>
 
 // const imageMockUrl = faker.image.urlPicsumPhotos({ width: 300, height: 300, format: 'png' })

views/target/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>
     <script type="module" crossorigin src="/assets/index.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index.css">