### Fuzzy Store Search with useMartList Composable (TypeScript)

Source: https://context7.com/minato1123/taiwan-cvs-map/llms.txt

The useMartList composable provides fuzzy search capabilities using the FZF algorithm for store recommendations based on address, ID, or name. It takes a list of all store data (`allMartList`) as input. It returns a list of recommended stores with matching characters highlighted, or the first store matching a given name or number. Dependencies include custom `MartDataType` from '@/types'.

```typescript
import { useMartList } from '@/composables/useMartList'
import type { MartDataType } from '@/types'

const allStores: MartDataType[] = [
  {
    name: 'FamilyMart Xinyi Store',
    id: 'FM12345',
    tel: '02-2345-6789',
    lat: 25.0330,
    lng: 121.5654,
    city: '台北市',
    area: '信義區',
    address: '台北市信義區信義路五段7號',
    service: ['two-famiice', 'smart-coffee', 'charge-spot']
  }
]

const { getRecommendMartList, searchByMartName, searchByMartNumber } = useMartList({
  allMartList: allStores
})

// Get fuzzy-matched recommendations (highlights matching characters)
const recommendations = getRecommendMartList('信義路')
// Returns up to 10 stores with addresses containing matching characters
// Matched characters are wrapped in <span class="search-keyword">

// Search by store name
const store = searchByMartName('信義')
// Returns first store with name containing '信義'

// Search by store ID
const storeById = searchByMartNumber('FM123')
// Returns first store with ID starting with 'FM123'
```

--------------------------------

### Fetch FamilyMart Store Data Script (TypeScript)

Source: https://context7.com/minato1123/taiwan-cvs-map/llms.txt

This script fetches and normalizes store data from the FamilyMart API. It iterates through cities and towns, fetches store lists using `ofetch`, normalizes the data, and writes it to a JSON file. Dependencies include `ofetch` and `fs/promises`. It requires rate limiting to avoid API restrictions.

```typescript
// fetch-familymart-list.ts - Fetch FamilyMart store data
import { ofetch } from 'ofetch'
import { writeFile } from 'fs/promises'

// Fetch all stores by iterating through cities and towns
async function execute() {
  const cities = ['基隆市', '台北市', '新北市', '桃園市', /* ... */]
  const storeList = []

  for (const city of cities) {
    const townList = await getTownList(city)
    for (const town of townList) {
      const stores = await ofetch(
        `https://api.map.com.tw/net/familyShop.aspx?searchType=ShopList&city=${city}&area=${town.town}`,
        {
          headers: { Referer: 'https://www.family.com.tw/' },
          parseResponse(text) {
            return JSON.parse(text.replace('showStoreList(', '').replace(')', ''))
          }
        }
      )
      storeList.push(...stores.map(normalizeStore))
    }
    await delay(3000) // Rate limiting
  }

  await writeFile('./src/assets/json/f_data.json', JSON.stringify(storeList, null, 2))
}

// Run with: pnpm run fetch-familymart-list
```

--------------------------------

### Fetch 7-Eleven Store Data Script (TypeScript)

Source: https://context7.com/minato1123/taiwan-cvs-map/llms.txt

This script fetches and normalizes store data from the 7-Eleven API. It uses `xml-js` to convert XML API responses to JSON and then processes them into a standardized format. Dependencies include `ofetch` and `xml-js`. Ensure `NODE_TLS_REJECT_UNAUTHORIZED` is set if required.

```typescript
// fetch-711-mart-list.ts - Fetch 7-Eleven store data
import { xml2json } from 'xml-js'

async function getAreaStoreList(city: string, town: string) {
  const url = `https://emap.pcsc.com.tw/EMapSDK.aspx?commandid=SearchStore&city=${city}&town=${town}`
  return await ofetch(url, {
    headers: { Referer: 'https://emap.pcsc.com.tw/' },
    parseResponse(responseText) {
      const jsonData = JSON.parse(xml2json(responseText, { compact: true }))
      const dataList = jsonData.iMapSDKOutput.GeoPosition
      return dataList.map(store => ({
        id: store.POIID._text,
        name: store.POIName._text + '門市',
        lat: +store.Y._text / 10**6,
        lng: +store.X._text / 10**6,
        address: normalizeAddress(store.Address._text),
        service: (store.StoreImageTitle._text ?? '').split(',')
          .map(s => serviceConversionTable[s])
          .filter(Boolean)
      }))
    }
  })
}

// Run with: NODE_TLS_REJECT_UNAUTHORIZED=0 pnpm run fetch-711-list
```

--------------------------------

### Initialize and Manage Leaflet Map with useMap Composable (TypeScript)

Source: https://context7.com/minato1123/taiwan-cvs-map/llms.txt

The useMap composable handles Leaflet map interactions, including initialization, marker placement, GPS positioning, and navigation events. It requires initial center coordinates, zoom level, and callbacks for updating zoom and latitude/longitude. It can also integrate with a router for URL state synchronization and specifies the store type ('familymart' or '7-11'). Dependencies include Vue's `ref` and custom `PointType` and `MartDataType` from '@/types'.

```typescript
import { useMap } from '@/composables/useMap'
import type { PointType } from '@/types'

// Initialize map with center point, zoom level, and router integration
const { 
  map, 
  mapEl, 
  getMapBound, 
  currentMart, 
  updateCurrentMart, 
  setMarkers, 
  moveToGpsLatlng 
} = useMap({
  centerPoint: { lat: 25.0330, lng: 121.5654 }, // Taipei coordinates
  currentZoom: 17,
  updateZoom: (zoom: number) => { /* update zoom handler */ },
  currentLatLng: ref<PointType | null>(null),
  updateLatLng: (latlng: PointType, replace?: boolean) => { /* update coordinates */ },
  pushRouter: (replace?: boolean) => { /* sync URL state */ },
  store: 'familymart' // or '7-11'
})

// Set markers for all stores in current view
setMarkers([
  {
    name: 'FamilyMart Taipei Station',
    id: 'TP001',
    tel: '02-2312-3456',
    lat: 25.0478,
    lng: 121.5170,
    city: '台北市',
    area: '中正區',
    address: '台北市中正區北平西路3號',
    service: ['single-famiice', 'toilet', 'rest-area']
  }
])

// Move map to user's GPS location (with 3-second timeout)
moveToGpsLatlng()

// Get current map boundaries
const bounds = getMapBound()
// Returns: { east: 121.6, north: 25.1, west: 121.5, south: 25.0 }
```

--------------------------------

### Vue Router Configuration (TypeScript)

Source: https://context7.com/minato1123/taiwan-cvs-map/llms.txt

Configures Vue Router for navigating between FamilyMart and 7-Eleven store pages. It supports optional latitude/longitude parameters for specific locations and includes a redirect to the FamilyMart page as the default route. Dependencies include `vue-router`.

```typescript
import { createRouter, createWebHistory } from 'vue-router'
import FamilymartPage from './views/FamilymartPage.vue'
import SevenPage from './views/SevenPage.vue'

const router = createRouter({
  history: createWebHistory('/taiwan-cvs-map/'),
  routes: [
    {
      path: '/familymart/:latlng?',
      name: 'familymart',
      component: FamilymartPage
    },
    {
      path: '/7-11/:latlng?',
      name: '7-11',
      component: SevenPage
    },
    {
      path: '/',
      redirect: '/familymart'
    }
  ]
})

// Example URLs:
// /familymart - Default view
// /familymart/25_0330,121_5654?zoom=17&services=single-famiice,toilet
// /7-11/24_1477,120_6736?zoom=15
```

--------------------------------

### Synchronize Map State with URL using useRouterUrl Composable (TypeScript)

Source: https://context7.com/minato1123/taiwan-cvs-map/llms.txt

The useRouterUrl composable synchronizes map state (coordinates, zoom level, service filters) with the browser's URL, enabling shareable map states. It provides functions to update these states and push them to the router. Coordinates are encoded with underscores instead of dots in the URL. It also allows reading the current state directly from the URL. Dependencies include Vue's `ref`.

```typescript
import { useRouterUrl } from '@/composables/useRouterUrl'

const { 
  currentLatLng, 
  updateLatLng, 
  currentZoom, 
  updateZoom, 
  currentServiceList, 
  updateServices, 
  pushRouter 
} = useRouterUrl()

// Update coordinates (dots replaced with underscores in URL)
updateLatLng({ lat: 25.0330, lng: 121.5654 })
// URL becomes: /familymart/25_0330,121_5654

// Update zoom level
updateZoom(15)
// URL query: ?zoom=15

// Update service filters
updateServices(['single-famiice', 'toilet', 'parking'])
// URL query: ?zoom=15&services=single-famiice,toilet,parking

// Apply all URL changes
pushRouter() // or pushRouter(true) for replace mode

// Read current state from URL
console.log(currentLatLng.value) // { lat: 25.0330, lng: 121.5654 }
console.log(currentZoom.value)   // 15
console.log(currentServiceList.value) // ['single-famiice', 'toilet', 'parking']
```

--------------------------------

### TypeScript Type Definitions for Store Data and Services

Source: https://context7.com/minato1123/taiwan-cvs-map/llms.txt

Defines core data structures for convenience store information, including name, ID, location, and available services. It also specifies types for geographic coordinates, map bounding boxes, and distinct service offerings for Familymart and 7-Eleven.

```typescript
// Convenience store data structure
export type MartDataType = {
  name: string          // Store name
  id: string           // Unique store identifier
  tel: string          // Phone number
  lat: number          // Latitude (WGS84)
  lng: number          // Longitude (WGS84)
  city: string         // City/county
  area: string         // District/town
  address: string      // Full normalized address
  service: (sevenElevenServiceType | FamilymartServiceType)[]
}

// Geographic coordinates
export type PointType = {
  lat: number
  lng: number
}

// Map bounding box
export type BoundType = {
  east: number
  north: number
  west: number
  south: number
}

// FamilyMart service types
export type FamilymartServiceType =
  | 'single-famiice'    // Single-flavor ice cream
  | 'two-famiice'       // Dual-flavor ice cream
  | 'smart-coffee'      // Smart coffee machine
  | 'toilet'            // Restroom
  | 'rest-area'         // Seating area
  | 'charge-spot'       // ChargeSPOT power bank rental
  | 'gogoro-battery-exchange' // Gogoro battery swap
  // ... 24 total service types

// 7-Eleven service types
export type sevenElevenServiceType =
  | 'parking' | 'toilet' | 'atm' | 'seat'
  | 'ice-cream' | 'slurpee' | 'fresh-tea'
  | 'gogoro' | 'ionex' // ... 43 total service types

```

--------------------------------

### Composable for Service Lists (TypeScript)

Source: https://context7.com/minato1123/taiwan-cvs-map/llms.txt

The `useServiceList` composable maps store service codes to localized display names for FamilyMart and 7-Eleven. It returns a service map and a function to retrieve service lists by mart type. Dependencies include the Vue Composition API.

```typescript
import { useServiceList } from '@/composables/useServiceList'

// FamilyMart services
const { serviceMap, getServiceListByMart } = useServiceList('familymart')

// Get all service mappings
console.log(Object.keys(serviceMap))
// ['coffee-hybrid-shop', 'fami-super', 'smart-coffee', 'single-famiice', ...]

// Get localized name for specific service
const serviceName = getServiceListByMart('single-famiice')
// Returns: 'Fami!ce（單口味店）'

// 7-Eleven services
const { serviceMap: sevenMap, getServiceListByMart: getSevenService } = useServiceList('7-11')

const sevenService = getSevenService('ice-cream')
// Returns: '雪淋霜霜淇淋'

// Common service types across both stores
const commonServices = ['toilet', 'parking', 'atm', 'seat']
```

--------------------------------

### Global Root Styles (CSS)

Source: https://github.com/minato1123/taiwan-cvs-map/blob/main/index.html

Sets global CSS variables and styles for the root element. It defines a white color variable (--white-color) and specifies 'Noto Sans TC' as the default font. Additionally, it ensures no horizontal overflow on the application's root element.

```css
:root {
  --white-color: 255, 255, 255;
  font-family: 'Noto Sans TC', sans-serif;
}

#app {
  overflow-x: hidden;
}
```

--------------------------------

### 7-11 Theme Styles (CSS)

Source: https://github.com/minato1123/taiwan-cvs-map/blob/main/index.html

Defines the main and matching colors for the 7-11 theme, using CSS variables. This snippet sets the primary color to a shade of green (50, 168, 82) and the matching color to a shade of orange (255, 102, 2).

```css
html[theme="7-11"] { --main-color: 50, 168, 82; --match-color: 255, 102, 2; }
```

--------------------------------

### FamilyMart Theme Styles (CSS)

Source: https://github.com/minato1123/taiwan-cvs-map/blob/main/index.html

Defines the main and matching colors for the FamilyMart theme, using CSS variables. This snippet sets the primary color to a shade of blue (0, 140, 214) and the matching color to a shade of green (0, 160, 64).

```css
html[theme="familymart"] { --main-color: 0, 140, 214; --match-color: 0, 160, 64; }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.