优化 filelist, add settings

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>