feat: save

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

@@ -6,7 +6,7 @@
           编辑
         </NButton>
         <NButton type="primary" @click="handleSubAdd()">
-          <i class="i-material-symbols:add mr-4 text-18"/>
+          <i class="i-material-symbols:add mr-4 text-18" />
           新增子菜单
         </NButton>
       </n-space>
@@ -15,7 +15,7 @@
     <MeCrud ref="$table" v-model:query-items="queryItems" :scroll-x="1200" :columns="columns" :get-data="api.read">
       <MeQueryItem label="标题" :label-width="50">
         <n-input v-model:value="queryItems.title" type="text" placeholder="请输入标题名" clearable>
-          <template #password-visible-icon/>
+          <template #password-visible-icon />
         </n-input>
       </MeQueryItem>
       <MeQueryItem label="状态" :label-width="50">
@@ -37,7 +37,7 @@
             trigger: ['input', 'blur'],
           }"
         >
-          <n-input v-model:value="modalForm.title"/>
+          <n-input v-model:value="modalForm.title" />
         </n-form-item>
 
         <n-form-item
@@ -47,7 +47,7 @@
             trigger: ['input', 'blur'],
           }"
         >
-          <n-input v-model:value="modalForm.description" type="textarea"/>
+          <n-input v-model:value="modalForm.description" type="textarea" />
         </n-form-item>
         <n-form-item v-if="modalForm.level !== 0" label="封面" path="cover">
           <n-upload
@@ -119,7 +119,7 @@
           v-if="modalForm.level === 0"
           label="一行显示数" path="grid"
         >
-          <n-input-number v-model:value="modalForm.grid" style="width:100%"/>
+          <n-input-number v-model:value="modalForm.grid" style="width:100%" />
         </n-form-item>
 
         <n-form-item
@@ -132,9 +132,25 @@
             trigger: ['blur', 'change'],
           }"
         >
-          <n-input-number v-model:value="modalForm.order"/>
+          <n-input-number v-model:value="modalForm.order" />
         </n-form-item>
 
+        <n-tabs type="line" animated>
+          <template v-for="(lang, index) in langs" :key="lang">
+            <n-tab-pane :name="lang" :tab="langLabel[lang]" :index="index">
+              {{ lang }}
+              <n-form-item
+                label="文章名称" path="title" :rule="{
+                  required: true,
+                  message: '请输入文章名称',
+                  trigger: ['input', 'blur'],
+                }"
+              >
+                <n-input v-model:value="modalForm.translations[index].title" />
+              </n-form-item>
+            </n-tab-pane>
+          </template>
+        </n-tabs>
         <n-form-item label="是否显示" path="isPublish">
           <NSwitch v-model:value="modalForm.isPublish">
             <template #checked>
@@ -161,14 +177,15 @@
 </template>
 
 <script setup>
-import {MeCrud, MeModal, MeQueryItem} from '@/components'
-import {CommonPage} from '@/components/index.js'
-import {useCrud} from '@/composables'
-import {useUserStore} from '@/store/index.js'
-import {formatDateTime} from '@/utils'
-import {styleEnum} from '@/utils/enum.js'
-import {NButton, NImage, NSwitch} from 'naive-ui'
-import {useRoute, useRouter} from 'vue-router'
+import { MeCrud, MeModal, MeQueryItem } from '@/components'
+import { CommonPage } from '@/components/index.js'
+import { useCrud } from '@/composables'
+import { useUserStore } from '@/store/index.js'
+import { formatDateTime } from '@/utils'
+import { styleEnum } from '@/utils/enum.js'
+import { initTranslations, langLabel, langs } from '@/utils/translations'
+import { NButton, NImage, NSwitch } from 'naive-ui'
+import { useRoute, useRouter } from 'vue-router'
 import articleApi from '../article/api'
 import categoryApi from '../category/api'
 import api from './api.js'
@@ -176,7 +193,7 @@ import api from './api.js'
 const $table = ref(null)
 
 const router = useRouter()
-const {userId} = useUserStore()
+const { userId } = useUserStore()
 
 const previewFileList = ref([])
 const showModal = ref(false)
@@ -194,18 +211,20 @@ const detail = ref({
 const queryItems = ref({
   parentId: route.params.id,
 })
-const {modalRef, modalFormRef, modalAction, modalForm, handleAdd, handleDelete, handleEdit}
+const { modalRef, modalFormRef, modalAction, modalForm, handleAdd, handleDelete, handleEdit }
   = useCrud({
-  name: '子菜单',
-  doCreate: api.create,
-  doDelete: api.delete,
-  doUpdate: api.update,
-  initForm: {enable: true, isPublish: true, order: 0},
-  refresh: (_, keepCurrentPage) => $table.value?.handleSearch(keepCurrentPage),
-})
+    name: '子菜单',
+    doCreate: api.create,
+    doDelete: api.delete,
+    doUpdate: api.update,
+    initForm: { enable: true, isPublish: true, order: 0 },
+    refresh: (_, keepCurrentPage) => $table.value?.handleSearch(keepCurrentPage),
+  })
+
+initTranslations(modalForm.value, ['title', 'remark'])
 
 async function getMenuDetail() {
-  const {data} = await api.getOne(route.params.id)
+  const { data } = await api.getOne(route.params.id)
   if (data) {
     console.log('data', data)
     detail.value = data
@@ -214,17 +233,17 @@ async function getMenuDetail() {
 }
 
 const columns = [
-  {title: '标题名', key: 'title', width: '200'},
-  {title: '分类', key: 'category.title'},
+  { title: '标题名', key: 'title', width: '200' },
+  { title: '分类', key: 'category.title' },
   {
     title: '封面图',
     key: 'cover',
     render: row => row.cover
       ? h(NImage, {
-        src: row.cover,
-        height: 60,
-        width: 80,
-      })
+          src: row.cover,
+          height: 60,
+          width: 80,
+        })
       : null,
   },
   {
@@ -271,7 +290,7 @@ const columns = [
           },
           {
             default: () => '编辑',
-            icon: () => h('i', {class: 'i-material-symbols:edit-outline text-14'}),
+            icon: () => h('i', { class: 'i-material-symbols:edit-outline text-14' }),
           },
         ),
 
@@ -286,7 +305,7 @@ const columns = [
           },
           {
             default: () => '删除',
-            icon: () => h('i', {class: 'i-material-symbols:delete-outline text-14'}),
+            icon: () => h('i', { class: 'i-material-symbols:delete-outline text-14' }),
           },
         ),
       ]
@@ -297,11 +316,12 @@ const columns = [
 async function handleEnable(row) {
   row.enableLoading = true
   try {
-    await api.update({id: row.id, enable: !row.enable})
+    await api.update({ id: row.id, enable: !row.enable })
     row.enableLoading = false
     $message.success('操作成功')
     $table.value?.handleSearch()
-  } catch (error) {
+  }
+  catch (error) {
     console.error(error)
     row.enableLoading = false
   }
@@ -320,7 +340,7 @@ onMounted(() => {
   getMenuDetail()
 })
 
-async function uploadCover({file}) {
+async function uploadCover({ file }) {
   const data = new FormData()
   data.append('file', file.file)
   const res = await api.uploadImage(data)
@@ -335,7 +355,7 @@ async function uploadCover({file}) {
 }
 
 function handlePreview(file) {
-  const {url} = file
+  const { url } = file
   previewImageUrl.value = url
   showModal.value = true
 }
@@ -352,7 +372,8 @@ async function handleFormEdit(data = {}) {
       status: 'finished',
       url: modalForm.value.cover,
     }]
-  } else {
+  }
+  else {
     previewFileList.value = []
   }
   handleEdit(data)
@@ -368,7 +389,7 @@ function handleSubAdd() {
   modalForm.value.level = 1
   modalForm.value.cover = ''
   previewFileList.value = []
-  handleAdd({level: 1, cover: ''})
+  handleAdd({ level: 1, cover: '' })
 }
 
 function handleTopMenuEdit() {
@@ -385,8 +406,8 @@ function handleTopMenuEdit() {
 }
 
 function getAllType() {
-  categoryApi.getAll().then(({data = []}) => (allCategory.value = data))
-  articleApi.getAll().then(({data = []}) => (allArticle.value = data.map(item => ({
+  categoryApi.getAll().then(({ data = [] }) => (allCategory.value = data))
+  articleApi.getAll().then(({ data = [] }) => (allArticle.value = data.map(item => ({
     label: item.title,
     value: +item.id,
   }))))