初始化项目
This commit is contained in:
208
attractor-ui/pages/work/index.vue
Normal file
208
attractor-ui/pages/work/index.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<view class="notice-page">
|
||||
|
||||
|
||||
<scroll-view class="notice-list" scroll-y>
|
||||
<view v-for="item in announcementList" :key="item.id" class="notice-card">
|
||||
<view class="notice-head">
|
||||
<image class="avatar" :src="item.avatar" mode="aspectFill" />
|
||||
<view class="author-wrap">
|
||||
<text class="author">{{ item.author }}</text>
|
||||
<text class="publish-time">{{ item.publishTime }}</text>
|
||||
</view>
|
||||
<view class="type-tag">{{ item.type }}</view>
|
||||
</view>
|
||||
|
||||
<text class="notice-title">{{ item.title }}</text>
|
||||
<text class="notice-content">{{ item.content }}</text>
|
||||
|
||||
<view v-if="item.keywords && item.keywords.length" class="keyword-row">
|
||||
<text v-for="k in item.keywords" :key="k" class="keyword">#{{ k }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
announcementList: [
|
||||
{
|
||||
id: 1,
|
||||
author: '官方公告',
|
||||
avatar: '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png',
|
||||
type: '版本更新',
|
||||
title: 'V2.3.0 上线：设备连接流程与控制链路全面优化',
|
||||
content: '本次版本重点优化了蓝牙连接时序与重连稳定性，新增设备连接历史缓存、候选设备自动扫描与连接确认流程，同时对参数页布局进行重构。若你在旧版本中遇到“连接成功但不可控”的情况，建议升级后重新绑定一次设备。',
|
||||
publishTime: '2026-03-27 10:30',
|
||||
keywords: ['连接优化', '稳定性', 'UI重构']
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
author: '官方公告',
|
||||
avatar: '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png',
|
||||
type: '功能调整',
|
||||
title: '设备页交互升级：新增首页快捷启停与运行状态同步',
|
||||
content: '为了减少操作路径，首页“我的设备”现已支持快捷启动/停止。操作成功后将同步更新设备状态标签（运行中/已停止），并写入最近控制时间。若首次点击出现等待，请保持设备开机并靠近手机，系统会自动完成连接补偿后发送指令。',
|
||||
publishTime: '2026-03-27 11:15',
|
||||
keywords: ['快捷控制', '状态同步', '设备页']
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
author: '官方公告',
|
||||
avatar: '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png',
|
||||
type: '体验优化',
|
||||
title: '公告中心改版：支持顶部搜索与精准筛选',
|
||||
content: '公告中心已由“消息流”改造为“公告流”，顶部新增搜索入口，可按标题、正文关键词和标签快速检索历史公告。后续我们还会补充“置顶公告”“版本分类”和“发布时间筛选”能力，便于你快速定位需要的信息。',
|
||||
publishTime: '2026-03-27 12:05',
|
||||
keywords: ['公告中心', '搜索', '信息检索']
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
uni.setStorageSync('ANNOUNCEMENT_LIST', this.announcementList)
|
||||
},
|
||||
methods: {
|
||||
goSearch() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/work/search'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.notice-page {
|
||||
min-height: 100vh;
|
||||
background: #f4f6f9;
|
||||
padding: 18rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
background: #ffffff;
|
||||
border: 1rpx solid #edf2f7;
|
||||
border-radius: 18rpx;
|
||||
padding: 18rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.nav-title-wrap {
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.nav-sub {
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
margin-top: 4rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search-entry {
|
||||
height: 64rpx;
|
||||
border: 1rpx solid #e5e7eb;
|
||||
border-radius: 14rpx;
|
||||
background: #f8fafc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16rpx;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.search-entry-text {
|
||||
font-size: 24rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.notice-list {
|
||||
height: calc(100vh - 210rpx);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.notice-card {
|
||||
background: #ffffff;
|
||||
border-radius: 18rpx;
|
||||
border: 1rpx solid #edf2f7;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
.notice-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 58rpx;
|
||||
height: 58rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.author-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 25rpx;
|
||||
color: #111827;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.publish-time {
|
||||
font-size: 21rpx;
|
||||
color: #9ca3af;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
|
||||
.type-tag {
|
||||
padding: 4rpx 10rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #ecfeff;
|
||||
color: #0f766e;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.notice-title {
|
||||
font-size: 29rpx;
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
font-size: 25rpx;
|
||||
color: #334155;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.keyword-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.keyword {
|
||||
font-size: 20rpx;
|
||||
color: #0f766e;
|
||||
background: #f0fdfa;
|
||||
border-radius: 8rpx;
|
||||
padding: 4rpx 10rpx;
|
||||
}
|
||||
</style>
|
||||
207
attractor-ui/pages/work/search.vue
Normal file
207
attractor-ui/pages/work/search.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user