调整opacity默认值，前置images处理

README.ja-JP.md

@@ -102,14 +102,14 @@
 
 フルスクリーン、サイドバー、パネル部分を設定するには、`background.fullscreen`、`background.sidebar`、`background.panel`を編集します。
 
-| 設定       |     型     |  デフォルト   | 説明                                                                                                       |
-| :--------- | :--------: | :-----------: | :--------------------------------------------------------------------------------------------------------- |
-| `images`   | `string[]` |     `[]`      | `https`または`file`プロトコルで画像のパスを指定してください。複数指定することもできます。                  |
-| `opacity`  |  `number`  | `0.91`、`0.2` | 画像の不透明度を制御します、[opacity][mdn-opacity]へのエイリアスです。推奨値 `0.1 ～ 0.3`。                |
-| `size`     |  `string`  |    `cover`    | [background-size][mdn-background-size]へのエイリアスです。推奨 `cover`，縦横比を保ったまま領域を覆います。 |
-| `position` |  `string`  |   `center`    | [background-position][mdn-background-position]へのエイリアスです。デフォルト値は `center` です。           |
-| `interval` |  `number`  |      `0`      | 次の画像を表示するまでの秒数を制御します。`0` の場合、画像は変更されません。                               |
-| `random`   | `boolean`  |    `false`    | 画像の表示順をランダムにするかを制御します。                                                               |
+| 設定       |     型     | デフォルト | 説明                                                                                                       |
+| :--------- | :--------: | :--------: | :--------------------------------------------------------------------------------------------------------- |
+| `images`   | `string[]` |    `[]`    | `https`または`file`プロトコルで画像のパスを指定してください。複数指定することもできます。                  |
+| `opacity`  |  `number`  |   `0.1`    | 画像の不透明度を制御します、[opacity][mdn-opacity]へのエイリアスです。推奨値 `0.1 ～ 0.3`。                |
+| `size`     |  `string`  |  `cover`   | [background-size][mdn-background-size]へのエイリアスです。推奨 `cover`，縦横比を保ったまま領域を覆います。 |
+| `position` |  `string`  |  `center`  | [background-position][mdn-background-position]へのエイリアスです。デフォルト値は `center` です。           |
+| `interval` |  `number`  |    `0`     | 次の画像を表示するまでの秒数を制御します。`0` の場合、画像は変更されません。                               |
+| `random`   | `boolean`  |  `false`   | 画像の表示順をランダムにするかを制御します。                                                               |
 
 [mdn-opacity]: https://developer.mozilla.org/docs/Web/CSS/opacity
 [mdn-background-size]: https://developer.mozilla.org/docs/Web/CSS/background-size
@@ -122,7 +122,7 @@ example:
   "background.fullscreen": {
     // ローカルの画像へのfileプロトコルによるパスは、ブラウザにドラッグアンドドロップすることで簡単に取得できます
     "images": ["https://pathtoimage.png", "file:///path/to/local/file"],
-    "opacity": 0.2,
+    "opacity": 0.1,
     "size": "cover",
     "position": "center",
     "interval": 0,

README.md

@@ -105,7 +105,7 @@ Edit `background.fullscreen`、`background.sidebar`、`background.panel` to conf
 | Name       |    Type    | Default  | Description                                                                              |
 | :--------- | :--------: | :------: | :--------------------------------------------------------------------------------------- |
 | `images`   | `string[]` |   `[]`   | Your custom images, support `https` and `file` protocol.                                 |
-| `opacity`  |  `number`  |  `0.2`   | Opacity of the images, alias to [opacity][mdn-opacity], `0.1 ~ 0.3` recommended.         |
+| `opacity`  |  `number`  |  `0.1`   | Opacity of the images, alias to [opacity][mdn-opacity], `0.1 ~ 0.3` recommended.         |
 | `size`     |  `string`  | `cover`  | Alias to [background-size][mdn-background-size], `cover` to self-adaption (recommended). |
 | `position` |  `string`  | `center` | Alias to [background-position][mdn-background-position], default `center`.               |
 | `interval` |  `number`  |   `0`    | Seconds of interval for carousel, default `0` to disabled.                               |
@@ -122,7 +122,7 @@ example：
   "background.fullscreen": {
     // Local images can be dragged into the browser to quickly get the file protocol address from the address bar
     "images": ["https://pathtoimage.png", "file:///path/to/local/file"],
-    "opacity": 0.2,
+    "opacity": 0.1,
     "size": "cover",
     "position": "center",
     "interval": 0,

README.zh-CN.md

@@ -100,14 +100,14 @@ example:
 
 通过 `background.fullscreen`、`background.sidebar`、`background.panel` 来进行这些区域的配置。
 
-| 名称       |    类型    |    默认值     | 描述                                                                         |
-| :--------- | :--------: | :-----------: | :--------------------------------------------------------------------------- |
-| `images`   | `string[]` |     `[]`      | 自定义图片，支持 `https` 和 `file` 协议。                                    |
-| `opacity`  |  `number`  | `0.91`、`0.2` | 透明度，等同 css [opacity][mdn-opacity]，建议 `0.1 ~ 0.3`。                  |
-| `size`     |  `string`  |    `cover`    | 等同 css [background-size][mdn-background-size], 建议使用 `cover` 来自适应。 |
-| `position` |  `string`  |   `center`    | 等同 css [background-position][mdn-background-position]， 默认值 `center`。  |
-| `interval` |  `number`  |      `0`      | 单位 `秒`，轮播时候图片切换间隔，默认 `0` 表示不开启。                       |
-| `random`   | `boolean`  |    `false`    | 是否随机展示图片。                                                           |
+| 名称       |    类型    |  默认值  | 描述                                                                         |
+| :--------- | :--------: | :------: | :--------------------------------------------------------------------------- |
+| `images`   | `string[]` |   `[]`   | 自定义图片，支持 `https` 和 `file` 协议。                                    |
+| `opacity`  |  `number`  |  `0.1`   | 透明度，等同 css [opacity][mdn-opacity]，建议 `0.1 ~ 0.3`。                  |
+| `size`     |  `string`  | `cover`  | 等同 css [background-size][mdn-background-size], 建议使用 `cover` 来自适应。 |
+| `position` |  `string`  | `center` | 等同 css [background-position][mdn-background-position]， 默认值 `center`。  |
+| `interval` |  `number`  |   `0`    | 单位 `秒`，轮播时候图片切换间隔，默认 `0` 表示不开启。                       |
+| `random`   | `boolean`  | `false`  | 是否随机展示图片。                                                           |
 
 [mdn-opacity]: https://developer.mozilla.org/docs/Web/CSS/opacity
 [mdn-background-size]: https://developer.mozilla.org/docs/Web/CSS/background-size
@@ -120,7 +120,7 @@ example:
   "background.fullscreen": {
     // 本地图片可以拖到浏览器中，快速从地址栏得到file协议的地址
     "images": ["https://pathtoimage.png", "file:///path/to/local/file"],
-    "opacity": 0.2,
+    "opacity": 0.1,
     "size": "cover",
     "position": "center",
     "interval": 0,

package.json

@@ -174,7 +174,7 @@
           "type": "object",
           "default": {
             "images": [],
-            "opacity": 0.2,
+            "opacity": 0.1,
             "size": "cover",
             "position": "center",
             "interval": 0,
@@ -193,7 +193,7 @@
             },
             "opacity": {
               "type": "number",
-              "default": 0.2,
+              "default": 0.1,
               "minimum": 0,
               "maximum": 0.6,
               "markdownDescription": "%extension.background.fullscreen.opacity%"
@@ -225,7 +225,7 @@
           "type": "object",
           "default": {
             "images": [],
-            "opacity": 0.2,
+            "opacity": 0.1,
             "size": "cover",
             "position": "center",
             "interval": 0,
@@ -257,7 +257,7 @@
           "type": "object",
           "default": {
             "images": [],
-            "opacity": 0.2,
+            "opacity": 0.1,
             "size": "cover",
             "position": "center",
             "interval": 0,

package.nls.ja.json

@@ -16,7 +16,7 @@
 
     "extension.background.fullscreen.description": "フルスクリーン表示の設定",
     "extension.background.fullscreen.images": "表示させる画像を制御します。\n\nパスの入力例:\n\n`https://a.com/b.png`\n\n`file:///a/b.jpg`",
-    "extension.background.fullscreen.opacity": "画像の不透明度（opacity）を制御します、[opacity][mdn-opacity]へのエイリアスです。\n\n推奨値`0.1～0.3`，制限範囲`0～0.6`を超えると、デフォルト値`0.2`にリセットされます。",
+    "extension.background.fullscreen.opacity": "画像の不透明度（opacity）を制御します、[opacity][mdn-opacity]へのエイリアスです。\n\n推奨値`0.1～0.3`，制限範囲`0～0.6`を超えると、デフォルト値`0.1`にリセットされます。",
     "extension.background.fullscreen.size": "[background-size](https://developer.mozilla.org/docs/Web/CSS/background-size)へのエイリアスです。推奨`cover`，縦横比を保ったまま領域を覆います。",
     "extension.background.fullscreen.position": "[background-position](https://developer.mozilla.org/docs/Web/CSS/background-position)へのエイリアスです。デフォルト値は`center`です。",
     "extension.background.fullscreen.interval": "次の画像を表示するまでの秒数を制御します。`0`の場合、画像は変更されません。",

package.nls.json

@@ -16,7 +16,7 @@
 
     "extension.background.fullscreen.description": "Fullscreen section config.",
     "extension.background.fullscreen.images": "Your custom images.\n\nExample:\n\n`https://a.com/b.png`\n\n`file:///a/b.jpg`",
-    "extension.background.fullscreen.opacity": "Opacity of the images, alias to [opacity](https://developer.mozilla.org/docs/Web/CSS/opacity),\n\n`0.1 ~ 0.3` recommended, it will be reset to the default `0.2` if exceeds the limit range `0 ~ 0.6`.",
+    "extension.background.fullscreen.opacity": "Opacity of the images, alias to [opacity](https://developer.mozilla.org/docs/Web/CSS/opacity),\n\n`0.1 ~ 0.3` recommended, it will be reset to the default `0.1` if exceeds the limit range `0 ~ 0.6`.",
     "extension.background.fullscreen.size": "Alias to [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size), `cover` to self-adaption (recommended).",
     "extension.background.fullscreen.position": "Alias to [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position), default `center`.",
     "extension.background.fullscreen.interval": "Seconds of interval for carousel, default `0` to disabled.",

package.nls.zh.json

@@ -16,7 +16,7 @@
 
     "extension.background.fullscreen.description": "全屏区域配置。",
     "extension.background.fullscreen.images": "自定义图片。\n\nExample:\n\n`https://a.com/b.png`\n\n`file:///a/b.jpg`",
-    "extension.background.fullscreen.opacity": "透明度，等同 css [opacity](https://developer.mozilla.org/docs/Web/CSS/opacity)，\n\n建议 `0.1 ~ 0.3`，超出限制范围 `0 ~ 0.6` 会重置为 `0.2`。",
+    "extension.background.fullscreen.opacity": "透明度，等同 css [opacity](https://developer.mozilla.org/docs/Web/CSS/opacity)，\n\n建议 `0.1 ~ 0.3`，超出限制范围 `0 ~ 0.6` 会重置为 `0.1`。",
     "extension.background.fullscreen.size": "等同 css [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size), 建议使用 `cover` 来自适应。",
     "extension.background.fullscreen.position": "等同 css [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position)， 默认值 `center`。",
     "extension.background.fullscreen.interval": "单位 `秒`，轮播时候图片切换间隔，默认 `0` 表示不开启。",

src/background/PatchGenerator/PatchGenerator.base.ts

@@ -28,7 +28,14 @@ export function css(template: TemplateStringsArray, ...args: any[]) {
 }
 
 export class AbsPatchGenerator<T extends { images: string[] }> {
-    constructor(protected config: T) {}
+    protected config: T;
+
+    constructor(config: T) {
+        this.config = {
+            ...config,
+            images: this.normalizeImageUrls(config?.images || [])
+        };
+    }
 
     /**
      * 归一化图片路径
@@ -71,6 +78,20 @@ export class AbsPatchGenerator<T extends { images: string[] }> {
         return '';
     }
 
+    //     protected getPreload() {
+    //         return `
+    // const images = ${JSON.stringify(this.config?.images || [])};
+
+    // images.forEach(imgLink => {
+    //     const link = document.createElement('link');
+    //     link.rel = 'preload';
+    //     link.as = 'image';
+    //     link.href = imgLink;
+    //     document.head.appendChild(link);
+    // });
+    //         `;
+    //     }
+
     public create() {
         if (!this.config?.images.length) {
             return '';

src/background/PatchGenerator/PatchGenerator.editor.ts

@@ -55,13 +55,10 @@ export class EditorPatchGenerator extends AbsPatchGenerator<EditorPatchGenerator
 
     private get curConfig() {
         // 默认值实际在 package.json 中定义，会 deep merge
-        const cur: EditorPatchGeneratorConfig = {
+        return {
             ...new EditorPatchGeneratorConfig(),
             ...this.config
         };
-        // ------ 处理图片 ------
-        cur.images = this.normalizeImageUrls(cur.images);
-        return cur;
     }
 
     private getStyleByOptions(style: Record<string, string>, useFront: boolean): string {

src/background/PatchGenerator/PatchGenerator.fullscreen.ts

@@ -2,7 +2,7 @@ import { AbsPatchGenerator, css } from './PatchGenerator.base';
 
 export class FullscreenPatchGeneratorConfig {
     images = [] as string[];
-    opacity = 0.2; // 建议在 0.1 ~ 0.3
+    opacity = 0.1; // 建议在 0.1 ~ 0.3
     size = 'cover' as 'cover' | 'contain';
     position = 'center';
     interval = 0;
@@ -17,8 +17,7 @@ export class FullscreenPatchGenerator<T extends FullscreenPatchGeneratorConfig>
             ...new FullscreenPatchGeneratorConfig(),
             ...this.config
         };
-        // ------ 处理图片 ------
-        cur.images = this.normalizeImageUrls(cur.images);
+
         // ------ opacity ------
         if (cur.opacity < 0 || cur.opacity > 0.6) {
             cur.opacity = new FullscreenPatchGeneratorConfig().opacity;
@@ -35,15 +34,15 @@ export class FullscreenPatchGenerator<T extends FullscreenPatchGeneratorConfig>
                 content: '';
                 display: block;
                 position: absolute;
-                z-index: 10;
+                z-index: 1000;
                 inset: 0;
                 pointer-events: none;
                 background-size: ${size};
                 background-repeat: no-repeat;
                 /* background-attachment: fixed; // 兼容 code-server，其他的不影响 */
                 background-position: ${position};
                 opacity: ${opacity};
-                transition: 0.3s;
+                transition: 1s;
                 background-image: var(${this.cssvariable});
             }
         `;

src/background/PatchGenerator/PatchGenerator.panel.ts

@@ -22,7 +22,7 @@ export class PanelPatchGenerator extends FullscreenPatchGenerator<PanelPatchGene
                 background-size: ${size};
                 pointer-events: none;
                 opacity: ${opacity};
-                transition: 0.3s;
+                transition: 1s;
                 background-image: var(${this.cssvariable});
             }
         `;

src/background/PatchGenerator/PatchGenerator.sidebar.ts

@@ -22,7 +22,7 @@ export class SidebarPatchGenerator extends FullscreenPatchGenerator<SidebarPatch
                 background-size: ${size};
                 pointer-events: none;
                 opacity: ${opacity};
-                transition: 0.3s;
+                transition: 1s;
                 background-image: var(${this.cssvariable});
             }
         `;