Enhance ManageListRemote.vue: 更新输入框占位符，强制设置输入框最大长度，改进教师与创作者选项标签，并应用自定义滚动条样式以提升界面一致性。

src/views/course/ManageListRemote.vue

@@ -5,14 +5,15 @@
         <div class="filter-fields">
           <el-form-item>
             <el-input
+              type="text"
               placeholder="课程名称"
               v-model="params.name"
               clearable
-              show-word-limit
+              maxlength="50"
             ></el-input>
           </el-form-item>
           <el-form-item>
-            <el-cascader placeholder="全部课程分类" clearable v-model="sysTypeList" :props="defaultTypeProps"
+            <el-cascader placeholder="课程分类" clearable v-model="sysTypeList" :props="defaultTypeProps"
               :options="sysTypeListMap"></el-cascader>
           </el-form-item>
           <el-form-item class="teacher-filter">
@@ -27,7 +28,7 @@
                 reserve-keyword
                 placeholder="授课教师"
                 :multiple-limit="5"
-                collapse-tags
+                maxlength="50"
                 :remote-method="remoteSearchTeacher"
                 :loading="teacherLoading"
                 @change="handleTeacherChange"
@@ -36,9 +37,12 @@
                 <el-option
                   v-for="item in teacherOptions"
                   :key="item.teacherId"
-                  :label="formatTeacherLabel(item)"
+                  :label="item.teacherName"
                   :value="item.teacherId"
-                ></el-option>
+                >
+                  <span>{{ item.teacherName }}</span>
+                  <span v-if="item.teacherCode" class="option-code">（{{ item.teacherCode }}）</span>
+                </el-option>
               </el-select>
             </div>
           </el-form-item>
@@ -78,7 +82,7 @@
       >
         <div class="filter-fields">
           <el-form-item>
-            <el-select v-model="params.enabled" placeholder="全部启用停用状态" clearable>
+            <el-select v-model="params.enabled" placeholder="启停用状态" clearable>
               <el-option label="启用" :value="true"></el-option>
               <el-option label="停用" :value="false"></el-option>
             </el-select>
@@ -94,6 +98,7 @@
               placeholder="全部资源归属"
               clearable
               filterable
+              maxlength="200"
               v-model="resOwner"
               :props="defaultProps"
               :options="resOwnerListMap"
@@ -110,7 +115,7 @@
               reserve-keyword
               :multiple-limit="5"
               placeholder="创建人"
-              collapse-tags
+              maxlength="50"
               :remote-method="remoteSearchCreator"
               :loading="creatorLoading"
               @change="handleCreatorChange"
@@ -119,9 +124,12 @@
               <el-option
                 v-for="item in creatorOptions"
                 :key="item.userId"
-                :label="formatCreatorLabel(item)"
+                :label="item.name"
                 :value="item.userId"
-              ></el-option>
+              >
+                <span>{{ item.name }}</span>
+                <span v-if="item.code" class="option-code">（{{ item.code }}）</span>
+              </el-option>
             </el-select>
           </el-form-item>
           <el-form-item>
@@ -201,7 +209,7 @@
             {{ scope.row.published == true ? '已发布' : '未发布' }}
           </template>
         </el-table-column>
-        <el-table-column label="启用停用状态" min-width="130" align="center" sortable>
+        <el-table-column label="启停用状态" min-width="130" align="center" sortable>
           <template slot-scope="scope">
             {{ scope.row.enabled == true ? '启用' : '停用' }}
           </template>
@@ -544,6 +552,7 @@ export default {
       },
       extendRefId: '',
       extendRefType: '',
+      scrollbarStyleApplied: false,
     };
   },
   created() {
@@ -578,23 +587,41 @@ export default {
     //已经加载tree的情况下，不需要再单独的加载一次
     this.loadResOwners();
     this.loadSysTypes();
-    document.querySelector('#app').style.overflow = 'hidden';
+    document.querySelector('#app').style.overflowX = 'hidden';
+    this.applyAppScrollbarStyle();
 
   },
   methods: {
     toggleAdvancedFilter() {
       this.showAdvancedFilter = !this.showAdvancedFilter;
     },
+    applyAppScrollbarStyle() {
+      if (this.scrollbarStyleApplied || typeof document === 'undefined') return;
+      if (document.getElementById('app-scrollbar-style')) {
+        this.scrollbarStyleApplied = true;
+        return;
+      }
+      const style = document.createElement('style');
+      style.id = 'app-scrollbar-style';
+      style.innerHTML = `
+        #app::-webkit-scrollbar {
+          width: 6px;
+          height: 8px;
+        }
+        #app::-webkit-scrollbar-thumb {
+          border-radius: 6px;
+          background-color: rgb(78, 166, 255);
+        }
+      `;
+      document.head.appendChild(style);
+      this.scrollbarStyleApplied = true;
+    },
     async remoteSearchTeacher(keyword) {
       const query = (keyword || '').trim();
       if (!query || query.length <= 1) {
         this.teacherOptions = [];
         return;
       }
-      if (query.length > 50) {
-        this.$message.warning('超过50个字的内容不让输入');
-        return;
-      }
       this.teacherLoading = true;
       try {
         const res = await apiTeacher.findByNameNew(query);
@@ -639,10 +666,6 @@ export default {
         this.creatorOptions = [];
         return;
       }
-      if (query.length > 50) {
-        this.$message.warning('创建人搜索最多50个字符');
-        return;
-      }
       this.creatorLoading = true;
       try {
         const res = await apiUserbasic.selectUser(query);
@@ -1135,17 +1158,14 @@ export default {
     },
     // 课程查询
     searchData(pageReset) {
-      if (this.params.name && this.params.name.length > 50) {
-        this.$message.warning('课程名称最多50个字符');
-        return;
-      }
       if (pageReset) {
         this.page.pageIndex = 1;
       }
       if (!this.validateLearningTimeRange()) {
         return;
       }
-      console.log('apiCourse', apiCourse)
+      console.log('apiCourse', apiCourse);
+      console.log('buildQueryParams', this.buildQueryParams());
       const query = this.buildQueryParams();
       apiCourse.managePage(query).then(rs => {
         if (rs.status == 200) {
@@ -1351,9 +1371,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+#app::-webkit-scrollbar {
+  width: 6px;
+  height: 8px;
+}
+
+#app::-webkit-scrollbar-thumb {
+  border-radius: 6px;
+  background-color: rgb(78, 166, 255);
+}
+
 .manage-list-remote {
   background-color: #fff;
-  overflow: hidden;
+  // overflow: hidden;
 }
 .sou {
   padding: 0 0 0 0px !important;
@@ -1387,10 +1417,15 @@ export default {
 .filter-form {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
+  // align-items: center;
   margin-bottom: 10px;
 }
 
+.option-code {
+  margin-left: 4px;
+  color: #999;
+}
+
 .filter-form .el-form-item {
   margin-right: 10px;
   margin-bottom: 0;
@@ -1418,7 +1453,6 @@ export default {
 .filter-form--advanced .filter-fields {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
 }
 
 
@@ -1426,12 +1460,6 @@ export default {
   margin-left: 20px;
 }
 
-.filter-actions {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
 .filter-actions--inline {
   padding-top: 0;
 }