diff --git a/packages/docs/icons/svgs/fill/copy.svg b/packages/docs/icons/svgs/fill/copy.svg
index d701b8b81385c43b3579bba4ee9dd68a88e99d0c..e549a76b6c52acef178d1536aff585888824b00a 100644
--- a/packages/docs/icons/svgs/fill/copy.svg
+++ b/packages/docs/icons/svgs/fill/copy.svg
@@ -1,4 +1,4 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-  <path fill="#000"
-    d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"></path>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path class="cls-2" fill="currentColor" d="M12.16,5.54a.48.48,0,0,1,.34.14h0l4.34,4.06a.52.52,0,0,1,.16.37h0V22a.5.5,0,0,1-.5.5H3.5A.5.5,0,0,1,3,22H3V6a.5.5,0,0,1,.5-.5h8.66Zm-.66,1H4v15H16V10.61H12a.5.5,0,0,1-.49-.41V6.54ZM20.25,2a.5.5,0,0,1,.49.41V19.5a.5.5,0,0,1-.41.49H18.52a.5.5,0,0,1-.5-.5.49.49,0,0,1,.41-.49h1.32V3H8.25V4a.51.51,0,0,1-.41.49H7.75a.5.5,0,0,1-.49-.41V2.5A.5.5,0,0,1,7.66,2H20.25ZM12,17a.5.5,0,0,1,.09,1H6a.5.5,0,0,1-.09-1H12Zm1.5-4a.5.5,0,0,1,.09,1H6a.5.5,0,0,1-.09-1H13.5Zm-1-6V9.61h2.74Z"></path>
 </svg>
\ No newline at end of file
diff --git a/packages/docs/plugins/injectDemoAndApi.ts b/packages/docs/plugins/injectDemoAndApi.ts
index 97fdd90acce96ee4fab41746f70b75e713cb54c4..d122393b0d372de75394bb5dcaf6a168a6ceb2c1 100644
--- a/packages/docs/plugins/injectDemoAndApi.ts
+++ b/packages/docs/plugins/injectDemoAndApi.ts
@@ -127,6 +127,8 @@ const transformMdEntry = async (
     path: string;
   }[] = [];
   const lang = getLangByFileName(id);
+  // 避免引入同一个文件出现同名符号
+  let importedId = 0;
   // 将 <!-- @case CaseComponent --> 注释替换成 <DemoContainer :demo="AutoInjectCaseComponent" />
   // 将 <!-- @usage usageConfig --> 注释替换成 <AutoInject${fileName} />
   let newCode = await asyncReplace(code, /<!-{2,}\s*@(case|usage|api)(:[\w|-]+)?\s+(.*?)\s*-{2,}>/gi, async (match) => {
@@ -144,24 +146,26 @@ const transformMdEntry = async (
     }
     const demoFile = join(dirname(id), ...dirs, `./__case__/${fileName}.vue`);
     if (await fsp.stat(demoFile).catch(() => false)) {
+      importedId++;
+      const importedName = `AutoInject${fileName}${importedId}`;
       if (directive === 'case') {
         imported.push({
-          default: `AutoInject${fileName}`,
+          default: importedName,
           path: demoFile,
         });
-        return `<DemoContainer :demo="AutoInject${fileName}" :active-themes='${JSON.stringify(activeThemes)}' />`;
+        return `<DemoContainer :demo="${importedName}" :active-themes='${JSON.stringify(activeThemes)}' />`;
       } else {
         // 此处只导入 usage 指令指定的 vue 模块。该 vue 模块的还需在 transformVueDemo 函数中转换
         imported.push({
           path: demoFile,
-          default: `AutoInject${fileName}`,
+          default: importedName,
         });
         const usageFileId = demoFile.replace(/\\/g, '/');
         if (mode === 'dev' && viteDevServer) {
           viteDevServer.watcher.emit('change', usageFileId);
         }
         usageFiles.set(usageFileId, activeThemes);
-        return `<AutoInject${fileName} />`;
+        return `<${importedName} />`;
       }
     }
     return match[0];
diff --git a/packages/docs/src/components/CodeContainer.vue b/packages/docs/src/components/CodeContainer.vue
index ec3cd215acfc31a0c87857a647d9ac53abad23bd..87b772f0dba5b42c1e0a0240af9517f5755749e8 100644
--- a/packages/docs/src/components/CodeContainer.vue
+++ b/packages/docs/src/components/CodeContainer.vue
@@ -28,14 +28,14 @@ const docConfig = inject<any>('docs-config');
     <OScroller show-type="always" class="code-container-scroller">
       <slot></slot>
     </OScroller>
-    <div v-if="props.lang" class="lang-mark">{{ props.lang }}</div>
     <div class="operation-block">
-      <OButton variant="outline" size="small" @click="copyCode">
-        <template #icon><DocIconCopy /></template>
-      </OButton>
-      <OButton v-if="docConfig?.['is-show-code']" variant="outline" size="small" @click="() => docConfig?.['switch-show-code']?.()">
+      <OButton v-if="docConfig?.['is-show-code']" variant="outline" size="small" class="operation-btn" @click="() => docConfig?.['switch-show-code']?.()">
         <template #icon><OIconChevronUp /></template>
       </OButton>
+      <OButton variant="outline" size="small" class="operation-btn" @click="copyCode">
+        <template #icon><DocIconCopy /></template>
+      </OButton>
+      <span v-if="props.lang" class="lang-mark">{{ props.lang }}</span>
     </div>
   </div>
 </template>
@@ -45,78 +45,75 @@ const docConfig = inject<any>('docs-config');
   background-color: var(--o-color-fill2);
   position: relative;
 
-  .lang-mark,
   .operation-block {
     position: absolute;
     z-index: 2;
     color: var(--o-color-info3);
-  }
-  .lang-mark {
-    top: var(--o3-gap-3);
-    right: var(--o3-gap-4);
-  }
-  .operation-block {
-    display: none;
     top: var(--o3-gap-2);
     right: var(--o3-gap-4);
-    :deep(.o-btn) {
+    display: flex;
+    align-items: center;
+    .operation-btn {
       --btn-height: var(--o3-icon_size-l);
-      --btn-icon-size: var(--o3-icon_size-m);
-      & + .o-btn {
-        margin-left: var(--o3-gap-2);
-      }
-    }
-  }
-
-  &:hover {
-    .lang-mark {
-      display: none;
-    }
-    .operation-block {
-      display: block;
+      --btn-icon-size: calc(var(--btn-height) - 8px);
+      background-color: var(--o-color-fill2);
+      margin-right: var(--o3-gap-2);
     }
   }
 
   :deep(pre) {
     padding: var(--o3-gap-3) var(--o3-gap-5);
     margin: 0;
-    width: max-content;
+  }
+}
+@media (hover: hover) {
+  .operation-btn {
+    display: none;
+  }
+  .code-container:hover {
+    .operation-btn {
+      display: inline-flex;
+    }
+    .lang-mark {
+      display: none;
+    }
   }
 }
 .code-container-scroller {
   max-height: 70vh;
 }
-:deep(pre[data-linenumber-start]) {
-  position: relative;
-  padding-left: calc(2em + var(--o3-gap-4));
-  white-space: pre-wrap;
-  width: auto;
-  counter-reset: line-number var(--linenumber-start, 1);
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: calc(2em + var(--o3-gap-4) - 4px);
-    width: 1px;
-    background-color: var(--o-color-control1);
-  }
-  .line {
-    counter-increment: line-number;
-    &:first-child {
-      counter-increment: none;
-    }
+@include respond-to('>pad_v') {
+  :deep(pre[data-linenumber-start]) {
+    position: relative;
+    padding-left: calc(2em + var(--o3-gap-4));
+    white-space: pre-wrap;
+    counter-reset: line-number var(--linenumber-start, 1);
     &::before {
-      content: counter(line-number);
+      content: '';
       position: absolute;
-      left: 2em;
-      color: var(--o-color-info2);
-      transform: translateX(-100%);
-      user-select: none;
-      white-space: nowrap;
+      top: 0;
+      bottom: 0;
+      left: calc(2em + var(--o3-gap-4) - 4px);
+      width: 1px;
+      background-color: var(--o-color-control1);
     }
-    &:last-child::before {
-      content: none;
+    .line {
+      counter-increment: line-number;
+      &:first-child {
+        counter-increment: none;
+      }
+      &::before {
+        content: counter(line-number);
+        position: absolute;
+        left: 2em;
+        color: var(--o-color-info2);
+        transform: translate(-100%);
+        user-select: none;
+        white-space: nowrap;
+      }
+      &:last-child::before {
+        content: none;
+      }
     }
   }
 }
diff --git a/packages/docs/src/components/DocConfigProvide.vue b/packages/docs/src/components/DocConfigProvide.vue
index 816287a2b9e8ea6582ea4fec93002065a1aba435..6e202e4ca746e470ed695c62d1ffb54e5bb69b80 100644
--- a/packages/docs/src/components/DocConfigProvide.vue
+++ b/packages/docs/src/components/DocConfigProvide.vue
@@ -1,8 +1,32 @@
 <script setup lang="ts">
-import { provide, useAttrs } from 'vue';
+import { provide, useAttrs, inject } from 'vue';
+import { hyphenate } from '@/utils/named';
+
 defineOptions({
   inheritAttrs: false,
 });
-provide('docs-config', useAttrs());
+const parentConfig = inject<Record<string, any>>('docs-config', {});
+const selfConfig = useAttrs();
+const newConfig = new Proxy(selfConfig, {
+  get(target, key: string) {
+    if (key in target) {
+      return target[key];
+    }
+    if (key in parentConfig) {
+      return parentConfig[key];
+    }
+    const hKey = hyphenate(key);
+    if (hKey in target) {
+      return target[hKey];
+    }
+    if (hKey in parentConfig) {
+      return parentConfig[hKey];
+    }
+  },
+  has(target, p) {
+    return p in target || p in parentConfig;
+  },
+});
+provide('docs-config', newConfig);
 </script>
 <template><slot></slot></template>
diff --git a/packages/docs/src/components/TheHeader.vue b/packages/docs/src/components/TheHeader.vue
index d150590a48388f1d68e18de8f3eeae0fc2f820bc..12e7ca88d4734d3dabe99efb65fad3c29ffe42a4 100644
--- a/packages/docs/src/components/TheHeader.vue
+++ b/packages/docs/src/components/TheHeader.vue
@@ -99,7 +99,7 @@ watch(locale, (newLocale, oldLocale) => {
   padding: 0 calc((100vw - var(--grid-full)) / 2);
   font-size: var(--o3-font_size-h3);
   line-height: var(--o3-line_height-h3);
-  background-color: rgba(var(--o-mixedgray-1), 0.9);
+  background-color: rgba(var(--o-mixedgray-1, var(--o-gray-1)), 0.9);
   box-shadow: var(--o-shadow-1);
   backdrop-filter: blur(5px);
 }
diff --git a/packages/docs/src/utils/named.ts b/packages/docs/src/utils/named.ts
new file mode 100644
index 0000000000000000000000000000000000000000..54e82ff07d921f5024a1554f4072da4e3374c7bb
--- /dev/null
+++ b/packages/docs/src/utils/named.ts
@@ -0,0 +1,8 @@
+const hyphenateRE = /\B([A-Z])/g;
+export function hyphenate(str: string) {
+  return str.replace(hyphenateRE, '-$1').toLowerCase();
+}
+const camelizeRE = /-(\w)/g;
+export function camelize(str: string) {
+  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));
+}
diff --git a/packages/docs/src/utils/theme.ts b/packages/docs/src/utils/theme.ts
deleted file mode 100644
index 994f7727a7ca526216db9ac51c2f9bd67cfac8b1..0000000000000000000000000000000000000000
--- a/packages/docs/src/utils/theme.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ref, watchEffect } from 'vue';
-const THEME_KEY = '__theme__';
-
-// 全局状态
-export const theme = ref<string>(localStorage.getItem(THEME_KEY) || 'light');
-watchEffect(() => {
-  document.documentElement.dataset.oTheme = theme.value;
-  localStorage.setItem(THEME_KEY, theme.value);
-});
diff --git a/packages/opendesign/src/card/OCard.vue b/packages/opendesign/src/card/OCard.vue
index bbfcf4ff27cbb1f47f2962f28e95e4995f77c669..95ab9390b766d051cb766dfe4ce493c3f6194ea1 100644
--- a/packages/opendesign/src/card/OCard.vue
+++ b/packages/opendesign/src/card/OCard.vue
@@ -29,6 +29,10 @@ const isTitleLimited = computed(() => {
 const isDetailLimited = computed(() => {
   return !isUndefined(props.detailMaxRow);
 });
+
+const hasCover = computed(() => {
+  return Boolean(slots.cover || props.cover);
+});
 </script>
 
 <template>
@@ -43,13 +47,14 @@ const isDetailLimited = computed(() => {
         'o-card-hoverable': props.hoverable || !!props.href,
         'o-card-cursor-pointer': props.cursor === 'pointer' || !!props.href,
         'o-card-no-responsive': props.noResponsive,
+        'o-card-cover': hasCover,
       },
     ]"
   >
     <slot name="card">
       <!-- cover -->
       <div
-        v-if="!!slots.cover || props.cover"
+        v-if="hasCover"
         class="o-card-cover"
         :class="[
           props.coverClass,
diff --git a/packages/opendesign/src/card/style/index.scss b/packages/opendesign/src/card/style/index.scss
index e6b6f59b06731c7cec52d32669a01b1cb474daeb..8bb47c5840ef5591b0176e882570a9878c439b64 100644
--- a/packages/opendesign/src/card/style/index.scss
+++ b/packages/opendesign/src/card/style/index.scss
@@ -1,3 +1,3 @@
 @use './style.scss' as *;
-@use './media.scss' as *;
 @use './var.scss' as *;
+@use './media.scss' as *;
diff --git a/packages/opendesign/src/card/style/media.scss b/packages/opendesign/src/card/style/media.scss
index 3d1a3e0a1bf6b14c141dc8dfd23d0dd364fe761b..fa3a487c74b6401bf6f895af5c18c6b32c9c7238 100644
--- a/packages/opendesign/src/card/style/media.scss
+++ b/packages/opendesign/src/card/style/media.scss
@@ -1,6 +1,6 @@
 @use '../../_styles/mixin.scss' as *;
 
-@include respond-to('laptop') {
+@include respond-to('laptop-pc_s') {
   .o-card {
     &:not(.o-card-no-responsive) {
       --card-radius: var(--o-radius_control-m);
@@ -9,7 +9,8 @@
       --card-header-text-size: var(--o-font_size-text2);
       --card-header-text-height: var(--o-line_height-text2);
 
-      --card-main-padding: 16px 24px;
+      --card-main-padding-v: 16px;
+      --card-main-padding-h: 24px;
 
       --card-icon-gap: 12px;
 
@@ -20,11 +21,14 @@
       --card-footer-gap: 16px;
       --card-footer-text-size: var(--o-font_size-tip2);
       --card-footer-text-height: var(--o-line_height-tip2);
+
+      &.o-card-cover {
+        --card-main-padding-h: 16px;
+      }
     }
   }
 }
-
-@include respond-to('pad') {
+@include respond-to('pad_h') {
   .o-card {
     &:not(.o-card-no-responsive) {
       --card-radius: var(--o-radius_control-s);
@@ -34,7 +38,8 @@
       --card-header-text-size: var(--o-font_size-text1);
       --card-header-text-height: var(--o-line_height-text1);
 
-      --card-main-padding: 12px 16px;
+      --card-main-padding-v: 12px;
+      --card-main-padding-h: 16px;
 
       --card-icon-gap: 8px;
       --card-icon-size: var(--o-icon_size_control-l);
@@ -58,18 +63,22 @@
       .o-card-cover-hr {
         --card-cover-padding: 4px 4px 4px 0;
       }
+
+      &.o-card-cover {
+        --card-main-padding-h: 12px;
+      }
     }
   }
 }
-
-@include respond-to('phone') {
+@include respond-to('<=pad_v') {
   .o-card {
     &:not(.o-card-no-responsive) {
       --card-radius: var(--o-radius_control-s);
 
       --card-cover-radius: var(--o-radius_control-xs);
 
-      --card-main-padding: 12px 16px;
+      --card-main-padding-v: 8px;
+      --card-main-padding-h: 12px;
 
       --card-header-text-size: var(--o-font_size-tip1);
       --card-header-text-height: var(--o-line_height-tip1);
@@ -96,6 +105,10 @@
       .o-card-cover-hr {
         --card-cover-padding: 4px 4px 4px 0;
       }
+
+      &.o-card-cover {
+        --card-main-padding-h: 8px;
+      }
     }
   }
 }
diff --git a/packages/opendesign/src/card/style/theme-ascend.scss b/packages/opendesign/src/card/style/theme-ascend.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..4d0716a5d5c1f2e04dc6ba9bdfe2817b54a30695 100644
--- a/packages/opendesign/src/card/style/theme-ascend.scss
+++ b/packages/opendesign/src/card/style/theme-ascend.scss
@@ -0,0 +1,68 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-card-detail-limited {
+  --card-detail-mask-bg-color: var(--o-color-control-light);
+  --card-detail-mask-width: 4em;
+
+  position: relative;
+  display: block;
+  text-overflow: clip;
+
+  &::after {
+    background-image: linear-gradient(90deg, hsla(0, 0%, 93%, 0), hsla(0, 0%, 100%, 0.8) 59%, var(--card-detail-mask-bg-color) 100%);
+    bottom: 0;
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    width: var(--card-detail-mask-width);
+    height: var(--card-content-text-height);
+  }
+}
+
+@include hoverable {
+  .c-card-ascend-hover {
+    position: relative;
+  }
+
+  .c-card-ascend-hover:before {
+    background-image: linear-gradient(269deg, #e0f4f5, #e5f3f9 24%, #bac2ea 58%, #d0b4e5 97%);
+    content: '';
+    height: 100%;
+    left: 0;
+    -webkit-mask-image: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0.34) 22%, hsla(0, 0%, 100%, 0) 61%);
+    mask-image: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0.34) 22%, hsla(0, 0%, 100%, 0) 61%);
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    transition: opacity 0.3s;
+    width: 100%;
+    z-index: 0;
+  }
+
+  .c-card-ascend-hover > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  .c-card-ascend-hover:hover:before {
+    opacity: 1;
+  }
+}
+
+.c-card-ascend-xl-radius {
+  --card-radius: 24px;
+  --card-cover-radius: 24px;
+  @include respond-to('laptop-pc_s') {
+    --card-radius: 20px;
+    --card-cover-radius: 12px;
+  }
+  @include respond-to('pad_h') {
+    --card-radius: 16px;
+    --card-cover-radius: 8px;
+  }
+  @include respond-to('<=pad_v') {
+    --card-radius: 8px;
+    --card-cover-radius: 4px;
+  }
+}
diff --git a/packages/opendesign/src/card/style/theme-kunpeng.scss b/packages/opendesign/src/card/style/theme-kunpeng.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..c55f6cec8e01d41b5cd0e01f170739b097b7bb0b 100644
--- a/packages/opendesign/src/card/style/theme-kunpeng.scss
+++ b/packages/opendesign/src/card/style/theme-kunpeng.scss
@@ -0,0 +1,132 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-card-detail-limited {
+  --card-detail-mask-bg-color: var(--o-color-control-light);
+  --card-detail-mask-width: 4em;
+
+  position: relative;
+  display: block;
+  text-overflow: clip;
+
+  &::after {
+    background-image: linear-gradient(90deg, hsla(0, 0%, 93%, 0), hsla(0, 0%, 100%, 0.8) 59%, var(--card-detail-mask-bg-color) 100%);
+    bottom: 0;
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    width: var(--card-detail-mask-width);
+    height: var(--card-content-text-height);
+  }
+}
+
+.c-card-kunpeng {
+  &.o-card {
+    --card-shadow: none;
+    --card-shadow-hover: none;
+    --card-shadow-active: none;
+    --card-radius: 0px;
+    --card-cover-radius: 0px;
+    --card-icon-size: 48px;
+  }
+
+  .o-card-cover-v.o-card-cover-v,
+  .o-card-cover-h.o-card-cover-h,
+  .o-card-cover-hr.o-card-cover-hr {
+    --card-cover-padding: 0px;
+  }
+
+  &.o-card-hoverable {
+    .o-card-icon {
+      transition: color var(--o-duration-s) var(--o-easing-standard);
+    }
+    @include hover {
+      .o-card-icon {
+        color: rgb(var(--o-red-huawei));
+      }
+    }
+  }
+
+  &.o-card-hoverable.o-card-cursor-pointer {
+    .o-card-title {
+      transition: color var(--o-duration-s) var(--o-easing-standard);
+    }
+    @include hover {
+      .o-card-title {
+        color: rgb(var(--o-red-huawei));
+      }
+    }
+  }
+}
+
+@include respond-to('pad_h') {
+  .c-card-kunpeng {
+    &.o-card {
+      &:not(.o-card-no-responsive) {
+        --card-icon-size: var(--o-icon_size_control-xl);
+      }
+    }
+  }
+}
+.c-card-kunpeng {
+  &.o-card {
+    .o-card-cover-v {
+      .o-card-cover-img {
+        border-top-left-radius: var(--card-cover-radius);
+        border-top-right-radius: var(--card-cover-radius);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+
+        img {
+          border-top-left-radius: var(--card-cover-radius);
+          border-top-right-radius: var(--card-cover-radius);
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+    }
+
+    .o-card-cover-h {
+      .o-card-cover-img {
+        border-top-left-radius: var(--card-cover-radius);
+        border-top-right-radius: 0;
+        border-bottom-left-radius: var(--card-cover-radius);
+        border-bottom-right-radius: 0;
+
+        img {
+          border-top-left-radius: var(--card-cover-radius);
+          border-top-right-radius: 0;
+          border-bottom-left-radius: var(--card-cover-radius);
+          border-bottom-right-radius: 0;
+        }
+      }
+    }
+
+    .o-card-cover-hr {
+      .o-card-cover-img {
+        border-top-left-radius: 0;
+        border-top-right-radius: var(--card-cover-radius);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: var(--card-cover-radius);
+
+        img {
+          border-top-left-radius: 0;
+          border-top-right-radius: var(--card-cover-radius);
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: var(--card-cover-radius);
+        }
+      }
+    }
+  }
+}
+@include respond-to('<=pad_v') {
+  .c-card-kunpeng {
+    &.o-card {
+      --card-radius: 8px;
+      --card-cover-radius: 8px;
+      &:not(.o-card-no-responsive) {
+        --card-icon-size: var(--o-icon_size_control-l);
+      }
+    }
+  }
+}
diff --git a/packages/opendesign/src/card/style/theme-openeuler.scss b/packages/opendesign/src/card/style/theme-openeuler.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..80e3763cae31b06147f22a8a6ee3b668a2361d07 100644
--- a/packages/opendesign/src/card/style/theme-openeuler.scss
+++ b/packages/opendesign/src/card/style/theme-openeuler.scss
@@ -0,0 +1,118 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-card-detail-limited {
+  --card-detail-mask-bg-color: var(--o-color-control-light);
+  --card-detail-mask-width: 4em;
+
+  position: relative;
+  display: block;
+  text-overflow: clip;
+
+  &::after {
+    background-image: linear-gradient(90deg, hsla(0, 0%, 93%, 0), hsla(0, 0%, 100%, 0.8) 59%, var(--card-detail-mask-bg-color) 100%);
+    bottom: 0;
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    width: var(--card-detail-mask-width);
+    height: var(--card-content-text-height);
+  }
+}
+
+.c-card-openeuler {
+  &.o-card {
+    --card-radius: 4px;
+    --card-cover-radius: 4px;
+    --card-icon-size: 48px;
+  }
+
+  .o-card-cover-v.o-card-cover-v,
+  .o-card-cover-h.o-card-cover-h,
+  .o-card-cover-hr.o-card-cover-hr {
+    --card-cover-padding: 0px;
+  }
+
+  &.o-card-hoverable.o-card-cursor-pointer {
+    .o-card-title {
+      transition: color var(--o-duration-s) var(--o-easing-standard);
+    }
+    @include hover {
+      .o-card-title {
+        color: var(--o-color-primary1);
+      }
+    }
+  }
+}
+
+@include respond-to('pad_h') {
+  .c-card-openeuler {
+    &.o-card {
+      &:not(.o-card-no-responsive) {
+        --card-icon-size: var(--o-icon_size_control-xl);
+      }
+    }
+  }
+}
+.c-card-openeuler {
+  &.o-card {
+    .o-card-cover-v {
+      .o-card-cover-img {
+        border-top-left-radius: var(--card-cover-radius);
+        border-top-right-radius: var(--card-cover-radius);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+
+        img {
+          border-top-left-radius: var(--card-cover-radius);
+          border-top-right-radius: var(--card-cover-radius);
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+    }
+
+    .o-card-cover-h {
+      .o-card-cover-img {
+        border-top-left-radius: var(--card-cover-radius);
+        border-top-right-radius: 0;
+        border-bottom-left-radius: var(--card-cover-radius);
+        border-bottom-right-radius: 0;
+
+        img {
+          border-top-left-radius: var(--card-cover-radius);
+          border-top-right-radius: 0;
+          border-bottom-left-radius: var(--card-cover-radius);
+          border-bottom-right-radius: 0;
+        }
+      }
+    }
+
+    .o-card-cover-hr {
+      .o-card-cover-img {
+        border-top-left-radius: 0;
+        border-top-right-radius: var(--card-cover-radius);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: var(--card-cover-radius);
+
+        img {
+          border-top-left-radius: 0;
+          border-top-right-radius: var(--card-cover-radius);
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: var(--card-cover-radius);
+        }
+      }
+    }
+  }
+}
+@include respond-to('<=pad_v') {
+  .c-card-openeuler {
+    &.o-card {
+      &:not(.o-card-no-responsive) {
+        --card-radius: 8px;
+        --card-cover-radius: 8px;
+        --card-icon-size: var(--o-icon_size_control-l);
+      }
+    }
+  }
+}
diff --git a/packages/opendesign/src/card/style/var.scss b/packages/opendesign/src/card/style/var.scss
index 16b6f5cfef7295002e1865739af13a1f21ab396c..1440f657a5e0b00d2f437ab50eb29b2f82965b58 100644
--- a/packages/opendesign/src/card/style/var.scss
+++ b/packages/opendesign/src/card/style/var.scss
@@ -11,7 +11,9 @@
   --card-h-cover-width: 45%;
   --card-h-cover-max-width: 320px;
 
-  --card-main-padding: 24px 32px;
+  --card-main-padding-v: 24px;
+  --card-main-padding-h: 32px;
+  --card-main-padding: var(--card-main-padding-v) var(--card-main-padding-h);
 
   --card-icon-gap: 16px;
   --card-icon-color: var(--o-color-info1);
@@ -34,6 +36,10 @@
   --card-footer-color: var(--o-color-info2);
   --card-footer-text-size: var(--o-font_size-tip1);
   --card-footer-text-height: var(--o-line_height-tip1);
+
+  &.o-card-cover {
+    --card-main-padding-h: 24px;
+  }
 }
 
 .o-card-cover-v {
diff --git a/packages/opendesign/src/figure/style/theme-ascend.scss b/packages/opendesign/src/figure/style/theme-ascend.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..5c4e16824d3f0ad8a5b53ad170b5f9a03aa7355a 100644
--- a/packages/opendesign/src/figure/style/theme-ascend.scss
+++ b/packages/opendesign/src/figure/style/theme-ascend.scss
@@ -0,0 +1,24 @@
+@use '../../_styles/mixin.scss' as *;
+
+.c-figure-ascend-radius {
+  border-radius: 16px;
+  @include respond-to('laptop-pc_s') {
+    border-radius: 12px;
+  }
+  @include respond-to('<=pad') {
+    border-radius: 8px;
+  }
+}
+
+.c-figure-ascend-xl-radius {
+  border-radius: 24px;
+  @include respond-to('laptop-pc_s') {
+    border-radius: 20px;
+  }
+  @include respond-to('pad_h') {
+    border-radius: 16px;
+  }
+  @include respond-to('<=pad_v') {
+    border-radius: 8px;
+  }
+}
diff --git a/packages/opendesign/src/figure/style/theme-kunpeng.scss b/packages/opendesign/src/figure/style/theme-kunpeng.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..841147ff1b1269a14cad6d321481de4b1b9dcfdb 100644
--- a/packages/opendesign/src/figure/style/theme-kunpeng.scss
+++ b/packages/opendesign/src/figure/style/theme-kunpeng.scss
@@ -0,0 +1,7 @@
+@use '../../_styles/mixin.scss' as *;
+
+@include respond-to('<=pad_v') {
+  .c-figure-kunpeng-radius {
+    border-radius: 8px;
+  }
+}
diff --git a/packages/opendesign/src/figure/style/theme-openeuler.scss b/packages/opendesign/src/figure/style/theme-openeuler.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..2ee7a8402658655aa44461ecd6ef9c4217d6a59e 100644
--- a/packages/opendesign/src/figure/style/theme-openeuler.scss
+++ b/packages/opendesign/src/figure/style/theme-openeuler.scss
@@ -0,0 +1,11 @@
+@use '../../_styles/mixin.scss' as *;
+
+.c-figure-openeuler-radius {
+  border-radius: 4px;
+}
+
+@include respond-to('<=pad_v') {
+  .c-figure-openeuler-radius {
+    border-radius: 8px;
+  }
+}
diff --git a/packages/opendesign/src/link/style/theme-ascend.scss b/packages/opendesign/src/link/style/theme-ascend.scss
index 5f4b8aedb3a03bdde16dc722b78e5c52dad2630f..2dd6f57f24c522d83478757c2c50f6215c44c412 100644
--- a/packages/opendesign/src/link/style/theme-ascend.scss
+++ b/packages/opendesign/src/link/style/theme-ascend.scss
@@ -1,3 +1,5 @@
+@use '../../_styles/mixin.scss' as *;
+
 .o-link-normal {
   --link-color: var(--o-color-info2);
   --link-color-hover: var(--o-color-info1);
@@ -13,3 +15,77 @@
 .o-link-disabled.o-link-primary:active {
   color: var(--o-color-link4);
 }
+
+.c-link-ascend {
+  --arrow-width: 0.375em;
+  &.o-link-medium {
+    --arrow-width: 5px;
+    .o-link-suffix {
+      width: var(--o-icon_size_control-xs);
+      height: var(--o-icon_size_control-xs);
+    }
+  }
+  &.o-link-large {
+    --arrow-width: 6px;
+    .o-link-suffix {
+      width: var(--o-icon_size_control-m);
+      height: var(--o-icon_size_control-m);
+    }
+  }
+  @include respond-to('>pad') {
+    @include hoverable {
+      &:not(.o-link-disabled):hover {
+        .c-link-ascend-arrow {
+          transform: translate3d(0, 0, 0);
+          &::before {
+            opacity: 1;
+            transform: translate3d(0, 0, 0) rotate(45deg);
+          }
+          &::after {
+            opacity: 1;
+            transform: translate3d(0, 0, 0) rotate(-45deg);
+          }
+        }
+      }
+    }
+  }
+}
+.c-link-ascend-arrow {
+  width: var(--arrow-width);
+  height: 1px;
+  background-color: currentColor;
+  display: inline-flex;
+  position: relative;
+  transform-origin: 0 center;
+  transition: transform var(--o-easing-standard-in) var(--o-duration-m2);
+  border-radius: 1px;
+  margin-left: 3px;
+  &::after,
+  &::before {
+    content: '';
+    position: absolute;
+    right: -0.375em;
+    top: 0;
+    width: 130%;
+    height: 100%;
+    background-color: currentColor;
+    flex-shrink: 0;
+    transform-origin: 100% center;
+    transition: transform var(--o-easing-standard-in) var(--o-duration-m2), opacity var(--o-duration-m2);
+    border-radius: 1px;
+  }
+  &::before {
+    transform: translate3d(0, 0, 0) rotate(45deg);
+  }
+  &::after {
+    transform: translate3d(0, 0, 0) rotate(-45deg);
+  }
+  @include respond-to('>pad') {
+    transform: translate3d(-5px, 0.3em, 0);
+    &::before,
+    &::after {
+      transform: translate3d(-6px, 0, 0) scale(0.5);
+      opacity: 0;
+    }
+  }
+}
diff --git a/packages/opendesign/src/link/style/theme-kunpeng.scss b/packages/opendesign/src/link/style/theme-kunpeng.scss
index 5f4b8aedb3a03bdde16dc722b78e5c52dad2630f..eb500df187dd8c6f8eedd779a77059fc741c1111 100644
--- a/packages/opendesign/src/link/style/theme-kunpeng.scss
+++ b/packages/opendesign/src/link/style/theme-kunpeng.scss
@@ -1,3 +1,5 @@
+@use '../../_styles/mixin.scss' as *;
+
 .o-link-normal {
   --link-color: var(--o-color-info2);
   --link-color-hover: var(--o-color-info1);
@@ -13,3 +15,9 @@
 .o-link-disabled.o-link-primary:active {
   color: var(--o-color-link4);
 }
+
+.c-link-kunpeng {
+  @include hover {
+    --link-color-hover: rgb(var(--o-red-huawei));
+  }
+}