做好了潜觉背景的基础

images/icon-awoken-count.svg

@@ -1,4 +1,4 @@
-<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 123 75" icon-type="latent">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
 	<style>
 		.back {
 			fill: white;
@@ -79,21 +79,4 @@
 			<circle class="front" filter="url(#inset-shadow)" cx="18" cy="16" r="13"/>
 		</g>
 	</symbol>
-<image width="123" height="40" xlink:href="../../../CTFX/Desktop/%E6%9C%AA%E5%91%BD%E5%90%8D-3.png"/>
-<g>
-	<circle class="back" filter="url(#out-shadow)" cx="23" cy="19" r="16"/>
-	<circle class="front" filter="url(#inset-shadow)" cx="23" cy="19" r="13"/>
-</g>
-<g id="bg-enable-be-assist">
-	<circle class="back" filter="url(#out-shadow)" cx="23" cy="49" r="16"/>
-	<circle class="front" filter="url(#inset-shadow)" cx="23" cy="49" r="13"/>
-</g>
-<g id="bg-latent">
-	<circle class="back" filter="url(#out-shadow)" cx="60" cy="49" r="16"/>
-	<circle class="front" filter="url(#inset-shadow)" cx="60" cy="49" r="13"/>
-</g>
-<g id="bg-unable-be-assist">
-	<circle class="back" filter="url(#out-shadow)" cx="103" cy="49" r="16"/>
-	<circle class="front" filter="url(#inset-shadow)" cx="103" cy="49" r="13"/>
-</g>
 </svg>

images/icon-latent-block-bg.svg

@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
+	<defs>
+		<style>
+			.latent {
+				fill: url(#latent-grad);
+				filter: url(#latent-bg);
+			}
+			.big-latent {
+				fill: url(#latent-table-grad);
+				filter: url(#latent-bg);
+			}
+		</style>
+		<linearGradient id="latent-grad" x1="0" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox">
+			<stop offset="0" stop-color="#5af"/>
+			<stop offset="1" stop-color="#27e"/>
+		</linearGradient>
+		<linearGradient id="latent-table-grad" x1="0" y1="0" x2="0" y2="0.5" href="#latent-grad"></linearGradient>
+		<filter id="latent-bg">
+			<!--产生外部阴影-->
+			<feComponentTransfer in="SourceAlpha">
+				<feFuncA tableValues="0 1" type="table"/>
+			</feComponentTransfer>
+			<feGaussianBlur stdDeviation="1"/>
+			<feOffset dx="0" dy="2"/>
+			<feComposite in2="SourceAlpha" result="out-shadow"/>
+			<!--产生边框-->
+			<feMorphology in="SourceAlpha" operator="erode" radius="1" result="fill-range"/> <!--向内缩进1单位的范围-->
+			<feFlood flood-color="#BCE" /> <!--边框颜色-->
+			<feComposite in2="SourceAlpha" operator="in"/>
+			<feComposite in2="fill-range" operator="out" result="border"/>
+			<!--产生内部阴影-->
+			<feComponentTransfer in="fill-range" result="out-of-box-shadow"> <!--得到外部黑框-->
+				<feFuncA tableValues="1 0" type="table"/>
+			</feComponentTransfer>
+			<feGaussianBlur stdDeviation="1"/>
+			<feOffset dx="0" dy="2" /> <!--向下走1像素-->
+			<feComposite in2="fill-range" operator="in" result="in-shadow-top"/>
+			<feMerge>
+				<feMergeNode in="out-shadow"/>
+				<feMergeNode in="SourceGraphic"/>
+				<feMergeNode in="border"/>
+				<feMergeNode in="in-shadow-top"/>
+			</feMerge>
+		</filter>
+	</defs>
+	<symbol id="block-1" viewBox="0 0 32 32">
+		<rect fill="url(#latent-grad)" filter="url(#latent-bg)" width="32" height="32" rx="4"/>
+	</symbol>
+	<symbol id="block-2" viewBox="0 0 76 32">
+		<rect fill="url(#latent-grad)" filter="url(#latent-bg)" y="35" width="76" height="32" rx="4"/>
+	</symbol>
+	<symbol id="block-2-table" viewBox="0 0 76 32">
+		<rect fill="url(#latent-grad)" filter="url(#latent-bg)" y="70" width="70" height="32" rx="4"/>
+	</symbol>
+	<symbol id="block-6" viewBox="0 0 252 32">
+		<rect fill="url(#latent-grad)" filter="url(#latent-bg)" y="70" width="252" height="32" rx="4"/>
+	</symbol>
+	<symbol id="block-6-table" viewBox="0 0 148 68"> <!--大小是146×66-->
+		<path fill="url(#latent-table-grad)" filter="url(#latent-bg)" d="M142,0H4A4,4,0,0,0,0,4V62a4,4,0,0,0,4,4H66a4,4,0,0,0,4-4V36a4,4,0,0,1,4-4h68a4,4,0,0,0,4-4V4A4,4,0,0,0,142,0Z"/>
+	</symbol>
+	<!--<path id="内方角" class="big-latent" d="M142,0H4A4,4,0,0,0,0,4V62a4,4,0,0,0,4,4H66a4,4,0,0,0,4-4V32h72a4,4,0,0,0,4-4V4A4,4,0,0,0,142,0Z"/>-->
+</svg>

script-custom_elements.js

@@ -37,7 +37,7 @@ class CustomTokenList extends Array {
 		} else {
 			throw new TypeError(`${CustomTokenList.name}.constructor: Argument 1 is not an Attr or HTMLElement.\n参数 1 不是 Attr 或 HTMLElement。`);
 		}
-		let initializeValue = this.#attribute.nodeValue;
+		let initializeValue = this.#attribute?.nodeValue;
 		if (initializeValue) { //如果值已经存在，则先添加到TokenList
 			this.value = initializeValue;
 		}
@@ -85,7 +85,7 @@ class CustomTokenList extends Array {
 
 		//经过测试普通循环push性能最高，并且由于需要去重，需要每次判断是否存在
 		tokens.forEach(token => {
-			if (!this.includes(token)) this.push(...token);
+			if (!this.includes(token)) this.push(token);
 		});
 
 		this.#refreshAttributeValue();
@@ -142,6 +142,7 @@ class CustomTokenList extends Array {
 	set value(attrValue) {
 		//将值确保转为字符串，然后以空格拆分，并加入Set确保唯一性
 		const inputTokens = [...new Set(attrValue.toString().split(/\s+/g))];
+		console.log(inputTokens)
 		this.length = 0;
 		this.push(...inputTokens);
 		
@@ -303,6 +304,7 @@ class PadIcon extends HTMLElement {
 	static ELEMENT_TYPE_AWOKEN = 'awoken';
 	static ELEMENT_TYPE_TYPE = 'type';
 	static ELEMENT_TYPE_AWOKEN_COUNT = 'awoken-count';
+	static ELEMENT_TYPE_LATENT = 'latent';
 	#svg = document.createElementNS(svgNS,'svg');
 	#flags = null;
 	get flagsList() { return this.#flags; }
@@ -427,7 +429,10 @@ class PadIcon extends HTMLElement {
 				text.lengthAdjust.baseVal = full ? SVGTextElement.LENGTHADJUST_SPACINGANDGLYPHS : SVGTextElement.LENGTHADJUST_SPACING;
 				break;
 			}
-			case 'latent':
+			case PadIcon.ELEMENT_TYPE_LATENT: {
+				use.href.baseVal = `images/icon-latent-block-bg.svg#block-6-table`;
+				break;
+			}
 			case 'badge':
 			case 'attr':
 			case 'orb':