add: v4.1.3细节补充

CHANGELOG.md

@@ -39,6 +39,7 @@ request({
 - 将原 `AppComponent` 组件包移动至 `app-components` 包中，并且按照其功能拆分为 `sys` `provider`
 - 现在将异步注册 `vue-router`
 - `RayChart` 组件新增 `macarons` 主题。现在支持便捷的自定义主题，在[主题编辑器](https://echarts.apache.org/zh/theme-builder.html)编辑主题后，下载主题（json）放置于对应主题包中即可被自动注册
+- 兼容 `yarn` `npm` 包管理器的 `manualChunks` 配置
 
 ## 4.1.2
 

src/components/RayChart/index.tsx

@@ -295,9 +295,9 @@ const RayChart = defineComponent({
         /** 注册 chart */
         echartInstance = echarts.init(element, theme, {
           /** 如果款度为 0, 则以 200px 填充 */
-          width: width === 0 ? 200 : undefined,
+          width: width === 0 ? 200 : void 0,
           /** 如果高度为 0, 则以 200px 填充 */
-          height: height === 0 ? 200 : undefined,
+          height: height === 0 ? 200 : void 0,
         })
         echartInstanceRef.value = echartInstance
 
@@ -313,6 +313,7 @@ const RayChart = defineComponent({
         if (error) {
           call(error)
         }
+
         console.error('RayChart render error: ', e)
       }
     }
@@ -325,7 +326,7 @@ const RayChart = defineComponent({
      */
     const renderThemeChart = (bool?: boolean) => {
       if (props.autoChangeTheme) {
-        bool ? renderChart('dark') : renderChart()
+        bool ? renderChart('macarons-dark') : renderChart()
 
         return void 0
       }
@@ -383,7 +384,7 @@ const RayChart = defineComponent({
          * 自动跟随模板主题或者指定主题皆可
          */
         if (props.autoChangeTheme || props.theme) {
-          themeValue.value ? renderChart('dark') : renderChart()
+          themeValue.value ? renderChart('macarons-dark') : renderChart()
         } else {
           renderChart()
         }
@@ -425,7 +426,7 @@ const RayChart = defineComponent({
         if (props.autoChangeTheme) {
           renderThemeChart(themeValue.value)
         } else {
-          props.theme ? renderChart('dark') : renderChart()
+          props.theme ? renderChart('macarons-dark') : renderChart()
         }
 
         /** 注册事件 */

src/components/RayChart/theme/macarons/macarons-dark.json

@@ -0,0 +1,372 @@
+{
+  "color": [
+    "#fc97af",
+    "#87f7cf",
+    "#f7f494",
+    "#72ccff",
+    "#f7c5a0",
+    "#d4a4eb",
+    "#d2f5a6",
+    "#76f2f2"
+  ],
+  "backgroundColor": "rgba(41,52,65,1)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#ffffff"
+    },
+    "subtextStyle": {
+      "color": "#dddddd"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "borderWidth": "4"
+    },
+    "lineStyle": {
+      "width": "3"
+    },
+    "symbolSize": "0",
+    "symbol": "circle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "borderWidth": "4"
+    },
+    "lineStyle": {
+      "width": "3"
+    },
+    "symbolSize": "0",
+    "symbol": "circle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "barBorderWidth": 0,
+      "barBorderColor": "#ccc"
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "borderWidth": 0,
+      "borderColor": "#ccc"
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "borderWidth": 0,
+      "borderColor": "#ccc"
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "borderWidth": 0,
+      "borderColor": "#ccc"
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "borderWidth": 0,
+      "borderColor": "#ccc"
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "borderWidth": 0,
+      "borderColor": "#ccc"
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "borderWidth": 0,
+      "borderColor": "#ccc"
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "borderWidth": 0,
+      "borderColor": "#ccc"
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "color": "#fc97af",
+      "color0": "transparent",
+      "borderColor": "#fc97af",
+      "borderColor0": "#87f7cf",
+      "borderWidth": "2"
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "borderWidth": 0,
+      "borderColor": "#ccc"
+    },
+    "lineStyle": {
+      "width": "1",
+      "color": "#ffffff"
+    },
+    "symbolSize": "0",
+    "symbol": "circle",
+    "smooth": true,
+    "color": [
+      "#fc97af",
+      "#87f7cf",
+      "#f7f494",
+      "#72ccff",
+      "#f7c5a0",
+      "#d4a4eb",
+      "#d2f5a6",
+      "#76f2f2"
+    ],
+    "label": {
+      "color": "#293441"
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "areaColor": "#f3f3f3",
+      "borderColor": "#999999",
+      "borderWidth": 0.5
+    },
+    "label": {
+      "color": "#893448"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "areaColor": "rgba(255,178,72,1)",
+        "borderColor": "#eb8146",
+        "borderWidth": 1
+      },
+      "label": {
+        "color": "rgb(137,52,72)"
+      }
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "areaColor": "#f3f3f3",
+      "borderColor": "#999999",
+      "borderWidth": 0.5
+    },
+    "label": {
+      "color": "#893448"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "areaColor": "rgba(255,178,72,1)",
+        "borderColor": "#eb8146",
+        "borderWidth": 1
+      },
+      "label": {
+        "color": "rgb(137,52,72)"
+      }
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#666666"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#aaaaaa"
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": ["#e6e6e6"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#666666"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#aaaaaa"
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": ["#e6e6e6"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#666666"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#aaaaaa"
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": ["#e6e6e6"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#666666"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#aaaaaa"
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": ["#e6e6e6"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "borderColor": "#999999"
+    },
+    "emphasis": {
+      "iconStyle": {
+        "borderColor": "#666666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#999999"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#cccccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#cccccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#87f7cf",
+      "width": 1
+    },
+    "itemStyle": {
+      "color": "#87f7cf",
+      "borderWidth": 1
+    },
+    "controlStyle": {
+      "color": "#87f7cf",
+      "borderColor": "#87f7cf",
+      "borderWidth": 0.5
+    },
+    "checkpointStyle": {
+      "color": "#fc97af",
+      "borderColor": "#fc97af"
+    },
+    "label": {
+      "color": "#87f7cf"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "color": "#f7f494"
+      },
+      "controlStyle": {
+        "color": "#87f7cf",
+        "borderColor": "#87f7cf",
+        "borderWidth": 0.5
+      },
+      "label": {
+        "color": "#87f7cf"
+      }
+    }
+  },
+  "visualMap": {
+    "color": ["#fc97af", "#87f7cf"]
+  },
+  "dataZoom": {
+    "backgroundColor": "rgba(255,255,255,0)",
+    "dataBackgroundColor": "rgba(114,204,255,1)",
+    "fillerColor": "rgba(114,204,255,0.2)",
+    "handleColor": "#72ccff",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#333333"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "color": "#293441"
+    },
+    "emphasis": {
+      "label": {
+        "color": "#293441"
+      }
+    }
+  }
+}

src/components/RayChart/type.ts

@@ -40,4 +40,4 @@ export type AutoResize =
       height: number
     }
 
-export type ChartTheme = 'dark' | string | object | 'macarons'
+export type ChartTheme = 'macarons-dark' | string | object | 'macarons'

src/views/echart/index.tsx

@@ -1,6 +1,6 @@
 import './index.scss'
 
-import { NCard, NSwitch, NSpace, NP, NH6, NH2, NH3 } from 'naive-ui'
+import { NCard, NSwitch, NSpace, NP, NH2 } from 'naive-ui'
 import RayChart from '@/components/RayChart/index'
 
 import type { EChartsInstance } from '@/types/modules/component'
@@ -216,11 +216,18 @@ const Echart = defineComponent({
         <NP>
           该组件会默认以 200*200
           宽高进行填充。预设了常用的图、方法组件，如果不满足需求，需要用 use
-          方法进行手动拓展。该组件实现了自动跟随模板主题切换功能，但是动态切换损耗较大，所以默认不启用
+          方法进行手动拓展。该组件实现了自动跟随模板主题切换功能，但是动态切换损耗较大，所以默认不启用。
+          该组件可以让你只需要关注 options 的配置，无需关心 chart
+          图的资源管理。并且该组件可以自动监听 options
+          的变化，所以天生支持响应式，可以让你放心的加载异步数据。
         </NP>
-        <NH2>基础使用</NH2>
+        <NH2>能跟随主题切换的可视化图</NH2>
         <div class="chart--container">
-          <RayChart options={this.baseOptions} />
+          <RayChart
+            autoChangeTheme
+            options={this.baseLineOptions}
+            showAria={this.chartAria}
+          />
         </div>
         <NH2>渲染成功后运行回调函数</NH2>
         <div class="chart--container">
@@ -230,14 +237,6 @@ const Echart = defineComponent({
             success={this.handleChartRenderSuccess.bind(this)}
           />
         </div>
-        <NH2>能跟随主题切换的可视化图</NH2>
-        <div class="chart--container">
-          <RayChart
-            autoChangeTheme
-            options={this.baseLineOptions}
-            showAria={this.chartAria}
-          />
-        </div>
         <NH2>不跟随主题切换的暗色主题可视化图</NH2>
         <div class="chart--container">
           <RayChart theme="dark" options={this.baseOptions} />

src/views/router-demo/router-demo-home/index.tsx

@@ -10,6 +10,7 @@
  */
 
 import { NSpace, NDataTable, NButton } from 'naive-ui'
+import RayTable from '@/components/RayTable/index'
 
 import type { DataTableColumns } from 'naive-ui'
 
@@ -83,7 +84,7 @@ const RouterDemoHome = defineComponent({
   render() {
     return (
       <NSpace wrapItem={false}>
-        <NDataTable columns={this.columns} data={this.dataSource} />
+        <RayTable columns={this.columns} data={this.dataSource} />
       </NSpace>
     )
   },

vite.config.ts

@@ -165,11 +165,13 @@ export default defineConfig(async ({ mode }) => {
         output: {
           manualChunks: (id) => {
             if (id.includes('node_modules')) {
+              const index = id.includes('pnpm') ? 1 : 0
+
               return id
                 .toString()
                 .split('node_modules/')[1]
-                .split('/')[1]
-                .toString()
+                .split('/')
+                [index].toString()
             }
           },
         },