vue_zhongyou 1.0.1

package/index.js

@@ -0,0 +1 @@
+console.log('小鱼的npm,上传一些资源')

package/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "vue_zhongyou",
+  "version": "1.0.1",
+  "description": "",
+  "main": "index.js",
+  "keywords": [],
+  "author": "yg",
+  "license": "MIT"
+}

package//344/273/243/347/240/201/assets/common.css

@@ -0,0 +1,10 @@
+body,html{
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+#app{
+    width: 100%;
+    height: 100%;
+}

package//344/273/243/347/240/201/components/FilterSortPanel.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="filter-sort-panel">
+    <div class="toolbar" ref="toolbarRef">
+      <button
+        type="button"
+        class="toolbar-btn"
+        :class="{ active: activePanel === 'filter' }"
+        @click="togglePanel('filter')"
+      >
+        <van-icon name="filter-o" class="btn-icon" />
+        <span>筛选</span>
+        <van-icon
+          name="arrow-down"
+          class="arrow"
+          :class="{ open: activePanel === 'filter' }"
+        />
+      </button>
+      <button
+        type="button"
+        class="toolbar-btn"
+        :class="{ active: activePanel === 'sort' }"
+        @click="togglePanel('sort')"
+      >
+        <van-icon name="descending" class="btn-icon" />
+        <span>排序</span>
+        <van-icon
+          name="arrow-down"
+          class="arrow"
+          :class="{ open: activePanel === 'sort' }"
+        />
+      </button>
+    </div>
+
+    <transition name="dropdown-fade">
+      <div
+        v-if="activePanel"
+        class="panel"
+        :class="`panel-${activePanel}`"
+      >
+        <slot v-if="activePanel === 'filter'" name="filter" />
+        <slot v-else name="sort" />
+      </div>
+    </transition>
+
+    <transition name="fade">
+      <div
+        v-if="activePanel"
+        class="overlay"
+        :style="{ top: `${overlayTop}px` }"
+        @click="closePanel"
+      />
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { nextTick, ref } from 'vue'
+
+const activePanel = ref('')
+const overlayTop = ref(0)
+const toolbarRef = ref(null)
+
+const togglePanel = (panel) => {
+  if (activePanel.value === panel) {
+    activePanel.value = ''
+    overlayTop.value = 0
+    return
+  }
+
+  activePanel.value = panel
+
+  nextTick(() => {
+    if (toolbarRef.value) {
+      const { bottom } = toolbarRef.value.getBoundingClientRect()
+      overlayTop.value = bottom
+    }
+  })
+}
+
+const closePanel = () => {
+  activePanel.value = ''
+  overlayTop.value = 0
+}
+</script>
+
+<style scoped lang="scss">
+.filter-sort-panel {
+  position: relative;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    gap: 12px;
+    background-color: #fff;
+    z-index: 2;
+
+    .toolbar-btn {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      padding: 8px 12px;
+      border-radius: 999px;
+      border: 1px solid #ebedf0;
+      background: #fff;
+      color: #323233;
+      font-size: 14px;
+      transition: all 0.2s ease;
+
+      &:active {
+        background-color: #f2f3f5;
+      }
+
+      &.active {
+        color: #1989fa;
+        border-color: #1989fa;
+        background-color: rgba(25, 137, 250, 0.08);
+      }
+
+      .btn-icon {
+        font-size: 18px;
+      }
+
+      .arrow {
+        font-size: 12px;
+        transform: rotate(0deg);
+        transition: transform 0.2s ease;
+
+        &.open {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+
+  .panel {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 100%;
+    background-color: #fff;
+    padding: 16px;
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
+    border-radius: 0 0 12px 12px;
+    z-index: 3;
+  }
+
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 1;
+  }
+}
+
+.dropdown-fade-enter-active,
+.dropdown-fade-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.dropdown-fade-enter-from,
+.dropdown-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
+

package//344/273/243/347/240/201/components/card.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="card">
+        <slot></slot>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<style lang='scss' scoped>
+    .card{
+        padding: 12px;
+        border-radius: 8px;
+        background-color: #f5f5f5;
+    }
+</style>

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

@@ -0,0 +1,199 @@
+<template>
+    <!-- 首页头部 -->
+    <van-sticky>
+        <div class="header">
+        <div class="user-info">
+            <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="用户头像" class="avatar" />
+            <div class="user-details">
+                <div class="username" >张明</div>
+            </div>
+        </div>
+        <div class="header-actions">
+            <div class="search-icon">
+                <van-search v-model="searchText" placeholder="搜索..." show-action shape="round" bg-color="#c59b70"
+                    @search="onSearch">
+                    <template #action>
+                        <div class="search-action">
+                            <van-icon name="bell-o" size="20" color="#666" />
+                        </div>
+                    </template>
+                </van-search>
+            </div>
+        </div>
+    </div>
+    </van-sticky>
+    
+    <!-- 首页轮播图 -->
+    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+    </van-swipe>
+    <!-- 首页导航 -->
+    <div class="quick-nav">
+      <van-grid :column-num="4" :border="false">
+        <van-grid-item
+          v-for="item in quickNavList"
+          :key="item.id"
+          @click="goToModule(item.path)"
+        >
+            <div class="grid-item-content">
+                <div class="icon-container"><van-icon :name="item.icon" size="24" color="#816e6e" /></div>
+                <div class="text-container">{{ item.text }}</div>
+            </div>
+        </van-grid-item>
+      </van-grid>
+    </div>
+    <!-- 通知公告 -->
+    <div class="notice-section">
+      <div class="notice-header">
+        <span class="notice-title">通知公告</span>
+        <span class="more-link" @click="goToMoreNotice">更多 ></span>
+      </div>
+      <Card
+        v-for="(notice, index) in noticeList.slice(0, 5)"
+        :key="index"
+      >
+        <template>
+            <div>
+
+            </div>
+        </template>
+      </Card>
+      <!-- <van-card
+        v-for="(notice, index) in noticeList.slice(0, 5)"
+        :key="index"
+        :desc="notice.content"
+        :title="notice.title"
+        :thumb="notice.thumb || 'https://img.yzcdn.cn/vant/notice.png'"
+        @click="goToNoticeDetail(notice.id)"
+      /> -->
+    </div>
+    <!-- 公司新闻 -->
+    <div class="notice-section">
+      <div class="notice-header">
+        <span class="notice-title">公司新闻</span>
+        <span class="more-link" @click="goToMoreNotice">更多 ></span>
+      </div>
+      <van-card
+        v-for="(notice, index) in noticeList.slice(0, 5)"
+        :key="index"
+        :desc="notice.content"
+        :title="notice.title"
+        :thumb="notice.thumb || 'https://img.yzcdn.cn/vant/notice.png'"
+        @click="goToNoticeDetail(notice.id)"
+      />
+    </div>
+</template>
+
+<script setup>
+import Card from '@/components/card.vue'
+import { ref } from 'vue'
+import {useRouter} from 'vue-router'
+const router = useRouter()
+const quickNavList = ref([
+    { id: 1, icon: 'newspaper', text: '新闻', path: '/' },
+    { id: 2, icon: 'notes', text: '公文', path: '/official' },
+    { id: 3, icon: 'label', text: '行政', path: '/list' },
+    { id: 4, icon: 'more', text: '更多', path: '/' },
+])
+const noticeList = ref([
+    { id: 1, title: '通知公告1', content: '这是通知公告1的内容', thumb: 'https://img.yzcdn.cn/vant/notice.png' },
+    { id: 2, title: '通知公告2', content: '这是通知公告2的内容' },
+    { id: 3, title: '通知公告3', content: '这是通知公告3的内容' },
+    { id: 4, title: '通知公告4', content: '这是通知公告4的内容' },
+    { id: 5, title: '通知公告5', content: '这是通知公告5的内容' },
+])
+// 点击导航项跳转到对应的模块
+const goToModule = (path) => {
+    router.push(path)
+}
+</script>
+<style scoped lang="scss">
+$primary-color:#C59B70;
+.header {
+    
+    background-color: $primary-color;
+    padding: 6px 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .header-actions {
+        display: flex;
+        align-items: center;
+    }
+
+    .user-info {
+        display: flex;
+        align-items: center;
+        .username {
+            font-size: 16px;
+            font-weight: bold;
+            color: white;
+        }
+        .avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            margin-right: 12px;
+            border: 2px solid white;
+        }
+    }
+
+}
+
+.my-swipe .van-swipe-item {
+    color: #fff;
+    font-size: 20px;
+    line-height: 150px;
+    text-align: center;
+    background-color: #39a9ed;
+}
+
+
+.quick-nav {
+    padding: 16px;
+}
+.grid-item-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.icon-container{
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+    background-color: #c59b70c2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.text-container{
+    font-size: 14px;
+    color: #816e6e;
+    margin-top: 4px;
+}
+
+.notice-section {
+    padding: 0px 16px 16px 16px;
+}
+.notice-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .more-link {
+        font-size: 14px;
+        color: $primary-color;
+    }
+}
+.notice-title {
+    font-size: 16px;
+    font-weight: bold;
+}
+.van-search {
+    background-color: $primary-color;
+}
+</style>

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

@@ -0,0 +1,95 @@
+<template>
+            <FilterSortPanel class="filter-sort-toolbar">
+            <template #filter>
+                <div class="panel-section">
+                    <div class="panel-title">筛选方式</div>
+                    <van-radio-group v-model="filterValue" direction="vertical">
+                        <van-radio
+                            v-for="item in filterOptions"
+                            :key="item.value"
+                            :name="item.value"
+                        >
+                            {{ item.label }}
+                        </van-radio>
+                    </van-radio-group>
+                    <div class="panel-actions">
+                        <van-button size="small" type="default" round plain @click="resetFilters">
+                            重置
+                        </van-button>
+                        <van-button size="small" type="primary" round @click="applyFilters">
+                            完成
+                        </van-button>
+                    </div>
+                </div>
+            </template>
+            <template #sort>
+                <div class="panel-section">
+                    <div class="panel-title">排序方式</div>
+                    <van-radio-group v-model="sortValue" direction="vertical">
+                        <van-radio
+                            v-for="item in sortOptions"
+                            :key="item.value"
+                            :name="item.value"
+                        >
+                            {{ item.label }}
+                        </van-radio>
+                    </van-radio-group>
+                </div>
+            </template>
+        </FilterSortPanel>
+
+</template>
+<script setup>
+import { ref } from 'vue'
+import FilterSortPanel from '@/components/FilterSortPanel.vue'
+
+const sortValue = ref('latestCreated')
+const filterValue = ref('all')
+
+const sortOptions = [
+    { label: '最新创建', value: 'latestCreated' },
+    { label: '最早创建', value: 'earliestCreated' },
+    { label: '最近更新', value: 'latestUpdated' },
+    { label: '最早更新', value: 'earliestUpdated' }
+]
+
+const filterOptions = [
+    { label: '全部公文', value: 'all' },
+    { label: '待审公文', value: 'pending' },
+    { label: '已审公文', value: 'approved' },
+    { label: '签报公文', value: 'sign' }
+]
+
+const resetFilters = () => {
+    filterValue.value = 'all'
+}
+
+const applyFilters = () => {
+    // 在此处触发实际的筛选逻辑
+    // 例如：emit('filter-change', { filter: filterValue.value, sort: sortValue.value })
+}
+</script>
+<style lang='scss' scoped>
+.filter-sort-toolbar {
+    margin-bottom: 10px;
+}
+
+.panel-section {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.panel-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+}
+
+.panel-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
+</style>