CocosPlugin/cc-inspector-chrome
1
0
Fork 0
mirror of https://github.com/tidys/cc-inspector-chrome synced 2025-04-16 07:01:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

shadow dom 不支持base64的font face，只能用字符代替

Browse Source
This commit is contained in:
xu_yanfeng 2025-01-19 13:22:26 +08:00
parent 05edad10f7
commit 18d8f7e5c4
6 changed files with 42 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
cc-inspector/src/scripts/inject-view/app.vue
View File

@ -4,18 +4,18 @@
<div class="title">Recommend</div>
<div class="line"></div>
<div class="close" @click="onClose" :title="closeTitle">
<i class="icon iconfont icon_close"></i>
<div class="icon">x</div>
</div>
</div>
<div class="body" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
<div class="left slide" @click="onClickBtnLeft">
<i class="iconfont icon_arrow_left arrow"></i>
<div class="arrow">&lt;</div>
</div>
<div class="list" ref="elAd" @wheel="onWheel">
<Banner v-for="(item, index) in ads" :data="item" :key="index"></Banner>
</div>
<div class="right slide" @click="onClickBtnRight">
<i class="iconfont icon_arrow_right arrow"></i>
<div class="arrow">&gt;</div>
</div>
</div>
</div>
@ -141,7 +141,7 @@ export default defineComponent({
<style scoped lang="less">
@color-bg: #8d8d8da6;
@color-hover: #4d4d4da6;
@color-hover: #f9c04e;
@color-active: #ffaa00;
.ad {
position: absolute;
@ -181,7 +181,8 @@ export default defineComponent({
justify-content: center;
align-items: center;
.icon {
font-size: 8px;
user-select: none;
font-size: 14px;
&:hover {
color: black;
}
@ -229,10 +230,14 @@ export default defineComponent({
flex-direction: row;
align-items: center;
position: absolute;
justify-content: center;
.arrow {
user-select: none;
font-size: 22px;
color: rgb(61, 61, 61);
font-weight: bold;
color: rgb(133, 133, 133);
}
}
}

2
cc-inspector/src/scripts/inject-view/banner.vue
View File

@ -87,10 +87,12 @@ export default defineComponent({
max-width: 300px;
min-height: 50px;
max-height: 50px;
margin: 0;
cursor: pointer;
display: flex;
text-align: center;
align-items: flex-end;
&:hover {
border: 2px solid #949494;
border-bottom: 0;

1
cc-inspector/src/scripts/inject-view/res/close.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1737262301480" class="icon" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2139" width="16.0625" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M597.54570376 512l219.97466684-219.97466683c24.44162965-24.44162965 24.44162965-61.10407412 0-85.54570377-24.44162965-24.44162965-61.10407412-24.44162965-85.54570377 0L512 426.45429624 292.02533317 206.4796294C267.58370352 182.03799974 230.92125905 182.03799974 206.4796294 206.4796294c-24.44162965 24.44162965-24.44162965 61.10407412 0 85.54570377L426.45429624 512l-219.97466684 219.97466683c-24.44162965 24.44162965-24.44162965 61.10407412 0 85.54570377 12.22081482 12.22081482 28.51523459 16.29441978 44.80965436 16.29441976s32.58883953-4.07360495 44.80965435-16.29441976L512 597.54570376l219.97466683 219.97466684c12.22081482 12.22081482 28.51523459 16.29441978 44.80965436 16.29441977s32.58883953-4.07360495 44.80965436-16.29441977c24.44162965-24.44162965 24.44162965-61.10407412 0-85.54570377L597.54570376 512z" fill="#cdcdcd" p-id="2140"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
cc-inspector/src/scripts/inject-view/res/left.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1737262395969" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2346" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M704 868c-8.3 0-16.5-2.8-23.1-8.3l-384-320c-8.2-6.8-13-17-13-27.7s4.7-20.8 13-27.7l384-320c10.7-8.9 25.7-10.9 38.3-4.9C731.9 165.3 740 178 740 192v640c0 14-8.1 26.7-20.7 32.6-4.9 2.3-10.1 3.4-15.3 3.4z" fill="#dbdbdb" p-id="2347"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 574 B

1
cc-inspector/src/scripts/inject-view/res/right.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1737262412557" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2507" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M304.7 864.6C292.1 858.7 284 846 284 832V192c0-14 8.1-26.7 20.7-32.6 12.6-5.9 27.6-4 38.3 4.9l384 320c8.2 6.8 13 17 13 27.7s-4.7 20.8-13 27.7l-384 320c-6.6 5.5-14.8 8.3-23.1 8.3-5.1 0-10.3-1.1-15.2-3.4z" fill="#dbdbdb" p-id="2508"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 575 B

33
cc-inspector/src/scripts/inject/inject-view.ts
View File

@ -7,10 +7,13 @@ import App from "../inject-view/app.vue";
export class InjectView {
private _inited = false;
private css: string[] = [];
private shadowRoot: ShadowRoot | null = null;
private hasLoadCss = false;
constructor() {
document.addEventListener(DocumentEvent.LoadInjectCss, (event: CustomEvent) => {
const cssArray: string[] = event.detail;
this.css = cssArray;
this.loadCss();
});
}
public init() {
@ -20,22 +23,38 @@ export class InjectView {
this._inited = true;
this.createUI();
}
private loadCss() {
if (!this.shadowRoot) {
return;
}
if (this.hasLoadCss) {
return;
}
if (this.css.length === 0) {
return;
}
this.hasLoadCss = true;
this.css.forEach((css) => {
const link = document.createElement("link");
link.href = css;
link.rel = "stylesheet";
this.shadowRoot.appendChild(link);
});
}
private createUI() {
const el = document.createElement("div");
el.style.position = "absolute";
el.style.position = "fixed";
el.style.zIndex = "99999";
el.style.bottom = "0";
el.style.right = "0";
el.style.left = "0";
document.body.appendChild(el);
const shadowRoot = el.attachShadow({ mode: "open" });
shadowRoot.ATTRIBUTE_NODE;
this.shadowRoot = shadowRoot;
// load css
this.css.forEach((css) => {
const link = document.createElement("link");
link.href = css;
link.rel = "stylesheet";
shadowRoot.appendChild(link);
});
this.loadCss();
// vue
const root = document.createElement("div");
shadowRoot.appendChild(root);