feat: 设备功能

src/views/device/Instance/Detail/Function/components/Advance.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="wrapper">高级模式</div>
+</template>
+
+<script setup lang="ts">
+import { useInstanceStore } from '@/store/instance';
+
+const instanceStore = useInstanceStore();
+</script>
+
+<style lang="less" scoped></style>

src/views/device/Instance/Detail/Function/components/Simple.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="wrapper">精简模式</div>
+</template>
+
+<script setup lang="ts">
+import { useInstanceStore } from '@/store/instance';
+
+const instanceStore = useInstanceStore();
+</script>
+
+<style lang="less" scoped></style>

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

@@ -1,7 +1,39 @@
 <template>
-    <div class="page-container">设备功能</div>
+    <a-card>
+        <a-empty
+            v-if="!metadata || (metadata && !metadata.functions)"
+            style="margin-top: 100px"
+        >
+            <template #description>
+                暂无数据，请配置
+                <a @click="emits('onJump', 'Metadata')">物模型</a>
+            </template>
+        </a-empty>
+        <template v-else>
+            <a-tabs v-model:activeKey="activeKey">
+                <a-tab-pane key="Simple" tab="精简模式" />
+                <a-tab-pane key="Advance" tab="高级模式" />
+            </a-tabs>
+            <component :is="tabs[activeKey]" />
+        </template>
+    </a-card>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useInstanceStore } from '@/store/instance';
+import Simple from './components/Simple.vue';
+import Advance from './components/Advance.vue';
+
+const instanceStore = useInstanceStore();
+const emits = defineEmits(['onJump']);
+
+const metadata = computed(() => JSON.parse(instanceStore.detail.metadata));
+
+const activeKey = ref('Simple');
+const tabs = {
+    Simple,
+    Advance,
+};
+</script>
 
 <style lang="less" scoped></style>

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

@@ -34,7 +34,7 @@
         <template #extra>
             <img @click="handleRefresh" :src="getImage('/device/button.png')" style="margin-right: 20px; cursor: pointer;" />
         </template>
-        <component :is="tabs[instanceStore.tabActiveKey]" v-bind="{ type: 'device' }" />
+        <component :is="tabs[instanceStore.tabActiveKey]" v-bind="{ type: 'device' }" @onJump="onTabChange" />
     </page-container>
 </template>