feat: 完善 Mermaid 配置与预览缩放

apps/web/src/styles.css

@@ -176,6 +176,78 @@ h1 {
   max-width: 68%;
 }
 
+.preview-toolbar {
+  display: flex;
+  flex: none;
+  min-height: 44px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 6px 20px;
+  border-bottom: 1px solid #d9dedb;
+  background: rgb(255 255 255 / 58%);
+}
+
+.preview-zoom-control {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  color: #5d7168;
+  font-size: 0.7rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.preview-zoom-slider {
+  width: 150px;
+  accent-color: #4f8a6f;
+}
+
+.preview-zoom-number {
+  display: flex;
+  width: 68px;
+  height: 30px;
+  align-items: center;
+  border: 1px solid #c9d4ce;
+  border-radius: 7px;
+  background: #fff;
+}
+
+.preview-zoom-number:focus-within {
+  border-color: #74a88f;
+  box-shadow: 0 0 0 3px rgb(116 168 143 / 16%);
+}
+
+.preview-zoom-number input {
+  min-width: 0;
+  width: 100%;
+  height: 28px;
+  padding: 0 2px 0 8px;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #356c55;
+  font: inherit;
+  font-weight: 700;
+  text-align: right;
+}
+
+.preview-zoom-number > span:last-child {
+  padding-right: 7px;
+  color: #7a8580;
+}
+
+.preview-zoom-reset {
+  min-height: 30px;
+  padding: 0 8px;
+  border-color: #c9d4ce;
+  background: #f8fbf9;
+  color: #4f695e;
+  font-size: 0.68rem;
+}
+
+.preview-zoom-reset:disabled {
+  color: #9ba49f;
+}
+
 .preview-page-indicator {
   flex: none;
   color: #5d7168;
@@ -319,7 +391,7 @@ textarea:focus {
   display: flex;
   min-width: 100%;
   flex-direction: column;
-  align-items: center;
+  align-items: safe center;
   gap: 24px;
   padding: 34px 30px;
 }
@@ -327,7 +399,6 @@ textarea:focus {
 .precise-pdf-page {
   position: relative;
   flex: none;
-  max-width: 100%;
   overflow: hidden;
   background: #fff;
   box-shadow: 0 18px 48px rgb(37 49 43 / 16%);
@@ -775,6 +846,20 @@ textarea:focus {
     flex-wrap: wrap;
   }
 
+  .preview-toolbar {
+    justify-content: center;
+    padding-inline: 10px;
+  }
+
+  .preview-zoom-control {
+    width: 100%;
+  }
+
+  .preview-zoom-slider {
+    flex: 1;
+    width: auto;
+  }
+
   .theme-control select {
     max-width: 150px;
   }