Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev

playground/src/layouts/basic.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { NotificationItem } from '@vben/layouts';
 
-import { computed, ref, watch } from 'vue';
+import { computed, onBeforeMount, ref, watch } from 'vue';
 
 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
@@ -14,13 +14,26 @@ import {
   UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
-import { useAccessStore, useUserStore } from '@vben/stores';
+import { useAccessStore, useTabbarStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
 import { $t } from '#/locales';
 import { useAuthStore } from '#/store';
 import LoginForm from '#/views/_core/authentication/login.vue';
 
+const { setMenuList } = useTabbarStore();
+setMenuList([
+  'close',
+  'affix',
+  'maximize',
+  'reload',
+  'open-in-new-window',
+  'close-left',
+  'close-right',
+  'close-other',
+  'close-all',
+]);
+
 const notifications = ref<NotificationItem[]>([
   {
     avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
@@ -113,7 +126,7 @@ watch(
   async (enable) => {
     if (enable) {
       await updateWatermark({
-        content: `${userStore.userInfo?.username}`,
+        content: `${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
       });
     } else {
       destroyWatermark();
@@ -123,6 +136,12 @@ watch(
     immediate: true,
   },
 );
+
+onBeforeMount(() => {
+  if (preferences.app.watermark) {
+    destroyWatermark();
+  }
+});
 </script>
 
 <template>

playground/src/views/demos/features/vue-query/concurrency-caching.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import type { Recordable } from '@vben/types';
+
+import { useQuery } from '@tanstack/vue-query';
+
+import { useVbenForm } from '#/adapter/form';
+import { getMenuList } from '#/api';
+
+const queryKey = ['demo', 'api', 'options'];
+const count = 4;
+
+const { dataUpdatedAt, promise: fetchDataFn } = useQuery({
+  // 在组件渲染期间预取数据
+  experimental_prefetchInRender: true,
+  // 获取接口数据的函数
+  queryFn: getMenuList,
+  queryKey,
+  // 每次组件挂载时都重新获取数据。如果不需要每次都重新获取就不要设置为always
+  refetchOnMount: 'always',
+  // 缓存时间
+  staleTime: 1000 * 60 * 5,
+});
+
+async function fetchOptions() {
+  return await fetchDataFn.value;
+}
+
+const schema = [];
+
+for (let i = 0; i < count; i++) {
+  schema.push({
+    component: 'ApiSelect',
+    componentProps: {
+      api: fetchOptions,
+      class: 'w-full',
+      filterOption: (input: string, option: Recordable<any>) => {
+        return option.label.toLowerCase().includes(input.toLowerCase());
+      },
+      labelField: 'name',
+      showSearch: true,
+      valueField: 'id',
+    },
+    fieldName: `field${i}`,
+    label: `Select ${i}`,
+  });
+}
+
+const [Form] = useVbenForm({
+  schema,
+  showDefaultActions: false,
+});
+</script>
+<template>
+  <div>
+    <div class="mb-2 flex gap-2">
+      <div>以下{{ count }}个组件共用一个数据源。</div>
+      <div>缓存更新时间：{{ new Date(dataUpdatedAt).toLocaleString() }}</div>
+    </div>
+    <Form />
+  </div>
+</template>

playground/src/views/demos/features/vue-query/index.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import { Page } from '@vben/common-ui';
 
-import { Card } from 'ant-design-vue';
+import { refAutoReset } from '@vueuse/core';
+import { Button, Card, Empty } from 'ant-design-vue';
 
+import ConcurrencyCaching from './concurrency-caching.vue';
 import InfiniteQueries from './infinite-queries.vue';
 import PaginatedQueries from './paginated-queries.vue';
 import QueryRetries from './query-retries.vue';
+
+const showCaching = refAutoReset(true, 1000);
 </script>
 
 <template>
@@ -20,6 +24,17 @@ import QueryRetries from './query-retries.vue';
       <Card title="错误重试">
         <QueryRetries />
       </Card>
+      <Card
+        title="并发和缓存"
+        v-spinning="!showCaching"
+        :body-style="{ minHeight: '330px' }"
+      >
+        <template #extra>
+          <Button @click="showCaching = false">重新加载</Button>
+        </template>
+        <ConcurrencyCaching v-if="showCaching" />
+        <Empty v-else description="正在加载..." />
+      </Card>
     </div>
   </Page>
 </template>