feat: 资源管理、状态管理样式整改

opentiny · Aug 31, 2024 · f1e1928 · f1e1928
1 parent 4a3c402
commit f1e1928
Show file tree

Hide file tree

Showing 12 changed files with 309 additions and 218 deletions.
diff --git a/packages/common/component/PluginPanel.vue b/packages/common/component/PluginPanel.vue
@@ -70,12 +70,11 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    line-height: 40px;
     font-size: 12px;
     font-weight: var(--ti-lowcode-plugin-panel-title-font-weight);
     font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
       'Helvetica Neue', sans-serif;
-    padding: 0 12px;
+    padding: 12px;
     color: var(--ti-lowcode-plugin-panel-title-color);
     font-weight: var(--ti-lowcode-plugin-panel-title-font-weight);
     .plugin-panel-title {

diff --git a/packages/plugins/block/src/Main.vue b/packages/plugins/block/src/Main.vue
@@ -500,7 +500,7 @@ export default {
 :deep(.help-box) {
   position: absolute;
   left: 62px;
-  top: 3px;
+  top: 12px;
 }
 :deep(.tiny-button) {
   border-radius: 4px;

diff --git a/packages/plugins/bridge/src/BridgeManage.vue b/packages/plugins/bridge/src/BridgeManage.vue
@@ -1,12 +1,7 @@
 <template>
   <div class="manage-panel">
     <div class="manage-panel-search">
-      <tiny-search
-        v-model="state.searchValue"
-        clearable
-        placeholder="请输入关键字搜索"
-        @update:modelValue="searchBridgeData"
-      >
+      <tiny-search v-model="state.searchValue" clearable placeholder="搜索" @update:modelValue="searchBridgeData">
         <template #prefix>
           <tiny-icon-search />
         </template>
@@ -133,7 +128,7 @@ export default {
   position: relative;
 
   .manage-panel-search {
-    padding: 8px;
+    padding: 0 12px 12px 12px;
   }
 
   .add-button {

diff --git a/packages/plugins/bridge/src/BridgeSetting.vue b/packages/plugins/bridge/src/BridgeSetting.vue
@@ -20,7 +20,7 @@
         :model="state"
         validate-type="text"
         :inline-message="true"
-        label-position="left"
+        label-position="top"
         :label-align="true"
       >
         <div class="right-item">
@@ -34,18 +34,18 @@
               </tiny-radio>
             </tiny-radio-group>
           </tiny-form-item>
-          <tiny-form-item v-if="!state.status" label="名称" prop="name">
+          <tiny-form-item v-if="!state.status" label="工具名称" prop="name">
             <tiny-input v-model="state.name" placeholder="请输入工具类名称"></tiny-input>
           </tiny-form-item>
           <div v-if="state.category">
-            <tiny-form-item label="包名" prop="content.package">
+            <tiny-form-item label="npm包名" prop="content.package">
               <tiny-input v-model="state.content.package" placeholder="请输入npm包名称"></tiny-input>
             </tiny-form-item>
-            <tiny-form-item label="导出名称" prop="content.exportName">
+            <tiny-form-item label="npm包导出名" prop="content.exportName">
               <tiny-input v-model="state.content.exportName" placeholder="请输入npm包的导出名称"></tiny-input>
             </tiny-form-item>
-            <tiny-form-item label="是否解构">
-              <tiny-switch v-model="state.content.destructuring"></tiny-switch>
+            <tiny-form-item label="">
+              <tiny-checkbox v-model="state.content.destructuring">解构npm包</tiny-checkbox>
             </tiny-form-item>
             <tiny-form-item v-if="state.mode" label="是否作为实例">
               <tiny-checkbox v-model="state.isInstance"></tiny-checkbox>
@@ -63,23 +63,16 @@
               <template #label>
                 <div class="cdn-label-wrap">
                   <span>CDN</span>
-                  <tiny-tooltip
-                    effect="dark"
-                    content="浏览器直接可用的生产包链接，请确保可用，否则可能会造成页面预览失败"
-                    placement="top"
-                  >
-                    <icon-unknow class="cdn-tips-icon"></icon-unknow>
-                  </tiny-tooltip>
                 </div>
               </template>
-              <tiny-input
-                v-model="state.content.cdnLink"
-                placeholder="浏览器直接可用的生产包链接，请确保可用，否则可能会造成页面预览失败"
-              ></tiny-input>
+              <tiny-input v-model="state.content.cdnLink" placeholder="CDN"></tiny-input>
+              <div class="tip">浏览器直接可用的生产包链接，请确保可用，否则可能会造成页面预览失败</div>
+            </tiny-form-item>
+            <tiny-form-item label="生成utils.js代码预览">
+              <div class="code-preview">
+                <pre>{{ codePreview }}</pre>
+              </div>
             </tiny-form-item>
-            <div class="code-preview">
-              <pre>// <span class="pre-title">生成的</span> utils.js <span class="pre-title">代码预览</span>&#10;{{ codePreview }}</pre>
-            </div>
           </div>
           <monaco-editor
             v-else
@@ -101,13 +94,10 @@ import {
   Button as TinyButton,
   Form as TinyForm,
   FormItem as TinyFormItem,
-  Switch as TinySwitch,
   Checkbox as TinyCheckbox,
-  Tooltip,
   Radio,
   RadioGroup
 } from '@opentiny/vue'
-import { iconUnknow } from '@opentiny/vue-icon'
 import {
   ACTION_TYPE,
   RESOURCE_TYPE,
@@ -144,10 +134,7 @@ export default {
     TinyFormItem,
     TinyCheckbox,
     PluginSetting,
-    TinySwitch,
     MonacoEditor,
-    IconUnknow: iconUnknow(),
-    TinyTooltip: Tooltip,
     TinyRadioGroup: RadioGroup,
     TinyRadio: Radio,
     SvgButton
@@ -313,6 +300,12 @@ export default {
     margin-right: 8px;
   }
   .resource-form {
+    .tip {
+      font-size: 11px;
+      line-height: 18px;
+      margin-top: 8px;
+      color: var(--ti-lowcode-datasource-tip-color);
+    }
     :deep(.tiny-form-item__label) {
       .cdn-tips-icon {
         margin-left: 4px;
@@ -321,6 +314,9 @@ export default {
   }
 
   .title-wrap {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--ti-lowcode-data-source-color);
     .help-link {
       display: inline-block;
       color: var(--ti-lowcode-common-primary-color);
@@ -336,6 +332,16 @@ export default {
     display: flex;
     align-items: center;
     column-gap: 16px;
+    :deep(button.tiny-button.tiny-button--primary) {
+      display: flex;
+      align-items: center;
+      min-width: 40px;
+      justify-content: center;
+      height: 24px;
+      padding: 0;
+      border-radius: 4px;
+    }
+
     .delete-btn {
       color: var(--ti-lowcode-common-text-color-5);
       &:hover {
@@ -370,7 +376,6 @@ export default {
 .code-preview {
   font-size: 14px;
   line-height: 20px;
-  margin-left: 12px;
   color: var(--ti-lowcode-birdge-code-preview-color);
   background-color: var(--ti-lowcode-birdge-code-preview-bg-color);
   border-radius: 6px;

diff --git a/packages/plugins/bridge/src/Main.vue b/packages/plugins/bridge/src/Main.vue
@@ -1,27 +1,18 @@
 <template>
   <plugin-panel title="资源管理" :isCloseLeft="false" @close="closePanel">
     <template #header>
-      <link-button :href="docsUrl"></link-button>
       <svg-button name="add-utils" placement="left" :tips="tips" @click="addResource('npm')"></svg-button>
     </template>
     <template #content>
-      <tiny-tabs v-model="activedName" class="tabs full-width-tabs" tab-style="button-card" @click="switchTab">
-        <tiny-tab-item :name="RESOURCE_TYPE.Util" title="工具类">
-          <bridge-manage ref="utilsRef" :name="RESOURCE_TYPE.Util" @open="openBridgePanel"></bridge-manage>
-        </tiny-tab-item>
-        <tiny-tab-item v-if="isVsCodeEnv" :name="RESOURCE_TYPE.Bridge" title="桥接源">
-          <bridge-manage ref="bridge" :name="RESOURCE_TYPE.Bridge" @open="openBridgePanel"></bridge-manage>
-        </tiny-tab-item>
-      </tiny-tabs>
+      <bridge-manage ref="utilsRef" :name="RESOURCE_TYPE.Util" @open="openBridgePanel"></bridge-manage>
       <bridge-setting @refresh="refreshList"></bridge-setting>
     </template>
   </plugin-panel>
 </template>
 
 <script>
 import { ref, computed } from 'vue'
-import { Tabs, TabItem } from '@opentiny/vue'
-import { PluginPanel, SvgButton, LinkButton } from '@opentiny/tiny-engine-common'
+import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
 import { useHelp } from '@opentiny/tiny-engine-meta-register'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import { RESOURCE_TYPE } from './js/resource'
@@ -31,13 +22,10 @@ import { setType, RESOURCE_TIP } from './js/resource'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
     PluginPanel,
     SvgButton,
     BridgeManage,
-    BridgeSetting,
-    LinkButton
+    BridgeSetting
   },
   setup() {
     const activedName = ref(RESOURCE_TYPE.Util)
@@ -107,6 +95,6 @@ export default {
 :deep(.help-box) {
   position: absolute;
   left: 72px;
-  top: 3px;
+  top: 12px;
 }
 </style>
diff --git a/packages/plugins/data/src/CreateStore.vue b/packages/plugins/data/src/CreateStore.vue
@@ -9,60 +9,59 @@
     validate-type="text"
     :inline-message="true"
   >
-    <tiny-form-item label="stores" prop="name">
+    <tiny-form-item label="stores" prop="name" class="stores">
       <tiny-input v-model="state.storeData.name" placeholder="只能包含数字字母及下划线"></tiny-input>
     </tiny-form-item>
-    <tiny-form-item prop="state">
-      <monaco-editor
-        ref="variableEditor"
-        class="store-editor"
-        :value="editorCode"
-        :showFormatBtn="true"
-        :options="{
-          language: 'json',
-          // 禁用滚动条边边一直显示的边框
-          overviewRulerBorder: false,
-          renderLineHighlightOnlyWhenFocus: true
-        }"
-        @editorDidMount="editorDidMount"
-        @change="editorDidMount"
-      >
-        <template #toolbarStart>
-          <div class="label-left-wrap">
-            <span>state</span>
-            <tiny-popover placement="bottom-start" effect="dark" trigger="hover" popper-class="state-data-example-tips">
-              <div class="tips-content">
-                <div class="create-content-demo">
-                  <ul>
-                    <li>state为对象(一个对象内可包含多个属性): {"name": "xxx"}</li>
-                    <li>actions/getters为函数(可写多个函数): function count(){}</li>
-                  </ul>
-                </div>
-              </div>
-              <template #reference>
-                <div class="create-content-description">查看示例</div>
-              </template>
-            </tiny-popover>
+    <tiny-collapse v-model="state.activeName">
+      <tiny-collapse-item title="state" name="state">
+        <tiny-form-item prop="state">
+          <monaco-editor
+            ref="variableEditor"
+            class="store-editor"
+            :value="editorCode"
+            :showFormatBtn="true"
+            :options="{
+              language: 'json',
+              // 禁用滚动条边边一直显示的边框
+              overviewRulerBorder: false,
+              renderLineHighlightOnlyWhenFocus: true
+            }"
+            @editorDidMount="editorDidMount"
+            @change="editorDidMount"
+          >
+            <template #toolbarStart>
+              <div class="label-left-wrap"></div>
+            </template>
+          </monaco-editor>
+          <div class="tips">
+            <div>字符串:"string"</div>
+            <div>数字:123</div>
+            <div>布尔值:true/false</div>
+            <div>对象:{"name":"xxx"}</div>
+            <div>数组:["1","2"]</div>
+            <div>空值:null</div>
+            <div>"color":red</div>
+            <div>"background":"blue"</div>
           </div>
-        </template>
-      </monaco-editor>
-    </tiny-form-item>
-    <tiny-form-item prop="getters">
-      <monaco-editor ref="gettersEditor" class="store-editor" :options="options" :value="getters">
-        <template #toolbarStart><label>getters</label></template>
-      </monaco-editor>
-    </tiny-form-item>
-    <tiny-form-item prop="actions">
-      <monaco-editor ref="actionsEditor" class="store-editor" :options="options" :value="actions">
-        <template #toolbarStart><label>actions</label></template>
-      </monaco-editor>
-    </tiny-form-item>
+        </tiny-form-item>
+      </tiny-collapse-item>
+      <tiny-collapse-item title="getters" name="getters">
+        <tiny-form-item prop="getters">
+          <monaco-editor ref="gettersEditor" class="store-editor" :options="options" :value="getters"> </monaco-editor>
+        </tiny-form-item>
+      </tiny-collapse-item>
+      <tiny-collapse-item title="actions" name="actions">
+        <tiny-form-item prop="actions">
+          <monaco-editor ref="actionsEditor" class="store-editor" :options="options" :value="actions"> </monaco-editor>
+        </tiny-form-item>
+      </tiny-collapse-item>
+    </tiny-collapse>
   </tiny-form>
 </template>
 
 <script>
 import { getCurrentInstance, reactive, ref, computed, watch } from 'vue'
-import { Form, FormItem, Input, Popover } from '@opentiny/vue'
+import { Form, FormItem, Input, Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
 import { MonacoEditor } from '@opentiny/tiny-engine-common'
 import { string2Ast, ast2String, insertName } from '@opentiny/tiny-engine-common/js/ast'
 import { verifyJsVarName } from '@opentiny/tiny-engine-common/js/verification'
@@ -73,7 +72,8 @@ export default {
     TinyForm: Form,
     TinyFormItem: FormItem,
     TinyInput: Input,
-    TinyPopover: Popover
+    TinyCollapse,
+    TinyCollapseItem
   },
   props: {
     storeData: {
@@ -96,7 +96,8 @@ export default {
     const actionsEditor = ref(null)
     const variableEditor = ref(null)
     const state = reactive({
-      storeData: props.storeData
+      storeData: props.storeData,
+      activeName: ['state', 'getters', 'actions']
     })
 
     const options = {
@@ -229,7 +230,33 @@ export default {
   padding: 12px;
   height: calc(100% - 45px);
   overflow-y: auto;
-
+  .tips {
+    font-size: 11px;
+    line-height: 18px;
+    margin-top: 8px;
+    border-radius: 4px;
+    padding: 8px 14px;
+    background: var(--ti-lowcode-data-source-box-bg);
+    color: var(--ti-lowcode-datasource-tip-color);
+  }
+  :deep(.tiny-collapse .tiny-collapse-item__header) {
+    border-top: none;
+    padding: 12px 12px 5px 0;
+  }
+  :deep(.toolbar) {
+    position: absolute;
+    z-index: 99;
+    right: 4px;
+  }
+  .stores {
+    padding: 12px;
+    margin-left: -12px;
+    margin-right: -12px;
+  }
+  .tiny-form-item:first-child {
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--ti-lowcode-data-source-border-color);
+  }
   .tiny-form-item:not(:last-child) {
     margin-bottom: 12px;
   }