Feat: admin delete room

components.d.ts

@@ -28,6 +28,7 @@ declare module 'vue' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']

src/components/cinema/RoomInfo.vue

@@ -70,10 +70,10 @@ const roomUsersDrawer = ref<InstanceType<typeof RoomUsers>>();
   </div>
 
   <!-- 用户列表 -->
-  <RoomUsers ref="roomUsersDrawer" />
+  <RoomUsers v-if="isLogin" ref="roomUsersDrawer" />
 
   <!-- 房间设置 -->
-  <RoomManage ref="roomManageDrawer" />
+  <RoomManage v-if="isLogin" ref="roomManageDrawer" />
 </template>
 
 <style lang="less" scoped>

src/services/apis/admin.ts

@@ -321,6 +321,22 @@ export const approveRoomApi = useDefineApi<
   method: "POST"
 });
 
+// 删除房间
+export const delRoomApi = useDefineApi<
+  {
+    headers: {
+      Authorization: string;
+    };
+    data: {
+      id: string;
+    };
+  },
+  any
+>({
+  url: "/api/admin/room/delete",
+  method: "POST"
+});
+
 // 获取 OAuth2 设置
 export const oAuth2SettingsApi = useDefineApi<
   {

src/views/admin/settings/RoomsManager.vue

@@ -3,7 +3,13 @@ import { onMounted, ref } from "vue";
 import { ElNotification, ElMessage } from "element-plus";
 import { Search } from "@element-plus/icons-vue";
 import { userStore } from "@/stores/user";
-import { roomListApi, banRoomApi, unBanRoomApi, approveRoomApi } from "@/services/apis/admin";
+import {
+  roomListApi,
+  banRoomApi,
+  unBanRoomApi,
+  approveRoomApi,
+  delRoomApi
+} from "@/services/apis/admin";
 import CopyButton from "@/components/CopyButton.vue";
 import { RoomStatus, roomStatus } from "@/types/Room";
 import { useTimeAgo } from "@vueuse/core";
@@ -108,6 +114,35 @@ const approveCreate = async (id: string) => {
   }
 };
 
+// 删除房间
+const { execute: reqDelRoomApi, isLoading: delRoomBtnLoading } = delRoomApi();
+const deleteRoom = async (roomID: string) => {
+  try {
+    await reqDelRoomApi({
+      data: {
+        id: roomID
+      },
+      headers: { Authorization: token.value }
+    });
+
+    ElNotification({
+      title: "删除成功",
+      type: "success"
+    });
+    localStorage.removeItem(`room-${roomID}-token`);
+    localStorage.removeItem(`room-${roomID}-pwd`);
+
+    getRoomListApi();
+  } catch (err: any) {
+    console.error(err);
+    ElNotification({
+      title: "删除失败",
+      message: err.response?.data.error || err.message,
+      type: "error"
+    });
+  }
+};
+
 onMounted(async () => {
   await getRoomListApi();
 });
@@ -242,6 +277,17 @@ onMounted(async () => {
             >
               允许创建
             </el-button>
+            <el-popconfirm
+              width="220"
+              confirm-button-text="是"
+              cancel-button-text="否"
+              title="你确定要删除这个房间吗？!"
+              @confirm="deleteRoom(scope.row.roomId)"
+            >
+              <template #reference>
+                <el-button plain type="danger" :loading="delRoomBtnLoading">删除房间</el-button>
+              </template>
+            </el-popconfirm>
           </template>
         </el-table-column>
       </el-table>