优化客服账号标签管理

web/frontend/src/pages/AccountsPage.tsx

@@ -45,9 +45,10 @@ export default function AccountsPage() {
 
   const canViewFull = can('account:view_full');
   const canImport = can('account:import');
+  const canTag = can('account:tag') || canImport;
   const canAssign = can('account:assign');
   const canDelete = can('account:delete');
-  const canSelectRows = canImport || canDelete || canAssign;
+  const canSelectRows = canTag || canDelete || canAssign;
 
   const loadAccounts = useCallback(async () => {
     setLoading(true);
@@ -252,43 +253,29 @@ export default function AccountsPage() {
     {
       title: '标签',
       dataIndex: 'tag',
-      width: 120,
+      width: 170,
       render: (tag: string, record: AccountItem) => {
-        if (!tag) {
-          if (canImport) {
-            return (
-              <Input
-                size="small"
-                placeholder="输入标签"
-                style={{ width: 90 }}
-                onPressEnter={(e) => {
-                  const val = (e.target as HTMLInputElement).value.trim();
-                  if (val) handleSetTag(record.id, val);
-                }}
-                onBlur={(e) => {
-                  const val = e.target.value.trim();
-                  if (val) handleSetTag(record.id, val);
-                }}
-              />
-            );
-          }
-          return <Text type="secondary">-</Text>;
-        }
-        if (canImport) {
+        if (canTag) {
           return (
-            <Tag
-              color={tagColorMap[tag]}
-              closable
-              onClose={(e) => {
-                e.preventDefault();
-                handleSetTag(record.id, '');
+            <Select
+              mode="tags"
+              maxCount={1}
+              allowClear
+              showSearch
+              optionFilterProp="label"
+              size="small"
+              placeholder="选择或输入标签"
+              style={{ width: 150 }}
+              value={tag ? [tag] : []}
+              onChange={(values) => {
+                const value = values.at(-1)?.trim() || '';
+                if (value !== tag) handleSetTag(record.id, value);
               }}
-            >
-              {tag}
-            </Tag>
+              options={tags.map((value) => ({ value, label: value }))}
+            />
           );
         }
-        return <Tag color={tagColorMap[tag]}>{tag}</Tag>;
+        return tag ? <Tag color={tagColorMap[tag]}>{tag}</Tag> : <Text type="secondary">-</Text>;
       },
     },
     {
@@ -346,6 +333,8 @@ export default function AccountsPage() {
         <Space>
           <Select
             allowClear
+            showSearch
+            optionFilterProp="label"
             placeholder="按标签筛选"
             style={{ width: 150 }}
             value={tagFilter || undefined}
@@ -375,7 +364,7 @@ export default function AccountsPage() {
               {sensitiveVisible ? '隐藏凭据' : '显示凭据'}
             </Button>
           )}
-          {canImport && (
+          {canTag && (
             <Button
               disabled={selectedCount === 0}
               icon={<TagOutlined />}