feat: 增加饼图

README.md

@@ -69,15 +69,15 @@
 
 - 基础组件库
 - [ ] 柱图
-  * [x] 基本柱状图
-  * [ ] 弧形柱图
+  * [x] 柱状图
+  * [ ] 玉环图
   * [ ] 折线柱图
-  * [ ] 水平基本柱状图
+  * [ ] 条形图
 - [ ] 折线
-  * [x] 基本折线图
+  * [x] 折线图
   * [ ] 区域图
 - [ ] 饼图
-  * [ ] 基本饼图
+  * [ ] 饼图
   * [ ] 指标占比图
 - [ ] 关系
   * [ ] 树图

datav-cli-ui/assets/templates/config-tpl.hbs

@@ -14,11 +14,13 @@
 
 <script lang='ts' setup>
 import { toRef } from 'vue'
+{{#if selectOpts.length}}
 import {
   {{#each selectOpts}}
   {{this}},
   {{/each}}
 } from '@/data/select-options'
+{{/if}}
 import { {{comName}} } from './{{fileName}}'
 
 const props = defineProps<{
@@ -27,7 +29,5 @@ const props = defineProps<{
 
 const config = toRef(props.com, 'config')
 
-{{> prop-data-tpl
-  configs=configs
-}}
+{{> prop-data-tpl configs=configs }}
 </script>

datav-cli-ui/assets/templates/partials/prop-component-tpl.hbs

@@ -8,6 +8,9 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (eq config.component componentTypes.number)}}
 <g-input-number
@@ -29,6 +32,9 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (eq config.component componentTypes.color)}}
 <g-color-picker
@@ -40,53 +46,74 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (eq config.component componentTypes.checkbox)}}
-<n-checkbox
+<g-checkbox
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
-  v-model:checked="{{ getPath path virtualPath }}"
+  v-model="{{ getPath path virtualPath }}"
+  {{#if (getInlineMode config.displayMode)}}
+  inline="{{config.displayMode}}"
+  label="{{config.alias}}"
+  {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (eq config.component componentTypes.switch)}}
-<n-switch
+<g-switch
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
-  v-model:value="{{ getPath path virtualPath }}"
+  v-model="{{ getPath path virtualPath }}"
+  {{#if (getInlineMode config.displayMode)}}
+  inline="{{config.displayMode}}"
+  label="{{config.alias}}"
+  {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
-{{else if (eq config.component componentTypes.radio)}}
-<n-radio-group
+{{else if (eq config.component componentTypes.radioBase)}}
+<g-radio-group
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
-  v-model:value="{{ getPath path virtualPath }}"
-  size="small"
->
-  <n-radio-button
-    v-for="pair in pairData{{config.id}}"
-    :key="pair.key"
-    :value="pair.key"
-  >
-    \{{ pair.value }}
-  </n-radio-button>
-</n-radio-group>
-{{else if (eq config.component componentTypes.radioBase)}}
-<n-radio-group
+  v-model="{{ getPath path virtualPath }}"
+  {{#if (getInlineMode config.displayMode)}}
+  inline="{{config.displayMode}}"
+  label="{{config.alias}}"
+  {{/if}}
+  :data="pairData{{config.id}}"
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
+/>
+{{else if (eq config.component componentTypes.colorMap)}}
+<g-color-mapping
+  label="{{config.alias}}"
+  :data="{{ getPath path virtualPath }}"
+/>
+{{else if (eq config.component componentTypes.radio)}}
+<g-radio-group
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
-  v-model:value="{{ getPath path virtualPath }}"
-  size="small"
->
-  <n-radio
-    v-for="pair in pairData{{config.id}}"
-    :key="pair.key"
-    :value="pair.key"
-  >
-    \{{ pair.value }}
-  </n-radio>
-</n-radio-group>
+  v-model="{{ getPath path virtualPath }}"
+  {{#if (getInlineMode config.displayMode)}}
+  inline="{{config.displayMode}}"
+  label="{{config.alias}}"
+  {{/if}}
+  :data="pairData{{config.id}}"
+  is-button
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
+/>
 {{else if (eq config.component componentTypes.slider)}}
 <g-slider
   {{#if (and judgeEnum config.whichEnum.field)}}
@@ -107,6 +134,9 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (eq config.component componentTypes.sliderRange)}}
 <g-slider-range
@@ -125,41 +155,53 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
-{{else if (eq config.component componentTypes.select)}}
-<g-select
+{{else if (eq config.component componentTypes.uploadImage)}}
+<g-upload-image
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
   v-model="{{ getPath path virtualPath }}"
-  :data="pairData{{config.id}}"
   {{#if (getInlineMode config.displayMode)}}
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
-{{else if (eq config.component componentTypes.uploadImage)}}
-<g-upload-image
+{{else if (eq config.component componentTypes.selectImage)}}
+<g-select-image
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
   v-model="{{ getPath path virtualPath }}"
+  :images="[]"
   {{#if (getInlineMode config.displayMode)}}
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
-{{else if (eq config.component componentTypes.selectImage)}}
-<g-select-image
+{{else if (eq config.component componentTypes.echartIcon)}}
+<g-select-shape
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
   v-model="{{ getPath path virtualPath }}"
-  :images="[]"
+  :shapes="{{config.component}}s"
   {{#if (getInlineMode config.displayMode)}}
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (eq config.component componentTypes.selectSuggest)}}
 <g-select-suggest
@@ -173,36 +215,42 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
-{{else if (eq config.component componentTypes.echartIcon)}}
-<g-select-shape
+{{else if (eq config.component componentTypes.select)}}
+<g-select
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
   v-model="{{ getPath path virtualPath }}"
-  :shapes="{{config.component}}s"
+  :data="pairData{{config.id}}"
   {{#if (getInlineMode config.displayMode)}}
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{else if (hasSelectOpts selectOpts config.component)}}
 {{#if config.flatValue}}
-<n-radio-group
+<g-radio-group
   {{#if (and judgeEnum config.whichEnum.field)}}
   v-if="{{getSlotPath path virtualPath}}.{{config.whichEnum.field}} === '{{config.whichEnum.value}}'"
   {{/if}}
-  v-model:value="{{ getPath path virtualPath }}"
-  size="small"
->
-  <n-radio-button
-    v-for="em in {{config.component}}s"
-    :key="em.id"
-    :value="em.id"
-  >
-    \{{ em.value }}
-  </n-radio-button>
-</n-radio-group>
+  v-model="{{ getPath path virtualPath }}"
+  {{#if (getInlineMode config.displayMode)}}
+  inline="{{config.displayMode}}"
+  label="{{config.alias}}"
+  {{/if}}
+  :data="{{config.component}}s"
+  is-button
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
+/>
 {{else}}
 <g-select
   {{#if (and judgeEnum config.whichEnum.field)}}
@@ -214,6 +262,9 @@
   inline="{{config.displayMode}}"
   label="{{config.alias}}"
   {{/if}}
+  {{#if config.tip}}
+  tooltip="{{{config.tip}}}"
+  {{/if}}
 />
 {{/if}}
 {{else}}

datav-cli-ui/assets/templates/partials/prop-config-tpl.hbs

@@ -53,7 +53,7 @@
   label="{{item.config.alias}}"
   mode="layout"
   default-layout="{{item.config.layout}}"
-  :features="{{{enumsToTpl item.config.features}}}"
+  :features="{{enumsToTpl item.config.features}}"
   :list="{{getSlotPath item.path item.virtualPath}}.{{item.key}}"
   :min="{{item.config.min}}"
   :max="{{item.config.max}}"
@@ -148,6 +148,9 @@
   tooltip="{{{item.config.tip}}}"
   {{/if}}
   label="{{item.config.alias}}"
+  {{#if (isCustom item.config.component)}}
+  custom="{{{item.config.tip}}}"
+  {{/if}}
 >
   {{> prop-component-tpl
     componentTypes=../componentTypes

datav-cli-ui/assets/templates/partials/prop-data-tpl.hbs

@@ -15,7 +15,11 @@ const enumData{{item.config.id}} = [
 ]
 
 {{/unless}}
-{{> prop-data-tpl
-  configs=item.children
-}}
+{{#if (includes item.config.features 'add')}}
+const handleAdd{{capitalize item.key}}Item = () => {
+  throw new Error('handleAdd{{capitalize item.key}}Item Not Implemented')
+}
+
+{{/if}}
+{{> prop-data-tpl configs=item.children}}
 {{/each}}

datav-cli-ui/assets/templates/register.ts

@@ -69,6 +69,7 @@ Handlebars.registerHelper('isTypeOf', (configList, key, type) => {
   return item ? item.config.type === type : false
 })
 Handlebars.registerHelper('isEmptyArray', (arr: any[]) => !arr || arr.length === 0)
+Handlebars.registerHelper('isCustom', type => type === 'colorMap')
 
 // ------Partials------
 Handlebars.registerPartial('prop-config-tpl', propConfigTpl)