feat: 固件管理表单控件切换到 TDesign

src/views/FirmwaresView/FirmwaresView.vue

@@ -13,14 +13,19 @@
 
     <div class="business-workspace">
       <div class="asset-toolbar">
-        <div class="asset-search"><svg><use href="#i-search" /></svg><input v-model="keyword" type="text" placeholder="搜索版本号 / 描述" @keyup.enter="reload" /></div>
+        <div class="asset-search">
+          <t-input v-model="keyword" clearable placeholder="搜索版本号 / 描述" @keyup.enter="reload" @clear="reload">
+            <template #prefix-icon><t-icon name="search" /></template>
+          </t-input>
+        </div>
         <div class="toolbar-group">
-          <select v-model="statusFilter" @change="reload">
-            <option value="">全部状态</option>
-            <option value="draft">草稿</option>
-            <option value="released">已发布</option>
-            <option value="deprecated">已弃用</option>
-          </select>
+          <t-select
+            v-model="statusFilter"
+            :options="statusFilterOptions"
+            placeholder="全部状态"
+            style="width: 140px"
+            @change="reload"
+          />
         </div>
       </div>
 
@@ -78,29 +83,22 @@
         </header>
         <form novalidate @submit.prevent="submit">
           <div class="form-row">
-            <label><span>版本号<b>*</b></span><input v-model="form.version" type="text" placeholder="例如 1.3.0" :disabled="!!editingId" /></label>
-            <label><span>组件</span><input v-model="form.component" type="text" placeholder="dock-edge-agent" /></label>
+            <label><span>版本号<b>*</b></span><t-input v-model="form.version" placeholder="例如 1.3.0" :disabled="!!editingId" /></label>
+            <label><span>组件</span><t-input v-model="form.component" placeholder="dock-edge-agent" /></label>
           </div>
-          <label><span>版本描述</span><input v-model="form.description" type="text" placeholder="本次更新内容摘要" /></label>
-          <label><span>文件地址<b>*</b></span><input v-model="form.fileUrl" type="text" placeholder="https://.../firmware.bin" /></label>
+          <label><span>版本描述</span><t-input v-model="form.description" placeholder="本次更新内容摘要" /></label>
+          <label><span>文件地址<b>*</b></span><t-input v-model="form.fileUrl" placeholder="https://.../firmware.bin" /></label>
           <div class="form-row">
-            <label><span>SHA256<b>*</b></span><input v-model="form.sha256" type="text" placeholder="文件校验值" /></label>
-            <label><span>文件大小(MB)</span><input v-model="form.fileSizeMb" type="number" min="0" placeholder="0" /></label>
+            <label><span>SHA256<b>*</b></span><t-input v-model="form.sha256" placeholder="文件校验值" /></label>
+            <label><span>文件大小(MB)</span><t-input-number v-model="form.fileSizeMb" theme="normal" :min="0" placeholder="0" style="width: 100%" /></label>
           </div>
-          <label><span>签名</span><input v-model="form.signature" type="text" placeholder="固件签名" /></label>
+          <label><span>签名</span><t-input v-model="form.signature" placeholder="固件签名" /></label>
           <div class="form-row">
             <label><span>升级方式</span>
-              <select v-model="form.mandatory">
-                <option :value="0">普通升级</option>
-                <option :value="1">强制升级</option>
-              </select>
+              <t-select v-model="form.mandatory" :options="mandatoryOptions" style="width: 100%" />
             </label>
             <label><span>状态</span>
-              <select v-model="form.status">
-                <option value="draft">草稿</option>
-                <option value="released">已发布</option>
-                <option value="deprecated">已弃用</option>
-              </select>
+              <t-select v-model="form.status" :options="statusOptions" style="width: 100%" />
             </label>
           </div>
           <div class="form-error">{{ formError }}</div>
@@ -132,7 +130,23 @@ const statusFilter = ref('')
 const modalVisible = ref(false)
 const editingId = ref(null)
 const formError = ref('')
-const form = reactive({ version: '', component: '', description: '', fileUrl: '', sha256: '', signature: '', fileSizeMb: '', mandatory: 0, status: 'draft' })
+const form = reactive({ version: '', component: '', description: '', fileUrl: '', sha256: '', signature: '', fileSizeMb: undefined, mandatory: 0, status: 'draft' })
+
+const statusFilterOptions = [
+  { label: '全部状态', value: '' },
+  { label: '草稿', value: 'draft' },
+  { label: '已发布', value: 'released' },
+  { label: '已弃用', value: 'deprecated' }
+]
+const mandatoryOptions = [
+  { label: '普通升级', value: 0 },
+  { label: '强制升级', value: 1 }
+]
+const statusOptions = [
+  { label: '草稿', value: 'draft' },
+  { label: '已发布', value: 'released' },
+  { label: '已弃用', value: 'deprecated' }
+]
 
 const STATUS = {
   draft: { name: '草稿', cls: 'pending' },
@@ -194,7 +208,7 @@ function goPage(p) {
 }
 
 function openAdd() {
-  Object.assign(form, { version: '', component: '', description: '', fileUrl: '', sha256: '', signature: '', fileSizeMb: '', mandatory: 0, status: 'draft' })
+  Object.assign(form, { version: '', component: '', description: '', fileUrl: '', sha256: '', signature: '', fileSizeMb: undefined, mandatory: 0, status: 'draft' })
   editingId.value = null
   formError.value = ''
   modalVisible.value = true
@@ -209,7 +223,7 @@ function openEdit(f) {
     fileUrl: r.fileUrl || '',
     sha256: r.sha256 || '',
     signature: r.signature || '',
-    fileSizeMb: r.fileSize ? (r.fileSize / 1024 / 1024).toFixed(1) : '',
+    fileSizeMb: r.fileSize ? Number((r.fileSize / 1024 / 1024).toFixed(1)) : undefined,
     mandatory: Number(r.mandatory) === 1 ? 1 : 0,
     status: r.status || 'draft'
   })
@@ -265,3 +279,22 @@ async function remove(f) {
 
 onMounted(load)
 </script>
+
+<style scoped>
+.asset-search :deep(.t-input) {
+  width: 100%;
+}
+.asset-search {
+  border: 0;
+  padding: 0;
+  height: auto;
+}
+.toolbar-group :deep(.t-select) {
+  flex-shrink: 0;
+}
+.add-dock-dialog :deep(.t-input),
+.add-dock-dialog :deep(.t-input-number),
+.add-dock-dialog :deep(.t-select) {
+  width: 100%;
+}
+</style>