refactor：plugin adjusts to the left and right sides (#785)

* refactor：plugin adjusts to the left and right sides

* optimize: Deal with comments

packages/common/component/PluginSetting.vue

@@ -1,6 +1,12 @@
 <template>
   <div
-    :class="['plugin-setting', { 'second-panel': isSecond }, { 'full-screen': state.isFullScreen }]"
+    :class="[
+      'plugin-setting',
+      { 'second-panel': isSecond },
+      { 'full-screen': state.isFullScreen },
+      { 'align-right': align.includes('right') },
+      'shadowClass'
+    ]"
     @click="$emit('click')"
   >
     <div class="plugin-setting-header">
@@ -30,7 +36,7 @@
 </template>
 
 <script>
-import { reactive, watchEffect } from 'vue'
+import { reactive, watchEffect, computed } from 'vue'
 import { Button } from '@opentiny/vue'
 import { iconPlus, iconFullscreen, iconMinscreen, iconClose } from '@opentiny/vue-icon'
 
@@ -89,6 +95,10 @@ export default {
     icon: {
       type: Object,
       default: iconPlus()
+    },
+    align: {
+      type: String,
+      default: 'leftTop'
     }
   },
   emits: [EVENTS.FULL_SCREEN_CHANGE, EVENTS.SAVE, EVENTS.CANCEL, EVENTS.ADD, EVENTS.CLICK],
@@ -109,14 +119,16 @@ export default {
     const getFullScreenLabel = (isFullScreen) => {
       return isFullScreen ? '收起' : '全屏查看'
     }
-
+    // 计算属性用于确定阴影类
+    const shadowClass = computed(() => {
+      if (props.isSecond) return ''
+      return props.align.includes('right') ? 'shadow-right' : 'shadow-left'
+    })
     return {
       state,
       fullScreen,
       getFullScreenLabel,
-      IconFullscreen: iconFullscreen(),
-      IconMinscreen: iconMinscreen(),
-      IconClose: iconClose()
+      shadowClass
     }
   }
 }
@@ -133,10 +145,19 @@ export default {
   background: var(--ti-lowcode-plugin-setting-panel-bg, --ti-lowcode-toolbar-bg);
   overflow: hidden;
   border-left: 1px solid var(--ti-lowcode-plugin-panel-header-border-bottom-color);
+
   &:not(.second-panel) {
-    box-shadow: 6px 0px 3px 0px rgba(0, 0, 0, 0.05);
-    border-right: none;
+    &.shadow-right {
+      box-shadow: 6px 0px 3px 0px rgba(0, 0, 0, 0.05);
+      border-right: none;
+    }
+
+    &.shadow-left {
+      box-shadow: -6px 0px 3px 0px rgba(0, 0, 0, 0.05);
+      border-left: none;
+    }
   }
+
   &.full-screen {
     width: var(--base-collection-panel-full-screen-width);
   }
@@ -189,4 +210,7 @@ export default {
     align-items: center;
   }
 }
+.align-right {
+  right: 0;
+}
 </style>

packages/design-core/config/addons.js

@@ -45,7 +45,23 @@ import Styles from '@opentiny/tiny-engine-setting-styles'
 import '@opentiny/tiny-engine-theme'
 
 const addons = {
-  plugins: [Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, Data, Schema, Help, Robot],
+  plugins: [
+    Materials,
+    Tree,
+    Page,
+    Block,
+    Datasource,
+    Bridge,
+    I18n,
+    Script,
+    Data,
+    Schema,
+    Help,
+    Robot,
+    Props,
+    Styles,
+    Events
+  ],
   toolbars: [
     Logo,
     Breadcrumb,
@@ -61,8 +77,7 @@ const addons = {
     Checkinout,
     Setting,
     Lang
-  ],
-  settings: [Props, Styles, Events]
+  ]
 }
 
 export default addons

packages/design-core/config/plugin.js

@@ -4,9 +4,6 @@ const plugin = {}
 addons.plugins.forEach((item) => {
   plugin[item.id] = item
 })
-addons.settings.forEach((item) => {
-  plugin[item.id] = item
-})
 
 export const getPlugin = (pluginName) => {
   return plugin[pluginName] || null

packages/design-core/src/App.vue

@@ -81,11 +81,6 @@ export default {
         plugin[item.id] = { width: item.options?.width || 300, align: item.options?.align || 'rightTop' }
       }
     })
-    addons.settings.forEach((item) => {
-      if (item.id) {
-        plugin[item.id] = { width: item.options?.width || 320, align: item.options?.align || 'rightTop' }
-      }
-    })
     localStorage.setItem('plugin', JSON.stringify(plugin))
 
     const { layoutState } = useLayout()

packages/plugins/bridge/src/BridgeSetting.vue

@@ -1,5 +1,5 @@
 <template>
-  <plugin-setting v-if="isOpen" :style="{ marginLeft: leftMargin + 'px' }">
+  <plugin-setting v-if="isOpen" :style="computedStyle" :align="align">
     <template #title>
       <div class="title-wrap">
         <span>{{ state.title }}</span>
@@ -153,8 +153,14 @@ export default {
     SvgButton
   },
   setup(props, { emit }) {
-    const { getPluginWidth, PLUGIN_NAME } = useLayout()
-    const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['Bridge']))
+    const { getPluginWidth, PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME['Bridge']))
+    const margin = computed(() => getPluginWidth(PLUGIN_NAME['Bridge']))
+    // 计算样式
+    const computedStyle = computed(() => {
+      return { [align.value.includes('left') ? 'marginLeft' : 'marginRight']: margin.value + 'px' }
+    })
+
     const monacoOptions = {
       theme: theme(),
       roundedSelection: true,
@@ -309,7 +315,8 @@ export default {
       options: monacoOptions,
       handleChangeType,
       RESOURCE_CATEGORY,
-      leftMargin
+      computedStyle,
+      align
     }
   }
 }

packages/plugins/data/src/Main.vue

@@ -41,7 +41,7 @@
           @removeStore="removeStore"
         />
       </div>
-      <div v-if="isPanelShow" class="data-source-right-panel" :style="{ marginLeft: leftMargin + 'px' }">
+      <div v-if="isPanelShow" class="data-source-right-panel" :style="computedStyle">
         <div class="header">
           <span>{{ addDataSource }}</span>
           <span class="options-wrap">
@@ -127,13 +127,22 @@ export default {
     const activeName = ref(STATE.CURRENT_STATE)
     const isBlock = computed(() => useCanvas().isBlock())
     const { setSaved } = useCanvas()
-    const { PLUGIN_NAME, getPluginApi, getPluginWidth } = useLayout()
+    const { PLUGIN_NAME, getPluginApi, getPluginWidth, getPluginByLayout } = useLayout()
     const { openCommon } = getPluginApi(PLUGIN_NAME.save)
     const docsUrl = useHelp().getDocsUrl('data')
     const panelState = reactive({
       emitEvent: emit
     })
-    const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['Data']))
+
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME['Data']))
+    const margin = computed(() => getPluginWidth(PLUGIN_NAME['Data']))
+    // 计算样式
+    const computedStyle = computed(() => {
+      return align.value.includes('left')
+        ? { marginLeft: margin.value + 'px', borderRight: '1px solid var(--ti-lowcode-toolbar-border-color)' }
+        : { marginRight: margin.value + 'px', right: 0, borderLeft: '1px solid var(--ti-lowcode-toolbar-border-color)' }
+    })
+
     provide('panelState', panelState)
 
     const state = reactive({
@@ -396,7 +405,8 @@ export default {
       open,
       docsUrl,
       PLUGIN_NAME,
-      leftMargin
+      computedStyle,
+      align
     }
   }
 }
@@ -452,7 +462,6 @@ export default {
   .data-source-right-panel {
     width: 492px;
     height: 100%;
-    border-right: 1px solid var(--ti-lowcode-toolbar-border-color);
     background: var(--ti-lowcode-common-component-bg);
     position: absolute;
     top: 0;

packages/plugins/datasource/src/DataSourceForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <plugin-setting v-if="isOpen" title="设置数据源" :style="{ marginLeft: leftMargin + 'px' }">
+  <plugin-setting v-if="isOpen" title="设置数据源" :style="computedStyle" :align="align">
     <template #header>
       <button-group>
         <tiny-button class="field-save" type="primary" @click="save">保存</tiny-button>
@@ -83,8 +83,12 @@ export default {
     const { confirm, message } = useModal()
     const { appInfoState } = useApp()
     const { dataSourceState } = useDataSource()
-    const { getPluginWidth, PLUGIN_NAME } = useLayout()
-    const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['Datasource']))
+    const { getPluginWidth, PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME['Datasource']))
+    const margin = computed(() => getPluginWidth(PLUGIN_NAME['Datasource']))
+    const computedStyle = computed(() => {
+      return { [align.value.includes('left') ? 'marginLeft' : 'marginRight']: margin.value + 'px' }
+    })
     const state = reactive({
       dataSource: {}
     })
@@ -256,7 +260,8 @@ export default {
       openRemotePanel,
       selectDataSourceTemplate,
       deleteDataSource,
-      leftMargin
+      computedStyle,
+      align
     }
   }
 }

packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue

@@ -1,11 +1,6 @@
 <template>
   <div v-if="isOpen">
-    <plugin-setting
-      title="全局设置"
-      @cancel="close"
-      @save="saveGlobalDataHandle"
-      :style="{ marginLeft: leftMargin + 'px' }"
-    >
+    <plugin-setting title="全局设置" @cancel="close" @save="saveGlobalDataHandle" :style="computedStyle" :align="align">
       <template #content>
         <tiny-collapse v-model="activeNames">
           <tiny-collapse-item title="请求参数处理函数（willFetch）" name="willFetch">
@@ -53,8 +48,15 @@ export default {
   },
   setup() {
     const { confirm } = useModal()
-    const { getPluginWidth, PLUGIN_NAME } = useLayout()
-    const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['Datasource']))
+    const { getPluginWidth, PLUGIN_NAME, getPluginByLayout } = useLayout()
+
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME['Datasource']))
+    const margin = computed(() => getPluginWidth(PLUGIN_NAME['Datasource']))
+    // 计算样式
+    const computedStyle = computed(() => {
+      return { [align.value.includes('left') ? 'marginLeft' : 'marginRight']: margin.value + 'px' }
+    })
+
     const state = reactive({
       dataHandlerValue: useResource().resState?.dataHandler?.value,
       willFetchValue: useResource().resState.willFetch?.value,
@@ -97,7 +99,8 @@ export default {
       close,
       saveGlobalDataHandle,
       state,
-      leftMargin
+      computedStyle,
+      align
     }
   }
 }

packages/plugins/datasource/src/DataSourceRecordList.vue

@@ -5,7 +5,8 @@
     :showIfFullScreen="true"
     title="静态数据管理"
     class="datasource-record-list"
-    :style="{ marginLeft: leftMargin + 'px' }"
+    :style="computedStyle"
+    :align="align"
     @cancel="closeRecordList"
     @save="saveRecordList"
     @fullScreenChange="fullScreenChange"
@@ -137,8 +138,14 @@ export default {
     const { confirm } = useModal()
     const { toClipboard } = useClipboard()
     const { layoutState } = useLayout()
-    const { getPluginWidth, PLUGIN_NAME } = useLayout()
-    const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['Datasource']))
+    const { getPluginWidth, PLUGIN_NAME, getPluginByLayout } = useLayout()
+
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME['Datasource']))
+    const margin = computed(() => getPluginWidth(PLUGIN_NAME['Datasource']))
+    // 计算样式
+    const computedStyle = computed(() => {
+      return { [align.value.includes('left') ? 'marginLeft' : 'marginRight']: margin.value + 'px' }
+    })
 
     const state = reactive({
       totalData: [],
@@ -599,7 +606,8 @@ export default {
       handleBeforeChange,
       overrideData,
       mergeData,
-      leftMargin
+      computedStyle,
+      align
     }
   }
 }

packages/plugins/datasource/src/DataSourceRemotePanel.vue

@@ -5,7 +5,8 @@
       :isSecond="true"
       @cancel="closePanel"
       @save="saveRemote"
-      :style="{ marginLeft: leftMargin + 'px' }"
+      :style="computedStyle"
+      :align="align"
     >
       <template #content>
         <div class="create-config">
@@ -101,10 +102,14 @@ export default {
   setup(props, { emit }) {
     const dataSourceRemoteAdapteRef = ref(null)
     const { dataSourceState } = useDataSource()
-    const { getPluginWidth, PLUGIN_NAME } = useLayout()
+    const { getPluginWidth, PLUGIN_NAME, getPluginByLayout } = useLayout()
 
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME['Datasource']))
     const panelWidth = window.getComputedStyle(document.body).getPropertyValue('--base-left-panel-width')
-    const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['Datasource']) - parseInt(panelWidth))
+    const margin = computed(() => getPluginWidth(PLUGIN_NAME['Datasource']) - parseInt(panelWidth))
+    const computedStyle = computed(() => {
+      return { [align.value.includes('left') ? 'marginLeft' : 'marginRight']: margin.value + 'px' }
+    })
 
     const state = reactive({
       remoteData: { options: {} },
@@ -217,7 +222,8 @@ export default {
       saveRemote,
       sendRequest,
       isOpen,
-      leftMargin
+      computedStyle,
+      align
     }
   }
 }