From d45b5613dd642146029b88384b09a4ab662e52eb Mon Sep 17 00:00:00 2001
From: x3zvawq <x3zvawq@gmail.com>
Date: Fri, 7 Feb 2025 15:57:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(manufacture):=20=E6=8A=80=E8=89=BA?=
 =?UTF-8?q?=E5=8A=A9=E6=89=8B=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/manufacture/cart.less        | 180 ++++++++++++
 src/assets/css/manufacture/equip.less       | 181 ++++++++++++
 src/assets/css/manufacture/index.less       | 157 ++++++++++
 src/assets/css/manufacture/item_price.less  | 144 +++++++++
 src/assets/css/manufacture/make.less        |  80 +++++
 src/assets/css/manufacture/plan.less        | 154 ++++++++++
 src/assets/css/manufacture/recipe.less      | 119 ++++++++
 src/assets/data/manufacture.json            |  17 ++
 src/components/manufacture/Cart.vue         | 261 ++++++++++++++++
 src/components/manufacture/CreatePlan.vue   | 148 ++++++++++
 src/components/manufacture/Equip.vue        |  76 +++++
 src/components/manufacture/ItemIcon.vue     | 165 +++++++++++
 src/components/manufacture/MyList.vue       | 130 ++++++++
 src/components/manufacture/Plan.vue         | 252 ++++++++++++++++
 src/components/manufacture/PriceItem.vue    | 107 +++++++
 src/components/manufacture/Recipe.vue       | 310 ++++++++++++++++++++
 src/components/manufacture/RecipeDetail.vue | 174 +++++++++++
 src/pages/pvg/index.js                      |  27 ++
 src/pages/pvg/router.js                     |  29 ++
 src/pages/pvg/store.js                      |  16 +
 src/service/manufacture/item.js             |  24 ++
 src/service/manufacture/manufacture.js      |  48 +++
 src/service/manufacture/plan.js             |  51 ++++
 src/store/bus.js                            |   3 +
 src/views/pvg/Index.vue                     |  43 +++
 src/views/pvg/Manufacture.vue               | 224 ++++++++++++++
 vue.config.js                               |   6 +
 27 files changed, 3126 insertions(+)
 create mode 100644 src/assets/css/manufacture/cart.less
 create mode 100644 src/assets/css/manufacture/equip.less
 create mode 100644 src/assets/css/manufacture/index.less
 create mode 100644 src/assets/css/manufacture/item_price.less
 create mode 100644 src/assets/css/manufacture/make.less
 create mode 100644 src/assets/css/manufacture/plan.less
 create mode 100644 src/assets/css/manufacture/recipe.less
 create mode 100644 src/assets/data/manufacture.json
 create mode 100644 src/components/manufacture/Cart.vue
 create mode 100644 src/components/manufacture/CreatePlan.vue
 create mode 100644 src/components/manufacture/Equip.vue
 create mode 100644 src/components/manufacture/ItemIcon.vue
 create mode 100644 src/components/manufacture/MyList.vue
 create mode 100644 src/components/manufacture/Plan.vue
 create mode 100644 src/components/manufacture/PriceItem.vue
 create mode 100644 src/components/manufacture/Recipe.vue
 create mode 100644 src/components/manufacture/RecipeDetail.vue
 create mode 100644 src/pages/pvg/index.js
 create mode 100644 src/pages/pvg/router.js
 create mode 100644 src/pages/pvg/store.js
 create mode 100644 src/service/manufacture/item.js
 create mode 100644 src/service/manufacture/manufacture.js
 create mode 100644 src/service/manufacture/plan.js
 create mode 100644 src/store/bus.js
 create mode 100644 src/views/pvg/Index.vue
 create mode 100644 src/views/pvg/Manufacture.vue

diff --git a/src/assets/css/manufacture/cart.less b/src/assets/css/manufacture/cart.less
new file mode 100644
index 00000000..473dea47
--- /dev/null
+++ b/src/assets/css/manufacture/cart.less
@@ -0,0 +1,180 @@
+.m-manufacture {
+    .pt(40px);
+}
+.m-manufacture-title {
+    .u-del {
+        .fz(16px);
+        background: #fff;
+        letter-spacing: 1px;
+        border: 1px solid #fff;
+        &:hover {
+            background: #07ad36;
+            border: 1px solid #07ad36;
+        }
+    }
+}
+.m-manufacture-title__myList {
+    .flex;
+    .pr(20px);
+    align-items: center;
+    justify-content: space-between;
+}
+.m-cart-body {
+    .flex;
+    .w(420px);
+    .r(10px);
+    gap: 20px;
+    justify-content: space-between;
+    flex-direction: column;
+    box-sizing: border-box;
+    min-height: 700px;
+    .m-cart-scroll {
+        .pr(10px);
+        width: calc(100% - 10px);
+        overflow: auto;
+        min-height: 530px;
+        max-height: calc(100vh - 415px);
+    }
+
+    .m-cart-list {
+        .r(10px);
+        background-color: #fff;
+        min-height: 530px;
+        padding: 20px;
+        box-sizing: border-box;
+    }
+    .m-title {
+        .flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 3px double #eee;
+        .u-label {
+            .bold;
+            .fz(20px,2.5);
+            i {
+                .mr(5px);
+            }
+        }
+    }
+    .m-item {
+        padding: 10px 0;
+        border-bottom: 1px solid #dcdfe6;
+        &:last-child {
+            border-bottom: 0;
+        }
+        .u-header {
+            display: flex;
+            justify-content: space-between;
+            padding: 10px 2px 5px 2px;
+            .u-header-inner {
+                .flex;
+            }
+            .u-img {
+                .mr(10px);
+                .size(24px);
+            }
+            .u-title {
+                .fz(14px,24px);
+                .bold;
+            }
+            .u-del {
+                background: #fff;
+                letter-spacing: 1px;
+                &:hover {
+                    background: #07ad36;
+                    border: 1px solid #07ad36;
+                }
+            }
+        }
+        .u-info {
+            .el-divider {
+                margin-top: 10px;
+                margin-bottom: 10px;
+            }
+            .el-divider__text {
+                color: #999;
+                .fz(12px);
+                .pl(10px);
+                .pr(10px);
+            }
+            .u-children {
+                .ml(1em);
+                .pt(10px);
+            }
+            .u-child {
+                .flex;
+                align-items: center;
+                justify-content: space-between;
+                .mb(5px);
+                &:hover {
+                    background-color: @bg-gray;
+                }
+                .u-img {
+                    .flex;
+                    align-items: center;
+                    img {
+                        .size(24px);
+                    }
+                    span {
+                        .fz(12px);
+                        .ml(5px);
+                        opacity: 0.8;
+                    }
+                }
+                .c-game-price {
+                    .fz(12px);
+                }
+            }
+            .u-item-num {
+                .flex;
+                .fz(13px);
+                .pt(10px);
+                justify-content: flex-end;
+                align-items: center;
+            }
+        }
+    }
+
+    .m-null {
+        .fz(15px);
+        .r(10px);
+        .x;
+        .flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 530px;
+        line-height: calc(100vh - 415px);
+        color: #999;
+        background-color: #fff;
+    }
+    .m-all {
+        display: flex;
+        padding: 10px 0;
+        justify-content: space-between;
+
+        .u-label {
+            .bold;
+        }
+        .u-value {
+            .fz(13px,2);
+            b,
+            .u-price-num span {
+                color: #c00;
+                .bold;
+            }
+        }
+        .u-num {
+            .flex;
+            justify-content: flex-end;
+        }
+    }
+}
+.m-stat {
+    .size(calc(100% - 10px),144px);
+    .r(10px);
+    box-sizing: border-box;
+    background-color: #fff;
+    right: 0;
+    bottom: 0;
+    padding: 20px;
+}
diff --git a/src/assets/css/manufacture/equip.less b/src/assets/css/manufacture/equip.less
new file mode 100644
index 00000000..6b53a418
--- /dev/null
+++ b/src/assets/css/manufacture/equip.less
@@ -0,0 +1,181 @@
+.m-plan-equip {
+    .size(520px, 720px);
+    background-color: @bg-black;
+    border: 6px solid #444;
+    .r(6px);
+    .auto(x);
+
+    .u-info {
+        .mt(120px);
+        .w(280px);
+        .auto(x);
+        .x;
+    }
+    .u-title {
+        .nobreak;
+        .fz(1rem, 2);
+        .bold;
+        color: #fff;
+    }
+
+    .u-author {
+        img {
+            .r(2px);
+            .size(20px);
+            .y;
+        }
+        img {
+            .mr(5px);
+        }
+        span {
+            .fz(13px, 2.5);
+            color: #ccc;
+        }
+    }
+
+    .u-time {
+        color: #999;
+        .fz(12px);
+    }
+
+    .u-qrcodebox {
+        .mt(60px);
+        .w(140px);
+        .auto(x);
+
+        .w-qrcode-static {
+            .u-txt {
+                .mt(10px);
+                color: #999;
+                .fz(12px, 16px);
+            }
+            svg {
+                fill: #999;
+                .size(16px);
+                .y(-4px);
+            }
+            .u-pic {
+                .r(2px);
+                padding: 10px 8px 8px 8px;
+            }
+        }
+    }
+
+    .pr;
+    .u-plan-equip {
+        .pa;
+        .flex;
+        flex-direction: column;
+        .u-name {
+            .w(150px);
+            margin: 5px 0 0 0;
+            .x;
+        }
+        .quality-1 {
+            color: #fff;
+        }
+        .quality-2 {
+            color: #00d24b;
+        }
+        .quality-3 {
+            color: #007eff;
+        }
+        .quality-4 {
+            color: #ff2dff;
+        }
+        .quality-5 {
+            color: #ffa500;
+        }
+    }
+
+    .u-equip-melee_weapon {
+        .lt(120px, 600px);
+    }
+    .u-equip-range_weapon {
+        .lt(240px, 600px);
+    }
+
+    .u-equip-helm {
+        .lt(-10px, 70px);
+    }
+
+    .u-equip-chest {
+        .lt(-10px, 250px);
+    }
+
+    .u-equip-waist {
+        .lt(-10px, 430px);
+    }
+
+    .u-equip-bangle {
+        .lt(380px, 70px);
+    }
+
+    .u-equip-pants {
+        .lt(380px, 160px);
+    }
+
+    .u-equip-boots {
+        .lt(380px, 250px);
+    }
+
+    .u-equip-amulet {
+        .lt(380px, 340px);
+    }
+
+    .u-equip-pendant {
+        .lt(380px, 430px);
+    }
+
+    .u-equip-ring_1 {
+        .lt(380px, 520px);
+    }
+
+    .u-equip-ring_2 {
+        .lt(380px, 610px);
+    }
+
+    .u-misc {
+        .pa;
+        .lt(30px, 600px);
+    }
+
+    .u-logo {
+        .db;
+        svg,
+        span {
+            transition: 0.2s ease-in-out;
+        }
+        svg {
+            .size(56px);
+            fill: #fff;
+        }
+        span {
+            .db;
+            color: #fff;
+            font-family: Consolas;
+            .fz(12px);
+            // .bold;
+        }
+        &:hover {
+            span {
+                color: #0cf;
+            }
+            svg {
+                fill: #0cf;
+            }
+        }
+    }
+
+    .u-meta {
+        .fz(12px);
+        .db;
+        color: #fff;
+    }
+}
+.u-plan-equip {
+    .m-item-icon {
+        flex-direction: column;
+        align-items: center;
+    }
+}
diff --git a/src/assets/css/manufacture/index.less b/src/assets/css/manufacture/index.less
new file mode 100644
index 00000000..8cb5bbc3
--- /dev/null
+++ b/src/assets/css/manufacture/index.less
@@ -0,0 +1,157 @@
+.m-manufacture-container {
+    padding: 20px 0;
+}
+
+.m-manufacture-header {
+    // padding: 20px 0;
+    // .x;
+    display: flex;
+    align-items: flex-end;
+
+    .u-title {
+        margin: 0;
+        font-weight: 300;
+    }
+
+    .u-settings {
+        .ml(10px);
+    }
+
+    .u-servers {
+        .el-input__prefix {
+            left: 1px;
+            top: 1px;
+            .r(5px);
+        }
+        .el-input--prefix .el-input__inner {
+            padding-left: 150px;
+            width: 280px;
+        }
+
+        .u-prefix {
+            .db;
+            .h(30px);
+            .lh(30px);
+
+            background-color: #f5f7fa;
+            color: #909399;
+
+            border-right: 1px solid #dcdfe6;
+            border-top-left-radius: 4px;
+            border-bottom-left-radius: 4px;
+
+            padding: 0 10px;
+            white-space: nowrap;
+        }
+    }
+
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+}
+
+.m-manufacture-sidebar {
+    border-right: 1px solid @border-hr;
+
+    .u-tabs {
+        .mb(10px);
+        .r(4px);
+        user-select: none;
+        background-color: @bg-light;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px 1px;
+        border: 1px solid #eee;
+        box-sizing: border-box;
+        width: 100%;
+
+        .u-tab {
+            .w(45px);
+            .x;
+            .fz(15px);
+            .bold;
+            .pointer;
+            filter: grayscale(100%);
+            background-repeat: no-repeat;
+            background-size: 42px;
+            background-position: top center;
+            margin: 0 17px;
+            .pt(39px);
+            color: @color;
+            &:hover {
+                filter: grayscale(0);
+            }
+        }
+        .active {
+            color: @color-link;
+            filter: grayscale(0);
+        }
+        .u-tab-tailoring {
+            background-image: url("@{img_path}image/cooking/newcraft1-37.png");
+            &:hover {
+                background-image: url("@{img_path}image/cooking/newcraft1-38.png");
+            }
+        }
+        .u-tab-cooking {
+            background-image: url("@{img_path}image/cooking/newcraft1-45.png");
+            &:hover {
+                background-image: url("@{img_path}image/cooking/newcraft1-46.png");
+            }
+        }
+        .u-tab-medicine {
+            background-image: url("@{img_path}image/cooking/newcraft1-65.png");
+            &:hover {
+                background-image: url("@{img_path}image/cooking/newcraft1-67.png");
+            }
+        }
+        .u-tab-founding {
+            background-image: url("@{img_path}image/cooking/newcraft1-69.png");
+            &:hover {
+                background-image: url("@{img_path}image/cooking/newcraft1-70.png");
+            }
+        }
+        .u-tab-furniture {
+            background-image: url("@{img_path}image/cooking/newcraft1-91.png");
+            &:hover {
+                background-image: url("@{img_path}image/cooking/newcraft1-92.png");
+            }
+        }
+    }
+
+    .m-list .u-list {
+        height: 75vh;
+        overflow-y: auto;
+    }
+}
+
+.m-manufacture-main {
+    .flex;
+    .mt(10px);
+    .r(5px);
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.m-manufacture-sidebar {
+    flex-shrink: 0;
+    flex-basis: 400px;
+    padding-right: 20px;
+}
+
+.m-manufacture-content {
+    display: flex;
+    padding: 0 20px;
+    gap: 20px;
+    flex-grow: 1;
+
+    .u-middle {
+        flex: 1 1 520px;
+        background-color: @bg-light;
+        .r(4px);
+        padding: 40px 80px;
+        border: 1px solid #eee;
+    }
+    .u-right {
+        flex: 1 0 350px;
+    }
+}
diff --git a/src/assets/css/manufacture/item_price.less b/src/assets/css/manufacture/item_price.less
new file mode 100644
index 00000000..d388b6e6
--- /dev/null
+++ b/src/assets/css/manufacture/item_price.less
@@ -0,0 +1,144 @@
+.m-item_price {
+    padding: 20px 0;
+    .m-header {
+        .flex;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #eee;
+        align-items: flex-end;
+        gap: 10px;
+        .u-title {
+            font-weight: 300;
+            margin: 0;
+            flex-shrink: 0;
+        }
+        .u-servers {
+            .el-input__prefix {
+                left: 1px;
+                top: 1px;
+                .r(5px);
+            }
+            .el-input--prefix .el-input__inner {
+                padding-left: 150px;
+                width: 280px;
+            }
+
+            .u-prefix {
+                .db;
+                .h(30px);
+                .lh(30px);
+
+                background-color: #f5f7fa;
+                color: #909399;
+
+                border-right: 1px solid #dcdfe6;
+                border-top-left-radius: 4px;
+                border-bottom-left-radius: 4px;
+
+                padding: 0 10px;
+                white-space: nowrap;
+            }
+        }
+    }
+    .m-search {
+        margin: 20px 0;
+        .u-search {
+            .lh(36px);
+            input {
+                height: 38px;
+            }
+        }
+    }
+}
+
+.m-transaction-box {
+    max-height: 400px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.m-price-list {
+    animation: priceAni 10s linear infinite;
+
+    .m-item {
+        .r(5px);
+        padding: 20px 10px 10px 10px;
+        background-color: #fafbfc;
+        .mt(20px);
+    }
+    .u-group-title {
+        .mb(20px);
+        font-weight: 600;
+        color: #666666;
+        padding: 0 10px;
+    }
+
+    .u-item {
+        .db;
+        .clearfix;
+        .mb(10px);
+        cursor: pointer;
+        transition: 0.1s ease-in-out;
+        &:hover {
+            background-color: #ceefff;
+        }
+    }
+
+    .u-icon {
+        .fl;
+        .mr(10px);
+        .size(32px);
+    }
+
+    .u-content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .fz(12px, 32px);
+        .bold;
+    }
+
+    .u-name {
+        .db;
+        // max-width: 180px;
+        overflow: hidden;
+        .nobreak;
+    }
+
+    .u-price {
+        color: @color;
+        white-space: nowrap;
+    }
+    .u-trending {
+        &.up {
+            color: #fc3c3c;
+        }
+        &.down {
+            color: #49c10f;
+        }
+        &.keep {
+            color: #aaa;
+        }
+    }
+}
+
+@media screen and (max-width: 1980px) {
+    .m-price-list {
+        .el-col {
+            .w(33%);
+        }
+    }
+}
+@media screen and (max-width: @smallpc) {
+    .m-price-list {
+        .el-col {
+            .w(50%);
+        }
+    }
+}
+@media screen and (max-width: @phone) {
+    .m-price-list {
+        .el-col {
+            .w(100%);
+        }
+    }
+}
diff --git a/src/assets/css/manufacture/make.less b/src/assets/css/manufacture/make.less
new file mode 100644
index 00000000..2aa9ea17
--- /dev/null
+++ b/src/assets/css/manufacture/make.less
@@ -0,0 +1,80 @@
+.m-manufacture-make {
+    .m-list {
+        .u-input {
+            .mb(10px);
+        }
+        .u-null {
+            .db;
+            .x;
+            .r(5px);
+            .fz(14px,3);
+            .pointer;
+            // background-color: #eee;
+            color: @color;
+        }
+    }
+    .u-list {
+        .fz(15px,2);
+        padding: 0 10px;
+        background-color: #fff;
+        border: 1px solid @border-hr;
+        .r(3px);
+        .pointer;
+        .el-collapse-item__header {
+            .bold;
+            letter-spacing: 5px;
+            text-indent: 1em;
+        }
+    }
+    .u-child-title {
+        .x;
+        .bold;
+        .fz(15px,2);
+        .mb(15px);
+        border-bottom: 1px solid @border-hr;
+    }
+    .u-child {
+        .flex;
+        .pointer;
+        .fz(14px,30px);
+        .r(3px);
+        padding: 5px 5px 5px 1em;
+        justify-content: space-between;
+        &:hover {
+            background-color: #ecf4ff;
+        }
+        &.active {
+            background-color: #fff4ca;
+            &:hover {
+                .u-btn {
+                    .flex;
+                }
+            }
+        }
+        .u-label {
+            .flex;
+            align-items: center;
+            .u-img {
+                .size(24px);
+                .mr(6px);
+            }
+            span {
+                .fz(13px);
+                .w(180px);
+                .nobreak;
+                .bold;
+            }
+        }
+        .u-btn {
+            .none;
+            align-items: center;
+            .el-input-number--mini {
+                width: 110px;
+                .mr(5px);
+            }
+        }
+    }
+    .m-detail {
+        padding: 20px;
+    }
+}
diff --git a/src/assets/css/manufacture/plan.less b/src/assets/css/manufacture/plan.less
new file mode 100644
index 00000000..d5a17945
--- /dev/null
+++ b/src/assets/css/manufacture/plan.less
@@ -0,0 +1,154 @@
+.m-plan-dialog {
+    .w(100%);
+    max-width: 800px;
+    .el-dialog__body {
+        .pt(0);
+    }
+    .m-dialog-content {
+        .flex;
+        flex-direction: column;
+        gap: 20px;
+        min-height: 300px;
+    }
+
+    .m-plan-description {
+        .flex;
+        gap: 10px;
+        flex-direction: column;
+        color: #3d454d;
+        .u-time {
+            .fz(12px);
+            .color(#999);
+        }
+        .u-title b {
+            .bold;
+            .fz(16px);
+        }
+        .u-del {
+            .ml(20px);
+            .color(#007eff);
+            .pointer;
+            &:hover {
+                filter: brightness(110%);
+            }
+        }
+    }
+
+    .m-plan-item {
+        .flex;
+        flex-direction: column;
+        gap: 20px;
+        .m-border {
+            .flex;
+            .r(10px);
+            flex-direction: column;
+            gap: 20px;
+            padding: 10px 20px;
+            border: 1px solid #eee;
+            background-color: #f9f9f9;
+            .m-content {
+                .flex;
+                flex-wrap: wrap;
+                gap: 10px;
+            }
+            .u-title {
+                .fz(16px,2);
+                .bold;
+                .x;
+                border-bottom: 1px solid #ddd;
+            }
+
+            .u-item {
+                .flex;
+                margin: 0 20px 10px 0;
+                flex-direction: column;
+                align-items: center;
+                gap: 5px;
+
+                .u-name {
+                    .fz(12px);
+                }
+            }
+            .u-img {
+                .pr;
+                .u-count {
+                    .pa;
+                    .rb(0,0);
+                    .fz(12px);
+                    .z(3);
+                    color: #fff;
+                    text-align: right;
+                    padding: 0 3px 0 5px;
+                    background-color: rgba(0, 0, 0, 0.6);
+                    border-radius: 3px 0 0 3px;
+                    &::before {
+                        content: "×";
+                    }
+                }
+            }
+        }
+    }
+    // 装备
+    .m-plan-equips {
+        padding: 30px 0 0 0;
+        .m-content {
+            .flex;
+            .pt(40px);
+            flex-direction: row;
+            gap: 10px;
+        }
+        .m-item-icon {
+            .fz(12px);
+        }
+        .u-list {
+            width: 25%;
+            .u-item {
+                .r(5px);
+                .mb(10px);
+                border: 1px solid #eee;
+                padding: 10px;
+                .u-title {
+                    .db;
+                }
+            }
+            .u-equip,
+            .u-equip-null {
+                .db;
+                .mt(10px);
+            }
+            .u-equip {
+                .pr;
+                .r(5px);
+                background-color: @color;
+                &:first-child:before {
+                    content: "主";
+                    .pa;
+                    .r(4px);
+                    .bold;
+                    .x;
+                    .lh(24px);
+                    .lt(-26px,2px);
+                    width: 24px;
+                    color: #fff;
+                    background-color: #0366d6;
+                    border: 1px solid #0366d6;
+                }
+            }
+        }
+    }
+    .quality-1 {
+        color: #888;
+    }
+    .quality-2 {
+        color: #00d24b;
+    }
+    .quality-3 {
+        color: #007eff;
+    }
+    .quality-4 {
+        color: #ff2dff;
+    }
+    .quality-5 {
+        color: #ffa500;
+    }
+}
diff --git a/src/assets/css/manufacture/recipe.less b/src/assets/css/manufacture/recipe.less
new file mode 100644
index 00000000..ddb0327e
--- /dev/null
+++ b/src/assets/css/manufacture/recipe.less
@@ -0,0 +1,119 @@
+.m-recipe-detail {
+    .flex;
+    .w(100%);
+    gap: 20px;
+    flex-direction: column;
+    padding: 20px 15px;
+    .m-item {
+        .flex;
+        .fz(14px);
+        gap: 10px;
+        color: #000;
+        align-items: center;
+        .u-name {
+            .fz(20px,32px);
+            .bold;
+        }
+        .m-text {
+            .flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        .u-info span {
+            .mr(10px); 
+        }
+    }
+
+    .u-img {
+        .pr;
+        .size(58px);
+        .r(5px);
+        .clip;
+        flex-shrink: 0;
+        img {
+            .full;
+        }
+        .u-border {
+            .pa;
+            .lt(0,0);
+            .size(100%);
+            box-sizing: border-box;
+            background-size: contain;
+            .z(2);
+        }
+        .u-amount {
+            .pa;
+            .rb(2px,2px);
+            .fz(14px);
+            .color(white);
+            .z(3);
+            text-shadow: black 0 0 4px;
+            font-weight: bolder;
+        }
+    }
+
+    .u-price {
+        .fz(12px);
+        .mt(10px);
+        opacity: 0.9;
+        .u-price-num,
+        .u-null {
+            .bold;
+            color: #c00;
+        }
+        .u-null {
+            .ml(10px);
+            color: #d00;
+        }
+    }
+    .u-desc {
+        .fz(13px,1.5);
+        opacity: 0.8;
+    }
+    .u-children {
+        .flex;
+        .w(100%);
+        flex-direction: column;
+        .el-divider__text {
+            background-color: #fafafa;
+            padding: 0 10px;
+        }
+    }
+    .u-child {
+        .flex;
+        padding: 10px 0;
+        align-items: center;
+        border-bottom: 1px solid #ddd;
+        .u-img {
+            .mr(20px);
+            .size(48px);
+        }
+        .u-info {
+            .flex;
+            flex-direction: column;
+            .u-name {
+                .flex;
+                .fz(16px,1.2);
+                .bold;
+                align-items: baseline;
+                .u-num {
+                    .fz(12px);
+                    .pl(20px);
+                    font-weight: normal;
+                }
+            }
+        }
+    }
+    .m-add {
+        .flex;
+        .pt(20px);
+        justify-content: center;
+        .el-input-number {
+            .mr(20px);
+        }
+    }
+}
+
+.u-icon-popper {
+    padding: 0;
+}
diff --git a/src/assets/data/manufacture.json b/src/assets/data/manufacture.json
new file mode 100644
index 00000000..ebe2e7ce
--- /dev/null
+++ b/src/assets/data/manufacture.json
@@ -0,0 +1,17 @@
+{
+    "craft_types": {
+        "std": [
+            { "key": "tailoring", "name": "缝纫", "ProfessionID": "5" },
+            { "key": "cooking", "name": "烹饪", "ProfessionID": "4" },
+            { "key": "medicine", "name": "制药", "ProfessionID": "7" },
+            { "key": "founding", "name": "锻造", "ProfessionID": "6" },
+            { "key": "furniture", "name": "梓匠", "ProfessionID": "15" }
+        ],
+        "origin": [
+            { "key": "tailoring", "name": "缝纫", "ProfessionID": "5" },
+            { "key": "cooking", "name": "烹饪", "ProfessionID": "4" },
+            { "key": "medicine", "name": "制药", "ProfessionID": "7" },
+            { "key": "founding", "name": "锻造", "ProfessionID": "6" }
+        ]
+    }
+}
diff --git a/src/components/manufacture/Cart.vue b/src/components/manufacture/Cart.vue
new file mode 100644
index 00000000..97e8c251
--- /dev/null
+++ b/src/components/manufacture/Cart.vue
@@ -0,0 +1,261 @@
+<template>
+    <div class="m-manufacture-cart">
+        <div class="m-manufacture-title">
+            <span class="u-title">成本计算器</span>
+            <el-button
+                v-if="cartList.length"
+                class="u-del"
+                plain
+                type="info"
+                size="mini"
+                icon="el-icon-delete"
+                @click="clearAllCart"
+            >
+            </el-button>
+        </div>
+        <div class="m-cart-body">
+            <div class="m-cart-scroll">
+                <div class="m-cart-list" v-if="cartList.length">
+                    <div class="m-item" v-for="(item, index) in cartList" :key="index">
+                        <div class="u-header">
+                            <el-popover
+                                popper-class="u-icon-popper"
+                                placement="right"
+                                :visible-arrow="false"
+                                trigger="hover"
+                            >
+                                <Item :item_id="item.itemKey" />
+                                <div class="u-header-inner" slot="reference">
+                                    <div
+                                        class="u-border"
+                                        :style="{
+                                            backgroundImage: item_border(item.Quality),
+                                            opacity: item.Quality == 5 ? 0.9 : 1,
+                                        }"
+                                    ></div>
+                                    <img class="u-img" :src="iconLink(item.IconID)" :alt="item.Name" />
+                                    <span class="u-title" :class="`u-quality--${item.Quality}`">{{ item.Name }}</span>
+                                </div>
+                            </el-popover>
+                            <i class="el-icon-delete u-del" @click="clearCart(item.ID)"></i>
+                        </div>
+
+                        <div class="u-info">
+                            <el-divider content-position="left">
+                                [ {{ server }} ] - <i class="el-icon-box"></i> 材料成本统计
+                            </el-divider>
+                            <div class="u-children" v-if="item.children.length">
+                                <div class="u-child" v-for="(child, k) in item.children" :key="k">
+                                    <el-popover
+                                        popper-class="u-icon-popper"
+                                        placement="right"
+                                        :visible-arrow="false"
+                                        trigger="hover"
+                                    >
+                                        <Item :item_id="child.price_id" />
+                                        <div class="u-img" slot="reference">
+                                            <img :src="iconLink(child.IconID)" :alt="child.Name" />
+                                            <span>
+                                                {{ child.Name }}x <b>{{ child.count * item.count }}</b>
+                                            </span>
+                                        </div>
+                                    </el-popover>
+                                    <PriceItem
+                                        class="u-price-num"
+                                        :data="{
+                                            Price:
+                                                prices[child.ID] * child.count * item.count ||
+                                                prices[child.priceID] * child.count * item.count,
+                                            Name: child.Name,
+                                            id: child.ID,
+                                        }"
+                                    />
+                                </div>
+                            </div>
+                            <div class="u-item-num">
+                                <span>制作次数：</span>
+                                <el-input-number
+                                    v-model="item.count"
+                                    size="mini"
+                                    :min="1"
+                                    @input="onlyInteger(index, item.count)"
+                                    @click.stop.native
+                                ></el-input-number>
+                            </div>
+                            <div class="u-item-num">
+                                <span><i class="el-icon-sunny"></i> 消耗精力值：</span>
+                                <b>{{ (item.CostVigor || item.CostStamina) * item.count }}</b>
+                            </div>
+                            <div class="u-item-num">
+                                <span><i class="el-icon-coin"></i> 小计金额：</span>
+                                <span class="u-price">
+                                    <GamePrice class="u-price-num" :price="item.allPrices * item.count" />
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="m-null" v-else>- 暂未添加生产配方 -</div>
+            </div>
+
+            <div class="m-stat">
+                <div class="m-all">
+                    <div class="u-label">总计</div>
+                    <div class="u-value">
+                        <div class="u-num">
+                            <span><i class="el-icon-sunny"></i> 消耗精力值：</span>
+                            <b>{{ allExp }}</b>
+                        </div>
+                        <div class="u-num u-price">
+                            <span><i class="el-icon-coin"></i> 消耗金钱：</span>
+                            <GamePrice v-if="allPrice" class="u-price-num" :price="allPrice" />
+                        </div>
+                    </div>
+                </div>
+
+                <CreatePlan :list="cartList" @clear="clearAllCart" />
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { iconLink } from "@jx3box/jx3box-common/js/utils.js";
+import GamePrice from "@jx3box/jx3box-common-ui/src/wiki/GamePrice.vue";
+import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
+import Item from "@jx3box/jx3box-editor/src/Item.vue";
+import PriceItem from "@/components/manufacture/PriceItem.vue";
+import CreatePlan from "@/components/manufacture/CreatePlan.vue";
+import Bus from "@/store/bus.js";
+import { cloneDeep } from "lodash";
+export default {
+    name: "cart",
+    props: ["data", "server"],
+    components: { GamePrice, Item, CreatePlan, PriceItem },
+    data: function () {
+        return {
+            counts: {},
+            cartList: [],
+            prices: {},
+        };
+    },
+    computed: {
+        allExp() {
+            if (!this.cartList.length) return 0;
+            let _num = 0;
+            let _list = this.cartList.map((el) => {
+                return { exp: el.CostVigor || el.CostStamina, count: el.count };
+            });
+            _list.forEach((item) => {
+                _num += item.count * item.exp;
+            });
+            return _num;
+        },
+        allPrice() {
+            if (!this.cartList.length) return 0;
+            return this.cartList
+                .map((item) => item.allPrices * item.count)
+                .reduce((acc, cur) => {
+                    return acc + cur;
+                }, 0);
+        },
+    },
+
+    methods: {
+        iconLink,
+        // 移除
+        clearCart(id) {
+            this.cartList = id ? this.cartList.filter((item) => item.ID !== id) : [];
+        },
+        // 全部清空
+        clearAllCart() {
+            this.cartList = [];
+        },
+        // 材料价格
+        itemPrices(children) {
+            return children
+                .map((item) => {
+                    let num = 0;
+                    if (this.prices[item.priceID]) num = item.count * this.prices[item.priceID];
+                    if (this.prices[item.ID]) num = item.count * this.prices[item.ID];
+
+                    return num;
+                })
+                .reduce((acc, cur) => {
+                    return acc + cur;
+                }, 0);
+        },
+        // icon边框
+        item_border(id) {
+            switch (id) {
+                case 3:
+                    return `url(${__imgPath}image/item/blue.png)`;
+                case 4:
+                    return `url(${__imgPath}image/item/purple.png)`;
+                case 5:
+                    return `url(${__imgPath}image/item/orange.gif)`;
+                default:
+                    return "";
+            }
+        },
+        onlyInteger(index, number) {
+            number = number + "";
+            number = number.replace(/[^\.\d]/g, "");
+            number = number.replace(".", "");
+            this.cartList[index].count = ~~number;
+        },
+    },
+    watch: {
+        data: {
+            deep: true,
+            handler: function (item) {
+                item = cloneDeep(item);
+                const hasItem = this.cartList.some((cart) => cart.ID == item.ID);
+                item.allPrices = this.itemPrices(item.children) || 0;
+
+                hasItem
+                    ? this.cartList.forEach((cart) => {
+                          if (item.ID == cart.ID) cart.count += item.count;
+                      })
+                    : this.cartList.push(item);
+            },
+        },
+        prices: {
+            deep: true,
+            handler: function () {
+                this.cartList = this.cartList.map((item) => {
+                    item.allPrices = this.itemPrices(item.children) || 0;
+                    return item;
+                });
+            },
+        },
+    },
+    mounted() {
+        Bus.$on("itemPrice", (data) => {
+            this.prices = data;
+        });
+    },
+};
+</script>
+<style lang="less">
+@import "~@/assets/css/manufacture/cart.less";
+</style>
+<style lang="less" scoped>
+.m-manufacture-title {
+    justify-content: space-between;
+    .u-del {
+        .mr(10px);
+    }
+}
+.m-cart-body .m-item .u-header {
+    align-items: center;
+    .u-del {
+        color: #999;
+        &:hover {
+            background: none;
+            border: 0;
+            .pointer;
+            color: #000;
+        }
+    }
+}
+</style>
diff --git a/src/components/manufacture/CreatePlan.vue b/src/components/manufacture/CreatePlan.vue
new file mode 100644
index 00000000..ba2981af
--- /dev/null
+++ b/src/components/manufacture/CreatePlan.vue
@@ -0,0 +1,148 @@
+<template>
+    <div class="m-create-plan" v-if="list.length">
+        <el-popover popper-class="m-plan-tips" placement="top" width="220" trigger="click">
+            <el-divider>新建清单</el-divider>
+            <div class="u-tips">
+                <el-button size="mini" icon="el-icon-edit" @click="dialogVisible = true">编辑信息</el-button>
+                <el-button size="mini" icon="el-icon-thumb" type="primary" @click="setMyPlan">直接保存</el-button>
+            </div>
+            <el-button slot="reference" type="success" icon="el-icon-document-checked" size="small">
+                保存至我的清单
+            </el-button>
+        </el-popover>
+
+        <el-dialog title="编辑清单" :visible.sync="dialogVisible" custom-class="m-plan-dialog">
+            <el-form :inline="true" :model="plan" class="demo-form-inline">
+                <el-form-item label="标题">
+                    <el-input v-model="plan.title"></el-input>
+                </el-form-item>
+                <el-form-item label="备注">
+                    <el-input v-model="plan.description"></el-input>
+                </el-form-item>
+                <el-form-item label="是否公开">
+                    <el-switch v-model="plan.publics" active-value="1" inactive-value="0"></el-switch>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="setMyPlan">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { addMyPlan } from "@/service/manufacture/plan";
+import { getLink } from "@jx3box/jx3box-common/js/utils";
+import { showTime } from "@/utils/moment";
+import Bus from "@/store/bus.js";
+export default {
+    name: "CreatePlan",
+    props: ["list"],
+    data: function () {
+        return {
+            visible: false,
+            dialogVisible: false,
+            data: "",
+            plan: {
+                title: "",
+                description: "",
+                publics: true,
+            },
+        };
+    },
+    methods: {
+        // 保存清单
+        setMyPlan() {
+            let recipe = [],
+                materials = [];
+            this.list.forEach((item) => {
+                recipe.push({ id: item.itemKey, count: item.count, IconID: item.IconID, Name: item.Name });
+                item.children.forEach((el) => {
+                    materials.push({
+                        id: el.priceID,
+                        count: el.count * item.count,
+                        IconID: el.IconID,
+                        Name: el.Name,
+                    });
+                });
+            }); 
+            materials = this.merge(materials);
+
+            let date = showTime(new Date());
+            let { title, publics, description } = this.plan;
+
+            let data = {
+                title: title || `技艺助手成本计算 ${date}`,
+                type: 1,
+                public: Number(publics),
+                description: description || "",
+                relation: [
+                    { title: "生产配方", data: recipe },
+                    { title: "生产配方所需材料", data: materials },
+                ],
+            };
+            addMyPlan(data)
+                .then((res) => {
+                    this.dialogVisible = false;
+                    this.data = res.data.data;
+                    this.$notify({
+                        title: "清单创建成功",
+                        type: "success",
+                    });
+                })
+                .then(() => {
+                    this.data = "";
+                    this.$emit("clear");
+                    Bus.$emit("update");
+                });
+        },
+
+        // 合并所有材料的id和数量
+        merge(list) {
+            let _list = [];
+            let _obj = {};
+            list.forEach((el) => {
+                if (_obj[el.id]) {
+                    _obj[el.id].count += el.count;
+                } else {
+                    _obj[el.id] = {
+                        IconID: el.IconID,
+                        Name: el.Name,
+                        count: el.count,
+                    };
+                }
+            });
+            for (const key in _obj) {
+                _list.push({ id: key, ..._obj[key] });
+            }
+            return _list;
+        },
+    },
+};
+</script>
+<style lang="less" scoped>
+.m-create-plan {
+    .x(right);
+
+    .u-tip {
+        .mt(10px);
+    }
+}
+</style>
+<style lang="less">
+.m-plan-tips {
+    .u-tips {
+        .flex;
+        justify-content: space-around;
+    }
+}
+.m-plan-dialog {
+    .el-dialog__header {
+        .x(left);
+    }
+    .el-form {
+        .flex;
+    }
+}
+</style>
diff --git a/src/components/manufacture/Equip.vue b/src/components/manufacture/Equip.vue
new file mode 100644
index 00000000..184fd091
--- /dev/null
+++ b/src/components/manufacture/Equip.vue
@@ -0,0 +1,76 @@
+<template>
+    <div class="m-plan-equip" v-if="plan">
+        <div class="u-plan-equip" :class="'u-equip-' + label" v-for="(item, label) in plan.relation" :key="label">
+            <template v-if="item.length">
+                <itemIcon :item="item[0]" />
+                <span class="u-name" :class="`quality-${item[0].Quality}`">{{ item[0].Name }}</span>
+            </template>
+        </div>
+        <div class="u-info">
+            <div class="u-title">{{ plan.title }}</div>
+            <a class="u-author" :href="userpage" target="_blank">
+                <img :src="avatar" class="u-author-avatar" />
+                <span class="u-author-name">{{ username }}</span>
+            </a>
+            <div class="u-time">
+                <i class="el-icon-date"></i>
+                {{ showTime(plan.updated * 1000) }}
+            </div>
+            <div class="u-qrcodebox">
+                <QRcode :href="link" :s="120" v="static" />
+            </div>
+        </div>
+        <div class="u-misc">
+            <a class="u-logo" :href="link" target="_blank">
+                <span>配装ID:{{ plan.id }}</span>
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+import QRcode from "@jx3box/jx3box-common-ui/src/interact/QRcode.vue";
+import itemIcon from "./ItemIcon.vue";
+import { authorLink } from "@jx3box/jx3box-common/js/utils";
+import { showTime } from "@jx3box/jx3box-common/js/moment.js";
+import { __Root, default_avatar } from "@jx3box/jx3box-common/data/jx3box.json";
+
+export default {
+    name: "equip",
+    props: ["data"],
+    data: function () {
+        return {};
+    },
+    computed: {
+        plan: function () {
+            return this.data;
+        },
+        avatar: function () {
+            return this.plan?.user_info?.user_avatar || default_avatar;
+        },
+        username: function () {
+            return this.plan?.user_info?.display_name || "匿名";
+        },
+        uid: function () {
+            return this.plan.user_id;
+        },
+        userpage: function () {
+            return authorLink(this.uid);
+        },
+        link: function () {
+            return this.plan ? __Root + `item/#/plan_view/${this.plan.id}` : "";
+        },
+    },
+    methods: {
+        showTime,
+    },
+    components: {
+        itemIcon,
+        QRcode,
+    },
+};
+</script>
+
+<style lang="less">
+@import "~@/assets/css/manufacture/equip.less";
+</style>
diff --git a/src/components/manufacture/ItemIcon.vue b/src/components/manufacture/ItemIcon.vue
new file mode 100644
index 00000000..815c3278
--- /dev/null
+++ b/src/components/manufacture/ItemIcon.vue
@@ -0,0 +1,165 @@
+<template>
+    <el-popover
+        v-if="source"
+        placement="right-start"
+        width="auto"
+        :trigger="click_trigger ? 'click' : 'hover'"
+        :disabled="dishoverable"
+        popper-class="m-item-icon-popup"
+        :visible-arrow="false"
+        transition="none"
+        :close-delay="0"
+        @show="show"
+    >
+        <template slot="reference">
+            <div class="m-item-icon">
+                <div class="u-item-icon">
+                    <div
+                        class="u-border"
+                        :style="{ backgroundImage: item_border(source), opacity: source.Quality == 5 ? 0.9 : 1 }"
+                    ></div>
+                    <div class="u-border-quest" :style="{ backgroundImage: item_border_quest(source) }"></div>
+                    <img class="u-item-icon" :src="icon_url(source.IconID)" />
+                </div>
+                <div class="u-name" v-if="has_title" :class="`quality-${source.Quality}`">{{ source.Name }}</div>
+            </div>
+        </template>
+
+        <jx3-item :item="source" />
+    </el-popover>
+</template>
+
+<script>
+import Item from "@jx3box/jx3box-editor/src/Item";
+import { get_item } from "@/service/manufacture/item.js";
+import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
+import { iconLink } from "@jx3box/jx3box-common/js/utils";
+
+export default {
+    name: "ItemIcon",
+    props: ["item", "item_id", "dishoverable", "click_trigger", "has_title"],
+    data() {
+        return {
+            source: null,
+        };
+    },
+    computed: {
+        client: function () {
+            return this.$store.state.client;
+        },
+    },
+    components: {
+        "jx3-item": Item,
+    },
+    methods: {
+        get_data(item_id) {
+            if (item_id) {
+                get_item(item_id).then((res) => {
+                    let data = res.data;
+                    let item = data.data.item;
+                    if (Object.keys(item).length) this.source = item;
+                });
+            }
+        },
+        show() {
+            if (!this.source || typeof this.source.Genre === "undefined") {
+                this.get_data(this.source.id);
+            }
+        },
+        item_border(item) {
+            switch (item.Quality) {
+                case 3:
+                    return `url(${__imgPath}image/item/blue.png)`;
+                case 4:
+                    return `url(${__imgPath}image/item/purple.png)`;
+                case 5:
+                    return `url(${__imgPath}image/item/orange.gif)`;
+                default:
+                    return "";
+            }
+        },
+        item_border_quest(item) {
+            if (item.IsQuest > 0) return `url(${__imgPath}image/item/renwu.png)`;
+            return "";
+        },
+        icon_url: function (id) {
+            return iconLink(id); //收藏跨重制/缘起
+        },
+    },
+    watch: {
+        item: {
+            immediate: true,
+            handler() {
+                this.source = this.item;
+            },
+        },
+        item_id: {
+            immediate: true,
+            handler(item_id) {
+                this.get_data(item_id);
+            },
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.m-item-icon-popup {
+    min-width: initial;
+    padding: 0;
+    border: none;
+    box-shadow: none;
+    background-color: transparent;
+    transform: translateY(-10px);
+}
+
+.m-item-icon {
+    .flex;
+    align-items: center;
+    .u-name {
+        .ml(10px);
+    }
+    .quality-1 {
+        color: #fff;
+    }
+    .quality-2 {
+        color: #00d24b;
+    }
+    .quality-3 {
+        color: #007eff;
+    }
+    .quality-4 {
+        color: #ff2dff;
+    }
+    .quality-5 {
+        color: #ffa500;
+    }
+}
+.u-item-icon {
+    .pr;
+    .db;
+
+    .u-border,
+    .u-border-quest {
+        .pa;
+        .full;
+        .z(2);
+        top: 0;
+        left: 0;
+        box-sizing: border-box;
+        background-size: contain;
+    }
+
+    .u-border-quest {
+        .z(3);
+    }
+
+    .u-item-icon {
+        .pr;
+        .db;
+        .z(1);
+        .size(48px);
+        flex-shrink: 0;
+    }
+}
+</style>
diff --git a/src/components/manufacture/MyList.vue b/src/components/manufacture/MyList.vue
new file mode 100644
index 00000000..4accb676
--- /dev/null
+++ b/src/components/manufacture/MyList.vue
@@ -0,0 +1,130 @@
+<template>
+    <div class="m-myList">
+        <div class="m-manufacture-title m-manufacture-title__myList">
+            <span class="u-title">我的清单</span>
+            <a class="fr el-button el-button--success el-button--mini" @click="onAddPlan" v-if="isLogin">
+                <i class="el-icon-document-add"></i>
+                <span>创建</span>
+            </a>
+        </div>
+        <div class="m-box">
+            <template v-if="isLogin">
+                <div class="m-item" v-for="(item, i) in list" :key="i" @click="change(item.id)">
+                    <span> <i :class="item.public ? 'el-icon-caret-right' : 'el-icon-lock'"></i> {{ item.title }}</span>
+                </div>
+            </template>
+            <span class="m-null" v-else>- 请登录后查看 -</span>
+        </div>
+        <Plan :planId="planId" :visible="visible" @close="close" />
+    </div>
+</template>
+
+<script>
+import { getMyPlans, addMyPlan } from "@/service/manufacture/plan";
+import { __Root } from "@jx3box/jx3box-common/data/jx3box.json";
+import User from "@jx3box/jx3box-common/js/user";
+import Bus from "@/store/bus.js";
+import Plan from "@/components/manufacture/Plan.vue";
+export default {
+    name: "MyList",
+    data: function () {
+        return {
+            list: [],
+            isLogin: User.isLogin(),
+            planId: "",
+            visible: false,
+        };
+    },
+    components: { Plan },
+    methods: {
+        load() {
+            getMyPlans({ no_page: 1 }).then((res) => {
+                this.list = res.reverse() || [];
+            });
+        },
+        change(id) {
+            this.planId = id;
+            this.visible = true;
+        },
+        close() {
+            this.visible = false;
+        },
+        onAddPlan() {
+            this.$prompt("请输入清单名称", "创建空白清单", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                inputPlaceholder: "请输入清单名称",
+                inputValidator: (value) => {
+                    if (!value) {
+                        return "请输入清单名称";
+                    }
+                },
+                callback: (action, instance) => {
+                    if (action === "confirm") {
+                        const data = {
+                            title: instance.inputValue,
+                            type: 1, // 1: 物品清单
+                            public: 1,
+                            relation: [],
+                            description: "",
+                        };
+                        addMyPlan(data).then((res) => {
+                            this.$message({
+                                message: "创建成功",
+                                type: "success",
+                            });
+                            this.list.unshift(res.data.data);
+                        });
+                    }
+                },
+            });
+        },
+    },
+    mounted() {
+        this.isLogin && this.load();
+        Bus.$on("update", () => {
+            this.load();
+        });
+    },
+};
+</script>
+
+<style lang="less">
+.m-myList {
+    .w(100%);
+    min-width: 300px;
+    max-width: 420px;
+    .m-box {
+        .flex;
+        .pr(10px);
+        .fz(14px);
+        flex-direction: column;
+        gap: 20px;
+        overflow: auto;
+        min-height: 700px;
+        max-height: calc(100vh - 250px);
+
+        .m-item {
+            .pointer;
+            .db;
+            .color( #24292e,#07ad36);
+            .lh(30px);
+            .r(10px);
+            background: #fff;
+            padding: 0 20px;
+
+            span {
+                .db;
+                .nobreak;
+            }
+        }
+        .m-null {
+            .x;
+            .r(10px);
+            color: #999;
+            background: #fff;
+            line-height: 200px;
+        }
+    }
+}
+</style>
diff --git a/src/components/manufacture/Plan.vue b/src/components/manufacture/Plan.vue
new file mode 100644
index 00000000..c95b237d
--- /dev/null
+++ b/src/components/manufacture/Plan.vue
@@ -0,0 +1,252 @@
+<template>
+    <el-dialog :title="plan.title" :visible.sync="show" custom-class="m-plan-dialog" @close="close">
+        <div class="m-dialog-content" v-loading="loading">
+            <!-- 内容备注 -->
+            <div class="m-plan-description">
+                <span class="u-time">
+                    <span>最后更新于 <i class="el-icon-time"></i>{{ date_format(plan.updated) }}</span>
+                    <a :href="editLink(plan)" target="_blank" class="u-del">编辑清单</a>
+                    <span class="u-del" @click="deletePlan(planId)">删除清单</span>
+                </span>
+                <span class="u-title"><b>备注：</b> {{ plan.description || "无" }}</span>
+            </div>
+            <!-- 物品 -->
+            <div class="m-plan-item" v-if="plan.type == '1'">
+                <template v-for="(item, index) in plan.relation">
+                    <div class="m-border" :key="index" v-if="item.data && item.data.length">
+                        <div class="u-title" v-if="item.title">{{ item.title }}</div>
+                        <div class="m-content">
+                            <router-link
+                                class="u-item"
+                                v-for="(el, key) in item.data"
+                                :key="key"
+                                :to="{ name: 'view', params: { item_id: el.id } }"
+                            >
+                                <span class="u-img">
+                                    <itemIcon :item="el" :item_id="el.id" />
+                                    <span class="u-count">{{ el.count }}</span>
+                                </span>
+                                <span class="u-name" :class="`quality-${el.Quality}`"> {{ el.Name }}</span>
+                            </router-link>
+                        </div>
+                    </div>
+                </template>
+            </div>
+            <!-- 装备 -->
+            <div class="m-border m-plan-equips" v-else-if="plan.type == '2'">
+                <Equip :data="plan" />
+                <div class="m-content">
+                    <div class="u-list" v-for="(list, index) in equipList" :key="index">
+                        <div class="u-item" v-for="(item, key) in list" :key="key">
+                            <span class="u-title"> {{ item.label }}</span>
+                            <div v-if="item.list.length">
+                                <itemIcon
+                                    class="u-equip"
+                                    v-for="(eq, i) in item.list"
+                                    :key="i"
+                                    :has_title="true"
+                                    :item="eq"
+                                    :item_id="item.id"
+                                />
+                            </div>
+                            <div v-else class="u-equip-null">- 暂无物品 -</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+<script>
+import { getItemPlanID, delItemPlan, searchItemsID } from "@/service/manufacture/plan.js";
+import { ts2str } from "@jx3box/jx3box-common/js/utils";
+import itemIcon from "./ItemIcon.vue";
+import Equip from "./Equip.vue";
+import Bus from "@/store/bus.js";
+import { __Root } from "@jx3box/jx3box-common/data/jx3box.json";
+export default {
+    name: "Plan",
+    props: ["planId", "visible"],
+    components: { itemIcon, Equip },
+    data: function () {
+        return {
+            loading: false,
+            plan: "",
+            date_format: ts2str,
+            equipList: [
+                [
+                    { title: "melee_weapon", label: "武器", AucGenre: 1, list: [] },
+                    { title: "range_weapon", label: "暗器", AucGenre: 2, list: [] },
+                ],
+                [
+                    { title: "helm", label: "帽子", AucGenre: 3, AucSubType: 2, list: [] },
+                    { title: "chest", label: "上衣", AucGenre: 3, AucSubType: 1, list: [] },
+                    { title: "waist", label: "腰带", AucGenre: 3, AucSubType: 3, list: [] },
+                ],
+                [
+                    { title: "bangle", label: "护腕", AucGenre: 3, AucSubType: 6, list: [] },
+                    { title: "pants", label: "下装", AucGenre: 3, AucSubType: 4, list: [] },
+                    { title: "boots", label: "鞋子", AucGenre: 3, AucSubType: 5, list: [] },
+                ],
+                [
+                    { title: "amulet", label: "项链", AucGenre: 4, AucSubType: 1, list: [] },
+                    { title: "pendant", label: "腰坠", AucGenre: 4, AucSubType: 3, list: [] },
+                    { title: "ring_1", label: "戒指", AucGenre: 4, AucSubType: 2, list: [] },
+                    { title: "ring_2", label: "戒指", AucGenre: 4, AucSubType: 2, list: [] },
+                ],
+            ],
+        };
+    },
+    computed: {
+        show: {
+            get() {
+                return this.visible;
+            },
+            set() {
+                this.close();
+            },
+        },
+    },
+    watch: {
+        planId: {
+            immediate: true,
+            handler: function (val) {
+                val && this.getItemData();
+            },
+        },
+    },
+    methods: {
+        // 获取数据
+        getItemData() {
+            this.loading = true;
+            getItemPlanID(this.planId).then((res) => {
+                this.loading = false;
+                this.converted(res);
+                if (res.type == 2) this.toEquipList(res.relation);
+            });
+        },
+
+        // 兼容旧数据,转换数据
+        converted(data) {
+            if (data.type == 1) {
+                data.relation = data.relation.map((item) => {
+                    item.data = item.data.map((el) => {
+                        if (typeof el == "string") el = { id: el, count: 1 };
+                        if (typeof el == "object") el = { id: el.id, count: el.count };
+                        return el;
+                    });
+                    return item;
+                });
+
+                // 统一获取物品信息
+                let _arr = [];
+                data.relation.forEach((list) => {
+                    list.data.forEach((el) => {
+                        _arr.push(el.id);
+                    });
+                });
+                searchItemsID({ ids: _arr }).then((res) => {
+                    let items = res.data;
+
+                    data.relation = data.relation.map((item) => {
+                        item.data = item.data.map((el) => {
+                            let a = items.filter((k) => {
+                                if (k.id == el.id) return { ...k, ...el };
+                            });
+                            el = { ...el, ...a[0] };
+                            return el;
+                        });
+                        return item;
+                    });
+                    this.plan = data;
+                });
+            } else {
+                data.relation = this.equipItem(data.relation);
+                let _arr = [];
+                for (const key in data.relation) {
+                    _arr.push(...data.relation[key]);
+                }
+                searchItemsID({ ids: _arr }).then((res) => {
+                    let items = res.data;
+                    for (const key in data.relation) {
+                        data.relation[key] = data.relation[key].map((el) => {
+                            el = items.filter((k) => {
+                                if (el == k.id) return k;
+                            });
+                            return el[0];
+                        });
+                    }
+                    this.plan = data;
+                    this.equipList.map((list) => {
+                        list.map((item) => {
+                            item.list = item.list.map((el) => {
+                                el = items.filter((k) => {
+                                    if (k.id == el) return k;
+                                });
+                                return el[0];
+                            });
+                            return item;
+                        });
+                        return list;
+                    });
+                });
+            }
+        },
+        // 将装备object转换为string
+        equipItem(data) {
+            for (const key in data) {
+                data[key] = data[key].map((item) => {
+                    if (typeof item == "object") item = item.id;
+                    return item;
+                });
+            }
+            return data;
+        },
+        // 装备分组
+        toEquipList(_obj) {
+            this.equipList.map((list) => {
+                list.map((el) => {
+                    if (_obj.hasOwnProperty(el.title)) {
+                        el.list = _obj[el.title];
+                    }
+                });
+            });
+        },
+        // 装备提交数据转换
+        toEquip() {
+            let obj = {};
+            this.equipList.forEach((list) => {
+                list.forEach((el) => {
+                    obj[el.title] = el.list;
+                });
+            });
+            obj = this.equipItem(obj);
+            this.plan.relation = obj;
+        },
+        // 删除清单
+        deletePlan(planId) {
+            this.$confirm("确认是否删除该物品清单？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            }).then(() => {
+                delItemPlan(planId).then(() => {
+                    this.$message.success("删除成功");
+                    this.$emit("close");
+                });
+            });
+        },
+        // 编辑清单跳转
+        editLink({ id }) {
+            return __Root + "item/plan_edit/" + id;
+        },
+        close() {
+            Bus.$emit("update");
+            this.$emit("close");
+        },
+    },
+};
+</script>
+<style lang="less">
+@import "~@/assets/css/manufacture/plan.less";
+</style>
diff --git a/src/components/manufacture/PriceItem.vue b/src/components/manufacture/PriceItem.vue
new file mode 100644
index 00000000..05fe5abb
--- /dev/null
+++ b/src/components/manufacture/PriceItem.vue
@@ -0,0 +1,107 @@
+<template>
+    <el-popover popper-class="m-add-price" placement="bottom-end" trigger="click" v-model="visible">
+        <el-divider content-position="left"
+            >修改 [ <b>{{ data.Name }}</b> ] 单价</el-divider
+        >
+        <div class="u-add">
+            <el-input class="u-input" type="number" size="mini" v-model="my_Price.jin"></el-input>
+            <img :src="`${img}/jin.png`" alt="金" />
+            <el-input class="u-input" type="number" size="mini" v-model="my_Price.yin"></el-input>
+            <img :src="`${img}/yin.png`" alt="银" />
+            <el-input class="u-input" type="number" size="mini" v-model="my_Price.tong"></el-input>
+            <img :src="`${img}/tong.png`" alt="铜" />
+            <el-button class="u-button" size="mini" @click="inputPrice">确定</el-button>
+        </div>
+        <template slot="reference">
+            <div class="m-price-item">
+                <GamePrice v-if="data.Price" class="u-price-num" :price="data.Price" />
+                <span class="u-null" v-else>暂无价格</span>
+                <i class="u-edit el-icon-edit" title="修改价格"></i>
+            </div>
+        </template>
+    </el-popover>
+</template>
+<script>
+import GamePrice from "@jx3box/jx3box-common-ui/src/wiki/GamePrice.vue";
+import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
+import Bus from "@/store/bus.js";
+export default {
+    name: "PriceItem",
+    props: ["data"],
+    components: { GamePrice },
+    data: function () {
+        return {
+            visible: false,
+            my_Price: {
+                jin: "",
+                yin: "",
+                tong: "",
+            },
+        };
+    },
+    computed: {
+        img() {
+            return __imgPath + "image/price/";
+        },
+    },
+    methods: {
+        inputPrice() {
+            let { jin, yin, tong } = this.my_Price;
+            jin = jin * 10000;
+            yin = yin * 100;
+            tong = tong * 1;
+            const Price = jin + yin + tong;
+            Bus.$emit("changePrice", { Price, id: this.data.id });
+
+            this.visible = false;
+            this.my_Price = {
+                jin: "",
+                yin: "",
+                tong: "",
+            };
+        },
+    },
+};
+</script>
+<style lang="less">
+.m-price-item {
+    .dbi;
+    .pointer;
+    .u-null {
+        .fz(13px);
+        color: #d00;
+        opacity: 0.9;
+    }
+    .u-edit {
+        .ml(5px);
+        color: #08cfd9;
+    }
+}
+.m-add-price {
+    .u-add {
+        .flex;
+        align-items: center;
+        .u-input {
+            .el-input__inner {
+                .x;
+                .w(60px);
+                padding: 0 5px;
+            }
+            input::-webkit-outer-spin-button,
+            input::-webkit-inner-spin-button {
+                -webkit-appearance: none;
+            }
+            input[type="number"] {
+                -moz-appearance: textfield;
+            }
+        }
+        img {
+            .size(25px,18px);
+            margin: 0 3px;
+        }
+        .u-button {
+            .ml(10px);
+        }
+    }
+}
+</style>
diff --git a/src/components/manufacture/Recipe.vue b/src/components/manufacture/Recipe.vue
new file mode 100644
index 00000000..a9df705f
--- /dev/null
+++ b/src/components/manufacture/Recipe.vue
@@ -0,0 +1,310 @@
+<template>
+    <div class="m-manufacture-recipe">
+        <div class="m-recipe-list">
+            <span class="m-recipe-group" v-for="(item, i) in list" :key="i">
+                <span :class="['m-list m-title', { active: i == showIndex }]" @click="changeIndex(i)">
+                    <span class="u-name">
+                        <i :class="i == showIndex ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i>
+                        {{ item.BelongName }}
+                    </span>
+                </span>
+                <span
+                    v-show="showIndex == i"
+                    :class="['m-list', { active: itemId == _list.ID }, `u-quality-bg--${_list.Quality}`]"
+                    v-for="(_list, k) in item.list"
+                    :key="k"
+                    @click="changeItem(_list.ID)"
+                >
+                    <span class="u-item">
+                        <img class="u-img" :src="iconLink(_list.IconID)" :alt="_list.Name" /> {{ _list.Name }}</span
+                    >
+                    <div class="m-add" v-if="itemId == _list.ID">
+                        <el-input-number
+                            v-model.number="showItem.count"
+                            size="small"
+                            :min="1"
+                            @input="onlyInteger"
+                            @click.stop.native
+                        ></el-input-number>
+                        <el-button icon="el-icon-shopping-cart-2" size="small" @click="addCartItem"> </el-button>
+                    </div>
+                </span>
+            </span>
+        </div>
+        <RecipeDetail
+            v-loading="loading"
+            :showItem="showItem"
+            :prices="prices"
+            :children="children"
+            :server="server"
+            v-on="$listeners"
+        />
+    </div>
+</template>
+<script>
+import { getManufactureItem, getAuctionPrice, getOther, getItemsPrice } from "@/service/manufacture/manufacture";
+import { iconLink } from "@jx3box/jx3box-common/js/utils.js";
+import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
+import RecipeDetail from "@/components/manufacture/RecipeDetail.vue";
+import Bus from "@/store/bus.js";
+export default {
+    name: "Recipe",
+    props: ["list", "craftKey", "server"],
+    data: function () {
+        return {
+            showIndex: 0,
+            showItem: {},
+            loading: false,
+            children: [],
+            prices: {},
+            itemId: 0,
+        };
+    },
+    components: { RecipeDetail },
+    computed: {
+        client() {
+            return this.$store.state.client;
+        },
+    },
+    methods: {
+        iconLink,
+        loadItem(id) {
+            this.loading = true;
+            getManufactureItem(this.craftKey, id, this.client)
+                .then(async (res) => {
+                    let _data = {},
+                        _child = [],
+                        _type = [],
+                        _count = [];
+
+                    // 处理数据：删除空数据 合并itemKey 提取材料id 和数量
+                    Object.keys(res.data).forEach((key) => {
+                        if (res.data[key]) {
+                            _data[key] = res.data[key];
+                            if (_data.CreateItemType1)
+                                _data["itemKey"] = _data.CreateItemType1 + "_" + _data.CreateItemIndex1;
+                            if (key.startsWith("RequireItemIndex")) _child.push(_data[key]);
+                            if (key.startsWith("RequireItemType")) _type.push(_data[key]);
+                            if (key.startsWith("RequireItemCount")) _count.push(_data[key]);
+                        }
+                    });
+
+                    // 材料id和数量处理
+                    _child = _child.map((id, i) => {
+                        return { id: id, count: _count[i], priceID: _type[i] + "_" + id };
+                    });
+
+                    // 获取配方材料价格
+                    const itemPrice = await this.getItemPrice(_child);
+                    const tradePrice = await this.getTradePrice(_child, _data.itemKey);
+                    const _prices = Object.assign(itemPrice, tradePrice);
+                    Object.keys(_prices).forEach((id) => {
+                        this.prices[id] = _prices[id];
+                    });
+                    // 将价格传给购物车
+                    Bus.$emit("itemPrice", this.prices);
+
+                    // 获取材料详情
+                    this.getItemDetail(_child).then((res) => {
+                        this.children = _child.map((item) => {
+                            if (res[item.id]) item = Object.assign(item, res[item.id]);
+                            return item;
+                        });
+                    });
+
+                    // 添加配方 数量
+                    _data.count = 1;
+                    this.showItem = _data;
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+        // 获取物品数据
+        async getItemDetail(arr) {
+            const ids = arr.map((item) => item.id).join();
+            try {
+                return await getOther({ client: this.client, ids, per: ids.length }).then((res) => {
+                    let itemData = {};
+                    res.data.list.forEach((item) => {
+                        let _obj = {};
+                        Object.keys(item).forEach((el) => {
+                            if (item[el]) _obj[el] = item[el];
+                        });
+                        itemData[item.ID] = { ..._obj, ..._obj.item_info };
+                        // 可删可不删
+                        delete itemData[item.ID].Price;
+                        delete itemData[item.ID].item_info;
+                    });
+                    return itemData;
+                });
+            } catch (e) {
+                console.log("获取物品数据错误", e);
+            }
+        },
+        // NPC出售价格
+        async getItemPrice(arr) {
+            const ids = arr.map((item) => item.id).join();
+            return getItemsPrice({ ids, client: this.client }).then((res) => {
+                let priceData = {};
+                res.data.forEach((item) => {
+                    priceData[item.ItemIndex] = item.Price;
+                });
+                return priceData;
+            });
+        },
+        // 交易行价格
+        async getTradePrice(arr, key) {
+            const itemIds = arr
+                .map((item) => item.priceID)
+                .concat(key)
+                .join();
+            return getAuctionPrice({ itemIds, server: this.server }).then((res) => {
+                let priceData = {};
+                Object.keys(res.data.data).forEach((item) => {
+                    priceData[item] = res.data.data[item].AvgPrice;
+                });
+                return priceData;
+            });
+        },
+        // 切换分类
+        changeIndex(i) {
+            this.showIndex = this.showIndex == i ? -1 : i;
+        },
+        // 切换物品
+        changeItem(id) {
+            if (id == this.itemId) return;
+            this.itemId = id;
+            this.loadItem(id);
+        },
+        addCartItem() {
+            const data = { ...this.showItem, children: this.children };
+            this.$emit("addCartItem", data);
+        },
+        onlyInteger() {
+            let number = this.showItem.count + "";
+            number = number.replace(/[^\.\d]/g, "");
+            number = number.replace(".", "");
+            this.showItem.count = ~~number;
+        },
+    },
+    watch: {
+        list: {
+            deep: true,
+            handler: function (_list) {
+                if (_list.length && _list[0].list.length) this.changeItem(_list[0].list[0].ID);
+            },
+        },
+        prices(data) {
+            Bus.$emit("itemPrice", data);
+        },
+        server() {
+            this.loadItem(this.itemId);
+        },
+        craftKey() {
+            this.showIndex = 0;
+        },
+    },
+    mounted() {
+        Bus.$on("changePrice", ({ id, Price }) => {
+            if (this.prices[id]) delete this.prices[id];
+            this.$set(this.prices, [id], Price);
+        });
+    },
+};
+</script>
+<style lang="less">
+.m-manufacture-recipe {
+    .flex;
+    .mr(10px);
+    .m-recipe-list {
+        .w(460px);
+        .flex;
+        .pr(10px);
+        .mr(20px);
+        min-height: 700px;
+        max-height: calc(100vh - 250px);
+        overflow: auto;
+        flex-direction: column;
+        gap: 20px;
+    }
+    .m-recipe-group {
+        .flex;
+        .color(#000);
+        flex-direction: column;
+        gap: 10px;
+        .m-list {
+            .flex;
+            .size(100%,50px);
+            .r(10px);
+            .pointer;
+            .fz(14px);
+            justify-content: space-between;
+            box-sizing: border-box;
+            gap: 10px;
+            background-color: #fff;
+            padding: 0 20px;
+            align-items: center;
+            .u-item {
+                .flex;
+                gap: 10px;
+                align-items: center;
+            }
+
+            &.active,
+            &:hover {
+                .bold;
+                color: #fff;
+                background: rgba(50, 65, 72, 0.3);
+                &.u-quality-bg--0 {
+                    background: rgba(50, 65, 72, 0.3);
+                }
+                &.u-quality-bg--1 {
+                    background: @color;
+                }
+                &.u-quality-bg--2 {
+                    background: #07ad36;
+                }
+                &.u-quality-bg--3 {
+                    background: #3d83d3;
+                }
+                &.u-quality-bg--4 {
+                    background: #b242da;
+                }
+                &.u-quality-bg--5 {
+                    background: #f8983f;
+                }
+                &.u-quality-bg--6 {
+                    background: #c00;
+                }
+            }
+            &.m-title {
+                .h(38px);
+                .fz(16px);
+                &.active,
+                &:hover {
+                    background: #24292e;
+                }
+                .u-name {
+                    .flex;
+                    gap: 10px;
+                    align-items: center;
+                }
+            }
+            .u-img {
+                .size(30px);
+            }
+            .m-add {
+                .flex;
+                gap: 10px;
+            }
+        }
+    }
+    .m-recipe-detail {
+        .w(460px);
+        .r(10px);
+        box-sizing: border-box;
+        background-color: #fff;
+    }
+}
+</style>
diff --git a/src/components/manufacture/RecipeDetail.vue b/src/components/manufacture/RecipeDetail.vue
new file mode 100644
index 00000000..e8afafc7
--- /dev/null
+++ b/src/components/manufacture/RecipeDetail.vue
@@ -0,0 +1,174 @@
+<template>
+    <div class="m-recipe-detail" v-if="item">
+        <!-- 配方信息展示 -->
+        <div class="m-item">
+            <el-popover popper-class="u-icon-popper" placement="right" :visible-arrow="false" trigger="hover">
+                <Item :item_id="item.itemKey" />
+                <div class="u-img" slot="reference">
+                    <span class="u-amount" v-if="item.CreateItemMin1 != item.CreateItemMax1">
+                        {{ item.CreateItemMin1 }}~{{ item.CreateItemMax1 }}
+                    </span>
+                    <div
+                        class="u-border"
+                        :style="{ backgroundImage: item_border(item.Quality), opacity: item.Quality == 5 ? 0.9 : 1 }"
+                    ></div>
+                    <img :src="iconLink(item.IconID)" :alt="item.Name" />
+                </div>
+            </el-popover>
+
+            <div class="m-text">
+                <span class="u-name" :class="`u-quality--${item.Quality}`">{{ item.Name }}</span>
+                <div class="u-info">
+                    <span>
+                        需求等级: <b>{{ item.nLevel || "未知" }}</b>
+                    </span>
+                    <span>
+                        消耗精力: <b>{{ item.CostVigor || item.CostStamina }}</b>
+                    </span>
+                    <span>
+                        经验值: <b>{{ item.Exp }}</b>
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <div class="u-price" v-if="client == 'std'">
+            [{{ server }}] 昨日平均价格:
+            <GamePrice v-if="prices[item.itemKey]" class="u-price-num" :price="prices[item.itemKey]" />
+            <span class="u-null" v-else> 暂无数据 </span>
+        </div>
+
+        <template v-if="item.szTip">
+            <span class="u-desc" v-for="text in textFilter(item.szTip)" :key="text">{{ text }}</span>
+        </template>
+        <div class="u-children" v-if="childrenList && childrenList.length">
+            <el-divider content-position="left">合成所需材料</el-divider>
+            <div class="u-child" v-for="(el, index) in childrenList" :key="index">
+                <el-popover
+                    popper-class="u-icon-popper"
+                    placement="right"
+                    :visible-arrow="false"
+                    width="auto"
+                    trigger="hover"
+                >
+                    <Item :item_id="el.priceID" />
+                    <div class="u-img" slot="reference">
+                        <div
+                            class="u-border"
+                            :style="{ backgroundImage: item_border(el.Quality), opacity: el.Quality == 5 ? 0.9 : 1 }"
+                        ></div>
+                        <img :src="iconLink(el.IconID)" :alt="item.Name" />
+                    </div>
+                </el-popover>
+
+                <div class="u-info">
+                    <div class="u-name">
+                        <span :class="`u-quality--${el.Quality}`"> {{ el.Name }}</span>
+                        <span class="u-num"> 数量： {{ el.count || 1 }} </span>
+                    </div>
+                    <div class="u-price" v-if="client == 'std'">
+                        {{ prices[el.ID] ? "[NPC出售] 单价：" : `[${server}] 昨日平均单价：` }}
+                        <PriceItem
+                            :data="{
+                                Price: prices[el.ID] || prices[el.priceID],
+                                Name: el.Name,
+                                id: el.ID,
+                            }"
+                        />
+                    </div>
+                    <div class="u-price" v-else>
+                        [NPC出售] 单价：
+                        <PriceItem :data="{ Price: prices[el.ID], Name: el.Name, id: el.ID }" />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="m-add">
+            <el-input-number v-model="item.count" :min="1" @click.stop.native></el-input-number>
+            <el-button icon="el-icon-shopping-cart-2" type="success" @click="addCartItem"> </el-button>
+        </div>
+    </div>
+</template>
+<script>
+import { iconLink } from "@jx3box/jx3box-common/js/utils.js";
+import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
+
+import GamePrice from "@jx3box/jx3box-common-ui/src/wiki/GamePrice.vue";
+import Item from "@jx3box/jx3box-editor/src/Item.vue";
+import PriceItem from "@/components/manufacture/PriceItem.vue";
+export default {
+    name: "RecipeDetail",
+    props: ["showItem", "children", "prices", "server"],
+    components: { Item, PriceItem, GamePrice },
+    data: function () {
+        return {
+            item: {},
+            childrenList: [],
+        };
+    },
+    computed: {
+        client() {
+            return this.$store.state.client;
+        },
+    },
+    methods: {
+        iconLink,
+        // 添加购物车
+        addCartItem() {
+            const data = { ...this.item, children: this.childrenList };
+            this.$emit("addCartItem", data);
+        },
+
+        // 描述过滤
+        textFilter(str) {
+            // 匹配分段
+            const regex = /<Text>text="(.*?)"\s*?font=(\d+)\s*?<\/text>/gimsy;
+            let matches = [];
+            let match;
+            while ((match = regex.exec(str))) {
+                matches.push(match);
+            }
+
+            // 格式化分段
+            let result = [];
+            for (let group of matches) {
+                result.push(group[1].replace(/[\\n]/g, ""));
+            }
+            result = result.filter(Boolean);
+            return result;
+        },
+
+        // icon边框
+        item_border(id) {
+            switch (id) {
+                case 3:
+                    return `url(${__imgPath}image/item/blue.png)`;
+                case 4:
+                    return `url(${__imgPath}image/item/purple.png)`;
+                case 5:
+                    return `url(${__imgPath}image/item/orange.gif)`;
+                default:
+                    return "";
+            }
+        },
+    },
+    watch: {
+        showItem: {
+            deep: true,
+            immediate: true,
+            handler: function (data) {
+                this.item = data;
+            },
+        },
+        children: {
+            deep: true,
+            handler: function (list) {
+                this.childrenList = list;
+            },
+        },
+    },
+};
+</script>
+<style lang="less">
+@import "~@/assets/css/manufacture/recipe.less";
+</style>
diff --git a/src/pages/pvg/index.js b/src/pages/pvg/index.js
new file mode 100644
index 00000000..8ea8d2f4
--- /dev/null
+++ b/src/pages/pvg/index.js
@@ -0,0 +1,27 @@
+Vue.config.productionTip = false;
+
+// 第三方UI组件
+import Vue from "vue";
+import ElementUI from "element-ui";
+Vue.use(ElementUI);
+
+// 通用UI模块
+import JX3BOX_UI from '@jx3box/jx3box-common-ui'
+import "@jx3box/jx3box-common/css/element.css";
+import "@jx3box/jx3box-common/css/normalize.css";
+Vue.use(JX3BOX_UI);
+
+import reporter from "@jx3box/jx3box-common/js/reporter";
+reporter.install(Vue);
+
+// 数据与路由
+import router from "./router";
+import store from "./store";
+
+import App from "@/views/pvg/Index.vue";
+new Vue({
+    router,
+    store,
+    render: h => h(App),
+}).$mount("#app");
+
diff --git a/src/pages/pvg/router.js b/src/pages/pvg/router.js
new file mode 100644
index 00000000..a4ed2db2
--- /dev/null
+++ b/src/pages/pvg/router.js
@@ -0,0 +1,29 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+
+// 解决重复点击路由报错的BUG
+const originalPush = VueRouter.prototype.push;
+VueRouter.prototype.push = function push(location) {
+    return originalPush.call(this, location).catch((err) => err);
+};
+
+Vue.use(VueRouter);
+
+const routes = [
+    {
+        name: "manufacture",
+        path: "/manufacture",
+        component: () => import("@/views/pvg/Manufacture.vue"),
+        meta: {
+            name: "技艺助手",
+        },
+    },
+];
+
+const router = new VueRouter({
+    mode: "history",
+    base: "/pvg",
+    routes,
+});
+
+export default router;
diff --git a/src/pages/pvg/store.js b/src/pages/pvg/store.js
new file mode 100644
index 00000000..46c294a6
--- /dev/null
+++ b/src/pages/pvg/store.js
@@ -0,0 +1,16 @@
+import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+
+let store = {
+    state: {
+        client: location.href.includes("origin") ? "origin" : "std",
+    },
+    mutations: {},
+    getters: {},
+    actions: {},
+    modules: {},
+};
+
+export default new Vuex.Store(store);
diff --git a/src/service/manufacture/item.js b/src/service/manufacture/item.js
new file mode 100644
index 00000000..121d1173
--- /dev/null
+++ b/src/service/manufacture/item.js
@@ -0,0 +1,24 @@
+import { $cms, $next, $node } from "@jx3box/jx3box-common/js/https";
+
+function getProfile() {
+    return $cms({ mute: true })
+        .get("/api/cms/user/my/profile")
+        .then((res) => {
+            return res.data.data;
+        });
+}
+
+function getGoodsData(params) {
+    return $next().get(`api/item-groups/with-prices`, {
+        params,
+    });
+}
+
+// 获取物品
+function get_item(item_id) {
+    if (!item_id) return;
+    return $node().get(`/item/${item_id}`);
+}
+
+
+export { getProfile, getGoodsData, get_item };
diff --git a/src/service/manufacture/manufacture.js b/src/service/manufacture/manufacture.js
new file mode 100644
index 00000000..c5b8d1aa
--- /dev/null
+++ b/src/service/manufacture/manufacture.js
@@ -0,0 +1,48 @@
+import { $node, $cms, $next } from "@jx3box/jx3box-common/js/https";
+import { __dataPath } from "@jx3box/jx3box-common/data/jx3box.json";
+import axios from "axios";
+const $n = $node();
+
+// 获取技艺分组分类
+async function getCraftJson() {
+    const res = await axios.get(`${__dataPath}pvx/manufacture/output/craft_belong.json`);
+    return res;
+}
+// 获取技艺某种类型的列表
+function getManufactures(params) {
+    return $n.get("/manufactures", { params });
+}
+// 获取技艺某种类型的单个详细信息
+function getManufactureItem(type, id, client = "std") {
+    return $n.get(`/manufacture/${type}/${id}`, {
+        params: {
+            client,
+        },
+    });
+}
+// 根据ids获取对应信息
+function getOther(params) {
+    return $n.get(`/other`, { params });
+}
+// 获取商店物品价格
+function getItemsPrice(params) {
+    return $n.get(`/craft/price`, { params });
+}
+// 获取交易行物品价格
+function getAuctionPrice(params) {
+    return $next().get(`/api/item-price/list`, { params });
+}
+
+function getUserInfo() {
+    return $cms().get("/api/cms/user/my/info");
+}
+
+export {
+    getManufactures,
+    getManufactureItem,
+    getCraftJson,
+    getOther,
+    getItemsPrice,
+    getAuctionPrice,
+    getUserInfo,
+};
\ No newline at end of file
diff --git a/src/service/manufacture/plan.js b/src/service/manufacture/plan.js
new file mode 100644
index 00000000..8367807f
--- /dev/null
+++ b/src/service/manufacture/plan.js
@@ -0,0 +1,51 @@
+import { $cms, $node } from "@jx3box/jx3box-common/js/https";
+
+
+// 获取列表
+function getItemPlans(params) {
+    return $cms()
+        .get(`/api/cms/app/item-plan`, { params })
+        .then((res) => {
+            return res.data.data;
+        });
+}
+// 单个清单搜索
+function getItemPlanID(id) {
+    return $cms()
+        .get(`/api/cms/app/item-plan/${id}`)
+        .then((res) => {
+            return res.data.data;
+        });
+}
+// 删除清单
+function delItemPlan(id) {
+    return $cms().delete(`/api/cms/app/item-plan/${id}`);
+}
+
+// 多个清单搜索
+function searchItemsID(params) {
+    return $node()
+        .get(`/item/list`, { params })
+        .then((res) => {
+            return res.data.data;
+        });
+}
+// 获取我的清单
+function getMyPlans() {
+    return $cms()
+        .get(`/api/cms/app/item-plan/mine`, { params: { no_page: 1, _no_cache: 1 } })
+        .then((res) => {
+            return res.data.data;
+        });
+}
+
+function updatePlan(id, data) {
+    return $cms().put(`/api/cms/app/item-plan/${id}`, data);
+}
+
+// 新增清单
+function addMyPlan(data) {
+    return $cms().post(`/api/cms/app/item-plan`, data);
+}
+
+export { getItemPlans, getItemPlanID, delItemPlan, searchItemsID, getMyPlans, updatePlan, addMyPlan };
diff --git a/src/store/bus.js b/src/store/bus.js
new file mode 100644
index 00000000..a71854ea
--- /dev/null
+++ b/src/store/bus.js
@@ -0,0 +1,3 @@
+import Vue from "vue";
+const Bus = new Vue();
+export default Bus
\ No newline at end of file
diff --git a/src/views/pvg/Index.vue b/src/views/pvg/Index.vue
new file mode 100644
index 00000000..3d3d2aaa
--- /dev/null
+++ b/src/views/pvg/Index.vue
@@ -0,0 +1,43 @@
+<template>
+    <div id="app">
+        <Header></Header>
+        <Nav @statusChange="statusChange"></Nav>
+        <Main :class="navStatusClass" :withoutRight="true">
+            <div class="m-main m-pvg-main">
+                <router-view></router-view>
+            </div>
+        </Main>
+    </div>
+</template>
+
+<script>
+import Nav from "@/components/Nav_v5.vue";
+export default {
+    name: "Index",
+    components: {
+        Nav,
+    },
+    data: function () {
+        return {
+            navStatusClass: "is-regular",
+        };
+    },
+    computed: {
+        slug: function () {
+            return this.$route.name;
+        },
+        name: function () {
+            return this.$route.meta.name;
+        },
+    },
+    methods: {
+        statusChange(navStatusClass) {
+            this.navStatusClass = navStatusClass;
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "~@/assets/css/app.less";
+</style>
diff --git a/src/views/pvg/Manufacture.vue b/src/views/pvg/Manufacture.vue
new file mode 100644
index 00000000..aac6952a
--- /dev/null
+++ b/src/views/pvg/Manufacture.vue
@@ -0,0 +1,224 @@
+<template>
+    <div class="m-manufacture">
+        <CommonToolbar color="#07ad36" search :active="active" :types="craftList" @update="updateToolbar" />
+
+        <div class="m-manufacture-body">
+            <!-- 配方 -->
+            <div class="m-manufacture-box">
+                <div class="m-manufacture-title">
+                    <span class="u-title">{{ craftName }}</span>
+                    <el-select class="m-server" v-model="server" placeholder="请选择" size="small">
+                        <span slot="prefix" class="u-prefix"> 区服价格</span>
+                        <el-option v-for="(item, i) in serverList" :key="i" :label="item" :value="item"> </el-option>
+                    </el-select>
+                </div>
+                <Recipe
+                    :list="search ? searchList : showList"
+                    :craftKey="craftKey"
+                    :server="server"
+                    @addCartItem="addCartItem"
+                />
+            </div>
+            <!-- 成本计算器 -->
+            <Cart :data="cartItem" :server="server" />
+
+            <!-- 我的清单 -->
+            <MyList />
+        </div>
+    </div>
+</template>
+
+<script>
+import { getCraftJson, getManufactures } from "@/service/manufacture/manufacture";
+import servers_std from "@jx3box/jx3box-data/data/server/server_std.json";
+import servers_origin from "@jx3box/jx3box-data/data/server/server_origin.json";
+import { craft_types } from "@/assets/data/manufacture.json";
+import CommonToolbar from "@/components/common/toolbar.vue";
+import Recipe from "@/components/manufacture/Recipe.vue";
+import Cart from "@/components/manufacture/Cart.vue";
+import MyList from "@/components/manufacture/MyList.vue";
+
+export default {
+    name: "Manufacture",
+    components: { Recipe, Cart, MyList, CommonToolbar },
+    data: function () {
+        return {
+            craftList: [],
+            search: "",
+            searchList: [],
+            craftName: "",
+            index: -1,
+            showList: [],
+            craftKey: "",
+            craftTypes: craft_types,
+            server: "蝶恋花",
+            cartItem: {},
+            active: "",
+        };
+    },
+    computed: {
+        client() {
+            return this.$store.state.client;
+        },
+        isStd() {
+            return this.client == "std";
+        },
+        serverList() {
+            return this.isStd ? servers_std : servers_origin;
+        },
+    },
+    methods: {
+        // 获取数据
+        load() {
+            getCraftJson()
+                .then((res) => {
+                    const { std, origin } = res.data;
+                    const list = this.client == "std" ? this.toCraftList(std) : this.toCraftList(origin);
+                    this.craftList =
+                        list.map((item) => {
+                            item.value = item.key;
+                            item.label = item.name;
+                            return item;
+                        }) || [];
+                    if (this.craftList.length) this.index = 0;
+                    this.active = this.craftList[0].value;
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+        // 获取配方列表 && 合并入配方分类
+        loadList(type, index) {
+            getManufactures({ client: this.client, type, mode: "simple" }).then((res) => {
+                // 配方分类
+                const list = this.craftList[index].list;
+                // 配方数据进行分组
+                const data = res.data.reduce((acc, cur) => {
+                    acc[cur.Belong] ? acc[cur.Belong].push(cur) : (acc[cur.Belong] = [cur]);
+                    return acc;
+                }, {});
+
+                // 合并数据配方分类
+                this.showList = list
+                    .map((item) => {
+                        if (data[item.BelongID]) item.list = data[item.BelongID];
+                        return item;
+                    })
+                    .filter((item) => item.list);
+                this.craftKey = type;
+            });
+        },
+        // 处理技艺列表
+        toCraftList(data) {
+            const type = this.craftTypes[this.client];
+            // 1. 将列表按ProfessionID分类
+            const craftData = data.reduce((acc, cur) => {
+                acc[cur.ProfessionID] ? acc[cur.ProfessionID].push(cur) : (acc[cur.ProfessionID] = [cur]);
+                return acc;
+            }, {});
+
+            // 2.为分类添加name和key值
+            return type.map((item) => {
+                if (craftData[item.ProfessionID]) item.list = craftData[item.ProfessionID];
+                return item;
+            });
+        },
+        // 切换技艺
+        changeCraft(i) {
+            this.index = this.craftList.findIndex((item) => item.value == i);
+        },
+        // 选择新添配方
+        addCartItem(item) {
+            this.cartItem = item;
+        },
+        updateToolbar(data) {
+            const { type, search } = data;
+            this.search = search;
+            this.changeCraft(type);
+        },
+    },
+
+    watch: {
+        index(i) {
+            const { name, key } = this.craftList[i];
+            this.craftName = name;
+            this.loadList(key, i);
+        },
+        search(key) {
+            let list = [];
+            this.showList.forEach((item) => {
+                item.list.forEach((_list) => {
+                    if (_list.Name.includes(key)) list.push(_list);
+                });
+            });
+            this.searchList = [{ BelongName: "搜索结果", list }];
+        },
+    },
+    mounted() {
+        this.load();
+    },
+};
+</script>
+
+<style lang="less">
+@import "~@/assets/css/common/tabs.less";
+
+.m-manufacture .m-common-toolbar .m-toolbar-item .u-search .u-search-input input {
+    background: #fff !important;
+}
+.m-manufacture-body {
+    .pt(20px);
+    .flex;
+    .pb(20px);
+    overflow-x: auto;
+    gap: 20px;
+}
+@media screen and (max-width: @phone) {
+    .m-manufacture-tabs {
+        flex-direction: row;
+        gap: 10px;
+        flex-wrap: wrap;
+    }
+}
+.m-manufacture-title {
+    .flex;
+    .pb(20px);
+    gap: 20px;
+    .u-title {
+        .bold;
+        .fz(24px);
+        .lh(40px);
+        .color(#24292e);
+    }
+    .m-server {
+        background: #fff;
+        .r(20px);
+        .el-input {
+            .w(120px);
+            .pl(85px);
+        }
+        .el-input__inner {
+            .fz(16px);
+            .r(20px);
+            .bold;
+            .x;
+            .h(40px);
+            .lh(40px);
+            color: #24292e;
+            border: 0;
+            padding: 0 22px 0 0;
+        }
+        .u-prefix {
+            .db;
+            .lh(40px);
+            .bold;
+            .fz(16px);
+            .x;
+            cursor: default;
+            color: #909399;
+            padding: 0 0 0 15px;
+            white-space: nowrap;
+        }
+    }
+}
+</style>
diff --git a/vue.config.js b/vue.config.js
index e8b7c921..ae8ddace 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -14,6 +14,12 @@ module.exports = {
             template: "public/index.html",
             filename: "adventure/index.html",
         },
+        pvg: {
+            title: "商贾奇才 - JX3BOX",
+            entry: "src/pages/pvg/index.js",
+            template: "public/index.html",
+            filename: "pvg/index.html",
+        }
     },
 
     //❤️ Proxy ~