Explorar el Código

Merge branch 'temp-register' into online

mo hace 1 año
padre
commit
e6171a68ca
Se han modificado 56 ficheros con 4736 adiciones y 1093 borrados
  1. 2 15
      dev-dist/sw.js
  2. 3394 0
      dev-dist/workbox-5357ef54.js
  3. 37 3
      src/components/card-type/index.module.less
  4. 16 2
      src/components/card-type/index.tsx
  5. 3 1
      src/components/layout/index.module.less
  6. 36 7
      src/components/layout/index.tsx
  7. 20 8
      src/components/layout/layoutTop.tsx
  8. 90 74
      src/components/timerMeter/components/positive.tsx
  9. 2 2
      src/custom-plugins/guide-page/teacher-guide.tsx
  10. 10 1
      src/store/modules/prepareLessons.ts
  11. 18 15
      src/views/attend-class/component/audio-pay.tsx
  12. 19 19
      src/views/attend-class/component/audio.module.less
  13. 2 2
      src/views/attend-class/component/musicScore.module.less
  14. 38 10
      src/views/attend-class/component/musicScore.tsx
  15. 74 34
      src/views/attend-class/component/tools/pen.module.less
  16. 80 7
      src/views/attend-class/component/tools/pen.tsx
  17. 19 4
      src/views/attend-class/component/video-play.tsx
  18. 18 18
      src/views/attend-class/component/video.module.less
  19. 47 38
      src/views/attend-class/index.module.less
  20. 249 578
      src/views/attend-class/index.tsx
  21. BIN
      src/views/attend-class/new-image/icon-beatIcon.png
  22. BIN
      src/views/attend-class/new-image/icon-change.png
  23. BIN
      src/views/attend-class/new-image/icon-down.png
  24. BIN
      src/views/attend-class/new-image/icon-menu.png
  25. BIN
      src/views/attend-class/new-image/icon-note.png
  26. BIN
      src/views/attend-class/new-image/icon-overclass.png
  27. BIN
      src/views/attend-class/new-image/icon-setTime.png
  28. BIN
      src/views/attend-class/new-image/icon-toneIcon.png
  29. BIN
      src/views/attend-class/new-image/icon-up.png
  30. BIN
      src/views/attend-class/new-image/icon-white.png
  31. BIN
      src/views/attend-class/new-image/icon-work.png
  32. 6 0
      src/views/home/index.module.less
  33. 4 4
      src/views/login/components/pwdLogin.tsx
  34. 25 1
      src/views/natural-resources/components/my-collect/index.module.less
  35. 16 12
      src/views/natural-resources/components/my-collect/index.tsx
  36. 28 4
      src/views/natural-resources/components/my-resources/index.module.less
  37. 47 45
      src/views/natural-resources/components/my-resources/index.tsx
  38. 10 0
      src/views/natural-resources/components/my-resources/search-group-resources.tsx
  39. 1 1
      src/views/natural-resources/components/my-resources/upload-modal/index.tsx
  40. 25 3
      src/views/natural-resources/components/share-resources/index.module.less
  41. 30 28
      src/views/natural-resources/components/share-resources/index.tsx
  42. 33 6
      src/views/prepare-lessons/components/lesson-main/courseware/index.module.less
  43. 103 50
      src/views/prepare-lessons/components/lesson-main/courseware/index.tsx
  44. 4 0
      src/views/prepare-lessons/components/lesson-main/index.tsx
  45. 16 2
      src/views/prepare-lessons/components/lesson-main/train/assign-homework.tsx
  46. 13 3
      src/views/prepare-lessons/components/lesson-main/train/index.module.less
  47. 1 1
      src/views/prepare-lessons/components/lesson-main/train/index.tsx
  48. 2 1
      src/views/prepare-lessons/components/resource-main/components/resource-item/index.tsx
  49. 26 1
      src/views/prepare-lessons/model/select-resources/select-item/index.module.less
  50. 18 14
      src/views/prepare-lessons/model/select-resources/select-item/index.tsx
  51. 7 6
      src/views/prepare-lessons/model/subject-sync/index.module.less
  52. 8 2
      src/views/setting/index.tsx
  53. 29 1
      src/views/xiaoku-ai/index.module.less
  54. 37 37
      src/views/xiaoku-ai/index.tsx
  55. 56 28
      src/views/xiaoku-music/index.module.less
  56. 17 5
      src/views/xiaoku-music/index.tsx

+ 2 - 15
dev-dist/sw.js

@@ -67,7 +67,7 @@ if (!self.define) {
     });
   };
 }
-define(['./workbox-d49dec61'], (function (workbox) { 'use strict';
+define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
 
   self.skipWaiting();
   workbox.clientsClaim();
@@ -82,24 +82,11 @@ define(['./workbox-d49dec61'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.g1op20r37qo"
+    "revision": "0.hrh4hj1mvdo"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
     allowlist: [/^\/$/]
   }));
-  workbox.registerRoute(/(.*?)\.(js|css|ts|tsx|html)/, new workbox.NetworkOnly({
-    "cacheName": "js-css-cache",
-    plugins: []
-  }), 'GET');
-  workbox.registerRoute(/.*\.html.*/, new workbox.NetworkOnly({
-    "cacheName": "wisbayar-html",
-    plugins: [new workbox.ExpirationPlugin({
-      maxEntries: 20,
-      maxAgeSeconds: 2592000
-    }), new workbox.CacheableResponsePlugin({
-      statuses: [200]
-    })]
-  }), 'GET');
 
 }));

+ 3394 - 0
dev-dist/workbox-5357ef54.js

@@ -0,0 +1,3394 @@
+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;
+
+}));

+ 37 - 3
src/components/card-type/index.module.less

@@ -8,6 +8,28 @@
   }
 }
 
+.card-section-content {
+  border-radius: 14px;
+  background: linear-gradient(270deg, #DBF1FF 0%, #E7F9FF 100%) !important;
+
+  // 图片禁止拖动
+  img {
+    -moz-user-select: none;
+    /* 火狐浏览器 */
+    -webkit-user-drag: none;
+    /* 谷歌、Safari和Opera浏览器 */
+    -webkit-user-select: none;
+    /* 谷歌、Safari和Opera浏览器 */
+    -ms-user-select: none;
+    /* IE10+浏览器 */
+    user-select: none;
+    /* 通用 */
+    -webkit-touch-callout: none;
+    /* iOS Safari */
+  }
+
+}
+
 .card-section {
   position: relative;
   box-sizing: border-box;
@@ -18,6 +40,16 @@
   display: inline-flex;
   transition: all .3s ease-in-out;
 
+  &.cardDrag {
+    cursor: move;
+
+    :global {
+      .n-image:not(.n-image--preview-disabled) {
+        cursor: move !important;
+      }
+    }
+  }
+
   &.course {
     cursor: pointer;
   }
@@ -45,7 +77,7 @@
   // 封面样式
   .cover {
     width: 100%;
-    height: 170px;
+    height: 100%;
     background-color: #fff;
     border-radius: 14px 14px 0 0;
     overflow: hidden;
@@ -63,7 +95,8 @@
     }
 
     .n-card-cover {
-      height: 170px;
+      // height: 170px;
+      flex: 1 auto;
     }
   }
 
@@ -156,6 +189,7 @@
       --n-border-pressed: 1px solid #fff !important;
       --n-border-focus: 1px solid #fff !important;
       --n-border-disabled: 1px solid #fff !important;
+      --n-opacity-disabled: 1 !important;
     }
   }
 
@@ -188,4 +222,4 @@
       min-width: 124px;
     }
   }
-}
+}

+ 16 - 2
src/components/card-type/index.tsx

@@ -30,6 +30,11 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    /** 是否可以拖拽 */
+    draggable: {
+      type: Boolean,
+      default: false
+    },
     // 是否可以收藏
     isCollect: {
       type: Boolean,
@@ -101,12 +106,21 @@ export default defineComponent({
     return () => (
       <div
         onClick={() => emit('click', props.item)}
-        class={[styles['card-section']]}
+        draggable={!props.draggable ? false : props.item.exist ? false : true}
+        class={[
+          styles['card-section'],
+          'card-section-container',
+          !props.draggable ? '' : props.item.exist ? '' : styles.cardDrag
+        ]}
         onMouseenter={() => {
           isAnimation.value = true;
         }}
         onMouseleave={() => {
           isAnimation.value = false;
+        }}
+        onDragstart={(e: any) => {
+          console.log(e, 'dragstart');
+          e.dataTransfer.setData('text', JSON.stringify(props.item));
         }}>
         {/* 判断是否下架 */}
         {props.offShelf && (
@@ -125,7 +139,7 @@ export default defineComponent({
         )}
         <NCard
           class={[
-            styles['card-section'],
+            styles['card-section-content'],
             props.isShowAdd ? '' : styles.course,
             props.isActive ? styles.isActive : '',
             props.item.exist ? styles.showAddBtn : '' // 是否已添加

+ 3 - 1
src/components/layout/index.module.less

@@ -225,6 +225,8 @@
       }
 
       .optons {
+        margin-top: 18px;
+        margin-bottom: 14px;
         width: 32px;
         height: 32px;
         margin-right: 24px;
@@ -501,4 +503,4 @@
     }
   }
 
-}
+}

+ 36 - 7
src/components/layout/index.tsx

@@ -5,7 +5,8 @@ import {
   ref,
   reactive,
   onUnmounted,
-  watch
+  watch,
+  computed
 } from 'vue';
 import LayoutSilder from './layoutSilder';
 import LayoutTop from './layoutTop';
@@ -347,6 +348,27 @@ export default defineComponent({
         }
       }
     );
+
+    // 帮助指引状态
+    const helpNoteList = reactive({
+      baseListTab: ''
+    });
+    const helpNoteStatus = computed(() => {
+      const routePath = route.path;
+      const hidePath = [
+        '/classDetail',
+        '/classStudentDetail',
+        '/notation',
+        '/xiaoku-ai'
+      ];
+      // 单独判断个人信息页面[学校设置]有引导
+      if (route.path === '/setting') {
+        return helpNoteList.baseListTab === 'school' ? true : false;
+      } else {
+        return hidePath.includes(routePath) ? false : true;
+      }
+    });
+
     onMounted(() => {
       initMoveable();
       // // initMoveableClass();
@@ -360,6 +382,10 @@ export default defineComponent({
       initBoxRectInfo(subdEl, boxBoundaryInfo);
       // // initBoundaryWrap(classEl, classBoundaryInfo);
       window.addEventListener('resize', resetSize);
+
+      eventGlobal.on('base-setting-emit', (val: string) => {
+        helpNoteList.baseListTab = val;
+      });
     });
 
     const resetSize = () => {
@@ -674,12 +700,15 @@ export default defineComponent({
               </div>
             </div>
             <div>
-              <div
-                class={styles.booxToolItem}
-                onClick={() => startShowModal('iconNote')}>
-                <img src={iconNote} alt="" />
-                帮助指引
-              </div>
+              {helpNoteStatus.value && (
+                <div
+                  class={styles.booxToolItem}
+                  onClick={() => startShowModal('iconNote')}>
+                  <img src={iconNote} alt="" />
+                  帮助指引
+                </div>
+              )}
+
               <div
                 class={styles.booxToolItem}
                 onClick={() => startShowModal('iconPen')}>

+ 20 - 8
src/components/layout/layoutTop.tsx

@@ -11,11 +11,11 @@ import personIcon from './images/personIcon.png';
 import { useUserStore } from '@/store/modules/users';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import opinionIcon from './images/opinionIcon.png'
+import opinionIcon from './images/opinionIcon.png';
 import 'animate.css';
 import ForgotPassword from '/src/views/setting/modal/forgotPassword';
 import ImGroup from './imGroup';
-import SuggestionOption from './modals/suggestion-option'
+import SuggestionOption from './modals/suggestion-option';
 export default defineComponent({
   name: 'layoutTop',
   setup() {
@@ -24,7 +24,7 @@ export default defineComponent({
     const showHeadFlag = ref(false);
     const showImGroup = ref(false);
     const showImGroupLoading = ref(true);
-    const showSuggestionViseble = ref(false)
+    const showSuggestionViseble = ref(false);
     const users = useUserStore();
     const showWord = ref(false);
     const { info } = storeToRefs(users);
@@ -86,9 +86,19 @@ export default defineComponent({
             </p>
           </div>
           <div class={styles.layoutRight}>
-            <div class={styles.optons} onClick={()=>showSuggestionViseble.value = true}>
-                <NImage src={opinionIcon} previewDisabled></NImage>
-            </div>
+            <NTooltip>
+              {{
+                trigger: () => (
+                  <div
+                    class={styles.optons}
+                    onClick={() => (showSuggestionViseble.value = true)}>
+                    <img src={opinionIcon}></img>
+                  </div>
+                ),
+                default: '意见反馈'
+              }}
+            </NTooltip>
+
             <div onClick={() => (showImGroup.value = true)}>
               <NBadge
                 value={noReadCount.value}
@@ -234,7 +244,6 @@ export default defineComponent({
             <ImGroup />
           </NModal>
 
-
           <NModal
             class={['modalTitle', 'background']}
             style={{ width: '910px' }}
@@ -242,7 +251,10 @@ export default defineComponent({
             preset="card"
             showIcon={false}
             title="意见反馈">
-              <SuggestionOption onClose={()=>showSuggestionViseble.value = false}></SuggestionOption>
+            <SuggestionOption
+              onClose={() =>
+                (showSuggestionViseble.value = false)
+              }></SuggestionOption>
           </NModal>
         </div>
       </>

+ 90 - 74
src/components/timerMeter/components/positive.tsx

@@ -2,41 +2,46 @@ import { defineComponent, ref, watch, nextTick, onMounted } from 'vue';
 import styles from '../index.module.less';
 import { NTabs, NTabPane, NSpace, NButton, NImage } from 'naive-ui';
 import { useRoute } from 'vue-router';
-import Flipper from '../modals/flipper.vue'
+import Flipper from '../modals/flipper.vue';
 import { stringify } from 'crypto-js/enc-utf8';
 import dayjs from 'dayjs';
-import playIcon from '../images/playing.png'
-import suspend from '../images/suspend.png'
-import { getSecond } from '@/utils/index'
+import playIcon from '../images/playing.png';
+import suspend from '../images/suspend.png';
+import { getSecond } from '@/utils/index';
 export default defineComponent({
   name: 'timer-positive',
   setup() {
-    const activeTab = ref('positive');  //countdown
+    const activeTab = ref('positive'); //countdown
     const route = useRoute();
     // const flipperHour1 = ref()
     // const flipperHour2 = ref()
-    const flipperMinute1 = ref()
-    const flipperMinute2 = ref()
-    const flipperSecond1 = ref()
-    const flipperSecond2 = ref()
-    const timer = ref(null as any)
-    const nowTimer = ref(null) as any
-    const nowDate = ref(new Date) as any
+    const flipperMinute1 = ref();
+    const flipperMinute2 = ref();
+    const flipperSecond1 = ref();
+    const flipperSecond2 = ref();
+    const timer = ref(null as any);
+    const nowTimer = ref(null) as any;
+    const nowDate = ref(new Date()) as any;
     nowTimer.value = setInterval(() => {
-      nowDate.value = new Date()
-    }, 1000)
-    const count = ref(0)
-    const isPlaying = ref(false)
+      nowDate.value = new Date();
+    }, 1000);
+    const count = ref(0);
+    const isPlaying = ref(false);
     // flipperHour1, flipperHour2,
-    const flipObjs = ref([flipperMinute1, flipperMinute2, flipperSecond1, flipperSecond2]) as any
+    const flipObjs = ref([
+      flipperMinute1,
+      flipperMinute2,
+      flipperSecond1,
+      flipperSecond2
+    ]) as any;
     const init = () => {
-      const now = new Date()
-      const nowTimeStr = '0000'
+      const now = new Date();
+      const nowTimeStr = '0000';
 
       for (let i = 0; i < flipObjs.value.length; i++) {
-        flipObjs.value[i].value.setFront(nowTimeStr[i])
+        flipObjs.value[i].value.setFront(nowTimeStr[i]);
       }
-    }
+    };
 
     const formatDate = (date: Date, dateFormat: string) => {
       /* 单独格式化年份,根据y的字符数量输出年份
@@ -48,7 +53,7 @@ export default defineComponent({
         dateFormat = dateFormat.replace(
           RegExp.$1,
           (date.getFullYear() + '').substr(4 - RegExp.$1.length)
-        )
+        );
       }
       // 格式化月、日、时、分、秒
       const o = {
@@ -57,11 +62,11 @@ export default defineComponent({
         'h+': date.getHours(),
         'i+': date.getMinutes(),
         's+': date.getSeconds()
-      } as any
+      } as any;
       for (const k in o) {
         if (new RegExp(`(${k})`).test(dateFormat)) {
           // 取出对应的值
-          const str = o[k] + ''
+          const str = o[k] + '';
           /* 根据设置的格式,输出对应的字符
            * 例如: 早上8时,hh => 08,h => 8
            * 但是,当数字>=10时,无论格式为一位还是多位,不做截取,这是与年份格式化不一致的地方
@@ -70,75 +75,68 @@ export default defineComponent({
           dateFormat = dateFormat.replace(
             RegExp.$1,
             RegExp.$1.length === 1 ? str : padLeftZero(str)
-          )
+          );
         }
       }
-      return dateFormat
-    }
+      return dateFormat;
+    };
     const padLeftZero = (str: string) => {
-      return ('00' + str).substr(str.length)
-    }
+      return ('00' + str).substr(str.length);
+    };
 
     const run = () => {
       timer.value = setInterval(() => {
         // 获取当前时间
-        const now = new Date()
-        const nowTimeStr = formatDate(new Date(now.getTime() - 1000), 'iiss')
-        const nextTimeStr = formatDate(now, 'iiss')
-        console.log(nowTimeStr, nextTimeStr)
+        const now = new Date();
+        const nowTimeStr = formatDate(new Date(now.getTime() - 1000), 'iiss');
+        const nextTimeStr = formatDate(now, 'iiss');
+        console.log(nowTimeStr, nextTimeStr);
         for (let i = 0; i < flipObjs.value.length; i++) {
           if (nowTimeStr[i] === nextTimeStr[i]) {
-            continue
+            continue;
           }
-          flipObjs.value[i].value.flipDown(
-            nowTimeStr[i],
-            nextTimeStr[i]
-          )
+          flipObjs.value[i].value.flipDown(nowTimeStr[i], nextTimeStr[i]);
         }
-      }, 1000)
-
-    }
+      }, 1000);
+    };
     const startTimer = () => {
       isPlaying.value = true;
       timer.value = setInterval(() => {
         // 获取当前时间
-        const lastStr = getSecond(count.value)
-        count.value++
+        const lastStr = getSecond(count.value);
+        count.value++;
 
-        const str = getSecond(count.value)
+        const str = getSecond(count.value);
         for (let i = 0; i < flipObjs.value.length; i++) {
           if (lastStr[i] === str[i]) {
-            continue
+            continue;
           }
-          flipObjs.value[i].value.flipDown(lastStr[i], str[i])
+          flipObjs.value[i].value.flipDown(lastStr[i], str[i]);
         }
-      }, 1000)
-    }
+      }, 1000);
+    };
 
     const suspendNum = () => {
       isPlaying.value = false;
       if (timer.value) {
-        clearInterval(timer.value)
-        timer.value = null
+        clearInterval(timer.value);
+        timer.value = null;
       }
-    }
+    };
     const onReset = () => {
-
-      suspendNum()
+      suspendNum();
       count.value = 0;
       setTimeout(() => {
         //   console.log('初始化')
-        init()
-      }, 600)
-
-    }
+        init();
+      }, 600);
+    };
     onMounted(() => {
       nextTick(() => {
-        init()
+        init();
         // run()
-      })
-
-    })
+      });
+    });
 
     return () => (
       <div class={styles.timerItemWrap}>
@@ -159,7 +157,6 @@ export default defineComponent({
                 <h4 class={styles.dotTop}></h4>
                 <div class={styles.dot}></div>
                 <div class={styles.dot}></div>
-
               </div>
               <div class={styles.timerItemTopCore}>
                 <h4> 秒</h4>
@@ -176,24 +173,43 @@ export default defineComponent({
               {dayjs(nowDate.value).format('YYYY年MM月DD日 HH:mm:ss')}
             </div>
           </div>
-
         </div>
 
         <NSpace class={styles.btnGroupModal} justify="center">
           <NButton round onClick={() => onReset()}>
             重置
           </NButton>
-          {isPlaying.value ? <NButton round type="primary" icon-placement="right" onClick={() => suspendNum()} v-slots={{
-            default: () => <p class={styles.playText}>暂停</p>,
-            icon: () => <NImage previewDisabled class={styles.palyIcon} src={suspend}></NImage>
-          }}>
-
-          </NButton> : <NButton round type="primary" icon-placement="right" onClick={() => startTimer()} v-slots={{
-            default: () => <p class={styles.playText}>开始</p>,
-            icon: () => <NImage previewDisabled class={styles.palyIcon} src={playIcon}></NImage>
-          }}>
-          </NButton>}
-
+          {isPlaying.value ? (
+            <NButton
+              round
+              type="primary"
+              icon-placement="right"
+              onClick={() => suspendNum()}
+              v-slots={{
+                default: () => <p class={styles.playText}>暂停</p>,
+                icon: () => (
+                  <NImage
+                    previewDisabled
+                    class={styles.palyIcon}
+                    src={suspend}></NImage>
+                )
+              }}></NButton>
+          ) : (
+            <NButton
+              round
+              type="primary"
+              icon-placement="right"
+              onClick={() => startTimer()}
+              v-slots={{
+                default: () => <p class={styles.playText}>开始</p>,
+                icon: () => (
+                  <NImage
+                    previewDisabled
+                    class={styles.palyIcon}
+                    src={playIcon}></NImage>
+                )
+              }}></NButton>
+          )}
         </NSpace>
       </div>
     );

+ 2 - 2
src/custom-plugins/guide-page/teacher-guide.tsx

@@ -133,9 +133,9 @@ export default defineComponent({
       try {
         if (name !== 'base-setting') return;
         if (!guideInfo.value) {
-          guideInfo.value = { classGuide: false };
+          guideInfo.value = { teacherGuide: false };
         } else {
-          guideInfo.value.classGuide = false;
+          guideInfo.value.teacherGuide = false;
         }
         try {
           await setGuidance({

+ 10 - 1
src/store/modules/prepareLessons.ts

@@ -18,7 +18,8 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     isAddResource: false, // 是否添加资源
     isEditResource: false, // 是否编辑资源
     iseditTrain: false, // 是否编辑训练,
-    isAddTrain: false // 是否添加训练,
+    isAddTrain: false, // 是否添加训练,
+    classGroupId: null as any // 班级编号
   }),
   getters: {
     /** 获取资源状态 */
@@ -84,6 +85,10 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     /** 获取声部列表 */
     getSubjectList(): any {
       return this.subjectList;
+    },
+    /** 获取班级编号 */
+    getClassGroupId(): string | number {
+      return this.classGroupId;
     }
   },
   actions: {
@@ -150,6 +155,10 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     /** 设置声部列表 */
     setSubjectList(subjects: any): any {
       this.subjectList = subjects;
+    },
+    /** 设置班级编号 */
+    setClassGroupId(id: string | number): any {
+      this.classGroupId = id;
     }
   }
 });

+ 18 - 15
src/views/attend-class/component/audio-pay.tsx

@@ -37,7 +37,8 @@ export default defineComponent({
     let vudio: any = null;
 
     // 切换音频播放
-    const onToggleAudio = (e?: MouseEvent) => {
+    const onToggleAudio = (e?: any) => {
+      console.log(e, 'e', e);
       e?.stopPropagation();
       if (audio.value.paused) {
         onInit(audio.value, canvas.value);
@@ -47,7 +48,7 @@ export default defineComponent({
         audio.value?.pause();
       }
       audioForms.paused = audio.value?.paused;
-
+      e.target?.focus();
       emit('togglePlay', audioForms.paused);
     };
 
@@ -146,17 +147,19 @@ export default defineComponent({
               if (props.item.autoPlay && audio.value) {
                 audio.value.play();
               }
-              audio.value.stop = () => {
-                audio.value?.pause();
-                audioForms.paused = true;
-                emit('togglePlay', audioForms.paused);
-              };
-              audio.value.onPlay = () => {
-                audio.value?.play();
-                audioForms.paused = false;
-                onInit(audio.value, canvas.value);
-                emit('togglePlay', audioForms.paused);
-              };
+              if (audio.value) {
+                audio.value.stop = () => {
+                  audio.value?.pause();
+                  audioForms.paused = true;
+                  emit('togglePlay', audioForms.paused);
+                };
+                audio.value.onPlay = () => {
+                  audio.value?.play();
+                  audioForms.paused = false;
+                  onInit(audio.value, canvas.value);
+                  emit('togglePlay', audioForms.paused);
+                };
+              }
 
               emit('loadedmetadata', audio.value);
             }}></audio>
@@ -182,13 +185,13 @@ export default defineComponent({
           }}>
           <div class={styles.actions}>
             <div class={styles.actionWrap}>
-              <button class={styles.actionBtn} onClick={onToggleAudio}>
+              <div class={styles.actionBtn} onClick={onToggleAudio}>
                 {audioForms.paused ? (
                   <img class={styles.playIcon} src={iconplay} />
                 ) : (
                   <img class={styles.playIcon} src={iconpause} />
                 )}
-              </button>
+              </div>
             </div>
             <div class={styles.time}>
               <div

+ 19 - 19
src/views/attend-class/component/audio.module.less

@@ -37,20 +37,26 @@
   }
 }
 
+.sectionAnimate {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(126px);
+  transition: all .2s;
+}
+
 .controls {
   position: absolute;
-  bottom: 0;
+  bottom: 126px;
   left: 0;
   right: 0;
   width: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(26px);
-  height: 150px;
-  padding: 0 250px 0 40px !important;
-  transition: all 0.5s;
+  background-color: rgba(0, 0, 0, 0.7);
+  // backdrop-filter: blur(26px);
+  height: 86px;
+  padding: 10px 40px 0 !important;
+  transition: all 0.301s;
   display: flex;
   align-items: center;
-  transition: all .5s;
 
   .time {
     display: flex;
@@ -94,10 +100,11 @@
 
   .actionBtn {
     display: flex;
-    width: 82px;
-    height: 82px;
+    width: 60px;
+    height: 60px;
     padding: 4px 0;
     background: transparent;
+    cursor: pointer;
 
     &>img {
       width: 100%;
@@ -107,8 +114,8 @@
 
 
   .iconReplay {
-    width: 43px;
-    height: 42px;
+    width: 40px;
+    height: 39px;
     background-color: transparent;
 
     &>img {
@@ -129,11 +136,4 @@
       transition: all .2s;
     }
   }
-}
-
-.sectionAnimate {
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(100%);
-  transition: all .5s;
-}
+}

+ 2 - 2
src/views/attend-class/component/musicScore.module.less

@@ -3,7 +3,7 @@
   width: 100%;
   height: 100%;
   -webkit-overflow-scrolling: touch;
-  overflow: scroll;
+  // overflow: scroll;
   // padding-top: 30px;
 
 
@@ -93,4 +93,4 @@
       }
     }
   }
-}
+}

+ 38 - 10
src/views/attend-class/component/musicScore.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch } from 'vue';
+import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
 import { NSkeleton } from 'naive-ui';
 import styles from './musicScore.module.less';
 import { usePageVisibility } from '@vant/use';
@@ -13,6 +13,10 @@ export default defineComponent({
     },
     activeModel: {
       type: Boolean
+    },
+    /** 当前是否为选中状态 */
+    activeStatus: {
+      type: Boolean
     }
   },
   emits: ['setIframe'],
@@ -32,9 +36,10 @@ export default defineComponent({
     const renderError = ref(false);
     const renderSuccess = ref(false);
     const origin = /(localhost|192)/.test(location.host)
-      ? 'https://test.lexiaoya.cn'
-      : location.origin;
-    const src = `${origin}/instrument?showGuide=true&platform=pc&zoom=1.2&modelType=practise&id=${props.music.content}&Authorization=${userStore.getToken}`;
+      ? 'https://test.lexiaoya.cn/instrument'
+      : // 'http://localhost:3000/instrument.html'
+        location.origin + '/instrument';
+    const src = `${origin}?showGuide=true&platform=pc&zoom=1.2&modelType=practise&id=${props.music.content}&Authorization=${userStore.getToken}`;
     const checkView = () => {
       fetch(src)
         .then(() => {
@@ -45,13 +50,16 @@ export default defineComponent({
           renderError.value = true;
         });
     };
-    watch(props.music, () => {
-      if (renderSuccess.value) return;
-      renderError.value = false;
-      if (props.music.display) {
-        checkView();
+    watch(
+      () => props.music,
+      () => {
+        if (renderSuccess.value) return;
+        renderError.value = false;
+        if (props.music.display) {
+          checkView();
+        }
       }
-    });
+    );
 
     // 去云教练完整版
     // const gotoAccomany = () => {
@@ -83,6 +91,26 @@ export default defineComponent({
     //   );
     // };
 
+    watch(
+      () => props.activeModel,
+      () => {
+        if (iframeRef.value.contentWindow && props.activeStatus) {
+          // console.log(
+          //   iframeRef.value.contentWindow,
+          //   props.activeModel,
+          //   'iframeRef'
+          // );
+          iframeRef.value.contentWindow.postMessage(
+            {
+              api: 'attendClassBarStatus',
+              hideMenu: !props.activeModel
+            },
+            '*'
+          );
+        }
+      }
+    );
+
     return () => (
       <div class={styles.musicScore}>
         <iframe

+ 74 - 34
src/views/attend-class/component/tools/pen.module.less

@@ -31,42 +31,45 @@
 }
 
 .rightItem {
+  position: absolute;
+  right: 30px;
+  bottom: 0;
+  bottom: constant(safe-area-inset-bottom);
+  bottom: env(safe-area-inset-bottom);
+  height: 78Px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    width: 28Px;
+    height: 28Px;
+  }
 
   // position: absolute;
-  // right: 15px;
-  // bottom: 0;
-  // bottom: constant(safe-area-inset-bottom);
-  // bottom: env(safe-area-inset-bottom);
-  // width: 50px;
-  // height: 54px;
-  // display: flex;
-  // justify-content: center;
-  // align-items: center;
+  // top: 40px;
+  // left: 40px;
+  // width: 187px;
+  // height: 65px;
+  // cursor: pointer;
+  // transition: all 0.5s;
 
-  position: absolute;
-  top: 40px;
-  left: 40px;
-  width: 187px;
-  height: 65px;
-  cursor: pointer;
-  transition: all 0.5s;
-
-  img {
-    width: 100%;
-    height: 100%;
-    -moz-user-select: none;
-    /* 火狐浏览器 */
-    -webkit-user-drag: none;
-    /* 谷歌、Safari和Opera浏览器 */
-    -webkit-user-select: none;
-    /* 谷歌、Safari和Opera浏览器 */
-    -ms-user-select: none;
-    /* IE10+浏览器 */
-    user-select: none;
-    /* 通用 */
-    -webkit-touch-callout: none;
-    /* iOS Safari */
-  }
+  // img {
+  //   width: 100%;
+  //   height: 100%;
+  //   -moz-user-select: none;
+  //   /* 火狐浏览器 */
+  //   -webkit-user-drag: none;
+  //   /* 谷歌、Safari和Opera浏览器 */
+  //   -webkit-user-select: none;
+  //   /* 谷歌、Safari和Opera浏览器 */
+  //   -ms-user-select: none;
+  //   /* IE10+浏览器 */
+  //   user-select: none;
+  //   /* 通用 */
+  //   -webkit-touch-callout: none;
+  //   /* iOS Safari */
+  // }
 
 }
 
@@ -77,4 +80,41 @@
   width: 100%;
   height: 100%;
   display: block;
-}
+}
+
+
+.removeVisiable {
+  width: 432px;
+
+  :global {
+    .n-card-header {
+      font-size: max(22px, 16Px);
+    }
+  }
+
+  .studentRemove {
+    padding: 20px 40px 0;
+
+    p {
+      font-size: max(18px, 14Px);
+      color: #777777;
+      line-height: 30px;
+      text-align: center;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .btnGroupModal {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
+}

+ 80 - 7
src/views/attend-class/component/tools/pen.tsx

@@ -1,8 +1,7 @@
-import { defineComponent, toRefs, ref, PropType } from 'vue';
+import { defineComponent, toRefs, ref, PropType, reactive } from 'vue';
 import styles from './pen.module.less';
 import { ToolType } from '../../index';
-import exit1 from '../../image/exit1.png';
-import exit2 from '../../image/exit2.png';
+import { NButton, NModal, NSpace } from 'naive-ui';
 
 export default defineComponent({
   name: 'pen-page',
@@ -22,11 +21,19 @@ export default defineComponent({
   },
   setup(props) {
     const { show, type } = toRefs(props);
+    // const modelAttendStatus = ref(false);
+    const modal = reactive({
+      status: false,
+      title: type.value === 'pen' ? '退出批注' : '退出白板',
+      content:
+        type.value === 'pen' ? '确认是否退出批注?' : '确认是否退出白板?'
+    });
     const firstRender = ref(true);
     const origin = /(localhost|192)/.test(location.host)
       ? 'https://test.lexiaoya.cn/'
-      : location.origin;
-    const src = `${origin}/classroom-whiteboard?type=${props.type}`;
+      : // 'http://localhost:3000/'
+        location.origin;
+    const src = `${origin}/classroom-whiteboard?t=${+new Date()}`;
 
     return () => (
       <div
@@ -45,9 +52,75 @@ export default defineComponent({
           onLoad={() => {
             firstRender.value = false;
           }}></iframe>
-        <div class={styles.rightItem} onClick={() => props.close()}>
-          <img src={props.type === 'pen' ? exit2 : exit1} />
+        <div class={styles.rightItem} onClick={() => (modal.status = true)}>
+          <svg
+            width="28px"
+            height="28px"
+            viewBox="0 0 34 34"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg">
+            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+              <g
+                transform="translate(-1842.000000, -1016.000000)"
+                stroke="#FFFFFF">
+                <g transform="translate(980.000000, 1006.000000)">
+                  <g transform="translate(862.000000, 10.000000)">
+                    <g transform="translate(4.000000, 5.000000)">
+                      <g
+                        transform="translate(8.058241, 5.009812)"
+                        fill="#FFFFFF"
+                        fill-rule="nonzero"
+                        stroke-width="0.3">
+                        <path d="M11.6084252,-0.15 C11.9880433,-0.15 12.3676614,-0.00518057514 12.6573002,0.284458275 L12.6573002,0.284458275 L18.3141545,5.94131252 C18.6037933,6.23095137 18.7486128,6.61056948 18.7486128,6.99018758 C18.7486128,7.36980569 18.6037933,7.74942379 18.3141545,8.03906264 L18.3141545,8.03906264 L12.6573002,13.6959169 C12.3676614,13.9855557 11.9880433,14.1303752 11.6084252,14.1303752 C11.2288071,14.1303752 10.849189,13.9855557 10.5595501,13.6959169 C10.2699113,13.406278 10.1250918,13.0266599 10.1250918,12.6470418 C10.1250918,12.2674237 10.2699113,11.8878056 10.5595368,11.5981801 L10.5595368,11.5981801 L13.6839174,8.47301484 L1.33333333,8.47352092 C0.923722144,8.47352092 0.552888811,8.30749318 0.284458275,8.03906264 C0.0160277386,7.77063211 -0.15,7.39979877 -0.15,6.99018758 C-0.15,6.61194961 -0.00841906355,6.26678575 0.224608408,6.00476938 C0.462154637,5.73767211 0.794779811,5.55707713 1.16932931,5.51583101 L1.16932931,5.51583101 L13.6841044,5.50627626 L10.5595501,2.38220839 C10.2699113,2.09256954 10.1250918,1.71295144 10.1250918,1.33333333 C10.1250918,0.953715229 10.2699113,0.574097124 10.5595501,0.284458275 C10.849189,-0.00518057514 11.2288071,-0.15 11.6084252,-0.15 Z"></path>
+                      </g>
+                      <path
+                        d="M15,24 L3,24 C1.34314575,24 -1.1293615e-15,22.6568542 0,21 L0,3 C-2.02906125e-16,1.34314575 1.34314575,3.04359188e-16 3,0 L15,0 L15,0"
+                        stroke-width="3.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </svg>
         </div>
+
+        {/* 布置作业 */}
+        <NModal
+          transformOrigin="center"
+          v-model:show={modal.status}
+          preset="card"
+          // class={styles.attendClassModal}
+          title={modal.title}
+          class={['modalTitle', styles.removeVisiable]}>
+          <div class={styles.studentRemove}>
+            <p>{modal.content}</p>
+            {/* <div class={styles.modelAttendContent}>
+              {data.modalAttendMessage}
+            </div> */}
+            <NSpace class={styles.btnGroupModal}>
+              <NButton
+                type="default"
+                round
+                onClick={() => {
+                  modal.status = false;
+                }}>
+                取消
+              </NButton>
+              <NButton
+                type="primary"
+                round
+                onClick={() => {
+                  // data.modelTrainStatus = true;
+                  modal.status = false;
+                  props.close();
+                }}>
+                确认
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
       </div>
     );
   }

+ 19 - 4
src/views/attend-class/component/video-play.tsx

@@ -1,4 +1,11 @@
-import { defineComponent, nextTick, onMounted, reactive, toRefs } from 'vue';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  toRefs
+} from 'vue';
 import TCPlayer from 'tcplayer.js';
 import 'tcplayer.js/dist/tcplayer.min.css';
 // import 'plyr/dist/plyr.css';
@@ -37,7 +44,7 @@ export default defineComponent({
     });
     const videoRef = ref();
     const videoItem = ref();
-    const videoID = 'video' + Date.now() + Math.floor(Math.random() * 100);
+    const videoID = ref('video' + Date.now() + Math.floor(Math.random() * 100));
 
     // 对时间进行格式化
     const timeFormat = (num: number) => {
@@ -82,7 +89,7 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      videoItem.value = TCPlayer(videoID, {
+      videoItem.value = TCPlayer(videoID.value, {
         appID: '',
         controls: false
       }); // player-container-id 为播放器容器 ID,必须与 html 中一致
@@ -136,6 +143,14 @@ export default defineComponent({
       videoItem.value.currentTime(0);
       videoItem.value.pause();
     };
+
+    onUnmounted(() => {
+      if (videoItem.value) {
+        videoItem.value.pause();
+        videoItem.value.src('');
+        videoItem.value.dispose();
+      }
+    });
     expose({
       onPlay,
       stop,
@@ -148,7 +163,7 @@ export default defineComponent({
           style={{ width: '100%', height: '100%' }}
           src={isEmtry.value ? '' : item.value.content}
           ref={videoRef}
-          id={videoID}
+          id={videoID.value}
           preload="auto"
           playsinline
           webkit-playsinline></video>

+ 18 - 18
src/views/attend-class/component/video.module.less

@@ -2,21 +2,26 @@
   width: 100%;
   height: 100%;
 
+  .sectionAnimate {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(126px);
+    transition: all .2s;
+  }
 
   .controls {
     position: absolute;
-    bottom: 0;
+    bottom: 126px;
     left: 0;
     right: 0;
     width: 100%;
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(26px);
-    height: 150px;
-    padding: 0 250px 0 40px !important;
-    transition: all 0.5s;
+    background-color: rgba(0, 0, 0, 0.7);
+    // backdrop-filter: blur(26px);
+    height: 86px;
+    padding: 10px 40px 0 !important;
     display: flex;
     align-items: center;
-    transition: all .5s;
+    transition: all 0.301s;
 
     .time {
       display: flex;
@@ -60,8 +65,8 @@
 
     .actionBtn {
       display: flex;
-      width: 82px;
-      height: 82px;
+      width: 60px;
+      height: 60px;
       padding: 4px 0;
       background: transparent;
 
@@ -73,8 +78,8 @@
 
 
     .iconReplay {
-      width: 43px;
-      height: 42px;
+      width: 40px;
+      height: 39px;
       background-color: transparent;
 
       &>img {
@@ -97,12 +102,7 @@
     }
   }
 
-  .sectionAnimate {
-    opacity: 0;
-    pointer-events: none;
-    transform: translateY(100%);
-    transition: all .5s;
-  }
+
 }
 
 
@@ -254,4 +254,4 @@
 //       }
 //     }
 //   }
-// }
+// }

+ 47 - 38
src/views/attend-class/index.module.less

@@ -23,31 +23,7 @@
   }
 }
 
-.assignHomework {
-  position: absolute;
-  top: 40px;
-  left: 40px;
-  width: 187px;
-  height: 65px;
-  cursor: pointer;
-  transition: all 0.5s;
-
-  &.isClose {
-    left: 124px;
-  }
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
 
-.sectionAnimateUp {
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(-100%);
-  transition: all 0.5s;
-}
 
 .coursewarePlay {
   position: relative;
@@ -75,12 +51,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 50px;
-  // background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
+  height: 46px;
+  // background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
+  background-color: rgba(0, 0, 0, 0.5);
   transition: transform 0.5s;
   box-sizing: border-box;
-  font-size: 24px;
+  font-size: max(16px, 14Px);
+  color: #fff;
   pointer-events: none;
 
   div {
@@ -351,27 +328,59 @@
   transition: all 0.5s;
 }
 
+.sectionAnimateUp {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-100%);
+  transition: all 0.3s;
+}
+
 .switchDisplaySection {
   position: absolute;
-  right: 30px;
-  bottom: 30px;
+  right: 0px;
+  bottom: 0px;
   z-index: 199;
-  transition: all 0.5s;
+  transition: all 0.3s;
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 40px;
+  height: 126px;
+  background-color: rgba(0, 0, 0, 0.7);
+  pointer-events: none;
+
+  .switchSpace {
+    gap: 0 48px !important;
+  }
+
 
-  .displayBtn {
-    width: 90px;
-    height: 90px;
+  .btnItem {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
     cursor: pointer;
+    pointer-events: auto;
+
+    &.btnsDisabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+    }
 
     img {
-      width: inherit;
-      height: inherit;
+      width: 56px;
+      height: 56px;
     }
 
-    &+.displayBtn {
-      margin-left: 20px;
+    p {
+      padding-top: 6px;
+      font-size: 18px;
+      color: #FFFFFF;
+      line-height: 25px;
+      text-align: center;
     }
+
+
   }
 }
 

+ 249 - 578
src/views/attend-class/index.tsx

@@ -11,18 +11,18 @@ import {
 import styles from './index.module.less';
 import 'plyr/dist/plyr.css';
 import MusicScore from './component/musicScore';
-import iconChange from './image/icon-change.png';
-import iconMenu from './image/icon-menu.png';
-import iconUp from './image/icon-up.png';
-import iconDown from './image/icon-down.png';
-import iconNote from './image/icon-note.png';
-import iconWhiteboard from './image/icon-whiteboard.png';
-import iconAssignHomework from './image/icon-assignHomework.png';
-import iconClose from './image/icon-close.png';
-import iconOverPreivew from './image/icon-over-preview.png';
+// import iconChange from './image/icon-change.png';
+// import iconMenu from './image/icon-menu.png';
+// import iconUp from './image/icon-up.png';
+// import iconDown from './image/icon-down.png';
+// import iconNote from './image/icon-note.png';
+// import iconWhiteboard from './image/icon-whiteboard.png';
+// import iconAssignHomework from './image/icon-assignHomework.png';
+// import iconClose from './image/icon-close.png';
+// import iconOverPreivew from './image/icon-over-preview.png';
 import { Vue3Lottie } from 'vue3-lottie';
 import playLoadData from './datas/data.json';
-import Moveable from 'moveable';
+// import Moveable from 'moveable';
 import VideoPlay from './component/video-play';
 import {
   useMessage,
@@ -30,10 +30,10 @@ import {
   NDrawerContent,
   NModal,
   NSpace,
-  NButton,
-  NTooltip,
-  NPopover,
-  NImage
+  NButton
+  // NTooltip,
+  // NPopover,
+  // NImage
 } from 'naive-ui';
 import CardType from '@/components/card-type';
 import Pen from './component/tools/pen';
@@ -46,19 +46,33 @@ import {
   lessonPreTrainingPage,
   queryCourseware
 } from '../prepare-lessons/api';
-import Attentguide from '@/custom-plugins/guide-page/attent-guide';
+// import Attentguide from '@/custom-plugins/guide-page/attent-guide';
 import { vaildUrl } from '/src/utils/urlUtils';
 import TimerMeter from '/src/components/timerMeter';
-import toneImage from '/src/components/layout/images/toneImage.png';
-import toolbox from '/src/components/layout/images/toolbox.png';
-import setTimeIcon from '/src/components/layout/images/setTimeIcon.png';
-import iconNote2 from '/src/components/layout/images/icon-note.png';
-import beatIcon from '/src/components/layout/images/beatIcon.png';
-import toneIcon from '/src/components/layout/images/toneIcon.png';
-import { eventGlobal, px2vw } from '/src/utils';
+// import toneImage from '/src/components/layout/images/toneImage.png';
+// import toolbox from '/src/components/layout/images/toolbox.png';
+// import setTimeIcon from '/src/components/layout/images/setTimeIcon.png';
+// import beatIcon from '/src/components/layout/images/beatIcon.png';
+// import toneIcon from '/src/components/layout/images/toneIcon.png';
+import { px2vw } from '/src/utils';
 import PlaceholderTone from '/src/components/layout/modals/placeholderTone';
 import { state as globalState } from '/src/state';
 import Chapter from './model/chapter';
+import { useRouter } from 'vue-router';
+import { useUserStore } from '@/store/modules/users';
+
+import iconBeatIcon from './new-image/icon-beatIcon.png';
+import iconChange from './new-image/icon-change.png';
+import iconDown from './new-image/icon-down.png';
+import iconMenu from './new-image/icon-menu.png';
+import iconNote from './new-image/icon-note.png';
+import iconOverClass from './new-image/icon-overclass.png';
+import iconSetTime from './new-image/icon-setTime.png';
+import iconToneIcon from './new-image/icon-toneIcon.png';
+import iconUp from './new-image/icon-up.png';
+import iconWhite from './new-image/icon-white.png';
+import iconWork from './new-image/icon-work.png';
+
 export type ToolType = 'init' | 'pen' | 'whiteboard';
 export type ToolItem = {
   type: ToolType;
@@ -101,39 +115,31 @@ export default defineComponent({
   setup(props, { emit }) {
     const message = useMessage();
     const route = useRoute();
+    const router = useRouter();
+    const users = useUserStore();
     /** 设置播放容器 16:9 */
     const parentContainer = reactive({
       width: '100vw'
     });
-    const NPopoverRef = ref();
-    const setContainer = () => {
-      const min = Math.min(screen.width, screen.height);
-      const max = Math.max(screen.width, screen.height);
-      const width = min * (16 / 9);
-      if (width > max) {
-        parentContainer.width = '100vw';
-        return;
-      } else {
-        parentContainer.width = width + 'px';
-      }
-    };
+    // const NPopoverRef = ref();
+    // const setContainer = () => {
+    //   const min = Math.min(screen.width, screen.height);
+    //   const max = Math.max(screen.width, screen.height);
+    //   const width = min * (16 / 9);
+    //   if (width > max) {
+    //     parentContainer.width = '100vw';
+    //     return;
+    //   } else {
+    //     parentContainer.width = width + 'px';
+    //   }
+    // };
     const handleInit = (type = 0) => {
       //设置容器16:9
       // setContainer();
     };
     handleInit();
-    const boxBoundaryInfo = reactive({
-      isBoundary: false,
-      isBoundaryType: '' as any,
-      mainWidth: '' as any,
-      mainHeight: '' as any,
-      subWidth: '' as any,
-      subHeight: '' as any
-    });
-
     onUnmounted(() => {
       handleInit(1);
-      window.removeEventListener('resize', resetSize);
     });
 
     const data = reactive({
@@ -171,7 +177,6 @@ export default defineComponent({
       timer: null as any,
       item: null as any
     });
-    const showGuide = ref(false);
     const getDetail = async () => {
       try {
         const res = await queryCourseware({
@@ -209,174 +214,60 @@ export default defineComponent({
             isRender: false // 是否渲染了
           };
         });
-        setTimeout(() => {
-          showGuide.value = true;
-        }, 500);
       } catch {
         //
       }
     };
 
-    const directionType = ref('left');
     const showModalBeat = ref(false);
     const showModalTone = ref(false);
     const showModalTime = ref(false);
-    const isDragIng = ref(false);
-    const initMoveable = async () => {
-      if (document.querySelector('.wrap')) {
-        const moveable = new Moveable(document.querySelector('.wrap') as any, {
-          target: document.querySelector('#moveNPopoverA') as any,
-          // If the container is null, the position is fixed. (default: parentElement(document.body))
-          container: document.querySelector('.wrap') as any,
-          // snappable: true,
-          // bounds: {"left":100,"top":100,"right":100,"bottom":100},
-          draggable: true,
-          resizable: false,
-          scalable: false,
-          rotatable: false,
-          warpable: false,
-          pinchable: false, // ["resizable", "scalable", "rotatable"]
-          origin: false,
-          keepRatio: false,
-          // Resize, Scale Events at edges.
-          edge: false,
-          throttleDrag: 0,
-          throttleResize: 0,
-          throttleScale: 0,
-          throttleRotate: 0
-        });
-        console.log('initMoveable完毕', moveable);
-        moveable
-          .on('dragStart', ({ target, clientX, clientY }) => {
-            console.log('dragStart');
-          })
-          .on(
-            'drag',
-            ({
-              target,
-              // transform,
-              left,
-              top,
-              right,
-              bottom
-              // beforeDelta,
-              // beforeDist,
-              // delta,
-              // dist,
-              // clientX,
-              // clientY
-            }) => {
-              isDragIng.value = true;
-              if (NPopoverRef.value) {
-                NPopoverRef.value.setShow(false);
-              }
-
-              const subdEl = document.getElementById(
-                `moveNPopoverA`
-              ) as HTMLDivElement;
-              // console.log(subdEl, "subdEl", "drag");
-              const subdElStyle = getComputedStyle(subdEl, null);
-              const RectInfo = {
-                left: Number(subdElStyle.left.replace('px', '')),
-                top: Number(subdElStyle.top.replace('px', '')),
-                width: Number(subdElStyle.width.replace('px', '')),
-                height: Number(subdElStyle.height.replace('px', ''))
-              };
-              // target.style.transition = ''
-              const mainWidth =
-                parseInt(
-                  window.getComputedStyle(
-                    document.querySelector('.wrap') as Element
-                  ).width
-                ) - RectInfo.width;
-
-              const mainHeight =
-                parseInt(
-                  window.getComputedStyle(
-                    document.querySelector('.wrap') as Element
-                  ).height
-                ) - RectInfo.height;
-              subdEl.style.transition = '';
-              boxBoundaryInfo.isBoundary = false;
-              boxBoundaryInfo.isBoundaryType = '';
-              boxBoundaryInfo.mainHeight = mainHeight;
-              boxBoundaryInfo.mainWidth = mainWidth;
-              boxBoundaryInfo.subWidth = RectInfo.width;
-              boxBoundaryInfo.subHeight = RectInfo.height;
-              if (left < 0) {
-                left = 2;
-                boxBoundaryInfo.isBoundary = true;
-                boxBoundaryInfo.isBoundaryType = 'left';
-              }
-              if (top < 0) {
-                top = 2;
-                boxBoundaryInfo.isBoundary = true;
-                boxBoundaryInfo.isBoundaryType = 'top';
-              }
-              if (right < 0) {
-                right = 2;
-              }
-              if (bottom < 0) {
-                bottom = 2;
-              }
-              if (left > mainWidth - 2) {
-                left = mainWidth - 2;
-                // top = 2;
-                boxBoundaryInfo.isBoundary = true;
-                boxBoundaryInfo.isBoundaryType = 'right';
-              }
-              if (top > mainHeight - 2) {
-                top = mainHeight - 2;
-                boxBoundaryInfo.isBoundary = true;
-                boxBoundaryInfo.isBoundaryType = 'bottom';
-              }
-
-              target!.style.left = `${left}px`;
-              target!.style.top = `${top}px`;
-            }
-          )
-          .on(
-            'dragEnd',
-            async ({
-              target,
-              // isDrag,
-              clientX
-              // clientY
-            }) => {
-              if (document.body.clientWidth / 2 - clientX > 0) {
-                // 往左出
-                directionType.value = 'right';
-              } else {
-                // 往又出
-                directionType.value = 'left';
-              }
-              console.log(target.style.left);
-              isDragIng.value = false;
-              // 在这里进行动画
-              if (boxBoundaryInfo.isBoundary) {
-                // 这里说明贴边了
-
-                target.style.transition = '.3s';
-                actionEnd(target, boxBoundaryInfo.isBoundaryType);
-              }
-            }
-          );
-      }
-    };
     // ifram事件处理
     const iframeHandle = (ev: MessageEvent) => {
+      console.log(ev.data?.api, ev.data, 'ev.data');
       if (ev.data?.api === 'headerTogge') {
         activeData.model =
           ev.data.show || (ev.data.playState == 'play' ? false : true);
       }
+
+      //
+      if (ev.data?.api === 'onAttendToggleMenu') {
+        activeData.model = !activeData.model;
+      }
+
       if (ev.data?.api === 'api_fingerPreView') {
         clearInterval(activeData.timer);
         activeData.model = !ev.data.state;
       }
+      //
+      if (ev.data?.api === 'documentBodyKeyup') {
+        if (ev.data?.code === 'ArrowLeft') {
+          setModalOpen();
+          handlePreAndNext('up');
+        }
+
+        if (ev.data?.code === 'ArrowRight') {
+          setModalOpen();
+          handlePreAndNext('down');
+        }
+      }
+
+      if (ev.data?.api === 'onLogin') {
+        const documentDom: any = document;
+        documentDom.exitFullscreen
+          ? documentDom.exitFullscreen()
+          : documentDom.mozCancelFullScreen
+          ? documentDom.mozCancelFullScreen()
+          : documentDom.webkitExitFullscreen
+          ? documentDom.webkitExitFullscreen()
+          : '';
+        users.logout();
+        router.replace('/login');
+      }
     };
 
     onMounted(() => {
-      initMoveable();
+      // initMoveable();
       const query = route.query;
       // 先取参数,
       data.type = props.type || (query.type as any);
@@ -386,151 +277,11 @@ export default defineComponent({
       data.classGroupId = props.classGroupId || query.classGroupId;
       data.classId = props.classId || query.classId;
 
-      const subdEl = document.getElementById(`moveNPopoverA`) as HTMLDivElement;
-      initBoundaryWrap(subdEl, boxBoundaryInfo);
-      initBoxRectInfo(subdEl, boxBoundaryInfo);
-
       window.addEventListener('message', iframeHandle);
       getDetail();
       getLessonCoursewareDetail();
-      window.addEventListener('resize', resetSize);
     });
 
-    const resetSize = () => {
-      const subdEl = document.getElementById(`moveNPopoverA`) as HTMLDivElement;
-      subdEl.style.display = 'none';
-
-      boxBoundaryInfo.isBoundary = true;
-      boxBoundaryInfo.isBoundaryType = 'right';
-      if (NPopoverRef.value) {
-        NPopoverRef.value.setShow(false);
-      }
-
-      setTimeout(() => {
-        subdEl.style.transition = '';
-        initBoxRectInfo(subdEl, boxBoundaryInfo);
-        initBoundaryWrap(subdEl, boxBoundaryInfo);
-        subdEl.style.display = 'block';
-      }, 100);
-    };
-
-    const initBoundaryWrap = (target: any, wrapInfo: any) => {
-      target.addEventListener('mouseenter', () => {
-        if (wrapInfo.isBoundary) {
-          // 如果在边框 就得还原 元素位置 还原完毕后 去除transition
-          if (wrapInfo.isBoundaryType == 'left') {
-            target.style.left = '2px';
-          } else if (wrapInfo.isBoundaryType == 'right') {
-            target.style.left = `${wrapInfo.mainWidth - 2}px`;
-          } else if (wrapInfo.isBoundaryType == 'top') {
-            target.style.top = `${2}px`;
-          } else if (wrapInfo.isBoundaryType == 'bottom') {
-            target.style.top = `${wrapInfo.mainHeight - 2}px`;
-          }
-        }
-        rate(target, 0);
-      });
-      target.addEventListener('mouseleave', () => {
-        console.log('mouseleave', wrapInfo.isBoundary);
-        if (wrapInfo.isBoundary) {
-          // 如果在边框 就得还原 元素位置 还原完毕后 去除transition
-          if (wrapInfo.isBoundaryType == 'left') {
-            actionEnd(target, 'left');
-          } else if (wrapInfo.isBoundaryType == 'right') {
-            actionEnd(target, 'right');
-          } else if (wrapInfo.isBoundaryType == 'top') {
-            actionEnd(target, 'top');
-          } else if (wrapInfo.isBoundaryType == 'bottom') {
-            actionEnd(target, 'bottom');
-          }
-        }
-        // rate(target, 0)
-      });
-      // target.addEventListener('contextmenu', (event: any) => {
-      //   event.preventDefault();
-      //   dialog.warning({
-      //     title: '提示',
-      //     content: '是否收入托盘',
-      //     positiveText: '确定',
-      //     negativeText: '取消',
-      //     onPositiveClick: () => {
-      //       console.log('确定')
-      //     },
-      //     onNegativeClick: () => {
-      //       console.log('取消')
-      //     }
-      //   })
-
-      // });
-
-      // actionEnd(target, 'right');
-    };
-    // 这里是旋转
-    const rate = (target: any, rate: any) => {
-      target.style.transform = ' rotate(' + rate + ')';
-    };
-
-    //  这里是选装的方式
-    const actionEnd = (target: any, type: any) => {
-      switch (type) {
-        case 'left':
-          rate(target, '90deg');
-          target!.style.left = `${2 - boxBoundaryInfo.subWidth / 2}px`;
-          target!.style.top = `${top}px`;
-          break;
-        case 'right':
-          rate(target, '-90deg');
-          target!.style.left = `${
-            boxBoundaryInfo.mainWidth - 2 + boxBoundaryInfo.subWidth / 2
-          }px`;
-          target!.style.top = `${top}px`;
-          break;
-
-        case 'top':
-          target!.style.top = `${2 - boxBoundaryInfo.subHeight / 2}px`;
-          rate(target, '-180deg');
-          break;
-        case 'bottom':
-          target!.style.top = `${
-            boxBoundaryInfo.mainHeight - 2 + boxBoundaryInfo.subHeight / 2
-          }px`;
-          break;
-        default:
-          rate(target, '-0');
-          break;
-      }
-    };
-
-    const initBoxRectInfo = (target: any, wrapInfo: any) => {
-      // const subdEl = document.getElementById(`moveNPopoverA`) as HTMLDivElement;
-      // console.log(subdEl, "subdEl", "drag");
-      const subdElStyle = getComputedStyle(target, null);
-      const RectInfo = {
-        left: Number(subdElStyle.left.replace('px', '')),
-        top: Number(subdElStyle.top.replace('px', '')),
-        width: Number(subdElStyle.width.replace('px', '')),
-        height: Number(subdElStyle.height.replace('px', ''))
-      };
-      // target.style.transition = ''
-      const mainWidth =
-        parseInt(
-          window.getComputedStyle(document.querySelector('.wrap') as Element)
-            .width
-        ) - RectInfo.width;
-
-      const mainHeight =
-        parseInt(
-          window.getComputedStyle(document.querySelector('.wrap') as Element)
-            .height
-        ) - RectInfo.height;
-      // boxBoundaryInfo.isBoundary = false;
-      // boxBoundaryInfo.isBoundaryType = '';
-      wrapInfo.mainHeight = mainHeight;
-      wrapInfo.mainWidth = mainWidth;
-      wrapInfo.subWidth = RectInfo.width;
-      wrapInfo.subHeight = RectInfo.height;
-      target.style.transition = '.3s';
-    };
     const onFullScreen = () => {
       if (data.type === 'preview') {
         const el: any = document.querySelector('#app');
@@ -596,14 +347,26 @@ export default defineComponent({
           lessonCoursewareKnowledgeDetailId: data.detailId,
           id: data.classId
         });
-      } catch {}
+      } catch {
+        //
+      }
     };
 
     const activeName = computed(() => {
       let name = '';
-      data.knowledgePointList.forEach((item: any, index: number) => {
-        if (popupData.activeIndex === index) {
-          name = item.title;
+      // data.knowledgePointList.forEach((item: any, index: number) => {
+      //   if (popupData.activeIndex === index) {
+      //     name = item.title;
+      //   }
+      // });
+      popupData.chapterDetails.forEach((chapter: any) => {
+        if (chapter.id === data.lessonCoursewareDetailId) {
+          name = chapter.name;
+          chapter.knowledgeList?.forEach((know: any) => {
+            if (know.id === data.detailId) {
+              name += ' - ' + know.name;
+            }
+          });
         }
       });
       return name;
@@ -614,8 +377,13 @@ export default defineComponent({
       for (let i = 0; i < data.itemList.length; i++) {
         const activeItem = data.itemList[i];
         if (activeItem.type === 'VIDEO' && activeItem.videoEle) {
-          activeItem.videoEle.currentTime(0);
-          activeItem.videoEle.pause();
+          // console.log(activeItem.videoEle, ' activeItem.videoEle');
+          try {
+            activeItem.videoEle?.currentTime(0);
+            activeItem.videoEle?.pause();
+          } catch (e: any) {
+            // console.log(e, 'e');
+          }
         }
 
         if (activeItem.type === 'SONG' && activeItem.audioEle) {
@@ -789,20 +557,14 @@ export default defineComponent({
               message.destroyAll();
               nextTick(() => {
                 if (item.error) {
-                  console.log(item, 'item error');
+                  // console.log(item, 'item error');
                   item.videoEle?.src(item.content);
                   item.error = false;
                   //   item.videoEle?.onPlay();
                 }
               });
-              // item.autoPlay = false;
             }
           }
-          //   requestAnimationFrame(() => {
-          //     const _effectIndex = effectIndex.value + 1;
-          //     effectIndex.value =
-          //       _effectIndex >= effects.length - 1 ? 0 : _effectIndex;
-          //   });
         },
         activeData.isAnimation ? 800 : 0
       );
@@ -1030,11 +792,11 @@ export default defineComponent({
     // 监听页面键盘事件 - 上下切换
     document.body.addEventListener('keyup', (e: KeyboardEvent) => {
       // console.log(e, 'e');
-      if (e.code === 'ArrowUp') {
+      if (e.code === 'ArrowLeft') {
         // if (popupData.activeIndex === 0) return;
         setModalOpen();
         handlePreAndNext('up');
-      } else if (e.code === 'ArrowDown') {
+      } else if (e.code === 'ArrowRight') {
         // if (popupData.activeIndex === data.itemList.length - 1) return;
         setModalOpen();
         handlePreAndNext('down');
@@ -1064,7 +826,7 @@ export default defineComponent({
       const activeItem = data.itemList[popupData.activeIndex];
       // 暂停视频和曲谱的播放
       if (activeItem.type === 'VIDEO' && activeItem.videoEle) {
-        activeItem.videoEle.pause();
+        activeItem.videoEle?.pause();
       }
       if (activeItem.type === 'SONG' && activeItem.audioEle) {
         activeItem.audioEle?.stop();
@@ -1106,12 +868,12 @@ export default defineComponent({
       if (val == 'toneIcon') {
         showModalTone.value = true;
       }
-      if (val == 'iconNote2') {
-        if (NPopoverRef.value) {
-          NPopoverRef.value.setShow(false);
-        }
-        eventGlobal.emit('teacher-guideInfo-attend-class', 'attend-class');
-      }
+      // if (val == 'iconNote2') {
+      //   if (NPopoverRef.value) {
+      //     NPopoverRef.value.setShow(false);
+      //   }
+      //   eventGlobal.emit('teacher-guideInfo-attend-class', 'attend-class');
+      // }
     };
 
     // 是否允许上一页
@@ -1255,10 +1017,10 @@ export default defineComponent({
             clearTimeout(activeData.timer);
             activeData.model = !activeData.model;
             Object.values(data.videoRefs).map((n: any) =>
-              n.toggleHideControl(activeData.model)
+              n?.toggleHideControl(activeData.model)
             );
             Object.values(data.audioRefs).map((n: any) =>
-              n.toggleHideControl(activeData.model)
+              n?.toggleHideControl(activeData.model)
             );
           }}>
           <div
@@ -1271,12 +1033,12 @@ export default defineComponent({
             {!popupData.chapterLoading ? (
               <div class={styles.wraps}>
                 {data.itemList.map((m: any, mIndex: number) => {
-                  const isRender =
-                    m.isRender || Math.abs(popupData.activeIndex - mIndex) < 2;
+                  const isRender = Math.abs(popupData.activeIndex - mIndex) < 2;
                   const isEmtry = Math.abs(popupData.activeIndex - mIndex) > 4;
-                  if (isRender) {
-                    m.isRender = true;
-                  }
+                  // if (isRender) {
+                  //   m.isRender = true;
+                  // }
+                  // console.log(isRender, 'isRender', mIndex);
                   return isRender ? (
                     <div
                       key={'index' + mIndex}
@@ -1306,10 +1068,10 @@ export default defineComponent({
                         activeData.timer = setTimeout(() => {
                           activeData.model = !activeData.model;
                           Object.values(data.videoRefs).map((n: any) =>
-                            n.toggleHideControl(activeData.model)
+                            n?.toggleHideControl(activeData.model)
                           );
                           Object.values(data.audioRefs).map((n: any) =>
-                            n.toggleHideControl(activeData.model)
+                            n?.toggleHideControl(activeData.model)
                           );
                           if (activeData.model) {
                             setModelOpen();
@@ -1386,6 +1148,7 @@ export default defineComponent({
                       ) : (
                         <MusicScore
                           activeModel={activeData.model}
+                          activeStatus={popupData.activeIndex === mIndex}
                           data-vid={m.id}
                           music={m}
                           onSetIframe={(el: any) => {
@@ -1400,165 +1163,143 @@ export default defineComponent({
             ) : (
               ''
             )}
-            <Transition name="right">
-              {activeData.model && (
-                <div
-                  class={styles.rightFixedBtns}
-                  onClick={(e: Event) => {
-                    e.stopPropagation();
-                    clearTimeout(activeData.timer);
-                  }}>
-                  <div
-                    class={[styles.fullBtn]}
-                    onClick={() => (popupData.chapterOpen = true)}>
-                    <img src={iconChange} />
-                  </div>
-                  <div
-                    class={[
-                      styles.fullBtn,
-                      styles.iconUp,
-                      !isUpArrow.value ? styles.btnsDisabled : ''
-                    ]}
-                    onClick={() => {
-                      if (!isUpArrow.value) return;
-                      handlePreAndNext('up');
-                    }}>
-                    <img src={iconUp} />
-                  </div>
-                  <div id="attent-0">
-                    <div
-                      class={[styles.fullBtn, styles.point]}
-                      onClick={() => (popupData.open = true)}>
-                      <img src={iconMenu} />
-                    </div>
-
-                    <div
-                      class={[
-                        styles.fullBtn,
-                        styles.iconDown,
-                        !isDownArrow.value ? styles.btnsDisabled : ''
-                      ]}
-                      onClick={() => {
-                        if (!isDownArrow.value) return;
-                        handlePreAndNext('down');
-                      }}>
-                      <img src={iconDown} />
-                    </div>
-                  </div>
-                </div>
-              )}
-            </Transition>
           </div>
         </div>
 
+        {/* 头部样式 */}
         <div
           style={{ transform: activeData.model ? '' : 'translateY(-100%)' }}
-          class={styles.headerContainer}
-          // ref={headeRef}
-        >
-          {/* <div class={styles.backBtn} onClick={() => goback()}>
-            <Icon name={iconBack} />
-            返回
-          </div> */}
+          class={styles.headerContainer}>
           <div class={styles.menu}>{activeName.value}</div>
         </div>
         {/* 布置作业按钮 */}
 
-        {data.type !== 'preview' ? (
-          <div
-            class={[
-              styles.assignHomeworkClose,
-              activeData.model ? '' : styles.sectionAnimateUp
-            ]}
-            onClick={async () => {
-              data.removeVisiable = true;
-              data.removeTitle = '结束课程';
-              data.removeContent = '请确认是否结束课程?';
-            }}>
-            <img src={iconClose} />
-          </div>
-        ) : (
-          ''
-        )}
-        <div
-          id="attent-3"
-          class={[
-            styles.assignHomework,
-            data.type !== 'preview' ? styles.isClose : '',
-            activeData.model ? '' : styles.sectionAnimateUp
-          ]}
-          onClick={async () => {
-            if (data.type === 'preview') {
-              handleStop();
-
-              data.removeVisiable = true;
-              data.removeTitle = '结束预览';
-              data.removeContent = '请确认是否结束预览?';
-
-              // onFullScreen();
-            } else {
-              const res = await lessonPreTrainingPage({
-                coursewareKnowledgeDetailId: data.detailId,
-                subjectId: data.subjectId,
-                page: 1,
-                rows: 99
-              });
-              console.log(res, 'res');
-              if (res.data.rows && res.data.rows.length) {
-                data.modalAttendMessage = '本节课已设置课后训练,是否布置?';
-              }
-              data.modelAttendStatus = true;
-            }
-          }}>
-          <img
-            src={data.type === 'preview' ? iconOverPreivew : iconAssignHomework}
-          />
-        </div>
-
-        {/* 白板 批注 */}
         <div
+          onClick={(e: any) => {
+            e.stopPropagation();
+          }}
           class={[
             styles.switchDisplaySection,
             activeData.model ? '' : styles.sectionAnimate
           ]}>
-          <NTooltip trigger="hover">
-            {{
-              trigger: () => (
-                <div
-                  id="attent-1"
-                  class={styles.displayBtn}
-                  onClick={() =>
-                    openStudyTool({
-                      type: 'pen',
-                      icon: iconNote,
-                      name: '批注'
-                    })
-                  }>
-                  <img src={iconNote} />
-                </div>
-              ),
-              default: () => '批注'
-            }}
-          </NTooltip>
-          <NTooltip trigger="hover">
-            {{
-              trigger: () => (
-                <div
-                  id="attent-2"
-                  class={styles.displayBtn}
-                  onClick={() =>
-                    openStudyTool({
-                      type: 'whiteboard',
-                      icon: iconWhiteboard,
-                      name: '白板'
-                    })
-                  }>
-                  <img src={iconWhiteboard} />
-                </div>
-              ),
-              default: () => '白板'
-            }}
-          </NTooltip>
+          <NSpace class={styles.switchSpace}>
+            <div
+              class={styles.btnItem}
+              onClick={async () => {
+                if (data.type === 'preview') {
+                  handleStop();
+                  data.removeVisiable = true;
+                  data.removeTitle = '结束预览';
+                  data.removeContent = '请确认是否结束预览?';
+                } else {
+                  data.removeVisiable = true;
+                  data.removeTitle = '结束课程';
+                  data.removeContent = '请确认是否结束课程?';
+                }
+              }}>
+              <img src={iconOverClass} />
+              <p>{data.type !== 'preview' ? '结束课程' : '结束预览'}</p>
+            </div>
+            {data.type !== 'preview' && (
+              <div
+                class={styles.btnItem}
+                onClick={async () => {
+                  const res = await lessonPreTrainingPage({
+                    coursewareKnowledgeDetailId: data.detailId,
+                    subjectId: data.subjectId,
+                    page: 1,
+                    rows: 99
+                  });
+                  if (res.data.rows && res.data.rows.length) {
+                    data.modalAttendMessage =
+                      '本节课已设置课后训练,是否布置?';
+                  }
+                  data.modelAttendStatus = true;
+                }}>
+                <img src={iconWork} />
+                <p>布置作业</p>
+              </div>
+            )}
+
+            <div
+              class={styles.btnItem}
+              onClick={() =>
+                openStudyTool({
+                  type: 'pen',
+                  icon: iconNote,
+                  name: '批注'
+                })
+              }>
+              <img src={iconNote} />
+              <p>批注</p>
+            </div>
+            <div
+              class={styles.btnItem}
+              onClick={() =>
+                openStudyTool({
+                  type: 'whiteboard',
+                  icon: iconWhite,
+                  name: '白板'
+                })
+              }>
+              <img src={iconWhite} />
+              <p>白板</p>
+            </div>
+            <div
+              class={styles.btnItem}
+              onClick={() => startShowModal('beatIcon')}>
+              <img src={iconToneIcon} />
+              <p>节拍器</p>
+            </div>
+            <div
+              class={styles.btnItem}
+              onClick={() => startShowModal('toneIcon')}>
+              <img src={iconSetTime} />
+              <p>调音器</p>
+            </div>
+            <div
+              class={styles.btnItem}
+              onClick={() => startShowModal('setTimeIcon')}>
+              <img src={iconBeatIcon} />
+              <p>计时器</p>
+            </div>
+          </NSpace>
+          <NSpace class={styles.switchSpace}>
+            <div
+              class={styles.btnItem}
+              onClick={() => (popupData.chapterOpen = true)}>
+              <img src={iconChange} />
+              <p>切换章节</p>
+            </div>
+            <div class={styles.btnItem} onClick={() => (popupData.open = true)}>
+              <img src={iconMenu} />
+              <p>资源列表</p>
+            </div>
+            <div
+              class={[
+                styles.btnItem,
+                !isUpArrow.value ? styles.btnsDisabled : ''
+              ]}
+              onClick={() => {
+                if (!isUpArrow.value) return;
+                handlePreAndNext('up');
+              }}>
+              <img src={iconUp} />
+              <p>上一个</p>
+            </div>
+            <div
+              class={[
+                styles.btnItem,
+                !isDownArrow.value ? styles.btnsDisabled : ''
+              ]}
+              onClick={() => {
+                if (!isDownArrow.value) return;
+                handlePreAndNext('down');
+              }}>
+              <img src={iconDown} />
+              <p>下一个</p>
+            </div>
+          </NSpace>
         </div>
 
         {/* 显示列表 */}
@@ -1708,76 +1449,6 @@ export default defineComponent({
           />
         </NModal>
 
-        {/* <NModal transformOrigin='center'
-          v-model:show={data.homeworkStatus}
-          preset="card"
-          class={[styles.attendClassModal]}
-          closable={false}
-          maskClosable={false}
-          title={' '}>
-          <div class={styles.workContainer}>
-            <h2>作业布置成功</h2>
-            <p>倒</p>
-          </div>
-        </NModal> */}
-        {showGuide.value ? <Attentguide type={data.type}></Attentguide> : null}
-
-        <NPopover
-          raw
-          trigger="click"
-          show-arrow={false}
-          ref={NPopoverRef}
-          style="--n-box-shadow: none;"
-          placement={directionType.value as 'left' | 'right'}
-          v-slots={{
-            trigger: () => (
-              // 首页不显示工具箱
-              <img
-                // src={isDragIng.value ? dragingBoxIcon : toolbox}
-                src={toolbox}
-                id="moveNPopoverA"
-                style={{
-                  display: ['/', '/home'].includes(route.path)
-                    ? 'none'
-                    : 'block'
-                }}
-                class={[
-                  styles.toolboxImg,
-                  'moveNPopoverA',
-                  isDragIng.value ? styles.isDragIng : ''
-                ]}
-                alt=""
-              />
-            )
-          }}>
-          <div class={styles.booxToolWrap}>
-            <div
-              class={styles.booxToolItem}
-              onClick={() => startShowModal('beatIcon')}>
-              <img src={beatIcon} alt="" />
-              节拍器
-            </div>
-            <div
-              class={styles.booxToolItem}
-              onClick={() => startShowModal('toneIcon')}>
-              <img src={toneIcon} alt="" />
-              调音器
-            </div>
-            <div
-              class={styles.booxToolItem}
-              onClick={() => startShowModal('setTimeIcon')}>
-              <img src={setTimeIcon} alt="" />
-              计时器
-            </div>
-            <div
-              class={styles.booxToolItem}
-              onClick={() => startShowModal('iconNote2')}>
-              <img src={iconNote2} alt="" />
-              帮助指引
-            </div>
-          </div>
-        </NPopover>
-
         <NModal
           transformOrigin="center"
           class={['modalTitle background']}

BIN
src/views/attend-class/new-image/icon-beatIcon.png


BIN
src/views/attend-class/new-image/icon-change.png


BIN
src/views/attend-class/new-image/icon-down.png


BIN
src/views/attend-class/new-image/icon-menu.png


BIN
src/views/attend-class/new-image/icon-note.png


BIN
src/views/attend-class/new-image/icon-overclass.png


BIN
src/views/attend-class/new-image/icon-setTime.png


BIN
src/views/attend-class/new-image/icon-toneIcon.png


BIN
src/views/attend-class/new-image/icon-up.png


BIN
src/views/attend-class/new-image/icon-white.png


BIN
src/views/attend-class/new-image/icon-work.png


+ 6 - 0
src/views/home/index.module.less

@@ -151,6 +151,12 @@
   .applyItem {
     width: 211px;
     height: 296px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      transform: scale(1.05);
+      transition: all 0.2s ease;
+    }
 
     p {
       text-align: justify;

+ 4 - 4
src/views/login/components/pwdLogin.tsx

@@ -60,7 +60,7 @@ export default defineComponent({
           const params: FormState = {
             username,
             password,
-            loginType:'PASSWORD',
+            loginType: 'PASSWORD',
             grant_type: 'password',
             client_id: 'cooleshow-teacher',
             client_secret: 'cooleshow-teacher'
@@ -78,9 +78,9 @@ export default defineComponent({
 
             // route.query?.redirect ||
             const toPath = decodeURIComponent('/' as string);
-            console.log(toPath,'toPath')
+            console.log(toPath, 'toPath');
             message.success('登录成功,即将进入系统');
-            router.replace(toPath)
+            router.replace(toPath);
             // if (route.name === LOGIN_NAME) {
             //   router.replace('/');
             // } else router.replace(toPath);
@@ -130,7 +130,7 @@ export default defineComponent({
               inputProps={{ autocomplete: 'off' }}
               class={[showPwd.value ? '' : styles['no-pwd']]}
               onKeydown={(e: KeyboardEvent) => {
-                console.log(e.code)
+                console.log(e.code);
                 if (e.code === 'Enter' || e.code === 'NumpadEnter') {
                   handleSubmit();
                 }

+ 25 - 1
src/views/natural-resources/components/my-collect/index.module.less

@@ -3,8 +3,32 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  gap: 22px;
+  gap: 22px 0;
   min-height: 220px;
+  margin-left: -12px;
+  margin-right: -12px;
+
+  .itemWrap {
+    width: calc(100% / 5);
+    padding-bottom: calc(100% / 5 * 0.73333);
+    position: relative;
+
+    .itemWrapBox {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0 12px;
+    }
+  }
+
+  :global {
+    .card-section-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 .searchGroup {

+ 16 - 12
src/views/natural-resources/components/my-collect/index.tsx

@@ -116,18 +116,22 @@ export default defineComponent({
         <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
           <div class={styles.list} id="myColloge-0">
             {state.tableList.map((item: any) => (
-              <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 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 && (

+ 28 - 4
src/views/natural-resources/components/my-resources/index.module.less

@@ -3,7 +3,9 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  gap: 22px;
+  gap: 22px 0;
+  margin-left: -12px;
+  margin-right: -12px;
 }
 
 .searchGroup {
@@ -147,15 +149,37 @@
   }
 }
 
-.itemSection {
+
+
+.itemWrap {
+  width: calc(100% / 5);
+  padding-bottom: calc(100% / 5 * 0.73333);
   position: relative;
 
-  .itemBg {
+  .itemWrapBox {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
+    padding: 0 12px;
+  }
+
+
+  :global {
+    .card-section-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+
+  .itemBg {
+    position: absolute;
+    left: 12px;
+    top: 0;
+    width: calc(100% - 24px);
+    height: 100%;
     z-index: 99;
     border-radius: 14px;
 
@@ -238,4 +262,4 @@
       }
     }
   }
-}
+}

+ 47 - 45
src/views/natural-resources/components/my-resources/index.tsx

@@ -207,51 +207,53 @@ export default defineComponent({
         <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
           <div class={styles.list}>
             {state.tableList.map((item: any) => (
-              <div class={styles.itemSection}>
-                <CardType
-                  item={item}
-                  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={
+              <div class={styles.itemWrap}>
+                <div class={styles.itemWrapBox}>
+                  <CardType
+                    item={item}
+                    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)
-                          ? resourceChecked
-                          : resourceDefault
-                      }
-                      class={styles.resourceDefault}
-                    />
-                  </div>
-                )}
+                          ? 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>
             ))}
 
@@ -305,7 +307,7 @@ export default defineComponent({
               list.forEach((item: any) => {
                 temp.push({
                   subjectIds: null,
-                  openFlag: true,
+                  openFlag: false,
                   coverImg: item.coverImg,
                   title: item.name || '',
                   type: formatUrlType(item.content),

+ 10 - 0
src/views/natural-resources/components/my-resources/search-group-resources.tsx

@@ -60,6 +60,11 @@ export default defineComponent({
                 size="small"
                 focusable={false}
                 onClick={() => {
+                  if (forms.type !== item.value) {
+                    state.isEdit = false;
+                    state.isSelectAll = false;
+                    emit('edit', state.isEdit);
+                  }
                   forms.type = item.value;
                   onSearch();
                 }}>
@@ -161,6 +166,11 @@ export default defineComponent({
                   focusable={false}
                   type={forms.subjectId === subject.id ? 'primary' : 'default'}
                   onClick={() => {
+                    if (forms.subjectId !== subject.id) {
+                      state.isEdit = false;
+                      state.isSelectAll = false;
+                      emit('edit', state.isEdit);
+                    }
                     forms.subjectId = subject.id;
                     onSearch();
                   }}>

+ 1 - 1
src/views/natural-resources/components/my-resources/upload-modal/index.tsx

@@ -199,7 +199,7 @@ export default defineComponent({
                     />
 
                     <div class={styles.commonType}>
-                      公开资源
+                      是否公开:
                       <NSwitch
                         size="small"
                         v-model:value={item.openFlag}

+ 25 - 3
src/views/natural-resources/components/share-resources/index.module.less

@@ -3,8 +3,32 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  gap: 22px;
+  gap: 22px 0;
   min-height: 220px;
+  margin-left: -12px;
+  margin-right: -12px;
+
+  .itemWrap {
+    width: calc(100% / 5);
+    padding-bottom: calc(100% / 5 * 0.73333);
+    position: relative;
+
+    .itemWrapBox {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0 12px;
+    }
+  }
+
+  :global {
+    .card-section-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 .searchGroup {
@@ -128,8 +152,6 @@
 }
 
 
-
-
 .collapseWrap {
   width: 98%;
   display: flex;

+ 30 - 28
src/views/natural-resources/components/share-resources/index.tsx

@@ -34,7 +34,7 @@ export default defineComponent({
       item: {} as any
     });
     const showGuide = ref(false);
-    const SearchGroupResourcesRef = ref()
+    const SearchGroupResourcesRef = ref();
     const getList = async () => {
       try {
         state.loading = true;
@@ -92,39 +92,41 @@ export default defineComponent({
     return () => (
       <>
         <SearchGroupResources
-        ref={SearchGroupResourcesRef}
+          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) => (
-              <>
-                {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 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 && (

+ 33 - 6
src/views/prepare-lessons/components/lesson-main/courseware/index.module.less

@@ -177,11 +177,37 @@
 }
 
 .list {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+
   padding: 12px 22px 12px;
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  gap: 20px;
+  gap: 20px 0;
+
+  .itemWrap {
+    width: calc(100% / 3);
+    padding-bottom: calc(100% / 3 * 0.73333);
+    position: relative;
+
+    .itemWrapBox {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0 10px;
+    }
+  }
+
+  :global {
+    .card-section-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 .attendClassModal {
@@ -196,8 +222,9 @@
   .itemOperation {
     position: absolute;
     top: 0;
-    left: 0;
-    width: 100%;
+    left: 10px;
+
+    width: calc(100% - 20px);
     height: 100%;
     text-align: right;
     z-index: 98;
@@ -288,8 +315,8 @@
 .addMusicItem {
   position: relative;
   box-sizing: border-box;
-  width: 300px;
-  height: 220px;
+  width: 100%;
+  height: 100%;
   border-radius: 14px;
   background: #F9FAFD;
   display: inline-flex;
@@ -323,4 +350,4 @@
 
 .subjectSyncModal {
   width: 920px;
-}
+}

+ 103 - 50
src/views/prepare-lessons/components/lesson-main/courseware/index.tsx

@@ -298,7 +298,7 @@ export default defineComponent({
         );
         const subjectId =
           forms.subjectId || localStorageSubjectId
-            ? Number(localStorageSubjectId)
+            ? Number(forms.subjectId || localStorageSubjectId)
             : null;
         // 判断浏览器上面是否有
         const index = subjectList.findIndex(
@@ -328,6 +328,7 @@ export default defineComponent({
         forms.subjectId = route.query.subjectId
           ? Number(route.query.subjectId)
           : null;
+        prepareStore.setClassGroupId(forms.classGroupId as any);
 
         checkSubjectIds();
         await getList();
@@ -335,6 +336,7 @@ export default defineComponent({
     );
 
     onMounted(async () => {
+      prepareStore.setClassGroupId(route.query.classGroupId as any);
       // 获取教材分类列表
       checkSubjectIds();
 
@@ -342,6 +344,7 @@ export default defineComponent({
 
       // 动态添加数据
       eventGlobal.on('onPrepareAddItem', (item: any) => {
+        forms.drag = true;
         forms.coursewareList.push(item);
         prepareStore.setCoursewareList(forms.coursewareList);
 
@@ -460,7 +463,30 @@ export default defineComponent({
                 // !forms.loadingStatus && forms.coursewareList.length <= 0
                 //   ? styles.emptySection
                 //   : ''
-              ]}>
+              ]}
+              onDragenter={(e: any) => {
+                e.preventDefault();
+              }}
+              onDragover={(e: any) => {
+                e.preventDefault();
+              }}
+              onDrop={(e: any) => {
+                let dropItem = e.dataTransfer.getData('text');
+                dropItem = dropItem ? JSON.parse(dropItem) : {};
+                // 判断是否有数据
+                if (dropItem.id) {
+                  eventGlobal.emit('onPrepareAddItem', {
+                    materialId: dropItem.id,
+                    coverImg: dropItem.coverImg,
+                    type: dropItem.type,
+                    title: dropItem.title,
+                    isCollect: dropItem.isCollect,
+                    isSelected: dropItem.isSelected,
+                    content: dropItem.content,
+                    removeFlag: false
+                  });
+                }
+              }}>
               {forms.coursewareList.length > 0 && (
                 <>
                   {forms.drag ? (
@@ -481,23 +507,29 @@ export default defineComponent({
                           return (
                             <div
                               data-id={item.id}
-                              class={[styles.itemBlock, 'row-nav']}>
-                              <CardType
-                                class={[styles.itemContent]}
-                                isShowCollect={false}
-                                offShelf={item.removeFlag ? true : false}
-                                onOffShelf={() => onRemove(item)}
-                                item={item}
-                              />
-                              <div class={styles.itemOperation}>
-                                <img
-                                  src={iconDelete}
-                                  class={styles.iconDelete}
-                                  onClick={(e: MouseEvent) => {
-                                    e.stopPropagation();
-                                    onDelete(item);
-                                  }}
+                              class={[
+                                styles.itemWrap,
+                                styles.itemBlock,
+                                'row-nav'
+                              ]}>
+                              <div class={styles.itemWrapBox}>
+                                <CardType
+                                  class={[styles.itemContent]}
+                                  isShowCollect={false}
+                                  offShelf={item.removeFlag ? true : false}
+                                  onOffShelf={() => onRemove(item)}
+                                  item={item}
                                 />
+                                <div class={styles.itemOperation}>
+                                  <img
+                                    src={iconDelete}
+                                    class={styles.iconDelete}
+                                    onClick={(e: MouseEvent) => {
+                                      e.stopPropagation();
+                                      onDelete(item);
+                                    }}
+                                  />
+                                </div>
                               </div>
                             </div>
                           );
@@ -507,20 +539,58 @@ export default defineComponent({
                   ) : (
                     <div class={styles.list}>
                       {forms.coursewareList.map((item: any) => (
-                        <CardType
-                          class={[styles.itemContent, 'handle']}
-                          isShowCollect={false}
-                          item={item}
-                          offShelf={item.removeFlag ? true : false}
-                          onOffShelf={() => onRemove(item)}
-                          disabledMouseHover={false}
-                          onClick={() => {
-                            if (item.type === 'IMG') return;
-                            forms.show = true;
-                            forms.item = item;
-                          }}
-                        />
+                        <div class={styles.itemWrap}>
+                          <div class={styles.itemWrapBox}>
+                            <CardType
+                              class={[styles.itemContent, 'handle']}
+                              isShowCollect={false}
+                              item={item}
+                              offShelf={item.removeFlag ? true : false}
+                              onOffShelf={() => onRemove(item)}
+                              disabledMouseHover={false}
+                              onClick={() => {
+                                if (item.type === 'IMG') return;
+                                forms.show = true;
+                                forms.item = item;
+                              }}
+                            />
+                          </div>
+                        </div>
                       ))}
+                      <div class={styles.itemWrap}>
+                        <div class={styles.itemWrapBox}>
+                          <div
+                            class={[
+                              styles.itemContent,
+                              styles.addMusicItem,
+                              'handle'
+                            ]}
+                            onClick={() => {
+                              // 直接跳转到制谱页面 (临时存储数据)
+                              sessionStorage.setItem(
+                                'notation-open-create',
+                                '1'
+                              );
+                              router.push('/notation');
+                            }}>
+                            <img src={iconAddMusic} />
+
+                            <p class={styles.addMusicName}>开始制谱</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </>
+              )}
+
+              {/* {!forms.loadingStatus && forms.coursewareList.length <= 0 && (
+                <TheEmpty description="暂无课件" />
+              )} */}
+              {forms.coursewareList.length <= 0 && (
+                <div class={styles.list}>
+                  <div class={styles.itemWrap}>
+                    <div class={styles.itemWrapBox}>
                       <div
                         class={[
                           styles.itemContent,
@@ -537,25 +607,6 @@ export default defineComponent({
                         <p class={styles.addMusicName}>开始制谱</p>
                       </div>
                     </div>
-                  )}
-                </>
-              )}
-
-              {/* {!forms.loadingStatus && forms.coursewareList.length <= 0 && (
-                <TheEmpty description="暂无课件" />
-              )} */}
-              {forms.coursewareList.length <= 0 && (
-                <div class={styles.list}>
-                  <div
-                    class={[styles.itemContent, styles.addMusicItem, 'handle']}
-                    onClick={() => {
-                      // 直接跳转到制谱页面 (临时存储数据)
-                      sessionStorage.setItem('notation-open-create', '1');
-                      router.push('/notation');
-                    }}>
-                    <img src={iconAddMusic} />
-
-                    <p class={styles.addMusicName}>开始制谱</p>
                   </div>
                 </div>
               )}
@@ -672,6 +723,8 @@ export default defineComponent({
                 forms.subjectId = item.subjectId;
                 forms.showAttendClass = false;
 
+                prepareStore.setClassGroupId(item.classGroupId);
+
                 checkSubjectIds();
                 // 声部切换时
                 eventGlobal.emit('onChangeClass', {

+ 4 - 0
src/views/prepare-lessons/components/lesson-main/index.tsx

@@ -20,6 +20,10 @@ export default defineComponent({
           value={prepareStore.getTabType}
           onUpdate:value={(val: string) => {
             prepareStore.setTabType(val);
+
+            // 重置编辑状态
+            prepareStore.setIsEditResource(false);
+            prepareStore.setIsEditTrain(false);
           }}>
           <NTabPane name="courseware" tab="课件" displayDirective="show">
             <Courseware />

+ 16 - 2
src/views/prepare-lessons/components/lesson-main/train/assign-homework.tsx

@@ -14,6 +14,7 @@ import { classGroupPage, lessonTrainingAdd } from '../../../api';
 import dayjs from 'dayjs';
 import { classGroupList } from '/src/views/home/api';
 import { gradeToCN } from '/src/utils/contants';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
 
 export default defineComponent({
   name: 'assign-homework',
@@ -27,7 +28,7 @@ export default defineComponent({
   emits: ['close', 'confirm'],
   setup(props, { emit }) {
     const message = useMessage();
-
+    const prepareStore = usePrepareStore();
     const forms = reactive({
       currentTime: dayjs(dayjs().format('YYYY-MM-DD')).valueOf(),
       id: null as any,
@@ -43,10 +44,12 @@ export default defineComponent({
     // 获取年级班级
     const getClassGroupList = async () => {
       try {
+        const defaultSelectClassGroupId = prepareStore.getClassGroupId;
+        console.log('defaultSelectClassGroupId:', defaultSelectClassGroupId);
         const { data } = await classGroupList({ removeZeroClass: true });
         const cList = data || [];
         const gradeList: any = [];
-        cList.forEach((item: any, index: number) => {
+        cList.forEach((item: any) => {
           const classList: any = [];
           item.classGroupList.forEach((i: any) => {
             classList.push({
@@ -54,6 +57,12 @@ export default defineComponent({
               value: i.id,
               lastStudy: i.lastStudy
             });
+
+            if (i.id === defaultSelectClassGroupId) {
+              console.log('id: ', defaultSelectClassGroupId);
+              forms.currentGradeNum = i.currentGradeNum;
+              forms.classGroupId = i.id;
+            }
           });
 
           gradeList.push({
@@ -63,6 +72,10 @@ export default defineComponent({
           });
         });
         forms.gradeList = gradeList;
+
+        if (forms.currentGradeNum) {
+          getClassList();
+        }
       } catch {
         //
       }
@@ -79,6 +92,7 @@ export default defineComponent({
         //
       }
     };
+
     const onSubmit = async () => {
       formsRef.value?.validate(async (err: any) => {
         if (err) {

+ 13 - 3
src/views/prepare-lessons/components/lesson-main/train/index.module.less

@@ -72,7 +72,7 @@
     }
 
     .n-base-selection-input {
-      padding-left: 8px;
+      padding-left: 8px !important;
     }
 
     .n-base-selection .n-base-selection-overlay {
@@ -116,7 +116,17 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  gap: 20px;
+  gap: 20px 2%;
+
+  &>div {
+    width: 49% !important;
+  }
+
+  .itemBlock {
+    &>div {
+      width: 100% !important;
+    }
+  }
 }
 
 .trainEditModal {
@@ -214,4 +224,4 @@
       }
     }
   }
-}
+}

+ 1 - 1
src/views/prepare-lessons/components/lesson-main/train/index.tsx

@@ -363,7 +363,7 @@ export default defineComponent({
                           offShelf={item.removeFlag ? true : false}
                           onOffShelf={() => onRemove(item)}
                           onEdit={(child: any) => {
-                            console.log('edit', child);
+                            // console.log('edit', child);
                             const { trainingConfigJson, id, musicId, ...res } =
                               child;
                             forms.editItem = {

+ 2 - 1
src/views/prepare-lessons/components/resource-main/components/resource-item/index.tsx

@@ -256,6 +256,7 @@ export default defineComponent({
                       isShowAdd
                       item={item}
                       isShowCollect={true}
+                      draggable
                       disabledMouseHover={false}
                       onClick={() => {
                         if (item.type === 'IMG') return;
@@ -263,7 +264,7 @@ export default defineComponent({
                         state.item = item;
                       }}
                       onCollect={(item: any) => onCollect(item)}
-                      isShowAddDisabled={!prepareStore.getIsEditResource}
+                      // isShowAddDisabled={!prepareStore.getIsEditResource}
                       onAdd={(item: any) => onAdd(item)}
                     />
                   ))}

+ 26 - 1
src/views/prepare-lessons/model/select-resources/select-item/index.module.less

@@ -18,7 +18,32 @@
     display: flex;
     flex-flow: row wrap;
     justify-content: flex-start;
-    gap: 22px;
+    gap: 22px 0;
+    margin-left: -12px;
+    margin-right: -12px;
+
+
+    .itemWrap {
+      width: calc(100% / 4);
+      padding-bottom: calc(100% / 4 * 0.73333);
+      position: relative;
+
+      .itemWrapBox {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        padding: 0 10px;
+      }
+    }
+
+    :global {
+      .card-section-container {
+        width: 100%;
+        height: 100%;
+      }
+    }
   }
 
   .list {

+ 18 - 14
src/views/prepare-lessons/model/select-resources/select-item/index.tsx

@@ -257,20 +257,24 @@ export default defineComponent({
               {state.tableList.length > 0 && (
                 <div class={styles.list}>
                   {state.tableList.map((item: any) => (
-                    <CardType
-                      isShowAdd
-                      item={item}
-                      isShowCollect={true}
-                      isShowAddDisabled={!prepareStore.getIsEditResource}
-                      onAdd={(item: any) => onAdd(item)}
-                      disabledMouseHover={false}
-                      onCollect={(item: any) => onCollect(item)}
-                      onClick={() => {
-                        if (item.type === 'IMG') return;
-                        state.show = true;
-                        state.item = item;
-                      }}
-                    />
+                    <div class={styles.itemWrap}>
+                      <div class={styles.itemWrapBox}>
+                        <CardType
+                          isShowAdd
+                          item={item}
+                          isShowCollect={true}
+                          isShowAddDisabled={!prepareStore.getIsEditResource}
+                          onAdd={(item: any) => onAdd(item)}
+                          disabledMouseHover={false}
+                          onCollect={(item: any) => onCollect(item)}
+                          onClick={() => {
+                            if (item.type === 'IMG') return;
+                            state.show = true;
+                            state.item = item;
+                          }}
+                        />
+                      </div>
+                    </div>
                   ))}
                 </div>
               )}

+ 7 - 6
src/views/prepare-lessons/model/subject-sync/index.module.less

@@ -35,24 +35,25 @@
 .subjectItem {
   .imgSection {
     position: relative;
-    padding: 7px;
+    // padding: 7px;
     border: 3px solid transparent;
     border-radius: 24px;
     line-height: 0;
+    overflow: hidden;
   }
 
   img {
     overflow: hidden;
     border-radius: 18px;
-    width: 120px;
-    height: 120px;
+    width: 127px;
+    height: 127px;
     object-fit: contain;
   }
 
   .iconSelect {
     position: absolute;
-    top: 11px;
-    right: 11px;
+    top: 8px;
+    right: 8px;
     border-radius: 0;
     width: 24px;
     height: 24px;
@@ -73,4 +74,4 @@
     font-weight: 600;
     color: #198CFE;
   }
-}
+}

+ 8 - 2
src/views/setting/index.tsx

@@ -5,6 +5,7 @@ import PersonInfo from './components/personInfo';
 import SchoolInfo from './components/schoolInfo/index';
 import { useUserStore } from '/src/store/modules/users';
 import { useRoute } from 'vue-router';
+import { eventGlobal } from '/src/utils';
 export default defineComponent({
   name: 'base-setting',
   setup(props, { emit, attrs }) {
@@ -13,11 +14,13 @@ export default defineComponent({
     const route = useRoute();
     if (route.query.activeTab) {
       activeTab.value = route.query.activeTab;
+      eventGlobal.emit('base-setting-emit', activeTab.value);
     }
     watch(
       () => route.query.activeTab,
       val => {
         activeTab.value = val;
+        eventGlobal.emit('base-setting-emit', val);
       }
     );
     return () => (
@@ -26,9 +29,12 @@ export default defineComponent({
           class={styles.customTabs}
           v-model:value={activeTab.value}
           size="large"
-          animated
+          // animated
           pane-wrapper-style="margin: 0 -4px"
-          pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
+          pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+          onUpdate:value={(val: any) => {
+            eventGlobal.emit('base-setting-emit', val);
+          }}>
           <NTabPane name="person" tab="个人信息">
             <PersonInfo></PersonInfo>
           </NTabPane>

+ 29 - 1
src/views/xiaoku-ai/index.module.less

@@ -61,14 +61,41 @@
 
 .content {
   flex: 1;
-  padding: 20px 36px 36px 36px;
+  // padding: 20px 36px 36px 36px;
+  padding: 0 6px 36px;
 
   &.loadingContent {
     min-height: 50vh;
   }
+
+  gap: 50px 0;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  margin-left: -12px;
+  margin-right: -12px;
+
+  .itemWrap {
+    width: calc(100% / 6);
+    padding-bottom: calc(100% / 6 * 0.909923);
+    position: relative;
+
+    .itemWrapBox {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0 12px;
+    }
+  }
 }
 
+// 214px
+// 223px  + 38
+
 .item {
+  margin: 0 auto;
   position: relative;
   width: 214px;
   cursor: pointer;
@@ -166,6 +193,7 @@
   .itemName {
     margin-top: 16px;
     font-size: 16px;
+    line-height: 22px;
     font-weight: 500;
     color: #333;
     text-align: center;

+ 37 - 37
src/views/xiaoku-ai/index.tsx

@@ -267,48 +267,48 @@ export default defineComponent({
         <NSpin show={data.loading}>
           <div
             class={[styles.content, data.loading ? styles.loadingContent : '']}>
-            {data.list.length > 0 ? (
-              <NSpace size={[50, 40]}>
-                {data.list.map((item: any, index: number) => {
+            {data.list.length > 0
+              ? data.list.map((item: any, index: number) => {
                   return (
-                    <div
-                      class={styles.item}
-                      key={`item-${index}`}
-                      onClick={() => {
-                        sessionStorage.setItem(
-                          'musicSubjectList',
-                          JSON.stringify(item.subjects)
-                        );
-                        router.push({
-                          path: '/xiaoku-music',
-                          query: {
-                            id: item.id,
-                            name: item.name
-                          }
-                        });
-                      }}>
-                      <div class={styles.cover}>
-                        <div class={styles.itemImg}>
-                          <div class={styles.itemBg}></div>
-                          <NImage
-                            objectFit="cover"
-                            src={item.coverImg}
-                            lazy
-                            previewDisabled={true}
-                            onLoad={e => {
-                              (e.target as any).dataset.loaded = 'true';
-                            }}
-                          />
+                    <div class={styles.itemWrap}>
+                      <div class={styles.itemWrapBox}>
+                        <div
+                          class={styles.item}
+                          key={`item-${index}`}
+                          onClick={() => {
+                            sessionStorage.setItem(
+                              'musicSubjectList',
+                              JSON.stringify(item.subjects)
+                            );
+                            router.push({
+                              path: '/xiaoku-music',
+                              query: {
+                                id: item.id,
+                                name: item.name
+                              }
+                            });
+                          }}>
+                          <div class={styles.cover}>
+                            <div class={styles.itemImg}>
+                              <div class={styles.itemBg}></div>
+                              <NImage
+                                objectFit="cover"
+                                src={item.coverImg}
+                                lazy
+                                previewDisabled={true}
+                                onLoad={e => {
+                                  (e.target as any).dataset.loaded = 'true';
+                                }}
+                              />
+                            </div>
+                          </div>
+                          <div class={styles.itemName}>{item.name}</div>
                         </div>
                       </div>
-                      <div class={styles.itemName}>{item.name}</div>
                     </div>
                   );
-                })}
-              </NSpace>
-            ) : (
-              ''
-            )}
+                })
+              : ''}
             {!data.loading && data.list.length <= 0 && <TheEmpty></TheEmpty>}
           </div>
         </NSpin>

+ 56 - 28
src/views/xiaoku-music/index.module.less

@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  // height: 100%;
+  height: 100%;
 
   .iconBack {
     width: 36px;
@@ -68,7 +68,7 @@
   height: 100%;
   background: #DDF2FF;
   border-radius: 20px;
-  max-height: 90vh;
+  // max-height: 90vh;
 }
 
 .tools {
@@ -95,51 +95,80 @@
   display: flex;
   padding: 0 20px 20px;
   overflow: hidden;
+  gap: 0 32px;
 }
 
 .musicList {
+  // width: 512px;
+  // display: flex;
+  // // height: 100%;
+  // overflow-x: hidden;
+  // overflow-y: auto;
+  // // min-width: 330px;
+  // // max-height: 100vh;
+  // min-height: 71vh;
+  // margin-right: 32px;
+  background-color: #fff;
+  border-radius: 16px;
+
   width: 512px;
-  display: flex;
-  // height: 100%;
+  min-width: 294px;
+  height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
-  // min-width: 330px;
-  // max-height: 100vh;
-  min-height: 71vh;
-  margin-right: 32px;
-  background-color: #fff;
-  border-radius: 16px;
+  min-width: 330Px;
+  // position: relative;
+  // z-index: 1;
+
+  // &::before {
+  //   content: ' ';
+  //   position: absolute;
+  //   z-index: 0;
+  //   left: 0;
+  //   top: 0;
+  //   width: 512px;
+  //   min-width: 294px;
+  //   height: var(--xiaoku-music-height);
+  //   background-color: #fff;
+  //   border-radius: 16px;
+  // }
 
   &::-webkit-scrollbar {
     width: 0;
     display: none;
   }
 
+
+
   .wrapList {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    // width: 512px;
-    // min-width: 294px;
-    // min-height: 100%;
+    // display: flex;
+    // flex-direction: column;
+    // width: 100%;
+
+    // position: relative;
+    // z-index: 1;
+    width: 512px;
+    min-width: 294px;
+    min-height: 100%;
     // background: #fff;
-    // border-radius: 16px;
+    border-radius: 16px;
+
   }
 
   .empty {
     display: flex;
     align-items: center;
     justify-content: center;
-    // height: 50vh;
-    height: 100%;
+    height: 50vh;
+    // height: 100%;
   }
 }
 
 .itemContainer {
   width: 100%;
-  // border-radius: 16px;
+  border-radius: 16px;
   padding: 4px 8px;
-  background-color: #fff;
+  // background-color: #fff;
 
   &:first-child {
     padding-top: 8px;
@@ -289,18 +318,17 @@
   }
 
   .goBtn {
-    position: fixed;
-    left: 65%;
-    // bottom: 46px;
+    position: absolute;
+    left: 50%;
     bottom: 46px;
     transform: translateX(-50%);
     height: 70px;
     cursor: pointer;
     transition: all .2s ease-in;
 
-    &.goBtnBottom {
-      bottom: 154px;
-    }
+    // &.goBtnBottom {
+    //   bottom: 154px;
+    // }
   }
 
   .favitor {
@@ -378,4 +406,4 @@
     background-color: #fff;
     border-radius: 16px;
   }
-}
+}

+ 17 - 5
src/views/xiaoku-music/index.tsx

@@ -46,6 +46,7 @@ import { useUserStore } from '/src/store/modules/users';
 import Musicguide from '@/custom-plugins/guide-page/music-guide';
 import TheEmpty from '/src/components/TheEmpty';
 import { state } from '/src/state';
+import { useResizeObserver } from '@vueuse/core';
 export default defineComponent({
   name: 'XiaokuMusic',
   setup() {
@@ -139,6 +140,20 @@ export default defineComponent({
     };
 
     onMounted(async () => {
+      // musicList-container
+      useResizeObserver(
+        document.querySelector('.musicList-container') as HTMLElement,
+        (entries: any) => {
+          const entry = entries[0];
+          const { height } = entry.contentRect;
+          console.log(height, 'height - 11');
+          document.documentElement.style.setProperty(
+            '--xiaoku-music-height',
+            height + 'px'
+          );
+        }
+      );
+
       getSubjects();
       await getList();
       const obv = new IntersectionObserver(entries => {
@@ -299,7 +314,7 @@ export default defineComponent({
             </div>
 
             <div class={styles.contentWrap}>
-              <div class={styles.musicList}>
+              <div class={[styles.musicList, 'musicList-container']}>
                 <div class={styles.wrapList}>
                   {data.list.map((item: IMusicItem, index) => {
                     return (
@@ -407,10 +422,7 @@ export default defineComponent({
                   style={{
                     display: activeItem.value.id ? '' : 'none'
                   }}
-                  class={[
-                    styles.goBtn,
-                    data.showPlayer ? styles.goBtnBottom : ''
-                  ]}
+                  class={[styles.goBtn]}
                   src={icon_goXiaoku}
                   onClick={() => {
                     handleChangeAudio('pause');