添加作业和样式问题

dev-dist/sw.js

@@ -67,7 +67,7 @@ if (!self.define) {
     });
   };
 }
-define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
+define(['./workbox-5199072c'], (function (workbox) { 'use strict';
 
   self.skipWaiting();
   workbox.clientsClaim();
@@ -82,7 +82,7 @@ define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.ebto14d5ab8"
+    "revision": "0.84ehkv5fc8g"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

dev-dist/workbox-5199072c.js

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

public/version.json

@@ -1 +1 @@
-{"version":1715424448195}
+{"version":1715654012706}

src/hooks/useDrag/dragbom.d.ts

@@ -0,0 +1,6 @@
+
+// dragbom.d.ts
+declare module '@/hooks/useDrag/dragbom' {
+  // 在这里导出模块的类型
+  export default any; // 或者更具体的类型
+}

src/views/attend-class/model/train-type/index.module.less

@@ -1,428 +1,428 @@
-.trainType {
-  display: inline-block;
-  width: 462px;
-  background: linear-gradient(360deg, #DBF1FF 0%, #E7F9FF 100%);
-  border-radius: 13px;
-  position: relative;
-  overflow: hidden;
-  border: 1px solid #CAE4F4;
-  transition: all .2s ease;
-
-  .overflowBg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 9;
-    padding: 20px;
-    cursor: move;
-  }
-
-  &:hover {
-    transition: all .2s ease;
-    border-color: #007afe;
-    transform: scale(1.01);
-
-    .iconDelete {
-      opacity: 1;
-      visibility: visible;
-      transition: all .2s ease;
-    }
-
-    .trainDisabled {
-      .iconDelete {
-        display: none;
-      }
-    }
-  }
-}
-
-.train-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-
-  .title {
-    display: flex;
-    align-items: center;
-    font-size: max(18px, 13Px);
-    font-weight: 600;
-    color: #131415;
-
-    .title-tag {
-      width: 28px;
-      height: 28px;
-      margin-right: 8px;
-    }
-
-    .title-text {
-      max-width: 200px;
-    }
-  }
-
-  .btn {
-    padding: 0 12px;
-    height: 32px;
-    background: linear-gradient(270deg, #23c3ff 0%, #007afe 100%);
-    font-size: max(16px, 12Px);
-    font-weight: 600;
-    color: #ffffff;
-    line-height: 22px;
-    --n-border: 0 !important;
-    --n-border-hover: 0 !important;
-    --n-border-pressed: 0 !important;
-    --n-border-focus: 0 !important;
-
-    &:hover,
-    &:active,
-    &:visited,
-    &:focus {
-      border: 0;
-      color: #fff;
-    }
-
-    img {
-      margin-left: 10px;
-      width: 8px;
-      height: 10px;
-    }
-  }
-
-  // .iconDelete {
-  //   position: absolute;
-  //   right: 0px;
-  //   top: 0px;
-  //   z-index: 11;
-  //   display: flex;
-  //   height: 30px;
-  //   padding: 0;
-
-  //   img {
-  //     height: 30px;
-  //     width: 30px;
-  //   }
-  // }
-}
-
-.train-content {
-  height: 140px;
-  background: #ffffff;
-  position: relative;
-  overflow: hidden;
-  transition: all 0.2s ease;
-  cursor: pointer;
-
-  &.trainDisabled {
-    cursor: default;
-    height: 238px;
-  }
-
-  :global {
-    .n-image {
-      width: 100%;
-      height: inherit;
-      // transition: all 0.2s ease;
-
-      img {
-        width: 100%;
-        height: fit-content;
-      }
-    }
-  }
-
-  .preview {
-    position: absolute;
-    opacity: 0;
-    visibility: hidden;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    cursor: pointer;
-
-    .previewBtn {
-      background: #fff;
-      height: 44px;
-      padding: 0 44px;
-      border-radius: 12px;
-    }
-  }
-
-  .disPreview {
-    position: absolute;
-    // opacity: 0;
-    // visibility: hidden;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.7);
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-
-    .disPreviewDivide {
-      font-size: max(15px, 13Px);
-      color: #fff;
-    }
-
-    :global {
-      .n-progress-graph-circle-rail {
-        stroke: #8b8b8b !important;
-      }
-
-      .n-progress {
-        width: max(120px, 105Px) !important;
-      }
-    }
-
-    .BProgress {
-      color: #fff;
-      margin-top: -4px;
-
-
-      h4 {
-        font-size: max(28px, 20Px);
-        font-family: 'DINA';
-        text-align: center;
-
-        span {
-          font-size: max(13px, 11Px);
-          font-weight: 400;
-          padding-left: 4px;
-
-        }
-      }
-
-      p {
-        font-size: max(14px, 12Px);
-      }
-    }
-  }
-
-  &:hover {
-    .preview {
-      opacity: 1;
-      visibility: visible;
-      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    }
-
-    // :global {
-    //   .n-image {
-    //     transform: scale(1.05);
-    //     transition: all 0.2s ease;
-    //   }
-    // }
-  }
-
-  .iconDelete {
-    position: absolute;
-    top: 8px;
-    right: 10px;
-    z-index: 98;
-    opacity: 0;
-    visibility: hidden;
-    transition: all .2s ease;
-    width: 27px;
-    height: 27px;
-    cursor: pointer;
-  }
-}
-
-.train-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px;
-
-  .type {
-    gap: 8px 10px !important;
-  }
-
-  .title-text {
-    width: 150px;
-  }
-
-
-  .operation {
-    display: flex;
-    height: 34px;
-    padding: 0;
-    border-radius: 50%;
-
-    img {
-      height: 36px;
-      width: 36px;
-    }
-
-    .iconEdit {
-      display: inline-block;
-      width: 34px;
-      height: 34px;
-      background: url('./images/icon-edit.png') no-repeat center;
-      background-size: contain;
-
-      &:hover {
-        background: url('./images/icon-edit-active.png') no-repeat center;
-        background-size: contain;
-      }
-    }
-  }
-}
-
-.trainInfo {
-  max-width: 82%;
-
-  .trainName {
-    display: flex;
-    align-items: center;
-    font-size: max(13px, 12Px);
-    font-family: PingFangSC, PingFang SC;
-    font-weight: 600;
-    color: #131415;
-    line-height: 21px;
-  }
-
-  .type {
-    padding: 0 9px;
-    display: inline-block;
-    background-color: #ccc;
-    border-radius: 5px;
-    font-size: max(12px, 10Px);
-    font-weight: 600;
-    color: #FFFFFF;
-    height: 18Px;
-    line-height: 18Px;
-    margin-right: 7px;
-    flex-shrink: 0;
-  }
-
-  .PRACTICE {
-    background: linear-gradient(270deg, #23C3FF 0%, #007AFE 100%);
-  }
-
-  .EVALUATION {
-    background: linear-gradient(270deg, #FF7B57 0%, #FF3460 100%);
-  }
-
-  .tagList {
-    display: flex;
-    align-items: center;
-    padding-top: 5px;
-    font-size: 11Px;
-    font-weight: 400;
-    color: rgba(0, 0, 0, 0.5);
-
-    :global {
-      .n-divider {
-        --n-color: rgba(0, 0, 0, 0.5) !important;
-        height: 11Px;
-        margin: 0 5px !important;
-      }
-    }
-  }
-}
-
-
-// .evaluationType {
-//   background: #fff0eb;
-
-//   .btn {
-//     background: linear-gradient(270deg, #ff7b57 0%, #ff3460 100%);
-//   }
-
-//   .train-content {
-//     border: 1px solid rgba(249, 45, 83, 0.5);
-//   }
-
-//   .train-footer {
-//     :global {
-//       .n-tag {
-//         --n-border: none !important;
-//         color: #f92d53;
-//         border: 1px solid #f92d53;
-
-//       }
-//     }
-//   }
-// }
-
-.offShelfBg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 14px;
-  background-color: rgba(0, 0, 0, 0.7);
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-
-  .offShelfTips {
-    font-size: 22px;
-    font-weight: 600;
-    color: #ffffff;
-    line-height: 30px;
-    padding-bottom: 32px;
-  }
-
-  .offShelfBtn {
-    height: 44px;
-    border-radius: 10px;
-    min-width: 124px;
-  }
-}
-
-
-.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;
-      }
-    }
-  }
-}
-
-.reportModel {
-  width: 1030px;
-  overflow: hidden;
-}
+.trainType {
+  display: inline-block;
+  width: 462px;
+  background: linear-gradient(360deg, #DBF1FF 0%, #E7F9FF 100%);
+  border-radius: 13px;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid #CAE4F4;
+  transition: all .2s ease;
+
+  .overflowBg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9;
+    padding: 20px;
+    cursor: move;
+  }
+
+  &:hover {
+    transition: all .2s ease;
+    border-color: #007afe;
+    transform: scale(1.01);
+
+    .iconDelete {
+      opacity: 1;
+      visibility: visible;
+      transition: all .2s ease;
+    }
+
+    .trainDisabled {
+      .iconDelete {
+        display: none;
+      }
+    }
+  }
+}
+
+.train-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+
+  .title {
+    display: flex;
+    align-items: center;
+    font-size: max(18px, 13Px);
+    font-weight: 600;
+    color: #131415;
+
+    .title-tag {
+      width: 28px;
+      height: 28px;
+      margin-right: 8px;
+    }
+
+    .title-text {
+      max-width: 200px;
+    }
+  }
+
+  .btn {
+    padding: 0 12px;
+    height: 32px;
+    background: linear-gradient(270deg, #23c3ff 0%, #007afe 100%);
+    font-size: max(16px, 12Px);
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 22px;
+    --n-border: 0 !important;
+    --n-border-hover: 0 !important;
+    --n-border-pressed: 0 !important;
+    --n-border-focus: 0 !important;
+
+    &:hover,
+    &:active,
+    &:visited,
+    &:focus {
+      border: 0;
+      color: #fff;
+    }
+
+    img {
+      margin-left: 10px;
+      width: 8px;
+      height: 10px;
+    }
+  }
+
+  // .iconDelete {
+  //   position: absolute;
+  //   right: 0px;
+  //   top: 0px;
+  //   z-index: 11;
+  //   display: flex;
+  //   height: 30px;
+  //   padding: 0;
+
+  //   img {
+  //     height: 30px;
+  //     width: 30px;
+  //   }
+  // }
+}
+
+.train-content {
+  height: 140px;
+  background: #ffffff;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.2s ease;
+  cursor: pointer;
+
+  &.trainDisabled {
+    cursor: default;
+    height: 238px;
+  }
+
+  :global {
+    .n-image {
+      width: 100%;
+      height: inherit;
+      // transition: all 0.2s ease;
+
+      img {
+        width: 100%;
+        height: fit-content;
+      }
+    }
+  }
+
+  .preview {
+    position: absolute;
+    opacity: 0;
+    visibility: hidden;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    cursor: pointer;
+
+    .previewBtn {
+      background: #fff;
+      height: 44px;
+      padding: 0 44px;
+      border-radius: 12px;
+    }
+  }
+
+  .disPreview {
+    position: absolute;
+    // opacity: 0;
+    // visibility: hidden;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+    .disPreviewDivide {
+      font-size: max(15px, 13Px);
+      color: #fff;
+    }
+
+    :global {
+      .n-progress-graph-circle-rail {
+        stroke: #8b8b8b !important;
+      }
+
+      .n-progress {
+        width: max(120px, 105Px) !important;
+      }
+    }
+
+    .BProgress {
+      color: #fff;
+      margin-top: -4px;
+
+
+      h4 {
+        font-size: max(28px, 20Px);
+        font-family: 'DINA';
+        text-align: center;
+
+        span {
+          font-size: max(13px, 11Px);
+          font-weight: 400;
+          padding-left: 4px;
+
+        }
+      }
+
+      p {
+        font-size: max(14px, 12Px);
+      }
+    }
+  }
+
+  &:hover {
+    .preview {
+      opacity: 1;
+      visibility: visible;
+      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+
+    // :global {
+    //   .n-image {
+    //     transform: scale(1.05);
+    //     transition: all 0.2s ease;
+    //   }
+    // }
+  }
+
+  .iconDelete {
+    position: absolute;
+    top: 8px;
+    right: 10px;
+    z-index: 98;
+    opacity: 0;
+    visibility: hidden;
+    transition: all .2s ease;
+    width: 27px;
+    height: 27px;
+    cursor: pointer;
+  }
+}
+
+.train-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+
+  .type {
+    gap: 8px 10px !important;
+  }
+
+  .title-text {
+    width: 150px;
+  }
+
+
+  .operation {
+    display: flex;
+    height: 34px;
+    padding: 0;
+    border-radius: 50%;
+
+    img {
+      height: 36px;
+      width: 36px;
+    }
+
+    .iconEdit {
+      display: inline-block;
+      width: 34px;
+      height: 34px;
+      background: url('./images/icon-edit.png') no-repeat center;
+      background-size: contain;
+
+      &:hover {
+        background: url('./images/icon-edit-active.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+  }
+}
+
+.trainInfo {
+  max-width: 82%;
+
+  .trainName {
+    display: flex;
+    align-items: center;
+    font-size: max(13px, 12Px);
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 600;
+    color: #131415;
+    line-height: 21px;
+  }
+
+  .type {
+    padding: 0 9px;
+    display: inline-block;
+    background-color: #ccc;
+    border-radius: 5px;
+    font-size: max(12px, 10Px);
+    font-weight: 600;
+    color: #FFFFFF;
+    height: 18Px;
+    line-height: 18Px;
+    margin-right: 7px;
+    flex-shrink: 0;
+  }
+
+  .PRACTICE {
+    background: linear-gradient(270deg, #23C3FF 0%, #007AFE 100%);
+  }
+
+  .EVALUATION {
+    background: linear-gradient(270deg, #FF7B57 0%, #FF3460 100%);
+  }
+
+  .tagList {
+    display: flex;
+    align-items: center;
+    padding-top: 5px;
+    font-size: 11Px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.5);
+
+    :global {
+      .n-divider {
+        --n-color: rgba(0, 0, 0, 0.5) !important;
+        height: 11Px;
+        margin: 0 5px !important;
+      }
+    }
+  }
+}
+
+
+// .evaluationType {
+//   background: #fff0eb;
+
+//   .btn {
+//     background: linear-gradient(270deg, #ff7b57 0%, #ff3460 100%);
+//   }
+
+//   .train-content {
+//     border: 1px solid rgba(249, 45, 83, 0.5);
+//   }
+
+//   .train-footer {
+//     :global {
+//       .n-tag {
+//         --n-border: none !important;
+//         color: #f92d53;
+//         border: 1px solid #f92d53;
+
+//       }
+//     }
+//   }
+// }
+
+.offShelfBg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 14px;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .offShelfTips {
+    font-size: 22px;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 30px;
+    padding-bottom: 32px;
+  }
+
+  .offShelfBtn {
+    height: 44px;
+    border-radius: 10px;
+    min-width: 124px;
+  }
+}
+
+
+.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;
+      }
+    }
+  }
+}
+
+.reportModel {
+  width: 1030px;
+  overflow: hidden;
+}

src/views/classList/index.module.less

@@ -1,820 +1,891 @@
-@img: '../setting/images';
-@currentimg './images'
-
-.listWrap {
-  padding: 32px;
-  background-color: #fff;
-  border-radius: 20px;
-
-
-}
-
-.infoListWrap {
-  min-height: calc(100vh - 150px) !important
-}
-
-.addBtnIcon {
-  width: 13Px !important;
-  height: 14Px !important;
-}
-
-.addBtn {
-  margin-bottom: 30px;
-  // height: 34Px !important;
-  background: #198cfe !important;
-  border-radius: 7Px !important;
-  // line-height: 21Px !important;
-  padding: 0 18Px !important;
-  // font-size: 13Px !important;
-  font-weight: 600 !important;
-}
-
-.btnGroup {
-  padding: 40px 0;
-
-  :global {
-    .n-button {
-      height: 47px;
-      min-width: 156px;
-    }
-  }
-}
-
-.resetStudentWrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 40px;
-
-  .studentTransfer {
-    position: relative;
-
-    .showGradeSection {
-      display: flex;
-      align-items: center;
-    }
-
-    .smallArrow {
-      right: 166px;
-      // top: 15px;
-      // position: absolute;
-      width: 12px;
-      height: 12px;
-      cursor: pointer;
-      z-index: 1000;
-    }
-
-    :global {
-      .n-legacy-transfer {
-        width: 634px;
-        min-height: 340px;
-
-        .n-legacy-transfer-list {
-          &:nth-child(1) {
-            .n-legacy-transfer-list-header__header {
-              &::after {
-                content: '（当前班级）';
-                font-size: 12px;
-                color: #777;
-                font-weight: 400;
-              }
-            }
-          }
-        }
-      }
-
-      .n-legacy-transfer-list-item {
-        &:hover {
-          background-color: #fff !important;
-        }
-      }
-
-      .n-legacy-transfer-list__border {
-        border: none;
-      }
-
-      .n-legacy-transfer-list-header__extra {
-        display: none;
-      }
-
-      .n-legacy-transfer-list-header {
-        display: flex;
-        flex-direction: column;
-        background: #e8f2ff;
-        align-items: flex-start;
-        height: auto;
-      }
-
-      .n-legacy-transfer-list-header__checkbox {
-        order: 2;
-        padding: 0 !important;
-
-        &::after {
-          content: '全选';
-          margin-left: 5px;
-        }
-
-        margin-top: 8px;
-      }
-
-      .n-legacy-transfer-list-header__header {
-        width: 100%;
-        padding: 14px 0;
-        font-size: 16px;
-        font-weight: 600 !important;
-        color: #131415;
-        line-height: 22px;
-        order: 1;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-      }
-
-      .n-legacy-transfer-list {
-        padding: 0 16px;
-        min-height: 340px;
-        background: #e8f2ff;
-        border-radius: 16px 16px 0 0;
-        width: 277px;
-
-        .n-legacy-transfer-filter {
-          background: #e8f2ff;
-          padding: 8px 0px 0px;
-          border-bottom: none;
-        }
-
-        .n-input {
-          border-radius: 8px;
-
-          .n-input-wrapper {
-            .n-input__border {
-              border-radius: 8px;
-            }
-
-            .n-input__input-el {
-              height: 41px;
-              line-height: 41px;
-              background: #ffffff;
-            }
-          }
-        }
-      }
-
-      // .n-legacy-transfer-gap {
-      //   width: 80px;
-      //   .n-button {
-      //     width: 34px;
-      //     height: 34px;
-      //     border-radius: 8px;
-      //     .n-button__state-border {
-      //       border: none !important;
-      //     }
-      //     &:nth-child(1) {
-      //       transform: rotate(180deg);
-      //       position: relative;
-      //       &:hover {
-      //         &::after {
-      //           background: url('@{currentimg}/transArrowActive.png') no-repeat;
-      //           top: 0;
-      //           left: 0;
-
-      //           background-size: 34px 34px;
-      //         }
-      //       }
-      //       &::after {
-      //         position: absolute;
-      //         content: '';
-      //         width: 34px;
-      //         height: 34px;
-      //         background-color: black;
-      //         top: 0;
-      //         left: 0;
-      //         background: url('@{currentimg}/transArrrow.png') no-repeat;
-      //         background-size: 34px 34px;
-      //         z-index: 100;
-      //       }
-      //     }
-      //     &:nth-child(2) {
-      //       position: relative;
-      //       &:hover {
-      //         &::after {
-      //           background: url('@{currentimg}/transArrowActive.png') no-repeat;
-      //           top: 0;
-      //           left: 0;
-
-      //           background-size: 34px 34px;
-      //         }
-      //       }
-      //       &::after {
-      //         position: absolute;
-      //         content: '';
-      //         width: 100%;
-      //         height: 100%;
-      //         background-color: black;
-      //         top: 0;
-      //         left: 0;
-      //         background: url('@{img}/transArrrow.png') no-repeat;
-      //         background-size: 34px 34px;
-      //         z-index: 100;
-      //       }
-      //     }
-      //   }
-      // }
-    }
-
-    .studentTransferBottom {
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-
-      .bottom {
-        padding: 0 16px;
-
-        width: 277px;
-        background-color: #e8f2ff;
-
-        border-radius: 0 0 8px 8px;
-
-        .bottomWrap {
-          padding: 14px 0;
-          border-top: 1px solid rgba(0, 0, 0, 0.06);
-        }
-      }
-    }
-  }
-}
-
-.studentTransferList {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  .listCore {
-    .searchInput {
-      --n-border: 0 !important;
-    }
-  }
-
-  .studentLeft,
-  .studentRight {
-    padding: 14px 16px;
-    width: 277px;
-
-    background: #e8f2ff;
-    border-radius: 16px;
-
-    .listTop {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding-bottom: 14px;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-      font-size: max(16px, 13Px);
-      font-weight: 600;
-      color: #131415;
-      line-height: 22px;
-
-      span {
-        color: #777;
-        font-weight: 400;
-        font-size: max(12px, 12Px);
-      }
-    }
-
-    .chioseCheckBox {
-      padding: 4px 2px;
-      font-size: 16px;
-      font-weight: 400;
-      color: #131415;
-    }
-  }
-
-  .studentLeft {
-    background-color: #F5F6FA;
-  }
-
-  .chioseBox {
-    width: 80px;
-    height: 389px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    .chioseBtn {
-      cursor: pointer;
-      width: 34px;
-      height: 34px;
-      border-radius: 8px;
-      background: url('./images/transArrrow.png') no-repeat;
-      background-size: 34px 34px;
-
-      &:hover {
-        background: url('./images/transArrowActive.png') no-repeat;
-        background-size: 34px 34px;
-      }
-    }
-
-    .chioseBtnRight {
-      transform: rotate(180deg);
-      margin-bottom: 23px;
-    }
-  }
-
-  .chioseCheckAllBox {
-    margin-top: 8px !important;
-    margin-bottom: 14px !important;
-  }
-
-  .bottom {
-    padding-top: max(12px, 12Px);
-    border-top: 1px solid rgba(0, 0, 0, 0.06);
-  }
-}
-
-.addClass {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 50px;
-}
-
-.listWrap {
-  min-height: 100%;
-  padding: 32px;
-  background-color: #fff;
-  border-radius: 20px;
-
-  .customTabs {
-    :global {
-      .n-tabs-tab--active {
-        font-size: max(18px, 14Px) !important;
-
-        font-weight: 600 !important;
-        color: #131415 !important;
-      }
-
-      .n-tabs-tab {
-        font-size: max(18px, 14Px) !important;
-        padding: 8px 0 !important;
-        font-weight: 400;
-        min-width: 50px;
-        color: #8b8d98;
-
-        &:hover {
-          color: #198cfe !important;
-        }
-      }
-
-      .n-tabs-bar {
-        // background-color: red !important;
-        width: 50px !important;
-        height: 5px !important;
-        background: url('@{img}/barIcon.png') no-repeat;
-        background-size: 50px 5px;
-      }
-
-      .n-tab-pane {
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-      }
-    }
-  }
-
-  :global {
-    .n-cascader {
-      width: 100% !important;
-      min-width: 180px !important;
-    }
-  }
-}
-
-.indDot,
-.endDot {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.indDot {
-  span {
-    border-radius: 50%;
-    width: 8px;
-    height: 8px;
-    background: #198cfe;
-    margin-right: 8px;
-  }
-}
-
-.endDot {
-  opacity: 0.7;
-  color: #aaaaaa;
-
-  span {
-    border-radius: 50%;
-    width: 8px;
-    height: 8px;
-    background: #aaaaaa;
-    margin-right: 8px;
-  }
-}
-
-.attendClassModal {
-  width: 1100px;
-
-  :global {
-    .n-select-menu {
-      --n-height: calc(var(--n-option-height) * 5.6) !important;
-    }
-  }
-}
-
-.teacherList {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 32px;
-
-  .teacherHeader {
-    width: 100px;
-    height: 100px;
-    padding: 4px;
-    border-radius: 99px;
-    background: linear-gradient(228deg,
-        rgba(2, 186, 255, 1),
-        rgba(0, 122, 254, 1));
-    margin-right: 20px;
-
-    .teacherHeaderBorder {
-      width: 100%;
-      height: 100%;
-      background: #fff;
-      border-radius: 99px;
-      overflow: hidden;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      padding: 4px;
-    }
-  }
-
-  .teacherHeaderImg {
-    width: 84px;
-    height: 84px;
-    border-radius: 50%;
-    overflow: hidden;
-  }
-
-  .workafterInfo {
-    h4 {
-      font-size: 22px;
-      line-height: 30px;
-      font-weight: 600;
-      color: #131415;
-      margin-bottom: 12px;
-    }
-
-    p {
-      font-size: max(16px, 12Px);
-      line-height: 22px;
-      color: #777;
-
-      span {
-        color: #ea4132;
-      }
-    }
-  }
-}
-
-.isok {
-  font-weight: 600;
-  color: #333333;
-}
-
-.ison {
-  font-weight: 600;
-  color: #ea4132;
-}
-
-.nosub {
-  font-weight: 600;
-  color: #aaa;
-}
-
-.TrainDataItem {
-  margin-bottom: 20px;
-
-  .TrainDataItemTitle {
-    text-align: left;
-    font-size: max(13px, 11Px);
-    font-weight: 400;
-    color: #131415;
-    line-height: 18px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    span {
-      font-family: 'DINA';
-      font-size: max(26px, 18Px);
-      font-weight: 600;
-      color: #131415;
-      line-height: 28px;
-    }
-  }
-
-  .TrainDataItemsubTitle {
-    margin-top: 4px;
-    text-align: left;
-    font-size: max(14px, 11Px);
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #777777;
-    line-height: 18px;
-  }
-}
-
-.studentGender {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  img {
-    margin-left: 11px;
-    width: 10px;
-    height: 20px;
-  }
-}
-
-.chioseModel {
-  width: 413px;
-
-  :global {
-    .n-select {
-      width: 100%;
-      min-width: 180px;
-
-      .n-base-selection-label {
-        height: 43px;
-        line-height: 43px;
-      }
-
-      .n-base-selection__border {
-        border-radius: 8px;
-        overflow: hidden;
-      }
-
-      .n-base-selection__state-border {
-        border-radius: 8px;
-        overflow: hidden;
-      }
-    }
-
-    .n-card-header {
-      position: relative;
-      padding: 20px 18px;
-      text-align: center;
-      // background: #F5F6FA;
-      font-size: 22px;
-      font-weight: 600;
-      color: #131415;
-      line-height: 30px;
-    }
-
-    .n-card-header__close {
-      position: absolute;
-      right: 18px;
-    }
-
-    .n-card__content {
-      // padding: 28px;
-      padding: 30px;
-    }
-  }
-
-  .updateBtnGroup {
-    padding: 0;
-    justify-content: center !important;
-
-    :global {
-      .n-button {
-        height: 48px !important;
-        min-width: 156px;
-      }
-    }
-  }
-}
-
-.wordDetailModel {
-  width: 1012px;
-}
-
-.trainingDetails {
-  padding: 24px 0 32px;
-
-  .studentList {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-bottom: 24px;
-    justify-content: space-between;
-    border-bottom: 1px solid #f2f2f2;
-    // padding-bottom: 18px;
-    padding: 0 32px 18px;
-
-    .studentHeaderWrap {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      .studentHeader {
-        width: 66px;
-        height: 66px;
-        padding: 2px;
-        border-radius: 99px;
-        background: linear-gradient(228deg,
-            rgba(2, 186, 255, 1),
-            rgba(0, 122, 254, 1));
-        margin-right: 16px;
-
-        .studentHeaderBorder {
-          width: 100%;
-          height: 100%;
-          background: #fff;
-          border-radius: 99px;
-          overflow: hidden;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          justify-content: center;
-          padding: 4px;
-        }
-      }
-    }
-
-    .workStatus {
-      width: 87px;
-      height: 87px;
-    }
-
-    .studentHeaderImg {
-      width: 66px;
-      height: 66px;
-      border-radius: 50%;
-      overflow: hidden;
-    }
-
-    .workafterInfo {
-      h4 {
-        font-size: max(22px, 16Px);
-        line-height: 30px;
-        line-height: 30px;
-        font-weight: 600;
-        color: #131415;
-        margin-bottom: 6px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        .workafterInfoDot {
-          width: 52px;
-          height: 22px;
-          background: #ff8a32;
-          border-radius: 13px 4px 13px 4px;
-          font-size: max(14px, 11Px);
-          font-weight: 600;
-          color: #ffffff;
-          line-height: 22px;
-          text-align: center;
-          margin-left: 8px;
-        }
-
-        .workafterInfoDot.workafterTeacherInfoDot {
-          background: #198cfe;
-        }
-      }
-
-      p {
-        font-size: max(16px, 12Px);
-        line-height: 22px;
-        color: #777;
-
-        span {
-          color: #ea4132;
-        }
-      }
-    }
-  }
-
-  .commentBtnGroup {
-    background-color: #E8F4FF !important;
-    margin-left: 32px;
-    margin-bottom: 20px;
-    --n-border: 1px solid #198CFE !important;
-    --n-height: max(38px, 32Px) !important;
-    border-radius: 8px !important;
-
-    .text {
-      display: flex;
-      align-items: center;
-      color: #198cfe;
-
-      i {
-        width: 18px;
-        height: 18px;
-        display: inline-block;
-        background: url('./images/icon-pen.png') no-repeat center;
-        background-size: contain;
-        margin-right: 6px;
-
-        &.look {
-          background: url('./images/icon-menu.png') no-repeat center;
-          background-size: contain;
-        }
-      }
-    }
-
-  }
-
-  .workList {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    padding: 0 32px;
-    min-height: 360px;
-  }
-
-  .allTotal {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    font-size: max(16px, 13Px);
-    font-weight: 400;
-    color: #8b8b8b;
-  }
-
-  .btnGroups {
-    padding: 40px 0;
-
-    :global {
-      .n-button {
-        height: 47px;
-        min-width: 96px;
-        border-radius: 8px;
-      }
-    }
-  }
-}
-
-
-.studentVisible {
-  width: 714px;
-}
-
-.removeVisiable {
-  width: 432px;
-
-  :global {
-    .n-card-header {
-      font-size: max(22px, 16Px);
-    }
-  }
-
-  .studentRemove {
-    padding: 0 40px;
-
-    p {
-      font-size: max(18px, 14Px);
-      color: #777777;
-      line-height: 30px;
-
-      span {
-        color: #EA4132;
-      }
-    }
-  }
-
-  .btnGroup {
-    padding: 32px 0;
-
-    :global {
-      .n-button {
-        height: 47px;
-        min-width: 156px;
-      }
-    }
-  }
-}
-
-
-
-.nextWrap {
-  padding: 30px 32px 0 !important;
-}
-
-.updateStudent {
-  width: 480px;
+@img: '../setting/images';
+@currentimg './images'
+
+.listWrap {
+  padding: 32px;
+  background-color: #fff;
+  border-radius: 20px;
+
+
+}
+
+.infoListWrap {
+  min-height: calc(100vh - 150px) !important
+}
+
+.addBtnIcon {
+  width: 13Px !important;
+  height: 14Px !important;
+}
+
+.addBtn {
+  margin-bottom: 30px;
+  // height: 34Px !important;
+  background: #198cfe !important;
+  border-radius: 7Px !important;
+  // line-height: 21Px !important;
+  padding: 0 18Px !important;
+  // font-size: 13Px !important;
+  font-weight: 600 !important;
+}
+
+.btnGroup {
+  padding: 40px 0;
+
+  :global {
+    .n-button {
+      height: 47px;
+      min-width: 156px;
+    }
+  }
+}
+
+.resetStudentWrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 40px;
+
+  .studentTransfer {
+    position: relative;
+
+    .showGradeSection {
+      display: flex;
+      align-items: center;
+    }
+
+    .smallArrow {
+      right: 166px;
+      // top: 15px;
+      // position: absolute;
+      width: 12px;
+      height: 12px;
+      cursor: pointer;
+      z-index: 1000;
+    }
+
+    :global {
+      .n-legacy-transfer {
+        width: 634px;
+        min-height: 340px;
+
+        .n-legacy-transfer-list {
+          &:nth-child(1) {
+            .n-legacy-transfer-list-header__header {
+              &::after {
+                content: '（当前班级）';
+                font-size: 12px;
+                color: #777;
+                font-weight: 400;
+              }
+            }
+          }
+        }
+      }
+
+      .n-legacy-transfer-list-item {
+        &:hover {
+          background-color: #fff !important;
+        }
+      }
+
+      .n-legacy-transfer-list__border {
+        border: none;
+      }
+
+      .n-legacy-transfer-list-header__extra {
+        display: none;
+      }
+
+      .n-legacy-transfer-list-header {
+        display: flex;
+        flex-direction: column;
+        background: #e8f2ff;
+        align-items: flex-start;
+        height: auto;
+      }
+
+      .n-legacy-transfer-list-header__checkbox {
+        order: 2;
+        padding: 0 !important;
+
+        &::after {
+          content: '全选';
+          margin-left: 5px;
+        }
+
+        margin-top: 8px;
+      }
+
+      .n-legacy-transfer-list-header__header {
+        width: 100%;
+        padding: 14px 0;
+        font-size: 16px;
+        font-weight: 600 !important;
+        color: #131415;
+        line-height: 22px;
+        order: 1;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+      }
+
+      .n-legacy-transfer-list {
+        padding: 0 16px;
+        min-height: 340px;
+        background: #e8f2ff;
+        border-radius: 16px 16px 0 0;
+        width: 277px;
+
+        .n-legacy-transfer-filter {
+          background: #e8f2ff;
+          padding: 8px 0px 0px;
+          border-bottom: none;
+        }
+
+        .n-input {
+          border-radius: 8px;
+
+          .n-input-wrapper {
+            .n-input__border {
+              border-radius: 8px;
+            }
+
+            .n-input__input-el {
+              height: 41px;
+              line-height: 41px;
+              background: #ffffff;
+            }
+          }
+        }
+      }
+
+      // .n-legacy-transfer-gap {
+      //   width: 80px;
+      //   .n-button {
+      //     width: 34px;
+      //     height: 34px;
+      //     border-radius: 8px;
+      //     .n-button__state-border {
+      //       border: none !important;
+      //     }
+      //     &:nth-child(1) {
+      //       transform: rotate(180deg);
+      //       position: relative;
+      //       &:hover {
+      //         &::after {
+      //           background: url('@{currentimg}/transArrowActive.png') no-repeat;
+      //           top: 0;
+      //           left: 0;
+
+      //           background-size: 34px 34px;
+      //         }
+      //       }
+      //       &::after {
+      //         position: absolute;
+      //         content: '';
+      //         width: 34px;
+      //         height: 34px;
+      //         background-color: black;
+      //         top: 0;
+      //         left: 0;
+      //         background: url('@{currentimg}/transArrrow.png') no-repeat;
+      //         background-size: 34px 34px;
+      //         z-index: 100;
+      //       }
+      //     }
+      //     &:nth-child(2) {
+      //       position: relative;
+      //       &:hover {
+      //         &::after {
+      //           background: url('@{currentimg}/transArrowActive.png') no-repeat;
+      //           top: 0;
+      //           left: 0;
+
+      //           background-size: 34px 34px;
+      //         }
+      //       }
+      //       &::after {
+      //         position: absolute;
+      //         content: '';
+      //         width: 100%;
+      //         height: 100%;
+      //         background-color: black;
+      //         top: 0;
+      //         left: 0;
+      //         background: url('@{img}/transArrrow.png') no-repeat;
+      //         background-size: 34px 34px;
+      //         z-index: 100;
+      //       }
+      //     }
+      //   }
+      // }
+    }
+
+    .studentTransferBottom {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+
+      .bottom {
+        padding: 0 16px;
+
+        width: 277px;
+        background-color: #e8f2ff;
+
+        border-radius: 0 0 8px 8px;
+
+        .bottomWrap {
+          padding: 14px 0;
+          border-top: 1px solid rgba(0, 0, 0, 0.06);
+        }
+      }
+    }
+  }
+}
+
+.studentTransferList {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .listCore {
+    .searchInput {
+      --n-border: 0 !important;
+    }
+  }
+
+  .studentLeft,
+  .studentRight {
+    padding: 14px 16px;
+    width: 277px;
+
+    background: #e8f2ff;
+    border-radius: 16px;
+
+    .listTop {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding-bottom: 14px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+      font-size: max(16px, 13Px);
+      font-weight: 600;
+      color: #131415;
+      line-height: 22px;
+
+      span {
+        color: #777;
+        font-weight: 400;
+        font-size: max(12px, 12Px);
+      }
+    }
+
+    .chioseCheckBox {
+      padding: 4px 2px;
+      font-size: 16px;
+      font-weight: 400;
+      color: #131415;
+    }
+  }
+
+  .studentLeft {
+    background-color: #F5F6FA;
+  }
+
+  .chioseBox {
+    width: 80px;
+    height: 389px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .chioseBtn {
+      cursor: pointer;
+      width: 34px;
+      height: 34px;
+      border-radius: 8px;
+      background: url('./images/transArrrow.png') no-repeat;
+      background-size: 34px 34px;
+
+      &:hover {
+        background: url('./images/transArrowActive.png') no-repeat;
+        background-size: 34px 34px;
+      }
+    }
+
+    .chioseBtnRight {
+      transform: rotate(180deg);
+      margin-bottom: 23px;
+    }
+  }
+
+  .chioseCheckAllBox {
+    margin-top: 8px !important;
+    margin-bottom: 14px !important;
+  }
+
+  .bottom {
+    padding-top: max(12px, 12Px);
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+  }
+}
+
+.addClass {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 50px;
+}
+
+.listWrap {
+  min-height: 100%;
+  padding: 32px;
+  background-color: #fff;
+  border-radius: 20px;
+
+  .customTabs {
+    :global {
+      .n-tabs-tab--active {
+        font-size: max(18px, 14Px) !important;
+
+        font-weight: 600 !important;
+        color: #131415 !important;
+      }
+
+      .n-tabs-tab {
+        font-size: max(18px, 14Px) !important;
+        padding: 8px 0 !important;
+        font-weight: 400;
+        min-width: 50px;
+        color: #8b8d98;
+
+        &:hover {
+          color: #198cfe !important;
+        }
+      }
+
+      .n-tabs-bar {
+        // background-color: red !important;
+        width: 50px !important;
+        height: 5px !important;
+        background: url('@{img}/barIcon.png') no-repeat;
+        background-size: 50px 5px;
+      }
+
+      .n-tab-pane {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+      }
+    }
+  }
+
+  :global {
+    .n-cascader {
+      width: 100% !important;
+      min-width: 180px !important;
+    }
+  }
+}
+
+.indDot,
+.endDot {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.indDot {
+  span {
+    border-radius: 50%;
+    width: 8px;
+    height: 8px;
+    background: #198cfe;
+    margin-right: 8px;
+  }
+}
+
+.endDot {
+  opacity: 0.7;
+  color: #aaaaaa;
+
+  span {
+    border-radius: 50%;
+    width: 8px;
+    height: 8px;
+    background: #aaaaaa;
+    margin-right: 8px;
+  }
+}
+
+.attendClassModal {
+  width: 1100px;
+
+  :global {
+    .n-select-menu {
+      --n-height: calc(var(--n-option-height) * 5.6) !important;
+    }
+  }
+}
+
+.teacherList {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 32px;
+
+  .teacherHeader {
+    width: 100px;
+    height: 100px;
+    padding: 4px;
+    border-radius: 99px;
+    background: linear-gradient(228deg,
+        rgba(2, 186, 255, 1),
+        rgba(0, 122, 254, 1));
+    margin-right: 20px;
+
+    .teacherHeaderBorder {
+      width: 100%;
+      height: 100%;
+      background: #fff;
+      border-radius: 99px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      padding: 4px;
+    }
+  }
+
+  .teacherHeaderImg {
+    width: 84px;
+    height: 84px;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+
+  .workafterInfo {
+    h4 {
+      font-size: 22px;
+      line-height: 30px;
+      font-weight: 600;
+      color: #131415;
+      margin-bottom: 12px;
+    }
+
+    p {
+      font-size: max(16px, 12Px);
+      line-height: 22px;
+      color: #777;
+
+      span {
+        color: #ea4132;
+      }
+    }
+  }
+}
+
+.isok {
+  font-weight: 600;
+  color: #333333;
+}
+
+.ison {
+  font-weight: 600;
+  color: #ea4132;
+}
+
+.nosub {
+  font-weight: 600;
+  color: #aaa;
+}
+
+.TrainDataItem {
+  margin-bottom: 20px;
+
+  .TrainDataItemTitle {
+    text-align: left;
+    font-size: max(13px, 11Px);
+    font-weight: 400;
+    color: #131415;
+    line-height: 18px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    span {
+      font-family: 'DINA';
+      font-size: max(26px, 18Px);
+      font-weight: 600;
+      color: #131415;
+      line-height: 28px;
+    }
+  }
+
+  .TrainDataItemsubTitle {
+    margin-top: 4px;
+    text-align: left;
+    font-size: max(14px, 11Px);
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #777777;
+    line-height: 18px;
+  }
+}
+
+.studentGender {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  img {
+    margin-left: 11px;
+    width: 10px;
+    height: 20px;
+  }
+}
+
+.chioseModel {
+  width: 413px;
+
+  :global {
+    .n-select {
+      width: 100%;
+      min-width: 180px;
+
+      .n-base-selection-label {
+        height: 43px;
+        line-height: 43px;
+      }
+
+      .n-base-selection__border {
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .n-base-selection__state-border {
+        border-radius: 8px;
+        overflow: hidden;
+      }
+    }
+
+    .n-card-header {
+      position: relative;
+      padding: 20px 18px;
+      text-align: center;
+      // background: #F5F6FA;
+      font-size: 22px;
+      font-weight: 600;
+      color: #131415;
+      line-height: 30px;
+    }
+
+    .n-card-header__close {
+      position: absolute;
+      right: 18px;
+    }
+
+    .n-card__content {
+      // padding: 28px;
+      padding: 30px;
+    }
+  }
+
+  .updateBtnGroup {
+    padding: 0;
+    justify-content: center !important;
+
+    :global {
+      .n-button {
+        height: 48px !important;
+        min-width: 156px;
+      }
+    }
+  }
+}
+
+.wordDetailModel {
+  width: 1012px;
+}
+
+.trainingDetails {
+  padding: 24px 0 32px;
+
+  .studentList {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    // margin-bottom: 24px;
+    justify-content: space-between;
+    border-bottom: 1px solid #f2f2f2;
+    // padding-bottom: 18px;
+    padding: 0 0 18px;
+    margin: 0 32px 20px;
+
+    .studentHeaderWrap {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .studentHeader {
+        width: 66px;
+        height: 66px;
+        padding: 2px;
+        border-radius: 99px;
+        background: linear-gradient(228deg,
+            rgba(2, 186, 255, 1),
+            rgba(0, 122, 254, 1));
+        margin-right: 16px;
+
+        .studentHeaderBorder {
+          width: 100%;
+          height: 100%;
+          background: #fff;
+          border-radius: 99px;
+          overflow: hidden;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          padding: 4px;
+        }
+      }
+    }
+
+    .workStatus {
+      width: 87px;
+      height: 87px;
+    }
+
+    .studentHeaderImg {
+      width: 66px;
+      height: 66px;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    .workafterInfo {
+      padding-right: 24px;
+
+      h4 {
+        font-size: max(22px, 16Px);
+        line-height: 30px;
+        line-height: 30px;
+        font-weight: 600;
+        color: #131415;
+        margin-bottom: 6px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .workafterInfoDot {
+          width: 52px;
+          height: 22px;
+          background: #ff8a32;
+          border-radius: 13px 4px 13px 4px;
+          font-size: max(14px, 11Px);
+          font-weight: 600;
+          color: #ffffff;
+          line-height: 22px;
+          text-align: center;
+          margin-left: 8px;
+        }
+
+        .workafterInfoDot.workafterTeacherInfoDot {
+          background: #198cfe;
+        }
+      }
+
+      p {
+        font-size: max(16px, 12Px);
+        line-height: 22px;
+        color: #777;
+
+        span {
+          color: #ea4132;
+        }
+      }
+    }
+  }
+
+  .commentBtnGroup {
+    background-color: #E8F4FF !important;
+    margin-left: 32px;
+    margin-bottom: 20px;
+    --n-border: 1px solid #198CFE !important;
+    --n-height: max(38px, 32Px) !important;
+    border-radius: 8px !important;
+
+    .text {
+      display: flex;
+      align-items: center;
+      color: #198cfe;
+
+      i {
+        width: 18px;
+        height: 18px;
+        display: inline-block;
+        background: url('./images/icon-pen.png') no-repeat center;
+        background-size: contain;
+        margin-right: 6px;
+
+        &.look {
+          background: url('./images/icon-menu.png') no-repeat center;
+          background-size: contain;
+        }
+      }
+    }
+  }
+
+  .expireDateTip {
+    display: flex;
+    align-items: center;
+    padding: 9px 12px;
+    margin: 0 32px 0;
+    background: #E6F4FF;
+    border-radius: 7px;
+    // width: 100%;
+
+    .expireDateIcon {
+      width: max(13px, 12Px);
+      height: max(13px, 12Px);
+      display: inline-block;
+      background: url('../prepare-lessons/images/icon-expiredate.svg') no-repeat center;
+      background-size: contain;
+      margin-right: 7px;
+
+    }
+
+    span {
+      font-size: 12Px;
+      color: #1677FF;
+    }
+  }
+
+  .workList {
+    display: flex;
+    flex-direction: row;
+    // align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 20px 32px 0;
+    // min-height: 360px;
+    gap: 0 20px;
+
+    &>div {
+      width: calc(33.33% - 20px);
+    }
+  }
+
+  .allTotal {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    font-size: max(16px, 13Px);
+    font-weight: 400;
+    color: #8b8b8b;
+  }
+
+  .btnGroups {
+    padding: 40px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 96px;
+        border-radius: 8px;
+      }
+    }
+  }
+
+
+  .commentSection {
+    margin: 0 32px;
+    padding: 16px;
+    background: #E8F4FF;
+    border-radius: 10px;
+
+    .iconComment {
+      width: 22px;
+      height: 22px;
+      display: inline-block;
+      background: url('./images/icon-comment.png') no-repeat center;
+      background-size: contain;
+      margin-right: 6px;
+    }
+
+    .myText {
+      width: 72px;
+      height: 17px;
+      display: inline-block;
+      background: url('./images/my-title.png') no-repeat center;
+      background-size: contain;
+    }
+
+    h3 {
+      display: flex;
+      align-items: center;
+    }
+
+    .commentContent {
+      padding-top: 11px;
+      font-size: max(16px, 13Px);
+      font-weight: 500;
+      color: #333333;
+      line-height: 26px;
+    }
+  }
+
+}
+
+
+.studentVisible {
+  width: 714px;
+}
+
+.removeVisiable {
+  width: 432px;
+
+  :global {
+    .n-card-header {
+      font-size: max(22px, 16Px);
+    }
+  }
+
+  .studentRemove {
+    padding: 0 40px;
+
+    p {
+      font-size: max(18px, 14Px);
+      color: #777777;
+      line-height: 30px;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .btnGroup {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
+}
+
+
+
+.nextWrap {
+  padding: 30px 32px 0 !important;
+}
+
+.updateStudent {
+  width: 480px;
 }

src/views/classList/modals/TrainingDetails.tsx

@@ -2,9 +2,6 @@ import {
   NButton,
   NSpace,
   useMessage,
-  NForm,
-  NFormItem,
-  NSelect,
   NImage,
   NScrollbar,
   NSpin,
@@ -13,7 +10,7 @@ import {
 import { defineComponent, onMounted, reactive, ref } from 'vue';
 import { getTrainingStudentDetail } from '../api';
 import styles from '../index.module.less';
-import TrainType from '@/views/attend-class/model/train-type';
+// import TrainType from '@/views/attend-class/model/train-type';
 import defultHeade from '@/components/layout/images/teacherIcon.png';
 import noSub from '../images/nosub.png';
 import qualified from '../images/qualified.png';
@@ -21,6 +18,10 @@ import unqualified from '../images/unqualified.png';
 import { evaluateDifficult } from '/src/utils/contants';
 import dayjs from 'dayjs';
 import CommentWork from '../../studentList/modals/comment-work';
+import WorkItem from '../work-item';
+import request from '/src/utils/request';
+import CardPreview from '/src/components/card-preview';
+import { iframeDislableKeyboard } from '/src/utils';
 export default defineComponent({
   props: {
     activeRow: {
@@ -49,8 +50,9 @@ export default defineComponent({
       studentLessonTrainingDetails: [] as any
     } as any);
     const showModalMask = ref(false);
-    const message = useMessage();
-    const foemsRef = ref();
+    // const message = useMessage();
+    // const foemsRef = ref();
+    const file_expire_time = ref<any>(null);
     const typeFormat = (trainingType: string, configJson: any) => {
       let tList: string[] = [];
 
@@ -88,6 +90,7 @@ export default defineComponent({
           return {
             ...item,
             coverImg: item.titleImg,
+            fileList: (item.fileJsonList && item.fileJsonList[0]) || {},
             allTimes: JSON.parse(item.trainingContent).trainingTimes,
             typeList: tList || []
           };
@@ -103,7 +106,25 @@ export default defineComponent({
       loading.value = false;
     };
     expose({ getTrainingDetail });
+
+    const getDefaultParamConfig = async () => {
+      try {
+        const { data } = await request.get(
+          '/edu-app/open/paramConfig/queryByParamName',
+          {
+            params: {
+              paramName: 'homework_file_expire_time'
+            }
+          }
+        );
+        file_expire_time.value = data.paramValue || 0;
+      } catch {
+        //
+      }
+    };
+
     onMounted(() => {
+      getDefaultParamConfig();
       getTrainingDetail(props.activeRow.studentLessonTrainingId);
     });
 
@@ -139,51 +160,70 @@ export default defineComponent({
                     : '--'}
                 </p>
               </div>
+
+              {studnetInfo.value.trainingStatus == 'UNSUBMITTED' ? (
+                <NImage
+                  previewDisabled
+                  class={styles.workStatus}
+                  src={noSub}></NImage>
+              ) : null}
+              {studnetInfo.value.trainingStatus == 'SUBMITTED' ? (
+                <NImage
+                  previewDisabled
+                  class={styles.workStatus}
+                  src={unqualified}></NImage>
+              ) : null}
+              {studnetInfo.value.trainingStatus == 'TARGET' ? (
+                <NImage
+                  previewDisabled
+                  class={styles.workStatus}
+                  src={qualified}></NImage>
+              ) : null}
             </div>
-            {studnetInfo.value.trainingStatus == 'UNSUBMITTED' ? (
-              <NImage
-                previewDisabled
-                class={styles.workStatus}
-                src={noSub}></NImage>
-            ) : null}
-            {studnetInfo.value.trainingStatus == 'SUBMITTED' ? (
-              <NImage
-                previewDisabled
-                class={styles.workStatus}
-                src={unqualified}></NImage>
-            ) : null}
-            {studnetInfo.value.trainingStatus == 'TARGET' ? (
-              <NImage
-                previewDisabled
-                class={styles.workStatus}
-                src={qualified}></NImage>
-            ) : null}
-          </div>
 
-          {studnetInfo.value.trainingStatus !== 'UNSUBMITTED' && (
-            <NButton
-              onClick={() => (showModalMask.value = true)}
-              class={styles.commentBtnGroup}>
-              <div class={styles.text}>
-                <i class={studnetInfo.value.comment && styles.look}></i>
+            {studnetInfo.value.expireFlag && (
+              <NButton
+                onClick={() => (showModalMask.value = true)}
+                class={styles.commentBtnGroup}>
+                <div class={styles.text}>
+                  <i class={studnetInfo.value.comment && styles.look}></i>
 
-                {studnetInfo.value.comment ? '查看评语' : '点评作业'}
-              </div>
-            </NButton>
+                  {studnetInfo.value.comment ? '修改点评' : '点评作业'}
+                </div>
+              </NButton>
+            )}
+          </div>
+
+          {!studnetInfo.value.fileExpireFlag && (
+            <div class={styles.expireDateTip}>
+              <i class={styles.expireDateIcon}></i>
+              <span>
+                作业截止{file_expire_time.value}
+                天后，学生上传的文件将过期，请及时查看
+              </span>
+            </div>
           )}
-          <NScrollbar style="max-height:400px" trigger="none">
+
+          <NScrollbar style="max-height:400px;min-height: 300px" trigger="none">
             <div class={styles.workList}>
               {studnetInfo.value.studentLessonTrainingDetails.map(
                 (item: any) => (
-                  <TrainType
-                    style={{ marginBottom: '20px' }}
-                    isDisabled={true}
-                    isDelete={false}
-                    isCLassWork={false}
-                    item={item}></TrainType>
+                  <WorkItem style={{ marginBottom: '20px' }} item={item} />
                 )
               )}
             </div>
+
+            {studnetInfo.value.comment && (
+              <div class={styles.commentSection}>
+                <h3>
+                  <i class={styles.iconComment}></i>
+                  <i class={styles.myText}></i>
+                </h3>
+                <div class={styles.commentContent}>
+                  {studnetInfo.value.comment}
+                </div>
+              </div>
+            )}
           </NScrollbar>
           <NSpace
             class={[styles.btnGroups, styles.nextWrap]}

src/views/classList/work-item/index.module.less

@@ -0,0 +1,157 @@
+.workItem {
+  background: #F5F6FA;
+  border-radius: 14px;
+  border: 2px solid #ECEDEF;
+  overflow: hidden;
+  transition: all .2s ease;
+
+  &:hover {
+    transition: all .2s ease;
+    border-color: #198CFE;
+    transform: scale(1.01);
+  }
+}
+
+.work-content {
+  height: 170px;
+  background: #ffffff;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .expireBg {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: max(16px, 13Px);
+    color: #FFFFFF;
+  }
+
+  .nodata {
+    width: 132px !important;
+    height: 127px !important;
+    cursor: default !important;
+  }
+
+  .reportBtn {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    z-index: 9;
+    --n-height: max(28px, 24Px) !important;
+    --n-padding: 0 8px !important;
+    --n-font-size: max(14px, 11Px) !important;
+
+  }
+
+  :global {
+    .n-image {
+      width: 100%;
+      height: inherit;
+      // transition: all 0.2s ease;
+
+      img {
+        width: 100%;
+        height: fit-content;
+      }
+    }
+  }
+}
+
+.work-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+
+  .type {
+    gap: 8px 10px !important;
+  }
+
+  .title-text {
+    width: 150px;
+  }
+
+  .scoreGroup {
+    font-weight: bold;
+    font-size: max(24px, 20Px);
+    color: #1677FF;
+    font-family: DINA, DINAlternate;
+
+    span {
+      font-size: max(12px, 10Px);
+      padding-left: 2px;
+      vertical-align: middle;
+    }
+
+    &.scoreGroupEval {
+      color: #F51515;
+    }
+  }
+}
+
+.trainInfo {
+  max-width: 82%;
+
+  .trainName {
+    display: flex;
+    align-items: center;
+    font-size: max(16px, 13Px);
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 600;
+    color: #131415;
+    line-height: 21px;
+  }
+
+  .type {
+    padding: 0 9px;
+    display: inline-block;
+    background-color: #ccc;
+    border-radius: 5px;
+    font-size: max(13px, 11Px);
+    font-weight: 500;
+    color: #FFFFFF;
+    height: 18Px;
+    line-height: 18Px;
+    margin-right: 7px;
+    flex-shrink: 0;
+  }
+
+  .PRACTICE {
+    background: linear-gradient(270deg, #23C3FF 0%, #007AFE 100%);
+  }
+
+  .EVALUATION {
+    background: linear-gradient(270deg, #FF7B57 0%, #FF3460 100%);
+  }
+
+  .tagList {
+    display: flex;
+    align-items: center;
+    padding-top: 5px;
+    font-size: 11Px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.5);
+
+    :global {
+      .n-divider {
+        --n-color: rgba(0, 0, 0, 0.5) !important;
+        height: 11Px;
+        margin: 0 5px !important;
+      }
+    }
+  }
+}
+
+.reportModel {
+  width: 1030px;
+  overflow: hidden;
+}

src/views/classList/work-item/index.tsx

@@ -0,0 +1,209 @@
+import { computed, defineComponent, ref } from 'vue';
+import { NImage, NDivider, NButton, NModal, useMessage } from 'naive-ui';
+import TheNoticeBar from '/src/components/TheNoticeBar';
+import styles from './index.module.less';
+import { PageEnum } from '/src/enums/pageEnum';
+import nodata from '../images/nomore.png';
+import CardPreview from '/src/components/card-preview';
+import { checkUrlType, iframeDislableKeyboard } from '/src/utils';
+import { useUserStore } from '/src/store/modules/users';
+import { vaildMusicScoreUrl } from '/src/utils/urlUtils';
+
+export default defineComponent({
+  name: 'work-item',
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const userStore = useUserStore();
+    const message = useMessage();
+    const previewShow = ref(false);
+    const preivewItem = ref({
+      type: 'MUSIC',
+      content: props.item.musicId,
+      title: props.item.musicName
+    });
+    const reportSrc = ref('');
+    const detailVisiable = ref(false);
+    console.log(props.item);
+
+    const isDownload = computed(() => {
+      if (
+        props.item.fileList?.expireFlag &&
+        props.item.fileList?.fileType === 'EVALUATION'
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    });
+
+    return () => (
+      <div class={styles.workItem}>
+        <div
+          class={[styles['work-content']]}
+          style={{
+            cursor: !props.item.fileList?.fileType ? 'default' : 'pointer'
+          }}>
+          {/* ("文件类型：评测：EVALUATION，IMG:图片，SOUND:音频，VIDEO:视频")
+        private String fileType; */}
+          {!props.item.fileList?.fileType && (
+            <NImage
+              src={nodata}
+              class={styles.nodata}
+              previewDisabled
+              objectFit="contain"
+            />
+          )}
+
+          {props.item.fileList?.fileType === 'IMG' && (
+            <NImage src={props.item.fileList?.filePath} objectFit="contain" />
+          )}
+          {props.item.fileList?.fileType === 'SOUND' && (
+            <div
+              onClick={() => {
+                preivewItem.value.content = props.item.fileList?.content;
+                preivewItem.value.title = props.item.musicName;
+                preivewItem.value.type = 'SONG';
+                previewShow.value = true;
+              }}>
+              <NImage
+                src={PageEnum.SONG_DEFAULT_COVER}
+                previewDisabled
+                objectFit="contain"
+              />
+            </div>
+          )}
+          {props.item.fileList?.fileType === 'EVALUATION' &&
+            (checkUrlType(props.item.fileList?.content) === 'video' ? (
+              <video
+                style={{ height: '100%' }}
+                src={props.item.fileList?.content}
+                onClick={() => {
+                  preivewItem.value.content = props.item.fileList?.content;
+                  preivewItem.value.title = props.item.musicName;
+                  preivewItem.value.type = 'VIDEO';
+                  previewShow.value = true;
+                }}
+              />
+            ) : (
+              <div
+                onClick={() => {
+                  preivewItem.value.content = props.item.fileList?.content;
+                  preivewItem.value.title = props.item.musicName;
+                  preivewItem.value.type = 'SONG';
+                  previewShow.value = true;
+                }}>
+                <NImage
+                  src={PageEnum.SONG_DEFAULT_COVER}
+                  previewDisabled
+                  objectFit="contain"
+                />
+              </div>
+            ))}
+          {/* 'https://oss.dayaedu.com/ktqy/1715586967518b42c4fe5.mp4' */}
+          {props.item.fileList?.fileType === 'VIDEO' && (
+            <video
+              style={{ height: '100%' }}
+              src={props.item.fileList?.filePath}
+              onClick={() => {
+                preivewItem.value.content = props.item.fileList?.filePath;
+                preivewItem.value.title = props.item.musicName;
+                preivewItem.value.type = 'VIDEO';
+                previewShow.value = true;
+              }}
+            />
+          )}
+
+          {/* 判断是否过期 */}
+          {props.item.fileList?.expireFlag && (
+            <div class={styles.expireBg}>文件已过期</div>
+          )}
+
+          {props.item.recordId && (
+            <NButton
+              color="rgba(0,0,0,0.4)"
+              textColor="#fff"
+              disabled={props.item.fileList?.expireFlag}
+              class={styles.reportBtn}
+              onClick={() => {
+                if (!props.item.recordId) {
+                  message.error('暂无评测记录');
+                  return;
+                }
+                const tockn = userStore.getToken;
+                reportSrc.value =
+                  vaildMusicScoreUrl() +
+                  `/instrument/#/evaluat-report?id=${props.item.recordId}&Authorization=${tockn}`;
+                detailVisiable.value = true;
+              }}>
+              评测报告
+            </NButton>
+          )}
+        </div>
+        <div class={styles['work-footer']}>
+          <div class={styles.trainInfo}>
+            <div class={styles.trainName}>
+              <span class={[styles.type, styles[props.item.trainingType]]}>
+                {props.item.trainingType === 'EVALUATION' ? '评测' : '练习'}
+              </span>
+              <div class={styles['title-text']}>
+                <TheNoticeBar text={props.item.musicName} />
+              </div>
+            </div>
+            <div class={styles.tagList}>
+              {props.item.typeList?.map((type: string, index: number) => (
+                <>
+                  <span>{type}</span>
+                  {props.item.typeList.length - 1 > index && (
+                    <NDivider vertical />
+                  )}
+                </>
+              ))}
+            </div>
+          </div>
+
+          {props.item.trainingType === 'EVALUATION' ? (
+            <div class={[styles.scoreGroup, styles.scoreGroupEval]}>
+              {props.item.trainingTimes}
+              <span>分</span>
+            </div>
+          ) : (
+            <div class={[styles.scoreGroup]}>
+              {props.item.trainingTimes
+                ? parseInt(props.item.trainingTimes / 60 + '')
+                : 0}
+              <span>分钟</span>
+            </div>
+          )}
+        </div>
+
+        <CardPreview
+          v-model:show={previewShow.value}
+          item={preivewItem.value}
+          isDownload={isDownload.value}
+        />
+
+        <NModal
+          v-model:show={detailVisiable.value}
+          preset="card"
+          class={['modalTitle background', styles.reportModel]}
+          title={'评测报告'}>
+          <div class={styles.reportContainer} style={{ lineHeight: 0 }}>
+            <iframe
+              width={'100%'}
+              height={'450px'}
+              frameborder="0"
+              onLoad={(val: any) => {
+                iframeDislableKeyboard(val.target);
+              }}
+              src={reportSrc.value}></iframe>
+          </div>
+        </NModal>
+      </div>
+    );
+  }
+});

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

@@ -154,6 +154,14 @@
 
 }
 
+.collaoseGroup {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  padding-left: 8px;
+  height: var(--n-blank-height);
+}
+
 .collaoseBtn {
   width: 32px;
   height: 32px;
@@ -195,13 +203,20 @@
 }
 
 .spaceSection2 {
-  width: 78%;
+  width: 76%;
   transition: 1s all ease-in;
+  padding-right: 40px;
+
+
 
   &>div {
     height: 34Px !important;
     display: flex;
     align-items: center;
+
+    &:last-child {
+      margin-left: -12Px;
+    }
   }
 }
 

src/views/natural-resources/components/my-collect/search-group-resources.tsx

@@ -178,12 +178,8 @@ export default defineComponent({
                     ))}
                     {line.value > 1 && (
                       <div
-                        style={{
-                          height: 'var(--n-blank-height)',
-                          position: 'absolute',
-                          display: 'flex',
-                          alignItems: 'center'
-                        }}
+
+                        class={styles.collaoseGroup}
                         onClick={() => {
                           setCollapse(!isCollapse.value);
                         }}>

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

@@ -1,270 +1,270 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import { NButton, NForm, NFormItem, NPopselect, NSpace } from 'naive-ui';
-import iconUpload from '../../images/icon-upload.png';
-import iconEdit from '../../images/icon-edit.png';
-import iconSelectAll from '../../images/icon-selectall.png';
-import iconSelectAllDefault from '../../images/icon-selectall-default.png';
-import iconPen from '../../images/icon-pen.png';
-import iconDelete from '../../images/icon-delete.png';
-import TheSearch from '/src/components/TheSearch';
-import { resourceTypeArray } from '/src/utils/searchArray';
-import { useCatchStore } from '/src/store/modules/catchData';
-
-export default defineComponent({
-  name: 'search-group',
-  emits: [
-    'search',
-    'upload',
-    'edit',
-    'selectAll',
-    'delete',
-    'update',
-    'editOver',
-    'cancel'
-  ],
-  setup(props, { emit, expose }) {
-    const resourceList = ref([] as any[]);
-    const catchStore = useCatchStore();
-    const forms = reactive({
-      type: 'MUSIC', //
-      name: '',
-      bookVersionId: null,
-      subjectId: null
-    });
-    const state = reactive({
-      tempSubjectId: null,
-      isEdit: false, // 是否编辑
-      isSelectAll: false
-    });
-
-    const onSearch = () => {
-      emit('search', forms);
-    };
-
-    onMounted(async () => {
-      resourceList.value = [
-        // {
-        //   label: '全部',
-        //   value: ''
-        // }
-      ];
-      resourceTypeArray.forEach((item: any) => {
-        // if (item.value !== 'MUSIC') {
-        resourceList.value.push(item);
-        // }
-      });
-
-      // 获取声部列表
-      await catchStore.getSubjects();
-
-      if (forms.subjectId) {
-        state.tempSubjectId = forms.subjectId;
-      }
-    });
-
-    const selectChildObj = (item: any) => {
-      const obj: any = {};
-      item?.forEach((child: any) => {
-        if (child.id === forms.subjectId) {
-          obj.selected = true;
-          obj.name = child.name;
-        }
-      });
-      return obj;
-    };
-
-    const resetStatus = () => {
-      state.isSelectAll = false;
-    };
-    expose({
-      resetStatus
-    });
-    return () => (
-      <div class={styles.searchGroup}>
-        <div class={styles.searchCatatory}>
-          <NSpace size="small" class={styles.btnType}>
-            {resourceList.value.map((item: any) => (
-              <NButton
-                type={forms.type === item.value ? 'primary' : 'default'}
-                secondary={forms.type === item.value ? false : true}
-                round
-                size="small"
-                focusable={false}
-                onClick={() => {
-                  if (forms.type !== item.value) {
-                    state.isEdit = false;
-                    state.isSelectAll = false;
-                    emit('edit', state.isEdit);
-                  }
-                  forms.type = item.value;
-                  forms.subjectId = null;
-                  state.tempSubjectId = null;
-
-                  onSearch();
-                }}>
-                {item.label}
-              </NButton>
-            ))}
-          </NSpace>
-
-          <NSpace size="small" class={styles.btnGroup}>
-            {state.isEdit ? (
-              <>
-                <NButton
-                  type="primary"
-                  class={styles.addTrain}
-                  focusable={false}
-                  strong
-                  onClick={() => {
-                    state.isSelectAll = !state.isSelectAll;
-                    emit('selectAll', state.isSelectAll);
-                  }}>
-                  <img
-                    src={
-                      state.isSelectAll ? iconSelectAll : iconSelectAllDefault
-                    }
-                    class={styles.iconSelectAll}
-                  />
-                  全选
-                </NButton>
-                <NButton
-                  type="error"
-                  class={[styles.addTrain, styles.error]}
-                  focusable={false}
-                  strong
-                  onClick={() => emit('delete')}>
-                  <img src={iconDelete} class={styles.iconDelete} />
-                  删除
-                </NButton>
-                {forms.type !== 'MUSIC' && (
-                  <NButton
-                    type="primary"
-                    class={styles.addTrain}
-                    focusable={false}
-                    strong
-                    onClick={() => emit('update')}>
-                    <img src={iconPen} class={styles.iconPen} />
-                    修改
-                  </NButton>
-                )}
-
-                <NButton
-                  type="primary"
-                  class={styles.addTrain}
-                  focusable={false}
-                  strong
-                  onClick={() => {
-                    state.isEdit = false;
-                    state.isSelectAll = false;
-                    emit('editOver', state.isEdit);
-                  }}>
-                  完成编辑
-                </NButton>
-                <NButton
-                  type="error"
-                  class={[styles.addTrain, styles.error]}
-                  focusable={false}
-                  strong
-                  onClick={() => {
-                    state.isEdit = false;
-                    state.isSelectAll = false;
-                    emit('cancel', state.isEdit);
-                  }}>
-                  {/* <img src={iconDelete} class={styles.iconDelete} /> */}
-                  取消编辑
-                </NButton>
-              </>
-            ) : (
-              <>
-                <NButton
-                  type="primary"
-                  class={styles.addTrain}
-                  focusable={false}
-                  {...{ id: 'myResources-0' }}
-                  strong
-                  onClick={() => emit('upload')}>
-                  <img src={iconUpload} class={styles.iconUpload} />
-                  上传资源
-                </NButton>
-                <NButton
-                  type="primary"
-                  class={styles.addTrain}
-                  focusable={false}
-                  strong
-                  onClick={() => {
-                    state.isEdit = true;
-                    emit('edit', state.isEdit);
-                  }}>
-                  <img src={iconEdit} class={styles.iconEdit} />
-                  编辑资源
-                </NButton>
-              </>
-            )}
-          </NSpace>
-        </div>
-        <NForm labelAlign="left" labelPlacement="left">
-          <NFormItem label="乐器：">
-            <NSpace class={styles.spaceSection2}>
-              {catchStore.getSubjectInstruments.map((subject: any) =>
-                subject.instruments && subject.instruments.length > 1 ? (
-                  <NPopselect
-                    options={subject.instruments}
-                    trigger="hover"
-                    scrollable
-                    v-model:value={state.tempSubjectId}
-                    onUpdate:value={() => {
-                      if (state.tempSubjectId !== subject.value) {
-                        state.isEdit = false;
-                        state.isSelectAll = false;
-                        emit('edit', state.isEdit);
-                      }
-                      // if (forms.type === 'MUSIC') {
-                      forms.subjectId = state.tempSubjectId;
-                      // }
-                      onSearch();
-                    }}
-                    key={subject.value}
-                    class={[styles.popSelect]}>
-                    <span
-                      class={[
-                        styles.textBtn,
-                        selectChildObj(subject.instruments).selected &&
-                          styles.textBtnActive
-                      ]}>
-                      {selectChildObj(subject.instruments).name || subject.name}
-                      <i class={styles.iconArrow}></i>
-                    </span>
-                  </NPopselect>
-                ) : (
-                  <span
-                    class={[
-                      styles.textBtn,
-                      forms.subjectId === subject.value && styles.textBtnActive
-                    ]}
-                    onClick={() => {
-                      forms.subjectId = subject.value;
-
-                      state.tempSubjectId = null;
-                      onSearch();
-                    }}>
-                    {subject.name}
-                  </span>
-                )
-              )}
-            </NSpace>
-          </NFormItem>
-
-          <TheSearch
-            class={styles.inputSearch}
-            round
-            onSearch={(val: string) => {
-              forms.name = val;
-              onSearch();
-            }}
-          />
-        </NForm>
-      </div>
-    );
-  }
-});
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import { NButton, NForm, NFormItem, NPopselect, NSpace } from 'naive-ui';
+import iconUpload from '../../images/icon-upload.png';
+import iconEdit from '../../images/icon-edit.png';
+import iconSelectAll from '../../images/icon-selectall.png';
+import iconSelectAllDefault from '../../images/icon-selectall-default.png';
+import iconPen from '../../images/icon-pen.png';
+import iconDelete from '../../images/icon-delete.png';
+import TheSearch from '/src/components/TheSearch';
+import { resourceTypeArray } from '/src/utils/searchArray';
+import { useCatchStore } from '/src/store/modules/catchData';
+
+export default defineComponent({
+  name: 'search-group',
+  emits: [
+    'search',
+    'upload',
+    'edit',
+    'selectAll',
+    'delete',
+    'update',
+    'editOver',
+    'cancel'
+  ],
+  setup(props, { emit, expose }) {
+    const resourceList = ref([] as any[]);
+    const catchStore = useCatchStore();
+    const forms = reactive({
+      type: 'MUSIC', //
+      name: '',
+      bookVersionId: null,
+      subjectId: null
+    });
+    const state = reactive({
+      tempSubjectId: null,
+      isEdit: false, // 是否编辑
+      isSelectAll: false
+    });
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    onMounted(async () => {
+      resourceList.value = [
+        // {
+        //   label: '全部',
+        //   value: ''
+        // }
+      ];
+      resourceTypeArray.forEach((item: any) => {
+        // if (item.value !== 'MUSIC') {
+        resourceList.value.push(item);
+        // }
+      });
+
+      // 获取声部列表
+      await catchStore.getSubjects();
+
+      if (forms.subjectId) {
+        state.tempSubjectId = forms.subjectId;
+      }
+    });
+
+    const selectChildObj = (item: any) => {
+      const obj: any = {};
+      item?.forEach((child: any) => {
+        if (child.id === forms.subjectId) {
+          obj.selected = true;
+          obj.name = child.name;
+        }
+      });
+      return obj;
+    };
+
+    const resetStatus = () => {
+      state.isSelectAll = false;
+    };
+    expose({
+      resetStatus
+    });
+    return () => (
+      <div class={styles.searchGroup}>
+        <div class={styles.searchCatatory}>
+          <NSpace size="small" class={styles.btnType}>
+            {resourceList.value.map((item: any) => (
+              <NButton
+                type={forms.type === item.value ? 'primary' : 'default'}
+                secondary={forms.type === item.value ? false : true}
+                round
+                size="small"
+                focusable={false}
+                onClick={() => {
+                  if (forms.type !== item.value) {
+                    state.isEdit = false;
+                    state.isSelectAll = false;
+                    emit('edit', state.isEdit);
+                  }
+                  forms.type = item.value;
+                  forms.subjectId = null;
+                  state.tempSubjectId = null;
+
+                  onSearch();
+                }}>
+                {item.label}
+              </NButton>
+            ))}
+          </NSpace>
+
+          <NSpace size="small" class={styles.btnGroup}>
+            {state.isEdit ? (
+              <>
+                <NButton
+                  type="primary"
+                  class={styles.addTrain}
+                  focusable={false}
+                  strong
+                  onClick={() => {
+                    state.isSelectAll = !state.isSelectAll;
+                    emit('selectAll', state.isSelectAll);
+                  }}>
+                  <img
+                    src={
+                      state.isSelectAll ? iconSelectAll : iconSelectAllDefault
+                    }
+                    class={styles.iconSelectAll}
+                  />
+                  全选
+                </NButton>
+                <NButton
+                  type="error"
+                  class={[styles.addTrain, styles.error]}
+                  focusable={false}
+                  strong
+                  onClick={() => emit('delete')}>
+                  <img src={iconDelete} class={styles.iconDelete} />
+                  删除
+                </NButton>
+                {forms.type !== 'MUSIC' && (
+                  <NButton
+                    type="primary"
+                    class={styles.addTrain}
+                    focusable={false}
+                    strong
+                    onClick={() => emit('update')}>
+                    <img src={iconPen} class={styles.iconPen} />
+                    修改
+                  </NButton>
+                )}
+
+                <NButton
+                  type="primary"
+                  class={styles.addTrain}
+                  focusable={false}
+                  strong
+                  onClick={() => {
+                    state.isEdit = false;
+                    state.isSelectAll = false;
+                    emit('editOver', state.isEdit);
+                  }}>
+                  完成编辑
+                </NButton>
+                <NButton
+                  type="error"
+                  class={[styles.addTrain, styles.error]}
+                  focusable={false}
+                  strong
+                  onClick={() => {
+                    state.isEdit = false;
+                    state.isSelectAll = false;
+                    emit('cancel', state.isEdit);
+                  }}>
+                  {/* <img src={iconDelete} class={styles.iconDelete} /> */}
+                  取消编辑
+                </NButton>
+              </>
+            ) : (
+              <>
+                <NButton
+                  type="primary"
+                  class={styles.addTrain}
+                  focusable={false}
+                  {...{ id: 'myResources-0' }}
+                  strong
+                  onClick={() => emit('upload')}>
+                  <img src={iconUpload} class={styles.iconUpload} />
+                  上传资源
+                </NButton>
+                <NButton
+                  type="primary"
+                  class={styles.addTrain}
+                  focusable={false}
+                  strong
+                  onClick={() => {
+                    state.isEdit = true;
+                    emit('edit', state.isEdit);
+                  }}>
+                  <img src={iconEdit} class={styles.iconEdit} />
+                  编辑资源
+                </NButton>
+              </>
+            )}
+          </NSpace>
+        </div>
+        <NForm labelAlign="left" labelPlacement="left">
+          <NFormItem label="乐器：">
+            <NSpace class={styles.spaceSection2}>
+              {catchStore.getSubjectInstruments.map((subject: any) =>
+                subject.instruments && subject.instruments.length > 1 ? (
+                  <NPopselect
+                    options={subject.instruments}
+                    trigger="hover"
+                    scrollable
+                    v-model:value={state.tempSubjectId}
+                    onUpdate:value={() => {
+                      if (state.tempSubjectId !== subject.value) {
+                        state.isEdit = false;
+                        state.isSelectAll = false;
+                        emit('edit', state.isEdit);
+                      }
+                      // if (forms.type === 'MUSIC') {
+                      forms.subjectId = state.tempSubjectId;
+                      // }
+                      onSearch();
+                    }}
+                    key={subject.value}
+                    class={[styles.popSelect]}>
+                    <span
+                      class={[
+                        styles.textBtn,
+                        selectChildObj(subject.instruments).selected &&
+                          styles.textBtnActive
+                      ]}>
+                      {selectChildObj(subject.instruments).name || subject.name}
+                      <i class={styles.iconArrow}></i>
+                    </span>
+                  </NPopselect>
+                ) : (
+                  <span
+                    class={[
+                      styles.textBtn,
+                      forms.subjectId === subject.value && styles.textBtnActive
+                    ]}
+                    onClick={() => {
+                      forms.subjectId = subject.value;
+
+                      state.tempSubjectId = null;
+                      onSearch();
+                    }}>
+                    {subject.name}
+                  </span>
+                )
+              )}
+            </NSpace>
+          </NFormItem>
+
+          <TheSearch
+            class={styles.inputSearch}
+            round
+            onSearch={(val: string) => {
+              forms.name = val;
+              onSearch();
+            }}
+          />
+        </NForm>
+      </div>
+    );
+  }
+});

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

@@ -162,6 +162,13 @@
   align-items: flex-end;
 }
 
+.collaoseGroup {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  padding-left: 8px;
+}
+
 .collaoseBtn {
   width: 32px;
   height: 32px;
@@ -202,14 +209,20 @@
 }
 
 .spaceSection2 {
-  width: 78%;
+  width: 76%;
   transition: 1s all ease-in;
+  padding-right: 40px;
+
+
 
   &>div {
+
     // height: 34Px !important;
     // display: flex !important;
     // align-items: center;
-
+    &:last-child {
+      margin-left: -12Px;
+    }
   }
 }
 

src/views/natural-resources/components/share-resources/search-group-resources.tsx

@@ -1,262 +1,258 @@
-import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import {
-  NButton,
-  NForm,
-  NFormItem,
-  NImage,
-  NPopselect,
-  NSpace
-} from 'naive-ui';
-import iconAdd from '../../images/icon-add.png';
-import TheSearch from '/src/components/TheSearch';
-import { resourceTypeArray } from '/src/utils/searchArray';
-import { useCatchStore } from '/src/store/modules/catchData';
-import isCollaose from '../../images/isCollaose.png';
-export default defineComponent({
-  name: 'search-group',
-  emits: ['search', 'add'],
-  expose: ['init'],
-  setup(props, { emit }) {
-    const catchStore = useCatchStore();
-    const forms = reactive({
-      type: 'MUSIC', //
-      name: '',
-      bookVersionId: null,
-      subjectId: null
-    });
-    const state = reactive({
-      tempSubjectId: null
-    });
-
-    const onSearch = () => {
-      emit('search', forms);
-    };
-    const collapseWrapRef = ref();
-    const divDomList = ref([] as any);
-    const orginHeight = ref(0);
-    const line = ref(0);
-    const isCollapse = ref(false);
-    const loadingCollapse = ref(false); // 是否加载完成
-    const musicCateRef = (el: any) => {
-      if (el?.selfElRef) {
-        divDomList.value.push(el.selfElRef.parentNode);
-      }
-    };
-    const setCollapse = (flag: boolean) => {
-      isCollapse.value = flag;
-      getLive();
-    };
-    const getLive = () => {
-      try {
-        divDomList.value = [...new Set(divDomList.value)];
-        let offsetLeft = -1;
-        divDomList.value.forEach((item: any, index: number) => {
-          if (index === 0) {
-            line.value = 1;
-            offsetLeft = item.offsetLeft;
-          } else if (item.offsetLeft === offsetLeft && index != 0) {
-            // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
-            line.value++;
-          }
-          if (!isCollapse.value) {
-            if (line.value > 1) {
-              //从第3行开始 隐藏标签
-              item.style.display = 'none';
-              // 显示展开按钮  class名chu是在前面动态添加的
-            } else {
-              item.style.display = 'block';
-            }
-          } else {
-            item.style.display = 'block';
-          }
-        });
-        loadingCollapse.value = true;
-      } catch {
-        //
-      }
-    };
-
-    const selectChildObj = (item: any) => {
-      const obj: any = {};
-      item?.forEach((child: any) => {
-        if (child.id === forms.subjectId) {
-          obj.selected = true;
-          obj.name = child.name;
-        }
-      });
-      return obj;
-    };
-    onMounted(async () => {
-      // console.log('加载');
-      // 获取教材分类列表
-      await catchStore.getMusicSheetCategory();
-      // 获取声部列表
-      await catchStore.getSubjects();
-
-      if (forms.type === 'MUSIC') {
-        orginHeight.value = collapseWrapRef.value?.offsetHeight;
-        // hiddenHeight.value = collapseWrapRef.value.offsetHeight / line.value;
-        // 默认隐藏
-        getLive();
-      }
-    });
-    return () => (
-      <div class={styles.searchGroup}>
-        <div class={[styles.searchCatatory]}>
-          <NSpace size="small" class={styles.btnType}>
-            {resourceTypeArray.map((item: any) => (
-              <NButton
-                type={forms.type === item.value ? 'primary' : 'default'}
-                secondary={forms.type === item.value ? false : true}
-                round
-                size="small"
-                focusable={false}
-                onClick={() => {
-                  forms.type = item.value;
-                  forms.subjectId = null;
-                  state.tempSubjectId = null;
-
-                  onSearch();
-
-                  nextTick(() => {
-                    if (forms.type === 'MUSIC') {
-                      orginHeight.value = collapseWrapRef.value?.offsetHeight;
-                      // hiddenHeight.value =
-                      //   collapseWrapRef.value.offsetHeight / line.value || 0;
-                      // 默认隐藏
-                      getLive();
-                    } else {
-                      divDomList.value = [];
-                    }
-                  });
-                }}>
-                {item.label}
-              </NButton>
-            ))}
-          </NSpace>
-
-          {/* <NButton
-            type="primary"
-            class={styles.addTrain}
-            focusable={false}
-            strong
-            onClick={() => emit('add')}>
-            <img src={iconAdd} />
-            添加自定义教材
-          </NButton> */}
-        </div>
-        <NForm labelAlign="left" labelPlacement="left">
-          {forms.type === 'MUSIC' && (
-            <div class={[styles.collapsSection]}>
-              <NFormItem label="教材：">
-                <div
-                  class={[
-                    styles.collapseWrap,
-                    loadingCollapse.value ? '' : styles.hideButton,
-                    isCollapse.value ? '' : styles.isHidden
-                  ]}
-                  ref={collapseWrapRef}>
-                  <NSpace class={[styles.spaceSection2]}>
-                    {catchStore.getAllMusicCategories.map((music: any) => (
-                      <NButton
-                        ref={musicCateRef}
-                        secondary={forms.bookVersionId === music.id}
-                        quaternary={forms.bookVersionId !== music.id}
-                        strong
-                        focusable={false}
-                        type={
-                          forms.bookVersionId === music.id
-                            ? 'primary'
-                            : 'default'
-                        }
-                        onClick={() => {
-                          forms.bookVersionId = music.id;
-                          onSearch();
-                        }}>
-                        {music.name}
-                      </NButton>
-                    ))}
-                    {line.value > 1 && (
-                      <div
-                        style={{
-                          position: 'absolute',
-                          display: 'flex',
-                          alignItems: 'center'
-                        }}
-                        onClick={() => {
-                          setCollapse(!isCollapse.value);
-                        }}>
-                        <NImage
-                          previewDisabled
-                          src={isCollaose}
-                          class={[
-                            styles.collaoseBtn,
-                            isCollapse.value ? styles.isStart : ''
-                          ]}></NImage>
-                      </div>
-                    )}
-                  </NSpace>
-                </div>
-              </NFormItem>
-            </div>
-          )}
-
-          <NFormItem label="乐器：">
-            <NSpace class={styles.spaceSection}>
-              {catchStore.getSubjectInstruments.map((subject: any) =>
-                subject.instruments && subject.instruments.length > 1 ? (
-                  <NPopselect
-                    options={subject.instruments}
-                    trigger="hover"
-                    scrollable
-                    v-model:value={state.tempSubjectId}
-                    onUpdate:value={() => {
-                      forms.subjectId = state.tempSubjectId;
-                      onSearch();
-                    }}
-                    key={subject.value}
-                    class={[styles.popSelect]}>
-                    <span
-                      class={[
-                        styles.textBtn,
-                        selectChildObj(subject.instruments).selected &&
-                          styles.textBtnActive
-                      ]}>
-                      {selectChildObj(subject.instruments).name || subject.name}
-                      <i class={styles.iconArrow}></i>
-                    </span>
-                  </NPopselect>
-                ) : (
-                  <span
-                    class={[
-                      styles.textBtn,
-
-                      forms.subjectId === subject.value && styles.textBtnActive
-                    ]}
-                    onClick={() => {
-                      forms.subjectId = subject.value;
-
-                      state.tempSubjectId = null;
-                      onSearch();
-                    }}>
-                    {subject.name}
-                  </span>
-                )
-              )}
-            </NSpace>
-          </NFormItem>
-
-          <TheSearch
-            class={styles.inputSearch}
-            round
-            onSearch={(val: string) => {
-              forms.name = val;
-              onSearch();
-            }}
-          />
-        </NForm>
-      </div>
-    );
-  }
-});
+import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NForm,
+  NFormItem,
+  NImage,
+  NPopselect,
+  NSpace
+} from 'naive-ui';
+import iconAdd from '../../images/icon-add.png';
+import TheSearch from '/src/components/TheSearch';
+import { resourceTypeArray } from '/src/utils/searchArray';
+import { useCatchStore } from '/src/store/modules/catchData';
+import isCollaose from '../../images/isCollaose.png';
+export default defineComponent({
+  name: 'search-group',
+  emits: ['search', 'add'],
+  expose: ['init'],
+  setup(props, { emit }) {
+    const catchStore = useCatchStore();
+    const forms = reactive({
+      type: 'MUSIC', //
+      name: '',
+      bookVersionId: null,
+      subjectId: null
+    });
+    const state = reactive({
+      tempSubjectId: null
+    });
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+    const collapseWrapRef = ref();
+    const divDomList = ref([] as any);
+    const orginHeight = ref(0);
+    const line = ref(0);
+    const isCollapse = ref(false);
+    const loadingCollapse = ref(false); // 是否加载完成
+    const musicCateRef = (el: any) => {
+      if (el?.selfElRef) {
+        divDomList.value.push(el.selfElRef.parentNode);
+      }
+    };
+    const setCollapse = (flag: boolean) => {
+      isCollapse.value = flag;
+      getLive();
+    };
+    const getLive = () => {
+      try {
+        divDomList.value = [...new Set(divDomList.value)];
+        let offsetLeft = -1;
+        divDomList.value.forEach((item: any, index: number) => {
+          if (index === 0) {
+            line.value = 1;
+            offsetLeft = item.offsetLeft;
+          } else if (item.offsetLeft === offsetLeft && index != 0) {
+            // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
+            line.value++;
+          }
+          if (!isCollapse.value) {
+            if (line.value > 1) {
+              //从第3行开始 隐藏标签
+              item.style.display = 'none';
+              // 显示展开按钮  class名chu是在前面动态添加的
+            } else {
+              item.style.display = 'block';
+            }
+          } else {
+            item.style.display = 'block';
+          }
+        });
+        loadingCollapse.value = true;
+      } catch {
+        //
+      }
+    };
+
+    const selectChildObj = (item: any) => {
+      const obj: any = {};
+      item?.forEach((child: any) => {
+        if (child.id === forms.subjectId) {
+          obj.selected = true;
+          obj.name = child.name;
+        }
+      });
+      return obj;
+    };
+    onMounted(async () => {
+      // console.log('加载');
+      // 获取教材分类列表
+      await catchStore.getMusicSheetCategory();
+      // 获取声部列表
+      await catchStore.getSubjects();
+
+      if (forms.type === 'MUSIC') {
+        orginHeight.value = collapseWrapRef.value?.offsetHeight;
+        // hiddenHeight.value = collapseWrapRef.value.offsetHeight / line.value;
+        // 默认隐藏
+        getLive();
+      }
+    });
+    return () => (
+      <div class={styles.searchGroup}>
+        <div class={[styles.searchCatatory]}>
+          <NSpace size="small" class={styles.btnType}>
+            {resourceTypeArray.map((item: any) => (
+              <NButton
+                type={forms.type === item.value ? 'primary' : 'default'}
+                secondary={forms.type === item.value ? false : true}
+                round
+                size="small"
+                focusable={false}
+                onClick={() => {
+                  forms.type = item.value;
+                  forms.subjectId = null;
+                  state.tempSubjectId = null;
+
+                  onSearch();
+
+                  nextTick(() => {
+                    if (forms.type === 'MUSIC') {
+                      orginHeight.value = collapseWrapRef.value?.offsetHeight;
+                      // hiddenHeight.value =
+                      //   collapseWrapRef.value.offsetHeight / line.value || 0;
+                      // 默认隐藏
+                      getLive();
+                    } else {
+                      divDomList.value = [];
+                    }
+                  });
+                }}>
+                {item.label}
+              </NButton>
+            ))}
+          </NSpace>
+
+          {/* <NButton
+            type="primary"
+            class={styles.addTrain}
+            focusable={false}
+            strong
+            onClick={() => emit('add')}>
+            <img src={iconAdd} />
+            添加自定义教材
+          </NButton> */}
+        </div>
+        <NForm labelAlign="left" labelPlacement="left">
+          {forms.type === 'MUSIC' && (
+            <div class={[styles.collapsSection]}>
+              <NFormItem label="教材：">
+                <div
+                  class={[
+                    styles.collapseWrap,
+                    loadingCollapse.value ? '' : styles.hideButton,
+                    isCollapse.value ? '' : styles.isHidden
+                  ]}
+                  ref={collapseWrapRef}>
+                  <NSpace class={[styles.spaceSection2]}>
+                    {catchStore.getAllMusicCategories.map((music: any) => (
+                      <NButton
+                        ref={musicCateRef}
+                        secondary={forms.bookVersionId === music.id}
+                        quaternary={forms.bookVersionId !== music.id}
+                        strong
+                        focusable={false}
+                        type={
+                          forms.bookVersionId === music.id
+                            ? 'primary'
+                            : 'default'
+                        }
+                        onClick={() => {
+                          forms.bookVersionId = music.id;
+                          onSearch();
+                        }}>
+                        {music.name}
+                      </NButton>
+                    ))}
+                    {line.value > 1 && (
+                      <div
+                        class={styles.collaoseGroup}
+                        onClick={() => {
+                          setCollapse(!isCollapse.value);
+                        }}>
+                        <NImage
+                          previewDisabled
+                          src={isCollaose}
+                          class={[
+                            styles.collaoseBtn,
+                            isCollapse.value ? styles.isStart : ''
+                          ]}></NImage>
+                      </div>
+                    )}
+                  </NSpace>
+                </div>
+              </NFormItem>
+            </div>
+          )}
+
+          <NFormItem label="乐器：">
+            <NSpace class={styles.spaceSection}>
+              {catchStore.getSubjectInstruments.map((subject: any) =>
+                subject.instruments && subject.instruments.length > 1 ? (
+                  <NPopselect
+                    options={subject.instruments}
+                    trigger="hover"
+                    scrollable
+                    v-model:value={state.tempSubjectId}
+                    onUpdate:value={() => {
+                      forms.subjectId = state.tempSubjectId;
+                      onSearch();
+                    }}
+                    key={subject.value}
+                    class={[styles.popSelect]}>
+                    <span
+                      class={[
+                        styles.textBtn,
+                        selectChildObj(subject.instruments).selected &&
+                          styles.textBtnActive
+                      ]}>
+                      {selectChildObj(subject.instruments).name || subject.name}
+                      <i class={styles.iconArrow}></i>
+                    </span>
+                  </NPopselect>
+                ) : (
+                  <span
+                    class={[
+                      styles.textBtn,
+
+                      forms.subjectId === subject.value && styles.textBtnActive
+                    ]}
+                    onClick={() => {
+                      forms.subjectId = subject.value;
+
+                      state.tempSubjectId = null;
+                      onSearch();
+                    }}>
+                    {subject.name}
+                  </span>
+                )
+              )}
+            </NSpace>
+          </NFormItem>
+
+          <TheSearch
+            class={styles.inputSearch}
+            round
+            onSearch={(val: string) => {
+              forms.name = val;
+              onSearch();
+            }}
+          />
+        </NForm>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/components/directory-main/index.module.less

@@ -1,280 +1,280 @@
-.directoryList {
-  height: 100%;
-  padding: 24px 0;
-
-  :global {
-    .n-scrollbar-container {
-      max-height: 100%;
-    }
-  }
-
-  .scrollBar {
-    margin-top: 12px;
-    padding: 0 20px;
-    max-height: calc(100% - 152px - 12px);
-  }
-}
-
-.select-directory {
-  height: 49px;
-  line-height: 49px;
-  background: #E8F4FF;
-  border-radius: 10px;
-  padding: 0 16px;
-  margin: 0 20px 12px;
-  font-size: max(18px, 13Px);
-  font-weight: 600;
-  color: #131415;
-  line-height: 25px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-
-  &>span {
-    max-width: 240px;
-  }
-
-  .iconArrow {
-    font-size: 12px
-  }
-}
-
-.select-directory-info {
-  display: flex;
-  align-items: center;
-  padding: 0 0 32px 0;
-  margin: 0 24px;
-  border-bottom: 1px solid #F2F2F2;
-
-  .itemImg {
-    position: relative;
-    width: 85px;
-    height: 120px;
-    // margin: auto;
-    background-color: #EDEFF2;
-    background-image: url('./images/icon_default.svg');
-    background-repeat: no-repeat;
-    background-position: center center;
-    margin-right: 18px;
-    flex-shrink: 0;
-    transition: transform .2s ease;
-    cursor: pointer;
-
-    &:hover {
-      transform: scale(1.02);
-      transition: transform .2s ease;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 4px;
-      right: -4px;
-      width: 4px;
-      height: calc(100% - 8px);
-      background-color: #C5C5C5;
-      z-index: 1;
-    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 2px;
-      right: -2px;
-      width: 4px;
-      height: calc(100% - 4px);
-      background-color: #E7E7E7;
-      z-index: 2;
-    }
-
-    .itemBg {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 4;
-      background-repeat: no-repeat;
-      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0.08) 0%, transparent 0.5%), linear-gradient(to right, rgba(0, 0, 0, 0.1) 0.3%, rgba(255, 255, 255, 0.09) 1.1%, transparent 1.3%);
-      background-size: 50% 100%, 50% 100%;
-      background-position: 0% top, 9% top;
-    }
-
-    :global {
-      .n-image {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        z-index: 3;
-      }
-    }
-
-    img {
-      transition: opacity .3s;
-      opacity: 0;
-    }
-
-    img[data-loaded="true"] {
-      opacity: 1;
-    }
-
-  }
-
-  .itemContent {
-    h2 {
-      font-weight: 600;
-      font-size: max(18px, 14Px);
-      color: #131415;
-      line-height: 25px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 200px;
-    }
-
-    .subjects {
-      font-size: max(14px, 11Px);
-      color: #777777;
-      line-height: 20px;
-      padding: 11px 0 15px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 200px;
-    }
-
-    .changeDir {
-      position: relative;
-      background: #E8F4FF;
-      border-radius: 18px;
-      font-weight: 500;
-      font-size: max(14px, 11Px);
-      color: #0378EC;
-      line-height: 20px;
-      padding: 4px 12px;
-      display: inline-flex;
-      align-items: center;
-      cursor: pointer;
-
-      &:hover {
-
-        // background-color: #ecf4fa;
-        // color: #1888f7;
-        &::before {
-          content: '';
-          position: absolute;
-          inset: 0;
-          background-color: rgba(255, 255, 255, 0.2);
-        }
-      }
-
-      svg {
-        width: max(11px, 9Px);
-        height: max(10px, 8Px);
-        margin-right: 4px;
-        flex-shrink: 0;
-      }
-    }
-  }
-}
-
-.treeParent {
-  transition: height 1s ease-in-out;
-}
-
-.treeChild {
-  line-height: 54px;
-}
-
-.treeItem {
-  display: flex;
-  align-items: center;
-  line-height: 54px;
-  border-radius: 10px;
-  padding: 0 5px;
-  cursor: pointer;
-  border-radius: 10px;
-  font-size: max(17px, 12Px);
-  margin-bottom: 8px;
-
-  &.childItem:hover {
-
-    // background: #E8F4FF;
-
-    .title {
-      color: var(--n-color);
-    }
-  }
-
-  .title {
-    padding-left: 8px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-width: 280px !important;
-    color: rgba(0, 0, 0, .5);
-    display: flex;
-    align-items: center;
-
-    .dir {
-      flex-shrink: 1;
-      display: inline-block;
-      width: 16px;
-      height: 18px;
-      background: url('./images/icon-d.png') no-repeat center;
-      background-size: contain;
-      margin-right: 6px;
-    }
-
-    &.titleSelect {
-      color: var(--n-color);
-      // font-weight: bold;
-
-      .dir {
-        background: url('./images/icon-d-active.png') no-repeat center;
-        background-size: contain;
-      }
-    }
-  }
-
-  .arrow {
-    display: inline-block;
-    width: 14px;
-    height: 15px;
-    background: url('./images/arrow-default.png') no-repeat center;
-    background-size: contain;
-
-    &.arrowSelect {
-      background: url('./images/arrow-active.png') no-repeat center;
-      background-size: contain;
-    }
-  }
-
-  .childArrow {
-    width: 12px;
-  }
-
-  &.childItem {
-    padding-left: 30px;
-    font-size: max(15px, 12Px);
-
-
-    .title {
-      color: #131415;
-    }
-  }
-
-  &.childSelect {
-    background: #E8F4FF;
-
-    .title {
-      color: var(--n-color);
-      // font-weight: bold;
-    }
-  }
-}
-
-.coursewareModal {
-  width: 1150px;
+.directoryList {
+  height: 100%;
+  padding: 24px 0;
+
+  :global {
+    .n-scrollbar-container {
+      max-height: 100%;
+    }
+  }
+
+  .scrollBar {
+    margin-top: 12px;
+    padding: 0 20px;
+    max-height: calc(100% - 152px - 12px);
+  }
+}
+
+.select-directory {
+  height: 49px;
+  line-height: 49px;
+  background: #E8F4FF;
+  border-radius: 10px;
+  padding: 0 16px;
+  margin: 0 20px 12px;
+  font-size: max(18px, 13Px);
+  font-weight: 600;
+  color: #131415;
+  line-height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+
+  &>span {
+    max-width: 240px;
+  }
+
+  .iconArrow {
+    font-size: 12px
+  }
+}
+
+.select-directory-info {
+  display: flex;
+  align-items: center;
+  padding: 0 0 32px 0;
+  margin: 0 24px;
+  border-bottom: 1px solid #F2F2F2;
+
+  .itemImg {
+    position: relative;
+    width: 85px;
+    height: 120px;
+    // margin: auto;
+    background-color: #EDEFF2;
+    background-image: url('./images/icon_default.svg');
+    background-repeat: no-repeat;
+    background-position: center center;
+    margin-right: 18px;
+    flex-shrink: 0;
+    transition: transform .2s ease;
+    cursor: pointer;
+
+    &:hover {
+      transform: scale(1.02);
+      transition: transform .2s ease;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 4px;
+      right: -4px;
+      width: 4px;
+      height: calc(100% - 8px);
+      background-color: #C5C5C5;
+      z-index: 1;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 2px;
+      right: -2px;
+      width: 4px;
+      height: calc(100% - 4px);
+      background-color: #E7E7E7;
+      z-index: 2;
+    }
+
+    .itemBg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 4;
+      background-repeat: no-repeat;
+      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0.08) 0%, transparent 0.5%), linear-gradient(to right, rgba(0, 0, 0, 0.1) 0.3%, rgba(255, 255, 255, 0.09) 1.1%, transparent 1.3%);
+      background-size: 50% 100%, 50% 100%;
+      background-position: 0% top, 9% top;
+    }
+
+    :global {
+      .n-image {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        z-index: 3;
+      }
+    }
+
+    img {
+      transition: opacity .3s;
+      opacity: 0;
+    }
+
+    img[data-loaded="true"] {
+      opacity: 1;
+    }
+
+  }
+
+  .itemContent {
+    h2 {
+      font-weight: 600;
+      font-size: max(18px, 14Px);
+      color: #131415;
+      line-height: 25px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 200px;
+    }
+
+    .subjects {
+      font-size: max(14px, 11Px);
+      color: #777777;
+      line-height: 20px;
+      padding: 11px 0 15px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 200px;
+    }
+
+    .changeDir {
+      position: relative;
+      background: #E8F4FF;
+      border-radius: 18px;
+      font-weight: 500;
+      font-size: max(14px, 11Px);
+      color: #0378EC;
+      line-height: 20px;
+      padding: 4px 12px;
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+
+      &:hover {
+
+        // background-color: #ecf4fa;
+        // color: #1888f7;
+        &::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background-color: rgba(255, 255, 255, 0.2);
+        }
+      }
+
+      svg {
+        width: max(11px, 9Px);
+        height: max(10px, 8Px);
+        margin-right: 4px;
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+
+.treeParent {
+  transition: height 1s ease-in-out;
+}
+
+.treeChild {
+  line-height: 54px;
+}
+
+.treeItem {
+  display: flex;
+  align-items: center;
+  line-height: 54px;
+  border-radius: 10px;
+  padding: 0 5px;
+  cursor: pointer;
+  border-radius: 10px;
+  font-size: max(17px, 12Px);
+  margin-bottom: 8px;
+
+  &.childItem:hover {
+
+    // background: #E8F4FF;
+
+    .title {
+      color: var(--n-color);
+    }
+  }
+
+  .title {
+    padding-left: 8px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 280px !important;
+    color: rgba(0, 0, 0, .5);
+    display: flex;
+    align-items: center;
+
+    .dir {
+      flex-shrink: 0;
+      display: inline-block;
+      width: 16px;
+      height: 18px;
+      background: url('./images/icon-d.png') no-repeat center;
+      background-size: contain;
+      margin-right: 6px;
+    }
+
+    &.titleSelect {
+      color: var(--n-color);
+      // font-weight: bold;
+
+      .dir {
+        background: url('./images/icon-d-active.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+  }
+
+  .arrow {
+    display: inline-block;
+    width: 14px;
+    height: 15px;
+    background: url('./images/arrow-default.png') no-repeat center;
+    background-size: contain;
+
+    &.arrowSelect {
+      background: url('./images/arrow-active.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+
+  .childArrow {
+    width: 12px;
+  }
+
+  &.childItem {
+    padding-left: 30px;
+    font-size: max(15px, 12Px);
+
+
+    .title {
+      color: #131415;
+    }
+  }
+
+  &.childSelect {
+    background: #E8F4FF;
+
+    .title {
+      color: var(--n-color);
+      // font-weight: bold;
+    }
+  }
+}
+
+.coursewareModal {
+  width: 1150px;
 }

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

@@ -1,442 +1,519 @@
-import {
-  PropType,
-  defineComponent,
-  onMounted,
-  reactive,
-  ref,
-  toRef
-} from 'vue';
-import styles from './index.module.less';
-import {
-  NButton,
-  NDatePicker,
-  NForm,
-  NFormItem,
-  NInput,
-  NModal,
-  NScrollbar,
-  NSelect,
-  NSpace,
-  useMessage
-} from 'naive-ui';
-import { BOOK_DATA } from '/src/views/natural-resources/model/add-teaching';
-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';
-import AssignStudent from './assign-student';
-import { state } from '/src/state';
-import { nextTick } from 'process';
-import useDrag from '@/hooks/useDrag';
-import Dragbom from '@/hooks/useDrag/dragbom';
-import { useUserStore } from '@/store/modules/users';
-import { api_getCurrentGradeYear } from '/src/views/studentList/api';
-
-export default defineComponent({
-  name: 'assign-homework',
-  props: {
-    classGroupId: {
-      type: String,
-      default: ''
-    },
-    courseScheduleId: {
-      type: String,
-      default: ''
-    },
-    /** 课件编号 */
-    chapterLessonCoursewareId: {
-      type: String,
-      default: ''
-    },
-    item: {
-      type: Object,
-      default: () => ({})
-    },
-    /** 初始数据 */
-    trainList: {
-      type: Array,
-      default: () => []
-    },
-    homeworkType: {
-      type: String as PropType<'CLASSWORK' | 'HOMEWORK'>,
-      default: 'CLASSWORK'
-    },
-    from: {
-      // 来自哪里
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['close', 'confirm'],
-  setup(props, { emit }) {
-    const message = useMessage();
-    const prepareStore = usePrepareStore();
-    const forms = reactive({
-      gradeYear: '' as any,
-      currentTime: dayjs(dayjs().format('YYYY-MM-DD')).valueOf(),
-      homeworkObj: 'CLASS' as 'PERSON' | 'CLASS',
-      homeworkType: props.homeworkType,
-      workVisiable: false,
-      id: null as any,
-      uploading: false,
-      title: props.item.title,
-      courseScheduleId: props.courseScheduleId || null,
-      chapterLessonCoursewareId: props.chapterLessonCoursewareId || null,
-      gradeList: [] as any,
-      classList: [] as any,
-      currentGradeNum: null,
-      expireDate: dayjs().add(7, 'day').format('YYYY-MM-DD HH:mm') as any, // 默认7天
-      classGroupId: null as any,
-      studentList: [] as any,
-      selectIds: [] as any
-    });
-    const formsRef = ref();
-
-    // 获取年级班级
-    const getClassGroupList = async () => {
-      try {
-        const defaultSelectClassGroupId =
-          props.classGroupId || prepareStore.getClassGroupId;
-        const { data } = await classGroupList({
-          upgradeFlag: true,
-          gradeYear: forms.gradeYear
-        });
-        const cList = data || [];
-        const gradeList: any = [];
-        cList.forEach((item: any) => {
-          const classList: any = [];
-          item.classGroupList.forEach((i: any) => {
-            classList.push({
-              label: i.currentClass + '班',
-              value: i.id,
-              lastStudy: i.lastStudy,
-              preStudentNum: i.preStudentNum
-            });
-
-            if (i.id === defaultSelectClassGroupId) {
-              forms.currentGradeNum = i.currentGradeNum;
-              forms.classGroupId = [i.id];
-            }
-          });
-
-          gradeList.push({
-            label: gradeToCN[item.currentGradeNum],
-            value: item.currentGradeNum,
-            childrens: classList
-          });
-        });
-        forms.gradeList = gradeList;
-
-        if (forms.currentGradeNum) {
-          getClassList();
-        }
-      } catch {
-        //
-      }
-    };
-
-    const getClassList = async () => {
-      try {
-        forms.gradeList.forEach((item: any) => {
-          if (item.value === forms.currentGradeNum) {
-            forms.classList = item.childrens;
-          }
-        });
-      } catch {
-        //
-      }
-    };
-
-    const onSubmit = async () => {
-      formsRef.value?.validate(async (err: any) => {
-        if (err) {
-          return;
-        }
-        forms.uploading = true;
-        try {
-          const trainList: any = props.item.lessonPreTrainingDetails || [];
-          const details: any[] = [];
-          trainList.forEach((item: any) => {
-            details.push({
-              trainingType: item.trainingType,
-              musicId: item.musicId,
-              trainingConfigJsonObject: item.trainingConfigJson
-            });
-          });
-          const params = {
-            name: forms.title,
-            homeworkObj: forms.homeworkObj,
-            homeworkType: forms.homeworkType,
-            lessonTrainingDetails: details,
-            expireDate: dayjs(forms.expireDate).format('YYYY-MM-DD HH:mm:ss'),
-            classGroupId: forms.classGroupId
-              ? forms.classGroupId.join(',')
-              : null,
-            studentIds: null as any,
-            courseScheduleId: forms.courseScheduleId,
-            chapterLessonCoursewareId: forms.chapterLessonCoursewareId // 课件编号
-          };
-          if (forms.homeworkObj === 'PERSON') {
-            params.classGroupId = '';
-            const ids: any[] = [];
-            forms.studentList.forEach((item: any) => {
-              ids.push(item.id);
-            });
-            params.studentIds = ids.join(',');
-          }
-          await lessonTrainingAdd(params);
-          message.success('布置成功');
-          emit('close');
-          emit('confirm');
-        } catch {
-          //
-        }
-        forms.uploading = false;
-      });
-    };
-    const getCurrentGradeYear = async () => {
-      try {
-        const { data } = await api_getCurrentGradeYear({});
-        console.log(data);
-        forms.gradeYear = data;
-      } catch {
-        //
-      }
-    };
-
-    onMounted(async () => {
-      await getCurrentGradeYear();
-      await getClassGroupList();
-    });
-    // 选择学生
-    let assignHomeworkStuBoxDragData: any;
-    let assignHomeworkStuBoxClass: string;
-    if (props.from === 'class') {
-      const users = useUserStore();
-      assignHomeworkStuBoxClass = 'assignHomeworkStuBoxClass_drag';
-      assignHomeworkStuBoxDragData = useDrag(
-        [
-          `${assignHomeworkStuBoxClass}>.n-card-header`,
-          `${assignHomeworkStuBoxClass} .bom_drag`
-        ],
-        assignHomeworkStuBoxClass,
-        toRef(forms, 'workVisiable'),
-        users.info.id
-      );
-    }
-    return () => (
-      <div class={styles.assignHomeworkContainer}>
-        <NForm
-          ref={formsRef}
-          model={forms}
-          labelAlign="right"
-          labelWidth={'auto'}
-          labelPlacement="left">
-          <NFormItem
-            label="布置方式"
-            path="homeworkObj"
-            rule={[{ required: true, message: '请选择布置方式' }]}>
-            <NSpace>
-              <NButton
-                secondary
-                class={[
-                  styles.switch,
-                  forms.homeworkObj === 'CLASS' ? styles.active : ''
-                ]}
-                onClick={() => (forms.homeworkObj = 'CLASS')}>
-                按班级布置
-              </NButton>
-              <NButton
-                secondary
-                class={[
-                  styles.switch,
-                  forms.homeworkObj === 'PERSON' ? styles.active : ''
-                ]}
-                onClick={() => (forms.homeworkObj = 'PERSON')}>
-                按学生布置
-              </NButton>
-            </NSpace>
-          </NFormItem>
-          <NFormItem
-            label="作业标题"
-            path="title"
-            rule={[
-              {
-                required: true,
-                message: '请输入作业标题',
-                trigger: 'blur'
-              }
-            ]}>
-            <NInput
-              v-model:value={forms.title}
-              placeholder="请选择作业标题"
-              clearable
-            />
-          </NFormItem>
-
-          <NFormItem
-            label="年级"
-            path="currentGradeNum"
-            rule={[
-              {
-                required: true,
-                message: '请选择年级',
-                trigger: 'change',
-                type: 'number'
-              }
-            ]}>
-            <NSelect
-              disabled={props.classGroupId ? true : false}
-              v-model:value={forms.currentGradeNum}
-              placeholder="请选择年级"
-              options={forms.gradeList}
-              clearable
-              onUpdate:value={() => {
-                forms.classGroupId = null;
-                getClassList();
-              }}
-            />
-          </NFormItem>
-          {forms.homeworkObj === 'CLASS' ? (
-            <NFormItem
-              label="班级"
-              path="classGroupId"
-              rule={[
-                {
-                  required: true,
-                  message: '请选择班级',
-                  trigger: 'change',
-                  type: 'array'
-                }
-              ]}>
-              <NSelect
-                disabled={props.classGroupId ? true : false}
-                options={forms.classList}
-                v-model:value={forms.classGroupId}
-                placeholder="请选择班级"
-                clearable
-                multiple
-              />
-            </NFormItem>
-          ) : (
-            <NFormItem
-              label="学生"
-              path="studentList"
-              rule={[
-                {
-                  required: true,
-                  message: '请选择学生',
-                  trigger: 'change',
-                  type: 'array'
-                }
-              ]}
-              class={styles.studentSection}>
-              <span
-                class={[
-                  styles.selectStudentBtn,
-                  !forms.currentGradeNum && styles.disabled
-                ]}
-                onClick={() => {
-                  if (!forms.currentGradeNum) {
-                    return;
-                  }
-                  const tempIds: any = [];
-                  forms.studentList.forEach((item: any) => {
-                    tempIds.push(item.id);
-                  });
-                  forms.selectIds = tempIds;
-                  forms.workVisiable = true;
-                }}>
-                选择学生
-              </span>
-              {forms.studentList.length > 0 && (
-                <NScrollbar class={styles.studentList}>
-                  <span class={styles.firstName}>
-                    当前选中({forms.studentList.length || 0}):
-                  </span>
-                  {forms.studentList.map((item: any, index: number) => (
-                    <span class={styles.studentItem}>
-                      {item.name}{' '}
-                      <i
-                        class={styles.iconDelete}
-                        onClick={() => {
-                          forms.studentList.splice(index, 1);
-                        }}></i>
-                    </span>
-                  ))}
-                </NScrollbar>
-              )}
-            </NFormItem>
-          )}
-
-          <NFormItem
-            label="截止时间"
-            path="expireDate"
-            rule={[
-              { required: true, message: '请选择截止时间', trigger: 'change' }
-            ]}>
-            <NDatePicker
-              v-model:formatted-value={forms.expireDate}
-              type="datetime"
-              clearable
-              // valueFormat="yyyy-MM-dd HH:mm"
-              format="yyyy-MM-dd HH:mm"
-              style={{ width: '100%' }}
-              isDateDisabled={(ts: number) => {
-                return ts < forms.currentTime;
-              }}
-            />
-          </NFormItem>
-
-          <NSpace class={styles.updateBtnGroup}>
-            <NButton strong type="default" round onClick={() => emit('close')}>
-              取消布置
-            </NButton>
-            <NButton
-              strong
-              type="primary"
-              round
-              disabled={forms.uploading}
-              loading={forms.uploading}
-              onClick={onSubmit}>
-              确认布置
-            </NButton>
-          </NSpace>
-        </NForm>
-
-        <NModal
-          v-model:show={forms.workVisiable}
-          style={
-            props.from === 'class'
-              ? {
-                  width: '640px',
-                  ...assignHomeworkStuBoxDragData.styleDrag.value
-                }
-              : {
-                  width: '640px'
-                }
-          }
-          preset="card"
-          showIcon={false}
-          class={['modalTitle background', assignHomeworkStuBoxClass]}
-          title={'选择学生'}
-          blockScroll={false}>
-          <AssignStudent
-            classGroupId={props.classGroupId}
-            currentGradeNum={forms.currentGradeNum as any}
-            selectIds={forms.selectIds}
-            studentList={forms.studentList}
-            classList={forms.classList}
-            onClose={() => (forms.workVisiable = false)}
-            onConfirm={(val: any) => {
-              forms.studentList = val || [];
-              forms.workVisiable = false;
-            }}
-          />
-          {props.from === 'class' && <Dragbom></Dragbom>}
-        </NModal>
-      </div>
-    );
-  }
-});
+import {
+  PropType,
+  defineComponent,
+  onMounted,
+  reactive,
+  ref,
+  toRef
+} from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NDatePicker,
+  NForm,
+  NFormItem,
+  NInput,
+  NModal,
+  NScrollbar,
+  NSelect,
+  NSpace,
+  useMessage
+} from 'naive-ui';
+import { 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';
+import AssignStudent from './assign-student';
+import useDrag from '@/hooks/useDrag';
+import Dragbom from '@/hooks/useDrag/dragbom';
+import { useUserStore } from '@/store/modules/users';
+import { api_getCurrentGradeYear } from '/src/views/studentList/api';
+import request from '/src/utils/request';
+
+export default defineComponent({
+  name: 'assign-homework',
+  props: {
+    classGroupId: {
+      type: String,
+      default: ''
+    },
+    courseScheduleId: {
+      type: String,
+      default: ''
+    },
+    /** 课件编号 */
+    chapterLessonCoursewareId: {
+      type: String,
+      default: ''
+    },
+    item: {
+      type: Object,
+      default: () => ({})
+    },
+    /** 初始数据 */
+    trainList: {
+      type: Array,
+      default: () => []
+    },
+    homeworkType: {
+      type: String as PropType<'CLASSWORK' | 'HOMEWORK'>,
+      default: 'CLASSWORK'
+    },
+    from: {
+      // 来自哪里
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['close', 'confirm'],
+  setup(props, { emit }) {
+    const message = useMessage();
+    const prepareStore = usePrepareStore();
+    const forms = reactive({
+      gradeYear: '' as any,
+      currentTime: dayjs(dayjs().format('YYYY-MM-DD')).valueOf(),
+      homeworkObj: 'CLASS' as 'PERSON' | 'CLASS',
+      homeworkType: props.homeworkType,
+      workVisiable: false,
+      id: null as any,
+      uploading: false,
+      title: props.item.title,
+      courseScheduleId: props.courseScheduleId || null,
+      chapterLessonCoursewareId: props.chapterLessonCoursewareId || null,
+      gradeList: [] as any,
+      classList: [] as any,
+      currentGradeNum: null,
+      expireDate: dayjs().add(7, 'day').format('YYYY-MM-DD HH:mm') as any, // 默认7天
+      classGroupId: null as any,
+      studentList: [] as any,
+      selectIds: [] as any
+    });
+    const formsRef = ref();
+    const maxDeadlineTime = ref(0);
+    const pickerEndTime = ref<any>(null);
+    // 获取年级班级
+    const getClassGroupList = async () => {
+      try {
+        const defaultSelectClassGroupId =
+          props.classGroupId || prepareStore.getClassGroupId;
+        const { data } = await classGroupList({
+          upgradeFlag: true,
+          gradeYear: forms.gradeYear
+        });
+        const cList = data || [];
+        const gradeList: any = [];
+        cList.forEach((item: any) => {
+          const classList: any = [];
+          item.classGroupList.forEach((i: any) => {
+            classList.push({
+              label: i.currentClass + '班',
+              value: i.id,
+              lastStudy: i.lastStudy,
+              preStudentNum: i.preStudentNum
+            });
+
+            if (i.id === defaultSelectClassGroupId) {
+              forms.currentGradeNum = i.currentGradeNum;
+              forms.classGroupId = [i.id];
+            }
+          });
+
+          gradeList.push({
+            label: gradeToCN[item.currentGradeNum],
+            value: item.currentGradeNum,
+            childrens: classList
+          });
+        });
+        forms.gradeList = gradeList;
+
+        if (forms.currentGradeNum) {
+          getClassList();
+        }
+      } catch {
+        //
+      }
+    };
+
+    const getClassList = async () => {
+      try {
+        forms.gradeList.forEach((item: any) => {
+          if (item.value === forms.currentGradeNum) {
+            forms.classList = item.childrens;
+          }
+        });
+      } catch {
+        //
+      }
+    };
+
+    const onSubmit = async () => {
+      formsRef.value?.validate(async (err: any) => {
+        if (err) {
+          return;
+        }
+        forms.uploading = true;
+        try {
+          const trainList: any = props.item.lessonPreTrainingDetails || [];
+          const details: any[] = [];
+          trainList.forEach((item: any) => {
+            details.push({
+              trainingType: item.trainingType,
+              musicId: item.musicId,
+              trainingConfigJsonObject: item.trainingConfigJson
+            });
+          });
+          const params = {
+            name: forms.title,
+            homeworkObj: forms.homeworkObj,
+            homeworkType: forms.homeworkType,
+            lessonTrainingDetails: details,
+            expireDate: dayjs(forms.expireDate).format('YYYY-MM-DD HH:mm:ss'),
+            classGroupId: forms.classGroupId
+              ? forms.classGroupId.join(',')
+              : null,
+            studentIds: null as any,
+            courseScheduleId: forms.courseScheduleId,
+            chapterLessonCoursewareId: forms.chapterLessonCoursewareId // 课件编号
+          };
+          if (forms.homeworkObj === 'PERSON') {
+            params.classGroupId = '';
+            const ids: any[] = [];
+            forms.studentList.forEach((item: any) => {
+              ids.push(item.id);
+            });
+            params.studentIds = ids.join(',');
+          }
+          await lessonTrainingAdd(params);
+          message.success('布置成功');
+          emit('close');
+          emit('confirm');
+        } catch {
+          //
+        }
+        forms.uploading = false;
+      });
+    };
+    const getCurrentGradeYear = async () => {
+      try {
+        const { data } = await api_getCurrentGradeYear({});
+        console.log(data);
+        forms.gradeYear = data;
+      } catch {
+        //
+      }
+    };
+
+    const getDefaultParamConfig = async () => {
+      try {
+        const { data } = await request.get(
+          '/edu-app/open/paramConfig/queryByParamName',
+          {
+            params: {
+              paramName: 'homework_max_deadline_time'
+            }
+          }
+        );
+        maxDeadlineTime.value = data.paramValue || 0;
+
+        // 处理截止时间显示
+        /**
+         1、当时间没有设置时，全部时间；
+         2、设置了时间，小于7天；
+         3、设置了时间，大于7天；
+         */
+        if (maxDeadlineTime.value > 0) {
+          pickerEndTime.value = dayjs(
+            dayjs()
+              .add(Number(maxDeadlineTime.value) + 1, 'day')
+              .format('YYYY-MM-DD')
+          ).valueOf();
+          if (Number(maxDeadlineTime.value) < 7) {
+            forms.expireDate = dayjs()
+              .add(Number(maxDeadlineTime.value), 'day')
+              .format('YYYY-MM-DD HH:mm');
+          }
+
+          console.log(
+            dayjs()
+              .add(Number(maxDeadlineTime.value), 'day')
+              .format('YYYY-MM-DD'),
+            'pickerEndTime.value'
+          );
+          // state.pickerEndTime =
+        }
+      } catch {
+        //
+      }
+    };
+
+    const dateDisabled = (ts: number): boolean => {
+      /**
+        1、当时间没有设置时，全部时间；
+        2、设置了时间，小于7天；
+        3、设置了时间，大于7天；
+        */
+      let status = false;
+      if (pickerEndTime.value) {
+        status = ts < forms.currentTime || ts >= pickerEndTime.value;
+      } else {
+        status = ts < forms.currentTime;
+      }
+      console.log(
+        status,
+        '1212',
+        ts > pickerEndTime.value,
+        forms.currentTime,
+        ts,
+        pickerEndTime.value
+      );
+      // pickerEndTime.value && pickerEndTime.value > ts;
+      return status;
+    };
+
+    onMounted(async () => {
+      await getDefaultParamConfig();
+      await getCurrentGradeYear();
+      await getClassGroupList();
+    });
+    // 选择学生
+    let assignHomeworkStuBoxDragData: any;
+    let assignHomeworkStuBoxClass: string;
+    if (props.from === 'class') {
+      const users = useUserStore();
+      assignHomeworkStuBoxClass = 'assignHomeworkStuBoxClass_drag';
+      assignHomeworkStuBoxDragData = useDrag(
+        [
+          `${assignHomeworkStuBoxClass}>.n-card-header`,
+          `${assignHomeworkStuBoxClass} .bom_drag`
+        ],
+        assignHomeworkStuBoxClass,
+        toRef(forms, 'workVisiable'),
+        users.info.id
+      );
+    }
+    return () => (
+      <div class={styles.assignHomeworkContainer}>
+        <NForm
+          ref={formsRef}
+          model={forms}
+          labelAlign="right"
+          labelWidth={'80'}
+          labelPlacement="left">
+          <NFormItem
+            label="布置方式"
+            path="homeworkObj"
+            rule={[{ required: true, message: '请选择布置方式' }]}>
+            <NSpace>
+              <NButton
+                secondary
+                class={[
+                  styles.switch,
+                  forms.homeworkObj === 'CLASS' ? styles.active : ''
+                ]}
+                onClick={() => (forms.homeworkObj = 'CLASS')}>
+                按班级布置
+              </NButton>
+              <NButton
+                secondary
+                class={[
+                  styles.switch,
+                  forms.homeworkObj === 'PERSON' ? styles.active : ''
+                ]}
+                onClick={() => (forms.homeworkObj = 'PERSON')}>
+                按学生布置
+              </NButton>
+            </NSpace>
+          </NFormItem>
+          <NFormItem
+            label="作业标题"
+            path="title"
+            rule={[
+              {
+                required: true,
+                message: '请输入作业标题',
+                trigger: 'blur'
+              }
+            ]}>
+            <NInput
+              v-model:value={forms.title}
+              placeholder="请选择作业标题"
+              clearable
+            />
+          </NFormItem>
+
+          <NFormItem
+            label="年级"
+            path="currentGradeNum"
+            rule={[
+              {
+                required: true,
+                message: '请选择年级',
+                trigger: 'change',
+                type: 'number'
+              }
+            ]}>
+            <NSelect
+              disabled={props.classGroupId ? true : false}
+              v-model:value={forms.currentGradeNum}
+              placeholder="请选择年级"
+              options={forms.gradeList}
+              clearable
+              onUpdate:value={() => {
+                forms.classGroupId = null;
+                getClassList();
+              }}
+            />
+          </NFormItem>
+          {forms.homeworkObj === 'CLASS' ? (
+            <NFormItem
+              label="班级"
+              path="classGroupId"
+              rule={[
+                {
+                  required: true,
+                  message: '请选择班级',
+                  trigger: 'change',
+                  type: 'array'
+                }
+              ]}>
+              <NSelect
+                disabled={props.classGroupId ? true : false}
+                options={forms.classList}
+                v-model:value={forms.classGroupId}
+                placeholder="请选择班级"
+                clearable
+                multiple
+              />
+            </NFormItem>
+          ) : (
+            <NFormItem
+              label="学生"
+              path="studentList"
+              rule={[
+                {
+                  required: true,
+                  message: '请选择学生',
+                  trigger: 'change',
+                  type: 'array'
+                }
+              ]}
+              class={styles.studentSection}>
+              <span
+                class={[
+                  styles.selectStudentBtn,
+                  !forms.currentGradeNum && styles.disabled
+                ]}
+                onClick={() => {
+                  if (!forms.currentGradeNum) {
+                    return;
+                  }
+                  const tempIds: any = [];
+                  forms.studentList.forEach((item: any) => {
+                    tempIds.push(item.id);
+                  });
+                  forms.selectIds = tempIds;
+                  forms.workVisiable = true;
+                }}>
+                选择学生
+              </span>
+              {forms.studentList.length > 0 && (
+                <NScrollbar class={styles.studentList}>
+                  <span class={styles.firstName}>
+                    当前选中({forms.studentList.length || 0}):
+                  </span>
+                  {forms.studentList.map((item: any, index: number) => (
+                    <span class={styles.studentItem}>
+                      {item.name}{' '}
+                      <i
+                        class={styles.iconDelete}
+                        onClick={() => {
+                          forms.studentList.splice(index, 1);
+                        }}></i>
+                    </span>
+                  ))}
+                </NScrollbar>
+              )}
+            </NFormItem>
+          )}
+
+          <NFormItem
+            label="截止时间"
+            path="expireDate"
+            rule={[
+              { required: true, message: '请选择截止时间', trigger: 'change' }
+            ]}>
+            <NDatePicker
+              v-model:formatted-value={forms.expireDate}
+              type="datetime"
+              clearable
+              // valueFormat="yyyy-MM-dd HH:mm"
+              format="yyyy-MM-dd HH:mm"
+              style={{ width: '100%' }}
+              isDateDisabled={dateDisabled}
+            />
+          </NFormItem>
+
+          {maxDeadlineTime.value > 0 && (
+            <NFormItem label=" ">
+              <div class={styles.expireDateTip}>
+                <i class={styles.expireDateIcon}></i>
+                <span>
+                  作业截止{maxDeadlineTime.value}
+                  天后，学生上传的文件将过期，请及时查看
+                </span>
+              </div>
+            </NFormItem>
+          )}
+
+          <NSpace class={styles.updateBtnGroup}>
+            <NButton strong type="default" round onClick={() => emit('close')}>
+              取消布置
+            </NButton>
+            <NButton
+              strong
+              type="primary"
+              round
+              disabled={forms.uploading}
+              loading={forms.uploading}
+              onClick={onSubmit}>
+              确认布置
+            </NButton>
+          </NSpace>
+        </NForm>
+
+        <NModal
+          v-model:show={forms.workVisiable}
+          style={
+            props.from === 'class'
+              ? {
+                  width: '640px',
+                  ...assignHomeworkStuBoxDragData.styleDrag.value
+                }
+              : {
+                  width: '640px'
+                }
+          }
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background', assignHomeworkStuBoxClass]}
+          title={'选择学生'}
+          blockScroll={false}>
+          <AssignStudent
+            classGroupId={props.classGroupId}
+            currentGradeNum={forms.currentGradeNum as any}
+            selectIds={forms.selectIds}
+            studentList={forms.studentList}
+            classList={forms.classList}
+            onClose={() => (forms.workVisiable = false)}
+            onConfirm={(val: any) => {
+              forms.studentList = val || [];
+              forms.workVisiable = false;
+            }}
+          />
+          {props.from === 'class' && <Dragbom></Dragbom>}
+        </NModal>
+      </div>
+    );
+  }
+});

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

@@ -1,350 +1,372 @@
-.btnGroup {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-left: 36px !important;
-  height: 40px;
-  padding-right: 36px !important;
-
-
-  :global {
-    .n-base-selection {
-      --n-height: max(40px, 36Px) !important;
-      width: 160px;
-      font-size: 15px;
-      border-radius: 8px !important;
-    }
-
-    .n-base-selection-input__content {
-      font-size: max(15px, 13Px);
-    }
-
-    .n-button {
-      border-radius: 8px;
-      height: 38px;
-      font-size: max(18px, 13Px);
-      font-weight: 600 !important;
-      padding: 0 27px;
-      margin-left: 14px;
-    }
-
-    .n-button--default-type {
-      background: #E8F4FF !important;
-      color: #0378EC !important;
-
-      &:not(.n-button--disabled):hover {
-        background: #E8F4FF;
-      }
-
-      .n-button__border {
-        border: 1px solid #198CFE;
-      }
-    }
-
-    .n-button--error-type {
-      background: #FDEBED !important;
-      color: #EC3A4E !important;
-
-      &:not(.n-button--disabled):hover,
-      &:not(.n-button--disabled):active {
-        background: #FDEBED;
-        color: #EC3A4E;
-      }
-
-      .n-button__border {
-        border: 1px solid #EC3A4E;
-      }
-    }
-  }
-}
-:global{
-  .assignHomeworkStuBoxClass_drag{
-    .assignStudent{
-      >div{
-        padding-bottom: 36px;
-      }
-    }
-  }
-  .assignHomeworkStuBoxClass_drag,.workSetingBoxClass_drag,.workClearBoxClass_drag,.workSaveBoxClass_drag,.workArrangeImmediatelyBoxClass_drag{
-    .bom_drag{
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      z-index: 1;
-    }
-  }
-}
-.tipsContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex: 1 auto;
-  margin-right: 30px;
-  height: 40px;
-  padding: 0 16px;
-  background: #EDF7FF;
-  border-radius: 9px;
-  max-width: 600px;
-
-  .tipsLeft {
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    color: rgba(0, 0, 0, 0.88);
-
-
-    .tips {
-      line-height: 38px;
-    }
-  }
-
-  .iconTips {
-    margin-right: 9px;
-    width: 18px;
-    height: 18px;
-  }
-
-  .btnNoTips {
-    font-size: 16px;
-    font-weight: 500;
-    color: #1677FF;
-    cursor: pointer;
-  }
-}
-
-.btnItem {
-  display: flex;
-  align-items: center;
-
-  .btnTitle {
-    flex-shrink: 0;
-    font-size: max(18px, 13Px);
-    font-weight: 600;
-  }
-
-  // &:last-child {
-  //   margin-left: 12px;
-  // }
-
-  :global {
-    .n-input {
-      --n-height: 42px !important;
-      width: 280px;
-    }
-  }
-}
-
-.btnGroupClass {
-  margin-top: 10px;
-}
-
-.listContainer {
-  margin-top: 12px;
-  // // 52 + 28 + 38
-
-
-  max-height: calc(var(--window-page-lesson-height) - 196px);
-
-  .listSection {
-    min-height: calc(var(--window-page-lesson-height) - 196px);
-  }
-
-  &.listContainerDrag {
-    max-height: calc(var(--window-page-lesson-height) - 148px);
-
-    .listSection {
-      min-height: calc(var(--window-page-lesson-height) - 148px);
-    }
-  }
-
-  .emptySection {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.list {
-  padding: 12px 36px 12px;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-  gap: 20px 2%;
-
-  &>div {
-    width: 32% !important;
-  }
-
-  .itemBlock {
-    &>div {
-      width: 100% !important;
-    }
-  }
-}
-
-.trainEditModal {
-  width: 494px;
-}
-
-.assignHomework {
-  width: 560px;
-}
-
-.assignHomeworkContainer {
-  padding: 24px 30px;
-
-
-  .updateBtnGroup {
-    padding: 0;
-    justify-content: center !important;
-
-    :global {
-      .n-button {
-        height: 48px !important;
-        min-width: 156px;
-      }
-    }
-  }
-
-  .switch {
-    height: 37px !important;
-    border-radius: 8px;
-
-    &.active {
-      background: #198CFE;
-      color: #fff;
-    }
-  }
-
-  .studentSection {
-    :global {
-      .n-form-item-blank {
-        flex-direction: column;
-        align-items: flex-start;
-      }
-    }
-  }
-
-  .selectStudentBtn {
-    // padding-top: 9px;
-    // padding-bottom: 4px;
-    font-size: max(15px, 13Px);
-    height: max(40px, 36Px) !important;
-    line-height: max(40px, 36Px) !important;
-    font-weight: 500;
-    color: #1677FF;
-    text-decoration: underline;
-    cursor: pointer;
-
-    &.disabled {
-      color: #bbb;
-      cursor: not-allowed;
-    }
-  }
-
-  .firstName {
-    padding-left: 4px;
-  }
-
-  .studentList {
-    // margin-top: 10px;
-    color: #333333;
-    font-size: max(13px, 12Px);
-    padding: 10px 6px;
-    border-radius: 8px;
-    background: #F7F7F8;
-    width: 100%;
-
-    .studentItem {
-      background: #FFFFFF;
-      height: 28px;
-      border-radius: 7px;
-      padding: 5px 10px;
-      color: #333333;
-      line-height: 18px;
-      margin: 3px 4px;
-      display: inline-block;
-
-      i {
-        display: inline-block;
-        width: 13px;
-        height: 13px;
-        background: url('../../../images/icon-close.png') no-repeat center;
-        background-size: contain;
-        cursor: pointer;
-      }
-    }
-  }
-}
-
-.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;
-      }
-    }
-  }
-}
-
-.removeVisiable1 {
-  width: 432px;
-
-  :global {
-    .n-card-header {
-      font-size: max(22px, 16Px);
-    }
-  }
-
-  .studentRemove {
-    padding: 20px 40px 0;
-
-    p {
-      text-align: center;
-      font-size: max(18px, 14Px);
-      color: #777777;
-      line-height: 30px;
-
-      span {
-        color: #EA4132;
-      }
-    }
-  }
-
-  .btnGroupModal {
-    padding: 32px 0;
-
-    :global {
-      .n-button {
-        height: 47px;
-        min-width: 156px;
-      }
-    }
-  }
-}
+.btnGroup {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 36px !important;
+  height: 40px;
+  padding-right: 36px !important;
+
+
+  :global {
+    .n-base-selection {
+      --n-height: max(40px, 36Px) !important;
+      width: 160px;
+      font-size: 15px;
+      border-radius: 8px !important;
+    }
+
+    .n-base-selection-input__content {
+      font-size: max(15px, 13Px);
+    }
+
+    .n-button {
+      border-radius: 8px;
+      height: 38px;
+      font-size: max(18px, 13Px);
+      font-weight: 600 !important;
+      padding: 0 27px;
+      margin-left: 14px;
+    }
+
+    .n-button--default-type {
+      background: #E8F4FF !important;
+      color: #0378EC !important;
+
+      &:not(.n-button--disabled):hover {
+        background: #E8F4FF;
+      }
+
+      .n-button__border {
+        border: 1px solid #198CFE;
+      }
+    }
+
+    .n-button--error-type {
+      background: #FDEBED !important;
+      color: #EC3A4E !important;
+
+      &:not(.n-button--disabled):hover,
+      &:not(.n-button--disabled):active {
+        background: #FDEBED;
+        color: #EC3A4E;
+      }
+
+      .n-button__border {
+        border: 1px solid #EC3A4E;
+      }
+    }
+  }
+}
+:global{
+  .assignHomeworkStuBoxClass_drag{
+    .assignStudent{
+      >div{
+        padding-bottom: 36px;
+      }
+    }
+  }
+  .assignHomeworkStuBoxClass_drag,.workSetingBoxClass_drag,.workClearBoxClass_drag,.workSaveBoxClass_drag,.workArrangeImmediatelyBoxClass_drag{
+    .bom_drag{
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      z-index: 1;
+    }
+  }
+}
+.tipsContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 auto;
+  margin-right: 30px;
+  height: 40px;
+  padding: 0 16px;
+  background: #EDF7FF;
+  border-radius: 9px;
+  max-width: 600px;
+
+  .tipsLeft {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.88);
+
+
+    .tips {
+      line-height: 38px;
+    }
+  }
+
+  .iconTips {
+    margin-right: 9px;
+    width: 18px;
+    height: 18px;
+  }
+
+  .btnNoTips {
+    font-size: 16px;
+    font-weight: 500;
+    color: #1677FF;
+    cursor: pointer;
+  }
+}
+
+.btnItem {
+  display: flex;
+  align-items: center;
+
+  .btnTitle {
+    flex-shrink: 0;
+    font-size: max(18px, 13Px);
+    font-weight: 600;
+  }
+
+  // &:last-child {
+  //   margin-left: 12px;
+  // }
+
+  :global {
+    .n-input {
+      --n-height: 42px !important;
+      width: 280px;
+    }
+  }
+}
+
+.btnGroupClass {
+  margin-top: 10px;
+}
+
+.listContainer {
+  margin-top: 12px;
+  // // 52 + 28 + 38
+
+
+  max-height: calc(var(--window-page-lesson-height) - 196px);
+
+  .listSection {
+    min-height: calc(var(--window-page-lesson-height) - 196px);
+  }
+
+  &.listContainerDrag {
+    max-height: calc(var(--window-page-lesson-height) - 148px);
+
+    .listSection {
+      min-height: calc(var(--window-page-lesson-height) - 148px);
+    }
+  }
+
+  .emptySection {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.list {
+  padding: 12px 36px 12px;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  gap: 20px 2%;
+
+  &>div {
+    width: 32% !important;
+  }
+
+  .itemBlock {
+    &>div {
+      width: 100% !important;
+    }
+  }
+}
+
+.trainEditModal {
+  width: 494px;
+}
+
+.assignHomework {
+  width: 620px;
+}
+
+.assignHomeworkContainer {
+  padding: 24px 30px;
+
+
+  .expireDateTip {
+    display: flex;
+    align-items: center;
+    padding: 9px 12px;
+    background: #E6F4FF;
+    border-radius: 7px;
+    width: 100%;
+
+    .expireDateIcon {
+      width: max(13px, 12Px);
+      height: max(13px, 12Px);
+      display: inline-block;
+      background: url('../../../images/icon-expiredate.svg') no-repeat center;
+      background-size: contain;
+      margin-right: 7px;
+    }
+    span {
+      font-size: 12Px;
+        color: #1677FF;
+    }
+  }
+
+  .updateBtnGroup {
+    padding: 0;
+    justify-content: center !important;
+
+    :global {
+      .n-button {
+        height: 48px !important;
+        min-width: 156px;
+      }
+    }
+  }
+
+  .switch {
+    height: 37px !important;
+    border-radius: 8px;
+
+    &.active {
+      background: #198CFE;
+      color: #fff;
+    }
+  }
+
+  .studentSection {
+    :global {
+      .n-form-item-blank {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+    }
+  }
+
+  .selectStudentBtn {
+    // padding-top: 9px;
+    // padding-bottom: 4px;
+    font-size: max(15px, 13Px);
+    height: max(40px, 36Px) !important;
+    line-height: max(40px, 36Px) !important;
+    font-weight: 500;
+    color: #1677FF;
+    text-decoration: underline;
+    cursor: pointer;
+
+    &.disabled {
+      color: #bbb;
+      cursor: not-allowed;
+    }
+  }
+
+  .firstName {
+    padding-left: 4px;
+  }
+
+  .studentList {
+    // margin-top: 10px;
+    color: #333333;
+    font-size: max(13px, 12Px);
+    padding: 10px 6px;
+    border-radius: 8px;
+    background: #F7F7F8;
+    width: 100%;
+
+    .studentItem {
+      background: #FFFFFF;
+      height: 28px;
+      border-radius: 7px;
+      padding: 5px 10px;
+      color: #333333;
+      line-height: 18px;
+      margin: 3px 4px;
+      display: inline-block;
+
+      i {
+        display: inline-block;
+        width: 13px;
+        height: 13px;
+        background: url('../../../images/icon-close.png') no-repeat center;
+        background-size: contain;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.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;
+      }
+    }
+  }
+}
+
+.removeVisiable1 {
+  width: 432px;
+
+  :global {
+    .n-card-header {
+      font-size: max(22px, 16Px);
+    }
+  }
+
+  .studentRemove {
+    padding: 20px 40px 0;
+
+    p {
+      text-align: center;
+      font-size: max(18px, 14Px);
+      color: #777777;
+      line-height: 30px;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .btnGroupModal {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
+}

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

@@ -1,671 +1,672 @@
-import {
-  defineComponent,
-  onMounted,
-  reactive,
-  watch,
-  ref,
-  PropType,
-  onUnmounted,
-  toRef
-} from 'vue';
-import styles from './index.module.less';
-import {
-  NButton,
-  NInput,
-  NModal,
-  NScrollbar,
-  NSelect,
-  NSpace,
-  NSpin,
-  useDialog,
-  useMessage
-} from 'naive-ui';
-import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import { useCatchStore } from '/src/store/modules/catchData';
-import TrainType from '/src/views/attend-class/model/train-type';
-import TheEmpty from '/src/components/TheEmpty';
-import Draggable from 'vuedraggable';
-import {
-  lessonPreTrainingBatchSave,
-  lessonPreTrainingPage,
-  lessonPreTrainingDelete,
-  lessonPreTrainingV2Detail,
-  lessonPreTrainingV2Save
-} from '../../../api';
-import { evaluateDifficult } from '/src/utils/contants';
-import TrainUpdate from '/src/views/attend-class/model/train-update';
-import AssignHomework from './assign-homework';
-import Trainguide from '@/custom-plugins/guide-page/train-guide';
-import { eventGlobal } from '/src/utils';
-import iconTips from '../../../images/icon-tips.png';
-import { typeFormat } from '../../resource-main/components/select-music';
-import TheMessageDialog from '/src/components/TheMessageDialog';
-import { useResizeObserver } from '@vueuse/core';
-import useDrag from '@/hooks/useDrag';
-import Dragbom from '@/hooks/useDrag/dragbom';
-import { useUserStore } from '@/store/modules/users';
-export default defineComponent({
-  name: 'courseware-modal',
-  props: {
-    lessonPreTraining: {
-      type: Object,
-      default: () => ({})
-    },
-    cardType: {
-      type: String as PropType<'' | 'homeworkRecord' | 'prepare'>,
-      default: ''
-    },
-    /** 编辑编号  - 目前从上传传 */
-    classGroupId: {
-      type: String,
-      default: ''
-    },
-    /** 编辑编号  - 目前从上传传 */
-    coursewareKnowledgeDetailId: {
-      type: String,
-      default: ''
-    },
-    /** 编辑编号  - 目前从上传传 */
-    courseScheduleId: {
-      type: String,
-      default: ''
-    },
-    from: {
-      // 来自哪里
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['change'],
-  setup(props, { emit }) {
-    console.log(props.courseScheduleId, 'courseScheduleId');
-    const catchStore = useCatchStore();
-    const prepareStore = usePrepareStore();
-    const dialog = useDialog();
-    const message = useMessage();
-    const forms = reactive({
-      title: props.lessonPreTraining?.title,
-      preBtnLoading: false,
-      showAttendClass: false,
-      list: [] as any,
-      drag: true,
-      loadingStatus: false,
-      trainList: [] as any,
-      assignHomeworkStatus: false,
-      editStatus: false,
-      editItem: {} as any,
-      removeIds: [] as any, // 临时删除的编号
-      removeVisiable1: false,
-      preSaveVisiable: false
-    });
-    // const showGuide = ref(false);
-    // 获取列表
-    const getList = async () => {
-      forms.loadingStatus = true;
-      try {
-        // 判断是否有选择对应的课件
-        // console.log(props.lessonPreTraining, 'props.lessonPreTraining');
-        if (!props.lessonPreTraining?.id) return (forms.loadingStatus = false);
-        const { data } = await lessonPreTrainingV2Detail({
-          id: props.lessonPreTraining?.id
-        });
-        const tempRows = data.lessonPreTrainingDetails || [];
-        const temp: any = [];
-        forms.title = data.title;
-        tempRows.forEach((row: any) => {
-          let tList: string[] = [];
-          const configJson = row.trainingConfigJson;
-          if (row.trainingType === 'EVALUATION') {
-            tList = [
-              `${evaluateDifficult[configJson.evaluateDifficult]}`,
-              configJson.practiceChapterBegin || configJson.practiceChapterEnd
-                ? `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`
-                : '全部小节',
-              // `速度${configJson.evaluateSpeed}`,
-              `${configJson.trainingTimes}分合格`
-            ];
-          } else {
-            tList = [
-              `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`,
-              `速度${configJson.practiceSpeed}`,
-              `${configJson.trainingTimes}分钟`
-            ];
-          }
-          temp.push({
-            typeList: tList || [],
-            ...row
-          });
-        });
-
-        prepareStore.setTrainList(temp || []);
-        const tempCourse: any = [];
-        temp.forEach((item: any) => {
-          if (!forms.removeIds.includes(item.id)) {
-            tempCourse.push(item);
-          }
-        });
-        forms.trainList = tempCourse || [];
-      } catch {
-        //
-      }
-      forms.loadingStatus = false;
-    };
-
-    // 监听选择的key 左侧选择了其它的课
-    watch(
-      () => prepareStore.getSelectKey,
-      () => {
-        eventGlobal.emit('teacher-slideshow', false);
-        emit('change', { status: false });
-        forms.trainList = [];
-        getList();
-      }
-    );
-    // 删除
-    const onDelete = (item: any) => {
-      forms.removeIds.push(item.id);
-      const index = forms.trainList.findIndex((c: any) => c.id === item.id);
-      forms.trainList.splice(index, 1);
-    };
-
-    // 单个删除
-    const onRemove = async (item: any) => {
-      try {
-        dialog.warning({
-          title: '提示',
-          content: '该训练已下架，是否删除？',
-          positiveText: '确定',
-          negativeText: '取消',
-          onPositiveClick: async () => {
-            forms.removeIds.push(item.id);
-            await lessonPreTrainingDelete({ ids: item.id });
-            message.success('删除成功');
-            getList();
-          }
-        });
-      } catch {
-        //
-      }
-    };
-
-    /** 保存预设 */
-    const onPreSave = async () => {
-      forms.preBtnLoading = true;
-      try {
-        const lessonPreTrainingDetails: any = [];
-        forms.trainList.forEach((item: any) => {
-          lessonPreTrainingDetails.push({
-            trainingType: item.trainingType,
-            musicId: item.musicId,
-            trainingConfigJson: item.trainingConfigJson,
-            musicName: item.musicName
-          });
-        });
-        const { data } = await lessonPreTrainingV2Save({
-          title: forms.title,
-          id: props.lessonPreTraining?.id,
-          coursewareKnowledgeDetailId:
-            props.coursewareKnowledgeDetailId || prepareStore.getSelectKey,
-          lessonPreTrainingDetails,
-          courseScheduleId: props.courseScheduleId,
-          chapterLessonCoursewareId: props.lessonPreTraining?.chapterId
-        });
-        message.success('保存成功');
-        prepareStore.setIsEditTrain(false);
-        forms.removeIds = [];
-        // getList();
-        emit('change', {
-          status: false,
-          saveWork: true,
-          lessonPreTrainingId: data.id
-        });
-      } catch {
-        //
-      }
-      forms.preBtnLoading = false;
-    };
-
-    const getModalHeight = () => {
-      const dom: any = document.querySelector('#model-homework-height');
-      if (dom) {
-        useResizeObserver(dom as HTMLElement, (entries: any) => {
-          const entry = entries[0];
-          const { height } = entry.contentRect;
-          dom.style.setProperty('--window-page-lesson-height', height + 'px');
-        });
-      }
-    };
-
-    onMounted(async () => {
-      getModalHeight();
-      await getList();
-      // 动态添加数据
-      eventGlobal.on('onTrainAddItem', (item: any) => {
-        forms.drag = true;
-        // 临时储存编号
-        item.id = item.id || new Date().getTime() + '__tmp';
-        forms.trainList.push(item);
-        prepareStore.setTrainList(forms.trainList);
-      });
-    });
-
-    onUnmounted(() => {
-      forms.trainList = [];
-      prepareStore.setTrainList([]);
-    });
-    // 弹窗拖动
-    // 作业设置
-    let workSetingBoxDragData: any;
-    let workSetingBoxClass: string;
-    if (props.from === 'class') {
-      const users = useUserStore();
-      workSetingBoxClass = 'workSetingBoxClass_drag';
-      workSetingBoxDragData = useDrag(
-        [
-          `${workSetingBoxClass}>.n-card-header`,
-          `${workSetingBoxClass} .bom_drag`
-        ],
-        workSetingBoxClass,
-        toRef(forms, 'editStatus'),
-        users.info.id
-      );
-    }
-    // 清空
-    let workClearBoxDragData: any;
-    let workClearBoxClass: string;
-    if (props.from === 'class') {
-      const users = useUserStore();
-      workClearBoxClass = 'workClearBoxClass_drag';
-      workClearBoxDragData = useDrag(
-        [
-          `${workClearBoxClass}>.n-card-header`,
-          `${workClearBoxClass} .bom_drag`
-        ],
-        workClearBoxClass,
-        toRef(forms, 'removeVisiable1'),
-        users.info.id
-      );
-    }
-    // 清空
-    let workSaveBoxDragData: any;
-    let workSaveBoxClass: string;
-    if (props.from === 'class') {
-      const users = useUserStore();
-      workSaveBoxClass = 'workSaveBoxClass_drag';
-      workSaveBoxDragData = useDrag(
-        [`${workSaveBoxClass}>.n-card-header`, `${workSaveBoxClass} .bom_drag`],
-        workSaveBoxClass,
-        toRef(forms, 'preSaveVisiable'),
-        users.info.id
-      );
-    }
-    // 立即布置
-    let workArrangeImmediatelyBoxDragData: any;
-    let workArrangeImmediatelyBoxClass: string;
-    if (props.from === 'class') {
-      const users = useUserStore();
-      workArrangeImmediatelyBoxClass = 'workArrangeImmediatelyBoxClass_drag';
-      workArrangeImmediatelyBoxDragData = useDrag(
-        [
-          `${workArrangeImmediatelyBoxClass}>.n-card-header`,
-          `${workArrangeImmediatelyBoxClass} .bom_drag`
-        ],
-        workArrangeImmediatelyBoxClass,
-        toRef(forms, 'assignHomeworkStatus'),
-        users.info.id
-      );
-    }
-    return () => (
-      <div class={styles.coursewareModal}>
-        <div class={styles.btnGroup}>
-          <NSpace>
-            <div class={styles.btnItem}>
-              <span class={styles.btnTitle}>
-                <i style={{ color: '#ea4132', fontStyle: 'normal' }}>*</i>标题：
-              </span>
-              <NInput
-                placeholder={'请输入标题'}
-                v-model:value={forms.title}
-                maxlength={100}
-              />
-            </div>
-          </NSpace>
-
-          <div class={styles.spaceBtnGroup}>
-            <NButton
-              bordered={false}
-              type="error"
-              disabled={forms.trainList.length <= 0}
-              onClick={() => {
-                forms.removeVisiable1 = true;
-              }}>
-              清空
-            </NButton>
-            <NButton
-              bordered={false}
-              type="error"
-              onClick={() => {
-                // forms.drag = false;
-                prepareStore.setIsEditTrain(false);
-                forms.removeIds = [];
-                // prepareStore.setTrainList([]);
-                // getList();
-                emit('change', { status: false });
-              }}>
-              取消
-            </NButton>
-
-            {(props.cardType !== 'homeworkRecord' ||
-              props.courseScheduleId) && (
-              <NButton
-                bordered={false}
-                type="default"
-                disabled={forms.trainList.length <= 0}
-                onClick={() => {
-                  if (!forms.title) {
-                    message.error('请输入标题');
-                    return;
-                  }
-                  let count = 0;
-                  forms.trainList.forEach((item: any) => {
-                    if (!item.removeFlag) {
-                      count++;
-                    }
-                  });
-                  if (count <= 0) {
-                    message.error('作业内容不能为空');
-                    return;
-                  }
-
-                  forms.preSaveVisiable = true;
-                }}
-                // loading={forms.preBtnLoading}
-              >
-                保存
-              </NButton>
-            )}
-            {(props.cardType === 'homeworkRecord' ||
-              props.courseScheduleId) && (
-              <NButton
-                type="primary"
-                disabled={forms.trainList.length <= 0}
-                onClick={() => {
-                  if (!forms.title) {
-                    message.error('请输入标题');
-                    return;
-                  }
-                  let count = 0;
-                  forms.trainList.forEach((item: any) => {
-                    if (!item.removeFlag) {
-                      count++;
-                    }
-                  });
-                  if (count <= 0) {
-                    message.error('作业内容不能为空');
-                    return;
-                  }
-                  forms.assignHomeworkStatus = true;
-                }}>
-                立即布置
-              </NButton>
-            )}
-          </div>
-        </div>
-
-        <NScrollbar
-          class={[
-            styles.listContainer,
-            'train-container'
-            // forms.drag ? styles.listContainerDrag : ''
-          ]}>
-          <NSpin show={forms.loadingStatus}>
-            <div
-              class={[
-                styles.listSection,
-                'train-listSection',
-                !forms.loadingStatus && prepareStore.getTrainList.length <= 0
-                  ? styles.emptySection
-                  : ''
-              ]}
-              onDragenter={(e: any) => {
-                e.preventDefault();
-              }}
-              onDragover={(e: any) => {
-                e.preventDefault();
-              }}
-              onDrop={(e: any) => {
-                let dropItem = e.dataTransfer.getData('text');
-                console.log(dropItem, 'dropItem', dropItem);
-                dropItem = dropItem ? JSON.parse(dropItem) : {};
-                // 判断是否有数据
-                if (dropItem.id) {
-                  eventGlobal.emit('onTrainDragItem', dropItem);
-                }
-              }}>
-              {forms.trainList.length > 0 && (
-                <>
-                  {/* {forms.drag ? ( */}
-                  <Draggable
-                    v-model:modelValue={forms.trainList}
-                    itemKey="id"
-                    componentData={{
-                      itemKey: 'id',
-                      tag: 'div',
-                      animation: 200,
-                      group: 'description',
-                      disabled: false
-                    }}
-                    class={styles.list}>
-                    {{
-                      item: (element: any) => {
-                        const item = element.element;
-                        return (
-                          <div data-id={item.musicId} class={styles.itemBlock}>
-                            <TrainType
-                              from={props.from}
-                              item={item}
-                              isDelete
-                              type="prepare"
-                              onDelete={(child: any) => onDelete(child)}
-                              offShelf={item.removeFlag ? true : false}
-                              onOffShelf={() => onRemove(item)}
-                              onEdit={(child: any) => {
-                                // console.log(forms.trainList);
-                                const {
-                                  trainingConfigJson,
-                                  id,
-                                  musicId,
-                                  ...res
-                                } = child;
-                                forms.editItem = {
-                                  ...res,
-                                  id: musicId,
-                                  trainId: id,
-                                  ...trainingConfigJson
-                                };
-                                forms.editStatus = true;
-                              }}
-                            />
-                          </div>
-                        );
-                      }
-                    }}
-                  </Draggable>
-                  {/* ) : (
-                    <div class={styles.list}>
-                      {forms.trainList.map((item: any) => (
-                        <TrainType
-                          item={item}
-                          type="prepare"
-                          offShelf={item.removeFlag ? true : false}
-                          onOffShelf={() => onRemove(item)}
-                          onEdit={(child: any) => {
-                            // console.log('edit', child);
-                            const { trainingConfigJson, id, musicId, ...res } =
-                              child;
-                            forms.editItem = {
-                              ...res,
-                              id: musicId,
-                              trainId: id,
-                              ...trainingConfigJson
-                            };
-                            forms.editStatus = true;
-                          }}
-                        />
-                      ))}
-                    </div>
-                  )} */}
-                </>
-              )}
-
-              {!forms.loadingStatus &&
-                prepareStore.getTrainList.length <= 0 && (
-                  <TheEmpty description="暂无作业" />
-                )}
-            </div>
-          </NSpin>
-        </NScrollbar>
-
-        {/* 编辑 */}
-        <NModal
-          style={
-            props.from === 'class' ? workSetingBoxDragData.styleDrag.value : {}
-          }
-          v-model:show={forms.editStatus}
-          class={[
-            'modalTitle background',
-            styles.trainEditModal,
-            workSetingBoxClass
-          ]}
-          preset="card"
-          title="作业设置">
-          <TrainUpdate
-            item={forms.editItem}
-            onClose={() => (forms.editStatus = false)}
-            onConfirm={(item: any) => {
-              forms.editItem = {};
-              // prepareStore.setIsAddTrain(true);
-
-              const tList = typeFormat(
-                item.trainingType,
-                item.trainingConfigJson
-              );
-              //
-              const train = {
-                ...item,
-                typeList: tList
-              };
-
-              forms.trainList.forEach((item: any) => {
-                if (item.id === train.id) {
-                  // item = train;
-                  item.trainingConfigJson = train.trainingConfigJson;
-                  item.trainingType = train.trainingType;
-                  item.typeList = train.typeList;
-                }
-              });
-              prepareStore.setTrainList(forms.trainList);
-            }}
-          />
-          {props.from === 'class' && <Dragbom></Dragbom>}
-        </NModal>
-
-        {/* 添加自定义教材 */}
-        <NModal
-          style={
-            props.from === 'class'
-              ? workArrangeImmediatelyBoxDragData.styleDrag.value
-              : {}
-          }
-          v-model:show={forms.assignHomeworkStatus}
-          preset="card"
-          showIcon={false}
-          class={[
-            'modalTitle background',
-            styles.assignHomework,
-            workArrangeImmediatelyBoxClass
-          ]}
-          title={'布置作业'}
-          blockScroll={false}>
-          <AssignHomework
-            from={props.from}
-            classGroupId={props.classGroupId}
-            courseScheduleId={props.courseScheduleId}
-            chapterLessonCoursewareId={props.lessonPreTraining.chapterId}
-            homeworkType={props.courseScheduleId ? 'HOMEWORK' : 'CLASSWORK'}
-            item={{
-              title: forms.title,
-              lessonPreTrainingDetails: forms.trainList
-            }}
-            // trainList={forms.trainList}
-            onClose={() => (forms.assignHomeworkStatus = false)}
-            onConfirm={() => {
-              if (props.cardType === 'homeworkRecord') {
-                forms.trainList = [];
-                prepareStore.setTrainList([]);
-                emit('change', { state: false });
-              }
-            }}
-          />
-          {props.from === 'class' && <Dragbom></Dragbom>}
-        </NModal>
-
-        {/* {showGuide.value ? <Trainguide></Trainguide> : null} */}
-
-        <NModal
-          style={
-            props.from === 'class' ? workClearBoxDragData.styleDrag.value : {}
-          }
-          v-model:show={forms.removeVisiable1}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable1, workClearBoxClass]}
-          title={'清空资源'}>
-          <div class={styles.studentRemove}>
-            <p>
-              请确认是否要清空作业？
-              {/* <span>点击确认后所有的作业内容 将被清空掉。</span> */}
-            </p>
-
-            <NSpace class={styles.btnGroupModal} justify="center">
-              <NButton
-                round
-                type="primary"
-                onClick={() => {
-                  forms.trainList.forEach((item: any) => {
-                    forms.removeIds.push(item.id);
-                  });
-                  forms.trainList = [];
-                  prepareStore.setTrainList([]);
-                  forms.removeVisiable1 = false;
-                }}>
-                确定
-              </NButton>
-              <NButton round onClick={() => (forms.removeVisiable1 = false)}>
-                取消
-              </NButton>
-            </NSpace>
-          </div>
-          {props.from === 'class' && <Dragbom></Dragbom>}
-        </NModal>
-
-        <NModal
-          style={
-            props.from === 'class' ? workSaveBoxDragData.styleDrag.value : {}
-          }
-          v-model:show={forms.preSaveVisiable}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable1, workSaveBoxClass]}
-          title={'保存'}>
-          <TheMessageDialog
-            content="是否保存当前页面编辑内容？"
-            cancelButtonText="取消"
-            confirmButtonText="保存"
-            onClose={() => (forms.preSaveVisiable = false)}
-            onConfirm={() => onPreSave()}
-          />
-          {props.from === 'class' && <Dragbom></Dragbom>}
-        </NModal>
-      </div>
-    );
-  }
-});
+import {
+  defineComponent,
+  onMounted,
+  reactive,
+  watch,
+  ref,
+  PropType,
+  onUnmounted,
+  toRef
+} from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NInput,
+  NModal,
+  NScrollbar,
+  NSelect,
+  NSpace,
+  NSpin,
+  useDialog,
+  useMessage
+} from 'naive-ui';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import { useCatchStore } from '/src/store/modules/catchData';
+import TrainType from '/src/views/attend-class/model/train-type';
+import TheEmpty from '/src/components/TheEmpty';
+import Draggable from 'vuedraggable';
+import {
+  lessonPreTrainingBatchSave,
+  lessonPreTrainingPage,
+  lessonPreTrainingDelete,
+  lessonPreTrainingV2Detail,
+  lessonPreTrainingV2Save
+} from '../../../api';
+import { evaluateDifficult } from '/src/utils/contants';
+import TrainUpdate from '/src/views/attend-class/model/train-update';
+import AssignHomework from './assign-homework';
+import Trainguide from '@/custom-plugins/guide-page/train-guide';
+import { eventGlobal } from '/src/utils';
+import iconTips from '../../../images/icon-tips.png';
+import { typeFormat } from '../../resource-main/components/select-music';
+import TheMessageDialog from '/src/components/TheMessageDialog';
+import { useResizeObserver } from '@vueuse/core';
+import useDrag from '@/hooks/useDrag';
+import Dragbom from '@/hooks/useDrag/dragbom';
+import { useUserStore } from '@/store/modules/users';
+import request from '/src/utils/request';
+export default defineComponent({
+  name: 'courseware-modal',
+  props: {
+    lessonPreTraining: {
+      type: Object,
+      default: () => ({})
+    },
+    cardType: {
+      type: String as PropType<'' | 'homeworkRecord' | 'prepare'>,
+      default: ''
+    },
+    /** 编辑编号  - 目前从上传传 */
+    classGroupId: {
+      type: String,
+      default: ''
+    },
+    /** 编辑编号  - 目前从上传传 */
+    coursewareKnowledgeDetailId: {
+      type: String,
+      default: ''
+    },
+    /** 编辑编号  - 目前从上传传 */
+    courseScheduleId: {
+      type: String,
+      default: ''
+    },
+    from: {
+      // 来自哪里
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
+    console.log(props.courseScheduleId, 'courseScheduleId');
+    const catchStore = useCatchStore();
+    const prepareStore = usePrepareStore();
+    const dialog = useDialog();
+    const message = useMessage();
+    const forms = reactive({
+      title: props.lessonPreTraining?.title,
+      preBtnLoading: false,
+      showAttendClass: false,
+      list: [] as any,
+      drag: true,
+      loadingStatus: false,
+      trainList: [] as any,
+      assignHomeworkStatus: false,
+      editStatus: false,
+      editItem: {} as any,
+      removeIds: [] as any, // 临时删除的编号
+      removeVisiable1: false,
+      preSaveVisiable: false
+    });
+    // const showGuide = ref(false);
+    // 获取列表
+    const getList = async () => {
+      forms.loadingStatus = true;
+      try {
+        // 判断是否有选择对应的课件
+        // console.log(props.lessonPreTraining, 'props.lessonPreTraining');
+        if (!props.lessonPreTraining?.id) return (forms.loadingStatus = false);
+        const { data } = await lessonPreTrainingV2Detail({
+          id: props.lessonPreTraining?.id
+        });
+        const tempRows = data.lessonPreTrainingDetails || [];
+        const temp: any = [];
+        forms.title = data.title;
+        tempRows.forEach((row: any) => {
+          let tList: string[] = [];
+          const configJson = row.trainingConfigJson;
+          if (row.trainingType === 'EVALUATION') {
+            tList = [
+              `${evaluateDifficult[configJson.evaluateDifficult]}`,
+              configJson.practiceChapterBegin || configJson.practiceChapterEnd
+                ? `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`
+                : '全部小节',
+              // `速度${configJson.evaluateSpeed}`,
+              `${configJson.trainingTimes}分合格`
+            ];
+          } else {
+            tList = [
+              `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`,
+              `速度${configJson.practiceSpeed}`,
+              `${configJson.trainingTimes}分钟`
+            ];
+          }
+          temp.push({
+            typeList: tList || [],
+            ...row
+          });
+        });
+
+        prepareStore.setTrainList(temp || []);
+        const tempCourse: any = [];
+        temp.forEach((item: any) => {
+          if (!forms.removeIds.includes(item.id)) {
+            tempCourse.push(item);
+          }
+        });
+        forms.trainList = tempCourse || [];
+      } catch {
+        //
+      }
+      forms.loadingStatus = false;
+    };
+
+    // 监听选择的key 左侧选择了其它的课
+    watch(
+      () => prepareStore.getSelectKey,
+      () => {
+        eventGlobal.emit('teacher-slideshow', false);
+        emit('change', { status: false });
+        forms.trainList = [];
+        getList();
+      }
+    );
+    // 删除
+    const onDelete = (item: any) => {
+      forms.removeIds.push(item.id);
+      const index = forms.trainList.findIndex((c: any) => c.id === item.id);
+      forms.trainList.splice(index, 1);
+    };
+
+    // 单个删除
+    const onRemove = async (item: any) => {
+      try {
+        dialog.warning({
+          title: '提示',
+          content: '该训练已下架，是否删除？',
+          positiveText: '确定',
+          negativeText: '取消',
+          onPositiveClick: async () => {
+            forms.removeIds.push(item.id);
+            await lessonPreTrainingDelete({ ids: item.id });
+            message.success('删除成功');
+            getList();
+          }
+        });
+      } catch {
+        //
+      }
+    };
+
+    /** 保存预设 */
+    const onPreSave = async () => {
+      forms.preBtnLoading = true;
+      try {
+        const lessonPreTrainingDetails: any = [];
+        forms.trainList.forEach((item: any) => {
+          lessonPreTrainingDetails.push({
+            trainingType: item.trainingType,
+            musicId: item.musicId,
+            trainingConfigJson: item.trainingConfigJson,
+            musicName: item.musicName
+          });
+        });
+        const { data } = await lessonPreTrainingV2Save({
+          title: forms.title,
+          id: props.lessonPreTraining?.id,
+          coursewareKnowledgeDetailId:
+            props.coursewareKnowledgeDetailId || prepareStore.getSelectKey,
+          lessonPreTrainingDetails,
+          courseScheduleId: props.courseScheduleId,
+          chapterLessonCoursewareId: props.lessonPreTraining?.chapterId
+        });
+        message.success('保存成功');
+        prepareStore.setIsEditTrain(false);
+        forms.removeIds = [];
+        // getList();
+        emit('change', {
+          status: false,
+          saveWork: true,
+          lessonPreTrainingId: data.id
+        });
+      } catch {
+        //
+      }
+      forms.preBtnLoading = false;
+    };
+
+    const getModalHeight = () => {
+      const dom: any = document.querySelector('#model-homework-height');
+      if (dom) {
+        useResizeObserver(dom as HTMLElement, (entries: any) => {
+          const entry = entries[0];
+          const { height } = entry.contentRect;
+          dom.style.setProperty('--window-page-lesson-height', height + 'px');
+        });
+      }
+    };
+
+    onMounted(async () => {
+      getModalHeight();
+      await getList();
+      // 动态添加数据
+      eventGlobal.on('onTrainAddItem', (item: any) => {
+        forms.drag = true;
+        // 临时储存编号
+        item.id = item.id || new Date().getTime() + '__tmp';
+        forms.trainList.push(item);
+        prepareStore.setTrainList(forms.trainList);
+      });
+    });
+
+    onUnmounted(() => {
+      forms.trainList = [];
+      prepareStore.setTrainList([]);
+    });
+    // 弹窗拖动
+    // 作业设置
+    let workSetingBoxDragData: any;
+    let workSetingBoxClass: string;
+    if (props.from === 'class') {
+      const users = useUserStore();
+      workSetingBoxClass = 'workSetingBoxClass_drag';
+      workSetingBoxDragData = useDrag(
+        [
+          `${workSetingBoxClass}>.n-card-header`,
+          `${workSetingBoxClass} .bom_drag`
+        ],
+        workSetingBoxClass,
+        toRef(forms, 'editStatus'),
+        users.info.id
+      );
+    }
+    // 清空
+    let workClearBoxDragData: any;
+    let workClearBoxClass: string;
+    if (props.from === 'class') {
+      const users = useUserStore();
+      workClearBoxClass = 'workClearBoxClass_drag';
+      workClearBoxDragData = useDrag(
+        [
+          `${workClearBoxClass}>.n-card-header`,
+          `${workClearBoxClass} .bom_drag`
+        ],
+        workClearBoxClass,
+        toRef(forms, 'removeVisiable1'),
+        users.info.id
+      );
+    }
+    // 清空
+    let workSaveBoxDragData: any;
+    let workSaveBoxClass: string;
+    if (props.from === 'class') {
+      const users = useUserStore();
+      workSaveBoxClass = 'workSaveBoxClass_drag';
+      workSaveBoxDragData = useDrag(
+        [`${workSaveBoxClass}>.n-card-header`, `${workSaveBoxClass} .bom_drag`],
+        workSaveBoxClass,
+        toRef(forms, 'preSaveVisiable'),
+        users.info.id
+      );
+    }
+    // 立即布置
+    let workArrangeImmediatelyBoxDragData: any;
+    let workArrangeImmediatelyBoxClass: string;
+    if (props.from === 'class') {
+      const users = useUserStore();
+      workArrangeImmediatelyBoxClass = 'workArrangeImmediatelyBoxClass_drag';
+      workArrangeImmediatelyBoxDragData = useDrag(
+        [
+          `${workArrangeImmediatelyBoxClass}>.n-card-header`,
+          `${workArrangeImmediatelyBoxClass} .bom_drag`
+        ],
+        workArrangeImmediatelyBoxClass,
+        toRef(forms, 'assignHomeworkStatus'),
+        users.info.id
+      );
+    }
+    return () => (
+      <div class={styles.coursewareModal}>
+        <div class={styles.btnGroup}>
+          <NSpace>
+            <div class={styles.btnItem}>
+              <span class={styles.btnTitle}>
+                <i style={{ color: '#ea4132', fontStyle: 'normal' }}>*</i>标题：
+              </span>
+              <NInput
+                placeholder={'请输入标题'}
+                v-model:value={forms.title}
+                maxlength={100}
+              />
+            </div>
+          </NSpace>
+
+          <div class={styles.spaceBtnGroup}>
+            <NButton
+              bordered={false}
+              type="error"
+              disabled={forms.trainList.length <= 0}
+              onClick={() => {
+                forms.removeVisiable1 = true;
+              }}>
+              清空
+            </NButton>
+            <NButton
+              bordered={false}
+              type="error"
+              onClick={() => {
+                // forms.drag = false;
+                prepareStore.setIsEditTrain(false);
+                forms.removeIds = [];
+                // prepareStore.setTrainList([]);
+                // getList();
+                emit('change', { status: false });
+              }}>
+              取消
+            </NButton>
+
+            {(props.cardType !== 'homeworkRecord' ||
+              props.courseScheduleId) && (
+              <NButton
+                bordered={false}
+                type="default"
+                disabled={forms.trainList.length <= 0}
+                onClick={() => {
+                  if (!forms.title) {
+                    message.error('请输入标题');
+                    return;
+                  }
+                  let count = 0;
+                  forms.trainList.forEach((item: any) => {
+                    if (!item.removeFlag) {
+                      count++;
+                    }
+                  });
+                  if (count <= 0) {
+                    message.error('作业内容不能为空');
+                    return;
+                  }
+
+                  forms.preSaveVisiable = true;
+                }}
+                // loading={forms.preBtnLoading}
+              >
+                保存
+              </NButton>
+            )}
+            {(props.cardType === 'homeworkRecord' ||
+              props.courseScheduleId) && (
+              <NButton
+                type="primary"
+                disabled={forms.trainList.length <= 0}
+                onClick={() => {
+                  if (!forms.title) {
+                    message.error('请输入标题');
+                    return;
+                  }
+                  let count = 0;
+                  forms.trainList.forEach((item: any) => {
+                    if (!item.removeFlag) {
+                      count++;
+                    }
+                  });
+                  if (count <= 0) {
+                    message.error('作业内容不能为空');
+                    return;
+                  }
+                  forms.assignHomeworkStatus = true;
+                }}>
+                立即布置
+              </NButton>
+            )}
+          </div>
+        </div>
+
+        <NScrollbar
+          class={[
+            styles.listContainer,
+            'train-container'
+            // forms.drag ? styles.listContainerDrag : ''
+          ]}>
+          <NSpin show={forms.loadingStatus}>
+            <div
+              class={[
+                styles.listSection,
+                'train-listSection',
+                !forms.loadingStatus && prepareStore.getTrainList.length <= 0
+                  ? styles.emptySection
+                  : ''
+              ]}
+              onDragenter={(e: any) => {
+                e.preventDefault();
+              }}
+              onDragover={(e: any) => {
+                e.preventDefault();
+              }}
+              onDrop={(e: any) => {
+                let dropItem = e.dataTransfer.getData('text');
+                console.log(dropItem, 'dropItem', dropItem);
+                dropItem = dropItem ? JSON.parse(dropItem) : {};
+                // 判断是否有数据
+                if (dropItem.id) {
+                  eventGlobal.emit('onTrainDragItem', dropItem);
+                }
+              }}>
+              {forms.trainList.length > 0 && (
+                <>
+                  {/* {forms.drag ? ( */}
+                  <Draggable
+                    v-model:modelValue={forms.trainList}
+                    itemKey="id"
+                    componentData={{
+                      itemKey: 'id',
+                      tag: 'div',
+                      animation: 200,
+                      group: 'description',
+                      disabled: false
+                    }}
+                    class={styles.list}>
+                    {{
+                      item: (element: any) => {
+                        const item = element.element;
+                        return (
+                          <div data-id={item.musicId} class={styles.itemBlock}>
+                            <TrainType
+                              from={props.from}
+                              item={item}
+                              isDelete
+                              type="prepare"
+                              onDelete={(child: any) => onDelete(child)}
+                              offShelf={item.removeFlag ? true : false}
+                              onOffShelf={() => onRemove(item)}
+                              onEdit={(child: any) => {
+                                // console.log(forms.trainList);
+                                const {
+                                  trainingConfigJson,
+                                  id,
+                                  musicId,
+                                  ...res
+                                } = child;
+                                forms.editItem = {
+                                  ...res,
+                                  id: musicId,
+                                  trainId: id,
+                                  ...trainingConfigJson
+                                };
+                                forms.editStatus = true;
+                              }}
+                            />
+                          </div>
+                        );
+                      }
+                    }}
+                  </Draggable>
+                  {/* ) : (
+                    <div class={styles.list}>
+                      {forms.trainList.map((item: any) => (
+                        <TrainType
+                          item={item}
+                          type="prepare"
+                          offShelf={item.removeFlag ? true : false}
+                          onOffShelf={() => onRemove(item)}
+                          onEdit={(child: any) => {
+                            // console.log('edit', child);
+                            const { trainingConfigJson, id, musicId, ...res } =
+                              child;
+                            forms.editItem = {
+                              ...res,
+                              id: musicId,
+                              trainId: id,
+                              ...trainingConfigJson
+                            };
+                            forms.editStatus = true;
+                          }}
+                        />
+                      ))}
+                    </div>
+                  )} */}
+                </>
+              )}
+
+              {!forms.loadingStatus &&
+                prepareStore.getTrainList.length <= 0 && (
+                  <TheEmpty description="暂无作业" />
+                )}
+            </div>
+          </NSpin>
+        </NScrollbar>
+
+        {/* 编辑 */}
+        <NModal
+          style={
+            props.from === 'class' ? workSetingBoxDragData.styleDrag.value : {}
+          }
+          v-model:show={forms.editStatus}
+          class={[
+            'modalTitle background',
+            styles.trainEditModal,
+            workSetingBoxClass
+          ]}
+          preset="card"
+          title="作业设置">
+          <TrainUpdate
+            item={forms.editItem}
+            onClose={() => (forms.editStatus = false)}
+            onConfirm={(item: any) => {
+              forms.editItem = {};
+              // prepareStore.setIsAddTrain(true);
+
+              const tList = typeFormat(
+                item.trainingType,
+                item.trainingConfigJson
+              );
+              //
+              const train = {
+                ...item,
+                typeList: tList
+              };
+
+              forms.trainList.forEach((item: any) => {
+                if (item.id === train.id) {
+                  // item = train;
+                  item.trainingConfigJson = train.trainingConfigJson;
+                  item.trainingType = train.trainingType;
+                  item.typeList = train.typeList;
+                }
+              });
+              prepareStore.setTrainList(forms.trainList);
+            }}
+          />
+          {props.from === 'class' && <Dragbom></Dragbom>}
+        </NModal>
+
+        {/* 添加自定义教材 */}
+        <NModal
+          style={
+            props.from === 'class'
+              ? workArrangeImmediatelyBoxDragData.styleDrag.value
+              : {}
+          }
+          v-model:show={forms.assignHomeworkStatus}
+          preset="card"
+          showIcon={false}
+          class={[
+            'modalTitle background',
+            styles.assignHomework,
+            workArrangeImmediatelyBoxClass
+          ]}
+          title={'布置作业'}
+          blockScroll={false}>
+          <AssignHomework
+            from={props.from}
+            classGroupId={props.classGroupId}
+            courseScheduleId={props.courseScheduleId}
+            chapterLessonCoursewareId={props.lessonPreTraining.chapterId}
+            homeworkType={props.courseScheduleId ? 'HOMEWORK' : 'CLASSWORK'}
+            item={{
+              title: forms.title,
+              lessonPreTrainingDetails: forms.trainList
+            }}
+            // trainList={forms.trainList}
+            onClose={() => (forms.assignHomeworkStatus = false)}
+            onConfirm={() => {
+              if (props.cardType === 'homeworkRecord') {
+                forms.trainList = [];
+                prepareStore.setTrainList([]);
+                emit('change', { state: false });
+              }
+            }}
+          />
+          {props.from === 'class' && <Dragbom></Dragbom>}
+        </NModal>
+
+        {/* {showGuide.value ? <Trainguide></Trainguide> : null} */}
+
+        <NModal
+          style={
+            props.from === 'class' ? workClearBoxDragData.styleDrag.value : {}
+          }
+          v-model:show={forms.removeVisiable1}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable1, workClearBoxClass]}
+          title={'清空资源'}>
+          <div class={styles.studentRemove}>
+            <p>
+              请确认是否要清空作业？
+              {/* <span>点击确认后所有的作业内容 将被清空掉。</span> */}
+            </p>
+
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton
+                round
+                type="primary"
+                onClick={() => {
+                  forms.trainList.forEach((item: any) => {
+                    forms.removeIds.push(item.id);
+                  });
+                  forms.trainList = [];
+                  prepareStore.setTrainList([]);
+                  forms.removeVisiable1 = false;
+                }}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (forms.removeVisiable1 = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+          {props.from === 'class' && <Dragbom></Dragbom>}
+        </NModal>
+
+        <NModal
+          style={
+            props.from === 'class' ? workSaveBoxDragData.styleDrag.value : {}
+          }
+          v-model:show={forms.preSaveVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable1, workSaveBoxClass]}
+          title={'保存'}>
+          <TheMessageDialog
+            content="是否保存当前页面编辑内容？"
+            cancelButtonText="取消"
+            confirmButtonText="保存"
+            onClose={() => (forms.preSaveVisiable = false)}
+            onConfirm={() => onPreSave()}
+          />
+          {props.from === 'class' && <Dragbom></Dragbom>}
+        </NModal>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/images/icon-expiredate.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>形状</title>
+    <defs>
+        <path d="M10,1.25 C5.16796875,1.25 1.25,5.16796875 1.25,10 C1.25,14.8320312 5.16796875,18.75 10,18.75 C14.8320312,18.75 18.75,14.8320312 18.75,10 C18.75,5.16796875 14.8320312,1.25 10,1.25 Z M9.375,5.78125 C9.375,5.6953125 9.4453125,5.625 9.53125,5.625 L10.46875,5.625 C10.5546875,5.625 10.625,5.6953125 10.625,5.78125 L10.625,11.09375 C10.625,11.1796875 10.5546875,11.25 10.46875,11.25 L9.53125,11.25 C9.4453125,11.25 9.375,11.1796875 9.375,11.09375 L9.375,5.78125 Z M10,14.375 C9.48242188,14.375 9.0625,13.9550781 9.0625,13.4375 C9.0625,12.9199219 9.48242188,12.5 10,12.5 C10.5175781,12.5 10.9375,12.9199219 10.9375,13.4375 C10.9375,13.9550781 10.5175781,14.375 10,14.375 Z" id="path-1"></path>
+    </defs>
+    <g id="作业页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="5、备课-布置作业" transform="translate(-397.000000, -737.000000)" fill="#198CFE">
+            <g id="编组-15" transform="translate(254.000000, 253.000000)">
+                <g id="Feedback/Alert/Light/Default-Warning" transform="translate(126.000000, 471.000000)">
+                    <g id="形状" transform="translate(16.000000, 12.000000)">
+                        <use xlink:href="#path-1"></use>
+                        <use xlink:href="#path-1"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/prepare-lessons/model/select-music/select-item/index.module.less

@@ -1,250 +1,261 @@
-.selectMusic {
-  // :global {
-  //   .n-tabs-tab-pad {
-  //     width: 24px !important;
-  //   }
-
-  //   .n-tabs-nav {
-  //     padding: 12px 20px 24px;
-  //   }
-
-  //   .n-tabs-tab {
-  //     color: #8B8D98;
-  //     font-size: max(22px, 14Px);
-  //     padding-top: 12px;
-  //     padding-bottom: 6px;
-  //     line-height: 22px;
-
-  //     &.n-tabs-tab--active {
-  //       font-weight: 600 !important;
-  //       color: #131415 !important;
-  //     }
-  //   }
-
-  //   .n-tabs-tab__label {
-  //     z-index: 10;
-  //   }
-
-  //   .n-tabs-bar {
-  //     height: 10px;
-  //     background: linear-gradient(90deg, #77BBFF 0%, rgba(163, 231, 255, 0.22) 100%);
-  //     z-index: 0;
-  //     bottom: 2px;
-  //   }
-
-  //   .n-tab-pane {
-  //     padding-top: 0 !important;
-  //   }
-  // }
-
-  .close {
-    padding: 0;
-
-    :global {
-      .n-icon {
-        font-size: var(--n-close-size);
-        color: var(--n-close-icon-color);
-      }
-    }
-  }
-}
-
-.listContainer {
-  margin-bottom: 20px;
-  // max-height: 50vh;
-  // min-height: 50vh;
-
-  // .listSection {
-  //   min-height: 50vh;
-  // }
-
-  .emptySection {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.list {
-  margin-top: 10px;
-  padding: 0 40px 0;
-  margin-bottom: 12px;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-  gap: 22px;
-}
-
-.searchGroup {
-  position: relative;
-  padding: 0 40px;
-
-  :global {
-    .n-form-item .n-form-item-label {
-      font-size: 17px;
-      font-weight: 600;
-      color: #131415;
-      line-height: 24px;
-    }
-
-    .n-form-item {
-      .n-button {
-        --n-padding: 4Px 20px !important;
-        height: 32px;
-        font-size: max(17px, 12Px);
-        border-radius: 8Px;
-        color: rgba(0, 0, 0, 0.6);
-      }
-
-      .n-button--primary-type {
-        color: #131415;
-      }
-    }
-
-    .n-form-item-feedback-wrapper {
-      min-height: 14px;
-    }
-  }
-}
-
-
-.inputSearch {
-  position: absolute;
-  top: 4px;
-  right: 40px;
-  width: 360px !important;
-  height: 42px !important;
-  font-size: 16px;
-
-
-  :global {
-    .n-input-wrapper {
-      padding-left: 12px;
-      padding-right: 4px;
-    }
-
-    .n-input__input-el {
-      height: 42px !important;
-    }
-  }
-
-  .searchBtn {
-    height: 34px;
-    border-radius: 8px;
-    font-size: 15px;
-    font-weight: 500;
-  }
-}
-
-.popSelect {
-  font-size: 16px;
-  width: 200px;
-  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
-  border-radius: 11px;
-  --n-option-height: 34px;
-
-  :global {
-    .n-base-select-option__content {
-      width: 80% !important;
-    }
-  }
-
-}
-
-.spaceSection2 {
-  width: 69%;
-  transition: 1s all ease-in;
-
-  &>div {
-    height: 34Px !important;
-    display: flex;
-    align-items: center;
-  }
-
-
-  .textBtn {
-    background: #fff;
-    border-radius: 8Px;
-    padding: 4Px 20px;
-    font-size: max(17px, 12Px);
-    color: rgba(0, 0, 0, 0.6);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    font-weight: 500;
-    line-height: 24px;
-
-    .iconArrow {
-      display: inline-block;
-      margin-left: 8px;
-      width: 8px;
-      height: 5px;
-      background: url('@/views/content-information/images/icon-arrow2.png') no-repeat center center / contain;
-      transform: rotate(180deg);
-
-    }
-
-    &:hover,
-    &.textBtnActive {
-      background: #D2ECFF;
-      font-weight: 500;
-      color: #131415;
-    }
-
-    &:hover {
-      .iconArrow {
-
-        transform: rotate(0deg);
-      }
-    }
-  }
-}
-
-.spaceSection {
-  width: 69%;
-  gap: 8px 12px !important;
-  padding-right: 35px;
-
-  &>div {
-    line-height: var(--n-blank-height);
-  }
-}
-
-.collapseWrap {
-  width: 98%;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-
-}
-
-.collaoseBtn {
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-}
-
-.collaoseBtn.isStart {
-  transform: rotate(-180deg);
-}
-
-.collapsSection {
-  padding-top: 3px;
-
-  &.collapsSectionEmpty {
-    opacity: 0;
-    visibility: hidden;
-    display: none;
-  }
-}
-
-
-.isHidden {
-  overflow: hidden;
-  transition: 1s all ease-in;
-}
-
-.hideButton {
-  visibility: hidden;
-  height: 0 !important;
-  line-height: 0 !important;
+.selectMusic {
+  // :global {
+  //   .n-tabs-tab-pad {
+  //     width: 24px !important;
+  //   }
+
+  //   .n-tabs-nav {
+  //     padding: 12px 20px 24px;
+  //   }
+
+  //   .n-tabs-tab {
+  //     color: #8B8D98;
+  //     font-size: max(22px, 14Px);
+  //     padding-top: 12px;
+  //     padding-bottom: 6px;
+  //     line-height: 22px;
+
+  //     &.n-tabs-tab--active {
+  //       font-weight: 600 !important;
+  //       color: #131415 !important;
+  //     }
+  //   }
+
+  //   .n-tabs-tab__label {
+  //     z-index: 10;
+  //   }
+
+  //   .n-tabs-bar {
+  //     height: 10px;
+  //     background: linear-gradient(90deg, #77BBFF 0%, rgba(163, 231, 255, 0.22) 100%);
+  //     z-index: 0;
+  //     bottom: 2px;
+  //   }
+
+  //   .n-tab-pane {
+  //     padding-top: 0 !important;
+  //   }
+  // }
+
+  .close {
+    padding: 0;
+
+    :global {
+      .n-icon {
+        font-size: var(--n-close-size);
+        color: var(--n-close-icon-color);
+      }
+    }
+  }
+}
+
+.listContainer {
+  margin-bottom: 20px;
+  // max-height: 50vh;
+  // min-height: 50vh;
+
+  // .listSection {
+  //   min-height: 50vh;
+  // }
+
+  .emptySection {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.list {
+  margin-top: 10px;
+  padding: 0 40px 0;
+  margin-bottom: 12px;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  gap: 22px;
+}
+
+.searchGroup {
+  position: relative;
+  padding: 0 40px;
+
+  :global {
+    .n-form-item .n-form-item-label {
+      font-size: 17px;
+      font-weight: 600;
+      color: #131415;
+      line-height: 24px;
+    }
+
+    .n-form-item {
+      .n-button {
+        --n-padding: 4Px 20px !important;
+        height: 32px;
+        font-size: max(17px, 12Px);
+        border-radius: 8Px;
+        color: rgba(0, 0, 0, 0.6);
+      }
+
+      .n-button--primary-type {
+        color: #131415;
+      }
+    }
+
+    .n-form-item-feedback-wrapper {
+      min-height: 14px;
+    }
+  }
+}
+
+
+.inputSearch {
+  position: absolute;
+  top: 4px;
+  right: 40px;
+  width: 360px !important;
+  height: 42px !important;
+  font-size: 16px;
+
+
+  :global {
+    .n-input-wrapper {
+      padding-left: 12px;
+      padding-right: 4px;
+    }
+
+    .n-input__input-el {
+      height: 42px !important;
+    }
+  }
+
+  .searchBtn {
+    height: 34px;
+    border-radius: 8px;
+    font-size: 15px;
+    font-weight: 500;
+  }
+}
+
+.popSelect {
+  font-size: 16px;
+  width: 200px;
+  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 11px;
+  --n-option-height: 34px;
+
+  :global {
+    .n-base-select-option__content {
+      width: 80% !important;
+    }
+  }
+
+}
+
+.spaceSection2 {
+  width: 69%;
+  transition: 1s all ease-in;
+
+  &>div {
+    height: 34Px !important;
+    display: flex;
+    align-items: center;
+  }
+
+
+  .textBtn {
+    background: #fff;
+    border-radius: 8Px;
+    padding: 4Px 20px;
+    font-size: max(17px, 12Px);
+    color: rgba(0, 0, 0, 0.6);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    line-height: 24px;
+
+    .iconArrow {
+      display: inline-block;
+      margin-left: 8px;
+      width: 8px;
+      height: 5px;
+      background: url('@/views/content-information/images/icon-arrow2.png') no-repeat center center / contain;
+      transform: rotate(180deg);
+
+    }
+
+    &:hover,
+    &.textBtnActive {
+      background: #D2ECFF;
+      font-weight: 500;
+      color: #131415;
+    }
+
+    &:hover {
+      .iconArrow {
+
+        transform: rotate(0deg);
+      }
+    }
+  }
+}
+
+.spaceSection {
+  width: 71%;
+  gap: 8px 12px !important;
+  padding-right: 40px;
+
+  &>div {
+    line-height: var(--n-blank-height);
+
+    &:last-child {
+      margin-left: -12Px;
+    }
+  }
+}
+
+.collapseWrap {
+  width: 98%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+}
+
+.collaoseGroup {
+  height: var(--n-blank-height);
+  position: absolute;
+  display: flex;
+  align-items: center;
+  padding-left: 8px;
+}
+
+.collaoseBtn {
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+}
+
+.collaoseBtn.isStart {
+  transform: rotate(-180deg);
+}
+
+.collapsSection {
+  padding-top: 3px;
+
+  &.collapsSectionEmpty {
+    opacity: 0;
+    visibility: hidden;
+    display: none;
+  }
+}
+
+
+.isHidden {
+  overflow: hidden;
+  transition: 1s all ease-in;
+}
+
+.hideButton {
+  visibility: hidden;
+  height: 0 !important;
+  line-height: 0 !important;
 }

src/views/prepare-lessons/model/select-music/select-item/search-group.tsx

@@ -1,254 +1,249 @@
-import { defineComponent, reactive, onMounted, ref } from 'vue';
-import styles from './index.module.less';
-import {
-  NButton,
-  NForm,
-  NFormItem,
-  NImage,
-  NPopselect,
-  NSpace
-} from 'naive-ui';
-import TheSearch from '/src/components/TheSearch';
-import { useCatchStore } from '/src/store/modules/catchData';
-import { useThrottleFn } from '@vueuse/core';
-import isCollaose from '/src/views/natural-resources/images/isCollaose.png';
-
-export default defineComponent({
-  name: 'search-group',
-  props: {
-    type: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['search', 'add'],
-  setup(props, { emit }) {
-    const catchStore = useCatchStore();
-    const forms = reactive({
-      name: '',
-      musicSheetCategoriesId: null,
-      musicalInstrumentId: null
-    });
-
-    const state = reactive({
-      tempSubjectId: null
-    });
-
-    const onSearch = () => {
-      emit('search', forms);
-    };
-
-    const throttledFn = useThrottleFn(() => {
-      onSearch();
-    }, 500);
-
-    const collapseWrapRef = ref();
-    const divDomList = ref([] as any);
-    const orginHeight = ref(0);
-    const hiddenHeight = ref(0);
-    const line = ref(0);
-    const isCollapse = ref(false);
-    const loadingCollapse = ref(false); // 是否加载完成
-    const musicCateRef = (el: any) => {
-      if (el?.selfElRef) {
-        divDomList.value.push(el.selfElRef.parentNode);
-      }
-    };
-    const setCollapse = (flag: boolean) => {
-      isCollapse.value = flag;
-      getLive();
-    };
-    const getLive = () => {
-      try {
-        divDomList.value = [...new Set(divDomList.value)];
-        let offsetLeft = -1;
-        divDomList.value.forEach((item: any, index: number) => {
-          if (index === 0) {
-            line.value = 1;
-            offsetLeft = item.offsetLeft;
-          } else if (item.offsetLeft === offsetLeft && index != 0) {
-            // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
-            line.value++;
-          }
-          if (!isCollapse.value) {
-            if (line.value > 1) {
-              //从第3行开始 隐藏标签
-              item.style.display = 'none';
-
-              // 显示展开按钮  class名chu是在前面动态添加的
-            } else {
-              item.style.display = 'block';
-            }
-          } else {
-            item.style.display = 'block';
-          }
-        });
-        loadingCollapse.value = true;
-      } catch {
-        //
-      }
-    };
-
-    const selectChildObj = (item: any) => {
-      const obj: any = {};
-      item?.forEach((child: any) => {
-        if (child.id === forms.musicalInstrumentId) {
-          obj.selected = true;
-          obj.name = child.name;
-        }
-      });
-      return obj;
-    };
-
-    onMounted(async () => {
-      // 获取教材分类列表
-      await catchStore.getMusicSheetCategory();
-      // 获取声部列表
-      await catchStore.getSubjects();
-
-      orginHeight.value = collapseWrapRef.value?.offsetHeight;
-      hiddenHeight.value = collapseWrapRef.value?.offsetHeight / line.value;
-      // 默认隐藏
-      getLive();
-    });
-    return () => (
-      <div class={styles.searchGroup}>
-        <NForm labelAlign="left" labelPlacement="left">
-          <div
-            class={[
-              styles.collapsSection,
-              props.type === 'myResources' && styles.collapsSectionEmpty
-            ]}>
-            <NFormItem label="教材：">
-              <div
-                class={[
-                  styles.collapseWrap,
-                  loadingCollapse.value ? '' : styles.hideButton,
-                  isCollapse.value ? '' : styles.isHidden
-                ]}
-                ref={collapseWrapRef}>
-                <NSpace class={[styles.spaceSection]}>
-                  {catchStore.getAllMusicCategories.map((music: any) => (
-                    <NButton
-                      ref={musicCateRef}
-                      secondary={forms.musicSheetCategoriesId === music.id}
-                      quaternary={forms.musicSheetCategoriesId !== music.id}
-                      strong
-                      focusable={false}
-                      type={
-                        forms.musicSheetCategoriesId === music.id
-                          ? 'primary'
-                          : 'default'
-                      }
-                      onClick={() => {
-                        forms.musicSheetCategoriesId = music.id;
-                        throttledFn();
-                      }}>
-                      {music.name}
-                    </NButton>
-                  ))}
-                  {line.value > 1 && (
-                    <div
-                      style={{
-                        height: 'var(--n-blank-height)',
-                        position: 'absolute',
-                        display: 'flex',
-                        alignItems: 'center'
-                      }}
-                      onClick={() => {
-                        setCollapse(!isCollapse.value);
-                      }}>
-                      <NImage
-                        previewDisabled
-                        src={isCollaose}
-                        class={[
-                          styles.collaoseBtn,
-                          isCollapse.value ? styles.isStart : ''
-                        ]}></NImage>
-                    </div>
-                  )}
-                </NSpace>
-              </div>
-            </NFormItem>
-          </div>
-
-          <NFormItem label="乐器：">
-            <NSpace class={styles.spaceSection2}>
-              {catchStore.getSubjectInstruments.map((subject: any) =>
-                subject.instruments && subject.instruments.length > 1 ? (
-                  <NPopselect
-                    options={subject.instruments}
-                    trigger="hover"
-                    scrollable
-                    v-model:value={state.tempSubjectId}
-                    onUpdate:value={() => {
-                      forms.musicalInstrumentId = state.tempSubjectId;
-                      onSearch();
-                    }}
-                    key={subject.value}
-                    class={[styles.popSelect]}>
-                    <span
-                      class={[
-                        styles.textBtn,
-                        selectChildObj(subject.instruments).selected &&
-                          styles.textBtnActive
-                      ]}>
-                      {selectChildObj(subject.instruments).name || subject.name}
-                      <i class={styles.iconArrow}></i>
-                    </span>
-                  </NPopselect>
-                ) : (
-                  <span
-                    class={[
-                      styles.textBtn,
-
-                      forms.musicalInstrumentId === subject.value &&
-                        styles.textBtnActive
-                    ]}
-                    onClick={() => {
-                      forms.musicalInstrumentId = subject.value;
-
-                      state.tempSubjectId = null;
-                      onSearch();
-                    }}>
-                    {subject.name}
-                  </span>
-                )
-              )}
-            </NSpace>
-          </NFormItem>
-          {/* <NFormItem label="教材：">
-            <NSpace class={styles.spaceSection}>
-              {catchStore.getAllMusicCategories.map((music: any) => (
-                <NButton
-                  secondary={forms.musicSheetCategoriesId === music.id}
-                  quaternary={forms.musicSheetCategoriesId !== music.id}
-                  strong
-                  focusable={false}
-                  type={
-                    forms.musicSheetCategoriesId === music.id
-                      ? 'primary'
-                      : 'default'
-                  }
-                  onClick={() => {
-                    forms.musicSheetCategoriesId = music.id;
-                    throttledFn();
-                  }}>
-                  {music.name}
-                </NButton>
-              ))}
-            </NSpace>
-          </NFormItem> */}
-          <TheSearch
-            class={[styles.inputSearch]}
-            round
-            onSearch={(val: string) => {
-              forms.name = val;
-              throttledFn();
-            }}
-          />
-        </NForm>
-      </div>
-    );
-  }
-});
+import { defineComponent, reactive, onMounted, ref } from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NForm,
+  NFormItem,
+  NImage,
+  NPopselect,
+  NSpace
+} from 'naive-ui';
+import TheSearch from '/src/components/TheSearch';
+import { useCatchStore } from '/src/store/modules/catchData';
+import { useThrottleFn } from '@vueuse/core';
+import isCollaose from '/src/views/natural-resources/images/isCollaose.png';
+
+export default defineComponent({
+  name: 'search-group',
+  props: {
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['search', 'add'],
+  setup(props, { emit }) {
+    const catchStore = useCatchStore();
+    const forms = reactive({
+      name: '',
+      musicSheetCategoriesId: null,
+      musicalInstrumentId: null
+    });
+
+    const state = reactive({
+      tempSubjectId: null
+    });
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    const throttledFn = useThrottleFn(() => {
+      onSearch();
+    }, 500);
+
+    const collapseWrapRef = ref();
+    const divDomList = ref([] as any);
+    const orginHeight = ref(0);
+    const hiddenHeight = ref(0);
+    const line = ref(0);
+    const isCollapse = ref(false);
+    const loadingCollapse = ref(false); // 是否加载完成
+    const musicCateRef = (el: any) => {
+      if (el?.selfElRef) {
+        divDomList.value.push(el.selfElRef.parentNode);
+      }
+    };
+    const setCollapse = (flag: boolean) => {
+      isCollapse.value = flag;
+      getLive();
+    };
+    const getLive = () => {
+      try {
+        divDomList.value = [...new Set(divDomList.value)];
+        let offsetLeft = -1;
+        divDomList.value.forEach((item: any, index: number) => {
+          if (index === 0) {
+            line.value = 1;
+            offsetLeft = item.offsetLeft;
+          } else if (item.offsetLeft === offsetLeft && index != 0) {
+            // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
+            line.value++;
+          }
+          if (!isCollapse.value) {
+            if (line.value > 1) {
+              //从第3行开始 隐藏标签
+              item.style.display = 'none';
+
+              // 显示展开按钮  class名chu是在前面动态添加的
+            } else {
+              item.style.display = 'block';
+            }
+          } else {
+            item.style.display = 'block';
+          }
+        });
+        loadingCollapse.value = true;
+      } catch {
+        //
+      }
+    };
+
+    const selectChildObj = (item: any) => {
+      const obj: any = {};
+      item?.forEach((child: any) => {
+        if (child.id === forms.musicalInstrumentId) {
+          obj.selected = true;
+          obj.name = child.name;
+        }
+      });
+      return obj;
+    };
+
+    onMounted(async () => {
+      // 获取教材分类列表
+      await catchStore.getMusicSheetCategory();
+      // 获取声部列表
+      await catchStore.getSubjects();
+
+      orginHeight.value = collapseWrapRef.value?.offsetHeight;
+      hiddenHeight.value = collapseWrapRef.value?.offsetHeight / line.value;
+      // 默认隐藏
+      getLive();
+    });
+    return () => (
+      <div class={styles.searchGroup}>
+        <NForm labelAlign="left" labelPlacement="left">
+          <div
+            class={[
+              styles.collapsSection,
+              props.type === 'myResources' && styles.collapsSectionEmpty
+            ]}>
+            <NFormItem label="教材：">
+              <div
+                class={[
+                  styles.collapseWrap,
+                  loadingCollapse.value ? '' : styles.hideButton,
+                  isCollapse.value ? '' : styles.isHidden
+                ]}
+                ref={collapseWrapRef}>
+                <NSpace class={[styles.spaceSection]}>
+                  {catchStore.getAllMusicCategories.map((music: any) => (
+                    <NButton
+                      ref={musicCateRef}
+                      secondary={forms.musicSheetCategoriesId === music.id}
+                      quaternary={forms.musicSheetCategoriesId !== music.id}
+                      strong
+                      focusable={false}
+                      type={
+                        forms.musicSheetCategoriesId === music.id
+                          ? 'primary'
+                          : 'default'
+                      }
+                      onClick={() => {
+                        forms.musicSheetCategoriesId = music.id;
+                        throttledFn();
+                      }}>
+                      {music.name}
+                    </NButton>
+                  ))}
+                  {line.value > 1 && (
+                    <div
+                      class={styles.collaoseGroup}
+                      onClick={() => {
+                        setCollapse(!isCollapse.value);
+                      }}>
+                      <NImage
+                        previewDisabled
+                        src={isCollaose}
+                        class={[
+                          styles.collaoseBtn,
+                          isCollapse.value ? styles.isStart : ''
+                        ]}></NImage>
+                    </div>
+                  )}
+                </NSpace>
+              </div>
+            </NFormItem>
+          </div>
+
+          <NFormItem label="乐器：">
+            <NSpace class={styles.spaceSection2}>
+              {catchStore.getSubjectInstruments.map((subject: any) =>
+                subject.instruments && subject.instruments.length > 1 ? (
+                  <NPopselect
+                    options={subject.instruments}
+                    trigger="hover"
+                    scrollable
+                    v-model:value={state.tempSubjectId}
+                    onUpdate:value={() => {
+                      forms.musicalInstrumentId = state.tempSubjectId;
+                      onSearch();
+                    }}
+                    key={subject.value}
+                    class={[styles.popSelect]}>
+                    <span
+                      class={[
+                        styles.textBtn,
+                        selectChildObj(subject.instruments).selected &&
+                          styles.textBtnActive
+                      ]}>
+                      {selectChildObj(subject.instruments).name || subject.name}
+                      <i class={styles.iconArrow}></i>
+                    </span>
+                  </NPopselect>
+                ) : (
+                  <span
+                    class={[
+                      styles.textBtn,
+
+                      forms.musicalInstrumentId === subject.value &&
+                        styles.textBtnActive
+                    ]}
+                    onClick={() => {
+                      forms.musicalInstrumentId = subject.value;
+
+                      state.tempSubjectId = null;
+                      onSearch();
+                    }}>
+                    {subject.name}
+                  </span>
+                )
+              )}
+            </NSpace>
+          </NFormItem>
+          {/* <NFormItem label="教材：">
+            <NSpace class={styles.spaceSection}>
+              {catchStore.getAllMusicCategories.map((music: any) => (
+                <NButton
+                  secondary={forms.musicSheetCategoriesId === music.id}
+                  quaternary={forms.musicSheetCategoriesId !== music.id}
+                  strong
+                  focusable={false}
+                  type={
+                    forms.musicSheetCategoriesId === music.id
+                      ? 'primary'
+                      : 'default'
+                  }
+                  onClick={() => {
+                    forms.musicSheetCategoriesId = music.id;
+                    throttledFn();
+                  }}>
+                  {music.name}
+                </NButton>
+              ))}
+            </NSpace>
+          </NFormItem> */}
+          <TheSearch
+            class={[styles.inputSearch]}
+            round
+            onSearch={(val: string) => {
+              forms.name = val;
+              throttledFn();
+            }}
+          />
+        </NForm>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/model/select-resources/select-item/class-search-group/index.module.less

@@ -1,210 +1,210 @@
-.searchGroup {
-  position: relative;
-  padding: 0 40px;
-
-
-  .btnType {
-    gap: 0px 24px !important;
-
-    :global {
-      .n-button {
-        height: 37px;
-        padding: 0 24px;
-        font-size: 18px;
-        color: rgba(0, 0, 0, .6);
-
-        &.n-button--primary-type {
-          font-weight: bold;
-          color: #fff;
-        }
-      }
-    }
-  }
-
-  :global {
-    .n-form {
-      position: relative;
-    }
-
-    .n-form-item {
-      .n-form-item-label {
-        font-size: max(17px, 13px);
-        font-weight: 600;
-        color: #131415;
-        line-height: 24px;
-      }
-
-      .n-button {
-        height: 32px;
-        padding: 4Px 20px;
-        font-size: max(17px, 12Px);
-        border-radius: 8px;
-        color: rgba(0, 0, 0, 0.6);
-      }
-
-      .n-button--primary-type {
-        color: #131415;
-        background-color: #D2ECFF !important;
-      }
-    }
-
-    .n-form-item-feedback-wrapper {
-      min-height: 14px;
-    }
-  }
-
-  .inputSearch {
-    position: absolute;
-    top: 4px;
-    right: 0px;
-    width: 360px;
-    height: 42px;
-    font-size: 16px;
-    --n-height: 42px !important;
-
-    img {
-      width: 18px;
-      height: 18px;
-    }
-
-    :global {
-      .n-input-wrapper {
-        padding-left: 12px;
-        padding-right: 4px;
-        height: 42px !important;
-      }
-
-      .n-button {
-        height: 34px;
-        font-size: 15px;
-        font-weight: 500;
-        width: auto;
-      }
-    }
-  }
-
-  .searchCatatory {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 20px;
-    border-bottom: 1px solid #F2F2F2;
-    margin-bottom: 20px;
-
-    .addTrain {
-      height: 37px;
-      border-radius: 8px;
-      font-size: 18px;
-      background-color: #E8F4FF;
-      color: #0378EC;
-
-      img {
-        width: 16px;
-        height: 16px;
-        margin-right: 8px;
-      }
-    }
-  }
-}
-
-.spaceSection {
-  width: 69%;
-  gap: 8px 12px !important;
-
-  &>div {
-    line-height: var(--n-blank-height);
-  }
-}
-
-
-.collapseWrap {
-  width: 98%;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-
-}
-
-.collaoseBtn {
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-}
-
-.collaoseBtn.isStart {
-  transform: rotate(-180deg);
-}
-
-.collapsSection {
-  // padding-top: 10px;
-}
-
-.isHidden {
-  overflow: hidden;
-  transition: 1s all ease-in;
-}
-
-.hideButton {
-  visibility: hidden;
-  height: 0 !important;
-  line-height: 0 !important;
-}
-
-.popSelect {
-  font-size: 16px;
-  width: 200px;
-  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
-  border-radius: 11px;
-  --n-option-height: 34px;
-
-  :global {
-    .n-base-select-option__content {
-      width: 80% !important;
-    }
-  }
-
-}
-
-.spaceSection2 {
-  &>div {
-    height: 34Px !important;
-    display: flex;
-    align-items: center;
-  }
-}
-
-.textBtn {
-  background: #fff;
-  border-radius: 8Px;
-  padding: 4Px 20px;
-  font-size: max(17px, 12Px);
-  color: rgba(0, 0, 0, 0.6);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-weight: 500;
-  line-height: 24px;
-
-  .iconArrow {
-    display: inline-block;
-    margin-left: 8px;
-    width: 8px;
-    height: 5px;
-    background: url('@/views/content-information/images/icon-arrow2.png') no-repeat center center / contain;
-    transform: rotate(180deg);
-
-  }
-
-  &:hover,
-  &.textBtnActive {
-    background: #D2ECFF;
-    font-weight: 500;
-    color: #131415;
-  }
-
-  &:hover {
-    .iconArrow {
-
-      transform: rotate(0deg);
-    }
-  }
+.searchGroup {
+  position: relative;
+  padding: 0 40px;
+
+
+  .btnType {
+    gap: 0px 24px !important;
+
+    :global {
+      .n-button {
+        height: 37px;
+        padding: 0 24px;
+        font-size: 18px;
+        color: rgba(0, 0, 0, .6);
+
+        &.n-button--primary-type {
+          font-weight: bold;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  :global {
+    .n-form {
+      position: relative;
+    }
+
+    .n-form-item {
+      .n-form-item-label {
+        font-size: max(17px, 13px);
+        font-weight: 600;
+        color: #131415;
+        line-height: 24px;
+      }
+
+      .n-button {
+        height: 32px;
+        padding: 4Px 20px;
+        font-size: max(17px, 12Px);
+        border-radius: 8px;
+        color: rgba(0, 0, 0, 0.6);
+      }
+
+      .n-button--primary-type {
+        color: #131415;
+        background-color: #D2ECFF !important;
+      }
+    }
+
+    .n-form-item-feedback-wrapper {
+      min-height: 14px;
+    }
+  }
+
+  .inputSearch {
+    position: absolute;
+    top: 4px;
+    right: 0px;
+    width: 360px;
+    height: 42px;
+    font-size: 16px;
+    --n-height: 42px !important;
+
+    img {
+      width: 18px;
+      height: 18px;
+    }
+
+    :global {
+      .n-input-wrapper {
+        padding-left: 12px;
+        padding-right: 4px;
+        height: 42px !important;
+      }
+
+      .n-button {
+        height: 34px;
+        font-size: 15px;
+        font-weight: 500;
+        width: auto;
+      }
+    }
+  }
+
+  .searchCatatory {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #F2F2F2;
+    margin-bottom: 20px;
+
+    .addTrain {
+      height: 37px;
+      border-radius: 8px;
+      font-size: 18px;
+      background-color: #E8F4FF;
+      color: #0378EC;
+
+      img {
+        width: 16px;
+        height: 16px;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+.spaceSection {
+  width: 69%;
+  gap: 8px 12px !important;
+
+  &>div {
+    line-height: var(--n-blank-height);
+  }
+}
+
+
+.collapseWrap {
+  width: 98%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+}
+
+.collaoseBtn {
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+}
+
+.collaoseBtn.isStart {
+  transform: rotate(-180deg);
+}
+
+.collapsSection {
+  // padding-top: 10px;
+}
+
+.isHidden {
+  overflow: hidden;
+  transition: 1s all ease-in;
+}
+
+.hideButton {
+  visibility: hidden;
+  height: 0 !important;
+  line-height: 0 !important;
+}
+
+.popSelect {
+  font-size: 16px;
+  width: 200px;
+  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 11px;
+  --n-option-height: 34px;
+
+  :global {
+    .n-base-select-option__content {
+      width: 80% !important;
+    }
+  }
+
+}
+
+.spaceSection2 {
+  &>div {
+    height: 34Px !important;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.textBtn {
+  background: #fff;
+  border-radius: 8Px;
+  padding: 4Px 20px;
+  font-size: max(17px, 12Px);
+  color: rgba(0, 0, 0, 0.6);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  line-height: 24px;
+
+  .iconArrow {
+    display: inline-block;
+    margin-left: 8px;
+    width: 8px;
+    height: 5px;
+    background: url('@/views/content-information/images/icon-arrow2.png') no-repeat center center / contain;
+    transform: rotate(180deg);
+
+  }
+
+  &:hover,
+  &.textBtnActive {
+    background: #D2ECFF;
+    font-weight: 500;
+    color: #131415;
+  }
+
+  &:hover {
+    .iconArrow {
+
+      transform: rotate(0deg);
+    }
+  }
 }

src/views/prepare-lessons/model/select-resources/select-item/class-search-group/index.tsx

@@ -1,304 +1,304 @@
-import {
-  PropType,
-  defineComponent,
-  nextTick,
-  onMounted,
-  reactive,
-  ref,
-  toRef
-} from 'vue';
-import styles from './index.module.less';
-import {
-  NButton,
-  NForm,
-  NFormItem,
-  NImage,
-  NPopselect,
-  NSpace
-} from 'naive-ui';
-import { resourceTypeArray } from '/src/utils/searchArray';
-import { useCatchStore } from '/src/store/modules/catchData';
-import { useThrottleFn } from '@vueuse/core';
-import TheSearch from '/src/components/TheSearch';
-import isCollaose from '/src/views/natural-resources/images/isCollaose.png';
-
-export default defineComponent({
-  name: 'resource-search-group',
-  props: {
-    type: {
-      type: String as PropType<
-        'relateResources' | 'shareResources' | 'myResources' | 'myCollect'
-      >,
-      default: 'shareResources'
-    },
-    subjectId: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['search'],
-  setup(props, { emit }) {
-    const subjectId = toRef(props.subjectId);
-    const catchStore = useCatchStore();
-    const forms = reactive({
-      type: 'MUSIC', //
-      name: '',
-      subjectId: subjectId.value as any,
-      bookVersionId: null
-    });
-    const resourceType = ref([] as any);
-
-    const onSearch = () => {
-      emit('search', forms);
-    };
-
-    const throttleFn = useThrottleFn(() => onSearch(), 500);
-
-    // const collapseWrapRef = ref();
-    // const divDomList = ref([] as any);
-    // const orginHeight = ref(0);
-    // const hiddenHeight = ref(0);
-    // const line = ref(0);
-    // const isCollapse = ref(false);
-    // const loadingCollapse = ref(false); // 是否加载完成
-    // const musicCateRef = (el: any) => {
-    //   if (el?.selfElRef) {
-    //     divDomList.value.push(el.selfElRef.parentNode);
-    //   }
-    // };
-    // const setCollapse = (flag: boolean) => {
-    //   isCollapse.value = flag;
-    //   getLive();
-    // };
-    // const getLive = () => {
-    //   try {
-    //     divDomList.value = [...new Set(divDomList.value)];
-    //     let offsetLeft = -1;
-    //     divDomList.value.forEach((item: any, index: number) => {
-    //       if (index === 0) {
-    //         line.value = 1;
-    //         offsetLeft = item.offsetLeft;
-    //       } else if (item.offsetLeft === offsetLeft && index != 0) {
-    //         // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
-    //         line.value++;
-    //       }
-    //       if (!isCollapse.value) {
-    //         if (line.value > 1) {
-    //           //从第3行开始 隐藏标签
-    //           item.style.display = 'none';
-
-    //           // 显示展开按钮  class名chu是在前面动态添加的
-    //         } else {
-    //           item.style.display = 'block';
-    //         }
-    //       } else {
-    //         item.style.display = 'block';
-    //       }
-    //     });
-    //     loadingCollapse.value = true;
-    //   } catch {
-    //     //
-    //   }
-    // };
-
-    const selectChildObj = (item: any) => {
-      const obj: any = {};
-      item?.forEach((child: any) => {
-        if (child.id === forms.subjectId) {
-          obj.selected = true;
-          obj.name = child.name;
-        }
-      });
-      return obj;
-    };
-    onMounted(async () => {
-      // if (props.type === 'myCollect') {
-      //   resourceType.value.push({
-      //     label: '全部',
-      //     value: ''
-      //   });
-      //   forms.type = ''; // 默认全部
-      // }
-      resourceTypeArray.forEach((item: any) => {
-        // if (props.type === 'myResources') {
-        //   item.value !== 'MUSIC' && resourceType.value.push(item);
-        // } else {
-        resourceType.value.push(item);
-        // }
-      });
-
-      // 获取教材分类列表
-      await catchStore.getMusicSheetCategory();
-      // 获取声部
-      await catchStore.getSubjects();
-      catchStore.getSubjectInstruments.forEach((item: any) => {
-        if (item.id == props.subjectId) {
-          if (item.instruments.length > 0) {
-            forms.subjectId = item.instruments[0].value;
-          } else {
-            forms.subjectId = item.value;
-          }
-        }
-      });
-      // 这里开始
-      // musicCateRef
-      // if (forms.type === 'MUSIC') {
-      //   orginHeight.value = collapseWrapRef.value?.offsetHeight;
-      //   hiddenHeight.value = collapseWrapRef.value?.offsetHeight / line.value;
-      //   // 默认隐藏
-      //   getLive();
-      // }
-    });
-    return () => (
-      <div class={styles.searchGroup}>
-        {/* <div class={styles.searchCatatory}> */}
-        {/* <NSpace size="small" class={styles.btnType}>
-            {resourceType.value.map((item: any) => (
-              <NButton
-                type={forms.type === item.value ? 'primary' : 'default'}
-                secondary={forms.type === item.value ? false : true}
-                round
-                size="small"
-                focusable={false}
-                onClick={() => {
-                  forms.type = item.value;
-                  onSearch();
-
-                  try {
-                    nextTick(() => {
-                      if (forms.type === 'MUSIC') {
-                        orginHeight.value = collapseWrapRef.value?.offsetHeight;
-                        hiddenHeight.value =
-                          collapseWrapRef.value?.offsetHeight / line.value;
-                        // 默认隐藏
-                        getLive();
-                      } else {
-                        divDomList.value = [];
-                      }
-                    });
-                  } catch {
-                    //
-                  }
-                }}>
-                {item.label}
-              </NButton>
-            ))}
-          </NSpace> */}
-
-        {/* </div> */}
-        <NForm labelAlign="left" labelPlacement="left">
-          {/* {forms.type === 'MUSIC' && props.type === 'shareResources' && (
-            <div class={styles.collapsSection}>
-              <NFormItem label="教材：">
-                <div
-                  class={[
-                    styles.collapseWrap,
-                    loadingCollapse.value ? '' : styles.hideButton,
-                    isCollapse.value ? '' : styles.isHidden
-                  ]}
-                  ref={collapseWrapRef}>
-                  <NSpace class={[styles.spaceSection]}>
-                    {catchStore.getAllMusicCategories.map((music: any) => (
-                      <NButton
-                        ref={musicCateRef}
-                        secondary={forms.bookVersionId === music.id}
-                        quaternary={forms.bookVersionId !== music.id}
-                        strong
-                        focusable={false}
-                        type={
-                          forms.bookVersionId === music.id
-                            ? 'primary'
-                            : 'default'
-                        }
-                        onClick={() => {
-                          forms.bookVersionId = music.id;
-                          onSearch();
-                        }}>
-                        {music.name}
-                      </NButton>
-                    ))}
-                    {line.value > 1 && (
-                      <div
-                        style={{
-                          height: 'var(--n-blank-height)',
-                          position: 'absolute',
-                          display: 'flex',
-                          alignItems: 'center'
-                        }}
-                        onClick={() => {
-                          setCollapse(!isCollapse.value);
-                        }}>
-                        <NImage
-                          previewDisabled
-                          src={isCollaose}
-                          class={[
-                            styles.collaoseBtn,
-                            isCollapse.value ? styles.isStart : ''
-                          ]}></NImage>
-                      </div>
-                    )}
-                  </NSpace>
-                </div>
-              </NFormItem>
-            </div>
-          )} */}
-
-          <NFormItem label="乐器：">
-            <NSpace
-              class={[
-                styles.spaceSection,
-                styles.spaceSection2,
-                'spaceSectionBox'
-              ]}>
-              {catchStore.getSubjectInstruments.map((subject: any) =>
-                subject.instruments && subject.instruments.length > 1 ? (
-                  <NPopselect
-                    options={subject.instruments}
-                    trigger="hover"
-                    scrollable
-                    v-model:value={forms.subjectId}
-                    onUpdate:value={() => {
-                      onSearch();
-                    }}
-                    key={subject.value}
-                    class={[styles.popSelect]}>
-                    <span
-                      class={[
-                        styles.textBtn,
-                        selectChildObj(subject.instruments).selected &&
-                          styles.textBtnActive
-                      ]}>
-                      {selectChildObj(subject.instruments).name || subject.name}
-                      <i class={styles.iconArrow}></i>
-                    </span>
-                  </NPopselect>
-                ) : (
-                  <span
-                    class={[
-                      styles.textBtn,
-                      forms.subjectId === subject.value && styles.textBtnActive
-                    ]}
-                    onClick={() => {
-                      forms.subjectId = subject.value;
-                      onSearch();
-                    }}>
-                    {subject.name}
-                  </span>
-                )
-              )}
-            </NSpace>
-          </NFormItem>
-
-          <TheSearch
-            class={styles.inputSearch}
-            round
-            onSearch={(val: string) => {
-              forms.name = val;
-              throttleFn();
-            }}
-          />
-        </NForm>
-      </div>
-    );
-  }
-});
+import {
+  PropType,
+  defineComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  toRef
+} from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NForm,
+  NFormItem,
+  NImage,
+  NPopselect,
+  NSpace
+} from 'naive-ui';
+import { resourceTypeArray } from '/src/utils/searchArray';
+import { useCatchStore } from '/src/store/modules/catchData';
+import { useThrottleFn } from '@vueuse/core';
+import TheSearch from '/src/components/TheSearch';
+import isCollaose from '/src/views/natural-resources/images/isCollaose.png';
+
+export default defineComponent({
+  name: 'resource-search-group',
+  props: {
+    type: {
+      type: String as PropType<
+        'relateResources' | 'shareResources' | 'myResources' | 'myCollect'
+      >,
+      default: 'shareResources'
+    },
+    subjectId: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['search'],
+  setup(props, { emit }) {
+    const subjectId = toRef(props.subjectId);
+    const catchStore = useCatchStore();
+    const forms = reactive({
+      type: 'MUSIC', //
+      name: '',
+      subjectId: subjectId.value as any,
+      bookVersionId: null
+    });
+    const resourceType = ref([] as any);
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    const throttleFn = useThrottleFn(() => onSearch(), 500);
+
+    // const collapseWrapRef = ref();
+    // const divDomList = ref([] as any);
+    // const orginHeight = ref(0);
+    // const hiddenHeight = ref(0);
+    // const line = ref(0);
+    // const isCollapse = ref(false);
+    // const loadingCollapse = ref(false); // 是否加载完成
+    // const musicCateRef = (el: any) => {
+    //   if (el?.selfElRef) {
+    //     divDomList.value.push(el.selfElRef.parentNode);
+    //   }
+    // };
+    // const setCollapse = (flag: boolean) => {
+    //   isCollapse.value = flag;
+    //   getLive();
+    // };
+    // const getLive = () => {
+    //   try {
+    //     divDomList.value = [...new Set(divDomList.value)];
+    //     let offsetLeft = -1;
+    //     divDomList.value.forEach((item: any, index: number) => {
+    //       if (index === 0) {
+    //         line.value = 1;
+    //         offsetLeft = item.offsetLeft;
+    //       } else if (item.offsetLeft === offsetLeft && index != 0) {
+    //         // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
+    //         line.value++;
+    //       }
+    //       if (!isCollapse.value) {
+    //         if (line.value > 1) {
+    //           //从第3行开始 隐藏标签
+    //           item.style.display = 'none';
+
+    //           // 显示展开按钮  class名chu是在前面动态添加的
+    //         } else {
+    //           item.style.display = 'block';
+    //         }
+    //       } else {
+    //         item.style.display = 'block';
+    //       }
+    //     });
+    //     loadingCollapse.value = true;
+    //   } catch {
+    //     //
+    //   }
+    // };
+
+    const selectChildObj = (item: any) => {
+      const obj: any = {};
+      item?.forEach((child: any) => {
+        if (child.id === forms.subjectId) {
+          obj.selected = true;
+          obj.name = child.name;
+        }
+      });
+      return obj;
+    };
+    onMounted(async () => {
+      // if (props.type === 'myCollect') {
+      //   resourceType.value.push({
+      //     label: '全部',
+      //     value: ''
+      //   });
+      //   forms.type = ''; // 默认全部
+      // }
+      resourceTypeArray.forEach((item: any) => {
+        // if (props.type === 'myResources') {
+        //   item.value !== 'MUSIC' && resourceType.value.push(item);
+        // } else {
+        resourceType.value.push(item);
+        // }
+      });
+
+      // 获取教材分类列表
+      await catchStore.getMusicSheetCategory();
+      // 获取声部
+      await catchStore.getSubjects();
+      catchStore.getSubjectInstruments.forEach((item: any) => {
+        if (item.id == props.subjectId) {
+          if (item.instruments.length > 0) {
+            forms.subjectId = item.instruments[0].value;
+          } else {
+            forms.subjectId = item.value;
+          }
+        }
+      });
+      // 这里开始
+      // musicCateRef
+      // if (forms.type === 'MUSIC') {
+      //   orginHeight.value = collapseWrapRef.value?.offsetHeight;
+      //   hiddenHeight.value = collapseWrapRef.value?.offsetHeight / line.value;
+      //   // 默认隐藏
+      //   getLive();
+      // }
+    });
+    return () => (
+      <div class={styles.searchGroup}>
+        {/* <div class={styles.searchCatatory}> */}
+        {/* <NSpace size="small" class={styles.btnType}>
+            {resourceType.value.map((item: any) => (
+              <NButton
+                type={forms.type === item.value ? 'primary' : 'default'}
+                secondary={forms.type === item.value ? false : true}
+                round
+                size="small"
+                focusable={false}
+                onClick={() => {
+                  forms.type = item.value;
+                  onSearch();
+
+                  try {
+                    nextTick(() => {
+                      if (forms.type === 'MUSIC') {
+                        orginHeight.value = collapseWrapRef.value?.offsetHeight;
+                        hiddenHeight.value =
+                          collapseWrapRef.value?.offsetHeight / line.value;
+                        // 默认隐藏
+                        getLive();
+                      } else {
+                        divDomList.value = [];
+                      }
+                    });
+                  } catch {
+                    //
+                  }
+                }}>
+                {item.label}
+              </NButton>
+            ))}
+          </NSpace> */}
+
+        {/* </div> */}
+        <NForm labelAlign="left" labelPlacement="left">
+          {/* {forms.type === 'MUSIC' && props.type === 'shareResources' && (
+            <div class={styles.collapsSection}>
+              <NFormItem label="教材：">
+                <div
+                  class={[
+                    styles.collapseWrap,
+                    loadingCollapse.value ? '' : styles.hideButton,
+                    isCollapse.value ? '' : styles.isHidden
+                  ]}
+                  ref={collapseWrapRef}>
+                  <NSpace class={[styles.spaceSection]}>
+                    {catchStore.getAllMusicCategories.map((music: any) => (
+                      <NButton
+                        ref={musicCateRef}
+                        secondary={forms.bookVersionId === music.id}
+                        quaternary={forms.bookVersionId !== music.id}
+                        strong
+                        focusable={false}
+                        type={
+                          forms.bookVersionId === music.id
+                            ? 'primary'
+                            : 'default'
+                        }
+                        onClick={() => {
+                          forms.bookVersionId = music.id;
+                          onSearch();
+                        }}>
+                        {music.name}
+                      </NButton>
+                    ))}
+                    {line.value > 1 && (
+                      <div
+                        style={{
+                          height: 'var(--n-blank-height)',
+                          position: 'absolute',
+                          display: 'flex',
+                          alignItems: 'center'
+                        }}
+                        onClick={() => {
+                          setCollapse(!isCollapse.value);
+                        }}>
+                        <NImage
+                          previewDisabled
+                          src={isCollaose}
+                          class={[
+                            styles.collaoseBtn,
+                            isCollapse.value ? styles.isStart : ''
+                          ]}></NImage>
+                      </div>
+                    )}
+                  </NSpace>
+                </div>
+              </NFormItem>
+            </div>
+          )} */}
+
+          <NFormItem label="乐器：">
+            <NSpace
+              class={[
+                styles.spaceSection,
+                styles.spaceSection2,
+                'spaceSectionBox'
+              ]}>
+              {catchStore.getSubjectInstruments.map((subject: any) =>
+                subject.instruments && subject.instruments.length > 1 ? (
+                  <NPopselect
+                    options={subject.instruments}
+                    trigger="hover"
+                    scrollable
+                    v-model:value={forms.subjectId}
+                    onUpdate:value={() => {
+                      onSearch();
+                    }}
+                    key={subject.value}
+                    class={[styles.popSelect]}>
+                    <span
+                      class={[
+                        styles.textBtn,
+                        selectChildObj(subject.instruments).selected &&
+                          styles.textBtnActive
+                      ]}>
+                      {selectChildObj(subject.instruments).name || subject.name}
+                      <i class={styles.iconArrow}></i>
+                    </span>
+                  </NPopselect>
+                ) : (
+                  <span
+                    class={[
+                      styles.textBtn,
+                      forms.subjectId === subject.value && styles.textBtnActive
+                    ]}
+                    onClick={() => {
+                      forms.subjectId = subject.value;
+                      onSearch();
+                    }}>
+                    {subject.name}
+                  </span>
+                )
+              )}
+            </NSpace>
+          </NFormItem>
+
+          <TheSearch
+            class={styles.inputSearch}
+            round
+            onSearch={(val: string) => {
+              forms.name = val;
+              throttleFn();
+            }}
+          />
+        </NForm>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/model/select-resources/select-item/resource-search-group/index.module.less

@@ -1,208 +1,219 @@
-.searchGroup {
-  position: relative;
-  padding: 0 40px;
-
-
-  .btnType {
-    gap: 0px 24px !important;
-
-    :global {
-      .n-button {
-        height: 37px;
-        padding: 0 24px;
-        font-size: 18px;
-        color: rgba(0, 0, 0, .6);
-
-        &.n-button--primary-type {
-          font-weight: bold;
-          color: #fff;
-        }
-      }
-    }
-  }
-
-  :global {
-    .n-form {
-      position: relative;
-    }
-
-    .n-form-item {
-      .n-form-item-label {
-        font-size: 17px;
-        font-weight: 600;
-        color: #131415;
-        line-height: 24px;
-      }
-
-      .n-button {
-        height: 32px;
-        font-size: 17px;
-        border-radius: 8px;
-        padding: 4Px 20px;
-        font-size: max(17px, 12Px);
-        color: rgba(0, 0, 0, 0.6);
-      }
-
-      .n-button--primary-type {
-        color: #131415;
-      }
-    }
-
-    .n-form-item-feedback-wrapper {
-      min-height: 14px;
-    }
-  }
-
-  .inputSearch {
-    width: 360px;
-    height: 42px;
-    font-size: 16px;
-    --n-height: 42px !important;
-
-    img {
-      width: 18px;
-      height: 18px;
-    }
-
-    :global {
-      .n-input-wrapper {
-        padding-left: 12px;
-        padding-right: 4px;
-        height: 42px !important;
-      }
-
-      .n-button {
-        height: 34px;
-        font-size: 15px;
-        font-weight: 500;
-        width: auto;
-      }
-    }
-  }
-
-  .searchCatatory {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 20px;
-    border-bottom: 1px solid #F2F2F2;
-    margin-bottom: 20px;
-
-    .addTrain {
-      height: 37px;
-      border-radius: 8px;
-      font-size: 18px;
-      background-color: #E8F4FF;
-      color: #0378EC;
-
-      img {
-        width: 16px;
-        height: 16px;
-        margin-right: 8px;
-      }
-    }
-  }
-}
-
-.spaceSection {
-
-  // width: 72%;
-  gap: 8px 12px !important;
-
-  &>div {
-    line-height: var(--n-blank-height);
-  }
-}
-
-
-.collapseWrap {
-  width: 98%;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-
-}
-
-.collaoseBtn {
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-}
-
-.collaoseBtn.isStart {
-  transform: rotate(-180deg);
-}
-
-.collapsSection {
-  // padding-top: 10px;
-}
-
-.isHidden {
-  overflow: hidden;
-  transition: 1s all ease-in;
-}
-
-.hideButton {
-  visibility: hidden;
-  height: 0 !important;
-  line-height: 0 !important;
-}
-
-.popSelect {
-  font-size: 16px;
-  width: 200px;
-  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
-  border-radius: 11px;
-  --n-option-height: 34px;
-
-  :global {
-    .n-base-select-option__content {
-      width: 80% !important;
-    }
-  }
-
-}
-
-.spaceSection2 {
-  &>div {
-    height: 34Px !important;
-    display: flex;
-    align-items: center;
-  }
-}
-
-.textBtn {
-  background: #fff;
-  border-radius: 8Px;
-  padding: 4Px 20px;
-  font-size: max(17px, 12Px);
-  color: rgba(0, 0, 0, 0.6);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-weight: 500;
-  line-height: 24px;
-
-  .iconArrow {
-    display: inline-block;
-    margin-left: 8px;
-    width: 8px;
-    height: 5px;
-    background: url('@/views/content-information/images/icon-arrow2.png') no-repeat center center / contain;
-    transform: rotate(180deg);
-
-  }
-
-  &:hover,
-  &.textBtnActive {
-    background: #D2ECFF;
-    font-weight: 500;
-    color: #131415;
-  }
-
-  &:hover {
-    .iconArrow {
-
-      transform: rotate(0deg);
-    }
-  }
+.searchGroup {
+  position: relative;
+  padding: 0 40px;
+
+
+  .btnType {
+    gap: 0px 24px !important;
+
+    :global {
+      .n-button {
+        height: 37px;
+        padding: 0 24px;
+        font-size: 18px;
+        color: rgba(0, 0, 0, .6);
+
+        &.n-button--primary-type {
+          font-weight: bold;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  :global {
+    .n-form {
+      position: relative;
+    }
+
+    .n-form-item {
+      .n-form-item-label {
+        font-size: 17px;
+        font-weight: 600;
+        color: #131415;
+        line-height: 24px;
+      }
+
+      .n-button {
+        height: 32px;
+        font-size: 17px;
+        border-radius: 8px;
+        padding: 4Px 20px;
+        font-size: max(17px, 12Px);
+        color: rgba(0, 0, 0, 0.6);
+      }
+
+      .n-button--primary-type {
+        color: #131415;
+      }
+    }
+
+    .n-form-item-feedback-wrapper {
+      min-height: 14px;
+    }
+  }
+
+  .inputSearch {
+    width: 360px;
+    height: 42px;
+    font-size: 16px;
+    --n-height: 42px !important;
+
+    img {
+      width: 18px;
+      height: 18px;
+    }
+
+    :global {
+      .n-input-wrapper {
+        padding-left: 12px;
+        padding-right: 4px;
+        height: 42px !important;
+      }
+
+      .n-button {
+        height: 34px;
+        font-size: 15px;
+        font-weight: 500;
+        width: auto;
+      }
+    }
+  }
+
+  .searchCatatory {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #F2F2F2;
+    margin-bottom: 20px;
+
+    .addTrain {
+      height: 37px;
+      border-radius: 8px;
+      font-size: 18px;
+      background-color: #E8F4FF;
+      color: #0378EC;
+
+      img {
+        width: 16px;
+        height: 16px;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+.spaceSection {
+  width: 100%;
+  padding-right: 40px;
+  gap: 8px 12px !important;
+
+  &>div {
+    line-height: var(--n-blank-height);
+
+    &:last-child {
+      margin-left: -12Px;
+    }
+  }
+}
+
+.collaoseGroup {
+  height: var(--n-blank-height);
+  position: absolute;
+  display: flex;
+  align-items: center;
+  padding-left: 8px;
+}
+
+.collapseWrap {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+
+}
+
+.collaoseBtn {
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+}
+
+.collaoseBtn.isStart {
+  transform: rotate(-180deg);
+}
+
+.collapsSection {
+  // padding-top: 10px;
+}
+
+.isHidden {
+  overflow: hidden;
+  transition: 1s all ease-in;
+}
+
+.hideButton {
+  visibility: hidden;
+  height: 0 !important;
+  line-height: 0 !important;
+}
+
+.popSelect {
+  font-size: 16px;
+  width: 200px;
+  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 11px;
+  --n-option-height: 34px;
+
+  :global {
+    .n-base-select-option__content {
+      width: 80% !important;
+    }
+  }
+
+}
+
+.spaceSection2 {
+  &>div {
+    height: 34Px !important;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.textBtn {
+  background: #fff;
+  border-radius: 8Px;
+  padding: 4Px 20px;
+  font-size: max(17px, 12Px);
+  color: rgba(0, 0, 0, 0.6);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  line-height: 24px;
+
+  .iconArrow {
+    display: inline-block;
+    margin-left: 8px;
+    width: 8px;
+    height: 5px;
+    background: url('@/views/content-information/images/icon-arrow2.png') no-repeat center center / contain;
+    transform: rotate(180deg);
+
+  }
+
+  &:hover,
+  &.textBtnActive {
+    background: #D2ECFF;
+    font-weight: 500;
+    color: #131415;
+  }
+
+  &:hover {
+    .iconArrow {
+
+      transform: rotate(0deg);
+    }
+  }
 }

src/views/prepare-lessons/model/select-resources/select-item/resource-search-group/index.tsx

@@ -1,326 +1,321 @@
-import {
-  PropType,
-  defineComponent,
-  nextTick,
-  onMounted,
-  reactive,
-  ref,
-  toRef
-} from 'vue';
-import styles from './index.module.less';
-import {
-  NButton,
-  NForm,
-  NFormItem,
-  NImage,
-  NPopselect,
-  NSpace
-} from 'naive-ui';
-import { resourceTypeArray } from '/src/utils/searchArray';
-import { useCatchStore } from '/src/store/modules/catchData';
-import { useThrottleFn } from '@vueuse/core';
-import TheSearch from '/src/components/TheSearch';
-import isCollaose from '/src/views/natural-resources/images/isCollaose.png';
-
-export default defineComponent({
-  name: 'resource-search-group',
-  props: {
-    type: {
-      type: String as PropType<
-        'relateResources' | 'shareResources' | 'myResources' | 'myCollect'
-      >,
-      default: 'shareResources'
-    },
-    subjectId: {
-      type: String,
-      default: null
-    }
-  },
-  emits: ['search'],
-  setup(props, { emit }) {
-    const subjectId = toRef(props.subjectId);
-    const catchStore = useCatchStore();
-    const forms = reactive({
-      type: 'MUSIC', //
-      name: '',
-      subjectId: subjectId.value as any,
-      bookVersionId: null
-    });
-    const state = reactive({
-      tempSubjectId: null
-    });
-    const resourceType = ref([] as any);
-
-    const onSearch = () => {
-      emit('search', forms);
-    };
-
-    const throttleFn = useThrottleFn(() => onSearch(), 500);
-
-    const collapseWrapRef = ref();
-    const divDomList = ref([] as any);
-    const orginHeight = ref(0);
-    const hiddenHeight = ref(0);
-    const line = ref(0);
-    const isCollapse = ref(false);
-    const loadingCollapse = ref(false); // 是否加载完成
-    const musicCateRef = (el: any) => {
-      if (el?.selfElRef) {
-        divDomList.value.push(el.selfElRef.parentNode);
-      }
-    };
-    const setCollapse = (flag: boolean) => {
-      isCollapse.value = flag;
-      getLive();
-    };
-    const getLive = () => {
-      try {
-        divDomList.value = [...new Set(divDomList.value)];
-        let offsetLeft = -1;
-        divDomList.value.forEach((item: any, index: number) => {
-          if (index === 0) {
-            line.value = 1;
-            offsetLeft = item.offsetLeft;
-          } else if (item.offsetLeft === offsetLeft && index != 0) {
-            // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
-            line.value++;
-          }
-          if (!isCollapse.value) {
-            if (line.value > 1) {
-              //从第3行开始 隐藏标签
-              item.style.display = 'none';
-
-              // 显示展开按钮  class名chu是在前面动态添加的
-            } else {
-              item.style.display = 'block';
-            }
-          } else {
-            item.style.display = 'block';
-          }
-        });
-        loadingCollapse.value = true;
-      } catch {
-        //
-      }
-    };
-
-    const selectChildObj = (item: any) => {
-      const obj: any = {};
-      item?.forEach((child: any) => {
-        if (child.id === forms.subjectId) {
-          obj.selected = true;
-          obj.name = child.name;
-        }
-      });
-      return obj;
-    };
-    onMounted(async () => {
-      // if (props.type === 'myCollect') {
-      //   resourceType.value.push({
-      //     label: '全部',
-      //     value: ''
-      //   });
-      //   forms.type = ''; // 默认全部
-      // }
-      resourceTypeArray.forEach((item: any) => {
-        // if (props.type === 'myResources') {
-        //   item.value !== 'MUSIC' && resourceType.value.push(item);
-        // } else {
-        resourceType.value.push(item);
-        // }
-      });
-
-      // 获取教材分类列表
-      await catchStore.getMusicSheetCategory();
-      // 获取声部
-      await catchStore.getSubjects();
-
-      // console.log(
-      //   catchStore.getSubjectInstruments,
-      //   'catchStore.getSubjectInstruments'
-      // );
-      // catchStore.getSubjectInstruments.forEach((item: any) => {
-      //   if (item.id == props.subjectId && Array.isArray(item.instruments)) {
-      //     if (item.instruments.length > 0) {
-      //       forms.subjectId = item.instruments[0].value;
-      //     } else {
-      //       forms.subjectId = item.value;
-      //     }
-      //   }
-      // });
-      forms.subjectId = null;
-
-      // 这里开始
-      // musicCateRef
-      if (forms.type === 'MUSIC') {
-        orginHeight.value = collapseWrapRef.value?.offsetHeight;
-        hiddenHeight.value = collapseWrapRef.value?.offsetHeight / line.value;
-        // 默认隐藏
-        getLive();
-      }
-    });
-    return () => (
-      <div class={styles.searchGroup}>
-        <div class={styles.searchCatatory}>
-          <NSpace size="small" class={styles.btnType}>
-            {resourceType.value.map((item: any) => (
-              <NButton
-                type={forms.type === item.value ? 'primary' : 'default'}
-                secondary={forms.type === item.value ? false : true}
-                round
-                size="small"
-                focusable={false}
-                onClick={() => {
-                  forms.type = item.value;
-                  forms.subjectId = null;
-                  onSearch();
-
-                  try {
-                    nextTick(() => {
-                      if (forms.type === 'MUSIC') {
-                        orginHeight.value = collapseWrapRef.value?.offsetHeight;
-                        hiddenHeight.value =
-                          collapseWrapRef.value?.offsetHeight / line.value;
-                        // 默认隐藏
-                        getLive();
-                      } else {
-                        divDomList.value = [];
-                      }
-                    });
-                  } catch {
-                    //
-                  }
-                }}>
-                {item.label}
-              </NButton>
-            ))}
-          </NSpace>
-
-          <TheSearch
-            class={styles.inputSearch}
-            round
-            onSearch={(val: string) => {
-              forms.name = val;
-              throttleFn();
-            }}
-          />
-        </div>
-        <NForm labelAlign="left" labelPlacement="left">
-          {forms.type === 'MUSIC' && props.type === 'shareResources' && (
-            <div class={styles.collapsSection}>
-              <NFormItem label="教材：">
-                <div
-                  class={[
-                    styles.collapseWrap,
-                    loadingCollapse.value ? '' : styles.hideButton,
-                    isCollapse.value ? '' : styles.isHidden
-                  ]}
-                  ref={collapseWrapRef}>
-                  <NSpace class={[styles.spaceSection]}>
-                    {catchStore.getAllMusicCategories.map((music: any) => (
-                      <NButton
-                        ref={musicCateRef}
-                        secondary={forms.bookVersionId === music.id}
-                        quaternary={forms.bookVersionId !== music.id}
-                        strong
-                        focusable={false}
-                        type={
-                          forms.bookVersionId === music.id
-                            ? 'primary'
-                            : 'default'
-                        }
-                        onClick={() => {
-                          forms.bookVersionId = music.id;
-                          onSearch();
-                        }}>
-                        {music.name}
-                      </NButton>
-                    ))}
-                    {line.value > 1 && (
-                      <div
-                        style={{
-                          height: 'var(--n-blank-height)',
-                          position: 'absolute',
-                          display: 'flex',
-                          alignItems: 'center'
-                        }}
-                        onClick={() => {
-                          setCollapse(!isCollapse.value);
-                        }}>
-                        <NImage
-                          previewDisabled
-                          src={isCollaose}
-                          class={[
-                            styles.collaoseBtn,
-                            isCollapse.value ? styles.isStart : ''
-                          ]}></NImage>
-                      </div>
-                    )}
-                  </NSpace>
-                </div>
-              </NFormItem>
-            </div>
-          )}
-
-          <NFormItem label="乐器：">
-            <NSpace class={styles.spaceSection2}>
-              {/* {catchStore.getSubjectAllList.map((music: any) => (
-                <NButton
-                  secondary={forms.subjectId === music.id}
-                  quaternary={forms.subjectId !== music.id}
-                  strong
-                  focusable={false}
-                  type={forms.subjectId === music.id ? 'primary' : 'default'}
-                  onClick={() => {
-                    forms.subjectId = music.id;
-                    onSearch();
-                  }}>
-                  {music.name}
-                </NButton>
-              ))} */}
-              {catchStore.getSubjectInstruments.map((subject: any) =>
-                subject.instruments && subject.instruments.length > 1 ? (
-                  <NPopselect
-                    options={subject.instruments}
-                    trigger="hover"
-                    scrollable
-                    v-model:value={state.tempSubjectId}
-                    onUpdate:value={() => {
-                      forms.subjectId = state.tempSubjectId;
-                      onSearch();
-                    }}
-                    key={subject.value}
-                    class={[styles.popSelect]}>
-                    <span
-                      class={[
-                        styles.textBtn,
-                        selectChildObj(subject.instruments).selected &&
-                          styles.textBtnActive
-                      ]}>
-                      {selectChildObj(subject.instruments).name || subject.name}
-                      <i class={styles.iconArrow}></i>
-                    </span>
-                  </NPopselect>
-                ) : (
-                  <span
-                    class={[
-                      styles.textBtn,
-
-                      forms.subjectId === subject.value && styles.textBtnActive
-                    ]}
-                    onClick={() => {
-                      forms.subjectId = subject.value;
-                      state.tempSubjectId = null;
-                      onSearch();
-                    }}>
-                    {subject.name}
-                  </span>
-                )
-              )}
-            </NSpace>
-          </NFormItem>
-        </NForm>
-      </div>
-    );
-  }
-});
+import {
+  PropType,
+  defineComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  toRef
+} from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NForm,
+  NFormItem,
+  NImage,
+  NPopselect,
+  NSpace
+} from 'naive-ui';
+import { resourceTypeArray } from '/src/utils/searchArray';
+import { useCatchStore } from '/src/store/modules/catchData';
+import { useThrottleFn } from '@vueuse/core';
+import TheSearch from '/src/components/TheSearch';
+import isCollaose from '/src/views/natural-resources/images/isCollaose.png';
+
+export default defineComponent({
+  name: 'resource-search-group',
+  props: {
+    type: {
+      type: String as PropType<
+        'relateResources' | 'shareResources' | 'myResources' | 'myCollect'
+      >,
+      default: 'shareResources'
+    },
+    subjectId: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ['search'],
+  setup(props, { emit }) {
+    const subjectId = toRef(props.subjectId);
+    const catchStore = useCatchStore();
+    const forms = reactive({
+      type: 'MUSIC', //
+      name: '',
+      subjectId: subjectId.value as any,
+      bookVersionId: null
+    });
+    const state = reactive({
+      tempSubjectId: null
+    });
+    const resourceType = ref([] as any);
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    const throttleFn = useThrottleFn(() => onSearch(), 500);
+
+    const collapseWrapRef = ref();
+    const divDomList = ref([] as any);
+    const orginHeight = ref(0);
+    const hiddenHeight = ref(0);
+    const line = ref(0);
+    const isCollapse = ref(false);
+    const loadingCollapse = ref(false); // 是否加载完成
+    const musicCateRef = (el: any) => {
+      if (el?.selfElRef) {
+        divDomList.value.push(el.selfElRef.parentNode);
+      }
+    };
+    const setCollapse = (flag: boolean) => {
+      isCollapse.value = flag;
+      getLive();
+    };
+    const getLive = () => {
+      try {
+        divDomList.value = [...new Set(divDomList.value)];
+        let offsetLeft = -1;
+        divDomList.value.forEach((item: any, index: number) => {
+          if (index === 0) {
+            line.value = 1;
+            offsetLeft = item.offsetLeft;
+          } else if (item.offsetLeft === offsetLeft && index != 0) {
+            // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
+            line.value++;
+          }
+          if (!isCollapse.value) {
+            if (line.value > 1) {
+              //从第3行开始 隐藏标签
+              item.style.display = 'none';
+
+              // 显示展开按钮  class名chu是在前面动态添加的
+            } else {
+              item.style.display = 'block';
+            }
+          } else {
+            item.style.display = 'block';
+          }
+        });
+        loadingCollapse.value = true;
+      } catch {
+        //
+      }
+    };
+
+    const selectChildObj = (item: any) => {
+      const obj: any = {};
+      item?.forEach((child: any) => {
+        if (child.id === forms.subjectId) {
+          obj.selected = true;
+          obj.name = child.name;
+        }
+      });
+      return obj;
+    };
+    onMounted(async () => {
+      // if (props.type === 'myCollect') {
+      //   resourceType.value.push({
+      //     label: '全部',
+      //     value: ''
+      //   });
+      //   forms.type = ''; // 默认全部
+      // }
+      resourceTypeArray.forEach((item: any) => {
+        // if (props.type === 'myResources') {
+        //   item.value !== 'MUSIC' && resourceType.value.push(item);
+        // } else {
+        resourceType.value.push(item);
+        // }
+      });
+
+      // 获取教材分类列表
+      await catchStore.getMusicSheetCategory();
+      // 获取声部
+      await catchStore.getSubjects();
+
+      // console.log(
+      //   catchStore.getSubjectInstruments,
+      //   'catchStore.getSubjectInstruments'
+      // );
+      // catchStore.getSubjectInstruments.forEach((item: any) => {
+      //   if (item.id == props.subjectId && Array.isArray(item.instruments)) {
+      //     if (item.instruments.length > 0) {
+      //       forms.subjectId = item.instruments[0].value;
+      //     } else {
+      //       forms.subjectId = item.value;
+      //     }
+      //   }
+      // });
+      forms.subjectId = null;
+
+      // 这里开始
+      // musicCateRef
+      if (forms.type === 'MUSIC') {
+        orginHeight.value = collapseWrapRef.value?.offsetHeight;
+        hiddenHeight.value = collapseWrapRef.value?.offsetHeight / line.value;
+        // 默认隐藏
+        getLive();
+      }
+    });
+    return () => (
+      <div class={styles.searchGroup}>
+        <div class={styles.searchCatatory}>
+          <NSpace size="small" class={styles.btnType}>
+            {resourceType.value.map((item: any) => (
+              <NButton
+                type={forms.type === item.value ? 'primary' : 'default'}
+                secondary={forms.type === item.value ? false : true}
+                round
+                size="small"
+                focusable={false}
+                onClick={() => {
+                  forms.type = item.value;
+                  forms.subjectId = null;
+                  onSearch();
+
+                  try {
+                    nextTick(() => {
+                      if (forms.type === 'MUSIC') {
+                        orginHeight.value = collapseWrapRef.value?.offsetHeight;
+                        hiddenHeight.value =
+                          collapseWrapRef.value?.offsetHeight / line.value;
+                        // 默认隐藏
+                        getLive();
+                      } else {
+                        divDomList.value = [];
+                      }
+                    });
+                  } catch {
+                    //
+                  }
+                }}>
+                {item.label}
+              </NButton>
+            ))}
+          </NSpace>
+
+          <TheSearch
+            class={styles.inputSearch}
+            round
+            onSearch={(val: string) => {
+              forms.name = val;
+              throttleFn();
+            }}
+          />
+        </div>
+        <NForm labelAlign="left" labelPlacement="left">
+          {forms.type === 'MUSIC' && props.type === 'shareResources' && (
+            <div class={styles.collapsSection}>
+              <NFormItem label="教材：">
+                <div
+                  class={[
+                    styles.collapseWrap,
+                    loadingCollapse.value ? '' : styles.hideButton,
+                    isCollapse.value ? '' : styles.isHidden
+                  ]}
+                  ref={collapseWrapRef}>
+                  <NSpace class={[styles.spaceSection]}>
+                    {catchStore.getAllMusicCategories.map((music: any) => (
+                      <NButton
+                        ref={musicCateRef}
+                        secondary={forms.bookVersionId === music.id}
+                        quaternary={forms.bookVersionId !== music.id}
+                        strong
+                        focusable={false}
+                        type={
+                          forms.bookVersionId === music.id
+                            ? 'primary'
+                            : 'default'
+                        }
+                        onClick={() => {
+                          forms.bookVersionId = music.id;
+                          onSearch();
+                        }}>
+                        {music.name}
+                      </NButton>
+                    ))}
+                    {line.value > 1 && (
+                      <div
+                        class={styles.collaoseGroup}
+                        onClick={() => {
+                          setCollapse(!isCollapse.value);
+                        }}>
+                        <NImage
+                          previewDisabled
+                          src={isCollaose}
+                          class={[
+                            styles.collaoseBtn,
+                            isCollapse.value ? styles.isStart : ''
+                          ]}></NImage>
+                      </div>
+                    )}
+                  </NSpace>
+                </div>
+              </NFormItem>
+            </div>
+          )}
+
+          <NFormItem label="乐器：">
+            <NSpace class={styles.spaceSection2}>
+              {/* {catchStore.getSubjectAllList.map((music: any) => (
+                <NButton
+                  secondary={forms.subjectId === music.id}
+                  quaternary={forms.subjectId !== music.id}
+                  strong
+                  focusable={false}
+                  type={forms.subjectId === music.id ? 'primary' : 'default'}
+                  onClick={() => {
+                    forms.subjectId = music.id;
+                    onSearch();
+                  }}>
+                  {music.name}
+                </NButton>
+              ))} */}
+              {catchStore.getSubjectInstruments.map((subject: any) =>
+                subject.instruments && subject.instruments.length > 1 ? (
+                  <NPopselect
+                    options={subject.instruments}
+                    trigger="hover"
+                    scrollable
+                    v-model:value={state.tempSubjectId}
+                    onUpdate:value={() => {
+                      forms.subjectId = state.tempSubjectId;
+                      onSearch();
+                    }}
+                    key={subject.value}
+                    class={[styles.popSelect]}>
+                    <span
+                      class={[
+                        styles.textBtn,
+                        selectChildObj(subject.instruments).selected &&
+                          styles.textBtnActive
+                      ]}>
+                      {selectChildObj(subject.instruments).name || subject.name}
+                      <i class={styles.iconArrow}></i>
+                    </span>
+                  </NPopselect>
+                ) : (
+                  <span
+                    class={[
+                      styles.textBtn,
+
+                      forms.subjectId === subject.value && styles.textBtnActive
+                    ]}
+                    onClick={() => {
+                      forms.subjectId = subject.value;
+                      state.tempSubjectId = null;
+                      onSearch();
+                    }}>
+                    {subject.name}
+                  </span>
+                )
+              )}
+            </NSpace>
+          </NFormItem>
+        </NForm>
+      </div>
+    );
+  }
+});

src/views/studentList/modals/comment-work/index.tsx

@@ -1,167 +1,165 @@
-import { defineComponent, reactive } from 'vue';
-import styles from './index.module.less';
-import {
-  NAvatar,
-  NButton,
-  NCheckbox,
-  NInput,
-  NModal,
-  NSpace,
-  useMessage
-} from 'naive-ui';
-import commentBg from '../images/common-bg.png';
-import commentTop from '../images/common-top.png';
-import iconClose from '../images/icon-close-line.png';
-import defultHeade from '@/components/layout/images/teacherIcon.png';
-import { api_setComment } from '../../api';
-import dayjs from 'dayjs';
-import { storage } from '/src/utils/storage';
-
-export default defineComponent({
-  name: 'commit-work',
-  props: {
-    /** 评语内容 */
-    comment: {
-      type: String,
-      default: ''
-    },
-    workInfo: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ['close', 'confrim'],
-  setup(props, { emit }) {
-    const message = useMessage();
-
-    const state = reactive({
-      removeVisiable1: false,
-      comment: props.comment,
-      btnLoading: false,
-      commentRemind: true
-    });
-    const onSubmit = async () => {
-      const isCommentRemind = storage.get('isCommentRemind');
-      if (isCommentRemind != 1 && state.commentRemind) {
-        state.removeVisiable1 = true;
-        return;
-      }
-
-      if (!state.comment) {
-        message.error('请输入评语');
-        return;
-      }
-      state.btnLoading = true;
-      try {
-        await api_setComment({
-          comment: state.comment,
-          id: props.workInfo.studentLessonTrainingId
-        });
-
-        message.success('点评成功');
-        emit('confrim');
-      } catch {
-        //
-      }
-      state.btnLoading = false;
-      state.commentRemind = true;
-    };
-
-    const onSure = () => {
-      if (state.commentRemind) {
-        storage.set('isCommentRemind', 1);
-      }
-      state.removeVisiable1 = false;
-      onSubmit();
-    };
-    return () => (
-      <div class={styles.commonWork}>
-        <img src={commentTop} class={styles.dingPng} alt="" />
-        <img src={commentBg} class={styles.downMoveBg} alt="" />
-        <img
-          src={iconClose}
-          class={styles.closeAble}
-          onClick={() => {
-            emit('close');
-          }}
-          alt=""
-        />
-        <h2>{props.workInfo.isLook ? '查看评语' : '点评作业'}</h2>
-
-        <div class={styles.header}>
-          <NAvatar
-            class={styles.navatar}
-            round
-            src={props.workInfo.studentAvatar || defultHeade}
-          />
-          <div class={styles.userInfo}>
-            <h3>{props.workInfo.studentName}</h3>
-            <p>
-              提交时间：
-              {dayjs(props.workInfo.submitTime).format('YYYY-MM-DD HH:mm')}
-            </p>
-          </div>
-        </div>
-
-        <NInput
-          class={styles.textarea}
-          type="textarea"
-          rows={12}
-          maxlength={500}
-          showCount
-          autosize={false}
-          disabled={props.workInfo.isLook}
-          v-model:value={state.comment}
-          placeholder="请输入评语…"
-        />
-
-        {!props.workInfo.isLook && (
-          <NSpace style={{ padding: '25px 0 0 0' }} justify="center">
-            <NButton round type="default" onClick={() => emit('close')}>
-              取消
-            </NButton>
-            <NButton
-              class={styles.submitAppBtn}
-              round
-              type="primary"
-              loading={state.btnLoading}
-              onClick={onSubmit}>
-              确定
-            </NButton>
-          </NSpace>
-        )}
-
-        <NModal
-          v-model:show={state.removeVisiable1}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable1]}
-          title={'提交评语'}>
-          <div class={styles.studentRemove}>
-            <p>
-              评语提交后<span>不可修改或删除</span>，请确认是否提交
-            </p>
-            <div class={styles.selectBtn}>
-              <NCheckbox v-model:checked={state.commentRemind}>
-                下次不再提醒
-              </NCheckbox>
-            </div>
-
-            <NSpace class={styles.btnGroupModal} justify="center">
-              <NButton
-                round
-                onClick={() => {
-                  state.removeVisiable1 = false;
-                  state.commentRemind = true;
-                }}>
-                取消
-              </NButton>
-              <NButton round type="primary" onClick={onSure}>
-                确定
-              </NButton>
-            </NSpace>
-          </div>
-        </NModal>
-      </div>
-    );
-  }
-});
+import { defineComponent, reactive } from 'vue';
+import styles from './index.module.less';
+import {
+  NAvatar,
+  NButton,
+  NCheckbox,
+  NInput,
+  NModal,
+  NSpace,
+  useMessage
+} from 'naive-ui';
+import commentBg from '../images/common-bg.png';
+import commentTop from '../images/common-top.png';
+import iconClose from '../images/icon-close-line.png';
+import defultHeade from '@/components/layout/images/teacherIcon.png';
+import { api_setComment } from '../../api';
+import dayjs from 'dayjs';
+import { storage } from '/src/utils/storage';
+
+export default defineComponent({
+  name: 'commit-work',
+  props: {
+    /** 评语内容 */
+    comment: {
+      type: String,
+      default: ''
+    },
+    workInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['close', 'confrim'],
+  setup(props, { emit }) {
+    const message = useMessage();
+
+    const state = reactive({
+      removeVisiable1: false,
+      comment: props.comment,
+      btnLoading: false,
+      commentRemind: true
+    });
+    const onSubmit = async () => {
+      // const isCommentRemind = storage.get('isCommentRemind');
+      // if (isCommentRemind != 1 && state.commentRemind) {
+      //   state.removeVisiable1 = true;
+      //   return;
+      // }
+
+      if (!state.comment) {
+        message.error('请输入评语');
+        return;
+      }
+      state.btnLoading = true;
+      try {
+        await api_setComment({
+          comment: state.comment,
+          id: props.workInfo.studentLessonTrainingId
+        });
+
+        message.success('点评成功');
+        emit('confrim');
+      } catch {
+        //
+      }
+      state.btnLoading = false;
+      state.commentRemind = true;
+    };
+
+    const onSure = () => {
+      if (state.commentRemind) {
+        storage.set('isCommentRemind', 1);
+      }
+      state.removeVisiable1 = false;
+      onSubmit();
+    };
+    return () => (
+      <div class={styles.commonWork}>
+        <img src={commentTop} class={styles.dingPng} alt="" />
+        <img src={commentBg} class={styles.downMoveBg} alt="" />
+        <img
+          src={iconClose}
+          class={styles.closeAble}
+          onClick={() => {
+            emit('close');
+          }}
+          alt=""
+        />
+        <h2>{props.workInfo.isLook ? '修改点评' : '点评作业'}</h2>
+
+        <div class={styles.header}>
+          <NAvatar
+            class={styles.navatar}
+            round
+            src={props.workInfo.studentAvatar || defultHeade}
+          />
+          <div class={styles.userInfo}>
+            <h3>{props.workInfo.studentName}</h3>
+            <p>
+              提交时间：
+              {dayjs(props.workInfo.submitTime).format('YYYY-MM-DD HH:mm')}
+            </p>
+          </div>
+        </div>
+
+        <NInput
+          class={styles.textarea}
+          type="textarea"
+          rows={12}
+          maxlength={500}
+          showCount
+          autosize={false}
+          // disabled={props.workInfo.isLook}
+          v-model:value={state.comment}
+          placeholder="请输入评语…"
+        />
+
+        <NSpace style={{ padding: '25px 0 0 0' }} justify="center">
+          <NButton round type="default" onClick={() => emit('close')}>
+            取消
+          </NButton>
+          <NButton
+            class={styles.submitAppBtn}
+            round
+            type="primary"
+            loading={state.btnLoading}
+            onClick={onSubmit}>
+            确定
+          </NButton>
+        </NSpace>
+
+        <NModal
+          v-model:show={state.removeVisiable1}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable1]}
+          title={'提交评语'}>
+          <div class={styles.studentRemove}>
+            <p>
+              评语提交后<span>不可修改或删除</span>，请确认是否提交
+            </p>
+            <div class={styles.selectBtn}>
+              <NCheckbox v-model:checked={state.commentRemind}>
+                下次不再提醒
+              </NCheckbox>
+            </div>
+
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton
+                round
+                onClick={() => {
+                  state.removeVisiable1 = false;
+                  state.commentRemind = true;
+                }}>
+                取消
+              </NButton>
+              <NButton round type="primary" onClick={onSure}>
+                确定
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
+      </div>
+    );
+  }
+});

src/views/studentList/modals/studentTraomomhDetails.tsx

@@ -1,221 +1,260 @@
-import {
-  useMessage,
-  NImage,
-  NScrollbar,
-  NSpin,
-  NModal,
-  NButton
-} from 'naive-ui';
-import { defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from '@/views/classList/index.module.less';
-import TrainType from '@/views/attend-class/model/train-type';
-import defultHeade from '@/components/layout/images/teacherIcon.png';
-import noSub from '@/views/classList/images/nosub.png';
-import qualified from '@/views/classList/images/qualified.png';
-import unqualified from '@/views/classList/images/unqualified.png';
-import { evaluateDifficult } from '/src/utils/contants';
-import dayjs from 'dayjs';
-import { getTrainingStudentDetail } from '../../classList/api';
-import CommentWork from './comment-work';
-export default defineComponent({
-  props: {
-    activeRow: {
-      type: Object,
-      default: () => ({ id: '' })
-    },
-    total: {
-      type: Number,
-      default: 0
-    },
-    current: {
-      type: Number,
-      default: 0
-    }
-  },
-  name: 'studentTraomomhDetails',
-  emits: ['close'],
-
-  setup(props, { emit, expose }) {
-    const showModalMask = ref(false);
-    const loading = ref(false);
-    const teacherInfo = ref({
-      teacherName: '',
-      createTime: '',
-      expireDate: '',
-      teacherAvatar: '',
-      studentLessonTrainingDetails: [] as any
-    } as any);
-    // const message = useMessage();
-    // const foemsRef = ref();
-    const typeFormat = (trainingType: string, configJson: any) => {
-      let tList: string[] = [];
-
-      if (trainingType === 'EVALUATION') {
-        tList = [
-          `${evaluateDifficult[configJson.evaluateDifficult]}`,
-          configJson.practiceChapterBegin || configJson.practiceChapterEnd
-            ? `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`
-            : '全部小节',
-          // `速度${configJson.evaluateSpeed}`,
-          `${configJson.trainingTimes}分合格`
-        ];
-        // console.log('configJson.evaluateDifficult--', tList);
-      } else {
-        tList = [
-          `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`,
-          `速度${configJson.practiceSpeed}`,
-          `${configJson.trainingTimes}分钟`
-        ];
-        // console.log('configJson.evaluateDifficult', tList);
-      }
-      return tList;
-    };
-    const getTrainingDetail = async (id: any) => {
-      loading.value = true;
-      try {
-        const res = await getTrainingStudentDetail({
-          studentLessonTrainingId: id
-        });
-        const arr = res.data.studentLessonTrainingDetails.map((item: any) => {
-          const tList = typeFormat(
-            item.trainingType,
-            JSON.parse(item.trainingContent)
-          );
-          return {
-            ...item,
-            coverImg: item.titleImg,
-            allTimes: JSON.parse(item.trainingContent).trainingTimes,
-            typeList: tList || []
-          };
-        });
-
-        teacherInfo.value = {
-          ...res.data,
-
-          studentLessonTrainingDetails: arr
-        };
-        console.log(teacherInfo.value, ' teacherInfo.value');
-      } catch (e) {
-        console.log(e);
-      }
-      loading.value = false;
-    };
-    expose({ getTrainingDetail });
-    onMounted(() => {
-      getTrainingDetail(props.activeRow.id);
-    });
-
-    return () => (
-      <div class={[styles.trainingDetails]}>
-        <NSpin show={loading.value}>
-          <div class={styles.studentList}>
-            <div class={styles.studentHeaderWrap}>
-              <div class={styles.studentHeader}>
-                <div class={styles.studentHeaderBorder}>
-                  <NImage
-                    class={styles.studentHeaderImg}
-                    src={
-                      teacherInfo.value.teacherAvatar
-                        ? teacherInfo.value.teacherAvatar
-                        : defultHeade
-                    }
-                    previewDisabled></NImage>
-                </div>
-              </div>
-
-              <div class={styles.workafterInfo}>
-                <h4>
-                  {teacherInfo.value.teacherName}{' '}
-                  <div
-                    class={[
-                      styles.workafterInfoDot,
-                      styles.workafterTeacherInfoDot
-                    ]}>
-                    老师
-                  </div>
-                </h4>
-                <p>
-                  开始时间：
-                  {teacherInfo.value.createTime
-                    ? dayjs(new Date(teacherInfo.value.createTime)).format(
-                        'YYYY-MM-DD HH:mm'
-                      )
-                    : '--'}{' '}
-                  | 结束时间：
-                  {teacherInfo.value.expireDate
-                    ? dayjs(new Date(teacherInfo.value.expireDate)).format(
-                        'YYYY-MM-DD HH:mm'
-                      )
-                    : '--'}
-                </p>
-              </div>
-            </div>
-            {teacherInfo.value.trainingStatus == 'UNSUBMITTED' ? (
-              <NImage
-                previewDisabled
-                class={styles.workStatus}
-                src={noSub}></NImage>
-            ) : null}
-            {teacherInfo.value.trainingStatus == 'SUBMITTED' ? (
-              <NImage
-                previewDisabled
-                class={styles.workStatus}
-                src={unqualified}></NImage>
-            ) : null}
-            {teacherInfo.value.trainingStatus == 'TARGET' ? (
-              <NImage
-                previewDisabled
-                class={styles.workStatus}
-                src={qualified}></NImage>
-            ) : null}
-          </div>
-
-          {teacherInfo.value.trainingStatus !== 'UNSUBMITTED' && (
-            <NButton
-              onClick={() => (showModalMask.value = true)}
-              class={styles.commentBtnGroup}>
-              <div class={styles.text}>
-                <i class={teacherInfo.value.comment && styles.look}></i>
-
-                {teacherInfo.value.comment ? '查看评语' : '点评作业'}
-              </div>
-            </NButton>
-          )}
-
-          <NScrollbar style="max-height:400px" trigger="none">
-            <div class={styles.workList}>
-              {teacherInfo.value.studentLessonTrainingDetails.map(
-                (item: any) => (
-                  <TrainType
-                    style={{ marginBottom: '20px' }}
-                    isDisabled={true}
-                    isDelete={false}
-                    isCLassWork={false}
-                    item={item}></TrainType>
-                )
-              )}
-            </div>
-          </NScrollbar>
-        </NSpin>
-
-        <NModal v-model:show={showModalMask.value}>
-          <CommentWork
-            comment={teacherInfo.value.comment}
-            workInfo={{
-              isLook: teacherInfo.value.comment ? true : false,
-              studentAvatar: teacherInfo.value.studentAvatar,
-              studentName: teacherInfo.value.studentName,
-              submitTime: teacherInfo.value.submitTime,
-              studentLessonTrainingId: teacherInfo.value.studentLessonTrainingId
-            }}
-            onClose={() => (showModalMask.value = false)}
-            onConfrim={() => {
-              getTrainingDetail(props.activeRow.id);
-              showModalMask.value = false;
-            }}
-          />
-        </NModal>
-      </div>
-    );
-  }
-});
+import {
+  useMessage,
+  NImage,
+  NScrollbar,
+  NSpin,
+  NModal,
+  NButton
+} from 'naive-ui';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from '@/views/classList/index.module.less';
+import TrainType from '@/views/attend-class/model/train-type';
+import defultHeade from '@/components/layout/images/teacherIcon.png';
+import noSub from '@/views/classList/images/nosub.png';
+import qualified from '@/views/classList/images/qualified.png';
+import unqualified from '@/views/classList/images/unqualified.png';
+import { evaluateDifficult } from '/src/utils/contants';
+import dayjs from 'dayjs';
+import { getTrainingStudentDetail } from '../../classList/api';
+import CommentWork from './comment-work';
+import WorkItem from '../../classList/work-item';
+import request from '/src/utils/request';
+export default defineComponent({
+  props: {
+    activeRow: {
+      type: Object,
+      default: () => ({ id: '' })
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    current: {
+      type: Number,
+      default: 0
+    }
+  },
+  name: 'studentTraomomhDetails',
+  emits: ['close'],
+
+  setup(props, { emit, expose }) {
+    const showModalMask = ref(false);
+    const loading = ref(false);
+    const teacherInfo = ref({
+      teacherName: '',
+      createTime: '',
+      expireDate: '',
+      teacherAvatar: '',
+      studentLessonTrainingDetails: [] as any
+    } as any);
+    const file_expire_time = ref<any>(null);
+    // const message = useMessage();
+    // const foemsRef = ref();
+    const typeFormat = (trainingType: string, configJson: any) => {
+      let tList: string[] = [];
+
+      if (trainingType === 'EVALUATION') {
+        tList = [
+          `${evaluateDifficult[configJson.evaluateDifficult]}`,
+          configJson.practiceChapterBegin || configJson.practiceChapterEnd
+            ? `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`
+            : '全部小节',
+          // `速度${configJson.evaluateSpeed}`,
+          `${configJson.trainingTimes}分合格`
+        ];
+        // console.log('configJson.evaluateDifficult--', tList);
+      } else {
+        tList = [
+          `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`,
+          `速度${configJson.practiceSpeed}`,
+          `${configJson.trainingTimes}分钟`
+        ];
+        // console.log('configJson.evaluateDifficult', tList);
+      }
+      return tList;
+    };
+    const getTrainingDetail = async (id: any) => {
+      loading.value = true;
+      try {
+        const res = await getTrainingStudentDetail({
+          studentLessonTrainingId: id
+        });
+        const arr = res.data.studentLessonTrainingDetails.map((item: any) => {
+          const tList = typeFormat(
+            item.trainingType,
+            JSON.parse(item.trainingContent)
+          );
+          return {
+            ...item,
+            coverImg: item.titleImg,
+            fileList: (item.fileJsonList && item.fileJsonList[0]) || {},
+            allTimes: JSON.parse(item.trainingContent).trainingTimes,
+            typeList: tList || []
+          };
+        });
+
+        teacherInfo.value = {
+          ...res.data,
+
+          studentLessonTrainingDetails: arr
+        };
+        console.log(teacherInfo.value, ' teacherInfo.value');
+      } catch (e) {
+        console.log(e);
+      }
+      loading.value = false;
+    };
+    expose({ getTrainingDetail });
+    const getDefaultParamConfig = async () => {
+      try {
+        const { data } = await request.get(
+          '/edu-app/open/paramConfig/queryByParamName',
+          {
+            params: {
+              paramName: 'homework_file_expire_time'
+            }
+          }
+        );
+        file_expire_time.value = data.paramValue || 0;
+      } catch {
+        //
+      }
+    };
+
+    onMounted(() => {
+      getDefaultParamConfig();
+      getTrainingDetail(props.activeRow.id);
+    });
+
+    return () => (
+      <div class={[styles.trainingDetails]}>
+        <NSpin show={loading.value}>
+          <div class={styles.studentList}>
+            <div class={styles.studentHeaderWrap}>
+              <div class={styles.studentHeader}>
+                <div class={styles.studentHeaderBorder}>
+                  <NImage
+                    class={styles.studentHeaderImg}
+                    src={
+                      teacherInfo.value.teacherAvatar
+                        ? teacherInfo.value.teacherAvatar
+                        : defultHeade
+                    }
+                    previewDisabled></NImage>
+                </div>
+              </div>
+
+              <div class={styles.workafterInfo}>
+                <h4>
+                  {teacherInfo.value.teacherName}{' '}
+                  <div
+                    class={[
+                      styles.workafterInfoDot,
+                      styles.workafterTeacherInfoDot
+                    ]}>
+                    老师
+                  </div>
+                </h4>
+                <p>
+                  开始时间：
+                  {teacherInfo.value.createTime
+                    ? dayjs(new Date(teacherInfo.value.createTime)).format(
+                        'YYYY-MM-DD HH:mm'
+                      )
+                    : '--'}{' '}
+                  | 结束时间：
+                  {teacherInfo.value.expireDate
+                    ? dayjs(new Date(teacherInfo.value.expireDate)).format(
+                        'YYYY-MM-DD HH:mm'
+                      )
+                    : '--'}
+                </p>
+              </div>
+
+              {teacherInfo.value.trainingStatus == 'UNSUBMITTED' ? (
+                <NImage
+                  previewDisabled
+                  class={styles.workStatus}
+                  src={noSub}></NImage>
+              ) : null}
+              {teacherInfo.value.trainingStatus == 'SUBMITTED' ? (
+                <NImage
+                  previewDisabled
+                  class={styles.workStatus}
+                  src={unqualified}></NImage>
+              ) : null}
+              {teacherInfo.value.trainingStatus == 'TARGET' ? (
+                <NImage
+                  previewDisabled
+                  class={styles.workStatus}
+                  src={qualified}></NImage>
+              ) : null}
+            </div>
+
+            {teacherInfo.value.expireFlag && (
+              <NButton
+                onClick={() => (showModalMask.value = true)}
+                class={styles.commentBtnGroup}>
+                <div class={styles.text}>
+                  <i class={teacherInfo.value.comment && styles.look}></i>
+
+                  {teacherInfo.value.comment ? '修改点评' : '点评作业'}
+                </div>
+              </NButton>
+            )}
+          </div>
+          {!teacherInfo.value.fileExpireFlag && (
+            <div class={styles.expireDateTip}>
+              <i class={styles.expireDateIcon}></i>
+              <span>
+                作业截止{file_expire_time.value}
+                天后，学生上传的文件将过期，请及时查看
+              </span>
+            </div>
+          )}
+
+          <NScrollbar
+            style="max-height:400px;min-height: 260px;"
+            trigger="none">
+            <div class={styles.workList}>
+              {teacherInfo.value.studentLessonTrainingDetails.map(
+                (item: any) => (
+                  <WorkItem style={{ marginBottom: '20px' }} item={item} />
+                )
+              )}
+            </div>
+            {teacherInfo.value.comment && (
+              <div class={styles.commentSection}>
+                <h3>
+                  <i class={styles.iconComment}></i>
+                  <i class={styles.myText}></i>
+                </h3>
+                <div class={styles.commentContent}>
+                  {teacherInfo.value.comment}
+                </div>
+              </div>
+            )}
+          </NScrollbar>
+        </NSpin>
+
+        <NModal v-model:show={showModalMask.value}>
+          <CommentWork
+            comment={teacherInfo.value.comment}
+            workInfo={{
+              isLook: teacherInfo.value.comment ? true : false,
+              studentAvatar: teacherInfo.value.studentAvatar,
+              studentName: teacherInfo.value.studentName,
+              submitTime: teacherInfo.value.submitTime,
+              studentLessonTrainingId: teacherInfo.value.studentLessonTrainingId
+            }}
+            onClose={() => (showModalMask.value = false)}
+            onConfrim={() => {
+              getTrainingDetail(props.activeRow.id);
+              showModalMask.value = false;
+            }}
+          />
+        </NModal>
+      </div>
+    );
+  }
+});