补充应用管理页面

devcloud/web/src/api/index.js

@@ -0,0 +1,9 @@
+import MCENTER_API from './mcenter'
+import MPAAS_API from './mppas'
+
+var API = {
+  mcenter: MCENTER_API,
+  mpaas: MPAAS_API,
+}
+
+export default API

devcloud/web/src/api/mcenter.js

@@ -1,9 +1,9 @@
 import client from './client'
 
-var API = {
+var MCENTER_API = {
   Login: (data) => {
     return client.post('/api/devcloud/v1/token', data)
   },
 }
 
-export default API
+export default MCENTER_API

devcloud/web/src/api/mppas.js

@@ -0,0 +1,9 @@
+import client from './client'
+
+var MPAAS_API = {
+  AppList: (params) => {
+    return client.get('/api/devcloud/v1/applications', { params })
+  },
+}
+
+export default MPAAS_API

devcloud/web/src/pages/LoginPage.vue

@@ -74,7 +74,7 @@
 
 <script setup>
 import { ref } from 'vue';
-import mcenter from '@/api/mcenter'
+import API from '@/api'
 import token from '@/storage/token'
 import { useRouter } from 'vue-router';
 
@@ -91,7 +91,7 @@ const router = useRouter();
 
 const handleSubmit = async (data) => {
   if (data.errors == null) {
-    const resp = await mcenter.Login(data.values);
+    const resp = await API.mcenter.Login(data.values);
     token.value = resp;
     router.push({ name: 'DashBoard' });
   }

devcloud/web/src/pages/develop/AppPage.vue

@@ -1,113 +1,75 @@
 <template>
-  <a-form layout="inline" :model="form">
+  <a-form layout="inline" :model="query">
-    <a-form-item label="Border" field="border">
+    <div>
-      <a-switch v-model="form.border" />
+    </div>
-    </a-form-item>
+    <div>
-    <a-form-item label="Hover" field="hover">
+      <a-form-item label="Hover" field="hover">
-      <a-switch v-model="form.hover" />
+        <a-switch v-model="query.hover" />
-    </a-form-item>
+      </a-form-item>
-    <a-form-item label="stripe" field="stripe">
+    </div>
-      <a-switch v-model="form.stripe" />
-    </a-form-item>
-    <a-form-item label="checkbox" field="checkbox">
-      <a-switch v-model="form.checkbox" />
-    </a-form-item>
-    <a-form-item label="checkAll" field="checkAll">
-      <a-switch v-model="rowSelection.showCheckedAll" />
-    </a-form-item>
-    <a-form-item label="loading" field="loading">
-      <a-switch v-model="form.loading" />
-    </a-form-item>
-    <a-form-item label="tableHeader" field="tableHeader">
-      <a-switch v-model="form.tableHeader" />
-    </a-form-item>
-    <a-form-item label="noData" field="noData">
-      <a-switch v-model="form.noData" />
-    </a-form-item>
   </a-form>
-  <a-table :columns="columns" :data="form.noData ? [] : data" :bordered="form.border" :hoverable="form.hover"
+  <a-table :data="data.items" :loading="fetchAppLoading">
-    :stripe="form.stripe" :loading="form.loading" :show-header="form.tableHeader"
+    <template #columns>
-    :row-selection="form.checkbox ? rowSelection : undefined" />
+      <a-table-column title="名称" data-index="name"></a-table-column>
+      <a-table-column title="描述" data-index="description"></a-table-column>
+      <a-table-column title="团队" data-index="label.team"></a-table-column>
+      <a-table-column title="创建时间" data-index="create_at"></a-table-column>
+      <a-table-column title="类型" data-index="type"></a-table-column>
+      <a-table-column title="仓库地址" data-index="code_repository.ssh_url"></a-table-column>
+      <a-table-column title="是否就绪" data-index="ready">
+        <template #cell="{ record }">
+          <a-switch type="round" disabled v-model="record.ready">
+            <template #checked>
+              就绪
+            </template>
+            <template #unchecked>
+              未就绪
+            </template>
+          </a-switch>
+        </template>
+      </a-table-column>
+      <a-table-column title="操作">
+        <template #cell="{ record }">
+          <a-space>
+            <a-button @click="editApp(record)">编辑</a-button>
+            <a-button @click="deleteApp(record)" type="primary">删除</a-button>
+          </a-space>
+        </template>
+      </a-table-column>
+    </template>
+  </a-table>
 </template>
 
-<script>
+<script setup>
-import { reactive } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
+import API from '@/api'
 
-export default {
+const query = reactive({
-  setup() {
+  page_size: 20,
-    const form = reactive({
+  page_number: 1,
-      border: true,
-      borderCell: false,
-      hover: true,
-      stripe: false,
-      checkbox: true,
-      loading: false,
-      tableHeader: true,
-      noData: false
-    });
 
-    const rowSelection = reactive({
+});
-      type: 'checkbox',
-      showCheckedAll: true
-    });
 
-    const columns = [
+// 通过API获取应用列表
-      {
+const data = ref({
-        title: 'Name',
+  items: [],
-        dataIndex: 'name',
+  total: 0,
-      },
+});
-      {
+const fetchAppLoading = ref(false);
-        title: 'Salary',
+const fetchAppList = async () => {
-        dataIndex: 'salary',
+  try {
-      },
+    fetchAppLoading.value = true;
-      {
+    const resp = await API.mpaas.AppList(query);
-        title: 'Address',
+    data.value = resp;
-        dataIndex: 'address',
+    console.log('Fetched app list:', data.value);
-      },
+  } catch (error) {
-      {
+    console.error('Error fetching app list:', error);
-        title: 'Email',
+  } finally {
-        dataIndex: 'email',
+    fetchAppLoading.value = false;
-      },
+  }
-    ];
+};
 
-    const data = [{
+onMounted(() => {
-      key: '1',
+  fetchAppList();
-      name: 'Jane Doe',
+});
-      salary: 23000,
-      address: '32 Park Road, London',
-      email: 'jane.doe@example.com'
-    }, {
-      key: '2',
-      name: 'Alisa Ross',
-      salary: 25000,
-      address: '35 Park Road, London',
-      email: 'alisa.ross@example.com'
-    }, {
-      key: '3',
-      name: 'Kevin Sandra',
-      salary: 22000,
-      address: '31 Park Road, London',
-      email: 'kevin.sandra@example.com'
-    }, {
-      key: '4',
-      name: 'Ed Hellen',
-      salary: 17000,
-      address: '42 Park Road, London',
-      email: 'ed.hellen@example.com'
-    }, {
-      key: '5',
-      name: 'William Smith',
-      salary: 27000,
-      address: '62 Park Road, London',
-      email: 'william.smith@example.com'
-    }];
-
-    return {
-      form,
-      rowSelection,
-      columns,
-      data
-    }
-  },
-}
 </script>

devcloud/web/src/pages/project/components/ProjectCard.vue

@@ -1,10 +1,10 @@
 <template>
-  <a-card class="project-card" :style="{ borderTop: `4px solid ${statusColor}` }" hoverable>
+  <a-card class="project-card" hoverable>
     <a-card-meta :title="project.name">
       <template #description>
         <div class="project-meta">
           <div class="project-desc">{{ project.description }}</div>
-
+          <div class="project-desc">状态: {{ project.status }}</div>
           <div class="project-footer">
             <a-space>
               <a-avatar-group :max-count="3">
@@ -47,14 +47,14 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { } from 'vue';
 import {
   IconEdit,
   IconDelete,
   IconMore
 } from '@arco-design/web-vue/es/icon';
 
-const props = defineProps({
+defineProps({
   project: {
     type: Object,
     required: true,
@@ -71,14 +71,14 @@ const props = defineProps({
 
 defineEmits(['edit', 'delete', 'archive']);
 
-const statusColor = computed(() => {
+// const statusColor = computed(() => {
-  const map = {
+//   const map = {
-    active: '#00B42A',
+//     active: '#00B42A',
-    archived: '#86909C',
+//     archived: '#86909C',
-    planning: '#FF7D00'
+//     planning: '#FF7D00'
-  };
+//   };
-  return map[props.project.status] || '#86909C';
+//   return map[props.project.status] || '#86909C';
-});
+// });
 
 const formatDate = (timestamp) => {
   return new Date(timestamp).toLocaleDateString('zh-CN');
@@ -90,7 +90,7 @@ const formatDate = (timestamp) => {
   margin-bottom: 16px;
   border-radius: 4px;
   transition: all 0.2s;
-  height: 100%;
+  height: 220px;
 }
 
 .project-card:hover {