fix: 修复单独引入less导致的用户侧启动服务报错的问题

didi · Aug 22, 2024 · 62e5956 · 62e5956
1 parent 12c2c0c
commit 62e5956
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 75 deletions.
diff --git a/packages/extension/rollup.config.js b/packages/extension/rollup.config.js
@@ -1,6 +1,6 @@
 import postcss from 'rollup-plugin-postcss'
-import postcssImport from 'postcss-import'
 import postcssUrl from 'postcss-url'
+import postcssImport from 'postcss-import'
 import { rollupConfig } from '../../rollup.config'
 
 export default rollupConfig({

diff --git a/packages/extension/src/style/index.less b/packages/extension/src/style/index.less
@@ -1,3 +1,75 @@
+@import url('medium-editor/dist/css/medium-editor.min.css');
+@import url('medium-editor/dist/css/themes/beagle.min.css');
+@import url('vanilla-picker/dist/vanilla-picker.csp.css');
+
+/* label */
+.lf-label-overlay {
+  width: 0;
+  height: 0;
+  overflow: visible;
+
+  .lf-label-editor {
+    //box-sizing: content-box;
+    padding: 4px;
+    background: #fff;
+    border-radius: 5px;
+
+    &-container {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: visible;
+      text-align: center;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    &-dragging {
+      cursor: move;
+    }
+
+    &-editing {
+      border: 2px solid #275dc5;
+      outline: none;
+      cursor: text;
+    }
+
+    &-hover {
+      border: 2px dashed #acacac;
+    }
+
+    // textOverflowMode
+    &-clip {
+      width: 100px; /* 根据需要调整宽度 */
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: clip;
+    }
+
+    &-ellipsis {
+      width: 100px; /* 根据需要调整宽度 */
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &-wrap {
+      width: 100px; /* 根据需要调整宽度 */
+      white-space: normal;
+      overflow-wrap: break-word; /* 允许单词内换行 */
+    }
+
+    &-nowrap {
+      width: 100px; /* 根据需要调整宽度 */
+      overflow: visible;
+      white-space: nowrap;
+    }
+  }
+}
+
 .lf-control {
   position: absolute;
   top: 0;

diff --git a/packages/extension/src/style/raw.ts b/packages/extension/src/style/raw.ts
@@ -4,7 +4,70 @@
  * Auto generated file, do not modify it!
  */
 
-export const content = `.lf-control {
+export const content = `@import url('medium-editor/dist/css/medium-editor.min.css');
+@import url('medium-editor/dist/css/themes/beagle.min.css');
+@import url('vanilla-picker/dist/vanilla-picker.csp.css');
+/* label */
+.lf-label-overlay {
+  width: 0;
+  height: 0;
+  overflow: visible;
+}
+.lf-label-overlay .lf-label-editor {
+  padding: 4px;
+  background: #fff;
+  border-radius: 5px;
+}
+.lf-label-overlay .lf-label-editor-container {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  text-align: center;
+}
+.lf-label-overlay .lf-label-editor-container p {
+  margin: 0;
+}
+.lf-label-overlay .lf-label-editor-dragging {
+  cursor: move;
+}
+.lf-label-overlay .lf-label-editor-editing {
+  border: 2px solid #275dc5;
+  outline: none;
+  cursor: text;
+}
+.lf-label-overlay .lf-label-editor-hover {
+  border: 2px dashed #acacac;
+}
+.lf-label-overlay .lf-label-editor-clip {
+  width: 100px;
+  /* 根据需要调整宽度 */
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: clip;
+}
+.lf-label-overlay .lf-label-editor-ellipsis {
+  width: 100px;
+  /* 根据需要调整宽度 */
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.lf-label-overlay .lf-label-editor-wrap {
+  width: 100px;
+  /* 根据需要调整宽度 */
+  white-space: normal;
+  overflow-wrap: break-word;
+  /* 允许单词内换行 */
+}
+.lf-label-overlay .lf-label-editor-nowrap {
+  width: 100px;
+  /* 根据需要调整宽度 */
+  overflow: visible;
+  white-space: nowrap;
+}
+.lf-control {
   position: absolute;
   top: 0;
   right: 10px;

diff --git a/packages/extension/src/tools/label/index.ts b/packages/extension/src/tools/label/index.ts
@@ -6,7 +6,6 @@ import {
   calcPointAfterResize,
   rotatePointAroundCenter,
 } from './utils'
-import './style.less'
 
 import Position = LogicFlow.Position
 import NodeData = LogicFlow.NodeData

diff --git a/packages/extension/src/tools/label/style.less b/packages/extension/src/tools/label/style.less
diff --git a/rollup.config.js b/rollup.config.js
@@ -94,7 +94,7 @@ export function rollupConfig(config = {}) {
       nodePolyfills(),
       terser({
         sourceMap: true,
-        drop_console: true,
+        // drop_console: true,
       }),
       fileSize({
         reporter: [