From 55b9201c221059daceaec8a27c428f0aff0ab506 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=9D=B0?= <alecdux@gmail.com>
Date: Mon, 18 Aug 2025 14:07:34 +0800
Subject: [PATCH] feat: svg

---
 config/index.ts                             | 14 +++++++++-
 src/config/images.js                        | 11 ++++++++
 src/scss/images.scss                        | 30 +++++++++++++++++++++
 src/static/publishBall/icon-add.svg         |  3 +++
 src/static/publishBall/icon-arrow-right.svg |  3 +++
 src/static/publishBall/icon-changda.svg     | 21 +++++++++++++++
 src/static/publishBall/icon-cost.svg        |  7 +++++
 src/static/publishBall/icon-gameplay.svg    | 13 +++++++++
 src/static/publishBall/icon-location.svg    |  7 +++++
 src/static/publishBall/icon-personal.svg    | 19 +++++++++++++
 src/static/publishBall/icon-remove.svg      |  3 +++
 src/static/publishBall/icon-tips.svg        |  5 ++++
 src/static/publishBall/icon-upload.svg      | 20 ++++++++++++++
 13 files changed, 155 insertions(+), 1 deletion(-)
 create mode 100644 src/config/images.js
 create mode 100644 src/scss/images.scss
 create mode 100644 src/static/publishBall/icon-add.svg
 create mode 100644 src/static/publishBall/icon-arrow-right.svg
 create mode 100644 src/static/publishBall/icon-changda.svg
 create mode 100644 src/static/publishBall/icon-cost.svg
 create mode 100644 src/static/publishBall/icon-gameplay.svg
 create mode 100644 src/static/publishBall/icon-location.svg
 create mode 100644 src/static/publishBall/icon-personal.svg
 create mode 100644 src/static/publishBall/icon-remove.svg
 create mode 100644 src/static/publishBall/icon-tips.svg
 create mode 100644 src/static/publishBall/icon-upload.svg

diff --git a/config/index.ts b/config/index.ts
index 3eb418b..267a4ac 100644
--- a/config/index.ts
+++ b/config/index.ts
@@ -3,6 +3,8 @@ import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
 import devConfig from './dev'
 import prodConfig from './prod'
 import vitePluginImp from 'vite-plugin-imp'
+import path from 'path'
+
 // https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
 export default defineConfig<'webpack5'>(async (merge, { command, mode }) => {
   const baseConfig: UserConfigExport<'webpack5'> = {
@@ -20,6 +22,16 @@ export default defineConfig<'webpack5'>(async (merge, { command, mode }) => {
     plugins: ['@tarojs/plugin-html'],
     defineConstants: {
     },
+    alias: {
+      '@': path.resolve(__dirname, '..', 'src'),
+      '@/assets': path.resolve(__dirname, '..', 'src/assets'),
+      '@/components': path.resolve(__dirname, '..', 'src/components'),
+      '@/utils': path.resolve(__dirname, '..', 'src/utils'),
+      '@/services': path.resolve(__dirname, '..', 'src/services'),
+      '@/store': path.resolve(__dirname, '..', 'src/store'),
+      '@/config': path.resolve(__dirname, '..', 'src/config'),
+      '@/static': path.resolve(__dirname, '..', 'src/static'),
+    },
     copy: {
       patterns: [
       ],
@@ -29,7 +41,7 @@ export default defineConfig<'webpack5'>(async (merge, { command, mode }) => {
     framework: 'react',
     compiler: {
 
-      type: 'webpack5', 
+      type: 'webpack5',
       prebundle: {
         enable: false
       }
diff --git a/src/config/images.js b/src/config/images.js
new file mode 100644
index 0000000..ab20192
--- /dev/null
+++ b/src/config/images.js
@@ -0,0 +1,11 @@
+export default {
+    ICON_REMOVE: require('@/static/publishBall/icon-remove.svg'),
+    ICON_UPLOAD: require('@/static/publishBall/icon-upload.svg'),
+    ICON_LOCATION: require('@/static/publishBall/icon-location.svg'),
+    ICON_GAMEPLAY: require('@/static/publishBall/icon-gameplay.svg'),
+    ICON_PERSONAL: require('@/static/publishBall/icon-personal.svg'),
+    ICON_CHANGDA: require('@/static/publishBall/icon-changda.svg'),
+    ICON_COST: require('@/static/publishBall/icon-cost.svg'),
+    ICON_TIPS: require('@/static/publishBall/icon-tips.svg'),
+    ICON_ARROW_RIGHT: require('@/static/publishBall/icon-arrow-right.svg'),
+  }
\ No newline at end of file
diff --git a/src/scss/images.scss b/src/scss/images.scss
new file mode 100644
index 0000000..32d40b4
--- /dev/null
+++ b/src/scss/images.scss
@@ -0,0 +1,30 @@
+// src/scss/images.scss
+// 暴露公共API (可选)
+@forward 'sass:map';
+@forward 'sass:meta';
+@use 'sass:map';
+
+// 使用私有变量命名 (前缀加 -)
+$-static-path: '~@/static/' !default;
+
+// 图片映射表
+$-images: (
+  'icon-upload': '/publishBall/icon-upload.svg',
+  'icon-add': '/publishBall/icon-add.svg',
+  'icon-location': '/publishBall/icon-location.svg',
+  'icon-gameplay': '/publishBall/icon-gameplay.svg',
+  'icon-personal': '/publishBall/icon-personal.svg',
+  'icon-changda': '/publishBall/icon-changda.svg',
+  'icon-cost': '/publishBall/icon-cost.svg',
+  'icon-remove': '/publishBall/icon-remove.svg'
+) !default;
+
+// 图片获取函数
+@function taro-image($name) {
+  @if not map.has-key($-images, $name) {
+    @warn "Image `#{$name}` not found in $images map";
+    @return url($-static-path + 'default.png');
+  }
+  @return url($-static-path + map.get($-images, $name));
+}
+
diff --git a/src/static/publishBall/icon-add.svg b/src/static/publishBall/icon-add.svg
new file mode 100644
index 0000000..5ef824e
--- /dev/null
+++ b/src/static/publishBall/icon-add.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 4C13.5 3.44772 13.0523 3 12.5 3C11.9477 3 11.5 3.44772 11.5 4V11H4.5C3.94772 11 3.5 11.4477 3.5 12C3.5 12.5523 3.94772 13 4.5 13H11.5V20C11.5 20.5523 11.9477 21 12.5 21C13.0523 21 13.5 20.5523 13.5 20V13H20.5C21.0523 13 21.5 12.5523 21.5 12C21.5 11.4477 21.0523 11 20.5 11H13.5V4Z" fill="#3C3C43" fill-opacity="0.6"/>
+</svg>
diff --git a/src/static/publishBall/icon-arrow-right.svg b/src/static/publishBall/icon-arrow-right.svg
new file mode 100644
index 0000000..a490b6d
--- /dev/null
+++ b/src/static/publishBall/icon-arrow-right.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.77774 2.98949C5.14223 2.625 5.73318 2.625 6.09767 2.98949L9.28329 6.17511C9.7389 6.63072 9.7389 7.36941 9.28329 7.82502L6.09767 11.0106C5.73318 11.3751 5.14223 11.3751 4.77774 11.0106C4.41325 10.6461 4.41325 10.0552 4.77774 9.6907L7.46838 7.00006L4.77774 4.30942C4.41325 3.94494 4.41325 3.35398 4.77774 2.98949Z" fill="#161823" fill-opacity="0.2"/>
+</svg>
diff --git a/src/static/publishBall/icon-changda.svg b/src/static/publishBall/icon-changda.svg
new file mode 100644
index 0000000..6cc0b19
--- /dev/null
+++ b/src/static/publishBall/icon-changda.svg
@@ -0,0 +1,21 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.2">
+<mask id="mask0_586_20634" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="2" width="18" height="16">
+<path d="M3.1509 4.88544C4.06659 3.22577 5.8122 2.19519 7.70772 2.19519H11.6591C13.5546 2.19519 15.3002 3.22577 16.2159 4.88544L17.6815 7.54183C18.5449 9.10671 18.5449 11.0052 17.6815 12.57L16.2159 15.2264C15.3002 16.8861 13.5546 17.9167 11.6591 17.9167H7.70772C5.8122 17.9167 4.06658 16.8861 3.1509 15.2264L1.68531 12.57C0.821926 11.0052 0.821927 9.10671 1.68531 7.54183L3.1509 4.88544Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_586_20634)">
+<g filter="url(#filter0_f_586_20634)">
+<circle cx="16.5617" cy="9.78481" r="5.8549" fill="#0BBE61" fill-opacity="0.34"/>
+</g>
+</g>
+<path d="M12.8129 17.7198H12.8036L7.82718 17.7042C7.2053 17.7017 6.59498 17.5359 6.05724 17.2236C5.51949 16.9112 5.07315 16.4632 4.76286 15.9243L2.28558 11.6088C1.97756 11.0697 1.81624 10.4592 1.8177 9.83824C1.81916 9.21729 1.98335 8.60758 2.29391 8.06987L4.792 3.76691C5.10437 3.23028 5.55178 2.78477 6.08975 2.4747C6.62771 2.16464 7.23748 2.00081 7.8584 1.99951H7.86777L12.8442 2.012C13.466 2.01462 14.0763 2.18037 14.614 2.49271C15.1518 2.80505 15.5981 3.25303 15.9085 3.79189L18.3858 8.10734C18.6946 8.64722 18.8563 9.25871 18.8546 9.88067C18.853 10.5026 18.6881 11.1133 18.3764 11.6515L15.8783 15.9555C15.5659 16.4916 15.1185 16.9366 14.5807 17.2461C14.0429 17.5556 13.4335 17.7189 12.8129 17.7198ZM7.8584 3.25168C7.45641 3.25272 7.06168 3.35896 6.71346 3.55982C6.36524 3.76068 6.07564 4.04918 5.87346 4.39664L3.37537 8.70064C3.17561 9.04916 3.0705 9.44388 3.0705 9.84559C3.0705 10.2473 3.17561 10.642 3.37537 10.9906L5.8464 15.3102C6.04817 15.6578 6.33753 15.9464 6.68563 16.1473C7.03372 16.3482 7.42839 16.4543 7.8303 16.4551L12.8067 16.4687C13.2099 16.4694 13.6062 16.364 13.9557 16.163C14.3053 15.9621 14.5957 15.6726 14.7979 15.3237L17.296 11.0207C17.4965 10.6727 17.6025 10.2782 17.6035 9.87647C17.6044 9.47476 17.5002 9.0798 17.3012 8.73082L14.8239 4.41433C14.6229 4.06531 14.3337 3.77518 13.9854 3.57297C13.6371 3.37076 13.2417 3.26356 12.839 3.26209L7.86257 3.2496L7.8584 3.25168Z" fill="#161823"/>
+<path d="M9.85676 12.836C9.70243 12.8346 9.55411 12.776 9.44041 12.6716L6.83824 10.2859C6.72076 10.1728 6.65216 10.0183 6.64709 9.85535C6.64202 9.69238 6.70089 9.5339 6.81112 9.41375C6.92134 9.2936 7.07418 9.22133 7.23698 9.21236C7.39979 9.2034 7.55964 9.25846 7.68238 9.36578L9.75268 11.2695L12.4308 7.44017C12.4773 7.37155 12.5369 7.31284 12.6062 7.26747C12.6755 7.22211 12.7532 7.19099 12.8347 7.17594C12.9161 7.16088 12.9998 7.16219 13.0808 7.17978C13.1617 7.19738 13.2384 7.2309 13.3062 7.27841C13.3741 7.32592 13.4319 7.38646 13.4761 7.4565C13.5204 7.52655 13.5502 7.6047 13.564 7.6864C13.5778 7.76811 13.5751 7.85173 13.5562 7.9324C13.5373 8.01307 13.5026 8.08918 13.454 8.15629L10.3678 12.5696C10.3168 12.6423 10.2509 12.7034 10.1744 12.7486C10.098 12.7938 10.0127 12.8222 9.92442 12.8319C9.90199 12.8348 9.87938 12.8362 9.85676 12.836Z" fill="#0BBE61"/>
+</g>
+<defs>
+<filter id="filter0_f_586_20634" x="5.50249" y="-1.27444" width="22.1185" height="22.1185" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.60218" result="effect1_foregroundBlur_586_20634"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/static/publishBall/icon-cost.svg b/src/static/publishBall/icon-cost.svg
new file mode 100644
index 0000000..c7cd7e5
--- /dev/null
+++ b/src/static/publishBall/icon-cost.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00001 15.1666C11.6819 15.1666 14.6667 12.1819 14.6667 8.49998C14.6667 4.81808 11.6819 1.83331 8.00001 1.83331C4.31811 1.83331 1.33334 4.81808 1.33334 8.49998C1.33334 12.1819 4.31811 15.1666 8.00001 15.1666Z" stroke="black" stroke-width="1.33333" stroke-linejoin="round"/>
+<path d="M6 7.83331H10" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 9.83331H10" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.00278 7.83331V11.8333" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 5.5L8 7.5L6 5.5" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/static/publishBall/icon-gameplay.svg b/src/static/publishBall/icon-gameplay.svg
new file mode 100644
index 0000000..63a7e62
--- /dev/null
+++ b/src/static/publishBall/icon-gameplay.svg
@@ -0,0 +1,13 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_586_20716)">
+<path d="M12.8374 3.67871C11.6155 2.53414 9.97294 1.83331 8.16668 1.83331C4.39274 1.83331 1.33334 4.89271 1.33334 8.66665C1.33334 12.4406 4.39274 15.5 8.16668 15.5C10.0383 15.5 11.7341 14.7475 12.9683 13.5287L8.00001 8.49998L12.8374 3.67871Z" stroke="black" stroke-width="1.33333" stroke-linejoin="round"/>
+<path d="M13.3333 9.83335C14.0697 9.83335 14.6667 9.23639 14.6667 8.50002C14.6667 7.76365 14.0697 7.16669 13.3333 7.16669C12.597 7.16669 12 7.76365 12 8.50002C12 9.23639 12.597 9.83335 13.3333 9.83335Z" stroke="black" stroke-width="1.33333" stroke-linejoin="round"/>
+<path d="M5.66666 4.83331V7.49998" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.33334 6.16669H7.00001" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_586_20716">
+<rect width="16" height="16" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/static/publishBall/icon-location.svg b/src/static/publishBall/icon-location.svg
new file mode 100644
index 0000000..b5236dc
--- /dev/null
+++ b/src/static/publishBall/icon-location.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.66668 4L1.33334 2V12L5.66668 14L10.3333 12L14.6667 14V4L10.3333 2L5.66668 4Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.3333 2V12" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.66666 4V14" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.5 3L5.66667 4L10.3333 2L12.5 3" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.5 13L5.66667 14L10.3333 12L12.5 13" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/static/publishBall/icon-personal.svg b/src/static/publishBall/icon-personal.svg
new file mode 100644
index 0000000..30a0f54
--- /dev/null
+++ b/src/static/publishBall/icon-personal.svg
@@ -0,0 +1,19 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_586_20626)">
+<g filter="url(#filter0_f_586_20626)">
+<circle cx="15.125" cy="11.4583" r="5.625" fill="#0BBE61" fill-opacity="0.34"/>
+</g>
+</g>
+<path d="M10.7901 16.8477C10.7901 15.0336 10.0679 13.2938 8.7824 12.0111C7.49688 10.7283 5.75333 10.0077 3.93532 10.0077C3.85764 10.0077 3.74156 10.0113 3.63737 10.0168C3.58619 10.0186 3.5414 10.0223 3.50941 10.0241L3.47102 10.0259H3.45823C3.38196 10.0331 3.30502 10.0249 3.23199 10.0018C3.15897 9.97869 3.09134 9.94116 3.03314 9.89145C2.97494 9.84174 2.92736 9.78086 2.89322 9.71243C2.85909 9.64399 2.83909 9.5694 2.83443 9.4931C2.82977 9.4168 2.84054 9.34034 2.8661 9.26828C2.89165 9.19621 2.93147 9.13001 2.98319 9.07362C3.03491 9.01722 3.09747 8.97178 3.16714 8.94001C3.23682 8.90823 3.31219 8.89076 3.38877 8.88864H3.4043L3.44543 8.8859L3.58253 8.87861C3.68855 8.87314 3.8293 8.86766 3.93532 8.86766C6.05633 8.86766 8.09047 9.70842 9.59025 11.205C11.09 12.7015 11.9326 14.7313 11.9326 16.8477C11.9316 16.9652 11.9276 17.0825 11.9207 17.1998L11.9134 17.332L11.9107 17.3712L11.9097 17.3822V17.3867C11.8991 17.5375 11.8288 17.678 11.7144 17.7771C11.6 17.8762 11.4508 17.9259 11.2997 17.9152C11.1485 17.9046 11.0078 17.8345 10.9085 17.7203C10.8092 17.6062 10.7594 17.4573 10.77 17.3065V17.3037V17.2946L10.7728 17.2591C10.7755 17.229 10.7773 17.1861 10.7801 17.1378C10.7856 17.0393 10.7901 16.928 10.7901 16.8477ZM9.64766 3.16761C9.64766 2.95602 9.6568 2.82196 9.67051 2.62588C9.67419 2.54981 9.6931 2.47525 9.72614 2.4066C9.75917 2.33795 9.80566 2.2766 9.86285 2.22618C9.92005 2.17575 9.98679 2.13728 10.0591 2.11302C10.1315 2.08876 10.208 2.07921 10.2841 2.08494C10.3602 2.09067 10.4343 2.11156 10.5022 2.14637C10.5701 2.18119 10.6303 2.22922 10.6793 2.28763C10.7282 2.34605 10.765 2.41366 10.7873 2.48648C10.8096 2.5593 10.8171 2.63585 10.8093 2.7116C10.7963 2.86326 10.7899 3.0154 10.7901 3.16761C10.7901 4.98171 11.5123 6.7215 12.7979 8.00427C14.0834 9.28703 15.8269 10.0077 17.6449 10.0077C17.8104 10.0077 17.9082 10.0013 18.0836 9.98944C18.2301 9.98665 18.3721 10.04 18.4803 10.1386C18.5885 10.2371 18.6547 10.3733 18.6652 10.5191C18.6758 10.665 18.6299 10.8092 18.537 10.9223C18.4441 11.0353 18.3113 11.1085 18.1659 11.1267C17.9926 11.1408 17.8188 11.1478 17.6449 11.1477C15.5239 11.1477 13.4898 10.3069 11.99 8.81038C10.4902 7.31382 9.64766 5.28406 9.64766 3.16761Z" fill="#0BBE61"/>
+<path d="M17.625 10C17.625 9.09717 17.4471 8.20317 17.1016 7.36906C16.7561 6.53494 16.2497 5.77705 15.6113 5.13865C14.9729 4.50024 14.215 3.99383 13.3809 3.64833C12.5468 3.30283 11.6528 3.125 10.75 3.125C9.84712 3.125 8.95312 3.30283 8.11901 3.64833C7.2849 3.99383 6.527 4.50024 5.8886 5.13865C5.2502 5.77705 4.74379 6.53494 4.39829 7.36906C4.05279 8.20317 3.87496 9.09717 3.87496 10C3.87496 11.8234 4.59929 13.5721 5.8886 14.8614C7.17791 16.1507 8.9266 16.875 10.75 16.875C12.5733 16.875 14.322 16.1507 15.6113 14.8614C16.9006 13.5721 17.625 11.8234 17.625 10ZM18.7708 10C18.7708 12.1273 17.9257 14.1674 16.4215 15.6716C14.9173 17.1758 12.8772 18.0208 10.75 18.0208C8.6227 18.0208 6.58257 17.1758 5.07837 15.6716C3.57418 14.1674 2.72913 12.1273 2.72913 10C2.72913 7.87275 3.57418 5.83262 5.07837 4.32842C6.58257 2.82422 8.6227 1.97917 10.75 1.97917C12.8772 1.97917 14.9173 2.82422 16.4215 4.32842C17.9257 5.83262 18.7708 7.87275 18.7708 10Z" fill="#161823"/>
+<defs>
+<filter id="filter0_f_586_20626" x="4.5" y="0.833328" width="21.25" height="21.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.5" result="effect1_foregroundBlur_586_20626"/>
+</filter>
+<clipPath id="clip0_586_20626">
+<rect x="2.625" y="1.97917" width="16.0417" height="16.0417" rx="8.02083" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/static/publishBall/icon-remove.svg b/src/static/publishBall/icon-remove.svg
new file mode 100644
index 0000000..d63cdb8
--- /dev/null
+++ b/src/static/publishBall/icon-remove.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667C14.6024 1.66667 18.3333 5.39763 18.3333 10ZM13.5059 6.49408C13.1805 6.16865 12.6529 6.16865 12.3274 6.49408L10 8.82149L7.67259 6.49408C7.34716 6.16865 6.81952 6.16865 6.49408 6.49408C6.16865 6.81952 6.16865 7.34716 6.49408 7.67259L8.82149 10L6.49408 12.3274C6.16865 12.6529 6.16865 13.1805 6.49408 13.5059C6.81952 13.8314 7.34716 13.8314 7.67259 13.5059L10 11.1785L12.3274 13.5059C12.6529 13.8314 13.1805 13.8314 13.5059 13.5059C13.8314 13.1805 13.8314 12.6529 13.5059 12.3274L11.1785 10L13.5059 7.67259C13.8314 7.34716 13.8314 6.81952 13.5059 6.49408Z" fill="#161823" fill-opacity="0.75"/>
+</svg>
diff --git a/src/static/publishBall/icon-tips.svg b/src/static/publishBall/icon-tips.svg
new file mode 100644
index 0000000..6a4eb85
--- /dev/null
+++ b/src/static/publishBall/icon-tips.svg
@@ -0,0 +1,5 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.49988 8.6C6.49988 8.87614 6.27602 9.1 5.99988 9.1C5.72374 9.1 5.49988 8.87614 5.49988 8.6V6.1C5.49988 5.82386 5.72374 5.6 5.99988 5.6C6.27602 5.6 6.49988 5.82386 6.49988 6.1V8.6Z" fill="black" fill-opacity="0.75"/>
+<path d="M5.99997 4C5.69622 4 5.44997 4.24624 5.44997 4.55C5.44997 4.85375 5.69622 5.1 5.99997 5.1C6.30373 5.1 6.54997 4.85375 6.54997 4.55C6.54997 4.24624 6.30373 4 5.99997 4Z" fill="black" fill-opacity="0.75"/>
+<path d="M6 11.5C8.76142 11.5 11 9.26142 11 6.5C11 3.73858 8.76142 1.5 6 1.5C3.23858 1.5 1 3.73858 1 6.5C1 9.26142 3.23858 11.5 6 11.5ZM6 10.5C3.79086 10.5 2 8.70914 2 6.5C2 4.29086 3.79086 2.5 6 2.5C8.20914 2.5 10 4.29086 10 6.5C10 8.70914 8.20914 10.5 6 10.5Z" fill="black" fill-opacity="0.75"/>
+</svg>
diff --git a/src/static/publishBall/icon-upload.svg b/src/static/publishBall/icon-upload.svg
new file mode 100644
index 0000000..c72d2ce
--- /dev/null
+++ b/src/static/publishBall/icon-upload.svg
@@ -0,0 +1,20 @@
+<svg width="181" height="180" viewBox="0 0 181 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_586_11467)">
+<rect x="36.5" y="32" width="108" height="108" rx="20" fill="white"/>
+<rect x="37" y="32.5" width="107" height="107" rx="19.5" stroke="black" stroke-opacity="0.12" stroke-dasharray="4 4"/>
+<path d="M91.5 67C91.5 66.4477 91.0523 66 90.5 66C89.9477 66 89.5 66.4477 89.5 67V74H82.5C81.9477 74 81.5 74.4477 81.5 75C81.5 75.5523 81.9477 76 82.5 76H89.5V83C89.5 83.5523 89.9477 84 90.5 84C91.0523 84 91.5 83.5523 91.5 83V76H98.5C99.0523 76 99.5 75.5523 99.5 75C99.5 74.4477 99.0523 74 98.5 74H91.5V67Z" fill="#3C3C43" fill-opacity="0.6"/>
+<path d="M58.424 99.568H65.204V100.612H62.012C61.916 101.044 61.796 101.464 61.676 101.86H65.732V102.952H63.428C64.028 103.78 64.916 104.44 66.092 104.944L65.6 105.952C64.04 105.184 62.924 104.176 62.252 102.952H61.22C61.112 103.168 61.004 103.372 60.896 103.564C60.272 104.5 59.36 105.34 58.148 106.084L57.428 105.184C58.52 104.608 59.348 103.912 59.912 103.108C59.948 103.048 59.984 103 60.008 102.952H57.872V101.86H60.548C60.692 101.464 60.8 101.044 60.872 100.612H58.424V99.568ZM59.024 105.952L59.972 106.408C59.564 107.656 59.084 108.736 58.532 109.648L57.596 108.964C58.148 108.124 58.616 107.128 59.024 105.952ZM56 99.28C56.744 99.796 57.368 100.312 57.872 100.84L57.092 101.62C56.648 101.128 56.024 100.6 55.22 100.036L56 99.28ZM55.712 102.148C56.468 102.736 57.104 103.324 57.632 103.912L56.84 104.692C56.384 104.14 55.748 103.552 54.932 102.904L55.712 102.148ZM56.576 105.508L57.572 105.904C57.104 107.416 56.588 108.832 56.036 110.164L54.98 109.696C55.592 108.328 56.12 106.936 56.576 105.508ZM60.752 110.248H59.636L59.396 109.168C59.732 109.216 60.056 109.252 60.356 109.252C60.584 109.252 60.704 109.084 60.704 108.76V104.584H61.796V109.024C61.796 109.84 61.448 110.248 60.752 110.248ZM64.616 105.664C65.144 106.732 65.612 107.872 65.996 109.084L64.988 109.54C64.58 108.196 64.124 107.02 63.632 105.988L64.616 105.664ZM63.044 106.084C63.524 107.152 63.944 108.28 64.304 109.48L63.296 109.948C62.936 108.604 62.528 107.428 62.084 106.408L63.044 106.084ZM77.516 100.852V110.056H76.412V109.3H74.516V110.056H73.424V100.852H77.516ZM74.516 108.208H76.412V101.944H74.516V108.208ZM68.96 99.196H70.088V101.524H72.5C72.5 105.436 72.44 107.848 72.32 108.772C72.2 109.684 71.6 110.14 70.544 110.14C70.352 110.14 70.04 110.116 69.608 110.08L69.32 109.036C69.728 109.072 70.076 109.096 70.364 109.096C70.868 109.096 71.168 108.808 71.252 108.256C71.324 107.692 71.36 105.82 71.384 102.628H70.088C70.016 106.12 69.236 108.676 67.736 110.308L66.884 109.552C68.216 108.112 68.912 105.796 68.96 102.628H67.136V101.524H68.96V99.196ZM82.148 102.568H85.472V100.948C84.608 101.02 83.696 101.068 82.724 101.068L82.364 100.048C84.968 100.048 87.152 99.76 88.928 99.184L89.492 100.144C88.664 100.432 87.716 100.66 86.636 100.816V102.568H89.984V103.66H86.636V105.22H89.276V110.224H88.148V109.648H84.056V110.236H82.916V105.22H85.472V103.66H82.148V102.568ZM84.056 108.58H88.148V106.288H84.056V108.58ZM80.12 99.28C80.912 99.796 81.596 100.324 82.16 100.852L81.38 101.62C80.9 101.128 80.216 100.588 79.34 100.012L80.12 99.28ZM79.844 102.136C80.66 102.724 81.356 103.312 81.908 103.9L81.116 104.692C80.624 104.14 79.928 103.552 79.04 102.916L79.844 102.136ZM81.008 105.364L82.052 105.772C81.548 107.308 80.984 108.748 80.384 110.092L79.244 109.588C79.928 108.208 80.516 106.804 81.008 105.364ZM91.52 99.904H95.984V100.996H91.52V99.904ZM91.076 103.144H96.416V104.248H93.716C93.284 105.892 92.912 107.092 92.6 107.86C93.392 107.692 94.196 107.452 95 107.152C94.724 106.564 94.448 106.012 94.172 105.496L95.132 105.028C95.684 106.036 96.212 107.152 96.716 108.364L95.732 108.868L95.42 108.1C94.16 108.532 92.804 108.88 91.34 109.144L91.064 108.064C91.184 108.04 91.256 108.004 91.304 107.968C91.628 107.5 92.06 106.264 92.612 104.248H91.076V103.144ZM98.048 99.196H99.176V101.524H101.768C101.768 105.436 101.708 107.848 101.6 108.76C101.468 109.672 100.856 110.128 99.764 110.128C99.572 110.128 99.236 110.104 98.756 110.08L98.492 109.072C98.924 109.108 99.296 109.132 99.608 109.132C100.136 109.132 100.436 108.844 100.532 108.268C100.604 107.704 100.64 105.82 100.664 102.628H99.176V102.736C99.14 106.192 98.312 108.712 96.68 110.308L95.828 109.552C97.28 108.136 98.024 105.868 98.048 102.736V102.628H96.524V101.524H98.048V99.196ZM103.4 100.684H105.344V99.304H106.472V100.684H108.392V101.752H106.472V103.012H108.608V104.116H103.124V103.012H105.344V101.752H103.4V100.684ZM103.316 105.664H105.344V104.416H106.472V105.664H108.452V106.732H106.472V108.34C107.264 108.232 107.996 108.112 108.68 107.992V109.156C107.096 109.456 105.308 109.696 103.292 109.888L103.136 108.688C103.904 108.616 104.648 108.556 105.344 108.484V106.732H103.316V105.664ZM108.656 101.488H111.848V99.136H112.952V101.488H113.912V102.58H112.952V108.784C112.952 109.672 112.472 110.128 111.512 110.128H110.084L109.82 109.024C110.276 109.06 110.708 109.084 111.116 109.084C111.596 109.084 111.848 108.892 111.848 108.508V102.58H108.656V101.488ZM109.892 103.732C110.42 104.572 110.9 105.496 111.32 106.516L110.384 106.996C109.952 105.928 109.472 104.98 108.944 104.152L109.892 103.732ZM115.124 99.568H125.876V100.66H121.148C121.052 101.092 120.932 101.512 120.776 101.92H125.312V110.272H124.208V109.768H116.828V110.272H115.724V101.92H119.624C119.78 101.512 119.9 101.092 119.984 100.66H115.124V99.568ZM116.828 108.712H118.196V102.964H116.828V108.712ZM119.264 108.712H121.736V107.416H119.264V108.712ZM122.804 108.712H124.208V102.964H122.804V108.712ZM119.264 106.444H121.736V105.196H119.264V106.444ZM119.264 104.212H121.736V102.964H119.264V104.212Z" fill="#3C3C43" fill-opacity="0.6"/>
+</g>
+<defs>
+<filter id="filter0_d_586_11467" x="0.5" y="0" width="180" height="180" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="18"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_586_11467"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_586_11467" result="shape"/>
+</filter>
+</defs>
+</svg>