style: update Prettier config and format scripts to include Vue files

iFwu · Nov 8, 2024 · 79c881f · 79c881f
1 parent 3c281c4
commit 79c881f
Show file tree

Hide file tree

Showing 12 changed files with 775 additions and 778 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -5,5 +5,5 @@
   "tabWidth": 2,
   "trailingComma": "es5",
   "bracketSpacing": true,
-  "vueIndentScriptAndStyle": true
+  "vueIndentScriptAndStyle": false
 }
diff --git a/package.json b/package.json
@@ -10,8 +10,8 @@
     "preview": "vite preview",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist",
-    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
-    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
+    "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",
     "lint": "eslint ",
     "test": "echo \"No tests specified\" && exit 0"

diff --git a/src/App.vue b/src/App.vue
@@ -39,139 +39,139 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, watch } from 'vue';
-
-  import { useOpenCV } from './composables/useOpenCV';
-  import { useChessEngine } from './composables/useChessEngine';
-  import { useChessStore } from './stores/chess';
-  import { useImageProcessing } from './composables/useImageProcessing';
-
-  import ImageUploader from './components/ImageUploader.vue';
-  import BoardResult from './components/BoardResult.vue';
-  import FENDisplay from './components/FENDisplay.vue';
-  import SolutionDisplay from './components/SolutionDisplay.vue';
-  import DepthControl from './components/DepthControl.vue';
-  import WelcomeModal from './components/WelcomeModal.vue';
-  import Spinner from './components/Spinner.vue';
-
-  const { templates } = useOpenCV();
-  const { fetchBestMove, isEngineReady } = useChessEngine();
-  const isLoading = computed(() => {
-    const templatesReady = !!templates.value;
-    return !isEngineReady.value || !templatesReady;
-  });
-
-  const chessStore = useChessStore();
-
-  watch(
-    () => [chessStore.fenCode, chessStore.depth],
-    () => {
-      if (chessStore.fenCode) {
-        fetchBestMove(chessStore.fenCode, chessStore.depth);
-      }
+import { computed, watch } from 'vue';
+
+import { useOpenCV } from './composables/useOpenCV';
+import { useChessEngine } from './composables/useChessEngine';
+import { useChessStore } from './stores/chess';
+import { useImageProcessing } from './composables/useImageProcessing';
+
+import ImageUploader from './components/ImageUploader.vue';
+import BoardResult from './components/BoardResult.vue';
+import FENDisplay from './components/FENDisplay.vue';
+import SolutionDisplay from './components/SolutionDisplay.vue';
+import DepthControl from './components/DepthControl.vue';
+import WelcomeModal from './components/WelcomeModal.vue';
+import Spinner from './components/Spinner.vue';
+
+const { templates } = useOpenCV();
+const { fetchBestMove, isEngineReady } = useChessEngine();
+const isLoading = computed(() => {
+  const templatesReady = !!templates.value;
+  return !isEngineReady.value || !templatesReady;
+});
+
+const chessStore = useChessStore();
+
+watch(
+  () => [chessStore.fenCode, chessStore.depth],
+  () => {
+    if (chessStore.fenCode) {
+      fetchBestMove(chessStore.fenCode, chessStore.depth);
     }
-  );
+  }
+);
 
-  const { processUploadedImage } = useImageProcessing(templates);
+const { processUploadedImage } = useImageProcessing(templates);
 
-  const handleImageUpload = (img: HTMLImageElement) => {
-    chessStore.resetHistory();
-    processUploadedImage(img);
-  };
+const handleImageUpload = (img: HTMLImageElement) => {
+  chessStore.resetHistory();
+  processUploadedImage(img);
+};
 </script>
 
 <style scoped>
-  .app-container {
-    flex: 1;
-    display: flex;
+.app-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.content-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+  box-sizing: border-box;
+}
+
+.left-column,
+.right-column {
+  width: 100%;
+}
+
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.loading-overlay p {
+  margin-top: 20px;
+  font-size: 1.2rem;
+  color: #333;
+}
+
+/* 媒体查询 */
+@media (max-width: 768px) {
+  .content-wrapper {
     flex-direction: column;
-    width: 100%;
-    margin: 0 auto;
-    padding: 0;
-    box-sizing: border-box;
+    gap: 0;
   }
 
-  .content-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2rem;
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 1rem;
-    box-sizing: border-box;
+  .solution-section {
+    order: 1;
   }
-
-  .left-column,
-  .right-column {
-    width: 100%;
+  .upload-section {
+    order: 0;
   }
-
-  .loading-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(255, 255, 255, 0.8);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    z-index: 9999;
+  .board-result-section {
+    order: 2;
   }
-
-  .loading-overlay p {
-    margin-top: 20px;
-    font-size: 1.2rem;
-    color: #333;
+  .fen-section {
+    order: 3;
   }
-
-  /* 媒体查询 */
-  @media (max-width: 768px) {
-    .content-wrapper {
-      flex-direction: column;
-      gap: 0;
-    }
-
-    .solution-section {
-      order: 1;
-    }
-    .upload-section {
-      order: 0;
-    }
-    .board-result-section {
-      order: 2;
-    }
-    .fen-section {
-      order: 3;
-    }
-    .depth-control-section {
-      order: 4;
-    }
+  .depth-control-section {
+    order: 4;
   }
+}
 
-  @media (min-width: 769px) {
-    .content-wrapper {
-      flex-direction: row;
-      align-items: flex-start;
-    }
+@media (min-width: 769px) {
+  .content-wrapper {
+    flex-direction: row;
+    align-items: flex-start;
+  }
 
-    .left-column {
-      width: calc(50% - 1rem);
-      position: sticky;
-      top: 1rem;
-      align-self: flex-start;
-    }
+  .left-column {
+    width: calc(50% - 1rem);
+    position: sticky;
+    top: 1rem;
+    align-self: flex-start;
+  }
 
-    .right-column {
-      width: calc(50% - 1rem);
-    }
+  .right-column {
+    width: calc(50% - 1rem);
+  }
 
-    .solution-section {
-      height: calc(100vh - 2rem);
-      overflow-y: auto;
-      order: -1;
-    }
+  .solution-section {
+    height: calc(100vh - 2rem);
+    overflow-y: auto;
+    order: -1;
   }
+}
 </style>