From d1c2d332ab15610b0d0989d1ae8a9ed187e63bb7 Mon Sep 17 00:00:00 2001
From: Zzz1zz <zzz1z.itqd@gmail.com>
Date: Tue, 24 Jun 2025 01:24:43 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E9=A1=B9=E7=9B=AE=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=9D=99=E6=80=81ui=E5=AE=8C=E6=88=9080%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/business.ts                  | 14 ++++
 src/assets/style/global.less         | 10 +++
 src/components/breadcrumb/index.vue  |  2 +-
 src/config/settings.json             |  2 +-
 src/layout/default-layout.vue        |  2 +-
 src/locale/zh-CN.ts                  |  4 ++
 src/views/business/locale/zh-CN.ts   |  1 +
 src/views/business/project/index.vue | 96 +++++++++++++++++++++++++++-
 8 files changed, 127 insertions(+), 4 deletions(-)
 create mode 100644 src/api/business.ts

diff --git a/src/api/business.ts b/src/api/business.ts
new file mode 100644
index 0000000..8118da2
--- /dev/null
+++ b/src/api/business.ts
@@ -0,0 +1,14 @@
+import axios from 'axios';
+import type { RouteRecordNormalized } from 'vue-router';
+import { UserState } from '@/store/modules/user/types';
+
+export interface ProjectRecord {
+  id: string;
+  name: string;
+  type: string;
+}
+
+export interface ProjectParams extends Partial<ProjectRecord> {
+  current: number;
+  pageSize: number;
+}
\ No newline at end of file
diff --git a/src/assets/style/global.less b/src/assets/style/global.less
index f90b206..de914e9 100644
--- a/src/assets/style/global.less
+++ b/src/assets/style/global.less
@@ -92,3 +92,13 @@ body {
     }
   }
 }
+.flex_center_between{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.card-title_between{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
diff --git a/src/components/breadcrumb/index.vue b/src/components/breadcrumb/index.vue
index e4c9f13..9c6a5cc 100644
--- a/src/components/breadcrumb/index.vue
+++ b/src/components/breadcrumb/index.vue
@@ -1,7 +1,7 @@
 <template>
   <a-breadcrumb class="container-breadcrumb">
     <a-breadcrumb-item>
-      <icon-apps />
+      <icon-home />
     </a-breadcrumb-item>
     <a-breadcrumb-item v-for="item in items" :key="item">
       {{ $t(item) }}
diff --git a/src/config/settings.json b/src/config/settings.json
index ef20b23..09612db 100644
--- a/src/config/settings.json
+++ b/src/config/settings.json
@@ -6,7 +6,7 @@
   "topMenu": false,
   "hideMenu": false,
   "menuCollapse": false,
-  "footer": true,
+  "footer": false,
   "themeColor": "#165DFF",
   "menuWidth": 220,
   "globalSettings": false,
diff --git a/src/layout/default-layout.vue b/src/layout/default-layout.vue
index 35d6a1e..87bff1c 100644
--- a/src/layout/default-layout.vue
+++ b/src/layout/default-layout.vue
@@ -107,7 +107,7 @@
   const paddingStyle = computed(() => {
     const paddingLeft =
       renderMenu.value && !hideMenu.value
-        ? { paddingLeft: `${menuWidth.value}px` }
+        ? { paddingLeft: `${(menuWidth.value + 10)}px` }
         : {};
     const paddingTop = navbar.value ? { paddingTop: navbarHeight } : {};
     return { ...paddingLeft, ...paddingTop };
diff --git a/src/locale/zh-CN.ts b/src/locale/zh-CN.ts
index 006b778..f678420 100644
--- a/src/locale/zh-CN.ts
+++ b/src/locale/zh-CN.ts
@@ -40,6 +40,10 @@ export default {
   'menu.property': '物业',
   'menu.setting': '设置',
 
+  'search.placeholder':'请输入内容',
+  'table.filter':'筛选',
+  'table.export':'导出',
+
   ...localeSettings,
   ...localeMessageBox,
   ...localeLogin,
diff --git a/src/views/business/locale/zh-CN.ts b/src/views/business/locale/zh-CN.ts
index 4576850..6be826e 100644
--- a/src/views/business/locale/zh-CN.ts
+++ b/src/views/business/locale/zh-CN.ts
@@ -10,4 +10,5 @@ export default {
   'menu.business.tenant': '租客管理',
   'menu.business.tenant-list': '租客列表',
   'menu.business.tenant.contacts': '租客联系人',
+  'add-project': '新建项目',
 };
diff --git a/src/views/business/project/index.vue b/src/views/business/project/index.vue
index 53c440f..1c1499d 100644
--- a/src/views/business/project/index.vue
+++ b/src/views/business/project/index.vue
@@ -1,3 +1,97 @@
 <template>
-    <div>project</div>
+    <div class="business_project_wrap">
+        <Breadcrumb :items="['menu.business', 'menu.business.project']" />
+        <a-card class="general-card">
+            <template #title>
+                <div class="card-title_between">
+                    <p class="title">{{ $t('menu.business.project') }}</p>
+                    <div class="flex_center_between">
+                        <a-space>
+                            <a-input-search :style="{ width: '320px' }" :placeholder="$t('search.placeholder')" />
+                            <a-button>
+                                <template #icon>
+                                    <icon-filter />
+                                </template>
+                                {{ $t('table.filter') }}
+                            </a-button>
+                            <a-button>
+                                <template #icon>
+                                    <icon-download />
+                                </template>
+                                {{ $t('table.export') }}
+                            </a-button>
+                            <a-button type="primary">
+                                <template #icon>
+                                    <icon-plus />
+                                </template>
+                                {{ $t('add-project') }}
+                            </a-button>
+                        </a-space>
+                    </div>
+                </div>
+            </template>
+            <a-table row-key="id" :loading="loading" :pagination="pagination" :columns="projectColumn"
+                :data="renderData" :bordered="false" @page-change="onPageChange">
+                <template #type="{ record }">
+                    <a-tag checkable :color="getTypeColor(record.type)">{{ getTypeText(record.type) }}</a-tag>
+                </template>
+                <template #rate="{ record }">
+                    <a-progress :percent="record.rate" color="green" :style="{ width: '100px' }" />
+                </template>
+                <template #operate>
+                    <a-space>
+                        <a-button>查看</a-button>
+                        <a-button type="primary">编辑</a-button>
+                        <a-button>更多</a-button>
+                    </a-space>
+                </template>
+            </a-table>
+        </a-card>
+    </div>
 </template>
+<script lang="ts" setup>
+import { computed, ref, reactive, watch, nextTick } from 'vue';
+import useLoading from '@/hooks/loading';
+import { Pagination } from '@/types/global';
+
+const { loading, setLoading } = useLoading(false);
+const renderData = ref<any[]>([
+    { name: '星河商务中心', type: '1', size: '1200m²', kezu: '1000m²', rate: 0.2, count: '90', create_time: '2025-06-24 00:51' },
+    { name: '南山科学科学院', type: '2', size: '120m²', kezu: '100m²', rate: 0.6, count: '10', create_time: '2025-06-24 00:58' },
+    { name: '前海科学科学院', type: '3', size: '1520m²', kezu: '1500m²', rate: 0.91, count: '120', create_time: '2025-06-24 01:16' },
+]);
+const basePagination: Pagination = {
+    current: 1,
+    pageSize: 20,
+    total:3,
+};
+const projectColumn = [
+    { title: '项目信息', dataIndex: 'name' },
+    { title: '项目类型', dataIndex: 'type', slotName: 'type' },
+    { title: '管理面积', dataIndex: 'size' },
+    { title: '可租面积', dataIndex: 'kezu' },
+    { title: '出租率', dataIndex: 'rate', slotName: 'rate' },
+    { title: '房源数量', dataIndex: 'count' },
+    { title: '创建时间', dataIndex: 'create_time' },
+    { title: '操作', dataIndex: 'operate', slotName: 'operate' },
+];
+const pagination = reactive({
+    ...basePagination,
+});
+
+const getTypeColor = (type: number | string) => {
+    const projectMap: any = {
+        1: 'orangered', 2: 'green', 3: 'gold'
+    }
+    return projectMap[type]
+}
+const getTypeText = (type: number | string) => {
+    const projectMap: any = {
+        1: '商业综合体', 2: '写字楼', 3: '园区'
+    }
+    return projectMap[type]
+}
+const onPageChange = (current: number) => {
+    console.log(current, 'current');
+};
+</script>
\ No newline at end of file