添加退休日期计算

components.d.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElForm: typeof import('element-plus/es')['ElForm']

src/router/index.ts

 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/home/index.vue'
 import HomeViewEn from '../views/home/index_en.vue'
+import RecordSteps from '../views/home/record_steps.vue'
+import CalcRetire from '../views/home/calc_retire.vue'
+
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
+      name: 'CalcRetire',
+      component: CalcRetire
+    },
+    {
+      path: '/recordsteps',
+      name: 'recordsteps',
+      component: RecordSteps
+    },
+    {
+      path: '/text2video',
+      name: 'text2video',
       component: HomeView
     },
     {
-      path: '/en',
-      name: 'home_en',
+      path: '/text2video_en',
+      name: 'text2video_en',
       component: HomeViewEn
     }
   ]

src/utils/utils.ts

@@ -19,6 +19,14 @@ export default class utils {
     }
   }
 
+  // 从文本中提取 JSON
+  static extractJSON(text: string) {
+    // 正则表达式匹配 JSON 格式的字符串
+    const jsonRegex = /\[\s*\{\s*"序号"\s*:\s*\d+.*?\}\s*\]/s;
+    const matches = text.match(jsonRegex);
+    return matches ? matches[0] : null;
+  }
+
   // 生成年月日时分秒毫秒字符串
   static genDateTimeStr() {
     const now = new Date();

src/views/home/calc_retire.vue

+<script setup lang="ts">
+import text2videoService from "@/api/service/text2videoService";
+import utils from "@/utils/utils";
+import {
+  ElMessage, genFileId,
+  type UploadInstance,
+  type UploadProps,
+  type UploadRawFile
+} from "element-plus";
+import { nextTick, onMounted, reactive, ref } from "vue";
+
+const debug = ref(import.meta.env.MODE === 'production' ? false : true);
+// const debug = ref(false);
+const loading = ref(false);
+const form = reactive({
+  task_id: "",
+  birth: "1982-04",
+  sex_value: "男",
+  sex_option: [
+    {
+      value: '男',
+      label: '男',
+    },
+    {
+      value: '女50岁退休',
+      label: '女（普通）50岁退',
+    },
+    {
+      value: '女55岁退休',
+      label: '女（管理、灵活就业）55岁退',
+    },
+  ],
+  retire_age: "",
+  retire_date: "",
+  how_long_to_retire: "",
+});
+
+onMounted(() => {
+  // 初始化task_id
+  form.task_id = utils.genDateTimeStr();
+  console.log('页面加载，task_id=', form.task_id)
+});
+
+const calculateRetirement = (birthStr, gender) => {
+    let parts = birthStr.split('-'); // 使用'-'作为分隔符来拆分字符串
+    let birthYear = parseInt(parts[0], 10); // 年份
+    let birthMonth = parseInt(parts[1], 10); // 月份
+
+    const currentYear = new Date().getFullYear();
+    const birthDate = new Date(`${birthYear}-${birthMonth < 10 ? '0' + birthMonth : birthMonth}-01`);
+    let retirementAge, delayMonths, retirementYear, retirementMonth;
+
+    if (gender === '男') {
+        retirementAge = 60;
+        delayMonths = Math.floor((currentYear - birthYear) / 4) * 4;
+    } else if (gender === '女50岁退休') {
+        retirementAge = 50;
+        delayMonths = Math.floor((currentYear - birthYear) / 2) * 2;
+    } else if (gender === '女55岁退休') {
+        retirementAge = 55;
+        delayMonths = Math.floor((currentYear - birthYear) / 4) * 4;
+    } else {
+        console.log("Invalid gender input. Please choose '男', '女50岁退休', or '女55岁退休'.");
+        return;
+    }
+
+    retirementAge += Math.floor(delayMonths / 12);
+    console.log(retirementAge, delayMonths)
+
+
+    let retirementDate = new Date(birthDate);
+    console.log(retirementDate)
+
+    retirementDate.setFullYear(retirementDate.getFullYear() + retirementAge);
+    retirementDate.setMonth(retirementDate.getMonth() + delayMonths % 12);
+    console.log(retirementDate)
+
+    retirementYear = retirementDate.getFullYear();
+    retirementMonth = retirementDate.getMonth() + 1; // getMonth() returns 0-11
+    console.log(retirementYear, retirementMonth)
+
+    let yearsUntilRetirement = retirementDate.getFullYear() - currentYear -1;
+    let monthsUntilRetirement = (retirementDate.getMonth() - new Date().getMonth() + 12) % 12 -1;
+    if (monthsUntilRetirement < 0) {
+        yearsUntilRetirement--;
+        monthsUntilRetirement += 12;
+    }
+
+    form.retire_age = `${retirementAge}岁+${delayMonths % 12}个月`,
+    form.retire_date = `${retirementYear}-${retirementMonth < 10 ? '0' + retirementMonth : retirementMonth}-01`,
+    form.how_long_to_retire = `${yearsUntilRetirement}年${monthsUntilRetirement}个月`
+
+};
+</script>
+
+<!-- ============================================================================================================ -->
+<!-- ============================================================================================================ -->
+<!-- ============================================================================================================ -->
+
+<template>
+  <main class="home-container">
+    <!-- 标题 -->
+    <el-divider content-position="left">延迟退休年龄计算器</el-divider>
+    <el-form :model="form" label-width="114px" v-loading="loading">
+      <!-- 输入出生年月 -->
+      <el-form-item label="出生年月">
+        <el-date-picker v-model="form.birth" type="month" placeholder="Pick a month" />
+      </el-form-item>
+      <!-- 性别 -->
+      <el-form-item label="性别">
+        <el-select
+          v-model="form.sex_value"
+          placeholder="Select"
+          size="large"
+          style="width: 240px"
+        >
+          <el-option
+            v-for="item in form.sex_option"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <!-- 计算 -->
+      <el-form-item>
+        <el-button type="primary" @click="calculateRetirement(form.birth, form.sex_value)"
+          >开始计算</el-button
+        >
+      </el-form-item>
+      <!-- 结果 -->
+      <el-form-item label="您的退休年龄">
+        <el-text class="mx-1">{{ form.retire_age }}</el-text>
+      </el-form-item>
+      <el-form-item label="您的退休日期">
+        <el-text class="mx-1">{{ form.retire_date }}</el-text>
+      </el-form-item>
+      <el-form-item label="距离退休还有">
+        <el-text class="mx-1">{{ form.how_long_to_retire }}</el-text>
+      </el-form-item>
+    </el-form>
+  </main>
+</template>
+
+<style lang="scss" scoped>
+.home-container {
+  width: 100%;
+}
+</style>

src/views/home/record_steps.vue

+<script setup lang="ts">
+import text2videoService from "@/api/service/text2videoService";
+import utils from "@/utils/utils";
+import {
+  ElMessage, genFileId,
+  type UploadInstance,
+  type UploadProps,
+  type UploadRawFile
+} from "element-plus";
+import { nextTick, onMounted, reactive, ref } from "vue";
+
+const debug = ref(import.meta.env.MODE === 'production' ? false : true);
+// const debug = ref(false);
+const loading = ref(false);
+const form = reactive({
+  task_id: "",
+  task_content: "开发一款坦克大战的小游戏",
+  prompt: `你是一名高级的程序员。现在需要根据产品需求，设计一份完整的程序编写的思路，比如第一步写什么模块，第二步写什么模块，整个思路应逻辑清晰、流畅。以json格式输出：\n[{"序号": 序号, "描述": 描述, "详细说明": 详细说明}, ...]\n`,
+  answer: "",
+  answer_json: [],
+});
+const llms = {
+  tyqw_online: {'api': 'tyqw', 'name':'线上通义千问'},
+  baichuan: {'api': 'langchain', 'name':'本地baichuan2-7b'},
+  qwen_local: {'api': 'langchain', 'name':'本地Qwen-7B-Chat'},
+  chatgpt: {'api': 'gpt', 'name':'chatgpt'},
+  kimi: {'api': 'kimi', 'name':'kimi'},
+};
+
+onMounted(() => {
+  // 初始化task_id
+  form.task_id = utils.genDateTimeStr();
+  console.log('页面加载，task_id=', form.task_id)
+});
+
+const onSubmitGpt = () => {
+  const my_prompt = ref(`${form.prompt}。产品需求如下：${form.task_content}`);
+  text2videoService
+    .submitLLM(utils.aesEncrypt(my_prompt.value), utils.aesEncrypt(llms.tyqw_online.api), [], form.task_id, "true")
+    .then((result: string) => {
+      console.log(result);
+      form.answer = result;
+      const jsonText = utils.extractJSON(result);
+      console.log(jsonText);
+      form.answer_json = utils.formatJsonObj(jsonText);
+    })
+    .catch((error: any) => {
+      console.error(error);
+      ElMessage({
+        message: error,
+        type: "error",
+      });
+    });
+};
+</script>
+
+<!-- ============================================================================================================ -->
+<!-- ============================================================================================================ -->
+<!-- ============================================================================================================ -->
+
+<template>
+  <main class="home-container">
+    <!-- 标题 -->
+    <el-divider content-position="left">将产品需求拆解为开发步骤</el-divider>
+    <el-form :model="form" label-width="114px" v-loading="loading">
+      <!-- 产品需求 -->
+      <el-form-item label="产品需求">
+        <el-input v-model="form.task_content" :autosize="true" type="textarea" />
+      </el-form-item>
+      <!-- Prompt -->
+      <el-form-item label="Prompt">
+        <el-text class="mx-1" type="danger">{{ form.prompt }}</el-text>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmitGpt"
+          >生成步骤（{{ llms.tyqw_online.name }}）</el-button
+        >
+      </el-form-item>
+      <!-- 结果 -->
+      <el-form-item label="步骤">
+        <!-- <el-text class="mx-1">{{ form.answer }}</el-text> -->
+        <el-table
+          :data="form.answer_json"
+          border
+          style="width: 100%; z-index: calc(var(--el-table-index) -1)"
+        >
+          <el-table-column prop="序号" label="序号" width="55" />
+          <el-table-column prop="描述" label="描述" width="300">
+            <template v-slot="scope">
+              <el-text class="mx-1">{{ scope.row.描述 }}</el-text>
+            </template>
+          </el-table-column>
+          <el-table-column prop="详细说明" label="详细说明">
+            <template v-slot="scope">
+              <el-text class="mx-1">{{ scope.row.详细说明 }}</el-text>
+            </template>
+          </el-table-column>
+
+          <el-table-column width="200" label="操作" align="center">
+            <template v-slot="scope">
+              <div style="margin: 5px 0">
+                <el-button type="primary" size="small" @click=""
+                  >与大模型继续沟通</el-button
+                >
+              </div>
+
+              <!-- <div style="margin: 10px 0">
+                <el-button type="danger" size="small" @click="">删除本步骤</el-button>
+              </div> -->
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+
+      <!-- <el-form-item>
+        <el-button type="primary" @click="">保存所有记录</el-button>
+      </el-form-item> -->
+    </el-form>
+  </main>
+</template>
+
+<style lang="scss" scoped>
+.home-container {
+  width: 100%;
+}
+</style>
+
+<style lang="scss">
+.home-container {
+  .el-table .el-table__cell {
+    z-index: calc(var(--el-table-index) -1);
+  }
+}
+.dashed-div {
+  border: 1px dashed #999;
+  margin: 5px 0;
+  padding: 2px;
+}
+</style>