From b5ccba9899700ab540ff6d64bf62d02f1b96de69 Mon Sep 17 00:00:00 2001 From: Phoenix <64720302+Concur-max@users.noreply.github.com> Date: Fri, 16 May 2025 19:49:57 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=BB=84=E4=BB=B6=E5=A3=B0?= =?UTF-8?q?=E6=98=8E=EF=BC=8C=E6=96=B0=E5=A2=9EHighLightText=E3=80=81NDraw?= =?UTF-8?q?er=E3=80=81NDrawerContent=E3=80=81SearchItem=E5=92=8CSearchList?= =?UTF-8?q?=E6=94=AF=E6=8C=81=EF=BC=9B=E8=B0=83=E6=95=B4ContactModal.vue?= =?UTF-8?q?=E4=B8=AD=E7=9A=84=E7=8A=B6=E6=80=81=E7=AE=A1=E7=90=86=EF=BC=8C?= =?UTF-8?q?=E4=BC=98=E5=8C=96MultiSelectFooter.vue=E4=B8=AD=E7=9A=84?= =?UTF-8?q?=E8=81=94=E7=B3=BB=E4=BA=BA=E9=80=89=E6=8B=A9=E9=80=BB=E8=BE=91?= =?UTF-8?q?=E5=92=8C=E6=A0=B7=E5=BC=8F=EF=BC=9B=E5=9C=A8main.ts=E4=B8=AD?= =?UTF-8?q?=E5=BC=95=E5=85=A5naive-ui=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=EF=BC=9B=E4=BF=AE=E5=A4=8Dauth.js=E4=B8=AD=E7=9A=84token?= =?UTF-8?q?=E8=8E=B7=E5=8F=96=E9=80=BB=E8=BE=91=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 5 ++ src/assets/css/naive-ui-adjust.less | 65 +++++++++++++++++++ src/components/user/ContactModal.vue | 2 +- src/main.ts | 1 + src/utils/auth.js | 2 +- src/views/message/inner/IndexSider.vue | 4 +- .../message/inner/panel/MultiSelectFooter.vue | 29 ++++++++- 7 files changed, 103 insertions(+), 5 deletions(-) create mode 100644 src/assets/css/naive-ui-adjust.less diff --git a/components.d.ts b/components.d.ts index f68af7f..b81549b 100644 --- a/components.d.ts +++ b/components.d.ts @@ -33,6 +33,7 @@ declare module 'vue' { GroupNotice: typeof import('./src/components/group/GroupNotice.vue')['default'] GroupNoticeMessage: typeof import('./src/components/talk/message/GroupNoticeMessage.vue')['default'] GroupPanel: typeof import('./src/components/group/GroupPanel.vue')['default'] + HighLightText: typeof import('./src/components/search/highLightText.vue')['default'] HistoryRecord: typeof import('./src/components/talk/HistoryRecord.vue')['default'] ImageMessage: typeof import('./src/components/talk/message/ImageMessage.vue')['default'] LinkMessage: typeof import('./src/components/talk/message/LinkMessage.vue')['default'] @@ -51,6 +52,8 @@ declare module 'vue' { NAvatar: typeof import('naive-ui')['NAvatar'] NButton: typeof import('naive-ui')['NButton'] NCheckbox: typeof import('naive-ui')['NCheckbox'] + NDrawer: typeof import('naive-ui')['NDrawer'] + NDrawerContent: typeof import('naive-ui')['NDrawerContent'] NEmpty: typeof import('naive-ui')['NEmpty'] NIcon: typeof import('naive-ui')['NIcon'] NImage: typeof import('naive-ui')['NImage'] @@ -65,6 +68,8 @@ declare module 'vue' { RevokeMessage: typeof import('./src/components/talk/message/RevokeMessage.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] + SearchItem: typeof import('./src/components/search/searchItem.vue')['default'] + SearchList: typeof import('./src/components/search/searchList.vue')['default'] SysGroupAdminMessage: typeof import('./src/components/talk/message/system/SysGroupAdminMessage.vue')['default'] SysGroupCancelMutedMessage: typeof import('./src/components/talk/message/system/SysGroupCancelMutedMessage.vue')['default'] SysGroupCreateMessage: typeof import('./src/components/talk/message/system/SysGroupCreateMessage.vue')['default'] diff --git a/src/assets/css/naive-ui-adjust.less b/src/assets/css/naive-ui-adjust.less new file mode 100644 index 0000000..6a7276b --- /dev/null +++ b/src/assets/css/naive-ui-adjust.less @@ -0,0 +1,65 @@ +/* naive ui 部分样式调整*/ +/*表格排序图标颜色问题 */ +.n-data-table-sorter{ + color: #fff!important; +} + +/*表格头多选框颜色调整避免和表头颜色冲突*/ +.n-data-table-thead .n-data-table-tr .n-checkbox-box{ +background: #fff; + .n-checkbox-icon{ + .check-icon{ + fill:#462AA0 ; + } + svg{ + fill:#462AA0 ; + } + } + .n-checkbox-box__border{ + border: #fff!important; + } +} +/*弹窗内表格背景颜色调整*/ +.n-data-table .n-data-table-th { + background-color: #462AA0; +} +/* +naive ui 消息提示框 样式调整 +*/ +.n-message-wrapper{ + .n-message{ + &.n-message--info-type{ + border: 1px solid #C7DFFB; + background-color: #EDF5FE; + } + &.n-message--warning-type{ + border: 1px solid #FAE0B5; + background-color: #FEF7ED; + } + &.n-message--error-type{ + border: 1px solid #F3CBD3; + background-color:#FBEEF1; + } + &.n-message--success-type{ + border: 1px solid #C5E7D5; + background-color:#EDF7F2; + } + &.n-message--loading-type{ + border: 1px solid #B2A6D6; + background-color:#EDF7F2; + } + } +} +/* +n-image 图片放大查看器工具栏样式调整 样式污染问题 +*/ +.n-base-icon{ + box-sizing: initial!important; +} +/*表格排序列背景颜色问题*/ +.n-data-table .n-data-table-th.n-data-table-th--sortable{ + background-color: #462AA0; +} +.n-data-table .n-data-table-th.n-data-table-th--sortable:hover{ + background-color: #462AA0; +} diff --git a/src/components/user/ContactModal.vue b/src/components/user/ContactModal.vue index 0729140..5da1412 100644 --- a/src/components/user/ContactModal.vue +++ b/src/components/user/ContactModal.vue @@ -15,7 +15,7 @@ interface Item { keyword: string } -const isShowBox = ref(true) +const isShowBox = defineModel('show') const loading = ref(true) const items = ref([]) const keywords = ref('') diff --git a/src/main.ts b/src/main.ts index b28777b..f5a5dd5 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,7 @@ import '@/assets/css/define/theme.less' import '@/assets/css/define/global.less' import '@/assets/css/dropsize.less' +import '@/assets/css/naive-ui-adjust.less' import 'uno.css' import { createApp } from 'vue' import router from './router' diff --git a/src/utils/auth.js b/src/utils/auth.js index bbc6a56..7496763 100644 --- a/src/utils/auth.js +++ b/src/utils/auth.js @@ -18,7 +18,7 @@ export function isLoggedIn() { */ export function getAccessToken() { // return storage.get(AccessToken) || '' - return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b8987a3f4c77465504ba46f90370546f2f3656c248bd63549a43410178becfd0d1888ecbb8e82d291e68cf9da8ec1096e2d8abd4bb9d7edc62d38469e56226683693764f82df03eaa47fe6fd21a9cb83e0e' + return JSON.parse(localStorage.getItem('token'))||'46d71a72d8d845ad7ed23eba9bdde260e635407190c2ce1bf7fd22088e41682ea07773ec65cae8946d2003f264d55961f96e0fc5da10eb96d3a348c1664e9644ce2108c311309f398ae8ea1b8200bfd490e5cb6e8c52c9e5d493cbabb163368f8351420451a631dbfa749829ee4cda49b77b5ed2d3dced5d0f2b7dd9ee76ba5465c84a17c23af040cd92b6b2a4ea48befbb5c729dcdad0a9c9668befe84074cc24f78899c1d947f8e7f94c7eda5325b8ed698df729e76febb98549ef3482ae942fb4f4a1c92d21836fa784728f0c5483aab2760a991b6b36e6b10c84f840a6433a6ecc31dee36e8f1c6158818bc89d22851b5e2f6cbf01ab4b3da6e3d06b57c8f750e106226a5a4b9d7fc1d381a54cb92375c09ba1fa8e5fde0392d919c2f2cbcc7e4e2eca8d9860749af00374b249f7d04e2bc43a1fa4e7d7384dde0212f0a5' } /** diff --git a/src/views/message/inner/IndexSider.vue b/src/views/message/inner/IndexSider.vue index c51cca9..fc0f47b 100644 --- a/src/views/message/inner/IndexSider.vue +++ b/src/views/message/inner/IndexSider.vue @@ -486,7 +486,7 @@ const handleGroupChatListPaginationSize = (value) => { -
+
{ { height: 72px; background-color: var(--im-active-bg-color); border-radius: 50%; + transition: all 0.3s ease; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + + img { + transition: filter 0.3s ease; + } &:hover { background-color: #ff5722; color: #fff; + transform: translateY(-5px) scale(1.05); + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); + + img { + filter: brightness(1.2) contrast(0.9); + } } } @@ -154,6 +166,21 @@ const onContactModal = (data: { id: number; type: number }[]) => { line-height: 30px; font-size: 12px; text-align: center; + transition: all 0.3s ease; + } + + + } + } + + .pointer { + img { + transition: all 0.5s ease; + + &:hover { + filter: brightness(0.8) drop-shadow(0 0 2px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.2)); + + } } }