feat: Feature/pro docs (#70)

* chore: merge main

* feat: update docs

* feat: remove coze-assistant

* feat: add watermark plugin

* feat: update preferences

* feat: update docs

---------

Co-authored-by: vince <vince292007@gmail.com>

packages/effects/layouts/src/basic/content/content.vue

@@ -1,5 +1,11 @@
 <script lang="ts" setup>
-import type { RouteLocationNormalizedLoaded } from 'vue-router';
+import type {
+  RouteLocationNormalizedLoaded,
+  RouteLocationNormalizedLoadedGeneric,
+} from 'vue-router';
+
+import { type VNode } from 'vue';
+import { RouterView } from 'vue-router';
 
 import { useContentHeight } from '@vben/hooks';
 import { preferences, usePreferences } from '@vben/preferences';
@@ -43,6 +49,39 @@ function getTransitionName(_route: RouteLocationNormalizedLoaded) {
   // return inTabs && route.meta.loaded ? undefined : transitionName;
   return transitionName;
 }
+
+/**
+ * 转换组件，自动添加 name
+ * @param component
+ */
+function transformComponent(
+  component: VNode,
+  route: RouteLocationNormalizedLoadedGeneric,
+) {
+  const routeName = route.name as string;
+  // 如果组件没有 name，则直接返回
+  if (!routeName) {
+    return component;
+  }
+
+  const componentName = (component.type as any).name;
+
+  // 已经设置过 name，则直接返回
+  if (componentName) {
+    return component;
+  }
+
+  // componentName 与 routeName 一致，则直接返回
+  if (componentName === routeName) {
+    return component;
+  }
+
+  // 设置 name
+  component.type ||= {};
+  (component.type as any).name = routeName;
+
+  return component;
+}
 </script>
 
 <template>
@@ -61,7 +100,7 @@ function getTransitionName(_route: RouteLocationNormalizedLoaded) {
           :include="getCachedTabs"
         >
           <component
-            :is="Component"
+            :is="transformComponent(Component, route)"
             v-if="renderRouteView"
             v-show="!route.meta.iframeSrc"
             :key="route.fullPath"

packages/effects/layouts/src/basic/layout.vue

@@ -1,19 +1,20 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 
+import { useWatermark } from '@vben/hooks';
 import { $t } from '@vben/locales';
 import {
   preferences,
   updatePreferences,
   usePreferences,
 } from '@vben/preferences';
-import { useCoreLockStore } from '@vben/stores';
+import { useCoreAccessStore, useCoreLockStore } from '@vben/stores';
 import { MenuRecordRaw } from '@vben/types';
 import { mapTree } from '@vben/utils';
 import { VbenAdminLayout } from '@vben-core/layout-ui';
 import { VbenBackTop, VbenLogo } from '@vben-core/shadcn-ui';
 
-import { Breadcrumb, CozeAssistant, Preferences } from '../widgets';
+import { Breadcrumb, Preferences } from '../widgets';
 import { LayoutContent } from './content';
 import { Copyright } from './copyright';
 import { LayoutFooter } from './footer';
@@ -40,6 +41,8 @@ const {
   layout,
   sidebarCollapsed,
 } = usePreferences();
+const coreAccessStore = useCoreAccessStore();
+const { updateWatermark } = useWatermark();
 const coreLockStore = useCoreLockStore();
 
 const headerMenuTheme = computed(() => {
@@ -127,6 +130,23 @@ function toggleSidebar() {
 function clearPreferencesAndLogout() {
   emit('clearPreferencesAndLogout');
 }
+
+watch(
+  () => preferences.app.watermark,
+  async (val) => {
+    if (val) {
+      // await nextTick();
+
+      updateWatermark({
+        content: `${preferences.app.name} 用户名: ${coreAccessStore.userInfo?.username}`,
+        // parent: contentRef.value,
+      });
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 </script>
 
 <template>
@@ -174,10 +194,6 @@ function clearPreferencesAndLogout() {
     </template>
 
     <template #floating-groups>
-      <CozeAssistant
-        v-if="preferences.widget.aiAssistant"
-        :is-mobile="preferences.app.isMobile"
-      />
       <VbenBackTop />
     </template>
 

packages/effects/layouts/src/basic/menu/use-mixed-menu.ts

@@ -57,7 +57,7 @@ function useMixedMenu() {
    * 侧边菜单激活路径
    */
   const sidebarActive = computed(() => {
-    return route?.meta?.activePath ?? route.path;
+    return (route?.meta?.activePath as string) ?? route.path;
   });
 
   /**

packages/effects/layouts/src/basic/tabbar/tabbar.vue

@@ -5,7 +5,12 @@ import { useRoute } from 'vue-router';
 import { useContentMaximize, useTabs } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import { useCoreTabbarStore } from '@vben/stores';
-import { TabsToolMore, TabsToolScreen, TabsView } from '@vben-core/tabs-ui';
+import {
+  TabsToolMore,
+  TabsToolRefresh,
+  TabsToolScreen,
+  TabsView,
+} from '@vben-core/tabs-ui';
 
 import { useTabbar } from './use-tabbar';
 
@@ -18,7 +23,7 @@ defineProps<{ showIcon?: boolean; theme?: string }>();
 const route = useRoute();
 const coreTabbarStore = useCoreTabbarStore();
 const { toggleMaximize } = useContentMaximize();
-const { unpinTab } = useTabs();
+const { refreshTab, unpinTab } = useTabs();
 
 const {
   createContextMenus,
@@ -29,7 +34,14 @@ const {
 } = useTabbar();
 
 const menus = computed(() => {
-  return createContextMenus(route);
+  const menus = createContextMenus(route);
+  return menus.map((item) => {
+    return {
+      ...item,
+      label: item.text,
+      value: item.key,
+    };
+  });
 });
 
 // 刷新后如果不保持tab状态，关闭其他tab
@@ -53,8 +65,13 @@ if (!preferences.tabbar.persist) {
     @update:active="handleClick"
   />
   <div class="flex-center h-full">
-    <TabsToolMore :menus="menus" />
+    <TabsToolRefresh
+      v-if="preferences.tabbar.showRefresh"
+      @refresh="refreshTab"
+    />
+    <TabsToolMore v-if="preferences.tabbar.showMore" :menus="menus" />
     <TabsToolScreen
+      v-if="preferences.tabbar.showMaximize"
       :screen="preferences.sidebar.hidden"
       @change="toggleMaximize"
       @update:screen="toggleMaximize"