fix: 详情返回

src/components/Layout/BasicLayoutPage.vue

@@ -6,7 +6,7 @@
         v-model:selectedKeys="state.selectedKeys"
         :pure="state.pure"
         :breadcrumb="{ routes: breadcrumb }"
-        @back='routerBack'
+        @backClick='routerBack'
     >
         <template #breadcrumbRender="slotProps">
             <a

src/views/device/Instance/Detail/index.vue

@@ -1,21 +1,16 @@
 <template>
     <page-container
         :tabList="list"
+        :showBack="true"
         :tabActiveKey="instanceStore.tabActiveKey"
         @tabChange="onTabChange"
     >
         <template #title>
-            <div>
             <div style="display: flex; align-items: center">
-                    <!-- <j-button @click="onBack" size="small">返回</j-button> -->
-                    <div style="font-size: 24px">
                 {{ instanceStore.current?.name }}
-                    </div>
                 <j-divider type="vertical" />
                 <j-space>
-                        <span
+                    <span style="font-size: 14px; color: rgba(0, 0, 0, 0.85)">
-                            style="font-size: 14px; color: rgba(0, 0, 0, 0.85)"
-                        >
                         状态：
                         <j-badge
                             :status="
@@ -28,8 +23,7 @@
                     </span>
                     <PermissionButton
                         v-if="
-                                instanceStore.current?.state?.value ===
+                            instanceStore.current?.state?.value === 'notActive'
-                                'notActive'
                         "
                         type="link"
                         style="margin-top: -5px; padding: 0 20px"
@@ -42,9 +36,7 @@
                         启用设备
                     </PermissionButton>
                     <PermissionButton
-                            v-if="
+                        v-if="instanceStore.current?.state?.value === 'online'"
-                                instanceStore.current?.state?.value === 'online'
-                            "
                         type="link"
                         style="margin-top: -5px; padding: 0 20px"
                         :popConfirm="{
@@ -59,8 +51,7 @@
                         v-if="
                             instanceStore.current?.accessProvider ===
                                 'child-device' &&
-                                instanceStore.current?.state?.value ===
+                            instanceStore.current?.state?.value === 'offline'
-                                    'offline'
                         "
                         :title="
                             instanceStore.current?.features?.find(
@@ -77,7 +68,8 @@
                     </j-tooltip>
                 </j-space>
             </div>
-                <div style="padding-top: 24px">
+        </template>
+        <template #content>
             <j-descriptions size="small" :column="4">
                 <j-descriptions-item label="ID">{{
                     instanceStore.current?.id
@@ -93,8 +85,6 @@
                     </PermissionButton>
                 </j-descriptions-item>
             </j-descriptions>
-                </div>
-            </div>
         </template>
         <template #extra>
             <img
@@ -142,7 +132,7 @@ statusMap.set('notActive', 'warning');
 
 const statusRef = ref();
 
-const list = ref([
+const initList = [
     {
         key: 'Info',
         tab: '实例信息',
@@ -163,7 +153,9 @@ const list = ref([
         key: 'Log',
         tab: '日志管理',
     },
-]);
+];
+
+const list = ref([...initList]);
 
 const tabs = {
     Info,
@@ -191,64 +183,7 @@ const getStatus = (id: string) => {
     });
 };
 
-watch(
+const getDetail = () => {
-    () => route.params?.id,
-    (newId) => {
-        if (newId) {
-            instanceStore.refresh(String(newId));
-            getStatus(String(newId));
-            instanceStore.tabActiveKey = 'Info'
-        }
-    },
-    { immediate: true, deep: true },
-);
-
-onMounted(() => {
-    instanceStore.tabActiveKey = history.state?.params?.tab || 'Info';
-});
-
-// const onBack = () => {
-//     menuStory.jumpPage('device/Instance');
-// };
-
-const onTabChange = (e: string) => {
-    instanceStore.tabActiveKey = e;
-};
-
-const handleAction = async () => {
-    if (instanceStore.current?.id) {
-        const resp = await _deploy(instanceStore.current?.id);
-        if (resp.status === 200) {
-            message.success('操作成功！');
-            instanceStore.refresh(instanceStore.current?.id);
-        }
-    }
-};
-
-const handleDisconnect = async () => {
-    if (instanceStore.current?.id) {
-        const resp = await _disconnect(instanceStore.current?.id);
-        if (resp.status === 200) {
-            message.success('操作成功！');
-            instanceStore.refresh(instanceStore.current?.id);
-        }
-    }
-};
-
-const handleRefresh = async () => {
-    if (instanceStore.current?.id) {
-        await instanceStore.refresh(instanceStore.current?.id);
-        message.success('操作成功');
-    }
-};
-
-const jumpProduct = () => {
-    menuStory.jumpPage('device/Product/Detail', {
-        id: instanceStore.current?.productId,
-    });
-};
-
-watchEffect(() => {
     const keys = list.value.map((i) => i.key);
     if (
         instanceStore.current?.protocol &&
@@ -309,8 +244,67 @@ watchEffect(() => {
             tab: '边缘端映射',
         });
     }
+};
+
+watch(
+    () => route.params?.id,
+    async (newId) => {
+        if (newId) {
+            await instanceStore.refresh(String(newId));
+            getStatus(String(newId));
+            list.value = [...initList];
+            getDetail();
+            instanceStore.tabActiveKey = 'Info';
+        }
+    },
+    { immediate: true, deep: true },
+);
+
+onMounted(() => {
+    instanceStore.tabActiveKey = history.state?.params?.tab || 'Info';
 });
 
+const onBack = () => {
+    menuStory.jumpPage('device/Instance');
+};
+
+const onTabChange = (e: string) => {
+    instanceStore.tabActiveKey = e;
+};
+
+const handleAction = async () => {
+    if (instanceStore.current?.id) {
+        const resp = await _deploy(instanceStore.current?.id);
+        if (resp.status === 200) {
+            message.success('操作成功！');
+            instanceStore.refresh(instanceStore.current?.id);
+        }
+    }
+};
+
+const handleDisconnect = async () => {
+    if (instanceStore.current?.id) {
+        const resp = await _disconnect(instanceStore.current?.id);
+        if (resp.status === 200) {
+            message.success('操作成功！');
+            instanceStore.refresh(instanceStore.current?.id);
+        }
+    }
+};
+
+const handleRefresh = async () => {
+    if (instanceStore.current?.id) {
+        await instanceStore.refresh(instanceStore.current?.id);
+        message.success('操作成功');
+    }
+};
+
+const jumpProduct = () => {
+    menuStory.jumpPage('device/Product/Detail', {
+        id: instanceStore.current?.productId,
+    });
+};
+
 onUnmounted(() => {
     statusRef.value && statusRef.value.unsubscribe();
 });