refactor: 架构升级

2026-09-12 16:40:40 +08:00 · 2026-08-31 07:58:23 +08:00
commit ba5b77568b
693 changed files with 118430 additions and 0 deletions
@@ -0,0 +1,106 @@
+# App Platform
+
+## App 平台注意事项
+
+在 App 平台（iOS/Android）使用 uCharts 时的特殊注意事项。
+
+### manifest.json 配置
+
+```json
+{
+  "app-plus": {
+    "usingComponents": true,
+    "nvueStyleCompiler": "uni-app",
+    "splashscreen": {
+      "alwaysShowBeforeRender": true,
+      "waiting": true,
+      "autoclose": true,
+      "delay": 0
+    },
+    "distribute": {
+      "android": {
+        "permissions": [
+          "<uses-permission android:name=\"android.permission.INTERNET\"/>"
+        ]
+      },
+      "ios": {}
+    }
+  }
+}
+```
+
+### Canvas 支持
+
+App 平台支持 Canvas，但 nvue 页面可能有限制。
+
+```vue
+<template>
+  <view class="container">
+    <qiun-data-charts 
+      type="line"
+      :opts="opts"
+      :chartData="chartData"
+    />
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: {
+        categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+        series: [{
+          name: '数据',
+          data: [120, 200, 150, 80, 70]
+        }]
+      },
+      opts: {
+        color: ['#409EFF'],
+        padding: [15, 15, 0, 15]
+      }
+    }
+  }
+}
+</script>
+```
+
+### 条件编译
+
+使用条件编译处理 App 平台特定逻辑：
+
+```vue
+<template>
+  <view>
+    <!-- #ifdef APP-PLUS -->
+    <view>App 平台特有内容</view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    loadChartData() {
+      // #ifdef APP-PLUS
+      // App 平台特定代码
+      plus.net.XMLHttpRequest({
+        url: 'https://api.example.com/chart-data',
+        success: (res) => {
+          this.chartData = res.data
+        }
+      })
+      // #endif
+    }
+  }
+}
+</script>
+```
+
+### 注意事项
+
+1. **Canvas 支持**：App 平台支持 Canvas，但 nvue 可能有限制
+2. **权限配置**：根据功能需求配置相应权限
+3. **性能优化**：App 平台需要注意性能优化
+4. **打包配置**：正确配置打包参数
+5. **版本号**：正确配置版本号和版本名称
@@ -0,0 +1,126 @@
+# H5 Platform
+
+## H5 平台注意事项
+
+在 H5 平台使用 uCharts 时的特殊注意事项。
+
+### manifest.json 配置
+
+```json
+{
+  "h5": {
+    "router": {
+      "mode": "hash",
+      "base": "/"
+    },
+    "devServer": {
+      "https": false,
+      "port": 8080
+    },
+    "publicPath": "/",
+    "template": "index.html"
+  }
+}
+```
+
+### Canvas 支持
+
+H5 平台完全支持 Canvas，可以使用所有 uCharts 功能。
+
+```vue
+<template>
+  <view class="container">
+    <qiun-data-charts 
+      type="line"
+      :opts="opts"
+      :chartData="chartData"
+    />
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: {
+        categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        series: [{
+          name: '数据',
+          data: [120, 200, 150, 80, 70, 110, 130]
+        }]
+      },
+      opts: {
+        color: ['#409EFF'],
+        padding: [15, 15, 0, 15],
+        enableScroll: false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 400px;
+}
+</style>
+```
+
+### 响应式布局
+
+H5 平台可以使用媒体查询：
+
+```vue
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  
+  /* #ifdef H5 */
+  @media (min-width: 768px) {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  /* #endif */
+}
+</style>
+```
+
+### 条件编译
+
+使用条件编译处理 H5 平台特定逻辑：
+
+```vue
+<template>
+  <view>
+    <!-- #ifdef H5 -->
+    <view>H5 平台特有内容</view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    loadChartData() {
+      // #ifdef H5
+      // H5 平台特定代码
+      fetch('/api/chart-data')
+        .then(res => res.json())
+        .then(data => {
+          this.chartData = data
+        })
+      // #endif
+    }
+  }
+}
+</script>
+```
+
+### 注意事项
+
+1. **Canvas 支持**：H5 平台完全支持 Canvas
+2. **性能优化**：H5 平台可以使用更多 Web API 优化性能
+3. **响应式设计**：可以使用媒体查询实现响应式布局
+4. **调试工具**：可以使用浏览器开发者工具调试
+5. **兼容性**：注意不同浏览器的兼容性
@@ -0,0 +1,140 @@
+# Mini-Program Platform
+
+## 小程序平台注意事项
+
+在微信小程序等小程序平台使用 uCharts 时的特殊注意事项。
+
+### manifest.json 配置
+
+```json
+{
+  "mp-weixin": {
+    "appid": "your-appid",
+    "setting": {
+      "urlCheck": false,
+      "es6": true,
+      "enhance": true,
+      "postcss": true,
+      "minified": true
+    },
+    "usingComponents": true
+  }
+}
+```
+
+### Canvas 支持
+
+小程序平台支持 Canvas，但需要注意性能限制。
+
+```vue
+<template>
+  <view class="container">
+    <qiun-data-charts 
+      type="line"
+      :opts="opts"
+      :chartData="chartData"
+    />
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: {
+        categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+        series: [{
+          name: '数据',
+          data: [120, 200, 150, 80, 70]
+        }]
+      },
+      opts: {
+        color: ['#409EFF'],
+        padding: [15, 15, 0, 15],
+        enableScroll: false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 400rpx;
+}
+</style>
+```
+
+### 条件编译
+
+使用条件编译处理小程序平台特定逻辑：
+
+```vue
+<template>
+  <view>
+    <!-- #ifdef MP-WEIXIN -->
+    <view>微信小程序特有内容</view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    loadChartData() {
+      // #ifdef MP-WEIXIN
+      // 微信小程序特定代码
+      wx.request({
+        url: 'https://api.example.com/chart-data',
+        success: (res) => {
+          this.chartData = res.data
+        }
+      })
+      // #endif
+    }
+  }
+}
+</script>
+```
+
+### 性能优化
+
+小程序平台需要注意性能：
+
+```vue
+<template>
+  <view>
+    <qiun-data-charts 
+      type="line"
+      :opts="opts"
+      :chartData="chartData"
+      :canvas-id="canvasId"
+    />
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      canvasId: 'chart-canvas',
+      chartData: {},
+      opts: {
+        // 优化配置
+        enableScroll: false,
+        dataLabel: false
+      }
+    }
+  }
+}
+</script>
+```
+
+### 注意事项
+
+1. **Canvas 性能**：小程序平台 Canvas 性能有限，注意优化
+2. **数据量**：避免过大的数据量
+3. **代码包大小**：注意小程序代码包大小限制
+4. **AppID 配置**：必须在 manifest.json 中配置正确的 AppID
+5. **URL 检查**：开发时可以关闭 urlCheck
@@ -0,0 +1,91 @@
+# nvue Platform
+
+## nvue 平台注意事项
+
+在 nvue 页面使用 uCharts 时的特殊注意事项。
+
+### manifest.json 配置
+
+```json
+{
+  "app-plus": {
+    "nvueStyleCompiler": "uni-app",
+    "nvue": {
+      "flex-direction": "column"
+    }
+  }
+}
+```
+
+### Canvas 限制
+
+nvue 平台对 Canvas 的支持可能有限，需要注意：
+
+```vue
+<template>
+  <view class="container">
+    <!-- #ifndef APP-PLUS-NVUE -->
+    <qiun-data-charts 
+      type="line"
+      :opts="opts"
+      :chartData="chartData"
+    />
+    <!-- #endif -->
+    
+    <!-- #ifdef APP-PLUS-NVUE -->
+    <view class="nvue-tip">nvue 平台可能不支持 Canvas 图表</view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: {},
+      opts: {}
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  flex-direction: column;
+  padding: 20rpx;
+}
+
+.nvue-tip {
+  padding: 20rpx;
+  text-align: center;
+  color: #909399;
+}
+</style>
+```
+
+### 样式限制
+
+nvue 平台样式有限制：
+
+```vue
+<style lang="scss" scoped>
+.container {
+  /* nvue 支持的样式 */
+  flex-direction: column;
+  padding: 20rpx;
+  
+  /* nvue 不支持的样式需要条件编译 */
+  /* #ifndef APP-PLUS-NVUE */
+  display: flex;
+  /* #endif */
+}
+</style>
+```
+
+### 注意事项
+
+1. **Canvas 限制**：nvue 平台对 Canvas 的支持可能有限
+2. **样式限制**：nvue 不支持所有 CSS 属性
+3. **条件编译**：使用条件编译处理兼容性问题
+4. **性能**：nvue 性能更好，但功能有限
+5. **替代方案**：考虑使用其他图表方案或条件编译