切线割线面板

Author: Linho1219

.vscode/settings.json

@@ -20,7 +20,7 @@
       "base": "mock",
       "color": "cyan-800",
       "lightColor": "light-green-700",
-      "folderNames": ["inputs"]
+      "folderNames": ["inputs", "subblocks"]
     }
   ],
   "material-icon-theme.files.associations": {

src/editor/inputs/inputs.scss

@@ -21,7 +21,7 @@
     }
   }
 
-  s-fold {
+  & > s-fold {
     margin: -8px -15px 0 -15px;
   }
   s-divider {

src/editor/inputs/linear.vue

@@ -8,6 +8,11 @@
       <s-divider>{{ t("data.more.dividerTitle") }}</s-divider>
       <div class="input-inner-optional">
         <div class="fields">
+          <span class="label"> 切线与割线 </span>
+          <s-popup class="derivate-popup input" align="right">
+            <s-button type="outlined" slot="trigger"> 设置面板 </s-button>
+            <DerivatePane :self="self"/>
+          </s-popup>
           <span class="label"> {{ t("data.more.range") }} </span>
           <Domain :self="self" />
           <span class="label">
@@ -41,7 +46,7 @@
 
 <script setup lang="ts">
 import { PrivateDataTypes } from "@/types/data";
-import { toRef } from "vue";
+import {  toRef } from "vue";
 import { useI18n } from "vue-i18n";
 import { I18nSchema } from "@/i18n";
 const { t } = useI18n<{ message: I18nSchema }>();
@@ -57,5 +62,8 @@ import FilledTextfield from "./subblocks/function.vue";
 import HelpIcon from "./subblocks/helpIcon.vue";
 import ColorPicker from "./subblocks/colorPicker.vue";
 import Domain from "./subblocks/domain.vue";
+import DerivatePane from "./subblocks/derivatePane.vue";
 import "./inputs.scss";
+
 </script>
+

src/editor/inputs/subblocks/colorPicker.vue

@@ -14,7 +14,7 @@
         <s-icon name="close"></s-icon>
       </s-icon-button>
     </Transition>
-    <s-popup slot="end" ref="popup" @show="pickerKey = Symbol()">
+    <s-popup slot="end" @show="pickerKey = Symbol()" align="right">
       <s-icon-button
         slot="trigger"
         class="colorpicker-button"

src/editor/inputs/subblocks/derivatePane.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="derivate-pane">
+    <s-tab mode="fixed" v-model.lazy="tab">
+      <s-tab-item value="derivate">
+        <div slot="text">切线设置</div>
+      </s-tab-item>
+      <s-tab-item value="secant">
+        <div slot="text">割线设置</div>
+      </s-tab-item>
+    </s-tab>
+
+    <!-- derivate -->
+    <div class="content" v-if="tab === 'derivate'">
+      <div class="field">
+        <div class="label">启用切线显示</div>
+        <s-switch type="checkbox" v-model.lazy="derivateEnabled"></s-switch>
+      </div>
+      <div class="field main-fn">
+        <span class="label styled">y'=</span>
+        <FunctionField class="styled fn" label="f'(x)" v-model="derivateFn" />
+      </div>
+      <div class="field">
+        <div class="label">切点位置</div>
+        <s-segmented-button value="b">
+          <s-segmented-button-item value="a"> 指定切点 </s-segmented-button-item>
+          <s-segmented-button-item value="b"> 跟随鼠标 </s-segmented-button-item>
+        </s-segmented-button>
+      </div>
+      <div class="field">
+        <div class="label">切点横坐标</div>
+        <s-text-field type="number" label="x" class="styled"></s-text-field>
+      </div>
+    </div>
+
+    <!-- secant -->
+    <div class="content" v-else>
+      <div class="field">
+        <div class="label">启用割线显示</div>
+        <s-switch type="checkbox" v-model.lazy="secantEnabled"></s-switch>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PrivateDataTypes } from "@/types/data";
+import { ref, toRef } from "vue";
+import FunctionField from "./function.vue";
+
+const props = defineProps<{
+  self: PrivateDataTypes.Linear;
+}>();
+
+const tab = ref("derivate");
+const self = toRef(props, "self");
+
+const derivateEnabled = ref(false);
+const derivateFn = ref("");
+const secantEnabled = ref(false);
+</script>
+
+<style lang="scss">
+.derivate-pane {
+  width: 25em;
+  .content {
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+  }
+  .field {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .field.main-fn {
+    font-size: 1.5em;
+    .label {
+      width: 2.2em;
+    }
+  }
+}
+</style>