feat(style): stylePanel add style selector, write css to global styles

packages/canvas/src/components/container/container.js

@@ -403,6 +403,8 @@ export const clearSelect = () => {
   canvasState.current = null
   canvasState.parent = null
   Object.assign(selectState, initialRectState)
+  // 临时借用 remote 事件出发 currentSchema 更新
+  canvasState?.emit?.('remove')
 }
 
 export const querySelectById = (id, type = '') => {

packages/controller/src/useProperties.js

@@ -10,11 +10,13 @@
  *
  */
 
-import { toRaw, nextTick, shallowReactive } from 'vue'
+import { toRaw, nextTick, shallowReactive, ref } from 'vue'
+import { getNode, setState, updateRect } from '@opentiny/tiny-engine-canvas'
 import useCanvas from './useCanvas'
 import useResource from './useResource'
 import useTranslate from './useTranslate'
-import { getNode, setState, updateRect } from '@opentiny/tiny-engine-canvas'
+
+const propsUpdateKey = ref(0)
 
 const otherBaseKey = {
   className: {
@@ -168,6 +170,10 @@ const getProps = (schema, parent) => {
 }
 
 const setProp = (name, value) => {
+  if (!properties.schema) {
+    return
+  }
+
   properties.schema.props = properties.schema.props || {}
 
   if (value === '' || value === undefined || value === null) {
@@ -178,6 +184,7 @@ const setProp = (name, value) => {
 
   // 没有父级，或者不在节点上面，要更新内容。就用setState
   getNode(properties.schema.id, true).parent || setState(useCanvas().getPageSchema().state)
+  propsUpdateKey.value++
   nextTick(updateRect)
 }
 
@@ -188,6 +195,7 @@ const getProp = (key) => {
 const delProp = (name) => {
   const props = properties.schema.props || {}
   delete props[name]
+  propsUpdateKey.value++
 }
 
 const setProps = (schema) => {
@@ -205,6 +213,7 @@ export default function () {
     translateProp,
     getSchema(parent) {
       return parent ? properties : properties.schema
-    }
+    },
+    propsUpdateKey
   }
 }

packages/settings/styles/package.json

@@ -17,8 +17,11 @@
     "@opentiny/tiny-engine-common": "workspace:^1.0.0",
     "@opentiny/tiny-engine-controller": "workspace:^1.0.0",
     "@opentiny/tiny-engine-http": "workspace:^1.0.0",
+    "@opentiny/tiny-engine-utils": "workspace:^1.0.0",
     "@opentiny/vue": "~3.10.0",
     "@opentiny/vue-renderless": "~3.10.0",
+    "@vueuse/core": "^9.6.0",
+    "postcss": "^8.4.31",
     "vue": "3.2.45"
   },
   "devDependencies": {

packages/settings/styles/src/Main.vue

@@ -17,7 +17,7 @@
       @save="save(CSS_TYPE.Style, $event)"
     />
   </div>
-
+  <class-names-container></class-names-container>
   <tiny-collapse v-model="activeNames">
     <tiny-collapse-item title="布局" name="layout">
       <layout-group :display="state.style.display" @update="updateStyle" />
@@ -58,23 +58,26 @@
 <script>
 import { ref } from 'vue'
 import { Collapse, CollapseItem } from '@opentiny/vue'
+import { useHistory, useCanvas, useProperties } from '@opentiny/tiny-engine-controller'
+import { setPageCss, getSchema as getCanvasPageSchema } from '@opentiny/tiny-engine-canvas'
 import { MetaCodeEditor } from '@opentiny/tiny-engine-common'
-import SizeGroup from './components/size/SizeGroup.vue'
-import LayoutGroup from './components/layout/LayoutGroup.vue'
-import FlexBox from './components/layout/FlexBox.vue'
-import GridBox from './components/layout/GridBox.vue'
-import PositionGroup from './components/position/PositionGroup.vue'
-import BorderGroup from './components/border/BorderGroup.vue'
-import SpacingGroup from './components/spacing/SpacingGroup.vue'
-import BackgroundGroup from './components/background/BackgroundGroup.vue'
-import EffectGroup from './components/effects/EffectGroup.vue'
-// import BoxShadowGroup from './components/shadow/BoxShadowGroup.vue'
-import TypographyGroup from './components/typography/TypographyGroup.vue'
+import { formatString } from '@opentiny/tiny-engine-common/js/ast'
+import {
+  SizeGroup,
+  LayoutGroup,
+  FlexBox,
+  GridBox,
+  PositionGroup,
+  BorderGroup,
+  SpacingGroup,
+  BackgroundGroup,
+  EffectGroup,
+  TypographyGroup,
+  ClassNamesContainer
+} from './components'
 import { CSS_TYPE } from './js/cssType'
 import useStyle from './js/useStyle'
 import { styleStrRemoveRoot } from './js/cssConvert'
-import { useHistory, useCanvas, useProperties } from '@opentiny/tiny-engine-controller'
-import { setPageCss, getSchema as getCanvasPageSchema } from '@opentiny/tiny-engine-canvas'
 
 export default {
   components: {
@@ -87,9 +90,9 @@ export default {
     BorderGroup,
     SpacingGroup,
     BackgroundGroup,
-    // BoxShadowGroup,
     TypographyGroup,
     EffectGroup,
+    ClassNamesContainer,
     TinyCollapse: Collapse,
     TinyCollapseItem: CollapseItem
   },
@@ -106,7 +109,7 @@ export default {
     ])
     const { getCurrentSchema, getPageSchema } = useCanvas()
     // 获取当前节点 style 对象
-    const { state, updateStyle, setStyle } = useStyle() // updateStyle
+    const { state, updateStyle } = useStyle() // updateStyle
     const { addHistory } = useHistory()
     const { getSchema } = useProperties()
 
@@ -117,7 +120,7 @@ export default {
       if (type === CSS_TYPE.Style) {
         const pageSchema = getCanvasPageSchema()
         const schema = getSchema() || pageSchema
-        const styleString = styleStrRemoveRoot(content)
+        const styleString = formatString(styleStrRemoveRoot(content), 'css')
         const currentSchema = getCurrentSchema() || pageSchema
 
         state.styleContent = content
@@ -132,13 +135,13 @@ export default {
           delete currentSchema.props.style
         }
 
-        setStyle(styleString)
         addHistory()
       } else if (type === CSS_TYPE.Css) {
-        const cssString = content.replace(/"/g, "'")
+        const cssString = formatString(content.replace(/"/g, "'"), 'css')
         getPageSchema().css = cssString
         getCanvasPageSchema().css = cssString
         setPageCss(cssString)
+        state.schemaUpdateKey++
         addHistory()
       }
     }

packages/settings/styles/src/components/background/BackgroundGroup.vue

@@ -144,7 +144,6 @@ export default {
     })
 
     const { getProperty, getSettingFlag } = useProperties({
-      props,
       names: Object.values(BACKGROUND_PROPERTY),
       parseNumber: true
     })

packages/settings/styles/src/components/border/BorderGroup.vue

@@ -235,7 +235,6 @@ import useEvent from '../../js/useEvent'
 import { useProperties } from '../../js/useStyle'
 import { RADIUS_SETTING, BORDER_SETTING, BORDER_STYLE_TYPE } from '../../js/cssType'
 import { BORDER_PROPERTY, BORDER_RADIUS_PROPERTY } from '../../js/styleProperty'
-// import { hyphenate } from '@opentiny/tiny-engine-controller/utils'
 
 const BORDER_STYLE = {
   [BORDER_SETTING.All]: BORDER_PROPERTY.BorderStyle,
@@ -299,7 +298,6 @@ export default {
     const { setPosition } = useModal()
 
     const { getProperty, getSettingFlag, getPropertyValue } = useProperties({
-      props,
       names: Object.values({ ...BORDER_RADIUS_PROPERTY, ...BORDER_PROPERTY }),
       parseNumber: true
     })