style:fix warning lint & format code

luoliwoshang · Mar 13, 2024 · c1c038c · c1c038c
1 parent 577ea0c
commit c1c038c
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 77 deletions.
diff --git a/spx-gui/src/components/code-editor-demo/CodeEditorDemo.vue b/spx-gui/src/components/code-editor-demo/CodeEditorDemo.vue
@@ -20,56 +20,60 @@
       </div>
     </div>
 
-        <CodeEditor width="500px" height="500px" ref="codeEditor" :editor-options="editorOptions"
-            :model-value="editorContent" @update:model-value="onCodeChange" />
-    </div>
+    <CodeEditor
+      ref="codeEditor"
+      width="500px"
+      height="500px"
+      :editor-options="editorOptions"
+      :model-value="editorContent"
+      @update:model-value="onCodeChange"
+    />
+  </div>
 </template>
 <script setup lang="ts">
-import CodeEditor, { onStartSnippet } from "../code-editor"
-import { ref, computed } from "vue"
-let codeEditor = ref();
+import CodeEditor, { onStartSnippet } from '../code-editor'
+import { ref, computed } from 'vue'
+let codeEditor = ref()
 const editorOptions = ref({
-    minimap: {
-        enabled: false
-    },
-    readOnly: false
+  minimap: {
+    enabled: false
+  },
+  readOnly: false
 })
 const editorContent = computed(() => {
-    return codeArray.value[codeIndex.value].code;
+  return codeArray.value[codeIndex.value].code
 })
-const codeIndex = ref(0);
-const codeArray = ref([{
-    code: "onStart => { }",
-}, {
-    code: "onClone => { }",
-}])
+const codeIndex = ref(0)
+const codeArray = ref([
+  {
+    code: 'onStart => { }'
+  },
+  {
+    code: 'onClone => { }'
+  }
+])
 
 const insertSnippet = () => {
-    codeEditor.value.insertSnippet(
-        onStartSnippet
-    );
+  codeEditor.value.insertSnippet(onStartSnippet)
 }
 
 const onCodeChange = (e: string) => {
-    codeArray.value[codeIndex.value].code = e;
+  codeArray.value[codeIndex.value].code = e
 }
 
 const toggleReadOnly = () => {
-    editorOptions.value.readOnly = !editorOptions.value.readOnly;
+  editorOptions.value.readOnly = !editorOptions.value.readOnly
 }
 
 const format = () => {
-    codeEditor.value.format();
+  codeEditor.value.format()
 }
-
-
-
 </script>
 <style lang="scss">
 .demo {
-    height: 700px;
-    width: 100%;
-    display: flex;
-    justify-content: center;
+  height: 700px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
 }
 </style>
diff --git a/spx-gui/src/components/sounds/SoundRecorder.vue b/spx-gui/src/components/sounds/SoundRecorder.vue
@@ -28,7 +28,7 @@
 <script lang="ts" setup>
 import WaveSurfer from 'wavesurfer.js'
 import MicrophonePlugin from 'wavesurfer.js/src/plugin/microphone'
-import { defineEmits, defineProps, nextTick, onMounted, type Ref, ref, watch } from 'vue'
+import { defineEmits, defineProps, nextTick, onMounted, ref, watch } from 'vue'
 import { useSoundStore } from 'store/modules/sound'
 import { Sound } from '@/class/sound'
 import { audioBufferToWavBlob, convertAudioChunksToAudioBuffer } from '@/util/audio'

diff --git a/spx-gui/src/components/spx-code-editor/CodeEditorHome.vue b/spx-gui/src/components/spx-code-editor/CodeEditorHome.vue
@@ -8,35 +8,36 @@
 -->
 
 <template>
-    <n-layout has-sider :style="layoutStyle">
-        <n-layout-sider :native-scrollbar="false"
-        collapse-mode="width"
-        :collapsed-width="78"
-        :width="260"
-        show-trigger="arrow-circle"
-        style="border-right: 2px dashed #8f98a1"
-        >
-            <ToolBox />
-        </n-layout-sider>
-        <n-layout-content>
-            <SpxCodeEditor />
-        </n-layout-content>
-    </n-layout>
+  <n-layout has-sider :style="layoutStyle">
+    <n-layout-sider
+      :native-scrollbar="false"
+      collapse-mode="width"
+      :collapsed-width="78"
+      :width="260"
+      show-trigger="arrow-circle"
+      style="border-right: 2px dashed #8f98a1"
+    >
+      <ToolBox />
+    </n-layout-sider>
+    <n-layout-content>
+      <SpxCodeEditor />
+    </n-layout-content>
+  </n-layout>
 </template>
 <script lang="ts" setup>
-import { NLayout, NLayoutSider, NLayoutContent } from "naive-ui";
-import SpxCodeEditor from "./SpxCodeEditor.vue"
-import ToolBox from "./ToolBox.vue"
+import { NLayout, NLayoutSider, NLayoutContent } from 'naive-ui'
+import SpxCodeEditor from './SpxCodeEditor.vue'
+import ToolBox from './ToolBox.vue'
 
 const layoutStyle = {
-    height: 'calc(100vh - 140px)',
-    display: 'flex',
-    flexDirection: 'column',
-    border: '2px solid #00142970',
-    position: 'relative',
-    background: 'white',
-    borderRadius: '0 24px 24px 0',
-    boxShadow: '0 4px 10px rgba(0, 0, 0, 0.1)',
-    overflow: 'hidden',
+  height: 'calc(100vh - 140px)',
+  display: 'flex',
+  flexDirection: 'column',
+  border: '2px solid #00142970',
+  position: 'relative',
+  background: 'white',
+  borderRadius: '0 24px 24px 0',
+  boxShadow: '0 4px 10px rgba(0, 0, 0, 0.1)',
+  overflow: 'hidden'
 }
-</script>
+</script>
diff --git a/spx-gui/src/components/spx-code-editor/ToolBox.vue b/spx-gui/src/components/spx-code-editor/ToolBox.vue
@@ -18,8 +18,8 @@
         <n-button
           v-for="(snippet, index) in item.completionItems"
           :key="index"
-          @click="insertCode(toRaw(snippet))"
           style="margin-top: 24px"
+          @click="insertCode(toRaw(snippet))"
         >
           {{ snippet.label }}
         </n-button>

diff --git a/spx-gui/src/components/spx-editor/SpxEditor.vue b/spx-gui/src/components/spx-editor/SpxEditor.vue
@@ -7,21 +7,21 @@
  * @Description:
 -->
 <template>
-  <n-tabs type="card" v-model:value="currentTab" animated>
+  <n-tabs v-model:value="currentTab" type="card" animated>
     <!--Tab Code Part-->
     <n-tab-pane name="code">
       <template #tab>
         <div v-if="currentTab === 'code'" class="tab-container">
           <n-icon>
             <CodeIcon />
           </n-icon>
-          <div class="tab-font-check">{{ $t("tab.code") }}</div>
+          <div class="tab-font-check">{{ $t('tab.code') }}</div>
         </div>
         <div v-else class="tab-container">
           <n-icon>
             <CodeIcon />
           </n-icon>
-          <div class="tab-font-uncheck">{{ $t("tab.code") }}</div>
+          <div class="tab-font-uncheck">{{ $t('tab.code') }}</div>
         </div>
       </template>
       <!-- TODO Code Editor Part   -->
@@ -34,13 +34,13 @@
           <n-icon>
             <MusicIcon />
           </n-icon>
-          <div class="tab-font-check">{{ $t("tab.sound") }}</div>
+          <div class="tab-font-check">{{ $t('tab.sound') }}</div>
         </div>
         <div v-else class="tab-container">
           <n-icon>
             <MusicIcon />
           </n-icon>
-          <div class="tab-font-uncheck">{{ $t("tab.sound") }}</div>
+          <div class="tab-font-uncheck">{{ $t('tab.sound') }}</div>
         </div>
       </template>
       <!--  S Component SoundsEditHome-->
@@ -55,13 +55,13 @@
           <n-icon>
             <CostumeIcon />
           </n-icon>
-          <div class="tab-font-check">{{ $t("tab.costume") }}</div>
+          <div class="tab-font-check">{{ $t('tab.costume') }}</div>
         </div>
         <div v-else class="tab-container">
           <n-icon>
             <CostumeIcon />
           </n-icon>
-          <div class="tab-font-uncheck">{{ $t("tab.costume") }}</div>
+          <div class="tab-font-uncheck">{{ $t('tab.costume') }}</div>
         </div>
       </template>
       <!-- TODO Costume Editor Part   -->
@@ -70,18 +70,18 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { NTabs, NTabPane, NIcon } from "naive-ui";
-import { HighlightOutlined as CostumeIcon } from "@vicons/antd";
-import { CodeSlash as CodeIcon, MusicalNotes as MusicIcon } from "@vicons/ionicons5"
-import SoundsEditHome from "comps/sounds/SoundHome.vue";
-import SpxEditorHome from "@/components/spx-code-editor/CodeEditorHome.vue";
+import { ref } from 'vue'
+import { NTabs, NTabPane, NIcon } from 'naive-ui'
+import { HighlightOutlined as CostumeIcon } from '@vicons/antd'
+import { CodeSlash as CodeIcon, MusicalNotes as MusicIcon } from '@vicons/ionicons5'
+import SoundsEditHome from 'comps/sounds/SoundHome.vue'
+import SpxEditorHome from '@/components/spx-code-editor/CodeEditorHome.vue'
 
-const currentTab = ref("code");
+const currentTab = ref('code')
 </script>
 
 <style scoped lang="scss">
-@import "@/assets/theme.scss";
+@import '@/assets/theme.scss';
 
 .tab-container {
   display: flex;

diff --git a/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue b/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
@@ -165,7 +165,6 @@ import type { SelectedSpritesChangeEvent } from '../stage-viewer'
 import { useProjectStore } from '@/store/modules/project'
 import { storeToRefs } from 'pinia'
 import { ref, computed } from 'vue'
-import FileWithUrl from '@/class/file-with-url'
 
 const projectStore = useProjectStore()
 const { project } = storeToRefs(projectStore)
@@ -251,6 +250,4 @@ const chooseBackdropScene = (index: number) => {
 const chooseBackdropCostume = (index: number) => {
   project.value.backdrop.config.currentCostumeIndex = index
 }
-
-
 </script>