feat:当前接入设备界面

src/views/endpoint/access/index.vue

@@ -1,7 +1,126 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { TableColumnsType } from 'ant-design-vue'
+import { WifiOutlined } from '@ant-design/icons-vue'
+import {useI18n} from "vue-i18n";
+
+const  {t}  = useI18n();
+
+interface DeviceInfo {
+  key: string
+  deviceName: string
+  macAddress: string
+  speed: string
+}
+
+const columns: TableColumnsType = [
+  {
+    title: t('page.access.devicename'),
+    dataIndex: 'deviceName',
+    key: 'deviceName',
+    width: '30%'
+  },
+  {
+    title: t('page.access.mac'),
+    dataIndex: 'macAddress',
+    key: 'macAddress',
+    width: '40%'
+  },
+  {
+    title: t('page.access.speed'),
+    dataIndex: 'speed',
+    key: 'speed',
+    width: '30%',
+    align: 'right'
+  }
+]
+
+// 模拟数据，实际使用时应该从API获取
+const deviceList = ref<DeviceInfo[]>([
+  {
+    key: '1',
+    deviceName: 'iPhone 13',
+    macAddress: '00:11:22:33:44:55',
+    speed: '2.5 Mbps'
+  },
+  {
+    key: '2',
+    deviceName: 'MacBook Pro',
+    macAddress: '66:77:88:99:AA:BB',
+    speed: '8.1 Mbps'
+  }
+])
+</script>
 
 <template>
-  <div>当前接入AP的设备信息</div>
+  <div class="device-list-container">
+    <a-card :bordered="false">
+      <template #title>
+        <div class="card-title">
+          <WifiOutlined />
+          <span>{{ t('page.access.currentdevice') }}</span>
+        </div>
+      </template>
+
+      <template #extra>
+        <a-button type="primary">
+          <template #icon>
+            <span class="i-carbon:refresh"></span>
+          </template>
+          {{ t('page.access.refresh') }}
+        </a-button>
+      </template>
+
+      <a-table
+        :columns="columns"
+        :data-source="deviceList"
+        :pagination="{
+          total: deviceList.length,
+          pageSize: 10,
+          showSizeChanger: false,
+          showTotal: (total) => `共 ${total} 条`
+        }"
+      >
+      </a-table>
+    </a-card>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.device-list-container {
+  padding: 8px;
+  background-color: #f5f5f7;
+  min-height: 100vh;
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+:deep(.ant-card-head) {
+  border-bottom: 1px solid #f0f0f0;
+  padding: 0 12px;
+}
+
+:deep(.ant-card-body) {
+  padding: 12px;
+}
+
+:deep(.ant-table-wrapper) {
+  width: 100%;
+}
+
+:deep(.ant-table) {
+  width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .device-list-container {
+    padding: 16px;
+  }
+}
+</style>