Jafeng/echo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新图标和样式，添加底部弹层滑动效果

Browse Source
This commit is contained in:
Jafeng
2025-12-03 16:41:28 +08:00
parent 4d521a3fb6
commit 48c7b292d0
6 changed files with 112 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
android/app/src/main/res/drawable/ic_launcher_foreground.xml
View File

@@ -2,57 +2,66 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android" <vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="108dp" android:width="108dp"
android:height="108dp" android:height="108dp"
android:viewportWidth="108" android:viewportWidth="100"
android:viewportHeight="108"> android:viewportHeight="100">
<!-- 票据纸张：略带旋转感的卡片 --> <!-- Receipt card (slightly rotated), synced with public/echo-icon.svg -->
<group <group
android:pivotX="54" android:pivotX="50"
android:pivotY="54" android:pivotY="50"
android:rotation="-6"> android:rotation="-6">
<!-- Paper shape -->
<path <path
android:fillColor="#FFFFFFFF" android:fillColor="#FFFFFFFF"
android:pathData="M32,24h44c4,0 7,3 7,7v40l-7,-4l-8,5l-8,-5l-8,5l-8,-5l-8,5v-41c0,-4 3,-7 6,-7z" /> android:pathData="M32,22H68C73,22 76,25 76,30V78L68,73L60,78L52,73L44,78L36,73L28,78V30C28,25 31,22 36,22z" />
<!-- 标题条 --> <!-- Title bar -->
<path <path
android:fillColor="#4DFF8A65" android:fillColor="#4DFF8A65"
android:pathData="M36,32h20a2,2 0 0 1 2,2v2a2,2 0 0 1 -2,2h-20a2,2 0 0 1 -2,-2v-2a2,2 0 0 1 2,-2z" /> android:pathData="M36,32h20a2,2 0 0 1 2,2v2a2,2 0 0 1 -2,2h-20a2,2 0 0 1 -2,-2v-2a2,2 0 0 1 2,-2z" />
<!-- 金额条 --> <!-- Amount bar -->
<path <path
android:fillColor="#80FFCC70" android:fillColor="#80FFCC70"
android:pathData="M36,42h34a2,2 0 0 1 2,2v2a2,2 0 0 1 -2,2h-34a2,2 0 0 1 -2,-2v-2a2,2 0 0 1 2,-2z" /> android:pathData="M36,42h34a2,2 0 0 1 2,2v2a2,2 0 0 1 -2,2h-34a2,2 0 0 1 -2,-2v-2a2,2 0 0 1 2,-2z" />
<!-- 中部圆形加号 --> <!-- Center plus circle -->
<path <path
android:fillColor="#00000000" android:fillColor="#00000000"
android:strokeColor="#FF6B6B" android:strokeColor="#FF6B6B"
android:strokeWidth="3" android:strokeWidth="3"
android:pathData="M54,60a9,9 0 1,0 0.01,0" /> android:pathData="M52,51a9,9 0 1,0 0,18a9,9 0 1,0 0,-18" />
<path <path
android:fillColor="#00000000" android:fillColor="#00000000"
android:strokeColor="#FF6B6B" android:strokeColor="#FF6B6B"
android:strokeWidth="3" android:strokeWidth="3"
android:strokeLineCap="round" android:strokeLineCap="round"
android:pathData="M54,55v10M49,60h10" /> android:pathData="M52,56v8M48,60h8" />
</group> </group>
<!-- 右上角轻微信号波纹 --> <!-- Top-right signal waves (same shape as echo-icon.svg, slightly inward) -->
<path
android:fillColor="#00000000"
android:strokeColor="#FFFFFF"
android:strokeWidth="5"
android:strokeLineCap="round"
android:strokeAlpha="0.7"
android:pathData="M76,30 Q84,38 82,48" />
<path <path
android:fillColor="#00000000" android:fillColor="#00000000"
android:strokeColor="#FFFFFF" android:strokeColor="#FFFFFF"
android:strokeWidth="4" android:strokeWidth="4"
android:strokeLineCap="round" android:strokeLineCap="round"
android:strokeAlpha="0.7" android:strokeAlpha="0.3"
android:pathData="M76,26a16,16 0 0,1 10,14" /> android:pathData="M80,24 Q88,36 86,52" />
<!-- Left-side sparkle -->
<path <path
android:fillColor="#00000000" android:fillColor="#00000000"
android:strokeColor="#FFFFFF" android:strokeColor="#FFFFFF"
android:strokeWidth="3" android:strokeWidth="2"
android:strokeLineCap="round" android:strokeAlpha="0.8"
android:strokeAlpha="0.3" android:pathData="M25,35 L27,35 M26,34 L26,36" />
android:pathData="M80,20a24,24 0 0,1 14,20" />
</vector> </vector>

4
index.html
View File

@@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/echo-icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>echo-app</title> <title>Echo</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

68
public/echo-icon.svg Normal file
View File

@@ -0,0 +1,68 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none">
<defs>
<!-- Warm background gradient, same as design/icon.html brand-gradient -->
<linearGradient id="echo-bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FF6B6B" />
<stop offset="100%" stop-color="#FFCC70" />
</linearGradient>
<!-- Clip everything to the rounded square so nothing can spill out -->
<clipPath id="echo-clip">
<rect x="7" y="7" width="86" height="86" rx="24" />
</clipPath>
</defs>
<!-- All shapes are clipped inside the rounded background -->
<g clip-path="url(#echo-clip)">
<!-- Rounded background -->
<rect x="7" y="7" width="86" height="86" rx="24" fill="url(#echo-bg)" />
<!-- Receipt body (slightly rotated) -->
<path
d="M32 22 H 68 C 73 22 76 25 76 30 V 78 L 68 73 L 60 78 L 52 73 L 44 78 L 36 73 L 28 78 V 30 C 28 25 31 22 36 22 Z"
fill="#FFFFFF"
transform="rotate(-6 50 50)"
/>
<!-- Receipt content -->
<g transform="rotate(-6 50 50)">
<!-- Title bar -->
<rect x="36" y="32" width="20" height="4" rx="2" fill="#FF8A65" fill-opacity="0.3" />
<!-- Amount bar -->
<rect x="36" y="42" width="34" height="4" rx="2" fill="#FFCC70" fill-opacity="0.5" />
<!-- Center plus circle -->
<circle cx="52" cy="60" r="9" stroke="#FF6B6B" stroke-width="2.5" fill="none" />
<path
d="M52 56 V 64 M48 60 H 56"
stroke="#FF6B6B"
stroke-width="2.5"
stroke-linecap="round"
/>
</g>
<!-- Right-top signal waves (pulled inward so they visually stay inside background) -->
<path
d="M76 30 Q84 38 82 48"
stroke="#FFFFFF"
stroke-width="5"
stroke-linecap="round"
stroke-opacity="0.7"
/>
<path
d="M80 24 Q88 36 86 52"
stroke="#FFFFFF"
stroke-width="4"
stroke-linecap="round"
stroke-opacity="0.3"
/>
<!-- Left-side small sparkle -->
<path
d="M25 35 L 27 35 M26 34 L 26 36"
stroke="#FFFFFF"
stroke-width="2"
stroke-opacity="0.8"
/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

4
src/App.vue
View File

@@ -57,7 +57,9 @@ onBeforeUnmount(() => {
<BottomDock /> <BottomDock />
<!-- 新增记录底部弹窗：在任意 Tab 上浮层显示 --> <!-- 新增记录底部弹窗：在任意 Tab 上浮层显示 -->
<AddEntryView v-if="uiStore.addEntryVisible" /> <transition name="slide-up">
<AddEntryView v-if="uiStore.addEntryVisible" />
</transition>
</div> </div>
</div> </div>
</template> </template>

12
src/style.css
View File

@@ -36,5 +36,15 @@
-webkit-background-clip: text; -webkit-background-clip: text;
color: transparent; color: transparent;
} }
}
/* 底部弹层上滑 / 下滑动效，与设计稿 ui_mock.html 保持一致 */
.slide-up-enter-active,
.slide-up-leave-active {
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.slide-up-enter-from,
.slide-up-leave-to {
transform: translateY(100%);
}
}

2
src/views/AddEntryView.vue
View File

@@ -156,7 +156,7 @@ transactionStore.ensureInitialized()
@click.self="closePanel" @click.self="closePanel"
> >
<div <div
class="bg-white w-full rounded-t-[32px] p-6 pb-10 shadow-2xl max-h-[80vh] overflow-y-auto hide-scrollbar" class="bg-white w-full rounded-t-[32px] rounded-b-none border border-stone-100 border-b-0 p-6 pb-10 shadow-2xl max-h-[80vh] overflow-y-auto hide-scrollbar"
:style="sheetStyle" :style="sheetStyle"
> >
<div <div