样式

Author: Linho1219

src/editor/inputs/implicit.vue

@@ -1,13 +1,11 @@
 <template>
   <div class="input-inner">
     <div class="field main-fn">
-      <s-text-field
+      <FilledTextfield
         class="styled fn"
-        ref="inputBox"
         label="F(x, y)"
         v-model="self.fn"
-      >
-      </s-text-field>
+      />
       <span class="label styled"> =0 </span>
     </div>
     <s-fold :folded="props.folded">
@@ -27,6 +25,8 @@ import { toRef } from "vue";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 
+import FilledTextfield from "@/ui/components/filled-textfield.vue";
+
 const props = defineProps<{
   folded: boolean;
   self: PrivateDataTypes.Implicit;

src/editor/inputs/linear.vue

@@ -2,8 +2,7 @@
   <div class="input-inner">
     <div class="field main-fn">
       <span class="label styled">y=</span>
-      <filledTextfield class="styled fn" label="f(x)" v-model="self.fn">
-      </filledTextfield>
+      <filledTextfield class="styled fn" label="f(x)" v-model="self.fn" />
     </div>
     <s-fold :folded="props.folded">
       <s-divider>{{ t("title.moreOptions") }}</s-divider>
@@ -36,19 +35,20 @@ import FilledTextfield from "@/ui/components/filled-textfield.vue";
 .input-inner {
   display: flex;
   flex-direction: column;
+  gap: 6px;
 
   .field.main-fn {
     display: flex;
     align-items: center;
     font-size: 25px;
     .label {
-      margin: 0 0.1em -0.1em 0;
+      margin: 0 0.1em 0 0;
       width: 1.8em;
       margin-left: 0;
       text-align: right;
     }
     .fn {
-      font-size: 22px;
+      font-size: 24px;
       width: 0;
       flex-grow: 1;
     }

src/editor/inputs/parametric.vue

@@ -2,23 +2,11 @@
   <div class="input-inner">
     <div class="field main-fn">
       <span class="label styled">x=</span>
-      <s-text-field
-        class="styled fn"
-        ref="inputBox"
-        label="f(t)"
-        v-model="self.x"
-      >
-      </s-text-field>
+      <FilledTextfield class="styled fn" label="f(t)" v-model="self.x" />
     </div>
     <div class="field main-fn">
       <span class="label styled">y=</span>
-      <s-text-field
-        class="styled fn"
-        ref="inputBox"
-        label="g(t)"
-        v-model="self.y"
-      >
-      </s-text-field>
+      <FilledTextfield class="styled fn" label="g(t)" v-model="self.y" />
     </div>
     <s-fold :folded="props.folded">
       <s-divider>{{ t("title.moreOptions") }}</s-divider>
@@ -37,6 +25,8 @@ import { toRef } from "vue";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 
+import FilledTextfield from "@/ui/components/filled-textfield.vue";
+
 const props = defineProps<{
   folded: boolean;
   self: PrivateDataTypes.Parametric;

src/ui/components/filled-textfield.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="filled-textfield" :class="{ focus: isFocus }">
-    <label :class="{ lifted: isFocus || !isEmpty }">{{ props.label }}</label>
+    <label :class="{ lifted: !isEmpty }">{{ props.label }}</label>
     <input
       @focus="isFocus = true"
       @blur="isFocus = false"
@@ -26,18 +26,15 @@ const isEmpty = computed(() => value.value === "");
   background-color: var(--s-color-surface-container-high);
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
-  border-bottom: var(--s-color-outline) solid 0.15em;
+  border-bottom: var(--s-color-outline) solid 0.1em;
   transition:
     background-color 0.2s,
     border-bottom-color 0.2s;
-  padding: 1em 0.6em 0.3em 0.6em;
+  padding: 0;
   display: flex;
   &.focus {
     background-color: var(--s-color-surface-container-highest);
     border-bottom-color: var(--s-color-primary);
-    label {
-      color: var(--s-color-primary);
-    }
   }
   input {
     background-color: transparent;
@@ -48,22 +45,20 @@ const isEmpty = computed(() => value.value === "");
     display: block;
     width: 0;
     flex-grow: 1;
-    padding: 0;
+    padding: 0.4em 0.45em 0.3em 0.45em;
+    caret-color: var(--s-color-primary);
     line-height: 1.2;
     z-index: 1;
   }
   label {
     color: var(--s-color-outline);
     position: absolute;
     line-height: 1.2;
-    transition:
-      transform 0.2s,
-      font-size 0.2s;
-    transform: translateY(-0.3em);
+    transition: opacity 0.1s;
+    padding: 0.35em 0.45em 0.3em 0.45em;
   }
   label.lifted {
-    transform: translateY(-120%);
-    font-size: 0.6em;
+    opacity: 0;
   }
 }
 </style>