perf: 只读模式下，也支持物料拖拽编辑 & 优化小组件拖拽展示

.github/workflows/test.yml

@@ -33,7 +33,7 @@ jobs:
       - name: Install pnpm@6
         run: npm i -g pnpm@6
 
-      - run: pnpm i
+      - run: pnpm i --no-frozen-lockfile
       - run: pnpm run build --if-present
       - run: pnpm test -- --coverage
       - name: Codecov

README.md

@@ -52,6 +52,11 @@ mometa 不是传统主流的低代码平台（如 amis/云凤蝶），mometa 是
 - 同时支持所见即所得的可视编辑，用于提效，提升开发体验
 - 提供物料生态，可自定义物料，提升物料使用体验，提升复用率
 
+mometa 定位更多是 基于程序员本地开发的模式，新增了可视化编码的能力（修改的也是本地的代码文件本身）;\
+它更像是辅助编码工具，而不是 No-Code (amis/云凤蝶) 的平台方案；
+所以不建议在远端服务起一个本地开发环境，所以没有做在线部署。
+目前的实现依赖 webpack dev 开发模式，后续会考虑兼容 vite。
+
 <p align="center">
   <img src="./images/snapshot.png" />
 </p>

lerna.json

@@ -4,6 +4,9 @@
   "extendCommands": ["lerna-command-toc"],
   "command": {
     "publish": {
+      "changelogPreset": {
+        "name": "conventional-changelog-conventionalcommits"
+      },
       "conventionalCommits": true,
       "message": "chore(release): publish"
     },

package.json

@@ -125,6 +125,7 @@
     "change-case": "^4.1.2",
     "commander": "^8.3.0",
     "concurrently": "^6.4.0",
+    "conventional-changelog-conventionalcommits": "^4.6.3",
     "edam-cli": "^3.4.15",
     "human-format": "^0.11.0",
     "husky": "^4.3.8",

packages/editor/src/module/render/components/material-panel/index.tsx

@@ -158,7 +158,7 @@ const MaterialUi = ({ mat }: any) => {
           className={c('__search')}
           placeholder={'输入关键字过滤物料'}
         />
-        {canSelect && <Typography.Text type={'secondary'}>请选择以下物料拖入「页面」中</Typography.Text>}
+        <Typography.Text type={'secondary'}>请选择以下物料拖入「页面」中</Typography.Text>
       </div>
       <div className={c('__mp')}>
         {assetGroups?.map((group, index) => (

packages/editor/src/mometa/runtime/dnd.tsx

@@ -183,12 +183,6 @@ export const DndDropableNode = React.memo(({ dom }: { dom: MometaHTMLElement })
         }
       },
       collect: (monitor) => {
-        if (!canSelect) {
-          return JSON.stringify({
-            isOverCurrent: false,
-            isOver: false
-          })
-        }
         const itemType = monitor.getItemType()
         const item = monitor.getItem() as any
 

packages/editor/src/mometa/runtime/floating-ui.tsx

@@ -277,6 +277,7 @@ export const OveringFloat = React.forwardRef<HTMLDivElement, OveringFloatProps>(
   `
 
   const widthGte = true //rect.width >= rect.height
+  const widthSm = rect.width <= 120
 
   const flagElem = (
     <div ref={preview} className={c(commonCss)} title={data.text}>
@@ -393,7 +394,7 @@ export const OveringFloat = React.forwardRef<HTMLDivElement, OveringFloatProps>(
               `
             )}
           >
-            放置在上
+            {widthSm ? '' : '放置在上'}
           </div>
           {!data.selfClosed && (
             <div
@@ -414,7 +415,7 @@ export const OveringFloat = React.forwardRef<HTMLDivElement, OveringFloatProps>(
                     `
               )}
             >
-              放置在这
+              {widthSm ? '' : '放置在这'}
             </div>
           )}
           <div
@@ -427,7 +428,7 @@ export const OveringFloat = React.forwardRef<HTMLDivElement, OveringFloatProps>(
               `
             )}
           >
-            放置在下
+            {widthSm ? '' : '放置在下'}
           </div>
         </>
       )}