web-kxjl-components 0.0.0-stage → 1.0.0

package/README.md

@@ -1,3 +1,52 @@
-# Temporary Holding Version
+# web-kxjl-components
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+公司公共组件库，基于 Vue 3 + TypeScript + Vite + Element Plus，发布到公网 npm。
+
+## 使用
+
+```bash
+npm install web-kxjl-components
+```
+
+宿主项目需自带 `vue`、`element-plus`（peerDependencies），组件库不会重复打包这两个依赖。
+
+按需引入（推荐）：
+
+```ts
+import { KxEmpty } from "web-kxjl-components";
+import "web-kxjl-components/style.css";
+```
+
+全量注册：
+
+```ts
+import KxComponents from "web-kxjl-components";
+import "web-kxjl-components/style.css";
+
+app.use(KxComponents);
+```
+
+## 开发
+
+```bash
+npm install
+npm run build   # vue-tsc 生成类型声明 + vite 库模式构建，产物在 dist/
+```
+
+新增组件：在 `src/components/<kx-xxx>/index.vue` 编写，然后在 `src/index.ts` 中导入、加入 `components` 并具名导出。
+
+## 提交约定
+
+直接在当前分支上提交，不额外新建分支；提交信息遵循 Conventional Commits（如 `feat(kx-xxx): ...`）。
+
+## 发布
+
+当前机器的 `~/.npmrc` 默认指向 npmmirror 镜像，镜像不能发布，`publishConfig` 已指定公网 registry。
+
+```bash
+npm login --registry https://registry.npmjs.org/
+npm version patch   # 或 minor / major
+npm publish
+```
+
+首次发布版本为 `1.0.0`。包发布到公网后任何人都能安装，不要放入内部地址、密钥等敏感内容。

package/dist/components/kx-app-switcher/app-icon.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    /** 图标地址，为空或加载失败时显示默认图标 */
+    src?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/kx-app-switcher/index.vue.d.ts

@@ -0,0 +1,28 @@
+import type { ApiResult, Product } from "./types";
+type __VLS_Props = {
+    /** 由宿主注入的请求函数，返回接口原始响应 */
+    fetcher: () => Promise<ApiResult<Product[]>>;
+    /** 由宿主注入的图标地址处理函数（拼接前缀、附带 token 等），仅处理相对路径；完整地址（http(s)、//、data、blob）不会传入；不传则图标地址原样使用 */
+    staticFileFormat?: (path: string) => string;
+    /** 无 sysUrl 的系统的悬浮提示 */
+    disabledTip?: string;
+};
+declare const __VLS_template: () => {
+    __VLS_Slots: {
+        default?: (props: {
+            visible: boolean;
+        }) => any;
+    };
+};
+type __VLS_Slots = ReturnType<typeof __VLS_template>['__VLS_Slots'];
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabledTip: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/kx-app-switcher/types.d.ts

@@ -0,0 +1,31 @@
+/** 产品下的系统 */
+export interface ProductSystem {
+    id: number;
+    sysCode: string;
+    sysName: string;
+    description?: string;
+    /** 图标，相对路径交由 staticFileFormat 处理，完整地址直接使用，空则使用默认图标 */
+    icon?: string;
+    /** 系统地址，缺失时该系统置灰不可点；相对路径按当前域名拼接 */
+    sysUrl?: string;
+    /** 逗号分隔的标签 */
+    tags?: string;
+    sortNum?: number;
+}
+/** 产品（含其下系统） */
+export interface Product {
+    id: number;
+    productCode: string;
+    productName: string;
+    description?: string;
+    icon?: string;
+    sortNum?: number;
+    systems: ProductSystem[];
+}
+/** 接口统一响应结构 */
+export interface ApiResult<T> {
+    code: number;
+    data: T;
+    msg?: string;
+    dataType?: string;
+}

package/dist/components/kx-empty/index.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    /** 提示文案 */
+    description?: string;
+};
+declare const __VLS_template: () => {
+    __VLS_Slots: {
+        default?: (props: {}) => any;
+    };
+};
+type __VLS_Slots = ReturnType<typeof __VLS_template>['__VLS_Slots'];
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    description: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import type { App } from "vue";
+import KxEmpty from "./components/kx-empty/index.vue";
+import KxAppSwitcher from "./components/kx-app-switcher/index.vue";
+export { KxEmpty, KxAppSwitcher };
+export type { ApiResult, Product, ProductSystem, } from "./components/kx-app-switcher/types";
+/** 全量注册：app.use(KxComponents) */
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/dist/index.js

@@ -0,0 +1,163 @@
+import { ElEmpty as e, ElLoadingDirective as t, ElPopover as n, ElTooltip as r } from "element-plus/es";
+import "element-plus/es/components/base/style/css";
+import "element-plus/es/components/empty/style/css";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createStaticVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, watch as y, withCtx as b, withDirectives as x } from "vue";
+import "element-plus/es/components/loading/style/css";
+import "element-plus/es/components/popover/style/css";
+import "element-plus/es/components/tooltip/style/css";
+// src/components/kx-empty/index.vue?vue&type=script&setup=true&lang.ts
+var S = { class: "kx-empty" }, C = /*@__PURE__*/ f({
+	name: "KxEmpty",
+	__name: "index",
+	props: { description: { default: "暂无数据" } },
+	setup(t) {
+		return (n, r) => {
+			let i = e;
+			return m(), c("div", S, [d(i, { description: t.description }, {
+				default: b(() => [_(n.$slots, "default", {}, void 0, !0)]),
+				_: 3
+			}, 8, ["description"])]);
+		};
+	}
+}), w = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, T = /*#__PURE__*/ w(C, [["__scopeId", "data-v-392d5d37"]]), E = ["src"], D = {
+	key: 1,
+	class: "kx-app-icon",
+	viewBox: "0 0 24 24",
+	"aria-hidden": "true"
+}, O = /*#__PURE__*/ w(/* @__PURE__ */ f({
+	name: "KxAppIcon",
+	__name: "app-icon",
+	props: { src: {} },
+	setup(e) {
+		let t = e, n = h(!1);
+		return y(() => t.src, () => {
+			n.value = !1;
+		}), (t, r) => e.src && !n.value ? (m(), c("img", {
+			key: 0,
+			class: "kx-app-icon",
+			src: e.src,
+			alt: "",
+			onError: r[0] ||= (e) => n.value = !0
+		}, null, 40, E)) : (m(), c("svg", D, [...r[1] ||= [u("<rect width=\"24\" height=\"24\" rx=\"6\" fill=\"var(--el-color-primary)\" data-v-352f5b8f></rect><rect x=\"5\" y=\"5\" width=\"6\" height=\"6\" rx=\"1.5\" fill=\"#fff\" data-v-352f5b8f></rect><rect x=\"13\" y=\"5\" width=\"6\" height=\"6\" rx=\"1.5\" fill=\"#fff\" data-v-352f5b8f></rect><rect x=\"5\" y=\"13\" width=\"6\" height=\"6\" rx=\"1.5\" fill=\"#fff\" data-v-352f5b8f></rect><rect x=\"13\" y=\"13\" width=\"6\" height=\"6\" rx=\"1.5\" fill=\"#fff\" data-v-352f5b8f></rect>", 5)]]));
+	}
+}), [["__scopeId", "data-v-352f5b8f"]]), k = { class: "kx-app-switcher__trigger" }, A = { class: "kx-app-switcher__panel" }, j = {
+	key: 0,
+	class: "kx-app-switcher__card kx-app-switcher__systems"
+}, M = [
+	"aria-disabled",
+	"title",
+	"onClick"
+], N = { class: "kx-app-switcher__system-icon" }, P = { class: "kx-app-switcher__system-name" }, F = { class: "kx-app-switcher__card kx-app-switcher__products" }, I = [
+	"title",
+	"onMouseenter",
+	"onFocus",
+	"onClick"
+], L = { class: "kx-app-switcher__product-name" }, R = { class: "kx-app-switcher__product-icon" }, z = /*#__PURE__*/ w(/* @__PURE__ */ f({
+	name: "KxAppSwitcher",
+	__name: "index",
+	props: {
+		fetcher: {},
+		staticFileFormat: {},
+		disabledTip: { default: "暂未开通" }
+	},
+	setup(u) {
+		let f = u, S = h(!1), C = h(!1), w = h(!1), T = h([]), E = h(null), D = /^(https?:|data:|blob:|\/\/)/i;
+		function z(e) {
+			return [...e].sort((e, t) => (e.sortNum ?? 0) - (t.sortNum ?? 0));
+		}
+		let B = a(() => T.value.find((e) => e.id === E.value)?.systems ?? []);
+		async function V() {
+			if (!(C.value || w.value)) {
+				C.value = !0;
+				try {
+					let e = await f.fetcher();
+					e.code === 0 && Array.isArray(e.data) && (T.value = z(e.data).map((e) => ({
+						...e,
+						systems: z(e.systems ?? [])
+					})), E.value = T.value[0]?.id ?? null, w.value = !0);
+				} catch {} finally {
+					C.value = !1;
+				}
+			}
+		}
+		y(S, (e) => {
+			e && V();
+		});
+		function H(e) {
+			return e ? D.test(e) ? e : f.staticFileFormat ? f.staticFileFormat(e) : e : "";
+		}
+		function U(e) {
+			if (!e.sysUrl) return;
+			let t;
+			try {
+				t = new URL(e.sysUrl, window.location.origin);
+			} catch {
+				return;
+			}
+			(t.protocol === "http:" || t.protocol === "https:") && (window.open(t.href, "_blank", "noopener,noreferrer"), S.value = !1);
+		}
+		return (a, f) => {
+			let h = r, y = e, w = n, D = t;
+			return m(), o(w, {
+				visible: S.value,
+				"onUpdate:visible": f[0] ||= (e) => S.value = e,
+				trigger: "click",
+				placement: "bottom-end",
+				width: 430,
+				"show-arrow": !1,
+				"popper-style": {
+					padding: 0,
+					border: "none",
+					background: "transparent",
+					boxShadow: "none"
+				}
+			}, {
+				reference: b(() => [l("span", k, [_(a.$slots, "default", { visible: S.value }, void 0, !0)])]),
+				default: b(() => [x((m(), c("div", A, [B.value.length ? (m(), c("div", j, [(m(!0), c(i, null, g(B.value, (e) => (m(), o(h, {
+					key: e.id,
+					content: u.disabledTip,
+					disabled: !!e.sysUrl,
+					placement: "left"
+				}, {
+					default: b(() => [l("button", {
+						type: "button",
+						class: p(["kx-app-switcher__system", { "is-disabled": !e.sysUrl }]),
+						"aria-disabled": !e.sysUrl,
+						title: e.description,
+						onClick: (t) => U(e)
+					}, [l("span", N, [d(O, { src: H(e.icon) }, null, 8, ["src"])]), l("span", P, v(e.sysName), 1)], 10, M)]),
+					_: 2
+				}, 1032, ["content", "disabled"]))), 128))])) : s("", !0), l("div", F, [
+					f[1] ||= l("div", { class: "kx-app-switcher__title" }, "应用切换", -1),
+					!C.value && !T.value.length ? (m(), o(y, {
+						key: 0,
+						"image-size": 60,
+						description: "暂无应用"
+					})) : s("", !0),
+					(m(!0), c(i, null, g(T.value, (e) => (m(), c("button", {
+						key: e.id,
+						type: "button",
+						class: p(["kx-app-switcher__product", { "is-active": e.id === E.value }]),
+						title: e.description,
+						onMouseenter: (t) => E.value = e.id,
+						onFocus: (t) => E.value = e.id,
+						onClick: (t) => E.value = e.id
+					}, [l("span", L, v(e.productName), 1), l("span", R, [d(O, { src: H(e.icon) }, null, 8, ["src"])])], 42, I))), 128))
+				])])), [[D, C.value]])]),
+				_: 3
+			}, 8, ["visible"]);
+		};
+	}
+}), [["__scopeId", "data-v-5a0f26bb"]]), B = {
+	KxEmpty: T,
+	KxAppSwitcher: z
+}, V = { install(e) {
+	Object.entries(B).forEach(([t, n]) => {
+		e.component(t, n);
+	});
+} };
+export { z as KxAppSwitcher, T as KxEmpty, V as default };

package/dist/web-kxjl-components.css

@@ -0,0 +1,2 @@
+.kx-empty[data-v-392d5d37]{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.kx-app-icon[data-v-352f5b8f]{object-fit:contain;width:100%;height:100%;display:block}.kx-app-switcher__trigger[data-v-5a0f26bb]{cursor:pointer;display:inline-flex}.kx-app-switcher__panel[data-v-5a0f26bb]{justify-content:flex-end;align-items:flex-start;gap:8px;min-height:80px;display:flex}.kx-app-switcher__card[data-v-5a0f26bb]{background:var(--el-bg-color-overlay);border:1px solid var(--el-border-color-light);box-shadow:var(--el-box-shadow-light);border-radius:8px;padding:12px}.kx-app-switcher__systems[data-v-5a0f26bb]{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.kx-app-switcher__system[data-v-5a0f26bb]{color:var(--el-text-color-primary);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;gap:10px;padding:8px;font-size:14px;display:flex}.kx-app-switcher__system[data-v-5a0f26bb]:hover{background:var(--el-fill-color-light)}.kx-app-switcher__system.is-disabled[data-v-5a0f26bb]{color:var(--el-text-color-disabled);cursor:not-allowed}.kx-app-switcher__system.is-disabled[data-v-5a0f26bb]:hover{background:0 0}.kx-app-switcher__system.is-disabled .kx-app-switcher__system-icon[data-v-5a0f26bb]{opacity:.4;filter:grayscale()}.kx-app-switcher__system-icon[data-v-5a0f26bb]{flex:none;width:24px;height:24px}.kx-app-switcher__system-name[data-v-5a0f26bb]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kx-app-switcher__products[data-v-5a0f26bb]{flex-direction:column;flex:none;gap:8px;width:200px;display:flex}.kx-app-switcher__title[data-v-5a0f26bb]{color:var(--el-text-color-regular);font-size:14px}.kx-app-switcher__product[data-v-5a0f26bb]{height:56px;color:var(--el-text-color-primary);cursor:pointer;background:var(--el-fill-color-lighter);border:1px solid #0000;border-radius:8px;justify-content:space-between;align-items:center;padding:0 12px;font-size:15px;font-weight:600;display:flex}.kx-app-switcher__product.is-active[data-v-5a0f26bb]{background:var(--el-color-primary-light-9);border-color:var(--el-color-primary-light-5)}.kx-app-switcher__product-icon[data-v-5a0f26bb]{flex:none;width:36px;height:36px}
+/*$vite$:1*/

package/package.json

@@ -1,6 +1,49 @@
 {
   "name": "web-kxjl-components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "公司公共组件库（Vue 3 + Element Plus）",
+  "type": "module",
+  "license": "UNLICENSED",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/web-kxjl-components.css"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "play": "vite",
+    "build": "vite build && vue-tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "element-plus": "^2.14.0",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.12.3",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/tsconfig": "^0.9.1",
+    "element-plus": "^2.14.1",
+    "sass-embedded": "^1.100.0",
+    "typescript": "~6.0.2",
+    "unplugin-vue-components": "^32.1.0",
+    "vite": "^8.0.12",
+    "vue": "^3.5.34",
+    "vue-tsc": "^3.2.8"
+  }
+}