@arkxos/arkos-system 0.1.0

package/src/admin/visual/comp-event.vue

@@ -0,0 +1,1677 @@
+<template>
+  <div
+    v-if="activatedNode.compEventList.length > 0"
+    class="event-box"
+  >
+    <div
+      v-for="(event, index) in activatedNode.compEventList"
+      :key="index"
+      class="event-item"
+    >
+      <div class="event-item-name">{{event.name}}</div>
+      <div class="event-item-operate">
+        <ac-icon
+          iconId="018dca6db20c6a3aaf68"
+          title="编辑"
+          style="margin-right: 8px"
+          @click="editEvent(event)"
+        />
+        <ac-icon
+          iconId="018dc9c3efd3a0502886"
+          title="删除"
+          color="red"
+          @click="deleteEvent(index)"
+        />
+      </div>
+    </div>
+  </div>
+  <div class="event-add-box" v-if="currEventList.length > 0">
+    <div class="event-add" @click="addEvent">
+      <ac-icon iconId="018dca3b4707c4c43a2f" />
+      <span style="margin-left: 5px;font-size:13px">添加事件</span>
+    </div>
+  </div>
+  <div v-else class="not-support">此组件不支持事件</div>
+
+  <el-drawer
+    v-model="dialogVisible"
+    size="370px"
+    title="事件编辑"
+    class="dark-drawer-box"
+    :close-on-click-modal="false"
+    :with-header="false"
+    destroy-on-close
+  >
+    <div class="common-box">
+      <div class="common-item">
+        <span class="label">事件名称：</span>
+        <span class="content">
+          <ac-select v-model="currCompEvent.name" :options="currEventList" size="small" />
+        </span>
+      </div>
+    </div>
+    <el-row v-if="currCompEvent.actionList.length > 0">
+      <el-col :span="24">
+        <el-collapse v-model="actionNames">
+          <el-collapse-item
+            v-for="(action, index) in currCompEvent.actionList"
+            :key="index"
+            :name="index"
+            :title="action.name"
+          >
+            <template #title>
+              <div class="collapse-item-header">
+                <span>{{action.name}}</span>
+                <span style="display: flex;">
+                  <ac-icon
+                    v-if="index > 0"
+                    iconId="018fa3973ded010d7ef2"
+                    title="上移"
+                    color="#cccccc"
+                    style="margin-right: 10px"
+                    @click.stop="upAction(index)"
+                  />
+                  <ac-icon
+                    v-if="index < currCompEvent.actionList.length - 1"
+                    iconId="018fa397630c01052d7e"
+                    title="下移"
+                    color="#cccccc"
+                    style="margin-right: 10px"
+                    @click.stop="downAction(index)"
+                  />
+                  <ac-icon
+                    iconId="018dc9c3efd3a0502886"
+                    title="删除"
+                    color="red"
+                    style="margin-right: 10px"
+                    @click.stop="deleteAction(index)"
+                  />
+                </span>
+              </div>
+            </template>
+            <div class="common-box">
+              <div class="common-item">
+                <span class="label">动作名称：</span>
+                <span class="content">
+                  <ac-select
+                    v-model="action.name"
+                    size="small"
+                    :options="compActionList"
+                    @change="changeAction(action)"
+                  />
+                </span>
+              </div>
+            </div>
+            <div class="common-box">
+              <div class="common-item">
+                <span class="label">判断条件：</span>
+                <span class="content">
+                  <ac-switch
+                    v-model="action.condition"
+                    :options="[
+                      {key: true, value: ''},
+                      {key: false, value: ''},
+                    ]"
+                    size="small"
+                  />
+                </span>
+              </div>
+            </div>
+            <div v-if="action.condition" class="common-box">
+              <div
+                class="common-list"
+                v-for="(condition, index) in action.conditionList || []"
+                :key="index"
+              >
+                <div class="common-item" >
+                  <span class="label">
+                    <el-tooltip content="同分组为and，不同分组间为or">
+                      <span>分组<ac-icon iconId="018dca8ec9890493be26" style="margin-left: 5px"/>：</span>
+                    </el-tooltip>
+                  </span>
+                  <span class="content">
+                    <el-input v-model="condition.group" size="small" />
+                    <ac-icon
+                      v-if="index > 0 && index < (action.conditionList || []).length"
+                      iconId="018fa3973ded010d7ef2"
+                      title="上移"
+                      style="margin-left: 10px"
+                      @click="moveConditionUp(index, action.conditionList)"
+                    />
+                    <ac-icon
+                      v-if="index < (action.conditionList || []).length - 1"
+                      iconId="018fa397630c01052d7e"
+                      title="下移"
+                      style="margin-left: 10px"
+                      @click="moveConditionDown(index, action.conditionList)"
+                    />
+                    <ac-icon
+                      iconId="018dc9c3efd3a0502886"
+                      title="删除条件"
+                      color="red"
+                      style="margin-left: 10px"
+                      @click="deleteCondition(index, action.conditionList)"
+                    />
+                  </span>
+                </div>
+                <div class="common-item">
+                  <span class="label">条件：</span>
+                  <span class="content">
+                    <ac-select
+                      v-model="condition.condition"
+                      size="small"
+                      :options="getNodeOptions()"
+                    />
+                  </span>
+                </div>
+                <div class="common-item">
+                  <span class="label">类型：</span>
+                  <span class="content">
+                    <ac-select
+                      v-model="condition.type"
+                      size="small"
+                      options="等于,不等于,包含,不包含,大于,大于等于,小于,小于等于"
+                    />
+                  </span>
+                </div>
+                <div class="common-item">
+                  <span class="label">条件值：</span>
+                  <span class="content">
+                    <Component
+                      :is="'ac-' + getFieldType(condition.condition)"
+                      v-model="condition.value"
+                      v-bind:compStyle="getFieldProp(condition.condition)"
+                      size="small"
+                    />
+                  </span>
+                </div>
+              </div>
+              <div class="event-add-box">
+                <div class="event-add" @click="addCondition(action.conditionList)">
+                  <ac-icon iconId="018dca3b4707c4c43a2f" />
+                  <span style="margin-left: 5px;font-size:13px">添加条件</span>
+                </div>
+              </div>
+            </div>
+            <div v-if="action.name === '切换状态'" class="comp-box">
+              <div style="margin-bottom: 5px">
+                <el-input
+                  v-model="filterStyleNodeName"
+                  placeholder="组件搜索"
+                  size="small"
+                >
+                  <template #suffix>
+                    <ac-icon iconId="018dc9c3efe489a7d117" />
+                  </template>
+                </el-input>
+              </div>
+              <div
+                v-for="node in getStyleNodeList(filterStyleNodeName)"
+                :key="node.id"
+                class="comp-list"
+              >
+                <div
+                  :style='action.styleList && action.styleList[node.id] ? "color: #79bbff" : ""'
+                  class="comp-item" @click="toggleNodeStyle(action, node.id)"
+                >
+                  <ac-icon
+                    v-if="action.styleList && action.styleList[node.id]"
+                    iconId="018ece4f6bf7915ea331"
+                  />
+                  <ac-icon
+                    v-else
+                    iconId="018f9ae7fa11010b3641"
+                  />
+                  <span>{{node.name}}</span>
+                </div>
+                <div v-if="action.styleList && action.styleList[node.id]" class="style-box">
+                  <span
+                    v-for="style in node.styleList"
+                    :key="style.id"
+                    class="style-list"
+                    @click="toggleChangeStyle(action, node, style.id)"
+                    :style='action.styleList && action.styleList[node.id] === style.id ? "color: #79bbff" : ""'
+                  >
+                    <ac-icon
+                      v-if="action.styleList[node.id] === style.id"
+                      iconId="018dca412c4e207388f7"
+                    />
+                    <ac-icon
+                      v-else
+                      iconId="018f68cc34330101d11d"
+                    />
+                    <span style="margin-right: 10px;font-size: 13px;">{{style.name}}</span>
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div v-if="action.name === '表单校验'" class="comp-box">
+              <div class="comp-list">
+                <div
+                  v-for="node in getFormList()"
+                  :key="node.id"
+                  class="comp-item"
+                  @click="toggleForm(action, node.id)"
+                >
+                  <ac-icon
+                    v-if="action.formList && action.formList.indexOf(node.id) >= 0"
+                    iconId="018ece4f6bf7915ea331"
+                    color="#409eff"
+                  />
+                  <ac-icon v-else iconId="018f9ae7fa11010b3641" />
+                  <span
+                    :style='action.formList && action.formList.indexOf(node.id) >= 0 ? "color: #79bbff" : ""'
+                  >{{node.name}}</span>
+                </div>
+              </div>
+            </div>
+            <div v-if="action.name === '传递参数'" class="comp-box">
+              <div style="margin-bottom: 5px">
+                <el-input
+                  v-model="filterParamNodeName"
+                  placeholder="组件搜索"
+                  size="small"
+                >
+                  <template #suffix>
+                    <ac-icon iconId="018dc9c3efe489a7d117" />
+                  </template>
+                </el-input>
+              </div>
+              <div class="comp-list">
+                <div
+                  v-for="node in getParamNodeList(filterParamNodeName)"
+                  :key="node.id"
+                  class="comp-item-column"
+                >
+                  <div class="comp-item-label">
+                    <ac-icon
+                      v-if="action.paramList && action.paramList[node.id]"
+                      iconId="018ece4f6bf7915ea331"
+                      color="#409eff"
+                    />
+                    <ac-icon v-else iconId="018f9ae7fa11010b3641" />
+                    <span
+                      :style='action.paramList && action.paramList[node.id] >= 0 ? "color: #79bbff" : ""'
+                      @click="toggleParam(action, node)"
+                    >{{node.name}}</span>
+                  </div>
+                  <div class="content-list" v-if="action.paramList && action.paramList[node.id]">
+                    <div
+                      class="param-item"
+                      v-for="(param, index) in action.paramList[node.id]"
+                      :key="index"
+                    >
+                      <div class="param-field">
+                        <el-input
+                          v-if="param.input"
+                          v-model="param.fieldName"
+                          size="small"
+                          :disabled="param.empty"
+                        />
+                        <ac-select
+                          v-else
+                          v-model="param.fieldName"
+                          size="small"
+                          :options="getEventOption()"
+                          :disabled="param.empty"
+                        />
+                      </div>
+                      <div class="param-split"><ac-icon iconId="018eecae20bd010c2adf" /></div>
+                      <div class="param-page">
+                        <el-input v-model="param.name" size="small" disabled />
+                      </div>
+                      <div class="param-empty">
+                        <ac-switch
+                          v-model="param.empty"
+                          title="是否传空值"
+                          :options="[{key: true, value: ''}, {key: false, value: ''}]"
+                          size="small"
+                        />
+                        <ac-switch
+                          v-if="!param.empty"
+                          v-model="param.input"
+                          title="是否手动输入"
+                          style="margin-left: 5px;"
+                          :options="[{key: true, value: ''}, {key: false, value: ''}]"
+                          size="small"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-if="action.name === '刷新组件'" class="comp-box">
+              <div style="margin-bottom: 5px">
+                <el-input
+                  v-model="filterName"
+                  placeholder="组件搜索"
+                  size="small"
+                >
+                  <template #suffix>
+                    <ac-icon iconId="018dc9c3efe489a7d117" />
+                  </template>
+                </el-input>
+              </div>
+              <div class="comp-list">
+                <div
+                  v-for="node in getNodeList(filterName)"
+                  :key="node.id"
+                  class="comp-item"
+                  @click="toggleRefresh(action, node.id)"
+                >
+                  <ac-icon
+                    v-if="action.refreshList && action.refreshList.indexOf(node.id) >= 0"
+                    iconId="018ece4f6bf7915ea331"
+                    color="#409eff"
+                  />
+                  <ac-icon v-else iconId="018f9ae7fa11010b3641" />
+                  <span
+                    :style='action.refreshList && action.refreshList.indexOf(node.id) >= 0 ? "color: #79bbff" : ""'
+                  >{{node.name}}</span>
+                </div>
+              </div>
+            </div>
+            <div v-if="action.name === '调用脚本'" class="common-box">
+              <div class="common-item">
+                <span class="label">显示确认框：</span>
+                <span class="content">
+                  <ac-switch
+                    v-model="action.confirm"
+                    :options="[
+                      {key: true, value: ''},
+                      {key: false, value: ''},
+                    ]"
+                    size="small"
+                  />
+                </span>
+              </div>
+              <div class="common-item" v-if="action.confirm">
+                <span class="label">确认框标题：</span>
+                <span class="content">
+                  <el-input v-model="action.confirmTitle" size="small" />
+                </span>
+              </div>
+              <div class="common-item" v-if="action.confirm">
+                <span class="label">确认框内容：</span>
+                <span class="content">
+                  <el-input v-model="action.confirmContent" size="small" />
+                </span>
+              </div>
+              <div class="common-item">
+                <span class="label">调用脚本：</span>
+                <span class="content">
+                  <ac-tree
+                    v-model="action.scriptId"
+                    data-url="/system/scriptGroovy/queryTree"
+                    type-select="script"
+                    size="small"
+                  />
+                </span>
+              </div>
+              <div class="param-box">
+                <div
+                  class="param-list"
+                  v-for="(param, index) in action.paramList || []"
+                  :key="index"
+                >
+                  <div class="param-item">
+                    <div style="width: 120px;margin-right: 5px;flex-shrink: 0">
+                      <el-input v-model="param.name" placeholder="参数名" size="small" />
+                    </div>
+                    <div v-if="param.input" style="flex-grow: 1">
+                      <el-input v-model="param.fieldName" title="参数值" size="small" />
+                    </div>
+                    <div v-else style="flex-grow: 1">
+                      <ac-select
+                        v-model="param.fieldName"
+                        size="small"
+                        :options="getNodeOptions()"
+                        title="参数值"
+                      />
+                    </div>
+                    <div style="margin-left: 5px;flex-shrink: 0">
+                      <ac-switch
+                        v-model="param.input"
+                        :options="[{key: true, value: ''}, {key: false, value: ''}]"
+                        title="是否手动输入"
+                        size="small"
+                      />
+                    </div>
+                    <div class="icon">
+                      <ac-icon
+                        iconId="018dc9c3efd3a0502886"
+                        title="删除"
+                        color="red"
+                        @click="action.paramList.splice(index, 1)"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="middle-row">
+                  <ac-icon iconId="018dca3b4707c4c43a2f" />
+                  <span style="font-size: 13px" @click="addParam(action)">添加参数</span>
+                  <ac-icon style="margin-left: 15px" iconId="018ece4f72d1bf69178b" />
+                  <span style="font-size: 13px" @click="addAllParam(action)">一键添加</span>
+                </div>
+              </div>
+            </div>
+            <div v-if="action.name === '操作数据'" class="common-box">
+              <div class="common-item">
+                <span class="label">显示确认框：</span>
+                <span class="content">
+                  <ac-switch
+                    v-model="action.confirm"
+                    :options="[
+                      {key: true, value: ''},
+                      {key: false, value: ''},
+                    ]"
+                    size="small"
+                  />
+                </span>
+              </div>
+              <div class="common-item" v-if="action.confirm">
+                <span class="label">确认框标题：</span>
+                <span class="content">
+                  <el-input v-model="action.confirmTitle" size="small" />
+                </span>
+              </div>
+              <div class="common-item" v-if="action.confirm">
+                <span class="label">确认框内容：</span>
+                <span class="content">
+                  <el-input v-model="action.confirmContent" size="small" />
+                </span>
+              </div>
+              <div class="common-item">
+                <span class="label">调用脚本：</span>
+                <span class="content">
+                  <ac-tree
+                    v-model="action.scriptId"
+                    data-url="/system/scriptGroovy/queryTree"
+                    type-select="script"
+                    size="small"
+                  />
+                </span>
+              </div>
+              <div class="param-box">
+                <div
+                  class="param-list"
+                  v-for="(param, index) in action.paramList || []"
+                  :key="index"
+                >
+                  <div class="param-item">
+                    <div style="width: 120px;margin-right: 5px;flex-shrink: 0">
+                      <el-input v-model="param.name" placeholder="参数名" size="small" />
+                    </div>
+                    <div v-if="param.input" style="flex-grow: 1">
+                      <el-input v-model="param.fieldName" title="参数值" size="small" />
+                    </div>
+                    <div v-else style="flex-grow: 1">
+                      <ac-select v-model="param.fieldName" :options="getNodeOptions()" title="参数值" size="small" />
+                    </div>
+                    <div style="margin-left: 5px;flex-shrink: 0">
+                      <ac-switch
+                        v-model="param.input"
+                        :options="[{key: true, value: ''}, {key: false, value: ''}]"
+                        title="是否手动输入"
+                        size="small"
+                      />
+                    </div>
+                    <div class="icon">
+                      <ac-icon
+                        iconId="018dc9c3efd3a0502886"
+                        title="删除"
+                        color="red"
+                        @click="action.paramList.splice(index, 1)"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="middle-row">
+                  <ac-icon iconId="018dca3b4707c4c43a2f" />
+                  <span style="font-size: 13px" @click="addParam(action)">添加参数</span>
+                  <ac-icon style="margin-left: 15px" iconId="018ece4f72d1bf69178b" />
+                  <span style="font-size: 13px" @click="addAllParam(action)">一键添加</span>
+                </div>
+              </div>
+            </div>
+            <div v-if="action.name === '链接页面'" class="common-box">
+              <div class="common-item">
+                <span class="label">链接页面：</span>
+                <span class="content">
+                  <ac-tree
+                    v-model="action.linkPageId"
+                    data-url="/system/page/queryTree"
+                    typeSelect="page"
+                    size="small"
+                    @change="() => changePage(action)"
+                  />
+                </span>
+              </div>
+              <div
+                v-if="'链接页面'.indexOf(action.name) >= 0
+                  && action.linkPageId
+                  && action.paramList
+                  && action.paramList.length > 0"
+                class="common-item"
+              >
+                <span class="label" style="align-self: flex-start">出参配置：</span>
+                <div class="content-list">
+                  <div
+                    class="param-item"
+                    v-for="(param, index) in action.paramList"
+                    :key="index"
+                  >
+                    <div class="param-field">
+                      <el-input
+                        v-if="param.input"
+                        v-model="param.value"
+                        size="small"
+                      />
+                      <ac-select
+                        v-else
+                        v-model="param.fieldName"
+                        size="small"
+                        :options="getNodeOptions()"
+                      />
+                    </div>
+                    <div class="param-split"><ac-icon iconId="018eecae20bd010c2adf" /></div>
+                    <div class="param-page">
+                      <el-input v-model="param.pageParamName" size="small" disabled />
+                    </div>
+                    <div style="margin-left: 5px;flex-shrink: 0">
+                      <ac-switch
+                        v-model="param.input"
+                        :options="[{key: true, value: ''}, {key: false, value: ''}]"
+                        title="是否手动输入"
+                        size="small"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="common-item">
+                <span class="label">链接方式：</span>
+                <span class="content">
+                  <ac-buttons v-model="action.linkType" options="弹窗,抽屉" size="small"  />
+                </span>
+              </div>
+              <div class="common-item">
+                <span class="label">可否编辑：</span>
+                <span class="content">
+                  <ac-switch
+                    v-model="action.canEdit"
+                    :options="[{key: true, value: ''}, {key: false, value: ''}]"
+                    size="small"
+                  />
+                </span>
+              </div>
+              <div v-if="action.linkType !== '跳转'">
+                <div class="common-item">
+                  <span class="label">显示标题：</span>
+                  <span class="content">
+                    <ac-switch
+                      v-model="action.showTitle"
+                      :options="[{key: true, value: ''}, {key: false, value: ''}]"
+                      size="small"
+                    />
+                  </span>
+                </div>
+                <div class="common-item" v-if="action.showTitle">
+                  <span class="label">标题名称：</span>
+                  <span class="content">
+                    <el-input v-model="action.title" size="small" />
+                  </span>
+                </div>
+                <div class="common-item">
+                  <span class="label">是否全屏：</span>
+                  <span class="content">
+                    <ac-switch
+                      v-model="action.fullscreen"
+                      :options="[{key: true, value: ''}, {key: false, value: ''}]"
+                      size="small"
+                    />
+                  </span>
+                </div>
+                <div class="common-item" v-if="!action.fullscreen">
+                  <span class="label">窗口宽度：</span>
+                  <span class="content">
+                    <ac-input v-model="action.showWidth" size="small" />
+                  </span>
+                </div>
+                <div class="common-item">
+                  <span class="label" title="点击遮罩层关闭">点击遮罩层关闭：</span>
+                  <span class="content">
+                    <ac-switch
+                      v-model="action.closeOnClickModal"
+                      :options="[{key: true, value: ''}, {key: false, value: ''}]"
+                      size="small"
+                    />
+                  </span>
+                </div>
+                <div class="common-item">
+                  <span class="label">显示页脚：</span>
+                  <span class="content">
+                    <ac-switch
+                      v-model="action.showFooter"
+                      :options="[{key: true, value: ''}, {key: false, value: ''}]"
+                      size="small"
+                    />
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div v-if="action.name === '跳转菜单'" class="common-box">
+              <div class="common-item">
+                <span class="label">跳转菜单：</span>
+                <span class="content">
+                  <ac-tree
+                    v-model="action.gotoMenuId"
+                    dataUrl="/system/menu/querySubsystemTree"
+                    :leafSelect="true"
+                    size="small"
+                  />
+                </span>
+              </div>
+              <div class="common-item">
+                <span class="label">跳转方式：</span>
+                <span class="content">
+                  <ac-buttons v-model="action.gotoType" options="本页跳转,新页面" size="small" />
+                </span>
+              </div>
+              <div class="param-box">
+                <div
+                  class="param-list"
+                  v-for="(param, index) in action.paramList || []"
+                  :key="index"
+                >
+                  <div class="param-item">
+                    <div style="width: 120px;margin-right: 5px;flex-shrink: 0">
+                      <el-input v-model="param.name" placeholder="参数名" size="small" />
+                    </div>
+                    <div v-if="param.input" style="flex-grow: 1">
+                      <el-input v-model="param.fieldName" title="参数值" size="small" />
+                    </div>
+                    <div v-else style="flex-grow: 1">
+                      <ac-select
+                        v-model="param.fieldName"
+                        size="small"
+                        :options="getNodeOptions()"
+                        title="参数值"
+                      />
+                    </div>
+                    <div style="margin-left: 5px;flex-shrink: 0">
+                      <ac-switch
+                        v-model="param.input"
+                        :options="[{key: true, value: ''}, {key: false, value: ''}]"
+                        title="是否手动输入"
+                        size="small"
+                      />
+                    </div>
+                    <div class="icon">
+                      <ac-icon
+                        iconId="018dc9c3efd3a0502886"
+                        title="删除"
+                        color="red"
+                        @click="action.paramList.splice(index, 1)"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="middle-row">
+                  <ac-icon iconId="018dca3b4707c4c43a2f" />
+                  <span style="font-size: 13px" @click="addParam(action)">添加参数</span>
+                  <ac-icon style="margin-left: 15px" iconId="018ece4f72d1bf69178b" />
+                  <span style="font-size: 13px" @click="addAllParam(action)">一键添加</span>
+                </div>
+              </div>
+            </div>
+            <div v-if="action.name === '关闭页面'" class="common-box">
+              <div class="common-item">
+                <span class="label">关闭方式：</span>
+                <span class="content">
+                  <ac-buttons v-model="action.closeType" options="当前窗口,当前页签" size="small" />
+                </span>
+              </div>
+            </div>
+            <div v-if="action.name === '跳转页面'" class="common-box">
+              <div class="common-item">
+                <span class="label">跳转页面：</span>
+                <span class="content">
+                  <ac-tree
+                    v-model="action.gotoPageId"
+                    data-url="/system/mobilePage/queryTree"
+                    typeSelect="2"
+                    :query="{mobileId: mobileId}"
+                    @change="() => changeMobilePage(action, action.gotoPageId)"
+                    size="small"
+                  />
+                </span>
+              </div>
+              <div
+                v-if="type === '移动端'"
+                class="content-list"
+                style="padding-left: 18px"
+              >
+                <div
+                  class="param-item"
+                  v-for="(param, index) in action.paramList"
+                  :key="index"
+                >
+                  <div class="param-field">
+                    <el-input
+                      v-if="param.input"
+                      v-model="param.fieldName"
+                      size="small"
+                      :disabled="param.empty"
+                    />
+                    <ac-select
+                      v-else
+                      v-model="param.fieldName"
+                      size="small"
+                      :options="getEventOption()"
+                      :disabled="param.empty"
+                    />
+                  </div>
+                  <div class="param-split"><ac-icon iconId="018eecae20bd010c2adf" /></div>
+                  <div class="param-page">
+                    <el-input v-model="param.text" size="small" disabled />
+                  </div>
+                  <div class="param-empty">
+                    <ac-switch
+                      v-model="param.empty"
+                      title="是否传空值"
+                      :options="[{key: true, value: ''}, {key: false, value: ''}]"
+                      size="small"
+                    />
+                    <ac-switch
+                      v-if="!param.empty"
+                      v-model="param.input"
+                      title="是否手动输入"
+                      style="margin-left: 5px;"
+                      :options="[{key: true, value: ''}, {key: false, value: ''}]"
+                      size="small"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div v-if="type === '移动端'" class="common-item">
+                <span class="label">禁止返回：</span>
+                <span class="content">
+                  <ac-switch
+                    v-model="action.forbidBack"
+                    :options="[{key: true, value: ''}, {key: false, value: ''}]"
+                    size="small"
+                  />
+                </span>
+              </div>
+            </div>
+            <div v-if="action.name === '系统登录'" class="common-box">
+              <div class="param-box">
+                <div
+                  class="param-list"
+                  v-for="(param, index) in action.paramList || []"
+                  :key="index"
+                >
+                  <div class="param-item">
+                    <div style="width: 120px;margin-right: 5px;flex-shrink: 0">
+                      <el-input v-model="param.name" placeholder="参数名" size="small" />
+                    </div>
+                    <div v-if="param.input" style="flex-grow: 1">
+                      <el-input v-model="param.fieldName" title="参数值" size="small" />
+                    </div>
+                    <div v-else style="flex-grow: 1">
+                      <ac-select
+                        v-model="param.fieldName"
+                        size="small"
+                        :options="getNodeOptions()"
+                        title="参数值"
+                      />
+                    </div>
+                    <div style="margin-left: 5px;flex-shrink: 0">
+                      <ac-switch
+                        v-model="param.input"
+                        :options="[{key: true, value: ''}, {key: false, value: ''}]"
+                        title="是否手动输入"
+                        size="small"
+                      />
+                    </div>
+                    <div class="icon">
+                      <ac-icon
+                        iconId="018dc9c3efd3a0502886"
+                        title="删除"
+                        color="red"
+                        @click="action.paramList.splice(index, 1)"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="middle-row">
+                  <ac-icon iconId="018dca3b4707c4c43a2f" />
+                  <span style="font-size: 13px" @click="addParam(action)">添加参数</span>
+                  <ac-icon style="margin-left: 15px" iconId="018ece4f72d1bf69178b" />
+                  <span style="font-size: 13px" @click="addAllParam(action)">一键添加</span>
+                </div>
+              </div>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-col>
+    </el-row>
+    <div class="action-add-box">
+      <div class="action-add" @click="addAction">
+        <ac-icon iconId="018dca3b4707c4c43a2f" />
+        <span style="margin-left: 5px;font-size:13px">添加动作</span>
+      </div>
+    </div>
+    <template #footer>
+      <el-button
+        size="default"
+        type="info"
+        @click="dialogVisible=false"
+      >取消</el-button>
+      <el-button
+        type="primary"
+        size="default"
+        @click="submitEventForm"
+      >确定</el-button>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, inject } from 'vue';
+import { useAdminVisualCompStore } from '@/admin/visual/js/visual-comp';
+import { components } from './js/component.config';
+import tool from '@/utils/tool';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import api from '@/http/api';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  type: String,
+  mobileId: String
+});
+const rootNode = inject('rootNode');
+const visualComp = useAdminVisualCompStore();
+const activatedNode = inject('activatedNode');
+const compEventList = ref([]);
+const currEventList = ref([]);
+const compActionList = ref('切换状态,传递参数,刷新组件,调用脚本,操作数据,链接页面,跳转菜单,关闭页面,系统登录');
+
+const dialogVisible = ref(false);
+const currCompEvent = ref({});
+const actionNames = ref([0]);
+const filterName = ref('');
+const filterParamNodeName = ref('');
+const filterStyleNodeName = ref('');
+
+const addEvent = () => {
+  const event = { id: tool.uuids(), actionList: [] };
+  currCompEvent.value = tool.deepClone(event);
+  dialogVisible.value = true;
+};
+
+const editEvent = (event) => {
+  currCompEvent.value = tool.deepClone(event);
+  dialogVisible.value = true;
+};
+
+const deleteEvent = (index) => {
+  ElMessageBox.confirm('请确认是否删除？', '提示', { type: 'warning' }).then(() => {
+    activatedNode.value.compEventList.splice(index, 1);
+    emit('change');
+  }).catch(() => {});
+};
+
+const addAction = () => {
+  currCompEvent.value.actionList.push({
+    condition: false,
+    conditionList: [{}],
+    linkType: '弹窗',
+    showTitle: true,
+    showFooter: true,
+    fullscreen: true,
+    showWidth: '800px',
+    gotoType: '本页跳转',
+    closeType: '当前窗口'
+  });
+  actionNames.value.push(currCompEvent.value.actionList.length - 1);
+};
+
+const upAction = (index) => {
+  if (index <= 0) return;
+  const currAction = currCompEvent.value.actionList[index - 1];
+  currCompEvent.value.actionList[index - 1] = currCompEvent.value.actionList[index];
+  currCompEvent.value.actionList[index] = currAction;
+};
+
+const downAction = (index) => {
+  if (index >= currCompEvent.value.actionList.length) return;
+  const currAction = currCompEvent.value.actionList[index + 1];
+  currCompEvent.value.actionList[index + 1] = currCompEvent.value.actionList[index];
+  currCompEvent.value.actionList[index] = currAction;
+};
+
+const deleteAction = (index) => {
+  ElMessageBox.confirm('请确认是否删除？', '提示', { type: 'warning' }).then(() => {
+    currCompEvent.value.actionList.splice(index, 1);
+  }).catch(() => {});
+};
+
+const changeAction = (action) => {
+  if (action.name === '系统登录') {
+    if (!action.paramList || action.paramList.length === 0) {
+      action.paramList = [];
+      action.paramList.push({ name: 'username' });
+      action.paramList.push({ name: 'password' });
+    }
+  }
+};
+
+const addCondition = (list) => {
+  list.push({});
+};
+
+const deleteCondition = (index, list) => {
+  ElMessageBox.confirm('请确认是否删除？', '提示', { type: 'warning' }).then(() => {
+    list.splice(index, 1);
+  }).catch(() => {});
+};
+
+const moveConditionUp = (index, list) => {
+  const curr = list[index];
+  list[index] = list[index - 1];
+  list[index - 1] = curr;
+};
+
+const moveConditionDown = (index, list) => {
+  const curr = list[index];
+  list[index] = list[index + 1];
+  list[index + 1] = curr;
+};
+
+const submitEventForm = () => {
+  if (!currCompEvent.value.name) {
+    ElMessage.error('事件名称不能为空！');
+    return;
+  }
+  if (!currCompEvent.value.actionList || currCompEvent.value.actionList.length === 0) {
+    ElMessage.error('请先添加动作！');
+    return;
+  }
+  for (const action of currCompEvent.value.actionList) {
+    if (!action.name) {
+      ElMessage.error('动作名称不能为空！');
+      return;
+    }
+  }
+
+  const index = activatedNode.value.compEventList.findIndex(item => item.id === currCompEvent.value.id);
+  if (index >= 0) {
+    activatedNode.value.compEventList[index] = currCompEvent.value;
+  } else {
+    activatedNode.value.compEventList.push(currCompEvent.value);
+  }
+
+  dialogVisible.value = false;
+  emit('change');
+};
+
+const getCompEventList = async(type) => {
+  if (type) {
+    if (!compEventList.value[type]) {
+      const comp = await visualComp.getVisualComp(type);
+      compEventList.value[type] = comp && comp.eventList || [];
+    }
+    return tool.deepClone(compEventList.value[type]);
+  } else {
+    return [];
+  }
+};
+
+const createCompEvent = (data, children) => {
+  (children || []).forEach(item => {
+    if (item.type && item.eventList) data[item.type] = item.eventList;
+    createCompEvent(data, item.children);
+  });
+};
+
+const toggleNodeStyle = (item, nodeId) => {
+  if (!item.styleList) {
+    item.styleList = {};
+  }
+
+  if (item.styleList[nodeId]) {
+    delete item.styleList[nodeId];
+  } else {
+    item.styleList[nodeId] = '--';
+  }
+};
+
+const toggleChangeStyle = (item, node, styleId) => {
+  if (!item.styleList) {
+    item.styleList = {};
+  }
+
+  item.styleList[node.id] = styleId
+};
+
+const toggleForm = (item, nodeId) => {
+  if (!item.formList) {
+    item.formList = [];
+  }
+
+  const index = item.formList.findIndex(id => id === nodeId);
+  if (index >= 0) {
+    item.formList.splice(index, 1);
+  } else {
+    item.formList.push(nodeId);
+  }
+};
+
+const toggleRefresh = (item, nodeId) => {
+  if (!item.refreshList) {
+    item.refreshList = [];
+  }
+
+  const index = item.refreshList.findIndex(id => id === nodeId);
+  if (index >= 0) {
+    item.refreshList.splice(index, 1);
+  } else {
+    item.refreshList.push(nodeId);
+  }
+};
+
+const toggleParam = (item, node) => {
+  if (!item.paramList) {
+    item.paramList = {};
+  }
+
+  if (item.paramList[node.id]) {
+    delete item.paramList[node.id];
+    return;
+  } else {
+    item.paramList[node.id] = [];
+  }
+
+  const paramList = [];
+  node.compData.inputParamList.forEach(param => {
+    const find = item.paramList[node.id].find(it => it.id === param.id);
+    if (find) {
+      paramList.push(find);
+    } else {
+      paramList.push(tool.deepClone(param));
+    }
+  });
+  item.paramList[node.id] = paramList;
+};
+
+const addParam = (item) => {
+  if (!item) return;
+  if (!item.paramList || !Array.isArray(item.paramList)) {
+    item.paramList = [];
+  }
+
+  item.paramList.push({ input: false, name: '', value: '' });
+};
+
+const addAllParam = (item) => {
+  if (!item) return;
+  if (!item.paramList || !Array.isArray(item.paramList)) {
+    item.paramList = [];
+  }
+
+  (getNodeOptions() || []).forEach(option => {
+    item.paramList.push({
+      input: false,
+      name: option.value && option.value.indexOf('.') ? option.value.split('.')[0] : option.value,
+      fieldName: option.key
+    });
+  });
+};
+
+const getStyleNodeList = (filter) => {
+  const list = [];
+  tool.walkTree(rootNode.value, (node) => {
+    if (node.styleList && node.styleList.length > 1 && (!filter || node.name.indexOf(filter) >= 0)) {
+      list.push(node);
+    }
+  });
+  return list;
+};
+
+const getNodeList = (filter) => {
+  const list = [];
+  tool.walkTree(rootNode.value, (node) => {
+    if (node.id && node.builtin !== true && (!filter || node.name.indexOf(filter) >= 0)) {
+      list.push(node);
+    }
+  });
+  return list.sort((a, b) => a.name.localeCompare(b.name));
+};
+
+const getFormList = () => {
+  const list = [];
+  tool.walkTree(rootNode.value, (node) => {
+    if (node.id && node.type === 'form') {
+      list.push(node);
+    }
+  });
+  return list.sort((a, b) => a.name.localeCompare(b.name));
+};
+
+const getNode = (nodeId, tree) => {
+  for (const node of tree.children || []) {
+    if (node.id && node.id === nodeId) {
+      return node;
+    }
+
+    const result = getNode(nodeId, node);
+    if (result) return result;
+  }
+};
+
+const changePage = (action) => {
+  if (!action.linkPageId) {
+    action.paramList = [];
+    return;
+  }
+
+  api.post('/system/pageParam/queryList', { pageId: action.linkPageId }).then(res => {
+    const pageParamList = res.data || [];
+    let paramList = action.paramList || [];
+    pageParamList.forEach(pageParam => {
+      const fieldParam = paramList.find(item => item.pageParamId === pageParam.id);
+      if (fieldParam) {
+        fieldParam.pageParamName = pageParam.name;
+      } else {
+        paramList.push({ pageParamId: pageParam.id, pageParamName: pageParam.name });
+      }
+    });
+
+    paramList = paramList.filter(param => pageParamList.find(item => item.id === param.pageParamId));
+    action.paramList = paramList;
+  });
+};
+
+const getEventOption = () => {
+  const options = getEventData();
+  options.push(...getInputOptions());
+  options.push(...getNodeOptions());
+  return options;
+};
+
+const changeMobilePage = (action, pageId) => {
+  if (!pageId) return;
+  action.paramList = [];
+
+  api.post('/system/mobilePage/queryBy', { id: pageId }).then(res => {
+    if (res && res.data && res.data.jsonText) {
+      const json = JSON.parse(res.data.jsonText);
+      (json?.compData?.inputParamList || []).forEach(param => {
+        action.paramList.push({ fieldName: '', name: param.id, text: param.name });
+      });
+    }
+  });
+};
+
+const getInputOptions = () => {
+  const options = [];
+  (activatedNode.value.compData.inputParamList || []).forEach(param => {
+    options.push({
+      key: 'inputParam.' + param.id,
+      value: '[组件入参].' + param.name
+    });
+  });
+  return options;
+};
+
+const getNodeOptions = () => {
+  const options = [];
+  tool.walkTree(rootNode.value, (node) => {
+    if (node.builtin) return;
+    if (node.currCompStyle && node.currCompStyle.columnList) {
+      options.push({ key: node.id + '.col', value: node.name + '.点击列' });
+      options.push({ key: node.id + '.row.value', value: node.name + '.点击行.值' });
+      node.currCompStyle.columnList.forEach(column => {
+        options.push({
+          key: node.id + '.row.value.' + column.label,
+          value: node.name + '.点击行.' + column.label + '.值'
+        });
+      });
+    } else if (node.type.endsWith('-list') && node.compData && node.compData.fieldList) {
+      options.push({ key: node.id + '.row.value', value: node.name + '.点击项.值' });
+      node.compData.fieldList.forEach(column => {
+        options.push({
+          key: node.id + '.row.value.' + column.name,
+          value: node.name + '.点击项.' + column.name + '.值'
+        });
+      });
+      options.push({ key: node.id + '.value', value: node.name + '.值' });
+    } else {
+      if (!node.type || node.type === 'form-item' || !node.type.startsWith('form-')) return;
+      options.push({ key: node.id + '.value', value: node.name + '.值' });
+    }
+  });
+  return options.sort((a, b) => a.value.localeCompare(b.value));
+};
+
+const getEventData = () => {
+  const result = getFieldDataNames();
+  if (currCompEvent.value.name === '点击条目事件' ||
+      currCompEvent.value.name === '点击坐标轴事件' ||
+      currCompEvent.value.name === '点击数据项事件') {
+    result.push({ key: 'event.data.系列名', value: '[事件数据].系列名' });
+    result.push({ key: 'event.data.系列值', value: '[事件数据].系列值' });
+  }
+  return result;
+};
+
+const getFieldDataNames = () => {
+  if (activatedNode.value.compData && activatedNode.value.compData.fieldList) {
+    const result = [];
+    activatedNode.value.compData.fieldList.forEach(field => {
+      result.push({ key: 'event.data.' + field.name, value: '[事件数据].' + field.name + '.值' });
+    });
+    return result;
+  }
+  return []
+};
+
+const getParamNodeList = (filter) => {
+  const paramNodeList = [];
+  tool.walkTree(rootNode.value, (node) => {
+    if (node.compData &&
+      node.compData.inputParamList &&
+      node.compData.inputParamList.length > 0 &&
+      (!filter || node.name.indexOf(filter) >= 0)) {
+      paramNodeList.push(node);
+    }
+  });
+  return paramNodeList.sort((a, b) => a.name.localeCompare(b.name));
+};
+
+const getFieldType = (nodeId) => {
+  if (!nodeId) return 'input';
+
+  return (getNode(nodeId, rootNode.value) || {}).type || 'input';
+};
+
+const getFieldProp = (nodeId) => {
+  if (!nodeId) return {};
+
+  if (nodeId.indexOf('.') >= 0) {
+    nodeId = nodeId.split('.')[0];
+  }
+  return cleanProp((getNode(nodeId, rootNode.value) || {}).styleList[0].compStyle);
+};
+
+const cleanProp = (data) => {
+  const clone = tool.deepClone(data);
+  const result = {};
+  for (const p in clone) {
+    if (p !== 'name' &&
+      p !== 'fieldName' &&
+      p !== 'fieldType' &&
+      p !== 'default' &&
+      p !== 'description' &&
+      p !== 'show' &&
+      typeof clone[p] !== 'function') {
+      if (p === 'options' && clone[p] === 'formItemOptions') {
+        result[p] = getFormItemOptions();
+      } else {
+        result[p] = clone[p];
+      }
+    }
+  }
+  return result;
+};
+
+const getFormItemOptions = () => {
+  const options = [];
+  tool.walkTree(rootNode.value, node => {
+    if (node.id && node.formItem === '1') {
+      options.push({ key: node.id, value: node.name });
+    }
+  });
+  return options;
+};
+
+const init = () => {
+  if (props.type && props.type === '移动端') {
+    compActionList.value = '切换状态,表单校验,传递参数,刷新组件,调用脚本,操作数据,跳转页面,系统登录,退出登录';
+  } else {
+    compActionList.value = '切换状态,表单校验,传递参数,刷新组件,调用脚本,操作数据,链接页面,跳转菜单,关闭页面';
+  }
+
+  getCompEventList(activatedNode.value.type).then(res => {
+    currEventList.value = res || [];
+  });
+};
+
+watch(() => activatedNode.value.id, () => {
+  init();
+});
+
+onMounted(() => {
+  createCompEvent(compEventList.value, components);
+  init();
+});
+</script>
+
+<style scoped lang="scss">
+.not-support {
+  color: #dcdcdc;
+  padding: 8px;
+  text-align: center;
+  width: 100%;
+}
+.event-box {
+  display: flex;
+  flex-direction: column;
+  margin: 8px;
+  .event-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 8px;
+    margin: 5px;
+    color: #dcdcdc;
+    border: 1px solid rgb(31, 31, 31);
+    border-radius: 5px;
+    .ac-icon {
+      cursor: pointer;
+    }
+  }
+}
+.event-add-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 5px 8px;
+  color: #dcdcdc;
+  height: 30px;
+  .event-add {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+}
+.common-box {
+  flex-grow: 1;
+  overflow: auto;
+  margin: 5px;
+  :deep(.el-collapse-item__wrap) {
+    padding: 2px 0;
+    background: #555555!important;
+  }
+  .common-list {
+    padding-bottom: 5px;
+    margin-bottom: 5px;
+    border-bottom: 1px solid rgb(51, 51, 51);
+    &:nth-last-child(2) {
+      padding-bottom: 0;
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+  }
+  .ac-icon {
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+}
+.common-item {
+  color: white;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 2px 3px;
+  .label {
+    font-size: 13px;
+    width: 80px;
+    color: #dcdcdc;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: right;
+    :deep(.label-name) {
+      width: 90px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: right;
+      display: block;
+    }
+  }
+  .content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  :deep(.el-radio-button) {
+    --el-radio-button-checked-bg-color: #555;
+    --el-radio-button-checked-text-color: #dcdcdc;
+    --el-radio-button-checked-border-color: #333;
+    --el-radio-button-disabled-checked-fill: #333;
+  }
+  :deep(.el-radio-button) .el-radio-button__inner {
+    color: #dcdcdc;
+    background: #555555;
+    border-right: 1px solid #333;
+    border-top: 1px solid #333;
+    border-bottom: 1px solid #333;
+    padding: 5px 6px;
+  }
+  :deep(.el-radio-button:first-child) .el-radio-button__inner {
+    border-left: 1px solid #333;
+  }
+  :deep(.el-radio-button).is-active .el-radio-button__inner {
+    background: #333!important;
+  }
+}
+.content-list {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  .param-item {
+    display: flex;
+    flex-direction: row;
+    .param-field {
+      width: 1px;
+      flex-grow: 1;
+    }
+    .param-split {
+      width: 35px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 16px;
+    }
+    .param-page {
+      width: 90px;
+      flex-shrink: 1;
+    }
+    .param-empty {
+      width: 65px;
+      margin-left: 5px;
+    }
+  }
+  .param-item+.param-item {
+    margin-top: 5px;
+  }
+}
+.collapse-item-header {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
+}
+.comp-box {
+  padding: 5px 10px 5px 30px;
+  color: #dcdcdc;
+  .ac-icon {
+    margin-right: 5px;
+  }
+  .comp-list {
+    display: flex;
+    flex-direction: column;
+    max-height: 350px;
+    overflow: auto;
+    .comp-item {
+      display: flex;
+      flex-direction: row;
+      flex-grow: 1;
+      align-items: center;
+      cursor: pointer;
+      width: fit-content;
+      font-size: 13px;
+      .content-list {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .param-item {
+          display: flex;
+          flex-direction: row;
+          .param-field {
+            flex-grow: 1;
+          }
+          .param-split {
+            width: 35px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 16px;
+          }
+          .param-page {
+            width: 100px;
+          }
+          .param-empty {
+            width: 70px;
+            margin-left: 5px;
+          }
+        }
+        .param-item+.param-item {
+          margin-top: 5px;
+        }
+      }
+    }
+    .comp-item-column {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      cursor: pointer;
+      .comp-item-label {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        font-size: 13px;
+      }
+      .content-list {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        .param-item {
+          display: flex;
+          flex-direction: row;
+          .param-field {
+            width: 115px;
+          }
+          .param-split {
+            width: 35px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 16px;
+          }
+          .param-page {
+            max-width: 80px;
+            flex-grow: 1;
+          }
+          .param-empty {
+            width: 65px;
+            margin-left: 5px;
+          }
+        }
+        .param-item+.param-item {
+          margin-top: 5px;
+        }
+      }
+    }
+    .style-box {
+      margin-left: 20px;
+      .style-list {
+        cursor: pointer;
+        white-space: nowrap;
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+      }
+    }
+  }
+}
+.param-box {
+  padding: 5px 8px 5px 10px;
+  color: #dcdcdc;
+  .ac-icon {
+    margin-right: 5px;
+  }
+  .param-list {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 5px;
+    .param-item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      cursor: pointer;
+      div {
+        flex-shrink: 1;
+      }
+      .icon {
+        margin-left: 8px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .ac-icon {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+.action-add-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 5px 8px;
+  color: #dcdcdc;
+  height: 30px;
+  .action-add {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+}
+.middle-row {
+  height: 30px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  span {
+    cursor: pointer;
+  }
+}
+</style>