Svelte Web Console Components

一套基于 Svelte 5+ 的 Web 控制台组件库，提供常用的页面模板、布局组件和业务组件。

安装

npm install @malachi/svelte-components

依赖要求

• Svelte ^5.43.5
• 需要配置相应的 @ticatec 系列依赖

使用示例

import { CommonPage1, DashboardPage, FramePage } from '@your-scope/svelte-components';

基础使用

按需导入

// 导入页面组件 import { CommonPage1 } from '@your-scope/svelte-components/commonPage/CommonPage1.svelte';
// 导入布局组件 import { SidebarPanel } from '@your-scope/svelte-components/sidebar/SidebarPanel.svelte'; import { TabContainer } from '@your-scope/svelte-components/tab/TabContainer.svelte';
// 导入业务组件 import { TenantSelector } from '@your-scope/svelte-components/userAction/TenantSelector.svelte';

组件分类

📄 页面组件 (commonPage)

• CommonPage1 - 通用页面布局，支持左右侧边栏

💬 对话框 (dialog)

• Common2Dialog - 通用对话框组件

🏗️ 框架组件 (framework)

• DashboardPage - 仪表盘页面
• FramePage - 框架页面
• NotFoundPage - 404 页面

📋 列表模板 (listTemplate)

• ListTemplate1 - 基础列表模板

📑 分页列表 (paginationListTemplate)

• PaginationListTemplate1 - 分页列表模板 1
• PaginationListTemplate2 - 分页列表模板 2

🎛️ 表单组件

• RadioGroup - 单选框组

🧭 导航组件 (sidebar)

• SidebarPanel - 侧边栏面板
• MenuPanel - 菜单面板

📌 标签页 (tab)

• TabContainer - 标签容器

👤 用户操作 (userAction)

• UserActionPanel - 用户操作面板
• TenantSelector - 租户选择器
• UserCenterSelector - 用户中心选择器

⏳ 加载组件

• LoadingMask - 加载遮罩
• LoadingPage - 加载页面

❌ 错误页面

• ModuleErrorPage - 模块错误页面

开发

构建组件库 npm run build:lib

本地预览 npm run preview