feat(courselibrary): 优化课程标签与专业模式表单交互

- 修改课程标签选择器占位符为空并移除标签计数显示
- 为课程名称输入框增加50字长度限制及字数提示
- 为资源归属和受众选择器添加搜索过滤功能
- 调整课程封面图片样式以适应容器尺寸
- 为课程价值和简介输入框增加字数限制与提示
- 更新上传组件支持JPG格式文件校验
- 添加头像上传区域样式和上传提示文字

src/hooks/useUpload.js

@@ -53,7 +53,7 @@ export function useUpload() {
 
   // 上传前检查
   const beforeUpload = (file) => {
-    const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
+    const isJpgOrPng = file.type === "image/jpg" || file.type === "image/png";
     if (!isJpgOrPng) {
       $message.error("You can only upload JPG file!");
     }

src/views/courselibrary/components/courseTag.vue

@@ -10,7 +10,7 @@
       reserve-keyword
       :remote-method="debouncedSearch"
       :loading="loading"
-      placeholder="回车创建新标签"
+      placeholder=" "
       :no-data-text="'无此标签，按回车键创建'"
       @remove-tag="handleTagRemove"
       @change="handleSelectionChange"
@@ -28,7 +28,7 @@
       />
     </el-select>
     <!-- 添加标签计数显示 -->
-    <div class="tag-count">{{ selectedTags.length }}/5</div>
+    <!--    <div class="tag-count">{{ selectedTags.length }}/5</div>-->
   </div>
 </template>
 

src/views/courselibrary/components/professionalmode.vue

@@ -174,7 +174,9 @@ onMounted(() => {
               >
                 <el-input
                   v-model="formState.name"
-                  placeholder="请输入课程名称"
+                  placeholder="请输入课程名称，并限制在50个字以内"
+                  maxlength="50"
+                  show-word-limit
                 />
               </el-form-item>
 
@@ -206,7 +208,8 @@ onMounted(() => {
                   :render-after-expand="false"
                   v-model="formState.orgName"
                   :props="{ value: 'id', label: 'name', children: 'children' }"
-                  placeholder="请选择资源归属"
+                  placeholder="输入关键字搜索资源归属"
+                  filterable
                 />
               </el-form-item>
 
@@ -262,9 +265,10 @@ onMounted(() => {
               <el-form-item label="受众" prop="crowds">
                 <el-select
                   v-model="formState.crowds"
-                  placeholder="请选择受众"
+                  placeholder="输入关键字搜索受众"
                   multiple
                   value-key="id"
+                  filterable
                 >
                   <el-option
                     v-for="item in userGroupList"
@@ -313,7 +317,7 @@ onMounted(() => {
                         v-if="formState.coverImg"
                         :src="formState.coverImg"
                         alt="avatar"
-                        style="width: 100%"
+                        style="width: 100%; height: 100%"
                       />
                       <div v-else class="text-center">
                         <Loading v-if="loading" class="w30" />
@@ -344,7 +348,9 @@ onMounted(() => {
                   type="textarea"
                   v-model="formState.courseValue"
                   :rows="3"
-                  placeholder="请输入课程价值"
+                  placeholder="请输入课程价值，并限制在200个字以内"
+                  show-word-limit
+                  maxlength="200"
                 />
               </el-form-item>
 
@@ -356,8 +362,10 @@ onMounted(() => {
                 <el-input
                   type="textarea"
                   v-model="formState.summary"
+                  show-word-limit
                   :rows="4"
-                  placeholder="请输入课程简介"
+                  placeholder="请输入课程简介,兵燹之灾255个字以内，此内容将在课程简介中进行展示，帮助学员更轻松地了解课程信息"
+                  maxlength="255"
                 />
               </el-form-item>
             </div>
@@ -514,5 +522,19 @@ onMounted(() => {
   :deep(.el-textarea) {
     width: 95%;
   }
+  :deep(.avatar-uploader .el-upload--picture-card) {
+    width: 180px;
+    height: 100px;
+    border: 1px solid #d9d9d9;
+    overflow: hidden;
+  }
+  .upload-hint {
+    font-weight: 400;
+    font-size: 8px;
+    color: rgba(0, 0, 0, 0.2);
+    line-height: 11px;
+    //letter-spacing: 5px;
+    font-style: normal;
+  }
 }
 </style>