Merge remote-tracking branch 'upstream/refactor/develop' into refacto…

…r/style2
opentiny · Oct 29, 2024 · 284392f · 284392f
2 parents dc64b40 + 48687e8
commit 284392f
Show file tree

Hide file tree

Showing 340 changed files with 3,961 additions and 2,630 deletions.
diff --git a/designer-demo/package.json b/designer-demo/package.json
@@ -1,7 +1,7 @@
 {
   "name": "designer-demo",
   "private": true,
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.5",
   "type": "module",
   "scripts": {
     "dev": "cross-env VITE_THEME=light vite",

diff --git a/designer-demo/registry.js b/designer-demo/registry.js
@@ -41,16 +41,15 @@ import {
   Styles,
   Layout,
   Canvas,
-  EditorInfoService,
-  AppService,
-  GenerateCodeService
+  GenerateCodeService,
+  GlobalService
 } from '@opentiny/tiny-engine'
 import engineConfig from './engine.config'
 
 export default {
   root: {
     id: 'engine.root',
-    metas: [EditorInfoService, AppService, GenerateCodeService]
+    metas: [GenerateCodeService, GlobalService]
   },
   config: engineConfig,
   layout: {

diff --git a/designer-demo/src/main.js b/designer-demo/src/main.js
@@ -17,4 +17,8 @@ import { configurators } from './configurators/'
 import 'virtual:svg-icons-register'
 import '@opentiny/tiny-engine-theme'
 
-init({ registry, configurators })
+init({
+  registry,
+  configurators,
+  createAppSignal: ['global_service_init_finish']
+})
diff --git a/mockServer/package.json b/mockServer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-mock",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.5",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/blockToWebComponentTemplate/package.json b/packages/blockToWebComponentTemplate/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-block-build",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.5",
   "description": "translate block to webcomponent template",
   "main": "./dist/web-components.es.js",
   "type": "module",

diff --git a/packages/build/vite-config/package.json b/packages/build/vite-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-vite-config",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.5",
   "description": "",
   "type": "module",
   "main": "./index.js",

diff --git a/packages/build/vite-plugin-meta-comments/package.json b/packages/build/vite-plugin-meta-comments/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-vite-plugin-meta-comments",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.5",
   "description": "",
   "type": "module",
   "main": "dist/index.cjs",

diff --git a/packages/builtinComponent/package.json b/packages/builtinComponent/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-builtin-component",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.5",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",

diff --git a/packages/canvas/package.json b/packages/canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-canvas",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.5",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/common/component/BindI18n.vue b/packages/common/component/BindI18n.vue
@@ -169,11 +169,10 @@ export default {
 
 <style lang="less" scoped>
 .languageContent {
-  width: 254px;
-  border-radius: 5px;
   text-align: center;
   z-index: 99;
   margin-top: 5px;
+  margin-bottom: 16px;
 
   .tiny-svg {
     margin-right: 10px;
@@ -184,7 +183,6 @@ export default {
     }
   }
   .tiny-button {
-    margin-top: 10px;
     max-width: initial;
     padding: 0 12px;
     background-color: var(--ti-lowcode-tabs-border-color);
@@ -196,18 +194,24 @@ export default {
     }
   }
   .addNewLanguage {
-    padding: 0px 5px 5px;
     .tiny-input {
       display: flex;
       margin-bottom: 10px;
+      padding: 0 8px;
       align-items: center;
       label {
-        width: 80px;
+        text-wrap: nowrap;
+        text-align: left;
+        width: 50px;
       }
       display: flex;
     }
+    .tiny-input__inner {
+      flex: 1;
+    }
     .add-btns {
       text-align: right;
+      padding: 0 8px;
     }
   }
 }

diff --git a/packages/common/component/BlockDescription.vue b/packages/common/component/BlockDescription.vue
@@ -1,7 +1,10 @@
 <template>
-  <meta-description class="description" type="warning">
+  <meta-description class="description">
     <template #content>
-      <div @click="openBlockSetting" class="setting-block"><span class="add-icon">+</span>设置区块暴露属性</div>
+      <div class="setting-block" @click="openBlockSetting">
+        <svg-icon name="block-add-prop"></svg-icon>
+        <span>设置区块暴露属性</span>
+      </div>
     </template>
   </meta-description>
 </template>
@@ -33,17 +36,28 @@ export default {
 
 <style lang="less" scoped>
 .description {
-  border-color: var(--ti-lowcode-description-color);
+  font-size: 12px;
+
+  &.wrapper {
+    height: 32px;
+    padding: 0 12px;
+    border-left: 0;
+    box-shadow: none;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    background-color: var(--te-common-bg-container);
+  }
 
   .setting-block {
+    display: flex;
+    align-items: center;
+    gap: 4px;
     cursor: pointer;
   }
-  .add-icon {
-    padding: 0 3px;
-    margin: 0 5px;
-    color: var(--ti-lowcode-toolbar-icon-color);
-    border-radius: 50%;
-    background-color: var(--ti-lowcode-description-color);
+
+  .svg-icon {
+    font-size: 16px;
   }
 }
 </style>
diff --git a/packages/common/component/BlockHistoryList.vue b/packages/common/component/BlockHistoryList.vue
@@ -91,7 +91,6 @@ defineEmits(['preview', 'restore'])
 }
 
 .empty {
-  margin-left: 12px;
   color: var(--ti-lowcode-common-empty-text-color);
 }
 </style>
diff --git a/packages/common/component/BlockLinkField.vue b/packages/common/component/BlockLinkField.vue
@@ -1,14 +1,27 @@
 <template>
-  <tiny-popover class="block-link-field" popper-class="option-popper block-new-attr-popover">
+  <tiny-popover class="block-link-field" popper-class="option-popper block-new-attr-popover" :visible-arrow="false">
     <template #reference>
-      <span class="link-icon">+</span>
+      <div>
+        <span class="icon-wrap bind-prop">
+          <svg-icon name="block-bind-prop"></svg-icon>
+        </span>
+        <span class="icon-wrap add-prop">
+          <svg-icon name="block-add-prop"></svg-icon>
+        </span>
+      </div>
     </template>
     <ul class="context-menu">
       <li v-if="isLinked" class="menu-item" @click="unLink(data)">取消关联</li>
-      <li v-else class="menu-item" @click="addProperty(data)">+ 新建属性</li>
-      <li class="menu-item" @click="openBlockSetting">管理属性</li>
-      <li v-for="item in properties" :key="item.property" class="menu-item">
-        {{ item.property }}
+      <li v-else class="menu-item" @click="addProperty(data)">
+        <svg-icon name="plus-circle"></svg-icon>
+        <span>创建并链接新属性</span>
+      </li>
+      <li class="menu-item" @click="openBlockSetting">
+        <svg-icon name="setting"></svg-icon>
+        <span>打开属性面板</span>
+      </li>
+      <li v-for="item in properties" :key="item.property" class="menu-item property">
+        <span>{{ item.property }}</span>
         <span v-if="item.property !== data?.linked?.blockProperty" class="link-item" @click="editProperty(item)">
           关联
         </span>
@@ -51,14 +64,12 @@ export default {
       state.newPropertyName = ''
 
       confirm({
-        title: '新建区块属性',
+        title: '属性名称',
         status: 'custom',
         message: {
           render() {
             return (
               <div>
-                <div>此新字段将自动链接到此属性</div>
-                <br />
                 <TinyInput placeholder="请输入字段名称" v-model={state.newPropertyName}></TinyInput>
               </div>
             )
@@ -141,49 +152,68 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.link-icon {
-  width: 16px;
-  height: 16px;
-  margin: 0 5px;
-  border-radius: 50%;
-  line-height: 16px;
-  text-align: center;
-  color: var(--ti-lowcode-block-link-field-link-icon-color);
-  background-color: var(--ti-lowcode-block-link-field-link-icon-bg-color);
-  cursor: pointer;
-  &:hover {
-    transform: scale(1.2);
+.icon-wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+
+  .svg-icon {
+    font-size: 14px;
+  }
+
+  &:hover .svg-icon {
+    transform: scale(1.25);
+  }
+
+  &.bind-prop {
+    z-index: 30;
+    &:hover {
+      z-index: 10;
+    }
+  }
+
+  &.add-prop {
+    z-index: 20;
+    &:hover {
+      z-index: 30;
+    }
   }
 }
 
 .context-menu {
   width: 200px;
-  padding: 3px 0;
+  padding: 8px 0;
   border-radius: 3px;
   display: flex;
   flex-direction: column;
   .menu-item {
+    line-height: 18px;
     color: var(--ti-lowcode-attr-popover-menu-item-color);
     display: flex;
-    justify-content: space-between;
-    padding: 6px 15px;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 12px;
     cursor: pointer;
     &:hover {
       background: var(--ti-lowcode-attr-popover-menu-item-hover-bg-color);
     }
-
+    &.property {
+      justify-content: space-between;
+    }
     .link-item {
       cursor: pointer;
-      background-color: var(--ti-lowcode-attr-popover-menu-item-link-item-bg-color);
-      color: var(--ti-lowcode-attr-popover-menu-item-link-item-color);
-      padding: 2px 6px;
-      border-radius: 2px;
+      color: var(--te-common-text-emphasize);
     }
   }
+
+  .svg-icon {
+    font-size: 16px;
+  }
 }
 </style>
 <style lang="less">
-.tiny-popover.tiny-popper.block-new-attr-popover {
+.tiny-popover.tiny-popper.tiny-popper.block-new-attr-popover[x-placement] {
   // 这里不知为啥要添加 max-height，后续确认无用可删除
   max-height: 65vh;
   padding: 0;

diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
@@ -533,15 +533,13 @@ export default {
     line-height: 18px;
   }
 
-  .linked {
-    background-color: var(--ti-lowcode-meta-config-item-link-color);
-  }
-
   .item-input {
     display: flex;
     justify-content: space-between;
     align-items: center;
     overflow: hidden;
+    position: relative;
+    overflow: visible;
     &:has(.verify-failed) {
       align-items: flex-start;
     }

diff --git a/packages/common/component/LifeCycles.vue b/packages/common/component/LifeCycles.vue
@@ -243,8 +243,6 @@ export default {
 <style lang="less" scoped>
 .life-cycle {
   display: flex; // 决定了鼠标移入后的弹窗位置
-  padding: 0 12px;
-  margin-top: 10px;
   svg {
     outline: none;
   }
@@ -263,27 +261,22 @@ export default {
 }
 .life-cycle-tips {
   color: var(--ti-lowcode-life-cycle-alert-color);
-  margin: 4px 0 12px 20px;
+  margin: 4px 0 12px 0;
   height: 16px;
   line-height: 16px;
 }
-.popover-list {
-  ul li:first-child {
-    margin-top: 8px;
-  }
-  ul li:last-child {
-    margin-bottom: 8px;
-  }
-}
 .life-cycle-alert {
   color: var(--ti-lowcode-life-cycle-alert-color);
   margin-left: 20px;
   margin-right: 20px;
 }
 
 .popover-list {
+  margin: 8px 0;
   li {
-    padding: 8px 30px 8px 16px;
+    padding: 0 12px;
+    margin: 0 -8px;
+    line-height: 24px;
     cursor: pointer;
     &:hover {
       background: var(--ti-lowcode-life-cycle-item-hover-bg);