完成部分页面UI

src/views/admin/ProjectsCRUD.vue

@@ -0,0 +1,116 @@
+<script setup>
+import { ref } from 'vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { Table, Modal } from 'ant-design-vue'
+
+const dataSource = ref([
+  {
+    id: 1,
+    title: '电商平台',
+    category: 'Web应用',
+    tags: ['Vue3', 'Node.js'],
+    author: 'Admin',
+    createdAt: '2024-03-20'
+  }
+])
+
+const columns = [
+  {
+    title: '项目名称',
+    dataIndex: 'title',
+    key: 'title',
+    width: 200,
+  },
+  {
+    title: '分类',
+    dataIndex: 'category',
+    key: 'category',
+    width: 120,
+  },
+  {
+    title: '标签',
+    key: 'tags',
+    customRender: ({ text }) => text.join(', ')
+  },
+  {
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    width: 120,
+    slots: { customRender: 'action' }
+  }
+]
+
+const visible = ref(false)
+const currentItem = ref(null)
+
+const showModal = (item = null) => {
+  currentItem.value = item || { tags: [] }
+  visible.value = true
+}
+
+const handleDelete = (id) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '确定要删除这个项目吗？',
+    onOk: () => {
+      dataSource.value = dataSource.value.filter(item => item.id !== id)
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="bg-white p-6 rounded-lg">
+    <div class="mb-4 flex justify-between items-center">
+      <h2 class="text-xl font-semibold">项目管理</h2>
+      <a-button type="primary" @click="showModal">
+        <template #icon><PlusOutlined /></template>
+        新建项目
+      </a-button>
+    </div>
+
+    <a-table
+      :columns="columns"
+      :data-source="dataSource"
+      :scroll="{ x: 800 }"
+      bordered
+    >
+      <template #action="{ record }">
+        <a-space>
+          <a-tooltip title="编辑">
+            <a-button type="link" @click="showModal(record)">
+              <EditOutlined />
+            </a-button>
+          </a-tooltip>
+          <a-tooltip title="删除">
+            <a-button type="link" danger @click="handleDelete(record.id)">
+              <DeleteOutlined />
+            </a-button>
+          </a-tooltip>
+        </a-space>
+      </template>
+    </a-table>
+
+    <a-modal
+      v-model:visible="visible"
+      :title="currentItem.id ? '编辑项目' : '新建项目'"
+      width="800px"
+    >
+      <!-- 项目表单内容 -->
+      <template #footer>
+        <a-button @click="visible = false">取消</a-button>
+        <a-button type="primary">确认</a-button>
+      </template>
+    </a-modal>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-table-thead > tr > th) {
+  @apply bg-gray-50;
+}
+:deep(.ant-table-tbody > tr:hover td) {
+  @apply bg-gray-100;
+}
+</style>