@opentiny/vue-docs 3.28.0 → 3.30.0

package/demos/pc/app/flowchart/basic-usage-composition-api.vue

@@ -1,176 +1,27 @@
 <template>
   <div class="tiny-demo">
-    <button @click="toggleStatus">切换状态</button>
     <tiny-flowchart
-      ref="chartRef"
-      :data="chartData"
-      :config="chartConfig"
+      ref="chart"
+      :data="chartDataRaw"
+      :config="chartConfigRaw"
       @click-node="onClickNode"
       @click-link="onClickLink"
       @click-blank="onClickBlank"
     >
-      <template #content="params">
-        <handler-list class="custom-handler-list" :params="params" />
-      </template>
     </tiny-flowchart>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { TinyModal, TinyPopover, Flowchart } from '@opentiny/vue'
-import { iconYes, iconPanelMini, iconChevronDown, iconChevronUp } from '@opentiny/vue-icon'
+import { TinyModal, TinyFlowchart } from '@opentiny/vue'
+import { hooks } from '@opentiny/vue-common'
 
-const { createNode, createLink, createItem, createConfig } = Flowchart
-
-const HandlerDropdown = {
-  template: `<div class="tiny-handler-dropdown">
-    <div v-for="(handler, i) in params.node.info.items" :key="i" class="tiny-handler-dropdown-item">
-      <div class="item-icon">
-        <div :style="iconStyle(handler)">
-          <tiny-icon-yes v-if="check(handler)"></tiny-icon-yes>
-          <tiny-icon-pane v-else></tiny-icon-pane>
-        </div>
-      </div>
-      <div class="item-status">{{ handler.status }}</div>
-      <div class="item-head">
-        <img :src="params.allItem[handler.key]" :style="imgStyle" />
-      </div>
-      <div class="item-name">{{ handler.name }}</div>
-      <div class="item-key">{{ handler.key }}</div>
-      <div class="item-role">{{ handler.role }}</div>
-      <div class="item-date">{{ handler.date }}</div>
-    </div>
-  </div>`,
-  name: 'TinyHandlerDropdown',
-  components: {
-    TinyIconYes: iconYes(),
-    TinyIconPane: iconPanelMini()
-  },
-  props: {
-    params: Object
-  },
-  computed: {
-    imgStyle() {
-      return 'width:16px;height:16px;border-radius:50%;'
-    }
-  },
-  methods: {
-    check(handler) {
-      const { params } = this
-      return typeof params.config.checkItemStatus === 'function' && params.config.checkItemStatus(handler)
-    },
-    iconStyle(handler) {
-      const color = this.check(handler)
-        ? 'border-color:#52c41a;background:#52c41a;'
-        : 'border-color:#40a9ff;background:#40a9ff;'
-      return (
-        this.imgStyle +
-        'display:flex;align-items:center;justify-content:center;' +
-        'border-width:1px;border-style:solid;' +
-        color
-      )
-    }
-  }
-}
-
-const HandlerList = {
-  template: `<tiny-popover
-    placement="bottom-start"
-    title=""
-    v-model="params.showPop"
-    width="220"
-    trigger="manual"
-    popper-class="demo-popover-class1"
-    :visible-arrow="false"
-  >
-    <handler-dropdown class="custom-handler-dropdown" :params="params" />
-    <template #reference>
-      <div
-        class="tiny-handler-list"
-        :class="'name-' + params.node.name"
-        :style="'border:1px solid ' + params.config.listBorderColor"
-      >
-        <div class="tiny-handler-list__heads" :style="'width:' + headWidth + 'px'">
-          <img
-            v-for="(item, i) in heads"
-            class="tiny-handler-list__head-img"
-            :key="i"
-            :src="item.head"
-            :style="item.style"
-          />
-        </div>
-        <div
-          class="tiny-handler-list__icon"
-          :style="'width:' + params.config.listIconSize + 'px;fill:' + params.config.listIconColor"
-          @click="toggleStatus"
-        >
-          <tiny-icon-up v-if="params.dropdowns[params.node.name]"></tiny-icon-up>
-          <tiny-icon-down v-else></tiny-icon-down>
-        </div>
-      </div>
-    </template>
-  </tiny-popover>`,
-  name: 'TinyHandlerList',
-  components: {
-    TinyIconDown: iconChevronDown(),
-    TinyIconUp: iconChevronUp(),
-    HandlerDropdown,
-    TinyPopover
-  },
-  props: {
-    params: Object
-  },
-  computed: {
-    headWidth() {
-      const { params } = this
-
-      return params.config.listWidth - 6 - params.config.listIconSize
-    },
-    heads() {
-      const { params, headWidth } = this
-      const { allItem, node, config } = params
-      const { headSize } = config
-      const { info } = node
-      const { items } = info
-      const imgStyle = `width:${headSize}px;height:${headSize}px`
-      const res = []
-
-      items.forEach(({ key }, i) => {
-        let left
-
-        if (items.length > 1) {
-          left = Math.floor(((headWidth - headSize) / (items.length - 1)) * i)
-        } else if (items.length === 1) {
-          left = Math.floor(headWidth / 2)
-        }
-
-        const style = `${imgStyle};left:${left}px`
-
-        res.push({ head: allItem[key], style })
-      })
-
-      return res
-    }
-  },
-  methods: {
-    toggleStatus() {
-      const { params } = this
-      params.dropdowns[params.node.name] = !params.dropdowns[params.node.name]
-    }
-  }
-}
-
-const handlers = [
-  createItem('WX100001', '张三', '转审人', '已转审', '很好', '2018-08-20 12:00', ''),
-  createItem('WX100002', '李四', '主管', '已转审', '非常好', '2018-08-20 12:00', ''),
-  createItem('WX100003', '王五', '主管', '处理中', '', '', '')
-]
+const { createNode, createLink, createConfig } = TinyFlowchart
 
 const chartData = {
   nodes: [
     createNode('1', 1, '基础信息', '2018.08.02', [], 1, 0),
-    createNode('2', 1, '调职补偿', '2018.08.02', handlers, 0, 2),
+    createNode('2', 1, '调职补偿', '2018.08.02', [], 0, 2),
     createNode('3', 1, '汇总调职补偿', '', [], 1, 4),
     createNode('4', 3, '启动精算', '', [], 4, 5),
     createNode('5', 3, '复核精算', '', [], 4, 6),
@@ -209,23 +60,9 @@ chartConfig.headUrl = `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/m
 chartConfig.checkItemStatus = (item) => ~['已转审', '已同意'].indexOf(item.status)
 chartConfig.adjustPos = (afterNode) => afterNode.raw.name === '2' && (afterNode.y += 1)
 
-const nodeFail = chartData.nodes[chartData.nodes.length - 1]
-const linkDash = chartData.links[chartData.links.length - 1]
-
-const flag = ref(false)
-const chartRef = ref()
-const TinyFlowchart = Flowchart
-
-function toggleStatus() {
-  flag.value = !flag.value
-  // 1.更改数据
-  nodeFail.info.status = flag.value ? 1 : 4
-  linkDash.info.style = flag.value ? 'solid' : 'dash'
-  linkDash.info.status = flag.value ? 1 : 3
-  chartConfig.anchor = flag.value ? 'left' : 'center'
-  // 2.刷新流程图
-  chartRef.value.refresh()
-}
+// 使用 markRaw 避免大数据对象被 Vue 深度响应式代理，提升性能
+const chartDataRaw = hooks.markRaw(chartData)
+const chartConfigRaw = hooks.markRaw(chartConfig)
 
 function onClickNode(_afterNode, _e) {
   TinyModal.message('click-node')
@@ -239,90 +76,3 @@ function onClickBlank(_param, _e) {
   TinyModal.message('click-blank')
 }
 </script>
-
-<style scoped>
-/* HandlerList */
-.tiny-handler-list {
-  width: calc(100% - 2px);
-  height: 100%;
-  border-radius: 3px;
-  position: relative;
-}
-.tiny-handler-list__heads {
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  height: calc(100% - 2px);
-}
-.tiny-handler-list__icon {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  height: calc(100% - 2px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-}
-.tiny-handler-list__head-img {
-  border-radius: 50%;
-  position: absolute;
-}
-/* HandlerDropdown */
-.tiny-handler-dropdown {
-  width: auto;
-  height: auto;
-  padding: 6px;
-  text-align: initial;
-  cursor: pointer;
-}
-.tiny-handler-dropdown-item + .tiny-handler-dropdown-item {
-  margin-top: 6px;
-  padding-top: 6px;
-  border-top: 1px dashed #999;
-}
-.tiny-handler-dropdown-item {
-  font-size: 12px;
-  display: grid;
-  gap: 4px;
-  grid-template-rows: repeat(3, 20px);
-  grid-template-columns: 20px 20px 40px auto 40px;
-  grid-template-areas:
-    'icon status status status status'
-    '. head name key role'
-    '. date date date date';
-  align-items: center;
-  justify-content: start;
-}
-.tiny-handler-dropdown-item .item-icon {
-  grid-area: icon;
-}
-.tiny-handler-dropdown-item .item-status {
-  grid-area: status;
-  font-weight: bold;
-}
-.tiny-handler-dropdown-item .item-head {
-  grid-area: head;
-}
-.tiny-handler-dropdown-item .item-name {
-  grid-area: name;
-}
-.tiny-handler-dropdown-item .item-key {
-  grid-area: key;
-}
-.tiny-handler-dropdown-item .item-role {
-  grid-area: role;
-  background: #d9d9d9;
-}
-.tiny-handler-dropdown-item .item-date {
-  grid-area: date;
-  color: #999;
-}
-.tiny-handler-dropdown-item .item-icon .tiny-svg {
-  fill: #fff;
-}
-.tiny-popover.demo-popover-class1.tiny-popper[x-placement^='bottom'] {
-  margin-top: 2px;
-  padding: 0;
-}
-</style>

package/demos/pc/app/flowchart/basic-usage.spec.ts

@@ -4,7 +4,8 @@ test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('flowchart#basic-usage')
 
-  const flowchart = page.locator('.pc-demo .tiny-flow-chart')
+  const preview = page.locator('#basic-usage')
+  const flowchart = preview.locator('.tiny-flow-chart')
   const nodes = flowchart.locator('.tiny-flow-chart__node-icon-wrapper')
   await expect(flowchart).toBeVisible()
   await expect(flowchart).toHaveCSS('width', '1024px')

package/demos/pc/app/flowchart/basic-usage.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="tiny-demo">
-    <button @click="toggleStatus">切换状态</button>
     <tiny-flowchart
       ref="chart"
       :data="chartData"
@@ -9,157 +8,15 @@
       @click-link="onClickLink"
       @click-blank="onClickBlank"
     >
-      <template #content="params">
-        <handler-list class="custom-handler-list" :params="params" />
-      </template>
     </tiny-flowchart>
   </div>
 </template>
 
 <script>
-import { TinyModal, TinyPopover, Flowchart } from '@opentiny/vue'
+import { TinyModal, TinyFlowchart } from '@opentiny/vue'
 import { hooks } from '@opentiny/vue-common'
-import { iconYes, iconPanelMini, iconChevronDown, iconChevronUp } from '@opentiny/vue-icon'
 
-const { createNode, createLink, createItem, createConfig } = Flowchart
-
-const HandlerDropdown = {
-  template: `<div class="tiny-handler-dropdown">
-    <div v-for="(handler, i) in params.node.info.items" :key="i" class="tiny-handler-dropdown-item">
-      <div class="item-icon">
-        <div :style="iconStyle(handler)">
-          <icon-yes v-if="check(handler)"></icon-yes>
-          <icon-pane v-else></icon-pane>
-        </div>
-      </div>
-      <div class="item-status">{{ handler.status }}</div>
-      <div class="item-head">
-        <img :src="params.allItem[handler.key]" :style="imgStyle" />
-      </div>
-      <div class="item-name">{{ handler.name }}</div>
-      <div class="item-key">{{ handler.key }}</div>
-      <div class="item-role">{{ handler.role }}</div>
-      <div class="item-date">{{ handler.date }}</div>
-    </div>
-  </div>`,
-  name: 'TinyHandlerDropdown',
-  components: {
-    IconYes: iconYes(),
-    IconPane: iconPanelMini()
-  },
-  props: {
-    params: Object
-  },
-  computed: {
-    imgStyle() {
-      return 'width:16px;height:16px;border-radius:50%;'
-    }
-  },
-  methods: {
-    check(handler) {
-      const { params } = this
-      return typeof params.config.checkItemStatus === 'function' && params.config.checkItemStatus(handler)
-    },
-    iconStyle(handler) {
-      const color = this.check(handler)
-        ? 'border-color:#52c41a;background:#52c41a;'
-        : 'border-color:#40a9ff;background:#40a9ff;'
-      return (
-        this.imgStyle +
-        'display:flex;align-items:center;justify-content:center;' +
-        'border-width:1px;border-style:solid;' +
-        color
-      )
-    }
-  }
-}
-
-const HandlerList = {
-  template: `<tiny-popover
-    placement="bottom-start"
-    title=""
-    v-model="params.showPop"
-    width="220"
-    trigger="manual"
-    popper-class="demo-popover-class1"
-    :visible-arrow="false"
-  >
-    <handler-dropdown class="custom-handler-dropdown" :params="params" />
-    <template #reference>
-      <div
-        class="tiny-handler-list"
-        :class="'name-' + params.node.name"
-        :style="'border:1px solid ' + params.config.listBorderColor"
-      >
-        <div class="tiny-handler-list__heads" :style="'width:' + headWidth + 'px'">
-          <img
-            v-for="(item, i) in heads"
-            class="tiny-handler-list__head-img"
-            :key="i"
-            :src="item.head"
-            :style="item.style"
-          />
-        </div>
-        <div
-          class="tiny-handler-list__icon"
-          :style="'width:' + params.config.listIconSize + 'px;fill:' + params.config.listIconColor"
-          @click="toggleStatus"
-        >
-          <icon-up v-if="params.dropdowns[params.node.name]"></icon-up>
-          <icon-down v-else></icon-down>
-        </div>
-      </div>
-    </template>
-  </tiny-popover>`,
-  name: 'TinyHandlerList',
-  components: {
-    IconDown: iconChevronDown(),
-    IconUp: iconChevronUp(),
-    HandlerDropdown,
-    TinyPopover
-  },
-  props: {
-    params: Object
-  },
-  computed: {
-    headWidth() {
-      const { params } = this
-
-      return params.config.listWidth - 6 - params.config.listIconSize
-    },
-    heads() {
-      const { params, headWidth } = this
-      const { allItem, node, config } = params
-      const { headSize } = config
-      const { info } = node
-      const { items } = info
-      const imgStyle = `width:${headSize}px;height:${headSize}px`
-      const res = []
-
-      items.forEach(({ key }, i) => {
-        let left
-
-        if (items.length > 1) {
-          left = Math.floor(((headWidth - headSize) / (items.length - 1)) * i)
-        } else if (items.length === 1) {
-          left = Math.floor(headWidth / 2)
-        }
-
-        const style = `${imgStyle};left:${left}px`
-
-        res.push({ head: allItem[key], style })
-      })
-
-      return res
-    }
-  },
-  methods: {
-    toggleStatus() {
-      const { params } = this
-      params.dropdowns[params.node.name] = !params.dropdowns[params.node.name]
-    }
-  }
-}
+const { createNode, createLink, createItem, createConfig } = TinyFlowchart
 
 const handlers = [
   createItem('WX100001', '张三', '转审人', '已转审', '很好', '2018-08-20 12:00', ''),
@@ -209,32 +66,17 @@ chartConfig.headUrl = `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/m
 chartConfig.checkItemStatus = (item) => ~['已转审', '已同意'].indexOf(item.status)
 chartConfig.adjustPos = (afterNode) => afterNode.raw.name === '2' && (afterNode.y += 1)
 
-const nodeFail = chartData.nodes[chartData.nodes.length - 1]
-const linkDash = chartData.links[chartData.links.length - 1]
-
 export default {
   components: {
-    TinyFlowchart: Flowchart,
-    HandlerList
+    TinyFlowchart
   },
   data() {
     return {
       chartData: hooks.markRaw(chartData),
-      chartConfig: hooks.markRaw(chartConfig),
-      flag: false
+      chartConfig: hooks.markRaw(chartConfig)
     }
   },
   methods: {
-    toggleStatus() {
-      this.flag = !this.flag
-      // 1.更改数据
-      nodeFail.info.status = this.flag ? 1 : 4
-      linkDash.info.style = this.flag ? 'solid' : 'dash'
-      linkDash.info.status = this.flag ? 1 : 3
-      chartConfig.anchor = this.flag ? 'left' : 'center'
-      // 2.刷新流程图
-      this.$refs.chart.refresh()
-    },
     onClickNode(_afterNode, _e) {
       TinyModal.message('click-node')
     },
@@ -247,90 +89,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-/* HandlerList */
-.tiny-handler-list {
-  width: calc(100% - 2px);
-  height: 100%;
-  border-radius: 3px;
-  position: relative;
-}
-.tiny-handler-list__heads {
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  height: calc(100% - 2px);
-}
-.tiny-handler-list__icon {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  height: calc(100% - 2px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-}
-.tiny-handler-list__head-img {
-  border-radius: 50%;
-  position: absolute;
-}
-/* HandlerDropdown */
-.tiny-handler-dropdown {
-  width: auto;
-  height: auto;
-  padding: 6px;
-  text-align: initial;
-  cursor: pointer;
-}
-.tiny-handler-dropdown-item + .tiny-handler-dropdown-item {
-  margin-top: 6px;
-  padding-top: 6px;
-  border-top: 1px dashed #999;
-}
-.tiny-handler-dropdown-item {
-  font-size: 12px;
-  display: grid;
-  gap: 4px;
-  grid-template-rows: repeat(3, 20px);
-  grid-template-columns: 20px 20px 40px auto 40px;
-  grid-template-areas:
-    'icon status status status status'
-    '. head name key role'
-    '. date date date date';
-  align-items: center;
-  justify-content: start;
-}
-.tiny-handler-dropdown-item .item-icon {
-  grid-area: icon;
-}
-.tiny-handler-dropdown-item .item-status {
-  grid-area: status;
-  font-weight: bold;
-}
-.tiny-handler-dropdown-item .item-head {
-  grid-area: head;
-}
-.tiny-handler-dropdown-item .item-name {
-  grid-area: name;
-}
-.tiny-handler-dropdown-item .item-key {
-  grid-area: key;
-}
-.tiny-handler-dropdown-item .item-role {
-  grid-area: role;
-  background: #d9d9d9;
-}
-.tiny-handler-dropdown-item .item-date {
-  grid-area: date;
-  color: #999;
-}
-.tiny-handler-dropdown-item .item-icon .tiny-svg {
-  fill: #fff;
-}
-.tiny-popover.demo-popover-class1.tiny-popper[x-placement^='bottom'] {
-  margin-top: 2px;
-  padding: 0;
-}
-</style>