Revise variable names and file names

app/src/App.vue

@@ -1,38 +1,38 @@
 <script setup>
 // Import components
-import commandlist_part from './components/commandlist-part.vue'
-import header_part from './components/header-part.vue'
-import hint_part from './components/hint-part.vue'
-import quest_part from './components/quest-part.vue'
-import terminal_part from './components/terminal-part.vue'
-import visualization_part from './components/visualization-part.vue'
+import commandlistPart from './components/commandlistPart.vue'
+import headerPart from './components/headerPart.vue'
+import hintPart from './components/hintPart.vue'
+import questPart from './components/questPart.vue'
+import terminalPart from './components/terminalPart.vue'
+import visualizationPart from './components/visualizationPart.vue'
 </script>
 
 <template>
   <div class="bg-background-primary h-screen">
     <!--header-->
     <div id="header" class="bg-background-secondary content-center h-[6%] p-1">
-      <header_part />
+      <headerPart />
     </div>
     <!--main-->
     <div id="main" class="h-[94%] grid grid-cols-3 gap-3 p-3">
       <!--Topic and Command List-->
       <div class="bg-background-secondary inline-block h-full rounded-lg">
         <section id="quest" class="h-2/3 m-3">
-          <quest_part />
+          <questPart />
         </section>
         <hr class="border-text-line border" />
         <section id="cmdlist" class="h-1/3">
-          <commandlist_part />
+          <commandlistPart />
         </section>
       </div>
       <!--Terminal and Hint-->
       <div class="bg-background inline-block h-full py-2 rounded-lg">
         <section id="terminal" class="h-3/5">
-          <terminal_part />
+          <terminalPart />
         </section>
         <section id="hint" class="h-2/5">
-          <hint_part />
+          <hintPart />
         </section>
       </div>
       <!--Visualization-->
@@ -40,7 +40,7 @@ import visualization_part from './components/visualization-part.vue'
         <div class="bg-border rounded-xl h-[90%] px-3 py-6">
           <div class="bg-background rounded-xl h-full px-1 py-6">
             <section id="visualization" class="bg-background-primary h-full">
-              <visualization_part />
+              <visualizationPart />
             </section>
           </div>
         </div>