NsTech Luminescence UI Light

NsTech Luminescence UI Light 是一个面向 Vue 3 的轻量组件库，提供与 Naive UI 风格相近的 N* 组件命名和统一的视觉令牌。本目录是从 HyperCalc Workstation 副本中独立整理出的组件库版本，不包含计算器源码、计算器入口或 MathJax 资源。

目录

luminescence-ui-naive-light/
├── src/
│   ├── components/     # NButton、NInput、NForm 等组件
│   ├── styles/         # 全局样式与设计令牌
│   ├── index.ts        # 组件库统一导出
│   └── App.vue         # 本地组件演示页
├── public/              # 演示页静态资源
├── index.html           # 演示页入口
├── vite.config.ts       # ES/UMD 组件库构建配置
└── package.json

已导出的组件

NButton、NAlert、NInput、NSwitch、NTextarea、NDatePicker、NForm、NFormItem、NSelect、NCard、NCheckbox、NRadio、NTimePicker、NInputNumber、NSlider、NUpload、NSpace、NLayout、NLayoutSider、NGrid、NGridItem、NIcon、NImage、NAvatar、NDataTable、NList、NCollapse、NCollapseItem、NTimeline、NTimelineItem、NStatistic、NTag、NBadge、NMenu、NBreadcrumb、NDropdown、NPagination、NTabs、NSteps。

展示页面

展示页现在按基础输入、数据内容、反馈状态、导航流程和布局工具分组，带有搜索、分类筛选和可交互示例。启动开发服务器后访问终端显示的本地地址即可查看：

npm run dev

页面标题为 NsTech Luminescence UI Light · Showcase。展示页只用于组件预览，不包含 HyperCalc 计算器业务。

npm install npm run dev # 启动组件演示页 npm run build # 类型检查并构建 ES/UMD 组件库 npm run preview # 预览构建结果

构建产物位于 `dist/`。Vue 被标记为 external，使用者项目应自行安装 `vue`。

## 在 Vue 3 项目中使用

全量导入：

```ts
import { createApp } from 'vue'
import LuminescenceUI from 'luminescence-ui'
import 'luminescence-ui/dist/luminescence-ui.css'
import App from './App.vue'

const app = createApp(App)
app.use(LuminescenceUI)
app.mount('#app')

按组件导入：

<script setup lang="ts">
import { NButton, NCard } from 'luminescence-ui'
import 'luminescence-ui/dist/luminescence-ui.css'
</script>

<template>
  <NCard title="示例">
    <NButton type="primary">开始使用</NButton>
  </NCard>
</template>

源码调试时也可以直接从 src/index.ts 导入组件；全局样式会由入口自动加载。

组件文档

• 文档导航：按基础输入、布局、数据展示、反馈和导航分类查看全部组件。

• 快速开始：安装、导入、样式、开发和构建说明。

• 完整组件参考：全部公共组件的用途、示例、属性、事件和插槽。

• 逐组件详细 API：每个导出控件的独立文档、源码 Props、事件、插槽、边界行为和排查清单。

• NSlider 深度文档：包含量程、步长、数字/文字刻度、刻度吸附、拖动提示、事件和完整示例。

• src/components、src/styles 和 src/index.ts 属于组件库公共 API，修改时需要同步更新组件示例和文档。

• src/App.vue 只用于展示组件，不承载 Workstation 业务逻辑。

• 计算器相关代码已经从此副本的组件库目录删除；完整 Workstation 业务副本仍位于上级目录的其他文件中。

• 发布 npm 包前建议先执行 npm run build，并检查 dist/ 中的 ES、UMD 和 CSS 文件。