1

2024-12-23 18:01:57 +08:00 · 2024-12-23 18:01:57 +08:00 · b9a4d448e4
commit b9a4d448e4
parent 215dde9162
20 changed files with 3759 additions and 2006 deletions
--- a/.env.production
+++ b/.env.production
@ -4,7 +4,7 @@ VITE_WEB_TITLE = '固始电子报'
 VITE_WEB_EN_TITLE = 'GUSHI-NEWSPAPER'
 VITE_LOGIN_TITLE = '固始电子报 管理平台'
 VITE_LOGIN_EN_TITLE = 'GuShi Platform'
-VITE_WEB_BASE_API = '/api'
+VITE_WEB_BASE_API = ''
 # 后端接口地址
 VITE_SERVER = 'http://csdzb.hschool.com.cn/'
 # 路由模式[哈希模式 AND WEB模式 [hash | history, 这两个模式是固定死的，不能乱改值]
--- a/package.json
+++ b/package.json
@ -38,7 +38,8 @@
    "sortablejs": "^1.15.3",
    "vue": "^3.5.12",
    "vue-router": "^4.4.5",
-    "vue3-count-to": "^1.1.2"
+    "vue3-count-to": "^1.1.2",
+    "vue3-puzzle-vcode": "^1.1.7"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.25.9",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/api/system/post/index.ts
+++ b/src/api/system/post/index.ts
@ -4,6 +4,7 @@ import koi from "@/utils/axios.ts";
 // 统一管理接口
 enum API {
  //类型接口
+  LOGIN="/api/admin/login/login",
  LIST = "/api/admin/type/index ",
  ADD = "/api/admin/type/add",
  UPDATE = "/api/admin/type/update",
@ -23,9 +24,18 @@ enum API {
  NEWSDEL= "/api/admin/news/del",
  BMINFO="/api/admin/bm/find",
  NEWSADD="/api/admin/news/add",
-
+  NEWSUPDATE="/api/admin/news/update",
+  BMONEADD="/api/admin/bm/addfind",
+  NEWSINFO="/api/admin/news/find",
+  //知识库
+  KNOWLEDGE="/api/admin/zsk/index",
+  KNOWLEDGEADD="/api/admin/zsk/add",
+  KNOWLEDGEUPDATE="/api/admin/zsk/update",
+  KNOWLEDGEDEL="/api/admin/zsk/del",
 }
-
+export const Login = (data: any) => {
+  return koi.post(API.LOGIN, data);
+};
 // 根据ID进行查询
 export const getList = (data: any) => {
  return koi.post(API.LIST, data);
@ -77,5 +87,25 @@ export const bmInfo = (data: any) => {
 export const newsAdd = (data: any) => {
  return koi.post(API.NEWSADD, data);
 };
-
+export const newsUpdate = (data: any) => {
+  return koi.post(API.NEWSUPDATE, data);
+};
+export const newsInfo = (data: any) => {
+  return koi.post(API.NEWSINFO, data);
+};
+export const bmOneAdd = (data: any) => {
+  return koi.post(API.BMONEADD, data);
+};
+export const knowledge = (data: any) => {
+  return koi.post(API.KNOWLEDGE, data);
+};
+export const knowledgeAdd = (data: any) => {
+  return koi.post(API.KNOWLEDGEADD, data);
+};
+export const knowledgeUpdate = (data: any) => {
+  return koi.post(API.KNOWLEDGEUPDATE, data);
+};
+export const knowledgeDel = (data: any) => {
+  return koi.post(API.KNOWLEDGEDEL, data);
+};

--- a/src/assets/json/authMenu.json
+++ b/src/assets/json/authMenu.json
@ -86,9 +86,25 @@
      "isFull": "1",
      "isAffix": "1",
      "redirect": ""
+    },{
+      "menuId": 15,
+      "menuName": "修改新闻",
+      "enName": "User Manage",
+      "parentId": 1,
+      "menuType": "2",
+      "path": "/paper/article/update/:id",
+      "name": "userPageArticleUpdate",
+      "component": "paper/article/update",
+      "icon": "Notebook",
+      "isHide": "0",
+      "isLink": "",
+      "isKeepAlive": "1",
+      "isFull": "1",
+      "isAffix": "1",
+      "redirect": ""
    },
    {
-      "menuId": 15,
+      "menuId": 16,
      "menuName": "期刊类型",
      "enName": "User Manage",
      "parentId": 1,
@ -112,7 +128,7 @@
      "menuType": "1",
      "path": "/knowledge",
      "name": "Knowledge",
-      "component": "knowledge/list/index",
+      "component": "",
      "icon": "Files",
      "isHide": "1",
      "isLink": "",
@ -120,6 +136,40 @@
      "isFull": "1",
      "isAffix": "1",
      "redirect": ""
+    },
+    {
+      "menuId": 21,
+      "menuName": "添加关键字",
+      "enName": "User Manage",
+      "parentId":2,
+      "menuType": "2",
+      "path": "/knowledge/add",
+      "name": "KnowledgeAdd",
+      "component": "knowledge/add",
+      "icon": "CirclePlus",
+      "isHide": "1",
+      "isLink": "",
+      "isKeepAlive": "0",
+      "isFull": "1",
+      "isAffix": "1",
+      "redirect": ""
+    },
+    {
+      "menuId": 22,
+      "menuName": "关键字列表",
+      "enName": "User Manage",
+      "parentId":2,
+      "menuType": "2",
+      "path": "/knowledge/list",
+      "name": "KnowledgeList",
+      "component": "knowledge/list",
+      "icon": "ScaleToOriginal",
+      "isHide": "1",
+      "isLink": "",
+      "isKeepAlive": "0",
+      "isFull": "1",
+      "isAffix": "1",
+      "redirect": ""
    }
  ]
 }
--- a/src/config/index.ts
+++ b/src/config/index.ts
@ -1,12 +1,12 @@
 // 全局默认配置项
 // 首页地址[默认]
-export const HOME_URL: string = "/home/index";
+export const HOME_URL: string = "/dist/home/index";

 // 跳转子页面静态路由父级节点
 export const STATIC_URL: string = "/system/static";

 // 登录页地址[默认]
-export const LOGIN_URL: string = "/login";
+export const LOGIN_URL: string = "/dist/login";

 // pinia仓库前缀
 export const PINIA_PREFIX: string = "koi-";
--- a/src/layouts/components/Header/components/Toolbar.vue
+++ b/src/layouts/components/Header/components/Toolbar.vue
@ -1,7 +1,7 @@
 <template>
  <div class="header-right">
    <!-- 搜索菜单 -->
-    <SearchMenu class="<md:visible"></SearchMenu>
+<!--    <SearchMenu class="<md:visible"></SearchMenu>-->
    <!-- ElementPlus 尺寸配置 -->
    <Dimension class="<md:visible"></Dimension>
    <!-- 路由缓存刷新 -->
--- a/src/layouts/components/Header/components/User.vue
+++ b/src/layouts/components/Header/components/User.vue
@ -1,18 +1,18 @@
 <template>
  <!-- 头像 -->
-  <el-image class="w-34px h-34px rounded-full select-none user-avatar" :src="avatar">
+  <el-image class="w-34px h-34px rounded-full select-none user-avatar">
    <template #error>
-      <el-image class="w-34px h-34px rounded-full select-none user-avatar" :src="errorAvatar"></el-image>
+      <el-avatar :size="34" icon="User" />
    </template>
  </el-image>
  <el-dropdown class="m-l-10px" :hide-on-click="false" @command="handleCommand">
    <div class="koi-dropdown">
-      <div class="max-w-113px text-14px m-r-6px line-clamp-1 select-none">王将(管理员)</div>
+      <div class="max-w-113px text-14px m-r-6px line-clamp-1 select-none">{{userInfo.userName}}</div>
      <el-icon><arrow-down /></el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
-        <el-dropdown-item command="koiMine">{{ $t("header.personalCenter") }}</el-dropdown-item>
+<!--        <el-dropdown-item command="koiMine">{{ $t("header.personalCenter") }}</el-dropdown-item>-->
        <el-dropdown-item command="logout">{{ $t("header.logout") }}</el-dropdown-item>
      </el-dropdown-menu>
    </template>
@ -20,13 +20,16 @@
 </template>

 <script setup lang="ts">
-import { ref } from "vue";
+import {onMounted, reactive, ref} from "vue";
 import { koiSessionStorage, koiLocalStorage } from "@/utils/storage.ts";
 import { LOGIN_URL } from "@/config";
 import { useRouter } from "vue-router";

 const router = useRouter();
-
+const userInfo = reactive({
+  userName: "",
+  token: "",
+});
 // 退出登录
 const handleLayout = () => {
  koiSessionStorage.clear();
@ -38,6 +41,10 @@ const handleLayout = () => {
  // 退出登录。必须使用replace把页面缓存刷掉。
  window.location.replace(LOGIN_URL);
 };
+onMounted(() => {
+  const user = koiLocalStorage.getJSON("user");
+  userInfo.userName = user.userName;
+});
 // 用户头像
 const avatar = ref(
  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fae90b4c7-98b6-4a47-b1b3-9ee8bc71acf6%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692146441&t=6fca60f3a0d323869b81d8fb53b5dd1b"
--- a/src/stores/modules/user.ts
+++ b/src/stores/modules/user.ts
@ -17,7 +17,8 @@ const userStore = defineStore("user", {
  // 存储数据state
  state: (): any => {
    return {
-      token: ""
+      token: "",
+      userName: "",
    };
  },
  // 该函数没有上下文数据，所以获取state中的变量需要使用this
@ -25,6 +26,9 @@ const userStore = defineStore("user", {
    // Set Token
    setToken(token: string) {
      this.token = token;
+    },
+    setUserInfo(user: string) {
+      this.userName = user;
    }
  },
  // 计算属性，和vuex是使用一样，getters里面不是方法，是计算返回的结果值
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@ -43,7 +43,7 @@ class Yu {
        const token = getToken();
        // 如果实现挤下线功能，需要用户绑定一个uuid，uuid发生变化，后端将数据进行处理[直接使用Sa-Token框架也阔以]
        if (token) {
-          config.headers!["Authorization"] = "Bearer " + token;
+          config.headers!["token"] = token;
        }
        return config;
      },
@ -64,17 +64,17 @@ class Yu {
          // 这里的后端可能是code OR status 和 msg OR message需要看后端传递的是什么？
          // console.log("200状态", status);
          return res.data;
-        } else if (status == 401) {
+        } else if (status == 99) {
          // console.log("401状态", status);
          const userStore = useUserStore();
          userStore.setToken(""); // 清空token必须使用这个，不能使用session清空，因为登录的时候js会获取一遍token还会存在。
-          koiMsgError("登录身份过期，请重新登录🌻");
+          koiMsgError("登录身份过期，请重新登录!");
          router.replace(LOGIN_URL);
          return Promise.reject(res.data);
        } else {
          // console.log("后端返回数据：",res.data.msg)
-          koiMsgError(res.data.msg + "🌻" || "服务器偷偷跑到火星去玩了🌻");
-          return Promise.reject(res.data.msg + "🌻" || "服务器偷偷跑到火星去玩了🌻"); // 可以将异常信息延续到页面中处理，使用try{}catch(error){};
+          koiMsgError(res.data.msg  || "系统错误-1");
+          return Promise.reject(res.data.msg || "系统错误-1"); // 可以将异常信息延续到页面中处理，使用try{}catch(error){};
        }
      },
      (error: any) => {
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@ -89,7 +89,7 @@ export const koiLocalStorage = {
    window.localStorage.put(PINIA_PREFIX + key, JSON.stringify(jsonValue));
  },
  getJSON(key: string) {
-    const jsonValue: any = window.localStorage.get(PINIA_PREFIX + key);
+    const jsonValue: any = window.localStorage.getItem(PINIA_PREFIX + key);
    return JSON.parse(jsonValue);
  }
 };
--- a/src/views/knowledge/add.vue
+++ b/src/views/knowledge/add.vue
@ -0,0 +1,119 @@
+<template>
+  <div class="koi-flex">
+    <KoiCard>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form ref="formRef" :model="form" label-width="80px" status-icon>
+            <el-form-item label="关键字" prop="roleName">
+              <el-input v-model="form.zsk_name" size="large" placeholder="请输入类型名称" clearable/>
+            </el-form-item>
+            <el-form-item label="解释" prop="roleName">
+              <el-card shadow="hover">
+                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"/>
+                <Editor style="height: 300px; overflow-y: hidden;" v-model="form.zsk_explain" :defaultConfig="editorConfig"
+                        @onCreated="handleCreated"/>
+              </el-card>
+            </el-form-item>
+            <el-form-item label=" ">
+              <el-button type="primary" @click="onSubmit" size="large">保存</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+
+    </KoiCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
+import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
+import {
+  koiMsgSuccess,
+  koiNoticeSuccess,
+  koiNoticeError,
+  koiMsgError,
+  koiMsgWarning,
+  koiMsgBox,
+  koiMsgInfo
+} from "@/utils/koi.ts";
+// @ts-ignore
+import {knowledgeAdd} from "@/api/system/post/index.ts";
+import {onBeforeUnmount, ref, shallowRef, onMounted, reactive, nextTick} from 'vue'
+
+const form = reactive({
+  zsk_explain: '',
+  zsk_name: '',
+});
+const onSubmit = async () => {
+  if (form.zsk_name == '') {
+    koiNoticeError("请输入关键字！");
+    return;
+  }
+  if (form.zsk_explain == '') {
+    koiNoticeError("请输入关键字解释！");
+    return;
+  }
+  try {
+    await knowledgeAdd(form);
+    koiNoticeSuccess("添加成功！");
+  } catch (error) {
+    console.log(error);
+    koiNoticeError("添加失败，请刷新重试！");
+  }
+}
+
+const toolbarConfig = {
+  showLinkImg: false,
+  uploadImgShowBase64: true,
+  excludeKeys: [
+    'insertVideo', // 删除视频
+    'uploadVideo',
+    'group-video',
+    'insertImage',// 删除网络图片上传
+    'insertLink',// 删除链接
+    'insertTable',// 删除表格
+    'codeBlock',// 删除代码块
+  ]
+}
+const editorConfig = {
+  placeholder: '',
+  readOnly: false, // 是否只允许阅读，不可编辑
+  autoFocus: true,
+  MENU_CONF: {
+    uploadImage: {
+      maxFileSize: 1 * 1024 * 1024,
+      server: import.meta.env.VITE_WEB_BASE_API + '/api/common/upload',
+      fieldName: 'file',
+      meta: {
+        association_id: 0,
+      },
+      customInsert(res, insertFn) {  // TS 语法
+        // customInsert(res, insertFn) {                  // JS 语法
+        // res 即服务端的返回结果
+        console.log(res);
+        // 从 res 中找到 url alt href ，然后插入图片
+        insertFn(res.data.fullurl, '', '')
+      }, onError:(file, err, res)=>{
+        if(err.message.indexOf('exceeds maximum allowed size') !== -1){
+          koiNoticeError('图片限制为1M，请调整好再上传！');
+        }
+      },
+    }
+  }
+}
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+const handleCreated = (editor) => {
+  editorRef.value = editor // 记录 editor 实例，重要！
+}
+
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/views/knowledge/list.vue
+++ b/src/views/knowledge/list.vue
@ -0,0 +1,269 @@
+<template>
+  <div class="koi-flex">
+    <KoiCard>
+      <!-- 表格头部按钮 -->
+      <el-row :gutter="10">
+        <el-col :span="1.5" v-auth="['system:role:add']">
+          <el-button type="primary" icon="plus" plain @click="handleAdd()">新增</el-button>
+        </el-col>
+        <KoiToolbar v-model:showSearch="showSearch" @refreshTable="handleListPage"></KoiToolbar>
+      </el-row>
+
+      <div class="h-20px"></div>
+      <!-- 数据表格 -->
+      <el-table
+        v-loading="loading"
+        border
+        :data="tableList"
+        empty-text="暂时没有数据哟"
+      >
+        <el-table-column label="ID" prop="id" width="80px" align="center" type="index"></el-table-column>
+        <el-table-column
+          label="关键字"
+          prop="zsk_name"
+          width="180px"
+          align="center"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          label="解释"
+          prop="zsk_explain"
+          width="300px"
+          align="center"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column label="操作" align="center" width="120" fixed="right">
+          <template #default="{ row }">
+            <el-tooltip content="修改" placement="top">
+              <el-button
+                type="primary"
+                icon="Edit"
+                circle
+                plain
+                @click="handleUpdate(row)"
+                v-auth="['system:role:update']"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button
+                type="danger"
+                icon="Delete"
+                circle
+                plain
+                @click="handleDelete(row)"
+                v-auth="['system:role:delete']"
+              ></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="h-20px"></div>
+      <!-- {{ searchParams.pageNo }} --- {{ searchParams.pageSize }} -->
+      <!-- 分页 -->
+      <el-pagination
+        background
+        v-model:current-page="searchParams.pageNo"
+        v-model:page-size="searchParams.pageSize"
+        :page-sizes="[10, 20, 50, 100, 200]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleListPage"
+        @current-change="handleListPage"
+      />
+
+      <!-- 添加 OR 修改 -->
+      <KoiDialog ref="koiDrawerRef" :width="800" :height="500" :title="title" @koiConfirm="handleConfirm"
+                 @koiCancel="handleCancel" :loading="confirmLoading">
+        <template #content>
+          <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" status-icon>
+            <el-row>
+              <el-col :sm="{ span: 20 }" :xs="{ span: 24 }">
+                <el-form-item label="关键字" prop="roleName">
+                  <el-input v-model="form.zsk_name" placeholder="请输入关键字" clearable/>
+                </el-form-item>
+                <el-form-item label="解释" prop="roleName">
+                  <el-card shadow="hover">
+                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"/>
+                    <Editor style="height: 250px; overflow-y: hidden;" v-model="form.zsk_explain" :defaultConfig="editorConfig"
+                            @onCreated="handleCreated"/>
+                  </el-card>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </template>
+      </KoiDialog>
+    </KoiCard>
+  </div>
+</template>
+
+<script setup lang="ts" name="postPage">
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
+import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
+
+import {nextTick, ref, reactive, onMounted, onBeforeUnmount, shallowRef} from "vue";
+import {
+  koiMsgSuccess,
+  koiNoticeSuccess,
+  koiNoticeError,
+  koiMsgError,
+  koiMsgWarning,
+  koiMsgBox,
+  koiMsgInfo
+} from "@/utils/koi.ts";
+// @ts-ignore
+import {getList, add, update, del, knowledge, knowledgeUpdate, knowledgeDel} from "@/api/system/post/index.ts";
+import {useRouter} from "vue-router";
+
+const router = useRouter();
+// 表格加载动画Loading
+const loading = ref(false);
+// 是否显示搜索表单[默认显示]
+const showSearch = ref<boolean>(true); // 默认显示搜索条件
+// 表格数据
+const tableList = ref<any>();
+const total = ref(0);
+// 查询参数
+const searchParams = reactive({
+  pageNo: 1, // 第几页
+  pageSize: 10, // 每页显示多少条
+});
+/** @current-change：点击分页组件页码发生变化：例如：切换第2、3页 OR 上一页 AND 下一页 OR 跳转某一页 */
+/** @size-change：点击分页组件下拉选中条数发生变化：例如：选择10条/页、20条/页等 */
+// 分页查询，@current-change AND @size-change都会触发分页，调用后端分页接口
+/** 数据表格 */
+const handleListPage = async () => {
+  try {
+    loading.value = true;
+    tableList.value = []; // 重置表格数据
+    const res: any = await knowledge(searchParams);
+    tableList.value = res.data;
+    total.value = res.data.length;
+    loading.value = false;
+  } catch (error) {
+    console.log(error);
+    koiNoticeError("数据查询失败，请刷新重试!");
+  }
+};
+onMounted(() => {
+  // 获取表格数据
+  handleListPage();
+});
+
+/** 添加 */
+const handleAdd = () => {
+  // 打开抽屉
+  router.push("/knowledge/add");
+};
+const postId = ref(0);
+/** 修改 */
+const handleUpdate = (row) => {
+  console.log(row);
+  // 打开抽屉
+  koiDrawerRef.value.koiOpen();
+  // 重置表单
+  // 标题
+  title.value = "关键字修改";
+  postId.value = row.id;
+  form.zsk_name = row.zsk_name;
+  form.zsk_explain = row.zsk_explain;
+  //console.log(postId);
+  // 回显数据
+  //handleEcho(postId);
+};
+
+// 添加 OR 修改抽屉Ref
+const koiDrawerRef = ref();
+// 标题
+const title = ref("岗位类型管理");
+// form表单Ref
+const formRef = ref<any>();
+
+// form表单
+const form = reactive({
+  zsk_name: "",
+  zsk_explain: ""
+});
+
+/** 表单规则 */
+const rules = reactive({
+  postName: [{required: true, message: "请输入岗位名字", trigger: "blur"}],
+  postCode: [{required: true, message: "请输入岗位编码", trigger: "blur"}],
+  postStatus: [{required: true, message: "请输入选择岗位状态", trigger: "blur"}]
+});
+
+// 确定按钮是否显示Loading
+const confirmLoading = ref(false);
+
+/** 确定  */
+const handleConfirm = () => {
+  if (!formRef.value) return;
+  confirmLoading.value = true;
+  (formRef.value as any).validate(async (valid: any) => {
+    if (valid) {
+      console.log("表单ID", postId.value);
+      try {
+        form.id = postId.value;
+        await knowledgeUpdate(form);
+        koiNoticeSuccess("修改成功!");
+        confirmLoading.value = false;
+        koiDrawerRef.value.koiQuickClose();
+        handleListPage();
+      } catch (error) {
+        console.log(error);
+        confirmLoading.value = false;
+        koiNoticeError("修改失败，请刷新重试!");
+      }
+    } else {
+      koiMsgError("验证失败，请检查填写内容🌻");
+      confirmLoading.value = false;
+    }
+  });
+};
+
+/** 取消 */
+const handleCancel = () => {
+  koiDrawerRef.value.koiClose();
+};
+
+/** 删除 */
+const handleDelete = (row: any) => {
+  const id = row.id;
+  if (id == null || id == "") {
+    koiMsgWarning("请选中需要删除的数据!");
+    return;
+  }
+  koiMsgBox("您确认需要删除[" + row.zsk_name + "]么？")
+    .then(async () => {
+      try {
+        await knowledgeDel({id: id});
+        handleListPage();
+        koiNoticeSuccess("删除成功🌻");
+      } catch (error) {
+        console.log(error);
+        handleListPage();
+        koiNoticeError("删除失败，请刷新重试🌻");
+      }
+    })
+    .catch(() => {
+      koiMsgError("已取消🌻");
+    });
+};
+const toolbarConfig = {}
+const editorConfig = {placeholder: '请输入内容...'}
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+const handleCreated = (editor) => {
+  editorRef.value = editor // 记录 editor 实例，重要！
+}
+
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -16,7 +16,7 @@
        <!-- 备案号-->
        <div class="beianhao select-none <md:hidden">
          <a class="chroma-text" href="https://beian.miit.gov.cn/" target="_blank"
-            >{{ $t("login.beianhao") }}：豫ICP备123456789号-123</a
+            >{{ $t("login.beianhao") }}：豫ICP备123456789号-PC</a
          >
        </div>
      </el-col>
@ -44,21 +44,22 @@
              v-model="loginForm.password"
            />
          </el-form-item>
-          <el-form-item prop="securityCode">
-            <el-input
-              type="text"
-              :placeholder="$t('login.security')"
-              :suffix-icon="Open"
-              v-model="loginForm.securityCode"
-              @keydown.enter="handleKoiLogin"
-            ></el-input>
-          </el-form-item>
+<!--          <el-form-item prop="securityCode">-->
+<!--            <el-input-->
+<!--              type="text"-->
+<!--              :placeholder="$t('login.security')"-->
+<!--              :suffix-icon="Open"-->
+<!--              v-model="loginForm.securityCode"-->
+<!--              @keydown.enter="handleKoiLogin"-->
+<!--            ></el-input>-->
+<!--          </el-form-item>-->
          <el-form-item>
-            <el-image class="w-100px h-30px" :src="loginForm.captchaPicture" @click="handleCaptcha" />
-            <el-button text size="small" class="ml-6px" @click="handleCaptcha">
-              <div class="text-gray-400 hover:text-#8B5CF6 select-none">{{ $t("login.blur") }}</div>
-            </el-button>
+<!--            <el-image class="w-100px h-30px" :src="loginForm.captchaPicture" @click="handleCaptcha" />-->
+<!--            <el-button text size="small" class="ml-6px" @click="handleCaptcha">-->
+<!--              <div class="text-gray-400 hover:text-#8B5CF6 select-none">{{ $t("login.blur") }}</div>-->
+<!--            </el-button>-->
          </el-form-item>
+
          <!-- 登录按钮 -->
          <el-form-item>
            <el-button
@ -66,7 +67,7 @@
              v-if="!loading"
              class="w-245px bg-[--el-color-primary]"
              round
-              v-throttle:3000="handleKoiLogin"
+              v-throttle:3000="onShowLogin"
              >{{ $t("login.in") }}</el-button
            >
            <el-button type="primary" v-else class="w-245px bg-[--el-color-primary]" round :loading="loading">{{
@ -82,12 +83,13 @@
        </div>
      </el-col>
    </el-row>
-
+    <Vcode :show="isShow" @success="onSuccess"/>
 <!--    <KoiLoading></KoiLoading>-->
  </div>
 </template>

 <script lang="ts" setup>
+import Vcode from 'vue3-puzzle-vcode'
 import { User, Lock, Open } from "@element-plus/icons-vue";
 // @ts-ignore
 import { ref, reactive, onMounted, onUnmounted, computed } from "vue";
@ -95,7 +97,7 @@ import { ref, reactive, onMounted, onUnmounted, computed } from "vue";
 import type { FormInstance, FormRules } from "element-plus";
 import { koiMsgWarning, koiMsgError } from "@/utils/koi.ts";
 import { useRouter } from "vue-router";
-// import { koiLogin, getCaptcha } from "@/api/system/login/index.ts";
+import { Login } from "@/api/system/post/index.ts";
 import authLogin from "@/assets/json/authLogin.json";
 import useUserStore from "@/stores/modules/user.ts";
 import useKeepAliveStore from "@/stores/modules/keepAlive.ts";
@ -109,7 +111,7 @@ import KoiDark from "./components/KoiDark.vue";
 import KoiLanguage from "./components/KoiLanguage.vue";
 import { getLanguage } from "@/utils/index.ts";
 import useGlobalStore from "@/stores/modules/global.ts";
-
+const isShow = ref(false);
 // 标题语言切换
 const loginTitle = ref(settings.loginTitle);
 loginTitle.value = computed(() => {
@ -137,11 +139,8 @@ interface ILoginUser {
 }

 const loginForm = reactive<ILoginUser>({
-  loginName: "yuadmin",
-  password: "123456",
-  securityCode: "1234",
-  codeKey: "",
-  captchaPicture: ""
+  loginName: "admin",
+  password: "admin888",
 });

 let loginRules: any = reactive<FormRules<ILoginUser>>({});
@ -161,60 +160,33 @@ loginRules = computed(() => {
  }
 });

-/** 获取验证码 */
-// const handleCaptcha = async () => {
-//   try {
-//     const res: any = await getCaptcha();
-//     loginForm.codeKey = res.data.codeKey;
-//     loginForm.captchaPicture = res.data.captchaPicture;
-//   } catch (error) {
-//     console.log(error);
-//     koiMsgError("验证码获取失败🌻");
-//   }
-// };
-
-// const koiTimer = ref();
-// // 验证码定时器
-// const getCaptchaTimer = () => {
-//   koiTimer.value = setInterval(() => {
-//     // 执行刷新数据的方法
-//     handleCaptcha();
-//   }, 345 * 1000);
-// };
-
 // 进入页面加载管理员信息
 onMounted(() => {
-  // 获取验证码
-  //handleCaptcha();
-  // 局部刷新定时器
-  // getCaptchaTimer();
+
 });
-
-// onUnmounted(() => {
-//   // 清除局部刷新定时器
-//   clearInterval(koiTimer.value);
-//   koiTimer.value = null;
-// });
-
+const onSuccess = () => {
+  isShow.value = false;
+  handleKoiLogin();
+};
+const onShowLogin = () => {
+  isShow.value = true;
+}
 /** 登录 */
 const handleKoiLogin = () => {
  if (!loginFormRef.value) return;
  (loginFormRef.value as any).validate(async (valid: any, fields: any) => {
    // @ts-ignore
-    const loginName = loginForm.loginName;
+    const username = loginForm.loginName;
    // @ts-ignore
    const password = loginForm.password;
-    // @ts-ignore
-    const securityCode = loginForm.securityCode;
-    // @ts-ignore
-    const codeKey = loginForm.codeKey;
    if (valid) {
      loading.value = true;
      try {
        // 1、执行登录接口
-        // const res: any = await koiLogin({ loginName, password, codeKey, securityCode });
-        // userStore.setToken(res.data.tokenValue);
-        userStore.setToken(authLogin.data.tokenValue);
+         const res: any = await Login({ username, password});
+         userStore.setToken(res.data.token);
+         userStore.setUserInfo(res.data.user.username);
+        //userStore.setToken(authLogin.data.tokenValue);
        // 2、添加动态路由 AND 用户按钮 AND 角色信息 AND 用户个人信息
        if (userStore?.token) {
          await initDynamicRouter();
--- a/src/views/paper/add/index.vue
+++ b/src/views/paper/add/index.vue
@ -32,12 +32,12 @@
                <div>{{ item.bm_name ? item.bm_name : '版面' }}</div>
                <div>
                  <el-space wrap :size="30">
-                    <el-icon class="cursor-pointer" @click="left_right('l',index)">
-                      <ArrowLeftBold/>
-                    </el-icon>
-                    <el-icon class="cursor-pointer" @click="left_right('r',index)">
-                      <ArrowRightBold/>
-                    </el-icon>
+                    <!--                    <el-icon class="cursor-pointer" @click="left_right('l',index)">-->
+                    <!--                      <ArrowLeftBold/>-->
+                    <!--                    </el-icon>-->
+                    <!--                    <el-icon class="cursor-pointer" @click="left_right('r',index)">-->
+                    <!--                      <ArrowRightBold/>-->
+                    <!--                    </el-icon>-->
                    <el-icon class="cursor-pointer" @click="del(index)">
                      <DeleteFilled/>
                    </el-icon>
@ -49,13 +49,18 @@
              <el-form-item label="版面名称">
                <el-input v-model="item.bm_name" placeholder="输入版面名称"/>
              </el-form-item>
+              <el-form-item label="版面排序">
+                <el-input @blur="addSort" type="number" v-model="item.weight" placeholder="输入版面排序"/>
+              </el-form-item>
              <el-form-item label="版面PDF">
-                <KoiUploadFiles :fileList="item.pdf" acceptType=".pdf" @update:fileList="(file) => updateFileList(file, index)" @fileSuccess="(file) => getFileList(file, index)">
+                <KoiUploadFiles :fileList="item.pdf" acceptType=".pdf" @update:fileList="(file) => updateFileList(file, index)"
+                                @fileSuccess="(file) => getFileList(file, index)">
                  <template #tip>PDF最大为 10M</template>
                </KoiUploadFiles>
              </el-form-item>
              <el-form-item label="版面图片" prop="avatar">
-                <KoiUploadImage :imageUrl="item.bm_img" @update:imageUrl="(file) => getImgList(file, index)" width="150px" height="150px">
+                <KoiUploadImage :imageUrl="item.bm_img" @update:imageUrl="(file) => getImgList(file, index)" width="150px"
+                                height="150px">
                  <template #content>
                    <el-icon>
                      <Picture/>
@ -88,7 +93,8 @@ import {
  koiMsgInfo
 } from "@/utils/koi.ts";
 import useTabsStore from "@/stores/modules/tabs.ts";
-import { useRoute, useRouter } from "vue-router";
+import {useRoute, useRouter} from "vue-router";
+
 const route = useRoute();
 const router = useRouter();
 const tabsStore = useTabsStore();
@ -100,7 +106,7 @@ const getFileList = (d, index) => {
 const updateFileList = (d, index) => {
  console.log(d);
  console.log(index);
-  backArr.value[index].bm_pdf = d.fullurl?d.fullurl:'';
+  backArr.value[index].bm_pdf = d.fullurl ? d.fullurl : '';
 }
 const getImgList = (d, index) => {
  console.log(d);
@ -109,14 +115,22 @@ const getImgList = (d, index) => {
 }

 const backArr = ref([
-  {bm_name: '', bm_img: '', bm_pdf:'',pdf: []}
+  {bm_name: '', bm_img: '', bm_pdf: '', weight: 0, pdf: []}
 ]);
 const form = reactive({
  datetime: "",
  type_id: ""
 });
 const addBlack = () => {
-  backArr.value.push({bm_name: '', bm_img: '',bm_pdf:'', pdf: []});
+  // 找到当前 backArr 数组中最大的 weight 值
+  const maxWeight = Math.max(...backArr.value.map(item => item.weight), 0);
+
+  // 添加新的版面，weight 设置为 maxWeight + 1
+  backArr.value.push({bm_name: '', bm_img: '', bm_pdf: '', weight: maxWeight + 1, pdf: []});
+}
+const addSort = () => {
+  //根据数组中的weight排序数组
+  backArr.value.sort((a, b) => a.weight - b.weight);
 }
 onMounted(() => {
  getTypelist();
@ -146,7 +160,7 @@ const handleMineSave = async () => {
      return;
    }
  }
-  const data = { date: form, bm: backArr.value };
+  const data = {date: form, bm: backArr.value};
  try {
    await bmAdd(data);
    koiNoticeSuccess("保存成功!");
--- a/src/views/paper/article/index.vue
+++ b/src/views/paper/article/index.vue
@ -68,6 +68,7 @@ const form = reactive({
  subtitle: '',
  reporter: '',
  content: '',
+  coordinate_show:'',
 });
 /*新闻坐标*/
 const coordinate = ref();
@ -93,8 +94,27 @@ const getBmInfo = async () => {
 /*文章保存*/
 const onSubmit = async () => {
  form.coordinate = coordinate.value;
+
  form.bm_id = id.value;
  console.log(form);
+
+  if(form.new_name==''){
+    koiNoticeError("新闻标题不能为空！");
+    return;
+  }
+  if(form.reporter==''){
+    koiNoticeError("新闻记者不能为空！");
+    return;
+  }
+  if(form.coordinate=='' || typeof (form.coordinate)=='undefined'){
+    koiNoticeError("新闻坐标不能为空！");
+    return;
+  }
+  if(form.content==''){
+    koiNoticeError("新闻内容不能为空！");
+    return;
+  }
+  form.coordinate_show=`${rectCoordinates.value.x1},${rectCoordinates.value.y1},${rectCoordinates.value.x2},${rectCoordinates.value.y2}`;
  try {
    const res: any = await newsAdd(form);
    console.log("菜单数据表格数据->", res.data);
@ -107,8 +127,45 @@ const onSubmit = async () => {
    koiNoticeError("数据添加失败，请刷新重试🌻");
  }
 }
-const toolbarConfig = {}
-const editorConfig = {placeholder: '请输入内容...'}
+const toolbarConfig = {
+  showLinkImg: false,
+  uploadImgShowBase64: true,
+  excludeKeys: [
+    'insertVideo', // 删除视频
+    'uploadVideo',
+    'group-video',
+    'insertImage',// 删除网络图片上传
+    'insertLink',// 删除链接
+    'insertTable',// 删除表格
+    'codeBlock',// 删除代码块
+  ]
+}
+const editorConfig = {
+  placeholder: '',
+  readOnly: false, // 是否只允许阅读，不可编辑
+  autoFocus: true,
+  MENU_CONF: {
+    uploadImage: {
+      maxFileSize: 1 * 1024 * 1024,
+      server: import.meta.env.VITE_WEB_BASE_API + '/api/common/upload',
+      fieldName: 'file',
+      meta: {
+        association_id: 0,
+      },
+      customInsert(res, insertFn) {  // TS 语法
+        // customInsert(res, insertFn) {                  // JS 语法
+        // res 即服务端的返回结果
+        console.log(res);
+        // 从 res 中找到 url alt href ，然后插入图片
+        insertFn(res.data.fullurl, '', '')
+      }, onError:(file, err, res)=>{
+        if(err.message.indexOf('exceeds maximum allowed size') !== -1){
+          koiNoticeError('图片限制为1M，请调整好再上传！');
+        }
+      },
+    }
+  }
+}
 // 组件销毁时，也及时销毁编辑器
 onBeforeUnmount(() => {
  const editor = editorRef.value
--- a/src/views/paper/article/update.vue
+++ b/src/views/paper/article/update.vue
@ -0,0 +1,431 @@
+<template>
+  <div class="koi-flex" v-if="bmInfo">
+    <KoiCard>
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <div style="padding: 0px 20px 20px 0px;font-weight: 600">请在图片边框内选定区域</div>
+          <el-card :body-style="{padding:'0'}" style="padding: 0;position:relative;">
+            <div @mousedown="startDrag" @mousemove="onDrag" @mouseup="endDrag" @mouseleave="endDrag" style="width: 100%">
+              <!-- 图片 -->
+              <img draggable="false" id="image-selector" :src="bmInfoData.bm_img" ref="image" alt="image"
+                   @click="handleClick"
+                   style="cursor: crosshair; position: relative; user-select: none; width: 100%; height: auto;"
+                   @load="onImageLoad"/>
+              <!-- 画布用于绘制矩形路径 -->
+              <canvas id="myCanvas" ref="canvas" :width="imageWidth" :height="imageHeight"
+                      style="position: absolute; top: 0; left: 0; pointer-events: none;">
+              </canvas>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="16">
+          <el-form :model="form" label-width="auto">
+            <el-form-item label="新闻标题">
+              <el-input v-model="form.new_name" size="large"/>
+            </el-form-item>
+            <el-form-item label="新闻副标题">
+              <el-input v-model="form.subtitle" size="large"/>
+            </el-form-item>
+            <el-form-item label="新闻记者">
+              <el-input v-model="form.reporter" size="large"/>
+            </el-form-item>
+            <el-form-item label="新闻坐标">
+              <el-input disabled v-model="coordinate" size="large"/>
+              <el-button class="mt-2" @click="allowClickTrue()">重新选择</el-button>
+            </el-form-item>
+            <el-form-item label="新闻详情">
+              <el-card shadow="hover">
+                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"/>
+                <Editor style="height: 300px; overflow-y: hidden;" v-model="form.content" :defaultConfig="editorConfig"
+                        @onCreated="handleCreated"/>
+              </el-card>
+            </el-form-item>
+            <el-form-item label=" ">
+              <el-button type="primary" @click="onSubmit" size="large">保存新闻</el-button>
+            </el-form-item>
+          </el-form>
+
+        </el-col>
+      </el-row>
+    </KoiCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
+import {getAssets} from "@/utils/index.ts";
+import {onBeforeUnmount, ref, shallowRef, onMounted, reactive, nextTick} from 'vue'
+import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
+import {bmInfo, newsAdd, newsInfo, newsUpdate} from "@/api/system/post";
+import {koiNoticeError, koiNoticeSuccess} from "@/utils/koi.ts";
+import {useRoute, useRouter} from 'vue-router';
+import useTabsStore from "@/stores/modules/tabs.ts"; // 导入 useRoute
+const router = useRouter();
+const tabsStore = useTabsStore();
+const form = reactive({
+  new_name: '',
+  coordinate: '',
+  coordinate_show:'',
+  subtitle: '',
+  reporter: '',
+  content: '',
+});
+/*新闻坐标  真实的*/
+const coordinate = ref();
+/*新闻坐标  展示的*/
+const coordinateShow = ref();
+/*版面详情*/
+const bmInfoData = ref({});
+const route = useRoute(); // 创建 route 对象
+const id = ref();
+onMounted(() => {
+
+  id.value = route.params.id;
+  getNewsInfo();
+})
+const getNewsInfo = async () => {
+  try {
+    const res: any = await newsInfo({id: id.value});
+    console.log("菜单数据表格数据->", res.data);
+    form.new_name = res.data.new_name;
+    form.subtitle = res.data.subtitle;
+    form.reporter = res.data.reporter;
+    form.content = res.data.content;
+    form.id = res.data.id;
+    form.coordinate = res.data.coordinate;
+    form.coordinate_show=res.data.coordinate_show;
+    coordinate.value = res.data.coordinate;
+    coordinateShow.value = res.data.coordinate_show;
+    await getBmInfo(res.data.bm_id);
+
+    //bmInfoData.value = res.data;
+    // koiNoticeSuccess("修改成功!");
+  } catch (error) {
+    console.log(error);
+    koiNoticeError("数据查询失败，请刷新重试🌻");
+  }
+}
+const getBmInfo = async (bm_id) => {
+  try {
+    const res: any = await bmInfo({id: bm_id});
+    console.log("菜单数据表格数据->", res.data);
+    bmInfoData.value = res.data;
+    var coordArray = coordinateShow.value.split(",");
+    var sArray = coordinate.value.split(",");
+    var xx1 = parseInt(sArray[0]);
+    var yy1 = parseInt(sArray[1]);
+    var xx2 = parseInt(sArray[2]);
+    var yy2 = parseInt(sArray[3]);
+    s.value = {xx1, yy1, xx2, yy2};
+    var x1 = parseInt(coordArray[0]);
+    var y1 = parseInt(coordArray[1]);
+    var x2 = parseInt(coordArray[2]);
+    var y2 = parseInt(coordArray[3]);
+    updateDrawRectanglePath(x1, y1, x2, y2);
+    // koiNoticeSuccess("修改成功!");
+  } catch (error) {
+    console.log(error);
+    koiNoticeError("数据查询失败，请刷新重试");
+  }
+}
+const updateDrawRectanglePath = (x1, y1, x2, y2) => {
+  rectCoordinates.value = {x1, y1, x2, y2};
+  // 显示矩形（用于视觉反馈）
+  rect.value = {
+    left: `${x1}px`,
+    top: `${y1}px`,
+    width: `${x2 - x1}px`,
+    height: `${y2 - y1}px`,
+  };
+
+  // 使用 nextTick 确保 DOM 更新完成后再访问 canvas
+  nextTick(() => {
+    setTimeout(() => {
+      drawRectanglePath(x1, y1, x2, y2);
+    }, 500);
+  });
+
+  // 清空点，准备下一次点击
+  points.value = [];
+}
+/*文章保存*/
+const onSubmit = async () => {
+  form.coordinate = coordinate.value;
+  form.coordinate_show=coordinateShow.value ;
+  form.bm_id = id.value;
+  console.log(form);
+  try {
+    const res: any = await newsUpdate(form);
+    console.log("菜单数据表格数据->", res.data);
+    bmInfoData.value = res.data;
+    koiNoticeSuccess("修改成功!");
+    tabsStore.removeTab(route.fullPath);
+    router.push('/paper/list');
+  } catch (error) {
+    console.log(error);
+    koiNoticeError("数据添加失败，请刷新重试🌻");
+  }
+}
+const toolbarConfig = {
+  showLinkImg: false,
+  uploadImgShowBase64: true,
+  excludeKeys: [
+    'insertVideo', // 删除视频
+    'uploadVideo',
+    'group-video',
+    'insertImage',// 删除网络图片上传
+    'insertLink',// 删除链接
+    'insertTable',// 删除表格
+    'codeBlock',// 删除代码块
+  ]
+}
+const editorConfig = {
+  placeholder: '',
+  readOnly: false, // 是否只允许阅读，不可编辑
+  autoFocus: true,
+  MENU_CONF: {
+    uploadImage: {
+      maxFileSize: 1 * 1024 * 1024,
+      server: import.meta.env.VITE_WEB_BASE_API + '/api/common/upload',
+      fieldName: 'file',
+      meta: {
+        association_id: 0,
+      },
+      customInsert(res, insertFn) {  // TS 语法
+        // customInsert(res, insertFn) {                  // JS 语法
+        // res 即服务端的返回结果
+        console.log(res);
+        // 从 res 中找到 url alt href ，然后插入图片
+        insertFn(res.data.fullurl, '', '')
+      }, onError:(file, err, res)=>{
+        if(err.message.indexOf('exceeds maximum allowed size') !== -1){
+          koiNoticeError('图片限制为1M，请调整好再上传！');
+        }
+      },
+    }
+  }
+}
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+
+const handleCreated = (editor) => {
+  editorRef.value = editor // 记录 editor 实例，重要！
+}
+// 定义响应式变量
+const points = ref([]); // 存储点击的点
+/*新闻坐标*/
+const s = ref();
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+const showPoints = ref([]); // 展示的点
+
+const rectCoordinates = ref(null); // 矩形坐标
+const rect = ref(null); // 用来显示矩形的overlay
+const imageWidth = ref(0); // 图片宽度
+const imageHeight = ref(0); // 图片高度
+const imageLoaded = ref(false); // 确保图片加载完成
+const isDragging = ref(false); // 是否正在拖动
+const dragStart = ref({x: 0, y: 0}); // 拖动开始的坐标
+const allowClick = ref(true); // 是否允许点击
+
+const allowClickTrue = () => {
+  console.log("allowClickTrue");
+  // 清空点，准备下一次点击
+  points.value = [];
+  allowClick.value = true;
+  isDragging.value = false;
+  rectCoordinates.value = null;
+  const canvas = document.getElementById('myCanvas');
+  const context = canvas.getContext("2d");
+  // 清空之前的画布
+  context.clearRect(0, 0, canvas.width, canvas.height);
+}
+// 确保图片加载完成后执行操作
+const onImageLoad = () => {
+  const img = document.getElementById('image-selector');
+  imageWidth.value = img.offsetWidth; // 使用自然宽度
+  imageHeight.value = img.offsetHeight; // 使用自然高度
+  imageLoaded.value = true;
+  console.log('Image loaded:', imageWidth.value, imageHeight.value);
+};
+
+// 处理用户点击事件
+const handleClick = (event) => {
+  if (!imageLoaded.value || !allowClick.value) return;
+  const img = document.getElementById('image-selector');
+  const rect = img.getBoundingClientRect(); // 使用 img 的边界矩形
+  const scaleX = img.naturalWidth / img.offsetWidth; // 计算缩放比例
+  const scaleY = img.naturalHeight / img.offsetHeight; // 计算缩放比例
+  const xx = parseInt((event.clientX - rect.left) * scaleX); // 使用缩放比例计算坐标
+  const yy = parseInt((event.clientY - rect.top) * scaleY); // 使用缩放比例计算坐标
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+  // 保存点击的坐标
+  points.value.push({x, y});
+  showPoints.value.push({xx, yy});
+  console.log(`Clicked at: (${x}, ${y})`); // 调试信息
+  console.log(`Clicked at a: (${xx}, ${yy})`); // 调试信息
+  // 确保 canvas 元素存在后再绘制
+  const canvas = document.getElementById('myCanvas');
+  console.log('Canvas:', canvas);
+  if (canvas) {
+    drawCurrentPath(); // 确保调用绘制函数
+  } else {
+    console.error("Canvas element not found!");
+  }
+
+  // 如果点击了四次，计算矩形并显示
+  if (points.value.length === 4) {
+    calculateRectangle();
+    showCalculateRectangle();
+  }
+};
+
+// 新增函数：绘制当前点击的点和线
+const drawCurrentPath = () => {
+  const canvas = document.getElementById('myCanvas');
+  if (!canvas) {
+    console.error("Canvas element not found!");
+    return;
+  }
+
+  const context = canvas.getContext("2d");
+  context.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
+
+  // 绘制已点击的点
+  points.value.forEach(point => {
+    context.beginPath();
+    context.arc(point.x, point.y, 5, 0, Math.PI * 2); // 绘制圆点
+    context.fillStyle = "red"; // 红色点
+    context.fill();
+  });
+
+  // 绘制线条连接已点击的点
+  if (points.value.length > 1) {
+    context.beginPath();
+    context.moveTo(points.value[0].x, points.value[0].y);
+    for (let i = 1; i < points.value.length; i++) {
+      context.lineTo(points.value[i].x, points.value[i].y);
+    }
+    context.strokeStyle = "blue"; // 蓝色线条
+    context.lineWidth = 2;
+    context.stroke();
+  }
+};
+// 计算矩形坐标
+const showCalculateRectangle = () => {
+  const [p1, p2, p3, p4] = showPoints.value;
+  console.log('showCalculateRectangle', showPoints.value);
+  const xx1 = Math.min(p1.xx, p2.xx, p3.xx, p4.xx);
+  const yy1 = Math.min(p1.yy, p2.yy, p3.yy, p4.yy);
+  const xx2 = Math.max(p1.xx, p2.xx, p3.xx, p4.xx);
+  const yy2 = Math.max(p1.yy, p2.yy, p3.yy, p4.yy);
+  s.value = {xx1, yy1, xx2, yy2};
+  console.log('s',  s.value);
+  coordinate.value = `${xx1},${yy1},${xx2},${yy2}`;
+};
+// 计算矩形坐标
+const calculateRectangle = () => {
+  const [p1, p2, p3, p4] = points.value;
+  console.log('calculateRectangle', points.value);
+  const x1 = Math.min(p1.x, p2.x, p3.x, p4.x);
+  const y1 = Math.min(p1.y, p2.y, p3.y, p4.y);
+  const x2 = Math.max(p1.x, p2.x, p3.x, p4.x);
+  const y2 = Math.max(p1.y, p2.y, p3.y, p4.y);
+
+  rectCoordinates.value = {x1, y1, x2, y2};
+
+  // 显示矩形（用于视觉反馈）
+  rect.value = {
+    left: `${x1}px`,
+    top: `${y1}px`,
+    width: `${x2 - x1}px`,
+    height: `${y2 - y1}px`,
+  };
+  // 使用 nextTick 确保 DOM 更新完成后再访问 canvas
+  nextTick(() => {
+    drawRectanglePath(x1, y1, x2, y2);
+  });
+
+  // 清空点，准备下一次点击
+  points.value = [];
+};
+
+// 使用 Canvas 绘制矩形路径
+const drawRectanglePath = (x1, y1, x2, y2) => {
+  console.log('Drawing rectangle path...');
+  console.log('x1', x1)
+  console.log('y1', y1)
+  console.log('x2', x2)
+  console.log('y3', y2)
+  coordinateShow.value = `${x1},${y1},${x2},${y2}`;
+  const canvas = document.getElementById('myCanvas');
+  if (!canvas) {
+    console.error("Canvas element not found!");
+    return;
+  }
+  const context = canvas.getContext("2d");
+  // 清空之前的画布
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  // 绘制矩形路径
+  context.beginPath();
+  context.moveTo(x1, y1);
+  context.lineTo(x2, y1);
+  context.lineTo(x2, y2);
+  context.lineTo(x1, y2);
+  context.closePath();
+  // 设置绘制样式
+  context.lineWidth = 3;
+  context.strokeStyle = "green"; // 绿色路径
+  context.setLineDash([5, 3]); // 设置虚线样式
+  context.stroke();
+};
+
+// 新增函数：开始拖动
+const startDrag = (event: MouseEvent) => {
+  console.log(rectCoordinates.value);
+  //event.preventDefault(); // 阻止默认行为
+  if (rectCoordinates.value) { // 确保矩形已绘制
+    isDragging.value = true;
+    allowClick.value = false; // 禁止点击
+    dragStart.value = {x: event.clientX, y: event.clientY};
+  }
+};
+
+// 新增函数：处理拖动
+const onDrag = (event) => {
+  if (isDragging.value) {
+    const dx = event.clientX - dragStart.value.x;
+    const dy = event.clientY - dragStart.value.y;
+    // 更新矩形坐标
+    rectCoordinates.value.x1 += dx;
+    rectCoordinates.value.y1 += dy;
+    rectCoordinates.value.x2 += dx;
+    rectCoordinates.value.y2 += dy;
+    console.log( s.value)
+    // 更新矩形坐标
+     s.value.xx1 += dx;
+     s.value.yy1 += dy;
+     s.value.xx2 += dx;
+     s.value.yy2 += dy;
+    coordinate.value = `${s.value.xx1},${s.value.yy1},${s.value.xx2},${s.value.yy2}`;
+    // 更新拖动起始点
+    dragStart.value = {x: event.clientX, y: event.clientY};
+    // 重新绘制矩形
+    drawRectanglePath(rectCoordinates.value.x1, rectCoordinates.value.y1, rectCoordinates.value.x2, rectCoordinates.value.y2);
+  }
+};
+
+// 新增函数：结束拖动
+const endDrag = () => {
+  isDragging.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+/* 你的样式 */
+</style>
--- a/src/views/paper/list/index.vue
+++ b/src/views/paper/list/index.vue
@ -48,7 +48,7 @@
        :indent="30"
        :data="tableList"
        :default-expand-all="isExpandAll"
-        row-key="id"
+        row-key="uuid"
        @row-click="rowClick"
        :lazy="true"
        :load="load"
@ -60,9 +60,12 @@
          prop="datetime"
          align="left"
          :show-overflow-tooltip="true"
-          width="250px"
+          width="300px"
        >
          <template #default="scope">
+            <el-input @blur="addSort(scope.row)" v-if="scope.row.level==2" :maxlength="2" class="center-input"
+                      style="max-width: 50px;margin-right: 10px"
+                      v-model="scope.row.weight"></el-input>
            <span class="cursor-pointer">{{ scope.row.datetime }}</span>
          </template>
        </el-table-column>
@ -117,7 +120,7 @@
                       icon="Edit"
                       circle
                       plain
-                       @click="handleUpdate(row)"
+                       @click="openUrl('/paper/article/update/'+row.id)"
            ></el-button>
            <el-button v-if="row.level==3"
                       type="danger"
@ -168,7 +171,8 @@
        </el-row>
      </template>
    </KoiDialog>
-    <KoiDialog ref="koiDrawerBm" :width="500" :height="400" title="版面编辑" @koiConfirm="handleConfirmBmDo"
+    <KoiDialog ref="koiDrawerBm" :width="500" :height="400" :title="Bmform.id==0?'添加版面':'修改版面'"
+               @koiConfirm="handleConfirmBmDo"
               @koiCancel="handleCancel" :loading="confirmLoading">
      <template #content>
        <el-row>
@ -177,6 +181,9 @@
              <el-form-item label="版面名称">
                <el-input v-model="Bmform.bm_name" placeholder="输入版面名称"/>
              </el-form-item>
+              <el-form-item label="版面排序">
+                <el-input type="number" v-model="Bmform.weight" placeholder="输入版面排序"/>
+              </el-form-item>
              <el-form-item label="版面PDF">
                <KoiUploadFiles :fileList="Bmform.pdf" acceptType=".pdf" @update:fileList="updateFileList"
                                @fileSuccess="getFileList">
@ -194,6 +201,7 @@
                  <template #tip>图片最大为 3M</template>
                </KoiUploadImage>
              </el-form-item>
+
            </el-form>
          </el-col>
        </el-row>
@ -206,9 +214,22 @@
 <script setup lang="ts" name="menuPage">
 import {nextTick, ref, reactive, onMounted} from "vue";
 import {koiNoticeSuccess, koiNoticeError, koiMsgError, koiMsgWarning, koiMsgBox, koiMsgInfo} from "@/utils/koi.ts";
+import {generateUUID} from "@/utils/index.ts";
 import {useRoute, useRouter} from "vue-router";
-import {bmDel, bmList, bmListNews, bmListNext, bmUpdate, dateDel, dateUpdate, getList, newsDel} from "@/api/system/post/index.ts";
-
+import {
+  bmDel,
+  bmList,
+  bmListNews,
+  bmListNext,
+  bmUpdate,
+  dateDel,
+  dateUpdate,
+  getList,
+  newsDel,
+  bmOneAdd
+} from "@/api/system/post/index.ts";
+import useTabsStore from "@/stores/modules/tabs.ts";
+const tabsStore = useTabsStore();
 const router = useRouter();
 // 表格加载动画Loading
 const loading = ref(false);
@ -256,10 +277,12 @@ const updateFileList = (d) => {
 /*PDF上传*/
 const getFileList = (d) => {
  console.log(d);
+  Bmform.bm_pdf = d.fullurl;
 }
 /*IMG上传*/
 const getImgList = (d) => {
  console.log(d);
+  Bmform.bm_img = d;
 }
 /*获取PDF文件名称*/
 const getFileNameFromUrl = (url) => {
@ -286,6 +309,7 @@ const load = async (row, treeNode, resolve) => {
      res.data = res.data.map(item => {
        return {
          ...item,
+          uuid:generateUUID(),
          datetime: item.bm_name,
          bm_name: undefined // 或者删除该项
        };
@ -295,6 +319,7 @@ const load = async (row, treeNode, resolve) => {
      res.data = res.data.map(item => {
        return {
          ...item,
+          uuid:generateUUID(),
          datetime: item.new_name,
          bm_name: undefined // 或者删除该项
        };
@ -312,7 +337,9 @@ const Bmform = reactive({
  bm_img: "",
  bm_name: "",
  bm_pdf: "",
-  pdf: []
+  id: 0,
+  pdf: [],
+  weight: 0,
 })
 /*版面修改*/
 const handleUpdateBm = (row) => {
@ -324,20 +351,51 @@ const handleUpdateBm = (row) => {
  Bmform.pdf = [{'url': row.bm_pdf, 'name': getFileNameFromUrl(row.bm_pdf)}];
  koiDrawerBm.value.koiOpen();
 }
+/*添加版面*/
+const handleAddDate = (row) => {
+  console.log(row);
+  Bmform.bm_name = "";
+  Bmform.bm_img = "";
+  Bmform.bm_pdf = "";
+  Bmform.weight = 0;
+  Bmform.id = 0;
+  Bmform.pdf = [];
+  Bmform.date_id = row.id;
+  koiDrawerBm.value.koiOpen();
+}
+/*版面排序修改*/
+const addSort = async (row) => {
+  //console.log(row);
+  try {
+    const res: any = await bmUpdate({id: row.id, weight: row.weight});
+    koiNoticeSuccess("修改成功!");
+    handleTreeList();
+  } catch (error) {
+    console.log(error);
+    koiNoticeError("数据修改失败，请刷新重试🌻");
+  }

-/*版面修改*/
+}
+
+/*版面修改/添加*/
 const handleConfirmBmDo = async () => {
  confirmLoading.value = true;
  try {
-    const res: any = await bmUpdate(Bmform);
-    console.log("菜单数据表格数据->", res.data);
-    koiNoticeSuccess("修改成功!");
+    if (Bmform.id == 0) {
+      const res: any = await bmOneAdd(Bmform);
+      console.log("菜单数据表格数据->", res.data);
+      koiNoticeSuccess("添加成功!");
+    } else {
+      const res: any = await bmUpdate(Bmform);
+      console.log("菜单数据表格数据->", res.data);
+      koiNoticeSuccess("修改成功!");
+    }
    confirmLoading.value = false;
    koiDrawerBm.value.koiQuickClose();
    handleTreeList();
  } catch (error) {
    console.log(error);
-    koiNoticeError("数据查询失败，请刷新重试🌻");
+    koiNoticeError("数据修改失败，请刷新重试🌻");
  }
 }
 const handleListPageSize = (size) => {
@ -364,6 +422,14 @@ const handleTreeList = async () => {
    tableList.value = []; // 重置表格数据
    const res: any = await bmList(pageNumber);
    console.log("菜单数据表格数据->", res.data.data);
+
+    res.data.data = res.data.data.map(item => {
+      return {
+        ...item,
+        uuid:generateUUID(),
+      };
+    });
+
    tableList.value = res.data.data;
    loading.value = false;
    total.value = res.data.count;
@ -377,6 +443,12 @@ onMounted(() => {
  // 获取表格数据
  handleTreeList();
  getTypelist();
+  // let index = tabsStore.tabList.find(tab => tab.path.includes('/paper/article/update/'));
+  // console.log(index)
+  // while (typeof (index) !='undefined') {
+  //   tabsStore.removeTab(index.path);
+  //   index = tabsStore.tabList.find(tab => tab.path.includes('/paper/article/update/'));
+  // }
 });

 const rowClick = (row, column, e) => {
@ -402,10 +474,7 @@ const isExpandAll = ref(false);
 const handleAdd = () => {
  router.push("/paper/add");
 };
-/*添加版面*/
-const handleAddDate = (row) => {

-}
 /** 修改 */
 const handleUpdateDate = (row) => {
  console.log(row);
@ -449,14 +518,15 @@ const handleDeleteDate = (row: any) => {
  koiMsgBox("您确认需要删除期刊[ " + row.datetime + " ]么？")
    .then(async () => {
      try {
-        await dateDel({'id':id});
+        await dateDel({'id': id});
        koiNoticeSuccess("删除成功!");
        handleTreeList();
      } catch (error) {
        console.log(error);
      }
    })
-    .catch(() => {});
+    .catch(() => {
+    });
 };
 /** 删除版面*/
 const handleDeleteBm = (row: any) => {
@ -464,14 +534,15 @@ const handleDeleteBm = (row: any) => {
  koiMsgBox("您确认需要删除版面[ " + row.datetime + " ]么？")
    .then(async () => {
      try {
-        await bmDel({'id':id});
+        await bmDel({'id': id});
        koiNoticeSuccess("删除成功!");
        handleTreeList();
      } catch (error) {
        console.log(error);
      }
    })
-    .catch(() => {});
+    .catch(() => {
+    });
 };
 /** 删除新闻*/
 const handleDeleteNews = (row: any) => {
@ -479,16 +550,21 @@ const handleDeleteNews = (row: any) => {
  koiMsgBox("您确认需要删除新闻[ " + row.datetime + " ]么？")
    .then(async () => {
      try {
-        await newsDel({'id':id});
+        await newsDel({'id': id});
        koiNoticeSuccess("删除成功!");
        handleTreeList();
      } catch (error) {
        console.log(error);
      }
    })
-    .catch(() => {});
+    .catch(() => {
+    });
 };

 </script>

-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+::v-deep(.center-input .el-input__inner ) {
+  text-align: center;
+}
+</style>
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@ -298,10 +298,10 @@ import {
  koiMsgInfo
 } from "@/utils/koi.ts";
 // @ts-ignore
-import { listPage, getById, add, update, deleteById, batchDelete, updateStatus } from "@/api/system/user/index.ts";
-import { listNormalRole, assignUserRole } from "@/api/system/role/index.ts";
+//import { listPage, getById, add, update, deleteById, batchDelete, updateStatus } from "@/api/system/user/index.ts";
+//import { listNormalRole, assignUserRole } from "@/api/system/role/index.ts";
 // @ts-ignore
-import { listDataByType } from "@/api/system/dict/data/index.ts";
+//import { listDataByType } from "@/api/system/dict/data/index.ts";
 import { koiDatePicker } from "@/utils/index.ts";

 // 数据表格加载页面动画
--- a/vite.config.ts
+++ b/vite.config.ts
@ -18,11 +18,11 @@ import path from "path";
 export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd()); // 获取配置文件别名配置
  return {
+    base: '/dist/', // 设置为您的二级目录名称
    plugins: [
      vue(),
      Unocss(),
      vueSetupExtend(),
-      viteCompression(),
      ViteImageOptimizer(),
      createSvgIconsPlugin({
        // 配置SVG图片