fix(cfc-web): knowledge layout — wrap body, add status filter dropdown

cfc-web/src/views/admin/knowledge/index.vue

@@ -1,71 +1,77 @@
 <template>
   <div class="knowledge-manage admin-page">
-    <el-row :gutter="20">
-      <!-- 左侧筛选面板 -->
-      <el-col :span="5">
-        <el-card>
-          <div slot="header"><span>维度筛选</span></div>
-          <el-tree
-            :data="dimensionTree"
-            :props="{ label: 'dimensionName', children: 'children' }"
-            node-key="id"
-            default-expand-all
-            highlight-current
-            @node-click="handleDimensionClick"
-          />
-        </el-card>
-        <el-card style="margin-top: 12px">
-          <div slot="header"><span>标签筛选</span></div>
-          <div style="padding: 4px 0">
-            <el-tag
-              v-for="tag in tags"
-              :key="tag.id"
-              :type="selectedTagId === tag.id ? 'primary' : 'info'"
-              style="cursor: pointer; margin: 2px"
-              @click="handleTagClick(tag)"
-            >
-              {{ tag.tagName }}
-            </el-tag>
-          </div>
-          <el-button v-if="selectedTagId" type="text" size="small" @click="clearTagFilter">清除筛选</el-button>
-        </el-card>
-      </el-col>
+    <!-- 左: 筛选面板 + 右: 列表 -->
+    <div class="knowledge-body">
+      <el-row :gutter="20">
+        <!-- 左侧筛选面板 -->
+        <el-col :span="5">
+          <el-card>
+            <div slot="header"><span>维度筛选</span></div>
+            <el-tree
+              :data="dimensionTree"
+              :props="{ label: 'dimensionName', children: 'children' }"
+              node-key="id"
+              default-expand-all
+              highlight-current
+              @node-click="handleDimensionClick"
+            />
+          </el-card>
+          <el-card style="margin-top: 12px">
+            <div slot="header"><span>标签筛选</span></div>
+            <div style="padding: 4px 0">
+              <el-tag
+                v-for="tag in tags"
+                :key="tag.id"
+                :type="selectedTagId === tag.id ? 'primary' : 'info'"
+                style="cursor: pointer; margin: 2px"
+                @click="handleTagClick(tag)"
+              >
+                {{ tag.tagName }}
+              </el-tag>
+            </div>
+            <el-button v-if="selectedTagId" type="text" size="small" @click="clearTagFilter">清除筛选</el-button>
+          </el-card>
+        </el-col>
 
-      <!-- 右侧知识库列表 -->
-      <el-col :span="19">
-        <el-card>
-          <div slot="header">
-            <span>知识库管理</span>
-            <el-button style="float: right" type="primary" size="small" @click="handleCreate">+ 新增知识</el-button>
-          </div>
+        <!-- 右侧知识库列表 -->
+        <el-col :span="19">
+          <el-card>
+            <div slot="header" class="admin-page-header">
+              <span class="admin-page-title">知识库管理</span>
+              <div class="admin-page-actions">
+                <el-select v-model="filterStatus" placeholder="状态" size="mini" clearable @change="handleSearch">
+                  <el-option label="全部" value="" />
+                  <el-option label="启用" value="1" />
+                  <el-option label="禁用" value="0" />
+                </el-select>
+                <el-input v-model="searchKeyword" placeholder="搜索标题/内容" prefix-icon="el-icon-search" style="width: 220px" size="mini" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
+                <el-button type="primary" size="mini" @click="handleSearch">搜索</el-button>
+                <el-button size="mini" @click="resetSearch">重置</el-button>
+                <el-button size="mini" type="primary" @click="handleCreate">+ 新增知识</el-button>
+              </div>
+            </div>
 
-          <!-- 搜索栏 -->
-          <div style="margin-bottom: 16px; display: flex; gap: 12px">
-            <el-input v-model="searchKeyword" placeholder="搜索标题/内容" prefix-icon="el-icon-search" style="width: 300px" clearable @keyup.enter.native="handleSearch" />
-            <el-button type="primary" @click="handleSearch">搜索</el-button>
-            <el-button @click="resetSearch">重置</el-button>
-          </div>
+            <knowledge-table
+              :list="knowledgeList"
+              :loading="knowledgeLoading"
+              @edit="handleEdit"
+              @delete="handleDelete"
+              @bind-dimension="handleBindDimension"
+              @bind-tag="handleBindTag"
+            />
 
-          <knowledge-table
-            :list="knowledgeList"
-            :loading="knowledgeLoading"
-            @edit="handleEdit"
-            @delete="handleDelete"
-            @bind-dimension="handleBindDimension"
-            @bind-tag="handleBindTag"
-          />
-
-          <el-pagination
-            style="margin-top: 16px; text-align: right"
-            :current-page="page"
-            :page-size="size"
-            :total="knowledgeTotal"
-            layout="total, prev, pager, next"
-            @current-change="handlePageChange"
-          />
-        </el-card>
-      </el-col>
-    </el-row>
+            <el-pagination
+              style="margin-top: 16px; text-align: right"
+              :current-page="page"
+              :page-size="size"
+              :total="knowledgeTotal"
+              layout="total, prev, pager, next"
+              @current-change="handlePageChange"
+            />
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
 
     <!-- 新增/编辑知识弹窗 -->
     <knowledge-dialog
@@ -110,6 +116,7 @@ export default {
     return {
       dimensionTree: [],
       searchKeyword: '',
+      filterStatus: '',
       page: 1,
       size: 20,
       // 筛选
@@ -151,6 +158,7 @@ export default {
       if (this.searchKeyword) params.keyword = this.searchKeyword
       if (this.selectedDimensionId) params.dimensionId = this.selectedDimensionId
       if (this.selectedTagId) params.tagId = this.selectedTagId
+      if (this.filterStatus) params.status = this.filterStatus
       this.fetchKnowledgeList(params)
     },
     handleDimensionClick(node) {
@@ -174,6 +182,7 @@ export default {
     },
     resetSearch() {
       this.searchKeyword = ''
+      this.filterStatus = ''
       this.selectedDimensionId = null
       this.selectedTagId = null
       this.page = 1
@@ -255,3 +264,18 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+/* admin-page display:flex;flex-direction:column 需要内部子元素填满宽度 */
+.knowledge-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+  overflow: auto;
+}
+.knowledge-body .el-row {
+  width: 100%;
+}
+</style>