vue_zhongyou 1.0.1

package//344/273/243/347/240/201/views/officialPage.vue

@@ -0,0 +1,326 @@
+<template>
+    <div class="official_page">
+        <!-- 顶部Header -->
+        <div class="header">
+            <h1 class="title">公文管理</h1>
+            <div class="search_box">
+                <van-icon name="search" />
+                <input type="text" placeholder="搜索流程名称..." />
+            </div>
+        </div>
+
+        <!-- 第一个统计区域 -->
+        <div class="first_section">
+            <div class="all_total">
+                <div class="label">公文库总数</div>
+                <div class="number">1,284</div>
+            </div>
+            <div class="approval_status">
+                <div class="pending_approval">
+                    <div class="label">待审公文</div>
+                    <div class="content">
+                        <div class="number">248</div>
+                        <van-icon name="clock-o" class="icon" />
+                    </div>
+                </div>
+                <div class="approved">
+                    <div class="label">已审公文</div>
+                    <div class="content">
+                        <div class="number">1,036</div>
+                        <van-icon name="success" class="icon" />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 发文统计 -->
+        <div class="stat_section">
+            <div class="section_header">
+                <div class="header_left">
+                    <img style="width: 22px;margin-right: 5px;" src="@/assets/image/发文.png" alt="">
+                    <!-- <van-icon name="arrow-up" class="section_icon blue" /> -->
+                    <span class="section_title">发文统计</span>
+                </div>
+                <div class="section_total">846</div>
+            </div>
+            <div class="sub_cards">
+                <div class="sub_card">
+                    <div class="sub_label">待办</div>
+                    <div class="sub_number">128</div>
+                </div>
+                <div class="sub_card">
+                    <div class="sub_label">已办</div>
+                    <div class="sub_number">245</div>
+                </div>
+                <div class="sub_card">
+                    <div class="sub_label">已阅</div>
+                    <div class="sub_number">245</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 收文统计 -->
+        <div class="stat_section">
+            <div class="section_header">
+                <div class="header_left">
+                    <img style="width: 22px;margin-right: 5px;" src="@/assets/image/收文.png" alt="">
+                    <span class="section_title">收文统计</span>
+                </div>
+                <div class="section_total">623</div>
+            </div>
+            <div class="sub_cards">
+                <div class="sub_card">
+                    <div class="sub_label">待办</div>
+                    <div class="sub_number">245</div>
+                </div>
+                <div class="sub_card">
+                    <div class="sub_label">已办</div>
+                    <div class="sub_number">245</div>
+                </div>
+                <div class="sub_card">
+                    <div class="sub_label">已阅</div>
+                    <div class="sub_number">245</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 签报统计 -->
+        <div class="stat_section">
+            <div class="section_header">
+                <div class="header_left">
+                    <van-icon name="success" class="section_icon green" />
+                    <span class="section_title">签报统计</span>
+                </div>
+                <div class="section_total">419</div>
+            </div>
+            <div class="sub_cards">
+                <div class="sub_card">
+                    <div class="sub_label">待办</div>
+                    <div class="sub_number">245</div>
+                </div>
+                <div class="sub_card">
+                    <div class="sub_label">已办</div>
+                    <div class="sub_number">245</div>
+                </div>
+                <div class="sub_card">
+                    <div class="sub_label">已阅</div>
+                    <div class="sub_number">245</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<style lang='scss' scoped>
+.official_page {
+    padding: 10px 15px;
+    background-color: #f5f5f5;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+// 顶部Header
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    
+    .title {
+        font-size: 20px;
+        font-weight: bold;
+        color: #333;
+        margin: 0;
+    }
+    
+    .search_box {
+        display: flex;
+        align-items: center;
+        background-color: #fff;
+        border-radius: 20px;
+        padding: 8px 16px;
+        flex: 1;
+        max-width: 200px;
+        margin-left: 20px;
+        
+        .van-icon {
+            color: #999;
+            margin-right: 8px;
+            font-size: 16px;
+        }
+        
+        input {
+            border: none;
+            outline: none;
+            flex: 1;
+            font-size: 14px;
+            color: #333;
+            
+            &::placeholder {
+                color: #999;
+            }
+        }
+    }
+}
+
+// 第一个统计区域
+.first_section {
+    display: flex;
+    justify-content: space-between;
+    gap: 14px;
+    background-color: #fff;
+    border-radius: 10px;
+    padding: 14px;
+    margin-bottom: 10px;
+    align-items: stretch;
+    
+    .all_total {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        background-color: #f9f4e9;
+        border-radius: 8px;
+        padding: 20px;
+        
+        .label {
+            font-size: 14px;
+            color: #666;
+            margin-bottom: 12px;
+        }
+        
+        .number {
+            font-size: 32px;
+            font-weight: bold;
+            color: #333;
+        }
+    }
+    
+    .approval_status {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        flex: 1;
+        
+        .pending_approval,
+        .approved {
+            background-color: #6be46542;
+            border-radius: 8px;
+            padding: 16px;
+            flex: 1;
+            
+            .label {
+                font-size: 14px;
+                color: #666;
+                margin-bottom: 12px;
+            }
+            
+            .content {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                
+                .number {
+                    font-size: 24px;
+                    font-weight: bold;
+                    color: #333;
+                }
+                
+                .icon {
+                    font-size: 24px;
+                }
+            }
+        }
+        
+        .pending_approval {
+            background-color: #e6f4ff;
+            
+            .content .icon {
+                color: #1890ff;
+            }
+        }
+        
+        .approved {
+            background-color: #56e65b40;
+            
+            .content .icon {
+                color: #52c41a;
+            }
+        }
+    }
+}
+
+// 统计区域
+.stat_section {
+    background-color: #fff;
+    border-radius: 10px;
+    padding: 16px;
+    margin-bottom: 10px;
+    
+    .section_header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+        
+        .header_left {
+            display: flex;
+            align-items: center;
+            
+            .section_icon {
+                font-size: 20px;
+                margin-right: 8px;
+                
+                &.blue {
+                    color: #1890ff;
+                }
+                
+                &.purple {
+                    color: #722ed1;
+                }
+                
+                &.green {
+                    color: #52c41a;
+                }
+            }
+            
+            .section_title {
+                font-size: 16px;
+                font-weight: 500;
+                color: #333;
+            }
+        }
+        
+        .section_total {
+            font-size: 24px;
+            font-weight: bold;
+            color: #333;
+        }
+    }
+    
+    .sub_cards {
+        display: flex;
+        gap: 12px;
+        
+        .sub_card {
+            flex: 1;
+            background-color: #f8f8f8;
+            border-radius: 8px;
+            padding: 16px;
+            text-align: center;
+            
+            .sub_label {
+                font-size: 14px;
+                color: #666;
+                margin-bottom: 8px;
+            }
+            
+            .sub_number {
+                font-size: 20px;
+                font-weight: bold;
+                color: #333;
+            }
+        }
+    }
+}
+</style>

package//344/273/243/347/240/201/views/searchPage.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="search-page">
+    <!-- 查询bar -->
+    <div class="search-bar">
+      <van-search
+        v-model="keyword"
+        placeholder="请输入搜索内容"
+        show-action
+        clearable
+        shape="round"
+        @search="onSearch"
+        @cancel="onCancel"
+      >
+        <template #action>
+          <span class="search-action" @click="onSearch(keyword)">搜索</span>
+        </template>
+      </van-search>
+    </div>
+
+    <!-- 历史搜索功能-->
+    <div class="history-section" v-if="keyword.length == 0">
+      <div class="history-header">
+        <span class="section-title">历史搜索</span>
+        <van-icon name="delete" size="20" color="#8e8f91" @click="clearHistory" />
+      </div>
+      <div class="history-tags">
+        <div 
+            class="tag-item"
+            v-for="item in historyList"
+            :key="item"
+            @click="onSelectHistory(item)"
+        >
+            <van-icon name="clock-o" size="16" color="#8e8f91"></van-icon>
+            <span class="tag-text">{{ item }}</span>
+        </div>
+
+        
+        <!-- <van-tag
+          v-for="item in historyList"
+          :key="item"
+          type="primary"
+          plain
+          round
+          @click="onSelectHistory(item)"
+        >
+          {{ item }}
+        </van-tag> -->
+      </div>
+    </div>
+
+    <!-- 查询结果展示 -->
+    <div class="result-section" v-else>
+      <div class="section-title">搜索结果</div>
+      <van-empty
+        v-if="!results.length && hasSearched"
+        description="暂无搜索结果"
+      />
+      <van-empty
+        v-else-if="!hasSearched"
+        description="请输入关键字进行搜索"
+        image="search"
+      />
+      <van-list v-else :finished="true">
+        <van-cell
+          v-for="item in results"
+          :key="item.id"
+          :title="item.title"
+          :label="item.description"
+          @click="onSelectResult(item)"
+          is-link
+        />
+      </van-list>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+
+const HISTORY_KEY = 'official_search_history'
+
+const keyword = ref('') // 查询关键词
+const historyList = ref([]) // 历史搜索记录
+const results = ref([]) // 查询结果
+const hasSearched = ref(false) // 是否已搜索
+
+const dataSource = [
+  { id: 1, title: '公文审批流程', description: '快速审批新建公文，支持多人会签' },
+  { id: 2, title: '发文统计报表', description: '统计发文办理情况，支持导出' },
+  { id: 3, title: '收文登记流程', description: '登记收文并自动分发到相关部门' },
+  { id: 4, title: '签报申请', description: '签报流程模板，支持多级审批' },
+  { id: 5, title: '公文归档', description: '公文入库、归档与检索' },
+  { id: 6, title: '督办事项', description: '跟踪公文办理进度，逾期提醒' }
+]
+
+// 查
+const loadHistory = () => {
+  if (typeof window === 'undefined') return
+  const stored = localStorage.getItem(HISTORY_KEY)
+  historyList.value = stored ? JSON.parse(stored) : []
+}
+
+// 保存历史搜索记录
+const saveHistory = () => {
+  if (typeof window === 'undefined') return
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(historyList.value))
+}
+
+// 添加历史搜索记录
+const addHistory = (value) => {
+  const trimmed = value.trim()
+  if (!trimmed) return
+  const existingIndex = historyList.value.findIndex((item) => item === trimmed)
+  if (existingIndex !== -1) {
+    historyList.value.splice(existingIndex, 1)
+  }
+  historyList.value.unshift(trimmed)
+  if (historyList.value.length > 10) {
+    historyList.value = historyList.value.slice(0, 10)
+  }
+  saveHistory()
+}
+
+// 查询
+const onSearch = (value) => {
+  const trimmed = (value ?? '').trim()
+  if (!trimmed) return
+  keyword.value = trimmed
+  addHistory(trimmed)
+  results.value = dataSource.filter(
+    (item) =>
+      item.title.includes(trimmed) || item.description.includes(trimmed)
+  )
+  hasSearched.value = true
+}
+
+// 取消查询
+const onCancel = () => {
+  keyword.value = ''
+}
+
+// 清空历史搜索记录
+const clearHistory = () => {
+  historyList.value = []
+  if (typeof window !== 'undefined') {
+    localStorage.removeItem(HISTORY_KEY)
+  }
+}
+
+// 选择历史搜索记录
+const onSelectHistory = (value) => {
+  onSearch(value)
+}
+
+const onSelectResult = (item) => {
+  // 这里可以集成路由跳转或详情页逻辑
+  console.log('selected result', item)
+}
+
+onMounted(() => {
+  loadHistory()
+})
+</script>
+
+<style scoped lang="scss">
+.search-page {
+  min-height: 100vh;
+  background: #f7f8fa;
+  display: flex;
+  flex-direction: column;
+}
+
+.search-bar {
+  background: #fff;
+  padding: 8px 0px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+
+  .search-action {
+    color: #919294;
+    font-size: 14px;
+    padding: 0 8px;
+  }
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #8e8f91;
+}
+
+.history-section {
+  background: transparent;
+  margin: 12px;
+  padding: 0 0 16px;
+  border-radius: 0;
+  box-shadow: none;
+
+  .history-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+
+  .history-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    .van-tag {
+      padding: 4px 12px;
+      font-size: 14px;
+      color: #1989fa;
+      border-color: rgba(25, 137, 250, 0.35);
+    }
+
+    .tag-item {
+      display: flex;
+      width: 40%;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 12px;
+      font-size: 14px;
+      color: #8e8f91;
+      border-radius: 16px;
+    }
+    .tag-text {
+      font-size: 14px;
+      color: #8e8f91;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+.result-section {
+  flex: 1;
+  background: #fff;
+  margin: 0 ;
+  padding: 12px;
+  border-radius: 0;
+  box-shadow: none;
+
+  .section-title {
+    padding: 0 0 12px;
+  }
+
+  .van-cell {
+    &:not(:last-child)::after {
+      left: 16px;
+      right: 16px;
+    }
+  }
+}
+</style>
+