fix: 1:1 prototype port – exact hms-* CSS, real logo, all components from app.js
This commit is contained in:
Implementation Engineer
@@ -1,90 +1,24 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col items-center gap-2 p-4 rounded-lg border border-border-default bg-panel hover:border-accent-border transition-colors duration-fast cursor-pointer group"
|
||||
role="button"
|
||||
:tabindex="0"
|
||||
:aria-label="type"
|
||||
@click="$emit('select', type)"
|
||||
@keydown.enter="$emit('select', type)"
|
||||
>
|
||||
<svg
|
||||
:width="size"
|
||||
:height="size"
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
class="text-secondary group-hover:text-accent transition-colors duration-fast"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<!-- Line Array -->
|
||||
<template v-if="type === 'line-array'">
|
||||
<rect x="6" y="16" width="8" height="16" rx="1" fill="currentColor" />
|
||||
<path d="M16 20 L24 14 M16 28 L24 34" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
<path d="M26 12 L30 10 M26 36 L30 38" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.6" />
|
||||
<path d="M32 8 L36 6 M32 40 L36 42" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.3" />
|
||||
</template>
|
||||
|
||||
<!-- Subwoofer -->
|
||||
<template v-else-if="type === 'subwoofer'">
|
||||
<rect x="8" y="8" width="32" height="32" rx="2" fill="none" stroke="currentColor" stroke-width="2" />
|
||||
<circle cx="24" cy="24" r="8" fill="none" stroke="currentColor" stroke-width="2" />
|
||||
<circle cx="24" cy="24" r="4" fill="none" stroke="currentColor" stroke-width="1.5" />
|
||||
</template>
|
||||
|
||||
<!-- Point Source -->
|
||||
<template v-else-if="type === 'point-source'">
|
||||
<rect x="10" y="18" width="10" height="12" rx="1" fill="currentColor" />
|
||||
<path d="M22 16 Q28 24 22 32" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
<path d="M26 12 Q34 24 26 36" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.6" />
|
||||
</template>
|
||||
|
||||
<!-- Column Array -->
|
||||
<template v-else-if="type === 'column-array'">
|
||||
<rect x="16" y="6" width="16" height="36" rx="1" fill="none" stroke="currentColor" stroke-width="2" />
|
||||
<circle cx="24" cy="14" r="3" fill="currentColor" />
|
||||
<circle cx="24" cy="24" r="3" fill="currentColor" />
|
||||
<circle cx="24" cy="34" r="3" fill="currentColor" />
|
||||
</template>
|
||||
|
||||
<!-- Monitor -->
|
||||
<template v-else-if="type === 'monitor'">
|
||||
<path d="M6 30 L24 14 L42 30 L42 34 L6 34 Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
|
||||
<circle cx="24" cy="26" r="4" fill="none" stroke="currentColor" stroke-width="1.5" />
|
||||
</template>
|
||||
|
||||
<!-- Moving Head -->
|
||||
<template v-else>
|
||||
<rect x="18" y="6" width="12" height="10" rx="1" fill="currentColor" />
|
||||
<path d="M24 16 L24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
<circle cx="24" cy="30" r="6" fill="none" stroke="currentColor" stroke-width="2" />
|
||||
<path d="M18 30 L14 30 M30 30 L34 30" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.5" />
|
||||
</template>
|
||||
</svg>
|
||||
<span class="text-xs text-text-muted group-hover:text-accent transition-colors duration-fast">{{ label }}</span>
|
||||
</div>
|
||||
<span class="hms-speaker-icon-wrap" v-html="svgStr"></span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = withDefaults(defineProps<{
|
||||
type: "line-array" | "subwoofer" | "point-source" | "column-array" | "monitor" | "moving-head";
|
||||
label?: string;
|
||||
size?: number;
|
||||
}>(), {
|
||||
label: "",
|
||||
size: 48,
|
||||
});
|
||||
import { computed } from 'vue'
|
||||
|
||||
const labelMap: Record<string, string> = {
|
||||
"line-array": "Line Array",
|
||||
"subwoofer": "Subwoofer",
|
||||
"point-source": "Point Source",
|
||||
"column-array": "Column Array",
|
||||
"monitor": "Monitor",
|
||||
"moving-head": "Moving Head",
|
||||
};
|
||||
const props = withDefaults(defineProps<{ type?: string }>(), { type: 'linearray' })
|
||||
|
||||
const label = computed(() => props.label || labelMap[props.type] || props.type);
|
||||
const icons: Record<string, string> = {
|
||||
linearray: '<rect x="8" y="2" width="16" height="40" rx="2"/><circle cx="16" cy="10" r="3"/><circle cx="16" cy="22" r="4"/><circle cx="16" cy="34" r="3"/>',
|
||||
subwoofer: '<rect x="4" y="8" width="24" height="20" rx="3"/><circle cx="16" cy="18" r="7"/><circle cx="16" cy="18" r="3"/>',
|
||||
monitor: '<path d="M4 6h20v14H4z"/><path d="M8 24h12"/><circle cx="14" cy="13" r="3"/>',
|
||||
pointsource: '<circle cx="16" cy="16" r="12"/><circle cx="16" cy="16" r="6"/><circle cx="16" cy="16" r="2"/>',
|
||||
column: '<rect x="10" y="2" width="12" height="44" rx="2"/><circle cx="16" cy="8" r="2"/><circle cx="16" cy="16" r="2"/><circle cx="16" cy="24" r="2"/><circle cx="16" cy="32" r="2"/><circle cx="16" cy="40" r="2"/>',
|
||||
movinghead: '<rect x="10" y="4" width="12" height="16" rx="2"/><path d="M16 20v8"/><rect x="8" y="28" width="16" height="4" rx="1"/>'
|
||||
}
|
||||
|
||||
defineEmits<{
|
||||
select: [type: string];
|
||||
}>();
|
||||
const svgStr = computed(() =>
|
||||
'<svg class="hms-speaker-icon" viewBox="0 0 32 48" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">' +
|
||||
(icons[props.type] || icons.linearray) +
|
||||
'</svg>'
|
||||
)
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user