feat(setting): 重构关于产品弹框排版

- 顶部产品卡展示 Logo、名称、版本、定位与部署标签
- 新增对象画像 / 多源归集 / 关系分析 / 图谱联动能力卡片
- 产品简介与厂商信息分区展示，补充版权信息

ai-electron/frontend/src/core/layouts/default/setting/components/ProductInfoModal.vue

@@ -2,40 +2,76 @@
   <BasicModal
     v-bind="$attrs"
     title="关于产品"
-    :width="760"
+    :width="860"
     :centered="true"
     :showCancelBtn="false"
     @register="registerModal"
     @ok="closeModal"
   >
     <div :class="prefixCls">
-      <div class="product-info__header">
-        <div class="product-info__title">{{ productTitle }}</div>
-        <div class="product-info__version" v-if="appVersion">v{{ appVersion }}</div>
-      </div>
-
-      <div class="product-info__divider"></div>
+      <section class="product-info__hero">
+        <div class="product-info__logo">
+          <img src="/resource/img/logo.png" alt="清鉴" />
+        </div>
+        <div class="product-info__hero-main">
+          <div class="product-info__title-row">
+            <div class="product-info__title">{{ productTitle }}</div>
+            <span v-if="appVersion" class="product-info__version">v{{ appVersion }}</span>
+          </div>
+          <div class="product-info__tagline">智能研判分析平台 · 面向案件研判与专题分析</div>
+          <div class="product-info__chips">
+            <span class="product-info__chip">离线部署</span>
+            <span class="product-info__chip">内网 / 专网</span>
+            <span class="product-info__chip">多源数据融合</span>
+          </div>
+        </div>
+      </section>
 
-      <div class="product-info__meta">
-        <div class="product-info__meta-item">
-          <span class="product-info__meta-label">公司</span>
-          <span class="product-info__meta-value">中数矩阵（成都）科技有限公司</span>
+      <section class="product-info__features">
+        <div v-for="feature in FEATURES" :key="feature.title" class="product-info__feature">
+          <span class="product-info__feature-icon">
+            <component :is="feature.icon" />
+          </span>
+          <div class="product-info__feature-body">
+            <div class="product-info__feature-title">{{ feature.title }}</div>
+            <div class="product-info__feature-desc">{{ feature.desc }}</div>
+          </div>
         </div>
-        <div class="product-info__meta-item">
-          <span class="product-info__meta-label">联系电话</span>
-          <span class="product-info__meta-value">18908093240</span>
+      </section>
+
+      <section class="product-info__section">
+        <div class="product-info__section-title">产品简介</div>
+        <p class="product-info__desc">
+          面向案件研判与专题分析场景，提供图谱分析、通信分析、交易分析、活动轨迹分析等能力，支持案件配置、数据治理、离线地图和基站包本地化配置，便于在内网或专网环境中开展业务工作。
+        </p>
+      </section>
+
+      <section class="product-info__section product-info__section--company">
+        <div class="product-info__section-title">厂商信息</div>
+        <div class="product-info__company-grid">
+          <div class="product-info__company-item">
+            <span class="product-info__company-label">公司</span>
+            <span class="product-info__company-value">中数矩阵（成都）科技有限公司</span>
+          </div>
+          <div class="product-info__company-item">
+            <span class="product-info__company-label">联系电话</span>
+            <span class="product-info__company-value">18908093240</span>
+          </div>
+          <div class="product-info__company-item">
+            <span class="product-info__company-label">官网</span>
+            <span class="product-info__company-value">www.zsjz.com</span>
+          </div>
         </div>
-      </div>
-      <div class="product-info__divider"></div>
-      <div class="product-info__desc">
-        面向案件研判与专题分析场景，提供图谱分析、通信分析、交易分析、活动轨迹分析等能力，支持案件配置、数据治理、离线地图和基站包本地化配置，便于在内网或专网环境中开展业务工作。
-      </div>
+      </section>
+
+      <div class="product-info__copyright">© 2026 中数矩阵（成都）科技有限公司</div>
     </div>
   </BasicModal>
 </template>
 
 <script lang="ts" setup>
   import { computed } from 'vue';
+  import { ApartmentOutlined, DatabaseOutlined, DeploymentUnitOutlined, TeamOutlined } from '@ant-design/icons-vue';
   import { BasicModal, useModalInner } from '@/core/components/Modal';
   import { useDesign } from '@/core/hooks/web/useDesign';
   import { useGlobSetting } from '@/core/hooks/setting';
@@ -48,6 +84,29 @@
 
   const [registerModal, { closeModal }] = useModalInner();
 
+  const FEATURES = [
+    {
+      title: '对象画像',
+      desc: '汇聚人员、账户与行为特征，快速形成研判对象画像。',
+      icon: TeamOutlined,
+    },
+    {
+      title: '多源归集',
+      desc: '资金流水、话单、基站轨迹等异构数据统一接入与治理。',
+      icon: DatabaseOutlined,
+    },
+    {
+      title: '关系分析',
+      desc: '围绕对象与团伙开展多端关联分析和关系挖掘。',
+      icon: ApartmentOutlined,
+    },
+    {
+      title: '图谱联动',
+      desc: '关系图谱与业务视图联动，辅助线索核查与专题研判。',
+      icon: DeploymentUnitOutlined,
+    },
+  ];
+
   const productTitle = computed(() => {
     const cachedTitle = String(userStore.getPageCacheByKey('title', title) || '').trim();
     if (!cachedTitle) return '清鉴线索调查工具';
@@ -61,98 +120,219 @@
   @prefix-cls: ~'jeesite-product-info-modal';
 
   .@{prefix-cls} {
-    .product-info__header {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding-right: 4px;
+
+    .product-info__hero {
+      display: flex;
+      align-items: center;
+      gap: 18px;
+      padding: 20px 22px;
+      background: #f4f8ff;
+      border: 1px solid #dbe7ff;
+      border-radius: 16px;
+    }
+
+    .product-info__logo {
+      display: flex;
+      flex: 0 0 auto;
+      align-items: center;
+      justify-content: center;
+      width: 72px;
+      height: 72px;
+      background: #fff;
+      border: 1px solid #e7edf6;
+      border-radius: 18px;
+      box-shadow: 0 6px 16px rgb(15 23 42 / 6%);
+
+      img {
+        width: 54px;
+        height: 54px;
+        object-fit: contain;
+      }
+    }
+
+    .product-info__hero-main {
+      min-width: 0;
+    }
+
+    .product-info__title-row {
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 10px;
     }
 
     .product-info__title {
+      color: #111827;
       font-size: 26px;
       font-weight: 700;
-      color: #111827;
+      line-height: 1.3;
     }
 
     .product-info__version {
-      font-size: 13px;
-      color: #6b7280;
-      background: #f3f4f6;
-      padding: 2px 12px;
-      border-radius: 20px;
+      padding: 2px 10px;
+      color: #2a50ec;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 20px;
+      background: #eef2ff;
+      border-radius: 10px;
       white-space: nowrap;
     }
 
-    .product-info__divider {
-      height: 1px;
-      background: #e5e7eb;
-      margin: 18px 0;
+    .product-info__tagline {
+      margin-top: 4px;
+      color: #6b7280;
+      font-size: 13px;
+      line-height: 1.6;
     }
 
-    .product-info__meta {
+    .product-info__chips {
       display: flex;
-      flex-direction: column;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 10px;
+    }
+
+    .product-info__chip {
+      padding: 2px 10px;
+      color: #475569;
+      font-size: 12px;
+      line-height: 20px;
+      background: #fff;
+      border: 1px solid #e2e8f0;
+      border-radius: 999px;
+    }
+
+    .product-info__features {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 12px;
     }
 
-    .product-info__meta-item {
+    .product-info__feature {
       display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 14px 16px;
+      background: #f8fafc;
+      border: 1px solid #e5e7eb;
+      border-radius: 12px;
+    }
+
+    .product-info__feature-icon {
+      display: inline-flex;
+      flex: 0 0 auto;
       align-items: center;
-      gap: 16px;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      color: #2a50ec;
+      font-size: 18px;
+      background: #eef2ff;
+      border-radius: 10px;
+    }
+
+    .product-info__feature-body {
+      min-width: 0;
+    }
+
+    .product-info__feature-title {
+      color: #111827;
       font-size: 14px;
-      line-height: 1.6;
+      font-weight: 600;
+      line-height: 1.5;
     }
 
-    .product-info__meta-label {
-      flex-shrink: 0;
-      width: 64px;
-      color: #9ca3af;
+    .product-info__feature-desc {
+      margin-top: 2px;
+      color: #6b7280;
+      font-size: 12px;
+      line-height: 1.65;
+    }
+
+    .product-info__section {
+      padding: 16px 18px;
+      background: #fff;
+      border: 1px solid #e7edf6;
+      border-radius: 14px;
     }
 
-    .product-info__meta-value {
-      color: #374151;
+    .product-info__section--company {
+      background: #f8fbff;
+    }
+
+    .product-info__section-title {
+      margin-bottom: 10px;
+      color: #111827;
+      font-size: 14px;
+      font-weight: 600;
     }
 
     .product-info__desc {
-      margin-bottom: 16px;
-      font-size: 15px;
-      line-height: 1.8;
+      margin: 0;
       color: #475569;
+      font-size: 13px;
+      line-height: 1.85;
     }
 
-    .product-info__list {
+    .product-info__company-grid {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 14px;
+      gap: 10px 20px;
     }
 
-    .product-info__item {
-      min-height: 110px;
-      padding: 18px 20px;
-      background: #f8fafc;
-      border: 1px solid #e5e7eb;
-      border-radius: 14px;
+    .product-info__company-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      min-width: 0;
+      font-size: 13px;
+      line-height: 1.7;
     }
 
-    .product-info__label {
-      margin-bottom: 8px;
-      font-size: 14px;
-      font-weight: 600;
-      color: #111827;
+    .product-info__company-item:first-child {
+      grid-column: 1 / -1;
     }
 
-    .product-info__value {
-      font-size: 16px;
-      line-height: 1.7;
-      color: #475569;
+    .product-info__company-label {
+      flex: 0 0 64px;
+      color: #8a94a6;
+      font-size: 12px;
+    }
+
+    .product-info__company-value {
+      min-width: 0;
+      color: #111827;
       word-break: break-all;
     }
+
+    .product-info__copyright {
+      padding-top: 2px;
+      color: #9ca3af;
+      font-size: 11px;
+      text-align: center;
+    }
   }
 
   @media screen and (max-width: 767px) {
     .@{prefix-cls} {
-      .product-info__list {
+      .product-info__hero {
+        align-items: flex-start;
+        flex-direction: column;
+      }
+
+      .product-info__features,
+      .product-info__company-grid {
         grid-template-columns: 1fr;
       }
+
+      .product-info__company-item:first-child {
+        grid-column: auto;
+      }
     }
   }
 </style>