refactor(portraitManagement): 重构五边形组组件边框渲染逻辑

合并四边渐变和路径为单个渐变与路径，移除冗余的边渲染函数，简化代码

src/views/portraitManagement/components/PentagonGroup.vue

@@ -8,28 +8,17 @@
     >
       <svg class="pentagon-svg" viewBox="0 0 300 200" preserveAspectRatio="none">
         <defs>
-          <linearGradient :id="`topGradient-${index}`" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" :stop-color="item.edgeGradients?.top?.start || '#0f46fa'" />
-            <stop offset="100%" :stop-color="item.edgeGradients?.top?.end || '#bd03fb'" />
-          </linearGradient>
-          <linearGradient :id="`rightGradient-${index}`" x1="0%" y1="0%" x2="0%" y2="100%">
-            <stop offset="0%" :stop-color="item.edgeGradients?.right?.start || '#bd03fb'" />
-            <stop offset="100%" :stop-color="item.edgeGradients?.right?.end || '#0f46fa'" />
-          </linearGradient>
-          <linearGradient :id="`bottomGradient-${index}`" x1="100%" y1="0%" x2="0%" y2="0%">
-            <stop offset="0%" :stop-color="item.edgeGradients?.bottom?.start || '#0f46fa'" />
-            <stop offset="100%" :stop-color="item.edgeGradients?.bottom?.end || '#bd03fb'" />
-          </linearGradient>
-          <linearGradient :id="`leftGradient-${index}`" x1="0%" y1="100%" x2="0%" y2="0%">
-            <stop offset="0%" :stop-color="item.edgeGradients?.left?.start || '#bd03fb'" />
-            <stop offset="100%" :stop-color="item.edgeGradients?.left?.end || '#0f46fa'" />
-          </linearGradient>
           <linearGradient :id="`bgGradient-${index}`" x1="0%" y1="0%" x2="100%" y2="100%">
             <stop offset="0%" :stop-color="item.bgGradientStart || 'rgba(33,33,58,0.95)'" />
             <stop offset="100%" :stop-color="item.bgGradientEnd || 'rgba(15,70,250,0.15)'" />
           </linearGradient>
+          <linearGradient :id="`borderGradient-${index}`" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" :stop-color="item.edgeGradients?.top?.start || '#0f46fa'" />
+            <stop offset="50%" :stop-color="item.edgeGradients?.right?.start || '#bd03fb'" />
+            <stop offset="100%" :stop-color="item.edgeGradients?.bottom?.start || '#7eff7e'" />
+          </linearGradient>
           <filter :id="`glow-${index}`">
-            <feGaussianBlur stdDeviation="3" result="coloredBlur" />
+            <feGaussianBlur stdDeviation="2" result="coloredBlur" />
             <feMerge>
               <feMergeNode in="coloredBlur" />
               <feMergeNode in="SourceGraphic" />
@@ -41,30 +30,9 @@
           :fill="`url(#bgGradient-${index})`"
         />
         <path
-          :d="getTopEdge(item.vertices, item.isMiddle, index)"
-          :fill="none"
-          :stroke="`url(#topGradient-${index})`"
-          stroke-width="3"
-          :filter="`url(#glow-${index})`"
-        />
-        <path
-          :d="getRightEdge(item.vertices, item.isMiddle, index)"
-          :fill="none"
-          :stroke="`url(#rightGradient-${index})`"
-          stroke-width="3"
-          :filter="`url(#glow-${index})`"
-        />
-        <path
-          :d="getBottomEdge(item.vertices, item.isMiddle, index)"
-          :fill="none"
-          :stroke="`url(#bottomGradient-${index})`"
-          stroke-width="3"
-          :filter="`url(#glow-${index})`"
-        />
-        <path
-          :d="getLeftEdge(item.vertices, item.isMiddle, index)"
-          :fill="none"
-          :stroke="`url(#leftGradient-${index})`"
+          :d="getQuadPath(item.vertices, item.isMiddle, index)"
+          fill="none"
+          :stroke="`url(#borderGradient-${index})`"
           stroke-width="3"
           :filter="`url(#glow-${index})`"
         />
@@ -137,26 +105,6 @@ const getQuadPath = (vertices, isMiddle, index) => {
   const v = getVertices(vertices, isMiddle, index)
   return `M ${v.topLeft.x} ${v.topLeft.y} L ${v.topRight.x} ${v.topRight.y} L ${v.bottomRight.x} ${v.bottomRight.y} L ${v.bottomLeft.x} ${v.bottomLeft.y} Z`
 }
-
-const getTopEdge = (vertices, isMiddle, index) => {
-  const v = getVertices(vertices, isMiddle, index)
-  return `M ${v.topLeft.x} ${v.topLeft.y} L ${v.topRight.x} ${v.topRight.y}`
-}
-
-const getRightEdge = (vertices, isMiddle, index) => {
-  const v = getVertices(vertices, isMiddle, index)
-  return `M ${v.topRight.x} ${v.topRight.y} L ${v.bottomRight.x} ${v.bottomRight.y}`
-}
-
-const getBottomEdge = (vertices, isMiddle, index) => {
-  const v = getVertices(vertices, isMiddle, index)
-  return `M ${v.bottomRight.x} ${v.bottomRight.y} L ${v.bottomLeft.x} ${v.bottomLeft.y}`
-}
-
-const getLeftEdge = (vertices, isMiddle, index) => {
-  const v = getVertices(vertices, isMiddle, index)
-  return `M ${v.bottomLeft.x} ${v.bottomLeft.y} L ${v.topLeft.x} ${v.topLeft.y}`
-}
 </script>
 
 <style lang="scss" scoped>