feat:重构模块

src/views/period/setting.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="mobile-period-setting common-mobile-view">
+    <el-form ref="formRef" :model="periodStore.periodSetting"
+             label-width="auto">
+      <el-form-item label="周期天数">
+        <el-input-number v-model="periodStore.periodSetting.cycleLength" autocomplete="off"
+                  placeholder="请输入周期天数" clearable>
+        </el-input-number>
+      </el-form-item>
+
+      <el-form-item label="持续天数">
+        <el-input-number v-model="periodStore.periodSetting.duration" autocomplete="off"
+                  placeholder="请输入持续天数" clearable>
+        </el-input-number>
+      </el-form-item>
+
+      <el-form-item label="是否计算">
+        <el-switch
+            v-model="periodStore.periodSetting.isCalculate"
+            active-text="是"
+            inactive-text="否"
+        />
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="confirmClick">确认</el-button>
+      <el-button type="info" @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { usePeriodStore } from '@/store/period.ts'
+import { useAppStore } from '@/store/app.ts'
+import { onMounted, ref } from 'vue'
+
+const formRef = ref()
+const periodStore = usePeriodStore()
+const appStore = useAppStore()
+
+onMounted(async () => {
+  appStore.isShowMobileBack = true
+})
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    await periodStore.updatePeriodSetting()
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+</script>
+
+<style scoped lang="scss">
+.mobile-period-setting {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>