优化 filelist, add settings

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

@@ -1,8 +1,5 @@
 <template>
-  <Card title="最新动态" v-bind="$attrs">
-    <template #extra>
-      <a-button type="link" size="small">更多</a-button>
-    </template>
+  <Card title="我的消息" v-bind="$attrs">
     <List item-layout="horizontal" :data-source="dynamicInfoItems">
       <template #renderItem="{ item }">
         <ListItem>
@@ -16,6 +13,7 @@
               <Icon :icon="item.avatar" :size="30" />
             </template>
           </ListItemMeta>
+          <a-button ghost color="error">删除</a-button>
         </ListItem>
       </template>
     </List>

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

@@ -1,44 +0,0 @@
-<template>
-  <Card title="项目" v-bind="$attrs">
-    <template #extra>
-      <a-button type="link" size="small" @click="nav2filelist">更多</a-button>
-    </template>
-
-    <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>
-      </span>
-      <div class="flex mt-2 h-10 text-secondary">{{ item.desc }}</div>
-      <div class="flex justify-between text-secondary">
-        <span>{{ item.group }}</span>
-        <span>{{ item.date }}</span>
-      </div>
-    </CardGrid>
-  </Card>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue'
-  import { Card } from 'ant-design-vue'
-  import { Icon } from '/@/components/Icon'
-  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: fl, nav2filelist: nav2filelist }
-    },
-  })
-</script>

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

@@ -1,17 +0,0 @@
-<template>
-  <Card title="快捷导航" v-bind="$attrs">
-    <CardGrid v-for="item in navItems" :key="item">
-      <span class="flex flex-col items-center">
-        <Icon :icon="item.icon" :color="item.color" size="20" />
-        <span class="text-md mt-2">{{ item.title }}</span>
-      </span>
-    </CardGrid>
-  </Card>
-</template>
-<script lang="ts" setup>
-  import { Card } from 'ant-design-vue'
-  import { navItems } from './data'
-  import { Icon } from '/@/components/Icon'
-
-  const CardGrid = Card.Grid
-</script>

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

@@ -1,94 +0,0 @@
-<template>
-  <Card title="销售统计" :loading="loading">
-    <div ref="chartRef" :style="{ width, height }"></div>
-  </Card>
-</template>
-<script lang="ts" setup>
-  import { Ref, ref, watch } from 'vue'
-  import { Card } from 'ant-design-vue'
-  import { useECharts } from '/@/hooks/web/useECharts'
-
-  const props = defineProps({
-    loading: Boolean,
-    width: {
-      type: String as PropType<string>,
-      default: '100%',
-    },
-    height: {
-      type: String as PropType<string>,
-      default: '400px',
-    },
-  })
-
-  const chartRef = ref<HTMLDivElement | null>(null)
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
-  watch(
-    () => props.loading,
-    () => {
-      if (props.loading) {
-        return
-      }
-      setOptions({
-        legend: {
-          bottom: 0,
-          data: ['Visits', 'Sales'],
-        },
-        tooltip: {},
-        radar: {
-          radius: '60%',
-          splitNumber: 8,
-          indicator: [
-            {
-              name: '2017',
-            },
-            {
-              name: '2017',
-            },
-            {
-              name: '2018',
-            },
-            {
-              name: '2019',
-            },
-            {
-              name: '2020',
-            },
-            {
-              name: '2021',
-            },
-          ],
-        },
-        series: [
-          {
-            type: 'radar',
-            symbolSize: 0,
-            areaStyle: {
-              shadowBlur: 0,
-              shadowColor: 'rgba(0,0,0,.2)',
-              shadowOffsetX: 0,
-              shadowOffsetY: 10,
-              opacity: 1,
-            },
-            data: [
-              {
-                value: [90, 50, 86, 40, 50, 20],
-                name: 'Visits',
-                itemStyle: {
-                  color: '#b6a2de',
-                },
-              },
-              {
-                value: [70, 75, 70, 76, 20, 85],
-                name: 'Sales',
-                itemStyle: {
-                  color: '#67e0e3',
-                },
-              },
-            ],
-          },
-        ],
-      })
-    },
-    { immediate: true },
-  )
-</script>

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

@@ -2,21 +2,21 @@
   <div class="lg:flex">
     <Avatar :src="userinfo.avatar || headerImg" :size="72" class="!mx-auto !block" />
     <div class="md:ml-6 flex flex-col justify-center md:mt-0 mt-2">
-      <h1 class="md:text-lg text-md">早安, {{ userinfo.realName }}, 开始您一天的工作吧！</h1>
-      <span class="text-secondary"> 今日晴，20℃ - 32℃！ </span>
+      <h1 class="md:text-lg text-md">
+        {{
+          ((): string => {
+            let hour: number = new Date().getHours()
+            if (hour < 10) return '早'
+            else if (hour < 19) return '午'
+            else return '晚'
+          })()
+        }}安, {{ userinfo.realName }}, 要注意劳逸结合哦!</h1
+      >
+      <span class="text-secondary"> 今日共有1人上线 </span>
     </div>
     <div class="flex flex-1 justify-end md:mt-0 mt-4">
-      <div class="flex flex-col justify-center text-right">
-        <span class="text-secondary"> 待办 </span>
-        <span class="text-2xl">2/10</span>
-      </div>
-
-      <div class="flex flex-col justify-center text-right md:mx-16 mx-12">
-        <span class="text-secondary"> 项目 </span>
-        <span class="text-2xl">8</span>
-      </div>
       <div class="flex flex-col justify-center text-right md:mr-10 mr-4">
-        <span class="text-secondary"> 团队 </span>
+        <span class="text-secondary"> 课程组人数 </span>
         <span class="text-2xl">300</span>
       </div>
     </div>

frontend/vben/src/views/dashboard/workbench/index.vue

@@ -2,31 +2,17 @@
   <PageWrapper>
     <template #headerContent> <WorkbenchHeader /> </template>
     <div class="lg:flex">
-      <div class="lg:w-7/10 w-full !mr-4 enter-y">
-        <ProjectCard :loading="loading" class="enter-y" />
-        <DynamicInfo :loading="loading" class="!my-4 enter-y" />
-      </div>
-      <div class="lg:w-3/10 w-full enter-y">
-        <QuickNav :loading="loading" class="enter-y" />
-
-        <Card class="!my-4 enter-y" :loading="loading">
-          <img class="xl:h-50 h-30 mx-auto" src="../../../assets/svg/illustration.svg" />
-        </Card>
-
-        <SaleRadar :loading="loading" class="enter-y" />
+      <div class="w-full">
+        <DynamicInfo :loading="loading" class="enter-y" />
       </div>
     </div>
   </PageWrapper>
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue'
-  import { Card } from 'ant-design-vue'
   import { PageWrapper } from '/@/components/Page'
   import WorkbenchHeader from './components/WorkbenchHeader.vue'
-  import ProjectCard from './components/ProjectCard.vue'
-  import QuickNav from './components/QuickNav.vue'
   import DynamicInfo from './components/DynamicInfo.vue'
-  import SaleRadar from './components/SaleRadar.vue'
 
   const loading = ref(true)
 

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

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

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

@@ -1,5 +1,15 @@
 <template>
-  <PageWrapper :class="prefixCls" title="试卷资源管理器">
+  <PageWrapper :class="prefixCls" :title="t('routes.filelist.name')">
+    <template #headerContent>
+      <BasicUpload
+        v-if="hasPermission([RoleEnum.SUPER, RoleEnum.FILE_MANAGER])"
+        :maxSize="20"
+        :maxNumber="10"
+        @change="handleChange"
+        :api="uploadApi"
+        :accept="['application/vnd.openxmlformats-officedocument.wordprocessingml.document']"
+      />
+    </template>
     <div :class="`${prefixCls}__top`">
       <a-row :gutter="12">
         <a-col :span="8" :class="`${prefixCls}__top-col`">
@@ -19,7 +29,10 @@
 
     <div :class="`${prefixCls}__content`">
       <a-list :pagination="pagination">
-        <template v-for="item in list" :key="item.id">
+        <template
+          v-for="item in getListOfPage(pagination.pageSize)[pagination.current - 1]"
+          :key="item.id"
+        >
           <a-list-item class="list">
             <a-list-item-meta>
               <template #avatar>
@@ -28,11 +41,19 @@
               <template #title>
                 <span>{{ item.title }}</span>
                 <div class="extra">
-                  <a-button ghost color="success"> 成功 </a-button>
+                  <a-button ghost color="success"> 查阅 </a-button>
                   &nbsp;&nbsp;
-                  <a-button ghost color="warning"> 警告 </a-button>
+                  <a-button
+                    ghost
+                    color="warning"
+                    v-if="hasPermission([RoleEnum.SUPER, RoleEnum.FILE_MANAGER])"
+                  >
+                    解析
+                  </a-button>
                   &nbsp;&nbsp;
-                  <a-button ghost color="error"> 错误 </a-button>
+                  <a-button ghost color="error" v-if="hasPermission([RoleEnum.SUPER])">
+                    删除
+                  </a-button>
                 </div>
               </template>
               <template #description>
@@ -40,10 +61,12 @@
                   {{ item.description }}
                 </div>
                 <div class="info">
-                  <div><span>Owner</span>{{ item.author }}</div>
-                  <div><span>开始时间</span>{{ item.datetime }}</div>
+                  <div><span>文件大小</span>1MB</div>
+                  <div><span>上传用户</span>{{ item.author }}</div>
+                  <div><span>上传时间</span>{{ item.datetime }}</div>
                 </div>
                 <div class="progress">
+                  <div><span>解析进度</span></div>
                   <Progress :percent="item.percent" status="active" />
                 </div>
               </template>
@@ -57,12 +80,22 @@
 <script lang="ts">
   import { Progress, Row, Col } from 'ant-design-vue'
   import { defineComponent } from 'vue'
-  import Icon from '/@/components/Icon/index'
+  import { Icon } from '/@/components/Icon'
+  import { BasicUpload } from '/@/components/Upload'
   import { cardList } from './data'
   import { PageWrapper } from '/@/components/Page'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { usePermission } from '/@/hooks/web/usePermission'
+  import { RoleEnum } from '/@/enums/roleEnum'
   import { List } from 'ant-design-vue'
+  import { uploadApi } from '/@/api/sys/upload'
+  import { useI18n } from '/@/hooks/web/useI18n'
+
+  const { t } = useI18n()
+
   export default defineComponent({
     components: {
+      BasicUpload,
       Icon,
       Progress,
       PageWrapper,
@@ -73,12 +106,39 @@
       [Col.name]: Col,
     },
     setup() {
+      const { createMessage } = useMessage()
+      const { hasPermission } = usePermission()
+
+      function getListOfPage(pageSize: number): any[] {
+        let listOfPage: any[] = []
+        for (let i = 0; i < cardList.length / pageSize; i++) {
+          listOfPage.push(cardList.slice(i * pageSize, (i + 1) * pageSize))
+        }
+        if (cardList.length % pageSize) {
+          listOfPage.push(cardList.slice((cardList.length / pageSize) * pageSize))
+        }
+        return listOfPage
+      }
+
       return {
+        t,
+        RoleEnum,
+        handleChange: (list: string[]) => {
+          createMessage.info(`已上传文件${JSON.stringify(list)}`)
+        },
+        uploadApi,
+        hasPermission,
         prefixCls: 'list-basic',
-        list: cardList,
+        getListOfPage: getListOfPage,
         pagination: {
+          current: 1,
+          total: cardList.length,
           show: true,
-          pageSize: 3,
+          pageSize: 10,
+          onChange: function (page: number, pageSize: number) {
+            this.current = page
+            this.pageSize = pageSize
+          },
         },
       }
     },
@@ -131,6 +191,7 @@
         display: inline-block;
         width: 40%;
         text-align: center;
+        vertical-align: top;
         div {
           display: inline-block;
           padding: 0 20px;

frontend/vben/src/views/page/settings/BaseSetting.vue

@@ -0,0 +1,97 @@
+<template>
+  <CollapseContainer title="基本设置" :canExpan="false">
+    <a-row :gutter="24">
+      <a-col :span="14">
+        <BasicForm @register="register" />
+      </a-col>
+      <a-col :span="10">
+        <div class="change-avatar">
+          <div class="mb-2">头像</div>
+          <CropperAvatar
+            :uploadApi="uploadApi"
+            :value="avatar"
+            btnText="更换头像"
+            :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
+            @change="updateAvatar"
+            width="150"
+          />
+        </div>
+      </a-col>
+    </a-row>
+    <Button type="primary" @click="handleSubmit"> 更新基本信息 </Button>
+  </CollapseContainer>
+</template>
+<script lang="ts">
+  import { Button, Row, Col } from 'ant-design-vue'
+  import { computed, defineComponent, onMounted } from 'vue'
+  import { BasicForm, useForm } from '/@/components/Form/index'
+  import { CollapseContainer } from '/@/components/Container'
+  import { CropperAvatar } from '/@/components/Cropper'
+
+  import { useMessage } from '/@/hooks/web/useMessage'
+
+  import headerImg from '/@/assets/images/header.jpg'
+  import { accountInfoApi } from '/@/api/demo/account'
+  import { baseSetschemas } from './data'
+  import { useUserStore } from '/@/store/modules/user'
+  import { uploadApi } from '/@/api/sys/upload'
+
+  export default defineComponent({
+    components: {
+      BasicForm,
+      CollapseContainer,
+      Button,
+      ARow: Row,
+      ACol: Col,
+      CropperAvatar,
+    },
+    setup() {
+      const { createMessage } = useMessage()
+      const userStore = useUserStore()
+
+      const [register, { setFieldsValue }] = useForm({
+        labelWidth: 120,
+        schemas: baseSetschemas,
+        showActionButtonGroup: false,
+      })
+
+      onMounted(async () => {
+        const data = await accountInfoApi()
+        setFieldsValue(data)
+      })
+
+      const avatar = computed(() => {
+        const { avatar } = userStore.getUserInfo
+        console.log(avatar)
+        return avatar || headerImg
+      })
+
+      function updateAvatar({ src, data }) {
+        const userinfo = userStore.getUserInfo
+        userinfo.avatar = src
+        userStore.setUserInfo(userinfo)
+        console.log('data', data)
+      }
+
+      return {
+        avatar,
+        register,
+        uploadApi: uploadApi as any,
+        updateAvatar,
+        handleSubmit: () => {
+          createMessage.success('更新成功！')
+        },
+      }
+    },
+  })
+</script>
+
+<style lang="less" scoped>
+  .change-avatar {
+    img {
+      display: block;
+      margin-bottom: 15px;
+      border-radius: 50%;
+    }
+  }
+</style>

frontend/vben/src/views/page/settings/SecureSetting.vue

@@ -0,0 +1,47 @@
+<template>
+  <CollapseContainer title="安全设置" :canExpan="false">
+    <List>
+      <template v-for="item in list" :key="item.key">
+        <ListItem>
+          <ListItemMeta>
+            <template #title>
+              {{ item.title }}
+              <div class="extra" v-if="item.extra">
+                {{ item.extra }}
+              </div>
+            </template>
+            <template #description>
+              <div>{{ item.description }}</div>
+            </template>
+          </ListItemMeta>
+        </ListItem>
+      </template>
+    </List>
+  </CollapseContainer>
+</template>
+<script lang="ts">
+  import { List } from 'ant-design-vue'
+  import { defineComponent } from 'vue'
+  import { CollapseContainer } from '/@/components/Container/index'
+
+  import { secureSettingList } from './data'
+
+  export default defineComponent({
+    components: { CollapseContainer, List, ListItem: List.Item, ListItemMeta: List.Item.Meta },
+    setup() {
+      return {
+        list: secureSettingList,
+      }
+    },
+  })
+</script>
+<style lang="less" scoped>
+  .extra {
+    float: right;
+    margin-top: 10px;
+    margin-right: 30px;
+    font-weight: normal;
+    color: #1890ff;
+    cursor: pointer;
+  }
+</style>

frontend/vben/src/views/page/settings/data.ts

@@ -0,0 +1,68 @@
+import { FormSchema } from '/@/components/Form/index'
+
+export interface ListItem {
+  key: string
+  title: string
+  description: string
+  extra?: string
+  avatar?: string
+  color?: string
+}
+
+// tab的list
+export const settingList = [
+  {
+    key: '1',
+    name: '基本设置',
+    component: 'BaseSetting',
+  },
+  {
+    key: '2',
+    name: '安全设置',
+    component: 'SecureSetting',
+  },
+]
+
+// 基础设置 form
+export const baseSetschemas: FormSchema[] = [
+  {
+    field: 'email',
+    component: 'Input',
+    label: '邮箱',
+    colProps: { span: 18 },
+  },
+  {
+    field: 'name',
+    component: 'Input',
+    label: '昵称',
+    colProps: { span: 18 },
+  },
+  {
+    field: 'introduction',
+    component: 'InputTextArea',
+    label: '个人简介',
+    colProps: { span: 18 },
+  },
+  {
+    field: 'address',
+    component: 'Input',
+    label: '所在地区',
+    colProps: { span: 18 },
+  },
+]
+
+// 安全设置 list
+export const secureSettingList: ListItem[] = [
+  {
+    key: '1',
+    title: '账户密码',
+    description: '当前密码强度：：强',
+    extra: '修改',
+  },
+  {
+    key: '2',
+    title: '我的手机',
+    description: '已绑定手机：：138****8293',
+    extra: '修改',
+  },
+]

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

@@ -0,0 +1,57 @@
+<template>
+  <ScrollContainer>
+    <div ref="wrapperRef" :class="prefixCls">
+      <Tabs tab-position="left" :tabBarStyle="tabBarStyle">
+        <template v-for="item in settingList" :key="item.key">
+          <TabPane :tab="item.name">
+            <component :is="item.component" />
+          </TabPane>
+        </template>
+      </Tabs>
+    </div>
+  </ScrollContainer>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import { Tabs } from 'ant-design-vue'
+
+  import { ScrollContainer } from '/@/components/Container/index'
+  import { settingList } from './data'
+
+  import BaseSetting from './BaseSetting.vue'
+  import SecureSetting from './SecureSetting.vue'
+
+  export default defineComponent({
+    components: {
+      ScrollContainer,
+      Tabs,
+      TabPane: Tabs.TabPane,
+      BaseSetting,
+      SecureSetting,
+    },
+    setup() {
+      return {
+        prefixCls: 'account-setting',
+        settingList,
+        tabBarStyle: {
+          width: '220px',
+        },
+      }
+    },
+  })
+</script>
+<style lang="less">
+  .account-setting {
+    margin: 12px;
+    background-color: @component-background;
+
+    .base-title {
+      padding-left: 0;
+    }
+
+    .ant-tabs-tab-active {
+      background-color: @item-active-bg;
+    }
+  }
+</style>