大屏产品中心-改成访问演示

2026-01-05 10:59:45 +08:00 · 2026-01-05 10:59:45 +08:00 · 4ad7d27634
parent 5bb63eeab5
commit 4ad7d27634
13 changed files with 589 additions and 139 deletions
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@ -1,7 +1,15 @@
 import router from '@/router'
 import { MessageBox } from 'element-ui'
 import { login, logout, getInfo } from '@/api/login'
-import { getToken, setToken, removeToken,setPermissions,removePermissions, } from '@/utils/auth'
+import {
+  getToken,
+  setToken,
+  removeToken,
+  setPermissions,
+  removePermissions,
+  setUserName,
+  removeUserName,
+} from '@/utils/auth'
 import { isHttp, isEmpty } from '@/utils/validate'
 import defAva from '@/assets/images/profile.jpg'
 import { encryptWithSM4 } from '@/utils/sm'
@ -56,6 +64,7 @@ const user = {
                    .then((res) => {
                        setToken(res.token)
                        setPermissions(res.authorities)
+                        setUserName(userInfo.username.trim())
                        commit('SET_TOKEN', res.token)
                        resolve()
                    })
@ -144,6 +153,7 @@ const user = {
                        commit('SET_PERMISSIONS', [])
                        removeToken()
                        removePermissions()
+                        removeUserName()
                        resolve()
                    })
                    .catch((error) => {
@ -158,6 +168,7 @@ const user = {
                commit('SET_TOKEN', '')
                removeToken()
                removePermissions()
+                removeUserName()
                resolve()
            })
        },
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@ -4,6 +4,8 @@ const TokenKey = 'Admin-Token'

 const Permissions = '0'

+const UserName = 'Admin-UserName'
+
 export function getToken() {
  return Cookies.get(TokenKey)
 }
@ -28,3 +30,15 @@ export function setPermissions(permissions) {
 export function removePermissions() {
  return Cookies.remove(Permissions)
 }
+
+export function getUserName() {
+  return Cookies.get(UserName)
+}
+
+export function setUserName( name){
+  return Cookies.set(UserName, name)
+}
+
+export function removeUserName() {
+  return Cookies.remove(UserName)
+}
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -76,9 +76,9 @@ service.interceptors.request.use(
                    requestObj.time - s_time < interval &&
                    s_url === requestObj.url
                ) {
-                    const message = '数据正在处理，请勿重复提交'
-                    console.warn(`[${s_url}]: ` + message)
-                    return Promise.reject(new Error(message))
+                    // const message = '数据正在处理，请勿重复提交'
+                    // console.warn(`[${s_url}]: ` + message)
+                    // return Promise.reject(new Error(message))
                } else {
                    cache.session.setJSON('sessionObj', requestObj)
                }
--- a/src/utils/request_formdata.js
+++ b/src/utils/request_formdata.js
@ -85,9 +85,9 @@ service.interceptors.request.use(
                    requestObj.time - s_time < interval &&
                    s_url === requestObj.url
                ) {
-                    const message = '数据正在处理，请勿重复提交'
-                    console.warn(`[${s_url}]: ` + message)
-                    return Promise.reject(new Error(message))
+                    // const message = '数据正在处理，请勿重复提交'
+                    // console.warn(`[${s_url}]: ` + message)
+                    // return Promise.reject(new Error(message))
                } else {
                    cache.session.setJSON('sessionObj', requestObj)
                }
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@ -37,7 +37,7 @@ export function isHttp(url) {
 * @returns {Boolean}
 */
 export function isExternal(path) {
-  return /^(https?:|mailto:|tel:)/.test(path)
+  return /^(http?:|mailto:|tel:)/.test(path)
 }

 /**
@ -54,7 +54,7 @@ export function validUsername(str) {
 * @returns {Boolean}
 */
 export function validURL(url) {
-  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  const reg = /^(http?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return reg.test(url)
 }

--- a/src/views/publicService/components/navBar2.vue
+++ b/src/views/publicService/components/navBar2.vue
@ -0,0 +1,400 @@
+<template>
+    <div class="header_new">
+        <div class="header-content">
+            <div class="header-left">
+                <!--                <div class="logo-section" @click="handleLogoClick">-->
+                <div class="logo-section">
+                    <img
+                        src="../../../assets/logo/logo.png"
+                        alt="Logo"
+                        class="logo"
+                    />
+                    <span class="platform-title">{{ platformTitle }}</span>
+                </div>
+            </div>
+
+            <div class="header-nav">
+                <div
+                    class="nav-item"
+                    :key="item.routePath"
+                    v-for="item in navItems"
+                    @click="handleNavClick(item)"
+                    :class="{ active: activeNav === item.routePath }"
+                >
+                    <img :src="item.icon" :alt="item.label" class="nav-icon" />
+                    <span class="nav-text">{{ item.label }}</span>
+                </div>
+            </div>
+
+            <div v-if="showRightSection" class="header-right">
+                <div
+                    v-if="showSearch && activeNav !== 'DocCenter'"
+                    class="search-box"
+                >
+                    <input
+                        v-model="internalSearchKeyword"
+                        type="text"
+                        placeholder="输入关键词搜索"
+                        class="search-input"
+                        @keyup.enter="handleSearch"
+                    />
+                    <button class="search-btn" @click="handleSearch">
+                        <i class="el-icon-search"></i>
+                    </button>
+                </div>
+            </div>
+
+            <el-dropdown
+                trigger="hover"
+                class="avatar-container right-menu-item hover-effect"
+            >
+                <div class="avatar-wrapper">
+                    <img :src="avatar" class="user-avatar" />
+                </div>
+                <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item @click.native="handleLogoClick">
+                        后台管理
+                    </el-dropdown-item>
+                    <el-dropdown-item divided @click.native="logout">
+                        <span>退出登录</span>
+                    </el-dropdown-item>
+                </el-dropdown-menu>
+            </el-dropdown>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { getPermissions } from '../../../utils/auth'
+
+export default {
+    name: 'NavBar',
+    props: {
+        logoUrl: {
+            type: String,
+            default: '/img/psp/productCenter/logo.png',
+        },
+        platformTitle: {
+            type: String,
+            default: '公共服务平台',
+        },
+        showRightSection: {
+            type: Boolean,
+            default: true,
+        },
+        showSearch: {
+            type: Boolean,
+            default: true,
+        },
+        showUserAvatar: {
+            type: Boolean,
+            default: true,
+        },
+        userAvatar: {
+            type: String,
+            default: '',
+        },
+        searchKeyword: {
+            type: String,
+            default: '',
+        },
+    },
+
+    computed: {
+        ...mapGetters(['avatar']),
+        // 将 activeNav 改为计算属性，根据当前路由自动判断
+        activeNav() {
+            // 根据当前路由名称返回对应的导航项
+            const routeName = this.$route.name
+            const routePath = this.$route.path
+
+            // 匹配路由名称
+            if (routeName) {
+                const matchedItem = this.navItems.find(
+                    (item) => item.routePath === routeName,
+                )
+                if (matchedItem) {
+                    return matchedItem.routePath
+                }
+            }
+
+            // 匹配路由路径
+            if (routePath) {
+                const matchedItem = this.navItems.find((item) =>
+                    routePath.includes(item.routePath.toLowerCase()),
+                )
+                if (matchedItem) {
+                    return matchedItem.routePath
+                }
+            }
+
+            // 默认返回产品中心
+            return 'ProductCenter'
+        },
+        setting: {
+            get() {
+                return this.$store.state.settings.showSettings
+            },
+        },
+        topNav: {
+            get() {
+                return this.$store.state.settings.topNav
+            },
+        },
+    },
+    data() {
+        return {
+            // activeNav: 'ProductCenter', // 默认选中产品中心
+            userAvatarUrl: this.userAvatar,
+            internalSearchKeyword: this.searchKeyword,
+            permissions: getPermissions(),
+            navItems: [
+                {
+                    label: '产品中心',
+                    routePath: 'ProductCenter',
+                    icon: require('../../../assets/images/productCenter/products.png'),
+                },
+                /*{
+                    label: '公共组件',
+                    routePath: 'CommonCom',
+                    icon: require('../../../assets/images/productCenter/components.png'),
+                },*/
+                {
+                    label: '宣传物料',
+                    routePath: 'ProMaterials',
+                    icon: require('../../../assets/images/productCenter/materials.png'),
+                },
+                /*{
+                    label: '文档中心',
+                    routePath: 'DocCenter',
+                    icon: require('../../../assets/images/productCenter/docs.png'),
+                },*/
+            ],
+        }
+    },
+    watch: {
+        $route() {
+            // 路由变化时会自动更新 activeNav 计算属性
+        },
+        searchKeyword(newVal) {
+            this.internalSearchKeyword = newVal
+        },
+        userAvatar(newVal) {
+            this.userAvatarUrl = newVal
+        },
+        internalSearchKeyword(newVal) {
+            // 当搜索关键词变化时，实时通知父组件
+            this.$emit('update:searchKeyword', newVal)
+        },
+    },
+    methods: {
+        handleNavClick(item) {
+            // this.activeNav = item.routePath
+            this.$router.push({
+                name: item.routePath,
+            })
+        },
+        handleSearch() {
+            console.log('执行搜索:', this.internalSearchKeyword)
+
+            // 发送搜索事件给父组件
+            this.$emit('search', this.internalSearchKeyword.trim())
+        },
+
+        // 跳转后台
+        handleLogoClick() {
+            if (this.permissions.includes(2)) {
+                this.$router.push('/')
+            } else {
+                // 提示没有权限
+                this.$message.error('没有后台权限，请联系管理员')
+            }
+        },
+
+        logout() {
+            this.$confirm('确定注销并退出系统吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            })
+                .then(() => {
+                    this.$store.dispatch('LogOut').then(() => {
+                        location.href =
+                            process.env.VUE_APP_ENV === 'production'
+                                ? '/pubSerPlatform/index'
+                                : '/index'
+                    })
+                })
+                .catch(() => {})
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.header_new {
+    background-image: url('../../../assets/images/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;
+    //cursor: pointer;
+    cursor: context-menu;
+}
+
+.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);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .header-content {
+        flex-direction: column;
+        gap: 12px;
+        padding: 16px;
+    }
+
+    .header-nav {
+        gap: 16px;
+    }
+
+    .search-input {
+        width: 150px;
+    }
+}
+
+.avatar-container {
+    margin-right: 0px;
+    padding-right: 0px;
+
+    .avatar-wrapper {
+        margin-top: 10px;
+        position: relative;
+
+        .user-avatar {
+            cursor: pointer;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+        }
+
+        .user-nickname {
+            position: relative;
+            bottom: 10px;
+            font-size: 14px;
+            font-weight: bold;
+        }
+
+        .el-icon-caret-bottom {
+            cursor: pointer;
+            position: absolute;
+            right: -20px;
+            top: 25px;
+            font-size: 12px;
+        }
+    }
+}
+</style>
--- a/src/views/publicService/index.vue
+++ b/src/views/publicService/index.vue
@ -1,7 +1,15 @@
 <template>
  <div class="platform-container">
    <!-- 使用导航栏组件 -->
+    <NavBar2
+      v-if="isDemoUser"
+      @search="handleSearch"
+      :searchKeyword.sync="searchKeyword"
+      :showSearch="showSearch"
+    />
+
    <NavBar
+      v-else
      @search="handleSearch"
      :searchKeyword.sync="searchKeyword"
      :showSearch="showSearch"
@ -17,17 +25,32 @@
 <script>
 // 引入导航栏组件
 import NavBar from './components/navBar.vue'
+// 引入导航栏组件
+import NavBar2 from './components/navBar2.vue'
+
+import {getUserName} from '../../utils/auth'

 export default {
  name: 'PublicService',
  components: {
    NavBar,
+    NavBar2
  },
  data() {
    return {
-      searchKeyword: '' // 搜索关键词
+      searchKeyword: '', // 搜索关键词
+      isDemoUser: false // 新增状态
    }
  },
+
+  mounted() {
+    const userName = getUserName();
+    // 判断用户名不能为空
+    if (userName) {
+      this.isDemoUser = userName.includes('演示')
+    }
+  },
+
  computed: {
    // 根据路由元信息控制搜索框显示
    showSearch() {
--- a/src/views/publicService/index_1.vue
+++ b/src/views/publicService/index_1.vue
@ -6,6 +6,7 @@ export default {
    name: 'PublicService_1',
    mounted() {
      const permissions = getPermissions();
+      console.log("检查权限值",permissions);
      // 检查权限值，根据权限进行跳转
      if (permissions) {
        // 将权限字符串转换为数组
--- a/src/views/publicService/proMaterials/index.vue
+++ b/src/views/publicService/proMaterials/index.vue
@ -12,7 +12,7 @@
        {{ item.label }}
      </div>

-      <div class="category-section">
+<!--      <div class="category-section">
        <div class="section-title">分类</div>
        <div class="checkbox-item">
          <el-checkbox
@ -33,7 +33,7 @@
            产品视频
          </el-checkbox>
        </div>
-      </div>
+      </div>-->

    </div>

--- a/src/views/publicService/productCenter/index.vue
+++ b/src/views/publicService/productCenter/index.vue
@ -147,10 +147,10 @@ export default {
      } else if (!url.startsWith('http://') && !url.startsWith('https://')) {
        // 如果 URL 不是以 http:// 或 https:// 开头，则添加 https://
        if (url.startsWith('www.')) {
-          url = 'https://' + url
+          url = 'http://' + url
        } else {
-          // 其他情况，添加 https://
-          url = 'https://' + url
+          // 其他情况，添加 http://
+          url = 'http://' + url
        }
      }
      window.open(url, '_blank')
--- a/src/views/publicService/productCenter/index_old.vue
+++ b/src/views/publicService/productCenter/index_old.vue
@ -121,12 +121,12 @@ export default {
            let url = service.linkUrl
            // 如果 URL 不是以 http:// 或 https:// 开头，则添加 https://
            if (!url.startsWith('http://') && !url.startsWith('https://')) {
-                // 如果 URL 以 www. 开头，直接添加 https://
+                // 如果 URL 以 www. 开头，直接添加 http://
                if (url.startsWith('www.')) {
-                    url = 'https://' + url
+                    url = 'http://' + url
                } else {
-                    // 其他情况，添加 https://
-                    url = 'https://' + url
+                    // 其他情况，添加 http://
+                    url = 'http://' + url
                }
            }

--- a/src/views/publicService/productCenter/product-detail.vue
+++ b/src/views/publicService/productCenter/product-detail.vue
@ -235,10 +235,10 @@ export default {
      } else if (!url.startsWith('http://') && !url.startsWith('https://')) {
        // 如果 URL 不是以 http:// 或 https:// 开头，则添加 https://
        if (url.startsWith('www.')) {
-          url = 'https://' + url
+          url = 'http://' + url
        } else {
-          // 其他情况，添加 https://
-          url = 'https://' + url
+          // 其他情况，添加 http://
+          url = 'http://' + url
        }
      }

--- a/vue.config.js
+++ b/vue.config.js
@ -8,7 +8,7 @@ function resolve(dir) {
 const CompressionPlugin = require('compression-webpack-plugin')

 const name = process.env.VUE_APP_TITLE || '博诺思公共微服务平台' // 网页标题
-const baseUrl = 'http://192.168.0.38:58080' // 后端接口
+const baseUrl = 'http://192.168.0.50:58080/bnscloud/' // 后端接口d

 const port = process.env.port || process.env.npm_config_port || 80 // 端口

@ -37,6 +37,7 @@ module.exports = {
      [process.env.VUE_APP_BASE_API]: {
        // target: 'http://192.168.0.7:58080/bnscloud',  // 产线环境
        target: 'http://192.168.0.14:1999/bnscloud', // 测试环境
+        // target: 'http://192.168.0.50:58080/bnscloud', // 本地环境
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '',