diff --git a/client/packages/design/components/CopyableText/index.stories.tsx b/client/packages/design/components/CopyableText/index.stories.tsx
new file mode 100644
index 00000000..266106ab
--- /dev/null
+++ b/client/packages/design/components/CopyableText/index.stories.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import { CopyableText } from '.';
+
+export default {
+  title: 'Tailchat/CopyableText',
+  component: CopyableText,
+  argTypes: {
+    config: {
+      description: '见: https://ant.design/components/typography-cn#copyable',
+      defaultValue: true,
+    },
+  },
+} as ComponentMeta<typeof CopyableText>;
+
+const Template: ComponentStory<typeof CopyableText> = (args) => (
+  <div>
+    可复制文本: <CopyableText {...args} />
+    &lt;- 点击此处复制
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Foo',
+};
+
+export const WithConfig = Template.bind({});
+WithConfig.args = {
+  children: 'Foo',
+  config: {
+    text: 'Bar',
+  },
+};
diff --git a/client/packages/design/components/CopyableText/index.tsx b/client/packages/design/components/CopyableText/index.tsx
new file mode 100644
index 00000000..ba500159
--- /dev/null
+++ b/client/packages/design/components/CopyableText/index.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Typography } from 'antd';
+import type { BlockProps } from 'antd/lib/typography/Base';
+
+interface CopyableTextProps extends React.PropsWithChildren {
+  className?: string;
+  style?: React.CSSProperties;
+  config?: BlockProps['copyable'];
+}
+
+/**
+ * 可复制的文本
+ */
+export const CopyableText: React.FC<CopyableTextProps> = React.memo((props) => {
+  return (
+    <Typography.Text
+      className={props.className}
+      style={props.style}
+      copyable={props.config ?? true}
+    >
+      {props.children}
+    </Typography.Text>
+  );
+});
+CopyableText.displayName = 'CopyableText';
diff --git a/client/packages/design/components/index.ts b/client/packages/design/components/index.ts
index 7293338b..d852e73a 100644
--- a/client/packages/design/components/index.ts
+++ b/client/packages/design/components/index.ts
@@ -1,6 +1,7 @@
 export { AutoFolder } from './AutoFolder';
 export { Avatar, getTextColorHex } from './Avatar';
 export { AvatarWithPreview } from './AvatarWithPreview';
+export { CopyableText } from './CopyableText';
 export { CombinedAvatar } from './Avatar/combined';
 export { DelayTip } from './DelayTip';
 export { Highlight } from './Highlight';
diff --git a/client/packages/design/package.json b/client/packages/design/package.json
index 6bb5a092..2aa0b979 100644
--- a/client/packages/design/package.json
+++ b/client/packages/design/package.json
@@ -4,6 +4,7 @@
   "description": "Tailchat 的前端组件",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "pnpm storybook",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
diff --git a/client/web/src/plugin/common/index.ts b/client/web/src/plugin/common/index.ts
index d111c8f3..d5eaca05 100644
--- a/client/web/src/plugin/common/index.ts
+++ b/client/web/src/plugin/common/index.ts
@@ -59,11 +59,11 @@ export { useLocation, useNavigate } from 'react-router';
 
 export {
   /**
-   * @deprecated please use createMetaFormSchema
+   * @deprecated please use createMetaFormSchema from @capital/component
    */
   createMetaFormSchema as createFastFormSchema,
   /**
-   * @deprecated please use metaFormFieldSchema
+   * @deprecated please use metaFormFieldSchema from @capital/component
    */
   metaFormFieldSchema as fieldSchema,
 } from 'tailchat-design';
diff --git a/client/web/src/plugin/component/index.tsx b/client/web/src/plugin/component/index.tsx
index 93749ef8..389204da 100644
--- a/client/web/src/plugin/component/index.tsx
+++ b/client/web/src/plugin/component/index.tsx
@@ -13,13 +13,12 @@ export {
   notification,
   Empty,
 } from 'antd';
-export { Avatar, SensitiveText, Icon } from 'tailchat-design';
 export const TextArea = Input.TextArea;
-export { Image } from '@/components/Image';
-export { IconBtn } from '@/components/IconBtn';
-export { PillTabs, PillTabPane } from '@/components/PillTabs';
-export { LoadingSpinner } from '@/components/LoadingSpinner';
 export {
+  Avatar,
+  SensitiveText,
+  Icon,
+  CopyableText,
   /**
    * @deprecated please use WebMetaForm
    */
@@ -28,6 +27,11 @@ export {
   createMetaFormSchema,
   metaFormFieldSchema,
 } from 'tailchat-design';
+
+export { Image } from '@/components/Image';
+export { IconBtn } from '@/components/IconBtn';
+export { PillTabs, PillTabPane } from '@/components/PillTabs';
+export { LoadingSpinner } from '@/components/LoadingSpinner';
 export {
   FullModalField,
   DefaultFullModalInputEditorRender,
diff --git a/client/web/tailchat.d.ts b/client/web/tailchat.d.ts
index f2770cfd..21a171d2 100644
--- a/client/web/tailchat.d.ts
+++ b/client/web/tailchat.d.ts
@@ -123,14 +123,20 @@ declare module '@capital/common' {
 
   export const sharedEvent: any;
 
-  export const useAsync: any;
+  export const useAsync: <T extends (...args: any[]) => Promise<any>>(
+    fn: T,
+    deps?: React.DependencyList
+  ) => { loading: boolean; value?: any; error?: Error };
 
-  export const useAsyncFn: any;
+  export const useAsyncFn: <T extends (...args: any[]) => Promise<any>>(
+    fn: T,
+    deps?: React.DependencyList
+  ) => [{ loading: boolean; value?: any; error?: Error }, T];
 
   export const useAsyncRefresh: <T extends (...args: any[]) => Promise<any>>(
     fn: T,
     deps?: React.DependencyList
-  ) => [{ loading: boolean; value?: any; error?: Error }, T];
+  ) => { loading: boolean; value?: any; error?: Error; refresh: () => void };
 
   export const useAsyncRequest: <T extends (...args: any[]) => Promise<any>>(
     fn: T,
@@ -162,8 +168,14 @@ declare module '@capital/common' {
 
   export const useNavigate: any;
 
+  /**
+   * @deprecated please use createMetaFormSchema from @capital/component
+   */
   export const createFastFormSchema: any;
 
+  /**
+   * @deprecated please use metaFormFieldSchema from @capital/component
+   */
   export const fieldSchema: any;
 
   export const useCurrentUserInfo: any;
@@ -316,15 +328,37 @@ declare module '@capital/component' {
     }>
   >;
 
+  export const TextArea: any;
+
   export const Avatar: any;
 
   export const SensitiveText: React.FC<{ className?: string; text: string }>;
 
-  export const TextArea: any;
+  export const Icon: React.FC<{ icon: string } & React.SVGProps<SVGSVGElement>>;
 
-  export const Image: any;
+  export const CopyableText: React.FC<{
+    className?: string;
+    style?: React.CSSProperties;
+    config?:
+      | boolean
+      | {
+          text?: string;
+          onCopy?: (event?: React.MouseEvent<HTMLDivElement>) => void;
+          icon?: React.ReactNode;
+          tooltips?: boolean | React.ReactNode;
+          format?: 'text/plain' | 'text/html';
+        };
+  }>;
 
-  export const Icon: React.FC<{ icon: string } & React.SVGProps<SVGSVGElement>>;
+  export const WebFastForm: any;
+
+  export const WebMetaForm: any;
+
+  export const createMetaFormSchema: any;
+
+  export const metaFormFieldSchema: any;
+
+  export const Image: any;
 
   export const IconBtn: React.FC<{
     icon: string;
@@ -342,14 +376,6 @@ declare module '@capital/component' {
 
   export const LoadingSpinner: React.FC<{ tip?: string }>;
 
-  export const WebFastForm: any;
-
-  export const WebMetaForm: any;
-
-  export const createMetaFormSchema: any;
-
-  export const metaFormFieldSchema: any;
-
   export const FullModalField: any;
 
   export const DefaultFullModalInputEditorRender: any;