20260721223033

code/fms/fms-vue/src/views/dashboard/index.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { ref } from "vue";
+import FmsMemoInput from "@/components/FmsMemoInput.vue";
+
+const memo = ref("");
+</script>
+
+<template>
+  <main class="memo-demo">
+    <header class="memo-demo-header">
+      <h1>Memo 输入框</h1>
+    </header>
+
+    <section class="memo-demo-content" aria-label="FmsMemoInput 测试">
+      <label for="memo-test">备注</label>
+      <FmsMemoInput
+        id="memo-test"
+        v-model="memo"
+        placeholder="点击输入备注"
+      />
+
+      <div class="memo-value">
+        <span>当前值</span>
+        <pre>{{ memo || "--" }}</pre>
+      </div>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.memo-demo {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  color: var(--fms-text);
+  background: var(--fms-surface);
+}
+
+.memo-demo-header {
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--fms-border);
+}
+
+.memo-demo-header h1 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.memo-demo-content {
+  display: grid;
+  width: min(680px, 100%);
+  grid-template-columns: 96px minmax(0, 1fr);
+  align-items: center;
+  gap: 16px;
+  padding: 32px 24px;
+}
+
+.memo-demo-content > label {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.memo-value {
+  display: grid;
+  min-width: 0;
+  grid-column: 2;
+  gap: 6px;
+}
+
+.memo-value > span {
+  color: var(--fms-text-secondary);
+  font-size: 12px;
+}
+
+.memo-value pre {
+  min-height: 72px;
+  margin: 0;
+  overflow-wrap: anywhere;
+  padding: 10px 12px;
+  border: 1px solid var(--fms-border);
+  border-radius: 4px;
+  background: var(--fms-bg);
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 20px;
+  white-space: pre-wrap;
+}
+
+@media (width <= 640px) {
+  .memo-demo-content {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .memo-value {
+    grid-column: 1;
+  }
+}
+</style>