11<template >
2- <vscode-textfield placeholder =" 名称" ></vscode-textfield >
3- <vscode-textfield placeholder =" 本地化名称" ></vscode-textfield >
4- <vscode-textfield placeholder =" 图像(需在interface/*.gfx中定义)" ></vscode-textfield >
5- <vscode-multi-select placeholder =" 类别" >
6- <vscode-option >将军</vscode-option >
7- <vscode-option >陆军元帅</vscode-option >
8- <vscode-option >海军将领</vscode-option >
9- </vscode-multi-select >
10- </template >
2+ <div style =" display : flex ; flex-direction : row ; gap : 8px ; margin : 12px ;" >
3+ <div style =" display : flex ; flex-direction : column ; gap : 4px ;" >
4+ <vscode-label >名称</vscode-label >
5+ <vscode-textfield ></vscode-textfield >
6+ <vscode-label >本地化名称</vscode-label >
7+ <vscode-textfield ></vscode-textfield >
8+ <vscode-label >图像</vscode-label >
9+ <vscode-textfield placeholder =" 需在interface/*.gfx中定义" ></vscode-textfield >
10+ <vscode-label >类别</vscode-label >
11+ <vscode-single-select placeholder =" 类别" @change =" handleTypeChange" >
12+ <vscode-option value =" corps_commander" >将军</vscode-option >
13+ <vscode-option value =" field_marshal" >陆军元帅</vscode-option >
14+ <vscode-option :value =" navyLeader" >海军将领</vscode-option >
15+ </vscode-single-select >
16+ </div >
17+ <div style =" display : flex ; flex-direction : column ; gap : 4px ;" >
18+ <vscode-label >攻击</vscode-label >
19+ <vscode-textfield type =" number" min =" 1" max =" 10" >
20+ </vscode-textfield >
21+ <vscode-label >防御</vscode-label >
22+ <vscode-textfield type =" number" min =" 1" max =" 10" >
23+ </vscode-textfield >
24+ <div v-show =" selectedType !== navyLeader" >
25+ <vscode-label >计划</vscode-label >
26+ <vscode-textfield type =" number" min =" 1" max =" 10" >
27+ </vscode-textfield >
28+ </div >
29+ <div v-show =" selectedType !== navyLeader" >
30+ <vscode-label >后勤</vscode-label >
31+ <vscode-textfield type =" number" min =" 1" max =" 10" ></vscode-textfield >
32+ </div >
33+ <div v-show =" selectedType === navyLeader" >
34+ <vscode-label >机动</vscode-label >
35+ <vscode-textfield type =" number" min =" 1" max =" 10" ></vscode-textfield >
36+ </div >
37+ <div v-show =" selectedType === navyLeader" >
38+ <vscode-label >协调</vscode-label >
39+ <vscode-textfield type =" number" min =" 1" max =" 10" ></vscode-textfield >
40+ </div >
41+ </div >
42+ </div >
43+ </template >
44+
45+ <script lang="ts" setup>
46+ // import { WebviewApi } from "@tomjs/vscode-webview";
47+ import type { VscodeSingleSelect } from " @vscode-elements/elements" ;
48+ import { ref } from " vue" ;
49+
50+ const navyLeader = " navy_leader" ;
51+ const selectedType = ref <string >(" " );
52+ // const vscode = new WebviewApi();
53+
54+ const handleTypeChange = (event : Event ) => {
55+ const target = event .target as HTMLSelectElement ;
56+ selectedType .value = target .value ;
57+ };
58+ </script >
0 commit comments