feat(template-center)

Author: betterdancing

packages/design-core/re-export.js

@@ -35,6 +35,7 @@ export { default as Styles } from '@opentiny/tiny-engine-setting-styles'
 export { default as Layout, LayoutService } from '@opentiny/tiny-engine-layout'
 export { default as Canvas } from '@opentiny/tiny-engine-canvas'
 export { initPreview } from './src/preview/src/main'
+export { initTemplate } from './src/template/src/main'
 export {
   GenerateCodeService,
   PluginPanel,

packages/design-core/src/App.vue

@@ -25,7 +25,7 @@ export default {
     const layoutRegistry = getMergeMeta('engine.layout')
     const materialsApi = getMetaApi('engine.plugins.materials')
     const blockApi = getMetaApi('engine.plugins.blockmanage')
-
+    console.log(layoutRegistry)
     // 此处接收画布内部的错误和警告提示
     const { data } = useBroadcastChannel({ name: BROADCAST_CHANNEL.Notify })
 

packages/design-core/src/init.js

@@ -131,6 +131,12 @@ export const init = async ({
   createAppSignal = [],
   initTimeout = 30000
 } = {}) => {
+  // 如果输入的URL没有任何参数则跳转到应用中心
+  const [baseUrl, query] = window.location.href.split('?')
+  if (!query) {
+    window.location.href = `${baseUrl}template.html?type=app`
+    return
+  }
   const { beforeAppCreate, appCreated, appMounted } = lifeCycles
 
   registerConfigurators(configurators)

packages/design-core/src/preview/src/Toolbar.vue

@@ -7,7 +7,7 @@
       <component :is="ToolbarMedia" :isCanvas="false" @setViewPort="setViewPort"></component>
     </div>
     <div class="toolbar-right">
-      <span><tiny-switch v-model="debugSwitch"></tiny-switch><span class="toolbar-button-text">调试模式</span></span>
+      <span v-if="debugMode === null || debugMode === 'show'"><tiny-switch v-model="debugSwitch"></tiny-switch><span class="toolbar-button-text">调试模式</span></span>
       <component :is="ChangeLang" :langChannel="previewLangChannel" :options="langOptions"></component>
     </div>
   </div>
@@ -33,6 +33,7 @@ export default {
     const langOptions = getMergeMeta('engine.toolbars.lang').options
     const ToolbarMedia = null // TODO: Media plugin rely on layout/canvas. Further processing is required.
     const { setBreadcrumbPage, setBreadcrumbBlock } = useBreadcrumb()
+    const debugMode = new URLSearchParams(location.search).get('debugmode')
 
     watch(
       () => previewState.currentPage,
@@ -63,7 +64,8 @@ export default {
       langOptions,
       ToolbarMedia,
       setViewPort,
-      debugSwitch
+      debugSwitch,
+      debugMode
     }
   }
 }

packages/design-core/src/template/src/template/AppCenter.vue

@@ -70,7 +70,7 @@
             </div>
           </template>
         </div>
-        <tiny-grid ref="gridRef" class="table" v-if="state.type === 'table'" :data="appList">
+        <tiny-grid ref="gridRef" class="table" v-if="state.type === 'table' && appList.length" :data="appList">
           <tiny-grid-column field="name" title="应用名称" show-overflow>
             <template #default="data">
               <div class="app-name">
@@ -90,6 +90,7 @@
             </template>
           </tiny-grid-column>
         </tiny-grid>
+        <search-empty :isShow="!appList.length" />
       </div>
       <tiny-pager
         v-if="state.total > state.pageSize"
@@ -114,6 +115,7 @@
 import { reactive, ref, onMounted } from 'vue'
 import { Button, Select, Pager, Grid, GridColumn, Popover, Search, Modal, Notify } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
+import { SearchEmpty } from '@opentiny/tiny-engine-common'
 import AppDialog from './AppDialog.vue'
 import { fetchApplicationList, createApplication, updateApplication, deleteApplication } from '../js/http'
 
@@ -126,8 +128,9 @@ export default {
     TinyGridColumn: GridColumn,
     TinyPopover: Popover,
     TinySearch: Search,
-    Modal,
-    Notify,
+    TinyModal: Modal,
+    TinyNotify: Notify,
+    SearchEmpty,
     TinyIconSearch: iconSearch(),
     AppDialog
   },
@@ -177,7 +180,7 @@ export default {
       orderBy: 'created_time',
       appSearchKey: '',
       type: 'default',
-      total: 50,
+      total: 0,
       pageSize: 10,
       currentPage: 1,
       pageSizes: [10, 20, 30, 40],
@@ -210,7 +213,7 @@ export default {
     }
 
     const handleDelete = (template) => {
-      Modal.confirm({
+      TinyModal.confirm({
         message: '即将删除应用，删除后不可恢复，请谨慎操作。',
         title: '删除应用'
       }).then((res) => {
@@ -220,7 +223,7 @@ export default {
               getTemplateList()
             })
             .catch((error) => {
-              Notify({
+              TinyNotify({
                 type: 'error',
                 message: error,
                 position: 'top-right',
@@ -257,7 +260,7 @@ export default {
         delete formData.id
         updateApplication(updateId, formData)
           .then(() => {
-            Notify({
+            TinyNotify({
               type: 'success',
               message: '应用更新成功',
               position: 'top-right',
@@ -266,7 +269,7 @@ export default {
             getApplicationList()
           })
           .catch((error) => {
-            Notify({
+            TinyNotify({
               type: 'error',
               message: error,
               position: 'top-right',
@@ -276,7 +279,7 @@ export default {
       } else {
         createApplication(formData)
           .then(() => {
-            Notify({
+            TinyNotify({
               type: 'success',
               message: '应用创建成功',
               position: 'top-right',
@@ -285,7 +288,7 @@ export default {
             getApplicationList()
           })
           .catch((error) => {
-            Notify({
+            TinyNotify({
               type: 'error',
               message: error,
               position: 'top-right',
@@ -455,6 +458,9 @@ export default {
   margin-bottom: 12px;
   max-height: calc(100% - 80px);
   overflow: auto;
+  .empty-wrap {
+    width: 100%;
+  }
 }
 .options {
   .option {

packages/design-core/src/template/src/template/TemplateCenter.vue

@@ -82,6 +82,7 @@
             </div>
           </div>
         </template>
+        <search-empty :isShow="!templateList.length" />
       </div>
       <tiny-pager
         v-if="state.total > state.pageSize"
@@ -109,6 +110,7 @@
 import { ref, reactive, onMounted } from 'vue'
 import { Pager, Search, Notify } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
+import { SearchEmpty } from '@opentiny/tiny-engine-common'
 import TemplateDetail from './TemplateDetail.vue'
 import { fetchBusinessCategoryByGroup, fetchTemplateList } from '../js/http'
 
@@ -117,7 +119,8 @@ export default {
     TemplateDetail,
     TinyPager: Pager,
     TinySearch: Search,
-    Notify,
+    TinyNotify: Notify,
+    SearchEmpty,
     TinyIconSearch: iconSearch()
   },
 
@@ -136,7 +139,7 @@ export default {
       searchValue: '',
       scene: null,
       industry: null,
-      framework: 'Vue',
+      framework: '',
       total: 0,
       currentPage: 1,
       pageSize: 10,
@@ -150,7 +153,7 @@ export default {
           tagList.industry = res[1] || []
         })
         .catch((error) => {
-          Notify({
+          TinyNotify({
             type: 'error',
             message: error,
             position: 'top-right',
@@ -174,7 +177,7 @@ export default {
           state.total = res.total
         })
         .catch((error) => {
-          Notify({
+          TinyNotify({
             type: 'error',
             message: error,
             position: 'top-right',
@@ -274,6 +277,9 @@ export default {
       margin-bottom: 12px;
       overflow: auto;
       max-height: calc(100% - 80px);
+      .empty-wrap {
+        width: 100%;
+      }
       .item {
         width: 300px;
         border-radius: 8px;