fix: 修改需求

src/api/scene.ts

@@ -9,6 +9,7 @@ type SScene = {
   title: string
   sceneName: string
   thumb: string
+  status: SceneStatus
   createTime: string
 }
 
@@ -17,14 +18,33 @@ export interface Scene {
   num: string
   title: string
   cover: string
+  status: SceneStatus
   time: string
 }
 
+export enum SceneStatus {
+  DEL = -1,
+  RUN = 0,
+  ERR = 1,
+  SUCCESS = 2,
+  ARCHIVE = 3,
+  RERUN = 4
+}
+export const sceneStatusDesc = {
+  [SceneStatus.DEL]: '场景被删',
+  [SceneStatus.RUN]: '计算中',
+  [SceneStatus.ERR]: '计算失败',
+  [SceneStatus.SUCCESS]: '计算成功',
+  [SceneStatus.ARCHIVE]: '封存',
+  [SceneStatus.RERUN]: '重新计算中'
+}
+
 export type Scenes = Scene[]
 
 const serverToLocal = (sscene: SScene): Scene => ({
   ...sscene,
   cover: sscene.thumb,
+  status: sscene.status,
   time: sscene.createTime
 })
 

src/store/scene.ts

@@ -3,6 +3,7 @@ import { fetchScenes } from '@/api'
 import type { Scenes } from '@/api'
 
 export type { Scenes, Scene } from '@/api'
+export { SceneStatus, sceneStatusDesc } from '@/api'
 
 export const useSceneStore = defineStore('scene', {
   state: () => ({

src/views/room/edit-room/index.vue

@@ -81,9 +81,9 @@
         </a-form-item>
         <h4>场景库</h4>
         <a-form-item
-          required
           label="选择场景"
-          name="desc"
+          class="select-scene"
+          name="scenes"
           style="margin-bottom: 2px"
         >
         </a-form-item>
@@ -232,4 +232,14 @@ export default defineComponent({
   border-radius: 4px;
   min-width: 100px;
 }
+
+.select-scene label::before {
+  display: inline-block;
+  margin-right: 4px;
+  color: #ff4d4f;
+  font-size: 14px;
+  font-family: SimSun, sans-serif;
+  line-height: 1;
+  content: '*';
+}
 </style>

src/views/room/edit-room/scene-list.vue

@@ -1,6 +1,6 @@
 <template>
   <a-list :grid="{ gutter: 20, column: 4 }" :data-source="current">
-    <template #renderItem="{ item }">
+    <template #renderItem="{ item }: { item: Scene | typeof addMarked }">
       <a-list-item class="scene-item">
         <div v-if="item === addMarked" class="add-scene" @click="selectScenes">
           <a-button shape="circle" class="button" type="primary">
@@ -13,7 +13,11 @@
           <span class="delete-scene" @click="deleteScene(item)">
             <close-outlined class="delete-scene-icon" />
           </span>
-          <p>{{ item.title }}</p>
+          <p class="title">{{ item.title }}</p>
+
+          <div v-if="item.status !== SceneStatus.SUCCESS" class="status-cover">
+            <p>{{ sceneStatusDesc[item.status] }}</p>
+          </div>
         </div>
       </a-list-item>
     </template>
@@ -23,7 +27,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { Modal } from 'ant-design-vue'
-import { useSceneStore } from '@/store'
+import { useSceneStore, sceneStatusDesc, SceneStatus } from '@/store'
 import { diffArrayChange } from '@/shared'
 import SceneList from '@/views/scene/list.vue'
 
@@ -110,7 +114,7 @@ const selectScenes = () => {
     display: block;
     object-fit: cover;
   }
-  p {
+  .title {
     position: absolute;
     bottom: 0;
     left: 0;
@@ -127,6 +131,7 @@ const selectScenes = () => {
   }
 
   .delete-scene {
+    z-index: 2;
     position: absolute;
     right: 0;
     top: 0;
@@ -152,6 +157,22 @@ const selectScenes = () => {
     transform: translate(50%, -50%);
     opacity: 1;
   }
+  .status-cover {
+    z-index: 1;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    p {
+      color: #fff;
+    }
+  }
 }
 </style>