refactor(layout): 优化多个组件的布局和样式

-调整了多个组件的输入框、按钮等元素的布局
- 优化了部分样式，如增加了文本对齐方式
- 移除了部分未使用的注释代码- 统一了部分样式属性，如按钮类型和大小

src/views/knowledge/detail/components/documentDetail/DocumentDrawer.vue

@@ -20,9 +20,9 @@
             {{ descriptions.dataset.segmentedMode | filterSegmentedMode }}
           </el-tag>
         </div>
-        <el-button class="line-button ml40" size="medium" icon="el-icon-plus">
+        <!--        <el-button class="line-button ml40" size="medium" icon="el-icon-plus">-->
-          新增分段
+        <!--          新增分段-->
-        </el-button>
+        <!--        </el-button>-->
 
         <!--        <el-button class="line-button ml10" size="medium">元数据标注</el-button>-->
 

src/views/knowledge/detail/index.vue

@@ -1,61 +1,63 @@
 <template>
   <div class=" render-container">
     <div class="clearfix flex align-items-c justify-content-b ">
-      <div class="hover-back  mr5">
+      <div class=" flex align-items-c j">
-        <el-icon
+        <div class="hover-back  mr5">
-          class="el-icon-arrow-left"
-          style="font-size: 24px;cursor: pointer"
-          @click.native="$router.history.go(-1)"
-        ></el-icon>
-      </div>
-
-      <img
-        :src="knowledgeImage ? knowledgeImage : knowledgePng_1"
-        class="header-icon"
-      />
-      <div class="ml20" style="flex:1">
-        <div class="flex align-items-c">
-          <div class="mr20 header" v-if="!editKnowledge">
-            {{ knowledgeName ? knowledgeName : '' }}
-          </div>
-          <el-input
-            class="mr20 w400"
-            size="small"
-            v-else
-            v-model="copyKnowledgeName"
-            >{{ knowledgeName }}</el-input
-          >
           <el-icon
-            class="fs16 el-icon-edit-outline cursor-pointer"
+            class="el-icon-arrow-left"
-            @click.native="editKnowledgeName"
+            style="font-size: 24px;cursor: pointer"
-            v-if="!editKnowledge"
+            @click.native="$router.history.go(-1)"
-          />
+          ></el-icon>
-          <div v-else>
+        </div>
-            <el-button
+
-              type="primary"
+        <img
-              size="medium"
+          :src="knowledgeImage ? knowledgeImage : knowledgePng_1"
-              class="render-button"
+          class="header-icon"
-              @click="saveKnowledgeName"
+        />
-              >保存</el-button
+        <div class="ml20" style="flex:1">
-            >
+          <div class="flex align-items-c">
-            <el-button
+            <div class="mr20 header" v-if="!editKnowledge">
-              size="medium"
+              {{ knowledgeName ? knowledgeName : '' }}
-              class="render-button"
+            </div>
-              @click="cancelKnowledgeName"
+            <el-input
-              >取消</el-button
+              class="mr20 w200"
-            >
+              size="small"
-          </div>
+              v-else
-          <span class="segment-content">{{
+              v-model="copyKnowledgeName"
-            segmentedMode | filterSegmentedMode
+              >{{ knowledgeName }}</el-input
-          }}</span>
+            >
+            <el-icon
+              class="fs16 el-icon-edit-outline cursor-pointer"
+              @click.native="editKnowledgeName"
+              v-if="!editKnowledge"
+            />
+            <div v-else>
+              <el-button
+                type="primary"
+                size="medium"
+                class="render-button"
+                @click="saveKnowledgeName"
+                >保存</el-button
+              >
+              <el-button
+                size="medium"
+                class="render-button"
+                @click="cancelKnowledgeName"
+                >取消</el-button
+              >
+            </div>
+            <span class="segment-content">{{
+              segmentedMode | filterSegmentedMode
+            }}</span>
+          </div>
+          <p class="mt10 fs14" style="line-height: 20px">
+            描述：{{ knowledgeDesc }}
+          </p>
+          <!--        <p class="mt10 fs14" style="line-height: 20px">分段模式：{{ segmentedMode | filterSegmentedMode }}</p>-->
         </div>
-        <p class="mt10 fs14" style="line-height: 20px">
-          描述：{{ knowledgeDesc }}
-        </p>
-        <!--        <p class="mt10 fs14" style="line-height: 20px">分段模式：{{ segmentedMode | filterSegmentedMode }}</p>-->
       </div>
 
-      <div>
+      <div style="flex:1" class="text-right">
         <!--        <el-button type="primary" size="medium" class="normal-button" @click="jumpEditKnowledge">修改知识库</el-button>-->
         <el-button
           type="primary"

src/views/rules/Index.vue

@@ -268,6 +268,7 @@ export default {
   <div class="rules-container render-container">
     <div class="card-body flex justify-content-b">
       <el-form
+        style="flex:1"
         :model="form"
         label-width="100px"
         size="small"
@@ -315,7 +316,7 @@ export default {
         </el-form-item>
         <!-- 功能按钮组： 查询、重置、新增规则 -->
       </el-form>
-      <div class="mt30">
+      <div class="mt30" style="max-width: 530px;flex:1;text-align: right">
         <el-button size="medium" type="primary" @click="handleQuery"
           >查询</el-button
         >

src/views/track/Index.vue

@@ -289,7 +289,7 @@ export default {
         <!-- 搜索按钮 -->
       </el-form>
 
-      <div class="mt30 text-right">
+      <div class="mt30 text-right w200">
         <el-button type="primary" size="medium" @click="handleSearch"
           >查询</el-button
         >