2 Commits c043977cce ... 96d767eb5f

Auteur SHA1 Bericht Datum
  lihaiting 96d767eb5f feat(home): 首页按权限渲染质量管理看板 4 dagen geleden
  lihaiting e79db09560 feat(qualityBoard): 质量管理看板视觉与交互优化 4 dagen geleden
4 gewijzigde bestanden met toevoegingen van 747 en 180 verwijderingen
  1. 3 1
      .gitignore
  2. 4 1
      src/views/home/index.vue
  3. 113 75
      src/views/qualityBoard/components/DrillDialog.vue
  4. 627 103
      src/views/qualityBoard/index.vue

+ 3 - 1
.gitignore

@@ -23,4 +23,6 @@ yarn-error.log*
 *.sw?
 vue.config.js
 package-lock.json
-.history
+.history
+.codebuddy
+.workbuddy

+ 4 - 1
src/views/home/index.vue

@@ -2,6 +2,8 @@
   <div>
     <yuxin v-if="$hasPermission('qms:yuxin:home')"></yuxin>
 
+    <quality-board v-else-if="$hasPermission('qms:home:qualityBoard')"></quality-board>
+
     <common v-else></common>
   </div>
 </template>
@@ -9,9 +11,10 @@
 <script>
   import common from './common.vue';
   import yuxin from './yuxin.vue';
+  import qualityBoard from '../qualityBoard/index.vue';
 
   export default {
-    components: { common, yuxin },
+    components: { common, yuxin, qualityBoard },
     data() {
       return {};
     },

+ 113 - 75
src/views/qualityBoard/components/DrillDialog.vue

@@ -349,22 +349,48 @@ export default {
 </script>
 
 <style>
-/* append-to-body 后 scoped 失效,统一以 .qb-drill-dialog / .qb-drill-popper 收窄作用域 */
+/* 弹窗外壳:与看板同款深空蓝 + 青色边框 + 角括号 */
 .qb-drill-dialog.el-dialog {
-  border: 1px solid #2a4d92;
-  border-radius: 10px;
-  background: radial-gradient(circle at 12% 0%, #16304f 0%, #0c1c42 46%, #0a1730 100%);
-  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
+  border: 1px solid rgba(0, 200, 255, 0.28);
+  border-radius: 4px;
+  background:
+    radial-gradient(ellipse 70% 42% at 50% -8%, rgba(0, 150, 220, 0.25), transparent 58%),
+    linear-gradient(180deg, #001526 0%, #000912 46%, #00060d 100%);
+  box-shadow:
+    0 24px 60px rgba(0, 0, 0, 0.55),
+    0 0 32px rgba(0, 190, 255, 0.12);
   overflow: hidden;
 }
+/* 左上 / 右下角括号(与看板卡片同款) */
+.qb-drill-dialog.el-dialog::before,
+.qb-drill-dialog.el-dialog::after {
+  content: '';
+  position: absolute;
+  z-index: 3;
+  width: 18px;
+  height: 18px;
+  border: 2px solid #00eaff;
+  pointer-events: none;
+  filter: drop-shadow(0 0 6px rgba(0, 230, 255, 0.65));
+}
+.qb-drill-dialog.el-dialog::before {
+  top: 0;
+  left: 0;
+  border-width: 2px 0 0 2px;
+}
+.qb-drill-dialog.el-dialog::after {
+  right: 0;
+  bottom: 0;
+  border-width: 0 2px 2px 0;
+}
 .qb-drill-dialog .el-dialog__header {
   position: relative;
   padding: 0;
-  border-bottom: 1px solid rgba(59, 167, 255, 0.18);
+  border-bottom: 1px solid rgba(0, 200, 255, 0.22);
 }
 .qb-drill-dialog .el-dialog__body {
   padding: 0;
-  color: #dbe7f7;
+  color: #e4f6ff;
 }
 .qb-drill-head {
   display: flex;
@@ -384,31 +410,34 @@ export default {
   display: flex;
   align-items: center;
   font-size: 18px;
-  font-weight: 600;
+  font-weight: 650;
   letter-spacing: 1px;
-  color: #eaf4ff;
+  color: #eaf9ff;
+  text-shadow: 0 0 12px rgba(0, 200, 255, 0.35);
 }
+/* 标题竖条:看板面板标题同款渐变辉光条 */
 .qb-drill-title-bar {
   width: 4px;
   height: 16px;
   margin-right: 8px;
-  border-radius: 2px;
-  background: linear-gradient(180deg, #4fb6ff, #25d0b0);
+  background: linear-gradient(180deg, #7af6ff, rgba(0, 180, 255, 0.1));
+  box-shadow: 0 0 10px rgba(0, 230, 255, 0.8);
 }
 .qb-drill-source {
   margin-top: 4px;
   font-size: 12px;
-  color: #8aa0bd;
+  color: #7eafc8;
 }
-/* 工厂筛选提示:与标题同一行,用边框胶囊与口径说明区分 */
+/* 工厂筛选提示:青色胶囊,与口径说明区分 */
 .qb-drill-factory {
   margin-top: 4px;
   margin-left: 10px;
   padding: 1px 10px;
   font-size: 12px;
-  color: #7fe3c8;
-  border: 1px solid rgba(37, 208, 176, 0.45);
+  color: #4fe3ff;
+  border: 1px solid rgba(0, 210, 255, 0.4);
   border-radius: 10px;
+  background: rgba(0, 150, 220, 0.12);
 }
 /* 导出 / 关闭按钮组:绝对定位到标题栏右上角,不受标题宽度影响 */
 .qb-drill-head-right {
@@ -425,10 +454,10 @@ export default {
   align-items: center;
   padding: 6px 14px;
   font-size: 12px;
-  color: #cfe2ff;
-  background: rgba(59, 167, 255, 0.12);
-  border: 1px solid rgba(59, 167, 255, 0.5);
-  border-radius: 6px;
+  color: #d5f1ff;
+  background: rgba(0, 40, 70, 0.6);
+  border: 1px solid rgba(0, 210, 255, 0.45);
+  border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s;
 }
@@ -437,8 +466,9 @@ export default {
 }
 .qb-drill-btn:hover:not(:disabled) {
   color: #fff;
-  background: rgba(59, 167, 255, 0.26);
-  border-color: #3ba7ff;
+  background: rgba(0, 150, 220, 0.3);
+  border-color: rgba(0, 230, 255, 0.8);
+  box-shadow: 0 0 14px rgba(0, 200, 255, 0.25);
   transform: translateY(-1px);
 }
 .qb-drill-btn:disabled {
@@ -446,10 +476,16 @@ export default {
   cursor: not-allowed;
 }
 .qb-drill-btn-primary {
-  color: #fff;
-  background: linear-gradient(90deg, #2b7cff, #25d0b0);
+  color: #02121f;
+  background: linear-gradient(90deg, #00b4ff, #00eaff);
   border-color: transparent;
   font-weight: 600;
+  text-shadow: none;
+}
+.qb-drill-btn-primary:hover:not(:disabled) {
+  color: #02121f;
+  background: linear-gradient(90deg, #00c4ff, #4df0ff);
+  box-shadow: 0 0 18px rgba(0, 220, 255, 0.45);
 }
 /* 右上角关闭按钮 */
 .qb-drill-btn-close {
@@ -465,6 +501,7 @@ export default {
   color: #fff;
   background: rgba(255, 107, 129, 0.28);
   border-color: #ff6b81;
+  box-shadow: 0 0 14px rgba(255, 107, 129, 0.3);
 }
 .qb-drill-body {
   padding: 0 18px 12px;
@@ -475,7 +512,7 @@ export default {
   align-items: center;
   gap: 8px 10px;
   padding: 12px 0;
-  border-bottom: 1px dashed rgba(59, 167, 255, 0.16);
+  border-bottom: 1px dashed rgba(0, 200, 255, 0.18);
 }
 .qb-drill-field {
   display: flex;
@@ -486,7 +523,7 @@ export default {
   flex: 0 0 auto;
   margin-right: 6px;
   font-size: 12px;
-  color: #8aa0bd;
+  color: #7eafc8;
   white-space: nowrap;
 }
 .qb-drill-control {
@@ -517,150 +554,151 @@ export default {
 }
 .qb-drill-total {
   font-size: 12px;
-  color: #8aa0bd;
+  color: #7eafc8;
 }
 .qb-drill-total i {
   font-style: normal;
   font-weight: 700;
-  color: #4fb6ff;
+  color: #4fe3ff;
 }
 
 .qb-drill-tag {
   border: none;
 }
-/* 输入控件深色化 */
+/* 输入控件深色化(青色系) */
 .qb-drill-dialog .el-input__inner,
 .qb-drill-dialog .el-range-input,
 .qb-drill-dialog .el-range-separator {
-  background: #0e1a30;
-  color: #dbe7f7;
-  border-color: rgba(42, 77, 146, 0.9);
+  background: rgba(0, 24, 46, 0.9);
+  color: #e4f6ff;
+  border-color: rgba(0, 210, 255, 0.38);
   font-size: 12px;
 }
 .qb-drill-dialog .el-range-editor.el-input__inner {
-  background: #0e1a30;
-  border-color: rgba(42, 77, 146, 0.9);
+  background: rgba(0, 24, 46, 0.9);
+  border-color: rgba(0, 210, 255, 0.38);
 }
 .qb-drill-dialog .el-input__inner:focus,
 .qb-drill-dialog .el-range-editor.is-active {
-  border-color: #3ba7ff;
-  box-shadow: 0 0 0 2px rgba(59, 167, 255, 0.16);
+  border-color: rgba(0, 230, 255, 0.8);
+  box-shadow: 0 0 0 2px rgba(0, 220, 255, 0.16);
 }
 .qb-drill-dialog .el-range-editor.is-active .el-range-input {
-  background: #0e1a30;
+  background: rgba(0, 24, 46, 0.9);
 }
 .qb-drill-dialog .el-range-editor .el-range__icon,
 .qb-drill-dialog .el-range-editor .el-range__close-icon {
-  color: #54708f;
+  color: #6f97b0;
 }
-/* 表格深色化 */
+/* 表格深色化(青色系) */
 .qb-drill-dialog .el-table {
   background: transparent;
-  color: #cfe2ff;
+  color: #d5f1ff;
   font-size: 12px;
 }
 .qb-drill-dialog .el-table::before {
-  background-color: rgba(42, 77, 146, 0.5);
+  background-color: rgba(0, 200, 255, 0.3);
 }
 .qb-drill-dialog .el-table th.el-table__cell {
-  background: #10233f;
-  color: #8aa0bd;
+  background: rgba(0, 45, 80, 0.65);
+  color: #8fc4de;
   font-weight: 600;
   font-size: 12px;
-  border-bottom-color: rgba(42, 77, 146, 0.6);
+  border-bottom-color: rgba(0, 200, 255, 0.35);
 }
 .qb-drill-dialog .el-table tr {
   background: transparent;
 }
 .qb-drill-dialog .el-table td.el-table__cell {
-  border-bottom-color: rgba(42, 77, 146, 0.35);
+  border-bottom-color: rgba(0, 200, 255, 0.18);
   background: transparent;
 }
 .qb-drill-dialog .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
-  background: rgba(59, 167, 255, 0.04);
+  background: rgba(0, 200, 255, 0.05);
 }
 .qb-drill-dialog .el-table__body tr:hover > td.el-table__cell {
-  background: rgba(59, 167, 255, 0.12) !important;
+  background: rgba(0, 200, 255, 0.14) !important;
 }
 .qb-drill-dialog .el-table__empty-text {
-  color: #54708f;
+  color: #6f97b0;
   font-size: 12px;
 }
 .qb-drill-dialog .el-table__fixed-right::before,
 .qb-drill-dialog .el-table__fixed::before {
-  background-color: rgba(42, 77, 146, 0.5);
+  background-color: rgba(0, 200, 255, 0.3);
 }
-/* 分页深色化 */
+/* 分页深色化(青色系) */
 .qb-drill-dialog .el-pagination {
   padding: 0;
-  color: #8aa0bd;
+  color: #7eafc8;
   font-size: 12px;
 }
 .qb-drill-dialog .el-pagination.is-background .btn-prev,
 .qb-drill-dialog .el-pagination.is-background .btn-next,
 .qb-drill-dialog .el-pagination.is-background .el-pager li {
-  background: rgba(59, 167, 255, 0.08);
-  color: #8aa0bd;
-  border: 1px solid rgba(42, 77, 146, 0.6);
+  background: rgba(0, 190, 255, 0.1);
+  color: #8fc4de;
+  border: 1px solid rgba(0, 200, 255, 0.3);
 }
 .qb-drill-dialog .el-pagination.is-background .el-pager li:not(.disabled).active {
-  background: linear-gradient(90deg, #2b7cff, #25d0b0);
-  color: #fff;
+  background: linear-gradient(90deg, #00b4ff, #00eaff);
+  color: #02121f;
+  font-weight: 600;
   border-color: transparent;
 }
 .qb-drill-dialog .el-pagination .el-select .el-input .el-input__inner,
 .qb-drill-dialog .el-pagination__editor.el-input .el-input__inner {
-  background: #0e1a30;
-  color: #dbe7f7;
-  border-color: rgba(42, 77, 146, 0.9);
+  background: rgba(0, 24, 46, 0.9);
+  color: #e4f6ff;
+  border-color: rgba(0, 210, 255, 0.38);
 }
-/* 下拉面板挂载在 body,单独收窄 */
+/* 下拉面板挂载在 body,单独收窄(HR org-popper 同款) */
 .qb-drill-popper.el-select-dropdown,
 .qb-drill-popper.el-picker-panel {
-  background: #0e1a30;
-  border-color: #2a4d92;
-  color: #dbe7f7;
+  background: linear-gradient(180deg, rgba(3, 28, 48, 0.98), rgba(2, 15, 30, 0.98));
+  border-color: rgba(0, 200, 255, 0.34) !important;
+  color: #e4f6ff;
 }
 .qb-drill-popper .el-select-dropdown__item {
-  color: #cfe2ff;
+  color: #d5f1ff;
   font-size: 12px;
 }
 .qb-drill-popper .el-select-dropdown__item.hover,
 .qb-drill-popper .el-select-dropdown__item:hover {
-  background: rgba(59, 167, 255, 0.14);
+  background: rgba(0, 150, 220, 0.22);
 }
 .qb-drill-popper .el-select-dropdown__item.selected {
-  color: #4fb6ff;
+  color: #4fe3ff;
 }
 .qb-drill-popper .el-date-table th {
-  color: #8aa0bd;
+  color: #8fc4de;
 }
 .qb-drill-popper .el-date-table td.available:hover,
 .qb-drill-popper .el-date-table td.today span {
-  color: #4fb6ff;
+  color: #4fe3ff;
 }
 .qb-drill-popper .el-date-table td.in-range div,
 .qb-drill-popper .el-date-table td.in-range div:hover {
-  background: rgba(59, 167, 255, 0.16);
+  background: rgba(0, 150, 220, 0.24);
 }
 .qb-drill-popper .el-picker-panel__icon-btn,
 .qb-drill-popper .el-date-picker__header-label,
 .qb-drill-popper .el-date-range-picker__header div {
-  color: #cfe2ff;
+  color: #d5f1ff;
 }
 .qb-drill-popper .el-picker-panel__footer {
-  background: #0c1c42;
-  border-top-color: rgba(42, 77, 146, 0.5);
+  background: rgba(2, 15, 30, 0.98);
+  border-top-color: rgba(0, 200, 255, 0.3);
 }
 .qb-drill-popper .el-button--text {
-  color: #4fb6ff;
+  color: #4fe3ff;
 }
 .qb-drill-popper .el-time-panel {
-  background: #0e1a30;
-  border-color: #2a4d92;
+  background: linear-gradient(180deg, rgba(3, 28, 48, 0.98), rgba(2, 15, 30, 0.98));
+  border-color: rgba(0, 200, 255, 0.34);
 }
 .qb-drill-popper .el-time-spinner__item {
-  color: #cfe2ff;
+  color: #d5f1ff;
 }
 @media (max-width: 1280px) {
   .qb-drill-field {

File diff suppressed because it is too large
+ 627 - 103
src/views/qualityBoard/index.vue


Some files were not shown because too many files changed in this diff