diff --git a/src/api/login/login.ts b/src/api/login/login.ts
index df61ae0..e6be625 100644
--- a/src/api/login/login.ts
+++ b/src/api/login/login.ts
@@ -42,3 +42,14 @@ export async function forgetPassword(params: any) {
     params,
   })
 }
+
+/**
+ * 忘记密码第二步
+ */
+export async function updateSUser(params: any) {
+  return http.request({
+    url: `/ocr/sUser/updateSUser`,
+    method: 'post',
+    params,
+  })
+}
diff --git a/src/api/message/message.ts b/src/api/message/message.ts
index 6e1f835..7136fb5 100644
--- a/src/api/message/message.ts
+++ b/src/api/message/message.ts
@@ -1,11 +1,10 @@
 import { http } from '@/utils/http/axios'
-import type { PageParam, PictureSortParam, SetTFParam } from '/#/api'
 
 /**
  * 获系统消息
  * @returns
  */
-export async function getMessageList(params: PageParam) {
+export async function getMessageList(params) {
   const res = await http.request({
     url: `/ocr/msg/systemPage`,
     method: 'get',
@@ -14,3 +13,45 @@ export async function getMessageList(params: PageParam) {
 
   return res
 }
+
+/**
+ * 消息详情
+ * @returns
+ */
+export async function msgOne(params) {
+  const res = await http.request({
+    url: `/ocr/msg/msgOne`,
+    method: 'get',
+    params,
+  })
+
+  return res
+}
+
+/**
+ * 消息未读单读
+ * @returns
+ */
+export async function readMsg(params) {
+  const res = await http.request({
+    url: `/ocr/msg/eliminateUnreadone`,
+    method: 'post',
+    params,
+  })
+
+  return res
+}
+
+/**
+ * 消息未读全读
+ * @returns
+ */
+export async function readAllMsg(params) {
+  const res = await http.request({
+    url: `/ocr/msg/eliminateUnreadfull`,
+    method: 'post',
+    params,
+  })
+
+  return res
+}
diff --git a/src/assets/images/message/arrow-down.png b/src/assets/images/message/arrow-down.png
new file mode 100644
index 0000000..32d9241
Binary files /dev/null and b/src/assets/images/message/arrow-down.png differ
diff --git a/src/layout/components/Header/index.vue b/src/layout/components/Header/index.vue
index 8797ee5..daf3bad 100644
--- a/src/layout/components/Header/index.vue
+++ b/src/layout/components/Header/index.vue
@@ -1,17 +1,17 @@
 <script lang="ts">
-import { useUser } from "@/store/modules/user";
-import { getImgUrl } from "@/utils/urlUtils";
-import { useDialog, useMessage } from "naive-ui";
-import { defineComponent, reactive, ref, toRefs, unref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import QuillModal from "./QuillModal.vue";
-import RecycleModal from "./RecycleModal.vue";
-import SearchModal from "./SearchModal.vue";
-import ShortcutModal from "./ShortcutModal.vue";
-import UserSettings from "./UserSettings.vue";
+import { useDialog, useMessage } from 'naive-ui'
+import { defineComponent, reactive, ref, toRefs, unref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import QuillModal from './QuillModal.vue'
+import RecycleModal from './RecycleModal.vue'
+import SearchModal from './SearchModal.vue'
+import ShortcutModal from './ShortcutModal.vue'
+import UserSettings from './UserSettings.vue'
+import { getImgUrl } from '@/utils/urlUtils'
+import { useUser } from '@/store/modules/user'
 
 export default defineComponent({
-  name: "PageHeader",
+  name: 'PageHeader',
   components: {
     UserSettings,
     QuillModal,
@@ -27,108 +27,112 @@ export default defineComponent({
       type: Boolean,
     },
   },
-  emits: ["update:collapsed"],
+  emits: ['update:collapsed'],
   setup() {
-    const message = useMessage();
-    const dialog = useDialog();
+    const message = useMessage()
+    const dialog = useDialog()
 
-    const userStore = useUser();
-    const useInfo = userStore.getUserInfo;
+    const userStore = useUser()
+    const useInfo = userStore.getUserInfo
 
-    const name = "";
+    const name = ''
 
     const state = reactive({
-      username: name ?? "",
-      fullscreenIcon: "FullscreenOutlined",
-    });
+      username: name ?? '',
+      fullscreenIcon: 'FullscreenOutlined',
+    })
 
-    const router = useRouter();
-    const route = useRoute();
-    const routename = ref(route.meta.title);
+    const router = useRouter()
+    const route = useRoute()
+    const routename = ref(route.meta.title)
 
     watch(
       () => route.fullPath,
       () => {
-        routename.value = route.meta.title;
-      }
-    );
+        routename.value = route.meta.title
+      },
+    )
 
     const dropdownSelect = (key) => {
-      router.push({ name: key });
-    };
+      router.push({ name: key })
+    }
 
     // 退出登录
     const doLogout = () => {
       dialog.info({
-        title: "提示",
-        content: "您确定要退出登录吗",
-        positiveText: "确定",
-        negativeText: "取消",
+        title: '提示',
+        content: '您确定要退出登录吗',
+        positiveText: '确定',
+        negativeText: '取消',
         onPositiveClick: () => {
           userStore.logout().then(() => {
-            message.success("成功退出登录");
+            message.success('成功退出登录')
             router
               .replace({
-                name: "Login",
+                name: 'Login',
                 query: {
                   redirect: route.fullPath,
                 },
               })
-              .finally(() => location.reload());
-          });
+              .finally(() => location.reload())
+          })
         },
         onNegativeClick: () => {},
-      });
-    };
+      })
+    }
 
-    const quillModalRef = ref(null);
-    const shortcutModal = ref(null);
-    const recycleModalRef = ref(null);
-    const SearchModalRef = ref(null);
+    const quillModalRef = ref(null)
+    const shortcutModal = ref(null)
+    const recycleModalRef = ref(null)
+    const SearchModalRef = ref(null)
 
     function quillHandler() {
-      const modal = unref(quillModalRef)! as any;
-      modal.showModal();
+      const modal = unref(quillModalRef)! as any
+      modal.showModal()
     }
 
     function shortcutHandler() {
-      const modal = unref(shortcutModal)! as any;
-      modal.showModal();
+      const modal = unref(shortcutModal)! as any
+      modal.showModal()
     }
 
     function recycleHandler() {
-      const modal = unref(recycleModalRef)! as any;
-      modal.showModal();
+      const modal = unref(recycleModalRef)! as any
+      modal.showModal()
     }
 
     function searchHandler() {
-      const modal = unref(SearchModalRef)! as any;
-      modal.showModal();
+      const modal = unref(SearchModalRef)! as any
+      modal.showModal()
+    }
+
+    function goMessage() {
+      router.push({ name: 'message-main' })
     }
 
     // 图标列表
     const iconList = [
       {
-        icon: "magnifying-1",
+        icon: 'magnifying-1',
         handle: searchHandler,
       },
       {
-        icon: "shortcut-keys",
+        icon: 'shortcut-keys',
         handle: shortcutHandler,
       },
       {
-        icon: "suspicious-folder",
+        icon: 'suspicious-folder',
         handle: recycleHandler,
       },
       {
-        icon: "memo",
+        icon: 'memo',
         handle: quillHandler,
       },
       {
-        icon: "newmessage",
-        handle: shortcutHandler,
+        icon: 'newmessage',
+        handle: goMessage,
       },
-    ];
+    ]
 
     return {
       ...toRefs(state),
@@ -146,9 +150,9 @@ export default defineComponent({
       recycleHandler,
       useInfo,
       getImgUrl,
-    };
+    }
   },
-});
+})
 </script>
 
 <template>
diff --git a/src/router/modules/message.ts b/src/router/modules/message.ts
index 3adfb5b..752cd4b 100644
--- a/src/router/modules/message.ts
+++ b/src/router/modules/message.ts
@@ -23,8 +23,9 @@ const routes: Array<RouteRecordRaw> = [
       permissions: ['worksheet-main'],
       svgname: 'worksheet',
       svgsize: 22,
-      sort: 2,
+      sort: 5,
       disabled: true,
+      hidden: true,
     },
     children: [
       {
diff --git a/src/views/login/components/Forget.vue b/src/views/login/components/Forget.vue
index 1ae0fa9..5b02a54 100644
--- a/src/views/login/components/Forget.vue
+++ b/src/views/login/components/Forget.vue
@@ -1,13 +1,7 @@
 <script lang="ts" setup>
-import { computed, reactive, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { reactive, ref } from 'vue'
 import { useMessage } from 'naive-ui'
-
-// import captcha from './captcha.vue'
-import { PageEnum } from '@/enums/pageEnum'
-import { useUserStore } from '@/store/modules/user'
-import { ResultEnum } from '@/enums/httpEnum'
-import { forgetPassword, getCode } from '@/api/login/login'
+import { forgetPassword, getCode, updateSUser } from '@/api/login/login'
 
 const emit = defineEmits(['close', 'forget'])
 interface FormState {
@@ -24,36 +18,46 @@ interface FormForget {
   phonecode: string
 }
 
+interface FormSure {
+  newPassword: string
+  rePasswrod: string
+  loginname: string
+}
+
 const formRef = ref()
+const formRefSure = ref()
+
 const message = useMessage()
 const loading = ref(false)
-const autoLogin = ref(true)
-const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME
-const userStore = useUserStore()
-const router = useRouter()
-const route = useRoute()
-const show = ref(false)
-const flag = ref(false)
+const flag = ref(true)
 const formForget: FormForget = reactive({
   agentcode: '三方系统标识8',
   loginname: '13311111111',
   phone: '13311111111',
   phonecode: '',
 })
+
 const formInline: FormState = reactive({
   enterprisecode: '三方系统标识8',
   username: '13311111111',
   password: '123456',
   captcha: '',
 })
+
+const formSure: FormSure = reactive({
+  newPassword: '',
+  rePasswrod: '',
+  loginname: '13311111111',
+})
 const tab = ref(0)
 const countTime = ref('获取验证码')
 const rules = {
   enterprisecode: { required: true, message: '请输入企业编码', trigger: 'blur' },
   loginname: { required: true, message: '请输入用户名', trigger: 'blur' },
   password: { required: true, message: '请输入密码', trigger: 'blur' },
-  captcha: { required: true, message: '请输入验证码', trigger: 'blur' },
-  reenteredPassword: [
+  phonecode: { required: true, message: '请输入验证码', trigger: 'blur' },
+  newPassword: { required: true, message: '请输入新密码', trigger: 'blur' },
+  rePasswrod: [
     {
       required: true,
       message: '请再次输入密码',
@@ -68,7 +72,7 @@ const rules = {
 }
 
 function validatePasswordSame(rule: any, value: string): boolean {
-  return value === formInline.password
+  return value === formSure.newPassword
 }
 
 function handleSubmit(e) {
@@ -76,7 +80,6 @@ function handleSubmit(e) {
   formRef.value.validate(async (errors) => {
     if (!errors) {
       const { loginname, phone, phonecode, agentcode } = formForget
-      message.loading('登录中...')
       loading.value = true
 
       const params = {
@@ -88,19 +91,9 @@ function handleSubmit(e) {
 
       try {
         const res = await forgetPassword(params)
-        const { code, message: msg } = await userStore.login(params)
-        await userStore.getInformation()
-
-        message.destroyAll()
-        if (code === ResultEnum.SUCCESS) {
-          const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
-          message.success('登录成功，即将进入系统')
-          if (route.name === LOGIN_NAME)
-            router.replace('/')
-          else router.replace(toPath)
-        }
-        else {
-          message.info(msg || '登录失败')
+        if (res.code === 'OK') {
+          formSure.loginname = res.data.loginname
+          tab.value = 1
         }
       }
       finally {
@@ -108,7 +101,38 @@ function handleSubmit(e) {
       }
     }
     else {
-      message.error('请填写完整信息，并且进行验证码校验')
+      message.error('请填写完整信息')
+    }
+  })
+}
+
+function handleSure(e) {
+  e.preventDefault()
+  formRefSure.value.validate(async (errors) => {
+    if (!errors) {
+      const { newPassword, rePasswrod, loginname } = formSure
+      loading.value = true
+
+      const params = {
+        newPassword,
+        rePasswrod,
+        loginname,
+      }
+
+      try {
+        const res = await updateSUser(params)
+        if (res.code === 'OK')
+          message.success('修改成功')
+
+        else
+          message.error(res.message)
+      }
+      finally {
+        loading.value = false
+      }
+    }
+    else {
+      message.error('请填写完整信息')
     }
   })
 }
@@ -125,7 +149,13 @@ function computedForm() {
   return !formInline.enterprisecode || !formInline.username || !formInline.password
 }
 
+function computedFormSure() {
+  return !formSure.newPassword || !formSure.rePasswrod
+}
 async function sendCode(value) {
+  if (!flag.value)
+    return
+  flag.value = false
   const res = await getCode({
     phone: 13311111111,
     agentcode: '三方系统标识8',
@@ -141,7 +171,7 @@ function startCount() {
     if (time === 0) {
       clearInterval(timer)
       countTime.value = '获取验证码'
-      flag.value = false
+      flag.value = true
     }
   }, 1000)
 }
@@ -205,23 +235,23 @@ function forget() {
       </n-form>
     </div>
     <div v-if="tab === 1" class="form-1">
-      <n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
-        <n-form-item class="form-item" path="password">
-          <n-input v-model:value="formInline.password" class="item-input" type="password" show-password-on="click" placeholder="请输入8-16位密码，必须包含英文及数字">
+      <n-form ref="formRefSure" label-placement="left" size="large" :model="formSure" :rules="rules">
+        <n-form-item class="form-item" path="newPassword">
+          <n-input v-model:value="formSure.newPassword" class="item-input" type="password" show-password-on="click" placeholder="请输入8-16位密码，必须包含英文及数字">
             <template #prefix>
               <svg-icon size="20" name="password" />
             </template>
           </n-input>
         </n-form-item>
-        <n-form-item class="form-item" path="password">
-          <n-input v-model:value="formInline.password" class="item-input" type="password" show-password-on="click" placeholder="请再次确认输入新密码">
+        <n-form-item class="form-item" path="rePasswrod">
+          <n-input v-model:value="formSure.rePasswrod" class="item-input" type="password" show-password-on="click" placeholder="请再次确认输入新密码">
             <template #prefix>
               <svg-icon size="20" name="password" />
             </template>
           </n-input>
         </n-form-item>
         <n-form-item class="form-item">
-          <n-button :class="{ 'btn-disabled': computedForm() }" class="btn" type="primary" size="large" :loading="loading" block @click="handleSubmit">
+          <n-button :class="{ 'btn-disabled': computedFormSure() }" class="btn" type="primary" size="large" :loading="loading" block @click="handleSure">
             确定
           </n-button>
         </n-form-item>
diff --git a/src/views/login/components/Login.vue b/src/views/login/components/Login.vue
index 3c6f8dc..60f67de 100644
--- a/src/views/login/components/Login.vue
+++ b/src/views/login/components/Login.vue
@@ -32,10 +32,12 @@ const userStore = useUserStore()
 const router = useRouter()
 const route = useRoute()
 const show = ref(false)
+const flag = ref(true)
+
 const formInline: FormState = reactive({
-  enterprisecode: ' 演示公司',
-  username: 'yanshi01',
-  password: '123456',
+  enterprisecode: '三方系统标识8',
+  username: '13311111111',
+  password: '12345678l',
 })
 
 const formSms: FormSms = reactive({
@@ -72,23 +74,10 @@ function handleSubmit(e) {
 
       try {
         const { code, message: msg } = await userStore.login(params)
-        await userStore.getInformation()
-        // const response = await getFilter()
-
-        // // 添加个默认显示配置
-        // if (response.data === null) {
-        //   const systemConfig = await getConfig()
-        //   const onList: string[] = []
-        //   Object.keys(systemConfig.data).forEach((key) => {
-        //     // 系统配置开启且个人配置开启
-        //     if (key.startsWith('iz') && systemConfig.data[key] === 'Y' && asideMap[key]?.isDefaultFilter)
-        //       onList.push(key)
-        //   })
-        //   await setFilter({ searchcount: onList.join(',') })
-        // }
-
-        message.destroyAll()
         if (code === ResultEnum.SUCCESS) {
+          await userStore.getInformation()
+          message.destroyAll()
+
           const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
           message.success('登录成功，即将进入系统')
           if (route.name === LOGIN_NAME)
@@ -96,6 +85,7 @@ function handleSubmit(e) {
           else router.replace(toPath)
         }
         else {
+          message.destroyAll()
           message.info(msg || '登录失败')
         }
       }
@@ -123,11 +113,12 @@ function handleSmsSubmit(e) {
           agentcode,
           phonecode,
         })
-        console.log(res)
-        // const { code, message: msg } = await userStore.login(params)
-        await userStore.getInformation()
-        message.destroyAll()
+        const { code, message: msg } = res
         if (code === ResultEnum.SUCCESS) {
+        // const { code, message: msg } = await userStore.login(params)
+          await userStore.getInformation()
+
+          message.destroyAll()
           const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
           message.success('登录成功，即将进入系统')
           if (route.name === LOGIN_NAME)
@@ -135,6 +126,7 @@ function handleSmsSubmit(e) {
           else router.replace(toPath)
         }
         else {
+          message.destroyAll()
           message.info(msg || '登录失败')
         }
       }
@@ -161,11 +153,14 @@ function computedForm() {
 }
 
 async function sendCode(value) {
+  if (!flag.value)
+    return
+  flag.value = false
+
   const res = await getCode({
     phone: 13311111111,
     agentcode: '三方系统标识8',
   })
-  console.log(res)
   startCount()
 }
 
@@ -177,7 +172,7 @@ function startCount() {
     if (time === 0) {
       clearInterval(timer)
       countTime.value = '重新获取'
-      // this.flag = false;
+      flag.value = true
     }
   }, 1000)
 }
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 2e342b3..a71842c 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,38 +1,11 @@
 <script lang="ts" setup>
-import { reactive, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useMessage } from 'naive-ui'
+import { ref } from 'vue'
 import Login from './components/Login.vue'
 import Forget from './components/Forget.vue'
-import { PageEnum } from '@/enums/pageEnum'
-import { useUserStore } from '@/store/modules/user'
 
-interface FormState {
-  enterprisecode?: string
-  username: string
-  password: string
-  captcha: string
-}
-
-const formRef = ref()
-const message = useMessage()
-const loading = ref(false)
-const autoLogin = ref(true)
-const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME
-const userStore = useUserStore()
-const router = useRouter()
-const route = useRoute()
-const show = ref(true)
-const showForget = ref(true)
+const show = ref(false)
 const ifLogin = ref(true)
 
-const formInline: FormState = reactive({
-  enterprisecode: '三方系统标识8',
-  username: '13311111111',
-  password: '123456',
-  captcha: '',
-})
-
 function showLogin() {
   show.value = true
 }
diff --git a/src/views/message/aside/Aside.vue b/src/views/message/aside/Aside.vue
deleted file mode 100644
index c672d72..0000000
--- a/src/views/message/aside/Aside.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-<script lang="ts" setup>
-import { computed, defineOptions, nextTick, onBeforeMount, onMounted, reactive, ref, unref } from 'vue'
-import CustomFieldModalVue from '../modal/CustomFieldModal.vue'
-import WorkSheetList from './WorkSheetList.vue'
-import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
-import { getViewportOffset } from '@/utils/domUtils'
-import type { PackageListItem } from '/#/workorder'
-import { useWorkOrder } from '@/store/modules/workOrder'
-
-defineOptions({ name: 'AsideContent' })
-
-const collapse = ref(false)
-const workStore = useWorkOrder()
-const filterModalRef = ref(null)
-
-function collapseHandler() {
-  collapse.value = !collapse.value
-}
-
-const asideWidth = computed(() => {
-  return collapse.value ? 0 : 308
-})
-
-const asideStyle = computed(() => {
-  return {
-    width: `${asideWidth.value}px`,
-  }
-})
-
-const collapseIcon = computed(() => {
-  return collapse.value ? 'expand-cir' : 'collapse-cir'
-})
-
-const listHeight = ref(700)
-
-function computeListHeight() {
-  const listEl = document.querySelector('.work-sheet-list')!
-  const { bottomIncludeBody } = getViewportOffset(listEl)
-  const height = bottomIncludeBody
-  listHeight.value = height - 25
-}
-
-const listStyle = computed(() => {
-  return {
-    height: `${listHeight.value}px`,
-  }
-})
-
-useWindowSizeFn(computeListHeight, 280)
-
-onMounted(() => {
-  nextTick(() => {
-    computeListHeight()
-  })
-})
-
-const data = ref<PackageListItem[]>([])
-
-const pagination = reactive({
-  pageNo: 1,
-  pageSize: 10,
-})
-
-onBeforeMount(async () => {
-  const orderList = await workStore.fetchOrderList(pagination)
-  data.value = orderList
-})
-
-const asideEnter = ref(false)
-
-const showCollapse = computed(() => {
-  return collapse.value ? true : asideEnter.value
-})
-
-function showFilter() {
-  const modal = unref(filterModalRef)! as any
-  modal.showModal()
-}
-</script>
-
-<template>
-  <div class="aside" :style="asideStyle" @mouseenter="asideEnter = true" @mouseleave="asideEnter = false">
-    111fsfsf发送到发
-
-    <div v-show="showCollapse" class="aside-collapse">
-      <div class="aside-collapse-btn" @click="collapseHandler">
-        <SvgIcon :name="collapseIcon" size="40" />
-      </div>
-    </div>
-    <div class="aside-header">
-      <div class="aside-header-left">
-        <svg-icon name="all-worksheet" size="32" />
-        <span style="margin-left: 8px;">所有工单</span>
-      </div>
-      <div class="aside-header-right">
-        <SvgIcon style="cursor: pointer;margin-left: 10px;" size="18" name="magnifying-1" />
-        <SvgIcon style="cursor: pointer;margin-left: 10px;" size="18" name="filter" @click="showFilter" />
-      </div>
-    </div>
-    <WorkSheetList :style="listStyle" class="work-sheet-list" :data="data" :active-id="workStore.getActiveId" />
-    <CustomFieldModalVue ref="filterModalRef" />
-  </div>
-</template>
-
-<style lang="less" scoped>
-.aside {
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  background: #FFF;
-  border: 1px solid rgb(239, 239, 245);
-  border-radius: 3px;
-  box-sizing: border-box;
-
-  &-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 16px;
-    width: 100%;
-    overflow: hidden;
-
-    &-left {
-      display: flex;
-      align-items: center;
-      overflow: hidden;
-    }
-
-    &-right {
-      display: flex;
-      align-items: center;
-      overflow: hidden;
-    }
-  }
-
-  &-divider {
-    margin-left: 16px;
-    width: 292px;
-    height: 1px;
-    background-color: #e8e8e8;
-  }
-
-  &-collapse {
-    width: 2px;
-    height: 100%;
-    background: #507afd;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-
-  &-collapse-btn {
-    position: absolute;
-    cursor: pointer;
-    width: 40px;
-    height: 40px;
-    top: calc(15%);
-    right: -20px;
-    z-index: 10;
-  }
-}
-</style>
-../types
diff --git a/src/views/message/aside/ListItem.vue b/src/views/message/aside/ListItem.vue
deleted file mode 100644
index 92f023e..0000000
--- a/src/views/message/aside/ListItem.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue'
-import type { PackageListItem } from '/#/workorder'
-
-defineOptions({ name: 'ListItem' })
-
-const props = defineProps({
-  selected: {
-    type: Boolean,
-    default: false,
-  },
-  listItem: {
-    type: Object as PropType<PackageListItem>,
-    required: true,
-  },
-})
-
-const svgName = computed(() => {
-  return props.selected ? 'taskpack-select' : 'taskpack'
-})
-</script>
-
-<template>
-  <div class="list-item" :class="{ 'list-item-selected': selected }">
-    <div class="list-item-header">
-      <div style="display: flex;">
-        <SvgIcon :name="svgName" size="28" />
-        <span class="list-item-header-name" :class="{ 'list-item-header-selected': selected }">
-          {{ listItem.packagename }}
-        </span>
-        <span class="list-item-header-selected">({{ listItem.pictureno }})</span>
-      </div>
-      <SvgIcon v-show="selected" size="14" name="more-ver" />
-    </div>
-    <ul class="list-item-detail">
-      <li>筛选时间：{{ listItem.createTime }}</li>
-      <li>执行人：{{ listItem.createBy }}</li>
-    </ul>
-    <div class="list-item-divider" />
-  </div>
-</template>
-
-<style lang="less" scoped>
-.list-item {
-  padding: 12px 0px 12px 16px;
-  position: relative;
-
-  &-header {
-    display: flex;
-    align-items: center;
-
-    &-name {
-      font-size: 16px;
-      font-weight: bold;
-      color: #333333;
-      line-height: 22px;
-      margin: 0px 0px 8px 8px;
-    }
-
-    &-selected {
-      color: #507AFD;
-    }
-  }
-
-  &-selected {
-    background-color: #f2f5fe;
-  }
-
-  &-detail {
-    margin-left: 36px;
-
-    li {
-      font-size: 13px;
-      color: #666666;
-      line-height: 18px;
-      margin-bottom: 8px;
-    }
-  }
-
-  &-divider {
-    width: 100%;
-    height: 1px;
-    background-color: #e8e8e8;
-    position: absolute;
-    bottom: 0px;
-  }
-
-}
-</style>
-../types
diff --git a/src/views/message/aside/WorkSheetList.vue b/src/views/message/aside/WorkSheetList.vue
deleted file mode 100644
index 29e8382..0000000
--- a/src/views/message/aside/WorkSheetList.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts" setup>
-import type { PackageListItem } from '/#/workorder'
-import ListItem from './ListItem.vue'
-import { useWorkOrder } from '@/store/modules/workOrder'
-
-defineOptions({ name: 'WorkSheetList' })
-
-defineProps({
-  activeId: {
-    type: String,
-    required: true,
-  },
-  data: {
-    type: Object as PropType<PackageListItem[]>,
-    required: true,
-  },
-})
-
-const workStore = useWorkOrder()
-
-function selectHandler(id: string, index: number) {
-  workStore.setActive(index)
-}
-</script>
-
-<template>
-  <n-scrollbar>
-    <ListItem
-      v-for="(item, index) in data" :key="item.id" :selected="activeId === item.id" :list-item="item"
-      @click="selectHandler(item.id, index)"
-    />
-  </n-scrollbar>
-</template>
-
-<style lang="less" scoped>
-</style>
-../types
diff --git a/src/views/message/content/Detail.vue b/src/views/message/content/Detail.vue
index 45df479..85475df 100644
--- a/src/views/message/content/Detail.vue
+++ b/src/views/message/content/Detail.vue
@@ -1,33 +1,48 @@
 <script lang="ts" setup>
-import { onUnmounted, reactive, ref } from 'vue'
+import { reactive, ref, toRefs } from 'vue'
 import { useMessage } from 'naive-ui'
-import type { SetTFParam } from '/#/api'
-import { useWorkOrder } from '@/store/modules/workOrder'
-import { clearTF } from '@/api/work/work'
+import { format } from 'date-fns'
 
+import { msgOne, readMsg } from '@/api/message/message'
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+})
 const message = useMessage()
+const state: any = reactive({
+  detail: {},
+})
+const { detail } = toRefs(state)
 
-const workStore = useWorkOrder()
-const selectTask = ref<any>(null)
+async function getDetail() {
+  const res = await msgOne({ id: props.id })
+  if (!state.detail.readFlag)
+    clearMsg()
 
-const taskDetailInfo = ref<any>({})
+  if (res.code === 'OK')
+    state.detail = res.data
 
-async function getDetail() {
-  const res = await clearTF(workStore.activeId, selectTask.value.id)
-  if (res.code === 'OK') {
-    taskDetailInfo.value.iztrueorfalse = null
-    message.info('清除标记成功')
-  }
-  else { message.error(res.message) }
+  else
+    message.error(res.message)
+}
+
+async function clearMsg() {
+  const res = await readMsg({ msgid: props.id })
 }
+
+getDetail()
 </script>
 
 <template>
   <div class="wrapper-message">
     <div class="left-card">
       <div class="title">
-        关于系统升级的通知
+        {{ detail.titile }}
       </div>
+      <div class="content" v-html="detail.msgContent" />
     </div>
     <div class="right-card">
       <img class="icon-set" src="@/assets/images/message/set.png" alt="">
@@ -41,7 +56,7 @@ async function getDetail() {
             创建人：
           </div>
           <div class="value">
-            系统管理员
+            {{ detail.userNcame }}
           </div>
         </div>
         <div class="form-item flex">
@@ -50,7 +65,7 @@ async function getDetail() {
             发布时间：
           </div>
           <div class="value time">
-            2023-10-31  23:12:00
+            {{ format(detail.sendTime * 1000, 'yyyy-MM-dd HH:mm:ss') }}
           </div>
         </div>
         <div class="form-item flex margin-no">
@@ -60,7 +75,7 @@ async function getDetail() {
           </div>
           <div class="value">
             <div class="tag">
-              系统消息
+              {{ detail.msgCategory === 1 ? '审批通知' : '系统通知' }}
             </div>
           </div>
         </div>
@@ -93,7 +108,13 @@ async function getDetail() {
       text-align: center;
       color: #333333;
       line-height: 40px;
+      margin-bottom: 32px;
     }
+
+    .content{
+      padding: 0 32px;
+    }
+
   }
 
   .right-card{
diff --git a/src/views/message/content/Content.vue b/src/views/message/content/List.vue
similarity index 76%
rename from src/views/message/content/Content.vue
rename to src/views/message/content/List.vue
index 78012b5..7644c80 100644
--- a/src/views/message/content/Content.vue
+++ b/src/views/message/content/List.vue
@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-import { onUnmounted, reactive, ref, toRefs, watch } from 'vue'
-import type { PictureSortParam } from '/#/api'
-import { useWorkOrder } from '@/store/modules/workOrder'
-import { getPackageTaskList, getTaskDetailInfo, getTaskDetailPictureList } from '@/api/work/work'
-import { getMessageList } from '@/api/message/message'
+import { reactive, ref, toRefs } from 'vue'
+import { format } from 'date-fns'
+import { getMessageList, readAllMsg, readMsg } from '@/api/message/message'
 import iconApproveActive from '@/assets/images/message/approve-active.png'
 import iconApprove from '@/assets/images/message/approve.png'
 import iconSystemActive from '@/assets/images/message/system-active.png'
@@ -11,10 +9,11 @@ import iconSystem from '@/assets/images/message/system.png'
 import iconArrowActive from '@/assets/images/message/arrow-active.png'
 import iconArrow from '@/assets/images/message/arrow.png'
 import iconClear from '@/assets/images/message/clear.png'
+import iconArrowDown from '@/assets/images/message/arrow-down.png'
 
 const emit = defineEmits(['goDetail'])
 
-const totalCount = ref(0)
+const hasNextPage = ref(false)
 
 const state = reactive({
   tabList: [
@@ -22,78 +21,68 @@ const state = reactive({
       name: '审批通知',
       icon: iconApprove,
       activeIcon: iconApproveActive,
-      value: 0,
+      value: 1,
     },
     {
       name: '系统消息',
       icon: iconSystem,
       activeIcon: iconSystemActive,
-      value: 1,
+      value: 2,
     },
   ],
   list: [] as any,
+  pageNo: 1,
 })
 
 const { list, tabList } = toRefs(state)
 
-const packagepagination = reactive({
-  pageNo: 1,
-  pageSize: 10,
-})
-const taskpagination = reactive({
-  pageNo: 1,
-  pageSize: 10,
-})
-const sortBy: PictureSortParam = {
-  orderbyname: 'desc',
-  orderbyvalue: 'fromuptime',
-}
-const workStore = useWorkOrder()
-const selectTask = ref<any>(null)
-const taskList = ref<any[]>([])
-const taskDetailInfo = ref<any>({})
-const taskDetailPictureList = ref<any[]>([])
-
-const tab = ref(0)
+const tab = ref(1)
 
-async function getList(value) {
+async function getList() {
   const res = await getMessageList({
-    pageNo: '1',
+    pageNo: state.pageNo,
     pageSize: '10',
-    msgCategory: value,
+    msgCategory: tab.value,
   })
-  console.log(res)
-  state.list = res.list
+  if (res.code === 'OK') {
+    hasNextPage.value = res.data.hasNextPage
+    state.list = state.list.concat(res.data.list)
+  }
 }
 
-getList('1')
+getList()
 
-watch(() => workStore.activeId, async (newValue, oldValue) => {
-  const res = await getPackageTaskList(newValue, packagepagination)
-  const { data } = res
-  taskList.value = data
+async function clearMsg() {
+  const res = await readAllMsg({ msgCategory: tab.value })
+  if (res.code === 'OK') {
+    state.list = []
+    state.pageNo = 1
+    getList()
+  }
+}
 
-  if (taskList.value.length > 0)
-    handleSelect(taskList.value[0])
-})
+function switchTab(type: number) {
+  tab.value = type
+  state.list = []
+  state.pageNo = 1
+  getList()
+}
 
-async function handleSelect(item: any) {
-  selectTask.value = item
-  const taskId = item.id
-  taskDetailInfo.value = await getTaskDetailInfo(taskId, workStore.activeId)
+function goDetail(item) {
+  if (tab.value === 1)
+    clearMsgOne(item.id)
 
-  const { data, total } = await getTaskDetailPictureList(workStore.activeId, taskId, { ...taskpagination, ...sortBy })
-  taskDetailPictureList.value = data
-  totalCount.value = total
+  else
+    emit('goDetail', item.id)
 }
 
-function switchTab(type: number) {
-  tab.value = type
-  getList(type)
+async function clearMsgOne(id) {
+  const res = await readMsg({ msgid: id })
 }
 
-function goDetail(id) {
-  emit('goDetail', id)
+function getMore() {
+  state.pageNo += 1
+  getList()
 }
 </script>
 
@@ -103,7 +92,7 @@ function goDetail(id) {
       <div class="header-title">
         消息通知
       </div>
-      <div class="clear">
+      <div class="clear" @click="clearMsg">
         <img class="icon-clear" :src="iconClear" alt="">
         清除未读
       </div>
@@ -128,14 +117,14 @@ function goDetail(id) {
         </div>
       </div>
       <div class="list">
-        <div v-for="(item, index) in list" :key="item.id" :class="index === 0 ? 'pt0' : ''" class="item" @click="goDetail(item)">
+        <div v-for="(item, index) in list" :key="item.id" :class="{ 'pt0': index === 0, 'item-disabled': item.readFlag }" class="item" @click="goDetail(item)">
           <div class="left left">
             <div class="num">
-              {{ item.pictureno }}
-              <div class="point" />
+              {{ format(item.sendTime * 1000, 'dd') }}
+              <div v-if="!item.readFlag" class="point" />
             </div>
             <div class="date">
-              {{ item.createTime }}
+              {{ format(item.sendTime * 1000, 'yyyy-MM') }}
             </div>
           </div>
           <div class="middle">
@@ -152,13 +141,17 @@ function goDetail(id) {
             </div> -->
             <div class="subtitle">
               <span class="name">{{ item.userName }}</span>
-              <span class="time">{{ item.createTime }}</span>
+              <span class="time">{{ format(item.sendTime * 1000, 'yyyy-MM-dd HH:mm:ss') }}</span>
             </div>
           </div>
           <div class="look">
             查看
           </div>
         </div>
+
+        <div v-if="hasNextPage" class="more" @click="getMore">
+          查看更多<img class="icon-more" :src="iconArrowDown" alt="">
+        </div>
       </div>
     </div>
   </div>
@@ -173,6 +166,7 @@ function goDetail(id) {
   background: #FFF;
   border-radius: 3px;
   height: calc(100vh - 88px);
+  position: relative;
 
   .header{
     padding: 24px;
@@ -264,6 +258,31 @@ function goDetail(id) {
     .list{
       margin-left: 24px;
       flex: 1;
+      overflow-y: auto;
+      padding-bottom: 97px;
+      box-sizing: border-box;
+      height: calc(100vh - 88px - 76px);
+
+      .more{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-family: PingFang SC, PingFang SC-Regular;
+        text-align: left;
+        color: #666666;
+        position: absolute;
+        bottom: 40px;
+        left: 50%;
+        background: #fff;
+        cursor: pointer;
+
+        .icon-more{
+          width: 14px;
+          height: 14px;
+          margin-left: 6px;
+        }
+      }
 
       .item{
         display: flex;
@@ -272,6 +291,10 @@ function goDetail(id) {
         flex: 1;
         padding: 16px 0 16px 25px;
         border-bottom: 1px solid #eeeeee;
+
+        &-disabled{
+          opacity: 0.5;
+        }
       }
 
       .pt0{
diff --git a/src/views/message/index.vue b/src/views/message/index.vue
index 010a015..8b33a04 100644
--- a/src/views/message/index.vue
+++ b/src/views/message/index.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-import { onUnmounted, reactive, ref } from 'vue'
-
-import Aside from './aside/Aside.vue'
-import Content from './content/Content.vue'
+import { ref } from 'vue'
+import List from './content/List.vue'
 import Detail from './content/Detail.vue'
 
 const type = ref('1')
@@ -16,12 +14,8 @@ function goDetail(value) {
 
 <template>
   <div class="main">
-    <!-- 侧边 -->
-    <!-- <Aside /> -->
-
-    <!-- 内容 -->
-    <Content v-if="type === '1'" @go-detail="goDetail" />
-    <Detail v-else />
+    <List v-if="type === '1'" @go-detail="goDetail" />
+    <Detail v-else :id="id" />
   </div>
 </template>
 
diff --git a/src/views/message/modal/ConfrimModal.vue b/src/views/message/modal/ConfrimModal.vue
deleted file mode 100644
index 0873fc2..0000000
--- a/src/views/message/modal/ConfrimModal.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<script lang="ts" setup>
-import { computed, onBeforeMount, ref } from 'vue'
-import { useDictionary } from '@/store/modules/dictonary'
-
-const emit = defineEmits<{
-  (e: 'commit', id: any, desc: null | string)
-}>()
-
-const dictonaryStore = useDictionary()
-
-const show = ref(false)
-const cardStyle = {
-  'width': '520px',
-  '--n-padding-bottom': '10px',
-  '--n-padding-left': '0px',
-}
-
-function showModal() {
-  show.value = true
-}
-
-function closeModal() {
-  show.value = false
-}
-
-defineExpose({
-  showModal,
-})
-
-const options = ref<any[]>([])
-
-const selectId = ref(null)
-const otherValue = ref(null)
-const showOther = computed(() => {
-  for (const item of options.value) {
-    if (item.value === selectId.value && item.label === '其他')
-      return true
-  }
-
-  return false
-})
-
-async function handleSumbit(e: MouseEvent) {
-  e.preventDefault()
-  closeModal()
-  emit('commit', selectId.value, otherValue.value)
-}
-
-onBeforeMount(async () => {
-  const tfList = await dictonaryStore.fetchTFList()
-  options.value = tfList
-})
-</script>
-
-<template>
-  <n-modal v-model:show="show" transform-origin="center">
-    <n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
-      <div class="wrapper">
-        <div class="wrapper-header">
-          <span class="wrapper-left">选择判假原因</span>
-          <div class="wrapper-right">
-            <div class="wrapper-right-close" @pointerdown="closeModal">
-              <div class="wrapper-right-icon" />
-            </div>
-          </div>
-        </div>
-        <div class="wrapper-content">
-          <span>判假原因</span>
-          <n-select v-model:value="selectId" style="margin-top: 10px;" :options="options" />
-          <n-input v-show="showOther" v-model:value="otherValue" style="margin-top: 10px;" type="textarea" />
-        </div>
-      </div>
-      <template #footer>
-        <div class="wrapper-footer">
-          <n-button type="info" @click="handleSumbit">
-            确认
-          </n-button>
-          <n-button secondary style="margin-left:15px" @click="closeModal">
-            取消
-          </n-button>
-        </div>
-      </template>
-    </n-card>
-  </n-modal>
-</template>
-
-<style lang="less" scoped>
-.wrapper {
-  &-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-  }
-
-  &-left {
-    font-weight: bold;
-    font-size: 16px;
-  }
-
-  &-right {
-    &-close {
-      width: 18px;
-      height: 18px;
-      cursor: pointer;
-    }
-
-    &-icon {
-      background: #000;
-      display: inline-block;
-      width: 18px;
-      height: 1px;
-      transform: rotate(45deg);
-      -webkit-transform: rotate(45deg);
-      margin-bottom: 8px;
-
-      &:after {
-        content: '';
-        display: block;
-        width: 18px;
-        height: 1px;
-        background: #000;
-        transform: rotate(-90deg);
-        -webkit-transform: rotate(-90deg);
-      }
-    }
-  }
-
-  &-content {
-    padding: 18px 10px;
-  }
-
-  &-footer {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  &-info {
-    font-weight: bold;
-    position: relative;
-
-    &:before {
-      background-color: #1980ff;
-      content: '';
-      width: 5px;
-      border-radius: 2px;
-      top: 0;
-      bottom: 0;
-      position: absolute;
-    }
-  }
-}
-
-::v-deep(.n-card.n-card--content-segmented > .n-card__content:not(:first-child)) {
-  border: 0px;
-}
-
-::v-deep(.n-card > .n-card-header) {
-  --n-padding-top: 0px;
-  --n-padding-bottom: 12px;
-}
-
-::v-deep(.n-divider:not(.n-divider--vertical)) {
-  margin-top: 0px;
-  margin-bottom: 0px;
-}
-</style>
diff --git a/src/views/message/modal/CustomFieldModal.vue b/src/views/message/modal/CustomFieldModal.vue
deleted file mode 100644
index 523a6f2..0000000
--- a/src/views/message/modal/CustomFieldModal.vue
+++ /dev/null
@@ -1,384 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
-import { difference } from 'lodash-es'
-import { VueDraggable } from 'vue-draggable-plus'
-import { workPackageMap } from '@/config/workorder'
-
-// 左侧隐藏列表
-const offList = ref<any[]>([])
-// 右侧显示列表
-const onList = ref<any[]>([])
-
-const allCount = computed(() => {
-  return `全部筛选(共${offList.value.length - 1}个)`
-})
-
-const selectCount = computed(() => {
-  return `全部筛选(共${onList.value.length}个)`
-})
-
-function generatList() {
-  const keys = Object.keys(workPackageMap)
-  let showList: object[] = []
-  const hideList: object[] = []
-  const showStr = 'status'
-  const showKeys = showStr.split(',').map((key: string) => key.toLowerCase())
-
-  for (const key of keys) {
-    const name = workPackageMap[key]?.label
-    const isDefault = workPackageMap[key]?.isDefault
-
-    // 系统配置为Y且不是默认配置
-    if (!isDefault) {
-      hideList.push({
-        id: key,
-        name: name || '未配置',
-        fix: isDefault,
-        checked: workPackageMap[key].isDefault,
-      })
-    }
-  }
-
-  showList = showKeys.reduce((acc, key) => {
-    const config = {
-      id: key,
-      name: workPackageMap[key].label || '未配置',
-      fix: workPackageMap[key].isDefault,
-    }
-    return [...acc, config]
-  }, [])
-
-  const fixedList = generateDefaultList()
-
-  hideList.unshift(...fixedList)
-  showList.unshift(...fixedList)
-
-  onList.value = showList
-  offList.value = hideList
-  return { showList, hideList }
-}
-
-function generateDefaultList() {
-  return Object.keys(workPackageMap).reduce((acc, key) => {
-    const { label, isDefault } = workPackageMap[key]
-
-    if (isDefault) {
-      const config = {
-        id: key,
-        name: label || '未配置',
-        fix: true,
-        checked: true,
-      }
-      return [...acc, config]
-    }
-    else {
-      return acc
-    }
-  }, [])
-}
-
-const show = ref(false)
-const checkAll = ref(false)
-
-function showModal() {
-  show.value = true
-}
-
-function closeModal() {
-  show.value = false
-}
-
-async function handleSumbit(e: MouseEvent) {
-  e.preventDefault()
-  closeModal()
-}
-
-defineExpose({
-  showModal,
-})
-
-generatList()
-
-const selectIds = ref<string[]>([])
-
-function onCheckAllChange(value) {
-  const ids: string[] = []
-
-  for (const item of offList.value) {
-    if (!item.fix) {
-      item.checked = value
-      ids.push(item.id)
-    }
-  }
-
-  selectIds.value = value ? ids : []
-}
-
-function onCheckChange(checked: any, item: any) {
-  const index = selectIds.value.indexOf(item.id)
-
-  item.checked = checked
-
-  if (index === -1 && checked)
-    selectIds.value.push(item.id)
-  else
-    selectIds.value.splice(index, 1)
-}
-
-const showIds = computed(() => {
-  return onList.value.map((item) => {
-    return item.id
-  })
-})
-
-watch(
-  () => selectIds.value.length,
-  (newVal, oldVal) => {
-    if (newVal === oldVal)
-      return
-
-    const action = newVal > oldVal ? 'add' : 'remove'
-    const diff = action === 'add' ? difference(selectIds.value, showIds.value) : difference(showIds.value, selectIds.value)
-
-    if (diff.length === 0)
-      return
-
-    if (action === 'add') {
-      for (const item of offList.value) {
-        if (!item.fix && diff.includes(item.id)) {
-          onList.value.push({
-            id: item.id,
-            name: item.name || '未配置',
-            fix: item.fix || false,
-          })
-        }
-      }
-    }
-    else {
-      const list = onList.value
-      for (let index = 0; index < list.length; index++) {
-        const item = list[index]
-        if (!item.fix && diff.includes(item.id)) {
-          list.splice(index, 1)
-          index--
-        }
-      }
-    }
-  },
-)
-
-watch(
-  () => showIds.value.length,
-  (newVal, oldVal) => {
-    if (newVal === oldVal)
-      return
-
-    const diff = difference(selectIds.value, showIds.value)
-
-    if (diff.length === 0)
-      return
-
-    for (const item of offList.value) {
-      if (!item.fix && diff.includes(item.id)) {
-        const index = selectIds.value.indexOf(item.id)
-        item.checked = false
-        selectIds.value.splice(index, 1)
-      }
-    }
-  },
-)
-
-function clearDragSource() {
-  onList.value = onList.value.filter((item) => {
-    return item.fix === true
-  })
-}
-
-function removeHandler(id: string) {
-  const index = onList.value.findIndex((item) => {
-    return item.id === id
-  })
-
-  if (index !== -1)
-    onList.value.splice(index, 1)
-}
-</script>
-
-<template>
-  <n-modal v-model:show="show" transform-origin="center">
-    <n-card class="cardstyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
-      <div class="wrapper">
-        <span class="wrapper-title">自定义任务包字段</span>
-        <div class="wrapper-bar">
-          <div class="wrapper-info">
-            <span :style="{ 'margin-left': '18px' }">字段信息</span>
-          </div>
-        </div>
-        <n-grid cols="4" class="mt-4 proCard" responsive="screen" :x-gap="24">
-          <n-grid-item span="3">
-            <NCard
-              :title="allCount" class="dragcardStyle" :segmented="{ content: true, footer: true }" size="small"
-              :bordered="false"
-            >
-              <div>
-                <n-input placeholder="搜索关键字">
-                  <template #suffix>
-                    <SvgIcon size="14px" name="magnifying-1" />
-                  </template>
-                </n-input>
-                <div class="draggable-ul">
-                  <div class="draggable-li">
-                    <n-checkbox v-model:checked="checkAll" label="全部" @update:checked="onCheckAllChange" />
-                  </div>
-                  <div class="content">
-                    <div
-                      v-for="item in offList" :key="item.id" style="width: 170px;"
-                      :class="{ 'disable-check': item.fix }" class="draggable-li"
-                    >
-                      <n-checkbox
-                        v-model:checked="item.checked" :label="item.name" :disabled="item.fix"
-                        @update:checked="onCheckChange($event, item)"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </NCard>
-          </n-grid-item>
-          <n-grid-item>
-            <NCard
-              :title="selectCount" class="dragcardStyle" :segmented="{ content: true, footer: true }" size="small"
-              :bordered="false"
-            >
-              <template #header-extra>
-                <span class="textbtnStyle" @click="clearDragSource">清空</span>
-              </template>
-              <div>
-                <n-input placeholder="搜索关键字">
-                  <template #suffix>
-                    <SvgIcon size="14px" name="magnifying-1" />
-                  </template>
-                </n-input>
-                <VueDraggable v-model="onList" class="draggable-ul" :animation="150" group="shared">
-                  <div
-                    v-for="item in onList" :key="item.id" :class="{ fix: item.fix }"
-                    class="cursor-move draggable-item"
-                  >
-                    <span class="ml-2">{{ item.name }}</span>
-                    <SvgIcon
-                      v-if="!item.fix" size="16px" style="display: block; margin-left: auto; cursor: pointer"
-                      name="clear" @click="removeHandler(item.id)"
-                    />
-                  </div>
-                </VueDraggable>
-              </div>
-            </NCard>
-          </n-grid-item>
-        </n-grid>
-      </div>
-      <template #footer>
-        <div class="wrapper-footer">
-          <n-button type="info" @click="handleSumbit">
-            确认
-          </n-button>
-          <n-button secondary style="margin-left:15px" @click="closeModal">
-            取消
-          </n-button>
-        </div>
-      </template>
-    </n-card>
-  </n-modal>
-</template>
-
-<style lang="less" scoped>
-.wrapper {
-  display: flex;
-  flex-direction: column;
-
-  &-title {
-    font-weight: bold;
-    font-size: 16px;
-  }
-
-  &-bar {
-    background-color: #e8e8e8;
-    width: 100%;
-    margin-top: 20px;
-  }
-
-  &-footer {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  &-info {
-    font-weight: bold;
-    position: relative;
-
-    &:before {
-      background-color: #1980ff;
-      content: '';
-      width: 5px;
-      border-radius: 2px;
-      top: 0;
-      bottom: 0;
-      position: absolute;
-    }
-  }
-}
-
-.dragcardStyle {
-  --n-padding-bottom: 0px !important;
-  --n-padding-left: 0px !important;
-}
-
-.cardstyle {
-  width: 820px;
-  --n-padding-bottom: 20px;
-  --n-padding-left: 24px;
-}
-
-.textbtnStyle {
-  cursor: pointer;
-  color: #1980ff;
-}
-
-.draggable-ul {
-  width: 100%;
-  overflow: hidden;
-  border: 1px solid #cad2dd;
-  border-top: 0px;
-  border-radius: 2px;
-  display: block;
-
-  .content {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .draggable-li {
-    padding: 10px 16px;
-    color: #333;
-  }
-
-  .draggable-item {
-    padding: 10px 16px;
-    color: #333;
-    display: flex;
-    align-items: center;
-  }
-
-  .disable-check {
-    color: gainsboro;
-  }
-}
-
-::v-deep(.n-card.n-card--content-segmented > .n-card__content:not(:first-child)) {
-  border: 0px;
-}
-
-::v-deep(.n-card > .n-card-header) {
-  --n-padding-top: 0px;
-  --n-padding-bottom: 12px;
-}
-</style>