全局选项框架

Author: Linho1219

src/editor/options.vue

@@ -1,10 +1,79 @@
 <template>
   <s-scroll-view>
-    <s-empty>{{ t('title.inDev') }}</s-empty>
+    <div id="options">
+
+      <s-divider>{{ t("title.global") }}</s-divider>
+
+      <div class="option">
+        <span class="label">{{ t("inputs.grid") }}</span>
+        <s-switch></s-switch>
+      </div>
+      <div class="option">
+        <span class="label">{{ t("inputs.caption") }}</span>
+        <s-text-field :label="t('inputs.caption')"></s-text-field>
+      </div>
+
+      <s-divider>{{ t("title.horizontal") }}</s-divider>
+      <div class="option">
+        <span class="label">{{ t("inputs.grow") }}</span>
+        <s-picker :label="t('inputs.grow')" :key="locale">
+          <s-picker-item value="linear" selected>{{
+            t("inputs.linear")
+          }}</s-picker-item>
+          <s-picker-item value="log">{{ t("inputs.log") }}</s-picker-item>
+        </s-picker>
+      </div>
+      <div class="option">
+        <span class="label">{{ t("inputs.caption") }}</span>
+        <s-text-field :label="t('inputs.caption')"></s-text-field>
+      </div>
+      <div class="option">
+        <span class="label">{{ t("inputs.range") }}</span>
+        <s-text-field :label="t('inputs.caption')"></s-text-field>
+      </div>
+
+      <s-divider>{{ t("title.vertical") }}</s-divider>
+      <div class="option">
+        <span class="label">{{ t("inputs.grow") }}</span>
+        <s-picker :label="t('inputs.grow')" :key="locale">
+          <s-picker-item value="linear" selected>{{
+            t("inputs.linear")
+          }}</s-picker-item>
+          <s-picker-item value="log">{{ t("inputs.log") }}</s-picker-item>
+        </s-picker>
+      </div>
+      <div class="option">
+        <span class="label">{{ t("inputs.caption") }}</span>
+        <s-text-field :label="t('inputs.caption')"></s-text-field>
+      </div>
+      <div class="option">
+        <span class="label">{{ t("inputs.range") }}</span>
+        <s-text-field :label="t('inputs.caption')"></s-text-field>
+      </div>
+    </div>
   </s-scroll-view>
 </template>
 
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
+const { t ,locale} = useI18n();
 </script>
+
+<style>
+#options {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-top: 5px;
+}
+#options s-divider {
+  font-size: 0.8em;
+  margin: 5px 15px;
+}
+.option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 30px;
+}
+</style>

src/i18n.ts

@@ -64,6 +64,11 @@ export default {
         vectorValue: "向量大小",
         vectorOffset: "起点坐标",
         location: "位置",
+        grow: "增长模式",
+        linear: "线性",
+        log: "对数",
+        caption: "标题",
+        grid: "网格线",
       },
       title: {
         output: "输出代码",
@@ -77,6 +82,9 @@ export default {
         functions: "函数列表",
         graphOptions: "图形选项",
         inDev: "开发中",
+        global: "全局",
+        horizontal: "横轴",
+        vertical: "纵轴",
       },
     },
     "en-US": {
@@ -125,6 +133,11 @@ export default {
         vectorValue: "Size",
         vectorOffset: "Offset",
         location: "Location",
+        grow: "Growth mode",
+        linear: "Linear",
+        log: "Logarithmic",
+        caption: "Caption",
+        grid: "Grid",
       },
       title: {
         output: "Output code",
@@ -138,6 +151,9 @@ export default {
         functions: "Function list",
         graphOptions: "Graph options",
         inDev: "In development",
+        global: "Global",
+        horizontal: "Horizontal Axis",
+        vertical: "Vertical Axis",
       },
     },
   },