添加图像选项页

src/App.vue

@@ -8,7 +8,7 @@
     <s-drawer>
       <Navbar @toggle-drawer="toogleDrawer" />
       <s-drawer id="content" :class="{ onDrawerResize }" ref="innerDrawer">
-        <div slot="start" id="editor" :style="{ width: drawerSize + 'px' }">
+        <div slot="start" id="drawer" :style="{ width: drawerSize + 'px' }">
           <Editor />
           <div id="divider" @pointerdown="handleDrawerResize"></div>
         </div>
@@ -49,7 +49,7 @@ const drawerMaxSize = computed(() => toSize(75));
 const restrictRange = (x: number) =>
   Math.min(Math.max(drawerMinSize.value, x), drawerMaxSize.value);
 
-const drawerSize = ref(restrictRange(toSize(33)));
+const drawerSize = ref(restrictRange(toSize(25)));
 const onDrawerResize = ref(false);
 
 watch(windowWidth, () => (drawerSize.value = restrictRange(drawerSize.value)));
@@ -71,7 +71,8 @@ function handleDrawerResize() {
 
 <style>
 html,
-body,:root {
+body,
+:root {
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -91,23 +92,19 @@ s-page {
   flex-grow: 1;
   display: flex;
 }
-#editor {
+#drawer {
   border-right: var(--s-color-outline-variant) 1px solid;
   position: relative;
   display: flex;
   flex-direction: column;
   margin-right: 3px; /* 为宽度调节条留空间 */
 }
-.editor-inner {
+#editor {
   height: 0;
   flex-grow: 1;
   position: relative;
 }
 
-.editor-inner s-scroll-view {
-  height: 100%;
-}
-
 #graph {
   flex-grow: 1;
   position: relative;

src/editor/datumList.vue

@@ -0,0 +1,34 @@
+<template>
+  <s-scroll-view>
+    <VueDraggable
+      v-model="profile.data"
+      :animation="200"
+      handle=".datablock-drag"
+    >
+      <Datum
+        v-for="(dataItem, i) in profile.data"
+        v-model="profile.data[i]"
+        :index="i"
+        :key="dataItem.key"
+      />
+    </VueDraggable>
+    <div class="plot-data add-data" @click="profile.data.push(getNewDatum())">
+      <s-icon name="add" />
+      {{ t("buttons.add") }}
+      <s-ripple attached></s-ripple>
+    </div>
+  </s-scroll-view>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+import { VueDraggable } from "vue-draggable-plus";
+
+import Datum from "./datum.vue";
+
+import { getNewDatum } from "@/consts";
+import { useProfile } from "@/consts";
+const profile = useProfile();
+</script>

src/editor/index.vue

@@ -1,25 +1,22 @@
 <template>
-  <div class="editor-inner">
-    <s-scroll-view>
-      <VueDraggable
-        v-model="profile.data"
-        :animation="200"
-        handle=".datablock-drag"
-      >
-        <Datum
-          v-for="(dataItem, i) in profile.data"
-          v-model="profile.data[i]"
-          :index="i"
-          :key="dataItem.key"
-        />
-      </VueDraggable>
-      <div class="plot-data add-data" @click="profile.data.push(getNewDatum())">
-        <s-icon name="add" />
-        {{ t("buttons.add") }}
-        <s-ripple attached></s-ripple>
-      </div>
-    </s-scroll-view>
-    <ImportBtn />
+  <div id="editor">
+    <s-tab v-if="false" v-model.lazy="currentTab">
+      <s-tab-item value="0">
+        <div slot="text">{{ t("title.functions") }}</div>
+      </s-tab-item>
+      <s-tab-item value="1">
+        <div slot="text">{{ t("title.graphOptions") }}</div>
+      </s-tab-item>
+    </s-tab>
+    <div id="editor-inner">
+      <Transition :name="transitionName">
+        <DatumList v-show="currentTabIndex === 0" />
+      </Transition>
+      <Transition :name="transitionName">
+        <GraphOptions v-show="currentTabIndex === 1" />
+      </Transition>
+      <ImportBtn />
+    </div>
   </div>
   <OutputDrawer />
 </template>
@@ -28,12 +25,73 @@
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 
-import { VueDraggable } from "vue-draggable-plus";
 import ImportBtn from "./import.vue";
-import Datum from "./datum.vue";
+import DatumList from "./datumList.vue";
+import GraphOptions from "./options.vue";
 import OutputDrawer from "./output.vue";
 
-import { getNewDatum } from "@/consts";
-import { useProfile } from "@/consts";
-const profile = useProfile();
+import { computed, ref, watch } from "vue";
+const currentTab = ref("0");
+const currentTabIndex = computed(() => Number(currentTab.value));
+const transitionName = ref("");
+
+watch(currentTabIndex, (newVal, oldVal) => {
+  if (newVal > oldVal) transitionName.value = "slide-left";
+  else transitionName.value = "slide-right";
+});
 </script>
+
+<style>
+#editor {
+  display: flex;
+  flex-direction: column;
+}
+#editor-inner {
+  height: 0;
+  flex-grow: 1;
+  position: relative;
+}
+#editor-inner s-scroll-view {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+</style>
+
+<style>
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: transform var(--s-motion-duration-medium2)
+    var(--s-motion-easing-emphasized);
+}
+
+.slide-right-enter-from {
+  transform: translateX(-100%);
+}
+.slide-right-enter-to {
+  transform: translateX(0);
+}
+.slide-right-leave-from {
+  transform: translateX(0);
+}
+.slide-right-leave-to {
+  transform: translateX(100%);
+}
+
+.slide-left-enter-from {
+  transform: translateX(100%);
+}
+.slide-left-enter-to {
+  transform: translateX(0);
+}
+.slide-left-leave-from {
+  transform: translateX(0);
+}
+.slide-left-leave-to {
+  transform: translateX(-100%);
+}
+</style>

src/editor/options.vue

@@ -0,0 +1,10 @@
+<template>
+  <s-scroll-view>
+    <s-empty>{{ t('title.inDev') }}</s-empty>
+  </s-scroll-view>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+</script>

src/editor/output.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="plot-data output">
+  <div id="output">
     <span id="outputTitle">{{ t("title.output") }} </span>
     <div id="outputBtns">
       <s-button type="text" @click="folded = !folded" id="outputFoldButton">
@@ -84,7 +84,7 @@ function copyCode() {
 </script>
 
 <style>
-.plot-data.output {
+#output {
   border-top: var(--s-color-outline-variant) 1px solid;
   display: flex;
   flex-direction: column;
@@ -112,7 +112,7 @@ function copyCode() {
   padding: 0 15px 15px 15px;
 }
 
-.plot-data.output pre {
+#formattedCode pre {
   user-select: text;
   cursor: text;
   margin: 0;

src/i18n.ts

@@ -61,6 +61,9 @@ export default {
         deleteSuccess: "已删除",
         moreOptions: "更多选项",
         copyFail: "复制失败",
+        functions: "函数列表",
+        graphOptions: "图形选项",
+        inDev: "开发中",
       },
     },
     "en-US": {
@@ -119,6 +122,9 @@ export default {
         deleteSuccess: "Deleted",
         moreOptions: "More options",
         copyFail: "Copy failed",
+        functions: "Function list",
+        graphOptions: "Graph options",
+        inDev: "In development",
       },
     },
   },