gaoluyang
10 小时以前 ab264123941cd3d345687af92aab2a9e04968960
src/views/systemArchitecture/index.vue
@@ -9,9 +9,7 @@
      <section class="section-card section-card--top">
        <article class="module-title module-title--basic">
          <div class="module-title__icon">
            <span class="module-title__icon-shape">
              <svg-icon icon-class="system" />
            </span>
            <img :src="jichupeizhi" alt="基础配置" />
          </div>
          <div class="module-title__text">
            <h2>基础配置</h2>
@@ -24,7 +22,7 @@
            <div class="flow-item">
              <article class="flow-node">
                <div class="flow-node__icon">
                  <svg-icon :icon-class="item.icon" />
                  <img :src="item.icon" :alt="item.name" />
                </div>
                <span>{{ item.name }}</span>
              </article>
@@ -37,9 +35,7 @@
        <div class="panel-card panel-card--sale">
          <article class="module-title module-title--sale">
            <div class="module-title__icon">
              <span class="module-title__icon-shape">
                <svg-icon icon-class="chart" />
              </span>
              <img :src="xiaoshoupeizhi" alt="销售配置" />
            </div>
            <div class="module-title__text">
              <h2>销售配置</h2>
@@ -52,7 +48,7 @@
              <div class="grid-cell">
                <article class="flow-node">
                  <div class="flow-node__icon" :class="{ 'flow-node__icon--accent': item.accent }">
                    <svg-icon :icon-class="item.icon" />
                    <img :src="item.icon" :alt="item.name" />
                  </div>
                  <span>{{ item.name }}</span>
                </article>
@@ -70,11 +66,6 @@
        </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 核心引擎" />
@@ -85,9 +76,7 @@
        <div class="panel-card panel-card--purchase">
          <article class="module-title module-title--purchase">
            <div class="module-title__icon">
              <span class="module-title__icon-shape">
                <svg-icon icon-class="shopping" />
              </span>
              <img :src="caigoupeizhi" alt="采购配置" />
            </div>
            <div class="module-title__text">
              <h2>采购配置</h2>
@@ -100,7 +89,7 @@
              <div class="grid-cell">
                <article class="flow-node">
                  <div class="flow-node__icon" :class="{ 'flow-node__icon--accent': item.accent }">
                    <svg-icon :icon-class="item.icon" />
                    <img :src="item.icon" :alt="item.name" />
                  </div>
                  <span>{{ item.name }}</span>
                </article>
@@ -121,9 +110,7 @@
      <section class="section-card section-card--bottom">
        <article class="module-title module-title--produce">
          <div class="module-title__icon">
            <span class="module-title__icon-shape">
              <svg-icon icon-class="build" />
            </span>
            <img :src="shengchanpeizhi" alt="生产配置" />
          </div>
          <div class="module-title__text">
            <h2>生产配置</h2>
@@ -136,7 +123,7 @@
            <div class="flow-item">
              <article class="flow-node">
                <div class="flow-node__icon" :class="{ 'flow-node__icon--green': item.green, 'flow-node__icon--accent': item.accent }">
                  <svg-icon :icon-class="item.icon" />
                  <img :src="item.icon" :alt="item.name" />
                </div>
                <span>{{ item.name }}</span>
              </article>
@@ -149,9 +136,7 @@
      <section class="section-card section-card--bottom">
        <article class="module-title module-title--store">
          <div class="module-title__icon">
            <span class="module-title__icon-shape">
              <svg-icon icon-class="redis" />
            </span>
            <img :src="cangchuwuliu" alt="仓储物流" />
          </div>
          <div class="module-title__text">
            <h2>仓储物流</h2>
@@ -164,7 +149,7 @@
            <div class="flow-item">
              <article class="flow-node">
                <div class="flow-node__icon">
                  <svg-icon :icon-class="item.icon" />
                  <img :src="item.icon" :alt="item.name" />
                </div>
                <span>{{ item.name }}</span>
              </article>
@@ -178,48 +163,77 @@
</template>
<script setup>
import aiHead from '@/assets/images/head.svg'
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 yonghuguanli from '@/assets/system/yonghuguanli.svg'
import shenpiguanli from '@/assets/system/shenpiguanli.svg'
import chanpinweihu from '@/assets/system/chanpinweihu.svg'
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'
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'
const basicFlow = [
  { 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' }
  { key: 'basic-user', name: '用户管理', icon: yonghuguanli },
  { key: 'basic-approval', name: '审批管理', icon: shenpiguanli },
  { key: 'basic-product', name: '产品维护', icon: chanpinweihu }
]
const saleFlow = [
  { 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 }
  { 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 }
]
const purchaseFlow = [
  { 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' }
  { 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 }
]
const produceFlow = [
  { 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 }
  { 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 }
]
const storeFlow = [
  { key: 'store-in', name: '入库管理', icon: 'download' },
  { key: 'store-out', name: '出库管理', icon: 'guide' },
  { key: 'store-stock', name: '库存管理', icon: 'redis-list' }
  { key: 'store-in', name: '入库管理', icon: rukuguanli },
  { key: 'store-out', name: '出库管理', icon: chukuguanli },
  { key: 'store-stock', name: '库存管理', icon: kucunguanli }
]
</script>
@@ -300,24 +314,15 @@
}
.module-title__icon {
  width: 44px;
  height: 50px;
  position: relative;
  width: 72px;
  height: 72px;
  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-shape {
.module-title__icon img {
  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 {
@@ -333,50 +338,7 @@
  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;
@@ -421,6 +383,12 @@
  place-items: center;
  color: #3f76f3;
  font-size: 24px;
}
.flow-node__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.flow-node__icon--accent {
@@ -573,47 +541,6 @@
  font-size: 14px;
  font-weight: 700;
  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) {