feat:完善字典管理模块

src/styles/common.scss

@@ -1,37 +1,137 @@
 @use './element.scss' as *;
 @use './stage.scss' as *;
 
-html,body{
+html,
+body {
     height: 100%;
-    margin:0;
-    padding:0;
+    margin: 0;
+    padding: 0;
 }
 
-#app{
+#app {
     height: inherit;
 }
 
 
-:root{
+:root {
     --mj-menu-header-height:#{$mj-menu-header-height};
     --mj-border-color:#{$mj-border-color};
     --mj-padding-standard:#{$mj-padding-standard};
+    --mj-popper-radius: 8px;
 }
 
 
-.filter-popper.el-popover.el-popper{
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+.filter-popper.el-popover.el-popper {
+    --el-popover-padding: 0;
+    border-radius: var(--mj-popper-radius);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 }
 
 // 全局重新element相关样式
-.mj-input-form{
-    .el-input{
-        --el-border-radius-base:10px;
-        --el-border-color:#E2E8F0;
+.mj-input-form {
+    .el-input {
+        --el-border-radius-base: 10px;
+        --el-border-color: #E2E8F0;
     }
 }
 
 
+// 搜索框动画
+.search-dict-input {
+    --default-width: 160px;
+    --max-width: 224px;
+    width: var(--default-width);
+    transition: width 0.3s ease;
 
+    &:focus-within {
+        width: var(--max-width);
+    }
+
+    .auto-expand-input {
+        --el-input-border-radius: 4px;
+        width: 100%;
+    }
+}
+
+
+//   字典状态全局样式
+.mj-status-dot {
+    cursor: pointer;
+    &::before {
+        content: "";
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background-color: var(--data-status-color);
+        margin-right: 8px;
+        vertical-align: middle;
+    }
+}
+
+
+// 筛选框全局样式内容
+.mj-filter-content {
+  width: 380px;
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-sizing: border-box;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  border: 1px solid #ebeef5;
+
+  .filter-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
+  .filter-header .title {
+    font-weight: bold;
+    font-size: 16px;
+    color: #303133;
+  }
+
+  .reset-btn {
+    font-size: 14px;
+    color: #2b65f6;
+  }
+
+  .filter-item {
+    margin-bottom: 20px;
+    label{
+      display: block;
+      font-size: 14px;
+      color: #909399;
+      margin-bottom: 8px;
+      font-weight: 500;
+    }
+  }
+
+  .custom-select {
+    width: 100%;
+    background-color: #f5f7fa;
+    box-shadow: none;
+    border: 1px solid #e4e7ed;
+    :deep(.el-input__wrapper) {
+      background-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  .apply-btn {
+    width: 100%;
+    height: 44px;
+    background-color: #2b65f6;
+    border-color: #2b65f6;
+    font-size: 16px;
+    font-weight: bold;
+    border-radius: 6px;
+    margin-top: 10px;
+    &:hover {
+      background-color: #407eff;
+      border-color: #407eff;
+    }
+  }
+}