diff --git a/component/item-bottom/item-bottom.js b/component/item-bottom/item-bottom.js index 50476e2..6a62ece 100644 --- a/component/item-bottom/item-bottom.js +++ b/component/item-bottom/item-bottom.js @@ -1,7 +1,9 @@ // my-component.js // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） const { defineComponent, ref, inject } = Vue; -import { like } from "../like/like.js"; + +const { like } = await import(withVer("../like/like.js")); + // 定义组件（直接使用模板） export const itemBottom = defineComponent({ name: "item-bottom", diff --git a/component/item-forum/item-forum.js b/component/item-forum/item-forum.js index 60a8b48..7cbdad4 100644 --- a/component/item-forum/item-forum.js +++ b/component/item-forum/item-forum.js @@ -1,8 +1,9 @@ // my-component.js // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） const { defineComponent, ref } = Vue; -import { itemBottom } from "../item-bottom/item-bottom.js"; -import { itemHead } from "../item-head/item-head.js"; + +const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js")); +const { itemHead } = await import(withVer("../item-head/item-head.js")); // 定义组件（直接使用模板） export const itemForum = defineComponent({ diff --git a/component/item-head/item-head.js b/component/item-head/item-head.js index b6d52c5..c92a109 100644 --- a/component/item-head/item-head.js +++ b/component/item-head/item-head.js @@ -1,7 +1,8 @@ // my-component.js // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） const { defineComponent, ref, provide, onMounted, inject } = Vue; -import { report } from "../report/report.js"; + +const { report } = await import(withVer("../report/report.js")); // 定义组件（直接使用模板） export const itemHead = defineComponent({ diff --git a/component/item-mj/item-mj.js b/component/item-mj/item-mj.js index ec7e0c5..9641d6c 100644 --- a/component/item-mj/item-mj.js +++ b/component/item-mj/item-mj.js @@ -1,8 +1,9 @@ // my-component.js // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） const { defineComponent, ref } = Vue; -import { itemBottom } from "../item-bottom/item-bottom.js"; -import { itemHead } from "../item-head/item-head.js"; + +const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js")); +const { itemHead } = await import(withVer("../item-head/item-head.js")); // 定义组件（直接使用模板） export const itemMj = defineComponent({ diff --git a/component/item-offer/item-offer.js b/component/item-offer/item-offer.js index 83564ee..eb9c9e2 100644 --- a/component/item-offer/item-offer.js +++ b/component/item-offer/item-offer.js @@ -1,8 +1,9 @@ // my-component.js // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） const { defineComponent, ref, provide } = Vue; -import { itemBottom } from "../item-bottom/item-bottom.js"; -import { itemHead } from "../item-head/item-head.js"; + +const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js")); +const { itemHead } = await import(withVer("../item-head/item-head.js")); // 定义组件（直接使用模板） export const itemOffer = defineComponent({ diff --git a/component/item-summary/item-summary.js b/component/item-summary/item-summary.js index 24a49f3..b00601c 100644 --- a/component/item-summary/item-summary.js +++ b/component/item-summary/item-summary.js @@ -1,8 +1,9 @@ // my-component.js // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） const { defineComponent, ref } = Vue; -import { itemBottom } from "../item-bottom/item-bottom.js"; -import { itemHead } from "../item-head/item-head.js"; + +const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js")); +const { itemHead } = await import(withVer("../item-head/item-head.js")); // 定义组件（直接使用模板） export const itemSummary = defineComponent({ diff --git a/component/item-tenement/item-tenement.js b/component/item-tenement/item-tenement.js index 041e206..5bc0fc9 100644 --- a/component/item-tenement/item-tenement.js +++ b/component/item-tenement/item-tenement.js @@ -1,8 +1,9 @@ // my-component.js // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） const { defineComponent, ref } = Vue; -import { itemBottom } from "../item-bottom/item-bottom.js"; -import { itemHead } from "../item-head/item-head.js"; + +const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js")); +const { itemHead } = await import(withVer("../item-head/item-head.js")); // 定义组件（直接使用模板） export const itemTenement = defineComponent({ diff --git a/component/item-vote/item-vote.js b/component/item-vote/item-vote.js index ced9927..d7af95c 100644 --- a/component/item-vote/item-vote.js +++ b/component/item-vote/item-vote.js @@ -1,8 +1,9 @@ // my-component.js // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） const { defineComponent, ref } = Vue; -import { itemBottom } from "../item-bottom/item-bottom.js"; -import { itemHead } from "../item-head/item-head.js"; + +const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js")); +const { itemHead } = await import(withVer("../item-head/item-head.js")); // 定义组件（直接使用模板） export const itemVote = defineComponent({ diff --git a/component/latest-list/latest-list.js b/component/latest-list/latest-list.js index 79c1a7f..56a79d3 100644 --- a/component/latest-list/latest-list.js +++ b/component/latest-list/latest-list.js @@ -1,8 +1,9 @@ // my-component.js // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） const { defineComponent, ref, onMounted, nextTick } = Vue; -import { itemBottom } from "../item-bottom/item-bottom.js"; -import { itemHead } from "../item-head/item-head.js"; + +const { itemBottom } = await import(withVer("../item-bottom/item-bottom.js")); +const { itemHead } = await import(withVer("../item-head/item-head.js")); // 定义组件（直接使用模板） export const latestList = defineComponent({ diff --git a/component/slideshow-box/slideshow-box.js b/component/slideshow-box/slideshow-box.js index 3b1c0c1..c8d50b9 100644 --- a/component/slideshow-box/slideshow-box.js +++ b/component/slideshow-box/slideshow-box.js @@ -77,7 +77,14 @@ export const slideshowBox = defineComponent({ tabPitch.value = key; }; - return { tabItem, tabPitch, tabPitch, latestList }; + const handleCheckAttest = (e) => { + if (realname.value === 0 && userInfoWin.value?.uin > 0) { + openAttest(); + e.preventDefault(); // 阻止默认跳转（即使 href 为链接，也强制拦截） + } + }; + + return { handleCheckAttest, tabItem, tabPitch, tabPitch, latestList }; }, template: `
Offer
投票
面经
{{ item.data.schoolname }}
{{ item.data.professional }}
{{ item.data.degree }} | {{ item.data.semester }} | {{ item.data.apply_results_text }}
more
{{ item.title }}
{{ item.content }}
more
{{ item.data.schoolname }}
{{ item.data.project }}
{{ item.title || item.content }}
more
`, diff --git a/css/details.css b/css/details.css index 90894a9..96abd2d 100644 --- a/css/details.css +++ b/css/details.css @@ -761,6 +761,15 @@ font-size: 22px; padding: 8px; } +.answer-discuss .input-box .bottom .operate .item .emoji-box.top { + top: inherit; + bottom: 36px; +} +.answer-discuss .input-box .bottom .operate .item .emoji-box.top::after { + bottom: -8px; + top: inherit; + transform: translateX(-50%) rotate(180deg); +} .answer-discuss .input-box .bottom .operate .item .emoji-box::after { content: ""; width: 0; diff --git a/css/details.less b/css/details.less index 21c37e8..b634c27 100644 --- a/css/details.less +++ b/css/details.less @@ -878,16 +878,17 @@ cursor: pointer; } +.answer-discuss .input-box .bottom .operate .item { +} + .answer-discuss .input-box .bottom .operate .item .emoji-box { width: 582px; border-radius: 8px; background-color: #fff; filter: drop-shadow(0 0 11px rgba(0, 0, 0, 0.1)); - // top: 45px; top: 36px; position: absolute; z-index: 1; - // left: -14px; left: 50%; transform: translateX(-50%); border: 1px solid #ebebeb; @@ -895,20 +896,30 @@ flex-wrap: wrap; font-size: 22px; padding: 8px; -} -.answer-discuss .input-box .bottom .operate .item .emoji-box::after { - content: ""; - width: 0; - height: 0; - border-left: 8px solid transparent; - border-right: 8px solid transparent; - border-bottom: 8px solid #ffffff; - position: absolute; - top: -8px; - // left: 15px; - left: 50%; - transform: translateX(-50%); + &.top { + top: inherit; + bottom: 36px; + + &::after { + bottom: -8px; + top: inherit; + transform: translateX(-50%) rotate(180deg); + } + } + + &::after { + content: ""; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-bottom: 8px solid #ffffff; + position: absolute; + top: -8px; + left: 50%; + transform: translateX(-50%); + } } .answer-discuss .input-box .bottom .operate .item .emoji-box .emoji-icon { diff --git a/css/edit.css b/css/edit.css index 7838ad0..7b41f19 100644 --- a/css/edit.css +++ b/css/edit.css @@ -73,18 +73,44 @@ color: #555; font-size: 14px; } -#edit .edit-container .editor-toolbar { +#edit .edit-container #editor—wrapper { + z-index: 100; +} +#edit .edit-container #editor—wrapper .bold { + font-weight: bold; +} +#edit .edit-container #editor—wrapper .editor-toolbar { height: 36px; + line-height: 36px; background-color: #fbfbfb; padding-left: 25px; position: sticky; top: 0; z-index: 10; } -#edit .edit-container .editor-toolbar .toolbar-item { +#edit .edit-container #editor—wrapper .editor-toolbar .w-e-panel-content-emotion { + width: 490px; +} +#edit .edit-container #editor—wrapper .editor-toolbar .w-e-bar-item-group .w-e-bar-item-menus-container { + margin-top: 30px; +} +#edit .edit-container #editor—wrapper .editor-toolbar > .w-e-bar { + background-color: transparent; +} +#edit .edit-container #editor—wrapper .editor-toolbar .w-e-toolbar { + padding: 0; +} +#edit .edit-container #editor—wrapper .editor-toolbar .w-e-toolbar > .w-e-bar-item { + margin-right: 40px; +} +#edit .edit-container #editor—wrapper .editor-toolbar .w-e-toolbar > .w-e-bar-item > button { + color: #000000; + padding: 0 10px; +} +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item { cursor: pointer; - height: 30px; - line-height: 30px; + height: 30px !important; + line-height: 30px !important; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; @@ -93,15 +119,21 @@ line-height: 23px; margin-right: 40px; position: relative; - padding: 0 10px; - border-radius: 50px; + padding: 0; } -#edit .edit-container .editor-toolbar .toolbar-item .icon { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item .icon { width: 16px; height: 16px; margin-right: 5px; } -#edit .edit-container .editor-toolbar .toolbar-item .file { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item > button { + padding: 0 10px; + border-radius: 50px; +} +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item > button.active { + background-color: #f6f6bd; +} +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item .file { opacity: 0; /* 隐藏输入框 */ background: transparent; @@ -113,7 +145,7 @@ height: 100%; cursor: pointer; } -#edit .edit-container .editor-toolbar .toolbar-item .file::after { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item .file::after { content: ""; width: 100%; height: 100%; @@ -121,14 +153,14 @@ top: 0; left: 0; } -#edit .edit-container .editor-toolbar .toolbar-item.expression.pitch .emoji-box-mask { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item.expression.pitch .emoji-box-mask { display: block; } -#edit .edit-container .editor-toolbar .toolbar-item.expression.pitch .emoji-box { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item.expression.pitch .emoji-box { display: flex; } -#edit .edit-container .editor-toolbar .toolbar-item .link-box-mask, -#edit .edit-container .editor-toolbar .toolbar-item .emoji-box-mask { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item .link-box-mask, +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item .emoji-box-mask { position: fixed; top: 0; left: 0; @@ -137,10 +169,10 @@ z-index: 1; display: none; } -#edit .edit-container .editor-toolbar .toolbar-item .link-box-mask { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item .link-box-mask { background: transparent; } -#edit .edit-container .editor-toolbar .toolbar-item .emoji-box { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item .emoji-box { width: 582px; border-radius: 8px; background-color: #fff; @@ -156,7 +188,7 @@ font-size: 22px; padding: 8px; } -#edit .edit-container .editor-toolbar .toolbar-item .emoji-box::after { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item .emoji-box::after { content: ""; width: 0; height: 0; @@ -168,17 +200,17 @@ left: 50%; transform: translateX(-50%); } -#edit .edit-container .editor-toolbar .toolbar-item .emoji-box .emoji-icon { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item .emoji-box .emoji-icon { margin: 5px; cursor: pointer; } -#edit .edit-container .editor-toolbar .toolbar-item.link.pitch .link-box-mask { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item.link.pitch .link-box-mask { display: block; } -#edit .edit-container .editor-toolbar .toolbar-item.link.pitch .link-box { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item.link.pitch .link-box { display: flex; } -#edit .edit-container .editor-toolbar .toolbar-item.link .link-box { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item.link .link-box { background-color: #ffffff; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745); @@ -193,11 +225,11 @@ flex-direction: column; padding: 18px 20px 0; } -#edit .edit-container .editor-toolbar .toolbar-item.link .link-box .item { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item.link .link-box .item { margin-bottom: 22px; flex-direction: column; } -#edit .edit-container .editor-toolbar .toolbar-item.link .link-box .item .name { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item.link .link-box .item .name { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; @@ -206,7 +238,7 @@ line-height: 26px; margin-bottom: 8px; } -#edit .edit-container .editor-toolbar .toolbar-item.link .link-box .item .input { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item.link .link-box .item .input { height: 36px; border: 1px solid #d7d7d7; border-radius: 7px; @@ -214,7 +246,7 @@ font-size: 14px; color: #000000; } -#edit .edit-container .editor-toolbar .toolbar-item.link .link-box .btn { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item.link .link-box .btn { width: 72px; height: 40px; line-height: 40px; @@ -228,12 +260,27 @@ color: #000000; margin-top: 8px; } -#edit .edit-container .editor-toolbar .toolbar-item.link .link-box .btn:hover { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item.link .link-box .btn:hover { background-color: #23e0b6; } -#edit .edit-container .editor-toolbar .toolbar-item.h2.pitch { +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item.h2.pitch { background-color: #f6f6bd; } +#edit .edit-container #editor—wrapper .editor-toolbar .toolbar-item.active > button { + background-color: #f6f6bd; +} +#edit .edit-container #editor—wrapper #editor-container { + min-height: 500px; + max-height: 80vh; + font-size: 18px; + line-height: 26px; + color: #333333; +} +#edit .edit-container #editor—wrapper #editor-container a { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + text-decoration: underline; + color: #04b0d5; +} #edit .edit-container .content-input { min-height: 509px; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; diff --git a/css/edit.less b/css/edit.less index 81fb623..804a918 100644 --- a/css/edit.less +++ b/css/edit.less @@ -82,192 +82,253 @@ } } - .editor-toolbar { - height: 36px; - background-color: rgba(251, 251, 251, 1); - padding-left: 25px; - position: sticky; - top: 0; - z-index: 10; + #editor—wrapper { + z-index: 100; - .toolbar-item { - .icon { - width: 16px; - height: 16px; - margin-right: 5px; + .bold { + font-weight: bold; + } + + .editor-toolbar { + height: 36px; + line-height: 36px; + background-color: rgba(251, 251, 251, 1); + padding-left: 25px; + position: sticky; + top: 0; + z-index: 10; + .w-e-panel-content-emotion { + width: 490px; + } + .w-e-bar-item-group .w-e-bar-item-menus-container { + margin-top: 30px; } - cursor: pointer; - height: 30px; - line-height: 30px; - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 14px; - color: #000000; - line-height: 23px; - margin-right: 40px; - position: relative; - padding: 0 10px; - border-radius: 50px; + > .w-e-bar { + background-color: transparent; + } + .w-e-toolbar { + padding: 0; + // .w-e-bar-item { + // padding: 0 10px; + // } + + > .w-e-bar-item { + margin-right: 40px; + > button { + color: #000000; + padding: 0 10px; + } + } + } + + .toolbar-item { + .icon { + width: 16px; + height: 16px; + margin-right: 5px; + } - .file { - opacity: 0; /* 隐藏输入框 */ - background: transparent; - border: none; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; cursor: pointer; + height: 30px !important; + line-height: 30px !important; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + color: #000000; + line-height: 23px; + margin-right: 40px; + position: relative; + padding: 0; - &::after { - content: ""; - width: 100%; - height: 100%; + > button { + padding: 0 10px; + border-radius: 50px; + + &.active { + background-color: rgba(246, 246, 189, 1); + } + } + + .file { + opacity: 0; /* 隐藏输入框 */ + background: transparent; + border: none; position: absolute; top: 0; left: 0; - } - } - - &.expression.pitch { - .emoji-box-mask { - display: block; - } - - .emoji-box { - display: flex; - } - } - - .link-box-mask, - .emoji-box-mask { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1; - // background-color: rgba(0, 0, 0, 0.20392157); - display: none; - } - - .link-box-mask { - background: transparent; - } - - .emoji-box { - width: 582px; - border-radius: 8px; - background-color: #fff; - filter: drop-shadow(0 0 11px rgba(0, 0, 0, 0.1)); - top: 45px; - position: absolute; - z-index: 1; - left: 50%; - transform: translateX(-50%); - border: 1px solid #ebebeb; - display: none; - flex-wrap: wrap; - font-size: 22px; - padding: 8px; - - &::after { - content: ""; - width: 0; - height: 0; - border-left: 8px solid transparent; - border-right: 8px solid transparent; - border-bottom: 8px solid #ffffff; - position: absolute; - top: -8px; - left: 50%; - transform: translateX(-50%); - } - - .emoji-icon { - margin: 5px; + width: 100%; + height: 100%; cursor: pointer; - } - } - &.link { - &.pitch { - .link-box-mask { + &::after { + content: ""; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + } + } + + &.expression.pitch { + .emoji-box-mask { display: block; } - .link-box { + .emoji-box { display: flex; } } - .link-box { - background-color: rgba(255, 255, 255, 1); - border-radius: 6px; - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.168627450980392); - - width: 336px; - height: 282px; - position: absolute; - top: 30px; - left: 0%; + .link-box-mask, + .emoji-box-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; z-index: 1; + // background-color: rgba(0, 0, 0, 0.20392157); + display: none; + } + .link-box-mask { + background: transparent; + } + + .emoji-box { + width: 582px; + border-radius: 8px; + background-color: #fff; + filter: drop-shadow(0 0 11px rgba(0, 0, 0, 0.1)); + top: 45px; + position: absolute; + z-index: 1; + left: 50%; + transform: translateX(-50%); border: 1px solid #ebebeb; display: none; - flex-direction: column; - padding: 18px 20px 0; + flex-wrap: wrap; + font-size: 22px; + padding: 8px; - .item { - margin-bottom: 22px; - flex-direction: column; - .name { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 14px; - color: #555555; - line-height: 26px; - margin-bottom: 8px; + &::after { + content: ""; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-bottom: 8px solid #ffffff; + position: absolute; + top: -8px; + left: 50%; + transform: translateX(-50%); + } + + .emoji-icon { + margin: 5px; + cursor: pointer; + } + } + + &.link { + &.pitch { + .link-box-mask { + display: block; } - .input { - height: 36px; - border: 1px solid rgba(215, 215, 215, 1); - border-radius: 7px; - padding: 0 10px; - font-size: 14px; - color: #000000; + .link-box { + display: flex; } } - .btn { - width: 72px; - height: 40px; - line-height: 40px; - background-color: rgba(80, 227, 194, 1); - border-radius: 8px; - margin-left: auto; - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 16px; - color: #000000; - margin-top: 8px; - &:hover { - background-color: rgb(35, 224, 182); + .link-box { + background-color: rgba(255, 255, 255, 1); + border-radius: 6px; + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.168627450980392); + + width: 336px; + height: 282px; + position: absolute; + top: 30px; + left: 0%; + z-index: 1; + + border: 1px solid #ebebeb; + display: none; + flex-direction: column; + padding: 18px 20px 0; + + .item { + margin-bottom: 22px; + flex-direction: column; + .name { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + color: #555555; + line-height: 26px; + margin-bottom: 8px; + } + + .input { + height: 36px; + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 7px; + padding: 0 10px; + font-size: 14px; + color: #000000; + } } + + .btn { + width: 72px; + height: 40px; + line-height: 40px; + background-color: rgba(80, 227, 194, 1); + border-radius: 8px; + margin-left: auto; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + margin-top: 8px; + &:hover { + background-color: rgb(35, 224, 182); + } + } + } + } + + &.h2 { + &.pitch { + background-color: rgba(246, 246, 189, 1); + } + } + + &.active { + > button { + background-color: rgba(246, 246, 189, 1); } } } + } - &.h2 { - &.pitch { - background-color: rgba(246, 246, 189, 1); - } + #editor-container { + min-height: 500px; + max-height: 80vh; + font-size: 18px; + line-height: 26px; + color: #333333; + + a { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + text-decoration: underline; + color: #04b0d5; } } } diff --git a/css/index.css b/css/index.css index 2a2d0b1..ceab5ae 100644 --- a/css/index.css +++ b/css/index.css @@ -109,15 +109,18 @@ height: 26px; border-radius: 50%; } -#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(6) { - margin-right: -9px; -} -#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(5) { - margin-right: -9px; -} #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(4) { + margin-right: -9px; +} +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(3) { + margin-right: -9px; +} +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(2) { margin-right: -7px; } +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(2) { + margin-right: -5px; +} #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item { cursor: pointer; } diff --git a/css/index.less b/css/index.less index 56cb3a0..195e379 100644 --- a/css/index.less +++ b/css/index.less @@ -125,17 +125,18 @@ border-radius: 50%; } - &:nth-child(6) { - margin-right: -9px; - } - - &:nth-child(5) { - margin-right: -9px; - } - &:nth-child(4) { + margin-right: -9px; + } + &:nth-child(3) { + margin-right: -9px; + } + &:nth-child(2) { margin-right: -7px; } + &:nth-child(2) { + margin-right: -5px; + } } } } diff --git a/css/public.css b/css/public.css index 5759dbe..c444f30 100644 --- a/css/public.css +++ b/css/public.css @@ -3,7 +3,6 @@ padding: 0; box-sizing: border-box; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; font-style: normal; word-break: break-word; } diff --git a/css/public.less b/css/public.less index 838a817..1f87ca4 100644 --- a/css/public.less +++ b/css/public.less @@ -3,7 +3,7 @@ padding: 0; box-sizing: border-box; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; + // font-weight: 400; font-style: normal; word-break: break-word; } diff --git a/details.html b/details.html index cb6d73b..23b1018 100644 --- a/details.html +++ b/details.html @@ -194,7 +194,7 @@
- +
{{ item }}
@@ -264,7 +264,7 @@
- +
{{ item }}
@@ -335,7 +335,7 @@
- +
{{ item }}
@@ -481,7 +481,7 @@ - + \ No newline at end of file diff --git a/edit.html b/edit.html index 44c7100..98c764a 100644 --- a/edit.html +++ b/edit.html @@ -16,24 +16,7 @@ } - - @@ -54,11 +37,12 @@
{{ info?.title?.length ? titleLength - info?.title?.length : titleLength }}
-
+ +
-
-
+
+
diff --git a/js/details.js b/js/details.js index 2c3d419..95fe5e1 100644 --- a/js/details.js +++ b/js/details.js @@ -1,15 +1,17 @@ const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue; -import { itemForum } from "../component/item-forum/item-forum.js"; -import { itemOffer } from "../component/item-offer/item-offer.js"; -import { itemSummary } from "../component/item-summary/item-summary.js"; -import { itemVote } from "../component/item-vote/item-vote.js"; -import { itemMj } from "../component/item-mj/item-mj.js"; -import { itemTenement } from "../component/item-tenement/item-tenement.js"; -import { latestList } from "../component/latest-list/latest-list.js"; -import { slideshowBox } from "../component/slideshow-box/slideshow-box.js"; -import { like } from "../component/like/like.js"; -import { report } from "../component/report/report.js"; -import { headTop } from "../component/head-top/head-top.js"; +const ASSET_VERSION = window.__ASSET_VERSION__ || "20251126"; +const withVer = (p) => `${p}?v=${ASSET_VERSION}`; +const { itemForum } = await import(withVer("../component/item-forum/item-forum.js")); +const { itemOffer } = await import(withVer("../component/item-offer/item-offer.js")); +const { itemSummary } = await import(withVer("../component/item-summary/item-summary.js")); +const { itemVote } = await import(withVer("../component/item-vote/item-vote.js")); +const { itemMj } = await import(withVer("../component/item-mj/item-mj.js")); +const { itemTenement } = await import(withVer("../component/item-tenement/item-tenement.js")); +const { latestList } = await import(withVer("../component/latest-list/latest-list.js")); +const { slideshowBox } = await import(withVer("../component/slideshow-box/slideshow-box.js")); +const { like } = await import(withVer("../component/like/like.js")); +const { report } = await import(withVer("../component/report/report.js")); +const { headTop } = await import(withVer("../component/head-top/head-top.js")); const appSectionIndex = createApp({ setup() { @@ -563,10 +565,11 @@ const appSectionIndex = createApp({ let emojiState = ref(false); let emojiMaskState = ref(false); + let emojiBottomDistance = ref(0); let inputTextarea = ref(""); // 打开 Emoji - const openEmoji = (index, i) => { + const openEmoji = (event, index, i) => { if (!isLogin.value) { goLogin(); return; @@ -1177,7 +1180,7 @@ const appSectionIndex = createApp({ ajax(`/v2/api/forum/postTopicShare`, { token }); }; - return { uniqidRef, share, reportToken, isReplyBoxShow, matterHeight, sidebarHeight, deleteItem, maxPicture, sidebarFixed, matterRef, sidebarRef, pitchInputState, ismyself, edit, searchInput, defaultSearchText, goSearch, goPersonalHomepage, QRcode, alsoCommentsData, copyLinkClick, reportState, tokentoken, essence, recommend, hide, report, cutShow, ismanager, show, openDiscuss, commentDelete, handleInputPaste, autoResize, editCommentState, selectEditEmoji, closeEditEmoji, openEditEmoji, closeEdit, openEdit, closeEditFileUpload, postEditComment, submitAnswerComments, closePictureUpload, closeFileUpload, picture, editToken, editPicture, editInput, editEmojiState, handleFileUpload, inputTextarea, judgeLogin, handleEditFile, selectEmoji, emojiData, emojiMaskState, emojiState, closeEmoji, openEmoji, closeAnswerCommentsChild, openAnswerCommentsChild, handleAnswerText, sendMessage, TAHomePage, operateAnswerCommentsLike, closeUserInfo, openUserInfo, permissions, commentList, commentPage, commentTotalCount, picture, userInfoWin, relatedList, relatedTime, coinNubmer, coinList, coinAmount, coinSubmit, strategy, mybalance, coinsState, openCoinBox, closeCoinBox, isLikeGif, likeClick, collectClick, islike, iscollect, recentlyList, medal, count, sectionn, tags, authorInfo, info, timestamp, updatedTime }; + return { emojiBottomDistance, uniqidRef, share, reportToken, isReplyBoxShow, matterHeight, sidebarHeight, deleteItem, maxPicture, sidebarFixed, matterRef, sidebarRef, pitchInputState, ismyself, edit, searchInput, defaultSearchText, goSearch, goPersonalHomepage, QRcode, alsoCommentsData, copyLinkClick, reportState, tokentoken, essence, recommend, hide, report, cutShow, ismanager, show, openDiscuss, commentDelete, handleInputPaste, autoResize, editCommentState, selectEditEmoji, closeEditEmoji, openEditEmoji, closeEdit, openEdit, closeEditFileUpload, postEditComment, submitAnswerComments, closePictureUpload, closeFileUpload, picture, editToken, editPicture, editInput, editEmojiState, handleFileUpload, inputTextarea, judgeLogin, handleEditFile, selectEmoji, emojiData, emojiMaskState, emojiState, closeEmoji, openEmoji, closeAnswerCommentsChild, openAnswerCommentsChild, handleAnswerText, sendMessage, TAHomePage, operateAnswerCommentsLike, closeUserInfo, openUserInfo, permissions, commentList, commentPage, commentTotalCount, picture, userInfoWin, relatedList, relatedTime, coinNubmer, coinList, coinAmount, coinSubmit, strategy, mybalance, coinsState, openCoinBox, closeCoinBox, isLikeGif, likeClick, collectClick, islike, iscollect, recentlyList, medal, count, sectionn, tags, authorInfo, info, timestamp, updatedTime }; }, }); diff --git a/js/edit.js b/js/edit.js index 3c835f1..5934fe5 100644 --- a/js/edit.js +++ b/js/edit.js @@ -148,11 +148,85 @@ const editApp = createApp({ }; let editor = null; + let toolbarRef = ref(null); const initEditor = () => { let infoTarget = info.value || {}; console.log("infoTarget", infoTarget); + // 转换图片链接 + async function customCheckImageFn(src, alt, url) { + // JS 语法 + if (!src) { + return; + } + + // let config = uConfigData; + // // 1. 构造 FormData（包含你的接口所需字段） + // const formData = new FormData(); + // formData.append(config.requestName, file); // 文件数据 + // formData.append("name", file.name); // 文件名 + // formData.append("type", "image"); // 文件名 + // formData.append("data", config.params.data); // 文件名 + + await setTimeout(() => { + console.log("1111"); + return true; + }, 2000); + + // setTimeout(() => { + // return "图片网址必须以 http/https 开头"; + // }, 2000); + if (src.indexOf("http") !== 0) { + // return "图片网址必须以 http/https 开头"; + } + + // return true; + + // 返回值有三种选择： + // 1. 返回 true ，说明检查通过，编辑器将正常插入图片 + // 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串） + // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息 + } + + // 【新增】判断节点的对齐方式 + const getNodeAlign = (node) => { + if (!node) return "left"; // 默认居左 + // 获取节点的text-align样式（优先内联样式，再取CSS计算样式） + const inlineAlign = node.style.textAlign; + if (inlineAlign) return inlineAlign; + + const computedStyle = window.getComputedStyle(node); + return computedStyle.textAlign || "left"; + }; + + // 【新增】切换对齐方式（居中 ↔ 居左） + const toggleAlign = () => { + const editorInst = editor.value; + if (!editorInst) return; + + // 禁用编辑器默认的居中命令 + editorInst.off("clickToolbar", "justifyCenter"); + + // 获取当前选中的节点（优先段落/块级节点） + const selectedNode = getSelectedNode(editorInst); + const blockNode = DomEditor.getClosestBlock(selectedNode); // 获取块级节点（p/div等） + if (!blockNode) return; + + // 判断当前对齐方式 + const currentAlign = getNodeAlign(blockNode); + + // 切换对齐：居中 → 居左；其他 → 居中 + const newAlign = currentAlign === "center" ? "left" : "center"; + + // 设置节点对齐样式 + editorInst.restoreSelection(); // 恢复选区 + blockNode.style.textAlign = newAlign; + + // 触发编辑器更新 + editorInst.change(); + editorInst.focus(); // 保持焦点 + }; const editorConfig = { placeholder: "Type here...", @@ -162,6 +236,19 @@ const editApp = createApp({ emotions: optionEmoji.value, }, + ["insertImage"]: { + onInsertedImage(imageNode) { + console.log("imageNode", imageNode); + // TS 语法 + // onInsertedImage(imageNode) { // JS 语法 + if (imageNode == null) return; + + const { src, alt, url, href } = imageNode; + console.log("inserted image", src, alt, url, href); + }, + // checkImage: async (src, alt, url) => await customCheckImageFn(src, alt, url), // 也支持 async 函数 + }, + ["uploadImage"]: { server: uConfigData.url, @@ -200,9 +287,12 @@ const editApp = createApp({ formData.append("name", file.name); // 文件名 formData.append("type", "image"); // 文件名 formData.append("data", config.params.data); // 文件名 - + // uploading(file, file.name, "image").then((data) => { + // insertFn(data.url); // 传入图片的可访问 URL + // }); ajax(config.url, formData).then((res) => { const data = res.data; + console.log("上传成功：", data); insertFn(data.url); // 传入图片的可访问 URL }); } catch (err) { @@ -210,23 +300,76 @@ const editApp = createApp({ } }, }, - }, - // 4. 链接菜单：显式启用（默认启用，补充配置防止被过滤） - link: { - disabled: false, // 确保不禁用 - showTarget: true, // 显示「是否新窗口打开」选项 - showRel: true, // 显示「rel 属性」选项 - }, - // 5. 对齐菜单：显式启用（默认启用，兜底配置） - justify: { - disabled: false, + ["uploadVideo"]: { + server: uConfigData.url, + + // form-data fieldName ，默认值 'wangeditor-uploaded-video' + fieldName: uConfigData.requestName, + + // 单个文件的最大体积限制，默认为 10M + maxFileSize: maxSize, // 1M + + // 最多可上传几个文件，默认为 5 + maxNumberOfFiles: videoLength, + + // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 [] + allowedFileTypes: ["video/*"], + + // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。 + meta: { ...uConfigData.params }, + + // 将 meta 拼接到 url 参数中，默认 false + metaWithUrl: false, + + // 自定义增加 http header + headers: { accept: "application/json, text/plain, */*", ...uConfigData.headers }, + + // 跨域是否传递 cookie ，默认为 false + withCredentials: true, + + // 超时时间，默认为 30 秒 + timeout: 15 * 1000, // 15 秒 + + // 视频不支持 base64 格式插入 + + async customUpload(file, insertFn) { + try { + const videoUploadRes = await uploading(file, file.name, "video"); + + const coverFile = await getVideoFirstFrame(file); + console.log("第一帧提取成功", coverFile); + + // 步骤3：再上传第一帧封面（type 传 'cover'，按后端要求调整） + const coverUploadRes = await uploading(coverFile, coverFile.name, "image"); + console.log("封面上传成功", coverUploadRes); + + insertFn(videoUploadRes.url, coverUploadRes.url); + } catch (err) { + console.error("上传出错：", err); + } + }, + }, + + ["justifyCenter"]: { + onClick: (editor) => { + console.log("editor", editor); + toggleAlign(); // 替换为自定义切换逻辑 + }, + // 【可选】自定义居中按钮的激活状态（选中时高亮） + isActive: (editor) => { + const selectedNode = getSelectedNode(editor); + const blockNode = DomEditor.getClosestBlock(selectedNode); + return blockNode && getNodeAlign(blockNode) === "center"; + }, + }, }, onChange(editor) { const html = editor.getHtml(); + // console.log('"editor', editor); console.log("editor content", html); - // 也可以同步到