fix:样式

frontend/src/views/Setting/index.vue

@@ -180,19 +180,23 @@
                     </div>
                 </div>
           </div>
+    </div>
       <div class="text-center mt-8">
         <button class="bg-gradient-to-r from-primary" @click="saveSetting">
           保存
         </button>
       </div>
-    </div>
   </div>
 </template>
 
 <script setup>
 // 这里可以添加Vue组件的逻辑
 import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { onMounted, watch } from 'vue';
 
+const route = useRoute();
+const router = useRouter();
 const folderPath = ref('');
 const activeIndex = ref(0);
 const formData = ref({
@@ -292,6 +296,37 @@ const downList = ref([
   { label: '左右移', value: '3' },
 ]);
 
+// Watch for changes in the route query parameter 'type'
+watch(() => route.query.type, (newType) => {
+  if (newType) {
+    // Convert the query parameter to a number and update activeIndex
+    const typeValue = parseInt(newType);
+    if (!isNaN(typeValue) && typeValue >= 0 && typeValue <= 3) {
+      activeIndex.value = typeValue;
+    }
+  }
+}, { immediate: true });
+
+// Update the URL when activeIndex changes
+watch(() => activeIndex.value, (newIndex) => {
+  router.push({
+    query: {
+      ...route.query,
+      type: newIndex.toString()
+    }
+  });
+});
+
+// Initialize activeIndex based on the route query on component mount
+onMounted(() => {
+  if (route.query.type) {
+    const typeValue = parseInt(route.query.type);
+    if (!isNaN(typeValue) && typeValue >= 0 && typeValue <= 3) {
+      activeIndex.value = typeValue;
+    }
+  }
+});
+
 const selectFolder = () => {
   // 这里可以添加选择文件夹的逻辑
   // 由于浏览器安全限制，网页应用无法直接访问本地文件系统
@@ -380,6 +415,7 @@ body {
   padding: 30px;
   width: 800px;
   margin: 0 auto;
+  height: 306px;
 }
 .form-item {
   margin-bottom: 24px;
@@ -418,7 +454,6 @@ body {
 }
 .from-primary{
     width: 150px;
-    margin-top: 30px;
     height: 40px;
     color: #FFFFFF;
     background: linear-gradient( 135deg, #2FB0FF 0%, #B863FB 100%);
@@ -452,4 +487,10 @@ body {
     height: 16px;
   }
 }
+.mt-8{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 30px;
+}
 </style>