@jzliu-cli/bi-engine 0.0.1 → 0.0.56

package/README.md

@@ -14,54 +14,83 @@ npm install @jzliu-cli/bi-engine
 
 ## 🚀 快速开始
 
-### 基础使用
+### 1. 安装依赖
 
+```bash
+# 安装核心依赖
+yarn add @jzliu-cli/bi-engine element-ui vue@^2.6.11 vuex@^3.6.2
+
+# 或使用 npm
+npm install @jzliu-cli/bi-engine element-ui vue@^2.6.11 vuex@^3.6.2
+```
+
+### 2. 基础配置
+
+**main.js**:
 ```javascript
 import Vue from 'vue'
-import BiDashboard, { chartRender } from '@jzliu-cli/bi-engine'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
+import Vuex from 'vuex'
 
-// 使用 Element UI
+// 必需：使用 Element UI
 Vue.use(ElementUI)
 
-// 使用 BiDashboard
-Vue.use(BiDashboard)
+// 必需：使用 Vuex
+Vue.use(Vuex)
 
-// 在组件中使用
-export default {
-  components: {
-    chartRender
-  },
-  data() {
-    return {
-      chartData: {
-        type: 'Column',
-        name: '柱状图',
-        // ... 其他配置
-      }
-    }
-  }
-}
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
 ```
 
-### 完整仪表板使用
+### 3. 快速上手
 
-```javascript
-import Vue from 'vue'
-import BiDashboard from '@jzliu-cli/bi-engine'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
+**最简单的使用方式**:
+```vue
+<template>
+  <div style="height: 100vh;">
+    <bi-dashboard />
+  </div>
+</template>
 
-Vue.use(ElementUI)
-Vue.use(BiDashboard)
+<script>
+import { BiDashboard } from '@jzliu-cli/bi-engine'
+
+export default {
+  components: { BiDashboard }
+}
+</script>
+```
 
-// 在模板中使用
+**使用内置数据**:
+```vue
 <template>
-  <div>
-    <bi-dashboard :config="dashboardConfig" />
+  <div style="height: 100vh;">
+    <bi-dashboard 
+      :widgets="widgets" 
+      :layoutObj="layoutObj"
+    />
   </div>
 </template>
+
+<script>
+import bi, { BiDashboard } from '@jzliu-cli/bi-engine'
+
+export default {
+  components: { BiDashboard },
+  data() {
+    return {
+      // 使用内置模拟数据
+      widgets: bi.mockData.widgets,
+      layoutObj: {
+        layout: [],
+        dashboardName: '我的仪表板'
+      }
+    }
+  }
+}
+</script>
 ```
 
 ## 📚 API 文档
@@ -72,12 +101,15 @@ Vue.use(BiDashboard)
 主仪表板组件，提供完整的仪表板设计器功能。
 
 **Props:**
-- `config` (Object): 仪表板配置对象
-- `previewMode` (Boolean): 预览模式开关
+- `previewFlag` (Boolean): 预览模式开关
+- `layoutObj` (Object): 仪表板布局配置对象
+- `widgets` (Array): 外部传入的图表组件数据
+- `enableTabSwitch` (Boolean): 是否启用 tab 切换功能，默认 true
 
 **Events:**
 - `@dashboard-updated`: 仪表板更新时触发
 - `@chart-selected`: 图表选中时触发
+- `@tab-change`: 组件面板 tab 切换时触发，参数为 `{ tabKey, tabLabel }`
 
 #### chartRender
 图表渲染组件，用于渲染单个图表。
@@ -95,6 +127,26 @@ Vue.use(BiDashboard)
 />
 ```
 
+#### cTabs
+自定义标签页组件，提供美观的标签页切换功能。
+
+**Props:**
+- `tabList` (Array): 标签页列表，格式：`[{ key: 'tab1', label: '标签1' }, { key: 'tab2', label: '标签2' }]`
+- `value` (String|Number): 当前激活的标签页 key
+
+**Events:**
+- `@input`: 标签页切换时触发，参数为新的 tabKey
+- `@change`: 标签页切换时触发，参数为新的 tabKey
+
+**示例:**
+```javascript
+<c-tabs 
+  :tabList="tabList" 
+  v-model="activeTab"
+  @change="handleTabChange"
+/>
+```
+
 ### 工具函数 (utils)
 
 提供丰富的工具函数集合：
@@ -370,6 +422,307 @@ MIT License
 
 欢迎提交 Issue 和 Pull Request！
 
+## 🔄 第三方项目集成示例
+
+### 1. 基础项目配置
+
+**main.js 配置**:
+```javascript
+import Vue from 'vue'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import Vuex from 'vuex'
+
+// 使用 Element UI
+Vue.use(ElementUI)
+
+// 使用 Vuex (必需)
+Vue.use(Vuex)
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
+```
+
+### 2. 完整仪表板使用
+
+**编辑模式 - 支持拖拽设计**:
+```vue
+<template>
+  <div id="app" style="min-width: 1366px;">
+    <div style="height:100%;width:100%;">
+      <bi-dashboard 
+        :widgets="widgets" 
+        :layoutObj="layoutObj" 
+        @tab-change="handleTabChange" 
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import bi, { BiDashboard } from '@jzliu-cli/bi-engine'
+
+export default {
+  name: 'App',
+  components: {
+    BiDashboard,
+  },
+  data() {
+    return {
+      // 使用内置模拟数据
+      widgets: bi.mockData.widgets,
+      layoutObj: {
+        "layout": [
+          {
+            "type": "Table",
+            "defaultRows": 8,
+            "dataSetId": "USER_BEHAVIOR_FACT",
+            "dataSetName": "用户行为事实表",
+            "name": "交叉表",
+            "defaultCols": "whole",
+            "className": "component-type-cross-table",
+            "measures": [
+              {
+                "unitCode": "page_views",
+                "unitName": "页面浏览量",
+                "belongDimName": null
+              }
+            ],
+            "dimensions": [
+              {
+                "unitCode": "user_id",
+                "unitName": "用户ID",
+                "belongDimName": "用户维度"
+              }
+            ]
+          }
+        ],
+        "dashboardName": "我的仪表板"
+      }
+    }
+  },
+  methods: {
+    handleTabChange(tabInfo) {
+      console.log('Tab 切换:', tabInfo)
+      // 这里可以根据 tab 切换重新加载数据
+      // 例如：this.loadWidgetsByTab(tabInfo.tabKey)
+    }
+  }
+}
+</script>
+```
+
+**预览模式 - 只读展示**:
+```vue
+<template>
+  <div id="app" style="min-width: 1366px;">
+    <div style="height:100%;width:100%;">
+      <Preview :widgets="widgets" :layoutObj="layoutObj" />
+    </div>
+  </div>
+</template>
+
+<script>
+import bi, { Preview } from '@jzliu-cli/bi-engine'
+
+export default {
+  name: 'App',
+  components: {
+    Preview,
+  },
+  data() {
+    return {
+      widgets: bi.mockData.widgets,
+      layoutObj: {
+        // 仪表板布局配置
+      }
+    }
+  }
+}
+</script>
+```
+
+### 3. 单独使用图表组件
+
+**单个图表渲染**:
+```vue
+<template>
+  <div>
+    <chart-render :chartData="chartData"></chart-render>
+  </div>
+</template>
+
+<script>
+import BiDashboard, { chartRender, mockData, enumData } from '@jzliu-cli/bi-engine'
+
+export default {
+  name: 'ChartComponent',
+  components: { chartRender },
+  data() {
+    return {
+      // 使用内置模拟数据
+      chartData: mockData.pieWidgets
+    }
+  }
+}
+</script>
+```
+
+### 4. 动态数据加载
+
+**根据 tab 切换动态加载数据**:
+```vue
+<template>
+  <div>
+    <bi-dashboard 
+      :widgets="widgets" 
+      :layoutObj="layoutObj"
+      @tab-change="handleTabChange"
+    />
+  </div>
+</template>
+
+<script>
+import bi, { BiDashboard } from '@jzliu-cli/bi-engine'
+
+export default {
+  components: { BiDashboard },
+  data() {
+    return {
+      widgets: [],
+      layoutObj: {
+        layout: [],
+        dashboardName: '动态仪表板'
+      },
+      currentTab: 'all'
+    }
+  },
+  methods: {
+    async handleTabChange(tabInfo) {
+      console.log('Tab 切换:', tabInfo)
+      this.currentTab = tabInfo.tabKey
+      
+      // 根据 tab 切换重新调用接口获取数据
+      await this.loadWidgets(tabInfo.tabKey)
+    },
+    
+    async loadWidgets(tabKey) {
+      try {
+        // 调用你的接口获取对应 tab 的 widgets 数据
+        const response = await this.$http.get(`/api/widgets?tab=${tabKey}`)
+        this.widgets = response.data
+      } catch (error) {
+        console.error('加载 widgets 失败:', error)
+        // 失败时使用默认数据
+        this.widgets = bi.mockData.widgets
+      }
+    }
+  },
+  
+  async created() {
+    // 初始化加载数据
+    await this.loadWidgets('all')
+  }
+}
+</script>
+```
+
+### 5. 使用内置工具和配置
+
+**使用工具函数和配置**:
+```javascript
+import bi, { 
+  chartRender, 
+  mockData, 
+  enumData, 
+  utils, 
+  panelConfig 
+} from '@jzliu-cli/bi-engine'
+
+// 使用模拟数据
+const sampleData = mockData.widgets
+
+// 使用枚举数据
+const chartTypes = enumData.chartTypeMap
+
+// 使用工具函数
+const processedData = utils.dataUtils.calcDescartes(data)
+
+// 使用配置
+const defaultConfig = panelConfig.getDefaultConfig()
+```
+
+## 🎯 常见使用场景
+
+### 场景1: 仪表板设计器
+适用于需要拖拽设计仪表板的场景，用户可以：
+- 从组件面板拖拽图表到画布
+- 配置图表样式和数据
+- 实时预览效果
+- 保存和加载仪表板配置
+
+### 场景2: 仪表板预览
+适用于只读展示的场景，用户可以：
+- 查看已设计的仪表板
+- 交互式浏览图表
+- 响应式适配不同屏幕
+
+### 场景3: 单个图表展示
+适用于只需要展示单个图表的场景：
+- 在现有页面中嵌入图表
+- 使用内置的图表类型
+- 自定义图表样式
+
+### 场景4: 动态数据仪表板
+适用于需要根据用户操作动态加载数据的场景：
+- 根据 tab 切换加载不同数据
+- 实时更新图表内容
+- 支持数据筛选和查询
+
+## 📋 数据格式说明
+
+### widgets 数据格式
+```javascript
+const widgets = [
+  {
+    type: 'Column',           // 图表类型
+    name: '柱状图',           // 图表名称
+    className: 'component-type-column', // CSS 类名
+    defaultImg: 'http://example.com/img.png', // 默认图片
+    measures: [               // 度量字段
+      {
+        unitCode: 'sales',
+        unitName: '销售额',
+        belongDimName: null
+      }
+    ],
+    dimensions: [             // 维度字段
+      {
+        unitCode: 'category',
+        unitName: '类别',
+        belongDimName: '商品维度'
+      }
+    ]
+  }
+]
+```
+
+### layoutObj 数据格式
+```javascript
+const layoutObj = {
+  layout: [                   // 布局配置
+    {
+      type: 'Column',
+      x: 0, y: 0, w: 6, h: 4, // 网格位置和大小
+      i: 'unique-id',         // 唯一标识
+      // ... 其他图表配置
+    }
+  ],
+  dashboardName: '仪表板名称'
+}
+```
+
 ## 📞 支持
 
 如有问题，请联系：
@@ -378,4 +731,3 @@ MIT License
 
 ---
 
-**注意**: 本组件库基于 Vue 2.x 开发，如需使用 Vue 3，请等待后续版本更新。

package/dist/assets/style/dashboard.less

@@ -12,10 +12,9 @@
   }
 
   //input
-  .bi-header-name-input {
+  .jzliu-bi-engine-bi-header-name-input {
     transition: 0.3s all;
-    width: 120px;
-    max-width: 236px;
+    width: 300px;
     min-width: 150px;
     border: 1px solid transparent;
     box-shadow: none;
@@ -31,7 +30,7 @@
   }
 
   //button
-  .bi-header-btn {
+  .jzliu-bi-engine-bi-header-btn {
     min-width: 108px;
     height: 26px;
     border-radius: 20px;
@@ -44,11 +43,11 @@
     cursor: pointer;
   }
 
-  .bi-header-btn.primary {
+  .jzliu-bi-engine-bi-header-btn.primary {
     background: @color1;
   }
 
-  .bi-header-btn.default {
+  .jzliu-bi-engine-bi-header-btn.default {
     background: transparent;
   }
 
@@ -71,7 +70,7 @@
     transition: all .2s ease;
   }
 
-  .chart-warp {
+  .jzliu-bi-engine-chart-warp {
     width: 100%;
     height: 100%;
   }
@@ -245,6 +244,25 @@
   }
 }
 
+.jzliu-bi-engine-vertical-text {
+  height: 60px;
+  width: 100%;
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 14px;
+  letter-spacing: 3px;
+  cursor: pointer;
+  writing-mode: tb-rl;
+  writing-mode: vertical-lr;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  &:hover {
+    color: #5890FF;
+  }
+}
+
 /* Element UI 组件 label 样式 */
 .cdsp_dashboard .el-input__label,
 .cdsp_dashboard .el-form-item__label,
@@ -317,4 +335,11 @@
 .cdsp_dashboard .el-datetime-picker__label,
 .cdsp_dashboard .el-datetime-range-picker__label {
   font-size: 12px !important;
+}
+
+.cdsp_dashboard .sortable-ghost {
+  margin: 9px 9px;
+  padding: 4px 8px;
+  background-color: #2e74ff;
+  border: 1px dashed #2e74ff;
 }