feat 项目列表

src/pages/project/index.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+definePage({
+  layout: false,
+  style: {
+    navigationStyle: 'custom',
+  },
+})
+
+const search = ref('')
+const activeTab = ref(0)
+const tabs = ['全部', '进行中', '已结束']
+
+const projects = [
+  {
+    projectName: '徐工XS65H #01',
+    status: '进行中',
+    tags: ['定位异常', '警告'],
+    time: '14:10:04·已持续5分30秒',
+    trigger: '触发阈值：RTK信号弱，精度下降',
+  },
+  {
+    projectName: '徐工XS65H #01',
+    status: '进行中',
+    tags: ['定位异常', '警告'],
+    time: '14:10:04·已持续5分30秒',
+    trigger: '触发阈值：RTK信号弱，精度下降',
+  },
+]
+
+function handleCreate() {
+  console.log('点击了新建项目')
+}
+</script>
+
+<template>
+  <view class="page">
+    <back-nav title="全部项目">
+      <wd-button size="small" round @tap="handleCreate">
+        新建项目
+      </wd-button>
+    </back-nav>
+
+    <view class="content">
+      <!-- 搜索和筛选 -->
+      <view class="search-filter">
+        <uni-easyinput v-model="search" placeholder="搜索项目名称/路线桩号" />
+        <view class="tabs">
+          <view
+            v-for="(tab, index) in tabs"
+            :key="index"
+            class="tab-item"
+            :class="{ active: activeTab === index }"
+            @tap="activeTab = index"
+          >
+            <text class="tab-text">
+              {{ tab }}
+            </text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 项目列表 -->
+      <view class="project-list">
+        <project-item
+          v-for="(item, index) in projects"
+          :key="index"
+          :project-name="item.projectName"
+          :status="item.status"
+          :tags="item.tags"
+          :time="item.time"
+          :trigger="item.trigger"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+  background-color: #EAEFF9;
+}
+
+.content {
+  padding: 16px;
+  padding-top: 72px;
+}
+
+.search-filter {
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 12px;
+}
+
+.tabs {
+  display: flex;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.tab-item {
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  padding: 8px 16px;
+}
+
+.tab-item.active {
+  background-color: #ff4d4f;
+}
+
+.tab-text {
+  font-size: 18px;
+  color: #333;
+}
+
+.tab-item.active .tab-text {
+  color: #fff;
+}
+
+.project-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+</style>