refactor: 调整插件项样式，减少空白区域

client/shared/i18n/langs/en-US/translation.json

@@ -194,6 +194,7 @@
   "kaa7d786e": "Create Converse",
   "kaaf56f78": "Debug",
   "kabb39529": "Save changes",
+  "kabbd6e6": "Document",
   "kabfe9512": "Save",
   "kad207008": "Edit",
   "kadeb7a89": "Not supported documentation links",

client/shared/i18n/langs/zh-CN/translation.json

@@ -194,6 +194,7 @@
   "kaa7d786e": "创建会话",
   "kaaf56f78": "调试",
   "kabb39529": "保存变更",
+  "kabbd6e6": "文档",
   "kabfe9512": "保存",
   "kad207008": "编辑",
   "kadeb7a89": "不支持渲染的文档链接",

client/web/src/plugin/PluginStore/Item.tsx

@@ -1,4 +1,4 @@
-import { Avatar } from '@/components/Avatar';
+import { Avatar } from 'tailchat-design';
 import { Button, Space } from 'antd';
 import React, { useCallback, useState } from 'react';
 import {
@@ -58,8 +58,8 @@ export const PluginStoreItem: React.FC<{
   }, [manifest]);
 
   return (
-    <div className="rounded-md flex w-80 mobile:w-full h-36 bg-white bg-opacity-40 dark:bg-black dark:bg-opacity-40 shadow py-2 px-3">
-      <div className="flex w-full">
+    <div className="mobile:w-full sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4 2xl:w-1/5 p-1">
+      <div className="rounded-md flex w-full h-36 bg-white bg-opacity-40 dark:bg-black dark:bg-opacity-40 shadow py-2 px-3">
         <div className="mr-2">
           <Avatar shape="square" src={manifest.icon} name={manifest.label} />
         </div>
@@ -75,7 +75,7 @@ export const PluginStoreItem: React.FC<{
 
           <Space className="mt-1 justify-end">
             {isValidStr(manifest.documentUrl) && (
-              <Button onClick={handleShowDocument}>文档</Button>
+              <Button onClick={handleShowDocument}>{t('文档')}</Button>
             )}
 
             <div>

client/web/src/plugin/PluginStore/index.module.less

@@ -1,7 +0,0 @@
-.pluginSection {
-  @apply flex flex-wrap;
-
-  > * {
-    @apply m-1;
-  }
-}

client/web/src/plugin/PluginStore/index.tsx

@@ -11,7 +11,6 @@ import { builtinPlugins } from '../builtin';
 import { pluginManager } from '../manager';
 import { PluginStoreItem } from './Item';
 import { ManualInstall } from './ManualInstall';
-import styles from './index.module.less';
 
 function usePluginStoreData() {
   const { loading: loading1, value: installedPluginList = [] } = useAsync(
@@ -48,7 +47,7 @@ export const PluginStore: React.FC = React.memo(() => {
         <PillTabPane key="1" tab={t('已安装')}>
           <Divider orientation="left">{t('已安装')}</Divider>
 
-          <div className={styles.pluginSection}>
+          <div className="flex flex-wrap">
             {[...builtinPlugins, ...installedPluginList].map((plugin) => (
               <PluginStoreItem
                 key={plugin.name}
@@ -63,7 +62,7 @@ export const PluginStore: React.FC = React.memo(() => {
         <PillTabPane key="2" tab={t('全部')}>
           <Divider orientation="left">{t('内置插件')}</Divider>
 
-          <div className={styles.pluginSection}>
+          <div className="flex flex-wrap">
             {builtinPlugins.map((plugin) => (
               <PluginStoreItem
                 key={plugin.name}
@@ -76,7 +75,7 @@ export const PluginStore: React.FC = React.memo(() => {
 
           <Divider orientation="left">{t('插件中心')}</Divider>
 
-          <div className={styles.pluginSection}>
+          <div className="flex flex-wrap">
             {allPlugins.map((plugin) => (
               <PluginStoreItem
                 key={plugin.name}

client/web/tailwind.config.js

@@ -48,9 +48,11 @@ module.exports = {
   important: '#app',
   theme: {
     screens: {
+      sm: { min: '640px' },
+      md: { min: '768px' },
       lg: { min: '1024px' },
-      md: { max: '767px' },
-      sm: { max: '639px' },
+      xl: { min: '1280px' },
+      '2xl': { min: '1536px' },
       mobile: { max: '639px' }, // alias
       desktop: { min: '640px' }, // alias
     },