fix:将侧边栏兼容移动端

src/views/user/UserGroup.vue

@@ -141,20 +141,34 @@
           <el-input v-model="groupForm.auth" type="textarea" :rows="4" placeholder="请输入权限配置（JSON格式）" />
         </el-form-item>
         <el-form-item label="下一级用户组ID">
-          <div class="selector-field">
-            <div class="selector-info" v-if="selectedHigherGroupInfo">
-              <el-tag type="primary" effect="plain">
-                ID: {{ groupForm.higher_level_id }} - {{ selectedHigherGroupInfo.group_name || selectedHigherGroupInfo.name }}
-              </el-tag>
-            </div>
-            <div class="selector-actions">
-              <el-button type="primary" @click="groupSelectorVisible = true">
+          <el-input
+            v-if="selectedHigherGroupInfo"
+            :model-value="`${selectedHigherGroupInfo.Name || selectedHigherGroupInfo.name} (ID: ${groupForm.higher_level_id})`"
+            readonly
+            style="width: 100%"
+          >
+            <template #suffix>
+              <el-icon class="clear-icon" @click="clearHigherGroup"><Close /></el-icon>
+            </template>
+            <template #append>
+              <el-button @click="groupSelectorVisible = true">
                 <el-icon><Connection /></el-icon>
-                {{ groupForm.higher_level_id ? '更换用户组' : '选择用户组' }}
               </el-button>
-              <el-button v-if="groupForm.higher_level_id" @click="clearHigherGroup">清除</el-button>
-            </div>
-          </div>
+            </template>
+          </el-input>
+          <el-input
+            v-else
+            placeholder="请选择下一级用户组（可选）"
+            readonly
+            style="width: 100%"
+            @click="groupSelectorVisible = true"
+          >
+            <template #append>
+              <el-button @click="groupSelectorVisible = true">
+                <el-icon><Connection /></el-icon>
+              </el-button>
+            </template>
+          </el-input>
         </el-form-item>
         
         <!-- 用户组选择器 -->
@@ -274,7 +288,7 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Refresh, Edit, User, Delete, Connection } from '@element-plus/icons-vue'
+import { Plus, Refresh, Edit, User, Delete, Connection, Close } from '@element-plus/icons-vue'
 import { 
   getUserGroupList, 
   getUserGroupMemberList, 
@@ -747,22 +761,14 @@ onMounted(() => {
   100% { background-position: -200% 0; }
 }
 
-/* 选择器字段样式 */
-.selector-field {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 100%;
+/* 选择器清除图标样式 */
+.clear-icon {
+  cursor: pointer;
+  color: #909399;
+  transition: color 0.2s;
 }
 
-.selector-info {
-  display: flex;
-  align-items: center;
-}
-
-.selector-actions {
-  display: flex;
-  gap: 8px;
-  align-items: center;
+.clear-icon:hover {
+  color: #f56c6c;
 }
 </style>