@kernelift/core

demo工程： https://github.com/kernelift-labs/playground

Kernelift 前端框架核心库，提供系统初始化、主题管理、布局配置、国际化、路由管理等核心功能。

📦 安装

# 使用 pnpm
pnpm add @kernelift/core

# 使用 npm
npm install @kernelift/core

# 使用 yarn
yarn add @kernelift/core

✨ 功能特性

• 🚀 系统初始化 - 一站式初始化 Vue 应用，包含路由、状态管理、国际化等
• 🎨 主题管理 - 支持亮色/暗色主题切换，自动持久化
• 📐 布局配置 - 灵活的布局系统，支持侧边栏、顶部导航、标签页等
• 🌐 国际化 - 内置 i18n 支持，支持中英文切换
• 🔌 请求服务 - 基于 Axios 的请求服务，支持统一请求取消
• 📑 页面视图 - 提供页面渲染组件，支持多标签页管理
• 🔒 路由拦截 - 内置路由拦截器，支持权限验证

🚀 快速开始

基础用法

// main.ts
import { createApp } from 'vue';
import { createKernelift } from '@kernelift/core';
import '@kernelift/core/style.css';
import App from './App.vue';
import routes from './router';

const app = createApp(App);

// 创建并安装 Kernelift
app.use(
  createKernelift({
    routes,
    system: {
      info: {
        name: '我的系统',
        description: '系统描述',
        shortName: 'MyApp',
        version: '1.0.0'
      },
      config: {
        baseUrl: '/',
        apiBaseUrl: '/api',
        platformCode: 'my-platform',
        timeout: 10000
      }
    },
    theme: 'light',
    layout: {
      showSidebar: true,
      showHeader: true,
      showTabs: true,
      showLogo: true,
      sidebarCollapsed: false,
      sidebarWidth: 200,
      sidebarCollapsedWidth: 64,
      fullscreen: false
    },
    i18n: {
      locale: 'zh-CN',
      messages: {
        'zh-CN': {
          hello: '你好'
        },
        'en-US': {
          hello: 'Hello'
        }
      }
    }
  })
);

app.mount('#app');

使用 initKernelift（更细粒度控制）

import { createApp } from 'vue';
import { initKernelift } from '@kernelift/core';
import App from './App.vue';
import routes from './router';

const app = createApp(App);

const { pinia, router, i18n, service } = initKernelift(app, {
  routes,
  system: {
    config: {
      baseUrl: '/',
      apiBaseUrl: '/api',
      platformCode: 'my-platform',
      timeout: 10000
    }
  }
});

// 可以进一步配置 router, pinia, i18n 等
app.mount('#app');

📖 API 文档

初始化配置 (InstallOptions)

| 参数 | 类型 | 必填 | 说明 | | --------------- | ------------------- | ---- | ------------------- | | routes | RouteRecordRaw[] | ✅ | Vue Router 路由配置 | | system.info | SystemInfo | ❌ | 系统基本信息 | | system.config | SystemConfig | ✅ | 系统配置 | | theme | 'light' \| 'dark' | ❌ | 默认主题模式 | | layout | LayoutConfig | ❌ | 布局配置 | | i18n | I18nOptions | ❌ | 国际化配置 |

SystemInfo 系统信息

interface SystemInfo {
  name: string; // 系统名称
  description: string; // 系统描述
  shortName?: string; // 系统简称
  version?: string; // 系统版本
  icon?: string; // 系统图标
  copyright?: string; // 版权信息
}

SystemConfig 系统配置

interface SystemConfig {
  baseUrl: string; // 基础URL
  apiBaseUrl: string; // 请求基础URL
  platformCode: string; // 平台编码
  useStoragePrefix?: boolean; // 是否使用存储前缀
  uploadUrl?: string; // 上传文件URL
  assetsUrl?: string; // 静态资源URL
  timeout: number; // 超时时间（毫秒）
}

LayoutConfig 布局配置

interface LayoutConfig {
  showSidebar: boolean; // 是否显示侧边栏
  showHeader: boolean; // 是否显示顶部导航
  showTabs: boolean; // 是否显示标签页
  showLogo: boolean; // 是否显示Logo
  sidebarCollapsed: boolean; // 侧边栏折叠状态
  sidebarWidth: number; // 侧边栏宽度（展开时）
  sidebarCollapsedWidth: number; // 侧边栏折叠宽度
  fullscreen: boolean; // 是否全屏状态
  primaryColor?: string; // 主色调
  fontSize?: number; // 字体大小
  menuType?: 'static' | 'overlay' | 'horizontal' | 'slim' | 'slim+' | 'reveal' | 'drawer';
  preset?: string; // 预设主题
}

🎣 Hooks

useTheme - 主题管理

import { useTheme } from '@kernelift/core';

const { theme, isDark, isLight, setTheme, loadThemeMode } = useTheme();

// 切换到暗色主题
setTheme('dark');

// 判断当前主题
if (isDark.value) {
  console.log('当前是暗色主题');
}

useLayout - 布局管理

import { useLayout } from '@kernelift/core';

const {
  layoutConfig,
  setLayoutConfig,
  toggleSidebar,
  toggleFullscreen,
  toggleSidebarCollapsed,
  toggleTabs,
  toggleLogo,
  toggleHeader
} = useLayout();

// 切换侧边栏折叠状态
toggleSidebarCollapsed();

// 更新布局配置
setLayoutConfig({
  showTabs: false,
  sidebarWidth: 240
});

useI18n - 国际化

import { useI18n } from '@kernelift/core';

const { t, locale, setLocale, isZhCN, isEnUS } = useI18n();

// 获取翻译文案
const greeting = t('hello');

// 切换语言
setLocale('en-US');

// 判断当前语言
if (isZhCN()) {
  console.log('当前是中文');
}

useMenuTabs - 标签页管理

import { useMenuTabs } from '@kernelift/core';

const { tabs, activeTab, addTab, removeTab, clearTabs } = useMenuTabs();

📦 Store

useSystemStore - 系统状态

import { useSystemStore } from '@kernelift/core';

const systemStore = useSystemStore();

// 获取系统信息
console.log(systemStore.systemInfo);
console.log(systemStore.systemConfig);

usePageStore - 页面状态

import { usePageStore } from '@kernelift/core';

const pageStore = usePageStore();

useI18nStore - 国际化状态

import { useI18nStore } from '@kernelift/core';

const i18nStore = useI18nStore();

// 设置全局语言
i18nStore.setLocale('en-US');

🔧 工具函数

createRequestService - 创建请求服务

import { createRequestService } from '@kernelift/core';

const service = createRequestService('/api', {
  timeout: 15000
});

// 发起请求
const response = await service.get('/users');

createSystemWebsocket - 创建 WebSocket

import { createSystemWebsocket } from '@kernelift/core';

const ws = createSystemWebsocket(/* options */);

getStorageKey - 获取存储键名

import { getStorageKey, STORAGE_KEYS } from '@kernelift/core';

const themeKey = getStorageKey(STORAGE_KEYS.THEME);

🧩 组件

PageViews - 页面视图组件

用于渲染页面内容，支持多标签页切换和页面缓存。

<template>
  <PageViews />
</template>

<script setup lang="ts">
import { PageViews } from '@kernelift/core';
</script>

📝 常量

import { PAGE_ELEMENT_IDS, STORAGE_KEYS } from '@kernelift/core';

// 页面元素ID
PAGE_ELEMENT_IDS.IFRAME_PAGE; // 'kernelift__iframe-page'
PAGE_ELEMENT_IDS.ROUTER_PAGE; // 'kernelift__route-page'

// 本地存储键名
STORAGE_KEYS.THEME; // 'kernelift__theme'
STORAGE_KEYS.LANGUAGE; // 'kernelift__language'
STORAGE_KEYS.SYSTEM_INFO; // 'kernelift__system'
STORAGE_KEYS.LAYOUT_CONFIG; // 'kernelift__layout-config'
STORAGE_KEYS.PLATFORM_CODE; // 'kernelift__platform-code'

📋 类型导出

import type {
  SystemInfo,
  SystemConfig,
  SystemRoute,
  SystemRouteMeta,
  ThirdPartyRouteMeta,
  DefaultRouteMeta,
  MenuTab,
  ThemeMode,
  I18n,
  InstallOptions,
  LayoutConfig
} from '@kernelift/core';

🔗 路由元信息

DefaultRouteMeta - 默认路由配置

interface DefaultRouteMeta {
  id: string; // 路由ID
  requiresAuth?: boolean; // 是否需要登录验证
  hideLayout?: boolean; // 是否隐藏侧边栏/顶部布局
  openType?: 'internal' | 'external' | 'window'; // 打开方式
  title: string; // 页面标题
  isThirdParty: false; // 是否是第三方地址
  keepAlive?: boolean; // 是否缓存页面
  hidden?: boolean; // 是否隐藏菜单
  cacheName?: string; // 缓存页面名称
  i18nTitleKey?: string; // 国际化标题
  icon?: string; // 图标
  defaultQuery?: string; // 默认查询参数
}

📄 许可证

GPL-3.0