git commit -m "feat: add demo images section with grid layout and hov…

…er effects"

CHANGELOG.md

@@ -1,3 +1,6 @@
+### 2024-11-11
+- 增加示例部分
+
 ### 2024-11-01
 - 优化 OpenCV.js 加载完成的判断条件
 - 优化全局样式，使用 scoped 样式

package.json

@@ -7,9 +7,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "preview": "vite preview",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d dist",
+    "preview": "pnpm build && vite preview",
     "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md,vue}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md,vue}\"",
     "prepare": "husky",

src/App.vue

@@ -19,10 +19,15 @@
             <SolutionDisplay />
           </div>
           <div class="right-column">
-            <ImageUploader @imageUpload="handleImageUpload" />
-            <BoardResult />
-            <FENDisplay />
-            <DepthControl />
+            <div class="upload-group">
+              <ImageUploader @imageUpload="handleImageUpload" />
+              <LoadDemo @selectDemo="handleImageUpload" />
+            </div>
+            <div class="result-group">
+              <BoardResult />
+              <FENDisplay />
+              <DepthControl />
+            </div>
           </div>
         </div>
       </main>
@@ -53,6 +58,7 @@ import SolutionDisplay from './components/SolutionDisplay.vue';
 import DepthControl from './components/DepthControl.vue';
 import WelcomeModal from './components/WelcomeModal.vue';
 import Spinner from './components/Spinner.vue';
+import LoadDemo from './components/LoadDemo.vue';
 
 const { templates } = useOpenCV();
 const { fetchBestMove, isEngineReady } = useChessEngine();
@@ -134,21 +140,21 @@ const handleImageUpload = (img: HTMLImageElement) => {
     gap: 0;
   }
 
-  .solution-section {
+  .left-column {
+    order: 2;
+  }
+
+  .right-column {
     order: 1;
   }
-  .upload-section {
-    order: 0;
+
+  .upload-group {
+    order: 1;
   }
-  .board-result-section {
+
+  .result-group {
     order: 2;
   }
-  .fen-section {
-    order: 3;
-  }
-  .depth-control-section {
-    order: 4;
-  }
 }
 
 @media (min-width: 769px) {
@@ -166,12 +172,14 @@ const handleImageUpload = (img: HTMLImageElement) => {
 
   .right-column {
     width: calc(50% - 1rem);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
   }
 
-  .solution-section {
-    height: calc(100vh - 2rem);
-    overflow-y: auto;
-    order: -1;
+  .upload-group,
+  .result-group {
+    width: 100%;
   }
 }
 </style>

src/components/BoardResult.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="board-result-section">
+  <section class="section">
     <h2>分析结果</h2>
     <div
       class="image-container"
@@ -75,23 +75,10 @@ const leftOffset = computed(
 </script>
 
 <style scoped>
-.board-result-section {
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  padding: 1.5rem;
-  margin-bottom: 1rem;
-}
-
-.board-result-section h2 {
-  text-align: left;
-}
-
 .image-container {
   position: relative;
   width: 100%;
   overflow: hidden;
-  margin-top: 1rem;
 }
 
 .overlay-image {

src/components/DepthControl.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="depth-control-section">
+  <section class="section">
     <h2>搜索深度控制</h2>
     <div class="depth-slider-container">
       <label for="depth-slider">当前深度: {{ depth }}</label>
@@ -11,7 +11,7 @@
         v-model.number="depth"
       />
     </div>
-  </div>
+  </section>
 </template>
 
 <script setup lang="ts">
@@ -23,18 +23,6 @@ const { depth } = storeToRefs(chessStore);
 </script>
 
 <style scoped>
-.depth-control-section {
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  padding: 1.5rem;
-  margin-bottom: 1rem;
-}
-
-.depth-control-section h2 {
-  text-align: left;
-}
-
 .depth-slider-container {
   display: flex;
   flex-direction: column;

src/components/FENDisplay.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="fen-section">
+  <section class="section">
     <h2>FEN代码</h2>
     <div class="fen-container">
       <input type="text" :value="fenCode" readonly />
       <button @click="onCopy">复制</button>
     </div>
-  </div>
+  </section>
 </template>
 
 <script setup lang="ts">
@@ -21,28 +21,15 @@ const onCopy = () => {
 </script>
 
 <style scoped>
-.fen-section {
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  padding: 1.5rem;
-  margin-bottom: 1rem;
-}
-
-.fen-section h2 {
-  text-align: left;
-}
-
 .fen-container {
   display: flex;
   gap: 1rem;
   justify-content: center;
-  align-items: center; /* 添加这行以垂直居中对齐项目 */
+  align-items: center;
 }
 
 .fen-container input {
-  flex: 1; /* 让输入框占据剩余空间 */
-  margin: 0; /* 移除之前的 margin */
+  flex: 1;
   padding: 0.5rem;
   border: 1px solid #ddd;
   border-radius: 4px;
@@ -51,7 +38,7 @@ const onCopy = () => {
 }
 
 .fen-container button {
-  flex-shrink: 0; /* 防止按钮被压缩 */
-  white-space: nowrap; /* 防止文本换行 */
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 </style>

src/components/ImageUploader.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="upload-section">
+  <section class="section">
     <h2>上传图片</h2>
     <input
       ref="fileInputRef"
@@ -42,30 +42,7 @@ const handleButtonClick = () => {
 </script>
 
 <style scoped>
-.upload-section {
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  padding: 1.5rem;
-  margin-bottom: 1rem;
-}
-
-.upload-section h2 {
-  text-align: left;
-}
-
-.upload-section > *:not(h2) {
+.section > *:not(h2) {
   text-align: center;
 }
-
-.upload-section input[type='file'] {
-  display: block;
-  margin: 1rem 0;
-  padding: 0.5rem;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 1rem;
-  width: 100%;
-  box-sizing: border-box;
-}
 </style>

src/components/LoadDemo.vue

@@ -0,0 +1,82 @@
+<template>
+  <section class="section">
+    <h2>示例</h2>
+    <div class="demo-images-grid">
+      <div
+        v-for="(image, index) in demoImages"
+        :key="index"
+        class="demo-image-item"
+        @click="() => handleImageClick(image)"
+      >
+        <img :src="image.url" :alt="image.description" />
+        <span class="demo-image-description">{{ image.description }}</span>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+interface DemoImage {
+  url: string;
+  description: string;
+}
+
+const demoImages: DemoImage[] = [
+  {
+    url: new URL('../../assets/demo/example1.jpg', import.meta.url).href,
+    description: '示例1',
+  },
+  {
+    url: new URL('../../assets/demo/example2.jpg', import.meta.url).href,
+    description: '示例2',
+  },
+  {
+    url: new URL('../../assets/demo/example3.jpg', import.meta.url).href,
+    description: '示例3',
+  },
+];
+
+const emit = defineEmits<{
+  (e: 'selectDemo', img: HTMLImageElement): void;
+}>();
+
+const handleImageClick = (demoImage: DemoImage) => {
+  const img = new Image();
+  img.src = demoImage.url;
+  img.onload = () => {
+    emit('selectDemo', img);
+  };
+};
+</script>
+
+<style scoped>
+.demo-images-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 1rem;
+}
+
+.demo-image-item {
+  cursor: pointer;
+  transition: transform 0.2s;
+  text-align: center;
+}
+
+.demo-image-item:hover {
+  transform: scale(1.05);
+}
+
+.demo-image-item img {
+  width: 100%;
+  height: 150px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.demo-image-description {
+  display: block;
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+  color: #666;
+}
+</style>