feat: save

packages/backend/src/modules/menu/dto.ts

@@ -69,6 +69,11 @@ export class CreateMenuDto {
   @IsNumber()
   @IsOptional()
   styleType?: number;
+
+  @ApiProperty({ nullable: true, required: false, default: '' })
+  @IsString()
+  @IsOptional()
+  description?: string;
 }
 
 export class GetMenuDto {

packages/backend/src/modules/menu/menu.entity.ts

@@ -25,10 +25,13 @@ export class Menu {
 
   @Column({ default: true })
   enable: boolean;
-  
+
   @Column({ default: 0 })
   styleType: number;
 
+  @Column({ default: '' })
+  description: string;
+
   @Column({ default: 0 })
   level: number;
 

packages/frontend/src/utils/enum.js

@@ -9,11 +9,11 @@ export const styleEnum = [
   },
   {
     value: 2,
-    label: '二宫格',
+    label: '二宫格多列图文',
   },
   {
     value: 3,
-    label: '二宫格图文',
+    label: '三宫格多列图文',
   },
   {
     value: 4,

packages/frontend/src/views/menu/index.vue

@@ -2,7 +2,7 @@
   <CommonPage>
     <template #action>
       <NButton type="primary" @click="handleAddMenu">
-        <i class="i-material-symbols:add mr-4 text-18" />
+        <i class="i-material-symbols:add mr-4 text-18"/>
         新增菜单
       </NButton>
     </template>
@@ -18,7 +18,8 @@
                   <n-card :bordered="false" size="small">
                     <template #cover>
                       <!-- <div style="width: 100%;height: 50px;overflow: hidden;"> -->
-                      <n-image preview-disabled :src="child.cover" object-fit="scale-down" style="width: 100%;height: 50px;overflow: hidden;" />
+                      <n-image preview-disabled :src="child.cover" object-fit="scale-down"
+                               style="width: 100%;height: 50px;overflow: hidden;"/>
                       <!-- </div> -->
                     </template>
                     <div class="text-center text-12">
@@ -40,7 +41,7 @@
               @select="(key) => handleSelect(key, item)"
             >
               <n-button text>
-                <i class="i-material-symbols:more-horiz text-24" />
+                <i class="i-material-symbols:more-horiz text-24"/>
               </n-button>
             </n-dropdown>
           </template>
@@ -57,10 +58,19 @@
             trigger: ['input', 'blur'],
           }"
         >
-          <n-input v-model:value="modalForm.title" />
+          <n-input v-model:value="modalForm.title"/>
         </n-form-item>
 
         <n-form-item
+          label="描述" path="description" :rule="{
+            required: false,
+            message: '请输入描述',
+            trigger: ['input', 'blur'],
+          }"
+        >
+          <n-input v-model:value="modalForm.description" />
+        </n-form-item>
+        <n-form-item
           label="样式类型" path="styleType" :rule="{
             required: true,
             type: 'number',
@@ -74,7 +84,7 @@
         </n-form-item>
 
         <n-form-item label="备注" path="remark">
-          <n-input v-model:value="modalForm.remark" />
+          <n-input v-model:value="modalForm.remark"/>
         </n-form-item>
         <n-form-item label="是否显示" path="isPublish">
           <NSwitch v-model:value="modalForm.isPublish">
@@ -102,32 +112,32 @@
 </template>
 
 <script setup>
-import { MeModal } from '@/components'
-import { useCrud } from '@/composables'
-import { useUserStore } from '@/store/index.js'
-import { styleEnum } from '@/utils/enum.js'
-import { onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import {MeModal} from '@/components'
+import {useCrud} from '@/composables'
+import {useUserStore} from '@/store/index.js'
+import {styleEnum} from '@/utils/enum.js'
+import {onMounted} from 'vue'
+import {useRouter} from 'vue-router'
 import MenuApi from './api.js'
 
 const router = useRouter()
 const topMenu = ref([])
-const { userId } = useUserStore()
+const {userId} = useUserStore()
 const $table = ref(null)
 
 console.log('styleEnum', styleEnum)
 /** QueryBar筛选参数（可选） */
 const queryItems = ref({})
 
-const { modalRef, modalFormRef, modalAction, modalForm, handleAdd, handleDelete, handleEdit }
+const {modalRef, modalFormRef, modalAction, modalForm, handleAdd, handleDelete, handleEdit}
   = useCrud({
-    name: '菜单',
-    doCreate: MenuApi.create,
-    doDelete: MenuApi.delete,
-    doUpdate: MenuApi.update,
-    initForm: { enable: true, isPublish: true },
-    refresh: (_, keepCurrentPage) => $table.value?.handleSearch(keepCurrentPage),
-  })
+  name: '菜单',
+  doCreate: MenuApi.create,
+  doDelete: MenuApi.delete,
+  doUpdate: MenuApi.update,
+  initForm: {enable: true, isPublish: true},
+  refresh: (_, keepCurrentPage) => $table.value?.handleSearch(keepCurrentPage),
+})
 onMounted(() => {
   $table.value?.handleSearch()
   getTopMenuList()
@@ -149,8 +159,9 @@ const options = [
     key: 'delete',
   },
 ]
+
 function handleSelect(key, item) {
-  const { id } = item
+  const {id} = item
   switch (key) {
     case 'edit':
       handleTopMenuEdit(id)
@@ -168,14 +179,16 @@ async function handleTopMenuDelete(id) {
     getTopMenuList()
   }
 }
+
 async function handleTopMenuEdit(id) {
   console.log('id', id)
   router.push(`/menu/list/${id}`)
 }
 
 function getTopMenuList() {
-  MenuApi.getLevel(0).then(({ data = [] }) => (topMenu.value = data))
+  MenuApi.getLevel(0).then(({data = []}) => (topMenu.value = data))
 }
+
 function handleAddMenu() {
   handleAdd(null, null, () => {
     getTopMenuList()

packages/frontend/src/views/menu/list.vue

@@ -39,6 +39,16 @@
         >
           <n-input v-model:value="modalForm.title" />
         </n-form-item>
+
+        <n-form-item
+          label="描述" path="description" :rule="{
+            required: false,
+            message: '请输入描述',
+            trigger: ['input', 'blur'],
+          }"
+        >
+          <n-input v-model:value="modalForm.description" />
+        </n-form-item>
         <n-form-item v-if="modalForm.level !== 0" label="封面" path="cover">
           <n-upload
             :multiple="false"
@@ -339,7 +349,8 @@ function handleCoverRemove() {
 function handleSubAdd() {
   modalForm.value.level = 1
   modalForm.value.cover = ''
-  handleAdd({ level: 1 })
+  previewFileList.value = []
+  handleAdd({ level: 1, cover: '' })
 }
 
 function handleTopMenuEdit() {

packages/web/src/api/menu.ts

@@ -8,5 +8,6 @@ export type MenuItem = {
   children: MenuItem[]
   grid: number
   styleType: number
+  description: string
 }
 export const getMenuList = (): Promise<ResultData<MenuItem[]>> => request.get('web/menu')

packages/web/src/pages/index.vue

@@ -9,7 +9,7 @@
             <n-gi v-for="child of item.children" :key="child.id">
               <div
                 class="show-item b-rd-3xl relative"
-                :class="{ [`grid-${item.grid}`]: true }"
+                :class="{ [`style-${item.styleType}`]: true }"
                 :style="{ backgroundImage: `url(${child.cover})` }"
               >
                 <div
@@ -52,6 +52,37 @@
             ...
           </swiper>
         </template>
+
+        <template v-if="item.styleType === 2">
+          <n-grid x-gap="100" y-gap="100" :cols="2">
+            <n-gi v-for="child of item.children" :key="child.id">
+              <div
+                :class="{ [`style-${item.styleType}`]: true }"
+                class="show-item b-rd-3xl relative w-full h-full"
+              >
+                <img
+                  :src="child.cover"
+                  alt=""
+                  class="absolute w-[128px] h-[128px] left-0 top-[-40px]"
+                />
+
+                <div class="pl-[128px] w-[calc(100%-128px)] overflow-hidden">
+                  <div
+                    class="font-size-[20px] whitespace-nowrap text-ellipsis font-bold mt-[25px] w-[calc(100%-20px)] overflow-hidden"
+                  >
+                    {{ child.title }}
+                  </div>
+
+                  <div
+                    class="text-size-base whitespace-nowrap text-ellipsis  w-[calc(100%-20px)] overflow-hidden color-[#909090]"
+                  >
+                    {{child.description}}
+                  </div>
+                </div>
+              </div>
+            </n-gi>
+          </n-grid>
+        </template>
       </template>
     </div>
   </div>
@@ -91,27 +122,29 @@ const onSlideChange = () => {
 .trans-white-50 {
   background: rgba(255, 255, 255, 0.5);
 }
+
 .cover {
   background-repeat: no-repeat;
   background-position: center top;
   background-size: cover;
 }
+
 .show-item {
   cursor: pointer;
   background-repeat: no-repeat;
   background-position: center bottom;
   background-size: cover;
 
-
-
-  &.grid-2 {
+  &.style-0 {
     width: 614px;
     height: 346px;
   }
 
-  &.grid-4 {
-    width: 300px;
-    height: 400px;
+  &.style-2 {
+    width: 610px;
+    height: 104px;
+    background: #f5f9ff;
+    border-radius: 10px 10px 10px 10px;
   }
 }
 </style>