From b283cc3479a2cc99cf2820ceb64cfe7da40661b2 Mon Sep 17 00:00:00 2001
From: AC-0308 <pzzxtyh@qq.com>
Date: Thu, 27 Nov 2025 11:07:32 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat(OCard):=20=E2=9C=A8=20OCard=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0titleIcon=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/card/OCard.vue        | 16 ++++++++++++++-
 .../opendesign/src/card/__demo__/CardIcon.vue |  8 +++++++-
 packages/opendesign/src/card/style/media.scss |  8 ++++++++
 packages/opendesign/src/card/style/style.scss | 20 +++++++++++++++++++
 packages/opendesign/src/card/style/var.scss   |  4 ++++
 packages/opendesign/src/card/types.ts         |  7 +++++++
 6 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/packages/opendesign/src/card/OCard.vue b/packages/opendesign/src/card/OCard.vue
index bbfcf4ff..8dfcfd76 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 hasTitleIcon = computed(() => {
+  return props.titleIcon;
+});
 </script>
 
 <template>
@@ -75,8 +79,18 @@ const isDetailLimited = computed(() => {
           <div class="o-card-main-wrap">
             <div>
               <!-- header -->
-              <div v-if="props.title || !!slots.header || !!slots.title" class="o-card-header">
+              <div
+                v-if="props.title || !!slots.header || !!slots.title"
+                :class="{
+                  'o-card-header': true,
+                  'o-card-header-with-icon': hasTitleIcon
+                }"
+              >
                 <slot name="header">
+                  <div v-if="hasTitleIcon" class="o-card-title-icon">
+                    <OFigure v-if="isString(props.titleIcon)" :src="props.titleIcon" class="o-card-title-icon-figure"/>
+                    <component :is="props.titleIcon" v-else />
+                  </div>
                   <div
                     v-if="props.title"
                     class="o-card-title"
diff --git a/packages/opendesign/src/card/__demo__/CardIcon.vue b/packages/opendesign/src/card/__demo__/CardIcon.vue
index 4590ab4c..a85ecc33 100644
--- a/packages/opendesign/src/card/__demo__/CardIcon.vue
+++ b/packages/opendesign/src/card/__demo__/CardIcon.vue
@@ -2,7 +2,7 @@
 import { OCard } from '../index';
 import '../../button/style';
 import { OButton } from '../../button';
-import { OIconStar } from '../../icon-components';
+import { OIconStar, OIconSkill } from '../../icon-components';
 
 const cardInfo = {
   cover: 'https://www.openeuler.org/img/banners/20230418-odd.png',
@@ -28,6 +28,12 @@ const cardInfo = {
       </OCard>
     </div>
   </section>
+  <section>
+    <div class="display-item">
+      <h4>单体卡片（响应式, titleIcon属性）</h4>
+      <OCard hoverable :title="cardInfo.title" :detail="cardInfo.detail" :title-icon="OIconSkill" />
+    </div>
+  </section>
 </template>
 <style lang="scss" scoped>
 section {
diff --git a/packages/opendesign/src/card/style/media.scss b/packages/opendesign/src/card/style/media.scss
index 3d1a3e0a..a84ba875 100644
--- a/packages/opendesign/src/card/style/media.scss
+++ b/packages/opendesign/src/card/style/media.scss
@@ -13,6 +13,8 @@
 
       --card-icon-gap: 12px;
 
+      --card-title-icon-gap: var(--o-gap-2);
+
       --card-content-gap: 8px;
       --card-content-text-size: var(--o-font_size-tip1);
       --card-content-text-height: var(--o-line_height-tip1);
@@ -39,6 +41,9 @@
       --card-icon-gap: 8px;
       --card-icon-size: var(--o-icon_size_control-l);
 
+      --card-title-icon-gap: var(--o-gap-2);
+      --card-title-icon-size: var(--o-icon_size-m);
+
       --card-content-gap: 8px;
       --card-content-text-size: var(--o-font_size-tip1);
       --card-content-text-height: var(--o-line_height-tip1);
@@ -77,6 +82,9 @@
       --card-icon-gap: 8px;
       --card-icon-size: var(--o-icon_size_control-l);
 
+      --card-title-icon-gap: var(--o-gap-2);
+      --card-title-icon-size: var(--o-icon_size-m);
+
       --card-content-gap: 8px;
       --card-content-text-size: var(--o-font_size-tip2);
       --card-content-text-height: var(--o-line_height-tip2);
diff --git a/packages/opendesign/src/card/style/style.scss b/packages/opendesign/src/card/style/style.scss
index 6ca74f7b..9f5f86d4 100644
--- a/packages/opendesign/src/card/style/style.scss
+++ b/packages/opendesign/src/card/style/style.scss
@@ -41,6 +41,26 @@
   color: var(--card-header-color);
 }
 
+.o-card-header-with-icon {
+  position: relative;
+
+  .o-card-title {
+    text-indent: calc(var(--card-title-icon-size) + var(--card-title-icon-gap));
+  }
+}
+
+.o-card-title-icon {
+  width: var(--card-title-icon-size);
+  height: var(--card-title-icon-size);
+  position: absolute;
+  top: calc((var(--card-header-text-height) - var(--card-title-icon-size)) / 2);
+  font-size: var(--card-title-icon-size);
+}
+
+.o-card-title-icon-figure {
+  width: 100%;
+}
+
 .o-card-title {
   height: calc(var(--card-title-row) * var(--card-header-text-height));
   margin: 0;
diff --git a/packages/opendesign/src/card/style/var.scss b/packages/opendesign/src/card/style/var.scss
index 16b6f5cf..46d47522 100644
--- a/packages/opendesign/src/card/style/var.scss
+++ b/packages/opendesign/src/card/style/var.scss
@@ -17,6 +17,10 @@
   --card-icon-color: var(--o-color-info1);
   --card-icon-size: var(--o-icon_size_control-xl);
 
+  --card-title-icon-gap: var(--o-gap-3);
+  --card-title-icon-color: var(--o-color-info1);
+  --card-title-icon-size: var(--o-icon_size-l);
+
   --card-header-color: var(--o-color-info1);
   --card-header-text-size: var(--o-font_size-h3);
   --card-header-text-height: var(--o-line_height-h3);
diff --git a/packages/opendesign/src/card/types.ts b/packages/opendesign/src/card/types.ts
index b5b885b1..e4dca28a 100644
--- a/packages/opendesign/src/card/types.ts
+++ b/packages/opendesign/src/card/types.ts
@@ -49,6 +49,13 @@ export const cardProps = {
   icon: {
     type: [String, Object] as PropType<string | Component>,
   },
+  /**
+   * @zh-CN title开头的行内图标
+   * @en-US Title prefix icon
+   */
+  titleIcon: {
+    type: [String, Object] as PropType<string | Component>,
+  },
   /**
    * @zh-CN 标题
    * @en-US Title
-- 
Gitee


From be1a3fa91610af764a1352f6ab91aa1f42c5ab70 Mon Sep 17 00:00:00 2001
From: AC-0308 <pzzxtyh@qq.com>
Date: Thu, 27 Nov 2025 14:36:55 +0800
Subject: [PATCH 2/3] =?UTF-8?q?chore(DX):=20=F0=9F=A7=B1=20=E5=BC=80?=
 =?UTF-8?q?=E5=90=AFdoc=E7=9A=84=E5=BC=80=E5=8F=91=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=99=A8=E5=B1=80=E5=9F=9F=E7=BD=91=E8=AE=BF=E9=97=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/vite.config.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/docs/vite.config.ts b/packages/docs/vite.config.ts
index b6c01d20..3f2bd16b 100644
--- a/packages/docs/vite.config.ts
+++ b/packages/docs/vite.config.ts
@@ -35,6 +35,8 @@ export default defineConfig({
     },
   },
   server: {
+    host: '0.0.0.0',
+    allowedHosts: true,
     port: 3300,
   },
   define: {
-- 
Gitee


From 087d5b760e7aa1c437402081a2179f71a9a6a0e3 Mon Sep 17 00:00:00 2001
From: AC-0308 <pzzxtyh@qq.com>
Date: Thu, 27 Nov 2025 14:40:05 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat(OCard):=20=E2=9C=A8=20=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0OCard=E4=B8=BB=E9=A2=98=E4=B8=ADtitle-icon=E7=9A=84?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/portal-ak/src/ak/theme/card.k.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/portal-ak/src/ak/theme/card.k.scss b/packages/portal-ak/src/ak/theme/card.k.scss
index 48fe33f5..4d06373a 100644
--- a/packages/portal-ak/src/ak/theme/card.k.scss
+++ b/packages/portal-ak/src/ak/theme/card.k.scss
@@ -42,7 +42,7 @@
       transition: color var(--o-duration-s) var(--o-easing-standard);
     }
     @include hover {
-      .o-card-icon {
+      .o-card-icon, .o-card-title-icon {
         color: rgb(var(--o-red-huawei));
       }
     }
-- 
Gitee