diff --git a/packages/opendesign/src/link/__docs__/__case__/LinkGlobal.vue b/packages/opendesign/src/link/__docs__/__case__/LinkGlobal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a3246d8f37b2bf988c3fd19b0e8c519eb310a4d8
--- /dev/null
+++ b/packages/opendesign/src/link/__docs__/__case__/LinkGlobal.vue
@@ -0,0 +1,45 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 全局配置
+
+可以通过`global`属性来控制链接点击之后是否在全局生效。该属性需要搭配OConfigProvider组件使用，当`global`为true时（默认为true），链接点击之后，会触发全局配置的link回调。
+
+<!-- en-US -->
+
+### Global configuration
+
+The `global` attribute can be used to control whether a link takes effect globally after being clicked. This attribute needs to be used in conjunction with the OConfigProvider component. When `global` is true (the default is true), a global configuration link callback will be triggered after the link is clicked.
+</docs>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OLink, OConfigProvider, LinkConfigT } from '@opensig/opendesign';
+
+const onLinkClick = (e: MouseEvent) => {
+  alert(`浮层${(e.target as HTMLElement).innerHTML}`);
+};
+
+const loading = ref(false);
+const onLinkClick2 = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 3000);
+};
+
+const linkConfig: LinkConfigT = {
+  click: (e, params, attrs) => {
+    console.log(e, params, attrs);
+  },
+};
+</script>
+<template>
+  <div class="row">
+    <OConfigProvider :link="linkConfig">
+      <OLink :loading="!loading">loading</OLink>
+      <OLink :loading="loading" status="primary" @click="onLinkClick2" diy="123">点击Loading</OLink>
+      <OLink status="primary" @click="onLinkClick">点击弹窗</OLink>
+    </OConfigProvider>
+  </div>
+</template>
+<style scoped lang="scss"></style>
diff --git a/packages/opendesign/src/link/__docs__/__case__/LinkIconSize.vue b/packages/opendesign/src/link/__docs__/__case__/LinkIconSize.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ccc5637514a60a4181fe76d17d77aeca96cd6866
--- /dev/null
+++ b/packages/opendesign/src/link/__docs__/__case__/LinkIconSize.vue
@@ -0,0 +1,55 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 插槽及大小
+
+可以通过`icon`插槽设置链接左侧内容，通过`suffix`插槽设置链接右侧内容，通过`size`属性设置链接大小。
+
+<!-- en-US -->
+
+### Slots
+
+The Link icon can be set using the `icon` slot, and the link suffix can be set using the `suffix` slot, and the link size can be set using the `size` property.
+</docs>
+<script setup lang="ts">
+import { OLink } from '@opensig/opendesign';
+import { OIconEye, OIconChevronRight } from '@opensig/opendesign';
+</script>
+<template>
+  <div class="row">
+    <OLink size="medium" color="warning">
+      <template #icon><OIconEye /></template>
+      了解更多
+    </OLink>
+    <OLink size="medium" color="warning">
+      <template #suffix><OIconChevronRight /></template>
+      了解更多
+    </OLink>
+    <OLink size="medium" color="warning">
+      <template #icon><OIconEye /></template>
+      <template #suffix><OIconChevronRight /></template>
+      了解更多
+    </OLink>
+  </div>
+  <div class="row">
+    <OLink color="success">
+      <template #icon><OIconEye /></template>
+    </OLink>
+    <OLink color="success" size="small">
+      <template #icon><OIconEye /></template>
+    </OLink>
+    <OLink color="success" size="medium">
+      <template #icon><OIconEye /></template>
+    </OLink>
+    <OLink color="success" size="large">
+      <template #icon><OIconEye /></template>
+    </OLink>
+  </div>
+</template>
+<style scoped lang="scss">
+.o-link {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+}
+</style>
diff --git a/packages/opendesign/src/link/__docs__/__case__/LinkLoading.vue b/packages/opendesign/src/link/__docs__/__case__/LinkLoading.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9798d2f7770c5f2c322931b7866423cf5ffcbadc
--- /dev/null
+++ b/packages/opendesign/src/link/__docs__/__case__/LinkLoading.vue
@@ -0,0 +1,37 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 加载中
+
+加载中的链接，通过`loading`属性控制链接的加载状态。当`loading`为`true`时，链接会显示加载中的状态，同时`icon`插槽会被替换为加载中的图标。
+
+<!-- en-US -->
+
+### Loading
+
+A link that is loading, controlled by the `loading` property. When `loading` is `true`, the link will display the loading state. The `icon` slot will be replaced with the loading icon.
+</docs>
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { OIconEye } from '@opensig/opendesign';
+import { OLink } from '@opensig/opendesign';
+const rlt = reactive({
+  loading1: false,
+  loading2: false,
+});
+const showLoading = (key: keyof typeof rlt, val: boolean) => {
+  rlt[key] = val;
+  setTimeout(() => {
+    rlt[key] = !val;
+  }, 1000);
+};
+</script>
+<template>
+  <div class="row">
+    <OLink color="primary" :loading="rlt.loading1" @click="showLoading('loading1', true)">查看更多</OLink>
+    <OLink color="primary" :loading="rlt.loading2" @click="showLoading('loading2', true)">
+      <template #icon><OIconEye /></template>
+      点击icon替换成loading
+    </OLink>
+  </div>
+</template>
diff --git a/packages/opendesign/src/link/__docs__/__case__/LinkUsage.vue b/packages/opendesign/src/link/__docs__/__case__/LinkUsage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..096e6425e056909336dea0c3cef804f8ceb9cb26
--- /dev/null
+++ b/packages/opendesign/src/link/__docs__/__case__/LinkUsage.vue
@@ -0,0 +1,86 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 使用
+
+五种主题色：`normal`、`primary`、`success`、`warning`、`danger` ；
+
+四种尺寸：`auto`、`small`、`medium`、`large` ；
+
+四种跳转方式：`_blank`、`_parent`、`_self`、`_top` ；
+
+禁用状态：`disabled` ；
+
+加载状态：`loading` ；
+
+<!-- en-US -->
+
+### Usage
+
+Five theme colors: `normal`、`primary`、`success`、`warning`, and `danger`;
+
+Four sizes: `auto`、`small`、`medium`、`large`;
+
+Four forms of jumps: `_blank`、`_parent`、`_self`, and `_top`
+
+Disabled state: `disabled`;
+
+Loading state: `loading`;
+</docs>
+<script setup lang="ts">
+import { propsToAttrStr } from '../../../_demo/utils';
+import { DocDemoSchema, DocDemoTemplate } from '../../../_demo/types';
+
+const _schema = {
+  href: {
+    type: 'string',
+    default: '#使用',
+  },
+  target: {
+    type: 'list',
+    list: ['_blank', '_parent', '_self', '_top'],
+  },
+  color: {
+    type: 'list',
+    list: ['normal', 'primary', 'success', 'warning', 'danger'],
+  },
+  size: {
+    type: 'list',
+    list: ['large', 'medium', 'small', 'auto'],
+  },
+  disabled: {
+    type: 'boolean',
+  },
+  loading: {
+    type: 'boolean',
+  },
+  'icon(slot)': {
+    type: 'boolean',
+  },
+  'suffix(slot)': {
+    type: 'boolean',
+    default: true,
+  },
+  hoverBg: {
+    type: 'boolean',
+  },
+  hoverUnderline: {
+    type: 'boolean',
+  },
+} satisfies Record<string, DocDemoSchema>;
+
+const _template: DocDemoTemplate<typeof _schema> = (props) => {
+  const { 'icon(slot)': iconSlot, 'suffix(slot)': suffixSlot } = props;
+  let innerHTML = '';
+  if (iconSlot) {
+    innerHTML += '\n<template #icon><OIconEye /></template>';
+  }
+  innerHTML += '\n查看更多';
+  if (suffixSlot) {
+    innerHTML += '\n<template #suffix><OIconChevronRight /></template>';
+  }
+  return `<OLink style="display:flex;align-items:center;width:fit-content" ${propsToAttrStr(props, ['icon(slot)', 'suffix(slot)'])}>${innerHTML}\n</OLink>`;
+};
+
+const _ctx = {};
+</script>
diff --git a/packages/opendesign/src/link/__docs__/index.en-US.md b/packages/opendesign/src/link/__docs__/index.en-US.md
new file mode 100644
index 0000000000000000000000000000000000000000..e78e0c2646c6f91b25bd32f912642c31833f4377
--- /dev/null
+++ b/packages/opendesign/src/link/__docs__/index.en-US.md
@@ -0,0 +1,16 @@
+---
+sidebar: OLink Link
+---
+
+# Link
+
+## Demo
+
+<!-- @usage LinkUsage -->
+<!-- @case LinkIconSize -->
+<!-- @case LinkLoading -->
+<!-- @case LinkGlobal -->
+
+## Api
+
+<!-- @api OLink -->
diff --git a/packages/opendesign/src/link/__docs__/index.zh-CN.md b/packages/opendesign/src/link/__docs__/index.zh-CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..6ea13f480d7b63199ef678cfcbfb1459cad69920
--- /dev/null
+++ b/packages/opendesign/src/link/__docs__/index.zh-CN.md
@@ -0,0 +1,16 @@
+---
+sidebar: OLink 链接
+---
+
+# 链接
+
+## 示例
+
+<!-- @usage LinkUsage -->
+<!-- @case LinkIconSize -->
+<!-- @case LinkLoading -->
+<!-- @case LinkGlobal -->
+
+## Api
+
+<!-- @api OLink -->