123

ruoyi-screen/src/utils/mallPie2d.js

@@ -0,0 +1,161 @@
+/** 大屏 2D 环形饼图（渐变 + 中心汇总 + 悬停放大，交易销售/畜牧资源等复用） */
+
+export const MALL_PIE_COLORS = [
+  '#5ef0c8',
+  '#ecd27b',
+  '#6eb5ff',
+  '#22a85a',
+  '#c9a227',
+  '#8b7cf6',
+  '#ffb88c',
+  '#3d7dd8'
+]
+
+const MALL_PIE_LEGEND = {
+  type: 'scroll',
+  orient: 'vertical',
+  right: 2,
+  top: 'middle',
+  height: '72%',
+  itemWidth: 8,
+  itemHeight: 8,
+  itemGap: 5,
+  pageIconColor: '#5ef0c8',
+  pageIconInactiveColor: '#4a6b62',
+  pageTextStyle: { color: '#a8d4c8', fontSize: 9 },
+  textStyle: { color: '#a8d4c8', fontSize: 9 }
+}
+
+const MALL_PIE_TOOLTIP = {
+  trigger: 'item',
+  backgroundColor: 'rgba(4, 30, 26, 0.92)',
+  borderColor: 'rgba(61, 217, 176, 0.35)',
+  borderWidth: 1,
+  textStyle: { color: '#e8eef5', fontSize: 11 }
+}
+
+function clampByte(n) {
+  return Math.min(255, Math.max(0, Math.round(n)))
+}
+
+function tintHex(hex, ratio) {
+  const h = String(hex || '').replace('#', '')
+  if (h.length !== 6) {
+    return hex
+  }
+  const r = parseInt(h.slice(0, 2), 16)
+  const g = parseInt(h.slice(2, 4), 16)
+  const b = parseInt(h.slice(4, 6), 16)
+  const target = ratio >= 0 ? 255 : 0
+  const p = Math.abs(ratio)
+  const nr = clampByte(r + (target - r) * p)
+  const ng = clampByte(g + (target - g) * p)
+  const nb = clampByte(b + (target - b) * p)
+  return `#${nr.toString(16).padStart(2, '0')}${ng.toString(16).padStart(2, '0')}${nb.toString(16).padStart(2, '0')}`
+}
+
+function pieSliceStyle(color) {
+  return {
+    color: {
+      type: 'linear',
+      x: 0.2,
+      y: 0,
+      x2: 0.85,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: tintHex(color, 0.42) },
+        { offset: 0.45, color },
+        { offset: 1, color: tintHex(color, -0.28) }
+      ]
+    },
+    borderRadius: 6,
+    borderColor: 'rgba(4, 30, 26, 0.85)',
+    borderWidth: 2,
+    shadowBlur: 14,
+    shadowColor: 'rgba(0, 0, 0, 0.38)'
+  }
+}
+
+/** 2D 环形饼图（渐变 + 中心汇总 + 悬停放大） */
+export function buildMallPie2DOption(data, opts = {}) {
+  const {
+    colors = MALL_PIE_COLORS,
+    legend = {},
+    summaryTitle = '',
+    summarySubtext = '',
+    tooltipFormatter,
+    center = ['36%', '50%'],
+    radius = ['46%', '70%']
+  } = opts
+
+  const pieData = data.map((item, i) => {
+    const base = colors[i % colors.length]
+    return {
+      name: item.name,
+      value: item.value,
+      itemStyle: pieSliceStyle(base)
+    }
+  })
+
+  const hasSummary = summaryTitle !== ''
+  const centerLabelFormatter = () => `{title|${summaryTitle}}\n{sub|${summarySubtext}}`
+  const centerLabel = hasSummary
+    ? {
+        show: true,
+        position: 'center',
+        silent: true,
+        formatter: (params) => (params.dataIndex === 0 ? centerLabelFormatter() : ''),
+        rich: {
+          title: { color: '#5ef0c8', fontSize: 14, fontWeight: 700, lineHeight: 20 },
+          sub: { color: '#a8d4c8', fontSize: 9, lineHeight: 14 }
+        }
+      }
+    : { show: false }
+
+  return {
+    color: colors,
+    tooltip: {
+      ...MALL_PIE_TOOLTIP,
+      formatter: tooltipFormatter
+    },
+    legend: {
+      ...MALL_PIE_LEGEND,
+      data: data.map((d) => d.name),
+      ...legend
+    },
+    series: [
+      {
+        type: 'pie',
+        radius,
+        center,
+        minAngle: 4,
+        avoidLabelOverlap: true,
+        padAngle: 1.5,
+        itemStyle: {
+          shadowBlur: 10,
+          shadowColor: 'rgba(0, 0, 0, 0.35)'
+        },
+        emphasis: {
+          scale: true,
+          scaleSize: 12,
+          label: hasSummary
+            ? {
+                show: true,
+                position: 'center',
+                silent: true,
+                formatter: centerLabelFormatter,
+                rich: centerLabel.rich
+              }
+            : { show: false },
+          itemStyle: {
+            shadowBlur: 22,
+            shadowColor: 'rgba(94, 240, 200, 0.42)'
+          }
+        },
+        label: centerLabel,
+        labelLine: { show: false },
+        data: pieData
+      }
+    ]
+  }
+}

ruoyi-screen/src/views/epidemicRisk/chartOptions.js

@@ -197,7 +197,18 @@ export function buildSampleSourceBarOption(sampleSourceStats) {
   const maxVal = Math.max(...values, 1)
   return {
     color: ['#ecd27b'],
-    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter: (params) => {
+        const items = Array.isArray(params) ? params : [params]
+        const row = items.find((p) => p.seriesName === '检测量')
+        if (!row) {
+          return ''
+        }
+        return `${row.name}<br/>检测量: ${row.value}`
+      }
+    },
     grid: { left: 72, right: 48, top: 8, bottom: 8, containLabel: false },
     xAxis: {
       type: 'value',
@@ -545,7 +556,7 @@ export function buildRiskFactorRadarOption(riskFactorWeights) {
   const items = riskFactorWeights.items
   const indicators = items.map((item) => ({
     name: item.factorName,
-    max: 100
+    max: 1
   }))
   const values = items.map((item) => Number(item.weight ?? 0))
   return {
@@ -562,13 +573,18 @@ export function buildRiskFactorRadarOption(riskFactorWeights) {
     series: [
       {
         type: 'radar',
+        symbol: 'none',
+        emphasis: {
+          symbol: 'none',
+          lineStyle: { color: '#5ef0c8' }
+        },
         data: [
           {
             value: values,
             name: '权重',
+            symbol: 'none',
             areaStyle: { color: 'rgba(94, 240, 200, 0.25)' },
-            lineStyle: { color: '#5ef0c8' },
-            itemStyle: { color: '#5ef0c8' }
+            lineStyle: { color: '#5ef0c8' }
           }
         ]
       }

ruoyi-screen/src/views/epidemicRisk/index.vue

@@ -43,8 +43,13 @@
               class="er-weather__cell"
               :class="'er-weather__cell--' + item.key"
             >
-              <span class="er-weather__val">{{ item.value }}</span>
-
+              <ScreenScrollNumber
+                v-if="item.numeric"
+                class="er-weather__val"
+                :value="item.rawValue"
+                :format="item.format"
+              />
+              <span v-else class="er-weather__val">{{ item.value }}</span>
             </div>
           </div>
         </div>
@@ -209,6 +214,7 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import ScreenChart from '@/components/ScreenChart.vue'
+import ScreenScrollNumber from '@/components/ScreenScrollNumber.vue'
 import { getEpidemicRiskDashboard, getEpidemicRiskReports } from '@/api/epidemicRisk'
 import { getBaqingWeather, parseWinMeterToMs } from '@/api/weather'
 import {
@@ -290,24 +296,54 @@ const weatherDisplay = computed(() => {
   return { tem: tem === '—' ? tem : `${tem}°C`, range }
 })
 
+function isNumericWeatherValue(val) {
+  if (val === null || val === undefined || val === '') {
+    return false
+  }
+  const text = String(val).trim()
+  if (text === '—' || text === '--' || text === '-') {
+    return false
+  }
+  return !Number.isNaN(Number(text))
+}
+
+function weatherNumberFormat(val) {
+  const n = Number(val)
+  if (Number.isNaN(n)) {
+    return 'int'
+  }
+  return Number.isInteger(n) ? 'int' : 'area'
+}
+
 const weatherMetrics = computed(() => {
   const w = weather.value
   if (!w) {
     return []
   }
-  const humidity = w.humidity != null && w.humidity !== '' ? String(w.humidity) : '—'
-  const rain =
-    w.rain_pcpn != null && w.rain_pcpn !== '' ? String(w.rain_pcpn) : '0'
-  const uv =
-    w.uvIndex != null && w.uvIndex !== '' ? String(w.uvIndex) : '—'
+  const humidity =
+    w.humidity != null && w.humidity !== '' ? String(w.humidity).replace(/%$/, '') : '—'
+  const rain = w.rain_pcpn != null && w.rain_pcpn !== '' ? String(w.rain_pcpn) : '0'
+  const uv = w.uvIndex != null && w.uvIndex !== '' ? String(w.uvIndex) : '—'
+  const speed = parseWinMeterToMs(w.win_meter)
+  const tem = w.tem != null && w.tem !== '' ? String(w.tem) : '—'
+  const win = w.win || '—'
+
   return [
-    { key: 'win', label: '风向', value: w.win || '—' },
-    { key: 'speed', label: '风速', value: parseWinMeterToMs(w.win_meter) },
-    { key: 'uv', label: '光照强度', value: uv },
-    { key: 'humidity', label: '空气湿度', value: humidity.replace(/%$/, '') || '—' },
-    { key: 'rain', label: '时降雨量', value: rain },
-    { key: 'tem', label: '空气温度', value: w.tem != null && w.tem !== '' ? w.tem : '—' }
-  ]
+    { key: 'win', value: win },
+    { key: 'speed', value: speed },
+    { key: 'uv', value: uv },
+    { key: 'humidity', value: humidity || '—' },
+    { key: 'rain', value: rain },
+    { key: 'tem', value: tem }
+  ].map((item) => {
+    const numeric = item.key !== 'win' && isNumericWeatherValue(item.value)
+    return {
+      ...item,
+      numeric,
+      rawValue: numeric ? Number(item.value) : null,
+      format: numeric ? weatherNumberFormat(item.value) : 'int'
+    }
+  })
 })
 
 function formatNum(val) {
@@ -657,6 +693,19 @@ onUnmounted(() => {
   text-overflow: ellipsis;
   text-shadow: 0 0 10px rgba(69, 240, 184, 0.35);
 }
+
+.er-weather__val :deep(.screen-scroll-number) {
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-shadow: inherit;
+}
+
+.er-weather__val :deep(.screen-scroll-number__strip),
+.er-weather__val :deep(.screen-scroll-number__sep) {
+  color: inherit;
+  text-shadow: inherit;
+}
 .er-weather__cell--speed .er-weather__val {
   right: 25%;
 }

ruoyi-screen/src/views/home/index.vue

@@ -20,25 +20,25 @@
         <div class="top_content">
           <div class="content_1">
             <div class="content_num">
-              <strong>{{ display(overview?.inventoryTotal) }}</strong> 头
+              <ScreenScrollNumber :value="overview?.inventoryTotal" /> 头
             </div>
             <div class="content_title"><div>牦牛存栏总量</div></div>
           </div>
           <div class="content_2">
             <div class="content_num">
-              <strong>{{ display(overview?.annualOutbound) }}</strong> 头
+              <ScreenScrollNumber :value="overview?.annualOutbound" /> 头
             </div>
             <div class="content_title"><div>牦牛年出栏量</div></div>
           </div>
           <div class="content_3">
             <div class="content_num">
-              <strong>{{ display(overview?.pastureCount) }}</strong> 个
+              <ScreenScrollNumber :value="overview?.pastureCount" /> 个
             </div>
             <div class="content_title"><div>牧场数量</div></div>
           </div>
           <div class="content_4">
             <div class="content_num">
-              <strong>{{ display(overview?.grasslandCount) }}</strong> 个
+              <ScreenScrollNumber :value="overview?.grasslandCount" /> 个
             </div>
             <div class="content_title"><div>草场数量</div></div>
           </div>
@@ -46,25 +46,25 @@
         <div class="top_content">
           <div class="content_1">
             <div class="content_num">
-              <strong>{{ displayArea(overview?.grasslandAreaMu) }}</strong> 亩
+              <ScreenScrollNumber :value="overview?.grasslandAreaMu" format="area" /> 亩
             </div>
             <div class="content_title"><div>草场面积</div></div>
           </div>
           <div class="content_2">
             <div class="content_num">
-              <strong>{{ display(overview?.supplierCount) }}</strong> 个
+              <ScreenScrollNumber :value="overview?.supplierCount" /> 个
             </div>
             <div class="content_title"><div>供应商数量</div></div>
           </div>
           <div class="content_3">
             <div class="content_num">
-              <strong>{{ display(overview?.distributorCount) }}</strong> 个
+              <ScreenScrollNumber :value="overview?.distributorCount" /> 个
             </div>
             <div class="content_title"><div>承销商数量</div></div>
           </div>
           <div class="content_4">
             <div class="content_num">
-              <strong>{{ display(overview?.tradeMarketCount) }}</strong> 个
+              <ScreenScrollNumber :value="overview?.tradeMarketCount" /> 个
             </div>
             <div class="content_title"><div>交易市场数量</div></div>
           </div>
@@ -209,6 +209,7 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue'
 import ScreenChart from '@/components/ScreenChart.vue'
+import ScreenScrollNumber from '@/components/ScreenScrollNumber.vue'
 import StandardScrollRow from '@/components/StandardScrollRow.vue'
 import { getHomeDashboard, getHomeStandards } from '@/api/home'
 import {
@@ -291,10 +292,6 @@ function display(val) {
   return formatNum(val)
 }
 
-function displayArea(val) {
-  return formatNum(val, 2)
-}
-
 /** 应用看板主数据 */
 function applyDashboard(data) {
   if (!data) {
@@ -514,6 +511,18 @@ onMounted(() => {
   margin: 10px 0;
 }
 
+.content_num :deep(.screen-scroll-number) {
+  font-size: 20px;
+}
+
+.content_num :deep(.screen-scroll-number__strip),
+.content_num :deep(.screen-scroll-number__sep) {
+  background: linear-gradient(to bottom, #98e9aa, #ecd27b);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
 .content_num strong {
   font-size: 20px;
   background: linear-gradient(to bottom, #98e9aa, #ecd27b);

ruoyi-screen/src/views/livestockResources/chartOptions.js

@@ -1,5 +1,6 @@
 /** 畜牧资源大屏 ECharts 配置（对齐 doc/大屏/畜牧资源 技术方案） */
 import 'echarts-wordcloud'
+import { buildMallPie2DOption } from '@/utils/mallPie2d'
 
 const AXIS_LABEL = { color: '#9fb0c3', fontSize: 10 }
 const AXIS_LINE = { lineStyle: { color: 'rgba(61, 217, 176, 0.35)' } }
@@ -154,47 +155,36 @@ export function buildUserStructureOption(userStructure) {
   }
 }
 
-/** 提问分类占比 — 饼图 */
+/** 提问分类占比 — 2D 环形饼图（对齐交易销售店铺入驻样式） */
 export function buildCategoryShareOption(categoryShare) {
   const items = categoryShare?.items || []
   const data = items
-    .map((item, i) => ({
-      name: item.categoryName || item.categoryCode,
-      value: item.count ?? 0,
-      itemStyle: { color: PIE_COLORS[i % PIE_COLORS.length] }
+    .filter((item) => (item.count ?? 0) > 0)
+    .map((item) => ({
+      name: item.categoryName || item.categoryCode || '未分类',
+      value: item.count ?? 0
     }))
   if (!data.length) {
     return emptyOption('暂无分类数据')
   }
-  return {
-    ...chartBase(),
-    tooltip: {
-      trigger: 'item',
-      formatter: (p) => {
-        const row = items.find((it) => (it.categoryName || it.categoryCode) === p.name)
-        const ratio = row?.ratio != null ? `${Number(row.ratio).toFixed(1)}%` : `${p.percent}%`
-        return `${p.name}<br/>${p.value} 条 (${ratio})`
-      }
-    },
-    series: [
-      {
-        type: 'pie',
-        radius: ['0%', '62%'],
-        center: ['50%', '54%'],
-        label: {
-          color: '#e8eef5',
-          fontSize: 9,
-          formatter: (p) => {
-            const row = items.find((it) => (it.categoryName || it.categoryCode) === p.name)
-            const ratio = row?.ratio != null ? Number(row.ratio).toFixed(1) : p.percent
-            return `${p.name}\n${ratio}%`
-          }
-        },
-        labelLine: { length: 6, length2: 4 },
-        data
-      }
-    ]
+  const total =
+    categoryShare?.totalAskerMessages ?? data.reduce((sum, item) => sum + item.value, 0)
+  if (!(total > 0)) {
+    return emptyOption('暂无分类数据')
   }
+  return buildMallPie2DOption(data, {
+    summaryTitle: String(total),
+    summarySubtext: '提问量(条)',
+    legend: {
+      formatter: (name) => (name.length > 6 ? `${name.slice(0, 5)}…` : name),
+      itemGap: 4
+    },
+    tooltipFormatter: (p) => {
+      const row = items.find((it) => (it.categoryName || it.categoryCode || '未分类') === p.name)
+      const ratio = row?.ratio != null ? `${Number(row.ratio).toFixed(1)}%` : `${p.percent}%`
+      return `${p.name}<br/>${p.value} 条 (${ratio})`
+    }
+  })
 }
 
 /** 模型调用分析 — 分类条数柱图 */

ruoyi-screen/src/views/livestockResources/index.vue

@@ -14,7 +14,11 @@
           >
             <div class="content_title"><div>{{ item.label }}</div></div>
             <div class="content_num">
-              <strong class="content_num__value">{{ item.value }}</strong>
+              <ScreenScrollNumber
+                class="content_num__value"
+                :value="item.rawValue"
+                :format="item.format"
+              />
               <span v-if="item.unit" class="content_num__unit">{{ item.unit }}</span>
             </div>
           </div>
@@ -138,6 +142,7 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue'
 import ScreenChart from '@/components/ScreenChart.vue'
+import ScreenScrollNumber from '@/components/ScreenScrollNumber.vue'
 import { getLivestockResourceDashboard } from '@/api/livestockResources'
 import {
   buildActivityTrendOption,
@@ -176,18 +181,19 @@ const wordCloudOption = computed(() => buildWordCloudOption(topKeywords.value))
 const overviewItems = computed(() => {
   const o = overview.value
   return [
-    { key: 'totalUsers', label: '累计使用用户', unit: '人', value: display(o?.totalUsers) },
-    { key: 'todayActiveUsers', label: '今日活跃用户', unit: '人', value: display(o?.todayActiveUsers) },
-    { key: 'todayNewUsers', label: '日新增用户', unit: '人', value: display(o?.todayNewUsers) },
-    { key: 'totalSessions', label: '累计会话数', unit: '次', value: display(o?.totalSessions) },
-    { key: 'todaySessions', label: '今日会话数', unit: '次', value: display(o?.todaySessions) },
-    { key: 'totalQuestionCount', label: '累计提问量', unit: '次', value: display(o?.totalQuestionCount) },
-    { key: 'todayQuestionCount', label: '今日提问量', unit: '次', value: display(o?.todayQuestionCount) },
+    { key: 'totalUsers', label: '累计使用用户', unit: '人', rawValue: o?.totalUsers, format: 'int' },
+    { key: 'todayActiveUsers', label: '今日活跃用户', unit: '人', rawValue: o?.todayActiveUsers, format: 'int' },
+    { key: 'todayNewUsers', label: '日新增用户', unit: '人', rawValue: o?.todayNewUsers, format: 'int' },
+    { key: 'totalSessions', label: '累计会话数', unit: '次', rawValue: o?.totalSessions, format: 'int' },
+    { key: 'todaySessions', label: '今日会话数', unit: '次', rawValue: o?.todaySessions, format: 'int' },
+    { key: 'totalQuestionCount', label: '累计提问量', unit: '次', rawValue: o?.totalQuestionCount, format: 'int' },
+    { key: 'todayQuestionCount', label: '今日提问量', unit: '次', rawValue: o?.todayQuestionCount, format: 'int' },
     {
       key: 'avgResponseSeconds',
       label: '平均响应时长',
       unit: '秒',
-      value: displaySeconds(o?.avgResponseSeconds)
+      rawValue: o?.avgResponseSeconds,
+      format: 'area'
     }
   ]
 })
@@ -220,17 +226,6 @@ function display(val) {
   return formatNum(val)
 }
 
-function displaySeconds(val) {
-  if (val === null || val === undefined || val === '') {
-    return '0'
-  }
-  const n = Number(val)
-  if (Number.isNaN(n)) {
-    return '0'
-  }
-  return n.toLocaleString('zh-CN', { minimumFractionDigits: 0, maximumFractionDigits: 1 })
-}
-
 function formatRatio(val) {
   const n = Number(val)
   if (Number.isNaN(n)) {
@@ -481,6 +476,22 @@ onMounted(() => {
   color: transparent;
 }
 
+.content_num :deep(.screen-scroll-number) {
+  flex: 1;
+  min-width: 0;
+  justify-content: flex-end;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.content_num :deep(.screen-scroll-number__strip),
+.content_num :deep(.screen-scroll-number__sep) {
+  background: linear-gradient(to bottom, #98e9aa, #ecd27b);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
 .content_num__unit {
   flex-shrink: 0;
   font-size: 11px;

ruoyi-screen/src/views/tradeSales/chartOptions.js

@@ -1,5 +1,7 @@
 /** 交易销售大屏 ECharts 配置（对齐 doc/交易销售 设计稿） */
 
+import { buildMallPie2DOption } from '@/utils/mallPie2d'
+
 const AXIS_LABEL = { color: '#9fb0c3', fontSize: 10 }
 const AXIS_LINE = { lineStyle: { color: 'rgba(61, 217, 176, 0.35)' } }
 const SPLIT_LINE = { lineStyle: { color: 'rgba(61, 217, 176, 0.12)' } }
@@ -286,7 +288,6 @@ export function buildQualityGradePieOption(qualityGrade) {
   }
 }
 
-const MALL_PIE_COLOR = ['#5ef0c8', '#ecd27b', '#6eb5ff', '#0f8f72', '#c9a227', '#8b7cf6']
 const MALL_BAR_COLOR = ['#5ef0c8', '#6eb5ff', '#ecd27b', '#0f8f72', '#c9a227']
 const WORD_COLORS = ['#5ef0c8', '#ecd27b', '#6eb5ff', '#98e9aa', '#0f8f72', '#c9a227']
 const MALL_UNAVAILABLE_TEXT = '商城统计未接入'
@@ -298,7 +299,7 @@ function resolveMallEmptyText(mallStatsAvailable, defaultText = '暂无数据')
   return defaultText
 }
 
-/** 农资品类销售占比 — 饼图 */
+/** 农资品类销售占比 — 2D 环形饼图 */
 export function buildCategorySalesPieOption(categorySales, mallStatsAvailable = true) {
   if (mallStatsAvailable === false) {
     return emptyOption(MALL_UNAVAILABLE_TEXT)
@@ -308,42 +309,26 @@ export function buildCategorySalesPieOption(categorySales, mallStatsAvailable =
   }
   const data = categorySales.items
     .filter((item) => (item.qty ?? 0) > 0)
-    .map((item, i) => ({
+    .map((item) => ({
       name: item.categoryName || '未分类',
-      value: item.qty ?? 0,
-      itemStyle: { color: MALL_PIE_COLOR[i % MALL_PIE_COLOR.length] }
+      value: item.qty ?? 0
     }))
   if (!data.length) {
     return emptyOption('暂无品类数据')
   }
-  return {
-    tooltip: {
-      trigger: 'item',
-      formatter: (p) => {
-        const row = categorySales.items.find((it) => (it.categoryName || '未分类') === p.name)
-        const ratio = row?.ratio != null ? `${Number(row.ratio).toFixed(1)}%` : `${p.percent}%`
-        return `${p.name}: ${p.value} (${ratio})`
-      }
+  const totalQty = categorySales.totalQty ?? data.reduce((sum, d) => sum + d.value, 0)
+  return buildMallPie2DOption(data, {
+    summaryTitle: String(totalQty),
+    summarySubtext: '总销量(件)',
+    legend: {
+      formatter: (name) => (name.length > 6 ? `${name.slice(0, 5)}…` : name)
     },
-    series: [
-      {
-        type: 'pie',
-        radius: ['0%', '62%'],
-        center: ['50%', '52%'],
-        label: {
-          color: '#e8eef5',
-          fontSize: 9,
-          formatter: (p) => {
-            const row = categorySales.items.find((it) => (it.categoryName || '未分类') === p.name)
-            const ratio = row?.ratio != null ? Number(row.ratio).toFixed(1) : p.percent
-            return `${p.name}\n${ratio}%`
-          }
-        },
-        labelLine: { length: 6, length2: 4 },
-        data
-      }
-    ]
-  }
+    tooltipFormatter: (p) => {
+      const row = categorySales.items.find((it) => (it.categoryName || '未分类') === p.name)
+      const ratio = row?.ratio != null ? `${Number(row.ratio).toFixed(1)}%` : `${p.percent}%`
+      return `${p.name}<br/>${p.value} 件 (${ratio})`
+    }
+  })
 }
 
 /** 商城订单趋势 — 曲线 */
@@ -389,7 +374,7 @@ export function buildMallOrderTrendOption(mallOrderTrend, mallStatsAvailable = t
   }
 }
 
-/** 店铺入驻 — 饼图（按月占比） */
+/** 店铺入驻 — 2D 环形饼图（按月占比） */
 export function buildShopEntryPieOption(shopEntry, mallStatsAvailable = true) {
   if (mallStatsAvailable === false) {
     return emptyOption(MALL_UNAVAILABLE_TEXT)
@@ -399,42 +384,24 @@ export function buildShopEntryPieOption(shopEntry, mallStatsAvailable = true) {
   }
   const data = shopEntry.items
     .filter((item) => (item.shopCount ?? 0) > 0)
-    .map((item, i) => ({
+    .map((item) => ({
       name: `${item.month}月`,
-      value: item.shopCount ?? 0,
-      itemStyle: { color: MALL_PIE_COLOR[i % MALL_PIE_COLOR.length] }
+      value: item.shopCount ?? 0
     }))
   if (!data.length) {
     return emptyOption('暂无入驻数据')
   }
-  return {
-    tooltip: {
-      trigger: 'item',
-      formatter: (p) => {
-        const row = shopEntry.items.find((it) => `${it.month}月` === p.name)
-        const ratio = row?.ratio != null ? `${Number(row.ratio).toFixed(1)}%` : `${p.percent}%`
-        return `${p.name}: ${p.value}家 (${ratio})`
-      }
-    },
-    series: [
-      {
-        type: 'pie',
-        radius: ['0%', '62%'],
-        center: ['50%', '52%'],
-        label: {
-          color: '#e8eef5',
-          fontSize: 9,
-          formatter: (p) => {
-            const row = shopEntry.items.find((it) => `${it.month}月` === p.name)
-            const ratio = row?.ratio != null ? Number(row.ratio).toFixed(1) : p.percent
-            return `${p.name}\n${ratio}%`
-          }
-        },
-        labelLine: { length: 6, length2: 4 },
-        data
-      }
-    ]
-  }
+  const yearTotal = shopEntry.yearTotal ?? data.reduce((sum, d) => sum + d.value, 0)
+  return buildMallPie2DOption(data, {
+    summaryTitle: String(yearTotal),
+    summarySubtext: '年入驻(家)',
+    legend: { itemGap: 4 },
+    tooltipFormatter: (p) => {
+      const row = shopEntry.items.find((it) => `${it.month}月` === p.name)
+      const ratio = row?.ratio != null ? `${Number(row.ratio).toFixed(1)}%` : `${p.percent}%`
+      return `${p.name}<br/>${p.value} 家 (${ratio})`
+    }
+  })
 }
 
 /** 消费区域排名 Top5 — 柱图（万元） */

ruoyi-screen/src/views/tradeSales/index.vue

@@ -38,7 +38,13 @@
           >
             <div class="content_title"><div>{{ item.label }}</div></div>
             <div class="content_num">
-              <strong class="content_num__value">{{ item.value }}</strong>
+              <strong v-if="item.placeholder" class="content_num__value">—</strong>
+              <ScreenScrollNumber
+                v-else
+                class="content_num__value"
+                :value="item.rawValue"
+                :format="item.format"
+              />
               <span v-if="item.unit" class="content_num__unit">{{ item.unit }}</span>
             </div>
           </div>
@@ -164,6 +170,7 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import ScreenChart from '@/components/ScreenChart.vue'
+import ScreenScrollNumber from '@/components/ScreenScrollNumber.vue'
 import { getTradeSalesDashboard } from '@/api/tradeSales'
 import {
   buildCategorySalesPieOption,
@@ -246,42 +253,48 @@ const tradeOverviewItems = computed(() => {
       key: 'orderCount',
       label: '牦牛交易订单数',
       unit: '单',
-      value: display(o?.orderCount),
+      rawValue: o?.orderCount,
+      format: 'int',
       placeholder: false
     },
     {
       key: 'tradeHeads',
       label: '牦牛交易量',
       unit: '头',
-      value: display(o?.tradeHeads),
+      rawValue: o?.tradeHeads,
+      format: 'int',
       placeholder: false
     },
     {
       key: 'tradeAmount',
       label: '牦牛交易总额',
       unit: '元',
-      value: displayAmount(o?.tradeAmount),
+      rawValue: o?.tradeAmount,
+      format: 'money',
       placeholder: false
     },
     {
       key: 'supplierCount',
       label: '入驻商铺数',
       unit: '家',
-      value: display(o?.supplierCount),
+      rawValue: o?.supplierCount,
+      format: 'int',
       placeholder: false
     },
     {
       key: 'agriOrderCount',
       label: '农资订单量',
       unit: '单',
-      value: displayAgriCount(o?.agriOrderCount),
+      rawValue: o?.agriOrderCount,
+      format: 'int',
       placeholder: o?.agriOrderCount == null
     },
     {
       key: 'agriSalesAmount',
       label: '农资销售额',
       unit: '元',
-      value: displayAgriAmount(o?.agriSalesAmount),
+      rawValue: o?.agriSalesAmount,
+      format: 'money',
       placeholder: o?.agriSalesAmount == null
     }
   ]
@@ -298,35 +311,6 @@ function formatNum(val) {
   return n.toLocaleString('zh-CN')
 }
 
-function display(val) {
-  return formatNum(val)
-}
-
-function displayAmount(val) {
-  if (val === null || val === undefined || val === '') {
-    return '0'
-  }
-  const n = Number(val)
-  if (Number.isNaN(n)) {
-    return '0'
-  }
-  return n.toLocaleString('zh-CN', { minimumFractionDigits: 0, maximumFractionDigits: 2 })
-}
-
-function displayAgriCount(val) {
-  if (val === null || val === undefined) {
-    return '—'
-  }
-  return display(val)
-}
-
-function displayAgriAmount(val) {
-  if (val === null || val === undefined) {
-    return '—'
-  }
-  return displayAmount(val)
-}
-
 function formatPrice(val) {
   if (val === null || val === undefined || val === '') {
     return '—'
@@ -710,6 +694,22 @@ onUnmounted(() => {
   color: transparent;
 }
 
+.content_num :deep(.screen-scroll-number) {
+  flex: 1;
+  min-width: 0;
+  justify-content: flex-end;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.content_num :deep(.screen-scroll-number__strip),
+.content_num :deep(.screen-scroll-number__sep) {
+  background: linear-gradient(to bottom, #98e9aa, #ecd27b);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
 .content_num__unit {
   flex-shrink: 0;
   font-size: 12px;

ruoyi-ui-app/api/livestockResource.js

@@ -8,3 +8,12 @@ export function listLivestockResource(params) {
     params
   })
 }
+
+/** 畜牧资源详情（id + sourceType：1 医疗 / 2 科技） */
+export function getLivestockResourceDetail(id, sourceType) {
+  return request({
+    url: `/app/livestockResource/${id}`,
+    method: 'GET',
+    params: { type: sourceType }
+  })
+}

ruoyi-ui-app/locale/bo.js

@@ -256,6 +256,57 @@ export default {
       t4: 'བརྙན་ཟྭོའི་སློབ་ཚན།'
     }
   },
+  livestockResourceDetailPage: {
+    navTitle: 'ཐོན་ཁུངས་ཞིབ་ཕྲ།',
+    titleFallback: 'ཕྱུགས་རྫས་ཐོན་ཁུངས།',
+    loading: 'འཇུག་བཞིན་པ…',
+    loadFail: 'ཞིབ་ཕྲ་འཇུག་མ་ཐུབ།',
+    notFound: 'ཐོན་ཁུངས་འདི་ཕྱིར་འདོན་ཟིན་པའམ་མེད།',
+    invalidParams: 'ཞབས་ཞུའི་གྲངས་འགོད་ནོར་འདུག',
+    noIntro: 'མདོར་བརྗོད་མེད།',
+    noVideo: 'བརྙན་ཟྭོ་མེད།',
+    videoTitle: 'བརྙན་ཟྭོའི་སློབ་ཚན།',
+    sectionInfo: 'ཞིབ་ཕྲའི་གནས་ཚུལ།',
+    feeUnit: 'ཡུань/སྐར་མ།',
+    affiliatedUnit: 'གཞུང་འབྲེལ་ཚན་པ།',
+    completionUnit: 'ལེགས་གྲུབ་ཚན་པ།',
+    detailAddress: 'ཞིབ་ཕྲའི་ས་གནས།',
+    contactPhone: 'འབྲེལ་གཏུག་ཁ་པར།',
+    personInCharge: 'ཁག་འགན་པ།',
+    teamSize: 'ཚོགས་པའི་ཆེ་ཆུང་།',
+    teamMembers: 'ཚོགས་མི།',
+    establishDate: 'གསར་འཛུགས་དུས་ཚོད།',
+    serviceArea: 'ཞབས་ཞུའི་ཁུལ།',
+    consultModes: 'ནད་གཞིས་ཐབས་ལམ།',
+    feeStandard: 'གཏན་འབབས་གི་ཚད་གཞི།',
+    serviceHours: 'ཞབས་ཞུའི་དུས་ཚོད།',
+    serviceWeekdays: 'ཞབས་ཞུའི་གཟའ་ཉིན།',
+    orgLevel: 'ལས་ཁུངས་རིམ་པ།',
+    equipmentModel: 'ཡོ་བྱད་དཔེ་གཞི།',
+    achievementSummary: 'མཇུག་འབྲས་མདོར་བསྡུས།',
+    keyTechPrinciple: 'གཙོ་བོའི་ལག་རྩལ་གཞི་རྩ།',
+    techAdvantage: 'ལག་རྩལ་ཀུན་ཁྱབ།',
+    researchDirection: 'ཞིབ་འཇུག་ཁ་ཕྱོགས།',
+    instrumentModel: 'ཡོ་བྱད་དཔེ་གཞི།',
+    storageLocation: 'གསོག་འཇོག་ས་གནས།',
+    reservationProcess: 'ཁ་ཆད་རིམ་པ།',
+    borrowFee: 'གཡར་སྤྲོད་རིན།',
+    courseTopic: 'སློབ་ཚན་གཙོ་བོ།',
+    consultMode1: 'གནས་ཚད་ནད་གཞིས།',
+    consultMode2: 'ཁྱིམ་ནད་གཞིས།',
+    consultMode3: 'དྲ་རྒྱུན་ནད་གཞིས།',
+    orgLevel1: 'ནad་ཁang',
+    orgLevel2: 'སbyong་ཁang',
+    weekday: {
+      1: 'གཟའ་ཟླ་བ།',
+      2: 'གཟའ་མིག་དmar',
+      3: 'གཟའ lhag pa',
+      4: 'གཟའ phur bu',
+      5: 'གཟའ pa sangs',
+      6: 'གཟའ spen pa',
+      7: 'གཟའ nyi ma'
+    }
+  },
   agriClassroomPage: {
     navTitle: 'ཞིང་ལག་སློབ་ཁང་།',
     searchPlaceholder: 'ཁྱེད་ཀྱིས་འཚོལ་དགོས་པའི་ཞིང་ལག་སློབ་ཚན་འཚོལ།',

ruoyi-ui-app/locale/zh.js

@@ -249,6 +249,57 @@ export default {
       t4: '视频课程'
     }
   },
+  livestockResourceDetailPage: {
+    navTitle: '资源详情',
+    titleFallback: '畜牧资源',
+    loading: '加载中…',
+    loadFail: '详情加载失败',
+    notFound: '该资源已下线或不存在',
+    invalidParams: '参数无效，无法打开详情',
+    noIntro: '暂无简介',
+    noVideo: '暂无视频',
+    videoTitle: '视频课程',
+    sectionInfo: '详细信息',
+    feeUnit: '元/小时',
+    affiliatedUnit: '隶属单位',
+    completionUnit: '完成单位',
+    detailAddress: '详细地址',
+    contactPhone: '联系电话',
+    personInCharge: '负责人',
+    teamSize: '团队规模',
+    teamMembers: '团队成员',
+    establishDate: '成立时间',
+    serviceArea: '服务区域',
+    consultModes: '接诊方式',
+    feeStandard: '收费标准',
+    serviceHours: '服务时段',
+    serviceWeekdays: '服务周日',
+    orgLevel: '机构级别',
+    equipmentModel: '设备型号',
+    achievementSummary: '成果摘要',
+    keyTechPrinciple: '关键技术原理',
+    techAdvantage: '技术优势',
+    researchDirection: '研究方向',
+    instrumentModel: '仪器型号',
+    storageLocation: '存放位置',
+    reservationProcess: '预约流程',
+    borrowFee: '借用费用',
+    courseTopic: '课程主题',
+    consultMode1: '定点接诊',
+    consultMode2: '上门接诊',
+    consultMode3: '在线接诊',
+    orgLevel1: '诊所',
+    orgLevel2: '医院',
+    weekday: {
+      1: '周一',
+      2: '周二',
+      3: '周三',
+      4: '周四',
+      5: '周五',
+      6: '周六',
+      7: '周日'
+    }
+  },
   agriClassroomPage: {
     navTitle: '农技课堂',
     searchPlaceholder: '搜索您要找的农技课程',

ruoyi-ui-app/package-a/livestock-resource-detail/index.vue

@@ -0,0 +1,414 @@
+<template>
+  <view :class="pageRootClass" class="tab-page lrd-page">
+    <view v-if="loading" class="lrd-state">
+      <text class="text-body lrd-state__txt">{{ $t('livestockResourceDetailPage.loading') }}</text>
+    </view>
+    <view v-else-if="loadError" class="lrd-state">
+      <text class="text-body lrd-state__txt">{{ loadError }}</text>
+    </view>
+    <scroll-view v-else scroll-y class="lrd-scroll" enable-back-to-top>
+      <view class="lrd-inner">
+        <text class="lrd-title">{{ displayTitle }}</text>
+
+        <view class="lrd-meta">
+          <text v-if="typeLabel" class="lrd-meta__tag text-body">{{ typeLabel }}</text>
+          <text v-if="publishTime" class="lrd-meta__date text-body">{{ publishTime }}</text>
+        </view>
+
+        <view v-if="showCoverSection" class="lrd-section">
+          <text class="lrd-section__label text-title">{{ $t('newsDetailPage.coverTitle') }}</text>
+          <view v-if="hasCover" class="lrd-cover-wrap" role="button" @click="onPreviewCover">
+            <image class="lrd-cover" :src="coverSrc" mode="aspectFit" />
+          </view>
+          <text v-else class="text-body lrd-muted">{{ $t('newsDetailPage.noCover') }}</text>
+        </view>
+
+        <view class="lrd-section">
+          <text class="lrd-section__label text-title">{{ $t('newsDetailPage.introTitle') }}</text>
+          <text class="text-body lrd-intro">{{ introText }}</text>
+        </view>
+
+        <view v-if="showVideoSection" class="lrd-section">
+          <text class="lrd-section__label text-title">{{ $t('livestockResourceDetailPage.videoTitle') }}</text>
+          <view v-if="videoSrc" class="lrd-video-wrap">
+            <video
+              class="lrd-video"
+              :src="videoSrc"
+              :poster="hasCover ? coverSrc : ''"
+              controls
+              object-fit="contain"
+              :enable-progress-gesture="true"
+              :show-center-play-btn="true"
+            />
+          </view>
+          <text v-else class="text-body lrd-muted">{{ $t('livestockResourceDetailPage.noVideo') }}</text>
+        </view>
+
+        <view v-if="detailRows.length" class="lrd-section">
+          <text class="lrd-section__label text-title">{{ $t('livestockResourceDetailPage.sectionInfo') }}</text>
+          <view v-for="(row, idx) in detailRows" :key="idx" class="lrd-kv">
+            <text class="lrd-kv__label text-body">{{ row.label }}</text>
+            <text class="lrd-kv__value text-body">{{ row.value }}</text>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+import tabPage from '@/mixins/tabPage'
+import { getLivestockResourceDetail } from '@/api/livestockResource'
+import { resolveResourceUrl } from '@/utils/resourceUrl'
+import {
+  buildLivestockDetailRows,
+  formatPublishTime,
+  resolveDetailCover,
+  resolveDetailVideo
+} from '@/utils/livestockResourceDetail'
+
+const TAB_TYPE_CODES = ['004002', '004006', '004007', '004008']
+const TAB_I18N_KEYS = ['t1', 't2', 't3', 't4']
+
+export default {
+  mixins: [tabPage],
+  data() {
+    return {
+      navTitleKey: 'livestockResourceDetailPage.navTitle',
+      resourceId: '',
+      sourceType: 0,
+      typeCode: '',
+      detail: null,
+      loading: false,
+      loadError: '',
+      coverRaw: '',
+      coverSrc: '',
+      videoSrc: ''
+    }
+  },
+  computed: {
+    displayTitle() {
+      const name = this.detail && (this.detail.resourceName || this.detail.title)
+      return name || this.$t('livestockResourceDetailPage.titleFallback')
+    },
+    typeLabel() {
+      const code = (this.detail && this.detail.resourceType) || this.typeCode
+      const idx = TAB_TYPE_CODES.indexOf(code)
+      if (idx >= 0) {
+        return this.$t(`livestockResourcesPage.tabs.${TAB_I18N_KEYS[idx]}`)
+      }
+      return code || ''
+    },
+    publishTime() {
+      return formatPublishTime(this.detail && this.detail.publishTime)
+    },
+    introText() {
+      return (this.detail && this.detail.introduction) || this.$t('livestockResourceDetailPage.noIntro')
+    },
+    isVideoCourse() {
+      const rt = (this.detail && this.detail.resourceType) || this.typeCode
+      return rt === '004008'
+    },
+    hasCover() {
+      return !!(this.coverRaw || '').trim()
+    },
+    /** 视频课程：封面作 poster，有视频时不单独占一大块封面区 */
+    showCoverSection() {
+      if (!this.hasCover) {
+        return !this.isVideoCourse
+      }
+      if (this.isVideoCourse && this.videoSrc) {
+        return false
+      }
+      return true
+    },
+    showVideoSection() {
+      return this.isVideoCourse
+    },
+    detailRows() {
+      return buildLivestockDetailRows(this.detail, this.sourceType, (key) => this.$t(key))
+    }
+  },
+  onLoad(query) {
+    const q = query || {}
+    this.resourceId = this.decodeQuery(q, 'id')
+    this.typeCode = this.decodeQuery(q, 'typeCode')
+    const st = parseInt(this.decodeQuery(q, 'sourceType'), 10)
+    this.sourceType = st === 1 || st === 2 ? st : 0
+    this.loadDetail()
+  },
+  onShow() {
+    const title = this.displayTitle
+    const p = uni.setNavigationBarTitle({
+      title: title === this.$t('livestockResourceDetailPage.titleFallback') ? this.$t(this.navTitleKey) : title
+    })
+    if (p && typeof p.catch === 'function') {
+      p.catch(() => {})
+    }
+  },
+  methods: {
+    decodeQuery(q, key) {
+      const raw = q && q[key]
+      if (raw == null || raw === '') {
+        return ''
+      }
+      try {
+        return decodeURIComponent(String(raw))
+      } catch (e) {
+        return String(raw)
+      }
+    },
+    loadDetail() {
+      if (!this.resourceId || !this.sourceType) {
+        this.loadError = this.$t('livestockResourceDetailPage.invalidParams')
+        return Promise.resolve()
+      }
+      this.loading = true
+      this.loadError = ''
+      return getLivestockResourceDetail(this.resourceId, this.sourceType)
+        .then((res) => {
+          this.detail = res.data || null
+          if (!this.detail) {
+            this.loadError = this.$t('livestockResourceDetailPage.notFound')
+            return
+          }
+          const cover = resolveDetailCover(this.detail, this.sourceType)
+          this.coverRaw = cover || ''
+          this.coverSrc = cover ? resolveResourceUrl(cover) : ''
+          const video = resolveDetailVideo(this.detail)
+          this.videoSrc = video ? resolveResourceUrl(video) : ''
+          if (this.detail.resourceType) {
+            this.typeCode = this.detail.resourceType
+          }
+          uni.setNavigationBarTitle({ title: this.displayTitle })
+        })
+        .catch((e) => {
+          this.detail = null
+          this.loadError = (e && e.message) || this.$t('livestockResourceDetailPage.loadFail')
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    onPreviewCover() {
+      if (!this.coverSrc) return
+      uni.previewImage({ urls: [this.coverSrc], current: 0 })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/morandi.scss';
+@import '@/styles/tab-page.scss';
+
+.lrd-page {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 100%;
+  box-sizing: border-box;
+  background: $morandi-bg-page;
+}
+
+.lrd-scroll {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+.lrd-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 28rpx;
+  min-width: 0;
+  padding: 40rpx 32rpx 48rpx;
+  box-sizing: border-box;
+}
+
+.lrd-state {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48rpx 24rpx;
+}
+
+.lrd-state__txt {
+  color: $morandi-text-muted;
+  text-align: center;
+}
+
+.lrd-title {
+  display: block;
+  width: 100%;
+  text-align: center;
+  font-size: 38rpx;
+  font-weight: 700;
+  line-height: 1.45;
+  color: #111827;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.lrd-meta {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx 20rpx;
+  width: 100%;
+}
+
+.lrd-meta__tag {
+  padding: 6rpx 16rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+  line-height: 1.4;
+  color: #15803d;
+  background: rgba(34, 197, 94, 0.12);
+  border: 1rpx solid rgba(34, 197, 94, 0.25);
+}
+
+.lrd-meta__date {
+  font-size: 24rpx;
+  line-height: 1.5;
+  color: $morandi-text-muted;
+}
+
+.lrd-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+  min-width: 0;
+  padding: 24rpx;
+  box-sizing: border-box;
+  border-radius: 16rpx;
+  background: $morandi-bg-card;
+  border: 1rpx solid $morandi-border;
+}
+
+.lrd-section__label {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: $morandi-text;
+}
+
+.lrd-muted {
+  font-size: 26rpx;
+  line-height: 1.5;
+  color: $morandi-text-muted;
+}
+
+.lrd-intro {
+  font-size: 28rpx;
+  line-height: 1.65;
+  color: $morandi-text-secondary;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.lrd-cover-wrap {
+  width: 100%;
+  max-width: 480rpx;
+  height: 280rpx;
+  margin: 0 auto;
+  border-radius: 12rpx;
+  overflow: hidden;
+  background: $morandi-bg-card-inner;
+  border: 1rpx solid $morandi-border-soft;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lrd-cover {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.lrd-video-wrap {
+  width: 100%;
+  min-width: 0;
+  border-radius: 12rpx;
+  overflow: hidden;
+  background: #1a1a1a;
+  border: 1rpx solid $morandi-border-soft;
+}
+
+.lrd-video {
+  display: block;
+  width: 100%;
+  height: 360rpx;
+  background: #1a1a1a;
+}
+
+.lrd-kv {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 16rpx;
+  min-width: 0;
+  padding: 14rpx 0;
+  border-top: 1rpx solid $morandi-border-soft;
+
+  &:first-of-type {
+    border-top: none;
+    padding-top: 0;
+  }
+
+  &:last-of-type {
+    padding-bottom: 0;
+  }
+}
+
+.lrd-kv__label {
+  flex-shrink: 0;
+  width: 168rpx;
+  font-size: 24rpx;
+  line-height: 1.55;
+  color: $morandi-text-soft;
+}
+
+.lrd-kv__value {
+  flex: 1;
+  min-width: 0;
+  font-size: 26rpx;
+  line-height: 1.55;
+  color: $morandi-text;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.lrd-page.lang-bo {
+  .lrd-title {
+    font-size: 34rpx;
+    line-height: 1.75;
+    letter-spacing: 2rpx;
+    font-family: 'Noto Sans Tibetan', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  }
+
+  .lrd-meta__tag,
+  .lrd-meta__date,
+  .lrd-intro,
+  .lrd-muted,
+  .lrd-kv__label,
+  .lrd-kv__value {
+    font-size: 22rpx;
+    line-height: 1.75;
+    letter-spacing: 2rpx;
+    font-family: 'Noto Sans Tibetan', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  }
+
+  .lrd-section__label {
+    font-size: 28rpx;
+    line-height: 1.75;
+    letter-spacing: 2rpx;
+    font-family: 'Noto Sans Tibetan', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  }
+}
+</style>

ruoyi-ui-app/package-a/livestock-resources/index.vue

@@ -48,7 +48,7 @@
           <template #default="{ item }">
             <view class="lr-row-cell">
               <view class="lr-row" :style="{ height: rowBodyPx + 'px' }">
-                <view class="lr-row__left" role="button" @click="openNewsDetail(item)">
+                <view class="lr-row__left" role="button" @click="openResourceDetail(item)">
                   <text class="lr-row__title">{{ item.title }}</text>
                   <text class="text-body lr-row__summary">{{ item.introduction || $t('livestockResourcesPage.noIntro') }}</text>
                   <view class="lr-row__meta">
@@ -85,7 +85,6 @@ import ULazyLoad from 'uview-plus/components/u-lazy-load/u-lazy-load.vue'
 import UVirtualList from 'uview-plus/components/u-virtual-list/u-virtual-list.vue'
 import tabPage from '@/mixins/tabPage'
 import { resolveResourceUrl } from '@/utils/resourceUrl'
-import { putNewsDetailPayload } from '@/utils/newsDetailCache'
 import { listLivestockResource } from '@/api/livestockResource'
 
 /** Tab 与资源类型编码（§1.2） */
@@ -100,7 +99,7 @@ const ROW_GAP_RPX = 20
 /** lr-body 上下 padding（16 + 24 rpx） */
 const LR_BODY_PAD_RPX = 40
 const COVER = '/static/ai/hero.png'
-const NEWS_DETAIL_PATH = '/package-a/news-detail/index'
+const LIVESTOCK_DETAIL_PATH = '/package-a/livestock-resource-detail/index'
 
 export default {
   components: {
@@ -191,12 +190,16 @@ export default {
     if (this._searchTimer) clearTimeout(this._searchTimer)
   },
   methods: {
-    mapResourceRow(row, index) {
+    mapResourceRow(row) {
+      const resourceId = row.id
+      const sourceType = row.sourceType
       const type = row.type || ''
       const publishTime = row.publishTime || ''
       const title = row.title || ''
       return {
-        id: `${type}-${publishTime}-${index}-${title}`,
+        id: `${sourceType}-${resourceId}`,
+        resourceId,
+        sourceType,
         title,
         introduction: row.introduction || '',
         type,
@@ -231,12 +234,11 @@ export default {
       if (titleKw) {
         params.title = titleKw
       }
-      const baseIndex = reset ? 0 : this.articles.length
       return listLivestockResource(params)
         .then((res) => {
           const rows = res.rows || []
           this.listTotal = res.total != null ? Number(res.total) : 0
-          const mapped = rows.map((row, i) => this.mapResourceRow(row, baseIndex + i))
+          const mapped = rows.map((row) => this.mapResourceRow(row))
           this.articles = reset ? mapped : this.articles.concat(mapped)
           this.$nextTick(() => {
             this.calcLayoutHeights()
@@ -360,33 +362,17 @@ export default {
       if (!url) return
       uni.previewImage({ urls: [url], current: 0 })
     },
-    openNewsDetail(item) {
-      const payload = {
-        title: item.title || '',
-        introduction: item.introduction || '',
-        type: item.type || '',
-        typeLabel: this.tabTitle(item.type),
-        coverFileUrl: item.coverFileUrl || '',
-        contentFileUrl: item.contentFileUrl || '',
-        publishTime: item.publishTime || '',
-        listKind: 'livestock'
-      }
-      const cacheKey = putNewsDetailPayload(payload)
-      let url = `${NEWS_DETAIL_PATH}?kind=livestock`
-      if (cacheKey) {
-        url += `&cacheKey=${encodeURIComponent(cacheKey)}`
-      } else {
-        url += [
-          `&title=${encodeURIComponent(payload.title)}`,
-          `&date=${encodeURIComponent(payload.publishTime)}`,
-          `&type=${encodeURIComponent(payload.type)}`,
-          `&typeLabel=${encodeURIComponent(payload.typeLabel)}`,
-          `&introduction=${encodeURIComponent(payload.introduction)}`,
-          `&coverFileUrl=${encodeURIComponent(payload.coverFileUrl)}`,
-          `&contentFileUrl=${encodeURIComponent(payload.contentFileUrl)}`
-        ].join('')
+    openResourceDetail(item) {
+      if (!item || item.resourceId == null || !item.sourceType) {
+        uni.showToast({ title: this.$t('livestockResourceDetailPage.invalidParams'), icon: 'none' })
+        return
       }
-      uni.navigateTo({ url })
+      const q = [
+        `id=${encodeURIComponent(String(item.resourceId))}`,
+        `sourceType=${encodeURIComponent(String(item.sourceType))}`,
+        `typeCode=${encodeURIComponent(item.type || '')}`
+      ].join('&')
+      uni.navigateTo({ url: `${LIVESTOCK_DETAIL_PATH}?${q}` })
     },
     onTabsChange(_item, index) {
       this.tabCurrentIndex = typeof index === 'number' ? index : this.tabCurrentIndex

ruoyi-ui-app/pages.json

@@ -113,6 +113,12 @@
             "disableScroll": true
           }
         },
+        {
+          "path": "livestock-resource-detail/index",
+          "style": {
+            "navigationBarTitleText": "资源详情"
+          }
+        },
         {
           "path": "agri-classroom/index",
           "style": {

ruoyi-ui-app/pages/mine/index.vue

@@ -82,7 +82,7 @@ export default {
     return {
       navTitleKey: 'nav.mine',
       menuRows: [
-        { id: 'editProfile', icon: 'edit-pen', titleKey: 'minePage.editProfile' },
+        // { id: 'editProfile', icon: 'edit-pen', titleKey: 'minePage.editProfile' },
         // { id: 'orders', icon: 'order', titleKey: 'minePage.myOrders' },
         { id: 'booking', icon: 'calendar', titleKey: 'minePage.myBooking' },
         { id: 'enroll', icon: 'file-text', titleKey: 'minePage.myEnrollment' },

ruoyi-ui-app/utils/livestockResourceDetail.js

@@ -0,0 +1,165 @@
+/** 畜牧资源详情展示辅助（对接 GET /app/livestockResource/{id}?type=1|2） */
+
+const CONSULT_MODE_KEYS = {
+  1: 'consultMode1',
+  2: 'consultMode2',
+  3: 'consultMode3'
+}
+
+const ORG_LEVEL_KEYS = {
+  1: 'orgLevel1',
+  2: 'orgLevel2'
+}
+
+function isEmpty(val) {
+  if (val == null) return true
+  if (typeof val === 'string') return val.trim() === ''
+  if (Array.isArray(val)) return !val.length
+  return false
+}
+
+function pickText(val) {
+  if (val == null) return ''
+  return String(val).trim()
+}
+
+export function formatPublishTime(val) {
+  const s = pickText(val)
+  if (!s) return ''
+  return s.length >= 10 ? s.slice(0, 10) : s
+}
+
+export function formatWeekdays(raw, list, t) {
+  let days = []
+  if (Array.isArray(list) && list.length) {
+    days = list.map((n) => parseInt(n, 10)).filter((n) => n >= 1 && n <= 7)
+  } else if (!isEmpty(raw)) {
+    days = String(raw)
+      .split(',')
+      .map((s) => parseInt(s.trim(), 10))
+      .filter((n) => n >= 1 && n <= 7)
+  }
+  if (!days.length) return ''
+  return days.map((n) => t(`livestockResourceDetailPage.weekday.${n}`)).join('、')
+}
+
+export function formatConsultModes(raw, list, t) {
+  let modes = []
+  if (Array.isArray(list) && list.length) {
+    modes = list.map((n) => parseInt(n, 10))
+  } else if (!isEmpty(raw)) {
+    modes = String(raw)
+      .split(',')
+      .map((s) => parseInt(s.trim(), 10))
+      .filter((n) => n >= 1 && n <= 3)
+  }
+  if (!modes.length) return ''
+  return modes
+    .map((n) => {
+      const key = CONSULT_MODE_KEYS[n]
+      return key ? t(`livestockResourceDetailPage.${key}`) : String(n)
+    })
+    .join('、')
+}
+
+function formatMoney(val) {
+  if (val == null || val === '') return ''
+  const n = Number(val)
+  if (Number.isNaN(n)) return pickText(val)
+  return n.toLocaleString('zh-CN', { minimumFractionDigits: 0, maximumFractionDigits: 2 })
+}
+
+function formatServiceHours(start, end) {
+  const s = pickText(start)
+  const e = pickText(end)
+  if (s && e) return `${s} - ${e}`
+  return s || e || ''
+}
+
+function pushRow(rows, label, value) {
+  const v = pickText(value)
+  if (!v) return
+  rows.push({ label, value: v })
+}
+
+/**
+ * @param {object} d 详情 data
+ * @param {number} sourceType 1 医疗 / 2 科技
+ * @param {(key:string)=>string} t i18n
+ */
+export function buildLivestockDetailRows(d, sourceType, t) {
+  if (!d) return []
+  const rows = []
+  const rt = pickText(d.resourceType)
+  const prefix = 'livestockResourceDetailPage'
+
+  if (sourceType === 1) {
+    pushRow(rows, t(`${prefix}.affiliatedUnit`), d.affiliatedUnit)
+    pushRow(rows, t(`${prefix}.detailAddress`), d.detailAddress)
+    pushRow(rows, t(`${prefix}.contactPhone`), d.contactPhone)
+    pushRow(rows, t(`${prefix}.personInCharge`), d.personInCharge)
+    pushRow(rows, t(`${prefix}.teamSize`), d.teamSize != null ? String(d.teamSize) : '')
+    pushRow(rows, t(`${prefix}.teamMembers`), d.teamMembers)
+    if (d.establishDate) {
+      pushRow(rows, t(`${prefix}.establishDate`), formatPublishTime(d.establishDate))
+    }
+    pushRow(rows, t(`${prefix}.serviceArea`), d.serviceArea)
+    pushRow(rows, t(`${prefix}.consultModes`), formatConsultModes(d.consultModes, d.consultModesList, t))
+    if (d.feeStandard != null && d.feeStandard !== '') {
+      pushRow(rows, t(`${prefix}.feeStandard`), `${formatMoney(d.feeStandard)} ${t(`${prefix}.feeUnit`)}`)
+    }
+    pushRow(rows, t(`${prefix}.serviceHours`), formatServiceHours(d.serviceStartTime, d.serviceEndTime))
+    pushRow(rows, t(`${prefix}.serviceWeekdays`), formatWeekdays(d.serviceWeekdays, d.serviceWeekdaysList, t))
+    if (d.orgLevel != null && ORG_LEVEL_KEYS[d.orgLevel]) {
+      pushRow(rows, t(`${prefix}.orgLevel`), t(`${prefix}.${ORG_LEVEL_KEYS[d.orgLevel]}`))
+    }
+    pushRow(rows, t(`${prefix}.equipmentModel`), d.equipmentModel)
+    return rows
+  }
+
+  pushRow(rows, t(`${prefix}.affiliatedUnit`), d.affiliatedUnit)
+  pushRow(rows, t(`${prefix}.completionUnit`), d.completionUnit)
+  pushRow(rows, t(`${prefix}.contactPhone`), d.contactPhone)
+  pushRow(rows, t(`${prefix}.personInCharge`), d.personInCharge)
+  pushRow(rows, t(`${prefix}.detailAddress`), d.detailAddress)
+  pushRow(rows, t(`${prefix}.serviceArea`), d.serviceArea)
+
+  if (rt === '004006') {
+    pushRow(rows, t(`${prefix}.achievementSummary`), d.achievementSummary)
+    pushRow(rows, t(`${prefix}.keyTechPrinciple`), d.keyTechPrinciple)
+    pushRow(rows, t(`${prefix}.techAdvantage`), d.techAdvantage)
+    pushRow(rows, t(`${prefix}.researchDirection`), d.researchDirection)
+  }
+
+  if (rt === '004007') {
+    pushRow(rows, t(`${prefix}.instrumentModel`), d.instrumentModel)
+    pushRow(rows, t(`${prefix}.storageLocation`), d.storageLocation)
+    pushRow(rows, t(`${prefix}.reservationProcess`), d.reservationProcess)
+    if (d.borrowFee != null && d.borrowFee !== '') {
+      pushRow(rows, t(`${prefix}.borrowFee`), `${formatMoney(d.borrowFee)} ${t(`${prefix}.feeUnit`)}`)
+    }
+    if (d.feeStandard != null && d.feeStandard !== '') {
+      pushRow(rows, t(`${prefix}.feeStandard`), `${formatMoney(d.feeStandard)} ${t(`${prefix}.feeUnit`)}`)
+    }
+    pushRow(rows, t(`${prefix}.serviceHours`), formatServiceHours(d.serviceStartTime, d.serviceEndTime))
+    pushRow(rows, t(`${prefix}.serviceWeekdays`), formatWeekdays(d.serviceWeekdays, d.serviceWeekdaysList, t))
+  }
+
+  if (rt === '004008') {
+    pushRow(rows, t(`${prefix}.courseTopic`), d.courseTopic)
+  }
+
+  return rows
+}
+
+export function resolveDetailCover(d, sourceType) {
+  if (!d) return ''
+  if (sourceType === 1) {
+    return pickText(d.photoFileUrl)
+  }
+  return pickText(d.coverFileUrl) || pickText(d.photoFileUrl)
+}
+
+export function resolveDetailVideo(d) {
+  return pickText(d && d.videoFileUrl)
+}

ruoyi-ui/src/lang/bo/breedingStd.js

@@ -43,6 +43,7 @@ export default {
     tipCover: "jpg/png པར་ཆེ་ཤོས་10MB（འདེམས་ཆ）",
     del: "སུབ་པ།",
     uploadingFile: "ཡིག་ཆ་སྤྲོད་བཞིན་པ།…",
+    syncKbLoading: "ཤེས་མཛོད་དུ་མཉམ་འགྲོས་བཞིན་པ།…",
     uploadingImg: "པར་རིས་སྤྲོད་བཞིན་པ།…",
     errBodyFmt: "ཡིག་ཆའི་རྣམ་གཞག་མི་འགྲིག",
     errComma: "མིང་ལ་ཉིས་སྡེར་མི་ཆོག",

ruoyi-ui/src/lang/bo/techService.js

@@ -16,6 +16,7 @@ export default {
     colCreate: "གསར་བཟོའི་དུས་ཚོད།",
     pickFile: "ཡིག་ཆ་འདེམ",
     uploadingFile: "ཡིག་ཆ་འབེབ་བཞིན...",
+    syncKbLoading: "ཤེས་བྱིས་མཛོད་མཉམ་སྒྲིག་བཞིན...",
     errPhotoFmt: "jpg/jpeg/png རྐྱང་།",
     errPhotoMb: "10MB ལས་མི་འགྲོ།",
     errVideoFmt: "mp4 རྐྱང་།",

ruoyi-ui/src/lang/zh/breedingStd.js

@@ -43,6 +43,7 @@ export default {
     tipCover: "支持 jpg、jpeg、png；单张不超过 10MB（选填）",
     del: "删除",
     uploadingFile: "正在上传文件，请稍候...",
+    syncKbLoading: "正在同步知识库，请稍候...",
     uploadingImg: "正在上传图片，请稍候...",
     errBodyFmt: "文件格式不正确，请上传规定格式的正文附件",
     errComma: "文件名不能包含英文逗号",

ruoyi-ui/src/lang/zh/techService.js

@@ -16,6 +16,7 @@ export default {
     colCreate: "创建时间",
     pickFile: "选取文件",
     uploadingFile: "正在上传文件，请稍候...",
+    syncKbLoading: "正在同步知识库，请稍候...",
     errPhotoFmt: "仅支持 jpg、jpeg、png 格式",
     errPhotoMb: "图片大小不能超过 10 MB",
     errVideoFmt: "仅支持 mp4 格式",

ruoyi-ui/src/mixins/breedingStdLocaleMixin.js

@@ -30,6 +30,22 @@ export default {
         return this.$t("breedingStd.status.kbSynced")
       }
       return this.$t("breedingStd.status.dash")
+    },
+    /** 确认后执行同步知识库，带全局 loading */
+    runSyncKbAfterConfirm(confirmMessage, syncFn) {
+      let syncLoading = false
+      return this.$modal
+        .confirm(confirmMessage)
+        .then(() => {
+          syncLoading = true
+          this.$modal.loading(this.$t("breedingStd.common.syncKbLoading"))
+          return syncFn()
+        })
+        .finally(() => {
+          if (syncLoading) {
+            this.$modal.closeLoading()
+          }
+        })
     }
   }
 }

ruoyi-ui/src/mixins/techServiceLocaleMixin.js

@@ -60,6 +60,22 @@ export default {
       }
       return this.$t("techService.status.dash")
     },
+    /** 确认后执行同步知识库，带全局 loading */
+    runSyncKbAfterConfirm(confirmMessage, syncFn) {
+      let syncLoading = false
+      return this.$modal
+        .confirm(confirmMessage)
+        .then(() => {
+          syncLoading = true
+          this.$modal.loading(this.tsCommon("syncKbLoading"))
+          return syncFn()
+        })
+        .finally(() => {
+          if (syncLoading) {
+            this.$modal.closeLoading()
+          }
+        })
+    },
     knowledgeTopicText(topic) {
       if (topic >= 1 && topic <= 5) {
         return this.$t(`techService.knowledge.topic${topic}`)

ruoyi-ui/src/views/breedingStandards/breedingManage/index.vue

@@ -535,9 +535,7 @@ export default {
       })
     },
     handleSyncKb(row) {
-      this.$modal
-        .confirm(this.stdT("confirmSync"))
-        .then(() => syncKbBreedingStandard(row.id))
+      this.runSyncKbAfterConfirm(this.stdT("confirmSync"), () => syncKbBreedingStandard(row.id))
         .then(() => {
           this.$modal.msgSuccess(this.$t("breedingStd.common.msgSyncOk"))
           this.getList()

ruoyi-ui/src/views/breedingStandards/diseaseTreatment/drugIncompatibility/index.vue

@@ -370,9 +370,7 @@ export default {
       })
     },
     handleSyncKb(row) {
-      this.$modal
-        .confirm(this.stdT("confirmSync"))
-        .then(() => syncKbDrugIncompatibilityStandard(row.id))
+      this.runSyncKbAfterConfirm(this.stdT("confirmSync"), () => syncKbDrugIncompatibilityStandard(row.id))
         .then(() => {
           this.$modal.msgSuccess(this.stdT("msgSyncOk"))
           this.getList()

ruoyi-ui/src/views/breedingStandards/diseaseTreatment/epidemicTreatment/index.vue

@@ -529,9 +529,7 @@ export default {
       })
     },
     handleSyncKb(row) {
-      this.$modal
-        .confirm(this.stdT("confirmSync"))
-        .then(() => syncKbEpidemicTreatmentStandard(row.id))
+      this.runSyncKbAfterConfirm(this.stdT("confirmSync"), () => syncKbEpidemicTreatmentStandard(row.id))
         .then(() => {
           this.$modal.msgSuccess(this.$t("breedingStd.common.msgSyncOk"))
           this.getList()

ruoyi-ui/src/views/breedingStandards/diseaseTreatment/withdrawalPeriod/index.vue

@@ -385,9 +385,7 @@ export default {
       })
     },
     handleSyncKb(row) {
-      this.$modal
-        .confirm(this.stdT("confirmSync"))
-        .then(() => syncKbWithdrawalPeriodStandard(row.id))
+      this.runSyncKbAfterConfirm(this.stdT("confirmSync"), () => syncKbWithdrawalPeriodStandard(row.id))
         .then(() => {
           this.$modal.msgSuccess(this.stdT("msgSyncOk"))
           this.getList()

ruoyi-ui/src/views/breedingStandards/equipmentOperation/index.vue

@@ -532,9 +532,7 @@ export default {
       })
     },
     handleSyncKb(row) {
-      this.$modal
-        .confirm(this.stdT("confirmSync"))
-        .then(() => syncKbEquipmentWorkStandard(row.id))
+      this.runSyncKbAfterConfirm(this.stdT("confirmSync"), () => syncKbEquipmentWorkStandard(row.id))
         .then(() => {
           this.$modal.msgSuccess(this.$t("breedingStd.common.msgSyncOk"))
           this.getList()

ruoyi-ui/src/views/breedingStandards/feeding/index.vue

@@ -530,9 +530,7 @@ export default {
       })
     },
     handleSyncKb(row) {
-      this.$modal
-        .confirm(this.stdT("confirmSync"))
-        .then(() => syncKbFeedingStandard(row.id))
+      this.runSyncKbAfterConfirm(this.stdT("confirmSync"), () => syncKbFeedingStandard(row.id))
         .then(() => {
           this.$modal.msgSuccess(this.$t("breedingStd.common.msgSyncOk"))
           this.getList()

ruoyi-ui/src/views/breedingStandards/growthOutbound/index.vue

@@ -530,9 +530,7 @@ export default {
       })
     },
     handleSyncKb(row) {
-      this.$modal
-        .confirm(this.stdT("confirmSync"))
-        .then(() => syncKbGrowthSlaughterStandard(row.id))
+      this.runSyncKbAfterConfirm(this.stdT("confirmSync"), () => syncKbGrowthSlaughterStandard(row.id))
         .then(() => {
           this.$modal.msgSuccess(this.$t("breedingStd.common.msgSyncOk"))
           this.getList()

ruoyi-ui/src/views/techService/knowledge/index.vue

@@ -372,9 +372,7 @@ export default {
       })
     },
     handleSyncKb(row) {
-      this.$modal
-        .confirm(this.tsT("confirmSync"))
-        .then(() => syncKbKnowledge(row.id))
+      this.runSyncKbAfterConfirm(this.tsT("confirmSync"), () => syncKbKnowledge(row.id))
         .then(() => {
           this.$modal.msgSuccess(this.tsCommon("msgSyncOk"))
           this.getList()

ruoyi-ui/src/views/tool/gen/index.vue

@@ -274,11 +274,18 @@ export default {
     /** 同步数据库操作 */
     handleSynchDb(row) {
       const tableName = row.tableName
-      this.$modal.confirm('确认要强制同步"' + tableName + '"表结构吗？').then(function() {
+      let syncLoading = false
+      this.$modal.confirm('确认要强制同步"' + tableName + '"表结构吗？').then(() => {
+        syncLoading = true
+        this.$modal.loading("正在同步数据库，请稍候...")
         return synchDb(tableName)
       }).then(() => {
         this.$modal.msgSuccess("同步成功")
-      }).catch(() => {})
+      }).catch(() => {}).finally(() => {
+        if (syncLoading) {
+          this.$modal.closeLoading()
+        }
+      })
     },
     /** 打开导入表弹窗 */
     openImportTable() {