init project
This commit is contained in:
Timi
@@ -0,0 +1,313 @@
|
||||
<template>
|
||||
<div class="body-selector" :class="{ readonly: props.readonly }">
|
||||
<svg
|
||||
viewBox="0 0 240 500"
|
||||
class="figure"
|
||||
role="group"
|
||||
aria-label="正面人体调理部位选择"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g class="face-guide" aria-hidden="true">
|
||||
<circle cx="110" cy="56" r="3.5" />
|
||||
<circle cx="130" cy="56" r="3.5" />
|
||||
<path d="M120 62L116 72H124" />
|
||||
<path d="M108 80C113 85 127 85 132 80" />
|
||||
</g>
|
||||
<g
|
||||
v-for="area in areas"
|
||||
:key="area.key"
|
||||
class="area"
|
||||
:class="{ active: isSelected(area.key) }"
|
||||
role="checkbox"
|
||||
:tabindex="props.readonly ? -1 : 0"
|
||||
:aria-label="area.label"
|
||||
:aria-checked="isSelected(area.key)"
|
||||
@click="toggle(area.key)"
|
||||
@keydown.enter.prevent="toggle(area.key)"
|
||||
@keydown.space.prevent="toggle(area.key)"
|
||||
>
|
||||
<title v-text="area.label" />
|
||||
<ellipse
|
||||
v-if="area.shape === 'ellipse'"
|
||||
:cx="area.cx"
|
||||
:cy="area.cy"
|
||||
:rx="area.rx"
|
||||
:ry="area.ry"
|
||||
/>
|
||||
<rect
|
||||
v-else-if="area.shape === 'rect'"
|
||||
:x="area.x"
|
||||
:y="area.y"
|
||||
:width="area.width"
|
||||
:height="area.height"
|
||||
:rx="area.radius"
|
||||
/>
|
||||
<path v-else :d="area.path" />
|
||||
</g>
|
||||
</svg>
|
||||
<p class="selected" v-text="selectedText" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface BodyArea {
|
||||
key: string;
|
||||
label: string;
|
||||
shape: "ellipse" | "rect" | "path";
|
||||
cx?: number;
|
||||
cy?: number;
|
||||
rx?: number;
|
||||
ry?: number;
|
||||
x?: number;
|
||||
y?: number;
|
||||
width?: number;
|
||||
height?: number;
|
||||
radius?: number;
|
||||
path?: string;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: {
|
||||
selectedCodeList: string[];
|
||||
};
|
||||
readonly?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "update:modelValue", value: { selectedCodeList: string[] }): void;
|
||||
}>();
|
||||
|
||||
const areas: BodyArea[] = [
|
||||
{ key: "head", label: "头部", shape: "ellipse", cx: 120, cy: 62, rx: 31, ry: 35 },
|
||||
{ key: "neck", label: "颈部", shape: "rect", x: 108, y: 96, width: 24, height: 24, radius: 9 },
|
||||
{ key: "left-shoulder", label: "右肩", shape: "ellipse", cx: 86, cy: 135, rx: 25, ry: 19 },
|
||||
{ key: "right-shoulder", label: "左肩", shape: "ellipse", cx: 154, cy: 135, rx: 25, ry: 19 },
|
||||
{
|
||||
key: "left-upper-arm",
|
||||
label: "右上臂",
|
||||
shape: "path",
|
||||
path: "M69 128C59 130 52 136 49 147L31 216C30 224 34 230 41 232C49 234 54 229 56 222L79 157C84 143 81 132 69 128Z"
|
||||
},
|
||||
{
|
||||
key: "right-upper-arm",
|
||||
label: "左上臂",
|
||||
shape: "path",
|
||||
path: "M171 128C181 130 188 136 191 147L209 216C210 224 206 230 199 232C191 234 186 229 184 222L161 157C156 143 159 132 171 128Z"
|
||||
},
|
||||
{
|
||||
key: "left-forearm",
|
||||
label: "右前臂",
|
||||
shape: "path",
|
||||
path: "M31 218C38 217 49 221 56 225L44 298C43 307 38 312 30 311C22 310 18 304 20 295Z"
|
||||
},
|
||||
{
|
||||
key: "right-forearm",
|
||||
label: "左前臂",
|
||||
shape: "path",
|
||||
path: "M209 218C202 217 191 221 184 225L196 298C197 307 202 312 210 311C218 310 222 304 220 295Z"
|
||||
},
|
||||
{
|
||||
key: "left-hand",
|
||||
label: "右手",
|
||||
shape: "path",
|
||||
path: "M20 313C22 306 40 307 44 314L42 337C40 347 34 353 28 350C23 347 19 339 18 330Z"
|
||||
},
|
||||
{
|
||||
key: "right-hand",
|
||||
label: "左手",
|
||||
shape: "path",
|
||||
path: "M220 313C218 306 200 307 196 314L198 337C200 347 206 353 212 350C217 347 221 339 222 330Z"
|
||||
},
|
||||
{
|
||||
key: "left-chest",
|
||||
label: "右胸",
|
||||
shape: "path",
|
||||
path: "M94 116C103 112 111 110 119 110L119 199C107 199 96 197 86 193L83 151Z"
|
||||
},
|
||||
{
|
||||
key: "right-chest",
|
||||
label: "左胸",
|
||||
shape: "path",
|
||||
path: "M121 110C129 110 137 112 146 116L157 151L154 193C144 197 133 199 121 199Z"
|
||||
},
|
||||
{
|
||||
key: "left-abdomen",
|
||||
label: "右腹",
|
||||
shape: "path",
|
||||
path: "M86 197C96 201 107 203 119 203L119 263C108 263 98 261 89 256Z"
|
||||
},
|
||||
{
|
||||
key: "right-abdomen",
|
||||
label: "左腹",
|
||||
shape: "path",
|
||||
path: "M121 203C133 203 144 201 154 197L151 256C142 261 132 263 121 263Z"
|
||||
},
|
||||
{
|
||||
key: "left-waist",
|
||||
label: "右腰",
|
||||
shape: "path",
|
||||
path: "M89 259C98 264 108 266 119 267L119 302C107 302 96 299 86 294Z"
|
||||
},
|
||||
{
|
||||
key: "right-waist",
|
||||
label: "左腰",
|
||||
shape: "path",
|
||||
path: "M121 267C132 266 142 264 151 259L154 294C144 299 133 302 121 302Z"
|
||||
},
|
||||
{
|
||||
key: "left-thigh",
|
||||
label: "右大腿",
|
||||
shape: "path",
|
||||
path: "M86 298C96 302 106 304 117 302L113 368C104 372 91 372 82 368L79 333Z"
|
||||
},
|
||||
{
|
||||
key: "right-thigh",
|
||||
label: "左大腿",
|
||||
shape: "path",
|
||||
path: "M123 302C134 304 144 302 154 298L161 333L158 368C149 372 136 372 127 368Z"
|
||||
},
|
||||
{ key: "left-knee", label: "右膝", shape: "ellipse", cx: 97, cy: 382, rx: 16, ry: 15 },
|
||||
{ key: "right-knee", label: "左膝", shape: "ellipse", cx: 143, cy: 382, rx: 16, ry: 15 },
|
||||
{
|
||||
key: "left-calf",
|
||||
label: "右小腿",
|
||||
shape: "path",
|
||||
path: "M83 397C92 400 102 400 111 397L108 462C100 466 91 466 83 462L80 424Z"
|
||||
},
|
||||
{
|
||||
key: "right-calf",
|
||||
label: "左小腿",
|
||||
shape: "path",
|
||||
path: "M129 397C138 400 148 400 157 397L160 424L157 462C149 466 140 466 132 462Z"
|
||||
},
|
||||
{
|
||||
key: "left-foot",
|
||||
label: "右脚",
|
||||
shape: "path",
|
||||
path: "M83 462C90 465 101 465 108 462L110 480C110 489 103 494 91 494H77C72 493 73 487 78 482Z"
|
||||
},
|
||||
{
|
||||
key: "right-foot",
|
||||
label: "左脚",
|
||||
shape: "path",
|
||||
path: "M132 462C139 465 150 465 157 462L162 482C167 487 168 493 163 494H149C137 494 130 489 130 480Z"
|
||||
}
|
||||
];
|
||||
|
||||
const selectedText = computed(() => {
|
||||
const selectedLabelList = selectedCodeList.value.map(item => areaLabelMap.value.get(item) || item);
|
||||
return selectedLabelList.length ? `已选部位：${selectedLabelList.join("、")}` : "已选部位：未选择";
|
||||
});
|
||||
|
||||
const areaLabelMap = computed(() => new Map(areas.map(item => [item.key, item.label])));
|
||||
const selectedCodeList = computed(() => props.modelValue?.selectedCodeList || []);
|
||||
|
||||
function isSelected(code: string): boolean {
|
||||
return selectedCodeList.value.includes(code);
|
||||
}
|
||||
|
||||
function toggle(code: string): void {
|
||||
if (props.readonly) {
|
||||
return;
|
||||
}
|
||||
|
||||
const next = new Set(selectedCodeList.value);
|
||||
if (next.has(code)) {
|
||||
next.delete(code);
|
||||
} else {
|
||||
next.add(code);
|
||||
}
|
||||
|
||||
emit("update:modelValue", {
|
||||
selectedCodeList: Array.from(next)
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.body-selector {
|
||||
display: flex;
|
||||
padding: .75rem;
|
||||
gap: .75rem;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: #f8fbff;
|
||||
border-radius: 1.25rem;
|
||||
|
||||
.figure {
|
||||
width: 100%;
|
||||
height: 31rem;
|
||||
max-width: 16rem;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.face-guide {
|
||||
fill: none;
|
||||
stroke: #94a3b8;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.area {
|
||||
fill: transparent;
|
||||
stroke: #64748b;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
pointer-events: all;
|
||||
stroke-width: 2;
|
||||
transition: fill .2s ease, stroke .2s ease, stroke-width .2s ease;
|
||||
|
||||
&:focus-visible {
|
||||
stroke: #0f766e;
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
&.active {
|
||||
fill: rgba(15, 118, 110, .24);
|
||||
stroke: #0f766e;
|
||||
stroke-width: 4;
|
||||
}
|
||||
}
|
||||
|
||||
&.readonly {
|
||||
.area {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
margin: 0;
|
||||
color: #52607a;
|
||||
font-size: .875rem;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.body-selector {
|
||||
background: rgba(15, 23, 42, .72);
|
||||
|
||||
.face-guide {
|
||||
stroke: #cbd5e1;
|
||||
}
|
||||
|
||||
.area {
|
||||
fill: transparent;
|
||||
stroke: #94a3b8;
|
||||
|
||||
&.active {
|
||||
fill: rgba(94, 234, 212, .24);
|
||||
stroke: #5eead4;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user