feat：项目管理静态ui完成80%

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;
+}

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;
+}

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) }}

src/config/settings.json

@@ -6,7 +6,7 @@
   "topMenu": false,
   "hideMenu": false,
   "menuCollapse": false,
-  "footer": true,
+  "footer": false,
   "themeColor": "#165DFF",
   "menuWidth": 220,
   "globalSettings": false,

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 };

src/locale/zh-CN.ts

@@ -40,6 +40,10 @@ export default {
   'menu.property': '物业',
   'menu.setting': '设置',
 
+  'search.placeholder':'请输入内容',
+  'table.filter':'筛选',
+  'table.export':'导出',
+
   ...localeSettings,
   ...localeMessageBox,
   ...localeLogin,

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': '新建项目',
 };

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>