kt-template-admin/skills/references/features/features.md

常用功能

动态标题

根据页面内容动态更新浏览器标题。

开启动态标题

// preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  app: {
    dynamicTitle: true,
  },
});

路由配置标题

const routes = [
  {
    meta: {
      title: '用户管理',
    },
    name: 'User',
    path: '/user',
  },
];

页面内设置标题

import { useTabbar } from '@vben/tabbar';

const { setTitle } = useTabbar();

// 动态设置标题
setTitle('用户详情 - ID: 123');

水印

为页面添加水印保护。

开启水印

// preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  app: {
    watermark: true,
  },
});

自定义水印内容

<script setup lang="ts">
import { useWatermark } from '@vben/common-ui';

const { setWatermark } = useWatermark();

setWatermark({
  content: '机密文档',
  fontSize: 16,
  color: 'rgba(0, 0, 0, 0.15)',
});
</script>

页面缓存

保持页面状态，切换路由时不销毁组件。

路由级别缓存

const routes = [
  {
    meta: {
      keepAlive: true,  // 开启缓存
    },
    name: 'UserList',
    path: '/user/list',
  },
];

全局配置

// preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  tabbar: {
    enable: true,
    keepAlive: true,  // 全局开启缓存
    persist: true,    // 持久化标签页
  },
});

页面加载进度条

// preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  transition: {
    progress: true,  // 显示页面加载进度条
    loading: true,   // 显示页面加载动画
  },
});

页面过渡动画

// preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  transition: {
    enable: true,
    name: 'fade-slide',  // 动画名称
  },
});

可选动画

• fade - 淡入淡出
• fade-slide - 滑动淡入淡出
• fade-bottom - 底部滑入
• fade-scale - 缩放淡入

面包屑

// preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  breadcrumb: {
    enable: true,        // 显示面包屑
    showHome: false,     // 显示首页图标
    showIcon: true,      // 显示图标
    hideOnlyOne: false,  // 只有一个时隐藏
    styleType: 'normal', // 样式类型
  },
});

标签页

// preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  tabbar: {
    enable: true,           // 显示标签页
    height: 38,             // 标签页高度
    showIcon: true,         // 显示图标
    showMore: true,         // 显示更多按钮
    showMaximize: true,     // 显示最大化按钮
    draggable: true,        // 可拖拽
    wheelable: true,        // 滚轮切换
    persist: true,          // 持久化
    keepAlive: true,        // 缓存
    maxCount: 0,            // 最大数量（0不限制）
    styleType: 'chrome',    // 样式：chrome | plain | card
  },
});

页脚版权

// preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  footer: {
    enable: true,   // 显示页脚
    fixed: false,   // 固定在底部
    height: 32,     // 高度
  },
  copyright: {
    enable: true,
    companyName: 'My Company',
    companySiteLink: 'https://example.com',
    date: '2024',
    icp: '备案号',
    icpLink: 'https://beian.miit.gov.cn',
  },
});

锁屏

// preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  widget: {
    lockScreen: true,  // 显示锁屏按钮
  },
  shortcutKeys: {
    globalLockScreen: true,  // 锁屏快捷键
  },
});

全局搜索

// preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  widget: {
    globalSearch: true,  // 显示搜索按钮
  },
  shortcutKeys: {
    globalSearch: true,  // 搜索快捷键
  },
});

通知中心

// preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  widget: {
    notification: true,  // 显示通知图标
  },
});

全屏

// preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  widget: {
    fullscreen: true,  // 显示全屏按钮
  },
});

刷新按钮

// preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  widget: {
    refresh: true,  // 显示刷新按钮
  },
});

主题切换

// preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  widget: {
    themeToggle: true,  // 显示主题切换按钮
  },
});

检查更新

// preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  app: {
    enableCheckUpdates: true,      // 开启检查更新
    checkUpdatesInterval: 1,       // 检查间隔（小时）
  },
});

色弱模式

// preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  app: {
    colorWeakMode: true,
  },
});

灰色模式

// preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  app: {
    colorGrayMode: true,
  },
});