admin/apps/wisdom-legacy/src/views/system/modules/MenuEdit.vue

<script setup lang="ts">
import { computed } from 'vue';

import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';

import { useEditShell } from '#/adapter/shell';

import { menuForm } from '../menu.data';

const { Form, Shell } = useEditShell(menuForm);

const breakpoints = useBreakpoints(breakpointsTailwind);
const layout = computed(() =>
  breakpoints.greaterOrEqual('md').value ? 'horizontal' : 'vertical',
);
</script>

<template>
  <Shell>
    <Form class="mx-4" :layout />
  </Shell>
</template>