@rolatech/angular-product 17.0.0 → 17.1.1

package/fesm2022/rolatech-angular-product.mjs

@@ -1,34 +1,716 @@
 import * as i0 from '@angular/core';
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Injectable, inject, Component, input, ViewEncapsulation, booleanAttribute, output, computed, model, Pipe, signal, effect, viewChild, ChangeDetectorRef, importProvidersFrom, makeEnvironmentProviders } from '@angular/core';
+import { AngularCommonModule, OptionsFormatPipe, DecimalDirective } from '@rolatech/angular-common';
+import { BaseComponent, AngularComponentsModule, ContainerComponent, ListComponent, RichViewComponent, RichItemComponent, ImagePreviewDialogComponent, ThumbnailComponent, ToolbarComponent, ConfirmationDialogComponent, MediaListComponent, MediaListItemComponent, ImagePlaceholderComponent, SpinnerComponent, AccordionComponent, PanelComponent, ImageComponent } from '@rolatech/angular-components';
+import { BaseService, ProductService, CartService } from '@rolatech/angular-services';
+import * as i1 from '@angular/router';
+import { RouterModule, ActivatedRoute, RouterLink, RouterLinkActive, RouterOutlet, Router } from '@angular/router';
+import * as i2$1 from '@angular/material/icon';
+import { MatIconModule, MatIcon } from '@angular/material/icon';
+import * as i1$1 from '@angular/common';
+import { NgClass, ViewportScroller, CommonModule } from '@angular/common';
+import { MatDialog } from '@angular/material/dialog';
+import * as i1$2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i9 from '@angular/material/divider';
+import { MatDivider, MatDividerModule } from '@angular/material/divider';
+import * as i4 from '@angular/cdk/text-field';
+import { TextFieldModule } from '@angular/cdk/text-field';
+import * as i1$3 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i8 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import _, { first, remove, findLastIndex } from 'lodash';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i7 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import * as i1$4 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { CommentsComponent } from '@rolatech/angular-comment';
+import { AuthService, AuthUserService } from '@rolatech/angular-auth';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import * as i6 from '@angular/material/core';
+import { MatOptionModule } from '@angular/material/core';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i3$1 from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import * as i8$1 from '@angular/material/progress-spinner';
+import * as i2$2 from '@angular/material/slide-toggle';
 
-class ProductLayoutComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ProductLayoutComponent, isStandalone: true, selector: "lib-product-layout", ngImport: i0, template: "<p>product-layout works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+class ProductCategoryService extends BaseService {
+    init() {
+        this.endpoint = 'products/categories';
+        super.init();
+    }
+    uploadMedia(id, data) {
+        return this.http.post(`${this.actionUrl}/${id}/media`, data, {
+            withCredentials: true,
+        });
+    }
+    deleteMedia(id, mediaId) {
+        return this.http.delete(`${this.actionUrl}/${id}/media/${mediaId}`, {
+            withCredentials: true,
+        });
+    }
+    importFromExcel(data) {
+        return this.http.post(`${this.actionUrl}/excel`, data, {
+            withCredentials: true,
+        });
+    }
+    createFromExcel(data) {
+        return this.http.post(`${this.actionUrl}/list`, data, {
+            withCredentials: true,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const services = [ProductCategoryService];
+
+class ProductLayoutComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.categories = [];
+        this.categoryService = inject(ProductCategoryService);
+        this.productService = inject(ProductService);
+        this.selectIndex = 0;
+    }
+    ngOnInit() {
+        this.findCategories();
+    }
+    findCategories() {
+        this.categoryService.find({}).subscribe({
+            next: (res) => {
+                this.categories = res.data;
+            },
+        });
+    }
+    loadProductByCategoryIndex(index) {
+        this.selectIndex = index;
+        const id = this.categories[index].id;
+        if (index === 0) {
+            this.router.navigate([`/products`]);
+            // this.productService.find({}).subscribe({
+            //   next: res => {
+            //   }
+            // })
+        }
+        else {
+            this.router.navigate([`../products/categories/${id}`], {
+                relativeTo: this.route,
+            });
+        }
+    }
+    nextCategory() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductLayoutComponent, isStandalone: true, selector: "rolatech-product-layout", usesInheritance: true, ngImport: i0, template: "@if (categories) {\n  <rolatech-container>\n    <div class=\"flex flex-col md:flex-row min-w-[320px] max-w-[1280px] m-auto\">\n      <div class=\"h-14 md:h-auto min-w-[240px]\">\n        <div class=\"hidden md:block text-2xl font-medium py-3 md:px-1 px-3\">\u5206\u7C7B</div>\n        <div\n          class=\"flex flex-row md:flex-col md:h-full items-center md:items-start h-14 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n        >\n          <a\n            class=\"cursor-pointer h-8 bg-[--rt-badge-chip-background] md:bg-[--rt-base-background] rounded-md flex items-center md:mb-1 mr-2 md:mr-0\"\n            routerLinkActive=\"product-layout-active\"\n            routerLink=\"/products\"\n            [routerLinkActiveOptions]=\"{ exact: true }\"\n          >\n            <span class=\"md:px-1 px-3 text-md md:text-lg\">\u5168\u90E8</span>\n          </a>\n          @for (category of categories; track category; let index = $index) {\n            <a\n              class=\"cursor-pointer h-8 bg-[--rt-badge-chip-background] md:bg-[--rt-base-background] rounded-md flex items-center mr-2 md:mr-0 md:mb-1\"\n              routerLinkActive=\"product-layout-active\"\n              [routerLink]=\"['../products/categories/', category.id]\"\n              [routerLinkActiveOptions]=\"{ exact: true }\"\n            >\n              <span class=\"md:px-1 px-3 text-md md:text-lg\">{{ category.name }}</span>\n            </a>\n          }\n        </div>\n      </div>\n      <div class=\"w-full\">\n        <router-outlet></router-outlet>\n      </div>\n    </div>\n  </rolatech-container>\n}\n", styles: [".product-layout-active{border-radius:var(--rt-rounded-base, 8px);background-color:var(-rt-base-background, #fff);color:var(--rt-brand-color, #000)}@media (max-width: 768px){.product-layout-active{background-color:var(--rt-text-primary, #000);color:var(--rt-text-primary-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-layout', standalone: true, imports: [AngularCommonModule, AngularComponentsModule, ContainerComponent, ListComponent], template: "@if (categories) {\n  <rolatech-container>\n    <div class=\"flex flex-col md:flex-row min-w-[320px] max-w-[1280px] m-auto\">\n      <div class=\"h-14 md:h-auto min-w-[240px]\">\n        <div class=\"hidden md:block text-2xl font-medium py-3 md:px-1 px-3\">\u5206\u7C7B</div>\n        <div\n          class=\"flex flex-row md:flex-col md:h-full items-center md:items-start h-14 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n        >\n          <a\n            class=\"cursor-pointer h-8 bg-[--rt-badge-chip-background] md:bg-[--rt-base-background] rounded-md flex items-center md:mb-1 mr-2 md:mr-0\"\n            routerLinkActive=\"product-layout-active\"\n            routerLink=\"/products\"\n            [routerLinkActiveOptions]=\"{ exact: true }\"\n          >\n            <span class=\"md:px-1 px-3 text-md md:text-lg\">\u5168\u90E8</span>\n          </a>\n          @for (category of categories; track category; let index = $index) {\n            <a\n              class=\"cursor-pointer h-8 bg-[--rt-badge-chip-background] md:bg-[--rt-base-background] rounded-md flex items-center mr-2 md:mr-0 md:mb-1\"\n              routerLinkActive=\"product-layout-active\"\n              [routerLink]=\"['../products/categories/', category.id]\"\n              [routerLinkActiveOptions]=\"{ exact: true }\"\n            >\n              <span class=\"md:px-1 px-3 text-md md:text-lg\">{{ category.name }}</span>\n            </a>\n          }\n        </div>\n      </div>\n      <div class=\"w-full\">\n        <router-outlet></router-outlet>\n      </div>\n    </div>\n  </rolatech-container>\n}\n", styles: [".product-layout-active{border-radius:var(--rt-rounded-base, 8px);background-color:var(-rt-base-background, #fff);color:var(--rt-brand-color, #000)}@media (max-width: 768px){.product-layout-active{background-color:var(--rt-text-primary, #000);color:var(--rt-text-primary-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
+        }] });
+
+class ProductCategoryComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.categoryService = inject(ProductCategoryService);
+        this.productService = inject(ProductService);
+        this.products = [];
+        this.categories = [];
+        this.loading = false;
+    }
+    ngOnInit() {
+        this.findAllCategories();
+        this.route.paramMap.subscribe((params) => {
+            const id = params.get('id');
+            this.findCategoryById(id);
+            this.findProductsByCategoryId(id);
+        });
+    }
+    findAllCategories() {
+        this.categoryService.find({}).subscribe({
+            next: (res) => {
+                this.categories = res.data;
+            },
+        });
+    }
+    findCategoryById(id) {
+        this.categoryService.get(id).subscribe({
+            next: (res) => {
+                this.category = res.data;
+            },
+        });
+    }
+    findAllProducts() {
+        this.productService.find({}).subscribe({
+            next: (res) => {
+                this.products = res.data;
+            },
+        });
+    }
+    findProductsByCategoryId(id) {
+        this.loading = true;
+        const options = {
+            filter: `categories:${id},published:true`,
+        };
+        this.productService.find(options).subscribe({
+            next: (res) => {
+                this.products = res.data;
+                this.loading = false;
+            },
+            error: (error) => {
+                this.loading = false;
+            },
+        });
+    }
+    loadProductsByCategory(item) {
+        //  [routerLink] = "['../../', item.id]";
+        this.router.navigate([`../../${item.id}`], {
+            relativeTo: this.route,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductCategoryComponent, isStandalone: true, selector: "rolatech-product-category", usesInheritance: true, ngImport: i0, template: "<div>\n  @if (category) {\n    <div class=\"p-3 hidden md:block text-2xl font-medium\">{{ category.name }}</div>\n  } @else {\n    <div class=\"flex flex-row animate-pulse w-full\">\n      <div class=\"h-4 bg-[--rt-base-background] rounded col-span-2\"></div>\n    </div>\n  }\n  @if (loading) {\n    @for (number of [0, 1, 2, 3, 4, 5]; track number) {\n      <div class=\"flex flex-row animate-pulse mt-3 mr-4 cursor-pointer w-full\">\n        <div class=\"h-fit w-2/5 md:w-1/4 aspect-video bg-[--rt-base-background] rounded-lg\"></div>\n        <div class=\"w-3/5 md:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n          <div class=\"space-y-3\">\n            <div class=\"h-4 bg-[--rt-base-background] rounded col-span-2\"></div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-1\"></div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-1 py-1\"></div>\n          </div>\n          <div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-2 py-1\"></div>\n          </div>\n        </div>\n      </div>\n    }\n  } @else {\n    <rolatech-rich-view list>\n      @for (item of products; track item) {\n        @defer {\n          <rolatech-rich-item\n            [routerLink]=\"['../../', item.id]\"\n            [thumbnail]=\"item.media[0].url + '!w400'\"\n            [title]=\"item.name\"\n            [subtitle]=\"item.description\"\n            [price]=\"item.price / 100\"\n          ></rolatech-rich-item>\n        }\n      }\n    </rolatech-rich-view>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: RichViewComponent, selector: "rolatech-rich-view", inputs: ["list", "wrap"] }], deferBlockDependencies: [() => [i1.RouterLink, RichItemComponent]] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-category', standalone: true, imports: [AngularCommonModule, AngularComponentsModule, RichViewComponent, RichItemComponent], template: "<div>\n  @if (category) {\n    <div class=\"p-3 hidden md:block text-2xl font-medium\">{{ category.name }}</div>\n  } @else {\n    <div class=\"flex flex-row animate-pulse w-full\">\n      <div class=\"h-4 bg-[--rt-base-background] rounded col-span-2\"></div>\n    </div>\n  }\n  @if (loading) {\n    @for (number of [0, 1, 2, 3, 4, 5]; track number) {\n      <div class=\"flex flex-row animate-pulse mt-3 mr-4 cursor-pointer w-full\">\n        <div class=\"h-fit w-2/5 md:w-1/4 aspect-video bg-[--rt-base-background] rounded-lg\"></div>\n        <div class=\"w-3/5 md:w-3/4 ml-3 py-1 flex flex-col justify-between\">\n          <div class=\"space-y-3\">\n            <div class=\"h-4 bg-[--rt-base-background] rounded col-span-2\"></div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-1\"></div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-1 py-1\"></div>\n          </div>\n          <div>\n            <div class=\"h-2 bg-[--rt-base-background] rounded col-span-2 py-1\"></div>\n          </div>\n        </div>\n      </div>\n    }\n  } @else {\n    <rolatech-rich-view list>\n      @for (item of products; track item) {\n        @defer {\n          <rolatech-rich-item\n            [routerLink]=\"['../../', item.id]\"\n            [thumbnail]=\"item.media[0].url + '!w400'\"\n            [title]=\"item.name\"\n            [subtitle]=\"item.description\"\n            [price]=\"item.price / 100\"\n          ></rolatech-rich-item>\n        }\n      }\n    </rolatech-rich-view>\n  }\n</div>\n" }]
+        }] });
+
+class ProductInfoComponent {
+    constructor() {
+        this.name = input.required();
+        this.description = input();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.4", type: ProductInfoComponent, isStandalone: true, selector: "rolatech-product-info", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div>\n  <div class=\"text-2xl font-medium\">{{ name() }}</div>\n  <div>\n    {{ description() }}\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: RouterModule }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-info', standalone: true, imports: [MatIconModule, RouterModule], encapsulation: ViewEncapsulation.None, template: "<div>\n  <div class=\"text-2xl font-medium\">{{ name() }}</div>\n  <div>\n    {{ description() }}\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"] }]
+        }] });
+
+class ProductMediaComponent {
+    constructor() {
+        this.dialog = inject(MatDialog);
+        this.media = input([]);
+        this.min = input(false);
+        this.mediaIndex = 0;
+    }
+    onImageClick(i) {
+        const dialogRef = this.dialog.open(ImagePreviewDialogComponent, {
+            maxWidth: '80vw',
+            maxHeight: '80vh',
+            height: '80%',
+            width: '80%',
+            panelClass: 'full-screen-modal',
+            data: {
+                media: this.media,
+                selected: i,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => { });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductMediaComponent, isStandalone: true, selector: "rolatech-product-media", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (media()) {\n  <div>\n    <div class=\"object-cover aspect-video bg-[--rt-raised-background]\">\n      <rolatech-thumbnail [src]=\"media()[mediaIndex].url\" size=\"small\" mode=\"full\"></rolatech-thumbnail>\n    </div>\n    @for (media of media(); track media; let index = $index) {\n      <div\n        class=\"inline-flex flex-row mt-3 mr-3 cursor-pointer w-28 p-2 bg-[--rt-10-percent-layer]\"\n        (click)=\"mediaIndex = index\"\n        [ngClass]=\"mediaIndex === index ? 'border border-black' : 'opacity-70'\"\n      >\n        <rolatech-thumbnail [src]=\"media.url\" mode=\"full\"></rolatech-thumbnail>\n      </div>\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductMediaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-media', standalone: true, imports: [NgClass, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "@if (media()) {\n  <div>\n    <div class=\"object-cover aspect-video bg-[--rt-raised-background]\">\n      <rolatech-thumbnail [src]=\"media()[mediaIndex].url\" size=\"small\" mode=\"full\"></rolatech-thumbnail>\n    </div>\n    @for (media of media(); track media; let index = $index) {\n      <div\n        class=\"inline-flex flex-row mt-3 mr-3 cursor-pointer w-28 p-2 bg-[--rt-10-percent-layer]\"\n        (click)=\"mediaIndex = index\"\n        [ngClass]=\"mediaIndex === index ? 'border border-black' : 'opacity-70'\"\n      >\n        <rolatech-thumbnail [src]=\"media.url\" mode=\"full\"></rolatech-thumbnail>\n      </div>\n    }\n  </div>\n}\n" }]
+        }] });
+
+class ProductSectionComponent {
+    constructor() {
+        this.section = input.required();
+        this.user = input();
+        this.username = input();
+        this.viewportScroller = inject(ViewportScroller);
+        this.row = input(false, { transform: booleanAttribute });
+        this.reverse = input(false, { transform: booleanAttribute });
+    }
+    ngOnInit() { }
+    onClickScroller(id) {
+        this.viewportScroller.scrollToAnchor(id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductSectionComponent, isStandalone: true, selector: "rolatech-product-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (section(); as section) {\n  @if (row()) {\n    <div>\n      @if (section.title) {\n        <div class=\"py-3 flex items-center gap-3\">\n          <span class=\"h-4 w-1 bg-orange-500 inline-block\"></span>\n          <span class=\"text-lg font-medium py-1\"> {{ section.title }}</span>\n        </div>\n      }\n      @if (section.description) {\n        <div>\n          {{ section.description }}\n        </div>\n      }\n      @if (section.media) {\n        <div class=\"w-80%\">\n          @for (item of section.media; track item) {\n            <div class=\"py-3\">\n              <rolatech-thumbnail\n                [src]=\"item.url\"\n                size=\"small\"\n                mode=\"full\"\n                [width]=\"item.width\"\n                [height]=\"item.height\"\n              ></rolatech-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <div\n      class=\"flex w-full p-3\"\n      [ngClass]=\"reverse() ? 'flex-col-reverse md:flex-row-reverse' : 'flex-col-reverse md:flex-row'\"\n    >\n      <div\n        class=\"w-full md:w-1/2 py-3 flex flex-col justify-center items-center gap-3\"\n        [ngClass]=\"reverse() ? ' md:ml-16' : 'md:mr-16'\"\n      >\n        <span class=\"text-3xl font-bold py-1\"> {{ section.title }}</span>\n        <span>\n          {{ section.description }}\n        </span>\n      </div>\n      <div class=\"w-full md:w-1/2 py-11\">\n        @for (item of section.media; track item) {\n          <div class=\"py-3\">\n            <rolatech-thumbnail\n              [src]=\"item.url\"\n              size=\"small\"\n              mode=\"full\"\n              [width]=\"item.width\"\n              [height]=\"item.height\"\n            ></rolatech-thumbnail>\n          </div>\n        }\n      </div>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThumbnailComponent, selector: "rolatech-thumbnail", inputs: ["src", "size", "mode", "ratio", "width", "height"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-section', standalone: true, imports: [CommonModule, ThumbnailComponent], encapsulation: ViewEncapsulation.None, template: "@if (section(); as section) {\n  @if (row()) {\n    <div>\n      @if (section.title) {\n        <div class=\"py-3 flex items-center gap-3\">\n          <span class=\"h-4 w-1 bg-orange-500 inline-block\"></span>\n          <span class=\"text-lg font-medium py-1\"> {{ section.title }}</span>\n        </div>\n      }\n      @if (section.description) {\n        <div>\n          {{ section.description }}\n        </div>\n      }\n      @if (section.media) {\n        <div class=\"w-80%\">\n          @for (item of section.media; track item) {\n            <div class=\"py-3\">\n              <rolatech-thumbnail\n                [src]=\"item.url\"\n                size=\"small\"\n                mode=\"full\"\n                [width]=\"item.width\"\n                [height]=\"item.height\"\n              ></rolatech-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <div\n      class=\"flex w-full p-3\"\n      [ngClass]=\"reverse() ? 'flex-col-reverse md:flex-row-reverse' : 'flex-col-reverse md:flex-row'\"\n    >\n      <div\n        class=\"w-full md:w-1/2 py-3 flex flex-col justify-center items-center gap-3\"\n        [ngClass]=\"reverse() ? ' md:ml-16' : 'md:mr-16'\"\n      >\n        <span class=\"text-3xl font-bold py-1\"> {{ section.title }}</span>\n        <span>\n          {{ section.description }}\n        </span>\n      </div>\n      <div class=\"w-full md:w-1/2 py-11\">\n        @for (item of section.media; track item) {\n          <div class=\"py-3\">\n            <rolatech-thumbnail\n              [src]=\"item.url\"\n              size=\"small\"\n              mode=\"full\"\n              [width]=\"item.width\"\n              [height]=\"item.height\"\n            ></rolatech-thumbnail>\n          </div>\n        }\n      </div>\n    </div>\n  }\n}\n" }]
+        }] });
+
+class ProductItemComponent {
+    constructor() {
+        this.product = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.4", type: ProductItemComponent, isStandalone: true, selector: "rolatech-product-item", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<rolatech-rich-item\n  [routerLink]=\"['./', product().id]\"\n  [thumbnail]=\"product().media[0].url + '!w400'\"\n  [title]=\"product().name\"\n  [subtitle]=\"product().description\"\n  [price]=\"product().price / 100\"\n></rolatech-rich-item>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: RichItemComponent, selector: "rolatech-rich-item", inputs: ["list", "thumbnail", "avatar", "title", "subtitle", "price"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-item', standalone: true, imports: [AngularCommonModule, AngularComponentsModule, RichViewComponent, RichItemComponent], encapsulation: ViewEncapsulation.None, template: "<rolatech-rich-item\n  [routerLink]=\"['./', product().id]\"\n  [thumbnail]=\"product().media[0].url + '!w400'\"\n  [title]=\"product().name\"\n  [subtitle]=\"product().description\"\n  [price]=\"product().price / 100\"\n></rolatech-rich-item>\n" }]
+        }] });
+
+class ProductActionComponent {
+    constructor() {
+        this.product = input.required();
+        this.cart = output();
+        this.checkout = output();
+    }
+    onCart(product) {
+        this.cart.emit(product);
+    }
+    onCheckout(product) {
+        this.checkout.emit(product);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.4", type: ProductActionComponent, isStandalone: true, selector: "rolatech-product-action", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { cart: "cart", checkout: "checkout" }, ngImport: i0, template: "<div class=\"flex gap-3\">\n  <a mat-stroked-button class=\"\" (click)=\"onCart(product())\">\u52A0\u5165\u8D2D\u7269\u8F66</a>\n  <a mat-flat-button class=\"\" (click)=\"onCheckout(product())\">\u7ACB\u5373\u8D2D\u4E70</a>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-action', standalone: true, imports: [CommonModule, MatButtonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex gap-3\">\n  <a mat-stroked-button class=\"\" (click)=\"onCart(product())\">\u52A0\u5165\u8D2D\u7269\u8F66</a>\n  <a mat-flat-button class=\"\" (click)=\"onCheckout(product())\">\u7ACB\u5373\u8D2D\u4E70</a>\n</div>\n" }]
+        }] });
+
+class ProductPricingComponent {
+    constructor() {
+        this.product = input.required();
+        // price = computed(() => {
+        //   return (this.product().price / 100).toFixed(2);
+        // });
+        this.price = input.required();
+        this.displayPrice = computed(() => {
+            return (this.price() / 100).toFixed(2);
+        });
+        this.wish = output();
+        this.inWishList = input(false);
+    }
+    onWish(product) {
+        this.wish.emit(product);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductPricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductPricingComponent, isStandalone: true, selector: "rolatech-product-pricing", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: true, transformFunction: null }, inWishList: { classPropertyName: "inWishList", publicName: "inWishList", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wish: "wish" }, ngImport: i0, template: "<div class=\"py-3\">\n  <div class=\"flex justify-between items-center\">\n    <div class=\"text-xl font-bold py-3\">\u00A5 {{ displayPrice() }}</div>\n    <button mat-icon-button (click)=\"onWish(product())\">\n      @if (inWishList()) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n          <path\n            d=\"m293-203.08 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08Z\"\n          />\n        </svg>\n      } @else {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n          <path\n            d=\"m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143Zm-61 83.92 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08ZM480-470Z\"\n          />\n        </svg>\n      }\n    </button>\n  </div>\n  <mat-divider></mat-divider>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductPricingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-pricing', standalone: true, imports: [CommonModule, MatButtonModule, MatIcon, MatDivider], encapsulation: ViewEncapsulation.None, template: "<div class=\"py-3\">\n  <div class=\"flex justify-between items-center\">\n    <div class=\"text-xl font-bold py-3\">\u00A5 {{ displayPrice() }}</div>\n    <button mat-icon-button (click)=\"onWish(product())\">\n      @if (inWishList()) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n          <path\n            d=\"m293-203.08 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08Z\"\n          />\n        </svg>\n      } @else {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#5f6368\">\n          <path\n            d=\"m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143Zm-61 83.92 49.62-212.54-164.93-142.84 217.23-18.85L480-777.69l85.08 200.38 217.23 18.85-164.93 142.84L667-203.08 480-315.92 293-203.08ZM480-470Z\"\n          />\n        </svg>\n      }\n    </button>\n  </div>\n  <mat-divider></mat-divider>\n</div>\n" }]
+        }] });
+
+class ProductOptionComponent {
+    constructor() {
+        this.option = input.required();
+        this.change = output();
+        this.selected = model();
+        this.value = model();
+    }
+    onChange(value) {
+        this.value.set(value);
+        this.change.emit({ option: this.option(), value: value });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductOptionComponent, isStandalone: true, selector: "rolatech-product-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", selected: "selectedChange", value: "valueChange" }, ngImport: i0, template: "<div class=\"mb-3\">\n  <div class=\"text-xl font-bold py-3\">{{ option().name }}</div>\n  <div class=\"flex flex-wrap gap-3\">\n    @for (item of option().values; track $index) {\n      <div\n        class=\"w-24 h-12 border border-[--rt-border-color] rounded flex justify-center items-center hover:text-[--rt-text-primary-inverse] hover:bg-[--rt-base-background-inverse] cursor-pointer\"\n        (click)=\"onChange(item)\"\n        [ngClass]=\"value()?.id === item.id ? 'bg-[--rt-base-background-inverse] text-[--rt-text-primary-inverse]' : ''\"\n      >\n        {{ item.name }}\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-option', standalone: true, imports: [CommonModule], template: "<div class=\"mb-3\">\n  <div class=\"text-xl font-bold py-3\">{{ option().name }}</div>\n  <div class=\"flex flex-wrap gap-3\">\n    @for (item of option().values; track $index) {\n      <div\n        class=\"w-24 h-12 border border-[--rt-border-color] rounded flex justify-center items-center hover:text-[--rt-text-primary-inverse] hover:bg-[--rt-base-background-inverse] cursor-pointer\"\n        (click)=\"onChange(item)\"\n        [ngClass]=\"value()?.id === item.id ? 'bg-[--rt-base-background-inverse] text-[--rt-text-primary-inverse]' : ''\"\n      >\n        {{ item.name }}\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }] });
+
+class ProductManageSectionItemComponent {
+    constructor() {
+        this.isUploading = input();
+        this.section = input.required();
+        this.actions = input(false);
+        this.selectMedia = input();
+        this.upload = output();
+        this.delete = output();
+        this.save = output();
+        this.deleteMedia = output();
+        this.expanded = false;
+    }
+    ngOnInit() {
+        this.selectedImg = this.section().media ? this.section().media[0] : null;
+    }
+    onUpload(data) {
+        this.upload.emit({ section: this.section(), data });
+    }
+    onMediaItemClick(image) {
+        this.selectedImg = image;
+    }
+    select(item) {
+        this.selectedImg = item;
+    }
+    deleteImage() { }
+    onSave(section) {
+        this.save.emit(section);
+    }
+    onDelete(section) {
+        this.delete.emit(section);
+    }
+    onDeleteMedia(media) {
+        this.deleteMedia.emit({ section: this.section(), media });
+        this.selectedImg = this.section().media ? first(this.section().media) : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageSectionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductManageSectionItemComponent, isStandalone: true, selector: "rolatech-product-manage-section-item", inputs: { isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, selectMedia: { classPropertyName: "selectMedia", publicName: "selectMedia", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { upload: "upload", delete: "delete", save: "save", deleteMedia: "deleteMedia" }, ngImport: i0, template: "<div class=\"px-3\">\n  <div\n    class=\"h-14 py-3 flex items-center justify-between cursor-pointer\"\n    (click)=\"expanded = !expanded; $event.stopPropagation()\"\n  >\n    <div class=\"flex\">\n      <div class=\"w-32 line-clamp-1\">{{ section().title }}</div>\n      <div class=\"line-clamp-1\">{{ section().description }}</div>\n    </div>\n    <div>\n      <button mat-icon-button aria-label=\"expand row\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n        @if (expanded) {\n          <mat-icon>keyboard_arrow_up</mat-icon>\n        } @else {\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        }\n      </button>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 w-full overflow-hidden\" [@detailExpand]=\"expanded ? 'expanded' : 'collapsed'\">\n    <div class=\"flex flex-col lg:flex-row\">\n      <div class=\"flex flex-col grow\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label>\u6807\u9898</mat-label>\n          <input matInput placeholder=\"\u6807\u9898\" [(ngModel)]=\"section().title\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n          <mat-label>\u63CF\u8FF0</mat-label>\n          <textarea\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n            placeholder=\"\u63CF\u8FF0\"\n            [(ngModel)]=\"section().description\"\n          ></textarea>\n        </mat-form-field>\n      </div>\n      <!-- media -->\n      <div class=\"lg:basis-1/2 px-0 lg:px-3\">\n        @if (selectedImg) {\n          <div class=\"flex flex-row justify-center relative aspect-video\">\n            <img class=\"object-contain w-full\" [src]=\"selectedImg.url\" [alt]=\"selectedImg.alt\" />\n            <div class=\"absolute z-30 right-0\">\n              <button\n                mat-icon-button\n                [matMenuTriggerFor]=\"beforeMenu\"\n                class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1\"\n              >\n                <mat-icon>more_vert</mat-icon>\n              </button>\n              <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n                <button mat-menu-item (click)=\"onDeleteMedia(selectedImg)\">\n                  <span>\u5220\u9664</span>\n                </button>\n              </mat-menu>\n            </div>\n          </div>\n        }\n\n        <!-- media -->\n        <div>\n          <div class=\"flex flex-row flex-wrap cursor-pointer relative box-border\" fxLayout=\"row\">\n            <div class=\"progress-bar\">\n              @if (section().isUploading) {\n                <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n              }\n            </div>\n            @for (media of section().media; track media) {\n              <div class=\"media-list-item\">\n                <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n              </div>\n            }\n            <input style=\"display: none\" type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" #fileInput />\n            <div class=\"add-button\">\n              <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n                  <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    @if (actions()) {\n      <div class=\"flex flex-row justify-end p-3 gap-3\">\n        <button mat-button class=\"max-h-8\" (click)=\"onDelete(section())\">\u5220\u9664</button>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(section())\">\u4FDD\u5B58</button>\n      </div>\n    }\n  </div>\n</div>\n\n<mat-divider></mat-divider>\n", styles: [".media-list{flex-wrap:wrap;box-sizing:border-box}.progress-bar{display:block;min-height:6px;width:100%}.media-list-item{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:64px;width:64px;object-fit:contain;cursor:pointer;border:1px solid grey;position:relative;box-sizing:border-box;border-radius:8px}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], animations: [
+            trigger('detailExpand', [
+                state('collapsed', style({ height: '0px' })),
+                state('expanded', style({ height: '*' })),
+                transition('expanded <=> collapsed', animate('400ms cubic-bezier(0.25, 0.1, 0.25, 1)')),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageSectionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-manage-section-item', standalone: true, imports: [
+                        NgClass,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormsModule,
+                        TextFieldModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatMenuModule,
+                        MatProgressBarModule,
+                        MatDividerModule,
+                    ], animations: [
+                        trigger('detailExpand', [
+                            state('collapsed', style({ height: '0px' })),
+                            state('expanded', style({ height: '*' })),
+                            transition('expanded <=> collapsed', animate('400ms cubic-bezier(0.25, 0.1, 0.25, 1)')),
+                        ]),
+                    ], template: "<div class=\"px-3\">\n  <div\n    class=\"h-14 py-3 flex items-center justify-between cursor-pointer\"\n    (click)=\"expanded = !expanded; $event.stopPropagation()\"\n  >\n    <div class=\"flex\">\n      <div class=\"w-32 line-clamp-1\">{{ section().title }}</div>\n      <div class=\"line-clamp-1\">{{ section().description }}</div>\n    </div>\n    <div>\n      <button mat-icon-button aria-label=\"expand row\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n        @if (expanded) {\n          <mat-icon>keyboard_arrow_up</mat-icon>\n        } @else {\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        }\n      </button>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 w-full overflow-hidden\" [@detailExpand]=\"expanded ? 'expanded' : 'collapsed'\">\n    <div class=\"flex flex-col lg:flex-row\">\n      <div class=\"flex flex-col grow\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label>\u6807\u9898</mat-label>\n          <input matInput placeholder=\"\u6807\u9898\" [(ngModel)]=\"section().title\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" [hideRequiredMarker]=\"true\">\n          <mat-label>\u63CF\u8FF0</mat-label>\n          <textarea\n            matInput\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n            placeholder=\"\u63CF\u8FF0\"\n            [(ngModel)]=\"section().description\"\n          ></textarea>\n        </mat-form-field>\n      </div>\n      <!-- media -->\n      <div class=\"lg:basis-1/2 px-0 lg:px-3\">\n        @if (selectedImg) {\n          <div class=\"flex flex-row justify-center relative aspect-video\">\n            <img class=\"object-contain w-full\" [src]=\"selectedImg.url\" [alt]=\"selectedImg.alt\" />\n            <div class=\"absolute z-30 right-0\">\n              <button\n                mat-icon-button\n                [matMenuTriggerFor]=\"beforeMenu\"\n                class=\"ml-auto focus:outline-none hover:bg-[--rt-base-background] p-1\"\n              >\n                <mat-icon>more_vert</mat-icon>\n              </button>\n              <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n                <button mat-menu-item (click)=\"onDeleteMedia(selectedImg)\">\n                  <span>\u5220\u9664</span>\n                </button>\n              </mat-menu>\n            </div>\n          </div>\n        }\n\n        <!-- media -->\n        <div>\n          <div class=\"flex flex-row flex-wrap cursor-pointer relative box-border\" fxLayout=\"row\">\n            <div class=\"progress-bar\">\n              @if (section().isUploading) {\n                <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n              }\n            </div>\n            @for (media of section().media; track media) {\n              <div class=\"media-list-item\">\n                <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n              </div>\n            }\n            <input style=\"display: none\" type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" #fileInput />\n            <div class=\"add-button\">\n              <div (click)=\"fileInput.click()\" class=\"tile-media flex justify-center items-center\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n                  <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    @if (actions()) {\n      <div class=\"flex flex-row justify-end p-3 gap-3\">\n        <button mat-button class=\"max-h-8\" (click)=\"onDelete(section())\">\u5220\u9664</button>\n        <button mat-flat-button class=\"max-h-8\" (click)=\"onSave(section())\">\u4FDD\u5B58</button>\n      </div>\n    }\n  </div>\n</div>\n\n<mat-divider></mat-divider>\n", styles: [".media-list{flex-wrap:wrap;box-sizing:border-box}.progress-bar{display:block;min-height:6px;width:100%}.media-list-item{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}.tile-media{height:64px;width:64px;object-fit:contain;cursor:pointer;border:1px solid grey;position:relative;box-sizing:border-box;border-radius:8px}.add-button{cursor:pointer;position:relative;box-sizing:border-box;padding:2px}\n"] }]
+        }], ctorParameters: () => [] });
+
+class ProductManageOptionActionComponent {
+    constructor() {
+        this.delete = output();
+        this.save = output();
+    }
+    onDelete(option) {
+        this.delete.emit(option);
+    }
+    onSave(option) {
+        this.save.emit(option);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageOptionActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductManageOptionActionComponent, isStandalone: true, selector: "rolatech-product-manage-option-action", outputs: { delete: "delete", save: "save" }, ngImport: i0, template: "<div>\n  <!-- <button mat-button color=\"primary\" (click)=\"onDelete(item)\">\u5220\u9664</button>\n  <button mat-button color=\"primary\" (click)=\"onSave(item)\">\u4FDD\u5B58</button> -->\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageOptionActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-product-layout', standalone: true, imports: [CommonModule], template: "<p>product-layout works!</p>\n" }]
+            args: [{ selector: 'rolatech-product-manage-option-action', standalone: true, imports: [MatButtonModule], template: "<div>\n  <!-- <button mat-button color=\"primary\" (click)=\"onDelete(item)\">\u5220\u9664</button>\n  <button mat-button color=\"primary\" (click)=\"onSave(item)\">\u4FDD\u5B58</button> -->\n</div>\n" }]
         }] });
 
-class ProductCategoryComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ProductCategoryComponent, isStandalone: true, selector: "lib-product-category", ngImport: i0, template: "<p>product-category works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+class ProductManageOptionAddComponent {
+    constructor() {
+        this.option = {
+            id: '',
+            name: '',
+            values: [],
+        };
+        this.addOnBlur = true;
+        this.separatorKeysCodes = [ENTER, COMMA];
+        this.cancel = output();
+        this.save = output();
+        this.action = true;
+        this.output = output();
+    }
+    onCancel() {
+        this.cancel.emit();
+    }
+    onSave() {
+        this.save.emit(this.option);
+    }
+    addOptionValues(event) {
+        const value = (event.value || '').trim();
+        if (value) {
+            this.option.values.push({ name: value });
+        }
+        event.chipInput.clear();
+    }
+    removeValue(value) {
+        if (value) {
+            let index = this.option.values.findIndex((item) => item.name === value.name);
+            this.option.values?.splice(index, 1);
+        }
+    }
+    ngDoCheck() {
+        this.output.emit(this.option);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageOptionAddComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductManageOptionAddComponent, isStandalone: true, selector: "rolatech-product-manage-option-add", outputs: { cancel: "cancel", save: "save", output: "output" }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <div class=\"p-1\">\u9009\u9879</div>\n  <form>\n    <mat-form-field appearance=\"fill\">\n      <input matInput placeholder=\"\u540D\u79F0\" type=\"text\" [(ngModel)]=\"option.name\" [ngModelOptions]=\"{ standalone: true }\" />\n    </mat-form-field>\n    <mat-form-field class=\"example-chip-list\">\n      <mat-chip-grid #chipGrid aria-label=\"Enter values\">\n        @for (value of option.values; track value) {\n          <mat-chip-row\n            (removed)=\"removeValue(value)\"\n            [editable]=\"true\"\n            [aria-description]=\"'press enter to edit ' + value.name\"\n          >\n            {{ value.name }}\n            <button matChipRemove [attr.aria-label]=\"'remove ' + value.name\">\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip-row>\n        }\n        <input\n          placeholder=\"\u9009\u9879\u503C\"\n          [matChipInputFor]=\"chipGrid\"\n          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n          [matChipInputAddOnBlur]=\"addOnBlur\"\n          (matChipInputTokenEnd)=\"addOptionValues($event)\"\n        />\n      </mat-chip-grid>\n    </mat-form-field>\n  </form>\n</div>\n@if (action) {\n  <div class=\"flex items-center justify-end\">\n    <button mat-button (click)=\"onCancel()\">\u53D6\u6D88</button>\n    <button mat-button color=\"primary\" (click)=\"onSave()\">\u4FDD\u5B58</button>\n  </div>\n}\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductCategoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageOptionAddComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-product-category', standalone: true, imports: [CommonModule], template: "<p>product-category works!</p>\n" }]
+            args: [{ selector: 'rolatech-product-manage-option-add', standalone: true, imports: [
+                        MatChipsModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        AngularCommonModule,
+                        AngularComponentsModule,
+                        MatIconModule,
+                        ProductManageOptionActionComponent,
+                    ], template: "<div class=\"flex flex-col\">\n  <div class=\"p-1\">\u9009\u9879</div>\n  <form>\n    <mat-form-field appearance=\"fill\">\n      <input matInput placeholder=\"\u540D\u79F0\" type=\"text\" [(ngModel)]=\"option.name\" [ngModelOptions]=\"{ standalone: true }\" />\n    </mat-form-field>\n    <mat-form-field class=\"example-chip-list\">\n      <mat-chip-grid #chipGrid aria-label=\"Enter values\">\n        @for (value of option.values; track value) {\n          <mat-chip-row\n            (removed)=\"removeValue(value)\"\n            [editable]=\"true\"\n            [aria-description]=\"'press enter to edit ' + value.name\"\n          >\n            {{ value.name }}\n            <button matChipRemove [attr.aria-label]=\"'remove ' + value.name\">\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip-row>\n        }\n        <input\n          placeholder=\"\u9009\u9879\u503C\"\n          [matChipInputFor]=\"chipGrid\"\n          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n          [matChipInputAddOnBlur]=\"addOnBlur\"\n          (matChipInputTokenEnd)=\"addOptionValues($event)\"\n        />\n      </mat-chip-grid>\n    </mat-form-field>\n  </form>\n</div>\n@if (action) {\n  <div class=\"flex items-center justify-end\">\n    <button mat-button (click)=\"onCancel()\">\u53D6\u6D88</button>\n    <button mat-button color=\"primary\" (click)=\"onSave()\">\u4FDD\u5B58</button>\n  </div>\n}\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+class ProductManageOptionItemComponent {
+    constructor() {
+        this.option = input.required();
+        this.addOnBlur = true;
+        this.delete = output();
+        this.save = output();
+        this.edit = output();
+    }
+    onDelete() {
+        this.delete.emit(this.option());
+    }
+    onSave() {
+        this.save.emit(this.option());
+    }
+    onEdit() {
+        this.edit.emit(this.option());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageOptionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.4", type: ProductManageOptionItemComponent, isStandalone: true, selector: "rolatech-product-manage-option-item", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { delete: "delete", save: "save", edit: "edit" }, ngImport: i0, template: "<div class=\"group flex justify-between items-center h-14 hover:bg-[--rt-raised-background] cursor-pointer px-2\">\n  <div class=\"flex\">\n    <div class=\"min-w-[100px]\">{{ option().name }}</div>\n    <div class=\"overflow-hidden line-clamp-1\">\n      {{ option().values! | options }}\n    </div>\n  </div>\n  <div class=\"flex justify-end max-w-24 w-24 invisible group-hover:visible\">\n    <button mat-icon-button (click)=\"onEdit()\">\n      <mat-icon>edit</mat-icon>\n    </button>\n    <button mat-icon-button (click)=\"onDelete()\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n</div>\n<mat-divider></mat-divider>\n", styles: ["mat-icon{scale:.9}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: OptionsFormatPipe, name: "options" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageOptionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-manage-option-item', standalone: true, imports: [
+                        MatChipsModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        AngularCommonModule,
+                        AngularComponentsModule,
+                        MatIconModule,
+                        ProductManageOptionActionComponent,
+                        ProductManageOptionAddComponent,
+                        OptionsFormatPipe,
+                    ], template: "<div class=\"group flex justify-between items-center h-14 hover:bg-[--rt-raised-background] cursor-pointer px-2\">\n  <div class=\"flex\">\n    <div class=\"min-w-[100px]\">{{ option().name }}</div>\n    <div class=\"overflow-hidden line-clamp-1\">\n      {{ option().values! | options }}\n    </div>\n  </div>\n  <div class=\"flex justify-end max-w-24 w-24 invisible group-hover:visible\">\n    <button mat-icon-button (click)=\"onEdit()\">\n      <mat-icon>edit</mat-icon>\n    </button>\n    <button mat-icon-button (click)=\"onDelete()\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n</div>\n<mat-divider></mat-divider>\n", styles: ["mat-icon{scale:.9}\n"] }]
+        }] });
+
+class SelectedPipe {
+    transform(variant, option) {
+        const findedOption = variant.options.find((item) => item.option.id === option.id);
+        return findedOption?.value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.4", ngImport: i0, type: SelectedPipe, isStandalone: true, name: "selected" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SelectedPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'selected',
+                    standalone: true,
+                }]
         }] });
 
-class ProductDetailComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ProductDetailComponent, isStandalone: true, selector: "lib-product-detail", ngImport: i0, template: "<p>product-detail works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+class ProductOwnerRendererComponent {
+    constructor() {
+        this.name = input();
+        this.avatar = input();
+        this.username = input();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductOwnerRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductOwnerRendererComponent, isStandalone: true, selector: "rolatech-product-owner-renderer", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-row items-center py-3\">\n  <div class=\"flex mr-3 gap-2 items-center\">\n    @if (avatar()) {\n      <div class=\"cursor-pointer\" [routerLink]=\"['/', '@' + username()]\">\n        <img [src]=\"avatar()\" class=\"w-11 h-11 rounded-full\" />\n      </div>\n    } @else {\n      <div class=\"w-11 h-11 rounded-full bg-orange-600\"></div>\n    }\n    <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n      <a [routerLink]=\"['/', '@' + username()]\">\n        <span>{{ name() }}</span>\n      </a>\n      <mat-icon color=\"primary\">verified</mat-icon>\n    </div>\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductOwnerRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-product-detail', standalone: true, imports: [CommonModule], template: "<p>product-detail works!</p>\n" }]
+            args: [{ selector: 'rolatech-product-owner-renderer', standalone: true, imports: [AngularCommonModule, MatIconModule], template: "<div class=\"flex flex-row items-center py-3\">\n  <div class=\"flex mr-3 gap-2 items-center\">\n    @if (avatar()) {\n      <div class=\"cursor-pointer\" [routerLink]=\"['/', '@' + username()]\">\n        <img [src]=\"avatar()\" class=\"w-11 h-11 rounded-full\" />\n      </div>\n    } @else {\n      <div class=\"w-11 h-11 rounded-full bg-orange-600\"></div>\n    }\n    <div class=\"flex items-center text-lg font-bold cursor-pointer\">\n      <a [routerLink]=\"['/', '@' + username()]\">\n        <span>{{ name() }}</span>\n      </a>\n      <mat-icon color=\"primary\">verified</mat-icon>\n    </div>\n  </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}\n"] }]
         }] });
 
+class ProductDetailsComponent extends BaseComponent {
+    constructor() {
+        super();
+        this.authService = inject(AuthService);
+        this.authUserService = inject(AuthUserService);
+        this.productService = inject(ProductService);
+        this.cartService = inject(CartService);
+        this.authenticated = this.authService.authenticated;
+        this.fullname = '';
+        this.username = '';
+        this.inWishList = false;
+        this.purchased = false;
+        this.variants = [];
+        this.variantOption = signal(undefined);
+        this.variantOptionChanged = computed(() => {
+            // this.findVariant(item.option)
+            console.log(this.variantOption());
+            return this.variantOption();
+        });
+        this.results = [];
+        effect(() => {
+            if (this.authenticated()) {
+                this.findWishlistBy();
+            }
+        });
+    }
+    ngOnInit() {
+        this.getProduct();
+    }
+    getProduct() {
+        this.productService.get(this.id).subscribe({
+            next: (res) => {
+                this.product = res.data;
+                if (this.product.variants) {
+                    this.variants = this.product.variants;
+                    this.selectedVariant = this.variants[0];
+                    this.selectedVariant.options.forEach((item) => {
+                        this.results.push([item.option.id, item.value.id]);
+                    });
+                }
+                this.findUserBaseInfo(this.product.userId);
+                this.titleService.setTitle(`${this.product.name} - 拼小课`);
+            },
+        });
+    }
+    findVariant(optionId, valueId) {
+        return this.variants.find((item) => {
+            const exist = item.options.some((i) => i.option.id === optionId && i.value.id === valueId);
+            if (exist) {
+                return item;
+            }
+            return null;
+        });
+    }
+    findUserBaseInfo(userId) {
+        this.authUserService.getPublicUserInfo(userId).subscribe({
+            next: (res) => {
+                this.fullname = res.name;
+                this.username = res.username;
+                this.user = res;
+            },
+        });
+    }
+    findWishlistBy() {
+        this.productService.findWishlistBy(this.id).subscribe({
+            next: (res) => {
+                this.inWishList = res.data;
+            },
+        });
+    }
+    onWish(e) {
+        if (this.authenticated()) {
+            if (this.inWishList) {
+                this.removeFromWishlist();
+            }
+            else {
+                this.addToWishlist();
+            }
+        }
+        else {
+            this.snackBarService.open('请先登录');
+        }
+    }
+    onCart(e) {
+        if (this.authenticated()) {
+            const data = { productId: this.id, quantity: 1 };
+            if (this.selectedVariant) {
+                data['variantId'] = this.selectedVariant.id;
+            }
+            this.cartService.create(data).subscribe({
+                next: (res) => {
+                    console.log(res);
+                },
+            });
+        }
+        else {
+            this.snackBarService.open('请先登录');
+        }
+    }
+    removeFromWishlist() {
+        this.productService.removeFromWishlist(this.id).subscribe({
+            next: (res) => {
+                this.inWishList = false;
+            },
+        });
+    }
+    addToWishlist() {
+        this.productService.addToWishlist(this.id).subscribe({
+            next: (res) => {
+                this.inWishList = true;
+            },
+        });
+    }
+    checkout(e) {
+        if (this.authenticated()) {
+            if (this.selectedVariant) {
+                // this.router.navigateByUrl(`/cart/checkout/products/${this.id}?variant-id=${this.selectedVariant.id}`);
+                // this.router.navigate([`/cart/checkout/products/${this.id}`], { queryParams: { variant: this.selectedVariant.id } });
+                this.router.navigate([`/cart/checkout/products/${this.id}/variants/${this.selectedVariant.id}`]);
+            }
+            else {
+                this.router.navigateByUrl(`/cart/checkout/products/${this.id}`);
+            }
+        }
+        else {
+            this.snackBarService.open('请先登录');
+        }
+    }
+    onOptionChange(e) {
+        let criteria = [];
+        this.selectedVariant.options.map((item) => {
+            criteria.push({
+                optionId: item.option.id === e.option.id ? e.option.id : item.option.id,
+                valueId: item.option.id === e.option.id ? e.value.id : item.value.id,
+            });
+        });
+        // const criteria = [
+        //   { optionId: '249008855294545920', valueId: '249008855298740224' }, // color: red
+        //   { optionId: '248661715955355648', valueId: '249001130061860865' }, // size: 256GB
+        // ];
+        // Function to check if a variant matches all the criteria
+        const matchesAllCriteria = (variant, criteria) => {
+            return _.every(criteria, (criterion) => {
+                return _.some(variant.options, (o) => o.option.id === criterion.optionId && o.value.id === criterion.valueId);
+            });
+        };
+        // Function to update the criteria based on a matching variant
+        const updateCriteriaFromVariant = (variant) => {
+            return _.map(variant.options, (o) => ({
+                optionId: o.option.id,
+                valueId: o.value.id,
+            }));
+        };
+        // Find the variant that matches all the criteria
+        const matchingVariant = _.find(this.variants, (variant) => matchesAllCriteria(variant, criteria));
+        this.selectedVariant = matchingVariant;
+        // const updatedCriteria = matchingVariant ? updateCriteriaFromVariant(matchingVariant) : [];
+        console.log(matchingVariant);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductDetailsComponent, isStandalone: true, selector: "rolatech-product-details", usesInheritance: true, ngImport: i0, template: "@if (product) {\n  <rolatech-container>\n    <div class=\"flex flex-col md:flex-row w-full\">\n      <div class=\"md:w-1/2 md:p-3 py-3\">\n        <rolatech-product-media [media]=\"product.media\"></rolatech-product-media>\n      </div>\n      <div class=\"md:w-1/2 md:p-3 py-3\">\n        <rolatech-product-info [name]=\"product.name\" [description]=\"product.description\"> </rolatech-product-info>\n        @for (option of product.options; track $index) {\n          <rolatech-product-option\n            [option]=\"option\"\n            [value]=\"selectedVariant | selected: option\"\n            (change)=\"onOptionChange($event)\"\n          ></rolatech-product-option>\n        }\n        <rolatech-product-pricing\n          (wish)=\"onWish($event)\"\n          [inWishList]=\"inWishList\"\n          [product]=\"product\"\n          [price]=\"selectedVariant ? selectedVariant.price : product.price\"\n        ></rolatech-product-pricing>\n        <rolatech-product-action\n          [product]=\"product\"\n          (checkout)=\"checkout($event)\"\n          (cart)=\"onCart($event)\"\n        ></rolatech-product-action>\n      </div>\n    </div>\n    <div class=\"py-3\">\n      <mat-divider></mat-divider>\n      <rolatech-product-owner-renderer\n        [name]=\"fullname\"\n        [avatar]=\"user?.avatar\"\n        [username]=\"username\"\n      ></rolatech-product-owner-renderer>\n      <mat-divider></mat-divider>\n    </div>\n    <div class=\"flex flex-col\">\n      @for (section of product.sections; track $index) {\n        <rolatech-product-section [section]=\"section\" [reverse]=\"$index % 2 !== 0\"></rolatech-product-section>\n      }\n\n      <rolatech-comments [itemId]=\"product.id\"></rolatech-comments>\n    </div>\n  </rolatech-container>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ProductInfoComponent, selector: "rolatech-product-info", inputs: ["name", "description"] }, { kind: "component", type: ProductMediaComponent, selector: "rolatech-product-media", inputs: ["media", "min"] }, { kind: "component", type: ProductPricingComponent, selector: "rolatech-product-pricing", inputs: ["product", "price", "inWishList"], outputs: ["wish"] }, { kind: "component", type: ProductSectionComponent, selector: "rolatech-product-section", inputs: ["section", "user", "username", "row", "reverse"] }, { kind: "component", type: ProductActionComponent, selector: "rolatech-product-action", inputs: ["product"], outputs: ["cart", "checkout"] }, { kind: "component", type: CommentsComponent, selector: "rolatech-comments", inputs: ["itemId"] }, { kind: "component", type: ProductOptionComponent, selector: "rolatech-product-option", inputs: ["option", "selected", "value"], outputs: ["change", "selectedChange", "valueChange"] }, { kind: "component", type: ProductOwnerRendererComponent, selector: "rolatech-product-owner-renderer", inputs: ["name", "avatar", "username"] }, { kind: "pipe", type: SelectedPipe, name: "selected" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-details', standalone: true, imports: [
+                        AngularCommonModule,
+                        AngularComponentsModule,
+                        ContainerComponent,
+                        ProductInfoComponent,
+                        ProductMediaComponent,
+                        ProductPricingComponent,
+                        ProductSectionComponent,
+                        ProductActionComponent,
+                        CommentsComponent,
+                        ProductOptionComponent,
+                        ProductOwnerRendererComponent,
+                        SelectedPipe,
+                    ], template: "@if (product) {\n  <rolatech-container>\n    <div class=\"flex flex-col md:flex-row w-full\">\n      <div class=\"md:w-1/2 md:p-3 py-3\">\n        <rolatech-product-media [media]=\"product.media\"></rolatech-product-media>\n      </div>\n      <div class=\"md:w-1/2 md:p-3 py-3\">\n        <rolatech-product-info [name]=\"product.name\" [description]=\"product.description\"> </rolatech-product-info>\n        @for (option of product.options; track $index) {\n          <rolatech-product-option\n            [option]=\"option\"\n            [value]=\"selectedVariant | selected: option\"\n            (change)=\"onOptionChange($event)\"\n          ></rolatech-product-option>\n        }\n        <rolatech-product-pricing\n          (wish)=\"onWish($event)\"\n          [inWishList]=\"inWishList\"\n          [product]=\"product\"\n          [price]=\"selectedVariant ? selectedVariant.price : product.price\"\n        ></rolatech-product-pricing>\n        <rolatech-product-action\n          [product]=\"product\"\n          (checkout)=\"checkout($event)\"\n          (cart)=\"onCart($event)\"\n        ></rolatech-product-action>\n      </div>\n    </div>\n    <div class=\"py-3\">\n      <mat-divider></mat-divider>\n      <rolatech-product-owner-renderer\n        [name]=\"fullname\"\n        [avatar]=\"user?.avatar\"\n        [username]=\"username\"\n      ></rolatech-product-owner-renderer>\n      <mat-divider></mat-divider>\n    </div>\n    <div class=\"flex flex-col\">\n      @for (section of product.sections; track $index) {\n        <rolatech-product-section [section]=\"section\" [reverse]=\"$index % 2 !== 0\"></rolatech-product-section>\n      }\n\n      <rolatech-comments [itemId]=\"product.id\"></rolatech-comments>\n    </div>\n  </rolatech-container>\n}\n" }]
+        }], ctorParameters: () => [] });
+
 const productRoutes = [
     {
         path: '',
@@ -36,7 +718,7 @@ const productRoutes = [
         children: [
             {
                 path: '',
-                loadComponent: () => Promise.resolve().then(function () { return productIndex_component; }).then((x) => x.ProductIndexComponent),
+                loadComponent: () => import('./rolatech-angular-product-product-index.component-C_cbg95R.mjs').then((x) => x.ProductIndexComponent),
             },
             {
                 path: 'categories/:id',
@@ -46,58 +728,1005 @@ const productRoutes = [
     },
     {
         path: ':id',
-        component: ProductDetailComponent,
+        component: ProductDetailsComponent,
     },
 ];
 
+var ProductStatus;
+(function (ProductStatus) {
+    ProductStatus[ProductStatus["DRAFT"] = '草稿'] = "DRAFT";
+    ProductStatus[ProductStatus["AWAITING"] = '审核中'] = "AWAITING";
+    ProductStatus[ProductStatus["PENDING"] = '审核中'] = "PENDING";
+    ProductStatus[ProductStatus["ACCEPTED"] = '已通过'] = "ACCEPTED";
+    ProductStatus[ProductStatus["ACTIVE"] = '已发布'] = "ACTIVE";
+    ProductStatus[ProductStatus["DELETED"] = '已删除'] = "DELETED";
+    ProductStatus[ProductStatus["ARCHIVED"] = '已下架'] = "ARCHIVED";
+})(ProductStatus || (ProductStatus = {}));
+var ProductType;
+(function (ProductType) {
+    // DIGITAL = <any>'虚拟商品',
+    // PHYSICAL = <any>'实体商品',
+    // OTHER = <any>'其他',
+    ProductType["DIGITAL"] = "\u865A\u62DF\u5546\u54C1";
+    ProductType["PHYSICAL"] = "\u5B9E\u4F53\u5546\u54C1";
+    ProductType["OTHER"] = "\u5176\u4ED6";
+})(ProductType || (ProductType = {}));
+var ProductInventoryStatus;
+(function (ProductInventoryStatus) {
+    ProductInventoryStatus["IN_STOCK"] = "\u6709\u8D27";
+    ProductInventoryStatus["LOW_STOCK"] = "\u5E93\u5B58\u4E0D\u8DB3";
+    ProductInventoryStatus["OUT_OF_STOCK"] = "\u552E\u7F44";
+    ProductInventoryStatus["DISCONTINUED"] = "\u5DF2\u505C\u4EA7";
+})(ProductInventoryStatus || (ProductInventoryStatus = {}));
+var ProductScope;
+(function (ProductScope) {
+    ProductScope[ProductScope["WEB"] = '网站'] = "WEB";
+    ProductScope[ProductScope["GLOBAL"] = '全域'] = "GLOBAL";
+})(ProductScope || (ProductScope = {}));
+
+class ProductManageContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductManageContentComponent, isStandalone: true, selector: "rolatech-product-manage-content", ngImport: i0, template: "<ng-content select=\"rolatech-toolbar\"></ng-content>\n<div class=\"p-3\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-manage-content', standalone: true, imports: [CommonModule], template: "<ng-content select=\"rolatech-toolbar\"></ng-content>\n<div class=\"p-3\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
 class ProductManageLayoutComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductManageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ProductManageLayoutComponent, isStandalone: true, selector: "lib-product-manage-layout", ngImport: i0, template: "<p>product-manage-layout works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    constructor() {
+        this.submitted = false;
+        this.accepted = false;
+        this.isDraft = false;
+        this.route = inject(ActivatedRoute);
+        this.productService = inject(ProductService);
+        this.dialog = inject(MatDialog);
+        this.snackBar = inject(MatSnackBar);
+        this.id = this.route.snapshot.paramMap.get('id');
+    }
+    ngOnInit() {
+        this.get();
+    }
+    get() {
+        this.productService.get(this.id).subscribe({
+            next: (res) => {
+                this.product = res.data;
+            },
+        });
+    }
+    updateStatus() {
+        this.isDraft = this.product.status.toString() === 'DRAFT' || this.product.status.toString() === 'PENDING';
+        this.accepted = this.product.status.toString() === 'ACCEPTED';
+    }
+    publish() {
+        this.productService.publish(this.id).subscribe({
+            next: (res) => {
+                this.snackBar.open('发布成功');
+                this.product.status = ProductStatus['已发布'];
+                this.updateStatus();
+            },
+            error: (error) => {
+                this.snackBar.open(error.message);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductManageLayoutComponent, isStandalone: true, selector: "rolatech-product-manage-layout", ngImport: i0, template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 md:px-0 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u5546\u54C1\u4FE1\u606F</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-2\">\u57FA\u672C\u4FE1\u606F</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-2\">\u56FE\u7247</a>\n      <a routerLink=\"./sections\" routerLinkActive=\"manage-active\" class=\"p-2\">\u8BE6\u60C5</a>\n      <a routerLink=\"./options\" routerLinkActive=\"manage-active\" class=\"p-2\">\u9009\u9879</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u5546\u54C1\u8BBE\u7F6E</div>\n      <a routerLink=\"./variants\" routerLinkActive=\"manage-active\" class=\"p-2\">\u4EF7\u683C\u7B56\u7565</a>\n      <a routerLink=\"./inventory\" routerLinkActive=\"manage-active\" class=\"p-2\">\u5E93\u5B58\u8BBE\u7F6E</a>\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-2\">\u53D1\u5E03\u8BBE\u7F6E</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u5176\u4ED6\u4FE1\u606F</div>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-2\">\u4EF7\u683C</a>\n    </div>\n\n    @if (isDraft) {\n      <div class=\"md:mt-6 md:ml-2\">\n        <button mat-flat-button color=\"primary\" (click)=\"publish()\">\u53D1\u5E03\u5546\u54C1</button>\n      </div>\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .05));box-shadow:4px 0 var(--rt-base-background-inverse, #000) inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px 0 0 var(--rt-base-background-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-manage-layout', standalone: true, imports: [RouterLink, RouterLinkActive, MatButtonModule, RouterOutlet, ProductManageContentComponent], template: "<div class=\"flex flex-col md:flex-row m-auto\">\n  <div\n    class=\"min-w-[256px] px-3 md:px-0 flex flex-row md:flex-col md:h-full items-center md:items-start h-16 overflow-x-scroll overflow-y-hidden scrollbar-hide whitespace-pre\"\n  >\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u5546\u54C1\u4FE1\u606F</div>\n      <a routerLink=\"./info\" routerLinkActive=\"manage-active\" class=\"p-2\">\u57FA\u672C\u4FE1\u606F</a>\n      <a routerLink=\"./media\" routerLinkActive=\"manage-active\" class=\"p-2\">\u56FE\u7247</a>\n      <a routerLink=\"./sections\" routerLinkActive=\"manage-active\" class=\"p-2\">\u8BE6\u60C5</a>\n      <a routerLink=\"./options\" routerLinkActive=\"manage-active\" class=\"p-2\">\u9009\u9879</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u5546\u54C1\u8BBE\u7F6E</div>\n      <a routerLink=\"./variants\" routerLinkActive=\"manage-active\" class=\"p-2\">\u4EF7\u683C\u7B56\u7565</a>\n      <a routerLink=\"./inventory\" routerLinkActive=\"manage-active\" class=\"p-2\">\u5E93\u5B58\u8BBE\u7F6E</a>\n      <a routerLink=\"./schedule\" routerLinkActive=\"manage-active\" class=\"p-2\">\u53D1\u5E03\u8BBE\u7F6E</a>\n    </div>\n    <div class=\"flex flex-row md:flex-col md:w-full\">\n      <div class=\"hidden md:flex text-xl font-bold h-14 items-center px-2\">\u5176\u4ED6\u4FE1\u606F</div>\n      <a routerLink=\"./pricing\" routerLinkActive=\"manage-active\" class=\"p-2\">\u4EF7\u683C</a>\n    </div>\n\n    @if (isDraft) {\n      <div class=\"md:mt-6 md:ml-2\">\n        <button mat-flat-button color=\"primary\" (click)=\"publish()\">\u53D1\u5E03\u5546\u54C1</button>\n      </div>\n    }\n  </div>\n  <div class=\"w-full\">\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", styles: [".manage-active{background-color:var(--rt-10-percent-layer, rgba(0, 0, 0, .05));box-shadow:4px 0 var(--rt-base-background-inverse, #000) inset;font-weight:600}@media (max-width: 768px){.manage-active{box-shadow:inset 0 -4px 0 0 var(--rt-base-background-inverse, #000)}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
+        }], ctorParameters: () => [] });
+
+class ProductManageInfoComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.productService = inject(ProductService);
+        this.categoryService = inject(ProductCategoryService);
+        this.status = ProductStatus;
+        this.productType = ProductType;
+        this.selectedType = '';
+        this.enumKeys = Object.keys(this.productType).filter((key) => isNaN(Number(key)));
+        this.enumValues = Object.values(this.productType);
+        this.price = model();
+    }
+    ngOnInit() {
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+        this.find();
+        this.categoryService.find({}).subscribe({
+            next: (res) => {
+                this.categories = res.data;
+            },
+        });
+    }
+    find() {
+        this.productService.get(this.id).subscribe({
+            next: (res) => {
+                this.product = res.data;
+                let price = (this.product.price / 100).toFixed(2);
+                this.price.set(price);
+            },
+        });
+    }
+    typeCompareFn(t1, t2) {
+        return t1 === ProductType[t2];
+    }
+    compareFn(o1, o2) {
+        return o1.id === o2?.id;
+    }
+    onTypeChange(event) {
+        this.product.type = Object.keys(this.productType).find((key) => this.productType[key] === event.value);
+    }
+    onCategoryChange(event) {
+        this.selectedCategoyIds = event.value;
+    }
+    update() {
+        const { name, description, categories } = this.product;
+        const data = {
+            name,
+            description,
+            categories,
+            price: Number(this.price()) * 100,
+            type: this.product.type,
+        };
+        this.productService.update(this.id, data).subscribe({
+            next: (res) => {
+                this.snackBarService.open('保存成功');
+            },
+            error: (e) => {
+                this.snackBarService.open(e.message);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductManageInfoComponent, isStandalone: true, selector: "rolatech-product-manage-info", inputs: { price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { price: "priceChange" }, usesInheritance: true, ngImport: i0, template: "<rolatech-product-manage-content>\n  <rolatech-toolbar title=\"\u57FA\u672C\u4FE1\u606F\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  @if (product) {\n    <div class=\"flex flex-col\">\n      <form #productForm=\"ngForm\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u5546\u54C1\u540D\u79F0 </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"product.name\" name=\"name\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u5546\u54C1\u63CF\u8FF0 </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"product.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" required>\n          <mat-label>\u7C7B\u578B</mat-label>\n          <mat-select\n            name=\"type\"\n            [compareWith]=\"typeCompareFn\"\n            (selectionChange)=\"onTypeChange($event)\"\n            [(ngModel)]=\"product.type\"\n          >\n            @for (key of enumKeys; track key) {\n              <mat-option [value]=\"productType[key]\">\n                {{ productType[key] }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" ngModelGroup=\"categories\" required>\n          <mat-label>\u5206\u7C7B</mat-label>\n          <mat-select\n            multiple\n            name=\"id\"\n            [compareWith]=\"compareFn\"\n            [(ngModel)]=\"product.categories\"\n            #select=\"matSelect\"\n            (selectionChange)=\"onCategoryChange($event)\"\n          >\n            @for (item of categories; track item) {\n              <mat-option [value]=\"item\">\n                {{ item.name }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u4EF7\u683C </mat-label>\n          <input matInput rolatechDecimal type=\"text\" [(ngModel)]=\"price\" name=\"price\" required />\n        </mat-form-field>\n      </form>\n    </div>\n    <div>\n      <button mat-flat-button type=\"primary\" (click)=\"update()\">\u4FDD\u5B58</button>\n    </div>\n  }\n</rolatech-product-manage-content>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ProductManageContentComponent, selector: "rolatech-product-manage-content" }, { kind: "directive", type: DecimalDirective, selector: "[rolatechDecimal]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductManageLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-product-manage-layout', standalone: true, imports: [CommonModule], template: "<p>product-manage-layout works!</p>\n" }]
+            args: [{ selector: 'rolatech-product-manage-info', standalone: true, imports: [
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        TextFieldModule,
+                        MatSelectModule,
+                        MatOptionModule,
+                        MatButtonModule,
+                        ToolbarComponent,
+                        ProductManageContentComponent,
+                        DecimalDirective,
+                        MatSelectModule,
+                    ], template: "<rolatech-product-manage-content>\n  <rolatech-toolbar title=\"\u57FA\u672C\u4FE1\u606F\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  @if (product) {\n    <div class=\"flex flex-col\">\n      <form #productForm=\"ngForm\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u5546\u54C1\u540D\u79F0 </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"product.name\" name=\"name\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u5546\u54C1\u63CF\u8FF0 </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"product.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" required>\n          <mat-label>\u7C7B\u578B</mat-label>\n          <mat-select\n            name=\"type\"\n            [compareWith]=\"typeCompareFn\"\n            (selectionChange)=\"onTypeChange($event)\"\n            [(ngModel)]=\"product.type\"\n          >\n            @for (key of enumKeys; track key) {\n              <mat-option [value]=\"productType[key]\">\n                {{ productType[key] }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\" ngModelGroup=\"categories\" required>\n          <mat-label>\u5206\u7C7B</mat-label>\n          <mat-select\n            multiple\n            name=\"id\"\n            [compareWith]=\"compareFn\"\n            [(ngModel)]=\"product.categories\"\n            #select=\"matSelect\"\n            (selectionChange)=\"onCategoryChange($event)\"\n          >\n            @for (item of categories; track item) {\n              <mat-option [value]=\"item\">\n                {{ item.name }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u4EF7\u683C </mat-label>\n          <input matInput rolatechDecimal type=\"text\" [(ngModel)]=\"price\" name=\"price\" required />\n        </mat-form-field>\n      </form>\n    </div>\n    <div>\n      <button mat-flat-button type=\"primary\" (click)=\"update()\">\u4FDD\u5B58</button>\n    </div>\n  }\n</rolatech-product-manage-content>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
-class ProductManageInfoComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductManageInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ProductManageInfoComponent, isStandalone: true, selector: "lib-product-manage-info", ngImport: i0, template: "<p class=\"text-lg\">product-manage-info works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+class ProductManageSectionsComponent {
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        this.productService = inject(ProductService);
+        this.dialog = inject(MatDialog);
+        this.snackBar = inject(MatSnackBar);
+        this.isLoading = false;
+        this.isUploading = false;
+        this.sections = [];
+        this.status = ProductStatus;
+        this.productType = ProductType;
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+    }
+    ngOnInit() {
+        this.find();
+    }
+    find() {
+        this.productService.findSections(this.id).subscribe({
+            next: (res) => {
+                if (res.data) {
+                    this.sections = res.data;
+                }
+            },
+        });
+    }
+    addSection() {
+        if (!this.sections) {
+            this.sections = [];
+        }
+        this.productService
+            .addSection(this.id, {
+            title: '',
+            description: '',
+            content: '',
+            media: [],
+        })
+            .subscribe({
+            next: (res) => {
+                const section = res.data;
+                this.sections.push({
+                    id: section.id,
+                    title: '',
+                    description: '',
+                    media: [],
+                });
+            },
+            error: (e) => {
+                this.snackBar.open(e.message);
+            },
+        });
+    }
+    onUploadSectionMedia(event) {
+        const section = event.section;
+        const sectionId = section.id;
+        const file = event.data.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                if (!section.media) {
+                    section.media = [];
+                }
+                section.media.push({
+                    url: reader.result,
+                    alt: 'upload image',
+                });
+                section.isUploading = true;
+                const formData = new FormData();
+                formData.append('file', file);
+                this.productService.uploadSectionMedia(sectionId, formData).subscribe({
+                    next: (res) => {
+                        this.isUploading = false;
+                        section.isUploading = false;
+                        delete res.data.productSection;
+                        section.media[section.media.length - 1].id = res.data.id;
+                    },
+                    error: (e) => {
+                        this.isUploading = false;
+                        this.snackBar.open('上传失败: ' + e.message);
+                    },
+                });
+            };
+            reader.onerror = (error) => {
+                this.isUploading = false;
+            };
+        }
+    }
+    onDeleteSectionMedia(event) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: '删除图片',
+                message: `确定删除吗?`,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                const section = event.section;
+                const mediaId = event.media.id;
+                remove(section.media, {
+                    id: mediaId,
+                });
+                this.productService.deleteSectionMedia(section.id, mediaId).subscribe({
+                    next: (res) => {
+                        // remove(section.media, {
+                        //   id: mediaId,
+                        // });
+                    },
+                });
+            }
+        });
+    }
+    onSectionSave(section) {
+        delete section.isUploading;
+        this.productService.updateSection(section.id, section).subscribe({
+            next: (res) => {
+                this.snackBar.open('保存成功');
+            },
+            error: (e) => {
+                this.snackBar.open(e.message);
+            },
+        });
+    }
+    onSectionDelete(section) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: '删除详情',
+                message: '确定删除此详情吗?',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.productService.deleteSection(section.id).subscribe({
+                    next: (res) => {
+                        this.snackBar.open(res.data);
+                        remove(this.sections, {
+                            id: section.id,
+                        });
+                    },
+                    error: (e) => {
+                        this.snackBar.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageSectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductManageSectionsComponent, isStandalone: true, selector: "rolatech-product-manage-sections", ngImport: i0, template: "<rolatech-product-manage-content>\n  <rolatech-toolbar title=\"\u8BE6\u60C5\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (section of sections; track section) {\n        <rolatech-product-manage-section-item\n          [section]=\"section\"\n          (upload)=\"onUploadSectionMedia($event)\"\n          (deleteMedia)=\"onDeleteSectionMedia($event)\"\n          (save)=\"onSectionSave($event)\"\n          (delete)=\"onSectionDelete($event)\"\n          [actions]=\"true\"\n        ></rolatech-product-manage-section-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addSection()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u6DFB\u52A0\u8BE6\u60C5</span>\n    </button>\n  </div>\n</rolatech-product-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: ProductManageSectionItemComponent, selector: "rolatech-product-manage-section-item", inputs: ["isUploading", "section", "actions", "selectMedia"], outputs: ["upload", "delete", "save", "deleteMedia"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ProductManageContentComponent, selector: "rolatech-product-manage-content" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductManageInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageSectionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-product-manage-info', standalone: true, imports: [CommonModule], template: "<p class=\"text-lg\">product-manage-info works!</p>\n" }]
+            args: [{ selector: 'rolatech-product-manage-sections', standalone: true, imports: [ProductManageSectionItemComponent, MatButtonModule, MatIconModule, ToolbarComponent, ProductManageContentComponent], template: "<rolatech-product-manage-content>\n  <rolatech-toolbar title=\"\u8BE6\u60C5\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    <div>\n      @for (section of sections; track section) {\n        <rolatech-product-manage-section-item\n          [section]=\"section\"\n          (upload)=\"onUploadSectionMedia($event)\"\n          (deleteMedia)=\"onDeleteSectionMedia($event)\"\n          (save)=\"onSectionSave($event)\"\n          (delete)=\"onSectionDelete($event)\"\n          [actions]=\"true\"\n        ></rolatech-product-manage-section-item>\n      }\n    </div>\n    <button mat-stroked-button (click)=\"addSection()\" class=\"mt-3\">\n      <mat-icon>add</mat-icon>\n      <span>\u6DFB\u52A0\u8BE6\u60C5</span>\n    </button>\n  </div>\n</rolatech-product-manage-content>\n" }]
+        }], ctorParameters: () => [] });
+
+const SIZE = 10 * 1024 * 1024; // file slice size 10MB
+class ProductManageMediaComponent {
+    // productType: any = ProductType;
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        this.productService = inject(ProductService);
+        this.dialog = inject(MatDialog);
+        this.snackBar = inject(MatSnackBar);
+        this.isUploading = false;
+        this.isLoading = false;
+        this.media = [];
+        this.status = ProductStatus;
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+    }
+    ngOnInit() {
+        this.find();
+    }
+    find() {
+        this.productService.get(this.id).subscribe({
+            next: (res) => {
+                this.media = res.data.media || [];
+            },
+        });
+    }
+    onImageClick(i) {
+        const dialogRef = this.dialog.open(ImagePreviewDialogComponent, {
+            maxWidth: '80vw',
+            maxHeight: '80vh',
+            height: '80%',
+            width: '80%',
+            panelClass: 'full-screen-modal',
+            data: {
+                media: this.media,
+                selected: i,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => { });
+    }
+    createFileChunk(file, size = SIZE) {
+        const fileChunkList = [];
+        let cur = 0;
+        while (cur < file.size) {
+            fileChunkList.push({ file: file.slice(cur, cur + size) });
+            cur += size;
+        }
+        return fileChunkList;
+    }
+    onUploadMedia2(event) {
+        const file = event.target.files[0];
+        const reader = new FileReader();
+        reader.onload = (e) => { };
+        const fileChunkList = this.createFileChunk(file);
+        fileChunkList.forEach((item) => { });
+    }
+    onUploadMedia(event) {
+        const file = event.target.files[0];
+        // 5MB * 1024 * 1024 = 5242880
+        // if (file?.size > 5242880) {
+        //   this.snackBar.open('尺寸过大, 请修改后上传');
+        //   this.isUploading = false;
+        //   return;
+        // }
+        if (file) {
+            const reader = new FileReader();
+            const formData = new FormData();
+            formData.append('file', file);
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                const img = new Image();
+                img.onload = () => {
+                    this.media.push({
+                        url: img.src,
+                        alt: 'upload image',
+                        width: img.width,
+                        height: img.height,
+                    });
+                    this.isUploading = true;
+                };
+                img.src = reader.result; // This is the data URL
+            };
+            this.productService.uploadMedia(this.id, formData).subscribe({
+                next: (res) => {
+                    this.isUploading = false;
+                    const index = findLastIndex(this.media);
+                    // Replace item at index using native splice
+                    this.media.splice(index, 1, res.data);
+                },
+                error: (e) => {
+                    this.isUploading = false;
+                    this.snackBar.open('上传失败: ' + e.message);
+                },
+            });
+            reader.onerror = (error) => {
+                this.isUploading = false;
+            };
+        }
+    }
+    onMediaDelete(item) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: '删除图片',
+                message: '确定删除这张商品图片吗?',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.productService.deleteMedia(this.id, item.id).subscribe({
+                    next: (res) => {
+                        this.media = this.media.filter((m) => m.id !== item.id);
+                        this.snackBar.open('删除成功');
+                    },
+                    error: (e) => {
+                        this.snackBar.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductManageMediaComponent, isStandalone: true, selector: "rolatech-product-manage-media", ngImport: i0, template: "<rolatech-product-manage-content>\n  <rolatech-toolbar title=\"\u56FE\u7247\u4FE1\u606F\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    <p>*\u56FE\u7247\u6587\u4EF6\u5927\u5C0F\u9650\u5236\u57285MB\u4EE5\u4E0B*</p>\n    <rolatech-media-list (upload)=\"onUploadMedia($event)\" [isUploading]=\"isUploading\">\n      @for (item of media; track item; let i = $index) {\n        <rolatech-media-list-item\n          [media]=\"item\"\n          (mediaItemClick)=\"onImageClick(i)\"\n          (deleteMedia)=\"onMediaDelete(item)\"\n        ></rolatech-media-list-item>\n      }\n    </rolatech-media-list>\n  </div>\n</rolatech-product-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: MediaListComponent, selector: "rolatech-media-list", inputs: ["isUploading", "media", "showAdd"], outputs: ["mediaItemClick", "upload"] }, { kind: "component", type: MediaListItemComponent, selector: "rolatech-media-list-item", inputs: ["media", "uploadProgress"], outputs: ["mediaItemClick", "deleteMedia"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ProductManageContentComponent, selector: "rolatech-product-manage-content" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageMediaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-manage-media', standalone: true, imports: [MediaListComponent, MediaListItemComponent, ToolbarComponent, ProductManageContentComponent], template: "<rolatech-product-manage-content>\n  <rolatech-toolbar title=\"\u56FE\u7247\u4FE1\u606F\" class=\"hidden md:block\" divider></rolatech-toolbar>\n  <div>\n    <p>*\u56FE\u7247\u6587\u4EF6\u5927\u5C0F\u9650\u5236\u57285MB\u4EE5\u4E0B*</p>\n    <rolatech-media-list (upload)=\"onUploadMedia($event)\" [isUploading]=\"isUploading\">\n      @for (item of media; track item; let i = $index) {\n        <rolatech-media-list-item\n          [media]=\"item\"\n          (mediaItemClick)=\"onImageClick(i)\"\n          (deleteMedia)=\"onMediaDelete(item)\"\n        ></rolatech-media-list-item>\n      }\n    </rolatech-media-list>\n  </div>\n</rolatech-product-manage-content>\n" }]
+        }], ctorParameters: () => [] });
+
+class ProductManagePricingComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManagePricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductManagePricingComponent, isStandalone: true, selector: "rolatech-product-manage-pricing", ngImport: i0, template: "<p>product-manage-pricing works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManagePricingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-manage-pricing', standalone: true, imports: [CommonModule], template: "<p>product-manage-pricing works!</p>\n" }]
         }] });
 
-class ProductManageDetailsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductManageDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ProductManageDetailsComponent, isStandalone: true, selector: "lib-product-manage-details", ngImport: i0, template: "<p>product-manage-details works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+class ProductManageItemComponent {
+    constructor() {
+        this.product = input.required();
+        this.thumbnail = input();
+        this.status = ProductStatus;
+    }
+    publish() { }
+    archived() { }
+    delete() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductManageItemComponent, isStandalone: true, selector: "rolatech-product-manage-item", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex p-3 items-center hover:bg-[--rt-raised-background] cursor-pointer\">\n  <div>\n    @if (product().media) {\n      <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n        @defer (on viewport()) {\n          <rolatech-thumbnail [src]=\"product().media[0].url + '!w400'\" size=\"medium\"> </rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-gray-200 h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n    } @else {\n      <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n        <rolatech-image-placeholder></rolatech-image-placeholder>\n      </div>\n    }\n  </div>\n  <div class=\"px-3\">\n    {{ product().name }}\n  </div>\n  <div class=\"px-3\">\n    {{ status[product().status] }}\n  </div>\n  <div class=\"px-3\">\n    {{ product().price }}\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"pr-4\">\n    <button\n      mat-icon-button\n      [matMenuTriggerFor]=\"menu\"\n      aria-label=\"Example icon-button with a menu\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n      @if (product().status === 'DRAFT') {\n        <button mat-menu-item (click)=\"publish()\">\n          <span> \u4E0A\u67B6 </span>\n        </button>\n      }\n      @if (product().status === 'STARTED') {\n        <button mat-menu-item (click)=\"archived()\">\n          <span> \u7ED3\u675F </span>\n        </button>\n      }\n      @if (product().status !== 'ACTIVE') {\n        <button mat-menu-item (click)=\"delete()\">\n          <span> \u5220\u9664 </span>\n        </button>\n      }\n    </mat-menu>\n  </div>\n</div>\n<div class=\"h-[1px] px-3 bg-[--rt-raised-background]\"></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ImagePlaceholderComponent, selector: "rolatech-image-placeholder" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [ThumbnailComponent]] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductManageDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-product-manage-details', standalone: true, imports: [CommonModule], template: "<p>product-manage-details works!</p>\n" }]
+            args: [{ selector: 'rolatech-product-manage-item', standalone: true, imports: [CommonModule, ThumbnailComponent, ImagePlaceholderComponent, MatButtonModule, MatMenuModule, MatIcon], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex p-3 items-center hover:bg-[--rt-raised-background] cursor-pointer\">\n  <div>\n    @if (product().media) {\n      <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n        @defer (on viewport()) {\n          <rolatech-thumbnail [src]=\"product().media[0].url + '!w400'\" size=\"medium\"> </rolatech-thumbnail>\n        } @placeholder {\n          <div class=\"bg-gray-200 h-full w-full object-cover aspect-video rounded-lg\"></div>\n        }\n      </div>\n    } @else {\n      <div class=\"min-w-24 w-36 object-cover aspect-video rounded-lg mr-3\">\n        <rolatech-image-placeholder></rolatech-image-placeholder>\n      </div>\n    }\n  </div>\n  <div class=\"px-3\">\n    {{ product().name }}\n  </div>\n  <div class=\"px-3\">\n    {{ status[product().status] }}\n  </div>\n  <div class=\"px-3\">\n    {{ product().price }}\n  </div>\n  <div class=\"flex-1\"></div>\n  <div class=\"pr-4\">\n    <button\n      mat-icon-button\n      [matMenuTriggerFor]=\"menu\"\n      aria-label=\"Example icon-button with a menu\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n      @if (product().status === 'DRAFT') {\n        <button mat-menu-item (click)=\"publish()\">\n          <span> \u4E0A\u67B6 </span>\n        </button>\n      }\n      @if (product().status === 'STARTED') {\n        <button mat-menu-item (click)=\"archived()\">\n          <span> \u7ED3\u675F </span>\n        </button>\n      }\n      @if (product().status !== 'ACTIVE') {\n        <button mat-menu-item (click)=\"delete()\">\n          <span> \u5220\u9664 </span>\n        </button>\n      }\n    </mat-menu>\n  </div>\n</div>\n<div class=\"h-[1px] px-3 bg-[--rt-raised-background]\"></div>\n" }]
         }] });
 
-class ProductManageMediaComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductManageMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ProductManageMediaComponent, isStandalone: true, selector: "lib-product-manage-media", ngImport: i0, template: "<p>product-manage-media works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+class ProductManageItemHeaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageItemHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductManageItemHeaderComponent, isStandalone: true, selector: "rolatech-product-manage-item-header", ngImport: i0, template: "<div class=\"flex h-11 items-center\">\n  <div class=\"w-36 mr-3 px-3 min-w-[320px]\">\u5546\u54C1</div>\n  <div class=\"text-md font-bold px-3\">Status</div>\n  <div class=\"flex-1\"></div>\n  <div class=\"text-md px-3\"></div>\n</div>\n<div class=\"h-[1px] px-3 bg-[--rt-raised-background]\"></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductManageMediaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageItemHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-product-manage-media', standalone: true, imports: [CommonModule], template: "<p>product-manage-media works!</p>\n" }]
+            args: [{ selector: 'rolatech-product-manage-item-header', standalone: true, imports: [CommonModule], template: "<div class=\"flex h-11 items-center\">\n  <div class=\"w-36 mr-3 px-3 min-w-[320px]\">\u5546\u54C1</div>\n  <div class=\"text-md font-bold px-3\">Status</div>\n  <div class=\"flex-1\"></div>\n  <div class=\"text-md px-3\"></div>\n</div>\n<div class=\"h-[1px] px-3 bg-[--rt-raised-background]\"></div>\n" }]
         }] });
 
-class ProductManagePricingComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductManagePricingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ProductManagePricingComponent, isStandalone: true, selector: "lib-product-manage-pricing", ngImport: i0, template: "<p>product-manage-pricing works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+class ProductManageIndexComponent {
+    constructor() {
+        this.paginator = viewChild(MatPaginator);
+        this.dialog = inject(MatDialog);
+        this.snackBar = inject(MatSnackBar);
+        this.productService = inject(ProductService);
+        this.isLoading = false;
+        this.isSearch = false;
+        this.length = 100;
+        this.pageSize = 15;
+        this.pageSizeOptions = [5, 10, 25, 100];
+        this.dataSource = new MatTableDataSource();
+        this.products = [];
+        this.displayedColumns = ['name', 'status', 'createdAt', 'actions'];
+        this.orderOptions = [
+            {
+                key: 'createdAt',
+                value: '创建时间',
+                icon: 'arrow_upward',
+                sort: 'asc',
+            },
+            {
+                key: 'createdAt',
+                value: '创建时间',
+                icon: 'arrow_downward',
+                sort: 'desc',
+            },
+            {
+                key: 'status',
+                value: '状态',
+                icon: 'arrow_upward',
+                sort: 'asc',
+            },
+            {
+                key: 'status',
+                value: '状态',
+                icon: 'arrow_downward',
+                sort: 'desc',
+            },
+        ];
+        this.status = ProductStatus;
+        this.orderString = 'createdAt desc';
+    }
+    ngOnInit() {
+        this.find(null);
+    }
+    find(event) {
+        this.isLoading = true;
+        const page = event ? event.pageIndex + 1 : 1;
+        const limit = event ? event.pageSize : 15;
+        const sort = this.orderString;
+        const options = {
+            page,
+            limit,
+            sort,
+        };
+        this.productService.me(options).subscribe({
+            next: (res) => {
+                this.products = res.data;
+                // this.dataSource.data = this.products;
+                this.length = res.meta.pagination.count;
+                this.isLoading = false;
+            },
+            error: (e) => {
+                this.isLoading = false;
+                this.snackBar.open(e.message);
+            },
+        });
+    }
+    archived(product) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: '商品下架',
+                message: `确定下架 ${product.name} 吗?`,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.productService.archived(product.id).subscribe({
+                    next: (res) => {
+                        const index = this.products.findIndex((item) => item.id === product.id);
+                        const status = ProductStatus[ProductStatus.ARCHIVED];
+                        this.products[index].status = status;
+                        this.snackBar.open('结束成功');
+                    },
+                    error: (e) => {
+                        this.snackBar.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    delete(product) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: '删除商品',
+                message: `确定删除 ${product.name} 吗?`,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.productService.delete(product.id).subscribe({
+                    next: (res) => {
+                        const index = this.products.findIndex((item) => item.id === product.id);
+                        this.products.splice(index, 1);
+                        this.dataSource.data = this.products;
+                        this.length--;
+                        this.snackBar.open('删除成功');
+                    },
+                    error: (e) => {
+                        this.snackBar.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageIndexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductManageIndexComponent, isStandalone: true, selector: "rolatech-product-manage-index", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<rolatech-toolbar title=\"\u5546\u54C1\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      \u521B\u5EFA\u5546\u54C1\n    </button>\n  </div>\n</rolatech-toolbar>\n@if (isLoading) {\n  <div class=\"flex justify-center items-center\">\n    <rolatech-spinner></rolatech-spinner>\n  </div>\n} @else {\n  <rolatech-product-manage-item-header></rolatech-product-manage-item-header>\n  @for (item of products; track $index) {\n    <rolatech-product-manage-item\n      [product]=\"item\"\n      routerLink=\"/products/{{ item.id }}/manage/info\"\n    ></rolatech-product-manage-item>\n  }\n  <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator>\n}\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "component", type: ProductManageItemComponent, selector: "rolatech-product-manage-item", inputs: ["product", "thumbnail"] }, { kind: "component", type: ProductManageItemHeaderComponent, selector: "rolatech-product-manage-item-header" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageIndexComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-manage-index', standalone: true, imports: [
+                        MatButtonModule,
+                        RouterLink,
+                        MatIconModule,
+                        MatTableModule,
+                        MatMenuModule,
+                        MatPaginatorModule,
+                        ToolbarComponent,
+                        SpinnerComponent,
+                        ProductManageItemComponent,
+                        ProductManageItemHeaderComponent,
+                    ], template: "<rolatech-toolbar title=\"\u5546\u54C1\">\n  <div class=\"flex items-center gap-2\">\n    <button mat-button routerLink=\"./create\">\n      <mat-icon>add</mat-icon>\n      \u521B\u5EFA\u5546\u54C1\n    </button>\n  </div>\n</rolatech-toolbar>\n@if (isLoading) {\n  <div class=\"flex justify-center items-center\">\n    <rolatech-spinner></rolatech-spinner>\n  </div>\n} @else {\n  <rolatech-product-manage-item-header></rolatech-product-manage-item-header>\n  @for (item of products; track $index) {\n    <rolatech-product-manage-item\n      [product]=\"item\"\n      routerLink=\"/products/{{ item.id }}/manage/info\"\n    ></rolatech-product-manage-item>\n  }\n  <mat-paginator\n    #paginator\n    [length]=\"length\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"pageEvent = find($event)\"\n    hidePageSize\n    showFirstLastButtons\n  >\n  </mat-paginator>\n}\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;max-width:64px;font-size:.8rem;padding:0 8px}.mat-mdc-header-cell.actions{text-align:right;max-width:64px;width:64px}.mat-mdc-cell:nth-last-child(2),.mat-mdc-header-cell:nth-last-child(2),.mat-mdc-footer-cell:nth-last-child(2){text-align:right;max-width:180px;width:180px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}\n"] }]
+        }] });
+
+class ProductManageCreateComponent {
+    constructor() {
+        this.productService = inject(ProductService);
+        this.router = inject(Router);
+        this.route = inject(ActivatedRoute);
+        this.snackBar = inject(MatSnackBar);
+        this.product = {};
+    }
+    create() {
+        const data = {
+            ...this.product,
+            // classroom: this.selectedClassroom,
+        };
+        this.productService.create(data).subscribe({
+            next: (res) => {
+                this.router.navigate([`../${res.data.id}/manage/info`], {
+                    relativeTo: this.route,
+                });
+            },
+            error: (e) => {
+                this.snackBar.open(e.message);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductManageCreateComponent, isStandalone: true, selector: "rolatech-product-manage-create", ngImport: i0, template: "<rolatech-toolbar title=\"\u521B\u5EFA\u5546\u54C1\" link=\"../\"> </rolatech-toolbar>\n<div class=\"p-3\">\n  <section>\n    <form #productForm=\"ngForm\">\n      <div class=\"flex flex-col\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u5546\u54C1\u540D\u79F0 </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"product.name\" name=\"name\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u5546\u54C1\u63CF\u8FF0 </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"product.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n      </div>\n    </form>\n  </section>\n  <div class=\"mt-3\">\n    <button mat-flat-button [disabled]=\"!productForm.valid\" class=\"w-28\" (click)=\"create()\">\u521B\u5EFA</button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageCreateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-manage-create', standalone: true, imports: [
+                        ToolbarComponent,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        TextFieldModule,
+                        MatSelectModule,
+                        MatOptionModule,
+                        MediaListComponent,
+                        MediaListItemComponent,
+                        MatButtonModule,
+                    ], template: "<rolatech-toolbar title=\"\u521B\u5EFA\u5546\u54C1\" link=\"../\"> </rolatech-toolbar>\n<div class=\"p-3\">\n  <section>\n    <form #productForm=\"ngForm\">\n      <div class=\"flex flex-col\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u5546\u54C1\u540D\u79F0 </mat-label>\n          <input matInput type=\"text\" [(ngModel)]=\"product.name\" name=\"name\" required />\n        </mat-form-field>\n        <mat-form-field appearance=\"fill\">\n          <mat-label> \u5546\u54C1\u63CF\u8FF0 </mat-label>\n          <textarea\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"product.description\"\n            name=\"description\"\n            required\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"3\"\n          ></textarea>\n        </mat-form-field>\n      </div>\n    </form>\n  </section>\n  <div class=\"mt-3\">\n    <button mat-flat-button [disabled]=\"!productForm.valid\" class=\"w-28\" (click)=\"create()\">\u521B\u5EFA</button>\n  </div>\n</div>\n" }]
+        }] });
+
+class ProductManageOptionsComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.productService = inject(ProductService);
+        this.options = [];
+        this.add = false;
+    }
+    ngOnInit() {
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+        this.find();
+    }
+    find() {
+        this.productService.findOptions(this.id).subscribe({
+            next: (res) => {
+                this.options = res.data || [];
+            },
+        });
+    }
+    saveOption(option) {
+        this.productService.addOption(this.id, option).subscribe({
+            next: (res) => {
+                this.options.push(res.data);
+                this.add = false;
+            },
+        });
+    }
+    onUpdateOption(option) {
+        const options = {
+            title: '编辑选项',
+            cancelText: '取消',
+            confirmText: '确认',
+            data: {
+                option: option,
+                action: false,
+            },
+            component: ProductManageOptionAddComponent,
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (res) => {
+                if (res) {
+                    this.productService.updateOption(option.id, res).subscribe({
+                        next: (res) => {
+                            option.values = res.data.values;
+                        },
+                    });
+                }
+            },
+        });
+    }
+    onDeleteOption(option) {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '400px',
+            data: {
+                title: '删除选项',
+                message: `确定删除 ${option.name} 吗?`,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.productService.deleteOption(option.id).subscribe({
+                    next: (res) => {
+                        const index = this.options.findIndex((item) => item.id === option.id);
+                        this.options.splice(index, 1);
+                        this.snackBarService.open('删除成功');
+                    },
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageOptionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductManageOptionsComponent, isStandalone: true, selector: "rolatech-product-manage-options", usesInheritance: true, ngImport: i0, template: "<rolatech-product-manage-content>\n  <rolatech-toolbar title=\"\u9009\u9879\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    @for (item of options; track $index) {\n      <rolatech-product-manage-option-item\n        [option]=\"item\"\n        (delete)=\"onDeleteOption($event)\"\n        (edit)=\"onUpdateOption($event)\"\n      ></rolatech-product-manage-option-item>\n    }\n    <div class=\"mt-3\">\n      @if (add) {\n        <rolatech-product-manage-option-add\n          (save)=\"saveOption($event)\"\n          (cancel)=\"add = false\"\n        ></rolatech-product-manage-option-add>\n      } @else {\n        <button mat-stroked-button (click)=\"add = true\">\n          <mat-icon>add</mat-icon>\n          <span>\u589E\u52A0</span>\n        </button>\n      }\n    </div>\n  </div>\n</rolatech-product-manage-content>\n", styles: [""], dependencies: [{ kind: "component", type: ProductManageContentComponent, selector: "rolatech-product-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ProductManageOptionItemComponent, selector: "rolatech-product-manage-option-item", inputs: ["option"], outputs: ["delete", "save", "edit"] }, { kind: "component", type: ProductManageOptionAddComponent, selector: "rolatech-product-manage-option-add", outputs: ["cancel", "save", "output"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductManagePricingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-product-manage-pricing', standalone: true, imports: [CommonModule], template: "<p>product-manage-pricing works!</p>\n" }]
+            args: [{ selector: 'rolatech-product-manage-options', standalone: true, imports: [
+                        ProductManageContentComponent,
+                        ToolbarComponent,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        AngularCommonModule,
+                        AngularComponentsModule,
+                        MatIconModule,
+                        AccordionComponent,
+                        PanelComponent,
+                        ProductManageOptionItemComponent,
+                        ProductManageOptionAddComponent,
+                    ], template: "<rolatech-product-manage-content>\n  <rolatech-toolbar title=\"\u9009\u9879\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div>\n    @for (item of options; track $index) {\n      <rolatech-product-manage-option-item\n        [option]=\"item\"\n        (delete)=\"onDeleteOption($event)\"\n        (edit)=\"onUpdateOption($event)\"\n      ></rolatech-product-manage-option-item>\n    }\n    <div class=\"mt-3\">\n      @if (add) {\n        <rolatech-product-manage-option-add\n          (save)=\"saveOption($event)\"\n          (cancel)=\"add = false\"\n        ></rolatech-product-manage-option-add>\n      } @else {\n        <button mat-stroked-button (click)=\"add = true\">\n          <mat-icon>add</mat-icon>\n          <span>\u589E\u52A0</span>\n        </button>\n      }\n    </div>\n  </div>\n</rolatech-product-manage-content>\n" }]
+        }] });
+
+class ProductManageVariantComponent {
+    constructor() {
+        this.dialog = inject(MatDialog);
+        this.variant = model.required();
+        this.expanded = false;
+        this.upload = output();
+        this.variantStatus = ProductInventoryStatus;
+        this.enumKeys = Object.keys(this.variantStatus).filter((key) => isNaN(Number(key)));
+    }
+    onUpload(event) {
+        const file = event.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            const formData = new FormData();
+            formData.append('file', file);
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                const img = new Image();
+                img.onload = () => {
+                    this.variant.update((item) => {
+                        item.media = item.media ? item.media : [];
+                        item.media.push({
+                            url: img.src,
+                            alt: 'upload image',
+                            uploading: true,
+                        });
+                        return item;
+                    });
+                };
+                img.src = reader.result;
+                this.upload.emit(formData);
+            };
+            reader.onerror = (error) => { };
+        }
+    }
+    onMediaClick(i) {
+        const dialogRef = this.dialog.open(ImagePreviewDialogComponent, {
+            maxWidth: '80vw',
+            maxHeight: '80vh',
+            height: '80%',
+            width: '80%',
+            panelClass: 'full-screen-modal',
+            data: {
+                media: this.variant().media,
+                selected: i,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => { });
+    }
+    statusCompareFn(t1, t2) {
+        return t1 === ProductInventoryStatus[t2];
+    }
+    onStatusChange(event) {
+        this.variant.update((item) => {
+            item.status = Object.keys(this.variantStatus).find((key) => this.variantStatus[key] === event.value);
+            return item;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageVariantComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductManageVariantComponent, isStandalone: true, selector: "rolatech-product-manage-variant", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { variant: "variantChange", upload: "upload" }, ngImport: i0, template: "<div class=\"flex items-center h-[72px] cursor-pointer px-2\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n  <div>{{ variant().options | options }}</div>\n  <div class=\"flex-1\"></div>\n  <div class=\"px-3 dense-2\" (click)=\"$event.stopPropagation()\">\n    <!-- <input [(ngModel)]=\"variant().price\" /> -->\n    <mat-form-field subscriptSizing=\"dynamic\">\n      <input matInput [(ngModel)]=\"variant().price\" />\n    </mat-form-field>\n  </div>\n  <div class=\"px-3\">\n    <mat-form-field class=\"dense-2\" (click)=\"$event.stopPropagation()\" subscriptSizing=\"dynamic\">\n      <mat-select\n        name=\"type\"\n        [compareWith]=\"statusCompareFn\"\n        (selectionChange)=\"onStatusChange($event)\"\n        [(ngModel)]=\"variant().status\"\n      >\n        @for (key of enumKeys; track key) {\n          <mat-option [value]=\"variantStatus[key]\">\n            {{ variantStatus[key] }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div class=\"block w-20 text-right\">\n    <button mat-icon-button aria-label=\"expand row\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n      @if (expanded) {\n        <mat-icon>keyboard_arrow_up</mat-icon>\n      } @else {\n        <mat-icon>keyboard_arrow_down</mat-icon>\n      }\n    </button>\n  </div>\n</div>\n<div>\n  <div class=\"flex flex-col gap-3 w-full overflow-hidden\" [@detailExpand]=\"expanded ? 'expanded' : 'collapsed'\">\n    <div class=\"flex flex-col my-3 md:w-1/2\">\n      <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n        <span matTextPrefix> \u00A5 &nbsp;</span>\n        <input matInput rolatechDecimal type=\"text\" [(ngModel)]=\"variant().price\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n        <mat-label>\u5E93\u5B58</mat-label>\n        <input matInput type=\"text\" [(ngModel)]=\"variant().price\" />\n      </mat-form-field>\n    </div>\n    <div class=\"flex flex-col items-start my-3 md:w-1/2\">\n      <div class=\"flex flex-wrap\">\n        @for (media of variant().media; track $index) {\n          <div class=\"media-list-item\">\n            <div class=\"inner-media\">\n              @defer (on viewport()) {\n                <img (click)=\"onMediaClick($index)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n              } @placeholder {\n                <div class=\"bg-gray-200 h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n              @if (media.uploading) {\n                <div class=\"absolute flex items-center justify-center p-4 w-full h-full bg-[--rt-20-percent-layer]\">\n                  <mat-spinner></mat-spinner>\n                  <!--\n                  <svg\n                    viewBox=\"0 0 24 24\"\n                    preserveAspectRatio=\"xMidYMid meet\"\n                    focusable=\"false\"\n                    class=\"style-scope tp-yt-iron-icon\"\n                    style=\"pointer-events: none; display: block; width: 100%; height: 100%\"\n                  >\n                    <g class=\"style-scope tp-yt-iron-icon\">\n                      <path\n                        d=\"M17,18v1H6V18ZM6.49,9l.71.71L11,5.91V16h1V5.91l3.8,3.81L16.51,9l-5-5Z\"\n                        class=\"style-scope tp-yt-iron-icon\"\n                      ></path>\n                    </g>\n                  </svg>\n                  <span>Uploading\u2026</span> -->\n                </div>\n              }\n            </div>\n          </div>\n        }\n        <div class=\"media-list-item\">\n          <div class=\"inner-media\" (click)=\"fileInput.click()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n              <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n            </svg>\n          </div>\n        </div>\n        <input style=\"display: none\" type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" #fileInput />\n      </div>\n    </div>\n  </div>\n</div>\n<mat-divider></mat-divider>\n", styles: [".media-list-item{cursor:pointer;position:relative;padding:2px}.inner-media{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:4px;border:1px solid grey;position:relative;cursor:pointer;overflow:hidden}mat-form-field{width:160px}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "pipe", type: OptionsFormatPipe, name: "options" }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: DecimalDirective, selector: "[rolatechDecimal]" }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatSelectModule }], animations: [
+            trigger('detailExpand', [
+                state('collapsed', style({ height: '0px' })),
+                state('expanded', style({ height: '*' })),
+                transition('expanded <=> collapsed', animate('220ms cubic-bezier(0.25, 0.1, 0.25, 1)')),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageVariantComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-manage-variant', standalone: true, imports: [
+                        AngularCommonModule,
+                        AngularComponentsModule,
+                        OptionsFormatPipe,
+                        ProductManageContentComponent,
+                        ToolbarComponent,
+                        MatTableModule,
+                        MatIcon,
+                        MatFormFieldModule,
+                        ThumbnailComponent,
+                        ImageComponent,
+                        DecimalDirective,
+                        MatProgressBarModule,
+                        MatSelectModule,
+                    ], animations: [
+                        trigger('detailExpand', [
+                            state('collapsed', style({ height: '0px' })),
+                            state('expanded', style({ height: '*' })),
+                            transition('expanded <=> collapsed', animate('220ms cubic-bezier(0.25, 0.1, 0.25, 1)')),
+                        ]),
+                    ], template: "<div class=\"flex items-center h-[72px] cursor-pointer px-2\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n  <div>{{ variant().options | options }}</div>\n  <div class=\"flex-1\"></div>\n  <div class=\"px-3 dense-2\" (click)=\"$event.stopPropagation()\">\n    <!-- <input [(ngModel)]=\"variant().price\" /> -->\n    <mat-form-field subscriptSizing=\"dynamic\">\n      <input matInput [(ngModel)]=\"variant().price\" />\n    </mat-form-field>\n  </div>\n  <div class=\"px-3\">\n    <mat-form-field class=\"dense-2\" (click)=\"$event.stopPropagation()\" subscriptSizing=\"dynamic\">\n      <mat-select\n        name=\"type\"\n        [compareWith]=\"statusCompareFn\"\n        (selectionChange)=\"onStatusChange($event)\"\n        [(ngModel)]=\"variant().status\"\n      >\n        @for (key of enumKeys; track key) {\n          <mat-option [value]=\"variantStatus[key]\">\n            {{ variantStatus[key] }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div class=\"block w-20 text-right\">\n    <button mat-icon-button aria-label=\"expand row\" (click)=\"expanded = !expanded; $event.stopPropagation()\">\n      @if (expanded) {\n        <mat-icon>keyboard_arrow_up</mat-icon>\n      } @else {\n        <mat-icon>keyboard_arrow_down</mat-icon>\n      }\n    </button>\n  </div>\n</div>\n<div>\n  <div class=\"flex flex-col gap-3 w-full overflow-hidden\" [@detailExpand]=\"expanded ? 'expanded' : 'collapsed'\">\n    <div class=\"flex flex-col my-3 md:w-1/2\">\n      <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n        <span matTextPrefix> \u00A5 &nbsp;</span>\n        <input matInput rolatechDecimal type=\"text\" [(ngModel)]=\"variant().price\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n        <mat-label>\u5E93\u5B58</mat-label>\n        <input matInput type=\"text\" [(ngModel)]=\"variant().price\" />\n      </mat-form-field>\n    </div>\n    <div class=\"flex flex-col items-start my-3 md:w-1/2\">\n      <div class=\"flex flex-wrap\">\n        @for (media of variant().media; track $index) {\n          <div class=\"media-list-item\">\n            <div class=\"inner-media\">\n              @defer (on viewport()) {\n                <img (click)=\"onMediaClick($index)\" [src]=\"media.url\" [alt]=\"media.alt\" />\n              } @placeholder {\n                <div class=\"bg-gray-200 h-full w-full object-cover aspect-video rounded-lg\"></div>\n              }\n              @if (media.uploading) {\n                <div class=\"absolute flex items-center justify-center p-4 w-full h-full bg-[--rt-20-percent-layer]\">\n                  <mat-spinner></mat-spinner>\n                  <!--\n                  <svg\n                    viewBox=\"0 0 24 24\"\n                    preserveAspectRatio=\"xMidYMid meet\"\n                    focusable=\"false\"\n                    class=\"style-scope tp-yt-iron-icon\"\n                    style=\"pointer-events: none; display: block; width: 100%; height: 100%\"\n                  >\n                    <g class=\"style-scope tp-yt-iron-icon\">\n                      <path\n                        d=\"M17,18v1H6V18ZM6.49,9l.71.71L11,5.91V16h1V5.91l3.8,3.81L16.51,9l-5-5Z\"\n                        class=\"style-scope tp-yt-iron-icon\"\n                      ></path>\n                    </g>\n                  </svg>\n                  <span>Uploading\u2026</span> -->\n                </div>\n              }\n            </div>\n          </div>\n        }\n        <div class=\"media-list-item\">\n          <div class=\"inner-media\" (click)=\"fileInput.click()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"48px\" viewBox=\"0 -960 960 960\" width=\"48px\" fill=\"#5f6368\">\n              <path d=\"M444-444H240v-72h204v-204h72v204h204v72H516v204h-72v-204Z\" />\n            </svg>\n          </div>\n        </div>\n        <input style=\"display: none\" type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" #fileInput />\n      </div>\n    </div>\n  </div>\n</div>\n<mat-divider></mat-divider>\n", styles: [".media-list-item{cursor:pointer;position:relative;padding:2px}.inner-media{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:4px;border:1px solid grey;position:relative;cursor:pointer;overflow:hidden}mat-form-field{width:160px}\n"] }]
+        }] });
+
+class ProductManageVariantsComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.productService = inject(ProductService);
+        this.changeDetectorRefs = inject(ChangeDetectorRef);
+        this.options = signal([]);
+        this.snackBar = inject(MatSnackBar);
+        this.productPrice = model();
+        this.variantPriceChecked = false;
+        this.loading = false;
+    }
+    ngOnInit() {
+        this.id = this.route.parent?.snapshot.paramMap.get('id');
+        this.getProduct();
+    }
+    onVariantSlideToggle(event) {
+        const newState = event.checked;
+        if (newState) {
+            this.productService.updateVariantPrice(this.id, true).subscribe({
+                next: (res) => {
+                    this.variants = res.data;
+                    this.variantPriceChecked = newState;
+                },
+            });
+        }
+        else {
+            const options = {
+                title: '确认删除吗',
+                message: '删除这个章节吗?',
+                cancelText: '取消',
+                confirmText: '确认',
+            };
+            this.dialogService.open(options);
+            this.dialogService.confirmed().subscribe({
+                next: (res) => {
+                    if (res) {
+                        this.productService.updateVariantPrice(this.id, false).subscribe({
+                            next: (res) => {
+                                this.variantPriceChecked = false;
+                                this.variants = res.data;
+                            },
+                        });
+                    }
+                    else {
+                        event.source.checked = !newState;
+                    }
+                },
+            });
+        }
+    }
+    onInventorySlideToggle(e) {
+        if (e.checked) {
+        }
+    }
+    saveVariants() {
+        this.productService.updateVariants(this.id, this.variants).subscribe({
+            next: (res) => {
+                this.snackBarService.open('保存成功');
+            },
+            error: (error) => {
+                this.snackBarService.open(error.message);
+            },
+        });
+    }
+    onUpload(variant, data) {
+        this.productService.uploadVariantMedia(variant.id, data).subscribe({
+            next: (res) => {
+                variant.media[variant.media.length - 1] = {
+                    id: res.data.id,
+                    url: res.data.url + '!w200',
+                    uploading: false,
+                };
+            },
+            error: (e) => {
+                this.snackBar.open('上传失败: ' + e.message);
+            },
+        });
+    }
+    findVariants() {
+        this.productService.findVariants(this.id).subscribe({
+            next: (res) => {
+                if (res.data) {
+                    this.variantPriceChecked = true;
+                }
+                this.variants = res.data;
+            },
+        });
+    }
+    getProduct() {
+        this.loading = true;
+        this.productService.get(this.id).subscribe({
+            next: (res) => {
+                this.product = res.data;
+                this.variants = this.product.variants;
+                this.variantPriceChecked = this.variants ? this.variants.length > 0 : false;
+                this.options.set(res.data.options || []);
+                let price = (res.data.price / 100).toFixed(2);
+                this.productPrice.set(price);
+                this.loading = false;
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageVariantsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: ProductManageVariantsComponent, isStandalone: true, selector: "rolatech-product-manage-variants", inputs: { productPrice: { classPropertyName: "productPrice", publicName: "productPrice", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productPrice: "productPriceChange" }, usesInheritance: true, ngImport: i0, template: "<rolatech-product-manage-content>\n  <rolatech-toolbar title=\"\u4EF7\u683C\u7B56\u7565\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  @if (loading) {\n    <rolatech-spinner></rolatech-spinner>\n  } @else {\n    <div class=\"flex items-center\">\n      <mat-slide-toggle\n        #slide\n        [checked]=\"variantPriceChecked\"\n        (change)=\"onVariantSlideToggle($event)\"\n        [disabled]=\"options().length <= 0\"\n      ></mat-slide-toggle>\n      <div>\u6839\u636E\u5546\u54C1\u9009\u9879\u8BBE\u7F6E\u4E0D\u540C\u7684\u4EF7\u683C\u548C\u5E93\u5B58</div>\n    </div>\n    <div class=\"flex items-center\">\n      <mat-slide-toggle #inventorySlide (change)=\"onInventorySlideToggle($event)\"></mat-slide-toggle>\n      <div>\u8DDF\u8E2A\u5E93\u5B58</div>\n    </div>\n\n    @if (slide.checked) {\n      <div>\n        <div class=\"header flex gap-3 h-14 items-center\">\n          <div class=\"px-3\">\u540D\u79F0</div>\n          <div class=\"flex-1\"></div>\n          <div class=\"w-[160px]\">\u4EF7\u683C</div>\n          <div class=\"w-[160px]\">\u72B6\u6001</div>\n          @if (inventorySlide.checked) {\n            <div class=\"w-[160px]\">\u5E93\u5B58</div>\n          }\n\n          <div class=\"block w-20 text-right\">\u5C55\u5F00/\u6298\u53E0</div>\n        </div>\n        @for (item of variants; track $index) {\n          <rolatech-product-manage-variant [variant]=\"item\" (upload)=\"onUpload(item, $event)\"></rolatech-product-manage-variant>\n        }\n      </div>\n      <div class=\"mt-3\">\n        <button mat-button (click)=\"saveVariants()\">\u4FDD\u5B58</button>\n      </div>\n    }\n  }\n</rolatech-product-manage-content>\n", styles: ["mat-slide-toggle{scale:.8}mat-form-field{width:72px}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ProductManageContentComponent, selector: "rolatech-product-manage-content" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: ProductManageVariantComponent, selector: "rolatech-product-manage-variant", inputs: ["variant"], outputs: ["variantChange", "upload"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageVariantsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-manage-variants', standalone: true, imports: [
+                        AngularCommonModule,
+                        AngularComponentsModule,
+                        ProductManageContentComponent,
+                        ToolbarComponent,
+                        MatIcon,
+                        MatFormFieldModule,
+                        ThumbnailComponent,
+                        ImageComponent,
+                        ProductManageVariantComponent,
+                        SpinnerComponent,
+                    ], template: "<rolatech-product-manage-content>\n  <rolatech-toolbar title=\"\u4EF7\u683C\u7B56\u7565\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  @if (loading) {\n    <rolatech-spinner></rolatech-spinner>\n  } @else {\n    <div class=\"flex items-center\">\n      <mat-slide-toggle\n        #slide\n        [checked]=\"variantPriceChecked\"\n        (change)=\"onVariantSlideToggle($event)\"\n        [disabled]=\"options().length <= 0\"\n      ></mat-slide-toggle>\n      <div>\u6839\u636E\u5546\u54C1\u9009\u9879\u8BBE\u7F6E\u4E0D\u540C\u7684\u4EF7\u683C\u548C\u5E93\u5B58</div>\n    </div>\n    <div class=\"flex items-center\">\n      <mat-slide-toggle #inventorySlide (change)=\"onInventorySlideToggle($event)\"></mat-slide-toggle>\n      <div>\u8DDF\u8E2A\u5E93\u5B58</div>\n    </div>\n\n    @if (slide.checked) {\n      <div>\n        <div class=\"header flex gap-3 h-14 items-center\">\n          <div class=\"px-3\">\u540D\u79F0</div>\n          <div class=\"flex-1\"></div>\n          <div class=\"w-[160px]\">\u4EF7\u683C</div>\n          <div class=\"w-[160px]\">\u72B6\u6001</div>\n          @if (inventorySlide.checked) {\n            <div class=\"w-[160px]\">\u5E93\u5B58</div>\n          }\n\n          <div class=\"block w-20 text-right\">\u5C55\u5F00/\u6298\u53E0</div>\n        </div>\n        @for (item of variants; track $index) {\n          <rolatech-product-manage-variant [variant]=\"item\" (upload)=\"onUpload(item, $event)\"></rolatech-product-manage-variant>\n        }\n      </div>\n      <div class=\"mt-3\">\n        <button mat-button (click)=\"saveVariants()\">\u4FDD\u5B58</button>\n      </div>\n    }\n  }\n</rolatech-product-manage-content>\n", styles: ["mat-slide-toggle{scale:.8}mat-form-field{width:72px}\n"] }]
+        }] });
+
+class ProductManageScheduleComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductManageScheduleComponent, isStandalone: true, selector: "rolatech-product-manage-schedule", ngImport: i0, template: "<rolatech-product-manage-content>\n  <rolatech-toolbar title=\"\u53D1\u5E03\u8BBE\u7F6E\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div></div>\n</rolatech-product-manage-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ProductManageContentComponent, selector: "rolatech-product-manage-content" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageScheduleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-manage-schedule', standalone: true, imports: [AngularCommonModule, AngularComponentsModule, ToolbarComponent, ProductManageContentComponent], template: "<rolatech-product-manage-content>\n  <rolatech-toolbar title=\"\u53D1\u5E03\u8BBE\u7F6E\" class=\"hidden md:block\" divider> </rolatech-toolbar>\n  <div></div>\n</rolatech-product-manage-content>\n" }]
+        }] });
+
+class ProductManageInventoryComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageInventoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductManageInventoryComponent, isStandalone: true, selector: "rolatech-product-manage-inventory", ngImport: i0, template: "<rolatech-product-manage-content>\n  <rolatech-toolbar title=\"\u5E93\u5B58\u8BBE\u7F6E\" class=\"hidden md:block\" divider></rolatech-toolbar>\n</rolatech-product-manage-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: ProductManageContentComponent, selector: "rolatech-product-manage-content" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductManageInventoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-product-manage-inventory', standalone: true, imports: [AngularCommonModule, AngularComponentsModule, ToolbarComponent, ProductManageContentComponent], template: "<rolatech-product-manage-content>\n  <rolatech-toolbar title=\"\u5E93\u5B58\u8BBE\u7F6E\" class=\"hidden md:block\" divider></rolatech-toolbar>\n</rolatech-product-manage-content>\n" }]
         }] });
 
 const productManageRoutes = [
     {
         path: '',
+        component: ProductManageIndexComponent,
+    },
+    {
+        path: 'create',
+        component: ProductManageCreateComponent,
+    },
+    {
+        path: ':id/manage',
         component: ProductManageLayoutComponent,
         children: [
             {
@@ -109,52 +1738,44 @@ const productManageRoutes = [
                 component: ProductManageMediaComponent,
             },
             {
-                path: 'details',
-                component: ProductManageDetailsComponent,
+                path: 'sections',
+                component: ProductManageSectionsComponent,
+            },
+            {
+                path: 'options',
+                component: ProductManageOptionsComponent,
+            },
+            {
+                path: 'variants',
+                component: ProductManageVariantsComponent,
+            },
+            {
+                path: 'inventory',
+                component: ProductManageInventoryComponent,
             },
             {
                 path: 'pricing',
                 component: ProductManagePricingComponent,
             },
+            {
+                path: 'schedule',
+                component: ProductManageScheduleComponent,
+            },
         ],
     },
 ];
 
-class AngularProductComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AngularProductComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: AngularProductComponent, isStandalone: true, selector: "lib-angular-product", ngImport: i0, template: "<p>angular-product works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+function provideAngularProduct() {
+    const providers = [
+        ...services,
+        importProvidersFrom(CommonModule, ReactiveFormsModule, FormsModule, RouterModule),
+    ];
+    return makeEnvironmentProviders(providers);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AngularProductComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-angular-product', standalone: true, imports: [CommonModule], template: "<p>angular-product works!</p>\n" }]
-        }] });
-
-class ProductManageContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductManageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ProductManageContentComponent, isStandalone: true, selector: "lib-product-manage-content", ngImport: i0, template: "<p>product-manage-content works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductManageContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-product-manage-content', standalone: true, imports: [CommonModule], template: "<p>product-manage-content works!</p>\n" }]
-        }] });
-
-class ProductIndexComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductIndexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ProductIndexComponent, isStandalone: true, selector: "lib-product-index", ngImport: i0, template: "<p>product-index works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ProductIndexComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-product-index', standalone: true, imports: [CommonModule], template: "<p>product-index works!</p>\n" }]
-        }] });
-
-var productIndex_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    ProductIndexComponent: ProductIndexComponent
-});
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AngularProductComponent, ProductCategoryComponent, ProductDetailComponent, ProductIndexComponent, ProductLayoutComponent, ProductManageContentComponent, ProductManageDetailsComponent, ProductManageInfoComponent, ProductManageLayoutComponent, ProductManageMediaComponent, ProductManagePricingComponent, productManageRoutes, productRoutes };
+export { ProductActionComponent, ProductCategoryService, ProductInfoComponent, ProductInventoryStatus, ProductItemComponent, ProductManageOptionAddComponent, ProductManageOptionItemComponent, ProductManageSectionItemComponent, ProductMediaComponent, ProductOptionComponent, ProductPricingComponent, ProductScope, ProductSectionComponent, ProductStatus, ProductType, productManageRoutes, productRoutes, provideAngularProduct, services };
 //# sourceMappingURL=rolatech-angular-product.mjs.map