feat: 新增菜单管理页面

src/components/advanced/table-sider-layout.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
+
+defineOptions({
+  name: 'TableSiderLayout'
+});
+
+interface Props {
+  defaultExpanded?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  defaultExpanded: false
+});
+
+const time = new Date().getTime();
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isCollapse = breakpoints.smaller('lg');
+const title = defineModel<string>('title');
+</script>
+
+<template>
+  <NGrid
+    v-if="isCollapse"
+    class="min-h-500px flex-col-stretch gap-16px overflow-auto"
+    :x-gap="12"
+    :y-gap="12"
+    item-responsive
+    responsive="screen"
+  >
+    <NGridItem span="24 s:24 1034:10 m:8 l:7 xl:6 xxl:5">
+      <NCard
+        :bordered="false"
+        size="small"
+        class="sider-layout-card h-full card-wrapper"
+        content-class="sider-layout-card-content"
+      >
+        <NCollapse v-if="isCollapse" :default-expanded-names="defaultExpanded ? [`table-sider-layout${time}`] : []">
+          <NCollapseItem :title="title" :name="`table-sider-layout${time}`" display-directive="show">
+            <slot name="sider" />
+            <template #header>
+              <slot name="header">
+                <span>{{ title }}</span>
+              </slot>
+            </template>
+            <template #header-extra>
+              <slot name="header-extra" />
+            </template>
+          </NCollapseItem>
+        </NCollapse>
+      </NCard>
+    </NGridItem>
+    <NGridItem class="content" span="24 s:24 m:16 l:17 xl:18 xxl:19">
+      <slot />
+    </NGridItem>
+  </NGrid>
+  <NLayout v-else has-sider>
+    <NLayoutSider collapse-mode="transform" :collapsed-width="0" :width="320" show-trigger="bar">
+      <NCard
+        :bordered="false"
+        size="small"
+        class="sider-layout-card h-full card-wrapper"
+        content-class="sider-layout-card-content"
+      >
+        <slot name="sider" />
+        <template #header>
+          <slot name="header">
+            <span>{{ title }}</span>
+          </slot>
+        </template>
+        <template #header-extra>
+          <slot name="header-extra" />
+        </template>
+      </NCard>
+    </NLayoutSider>
+    <NLayoutContent content-class="bg-transparent">
+      <slot />
+    </NLayoutContent>
+  </NLayout>
+</template>
+
+<style scoped>
+.title {
+  font-weight: 500;
+  font-size: 16px;
+  transition: color 0.3s var(--n-bezier);
+  flex: 1;
+  min-width: 0;
+  color: var(--n-title-text-color);
+}
+
+.content {
+  min-height: calc(100vh - 196px - var(--calc-footer-height, 0px));
+}
+
+:deep(.n-collapse-item__header) {
+  padding-top: 0 !important;
+}
+
+:deep(.n-layout-content) {
+  background-color: transparent;
+  padding-left: 25px;
+}
+
+:deep(.n-layout-sider) {
+  background-color: transparent;
+}
+</style>

src/components/common/boolean-tag.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TagProps } from 'naive-ui';
+import { useAttrs } from 'vue';
+import { isNotNull } from '@/utils/common';
+
+defineOptions({
+  name: 'BooleanTag'
+});
+
+const value = defineModel<'0' | '1'>('value', { required: true });
+
+const tagMap: Record<'0' | '1', NaiveUI.ThemeColor> = {
+  0: 'success',
+  1: 'error'
+};
+
+const attrs: TagProps = useAttrs();
+</script>
+
+<template>
+  <NTag v-if="isNotNull(value)" :type="tagMap[value]" v-bind="attrs">{{ value === '0' ? '是' : '否' }}</NTag>
+</template>
+
+<style scoped></style>

src/components/common/status-tag.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { TagProps } from 'naive-ui';
+import { useAttrs } from 'vue';
+import { enableStatusRecord } from '@/constants/business';
+import { isNotNull } from '@/utils/common';
+
+defineOptions({
+  name: 'StatusTag'
+});
+
+interface Props {
+  [key: string]: any;
+}
+
+defineProps<Props>();
+
+const status = defineModel<Api.Common.EnableStatus>('value', { required: true });
+
+const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
+  '0': 'success',
+  '1': 'warning'
+};
+
+const attrs: TagProps = useAttrs();
+</script>
+
+<template>
+  <NTag v-if="isNotNull(status)" :type="tagMap[status]" v-bind="attrs">{{ enableStatusRecord[status] }}</NTag>
+</template>
+
+<style scoped></style>

src/components/custom/button-icon.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type { PopoverPlacement } from 'naive-ui';
+import type { ButtonProps, PopoverPlacement } from 'naive-ui';
 import { twMerge } from 'tailwind-merge';
+import { computed, useAttrs } from 'vue';
 
 defineOptions({
   name: 'ButtonIcon',
@@ -17,6 +18,8 @@ interface Props {
   /** Tooltip placement */
   tooltipPlacement?: PopoverPlacement;
   zIndex?: number;
+  quaternary?: boolean;
+  [key: string]: any;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -24,16 +27,23 @@ const props = withDefaults(defineProps<Props>(), {
   icon: '',
   tooltipContent: '',
   tooltipPlacement: 'bottom',
-  zIndex: 98
+  zIndex: 98,
+  quaternary: true
 });
 
 const DEFAULT_CLASS = 'h-[36px] text-icon';
+
+const attrs: ButtonProps = useAttrs();
+
+const quaternary = computed(() => {
+  return !(attrs.text || attrs.dashed || attrs.ghost) && props.quaternary;
+});
 </script>
 
 <template>
   <NTooltip :placement="tooltipPlacement" :z-index="zIndex" :disabled="!tooltipContent">
     <template #trigger>
-      <NButton quaternary :class="twMerge(DEFAULT_CLASS, props.class)" v-bind="$attrs">
+      <NButton :quaternary="quaternary" :class="twMerge(DEFAULT_CLASS, props.class)" :focusable="false" v-bind="attrs">
         <div class="flex-center gap-8px">
           <slot>
             <SvgIcon :icon="icon" />