From 9105c533be036ca7e8f3b3e9f79b2ed756b53fd7 Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Wed, 11 Dec 2024 15:00:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/userInfo/device/index.vue | 172 ++++++++++++++++++++++++++++
 1 file changed, 172 insertions(+)
 create mode 100644 src/views/userInfo/device/index.vue

diff --git a/src/views/userInfo/device/index.vue b/src/views/userInfo/device/index.vue
new file mode 100644
index 0000000..6d224bd
--- /dev/null
+++ b/src/views/userInfo/device/index.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Modal, message } from 'ant-design-vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+interface Device {
+  id: string;
+  name: string;
+  macAddress: string;
+  lastActiveTime?: string;
+}
+
+const loading = ref(false);
+const devices = ref<Device[]>([]);
+
+// 获取设备列表
+const fetchDevices = async () => {
+  loading.value = true;
+  try {
+    //
+    // const response = await api.getDevices();
+    // devices.value = response.data;
+
+    // 模拟数据
+    devices.value = [
+      {
+        id: '1',
+        name: 'iPhone 13',
+        macAddress: '00:11:22:33:44:55',
+        lastActiveTime: '2024-03-20 15:30:00'
+      },
+      {
+        id: '2',
+        name: 'MacBook Pro',
+        macAddress: '66:77:88:99:AA:BB',
+        lastActiveTime: '2024-03-20 14:20:00'
+      }
+    ];
+  } catch (error) {
+    console.error('Failed to fetch devices:', error);
+    message.error(t('page.device.fetchFailed'));
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 删除设备
+const handleDelete = (device: Device) => {
+  Modal.confirm({
+    title: t('page.device.confirmDelete'),
+    icon: () => h(ExclamationCircleOutlined),
+    content: t('page.device.deleteWarning', { name: device.name }),
+    okText: t('common.confirm'),
+    cancelText: t('common.cancel'),
+    async onOk() {
+      try {
+        //
+        // await api.deleteDevice(device.id);
+        message.success(t('page.device.deleteSuccess'));
+        await fetchDevices(); // 重新获取列表
+      } catch (error) {
+        console.error('Failed to delete device:', error);
+        message.error(t('page.device.deleteFailed'));
+      }
+    }
+  });
+};
+
+const handleBack = () => {
+  router.push('/userInfo/usercard');
+};
+
+onMounted(() => {
+  fetchDevices();
+});
+</script>
+
+<template>
+  <div class="device-container">
+    <a-card :title="t('page.device.title')" :bordered="false">
+      <template #extra>
+        <a-button @click="handleBack">
+          {{ t('page.login.common.back') }}
+        </a-button>
+      </template>
+
+      <a-spin :spinning="loading">
+        <a-empty
+          v-if="devices.length === 0"
+          :description="t('page.device.noDevices')"
+        />
+
+        <a-list v-else :data-source="devices">
+          <template #renderItem="{ item }">
+            <a-list-item>
+              <a-list-item-meta>
+                <template #title>
+                  <span class="device-name">{{ item.name }}</span>
+                </template>
+                <template #description>
+                  <div class="device-info">
+                    <span>MAC: {{ item.macAddress }}</span>
+                    <span v-if="item.lastActiveTime">
+                      {{ t('page.device.lastActive') }}: {{ item.lastActiveTime }}
+                    </span>
+                  </div>
+                </template>
+              </a-list-item-meta>
+              <template #actions>
+                <a-button
+                  type="link"
+                  danger
+                  @click="handleDelete(item)"
+                >
+                  {{ t('common.delete') }}
+                </a-button>
+              </template>
+            </a-list-item>
+          </template>
+        </a-list>
+      </a-spin>
+    </a-card>
+  </div>
+</template>
+
+<style scoped>
+.device-container {
+  padding: 24px;
+  background-color: #f5f5f7;
+  min-height: 100vh;
+}
+
+:deep(.ant-card) {
+  max-width: 800px;
+  margin: 0 auto;
+  border-radius: 8px;
+}
+
+.device-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.device-name {
+  font-weight: 500;
+}
+
+/* 移动端适配 */
+@media (max-width: 576px) {
+  .device-container {
+    padding: 16px;
+  }
+
+  :deep(.ant-list-item-meta-title) {
+    margin-bottom: 8px;
+  }
+
+  :deep(.ant-list-item) {
+    padding: 12px;
+  }
+
+  .device-info {
+    font-size: 12px;
+  }
+}
+</style>