refactor: routes and file

src/views/demo/base/dialog/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <CommonPage :show-header="false">
+    <n-button type="error" @click="handleDelete"> <icon-mi:delete mr-5 />删除</n-button>
+  </CommonPage>
+</template>
+
+<script setup name="TestDialog">
+const handleDelete = function () {
+  $dialog.confirm({
+    content: '确认删除？',
+    confirm() {
+      $message.success('删除成功')
+    },
+    cancel() {
+      $message.warning('已取消')
+    },
+  })
+}
+</script>

src/views/demo/base/message/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <CommonPage title="我是自定义Title">
+    <n-button type="primary" @click="handleLogin">
+      <icon-mdi:login mr-5 />
+      登陆
+    </n-button>
+  </CommonPage>
+</template>
+
+<script setup>
+function handleLogin() {
+  $message.loading('登陆中...')
+  setTimeout(() => {
+    $message.error('登陆失败')
+    $message.loading('正在尝试重新登陆...')
+    setTimeout(() => {
+      $message.success('登陆成功')
+    }, 2000)
+  }, 2000)
+}
+</script>

src/views/demo/base/route.js

@@ -0,0 +1,42 @@
+const Layout = () => import('@/layout/index.vue')
+
+export default {
+  name: 'Test',
+  path: '/base',
+  component: Layout,
+  redirect: '/base/unocss',
+  meta: {
+    title: '基础功能',
+    customIcon: 'logo',
+    order: 1,
+  },
+  children: [
+    {
+      name: 'Unocss',
+      path: 'unocss',
+      component: () => import('./unocss/index.vue'),
+      meta: {
+        title: '测试unocss',
+        icon: 'material-symbols:auto-awesome-outline-rounded',
+      },
+    },
+    {
+      name: 'Message',
+      path: 'message',
+      component: () => import('./message/index.vue'),
+      meta: {
+        title: '测试Message',
+        icon: 'material-symbols:auto-awesome-outline-rounded',
+      },
+    },
+    {
+      name: 'Dialog',
+      path: 'dialog',
+      component: () => import('./dialog/index.vue'),
+      meta: {
+        title: '测试Dialog',
+        icon: 'material-symbols:auto-awesome-outline-rounded',
+      },
+    },
+  ],
+}

src/views/demo/base/unocss/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <CommonPage show-footer>
+    <p>
+      文档：<a hover-decoration-underline c-blue href="https://uno.antfu.me/" target="_blank">https://uno.antfu.me/</a>
+    </p>
+    <p>
+      playground：
+      <a c-blue hover-decoration-underline href="https://unocss.antfu.me/play/" target="_blank">
+        https://unocss.antfu.me/play/
+      </a>
+    </p>
+
+    <div f-c-c mt-20 w-350 rounded-10 b-1 bc-ccc>
+      <div flex w-360 flex-wrap justify-around p-10>
+        <div w-50 h-50 b-1 rounded-5 f-c-c p-10 m-20>
+          <span w-6 h-6 rounded-3 bg-black></span>
+        </div>
+        <div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
+          <span w-6 h-6 rounded-3 bg-black></span>
+          <span w-6 h-6 rounded-3 bg-black self-end></span>
+        </div>
+        <div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
+          <span w-6 h-6 rounded-3 bg-black></span>
+          <span w-6 h-6 rounded-3 bg-black self-center></span>
+          <span w-6 h-6 rounded-3 bg-black self-end></span>
+        </div>
+        <div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
+          <div flex-col justify-between>
+            <span w-6 h-6 rounded-3 bg-black></span>
+            <span w-6 h-6 rounded-3 bg-black></span>
+          </div>
+          <div flex-col justify-between>
+            <span w-6 h-6 rounded-3 bg-black></span>
+            <span w-6 h-6 rounded-3 bg-black></span>
+          </div>
+        </div>
+        <div w-50 h-50 b-1 rounded-5 f-c-c flex-col p-10 m-20>
+          <div flex w-full justify-between>
+            <span w-6 h-6 rounded-3 bg-black></span>
+            <span w-6 h-6 rounded-3 bg-black></span>
+          </div>
+          <span w-6 h-6 rounded-3 bg-black></span>
+          <div flex w-full justify-between>
+            <span w-6 h-6 rounded-3 bg-black></span>
+            <span w-6 h-6 rounded-3 bg-black></span>
+          </div>
+        </div>
+        <div w-50 h-50 b-1 rounded-5 flex-col justify-between p-10 m-20>
+          <div flex w-full justify-between>
+            <span w-6 h-6 rounded-3 bg-black></span>
+            <span w-6 h-6 rounded-3 bg-black></span>
+          </div>
+          <div flex w-full justify-between>
+            <span w-6 h-6 rounded-3 bg-black></span>
+            <span w-6 h-6 rounded-3 bg-black></span>
+          </div>
+          <div flex w-full justify-between>
+            <span w-6 h-6 rounded-3 bg-black></span>
+            <span w-6 h-6 rounded-3 bg-black></span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <h2 font-normal text-18 text-center w-350 mt-10 color-gray-400>Flex 骰子</h2>
+  </CommonPage>
+</template>

src/views/demo/editor/md-editor.vue

@@ -0,0 +1,43 @@
+<template>
+  <CommonPage :show-header="false" title="32323">
+    <div h-60 pl-20 pr-20 flex items-center bg-white>
+      <input
+        v-model="post.title"
+        class="flex-1 pt-15 pb-15 mr-20 text-20 font-bold color-primary"
+        type="text"
+        placeholder="输入文章标题..."
+      />
+      <n-button type="primary" style="width: 80px" :loading="btnLoading" @click="handleSavePost">
+        <TheIcon v-if="!btnLoading" icon="line-md:confirm-circle" class="mr-5" :size="18" /> 保存
+      </n-button>
+    </div>
+    <MdEditor v-model="post.content" style="height: calc(100vh - 250px)" />
+  </CommonPage>
+</template>
+
+<script setup>
+import MdEditor from 'md-editor-v3'
+import 'md-editor-v3/lib/style.css'
+
+// refs
+let post = ref({})
+let btnLoading = ref(false)
+
+function handleSavePost(e) {
+  btnLoading.value = true
+  $message.loading('正在保存...')
+  setTimeout(() => {
+    $message.success('保存成功')
+    btnLoading.value = false
+  }, 2000)
+}
+</script>
+
+<style lang="scss">
+.md-preview {
+  ul,
+  ol {
+    list-style: revert;
+  }
+}
+</style>

src/views/demo/route.js

@@ -0,0 +1,39 @@
+const Layout = () => import('@/layout/index.vue')
+
+export default {
+  name: 'Demo',
+  path: '/demo',
+  component: Layout,
+  redirect: '/demo/crud-table',
+  meta: {
+    title: '示例页面',
+    customIcon: 'logo',
+    role: ['admin'],
+    requireAuth: true,
+    order: 3,
+  },
+  children: [
+    {
+      name: 'CrudTable',
+      path: 'crud-table',
+      component: () => import('./table/index.vue'),
+      meta: {
+        title: '文章列表',
+        icon: 'mdi:table',
+        role: ['admin'],
+        requireAuth: true,
+      },
+    },
+    {
+      name: 'MDEditor',
+      path: 'md-editor',
+      component: () => import('./editor/md-editor.vue'),
+      meta: {
+        title: 'MD编辑器',
+        icon: 'icon-park:editor',
+        role: ['admin'],
+        requireAuth: true,
+      },
+    },
+  ],
+}

src/views/demo/table/api.js

@@ -0,0 +1,9 @@
+import request from '@/utils/http'
+
+export default {
+  getPosts: (params = {}) => request.get('posts', { params }),
+  getPostById: (id) => request.get(`/post/${id}`),
+  addPost: (data) => request.post('/post', data),
+  updatePost: (data) => request.put(`/post/${data.id}`, data),
+  deletePost: (id) => request.delete(`/post/${id}`, null),
+}

src/views/demo/table/index.vue

@@ -0,0 +1,219 @@
+<template>
+  <CommonPage show-footer title="文章">
+    <template #action>
+      <n-button type="primary" @click="handleAdd">
+        <TheIcon icon="material-symbols:add" :size="18" class="mr-5" /> 新建文章
+      </n-button>
+    </template>
+
+    <CrudTable
+      ref="$table"
+      v-model:query-items="queryItems"
+      :extra-params="extraParams"
+      :scroll-x="1200"
+      :columns="columns"
+      :get-data="api.getPosts"
+      @on-checked="onChecked"
+    >
+      <template #queryBar>
+        <QueryBarItem label="标题" :label-width="50">
+          <n-input
+            v-model:value="queryItems.title"
+            type="text"
+            placeholder="请输入标题"
+            @keydown.enter="$table?.handleSearch"
+          />
+        </QueryBarItem>
+      </template>
+    </CrudTable>
+    <!-- 新增/编辑/查看 -->
+    <CrudModal
+      v-model:visible="modalVisible"
+      :title="modalTitle"
+      :loading="modalLoading"
+      :show-footer="modalAction !== 'view'"
+      @on-save="handleSave"
+    >
+      <n-form
+        ref="modalFormRef"
+        label-placement="left"
+        label-align="left"
+        :label-width="80"
+        :model="modalForm"
+        :disabled="modalAction === 'view'"
+      >
+        <n-form-item label="作者" path="author">
+          <n-input v-model:value="modalForm.author" disabled />
+        </n-form-item>
+        <n-form-item
+          label="文章标题"
+          path="title"
+          :rule="{
+            required: true,
+            message: '请输入文章标题',
+            trigger: ['input', 'blur'],
+          }"
+        >
+          <n-input v-model:value="modalForm.title" placeholder="请输入文章标题" />
+        </n-form-item>
+        <n-form-item
+          label="文章内容"
+          path="content"
+          :rule="{
+            required: true,
+            message: '请输入文章内容',
+            trigger: ['input', 'blur'],
+          }"
+        >
+          <n-input
+            v-model:value="modalForm.content"
+            placeholder="请输入文章内容"
+            type="textarea"
+            :autosize="{
+              minRows: 3,
+              maxRows: 5,
+            }"
+          />
+        </n-form-item>
+      </n-form>
+    </CrudModal>
+  </CommonPage>
+</template>
+
+<script setup>
+import { NButton, NSwitch } from 'naive-ui'
+import { formatDateTime } from '@/utils'
+import { renderIcon } from '@/utils/icon'
+import { useCRUD } from '@/composables'
+import api from './api'
+import { isNullOrUndef } from '@/utils/is'
+
+const $table = ref(null)
+/** QueryBar筛选参数（可选） */
+const queryItems = ref({})
+/** 补充参数（可选） */
+const extraParams = ref({})
+
+onMounted(() => {
+  $table.value?.handleSearch()
+})
+
+const columns = [
+  { type: 'selection', fixed: 'left' },
+  {
+    title: '发布',
+    key: 'isPublish',
+    width: 60,
+    align: 'center',
+    fixed: 'left',
+    render(row) {
+      return h(NSwitch, {
+        size: 'small',
+        rubberBand: false,
+        value: row['isPublish'],
+        loading: !!row.publishing,
+        onUpdateValue: () => handlePublish(row),
+      })
+    },
+  },
+  { title: '标题', key: 'title', width: 150, ellipsis: { tooltip: true } },
+  { title: '分类', key: 'category', width: 80, ellipsis: { tooltip: true } },
+  { 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: 'actions',
+    width: 240,
+    align: 'center',
+    fixed: 'right',
+    render(row) {
+      return [
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'primary',
+            secondary: true,
+            onClick: () => handleView(row),
+          },
+          { default: () => '查看', icon: renderIcon('majesticons:eye-line', { size: 14 }) }
+        ),
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'primary',
+            style: 'margin-left: 15px;',
+            onClick: () => handleEdit(row),
+          },
+          { default: () => '编辑', icon: renderIcon('material-symbols:edit-outline', { size: 14 }) }
+        ),
+
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'error',
+            style: 'margin-left: 15px;',
+            onClick: () => handleDelete(row.id),
+          },
+          { default: () => '删除', icon: renderIcon('material-symbols:delete-outline', { size: 14 }) }
+        ),
+      ]
+    },
+  },
+]
+
+// 选中事件
+function onChecked(rowKeys) {
+  if (rowKeys.length) $message.info(`选中${rowKeys.join(' ')}`)
+}
+
+// 发布
+function handlePublish(row) {
+  if (isNullOrUndef(row.id)) return
+
+  row.publishing = true
+  setTimeout(() => {
+    row.isPublish = !row.isPublish
+    row.publishing = false
+    $message?.success(row.isPublish ? '已发布' : '已取消发布')
+  }, 1000)
+}
+
+const {
+  modalVisible,
+  modalAction,
+  modalTitle,
+  modalLoading,
+  handleAdd,
+  handleDelete,
+  handleEdit,
+  handleView,
+  handleSave,
+  modalForm,
+  modalFormRef,
+} = useCRUD({
+  name: '文章',
+  initForm: { author: '大脸怪' },
+  doCreate: api.addPost,
+  doDelete: api.deletePost,
+  doUpdate: api.updatePost,
+  refresh: () => $table.value?.handleSearch(),
+})
+</script>