feat: add Categories

src/graphql/fragments/app.ts

@@ -34,11 +34,15 @@ export const MenuItems = {
         icon
         layer
         activate
+        description
+        documentLink
         subItems {
           title
           icon
           layer
           activate
+          description
+          documentLink
         }
       }
     `,

src/locales/lang/en.ts

@@ -408,5 +408,6 @@ const msg = {
   marketplace: "Marketplace",
   menus: "Menus",
   saveReload: "Save and reload the page",
+  document: "Document",
 };
 export default msg;

src/locales/lang/es.ts

@@ -407,5 +407,6 @@ const msg = {
   marketplace: "Marketplace",
   menus: "Menus",
   saveReload: "Save and reload the page",
+  document: "Document",
 };
 export default msg;

src/locales/lang/zh.ts

@@ -405,5 +405,6 @@ const msg = {
   marketplace: "市场",
   menusManagement: "菜单",
   saveReload: "保存并重新加载页面",
+  document: "文档",
 };
 export default msg;

src/router/marketplace.ts

@@ -32,7 +32,7 @@ export const routesMarketplace: Array<RouteRecordRaw> = [
         path: "/marketplace/menus",
         name: "MenusManagement",
         meta: {
-          title: "Menus",
+          title: "Categories",
         },
         component: () => import("@/views/marketplace/Menus.vue"),
       },

src/types/components.d.ts

@@ -7,35 +7,24 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     DateCalendar: typeof import('./../components/DateCalendar.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCard: typeof import('element-plus/es')['ElCard']
-    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es')['ElTree']
     Graph: typeof import('./../components/Graph.vue')['default']
     Icon: typeof import('./../components/Icon.vue')['default']
     Loading: typeof import('element-plus/es')['ElLoadingDirective']

src/views/marketplace/Menus.vue

@@ -14,23 +14,49 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="menus flex-v">
-    <div class="tree-body">
+    <div class="category-body flex-h">
-      <el-tree ref="treeRef" :data="appStore.activateMenus" node-key="name" default-expand-all :props="defaultProps" />
+      <div class="mr-20 mt-10 flex-h category">
+        <el-card
+          class="item"
+          v-for="(menu, index) in appStore.activateMenus"
+          :key="index"
+          @click="handleItems(menu)"
+          :class="currentItems.name === menu.name ? 'active' : ''"
+        >
+          <div class="title"> {{ menu.title }}</div>
+          <div class="mt-10"> {{ menu.description }} </div>
+          <el-link :href="menu.documentLink" target="_blank" class="link">
+            <el-button class="mt-10" size="small" type="primary"> {{ t("document") }} </el-button>
+          </el-link>
+        </el-card>
+      </div>
+      <div class="mt-10 cards">
+        <el-card shadow="hover" v-for="(item, index) in currentItems.subItems || []" :key="index" class="card">
+          <div class="title"> {{ item.title }}</div>
+          <div class="mt-10"> {{ item.description }} </div>
+          <el-link :href="item.documentLink" target="_blank" class="link">
+            <el-button class="mt-10" size="small" type="primary"> {{ t("document") }} </el-button>
+          </el-link>
+        </el-card>
+      </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
   import { ref } from "vue";
+  import { useI18n } from "vue-i18n";
   import { useAppStoreWithOut } from "@/store/modules/app";
+  import type { MenuOptions } from "@/types/app";
 
+  const { t } = useI18n();
   const appStore = useAppStoreWithOut();
-  const treeRef = ref<InstanceType<any>>();
+  const currentItems = ref<MenuOptions>(appStore.activateMenus[0]);
-  const defaultProps = {
-    children: "subItems",
-    label: "title",
-  };
 
-  appStore.setPageTitle("Menus");
+  function handleItems(item: MenuOptions) {
+    currentItems.value = item;
+  }
+
+  appStore.setPageTitle("Categories");
 </script>
 <style lang="scss" scoped>
   .menus {
@@ -40,11 +66,48 @@ limitations under the License. -->
     padding: 10px;
   }
 
-  .tree-body {
+  .category-body {
-    padding-left: 30px;
+    padding-left: 20px 30px;
-    padding-top: 20px;
     width: 100%;
     height: 100%;
-    background-color: #fff;
+    overflow: auto;
+    justify-content: space-between;
+  }
+
+  .title {
+    font-weight: bold;
+    font-size: 14px;
+  }
+
+  .card {
+    margin-bottom: 30px;
+    cursor: pointer;
+    width: 380px;
+  }
+
+  .cards {
+    min-width: 400px;
+  }
+
+  .item {
+    margin-bottom: 20px;
+    margin-right: 10px;
+    width: 300px;
+    cursor: pointer;
+  }
+
+  .category {
+    flex-wrap: wrap;
+    border-right: 1px solid #ddd;
+    align-content: flex-start;
+  }
+
+  .link {
+    float: right;
+    margin-bottom: 20px;
+  }
+
+  .active {
+    border: 1px solid $active-color;
   }
 </style>