产品中心, 产品详情页面搭建

.env.development

@@ -1,10 +1,10 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 公共服务平台
 
 # 开发环境配置
 ENV = 'development'
 
-# 若依管理系统/开发环境
+# 公共服务平台/开发环境
 VUE_APP_BASE_API = '/dev-api'
 
 # 路由懒加载

.env.production

@@ -1,8 +1,8 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 公共服务平台
 
 # 生产环境配置
 ENV = 'production'
 
-# 若依管理系统/生产环境
+# 公共服务平台/生产环境
 VUE_APP_BASE_API = '/prod-api'

.env.staging

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 公共服务平台
 
 BABEL_ENV = production
 
@@ -8,5 +8,5 @@ NODE_ENV = production
 # 测试环境配置
 ENV = 'staging'
 
-# 若依管理系统/测试环境
+# 公共服务平台/测试环境
 VUE_APP_BASE_API = '/stage-api'

package.json

@@ -1,8 +1,8 @@
 {
   "name": "ruoyi",
   "version": "3.9.0",
-  "description": "若依管理系统",
+  "description": "公共服务平台",
-  "author": "若依",
+  "author": "bonus",
   "license": "MIT",
   "scripts": {
     "dev": "vue-cli-service serve",

src/layout/components/Navbar.vue

@@ -9,19 +9,19 @@
       <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
 
-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
+<!--        <el-tooltip content="源码地址" effect="dark" placement="bottom">-->
-          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
+<!--          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
-        </el-tooltip>
+<!--        </el-tooltip>-->
 
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
+<!--        <el-tooltip content="文档地址" effect="dark" placement="bottom">-->
-          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
+<!--          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
-        </el-tooltip>
+<!--        </el-tooltip>-->
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
+<!--        <el-tooltip content="布局大小" effect="dark" placement="bottom">-->
-          <size-select id="size-select" class="right-menu-item hover-effect" />
+<!--          <size-select id="size-select" class="right-menu-item hover-effect" />-->
-        </el-tooltip>
+<!--        </el-tooltip>-->
 
       </template>
 

src/router/index.js

@@ -87,6 +87,29 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
+  },
+  // 在路由配置中添加产品详情页面路由
+  {
+    path: '/psp/productCenter',
+    component: Layout,
+    redirect: '/psp/productCenter/index',
+    name: 'ProductCenter',
+    meta: { title: '产品中心', icon: 'product' },
+    children: [
+      {
+        path: 'index',
+        name: 'ProductCenterIndex',
+        component: () => import('@/views/psp/productCenter/index'),
+        meta: { title: '产品中心', icon: 'product' }
+      },
+      {
+        path: 'detail/:id(\\d+)',
+        name: 'ProductDetail',
+        component: () => import('@/views/psp/productCenter/product-detail'),
+        meta: { title: '产品详情', activeMenu: '/psp/productCenter/index' },
+        hidden: true
+      }
+    ]
   }
 ]
 

src/views/index.vue

@@ -2,9 +2,9 @@
   <div class="app-container home">
     <el-row :gutter="20">
       <el-col :sm="24" :lg="12" style="padding-left: 20px">
-        <h2>若依后台管理框架</h2>
+        <h2>后台管理框架</h2>
         <p>
-          一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
+          一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了公共服务平台，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
         </p>
         <p>
           <b>当前版本:</b> <span>v{{ version }}</span>
@@ -92,14 +92,14 @@
             <p>
               <i class="el-icon-chat-dot-round"></i> 微信：<a
                 href="javascript:;"
-                >/ *若依</a
+                >/ *</a
               >
             </p>
             <p>
               <i class="el-icon-money"></i> 支付宝：<a
                 href="javascript:;"
                 class="支付宝信息"
-                >/ *若依</a
+                >/ *</a
               >
             </p>
           </div>
@@ -1026,7 +1026,7 @@
             </el-collapse-item>
             <el-collapse-item title="v1.0.0 - 2019-10-08">
               <ol>
-                <li>若依前后端分离系统正式发布</li>
+                <li>公共服务平台前后端分离系统正式发布</li>
               </ol>
             </el-collapse-item>
           </el-collapse>

src/views/psp/productCenter/index.vue

@@ -0,0 +1,512 @@
+<template>
+  <div class="platform-container">
+    <!-- 顶部导航栏 -->
+    <div class="header">
+      <div class="header-content">
+        <div class="header-left">
+          <div class="logo-section">
+            <img src="/img/psp/productCenter/logo.png" alt="Logo" class="logo"/>
+            <span class="platform-title">公共服务平台</span>
+          </div>
+        </div>
+
+        <div class="header-nav">
+          <div
+            v-for="item in navItems"
+            :key="item.key"
+            class="nav-item"
+            :class="{ active: activeNav === item.key }"
+            @click="activeNav = item.key"
+          >
+            <img :src="item.icon" :alt="item.label" class="nav-icon"/>
+            <span class="nav-text">{{ item.label }}</span>
+          </div>
+        </div>
+
+        <div class="header-right">
+          <div class="search-box">
+            <input
+              v-model="searchKeyword"
+              type="text"
+              placeholder="输入关键词搜索"
+              class="search-input"
+              @keyup.enter="handleSearch"
+            />
+            <button class="search-btn" @click="handleSearch">
+              <i class="el-icon-search"></i>
+            </button>
+          </div>
+          <div class="user-avatar">
+            <img :src="$store.state.user.avatar" alt="用户头像"/>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主体内容 -->
+    <div class="main-content">
+      <!-- 左侧分类菜单 -->
+      <div class="sidebar">
+        <div
+          v-for="category in categories"
+          :key="category.key"
+          class="category-item"
+          :class="{ active: activeCategory === category.key }"
+          @click="activeCategory = category.key"
+        >
+          {{ category.label }}
+        </div>
+      </div>
+
+      <!-- 右侧服务卡片区域 -->
+      <div class="content-area">
+        <div class="services-grid">
+          <div
+            v-for="service in filteredServices"
+            :key="service.id"
+            class="service-card"
+            @mouseenter="handleCardHover(service.id)"
+            @mouseleave="handleCardLeave"
+          >
+            <div class="card-image">
+              <img :src="apiBase + service.image" :alt="service.title"/>
+            </div>
+            <div class="card-content">
+              <h3 class="card-title">{{ service.title }}</h3>
+              <div class="card-actions">
+                <button
+                  class="btn btn-primary"
+                  @click="handleDemo(service)"
+                >
+                  访问演示
+                </button>
+                <button
+                  class="btn btn-outline"
+                  @click="handleDetail(service)"
+                >
+                  查看详情
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PlatformIndex',
+  data() {
+    return {
+      activeNav: 'products',
+      activeCategory: 'all',
+      searchKeyword: '',
+      hoveredCard: null,
+      apiBase: process.env.VUE_APP_BASE_API,
+      navItems: [
+        { key: 'products',label: '产品中心', icon: '/img/psp/productCenter/products.png' },
+        { key: 'components', label: '公共组件', icon: '/img/psp/productCenter/components.png' },
+        { key: 'materials', label: '宣传物料', icon: '/img/psp/productCenter/materials.png'},
+        { key: 'docs', label: '文档中心', icon: '/img/psp/productCenter/docs.png'}
+      ],
+      categories: [
+        {key: 'all', label: '全部'},
+        {key: 'smart', label: '智慧基建'},
+        {key: 'system', label: '智慧后勤'},
+        {key: 'safety', label: '数智安监'}
+      ],
+      services: [
+        {
+          id: 1,
+          title: '绿智食堂',
+          image: '/profile/avatar/2025/09/03/001_20250903132300A001.JPG',
+          category: 'smart',
+          description: '智能化食堂管理系统'
+        },
+        {
+          id: 2,
+          title: '智能机具管理系统',
+          image: '/placeholder.svg?height=200&width=300',
+          category: 'system',
+          description: '设备智能化管理平台'
+        },
+        {
+          id: 3,
+          title: '智慧楼宇',
+          image: '/placeholder.svg?height=200&width=300',
+          category: 'smart',
+          description: '楼宇智能化控制系统'
+        },
+        {
+          id: 4,
+          title: '产业工人实名制',
+          image: '/placeholder.svg?height=200&width=300',
+          category: 'system',
+          description: '工人身份认证管理'
+        },
+        {
+          id: 5,
+          title: '安全质量智慧决策中心',
+          image: '/placeholder.svg?height=200&width=300',
+          category: 'safety',
+          description: '安全质量智能决策平台'
+        },
+        {
+          id: 6,
+          title: '智慧工地',
+          image: '/placeholder.svg?height=200&width=300',
+          category: 'smart',
+          description: '工地智能化管理系统'
+        },
+        {
+          id: 7,
+          title: 'VR警示教育室',
+          image: '/placeholder.svg?height=200&width=300',
+          category: 'safety',
+          description: 'VR安全教育培训系统'
+        },
+        {
+          id: 8,
+          title: '应急智中心建设',
+          image: '/placeholder.svg?height=200&width=300',
+          category: 'safety',
+          description: '应急响应智能化中心'
+        }
+      ]
+    }
+  },
+  computed: {
+    filteredServices() {
+      let filtered = this.services
+
+      // 按分类筛选
+      if (this.activeCategory !== 'all') {
+        filtered = filtered.filter(service => service.category === this.activeCategory)
+      }
+
+      // 按搜索关键词筛选
+      if (this.searchKeyword.trim()) {
+        const keyword = this.searchKeyword.toLowerCase()
+        filtered = filtered.filter(service =>
+          service.title.toLowerCase().includes(keyword) ||
+          service.description.toLowerCase().includes(keyword)
+        )
+      }
+
+      return filtered
+    }
+  },
+  methods: {
+    handleSearch() {
+      console.log('搜索关键词:', this.searchKeyword)
+      // 搜索逻辑已在computed中实现
+    },
+    handleDemo(service) {
+      console.log('访问演示:', service.title)
+      // 这里可以跳转到演示页面
+      this.$message.success(`正在打开 ${service.title} 演示`)
+    },
+    // 在 index.vue 中的 handleDetail 方法
+    handleDetail(service) {
+      console.log('查看详情:', service.title)
+      this.$router.push({
+        name: 'ProductDetail',
+        params: { id: service.id }
+      })
+    },
+    handleCardHover(serviceId) {
+      this.hoveredCard = serviceId
+    },
+    handleCardLeave() {
+      this.hoveredCard = null
+    }
+  }
+}
+</script>
+
+<style scoped>
+.platform-container {
+  height: 100%;
+}
+
+/* 顶部导航栏 */
+.header {
+  background-image: url("/img/psp/productCenter/topbg.png");
+  color: white;
+  padding: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 100vw;
+  margin: 0 auto;
+  padding: 12px 20px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.logo-section {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.logo {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+}
+
+.platform-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: white;
+}
+
+.header-nav {
+  display: flex;
+  gap: 32px;
+  justify-content: space-between;
+}
+
+.nav-item {
+  padding: 8px 16px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.nav-icon {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+.nav-text {
+  white-space: nowrap;
+}
+
+.nav-item:hover,
+.nav-item.active {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 20px;
+  padding: 6px 12px;
+}
+
+.search-input {
+  background: transparent;
+  border: none;
+  outline: none;
+  color: white;
+  font-size: 14px;
+  width: 200px;
+}
+
+.search-input::placeholder {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.search-btn {
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+  padding: 4px;
+}
+
+.user-avatar img {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+/* 主体内容 */
+.main-content {
+  display: flex;
+  max-width: 95%;
+  margin: 0 auto;
+  padding: 24px 20px;
+  gap: 24px;
+}
+
+/* 左侧分类菜单 */
+.sidebar {
+  width: 160px;
+  flex-shrink: 0;
+}
+
+.category-item {
+  padding: 12px 16px;
+  margin-bottom: 8px;
+  background: white;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 14px;
+  color: #666;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.category-item:hover {
+  background-color: #f0f7ff;
+  color: #4a90e2;
+}
+
+.category-item.active {
+  background-color: #4a90e2;
+  color: white;
+}
+
+/* 服务卡片区域 */
+.content-area {
+  flex: 1;
+}
+
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+}
+
+.service-card {
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  cursor: pointer;
+  height: 100%; /* 让卡片高度撑满 grid 单元格 */
+}
+
+.service-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+}
+
+.card-image {
+  height: 180px; /* 固定高度，可根据设计调整 */
+  overflow: hidden;
+  background-color: #f8f9fa; /* 图片加载前的占位背景 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain; /* 关键：完整显示图片，不裁剪，保持比例 */
+  transition: transform 0.3s ease;
+}
+
+.service-card:hover .card-image img {
+  transform: scale(1.05);
+}
+
+.card-content {
+  padding: 16px;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 16px 0;
+  line-height: 1.4;
+  text-align: center;
+}
+
+.card-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.btn {
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  flex: 1;
+  text-align: center;
+}
+
+.btn-primary {
+  background-color: #4a90e2;
+  color: white;
+  border-color: #4a90e2;
+}
+
+.btn-primary:hover {
+  background-color: #357abd;
+  border-color: #357abd;
+}
+
+.btn-outline {
+  background-color: transparent;
+  color: #4a90e2;
+  border-color: #4a90e2;
+}
+
+.btn-outline:hover {
+  background-color: #4a90e2;
+  color: white;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .header-content {
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px;
+  }
+
+  .header-nav {
+    gap: 16px;
+  }
+
+  .main-content {
+    flex-direction: column;
+    padding: 16px;
+  }
+
+  .sidebar {
+    width: 100%;
+  }
+
+  .services-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .search-input {
+    width: 150px;
+  }
+}
+</style>

vue.config.js

@@ -7,9 +7,9 @@ function resolve(dir) {
 
 const CompressionPlugin = require('compression-webpack-plugin')
 
-const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
+const name = process.env.VUE_APP_TITLE || '公共服务平台' // 网页标题
 
-const baseUrl = 'http://localhost:8080' // 后端接口
+const baseUrl = 'http://localhost:58080' // 后端接口
 
 const port = process.env.port || process.env.npm_config_port || 80 // 端口