Merge remote-tracking branch 'amis-editor-core/theme/editor-20230201' into editor-style

packages/amis-editor-core/package.json

@@ -114,6 +114,7 @@
     "amis-core": "*",
     "amis-formula": "*",
     "amis-ui": "*",
+    "amis-theme-editor-helper": "*",
     "i18n-runtime": "*",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"

packages/amis-editor-core/scss/editor.scss

@@ -48,7 +48,7 @@
 @import './style-control/background';
 @import './style-control/size';
 @import './style-control/style-common';
-@import './style-control/theme_classname';
+@import './style-control/theme-css-code';
 
 @keyframes growing {
   0% {

packages/amis-editor-core/scss/style-control/_theme-css-code.scss

@@ -0,0 +1,85 @@
+.ThemeCssCode {
+  position: relative;
+  &-button {
+    width: 100%;
+  }
+  .is-group {
+    overflow: auto;
+  }
+}
+.icon-theme-css {
+  margin-right: 10px;
+}
+.ThemeCssCode-editor {
+  height: auto;
+  width: px2rem(460px);
+  padding: px2rem(16px);
+  position: relative;
+  &-title {
+    font-size: 14px;
+    margin-bottom: px2rem(16px);
+  }
+  &-close {
+    position: absolute;
+    top: px2rem(14px);
+    right: px2rem(16px);
+    button {
+      height: px2rem(16px);
+      padding: 0;
+      margin: 0;
+    }
+  }
+  &-content {
+    height: px2rem(500px);
+    width: 100%;
+    &-header {
+      display: flex;
+      margin-bottom: px2rem(10px);
+      border-bottom: 1px solid #e8e9eb;
+
+      &-title {
+        margin-right: px2rem(30px);
+        cursor: pointer;
+        padding-bottom: px2rem(10px);
+      }
+      &-title--active {
+        color: #2468f2;
+        border-bottom: 2px solid #2468f2;
+      }
+    }
+    &-main {
+      overflow: auto;
+      height: px2rem(460px);
+    }
+    &-body--hidden {
+      display: none;
+    }
+    &-body {
+      margin-bottom: px2rem(10px);
+      &-title {
+        margin-bottom: px2rem(10px);
+        margin-left: px2rem(16px);
+        font-size: 12px;
+      }
+      &-editor {
+        height: 200px;
+        margin-bottom: px2rem(10px);
+        border-bottom: 1px solid #e8e9eb;
+      }
+    }
+  }
+}
+.editorPanel-inner {
+  .Theme-FontEditor {
+    .Theme-Wrapper-header-left {
+      font-weight: 400;
+      color: #5c5f66;
+    }
+  }
+  .Theme-ShadowEditor {
+    .Theme-Wrapper-header-left {
+      font-weight: 400;
+      color: #5c5f66;
+    }
+  }
+}

packages/amis-editor-core/scss/style-control/_theme_classname.scss

@@ -1,48 +0,0 @@
-.ThemeClassName {
-  position: relative;
-  &-button {
-    position: absolute;
-    left: px2rem(-38px);
-  }
-  .is-group {
-    overflow: auto;
-  }
-}
-.ThemeClassName-editor {
-  height: auto;
-  width: px2rem(400px);
-  padding: px2rem(16px);
-  position: relative;
-  &-title {
-    font-size: 14px;
-    margin-bottom: px2rem(16px);
-  }
-  &-close {
-    position: absolute;
-    top: px2rem(14px);
-    right: px2rem(16px);
-    button {
-      height: px2rem(16px);
-      padding: 0;
-      margin: 0;
-    }
-  }
-  &-content {
-    height: px2rem(500px);
-    width: 100%;
-  }
-}
-.editorPanel-inner {
-  .Theme-FontEditor {
-    .Theme-Wrapper-header-left {
-      font-weight: 400;
-      color: #5c5f66;
-    }
-  }
-  .Theme-ShadowEditor {
-    .Theme-Wrapper-header-left {
-      font-weight: 400;
-      color: #5c5f66;
-    }
-  }
-}

packages/amis-editor-core/src/store/editor.ts

@@ -18,6 +18,7 @@ import {
   needDefaultWidth,
   guid,
   addStyleClassName,
+  setThemeDefaultData,
   appTranslate
 } from '../../src/util';
 import {
@@ -528,7 +529,8 @@ export const MainStore = types
 
       getValueOf(id: string) {
         const schema = JSONGetById(self.schema, id);
-        const res = JSONPipeOut(schema, false);
+        const data = JSONPipeOut(schema, false);
+        const res = setThemeDefaultData(data);
         return res;
       },
 
@@ -546,7 +548,8 @@ export const MainStore = types
                 key !== '$$commonSchema') ||
               typeof props === 'function' || // pipeIn 和 pipeOut
               key.substring(0, 2) === '__' ||
-              key === 'css' ||
+              key === 'themeCss' ||
+              key === 'editorPath' ||
               key === 'editorState') // 样式不需要出现做json中,
         );
       },

packages/amis-editor-core/src/util.ts

@@ -9,6 +9,8 @@ import isPlainObject from 'lodash/isPlainObject';
 import isNumber from 'lodash/isNumber';
 import type {Schema} from 'amis';
 import {SchemaObject} from 'amis/lib/Schema';
+import {assign, cloneDeep} from 'lodash';
+import {getGlobalData} from 'amis-theme-editor-helper';
 
 const {
   guid,
@@ -39,6 +41,8 @@ export {
   createObject
 };
 
+export let themeConfig: any = {};
+
 export function __uri(id: string) {
   return id;
 }
@@ -198,15 +202,16 @@ export function JSONPipeOut(
 }
 
 /**
- * 如果存在css属性，则给对应的className加上name
+ * 如果存在themeCss属性，则给对应的className加上name
  */
 export function addStyleClassName(obj: Schema) {
-  const css = obj.css;
-  if (!obj.css) {
+  const themeCss = obj.themeCss || obj.css;
+  // page暂时不做处理
+  if (!themeCss || obj.type === 'page') {
     return obj;
   }
   let toUpdate: any = {};
-  Object.keys(css).forEach(key => {
+  Object.keys(themeCss).forEach(key => {
     if (key !== '$$id') {
       let classname = `${key}-${obj.id.replace('u:', '')}`;
       if (!obj[key]) {
@@ -695,18 +700,23 @@ export function filterSchemaForEditor(schema: any): any {
       mapped[key] = filtered;
 
       // 组件切换状态修改classname
-      if (/[C|c]lassName/.test(key) && schema.editorState) {
-        mapped[key] = mapped[key]
-          ? mapped[key] + ' ' + schema.editorState
-          : schema.editorState;
-        modified = true;
-      }
+      // TODO:切换状态暂时先不改变组件的样式
+      // if (/[C|c]lassName/.test(key) && schema.editorState) {
+      //   mapped[key] = mapped[key]
+      //     ? mapped[key] + ' ' + schema.editorState
+      //     : schema.editorState;
+      //   modified = true;
+      // }
 
       if (filtered !== value) {
         modified = true;
       }
     });
-    return modified ? mapped : schema;
+    const finalSchema = modified ? mapped : schema;
+    if (finalSchema?.type) {
+      return setThemeDefaultData(finalSchema);
+    }
+    return finalSchema;
   }
 
   return schema;
@@ -1083,3 +1093,15 @@ export function needFillPlaceholder(curProps: any) {
   }
   return needFillPlaceholder;
 }
+// 设置主题数据
+export function setThemeConfig(config: any) {
+  themeConfig = config;
+}
+
+// 将主题数据传入组件的schema
+export function setThemeDefaultData(data: any) {
+  const schemaData = cloneDeep(data);
+  schemaData.themeConfig = themeConfig;
+  assign(schemaData, getGlobalData(themeConfig));
+  return schemaData;
+}