diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index dca714b..6234627 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -39,7 +39,7 @@
               </div>
             </div>
             <div class="col-sm-12 col-md-6 text-center">
-              <button class="btn btn-sm btn-primary ms-2" @click="handleAddUser">
+              <button class="btn btn-sm btn-primary ms-2" @click="handleAddDate">
                 添加
               </button>
               <button class="btn btn-sm btn-danger ms-2" @click="handleBatchDelete">
@@ -351,7 +351,9 @@ export default {
       this.$emit("dataDelete", id);
     },
     handleSearch() {},
-    handleAddUser() {},
+    handleAddDate() {
+      this.$emit("dateAdd", {});
+    },
     handleBatchDelete() {},
   },
   watch: {
diff --git a/src/components/PackageFormModal.vue b/src/components/PackageFormModal.vue
new file mode 100644
index 0000000..bed4ec4
--- /dev/null
+++ b/src/components/PackageFormModal.vue
@@ -0,0 +1,159 @@
+<template>
+  <div
+    v-if="visible"
+    class="modal fade show"
+    id="packageModal"
+    tabindex="-1"
+    aria-labelledby="packageModalLabel"
+    style="display: block; padding-right: 15px"
+    aria-modal="true"
+    role="dialog"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="packageModalTitle">{{ title }}</h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="关闭"
+            @click="cancel"
+          ></button>
+        </div>
+        <div class="formcontent">
+          <form>
+            <div class="row mb-3">
+              <label for="packageName" class="col-sm-2 col-form-label">套餐名</label>
+              <div class="col-sm-10">
+                <input
+                  type="text"
+                  v-model="form.name"
+                  class="form-control"
+                  id="packageName"
+                />
+              </div>
+            </div>
+            <div class="row mb-3">
+              <label for="packagePrice" class="col-sm-2 col-form-label">价格</label>
+              <div class="col-sm-10">
+                <input
+                  type="number"
+                  v-model="form.price"
+                  class="form-control"
+                  id="packagePrice"
+                />
+              </div>
+            </div>
+            <div class="row mb-3">
+              <label for="callLimit" class="col-sm-2 col-form-label">调用次数限制</label>
+              <div class="col-sm-10">
+                <input
+                  type="number"
+                  v-model="form.callLimit"
+                  class="form-control"
+                  id="callLimit"
+                />
+              </div>
+            </div>
+            <div class="row mb-3">
+              <label for="oneMinuteLimit" class="col-sm-2 col-form-label"
+                >一分钟调用限制</label
+              >
+              <div class="col-sm-10">
+                <input
+                  type="number"
+                  v-model="form.oneMinuteLimit"
+                  class="form-control"
+                  id="oneMinuteLimit"
+                />
+              </div>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button
+            type="button"
+            class="btn btn-secondary"
+            data-bs-dismiss="modal"
+            @click="cancel"
+          >
+            关闭
+          </button>
+          <button type="button" class="btn btn-primary" @click="submit">保存更改</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PackageFormModal",
+  props: {
+    title: {
+      type: String,
+      default: "编辑套餐",
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      packageId: null,
+      form: {
+        name: "",
+        price: "",
+        callLimit: "",
+        oneMinuteLimit: "",
+      },
+      resolve: null,
+    };
+  },
+  methods: {
+    open(packageId, packageInfo = null) {
+      this.resetForm();
+      this.visible = true;
+      this.packageId = packageId;
+      if (packageInfo) {
+        this.form.name = packageInfo.name;
+        this.form.price = packageInfo.price;
+        this.form.callLimit = packageInfo.callLimit;
+        this.form.oneMinuteLimit = packageInfo.oneMinuteLimit;
+      }
+      return new Promise((resolve) => {
+        this.resolve = resolve;
+      });
+    },
+    submit() {
+      this.visible = false;
+      this.resolve && this.resolve(this.form);
+    },
+    cancel() {
+      this.visible = false;
+      this.resolve && this.resolve(null);
+    },
+    resetForm() {
+      this.form = {
+        name: "",
+        price: "",
+        callLimit: "",
+        oneMinuteLimit: "",
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.modal {
+  background: rgba(0, 0, 0, 0.5);
+}
+.formcontent {
+  padding: 0 30px;
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>
diff --git a/src/request/api.js b/src/request/api.js
index 7eb9c43..6443022 100644
--- a/src/request/api.js
+++ b/src/request/api.js
@@ -29,6 +29,19 @@ const getUserInfoById = async (id) => await request.get(`/api/Admin/UserInfo?use
 //更新用户信息
 const updateUserInfo = async (id,param) => await request.post(`/api/Admin/UpdateUser?userId=${id}`,param)
 
+//获取套餐列表（分页）    
+const getPackageList =async (pageIndex,pageSize,desc)=> await request.get(`api/Package/GetPackageList?pageIndex=${pageIndex}&pageSize=${pageSize}&desc=${desc}`)
+
+//获取指定套餐信息
+const getPackageInfo = async (id) => await request.get(`/api/Package/GetPackageInfo?packageId=${id}`)
+
+//删除指定套餐
+const deletePackage = async (id) => await request.delete(`/api/Package/DeletePackage?packageId=${id}`)
+
+//更新指定套餐信息
+const updatePackage = async (id, param) => await request.post(`/api/Package/UpdatePackage?packageId=${id}`, param)
+
+const addPackage = async (param) => await request.post('/api/Package/AddPackage', param)
 //获取api列表
 const getApiList = async (pageIndex,pageSize,desc) => await request.get(`/api/apis/ApiList?pageIndex=${pageIndex}&pageSize=${pageSize}&desc=${desc}`)
 
@@ -41,9 +54,6 @@ const getApiInfoById = async (id) => await request.get(`/api/Apis/ApiInfo?apiId=
 //更新API信息
 const updateApiInfo = async (id,param) => await request.post(`/api/Apis/UpdateApi?apiId=${id}`,param)
 
-//获取套餐列表
-const getPackageList = async (pageIndex,pageSize,desc) => await request.get(`/api/Package/GetPackageList?pageIndex=${pageIndex}&pageSize=${pageSize}&desc=${desc}`)
-
 //更新系统配置
 const updateSystemConfig = async (configName,configBody) => await request.post('/api/SystemConfig/UpdateSystemConfig',{configName:configName,configBody:configBody})
 
@@ -58,10 +68,15 @@ export default {
     deleteUser,
     getUserInfoById,
     updateUserInfo,
-    getApiList,
+    getPackageList,
+    getPackageInfo,
+    deletePackage,
+    updatePackage,
+    addPackage,
     deleteApi,
     getApiInfoById,
     updateApiInfo,
     getPackageList,
-    updateSystemConfig
+    updateSystemConfig,
+    getApiList
 }
\ No newline at end of file
diff --git a/src/views/Notfound.vue b/src/views/Notfound.vue
index b94f511..85fdb61 100644
--- a/src/views/Notfound.vue
+++ b/src/views/Notfound.vue
@@ -5,9 +5,9 @@
         <div class="error-info">
           <h1>404</h1>
           <p>
-            It seems that the page you are looking for no longer exists.<br />Please
-            contact our <a href="#">help center</a> or go to the
-            <RouterLink to="/home">homepage</RouterLink>.
+            抱歉，您访问的页面不存在，可能网址有误，或者已被删除<br />
+            点击返回
+            <RouterLink to="/home">首页</RouterLink>.
           </p>
         </div>
         <div class="error-image"></div>
diff --git a/src/views/auth/Login.vue b/src/views/auth/Login.vue
index 26c2b3b..c3ff5b3 100644
--- a/src/views/auth/Login.vue
+++ b/src/views/auth/Login.vue
@@ -1,114 +1,134 @@
 <template>
-    <div class="container">
-        <div class="row justify-content-md-center">
-            <div class="col-md-12 col-lg-4">
-                <div class="card login-box-container">
-                    <div class="card-body">
-                        <div class="authent-logo">
-                            <img src="../../assets/images/logo@2x.png" alt="">
-                        </div>
-                        <div class="authent-text">
-                            <p>欢迎访问{{ systemname }}!</p>
-                            <p>请登录你的账户.</p>
-                        </div>
-
-                        <form>
-                            <div class="mb-3">
-                                <div class="form-floating">
-                                    <input v-model="formdata.username" type="text" class="form-control"
-                                        id="floatingInput" placeholder="username">
-                                    <label for="floatingInput">用户名</label>
-                                </div>
-                            </div>
-                            <div class="mb-3">
-                                <div class="form-floating">
-                                    <input v-model="formdata.password" type="password" class="form-control"
-                                        id="floatingPassword" placeholder="Password">
-                                    <label for="floatingPassword">密码</label>
-                                </div>
-                            </div>
-                            <div class="mb-3 form-check">
-                                <input type="checkbox" class="form-check-input" id="exampleCheck1">
-                                <label class="form-check-label" for="exampleCheck1">记住我</label>
-                            </div>
-                            <div class="d-grid">
-                                <button type="button" class="btn btn-info m-b-xs" @click="login">登录</button>
-                                <button class="btn btn-primary">三方登录</button>
-                            </div>
-                        </form>
-                        <div class="authent-reg">
-                            <p>没有账户？<router-link to="register">点击创建</router-link></p>
-                        </div>
-                    </div>
-                </div>
+  <div class="container">
+    <div class="row justify-content-md-center">
+      <div class="col-md-12 col-lg-4">
+        <div class="card login-box-container">
+          <div class="card-body">
+            <div class="authent-logo">
+              <img src="../../assets/images/logo@2x.png" alt="" />
             </div>
+            <div class="authent-text">
+              <p>欢迎访问{{ systemname }}!</p>
+              <p>请登录你的账户.</p>
+            </div>
+
+            <form>
+              <div class="mb-3">
+                <div class="form-floating">
+                  <input
+                    v-model="formdata.username"
+                    type="text"
+                    class="form-control"
+                    id="floatingInput"
+                    placeholder="username"
+                  />
+                  <label for="floatingInput">用户名</label>
+                </div>
+              </div>
+              <div class="mb-3">
+                <div class="form-floating">
+                  <input
+                    v-model="formdata.password"
+                    type="password"
+                    class="form-control"
+                    id="floatingPassword"
+                    placeholder="Password"
+                  />
+                  <label for="floatingPassword">密码</label>
+                </div>
+              </div>
+              <div class="mb-3 form-check">
+                <input type="checkbox" class="form-check-input" id="exampleCheck1" />
+                <label class="form-check-label" for="exampleCheck1">记住我</label>
+              </div>
+              <div class="d-grid">
+                <button type="button" class="btn btn-info m-b-xs" @click="login">
+                  登录
+                </button>
+                <button class="btn btn-primary">三方登录</button>
+              </div>
+            </form>
+            <div class="authent-reg">
+              <p>没有账户？<router-link to="register">点击创建</router-link></p>
+            </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import md5 from 'blueimp-md5';
-import { mapGetters } from 'vuex';
-import auth from '@/utils/auth';
+import md5 from "blueimp-md5";
+import { mapGetters } from "vuex";
+import auth from "@/utils/auth";
 
 export default {
-    data() {
-        return {
-            formdata: {
-                username: '',
-                password: ''
-            }
+  data() {
+    return {
+      formdata: {
+        username: "",
+        password: "",
+      },
+    };
+  },
+  methods: {
+    /**
+     * 用户登录
+     */
+    async login() {
+      //记录原始密码，用于修改MD5后还原原始文本
+      const passwordOld = this.formdata.password;
+      this.formdata.password = md5(passwordOld);
+      try {
+        const res = await this.$api.login(this.formdata);
+        let msg = "";
+        let type = "danger";
+        switch (res.code) {
+          case 2000:
+            msg = "登录成功";
+            break;
+          case 2001:
+            msg = "用户名或密码错误";
+            break;
+          case 2002:
+            msg = "账户被禁用";
+            break;
+          case 2004:
+            msg = "用户不存在";
+            break;
+          default:
+            msg = "登录失败";
+            break;
         }
-    },
-    methods: {
-        /**
-         * 用户登录
-         */
-        async login() {
-            //记录原始密码，用于修改MD5后还原原始文本
-            const passwordOld = this.formdata.password
-            this.formdata.password = md5(passwordOld)
-            try {
-                const res = await this.$api.login(this.formdata)
-                let msg = ''
-                let type = 'danger'
-                switch (res.code) {
-                    case 2000: msg = '登录成功'; break
-                    case 2001: msg = '用户名或密码错误'; break
-                    case 2002: msg = '账户被禁用'; break
-                    case 2004: msg = '用户不存在'; break
-                    default: msg = '登录失败'; break
-                }
-                if (res.code == 2000) {
-                    //储存登录凭证
-                    auth.setAccessToken(res.data.token)
-                    auth.setRefreshToken(res.data.refreshToken)
-                    auth.setUserId(res.data.userInfo.id)
-                    this.$store.commit('userinfo/SET_USERINFO', res.data.userInfo)
-                    type = 'success'
-                    this.$alert(msg, type)
-                    this.$router.push('/layout/index')
-                }else{
-                    this.$alert(msg, type)
-                }
-
-            } catch (e) {
-                console.log(e)
-                this.$alert('未知错误', 'error')
-            } finally {
-                //还原密码文本
-                this.formdata.password = passwordOld
-            }
+        if (res.code == 2000) {
+          //储存登录凭证
+          auth.setAccessToken(res.data.token);
+          auth.setRefreshToken(res.data.refreshToken);
+          auth.setUserId(res.data.userInfo.id);
+          this.$store.commit("userinfo/SET_USERINFO", res.data.userInfo);
+          type = "success";
+          this.$alert(msg, type);
+          this.$router.push("/layout/index");
+        } else {
+          this.$alert(msg, type);
         }
+      } catch (e) {
+        console.log(e);
+        this.$alert("未知错误", "error");
+      } finally {
+        //还原密码文本
+        this.formdata.password = passwordOld;
+      }
     },
-    computed: {
-        /**
-         * 初始化系统配置
-         */
-        ...mapGetters('config', ['systemname'])
-    }
-}
-
+  },
+  computed: {
+    /**
+     * 初始化系统配置
+     */
+    ...mapGetters("config", ["systemname"]),
+  },
+};
 </script>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>
diff --git a/src/views/auth/Register.vue b/src/views/auth/Register.vue
index 107f60c..2f3e480 100644
--- a/src/views/auth/Register.vue
+++ b/src/views/auth/Register.vue
@@ -1,194 +1,251 @@
-
 <template>
-    <div class="login-page" :class="{'no-loader':loader}">
-        <div class='loader'>
-            <div class='spinner-grow text-primary' role='status'>
-              <span class='sr-only'>Loading...</span>
+  <div class="login-page" :class="{ 'no-loader': loader }">
+    <div class="loader">
+      <div class="spinner-grow text-primary" role="status">
+        <span class="sr-only">Loading...</span>
+      </div>
+    </div>
+    <div class="container">
+      <div class="row justify-content-md-center">
+        <div class="col-md-12 col-lg-4">
+          <div class="card login-box-container">
+            <div class="card-body">
+              <div class="authent-logo">
+                <img src="../../assets/images/logo@2x.png" alt="" />
+              </div>
+              <div class="authent-text">
+                <p>欢迎访问{{ systemname }}!</p>
+                <p>此处注册您的账户</p>
+              </div>
+              <form>
+                <div class="mb-3">
+                  <div class="form-floating">
+                    <input
+                      type="text"
+                      class="form-control"
+                      :class="{ 'is-invalid': error.username }"
+                      id="floatingInput"
+                      placeholder="账号"
+                      v-model="form.username"
+                      @blur="verification_username"
+                    />
+                    <label for="floatingInput">账号</label>
+                    <div class="invalid-feedback" :class="{ 'd-none': !error.username }">
+                      {{ error.username }}
+                    </div>
+                  </div>
+                </div>
+                <div class="mb-3">
+                  <div class="form-floating">
+                    <input
+                      type="email"
+                      class="form-control"
+                      :class="{ 'is-invalid': error.email }"
+                      id="floatingInput1"
+                      placeholder="邮箱地址"
+                      v-model="form.email"
+                      @blur="verification_email"
+                    />
+                    <label for="floatingInput">邮箱地址</label>
+                    <div class="invalid-feedback" :class="{ 'd-none': !error.email }">
+                      {{ error.email }}
+                    </div>
+                  </div>
+                </div>
+                <div class="mb-3">
+                  <div class="input-group">
+                    <div class="form-floating">
+                      <input
+                        type="text"
+                        class="form-control"
+                        :class="{ 'is-invalid': error.validatecode }"
+                        id="floatingPassword"
+                        placeholder="验证码"
+                        v-model="form.validatecode"
+                        @blur="verification_validatecode"
+                      />
+                      <label for="floatingPassword">验证码</label>
+                    </div>
+                    <button class="btn btn-primary ms-2" type="button" @click="GetCode">
+                      {{ countdown > 0 ? `${countdown}秒后重试` : "获取验证码" }}
+                    </button>
+                    <div
+                      class="invalid-feedback"
+                      :class="{ 'd-none': !error.validatecode }"
+                    >
+                      {{ error.validatecode }}
+                    </div>
+                  </div>
+                </div>
+
+                <div class="mb-3">
+                  <div class="form-floating">
+                    <input
+                      type="password"
+                      class="form-control"
+                      :class="{ 'is-invalid': error.password }"
+                      id="floatingPassword1"
+                      placeholder="密码"
+                      v-model="form.password"
+                      @blur="verification_password"
+                    />
+                    <label for="floatingPassword">密码</label>
+                    <div class="invalid-feedback" :class="{ 'd-none': !error.password }">
+                      {{ error.password }}
+                    </div>
+                  </div>
+                </div>
+                <div class="mb-3 form-check">
+                  <input
+                    type="checkbox"
+                    class="form-check-input"
+                    id="exampleCheck1"
+                    v-model="form.check"
+                    @blur="verification_check"
+                  />
+                  <label class="form-check-label" for="exampleCheck1"
+                    >我同意 <a href="#">条款与细则</a></label
+                  >
+                  <div class="invalid-feedback" :class="{ 'd-none': form.check }">
+                    {{ error.agrement }}
+                  </div>
+                </div>
+                <div class="d-grid">
+                  <button type="submit" class="btn btn-primary m-b-xs" @click="submit">
+                    注册
+                  </button>
+                </div>
+              </form>
+              <div class="authent-login">
+                <p>已经有了账号? <RouterLink to="/login">登录</RouterLink></p>
+              </div>
             </div>
           </div>
-        <div class="container">
-            <div class="row justify-content-md-center">
-                <div class="col-md-12 col-lg-4">
-                    <div class="card login-box-container">
-                        <div class="card-body">
-                            <div class="authent-logo">
-                                <img src="../../assets/images/logo@2x.png" alt="">
-                            </div>
-                            <div class="authent-text">
-                                <p>Welcome to IO!</p>
-                                <p>Enter your details to create your account</p>
-                            </div>
-                            <form>
-                                <div class="mb-3">
-                                    <div class="form-floating">
-                                        <input type="text" class="form-control" :class="{'is-invalid': error.username}" id="floatingInput" placeholder="账号" v-model="form.username" @blur="verification_username">
-                                        <label for="floatingInput">账号</label> 
-                                        <div class="invalid-feedback" :class="{'d-none': !error.username}">
-                                        {{ error.username }}
-                                        </div>
-                                      </div>
-                                </div>
-                                <div class="mb-3">
-                                    <div class="form-floating">
-                                        <input type="email" class="form-control" :class="{'is-invalid': error.email}" id="floatingInput1" placeholder="邮箱地址" v-model="form.email" @blur="verification_email">
-                                        <label for="floatingInput">邮箱地址</label>
-                                        <div class="invalid-feedback" :class="{'d-none': !error.email}">
-                                        {{ error.email }}
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="mb-3">
-                                <div class="input-group">
-                                    <div class="form-floating">
-                                        <input type="text" class="form-control" :class="{'is-invalid': error.validatecode}" id="floatingPassword" placeholder="验证码" v-model="form.validatecode" @blur="verification_validatecode">
-                                        <label for="floatingPassword">验证码</label>
-                                    </div>
-                                    <button class="btn btn-primary ms-2" type="button" @click="GetCode"> {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码'  }}</button>
-                                    <div class="invalid-feedback" :class="{'d-none': !error.validatecode}">
-                                        {{ error.validatecode }}
-                                    </div>
-                                </div>
-                            </div>
-
-                                <div class="mb-3">
-                                    <div class="form-floating">
-                                        <input type="password" class="form-control" :class="{'is-invalid': error.password}" id="floatingPassword1" placeholder="密码" v-model="form.password" @blur="verification_password">
-                                        <label for="floatingPassword">密码</label>
-                                        <div class="invalid-feedback" :class="{'d-none': !error.password}">
-                                        {{ error.password }}
-                                        </div>
-                                      </div>
-                                </div>
-                                <div class="mb-3 form-check">
-                                  <input type="checkbox" class="form-check-input"   id="exampleCheck1" v-model="form.check" @blur="verification_check">
-                                  <label class="form-check-label" for="exampleCheck1">我同意 <a href="#">条款与细则</a></label>
-                                    <div class="invalid-feedback" :class="{'d-none': form.check}">
-                                        {{ error.agrement }}
-                                    </div>
-                                </div>
-                                <div class="d-grid">
-                                <button type="submit" class="btn btn-primary m-b-xs" @click="submit">注册</button>
-                            </div>
-                              </form>
-                              <div class="authent-login">
-                                  <p>已经有了账号? <RouterLink to="/login">登录</RouterLink></p>
-                              </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import { SendValidateCode_api,registered_api } from '@/request/api'
+import { mapGetters } from "vuex";
 export default {
-    name: 'Register',
-    data() {
-        return {
-            loader:false,
-            form:{
-                username: '',
-                password: '',
-                validatecode: '',
-                email: '',
-                check: false,
-            },
-            error: {
-                username: '',
-                password: '',
-                validatecode: '',
-                email: '',
-                agrement :''
-            },
-            countdown: 0
-        }
+  name: "Register",
+  data() {
+    return {
+      loader: false,
+      form: {
+        username: "",
+        password: "",
+        validatecode: "",
+        email: "",
+        check: false,
+      },
+      error: {
+        username: "",
+        password: "",
+        validatecode: "",
+        email: "",
+        agrement: "",
+      },
+      countdown: 0,
+    };
+  },
+  mounted() {
+    this.loader = true;
+  },
+  computed: {
+    /**
+     * 初始化系统配置
+     */
+    ...mapGetters("config", ["systemname"]),
+  },
+  methods: {
+    verification_username() {
+      if (!this.form.username || this.form.username.length > 20) {
+        this.error.username = "账号不能为空或超过20个字符";
+      } else {
+        this.error.username = "";
+      }
     },
-    mounted() {
-        this.loader=true
+    verification_email() {
+      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!this.form.email) {
+        this.error.email = "邮箱不能为空";
+      } else if (!emailPattern.test(this.form.email)) {
+        this.error.email = "邮箱格式不正确";
+      } else {
+        this.error.email = "";
+      }
     },
-    methods: {
-        verification_username() {
-            if (!this.form.username || this.form.username.length >20) {
-               this.error.username = '账号不能为空或超过20个字符'
-            }else {
-                this.error.username = ''
-            }
-        },
-        verification_email() {
-             const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-            if (!this.form.email) {
-                this.error.email = '邮箱不能为空'
-            }else if (!emailPattern.test(this.form.email)) {
-                this.error.email = '邮箱格式不正确'
-            }else {
-                this.error.email = ''
-            }
-        },
-        verification_password() {
-            if (!this.form.password || this.form.password.length < 6) {
-                this.error.password = '密码不能为空或小于6个字符'
-            }else {
-                this.error.password = ''
-            }
-        },
-        verification_validatecode() {
-            if (!this.form.validatecode || this.form.validatecode.length != 5) {
-                this.error.validatecode = '验证码错误'
-            }else {
-                this.error.validatecode = ''
-            }
-        },
-        verification_check() {
-            if (!this.form.check) {
-                this.error.agrement = '请同意条款与细则'
-            }else {
-                this.error.agrement = ''
-            }
-        },
-        async GetCode() {
-            this.verification_email()
-            if (!this.error.email) {
-                let res=await this.$api.SendValidateCode(this.form.email)
-                this.countdown = 60
-                this.startCountdown()
-                
-                }
-        },
-        startCountdown() {
-            const timer = setInterval(() => {
-            if (this.countdown > 0) {
-                this.countdown--;
-            } else {
-                clearInterval(timer);
-            }
-        }, 1000)
-        },
-        async submit() {
-            this.verification_username()
-            this.verification_email()
-            this.verification_password()
-            this.verification_validatecode()
-            this.verification_check()
-            if (!this.error.username && !this.error.email && !this.error.password && !this.error.validatecode && !this.error.agrement) {
-                let res=await this.$api.register({
-                            username: this.form.username,
-                            password: this.form.password,
-                            email: this.form.email,
-                            verificationCode: this.form.validatecode
-                            })
-                if (res.code == 1000) {
-                    this.$router.push('/login')
-                }
-            }
-        }
+    verification_password() {
+      if (!this.form.password || this.form.password.length < 6) {
+        this.error.password = "密码不能为空或小于6个字符";
+      } else {
+        this.error.password = "";
+      }
+    },
+    verification_validatecode() {
+      if (!this.form.validatecode || this.form.validatecode.length != 5) {
+        this.error.validatecode = "验证码错误";
+      } else {
+        this.error.validatecode = "";
+      }
+    },
+    verification_check() {
+      if (!this.form.check) {
+        this.error.agrement = "请同意条款与细则";
+      } else {
+        this.error.agrement = "";
+      }
+    },
+    async GetCode() {
+      this.verification_email();
+      if (!this.error.email) {
+        let res = await this.$api.SendValidateCode(this.form.email);
+        this.countdown = 60;
+        this.startCountdown();
+      }
+    },
+    startCountdown() {
+      const timer = setInterval(() => {
+        if (this.countdown > 0) {
+          this.countdown--;
+        } else {
+          clearInterval(timer);
         }
+      }, 1000);
+    },
+    async submit() {
+      this.verification_username();
+      this.verification_email();
+      this.verification_password();
+      this.verification_validatecode();
+      this.verification_check();
+      if (
+        !this.error.username &&
+        !this.error.email &&
+        !this.error.password &&
+        !this.error.validatecode &&
+        !this.error.agrement
+      ) {
+        let res = await this.$api.register({
+          username: this.form.username,
+          password: this.form.password,
+          email: this.form.email,
+          verificationCode: this.form.validatecode,
+        });
+        if (res.code == 1000) {
+          this.$router.push("/login");
         }
+      }
+    },
+  },
+};
 </script>
 
 <style scoped>
 .invalid-feedback {
-    display: block !important;
+  display: block !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/layout/Packages.vue b/src/views/layout/Packages.vue
index e69de29..fca228b 100644
--- a/src/views/layout/Packages.vue
+++ b/src/views/layout/Packages.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="main-wrapper">
+    <div class="row">
+      <div class="col" v-if="isLoaded">
+        <DataTable
+          title="套餐管理"
+          :headers="tableHeaders"
+          :rows="tableData"
+          :data-count="tableData.length"
+          @pageChanged="pageChangedHandle"
+          @dataDelete="deleteHandle"
+          @dataModify="modifyHandle"
+          @dateAdd="addHandle"
+        />
+        <PackageFormModal ref="packageFormModal" :title="message" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DataTable from "@/components/DataTable.vue";
+import PackageFormModal from "@/components/PackageFormModal.vue";
+export default {
+  components: {
+    DataTable,
+    PackageFormModal,
+  },
+  data() {
+    return {
+      message: "",
+      dataCount: 0,
+      isLoaded: false,
+      tableHeaders: [
+        { text: "编号", value: "id", width: "155px" },
+        { text: "套餐名", value: "name", width: "214px" },
+        { text: "价格", value: "price", width: "82px" },
+        { text: "调用次数限制", value: "callLimit", width: "103px" },
+        { text: "一分钟调用限制", value: "oneMinuteLimit", width: "300px" },
+      ],
+      tableData: [],
+    };
+  },
+  methods: {
+    async loadPackesList(pageIndex = 1, pageSize = 10, desc = false) {
+      try {
+        const res = await this.$api.getPackageList(pageIndex, pageSize, desc);
+        if (res.code == "1000") {
+          this.tableData = res.data;
+        }
+      } catch (e) {
+        this.$alert("用户列表数据加载失败!", "danger");
+        console.error(e);
+      }
+    },
+    async pageChangedHandle(newval) {
+      await this.loadPackesList(newval.pageIndex, newval.pageSize, false);
+    },
+    async deleteHandle(id) {
+      const confirmRes = await this.$confirm("删除", "是否删除此套餐？");
+      if (!confirmRes) return;
+      try {
+        const res = await this.$api.deletePackage(id);
+        if (res.code != 1000) {
+          this.$alert(res.message, "danger");
+          return;
+        }
+        this.$alert("删除成功", "success");
+      } catch (e) {
+        this.$alert(e, "danger");
+      }
+    },
+    async modifyHandle(id) {
+      try {
+        //加载套餐信息到新窗口
+        this.message = "修改套餐";
+        const userinfoRes = await this.$api.getPackageInfo(id);
+        if (userinfoRes.code != 1000) {
+          this.$alert(userinfoRes.message, "danger");
+          return;
+        }
+        //拉起修改弹窗
+        const res = await this.$refs.packageFormModal.open(id, userinfoRes.data);
+        //弹窗返回为null表示用户关闭了窗口，不执行操作
+        if (res == null) return;
+        const modifyRes = await this.$api.updatePackage(id, res);
+        if (modifyRes.code != 1000) {
+          this.$alert(modifyRes.message, "danger");
+          return;
+        }
+        this.$alert("修改成功", "success");
+      } catch (e) {
+        this.$alert(e, "danger");
+      }
+    },
+    async addHandle() {
+      try {
+        this.message = "添加套餐";
+        const res = await this.$refs.packageFormModal.open(null);
+        //弹窗返回为null表示用户关闭了窗口，不执行操作
+        if (res == null) return;
+        const modifyRes = await this.$api.addPackage(res);
+        if (modifyRes.code != 1000) {
+          this.$alert(modifyRes.message, "danger");
+          return;
+        }
+        this.$alert("添加成功", "success");
+      } catch (e) {
+        this.$alert(e, "danger");
+      }
+    },
+  },
+  mounted() {
+    this.isLoaded = true;
+    this.loadPackesList();
+  },
+};
+</script>
diff --git a/src/views/layout/Users.vue b/src/views/layout/Users.vue
index e047220..78527ea 100644
--- a/src/views/layout/Users.vue
+++ b/src/views/layout/Users.vue
@@ -1,10 +1,16 @@
 <template>
   <div class="main-wrapper">
-
     <div class="row">
       <div class="col" v-if="isLoaded">
-        <DataTable title="用户管理" :headers="tableHeaders" :rows="tableData" :data-count="dataCount"
-          @pageChanged="pageChangedHandle" @dataDelete="deleteHandle" @dataModify="modifyHandle" />
+        <DataTable
+          title="用户管理"
+          :headers="tableHeaders"
+          :rows="tableData"
+          :data-count="dataCount"
+          @pageChanged="pageChangedHandle"
+          @dataDelete="deleteHandle"
+          @dataModify="modifyHandle"
+        />
         <user-form-modal title="修改用户" ref="userModal" />
       </div>
     </div>
@@ -12,13 +18,13 @@
 </template>
 
 <script>
-import DataTable from '@/components/DataTable.vue';
-import UserFormModal from '../../components/UserFormModal.vue';
+import DataTable from "@/components/DataTable.vue";
+import UserFormModal from "../../components/UserFormModal.vue";
 
 export default {
   components: {
     DataTable,
-    UserFormModal
+    UserFormModal,
   },
   data() {
     return {
@@ -31,7 +37,7 @@ export default {
         { text: "余额", value: "balance", width: "29px", type: "money" },
         { text: "状态", value: "isBan", width: "82px", type: "bool" },
         { text: "角色", value: "roles", width: "103px", type: "arrObj", child: "role" },
-        { text: "创建时间", value: "created", width: "103px", type: "datetime" }
+        { text: "创建时间", value: "created", width: "103px", type: "datetime" },
       ],
       tableData: [],
     };
@@ -39,61 +45,59 @@ export default {
   methods: {
     async loadUserList(pageIndex = 1, pageSize = 10, desc = false) {
       try {
-        const res = await this.$api.getUserList(pageIndex, pageSize, desc)
-        if (res.code == '1000') {
-          this.tableData = res.data
+        const res = await this.$api.getUserList(pageIndex, pageSize, desc);
+        if (res.code == "1000") {
+          this.tableData = res.data;
         }
       } catch (e) {
-        this.$alert('用户列表数据加载失败!', 'danger')
-        console.error(e)
+        this.$alert("用户列表数据加载失败!", "danger");
+        console.error(e);
       }
     },
     async pageChangedHandle(newval) {
-      await this.loadUserList(newval.pageIndex, newval.pageSize, false)
+      await this.loadUserList(newval.pageIndex, newval.pageSize, false);
     },
     async deleteHandle(id) {
-      const confirmRes = await this.$confirm('删除', '是否删除用户？')
+      const confirmRes = await this.$confirm("删除", "是否删除用户？");
       if (!confirmRes) return;
       try {
-        const res = await this.$api.deleteUser(id)
+        const res = await this.$api.deleteUser(id);
         if (res.code != 1000) {
-          this.$alert(res.message, 'danger')
+          this.$alert(res.message, "danger");
           return;
         }
-        this.$alert('删除成功', 'success')
-
+        this.$alert("删除成功", "success");
       } catch (e) {
-        this.$alert(e, 'danger')
+        this.$alert(e, "danger");
       }
     },
     async modifyHandle(id) {
       try {
         //加载用户信息到新窗口
-        const userinfoRes = await this.$api.getUserInfoById(id)
-        if(userinfoRes.code != 1000){
-          this.$alert(userinfoRes.message,'danger')
-          return
+        const userinfoRes = await this.$api.getUserInfoById(id);
+        if (userinfoRes.code != 1000) {
+          this.$alert(userinfoRes.message, "danger");
+          return;
         }
         //拉起修改弹窗
-        const res = await this.$refs.userModal.open(id,userinfoRes.data)
+        const res = await this.$refs.userModal.open(id, userinfoRes.data);
         //弹窗返回为null表示用户关闭了窗口，不执行操作
-        if(res == null) return
-        const modifyRes = await this.$api.updateUserInfo(id,res)
-        if(modifyRes.code != 1000){
-          this.$alert(modifyRes.message, 'danger')
-          return
+        if (res == null) return;
+        const modifyRes = await this.$api.updateUserInfo(id, res);
+        if (modifyRes.code != 1000) {
+          this.$alert(modifyRes.message, "danger");
+          return;
         }
-        this.$alert('修改成功', 'success')
-
+        this.$alert("修改成功", "success");
       } catch (e) {
-        this.$alert(e, 'danger')
+        this.$alert(e, "danger");
       }
-    }
+    },
   },
   async mounted() {
-    await this.loadUserList()
-    this.dataCount = (await this.$api.getUserCount()).data
-    this.isLoaded = true
-  }
+    await this.loadUserList();
+    this.dataCount = (await this.$api.getUserCount()).data;
+    this.isLoaded = true;
+  },
 };
 </script>