diff --git a/plugins/addon/example/template/admin/css/order_copy.css b/plugins/addon/example/template/admin/css/order_copy.css
deleted file mode 100644
index c5853bf..0000000
--- a/plugins/addon/example/template/admin/css/order_copy.css
+++ /dev/null
@@ -1,562 +0,0 @@
-.order-search-wrapper {
-  padding: 5px 0;
-  display: flex;
-  margin-bottom: 43px;
-}
-.order-search-wrapper.internal {
-  justify-content: space-between;
-}
-.order-search-wrapper .t-input__wrap {
-  width: 240px;
-  max-width: 100%;
-}
-.list-card-container {
-  width: auto !important;
-}
-.order-search-wrapper .t-select__wrap {
-  width: 240px;
-}
-.order-search-wrapper .t-input__wrap .t-input__prefix.t-input__prefix-icon {
-  position: absolute;
-  right: 0;
-}
-.search-left-bottom {
-  margin-top: 10px;
-}
-.search-left-top,
-.search-left-bottom {
-  display: flex;
-}
-.search-left-top > div,
-.search-left-bottom > div {
-  margin-right: 10px;
-}
-.search-left-bottom .t-button {
-  width: 70px;
-  height: 32px;
-  background: var(--td-brand-color);
-  border-radius: 3px;
-  color: #FFFFFF;
-  font-size: 14px;
-}
-.search-box-right {
-  text-align: right;
-}
-.search-box-right .t-select {
-  margin-bottom: 10px;
-}
-.t-table .t-table__header--fixed:not(.t-table__header--multiple) > tr > th {
-  background-color: #ffffff;
-  color: #999999;
-  font-size: 14px;
-}
-.table-status-span {
-  color: var(--td-brand-color);
-}
-.turn-inside-dialog-footer {
-  display: flex;
-  justify-content: end;
-}
-.turn-inside-dialog-footer button {
-  margin-left: 10px;
-}
-.hover-name {
-  cursor: pointer;
-}
-.order-name {
-  cursor: pointer;
-}
-.order-name:hover {
-  text-decoration: underline;
-}
-.product-info {
-  margin: 20px 0;
-  display: flex;
-  column-gap: 50px;
-  flex-wrap: wrap;
-}
-.product-info .host-item {
-  cursor: pointer;
-  color: var(--td-brand-color);
-}
-.order-type-add-btn {
-  width: 100%;
-  height: 42px;
-  border-top: 0;
-  border-radius: 0px;
-  border-color: #e7e7e7 !important;
-}
-.order-type-close-btn {
-  margin-left: calc(50% - 30px);
-  margin-top: 30px;
-}
-.upload-btn .t-button__text {
-  display: flex;
-  color: #999999;
-}
-.order-upload-wrapper .t-form__controls-content {
-  align-items: baseline;
-}
-/* 回复页 */
-.no-wrap {
-  white-space: nowrap;
-}
-.reply-divider {
-  margin: 0;
-}
-.reply-divider .t-divider__inner-text {
-  font-size: 16px;
-  font-family: PingFang SC;
-  font-weight: bold;
-  color: #333333;
-}
-.t-divider--with-text .t-divider__inner-text:not(:empty) {
-  padding-left: 0;
-}
-.reply-divider.t-divider--with-text-left:before {
-  width: 0;
-}
-.reply-divider.t-divider--with-text-left:after {
-  margin-top: 10px;
-}
-.detail-row {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.detail-value {
-  word-break: break-all;
-  overflow-wrap: break-word;
-}
-.detail-item {
-  margin-left: 16px;
-  margin-right: 40px;
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-}
-.detail-value {
-  font-size: 16px;
-  font-family: PingFang SC;
-  font-weight: 500;
-  line-height: 36px;
-  color: #333333;
-}
-.detail-label {
-  font-size: 16px;
-  font-family: PingFang SC;
-  font-weight: 500;
-  line-height: 36px;
-  color: #999999;
-  margin-right: 6px;
-}
-.reply-list {
-  margin-top: 34px;
-  padding-right: 73px;
-}
-.reply-list .t-list-item__content {
-  width: 100%;
-}
-.reply-list .t-comment__avatar-image {
-  height: 40px;
-  width: 40px;
-}
-.reply-list .t-comment__detail {
-  background: #F0F0FD;
-  border-radius: 0px 12px 12px 12px;
-  padding: 12px 20px 16px 20px;
-  font-size: 14px;
-  font-family: PingFang SC;
-  font-weight: 400;
-  line-height: 24px;
-  color: #333333;
-}
-.reply-list .t-comment__actions {
-  justify-content: space-between;
-  margin-left: -30px;
-}
-.reply-list .t-list-item {
-  padding: 12px 16px;
-}
-.reply-list-attachment {
-  display: flex;
-  flex-wrap: wrap;
-}
-.reply-list-attachment-item {
-  color: rgba(0, 0, 0, 0.4);
-  margin-right: 10px;
-  max-width: 130px;
-  overflow: hidden;
-  word-break: break-all;
-  overflow-wrap: break-word;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.reply-list-attachment-item:hover {
-  cursor: pointer;
-  color: #0052d9;
-}
-.reply-form {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  padding: 0 16px;
-}
-.reply-form-btn {
-  width: 100%;
-  margin-top: 14px;
-  display: flex;
-  justify-content: space-between;
-}
-.reply-form-btn .t-upload__trigger {
-  margin-right: 10px;
-}
-.reply-form-btn .t-upload__single {
-  display: flex;
-}
-.reply-form-btn .upload-list {
-  display: flex;
-  align-items: baseline;
-}
-.t-comment__actions > li:hover {
-  color: rgba(0, 0, 0, 0.4);
-}
-/* 图标 */
-.icon-reply {
-  background: url(../img/icon/icon-reply.png) 7px no-repeat;
-  background-size: cover;
-  background-size: 17px 17px;
-}
-.icon-forward {
-  background: url(../img/icon/icon-forward.png) 7px no-repeat;
-  background-size: cover;
-  background-size: 17px 17px;
-}
-.icon-save {
-  background: url(../img/icon/icon-save.png) 8px no-repeat;
-  background-size: cover;
-  background-size: 15px 15px;
-}
-.detail-box {
-  width: 100%;
-}
-.detail-box .top-title {
-  margin-top: 25px;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-}
-.detail-box .top-title .ticket-title {
-  width: 45%;
-  margin-right: 134px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  font-size: 16px;
-  color: rgba(0, 0, 0, 0.9);
-  font-weight: bold;
-}
-.detail-box .top-title .ticket-info {
-  flex: 1;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-}
-.detail-box .top-title .ticket-info .info-title {
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.4);
-}
-.detail-box .top-title .ticket-info .log-btn {
-  cursor: pointer;
-  display: inline-block;
-  border-radius: 3px;
-  background: #ECF2FE;
-  font-size: 14px;
-  color: var(--td-brand-color);
-  width: 88px;
-  text-align: center;
-  height: 32px;
-  line-height: 32px;
-}
-.detail-box .top-title .ticket-info .blue-text {
-  cursor: pointer;
-  color: var(--td-brand-color);
-}
-.detail-box .top-title .ticket-info .info-item {
-  color: rgba(0, 0, 0, 0.9);
-}
-.detail-box .select-box {
-  margin-top: 35px;
-  display: flex;
-  justify-content: space-between;
-}
-.detail-box .select-box .left-btn {
-  display: flex;
-  flex-wrap: wrap;
-}
-.detail-box .select-box .left-btn .host-div {
-  min-width: 200px;
-  max-width: 500px;
-  margin-right: 57px;
-  white-space: inherit;
-}
-.detail-box .select-box .left-btn .host-item {
-  cursor: pointer;
-}
-.detail-box .select-box .left-btn .host-item:hover {
-  text-decoration: underline;
-}
-.detail-box .select-box .left-btn > div {
-  display: flex;
-  align-items: center;
-}
-.detail-box .select-box .left-btn > div > span {
-  white-space: nowrap;
-  color: rgba(0, 0, 0, 0.9);
-  font-size: 14px;
-}
-.detail-box .select-box .left-btn .select-240 {
-  min-width: 240px;
-  height: 32px;
-  margin-right: 30px;
-}
-.detail-box .select-box .left-btn .no-mar {
-  margin: 0;
-}
-.detail-box .select-box .left-btn .save-btn {
-  margin-left: 20px;
-}
-.detail-box .top-box {
-  background: #FFFFFF;
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.04);
-  margin-bottom: 20px;
-  padding: 20px 50px 20px 30px;
-}
-.detail-box .bottom-box {
-  background: #FFFFFF;
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.04);
-  margin-bottom: 20px;
-  padding: 20px 40px 0px 40px;
-}
-.reply-item {
-  margin-bottom: 57px;
-}
-.reply-item .reply-top .reply-user {
-  display: inline-block;
-  padding: 0px 4px;
-  font-size: 12px;
-  margin-right: 10px;
-  border-radius: 3px;
-  color: rgba(255, 255, 255, 0.9);
-}
-.reply-item .reply-top .user-name {
-  color: #333333;
-  font-weight: bold;
-  font-size: 16px;
-  cursor: default;
-}
-.reply-item .reply-top .link-style {
-  cursor: pointer;
-}
-.reply-item .reply-top .link-style:hover {
-  text-decoration: underline;
-}
-.reply-item .reply-top .green-text {
-  background: #03B193;
-}
-.reply-item .reply-top .red-text {
-  background: #5090FF;
-}
-.reply-item .reply-top .pink-text {
-  background: #EB5F80;
-}
-.reply-item .reply-main {
-  display: inline-block;
-}
-.reply-item .reply-main .reply-middle {
-  position: relative;
-  display: inline-block;
-  margin-top: 11px;
-  border-radius: 3px;
-  padding: 20px 100px 22px 30px;
-  border: 1px solid #DCDCDC;
-}
-.reply-item .reply-main .reply-middle .replu-conten {
-  display: inline-block;
-  word-break: break-word;
-}
-.reply-item .reply-main .reply-middle .replu-conten img {
-  width: 140px;
-  height: 84px;
-  cursor: pointer;
-}
-.reply-item .reply-main .reply-middle .replu-conten p {
-  margin: 0;
-}
-.reply-item .reply-main .reply-middle .text-btn {
-  position: absolute;
-  bottom: 0px;
-  right: 0px;
-  font-size: 18px;
-}
-.reply-item .reply-main .reply-bottom {
-  width: 100%;
-  font-size: 12px;
-  color: #333;
-}
-.reply-item .reply-main .reply-bottom > div {
-  display: inline-block;
-}
-.reply-item .reply-main .time-div {
-  font-size: 12px;
-  color: #999999;
-  width: 100%;
-  text-align: right;
-}
-.reply-item .green-bg {
-  border: 1px solid #DCDCDC;
-  background: #FBFFFE;
-}
-.reply-item .green-bg:hover {
-  border: 1px solid #03B193;
-}
-.reply-item .blue-bg {
-  border: 1px solid #5090FF;
-  background: #F2F7FF;
-}
-.reply-item .blue-bg:hover {
-  border: 1px solid #5090FF;
-}
-.reply-item .pink-bg {
-  border: 1px solid #DCDCDC;
-  background: #FFFBFB;
-}
-.reply-item .pink-bg:hover {
-  border: 1px solid #EB5F80;
-}
-.relply-input {
-  margin-top: 40px;
-}
-.btn-box {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 20px;
-}
-.btn-box .add-btn {
-  border-radius: 4px;
-  height: 32px;
-  background: #4787F0;
-  border: none;
-}
-.btn-box .re-btn {
-  margin-left: 16px;
-  border-radius: 4px;
-  height: 32px;
-  background: #ED7B2F;
-  border: none;
-}
-.btn-box .re-btn:hover {
-  background: rgba(237, 123, 47, 0.678);
-}
-.btn-box .send-btn {
-  margin-right: 15px;
-  height: 32px;
-  background: var(--td-brand-color);
-  border-radius: 4px;
-  border: none;
-}
-.btn-box .ok-btn {
-  border: none;
-  border-radius: 4px;
-  background: var(--td-brand-color);
-  height: 32px;
-}
-.btn-box .canle-btn {
-  margin-left: 20px;
-  border: none;
-  color: #333333;
-  border-radius: 4px;
-  background: #E7E7E7;
-}
-.btn-box .left {
-  display: flex;
-}
-.btn-box .file {
-  display: inline-block;
-  margin-right: 10px;
-}
-.btn-box .upload .t-button__text {
-  display: flex;
-  align-items: center;
-}
-.btn-box .upload .t-icon {
-  margin-right: 5px;
-}
-.description-box {
-  white-space: normal;
-}
-.description-box p {
-  margin: 0;
-}
-.description-box img {
-  width: 140px;
-  height: 84px;
-}
-.replay-box {
-  margin-bottom: 20px;
-  overflow: auto;
-  height: 280px;
-  border: 1px solid #DCDCDC;
-  background: rgba(231, 231, 231, 0.4);
-  padding: 0 12px;
-  padding-bottom: 20px;
-}
-.replay-item {
-  margin-top: 10px;
-  padding: 13px 16px;
-  border: 1px solid #DCDCDC;
-  border-radius: 3px;
-  background: #FFFFFF;
-}
-.replay-item p {
-  margin: 0;
-}
-.replay-item:hover {
-  color: var(--td-brand-color);
-  border: 1px solid var(--td-brand-color);
-}
-.tox-statusbar__branding {
-  display: none !important;
-}
-#viewer {
-  width: 0;
-  height: 0;
-}
-.row-class {
-  cursor: pointer;
-}
-.user-name {
-  cursor: pointer;
-}
-.isEn .forwardForm .t-form__label {
-  width: 190px !important;
-}
-#content .ticket_detail {
-  background: transparent !important;
-}
-.center-box {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-html {
-  scroll-behavior: smooth;
-}
diff --git a/plugins/addon/example/template/admin/css/order_copy.less b/plugins/addon/example/template/admin/css/order_copy.less
deleted file mode 100644
index c9745b6..0000000
--- a/plugins/addon/example/template/admin/css/order_copy.less
+++ /dev/null
@@ -1,714 +0,0 @@
-.order-search-wrapper {
-  padding: 5px 0;
-  display: flex;
-  margin-bottom: 43px;
-}
-
-.order-search-wrapper.internal {
-  justify-content: space-between;
-}
-
-.order-search-wrapper .t-input__wrap {
-  width: 240px;
-  max-width: 100%;
-}
-
-.list-card-container {
-  width: auto !important;
-}
-
-.order-search-wrapper .t-select__wrap {
-  width: 240px;
-}
-
-
-.order-search-wrapper .t-input__wrap .t-input__prefix.t-input__prefix-icon {
-  position: absolute;
-  right: 0;
-}
-
-.search-left-bottom {
-  margin-top: 10px;
-}
-
-.search-left-top,
-.search-left-bottom {
-  display: flex;
-}
-
-.search-left-top>div,
-.search-left-bottom>div {
-  margin-right: 10px;
-}
-
-.search-left-bottom .t-button {
-  width: 70px;
-  height: 32px;
-  background: var(--td-brand-color);
-  border-radius: 3px;
-  color: #FFFFFF;
-  font-size: 14px;
-}
-
-.search-box-right {
-  text-align: right;
-
-}
-
-.search-box-right .t-select {
-  margin-bottom: 10px;
-}
-
-.t-table .t-table__header--fixed:not(.t-table__header--multiple)>tr>th {
-  background-color: #ffffff;
-  color: #999999;
-  font-size: 14px;
-}
-
-.table-status-span {
-  color: var(--td-brand-color);
-}
-
-.turn-inside-dialog-footer {
-  display: flex;
-  justify-content: end;
-}
-
-.turn-inside-dialog-footer button {
-  margin-left: 10px
-}
-
-
-.hover-name {
-  cursor: pointer
-}
-
-.order-name {
-  cursor: pointer;
-}
-
-.order-name:hover {
-  text-decoration: underline;
-}
-
-.product-info {
-  margin: 20px 0;
-  display: flex;
-  column-gap: 50px;
-  flex-wrap: wrap;
-
-  .host-item {
-    cursor: pointer;
-    color: var(--td-brand-color);
-  }
-
-}
-
-
-.order-type-add-btn {
-  width: 100%;
-  height: 42px;
-  border-top: 0;
-  border-radius: 0px;
-  border-color: #e7e7e7 !important;
-}
-
-.order-type-close-btn {
-  margin-left: calc(50% - 30px);
-  margin-top: 30px
-}
-
-.upload-btn .t-button__text {
-  display: flex;
-  color: #999999
-}
-
-.order-upload-wrapper .t-form__controls-content {
-  align-items: baseline;
-}
-
-/* 回复页 */
-.no-wrap {
-  white-space: nowrap;
-}
-
-.reply-divider {
-  margin: 0;
-}
-
-.reply-divider .t-divider__inner-text {
-  font-size: 16px;
-  font-family: PingFang SC;
-  font-weight: bold;
-  color: #333333;
-}
-
-.t-divider--with-text .t-divider__inner-text:not(:empty) {
-  padding-left: 0;
-}
-
-.reply-divider.t-divider--with-text-left:before {
-  width: 0;
-}
-
-.reply-divider.t-divider--with-text-left:after {
-  margin-top: 10px;
-}
-
-.detail-row {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-.detail-value {
-  word-break: break-all;
-  overflow-wrap: break-word;
-}
-
-.detail-item {
-  margin-left: 16px;
-  margin-right: 40px;
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-}
-
-.detail-value {
-  font-size: 16px;
-  font-family: PingFang SC;
-  font-weight: 500;
-  line-height: 36px;
-  color: #333333;
-}
-
-.detail-label {
-  font-size: 16px;
-  font-family: PingFang SC;
-  font-weight: 500;
-  line-height: 36px;
-  color: #999999;
-  margin-right: 6px;
-}
-
-.reply-list {
-  margin-top: 34px;
-  padding-right: 73px;
-}
-
-.reply-list .t-list-item__content {
-  width: 100%;
-}
-
-.reply-list .t-comment__avatar-image {
-  height: 40px;
-  width: 40px;
-}
-
-.reply-list .t-comment__detail {
-  background: #F0F0FD;
-  border-radius: 0px 12px 12px 12px;
-  padding: 12px 20px 16px 20px;
-  font-size: 14px;
-  font-family: PingFang SC;
-  font-weight: 400;
-  line-height: 24px;
-  color: #333333;
-}
-
-.reply-list .t-comment__actions {
-  justify-content: space-between;
-  margin-left: -30px;
-}
-
-.reply-list .t-list-item {
-  padding: 12px 16px
-}
-
-.reply-list-attachment {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.reply-list-attachment-item {
-  color: rgba(0, 0, 0, 0.4);
-  margin-right: 10px;
-  max-width: 130px;
-  overflow: hidden;
-  word-break: break-all;
-  overflow-wrap: break-word;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.reply-list-attachment-item:hover {
-  cursor: pointer;
-  color: #0052d9
-}
-
-.reply-form {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  padding: 0 16px;
-}
-
-.reply-form-btn {
-  width: 100%;
-  margin-top: 14px;
-  display: flex;
-  justify-content: space-between;
-}
-
-.reply-form-btn .t-upload__trigger {
-  margin-right: 10px
-}
-
-.reply-form-btn .t-upload__single {
-  display: flex
-}
-
-.reply-form-btn .upload-list {
-  display: flex;
-  align-items: baseline
-}
-
-.t-comment__actions>li:hover {
-  color: rgba(0, 0, 0, 0.4);
-}
-
-
-
-
-/* 图标 */
-.icon-reply {
-  background: url(../img/icon/icon-reply.png) 7px no-repeat;
-  background-size: cover;
-  background-size: 17px 17px;
-}
-
-.icon-forward {
-  background: url(../img/icon/icon-forward.png) 7px no-repeat;
-  background-size: cover;
-  background-size: 17px 17px;
-}
-
-.icon-save {
-  background: url(../img/icon/icon-save.png) 8px no-repeat;
-  background-size: cover;
-  background-size: 15px 15px;
-}
-
-
-
-
-.detail-box {
-  width: 100%;
-  // min-width: 1500px;
-
-  .top-title {
-    margin-top: 25px;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-
-    .ticket-title {
-      width: 45%;
-      margin-right: 134px;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      font-size: 16px;
-      color: rgba(0, 0, 0, 0.9);
-      font-weight: bold;
-    }
-
-    .ticket-info {
-      flex: 1;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: space-between;
-
-      .info-title {
-        font-size: 14px;
-        color: rgba(0, 0, 0, 0.4000);
-      }
-
-      .log-btn {
-        cursor: pointer;
-        display: inline-block;
-        border-radius: 3px;
-        background: #ECF2FE;
-        font-size: 14px;
-        color: var(--td-brand-color);
-        width: 88px;
-        text-align: center;
-        height: 32px;
-        line-height: 32px;
-      }
-
-      .blue-text {
-        cursor: pointer;
-        color: var(--td-brand-color);
-      }
-
-      .info-item {
-        color: rgba(0, 0, 0, 0.9);
-      }
-    }
-  }
-
-  .select-box {
-    margin-top: 35px;
-    display: flex;
-    justify-content: space-between;
-
-    .left-btn {
-      display: flex;
-      flex-wrap: wrap;
-
-      .host-div {
-        min-width: 200px;
-        max-width: 500px;
-        margin-right: 57px;
-        white-space: inherit;
-      }
-
-      .host-item {
-        cursor: pointer;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
-      >div {
-        display: flex;
-        align-items: center;
-      }
-
-      >div>span {
-        white-space: nowrap;
-        color: rgba(0, 0, 0, 0.9);
-        font-size: 14px;
-      }
-
-      .select-240 {
-        min-width: 240px;
-        height: 32px;
-        margin-right: 30px;
-      }
-
-      .no-mar {
-        margin: 0;
-      }
-
-      .save-btn {
-        margin-left: 20px;
-      }
-    }
-
-  }
-
-  .top-box {
-    background: #FFFFFF;
-    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.04);
-    margin-bottom: 20px;
-    padding: 20px 50px 20px 30px;
-  }
-
-  .bottom-box {
-    background: #FFFFFF;
-    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.04);
-    margin-bottom: 20px;
-    padding: 20px 40px 0px 40px;
-  }
-}
-
-.reply-item {
-  margin-bottom: 57px;
-
-
-  .reply-top {
-    .reply-user {
-      display: inline-block;
-      padding: 0px 4px;
-      font-size: 12px;
-      margin-right: 10px;
-      border-radius: 3px;
-      color: rgba(255, 255, 255, 0.9);
-    }
-
-    .user-name {
-      color: #333333;
-      font-weight: bold;
-      font-size: 16px;
-      cursor: default;
-    }
-
-    .link-style {
-      cursor: pointer;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-
-    .green-text {
-      background: #03B193;
-    }
-
-    .red-text {
-      background: #5090FF;
-    }
-
-    .pink-text {
-      background: #EB5F80;
-    }
-  }
-
-
-
-  .reply-main {
-    display: inline-block;
-
-    .reply-middle {
-      position: relative;
-      display: inline-block;
-      margin-top: 11px;
-      border-radius: 3px;
-      padding: 20px 100px 22px 30px;
-      border: 1px solid #DCDCDC;
-
-      .replu-conten {
-        display: inline-block;
-        word-break: break-word;
-
-        img {
-          width: 140px;
-          height: 84px;
-          cursor: pointer;
-        }
-
-        p {
-          margin: 0;
-        }
-      }
-
-      .text-btn {
-        position: absolute;
-        bottom: 0px;
-        right: 0px;
-        font-size: 18px;
-      }
-    }
-
-    .reply-bottom {
-      width: 100%;
-      font-size: 12px;
-      color: #333;
-
-      >div {
-        display: inline-block;
-      }
-    }
-
-    .time-div {
-      font-size: 12px;
-      color: #999999;
-      width: 100%;
-      text-align: right;
-    }
-
-  }
-
-  .green-bg {
-    border: 1px solid #DCDCDC;
-    background: #FBFFFE;
-  }
-
-  .green-bg:hover {
-    border: 1px solid #03B193;
-  }
-
-  .blue-bg {
-    border: 1px solid #5090FF;
-    background: #F2F7FF;
-  }
-
-  .blue-bg:hover {
-    border: 1px solid #5090FF;
-  }
-
-  .pink-bg {
-    border: 1px solid #DCDCDC;
-    background: #FFFBFB;
-  }
-
-  .pink-bg:hover {
-    border: 1px solid #EB5F80;
-  }
-
-
-
-}
-
-.relply-input {
-  margin-top: 40px;
-}
-
-.btn-box {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 20px;
-
-  .add-btn {
-    border-radius: 4px;
-    height: 32px;
-    background: #4787F0;
-    border: none;
-  }
-
-  .re-btn {
-    margin-left: 16px;
-    border-radius: 4px;
-    height: 32px;
-    background: #ED7B2F;
-    border: none;
-  }
-
-  .re-btn:hover {
-    background: rgba(237, 123, 47, 0.678);
-  }
-
-  .send-btn {
-    margin-right: 15px;
-    height: 32px;
-    background: var(--td-brand-color);
-    border-radius: 4px;
-    border: none;
-  }
-
-  .ok-btn {
-    border: none;
-    border-radius: 4px;
-    background: var(--td-brand-color);
-    height: 32px;
-  }
-
-  .canle-btn {
-    margin-left: 20px;
-    border: none;
-    color: #333333;
-    border-radius: 4px;
-    background: #E7E7E7;
-  }
-
-  .left {
-    display: flex;
-  }
-
-  .file {
-    display: inline-block;
-    margin-right: 10px;
-  }
-
-  .upload {
-    .t-button__text {
-      display: flex;
-      align-items: center;
-    }
-
-    .t-icon {
-      margin-right: 5px;
-    }
-  }
-}
-
-.description-box {
-  p {
-    margin: 0;
-  }
-
-
-  img {
-    width: 140px;
-    height: 84px;
-  }
-
-  white-space: normal;
-}
-
-.replay-box {
-  margin-bottom: 20px;
-  overflow: auto;
-  height: 280px;
-  border: 1px solid #DCDCDC;
-  background: rgba(231, 231, 231, 0.4);
-  padding: 0 12px;
-  padding-bottom: 20px;
-}
-
-.replay-item {
-  margin-top: 10px;
-  padding: 13px 16px;
-  border: 1px solid #DCDCDC;
-  border-radius: 3px;
-  background: #FFFFFF;
-
-  p {
-    margin: 0;
-  }
-}
-
-.replay-item:hover {
-  color: var(--td-brand-color);
-  border: 1px solid var(--td-brand-color);
-}
-
-
-
-.tox-statusbar__branding {
-  display: none !important;
-}
-
-#viewer {
-  width: 0;
-  height: 0;
-}
-
-.row-class {
-  cursor: pointer;
-}
-
-.user-name {
-  cursor: pointer;
-}
-
-
-
-.isEn .forwardForm .t-form__label {
-  width: 190px !important;
-}
-
-#content .ticket_detail {
-  background: transparent !important;
-}
-
-.center-box {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-html {
-  scroll-behavior: smooth;
-}
diff --git a/plugins/addon/example/template/admin/ticket_detail_copy.html b/plugins/addon/example/template/admin/ticket_detail_copy.html
deleted file mode 100644
index 39bd99c..0000000
--- a/plugins/addon/example/template/admin/ticket_detail_copy.html
+++ /dev/null
@@ -1,281 +0,0 @@
-<link rel="stylesheet" href="/plugins/addon/idcsmart_ticket/template/admin/css/order_copy.css" />
-<link rel="stylesheet" href="/plugins/addon/idcsmart_ticket/template/admin/css/common/viewer.min.css">
-<!-- =======内容区域======= -->
-<div id="content" class="template" v-cloak>
-  <com-config class="ticket_detail">
-    <t-loading attach="#content" size="small" :loading="pageLoading"></t-loading>
-    <div class="detail-box" ref="scrollDiv">
-      <div class="left-list-box">
-        <div class="left-top">
-          <t-divider class="reply-divider" align="left">{{lang.order_text26}}</t-divider>
-          <t-list class="reply-list">
-            <t-list-item v-for="(item, index) in replyList" :key="index">
-              <div class="reply-item">
-                <div class="reply-top" v-if="orderDetailData.post_admin_id > 0 && item.id == 0">
-                  <span class="reply-user red-text">{{lang.order_text28 }}</span>
-                  <span class="user-name" :class="item.client_id ? 'link-style' : ''"
-                    @click="goClientPage(item.client_id)">{{item.type === 'Client' ? item.client_name : item.type ===
-                    'Admin' ? item.admin_name : item.name ? item.name : '--'}}</span>
-                </div>
-                <div class="reply-top" v-else>
-                  <span class="reply-user"
-                    :class="item.type === 'Client' ? 'green-text' : item.type === 'Admin' ? 'red-text' : 'pink-text'">{{item.type
-                    === 'Client' ? lang.order_text27 : item.type === 'Admin' ? lang.order_text28 : lang.order_text29
-                    }}</span>
-                  <span class="user-name" :class="item.client_id ? 'link-style' : ''"
-                    @click="goClientPage(item.client_id)">{{item.type === 'Client' ? item.client_name : item.type ===
-                    'Admin' ? item.admin_name : item.name ? item.name : '--'}}</span>
-                  <span class="time-div"><span>{{formatDate(item.create_time)}}</span></span>
-                </div>
-                <div class="reply-main">
-                  <div class="peply-wide" @mouseover="mouseOver(item)" @mouseleave="mouseLeave(item)">
-                    <div class="reply-middle"
-                      :class="item.type === 'Client' ? 'green-bg' : item.type === 'Admin' ? 'blue-bg' : 'pink-bg'">
-                      <div v-html="item.content" @click="hanldeImage($event)" class="replu-conten"></div>
-                    </div>
-                    <div class="btns">
-                      <template v-if="item.type === 'notes'">
-                        <div class="text-btn" v-permission="'auth_user_ticket_detail_create_notes'"
-                          v-show="item.isShowBtn && item.id != 0 && orderDetailData.can_operate !== 0">
-                          <t-button :disabled="orderDetailData.can_operate === 0" shape="circle" class="edit-btn"
-                            variant="text" @click="editItem(item)">
-                            <t-icon name="edit-1" size="small" style="color:#1862DC" />
-                          </t-button>
-                          <t-button :disabled="orderDetailData.can_operate === 0" shape="circle" variant="text"
-                            @click="deleteItem(item)">
-                            <t-icon name="delete" size="small" style="color:#FF0000" />
-                          </t-button>
-                        </div>
-                      </template>
-                      <template v-else>
-                        <div class="text-btn" v-permission="'auth_user_ticket_detail_reply_ticket'"
-                          v-show="item.isShowBtn && item.id != 0 && orderDetailData.can_operate !== 0">
-                          <t-button :disabled="orderDetailData.can_operate === 0" shape="circle" class="edit-btn"
-                            variant="text" @click="editItem(item)">
-                            <t-icon name="edit-1" size="small" style="color:#1862DC" />
-                          </t-button>
-                          <t-button :disabled="orderDetailData.can_operate === 0" shape="circle" variant="text"
-                            @click="deleteItem(item)">
-                            <t-icon name="delete" size="small" style="color:#FF0000" />
-                          </t-button>
-                        </div>
-                      </template>
-                    </div>
-                  </div>
-                  <div class="reply-bottom">
-                    <div v-if="item.attachment && item.attachment.length > 0">
-                      <div class="reply-list-attachment-item" v-for="(f,i) in item.attachment" :key="i"
-                        @click="clickFile(f)">
-                        <span :title="f.name">
-                          <t-icon name="file-paste" size="small" style="color:#9696A3"></t-icon>{{f.name}}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                  <!-- <div class="time-div"><span>{{formatDate(item.create_time)}}</span></div> -->
-                </div>
-              </div>
-            </t-list-item>
-          </t-list>
-        </div>
-        <div class="left-bottom relply-input">
-          <com-tinymce ref="comTinymce"></com-tinymce>
-        </div>
-        <div class="btn-box">
-
-          <div v-if="isEditing">
-            <t-button :disabled="orderDetailData.can_operate === 0" class="ok-btn" @click="handelEdit"
-              :loading="editLoding">{{lang.order_text32}}</t-button>
-            <t-button :disabled="orderDetailData.can_operate === 0" theme="default" class="canle-btn"
-              @click="cancelEdit">{{lang.order_text33}}</t-button>
-          </div>
-          <div v-else-if="isAddNotes">
-            <div>
-              <t-button class="ok-btn" :disabled="orderDetailData.can_operate === 0" @click="handelAddNotes"
-                :loading="addNotesLing"
-                v-if="$checkPermission('auth_user_ticket_detail_create_notes')">{{lang.order_text30}}</t-button>
-              <t-button :disabled="orderDetailData.can_operate === 0" theme="default" class="canle-btn"
-                @click="cancelAddNotes">{{lang.order_text33}}</t-button>
-            </div>
-          </div>
-          <div v-else>
-            <div>
-              <t-upload v-model="attachmentList" :action="uploadUrl" :headers="uploadHeaders" multiple
-                :auto-upload="true" :format-response="formatResponse" class="file">
-                <t-button class="upload"><t-icon name="upload"></t-icon>{{lang.order_text99}}</t-button>
-              </t-upload>
-              <t-button :disabled="orderDetailData.can_operate === 0" class="send-btn" @click="submitReply"
-                :loading="sendLoading"
-                v-if="$checkPermission('auth_user_ticket_detail_reply_ticket')">{{lang.order_text34}}</t-button>
-              <t-button theme="default" @click="goList">{{lang.order_text35}}</t-button>
-            </div>
-          </div>
-          <div class="left">
-            <template v-if="!isAddNotes">
-              <t-button :disabled="orderDetailData.can_operate === 0" class="add-btn" @click="addNotes"
-                v-show="!isEditing"
-                v-if="$checkPermission('auth_user_ticket_detail_create_notes')">{{lang.order_text30}}
-              </t-button>
-              <t-button :disabled="orderDetailData.can_operate === 0" class=" re-btn" @click="replayVisible = true"
-                v-if="$checkPermission('auth_user_ticket_detail_use_prereply')">{{lang.order_text31}}
-              </t-button>
-            </template>
-          </div>
-        </div>
-      </div>
-      <div class="right-form-box">
-        <t-divider class="reply-divider" align="left">{{lang.order_detail}}</t-divider>
-        <div class="log-btn mt-15" @click="handelLog" v-permission="'auth_user_ticket_detail_ticket_log'">
-          {{lang.order_text21}}
-        </div>
-        <div class="info-title">{{lang.order_text15}}：<span class="info-item">#{{orderDetailData.ticket_num}}-
-            <span v-if="orderDetailData.downstream_delivery === 1">{{lang.order_text78}}</span><span
-              v-if="orderDetailData.upstream_ticket_id > 0">{{lang.order_text79}}</span>{{orderDetailData.title}}
-          </span></div>
-        <div class="info-title" @click="goUserPagr">{{lang.order_text18}}：<span
-            class="blue-text">{{orderDetailData.username}}</span></div>
-        <div class="info-title">{{lang.order_text19}}：<span class="info-item">{{ orderDetailData.create_time ?
-          formatDate(orderDetailData.create_time) : '--'}}</span></div>
-        <div class="info-title">{{lang.order_text20}}：<span class="info-item">{{orderDetailData.distanceTime}}</span>
-        </div>
-        <div class="product-info" v-for="(item,index) in product_obj_list" :key="item.id">
-          <div class="product-item">
-            <span class="info-title">{{lang.order_text102}}：</span>
-            <span @click="goProductDetail(item)" class="host-item">{{item.product_name}}</span>
-          </div>
-          <div class="product-item">
-            <span class="info-title">{{lang.order_text103}}：</span>
-            <span>{{item.name || '--'}}</span>
-          </div>
-          <div class="product-item">
-            <span class="info-title">{{lang.order_text104}}：</span>
-            <span v-if="item.ip_num > 0">{{item.dedicate_ip}}
-              <span v-if="item.ip_num > 1">{{item.ip_num - 1}}
-              </span>
-              <svg class="common-look" @click="copyIp(item)">
-                <use xlink:href="#icon-copy">
-                </use>
-              </svg>
-            </span>
-            <span v-else>--</span>
-          </div>
-          <div class="product-item">
-            <span class="info-title">{{lang.order_text105}}：</span>
-            <span>{{currency_prefix}}{{item.first_payment_amount}}</span>
-          </div>
-          <div class="product-item">
-            <span class="info-title">{{lang.order_text106}}：</span>
-            <span>{{formatDate(item.due_time)}}</span>
-          </div>
-        </div>
-        <!-- start -->
-        <div class="select-box">
-          <div class="left-btn">
-            <div class="mt-15">
-              <span class="info-title">{{lang.order_text22}}：</span>
-              <t-select v-if="orderDetailData.can_operate !== 0" :disabled="orderDetailData.can_operate === 0"
-                class="select-240" :max="1" @change="hostChange" :min-collapsed-num="1" clearable multiple
-                :placeholder="lang.order_text24" clearable v-model="params.selectHostList" :options="hostList"
-                :keys="{ label: 'showName', value: 'id'}" :scroll="{ type: 'virtual' }"
-                :popup-props="{ overlayInnerStyle: { height: '300px' } }">
-              </t-select>
-              <template v-else>
-                <span class="host-div" v-if="product_obj_list !==0">
-                  <span v-for="(item,index) in product_obj_list" :key="item.id" class="host-item"
-                    @click="goProductDetail(item)">
-                    {{item.showName}}
-                    <span v-if="(index !== product_obj_list.length - 1) && product_obj_list.length !== 1">、</span>
-                  </span>
-                </span>
-                <span class="host-div" v-else>
-                  <span class="host-item">--</span>
-                </span>
-              </template>
-            </div>
-            <div class="mt-15">
-              <span class="info-title">{{lang.order_text65}}：</span>
-              <t-select class="select-240" :placeholder="lang.please_search_order_type" clearable
-                v-model="params.ticket_type" :keys="{ label: 'name', value: 'id' }" :options="orderTypeList"></t-select>
-            </div>
-            <div class="mt-15">
-              <span class="info-title">{{lang.order_text25}}：</span>
-              <t-select :disabled="orderDetailData.can_operate === 0" class="select-240 no-mar"
-                :placeholder="lang.please_search_order_status" clearable v-model="params.status"
-                :keys="{ label: 'name', value: 'id'}" :options="order_status_options"></t-select>
-            </div>
-            <div class="save-btn">
-              <t-button @click="handelEditOrderStatus" :loading="editLoding"
-                v-permission="'auth_user_ticket_detail_save_ticket'">{{lang.order_text13}}</t-button>
-            </div>
-          </div>
-          <t-button v-if="orderDetailData.delivery_operate !== 0"
-            @click="deliveryVisible = true">{{delivery_operate_type[orderDetailData.delivery_operate]}}</t-button>
-        </div>
-        <!-- end -->
-      </div>
-    </div>
-
-    <t-back-top container=".area" :visible-height="0" style="position: fixed" :offset="['30px', '245px']"
-      :duration="200">
-      <template #content>
-        <div>
-          <t-icon name="backtop" size="28"></t-icon>
-          <div>{{lang.order_text100}}</div>
-        </div>
-      </template>
-    </t-back-top>
-
-    <t-back-top :visible-height="0" style="position: fixed" :offset="['30px', '165px']" :duration="200">
-      <template #content>
-        <div @click="goBotoom" class="center-box">
-          <t-icon name="backtop" size="28" style="transform:rotate(180deg);"></t-icon>
-          <div>{{lang.order_text101}}</div>
-        </div>
-      </template>
-    </t-back-top>
-
-    <!-- 删除弹窗 -->
-    <t-dialog :visible.sync="deleteVisible" :header="lang.order_text36" :body="lang.order_text37"
-      @confirm="handelDelete" @close="deleteVisible = false">
-    </t-dialog>
-    <!-- 传递弹窗 -->
-    <t-dialog theme="danger" :visible.sync="deliveryVisible"
-      :header="lang.order_text84  + delivery_operate_type[orderDetailData.delivery_operate] + '?'">
-      <template slot="footer">
-        <t-button theme="primary" @click="handelDeliveryOperate" :loading="deliveryLoading">{{lang.sure}}</t-button>
-        <t-button theme="default" @click="deliveryVisible = false">{{lang.cancel}}</t-button>
-      </template>
-    </t-dialog>
-    <!-- 日志记录弹窗 -->
-    <t-dialog :header="lang.order_text21" placement="center" :visible.sync="logVisible" width="800" :footer="false">
-      <t-table :pagination="pagination" @page-change="onPageChange" row-key="index" :data="logList" :columns="columns">
-        <template #description="slotProps">
-          <div class="description-box" v-html="slotProps.row.description"></div>
-        </template>
-        <template #create_time="slotProps">
-          <div>{{formatDate(slotProps.row.create_time)}}</div>
-        </template>
-      </t-table>
-    </t-dialog>
-    <!-- 预设回复弹窗 -->
-    <t-dialog :header="lang.order_text38" :placement="top" :close-btn="false" :confirm-btn="null" :top="'20%'"
-      :visible.sync="replayVisible" width="1300">
-      <div class="replay-box">
-        <div class="replay-item" @click="usePrePlay(item)" v-for="item in prereplyList" :key="item.id"
-          v-html="item.content"></div>
-      </div>
-    </t-dialog>
-    <div>
-      <img id="viewer" :src="preImg" alt="">
-    </div>
-  </com-config>
-</div>
-<!-- =======页面独有======= -->
-<script src="/plugins/addon/idcsmart_ticket/template/admin/js/lang.js"></script>
-
-<script src="/plugins/addon/idcsmart_ticket/template/admin/api/order.js"></script>
-<script src="/plugins/addon/idcsmart_ticket/template/admin/js/ticket_detail.js"></script>
-<script src="/tinymce/tinymce.min.js"></script>
-<script src="/plugins/addon/idcsmart_ticket/template/admin/js/common/viewer.min.js"></script>
-<script src="/plugins/addon/idcsmart_ticket/template/admin/js/xss.js"></script>
-<script src="/{$template_catalog}/template/{$themes}/components/comTinymce/comTinymce.js"></script>
diff --git a/plugins/addon/theme_configurator/template/admin/theme.css b/plugins/addon/theme_configurator/template/admin/theme.css
index c313fda..a4aaf84 100644
--- a/plugins/addon/theme_configurator/template/admin/theme.css
+++ b/plugins/addon/theme_configurator/template/admin/theme.css
@@ -7,6 +7,30 @@
 .template {
   max-width: 1400px;
   margin: 0 auto;
+  padding: 20px;
+}
+
+/* 隐藏加载时的闪烁 */
+[v-cloak] {
+  display: none;
+}
+
+/* 页面标题优化 */
+.template > h1 {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid #e2e8f0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.template > h1::before {
+  content: '🎨';
+  font-size: 32px;
 }
 
 /* 卡片优化 - 增加层次感和呼吸感 */
@@ -16,17 +40,33 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
   transition: all 0.3s ease;
   overflow: hidden;
+  background: white;
 }
 
 .theme-card:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  transform: translateY(-2px);
+}
+
+/* 卡片标题优化 */
+.theme-card .t-card__title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1e293b;
+  padding: 20px 24px;
+  border-bottom: 2px solid #f1f5f9;
+  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
+}
+
+.theme-card .t-card__body {
+  padding: 24px;
 }
 
 /* 表单网格 - 优化间距和布局 */
 .form-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 24px;
   padding: 4px 0;
 }
 
@@ -34,7 +74,7 @@
 .form-item {
   display: flex;
   flex-direction: column;
-  min-height: 70px;
+  min-height: 76px;
 }
 
 .form-item--full {
@@ -44,9 +84,9 @@
 /* 标签样式优化 - 更清晰的视觉层次 */
 .form-item label {
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
   color: #374151;
-  margin-bottom: 8px;
+  margin-bottom: 10px;
   display: flex;
   align-items: center;
   line-height: 1.5;
@@ -55,11 +95,11 @@
 .form-item label::before {
   content: '';
   width: 3px;
-  height: 14px;
-  background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
+  height: 16px;
+  background: linear-gradient(180deg, #38BDF8 0%, #6366F1 100%);
   border-radius: 2px;
-  margin-right: 8px;
-  opacity: 0.6;
+  margin-right: 10px;
+  opacity: 0.8;
 }
 
 /* Switch 开关优化 - 解决"新窗口打开"文字过长问题 */
@@ -67,10 +107,10 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  min-height: 48px;
-  padding: 12px 16px;
+  min-height: 52px;
+  padding: 14px 18px;
   background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-  border-radius: 8px;
+  border-radius: 10px;
   border: 1px solid #e2e8f0;
   transition: all 0.3s ease;
 }
@@ -78,82 +118,86 @@
 .form-item--switch:hover {
   background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
   border-color: #cbd5e1;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 .form-item--switch label {
   margin-bottom: 0;
-  font-size: 13px;
+  font-size: 14px;
   flex: 1;
-}
-
-.form-item--switch label::before {
-  display: none;
-}
-
-/* Switch 标签图标优化 */
-.switch-label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: #64748b;
-  font-size: 13px;
   font-weight: 500;
 }
 
+.form-item--switch label::before {
+  background: linear-gradient(180deg, #38BDF8 0%, #6366F1 100%);
+  height: 14px;
+  width: 3px;
+}
+
+/* Switch 标签图标优化 */
 .switch-label-icon {
-  width: 16px;
-  height: 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
+  width: 18px;
+  height: 18px;
+  background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
   border-radius: 4px;
   color: white;
-  font-size: 10px;
-  font-weight: 600;
+  font-size: 11px;
+  font-weight: 700;
+  margin-right: 6px;
 }
 
 /* 提示文本优化 */
 .theme-tip {
-  margin: 0 0 16px;
-  padding: 12px 16px;
+  margin: 0 0 20px;
+  padding: 14px 18px;
   background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
-  border-left: 3px solid #3b82f6;
-  border-radius: 6px;
+  border-left: 4px solid #38BDF8;
+  border-radius: 8px;
   color: #475569;
   font-size: 13px;
-  line-height: 1.6;
+  line-height: 1.7;
 }
 
 .theme-tip code {
-  padding: 2px 6px;
-  background: rgba(59, 130, 246, 0.1);
-  border-radius: 3px;
-  color: #3b82f6;
-  font-family: 'JetBrains Mono', Consolas, monospace;
+  padding: 3px 8px;
+  background: rgba(56, 189, 248, 0.12);
+  border-radius: 4px;
+  color: #38BDF8;
+  font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
   font-size: 12px;
+  font-weight: 500;
 }
 
 /* JSON 编辑器优化 */
 .theme-textarea textarea {
-  font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
+  font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
   font-size: 13px;
-  line-height: 1.6;
-  background: #1e293b;
+  line-height: 1.7;
+  background: #0f172a;
   color: #e2e8f0;
-  border-radius: 8px;
-  padding: 16px !important;
+  border-radius: 10px;
+  padding: 18px !important;
+  border: 1px solid #1e293b;
+}
+
+.theme-textarea textarea:focus {
+  background: #1e293b;
+  border-color: #38BDF8;
+  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
 }
 
 /* 轮播/配置项卡片优化 - 更有层次感 */
 .banner-item,
 .config-item {
   border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  padding: 20px;
-  margin-bottom: 20px;
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 24px;
   background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
@@ -167,7 +211,7 @@
   left: 0;
   right: 0;
   height: 4px;
-  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
+  background: linear-gradient(90deg, #38BDF8 0%, #6366F1 50%, #8B5CF6 100%);
   opacity: 0;
   transition: opacity 0.3s ease;
 }
@@ -175,8 +219,8 @@
 .banner-item:hover,
 .config-item:hover {
   border-color: #cbd5e1;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+  transform: translateY(-3px);
 }
 
 .banner-item:hover::before,
@@ -190,48 +234,48 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
-  padding-bottom: 12px;
+  margin-bottom: 24px;
+  padding-bottom: 14px;
   border-bottom: 2px solid #f1f5f9;
 }
 
 .banner-item__header h4,
 .config-item__header h4 {
   margin: 0;
-  font-size: 16px;
-  font-weight: 600;
+  font-size: 17px;
+  font-weight: 700;
   color: #1e293b;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
 }
 
 .banner-item__header h4::before,
 .config-item__header h4::before {
   content: '●';
-  color: #3b82f6;
-  font-size: 12px;
+  color: #38BDF8;
+  font-size: 14px;
 }
 
 /* 子标题优化 */
 .sub-title {
-  margin: 24px 0 12px;
-  padding-left: 12px;
-  font-size: 15px;
-  font-weight: 600;
+  margin: 32px 0 16px;
+  padding-left: 14px;
+  font-size: 16px;
+  font-weight: 700;
   color: #475569;
-  border-left: 3px solid #3b82f6;
+  border-left: 4px solid #38BDF8;
   display: flex;
   align-items: center;
 }
 
 /* 空状态优化 - 更友好的视觉引导 */
 .empty-tip {
-  padding: 32px 24px;
+  padding: 40px 24px;
   border: 2px dashed #cbd5e1;
-  border-radius: 10px;
+  border-radius: 12px;
   color: #64748b;
-  margin-bottom: 20px;
+  margin-bottom: 24px;
   background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
   text-align: center;
   font-size: 14px;
@@ -243,9 +287,9 @@
 .empty-tip::before {
   content: '📋';
   display: block;
-  font-size: 32px;
+  font-size: 36px;
   margin-bottom: 12px;
-  opacity: 0.6;
+  opacity: 0.7;
 }
 
 .empty-tip:hover {
@@ -257,7 +301,7 @@
 .upload-row {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
 }
 
 .upload-row .t-input {
@@ -266,7 +310,7 @@
 
 .upload-row .t-button {
   flex-shrink: 0;
-  min-width: 80px;
+  min-width: 90px;
 }
 
 /* 底部操作栏优化 */
@@ -275,12 +319,12 @@
   justify-content: flex-end;
   align-items: center;
   gap: 12px;
-  margin-top: 32px;
-  padding: 20px 24px;
+  margin-top: 40px;
+  padding: 24px;
   background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
   border-radius: 12px;
   border: 1px solid #e2e8f0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
   position: sticky;
   bottom: 20px;
   z-index: 100;
@@ -288,24 +332,26 @@
 
 /* 按钮增强 */
 .action-bar .t-button {
-  min-width: 120px;
-  font-weight: 500;
+  min-width: 130px;
+  font-weight: 600;
   transition: all 0.3s ease;
+  padding: 10px 24px;
 }
 
 .action-bar .t-button--primary {
-  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+  background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
+  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35);
+  border: none;
 }
 
 .action-bar .t-button--primary:hover {
-  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
+  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.45);
   transform: translateY(-2px);
 }
 
 /* 间距工具类优化 */
 .mt-10 {
-  margin-top: 16px;
+  margin-top: 20px;
 }
 
 .ml-10 {
@@ -313,29 +359,41 @@
 }
 
 .mb-10 {
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 }
 
 /* Tab 标签页优化 */
 .t-tabs__nav {
   background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
-  border-radius: 10px 10px 0 0;
-  padding: 8px;
+  border-radius: 12px 12px 0 0;
+  padding: 10px;
+  margin-bottom: 24px;
 }
 
 .t-tab {
-  font-weight: 500;
+  font-weight: 600;
+  font-size: 15px;
   transition: all 0.3s ease;
+  padding: 10px 20px;
+  border-radius: 8px;
+}
+
+.t-tab:hover {
+  background: rgba(56, 189, 248, 0.08);
 }
 
 .t-tab.t-is-active {
-  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+  background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%) !important;
   color: white !important;
-  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
 }
 
 /* 响应式优化 */
 @media (max-width: 768px) {
+  .template {
+    padding: 12px;
+  }
+
   .form-grid {
     grid-template-columns: 1fr;
     gap: 16px;
@@ -343,12 +401,14 @@
 
   .banner-item,
   .config-item {
-    padding: 16px;
+    padding: 18px;
   }
 
   .action-bar {
     flex-direction: column;
-    gap: 8px;
+    gap: 10px;
+    position: relative;
+    bottom: 0;
   }
 
   .action-bar .t-button {
@@ -364,36 +424,37 @@
 
 /* 滚动条美化 */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-track {
   background: #f1f5f9;
-  border-radius: 4px;
+  border-radius: 5px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
-  border-radius: 4px;
+  background: linear-gradient(180deg, #38BDF8 0%, #6366F1 100%);
+  border-radius: 5px;
   transition: background 0.3s ease;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(180deg, #2563eb 0%, #7c3aed 100%);
+  background: linear-gradient(180deg, #0EA5E9 0%, #4F46E5 100%);
 }
 
 /* 输入框聚焦优化 */
 .t-input:focus-within,
 .t-textarea:focus-within {
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
+  border-color: #38BDF8;
 }
 
 /* 加载状态优化 */
 .t-button--loading {
-  opacity: 0.7;
+  opacity: 0.6;
   cursor: not-allowed;
+  pointer-events: none;
 }
 
 /* 删除按钮优化 */
@@ -403,7 +464,7 @@
 
 .t-button--danger:hover {
   transform: scale(1.05);
-  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
 }
 
 /* 成功状态提示 */
@@ -411,25 +472,44 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 4px 12px;
+  padding: 6px 14px;
   background: linear-gradient(135deg, #10b981 0%, #059669 100%);
   color: white;
-  border-radius: 16px;
-  font-size: 12px;
-  font-weight: 500;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
 }
 
 /* 表单验证提示 */
 .form-error {
   color: #ef4444;
-  font-size: 12px;
-  margin-top: 4px;
+  font-size: 13px;
+  margin-top: 6px;
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
+  font-weight: 500;
 }
 
 .form-error::before {
   content: '⚠';
-  font-size: 14px;
+  font-size: 15px;
+}
+
+/* 动画效果 */
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.banner-item,
+.config-item {
+  animation: slideIn 0.3s ease;
 }