@vela-studio/ui 1.0.1

package/dist/style.css

@@ -0,0 +1 @@
+.scripting-container[data-v-a842ba5d]{display:flex;flex-direction:column;gap:12px;height:100%}.header[data-v-a842ba5d]{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:1px solid #3c3c3c}.title[data-v-a842ba5d]{display:flex;align-items:center;gap:6px;font-weight:600;font-size:16px}.section-title[data-v-a842ba5d]{font-size:12px;opacity:.7;margin-bottom:6px;text-transform:uppercase}.code-section[data-v-a842ba5d]{flex-shrink:0}.code-block[data-v-a842ba5d]{margin:0;padding:12px;background:#0000004d;border-radius:4px;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}.output-section[data-v-a842ba5d]{flex:1;min-height:0;display:flex;flex-direction:column}.output-block[data-v-a842ba5d]{flex:1;margin:0;padding:12px;background:#0003;border-radius:4px;overflow:auto;white-space:pre-wrap;word-wrap:break-word;color:#4ec9b0}.error-output[data-v-a842ba5d]{flex:1;padding:12px;background:#dc26261a;border:1px solid rgba(220,38,38,.3);border-radius:4px;color:#f87171;overflow:auto}.placeholder[data-v-a842ba5d]{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;gap:8px;opacity:.5}.placeholder .el-icon[data-v-a842ba5d]{font-size:32px}.state-container[data-v-d334f558]{display:flex;flex-direction:column;gap:12px;height:100%}.header[data-v-d334f558]{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:1px solid #3c3c3c}.title[data-v-d334f558]{display:flex;align-items:center;gap:6px;font-weight:600;font-size:16px}.state-list[data-v-d334f558]{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.state-item[data-v-d334f558]{padding:12px;background:#0003;border-radius:4px;border:1px solid rgba(255,255,255,.1)}.state-key[data-v-d334f558]{display:flex;align-items:center;gap:6px;font-weight:600;margin-bottom:6px;color:#4fc3f7}.state-value[data-v-d334f558]{display:flex;align-items:center;gap:8px;padding-left:24px}.value-text[data-v-d334f558]{flex:1;word-break:break-all}.json-view[data-v-d334f558]{flex:1;overflow:auto}.json-block[data-v-d334f558]{margin:0;padding:12px;background:#0000004d;border-radius:4px;white-space:pre;overflow-x:auto;color:#9cdcfe}.table-view[data-v-d334f558]{flex:1;overflow:auto}.placeholder[data-v-d334f558]{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;gap:8px;opacity:.5}.placeholder .el-icon[data-v-d334f558]{font-size:32px}.trigger-container[data-v-8a732abe]{display:flex;flex-direction:column;gap:12px;height:100%}.header[data-v-8a732abe]{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:1px solid #3c3c3c}.title[data-v-8a732abe]{display:flex;align-items:center;gap:6px;font-weight:600;font-size:16px}.controls[data-v-8a732abe]{display:flex;gap:8px;align-items:center}.info-section[data-v-8a732abe]{display:flex;gap:16px;flex-wrap:wrap;padding:8px 0}.info-item[data-v-8a732abe]{display:flex;align-items:center;gap:6px}.label[data-v-8a732abe]{opacity:.7;font-size:12px}.section-title[data-v-8a732abe]{font-size:12px;opacity:.7;margin-bottom:8px;text-transform:uppercase}.logs-section[data-v-8a732abe]{flex:1;min-height:0;display:flex;flex-direction:column}.logs-container[data-v-8a732abe]{flex:1;overflow-y:auto;background:#0000004d;border-radius:4px;padding:8px}.log-item[data-v-8a732abe]{display:flex;gap:12px;padding:6px 8px;margin-bottom:4px;border-radius:3px;font-size:12px;border-left:3px solid transparent}.log-info[data-v-8a732abe]{background:#3b82f61a;border-left-color:#3b82f6}.log-success[data-v-8a732abe]{background:#22c55e1a;border-left-color:#22c55e}.log-warning[data-v-8a732abe]{background:#fbbf241a;border-left-color:#fbbf24}.log-error[data-v-8a732abe]{background:#ef44441a;border-left-color:#ef4444}.log-time[data-v-8a732abe]{opacity:.6;flex-shrink:0;width:80px}.log-message[data-v-8a732abe]{flex:1;word-break:break-all}.placeholder[data-v-8a732abe]{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;gap:8px;opacity:.5}.placeholder .el-icon[data-v-8a732abe]{font-size:32px}.v-container[data-v-b420dc1d]{box-sizing:border-box;position:relative;min-height:50px}.v-bar-chart[data-v-63999390],.echart[data-v-63999390],.v-doughnut-chart[data-v-1651b0b6],.echart[data-v-1651b0b6],.v-funnel-chart[data-v-0beabf00],.echart[data-v-0beabf00],.v-gauge-chart[data-v-f996aeef],.echart[data-v-f996aeef],.v-line-chart[data-v-da6535a9],.echart[data-v-da6535a9],.v-pie-chart[data-v-721c1618],.echart[data-v-721c1618],.v-radar-chart[data-v-a6f641d1],.echart[data-v-a6f641d1],.v-sankey-chart[data-v-b5838036],.echart[data-v-b5838036],.v-scatter-chart[data-v-312d4826],.echart[data-v-312d4826],.v-stacked-bar-chart[data-v-6ed5b757],.echart[data-v-6ed5b757]{width:100%;height:100%}.html-container[data-v-6e6f6510],.html-container[data-v-6e6f6510] *{box-sizing:border-box}.html-container[data-v-6e6f6510] img{max-width:100%;height:auto}.html-container[data-v-6e6f6510] table{border-collapse:collapse;width:100%}.html-container[data-v-6e6f6510] table th,.html-container[data-v-6e6f6510] table td{padding:8px;border:1px solid #ddd}.html-container[data-v-6e6f6510] a{color:#409eff;text-decoration:none}.html-container[data-v-6e6f6510] a:hover{text-decoration:underline}.iframe-container[data-v-7d8f952d]{position:relative}.iframe-mask[data-v-7d8f952d]{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1;pointer-events:auto}.runtime-mode{display:none}.iframe-placeholder[data-v-7d8f952d]{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;color:#909399;font-size:14px;gap:8px;background-color:#f5f7fa}.iframe-placeholder .el-icon[data-v-7d8f952d]{font-size:48px;color:#c0c4cc}.markdown-body[data-v-73416739]{box-sizing:border-box}.markdown-body[data-v-73416739] h1,.markdown-body[data-v-73416739] h2,.markdown-body[data-v-73416739] h3,.markdown-body[data-v-73416739] h4,.markdown-body[data-v-73416739] h5,.markdown-body[data-v-73416739] h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}.markdown-body[data-v-73416739] h1{font-size:2em;border-bottom:1px solid #eaecef;padding-bottom:.3em}.markdown-body[data-v-73416739] h2{font-size:1.5em;border-bottom:1px solid #eaecef;padding-bottom:.3em}.markdown-body[data-v-73416739] h3{font-size:1.25em}.markdown-body[data-v-73416739] p{margin-top:0;margin-bottom:16px}.markdown-body[data-v-73416739] ul,.markdown-body[data-v-73416739] ol{padding-left:2em;margin-top:0;margin-bottom:16px}.markdown-body[data-v-73416739] li{margin-bottom:4px}.markdown-body[data-v-73416739] code{padding:.2em .4em;margin:0;font-size:85%;background-color:#afb8c133;border-radius:6px;font-family:monospace}.markdown-body[data-v-73416739] pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f6f8fa;border-radius:6px;margin-bottom:16px}.markdown-body[data-v-73416739] pre code{background-color:transparent;padding:0}.markdown-body[data-v-73416739] blockquote{padding:0 1em;color:#6a737d;border-left:.25em solid #dfe2e5;margin:0 0 16px}.markdown-body[data-v-73416739] table{border-collapse:collapse;width:100%;margin-bottom:16px}.markdown-body[data-v-73416739] table th,.markdown-body[data-v-73416739] table td{padding:6px 13px;border:1px solid #dfe2e5}.markdown-body[data-v-73416739] table th{font-weight:600;background-color:#f6f8fa}.markdown-body[data-v-73416739] img{max-width:100%;box-sizing:content-box}.markdown-body[data-v-73416739] a{color:#0366d6;text-decoration:none}.markdown-body[data-v-73416739] a:hover{text-decoration:underline}.custom-breadcrumb[data-v-a480654b]{padding:8px 16px}.link[data-v-a480654b]{cursor:pointer;color:var(--breadcrumb-link-color, #409eff)}.link[data-v-a480654b]:hover{text-decoration:underline}.current[data-v-a480654b]{color:var(--breadcrumb-active-color, #909399)}[data-v-812ca27f] .el-button-group{display:flex}[data-v-baa6f88d] .el-checkbox-group{display:flex;flex-direction:var(--v0c48ab70);gap:var(--v02d3b180)}[data-v-baa6f88d] .el-checkbox{--el-checkbox-checked-bg-color: var(--v531127bf);--el-checkbox-checked-input-border-color: var(--v53533c6e);--el-checkbox-input-border-color: var(--v69bc1e63);--el-checkbox-text-color: var(--v29640901)}[data-v-baa6f88d] .el-checkbox-button{--el-checkbox-button-checked-bg-color: var(--v531127bf);--el-checkbox-button-checked-border-color: var(--v53533c6e)}.date-range-container[data-v-4992eb7f],.multi-select-container[data-v-b009a2c2]{box-sizing:border-box}.nav-button[data-v-4f78f794]{-webkit-user-select:none;user-select:none;font-weight:500}.nav-button[data-v-4f78f794]:hover{filter:brightness(1.1);transform:translateY(-1px)}.nav-button[data-v-4f78f794]:active{transform:translateY(0);filter:brightness(.95)}.nav-icon[data-v-4f78f794]{flex-shrink:0}.nav-label[data-v-4f78f794]{white-space:nowrap}.pagination-container[data-v-36bfc009]{display:flex;justify-content:center;padding:8px}[data-v-36bfc009] .el-pagination{justify-content:center}.el-input[data-v-75e631db]{width:var(--v548c0e80);font-size:var(--v05978894)}[data-v-75e631db] .el-input__wrapper{--el-input-border-color: var(--fc02e812);--el-input-focus-border-color: var(--v78a9160c);--el-input-hover-border-color: var(--v1ade65b0)}[data-v-75e631db] .el-input__inner{color:var(--v7b9fe278)}[data-v-75e631db] .el-input__inner::placeholder{color:var(--v74d660ec)}.select-container[data-v-34a8e7c2]{box-sizing:border-box}.slider-value[data-v-19b2dde7]{margin-top:8px}[data-v-19b2dde7] .el-slider{--el-slider-main-bg-color: var(--v106b612d);--el-slider-runway-bg-color: var(--v2f9594c2);--el-slider-button-size: var(--v6b7e6a0c)}[data-v-6666ea8d] .el-switch{--el-switch-on-color: var(--f73eaa90);--el-switch-off-color: var(--v094fa838);--el-switch-border-color: var(--v69c07005)}.card-grid-container[data-v-76760ba3]{box-sizing:border-box}.empty-state[data-v-76760ba3]{display:flex;align-items:center;justify-content:center;min-height:200px}.grid-wrapper[data-v-76760ba3]{width:100%}.grid-card[data-v-76760ba3]:hover{transform:translateY(-4px);box-shadow:0 4px 12px #00000026}.card-image img[data-v-76760ba3]{width:100%;height:100%;object-fit:cover}.card-content[data-v-76760ba3]{display:flex;flex-direction:column}.card-tags[data-v-76760ba3]{display:flex;flex-wrap:wrap;margin-top:4px;margin-right:-6px}.list-container[data-v-48008813]{box-sizing:border-box}.empty-state[data-v-48008813]{display:flex;align-items:center;justify-content:center;min-height:200px}.list-wrapper[data-v-48008813]{width:100%}.list-item[data-v-48008813]{display:flex;align-items:center;gap:12px;box-sizing:border-box}.list-item[data-v-48008813]:hover{background-color:#f5f7fa!important}.item-icon[data-v-48008813]{flex-shrink:0;display:flex;align-items:center;justify-content:center}.item-content[data-v-48008813]{flex:1;min-width:0}.item-title[data-v-48008813]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-description[data-v-48008813]{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.item-extra[data-v-48008813]{margin-top:4px}.item-action[data-v-48008813]{flex-shrink:0;color:#c0c4cc;display:flex;align-items:center}.pivot-container[data-v-0b1303d7]{box-sizing:border-box}.empty-state[data-v-0b1303d7]{display:flex;align-items:center;justify-content:center;min-height:200px}.table-container[data-v-a1dc5b93]{box-sizing:border-box;padding:0}[data-v-a1dc5b93] .el-table{width:100%;height:100%}.timeline-container[data-v-6ae929c9]{box-sizing:border-box}.empty-state[data-v-6ae929c9]{display:flex;align-items:center;justify-content:center;min-height:200px}.card-header[data-v-6ae929c9]{display:flex;justify-content:space-between;align-items:center}.card-title[data-v-6ae929c9]{flex:1}.card-time[data-v-6ae929c9]{font-size:13px;color:#909399;font-weight:400;margin-left:12px}.card-content[data-v-6ae929c9]{margin:0}.card-extra[data-v-6ae929c9]{padding-top:8px;border-top:1px solid #ebeef5}.timeline-content[data-v-6ae929c9]{padding:8px 0}.content-title[data-v-6ae929c9]{margin-bottom:4px}.content-text[data-v-6ae929c9]{margin:0}.content-extra[data-v-6ae929c9]{padding-top:6px}.group-container[data-v-3fa8648d]{position:relative;width:100%;height:100%}.group-placeholder[data-v-3fa8648d]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#909399;font-size:12px;opacity:.5;pointer-events:none}.v-box-container[data-v-96ba1c0c]{box-sizing:border-box}.v-box-content[data-v-96ba1c0c]{word-break:break-word;white-space:pre-wrap}.v-countup-container[data-v-44399741]{box-sizing:border-box}[data-v-44399741] .el-statistic{text-align:center;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.v-progress-container[data-v-02d37fd3]{box-sizing:border-box}[data-v-02d37fd3] .el-progress{width:100%}[data-v-02d37fd3] .el-progress__text{font-size:inherit!important;color:var(--v13e3249a)}.v-stat-card[data-v-c0db472f]{box-sizing:border-box}.v-stat-header[data-v-c0db472f]{margin-bottom:8px}.v-stat-title[data-v-c0db472f]{font-size:14px;color:#909399;margin:0}.v-stat-body[data-v-c0db472f]{display:flex;align-items:center;gap:12px;flex:1}.v-stat-icon[data-v-c0db472f]{display:flex;align-items:center}.v-stat-value[data-v-c0db472f]{line-height:1}.v-stat-footer[data-v-c0db472f]{margin-top:8px}.v-stat-change[data-v-c0db472f]{font-weight:500}.v-text[data-v-0045cea2]{word-break:break-word;white-space:pre-wrap}.v-badge-container[data-v-97776e64]{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}[data-v-97776e64] .el-badge{display:inline-flex;align-items:center;justify-content:center}[data-v-97776e64] .el-badge__content{font-size:inherit!important}.v-col[data-v-082964dd]{box-sizing:border-box}.v-col-placeholder[data-v-082964dd]{width:100%}.v-flex-container[data-v-162d144a]{box-sizing:border-box}.v-flex-placeholder[data-v-162d144a]{width:100%}.v-grid-container[data-v-8229882e]{box-sizing:border-box;width:100%}.v-grid-placeholder-item[data-v-8229882e]{padding:12px;background-color:#f3f4f6;border-radius:4px;text-align:center}.v-modal-footer[data-v-a28442e3]{display:flex;justify-content:flex-end;gap:8px}.v-modal-body[data-v-a28442e3]{box-sizing:border-box}.v-panel[data-v-e72601fb]{box-sizing:border-box;width:100%}.v-panel-header[data-v-e72601fb]{-webkit-user-select:none;user-select:none}.v-panel-collapse-icon[data-v-e72601fb]{font-size:12px}.v-panel-body[data-v-e72601fb],.v-panel-footer[data-v-e72601fb]{box-sizing:border-box}.v-row[data-v-c97c26e7]{width:100%;box-sizing:border-box}.v-row-placeholder[data-v-c97c26e7]{width:100%}.v-tabs-container[data-v-97eccaf6]{box-sizing:border-box;width:100%}.image-error[data-v-07b84e1b],.image-loading[data-v-07b84e1b],.image-placeholder[data-v-07b84e1b]{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;color:#909399;font-size:14px;gap:8px;background-color:#f5f7fa}.image-error .el-icon[data-v-07b84e1b],.image-loading .el-icon[data-v-07b84e1b],.image-placeholder .el-icon[data-v-07b84e1b]{font-size:48px;color:#c0c4cc}.is-loading[data-v-07b84e1b]{animation:rotating-07b84e1b 2s linear infinite}@keyframes rotating-07b84e1b{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.video-placeholder[data-v-ef4cae83]{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;color:#909399;font-size:14px;gap:8px;background-color:#000}.video-placeholder .el-icon[data-v-ef4cae83]{font-size:64px;color:#606266}.v-button[data-v-14cbbdfe]{display:inline-flex;justify-content:center;align-items:center;line-height:1;height:32px;white-space:nowrap;cursor:pointer;color:#606266;text-align:center;box-sizing:border-box;outline:none;margin:0;transition:.1s;font-weight:500;-webkit-user-select:none;user-select:none;vertical-align:middle;background-color:#fff;border:1px solid #dcdfe6;padding:8px 15px;font-size:14px;border-radius:4px}.v-button[data-v-14cbbdfe]:hover,.v-button[data-v-14cbbdfe]:focus{color:#409eff;border-color:#c6e2ff;background-color:#ecf5ff}.v-button[data-v-14cbbdfe]:active{color:#3a8ee6;border-color:#3a8ee6;outline:none}.v-button.is-disabled[data-v-14cbbdfe]{color:#c0c4cc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#ebeef5}.v-button--large[data-v-14cbbdfe]{height:40px;padding:12px 19px;font-size:14px}.v-button--small[data-v-14cbbdfe]{height:24px;padding:5px 11px;font-size:12px}.v-button--primary[data-v-14cbbdfe]{color:#fff;background-color:#409eff;border-color:#409eff}.v-button--primary[data-v-14cbbdfe]:not(.is-disabled):hover{background-color:#66b1ff;border-color:#66b1ff}.v-button.is-round[data-v-14cbbdfe]{border-radius:20px}.v-button.is-circle[data-v-14cbbdfe]{border-radius:50%;padding:8px;min-width:32px}.v-stat-card__header[data-v-cfba101d]{display:flex;align-items:center;margin-bottom:8px}.v-stat-card__tooltip-icon[data-v-cfba101d]{margin-left:4px;cursor:help;font-size:12px;color:#909399}.v-stat-card__content[data-v-cfba101d]{flex:1;display:flex;align-items:center}.v-stat-card__value-wrapper[data-v-cfba101d]{display:flex;align-items:baseline}.v-stat-card__prefix[data-v-cfba101d],.v-stat-card__suffix[data-v-cfba101d]{font-size:14px;color:#606266;margin:0 4px}.v-stat-card__footer[data-v-cfba101d]{margin-top:12px;padding-top:12px;border-top:1px solid #ebeef5}.v-stat-card__trend[data-v-cfba101d]{display:flex;align-items:center;font-size:12px}.v-stat-card__trend.is-up[data-v-cfba101d]{color:#f56c6c}.v-stat-card__trend.is-down[data-v-cfba101d]{color:#67c23a}.v-stat-card__trend.is-normal[data-v-cfba101d]{color:#909399}.trend-label[data-v-cfba101d]{margin-right:8px}.trend-icon[data-v-cfba101d]{margin-left:4px;font-weight:700}.v-grid[data-v-db3ad218]{margin:0;padding:0}

package/index.ts

@@ -0,0 +1,150 @@
+import type { App, Component } from 'vue'
+// @vela/ui/index.ts
+
+/**
+ * 使用 Vite 的 import.meta.glob 动态导入所有组件
+ * 这样新增组件只需在对应目录创建 .vue 文件，无需手动注册
+ */
+const componentModules = import.meta.glob<{ default: Component }>('./src/components/**/*.vue', {
+  eager: true,
+})
+
+/**
+ * 从文件路径提取组件名称
+ * 例如：'./src/components/chart/lineChart/lineChart.vue' -> 'lineChart'
+ *       './src/components/kpi/text/Text.vue' -> 'vText'
+ */
+function extractComponentName(path: string): string {
+  const match = path.match(/\/([^/]+)\.vue$/)
+  if (!match || !match[1]) return ''
+
+  const fileName = match[1]
+
+  // 对于非图表组件，如果文件名首字母是大写，添加 'v' 前缀
+  // 图表组件保持原名（如 lineChart, barChart）
+  if (path.includes('/chart/')) {
+    return fileName
+  }
+
+  // 其他组件：如果首字母大写，加 'v' 前缀
+  const firstChar = fileName.charAt(0)
+  if (firstChar && firstChar === firstChar.toUpperCase()) {
+    return `v${fileName}`
+  }
+
+  return fileName
+}
+
+// 动态构建组件注册表
+const componentRegistry: Record<string, Component> = {}
+
+for (const path in componentModules) {
+  const mod = componentModules[path]
+  const componentName = extractComponentName(path)
+  if (componentName && mod?.default) {
+    componentRegistry[componentName] = mod.default
+  }
+}
+
+// 图表组件
+export const lineChart = componentRegistry.lineChart
+export const barChart = componentRegistry.barChart
+export const pieChart = componentRegistry.pieChart
+export const doughnutChart = componentRegistry.doughnutChart
+export const radarChart = componentRegistry.radarChart
+export const gaugeChart = componentRegistry.gaugeChart
+export const funnelChart = componentRegistry.funnelChart
+export const scatterChart = componentRegistry.scatterChart
+export const sankeyChart = componentRegistry.sankeyChart
+export const stackedBarChart = componentRegistry.stackedBarChart
+
+// KPI 组件
+export const vText = componentRegistry.vText
+export const vBox = componentRegistry.vBox
+export const vStat = componentRegistry.vStat
+export const vProgress = componentRegistry.vProgress
+export const vCountUp = componentRegistry.vCountUp
+
+// 基础组件
+export const vContainer = componentRegistry.vContainer
+export const vButton = componentRegistry.vButton
+
+// 布局组件
+export const vBadge = componentRegistry.vBadge
+export const vPanel = componentRegistry.vPanel
+export const vFlex = componentRegistry.vFlex
+export const vGrid = componentRegistry.vGrid
+export const vTabs = componentRegistry.vTabs
+export const vModal = componentRegistry.vModal
+export const vRow = componentRegistry.vRow
+export const vCol = componentRegistry.vCol
+
+// 数据组件
+export const vTimeline = componentRegistry.vTimeline
+export const vTable = componentRegistry.vTable
+export const vList = componentRegistry.vList
+export const vCardGrid = componentRegistry.vCardGrid
+export const vPivot = componentRegistry.vPivot
+
+// 控件组件
+export const vButtonGroup = componentRegistry.vButtonGroup
+export const vCheckboxGroup = componentRegistry.vCheckboxGroup
+export const vDateRange = componentRegistry.vDateRange
+export const vMultiSelect = componentRegistry.vMultiSelect
+export const vSearchBox = componentRegistry.vSearchBox
+export const vSelect = componentRegistry.vSelect
+export const vSlider = componentRegistry.vSlider
+export const vSwitch = componentRegistry.vSwitch
+export const vNavButton = componentRegistry.vNavButton
+export const vBreadcrumb = componentRegistry.vBreadcrumb
+export const vPagination = componentRegistry.vPagination
+
+// 内容组件
+export const vHtml = componentRegistry.vHtml
+export const vIframe = componentRegistry.vIframe
+export const vMarkdown = componentRegistry.vMarkdown
+
+// 媒体组件
+export const vImage = componentRegistry.vImage
+export const vVideo = componentRegistry.vVideo
+
+// 高级组件
+export const vScripting = componentRegistry.vScripting
+export const vState = componentRegistry.vState
+export const vTrigger = componentRegistry.vTrigger
+
+// Group 组件
+export const vGroup = componentRegistry.vGroup
+
+// Standard Components (New Architecture) - Static Imports for reliability
+import vBaseButton from './src/components/v2/basic/BaseButton.vue'
+import vKpiCard from './src/components/v2/kpi/KpiCard.vue'
+import vGridBox from './src/components/v2/layout/GridBox.vue'
+
+export { vBaseButton, vKpiCard, vGridBox }
+
+// 导出组件注册表，供外部使用
+export { componentRegistry }
+
+// 导出 Hooks
+export * from './src/hooks/useDataSource'
+
+// 导出工具函数
+export * from './src/utils/dataUtils'
+
+// 导出类型
+export type { TriggerLog } from './src/components/advanced/trigger/Trigger.vue'
+export type { GroupProps } from './src/components/group/Group.vue'
+
+// 导出 GIS 类型
+export * from './src/types/gis'
+
+// 提供 Vue 插件式的安装方法
+export default {
+  install(app: App) {
+    // 自动注册所有组件
+    for (const [name, component] of Object.entries(componentRegistry)) {
+      app.component(name, component)
+    }
+  },
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@vela-studio/ui",
+  "version": "1.0.1",
+  "description": "Vela LowCode UI Component Library - Data visualization components for Vue 3",
+  "keywords": [
+    "vue3",
+    "ui",
+    "components",
+    "lowcode",
+    "echarts",
+    "data-visualization",
+    "dashboard"
+  ],
+  "author": "twi1i9ht",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TWILIGHT-wyf/vela-lowcode-editor.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/TWILIGHT-wyf/vela-lowcode-editor/issues"
+  },
+  "homepage": "https://github.com/TWILIGHT-wyf/vela-lowcode-editor#readme",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist",
+    "index.ts",
+    "src"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./dist/style.css": "./dist/style.css",
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.js"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "prepublishOnly": "pnpm build:lib"
+  },
+  "peerDependencies": {
+    "element-plus": "^2.0.0",
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "dompurify": "^3.3.1",
+    "echarts": "^6.0.0",
+    "highlight.js": "^11.11.1",
+    "marked": "^17.0.1",
+    "vue-echarts": "^8.0.1"
+  },
+  "devDependencies": {
+    "@types/dompurify": "^3.2.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.22"
+  }
+}

package/src/components/advanced/scripting/Scripting.vue

@@ -0,0 +1,189 @@
+<template>
+  <div :style="containerStyle">
+    <div class="scripting-container">
+      <div class="header">
+        <span class="title">
+          <el-icon><Document /></el-icon>
+          {{ title }}
+        </span>
+        <el-button
+          v-if="!autoRun && showControls"
+          type="primary"
+          size="small"
+          @click="$emit('execute')"
+        >
+          执行
+        </el-button>
+      </div>
+
+      <div v-if="showCode" class="code-section">
+        <div class="section-title">代码:</div>
+        <pre class="code-block">{{ scriptCode }}</pre>
+      </div>
+
+      <div v-if="output || error" class="output-section">
+        <div class="section-title">输出:</div>
+        <div v-if="error" class="error-output">{{ error }}</div>
+        <pre v-else class="output-block">{{ output }}</pre>
+      </div>
+
+      <div v-if="!output && !error && showPlaceholder" class="placeholder">
+        <el-icon><VideoPlay /></el-icon>
+        <span>{{ placeholder }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+import { Document, VideoPlay } from '@element-plus/icons-vue'
+
+export interface ScriptingProps {
+  title?: string
+  scriptCode?: string
+  output?: string
+  error?: string
+  autoRun?: boolean
+  showCode?: boolean
+  showControls?: boolean
+  showPlaceholder?: boolean
+  placeholder?: string
+  // 样式
+  padding?: number
+  backgroundColor?: string
+  textColor?: string
+  fontSize?: number
+  lineHeight?: number
+  borderRadius?: number
+  border?: string
+  fontFamily?: string
+}
+
+const props = withDefaults(defineProps<ScriptingProps>(), {
+  title: '脚本执行器',
+  scriptCode: '// 请输入 JavaScript 代码\nconsole.log("Hello World");',
+  output: '',
+  error: '',
+  autoRun: false,
+  showCode: true,
+  showControls: true,
+  showPlaceholder: true,
+  placeholder: '点击执行按钮运行脚本',
+  padding: 16,
+  backgroundColor: '#1e1e1e',
+  textColor: '#d4d4d4',
+  fontSize: 14,
+  lineHeight: 1.6,
+  borderRadius: 4,
+  border: '1px solid #3c3c3c',
+  fontFamily: 'Consolas, Monaco, "Courier New", monospace',
+})
+
+defineEmits<{
+  execute: []
+}>()
+
+const containerStyle = computed<CSSProperties>(() => ({
+  width: '100%',
+  height: '100%',
+  padding: `${props.padding}px`,
+  backgroundColor: props.backgroundColor,
+  color: props.textColor,
+  fontSize: `${props.fontSize}px`,
+  lineHeight: props.lineHeight,
+  borderRadius: `${props.borderRadius}px`,
+  border: props.border,
+  overflow: 'auto',
+  fontFamily: props.fontFamily,
+}))
+</script>
+
+<style scoped>
+.scripting-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #3c3c3c;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.section-title {
+  font-size: 12px;
+  opacity: 0.7;
+  margin-bottom: 6px;
+  text-transform: uppercase;
+}
+
+.code-section {
+  flex-shrink: 0;
+}
+
+.code-block {
+  margin: 0;
+  padding: 12px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.output-section {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.output-block {
+  flex: 1;
+  margin: 0;
+  padding: 12px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  color: #4ec9b0;
+}
+
+.error-output {
+  flex: 1;
+  padding: 12px;
+  background: rgba(220, 38, 38, 0.1);
+  border: 1px solid rgba(220, 38, 38, 0.3);
+  border-radius: 4px;
+  color: #f87171;
+  overflow: auto;
+}
+
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  gap: 8px;
+  opacity: 0.5;
+}
+
+.placeholder .el-icon {
+  font-size: 32px;
+}
+</style>

package/src/components/advanced/state/State.vue

@@ -0,0 +1,231 @@
+<template>
+  <div :style="containerStyle">
+    <div class="state-container">
+      <div class="header">
+        <span class="title">
+          <el-icon><DataLine /></el-icon>
+          {{ title }}
+        </span>
+        <el-tag size="small" type="info"> {{ stateItems.length }} 项 </el-tag>
+      </div>
+
+      <div v-if="viewMode === 'list'" class="state-list">
+        <div v-for="item in stateItems" :key="item.key" class="state-item">
+          <div class="state-key">
+            <el-icon><Key /></el-icon>
+            {{ item.key }}
+          </div>
+          <div class="state-value">
+            <el-tag :type="getTagType(item.type)" size="small">{{ item.type }}</el-tag>
+            <span class="value-text">{{ formatValue(item.value) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-else-if="viewMode === 'json'" class="json-view">
+        <pre class="json-block">{{ jsonValue }}</pre>
+      </div>
+
+      <div v-else-if="viewMode === 'table'" class="table-view">
+        <el-table :data="stateItems" size="small" :border="true">
+          <el-table-column prop="key" label="键" width="120" />
+          <el-table-column prop="type" label="类型" width="80">
+            <template #default="{ row }">
+              <el-tag :type="getTagType(row.type)" size="small">{{ row.type }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="value" label="值">
+            <template #default="{ row }">
+              {{ formatValue(row.value) }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div v-if="stateItems.length === 0" class="placeholder">
+        <el-icon><FolderOpened /></el-icon>
+        <span>{{ placeholder }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+import { DataLine, Key, FolderOpened } from '@element-plus/icons-vue'
+
+export interface StateItem {
+  key: string
+  value: unknown
+  type: string
+}
+
+export interface StateProps {
+  title?: string
+  stateData?: Record<string, unknown>
+  viewMode?: 'list' | 'json' | 'table'
+  placeholder?: string
+  // 样式
+  padding?: number
+  backgroundColor?: string
+  textColor?: string
+  fontSize?: number
+  lineHeight?: number
+  borderRadius?: number
+  border?: string
+  fontFamily?: string
+}
+
+const props = withDefaults(defineProps<StateProps>(), {
+  title: '状态管理器',
+  stateData: () => ({}),
+  viewMode: 'list',
+  placeholder: '暂无状态数据',
+  padding: 16,
+  backgroundColor: '#2d2d2d',
+  textColor: '#cccccc',
+  fontSize: 14,
+  lineHeight: 1.6,
+  borderRadius: 4,
+  border: '1px solid #3c3c3c',
+  fontFamily: 'Consolas, Monaco, "Courier New", monospace',
+})
+
+const containerStyle = computed<CSSProperties>(() => ({
+  width: '100%',
+  height: '100%',
+  padding: `${props.padding}px`,
+  backgroundColor: props.backgroundColor,
+  color: props.textColor,
+  fontSize: `${props.fontSize}px`,
+  lineHeight: props.lineHeight,
+  borderRadius: `${props.borderRadius}px`,
+  border: props.border,
+  overflow: 'auto',
+  fontFamily: props.fontFamily,
+}))
+
+const stateItems = computed<StateItem[]>(() => {
+  return Object.entries(props.stateData).map(([key, value]) => ({
+    key,
+    value,
+    type: typeof value,
+  }))
+})
+
+const jsonValue = computed(() => {
+  return JSON.stringify(props.stateData, null, 2)
+})
+
+function getTagType(type: string): 'success' | 'info' | 'warning' | 'danger' | '' {
+  const typeMap: Record<string, 'success' | 'info' | 'warning' | 'danger'> = {
+    string: 'success',
+    number: 'info',
+    boolean: 'warning',
+    object: 'danger',
+  }
+  return typeMap[type] || ''
+}
+
+function formatValue(value: unknown): string {
+  if (value === null) return 'null'
+  if (value === undefined) return 'undefined'
+  if (typeof value === 'object') return JSON.stringify(value)
+  return String(value)
+}
+</script>
+
+<style scoped>
+.state-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #3c3c3c;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.state-list {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.state-item {
+  padding: 12px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.state-key {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  margin-bottom: 6px;
+  color: #4fc3f7;
+}
+
+.state-value {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 24px;
+}
+
+.value-text {
+  flex: 1;
+  word-break: break-all;
+}
+
+.json-view {
+  flex: 1;
+  overflow: auto;
+}
+
+.json-block {
+  margin: 0;
+  padding: 12px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  white-space: pre;
+  overflow-x: auto;
+  color: #9cdcfe;
+}
+
+.table-view {
+  flex: 1;
+  overflow: auto;
+}
+
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  gap: 8px;
+  opacity: 0.5;
+}
+
+.placeholder .el-icon {
+  font-size: 32px;
+}
+</style>