From 979c1d8110ac84e20f2fbfc8511fdad61ad31f64 Mon Sep 17 00:00:00 2001
From: xiaomlove <353856593@qq.com>
Date: Thu, 6 May 2021 19:37:07 +0800
Subject: [PATCH] admin-add-setting

---
 admin/src/App.vue                      |   3 +
 admin/src/router/index.js              |   6 +-
 admin/src/styles/common.scss           |   3 +
 admin/src/utils/index.js               |   1 +
 admin/src/views/setting/form-basic.vue | 130 ++++++++
 admin/src/views/setting/form-main.vue  | 418 +++++++++++++++++++++++++
 admin/src/views/setting/form.vue       | 225 +++++++++++++
 admin/src/views/setting/index.vue      |  74 +++++
 8 files changed, 859 insertions(+), 1 deletion(-)
 create mode 100644 admin/src/views/setting/form-basic.vue
 create mode 100644 admin/src/views/setting/form-main.vue
 create mode 100644 admin/src/views/setting/form.vue
 create mode 100644 admin/src/views/setting/index.vue

diff --git a/admin/src/App.vue b/admin/src/App.vue
index c96d4aea..90eb1ae7 100644
--- a/admin/src/App.vue
+++ b/admin/src/App.vue
@@ -38,6 +38,9 @@
                         <el-menu-item-group>
                             <el-menu-item index="/exam-user"><i class="el-icon-menu" />Exam user</el-menu-item>
                         </el-menu-item-group>
+                        <el-menu-item-group>
+                            <el-menu-item index="/setting"><i class="el-icon-menu" />Setting</el-menu-item>
+                        </el-menu-item-group>
                     </el-submenu>
                 </el-menu>
             </el-aside>
diff --git a/admin/src/router/index.js b/admin/src/router/index.js
index 7e21cd7f..c928e27e 100644
--- a/admin/src/router/index.js
+++ b/admin/src/router/index.js
@@ -54,7 +54,11 @@ const router = createRouter({
             name: 'agent-allow-form',
             component: () => import('../views/agent-allow/form.vue')
         },
-
+        {
+            path: '/setting',
+            name: 'setting',
+            component: () => import('../views/setting/index.vue')
+        },
     ]
 })
 
diff --git a/admin/src/styles/common.scss b/admin/src/styles/common.scss
index 754257f3..d2fdccc0 100644
--- a/admin/src/styles/common.scss
+++ b/admin/src/styles/common.scss
@@ -2,3 +2,6 @@
     display: flex;
     justify-content: space-between;
 }
+.nexus-help-text {
+    color: #aaa;
+}
diff --git a/admin/src/utils/index.js b/admin/src/utils/index.js
index 953c49a0..15fe508e 100644
--- a/admin/src/utils/index.js
+++ b/admin/src/utils/index.js
@@ -46,4 +46,5 @@ export const pathMap = {
     'exam': 'Exam',
     'exam-form': 'Exam form',
     'exam-user': 'Exam user',
+    'setting': "Setting",
 }
diff --git a/admin/src/views/setting/form-basic.vue b/admin/src/views/setting/form-basic.vue
new file mode 100644
index 00000000..7f68be20
--- /dev/null
+++ b/admin/src/views/setting/form-basic.vue
@@ -0,0 +1,130 @@
+<template>
+    <el-form :model="formData" :rules="rules" ref="formRef" label-width="200px" class="formData">
+        <el-form-item label="Site Name" prop="basic.SITENAME">
+            <el-input v-model="formData.basic.SITENAME" placeholder=""></el-input>
+            <div class="nexus-help-text">
+                Website name
+            </div>
+        </el-form-item>
+
+        <el-form-item>
+            <el-button type="primary" @click="submitAdd()">Submit</el-button>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script>
+import { reactive, ref, toRefs, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import { localGet } from '../../utils'
+import api from "../../utils/api";
+
+export default {
+    name: 'SettingFormBasic',
+    setup() {
+        const { proxy } = getCurrentInstance()
+        console.log('proxy', proxy)
+        const formRef = ref(null)
+        const route = useRoute()
+        const router = useRouter()
+        const { id } = route.query
+        const state = reactive({
+            token: localGet('token') || '',
+            id: id,
+            allClasses: [],
+            formData: {
+                basic: {
+                    SITENAME: ''
+                }
+            },
+            rules: {
+                'basic.name': [
+                    { required: 'true',  }
+                ],
+            },
+        })
+        onMounted( () => {
+            listAllClass()
+            listAllIndex()
+            if (id) {
+                api.getExam(id).then(res => {
+                    state.formData.name = res.data.name
+                    state.formData.description = res.data.description
+                    state.formData.begin = res.data.begin
+                    state.formData.end = res.data.end
+                    state.formData.duration = res.data.duration
+                    state.formData.indexes = res.data.indexes
+                    state.formData.filters = res.data.filters
+                    state.formData.status = res.data.status
+                    state.formData.is_discovered = res.data.is_discovered
+                })
+            } else {
+                let res = api.listExamIndex()
+                state.formData.indexes = res.data
+            }
+        })
+        onBeforeUnmount(() => {
+
+        })
+        const submitAdd = () => {
+            formRef.value.validate(async (vaild) => {
+                if (vaild) {
+                    let params = state.formData;
+                    if (params.begin) {
+                        params.begin = dayjs(params.begin).format('YYYY-MM-DD HH:mm:ss')
+                    }
+                    if (params.end) {
+                        params.end = dayjs(params.end).format('YYYY-MM-DD HH:mm:ss')
+                    }
+                    console.log(params)
+                    if (id) {
+                        await api.updateExam(id, params)
+                    } else {
+                        await api.storeExam(params)
+                    }
+                    await router.push({name: 'exam'})
+                }
+            })
+        }
+        const handleBeforeUpload = (file) => {
+            const sufix = file.name.split('.')[1] || ''
+            if (!['jpg', 'jpeg', 'png'].includes(sufix)) {
+                ElMessage.error('请上传 jpg、jpeg、png 格式的图片')
+                return false
+            }
+        }
+        const handleUrlSuccess = (val) => {
+            state.formData.goodsCoverImg = val.data || ''
+        }
+        const handleChangeCate = (val) => {
+            state.categoryId = val[2] || 0
+        }
+
+        const listAllClass = async () => {
+            let res = await api.listClass()
+            state.allClasses = res.data
+        }
+        const listAllIndex = async () => {
+            let res = await api.listExamIndex()
+            state.formData.indexes = res.data
+        }
+        const getExam = async (id) => {
+            let res = await api.getExam(id)
+            console.log(res)
+        }
+        return {
+            ...toRefs(state),
+            formRef,
+            submitAdd,
+            handleBeforeUpload,
+            handleUrlSuccess,
+            handleChangeCate,
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/admin/src/views/setting/form-main.vue b/admin/src/views/setting/form-main.vue
new file mode 100644
index 00000000..acb6c119
--- /dev/null
+++ b/admin/src/views/setting/form-main.vue
@@ -0,0 +1,418 @@
+<template>
+    <el-form :model="formData" :rules="rules" ref="formRef" label-width="250px" class="formData">
+        <el-form-item label="Site online" prop="main.site_online">
+            <el-radio-group v-model="formData.main.site_online">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'yes'. Want to turn off your site while performing updates or other types of maintenance? Please Note: Administrators will still be able to see the site.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Enable invite system" prop="main.invitesystem">
+            <el-radio-group v-model="formData.main.invitesystem">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'yes'. Allow Registrations via Invite System.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Initial uploading amount" prop="main.iniupload">
+            <el-input v-model="formData.main.iniupload" placeholder="" type="number"></el-input>
+            <div class="nexus-help-text">
+                How many uploading credit (in Byte, i.e. 1073741824 = 1GB) should each user be given upon registration? Default '0'.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Initial number of invites" prop="main.invite_count">
+            <el-input v-model="formData.main.invite_count" placeholder="" type="number"></el-input>
+            <div class="nexus-help-text">
+                How many invites should each user be given upon registration? Default '0'.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Invite timeout" prop="main.invite_timeout">
+            <el-input v-model="formData.main.invite_timeout" placeholder="" type="number"></el-input>
+            <div class="nexus-help-text">
+                In days. Delete invite code after X days who didn't respond the invite request. Default '7'.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Enable registration system" prop="main.registration">
+            <el-radio-group v-model="formData.main.registration">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Allow open registrations. Default 'yes'.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Verification type" prop="main.verification">
+            <el-radio-group v-model="formData.main.verification">
+                <el-radio label="email">Email</el-radio>
+                <el-radio label="admin">Admin</el-radio>
+                <el-radio label="automatic">Automatically</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                EMAIL: Sent confirmation email. ADMIN: Manual activate. AUTOMATIC: Activate user after registration.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Enable wait system" prop="main.waitsystem">
+            <el-radio-group v-model="formData.main.waitsystem">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Enable or disable wait system (see FAQ).
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Enable max slots system" prop="main.maxdlsystemyes">
+            <el-radio-group v-model="formData.main.maxdlsystemyes">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'no'. Enable or disable maximum concurrent downloads (AKA Max Slots) (see FAQ).
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Show polls" prop="main.showpolls">
+            <el-radio-group v-model="formData.main.showpolls">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'yes'. Show POLL system on main page.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Show stats" prop="main.showstats">
+            <el-radio-group v-model="formData.main.showstats">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'yes'. Show STATS system on main page.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Show last x forum posts" prop="main.showlastxforumposts">
+            <el-radio-group v-model="formData.main.showlastxforumposts">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'no'. Show Last x Forum Posts on main page.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Show Last x Torrents" prop="main.showlastxtorrents">
+            <el-radio-group v-model="formData.main.showlastxtorrents">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'no'. Show Last x Torrents on main page.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Show server load" prop="main.showtrackerload">
+            <el-radio-group v-model="formData.main.showtrackerload">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'yes'. Show Server Load on main page.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Show forum stats" prop="main.showforumstats">
+            <el-radio-group v-model="formData.main.showforumstats">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'yes'. Show forum stats on forums page.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Show hot" prop="main.showhotmovies">
+            <el-radio-group v-model="formData.main.showhotmovies">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'yes'. Show hot resources on main page. Hot resources are automatically picked by system or manually by staff members.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Show classic" prop="main.showclassicmovies">
+            <el-radio-group v-model="formData.main.showclassicmovies">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'no'. Show classic resources on main page. Only designated moderators or above can pick classic resources.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Enable IMDb system" prop="main.showimdbinfo">
+            <el-radio-group v-model="formData.main.showimdbinfo">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'yes'. System-wide IMDb info setting.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Enable PT-Gen system" prop="main.enable_pt_gen_system">
+            <el-radio-group v-model="formData.main.enable_pt_gen_system">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'no'. System-wide PT-Gen info setting.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="PT-Gen api point" prop="main.pt_gen_api_point">
+            <el-input v-model="formData.main.pt_gen_api_point" placeholder=""></el-input>
+            <div class="nexus-help-text">
+                Default '', when required, reference to Documatation to build yourself
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Enable NFO" prop="main.enablenfo">
+            <el-radio-group v-model="formData.main.enablenfo">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'yes'. System-wide NFO setting.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Enable technical information" prop="main.enable_technical_info">
+            <el-radio-group v-model="formData.main.enable_technical_info">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'No'. Technical Information comes from software MediaInfo Text view
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Enable school system" prop="main.enableschoolyes">
+            <el-radio-group v-model="formData.main.enableschoolyes">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'no'. <span style="color: red; font-weight: bold">DO NOT</span> enable this unless you know what you are doing!
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Restrict email domain" prop="main.restrictemail">
+            <el-radio-group v-model="formData.main.restrictemail">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'no'. Set it to 'yes' to only allow certain email domains to register. See here.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Show Shoutbox" prop="main.showshoutbox">
+            <el-radio-group v-model="formData.main.showshoutbox">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'yes'. Show shoutbox on main page.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Show funbox" prop="main.showfunbox">
+            <el-radio-group v-model="formData.main.showfunbox">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'no'. Show funbox on main page.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Enable offer section" prop="main.showoffer">
+            <el-radio-group v-model="formData.main.showoffer">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Default 'yes'. Enable or disable offer section.
+            </div>
+        </el-form-item>
+
+        <el-form-item label="Enable Donation" prop="main.donation">
+            <el-radio-group v-model="formData.main.donation">
+                <el-radio label="yes">Yes</el-radio>
+                <el-radio label="no">No</el-radio>
+            </el-radio-group>
+            <div class="nexus-help-text">
+                Show donation and donation top ten.
+            </div>
+        </el-form-item>
+
+        <el-form-item>
+            <el-button type="primary" @click="submitAdd()">Submit</el-button>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script>
+import { reactive, ref, toRefs, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import { localGet } from '../../utils'
+import api from "../../utils/api";
+
+export default {
+    name: 'SettingFormBasic',
+    setup() {
+        const { proxy } = getCurrentInstance()
+        console.log('proxy', proxy)
+        const formRef = ref(null)
+        const route = useRoute()
+        const router = useRouter()
+        const { id } = route.query
+        const state = reactive({
+            token: localGet('token') || '',
+            id: id,
+            allClasses: [],
+            formData: {
+                main: {
+                    site_online: '',
+                    invitesystem: '',
+                    iniupload: '',
+                    invite_count: '',
+                    invite_timeout: '',
+                    verification: '',
+                    waitsystem: '',
+                    maxdlsystemyes: '',
+                    showpolls: '',
+                    showstats: '',
+                    showtrackerload: '',
+                    showforumstats: '',
+                    showlastxforumposts: '',
+                    showlastxtorrents: '',
+                    showhotmovies: '',
+                    showclassicmovies: '',
+                    showimdbinfo: '',
+                    enable_pt_gen_system: '',
+                    pt_gen_api_point: '',
+                    enablenfo: '',
+                    enable_technical_info: '',
+                    enableschoolyes: '',
+                    restrictemail: '',
+                    showshoutbox: '',
+                    showfunbox: '',
+                    showoffer: '',
+                    donation: '',
+                }
+            },
+            rules: {
+                'main.site_online': [
+                    { required: 'true',  }
+                ],
+            },
+        })
+        onMounted( () => {
+            listAllClass()
+            listAllIndex()
+            if (id) {
+                api.getExam(id).then(res => {
+                    state.formData.name = res.data.name
+                    state.formData.description = res.data.description
+                    state.formData.begin = res.data.begin
+                    state.formData.end = res.data.end
+                    state.formData.duration = res.data.duration
+                    state.formData.indexes = res.data.indexes
+                    state.formData.filters = res.data.filters
+                    state.formData.status = res.data.status
+                    state.formData.is_discovered = res.data.is_discovered
+                })
+            } else {
+                let res = api.listExamIndex()
+                state.formData.indexes = res.data
+            }
+        })
+        onBeforeUnmount(() => {
+
+        })
+        const submitAdd = () => {
+            formRef.value.validate(async (vaild) => {
+                if (vaild) {
+                    let params = state.formData;
+                    if (params.begin) {
+                        params.begin = dayjs(params.begin).format('YYYY-MM-DD HH:mm:ss')
+                    }
+                    if (params.end) {
+                        params.end = dayjs(params.end).format('YYYY-MM-DD HH:mm:ss')
+                    }
+                    console.log(params)
+                    if (id) {
+                        await api.updateExam(id, params)
+                    } else {
+                        await api.storeExam(params)
+                    }
+                    await router.push({name: 'exam'})
+                }
+            })
+        }
+        const handleBeforeUpload = (file) => {
+            const sufix = file.name.split('.')[1] || ''
+            if (!['jpg', 'jpeg', 'png'].includes(sufix)) {
+                ElMessage.error('请上传 jpg、jpeg、png 格式的图片')
+                return false
+            }
+        }
+        const handleUrlSuccess = (val) => {
+            state.formData.goodsCoverImg = val.data || ''
+        }
+        const handleChangeCate = (val) => {
+            state.categoryId = val[2] || 0
+        }
+
+        const listAllClass = async () => {
+            let res = await api.listClass()
+            state.allClasses = res.data
+        }
+        const listAllIndex = async () => {
+            let res = await api.listExamIndex()
+            state.formData.indexes = res.data
+        }
+        const getExam = async (id) => {
+            let res = await api.getExam(id)
+            console.log(res)
+        }
+        return {
+            ...toRefs(state),
+            formRef,
+            submitAdd,
+            handleBeforeUpload,
+            handleUrlSuccess,
+            handleChangeCate,
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/admin/src/views/setting/form.vue b/admin/src/views/setting/form.vue
new file mode 100644
index 00000000..d8eb1ab0
--- /dev/null
+++ b/admin/src/views/setting/form.vue
@@ -0,0 +1,225 @@
+<template>
+    <div>
+        <el-row>
+            <el-col :span="12">
+                <el-form :model="formData" :rules="rules" ref="formRef" label-width="200px" class="formData">
+                    <el-form-item label="Name" prop="name">
+                        <el-input v-model="formData.name" placeholder=""></el-input>
+                    </el-form-item>
+                    <el-form-item label="Index" prop="indexes">
+                        <template v-for="(item, index) in formData.indexes" :key="index">
+                            <el-row>
+                                <el-col :span="6">
+                                    <el-checkbox v-model="item.checked" :label="item.checked">{{item.name}}</el-checkbox>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-input type="number" v-model="item.require_value"></el-input>
+                                </el-col>
+                                <el-col :span="6" style="padding: 0 20px; color: #aaa">
+                                    <template v-if="item.unit">
+                                        Unit: {{item.unit}}
+                                    </template>
+                                </el-col>
+                            </el-row>
+                        </template>
+                    </el-form-item>
+
+                    <el-form-item label="Status" prop="status">
+                        <el-radio-group v-model="formData.status">
+                            <el-radio :label="0">Enabled</el-radio>
+                            <el-radio :label="1">Disabled</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+
+                    <el-form-item label="Discovered" prop="is_discovered">
+                        <el-radio-group v-model="formData.is_discovered">
+                            <el-radio :label="0">No</el-radio>
+                            <el-radio :label="1">Yes</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+
+                    <el-form-item label="Begin" prop="begin">
+                        <el-date-picker
+                            v-model="formData.begin"
+                            type="datetime"
+                            format="YYYY-MM-DD HH:mm:ss"
+                            placeholder="Select Begin Time">
+                        </el-date-picker>
+                    </el-form-item>
+                    <el-form-item label="End" prop="end">
+                        <el-date-picker
+                            v-model="formData.end"
+                            type="datetime"
+                            format="YYYY-MM-DD HH:mm:ss"
+                            placeholder="Select End Time">
+                        </el-date-picker>
+                    </el-form-item>
+
+                    <el-form-item label="Duration" prop="duration">
+                        <el-input v-model="formData.duration" type="number" placeholder=""></el-input>
+                        <div style="color: #aaa">Unit: days. When assign to user, begin and end are used if they are specified. Otherwise begin time is the time at assignment, and the end time is the time at assignment plus the duration.</div>
+                    </el-form-item>
+
+                    <el-form-item label="Target User Class" prop="filters.classes">
+                        <el-checkbox-group v-model="formData.filters.classes">
+                            <el-checkbox v-for="(item, index) in allClasses" :label="index" :key="index">{{item}}</el-checkbox>
+                        </el-checkbox-group>
+                    </el-form-item>
+
+                    <el-form-item label="Target User Register Time">
+                        <el-date-picker
+                            v-model="formData.filters.register_time_range"
+                            type="datetimerange"
+                            format="YYYY-MM-DD HH:mm:ss"
+                            range-separator="to"
+                            start-placeholder="Begin"
+                            end-placeholder="End">
+                        </el-date-picker>
+                    </el-form-item>
+
+                    <el-form-item label="Description" prop="description">
+                        <el-input type="textarea" v-model="formData.description" placeholder=""></el-input>
+                    </el-form-item>
+
+                    <el-form-item>
+                        <el-button type="primary" @click="submitAdd()">Submit</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+import { reactive, ref, toRefs, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import { localGet } from '../../utils'
+import api from "../../utils/api";
+
+export default {
+    name: 'ExamForm',
+    setup() {
+        const { proxy } = getCurrentInstance()
+        console.log('proxy', proxy)
+        const formRef = ref(null)
+        const route = useRoute()
+        const router = useRouter()
+        const { id } = route.query
+        const state = reactive({
+            token: localGet('token') || '',
+            id: id,
+            allClasses: [],
+            formData: {
+                name: '',
+                description: '',
+                begin: '',
+                end: '',
+                duration: '',
+                indexes: [],
+                filters: {
+                    classes: [],
+                    register_time_range: []
+                },
+                status: '',
+                is_discovered: ''
+            },
+            rules: {
+                name: [
+                    { required: 'true',  }
+                ],
+                indexes: [
+                    { required: 'true', }
+                ],
+                status: [
+                    { required: 'true',}
+                ],
+                is_discovered: [
+                    { required: 'true',}
+                ],
+            },
+        })
+        onMounted( () => {
+            listAllClass()
+            listAllIndex()
+            if (id) {
+                api.getExam(id).then(res => {
+                    state.formData.name = res.data.name
+                    state.formData.description = res.data.description
+                    state.formData.begin = res.data.begin
+                    state.formData.end = res.data.end
+                    state.formData.duration = res.data.duration
+                    state.formData.indexes = res.data.indexes
+                    state.formData.filters = res.data.filters
+                    state.formData.status = res.data.status
+                    state.formData.is_discovered = res.data.is_discovered
+                })
+            } else {
+                let res = api.listExamIndex()
+                state.formData.indexes = res.data
+            }
+        })
+        onBeforeUnmount(() => {
+
+        })
+        const submitAdd = () => {
+            formRef.value.validate(async (vaild) => {
+                if (vaild) {
+                    let params = state.formData;
+                    if (params.begin) {
+                        params.begin = dayjs(params.begin).format('YYYY-MM-DD HH:mm:ss')
+                    }
+                    if (params.end) {
+                        params.end = dayjs(params.end).format('YYYY-MM-DD HH:mm:ss')
+                    }
+                    console.log(params)
+                    if (id) {
+                        await api.updateExam(id, params)
+                    } else {
+                        await api.storeExam(params)
+                    }
+                    await router.push({name: 'exam'})
+                }
+            })
+        }
+        const handleBeforeUpload = (file) => {
+            const sufix = file.name.split('.')[1] || ''
+            if (!['jpg', 'jpeg', 'png'].includes(sufix)) {
+                ElMessage.error('请上传 jpg、jpeg、png 格式的图片')
+                return false
+            }
+        }
+        const handleUrlSuccess = (val) => {
+            state.formData.goodsCoverImg = val.data || ''
+        }
+        const handleChangeCate = (val) => {
+            state.categoryId = val[2] || 0
+        }
+
+        const listAllClass = async () => {
+            let res = await api.listClass()
+            state.allClasses = res.data
+        }
+        const listAllIndex = async () => {
+            let res = await api.listExamIndex()
+            state.formData.indexes = res.data
+        }
+        const getExam = async (id) => {
+            let res = await api.getExam(id)
+            console.log(res)
+        }
+        return {
+            ...toRefs(state),
+            formRef,
+            submitAdd,
+            handleBeforeUpload,
+            handleUrlSuccess,
+            handleChangeCate,
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/admin/src/views/setting/index.vue b/admin/src/views/setting/index.vue
new file mode 100644
index 00000000..a8b0d9c2
--- /dev/null
+++ b/admin/src/views/setting/index.vue
@@ -0,0 +1,74 @@
+<template>
+    <el-tabs type="border-card">
+        <el-tab-pane label="Basic"><FormBasic /></el-tab-pane>
+        <el-tab-pane label="Main"><FormMain /></el-tab-pane>
+        <el-tab-pane label="Smtp">Smtp</el-tab-pane>
+    </el-tabs>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+import api from '../../utils/api'
+import { useTable, renderTableData } from '../../utils/table'
+import FormBasic from './form-basic.vue'
+import FormMain from './form-main.vue'
+
+export default {
+    name: 'Setting',
+    components: {
+        FormBasic, FormMain,
+    },
+    setup() {
+        const multipleTable = ref(null)
+        const router = useRouter()
+
+        const state = useTable()
+
+        onMounted(() => {
+            console.log('ExamTable onMounted')
+            fetchTableData()
+        })
+        const fetchTableData = async () => {
+            state.loading = true
+            let res = await api.listExam(state.query)
+            renderTableData(res, state)
+            state.loading = false
+        }
+        const handleAdd = () => {
+            router.push({ name: 'exam-form' })
+        }
+        const handleEdit = (id) => {
+            router.push({ path: '/exam-form', query: { id } })
+        }
+        const handleDelete = async (id) => {
+            let res = await api.deleteExam(id)
+            ElMessage.success(res.msg)
+            state.query.page = 1;
+            await fetchTableData()
+        }
+        const handleSelectionChange = (val) => {
+            state.multipleSelection = val
+        }
+        const changePage = (val) => {
+            state.query.page = val
+            fetchTableData()
+        }
+        return {
+            ...toRefs(state),
+            multipleTable,
+            handleSelectionChange,
+            handleAdd,
+            handleEdit,
+            handleDelete,
+            fetchTableData,
+            changePage,
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>