✨ feat(test): 重构测试页面，添加数据增删改功能和模态框支持

src/views/test/index.vue

@@ -1,69 +1,264 @@
 <template>
-  <div>
-    <button @click="test1">Test Button 1</button>
-    <button @click="test2">Test Button 2</button>
-    <button @click="test3">Test Button 3</button>
-    <button @click="test4">Test Button 4</button>
-    <button @click="test5">Test Button 5</button>
+  <div class="container">
+    <div class="form-container">
+      <input v-model="newTitle" placeholder="输入标题" />
+      <input v-model="newDesc" placeholder="输入描述" />
+      <button @click="addData">添加数据</button>
+    </div>
+    <div class="json-container">
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>标题</th>
+            <th>描述</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in jsonData" :key="item.id">
+            <td>{{ item.id }}</td>
+            <td>{{ item.title }}</td>
+            <td>{{ item.desc }}</td>
+            <td>
+              <button class="edit-button" @click="openEditModal(item)">修改</button>
+              <button class="delete-button" @click="deleteData(item.id)">删除</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div v-if="showModal" class="modal">
+      <div class="modal-content">
+        <span class="close" @click="closeModal">&times;</span>
+        <h2>编辑数据</h2>
+        <input v-model="editTitle" placeholder="输入标题" />
+        <input v-model="editDesc" placeholder="输入描述" />
+        <button @click="updateData">保存</button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  const test1 = () => {
-    console.log('Test Button 1 clicked')
+  import { ref } from 'vue'
+  import { DB } from '@/config/db'
+
+  const jsonData = ref([])
+  const newTitle = ref('')
+  const newDesc = ref('')
+  const editId = ref(null)
+  const editTitle = ref('')
+  const editDesc = ref('')
+  const showModal = ref(false)
+
+  const fetchData = () => {
+    // 查询数据
+    DB.selectFrom('todos')
+      .select(['id', 'title', 'desc'])
+      .execute()
+      .then((data) => {
+        jsonData.value = data
+      })
+  }
+
+  const addData = () => {
+    // 添加数据
+    DB.insertInto('todos')
+      .values({ title: newTitle.value, desc: newDesc.value })
+      .execute()
+      .then(() => {
+        fetchData()
+        newTitle.value = ''
+        newDesc.value = ''
+      })
   }
-  const test2 = () => {
-    console.log('Test Button 2 clicked')
+
+  const openEditModal = (item: any) => {
+    editId.value = item.id
+    editTitle.value = item.title
+    editDesc.value = item.desc
+    showModal.value = true
   }
-  const test3 = () => {
-    console.log('Test Button 3 clicked')
+
+  const closeModal = () => {
+    showModal.value = false
+    editId.value = null
+    editTitle.value = ''
+    editDesc.value = ''
   }
-  const test4 = () => {
-    console.log('Test Button 4 clicked')
+
+  const updateData = () => {
+    // 更新数据
+    DB.updateTable('todos')
+      .set({ title: editTitle.value, desc: editDesc.value })
+      .where('id', '=', editId.value)
+      .execute()
+      .then(() => {
+        fetchData()
+        closeModal()
+      })
   }
-  const test5 = () => {
-    console.log('Test Button 5 clicked')
+
+  const deleteData = (id: number) => {
+    // 删除数据
+    DB.deleteFrom('todos')
+      .where('id', '=', id)
+      .execute()
+      .then(() => {
+        fetchData()
+      })
   }
+
+  fetchData()
 </script>
 
 <style scoped lang="scss">
-  div {
+  .container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 100vh;
     background-color: #f0f0f0;
-  }
+    padding: 20px;
+
+    .form-container {
+      margin-top: 20px;
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      justify-content: center;
+
+      input {
+        padding: 10px;
+        font-size: 16px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        width: 200px;
+      }
 
-  button {
-    margin: 10px;
-    padding: 15px 30px;
-    font-size: 18px;
-    color: #fff;
-    background-color: #007bff;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    &:hover {
-      background-color: #0056b3;
+      button {
+        padding: 10px 20px;
+        font-size: 16px;
+        color: #fff;
+        background-color: #28a745;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+
+        &:hover {
+          background-color: #218838;
+        }
+      }
     }
-  }
 
-  .button {
-    margin: 10px;
-    padding: 15px 30px;
-    font-size: 18px;
-    color: #fff;
-    background-color: #007bff;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-
-    &:hover {
-      background-color: #0056b3;
+    .json-container {
+      margin-top: 20px;
+      padding: 20px;
+      background-color: #fff;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      width: 100%;
+      max-width: 800px;
+      overflow-x: auto;
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+
+        th,
+        td {
+          padding: 10px;
+          border: 1px solid #ccc;
+          text-align: left;
+        }
+
+        th {
+          background-color: #f8f8f8;
+        }
+
+        button {
+          padding: 5px 10px;
+          font-size: 14px;
+          color: #fff;
+          border: none;
+          border-radius: 5px;
+          cursor: pointer;
+          transition: background-color 0.3s ease;
+          margin-right: 10px;
+
+          &.edit-button {
+            background-color: #007bff;
+
+            &:hover {
+              background-color: #0056b3;
+            }
+          }
+
+          &.delete-button {
+            background-color: #dc3545;
+
+            &:hover {
+              background-color: #c82333;
+            }
+          }
+        }
+      }
+    }
+
+    .modal {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    .modal-content {
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 5px;
+      width: 400px;
+      max-width: 90%;
+      text-align: center;
+
+      .close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        font-size: 24px;
+        cursor: pointer;
+      }
+
+      input {
+        margin-bottom: 10px;
+        padding: 10px;
+        font-size: 16px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        width: 100%;
+      }
+
+      button {
+        padding: 10px 20px;
+        font-size: 16px;
+        color: #fff;
+        background-color: #007bff;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+
+        &:hover {
+          background-color: #0056b3;
+        }
+      }
     }
   }
 </style>