sky-ui-kit 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,97 @@
-# Temporary Holding Version
-
-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.
+# UsersSite Element Plus 主题预览
+
+从原项目提取主题，提供独立 Vue 3 / Element Plus 预览站及可发布的样式包。
+
+组件库分类、统一出口和兼容规则见 [COMPONENT-LIBRARY.md](docs/COMPONENT-LIBRARY.md)。基础组件使用 `Ui` 前缀，直接复用 Element Plus API；项目层保留现有组件名。两层共享项目主题。
+
+发布后反向对接以 [INTEGRATION.md](docs/INTEGRATION.md) 为准；逐页依赖见 [PAGE-INVENTORY.md](docs/PAGE-INVENTORY.md)，全部原组件清单见 [COMPONENT-INVENTORY.md](docs/COMPONENT-INVENTORY.md)。完整静态扫描数据保存在 docs/project-audit.json，可用 `node scripts/audit-project.mjs` 更新。扫描覆盖不代表全部业务组件已经迁入包。
+
+全部原组件调用依据见 [LEGACY-USAGE.md](docs/LEGACY-USAGE.md)。包内已导出的 10 个组件均有预览和接入示例；Element Plus 展示区提供完整演示源码。业务组件的调用片段保留原页面上下文，不能当作独立可运行示例。
+
+## 本地运行
+
+```powershell
+cd D:\Work\01-项目code\一体化平台\webv1\element-plus-theme
+npm install
+npm run dev
+```
+
+打开 http://127.0.0.1:5180 。支持明暗切换、六色调色板编辑、字号 / 圆角 / 控件高度 / 阴影调整、浏览器保存、JSON 导入导出。鼠标悬浮、键盘聚焦、输入校验、选择器浮层、日期选择器、弹窗及抽屉可直接核对。
+
+## 提取范围与差异
+
+- `src/styles/theme.css`：原项目根变量与暗色变量的快照。
+- `src/styles/vfit-vars.scss`：原项目尺寸变量，默认缩放比例 1，不依赖 VFit 运行时。
+- `src/stores/theme.ts`：保留原主题状态、默认值、迁移及 CSS 派生逻辑；预览站继续保留原浏览器存储键 `userssite-element-plus-theme`，不影响组件包名称。
+- `src/styles/element-plus.css`：新增的 Element Plus 状态适配层，包含主色梯度、禁用、浮层和共享成功 / 警告语义色。这部分需要重点核对。
+- `src/styles/site.css`：仅预览站布局，不进入 npm 样式包。
+- 不包含地图样式规则、业务数据色带、业务页面局部样式、全局 body 重置或字体二进制。HarmonyOS Sans SC 可由使用方自行加载，否则使用系统中文字体回退。
+
+原项目文件不随预览站修改；当前目录是独立快照，后续主题修订在此目录进行。CSS 包使用全局 `:root` / `.theme-dark` 变量，应在 Element Plus CSS 之后加载。
+
+## 项目原生组件
+
+预览站的「项目原生组件」直接使用原项目 `src/components/common` 中的 AppSelect、TreeSelectPanel、MapTimeline 和 TimeRangeQuickSelect。保留原有注释、局部 CSS、下拉浮层、动画及交互逻辑。独立包仅补充显式 Element Plus 导入和类型兼容修正；AppSelect 值类型补充多选数组。
+
+`MapTimeline` 是项目中实况 / 预报分段时间轴；旧的 `src/components/timeline/index.vue` 小时时间轴尚未迁入。当前树节点、站点和时间序列为静态示例，不连接原业务接口。
+
+```ts
+import 'element-plus/dist/index.css'
+import 'sky-ui-kit/style.css'
+import { AppSelect, TreeSelectPanel, MapTimeline, TimeRangeQuickSelect } from 'sky-ui-kit/components'
+```
+
+组件包额外需要 `@element-plus/icons-vue` 和 `motion-v`。组件 CSS 已合并到 `style.css`，包含 Vue scoped 样式。
+
+## 菜单样式
+
+## 地图工具样式
+
+独立展示区提供竖向地图工具栏、横向排列和静态图层控制浮动面板。`MapTools` 提取原 `MapToolbar.vue` 的按钮样式，默认包含图层、模块操作、刷新、定位、地图设置、空间分析和右键菜单。通过 `active` 指定选中工具，通过 `horizontal` 展示横向排列；支持 v-model:active、tool-click 和 context-change 事件；使用方通过事件接入地图、GIS 或业务接口。组件从 `sky-ui-kit/components` 导出，CSS 合并到 `style.css`。
+
+## 地图与普通菜单
+
+新增 `MapSideMenu` 地图胶囊菜单，样式直接提取自原项目 `SideMenuMap.vue`，保留分类圆形图标、橙色标题、蓝色子项、选中状态、连接线、顶部搜索胶囊和纯图标状态。图标使用 Element Plus 图标，可通过菜单项的 `icon` 属性传入自定义 Vue 图标组件。属性为 `title`、`active`、`dark`、`compact`、`items`（key / label / icon）。支持菜单选择、搜索过滤、分类展开收起和图标模式切换；通过 v-model:active、v-model:compact 和 select 事件接入业务。
+
+ProjectMenu 从原 Header 和 SideMenu 提取独立菜单样式，仅展示横向、纵向、默认、选中和禁用状态。
+
+从 sky-ui-kit/components 导入 ProjectMenu。属性：direction（horizontal / vertical）、active、items（key / label / disabled）及 groups（label / items）。菜单支持选择和分组折叠，通过 v-model:active 和 select 事件接入业务，不包含平台整体结构。
+
+## 接入其他项目
+
+无需导入 useThemeStore，也无需安装 Pinia。直接引入 Element Plus CSS 与库 CSS，项目已有的同名变量优先；未定义的变量采用库默认值。详细优先级及暗色规则见 [CSS-THEME.md](docs/CSS-THEME.md)。
+
+```ts
+import 'element-plus/dist/index.css'
+import 'sky-ui-kit/style.css'
+import { UiButton, AppSelect } from 'sky-ui-kit'
+```
+
+默认暗色：在 html 添加 theme-dark 类。当前项目可以继续使用自己的主题 store。预览站调色面板的 store 仅用于站内演示，不导出到 npm 包。
+
+## 检查与打包
+
+```sh
+npm run typecheck
+npm run build
+npm pack --dry-run
+```
+
+`site-dist/` 是可部署的预览网站，`dist/` 是 npm 库产物。npm 包仅包含库产物、主题 store 源文件与 README，不包含预览网站及原业务代码。
+
+## 核对完成后发布
+
+当前 `private: true` 用于防止未审核主题发布。包名已确定为 `sky-ui-kit`，尚未核验 npm 名称可用性。发布前确认包名或 npm scope、版本、代码及字体授权、许可证，并将 `private` 删除或改为 false。若使用 scope，保持接入示例与最终包名一致。
+
+```sh
+npm login
+npm run typecheck
+npm pack --dry-run
+npm publish --access public
+```
+
+`prepack` 会自动构建。不要把 npm token 写入此目录。本次仅准备预览及包结构，等待样式核对后再发布。
+
+## 样式隔离
+
+默认 style.css 只给库组件作用域设置样式，作用域之外的原生 Element Plus 不受库 CSS 覆盖。主动整站换肤才额外导入 global.css。浮层、局部变量和默认 teleported 差异见 [CSS-THEME.md](docs/CSS-THEME.md)。开发验证页：[样式隔离验证](http://127.0.0.1:5180/isolation.html)。

package/dist/components/AppSelect.vue.d.ts

@@ -0,0 +1,28 @@
+export type AppSelectValue = string | number | boolean | Record<string, unknown> | AppSelectValue[] | null | undefined;
+export type AppSelectOption = {
+    label: string;
+    value: AppSelectValue;
+    disabled?: boolean;
+} | string | number;
+type __VLS_Props = {
+    modelValue?: AppSelectValue;
+    options?: AppSelectOption[];
+    emptyLabel?: string;
+    popperClass?: string;
+    teleported?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: AppSelectValue) => any;
+    "update:modelValue": (value: AppSelectValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: AppSelectValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: AppSelectValue) => any) | undefined;
+}>, {
+    popperClass: string;
+    teleported: boolean;
+    modelValue: string | number | boolean | Record<string, unknown> | AppSelectValue[] | null;
+    options: AppSelectOption[];
+    emptyLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/AtlasMapTitle.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    title: string;
+    subtitle?: string;
+    rightOpen?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    subtitle: string;
+    rightOpen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/AtlasRightToggleButton.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    open?: boolean;
+    openTitle?: string;
+    closeTitle?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+}>, {
+    open: boolean;
+    openTitle: string;
+    closeTitle: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/MapSideMenu.vue.d.ts

@@ -0,0 +1,30 @@
+import type { Component } from 'vue';
+export interface MapMenuItem {
+    key: string;
+    label: string;
+    icon?: Component;
+}
+type __VLS_Props = {
+    title?: string;
+    active?: string;
+    dark?: boolean;
+    compact?: boolean;
+    items?: MapMenuItem[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: MapMenuItem) => any;
+    "update:active": (key: string) => any;
+    "update:compact": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: MapMenuItem) => any) | undefined;
+    "onUpdate:active"?: ((key: string) => any) | undefined;
+    "onUpdate:compact"?: ((value: boolean) => any) | undefined;
+}>, {
+    title: string;
+    dark: boolean;
+    active: string;
+    items: MapMenuItem[];
+    compact: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/MapTimeline.vue.d.ts

@@ -0,0 +1,87 @@
+type IntervalUnit = 'minute' | 'hour' | 'day' | 'month' | 'year';
+type TimelineKind = 'observed' | 'forecast';
+type TimelineTimeInput = string | number | Date;
+export interface TimelinePoint {
+    index: number;
+    offset: number;
+    time: Date;
+    value: string;
+    label: string;
+    kind: TimelineKind;
+    disabled?: boolean;
+}
+type __VLS_Props = {
+    modelValue?: number;
+    startTime?: TimelineTimeInput;
+    points?: TimelinePoint[];
+    steps?: number;
+    pastSteps?: number;
+    futureSteps?: number;
+    interval?: number;
+    unit?: IntervalUnit;
+    playing?: boolean;
+    speed?: number;
+    speeds?: number[];
+    internalPlayback?: boolean;
+    pageSize?: number;
+    loop?: boolean;
+    minTime?: TimelineTimeInput;
+    maxTime?: TimelineTimeInput;
+    forecastCount?: number;
+    showScale?: boolean;
+    showCurrentMarker?: boolean;
+    timeZone?: string;
+};
+declare function setStartTime(value: TimelineTimeInput): void;
+declare function handleJumpChange(value: Date | string | number | null): void;
+declare var __VLS_50: {
+    startTime: Date;
+    activePoint: TimelinePoint;
+    activeIndex: number;
+    value: Date | null;
+    setStartTime: typeof setStartTime;
+    jumpToTime: typeof handleJumpChange;
+};
+type __VLS_Slots = {} & {
+    'date-select'?: (props: typeof __VLS_50) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (point: TimelinePoint) => any;
+    pause: () => any;
+    play: () => any;
+    "update:modelValue": (value: number) => any;
+    "update:startTime": (value: TimelineTimeInput) => any;
+    "update:playing": (value: boolean) => any;
+    "update:speed": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((point: TimelinePoint) => any) | undefined;
+    onPause?: (() => any) | undefined;
+    onPlay?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    "onUpdate:startTime"?: ((value: TimelineTimeInput) => any) | undefined;
+    "onUpdate:playing"?: ((value: boolean) => any) | undefined;
+    "onUpdate:speed"?: ((value: number) => any) | undefined;
+}>, {
+    playing: boolean;
+    interval: number;
+    loop: boolean;
+    modelValue: number;
+    pageSize: number;
+    startTime: TimelineTimeInput;
+    points: TimelinePoint[];
+    steps: number;
+    unit: IntervalUnit;
+    speed: number;
+    speeds: number[];
+    internalPlayback: boolean;
+    showScale: boolean;
+    showCurrentMarker: boolean;
+}, {}, {}, {}, 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/MapTools.vue.d.ts

@@ -0,0 +1,21 @@
+import { type Component } from 'vue';
+type __VLS_Props = {
+    active?: string;
+    horizontal?: boolean;
+    icons?: Record<string, Component>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:active": (key: string) => any;
+    "tool-click": (key: string) => any;
+    "context-change": (enabled: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:active"?: ((key: string) => any) | undefined;
+    "onTool-click"?: ((key: string) => any) | undefined;
+    "onContext-change"?: ((enabled: boolean) => any) | undefined;
+}>, {
+    horizontal: boolean;
+    icons: Record<string, Component>;
+    active: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/ProcessDataTable.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    times: string[];
+    series: {
+        name: string;
+        data: (number | null)[];
+    }[];
+    loading?: boolean;
+};
+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/ProjectMenu.vue.d.ts

@@ -0,0 +1,31 @@
+import { type Component } from 'vue';
+export interface ProjectMenuItem {
+    key: string;
+    label: string;
+    disabled?: boolean;
+    icon?: Component;
+}
+export interface ProjectMenuGroup {
+    label: string;
+    items: ProjectMenuItem[];
+}
+type __VLS_Props = {
+    direction?: 'horizontal' | 'vertical';
+    active?: string;
+    items?: ProjectMenuItem[];
+    groups?: ProjectMenuGroup[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: ProjectMenuItem) => any;
+    "update:active": (key: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: ProjectMenuItem) => any) | undefined;
+    "onUpdate:active"?: ((key: string) => any) | undefined;
+}>, {
+    direction: "horizontal" | "vertical";
+    active: string;
+    items: ProjectMenuItem[];
+    groups: ProjectMenuGroup[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/TimeRangeQuickSelect.vue.d.ts

@@ -0,0 +1,22 @@
+export type TimeRangeQuickOption = {
+    key: string;
+    label: string;
+    amount?: number;
+    unit?: 'hour' | 'day';
+};
+type __VLS_Props = {
+    modelValue: string;
+    options: TimeRangeQuickOption[];
+    ariaLabel?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (option: TimeRangeQuickOption) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((option: TimeRangeQuickOption) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    ariaLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/TreeSelectPanel.vue.d.ts

@@ -0,0 +1,57 @@
+export interface TreeSelectNode {
+    id: string | number;
+    label: string;
+    tag?: string;
+    disabled?: boolean;
+    children?: TreeSelectNode[];
+    [key: string]: unknown;
+}
+export interface TreeSelectCategory {
+    type: string;
+    label: string;
+    children: TreeSelectNode[];
+}
+type __VLS_Props = {
+    modelValue?: string | number | null;
+    categories?: TreeSelectCategory[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    fallbackTypeLabel?: string;
+    popoverWidth?: string | number;
+    defaultActiveType?: string;
+    defaultExpandAll?: boolean;
+    closeOnSelect?: boolean;
+    closeOnMouseLeave?: boolean;
+    dark?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (node: TreeSelectNode, category: TreeSelectCategory) => any;
+    change: (payload: {
+        node: TreeSelectNode;
+        category: TreeSelectCategory;
+    }) => any;
+    "update:modelValue": (value: string | number | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((node: TreeSelectNode, category: TreeSelectCategory) => any) | undefined;
+    onChange?: ((payload: {
+        node: TreeSelectNode;
+        category: TreeSelectCategory;
+    }) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number | null) => any) | undefined;
+}>, {
+    dark: boolean;
+    placeholder: string;
+    modelValue: string | number | null;
+    emptyText: string;
+    defaultExpandAll: boolean;
+    categories: TreeSelectCategory[];
+    searchPlaceholder: string;
+    fallbackTypeLabel: string;
+    popoverWidth: string | number;
+    defaultActiveType: string;
+    closeOnSelect: boolean;
+    closeOnMouseLeave: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;