feat: new

src/views/Config/Global/FaceConfig.vue

@@ -0,0 +1,90 @@
+<script setup lang='ts'>
+import { ref, watch } from 'vue'
+import useStore from '@/store'
+import zod from 'zod';
+
+const personConfig = useStore().personConfig
+const { getTableRowCount: tableRowCount, getShowField} = personConfig
+
+const formData = ref({
+    rowCount: tableRowCount,
+    showField: getShowField
+})
+const formErr = ref({
+    rowCount: '',
+})
+
+const schema = zod.object({
+    rowCount: zod.number({
+        required_error: '必填项',
+        invalid_type_error: '必须填入数字',
+    })
+        .min(1, '最小为1')
+        .max(100, '最大为100')
+    // 格式化
+
+
+})
+type ValidatePayload = zod.infer<typeof schema>
+const payload: ValidatePayload = {
+    rowCount: formData.value.rowCount,
+}
+const parseSchema = (props: ValidatePayload) => {
+    return schema.parseAsync(props)
+}
+
+
+const handleChangeShowFields = (fieldItem: any) => {
+    formData.value.showField.map((item)=>{
+        if(item.label===fieldItem.label){
+            item.value=!item.value
+        }
+    })
+}
+
+watch(() => formData.value.rowCount, () => {
+    payload.rowCount = formData.value.rowCount
+    parseSchema(payload).then(res => {
+        console.log('code line-40 \n\r😀 res:\n\r', res);
+        if(res.rowCount){
+            personConfig.setTableRowCount(res.rowCount)
+        }
+    })
+        .catch(err => {
+            formErr.value.rowCount = err.issues[0].message
+        })
+})
+watch(() => formData.value.showField, () => {
+    personConfig.setShowFields(formData.value.showField)
+},{deep:true})
+</script>
+
+<template>
+    <div>
+        <label class="w-full max-w-xs mb-10 form-control">
+            <div class="label">
+                <span class="label-text">列数</span>
+            </div>
+            <input type="number" v-model="formData.rowCount" placeholder="Type here"
+                class="w-full max-w-xs input input-bordered" />
+            <div class="help">
+                <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
+                    {{ formErr.rowCount }}
+                </span>
+            </div>
+        </label>
+        <label class="w-full max-w-xs form-control">
+            <div class="label">
+                <span class="label-text">展示字段</span>
+            </div>
+            <ul class="flex gap-6 pl-0">
+                <li v-for="item in formData.showField" :key="item" class="flex items-center gap-1">
+                    <input type="checkbox" :checked="item.value" class="border-solid checkbox checkbox-primary border-1"   @change="handleChangeShowFields(item)"/>
+                    <span class="label-text">{{ item.label }}</span>
+                </li>
+            </ul>
+        </label>
+    </div>
+</template>
+
+<style lang='scss' scoped></style>

src/views/Config/Global/ImageConfig.vue

@@ -0,0 +1,91 @@
+<script setup lang='ts'>
+import { ref, onMounted, watch } from 'vue'
+import { readImage } from '@/utils/file'
+import localforage from 'localforage'
+
+const limitType = ref('image/*')
+const imgList = ref<any>([])
+const imgUploadToast = ref(0) //0是不显示，1是成功，2是失败,3是不是图片
+const imageDbStore = localforage.createInstance({
+    name: 'imgStore'
+})
+const handleFileChange = async (e: any) => {
+    const isImage= /image*/.test(e.target.files[0].type)
+    if (!isImage) {
+        imgUploadToast.value = 3
+
+        return
+    }
+    let { dataUrl, fileName } = await readImage(e.target.files[0])
+    imageDbStore.setItem(new Date().getTime().toString() + '+' + fileName, dataUrl)
+        .then(() => {
+            imgUploadToast.value = 1
+        })
+        .catch(() => {
+            imgUploadToast.value = 2
+        })
+}
+
+const getImageDbStore =async () => {
+    const keys =await imageDbStore.keys()
+    if(keys.length>0){
+        imageDbStore.iterate((value, key) => {
+            imgList.value.push({
+                key,
+                value
+            })
+        })
+    }
+}
+
+onMounted(() => {
+    getImageDbStore()
+})
+watch(() => imgUploadToast.value, (val) => {
+    if (val !== 0) {
+        setTimeout(() => {
+            imgUploadToast.value = 0
+        }, 2000)
+    }
+})
+</script>
+
+<template>
+    <div class="toast toast-top toast-end">
+        <div class="alert alert-error" v-if="imgUploadToast == 2">
+            <span>上传失败</span>
+        </div>
+        <div class="alert alert-success" v-if="imgUploadToast == 1">
+            <span>上传成功</span>
+        </div>
+        <div class="alert alert-error" v-if="imgUploadToast == 3">
+            <span>不是图片</span>
+        </div>
+    </div>
+
+    <div>
+        <div class="">
+            <label for="explore">
+                <input type="file" class="" id="explore" style="display: none" @change="handleFileChange"
+                    :accept="limitType" />
+                <span class="btn btn-primary btn-sm">上传图片</span>
+            </label>
+        </div>
+        <ul>
+            <li v-for="item in imgList" :key="item">
+                <div class="flex items-center gap-3">
+                    <div class="avatar">
+                        <div class="mask mask-squircle w-12 h-12">
+                            <img :src="item.value" alt="Avatar Tailwind CSS Component" />
+                        </div>
+                    </div>
+                    <div>
+                        <div class="font-bold">{{ item.key.split('+')[1] }}</div>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<style lang='scss' scoped></style>