Merge branch 'ww' into 'main'

fix: BUG in teambition

See merge request huang/yun-teng-iot-front!377

 import { defHttp } from '/@/utils/http/axios';
 import type {
   queryPageParams,
-  ConfigurationModal,
   ConfigurationCenterParams,
   ConfigurationCenterInfo,
+  ConfigurationCenterItemsModal,
 } from './model/configurationCenterModal';
 import { getPageData } from '../../base';
 enum API {
@@ -11,7 +11,7 @@ enum API {
 }
 
 export const getPage = (params: queryPageParams) => {
-  return getPageData<ConfigurationModal>(params, API.basicUrl);
+  return getPageData<ConfigurationCenterItemsModal>(params, API.basicUrl);
 };
 
 export const saveConfigurationCenter = (params: ConfigurationCenterParams) => {

 import { BasicPageParams } from '/@/api/model/baseModel';
-import { ContactParams } from '/@/api/alarm/contact/model/alarmContactModal';
 
-interface ConfigurationCenterItemsModal {
+export interface ConfigurationCenterItemsModal {
   id: string;
   name: string;
   createTime: string;
   creator: string;
   remark: string;
 }
-export type queryPageParams = BasicPageParams & { name: string; organizationId: string };
+export type queryPageParams = BasicPageParams & {
+  name?: Nullable<string>;
+  organizationId?: Nullable<number>;
+};
 
 export interface ConfigurationModal {
   items: ConfigurationCenterItemsModal[];

@@ -12,5 +12,5 @@ export const PageEnum = {
   //消息配置
   MESSAGE_CONFIG: '/message/config',
   //设备配置
-  DEVICE_PROFILE: '/device/profiles',
+  DEVICE_PROFILE: '/product/profiles',
 };

@@ -47,8 +47,8 @@ export default defineComponent({
     const {
       getContentMode,
       getShowFooter,
-      getShowBreadCrumb,
-      getShowBreadCrumbIcon,
+      // getShowBreadCrumb,
+      // getShowBreadCrumbIcon,
       getShowLogo,
       getFullContent,
       getColorWeak,
@@ -281,7 +281,7 @@ export default defineComponent({
     function renderContent() {
       return (
         <>
-          <SwitchItem
+          {/* <SwitchItem
             title={t('layout.setting.breadcrumb')}
             event={HandlerEnum.SHOW_BREADCRUMB}
             def={unref(getShowBreadCrumb)}
@@ -299,7 +299,7 @@ export default defineComponent({
             title={t('layout.setting.tabs')}
             event={HandlerEnum.TABS_SHOW}
             def={unref(getShowMultipleTab)}
-          />
+          /> */}
 
           <SwitchItem
             title={t('layout.setting.tabsRedoBtn')}

@@ -17,7 +17,7 @@ export default {
   device: {
     deviceManagement: '设备管理',
     device: '设备列表',
-    deviceProfile: '设备配置',
+    product: '产品',
   },
 
   tenant: {

@@ -250,7 +250,7 @@ export const DeviceProfileIdMaxLength: Rule[] = [
     required: true,
     validator: (_, value: string) => {
       if (String(value).length > 36) {
-        return Promise.reject('设备配置长度不超过36字');
+        return Promise.reject('所属产品长度不超过36字');
       }
       return Promise.resolve();
     },

@@ -22,8 +22,8 @@ export enum AlarmPermissionKey {
 export function useAlarmNotify(params: UseAlarmNotifyParams = {}) {
   const {
     alarmNotifyStatus = AlarmStatus.ACTIVE_UN_ACK,
-    interval = import.meta.env.VITE_ALARM_NOTIFY_POLLING_INTERVAL_TIME,
-    duration = import.meta.env.VITE_ALARM_NOTIFY_DURATION,
+    interval = import.meta.env.VITE_ALARM_NOTIFY_POLLING_INTERVAL_TIME || 60000,
+    duration = import.meta.env.VITE_ALARM_NOTIFY_DURATION || 5,
     color = 'orange',
   } = params;
   const alarmNotifyStatusMean = AlarmStatusMean[alarmNotifyStatus];

@@ -59,6 +59,8 @@
                 icon: 'clarity:note-edit-line',
                 onClick: handleCreateOrEdit.bind(null, record),
               },
+            ]"
+            :drop-down-actions="[
               {
                 label: '删除',
                 auth: 'api:yt:video:delete',

 <script setup lang="ts">
   import { PageWrapper } from '/@/components/Page';
   import OrganizationIdTree from '../../common/organizationIdTree/src/OrganizationIdTree.vue';
-  import { computed, onMounted, reactive, ref, unref, watch } from 'vue';
-  import { Tabs, Row, Col, Spin, Button, Pagination, Empty } from 'ant-design-vue';
+  import { onMounted, reactive, ref, unref, watch } from 'vue';
+  import { Spin, Button, Pagination, Space, List } from 'ant-design-vue';
   import { cameraPage } from '/@/api/camera/cameraManager';
   import { CameraRecord } from '/@/api/camera/model/cameraModel';
   import { videoPlay as VideoPlay } from 'vue3-video-play';
@@ -14,6 +14,7 @@
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
   import { isDef } from '/@/utils/is';
   import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
+  import { buildUUID } from '/@/utils/uuid';
 
   type CameraRecordItem = CameraRecord & {
     canPlay?: boolean;
@@ -67,15 +68,11 @@
     getCameraList();
   };
 
-  const getColLayout = computed(() => {
-    const totalSpan = 24;
-    return totalSpan / pagination.colNumber;
-  });
-
   const getCameraList = async () => {
     try {
+      cameraList.value = [];
       loading.value = true;
-      const { items, total } = await cameraPage({
+      let { items, total } = await cameraPage({
         page: pagination.page,
         pageSize: pagination.pageSize,
         organizationId: unref(organizationId)!,
@@ -87,6 +84,14 @@
         (item as CameraRecordItem).isTransform = false;
         beforeVideoPlay(item);
       }
+      if (items.length < pagination.pageSize) {
+        const fillArr: any = Array.from({ length: pagination.pageSize - items.length }).map(() => ({
+          id: buildUUID(),
+          placeholder: true,
+        }));
+        items = [...items, ...fillArr];
+        console.log(fillArr);
+      }
       cameraList.value = items;
     } catch (error) {
     } finally {
@@ -128,7 +133,10 @@
     }
   };
 
+  const gridLayout = ref({ gutter: 1, column: 2 });
+
   const handleSwitchLayoutWay = (pageSize: number, layout: number) => {
+    gridLayout.value = { gutter: 1, column: Math.sqrt(pageSize) };
     pagination.colNumber = layout;
     pagination.pageSize = pageSize;
     pagination.page = 1;
@@ -185,7 +193,7 @@
     <PageWrapper dense contentFullHeight contentClass="flex">
       <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
       <section class="p-4 pl-9 split-screen-mode flex flex-col flex-auto w-3/4 xl:w-4/5">
-        <div class="p-3 bg-light-50 flex justify-between mb-4">
+        <div class="p-3 bg-light-50 flex justify-between mb-4 dark:bg-dark-900">
           <div class="flex gap-4 cursor-pointer items-center">
             <div
               class="w-8 h-8 flex justify-center items-center"
@@ -225,14 +233,67 @@
             <div class="flex">
               <Button type="primary" @click="handleAddCamera">新增视频</Button>
             </div>
-            <Tabs type="card" v-model:activeKey="activeKey" @change="handleChangeMode">
-              <Tabs.TabPane :key="PageMode.SPLIT_SCREEN_MODE" tab="分屏模式" />
-              <Tabs.TabPane :key="PageMode.LIST_MODE" tab="列表模式" />
-              <Tabs.TabPane :key="PageMode.FULL_SCREEN_MODE" tab="全屏" />
-            </Tabs>
+            <Space>
+              <Button type="primary" @click="handleChangeMode(PageMode.SPLIT_SCREEN_MODE)">
+                分屏模式
+              </Button>
+              <Button type="primary" @click="handleChangeMode(PageMode.LIST_MODE)">
+                列表模式
+              </Button>
+              <Button type="primary" @click="handleChangeMode(PageMode.FULL_SCREEN_MODE)">
+                全屏
+              </Button>
+            </Space>
           </div>
         </div>
-        <section ref="videoContainer" class="bg-light-50 flex-auto">
+        <List
+          :loading="loading"
+          :data-source="cameraList"
+          class="bg-light-50 flex-auto dark:bg-dark-900 split-mode-list"
+          :grid="gridLayout"
+          :style="{ '--height': `${100 / pagination.colNumber}%` }"
+        >
+          <template #renderItem="{ item }">
+            <List.Item>
+              <div class="box-border w-full h-full p-1px">
+                <div
+                  v-if="item.placeholder"
+                  class="bg-black w-full h-full overflow-hidden relative"
+                ></div>
+                <div
+                  v-if="!item.placeholder"
+                  class="bg-black w-full h-full overflow-hidden relative video-container"
+                >
+                  <Spin v-show="!item.isTransform" :spinning="!item.isTransform">
+                    <div class="bg-black text-light-50"> </div>
+                  </Spin>
+                  <VideoPlay
+                    v-show="item.isTransform"
+                    @loadstart="handleLoadStart(item)"
+                    @loadeddata="handleLoadData(item)"
+                    v-bind="options"
+                    :src="item.videoUrl"
+                    :title="item.name"
+                    :type="item.type"
+                  />
+                  <div
+                    v-if="item.isTransform && isDef(item.canPlay) && !item.canPlay"
+                    class="video-container-error-msk absolute top-0 left-0 text-lg w-full h-full text-light-50 flex justify-center items-center z-50 bg-black"
+                  >
+                    视频加载出错了！
+                  </div>
+                  <div
+                    class="video-container-mask absolute top-0 left-0 z-50 text-lg w-full text-light-50 flex justify-center items-center"
+                    style="height: 100%; background-color: rgba(0, 0, 0, 0.5)"
+                  >
+                    <span>{{ item.name }}</span>
+                  </div>
+                </div>
+              </div>
+            </List.Item>
+          </template>
+        </List>
+        <!-- <section ref="videoContainer" class="bg-light-50 flex-auto dark:bg-dark-900">
           <Spin :spinning="loading" class="h-full">
             <Empty
               class="h-full flex flex-col justify-center items-center"
@@ -277,7 +338,7 @@
               </Col>
             </Row>
           </Spin>
-        </section>
+        </section> -->
       </section>
     </PageWrapper>
     <CameraDrawer @register="registerDrawer" @success="getCameraList" />
@@ -334,4 +395,20 @@
       }
     }
   }
+
+  .split-mode-list:deep(.ant-row) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .split-mode-list:deep(.ant-list-item) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .split-mode-list:deep(.ant-col) {
+    width: 100%;
+    // height: var(--height);
+    height: 100%;
+  }
 </style>

@@ -2,7 +2,7 @@
   <div class="organization-tree flex relative">
     <div class="cursor-pointer flex py-4 fold-icon" :class="foldFlag ? 'absolute' : ''">
       <div @click="handleFold">
-        <DoubleRightOutlined :class="[foldFlag ? '' : 'rotate-180']" class="text-xl transform" />
+        <CaretRightOutlined :class="[foldFlag ? '' : 'rotate-180']" class="text-xl transform" />
       </div>
     </div>
     <div
@@ -29,7 +29,7 @@
   import { onMounted, ref, unref } from 'vue';
   import { BasicTree, TreeItem } from '/@/components/Tree';
   import { getOrganizationList } from '/@/api/system/system';
-  import { DoubleRightOutlined } from '@ant-design/icons-vue';
+  import { CaretRightOutlined } from '@ant-design/icons-vue';
 
   const emit = defineEmits(['select']);
   const treeData = ref<TreeItem[]>([]);

+<template>
+  <div>
+    <PageWrapper dense contentFullHeight contentClass="flex">
+      <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
+      <BasicTable
+        style="flex: auto"
+        :clickToRowSelect="false"
+        @register="registerTable"
+        :searchInfo="searchInfo"
+        class="w-3/4 xl:w-4/5"
+      >
+        <template #platform="{ record }">
+          <Tag :color="record.platform === Platform.PHONE ? 'cyan' : 'blue'">
+            {{ record.platform === Platform.PHONE ? '移动端' : 'PC端' }}
+          </Tag>
+        </template>
+        <template #toolbar>
+          <Authority value="api:yt:configuration:center:post">
+            <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增组态 </a-button>
+          </Authority>
+          <Authority value="api:yt:configuration:center:delete">
+            <Popconfirm
+              title="您确定要批量删除数据"
+              ok-text="确定"
+              cancel-text="取消"
+              @confirm="handleDeleteOrBatchDelete(null)"
+            >
+              <a-button type="primary" color="error" :disabled="hasBatchDelete">
+                批量删除
+              </a-button>
+            </Popconfirm>
+          </Authority>
+        </template>
+        <template #action="{ record }">
+          <TableAction
+            :actions="[
+              {
+                label: '设计',
+                auth: 'api:yt:configuration:center:get_configuration_info:get',
+                icon: 'clarity:note-edit-line',
+                onClick: handleDesign.bind(null, record),
+              },
+              {
+                label: '预览',
+                auth: 'api:yt:configuration:center:get_configuration_info:get',
+                icon: 'ant-design:eye-outlined',
+                onClick: handlePreview.bind(null, record),
+              },
+              {
+                label: '编辑',
+                auth: 'api:yt:configuration:center:update',
+                icon: 'clarity:note-edit-line',
+                onClick: handleCreateOrEdit.bind(null, record),
+              },
+              {
+                label: '删除',
+                auth: 'api:yt:configuration:center:delete',
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  confirm: handleDeleteOrBatchDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </BasicTable>
+    </PageWrapper>
+    <ContactDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, nextTick } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { PageWrapper } from '/@/components/Page';
+  import { useDrawer } from '/@/components/Drawer';
+  import ContactDrawer from './ConfigurationCenterDrawer.vue';
+  import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
+  import { searchFormSchema, columns, Platform } from './center.data';
+  import {
+    getPage,
+    deleteConfigurationCenter,
+  } from '/@/api/configuration/center/configurationCenter';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { getAppEnvConfig, isDevMode } from '/@/utils/env';
+  import { Authority } from '/@/components/Authority';
+  import { Popconfirm } from 'ant-design-vue';
+  import { Tag } from 'ant-design-vue';
+  export default defineComponent({
+    components: {
+      PageWrapper,
+      OrganizationIdTree,
+      BasicTable,
+      TableAction,
+      ContactDrawer,
+      Authority,
+      Popconfirm,
+      Tag,
+    },
+    setup() {
+      const { VITE_GLOB_CONFIGURATION } = getAppEnvConfig();
+      const isDev = isDevMode();
+      const searchInfo = reactive<Recordable>({});
+      const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+      // 表格hooks
+      const [registerTable, { reload, setProps }] = useTable({
+        title: '组态中心列表',
+        api: getPage,
+        columns,
+        clickToRowSelect: false,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+          resetFunc: resetFn,
+        },
+        showIndexColumn: false,
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        rowKey: 'id',
+        actionColumn: {
+          width: 200,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+        },
+      });
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+        deleteConfigurationCenter,
+        handleSuccess,
+        setProps
+      );
+      nextTick(() => {
+        setProps(selectionOptions);
+      });
+
+      // 弹框
+      const [registerDrawer, { openDrawer }] = useDrawer();
+
+      // 刷新
+      function handleSuccess() {
+        reload();
+      }
+      // 新增或编辑
+      const handleCreateOrEdit = (record: Recordable | null) => {
+        if (record) {
+          openDrawer(true, {
+            isUpdate: true,
+            record,
+          });
+        } else {
+          openDrawer(true, {
+            isUpdate: false,
+          });
+        }
+      };
+      // 树形选择器
+      const handleSelect = (organizationId: string) => {
+        searchInfo.organizationId = organizationId;
+        handleSuccess();
+      };
+
+      const handlePreview = (record: Recordable | null) => {
+        window.open(
+          `${VITE_GLOB_CONFIGURATION}/${isDev ? '?dev=1&' : '?'}configurationId=${
+            record!.id
+          }&lightbox=1`
+        );
+      };
+      const handleDesign = (record: Recordable | null) => {
+        window.open(
+          `${VITE_GLOB_CONFIGURATION}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`
+        );
+      };
+
+      return {
+        Platform,
+        searchInfo,
+        hasBatchDelete,
+        handleCreateOrEdit,
+        handleDeleteOrBatchDelete,
+        handleSelect,
+        handleSuccess,
+        handlePreview,
+        handleDesign,
+        registerTable,
+        registerDrawer,
+        organizationIdTreeRef,
+      };
+    },
+  });
+</script>

-<template>
-  <div>
-    <PageWrapper dense contentFullHeight contentClass="flex">
-      <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
-      <BasicTable
-        style="flex: auto"
-        :clickToRowSelect="false"
-        @register="registerTable"
-        :searchInfo="searchInfo"
-        class="w-3/4 xl:w-4/5"
-      >
-        <template #platform="{ record }">
-          <Tag :color="record.platform === Platform.PHONE ? 'cyan' : 'blue'">
-            {{ record.platform === Platform.PHONE ? '移动端' : 'PC端' }}
-          </Tag>
-        </template>
-        <template #toolbar>
-          <Authority value="api:yt:configuration:center:post">
-            <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增组态 </a-button>
-          </Authority>
-          <Authority value="api:yt:configuration:center:delete">
-            <Popconfirm
-              title="您确定要批量删除数据"
-              ok-text="确定"
-              cancel-text="取消"
-              @confirm="handleDeleteOrBatchDelete(null)"
-            >
-              <a-button type="primary" color="error" :disabled="hasBatchDelete">
-                批量删除
-              </a-button>
-            </Popconfirm>
-          </Authority>
-        </template>
-        <template #action="{ record }">
-          <TableAction
-            :actions="[
-              {
-                label: '设计',
-                auth: 'api:yt:configuration:center:get_configuration_info:get',
-                icon: 'clarity:note-edit-line',
-                onClick: handleDesign.bind(null, record),
-              },
-              {
-                label: '预览',
-                auth: 'api:yt:configuration:center:get_configuration_info:get',
-                icon: 'ant-design:eye-outlined',
-                onClick: handlePreview.bind(null, record),
-              },
-              {
-                label: '编辑',
-                auth: 'api:yt:configuration:center:update',
-                icon: 'clarity:note-edit-line',
-                onClick: handleCreateOrEdit.bind(null, record),
-              },
-              {
-                label: '删除',
-                auth: 'api:yt:configuration:center:delete',
-                icon: 'ant-design:delete-outlined',
-                color: 'error',
-                popConfirm: {
-                  title: '是否确认删除',
-                  confirm: handleDeleteOrBatchDelete.bind(null, record),
-                },
-              },
-            ]"
-          />
-        </template>
-      </BasicTable>
-    </PageWrapper>
-    <ContactDrawer @register="registerDrawer" @success="handleSuccess" />
-  </div>
-</template>
-
-<script lang="ts">
-  import { defineComponent, reactive, nextTick } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { PageWrapper } from '/@/components/Page';
-  import { useDrawer } from '/@/components/Drawer';
-  import ContactDrawer from './ConfigurationCenterDrawer.vue';
-  import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
-  import { searchFormSchema, columns, Platform } from './center.data';
+<script setup lang="ts">
+  import { List, Card, Button, PaginationProps, Popover, Slider, Tooltip } from 'ant-design-vue';
+  import {
+    ReloadOutlined,
+    AppstoreOutlined,
+    EyeOutlined,
+    EditOutlined,
+    EllipsisOutlined,
+  } from '@ant-design/icons-vue';
+  import { onMounted, reactive, ref, unref } from 'vue';
+  import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree';
   import {
-    getPage,
     deleteConfigurationCenter,
+    getPage,
   } from '/@/api/configuration/center/configurationCenter';
-  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { getAppEnvConfig, isDevMode } from '/@/utils/env';
+  import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
+  import { PageWrapper } from '/@/components/Page';
+  import { Dropdown } from '/@/components/Dropdown';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { searchFormSchema } from './center.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
   import { Authority } from '/@/components/Authority';
-  import { Popconfirm } from 'ant-design-vue';
-  import { Tag } from 'ant-design-vue';
-  export default defineComponent({
-    components: {
-      PageWrapper,
-      OrganizationIdTree,
-      BasicTable,
-      TableAction,
-      ContactDrawer,
-      Authority,
-      Popconfirm,
-      Tag,
+  import { isDevMode } from '/@/utils/env';
+  import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
+  import { getBoundingClientRect } from '/@/utils/domUtils';
+
+  const listColumn = ref(4);
+
+  const { createMessage } = useMessage();
+
+  const organizationId = ref<Nullable<number>>(null);
+
+  const pagination = reactive<PaginationProps>({
+    size: 'small',
+    showTotal: (total: number) => `共 ${total} 条数据`,
+    current: 1,
+    onChange: (page: number) => {
+      pagination.current = page;
+      getListData();
+    },
+  });
+
+  const loading = ref(false);
+
+  const dataSource = ref<ConfigurationCenterItemsModal[]>([]);
+
+  const [registerForm, { getFieldsValue }] = useForm({
+    schemas: searchFormSchema,
+    showAdvancedButton: true,
+    labelWidth: 100,
+    compact: true,
+    resetFunc: () => {
+      resetFn();
+      organizationId.value = null;
+      return getListData();
     },
-    setup() {
-      const { VITE_GLOB_CONFIGURATION } = getAppEnvConfig();
-      const isDev = isDevMode();
-      const searchInfo = reactive<Recordable>({});
-      const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
-      // 表格hooks
-      const [registerTable, { reload, setProps }] = useTable({
-        title: '组态中心列表',
-        api: getPage,
-        columns,
-        clickToRowSelect: false,
-        formConfig: {
-          labelWidth: 120,
-          schemas: searchFormSchema,
-          resetFunc: resetFn,
-        },
-        showIndexColumn: false,
-        useSearchForm: true,
-        showTableSetting: true,
-        bordered: true,
-        rowKey: 'id',
-        actionColumn: {
-          width: 200,
-          title: '操作',
-          dataIndex: 'action',
-          slots: { customRender: 'action' },
-          fixed: 'right',
-        },
+    submitFunc: async () => {
+      const value = getFieldsValue();
+      getListData(value);
+    },
+  });
+
+  async function getListData(value: Recordable = {}) {
+    try {
+      loading.value = true;
+      const pageSize = 4 * unref(listColumn);
+      const { items, total } = await getPage({
+        organizationId: unref(organizationId),
+        ...value,
+        page: pagination.current!,
+        pageSize,
+      });
+      dataSource.value = items;
+      pagination.total = total;
+      pagination.pageSize = pageSize;
+    } catch (error) {
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  onMounted(() => {
+    getListData();
+  });
+
+  const searchInfo = reactive<Recordable>({});
+  const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+  const handleSelect = (orgId: number) => {
+    organizationId.value = orgId;
+    getListData();
+  };
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
+  const handleCreateOrUpdate = (record?: ConfigurationCenterItemsModal) => {
+    if (record) {
+      openDrawer(true, {
+        isUpdate: true,
+        record,
       });
-      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
-        deleteConfigurationCenter,
-        handleSuccess,
-        setProps
-      );
-      nextTick(() => {
-        setProps(selectionOptions);
+    } else {
+      openDrawer(true, {
+        isUpdate: false,
       });
+    }
+  };
 
-      // 弹框
-      const [registerDrawer, { openDrawer }] = useDrawer();
-
-      // 刷新
-      function handleSuccess() {
-        reload();
-      }
-      // 新增或编辑
-      const handleCreateOrEdit = (record: Recordable | null) => {
-        if (record) {
-          openDrawer(true, {
-            isUpdate: true,
-            record,
-          });
-        } else {
-          openDrawer(true, {
-            isUpdate: false,
-          });
-        }
-      };
-      // 树形选择器
-      const handleSelect = (organizationId: string) => {
-        searchInfo.organizationId = organizationId;
-        handleSuccess();
-      };
-
-      const handlePreview = (record: Recordable | null) => {
-        window.open(
-          `${VITE_GLOB_CONFIGURATION}/${isDev ? '?dev=1&' : '?'}configurationId=${
-            record!.id
-          }&lightbox=1`
-        );
-      };
-      const handleDesign = (record: Recordable | null) => {
-        window.open(
-          `${VITE_GLOB_CONFIGURATION}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`
-        );
-      };
-
-      return {
-        Platform,
-        searchInfo,
-        hasBatchDelete,
-        handleCreateOrEdit,
-        handleDeleteOrBatchDelete,
-        handleSelect,
-        handleSuccess,
-        handlePreview,
-        handleDesign,
-        registerTable,
-        registerDrawer,
-        organizationIdTreeRef,
-      };
-    },
+  const { VITE_GLOB_CONFIGURATION } = import.meta.env;
+  const isDev = isDevMode();
+
+  const handlePreview = (record: ConfigurationCenterItemsModal) => {
+    console.log(record);
+    window.open(
+      `${VITE_GLOB_CONFIGURATION}/${isDev ? '?dev=1&' : '?'}configurationId=${
+        record!.id
+      }&lightbox=1`
+    );
+  };
+
+  const handleDesign = (record: ConfigurationCenterItemsModal) => {
+    window.open(
+      `${VITE_GLOB_CONFIGURATION}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`
+    );
+  };
+
+  const { createSyncConfirm } = useSyncConfirm();
+  const handleDelete = async (record: ConfigurationCenterItemsModal) => {
+    try {
+      await createSyncConfirm({ iconType: 'warning', content: '是否确认删除操作?' });
+      await deleteConfigurationCenter([record.id]);
+      createMessage.success('删除成功');
+      await getListData();
+    } catch (error) {}
+  };
+
+  const listEl = ref<Nullable<ComponentElRef>>(null);
+
+  onMounted(() => {
+    const clientHeight = document.documentElement.clientHeight;
+    const rect = getBoundingClientRect(unref(listEl)!.$el!) as DOMRect;
+    // margin-top 24 height 24
+    const paginationHeight = 24 + 24 + 8;
+    // list pading top 8 maring-top 8 extra slot 56
+    const listContainerMarginBottom = 8 + 8 + 56;
+    const listContainerHeight =
+      clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
+    const listContainerEl = (unref(listEl)!.$el as HTMLElement).querySelector(
+      '.ant-spin-container'
+    ) as HTMLElement;
+    listContainerEl &&
+      (listContainerEl.style.height = listContainerHeight + 'px') &&
+      (listContainerEl.style.overflowY = 'auto') &&
+      (listContainerEl.style.overflowX = 'hidden');
   });
 </script>
+
+<template>
+  <PageWrapper dense contentFullHeight contentClass="flex">
+    <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
+    <section class="flex-auto pl-9 p-4 configuration-list">
+      <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">
+        <BasicForm @register="registerForm" />
+      </div>
+      <List
+        ref="listEl"
+        :loading="loading"
+        class="flex-auto bg-light-50 dark:bg-dark-900 !p-2 !mt-4"
+        position="bottom"
+        :pagination="pagination"
+        :data-source="dataSource"
+        :grid="{ gutter: 4, column: listColumn }"
+      >
+        <template #header>
+          <div class="flex gap-3 justify-end">
+            <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button>
+            <Popover :trigger="['hover']">
+              <template #content>
+                <div class="w-50">
+                  <div>每行显示数量</div>
+                  <Slider
+                    v-model:value="listColumn"
+                    :max="12"
+                    :min="4"
+                    :marks="{ 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9, 10: 10, 11: 11, 12: 12 }"
+                    @change="getListData"
+                  />
+                </div>
+              </template>
+              <Button type="primary">
+                <AppstoreOutlined />
+              </Button>
+            </Popover>
+            <Tooltip title="刷新">
+              <Button type="primary" @click="getListData">
+                <ReloadOutlined @click="getListData" />
+              </Button>
+            </Tooltip>
+          </div>
+        </template>
+        <template #renderItem="{ item }">
+          <List.Item>
+            <Card hoverable>
+              <template #cover>
+                <img
+                  alt="example"
+                  src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
+                />
+              </template>
+              <template class="ant-card-actions" #actions>
+                <Authority value="api:yt:configuration:center:get_configuration_info:get">
+                  <Tooltip title="预览">
+                    <EyeOutlined key="setting" @click="handlePreview(item)" />
+                  </Tooltip>
+                </Authority>
+                <Authority value="api:yt:configuration:center:update">
+                  <Tooltip title="编辑">
+                    <EditOutlined key="edit" @click="handleCreateOrUpdate(item)" />
+                  </Tooltip>
+                </Authority>
+                <Dropdown
+                  :dropMenuList="[
+                    {
+                      text: '设计',
+                      auth: 'api:yt:configuration:center:get_configuration_info:get',
+                      icon: 'clarity:note-edit-line',
+                      onClick: handleDesign.bind(null, item),
+                    },
+                    {
+                      text: '删除',
+                      auth: 'api:yt:configuration:center:delete',
+                      icon: 'ant-design:delete-outlined',
+                      color: 'error',
+                      onClick: handleDelete.bind(null, item),
+                    },
+                  ]"
+                  :trigger="['hover']"
+                >
+                  <EllipsisOutlined key="ellipsis" />
+                </Dropdown>
+              </template>
+              <Card.Meta :title="item.name">
+                <template #description>
+                  <div class="truncate">{{ item.organizationDTO.name }}</div>
+                  <div class="truncate">{{ item.remark }} </div>
+                </template>
+              </Card.Meta>
+            </Card>
+          </List.Item>
+        </template>
+      </List>
+    </section>
+    <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />
+  </PageWrapper>
+</template>
+
+<style lang="less" scoped>
+  .configuration-list:deep(.ant-list-header) {
+    border-bottom: none !important;
+  }
+
+  .configuration-list:deep(.ant-list-pagination) {
+    height: 24px;
+  }
+</style>

@@ -206,7 +206,7 @@
           target: '_blank ',
         },
         {
-          title: '什么是设备配置?',
+          title: '什么是产品?',
           href: 'https://docs.thingskit.com/thingskit-link/operation-guide/device-manage.html#%E8%AE%BE%E5%A4%87%E9%85%8D%E7%BD%AE',
           target: '_blank ',
         },

@@ -51,8 +51,8 @@
       series: [
         {
           name: '告警数',
-          barWidth: '10%',
-          type: 'bar',
+          // barWidth: '10%',
+          type: 'line',
           stack: 'Total',
           data: props.alarmList,
           color: '#3C78FF',
@@ -63,6 +63,7 @@
   watch(
     () => props.alarmList,
     (newValue) => {
+      console.log({ newValue, props });
       let alarmTotal = 0;
       for (const item of props.alarmList) {
         alarmTotal += Number(item[1]);
@@ -91,10 +92,10 @@
         series: [
           {
             name: '告警数',
-            type: 'bar',
+            type: 'line',
             stack: 'Total',
             color: '#3C78FF',
-            barWidth: '10%',
+            // barWidth: '10%',
             data: newValue,
           },
         ],

@@ -63,17 +63,17 @@
         series: [
           {
             name: '传输数据点',
-            type: 'bar',
+            type: 'line',
             stack: 'total',
             data: newValue,
-            barWidth: '10%',
+            // barWidth: '10%',
             color: '#5AEEED',
           },
           {
             name: '传输消息量',
-            type: 'bar',
+            type: 'line',
             stack: 'total',
-            barWidth: '10%',
+            // barWidth: '10%',
             data: newValue1,
             color: '#3C78FF',
           },

@@ -35,7 +35,7 @@ export const step1Schemas: FormSchema[] = [
   },
   {
     field: 'profileId',
-    label: '设备配置',
+    label: '所属产品',
     required: true,
     component: 'ApiSelect',
     componentProps: ({ formActionType }) => {
@@ -57,7 +57,7 @@ export const step1Schemas: FormSchema[] = [
     required: true,
     component: 'ApiSelect',
     dynamicDisabled: true,
-    helpMessage: ['选择设备配置,自动关联设备类型'],
+    helpMessage: ['选择所属产品,自动关联设备类型'],
     componentProps: {
       placeholder: '设备类型',
       api: findDictItemByCode,

@@ -21,7 +21,7 @@ export const descSchema: DescItem[] = [
   },
   {
     field: 'deviceProfile.name',
-    label: '设备配置',
+    label: '产品',
   },
   {
     field: 'gatewayName',

@@ -32,7 +32,7 @@ export const columns: BasicColumn[] = [
     slots: { customRender: 'deviceType' },
   },
   {
-    title: '设备配置',
+    title: '所属产品',
     dataIndex: 'deviceProfile.name',
     width: 160,
     slots: { customRender: 'deviceProfile' },

@@ -103,6 +103,21 @@
         <template #action="{ record }">
           <TableAction
             :actions="[
+              {
+                label: '详情',
+                icon: 'ant-design:eye-outlined',
+                auth: 'api:yt:device:get',
+                onClick: handleDetail.bind(null, record),
+              },
+              {
+                label: '编辑',
+                auth: 'api:yt:device:update',
+                icon: 'clarity:note-edit-line',
+                ifShow: authBtn(role) && record.customerId === undefined,
+                onClick: handleEdit.bind(null, record),
+              },
+            ]"
+            :dropDownActions="[
               record.customerId
                 ? {
                     label: '取消分配',
@@ -119,20 +134,6 @@
                     ifShow: authBtn(role),
                     onClick: handleDispatchCustomer.bind(null, record),
                   },
-
-              {
-                label: '详情',
-                icon: 'ant-design:eye-outlined',
-                auth: 'api:yt:device:get',
-                onClick: handleDetail.bind(null, record),
-              },
-              {
-                label: '编辑',
-                auth: 'api:yt:device:update',
-                icon: 'clarity:note-edit-line',
-                ifShow: authBtn(role) && record.customerId === undefined,
-                onClick: handleEdit.bind(null, record),
-              },
               {
                 label: '删除',
                 auth: 'api:yt:device:delete',
@@ -235,7 +236,7 @@
         searchInfo: searchInfo,
         clickToRowSelect: false,
         actionColumn: {
-          width: 300,
+          width: 200,
           title: '操作',
           slots: { customRender: 'action' },
           fixed: 'right',

@@ -33,7 +33,7 @@ export const formSchema: FormSchema[] = [
     component: 'ApiSelect',
     componentProps: {
       api: getDeviceProfile,
-      placeholder: '请选择设备配置',
+      placeholder: '请选择产品',
       labelField: 'name',
       valueField: 'id',
     },

+<template>
+  <BasicDrawer v-bind="$attrs" title="产品详情" @register="register" width="50%">
+    <Tabs :animated="true" v-model:activeKey="activeKey">
+      <TabPane forceRender key="1" tab="产品">
+        <div class="relative">
+          <DeviceConfigurationStep :ifShowBtn="false" ref="DevConStRef" />
+          <div class="absolute w-full h-full top-0 cursor-not-allowed"></div>
+        </div>
+      </TabPane>
+      <TabPane forceRender key="2" tab="传输配置">
+        <div class="relative">
+          <TransportConfigurationStep :ifShowBtn="false" ref="TransConStRef" />
+          <div class="absolute w-full h-full top-0 cursor-not-allowed"></div>
+        </div>
+      </TabPane>
+      <TabPane forceRender key="3" tab="物模型管理">
+        <PhysicalModelManagementStep />
+      </TabPane>
+    </Tabs>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import DeviceConfigurationStep from './step/DeviceConfigurationStep.vue';
+  import TransportConfigurationStep from './step/TransportConfigurationStep.vue';
+  import PhysicalModelManagementStep from './step/PhysicalModelManagementStep.vue';
+  import { ref, unref } from 'vue';
+  import { deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
+
+  defineEmits(['register']);
+
+  const activeKey = ref('1');
+
+  const DevConStRef = ref<InstanceType<typeof DeviceConfigurationStep>>();
+  const TransConStRef = ref<InstanceType<typeof TransportConfigurationStep>>();
+  // const PhysicalModManRef = ref<InstanceType<typeof PhysicalModelManagementStep>>();
+
+  const setDeviceConfFormData = async (res: Recordable) => {
+    unref(DevConStRef)?.setFormData(res);
+  };
+  const setTransConfFormData = async (res: Recordable) => {
+    unref(TransConStRef)?.setFormData(res);
+  };
+
+  const [register, {}] = useDrawerInner(async (data: Recordable) => {
+    activeKey.value = '1';
+    const res = await deviceConfigGetDetail(data.record.id);
+    setDeviceConfFormData(res);
+    setTransConfFormData(res);
+  });
+</script>
+
+<style lang="less" scope></style>

@@ -33,7 +33,7 @@
           :size="size"
           @change="handleChange"
         >
-          <TabPane forceRender key="1" tab="设备配置">
+          <TabPane forceRender key="1" tab="产品">
             <div class="relative">
               <DeviceConfigurationStep
                 :ifShowBtn="isViewDetail ? false : true"
@@ -109,7 +109,7 @@
     isEditCreatTime.value = data.record !== undefined ? data.record.createTime : null;
     if (!unref(isViewDetail)) {
       dynamicWidth.value = 55 + 'rem';
-      const title = !unref(isUpdate) ? '编辑设备配置' : '新增设备配置';
+      const title = !unref(isUpdate) ? '编辑产品' : '新增产品';
       setModalProps({ title, showOkBtn: true, showCancelBtn: true });
       if (!unref(isUpdate)) {
         await setDeviceConfEditFormData(res);
@@ -118,7 +118,7 @@
       }
     } else {
       dynamicWidth.value = 60 + 'rem';
-      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '设备配置详情' });
+      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '产品详情' });
       await setDeviceConfEditFormData(res);
       await setTransConfEditFormData(res);
       handleStepNext(false, res);

@@ -10,7 +10,7 @@ import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
 
 export const steps = [
   {
-    title: '设备配置',
+    title: '产品',
     content: 'First-content',
   },
   {

@@ -8,11 +8,11 @@
     >
       <template #toolbar>
         <Authority value="api:yt:deviceProfile:post">
-          <a-button type="primary" @click="handleCreate"> 新增设备配置 </a-button>
+          <a-button type="primary" @click="handleCreate"> 新增产品 </a-button>
         </Authority>
         <Authority value="api:yt:deviceProfile:import">
           <ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD">
-            <a-button @click="handleImport"> 导入设备配置 </a-button>
+            <a-button @click="handleImport"> 导入产品 </a-button>
           </ImpExcel>
         </Authority>
         <Authority value="api:yt:deviceProfile:delete">
@@ -42,14 +42,6 @@
         <TableAction
           :actions="[
             {
-              label: '默认',
-              icon: 'ant-design:profile-outlined',
-              onClick: handleSetDefault.bind(null, record),
-              ifShow: () => {
-                return record.default === false;
-              },
-            },
-            {
               label: '详情',
               auth: 'api:yt:deviceProfile:get',
               icon: 'ant-design:eye-outlined',
@@ -64,6 +56,16 @@
                 return record.name !== 'default' ? true : false;
               },
             },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '默认',
+              icon: 'ant-design:profile-outlined',
+              onClick: handleSetDefault.bind(null, record),
+              ifShow: () => {
+                return record.default === false;
+              },
+            },
             {
               label: '导出',
               auth: 'api:yt:deviceProfile:export',
@@ -88,6 +90,7 @@
       </template>
     </BasicTable>
     <DeviceProfileModal @register="registerModal" @success="handleSuccess" />
+    <DeviceProfileDrawer @register="registerDrawer" />
     <ExpExcelModal
       ref="expExcelModalRef"
       @register="registerExportModal"
@@ -106,12 +109,14 @@
     setDeviceProfileIsDefaultApi,
   } from '/@/api/device/deviceConfigApi';
   import { useModal } from '/@/components/Modal';
+  import { useDrawer } from '/@/components/Drawer';
   import DeviceProfileModal from '/@/views/device/profiles/DeviceProfileModal.vue';
   import { ImpExcel, ExcelData } from '/@/components/Excel';
   import { jsonToSheetXlsx, ExpExcelModal, ExportModalResult } from '/@/components/Excel';
   import { Authority } from '/@/components/Authority';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { Popconfirm } from 'ant-design-vue';
+  import DeviceProfileDrawer from './DeviceProfileDrawer.vue';
 
   const exportData: any = ref([]);
   const expExcelModalRef: any = ref(null);
@@ -124,7 +129,7 @@
   const [registerModal, { openModal }] = useModal();
   const [registerExportModal, { openModal: openModalExcel }] = useModal();
   const [registerTable, { setProps, reload, setTableData, getForm }] = useTable({
-    title: '设备配置列表',
+    title: '产品列表',
     clickToRowSelect: false,
     api: deviceConfigGetQuery,
     immediate: immediateStatus.value,
@@ -139,7 +144,7 @@
     bordered: true,
     showIndexColumn: false,
     actionColumn: {
-      width: 240,
+      width: 200,
       title: '操作',
       dataIndex: 'action',
       slots: { customRender: 'action' },
@@ -251,13 +256,16 @@
       isView: false,
     });
   }
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
   //详情
   function handleDetailView(record: Recordable) {
-    openModal(true, {
-      record,
-      isUpdate: false,
-      isView: true,
-    });
+    openDrawer(true, { record });
+    // openModal(true, {
+    //   record,
+    //   isUpdate: false,
+    //   isView: true,
+    // });
   }
 
   function defaultHeader({ filename, bookType }: ExportModalResult) {
@@ -295,8 +303,8 @@
   const handleSetDefault = async (record: Recordable) => {
     let id = record.tbProfileId;
     const data = await setDeviceProfileIsDefaultApi(id, 'default', defaultObj);
-    if (!data) return createMessage.error('设置该设备配置为默认失败');
-    createMessage.success('设置该设备配置为默认成功');
+    if (!data) return createMessage.error('设置该产品为默认失败');
+    createMessage.success('设置该产品为默认成功');
     reload();
     disabled.value = true;
   };

@@ -151,7 +151,7 @@
     showIndexColumn: false,
     clickToRowSelect: false,
     useSearchForm: false,
-    rowKey: 'id',
+    // rowKey: 'id',
     showTableSetting: true,
     bordered: true,
     actionColumn: {

 <template>
-  <div style="background-color: #f0f2f5">
-    <BasicTable @register="registerTable">
+  <div style="background-color: #f0f2f5" class="dark:bg-dark-900">
+    <BasicTable @register="registerTable" class="dark:bg-dark-900">
       <template #toolbar>
         <Authority value="api:yt:smsLog:export">
           <a-button type="primary" @click="handleCreate"> 导出 </a-button>

 <template>
-  <div style="background-color: #f0f2f5">
-    <BasicTable @register="registerTable">
+  <div style="background-color: #f0f2f5" class="dark:bg-dark-900">
+    <BasicTable @register="registerTable" class="dark:bg-dark-900">
       <template #toolbar>
         <Authority value="api:yt:smsLog:export">
           <a-button type="primary" @click="handleExport"> 导出 </a-button>

@@ -103,15 +103,15 @@ export const formSchema: FormSchema[] = [
   },
   {
     field: PackageField.DEVICE_PROFILE_INFO,
-    label: '设备配置',
+    label: '所属产品',
     component: 'ApiSearchSelect',
     helpMessage: ['上传的包仅适用于具有所选配置文件的设备'],
     defaultValue: 'default',
-    rules: [{ required: true, message: '设备配置为必填项' }],
+    rules: [{ required: true, message: '所属产品为必填项' }],
     componentProps: ({ formActionType }) => {
       const { setFieldsValue } = formActionType;
       return {
-        placeholder: '请选择设备配置',
+        placeholder: '请选择所属产品',
         showSearch: true,
         resultField: 'data',
         labelField: 'name',
@@ -137,7 +137,7 @@ export const formSchema: FormSchema[] = [
     field: PackageField.PACKAGE_TYPE,
     label: '包类型',
     component: 'Select',
-    helpMessage: ['上传包后，您将无法修改标题、版本、设备配置文件和包类型'],
+    helpMessage: ['上传包后，您将无法修改标题、版本、产品文件和包类型'],
     defaultValue: PackageType.FIRMWARE,
     rules: [{ required: true, message: '包类型为必填项' }],
     componentProps: () => {
@@ -146,7 +146,7 @@ export const formSchema: FormSchema[] = [
           { label: '固件', value: PackageType.FIRMWARE },
           { label: '软件', value: PackageType.SOFTWARE },
         ],
-        placeholder: '请选择设备配置',
+        placeholder: '请选择所属产品',
       };
     },
   },

@@ -21,7 +21,7 @@ export const formSchema: FormSchema[] = [
   },
   {
     field: PackageField.DEVICE_PROFILE_INFO,
-    label: '设备配置',
+    label: '所属产品',
     component: 'Input',
   },
   {
@@ -35,7 +35,7 @@ export const formSchema: FormSchema[] = [
           { label: '固件', value: PackageType.FIRMWARE },
           { label: '软件', value: PackageType.SOFTWARE },
         ],
-        placeholder: '请选择设备配置',
+        placeholder: '请选择所属产品',
       };
     },
   },

@@ -32,6 +32,8 @@
               onClick: handleEdit.bind(null, record),
               ifShow: record.creator === userId && record.status !== 1,
             },
+          ]"
+          :drop-down-actions="[
             {
               label: '删除',
               auth: 'api:yt:sceneLinkage:delete',

@@ -60,7 +60,8 @@
         converScriptRef.value?.setFormData(data.record);
       }
       if (unref(isTitle) == 'test') {
-        converScriptRef.value?.setScriptContentData('');
+        // converScriptRef.value?.setScriptContentData('');
+        converScriptRef.value?.setFormData(data.record);
       }
       setModalProps({ title, showOkBtn: true, showCancelBtn: true, okText });
       if (!unref(isUpdate)) {

@@ -28,7 +28,7 @@ export const columns: BasicColumn[] = [
     slots: { customRender: 'convertJs' },
   },
   {
-    title: '描述',
+    title: '备注',
     dataIndex: 'description',
     width: 120,
   },

@@ -61,6 +61,8 @@
                 onClick: handleEdit.bind(null, record),
                 ifShow: record.level != 0,
               },
+            ]"
+            :drop-down-actions="[
               {
                 label: '删除',
                 auth: 'api:yt:user:delete',

@@ -15,7 +15,7 @@
 </script>
 
 <template>
-  <section class="widget">
+  <section class="widget !dark:bg-dark-900">
     <slot name="header"></slot>
 
     <div class="widget-content">

@@ -45,7 +45,14 @@
 
   .widget-select:deep(.ant-card-body) {
     /* height: 240px; */
-    width: 240px;
+
+    /* width: 236px;
+    height: 196px; */
+
+    /* width: 100%;
+    height: 100%; */
+    width: 236px;
+    height: 236px;
     padding: 0;
     box-sizing: border-box;
     display: flex;
@@ -64,10 +71,18 @@
   }
 
   .widget-select .widget-container {
-    width: 240px;
-    height: 200px;
+    width: 236px;
+    height: 196px;
     display: flex;
     justify-content: center;
     align-items: center;
   }
+
+  [data-theme='dark'] .widget-select:deep(.ant-card-body) {
+    @apply bg-dark-900;
+  }
+
+  [data-theme='dark'] .widget-select:deep(.ant-card) {
+    @apply border-dark-300;
+  }
 </style>

@@ -565,6 +565,10 @@
     background-color: #fff;
   }
 
+  [data-theme='dark'] .board-detail:deep(.ant-page-header-heading) {
+    @apply bg-dark-900;
+  }
+
   .board-detail:deep(.ant-page-header-heading-extra) {
     margin: 0;
     line-height: 78px;

@@ -189,13 +189,13 @@
 
 <template>
   <PageWrapper>
-    <div class="flex items-center mb-3 bg-light-100 h-78px">
+    <div class="flex items-center mb-3 bg-light-100 h-78px dark:text-gray-300 dark:bg-dark-900">
       <div class="text-lg ml-30px mr-9px font-bold">自定义看板</div>
       <Authority value="api:yt:data_board:add:post">
         <Button type="primary" @click="handleOpenDetailModal">创建看板</Button>
       </Authority>
     </div>
-    <div class="bg-light-100 mb-6 w-full p-3 search-form">
+    <div class="bg-light-100 mb-6 w-full p-3 search-form dark:text-gray-300 dark:bg-dark-900">
       <BasicForm class="flex-auto w-full" @register="searchFormRegister" />
     </div>
     <Spin :spinning="loading">
@@ -309,4 +309,9 @@
     padding: 10px;
     background-color: #fff;
   }
+
+  [data-theme='dark'] .data-board-list:deep(.ant-list-pagination) {
+    padding: 10px;
+    background-color: #000;
+  }
 </style>