修改前端代码适应后端返回的数据格式

- 修改getShipCompanyListByPage方法适应后端返回的列表格式
- 添加allShipCompanyList存储完整的船公司列表
- 添加filterShipCompanyList方法实现本地过滤和分页
- 更新searchShipCompany和handleShipCompanyScroll方法使用本地过滤
- 更新最佳实践文档添加前后端数据结构不一致处理原则

.trae/rules/web-dev-best-practices.md

@@ -832,3 +832,7 @@ public class ShipCompanyService {
 4. **加载状态**：必须显示加载状态，提升用户体验
 5. **清空处理**：清空搜索条件时，应重置分页和列表
 6. **首次加载**：下拉框首次打开时，应加载第一页数据
+7. **前后端数据结构不一致处理**：当前后端数据结构不一致时，应优先修改前端代码来适应后端返回的数据格式，因为后端的方法可能被多个地方调用，修改后端可能影响其他功能。前端可以通过以下方式适应后端：
+   - 使用本地过滤和分页：如果后端返回全部数据，前端可以在本地进行过滤和分页
+   - 数据转换：在前端对后端返回的数据进行必要的转换
+   - 兼容性处理：使用可选链操作符（`?.`）和默认值处理可能的字段缺失

vue-frontend/src/components/PilotPlan.vue

@@ -302,6 +302,7 @@ export default {
       pilotPlans: [],
       portList: [],
       shipCompanyList: [],
+      allShipCompanyList: [],
       shipCompanyQuery: '',
       shipCompanyPage: 1,
       shipCompanyPageSize: 10,
@@ -414,20 +415,10 @@ export default {
     },
     getShipCompanyListByPage(query, page) {
       this.shipCompanyLoading = true;
-      this.$axios.get('/api/ship-company/list', {
-        params: {
-          companyName: query,
-          page: page,
-          pageSize: this.shipCompanyPageSize
-        }
-      })
+      this.$axios.get('/api/ship-company/list')
         .then(response => {
-          if (page === 1) {
-            this.shipCompanyList = response.data.content || [];
-          } else {
-            this.shipCompanyList = [...this.shipCompanyList, ...(response.data.content || [])];
-          }
-          this.shipCompanyHasMore = response.data.content && response.data.content.length >= this.shipCompanyPageSize;
+          this.allShipCompanyList = response.data || [];
+          this.filterShipCompanyList(query, page);
         })
         .catch(error => {
           console.error('获取船公司列表失败:', error);
@@ -437,13 +428,28 @@ export default {
           this.shipCompanyLoading = false;
         });
     },
+    filterShipCompanyList(query, page) {
+      let filteredList = this.allShipCompanyList;
+      
+      if (query && query.trim()) {
+        const queryLower = query.toLowerCase();
+        filteredList = filteredList.filter(company => 
+          company.companyName && company.companyName.toLowerCase().includes(queryLower)
+        );
+      }
+      
+      const startIndex = (page - 1) * this.shipCompanyPageSize;
+      const endIndex = startIndex + this.shipCompanyPageSize;
+      this.shipCompanyList = filteredList.slice(startIndex, endIndex);
+      this.shipCompanyHasMore = endIndex < filteredList.length;
+    },
     searchShipCompany(query) {
       this.shipCompanyQuery = query || '';
       this.shipCompanyPage = 1;
-      this.getShipCompanyListByPage(this.shipCompanyQuery, this.shipCompanyPage);
+      this.filterShipCompanyList(this.shipCompanyQuery, this.shipCompanyPage);
     },
     handleShipCompanyVisibleChange(visible) {
-      if (visible && !this.shipCompanyQuery) {
+      if (visible && !this.shipCompanyQuery && this.allShipCompanyList.length === 0) {
         this.shipCompanyPage = 1;
         this.getShipCompanyListByPage('', this.shipCompanyPage);
       }
@@ -451,7 +457,7 @@ export default {
     handleShipCompanyScroll() {
       if (this.shipCompanyHasMore && !this.shipCompanyLoading) {
         this.shipCompanyPage++;
-        this.getShipCompanyListByPage(this.shipCompanyQuery, this.shipCompanyPage);
+        this.filterShipCompanyList(this.shipCompanyQuery, this.shipCompanyPage);
       }
     },
     getPilotPlans() {