chore: setting页面拆分

src/views/setting/components/RegionSection.vue

@@ -0,0 +1,128 @@
+<template>
+  <SettingsSection
+    :title="t('Settings.region.title')"
+    :description="t('Settings.region.description')"
+  >
+    <div class="region-row">
+      <div class="security-label">{{ t('Settings.region.displayLanguage') }}</div>
+      <div v-show="!isEditing" class="security-static field-box">
+        {{ displayLanguageLabel }}
+      </div>
+      <div v-show="isEditing" class="outlined-field select-field">
+        <el-select
+          :model-value="language"
+          :placeholder="t('Settings.region.selectLanguage')"
+          @update:model-value="emit('update:language', $event as LanguageValue)"
+        >
+          <el-option
+            v-for="item in languageOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+    </div>
+
+    <div class="region-row">
+      <div class="security-label">{{ t('Settings.region.region') }}</div>
+      <div v-show="!isEditing" class="security-static field-box">
+        {{ displayRegionLabel }}
+      </div>
+      <div v-show="isEditing" class="outlined-field select-field">
+        <el-select
+          :model-value="region"
+          :placeholder="t('Settings.region.selectRegion')"
+          @update:model-value="emit('update:region', $event as RegionValue)"
+        >
+          <el-option
+            v-for="item in regionOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+    </div>
+  </SettingsSection>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import SettingsSection from './SettingsSection.vue'
+import type { LanguageValue, RegionValue, SettingOption } from '../types'
+
+defineProps<{
+  language: LanguageValue
+  region: RegionValue
+  displayLanguageLabel: string
+  displayRegionLabel: string
+  isEditing: boolean
+  languageOptions: SettingOption<LanguageValue>[]
+  regionOptions: SettingOption<RegionValue>[]
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:language', value: LanguageValue): void
+  (event: 'update:region', value: RegionValue): void
+}>()
+
+const { t } = useI18n()
+</script>
+
+<style lang="less" scoped>
+.field-text() {
+  font-family: 'KaiseiOpti-Regular';
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+  color: #232323;
+}
+
+.field-frame() {
+  width: 100%;
+  min-height: 4rem;
+  border: 0.1rem solid #979797;
+}
+
+.control-wrapper() {
+  box-shadow: none;
+  border-radius: 0;
+  padding: 0 2rem;
+}
+
+.region-row + .region-row {
+  margin-top: 3rem;
+}
+
+.security-label {
+  margin-bottom: 0.8rem;
+  font-family: 'KaiseiOpti-Medium';
+  font-size: 1.4rem;
+  line-height: 2.4rem;
+  letter-spacing: 0.04em;
+  color: #585858;
+}
+
+.security-static,
+.field-box {
+  .field-frame();
+  .field-text();
+  display: flex;
+  align-items: center;
+  padding: 0.8rem 2rem;
+}
+
+.outlined-field {
+  .field-frame();
+
+  :deep(.el-select) {
+    width: 100%;
+    min-height: 4rem;
+  }
+
+  :deep(.el-select__wrapper) {
+    .control-wrapper();
+    min-height: 4rem;
+  }
+}
+</style>