chore: setting页面拆分

src/views/setting/components/SettingsActions.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="action-container">
+    <template v-if="isEditing">
+      <button type="button" class="primary-btn" :disabled="saving" @click="emit('save')">
+        {{ saving ? t('Settings.buttons.saving') : t('Settings.buttons.saveChange') }}
+      </button>
+      <button type="button" class="secondary-btn" :disabled="saving" @click="emit('discard')">
+        {{ t('Settings.buttons.discard') }}
+      </button>
+    </template>
+    <template v-else>
+      <button type="button" class="primary-btn edit-btn" @click="emit('edit')">
+        {{ t('Settings.buttons.edit') }}
+      </button>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  isEditing: boolean
+  saving: boolean
+}>()
+
+const emit = defineEmits<{
+  (event: 'edit'): void
+  (event: 'save'): void
+  (event: 'discard'): void
+}>()
+
+const { t } = useI18n()
+</script>
+
+<style lang="less" scoped>
+.action-container {
+  display: flex;
+  justify-content: center;
+  column-gap: 1.2rem;
+  margin-top: 2.8rem;
+}
+
+.primary-btn,
+.secondary-btn {
+  height: 4.4rem;
+  border: 0.1rem solid #c4c4c4;
+  background: #f6f6f6;
+  font-family: 'KaiseiOpti-Bold';
+  font-size: 1.6rem;
+  line-height: 2.6rem;
+  color: #232323;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.primary-btn {
+  width: 23.6rem;
+  padding: 0 2.4rem;
+  border-color: #232323;
+  background: #232323;
+  color: #ffffff;
+}
+
+.secondary-btn {
+  width: 12rem;
+  background: #ffffff;
+}
+</style>