初始化项目

attractor-ui/pages/work/search.vue

@@ -0,0 +1,207 @@
+<template>
+  <view class="search-page">
+    <view class="search-top">
+      <view class="search-bar">
+        <uni-icons type="search" size="16" color="#6B7280"></uni-icons>
+        <input
+          class="search-input"
+          v-model="keyword"
+          placeholder="搜索公告标题、正文、标签"
+          confirm-type="search"
+          @confirm="onSearch"
+        />
+        <button v-if="keyword" class="clear-btn" @click="clearKeyword">×</button>
+      </view>
+      <text class="cancel" @click="goBack">取消</text>
+    </view>
+
+    <scroll-view class="result-list" scroll-y>
+      <view v-if="filteredList.length === 0" class="empty-block">
+        <text class="empty-title">未找到相关公告</text>
+        <text class="empty-sub">试试更短关键词或更换标签词</text>
+      </view>
+
+      <view v-for="item in filteredList" :key="item.id" class="result-card">
+        <view class="result-head">
+          <text class="result-type">{{ item.type }}</text>
+          <text class="result-time">{{ item.publishTime }}</text>
+        </view>
+        <text class="result-title">{{ item.title }}</text>
+        <text class="result-content">{{ item.content }}</text>
+        <view class="result-keyword-row" v-if="item.keywords && item.keywords.length">
+          <text v-for="k in item.keywords" :key="k" class="result-keyword">#{{ k }}</text>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      keyword: '',
+      announcementList: []
+    }
+  },
+  computed: {
+    filteredList() {
+      const k = this.keyword.trim().toLowerCase()
+      if (!k) return this.announcementList
+      return this.announcementList.filter(item => {
+        const keywordHit = Array.isArray(item.keywords)
+          ? item.keywords.some(tag => (tag || '').toLowerCase().includes(k))
+          : false
+        return (
+          (item.type || '').toLowerCase().includes(k) ||
+          (item.title || '').toLowerCase().includes(k) ||
+          (item.content || '').toLowerCase().includes(k) ||
+          keywordHit
+        )
+      })
+    }
+  },
+  onLoad() {
+    const list = uni.getStorageSync('ANNOUNCEMENT_LIST')
+    this.announcementList = Array.isArray(list) ? list : []
+  },
+  methods: {
+    onSearch() {},
+    clearKeyword() {
+      this.keyword = ''
+    },
+    goBack() {
+      uni.navigateBack()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.search-page {
+  min-height: 100vh;
+  background: #f4f6f9;
+  padding: 18rpx;
+  box-sizing: border-box;
+}
+
+.search-top {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  margin-bottom: 16rpx;
+}
+
+.search-bar {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+  background: #ffffff;
+  border: 1rpx solid #e5e7eb;
+  border-radius: 14rpx;
+  padding: 0 14rpx;
+  height: 68rpx;
+}
+
+.search-input {
+  flex: 1;
+  font-size: 25rpx;
+  color: #111827;
+}
+
+.clear-btn {
+  background: transparent;
+  border: none;
+  color: #94a3b8;
+  font-size: 38rpx;
+  line-height: 1;
+  padding: 0;
+}
+
+.cancel {
+  color: #0f766e;
+  font-size: 25rpx;
+}
+
+.result-list {
+  height: calc(100vh - 110rpx);
+}
+
+.result-card {
+  background: #ffffff;
+  border: 1rpx solid #edf2f7;
+  border-radius: 16rpx;
+  padding: 18rpx;
+  margin-bottom: 12rpx;
+}
+
+.result-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8rpx;
+}
+
+.result-type {
+  font-size: 20rpx;
+  color: #0f766e;
+  background: #f0fdfa;
+  border-radius: 8rpx;
+  padding: 4rpx 8rpx;
+}
+
+.result-time {
+  font-size: 20rpx;
+  color: #9ca3af;
+}
+
+.result-title {
+  display: block;
+  font-size: 27rpx;
+  color: #0f172a;
+  font-weight: 700;
+  line-height: 1.4;
+  margin-bottom: 8rpx;
+}
+
+.result-content {
+  display: block;
+  font-size: 24rpx;
+  color: #334155;
+  line-height: 1.6;
+}
+
+.result-keyword-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8rpx;
+  margin-top: 10rpx;
+}
+
+.result-keyword {
+  font-size: 20rpx;
+  color: #0f766e;
+  background: #f0fdfa;
+  border-radius: 8rpx;
+  padding: 3rpx 8rpx;
+}
+
+.empty-block {
+  text-align: center;
+  padding: 90rpx 0;
+}
+
+.empty-title {
+  display: block;
+  font-size: 28rpx;
+  color: #64748b;
+  margin-bottom: 10rpx;
+}
+
+.empty-sub {
+  display: block;
+  font-size: 22rpx;
+  color: #94a3b8;
+}
+</style>