Add PACS image mount cache refresh settings

DICOM_and_UPP配准/static/styles.css

@@ -98,6 +98,146 @@ button {
   flex: 0 0 auto;
 }
 
+.settings-panel {
+  position: fixed;
+  inset: 66px 0 0 0;
+  z-index: 18;
+  display: flex;
+  justify-content: flex-end;
+  background: rgba(7, 10, 15, 0.62);
+  backdrop-filter: blur(10px);
+}
+
+.settings-shell {
+  width: min(760px, calc(100vw - 24px));
+  height: 100%;
+  padding: 18px;
+  border-left: 1px solid var(--line);
+  background: linear-gradient(180deg, rgba(15, 22, 32, 0.98), rgba(8, 13, 20, 0.98));
+  box-shadow: -24px 0 54px rgba(0, 0, 0, 0.38);
+  overflow: auto;
+}
+
+.settings-head,
+.settings-card-head,
+.settings-actions,
+.settings-metrics {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.settings-head {
+  margin-bottom: 16px;
+}
+
+.settings-head h2,
+.settings-card h3 {
+  margin: 0;
+}
+
+.settings-head h2 {
+  font-size: 22px;
+}
+
+.settings-head p {
+  margin: 5px 0 0;
+  color: var(--muted);
+}
+
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.settings-card {
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 16px;
+  background: rgba(10, 16, 24, 0.9);
+}
+
+.settings-card h3 {
+  font-size: 17px;
+}
+
+.switch-line {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--muted);
+}
+
+.settings-row {
+  display: grid;
+  gap: 8px;
+  margin: 18px 0;
+}
+
+.settings-row label {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.settings-row input {
+  width: 100%;
+  height: 42px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 0 12px;
+  color: var(--text);
+  background: rgba(6, 10, 15, 0.92);
+}
+
+.settings-actions {
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.cache-progress {
+  height: 10px;
+  margin: 18px 0 12px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.18);
+}
+
+.cache-progress span {
+  display: block;
+  width: 0%;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--cyan), var(--blue));
+  transition: width 0.25s ease;
+}
+
+.cache-message {
+  min-height: 42px;
+  color: var(--text);
+}
+
+.settings-metrics {
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.cache-root {
+  display: block;
+  margin-top: 14px;
+  padding: 10px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  color: #bce7ff;
+  background: rgba(6, 10, 15, 0.88);
+  white-space: normal;
+  word-break: break-all;
+}
+
 .top-actions .ghost-btn,
 .viewer-tools .ghost-btn,
 .viewer-tools .primary-btn,
@@ -1817,4 +1957,8 @@ input[type="range"] {
     overflow-x: auto;
     grid-template-columns: 320px 560px 420px;
   }
+
+  .settings-grid {
+    grid-template-columns: 1fr;
+  }
 }