Fix building ts error

ui/src/layouts/MainLayout/components/FormItem.vue

@@ -81,6 +81,12 @@ const errorMap = computed(() => {
         height: 14px;
         margin-top: 6px;
       }
+      input[type="radio"] {
+          width: auto;
+        height: 14px;
+        margin-top: 6px;
+        cursor: pointer;
+      }
       label {
         display: inline-block;
         padding: 0 3px;

ui/src/layouts/MainLayout/components/LanguageSettings.vue

 <template>
-  <div>{{ t("ui_lang") }}</div>
   <div>
-    <div  v-for="item in locales" :key="item" >
-      <input type="radio" :id="'ui-lang-setting-radio-' + item" :value="item" v-model="locale" @change="changeLang(item)" />
-      <label :for="'ui-lang-setting-radio-' + item" > {{languageLabels[item] }}</label>
-    </div>
+    <div class="title strong space-bottom">{{ t("ui_lang") }}</div>
+    <Form labelCol="16" wrapperCol="1" class="settting-form">
+        <FormItem name="taskId" v-for="item in locales" :key="item" :label="languageLabels[item]">
+            <input type="radio" class="language-input" :value="item" v-model="locale" @change="changeLang(item)" />
+        </FormItem>
+    </Form>
   </div>
 </template>
 
 <script setup lang="ts">
 import { setI18nLanguage } from "@/config/i18n";
 import { useI18n } from "vue-i18n";
+import Form from "./Form.vue";
+import FormItem from "./FormItem.vue";
 
 const { t, locale } = useI18n();
 
@@ -29,3 +32,12 @@ console.info(key)
   setI18nLanguage(key);
 };
 </script>
+
+<style>
+.language-input {
+  min-width: 60px;
+}
+.settting-form{
+    display: flex;
+}
+</style>
\ No newline at end of file

ui/src/layouts/MainLayout/components/TabPageSettings.vue

 <template>
   <div class="site-main space-top space-left space-right">
+    <LanguageSettings></LanguageSettings>
+    <p class="divider setting-space-top"></p>
     <div class="t-card-toolbar">
-      <div class="left">
+      <div class="left title strong">
         {{ t("interpreter") }}
       </div>
       <Button class="state primary" size="sm" @click="create()">
@@ -9,10 +11,12 @@
       </Button>
     </div>
     <Table
+      v-if="interpreters.length > 0"
       :columns="columns"
       :rows="interpreters"
       :isHidePaging="true"
       :isSlotMode="true"
+      :sortable="{}"
     >
       <template #lang="record">
         {{ languageMap[record.value.lang].name }}
@@ -31,6 +35,9 @@
         </Button>
       </template>
     </Table>
+    <p v-else class="empty-tip">
+    {{ t("empty_data") }}
+    </p>
 
     <FormInterpreter
       :show="showCreateInterpreterModal"
@@ -40,8 +47,6 @@
       ref="formInterpreter"
     />
   </div>
-  <hr>
-  <LanguageSettings></LanguageSettings>
 </template>
 
 <script setup lang="ts">
@@ -105,7 +110,7 @@ const setColumns = () => {
       isKey: true,
       label: t("no"),
       field: "id",
-      width: "15%",
+      width: "60px",
     },
     {
       label: t("lang"),
@@ -183,7 +188,7 @@ const remove = (item) => {
 const modalClose = () => {
   showCreateInterpreterModal.value = false;
 };
-const formInterpreter = ref(null);
+const formInterpreter = ref({} as any);
 const createInterpreter = (formData) => {
     saveInterpreter(formData).then((json) => {
         if (json.code === 0) {
@@ -195,3 +200,20 @@ const createInterpreter = (formData) => {
   })
 };
 </script>
+
+<style>
+.empty-tip {
+  text-align: center;
+  padding: 20px 0;
+}
+.site-main{
+    padding: 8px;
+}
+.setting-space-top{
+    margin-top: 1rem;
+}
+.t-card-toolbar{
+    align-items: flex-end;
+    margin-bottom: 1rem;
+}
+</style>
\ No newline at end of file

ui/src/layouts/MainLayout/components/TabPageSites.vue

@@ -212,7 +212,7 @@ const remove = (item) => {
 const modalClose = () => {
   showCreateSiteModal.value = false;
 }
-const formSite = ref(null)
+const formSite = ref({} as any)
 const createSite = (formData) => {
     store.dispatch('Site/save', formData).then((response) => {
         if (response) {

ui/src/layouts/MainLayout/components/WorkDir.vue

@@ -306,7 +306,7 @@ const getNodeMapCall = throttle(async () => {
 let rightClickedNode = {} as any
 let createAct = ''
 
-const formNode = ref(null)
+const formNode = ref({} as any)
 const createNode = (formData) => {
   const mode = 'child';
   let type = 'dir';

ui/src/layouts/MainLayout/components/WorkDirPanel.vue

@@ -202,7 +202,7 @@ const showModal = ref(false)
 const modalClose = () => {
   showModal.value = false;
 }
-const formWorkspace = ref(null)
+const formWorkspace = ref({} as any)
 const createWorkSpace = (formData) => {
     store.dispatch('Workspace/save', formData).then((response) => {
         if (response) {

ui/src/locales/en-US.ts

@@ -48,6 +48,7 @@ export default {
     'zentao_url': 'ZenTao URL',
     'username': 'User Name',
     'password': 'Password',
+    'empty_data': 'Empty Data',
 
     'interpreter': 'Interpreter',
     'create_interpreter': 'Create Interpreter',

ui/src/locales/zh-CN.ts

@@ -58,6 +58,7 @@ export default {
     'zentao_url': '禅道地址',
     'username': '用户名',
     'password': '密码',
+    'empty_data': '暂无数据',
 
     'interpreter': '运行环境',
     'create_interpreter': '新建运行环境',