add filelist

frontend/vben/mock/page/filelist.ts

@@ -0,0 +1,69 @@
+import { MockMethod } from 'vite-plugin-mock'
+import { resultError, resultSuccess, getRequestToken, requestParams } from '../_util'
+
+export function createFileList() {
+  return [
+    {
+      title: '数据库2020B卷',
+      color: '',
+      desc: '不要等待机会，而要创造机会。',
+      group: '数据库与软件工程',
+      date: '2020-04-01',
+    },
+    {
+      title: '数据库2020A卷',
+      color: '#3fb27f',
+      desc: '现在的你决定将来的你。',
+      group: '数据库与软件工程',
+      date: '2020-04-01',
+    },
+    {
+      title: 'TCP/IP2018B卷',
+      color: '#e18525',
+      desc: '没有什么才能比努力更重要。',
+      group: 'TCP/IP',
+      date: '2021-04-01',
+    },
+    {
+      title: 'TCP/IP2018A卷',
+      color: '#bf0c2c',
+      desc: '热情和欲望可以突破一切难关。',
+      group: 'TCP/IP',
+      date: '2018-01-01',
+    },
+    {
+      title: '接入网2016B卷',
+      color: '#00d8ff',
+      desc: '健康的身体是实目标的基石。',
+      group: '接入网',
+      date: '2016-01-01',
+    },
+    {
+      title: '接入网2016A卷',
+      color: '#4daf1bc9',
+      desc: '路是走出来的，而不是空想出来的。',
+      group: '接入网',
+      date: '2016-01-01',
+    },
+  ]
+}
+
+export default [
+  // mock user login
+  {
+    url: '/basic-api/getFileList',
+    timeout: 200,
+    method: 'get',
+    response: (request: requestParams) => {
+      const token = getRequestToken(request)
+      if (!token) return resultError('Invalid token')
+      const count = request.query.count
+      if (!count || count <= 0) return resultError('Invalid count')
+      let fl = createFileList()
+      if (fl.length > count) {
+        fl = fl.slice(0, count)
+      }
+      return resultSuccess(fl)
+    },
+  },
+] as MockMethod[]

frontend/vben/src/api/page/model/fileListModel.ts

@@ -0,0 +1,13 @@
+export interface FileListGroupItem {
+  title: string
+  icon: string
+  color: string
+  desc: string
+  date: string
+  group: string
+}
+
+/**
+ * @description: Get filelist return value
+ */
+export type getFileListModel = FileListGroupItem[]

frontend/vben/src/api/page/page.ts

@@ -0,0 +1,14 @@
+import { defHttp } from '/@/utils/http/axios'
+import { getFileListModel } from './model/fileListModel'
+
+enum Api {
+  GetFileList = '/getFileList',
+}
+
+/**
+ * @description: Get file list
+ */
+
+export const getFileList = (count: number) => {
+  return defHttp.get<getFileListModel>({ url: Api.GetFileList, params: { count: count } })
+}

frontend/vben/src/enums/pageEnum.ts

@@ -3,6 +3,8 @@ export enum PageEnum {
   BASE_LOGIN = '/login',
   // basic home path
   BASE_HOME = '/dashboard',
+  // file list path
+  PAGE_FILELIST = '/filelist',
   // error page path
   ERROR_PAGE = '/exception',
   // error log page path

frontend/vben/src/locales/lang/zh-CN/routes/filelist.ts

@@ -0,0 +1,3 @@
+export default {
+  name: '文件列表',
+}

frontend/vben/src/router/routes/modules/filelist.ts

@@ -0,0 +1,31 @@
+import type { AppRouteModule } from '/@/router/types'
+
+import { LAYOUT } from '/@/router/constant'
+import { t } from '/@/hooks/web/useI18n'
+
+const filelist: AppRouteModule = {
+  path: '/filelist',
+  name: 'FileList',
+  component: LAYOUT,
+  redirect: '/filelist/index',
+  meta: {
+    hideChildrenInMenu: true,
+    icon: 'ion:file-tray-full-outline',
+    title: t('routes.filelist.name'),
+    orderNo: 20,
+  },
+  children: [
+    {
+      path: 'index',
+      name: 'FileListPage',
+      component: () => import('/@/views/page/filelist/index.vue'),
+      meta: {
+        title: t('routes.filelist.name'),
+        icon: 'ion:file-tray-full-outline',
+        hideMenu: true,
+      },
+    },
+  ],
+}
+
+export default filelist

frontend/vben/src/router/routes/modules/setup.ts

@@ -1,31 +0,0 @@
-import type { AppRouteModule } from '/@/router/types'
-
-import { LAYOUT } from '/@/router/constant'
-import { t } from '/@/hooks/web/useI18n'
-
-const setup: AppRouteModule = {
-  path: '/setup',
-  name: 'SetupDemo',
-  component: LAYOUT,
-  redirect: '/setup/index',
-  meta: {
-    orderNo: 90000,
-    hideChildrenInMenu: true,
-    icon: 'whh:paintroll',
-    title: t('routes.demo.setup.page'),
-  },
-  children: [
-    {
-      path: 'index',
-      name: 'SetupDemoPage',
-      component: () => import('/@/views/setup/index.vue'),
-      meta: {
-        title: t('routes.demo.setup.page'),
-        icon: 'whh:paintroll',
-        hideMenu: true,
-      },
-    },
-  ],
-}
-
-export default setup

frontend/vben/src/views/dashboard/workbench/components/ProjectCard.vue

@@ -1,10 +1,10 @@
 <template>
   <Card title="项目" v-bind="$attrs">
     <template #extra>
-      <a-button type="link" size="small">更多</a-button>
+      <a-button type="link" size="small" @click="nav2filelist">更多</a-button>
     </template>
 
-    <CardGrid v-for="item in items" :key="item" class="!md:w-1/3 !w-full">
+    <CardGrid v-for="item in items" :key="item.title" class="!md:w-1/3 !w-full">
       <span class="flex">
         <Icon :icon="item.icon" :color="item.color" size="30" />
         <span class="text-lg ml-4">{{ item.title }}</span>
@@ -21,12 +21,24 @@
   import { defineComponent } from 'vue'
   import { Card } from 'ant-design-vue'
   import { Icon } from '/@/components/Icon'
-  import { groupItems } from './data'
+  import { getFileList } from '/@/api/page/page'
+  import { router } from '/@/router'
+  import { PageEnum } from '/@/enums/pageEnum'
+
+  async function nav2filelist() {
+    router.push(PageEnum.PAGE_FILELIST)
+  }
+
+  const fl = await getFileList(6)
+
+  for (let i = 0; i < fl.length; i++) {
+    fl[i].icon = 'ion:newspaper-outline'
+  }
 
   export default defineComponent({
     components: { Card, CardGrid: Card.Grid, Icon },
     setup() {
-      return { items: groupItems }
+      return { items: fl, nav2filelist: nav2filelist }
     },
   })
 </script>

frontend/vben/src/views/dashboard/workbench/components/data.ts

@@ -1,12 +1,3 @@
-interface GroupItem {
-  title: string
-  icon: string
-  color: string
-  desc: string
-  date: string
-  group: string
-}
-
 interface NavItem {
   title: string
   icon: string
@@ -103,54 +94,3 @@ export const dynamicInfoItems: DynamicInfoItem[] = [
     desc: `推送了代码到 <a>Github</a>`,
   },
 ]
-
-export const groupItems: GroupItem[] = [
-  {
-    title: 'Github',
-    icon: 'carbon:logo-github',
-    color: '',
-    desc: '不要等待机会，而要创造机会。',
-    group: '开源组',
-    date: '2021-04-01',
-  },
-  {
-    title: 'Vue',
-    icon: 'ion:logo-vue',
-    color: '#3fb27f',
-    desc: '现在的你决定将来的你。',
-    group: '算法组',
-    date: '2021-04-01',
-  },
-  {
-    title: 'Html5',
-    icon: 'ion:logo-html5',
-    color: '#e18525',
-    desc: '没有什么才能比努力更重要。',
-    group: '上班摸鱼',
-    date: '2021-04-01',
-  },
-  {
-    title: 'Angular',
-    icon: 'ion:logo-angular',
-    color: '#bf0c2c',
-    desc: '热情和欲望可以突破一切难关。',
-    group: 'UI',
-    date: '2021-04-01',
-  },
-  {
-    title: 'React',
-    icon: 'bx:bxl-react',
-    color: '#00d8ff',
-    desc: '健康的身体是实目标的基石。',
-    group: '技术牛',
-    date: '2021-04-01',
-  },
-  {
-    title: 'Js',
-    icon: 'ion:logo-javascript',
-    color: '#4daf1bc9',
-    desc: '路是走出来的，而不是空想出来的。',
-    group: '架构组',
-    date: '2021-04-01',
-  },
-]

frontend/vben/src/views/page/filelist/data.tsx

@@ -0,0 +1,17 @@
+export const cardList = (() => {
+  const result: any[] = []
+  for (let i = 0; i < 6; i++) {
+    result.push({
+      id: i,
+      title: 'Vben Admin',
+      description: '基于Vue Next, TypeScript, Ant Design Vue实现的一套完整的企业级后台管理系统',
+      datetime: '2020-11-26 17:39',
+      extra: '编辑',
+      icon: 'logos:vue',
+      color: '#1890ff',
+      author: 'Vben',
+      percent: 20 * (i + 1),
+    })
+  }
+  return result
+})()

frontend/vben/src/views/page/filelist/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <PageWrapper :class="prefixCls" title="标准列表">
+    <div :class="`${prefixCls}__top`">
+      <a-row :gutter="12">
+        <a-col :span="8" :class="`${prefixCls}__top-col`">
+          <div>我的待办</div>
+          <p>8个任务</p>
+        </a-col>
+        <a-col :span="8" :class="`${prefixCls}__top-col`">
+          <div>本周任务平均处理时间</div>
+          <p>32分钟</p>
+        </a-col>
+        <a-col :span="8" :class="`${prefixCls}__top-col`">
+          <div>本周完成任务数</div>
+          <p>24个任务</p>
+        </a-col>
+      </a-row>
+    </div>
+
+    <div :class="`${prefixCls}__content`">
+      <a-list :pagination="pagination">
+        <template v-for="item in list" :key="item.id">
+          <a-list-item class="list">
+            <a-list-item-meta>
+              <template #avatar>
+                <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
+              </template>
+              <template #title>
+                <span>{{ item.title }}</span>
+                <div class="extra" v-if="item.extra">
+                  {{ item.extra }}
+                </div>
+              </template>
+              <template #description>
+                <div class="description">
+                  {{ item.description }}
+                </div>
+                <div class="info">
+                  <div><span>Owner</span>{{ item.author }}</div>
+                  <div><span>开始时间</span>{{ item.datetime }}</div>
+                </div>
+                <div class="progress">
+                  <Progress :percent="item.percent" status="active" />
+                </div>
+              </template>
+            </a-list-item-meta>
+          </a-list-item>
+        </template>
+      </a-list>
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts">
+  import { Progress, Row, Col } from 'ant-design-vue'
+  import { defineComponent } from 'vue'
+  import Icon from '/@/components/Icon/index'
+  import { cardList } from './data'
+  import { PageWrapper } from '/@/components/Page'
+  import { List } from 'ant-design-vue'
+  export default defineComponent({
+    components: {
+      Icon,
+      Progress,
+      PageWrapper,
+      [List.name]: List,
+      [List.Item.name]: List.Item,
+      AListItemMeta: List.Item.Meta,
+      [Row.name]: Row,
+      [Col.name]: Col,
+    },
+    setup() {
+      return {
+        prefixCls: 'list-basic',
+        list: cardList,
+        pagination: {
+          show: true,
+          pageSize: 3,
+        },
+      }
+    },
+  })
+</script>
+<style lang="less" scoped>
+  .list-basic {
+    &__top {
+      padding: 24px;
+      text-align: center;
+      background-color: @component-background;
+      &-col {
+        &:not(:last-child) {
+          border-right: 1px dashed @border-color-base;
+        }
+        div {
+          margin-bottom: 12px;
+          font-size: 14px;
+          line-height: 22px;
+          color: @text-color;
+        }
+        p {
+          margin: 0;
+          font-size: 24px;
+          line-height: 32px;
+          color: @text-color;
+        }
+      }
+    }
+    &__content {
+      padding: 24px;
+      margin-top: 12px;
+      background-color: @component-background;
+      .list {
+        position: relative;
+      }
+      .icon {
+        font-size: 40px !important;
+      }
+      .extra {
+        position: absolute;
+        top: 20px;
+        right: 15px;
+        font-weight: normal;
+        color: @primary-color;
+        cursor: pointer;
+      }
+      .description {
+        display: inline-block;
+        width: 40%;
+      }
+      .info {
+        display: inline-block;
+        width: 30%;
+        text-align: center;
+        div {
+          display: inline-block;
+          padding: 0 20px;
+          span {
+            display: block;
+          }
+        }
+      }
+      .progress {
+        display: inline-block;
+        width: 15%;
+        vertical-align: top;
+      }
+    }
+  }
+</style>

frontend/vben/src/views/setup/index.vue

@@ -1,43 +0,0 @@
-<template>
-  <PageWrapper title="引导页" content="用于给用户的指引操作">
-    <a-button type="primary" @click="handleStart">开始</a-button>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue'
-  import { PageWrapper } from '/@/components/Page'
-  import { useDesign } from '/@/hooks/web/useDesign'
-  import intro from 'intro.js'
-  import 'intro.js/minified/introjs.min.css'
-
-  export default defineComponent({
-    components: { PageWrapper },
-    setup() {
-      const { prefixVar } = useDesign('')
-
-      function handleStart() {
-        intro()
-          .setOptions({
-            steps: [
-              {
-                title: 'Welcome',
-                intro: 'Hello World! 👋',
-              },
-              {
-                title: 'Collapse Button',
-                element: document.querySelector(`.${prefixVar}-layout-header-trigger`)!,
-                intro: 'This is the menu collapse button.',
-              },
-              {
-                title: 'User Action',
-                element: document.querySelector(`.${prefixVar}-layout-header-action`)!,
-                intro: 'This is the user function area.',
-              },
-            ],
-          })
-          .start()
-      }
-      return { handleStart }
-    },
-  })
-</script>