From 9ea5ff67655241271bdf04bb50ca3a8d60c4e22a Mon Sep 17 00:00:00 2001
From: yuan <123@>
Date: 星期二, 11 八月 2026 15:07:02 +0800
Subject: [PATCH] fix: 用河南鹤壁代码覆盖山西长治
---
src/views/systemArchitecture/index.vue | 270 ++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 192 insertions(+), 78 deletions(-)
diff --git a/src/views/systemArchitecture/index.vue b/src/views/systemArchitecture/index.vue
index a070122..334194f 100644
--- a/src/views/systemArchitecture/index.vue
+++ b/src/views/systemArchitecture/index.vue
@@ -9,7 +9,9 @@
<section class="section-card section-card--top">
<article class="module-title module-title--basic">
<div class="module-title__icon">
- <img :src="jichupeizhi" alt="鍩虹閰嶇疆" />
+ <span class="module-title__icon-shape">
+ <svg-icon icon-class="system" />
+ </span>
</div>
<div class="module-title__text">
<h2>鍩虹閰嶇疆</h2>
@@ -20,9 +22,9 @@
<div class="flow-row flow-row--top">
<template v-for="item in basicFlow" :key="item.key">
<div class="flow-item">
- <article class="flow-node">
+ <article class="flow-node" @click.stop="goPage(item.key)">
<div class="flow-node__icon">
- <img :src="item.icon" :alt="item.name" />
+ <svg-icon :icon-class="item.icon" />
</div>
<span>{{ item.name }}</span>
</article>
@@ -35,7 +37,9 @@
<div class="panel-card panel-card--sale">
<article class="module-title module-title--sale">
<div class="module-title__icon">
- <img :src="xiaoshoupeizhi" alt="閿�鍞厤缃�" />
+ <span class="module-title__icon-shape">
+ <svg-icon icon-class="chart" />
+ </span>
</div>
<div class="module-title__text">
<h2>閿�鍞厤缃�</h2>
@@ -46,9 +50,9 @@
<div class="flow-grid flow-grid--sale">
<template v-for="(item, index) in saleFlow" :key="item.key">
<div class="grid-cell">
- <article class="flow-node">
+ <article class="flow-node" @click.stop="goPage(item.key)">
<div class="flow-node__icon" :class="{ 'flow-node__icon--accent': item.accent }">
- <img :src="item.icon" :alt="item.name" />
+ <svg-icon :icon-class="item.icon" />
</div>
<span>{{ item.name }}</span>
</article>
@@ -66,6 +70,11 @@
</div>
<div class="ai-stage">
+ <div class="ai-stage__connector ai-stage__connector--top"></div>
+ <div class="ai-stage__connector ai-stage__connector--left"></div>
+ <div class="ai-stage__connector ai-stage__connector--right"></div>
+ <div class="ai-stage__connector ai-stage__connector--bottom"></div>
+
<div class="ai-stage__ring">
<div class="ai-stage__core">
<img :src="aiHead" alt="AI 鏍稿績寮曟搸" />
@@ -76,7 +85,9 @@
<div class="panel-card panel-card--purchase">
<article class="module-title module-title--purchase">
<div class="module-title__icon">
- <img :src="caigoupeizhi" alt="閲囪喘閰嶇疆" />
+ <span class="module-title__icon-shape">
+ <svg-icon icon-class="shopping" />
+ </span>
</div>
<div class="module-title__text">
<h2>閲囪喘閰嶇疆</h2>
@@ -87,9 +98,9 @@
<div class="flow-grid flow-grid--purchase">
<template v-for="(item, index) in purchaseFlow" :key="item.key">
<div class="grid-cell">
- <article class="flow-node">
+ <article class="flow-node" @click.stop="goPage(item.key)">
<div class="flow-node__icon" :class="{ 'flow-node__icon--accent': item.accent }">
- <img :src="item.icon" :alt="item.name" />
+ <svg-icon :icon-class="item.icon" />
</div>
<span>{{ item.name }}</span>
</article>
@@ -110,7 +121,9 @@
<section class="section-card section-card--bottom">
<article class="module-title module-title--produce">
<div class="module-title__icon">
- <img :src="shengchanpeizhi" alt="鐢熶骇閰嶇疆" />
+ <span class="module-title__icon-shape">
+ <svg-icon icon-class="build" />
+ </span>
</div>
<div class="module-title__text">
<h2>鐢熶骇閰嶇疆</h2>
@@ -121,9 +134,9 @@
<div class="flow-row flow-row--wide">
<template v-for="(item, index) in produceFlow" :key="item.key">
<div class="flow-item">
- <article class="flow-node">
+ <article class="flow-node" @click.stop="goPage(item.key)">
<div class="flow-node__icon" :class="{ 'flow-node__icon--green': item.green, 'flow-node__icon--accent': item.accent }">
- <img :src="item.icon" :alt="item.name" />
+ <svg-icon :icon-class="item.icon" />
</div>
<span>{{ item.name }}</span>
</article>
@@ -136,7 +149,9 @@
<section class="section-card section-card--bottom">
<article class="module-title module-title--store">
<div class="module-title__icon">
- <img :src="cangchuwuliu" alt="浠撳偍鐗╂祦" />
+ <span class="module-title__icon-shape">
+ <svg-icon icon-class="redis" />
+ </span>
</div>
<div class="module-title__text">
<h2>浠撳偍鐗╂祦</h2>
@@ -147,9 +162,9 @@
<div class="flow-row flow-row--store">
<template v-for="(item, index) in storeFlow" :key="item.key">
<div class="flow-item">
- <article class="flow-node">
+ <article class="flow-node" @click.stop="goPage(item.key)">
<div class="flow-node__icon">
- <img :src="item.icon" :alt="item.name" />
+ <svg-icon :icon-class="item.icon" />
</div>
<span>{{ item.name }}</span>
</article>
@@ -163,77 +178,88 @@
</template>
<script setup>
-import aiHead from '@/assets/system/ai.svg'
-import jichupeizhi from '@/assets/system/jichupeizhi.svg'
-import xiaoshoupeizhi from '@/assets/system/xiaoshoupeizhi.svg'
-import caigoupeizhi from '@/assets/system/caigoupeizhi.svg'
-import shengchanpeizhi from '@/assets/system/shengchanpeizhi.svg'
-import cangchuwuliu from '@/assets/system/cangchuwuliu.svg'
+import { useRouter } from 'vue-router'
+import aiHead from '@/assets/images/head.svg'
-import yonghuguanli from '@/assets/system/yonghuguanli.svg'
-import shenpiguanli from '@/assets/system/shenpiguanli.svg'
-import chanpinweihu from '@/assets/system/chanpinweihu.svg'
+const router = useRouter()
-import kehudangan from '@/assets/system/kehudangan.svg'
-import xiaoshoubaojia from '@/assets/system/xiaoshoubaojia.svg'
-import xiaoshoutaizhang from '@/assets/system/xiaoshoutaizhang.svg'
-import fahuotaizhang from '@/assets/system/fahuotaizhang.svg'
-import xiaoshoutuihuo from '@/assets/system/xiaoshoutuihuo.svg'
+const routeMap = {
+ 'basic-role': '/system/role',
+ 'basic-user': '/system/user',
+ 'basic-post': '/system/post',
+ 'basic-dept': '/system/dept',
+ 'basic-product': '/basicData/product',
+ 'basic-approval': '/collaborativeApproval/approvalManagement',
+ 'sale-customer': '/salesManagement/customerFile',
+ 'sale-quote': '/salesManagement/salesQuotation',
+ 'sale-ledger': '/salesManagement/salesLedger',
+ 'sale-delivery': '/salesManagement/deliveryLedger',
+ 'sale-return': '/salesManagement/returnOrder',
+ 'purchase-supplier': '/procurementManagement/supplierManage',
+ 'purchase-ledger': '/procurementManagement/procurementLedger',
+ 'purchase-return': '/procurementManagement/purchaseReturnOrder',
+ 'purchase-contact': '/procurementManagement/paymentLedger',
+ 'purchase-report': '/procurementManagement/procurementReport',
+ 'produce-process': '/processDesign/productionManagement/productionProcess/index',
+ 'produce-bom': '/processDesign/productionManagement/productStructure/index',
+ 'produce-route': '/processDesign/processRoute',
+ 'produce-order': '/productionManagement/productionOrder',
+ 'produce-schedule': '/productionManagement/productionManagement/workOrderEdit/index',
+ 'produce-work': '/productionManagement/workOrderManagement',
+ 'produce-ledger': '/productionManagement/productionReporting',
+ 'produce-cost': '/productionManagement/productionCosting',
+ 'store-in': '/inventoryManagement/receiptManagement',
+ 'store-out': '/inventoryManagement/dispatchLog',
+ 'store-stock': '/inventoryManagement/stockManagement'
+}
-import gongyingshangdangan from '@/assets/system/gongyingshangdangan.svg'
-import caigoutaizhang from '@/assets/system/caigoutaizhang.svg'
-import caigoutuihuo from '@/assets/system/caigoutuihuo.svg'
-import gongyingshangwanglai from '@/assets/system/gongyingshangwanglai.svg'
-import caigoubaobiao from '@/assets/system/caigoubaobiao.svg'
-
-import gongxu from '@/assets/system/gongxu.svg'
-import BOM from '@/assets/system/BOM.svg'
-import shengchandingdan from '@/assets/system/shengchandingdan.svg'
-import shengchanpaichan from '@/assets/system/shengchanpaichan.svg'
-import baogong from '@/assets/system/baogong.svg'
-import baogongtaizhang from '@/assets/system/baogongtaizhang.svg'
-import shengchanheduan from '@/assets/system/shengchanheduan.svg'
-
-import rukuguanli from '@/assets/system/rukuguanli.svg'
-import chukuguanli from '@/assets/system/chukuguanli.svg'
-import kucunguanli from '@/assets/system/kucunguanli.svg'
+function goPage(key) {
+ const path = routeMap[key]
+ if (path) {
+ router.push(path)
+ }
+}
const basicFlow = [
- { key: 'basic-user', name: '鐢ㄦ埛绠＄悊', icon: yonghuguanli },
- { key: 'basic-approval', name: '瀹℃壒绠＄悊', icon: shenpiguanli },
- { key: 'basic-product', name: '浜у搧缁存姢', icon: chanpinweihu }
+ { key: 'basic-role', name: '瑙掕壊绠＄悊', icon: 'user' },
+ { key: 'basic-user', name: '鐢ㄦ埛绠＄悊', icon: 'peoples' },
+ { key: 'basic-post', name: '宀椾綅绠＄悊', icon: 'tree' },
+ { key: 'basic-dept', name: '閮ㄩ棬绠＄悊', icon: 'tree' },
+ { key: 'basic-product', name: '浜у搧缁存姢', icon: 'table' },
+ { key: 'basic-approval', name: '瀹℃壒绠＄悊', icon: 'form' }
]
const saleFlow = [
- { key: 'sale-customer', name: '瀹㈡埛妗ｆ', icon: kehudangan, arrow: 'right' },
- { key: 'sale-quote', name: '閿�鍞姤浠�', icon: xiaoshoubaojia, arrow: 'right' },
- { key: 'sale-ledger', name: '閿�鍞彴璐�', icon: xiaoshoutaizhang, arrow: 'right' },
- { key: 'sale-delivery', name: '鍙戣揣鍙拌处', icon: fahuotaizhang, arrow: 'right' },
- { key: 'sale-return', name: '閿�鍞��璐�', icon: xiaoshoutuihuo, accent: true }
+ { key: 'sale-customer', name: '瀹㈡埛妗ｆ', icon: 'peoples', arrow: 'right' },
+ { key: 'sale-quote', name: '閿�鍞姤浠�', icon: 'form', arrow: 'right' },
+ { key: 'sale-ledger', name: '閿�鍞彴璐�', icon: 'monitor', arrow: 'right' },
+ { key: 'sale-delivery', name: '鍙戣揣鍙拌处', icon: 'clipboard', arrow: 'right' },
+ { key: 'sale-return', name: '閿�鍞��璐�', icon: 'nested', accent: true }
]
const purchaseFlow = [
- { key: 'purchase-supplier', name: '渚涘簲鍟嗘。妗�', icon: gongyingshangdangan, arrow: 'right' },
- { key: 'purchase-ledger', name: '閲囪喘鍙拌处', icon: caigoutaizhang, arrow: 'right' },
- { key: 'purchase-return', name: '閲囪喘閫�璐�', icon: caigoutuihuo, accent: true },
- { key: 'purchase-contact', name: '渚涘簲鍟嗗線鏉�', icon: gongyingshangwanglai, arrow: 'right' },
- { key: 'purchase-report', name: '閲囪喘鎶ヨ〃', icon: caigoubaobiao }
+ { key: 'purchase-supplier', name: '渚涘簲鍟嗘。妗�', icon: 'people', arrow: 'right' },
+ { key: 'purchase-ledger', name: '閲囪喘鍙拌处', icon: 'monitor', arrow: 'right' },
+ { key: 'purchase-return', name: '閲囪喘閫�璐�', icon: 'nested', accent: true },
+ { key: 'purchase-contact', name: '渚涘簲鍟嗗線鏉�', icon: 'peoples', arrow: 'right' },
+ { key: 'purchase-report', name: '閲囪喘鎶ヨ〃', icon: 'chart' }
]
const produceFlow = [
- { key: 'produce-process', name: '宸ュ簭', icon: gongxu },
- { key: 'produce-bom', name: 'BOM', icon: BOM },
- { key: 'produce-order', name: '鐢熶骇璁㈠崟', icon: shengchandingdan, green: true },
- { key: 'produce-schedule', name: '鐢熶骇鎺掍骇', icon: shengchanpaichan },
- { key: 'produce-work', name: '鐢熶骇鎶ュ伐', icon: baogong },
- { key: 'produce-ledger', name: '鎶ュ伐鍙拌处', icon: baogongtaizhang },
- { key: 'produce-cost', name: '鐢熶骇鏍哥畻', icon: shengchanheduan, accent: true }
+ { key: 'produce-process', name: '宸ュ簭', icon: 'list' },
+ { key: 'produce-bom', name: 'BOM', icon: 'monitor' },
+ { key: 'produce-route', name: '宸ヨ壓璺嚎', icon: 'tree', green: true },
+ { key: 'produce-order', name: '鐢熶骇璁㈠崟', icon: 'peoples', green: true },
+ { key: 'produce-schedule', name: '鐢熶骇鎺掍骇', icon: 'time' },
+ { key: 'produce-work', name: '鐢熶骇鎶ュ伐', icon: 'edit' },
+ { key: 'produce-ledger', name: '鎶ュ伐鍙拌处', icon: 'form' },
+ { key: 'produce-cost', name: '鐢熶骇鏍哥畻', icon: 'money', accent: true }
]
const storeFlow = [
- { key: 'store-in', name: '鍏ュ簱绠＄悊', icon: rukuguanli },
- { key: 'store-out', name: '鍑哄簱绠＄悊', icon: chukuguanli },
- { key: 'store-stock', name: '搴撳瓨绠＄悊', icon: kucunguanli }
+ { key: 'store-in', name: '鍏ュ簱绠＄悊', icon: 'download' },
+ { key: 'store-out', name: '鍑哄簱绠＄悊', icon: 'guide' },
+ { key: 'store-stock', name: '搴撳瓨绠＄悊', icon: 'redis-list' }
]
</script>
@@ -314,15 +340,24 @@
}
.module-title__icon {
- width: 72px;
- height: 72px;
+ width: 44px;
+ height: 50px;
+ position: relative;
display: grid;
place-items: center;
+ transform: translateY(-1px);
+ filter: drop-shadow(0 10px 14px rgba(82, 125, 211, 0.28))
+ drop-shadow(0 4px 8px rgba(82, 125, 211, 0.18));
}
-.module-title__icon img {
+.module-title__icon-shape {
width: 100%;
height: 100%;
+ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+ display: grid;
+ place-items: center;
+ color: #fff;
+ font-size: 18px;
}
.module-title__text h2 {
@@ -338,7 +373,50 @@
color: #7f8ba3;
}
+.module-title--basic .module-title__icon {
+ filter: drop-shadow(0 10px 14px rgba(47, 110, 236, 0.28))
+ drop-shadow(0 4px 8px rgba(47, 110, 236, 0.18));
+}
+.module-title--basic .module-title__icon-shape {
+ background: linear-gradient(135deg, #2069ff 0%, #5bb0ff 100%);
+}
+
+.module-title--sale .module-title__icon {
+ filter: drop-shadow(0 10px 14px rgba(123, 66, 255, 0.24))
+ drop-shadow(0 4px 8px rgba(123, 66, 255, 0.16));
+}
+
+.module-title--sale .module-title__icon-shape {
+ background: linear-gradient(135deg, #7b42ff 0%, #a172ff 100%);
+}
+
+.module-title--purchase .module-title__icon {
+ filter: drop-shadow(0 10px 14px rgba(52, 161, 255, 0.24))
+ drop-shadow(0 4px 8px rgba(52, 161, 255, 0.16));
+}
+
+.module-title--purchase .module-title__icon-shape {
+ background: linear-gradient(135deg, #34a1ff 0%, #66c6ff 100%);
+}
+
+.module-title--produce .module-title__icon {
+ filter: drop-shadow(0 10px 14px rgba(36, 183, 118, 0.24))
+ drop-shadow(0 4px 8px rgba(36, 183, 118, 0.16));
+}
+
+.module-title--produce .module-title__icon-shape {
+ background: linear-gradient(135deg, #24b776 0%, #62d49d 100%);
+}
+
+.module-title--store .module-title__icon {
+ filter: drop-shadow(0 10px 14px rgba(119, 81, 255, 0.24))
+ drop-shadow(0 4px 8px rgba(119, 81, 255, 0.16));
+}
+
+.module-title--store .module-title__icon-shape {
+ background: linear-gradient(135deg, #7751ff 0%, #9b76ff 100%);
+}
.flow-row {
display: flex;
@@ -374,6 +452,7 @@
align-items: center;
gap: 8px;
text-align: center;
+ cursor: pointer;
}
.flow-node__icon {
@@ -383,12 +462,6 @@
place-items: center;
color: #3f76f3;
font-size: 24px;
-}
-
-.flow-node__icon img {
- width: 100%;
- height: 100%;
- object-fit: contain;
}
.flow-node__icon--accent {
@@ -543,6 +616,47 @@
box-shadow: 0 10px 20px rgba(118, 147, 204, 0.08);
}
+.ai-stage__connector {
+ position: absolute;
+ border-color: rgba(145, 181, 247, 0.5);
+ border-style: dashed;
+ border-width: 1px;
+ pointer-events: none;
+}
+
+.ai-stage__connector--top {
+ top: 24px;
+ left: 50%;
+ width: 0;
+ height: 64px;
+ border-left-width: 1px;
+ transform: translateX(-50%);
+}
+
+.ai-stage__connector--left,
+.ai-stage__connector--right {
+ top: 148px;
+ width: 74px;
+ border-top-width: 1px;
+}
+
+.ai-stage__connector--left {
+ left: 18px;
+}
+
+.ai-stage__connector--right {
+ right: 18px;
+}
+
+.ai-stage__connector--bottom {
+ bottom: 32px;
+ left: 50%;
+ width: 0;
+ height: 64px;
+ border-left-width: 1px;
+ transform: translateX(-50%);
+}
+
@media (max-width: 1440px) {
.middle-layout {
grid-template-columns: 1fr 360px 1fr;
--
Gitblit v1.9.3