feat: use simpler nitro instead of nestjs to implement mock service

apps/web-antd/src/views/demos/features/tabs/index.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router';
+
+import { useTabs } from '@vben/hooks';
+
+import { Button } from 'ant-design-vue';
+
+defineOptions({ name: 'FeatureTabsDemo' });
+
+const router = useRouter();
+// const newTabTitle = ref('');
+const {
+  closeAllTabs,
+  closeCurrentTab,
+  closeLeftTabs,
+  closeOtherTabs,
+  closeRightTabs,
+  closeTabByKey,
+  refreshTab,
+} = useTabs();
+
+function openTab() {
+  // 这里就是路由跳转，也可以用path
+  router.push({ name: 'VbenAbout' });
+}
+</script>
+
+<template>
+  <div class="p-5">
+    <div class="card-box p-5">
+      <h1 class="text-xl font-semibold">标签页</h1>
+      <div class="text-foreground/80 mt-2">用于需要操作标签页的场景</div>
+    </div>
+
+    <div class="card-box mt-5 p-5">
+      <div class="text-lg font-semibold">打开/关闭标签页</div>
+      <div class="text-foreground/80 my-3">
+        如果标签页存在，直接跳转切换。如果标签页不存在，则打开新的标签页。
+      </div>
+      <div class="flex flex-wrap gap-3">
+        <Button type="primary" @click="openTab"> 打开 "关于" 标签页 </Button>
+        <Button type="primary" @click="closeTabByKey('/vben-admin/about')">
+          关闭 "关于" 标签页
+        </Button>
+      </div>
+    </div>
+
+    <div class="card-box mt-5 p-5">
+      <div class="text-lg font-semibold">标签页操作</div>
+      <div class="text-foreground/80 my-3">用于动态控制标签页的各种操作</div>
+      <div class="flex flex-wrap gap-3">
+        <Button type="primary" @click="closeCurrentTab()">
+          关闭当前标签页
+        </Button>
+        <Button type="primary" @click="closeLeftTabs()">
+          关闭左侧标签页
+        </Button>
+        <Button type="primary" @click="closeRightTabs()">
+          关闭右侧标签页
+        </Button>
+        <Button type="primary" @click="closeAllTabs()"> 打开所有标签页 </Button>
+        <Button type="primary" @click="closeOtherTabs()">
+          关闭其他标签页
+        </Button>
+        <Button type="primary" @click="refreshTab()"> 刷新当前标签页 </Button>
+      </div>
+    </div>
+
+    <div class="card-box mt-5 p-5">
+      <div class="text-lg font-semibold">动态标题</div>
+      <div class="text-foreground/80 my-3">
+        该操作不会影响页面标题，仅修改Tab标题
+      </div>
+      <!-- <div class="flex flex-wrap items-center gap-3">
+        <Input
+          v-model="newTabTitle"
+          class="w-30"
+          placeholder="请输入新的标题"
+        />
+        <Button type="primary" @click="closeCurrentTab()">
+          关闭当前标签页 {{ newTabTitle }}
+        </Button>
+      </div> -->
+    </div>
+  </div>
+</template>