ソースを参照

Merge branch 'iteration-20240417-subject' into jenkins

lex 1 年間 前
コミット
6600d4d3b8

+ 93 - 110
dev-dist/sw.js

@@ -1,110 +1,93 @@
-/**
- * Copyright 2018 Google Inc. All Rights Reserved.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *     http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// If the loader is already loaded, just stop.
-if (!self.define) {
-  const registry = {};
-
-  // Used for `eval` and `importScripts` where we can't get script URL by other means.
-  // In both cases, it's safe to use a global var because those functions are synchronous.
-  let nextDefineUri;
-
-  const singleRequire = (uri, parentUri) => {
-    uri = new URL(uri + '.js', parentUri).href;
-    return (
-      registry[uri] ||
-      new Promise(resolve => {
-        if ('document' in self) {
-          const script = document.createElement('script');
-          script.src = uri;
-          script.onload = resolve;
-          document.head.appendChild(script);
-        } else {
-          nextDefineUri = uri;
-          importScripts(uri);
-          resolve();
-        }
-      }).then(() => {
-        const promise = registry[uri];
-        if (!promise) {
-          throw new Error(`Module ${uri} didn’t register its module`);
-        }
-        return promise;
-      })
-    );
-  };
-
-  self.define = (depsNames, factory) => {
-    const uri =
-      nextDefineUri ||
-      ('document' in self ? document.currentScript.src : '') ||
-      location.href;
-    if (registry[uri]) {
-      // Module is already loading or loaded.
-      return;
-    }
-    const exports = {};
-    const require = depUri => singleRequire(depUri, uri);
-    const specialDeps = {
-      module: { uri },
-      exports,
-      require
-    };
-    registry[uri] = Promise.all(
-      depsNames.map(depName => specialDeps[depName] || require(depName))
-    ).then(deps => {
-      factory(...deps);
-      return exports;
-    });
-  };
-}
-define(['./workbox-5357ef54'], function (workbox) {
-  'use strict';
-
-  self.skipWaiting();
-  workbox.clientsClaim();
-
-  /**
-   * The precacheAndRoute() method efficiently caches and responds to
-   * requests for URLs in the manifest.
-   * See https://goo.gl/S9QRab
-   */
-<<<<<<< HEAD
-  workbox.precacheAndRoute(
-    [
-      {
-        url: 'registerSW.js',
-        revision: '3ca0b8505b4bec776b69afdba2768812'
-      },
-      {
-        url: 'index.html',
-        revision: '0.k9m6fls6u18'
-      }
-    ],
-    {}
-  );
-=======
-  workbox.precacheAndRoute([{
-    "url": "registerSW.js",
-    "revision": "3ca0b8505b4bec776b69afdba2768812"
-  }, {
-    "url": "index.html",
-    "revision": "0.siufbk958rg"
-  }], {});
->>>>>>> iteration-202409412-style
-  workbox.cleanupOutdatedCaches();
-  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
-    allowlist: [/^\/$/]
-  }));
-
-});
+/**
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// If the loader is already loaded, just stop.
+if (!self.define) {
+  const registry = {};
+
+  // Used for `eval` and `importScripts` where we can't get script URL by other means.
+  // In both cases, it's safe to use a global var because those functions are synchronous.
+  let nextDefineUri;
+
+  const singleRequire = (uri, parentUri) => {
+    uri = new URL(uri + '.js', parentUri).href;
+    return (
+      registry[uri] ||
+      new Promise(resolve => {
+        if ('document' in self) {
+          const script = document.createElement('script');
+          script.src = uri;
+          script.onload = resolve;
+          document.head.appendChild(script);
+        } else {
+          nextDefineUri = uri;
+          importScripts(uri);
+          resolve();
+        }
+      }).then(() => {
+        const promise = registry[uri];
+        if (!promise) {
+          throw new Error(`Module ${uri} didn’t register its module`);
+        }
+        return promise;
+      })
+    );
+  };
+
+  self.define = (depsNames, factory) => {
+    const uri =
+      nextDefineUri ||
+      ('document' in self ? document.currentScript.src : '') ||
+      location.href;
+    if (registry[uri]) {
+      // Module is already loading or loaded.
+      return;
+    }
+    const exports = {};
+    const require = depUri => singleRequire(depUri, uri);
+    const specialDeps = {
+      module: { uri },
+      exports,
+      require
+    };
+    registry[uri] = Promise.all(
+      depsNames.map(depName => specialDeps[depName] || require(depName))
+    ).then(deps => {
+      factory(...deps);
+      return exports;
+    });
+  };
+}
+define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
+
+  self.skipWaiting();
+  workbox.clientsClaim();
+
+  /**
+   * The precacheAndRoute() method efficiently caches and responds to
+   * requests for URLs in the manifest.
+   * See https://goo.gl/S9QRab
+   */
+  workbox.precacheAndRoute([{
+    "url": "registerSW.js",
+    "revision": "3ca0b8505b4bec776b69afdba2768812"
+  }, {
+    "url": "index.html",
+    "revision": "0.6i8p590kut8"
+  }], {});
+  workbox.cleanupOutdatedCaches();
+  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
+    allowlist: [/^\/$/]
+  }));
+
+});

+ 3391 - 0
dev-dist/workbox-b5f7729d.js

@@ -0,0 +1,3391 @@
+define(['exports'], (function (exports) { 'use strict';
+
+    // @ts-ignore
+    try {
+      self['workbox:core:7.0.0'] && _();
+    } catch (e) {}
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Claim any currently available clients once the service worker
+     * becomes active. This is normally used in conjunction with `skipWaiting()`.
+     *
+     * @memberof workbox-core
+     */
+    function clientsClaim() {
+      self.addEventListener('activate', () => self.clients.claim());
+    }
+
+    /*
+      Copyright 2019 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const logger = (() => {
+      // Don't overwrite this value if it's already set.
+      // See https://github.com/GoogleChrome/workbox/pull/2284#issuecomment-560470923
+      if (!('__WB_DISABLE_DEV_LOGS' in globalThis)) {
+        self.__WB_DISABLE_DEV_LOGS = false;
+      }
+      let inGroup = false;
+      const methodToColorMap = {
+        debug: `#7f8c8d`,
+        log: `#2ecc71`,
+        warn: `#f39c12`,
+        error: `#c0392b`,
+        groupCollapsed: `#3498db`,
+        groupEnd: null // No colored prefix on groupEnd
+      };
+      const print = function (method, args) {
+        if (self.__WB_DISABLE_DEV_LOGS) {
+          return;
+        }
+        if (method === 'groupCollapsed') {
+          // Safari doesn't print all console.groupCollapsed() arguments:
+          // https://bugs.webkit.org/show_bug.cgi?id=182754
+          if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+            console[method](...args);
+            return;
+          }
+        }
+        const styles = [`background: ${methodToColorMap[method]}`, `border-radius: 0.5em`, `color: white`, `font-weight: bold`, `padding: 2px 0.5em`];
+        // When in a group, the workbox prefix is not displayed.
+        const logPrefix = inGroup ? [] : ['%cworkbox', styles.join(';')];
+        console[method](...logPrefix, ...args);
+        if (method === 'groupCollapsed') {
+          inGroup = true;
+        }
+        if (method === 'groupEnd') {
+          inGroup = false;
+        }
+      };
+      // eslint-disable-next-line @typescript-eslint/ban-types
+      const api = {};
+      const loggerMethods = Object.keys(methodToColorMap);
+      for (const key of loggerMethods) {
+        const method = key;
+        api[method] = (...args) => {
+          print(method, args);
+        };
+      }
+      return api;
+    })();
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const messages = {
+      'invalid-value': ({
+        paramName,
+        validValueDescription,
+        value
+      }) => {
+        if (!paramName || !validValueDescription) {
+          throw new Error(`Unexpected input to 'invalid-value' error.`);
+        }
+        return `The '${paramName}' parameter was given a value with an ` + `unexpected value. ${validValueDescription} Received a value of ` + `${JSON.stringify(value)}.`;
+      },
+      'not-an-array': ({
+        moduleName,
+        className,
+        funcName,
+        paramName
+      }) => {
+        if (!moduleName || !className || !funcName || !paramName) {
+          throw new Error(`Unexpected input to 'not-an-array' error.`);
+        }
+        return `The parameter '${paramName}' passed into ` + `'${moduleName}.${className}.${funcName}()' must be an array.`;
+      },
+      'incorrect-type': ({
+        expectedType,
+        paramName,
+        moduleName,
+        className,
+        funcName
+      }) => {
+        if (!expectedType || !paramName || !moduleName || !funcName) {
+          throw new Error(`Unexpected input to 'incorrect-type' error.`);
+        }
+        const classNameStr = className ? `${className}.` : '';
+        return `The parameter '${paramName}' passed into ` + `'${moduleName}.${classNameStr}` + `${funcName}()' must be of type ${expectedType}.`;
+      },
+      'incorrect-class': ({
+        expectedClassName,
+        paramName,
+        moduleName,
+        className,
+        funcName,
+        isReturnValueProblem
+      }) => {
+        if (!expectedClassName || !moduleName || !funcName) {
+          throw new Error(`Unexpected input to 'incorrect-class' error.`);
+        }
+        const classNameStr = className ? `${className}.` : '';
+        if (isReturnValueProblem) {
+          return `The return value from ` + `'${moduleName}.${classNameStr}${funcName}()' ` + `must be an instance of class ${expectedClassName}.`;
+        }
+        return `The parameter '${paramName}' passed into ` + `'${moduleName}.${classNameStr}${funcName}()' ` + `must be an instance of class ${expectedClassName}.`;
+      },
+      'missing-a-method': ({
+        expectedMethod,
+        paramName,
+        moduleName,
+        className,
+        funcName
+      }) => {
+        if (!expectedMethod || !paramName || !moduleName || !className || !funcName) {
+          throw new Error(`Unexpected input to 'missing-a-method' error.`);
+        }
+        return `${moduleName}.${className}.${funcName}() expected the ` + `'${paramName}' parameter to expose a '${expectedMethod}' method.`;
+      },
+      'add-to-cache-list-unexpected-type': ({
+        entry
+      }) => {
+        return `An unexpected entry was passed to ` + `'workbox-precaching.PrecacheController.addToCacheList()' The entry ` + `'${JSON.stringify(entry)}' isn't supported. You must supply an array of ` + `strings with one or more characters, objects with a url property or ` + `Request objects.`;
+      },
+      'add-to-cache-list-conflicting-entries': ({
+        firstEntry,
+        secondEntry
+      }) => {
+        if (!firstEntry || !secondEntry) {
+          throw new Error(`Unexpected input to ` + `'add-to-cache-list-duplicate-entries' error.`);
+        }
+        return `Two of the entries passed to ` + `'workbox-precaching.PrecacheController.addToCacheList()' had the URL ` + `${firstEntry} but different revision details. Workbox is ` + `unable to cache and version the asset correctly. Please remove one ` + `of the entries.`;
+      },
+      'plugin-error-request-will-fetch': ({
+        thrownErrorMessage
+      }) => {
+        if (!thrownErrorMessage) {
+          throw new Error(`Unexpected input to ` + `'plugin-error-request-will-fetch', error.`);
+        }
+        return `An error was thrown by a plugins 'requestWillFetch()' method. ` + `The thrown error message was: '${thrownErrorMessage}'.`;
+      },
+      'invalid-cache-name': ({
+        cacheNameId,
+        value
+      }) => {
+        if (!cacheNameId) {
+          throw new Error(`Expected a 'cacheNameId' for error 'invalid-cache-name'`);
+        }
+        return `You must provide a name containing at least one character for ` + `setCacheDetails({${cacheNameId}: '...'}). Received a value of ` + `'${JSON.stringify(value)}'`;
+      },
+      'unregister-route-but-not-found-with-method': ({
+        method
+      }) => {
+        if (!method) {
+          throw new Error(`Unexpected input to ` + `'unregister-route-but-not-found-with-method' error.`);
+        }
+        return `The route you're trying to unregister was not  previously ` + `registered for the method type '${method}'.`;
+      },
+      'unregister-route-route-not-registered': () => {
+        return `The route you're trying to unregister was not previously ` + `registered.`;
+      },
+      'queue-replay-failed': ({
+        name
+      }) => {
+        return `Replaying the background sync queue '${name}' failed.`;
+      },
+      'duplicate-queue-name': ({
+        name
+      }) => {
+        return `The Queue name '${name}' is already being used. ` + `All instances of backgroundSync.Queue must be given unique names.`;
+      },
+      'expired-test-without-max-age': ({
+        methodName,
+        paramName
+      }) => {
+        return `The '${methodName}()' method can only be used when the ` + `'${paramName}' is used in the constructor.`;
+      },
+      'unsupported-route-type': ({
+        moduleName,
+        className,
+        funcName,
+        paramName
+      }) => {
+        return `The supplied '${paramName}' parameter was an unsupported type. ` + `Please check the docs for ${moduleName}.${className}.${funcName} for ` + `valid input types.`;
+      },
+      'not-array-of-class': ({
+        value,
+        expectedClass,
+        moduleName,
+        className,
+        funcName,
+        paramName
+      }) => {
+        return `The supplied '${paramName}' parameter must be an array of ` + `'${expectedClass}' objects. Received '${JSON.stringify(value)},'. ` + `Please check the call to ${moduleName}.${className}.${funcName}() ` + `to fix the issue.`;
+      },
+      'max-entries-or-age-required': ({
+        moduleName,
+        className,
+        funcName
+      }) => {
+        return `You must define either config.maxEntries or config.maxAgeSeconds` + `in ${moduleName}.${className}.${funcName}`;
+      },
+      'statuses-or-headers-required': ({
+        moduleName,
+        className,
+        funcName
+      }) => {
+        return `You must define either config.statuses or config.headers` + `in ${moduleName}.${className}.${funcName}`;
+      },
+      'invalid-string': ({
+        moduleName,
+        funcName,
+        paramName
+      }) => {
+        if (!paramName || !moduleName || !funcName) {
+          throw new Error(`Unexpected input to 'invalid-string' error.`);
+        }
+        return `When using strings, the '${paramName}' parameter must start with ` + `'http' (for cross-origin matches) or '/' (for same-origin matches). ` + `Please see the docs for ${moduleName}.${funcName}() for ` + `more info.`;
+      },
+      'channel-name-required': () => {
+        return `You must provide a channelName to construct a ` + `BroadcastCacheUpdate instance.`;
+      },
+      'invalid-responses-are-same-args': () => {
+        return `The arguments passed into responsesAreSame() appear to be ` + `invalid. Please ensure valid Responses are used.`;
+      },
+      'expire-custom-caches-only': () => {
+        return `You must provide a 'cacheName' property when using the ` + `expiration plugin with a runtime caching strategy.`;
+      },
+      'unit-must-be-bytes': ({
+        normalizedRangeHeader
+      }) => {
+        if (!normalizedRangeHeader) {
+          throw new Error(`Unexpected input to 'unit-must-be-bytes' error.`);
+        }
+        return `The 'unit' portion of the Range header must be set to 'bytes'. ` + `The Range header provided was "${normalizedRangeHeader}"`;
+      },
+      'single-range-only': ({
+        normalizedRangeHeader
+      }) => {
+        if (!normalizedRangeHeader) {
+          throw new Error(`Unexpected input to 'single-range-only' error.`);
+        }
+        return `Multiple ranges are not supported. Please use a  single start ` + `value, and optional end value. The Range header provided was ` + `"${normalizedRangeHeader}"`;
+      },
+      'invalid-range-values': ({
+        normalizedRangeHeader
+      }) => {
+        if (!normalizedRangeHeader) {
+          throw new Error(`Unexpected input to 'invalid-range-values' error.`);
+        }
+        return `The Range header is missing both start and end values. At least ` + `one of those values is needed. The Range header provided was ` + `"${normalizedRangeHeader}"`;
+      },
+      'no-range-header': () => {
+        return `No Range header was found in the Request provided.`;
+      },
+      'range-not-satisfiable': ({
+        size,
+        start,
+        end
+      }) => {
+        return `The start (${start}) and end (${end}) values in the Range are ` + `not satisfiable by the cached response, which is ${size} bytes.`;
+      },
+      'attempt-to-cache-non-get-request': ({
+        url,
+        method
+      }) => {
+        return `Unable to cache '${url}' because it is a '${method}' request and ` + `only 'GET' requests can be cached.`;
+      },
+      'cache-put-with-no-response': ({
+        url
+      }) => {
+        return `There was an attempt to cache '${url}' but the response was not ` + `defined.`;
+      },
+      'no-response': ({
+        url,
+        error
+      }) => {
+        let message = `The strategy could not generate a response for '${url}'.`;
+        if (error) {
+          message += ` The underlying error is ${error}.`;
+        }
+        return message;
+      },
+      'bad-precaching-response': ({
+        url,
+        status
+      }) => {
+        return `The precaching request for '${url}' failed` + (status ? ` with an HTTP status of ${status}.` : `.`);
+      },
+      'non-precached-url': ({
+        url
+      }) => {
+        return `createHandlerBoundToURL('${url}') was called, but that URL is ` + `not precached. Please pass in a URL that is precached instead.`;
+      },
+      'add-to-cache-list-conflicting-integrities': ({
+        url
+      }) => {
+        return `Two of the entries passed to ` + `'workbox-precaching.PrecacheController.addToCacheList()' had the URL ` + `${url} with different integrity values. Please remove one of them.`;
+      },
+      'missing-precache-entry': ({
+        cacheName,
+        url
+      }) => {
+        return `Unable to find a precached response in ${cacheName} for ${url}.`;
+      },
+      'cross-origin-copy-response': ({
+        origin
+      }) => {
+        return `workbox-core.copyResponse() can only be used with same-origin ` + `responses. It was passed a response with origin ${origin}.`;
+      },
+      'opaque-streams-source': ({
+        type
+      }) => {
+        const message = `One of the workbox-streams sources resulted in an ` + `'${type}' response.`;
+        if (type === 'opaqueredirect') {
+          return `${message} Please do not use a navigation request that results ` + `in a redirect as a source.`;
+        }
+        return `${message} Please ensure your sources are CORS-enabled.`;
+      }
+    };
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const generatorFunction = (code, details = {}) => {
+      const message = messages[code];
+      if (!message) {
+        throw new Error(`Unable to find message for code '${code}'.`);
+      }
+      return message(details);
+    };
+    const messageGenerator = generatorFunction;
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Workbox errors should be thrown with this class.
+     * This allows use to ensure the type easily in tests,
+     * helps developers identify errors from workbox
+     * easily and allows use to optimise error
+     * messages correctly.
+     *
+     * @private
+     */
+    class WorkboxError extends Error {
+      /**
+       *
+       * @param {string} errorCode The error code that
+       * identifies this particular error.
+       * @param {Object=} details Any relevant arguments
+       * that will help developers identify issues should
+       * be added as a key on the context object.
+       */
+      constructor(errorCode, details) {
+        const message = messageGenerator(errorCode, details);
+        super(message);
+        this.name = errorCode;
+        this.details = details;
+      }
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /*
+     * This method throws if the supplied value is not an array.
+     * The destructed values are required to produce a meaningful error for users.
+     * The destructed and restructured object is so it's clear what is
+     * needed.
+     */
+    const isArray = (value, details) => {
+      if (!Array.isArray(value)) {
+        throw new WorkboxError('not-an-array', details);
+      }
+    };
+    const hasMethod = (object, expectedMethod, details) => {
+      const type = typeof object[expectedMethod];
+      if (type !== 'function') {
+        details['expectedMethod'] = expectedMethod;
+        throw new WorkboxError('missing-a-method', details);
+      }
+    };
+    const isType = (object, expectedType, details) => {
+      if (typeof object !== expectedType) {
+        details['expectedType'] = expectedType;
+        throw new WorkboxError('incorrect-type', details);
+      }
+    };
+    const isInstance = (object,
+    // Need the general type to do the check later.
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    expectedClass, details) => {
+      if (!(object instanceof expectedClass)) {
+        details['expectedClassName'] = expectedClass.name;
+        throw new WorkboxError('incorrect-class', details);
+      }
+    };
+    const isOneOf = (value, validValues, details) => {
+      if (!validValues.includes(value)) {
+        details['validValueDescription'] = `Valid values are ${JSON.stringify(validValues)}.`;
+        throw new WorkboxError('invalid-value', details);
+      }
+    };
+    const isArrayOfClass = (value,
+    // Need general type to do check later.
+    expectedClass,
+    // eslint-disable-line
+    details) => {
+      const error = new WorkboxError('not-array-of-class', details);
+      if (!Array.isArray(value)) {
+        throw error;
+      }
+      for (const item of value) {
+        if (!(item instanceof expectedClass)) {
+          throw error;
+        }
+      }
+    };
+    const finalAssertExports = {
+      hasMethod,
+      isArray,
+      isInstance,
+      isOneOf,
+      isType,
+      isArrayOfClass
+    };
+
+    // @ts-ignore
+    try {
+      self['workbox:routing:7.0.0'] && _();
+    } catch (e) {}
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * The default HTTP method, 'GET', used when there's no specific method
+     * configured for a route.
+     *
+     * @type {string}
+     *
+     * @private
+     */
+    const defaultMethod = 'GET';
+    /**
+     * The list of valid HTTP methods associated with requests that could be routed.
+     *
+     * @type {Array<string>}
+     *
+     * @private
+     */
+    const validMethods = ['DELETE', 'GET', 'HEAD', 'PATCH', 'POST', 'PUT'];
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * @param {function()|Object} handler Either a function, or an object with a
+     * 'handle' method.
+     * @return {Object} An object with a handle method.
+     *
+     * @private
+     */
+    const normalizeHandler = handler => {
+      if (handler && typeof handler === 'object') {
+        {
+          finalAssertExports.hasMethod(handler, 'handle', {
+            moduleName: 'workbox-routing',
+            className: 'Route',
+            funcName: 'constructor',
+            paramName: 'handler'
+          });
+        }
+        return handler;
+      } else {
+        {
+          finalAssertExports.isType(handler, 'function', {
+            moduleName: 'workbox-routing',
+            className: 'Route',
+            funcName: 'constructor',
+            paramName: 'handler'
+          });
+        }
+        return {
+          handle: handler
+        };
+      }
+    };
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * A `Route` consists of a pair of callback functions, "match" and "handler".
+     * The "match" callback determine if a route should be used to "handle" a
+     * request by returning a non-falsy value if it can. The "handler" callback
+     * is called when there is a match and should return a Promise that resolves
+     * to a `Response`.
+     *
+     * @memberof workbox-routing
+     */
+    class Route {
+      /**
+       * Constructor for Route class.
+       *
+       * @param {workbox-routing~matchCallback} match
+       * A callback function that determines whether the route matches a given
+       * `fetch` event by returning a non-falsy value.
+       * @param {workbox-routing~handlerCallback} handler A callback
+       * function that returns a Promise resolving to a Response.
+       * @param {string} [method='GET'] The HTTP method to match the Route
+       * against.
+       */
+      constructor(match, handler, method = defaultMethod) {
+        {
+          finalAssertExports.isType(match, 'function', {
+            moduleName: 'workbox-routing',
+            className: 'Route',
+            funcName: 'constructor',
+            paramName: 'match'
+          });
+          if (method) {
+            finalAssertExports.isOneOf(method, validMethods, {
+              paramName: 'method'
+            });
+          }
+        }
+        // These values are referenced directly by Router so cannot be
+        // altered by minificaton.
+        this.handler = normalizeHandler(handler);
+        this.match = match;
+        this.method = method;
+      }
+      /**
+       *
+       * @param {workbox-routing-handlerCallback} handler A callback
+       * function that returns a Promise resolving to a Response
+       */
+      setCatchHandler(handler) {
+        this.catchHandler = normalizeHandler(handler);
+      }
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * RegExpRoute makes it easy to create a regular expression based
+     * {@link workbox-routing.Route}.
+     *
+     * For same-origin requests the RegExp only needs to match part of the URL. For
+     * requests against third-party servers, you must define a RegExp that matches
+     * the start of the URL.
+     *
+     * @memberof workbox-routing
+     * @extends workbox-routing.Route
+     */
+    class RegExpRoute extends Route {
+      /**
+       * If the regular expression contains
+       * [capture groups]{@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#grouping-back-references},
+       * the captured values will be passed to the
+       * {@link workbox-routing~handlerCallback} `params`
+       * argument.
+       *
+       * @param {RegExp} regExp The regular expression to match against URLs.
+       * @param {workbox-routing~handlerCallback} handler A callback
+       * function that returns a Promise resulting in a Response.
+       * @param {string} [method='GET'] The HTTP method to match the Route
+       * against.
+       */
+      constructor(regExp, handler, method) {
+        {
+          finalAssertExports.isInstance(regExp, RegExp, {
+            moduleName: 'workbox-routing',
+            className: 'RegExpRoute',
+            funcName: 'constructor',
+            paramName: 'pattern'
+          });
+        }
+        const match = ({
+          url
+        }) => {
+          const result = regExp.exec(url.href);
+          // Return immediately if there's no match.
+          if (!result) {
+            return;
+          }
+          // Require that the match start at the first character in the URL string
+          // if it's a cross-origin request.
+          // See https://github.com/GoogleChrome/workbox/issues/281 for the context
+          // behind this behavior.
+          if (url.origin !== location.origin && result.index !== 0) {
+            {
+              logger.debug(`The regular expression '${regExp.toString()}' only partially matched ` + `against the cross-origin URL '${url.toString()}'. RegExpRoute's will only ` + `handle cross-origin requests if they match the entire URL.`);
+            }
+            return;
+          }
+          // If the route matches, but there aren't any capture groups defined, then
+          // this will return [], which is truthy and therefore sufficient to
+          // indicate a match.
+          // If there are capture groups, then it will return their values.
+          return result.slice(1);
+        };
+        super(match, handler, method);
+      }
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const getFriendlyURL = url => {
+      const urlObj = new URL(String(url), location.href);
+      // See https://github.com/GoogleChrome/workbox/issues/2323
+      // We want to include everything, except for the origin if it's same-origin.
+      return urlObj.href.replace(new RegExp(`^${location.origin}`), '');
+    };
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * The Router can be used to process a `FetchEvent` using one or more
+     * {@link workbox-routing.Route}, responding with a `Response` if
+     * a matching route exists.
+     *
+     * If no route matches a given a request, the Router will use a "default"
+     * handler if one is defined.
+     *
+     * Should the matching Route throw an error, the Router will use a "catch"
+     * handler if one is defined to gracefully deal with issues and respond with a
+     * Request.
+     *
+     * If a request matches multiple routes, the **earliest** registered route will
+     * be used to respond to the request.
+     *
+     * @memberof workbox-routing
+     */
+    class Router {
+      /**
+       * Initializes a new Router.
+       */
+      constructor() {
+        this._routes = new Map();
+        this._defaultHandlerMap = new Map();
+      }
+      /**
+       * @return {Map<string, Array<workbox-routing.Route>>} routes A `Map` of HTTP
+       * method name ('GET', etc.) to an array of all the corresponding `Route`
+       * instances that are registered.
+       */
+      get routes() {
+        return this._routes;
+      }
+      /**
+       * Adds a fetch event listener to respond to events when a route matches
+       * the event's request.
+       */
+      addFetchListener() {
+        // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705
+        self.addEventListener('fetch', event => {
+          const {
+            request
+          } = event;
+          const responsePromise = this.handleRequest({
+            request,
+            event
+          });
+          if (responsePromise) {
+            event.respondWith(responsePromise);
+          }
+        });
+      }
+      /**
+       * Adds a message event listener for URLs to cache from the window.
+       * This is useful to cache resources loaded on the page prior to when the
+       * service worker started controlling it.
+       *
+       * The format of the message data sent from the window should be as follows.
+       * Where the `urlsToCache` array may consist of URL strings or an array of
+       * URL string + `requestInit` object (the same as you'd pass to `fetch()`).
+       *
+       * ```
+       * {
+       *   type: 'CACHE_URLS',
+       *   payload: {
+       *     urlsToCache: [
+       *       './script1.js',
+       *       './script2.js',
+       *       ['./script3.js', {mode: 'no-cors'}],
+       *     ],
+       *   },
+       * }
+       * ```
+       */
+      addCacheListener() {
+        // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705
+        self.addEventListener('message', event => {
+          // event.data is type 'any'
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          if (event.data && event.data.type === 'CACHE_URLS') {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const {
+              payload
+            } = event.data;
+            {
+              logger.debug(`Caching URLs from the window`, payload.urlsToCache);
+            }
+            const requestPromises = Promise.all(payload.urlsToCache.map(entry => {
+              if (typeof entry === 'string') {
+                entry = [entry];
+              }
+              const request = new Request(...entry);
+              return this.handleRequest({
+                request,
+                event
+              });
+              // TODO(philipwalton): TypeScript errors without this typecast for
+              // some reason (probably a bug). The real type here should work but
+              // doesn't: `Array<Promise<Response> | undefined>`.
+            })); // TypeScript
+            event.waitUntil(requestPromises);
+            // If a MessageChannel was used, reply to the message on success.
+            if (event.ports && event.ports[0]) {
+              void requestPromises.then(() => event.ports[0].postMessage(true));
+            }
+          }
+        });
+      }
+      /**
+       * Apply the routing rules to a FetchEvent object to get a Response from an
+       * appropriate Route's handler.
+       *
+       * @param {Object} options
+       * @param {Request} options.request The request to handle.
+       * @param {ExtendableEvent} options.event The event that triggered the
+       *     request.
+       * @return {Promise<Response>|undefined} A promise is returned if a
+       *     registered route can handle the request. If there is no matching
+       *     route and there's no `defaultHandler`, `undefined` is returned.
+       */
+      handleRequest({
+        request,
+        event
+      }) {
+        {
+          finalAssertExports.isInstance(request, Request, {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'handleRequest',
+            paramName: 'options.request'
+          });
+        }
+        const url = new URL(request.url, location.href);
+        if (!url.protocol.startsWith('http')) {
+          {
+            logger.debug(`Workbox Router only supports URLs that start with 'http'.`);
+          }
+          return;
+        }
+        const sameOrigin = url.origin === location.origin;
+        const {
+          params,
+          route
+        } = this.findMatchingRoute({
+          event,
+          request,
+          sameOrigin,
+          url
+        });
+        let handler = route && route.handler;
+        const debugMessages = [];
+        {
+          if (handler) {
+            debugMessages.push([`Found a route to handle this request:`, route]);
+            if (params) {
+              debugMessages.push([`Passing the following params to the route's handler:`, params]);
+            }
+          }
+        }
+        // If we don't have a handler because there was no matching route, then
+        // fall back to defaultHandler if that's defined.
+        const method = request.method;
+        if (!handler && this._defaultHandlerMap.has(method)) {
+          {
+            debugMessages.push(`Failed to find a matching route. Falling ` + `back to the default handler for ${method}.`);
+          }
+          handler = this._defaultHandlerMap.get(method);
+        }
+        if (!handler) {
+          {
+            // No handler so Workbox will do nothing. If logs is set of debug
+            // i.e. verbose, we should print out this information.
+            logger.debug(`No route found for: ${getFriendlyURL(url)}`);
+          }
+          return;
+        }
+        {
+          // We have a handler, meaning Workbox is going to handle the route.
+          // print the routing details to the console.
+          logger.groupCollapsed(`Router is responding to: ${getFriendlyURL(url)}`);
+          debugMessages.forEach(msg => {
+            if (Array.isArray(msg)) {
+              logger.log(...msg);
+            } else {
+              logger.log(msg);
+            }
+          });
+          logger.groupEnd();
+        }
+        // Wrap in try and catch in case the handle method throws a synchronous
+        // error. It should still callback to the catch handler.
+        let responsePromise;
+        try {
+          responsePromise = handler.handle({
+            url,
+            request,
+            event,
+            params
+          });
+        } catch (err) {
+          responsePromise = Promise.reject(err);
+        }
+        // Get route's catch handler, if it exists
+        const catchHandler = route && route.catchHandler;
+        if (responsePromise instanceof Promise && (this._catchHandler || catchHandler)) {
+          responsePromise = responsePromise.catch(async err => {
+            // If there's a route catch handler, process that first
+            if (catchHandler) {
+              {
+                // Still include URL here as it will be async from the console group
+                // and may not make sense without the URL
+                logger.groupCollapsed(`Error thrown when responding to: ` + ` ${getFriendlyURL(url)}. Falling back to route's Catch Handler.`);
+                logger.error(`Error thrown by:`, route);
+                logger.error(err);
+                logger.groupEnd();
+              }
+              try {
+                return await catchHandler.handle({
+                  url,
+                  request,
+                  event,
+                  params
+                });
+              } catch (catchErr) {
+                if (catchErr instanceof Error) {
+                  err = catchErr;
+                }
+              }
+            }
+            if (this._catchHandler) {
+              {
+                // Still include URL here as it will be async from the console group
+                // and may not make sense without the URL
+                logger.groupCollapsed(`Error thrown when responding to: ` + ` ${getFriendlyURL(url)}. Falling back to global Catch Handler.`);
+                logger.error(`Error thrown by:`, route);
+                logger.error(err);
+                logger.groupEnd();
+              }
+              return this._catchHandler.handle({
+                url,
+                request,
+                event
+              });
+            }
+            throw err;
+          });
+        }
+        return responsePromise;
+      }
+      /**
+       * Checks a request and URL (and optionally an event) against the list of
+       * registered routes, and if there's a match, returns the corresponding
+       * route along with any params generated by the match.
+       *
+       * @param {Object} options
+       * @param {URL} options.url
+       * @param {boolean} options.sameOrigin The result of comparing `url.origin`
+       *     against the current origin.
+       * @param {Request} options.request The request to match.
+       * @param {Event} options.event The corresponding event.
+       * @return {Object} An object with `route` and `params` properties.
+       *     They are populated if a matching route was found or `undefined`
+       *     otherwise.
+       */
+      findMatchingRoute({
+        url,
+        sameOrigin,
+        request,
+        event
+      }) {
+        const routes = this._routes.get(request.method) || [];
+        for (const route of routes) {
+          let params;
+          // route.match returns type any, not possible to change right now.
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          const matchResult = route.match({
+            url,
+            sameOrigin,
+            request,
+            event
+          });
+          if (matchResult) {
+            {
+              // Warn developers that using an async matchCallback is almost always
+              // not the right thing to do.
+              if (matchResult instanceof Promise) {
+                logger.warn(`While routing ${getFriendlyURL(url)}, an async ` + `matchCallback function was used. Please convert the ` + `following route to use a synchronous matchCallback function:`, route);
+              }
+            }
+            // See https://github.com/GoogleChrome/workbox/issues/2079
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            params = matchResult;
+            if (Array.isArray(params) && params.length === 0) {
+              // Instead of passing an empty array in as params, use undefined.
+              params = undefined;
+            } else if (matchResult.constructor === Object &&
+            // eslint-disable-line
+            Object.keys(matchResult).length === 0) {
+              // Instead of passing an empty object in as params, use undefined.
+              params = undefined;
+            } else if (typeof matchResult === 'boolean') {
+              // For the boolean value true (rather than just something truth-y),
+              // don't set params.
+              // See https://github.com/GoogleChrome/workbox/pull/2134#issuecomment-513924353
+              params = undefined;
+            }
+            // Return early if have a match.
+            return {
+              route,
+              params
+            };
+          }
+        }
+        // If no match was found above, return and empty object.
+        return {};
+      }
+      /**
+       * Define a default `handler` that's called when no routes explicitly
+       * match the incoming request.
+       *
+       * Each HTTP method ('GET', 'POST', etc.) gets its own default handler.
+       *
+       * Without a default handler, unmatched requests will go against the
+       * network as if there were no service worker present.
+       *
+       * @param {workbox-routing~handlerCallback} handler A callback
+       * function that returns a Promise resulting in a Response.
+       * @param {string} [method='GET'] The HTTP method to associate with this
+       * default handler. Each method has its own default.
+       */
+      setDefaultHandler(handler, method = defaultMethod) {
+        this._defaultHandlerMap.set(method, normalizeHandler(handler));
+      }
+      /**
+       * If a Route throws an error while handling a request, this `handler`
+       * will be called and given a chance to provide a response.
+       *
+       * @param {workbox-routing~handlerCallback} handler A callback
+       * function that returns a Promise resulting in a Response.
+       */
+      setCatchHandler(handler) {
+        this._catchHandler = normalizeHandler(handler);
+      }
+      /**
+       * Registers a route with the router.
+       *
+       * @param {workbox-routing.Route} route The route to register.
+       */
+      registerRoute(route) {
+        {
+          finalAssertExports.isType(route, 'object', {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'registerRoute',
+            paramName: 'route'
+          });
+          finalAssertExports.hasMethod(route, 'match', {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'registerRoute',
+            paramName: 'route'
+          });
+          finalAssertExports.isType(route.handler, 'object', {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'registerRoute',
+            paramName: 'route'
+          });
+          finalAssertExports.hasMethod(route.handler, 'handle', {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'registerRoute',
+            paramName: 'route.handler'
+          });
+          finalAssertExports.isType(route.method, 'string', {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'registerRoute',
+            paramName: 'route.method'
+          });
+        }
+        if (!this._routes.has(route.method)) {
+          this._routes.set(route.method, []);
+        }
+        // Give precedence to all of the earlier routes by adding this additional
+        // route to the end of the array.
+        this._routes.get(route.method).push(route);
+      }
+      /**
+       * Unregisters a route with the router.
+       *
+       * @param {workbox-routing.Route} route The route to unregister.
+       */
+      unregisterRoute(route) {
+        if (!this._routes.has(route.method)) {
+          throw new WorkboxError('unregister-route-but-not-found-with-method', {
+            method: route.method
+          });
+        }
+        const routeIndex = this._routes.get(route.method).indexOf(route);
+        if (routeIndex > -1) {
+          this._routes.get(route.method).splice(routeIndex, 1);
+        } else {
+          throw new WorkboxError('unregister-route-route-not-registered');
+        }
+      }
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    let defaultRouter;
+    /**
+     * Creates a new, singleton Router instance if one does not exist. If one
+     * does already exist, that instance is returned.
+     *
+     * @private
+     * @return {Router}
+     */
+    const getOrCreateDefaultRouter = () => {
+      if (!defaultRouter) {
+        defaultRouter = new Router();
+        // The helpers that use the default Router assume these listeners exist.
+        defaultRouter.addFetchListener();
+        defaultRouter.addCacheListener();
+      }
+      return defaultRouter;
+    };
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Easily register a RegExp, string, or function with a caching
+     * strategy to a singleton Router instance.
+     *
+     * This method will generate a Route for you if needed and
+     * call {@link workbox-routing.Router#registerRoute}.
+     *
+     * @param {RegExp|string|workbox-routing.Route~matchCallback|workbox-routing.Route} capture
+     * If the capture param is a `Route`, all other arguments will be ignored.
+     * @param {workbox-routing~handlerCallback} [handler] A callback
+     * function that returns a Promise resulting in a Response. This parameter
+     * is required if `capture` is not a `Route` object.
+     * @param {string} [method='GET'] The HTTP method to match the Route
+     * against.
+     * @return {workbox-routing.Route} The generated `Route`.
+     *
+     * @memberof workbox-routing
+     */
+    function registerRoute(capture, handler, method) {
+      let route;
+      if (typeof capture === 'string') {
+        const captureUrl = new URL(capture, location.href);
+        {
+          if (!(capture.startsWith('/') || capture.startsWith('http'))) {
+            throw new WorkboxError('invalid-string', {
+              moduleName: 'workbox-routing',
+              funcName: 'registerRoute',
+              paramName: 'capture'
+            });
+          }
+          // We want to check if Express-style wildcards are in the pathname only.
+          // TODO: Remove this log message in v4.
+          const valueToCheck = capture.startsWith('http') ? captureUrl.pathname : capture;
+          // See https://github.com/pillarjs/path-to-regexp#parameters
+          const wildcards = '[*:?+]';
+          if (new RegExp(`${wildcards}`).exec(valueToCheck)) {
+            logger.debug(`The '$capture' parameter contains an Express-style wildcard ` + `character (${wildcards}). Strings are now always interpreted as ` + `exact matches; use a RegExp for partial or wildcard matches.`);
+          }
+        }
+        const matchCallback = ({
+          url
+        }) => {
+          {
+            if (url.pathname === captureUrl.pathname && url.origin !== captureUrl.origin) {
+              logger.debug(`${capture} only partially matches the cross-origin URL ` + `${url.toString()}. This route will only handle cross-origin requests ` + `if they match the entire URL.`);
+            }
+          }
+          return url.href === captureUrl.href;
+        };
+        // If `capture` is a string then `handler` and `method` must be present.
+        route = new Route(matchCallback, handler, method);
+      } else if (capture instanceof RegExp) {
+        // If `capture` is a `RegExp` then `handler` and `method` must be present.
+        route = new RegExpRoute(capture, handler, method);
+      } else if (typeof capture === 'function') {
+        // If `capture` is a function then `handler` and `method` must be present.
+        route = new Route(capture, handler, method);
+      } else if (capture instanceof Route) {
+        route = capture;
+      } else {
+        throw new WorkboxError('unsupported-route-type', {
+          moduleName: 'workbox-routing',
+          funcName: 'registerRoute',
+          paramName: 'capture'
+        });
+      }
+      const defaultRouter = getOrCreateDefaultRouter();
+      defaultRouter.registerRoute(route);
+      return route;
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const _cacheNameDetails = {
+      googleAnalytics: 'googleAnalytics',
+      precache: 'precache-v2',
+      prefix: 'workbox',
+      runtime: 'runtime',
+      suffix: typeof registration !== 'undefined' ? registration.scope : ''
+    };
+    const _createCacheName = cacheName => {
+      return [_cacheNameDetails.prefix, cacheName, _cacheNameDetails.suffix].filter(value => value && value.length > 0).join('-');
+    };
+    const eachCacheNameDetail = fn => {
+      for (const key of Object.keys(_cacheNameDetails)) {
+        fn(key);
+      }
+    };
+    const cacheNames = {
+      updateDetails: details => {
+        eachCacheNameDetail(key => {
+          if (typeof details[key] === 'string') {
+            _cacheNameDetails[key] = details[key];
+          }
+        });
+      },
+      getGoogleAnalyticsName: userCacheName => {
+        return userCacheName || _createCacheName(_cacheNameDetails.googleAnalytics);
+      },
+      getPrecacheName: userCacheName => {
+        return userCacheName || _createCacheName(_cacheNameDetails.precache);
+      },
+      getPrefix: () => {
+        return _cacheNameDetails.prefix;
+      },
+      getRuntimeName: userCacheName => {
+        return userCacheName || _createCacheName(_cacheNameDetails.runtime);
+      },
+      getSuffix: () => {
+        return _cacheNameDetails.suffix;
+      }
+    };
+
+    /*
+      Copyright 2020 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * A utility method that makes it easier to use `event.waitUntil` with
+     * async functions and return the result.
+     *
+     * @param {ExtendableEvent} event
+     * @param {Function} asyncFn
+     * @return {Function}
+     * @private
+     */
+    function waitUntil(event, asyncFn) {
+      const returnPromise = asyncFn();
+      event.waitUntil(returnPromise);
+      return returnPromise;
+    }
+
+    // @ts-ignore
+    try {
+      self['workbox:precaching:7.0.0'] && _();
+    } catch (e) {}
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    // Name of the search parameter used to store revision info.
+    const REVISION_SEARCH_PARAM = '__WB_REVISION__';
+    /**
+     * Converts a manifest entry into a versioned URL suitable for precaching.
+     *
+     * @param {Object|string} entry
+     * @return {string} A URL with versioning info.
+     *
+     * @private
+     * @memberof workbox-precaching
+     */
+    function createCacheKey(entry) {
+      if (!entry) {
+        throw new WorkboxError('add-to-cache-list-unexpected-type', {
+          entry
+        });
+      }
+      // If a precache manifest entry is a string, it's assumed to be a versioned
+      // URL, like '/app.abcd1234.js'. Return as-is.
+      if (typeof entry === 'string') {
+        const urlObject = new URL(entry, location.href);
+        return {
+          cacheKey: urlObject.href,
+          url: urlObject.href
+        };
+      }
+      const {
+        revision,
+        url
+      } = entry;
+      if (!url) {
+        throw new WorkboxError('add-to-cache-list-unexpected-type', {
+          entry
+        });
+      }
+      // If there's just a URL and no revision, then it's also assumed to be a
+      // versioned URL.
+      if (!revision) {
+        const urlObject = new URL(url, location.href);
+        return {
+          cacheKey: urlObject.href,
+          url: urlObject.href
+        };
+      }
+      // Otherwise, construct a properly versioned URL using the custom Workbox
+      // search parameter along with the revision info.
+      const cacheKeyURL = new URL(url, location.href);
+      const originalURL = new URL(url, location.href);
+      cacheKeyURL.searchParams.set(REVISION_SEARCH_PARAM, revision);
+      return {
+        cacheKey: cacheKeyURL.href,
+        url: originalURL.href
+      };
+    }
+
+    /*
+      Copyright 2020 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * A plugin, designed to be used with PrecacheController, to determine the
+     * of assets that were updated (or not updated) during the install event.
+     *
+     * @private
+     */
+    class PrecacheInstallReportPlugin {
+      constructor() {
+        this.updatedURLs = [];
+        this.notUpdatedURLs = [];
+        this.handlerWillStart = async ({
+          request,
+          state
+        }) => {
+          // TODO: `state` should never be undefined...
+          if (state) {
+            state.originalRequest = request;
+          }
+        };
+        this.cachedResponseWillBeUsed = async ({
+          event,
+          state,
+          cachedResponse
+        }) => {
+          if (event.type === 'install') {
+            if (state && state.originalRequest && state.originalRequest instanceof Request) {
+              // TODO: `state` should never be undefined...
+              const url = state.originalRequest.url;
+              if (cachedResponse) {
+                this.notUpdatedURLs.push(url);
+              } else {
+                this.updatedURLs.push(url);
+              }
+            }
+          }
+          return cachedResponse;
+        };
+      }
+    }
+
+    /*
+      Copyright 2020 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * A plugin, designed to be used with PrecacheController, to translate URLs into
+     * the corresponding cache key, based on the current revision info.
+     *
+     * @private
+     */
+    class PrecacheCacheKeyPlugin {
+      constructor({
+        precacheController
+      }) {
+        this.cacheKeyWillBeUsed = async ({
+          request,
+          params
+        }) => {
+          // Params is type any, can't change right now.
+          /* eslint-disable */
+          const cacheKey = (params === null || params === void 0 ? void 0 : params.cacheKey) || this._precacheController.getCacheKeyForURL(request.url);
+          /* eslint-enable */
+          return cacheKey ? new Request(cacheKey, {
+            headers: request.headers
+          }) : request;
+        };
+        this._precacheController = precacheController;
+      }
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * @param {string} groupTitle
+     * @param {Array<string>} deletedURLs
+     *
+     * @private
+     */
+    const logGroup = (groupTitle, deletedURLs) => {
+      logger.groupCollapsed(groupTitle);
+      for (const url of deletedURLs) {
+        logger.log(url);
+      }
+      logger.groupEnd();
+    };
+    /**
+     * @param {Array<string>} deletedURLs
+     *
+     * @private
+     * @memberof workbox-precaching
+     */
+    function printCleanupDetails(deletedURLs) {
+      const deletionCount = deletedURLs.length;
+      if (deletionCount > 0) {
+        logger.groupCollapsed(`During precaching cleanup, ` + `${deletionCount} cached ` + `request${deletionCount === 1 ? ' was' : 's were'} deleted.`);
+        logGroup('Deleted Cache Requests', deletedURLs);
+        logger.groupEnd();
+      }
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * @param {string} groupTitle
+     * @param {Array<string>} urls
+     *
+     * @private
+     */
+    function _nestedGroup(groupTitle, urls) {
+      if (urls.length === 0) {
+        return;
+      }
+      logger.groupCollapsed(groupTitle);
+      for (const url of urls) {
+        logger.log(url);
+      }
+      logger.groupEnd();
+    }
+    /**
+     * @param {Array<string>} urlsToPrecache
+     * @param {Array<string>} urlsAlreadyPrecached
+     *
+     * @private
+     * @memberof workbox-precaching
+     */
+    function printInstallDetails(urlsToPrecache, urlsAlreadyPrecached) {
+      const precachedCount = urlsToPrecache.length;
+      const alreadyPrecachedCount = urlsAlreadyPrecached.length;
+      if (precachedCount || alreadyPrecachedCount) {
+        let message = `Precaching ${precachedCount} file${precachedCount === 1 ? '' : 's'}.`;
+        if (alreadyPrecachedCount > 0) {
+          message += ` ${alreadyPrecachedCount} ` + `file${alreadyPrecachedCount === 1 ? ' is' : 's are'} already cached.`;
+        }
+        logger.groupCollapsed(message);
+        _nestedGroup(`View newly precached URLs.`, urlsToPrecache);
+        _nestedGroup(`View previously precached URLs.`, urlsAlreadyPrecached);
+        logger.groupEnd();
+      }
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    let supportStatus;
+    /**
+     * A utility function that determines whether the current browser supports
+     * constructing a new `Response` from a `response.body` stream.
+     *
+     * @return {boolean} `true`, if the current browser can successfully
+     *     construct a `Response` from a `response.body` stream, `false` otherwise.
+     *
+     * @private
+     */
+    function canConstructResponseFromBodyStream() {
+      if (supportStatus === undefined) {
+        const testResponse = new Response('');
+        if ('body' in testResponse) {
+          try {
+            new Response(testResponse.body);
+            supportStatus = true;
+          } catch (error) {
+            supportStatus = false;
+          }
+        }
+        supportStatus = false;
+      }
+      return supportStatus;
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Allows developers to copy a response and modify its `headers`, `status`,
+     * or `statusText` values (the values settable via a
+     * [`ResponseInit`]{@link https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#Syntax}
+     * object in the constructor).
+     * To modify these values, pass a function as the second argument. That
+     * function will be invoked with a single object with the response properties
+     * `{headers, status, statusText}`. The return value of this function will
+     * be used as the `ResponseInit` for the new `Response`. To change the values
+     * either modify the passed parameter(s) and return it, or return a totally
+     * new object.
+     *
+     * This method is intentionally limited to same-origin responses, regardless of
+     * whether CORS was used or not.
+     *
+     * @param {Response} response
+     * @param {Function} modifier
+     * @memberof workbox-core
+     */
+    async function copyResponse(response, modifier) {
+      let origin = null;
+      // If response.url isn't set, assume it's cross-origin and keep origin null.
+      if (response.url) {
+        const responseURL = new URL(response.url);
+        origin = responseURL.origin;
+      }
+      if (origin !== self.location.origin) {
+        throw new WorkboxError('cross-origin-copy-response', {
+          origin
+        });
+      }
+      const clonedResponse = response.clone();
+      // Create a fresh `ResponseInit` object by cloning the headers.
+      const responseInit = {
+        headers: new Headers(clonedResponse.headers),
+        status: clonedResponse.status,
+        statusText: clonedResponse.statusText
+      };
+      // Apply any user modifications.
+      const modifiedResponseInit = modifier ? modifier(responseInit) : responseInit;
+      // Create the new response from the body stream and `ResponseInit`
+      // modifications. Note: not all browsers support the Response.body stream,
+      // so fall back to reading the entire body into memory as a blob.
+      const body = canConstructResponseFromBodyStream() ? clonedResponse.body : await clonedResponse.blob();
+      return new Response(body, modifiedResponseInit);
+    }
+
+    /*
+      Copyright 2020 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    function stripParams(fullURL, ignoreParams) {
+      const strippedURL = new URL(fullURL);
+      for (const param of ignoreParams) {
+        strippedURL.searchParams.delete(param);
+      }
+      return strippedURL.href;
+    }
+    /**
+     * Matches an item in the cache, ignoring specific URL params. This is similar
+     * to the `ignoreSearch` option, but it allows you to ignore just specific
+     * params (while continuing to match on the others).
+     *
+     * @private
+     * @param {Cache} cache
+     * @param {Request} request
+     * @param {Object} matchOptions
+     * @param {Array<string>} ignoreParams
+     * @return {Promise<Response|undefined>}
+     */
+    async function cacheMatchIgnoreParams(cache, request, ignoreParams, matchOptions) {
+      const strippedRequestURL = stripParams(request.url, ignoreParams);
+      // If the request doesn't include any ignored params, match as normal.
+      if (request.url === strippedRequestURL) {
+        return cache.match(request, matchOptions);
+      }
+      // Otherwise, match by comparing keys
+      const keysOptions = Object.assign(Object.assign({}, matchOptions), {
+        ignoreSearch: true
+      });
+      const cacheKeys = await cache.keys(request, keysOptions);
+      for (const cacheKey of cacheKeys) {
+        const strippedCacheKeyURL = stripParams(cacheKey.url, ignoreParams);
+        if (strippedRequestURL === strippedCacheKeyURL) {
+          return cache.match(cacheKey, matchOptions);
+        }
+      }
+      return;
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * The Deferred class composes Promises in a way that allows for them to be
+     * resolved or rejected from outside the constructor. In most cases promises
+     * should be used directly, but Deferreds can be necessary when the logic to
+     * resolve a promise must be separate.
+     *
+     * @private
+     */
+    class Deferred {
+      /**
+       * Creates a promise and exposes its resolve and reject functions as methods.
+       */
+      constructor() {
+        this.promise = new Promise((resolve, reject) => {
+          this.resolve = resolve;
+          this.reject = reject;
+        });
+      }
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    // Callbacks to be executed whenever there's a quota error.
+    // Can't change Function type right now.
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const quotaErrorCallbacks = new Set();
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Runs all of the callback functions, one at a time sequentially, in the order
+     * in which they were registered.
+     *
+     * @memberof workbox-core
+     * @private
+     */
+    async function executeQuotaErrorCallbacks() {
+      {
+        logger.log(`About to run ${quotaErrorCallbacks.size} ` + `callbacks to clean up caches.`);
+      }
+      for (const callback of quotaErrorCallbacks) {
+        await callback();
+        {
+          logger.log(callback, 'is complete.');
+        }
+      }
+      {
+        logger.log('Finished running callbacks.');
+      }
+    }
+
+    /*
+      Copyright 2019 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Returns a promise that resolves and the passed number of milliseconds.
+     * This utility is an async/await-friendly version of `setTimeout`.
+     *
+     * @param {number} ms
+     * @return {Promise}
+     * @private
+     */
+    function timeout(ms) {
+      return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    // @ts-ignore
+    try {
+      self['workbox:strategies:7.0.0'] && _();
+    } catch (e) {}
+
+    /*
+      Copyright 2020 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    function toRequest(input) {
+      return typeof input === 'string' ? new Request(input) : input;
+    }
+    /**
+     * A class created every time a Strategy instance instance calls
+     * {@link workbox-strategies.Strategy~handle} or
+     * {@link workbox-strategies.Strategy~handleAll} that wraps all fetch and
+     * cache actions around plugin callbacks and keeps track of when the strategy
+     * is "done" (i.e. all added `event.waitUntil()` promises have resolved).
+     *
+     * @memberof workbox-strategies
+     */
+    class StrategyHandler {
+      /**
+       * Creates a new instance associated with the passed strategy and event
+       * that's handling the request.
+       *
+       * The constructor also initializes the state that will be passed to each of
+       * the plugins handling this request.
+       *
+       * @param {workbox-strategies.Strategy} strategy
+       * @param {Object} options
+       * @param {Request|string} options.request A request to run this strategy for.
+       * @param {ExtendableEvent} options.event The event associated with the
+       *     request.
+       * @param {URL} [options.url]
+       * @param {*} [options.params] The return value from the
+       *     {@link workbox-routing~matchCallback} (if applicable).
+       */
+      constructor(strategy, options) {
+        this._cacheKeys = {};
+        /**
+         * The request the strategy is performing (passed to the strategy's
+         * `handle()` or `handleAll()` method).
+         * @name request
+         * @instance
+         * @type {Request}
+         * @memberof workbox-strategies.StrategyHandler
+         */
+        /**
+         * The event associated with this request.
+         * @name event
+         * @instance
+         * @type {ExtendableEvent}
+         * @memberof workbox-strategies.StrategyHandler
+         */
+        /**
+         * A `URL` instance of `request.url` (if passed to the strategy's
+         * `handle()` or `handleAll()` method).
+         * Note: the `url` param will be present if the strategy was invoked
+         * from a workbox `Route` object.
+         * @name url
+         * @instance
+         * @type {URL|undefined}
+         * @memberof workbox-strategies.StrategyHandler
+         */
+        /**
+         * A `param` value (if passed to the strategy's
+         * `handle()` or `handleAll()` method).
+         * Note: the `param` param will be present if the strategy was invoked
+         * from a workbox `Route` object and the
+         * {@link workbox-routing~matchCallback} returned
+         * a truthy value (it will be that value).
+         * @name params
+         * @instance
+         * @type {*|undefined}
+         * @memberof workbox-strategies.StrategyHandler
+         */
+        {
+          finalAssertExports.isInstance(options.event, ExtendableEvent, {
+            moduleName: 'workbox-strategies',
+            className: 'StrategyHandler',
+            funcName: 'constructor',
+            paramName: 'options.event'
+          });
+        }
+        Object.assign(this, options);
+        this.event = options.event;
+        this._strategy = strategy;
+        this._handlerDeferred = new Deferred();
+        this._extendLifetimePromises = [];
+        // Copy the plugins list (since it's mutable on the strategy),
+        // so any mutations don't affect this handler instance.
+        this._plugins = [...strategy.plugins];
+        this._pluginStateMap = new Map();
+        for (const plugin of this._plugins) {
+          this._pluginStateMap.set(plugin, {});
+        }
+        this.event.waitUntil(this._handlerDeferred.promise);
+      }
+      /**
+       * Fetches a given request (and invokes any applicable plugin callback
+       * methods) using the `fetchOptions` (for non-navigation requests) and
+       * `plugins` defined on the `Strategy` object.
+       *
+       * The following plugin lifecycle methods are invoked when using this method:
+       * - `requestWillFetch()`
+       * - `fetchDidSucceed()`
+       * - `fetchDidFail()`
+       *
+       * @param {Request|string} input The URL or request to fetch.
+       * @return {Promise<Response>}
+       */
+      async fetch(input) {
+        const {
+          event
+        } = this;
+        let request = toRequest(input);
+        if (request.mode === 'navigate' && event instanceof FetchEvent && event.preloadResponse) {
+          const possiblePreloadResponse = await event.preloadResponse;
+          if (possiblePreloadResponse) {
+            {
+              logger.log(`Using a preloaded navigation response for ` + `'${getFriendlyURL(request.url)}'`);
+            }
+            return possiblePreloadResponse;
+          }
+        }
+        // If there is a fetchDidFail plugin, we need to save a clone of the
+        // original request before it's either modified by a requestWillFetch
+        // plugin or before the original request's body is consumed via fetch().
+        const originalRequest = this.hasCallback('fetchDidFail') ? request.clone() : null;
+        try {
+          for (const cb of this.iterateCallbacks('requestWillFetch')) {
+            request = await cb({
+              request: request.clone(),
+              event
+            });
+          }
+        } catch (err) {
+          if (err instanceof Error) {
+            throw new WorkboxError('plugin-error-request-will-fetch', {
+              thrownErrorMessage: err.message
+            });
+          }
+        }
+        // The request can be altered by plugins with `requestWillFetch` making
+        // the original request (most likely from a `fetch` event) different
+        // from the Request we make. Pass both to `fetchDidFail` to aid debugging.
+        const pluginFilteredRequest = request.clone();
+        try {
+          let fetchResponse;
+          // See https://github.com/GoogleChrome/workbox/issues/1796
+          fetchResponse = await fetch(request, request.mode === 'navigate' ? undefined : this._strategy.fetchOptions);
+          if ("development" !== 'production') {
+            logger.debug(`Network request for ` + `'${getFriendlyURL(request.url)}' returned a response with ` + `status '${fetchResponse.status}'.`);
+          }
+          for (const callback of this.iterateCallbacks('fetchDidSucceed')) {
+            fetchResponse = await callback({
+              event,
+              request: pluginFilteredRequest,
+              response: fetchResponse
+            });
+          }
+          return fetchResponse;
+        } catch (error) {
+          {
+            logger.log(`Network request for ` + `'${getFriendlyURL(request.url)}' threw an error.`, error);
+          }
+          // `originalRequest` will only exist if a `fetchDidFail` callback
+          // is being used (see above).
+          if (originalRequest) {
+            await this.runCallbacks('fetchDidFail', {
+              error: error,
+              event,
+              originalRequest: originalRequest.clone(),
+              request: pluginFilteredRequest.clone()
+            });
+          }
+          throw error;
+        }
+      }
+      /**
+       * Calls `this.fetch()` and (in the background) runs `this.cachePut()` on
+       * the response generated by `this.fetch()`.
+       *
+       * The call to `this.cachePut()` automatically invokes `this.waitUntil()`,
+       * so you do not have to manually call `waitUntil()` on the event.
+       *
+       * @param {Request|string} input The request or URL to fetch and cache.
+       * @return {Promise<Response>}
+       */
+      async fetchAndCachePut(input) {
+        const response = await this.fetch(input);
+        const responseClone = response.clone();
+        void this.waitUntil(this.cachePut(input, responseClone));
+        return response;
+      }
+      /**
+       * Matches a request from the cache (and invokes any applicable plugin
+       * callback methods) using the `cacheName`, `matchOptions`, and `plugins`
+       * defined on the strategy object.
+       *
+       * The following plugin lifecycle methods are invoked when using this method:
+       * - cacheKeyWillByUsed()
+       * - cachedResponseWillByUsed()
+       *
+       * @param {Request|string} key The Request or URL to use as the cache key.
+       * @return {Promise<Response|undefined>} A matching response, if found.
+       */
+      async cacheMatch(key) {
+        const request = toRequest(key);
+        let cachedResponse;
+        const {
+          cacheName,
+          matchOptions
+        } = this._strategy;
+        const effectiveRequest = await this.getCacheKey(request, 'read');
+        const multiMatchOptions = Object.assign(Object.assign({}, matchOptions), {
+          cacheName
+        });
+        cachedResponse = await caches.match(effectiveRequest, multiMatchOptions);
+        {
+          if (cachedResponse) {
+            logger.debug(`Found a cached response in '${cacheName}'.`);
+          } else {
+            logger.debug(`No cached response found in '${cacheName}'.`);
+          }
+        }
+        for (const callback of this.iterateCallbacks('cachedResponseWillBeUsed')) {
+          cachedResponse = (await callback({
+            cacheName,
+            matchOptions,
+            cachedResponse,
+            request: effectiveRequest,
+            event: this.event
+          })) || undefined;
+        }
+        return cachedResponse;
+      }
+      /**
+       * Puts a request/response pair in the cache (and invokes any applicable
+       * plugin callback methods) using the `cacheName` and `plugins` defined on
+       * the strategy object.
+       *
+       * The following plugin lifecycle methods are invoked when using this method:
+       * - cacheKeyWillByUsed()
+       * - cacheWillUpdate()
+       * - cacheDidUpdate()
+       *
+       * @param {Request|string} key The request or URL to use as the cache key.
+       * @param {Response} response The response to cache.
+       * @return {Promise<boolean>} `false` if a cacheWillUpdate caused the response
+       * not be cached, and `true` otherwise.
+       */
+      async cachePut(key, response) {
+        const request = toRequest(key);
+        // Run in the next task to avoid blocking other cache reads.
+        // https://github.com/w3c/ServiceWorker/issues/1397
+        await timeout(0);
+        const effectiveRequest = await this.getCacheKey(request, 'write');
+        {
+          if (effectiveRequest.method && effectiveRequest.method !== 'GET') {
+            throw new WorkboxError('attempt-to-cache-non-get-request', {
+              url: getFriendlyURL(effectiveRequest.url),
+              method: effectiveRequest.method
+            });
+          }
+          // See https://github.com/GoogleChrome/workbox/issues/2818
+          const vary = response.headers.get('Vary');
+          if (vary) {
+            logger.debug(`The response for ${getFriendlyURL(effectiveRequest.url)} ` + `has a 'Vary: ${vary}' header. ` + `Consider setting the {ignoreVary: true} option on your strategy ` + `to ensure cache matching and deletion works as expected.`);
+          }
+        }
+        if (!response) {
+          {
+            logger.error(`Cannot cache non-existent response for ` + `'${getFriendlyURL(effectiveRequest.url)}'.`);
+          }
+          throw new WorkboxError('cache-put-with-no-response', {
+            url: getFriendlyURL(effectiveRequest.url)
+          });
+        }
+        const responseToCache = await this._ensureResponseSafeToCache(response);
+        if (!responseToCache) {
+          {
+            logger.debug(`Response '${getFriendlyURL(effectiveRequest.url)}' ` + `will not be cached.`, responseToCache);
+          }
+          return false;
+        }
+        const {
+          cacheName,
+          matchOptions
+        } = this._strategy;
+        const cache = await self.caches.open(cacheName);
+        const hasCacheUpdateCallback = this.hasCallback('cacheDidUpdate');
+        const oldResponse = hasCacheUpdateCallback ? await cacheMatchIgnoreParams(
+        // TODO(philipwalton): the `__WB_REVISION__` param is a precaching
+        // feature. Consider into ways to only add this behavior if using
+        // precaching.
+        cache, effectiveRequest.clone(), ['__WB_REVISION__'], matchOptions) : null;
+        {
+          logger.debug(`Updating the '${cacheName}' cache with a new Response ` + `for ${getFriendlyURL(effectiveRequest.url)}.`);
+        }
+        try {
+          await cache.put(effectiveRequest, hasCacheUpdateCallback ? responseToCache.clone() : responseToCache);
+        } catch (error) {
+          if (error instanceof Error) {
+            // See https://developer.mozilla.org/en-US/docs/Web/API/DOMException#exception-QuotaExceededError
+            if (error.name === 'QuotaExceededError') {
+              await executeQuotaErrorCallbacks();
+            }
+            throw error;
+          }
+        }
+        for (const callback of this.iterateCallbacks('cacheDidUpdate')) {
+          await callback({
+            cacheName,
+            oldResponse,
+            newResponse: responseToCache.clone(),
+            request: effectiveRequest,
+            event: this.event
+          });
+        }
+        return true;
+      }
+      /**
+       * Checks the list of plugins for the `cacheKeyWillBeUsed` callback, and
+       * executes any of those callbacks found in sequence. The final `Request`
+       * object returned by the last plugin is treated as the cache key for cache
+       * reads and/or writes. If no `cacheKeyWillBeUsed` plugin callbacks have
+       * been registered, the passed request is returned unmodified
+       *
+       * @param {Request} request
+       * @param {string} mode
+       * @return {Promise<Request>}
+       */
+      async getCacheKey(request, mode) {
+        const key = `${request.url} | ${mode}`;
+        if (!this._cacheKeys[key]) {
+          let effectiveRequest = request;
+          for (const callback of this.iterateCallbacks('cacheKeyWillBeUsed')) {
+            effectiveRequest = toRequest(await callback({
+              mode,
+              request: effectiveRequest,
+              event: this.event,
+              // params has a type any can't change right now.
+              params: this.params // eslint-disable-line
+            }));
+          }
+          this._cacheKeys[key] = effectiveRequest;
+        }
+        return this._cacheKeys[key];
+      }
+      /**
+       * Returns true if the strategy has at least one plugin with the given
+       * callback.
+       *
+       * @param {string} name The name of the callback to check for.
+       * @return {boolean}
+       */
+      hasCallback(name) {
+        for (const plugin of this._strategy.plugins) {
+          if (name in plugin) {
+            return true;
+          }
+        }
+        return false;
+      }
+      /**
+       * Runs all plugin callbacks matching the given name, in order, passing the
+       * given param object (merged ith the current plugin state) as the only
+       * argument.
+       *
+       * Note: since this method runs all plugins, it's not suitable for cases
+       * where the return value of a callback needs to be applied prior to calling
+       * the next callback. See
+       * {@link workbox-strategies.StrategyHandler#iterateCallbacks}
+       * below for how to handle that case.
+       *
+       * @param {string} name The name of the callback to run within each plugin.
+       * @param {Object} param The object to pass as the first (and only) param
+       *     when executing each callback. This object will be merged with the
+       *     current plugin state prior to callback execution.
+       */
+      async runCallbacks(name, param) {
+        for (const callback of this.iterateCallbacks(name)) {
+          // TODO(philipwalton): not sure why `any` is needed. It seems like
+          // this should work with `as WorkboxPluginCallbackParam[C]`.
+          await callback(param);
+        }
+      }
+      /**
+       * Accepts a callback and returns an iterable of matching plugin callbacks,
+       * where each callback is wrapped with the current handler state (i.e. when
+       * you call each callback, whatever object parameter you pass it will
+       * be merged with the plugin's current state).
+       *
+       * @param {string} name The name fo the callback to run
+       * @return {Array<Function>}
+       */
+      *iterateCallbacks(name) {
+        for (const plugin of this._strategy.plugins) {
+          if (typeof plugin[name] === 'function') {
+            const state = this._pluginStateMap.get(plugin);
+            const statefulCallback = param => {
+              const statefulParam = Object.assign(Object.assign({}, param), {
+                state
+              });
+              // TODO(philipwalton): not sure why `any` is needed. It seems like
+              // this should work with `as WorkboxPluginCallbackParam[C]`.
+              return plugin[name](statefulParam);
+            };
+            yield statefulCallback;
+          }
+        }
+      }
+      /**
+       * Adds a promise to the
+       * [extend lifetime promises]{@link https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises}
+       * of the event event associated with the request being handled (usually a
+       * `FetchEvent`).
+       *
+       * Note: you can await
+       * {@link workbox-strategies.StrategyHandler~doneWaiting}
+       * to know when all added promises have settled.
+       *
+       * @param {Promise} promise A promise to add to the extend lifetime promises
+       *     of the event that triggered the request.
+       */
+      waitUntil(promise) {
+        this._extendLifetimePromises.push(promise);
+        return promise;
+      }
+      /**
+       * Returns a promise that resolves once all promises passed to
+       * {@link workbox-strategies.StrategyHandler~waitUntil}
+       * have settled.
+       *
+       * Note: any work done after `doneWaiting()` settles should be manually
+       * passed to an event's `waitUntil()` method (not this handler's
+       * `waitUntil()` method), otherwise the service worker thread my be killed
+       * prior to your work completing.
+       */
+      async doneWaiting() {
+        let promise;
+        while (promise = this._extendLifetimePromises.shift()) {
+          await promise;
+        }
+      }
+      /**
+       * Stops running the strategy and immediately resolves any pending
+       * `waitUntil()` promises.
+       */
+      destroy() {
+        this._handlerDeferred.resolve(null);
+      }
+      /**
+       * This method will call cacheWillUpdate on the available plugins (or use
+       * status === 200) to determine if the Response is safe and valid to cache.
+       *
+       * @param {Request} options.request
+       * @param {Response} options.response
+       * @return {Promise<Response|undefined>}
+       *
+       * @private
+       */
+      async _ensureResponseSafeToCache(response) {
+        let responseToCache = response;
+        let pluginsUsed = false;
+        for (const callback of this.iterateCallbacks('cacheWillUpdate')) {
+          responseToCache = (await callback({
+            request: this.request,
+            response: responseToCache,
+            event: this.event
+          })) || undefined;
+          pluginsUsed = true;
+          if (!responseToCache) {
+            break;
+          }
+        }
+        if (!pluginsUsed) {
+          if (responseToCache && responseToCache.status !== 200) {
+            responseToCache = undefined;
+          }
+          {
+            if (responseToCache) {
+              if (responseToCache.status !== 200) {
+                if (responseToCache.status === 0) {
+                  logger.warn(`The response for '${this.request.url}' ` + `is an opaque response. The caching strategy that you're ` + `using will not cache opaque responses by default.`);
+                } else {
+                  logger.debug(`The response for '${this.request.url}' ` + `returned a status code of '${response.status}' and won't ` + `be cached as a result.`);
+                }
+              }
+            }
+          }
+        }
+        return responseToCache;
+      }
+    }
+
+    /*
+      Copyright 2020 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * An abstract base class that all other strategy classes must extend from:
+     *
+     * @memberof workbox-strategies
+     */
+    class Strategy {
+      /**
+       * Creates a new instance of the strategy and sets all documented option
+       * properties as public instance properties.
+       *
+       * Note: if a custom strategy class extends the base Strategy class and does
+       * not need more than these properties, it does not need to define its own
+       * constructor.
+       *
+       * @param {Object} [options]
+       * @param {string} [options.cacheName] Cache name to store and retrieve
+       * requests. Defaults to the cache names provided by
+       * {@link workbox-core.cacheNames}.
+       * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
+       * to use in conjunction with this caching strategy.
+       * @param {Object} [options.fetchOptions] Values passed along to the
+       * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)
+       * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)
+       * `fetch()` requests made by this strategy.
+       * @param {Object} [options.matchOptions] The
+       * [`CacheQueryOptions`]{@link https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions}
+       * for any `cache.match()` or `cache.put()` calls made by this strategy.
+       */
+      constructor(options = {}) {
+        /**
+         * Cache name to store and retrieve
+         * requests. Defaults to the cache names provided by
+         * {@link workbox-core.cacheNames}.
+         *
+         * @type {string}
+         */
+        this.cacheName = cacheNames.getRuntimeName(options.cacheName);
+        /**
+         * The list
+         * [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
+         * used by this strategy.
+         *
+         * @type {Array<Object>}
+         */
+        this.plugins = options.plugins || [];
+        /**
+         * Values passed along to the
+         * [`init`]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters}
+         * of all fetch() requests made by this strategy.
+         *
+         * @type {Object}
+         */
+        this.fetchOptions = options.fetchOptions;
+        /**
+         * The
+         * [`CacheQueryOptions`]{@link https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions}
+         * for any `cache.match()` or `cache.put()` calls made by this strategy.
+         *
+         * @type {Object}
+         */
+        this.matchOptions = options.matchOptions;
+      }
+      /**
+       * Perform a request strategy and returns a `Promise` that will resolve with
+       * a `Response`, invoking all relevant plugin callbacks.
+       *
+       * When a strategy instance is registered with a Workbox
+       * {@link workbox-routing.Route}, this method is automatically
+       * called when the route matches.
+       *
+       * Alternatively, this method can be used in a standalone `FetchEvent`
+       * listener by passing it to `event.respondWith()`.
+       *
+       * @param {FetchEvent|Object} options A `FetchEvent` or an object with the
+       *     properties listed below.
+       * @param {Request|string} options.request A request to run this strategy for.
+       * @param {ExtendableEvent} options.event The event associated with the
+       *     request.
+       * @param {URL} [options.url]
+       * @param {*} [options.params]
+       */
+      handle(options) {
+        const [responseDone] = this.handleAll(options);
+        return responseDone;
+      }
+      /**
+       * Similar to {@link workbox-strategies.Strategy~handle}, but
+       * instead of just returning a `Promise` that resolves to a `Response` it
+       * it will return an tuple of `[response, done]` promises, where the former
+       * (`response`) is equivalent to what `handle()` returns, and the latter is a
+       * Promise that will resolve once any promises that were added to
+       * `event.waitUntil()` as part of performing the strategy have completed.
+       *
+       * You can await the `done` promise to ensure any extra work performed by
+       * the strategy (usually caching responses) completes successfully.
+       *
+       * @param {FetchEvent|Object} options A `FetchEvent` or an object with the
+       *     properties listed below.
+       * @param {Request|string} options.request A request to run this strategy for.
+       * @param {ExtendableEvent} options.event The event associated with the
+       *     request.
+       * @param {URL} [options.url]
+       * @param {*} [options.params]
+       * @return {Array<Promise>} A tuple of [response, done]
+       *     promises that can be used to determine when the response resolves as
+       *     well as when the handler has completed all its work.
+       */
+      handleAll(options) {
+        // Allow for flexible options to be passed.
+        if (options instanceof FetchEvent) {
+          options = {
+            event: options,
+            request: options.request
+          };
+        }
+        const event = options.event;
+        const request = typeof options.request === 'string' ? new Request(options.request) : options.request;
+        const params = 'params' in options ? options.params : undefined;
+        const handler = new StrategyHandler(this, {
+          event,
+          request,
+          params
+        });
+        const responseDone = this._getResponse(handler, request, event);
+        const handlerDone = this._awaitComplete(responseDone, handler, request, event);
+        // Return an array of promises, suitable for use with Promise.all().
+        return [responseDone, handlerDone];
+      }
+      async _getResponse(handler, request, event) {
+        await handler.runCallbacks('handlerWillStart', {
+          event,
+          request
+        });
+        let response = undefined;
+        try {
+          response = await this._handle(request, handler);
+          // The "official" Strategy subclasses all throw this error automatically,
+          // but in case a third-party Strategy doesn't, ensure that we have a
+          // consistent failure when there's no response or an error response.
+          if (!response || response.type === 'error') {
+            throw new WorkboxError('no-response', {
+              url: request.url
+            });
+          }
+        } catch (error) {
+          if (error instanceof Error) {
+            for (const callback of handler.iterateCallbacks('handlerDidError')) {
+              response = await callback({
+                error,
+                event,
+                request
+              });
+              if (response) {
+                break;
+              }
+            }
+          }
+          if (!response) {
+            throw error;
+          } else {
+            logger.log(`While responding to '${getFriendlyURL(request.url)}', ` + `an ${error instanceof Error ? error.toString() : ''} error occurred. Using a fallback response provided by ` + `a handlerDidError plugin.`);
+          }
+        }
+        for (const callback of handler.iterateCallbacks('handlerWillRespond')) {
+          response = await callback({
+            event,
+            request,
+            response
+          });
+        }
+        return response;
+      }
+      async _awaitComplete(responseDone, handler, request, event) {
+        let response;
+        let error;
+        try {
+          response = await responseDone;
+        } catch (error) {
+          // Ignore errors, as response errors should be caught via the `response`
+          // promise above. The `done` promise will only throw for errors in
+          // promises passed to `handler.waitUntil()`.
+        }
+        try {
+          await handler.runCallbacks('handlerDidRespond', {
+            event,
+            request,
+            response
+          });
+          await handler.doneWaiting();
+        } catch (waitUntilError) {
+          if (waitUntilError instanceof Error) {
+            error = waitUntilError;
+          }
+        }
+        await handler.runCallbacks('handlerDidComplete', {
+          event,
+          request,
+          response,
+          error: error
+        });
+        handler.destroy();
+        if (error) {
+          throw error;
+        }
+      }
+    }
+    /**
+     * Classes extending the `Strategy` based class should implement this method,
+     * and leverage the {@link workbox-strategies.StrategyHandler}
+     * arg to perform all fetching and cache logic, which will ensure all relevant
+     * cache, cache options, fetch options and plugins are used (per the current
+     * strategy instance).
+     *
+     * @name _handle
+     * @instance
+     * @abstract
+     * @function
+     * @param {Request} request
+     * @param {workbox-strategies.StrategyHandler} handler
+     * @return {Promise<Response>}
+     *
+     * @memberof workbox-strategies.Strategy
+     */
+
+    /*
+      Copyright 2020 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * A {@link workbox-strategies.Strategy} implementation
+     * specifically designed to work with
+     * {@link workbox-precaching.PrecacheController}
+     * to both cache and fetch precached assets.
+     *
+     * Note: an instance of this class is created automatically when creating a
+     * `PrecacheController`; it's generally not necessary to create this yourself.
+     *
+     * @extends workbox-strategies.Strategy
+     * @memberof workbox-precaching
+     */
+    class PrecacheStrategy extends Strategy {
+      /**
+       *
+       * @param {Object} [options]
+       * @param {string} [options.cacheName] Cache name to store and retrieve
+       * requests. Defaults to the cache names provided by
+       * {@link workbox-core.cacheNames}.
+       * @param {Array<Object>} [options.plugins] {@link https://developers.google.com/web/tools/workbox/guides/using-plugins|Plugins}
+       * to use in conjunction with this caching strategy.
+       * @param {Object} [options.fetchOptions] Values passed along to the
+       * {@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters|init}
+       * of all fetch() requests made by this strategy.
+       * @param {Object} [options.matchOptions] The
+       * {@link https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions|CacheQueryOptions}
+       * for any `cache.match()` or `cache.put()` calls made by this strategy.
+       * @param {boolean} [options.fallbackToNetwork=true] Whether to attempt to
+       * get the response from the network if there's a precache miss.
+       */
+      constructor(options = {}) {
+        options.cacheName = cacheNames.getPrecacheName(options.cacheName);
+        super(options);
+        this._fallbackToNetwork = options.fallbackToNetwork === false ? false : true;
+        // Redirected responses cannot be used to satisfy a navigation request, so
+        // any redirected response must be "copied" rather than cloned, so the new
+        // response doesn't contain the `redirected` flag. See:
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=669363&desc=2#c1
+        this.plugins.push(PrecacheStrategy.copyRedirectedCacheableResponsesPlugin);
+      }
+      /**
+       * @private
+       * @param {Request|string} request A request to run this strategy for.
+       * @param {workbox-strategies.StrategyHandler} handler The event that
+       *     triggered the request.
+       * @return {Promise<Response>}
+       */
+      async _handle(request, handler) {
+        const response = await handler.cacheMatch(request);
+        if (response) {
+          return response;
+        }
+        // If this is an `install` event for an entry that isn't already cached,
+        // then populate the cache.
+        if (handler.event && handler.event.type === 'install') {
+          return await this._handleInstall(request, handler);
+        }
+        // Getting here means something went wrong. An entry that should have been
+        // precached wasn't found in the cache.
+        return await this._handleFetch(request, handler);
+      }
+      async _handleFetch(request, handler) {
+        let response;
+        const params = handler.params || {};
+        // Fall back to the network if we're configured to do so.
+        if (this._fallbackToNetwork) {
+          {
+            logger.warn(`The precached response for ` + `${getFriendlyURL(request.url)} in ${this.cacheName} was not ` + `found. Falling back to the network.`);
+          }
+          const integrityInManifest = params.integrity;
+          const integrityInRequest = request.integrity;
+          const noIntegrityConflict = !integrityInRequest || integrityInRequest === integrityInManifest;
+          // Do not add integrity if the original request is no-cors
+          // See https://github.com/GoogleChrome/workbox/issues/3096
+          response = await handler.fetch(new Request(request, {
+            integrity: request.mode !== 'no-cors' ? integrityInRequest || integrityInManifest : undefined
+          }));
+          // It's only "safe" to repair the cache if we're using SRI to guarantee
+          // that the response matches the precache manifest's expectations,
+          // and there's either a) no integrity property in the incoming request
+          // or b) there is an integrity, and it matches the precache manifest.
+          // See https://github.com/GoogleChrome/workbox/issues/2858
+          // Also if the original request users no-cors we don't use integrity.
+          // See https://github.com/GoogleChrome/workbox/issues/3096
+          if (integrityInManifest && noIntegrityConflict && request.mode !== 'no-cors') {
+            this._useDefaultCacheabilityPluginIfNeeded();
+            const wasCached = await handler.cachePut(request, response.clone());
+            {
+              if (wasCached) {
+                logger.log(`A response for ${getFriendlyURL(request.url)} ` + `was used to "repair" the precache.`);
+              }
+            }
+          }
+        } else {
+          // This shouldn't normally happen, but there are edge cases:
+          // https://github.com/GoogleChrome/workbox/issues/1441
+          throw new WorkboxError('missing-precache-entry', {
+            cacheName: this.cacheName,
+            url: request.url
+          });
+        }
+        {
+          const cacheKey = params.cacheKey || (await handler.getCacheKey(request, 'read'));
+          // Workbox is going to handle the route.
+          // print the routing details to the console.
+          logger.groupCollapsed(`Precaching is responding to: ` + getFriendlyURL(request.url));
+          logger.log(`Serving the precached url: ${getFriendlyURL(cacheKey instanceof Request ? cacheKey.url : cacheKey)}`);
+          logger.groupCollapsed(`View request details here.`);
+          logger.log(request);
+          logger.groupEnd();
+          logger.groupCollapsed(`View response details here.`);
+          logger.log(response);
+          logger.groupEnd();
+          logger.groupEnd();
+        }
+        return response;
+      }
+      async _handleInstall(request, handler) {
+        this._useDefaultCacheabilityPluginIfNeeded();
+        const response = await handler.fetch(request);
+        // Make sure we defer cachePut() until after we know the response
+        // should be cached; see https://github.com/GoogleChrome/workbox/issues/2737
+        const wasCached = await handler.cachePut(request, response.clone());
+        if (!wasCached) {
+          // Throwing here will lead to the `install` handler failing, which
+          // we want to do if *any* of the responses aren't safe to cache.
+          throw new WorkboxError('bad-precaching-response', {
+            url: request.url,
+            status: response.status
+          });
+        }
+        return response;
+      }
+      /**
+       * This method is complex, as there a number of things to account for:
+       *
+       * The `plugins` array can be set at construction, and/or it might be added to
+       * to at any time before the strategy is used.
+       *
+       * At the time the strategy is used (i.e. during an `install` event), there
+       * needs to be at least one plugin that implements `cacheWillUpdate` in the
+       * array, other than `copyRedirectedCacheableResponsesPlugin`.
+       *
+       * - If this method is called and there are no suitable `cacheWillUpdate`
+       * plugins, we need to add `defaultPrecacheCacheabilityPlugin`.
+       *
+       * - If this method is called and there is exactly one `cacheWillUpdate`, then
+       * we don't have to do anything (this might be a previously added
+       * `defaultPrecacheCacheabilityPlugin`, or it might be a custom plugin).
+       *
+       * - If this method is called and there is more than one `cacheWillUpdate`,
+       * then we need to check if one is `defaultPrecacheCacheabilityPlugin`. If so,
+       * we need to remove it. (This situation is unlikely, but it could happen if
+       * the strategy is used multiple times, the first without a `cacheWillUpdate`,
+       * and then later on after manually adding a custom `cacheWillUpdate`.)
+       *
+       * See https://github.com/GoogleChrome/workbox/issues/2737 for more context.
+       *
+       * @private
+       */
+      _useDefaultCacheabilityPluginIfNeeded() {
+        let defaultPluginIndex = null;
+        let cacheWillUpdatePluginCount = 0;
+        for (const [index, plugin] of this.plugins.entries()) {
+          // Ignore the copy redirected plugin when determining what to do.
+          if (plugin === PrecacheStrategy.copyRedirectedCacheableResponsesPlugin) {
+            continue;
+          }
+          // Save the default plugin's index, in case it needs to be removed.
+          if (plugin === PrecacheStrategy.defaultPrecacheCacheabilityPlugin) {
+            defaultPluginIndex = index;
+          }
+          if (plugin.cacheWillUpdate) {
+            cacheWillUpdatePluginCount++;
+          }
+        }
+        if (cacheWillUpdatePluginCount === 0) {
+          this.plugins.push(PrecacheStrategy.defaultPrecacheCacheabilityPlugin);
+        } else if (cacheWillUpdatePluginCount > 1 && defaultPluginIndex !== null) {
+          // Only remove the default plugin; multiple custom plugins are allowed.
+          this.plugins.splice(defaultPluginIndex, 1);
+        }
+        // Nothing needs to be done if cacheWillUpdatePluginCount is 1
+      }
+    }
+    PrecacheStrategy.defaultPrecacheCacheabilityPlugin = {
+      async cacheWillUpdate({
+        response
+      }) {
+        if (!response || response.status >= 400) {
+          return null;
+        }
+        return response;
+      }
+    };
+    PrecacheStrategy.copyRedirectedCacheableResponsesPlugin = {
+      async cacheWillUpdate({
+        response
+      }) {
+        return response.redirected ? await copyResponse(response) : response;
+      }
+    };
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Performs efficient precaching of assets.
+     *
+     * @memberof workbox-precaching
+     */
+    class PrecacheController {
+      /**
+       * Create a new PrecacheController.
+       *
+       * @param {Object} [options]
+       * @param {string} [options.cacheName] The cache to use for precaching.
+       * @param {string} [options.plugins] Plugins to use when precaching as well
+       * as responding to fetch events for precached assets.
+       * @param {boolean} [options.fallbackToNetwork=true] Whether to attempt to
+       * get the response from the network if there's a precache miss.
+       */
+      constructor({
+        cacheName,
+        plugins = [],
+        fallbackToNetwork = true
+      } = {}) {
+        this._urlsToCacheKeys = new Map();
+        this._urlsToCacheModes = new Map();
+        this._cacheKeysToIntegrities = new Map();
+        this._strategy = new PrecacheStrategy({
+          cacheName: cacheNames.getPrecacheName(cacheName),
+          plugins: [...plugins, new PrecacheCacheKeyPlugin({
+            precacheController: this
+          })],
+          fallbackToNetwork
+        });
+        // Bind the install and activate methods to the instance.
+        this.install = this.install.bind(this);
+        this.activate = this.activate.bind(this);
+      }
+      /**
+       * @type {workbox-precaching.PrecacheStrategy} The strategy created by this controller and
+       * used to cache assets and respond to fetch events.
+       */
+      get strategy() {
+        return this._strategy;
+      }
+      /**
+       * Adds items to the precache list, removing any duplicates and
+       * stores the files in the
+       * {@link workbox-core.cacheNames|"precache cache"} when the service
+       * worker installs.
+       *
+       * This method can be called multiple times.
+       *
+       * @param {Array<Object|string>} [entries=[]] Array of entries to precache.
+       */
+      precache(entries) {
+        this.addToCacheList(entries);
+        if (!this._installAndActiveListenersAdded) {
+          self.addEventListener('install', this.install);
+          self.addEventListener('activate', this.activate);
+          this._installAndActiveListenersAdded = true;
+        }
+      }
+      /**
+       * This method will add items to the precache list, removing duplicates
+       * and ensuring the information is valid.
+       *
+       * @param {Array<workbox-precaching.PrecacheController.PrecacheEntry|string>} entries
+       *     Array of entries to precache.
+       */
+      addToCacheList(entries) {
+        {
+          finalAssertExports.isArray(entries, {
+            moduleName: 'workbox-precaching',
+            className: 'PrecacheController',
+            funcName: 'addToCacheList',
+            paramName: 'entries'
+          });
+        }
+        const urlsToWarnAbout = [];
+        for (const entry of entries) {
+          // See https://github.com/GoogleChrome/workbox/issues/2259
+          if (typeof entry === 'string') {
+            urlsToWarnAbout.push(entry);
+          } else if (entry && entry.revision === undefined) {
+            urlsToWarnAbout.push(entry.url);
+          }
+          const {
+            cacheKey,
+            url
+          } = createCacheKey(entry);
+          const cacheMode = typeof entry !== 'string' && entry.revision ? 'reload' : 'default';
+          if (this._urlsToCacheKeys.has(url) && this._urlsToCacheKeys.get(url) !== cacheKey) {
+            throw new WorkboxError('add-to-cache-list-conflicting-entries', {
+              firstEntry: this._urlsToCacheKeys.get(url),
+              secondEntry: cacheKey
+            });
+          }
+          if (typeof entry !== 'string' && entry.integrity) {
+            if (this._cacheKeysToIntegrities.has(cacheKey) && this._cacheKeysToIntegrities.get(cacheKey) !== entry.integrity) {
+              throw new WorkboxError('add-to-cache-list-conflicting-integrities', {
+                url
+              });
+            }
+            this._cacheKeysToIntegrities.set(cacheKey, entry.integrity);
+          }
+          this._urlsToCacheKeys.set(url, cacheKey);
+          this._urlsToCacheModes.set(url, cacheMode);
+          if (urlsToWarnAbout.length > 0) {
+            const warningMessage = `Workbox is precaching URLs without revision ` + `info: ${urlsToWarnAbout.join(', ')}\nThis is generally NOT safe. ` + `Learn more at https://bit.ly/wb-precache`;
+            {
+              logger.warn(warningMessage);
+            }
+          }
+        }
+      }
+      /**
+       * Precaches new and updated assets. Call this method from the service worker
+       * install event.
+       *
+       * Note: this method calls `event.waitUntil()` for you, so you do not need
+       * to call it yourself in your event handlers.
+       *
+       * @param {ExtendableEvent} event
+       * @return {Promise<workbox-precaching.InstallResult>}
+       */
+      install(event) {
+        // waitUntil returns Promise<any>
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        return waitUntil(event, async () => {
+          const installReportPlugin = new PrecacheInstallReportPlugin();
+          this.strategy.plugins.push(installReportPlugin);
+          // Cache entries one at a time.
+          // See https://github.com/GoogleChrome/workbox/issues/2528
+          for (const [url, cacheKey] of this._urlsToCacheKeys) {
+            const integrity = this._cacheKeysToIntegrities.get(cacheKey);
+            const cacheMode = this._urlsToCacheModes.get(url);
+            const request = new Request(url, {
+              integrity,
+              cache: cacheMode,
+              credentials: 'same-origin'
+            });
+            await Promise.all(this.strategy.handleAll({
+              params: {
+                cacheKey
+              },
+              request,
+              event
+            }));
+          }
+          const {
+            updatedURLs,
+            notUpdatedURLs
+          } = installReportPlugin;
+          {
+            printInstallDetails(updatedURLs, notUpdatedURLs);
+          }
+          return {
+            updatedURLs,
+            notUpdatedURLs
+          };
+        });
+      }
+      /**
+       * Deletes assets that are no longer present in the current precache manifest.
+       * Call this method from the service worker activate event.
+       *
+       * Note: this method calls `event.waitUntil()` for you, so you do not need
+       * to call it yourself in your event handlers.
+       *
+       * @param {ExtendableEvent} event
+       * @return {Promise<workbox-precaching.CleanupResult>}
+       */
+      activate(event) {
+        // waitUntil returns Promise<any>
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        return waitUntil(event, async () => {
+          const cache = await self.caches.open(this.strategy.cacheName);
+          const currentlyCachedRequests = await cache.keys();
+          const expectedCacheKeys = new Set(this._urlsToCacheKeys.values());
+          const deletedURLs = [];
+          for (const request of currentlyCachedRequests) {
+            if (!expectedCacheKeys.has(request.url)) {
+              await cache.delete(request);
+              deletedURLs.push(request.url);
+            }
+          }
+          {
+            printCleanupDetails(deletedURLs);
+          }
+          return {
+            deletedURLs
+          };
+        });
+      }
+      /**
+       * Returns a mapping of a precached URL to the corresponding cache key, taking
+       * into account the revision information for the URL.
+       *
+       * @return {Map<string, string>} A URL to cache key mapping.
+       */
+      getURLsToCacheKeys() {
+        return this._urlsToCacheKeys;
+      }
+      /**
+       * Returns a list of all the URLs that have been precached by the current
+       * service worker.
+       *
+       * @return {Array<string>} The precached URLs.
+       */
+      getCachedURLs() {
+        return [...this._urlsToCacheKeys.keys()];
+      }
+      /**
+       * Returns the cache key used for storing a given URL. If that URL is
+       * unversioned, like `/index.html', then the cache key will be the original
+       * URL with a search parameter appended to it.
+       *
+       * @param {string} url A URL whose cache key you want to look up.
+       * @return {string} The versioned URL that corresponds to a cache key
+       * for the original URL, or undefined if that URL isn't precached.
+       */
+      getCacheKeyForURL(url) {
+        const urlObject = new URL(url, location.href);
+        return this._urlsToCacheKeys.get(urlObject.href);
+      }
+      /**
+       * @param {string} url A cache key whose SRI you want to look up.
+       * @return {string} The subresource integrity associated with the cache key,
+       * or undefined if it's not set.
+       */
+      getIntegrityForCacheKey(cacheKey) {
+        return this._cacheKeysToIntegrities.get(cacheKey);
+      }
+      /**
+       * This acts as a drop-in replacement for
+       * [`cache.match()`](https://developer.mozilla.org/en-US/docs/Web/API/Cache/match)
+       * with the following differences:
+       *
+       * - It knows what the name of the precache is, and only checks in that cache.
+       * - It allows you to pass in an "original" URL without versioning parameters,
+       * and it will automatically look up the correct cache key for the currently
+       * active revision of that URL.
+       *
+       * E.g., `matchPrecache('index.html')` will find the correct precached
+       * response for the currently active service worker, even if the actual cache
+       * key is `'/index.html?__WB_REVISION__=1234abcd'`.
+       *
+       * @param {string|Request} request The key (without revisioning parameters)
+       * to look up in the precache.
+       * @return {Promise<Response|undefined>}
+       */
+      async matchPrecache(request) {
+        const url = request instanceof Request ? request.url : request;
+        const cacheKey = this.getCacheKeyForURL(url);
+        if (cacheKey) {
+          const cache = await self.caches.open(this.strategy.cacheName);
+          return cache.match(cacheKey);
+        }
+        return undefined;
+      }
+      /**
+       * Returns a function that looks up `url` in the precache (taking into
+       * account revision information), and returns the corresponding `Response`.
+       *
+       * @param {string} url The precached URL which will be used to lookup the
+       * `Response`.
+       * @return {workbox-routing~handlerCallback}
+       */
+      createHandlerBoundToURL(url) {
+        const cacheKey = this.getCacheKeyForURL(url);
+        if (!cacheKey) {
+          throw new WorkboxError('non-precached-url', {
+            url
+          });
+        }
+        return options => {
+          options.request = new Request(url);
+          options.params = Object.assign({
+            cacheKey
+          }, options.params);
+          return this.strategy.handle(options);
+        };
+      }
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    let precacheController;
+    /**
+     * @return {PrecacheController}
+     * @private
+     */
+    const getOrCreatePrecacheController = () => {
+      if (!precacheController) {
+        precacheController = new PrecacheController();
+      }
+      return precacheController;
+    };
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Removes any URL search parameters that should be ignored.
+     *
+     * @param {URL} urlObject The original URL.
+     * @param {Array<RegExp>} ignoreURLParametersMatching RegExps to test against
+     * each search parameter name. Matches mean that the search parameter should be
+     * ignored.
+     * @return {URL} The URL with any ignored search parameters removed.
+     *
+     * @private
+     * @memberof workbox-precaching
+     */
+    function removeIgnoredSearchParams(urlObject, ignoreURLParametersMatching = []) {
+      // Convert the iterable into an array at the start of the loop to make sure
+      // deletion doesn't mess up iteration.
+      for (const paramName of [...urlObject.searchParams.keys()]) {
+        if (ignoreURLParametersMatching.some(regExp => regExp.test(paramName))) {
+          urlObject.searchParams.delete(paramName);
+        }
+      }
+      return urlObject;
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Generator function that yields possible variations on the original URL to
+     * check, one at a time.
+     *
+     * @param {string} url
+     * @param {Object} options
+     *
+     * @private
+     * @memberof workbox-precaching
+     */
+    function* generateURLVariations(url, {
+      ignoreURLParametersMatching = [/^utm_/, /^fbclid$/],
+      directoryIndex = 'index.html',
+      cleanURLs = true,
+      urlManipulation
+    } = {}) {
+      const urlObject = new URL(url, location.href);
+      urlObject.hash = '';
+      yield urlObject.href;
+      const urlWithoutIgnoredParams = removeIgnoredSearchParams(urlObject, ignoreURLParametersMatching);
+      yield urlWithoutIgnoredParams.href;
+      if (directoryIndex && urlWithoutIgnoredParams.pathname.endsWith('/')) {
+        const directoryURL = new URL(urlWithoutIgnoredParams.href);
+        directoryURL.pathname += directoryIndex;
+        yield directoryURL.href;
+      }
+      if (cleanURLs) {
+        const cleanURL = new URL(urlWithoutIgnoredParams.href);
+        cleanURL.pathname += '.html';
+        yield cleanURL.href;
+      }
+      if (urlManipulation) {
+        const additionalURLs = urlManipulation({
+          url: urlObject
+        });
+        for (const urlToAttempt of additionalURLs) {
+          yield urlToAttempt.href;
+        }
+      }
+    }
+
+    /*
+      Copyright 2020 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * A subclass of {@link workbox-routing.Route} that takes a
+     * {@link workbox-precaching.PrecacheController}
+     * instance and uses it to match incoming requests and handle fetching
+     * responses from the precache.
+     *
+     * @memberof workbox-precaching
+     * @extends workbox-routing.Route
+     */
+    class PrecacheRoute extends Route {
+      /**
+       * @param {PrecacheController} precacheController A `PrecacheController`
+       * instance used to both match requests and respond to fetch events.
+       * @param {Object} [options] Options to control how requests are matched
+       * against the list of precached URLs.
+       * @param {string} [options.directoryIndex=index.html] The `directoryIndex` will
+       * check cache entries for a URLs ending with '/' to see if there is a hit when
+       * appending the `directoryIndex` value.
+       * @param {Array<RegExp>} [options.ignoreURLParametersMatching=[/^utm_/, /^fbclid$/]] An
+       * array of regex's to remove search params when looking for a cache match.
+       * @param {boolean} [options.cleanURLs=true] The `cleanURLs` option will
+       * check the cache for the URL with a `.html` added to the end of the end.
+       * @param {workbox-precaching~urlManipulation} [options.urlManipulation]
+       * This is a function that should take a URL and return an array of
+       * alternative URLs that should be checked for precache matches.
+       */
+      constructor(precacheController, options) {
+        const match = ({
+          request
+        }) => {
+          const urlsToCacheKeys = precacheController.getURLsToCacheKeys();
+          for (const possibleURL of generateURLVariations(request.url, options)) {
+            const cacheKey = urlsToCacheKeys.get(possibleURL);
+            if (cacheKey) {
+              const integrity = precacheController.getIntegrityForCacheKey(cacheKey);
+              return {
+                cacheKey,
+                integrity
+              };
+            }
+          }
+          {
+            logger.debug(`Precaching did not find a match for ` + getFriendlyURL(request.url));
+          }
+          return;
+        };
+        super(match, precacheController.strategy);
+      }
+    }
+
+    /*
+      Copyright 2019 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Add a `fetch` listener to the service worker that will
+     * respond to
+     * [network requests]{@link https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requests}
+     * with precached assets.
+     *
+     * Requests for assets that aren't precached, the `FetchEvent` will not be
+     * responded to, allowing the event to fall through to other `fetch` event
+     * listeners.
+     *
+     * @param {Object} [options] See the {@link workbox-precaching.PrecacheRoute}
+     * options.
+     *
+     * @memberof workbox-precaching
+     */
+    function addRoute(options) {
+      const precacheController = getOrCreatePrecacheController();
+      const precacheRoute = new PrecacheRoute(precacheController, options);
+      registerRoute(precacheRoute);
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Adds items to the precache list, removing any duplicates and
+     * stores the files in the
+     * {@link workbox-core.cacheNames|"precache cache"} when the service
+     * worker installs.
+     *
+     * This method can be called multiple times.
+     *
+     * Please note: This method **will not** serve any of the cached files for you.
+     * It only precaches files. To respond to a network request you call
+     * {@link workbox-precaching.addRoute}.
+     *
+     * If you have a single array of files to precache, you can just call
+     * {@link workbox-precaching.precacheAndRoute}.
+     *
+     * @param {Array<Object|string>} [entries=[]] Array of entries to precache.
+     *
+     * @memberof workbox-precaching
+     */
+    function precache(entries) {
+      const precacheController = getOrCreatePrecacheController();
+      precacheController.precache(entries);
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * This method will add entries to the precache list and add a route to
+     * respond to fetch events.
+     *
+     * This is a convenience method that will call
+     * {@link workbox-precaching.precache} and
+     * {@link workbox-precaching.addRoute} in a single call.
+     *
+     * @param {Array<Object|string>} entries Array of entries to precache.
+     * @param {Object} [options] See the
+     * {@link workbox-precaching.PrecacheRoute} options.
+     *
+     * @memberof workbox-precaching
+     */
+    function precacheAndRoute(entries, options) {
+      precache(entries);
+      addRoute(options);
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const SUBSTRING_TO_FIND = '-precache-';
+    /**
+     * Cleans up incompatible precaches that were created by older versions of
+     * Workbox, by a service worker registered under the current scope.
+     *
+     * This is meant to be called as part of the `activate` event.
+     *
+     * This should be safe to use as long as you don't include `substringToFind`
+     * (defaulting to `-precache-`) in your non-precache cache names.
+     *
+     * @param {string} currentPrecacheName The cache name currently in use for
+     * precaching. This cache won't be deleted.
+     * @param {string} [substringToFind='-precache-'] Cache names which include this
+     * substring will be deleted (excluding `currentPrecacheName`).
+     * @return {Array<string>} A list of all the cache names that were deleted.
+     *
+     * @private
+     * @memberof workbox-precaching
+     */
+    const deleteOutdatedCaches = async (currentPrecacheName, substringToFind = SUBSTRING_TO_FIND) => {
+      const cacheNames = await self.caches.keys();
+      const cacheNamesToDelete = cacheNames.filter(cacheName => {
+        return cacheName.includes(substringToFind) && cacheName.includes(self.registration.scope) && cacheName !== currentPrecacheName;
+      });
+      await Promise.all(cacheNamesToDelete.map(cacheName => self.caches.delete(cacheName)));
+      return cacheNamesToDelete;
+    };
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Adds an `activate` event listener which will clean up incompatible
+     * precaches that were created by older versions of Workbox.
+     *
+     * @memberof workbox-precaching
+     */
+    function cleanupOutdatedCaches() {
+      // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705
+      self.addEventListener('activate', event => {
+        const cacheName = cacheNames.getPrecacheName();
+        event.waitUntil(deleteOutdatedCaches(cacheName).then(cachesDeleted => {
+          {
+            if (cachesDeleted.length > 0) {
+              logger.log(`The following out-of-date precaches were cleaned up ` + `automatically:`, cachesDeleted);
+            }
+          }
+        }));
+      });
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * NavigationRoute makes it easy to create a
+     * {@link workbox-routing.Route} that matches for browser
+     * [navigation requests]{@link https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests}.
+     *
+     * It will only match incoming Requests whose
+     * {@link https://fetch.spec.whatwg.org/#concept-request-mode|mode}
+     * is set to `navigate`.
+     *
+     * You can optionally only apply this route to a subset of navigation requests
+     * by using one or both of the `denylist` and `allowlist` parameters.
+     *
+     * @memberof workbox-routing
+     * @extends workbox-routing.Route
+     */
+    class NavigationRoute extends Route {
+      /**
+       * If both `denylist` and `allowlist` are provided, the `denylist` will
+       * take precedence and the request will not match this route.
+       *
+       * The regular expressions in `allowlist` and `denylist`
+       * are matched against the concatenated
+       * [`pathname`]{@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname}
+       * and [`search`]{@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search}
+       * portions of the requested URL.
+       *
+       * *Note*: These RegExps may be evaluated against every destination URL during
+       * a navigation. Avoid using
+       * [complex RegExps](https://github.com/GoogleChrome/workbox/issues/3077),
+       * or else your users may see delays when navigating your site.
+       *
+       * @param {workbox-routing~handlerCallback} handler A callback
+       * function that returns a Promise resulting in a Response.
+       * @param {Object} options
+       * @param {Array<RegExp>} [options.denylist] If any of these patterns match,
+       * the route will not handle the request (even if a allowlist RegExp matches).
+       * @param {Array<RegExp>} [options.allowlist=[/./]] If any of these patterns
+       * match the URL's pathname and search parameter, the route will handle the
+       * request (assuming the denylist doesn't match).
+       */
+      constructor(handler, {
+        allowlist = [/./],
+        denylist = []
+      } = {}) {
+        {
+          finalAssertExports.isArrayOfClass(allowlist, RegExp, {
+            moduleName: 'workbox-routing',
+            className: 'NavigationRoute',
+            funcName: 'constructor',
+            paramName: 'options.allowlist'
+          });
+          finalAssertExports.isArrayOfClass(denylist, RegExp, {
+            moduleName: 'workbox-routing',
+            className: 'NavigationRoute',
+            funcName: 'constructor',
+            paramName: 'options.denylist'
+          });
+        }
+        super(options => this._match(options), handler);
+        this._allowlist = allowlist;
+        this._denylist = denylist;
+      }
+      /**
+       * Routes match handler.
+       *
+       * @param {Object} options
+       * @param {URL} options.url
+       * @param {Request} options.request
+       * @return {boolean}
+       *
+       * @private
+       */
+      _match({
+        url,
+        request
+      }) {
+        if (request && request.mode !== 'navigate') {
+          return false;
+        }
+        const pathnameAndSearch = url.pathname + url.search;
+        for (const regExp of this._denylist) {
+          if (regExp.test(pathnameAndSearch)) {
+            {
+              logger.log(`The navigation route ${pathnameAndSearch} is not ` + `being used, since the URL matches this denylist pattern: ` + `${regExp.toString()}`);
+            }
+            return false;
+          }
+        }
+        if (this._allowlist.some(regExp => regExp.test(pathnameAndSearch))) {
+          {
+            logger.debug(`The navigation route ${pathnameAndSearch} ` + `is being used.`);
+          }
+          return true;
+        }
+        {
+          logger.log(`The navigation route ${pathnameAndSearch} is not ` + `being used, since the URL being navigated to doesn't ` + `match the allowlist.`);
+        }
+        return false;
+      }
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Helper function that calls
+     * {@link PrecacheController#createHandlerBoundToURL} on the default
+     * {@link PrecacheController} instance.
+     *
+     * If you are creating your own {@link PrecacheController}, then call the
+     * {@link PrecacheController#createHandlerBoundToURL} on that instance,
+     * instead of using this function.
+     *
+     * @param {string} url The precached URL which will be used to lookup the
+     * `Response`.
+     * @param {boolean} [fallbackToNetwork=true] Whether to attempt to get the
+     * response from the network if there's a precache miss.
+     * @return {workbox-routing~handlerCallback}
+     *
+     * @memberof workbox-precaching
+     */
+    function createHandlerBoundToURL(url) {
+      const precacheController = getOrCreatePrecacheController();
+      return precacheController.createHandlerBoundToURL(url);
+    }
+
+    exports.NavigationRoute = NavigationRoute;
+    exports.cleanupOutdatedCaches = cleanupOutdatedCaches;
+    exports.clientsClaim = clientsClaim;
+    exports.createHandlerBoundToURL = createHandlerBoundToURL;
+    exports.precacheAndRoute = precacheAndRoute;
+    exports.registerRoute = registerRoute;
+
+}));

+ 218 - 209
src/views/classList/modals/createClass.tsx

@@ -1,209 +1,218 @@
-import {
-  NButton,
-  NSpace,
-  useMessage,
-  NForm,
-  NFormItem,
-  NSelect
-} from 'naive-ui';
-import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
-import styles from '../index.module.less';
-import CSelect from '/src/components/CSelect';
-import { addClass, getConfiguredSubjects } from '../api';
-import { api_getCurrentGradeYear } from '../../studentList/api';
-export default defineComponent({
-  props: {
-    activeRow: {
-      type: Object,
-      default: () => ({ id: '' })
-    },
-    gradeYearList: {
-      type: Array,
-      default: () => []
-    },
-    gradeNumList: {
-      type: Array,
-      default: () => []
-    },
-    classArray: {
-      type: Array,
-      default: () => []
-    }
-  },
-  name: 'resetStudent',
-  emits: ['close', 'getList'],
-  setup(props, { emit }) {
-    const data = reactive({
-      uploading: false
-    });
-    const message = useMessage();
-    const foemsRef = ref();
-    const createClassForm = reactive({
-      gradeYear: null,
-      currentGradeNum: null,
-      currentClass: null,
-      subjectId: null
-    });
-    const gradeYearList = ref([] as any);
-    const subjectList = ref([] as any);
-    const submitForms = () => {
-      foemsRef.value.validate(async (error: any) => {
-        if (error) {
-          return;
-        }
-        data.uploading = true;
-        try {
-          await addClass({ ...createClassForm });
-          message.success('新增成功');
-          emit('close');
-          emit('getList');
-          data.uploading = false;
-        } catch (e) {
-          console.log(e);
-        }
-        data.uploading = false;
-      });
-    };
-
-    const getYearList = async () => {
-      try {
-        const { data } = await api_getCurrentGradeYear({});
-        const temp = [
-          {
-            label: data + 1,
-            value: data + 1
-          },
-          {
-            label: data,
-            value: data
-          }
-        ];
-        gradeYearList.value = temp;
-      } catch {
-        //
-      }
-    };
-
-    const getConfigSubject = async () => {
-      try {
-        const { data } = await getConfiguredSubjects({
-          gradeYear: createClassForm.gradeYear,
-          currentGradeNum: createClassForm.currentGradeNum,
-          currentClass: createClassForm.currentClass
-        });
-        const temp = data || [];
-        subjectList.value = temp.map((item: any) => {
-          return {
-            label: item.name,
-            value: item.id
-          };
-        });
-      } catch {
-        //
-      }
-    };
-
-    watch(
-      () => [
-        createClassForm.gradeYear,
-        createClassForm.currentGradeNum,
-        createClassForm.currentClass
-      ],
-      () => {
-        createClassForm.subjectId = null;
-        getConfigSubject();
-      }
-    );
-
-    onMounted(() => {
-      getYearList();
-    });
-
-    return () => (
-      <div class={[styles.addClass]}>
-        <NForm label-placement="left" model={createClassForm} ref={foemsRef}>
-          <NFormItem
-            path="gradeYear"
-            rule={[
-              {
-                required: true,
-                message: '请选择学年'
-              }
-            ]}>
-            <CSelect
-              {...({
-                style: { width: '400px' },
-                options: gradeYearList.value,
-                placeholder: '选择学年',
-                clearable: true
-              } as any)}
-              v-model:value={createClassForm.gradeYear}></CSelect>
-          </NFormItem>
-          <NFormItem
-            path="currentGradeNum"
-            rule={[
-              {
-                required: true,
-                message: '请选择年级'
-              }
-            ]}>
-            <CSelect
-              {...({
-                style: { width: '400px' },
-                options: props.gradeNumList,
-                placeholder: '选择年级',
-                clearable: true
-              } as any)}
-              v-model:value={createClassForm.currentGradeNum}></CSelect>
-          </NFormItem>
-          <NFormItem
-            path="currentClass"
-            rule={[
-              {
-                required: true,
-                message: '请选择班级'
-              }
-            ]}>
-            <CSelect
-              {...({
-                style: { width: '400px' },
-                options: props.classArray,
-                placeholder: '选择班级',
-                clearable: true
-              } as any)}
-              v-model:value={createClassForm.currentClass}></CSelect>
-          </NFormItem>
-          <NFormItem
-            path="subjectId"
-            rule={[
-              {
-                required: true,
-                message: '请选择声部'
-              }
-            ]}>
-            <CSelect
-              {...({
-                style: { width: '400px' },
-                options: subjectList.value,
-                placeholder: '选择声部',
-                clearable: true
-              } as any)}
-              v-model:value={createClassForm.subjectId}></CSelect>
-          </NFormItem>
-        </NForm>
-        <NSpace class={styles.btnGroup} justify="center">
-          <NButton round onClick={() => emit('close')}>
-            取消
-          </NButton>
-          <NButton
-            round
-            loading={data.uploading}
-            onClick={() => submitForms()}
-            type="primary">
-            保存
-          </NButton>
-        </NSpace>
-      </div>
-    );
-  }
-});
+import {
+  NButton,
+  NSpace,
+  useMessage,
+  NForm,
+  NFormItem,
+  NCascader
+} from 'naive-ui';
+import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
+import styles from '../index.module.less';
+import CSelect from '/src/components/CSelect';
+import { addClass, getConfiguredSubjects } from '../api';
+import { api_getCurrentGradeYear } from '../../studentList/api';
+export default defineComponent({
+  props: {
+    activeRow: {
+      type: Object,
+      default: () => ({ id: '' })
+    },
+    gradeYearList: {
+      type: Array,
+      default: () => []
+    },
+    gradeNumList: {
+      type: Array,
+      default: () => []
+    },
+    classArray: {
+      type: Array,
+      default: () => []
+    }
+  },
+  name: 'resetStudent',
+  emits: ['close', 'getList'],
+  setup(props, { emit }) {
+    const data = reactive({
+      uploading: false
+    });
+    const message = useMessage();
+    const foemsRef = ref();
+    const createClassForm = reactive({
+      gradeYear: null,
+      currentGradeNum: null,
+      currentClass: null,
+      instrumentId: null
+    });
+    const gradeYearList = ref([] as any);
+    const subjectList = ref([] as any);
+    const submitForms = () => {
+      foemsRef.value.validate(async (error: any) => {
+        if (error) {
+          return;
+        }
+        data.uploading = true;
+        try {
+          await addClass({ ...createClassForm });
+          message.success('新增成功');
+          emit('close');
+          emit('getList');
+          data.uploading = false;
+        } catch (e) {
+          console.log(e);
+        }
+        data.uploading = false;
+      });
+    };
+
+    const getYearList = async () => {
+      try {
+        const { data } = await api_getCurrentGradeYear({});
+        const temp = [
+          {
+            label: data + 1,
+            value: data + 1
+          },
+          {
+            label: data,
+            value: data
+          }
+        ];
+        gradeYearList.value = temp;
+      } catch {
+        //
+      }
+    };
+
+    const getConfigSubject = async () => {
+      try {
+        const { data } = await getConfiguredSubjects({
+          gradeYear: createClassForm.gradeYear,
+          currentGradeNum: createClassForm.currentGradeNum,
+          currentClass: createClassForm.currentClass
+        });
+        const temp = data || [];
+        subjectList.value = temp;
+      } catch {
+        //
+      }
+    };
+
+    watch(
+      () => [
+        createClassForm.gradeYear,
+        createClassForm.currentGradeNum,
+        createClassForm.currentClass
+      ],
+      () => {
+        createClassForm.instrumentId = null;
+        getConfigSubject();
+      }
+    );
+
+    onMounted(() => {
+      getYearList();
+    });
+
+    return () => (
+      <div class={[styles.addClass]}>
+        <NForm label-placement="left" model={createClassForm} ref={foemsRef}>
+          <NFormItem
+            path="gradeYear"
+            rule={[
+              {
+                required: true,
+                message: '请选择学年'
+              }
+            ]}>
+            <CSelect
+              {...({
+                style: { width: '400px' },
+                options: gradeYearList.value,
+                placeholder: '选择学年',
+                clearable: true
+              } as any)}
+              v-model:value={createClassForm.gradeYear}></CSelect>
+          </NFormItem>
+          <NFormItem
+            path="currentGradeNum"
+            rule={[
+              {
+                required: true,
+                message: '请选择年级'
+              }
+            ]}>
+            <CSelect
+              {...({
+                style: { width: '400px' },
+                options: props.gradeNumList,
+                placeholder: '选择年级',
+                clearable: true
+              } as any)}
+              v-model:value={createClassForm.currentGradeNum}></CSelect>
+          </NFormItem>
+          <NFormItem
+            path="currentClass"
+            rule={[
+              {
+                required: true,
+                message: '请选择班级'
+              }
+            ]}>
+            <CSelect
+              {...({
+                style: { width: '400px' },
+                options: props.classArray,
+                placeholder: '选择班级',
+                clearable: true
+              } as any)}
+              v-model:value={createClassForm.currentClass}></CSelect>
+          </NFormItem>
+          <NFormItem
+            path="instrumentId"
+            rule={[
+              {
+                required: true,
+                message: '请选择乐器'
+              }
+            ]}>
+            {/* <CSelect
+              {...({
+                style: { width: '400px' },
+                options: subjectList.value,
+                placeholder: '选择乐器',
+                clearable: true
+              } as any)}
+              v-model:value={createClassForm.instrumentId}></CSelect> */}
+            <NCascader
+              placeholder="请选择乐器"
+              v-model:value={createClassForm.instrumentId}
+              options={subjectList.value}
+              checkStrategy="child"
+              showPath
+              childrenField="instruments"
+              expandTrigger="hover"
+              labelField="name"
+              valueField="id"
+              clearable
+              filterable
+              style={{ width: '400px' }}
+            />
+          </NFormItem>
+        </NForm>
+        <NSpace class={styles.btnGroup} justify="center">
+          <NButton round onClick={() => emit('close')}>
+            取消
+          </NButton>
+          <NButton
+            round
+            loading={data.uploading}
+            onClick={() => submitForms()}
+            type="primary">
+            保存
+          </NButton>
+        </NSpace>
+      </div>
+    );
+  }
+});

+ 1 - 1
src/views/home/modals/class-modal/index.tsx

@@ -220,7 +220,7 @@ export default defineComponent({
               ' | ' +
               (lessonCourseware.useChapterLessonCoursewareName || ''),
             image: item.teacherAvatar,
-            subjectName: item.subjectName
+            subjectName: item.instrumentName
           });
         });
 

+ 172 - 171
src/views/natural-resources/components/my-collect/index.tsx

@@ -1,171 +1,172 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import CardType from '@/components/card-type';
-import Pagination from '@/components/pagination';
-import SearchGroupResources from './search-group-resources';
-import { favorite, materialQueryPage, materialRemove } from '../../api';
-import { NSpin, useDialog, useMessage } from 'naive-ui';
-import TheEmpty from '@/components/TheEmpty';
-import CardPreview from '@/components/card-preview';
-import MyCollogeGuide from '@/custom-plugins/guide-page/myColloge-guide';
-export default defineComponent({
-  name: 'share-resources',
-  setup() {
-    const message = useMessage();
-    const dialog = useDialog();
-    const state = reactive({
-      searchWord: '',
-      loading: false,
-      pageTotal: 0,
-      pagination: {
-        page: 1,
-        rows: 20
-      },
-      searchGroup: {
-        type: 'MUSIC', //
-        name: '',
-        bookVersionId: null,
-        subjectId: null,
-        sourceType: 4
-      },
-      tableList: [] as any,
-      show: false,
-      item: {} as any
-    });
-    const getList = async () => {
-      try {
-        state.loading = true;
-        const { data } = await materialQueryPage({
-          ...state.searchGroup,
-          ...state.pagination
-        });
-        state.loading = false;
-        state.pageTotal = Number(data.total);
-        const tempRows = data.rows || [];
-        const temp: any = [];
-        tempRows.forEach((row: any) => {
-          temp.push({
-            id: row.id,
-            coverImg: row.coverImg,
-            type: row.type,
-            title: row.name,
-            isCollect: !!row.favoriteFlag,
-            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
-            content: row.content,
-            subjectId: row.subjectIds,
-            enableFlag: row.enableFlag ? 1 : 0,
-            openFlag: row.openFlag
-          });
-        });
-        state.tableList = temp || [];
-        setTimeout(() => {
-          showGuide.value = true;
-        }, 500);
-      } catch {
-        state.loading = false;
-      }
-    };
-    const showGuide = ref(false);
-    const onSearch = async (item: any) => {
-      state.pagination.page = 1;
-      if (item.type === 'MUSIC') {
-        const { subjectId, ...res } = item;
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...res,
-          musicalInstrumentId: subjectId,
-          subjectId: null
-        });
-      } else {
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...item,
-          musicalInstrumentId: null
-        });
-      }
-      getList();
-    };
-    // 收藏
-    const onCollect = async (item: any) => {
-      try {
-        await favorite({
-          materialId: item.id,
-          favoriteFlag: item.isCollect ? 0 : 1,
-          type: item.type
-        });
-        item.isCollect = !item.isCollect;
-
-        // onSearch(state.searchGroup);
-      } catch {
-        //
-      }
-    };
-
-    // 单个删除
-    const onRemove = async (item: any) => {
-      try {
-        dialog.warning({
-          title: '提示',
-          content: '该资源已下架,是否删除?',
-          positiveText: '确定',
-          negativeText: '取消',
-          onPositiveClick: async () => {
-            await materialRemove({ id: item.id });
-            message.success('删除成功');
-            onSearch(state.searchGroup);
-          }
-        });
-      } catch {
-        //
-      }
-    };
-
-    onMounted(() => {
-      getList();
-    });
-    return () => (
-      <>
-        <SearchGroupResources onSearch={(item: any) => onSearch(item)} />
-
-        <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
-          <div class={styles.list} id="myColloge-0">
-            {state.tableList.map((item: any) => (
-              <div class={styles.itemWrap}>
-                <div class={styles.itemWrapBox}>
-                  <CardType
-                    item={item}
-                    offShelf={item.enableFlag ? false : true}
-                    onOffShelf={() => onRemove(item)}
-                    disabledMouseHover={false}
-                    onClick={(val: any) => {
-                      if (val.type === 'IMG' || !item.enableFlag) return;
-                      state.show = true;
-                      state.item = val;
-                    }}
-                    onCollect={(item: any) => onCollect(item)}
-                  />
-                </div>
-              </div>
-            ))}
-
-            {!state.loading && state.tableList.length <= 0 && (
-              <TheEmpty
-                style={{ minHeight: '50vh' }}
-                description="暂无收藏资源"
-              />
-            )}
-          </div>
-        </NSpin>
-
-        <Pagination
-          v-model:page={state.pagination.page}
-          v-model:pageSize={state.pagination.rows}
-          v-model:pageTotal={state.pageTotal}
-          onList={getList}
-        />
-
-        {/* 弹窗查看 */}
-        <CardPreview v-model:show={state.show} item={state.item} />
-        {showGuide.value ? <MyCollogeGuide></MyCollogeGuide> : null}
-      </>
-    );
-  }
-});
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import CardType from '@/components/card-type';
+import Pagination from '@/components/pagination';
+import SearchGroupResources from './search-group-resources';
+import { favorite, materialQueryPage, materialRemove } from '../../api';
+import { NSpin, useDialog, useMessage } from 'naive-ui';
+import TheEmpty from '@/components/TheEmpty';
+import CardPreview from '@/components/card-preview';
+import MyCollogeGuide from '@/custom-plugins/guide-page/myColloge-guide';
+export default defineComponent({
+  name: 'share-resources',
+  setup() {
+    const message = useMessage();
+    const dialog = useDialog();
+    const state = reactive({
+      searchWord: '',
+      loading: false,
+      pageTotal: 0,
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        type: 'MUSIC', //
+        name: '',
+        bookVersionId: null,
+        subjectId: null,
+        sourceType: 4
+      },
+      tableList: [] as any,
+      show: false,
+      item: {} as any
+    });
+    const getList = async () => {
+      try {
+        state.loading = true;
+        const { data } = await materialQueryPage({
+          ...state.searchGroup,
+          ...state.pagination
+        });
+        state.loading = false;
+        state.pageTotal = Number(data.total);
+        const tempRows = data.rows || [];
+        const temp: any = [];
+        tempRows.forEach((row: any) => {
+          temp.push({
+            id: row.id,
+            coverImg: row.coverImg,
+            type: row.type,
+            title: row.name,
+            isCollect: !!row.favoriteFlag,
+            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            refFlag: row.refFlag,
+            content: row.content,
+            subjectId: row.subjectIds,
+            enableFlag: row.enableFlag ? 1 : 0,
+            openFlag: row.openFlag
+          });
+        });
+        state.tableList = temp || [];
+        setTimeout(() => {
+          showGuide.value = true;
+        }, 500);
+      } catch {
+        state.loading = false;
+      }
+    };
+    const showGuide = ref(false);
+    const onSearch = async (item: any) => {
+      state.pagination.page = 1;
+      if (item.type === 'MUSIC') {
+        const { subjectId, ...res } = item;
+        state.searchGroup = Object.assign(state.searchGroup, {
+          ...res,
+          musicalInstrumentId: subjectId,
+          subjectId: null
+        });
+      } else {
+        state.searchGroup = Object.assign(state.searchGroup, {
+          ...item,
+          musicalInstrumentId: null
+        });
+      }
+      getList();
+    };
+    // 收藏
+    const onCollect = async (item: any) => {
+      try {
+        await favorite({
+          materialId: item.id,
+          favoriteFlag: item.isCollect ? 0 : 1,
+          type: item.type
+        });
+        item.isCollect = !item.isCollect;
+
+        // onSearch(state.searchGroup);
+      } catch {
+        //
+      }
+    };
+
+    // 单个删除
+    const onRemove = async (item: any) => {
+      try {
+        dialog.warning({
+          title: '提示',
+          content: '该资源已下架,是否删除?',
+          positiveText: '确定',
+          negativeText: '取消',
+          onPositiveClick: async () => {
+            await materialRemove({ id: item.id });
+            message.success('删除成功');
+            onSearch(state.searchGroup);
+          }
+        });
+      } catch {
+        //
+      }
+    };
+
+    onMounted(() => {
+      getList();
+    });
+    return () => (
+      <>
+        <SearchGroupResources onSearch={(item: any) => onSearch(item)} />
+
+        <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
+          <div class={styles.list} id="myColloge-0">
+            {state.tableList.map((item: any) => (
+              <div class={styles.itemWrap}>
+                <div class={styles.itemWrapBox}>
+                  <CardType
+                    item={item}
+                    offShelf={item.enableFlag ? false : true}
+                    onOffShelf={() => onRemove(item)}
+                    disabledMouseHover={false}
+                    onClick={(val: any) => {
+                      if (val.type === 'IMG' || !item.enableFlag) return;
+                      state.show = true;
+                      state.item = val;
+                    }}
+                    onCollect={(item: any) => onCollect(item)}
+                  />
+                </div>
+              </div>
+            ))}
+
+            {!state.loading && state.tableList.length <= 0 && (
+              <TheEmpty
+                style={{ minHeight: '50vh' }}
+                description="暂无收藏资源"
+              />
+            )}
+          </div>
+        </NSpin>
+
+        <Pagination
+          v-model:page={state.pagination.page}
+          v-model:pageSize={state.pagination.rows}
+          v-model:pageTotal={state.pageTotal}
+          onList={getList}
+        />
+
+        {/* 弹窗查看 */}
+        <CardPreview v-model:show={state.show} item={state.item} />
+        {showGuide.value ? <MyCollogeGuide></MyCollogeGuide> : null}
+      </>
+    );
+  }
+});

+ 482 - 481
src/views/natural-resources/components/my-resources/index.tsx

@@ -1,481 +1,482 @@
-import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import CardType from '/src/components/card-type';
-import Pagination from '/src/components/pagination';
-import SearchGroupResources from './search-group-resources';
-import {
-  favorite,
-  materialQueryPage,
-  materialRemove,
-  materialRemoveAll,
-  materialRemoveMusic,
-  materialUpdateAll
-} from '../../api';
-import {
-  NButton,
-  NModal,
-  NSpace,
-  NSpin,
-  useDialog,
-  useMessage
-} from 'naive-ui';
-import TheEmpty from '/src/components/TheEmpty';
-import UploadModal, { formatUrlType } from './upload-modal';
-import CardPreview from '@/components/card-preview';
-import resourceDefault from '../../images/resource-default.png';
-import resourceChecked from '../../images/resource-checked.png';
-import MyResourcesGuide from '@/custom-plugins/guide-page/myResources-guide';
-import SaveModal from './save-modal';
-import deepClone from '/src/helpers/deep-clone';
-import UploadCover from './upload-cover';
-export default defineComponent({
-  name: 'share-resources',
-  setup() {
-    const message = useMessage();
-    const dialog = useDialog();
-    const state = reactive({
-      searchWord: '',
-      loading: false,
-      pageTotal: 0,
-      pagination: {
-        page: 1,
-        rows: 20
-      },
-      searchGroup: {
-        type: 'MUSIC', //
-        name: '',
-        bookVersionId: null,
-        subjectId: null,
-        sourceType: 3
-      },
-      tableList: [] as any,
-      uploadStatus: false,
-      saveStatus: false,
-      show: false,
-      item: {} as any,
-      editStatus: false, // 是否编辑
-      isAdd: false,
-      editList: [] as any, // TOD
-      editIds: [] as any, // 编辑的
-      editOverIds: [] as any, // 确认修改的数据
-      removeVisiable: false,
-      removeContent: '是否删除该资源?',
-      type: 'remove',
-      removeItem: {} as any
-    });
-    const showGuide = ref(false);
-    const getList = async () => {
-      try {
-        state.loading = true;
-        const { data } = await materialQueryPage({
-          ...state.searchGroup,
-          ...state.pagination
-        });
-        state.loading = false;
-        state.pageTotal = Number(data.total);
-        const tempRows = data.rows || [];
-        const temp: any = [];
-        tempRows.forEach((row: any) => {
-          temp.push({
-            id: row.id,
-            coverImg: row.coverImg,
-            type: row.type,
-            title: row.name,
-            isCollect: !!row.favoriteFlag,
-            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
-            content: row.content,
-            // subjectId: row.subjectIds,
-            instrumentIds: row.instrumentIds,
-            sourceFrom: row.sourceFrom,
-            enableFlag: row.enableFlag ? 1 : 0,
-            openFlag: row.openFlag
-          });
-        });
-        state.tableList = temp || [];
-        setTimeout(() => {
-          showGuide.value = true;
-        }, 500);
-      } catch {
-        state.loading = false;
-      }
-    };
-
-    const isEmpty = computed(() => {
-      const list = state.tableList || [];
-      let num = 0;
-      list.forEach((item: any) => {
-        if (!item.delFlag) {
-          num++;
-        }
-      });
-      return num > 0 ? false : true;
-    });
-
-    // 收藏
-    const onCollect = async (item: any) => {
-      try {
-        await favorite({
-          materialId: item.id,
-          favoriteFlag: item.isCollect ? 0 : 1,
-          type: item.type
-        });
-        item.isCollect = !item.isCollect;
-      } catch {
-        //
-      }
-    };
-
-    const onSearch = async (item: any) => {
-      state.pagination.page = 1;
-      if (item.type === 'MUSIC') {
-        const { subjectId, ...res } = item;
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...res,
-          musicalInstrumentId: subjectId,
-          subjectId: null
-        });
-      } else {
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...item,
-          musicalInstrumentId: null
-        });
-      }
-
-      getList();
-    };
-
-    // 批量删除
-    const onDelete = async () => {
-      try {
-        if (state.searchGroup.type === 'MUSIC') {
-          await materialRemoveMusic(state.editIds);
-        } else {
-          await materialRemoveAll(state.editIds);
-        }
-        // message.success('删除成功');
-        // state.pagination.page = 1;
-        // getList();
-        // state.editIds = [];
-      } catch {
-        //
-      }
-    };
-
-    // 单个删除
-    const onRemove = async () => {
-      try {
-        // 如果是乐谱类型则使用其它删除接口
-        if (state.searchGroup.type === 'MUSIC') {
-          await materialRemoveMusic([state.removeItem.id]);
-        } else {
-          await materialRemove({ ids: state.removeItem.id });
-        }
-
-        message.success('删除成功');
-        onSearch(state.searchGroup);
-      } catch {
-        //
-      }
-    };
-    const searchGroupResourcesRef = ref();
-    onMounted(() => {
-      getList();
-    });
-    return () => (
-      <>
-        <SearchGroupResources
-          ref={searchGroupResourcesRef}
-          onSearch={(item: any) => onSearch(item)}
-          onUpload={() => {
-            state.editList = [];
-            // state.uploadStatus = true;
-            state.saveStatus = true;
-          }}
-          onUpdate={() => {
-            // 修改
-            const list: any[] = [];
-            state.tableList.forEach((item: any) => {
-              if (state.editIds.indexOf(item.id) > -1) {
-                list.push(item);
-              }
-            });
-            state.editList = list || [];
-            if (state.editList.length <= 0) {
-              message.error('至少选择一条资源进行编辑');
-              return;
-            }
-            state.uploadStatus = true;
-            state.isAdd = false;
-          }}
-          onEditOver={async (status: boolean) => {
-            state.editStatus = status;
-            try {
-              // 修改
-              if (state.editOverIds.length > 0) {
-                const body = [] as any;
-                state.tableList.forEach((item: any) => {
-                  if (state.editOverIds.includes(item.id)) {
-                    body.push({
-                      instrumentIds: item.instrumentIds,
-                      openFlag: item.openFlag,
-                      coverImg: item.coverImg,
-                      name: item.title,
-                      type: item.type,
-                      enableFlag: 1,
-                      content: item.content,
-                      id: item.id || null,
-                      delFlag: item.delFlag
-                    });
-                  }
-                });
-                //
-                if (body.length > 0) {
-                  if (state.searchGroup.type === 'MUSIC') {
-                    await materialRemoveMusic(state.editIds);
-                  } else {
-                    await materialUpdateAll(body);
-                  }
-                }
-              }
-              message.success('修改成功');
-              state.pagination.page = 1;
-              getList();
-              state.editIds = [];
-              state.editOverIds = [];
-            } catch {
-              //
-            }
-          }}
-          onCancel={status => {
-            state.editStatus = status;
-            state.pagination.page = 1;
-            state.editIds = [];
-            state.editOverIds = [];
-            getList();
-          }}
-          onEdit={async (status: boolean) => {
-            // 点击编辑
-            state.editStatus = status;
-
-            if (!state.editStatus) {
-              state.editIds = [];
-              state.editOverIds = [];
-            }
-          }}
-          onSelectAll={(status: boolean) => {
-            // 全选
-            if (status) {
-              const tempIds: any[] = [];
-              state.tableList.forEach((item: any) => {
-                tempIds.push(item.id);
-              });
-              state.editIds = tempIds;
-            } else {
-              state.editIds = [];
-            }
-          }}
-          onDelete={() => {
-            if (state.editIds.length <= 0) {
-              message.error('至少选择一条资源进行删除');
-              return;
-            }
-            state.type = 'delete';
-            state.removeContent = '是否删除该资源?';
-            state.removeVisiable = true;
-          }}
-        />
-
-        <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
-          <div class={styles.list}>
-            {state.tableList.map(
-              (item: any) =>
-                item.delFlag !== 1 && (
-                  <div class={styles.itemWrap}>
-                    <div class={styles.itemWrapBox}>
-                      <CardType
-                        item={item}
-                        isDownload
-                        disabledMouseHover={false}
-                        offShelf={item.enableFlag ? false : true}
-                        onOffShelf={() => {
-                          state.type = 'remove';
-                          state.removeContent = '该资源已下架,是否删除?';
-                          state.removeVisiable = true;
-                          state.removeItem = item;
-                        }} // 下架
-                        onClick={(val: any) => {
-                          if (val.type === 'IMG' || !item.enableFlag) return;
-                          state.show = true;
-                          state.item = val;
-                        }}
-                        onCollect={(item: any) => onCollect(item)}
-                      />
-                      {/* 编辑模式 */}
-                      {state.editStatus && (
-                        <div
-                          class={[
-                            styles.itemBg,
-                            state.editIds.includes(item.id)
-                              ? styles.itemBgChecked
-                              : ''
-                          ]}
-                          onClick={() => {
-                            const index = state.editIds.indexOf(item.id);
-                            if (index > -1) {
-                              state.editIds.splice(index, 1);
-                            } else {
-                              state.editIds.push(item.id);
-                            }
-                          }}>
-                          <img
-                            src={
-                              state.editIds.includes(item.id)
-                                ? resourceChecked
-                                : resourceDefault
-                            }
-                            class={styles.resourceDefault}
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )
-            )}
-
-            {!state.loading && isEmpty.value && (
-              <TheEmpty style={{ minHeight: '50vh' }} description="暂无资源" />
-            )}
-          </div>
-        </NSpin>
-
-        <Pagination
-          disabled={state.editStatus}
-          v-model:page={state.pagination.page}
-          v-model:pageSize={state.pagination.rows}
-          v-model:pageTotal={state.pageTotal}
-          onList={getList}
-        />
-
-        {/* 弹窗查看 */}
-        <CardPreview v-model:show={state.show} item={state.item} />
-
-        <NModal
-          v-model:show={state.uploadStatus}
-          preset="card"
-          showIcon={false}
-          class={['modalTitle background', styles.attendClassModal]}
-          title={state.editStatus ? '修改资源' : '上传资源'}
-          blockScroll={false}>
-          <UploadModal
-            editStatus={state.editStatus}
-            onClose={() => {
-              state.uploadStatus = false;
-            }}
-            onConfirm={() => {
-              state.editIds = [];
-              state.editList = [];
-              state.editOverIds = [];
-              state.saveStatus = false;
-              searchGroupResourcesRef.value?.resetStatus();
-              onSearch(state.searchGroup);
-            }}
-            list={state.editList}
-            showDelete={state.isAdd}
-            onEditAll={(list: any) => {
-              try {
-                state.tableList.forEach((table: any) => {
-                  const item = list.find((item: any) => item.id === table.id);
-                  if (item) {
-                    table.openFlag = item.openFlag;
-                    table.title = item.name;
-                    table.instrumentIds = item.instrumentIds;
-                    table.content = item.content;
-                    table.coverImg = item.coverImg;
-
-                    if (!state.editOverIds.includes(table.id)) {
-                      state.editOverIds.push(table.id);
-                    }
-                  }
-                });
-                state.uploadStatus = false;
-              } catch (e: any) {
-                console.log(e);
-              }
-            }}
-          />
-        </NModal>
-
-        <NModal
-          v-model:show={state.saveStatus}
-          preset="card"
-          showIcon={false}
-          class={['modalTitle background', styles.attendClassSaveModal]}
-          title={'上传资源'}
-          blockScroll={false}>
-          <SaveModal
-            onClose={() => (state.saveStatus = false)}
-            onConfrim={(val: any) => {
-              const list = val || [];
-              const temp: any = [];
-              list.forEach((item: any) => {
-                temp.push({
-                  instrumentIds: null,
-                  openFlag: false,
-                  coverImg: item.coverImg,
-                  title: item.name || '',
-                  type: formatUrlType(item.content),
-                  enableFlag: 1,
-                  content: item.content,
-                  id: null
-                });
-              });
-              state.editList = [...temp];
-              state.uploadStatus = true;
-              state.isAdd = true;
-              state.editStatus = false;
-            }}
-          />
-        </NModal>
-
-        {showGuide.value ? <MyResourcesGuide></MyResourcesGuide> : null}
-
-        <NModal
-          v-model:show={state.removeVisiable}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable]}
-          title={'提示'}>
-          <div class={styles.studentRemove}>
-            <p>{state.removeContent}</p>
-
-            <NSpace class={styles.btnGroupModal} justify="center">
-              <NButton
-                round
-                type="primary"
-                onClick={() => {
-                  if (state.type === 'remove') {
-                    onRemove();
-                  } else {
-                    state.tableList.forEach((item: any) => {
-                      if (state.editIds.includes(item.id)) {
-                        item.delFlag = 1;
-
-                        if (!state.editOverIds.includes(item.id)) {
-                          state.editOverIds.push(item.id);
-                        }
-                      }
-                    });
-                  }
-                  state.removeVisiable = false;
-                }}>
-                确定
-              </NButton>
-              <NButton round onClick={() => (state.removeVisiable = false)}>
-                取消
-              </NButton>
-            </NSpace>
-          </div>
-        </NModal>
-      </>
-    );
-  }
-});
+import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import CardType from '/src/components/card-type';
+import Pagination from '/src/components/pagination';
+import SearchGroupResources from './search-group-resources';
+import {
+  favorite,
+  materialQueryPage,
+  materialRemove,
+  materialRemoveAll,
+  materialRemoveMusic,
+  materialUpdateAll
+} from '../../api';
+import {
+  NButton,
+  NModal,
+  NSpace,
+  NSpin,
+  useDialog,
+  useMessage
+} from 'naive-ui';
+import TheEmpty from '/src/components/TheEmpty';
+import UploadModal, { formatUrlType } from './upload-modal';
+import CardPreview from '@/components/card-preview';
+import resourceDefault from '../../images/resource-default.png';
+import resourceChecked from '../../images/resource-checked.png';
+import MyResourcesGuide from '@/custom-plugins/guide-page/myResources-guide';
+import SaveModal from './save-modal';
+import deepClone from '/src/helpers/deep-clone';
+import UploadCover from './upload-cover';
+export default defineComponent({
+  name: 'share-resources',
+  setup() {
+    const message = useMessage();
+    const dialog = useDialog();
+    const state = reactive({
+      searchWord: '',
+      loading: false,
+      pageTotal: 0,
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        type: 'MUSIC', //
+        name: '',
+        bookVersionId: null,
+        subjectId: null,
+        sourceType: 3
+      },
+      tableList: [] as any,
+      uploadStatus: false,
+      saveStatus: false,
+      show: false,
+      item: {} as any,
+      editStatus: false, // 是否编辑
+      isAdd: false,
+      editList: [] as any, // TOD
+      editIds: [] as any, // 编辑的
+      editOverIds: [] as any, // 确认修改的数据
+      removeVisiable: false,
+      removeContent: '是否删除该资源?',
+      type: 'remove',
+      removeItem: {} as any
+    });
+    const showGuide = ref(false);
+    const getList = async () => {
+      try {
+        state.loading = true;
+        const { data } = await materialQueryPage({
+          ...state.searchGroup,
+          ...state.pagination
+        });
+        state.loading = false;
+        state.pageTotal = Number(data.total);
+        const tempRows = data.rows || [];
+        const temp: any = [];
+        tempRows.forEach((row: any) => {
+          temp.push({
+            id: row.id,
+            coverImg: row.coverImg,
+            type: row.type,
+            title: row.name,
+            isCollect: !!row.favoriteFlag,
+            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            refFlag: row.refFlag,
+            content: row.content,
+            // subjectId: row.subjectIds,
+            instrumentIds: row.instrumentIds,
+            sourceFrom: row.sourceFrom,
+            enableFlag: row.enableFlag ? 1 : 0,
+            openFlag: row.openFlag
+          });
+        });
+        state.tableList = temp || [];
+        setTimeout(() => {
+          showGuide.value = true;
+        }, 500);
+      } catch {
+        state.loading = false;
+      }
+    };
+
+    const isEmpty = computed(() => {
+      const list = state.tableList || [];
+      let num = 0;
+      list.forEach((item: any) => {
+        if (!item.delFlag) {
+          num++;
+        }
+      });
+      return num > 0 ? false : true;
+    });
+
+    // 收藏
+    const onCollect = async (item: any) => {
+      try {
+        await favorite({
+          materialId: item.id,
+          favoriteFlag: item.isCollect ? 0 : 1,
+          type: item.type
+        });
+        item.isCollect = !item.isCollect;
+      } catch {
+        //
+      }
+    };
+
+    const onSearch = async (item: any) => {
+      state.pagination.page = 1;
+      if (item.type === 'MUSIC') {
+        const { subjectId, ...res } = item;
+        state.searchGroup = Object.assign(state.searchGroup, {
+          ...res,
+          musicalInstrumentId: subjectId,
+          subjectId: null
+        });
+      } else {
+        state.searchGroup = Object.assign(state.searchGroup, {
+          ...item,
+          musicalInstrumentId: null
+        });
+      }
+
+      getList();
+    };
+
+    // 批量删除
+    const onDelete = async () => {
+      try {
+        if (state.searchGroup.type === 'MUSIC') {
+          await materialRemoveMusic(state.editIds);
+        } else {
+          await materialRemoveAll(state.editIds);
+        }
+        // message.success('删除成功');
+        // state.pagination.page = 1;
+        // getList();
+        // state.editIds = [];
+      } catch {
+        //
+      }
+    };
+
+    // 单个删除
+    const onRemove = async () => {
+      try {
+        // 如果是乐谱类型则使用其它删除接口
+        if (state.searchGroup.type === 'MUSIC') {
+          await materialRemoveMusic([state.removeItem.id]);
+        } else {
+          await materialRemove({ ids: state.removeItem.id });
+        }
+
+        message.success('删除成功');
+        onSearch(state.searchGroup);
+      } catch {
+        //
+      }
+    };
+    const searchGroupResourcesRef = ref();
+    onMounted(() => {
+      getList();
+    });
+    return () => (
+      <>
+        <SearchGroupResources
+          ref={searchGroupResourcesRef}
+          onSearch={(item: any) => onSearch(item)}
+          onUpload={() => {
+            state.editList = [];
+            // state.uploadStatus = true;
+            state.saveStatus = true;
+          }}
+          onUpdate={() => {
+            // 修改
+            const list: any[] = [];
+            state.tableList.forEach((item: any) => {
+              if (state.editIds.indexOf(item.id) > -1) {
+                list.push(item);
+              }
+            });
+            state.editList = list || [];
+            if (state.editList.length <= 0) {
+              message.error('至少选择一条资源进行编辑');
+              return;
+            }
+            state.uploadStatus = true;
+            state.isAdd = false;
+          }}
+          onEditOver={async (status: boolean) => {
+            state.editStatus = status;
+            try {
+              // 修改
+              if (state.editOverIds.length > 0) {
+                const body = [] as any;
+                state.tableList.forEach((item: any) => {
+                  if (state.editOverIds.includes(item.id)) {
+                    body.push({
+                      instrumentIds: item.instrumentIds,
+                      openFlag: item.openFlag,
+                      coverImg: item.coverImg,
+                      name: item.title,
+                      type: item.type,
+                      enableFlag: 1,
+                      content: item.content,
+                      id: item.id || null,
+                      delFlag: item.delFlag
+                    });
+                  }
+                });
+                //
+                if (body.length > 0) {
+                  if (state.searchGroup.type === 'MUSIC') {
+                    await materialRemoveMusic(state.editIds);
+                  } else {
+                    await materialUpdateAll(body);
+                  }
+                }
+              }
+              message.success('修改成功');
+              state.pagination.page = 1;
+              getList();
+              state.editIds = [];
+              state.editOverIds = [];
+            } catch {
+              //
+            }
+          }}
+          onCancel={status => {
+            state.editStatus = status;
+            state.pagination.page = 1;
+            state.editIds = [];
+            state.editOverIds = [];
+            getList();
+          }}
+          onEdit={async (status: boolean) => {
+            // 点击编辑
+            state.editStatus = status;
+
+            if (!state.editStatus) {
+              state.editIds = [];
+              state.editOverIds = [];
+            }
+          }}
+          onSelectAll={(status: boolean) => {
+            // 全选
+            if (status) {
+              const tempIds: any[] = [];
+              state.tableList.forEach((item: any) => {
+                tempIds.push(item.id);
+              });
+              state.editIds = tempIds;
+            } else {
+              state.editIds = [];
+            }
+          }}
+          onDelete={() => {
+            if (state.editIds.length <= 0) {
+              message.error('至少选择一条资源进行删除');
+              return;
+            }
+            state.type = 'delete';
+            state.removeContent = '是否删除该资源?';
+            state.removeVisiable = true;
+          }}
+        />
+
+        <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
+          <div class={styles.list}>
+            {state.tableList.map(
+              (item: any) =>
+                item.delFlag !== 1 && (
+                  <div class={styles.itemWrap}>
+                    <div class={styles.itemWrapBox}>
+                      <CardType
+                        item={item}
+                        isDownload
+                        disabledMouseHover={false}
+                        offShelf={item.enableFlag ? false : true}
+                        onOffShelf={() => {
+                          state.type = 'remove';
+                          state.removeContent = '该资源已下架,是否删除?';
+                          state.removeVisiable = true;
+                          state.removeItem = item;
+                        }} // 下架
+                        onClick={(val: any) => {
+                          if (val.type === 'IMG' || !item.enableFlag) return;
+                          state.show = true;
+                          state.item = val;
+                        }}
+                        onCollect={(item: any) => onCollect(item)}
+                      />
+                      {/* 编辑模式 */}
+                      {state.editStatus && (
+                        <div
+                          class={[
+                            styles.itemBg,
+                            state.editIds.includes(item.id)
+                              ? styles.itemBgChecked
+                              : ''
+                          ]}
+                          onClick={() => {
+                            const index = state.editIds.indexOf(item.id);
+                            if (index > -1) {
+                              state.editIds.splice(index, 1);
+                            } else {
+                              state.editIds.push(item.id);
+                            }
+                          }}>
+                          <img
+                            src={
+                              state.editIds.includes(item.id)
+                                ? resourceChecked
+                                : resourceDefault
+                            }
+                            class={styles.resourceDefault}
+                          />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )
+            )}
+
+            {!state.loading && isEmpty.value && (
+              <TheEmpty style={{ minHeight: '50vh' }} description="暂无资源" />
+            )}
+          </div>
+        </NSpin>
+
+        <Pagination
+          disabled={state.editStatus}
+          v-model:page={state.pagination.page}
+          v-model:pageSize={state.pagination.rows}
+          v-model:pageTotal={state.pageTotal}
+          onList={getList}
+        />
+
+        {/* 弹窗查看 */}
+        <CardPreview v-model:show={state.show} item={state.item} />
+
+        <NModal
+          v-model:show={state.uploadStatus}
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background', styles.attendClassModal]}
+          title={state.editStatus ? '修改资源' : '上传资源'}
+          blockScroll={false}>
+          <UploadModal
+            editStatus={state.editStatus}
+            onClose={() => {
+              state.uploadStatus = false;
+            }}
+            onConfirm={() => {
+              state.editIds = [];
+              state.editList = [];
+              state.editOverIds = [];
+              state.saveStatus = false;
+              searchGroupResourcesRef.value?.resetStatus();
+              onSearch(state.searchGroup);
+            }}
+            list={state.editList}
+            showDelete={state.isAdd}
+            onEditAll={(list: any) => {
+              try {
+                state.tableList.forEach((table: any) => {
+                  const item = list.find((item: any) => item.id === table.id);
+                  if (item) {
+                    table.openFlag = item.openFlag;
+                    table.title = item.name;
+                    table.instrumentIds = item.instrumentIds;
+                    table.content = item.content;
+                    table.coverImg = item.coverImg;
+
+                    if (!state.editOverIds.includes(table.id)) {
+                      state.editOverIds.push(table.id);
+                    }
+                  }
+                });
+                state.uploadStatus = false;
+              } catch (e: any) {
+                console.log(e);
+              }
+            }}
+          />
+        </NModal>
+
+        <NModal
+          v-model:show={state.saveStatus}
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background', styles.attendClassSaveModal]}
+          title={'上传资源'}
+          blockScroll={false}>
+          <SaveModal
+            onClose={() => (state.saveStatus = false)}
+            onConfrim={(val: any) => {
+              const list = val || [];
+              const temp: any = [];
+              list.forEach((item: any) => {
+                temp.push({
+                  instrumentIds: null,
+                  openFlag: false,
+                  coverImg: item.coverImg,
+                  title: item.name || '',
+                  type: formatUrlType(item.content),
+                  enableFlag: 1,
+                  content: item.content,
+                  id: null
+                });
+              });
+              state.editList = [...temp];
+              state.uploadStatus = true;
+              state.isAdd = true;
+              state.editStatus = false;
+            }}
+          />
+        </NModal>
+
+        {showGuide.value ? <MyResourcesGuide></MyResourcesGuide> : null}
+
+        <NModal
+          v-model:show={state.removeVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable]}
+          title={'提示'}>
+          <div class={styles.studentRemove}>
+            <p>{state.removeContent}</p>
+
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton
+                round
+                type="primary"
+                onClick={() => {
+                  if (state.type === 'remove') {
+                    onRemove();
+                  } else {
+                    state.tableList.forEach((item: any) => {
+                      if (state.editIds.includes(item.id)) {
+                        item.delFlag = 1;
+
+                        if (!state.editOverIds.includes(item.id)) {
+                          state.editOverIds.push(item.id);
+                        }
+                      }
+                    });
+                  }
+                  state.removeVisiable = false;
+                }}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (state.removeVisiable = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
+      </>
+    );
+  }
+});

+ 178 - 177
src/views/natural-resources/components/share-resources/index.tsx

@@ -1,177 +1,178 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import CardType from '/src/components/card-type';
-import Pagination from '/src/components/pagination';
-import SearchGroupResources from './search-group-resources';
-import { favorite, materialQueryPage } from '../../api';
-import { NModal, NSpin } from 'naive-ui';
-import TheEmpty from '/src/components/TheEmpty';
-import CardPreview from '/src/components/card-preview';
-import AddTeaching from '../../model/add-teaching';
-import ShareResourcesGuide from '@/custom-plugins/guide-page/shareResources-guide';
-
-export default defineComponent({
-  name: 'share-resources',
-  setup() {
-    const state = reactive({
-      searchWord: '',
-      loading: false,
-      pageTotal: 0,
-      pagination: {
-        page: 1,
-        rows: 20
-      },
-      searchGroup: {
-        type: 'MUSIC', //
-        name: '',
-        bookVersionId: null,
-        subjectId: null,
-        sourceType: 2
-      },
-      tableList: [] as any,
-      teachingStatus: false,
-      show: false,
-      item: {} as any
-    });
-    const showGuide = ref(false);
-    const SearchGroupResourcesRef = ref();
-    const getList = async () => {
-      try {
-        state.loading = true;
-        const { data } = await materialQueryPage({
-          ...state.searchGroup,
-          ...state.pagination
-        });
-        state.loading = false;
-        state.pageTotal = Number(data.total);
-        const tempRows = data.rows || [];
-        const temp: any = [];
-        tempRows.forEach((row: any) => {
-          temp.push({
-            id: row.id,
-            coverImg: row.coverImg,
-            type: row.type,
-            title: row.name,
-            isCollect: !!row.favoriteFlag,
-            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
-            content: row.content
-          });
-        });
-        state.tableList = temp || [];
-        setTimeout(() => {
-          showGuide.value = true;
-        }, 500);
-      } catch {
-        state.loading = false;
-      }
-    };
-
-    const onSearch = async (item: any) => {
-      state.pagination.page = 1;
-      if (item.type === 'MUSIC') {
-        const { subjectId, ...res } = item;
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...res,
-          musicalInstrumentId: subjectId,
-          subjectId: null
-        });
-      } else {
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...item,
-          musicalInstrumentId: null
-        });
-      }
-      getList();
-    };
-
-    // 收藏
-    const onCollect = async (item: any) => {
-      try {
-        await favorite({
-          materialId: item.id,
-          favoriteFlag: item.isCollect ? 0 : 1,
-          type: item.type
-        });
-        item.isCollect = !item.isCollect;
-      } catch {
-        //
-      }
-    };
-
-    onMounted(() => {
-      getList();
-    });
-    return () => (
-      <>
-        <SearchGroupResources
-          ref={SearchGroupResourcesRef}
-          onSearch={(item: any) => onSearch(item)}
-          onAdd={() => (state.teachingStatus = true)}
-        />
-        <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
-          <div class={styles.list}>
-            {state.tableList.map((item: any, index: number) => (
-              <div class={styles.itemWrap}>
-                <div class={styles.itemWrapBox}>
-                  {index == 0 ? (
-                    <CardType
-                      {...{ id: 'shareResources-1' }}
-                      item={item}
-                      disabledMouseHover={false}
-                      onClick={(val: any) => {
-                        if (val.type === 'IMG') return;
-                        state.show = true;
-                        state.item = val;
-                      }}
-                      onCollect={(item: any) => onCollect(item)}
-                    />
-                  ) : (
-                    <CardType
-                      item={item}
-                      disabledMouseHover={false}
-                      onClick={(val: any) => {
-                        if (val.type === 'IMG') return;
-                        state.show = true;
-                        state.item = val;
-                      }}
-                      onCollect={(item: any) => onCollect(item)}
-                    />
-                  )}
-                </div>
-              </div>
-            ))}
-
-            {!state.loading && state.tableList.length <= 0 && (
-              <TheEmpty
-                style={{ minHeight: '50vh' }}
-                description="暂无共享资源"
-              />
-            )}
-          </div>
-        </NSpin>
-
-        <Pagination
-          v-model:page={state.pagination.page}
-          v-model:pageSize={state.pagination.rows}
-          v-model:pageTotal={state.pageTotal}
-          onList={getList}
-        />
-
-        {/* 弹窗查看 */}
-        <CardPreview v-model:show={state.show} item={state.item} />
-
-        {/* 添加自定义教材 */}
-        <NModal
-          v-model:show={state.teachingStatus}
-          preset="card"
-          showIcon={false}
-          class={['modalTitle background', styles.teachingModal]}
-          title={'自定义教材'}
-          blockScroll={false}>
-          <AddTeaching onClose={() => (state.teachingStatus = false)} />
-        </NModal>
-        {showGuide.value ? <ShareResourcesGuide></ShareResourcesGuide> : null}
-      </>
-    );
-  }
-});
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import CardType from '/src/components/card-type';
+import Pagination from '/src/components/pagination';
+import SearchGroupResources from './search-group-resources';
+import { favorite, materialQueryPage } from '../../api';
+import { NModal, NSpin } from 'naive-ui';
+import TheEmpty from '/src/components/TheEmpty';
+import CardPreview from '/src/components/card-preview';
+import AddTeaching from '../../model/add-teaching';
+import ShareResourcesGuide from '@/custom-plugins/guide-page/shareResources-guide';
+
+export default defineComponent({
+  name: 'share-resources',
+  setup() {
+    const state = reactive({
+      searchWord: '',
+      loading: false,
+      pageTotal: 0,
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        type: 'MUSIC', //
+        name: '',
+        bookVersionId: null,
+        subjectId: null,
+        sourceType: 2
+      },
+      tableList: [] as any,
+      teachingStatus: false,
+      show: false,
+      item: {} as any
+    });
+    const showGuide = ref(false);
+    const SearchGroupResourcesRef = ref();
+    const getList = async () => {
+      try {
+        state.loading = true;
+        const { data } = await materialQueryPage({
+          ...state.searchGroup,
+          ...state.pagination
+        });
+        state.loading = false;
+        state.pageTotal = Number(data.total);
+        const tempRows = data.rows || [];
+        const temp: any = [];
+        tempRows.forEach((row: any) => {
+          temp.push({
+            id: row.id,
+            coverImg: row.coverImg,
+            type: row.type,
+            title: row.name,
+            isCollect: !!row.favoriteFlag,
+            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            refFlag: row.refFlag,
+            content: row.content
+          });
+        });
+        state.tableList = temp || [];
+        setTimeout(() => {
+          showGuide.value = true;
+        }, 500);
+      } catch {
+        state.loading = false;
+      }
+    };
+
+    const onSearch = async (item: any) => {
+      state.pagination.page = 1;
+      if (item.type === 'MUSIC') {
+        const { subjectId, ...res } = item;
+        state.searchGroup = Object.assign(state.searchGroup, {
+          ...res,
+          musicalInstrumentId: subjectId,
+          subjectId: null
+        });
+      } else {
+        state.searchGroup = Object.assign(state.searchGroup, {
+          ...item,
+          musicalInstrumentId: null
+        });
+      }
+      getList();
+    };
+
+    // 收藏
+    const onCollect = async (item: any) => {
+      try {
+        await favorite({
+          materialId: item.id,
+          favoriteFlag: item.isCollect ? 0 : 1,
+          type: item.type
+        });
+        item.isCollect = !item.isCollect;
+      } catch {
+        //
+      }
+    };
+
+    onMounted(() => {
+      getList();
+    });
+    return () => (
+      <>
+        <SearchGroupResources
+          ref={SearchGroupResourcesRef}
+          onSearch={(item: any) => onSearch(item)}
+          onAdd={() => (state.teachingStatus = true)}
+        />
+        <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
+          <div class={styles.list}>
+            {state.tableList.map((item: any, index: number) => (
+              <div class={styles.itemWrap}>
+                <div class={styles.itemWrapBox}>
+                  {index == 0 ? (
+                    <CardType
+                      {...{ id: 'shareResources-1' }}
+                      item={item}
+                      disabledMouseHover={false}
+                      onClick={(val: any) => {
+                        if (val.type === 'IMG') return;
+                        state.show = true;
+                        state.item = val;
+                      }}
+                      onCollect={(item: any) => onCollect(item)}
+                    />
+                  ) : (
+                    <CardType
+                      item={item}
+                      disabledMouseHover={false}
+                      onClick={(val: any) => {
+                        if (val.type === 'IMG') return;
+                        state.show = true;
+                        state.item = val;
+                      }}
+                      onCollect={(item: any) => onCollect(item)}
+                    />
+                  )}
+                </div>
+              </div>
+            ))}
+
+            {!state.loading && state.tableList.length <= 0 && (
+              <TheEmpty
+                style={{ minHeight: '50vh' }}
+                description="暂无共享资源"
+              />
+            )}
+          </div>
+        </NSpin>
+
+        <Pagination
+          v-model:page={state.pagination.page}
+          v-model:pageSize={state.pagination.rows}
+          v-model:pageTotal={state.pageTotal}
+          onList={getList}
+        />
+
+        {/* 弹窗查看 */}
+        <CardPreview v-model:show={state.show} item={state.item} />
+
+        {/* 添加自定义教材 */}
+        <NModal
+          v-model:show={state.teachingStatus}
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background', styles.teachingModal]}
+          title={'自定义教材'}
+          blockScroll={false}>
+          <AddTeaching onClose={() => (state.teachingStatus = false)} />
+        </NModal>
+        {showGuide.value ? <ShareResourcesGuide></ShareResourcesGuide> : null}
+      </>
+    );
+  }
+});

+ 8 - 0
src/views/prepare-lessons/api.ts

@@ -287,3 +287,11 @@ export const api_teacherChapterLessonCoursewareUpdate = (params: any) => {
 export const api_teacherChapterLessonCoursewareDetail = (id: string) => {
   return request.get('/edu-app/teacherChapterLessonCourseware/detail/' + id);
 };
+
+/**
+ *  @description: 后台 素材详情
+ * @param params
+ */
+export const api_materialDetail = (id: string) => {
+  return request.get('/edu-app/material/detail/' + id);
+};

+ 795 - 791
src/views/prepare-lessons/components/lesson-main/courseware-presets/index.tsx

@@ -1,791 +1,795 @@
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  reactive,
-  ref,
-  watch
-} from 'vue';
-import styles from './index.module.less';
-import {
-  NButton,
-  NTooltip,
-  NIcon,
-  NImage,
-  NModal,
-  NScrollbar,
-  NSpin,
-  NTabPane,
-  NTabs,
-  useMessage,
-  NPopselect
-} from 'naive-ui';
-import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import add from '@/views/studentList/images/add.png';
-// import iconSlideRight from '../../../images/icon-slide-right.png';
-import CoursewareType from '../../../model/courseware-type';
-import TheEmpty from '/src/components/TheEmpty';
-import RelatedClass from '../../../model/related-class';
-import { state } from '/src/state';
-import { useResizeObserver } from '@vueuse/core';
-import AttendClass from '/src/views/prepare-lessons/model/attend-class';
-import {
-  api_addByOpenCourseware,
-  api_teacherChapterLessonCoursewareRemove,
-  teacherChapterLessonCoursewareList,
-  courseScheduleStart
-} from '../../../api';
-import { useRoute, useRouter } from 'vue-router';
-import TheMessageDialog from '/src/components/TheMessageDialog';
-import { eventGlobal, fscreen } from '/src/utils';
-import PreviewWindow from '/src/views/preview-window';
-import Related from './related';
-import Train from '../train';
-import ResourceMain from '../../resource-main';
-
-export default defineComponent({
-  name: 'courseware-presets',
-  props: {
-    addParam: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ['change'],
-  setup(props, { emit }) {
-    const prepareStore = usePrepareStore();
-    const message = useMessage();
-    const route = useRoute();
-    const router = useRouter();
-    const localStorageSubjectId = localStorage.getItem(
-      'prepareLessonSubjectId'
-    );
-
-    const forms = reactive({
-      // 选取参数带的,后取缓存
-      leftWidth: '100%',
-      rightWidth: '0',
-      messageLoading: false,
-      instrumentId: route.query.instrumentId
-        ? Number(route.query.instrumentId)
-        : localStorageSubjectId
-        ? Number(localStorageSubjectId)
-        : '',
-      courseScheduleSubjectId: route.query.courseScheduleSubjectId,
-      classGroupId: route.query.classGroupId,
-      preStudentNum: route.query.preStudentNum,
-      bodyWidth: '100%',
-      loading: false,
-      openLoading: false,
-      showRelatedClass: false,
-      tableList: [] as any,
-      openTableShow: true, // 是否显示
-      openTableList: [] as any,
-      selectItem: {} as any,
-      editTitleVisiable: false,
-      editTitle: null,
-      editBtnLoading: false,
-      preRemoveVisiable: false,
-      addVisiable: false, // 是否有添加的课件
-      carouselIndex: 0,
-      showAttendClass: false,
-      attendClassType: 'change', //
-      attendClassItem: {} as any,
-      previewModal: false,
-      previewParams: {
-        type: '',
-        courseId: '',
-        instrumentId: '',
-        detailId: ''
-      } as any,
-      workVisiable: false,
-      wikiCategoryIdChild: null
-    });
-
-    const getCoursewareList = async () => {
-      forms.loading = true;
-      try {
-        // 判断是否有选择对应的课件 或声部
-        if (!prepareStore.getSelectKey) return (forms.loading = false);
-
-        const { data } = await teacherChapterLessonCoursewareList({
-          instrumentId: prepareStore.getInstrumentId,
-          coursewareDetailKnowledgeId: prepareStore.getSelectKey
-        });
-        if (!Array.isArray(data)) {
-          return;
-        }
-        const tempList: any = [];
-        data.forEach((item: any) => {
-          const firstItem: any =
-            item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];
-          tempList.push({
-            id: item.id,
-            lessonPreTrainingId: item.lessonPreTrainingId,
-            openFlag: item.openFlag,
-            openFlagEnable: item.openFlagEnable,
-            subjectNames: item.subjectNames,
-            fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
-            name: item.name,
-            coverImg: firstItem?.bizInfo.coverImg,
-            type: firstItem?.bizInfo.type,
-            isNotWork: item.lessonPreTrainingNum <= 0 ? true : false // 是否布置作业
-          });
-        });
-        forms.tableList = tempList;
-      } catch {
-        //
-      }
-      forms.loading = false;
-    };
-
-    // 监听选择的key 左侧选择了其它的课
-    watch(
-      () => [prepareStore.getSelectKey, prepareStore.getInstrumentId],
-      async () => {
-        eventGlobal.emit('openCoursewareChanged');
-        await getCoursewareList();
-        // await getOpenCoursewareList();
-
-        subjectRef.value?.syncBarPosition();
-      }
-    );
-
-    watch(
-      () => prepareStore.getInstrumentList,
-      () => {
-        checkInstrumentIds();
-      }
-    );
-
-    const checkInstrumentIds = () => {
-      const instrumentsList = prepareStore.getSingleInstrumentList;
-
-      // 并且没有声部时才会更新
-      if (instrumentsList.length > 0) {
-        const prepareLessonCourseWareSubjectIsNull = sessionStorage.getItem(
-          'prepareLessonCourseWareSubjectIsNull'
-        );
-        if (prepareLessonCourseWareSubjectIsNull === 'true') {
-          prepareStore.setInstrumentId('');
-          return;
-        }
-
-        // 并且声部在列表中
-        const localStorageSubjectId = localStorage.getItem(
-          'prepareLessonSubjectId'
-        );
-        // // 先取 上次上课声部,在取班级声部 最后取缓存
-        let instrumentId = null;
-        let index = -1;
-        if (forms.courseScheduleSubjectId) {
-          // 判断浏览器上面是否有
-          index = instrumentsList.findIndex(
-            (subject: any) => subject.id == forms.courseScheduleSubjectId
-          );
-          if (index >= 0) {
-            instrumentId = Number(forms.courseScheduleSubjectId);
-          }
-        }
-        // 判断班级上面声部 & 还没有声部
-        if (forms.instrumentId && !instrumentId) {
-          // 判断浏览器上面是否有
-          index = instrumentsList.findIndex(
-            (subject: any) => subject.id == forms.instrumentId
-          );
-          if (index >= 0) {
-            instrumentId = Number(forms.instrumentId);
-          }
-        }
-        // 缓存声部 & 还没有声部
-        if (localStorageSubjectId && !instrumentId) {
-          // 判断浏览器上面是否有
-          index = instrumentsList.findIndex(
-            (subject: any) => subject.id == localStorageSubjectId
-          );
-          if (index >= 0) {
-            instrumentId = Number(localStorageSubjectId);
-          }
-        }
-        // 判断是否选择为空
-        if (instrumentId && index >= 0) {
-          prepareStore.setSubjectId(instrumentId);
-          // forms.instrumentId = instrumentId;
-        } else {
-          // 判断是否有缓存
-          // prepareStore.setSubjectId(instrumentsList[0].id);
-          // forms.instrumentId = instrumentsList[0].id;
-        }
-
-        // 保存
-        localStorage.setItem(
-          'prepareLessonSubjectId',
-          prepareStore.getInstrumentId as any
-        );
-
-        subjectRef.value?.syncBarPosition();
-      }
-    };
-
-    const getInitInstrumentId = () => {
-      let instrumentId: any = '';
-      prepareStore.getInstrumentList.forEach((item: any) => {
-        if (Array.isArray(item.instruments)) {
-          item.instruments.forEach((child: any) => {
-            if (child.id === prepareStore.getInstrumentId) {
-              instrumentId = child.id;
-            }
-          });
-        }
-      });
-      if (instrumentId) {
-        forms.wikiCategoryIdChild = instrumentId;
-      }
-    };
-    const subjectRef = ref();
-    onMounted(async () => {
-      useResizeObserver(
-        document.querySelector('#presetsLeftRef') as HTMLElement,
-        (entries: any) => {
-          const entry = entries[0];
-          const { width } = entry.contentRect;
-          forms.leftWidth = width + 'px';
-        }
-      );
-      useResizeObserver(
-        document.querySelector('#presetsRightRef') as HTMLElement,
-        (entries: any) => {
-          const entry = entries[0];
-          const { width } = entry.contentRect;
-          forms.rightWidth = width + 'px';
-        }
-      );
-
-      prepareStore.setClassGroupId(route.query.classGroupId as any);
-      if (!prepareStore.getInstrumentId) {
-        // 获取教材分类列表
-        checkInstrumentIds();
-      } else {
-        getInitInstrumentId();
-      }
-
-      await getCoursewareList();
-
-      if (props.addParam.isAdd) {
-        forms.addVisiable = true;
-      }
-    });
-
-    // 删除
-    const onRemove = async () => {
-      forms.messageLoading = true;
-      try {
-        await api_teacherChapterLessonCoursewareRemove({
-          id: forms.selectItem.id
-        });
-        message.success('删除成功');
-        getCoursewareList();
-        // getOpenCoursewareList();
-        eventGlobal.emit('openCoursewareChanged');
-        forms.preRemoveVisiable = false;
-      } catch {
-        //
-      }
-      setTimeout(() => {
-        forms.messageLoading = false;
-      }, 100);
-    };
-
-    // 添加课件
-    const onAddCourseware = async (item: any) => {
-      if (forms.messageLoading) return;
-      forms.messageLoading = true;
-      try {
-        await api_addByOpenCourseware({ id: item.id });
-        message.success('添加成功');
-        getCoursewareList();
-        // getOpenCoursewareList();
-        eventGlobal.emit('openCoursewareChanged');
-      } catch {
-        //
-      }
-      setTimeout(() => {
-        forms.messageLoading = false;
-      }, 100);
-    };
-
-    // 预览上课
-    const onPreviewAttend = (id: string) => {
-      // 判断是否在应用里面
-      if (window.matchMedia('(display-mode: standalone)').matches) {
-        state.application = window.matchMedia(
-          '(display-mode: standalone)'
-        ).matches;
-        forms.previewModal = true;
-        fscreen();
-        forms.previewParams = {
-          type: 'preview',
-          courseId: id,
-          instrumentId: prepareStore.getInstrumentId,
-          detailId: prepareStore.getSelectKey,
-          lessonCourseId: prepareStore.getBaseCourseware.id
-        };
-      } else {
-        const { href } = router.resolve({
-          path: '/attend-class',
-          query: {
-            type: 'preview',
-            courseId: id,
-            instrumentId: prepareStore.getInstrumentId,
-            detailId: prepareStore.getSelectKey,
-            lessonCourseId: prepareStore.getBaseCourseware.id
-          }
-        });
-        window.open(href, +new Date() + '');
-      }
-    };
-
-    const onStartClass = async (
-      item: any,
-      classGroupId: any,
-      instrumentId?: any
-    ) => {
-      if (classGroupId) {
-        // 开始上课
-        const res = await courseScheduleStart({
-          lessonCoursewareKnowledgeDetailId: prepareStore.selectKey,
-          classGroupId: classGroupId,
-          useChapterLessonCoursewareId: item.id
-          // instrumentId: prepareStore.getInstrumentId
-        });
-        if (window.matchMedia('(display-mode: standalone)').matches) {
-          state.application = window.matchMedia(
-            '(display-mode: standalone)'
-          ).matches;
-          forms.previewModal = true;
-          fscreen();
-          forms.previewParams = {
-            type: 'class',
-            classGroupId: classGroupId,
-            courseId: item.id,
-            instrumentId: instrumentId || route.query.instrumentId,
-            detailId: prepareStore.getSelectKey,
-            classId: res.data,
-            lessonCourseId: prepareStore.getBaseCourseware.id,
-            preStudentNum: forms.preStudentNum
-          };
-        } else {
-          const { href } = router.resolve({
-            path: '/attend-class',
-            query: {
-              type: 'class',
-              classGroupId: classGroupId,
-              courseId: item.id,
-              instrumentId: prepareStore.getInstrumentId,
-              detailId: prepareStore.getSelectKey,
-              classId: res.data,
-              lessonCourseId: prepareStore.getBaseCourseware.id,
-              preStudentNum: forms.preStudentNum
-            }
-          });
-          window.open(href, +new Date() + '');
-        }
-      } else {
-        forms.showAttendClass = true;
-        forms.attendClassType = 'change';
-        forms.attendClassItem = item;
-      }
-    };
-
-    const selectChildObj = (item: any, index: number) => {
-      const obj: any = {};
-      item?.forEach((child: any) => {
-        if (child.id === forms.wikiCategoryIdChild) {
-          obj.selected = true;
-          obj.name = child.name;
-        }
-      });
-      return obj;
-    };
-
-    const tabInstrumentValue = computed(() => {
-      let instrumentId: any = prepareStore.getInstrumentId
-        ? prepareStore.getInstrumentId
-        : '';
-      prepareStore.getInstrumentList.forEach((item: any) => {
-        if (Array.isArray(item.instruments)) {
-          item.instruments.forEach((child: any) => {
-            if (child.id === prepareStore.getInstrumentId) {
-              instrumentId = item.id + '';
-            }
-          });
-        }
-      });
-      return instrumentId;
-    });
-    return () => (
-      <div
-        class={[
-          styles.coursewarePresetsContainer,
-          forms.openTableShow && styles.rightLineShow
-        ]}>
-        <div
-          class={styles.presetsLeft}
-          id="presetsLeftRef"
-          style={{ width: `calc(${forms.leftWidth} - ${forms.rightWidth})` }}>
-          <NTabs
-            ref={subjectRef}
-            defaultValue=""
-            paneClass={styles.paneTitle}
-            justifyContent="start"
-            paneWrapperClass={styles.paneWrapperContainer}
-            value={tabInstrumentValue.value}
-            onUpdate:value={(val: any) => {
-              prepareStore.getInstrumentList.forEach((item: any) => {
-                if (item.id.toString() === val.toString()) {
-                  prepareStore.setInstrumentId(val);
-                  // 保存
-                  forms.instrumentId = val;
-                  forms.wikiCategoryIdChild = null;
-                }
-              });
-
-              if (!val) {
-                sessionStorage.setItem(
-                  'prepareLessonCourseWareSubjectIsNull',
-                  val ? 'false' : 'true'
-                );
-              }
-            }}
-            v-slots={{
-              suffix: () => (
-                <NButton
-                  class={styles.addBtn}
-                  type="primary"
-                  bordered={false}
-                  onClick={() => {
-                    eventGlobal.emit('teacher-slideshow', true);
-                    emit('change', {
-                      status: true,
-                      type: 'create'
-                    });
-                  }}>
-                  <NImage
-                    class={styles.addBtnIcon}
-                    previewDisabled
-                    src={add}></NImage>
-                  创建课件
-                </NButton>
-              )
-            }}>
-            {[
-              { name: '全部乐器', id: '' },
-              ...prepareStore.getFormatInstrumentList
-            ].map((item: any, index: number) => (
-              <NTabPane
-                name={`${item.id}`}
-                tab={item.name}
-                disabled={item.instruments?.length > 0}
-                displayDirective="if">
-                {{
-                  tab: () =>
-                    item.instruments?.length > 0 ? (
-                      <NPopselect
-                        options={item.instruments}
-                        trigger="hover"
-                        v-model:value={forms.wikiCategoryIdChild}
-                        onUpdate:value={(val: any) => {
-                          // onSearch();
-                          prepareStore.setInstrumentId(val);
-                          // 保存
-                          forms.instrumentId = val;
-
-                          if (!val) {
-                            sessionStorage.setItem(
-                              'prepareLessonCourseWareSubjectIsNull',
-                              val ? 'false' : 'true'
-                            );
-                          }
-                        }}
-                        key={item.id}
-                        class={styles.popSelect}>
-                        <span
-                          class={[
-                            styles.textBtn,
-                            selectChildObj(item.instruments, index).selected &&
-                              styles.textBtnActive
-                          ]}>
-                          {selectChildObj(item.instruments, index).name ||
-                            item.name}
-                          <i class={styles.iconArrow}></i>
-                        </span>
-                      </NPopselect>
-                    ) : (
-                      item.name
-                    )
-                }}
-              </NTabPane>
-            ))}
-          </NTabs>
-          <NSpin show={forms.loading}>
-            <NScrollbar class={styles.coursewarePresets}>
-              <div style={{ overflow: 'hidden' }}>
-                <div
-                  class={[
-                    styles.list,
-                    !forms.loading &&
-                      forms.tableList.length <= 0 &&
-                      styles.listEmpty
-                  ]}>
-                  {forms.tableList.map((item: any) => (
-                    <div class={[styles.itemWrap, styles.itemBlock, 'row-nav']}>
-                      <div class={styles.itemWrapBox}>
-                        <CoursewareType
-                          operate
-                          isEditName
-                          item={item}
-                          onClick={() => onPreviewAttend(item.id)}
-                          // onEditName={() => {
-                          //   forms.selectItem = item;
-                          //   forms.editTitle = item.name;
-                          //   forms.editTitleVisiable = true;
-                          // }}
-                          onEdit={() => {
-                            //
-                            eventGlobal.emit('teacher-slideshow', true);
-                            emit('change', {
-                              status: true,
-                              type: 'update',
-                              groupItem: { id: item.id }
-                            });
-                          }}
-                          onStartClass={() =>
-                            onStartClass(item, forms.classGroupId)
-                          }
-                          onDelete={() => {
-                            forms.selectItem = item;
-                            forms.preRemoveVisiable = true;
-                          }}
-                          // 布置作业
-                          onWork={() => {
-                            forms.workVisiable = true;
-                            forms.selectItem = item;
-                          }}
-                        />
-                      </div>
-                    </div>
-                  ))}
-                  {!forms.loading && forms.tableList.length <= 0 && (
-                    <TheEmpty
-                      class={styles.empty1}
-                      description="当前章节暂无课件,快点击右上角创建课件吧"
-                    />
-                  )}
-                </div>
-              </div>
-            </NScrollbar>
-          </NSpin>
-        </div>
-
-        <div class={styles.presetsRight} id="presetsRightRef">
-          <NTooltip showArrow={false} animated={false} duration={0} delay={0}>
-            {{
-              trigger: () => (
-                <div
-                  class={[
-                    styles.presetsArrar,
-                    !forms.openTableShow && styles.presetsArrarActive
-                  ]}
-                  onClick={() => (forms.openTableShow = !forms.openTableShow)}>
-                  <NIcon>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                      <path
-                        d="M16.62 2.99a1.25 1.25 0 0 0-1.77 0L6.54 11.3a.996.996 0 0 0 0 1.41l8.31 8.31c.49.49 1.28.49 1.77 0s.49-1.28 0-1.77L9.38 12l7.25-7.25c.48-.48.48-1.28-.01-1.76z"
-                        fill="currentColor"></path>
-                    </svg>
-                  </NIcon>
-                </div>
-              ),
-              default: () => <div>{forms.openTableShow ? '收起' : '展开'}</div>
-            }}
-          </NTooltip>
-
-          <Related
-            onMore={() => (forms.showRelatedClass = true)}
-            onAdd={(item: any) => {
-              onAddCourseware(item);
-            }}
-            onLook={(item: any) => {
-              onPreviewAttend(item.id);
-            }}
-          />
-        </div>
-        {/* )} */}
-
-        <NModal
-          v-model:show={forms.showRelatedClass}
-          preset="card"
-          showIcon={false}
-          class={['modalTitle background', styles.attendClassModal1]}
-          title={'相关课件'}
-          blockScroll={false}>
-          <RelatedClass
-            tableList={forms.tableList}
-            instrumentList={prepareStore.getInstrumentList}
-            instrumentId={prepareStore.getInstrumentId as any}
-            coursewareDetailKnowledgeId={prepareStore.getSelectKey}
-            onClose={() => (forms.showRelatedClass = false)}
-            onAdd={(item: any) => onAddCourseware(item)}
-            onClick={(item: any) => {
-              onPreviewAttend(item.id);
-              forms.showRelatedClass = false;
-            }}
-          />
-        </NModal>
-
-        {/* <NModal
-          v-model:show={forms.editTitleVisiable}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable1]}
-          title={'课件重命名'}>
-          <div class={styles.studentRemove}>
-            <NInput
-              placeholder="请输入课件名称"
-              v-model:value={forms.editTitle}
-              maxlength={15}
-              onKeyup={(e: any) => {
-                if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {
-                  e.stopPropagation();
-                }
-              }}
-            />
-
-            <NSpace class={styles.btnGroupModal} justify="center">
-              <NButton round onClick={() => (forms.editTitleVisiable = false)}>
-                取消
-              </NButton>
-              <NButton
-                round
-                type="primary"
-                onClick={onEditTitleSubmit}
-                loading={forms.editBtnLoading}>
-                确定
-              </NButton>
-            </NSpace>
-          </div>
-        </NModal> */}
-
-        <NModal
-          v-model:show={forms.preRemoveVisiable}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable1]}
-          title={'删除课件'}>
-          <TheMessageDialog
-            content={`<p style="text-align: left;">请确认是否删除【${forms.selectItem.name}】,删除后不可恢复</p>`}
-            cancelButtonText="取消"
-            confirmButtonText="确认"
-            loading={forms.messageLoading}
-            onClose={() => (forms.preRemoveVisiable = false)}
-            onConfirm={() => onRemove()}
-          />
-        </NModal>
-
-        <NModal
-          v-model:show={forms.addVisiable}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable1]}
-          title={'保存成功'}>
-          <TheMessageDialog
-            content={`<p style="text-align: left;">【${props.addParam.name}】暂未设置课件作业,是否现在去设置课件作业</p>`}
-            cancelButtonText="稍后设置"
-            confirmButtonText="立即设置"
-            // loading={forms.messageLoading}
-            onClose={() => (forms.addVisiable = false)}
-            onConfirm={() => {
-              forms.addVisiable = false;
-              forms.workVisiable = true;
-              forms.selectItem = {
-                id: props.addParam.id,
-                name: props.addParam.name
-              };
-            }}
-          />
-        </NModal>
-
-        {/* 应用内预览或上课 */}
-        <PreviewWindow
-          v-model:show={forms.previewModal}
-          type="attend"
-          params={forms.previewParams}
-        />
-
-        <NModal
-          v-model:show={forms.showAttendClass}
-          preset="card"
-          showIcon={false}
-          class={['modalTitle background', styles.attendClassModal]}
-          title={'选择班级'}
-          blockScroll={false}>
-          <AttendClass
-            onClose={() => (forms.showAttendClass = false)}
-            type={forms.attendClassType}
-            onPreview={(item: any) => {
-              if (window.matchMedia('(display-mode: standalone)').matches) {
-                state.application = window.matchMedia(
-                  '(display-mode: standalone)'
-                ).matches;
-                forms.previewModal = true;
-                forms.previewParams = {
-                  ...item
-                };
-              } else {
-                const { href } = router.resolve({
-                  path: '/attend-class',
-                  query: {
-                    ...item
-                  }
-                });
-                window.open(href, +new Date() + '');
-              }
-            }}
-            onConfirm={async (item: any) => {
-              onStartClass(
-                forms.attendClassItem,
-                item.classGroupId,
-                item.instrumentId
-              );
-            }}
-          />
-        </NModal>
-
-        <NModal
-          v-model:show={forms.workVisiable}
-          preset="card"
-          class={['modalTitle background', styles.workVisiable]}
-          title={
-            forms.selectItem.lessonPreTrainingId ? '编辑作业' : '创建作业'
-          }>
-          <div id="model-homework-height" class={styles.workContainer}>
-            <div class={styles.workTrain}>
-              <Train
-                cardType="prepare"
-                lessonPreTraining={{
-                  title: forms.selectItem.name + '-课后作业',
-                  chapterId: forms.selectItem.id, // 课件编号
-                  id: forms.selectItem.lessonPreTrainingId // 作业编号
-                }}
-                onChange={(val: any) => {
-                  forms.workVisiable = val.status;
-                  getCoursewareList();
-                }}
-              />
-            </div>
-            <div class={styles.resourceMain}>
-              <ResourceMain cardType="prepare" />
-            </div>
-          </div>
-        </NModal>
-      </div>
-    );
-  }
-});
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NTooltip,
+  NIcon,
+  NImage,
+  NModal,
+  NScrollbar,
+  NSpin,
+  NTabPane,
+  NTabs,
+  useMessage,
+  NPopselect
+} from 'naive-ui';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import add from '@/views/studentList/images/add.png';
+// import iconSlideRight from '../../../images/icon-slide-right.png';
+import CoursewareType from '../../../model/courseware-type';
+import TheEmpty from '/src/components/TheEmpty';
+import RelatedClass from '../../../model/related-class';
+import { state } from '/src/state';
+import { useResizeObserver } from '@vueuse/core';
+import AttendClass from '/src/views/prepare-lessons/model/attend-class';
+import {
+  api_addByOpenCourseware,
+  api_teacherChapterLessonCoursewareRemove,
+  teacherChapterLessonCoursewareList,
+  courseScheduleStart
+} from '../../../api';
+import { useRoute, useRouter } from 'vue-router';
+import TheMessageDialog from '/src/components/TheMessageDialog';
+import { eventGlobal, fscreen } from '/src/utils';
+import PreviewWindow from '/src/views/preview-window';
+import Related from './related';
+import Train from '../train';
+import ResourceMain from '../../resource-main';
+
+export default defineComponent({
+  name: 'courseware-presets',
+  props: {
+    addParam: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
+    const prepareStore = usePrepareStore();
+    const message = useMessage();
+    const route = useRoute();
+    const router = useRouter();
+    const localStorageSubjectId = localStorage.getItem(
+      'prepareLessonSubjectId'
+    );
+
+    const forms = reactive({
+      // 选取参数带的,后取缓存
+      leftWidth: '100%',
+      rightWidth: '0',
+      messageLoading: false,
+      instrumentId: route.query.instrumentId
+        ? Number(route.query.instrumentId)
+        : localStorageSubjectId
+        ? Number(localStorageSubjectId)
+        : '',
+      courseScheduleSubjectId: route.query.courseScheduleSubjectId,
+      classGroupId: route.query.classGroupId,
+      preStudentNum: route.query.preStudentNum,
+      bodyWidth: '100%',
+      loading: false,
+      openLoading: false,
+      showRelatedClass: false,
+      tableList: [] as any,
+      openTableShow: true, // 是否显示
+      openTableList: [] as any,
+      selectItem: {} as any,
+      editTitleVisiable: false,
+      editTitle: null,
+      editBtnLoading: false,
+      preRemoveVisiable: false,
+      addVisiable: false, // 是否有添加的课件
+      carouselIndex: 0,
+      showAttendClass: false,
+      attendClassType: 'change', //
+      attendClassItem: {} as any,
+      previewModal: false,
+      previewParams: {
+        type: '',
+        courseId: '',
+        instrumentId: '',
+        detailId: ''
+      } as any,
+      workVisiable: false,
+      wikiCategoryIdChild: null
+    });
+
+    const getCoursewareList = async () => {
+      forms.loading = true;
+      try {
+        // 判断是否有选择对应的课件 或声部
+        if (!prepareStore.getSelectKey) return (forms.loading = false);
+
+        const { data } = await teacherChapterLessonCoursewareList({
+          instrumentId: prepareStore.getInstrumentId,
+          coursewareDetailKnowledgeId: prepareStore.getSelectKey
+        });
+        if (!Array.isArray(data)) {
+          return;
+        }
+        const tempList: any = [];
+        data.forEach((item: any) => {
+          const firstItem: any =
+            item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];
+          tempList.push({
+            id: item.id,
+            lessonPreTrainingId: item.lessonPreTrainingId,
+            openFlag: item.openFlag,
+            openFlagEnable: item.openFlagEnable,
+            subjectNames: item.subjectNames,
+            fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
+            name: item.name,
+            coverImg: firstItem?.bizInfo.coverImg,
+            type: firstItem?.bizInfo.type,
+            isNotWork: item.lessonPreTrainingNum <= 0 ? true : false // 是否布置作业
+          });
+        });
+        forms.tableList = tempList;
+      } catch {
+        //
+      }
+      forms.loading = false;
+    };
+
+    // 监听选择的key 左侧选择了其它的课
+    watch(
+      () => [prepareStore.getSelectKey, prepareStore.getInstrumentId],
+      async () => {
+        eventGlobal.emit('openCoursewareChanged');
+        await getCoursewareList();
+        // await getOpenCoursewareList();
+
+        subjectRef.value?.syncBarPosition();
+      }
+    );
+
+    watch(
+      () => prepareStore.getInstrumentList,
+      () => {
+        checkInstrumentIds();
+      }
+    );
+
+    const checkInstrumentIds = () => {
+      const instrumentsList = prepareStore.getSingleInstrumentList;
+
+      // 并且没有声部时才会更新
+      if (instrumentsList.length > 0) {
+        const prepareLessonCourseWareSubjectIsNull = sessionStorage.getItem(
+          'prepareLessonCourseWareSubjectIsNull'
+        );
+        if (prepareLessonCourseWareSubjectIsNull === 'true') {
+          prepareStore.setInstrumentId('');
+          return;
+        }
+
+        // 并且声部在列表中
+        const localStorageSubjectId = localStorage.getItem(
+          'prepareLessonSubjectId'
+        );
+        // // 先取 上次上课声部,在取班级声部 最后取缓存
+        let instrumentId = null;
+        let index = -1;
+        if (forms.courseScheduleSubjectId) {
+          // 判断浏览器上面是否有
+          index = instrumentsList.findIndex(
+            (subject: any) => subject.id == forms.courseScheduleSubjectId
+          );
+          if (index >= 0) {
+            instrumentId = Number(forms.courseScheduleSubjectId);
+          }
+        }
+        // 判断班级上面声部 & 还没有声部
+        if (forms.instrumentId && !instrumentId) {
+          // 判断浏览器上面是否有
+          index = instrumentsList.findIndex(
+            (subject: any) => subject.id == forms.instrumentId
+          );
+          if (index >= 0) {
+            instrumentId = Number(forms.instrumentId);
+          }
+        }
+        // 缓存声部 & 还没有声部
+        if (localStorageSubjectId && !instrumentId) {
+          // 判断浏览器上面是否有
+          index = instrumentsList.findIndex(
+            (subject: any) => subject.id == localStorageSubjectId
+          );
+          if (index >= 0) {
+            instrumentId = Number(localStorageSubjectId);
+          }
+        }
+        // 判断是否选择为空
+        if (instrumentId && index >= 0) {
+          prepareStore.setSubjectId(instrumentId);
+          // forms.instrumentId = instrumentId;
+        } else {
+          // 判断是否有缓存
+          // prepareStore.setSubjectId(instrumentsList[0].id);
+          // forms.instrumentId = instrumentsList[0].id;
+        }
+
+        // 保存
+        localStorage.setItem(
+          'prepareLessonSubjectId',
+          prepareStore.getInstrumentId as any
+        );
+
+        subjectRef.value?.syncBarPosition();
+      }
+    };
+
+    const getInitInstrumentId = () => {
+      let instrumentId: any = '';
+      prepareStore.getInstrumentList.forEach((item: any) => {
+        if (Array.isArray(item.instruments)) {
+          item.instruments.forEach((child: any) => {
+            if (child.id === prepareStore.getInstrumentId) {
+              instrumentId = child.id;
+            }
+          });
+        }
+      });
+      if (instrumentId) {
+        forms.wikiCategoryIdChild = instrumentId;
+      }
+    };
+    const subjectRef = ref();
+    onMounted(async () => {
+      useResizeObserver(
+        document.querySelector('#presetsLeftRef') as HTMLElement,
+        (entries: any) => {
+          const entry = entries[0];
+          const { width } = entry.contentRect;
+          forms.leftWidth = width + 'px';
+        }
+      );
+      useResizeObserver(
+        document.querySelector('#presetsRightRef') as HTMLElement,
+        (entries: any) => {
+          const entry = entries[0];
+          const { width } = entry.contentRect;
+          forms.rightWidth = width + 'px';
+        }
+      );
+
+      prepareStore.setClassGroupId(route.query.classGroupId as any);
+      if (!prepareStore.getInstrumentId) {
+        // 获取教材分类列表
+        checkInstrumentIds();
+      } else {
+        getInitInstrumentId();
+      }
+
+      await getCoursewareList();
+
+      if (props.addParam.isAdd) {
+        forms.addVisiable = true;
+      }
+    });
+
+    // 删除
+    const onRemove = async () => {
+      forms.messageLoading = true;
+      try {
+        await api_teacherChapterLessonCoursewareRemove({
+          id: forms.selectItem.id
+        });
+        message.success('删除成功');
+        getCoursewareList();
+        // getOpenCoursewareList();
+        eventGlobal.emit('openCoursewareChanged');
+        forms.preRemoveVisiable = false;
+      } catch {
+        //
+      }
+      setTimeout(() => {
+        forms.messageLoading = false;
+      }, 100);
+    };
+
+    // 添加课件
+    const onAddCourseware = async (item: any) => {
+      if (forms.messageLoading) return;
+      forms.messageLoading = true;
+      try {
+        await api_addByOpenCourseware({ id: item.id });
+        message.success('添加成功');
+        getCoursewareList();
+        // getOpenCoursewareList();
+        eventGlobal.emit('openCoursewareChanged');
+      } catch {
+        //
+      }
+      setTimeout(() => {
+        forms.messageLoading = false;
+      }, 100);
+    };
+
+    // 预览上课
+    const onPreviewAttend = (id: string) => {
+      // 判断是否在应用里面
+      if (window.matchMedia('(display-mode: standalone)').matches) {
+        state.application = window.matchMedia(
+          '(display-mode: standalone)'
+        ).matches;
+        forms.previewModal = true;
+        fscreen();
+        forms.previewParams = {
+          type: 'preview',
+          courseId: id,
+          instrumentId: prepareStore.getInstrumentId,
+          detailId: prepareStore.getSelectKey,
+          lessonCourseId: prepareStore.getBaseCourseware.id
+        };
+      } else {
+        const { href } = router.resolve({
+          path: '/attend-class',
+          query: {
+            type: 'preview',
+            courseId: id,
+            instrumentId: prepareStore.getInstrumentId,
+            detailId: prepareStore.getSelectKey,
+            lessonCourseId: prepareStore.getBaseCourseware.id
+          }
+        });
+        window.open(href, +new Date() + '');
+      }
+    };
+
+    const onStartClass = async (
+      item: any,
+      classGroupId: any,
+      instrumentId?: any
+    ) => {
+      if (classGroupId) {
+        // 开始上课
+        const res = await courseScheduleStart({
+          lessonCoursewareKnowledgeDetailId: prepareStore.selectKey,
+          classGroupId: classGroupId,
+          useChapterLessonCoursewareId: item.id
+          // instrumentId: prepareStore.getInstrumentId
+        });
+        if (window.matchMedia('(display-mode: standalone)').matches) {
+          state.application = window.matchMedia(
+            '(display-mode: standalone)'
+          ).matches;
+          forms.previewModal = true;
+          fscreen();
+          forms.previewParams = {
+            type: 'class',
+            classGroupId: classGroupId,
+            courseId: item.id,
+            instrumentId: instrumentId || route.query.instrumentId,
+            detailId: prepareStore.getSelectKey,
+            classId: res.data,
+            lessonCourseId: prepareStore.getBaseCourseware.id,
+            preStudentNum: forms.preStudentNum
+          };
+        } else {
+          const { href } = router.resolve({
+            path: '/attend-class',
+            query: {
+              type: 'class',
+              classGroupId: classGroupId,
+              courseId: item.id,
+              instrumentId: prepareStore.getInstrumentId,
+              detailId: prepareStore.getSelectKey,
+              classId: res.data,
+              lessonCourseId: prepareStore.getBaseCourseware.id,
+              preStudentNum: forms.preStudentNum
+            }
+          });
+          window.open(href, +new Date() + '');
+        }
+      } else {
+        forms.showAttendClass = true;
+        forms.attendClassType = 'change';
+        forms.attendClassItem = item;
+      }
+    };
+
+    const selectChildObj = (item: any, index: number) => {
+      const obj: any = {};
+      item?.forEach((child: any) => {
+        if (child.id === forms.wikiCategoryIdChild) {
+          obj.selected = true;
+          obj.name = child.name;
+        }
+      });
+      return obj;
+    };
+
+    const tabInstrumentValue = computed(() => {
+      let instrumentId: any = prepareStore.getInstrumentId
+        ? prepareStore.getInstrumentId
+        : '';
+      prepareStore.getInstrumentList.forEach((item: any) => {
+        if (Array.isArray(item.instruments)) {
+          item.instruments.forEach((child: any) => {
+            if (child.id === prepareStore.getInstrumentId) {
+              instrumentId = item.id + '';
+            }
+          });
+        }
+      });
+      return instrumentId;
+    });
+    return () => (
+      <div
+        class={[
+          styles.coursewarePresetsContainer,
+          forms.openTableShow && styles.rightLineShow
+        ]}>
+        <div
+          class={styles.presetsLeft}
+          id="presetsLeftRef"
+          style={{ width: `calc(${forms.leftWidth} - ${forms.rightWidth})` }}>
+          <NTabs
+            ref={subjectRef}
+            defaultValue=""
+            paneClass={styles.paneTitle}
+            justifyContent="start"
+            paneWrapperClass={styles.paneWrapperContainer}
+            value={tabInstrumentValue.value}
+            onUpdate:value={(val: any) => {
+              prepareStore.getInstrumentList.forEach((item: any) => {
+                if (item.id.toString() === val.toString()) {
+                  prepareStore.setInstrumentId(val);
+                  // 保存
+                  forms.instrumentId = val;
+                  forms.wikiCategoryIdChild = null;
+                }
+              });
+
+              if (!val) {
+                prepareStore.setInstrumentId(val);
+                // 保存
+                forms.instrumentId = val;
+                forms.wikiCategoryIdChild = null;
+                sessionStorage.setItem(
+                  'prepareLessonCourseWareSubjectIsNull',
+                  val ? 'false' : 'true'
+                );
+              }
+            }}
+            v-slots={{
+              suffix: () => (
+                <NButton
+                  class={styles.addBtn}
+                  type="primary"
+                  bordered={false}
+                  onClick={() => {
+                    eventGlobal.emit('teacher-slideshow', true);
+                    emit('change', {
+                      status: true,
+                      type: 'create'
+                    });
+                  }}>
+                  <NImage
+                    class={styles.addBtnIcon}
+                    previewDisabled
+                    src={add}></NImage>
+                  创建课件
+                </NButton>
+              )
+            }}>
+            {[
+              { name: '全部乐器', id: '' },
+              ...prepareStore.getFormatInstrumentList
+            ].map((item: any, index: number) => (
+              <NTabPane
+                name={`${item.id}`}
+                tab={item.name}
+                disabled={item.instruments?.length > 0}
+                displayDirective="if">
+                {{
+                  tab: () =>
+                    item.instruments?.length > 0 ? (
+                      <NPopselect
+                        options={item.instruments}
+                        trigger="hover"
+                        v-model:value={forms.wikiCategoryIdChild}
+                        onUpdate:value={(val: any) => {
+                          // onSearch();
+                          prepareStore.setInstrumentId(val);
+                          // 保存
+                          forms.instrumentId = val;
+
+                          if (!val) {
+                            sessionStorage.setItem(
+                              'prepareLessonCourseWareSubjectIsNull',
+                              val ? 'false' : 'true'
+                            );
+                          }
+                        }}
+                        key={item.id}
+                        class={styles.popSelect}>
+                        <span
+                          class={[
+                            styles.textBtn,
+                            selectChildObj(item.instruments, index).selected &&
+                              styles.textBtnActive
+                          ]}>
+                          {selectChildObj(item.instruments, index).name ||
+                            item.name}
+                          <i class={styles.iconArrow}></i>
+                        </span>
+                      </NPopselect>
+                    ) : (
+                      item.name
+                    )
+                }}
+              </NTabPane>
+            ))}
+          </NTabs>
+          <NSpin show={forms.loading}>
+            <NScrollbar class={styles.coursewarePresets}>
+              <div style={{ overflow: 'hidden' }}>
+                <div
+                  class={[
+                    styles.list,
+                    !forms.loading &&
+                      forms.tableList.length <= 0 &&
+                      styles.listEmpty
+                  ]}>
+                  {forms.tableList.map((item: any) => (
+                    <div class={[styles.itemWrap, styles.itemBlock, 'row-nav']}>
+                      <div class={styles.itemWrapBox}>
+                        <CoursewareType
+                          operate
+                          isEditName
+                          item={item}
+                          onClick={() => onPreviewAttend(item.id)}
+                          // onEditName={() => {
+                          //   forms.selectItem = item;
+                          //   forms.editTitle = item.name;
+                          //   forms.editTitleVisiable = true;
+                          // }}
+                          onEdit={() => {
+                            //
+                            eventGlobal.emit('teacher-slideshow', true);
+                            emit('change', {
+                              status: true,
+                              type: 'update',
+                              groupItem: { id: item.id }
+                            });
+                          }}
+                          onStartClass={() =>
+                            onStartClass(item, forms.classGroupId)
+                          }
+                          onDelete={() => {
+                            forms.selectItem = item;
+                            forms.preRemoveVisiable = true;
+                          }}
+                          // 布置作业
+                          onWork={() => {
+                            forms.workVisiable = true;
+                            forms.selectItem = item;
+                          }}
+                        />
+                      </div>
+                    </div>
+                  ))}
+                  {!forms.loading && forms.tableList.length <= 0 && (
+                    <TheEmpty
+                      class={styles.empty1}
+                      description="当前章节暂无课件,快点击右上角创建课件吧"
+                    />
+                  )}
+                </div>
+              </div>
+            </NScrollbar>
+          </NSpin>
+        </div>
+
+        <div class={styles.presetsRight} id="presetsRightRef">
+          <NTooltip showArrow={false} animated={false} duration={0} delay={0}>
+            {{
+              trigger: () => (
+                <div
+                  class={[
+                    styles.presetsArrar,
+                    !forms.openTableShow && styles.presetsArrarActive
+                  ]}
+                  onClick={() => (forms.openTableShow = !forms.openTableShow)}>
+                  <NIcon>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                      <path
+                        d="M16.62 2.99a1.25 1.25 0 0 0-1.77 0L6.54 11.3a.996.996 0 0 0 0 1.41l8.31 8.31c.49.49 1.28.49 1.77 0s.49-1.28 0-1.77L9.38 12l7.25-7.25c.48-.48.48-1.28-.01-1.76z"
+                        fill="currentColor"></path>
+                    </svg>
+                  </NIcon>
+                </div>
+              ),
+              default: () => <div>{forms.openTableShow ? '收起' : '展开'}</div>
+            }}
+          </NTooltip>
+
+          <Related
+            onMore={() => (forms.showRelatedClass = true)}
+            onAdd={(item: any) => {
+              onAddCourseware(item);
+            }}
+            onLook={(item: any) => {
+              onPreviewAttend(item.id);
+            }}
+          />
+        </div>
+        {/* )} */}
+
+        <NModal
+          v-model:show={forms.showRelatedClass}
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background', styles.attendClassModal1]}
+          title={'相关课件'}
+          blockScroll={false}>
+          <RelatedClass
+            tableList={forms.tableList}
+            instrumentList={prepareStore.getInstrumentList}
+            instrumentId={prepareStore.getInstrumentId as any}
+            coursewareDetailKnowledgeId={prepareStore.getSelectKey}
+            onClose={() => (forms.showRelatedClass = false)}
+            onAdd={(item: any) => onAddCourseware(item)}
+            onClick={(item: any) => {
+              onPreviewAttend(item.id);
+              forms.showRelatedClass = false;
+            }}
+          />
+        </NModal>
+
+        {/* <NModal
+          v-model:show={forms.editTitleVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable1]}
+          title={'课件重命名'}>
+          <div class={styles.studentRemove}>
+            <NInput
+              placeholder="请输入课件名称"
+              v-model:value={forms.editTitle}
+              maxlength={15}
+              onKeyup={(e: any) => {
+                if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {
+                  e.stopPropagation();
+                }
+              }}
+            />
+
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton round onClick={() => (forms.editTitleVisiable = false)}>
+                取消
+              </NButton>
+              <NButton
+                round
+                type="primary"
+                onClick={onEditTitleSubmit}
+                loading={forms.editBtnLoading}>
+                确定
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal> */}
+
+        <NModal
+          v-model:show={forms.preRemoveVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable1]}
+          title={'删除课件'}>
+          <TheMessageDialog
+            content={`<p style="text-align: left;">请确认是否删除【${forms.selectItem.name}】,删除后不可恢复</p>`}
+            cancelButtonText="取消"
+            confirmButtonText="确认"
+            loading={forms.messageLoading}
+            onClose={() => (forms.preRemoveVisiable = false)}
+            onConfirm={() => onRemove()}
+          />
+        </NModal>
+
+        <NModal
+          v-model:show={forms.addVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable1]}
+          title={'保存成功'}>
+          <TheMessageDialog
+            content={`<p style="text-align: left;">【${props.addParam.name}】暂未设置课件作业,是否现在去设置课件作业</p>`}
+            cancelButtonText="稍后设置"
+            confirmButtonText="立即设置"
+            // loading={forms.messageLoading}
+            onClose={() => (forms.addVisiable = false)}
+            onConfirm={() => {
+              forms.addVisiable = false;
+              forms.workVisiable = true;
+              forms.selectItem = {
+                id: props.addParam.id,
+                name: props.addParam.name
+              };
+            }}
+          />
+        </NModal>
+
+        {/* 应用内预览或上课 */}
+        <PreviewWindow
+          v-model:show={forms.previewModal}
+          type="attend"
+          params={forms.previewParams}
+        />
+
+        <NModal
+          v-model:show={forms.showAttendClass}
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background', styles.attendClassModal]}
+          title={'选择班级'}
+          blockScroll={false}>
+          <AttendClass
+            onClose={() => (forms.showAttendClass = false)}
+            type={forms.attendClassType}
+            onPreview={(item: any) => {
+              if (window.matchMedia('(display-mode: standalone)').matches) {
+                state.application = window.matchMedia(
+                  '(display-mode: standalone)'
+                ).matches;
+                forms.previewModal = true;
+                forms.previewParams = {
+                  ...item
+                };
+              } else {
+                const { href } = router.resolve({
+                  path: '/attend-class',
+                  query: {
+                    ...item
+                  }
+                });
+                window.open(href, +new Date() + '');
+              }
+            }}
+            onConfirm={async (item: any) => {
+              onStartClass(
+                forms.attendClassItem,
+                item.classGroupId,
+                item.instrumentId
+              );
+            }}
+          />
+        </NModal>
+
+        <NModal
+          v-model:show={forms.workVisiable}
+          preset="card"
+          class={['modalTitle background', styles.workVisiable]}
+          title={
+            forms.selectItem.lessonPreTrainingId ? '编辑作业' : '创建作业'
+          }>
+          <div id="model-homework-height" class={styles.workContainer}>
+            <div class={styles.workTrain}>
+              <Train
+                cardType="prepare"
+                lessonPreTraining={{
+                  title: forms.selectItem.name + '-课后作业',
+                  chapterId: forms.selectItem.id, // 课件编号
+                  id: forms.selectItem.lessonPreTrainingId // 作业编号
+                }}
+                onChange={(val: any) => {
+                  forms.workVisiable = val.status;
+                  getCoursewareList();
+                }}
+              />
+            </div>
+            <div class={styles.resourceMain}>
+              <ResourceMain cardType="prepare" />
+            </div>
+          </div>
+        </NModal>
+      </div>
+    );
+  }
+});

+ 46 - 6
src/views/prepare-lessons/components/lesson-main/courseware/addCourseware.tsx

@@ -33,7 +33,8 @@ import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import {
   api_teacherChapterLessonCoursewareAdd,
   api_teacherChapterLessonCoursewareUpdate,
-  api_teacherChapterLessonCoursewareDetail
+  api_teacherChapterLessonCoursewareDetail,
+  api_materialDetail
   // courseScheduleStart,
   // queryCourseware,
   // saveCourseware
@@ -145,9 +146,9 @@ export default defineComponent({
         );
         const tempRows = data.chapterKnowledgeList || [];
         forms.name = data.name;
-        forms.subjects = data.subjectIds
-          ? data.subjectIds.split(',').map((s: any) => {
-              return Number(s);
+        forms.subjects = data.instrumentIds
+          ? data.instrumentIds.split(',').map((s: any) => {
+              return s;
             })
           : [];
         forms.openFlag = data.openFlag;
@@ -323,7 +324,31 @@ export default defineComponent({
       forms.messageOperation.visiable = false;
     };
 
-    const addCoursewareItem = (item: any, point?: any) => {
+    const addCoursewareItem = async (item: any, point?: any) => {
+      const materialList: any[] = [];
+      try {
+        const { data } = await api_materialDetail(item.materialId);
+        if (Array.isArray(data.materialRefs)) {
+          data.materialRefs.forEach((item: any) => {
+            if (item.refType === 'STRONG') {
+              const relateMaterialInfo = item.relateMaterialInfo || {};
+              materialList.push({
+                content: relateMaterialInfo.content,
+                coverImg: relateMaterialInfo.coverImg,
+                // isCollect: relateMaterialInfo.,
+                isSelected:
+                  relateMaterialInfo.sourceFrom === 'PLATFORM' ? true : false,
+                materialId: relateMaterialInfo.id,
+                // removeFlag: relateMaterialInfo.,
+                title: relateMaterialInfo.name,
+                type: relateMaterialInfo.type
+              });
+            }
+          });
+        }
+      } catch {
+        //
+      }
       nextTick(() => {
         if (point) {
           const rowGroupDom = document.querySelectorAll('.row-group');
@@ -339,7 +364,13 @@ export default defineComponent({
               const left = isPointOnLeft(child, point.x);
               if (!left) {
                 array.splice(index + 1, 0, item);
+                materialList.forEach((m: any) => {
+                  array.splice(index + 1, 0, m);
+                });
               } else {
+                materialList.forEach((m: any) => {
+                  array.splice(index, 0, m);
+                });
                 array.splice(index, 0, item);
               }
               isAdd = true;
@@ -348,9 +379,15 @@ export default defineComponent({
           });
           if (!isAdd) {
             forms.coursewareList[item.index || 0].list.push(item);
+            materialList.forEach((m: any) => {
+              forms.coursewareList[item.index || 0].list.push(m);
+            });
           }
         } else {
           forms.coursewareList[item.index || 0].list.push(item);
+          materialList.forEach((m: any) => {
+            forms.coursewareList[item.index || 0].list.push(m);
+          });
           message.success('添加成功');
         }
       });
@@ -612,7 +649,9 @@ export default defineComponent({
     watch(
       () => forms.coursewareList,
       () => {
-        prepareStore.setCoursewareList = forms.coursewareList;
+        prepareStore.setCoursewareList(forms.coursewareList);
+        // 内容有更新 - 相关资源会刷新
+        eventGlobal.emit('onCoursewareUpdate');
       },
       {
         deep: true
@@ -654,6 +693,7 @@ export default defineComponent({
                           coverImg: dropItem.coverImg,
                           type: dropItem.type,
                           title: dropItem.title,
+                          refFlag: dropItem.refFlag,
                           isCollect: dropItem.isCollect,
                           isSelected: dropItem.isSelected,
                           content: dropItem.content,

+ 55 - 13
src/views/prepare-lessons/components/resource-main/components/resource-item/index.tsx

@@ -1,4 +1,11 @@
-import { PropType, defineComponent, onMounted, reactive, watch } from 'vue';
+import {
+  PropType,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  reactive,
+  watch
+} from 'vue';
 import ResourceSearchGroup from './resource-search-group';
 import { NScrollbar, NSpin, useDialog, useMessage } from 'naive-ui';
 import styles from './index.module.less';
@@ -56,7 +63,7 @@ export default defineComponent({
       show: false,
       item: {} as any
     });
-    const getList = async () => {
+    const getList = async (repeatIds?: string) => {
       try {
         // if (!prepareStore.getSubjectId) return;
         if (state.pagination.page === 1) {
@@ -68,7 +75,8 @@ export default defineComponent({
           lessonCoursewareKnowledgeId:
             props.type === 'relateResources' || props.type === 'shareResources'
               ? prepareStore.getSelectKey
-              : null
+              : null,
+          relateLessonCoursewareKnowledgeMaterialIds: repeatIds
           // subjectId: prepareStore.getSubjectId
         });
         state.loading = false;
@@ -84,6 +92,7 @@ export default defineComponent({
             type: row.type,
             title: row.name,
             isCollect: !!row.favoriteFlag,
+            refFlag: row.refFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
             content: row.content
             // exist: index !== -1 ? true : false // 是否存在
@@ -118,20 +127,28 @@ export default defineComponent({
 
     // 声部变化时
     watch(
-      () => prepareStore.getSubjectId,
+      () => prepareStore.getInstrumentId,
       () => {
         onSearch(state.searchGroup);
       }
     );
     // watch(
-    //   () => prepareStore.coursewareList,
-    //   () => {
-    //     state.tableList.forEach((item: any) => {
-    //       const index = prepareStore.getCoursewareList.findIndex(
-    //         (course: any) => course.materialId === item.id
-    //       );
-    //       item.exist = index !== -1 ? true : false; // 是否存在
-    //     });
+    //   () => prepareStore.getCoursewareList,
+    //   (val, oldVal) => {
+    //     console.log(val, oldVal, 'courseware');
+    //     if (props.type === 'relateResources') {
+    //       console.log('1111');
+    //       const materialIds: any = [];
+    //       prepareStore.getCoursewareList.forEach((course: any) => {
+    //         course.list?.forEach((item: any) => {
+    //           materialIds.push(item.materialId);
+    //         });
+    //       });
+    //       const noRepeatIds = Array(...new Set(materialIds));
+    //       state.pagination.page = 1;
+    //       state.tableList = [];
+    //       getList(noRepeatIds.join(','));
+    //     }
     //   },
     //   {
     //     deep: true,
@@ -147,9 +164,11 @@ export default defineComponent({
     // 添加资源
     const onAdd = async (item: any) => {
       try {
+        console.log(item, '11');
         eventGlobal.emit('onPrepareAddItem', {
           materialId: item.id,
           coverImg: item.coverImg,
+          refFlag: item.refFlag,
           type: item.type,
           title: item.title,
           isCollect: item.isCollect,
@@ -175,9 +194,32 @@ export default defineComponent({
         //
       }
     };
+    const getIds = () => {
+      let noRepeatIds: any = [];
+      if (props.type === 'relateResources') {
+        const materialIds: any = [];
+        prepareStore.getCoursewareList.forEach((course: any) => {
+          course.list?.forEach((item: any) => {
+            materialIds.push(item.materialId);
+          });
+        });
+        noRepeatIds = Array(...new Set(materialIds));
+      }
+      return noRepeatIds.join(',');
+    };
+
+    const onUpdate = () => {
+      getList(getIds());
+    };
 
     onMounted(() => {
-      getList();
+      // 加载的时候判断是否有资源数据
+      onUpdate();
+
+      eventGlobal.on('onCoursewareUpdate', onUpdate);
+    });
+    onUnmounted(() => {
+      eventGlobal.off('onCoursewareUpdate', onUpdate);
     });
     return () => (
       <div>

+ 1 - 0
src/views/prepare-lessons/components/resource-main/components/select-music/index.tsx

@@ -133,6 +133,7 @@ export default defineComponent({
             type: 'MUSIC',
             title: row.name,
             isCollect: !!row.favoriteFlag,
+            refFlag: row.refFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
             content: row.id,
             xmlFileUrl: row.xmlFileUrl

+ 1 - 0
src/views/prepare-lessons/model/select-music/select-item/index.tsx

@@ -89,6 +89,7 @@ export default defineComponent({
             title: row.name,
             isCollect: !!row.favoriteFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            refFlag: row.refFlag,
             content: row.id,
             xmlFileUrl: row.xmlFileUrl,
             exist: index !== -1 ? true : false // 是否存在

+ 66 - 5
src/views/prepare-lessons/model/select-resources/select-item/index.tsx

@@ -1,4 +1,12 @@
-import { PropType, defineComponent, onMounted, reactive, toRefs } from 'vue';
+import {
+  PropType,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  reactive,
+  toRefs,
+  watch
+} from 'vue';
 import ResourceSearchGroup from './resource-search-group';
 import { NScrollbar, NSpin, useMessage } from 'naive-ui';
 import styles from './index.module.less';
@@ -68,7 +76,7 @@ export default defineComponent({
     });
 
     // 查询列表
-    const getList = async () => {
+    const getList = async (repeatIds?: string) => {
       try {
         if (state.pagination.page === 1) {
           state.loading = true;
@@ -79,7 +87,8 @@ export default defineComponent({
           lessonCoursewareKnowledgeId:
             props.type === 'relateResources' || props.type === 'shareResources'
               ? prepareStore.getSelectKey
-              : null
+              : null,
+          relateLessonCoursewareKnowledgeMaterialIds: repeatIds
         });
         state.loading = false;
         const tempRows = data.rows || [];
@@ -92,6 +101,7 @@ export default defineComponent({
             title: row.name,
             isCollect: !!row.favoriteFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            refFlag: row.refFlag,
             content: row.content
           });
         });
@@ -130,6 +140,7 @@ export default defineComponent({
           coverImg: item.coverImg,
           type: item.type,
           title: item.title,
+          refFlag: item.refFlag,
           isCollect: item.isCollect,
           isSelected: item.isSelected,
           content: item.content,
@@ -154,12 +165,29 @@ export default defineComponent({
       }
     };
 
+    const getIds = () => {
+      let noRepeatIds: any = [];
+      if (props.type === 'relateResources') {
+        const materialIds: any = [];
+        prepareStore.getCoursewareList.forEach((course: any) => {
+          course.list?.forEach((item: any) => {
+            materialIds.push(item.materialId);
+          });
+        });
+        noRepeatIds = Array(...new Set(materialIds));
+      }
+      return noRepeatIds.join(',');
+    };
+
+    const onUpdate = () => {
+      getList(getIds());
+    };
+
     onMounted(async () => {
+      // 加载的时候判断是否有资源数据
       // 获取声部
       await catchStore.getSubjects();
 
-      getList();
-
       useResizeObserver(
         document.querySelector('.' + className) as HTMLElement,
         (entries: any) => {
@@ -168,7 +196,40 @@ export default defineComponent({
           state.searchHeight = height + 'px';
         }
       );
+      onUpdate();
+
+      eventGlobal.on('onCoursewareUpdate', onUpdate);
+    });
+    onUnmounted(() => {
+      eventGlobal.off('onCoursewareUpdate', onUpdate);
     });
+
+    // onMounted(async () => {
+    //   // 获取声部
+    //   await catchStore.getSubjects();
+
+    //   // 加载的时候判断是否有资源数据
+    //   let noRepeatIds: any = [];
+    //   if (props.type === 'relateResources') {
+    //     const materialIds: any = [];
+    //     prepareStore.getCoursewareList.forEach((course: any) => {
+    //       course.list?.forEach((item: any) => {
+    //         materialIds.push(item.materialId);
+    //       });
+    //     });
+    //     noRepeatIds = Array(...new Set(materialIds));
+    //   }
+    //   getList(noRepeatIds.join(','));
+
+    //   useResizeObserver(
+    //     document.querySelector('.' + className) as HTMLElement,
+    //     (entries: any) => {
+    //       const entry = entries[0];
+    //       const { height } = entry.contentRect;
+    //       state.searchHeight = height + 'px';
+    //     }
+    //   );
+    // });
     return () => (
       <div>
         <div class={className}>

+ 9 - 10
src/views/xiaoku-ai/index.tsx

@@ -238,7 +238,7 @@ export default defineComponent({
               <NSpace size={[20, 12]}>
                 <span class={styles.firstButton}>乐器</span>
 
-                {catchStore.getSubjectAllList.map((item: any) =>
+                {catchStore.getSubjectInstruments.map((item: any) =>
                   item.instruments && item.instruments.length > 1 ? (
                     <NPopselect
                       options={item.instruments}
@@ -288,23 +288,22 @@ export default defineComponent({
                   ) : (
                     <NButton
                       round
-                      textColor={data.tagIndex === item.value ? '#fff' : '#000'}
+                      textColor={
+                        data.tagIndex === (item.value || 0) ? '#fff' : '#000'
+                      }
                       color={
-                        data.tagIndex === item.value
+                        data.tagIndex === (item.value || 0)
                           ? '#198CFE'
                           : 'rgba(46, 51, 56, .05)'
                       }
                       type={
-                        data.tagIndex === item.value ? 'primary' : 'default'
+                        data.tagIndex === (item.value || 0)
+                          ? 'primary'
+                          : 'default'
                       }
                       onClick={() => {
                         data.tagIndex = item.value || 0;
-                        // data.reshing = true;
-                        // document
-                        //   .querySelector('.musicList-container')
-                        //   .scroll(0, 0);
-                        // handleGetList();
-                        forms.instrumentId = item.id;
+                        forms.instrumentId = item.value;
                         localStorage.setItem(
                           'xiaoku-ai-search',
                           JSON.stringify({