1

src/features/ht/components/HtBaseInfo.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useZxFwPricingStore } from '@/pinia/zxFwPricing'
+
+interface HtBaseInfoState {
+  quality: string
+  duration: string
+}
+
+const { t } = useI18n()
+const DEFAULT_QUALITY = t('htBaseInfo.defaultQuality')
+const DEFAULT_DURATION = ''
+
+const props = defineProps<{
+  contractId: string
+}>()
+
+const zxFwPricingStore = useZxFwPricingStore()
+const storageKey = () => `ht-base-info-${props.contractId}`
+const quality = ref(DEFAULT_QUALITY)
+const duration = ref('')
+const lastSavedSnapshot = ref('')
+
+const saveForm = (force = false) => {
+  const payload: HtBaseInfoState = {
+    quality: quality.value,
+    duration: duration.value
+  }
+  const snapshot = JSON.stringify(payload)
+  if (!force && snapshot === lastSavedSnapshot.value) return
+  zxFwPricingStore.setKeyState(storageKey(), payload)
+  lastSavedSnapshot.value = snapshot
+}
+
+const loadForm = async () => {
+  const data = await zxFwPricingStore.loadKeyState<HtBaseInfoState>(storageKey())
+  const hasStoredValue = Boolean(
+    data && (Object.prototype.hasOwnProperty.call(data, 'quality') || Object.prototype.hasOwnProperty.call(data, 'duration'))
+  )
+  quality.value = typeof data?.quality === 'string' && data.quality ? data.quality : DEFAULT_QUALITY
+  duration.value = typeof data?.duration === 'string' ? data.duration : (hasStoredValue ? '' : DEFAULT_DURATION)
+  lastSavedSnapshot.value = JSON.stringify({ quality: quality.value, duration: duration.value })
+  if (!hasStoredValue) saveForm(true)
+}
+
+watch([quality, duration], () => {
+  saveForm()
+})
+
+onMounted(() => {
+  void loadForm()
+})
+
+onBeforeUnmount(() => {
+  saveForm(true)
+})
+</script>
+
+<template>
+  <div class="h-full min-h-0 flex flex-col">
+    <div class="rounded-lg border bg-card p-5">
+      <div class="mb-4 border-b pb-3">
+        <h3 class="text-sm font-semibold text-foreground">{{ t('htBaseInfo.title') }}</h3>
+      </div>
+      <div class="grid grid-cols-1 gap-5">
+        <label class="space-y-1.5">
+          <div class="text-xs font-medium text-muted-foreground">{{ t('htBaseInfo.qualityLabel') }}</div>
+          <textarea
+            v-model="quality"
+            rows="3"
+            :placeholder="t('htBaseInfo.qualityPlaceholder')"
+            class="w-full rounded-md border bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-primary/30 resize-none"
+          />
+        </label>
+        <label class="space-y-1.5">
+          <div class="text-xs font-medium text-muted-foreground">{{ t('htBaseInfo.durationLabel') }}</div>
+          <textarea
+            v-model="duration"
+            rows="3"
+            :placeholder="t('htBaseInfo.durationPlaceholder')"
+            class="w-full rounded-md border bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-primary/30 resize-none"
+          />
+        </label>
+      </div>
+    </div>
+  </div>
+</template>