diff --git a/src/components/ThemeSwitch.vue b/src/components/ThemeSwitch.vue
index db71cf0..d5471c3 100644
--- a/src/components/ThemeSwitch.vue
+++ b/src/components/ThemeSwitch.vue
@@ -7,7 +7,7 @@
 
       <!-- sun icon -->
       <svg
-        class="swap-off fill-current w-10 h-10"
+        class="swap-off h-10 w-10 fill-current"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
       >
@@ -18,7 +18,7 @@
 
       <!-- moon icon -->
       <svg
-        class="swap-on fill-current w-10 h-10"
+        class="swap-on h-10 w-10 fill-current"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
       >
diff --git a/src/components/bottom-panel/BottomPanel.vue b/src/components/bottom-panel/BottomPanel.vue
index 612b611..300585b 100644
--- a/src/components/bottom-panel/BottomPanel.vue
+++ b/src/components/bottom-panel/BottomPanel.vue
@@ -31,15 +31,15 @@ function toggleCanvasFullScreen() {
 }
 </script>
 <template>
-  <div class="bottom-panel h-[300px] bg-[#17171e] pb-2 px-4 text-white flex flex-col">
+  <div class="bottom-panel flex h-[300px] flex-col bg-[#17171e] px-4 pb-2 text-white">
     <!-- 刻度尺 -->
-    <div class="flex border-y justify-between border-[#272836] h-[40px] items-center gap-2">
+    <div class="flex h-[40px] items-center justify-between gap-2 border-y border-[#272836]">
       <div class="flex gap-2">
-        <button class="tooltip btn-control" data-tip="撤销"><IconUndo /></button>
-        <button class="tooltip btn-control" data-tip="恢复"><IconRedo /></button>
-        <button class="tooltip btn-control" data-tip="分割"><IconCut /></button>
-        <button class="tooltip btn-control" data-tip="删除"><IconDelete /></button>
-        <button class="tooltip btn-control" data-tip="复制"><IconCopy /></button>
+        <button class="btn-control tooltip" data-tip="撤销"><IconUndo /></button>
+        <button class="btn-control tooltip" data-tip="恢复"><IconRedo /></button>
+        <button class="btn-control tooltip" data-tip="分割"><IconCut /></button>
+        <button class="btn-control tooltip" data-tip="删除"><IconDelete /></button>
+        <button class="btn-control tooltip" data-tip="复制"><IconCopy /></button>
       </div>
       <div class="flex items-center gap-2">
         <button class="btn-control" @click="skipVideo(-5)"><IconPrev /></button>
@@ -53,7 +53,7 @@ function toggleCanvasFullScreen() {
         <span>{{ `${formatSeconds(currentTime)} / ${formatSeconds(duration)}` }}</span>
       </div>
       <div class="flex gap-4">
-        <button class="tooltip btn-control" data-tip="放大"><IconZoomout /></button>
+        <button class="btn-control tooltip" data-tip="放大"><IconZoomout /></button>
         <div class="flex items-center gap-2">
           <input
             type="range"
@@ -64,7 +64,7 @@ function toggleCanvasFullScreen() {
           />
           {{ '40%' }}
         </div>
-        <button class="tooltip btn-control" data-tip="缩小"><IconZoomin /></button>
+        <button class="btn-control tooltip" data-tip="缩小"><IconZoomin /></button>
         <button class="tooltip" data-tip="适配到合适的大小">
           <IconZoomToFit class="btn-control" />
         </button>
diff --git a/src/components/bottom-panel/TrackList.vue b/src/components/bottom-panel/TrackList.vue
index 279bd83..1c9fbf7 100644
--- a/src/components/bottom-panel/TrackList.vue
+++ b/src/components/bottom-panel/TrackList.vue
@@ -17,7 +17,7 @@ const videoTrackList = computed<GetThumbnailBySeekOptions[]>(() => {
 })
 </script>
 <template>
-  <div class="grid content-center flex-1 text-center h-full overflow-x-scroll">
+  <div class="grid h-full flex-1 content-center overflow-x-scroll text-center">
     <div class="element-track">
       <div class="flex gap-2 pl-[10px]">
         <IconText />
diff --git a/src/components/left-panel/LeftPanel.vue b/src/components/left-panel/LeftPanel.vue
index efa9112..6379c8f 100644
--- a/src/components/left-panel/LeftPanel.vue
+++ b/src/components/left-panel/LeftPanel.vue
@@ -9,20 +9,20 @@ const setActiveType = (id: number) => {
 }
 </script>
 <template>
-  <div class="left-box w-[400px] flex bg-[#272836]">
-    <div class="w-[60px] bg-[#1c1c26] flex flex-col items-center">
+  <div class="left-box flex w-[400px] bg-[#272836]">
+    <div class="flex w-[60px] flex-col items-center bg-[#1c1c26]">
       <div
         v-for="(item, index) in typeList"
         @click="setActiveType(item.id)"
         :key="index"
-        class="h-[60px] text-sm w-[60px] hover:bg-[#272836] text-[#ababc0] hover:text-[white] select-none flex flex-col justify-center items-center cursor-pointer"
+        class="flex h-[60px] w-[60px] cursor-pointer select-none flex-col items-center justify-center text-sm text-[#ababc0] hover:bg-[#272836] hover:text-[white]"
         :class="{ 'bg-[#272836] text-[white]': activeType === item.id }"
       >
         <component :is="item.icon" />
         {{ item.name }}
       </div>
     </div>
-    <div class="text-white p-4 flex-1">
+    <div class="flex-1 p-4 text-white">
       <VideoList />
     </div>
   </div>
diff --git a/src/components/left-panel/VideoList.vue b/src/components/left-panel/VideoList.vue
index e49c075..c54ba72 100644
--- a/src/components/left-panel/VideoList.vue
+++ b/src/components/left-panel/VideoList.vue
@@ -42,7 +42,7 @@ const pause = (e: MouseEvent) => {
     <p>视频素材：（开发中）</p>
     <div class="grid grid-cols-2 gap-2">
       <div
-        class="cursor-pointer video-item rounded-md relative"
+        class="video-item relative cursor-pointer rounded-md"
         v-for="item in 10"
         :key="item"
         @click="addVideo(movie)"
diff --git a/src/components/player/ContextMenu.vue b/src/components/player/ContextMenu.vue
index c4afd88..baba2b7 100644
--- a/src/components/player/ContextMenu.vue
+++ b/src/components/player/ContextMenu.vue
@@ -18,10 +18,10 @@ defineExpose({
 <template>
   <div
     ref="contextMenu"
-    class="context-menu-container w-[200px] flex flex-col gap-1 absolute bg-[#1E1E29] border-[#505067] border text-[#D5D5E1] p-2"
+    class="context-menu-container absolute flex w-[200px] flex-col gap-1 border border-[#505067] bg-[#1E1E29] p-2 text-[#D5D5E1]"
   >
     <button
-      class="hover:bg-[#3B3B4F] text-left p-1 rounded-sm flex justify-between"
+      class="flex justify-between rounded-sm p-1 text-left hover:bg-[#3B3B4F]"
       v-for="(item, index) in menuList"
       :key="index"
       @click="item.callback"
diff --git a/src/views/main-page.vue b/src/views/main-page.vue
index ffe2bae..ed74b09 100644
--- a/src/views/main-page.vue
+++ b/src/views/main-page.vue
@@ -72,7 +72,7 @@ onMounted(() => {
         </button>
         <dialog id="testModal" class="modal">
           <div class="modal-box">
-            <h3 class="font-bold text-lg">Hello!</h3>
+            <h3 class="text-lg font-bold">Hello!</h3>
             <p class="py-4">敬请期待，功能正在开发中...</p>
             <div class="modal-action">
               <form method="dialog">