新增 版本管理页

src/router/index.js

@@ -121,6 +121,14 @@ const router = createRouter({
       },
       component: () => import("../views/test/test.vue"),
     },
+    {
+      path: "/versions",
+      name: "versions",
+      meta: {
+        title: "版本日志管理",
+      },
+      component: () => import("../views/index/Versions.vue"),
+    },
   ],
 });
 

src/views/index/Versions.vue

@@ -0,0 +1,142 @@
+<template>
+  <el-button type="primary" class="mb20" @click="isModalVisable = true"
+    >添加版本记录</el-button
+  >
+  <el-dialog title="版本管理" width="400px" v-model="isModalVisable">
+    <el-form
+      ref="ruleFormRef"
+      :model="ruleForm"
+      :rules="rules"
+      class="demo-ruleForm"
+      :size="formSize"
+      label-width="100px"
+      label-position="left"
+    >
+      <el-form-item label="版本号" prop="version">
+        <el-input style="width: 240px" v-model="ruleForm.version"></el-input>
+      </el-form-item>
+      <el-form-item label="发布时间" prop="timer">
+        <el-input style="width: 240px" v-model="ruleForm.timer"></el-input>
+      </el-form-item>
+      <hr class="mb20" />
+      <el-form-item
+        v-for="(item, index) in ruleForm.remarks"
+        :label="'发布内容 ' + parseInt(index + 1) + ' :'"
+        prop="remarks"
+      >
+        <el-input
+          type="textarea"
+          style="width: 240px"
+          v-model="item.text"
+          autosize
+        ></el-input>
+      </el-form-item>
+      <div class="df aic jcfe">
+        <el-button @click="cancel(ruleFormRef)">取消</el-button>
+        <el-button type="primary" @click="add(ruleFormRef)">提交</el-button>
+      </div>
+    </el-form>
+  </el-dialog>
+  <el-table :data="versions">
+    <el-table-column
+      type="index"
+      label="序号"
+      min-width="120"
+      align="center"
+    ></el-table-column>
+    <el-table-column
+      prop="version"
+      label="版本号"
+      min-width="100"
+      align="center"
+    ></el-table-column>
+    <el-table-column
+      prop="timer"
+      label="发布时间"
+      min-width="100"
+      align="center"
+    ></el-table-column>
+    <el-table-column label="版本内容" min-width="150" align="center">
+      <template v-slot="scope">
+        {{ scope.row.remarks }}
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" min-width="150" align="center">
+      <template v-slot="scope">
+        <el-button
+          @click="detail(scope.row, scope.$index)"
+          type="primary"
+          size="small"
+        >
+          查看
+        </el-button>
+        <el-button
+          @click="deleteItem(scope.row, scope.$index)"
+          type="danger"
+          size="small"
+        >
+          删除
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup>
+import tcb from "apis/cloudLogin";
+const db = tcb.database();
+const v = db.collection("huihenduo_versions");
+import { reactive, ref, onMounted } from "vue";
+let versions = ref([]);
+let isModalVisable = ref(true);
+function detail() {}
+
+async function deleteItem() {}
+
+async function update() {}
+
+async function add() {
+  console.log(ruleForm);
+  let res = await v.add({
+    ...ruleForm,
+    createTime: db.serverDate(),
+  });
+  console.log(res);
+}
+async function getVersions() {
+  let res = await v.get();
+  versions.value = res.data;
+}
+
+function cancel() {}
+
+const ruleForm = reactive({
+  version: "",
+  timer: "",
+  remarks: [{}, {}],
+});
+
+const rules = reactive({
+  version: [
+    {
+      required: true,
+      message: "请填写版本号",
+      trigger: "blur",
+    },
+  ],
+  timer: [
+    {
+      required: true,
+      message: "请填写发布时间",
+      trigger: "blur",
+    },
+  ],
+});
+
+onMounted(() => {
+  getVersions();
+});
+</script>
+
+<style>
+</style>

vite.config.js

@@ -1,10 +1,22 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import viteCompression from "vite-plugin-compression";
+import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue(), viteCompression()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+      comps: path.resolve(__dirname, "src/components"),
+      apis: path.resolve(__dirname, "src/apis"),
+      router: path.resolve(__dirname, "src/router"),
+      store: path.resolve(__dirname, "src/store"),
+      views: path.resolve(__dirname, "src/views"),
+      utils: path.resolve(__dirname, "src/utils"),
+    },
+  },
   server: {
     port: 5566,
   },