chore: initialize frontend miniapp repository

src/components/content/FacilityCard.vue

@@ -0,0 +1,105 @@
+<template>
+  <view class="facility-card" @tap="handleClick">
+    <view class="facility-icon">
+      <text class="icon-text">{{ getIcon(facility.type) }}</text>
+    </view>
+    <view class="facility-content">
+      <text class="facility-name">{{ facility.name }}</text>
+      <text v-if="facility.floor" class="facility-floor">{{ facility.floor }}</text>
+    </view>
+    <view class="facility-arrow">
+      <text class="arrow-icon">›</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Facility {
+  id: string
+  name: string
+  type: 'restroom' | 'cafe' | 'shop' | 'exit' | 'elevator' | 'info'
+  floor?: string
+}
+
+const props = defineProps<{
+  facility: Facility
+}>()
+
+const emit = defineEmits<{
+  click: [facility: Facility]
+}>()
+
+const getIcon = (type: string): string => {
+  const icons: Record<string, string> = {
+    restroom: '🚻',
+    cafe: '☕',
+    shop: '🛍️',
+    exit: '🚪',
+    elevator: '🛗',
+    info: 'ℹ️'
+  }
+  return icons[type] || '📍'
+}
+
+const handleClick = () => {
+  emit('click', props.facility)
+}
+</script>
+
+<style scoped lang="scss">
+.facility-card {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  background-color: var(--museum-bg-surface);
+  border-radius: var(--radius-button);
+  padding: var(--space-md);
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.facility-card:active {
+  background-color: var(--museum-bg-light);
+}
+
+.facility-icon {
+  width: 40px;
+  height: 40px;
+  background-color: var(--museum-bg-light);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-text {
+  font-size: 20px;
+}
+
+.facility-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.facility-name {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--museum-text-primary);
+}
+
+.facility-floor {
+  font-size: 12px;
+  color: var(--museum-text-disabled);
+}
+
+.facility-arrow {
+  color: var(--museum-text-disabled);
+}
+
+.arrow-icon {
+  font-size: 20px;
+}
+</style>