phaseIconAssets.js 4.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. // Token → 视觉资源(SVG + PNG)显式映射
  2. //
  3. // 替代旧机制 (require.context 自动收集 SVG + 手写 IMAGE_MAP 加载 PNG)。
  4. // 加新 token 时必须在 phaseIconTokens.js 加 POS_MAP + 这里加 ASSETS, 否则 webpack 编译报错。
  5. //
  6. // 资源约定:
  7. // svg: PhaseDiagram CSS mask-image 用 (必填, 16 个 token 都有)
  8. // png: SignalTimingChart ECharts image 用 (可选, 当前 12 个 token 有, 4 个右转无 PNG fallback 到 svg)
  9. // ─── 北方向 (LT) ───
  10. import straightDown_svg from '@/assets/images/svg/icon_straight_down.svg';
  11. import straightDown_png from '@/assets/images/icon_straight_down.png';
  12. import turnDownLeft_svg from '@/assets/images/svg/icon_turn_down_left.svg';
  13. import turnDownLeft_png from '@/assets/images/icon_turn_down_left.png';
  14. import turnDownLeftU_svg from '@/assets/images/svg/icon_turn_down_left_uturn.svg';
  15. import turnDownLeftU_png from '@/assets/images/icon_turn_down_left_uturn.png';
  16. import turnDownRight_svg from '@/assets/images/svg/icon_turn_down_right.svg';
  17. // 北右转无 png (镜像生成)
  18. // ─── 南方向 (RB) ───
  19. import straightUp_svg from '@/assets/images/svg/icon_straight_up.svg';
  20. import straightUp_png from '@/assets/images/icon_straight_up.png';
  21. import turnUpLeft_svg from '@/assets/images/svg/icon_turn_up_left.svg';
  22. import turnUpLeft_png from '@/assets/images/icon_turn_up_left.png';
  23. import turnUpLeftU_svg from '@/assets/images/svg/icon_turn_up_left_uturn.svg';
  24. import turnUpLeftU_png from '@/assets/images/icon_turn_up_left_uturn.png';
  25. import turnUpRight_svg from '@/assets/images/svg/icon_turn_up_right.svg';
  26. // 南右转无 png
  27. // ─── 东方向 (RT) ───
  28. import straightLeft_svg from '@/assets/images/svg/icon_straight_left.svg';
  29. import straightLeft_png from '@/assets/images/icon_straight_left.png';
  30. import turnLeftDown_svg from '@/assets/images/svg/icon_turn_left_down.svg';
  31. import turnLeftDown_png from '@/assets/images/icon_turn_left_down.png';
  32. import turnLeftDownU_svg from '@/assets/images/svg/icon_turn_left_down_uturn.svg';
  33. import turnLeftDownU_png from '@/assets/images/icon_turn_left_down_uturn.png';
  34. import turnLeftUp_svg from '@/assets/images/svg/icon_turn_left_up.svg';
  35. // 东右转无 png
  36. // ─── 西方向 (LB) ───
  37. import straightRight_svg from '@/assets/images/svg/icon_straight_right.svg';
  38. import straightRight_png from '@/assets/images/icon_straight_right.png';
  39. import turnRightUp_svg from '@/assets/images/svg/icon_turn_right_up.svg';
  40. import turnRightUp_png from '@/assets/images/icon_turn_right_up.png';
  41. import turnRightUpU_svg from '@/assets/images/svg/icon_turn_right_up_uturn.svg';
  42. import turnRightUpU_png from '@/assets/images/icon_turn_right_up_uturn.png';
  43. import turnRightDown_svg from '@/assets/images/svg/icon_turn_right_down.svg';
  44. // 西右转无 png
  45. export const TOKEN_ASSETS = {
  46. // 北方向 (LT)
  47. 'STRAIGHT_DOWN': { svg: straightDown_svg, png: straightDown_png },
  48. 'TURN_DOWN_LEFT': { svg: turnDownLeft_svg, png: turnDownLeft_png },
  49. 'TURN_DOWN_LEFT_UTURN': { svg: turnDownLeftU_svg, png: turnDownLeftU_png },
  50. 'TURN_DOWN_RIGHT': { svg: turnDownRight_svg },
  51. // 南方向 (RB)
  52. 'STRAIGHT_UP': { svg: straightUp_svg, png: straightUp_png },
  53. 'TURN_UP_LEFT': { svg: turnUpLeft_svg, png: turnUpLeft_png },
  54. 'TURN_UP_LEFT_UTURN': { svg: turnUpLeftU_svg, png: turnUpLeftU_png },
  55. 'TURN_UP_RIGHT': { svg: turnUpRight_svg },
  56. // 东方向 (RT)
  57. 'STRAIGHT_LEFT': { svg: straightLeft_svg, png: straightLeft_png },
  58. 'TURN_LEFT_DOWN': { svg: turnLeftDown_svg, png: turnLeftDown_png },
  59. 'TURN_LEFT_DOWN_UTURN': { svg: turnLeftDownU_svg, png: turnLeftDownU_png },
  60. 'TURN_LEFT_UP': { svg: turnLeftUp_svg },
  61. // 西方向 (LB)
  62. 'STRAIGHT_RIGHT': { svg: straightRight_svg, png: straightRight_png },
  63. 'TURN_RIGHT_UP': { svg: turnRightUp_svg, png: turnRightUp_png },
  64. 'TURN_RIGHT_UP_UTURN': { svg: turnRightUpU_svg, png: turnRightUpU_png },
  65. 'TURN_RIGHT_DOWN': { svg: turnRightDown_svg },
  66. };
  67. // ─── 工具函数 ───
  68. /** 取 token 的 SVG URL (PhaseDiagram CSS mask 用) */
  69. export function getTokenSvg(token) {
  70. const a = TOKEN_ASSETS[token];
  71. return a ? (a.svg || null) : null;
  72. }
  73. /**
  74. * 取 token 的图像 URL, 优先 prefer, fallback 另一种
  75. * @param {string} token
  76. * @param {'png'|'svg'} prefer
  77. */
  78. export function getTokenImage(token, prefer = 'png') {
  79. const a = TOKEN_ASSETS[token];
  80. if (!a) return null;
  81. return prefer === 'png' ? (a.png || a.svg) : (a.svg || a.png);
  82. }