1

README.md

@@ -1,33 +1,3 @@
-# mingnan-website
+# wenbao-website
 
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
+文保中心官网

src/App.vue

@@ -20,7 +20,6 @@
 import { onMounted, watch } from 'vue';
 import { useRoute } from 'vue-router'
 import { initAMapApiLoader } from '@vuemap/vue-amap';
-import { registryConvert } from './common/ConvertRgeistry'
 import zhCN from 'ant-design-vue/es/locale/zh_CN';
 import NavBar from './components/NavBar.vue';
 import Footer from './components/Footer.vue';
@@ -30,8 +29,7 @@ if (import.meta.client) {
     key: '212b86dc49a5116a34e945d31da7ad14',
     securityJsCode: '46cae8205a707cfaf5801abcc4301566',
   });
-} 
-registryConvert();
+}
 
 onMounted(() => {
   if (import.meta.server)

src/assets/scss/main.scss

@@ -18,7 +18,7 @@
 
   --swiper-navigation-color: var(--color-primary);
   --swiper-pagination-color: var(--color-primary);
-  --container-width: 1200px;
+  --container-width: 1250px;
   --selection-max-width: 1250px;
 }
 
@@ -379,6 +379,8 @@ nav.main-nav {
   border-radius: 6px;
   overflow: hidden;
   position: relative;
+  min-height: 400px;
+
   img {
     width: 100%;
     height: 100%;
@@ -513,11 +515,14 @@ nav.main-nav {
   background-color: #fff;
   border-radius: 8px;
   padding: 30px 20px;
+  padding-bottom: 10px;
   margin-top: -15px;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
   transition:
     transform 0.3s,
     box-shadow 0.3s;
+  cursor: pointer;
+
   h3 {
     font-size: 15px;
   }
@@ -530,6 +535,11 @@ nav.main-nav {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
   }
+
+  a .iconify {
+    width: 30px;
+    height: 30px;
+  }
 }
 
 /* 底部区域 */
@@ -698,6 +708,10 @@ footer {
       font-size: 15px;
     }
   }
+
+  .content {
+
+  }
 }
 
 /* 联系我们页面样式 */

src/common/ConstStrings.ts

@@ -1 +0,0 @@
-export const NO_CONTENT_STRING = '无内容，请添加内容！';

src/common/ConvertRgeistry.ts

@@ -1,98 +0,0 @@
-import { 
-  DATA_MODEL_ERROR_REQUIRED_KEY_MISSING, 
-  DATA_MODEL_ERROR_TRY_CONVERT_BAD_TYPE, 
-  DATA_MODEL_ERROR_PRINT_SOURCE,
-  DATA_MODEL_ERROR_ARRAY_REQUIRED_KEY_MISSING,
-  DATA_MODEL_ERROR_ARRAY_IS_NOT_ARRAY,
-  DATA_MODEL_ERROR_MUST_PROVIDE_SIDE,
-  DATA_MODEL_ERROR_REQUIRED_KEY_NULL,
-  DataConverter, 
-  DataErrorFormatUtils, 
-  defaultDataErrorFormatHandler 
-} from "@imengyu/js-request-transform";
-
-function setErrorFormatter() {
-  DataErrorFormatUtils.setFormatHandler((error, data) => {
-    switch (error) {
-      case DATA_MODEL_ERROR_REQUIRED_KEY_MISSING: 
-        return `字段 ${data.sourceKey} 必填但未提供。 来源 ${data.source}; 对象 ${data.objectName} ${data.serverKey ? ('服务器应传字段: ' + data.serverKey) : ''}`;
-      case DATA_MODEL_ERROR_TRY_CONVERT_BAD_TYPE:
-        return `尝试将 ${data.sourceType} 转换为 ${data.targetType}。`;   
-      case DATA_MODEL_ERROR_PRINT_SOURCE:
-        return `来源: ${data.objectName}.`;
-      case DATA_MODEL_ERROR_ARRAY_REQUIRED_KEY_MISSING:
-        return `转换数组模型失败: 需要的字段 ${data.sourceKey} 未提供。`
-      case DATA_MODEL_ERROR_ARRAY_IS_NOT_ARRAY:
-        return `转换数组模型失败: 需要的字段 ${data.sourceKey} 不是数组类型。`
-      case DATA_MODEL_ERROR_MUST_PROVIDE_SIDE:
-        return `转换字段 ${data.key} 失败: 必须提供 ${data.direction} 侧数据。`;
-      case DATA_MODEL_ERROR_REQUIRED_KEY_NULL:
-        return `转换字段 ${data.key} 失败: 必填字段 ${data.key} 未提供或者为 null。`;
-    }
-    return defaultDataErrorFormatHandler(error, data);
-  });
-}
-
-export function registryConvert() {
-  setErrorFormatter();
-  DataConverter.registerConverter({
-    key: 'SplitCommaArray',
-    targetType: 'splitCommaArray',
-    converter: (source, key, type) => {
-      if (typeof source === 'string') 
-        return {
-          success: true,
-          result: source?.split(',') || [],
-        }
-      return {
-        success: false,
-        convertFailMessage: `[${key}] 不是字符串类型`,
-      };
-    }
-  })
-  DataConverter.registerConverter({
-    key: 'CommaArrayMerge',
-    targetType: 'commaArrayMerge',
-    converter: (source, key, type) => {
-      if (source instanceof Array) 
-        return {
-          success: true,
-          result: source?.join(',') || '',
-        }
-      return {
-        success: false,
-        convertFailMessage: `[${key}] 不是数组类型`,
-      };
-    }
-  })
-  DataConverter.registerConverter({
-    key: 'ForceArray',
-    targetType: 'forceArray',
-    converter: (source, key, type) => {
-      if (source instanceof Array) 
-        return {
-          success: true,
-          result: source,
-        }
-      if (typeof source === 'object' && source !== null) {
-        const arr = []
-        for (const key in source) {
-          arr.push((source as Record<string, any>)[key])
-        }
-        return {
-          success: true,
-          result: arr,
-        }
-      }
-      if (typeof source === 'string')
-        return {
-          success: true,
-          result: source.split(','), 
-        }
-      return {
-        success: false,
-        convertFailMessage: `[${key}] 不是数组类型`,
-      };
-    }
-  })
-}

src/common/EventBus.ts

@@ -1,8 +0,0 @@
-import mitt from 'mitt'
-
-export type EventBusOnPageBackData = { name: string, data: any }
-type Events = {
-  pageActionListenOnPageBack: EventBusOnPageBackData,
-}
-
-export const EventBus = mitt<Events>();

src/common/config/ApiCofig.ts

@@ -1,9 +0,0 @@
-
-/**
- * 说明：后端接口配置
- */
-export default {
-  serverDev: 'https://mn.wenlvti.net/api',
-  serverProd: 'https://mn.wenlvti.net/api',
-  mainBodyId: 1,
-}

src/common/config/AppCofig.ts

@@ -1,11 +0,0 @@
-
-/**
- * 说明：应用静态配置
- */
-export default {
-  version: '0.0.1',
-}
-/**
- * 是否是开发环境
- */
-export const isDev = import.meta.env.DEV;

src/composeable/PageAction.ts

@@ -1,103 +0,0 @@
-import { EventBus } from "@/common/EventBus";
-import { onBeforeUnmount, onMounted, type App } from "vue";
-import { useRoute, useRouter, type LocationQueryRaw } from "vue-router";
-
-/**
- * 说明：页面导航相关函数封装。
- */
-
-type OnPageBackCb = (data: Record<string, unknown>) => void
-
-const EventBusName = 'pageActionListenOnPageBack';
-
-export function useOnPageBack() {
-
-  const route = useRoute();
-  const cbs : OnPageBackCb[]  = [] 
-
-  function onPageBack(cb: OnPageBackCb) {
-    cbs.push(cb)
-  }
-
-  onMounted(() => {
-    EventBus.on(EventBusName, (e) => {
-      if (e.name === route.name) {
-        cbs.forEach((cb) => {
-          cb(e.data);
-        })
-      }
-    });
-  });
-  onBeforeUnmount(() => {
-    EventBus.off(EventBusName);
-  });
-
-  return {
-    onPageBack,
-  }
-}
-
-export function usePageAction() {
-  const router = useRouter();
-
-  /**
-   * 页面跳转: 后退至上一个页面。
-   */
-  function back() {
-    router.back();
-  }
-  /**
-   * 页面跳转: 后退并返回数据至上一个页面的 onPageBack 方法。
-   * @param data 要返回的数据
-   */
-  function backReturnData(data: Record<string, unknown>) {
-    callPrevOnPageBack('' + router.options.history.state.back, data);
-    router.back();
-  }
-  /**
-   * 页面跳转: 跳转到指定页面
-   * @param url 页面路径
-   * @param data 要传递的数据
-   */
-  function navTo(url: string, data: Record<string, unknown> = {}) {
-    const data2 : LocationQueryRaw = {}
-
-    for (const key in data) {
-      if (Object.prototype.hasOwnProperty.call(data, key))
-        data2[key] = data[key] as string;
-    }
-
-    router.push({
-      path: url,
-      query: data2,
-    });
-  }
-  /**
-   * 页面数据传递: 调用上一个页面的 onPageBack 方法
-   * @param name 方法名
-   * @param data 要传递的数据
-   */
-  function callPrevOnPageBack(name: string, data: Record<string, unknown>) {
-    EventBus.emit(EventBusName, {
-      name,
-      data,
-    })
-  }
-  /**
-   * 页面跳转: 调用上一个页面的 onPageBack 方法并返回至上一个页面
-   * @param name 方法名
-   * @param data 要传递的数据
-   */
-  function backAndCallOnPageBack(name: string, data: Record<string, unknown>) {
-    router.back();
-    callPrevOnPageBack(name, data);
-  }
- 
-  return {
-    back,
-    backReturnData,
-    backAndCallOnPageBack, 
-    navTo,
-    callPrevOnPageBack,
-  }
-}

src/pages/index.vue

@@ -98,8 +98,9 @@
         <!-- 工作动态和党建工作 -->
         <div class="row mt-lg-3 mt-md-2 mt-sm-2">
 
-          <div class="col col-sm-12 col-md-5 col-lg-5">
-            <div class="main-box fill">
+          <div class="col col-sm-12 col-md-8 col-lg-8">
+            <!-- 工作动态 -->
+            <div class="main-box">
               <div class="section-title">
                 <h2>
                   <Icon name="material-symbols-light:flag" />
@@ -116,10 +117,8 @@
                 </SimplePageContentLoader>
               </div>
             </div>
-          </div>
-
-          <div class="col col-sm-12 col-md-5 col-lg-5">
-            <div class="main-box fill">
+            <!-- 党建工作 -->
+            <div class="main-box mt-lg-3 mt-md-2 mt-sm-2">
               <div class="section-title">
                 <h2>
                   <Icon name="famicons:logo-designernews" />
@@ -136,9 +135,26 @@
                 </SimplePageContentLoader>
               </div>
             </div>
+            <!-- 精彩推荐 -->
+            <div class="main-box mt-lg-3 mt-md-2 mt-sm-2">
+              <div class="section-title">
+                <h2 class="icon">精彩推荐</h2>
+                <!-- <a href="#" class="section-more">查看更多 <Icon name="material-symbols-light:chevron-right" /></a> -->
+              </div>
+              <div class="featured-grid">
+                <SimplePageContentLoader :loader="featured" :showEmpty="!featured.content.value?.items?.length">
+                  <div v-for="item in featured.content.value?.items" :key="item.id" class="featured-card">
+                    <router-link :to="'/page/' + item.id">
+                      <img :src="item.image" :alt="item.desc || item.title">
+                      <p>{{ item.title }}</p>
+                    </router-link>
+                  </div>
+                </SimplePageContentLoader>
+              </div>
+            </div>
           </div>
 
-          <div class="col col-sm-12 col-md-2 col-lg-2">
+          <div class="col d-flex flex-column col-sm-12 col-md-4 col-lg-4">
             
             <Carousel v-bind="carouselConfig">
               <Slide 
@@ -157,35 +173,21 @@
                 <Pagination />
               </template>
             </Carousel>
-          </div>
-        </div>
 
-        <hr class="main-hr" />
+            <div class="main-box mt-lg-3 mt-md-2 mt-sm-2 flex-fill">
 
-        <!-- 精彩推荐 -->
-        <div class="featured-section main-box">
-          <div class="section-title">
-            <h2 class="icon">精彩推荐</h2>
-            <!-- <a href="#" class="section-more">查看更多 <Icon name="material-symbols-light:chevron-right" /></a> -->
-          </div>
-          <div class="featured-grid">
-            <SimplePageContentLoader :loader="featured" :showEmpty="!featured.content.value?.items?.length">
-              <div v-for="item in featured.content.value?.items" :key="item.id" class="featured-card">
-                <router-link :to="'/page/' + item.id">
-                  <img :src="item.image" :alt="item.desc || item.title">
-                  <p>{{ item.title }}</p>
-                </router-link>
-              </div>
-            </SimplePageContentLoader>
+            </div>
           </div>
         </div>
 
+        <hr class="main-hr" />
+
         <!-- 公共服务 -->
         <div class="services-section">
           <img class="title" src="@/assets/images/box-service.png" alt="公共服务">
           <div class="services-grid">
 
-            <div class="service-card">
+            <div class="service-card" @click="handleServiceClick('volunteer')">
               <img class="icon" src="@/assets/images/icon-explore.png">
               <h3>志愿者招募</h3>
               <a href="#" class="service-link">
@@ -193,7 +195,7 @@
               </a>
             </div>
 
-            <div class="service-card">
+            <div class="service-card" @click="handleServiceClick('activity')">
               <img class="icon" src="@/assets/images/icon-join.png">
               <h3>活动报名</h3>
               <a href="#" class="service-link">
@@ -201,7 +203,7 @@
               </a>
             </div>
 
-            <div class="service-card">
+            <div class="service-card" @click="handleServiceClick('contact')">
               <img class="icon" src="@/assets/images/icon-contract.png">
               <h3>联系咨询通道</h3>
               <a href="#" class="service-link">
@@ -294,6 +296,14 @@ const featured = await useSSrSimpleDataLoader('featured', async () => {
 function handleImageClick(image: string) {
   window.open(image, '_blank');
 }
+function handleServiceClick(service: string) {
+  Modal.info({
+    title: '提示',
+    content: '网站正在进行内部测试，暂未对外开放功能，敬请期待。',
+  });
+}
+
+
 
 const tipCounter = new MemoryTimeOut('devtip', 1000 * 3600);
 

src/pages/page/[id].vue

@@ -61,10 +61,12 @@
                 <div class="news-detail">
                   <h1>{{ articlesData.content.value?.title }}</h1>
                   <div class="times">
-                    <p class="date">时间：{{ DateUtils.formatDate(new Date(articlesData.content.value?.publishtime || 0 * 1000), 'yyyy-MM-dd') }}</p>
+                    <p class="date">时间：{{ DateUtils.formatDate(new Date(
+                      (articlesData.content.value?.publishtime ||  
+                      articlesData.content.value?.createtime  || 0) * 1000), 'yyyy-MM-dd') }}</p>
                     <p class="views">浏览量： {{ articlesData.content.value?.views }} </p>
                   </div>
-                  <div class="content-text" v-html="articlesData.content.value?.content">
+                  <div class="content" v-html="articlesData.content.value?.content">
                   </div>
                 </div>
               </SimplePageContentLoader>