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

src/views/UsersView/UsersView.vue

@@ -10,13 +10,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="roleFilter" @change="reload">
-            <option value="">全部角色</option>
-            <option value="admin">管理员</option>
-            <option value="user">普通用户</option>
-          </select>
+          <t-select
+            v-model="roleFilter"
+            :options="roleFilterOptions"
+            placeholder="全部角色"
+            style="width: 140px"
+            @change="reload"
+          />
         </div>
       </div>
 
@@ -80,6 +86,12 @@ const roleFilter = ref('')
 
 const ROLE_NAME = { admin: '管理员', user: '普通用户' }
 
+const roleFilterOptions = [
+  { label: '全部角色', value: '' },
+  { label: '管理员', value: 'admin' },
+  { label: '普通用户', value: 'user' }
+]
+
 function fmtTime(t) {
   if (!t) return '--'
   const d = new Date(t)
@@ -125,3 +137,17 @@ function goPage(p) {
 
 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;
+}
+</style>