diff --git a/src/views/device/Product/Detail/BasicInfo/index.vue b/src/views/device/Product/Detail/BasicInfo/index.vue
new file mode 100644
index 00000000..8d5b884c
--- /dev/null
+++ b/src/views/device/Product/Detail/BasicInfo/index.vue
@@ -0,0 +1 @@
+<!-- 配置信息-->
diff --git a/src/views/device/Product/DialogTips/index.vue b/src/views/device/Product/DialogTips/index.vue
new file mode 100644
index 00000000..6c403056
--- /dev/null
+++ b/src/views/device/Product/DialogTips/index.vue
@@ -0,0 +1,99 @@
+<!-- 产品保存成功后的提示框 -->
+<template>
+    <a-modal
+        :maskClosable="false"
+        destroy-on-close
+        v-model:visible="visible"
+        @cancel="cancel"
+        v-bind="layout"
+        width="650px"
+    >
+        <template #title>
+            <span>产品创建成功</span>
+        </template>
+        <template #footer>
+            <a-button @click="cancel">关闭</a-button>
+        </template>
+        <div class="product-tips">
+            <div style="display: flex">
+                <div class="product-icon">
+                    <check-circle-outlined class="icon-style" />
+                </div>
+                <div class="product-title">产品创建成功</div>
+            </div>
+            <div style="display: flex">
+                <div class="product-id">产品ID: 12333</div>
+                <div class="product-btn" @click="jump">查看详情</div>
+            </div>
+            <div>接下来推荐操作:</div>
+            <div class="product-main">1、配置产品接入方式</div>
+            <div class="product-text">
+                点击具体产品的查看按钮,进入“设备接入”tab页，并参照设备铭牌说明选择匹配的接入方式
+            </div>
+            <div class="product-main">2、添加测试设备</div>
+            <div class="product-text">
+                进入设备列表，添加单个设备，用于验证产品模型是否配置正确
+            </div>
+            <div class="product-main">3、功能调试</div>
+            <div class="product-text">
+                点击查看具体设备，进入“设备诊断”对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确
+            </div>
+            <div class="product-main">4、批量添加设备</div>
+            <div class="product-text">
+                进入设备列表页面，点击批量导入设备，批量添加同一产品下的设备
+            </div>
+        </div>
+    </a-modal>
+</template>
+<script lang="ts" setup name="DialogTips">
+import { getImage } from '@/utils/comm.ts';
+import { CheckCircleOutlined } from '@ant-design/icons-vue';
+const visible = ref<boolean>(false);
+/**
+ * 弹窗关闭
+ */
+const cancel = () => {
+    visible.value = false;
+};
+/**
+ * 显示弹窗
+ */
+const show = () => {
+    visible.value = true;
+};
+/**
+ * 跳转页面
+ */
+const jump = () => {};
+defineExpose({
+    show: show,
+});
+</script>
+<style lang="less" scoped>
+.product-tips {
+    .product-icon {
+        .icon-style {
+            color: #52c41a;
+            font-size: 25px;
+        }
+    }
+    .product-title {
+        margin-left: 10px;
+        margin-top: 2px;
+        font-weight: 600;
+    }
+    .product-id {
+        margin: 10px 15px 10px 0px;
+    }
+    .product-btn {
+        margin: 10px 0px 10px 0;
+        color: #0297d7;
+    }
+    .product-text {
+        color: #757575;
+    }
+    .product-main {
+        font-weight: 600;
+    }
+}
+</style>
diff --git a/src/views/device/Product/Save/index.vue b/src/views/device/Product/Save/index.vue
index d7605411..c004f166 100644
--- a/src/views/device/Product/Save/index.vue
+++ b/src/views/device/Product/Save/index.vue
@@ -194,6 +194,7 @@
             </a-form>
         </div>
     </a-modal>
+    <DialogTips ref="dialogRef" />
 </template>
 
 <script lang="ts" setup>
@@ -201,7 +202,7 @@ import { category } from '@/api/device/product';
 import { Form } from 'ant-design-vue';
 import { getImage } from '@/utils/comm.ts';
 import { message } from 'ant-design-vue';
-import ChooseCard from '../ChooseCard/index.vue';
+import DialogTips from '../DialogTips/index.vue';
 import { filterTreeSelectNode, filterSelectNode } from '@/utils/comm';
 import { FILE_UPLOAD } from '@/api/comm';
 import { isInput } from '@/utils/regular';
@@ -225,6 +226,7 @@ const props = defineProps({
     },
 });
 const loading = ref<boolean>(false);
+const dialogRef = ref();
 const treeList = ref<Record<string, any>[]>([]);
 const visible = ref<boolean>(false);
 const logoLoading = ref<boolean>(false);
@@ -335,26 +337,27 @@ watch(
  * 显示弹窗
  */
 const show = (data: any) => {
-    console.log(props.isAdd, '11111');
     if (props.isAdd === 2) {
-        // form.name = data.name;
-        // form.classifiedId = data.classifiedId;
-        // form.classifiedName = data.classifiedName;
-        // form.photoUrl = data.photoUrl || photoValue.value;
-        // form.deviceType = data.deviceType.value;
-        // form.describe = form.describe;
-        // form.id = data.id;
-        // disabled.value = true;
-    } else {
-        // form.name = '';
-        // form.classifiedId = '';
-        // form.classifiedName = '';
-        // form.photoUrl = photoValue.value;
-        // form.deviceType = '';
-        // form.describe = '';
-        // form.id = '';
+        form.name = data.name;
+        form.classifiedId = data.classifiedId;
+        form.classifiedName = data.classifiedName;
+        form.photoUrl = data.photoUrl || photoValue.value;
+        form.deviceType = data.deviceType.value;
+        form.describe = form.describe;
+        form.id = data.id;
+        disabled.value = true;
+    } else if (props.isAdd === 1) {
+        form.name = '';
+        form.classifiedId = '';
+        form.classifiedName = '';
+        form.photoUrl = getImage('/device/instance/device-card.png');
+        form.deviceType = '';
+        form.describe = '';
+        form.id = '';
+        disabled.value = false;
+        dialogRef.value.show();
     }
-    visible.value = true;
+    // visible.value = true;
 };
 
 /**
@@ -376,35 +379,6 @@ const submitData = () => {
         .then(async () => {})
         .catch((err: any) => {});
 };
-/**
- * 文件上传之前
- */
-const beforeUpload = (file: any) => {
-    const isType: any = imageTypes.includes(file.type);
-    if (!isType) {
-        message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
-        return false;
-    }
-    const isSize = file.size / 1024 / 1024 < 4;
-    if (!isSize) {
-        message.error(`图片大小必须小于${4}M`);
-    }
-    return isType && isSize;
-};
-
-/**
- * 文件改变事件
- */
-const handleChange = (info: any) => {
-    if (info.file.status === 'uploading') {
-        logoLoading.value = true;
-    }
-    if (info.file.status === 'done') {
-        info.file.url = info.file.response?.result;
-        logoLoading.value = false;
-        photoValue.value = info.file.response?.result;
-    }
-};
 /**
  * 初始化
  */
diff --git a/src/views/device/Product/index.vue b/src/views/device/Product/index.vue
index e71205cd..380e6ef8 100644
--- a/src/views/device/Product/index.vue
+++ b/src/views/device/Product/index.vue
@@ -41,27 +41,42 @@
                         </a-row>
                     </template>
                     <template #actions="item">
-                        <a-popconfirm
-                            v-if="item.popConfirm"
-                            v-bind="item.popConfirm"
+                        <a-tooltip
+                            v-bind="item.tooltip"
+                            :title="item.disabled && item.tooltip.title"
                         >
-                            <a-button :disabled="item.disabled">
-                                <DeleteOutlined v-if="item.key === 'delete'" />
-                                <template v-else>
-                                    <AIcon :type="item.icon" />
-                                    <span>{{ item.text }}</span>
-                                </template>
-                            </a-button>
-                        </a-popconfirm>
-                        <template v-else>
-                            <a-button :disabled="item.disabled">
-                                <DeleteOutlined v-if="item.key === 'delete'" />
-                                <template v-else>
-                                    <AIcon :type="item.icon" />
-                                    <span>{{ item.text }}</span>
-                                </template>
-                            </a-button>
-                        </template>
+                            <a-popconfirm
+                                v-if="item.popConfirm"
+                                v-bind="item.popConfirm"
+                                :disabled="item.disabled"
+                            >
+                                <a-button :disabled="item.disabled">
+                                    <AIcon
+                                        type="DeleteOutlined"
+                                        v-if="item.key === 'delete'"
+                                    />
+                                    <template v-else>
+                                        <AIcon :type="item.icon" />
+                                        <span>{{ item?.text }}</span>
+                                    </template>
+                                </a-button>
+                            </a-popconfirm>
+                            <template v-else>
+                                <a-button
+                                    :disabled="item.disabled"
+                                    @click="item.onClick"
+                                >
+                                    <AIcon
+                                        type="DeleteOutlined"
+                                        v-if="item.key === 'delete'"
+                                    />
+                                    <template v-else>
+                                        <AIcon :type="item.icon" />
+                                        <span>{{ item?.text }}</span>
+                                    </template>
+                                </a-button>
+                            </template>
+                        </a-tooltip>
                     </template>
                 </CardBox>
             </template>
@@ -303,7 +318,9 @@ const getActions = (
 const add = () => {
     isAdd.value = 1;
     title.value = '新增';
-    saveRef.value.show(currentForm.value);
+    nextTick(() => {
+        saveRef.value.show(currentForm.value);
+    });
 };
 
 // 筛选
diff --git a/src/views/init-home/Basic/index.vue b/src/views/init-home/Basic/index.vue
new file mode 100644
index 00000000..fc2c7eea
--- /dev/null
+++ b/src/views/init-home/Basic/index.vue
@@ -0,0 +1,717 @@
+<!-- 基础内容 -->
+<template>
+    <a-form layout="vertical" :model="form" ref="formBasicRef">
+        <a-row :span="24" :gutter="24">
+            <a-col :span="10">
+                <a-form-item
+                    label="系统名称"
+                    name="title"
+                    v-bind="validateInfos.title"
+                >
+                    <a-input
+                        v-model:value="form.title"
+                        :maxlength="64"
+                        placeholder="请输入系统名称"
+                    />
+                </a-form-item>
+                <a-form-item
+                    label="主题色"
+                    name="headerTheme"
+                    v-bind="validateInfos.headerTheme"
+                >
+                    <a-select v-model:value="form.headerTheme">
+                        <a-select-option value="light">白色</a-select-option>
+                        <a-select-option value="dark">黑色</a-select-option>
+                    </a-select>
+                </a-form-item>
+                <a-form-item>
+                    <template #label>
+                        <span>高德API Key</span>
+                        <a-tooltip title="配置后平台可调用高德地图GIS服务">
+                            <img
+                                class="img-style"
+                                :src="getImage('/init-home/mark.png')"
+                            />
+                        </a-tooltip>
+                    </template>
+                    <a-input
+                        v-model:value="form.apikey"
+                        placeholder="请输入高德API Key"
+                    />
+                </a-form-item>
+                <a-form-item name="basePath" v-bind="validateInfos.basePath">
+                    <template #label>
+                        <span>base-path</span>
+                        <a-tooltip title="系统后台访问的url">
+                            <img
+                                class="img-style"
+                                :src="getImage('/init-home/mark.png')"
+                            />
+                        </a-tooltip>
+                    </template>
+                    <a-input
+                        v-model:value="form.basePath"
+                        placeholder="请输入高德API Key"
+                    />
+                </a-form-item>
+                <a-row :gutter="24" :span="24">
+                    <a-col>
+                        <a-form-item label="系统logo">
+                            <div class="upload-image-warp-logo">
+                                <div class="upload-image-border-logo">
+                                    <a-upload
+                                        name="file"
+                                        :action="FILE_UPLOAD"
+                                        :headers="headers"
+                                        :showUploadList="false"
+                                        :beforeUpload="beforeLogoUpload"
+                                        @change="handleChangeLogo"
+                                        :accept="
+                                            imageTypes && imageTypes.length
+                                                ? imageTypes.toString()
+                                                : ''
+                                        "
+                                    >
+                                        <div class="upload-image-content-logo">
+                                            <div
+                                                class="loading-logo"
+                                                v-if="logoLoading"
+                                            >
+                                                <LoadingOutlined
+                                                    style="font-size: 28px"
+                                                />
+                                            </div>
+                                            <div
+                                                class="upload-image"
+                                                v-if="logoValue"
+                                                :style="
+                                                    logoValue
+                                                        ? `background-image: url(${logoValue});`
+                                                        : ''
+                                                "
+                                            ></div>
+                                            <div
+                                                v-if="logoValue"
+                                                class="upload-image-mask"
+                                            >
+                                                点击修改
+                                            </div>
+                                            <div v-else>
+                                                <div v-if="logoLoading">
+                                                    <LoadingOutlined
+                                                        style="font-size: 28px"
+                                                    />
+                                                </div>
+                                                <div v-else>
+                                                    <PlusOutlined
+                                                        style="font-size: 28px"
+                                                    />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </a-upload>
+                                    <div v-if="logoLoading">
+                                        <div class="upload-loading-mask">
+                                            <LoadingOutlined
+                                                v-if="logoLoading"
+                                                style="font-size: 28px"
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="upload-tips">推荐尺寸200*200</div>
+                            <div class="upload-tips">支持jpg,png</div>
+                        </a-form-item>
+                    </a-col>
+                    <a-col>
+                        <a-form-item>
+                            <template #label>
+                                <span>浏览器页签</span>
+                                <a-tooltip title="浏览器tab页中显示的图片元素">
+                                    <img
+                                        class="img-style"
+                                        :src="getImage('/init-home/mark.png')"
+                                    />
+                                </a-tooltip>
+                            </template>
+                            <div class="upload-image-warp-logo">
+                                <div class="upload-image-border-logo">
+                                    <a-upload
+                                        name="file"
+                                        :action="FILE_UPLOAD"
+                                        :headers="headers"
+                                        :showUploadList="false"
+                                        :beforeUpload="beforeIconUpload"
+                                        @change="changeIconUpload"
+                                        :accept="
+                                            iconTypes && iconTypes.length
+                                                ? iconTypes.toString()
+                                                : ''
+                                        "
+                                    >
+                                        <div class="upload-image-content-logo">
+                                            <div
+                                                v-if="iconLoading"
+                                                class="loading-icon"
+                                            >
+                                                <LoadingOutlined
+                                                    style="font-size: 28px"
+                                                />
+                                            </div>
+                                            <div
+                                                class="upload-image-icon"
+                                                v-if="iconValue"
+                                                :style="
+                                                    iconValue
+                                                        ? `background-image: url(${iconValue});`
+                                                        : ''
+                                                "
+                                            ></div>
+                                            <div
+                                                v-if="iconValue"
+                                                class="upload-image-mask"
+                                            >
+                                                点击修改
+                                            </div>
+                                            <div v-else>
+                                                <div>
+                                                    <PlusOutlined
+                                                        style="font-size: 28px"
+                                                    />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </a-upload>
+                                </div>
+                            </div>
+
+                            <div class="upload-tips">推荐尺寸64*64</div>
+                            <div class="upload-tips">支持icon格式</div>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-col>
+            <a-col :span="14">
+                <a-form-item label="登录背景图">
+                    <div class="upload-image-warp-back">
+                        <div class="upload-image-border-back">
+                            <a-upload
+                                name="file"
+                                :action="FILE_UPLOAD"
+                                :headers="headers"
+                                :beforeUpload="beforeBackUpload"
+                                :showUploadList="false"
+                                @change="changeBackUpload"
+                                :accept="
+                                    imageTypes && imageTypes.length
+                                        ? imageTypes.toString()
+                                        : ''
+                                "
+                            >
+                                <div class="upload-image-content-back">
+                                    <div
+                                        v-if="backLoading"
+                                        class="loading-back"
+                                    >
+                                        <LoadingOutlined
+                                            style="font-size: 28px"
+                                        />
+                                    </div>
+                                    <div
+                                        class="upload-image"
+                                        v-if="backValue"
+                                        :style="
+                                            backValue
+                                                ? `background-image: url(${backValue});`
+                                                : ''
+                                        "
+                                    ></div>
+                                    <div
+                                        v-if="backValue"
+                                        class="upload-image-mask"
+                                    >
+                                        点击修改
+                                    </div>
+                                    <div v-else>
+                                        <div>
+                                            <PlusOutlined
+                                                style="font-size: 28px"
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </a-upload>
+                        </div>
+                    </div>
+                    <div class="upload-tips">支持4M以内的图片:支持jpg、png</div>
+                    <div class="upload-tips">建议尺寸1400x1080</div>
+                </a-form-item>
+            </a-col>
+        </a-row>
+    </a-form>
+</template>
+<script setup lang="ts">
+import { modalState, formState, logoState } from '../data/interface';
+import { getImage } from '@/utils/comm.ts';
+import { Form } from 'ant-design-vue';
+import {
+    getSystemPermission,
+    save,
+    addRole,
+    getRoleMenu,
+    updateRoleMenu,
+    getResourcesCurrent,
+    saveNetwork,
+    saveProtocol,
+    getProtocol,
+    saveAccessConfig,
+    saveProduct,
+    saveDevice,
+    changeDeploy,
+    deployDevice,
+    saveInit,
+} from '@/api/initHome';
+import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
+import { message } from 'ant-design-vue';
+const formRef = ref();
+const menuRef = ref();
+const formBasicRef = ref();
+const useForm = Form.useForm;
+const iconValue = ref('/public/favicon.ico');
+const backValue = ref('/public/images/login.png');
+const logoValue = ref('/public/logo.png');
+const logoLoading = ref(false);
+const backLoading = ref(false);
+const iconLoading = ref(false);
+const imageTypes = ref(['image/jpeg', 'image/png']);
+const iconTypes = ref(['image/x-icon']);
+/**
+ * 表单数据
+ */
+const form = ref<formState>({
+    title: '',
+    headerTheme: 'light',
+    apikey: '',
+    basePath: `${window.location.origin}/api`,
+    logo: '',
+    icon: '',
+});
+const rulesFrom = ref({
+    title: [
+        {
+            required: true,
+            message: '请输入系统名称',
+            trigger: 'change',
+        },
+    ],
+    headerTheme: [
+        {
+            required: true,
+            message: '请选择主题色',
+            trigger: 'blur',
+        },
+    ],
+    basePath: [
+        {
+            required: true,
+            message: '请输入base-path',
+            trigger: 'blur',
+        },
+    ],
+});
+const { resetFields, validate, validateInfos } = useForm(
+    form.value,
+    rulesFrom.value,
+);
+/**
+ * 提交数据
+ */
+const saveBasicInfo = async () => {
+    validate()
+        .then(async () => {
+            const item = [
+                {
+                    scope: 'front',
+                    properties: {
+                        ...form,
+                        apikey: '',
+                        'base-path': '',
+                    },
+                },
+                {
+                    scope: 'amap',
+                    properties: {
+                        api: form.apikey,
+                    },
+                },
+                {
+                    scope: 'paths',
+                    properties: {
+                        'base-path': form.basePath,
+                    },
+                },
+            ];
+            const res = await save(item);
+            if (res.status === 200) {
+                const ico: any = document.querySelector('link[rel="icon"]');
+                if (ico !== null) {
+                    ico.href = form.icon;
+                }
+            }
+            //     basicData.isSucessBasic = 3;
+            // } else {
+            //     basicData.isSucessBasic = 2;
+            // }
+        })
+        .catch((error: ValidateErrorEntity<formState>) => {
+            // basicData.isSucessBasic = 2;
+        });
+};
+/**
+ * logo格式校验
+ */
+const beforeLogoUpload = (file: any) => {
+    const isType: any = imageTypes.value.includes(file.type);
+    if (!isType) {
+        message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
+        return false;
+    }
+    const isSize = file.size / 1024 / 1024 < 4;
+    if (!isSize) {
+        message.error(`图片大小必须小于${4}M`);
+    }
+    return isType && isSize;
+};
+
+/*
+ * logo上传改变事件
+ */
+const handleChangeLogo = (info: any) => {
+    if (info.file.status === 'uploading') {
+        logoLoading.value = true;
+    }
+    if (info.file.status === 'done') {
+        info.file.url = info.file.response?.result;
+        logoLoading.value = false;
+        logoValue.value = info.file.response?.result;
+    }
+};
+
+/**
+ * 背景图片上传之前
+ */
+const beforeBackUpload = (file: any) => {
+    const isType = imageTypes.value.includes(file.type);
+    if (!isType) {
+        message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
+        return false;
+    }
+    const isSize = file.size / 1024 / 1024 < 4;
+    if (!isSize) {
+        message.error(`图片大小必须小于${4}M`);
+    }
+    return isType && isSize;
+};
+/**
+ * 背景图片发生改变
+ */
+const changeBackUpload = (info: any) => {
+    if (info.file.status === 'uploading') {
+        backLoading.value = true;
+    }
+    if (info.file.status === 'done') {
+        info.file.url = info.file.response?.result;
+        backLoading.value = false;
+        backValue.value = info.file.response?.result;
+    }
+};
+defineExpose({
+    submitBasic: saveBasicInfo,
+});
+</script>
+<style scoped lang="less">
+.page-container {
+    width: 100%;
+    height: 100vh;
+    padding: 32px 128px 64px;
+    overflow: hidden;
+    background-image: url(/images/init-home/background.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    .container-text {
+        font-weight: 700;
+        font-size: 16px;
+        .container-title {
+            position: relative;
+            padding-left: 10px;
+            color: rgba(0, 0, 0, 0.8);
+            font-weight: 600;
+            line-height: 1;
+            &:before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 4px;
+                height: 100%;
+                background-color: #1d39c4;
+                border-radius: 0 3px 3px 0;
+                content: '';
+            }
+        }
+    }
+    .container-box {
+        width: 100%;
+        height: 100%;
+        padding: 24px;
+        background: #fff;
+        .container-main {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            height: 100%;
+            overflow-y: auto;
+            .container-right {
+                width: calc(100% - 70px);
+                .title {
+                    font-size: 15px;
+                }
+                .sub-title {
+                    margin-top: 2px;
+                    margin-left: 8px;
+                    color: #666;
+                    font-size: 12px;
+                    opacity: 0.85;
+                }
+                .img-style {
+                    width: 16px;
+                    height: 16px;
+                    margin-left: 5px;
+                }
+                .menu-style {
+                    display: flex;
+                    align-items: center;
+                    .menu-img {
+                        margin-right: 16px;
+                    }
+                }
+                .init-home-role {
+                    .init-home-role-content {
+                        display: flex;
+                        grid-gap: 24px;
+                        gap: 24px;
+                    }
+                    .role-item-1 {
+                        background-image: url(/images/init-home/role1.png);
+                    }
+                    .role-item-2 {
+                        background-image: url(/images/init-home/role2.png);
+                    }
+                    .role-item-3 {
+                        background-image: url(/images/init-home/role3.png);
+                    }
+                    .role-item {
+                        position: relative;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-between;
+                        margin-bottom: 30px;
+                        padding: 24px;
+                        background-repeat: no-repeat;
+                        background-position: 50%;
+                        background-size: 370px;
+                        border: 1px solid #f5f5f5;
+                        .role-item-title {
+                            display: flex;
+                            .role-title {
+                                flex: 1 1 auto;
+                                font-weight: 700;
+                                font-size: 16px;
+                            }
+                        }
+                        .role-item-content {
+                            width: 250px;
+                            height: 260px;
+                            margin-top: 24px;
+                        }
+                        .role-item-footer {
+                            position: absolute;
+                            bottom: -30px;
+                            left: 0;
+                            width: 100%;
+                            color: #999;
+                            font-size: 12px;
+                            text-align: center;
+                        }
+                    }
+                }
+                .init-data-img {
+                    width: 300px;
+                }
+
+                .upload-image-warp-logo {
+                    display: flex;
+                    justify-content: flex-start;
+                    .upload-image-border-logo {
+                        position: relative;
+                        overflow: hidden;
+                        border: 1px dashed #d9d9d9;
+                        transition: all 0.3s;
+                        width: 160px;
+                        height: 150px;
+                        &:hover {
+                            border: 1px dashed #1890ff;
+                            display: flex;
+                        }
+                        .upload-image-content-logo {
+                            align-items: center;
+                            justify-content: center;
+                            position: relative;
+                            display: flex;
+                            flex-direction: column;
+                            width: 160px;
+                            height: 150px;
+                            padding: 8px;
+                            background-color: rgba(0, 0, 0, 0.06);
+                            cursor: pointer;
+                            .loading-logo {
+                                position: absolute;
+                                top: 50%;
+                            }
+                            .loading-icon {
+                                position: absolute;
+                            }
+                            .upload-image {
+                                width: 100%;
+                                height: 100%;
+                                background-repeat: no-repeat;
+                                background-position: 50%;
+                                background-size: cover;
+                            }
+                            .upload-image-icon {
+                                width: 100%;
+                                height: 100%;
+                                background-repeat: no-repeat;
+                                background-position: 50%;
+                                background-size: inherit;
+                            }
+                            .upload-image-mask {
+                                align-items: center;
+                                justify-content: center;
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                display: none;
+                                width: 100%;
+                                height: 100%;
+                                color: #fff;
+                                font-size: 16px;
+                                background-color: rgba(0, 0, 0, 0.35);
+                            }
+                            &:hover .upload-image-mask {
+                                display: flex;
+                            }
+                        }
+                    }
+                }
+
+                .upload-image-warp-back {
+                    display: flex;
+                    justify-content: flex-start;
+                    .upload-image-border-back {
+                        position: relative;
+                        overflow: hidden;
+                        border: 1px dashed #d9d9d9;
+                        transition: all 0.3s;
+                        width: 570px;
+                        height: 415px;
+                        &:hover {
+                            border: 1px dashed #1890ff;
+                            display: flex;
+                        }
+                        .upload-image-content-back {
+                            align-items: center;
+                            justify-content: center;
+                            position: relative;
+                            display: flex;
+                            flex-direction: column;
+                            width: 570px;
+                            height: 415px;
+                            padding: 8px;
+                            background-color: rgba(0, 0, 0, 0.06);
+                            cursor: pointer;
+                            .loading-back {
+                                position: absolute;
+                            }
+                            .upload-image {
+                                width: 100%;
+                                height: 100%;
+                                background-repeat: no-repeat;
+                                background-position: 50%;
+                                background-size: cover;
+                            }
+                            .upload-image-mask {
+                                align-items: center;
+                                justify-content: center;
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                display: none;
+                                width: 100%;
+                                height: 100%;
+                                color: #fff;
+                                font-size: 16px;
+                                background-color: rgba(0, 0, 0, 0.35);
+                            }
+                            &:hover .upload-image-mask {
+                                display: flex;
+                            }
+                        }
+                    }
+                }
+                .upload-tips {
+                    color: rgba(0, 0, 0, 0.45);
+                    font-size: 14px;
+                    line-height: 1.5715;
+                }
+                // .uplod-style {
+                //     :deep(.ant-upload.ant-upload-select-picture-card) {
+                //         width: 180px;
+                //         height: 180px;
+                //     }
+                // }
+                .btn-style {
+                    margin-top: 20px;
+                    color: #fff;
+                    border-color: #1d39c4;
+                    background: #1d39c4;
+                }
+            }
+        }
+    }
+    .modal-style {
+        .data-content {
+            background: rgb(236, 237, 238);
+            .data-p-style {
+                padding: 10px;
+            }
+        }
+    }
+    ::-webkit-scrollbar {
+        width: 12px;
+    }
+
+    /* 滚动槽 */
+    ::-webkit-scrollbar-track {
+        background: #f2f2f2;
+        border-radius: 8px;
+    }
+
+    /* 滚动条滑块 */
+    ::-webkit-scrollbar-thumb {
+        background: #cecece;
+        border-radius: 8px;
+    }
+}
+</style>
diff --git a/src/views/init-home/index.vue b/src/views/init-home/index.vue
index 896f2983..ca732ea1 100644
--- a/src/views/init-home/index.vue
+++ b/src/views/init-home/index.vue
@@ -16,426 +16,7 @@
                                         >配置平台名称、登录背景图、主题色等基本信息</span
                                     >
                                 </template>
-                                <a-form
-                                    layout="vertical"
-                                    :model="form"
-                                    ref="formBasicRef"
-                                >
-                                    <a-row :span="24" :gutter="24">
-                                        <a-col :span="10">
-                                            <a-form-item
-                                                label="系统名称"
-                                                name="title"
-                                                v-bind="validateInfos.title"
-                                            >
-                                                <a-input
-                                                    v-model:value="form.title"
-                                                    :maxlength="64"
-                                                    placeholder="请输入系统名称"
-                                                />
-                                            </a-form-item>
-                                            <a-form-item
-                                                label="主题色"
-                                                name="headerTheme"
-                                                v-bind="
-                                                    validateInfos.headerTheme
-                                                "
-                                            >
-                                                <a-select
-                                                    v-model:value="
-                                                        form.headerTheme
-                                                    "
-                                                >
-                                                    <a-select-option
-                                                        value="light"
-                                                        >白色</a-select-option
-                                                    >
-                                                    <a-select-option
-                                                        value="dark"
-                                                        >黑色</a-select-option
-                                                    >
-                                                </a-select>
-                                            </a-form-item>
-                                            <a-form-item>
-                                                <template #label>
-                                                    <span>高德API Key</span>
-                                                    <a-tooltip
-                                                        title="配置后平台可调用高德地图GIS服务"
-                                                    >
-                                                        <img
-                                                            class="img-style"
-                                                            :src="
-                                                                getImage(
-                                                                    '/init-home/mark.png',
-                                                                )
-                                                            "
-                                                        />
-                                                    </a-tooltip>
-                                                </template>
-                                                <a-input
-                                                    v-model:value="form.apikey"
-                                                    placeholder="请输入高德API Key"
-                                                />
-                                            </a-form-item>
-                                            <a-form-item
-                                                name="basePath"
-                                                v-bind="validateInfos.basePath"
-                                            >
-                                                <template #label>
-                                                    <span>base-path</span>
-                                                    <a-tooltip
-                                                        title="系统后台访问的url"
-                                                    >
-                                                        <img
-                                                            class="img-style"
-                                                            :src="
-                                                                getImage(
-                                                                    '/init-home/mark.png',
-                                                                )
-                                                            "
-                                                        />
-                                                    </a-tooltip>
-                                                </template>
-                                                <a-input
-                                                    v-model:value="
-                                                        form.basePath
-                                                    "
-                                                    placeholder="请输入高德API Key"
-                                                />
-                                            </a-form-item>
-                                            <a-row :gutter="24" :span="24">
-                                                <a-col>
-                                                    <a-form-item
-                                                        label="系统logo"
-                                                    >
-                                                        <div
-                                                            class="upload-image-warp-logo"
-                                                        >
-                                                            <div
-                                                                class="upload-image-border-logo"
-                                                            >
-                                                                <a-upload
-                                                                    name="file"
-                                                                    :action="
-                                                                        FILE_UPLOAD
-                                                                    "
-                                                                    :headers="
-                                                                        headers
-                                                                    "
-                                                                    :showUploadList="
-                                                                        false
-                                                                    "
-                                                                    :beforeUpload="
-                                                                        beforeLogoUpload
-                                                                    "
-                                                                    @change="
-                                                                        handleChangeLogo
-                                                                    "
-                                                                    :accept="
-                                                                        imageTypes &&
-                                                                        imageTypes.length
-                                                                            ? imageTypes.toString()
-                                                                            : ''
-                                                                    "
-                                                                >
-                                                                    <div
-                                                                        class="upload-image-content-logo"
-                                                                    >
-                                                                        <div
-                                                                            class="loading-logo"
-                                                                            v-if="
-                                                                                logoLoading
-                                                                            "
-                                                                        >
-                                                                            <LoadingOutlined
-                                                                                style="
-                                                                                    font-size: 28px;
-                                                                                "
-                                                                            />
-                                                                        </div>
-                                                                        <div
-                                                                            class="upload-image"
-                                                                            v-if="
-                                                                                logoValue
-                                                                            "
-                                                                            :style="
-                                                                                logoValue
-                                                                                    ? `background-image: url(${logoValue});`
-                                                                                    : ''
-                                                                            "
-                                                                        ></div>
-                                                                        <div
-                                                                            v-if="
-                                                                                logoValue
-                                                                            "
-                                                                            class="upload-image-mask"
-                                                                        >
-                                                                            点击修改
-                                                                        </div>
-                                                                        <div
-                                                                            v-else
-                                                                        >
-                                                                            <div
-                                                                                v-if="
-                                                                                    logoLoading
-                                                                                "
-                                                                            >
-                                                                                <LoadingOutlined
-                                                                                    style="
-                                                                                        font-size: 28px;
-                                                                                    "
-                                                                                />
-                                                                            </div>
-                                                                            <div
-                                                                                v-else
-                                                                            >
-                                                                                <PlusOutlined
-                                                                                    style="
-                                                                                        font-size: 28px;
-                                                                                    "
-                                                                                />
-                                                                            </div>
-                                                                        </div>
-                                                                    </div>
-                                                                </a-upload>
-                                                                <div
-                                                                    v-if="
-                                                                        logoLoading
-                                                                    "
-                                                                >
-                                                                    <div
-                                                                        class="upload-loading-mask"
-                                                                    >
-                                                                        <LoadingOutlined
-                                                                            v-if="
-                                                                                logoLoading
-                                                                            "
-                                                                            style="
-                                                                                font-size: 28px;
-                                                                            "
-                                                                        />
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-
-                                                        <div
-                                                            class="upload-tips"
-                                                        >
-                                                            推荐尺寸200*200
-                                                        </div>
-                                                        <div
-                                                            class="upload-tips"
-                                                        >
-                                                            支持jpg,png
-                                                        </div>
-                                                    </a-form-item>
-                                                </a-col>
-                                                <a-col>
-                                                    <a-form-item>
-                                                        <template #label>
-                                                            <span
-                                                                >浏览器页签</span
-                                                            >
-                                                            <a-tooltip
-                                                                title="浏览器tab页中显示的图片元素"
-                                                            >
-                                                                <img
-                                                                    class="img-style"
-                                                                    :src="
-                                                                        getImage(
-                                                                            '/init-home/mark.png',
-                                                                        )
-                                                                    "
-                                                                />
-                                                            </a-tooltip>
-                                                        </template>
-                                                        <div
-                                                            class="upload-image-warp-logo"
-                                                        >
-                                                            <div
-                                                                class="upload-image-border-logo"
-                                                            >
-                                                                <a-upload
-                                                                    name="file"
-                                                                    :action="
-                                                                        FILE_UPLOAD
-                                                                    "
-                                                                    :headers="
-                                                                        headers
-                                                                    "
-                                                                    :showUploadList="
-                                                                        false
-                                                                    "
-                                                                    :beforeUpload="
-                                                                        beforeIconUpload
-                                                                    "
-                                                                    @change="
-                                                                        changeIconUpload
-                                                                    "
-                                                                    :accept="
-                                                                        iconTypes &&
-                                                                        iconTypes.length
-                                                                            ? iconTypes.toString()
-                                                                            : ''
-                                                                    "
-                                                                >
-                                                                    <div
-                                                                        class="upload-image-content-logo"
-                                                                    >
-                                                                        <div
-                                                                            v-if="
-                                                                                iconLoading
-                                                                            "
-                                                                            class="loading-icon"
-                                                                        >
-                                                                            <LoadingOutlined
-                                                                                style="
-                                                                                    font-size: 28px;
-                                                                                "
-                                                                            />
-                                                                        </div>
-                                                                        <div
-                                                                            class="upload-image-icon"
-                                                                            v-if="
-                                                                                iconValue
-                                                                            "
-                                                                            :style="
-                                                                                iconValue
-                                                                                    ? `background-image: url(${iconValue});`
-                                                                                    : ''
-                                                                            "
-                                                                        ></div>
-                                                                        <div
-                                                                            v-if="
-                                                                                iconValue
-                                                                            "
-                                                                            class="upload-image-mask"
-                                                                        >
-                                                                            点击修改
-                                                                        </div>
-                                                                        <div
-                                                                            v-else
-                                                                        >
-                                                                            <div>
-                                                                                <PlusOutlined
-                                                                                    style="
-                                                                                        font-size: 28px;
-                                                                                    "
-                                                                                />
-                                                                            </div>
-                                                                        </div>
-                                                                    </div>
-                                                                </a-upload>
-                                                            </div>
-                                                        </div>
-
-                                                        <div
-                                                            class="upload-tips"
-                                                        >
-                                                            推荐尺寸64*64
-                                                        </div>
-                                                        <div
-                                                            class="upload-tips"
-                                                        >
-                                                            支持icon格式
-                                                        </div>
-                                                    </a-form-item>
-                                                </a-col>
-                                            </a-row>
-                                        </a-col>
-                                        <a-col :span="14">
-                                            <a-form-item label="登录背景图">
-                                                <div
-                                                    class="upload-image-warp-back"
-                                                >
-                                                    <div
-                                                        class="upload-image-border-back"
-                                                    >
-                                                        <a-upload
-                                                            name="file"
-                                                            :action="
-                                                                FILE_UPLOAD
-                                                            "
-                                                            :headers="headers"
-                                                            :beforeUpload="
-                                                                beforeBackUpload
-                                                            "
-                                                            :showUploadList="
-                                                                false
-                                                            "
-                                                            @change="
-                                                                changeBackUpload
-                                                            "
-                                                            :accept="
-                                                                imageTypes &&
-                                                                imageTypes.length
-                                                                    ? imageTypes.toString()
-                                                                    : ''
-                                                            "
-                                                        >
-                                                            <div
-                                                                class="upload-image-content-back"
-                                                            >
-                                                                <div
-                                                                    v-if="
-                                                                        backLoading
-                                                                    "
-                                                                    class="loading-back"
-                                                                >
-                                                                    <LoadingOutlined
-                                                                        style="
-                                                                            font-size: 28px;
-                                                                        "
-                                                                    />
-                                                                </div>
-                                                                <div
-                                                                    class="upload-image"
-                                                                    v-if="
-                                                                        backValue
-                                                                    "
-                                                                    :style="
-                                                                        backValue
-                                                                            ? `background-image: url(${backValue});`
-                                                                            : ''
-                                                                    "
-                                                                ></div>
-                                                                <div
-                                                                    v-if="
-                                                                        backValue
-                                                                    "
-                                                                    class="upload-image-mask"
-                                                                >
-                                                                    点击修改
-                                                                </div>
-                                                                <div v-else>
-                                                                    <div>
-                                                                        <PlusOutlined
-                                                                            style="
-                                                                                font-size: 28px;
-                                                                            "
-                                                                        />
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                        </a-upload>
-                                                        <!-- <div v-if="logoValue">
-                                                          <div v-if="logoLoading">
-                                                            <div class="upload-loading-mask"></div>
-                                                          </div>
-                                                        </div> -->
-                                                    </div>
-                                                </div>
-                                                <div class="upload-tips">
-                                                    支持4M以内的图片:支持jpg、png
-                                                </div>
-                                                <div class="upload-tips">
-                                                    建议尺寸1400x1080
-                                                </div>
-                                            </a-form-item>
-                                        </a-col>
-                                    </a-row>
-                                </a-form>
+                                <Basic ref="basicRef" />
                             </a-collapse-panel>
                             <a-collapse-panel key="2">
                                 <template #header>
@@ -743,6 +324,7 @@
 </template>
 <script setup lang="ts">
 import { getImage } from '@/utils/comm.ts';
+import Basic from './Basic/index.vue';
 import {
     PlusOutlined,
     ExclamationCircleOutlined,
@@ -783,6 +365,7 @@ import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
 const formRef = ref();
 const menuRef = ref();
 const formBasicRef = ref();
+const basicRef = ref();
 const useForm = Form.useForm;
 /**
  * 表单数据
@@ -1358,7 +941,8 @@ const submitData = async () => {
     if (keys.value.length > 0) {
         roleData.addRoleData();
     }
-    basicData.saveBasicInfo();
+    basicRef.value.submitBasic();
+    // basicData.saveBasicInfo();
     // 当前数据是否成功提交
     if (
         basicData.isSucessBasic === 3 &&