refactor:The plugin width is persisted using vueuse. (#732)

* refactor:The plugin width is persisted using vueuse. * fixed: Detail fixes * fixed: Move the content inside the setup function And Use JavaScript to access CSS variables * add vueuse into package.json * fix:Fix the abnormal position of the left-side icon * fix(PageSetting): Move the content inside the setup function
opentiny · Aug 14, 2024 · b28884b · b28884b
1 parent 5df2ba3
commit b28884b
Show file tree

Hide file tree

Showing 15 changed files with 179 additions and 166 deletions.
diff --git a/mockServer/assets/css/0.1.20/index.css b/mockServer/assets/css/0.1.20/index.css
@@ -476,6 +476,7 @@
   --ti-base-size-height-small: 28px;
   --ti-base-size-height-minor: 30px;
   --ti-base-size-height-mini: 24px;
+  --ti-date-picker-width: 280px;
 }
 :root {
   --ti-errortips-box-background: var(--ti-base-color-light);

diff --git a/package.json b/package.json
@@ -55,7 +55,8 @@
     "vite": "^4.3.7",
     "vite-plugin-monaco-editor": "^1.0.10",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vue-eslint-parser": "^8.0.1"
+    "vue-eslint-parser": "^8.0.1",
+    "@vueuse/core": "^9.6.0"
   },
   "browserslist": [
     "> 1%",

diff --git a/packages/common/component/PluginPanel.vue b/packages/common/component/PluginPanel.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import { inject, ref, watch } from 'vue'
+import { inject, ref } from 'vue'
 import { useLayout } from '@opentiny/tiny-engine-controller'
 import CloseIcon from './CloseIcon.vue'
 import SvgButton from './SvgButton.vue'
@@ -70,7 +70,7 @@ export default {
   },
   emits: ['close'],
   setup(props, { emit }) {
-    const { pluginWidth } = useLayout()
+    const { getPluginWidth, changePluginWidth } = useLayout()
     const panelState = inject('panelState')
     const closePanel = () => {
       useLayout().closePlugin()
@@ -104,23 +104,20 @@ export default {
     const MIN_WIDTH = 300 // 固定的最小宽度值
     const MAX_WIDTH = 1000 // 固定的最大宽度值
     const panel = ref(null)
-    const panelWidth = ref(pluginWidth[props.fixedName]) // 使用默认宽度
-    watch(pluginWidth, (newWidth) => {
-      panelWidth.value = newWidth[props.fixedName]
-    })
+    const panelWidth = ref(getPluginWidth(props.fixedName)) // 使用默认宽度
     let startX = 0
     let startWidth = 0
 
     const onMouseMoveRight = (event) => {
       const newWidth = startWidth + (event.clientX - startX)
       panelWidth.value = Math.max(MIN_WIDTH, Math.min(newWidth, MAX_WIDTH))
-      pluginWidth[props.fixedName] = panelWidth.value
+      changePluginWidth(props.fixedName, panelWidth.value)
     }
 
     const onMouseMoveLeft = (event) => {
       const newWidth = startWidth - (event.clientX - startX)
       panelWidth.value = Math.max(MIN_WIDTH, Math.min(newWidth, MAX_WIDTH))
-      pluginWidth[props.fixedName] = panelWidth.value
+      changePluginWidth(props.fixedName, panelWidth.value)
     }
 
     const throttledMouseMoveRight = throttle(onMouseMoveRight, 50)
@@ -156,8 +153,7 @@ export default {
       panel,
       panelWidth,
       onMouseDownRight,
-      onMouseDownLeft,
-      pluginWidth
+      onMouseDownLeft
     }
   }
 }

diff --git a/packages/controller/src/useLayout.js b/packages/controller/src/useLayout.js
@@ -12,6 +12,7 @@
 
 import { reactive, nextTick } from 'vue'
 import { constants } from '@opentiny/tiny-engine-utils'
+import { useStorage } from '@vueuse/core'
 
 const { PAGE_STATUS } = constants
 
@@ -36,7 +37,8 @@ const PLUGIN_NAME = {
   Style: 'SettingStyles',
   Props: 'SettingProps'
 }
-const pluginWidth = reactive({
+
+const pluginWidth = {
   Materials: '300',
   OutlineTree: '300',
   AppManage: '300',
@@ -50,7 +52,17 @@ const pluginWidth = reactive({
   SettingProps: '320',
   SettingStyles: '320',
   SettingEvents: '320'
-})
+}
+const pluginWidthStorage = useStorage('pluginWidth', pluginWidth)
+const getPluginWidth = (name) => {
+  return pluginWidthStorage.value[name]
+}
+const changePluginWidth = (name, width) => {
+  if (Object.prototype.hasOwnProperty.call(pluginWidthStorage.value, name)) {
+    pluginWidthStorage.value[name] = width
+  }
+}
+
 const pluginState = reactive({
   pluginEvent: 'all'
 })
@@ -167,6 +179,7 @@ export default () => {
     getPluginState,
     pluginState,
     isEmptyPage,
-    pluginWidth
+    getPluginWidth,
+    changePluginWidth
   }
 }
diff --git a/packages/design-core/src/DesignPlugins.vue b/packages/design-core/src/DesignPlugins.vue
@@ -1,95 +1,100 @@
 <!-- 左侧插件栏-->
 <template>
-  <div id="tiny-engine-nav-panel" :style="{ 'pointer-events': pluginState.pluginEvent }">
-    <!-- 图标菜单上侧区域（主要icon） -->
-    <ul class="nav-panel-lists top">
-      <li
-        v-for="(item, index) in state.topNavLists"
-        :key="index"
-        :class="{
-          'list-item': true,
-          'first-item': index === 0,
-          active: item.id === renderPanel,
-          prev: state.prevIdex - 1 === index
-        }"
-        :title="item.title"
-        @click="clickMenu({ item, index })"
-      >
-        <div>
-          <span class="item-icon">
-            <svg-icon
-              v-if="typeof iconComponents[item.id] === 'string'"
-              :name="iconComponents[item.id]"
-              class="panel-icon"
-            ></svg-icon>
-            <component v-else :is="iconComponents[item.id]" class="panel-icon"></component>
-          </span>
-        </div>
-      </li>
-    </ul>
-
-    <!-- 图标菜单下侧区域（附加icon） -->
-    <ul class="nav-panel-lists bottom">
-      <!-- 与上侧间隔 -->
-      <li style="flex: 1" class="list-item"></li>
-      <!-- 下侧具体icon插件菜单遍历渲染 -->
-      <li
-        v-for="(item, index) in state.bottomNavLists"
-        :key="index"
-        :class="[
-          'list-item',
-          { active: renderPanel === item.id, prev: state.prevIdex - 1 === index, 'first-item': index === 0 }
-        ]"
-        :title="item.title"
-        @click="clickMenu({ item, index })"
-      >
-        <div :class="{ 'is-show': renderPanel }">
-          <span class="item-icon">
-            <public-icon
-              v-if="typeof iconComponents[item.id] === 'string'"
-              :name="iconComponents[item.id]"
-              class="panel-icon"
-              svgClass="panel-svg"
-            ></public-icon>
-            <component v-else :is="iconComponents[item.id]" class="panel-icon"></component>
-          </span>
-        </div>
-      </li>
-      <!-- 其他依赖插件菜单(比如AI机器人插件) -->
-      <li
-        v-if="state.independence"
-        :key="state.bottomNavLists.length + 1"
-        :class="['list-item']"
-        :title="state.independence.title"
-        @click="openAIRobot"
-      >
-        <div>
-          <span class="item-icon">
-            <img class="chatgpt-icon" src="../assets/AI.png" />
-          </span>
-        </div>
-      </li>
-    </ul>
+  <div>
+    <div id="tiny-engine-nav-panel" :style="{ 'pointer-events': pluginState.pluginEvent }">
+      <!-- 图标菜单上侧区域（主要icon） -->
+      <ul class="nav-panel-lists top">
+        <li
+          v-for="(item, index) in state.topNavLists"
+          :key="index"
+          :class="{
+            'list-item': true,
+            'first-item': index === 0,
+            active: item.id === renderPanel,
+            prev: state.prevIdex - 1 === index
+          }"
+          :title="item.title"
+          @click="clickMenu({ item, index })"
+        >
+          <div>
+            <span class="item-icon">
+              <svg-icon
+                v-if="typeof iconComponents[item.id] === 'string'"
+                :name="iconComponents[item.id]"
+                class="panel-icon"
+              ></svg-icon>
+              <component v-else :is="iconComponents[item.id]" class="panel-icon"></component>
+            </span>
+          </div>
+        </li>
+      </ul>
+
+      <!-- 图标菜单下侧区域（附加icon） -->
+      <ul class="nav-panel-lists bottom">
+        <!-- 与上侧间隔 -->
+        <li style="flex: 1" class="list-item"></li>
+        <!-- 下侧具体icon插件菜单遍历渲染 -->
+        <li
+          v-for="(item, index) in state.bottomNavLists"
+          :key="index"
+          :class="[
+            'list-item',
+            { active: renderPanel === item.id, prev: state.prevIdex - 1 === index, 'first-item': index === 0 }
+          ]"
+          :title="item.title"
+          @click="clickMenu({ item, index })"
+        >
+          <div :class="{ 'is-show': renderPanel }">
+            <span class="item-icon">
+              <public-icon
+                v-if="typeof iconComponents[item.id] === 'string'"
+                :name="iconComponents[item.id]"
+                class="panel-icon"
+                svgClass="panel-svg"
+              ></public-icon>
+              <component v-else :is="iconComponents[item.id]" class="panel-icon"></component>
+            </span>
+          </div>
+        </li>
+        <!-- 其他依赖插件菜单(比如AI机器人插件) -->
+        <li
+          v-if="state.independence"
+          :key="state.bottomNavLists.length + 1"
+          :class="['list-item']"
+          :title="state.independence.title"
+          @click="openAIRobot"
+        >
+          <div>
+            <span class="item-icon">
+              <img class="chatgpt-icon" src="../assets/AI.png" />
+            </span>
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
 
-  <!-- 插件面板 -->
-  <div
-    v-show="renderPanel && components[renderPanel]"
-    id="tiny-engine-left-panel"
-    :class="[renderPanel, { 'is-fixed': pluginsState.fixedPanels.includes(renderPanel) }]"
-  >
-    <div class="left-panel-wrap">
-      <keep-alive>
-        <component
-          :is="components[renderPanel]"
-          ref="pluginRef"
-          :fixed-panels="pluginsState.fixedPanels"
-          @close="close"
-          @fixPanel="fixPanel"
-        ></component>
-      </keep-alive>
+  <div>
+    <!-- 插件面板 -->
+    <div
+      v-show="renderPanel && components[renderPanel]"
+      id="tiny-engine-left-panel"
+      :class="[renderPanel, { 'is-fixed': pluginsState.fixedPanels.includes(renderPanel) }]"
+    >
+      <div class="left-panel-wrap">
+        <keep-alive>
+          <component
+            :is="components[renderPanel]"
+            ref="pluginRef"
+            :fixed-panels="pluginsState.fixedPanels"
+            @close="close"
+            @fixPanel="fixPanel"
+          ></component>
+        </keep-alive>
+      </div>
     </div>
   </div>
+
   <!--  AI 悬浮窗  -->
   <Teleport to="body">
     <div v-if="robotVisible" class="robot-dialog">
@@ -266,6 +271,7 @@ export default {
 #tiny-engine-nav-panel {
   display: none;
   width: var(--base-nav-panel-width);
+  height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -287,7 +293,7 @@ export default {
 
     &.bottom {
       flex: 1;
-      padding-bottom: 36px;
+      padding-bottom: 80px;
     }
 
     .list-item {