feat: page management and block ui redesign (#740)

* fix: panel组件间距调整 * feat: page management ui redesign * feat: block ui redesign * fix: 去掉选择区块高亮 * feat: 数据源样式调整 * feat: 数据源交互调整 * feat: 帮助样式整改 * feat: AI功能样式调整 * feat: 资源管理、状态管理样式整改 * feat: 国际化样式调整 * feat: 头部、按钮、图标细节调整 * feat: 样式细节调整 * feat: 样式细节调整 * fix:面包屑区分区块和页面 * fix:调整帮助面板间距颜色 * fix: 页面管理间距调整 * fix: 历史备份样式调整 * fix：数据源/状态管理下拉调整 * fix: 全屏图标位置调整 * fix：去掉工具栏左侧面包屑边框 * fix: fix review * fix: fix pageInputOutput review * fix: fix review * fix: codeEditor添加插槽
opentiny · Sep 23, 2024 · 49fc8bc · 49fc8bc
1 parent 80a36d6
commit 49fc8bc
Show file tree

Hide file tree

Showing 82 changed files with 1,734 additions and 1,267 deletions.
diff --git a/packages/common/component/BlockHistoryList.vue b/packages/common/component/BlockHistoryList.vue
@@ -12,9 +12,7 @@
       </span>
     </li>
   </ul>
-  <empty-tip v-if="!history.length">
-    <template #content>记录为空</template>
-  </empty-tip>
+  <div v-if="!history.length" class="empty">暂无数据</div>
 </template>
 
 <script setup>
@@ -23,7 +21,6 @@ import { SvgButton } from '../index'
 
 // 引入组件在template上使用
 import BlockHistoryTemplate from './BlockHistoryTemplate.vue'
-import EmptyTip from './EmptyTip.vue'
 
 defineProps({
   history: {
@@ -92,4 +89,9 @@ defineEmits(['preview', 'restore'])
     }
   }
 }
+
+.empty {
+  margin-left: 12px;
+  color: var(--ti-lowcode-common-empty-text-color);
+}
 </style>
diff --git a/packages/common/component/LifeCycles.vue b/packages/common/component/LifeCycles.vue
@@ -1,12 +1,8 @@
 <template>
-  <tiny-alert type="info" :description="lifeCycleTips" :closable="false" class="life-cycle-alert"></tiny-alert>
   <div class="life-cycle">
     <tiny-popover v-model="state.showPopover" placement="bottom-end" trigger="hover" popperClass="option-popper">
       <template #reference>
-        <div class="add-life-cycle-wrap">
-          <svg-icon name="plus-circle"></svg-icon>
-          <p class="desc">添加页面生命周期</p>
-        </div>
+        <tiny-button class="life-cycle-btn"><icon-plus class="icon-plus"></icon-plus>添加页面生命周期 </tiny-button>
       </template>
       <div class="popover-list">
         <ul>
@@ -22,6 +18,7 @@
       </div>
     </tiny-popover>
   </div>
+  <div class="life-cycle-tips">{{ lifeCycleTips }}</div>
   <meta-list-items :optionsList="Object.keys(state.bindLifeCycles)" :draggable="false">
     <template #content="{ data }">
       <div>
@@ -71,11 +68,11 @@
 
 <script lang="jsx">
 import { reactive, ref, watchEffect, onBeforeUnmount } from 'vue'
-import { Button, DialogBox, Popover, Search, Alert } from '@opentiny/vue'
+import { Button, DialogBox, Popover, Search } from '@opentiny/vue'
 import { useModal, usePage, useNotify, useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import MetaListItems from './MetaListItems.vue'
-import { iconYes } from '@opentiny/vue-icon'
+import { iconYes, iconPlus } from '@opentiny/vue-icon'
 import VueMonaco from './VueMonaco.vue'
 import { initCompletion } from '../js/completion'
 import { initLinter, lint } from '../js/linter'
@@ -89,9 +86,9 @@ export default {
     TinyButton: Button,
     MonacoEditor: VueMonaco,
     SvgButton,
-    TinyAlert: Alert,
     MetaListItems,
-    IconYes: iconYes()
+    IconYes: iconYes(),
+    IconPlus: iconPlus()
   },
 
   props: {
@@ -246,11 +243,29 @@ export default {
 <style lang="less" scoped>
 .life-cycle {
   display: flex; // 决定了鼠标移入后的弹窗位置
-  padding: 10px;
-  margin-top: -10px;
+  padding: 0 12px;
+  margin-top: 10px;
   svg {
     outline: none;
   }
+  .life-cycle-btn {
+    color: var(--ti-lowcode-meta-codeEditor-color);
+    border-color: var(--ti-lowcode-meta-codeEditor-border-color);
+    &:hover {
+      color: var(--ti-lowcode-meta-codeEditor-hover-color);
+      border-color: var(--ti-lowcode-meta-codeEditor-border-hover-color);
+    }
+    .icon-plus {
+      margin-right: 6px;
+      stroke: var(--ti-lowcode-meta-codeEditor-icon-color);
+    }
+  }
+}
+.life-cycle-tips {
+  color: var(--ti-lowcode-life-cycle-alert-color);
+  margin: 4px 0 12px 20px;
+  height: 16px;
+  line-height: 16px;
 }
 .popover-list {
   ul li:first-child {
@@ -265,16 +280,6 @@ export default {
   margin-left: 20px;
   margin-right: 20px;
 }
-.add-life-cycle-wrap {
-  display: flex;
-  font-size: 16px;
-  margin-left: 10px;
-  align-items: center;
-  .desc {
-    margin: 0;
-    margin-left: 8px;
-  }
-}
 
 .popover-list {
   li {

diff --git a/packages/common/component/LinkButton.vue b/packages/common/component/LinkButton.vue
@@ -30,7 +30,6 @@ export default {
 <style lang="less" scoped>
 .help-box {
   width: 24px;
-  height: 42px;
 
   #help-icon {
     :deep(.svg-icon.icon-plugin-icon-plugin-help) {

diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
@@ -3,9 +3,10 @@
     <slot :open="open">
       <div v-if="buttonShowContent" :class="['full-width', { 'empty-color': value === '' }]" @click="open">
         <span class="text-content text-ellipsis-multiple">{{ value === '' ? buttonLabel : value }}</span>
-        <svg-icon class="edit-icon" name="edit"></svg-icon>
+        <svg-icon class="edit-icon" name="to-edit"></svg-icon>
       </div>
       <tiny-button v-else class="edit-btn" @click="open">
+        <slot name="icon"></slot>
         {{ buttonLabel }}
       </tiny-button>
     </slot>
@@ -256,7 +257,8 @@ export default {
   .edit-btn {
     color: var(--ti-lowcode-meta-codeEditor-color);
     border-color: var(--ti-lowcode-meta-codeEditor-border-color);
-
+    display: flex;
+    align-items: center;
     &:hover {
       color: var(--ti-lowcode-meta-codeEditor-hover-color);
       border-color: var(--ti-lowcode-meta-codeEditor-border-hover-color);

diff --git a/packages/common/component/MonacoEditor.vue b/packages/common/component/MonacoEditor.vue
@@ -4,7 +4,7 @@
       <div class="toolbar-start">
         <slot name="toolbarStart"></slot>
       </div>
-      <div class="buttons">
+      <div :class="['buttons', { fullscreen: fullscreen }]">
         <slot name="buttons"></slot>
         <tiny-tooltip v-if="showFormatBtn && options.language === 'json'" content="格式化" placement="top">
           <public-icon name="json" @click="formatCode"></public-icon>
@@ -158,6 +158,9 @@ export default {
       color: var(--ti-lowcode-component-svg-button-hover-color);
     }
   }
+  .fullscreen {
+    margin-right: 20px;
+  }
 }
 
 .editor {

diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue
@@ -8,26 +8,22 @@
       v-for="(item, index) in state.data"
       :key="item.blockName"
       :draggable="!isBlockManage && showSettingIcon"
-      :class="[
-        'block-item',
-        { 'is-active': state.activeIndex === index },
-        { 'is-disabled': showBlockDetail },
-        { 'block-item-small-list': blockStyle === 'mini' }
-      ]"
+      :class="['block-item', { 'is-disabled': showBlockDetail }, { 'block-item-small-list': blockStyle === 'mini' }]"
       :title="getTitle(item)"
-      @mousedown.stop.left="blockClick({ event: $event, item, index })"
       @mouseover.stop="openBlockShotPanel(item, $event)"
       @mouseleave="handleBlockItemLeave"
     >
       <slot :data="item">
-        <img
-          v-if="item.screenshot"
-          class="item-image"
-          :src="item.screenshot || defaultImg"
-          draggable="false"
-          @error="$event.target.src = defaultImg"
-        />
-        <svg-icon v-else class="item-image item-default-img" name="block-default-img"></svg-icon>
+        <div class="block-item-img">
+          <img
+            v-if="item.screenshot"
+            class="item-image"
+            :src="item.screenshot || defaultImg"
+            draggable="false"
+            @error="$event.target.src = defaultImg"
+          />
+          <svg-icon v-else class="item-image item-default-img" name="block-default-img"></svg-icon>
+        </div>
         <div class="item-text">
           <div class="item-name">{{ item.name_cn || item.label || item.content?.fileName }}</div>
           <div v-if="blockStyle === 'list'" class="item-description">{{ item.description }}</div>
@@ -45,13 +41,43 @@
         <div v-if="isBlockManage && !item.is_published" class="publish-flag">未发布</div>
 
         <div v-if="isBlockManage" class="block-detail">
-          <tiny-tooltip effect="dark" :content="defaultIconTip" placement="top">
-            <icon-setting
-              class="block-detail-icon"
-              @mouseover.stop="iconSettingMove"
-              @mousedown.stop.prevent="iconClick({ event: $event, item, index })"
-            ></icon-setting>
-          </tiny-tooltip>
+          <tiny-popover
+            placement="bottom-end"
+            width="120"
+            append-to-body
+            trigger="manual"
+            :modelValue="state.hoverItemId === item.id && state.currentShowMenuId === item.id"
+            :visible-arrow="false"
+            popper-class="popper-options block-setting-popover"
+          >
+            <template #reference>
+              <svg-button
+                name="ellipsis"
+                class="block-detail-icon"
+                @click="handleShowVersionMenu(item)"
+                @mouseover.stop="iconSettingMove"
+                @mousedown.stop.prevent=""
+              ></svg-button>
+            </template>
+
+            <template #default>
+              <div class="setting-menu" @mouseover.stop="handleSettingMouseOver" @mouseleave="handleBlockItemLeave">
+                <ul class="list">
+                  <li
+                    class="list-item"
+                    @mouseover.stop="iconSettingMove"
+                    @mousedown.stop.prevent="iconClick({ event: $event, item, index })"
+                  >
+                    <svg-button class="list-item-svg" name="text-source-setting"> </svg-button>
+                    <span>设置</span>
+                  </li>
+                  <li class="list-item" @mousedown.stop.left="blockClick({ event: $event, item, index })">
+                    <svg-button class="list-item-svg" name="to-edit"> </svg-button><span>编辑</span>
+                  </li>
+                </ul>
+              </div>
+            </template>
+          </tiny-popover>
         </div>
         <div
           v-else-if="showSettingIcon"
@@ -128,8 +154,8 @@
 
 <script>
 import { computed, watch, inject, reactive } from 'vue'
-import { iconSetting, iconPlus } from '@opentiny/vue-icon'
-import { Tooltip, Progress, Popover } from '@opentiny/vue'
+import { iconPlus } from '@opentiny/vue-icon'
+import { Progress, Popover } from '@opentiny/vue'
 import SearchEmpty from './SearchEmpty.vue'
 import SvgButton from './SvgButton.vue'
 
@@ -139,8 +165,6 @@ const defaultImg =
 export default {
   components: {
     TinyProgress: Progress,
-    TinyTooltip: Tooltip,
-    IconSetting: iconSetting(),
     IconPlus: iconPlus(),
     TinyPopover: Popover,
     SvgButton,
@@ -385,6 +409,7 @@ export default {
   overflow-y: auto;
   overflow-x: hidden;
   color: var(--ti-lowcode-common-secondary-text-color);
+  margin: 12px 0 0 12px;
 
   &.is-small-list {
     grid-template-columns: 100%;
@@ -395,14 +420,17 @@ export default {
     flex-direction: column;
     align-items: center;
     position: relative;
-    height: 96px;
-    padding: 10px;
-    border-right: 1px solid var(--ti-lowcode-component-block-list-border-color);
-    border-bottom: 1px solid var(--ti-lowcode-component-block-list-border-color);
+    height: 105px;
     text-align: center;
     user-select: none;
-    &:nth-child(-n + 2) {
-      border-top: 1px solid var(--ti-lowcode-component-block-list-border-color);
+    margin-right: 12px;
+    margin-bottom: 12px;
+    .block-item-img {
+      line-height: 82px;
+      width: 106px;
+      height: 82px;
+      border-radius: 4px;
+      background-color: var(--ti-lowcode-component-block-list-item-active-bg);
     }
     &.block-item-small-list:nth-child(2) {
       border-top: none;
@@ -436,6 +464,7 @@ export default {
         text-align: left;
         margin-top: 0;
         margin-left: 4px;
+        color: var(--ti-lowcode-base-text-color-4);
       }
       .publish-flag {
         position: static;
@@ -487,7 +516,6 @@ export default {
     }
 
     &:not(.is-disabled):hover {
-      background-color: var(--ti-lowcode-component-block-list-item-active-bg);
       cursor: pointer;
 
       .block-detail,
@@ -548,14 +576,14 @@ export default {
       visibility: hidden;
       position: absolute;
       top: 4px;
-      right: 4px;
+      right: 8px;
       z-index: 9;
       &.is-current-visible-icon {
         visibility: visible;
       }
 
       .block-detail-icon {
-        color: var(--ti-lowcode-component-block-list-setting-btn-color);
+        color: var(--ti-lowcode-base-gray-50);
         &:hover {
           cursor: pointer;
           color: var(--ti-lowcode-component-block-list-setting-btn-hover-color);
@@ -721,6 +749,9 @@ export default {
     .list-item-icon {
       font-size: 14px;
     }
+    .list-item-svg:hover {
+      background-color: var(--ti-lowcode-component-block-setting-item-hover-bg);
+    }
   }
 }
 </style>