feat：添加组件实例

package.json

@@ -15,6 +15,7 @@
     "axios": "^0.21.4",
     "dayjs": "^1.10.7",
     "lodash-es": "^4.17.21",
+    "md-editor-v3": "^1.10.2",
     "mockjs": "^1.1.0",
     "pinia": "^2.0.11",
     "vue": "^3.2.30",
@@ -38,8 +39,8 @@
     "prettier": "^2.5.1",
     "sass": "^1.38.1",
     "unocss": "^0.16.4",
-    "vite": "^2.8.0",
     "unplugin-vue-components": "^0.17.18",
+    "vite": "^2.8.0",
     "vite-plugin-html": "^2.1.1",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-vue-setup-extend": "^0.3.0"

src/api/post/index.js

@@ -0,0 +1,39 @@
+import { defAxios } from '@/utils/http'
+
+export function getPosts(data = {}) {
+  return defAxios({
+    url: '/posts',
+    method: 'get',
+    data,
+  })
+}
+
+export function getPostById({ id }) {
+  return defAxios({
+    url: `/post/${id}`,
+    method: 'get',
+  })
+}
+
+export function savePost(id, data = {}) {
+  if (id) {
+    return defAxios({
+      url: `/post/${id}`,
+      method: 'put',
+      data,
+    })
+  }
+
+  return defAxios({
+    url: '/post',
+    method: 'post',
+    data,
+  })
+}
+
+export function deletePost(id) {
+  return defAxios({
+    url: `/post/${id}`,
+    method: 'delete',
+  })
+}

src/router/routes/modules/example.js

@@ -0,0 +1,46 @@
+import Layout from '@/layout/index.vue'
+
+export default [
+  {
+    name: 'EXAMPLE',
+    path: '/example',
+    component: Layout,
+    redirect: '/example/table',
+    meta: {
+      title: '组件示例',
+      role: ['admin'],
+    },
+    children: [
+      {
+        name: 'EXAMPLE-TABLE',
+        path: 'table',
+        component: () => import('@/views/examples/table/index.vue'),
+        redirect: '/example/table/post',
+        meta: {
+          title: '表格',
+          role: ['admin'],
+        },
+        children: [
+          {
+            name: 'POST-LIST',
+            path: 'post',
+            component: () => import('@/views/examples/table/post/index.vue'),
+            meta: {
+              title: '文章列表',
+              role: ['admin'],
+            },
+          },
+          {
+            name: 'POST-CREATE',
+            path: 'post-create',
+            component: () => import('@/views/examples/table/post/post-create.vue'),
+            meta: {
+              title: '创建文章',
+              role: ['admin'],
+            },
+          },
+        ],
+      },
+    ],
+  },
+]

src/router/routes/modules/user.js

@@ -1,34 +0,0 @@
-import Layout from '@/layout/index.vue'
-
-export default [
-  {
-    name: 'USER_MANAGER',
-    path: '/user',
-    component: Layout,
-    redirect: '/user/management',
-    meta: {
-      title: '用户中心',
-      role: ['admin'],
-    },
-    children: [
-      {
-        name: 'USER',
-        path: 'management',
-        component: () => import('@/views/user/index.vue'),
-        meta: {
-          title: '用户管理',
-          role: ['admin'],
-        },
-      },
-      {
-        name: 'PERMISSION',
-        path: 'permission',
-        component: () => import('@/views/user/UserPermission.vue'),
-        meta: {
-          title: '权限管理',
-          role: ['admin'],
-        },
-      },
-    ],
-  },
-]

src/views/examples/table/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>

src/views/examples/table/post/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <div class="action-btns">
+      <n-button size="small" type="primary" @click="handleCreate">新建文章</n-button>
+    </div>
+    <n-data-table
+      mt-20
+      :loading="loading"
+      :scroll-x="1600"
+      :data="tableData"
+      :columns="columns"
+      :pagination="pagination"
+      :row-key="(row) => row.id"
+      max-height="calc(100vh - 260px)"
+      @update:checked-row-keys="handleCheck"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onBeforeMount } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { getTableData, createColumns } from './post-table'
+
+const router = useRouter()
+
+// 静态变量
+const columns = createColumns({
+  handleDelete,
+  handleRecommend,
+  handlePublish,
+})
+
+// refs
+let tableData = ref([])
+let pagination = ref({ pageSize: 10 })
+let loading = ref(false)
+
+// 钩子函数
+onBeforeMount(() => {
+  initTableData()
+})
+
+// fns
+async function initTableData() {
+  loading.value = true
+  tableData.value = await getTableData()
+  loading.value = false
+}
+
+function handleCreate() {
+  router.push('/example/table/post-create')
+}
+
+function handleDelete(row) {
+  if (row && row.id) {
+    $dialog.confirm({
+      content: '确定删除？',
+      confirm() {
+        $message.success('删除成功')
+        initTableData()
+      },
+      cancel() {
+        $message.success('已取消')
+      },
+    })
+  }
+}
+
+async function handleRecommend(row) {
+  if (row && row.id) {
+    row.recommending = true
+    setTimeout(() => {
+      $message.success(row.isRecommend ? '已取消推荐' : '已推荐')
+      row.recommending = false
+    }, 800)
+  }
+}
+
+async function handlePublish(row) {
+  if (row && row.id) {
+    row.publishing = true
+    setTimeout(() => {
+      $message.success(row.isPublish ? '已取消推荐' : '已推荐')
+      row.publishing = false
+    }, 800)
+  }
+}
+
+function handleCheck(rowKeys) {}
+</script>
+
+<style lang="scss" scoped>
+.action-btns {
+  display: flex;
+}
+</style>

src/views/examples/table/post/post-create.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <div class="header">
+      <input v-model="post.title" type="text" placeholder="输入文章标题..." class="title" />
+      <n-button type="primary" style="width: 80px" :loading="btnLoading" @click="handleSavePost">保存</n-button>
+    </div>
+    <md-editor v-model="post.content" style="height: calc(100vh - 180px)" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import MdEditor from 'md-editor-v3'
+import 'md-editor-v3/lib/style.css'
+
+const router = useRouter()
+
+// refs
+let post = ref({})
+let btnLoading = ref(false)
+
+function handleSavePost(e) {
+  btnLoading.value = true
+  $message.loading('正在保存...')
+  setTimeout(() => {
+    $message.success('保存成功')
+    btnLoading.value = false
+    router.push('/example/table/post')
+  }, 2000)
+}
+</script>
+
+<style lang="scss">
+.md-preview {
+  ul,
+  ol {
+    list-style: revert;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.header {
+  background-color: #fff;
+  height: 60px;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  .title {
+    flex: 1;
+    padding: 15px 0;
+    margin-right: 20px;
+    font-size: 20px;
+    font-weight: bold;
+    color: $primaryColor;
+  }
+}
+</style>

src/views/examples/table/post/post-table.js

@@ -0,0 +1,99 @@
+import { h } from 'vue'
+import { NButton, NSwitch } from 'naive-ui'
+import { getPosts } from '@/api/post'
+import { formatDateTime } from '@/utils'
+
+export async function getTableData() {
+  try {
+    const res = await getPosts()
+    if (res.code === 0) {
+      return res.data
+    }
+    console.warn(res.message)
+    return []
+  } catch (error) {
+    console.error(error)
+    return []
+  }
+}
+
+export function createColumns({ handleDelete, handleRecommend, handlePublish }) {
+  return [
+    { type: 'selection' },
+    { title: '标题', key: 'title', width: 150 },
+    { title: '分类', key: 'category', width: 80 },
+    {
+      title: '描述',
+      key: 'description',
+      width: 200,
+    },
+    { title: '创建人', key: 'author', width: 80 },
+    {
+      title: '创建时间',
+      key: 'createDate',
+      width: 150,
+      render(row) {
+        return h('span', formatDateTime(row['createDate']))
+      },
+    },
+    {
+      title: '最后更新时间',
+      key: 'updateDate',
+      width: 150,
+      render(row) {
+        return h('span', formatDateTime(row['updateDate']))
+      },
+    },
+    {
+      title: '推荐',
+      key: 'isRecommend',
+      width: 100,
+      align: 'center',
+      fixed: 'right',
+      render(row) {
+        return h(NSwitch, {
+          size: 'small',
+          defaultValue: row['isRecommend'],
+          loading: !!row.recommending,
+          onUpdateValue: () => handleRecommend(row),
+        })
+      },
+    },
+    {
+      title: '发布',
+      key: 'isPublish',
+      width: 100,
+      align: 'center',
+      fixed: 'right',
+      render(row) {
+        return h(NSwitch, {
+          size: 'small',
+          defaultValue: row['isPublish'],
+          loading: !!row.publishing,
+          onUpdateValue: () => handlePublish(row),
+        })
+      },
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      width: 120,
+      align: 'center',
+      fixed: 'right',
+      render(row) {
+        return [
+          h(
+            NButton,
+            {
+              size: 'small',
+              type: 'error',
+              style: 'margin-left: 15px;',
+              onClick: () => handleDelete(row),
+            },
+            { default: () => '删除' }
+          ),
+        ]
+      },
+    },
+  ]
+}