From 2b444b68e6a225935100ed3c2f275c56a736185c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Thu, 11 Dec 2025 15:32:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(courselibrary):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=AF=BE=E7=A8=8B=E6=A0=87=E7=AD=BE=E4=B8=8E=E4=B8=93=E4=B8=9A?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E8=A1=A8=E5=8D=95=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改课程标签选择器占位符为空并移除标签计数显示
- 为课程名称输入框增加50字长度限制及字数提示
- 为资源归属和受众选择器添加搜索过滤功能
- 调整课程封面图片样式以适应容器尺寸
- 为课程价值和简介输入框增加字数限制与提示
- 更新上传组件支持JPG格式文件校验
- 添加头像上传区域样式和上传提示文字
---
 src/hooks/useUpload.js                        |  2 +-
 .../courselibrary/components/courseTag.vue    |  4 +--
 .../components/professionalmode.vue           | 34 +++++++++++++++----
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/hooks/useUpload.js b/src/hooks/useUpload.js
index db435ac8..a4678d5f 100644
--- a/src/hooks/useUpload.js
+++ b/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!");
     }
diff --git a/src/views/courselibrary/components/courseTag.vue b/src/views/courselibrary/components/courseTag.vue
index b499368e..f8b7ae71 100644
--- a/src/views/courselibrary/components/courseTag.vue
+++ b/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>
 
diff --git a/src/views/courselibrary/components/professionalmode.vue b/src/views/courselibrary/components/professionalmode.vue
index 82b703e5..01c07d64 100644
--- a/src/views/courselibrary/components/professionalmode.vue
+++ b/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>