@qingmingmu/components 0.1.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 qingming-dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,128 @@
+# 青冥组件系统（Qingming Component System）
+
+面向 **Electron 桌面端**管理型/工具型应用的 Vue3 组件库。核心定位：
+
+- **自由度高**：组件行为与样式解耦，支持无样式模式（unstyled）与全量定制
+- **可定制化**：ConfigProvider 全局配置 + 组件级覆盖 + 命名空间
+- **主题系统**：CSS Variables 运行时主题，支持亮/暗/跟随系统
+- **Electron 友好**：CSP 合规样式方案、frameless 支持、系统主题桥接
+- **按需引入**：官方 resolver + 原生 tree-shaking
+
+## 安装
+
+```bash
+# pnpm（推荐）
+pnpm add @qingmingmu/components @qingmingmu/theme
+
+# npm
+npm install @qingmingmu/components @qingmingmu/theme
+
+# yarn
+yarn add @qingmingmu/components @qingmingmu/theme
+```
+
+> `@qingmingmu/theme` 提供 CSS 变量主题产物，必须单独引入。`vue >= 3.3.0` 为 peerDependency。
+
+## 使用
+
+### 全量引入
+
+```ts
+import Qingming from '@qingmingmu/components'
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import '@qingmingmu/theme/theme/light.css' // 亮色主题
+import '@qingmingmu/theme/theme/css-vars.css' // 组件 Token
+import '@qingmingmu/theme/theme/dark.css' // 暗色主题（可选）
+
+createApp(App).use(Qingming).mount('#app')
+```
+
+```vue
+<template>
+  <qm-button type="primary"> 主要按钮 </qm-button>
+</template>
+```
+
+### 按需引入（推荐）
+
+```bash
+pnpm add -D unplugin-vue-components unplugin-auto-import @qingmingmu/resolver
+```
+
+```ts
+import { QingmingResolver } from '@qingmingmu/resolver'
+import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+// vite.config.ts
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    Components({
+      resolvers: [QingmingResolver()],
+    }),
+    AutoImport({
+      resolvers: [QingmingResolver()],
+    }),
+  ],
+})
+```
+
+```vue
+<template>
+  <!-- 无需手动 import，自动按需注册 -->
+  <qm-button type="primary"> 主要按钮 </qm-button>
+</template>
+```
+
+### 主题切换
+
+```ts
+import '@qingmingmu/theme/theme/light.css'
+import '@qingmingmu/theme/theme/css-vars.css'
+import '@qingmingmu/theme/theme/dark.css'
+
+// 切换暗色
+document.documentElement.dataset.theme = 'dark'
+// 切换亮色
+document.documentElement.dataset.theme = 'light'
+```
+
+## 开发（贡献者）
+
+```bash
+pnpm install
+pnpm dev          # 启动 play 开发沙箱
+pnpm typecheck    # 类型检查
+pnpm lint         # ESLint + Stylelint
+pnpm test         # 单元测试
+pnpm build        # 全子包构建
+```
+
+## 文档
+
+架构与任务文档见 [docs/index.md](docs/index.md)（唯一入口）。
+
+## 目录结构
+
+```
+packages/
+  components/   组件库（Button/Dialog/Select...）
+  theme/        主题系统（CSS 变量 Token + 亮/暗主题）
+  hooks/        可复用组合式函数（useTheme/useSystemTheme...）
+  utils/        纯函数工具集
+  icons/        SVG 图标集
+  resolver/     按需引入 resolver（unplugin-vue-components）
+play/           开发沙箱（alias 直引源码）
+internal/build  构建编排
+scripts/        产物验证脚本
+docs/           架构与任务文档
+```
+
+## 技术栈
+
+pnpm workspace · TypeScript strict · unbuild · changesets · VitePress（文档站）· Vitest · Playwright · CSS Variables · SVG 图标

package/es/components/app-layout/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const appLayout = require('../../shared/components.CF_GZPuV.cjs');
+require('vue');
+require('../../shared/components.DUidQ77e.cjs');
+
+
+
+exports.QmAppLayout = appLayout.AppLayout;
+exports.appLayoutProps = appLayout.appLayoutProps;
+exports.default = appLayout.AppLayout;
+exports.normalizeSidebarWidth = appLayout.normalizeSidebarWidth;

package/es/components/app-layout/index.d.cts

@@ -0,0 +1,10 @@
+import { A as AppLayout } from '../../shared/components.B0eSL1OS.cjs';
+export { S as SidebarWidth, a as appLayoutProps, n as normalizeSidebarWidth } from '../../shared/components.B0eSL1OS.cjs';
+import 'vue';
+import '../../shared/components.OJRSZE6i.cjs';
+
+
+
+// @ts-ignore
+export = AppLayout;
+export { AppLayout as QmAppLayout };

package/es/components/app-layout/index.d.mts

@@ -0,0 +1,8 @@
+import { A as AppLayout } from '../../shared/components.B7T7B9Ys.mjs';
+export { S as SidebarWidth, a as appLayoutProps, n as normalizeSidebarWidth } from '../../shared/components.B7T7B9Ys.mjs';
+import 'vue';
+import '../../shared/components.OJRSZE6i.mjs';
+
+
+
+export { AppLayout as QmAppLayout, AppLayout as default };

package/es/components/app-layout/index.d.ts

@@ -0,0 +1,10 @@
+import { A as AppLayout } from '../../shared/components.Dy9SYm12.js';
+export { S as SidebarWidth, a as appLayoutProps, n as normalizeSidebarWidth } from '../../shared/components.Dy9SYm12.js';
+import 'vue';
+import '../../shared/components.OJRSZE6i.js';
+
+
+
+// @ts-ignore
+export = AppLayout;
+export { AppLayout as QmAppLayout };

package/es/components/app-layout/index.mjs

@@ -0,0 +1,8 @@
+import { A as AppLayout } from '../../shared/components.B4xRhtj-.mjs';
+export { a as appLayoutProps, n as normalizeSidebarWidth } from '../../shared/components.B4xRhtj-.mjs';
+import 'vue';
+import '../../shared/components.pcqpp-6-.mjs';
+
+
+
+export { AppLayout as QmAppLayout, AppLayout as default };

package/es/components/app-layout/style/index.js

@@ -0,0 +1,4 @@
+// QmAppLayout 样式入口（桌面端 task）：import 编译产物 CSS。
+// 发布形态：与 es/components/app-layout/style.css 同目录，由 resolver 按需注入；
+// 源码开发场景由 Vite 直接编译 index.scss（play 沙箱 / 命令式入口自引入）。
+import './style.css'

package/es/components/app-layout/style.css

@@ -0,0 +1,36 @@
+.qm-app-layout {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  color: var(--qm-app-layout-color);
+  background-color: var(--qm-app-layout-bg);
+}
+.qm-app-layout__titlebar {
+  flex-shrink: 0;
+}
+.qm-app-layout__body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+.qm-app-layout__sidebar {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  overflow: hidden auto;
+  background-color: var(--qm-app-layout-sidebar-bg);
+  border-right: var(--qm-app-layout-sidebar-border);
+}
+.qm-app-layout--collapsed .qm-app-layout__sidebar {
+  overflow: hidden;
+}
+.qm-app-layout__content {
+  box-sizing: border-box;
+  flex: 1;
+  min-width: 0;
+  padding: var(--qm-app-layout-content-padding);
+  overflow: auto;
+  background-color: var(--qm-app-layout-content-bg);
+}

package/es/components/badge/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const badge = require('../../shared/components.CFfTemQ4.cjs');
+require('vue');
+require('../../shared/components.DUidQ77e.cjs');
+
+
+
+exports.QmBadge = badge.Badge;
+exports.badgeProps = badge.badgeProps;
+exports.default = badge.Badge;

package/es/components/badge/index.d.cts

@@ -0,0 +1,10 @@
+import { a as Badge } from '../../shared/components.1J_ThqaI.cjs';
+export { B as BadgeType, b as badgeProps } from '../../shared/components.1J_ThqaI.cjs';
+import 'vue';
+import '../../shared/components.OJRSZE6i.cjs';
+
+
+
+// @ts-ignore
+export = Badge;
+export { Badge as QmBadge };

package/es/components/badge/index.d.mts

@@ -0,0 +1,8 @@
+import { a as Badge } from '../../shared/components.BzO68qwA.mjs';
+export { B as BadgeType, b as badgeProps } from '../../shared/components.BzO68qwA.mjs';
+import 'vue';
+import '../../shared/components.OJRSZE6i.mjs';
+
+
+
+export { Badge as QmBadge, Badge as default };

package/es/components/badge/index.d.ts

@@ -0,0 +1,10 @@
+import { a as Badge } from '../../shared/components.DHIKrYhN.js';
+export { B as BadgeType, b as badgeProps } from '../../shared/components.DHIKrYhN.js';
+import 'vue';
+import '../../shared/components.OJRSZE6i.js';
+
+
+
+// @ts-ignore
+export = Badge;
+export { Badge as QmBadge };

package/es/components/badge/index.mjs

@@ -0,0 +1,8 @@
+import { B as Badge } from '../../shared/components.C9WJVmII.mjs';
+export { b as badgeProps } from '../../shared/components.C9WJVmII.mjs';
+import 'vue';
+import '../../shared/components.pcqpp-6-.mjs';
+
+
+
+export { Badge as QmBadge, Badge as default };

package/es/components/badge/style/index.js

@@ -0,0 +1,2 @@
+// QmBadge 样式入口：import 编译产物 CSS（与 es/components/badge/style.css 同目录）
+import './style.css'

package/es/components/badge/style.css

@@ -0,0 +1,36 @@
+.qm-badge {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  vertical-align: middle;
+}
+.qm-badge__content {
+  z-index: var(--qm-badge-z-index);
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--qm-badge-height);
+  height: var(--qm-badge-height);
+  padding: var(--qm-badge-padding);
+  font-size: var(--qm-badge-font-size);
+  font-weight: var(--qm-badge-font-weight);
+  line-height: 1;
+  color: var(--qm-badge-color);
+  background-color: var(--qm-badge-bg);
+  border-radius: var(--qm-badge-border-radius);
+}
+.qm-badge__content--dot {
+  width: var(--qm-badge-dot-size);
+  min-width: 0;
+  height: var(--qm-badge-dot-size);
+  padding: 0;
+  border-radius: var(--qm-badge-border-radius);
+}
+.qm-badge--fixed .qm-badge__content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  translate: var(--qm-badge-offset);
+}

package/es/components/breadcrumb/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const breadcrumbItem = require('../../shared/components.B8lNpbQ9.cjs');
+require('vue');
+require('../../shared/components.DUidQ77e.cjs');
+
+
+
+exports.BREADCRUMB_CONTEXT_KEY = breadcrumbItem.BREADCRUMB_CONTEXT_KEY;
+exports.QmBreadcrumb = breadcrumbItem.Breadcrumb;
+exports.QmBreadcrumbItem = breadcrumbItem.breadcrumbItem;
+exports.breadcrumbItemProps = breadcrumbItem.breadcrumbItemProps;
+exports.breadcrumbProps = breadcrumbItem.breadcrumbProps;
+exports.default = breadcrumbItem.Breadcrumb;

package/es/components/breadcrumb/index.d.cts

@@ -0,0 +1,10 @@
+import { c as Breadcrumb } from '../../shared/components.qRljarsw.cjs';
+export { B as BREADCRUMB_CONTEXT_KEY, a as BreadcrumbContext, b as BreadcrumbItemEmits, d as QmBreadcrumbItem, e as breadcrumbItemProps, f as breadcrumbProps } from '../../shared/components.qRljarsw.cjs';
+import 'vue';
+import '../../shared/components.OJRSZE6i.cjs';
+
+
+
+// @ts-ignore
+export = Breadcrumb;
+export { Breadcrumb as QmBreadcrumb };

package/es/components/breadcrumb/index.d.mts

@@ -0,0 +1,8 @@
+import { c as Breadcrumb } from '../../shared/components.DtZ1M9RX.mjs';
+export { B as BREADCRUMB_CONTEXT_KEY, a as BreadcrumbContext, b as BreadcrumbItemEmits, d as QmBreadcrumbItem, e as breadcrumbItemProps, f as breadcrumbProps } from '../../shared/components.DtZ1M9RX.mjs';
+import 'vue';
+import '../../shared/components.OJRSZE6i.mjs';
+
+
+
+export { Breadcrumb as QmBreadcrumb, Breadcrumb as default };

package/es/components/breadcrumb/index.d.ts

@@ -0,0 +1,10 @@
+import { c as Breadcrumb } from '../../shared/components.BG88vlnG.js';
+export { B as BREADCRUMB_CONTEXT_KEY, a as BreadcrumbContext, b as BreadcrumbItemEmits, d as QmBreadcrumbItem, e as breadcrumbItemProps, f as breadcrumbProps } from '../../shared/components.BG88vlnG.js';
+import 'vue';
+import '../../shared/components.OJRSZE6i.js';
+
+
+
+// @ts-ignore
+export = Breadcrumb;
+export { Breadcrumb as QmBreadcrumb };

package/es/components/breadcrumb/index.mjs

@@ -0,0 +1,8 @@
+import { a as Breadcrumb } from '../../shared/components.C183F57T.mjs';
+export { B as BREADCRUMB_CONTEXT_KEY, b as QmBreadcrumbItem, c as breadcrumbItemProps, d as breadcrumbProps } from '../../shared/components.C183F57T.mjs';
+import 'vue';
+import '../../shared/components.pcqpp-6-.mjs';
+
+
+
+export { Breadcrumb as QmBreadcrumb, Breadcrumb as default };

package/es/components/breadcrumb/style/index.js

@@ -0,0 +1,4 @@
+// QmBreadcrumb 样式入口（导航 + 桌面端 task）：import 编译产物 CSS。
+// 发布形态：与 es/components/breadcrumb/style.css 同目录，由 resolver 按需注入；
+// 源码开发场景由 Vite 直接编译 index.scss（play 沙箱 / 命令式入口自引入）。
+import './style.css'

package/es/components/breadcrumb/style.css

@@ -0,0 +1,43 @@
+.qm-breadcrumb {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--qm-breadcrumb-font-size);
+  color: var(--qm-breadcrumb-color);
+}
+.qm-breadcrumb__list {
+  display: flex;
+  gap: var(--qm-breadcrumb-gap);
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.qm-breadcrumb__separator {
+  display: inline-flex;
+  align-items: center;
+  margin: var(--qm-breadcrumb-separator-margin);
+  color: var(--qm-breadcrumb-separator-color);
+  user-select: none;
+}
+
+.qm-breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+}
+.qm-breadcrumb-item--last {
+  color: var(--qm-breadcrumb-active-color);
+}
+
+.qm-breadcrumb__link {
+  color: var(--qm-breadcrumb-color);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color var(--qm-breadcrumb-transition) ease;
+}
+.qm-breadcrumb__link:hover {
+  color: var(--qm-breadcrumb-hover-color);
+}
+
+.qm-breadcrumb__current {
+  color: var(--qm-breadcrumb-active-color);
+}

package/es/components/button/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const button = require('../../shared/components.w4bSE8TV.cjs');
+require('vue');
+require('../../shared/components.CRtd1JMp.cjs');
+require('@qingmingmu/icons');
+require('../../shared/components.DUidQ77e.cjs');
+
+
+
+exports.buttonProps = button.buttonProps;
+exports.default = button.Button;

package/es/components/button/index.d.cts

@@ -0,0 +1,10 @@
+import { QmButton as Button } from '../../index.cjs';
+export { B as ButtonEmits, a as ButtonType, c as buttonProps } from '../../shared/components.FkGOusVh.cjs';
+import 'vue';
+import '../../shared/components.b5GjJzDh.cjs';
+import '@qingmingmu/icons';
+import '../../shared/components.OJRSZE6i.cjs';
+
+
+
+export = Button;

package/es/components/button/index.d.mts

@@ -0,0 +1,10 @@
+import { b as Button } from '../../shared/components.DHeLTopf.mjs';
+export { B as ButtonEmits, a as ButtonType, c as buttonProps } from '../../shared/components.DHeLTopf.mjs';
+import 'vue';
+import '../../shared/components.DCuPins-.mjs';
+import '@qingmingmu/icons';
+import '../../shared/components.OJRSZE6i.mjs';
+
+
+
+export { Button as default };

package/es/components/button/index.d.ts

@@ -0,0 +1,10 @@
+import { QmButton as Button } from '../../index.js';
+export { B as ButtonEmits, a as ButtonType, c as buttonProps } from '../../shared/components.SHnZTfnN.js';
+import 'vue';
+import '../../shared/components.C6sLxXPo.js';
+import '@qingmingmu/icons';
+import '../../shared/components.OJRSZE6i.js';
+
+
+
+export = Button;

package/es/components/button/index.mjs

@@ -0,0 +1,10 @@
+import { B as Button } from '../../shared/components.C1PQgace.mjs';
+export { b as buttonProps } from '../../shared/components.C1PQgace.mjs';
+import 'vue';
+import '../../shared/components.D3on6_fI.mjs';
+import '@qingmingmu/icons';
+import '../../shared/components.pcqpp-6-.mjs';
+
+
+
+export { Button as default };

package/es/components/button/style/index.js

@@ -0,0 +1,4 @@
+// 样式入口（组件体系设计 §6.4）：import 编译产物 CSS。
+// 发布形态：与 es/components/button/style.css 同目录，由 resolver 按需注入；
+// 源码开发场景由 Vite 直接编译 index.scss（play 沙箱）。
+import './style.css'