alicorn-dev/KintoneAppBuilder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI美化

Browse Source
This commit is contained in:
maxiaozhe@alicorns.co.jp
2023-09-08 20:04:34 +09:00
parent 40cd9998d0
commit ff03490209
3 changed files with 133 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
frontend/src/components/main/NodeItem.vue
View File

@@ -1,107 +1,141 @@
<template>
<div class="row justify-center" :style="{marginLeft:node.inputPoint!==''?'240px':''}">
<div class="row justify-center" :style="{ marginLeft: node.inputPoint !== '' ? '240px' : '' }" @click="onNodeClick">
<div class="row">
<q-card class="action-node" :class="{'root-node':node.isRoot,'text-white':node.isRoot}" :square="false">
<q-card class="action-node" :class="nodeStyle" :square="false" >
<q-card-section>
<div class="text-h6">{{ node.title }}</div>
<div class="text-subtitle2">{{ node.subTitle }}</div>
</q-card-section>
<template v-if="hasBranch">
<q-separator />
<q-card-actions align="around">
<q-btn flat v-for="(point,index) in node.outputPoints" :key="index">
{{ point }}
</q-btn>
</q-card-actions>
<q-separator />
<q-card-actions align="around">
<q-btn flat v-for="(point, index) in node.outputPoints" :key="index">
{{ point }}
</q-btn>
</q-card-actions>
</template>
</q-card>
</div>
</div>
<template v-if="hasBranch">
<div class="row justify-center" :style="{marginLeft:node.inputPoint!==''?'240px':''}">
<div v-for="(point,index) in node.outputPoints" :key="index">
<node-line :action-node="node" :mode="getMode(point)" @addNode="addNode" :input-point="point" ></node-line>
<div class="row justify-center" :style="{ marginLeft: node.inputPoint !== '' ? '240px' : '' }">
<div v-for="(point, index) in node.outputPoints" :key="index">
<node-line :action-node="node" :mode="getMode(point)" @addNode="addNode" :input-point="point"></node-line>
</div>
</div>
</template>
<template v-if="!hasBranch">
<div class="row justify-center" :style="{marginLeft:node.inputPoint!==''?'240px':''}">
<div class="row justify-center" :style="{ marginLeft: node.inputPoint !== '' ? '240px' : '' }">
<node-line :action-node="node" :mode="getMode('')" @addNode="addNode" input-point=""></node-line>
</div>
</template>
</template>
<script lang="ts">
import {defineComponent,computed} from 'vue';
import {IActionNode } from '../../types/ActionTypes';
import NodeLine,{Direction} from '../main/NodeLine.vue';
export default defineComponent({
name: 'NodeItem',
components: {
NodeLine
},
props: {
actionNode:{
type:Object as ()=>IActionNode,
required:true
import { defineComponent, computed, ref } from 'vue';
import { IActionNode } from '../../types/ActionTypes';
import NodeLine, { Direction } from '../main/NodeLine.vue';
export default defineComponent({
name: 'NodeItem',
components: {
NodeLine
},
props: {
actionNode: {
type: Object as () => IActionNode,
required: true
},
isSelected: {
type: Boolean
}
},
emits: [
'addNode',
"nodeSelected"
],
setup(props, context) {
const hasBranch = computed(() => props.actionNode.outputPoints.length > 0);
const nodeStyle = computed(() => {
return {
'root-node': props.actionNode.isRoot,
'text-white': props.actionNode.isRoot,
'selected': props.isSelected && !props.actionNode.isRoot
};
});
const getMode = (point: string) => {
if (point === '' || props.actionNode.outputPoints.length === 0) {
return Direction.Default;
}
if (point === props.actionNode.outputPoints[0]) {
if (props.actionNode.nextNodes.get(point)) {
return Direction.Left;
} else {
return Direction.LeftNotNext;
}
},
emits: [
'addNode'
],
setup(props,context){
const hasBranch = computed(() => props.actionNode.outputPoints.length > 0);
const getMode =(point:string)=>{
if(point==='' || props.actionNode.outputPoints.length===0){
return Direction.Default;
}
if(point===props.actionNode.outputPoints[0]){
if(props.actionNode.nextNodes.get(point)){
return Direction.Left;
}else{
return Direction.LeftNotNext;
}
}else{
if(props.actionNode.nextNodes.get(point)){
return Direction.Right;
}else{
return Direction.RightNotNext;
}
}
}
const addNode=(point:string)=>{
context.emit('addNode',props.actionNode,point);
}
return {
node:props.actionNode,
hasBranch,
isRoot:props.actionNode.isRoot,
getMode,
addNode
} else {
if (props.actionNode.nextNodes.get(point)) {
return Direction.Right;
} else {
return Direction.RightNotNext;
}
}
});
}
/**
* アクションノード追加イベントを
* @param point 入力ポイント
*/
const addNode = (point: string) => {
context.emit('addNode', props.actionNode, point);
}
/**
* ノード選択状態
*/
const onNodeClick = () => {
context.emit('nodeSelected', props.actionNode);
}
return {
node: props.actionNode,
isRoot: props.actionNode.isRoot,
hasBranch,
nodeStyle,
getMode,
addNode,
onNodeClick
}
}
});
</script>
<style lang="scss">
.action-node{
min-width:250px !important;
.action-node {
min-width: 250px !important;
}
.line{
height:20px;
.line {
height: 20px;
}
.line:after{
content:'';
background-color:$blue-7;
display:block;
width:3px;
.line:after {
content: '';
background-color: $blue-7;
display: block;
width: 3px;
}
.add-icon{
.add-icon {
font-size: 2em;
color:$blue-7;
color: $blue-7;
}
.root-node{
background-color:$blue-7;
.root-node {
background-color: $blue-7;
border-radius: 20px;
}
.action-node:not(.root-node):hover{
background-color: $light-blue-1;
}
.selected{
background-color: $light-blue-1;
}
</style>