feat: allow adding options

src/components/LineList.vue

@@ -329,12 +329,18 @@ function doIo(v: string) {
             {{ pruneHtml(line.text) }}
           </n-performant-ellipsis>
         </div>
-        <div v-else class="line-header">
+        <div v-else-if="line.type === 'scene'" class="line-header">
           <n-tag type="success">{{ line.scene === 'background' ? '背景图' : '背景音乐' }}</n-tag>
           <n-performant-ellipsis class="text-preview">
             {{ line.media }}
           </n-performant-ellipsis>
         </div>
+        <div v-else class="line-header">
+          <n-tag type="warning">选项</n-tag>
+          <n-performant-ellipsis class="text-preview">
+            <n-tag v-for="o in line.options" :key="o.key">{{ o.key }}</n-tag>
+          </n-performant-ellipsis>
+        </div>
       </template>
     </n-collapse-item>
   </n-collapse>
@@ -374,4 +380,7 @@ function doIo(v: string) {
 .text-preview {
   line-height: 2em;
 }
+.text-preview .n-tag:not(:first-child) {
+  margin-left: 0.5em;
+}
 </style>

src/components/lines/OptionLineView.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { NDynamicInput, NForm, NFormItem } from 'naive-ui';
+import { ref, watch } from 'vue';
+
+import type { OptionLine } from '../../types/lines';
+
+const props = defineProps<{
+  modelValue: OptionLine,
+}>();
+const options = ref(props.modelValue.options);
+
+function fixValue() {
+  const value = props.modelValue;
+  if (!value.options) {
+    value.options = [];
+  }
+  return value.options;
+}
+fixValue();
+
+watch(() => options.value, (v) => {
+  const current = fixValue();
+  current.splice(0);
+  current.push(...v.filter((e) => typeof e.key === 'string' && typeof e.value === 'string'));
+});
+</script>
+
+<template>
+  <n-form inline :modelValue="modelValue">
+    <n-form-item label="选项" path="options">
+      <n-dynamic-input
+        v-model:value="options"
+        preset="pair"
+        key-placeholder="选项名称"
+        value-placeholder="选项标识符（暂时没用）"
+      />
+    </n-form-item>
+  </n-form>
+</template>

src/components/lines/StoryLineView.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { NTabs, NTabPane } from 'naive-ui';
 
+import OptionLineView from './OptionLineView.vue';
 import SceneLineView from './SceneLineView.vue';
 import TextLineView from './TextLineView.vue';
-import type { Line, SceneLine, TextLine } from '../../types/lines';
+import type {
+  Line, OptionLine, SceneLine, TextLine,
+} from '../../types/lines';
 
 defineProps<{
   modelValue: Line,
@@ -19,5 +22,8 @@ defineProps<{
     <n-tab-pane name="scene" tab="场景">
       <scene-line-view :modelValue="(modelValue as SceneLine)"></scene-line-view>
     </n-tab-pane>
+    <n-tab-pane name="option" tab="选项">
+      <option-line-view :modelValue="(modelValue as OptionLine)"></option-line-view>
+    </n-tab-pane>
   </n-tabs>
 </template>

src/story/compiler.ts

@@ -51,6 +51,8 @@ ${line.text}`;
         preloaded.push(url);
         return `:${line.scene}[${line.style}] :classes[${line.classes?.join(' ') ?? ''}] ${url}`;
       }
+      case 'option':
+        return line.options.map((s) => `- ${s.key}`).join('\n');
       default:
         return '';
     }

src/types/lines.ts

@@ -1,6 +1,6 @@
 import type { Character } from './character';
 
-export const LINE_TYPES = ['text', 'scene'] as const;
+export const LINE_TYPES = ['text', 'scene', 'option'] as const;
 
 interface LineType {
   type: typeof LINE_TYPES[number];
@@ -24,7 +24,12 @@ export interface SceneLine extends LineType {
   classes?: string[];
 }
 
-export type Line = TextLine | SceneLine;
+export interface OptionLine extends LineType {
+  type: 'option';
+  options: { key: string, value: string }[];
+}
+
+export type Line = TextLine | SceneLine | OptionLine;
 
 export interface GfStory {
   characters: Character[];