style(GradeClassSelector): 优化样式和交互细节

- 调整表单项宽度为100%
- 修改未选择班级时的文字颜色
- 更新下拉箭头图标颜色
- 添加无班级时的提示信息
- 调整选中状态的指示条宽度

src/components/common/GradeClassSelector.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="grade-class-selector">
     <div class="form-row">
-      <div class="form-item required" style="flex: 2;">
+      <div class="form-item required" style="width: 100%;">
         <label class="form-label">{{ lang.ssClass }}</label>
         <div class="class-selector">
           <div class="select-input" @click="toggleDropdown">
-            <span class="input">{{ getSelectedClassName() || lang.ssSelectClass }}</span>
+            <span class="input" :style="{'color': getSelectedClassName() ? '#303133' : '#c0c4cc'}">{{ getSelectedClassName() || lang.ssSelectClass }}</span>
             <span class="select-arrow">
               <svg v-if="!dropdownVisible" t="1776672009773" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="4735" xmlns:xlink="http://www.w3.org/1999/xlink" width="12"
                 height="12">
                 <path
                   d="M562.5 771c-14.3 14.3-33.7 27.5-52 23.5-18.4 3.1-35.7-11.2-50-23.5L18.8 327.3c-22.4-22.4-22.4-59.2 0-81.6s59.2-22.4 81.6 0L511.5 668l412.1-422.3c22.4-22.4 59.2-22.4 81.6 0s22.4 59.2 0 81.6L562.5 771z"
-                  p-id="4736" fill="#909399" transform="rotate(180 512 512)"></path>
+                  p-id="4736" fill="#c0c4cc" transform="rotate(180 512 512)"></path>
               </svg>
               <svg v-else t="1776672009773" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="4735" xmlns:xlink="http://www.w3.org/1999/xlink" width="12"
                 height="12">
                 <path
                   d="M562.5 771c-14.3 14.3-33.7 27.5-52 23.5-18.4 3.1-35.7-11.2-50-23.5L18.8 327.3c-22.4-22.4-22.4-59.2 0-81.6s59.2-22.4 81.6 0L511.5 668l412.1-422.3c22.4-22.4 59.2-22.4 81.6 0s22.4 59.2 0 81.6L562.5 771z"
-                  p-id="4736" fill="#909399"></path>
+                  p-id="4736" fill="#c0c4cc"></path>
               </svg>
             </span>
           </div>
@@ -41,6 +41,7 @@
                     :class="{ active: selectedClasses.includes(classItem.id) }" @click="toggleClass(classItem.id)">
                     {{ classItem.name }}
                   </div>
+                  <div v-if="filteredClassOptions.length === 0" class="no-class">暂无班级</div>
                 </div>
               </div>
             </div>
@@ -300,7 +301,7 @@ export default {
   position: absolute;
   top: 50%;
   left: 0;
-  width: 2px;
+  width: 3px;
   height: 85%;
   transform: translateY(-50%);
   border-radius: 2px;
@@ -327,4 +328,10 @@ export default {
   background-color: #FFF5E6;
   color: #FF9500;
 }
+
+.no-class {
+  padding: 10px 15px;
+  text-align: center;
+  color: #c0c4cc;
+}
 </style>