feat: migrate app routes and business modules

components/genealogy/RegionPickerSheet.vue

@@ -0,0 +1,187 @@
+<template>
+  <view v-if="visible" class="region-sheet">
+    <view class="region-sheet__mask" @click="requestMaskClose" />
+    <view class="region-sheet__panel">
+      <view class="region-sheet__intro">
+        <text class="region-sheet__title">选择地区</text>
+      </view>
+      <view class="region-sheet__picker">
+        <view class="region-sheet__column-headings">
+          <text
+            v-for="label in columnLabels"
+            :key="label"
+            class="region-sheet__column-heading"
+          >
+            {{ label }}
+          </text>
+        </view>
+        <picker-view
+          class="region-sheet__picker-view"
+          :indicator-style="indicatorStyle"
+          :value="indexes"
+          @change="$emit('change', $event)"
+        >
+          <picker-view-column
+            v-for="(column, columnIndex) in columns"
+            :key="columnIndex"
+          >
+            <view
+              v-for="(option, optionIndex) in column"
+              :key="option.regionCode"
+              class="region-sheet__picker-item"
+              :class="{
+                'region-sheet__picker-item--selected':
+                  indexes[columnIndex] === optionIndex,
+              }"
+            >
+              {{ option.label }}
+            </view>
+          </picker-view-column>
+        </picker-view>
+      </view>
+      <view class="region-sheet__footer">
+        <view class="region-sheet__cancel" @click="$emit('cancel')">取消</view>
+        <button class="region-sheet__confirm" @click="$emit('confirm')">
+          确认选择
+        </button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  visible: { type: Boolean, default: false },
+  columns: { type: Array, default: () => [] },
+  indexes: { type: Array, default: () => [] },
+  indicatorStyle: { type: String, required: true },
+  closeOnMask: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["change", "cancel", "confirm"]);
+
+const regionLevelLabels = Object.freeze([
+  "省份",
+  "城市",
+  "区县",
+  "乡镇街道",
+  "村社区",
+]);
+const columnLabels = computed(() =>
+  regionLevelLabels.slice(0, props.columns.length),
+);
+
+const requestMaskClose = () => {
+  if (props.closeOnMask) emit("cancel");
+};
+</script>
+
+<style scoped lang="scss">
+.region-sheet {
+  position: fixed;
+  z-index: 10;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+}
+.region-sheet__mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(43, 30, 20, 0.42);
+}
+.region-sheet__panel {
+  position: relative;
+  width: 100%;
+  padding: 22rpx 28rpx calc(24rpx + env(safe-area-inset-bottom));
+  border-radius: 30rpx 30rpx 0 0;
+  background: #fdf9ef;
+  box-shadow: 0 -12rpx 36rpx rgba(43, 30, 20, 0.2);
+}
+.region-sheet__intro {
+  padding: 0 10rpx 16rpx;
+  text-align: center;
+}
+.region-sheet__title {
+  display: block;
+  color: $ink;
+  font-family: STKaiti, KaiTi, serif;
+  font-size: clamp(19px, 36rpx, 24px);
+  font-weight: 700;
+}
+.region-sheet__picker {
+  overflow: hidden;
+  border: 1rpx solid rgba(128, 89, 49, 0.28);
+  border-radius: 16rpx;
+  background: rgba(255, 252, 245, 0.8);
+}
+.region-sheet__column-headings {
+  display: flex;
+  height: 84rpx;
+  border-bottom: 1rpx solid rgba(128, 89, 49, 0.18);
+}
+.region-sheet__column-heading {
+  box-sizing: border-box;
+  width: 33.333%;
+  padding: 24rpx 12rpx;
+  color: $ink-muted;
+  font-size: clamp(16px, 26rpx, 20px);
+  text-align: center;
+}
+.region-sheet__column-heading + .region-sheet__column-heading {
+  border-left: 1rpx solid rgba(128, 89, 49, 0.16);
+}
+.region-sheet__picker-view {
+  width: 100%;
+  height: 520rpx;
+}
+.region-sheet__picker-item {
+  box-sizing: border-box;
+  height: 104rpx;
+  overflow: hidden;
+  padding: 0 6rpx;
+  color: $ink;
+  font-size: clamp(16px, 28rpx, 20px);
+  line-height: 104rpx;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.region-sheet__picker-item--selected {
+  color: $brand-red;
+  font-weight: 700;
+}
+.region-sheet__footer {
+  display: flex;
+  align-items: center;
+  margin-top: 22rpx;
+  gap: 12rpx;
+}
+.region-sheet__cancel {
+  min-width: 116rpx;
+  padding: 20rpx 10rpx;
+  color: $ink-muted;
+  font-size: clamp(16px, 28rpx, 20px);
+  text-align: center;
+}
+.region-sheet__confirm {
+  display: flex;
+  min-height: 82rpx;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 10rpx;
+  background: $brand-red;
+  color: #fff;
+  font-size: clamp(16px, 29rpx, 20px);
+  font-weight: 700;
+  line-height: 1.4;
+}
+.region-sheet__confirm::after {
+  display: none;
+}
+</style>