Merge branch 'local_dev_ft' into 'main'

pref:优化Topic可以复制

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

 <script lang="ts" setup>
 <script lang="ts" setup>
   import { BasicTable, useTable } from '/@/components/Table';
   import { BasicTable, useTable } from '/@/components/Table';
   import { list, topicTableColumn } from './topic';
   import { list, topicTableColumn } from './topic';
+  import { unref } from 'vue';
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
 
+  const { createMessage } = useMessage();
   const [register] = useTable({
   const [register] = useTable({
     title: 'Topic',
     title: 'Topic',
     showIndexColumn: false,
     showIndexColumn: false,
@@ -10,10 +14,51 @@
     bordered: true,
     bordered: true,
     showTableSetting: true,
     showTableSetting: true,
   });
   });
+  const handeleCopy = (e) => {
+    const { isSuccessRef } = useCopyToClipboard(JSON.parse(JSON.stringify(unref(e), null, 2)));
+    unref(isSuccessRef);
+    createMessage.success('复制成功！');
+  };
 </script>
 </script>
 
 
 <template>
 <template>
   <section class="bg-gray-100 p-4 dark:bg-dark-900 w-full h-full">
   <section class="bg-gray-100 p-4 dark:bg-dark-900 w-full h-full">
-    <BasicTable @register="register" />
+    <BasicTable @register="register">
+      <template #function="{ record }">
+        <a-tooltip :title="record.function">
+          <a-button type="text" class="ml-2" @click="handeleCopy(record.function)">
+            <span>{{ record.function.slice(0, 13) }}</span>
+          </a-button>
+        </a-tooltip>
+      </template>
+      <template #release="{ record }">
+        <a-tooltip :title="record.release">
+          <a-button type="text" class="ml-2" @click="handeleCopy(record.release)">
+            <span>{{ record.release.slice(0, 30) }}</span>
+          </a-button>
+        </a-tooltip>
+      </template>
+      <template #subscribe="{ record }">
+        <a-tooltip :title="record.subscribe">
+          <a-button type="text" class="ml-2" @click="handeleCopy(record.subscribe)">
+            <span>{{ record.subscribe.slice(0, 30) }}</span>
+          </a-button>
+        </a-tooltip>
+      </template>
+      <template #platform="{ record }">
+        <a-tooltip :title="record.platform">
+          <a-button type="text" class="ml-2" @click="handeleCopy(record.platform)">
+            <span>{{ record.platform }}</span>
+          </a-button>
+        </a-tooltip>
+      </template>
+      <template #device="{ record }">
+        <a-tooltip :title="record.device">
+          <a-button type="text" class="ml-2" @click="handeleCopy(record.device)">
+            <span>{{ record.device }}</span>
+          </a-button>
+        </a-tooltip>
+      </template>
+    </BasicTable>
   </section>
   </section>
 </template>
 </template>

@@ -29,26 +29,31 @@ export const topicTableColumn: BasicColumn[] = [
     title: '功能',
     title: '功能',
     dataIndex: 'function',
     dataIndex: 'function',
     width: 100,
     width: 100,
+    slots: { customRender: 'function' },
   },
   },
   {
   {
     title: '发布主题',
     title: '发布主题',
     dataIndex: 'release',
     dataIndex: 'release',
     width: 120,
     width: 120,
+    slots: { customRender: 'release' },
   },
   },
   {
   {
     title: '订阅主题',
     title: '订阅主题',
     dataIndex: 'subscribe',
     dataIndex: 'subscribe',
     width: 120,
     width: 120,
+    slots: { customRender: 'subscribe' },
   },
   },
   {
   {
     title: '平台',
     title: '平台',
     dataIndex: 'platform',
     dataIndex: 'platform',
     width: 30,
     width: 30,
+    slots: { customRender: 'platform' },
   },
   },
   {
   {
     title: '设备',
     title: '设备',
     dataIndex: 'device',
     dataIndex: 'device',
     width: 30,
     width: 30,
+    slots: { customRender: 'device' },
   },
   },
 ];
 ];