Initial commit of akmon project

pages/mt/search.uvue

@@ -0,0 +1,41 @@
+<template>
+  <view :class="['mt-search', isLargeScreen ? 'large' : 'small']">
+    <view class="mt-search-bar">
+      <input v-model="keyword" :placeholder="t('mt.search.placeholder')" @confirm="onSearch" />
+      <button @tap="onSearch">{{ t('mt.search.button') }}</button>
+    </view>
+    <scroll-view>
+      <view v-for="item in searchResults" :key="item.id" class="mt-search-item" @tap="goToDetail(item.id)">
+        <text>{{ item.title }}</text>
+        <text class="mt-summary">{{ item.summary }}</text>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+<script lang="uts">
+import { ref } from 'uni-app'
+import { t } from '@/i18n/mt'
+import { isLargeScreen } from '@/utils/responsive'
+import { searchNews } from '@/composables/use-news'
+
+const keyword = ref('')
+const searchResults = ref([])
+
+function onSearch() {
+  searchNews(keyword.value).then(res => {
+    searchResults.value = res
+  })
+}
+function goToDetail(id: string) {
+  uni.navigateTo({ url: `/pages/mt/detail.uvue?id=${id}` })
+}
+</script>
+<style lang="scss">
+.mt-search {
+  padding: 24rpx;
+  &.large { max-width: 900rpx; margin: 0 auto; }
+  .mt-search-bar { display: flex; gap: 16rpx; margin-bottom: 24rpx; }
+  .mt-search-item { padding: 16rpx 0; border-bottom: 1px solid #eee; }
+  .mt-summary { color: #888; font-size: 24rpx; }
+}
+</style>