feat: 电子药箱小程序 - 4Tab药品管理
- 电子药箱: 药品库存管理 + 手动录入 + 今日用药打卡 - 药品百科: 搜索 + 分类筛选 + 20种药品静态数据 - 惠教中心: 4条药品使用指南课程 - 我的: 家庭成员信息管理 - 自定义TabBar + navigation-bar组件 - SVG药品分类插图
This commit is contained in:
陈誉午
@@ -0,0 +1,126 @@
|
||||
// SVG medicine illustrations as data URIs
|
||||
// Each SVG is a clean, modern illustration for a drug category
|
||||
|
||||
function svgToDataUri(svg: string): string {
|
||||
const encoded = svg
|
||||
.replace(/\n/g, '')
|
||||
.replace(/\s+/g, ' ')
|
||||
.replace(/>\s+</g, '><')
|
||||
.trim();
|
||||
return 'data:image/svg+xml,' + encodeURIComponent(encoded);
|
||||
}
|
||||
|
||||
// Pill/Capsule — for 抗生素, 解热镇痛, 消化系统, 抗过敏
|
||||
const pillSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#5B8DEF"/><stop offset="100%" stop-color="#3B6FD4"/></linearGradient></defs>
|
||||
<circle cx="50" cy="50" r="46" fill="url(#g)"/>
|
||||
<rect x="28" y="42" width="44" height="16" rx="8" fill="#fff" opacity="0.9"/>
|
||||
<rect x="72" y="42" width="10" height="16" rx="5" fill="#fff" opacity="0.6"/>
|
||||
<rect x="18" y="42" width="10" height="16" rx="5" fill="#fff" opacity="0.6"/>
|
||||
</svg>`;
|
||||
|
||||
// Syringe — for 降糖药, 注射液
|
||||
const syringeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#FF7B42"/><stop offset="100%" stop-color="#E85D3A"/></linearGradient></defs>
|
||||
<circle cx="50" cy="50" r="46" fill="url(#g)"/>
|
||||
<rect x="42" y="18" width="16" height="40" rx="4" fill="#fff" opacity="0.9"/>
|
||||
<rect x="46" y="58" width="8" height="20" rx="2" fill="#fff" opacity="0.7"/>
|
||||
<polygon points="44,76 40,82 60,82 56,76" fill="#fff" opacity="0.5"/>
|
||||
<line x1="50" y1="22" x2="50" y2="18" stroke="#fff" stroke-width="2" opacity="0.6"/>
|
||||
</svg>`;
|
||||
|
||||
// Heart — for 心血管
|
||||
const heartSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#E85D75"/><stop offset="100%" stop-color="#D4405A"/></linearGradient></defs>
|
||||
<circle cx="50" cy="50" r="46" fill="url(#g)"/>
|
||||
<path d="M50 72 C30 58 22 44 26 34 C30 26 38 24 44 28 C48 30 50 34 50 34 C50 34 52 30 56 28 C62 24 70 26 74 34 C78 44 70 58 50 72Z" fill="#fff" opacity="0.9"/>
|
||||
</svg>`;
|
||||
|
||||
// Leaf — for 中成药
|
||||
const leafSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4CAF84"/><stop offset="100%" stop-color="#2E8B5E"/></linearGradient></defs>
|
||||
<circle cx="50" cy="50" r="46" fill="url(#g)"/>
|
||||
<path d="M50 22 C35 35 22 55 30 70 C32 74 36 76 40 74 C44 72 50 64 54 56 C50 52 48 44 52 36 C60 40 70 44 78 42 C72 32 60 24 50 22Z" fill="#fff" opacity="0.9"/>
|
||||
</svg>`;
|
||||
|
||||
// Vitamin / Sun — for 维生素
|
||||
const vitaminSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#FFB347"/><stop offset="100%" stop-color="#F0982E"/></linearGradient></defs>
|
||||
<circle cx="50" cy="50" r="46" fill="url(#g)"/>
|
||||
<circle cx="50" cy="50" r="14" fill="#fff" opacity="0.9"/>
|
||||
<line x1="50" y1="28" x2="50" y2="18" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
|
||||
<line x1="50" y1="72" x2="50" y2="82" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
|
||||
<line x1="28" y1="50" x2="18" y2="50" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
|
||||
<line x1="72" y1="50" x2="82" y2="50" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
|
||||
<line x1="34" y1="34" x2="27" y2="27" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
|
||||
<line x1="66" y1="66" x2="73" y2="73" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
|
||||
<line x1="66" y1="34" x2="73" y2="27" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
|
||||
<line x1="34" y1="66" x2="27" y2="73" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
|
||||
</svg>`;
|
||||
|
||||
// Bandage — for 外用
|
||||
const bandageSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#8E99A4"/><stop offset="100%" stop-color="#6B7785"/></linearGradient></defs>
|
||||
<circle cx="50" cy="50" r="46" fill="url(#g)"/>
|
||||
<rect x="18" y="42" width="64" height="16" rx="4" fill="#fff" opacity="0.9"/>
|
||||
<rect x="28" y="42" width="8" height="16" fill="#E8ECF0" opacity="0.6"/>
|
||||
<rect x="44" y="42" width="8" height="16" fill="#E8ECF0" opacity="0.6"/>
|
||||
<rect x="60" y="42" width="8" height="16" fill="#E8ECF0" opacity="0.6"/>
|
||||
</svg>`;
|
||||
|
||||
// Encyclopedia book — for education center items
|
||||
const educationSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#FF8C42"/><stop offset="100%" stop-color="#FF6B35"/></linearGradient></defs>
|
||||
<circle cx="50" cy="50" r="46" fill="url(#g)"/>
|
||||
<rect x="30" y="26" width="40" height="48" rx="3" fill="#fff" opacity="0.9"/>
|
||||
<line x1="36" y1="36" x2="64" y2="36" stroke="#FF8C42" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
|
||||
<line x1="36" y1="44" x2="64" y2="44" stroke="#FF8C42" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
|
||||
<line x1="36" y1="52" x2="58" y2="52" stroke="#FF8C42" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
|
||||
<line x1="36" y1="60" x2="54" y2="60" stroke="#FF8C42" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
|
||||
</svg>`;
|
||||
|
||||
// Insulin pen / syringe detail — for education center 胰岛素
|
||||
const insulinSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#FF7B42"/><stop offset="100%" stop-color="#E85D3A"/></linearGradient></defs>
|
||||
<circle cx="50" cy="50" r="46" fill="url(#g)"/>
|
||||
<rect x="36" y="22" width="12" height="56" rx="6" fill="#fff" opacity="0.9"/>
|
||||
<rect x="38" y="22" width="8" height="56" rx="4" fill="#fff" opacity="0.5"/>
|
||||
<rect x="40" y="60" width="4" height="14" rx="2" fill="#fff" opacity="0.7"/>
|
||||
<circle cx="42" cy="24" r="3" fill="#E85D3A" opacity="0.8"/>
|
||||
</svg>`;
|
||||
|
||||
// BP monitor heart — for education center 高血压
|
||||
const heartMonitorSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#E85D75"/><stop offset="100%" stop-color="#D4405A"/></linearGradient></defs>
|
||||
<circle cx="50" cy="50" r="46" fill="url(#g)"/>
|
||||
<path d="M22 54 L34 54 L38 44 L42 64 L46 36 L50 54 L78 54" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" opacity="0.9"/>
|
||||
<circle cx="46" cy="36" r="3" fill="#fff" opacity="0.9"/>
|
||||
<rect x="20" y="68" width="60" height="10" rx="5" fill="#fff" opacity="0.2"/>
|
||||
</svg>`;
|
||||
|
||||
// Generate data URIs
|
||||
export const pillImg = svgToDataUri(pillSvg);
|
||||
export const syringeImg = svgToDataUri(syringeSvg);
|
||||
export const heartImg = svgToDataUri(heartSvg);
|
||||
export const leafImg = svgToDataUri(leafSvg);
|
||||
export const vitaminImg = svgToDataUri(vitaminSvg);
|
||||
export const bandageImg = svgToDataUri(bandageSvg);
|
||||
export const educationImg = svgToDataUri(educationSvg);
|
||||
export const insulinImg = svgToDataUri(insulinSvg);
|
||||
export const heartMonitorImg = svgToDataUri(heartMonitorSvg);
|
||||
|
||||
// Get image for drug category
|
||||
export function getDrugImage(category: string): string {
|
||||
const map: Record<string, string> = {
|
||||
'抗生素': pillImg,
|
||||
'解热镇痛': pillImg,
|
||||
'消化系统': pillImg,
|
||||
'抗过敏': pillImg,
|
||||
'降糖药': syringeImg,
|
||||
'心血管': heartImg,
|
||||
'中成药': leafImg,
|
||||
'维生素': vitaminImg,
|
||||
'外用': bandageImg,
|
||||
};
|
||||
return map[category] || pillImg;
|
||||
}
|
||||
Reference in New Issue
Block a user