feat: Add example-page demo

package.json

@@ -37,6 +37,7 @@
     "element-plus": "2.0.2",
     "intro.js": "^5.0.0",
     "lodash-es": "^4.17.21",
+    "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.11",

src/components/TabMenu/src/helper.ts

@@ -27,7 +27,7 @@ export const filterMenusPath = (
   for (const v of routes) {
     let data: Nullable<AppRouteRecordRaw> = null
     const meta = (v.meta ?? {}) as RouteMeta
-    if (!meta.hidden) {
+    if (!meta.hidden || meta.showMainRoute) {
       const allParentPaht = getAllParentPath<AppRouteRecordRaw>(allRoutes, v.path)
 
       const fullPath = isUrl(v.path) ? v.path : allParentPaht.join('/')

src/hooks/web/useEmitt.ts

@@ -0,0 +1,23 @@
+import mitt from 'mitt'
+import { onBeforeUnmount } from 'vue'
+
+interface Option {
+  name: string // 事件名称
+  callback: Fn // 回调
+}
+
+const emitter = mitt()
+
+export const useEmitt = (option?: Option) => {
+  if (option) {
+    emitter.on(option.name, option.callback)
+
+    onBeforeUnmount(() => {
+      emitter.off(option.name)
+    })
+  }
+
+  return {
+    emitter
+  }
+}

src/locales/en.ts

@@ -115,7 +115,11 @@ export default {
     imageViewer: 'Image viewer',
     descriptions: 'Descriptions',
     example: 'Example',
-    exampleDialog: 'Example dialog'
+    exampleDialog: 'Example dialog',
+    examplePage: 'Example page',
+    exampleAdd: 'Example page - add',
+    exampleEdit: 'Example page - edit',
+    exampleDetail: 'Example page - detail'
   },
   analysis: {
     newUser: 'New user',

src/locales/zh-CN.ts

@@ -115,7 +115,11 @@ export default {
     imageViewer: '图片预览',
     descriptions: '描述',
     example: '综合示例',
-    exampleDialog: '综合示例 - 弹窗'
+    exampleDialog: '综合示例 - 弹窗',
+    examplePage: '综合示例 - 页面',
+    exampleAdd: '综合示例 - 新增',
+    exampleEdit: '综合示例 - 编辑',
+    exampleDetail: '综合示例 - 详情'
   },
   analysis: {
     newUser: '新增用户',

src/router/index.ts

@@ -352,6 +352,53 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: t('router.exampleDialog')
         }
+      },
+      {
+        path: 'example-page',
+        component: () => import('@/views/Example/Page/ExamplePage.vue'),
+        name: 'ExamplePage',
+        meta: {
+          title: t('router.examplePage')
+        }
+      },
+      {
+        path: 'example-add',
+        component: () => import('@/views/Example/Page/ExampleAdd.vue'),
+        name: 'ExampleAdd',
+        meta: {
+          title: t('router.exampleAdd'),
+          noTagsView: true,
+          noCache: true,
+          hidden: true,
+          showMainRoute: true,
+          activeMenu: '/example/example-page'
+        }
+      },
+      {
+        path: 'example-edit',
+        component: () => import('@/views/Example/Page/ExampleEdit.vue'),
+        name: 'ExampleEdit',
+        meta: {
+          title: t('router.exampleEdit'),
+          noTagsView: true,
+          noCache: true,
+          hidden: true,
+          showMainRoute: true,
+          activeMenu: '/example/example-page'
+        }
+      },
+      {
+        path: 'example-detail',
+        component: () => import('@/views/Example/Page/ExampleDetail.vue'),
+        name: 'ExampleDetail',
+        meta: {
+          title: t('router.exampleDetail'),
+          noTagsView: true,
+          noCache: true,
+          hidden: true,
+          showMainRoute: true,
+          activeMenu: '/example/example-page'
+        }
       }
     ]
   }

src/views/Example/Dialog/components/Detail.vue

@@ -1,49 +1,19 @@
 <script setup lang="ts">
-import { getTableDetApi } from '@/api/table'
-import { PropType, watch, ref, reactive } from 'vue'
+import { PropType, reactive } from 'vue'
 import type { TableData } from '@/api/table/types'
 import { Descriptions } from '@/components/Descriptions'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElTag } from 'element-plus'
 
 const { t } = useI18n()
 
-const props = defineProps({
+defineProps({
   currentRow: {
     type: Object as PropType<Nullable<TableData>>,
     default: () => null
   }
 })
 
-const currentRow = ref<Nullable<TableData>>(null)
-
-const loading = ref(false)
-
-const getTableDet = async () => {
-  loading.value = true
-  const res = await getTableDetApi({
-    params: {
-      id: props.currentRow?.id as string
-    }
-  }).finally(() => {
-    loading.value = false
-  })
-  if (res) {
-    currentRow.value = res.data
-  }
-}
-
-watch(
-  () => props.currentRow,
-  () => {
-    getTableDet()
-  },
-  {
-    deep: true,
-    immediate: true
-  }
-)
-
 const schema = reactive<DescriptionsSchema[]>([
   {
     field: 'title',
@@ -75,7 +45,7 @@ const schema = reactive<DescriptionsSchema[]>([
 </script>
 
 <template>
-  <Descriptions v-loading="loading" :schema="schema" :data="currentRow || {}">
+  <Descriptions :schema="schema" :data="currentRow || {}">
     <template #importance="{ row }: { row: TableData }">
       <ElTag :type="row.importance === 1 ? 'success' : row.importance === 2 ? 'warning' : 'danger'">
         {{

src/views/Example/Page/ExampleAdd.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import Write from './components/Write.vue'
+import { ContentWrap } from '@/components/ContentWrap'
+import { ref, unref } from 'vue'
+import { ElButton } from 'element-plus'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useRouter } from 'vue-router'
+import { saveTableApi } from '@/api/table'
+import { TableData } from '@/api/table/types'
+import { useEmitt } from '@/hooks/web/useEmitt'
+
+const { emitter } = useEmitt()
+
+const { push } = useRouter()
+
+const { t } = useI18n()
+
+const writeRef = ref<ComponentRef<typeof Write>>()
+
+const loading = ref(false)
+
+const save = async () => {
+  const write = unref(writeRef)
+  const validate = await write?.elFormRef?.validate()?.catch(() => {})
+  if (validate) {
+    loading.value = true
+    const data = (await write?.getFormData()) as TableData
+    const res = await saveTableApi({
+      data
+    })
+      .catch(() => {})
+      .finally(() => {
+        loading.value = false
+      })
+    if (res) {
+      emitter.emit('getList', 'add')
+      push('/example/example-page')
+    }
+  }
+}
+</script>
+
+<template>
+  <ContentWrap :title="t('exampleDemo.add')">
+    <Write ref="writeRef" />
+
+    <div class="text-center">
+      <ElButton type="primary" :loading="loading" @click="save">
+        {{ t('exampleDemo.save') }}
+      </ElButton>
+      <ElButton @click="push('/example/example-page')">{{ t('dialogDemo.close') }}</ElButton>
+    </div>
+  </ContentWrap>
+</template>

src/views/Example/Page/ExampleDetail.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import Detail from './components/Detail.vue'
+import { ContentWrap } from '@/components/ContentWrap'
+import { ref } from 'vue'
+import { ElButton } from 'element-plus'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useRouter, useRoute } from 'vue-router'
+import { getTableDetApi } from '@/api/table'
+import { TableData } from '@/api/table/types'
+
+const { push } = useRouter()
+
+const { query } = useRoute()
+
+const { t } = useI18n()
+
+const currentRow = ref<Nullable<TableData>>(null)
+
+const getTableDet = async () => {
+  const res = await getTableDetApi({
+    params: {
+      id: query.id as string
+    }
+  })
+  if (res) {
+    currentRow.value = res.data
+  }
+}
+
+getTableDet()
+</script>
+
+<template>
+  <ContentWrap :title="t('exampleDemo.detail')">
+    <Detail :current-row="currentRow" />
+
+    <div class="text-center">
+      <ElButton @click="push('/example/example-page')">{{ t('dialogDemo.close') }}</ElButton>
+    </div>
+  </ContentWrap>
+</template>

src/views/Example/Page/ExampleEdit.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import Write from './components/Write.vue'
+import { ContentWrap } from '@/components/ContentWrap'
+import { ref, unref } from 'vue'
+import { ElButton } from 'element-plus'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useRouter, useRoute } from 'vue-router'
+import { saveTableApi, getTableDetApi } from '@/api/table'
+import { TableData } from '@/api/table/types'
+import { useEmitt } from '@/hooks/web/useEmitt'
+
+const { emitter } = useEmitt()
+
+const { push } = useRouter()
+
+const { query } = useRoute()
+
+const { t } = useI18n()
+
+const currentRow = ref<Nullable<TableData>>(null)
+
+const getTableDet = async () => {
+  const res = await getTableDetApi({
+    params: {
+      id: query.id as string
+    }
+  })
+  if (res) {
+    currentRow.value = res.data
+  }
+}
+
+getTableDet()
+
+const writeRef = ref<ComponentRef<typeof Write>>()
+
+const loading = ref(false)
+
+const save = async () => {
+  const write = unref(writeRef)
+  const validate = await write?.elFormRef?.validate()?.catch(() => {})
+  if (validate) {
+    loading.value = true
+    const data = (await write?.getFormData()) as TableData
+    const res = await saveTableApi({
+      data
+    })
+      .catch(() => {})
+      .finally(() => {
+        loading.value = false
+      })
+    if (res) {
+      emitter.emit('getList', 'edit')
+      push('/example/example-page')
+    }
+  }
+}
+</script>
+
+<template>
+  <ContentWrap :title="t('exampleDemo.edit')">
+    <Write ref="writeRef" :current-row="currentRow" />
+
+    <div class="text-center">
+      <ElButton type="primary" :loading="loading" @click="save">
+        {{ t('exampleDemo.save') }}
+      </ElButton>
+      <ElButton @click="push('/example/example-page')">{{ t('dialogDemo.close') }}</ElButton>
+    </div>
+  </ContentWrap>
+</template>