diff --git a/web/src/App.vue b/web/src/App.vue index 8349037d..3c11c3a8 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -41,6 +41,8 @@ html, body { font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; + + --primary-color: #21aa93 } .el-overlay-dialog { diff --git a/web/src/assets/css/chat-app.styl b/web/src/assets/css/chat-app.styl index 2cd29006..55deed14 100644 --- a/web/src/assets/css/chat-app.styl +++ b/web/src/assets/css/chat-app.styl @@ -2,15 +2,6 @@ background-color: #282c34; height 100% - .title { - text-align center - background-color #25272d - font-size 24px - color #ffffff - padding 10px - border-bottom 1px solid #3c3c3c - } - .inner { display flex color #ffffff @@ -19,51 +10,71 @@ overflow-x hidden .list-box { - .app-item { - border 1px solid #666666 - border-radius 6px - overflow hidden - transition: all 0.3s ease; /* 添加过渡效果 */ + .item { + display flex + flex-flow row + border 1px solid #3c3c3c + padding 10px - .el-image { - padding 6px - - .el-image__inner { - border-radius 10px - } + .image { + width 80px + height 80px + min-width 80px + border-radius 5px + overflow hidden } - .title { + .inner { display flex - padding 10px + flex-flow column + padding 0 0 0 10px + width 100% - .name { - width 100% + .info { text-align left - font-size 16px - font-weight bold - color #47fff1 + + .info-title { + color var(--el-text-color) + font-size 1.25rem + line-height 1.75rem + letter-spacing: .025em; + font-weight: 600; + word-break: break-all; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + } + + .info-text { + padding 8px 0 + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + word-break: break-all; + height 34px + font-size: .875rem; + color #999999 + } } - .opt { - position: relative; - width 100% - top -5px + .btn { + margin-top 10px + display flex + justify-content right + + .el-button { + margin-left 10px + + .el-icon { + margin-right 5px + } + } } } - - .hello-msg { - height 60px - padding 10px - font-size 14px - color #999999 - } - - &:hover { - box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */ - transform: translateY(-10px); /* 向上移动10像素 */ - } } + } } diff --git a/web/src/assets/css/home.styl b/web/src/assets/css/home.styl index 0a018512..950182c0 100644 --- a/web/src/assets/css/home.styl +++ b/web/src/assets/css/home.styl @@ -140,6 +140,7 @@ .content { width: 100% + overflow auto box-sizing: border-box background-color #282c34 } diff --git a/web/src/assets/css/member.styl b/web/src/assets/css/member.styl index 77180851..7147db4a 100644 --- a/web/src/assets/css/member.styl +++ b/web/src/assets/css/member.styl @@ -65,9 +65,12 @@ padding 15px 0 15px 15px; overflow-x hidden overflow-y visible + display flex + flex-flow row .user-profile { padding 10px 20px 20px 20px + width 300px background-color #393F4A color #ffffff border-radius 10px @@ -91,12 +94,15 @@ .product-box { + padding 0 20px + width 100% + .info { .el-alert__description { font-size 14px !important margin 0 } - padding 10px 20px 20px 0 + padding 0 0 20px 0 } .list-box { diff --git a/web/src/components/ItemList.vue b/web/src/components/ItemList.vue index 3e52f3d1..844d4083 100644 --- a/web/src/components/ItemList.vue +++ b/web/src/components/ItemList.vue @@ -1,19 +1,10 @@ @@ -29,7 +20,7 @@ const props = defineProps({ }, gap: { type: Number, - default: 12 + default: 10 }, width: { type: Number, @@ -37,45 +28,35 @@ const props = defineProps({ } }); -const container = ref(null) -const itemWidth = ref(props.width) +const containerRef = ref(null) +const span = ref(12) onMounted(() => { - computeSize() + calcSpan() }) -const computeSize = () => { - const w = container.value.offsetWidth - 10 // 减去滚动条的宽度 - let cols = Math.floor(w / props.width) - itemWidth.value = Math.floor(w / cols) -} - -window.onresize = () => { - computeSize() +const calcSpan = () => { + let cols = Math.floor(containerRef.value.offsetWidth / props.width) + if (cols >= 12) { + span.value = 1 + return + } + console.log(cols) + while (cols > 1) { + if (24 % cols === 0) { + span.value = 24 / cols + return + } + cols -= 1 + } + span.value = 12 } +window.onresize = () => calcSpan() \ No newline at end of file diff --git a/web/src/views/ChatApps.vue b/web/src/views/ChatApps.vue index fc7c7c93..360742b6 100644 --- a/web/src/views/ChatApps.vue +++ b/web/src/views/ChatApps.vue @@ -2,15 +2,21 @@
- +
- -
-
@@ -39,18 +64,18 @@ import {onMounted, ref} from "vue" import {ElMessage} from "element-plus"; import {httpGet, httpPost} from "@/utils/http"; -import ItemList from "@/components/ItemList.vue"; -import {Plus} from "@element-plus/icons-vue"; -import LoginDialog from "@/components/LoginDialog.vue"; import {checkSession} from "@/action/session"; import {arrayContains, removeArrayItem, substr} from "@/utils/libs"; import {useRouter} from "vue-router"; +import {useSharedStore} from "@/store/sharedata"; +import ItemList from "@/components/ItemList.vue"; +import {Plus} from "@element-plus/icons-vue"; -const listBoxHeight = window.innerHeight - 147 +const listBoxHeight = window.innerHeight - 87 const list = ref([]) -const showLoginDialog = ref(false) const roles = ref([]) -const elements = ref(null) +const store = useSharedStore(); + onMounted(() => { httpGet("/api/role/list?all=true").then((res) => { const items = res.data @@ -67,7 +92,6 @@ onMounted(() => { }) const getRoles = () => { - showLoginDialog.value = false checkSession().then(user => { roles.value = user.chat_roles }).catch(() => { @@ -98,7 +122,7 @@ const updateRole = (row, opt) => { ElMessage.error(title.value + "失败：" + e.message) }) }).catch(() => { - showLoginDialog.value = true + store.setShowLoginDialog(true) }) } diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue index 9e7bf80b..61545fa7 100644 --- a/web/src/views/ChatPlus.vue +++ b/web/src/views/ChatPlus.vue @@ -99,7 +99,7 @@ @@ -233,16 +232,16 @@ import {httpGet, httpPost} from "@/utils/http"; import {ElMessage, ElMessageBox, ElNotification} from "element-plus"; import Clipboard from "clipboard"; import {checkSession} from "@/action/session"; -import LoginDialog from "@/components/LoginDialog.vue"; +import {useSharedStore} from "@/store/sharedata"; const listBoxHeight = ref(0) const paramBoxHeight = ref(0) -const showLoginDialog = ref(false) const isLogin = ref(false) const loading = ref(true) -const colWidth = ref(240) +const colWidth = ref(220) const isOver = ref(false) const previewURL = ref("") +const store = useSharedStore(); const resizeElement = function () { listBoxHeight.value = window.innerHeight - 90 @@ -438,7 +437,7 @@ const generate = () => { } if (!isLogin.value) { - showLoginDialog.value = true + store.setShowLoginDialog(true) return } httpPost("/api/dall/image", params.value).then(() => { diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue index e9cac3cb..4f73d940 100644 --- a/web/src/views/Home.vue +++ b/web/src/views/Home.vue @@ -14,7 +14,7 @@ @@ -24,7 +24,7 @@ @@ -68,7 +68,7 @@
- 登录 + 登录 注册
@@ -113,7 +113,7 @@ -
+
@@ -220,5 +220,6 @@ const loginCallback = () => { diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue index b29d087e..453db3ca 100644 --- a/web/src/views/ImageMj.vue +++ b/web/src/views/ImageMj.vue @@ -600,8 +600,6 @@
- -
@@ -616,14 +614,14 @@ import {checkSession} from "@/action/session"; import {useRouter} from "vue-router"; import {getSessionId} from "@/store/session"; import {copyObj, removeArrayItem} from "@/utils/libs"; -import LoginDialog from "@/components/LoginDialog.vue"; +import {useSharedStore} from "@/store/sharedata"; const listBoxHeight = ref(0) const paramBoxHeight = ref(0) -const showLoginDialog = ref(false) const loading = ref(true) -const colWidth = ref(240) +const colWidth = ref(220) const previewURL = ref("") +const store = useSharedStore(); const resizeElement = function () { listBoxHeight.value = window.innerHeight - 80 @@ -903,7 +901,7 @@ const beforeUpload = (key) => { // 图片上传 const uploadImg = (file) => { if (!isLogin.value) { - showLoginDialog.value = true + store.setShowLoginDialog(true) return } @@ -936,7 +934,7 @@ const uploadImg = (file) => { const promptRef = ref(null) const generate = () => { if (!isLogin.value) { - showLoginDialog.value = true + store.setShowLoginDialog(true) return } diff --git a/web/src/views/ImageSd.vue b/web/src/views/ImageSd.vue index 86b274d6..a65486e5 100644 --- a/web/src/views/ImageSd.vue +++ b/web/src/views/ImageSd.vue @@ -497,8 +497,6 @@ - - @@ -511,17 +509,17 @@ import Clipboard from "clipboard"; import {checkSession} from "@/action/session"; import {useRouter} from "vue-router"; import {getSessionId} from "@/store/session"; -import LoginDialog from "@/components/LoginDialog.vue"; +import {useSharedStore} from "@/store/sharedata"; const listBoxHeight = ref(0) const paramBoxHeight = ref(0) const fullImgHeight = ref(window.innerHeight - 60) const showTaskDialog = ref(false) const item = ref({}) -const showLoginDialog = ref(false) const isLogin = ref(false) const loading = ref(true) -const colWidth = ref(240) +const colWidth = ref(220) +const store = useSharedStore(); const resizeElement = function () { listBoxHeight.value = window.innerHeight - 80 @@ -730,7 +728,7 @@ const generate = () => { } if (!isLogin.value) { - showLoginDialog.value = true + store.setShowLoginDialog(true) return } diff --git a/web/src/views/ImagesWall.vue b/web/src/views/ImagesWall.vue index 318bf189..4a136b3f 100644 --- a/web/src/views/ImagesWall.vue +++ b/web/src/views/ImagesWall.vue @@ -311,7 +311,7 @@ const loading = ref(true) const isOver = ref(false) const imgType = ref("mj") // 图片类别 const listBoxHeight = window.innerHeight - 124 -const colWidth = ref(240) +const colWidth = ref(220) const fullImgHeight = ref(window.innerHeight - 60) const showTaskDialog = ref(false) const item = ref({}) diff --git a/web/src/views/Invitation.vue b/web/src/views/Invitation.vue index 1e95c218..13542e40 100644 --- a/web/src/views/Invitation.vue +++ b/web/src/views/Invitation.vue @@ -84,8 +84,6 @@ - - @@ -97,17 +95,17 @@ import {ElMessage} from "element-plus"; import Clipboard from "clipboard"; import InviteList from "@/components/InviteList.vue"; import {checkSession} from "@/action/session"; -import LoginDialog from "@/components/LoginDialog.vue"; +import {useSharedStore} from "@/store/sharedata"; const inviteURL = ref("") -const qrImg = ref("") +const qrImg = ref("/images/wx.png") const inviteChatCalls = ref(0) const inviteImgCalls = ref(0) const hits = ref(0) const regNum = ref(0) const rate = ref(0) const isLogin = ref(false) -const showLoginDialog = ref(false) +const store = useSharedStore() onMounted(() => { initData() @@ -152,7 +150,7 @@ const initData = () => { ElMessage.error("获取系统配置失败：" + e.message) }) }).catch(() => { - showLoginDialog.value = true + store.setShowLoginDialog(true) }); } diff --git a/web/src/views/MarkMap.vue b/web/src/views/MarkMap.vue index c9877666..044d5cc5 100644 --- a/web/src/views/MarkMap.vue +++ b/web/src/views/MarkMap.vue @@ -90,13 +90,10 @@ - -