diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 69c2fc75..5c8537e4 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -7,7 +7,7 @@ module.exports = {
   },
   parser: "vue-eslint-parser",
   extends: [
-    // 参考vuejs官方的eslint配置： https://eslint.vuejs.org/user-guide/#usage
+    // https://eslint.vuejs.org/user-guide/#usage
     "plugin:vue/vue3-recommended",
     "./.eslintrc-auto-import.json",
     "prettier",
@@ -24,21 +24,9 @@ module.exports = {
   },
   plugins: ["vue", "@typescript-eslint"],
   rules: {
-    "vue/multi-word-component-names": "off", // 关闭组件名必须多字： https://eslint.vuejs.org/rules/multi-word-component-names.html
-    "@typescript-eslint/no-empty-function": "off", // 关闭空方法检查
-    "@typescript-eslint/no-explicit-any": "off", // 关闭any类型的警告
+    // https://eslint.vuejs.org/rules/#priority-a-essential-error-prevention
+    "vue/multi-word-component-names": "off",
     "vue/no-v-model-argument": "off",
-    "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/ban-ts-ignore": "off",
-    "@typescript-eslint/ban-ts-comment": "off",
-    "@typescript-eslint/ban-types": "off",
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-var-requires": "off",
-    "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/no-use-before-define": "off",
-    "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off",
     "vue/script-setup-uses-vars": "error",
     "vue/no-reserved-component-names": "off",
     "vue/custom-event-name-casing": "off",
@@ -63,7 +51,22 @@ module.exports = {
         math: "always",
       },
     ],
-    "vue/multi-word-component-names": "off",
+
+    "@typescript-eslint/no-empty-function": "off", // 关闭空方法检查
+    "@typescript-eslint/no-explicit-any": "off", // 关闭any类型的警告
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/ban-ts-ignore": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+
     "prettier/prettier": [
       "error",
       {
diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
index e4f925fc..8b26e7c5 100644
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -146,8 +146,7 @@ onMounted(() => {
   .icon-item {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-items: center;
+    place-items: center center;
     width: 10%;
     padding: 5px;
     margin: 0 10px 10px 0;
diff --git a/src/layout/components/NavBar/NavRight.vue b/src/layout/components/NavBar/NavRight.vue
index 35c595e5..904f0182 100644
--- a/src/layout/components/NavBar/NavRight.vue
+++ b/src/layout/components/NavBar/NavRight.vue
@@ -104,8 +104,7 @@ function logout() {
 
 .avatar-container {
   display: flex;
-  align-items: center;
-  justify-items: center;
+  place-items: center center;
   margin: 0 5px;
   cursor: pointer;
 
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 93d81bb0..6caa9965 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -3,7 +3,6 @@ import { useSettingsStore } from "@/store/modules/settings";
 import { usePermissionStore } from "@/store/modules/permission";
 import { useAppStore } from "@/store/modules/app";
 import { useRoute } from "vue-router";
-import defaultSettings from "@/settings";
 
 const route = useRoute();
 
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
index c25a033c..9ca788f6 100644
--- a/src/layout/components/Sidebar/Item.vue
+++ b/src/layout/components/Sidebar/Item.vue
@@ -1,9 +1,5 @@
 <template>
-  <i
-    v-if="icon && icon.includes('el-icon')"
-    :class="icon"
-    class="sub-el-icon"
-  ></i>
+  <el-icon v-if="icon && icon.includes('el-icon')" class="sub-el-icon" />
   <SvgIcon v-else-if="icon" :icon-class="icon" />
   <span v-if="title">{{ translateRouteTitle(title) }}</span>
 </template>
@@ -12,7 +8,7 @@
 import SvgIcon from "@/components/SvgIcon/index.vue";
 import { translateRouteTitle } from "@/utils/i18n";
 
-const props = defineProps({
+defineProps({
   icon: {
     type: String,
     default: "",
diff --git a/src/views/demo/icons.vue b/src/views/demo/icons.vue
index 643702a6..5fd397fe 100644
--- a/src/views/demo/icons.vue
+++ b/src/views/demo/icons.vue
@@ -99,7 +99,7 @@ const svg_icons: string[] = [
 ];
 const icons = ref(ElementPlusIconsVue);
 
-const { text, isSupported, copy } = useClipboard();
+const { copy } = useClipboard();
 
 function generateIconCode(symbol: any) {
   return `<svg-icon icon-class="${symbol}" />`;
diff --git a/src/views/demo/signature.vue b/src/views/demo/signature.vue
index ee713325..c63fc444 100644
--- a/src/views/demo/signature.vue
+++ b/src/views/demo/signature.vue
@@ -132,35 +132,6 @@ function paint(
   ctx.closePath();
   ctx.stroke();
 }
-
-// 橡皮
-function eraser(
-  startX: number,
-  startY: number,
-  endX: number,
-  endY: number,
-  ctx: CanvasRenderingContext2D,
-  size: number,
-  shape: "rect" | "circle"
-) {
-  ctx.beginPath();
-  ctx.globalAlpha = 1;
-  switch (shape) {
-    case "rect":
-      ctx.lineWidth = size;
-      ctx.strokeStyle = "#fff";
-      ctx.moveTo(startX, startY);
-      ctx.lineTo(endX, endY);
-      ctx.closePath();
-      ctx.stroke();
-      break;
-    case "circle":
-      ctx.fillStyle = "#fff";
-      ctx.arc(startX, startY, size, 0, 2 * Math.PI);
-      ctx.fill();
-      break;
-  }
-}
 </script>
 <template>
   <div class="canvas-dom">
diff --git a/src/views/demo/table.vue b/src/views/demo/table.vue
deleted file mode 100644
index def1056a..00000000
--- a/src/views/demo/table.vue
+++ /dev/null
@@ -1,440 +0,0 @@
-<template>
-  <div class="table-page">
-    <div class="table-wrap">
-      <el-table :data="tableData" border>
-        <el-table-column
-          v-for="oneCol in tableColList"
-          :key="oneCol.prop"
-          :prop="oneCol.prop"
-          :label="oneCol.label"
-          min-width="200"
-          :fixed="oneCol.fixed"
-        >
-          <template #header>
-            <div class="table-head">
-              <div class="label-wrap" @click="handleClickHead(oneCol)">
-                <div>{{ oneCol.label }}</div>
-                <template v-if="oneCol.order">
-                  <i-ep-sort-up v-if="oneCol.order === 'asc'" />
-                  <i-ep-sort-down v-else />
-                </template>
-              </div>
-
-              <el-dropdown
-                trigger="click"
-                @command="(command: string) => handleCommand(command, oneCol)"
-              >
-                <i-ep-arrow-down class="action-more" />
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <template v-if="oneCol.prop === 'id'">
-                      <el-dropdown-item :command="TableCommand.ASC">
-                        升序
-                      </el-dropdown-item>
-                      <el-dropdown-item :command="TableCommand.DESC">
-                        降序
-                      </el-dropdown-item>
-                    </template>
-                    <el-dropdown-item :command="TableCommand.FIXED">
-                      {{ oneCol.fixed ? "解冻" : "冻结" }}
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <h3>解析excel</h3>
-    <el-upload
-      :disabled="state.fileList.length !== 0"
-      class="upload"
-      drag
-      accept=".xls,.xlsx"
-      :show-file-list="false"
-      action=""
-      :http-request="handleUploadFile"
-    >
-      <i-ep-upload-filled class="icon" />
-      <div class="el-upload__text">拖拽excel到这里</div>
-    </el-upload>
-    <div v-loading="loading" class="excel-table-wrap">
-      <el-table
-        v-if="state.tableExcelHead.length && state.excelTableData.length"
-        :data="state.excelTableData"
-        stripe
-        border
-        style="width: 100%"
-        size="small"
-      >
-        <el-table-column
-          v-for="(item, index) in state.tableExcelHead"
-          :key="index"
-          :prop="item"
-          :label="item"
-          width="150"
-        >
-          <template #default="scope">
-            <span class="overflow-ellipsis">{{ scope.row[item] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import * as XLSX from "xlsx/xlsx.mjs";
-import { cloneDeep } from "lodash-es";
-
-enum TableCommand {
-  // 冻结
-  FIXED = "fixed",
-  // 升序
-  ASC = "asc",
-  // 降序
-  DESC = "desc",
-}
-
-let tableData = ref<any[]>([]);
-const loading = ref(false);
-const orginData = [
-  {
-    date: "2016-05-03",
-    name: "admin",
-    address: "广东",
-    id: 1,
-    gender: "男",
-    height: 176,
-    school: "清华大学",
-    hobby: "游泳",
-  },
-  {
-    date: "2016-05-02",
-    name: "admin",
-    address: "江西",
-    id: 3,
-    gender: "男",
-    height: 167,
-    school: "清华大学",
-    hobby: "游泳",
-  },
-  {
-    date: "2016-05-04",
-    name: "admin",
-    address: "湖南",
-    id: 4,
-    gender: "男",
-    height: 176,
-    school: "清华大学",
-    hobby: "游泳",
-  },
-  {
-    date: "2016-05-01",
-    name: "admin",
-    address: "重庆",
-    id: 2,
-    gender: "女",
-    height: 178,
-    school: "清华大学",
-    hobby: "游泳",
-  },
-];
-const state = reactive({
-  fileList: [],
-  excelData: [],
-  tableHead: [],
-  sheetList: [] as any[],
-  allSheetObj: {} as any,
-  tableExcelHead: [] as string[],
-  activeSheet: "",
-  fileName: "",
-  excelTableData: [],
-});
-onMounted(() => {
-  tableData.value = orginData.map((item) => item);
-});
-interface ColumnProp {
-  label: string;
-  prop: string;
-  order: null | string;
-  fixed: null | string;
-}
-const tableColList = ref<ColumnProp[]>([
-  {
-    label: "ID",
-    prop: "id",
-    order: null,
-    fixed: null,
-  },
-  {
-    label: "姓名",
-    prop: "name",
-    order: null,
-    fixed: null,
-  },
-  {
-    label: "性别",
-    prop: "gender",
-    order: null,
-    fixed: null,
-  },
-  {
-    label: "日期",
-    prop: "date",
-    order: null,
-    fixed: null,
-  },
-  {
-    label: "地址",
-    prop: "address",
-    order: null,
-    fixed: null,
-  },
-  {
-    label: "身高",
-    prop: "height",
-    order: null,
-    fixed: null,
-  },
-  {
-    label: "学校",
-    prop: "school",
-    order: null,
-    fixed: null,
-  },
-  {
-    label: "爱好",
-    prop: "hobby",
-    order: null,
-    fixed: null,
-  },
-]);
-const handleCommand = (command: string, tableCol: ColumnProp) => {
-  if (command === TableCommand.FIXED) {
-    tableColList.value.forEach((item) => {
-      if (item.prop === tableCol.prop) {
-        // 冻结/解冻
-        item.fixed = item.fixed ? null : "left";
-      }
-    });
-  }
-  // 升序
-  if (command === TableCommand.ASC) {
-    tableColList.value.forEach((item) => {
-      if (item.prop === tableCol.prop) {
-        item.order = "asc";
-        sortTableData(item);
-      }
-    });
-  }
-  // 降序
-  if (command === TableCommand.DESC) {
-    tableColList.value.forEach((item) => {
-      if (item.prop === tableCol.prop) {
-        item.order = "desc";
-        sortTableData(item);
-      }
-    });
-  }
-};
-// 点击表头循环排序
-const handleClickHead = (oneCol: ColumnProp) => {
-  // 排序顺序
-  const sortArr = [null, "asc", "desc"];
-  const { order } = oneCol;
-  const findIndex = sortArr.findIndex((el) => el === order);
-  let currentIndex = findIndex + 1;
-  if (currentIndex > 2) {
-    currentIndex = 0;
-  }
-  // 排序只能排一列
-  tableColList.value.forEach((item) => {
-    if (item.prop === oneCol.prop) {
-      item.order = sortArr[currentIndex];
-    } else {
-      item.order = null;
-    }
-  });
-  sortTableData(oneCol);
-};
-const sortTableData = (sortCol: ColumnProp) => {
-  // 升序
-  if (sortCol.order === TableCommand.ASC) {
-    const compare = (p: string) => (m: any, n: any) => m[p] - n[p];
-    tableData.value = cloneDeep(orginData).sort(compare(sortCol.prop));
-  }
-  // 降序
-  if (sortCol.order === TableCommand.DESC) {
-    const compare = (p: string) => (m: any, n: any) => n[p] - m[p];
-    tableData.value = cloneDeep(orginData).sort(compare(sortCol.prop));
-  }
-  // 不排序
-  if (!sortCol.order) {
-    tableData.value = cloneDeep(orginData).map((item: any) => item);
-  }
-};
-const handleUploadFile = (data: any) => {
-  const { file } = data;
-  const { size, name } = file;
-  state.fileName = name;
-  // 获取最后一个.的位置
-  const index = name.lastIndexOf(".");
-  // 获取文件类型
-  const ext = name.substring(index + 1);
-  const accept = ["xlsx", "xls"];
-  if (!accept.includes(ext)) {
-    ElMessage({
-      type: "error",
-      message: "请选择xls或者xlsx文件",
-    });
-    return;
-  }
-
-  loading.value = true;
-  readFile(file, "");
-};
-const currentSheetName = computed(() => {
-  const find = state.sheetList.find(
-    (item) => item.sheetId === state.activeSheet
-  );
-  return find?.name || "";
-});
-
-const getFile = () => {
-  const sheetName = `${currentSheetName.value}`;
-  let workbook = XLSX.utils.book_new();
-
-  workbook = {
-    ...workbook,
-    SheetNames: [sheetName],
-    Sheets: {},
-  };
-  workbook.Sheets[sheetName] = state.allSheetObj[sheetName];
-  const wopts = {
-    bookType: "xlsx", // 要生成的文件类型
-    bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
-    type: "binary", // 二进制格式
-  };
-  const wbout = XLSX.write(workbook, wopts);
-  const transform = (s: any) => {
-    const buf = new ArrayBuffer(s.length);
-    const view = new Uint8Array(buf);
-
-    // eslint-disable-next-line no-bitwise
-    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
-    return buf;
-  };
-  // 字符串转ArrayBuffer
-  const blob = new Blob([transform(wbout)], {
-    type: "application/octet-stream",
-  });
-  const file = new window.File([blob], state.fileName, { type: "xlsx" });
-};
-const readFile = (file: any, callback: any) => {
-  const rABS = true; // true: readAsBinaryString ; false: readAsArrayBuffer
-  const reader = new FileReader();
-  reader.onload = function (e) {
-    let data = e.target?.result as any;
-    if (!rABS) data = new Uint8Array(data);
-    const readData = XLSX.read(data, {
-      type: rABS ? "binary" : "array",
-      cellText: false,
-      cellDates: true,
-    });
-    const { Sheets, Workbook } = readData;
-    state.sheetList = Workbook.Sheets;
-    state.activeSheet = state.sheetList[0].sheetId;
-    state.allSheetObj = Sheets;
-    const result = XLSX.utils.sheet_to_json(
-      state.allSheetObj[currentSheetName.value],
-      { raw: false, dateNF: "YYYY-MM-DD HH:mm:ss" }
-    );
-    const allData = XLSX.utils.sheet_to_json(
-      state.allSheetObj[currentSheetName.value],
-      { header: 1 }
-    );
-    state.tableExcelHead = allData.length > 0 ? allData[0] : Array(10).fill("");
-    state.excelTableData = result;
-
-    // getFile();
-    // 获取表头key
-    if (callback) callback(readData);
-  };
-  if (rABS) {
-    reader.readAsBinaryString(file);
-  } else {
-    reader.readAsArrayBuffer(file);
-  }
-  loading.value = false;
-};
-</script>
-<style lang="scss" scoped>
-.table-page {
-  width: 100%;
-  height: calc(100vh - 84px);
-  padding: 10px;
-  overflow-y: auto;
-
-  .table-wrap {
-    // height: 100%;
-    padding: 20px;
-    background-color: #fff;
-
-    .el-table {
-      width: 800px;
-
-      .table-head {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        .label-wrap {
-          display: flex;
-          flex: 1;
-          align-items: center;
-          cursor: pointer;
-
-          svg {
-            margin-left: 5px;
-          }
-        }
-
-        .action-more {
-          cursor: pointer;
-
-          &:hover {
-            color: #409eff;
-          }
-        }
-      }
-    }
-  }
-
-  .upload {
-    box-sizing: border-box;
-    height: 230px;
-    margin-top: 16px;
-    margin-bottom: 20px;
-    background-color: #e3f2fd;
-    border: 2px dashed #90caf9;
-    border-radius: 2px;
-
-    :deep(.el-upload-dragger) {
-      padding: 0;
-      background-color: #e3f2fd;
-      border: none;
-
-      .icon {
-        font-size: 110px;
-        color: #90caf9;
-      }
-    }
-  }
-
-  .excel-table-wrap {
-    width: 100%;
-    min-height: 300px;
-  }
-}
-</style>
diff --git a/src/views/demo/table/complex-table.vue b/src/views/demo/table/complex-table.vue
deleted file mode 100644
index bf815c0e..00000000
--- a/src/views/demo/table/complex-table.vue
+++ /dev/null
@@ -1,617 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="filter-container">
-      <el-input
-        v-model="listQuery.title"
-        placeholder="Title"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter="handleFilter"
-      />
-      <el-select
-        v-model="listQuery.importance"
-        placeholder="Imp"
-        clearable
-        style="width: 90px"
-        class="filter-item"
-      >
-        <el-option
-          v-for="item in importanceOptions"
-          :key="item"
-          :label="item"
-          :value="item"
-        />
-      </el-select>
-      <el-select
-        v-model="listQuery.type"
-        placeholder="Type"
-        clearable
-        class="filter-item"
-        style="width: 130px"
-      >
-        <el-option
-          v-for="item in calendarTypeOptions"
-          :key="item.key"
-          :label="item.display_name + '(' + item.key + ')'"
-          :value="item.key"
-        />
-      </el-select>
-      <el-select
-        v-model="listQuery.sort"
-        style="width: 140px"
-        class="filter-item"
-        @change="handleFilter"
-      >
-        <el-option
-          v-for="item in sortOptions"
-          :key="item.key"
-          :label="item.label"
-          :value="item.key"
-        />
-      </el-select>
-      <el-button
-        class="filter-item"
-        type="primary"
-        :icon="Search"
-        @click="handleFilter"
-      >
-        Search
-      </el-button>
-
-      <el-button
-        class="filter-item"
-        style="margin-left: 10px"
-        type="primary"
-        :icon="Edit"
-        @click="handleCreate"
-      >
-        Add
-      </el-button>
-
-      <el-button
-        :loading="downloadLoading"
-        class="filter-item"
-        type="primary"
-        :icon="Download"
-        @click="handleDownload"
-      >
-        Export
-      </el-button>
-      <el-checkbox
-        v-model="showReviewer"
-        class="filter-item"
-        style="margin-left: 15px"
-        @change="tableKey = tableKey + 1"
-      >
-        reviewer
-      </el-checkbox>
-    </div>
-
-    <el-table
-      :key="tableKey"
-      v-loading="listLoading"
-      :data="list"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%"
-      @sort-change="sortChange"
-    >
-      <el-table-column
-        label="ID"
-        prop="id"
-        sortable="custom"
-        align="center"
-        width="80"
-        :class-name="getSortClass('id')"
-      >
-        <template #default="{ row }">
-          <span>{{ row.id }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column width="160px" align="center" label="Date">
-        <template #default="{ row }">
-          <span>{{ formatDate(row.timestamp) }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="Title" min-width="150px">
-        <template #default="{ row }">
-          <span class="link-type" @click="handleUpdate(row)">{{
-            row.title
-          }}</span>
-          <el-tag>
-            {{ calendarTypeKeyValue[row.type] }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="Author" width="110px" align="center">
-        <template #default="{ row }">
-          <span>{{ row.author }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        v-if="showReviewer"
-        label="Reviewer"
-        width="110px"
-        align="center"
-      >
-        <template #default="{ row }">
-          <span style="color: red">{{ row.reviewer }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="Imp" width="80px">
-        <template #default="{ row }">
-          <svg-icon
-            v-for="n in +row.importance ? +row.importance : 0"
-            :key="n"
-            icon-class="star"
-            class="meta-item__icon"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column label="Readings" align="center" width="95">
-        <template #default="{ row }">
-          <span
-            v-if="row.pageviews"
-            class="link-type"
-            @click="handleFetchPv(row.id)"
-            >{{ row.pageviews }}</span
-          >
-          <span v-else>0</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="Status" class-name="status-col" width="100">
-        <template #default="{ row }">
-          <el-tag :type="statusType(row.status)">
-            {{ row.status }}
-          </el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column
-        label="Actions"
-        align="center"
-        width="260"
-        class-name="small-padding fixed-width"
-      >
-        <template #default="{ row, $index }">
-          <el-button type="primary" size="default" @click="handleUpdate(row)">
-            编辑
-          </el-button>
-          <el-button
-            v-if="row.status != 'published'"
-            size="default"
-            type="success"
-            @click="handleModifyStatus(row, 'published')"
-          >
-            发布
-          </el-button>
-          <el-button
-            v-if="row.status != 'draft'"
-            size="default"
-            @click="handleModifyStatus(row, 'draft')"
-          >
-            草稿
-          </el-button>
-
-          <el-button
-            size="default"
-            type="danger"
-            @click="handleDelete(row, $index)"
-          >
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="listQuery.page"
-      v-model:limit="listQuery.limit"
-      @pagination="getList"
-    />
-
-    <el-dialog v-model="dialogPvVisible" title="Reading statistics">
-      <el-table
-        :data="pvData"
-        border
-        fit
-        highlight-current-row
-        style="width: 100%"
-      >
-        <el-table-column prop="key" label="Channel" />
-        <el-table-column prop="pv" label="Pv" />
-      </el-table>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button type="primary" @click="dialogPvVisible = false">
-            Confirm
-          </el-button>
-        </span>
-      </template>
-    </el-dialog>
-    <el-dialog
-      :title="textMap[dialogStatus]"
-      v-model="dialogFormVisible"
-      :close-on-click-modal="false"
-    >
-      <el-form
-        ref="formRef"
-        :rules="rules"
-        :model="formData"
-        label-position="left"
-        label-width="70px"
-        style="width: 400px; margin-left: 50px"
-      >
-        <el-form-item label="Type" prop="type">
-          <el-select
-            v-model="formData.type"
-            class="filter-item"
-            placeholder="Please select"
-          >
-            <el-option
-              v-for="item in calendarTypeOptions"
-              :key="item.key"
-              :label="item.display_name"
-              :value="item.key"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="Date" prop="timestamp">
-          <el-date-picker
-            v-model="formData.timestamp"
-            type="datetime"
-            placeholder="Please pick a date"
-          />
-        </el-form-item>
-        <el-form-item label="Title" prop="title">
-          <el-input v-model="formData.title" />
-        </el-form-item>
-        <el-form-item label="Status">
-          <el-select
-            v-model="formData.status"
-            class="filter-item"
-            placeholder="Please select"
-          >
-            <el-option
-              v-for="item in statusOptions"
-              :key="item"
-              :label="item"
-              :value="item"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="Imp">
-          <el-rate
-            v-model="formData.importance"
-            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
-            :max="3"
-            style="margin-top: 8px"
-          />
-        </el-form-item>
-        <el-form-item label="Remark">
-          <el-input
-            v-model="formData.remark"
-            :autosize="{ minRows: 2, maxRows: 4 }"
-            type="textarea"
-            placeholder="Please input"
-          />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="resetForm(formRef)">Reset</el-button>
-          <el-button @click="dialogFormVisible = false"> Cancel </el-button>
-          <el-button
-            type="primary"
-            @click="
-              dialogStatus === 'create'
-                ? createData(formRef)
-                : updateData(formRef)
-            "
-          >
-            Confirm</el-button
-          >
-        </span>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Edit, Search, Download } from "@element-plus/icons-vue";
-import type { FormInstance, FormRules } from "element-plus";
-
-import {
-  fetchList,
-  fetchPv,
-  createArticle,
-  updateArticle,
-  deleteArticle,
-  ArticleQuery,
-  ArticleDetail,
-  ArticleCreate,
-  ArticleUpdate,
-} from "@/api/article";
-
-defineOptions({
-  // eslint-disable-next-line
-  name: "ComplexTable",
-  inheritAttrs: false,
-});
-
-const importanceOptions = [1, 2, 3];
-const sortOptions = [
-  { label: "ID Ascending", key: "+id" },
-  { label: "ID Descending", key: "-id" },
-];
-const statusOptions = ["published", "draft", "deleted"];
-const statusType = (status: string) => {
-  const statusMap = {
-    published: "success",
-    draft: "info",
-    deleted: "danger",
-  };
-  return statusMap[status as keyof typeof statusMap];
-};
-
-const showReviewer = ref(false);
-const downloadLoading = ref(false);
-const tableKey = ref(0);
-const listLoading = ref(true);
-const list = ref<ArticleDetail[]>([]);
-const total = ref(0);
-const dialogPvVisible = ref(false);
-const pvData = ref({});
-const dialogFormVisible = ref(false);
-
-const formRef = ref<FormInstance>();
-
-interface Form {
-  id?: number;
-  type?: string;
-  timestamp?: Date;
-  title?: string;
-  status?: string;
-  importance?: number;
-  remark?: string;
-}
-
-const formData = ref<Form>({});
-const rules = reactive<FormRules>({
-  type: [{ required: true, message: "type is required", trigger: "change" }],
-  timestamp: [
-    {
-      type: "date",
-      required: true,
-      message: "timestamp is required",
-      trigger: "change",
-    },
-  ],
-  title: [{ required: true, message: "title is required", trigger: "blur" }],
-});
-const dialogStatus = ref<any>();
-const textMap: any = {
-  update: "Edit",
-  create: "Create",
-};
-
-const listQuery = ref<ArticleQuery>({
-  page: 1,
-  limit: 10,
-  importance: undefined,
-  title: undefined,
-  type: undefined,
-  sort: "+id",
-});
-
-const calendarTypeOptions = [
-  { key: "CN", display_name: "China" },
-  { key: "US", display_name: "USA" },
-  { key: "JP", display_name: "Japan" },
-  { key: "EU", display_name: "Eurozone" },
-];
-
-// arr to obj, such as { CN : "China", US : "USA" }
-const calendarTypeKeyValue = calendarTypeOptions.reduce((acc: any, cur) => {
-  acc[cur.key] = cur.display_name;
-  return acc;
-}, {});
-
-const getList = () => {
-  listLoading.value = true;
-  fetchList(listQuery.value).then((res) => {
-    list.value = res.data.items as ArticleDetail[];
-    total.value = res.data.total;
-    listLoading.value = false;
-  });
-};
-
-const handleFilter = () => {
-  listQuery.value.page = 1;
-  getList();
-};
-
-const handleCreate = () => {
-  console.log("handleCreate");
-  formData.value = {};
-  dialogStatus.value = "create";
-  dialogFormVisible.value = true;
-};
-
-const formatJson = (filterVal: string[]) => {
-  return list.value.map((v: any) =>
-    filterVal.map((j: any) => {
-      if (j === "timestamp") {
-        return formatDate(v[j]);
-      } else {
-        return v[j];
-      }
-    })
-  );
-};
-
-const formatDate = (timestamp: number) => {
-  const date = new Date(timestamp);
-  return date
-    .toLocaleString("zh-CN", {
-      year: "numeric",
-      month: "2-digit",
-      day: "2-digit",
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-      hour12: false,
-    })
-    .replace(/\//g, "-");
-};
-
-const handleDownload = () => {
-  downloadLoading.value = true;
-  import("./Export2Excel").then((excel) => {
-    const tHeader = ["timestamp", "title", "type", "importance", "status"];
-    const filterVal = ["timestamp", "title", "type", "importance", "status"];
-    const data = formatJson(filterVal);
-    excel.export_json_to_excel({
-      header: tHeader,
-      data,
-      filename: "table-list",
-    });
-    downloadLoading.value = false;
-  });
-};
-
-const sortChange = (data: any) => {
-  const { prop, order } = data;
-  if (prop === "id") {
-    if (order === "ascending") {
-      listQuery.value.sort = "+id";
-    } else {
-      listQuery.value.sort = "-id";
-    }
-    handleFilter();
-  }
-};
-
-const getSortClass = (key: string) => {
-  const sort = listQuery.value.sort;
-  if (sort === `+${key}`) {
-    return "ascending";
-  } else if (sort === `-${key}`) {
-    return "descending";
-  } else {
-    return "";
-  }
-};
-
-const handleUpdate = (row: any) => {
-  formData.value = Object.assign({}, row);
-  dialogStatus.value = "update";
-  dialogFormVisible.value = true;
-  console.log(formData.value);
-  return;
-};
-
-const createData = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  await formEl.validate((valid) => {
-    if (valid) {
-      console.log("submit!");
-      createArticle(formData.value as ArticleCreate).then((res) => {
-        const article = res.data.article;
-        list.value.push(article);
-        dialogFormVisible.value = false;
-        total.value += 1;
-        ElNotification({
-          title: "Success",
-          message: `创建成功 id:${article.id}`,
-          type: "success",
-        });
-      });
-    } else {
-      console.log("error submit!");
-      return false;
-    }
-  });
-};
-
-const updateData = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      updateArticle(formData.value as ArticleUpdate).then((res) => {
-        console.log("updateArticle", res);
-        const article = res.data.article;
-        const index = list.value.findIndex((item) => item.id === article.id);
-        list.value.splice(index, 1, article);
-        dialogFormVisible.value = false;
-        ElNotification({
-          title: "Success",
-          message: `修改成功 id:${article.id}`,
-          type: "success",
-        });
-      });
-      return true;
-    } else {
-      console.log("error submit!", fields);
-      return false;
-    }
-  });
-};
-
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-};
-
-const handleFetchPv = (id: number) => {
-  console.log("handleFetchPv", id);
-  fetchPv(id).then((res) => {
-    console.log("fetchPv", res);
-    pvData.value = res.data.pvData;
-    dialogPvVisible.value = true;
-  });
-};
-
-const handleModifyStatus = (row: any, status: string) => {
-  console.log("handleModifyStatus", row, status);
-  const id = row.id;
-  updateArticle({ id, status }).then((res) => {
-    console.log("updateArticle", res);
-    const updateArticle = res.data.article;
-    const index = list.value.findIndex((item) => item.id === id);
-    list.value.splice(index, 1, updateArticle);
-  });
-};
-
-const handleDelete = (row: any, index: number) => {
-  deleteArticle(row.id).then((res) => {
-    list.value.splice(index, 1);
-    total.value -= 1;
-    ElNotification({
-      title: "Success",
-      message: `删除成功 id:${row.id}`,
-      type: "success",
-    });
-  });
-};
-
-onMounted(async () => {
-  getList();
-});
-</script>
-
-<style lang="scss" scoped>
-.filter-container {
-  padding-bottom: 10px;
-
-  .filter-item {
-    margin-right: 10px;
-    margin-bottom: 10px;
-  }
-}
-</style>
diff --git a/src/views/demo/table/drag-table.vue b/src/views/demo/table/drag-table.vue
index 1f595842..c4c65f37 100644
--- a/src/views/demo/table/drag-table.vue
+++ b/src/views/demo/table/drag-table.vue
@@ -112,7 +112,7 @@ const formatDate = (timestamp: any) => {
     .replace(/\//g, "-");
 };
 
-const statusType = (status: string) => {
+const statusType = (status: string): any => {
   const statusMap = {
     published: "success",
     draft: "info",
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index af0559c8..7a3bb366 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -153,14 +153,14 @@ const route = useRoute();
 
 const isDark = ref<boolean>(settingsStore.theme === "dark");
 
-function handleThemeChange(isDark: boolean) {
+const handleThemeChange = (isDark?: string | number | boolean) => {
   console.log("登录页面主题切换", isDark);
   useToggle(isDark);
   settingsStore.changeSetting({
     key: "theme",
     value: isDark ? "dark" : "light",
   });
-}
+};
 
 /**
  * 按钮loading