Merge branch 'local_dev_ft' into 'main'

pref:优化企业定制所有上传图片样式；pref:移除视频管理视频流验证

See merge request yunteng/thingskit-front!487

@@ -186,8 +186,9 @@
   .round {
     border-radius: 50%;
   }
-
-  .personal-info-modal:global(.ant-upload.ant-upload-select-picture-card) {
+</style>
+<style lang="less">
+  .personal-info-modal .ant-upload.ant-upload-select-picture-card {
     border-radius: 50%;
     width: 160px;
     height: 160px;

-import { BasicColumn, FormSchema } from '/@/components/Table';
-import { getOrganizationList } from '/@/api/system/system';
-import { copyTransFun } from '/@/utils/fnUtils';
-import type { FormSchema as QFormSchema } from '/@/components/Form/index';
-
-import { CameraVideoUrl, CameraMaxLength, MediaTypeValidate } from '/@/utils/rules';
-import { h } from 'vue';
-import SnHelpMessage from './SnHelpMessage.vue';
-
-export enum CameraPermission {
-  PREVIEW = 'api:yt:video:get',
-  CREATE = 'api:yt:video:post',
-  UPDATE = 'api:yt:video:update',
-  DELETE = 'api:yt:video:delete',
-}
-
-export enum AccessMode {
-  ManuallyEnter = 0,
-  Streaming = 1,
-}
-
-export enum PlayProtocol {
-  HTTP = 0,
-  HTTPS = 1,
-}
-
-export enum StreamType {
-  MASTER = 0,
-  CHILD = 1,
-  THIRD = 2,
-}
-
-export enum PageMode {
-  SPLIT_SCREEN_MODE = 'splitScreen',
-  LIST_MODE = 'listMode',
-  FULL_SCREEN_MODE = 'fullScreenMode',
-}
-
-export enum MediaType {
-  MP4 = 'mp4',
-  M3U8 = 'm3u8',
-}
-
-// 表格列数据
-export const columns: BasicColumn[] = [
-  {
-    title: '封面',
-    dataIndex: 'avatar',
-    width: 80,
-    slots: { customRender: 'img' },
-  },
-  {
-    title: '名字',
-    dataIndex: 'name',
-    width: 120,
-  },
-  {
-    title: '摄像头编号/监控点编号',
-    dataIndex: 'sn',
-    width: 220,
-  },
-  {
-    title: '视频流',
-    dataIndex: 'videoUrl',
-    width: 120,
-  },
-  {
-    title: '所属组织',
-    dataIndex: 'organizationName',
-    width: 160,
-  },
-  {
-    title: '获取方式',
-    dataIndex: 'accessMode',
-    width: 100,
-    slots: { customRender: 'accessMode' },
-  },
-  {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    width: 140,
-  },
-];
-
-// 查询字段
-export const searchFormSchema: FormSchema[] = [
-  {
-    field: 'name',
-    label: '摄像头名字',
-    component: 'Input',
-    colProps: { span: 8 },
-    componentProps: {
-      maxLength: 36,
-      placeholder: '请输入摄像头名字',
-    },
-  },
-];
-
-// 弹框配置项
-export const formSchema: QFormSchema[] = [
-  {
-    field: 'avatar',
-    label: '视频封面',
-    slot: 'iconSelect',
-    component: 'Input',
-  },
-  {
-    field: 'name',
-    label: '视频名字',
-    required: true,
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入视频名字',
-      maxLength: 30,
-    },
-    rules: [...CameraMaxLength, { required: true, message: '视频名是必填项' }],
-  },
-  {
-    field: 'organizationId',
-    label: '所属组织',
-    required: true,
-    component: 'ApiTreeSelect',
-    componentProps: {
-      api: async () => {
-        const data = await getOrganizationList();
-        copyTransFun(data as any as any[]);
-        return data;
-      },
-    },
-  },
-  {
-    label: '视频流获取方式',
-    field: 'accessMode',
-    component: 'RadioGroup',
-    rules: [{ required: true, message: '视频流获取方式为必选项', type: 'number' }],
-    defaultValue: AccessMode.ManuallyEnter,
-    componentProps({ formActionType }) {
-      return {
-        defaultValue: AccessMode.ManuallyEnter,
-        placeholder: '请选择视频流获取方式',
-        options: [
-          { label: '手动输入', value: AccessMode.ManuallyEnter },
-          { label: '流媒体获取', value: AccessMode.Streaming },
-        ],
-        onChange() {
-          formActionType.setFieldsValue({
-            brand: null,
-            sn: null,
-            videoUrl: null,
-            videoPlatformId: null,
-          });
-        },
-      };
-    },
-  },
-  {
-    field: 'brand',
-    label: '视频厂家',
-    component: 'Input',
-    ifShow({ values }) {
-      return values.accessMode === AccessMode.ManuallyEnter;
-    },
-    componentProps: {
-      maxLength: 36,
-      placeholder: '请输入视频厂家',
-    },
-  },
-  {
-    field: 'sn',
-    label: '摄像头编号',
-    required: true,
-    component: 'Input',
-    rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
-    ifShow({ values }) {
-      return values.accessMode === AccessMode.ManuallyEnter;
-    },
-    componentProps: {
-      maxLength: 36,
-      placeholder: '请输入摄像头编号',
-    },
-  },
-  {
-    field: 'videoUrl',
-    label: '视频流',
-    component: 'Input',
-    required: true,
-    ifShow({ values }) {
-      return values.accessMode === AccessMode.ManuallyEnter;
-    },
-    componentProps: {
-      placeholder: '请输入视频流',
-      maxLength: 255,
-    },
-    rules: [{ required: true, message: '视频流是必填项' }, ...CameraVideoUrl, ...MediaTypeValidate],
-  },
-
-  {
-    field: 'videoPlatformId',
-    label: '流媒体配置',
-    component: 'Select',
-    ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
-    },
-    slot: 'videoPlatformIdSlot',
-    componentProps: {
-      placeholder: '请选择流媒体配置',
-    },
-  },
-  {
-    field: 'streamType',
-    label: '码流',
-    component: 'RadioGroup',
-    defaultValue: StreamType.MASTER,
-    ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
-    },
-    componentProps: {
-      placeholder: '请选择码流',
-      defaultValue: StreamType.MASTER,
-      options: [
-        { label: '主码流', value: StreamType.MASTER },
-        { label: '子码流', value: StreamType.CHILD },
-        { label: '第三码流', value: StreamType.THIRD },
-      ],
-    },
-  },
-  {
-    field: 'playProtocol',
-    label: '播放协议',
-    component: 'RadioGroup',
-    defaultValue: PlayProtocol.HTTP,
-    ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
-    },
-    helpMessage: ['平台使用https的hls协议,需联系海康开放平台专家支持。'],
-    componentProps: {
-      placeholder: '请选择播放协议',
-      defaultValue: PlayProtocol.HTTP,
-      options: [
-        { label: 'http', value: PlayProtocol.HTTP },
-        { label: 'https', value: PlayProtocol.HTTPS },
-      ],
-    },
-  },
-  {
-    field: 'sn',
-    label: h(SnHelpMessage) as any,
-    component: 'Input',
-    rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
-    ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
-    },
-    componentProps: {
-      placeholder: '请输入监控点编号',
-    },
-  },
-];
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { getOrganizationList } from '/@/api/system/system';
+import { copyTransFun } from '/@/utils/fnUtils';
+import type { FormSchema as QFormSchema } from '/@/components/Form/index';
+
+import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
+import { h } from 'vue';
+import SnHelpMessage from './SnHelpMessage.vue';
+
+export enum CameraPermission {
+  PREVIEW = 'api:yt:video:get',
+  CREATE = 'api:yt:video:post',
+  UPDATE = 'api:yt:video:update',
+  DELETE = 'api:yt:video:delete',
+}
+
+export enum AccessMode {
+  ManuallyEnter = 0,
+  Streaming = 1,
+}
+
+export enum PlayProtocol {
+  HTTP = 0,
+  HTTPS = 1,
+}
+
+export enum StreamType {
+  MASTER = 0,
+  CHILD = 1,
+  THIRD = 2,
+}
+
+export enum PageMode {
+  SPLIT_SCREEN_MODE = 'splitScreen',
+  LIST_MODE = 'listMode',
+  FULL_SCREEN_MODE = 'fullScreenMode',
+}
+
+export enum MediaType {
+  MP4 = 'mp4',
+  M3U8 = 'm3u8',
+}
+
+// 表格列数据
+export const columns: BasicColumn[] = [
+  {
+    title: '封面',
+    dataIndex: 'avatar',
+    width: 80,
+    slots: { customRender: 'img' },
+  },
+  {
+    title: '名字',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '摄像头编号/监控点编号',
+    dataIndex: 'sn',
+    width: 220,
+  },
+  {
+    title: '视频流',
+    dataIndex: 'videoUrl',
+    width: 120,
+  },
+  {
+    title: '所属组织',
+    dataIndex: 'organizationName',
+    width: 160,
+  },
+  {
+    title: '获取方式',
+    dataIndex: 'accessMode',
+    width: 100,
+    slots: { customRender: 'accessMode' },
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 140,
+  },
+];
+
+// 查询字段
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '摄像头名字',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入摄像头名字',
+    },
+  },
+];
+
+// 弹框配置项
+export const formSchema: QFormSchema[] = [
+  {
+    field: 'avatar',
+    label: '视频封面',
+    slot: 'iconSelect',
+    component: 'Input',
+  },
+  {
+    field: 'name',
+    label: '视频名字',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入视频名字',
+      maxLength: 30,
+    },
+    rules: [...CameraMaxLength, { required: true, message: '视频名是必填项' }],
+  },
+  {
+    field: 'organizationId',
+    label: '所属组织',
+    required: true,
+    component: 'ApiTreeSelect',
+    componentProps: {
+      api: async () => {
+        const data = await getOrganizationList();
+        copyTransFun(data as any as any[]);
+        return data;
+      },
+    },
+  },
+  {
+    label: '视频流获取方式',
+    field: 'accessMode',
+    component: 'RadioGroup',
+    rules: [{ required: true, message: '视频流获取方式为必选项', type: 'number' }],
+    defaultValue: AccessMode.ManuallyEnter,
+    componentProps({ formActionType }) {
+      return {
+        defaultValue: AccessMode.ManuallyEnter,
+        placeholder: '请选择视频流获取方式',
+        options: [
+          { label: '手动输入', value: AccessMode.ManuallyEnter },
+          { label: '流媒体获取', value: AccessMode.Streaming },
+        ],
+        onChange() {
+          formActionType.setFieldsValue({
+            brand: null,
+            sn: null,
+            videoUrl: null,
+            videoPlatformId: null,
+          });
+        },
+      };
+    },
+  },
+  {
+    field: 'brand',
+    label: '视频厂家',
+    component: 'Input',
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.ManuallyEnter;
+    },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入视频厂家',
+    },
+  },
+  {
+    field: 'sn',
+    label: '摄像头编号',
+    required: true,
+    component: 'Input',
+    rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.ManuallyEnter;
+    },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入摄像头编号',
+    },
+  },
+  {
+    field: 'videoUrl',
+    label: '视频流',
+    component: 'Input',
+    required: true,
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.ManuallyEnter;
+    },
+    componentProps: {
+      placeholder: '请输入视频流',
+      maxLength: 255,
+    },
+    rules: [{ required: true, message: '视频流是必填项' }, ...CameraVideoUrl],
+  },
+
+  {
+    field: 'videoPlatformId',
+    label: '流媒体配置',
+    component: 'Select',
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.Streaming;
+    },
+    slot: 'videoPlatformIdSlot',
+    componentProps: {
+      placeholder: '请选择流媒体配置',
+    },
+  },
+  {
+    field: 'streamType',
+    label: '码流',
+    component: 'RadioGroup',
+    defaultValue: StreamType.MASTER,
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.Streaming;
+    },
+    componentProps: {
+      placeholder: '请选择码流',
+      defaultValue: StreamType.MASTER,
+      options: [
+        { label: '主码流', value: StreamType.MASTER },
+        { label: '子码流', value: StreamType.CHILD },
+        { label: '第三码流', value: StreamType.THIRD },
+      ],
+    },
+  },
+  {
+    field: 'playProtocol',
+    label: '播放协议',
+    component: 'RadioGroup',
+    defaultValue: PlayProtocol.HTTP,
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.Streaming;
+    },
+    helpMessage: ['平台使用https的hls协议,需联系海康开放平台专家支持。'],
+    componentProps: {
+      placeholder: '请选择播放协议',
+      defaultValue: PlayProtocol.HTTP,
+      options: [
+        { label: 'http', value: PlayProtocol.HTTP },
+        { label: 'https', value: PlayProtocol.HTTPS },
+      ],
+    },
+  },
+  {
+    field: 'sn',
+    label: h(SnHelpMessage) as any,
+    component: 'Input',
+    rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.Streaming;
+    },
+    componentProps: {
+      placeholder: '请输入监控点编号',
+    },
+  },
+];

@@ -62,13 +62,13 @@ export const configColumns: BasicColumn[] = [
     dataIndex: 'response111',
     slots: { customRender: 'responseContent' },
   },
-  {
-    title: '响应失败内容',
-    dataIndex: 'response.error',
-    format: (_, record) => {
-      return record?.response === null ? '无' : record?.response?.error;
-    },
-  },
+  // {
+  //   title: '响应失败内容',
+  //   dataIndex: 'response.error',
+  //   format: (_, record) => {
+  //     return record?.response === null ? '无' : record?.response?.error;
+  //   },
+  // },
   {
     title: '命令内容',
     dataIndex: 'request.body',

@@ -5,11 +5,12 @@
         <a-button type="link" class="ml-2" @click="handleRecordContent(record)"> 查看 </a-button>
       </template>
       <template #responseContent="{ record }">
-        <Tag
-          v-if="!record.request?.oneway"
-          :color="record.request?.response?.status === 'SUCCESS' ? 'green' : 'red'"
-          >{{ record.request?.response?.status === 'SUCCESS' ? '成功' : '失败' }}</Tag
-        >
+        <div v-if="!record.request?.oneway">
+          <a-button v-if="record?.response === null" type="text" class="ml-2"> 无 </a-button>
+          <a-button v-else type="link" class="ml-2" @click="handleRecordResponseContent(record)">
+            查看
+          </a-button>
+        </div>
       </template>
     </BasicTable>
   </div>
@@ -19,7 +20,7 @@
   import { configColumns } from './config';
   import { deviceCommandRecordGetQuery } from '/@/api/device/deviceConfigApi';
   import { BasicTable, useTable } from '/@/components/Table';
-  import { Modal, Tag } from 'ant-design-vue';
+  import { Modal } from 'ant-design-vue';
   import { JsonPreview } from '/@/components/CodeEditor';
 
   const props = defineProps({
@@ -54,4 +55,8 @@
     const jsonParams = JSON.parse(record?.request?.body?.params);
     commonModalInfo('命令下发内容', jsonParams?.params ? jsonParams?.params : jsonParams);
   };
+  const handleRecordResponseContent = (record) => {
+    const jsonParams = record?.response;
+    commonModalInfo('响应结果', jsonParams);
+  };
 </script>

 <template>
   <div class="card">
     <Card :bordered="false" class="card">
-      <BasicForm @register="registerForm">
-        <template #logoUpload>
-          <ContentUploadText>
-            <template #uploadImg>
-              <Upload
-                name="avatar"
-                list-type="picture-card"
-                class="avatar-uploader"
-                :show-upload-list="false"
-                @preview="handlePreview"
-                :customRequest="customUploadLogoPic"
-                :before-upload="beforeUploadLogoPic"
-              >
-                <img v-if="logoPic" :src="logoPic" alt="avatar" />
-                <div v-else>
-                  <Spin v-if="loading" tip="正在上传中..." />
-                  <PlusOutlined v-else style="font-size: 2.5rem" /> </div
-              ></Upload>
-            </template>
-            <template #uploadText>
-              <div class="flex justify-center items-center">
-                支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB
-              </div>
-            </template>
-          </ContentUploadText>
-        </template>
-        <template #bgUpload>
-          <ContentUploadText>
-            <template #uploadImg>
-              <Upload
-                name="avatar"
-                list-type="picture-card"
-                class="avatar-uploader"
-                :show-upload-list="false"
-                :customRequest="customUploadBgPic"
-                :before-upload="beforeUploadBgPic"
-              >
-                <img v-if="bgPic" :src="bgPic" alt="avatar" />
-                <div v-else>
-                  <Spin v-if="loading1" tip="正在上传中..." />
-                  <PlusOutlined v-else style="font-size: 2.5rem" /> </div
-              ></Upload>
-            </template>
-            <template #uploadText>
-              <div class="flex justify-center items-center">
-                支持.PNG、.JPG格式，建议尺寸为1920*1080px，大小不超过2M
-              </div>
-            </template>
-          </ContentUploadText>
-        </template>
-        <template #colorInput="{ model, field }"
-          ><Input disabled v-model:value="model[field]">
-            <template #prefix> <input type="color" v-model="model[field]" /> </template
-          ></Input>
-        </template>
+      <div style="margin-left: -40px">
+        <BasicForm @register="registerForm">
+          <template #logoUpload>
+            <ContentUploadText>
+              <template #uploadImg>
+                <Upload
+                  name="avatar"
+                  list-type="picture-card"
+                  class="avatar-uploader"
+                  :show-upload-list="false"
+                  @preview="handlePreview"
+                  :customRequest="customUploadLogoPic"
+                  :before-upload="beforeUploadLogoPic"
+                >
+                  <img v-if="logoPic" class="fill-img" :src="logoPic" alt="avatar" />
+                  <div v-else>
+                    <Spin v-if="loading" tip="正在上传中..." />
+                    <PlusOutlined v-else />
+                    <div class="ant-upload-text">上传</div>
+                  </div>
+                </Upload>
+              </template>
+              <template #uploadText>
+                <div class="box-outline">
+                  支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB
+                </div>
+              </template>
+            </ContentUploadText>
+          </template>
+          <template #bgUpload>
+            <ContentUploadText>
+              <template #uploadImg>
+                <Upload
+                  name="avatar"
+                  list-type="picture-card"
+                  class="avatar-uploader"
+                  :show-upload-list="false"
+                  :customRequest="customUploadBgPic"
+                  :before-upload="beforeUploadBgPic"
+                >
+                  <img v-if="bgPic" class="fill-img" :src="bgPic" alt="avatar" />
+                  <div v-else>
+                    <Spin v-if="loading1" tip="正在上传中..." />
+                    <PlusOutlined v-else />
+                    <div class="ant-upload-text">上传</div>
+                  </div>
+                </Upload>
+              </template>
+              <template #uploadText>
+                <div class="box-outline">
+                  支持.PNG、.JPG格式，建议尺寸为1920*1080px，大小不超过2M
+                </div>
+              </template>
+            </ContentUploadText>
+          </template>
+          <template #colorInput="{ model, field }"
+            ><Input disabled v-model:value="model[field]">
+              <template #prefix> <input type="color" v-model="model[field]" /> </template
+            ></Input>
+          </template>
 
-        <template #homeSwiper>
-          <ContentUploadText>
-            <template #uploadImg>
-              <Upload
-                v-model:file-list="fileList"
-                list-type="picture-card"
-                @preview="handlePreview"
-                :customRequest="customUploadHomeSwiper"
-                :before-upload="beforeUploadHomeSwiper"
-                @change="handleChange"
-              >
-                <div v-if="fileList.length < 5">
-                  <div>
-                    <PlusOutlined style="font-size: 2.5rem" />
-                  </div> </div
-              ></Upload>
-            </template>
-            <template #uploadText>
-              <div class="flex justify-center items-center">
-                支持.PNG、.JPG格式，建议尺寸为800*600px，大小不超过3M
-              </div>
-            </template>
-          </ContentUploadText>
-          <Modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
-            <img alt="example" style="width: 100%" :src="previewImage" />
-          </Modal>
-        </template>
-      </BasicForm>
+          <template #homeSwiper>
+            <ContentUploadText>
+              <template #uploadImg>
+                <Upload
+                  v-model:file-list="fileList"
+                  list-type="picture-card"
+                  @preview="handlePreview"
+                  :customRequest="customUploadHomeSwiper"
+                  :before-upload="beforeUploadHomeSwiper"
+                  @change="handleChange"
+                >
+                  <div v-if="fileList.length < 5">
+                    <div>
+                      <PlusOutlined />
+                      <div class="ant-upload-text">上传</div>
+                    </div>
+                  </div></Upload
+                >
+              </template>
+              <template #uploadText>
+                <div class="box-outline">
+                  支持.PNG、.JPG格式，建议尺寸为800*600px，大小不超过3M
+                </div>
+              </template>
+            </ContentUploadText>
+            <Modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+              <img alt="example" style="width: 100%" :src="previewImage" />
+            </Modal>
+          </template>
+        </BasicForm>
+      </div>
     </Card>
     <Loading v-bind="compState" />
     <Authority value="api:yt:appDesign:update:update">
@@ -358,4 +366,14 @@
     margin-top: 8px;
     color: #666;
   }
+
+  .box-outline {
+    border: 1px dashed #d9d9d9;
+    text-align: left;
+  }
+
+  .fill-img {
+    width: 100%;
+    height: 100%;
+  }
 </style>

 <template>
   <div class="card">
     <Card :bordered="false" class="card">
-      <BasicForm @register="registerForm">
-        <template #logoUpload>
-          <ContentUploadText>
-            <template #uploadImg>
-              <Upload
-                name="avatar"
-                list-type="picture-card"
-                class="avatar-uploader"
-                :show-upload-list="false"
-                :customRequest="customUploadLogoPic"
-                :before-upload="beforeUploadLogoPic"
-              >
-                <img v-if="logoPic" :src="logoPic" alt="avatar" />
-                <div v-else>
-                  <Spin v-if="loading" tip="正在上传中..." />
-                  <PlusOutlined v-else style="font-size: 2.5rem" /> </div
-              ></Upload>
-            </template>
-            <template #uploadText>
-              <div class="flex justify-center items-center">
-                支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB
-              </div>
-            </template>
-          </ContentUploadText>
-        </template>
-        <template #iconUpload>
-          <ContentUploadText>
-            <template #uploadImg>
-              <Upload
-                name="avatar"
-                list-type="picture-card"
-                class="avatar-uploader"
-                :show-upload-list="false"
-                :customRequest="customUploadIconPic"
-                :before-upload="beforeUploadIconPic"
-              >
-                <div v-if="iconPic">
-                  <img :src="iconPic" class="m-auto" />
-                  <div style="background-color: #ccc; margin-top: 20px">重新上传</div>
+      <div style="margin-left: -40px">
+        <BasicForm @register="registerForm">
+          <template #logoUpload>
+            <ContentUploadText>
+              <template #uploadImg>
+                <Upload
+                  name="avatar"
+                  list-type="picture-card"
+                  class="avatar-uploader"
+                  :show-upload-list="false"
+                  :customRequest="customUploadLogoPic"
+                  :before-upload="beforeUploadLogoPic"
+                >
+                  <img class="fill-img" v-if="logoPic" :src="logoPic" alt="avatar" />
+                  <div v-else>
+                    <Spin v-if="loading" tip="正在上传中..." />
+                    <PlusOutlined v-else />
+                    <div class="ant-upload-text">上传</div>
+                  </div>
+                </Upload>
+              </template>
+              <template #uploadText>
+                <div class="box-outline">
+                  支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB
                 </div>
-                <div v-else>
-                  <div>
-                    <Spin v-if="loading1" tip="正在上传中..." />
-                    <PlusOutlined v-else style="font-size: 2.5rem" />
-                  </div> </div
-              ></Upload>
-            </template>
-            <template #uploadText>
-              <div class="flex justify-center items-center"> 支持.ICON格式，建议尺寸为16*16px </div>
-            </template>
-          </ContentUploadText>
-        </template>
-        <template #bgUpload>
-          <ContentUploadText>
-            <template #uploadImg>
-              <Upload
-                name="avatar"
-                list-type="picture-card"
-                class="avatar-uploader"
-                :show-upload-list="false"
-                :customRequest="customUploadBgPic"
-                :before-upload="beforeUploadBgPic"
-              >
-                <img v-if="bgPic" :src="bgPic" alt="avatar" />
-                <div v-else>
-                  <div>
-                    <Spin v-if="loading2" tip="正在上传中..." />
-                    <PlusOutlined v-else style="font-size: 2.5rem" />
-                  </div> </div
-              ></Upload>
-            </template>
-            <template #uploadText>
-              <div class="flex justify-center items-center">
-                支持.PNG、.JPG格式，建议尺寸为1920*1080px以上，大小不超过5M
-              </div>
-            </template>
-          </ContentUploadText>
-        </template>
-        <template #colorInput="{ model, field }"
-          ><Input disabled v-model:value="model[field]">
-            <template #prefix> <input type="color" v-model="model[field]" /> </template
-          ></Input>
-        </template>
-      </BasicForm>
+              </template>
+            </ContentUploadText>
+          </template>
+          <template #iconUpload>
+            <ContentUploadText>
+              <template #uploadImg>
+                <Upload
+                  name="avatar"
+                  list-type="picture-card"
+                  class="avatar-uploader"
+                  :show-upload-list="false"
+                  :customRequest="customUploadIconPic"
+                  :before-upload="beforeUploadIconPic"
+                >
+                  <div v-if="iconPic">
+                    <img :src="iconPic" class="m-auto fill-img" />
+                    <div style="background-color: #ccc; margin-top: 20px">重新上传</div>
+                  </div>
+                  <div v-else>
+                    <div>
+                      <Spin v-if="loading1" tip="正在上传中..." />
+                      <PlusOutlined v-else />
+                      <div class="ant-upload-text">上传</div>
+                    </div>
+                  </div></Upload
+                >
+              </template>
+              <template #uploadText>
+                <div class="box-outline"> 支持.ICON格式，建议尺寸为16*16px </div>
+              </template>
+            </ContentUploadText>
+          </template>
+          <template #bgUpload>
+            <ContentUploadText>
+              <template #uploadImg>
+                <Upload
+                  name="avatar"
+                  list-type="picture-card"
+                  class="avatar-uploader"
+                  :show-upload-list="false"
+                  :customRequest="customUploadBgPic"
+                  :before-upload="beforeUploadBgPic"
+                >
+                  <img class="fill-img" v-if="bgPic" :src="bgPic" alt="avatar" />
+                  <div v-else>
+                    <div>
+                      <Spin v-if="loading2" tip="正在上传中..." />
+                      <PlusOutlined v-else />
+                      <div class="ant-upload-text">上传</div>
+                    </div>
+                  </div></Upload
+                >
+              </template>
+              <template #uploadText>
+                <div class="box-outline">
+                  支持.PNG、.JPG格式，建议尺寸为1920*1080px以上，大小不超过5M
+                </div>
+              </template>
+            </ContentUploadText>
+          </template>
+          <template #colorInput="{ model, field }"
+            ><Input disabled v-model:value="model[field]">
+              <template #prefix> <input type="color" v-model="model[field]" /> </template
+            ></Input>
+          </template>
+        </BasicForm>
+      </div>
     </Card>
     <Loading v-bind="compState" />
     <Authority value="api:yt:platform:update:update">
@@ -305,4 +313,23 @@
   });
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .ant-upload-select-picture-card i {
+    font-size: 32px;
+    color: #999;
+  }
+
+  .ant-upload-select-picture-card .ant-upload-text {
+    margin-top: 8px;
+    color: #666;
+  }
+
+  .box-outline {
+    border: 1px dashed #d9d9d9;
+  }
+
+  .fill-img {
+    width: 100%;
+    height: 100%;
+  }
+</style>

 <template>
-  <a-row type="flex" align="middle" justify="start">
-    <a-col :span="12">
+  <a-row align="bottom" :gutter="16">
+    <a-col :span="1">
       <slot name="uploadImg"></slot>
     </a-col>
-    <a-col :span="12">
+    <a-col :span="5" />
+    <a-col :span="18" class="padd-top">
       <slot name="uploadText"></slot>
     </a-col>
   </a-row>
@@ -11,4 +12,8 @@
 
 <script lang="ts" setup></script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .padd-top {
+    margin-bottom: 15px;
+  }
+</style>

@@ -13,16 +13,16 @@
                 :customRequest="customUploadqrcodePic"
                 :before-upload="beforeUploadqrcodePic"
               >
-                <img v-if="qrcodePic" :src="qrcodePic" alt="avatar" />
+                <img class="fill-img" v-if="qrcodePic" :src="qrcodePic" alt="avatar" />
                 <div v-else>
                   <Spin v-if="loading" tip="正在上传中..." />
-                  <PlusOutlined v-else style="font-size: 2.5rem" /> </div
-              ></Upload>
+                  <PlusOutlined v-else />
+                  <div class="ant-upload-text">上传</div>
+                </div></Upload
+              >
             </template>
             <template #uploadText>
-              <div class="flex justify-center items-center">
-                支持.PNG、.JPG格式，建议尺寸为300*300px，大小不超过5M
-              </div>
+              <div class="box-outline"> 支持.PNG、.JPG格式，建议尺寸为300*300px，大小不超过5M </div>
             </template>
           </ContentUploadText>
         </template>
@@ -381,3 +381,14 @@
     },
   });
 </script>
+
+<style lang="less" scoped>
+  .box-outline {
+    border: 1px dashed #d9d9d9;
+  }
+
+  .fill-img {
+    width: 100%;
+    height: 100%;
+  }
+</style>