feat: add operation ota page && dynamic set loading effect

@@ -22,7 +22,6 @@
           theme = htmlRoot = null;
         }
       })();
-    
     </script>
     <div id="app">
       <style>
@@ -152,17 +151,17 @@
           }
         }
       </style>
-      <div class="app-loading">
+      <div id="first-screen-loading" class="app-loading">
         <div class="app-loading-wrap">
-          <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" />
+          <!-- <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" /> -->
           <div class="app-loading-dots">
             <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
           </div>
-          <div class="app-loading-title"><%= title %></div>
+          <!-- <div class="app-loading-title"><%= title %></div> -->
         </div>
       </div>
     </div>
-  
+
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

 import { defHttp } from '/@/utils/http/axios';
-import { FileUploadResponse } from './model/index';
+import { FileUploadResponse, Platform } from './model/index';
 enum API {
   SELECT_DETAIL = '/enterprise/get',
   UPDATE_DETAIL = '/enterprise/update',
@@ -67,7 +67,7 @@ export const bgUpload = (file) => {
 
 // 获取平台定制详情
 export const getPlatForm = () => {
-  return defHttp.get({
+  return defHttp.get<Platform>({
     url: API.SELECT_PLATFORM,
   });
 };

@@ -5,3 +5,17 @@ export interface FileUploadResponse {
   size: number;
   fileStaticUri: string;
 }
+
+export interface Platform {
+  id: string;
+  creator: string;
+  createTime: string;
+  updater: string;
+  updateTime: string;
+  name: string;
+  logo: string;
+  background: string;
+  copyright: string;
+  presentedOurselves: string;
+  domain: string;
+}

@@ -10,6 +10,7 @@ export { default as ApiSelect } from './src/components/ApiSelect.vue';
 export { default as RadioButtonGroup } from './src/components/RadioButtonGroup.vue';
 export { default as ApiTreeSelect } from './src/components/ApiTreeSelect.vue';
 export { default as ApiRadioGroup } from './src/components/ApiRadioGroup.vue';
+export { default as ApiUpload } from './src/components/ApiUpload.vue';
 
 //注册自定义组件
 export {

+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
+<script lang="ts" setup>
+  import { UploadDragger, Spin } from 'ant-design-vue';
+  import { InboxOutlined } from '@ant-design/icons-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { isBoolean, isFunction } from '/@/utils/is';
+  import { computed, ref, unref } from 'vue';
+  import { cloneDeep } from 'lodash-es';
+  interface FileItem {
+    uid: string;
+    name?: string;
+    status?: string;
+    response?: string;
+    url?: string;
+  }
+
+  const emit = defineEmits(['update:fileList']);
+
+  const { createMessage } = useMessage();
+
+  const loading = ref(false);
+
+  const componentDisabled = ref(false);
+
+  const setLoading = (spin: boolean) => {
+    loading.value = spin;
+  };
+
+  const props = withDefaults(
+    defineProps<{
+      fileList?: FileItem[];
+      accept?: string;
+      maxSize?: number;
+      disabled?: boolean;
+      listType?: string;
+      multiple?: boolean;
+      showUploadList?: boolean | { showPreviewIcon?: boolean; showRemoveIcon?: boolean };
+      transformFile?: (file: File) => string | Blob | Promise<string | Blob | File>;
+      api: (file: string | Blob | Promise<string | Blob | File>) => Promise<FileItem>;
+    }>(),
+    {
+      fileList: () => [],
+      maxSize: 5 * 1024 * 1024,
+      showUploadList: () => ({ showPreviewIcon: true, showRemoveIcon: true }),
+    }
+  );
+
+  const handleBeforeUpload = (file: File) => {
+    if (file.size > props.maxSize) {
+      createMessage.warning(`文件大小超过${Math.floor(props.maxSize / 1024)}mb`);
+      return false;
+    }
+    handleUpload(file);
+    return false;
+  };
+
+  const getDisabled = computed(() => {
+    const { disabled } = props;
+    if (isBoolean(disabled)) {
+      return disabled ? componentDisabled.value : disabled;
+    }
+    return componentDisabled.value;
+  });
+
+  const handleUpload = async (file: File | string | Blob | Promise<string | Blob | File>) => {
+    try {
+      setLoading(true);
+      componentDisabled.value = true;
+      console.log({ componentDisabled: unref(componentDisabled), getDisabled: unref(getDisabled) });
+      const { transformFile, api } = props;
+      if (transformFile && isFunction(transformFile)) file = await transformFile(file as File);
+      if (api && isFunction(api)) {
+        const data = await api(file);
+        emit('update:fileList', cloneDeep([...props.fileList, data]));
+      }
+    } catch (error) {
+      window.console.error(error);
+    } finally {
+      setLoading(false);
+      componentDisabled.value = false;
+    }
+  };
+
+  const handleRemove = (file: FileItem) => {
+    const _fileList = cloneDeep(props.fileList);
+    const index = _fileList.findIndex((item) => item.uid === file.uid);
+    ~index && _fileList.splice(index, 1);
+    emit('update:fileList', _fileList);
+  };
+
+  const handlePreview = (file: FileItem) => {
+    console.log('preview', file);
+  };
+
+  const handleDownload = (file: FileItem) => {
+    console.log('download', file);
+  };
+</script>
+
+<template>
+  <UploadDragger
+    :file-list="props.fileList"
+    :disabled="getDisabled"
+    :before-upload="handleBeforeUpload"
+    @preview="handlePreview"
+    @download="handleDownload"
+    :remove="handleRemove"
+  >
+    <Spin :spinning="loading">
+      {{ getDisabled }}
+      <div class="w-full h-full flex flex-col justify-center content-center">
+        <InboxOutlined class="text-[3rem] !text-blue-500" />
+        <div class="m-2 text-gray-400">点击上传或拖拽上传</div>
+      </div>
+    </Spin>
+  </UploadDragger>
+</template>

@@ -14,6 +14,7 @@ import { setupGlobDirectives } from '/@/directives';
 import { setupI18n } from '/@/locales/setupI18n';
 import { registerGlobComp } from '/@/components/registerGlobComp';
 import '/@/assets/iconfont/iconfont';
+import { usePlatform } from './views/system/customize/hook/usePlatformInfo';
 
 if (import.meta.env.DEV) {
   import('ant-design-vue/dist/antd.less');
@@ -23,6 +24,8 @@ async function bootstrap() {
   // Configure store
   setupStore(app);
 
+  await usePlatform();
+
   // Initialize internal system configuration
   initAppConfigStore();
 
@@ -47,6 +50,7 @@ async function bootstrap() {
   // Mount when the route is ready
   // https://next.router.vuejs.org/api/#isready
   await router.isReady();
+
   app.mount('#app', true);
 }
 

@@ -39,7 +39,7 @@
     width: '200px',
     height: '200px',
     color: '#409eff',
-    muted: false, //静音
+    muted: true, //静音
     webFullScreen: false,
     autoPlay: true, //自动播放
     currentTime: 0,

+<script lang="ts" setup>
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from '../config/packageDetail.config';
+  defineEmits(['register']);
+
+  const [registerModal] = useModalInner((_record: Recordable) => {});
+
+  const [registerForm] = useForm({
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    // labelCol: { span: 8 },
+    labelWidth: 100,
+    wrapperCol: { span: 16 },
+  });
+</script>
+
+<template>
+  <BasicModal title="包管理" @register="registerModal">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 120,
+  },
+  {
+    title: '标题',
+    dataIndex: 'title',
+    width: 120,
+  },
+  {
+    title: '版本',
+    dataIndex: 'version',
+    width: 120,
+  },
+  {
+    title: '版本标签',
+    dataIndex: 'versionLabel',
+    width: 120,
+  },
+  {
+    title: '包类型',
+    dataIndex: 'pkgType',
+    width: 120,
+  },
+  {
+    title: '直接URL',
+    dataIndex: 'url',
+    width: 120,
+  },
+  {
+    title: '文件大小',
+    dataIndex: 'fileSize',
+    width: 120,
+  },
+  {
+    title: '校验和',
+    dataIndex: 'vaildateTotal',
+    width: 120,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '标题',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];

+import { FormSchema } from '/@/components/Form';
+
+export enum PackageField {
+  TITLE = 'title',
+  VERSION = 'version',
+  VERSION_LABEL = 'versionLabel',
+  DEVICE_CONFIGURATION = 'deviceConfiguration',
+  PACKAGE_TYPE = 'packageType',
+  PACKAGE_UPDATE_TYPE = 'PackageUpdateType',
+  PACKAGE_BINARY_FILE = 'packageBinaryFile',
+  PACKAGE_EXTERNAL_URL = 'packageEexternalUrl',
+  CHECK_SUM_WAY = 'checkSumWay',
+  ALG = 'alg',
+  CHECK_SUM = 'checkSum',
+  DESCRIPTION = 'description',
+}
+
+export enum PackageUpdateType {
+  BINARY_FILE = 'binaryFile',
+  EXTERNAL_URL = 'externalUrl',
+}
+
+export enum PackageType {
+  FIRMWARE = 'firmware',
+  SOFTWARE = 'software',
+}
+
+export enum CheckSumWay {
+  AUTO = 'auto',
+  MANUAL = 'manual',
+}
+
+export enum ALG {
+  MD5 = 'md5',
+  SHA_256 = 'sha-256',
+  SHA_384 = 'sha-384',
+  SHA_512 = 'sha-512',
+  CRC_32 = 'crc-32',
+  MURMUR3_32 = 'murmur3-32',
+  MURMUR3_128 = 'murmur3-128',
+}
+
+export const formSchema: FormSchema[] = [
+  {
+    field: PackageField.TITLE,
+    label: '标题',
+    component: 'Input',
+    rules: [{ required: true, message: '标题为必填项' }],
+    componentProps: {
+      placeholder: '请输入标题',
+    },
+  },
+  {
+    field: PackageField.VERSION,
+    label: '版本',
+    component: 'Input',
+    rules: [{ required: true, message: '版本为必填项' }],
+    componentProps: {
+      placeholder: '请输入版本',
+    },
+  },
+  {
+    field: PackageField.VERSION_LABEL,
+    label: '版本标签',
+    component: 'Input',
+    helpMessage: ['自定义标签应与您设备报告的软件包版本相匹配'],
+    componentProps: {
+      placeholder: '请输入版本标签',
+    },
+  },
+  {
+    field: PackageField.DEVICE_CONFIGURATION,
+    label: '设备配置',
+    component: 'Select',
+    helpMessage: ['上传的包仅适用于具有所选配置文件的设备'],
+    defaultValue: 'default',
+    rules: [{ required: true, message: '设备配置为必填项' }],
+    componentProps: () => {
+      return {
+        options: [{ label: 'default', value: 'default' }],
+        placeholder: '请选择设备配置',
+      };
+    },
+  },
+  {
+    field: PackageField.PACKAGE_TYPE,
+    label: '包类型',
+    component: 'Select',
+    helpMessage: ['上传包后，您将无法修改标题、版本、设备配置文件和包类型'],
+    defaultValue: PackageType.FIRMWARE,
+    rules: [{ required: true, message: '包类型为必填项' }],
+    componentProps: () => {
+      return {
+        options: [
+          { label: '固件', value: PackageType.FIRMWARE },
+          { label: '软件', value: PackageType.SOFTWARE },
+        ],
+        placeholder: '请选择设备配置',
+      };
+    },
+  },
+  {
+    field: PackageField.PACKAGE_UPDATE_TYPE,
+    label: '上传方式',
+    component: 'RadioGroup',
+    defaultValue: PackageUpdateType.BINARY_FILE,
+    componentProps: () => {
+      return {
+        options: [
+          { label: '上传二进制文件', value: PackageUpdateType.BINARY_FILE },
+          { label: '使用外部URL', value: PackageUpdateType.EXTERNAL_URL },
+        ],
+      };
+    },
+  },
+  {
+    field: PackageField.PACKAGE_BINARY_FILE,
+    label: '二进制文件',
+    ifShow: ({ model }) => {
+      return model[PackageField.PACKAGE_UPDATE_TYPE] === PackageUpdateType.BINARY_FILE;
+    },
+    component: 'Upload',
+    componentProps: {
+      api: () => {
+        return {};
+      },
+    },
+  },
+  {
+    field: PackageField.PACKAGE_EXTERNAL_URL,
+    label: '外部URL',
+    component: 'Input',
+    ifShow: ({ model }) => {
+      return model[PackageField.PACKAGE_UPDATE_TYPE] === PackageUpdateType.EXTERNAL_URL;
+    },
+    rules: [{ required: true, message: '外部URL为必填项' }],
+    componentProps: {
+      placeholder: '请输入外部URL',
+    },
+  },
+  {
+    field: PackageField.CHECK_SUM_WAY,
+    label: '校验和方式',
+    component: 'RadioGroup',
+    defaultValue: CheckSumWay.AUTO,
+    componentProps: () => {
+      return {
+        options: [
+          { label: '自动生成', value: CheckSumWay.AUTO },
+          { label: '手动生成', value: CheckSumWay.MANUAL },
+        ],
+      };
+    },
+  },
+  {
+    field: PackageField.ALG,
+    label: '校验和算法',
+    component: 'Select',
+    ifShow: ({ model }) => {
+      return model[PackageField.CHECK_SUM_WAY] === CheckSumWay.MANUAL;
+    },
+    componentProps: {
+      placeholder: '请选择校验和算法',
+      options: Object.keys(ALG).map((key) => {
+        return {
+          label: String(ALG[key]).toUpperCase(),
+          value: ALG[key],
+        };
+      }),
+    },
+  },
+  {
+    field: PackageField.CHECK_SUM,
+    label: '校验和',
+    component: 'Input',
+    ifShow: ({ model }) => {
+      return model[PackageField.CHECK_SUM_WAY] === CheckSumWay.MANUAL;
+    },
+    helpMessage: ['如果校验和为空,会自动生成'],
+    componentProps: {
+      placeholder: '请输入校验和',
+    },
+  },
+  {
+    field: PackageField.DESCRIPTION,
+    label: '描述',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入描述',
+    },
+  },
+];

+<script lang="ts" setup>
+  import { Button } from 'ant-design-vue';
+  import { columns, searchFormSchema } from './config/config';
+  import { PageWrapper } from '/@/components/Page';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import PackageDetailModal from './components/PackageDetailModal.vue';
+  import { useModal } from '/@/components/Modal';
+  // import { ApiUpload } from '/@/components/Form';
+  // import { computed, ref, unref } from 'vue';
+
+  const [register] = useTable({
+    columns,
+    title: '包仓库',
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+  });
+
+  const [registerModal, { openModal }] = useModal();
+
+  const handleCreatePackage = () => {
+    openModal(true);
+  };
+
+  // const fileList = ref([]);
+  // const handleUpload = async (file: File) => {
+  //   console.log(file);
+  //   return new Promise((resolve) => {
+  //     setTimeout(() => {
+  //       resolve({
+  //         uid: file.uid,
+  //         type: file.type,
+  //         name: file.name,
+  //         linkProps: { download: 'http://www.baidu.cn' },
+  //       });
+  //     }, 3000);
+  //   });
+  // };
+</script>
+
+<template>
+  <PageWrapper dense contentFullHeight contentClass="flex flex-col">
+    <!-- <div class="w-40 h-40">
+      <ApiUpload v-model:file-list="fileList" :api="handleUpload" />
+    </div> -->
+    <BasicTable @register="register">
+      <template #toolbar>
+        <Button @click="handleCreatePackage" type="primary">新增包</Button>
+      </template>
+    </BasicTable>
+    <PackageDetailModal @register="registerModal" />
+  </PageWrapper>
+</template>

@@ -6,149 +6,161 @@
           <a-button type="primary" @click="handleAdd"> 新增场景联动 </a-button>
         </Authority>
         <Authority value="api:yt:sceneLinkage:delete">
-          <Popconfirm title="您确定要批量删除数据" ok-text="确定" cancel-text="取消" @confirm="handleDeleteOrBatchDelete(null)">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
+          >
             <a-button color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
           </Popconfirm>
         </Authority>
       </template>
       <template #action="{ record }">
-        <TableAction :actions="[
-          {
-            label: '查看',
-            auth: 'api:yt:sceneLinkage:get',
-            icon: 'ant-design:eye-outlined',
-            onClick: handleView.bind(null, record),
-          },
-          {
-            label: '编辑',
-            auth: 'api:yt:sceneLinkage:update',
-            icon: 'clarity:note-edit-line',
-            onClick: handleEdit.bind(null, record),
-            ifShow: record.creator === userId && record.status !== 1,
-          },
-          {
-            label: '删除',
-            auth: 'api:yt:sceneLinkage:delete',
-            icon: 'ant-design:delete-outlined',
-            color: 'error',
-            ifShow: record.creator === userId && record.status !== 1,
-            popConfirm: {
-              title: '是否确认删除',
-              confirm: handleDeleteOrBatchDelete.bind(null, record),
+        <TableAction
+          :actions="[
+            {
+              label: '查看',
+              auth: 'api:yt:sceneLinkage:get',
+              icon: 'ant-design:eye-outlined',
+              onClick: handleView.bind(null, record),
             },
-          },
-        ]" />
+            {
+              label: '编辑',
+              auth: 'api:yt:sceneLinkage:update',
+              icon: 'clarity:note-edit-line',
+              onClick: handleEdit.bind(null, record),
+              ifShow: record.creator === userId && record.status !== 1,
+            },
+            {
+              label: '删除',
+              auth: 'api:yt:sceneLinkage:delete',
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              ifShow: record.creator === userId && record.status !== 1,
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
       </template>
 
       <template #status="{ record }">
-        <Switch :checked="record.status === 1" :loading="record.pendingStatus" checkedChildren="启用"
-          unCheckedChildren="禁用" @change="(checked:boolean)=>statusChange(checked,record)" />
+        <Switch
+          :checked="record.status === 1"
+          :loading="record.pendingStatus"
+          checkedChildren="启用"
+          unCheckedChildren="禁用"
+          @change="(checked:boolean)=>statusChange(checked,record)"
+        />
       </template>
     </BasicTable>
     <SceneLinkAgeDrawer @register="registerDrawer" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts" setup>
-import { nextTick } from 'vue';
-import { BasicTable, useTable, TableAction } from '/@/components/Table';
-import { useDrawer } from '/@/components/Drawer';
-import {
-  screenLinkPageGetApi,
-  screenLinkPageDeleteApi,
-  screenLinkPagePutApi,
-} from '/@/api/ruleengine/ruleengineApi';
-import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-import { Switch, Popconfirm } from 'ant-design-vue';
-import { columns, searchFormSchema } from './config/config.data.ts';
-import { USER_INFO_KEY } from '/@/enums/cacheEnum';
-import { getAuthCache } from '/@/utils/auth';
-import SceneLinkAgeDrawer from './SceneLinkAgeDrawer.vue';
-import { useMessage } from '/@/hooks/web/useMessage';
-import { Authority } from '/@/components/Authority';
-
-const userInfo: any = getAuthCache(USER_INFO_KEY);
-const userId = userInfo.userId;
+  import { nextTick } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useDrawer } from '/@/components/Drawer';
+  import {
+    screenLinkPageGetApi,
+    screenLinkPageDeleteApi,
+    screenLinkPagePutApi,
+  } from '/@/api/ruleengine/ruleengineApi';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Switch, Popconfirm } from 'ant-design-vue';
+  import { columns, searchFormSchema } from './config/config.data';
+  import { USER_INFO_KEY } from '/@/enums/cacheEnum';
+  import { getAuthCache } from '/@/utils/auth';
+  import SceneLinkAgeDrawer from './SceneLinkAgeDrawer.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { Authority } from '/@/components/Authority';
 
-const [registerDrawer, { openDrawer }] = useDrawer();
-const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
-  title: '场景联动列表',
-  api: screenLinkPageGetApi,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-  },
-  useSearchForm: true,
-  showTableSetting: true,
-  bordered: true,
-  showIndexColumn: false,
-  actionColumn: {
-    width: 200,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: 'right',
-  },
-});
-const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
-  useBatchDelete(screenLinkPageDeleteApi, handleSuccess, setProps);
-selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
-  // Demo:status为1的选择框禁用
-  if (record.status === 1) {
-    return { disabled: true };
-  } else {
-    return { disabled: false };
-  }
-};
-nextTick(() => {
-  setProps(selectionOptions);
-});
-
-function handleAdd() {
-  window.localStorage.setItem('isViewDisabledBtn', 'noView')
-  openDrawer(true, {
-    isUpdate: false,
-  });
-}
+  const userInfo: any = getAuthCache(USER_INFO_KEY);
+  const userId = userInfo.userId;
 
-function handleEdit(record: Recordable) {
-  window.localStorage.setItem('isViewDisabledBtn', 'noView')
-  openDrawer(true, {
-    record,
-    isUpdate: true,
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
+    title: '场景联动列表',
+    api: screenLinkPageGetApi,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 200,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
   });
-}
-function handleView(record: Recordable) {
-  window.localStorage.setItem('isViewDisabledBtn', 'isView')
-  openDrawer(true, {
-    record,
-    isUpdate: 3,
-  });
-}
-function handleSuccess() {
-  reload();
-}
-
-const statusChange = async (checked, record) => {
-  setProps({
-    loading: true,
-  });
-  setSelectedRowKeys([]);
-  resetSelectedRowKeys();
-  const newStatus = checked ? 1 : 0;
-  const { createMessage } = useMessage();
-  try {
-    await screenLinkPagePutApi({ id: record.id, status: newStatus });
-    if (newStatus) {
-      createMessage.success(`启用成功`);
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
+    useBatchDelete(screenLinkPageDeleteApi, handleSuccess, setProps);
+  selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+    // Demo:status为1的选择框禁用
+    if (record.status === 1) {
+      return { disabled: true };
     } else {
-      createMessage.success('禁用成功');
+      return { disabled: false };
     }
-  } finally {
-    setProps({
-      loading: false,
+  };
+  nextTick(() => {
+    setProps(selectionOptions);
+  });
+
+  function handleAdd() {
+    window.localStorage.setItem('isViewDisabledBtn', 'noView');
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  }
+
+  function handleEdit(record: Recordable) {
+    window.localStorage.setItem('isViewDisabledBtn', 'noView');
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  function handleView(record: Recordable) {
+    window.localStorage.setItem('isViewDisabledBtn', 'isView');
+    openDrawer(true, {
+      record,
+      isUpdate: 3,
     });
+  }
+  function handleSuccess() {
     reload();
   }
-};
+
+  const statusChange = async (checked, record) => {
+    setProps({
+      loading: true,
+    });
+    setSelectedRowKeys([]);
+    resetSelectedRowKeys();
+    const newStatus = checked ? 1 : 0;
+    const { createMessage } = useMessage();
+    try {
+      await screenLinkPagePutApi({ id: record.id, status: newStatus });
+      if (newStatus) {
+        createMessage.success(`启用成功`);
+      } else {
+        createMessage.success('禁用成功');
+      }
+    } finally {
+      setProps({
+        loading: false,
+      });
+      reload();
+    }
+  };
 </script>

+import { getPlatForm } from '/@/api/oem';
+
+enum DefaultPlatform {
+  LOGO = '/resource/img/logo.png',
+  // TITLE = 'ThingsKit',
+  ICO = '/favicon.ico',
+}
+
+export const usePlatform = async () => {
+  const platformInfo = await getPlatForm();
+
+  const createLoadingEffect = () => {
+    const wrap = document.createElement('div');
+    wrap.setAttribute('class', 'app-loading-wrap');
+    const img = document.createElement('img');
+    img.setAttribute('src', platformInfo.logo || DefaultPlatform.LOGO);
+    img.setAttribute('class', 'app-loading-logo');
+    img.setAttribute('alt', 'Logo');
+    const dots = document.createElement('div');
+    dots.setAttribute('class', 'app-loading-dots');
+    const dotWrap = document.createElement('span');
+    dotWrap.setAttribute('class', 'dot dot-spin');
+    for (let i = 0; i < 4; i++) {
+      dotWrap.appendChild(document.createElement('i'));
+    }
+    const title = document.createElement('div');
+    title.setAttribute('class', 'app-loading-title');
+    const textNode = document.createTextNode(
+      platformInfo.name || import.meta.env.VITE_GLOB_APP_TITLE
+    );
+    title.appendChild(textNode);
+    wrap.appendChild(img);
+    dots.appendChild(dotWrap);
+    wrap.appendChild(dots);
+    wrap.appendChild(title);
+    return wrap;
+  };
+
+  const replaceSiteIco = () => {
+    const linkEl = document.querySelectorAll('link[rel*="icon"]');
+    linkEl.forEach((item) => {
+      item.setAttribute('href', platformInfo.logo || DefaultPlatform.ICO);
+    });
+  };
+
+  const replaceLoadingEffect = () => {
+    const loadingWrapper = document.getElementById('first-screen-loading');
+    loadingWrapper!.innerHTML = '';
+    loadingWrapper?.appendChild(createLoadingEffect());
+  };
+
+  const bootstrap = () => {
+    replaceSiteIco();
+    replaceLoadingEffect();
+  };
+
+  bootstrap();
+};