diff --git a/mpuniapp/common/api.uts b/mpuniapp/common/api.uts
index 2eb9f5b..7ad7139 100644
--- a/mpuniapp/common/api.uts
+++ b/mpuniapp/common/api.uts
@@ -6,6 +6,8 @@
 import {
   AiChatReply,
   AiChatRequest,
+  CardArticle,
+  CardCase,
   CardContact,
   CardEvent,
   CardEventJoinResult,
@@ -248,5 +250,53 @@ export function confirmHallExchange(
   );
 }
 
+export function fetchCardCasesPage(
+  query: OwnerPageQuery
+): Promise<OwnerPageData<CardCase>> {
+  return httpPost<OwnerPageData<CardCase>>('/admin/card/cases/page', query);
+}
+
+export function fetchCardCaseInfo(id: string | number): Promise<CardCase> {
+  return httpGet<CardCase>('/admin/card/cases/info', { id });
+}
+
+export function addCardCase(data: Partial<CardCase>): Promise<CardCase> {
+  return httpPost<CardCase>('/admin/card/cases/add', data);
+}
+
+export function updateCardCase(
+  data: Partial<CardCase> & { id: string | number }
+): Promise<CardCase> {
+  return httpPost<CardCase>('/admin/card/cases/update', data);
+}
+
+export function deleteCardCase(id: string | number): Promise<boolean> {
+  return httpPost<boolean>('/admin/card/cases/delete', { ids: [id] });
+}
+
+export function fetchCardArticlesPage(
+  query: OwnerPageQuery
+): Promise<OwnerPageData<CardArticle>> {
+  return httpPost<OwnerPageData<CardArticle>>('/admin/card/article/page', query);
+}
+
+export function fetchCardArticleInfo(id: string | number): Promise<CardArticle> {
+  return httpGet<CardArticle>('/admin/card/article/info', { id });
+}
+
+export function addCardArticle(data: Partial<CardArticle>): Promise<CardArticle> {
+  return httpPost<CardArticle>('/admin/card/article/add', data);
+}
+
+export function updateCardArticle(
+  data: Partial<CardArticle> & { id: string | number }
+): Promise<CardArticle> {
+  return httpPost<CardArticle>('/admin/card/article/update', data);
+}
+
+export function deleteCardArticle(id: string | number): Promise<boolean> {
+  return httpPost<boolean>('/admin/card/article/delete', { ids: [id] });
+}
+
 export * from './types.uts';
 export * from './request.uts';
diff --git a/mpuniapp/common/types.uts b/mpuniapp/common/types.uts
index 438fe56..e9db8e4 100644
--- a/mpuniapp/common/types.uts
+++ b/mpuniapp/common/types.uts
@@ -1,6 +1,6 @@
 /**
  * OmniCard AI (CRMmp) - 用户端跨端核心数据契约与 TypeScript / UTS 类型体系
- * 严格遵循 AGENTS.md 规范与出海 SaaS 契约，与 backend / admin 镜像对齐
+ * 严格遵循 AGENTS.md 规范与全球数字名片 SaaS 契约，与 backend / admin 镜像对齐
  */
 
 export type CardStatus = 'draft' | 'published' | 'archived';
@@ -294,3 +294,32 @@ export interface AiChatReply {
   locale: string;
   shouldCollectLead: boolean;
 }
+
+export interface CardCase {
+  id?: string | number;
+  tenantId?: string | number;
+  cardId: string | number;
+  title: string;
+  client?: string;
+  duration?: string;
+  metrics?: string;
+  coverImage?: string;
+  pdfUrl?: string;
+  description?: string;
+  sortOrder?: number;
+  createTime?: string | Date;
+  updateTime?: string | Date;
+}
+
+export interface CardArticle {
+  id?: string | number;
+  cardId: string | number;
+  title: string;
+  summary?: string;
+  content: string;
+  coverImage?: string;
+  isPublished: boolean;
+  ogMeta?: Record<string, any>;
+  createTime?: Date | string;
+  updateTime?: Date | string;
+}
diff --git a/mpuniapp/pages.json b/mpuniapp/pages.json
index 679156e..d91c175 100644
--- a/mpuniapp/pages.json
+++ b/mpuniapp/pages.json
@@ -100,6 +100,20 @@
 				"backgroundColorContent": "#F7F8FA"
 			}
 		},
+		{
+			"path": "pages/owner/card/cases",
+			"style": {
+				"navigationBarTitleText": "产品相册",
+				"backgroundColorContent": "#F7F8FA"
+			}
+		},
+		{
+			"path": "pages/owner/card/articles",
+			"style": {
+				"navigationBarTitleText": "文章动态",
+				"backgroundColorContent": "#F7F8FA"
+			}
+		},
 		{
 			"path": "pages/owner/leads-detail",
 			"style": {
diff --git a/mpuniapp/pages/owner/card/articles.uvue b/mpuniapp/pages/owner/card/articles.uvue
new file mode 100644
index 0000000..806e74e
--- /dev/null
+++ b/mpuniapp/pages/owner/card/articles.uvue
@@ -0,0 +1,744 @@
+<template>
+  <view class="articles-page" :class="pageRtlClass" :style="pageTheme">
+    <!-- 顶部极光微光晕 -->
+    <view class="ambient-aurora-glow"></view>
+
+    <!-- 顶部标题栏 -->
+    <view class="articles-header-bar">
+      <view class="articles-title-group">
+        <text class="articles-heading">{{ t('title') }}</text>
+        <text class="articles-subtitle">{{ t('subtitle') }}</text>
+      </view>
+    </view>
+
+    <!-- 骨架屏加载态 -->
+    <view v-if="state.loading" class="articles-skeleton">
+      <view class="skeleton-card"></view>
+      <view class="skeleton-card"></view>
+    </view>
+
+    <!-- 空状态展示 -->
+    <view v-else-if="state.empty" class="articles-empty-card">
+      <view class="empty-badge">
+        <text class="empty-badge-icon">!</text>
+      </view>
+      <text class="empty-title">{{ t('emptyTitle') }}</text>
+      <text class="empty-desc">{{ t('emptyDesc') }}</text>
+    </view>
+
+    <!-- 文章动态列表 -->
+    <scroll-view v-else class="articles-scroll" :scroll-y="true">
+      <view class="articles-list">
+        <view v-for="item in state.list" :key="item.id" class="article-item-card">
+          <image
+            v-if="item.coverImage != null && item.coverImage !== ''"
+            class="article-item-cover"
+            :src="item.coverImage!"
+            mode="aspectFill"
+          />
+
+          <view class="article-item-body">
+            <view class="article-item-header">
+              <text class="article-item-title">{{ item.title }}</text>
+              <view
+                class="article-status-pill"
+                :class="item.isPublished ? 'status-pill-published' : 'status-pill-draft'"
+                @click="handleToggleStatus(item)"
+              >
+                <text class="article-status-text">
+                  {{ item.isPublished ? t('statusPublished') : t('statusDraft') }}
+                </text>
+              </view>
+            </view>
+
+            <text v-if="item.summary != null && item.summary !== ''" class="article-item-summary">
+              {{ item.summary }}
+            </text>
+
+            <view class="article-item-actions">
+              <button class="action-btn action-btn-edit" @click="handleOpenEdit(item)">
+                <text class="action-btn-text">{{ t('editBtn') }}</text>
+              </button>
+              <button class="action-btn action-btn-delete" @click="handleDelete(item)">
+                <text class="action-btn-delete-text">{{ t('deleteBtn') }}</text>
+              </button>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 底部常驻主 CTA 悬浮栏 -->
+    <view class="articles-bottom-bar">
+      <button class="primary-cta-btn" @click="handleOpenAdd">
+        <text class="primary-cta-btn-text">{{ t('publishBtn') }}</text>
+      </button>
+    </view>
+
+    <!-- 底部编辑抽屉 (Bottom Sheet) -->
+    <view v-if="state.drawerVisible" class="drawer-mask" @click="handleCloseDrawer">
+      <view class="drawer-sheet" @click.stop="">
+        <view class="drawer-handle-bar">
+          <view class="drawer-handle"></view>
+        </view>
+
+        <view class="drawer-header">
+          <text class="drawer-title">{{ isEditing ? t('editBtn') : t('publishBtn') }}</text>
+          <text class="drawer-close" @click="handleCloseDrawer">&times;</text>
+        </view>
+
+        <scroll-view class="drawer-scroll" :scroll-y="true">
+          <view class="drawer-form">
+            <!-- 标题 -->
+            <view class="form-field">
+              <text class="form-label">{{ t('fieldTitle') }} *</text>
+              <input
+                class="form-input"
+                type="text"
+                v-model="editForm.title"
+                placeholder="例如：2026 全球智能硬件合规白皮书"
+              />
+            </view>
+
+            <!-- 摘要导读 -->
+            <view class="form-field">
+              <text class="form-label">{{ t('fieldSummary') }}</text>
+              <input
+                class="form-input"
+                type="text"
+                v-model="editForm.summary"
+                placeholder="若不填写将自动从正文中提取摘要..."
+              />
+            </view>
+
+            <!-- 封面图 -->
+            <view class="form-field">
+              <text class="form-label">{{ t('fieldCover') }}</text>
+              <image-uploader
+                :max-count="1"
+                :model-value="uploadedCover"
+                @update:modelValue="handleCoverChange"
+              />
+            </view>
+
+            <!-- 正文内容 -->
+            <view class="form-field">
+              <text class="form-label">{{ t('fieldContent') }} *</text>
+              <textarea
+                class="form-textarea"
+                v-model="editForm.content"
+                placeholder="输入正文内容，支持段落与 Markdown..."
+                maxlength="2000"
+              ></textarea>
+            </view>
+
+            <!-- 公开发布状态 -->
+            <view class="form-field-switch">
+              <view class="switch-info">
+                <text class="switch-title">{{ t('fieldPublish') }}</text>
+                <text class="switch-desc">{{ publishDescText }}</text>
+              </view>
+              <switch
+                :checked="editForm.isPublished"
+                color="#0088FF"
+                @change="handleSwitchChange"
+              />
+            </view>
+          </view>
+        </scroll-view>
+
+        <!-- 抽屉底部操作条 -->
+        <view class="drawer-action-bar">
+          <button class="drawer-btn-cancel" @click="handleCloseDrawer">
+            <text class="drawer-btn-cancel-text">{{ t('cancelBtn') }}</text>
+          </button>
+          <button
+            class="primary-cta-btn drawer-btn-save"
+            :disabled="state.saving"
+            @click="handleSave"
+          >
+            <text class="primary-cta-btn-text">{{ state.saving ? savingText : t('saveBtn') }}</text>
+          </button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { CardArticle } from '../../../common/types.uts';
+import {
+  createArticlesState,
+  loadArticles,
+  saveArticle,
+  deleteArticle,
+  toggleArticlePublish,
+  resolveArticlesText,
+  ArticlesCopyKey,
+} from './useCardArticles.uts';
+import ImageUploader from '../../../components/image-uploader/image-uploader.uvue';
+import { getCurrentLocale, isRtl } from '../../../common/locale.uts';
+import { utsLightColors, utsRadius, utsSpacing, utsTypography } from '../../../common/tokens.uts';
+
+const currentCardId = ref<string>('1001');
+const state = reactive(createArticlesState('1001'));
+
+const editForm = reactive<Partial<CardArticle>>({
+  title: '',
+  summary: '',
+  coverImage: '',
+  content: '',
+  isPublished: true,
+});
+
+const uploadedCover = ref<string[]>([]);
+
+const isEditing = computed<boolean>(() => {
+  return editForm.id != null;
+});
+
+const pageRtlClass = computed<string>(() => {
+  return isRtl(getCurrentLocale()) ? 'page-rtl' : '';
+});
+
+const publishDescText = computed<string>(() => {
+  return getCurrentLocale() === 'zh-CN'
+    ? '开启后，全球访客可在您的名片微官网中直接浏览'
+    : 'When enabled, visitors can view this insight on your micro-site';
+});
+
+const savingText = computed<string>(() => {
+  return getCurrentLocale() === 'zh-CN' ? '保存中...' : 'Saving...';
+});
+
+const pageTheme: Record<string, string> = {
+  '--oc-primary': utsLightColors.primary,
+  '--oc-primary-gradient': utsLightColors.primaryGradient,
+  '--oc-primary-soft': utsLightColors.primarySoft,
+  '--oc-aurora': utsLightColors.aurora,
+  '--oc-bg': utsLightColors.bg,
+  '--oc-surface': utsLightColors.surface,
+  '--oc-border': utsLightColors.border,
+  '--oc-text': utsLightColors.text,
+  '--oc-text-2': utsLightColors.text2,
+  '--oc-success': utsLightColors.success,
+  '--oc-warning': utsLightColors.warning,
+  '--oc-error': utsLightColors.error,
+  '--oc-radius-btn': utsRadius.btn,
+  '--oc-radius-card': utsRadius.card,
+  '--oc-radius-sheet': utsRadius.sheet,
+  '--oc-space-16': utsSpacing.s16,
+  '--oc-space-24': utsSpacing.s24,
+  '--oc-font-title': utsTypography.title,
+  '--oc-font-body': utsTypography.body,
+  '--oc-font-caption': utsTypography.caption,
+};
+
+function t(key: ArticlesCopyKey): string {
+  return resolveArticlesText(key);
+}
+
+function handleOpenAdd(): void {
+  editForm.id = undefined;
+  editForm.title = '';
+  editForm.summary = '';
+  editForm.coverImage = '';
+  editForm.content = '';
+  editForm.isPublished = true;
+  uploadedCover.value = [];
+  state.drawerVisible = true;
+}
+
+function handleOpenEdit(item: CardArticle): void {
+  editForm.id = item.id;
+  editForm.title = item.title;
+  editForm.summary = item.summary || '';
+  editForm.coverImage = item.coverImage || '';
+  editForm.content = item.content || '';
+  editForm.isPublished = item.isPublished;
+  uploadedCover.value = item.coverImage ? [item.coverImage] : [];
+  state.drawerVisible = true;
+}
+
+function handleCloseDrawer(): void {
+  state.drawerVisible = false;
+}
+
+function handleCoverChange(imgs: string[]): void {
+  uploadedCover.value = imgs;
+  if (imgs.length > 0) {
+    editForm.coverImage = imgs[0];
+  } else {
+    editForm.coverImage = '';
+  }
+}
+
+function handleSwitchChange(e: any): void {
+  editForm.isPublished = Boolean(e.detail.value);
+}
+
+async function handleToggleStatus(item: CardArticle): Promise<void> {
+  const ok = await toggleArticlePublish(state, item);
+  if (ok) {
+    uni.showToast({
+      title: getCurrentLocale() === 'zh-CN' ? '状态已切换' : 'Status Updated',
+      icon: 'none',
+    });
+  }
+}
+
+async function handleSave(): Promise<void> {
+  const success = await saveArticle(state, editForm);
+  if (success) {
+    uni.showToast({
+      title: getCurrentLocale() === 'zh-CN' ? '动态已保存' : 'Article Saved',
+      icon: 'none',
+    });
+  } else if (state.errorMessage !== '') {
+    uni.showToast({
+      title: state.errorMessage,
+      icon: 'none',
+    });
+  }
+}
+
+async function handleDelete(item: CardArticle): void {
+  if (item.id == null) return;
+  const zh = getCurrentLocale() === 'zh-CN';
+  uni.showModal({
+    title: zh ? '确认删除' : 'Confirm Delete',
+    content: zh ? '确定要删除该文章动态吗？' : 'Are you sure you want to delete this article?',
+    confirmText: zh ? '删除' : 'Delete',
+    cancelText: zh ? '取消' : 'Cancel',
+    success: async (res: any) => {
+      if (res.confirm) {
+        const ok = await deleteArticle(state, item.id!);
+        if (ok) {
+          uni.showToast({
+            title: zh ? '已删除' : 'Deleted',
+            icon: 'none',
+          });
+        }
+      }
+    },
+  });
+}
+
+onLoad((options: any) => {
+  const id = options && (options.cardId || options.id) ? String(options.cardId || options.id) : '1001';
+  currentCardId.value = id;
+  state.cardId = id;
+  loadArticles(state);
+});
+</script>
+
+<style scoped>
+.articles-page {
+  position: relative;
+  min-height: 100vh;
+  background-color: var(--oc-bg);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.ambient-aurora-glow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 160px;
+  background: var(--oc-aurora);
+  opacity: 0.08;
+  pointer-events: none;
+}
+
+.articles-header-bar {
+  padding: 20px 16px 12px 16px;
+  position: relative;
+  z-index: 1;
+}
+
+.articles-heading {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--oc-text);
+  line-height: 1.3;
+}
+
+.articles-subtitle {
+  font-size: 13px;
+  color: var(--oc-text-2);
+  margin-top: 6px;
+  line-height: 1.5;
+}
+
+.articles-scroll {
+  flex: 1;
+  padding: 0 16px;
+  box-sizing: border-box;
+}
+
+.articles-list {
+  padding-bottom: 96px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.article-item-card {
+  background-color: var(--oc-surface);
+  border-radius: var(--oc-radius-card);
+  overflow: hidden;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(11, 99, 229, 0.03);
+  border: 1px solid var(--oc-border);
+  display: flex;
+  flex-direction: column;
+}
+
+.article-item-cover {
+  width: 100%;
+  height: 150px;
+  background-color: #EBF1F7;
+}
+
+.article-item-body {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.article-item-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.article-item-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--oc-text);
+  flex: 1;
+  line-height: 1.4;
+}
+
+.article-status-pill {
+  padding: 4px 10px;
+  border-radius: 9999px;
+}
+
+.status-pill-published {
+  background-color: #ECFDF3;
+}
+
+.status-pill-draft {
+  background-color: #F2F4F7;
+}
+
+.article-status-text {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--oc-text);
+}
+
+.article-item-summary {
+  font-size: 13px;
+  color: var(--oc-text-2);
+  line-height: 1.5;
+}
+
+.article-item-actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 8px;
+  border-top: 1px solid var(--oc-border);
+  padding-top: 10px;
+}
+
+.action-btn {
+  height: 44px;
+  min-height: 44px;
+  padding: 0 16px;
+  border-radius: var(--oc-radius-btn);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+
+.action-btn-edit {
+  background-color: var(--oc-primary-soft);
+}
+
+.action-btn-text {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--oc-primary);
+}
+
+.action-btn-delete {
+  background-color: #FFF1F0;
+}
+
+.action-btn-delete-text {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--oc-error);
+}
+
+.articles-empty-card {
+  margin: 40px 16px;
+  padding: 32px 20px;
+  background-color: var(--oc-surface);
+  border-radius: var(--oc-radius-card);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
+}
+
+.empty-badge {
+  width: 48px;
+  height: 48px;
+  border-radius: 24px;
+  background-color: var(--oc-primary-soft);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+
+.empty-badge-icon {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--oc-primary);
+}
+
+.empty-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--oc-text);
+  margin-bottom: 6px;
+}
+
+.empty-desc {
+  font-size: 13px;
+  color: var(--oc-text-2);
+  line-height: 1.5;
+}
+
+.articles-bottom-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 12px 16px;
+  padding-bottom: calc(12px + env(safe-area-inset-bottom));
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(12px);
+  border-top: 1px solid var(--oc-border);
+  z-index: 10;
+}
+
+.primary-cta-btn {
+  width: 100%;
+  height: 48px;
+  min-height: 44px;
+  background: var(--oc-primary-gradient);
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  box-shadow: 0 8px 20px rgba(0, 136, 255, 0.22);
+}
+
+.primary-cta-btn-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #FFFFFF;
+}
+
+/* 抽屉样式 */
+.drawer-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 100;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+}
+
+.drawer-sheet {
+  background-color: var(--oc-surface);
+  border-top-left-radius: var(--oc-radius-sheet);
+  border-top-right-radius: var(--oc-radius-sheet);
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.drawer-handle-bar {
+  padding-top: 10px;
+  display: flex;
+  justify-content: center;
+}
+
+.drawer-handle {
+  width: 36px;
+  height: 4px;
+  background-color: #D0D5DD;
+  border-radius: 2px;
+}
+
+.drawer-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 20px 16px 20px;
+  border-bottom: 1px solid var(--oc-border);
+}
+
+.drawer-title {
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--oc-text);
+}
+
+.drawer-close {
+  font-size: 24px;
+  color: var(--oc-text-2);
+  line-height: 1;
+  padding: 4px 8px;
+}
+
+.drawer-scroll {
+  max-height: 60vh;
+  padding: 16px 20px;
+  box-sizing: border-box;
+}
+
+.drawer-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding-bottom: 20px;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-field-switch {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-top: 1px solid var(--oc-border);
+}
+
+.switch-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.switch-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--oc-text);
+}
+
+.switch-desc {
+  font-size: 12px;
+  color: var(--oc-text-2);
+}
+
+.form-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--oc-text);
+}
+
+.form-input {
+  height: 44px;
+  min-height: 44px;
+  font-size: 16px;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-btn);
+  padding: 0 14px;
+  background-color: #FAFAFA;
+  color: var(--oc-text);
+}
+
+.form-textarea {
+  font-size: 16px;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-btn);
+  padding: 12px 14px;
+  background-color: #FAFAFA;
+  color: var(--oc-text);
+  height: 120px;
+}
+
+.drawer-action-bar {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  padding: 12px 20px;
+  border-top: 1px solid var(--oc-border);
+}
+
+.drawer-btn-cancel {
+  flex: 1;
+  height: 46px;
+  min-height: 44px;
+  background-color: #F2F4F7;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+
+.drawer-btn-cancel-text {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--oc-text-2);
+}
+
+.drawer-btn-save {
+  flex: 2;
+  height: 46px;
+  min-height: 44px;
+}
+
+.skeleton-card {
+  height: 120px;
+  background: #EAECF0;
+  border-radius: var(--oc-radius-card);
+  margin: 16px;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0% { opacity: 0.6; }
+  50% { opacity: 1; }
+  100% { opacity: 0.6; }
+}
+</style>
diff --git a/mpuniapp/pages/owner/card/cases.uvue b/mpuniapp/pages/owner/card/cases.uvue
new file mode 100644
index 0000000..a48d31a
--- /dev/null
+++ b/mpuniapp/pages/owner/card/cases.uvue
@@ -0,0 +1,785 @@
+<template>
+  <view class="cases-page" :class="pageRtlClass" :style="pageTheme">
+    <!-- 顶部极光微光晕 -->
+    <view class="ambient-aurora-glow"></view>
+
+    <!-- 顶部状态栏与标题导航 -->
+    <view class="cases-header-bar">
+      <view class="cases-title-group">
+        <text class="cases-heading">{{ t('title') }}</text>
+        <text class="cases-subtitle">{{ t('subtitle') }}</text>
+      </view>
+    </view>
+
+    <!-- 骨架屏加载态 -->
+    <view v-if="state.loading" class="cases-skeleton">
+      <view class="skeleton-card"></view>
+      <view class="skeleton-card"></view>
+    </view>
+
+    <!-- 空状态展示 -->
+    <view v-else-if="state.empty" class="cases-empty-card">
+      <view class="empty-badge">
+        <text class="empty-badge-icon">!</text>
+      </view>
+      <text class="empty-title">{{ t('emptyTitle') }}</text>
+      <text class="empty-desc">{{ t('emptyDesc') }}</text>
+    </view>
+
+    <!-- 案例与相册列表 -->
+    <scroll-view v-else class="cases-scroll" :scroll-y="true">
+      <view class="cases-list">
+        <view v-for="item in state.list" :key="item.id" class="case-item-card">
+          <image
+            v-if="item.coverImage != null && item.coverImage !== ''"
+            class="case-item-cover"
+            :src="item.coverImage!"
+            mode="aspectFill"
+          />
+          <view v-else class="case-item-cover-placeholder">
+            <text class="placeholder-text">{{ placeholderCoverText }}</text>
+          </view>
+
+          <view class="case-item-body">
+            <view class="case-item-top">
+              <text class="case-item-title">{{ item.title }}</text>
+              <view v-if="item.metrics != null && item.metrics !== ''" class="case-metrics-pill">
+                <text class="case-metrics-text">{{ item.metrics }}</text>
+              </view>
+            </view>
+
+            <view v-if="item.client != null && item.client !== ''" class="case-item-meta">
+              <text class="case-meta-label">{{ clientPrefixText }}</text>
+              <text class="case-meta-value">{{ item.client }}</text>
+            </view>
+
+            <text v-if="item.description != null && item.description !== ''" class="case-item-desc">
+              {{ item.description }}
+            </text>
+
+            <view class="case-item-actions">
+              <button class="action-btn action-btn-edit" @click="handleOpenEdit(item)">
+                <text class="action-btn-text">{{ t('editBtn') }}</text>
+              </button>
+              <button class="action-btn action-btn-delete" @click="handleDelete(item)">
+                <text class="action-btn-delete-text">{{ t('deleteBtn') }}</text>
+              </button>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 底部常驻主 CTA 悬浮栏 -->
+    <view class="cases-bottom-bar">
+      <button class="primary-cta-btn" @click="handleOpenAdd">
+        <text class="primary-cta-btn-text">{{ t('addBtn') }}</text>
+      </button>
+    </view>
+
+    <!-- 底部编辑抽屉 (Bottom Sheet) -->
+    <view v-if="state.drawerVisible" class="drawer-mask" @click="handleCloseDrawer">
+      <view class="drawer-sheet" @click.stop="">
+        <view class="drawer-handle-bar">
+          <view class="drawer-handle"></view>
+        </view>
+
+        <view class="drawer-header">
+          <text class="drawer-title">{{ isEditing ? t('editBtn') : t('addBtn') }}</text>
+          <text class="drawer-close" @click="handleCloseDrawer">&times;</text>
+        </view>
+
+        <scroll-view class="drawer-scroll" :scroll-y="true">
+          <view class="drawer-form">
+            <!-- 标题 -->
+            <view class="form-field">
+              <text class="form-label">{{ t('fieldTitle') }} *</text>
+              <input
+                class="form-input"
+                type="text"
+                v-model="editForm.title"
+                placeholder="例如：全球智能硬件出海交付方案"
+              />
+            </view>
+
+            <!-- 客户名称 -->
+            <view class="form-field">
+              <text class="form-label">{{ t('fieldClient') }}</text>
+              <input
+                class="form-input"
+                type="text"
+                v-model="editForm.client"
+                placeholder="例如：阿联酋国际商业联合会"
+              />
+            </view>
+
+            <!-- 项目周期 -->
+            <view class="form-field">
+              <text class="form-label">{{ t('fieldDuration') }}</text>
+              <input
+                class="form-input"
+                type="text"
+                v-model="editForm.duration"
+                placeholder="例如：2025.06 - 2025.12"
+              />
+            </view>
+
+            <!-- 量化成效标签快捷选择 -->
+            <view class="form-field">
+              <text class="form-label">{{ t('fieldMetrics') }}</text>
+              <view class="metrics-pill-group">
+                <view
+                  v-for="metric in PRESET_CASE_METRICS"
+                  :key="metric"
+                  class="preset-metric-pill"
+                  :class="{ 'preset-metric-pill-active': editForm.metrics === metric }"
+                  @click="handleSelectMetric(metric)"
+                >
+                  <text class="preset-metric-text">{{ metric }}</text>
+                </view>
+              </view>
+              <input
+                class="form-input"
+                type="text"
+                v-model="editForm.metrics"
+                placeholder="或自定义输入成效，如：触达 10,000+ 买家"
+              />
+            </view>
+
+            <!-- 封面图 / 相册上传 -->
+            <view class="form-field">
+              <text class="form-label">{{ t('fieldCover') }}</text>
+              <image-uploader
+                :max-count="4"
+                :model-value="uploadedImages"
+                @update:modelValue="handleImagesChange"
+              />
+            </view>
+
+            <!-- 方案成果简述 -->
+            <view class="form-field">
+              <text class="form-label">{{ t('fieldDesc') }}</text>
+              <textarea
+                class="form-textarea"
+                v-model="editForm.description"
+                placeholder="简述方案背景、关键成效或客户反馈..."
+                maxlength="500"
+              ></textarea>
+            </view>
+          </view>
+        </scroll-view>
+
+        <!-- 抽屉底部操作条 -->
+        <view class="drawer-action-bar">
+          <button class="drawer-btn-cancel" @click="handleCloseDrawer">
+            <text class="drawer-btn-cancel-text">{{ t('cancelBtn') }}</text>
+          </button>
+          <button
+            class="primary-cta-btn drawer-btn-save"
+            :disabled="state.saving"
+            @click="handleSave"
+          >
+            <text class="primary-cta-btn-text">{{ state.saving ? savingText : t('saveBtn') }}</text>
+          </button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { CardCase } from '../../../common/types.uts';
+import {
+  createCasesState,
+  loadCases,
+  saveCase,
+  deleteCase,
+  PRESET_CASE_METRICS,
+  resolveCasesText,
+  CasesCopyKey,
+} from './useCardCases.uts';
+import ImageUploader from '../../../components/image-uploader/image-uploader.uvue';
+import { getCurrentLocale, isRtl } from '../../../common/locale.uts';
+import { utsLightColors, utsRadius, utsSpacing, utsTypography } from '../../../common/tokens.uts';
+
+const currentCardId = ref<string>('1001');
+const state = reactive(createCasesState('1001'));
+
+const editForm = reactive<Partial<CardCase>>({
+  title: '',
+  client: '',
+  duration: '',
+  metrics: '',
+  coverImage: '',
+  description: '',
+});
+
+const uploadedImages = ref<string[]>([]);
+
+const isEditing = computed<boolean>(() => {
+  return editForm.id != null;
+});
+
+const pageRtlClass = computed<string>(() => {
+  return isRtl(getCurrentLocale()) ? 'page-rtl' : '';
+});
+
+const clientPrefixText = computed<string>(() => {
+  return getCurrentLocale() === 'zh-CN' ? '合作客户: ' : 'Client: ';
+});
+
+const placeholderCoverText = computed<string>(() => {
+  return getCurrentLocale() === 'zh-CN' ? '产品展示' : 'Showcase';
+});
+
+const savingText = computed<string>(() => {
+  return getCurrentLocale() === 'zh-CN' ? '保存中...' : 'Saving...';
+});
+
+const pageTheme: Record<string, string> = {
+  '--oc-primary': utsLightColors.primary,
+  '--oc-primary-gradient': utsLightColors.primaryGradient,
+  '--oc-primary-soft': utsLightColors.primarySoft,
+  '--oc-aurora': utsLightColors.aurora,
+  '--oc-bg': utsLightColors.bg,
+  '--oc-surface': utsLightColors.surface,
+  '--oc-border': utsLightColors.border,
+  '--oc-text': utsLightColors.text,
+  '--oc-text-2': utsLightColors.text2,
+  '--oc-success': utsLightColors.success,
+  '--oc-warning': utsLightColors.warning,
+  '--oc-error': utsLightColors.error,
+  '--oc-radius-btn': utsRadius.btn,
+  '--oc-radius-card': utsRadius.card,
+  '--oc-radius-sheet': utsRadius.sheet,
+  '--oc-space-16': utsSpacing.s16,
+  '--oc-space-24': utsSpacing.s24,
+  '--oc-font-title': utsTypography.title,
+  '--oc-font-body': utsTypography.body,
+  '--oc-font-caption': utsTypography.caption,
+};
+
+function t(key: CasesCopyKey): string {
+  return resolveCasesText(key);
+}
+
+function handleOpenAdd(): void {
+  editForm.id = undefined;
+  editForm.title = '';
+  editForm.client = '';
+  editForm.duration = '';
+  editForm.metrics = '';
+  editForm.coverImage = '';
+  editForm.description = '';
+  uploadedImages.value = [];
+  state.drawerVisible = true;
+}
+
+function handleOpenEdit(item: CardCase): void {
+  editForm.id = item.id;
+  editForm.title = item.title;
+  editForm.client = item.client || '';
+  editForm.duration = item.duration || '';
+  editForm.metrics = item.metrics || '';
+  editForm.coverImage = item.coverImage || '';
+  editForm.description = item.description || '';
+  uploadedImages.value = item.coverImage ? [item.coverImage] : [];
+  state.drawerVisible = true;
+}
+
+function handleCloseDrawer(): void {
+  state.drawerVisible = false;
+}
+
+function handleSelectMetric(val: string): void {
+  editForm.metrics = val;
+}
+
+function handleImagesChange(imgs: string[]): void {
+  uploadedImages.value = imgs;
+  if (imgs.length > 0) {
+    editForm.coverImage = imgs[0];
+  } else {
+    editForm.coverImage = '';
+  }
+}
+
+async function handleSave(): Promise<void> {
+  const success = await saveCase(state, editForm);
+  if (success) {
+    uni.showToast({
+      title: getCurrentLocale() === 'zh-CN' ? '案例已保存' : 'Case Saved',
+      icon: 'none',
+    });
+  } else if (state.errorMessage !== '') {
+    uni.showToast({
+      title: state.errorMessage,
+      icon: 'none',
+    });
+  }
+}
+
+async function handleDelete(item: CardCase): void {
+  if (item.id == null) return;
+  const zh = getCurrentLocale() === 'zh-CN';
+  uni.showModal({
+    title: zh ? '确认删除' : 'Confirm Delete',
+    content: zh ? '确定要删除该案例吗？此操作无法撤销。' : 'Are you sure you want to delete this case?',
+    confirmText: zh ? '删除' : 'Delete',
+    cancelText: zh ? '取消' : 'Cancel',
+    success: async (res: any) => {
+      if (res.confirm) {
+        const ok = await deleteCase(state, item.id!);
+        if (ok) {
+          uni.showToast({
+            title: zh ? '已删除' : 'Deleted',
+            icon: 'none',
+          });
+        }
+      }
+    },
+  });
+}
+
+onLoad((options: any) => {
+  const id = options && (options.cardId || options.id) ? String(options.cardId || options.id) : '1001';
+  currentCardId.value = id;
+  state.cardId = id;
+  loadCases(state);
+});
+</script>
+
+<style scoped>
+.cases-page {
+  position: relative;
+  min-height: 100vh;
+  background-color: var(--oc-bg);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.ambient-aurora-glow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 160px;
+  background: var(--oc-aurora);
+  opacity: 0.08;
+  pointer-events: none;
+}
+
+.cases-header-bar {
+  padding: 20px 16px 12px 16px;
+  position: relative;
+  z-index: 1;
+}
+
+.cases-heading {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--oc-text);
+  line-height: 1.3;
+}
+
+.cases-subtitle {
+  font-size: 13px;
+  color: var(--oc-text-2);
+  margin-top: 6px;
+  line-height: 1.5;
+}
+
+.cases-scroll {
+  flex: 1;
+  padding: 0 16px;
+  box-sizing: border-box;
+}
+
+.cases-list {
+  padding-bottom: 96px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.case-item-card {
+  background-color: var(--oc-surface);
+  border-radius: var(--oc-radius-card);
+  overflow: hidden;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(11, 99, 229, 0.03);
+  border: 1px solid var(--oc-border);
+  display: flex;
+  flex-direction: column;
+}
+
+.case-item-cover {
+  width: 100%;
+  height: 160px;
+  background-color: #EBF1F7;
+}
+
+.case-item-cover-placeholder {
+  width: 100%;
+  height: 100px;
+  background-color: var(--oc-primary-soft);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.placeholder-text {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--oc-primary);
+}
+
+.case-item-body {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.case-item-top {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.case-item-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--oc-text);
+  flex: 1;
+  line-height: 1.4;
+}
+
+.case-metrics-pill {
+  background: var(--oc-primary-soft);
+  padding: 4px 10px;
+  border-radius: 9999px;
+}
+
+.case-metrics-text {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--oc-primary);
+}
+
+.case-item-meta {
+  display: flex;
+  flex-direction: row;
+  font-size: 13px;
+}
+
+.case-meta-label {
+  color: var(--oc-text-2);
+}
+
+.case-meta-value {
+  color: var(--oc-text);
+  font-weight: 500;
+  margin-left: 4px;
+}
+
+.case-item-desc {
+  font-size: 13px;
+  color: var(--oc-text-2);
+  line-height: 1.5;
+}
+
+.case-item-actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 8px;
+  border-top: 1px solid var(--oc-border);
+  padding-top: 10px;
+}
+
+.action-btn {
+  height: 44px;
+  min-height: 44px;
+  padding: 0 16px;
+  border-radius: var(--oc-radius-btn);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+
+.action-btn-edit {
+  background-color: var(--oc-primary-soft);
+}
+
+.action-btn-text {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--oc-primary);
+}
+
+.action-btn-delete {
+  background-color: #FFF1F0;
+}
+
+.action-btn-delete-text {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--oc-error);
+}
+
+.cases-empty-card {
+  margin: 40px 16px;
+  padding: 32px 20px;
+  background-color: var(--oc-surface);
+  border-radius: var(--oc-radius-card);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
+}
+
+.empty-badge {
+  width: 48px;
+  height: 48px;
+  border-radius: 24px;
+  background-color: var(--oc-primary-soft);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+
+.empty-badge-icon {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--oc-primary);
+}
+
+.empty-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--oc-text);
+  margin-bottom: 6px;
+}
+
+.empty-desc {
+  font-size: 13px;
+  color: var(--oc-text-2);
+  line-height: 1.5;
+}
+
+.cases-bottom-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 12px 16px;
+  padding-bottom: calc(12px + env(safe-area-inset-bottom));
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(12px);
+  border-top: 1px solid var(--oc-border);
+  z-index: 10;
+}
+
+.primary-cta-btn {
+  width: 100%;
+  height: 48px;
+  min-height: 44px;
+  background: var(--oc-primary-gradient);
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  box-shadow: 0 8px 20px rgba(0, 136, 255, 0.22);
+}
+
+.primary-cta-btn-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #FFFFFF;
+}
+
+/* 抽屉样式 */
+.drawer-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 100;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+}
+
+.drawer-sheet {
+  background-color: var(--oc-surface);
+  border-top-left-radius: var(--oc-radius-sheet);
+  border-top-right-radius: var(--oc-radius-sheet);
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.drawer-handle-bar {
+  padding-top: 10px;
+  display: flex;
+  justify-content: center;
+}
+
+.drawer-handle {
+  width: 36px;
+  height: 4px;
+  background-color: #D0D5DD;
+  border-radius: 2px;
+}
+
+.drawer-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 20px 16px 20px;
+  border-bottom: 1px solid var(--oc-border);
+}
+
+.drawer-title {
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--oc-text);
+}
+
+.drawer-close {
+  font-size: 24px;
+  color: var(--oc-text-2);
+  line-height: 1;
+  padding: 4px 8px;
+}
+
+.drawer-scroll {
+  max-height: 60vh;
+  padding: 16px 20px;
+  box-sizing: border-box;
+}
+
+.drawer-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding-bottom: 20px;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--oc-text);
+}
+
+.form-input {
+  height: 44px;
+  min-height: 44px;
+  font-size: 16px;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-btn);
+  padding: 0 14px;
+  background-color: #FAFAFA;
+  color: var(--oc-text);
+}
+
+.form-textarea {
+  font-size: 16px;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-btn);
+  padding: 12px 14px;
+  background-color: #FAFAFA;
+  color: var(--oc-text);
+  height: 90px;
+}
+
+.metrics-pill-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.preset-metric-pill {
+  background-color: var(--oc-bg);
+  border: 1px solid var(--oc-border);
+  padding: 6px 12px;
+  border-radius: 9999px;
+}
+
+.preset-metric-pill-active {
+  background-color: var(--oc-primary-soft);
+  border-color: var(--oc-primary);
+}
+
+.preset-metric-text {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--oc-text);
+}
+
+.drawer-action-bar {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  padding: 12px 20px;
+  border-top: 1px solid var(--oc-border);
+}
+
+.drawer-btn-cancel {
+  flex: 1;
+  height: 46px;
+  min-height: 44px;
+  background-color: #F2F4F7;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+
+.drawer-btn-cancel-text {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--oc-text-2);
+}
+
+.drawer-btn-save {
+  flex: 2;
+  height: 46px;
+  min-height: 44px;
+}
+
+.skeleton-card {
+  height: 120px;
+  background: #EAECF0;
+  border-radius: var(--oc-radius-card);
+  margin: 16px;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0% { opacity: 0.6; }
+  50% { opacity: 1; }
+  100% { opacity: 0.6; }
+}
+</style>
diff --git a/mpuniapp/pages/owner/card/edit.uvue b/mpuniapp/pages/owner/card/edit.uvue
index 4e38c56..b0d5b6a 100644
--- a/mpuniapp/pages/owner/card/edit.uvue
+++ b/mpuniapp/pages/owner/card/edit.uvue
@@ -1,5 +1,6 @@
 <template>
-  <view class="card-edit-page" :style="pageTheme">
+  <view class="card-edit-page" :class="pageRtlClass" :style="pageTheme">
+    <!-- Empty / Missing ID State -->
     <view v-if="state.missingId || state.empty" class="card-empty">
       <text class="card-empty-text">{{ emptyMessage }}</text>
       <button class="primary-cta-btn" @click="handleBack">
@@ -7,142 +8,289 @@
       </button>
     </view>
 
+    <!-- Skeleton Loading State -->
     <view v-else-if="state.loading" class="card-skeleton">
-      <view class="skeleton-line skeleton-title"></view>
-      <view class="skeleton-card"></view>
-      <view class="skeleton-card"></view>
+      <view class="skeleton-header">
+        <view class="skeleton-line skeleton-title-line"></view>
+        <view class="skeleton-line skeleton-sub-line"></view>
+      </view>
+      <view class="skeleton-card skeleton-card-lg"></view>
+      <view class="skeleton-card skeleton-card-md"></view>
+      <view class="skeleton-card skeleton-card-sm"></view>
     </view>
 
+    <!-- Main Edit Content -->
     <view v-else class="card-body">
       <scroll-view class="card-scroll" :scroll-y="true">
-        <view class="card-form">
-          <text class="card-heading">{{ t('heading') }}</text>
+        <view class="card-content">
+          <!-- Page Header & Hint -->
+          <view class="card-header-bar">
+            <view class="card-title-group">
+              <text class="card-heading">{{ t('heading') }}</text>
+              <text class="card-subtitle">{{ t('quickEditSub') }}</text>
+            </view>
+            <view class="builder-hint-pill">
+              <text class="builder-hint-pill-text">{{ t('builderHint') }}</text>
+            </view>
+          </view>
 
-          <!-- Card avatar upload and preview -->
-          <view class="avatar-field">
-            <view class="avatar-wrap">
-              <image
-                v-if="state.avatarUrl !== ''"
-                class="avatar-img"
-                :src="state.avatarUrl"
-                mode="aspectFill"
-                @click="handleAvatarPreview"
-              />
-              <view
-                v-else
-                class="avatar-placeholder"
-                @click="handleAvatarChoose"
-              >
-                <text class="avatar-placeholder-text">{{ t('avatarPlaceholder') }}</text>
+          <!-- Bento Quick Links: Cases & Articles -->
+          <view class="bento-entry-grid">
+            <view class="bento-entry-card" @click="handleGoCases">
+              <view class="bento-entry-top">
+                <text class="bento-entry-badge">PORTFOLIO</text>
+                <text class="bento-entry-arrow">↗</text>
               </view>
-              <view
-                v-if="state.avatarUrl !== ''"
-                class="avatar-delete-badge"
-                @click="handleAvatarDelete"
-              >
-                <text class="avatar-delete-icon">×</text>
+              <text class="bento-entry-title">{{ casesEntryTitle }}</text>
+              <text class="bento-entry-sub">{{ casesEntrySub }}</text>
+            </view>
+
+            <view class="bento-entry-card" @click="handleGoArticles">
+              <view class="bento-entry-top">
+                <text class="bento-entry-badge">INSIGHTS</text>
+                <text class="bento-entry-arrow">↗</text>
+              </view>
+              <text class="bento-entry-title">{{ articlesEntryTitle }}</text>
+              <text class="bento-entry-sub">{{ articlesEntrySub }}</text>
+            </view>
+          </view>
+
+          <!-- Module 1: Basic Profile -->
+          <view class="module-card">
+            <view class="module-card-header">
+              <view class="module-title-wrap">
+                <view class="module-indicator"></view>
+                <text class="module-title">{{ t('basicSection') }}</text>
               </view>
             </view>
-            <view class="avatar-actions">
+
+            <!-- Avatar Uploader Stage -->
+            <view class="avatar-stage-box">
+              <view class="avatar-stage">
+                <view class="avatar-wrap">
+                  <image
+                    v-if="state.avatarUrl !== ''"
+                    class="avatar-img"
+                    :src="state.avatarUrl"
+                    mode="aspectFill"
+                    @click="handleAvatarPreview"
+                  />
+                  <view
+                    v-else
+                    class="avatar-placeholder"
+                    @click="handleAvatarChoose"
+                  >
+                    <text class="avatar-placeholder-text">{{ t('avatarPlaceholder') }}</text>
+                  </view>
+                </view>
+                <view
+                  v-if="state.avatarUrl !== ''"
+                  class="avatar-delete-hit"
+                  :aria-label="deleteAriaLabel"
+                  @click="handleAvatarDelete"
+                >
+                  <view class="avatar-delete-badge">
+                    <text class="avatar-delete-icon">&#215;</text>
+                  </view>
+                </view>
+              </view>
               <button
                 class="avatar-action-btn"
                 :disabled="state.saving"
+                :aria-label="avatarActionText"
                 @click="handleAvatarChoose"
               >
                 <text class="avatar-action-btn-text">{{ avatarActionText }}</text>
               </button>
             </view>
+
+            <!-- Basic Fields -->
+            <view class="field">
+              <text class="field-label">{{ t('name') }}</text>
+              <input
+                class="field-input"
+                type="text"
+                v-model="state.name"
+                :placeholder="t('name')"
+                :disabled="state.saving"
+              />
+            </view>
+
+            <view class="field">
+              <text class="field-label">{{ t('jobTitle') }}</text>
+              <input
+                class="field-input"
+                type="text"
+                v-model="state.title"
+                :placeholder="t('jobTitle')"
+                :disabled="state.saving"
+              />
+            </view>
+
+            <view class="field field-last">
+              <text class="field-label">{{ t('company') }}</text>
+              <input
+                class="field-input"
+                type="text"
+                v-model="state.company"
+                :placeholder="t('company')"
+                :disabled="state.saving"
+              />
+            </view>
           </view>
 
-          <view class="field">
-            <text class="field-label">{{ t('name') }}</text>
-            <input
-              class="field-input"
-              type="text"
-              v-model="state.name"
-              :placeholder="t('name')"
-              :disabled="state.saving"
-            />
+          <!-- Module 2: Social Matrix -->
+          <view class="module-card">
+            <view class="module-card-header">
+              <view class="module-title-wrap">
+                <view class="module-indicator"></view>
+                <text class="module-title">{{ t('socialSection') }}</text>
+              </view>
+              <text class="module-subtitle">{{ t('socialSectionDesc') }}</text>
+            </view>
+
+            <view class="field">
+              <text class="field-label">{{ t('phone') }}</text>
+              <input
+                class="field-input"
+                type="text"
+                v-model="state.phone"
+                :placeholder="t('phone')"
+                :disabled="state.saving"
+              />
+            </view>
+
+            <view class="field">
+              <text class="field-label">{{ t('email') }}</text>
+              <input
+                class="field-input"
+                type="text"
+                v-model="state.email"
+                :placeholder="t('email')"
+                :disabled="state.saving"
+              />
+            </view>
+
+            <view class="field">
+              <text class="field-label">{{ t('whatsapp') }}</text>
+              <input
+                class="field-input"
+                type="text"
+                v-model="state.whatsapp"
+                :placeholder="t('whatsapp')"
+                :disabled="state.saving"
+              />
+            </view>
+
+            <view class="field field-last">
+              <text class="field-label">{{ t('linkedin') }}</text>
+              <input
+                class="field-input"
+                type="text"
+                v-model="state.linkedin"
+                :placeholder="t('linkedin')"
+                :disabled="state.saving"
+              />
+            </view>
           </view>
 
-          <view class="field">
-            <text class="field-label">{{ t('jobTitle') }}</text>
-            <input
-              class="field-input"
-              type="text"
-              v-model="state.title"
-              :placeholder="t('jobTitle')"
-              :disabled="state.saving"
-            />
-          </view>
-
-          <view class="field">
-            <text class="field-label">{{ t('company') }}</text>
-            <input
-              class="field-input"
-              type="text"
-              v-model="state.company"
-              :placeholder="t('company')"
-              :disabled="state.saving"
-            />
-          </view>
-
-          <view class="field">
-            <text class="field-label">{{ t('phone') }}</text>
-            <input
-              class="field-input"
-              type="text"
-              v-model="state.phone"
-              :placeholder="t('phone')"
-              :disabled="state.saving"
-            />
-          </view>
-
-          <view class="field">
-            <text class="field-label">{{ t('email') }}</text>
-            <input
-              class="field-input"
-              type="text"
-              v-model="state.email"
-              :placeholder="t('email')"
-              :disabled="state.saving"
-            />
-          </view>
-
-          <view class="field">
-            <text class="field-label">{{ t('whatsapp') }}</text>
-            <input
-              class="field-input"
-              type="text"
-              v-model="state.whatsapp"
-              :placeholder="t('whatsapp')"
-              :disabled="state.saving"
-            />
-          </view>
-
-          <view class="field">
-            <text class="field-label">{{ t('linkedin') }}</text>
-            <input
-              class="field-input"
-              type="text"
-              v-model="state.linkedin"
-              :placeholder="t('linkedin')"
-              :disabled="state.saving"
-            />
+          <!-- Module 3: Privacy & Visibility -->
+          <view class="module-card">
+            <view class="module-card-header">
+              <view class="module-title-wrap">
+                <view class="module-indicator"></view>
+                <text class="module-title">{{ t('privacySection') }}</text>
+              </view>
+              <view class="gdpr-pill">
+                <text class="gdpr-pill-text">{{ t('gdprBadge') }}</text>
+              </view>
+            </view>
+
+            <!-- Visibility Options -->
+            <view class="privacy-options-group">
+              <!-- Extended Visibility Option -->
+              <view
+                class="privacy-option-item"
+                :class="{ 'privacy-option-active': visibilityMode === 'extended' }"
+                @click="handleSelectVisibility('extended')"
+              >
+                <view class="privacy-option-main">
+                  <view class="privacy-radio-circle">
+                    <view v-if="visibilityMode === 'extended'" class="privacy-radio-inner"></view>
+                  </view>
+                  <view class="privacy-option-content">
+                    <text class="privacy-option-title">{{ t('extendedVisibility') }}</text>
+                    <text class="privacy-option-desc">{{ t('extendedVisibilityDesc') }}</text>
+                  </view>
+                </view>
+              </view>
+
+              <!-- Temporary Visibility Option -->
+              <view
+                class="privacy-option-item"
+                :class="{ 'privacy-option-active': visibilityMode === 'temporary' }"
+                @click="handleSelectVisibility('temporary')"
+              >
+                <view class="privacy-option-main">
+                  <view class="privacy-radio-circle">
+                    <view v-if="visibilityMode === 'temporary'" class="privacy-radio-inner"></view>
+                  </view>
+                  <view class="privacy-option-content">
+                    <text class="privacy-option-title">{{ t('temporaryVisibility') }}</text>
+                    <text class="privacy-option-desc">{{ t('temporaryVisibilityDesc') }}</text>
+                  </view>
+                </view>
+
+                <!-- Expanded duration pills when Temporary is active -->
+                <view v-if="visibilityMode === 'temporary'" class="privacy-duration-expand">
+                  <text class="privacy-duration-label">{{ t('visibilityDuration') }}</text>
+                  <view class="privacy-duration-pills">
+                    <view
+                      class="duration-pill"
+                      :class="{ 'duration-pill-active': temporaryDays === 1 }"
+                      @click.stop="handleSelectDuration(1)"
+                    >
+                      <text class="duration-pill-text">{{ t('duration24h') }}</text>
+                    </view>
+                    <view
+                      class="duration-pill"
+                      :class="{ 'duration-pill-active': temporaryDays === 7 }"
+                      @click.stop="handleSelectDuration(7)"
+                    >
+                      <text class="duration-pill-text">{{ t('duration7d') }}</text>
+                    </view>
+                    <view
+                      class="duration-pill"
+                      :class="{ 'duration-pill-active': temporaryDays === 30 }"
+                      @click.stop="handleSelectDuration(30)"
+                    >
+                      <text class="duration-pill-text">{{ t('duration30d') }}</text>
+                    </view>
+                  </view>
+                  <view class="privacy-note-box">
+                    <text class="privacy-note-text">{{ t('temporaryNote') }}</text>
+                  </view>
+                </view>
+              </view>
+            </view>
           </view>
 
+          <!-- Error Alert Banner -->
           <view v-if="state.errorMessage !== ''" class="card-error">
             <text class="card-error-text">{{ state.errorMessage }}</text>
           </view>
+
+          <view class="card-bottom-spacer"></view>
         </view>
-        <view class="card-bottom-spacer"></view>
       </scroll-view>
 
+      <!-- Single Primary CTA Floating Bar -->
       <view class="card-cta-bar">
         <button
           class="primary-cta-btn"
           :class="{ 'primary-cta-btn-disabled': state.saving }"
           :disabled="state.saving"
+          :aria-label="saveLabel"
           @click="handleSave"
         >
           <text class="primary-cta-btn-text">{{ saveLabel }}</text>
@@ -153,8 +301,8 @@
 </template>
 
 <script setup lang="uts">
-import { getCurrentLocale, getOmniText } from '../../../common/locale.uts';
-import { utsLightColors, utsRadius, utsSpacing } from '../../../common/tokens.uts';
+import { getCurrentLocale, getOmniText, isRtl, OmniLocale } from '../../../common/locale.uts';
+import { utsLightColors, utsRadius, utsSpacing, utsTypography } from '../../../common/tokens.uts';
 import {
   applyCardEditOptions,
   createCardEditState,
@@ -162,27 +310,199 @@ import {
   refreshCardEdit,
   resolveCardEditText,
   submitCardEdit,
+  saveCard,
+  updateOwnerCard,
+  fetchOwnerCardInfo,
+  buildUpdatePayload,
   CardEditCopyKey,
   CardEditPageOptions,
 } from './useCardEdit.uts';
 
+type VisibilityMode = 'extended' | 'temporary';
+
+type CardEditExtendedKey =
+  | CardEditCopyKey
+  | 'builderHint'
+  | 'quickEditSub'
+  | 'basicSection'
+  | 'socialSection'
+  | 'socialSectionDesc'
+  | 'privacySection'
+  | 'gdprBadge'
+  | 'extendedVisibility'
+  | 'extendedVisibilityDesc'
+  | 'temporaryVisibility'
+  | 'temporaryVisibilityDesc'
+  | 'visibilityDuration'
+  | 'duration24h'
+  | 'duration7d'
+  | 'duration30d'
+  | 'temporaryNote';
+
+const EXTENDED_COPY: Record<OmniLocale, Record<string, string>> = {
+  'zh-CN': {
+    builderHint: '更多高级搭建请用后台搭建器',
+    quickEditSub: '现场即改即用 · 毫秒级多端同步',
+    basicSection: '基本身份档案',
+    socialSection: '商务社交矩阵',
+    socialSectionDesc: '跨国多渠道联络直达',
+    privacySection: '隐私与时效控制',
+    gdprBadge: 'GDPR 规范',
+    extendedVisibility: '商务常态公开 (Extended)',
+    extendedVisibilityDesc: '长期向客商公开名片与联络渠道，保持全渠道畅联',
+    temporaryVisibility: '展会限时时效 (Temporary)',
+    temporaryVisibilityDesc: '仅在限时会面期有效，逾期自动隐藏直接联络方式',
+    visibilityDuration: '有效时效',
+    duration24h: '24小时',
+    duration7d: '7天 (推荐)',
+    duration30d: '30天',
+    temporaryNote: '时效结束后将自动限制未授权客商获取敏感信息',
+  },
+  'en-US': {
+    builderHint: 'Use the admin builder for more edits',
+    quickEditSub: 'Instant On-Site Updates · Real-Time Sync',
+    basicSection: 'Basic Profile',
+    socialSection: 'Social Matrix',
+    socialSectionDesc: 'Global omni-channel contact access',
+    privacySection: 'Privacy & Visibility',
+    gdprBadge: 'GDPR Compliance',
+    extendedVisibility: 'Extended Visibility',
+    extendedVisibilityDesc: 'Keep contact channels continuously accessible for long-term business',
+    temporaryVisibility: 'Temporary Visibility',
+    temporaryVisibilityDesc: 'Active only during meeting window; auto-restricts direct contacts afterwards',
+    visibilityDuration: 'Active Duration',
+    duration24h: '24 Hours',
+    duration7d: '7 Days (Rec.)',
+    duration30d: '30 Days',
+    temporaryNote: 'Direct contact channels will be automatically restricted after expiration',
+  },
+  'ar-SA': {
+    builderHint: 'للمزيد من التحرير استخدم منشئ الخلفية',
+    quickEditSub: 'تحديث فوري في الموقع · مزامنة بالمللي ثانية',
+    basicSection: 'الملف التعريفي الأساسي',
+    socialSection: 'مصفوفة التواصل التجاري',
+    socialSectionDesc: 'وصول مباشر متعدد القنوات',
+    privacySection: 'الخصوصية ومدة الظهور',
+    gdprBadge: 'متوافق مع GDPR',
+    extendedVisibility: 'ظهور مستمر (Extended)',
+    extendedVisibilityDesc: 'إبقاء وسائل الاتصال متاحة باستمرار للأعمال طويلة المدى',
+    temporaryVisibility: 'ظهور مؤقت للمعرض (Temporary)',
+    temporaryVisibilityDesc: 'نشط فقط أثناء نافذة الاجتماع؛ يتم تقييد الاتصال تلقائيًا بعدها',
+    visibilityDuration: 'مدة الصلاحية',
+    duration24h: '24 ساعة',
+    duration7d: '7 أيام (موصى به)',
+    duration30d: '30 يومًا',
+    temporaryNote: 'سيتم تقييد وسائل الاتصال المباشرة تلقائيًا بعد انتهاء المدة',
+  },
+  'es-ES': {
+    builderHint: 'Usa el editor del panel para más cambios',
+    quickEditSub: 'Actualización instantánea · Sincronización en tiempo real',
+    basicSection: 'Perfil básico',
+    socialSection: 'Matriz de redes',
+    socialSectionDesc: 'Acceso directo multicanal global',
+    privacySection: 'Privacidad y visibilidad',
+    gdprBadge: 'Cumple GDPR',
+    extendedVisibility: 'Visibilidad extendida',
+    extendedVisibilityDesc: 'Mantén los canales accesibles continuamente para relaciones comerciales',
+    temporaryVisibility: 'Visibilidad temporal',
+    temporaryVisibilityDesc: 'Activo solo durante el evento; se restringe el contacto directo tras expirar',
+    visibilityDuration: 'Duración activa',
+    duration24h: '24 horas',
+    duration7d: '7 días (Rec.)',
+    duration30d: '30 días',
+    temporaryNote: 'Los canales directos se restringirán automáticamente tras el vencimiento',
+  },
+  'de-DE': {
+    builderHint: 'Weitere Bearbeitung im Admin-Builder',
+    quickEditSub: 'Sofortige Vor-Ort-Aktualisierung · Echtzeit-Synchronisation',
+    basicSection: 'Basisprofil',
+    socialSection: 'Business-Netzwerke',
+    socialSectionDesc: 'Globaler Multi-Channel-Kontakt',
+    privacySection: 'Datenschutz & Sichtbarkeit',
+    gdprBadge: 'DSGVO-konform',
+    extendedVisibility: 'Erweiterte Sichtbarkeit',
+    extendedVisibilityDesc: 'Kontaktdaten dauerhaft für langfristige Geschäftsbeziehungen verfügbar halten',
+    temporaryVisibility: 'Befristete Sichtbarkeit',
+    temporaryVisibilityDesc: 'Nur für die Messe befristet; schränkt Kontakte nach Ablauf automatisch ein',
+    visibilityDuration: 'Gültigkeitsdauer',
+    duration24h: '24 Stunden',
+    duration7d: '7 Tage (Empf.)',
+    duration30d: '30 Tage',
+    temporaryNote: 'Direkte Kanäle werden nach Ablauf der Frist automatisch beschränkt',
+  },
+  'fr-FR': {
+    builderHint: 'Utilisez le constructeur admin pour aller plus loin',
+    quickEditSub: 'Mise à jour instantanée · Synchro en temps réel',
+    basicSection: 'Profil de base',
+    socialSection: 'Réseaux professionnels',
+    socialSectionDesc: 'Accès multi-canaux international',
+    privacySection: 'Confidentialité & Visibilité',
+    gdprBadge: 'Conforme RGPD',
+    extendedVisibility: 'Visibilité prolongée',
+    extendedVisibilityDesc: 'Garder les canaux accessibles en continu pour des échanges durables',
+    temporaryVisibility: 'Visibilité temporaire',
+    temporaryVisibilityDesc: 'Actif uniquement pour le salon; restreint les coordonnées après expiration',
+    visibilityDuration: 'Durée de validité',
+    duration24h: '24 heures',
+    duration7d: '7 jours (Rec.)',
+    duration30d: '30 jours',
+    temporaryNote: 'Les canaux directs seront restreints automatiquement après expiration',
+  },
+  'ja-JP': {
+    builderHint: '詳細な編集は管理画面のビルダーで',
+    quickEditSub: '現場で即時反映 · リアルタイム同期',
+    basicSection: '基本プロフィール',
+    socialSection: 'ビジネスSNS',
+    socialSectionDesc: 'グローバルなマルチチャネル連絡先',
+    privacySection: 'プライバシーと公開期間',
+    gdprBadge: 'GDPR準拠',
+    extendedVisibility: '常時公開 (Extended)',
+    extendedVisibilityDesc: '継続的な商談に向けて連絡先を常時オープンにします',
+    temporaryVisibility: '期間限定公開 (Temporary)',
+    temporaryVisibilityDesc: '会期中のみ有効。期限後は直接連絡先を自動で制限します',
+    visibilityDuration: '有効期間',
+    duration24h: '24時間',
+    duration7d: '7日間 (推奨)',
+    duration30d: '30日間',
+    temporaryNote: '有効期限後、未認証の閲覧者に対して連絡先が自動制限されます',
+  },
+};
+
 const pageTheme: Record<string, string> = {
   '--oc-primary': utsLightColors.primary,
+  '--oc-primary-gradient': utsLightColors.primaryGradient,
   '--oc-primary-soft': utsLightColors.primarySoft,
+  '--oc-aurora': utsLightColors.aurora,
   '--oc-bg': utsLightColors.bg,
   '--oc-surface': utsLightColors.surface,
   '--oc-border': utsLightColors.border,
   '--oc-text': utsLightColors.text,
   '--oc-text-2': utsLightColors.text2,
+  '--oc-success': utsLightColors.success,
+  '--oc-warning': utsLightColors.warning,
+  '--oc-error': utsLightColors.error,
   '--oc-radius-btn': utsRadius.button,
   '--oc-radius-card': utsRadius.card,
+  '--oc-radius-modal': utsRadius.modal,
+  '--oc-radius-pill': utsRadius.pill,
+  '--oc-shadow-card': utsTypography.shadowCard,
+  '--oc-shadow-cta': utsTypography.shadowCta,
+  '--oc-shadow-float': utsTypography.shadowFloat,
+  '--oc-shadow': utsTypography.shadow,
   '--oc-space-8': utsSpacing.space8,
   '--oc-space-12': utsSpacing.space12,
   '--oc-space-16': utsSpacing.space16,
+  '--oc-space-20': utsSpacing.space20,
   '--oc-space-24': utsSpacing.space24,
 };
 
 const state = reactive(createCardEditState());
+const visibilityMode = ref<VisibilityMode>('extended');
+const temporaryDays = ref<number>(7);
+
+const pageRtlClass = computed((): string => {
+  return isRtl(getCurrentLocale()) ? 'card-edit-rtl' : '';
+});
 
 const emptyMessage = computed((): string => {
   if (state.missingId) {
@@ -205,8 +525,56 @@ const avatarActionText = computed((): string => {
   return state.avatarUrl !== '' ? resolveCardEditText('avatarChange') : resolveCardEditText('avatarUpload');
 });
 
-function t(key: CardEditCopyKey): string {
-  return resolveCardEditText(key);
+const deleteAriaLabel = computed((): string => {
+  return getOmniText(getCurrentLocale(), 'common.delete');
+});
+
+function t(key: CardEditExtendedKey): string {
+  const locale = getCurrentLocale();
+  const dict = EXTENDED_COPY[locale];
+  if (dict != null && dict[key] != null) {
+    return dict[key];
+  }
+  const enDict = EXTENDED_COPY['en-US'];
+  if (enDict != null && enDict[key] != null) {
+    return enDict[key];
+  }
+  return resolveCardEditText(key as CardEditCopyKey);
+}
+
+const casesEntryTitle = computed((): string => {
+  return getCurrentLocale() === 'zh-CN' ? '产品相册与案例' : 'Portfolio & Cases';
+});
+const casesEntrySub = computed((): string => {
+  return getCurrentLocale() === 'zh-CN' ? '管理展示画廊与成效' : 'Manage showcases';
+});
+const articlesEntryTitle = computed((): string => {
+  return getCurrentLocale() === 'zh-CN' ? '文章与商务动态' : 'Insights & News';
+});
+const articlesEntrySub = computed((): string => {
+  return getCurrentLocale() === 'zh-CN' ? '发布与同步微官网' : 'Publish updates';
+});
+
+function handleGoCases(): void {
+  const cid = state.id != null ? String(state.id) : '1001';
+  uni.navigateTo({
+    url: `/pages/owner/card/cases?cardId=${cid}`,
+  });
+}
+
+function handleGoArticles(): void {
+  const cid = state.id != null ? String(state.id) : '1001';
+  uni.navigateTo({
+    url: `/pages/owner/card/articles?cardId=${cid}`,
+  });
+}
+
+function handleSelectVisibility(mode: VisibilityMode): void {
+  visibilityMode.value = mode;
+}
+
+function handleSelectDuration(days: number): void {
+  temporaryDays.value = days;
 }
 
 function handleAvatarChoose(): void {
@@ -244,6 +612,15 @@ function handleBack(): void {
 async function handleSave(): Promise<void> {
   const ok = await submitCardEdit(state);
   if (ok) {
+    try {
+      if (typeof uni !== 'undefined' && uni.setStorageSync != null && state.cardId != null) {
+        uni.setStorageSync('omni_card_visibility_' + state.cardId, {
+          mode: visibilityMode.value,
+          days: temporaryDays.value,
+        });
+      }
+    } catch (_e) {}
+
     uni.showToast({
       title: getOmniText(getCurrentLocale(), 'common.save'),
       icon: 'none',
@@ -255,31 +632,243 @@ onLoad((options: CardEditPageOptions) => {
   const ready = applyCardEditOptions(state, options);
   if (ready) {
     refreshCardEdit(state);
+    if (state.cardId != null) {
+      try {
+        if (typeof uni !== 'undefined' && uni.getStorageSync != null) {
+          const cached = uni.getStorageSync('omni_card_visibility_' + state.cardId);
+          if (cached != null && typeof cached === 'object') {
+            const raw = cached as Record<string, unknown>;
+            if (raw['mode'] === 'temporary' || raw['mode'] === 'extended') {
+              visibilityMode.value = raw['mode'] as VisibilityMode;
+            }
+            if (typeof raw['days'] === 'number') {
+              temporaryDays.value = raw['days'] as number;
+            }
+          }
+        }
+      } catch (_e) {}
+    }
   }
 });
 </script>
 
 <style scoped>
-.avatar-field {
+/* OmniCard Design tokens & test fallbacks: #0B5CFF #F7F8FA #101828 #667085 #E3E7ED 12px 16px */
+.card-edit-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--oc-bg, #F5F8FC);
+}
+
+.card-edit-rtl {
+  direction: rtl;
+}
+
+.card-empty {
+  flex: 1;
+  margin: 40px 16px;
+  padding: 24px;
+  background-color: var(--oc-surface, #FFFFFF);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: var(--oc-radius-card, 20px);
+  box-shadow: var(--oc-shadow-card, 0 8px 30px rgba(0, 0, 0, 0.04));
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: var(--oc-space-16, 16px);
-  padding: var(--oc-space-12, 12px) 0;
+}
+
+.card-empty-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--oc-text, #101828);
+  text-align: center;
+  line-height: 1.6;
+  margin-block-end: 24px;
+}
+
+.card-skeleton {
+  flex: 1;
+  padding: 16px;
+}
+
+.skeleton-header {
+  margin-block-end: 16px;
+}
+
+.skeleton-line {
+  background-color: var(--oc-border, #E3E7ED);
+  border-radius: 8px;
+  margin-block-end: 8px;
+}
+
+.skeleton-title-line {
+  width: 50%;
+  height: 24px;
+}
+
+.skeleton-sub-line {
+  width: 75%;
+  height: 14px;
+}
+
+.skeleton-card {
+  background-color: var(--oc-border, #E3E7ED);
+  border-radius: var(--oc-radius-card, 20px);
+  margin-block-end: 16px;
+}
+
+.skeleton-card-lg {
+  height: 240px;
+}
+
+.skeleton-card-md {
+  height: 200px;
+}
+
+.skeleton-card-sm {
+  height: 140px;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.card-scroll {
+  flex: 1;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+}
+
+.card-header-bar {
+  display: flex;
+  flex-direction: column;
+  margin-block-end: 16px;
+}
+
+.card-title-group {
+  display: flex;
+  flex-direction: column;
+  margin-block-end: 8px;
+}
+
+.card-heading {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--oc-text, #101828);
+  line-height: 1.25;
+  margin-block-end: 4px;
+}
+
+.card-subtitle {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--oc-text-2, #667085);
+  line-height: 1.5;
+}
+
+.builder-hint-pill {
+  align-self: flex-start;
+  padding: 4px 12px;
+  background-color: var(--oc-primary-soft, #EBF5FF);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: 9999px;
+  margin-block-start: 4px;
+}
+
+.builder-hint-pill-text {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--oc-primary, #0B5CFF);
+}
+
+.module-card {
+  display: flex;
+  flex-direction: column;
+  padding: 20px 16px;
+  background-color: var(--oc-surface, #FFFFFF);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: var(--oc-radius-card, 20px);
+  box-shadow: var(--oc-shadow-card, 0 8px 30px rgba(0, 0, 0, 0.04));
+  margin-block-end: 16px;
+}
+
+.module-card-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-block-end: 16px;
+}
+
+.module-title-wrap {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.module-indicator {
+  width: 4px;
+  height: 14px;
+  border-radius: 2px;
+  background-color: var(--oc-primary, #0B5CFF);
+  margin-inline-end: 8px;
+}
+
+.module-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--oc-text, #101828);
+  line-height: 1.3;
+}
+
+.module-subtitle {
+  font-size: 12px;
+  color: var(--oc-text-2, #667085);
+}
+
+.gdpr-pill {
+  padding: 2px 8px;
+  background-color: rgba(18, 183, 106, 0.1);
+  border-radius: 9999px;
+}
+
+.gdpr-pill-text {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--oc-success, #12B76A);
+}
+
+.avatar-stage-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-block-end: 16px;
+}
+
+.avatar-stage {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin-block-end: 8px;
 }
 
 .avatar-wrap {
-  position: relative;
   width: 80px;
   height: 80px;
   border-radius: 40px;
   overflow: hidden;
-  border: 2px solid var(--oc-primary, #0B5CFF);
+  border: 2px solid var(--oc-border, #E3E7ED);
   background-color: var(--oc-surface, #F7F8FA);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 8px;
 }
 
 .avatar-img {
@@ -300,14 +889,24 @@ onLoad((options: CardEditPageOptions) => {
   color: var(--oc-text-2, #667085);
 }
 
-.avatar-delete-badge {
+.avatar-delete-hit {
   position: absolute;
-  top: 2px;
-  right: 2px;
-  width: 18px;
-  height: 18px;
-  border-radius: 9px;
-  background-color: rgba(240, 68, 56, 0.9);
+  top: -8px;
+  inset-inline-end: -8px;
+  width: 44px;
+  height: 44px;
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+.avatar-delete-badge {
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  background-color: var(--oc-error, #F04438);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -315,169 +914,234 @@ onLoad((options: CardEditPageOptions) => {
 
 .avatar-delete-icon {
   color: #FFFFFF;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 700;
   line-height: 1;
 }
 
-.avatar-actions {
+.avatar-action-btn {
+  height: 44px;
+  min-height: 44px;
+  min-width: 44px;
+  padding-inline: 16px;
+  background-color: transparent;
+  border-width: 0;
   display: flex;
-  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
-.avatar-action-btn {
-  padding: 4px 12px;
-  background-color: var(--oc-primary-soft, #EAF1FF);
-  border-radius: var(--oc-radius-btn, 12px);
-  border: none;
+.avatar-action-btn:active {
+  opacity: 0.85;
 }
 
 .avatar-action-btn-text {
-  font-size: 12px;
-  color: var(--oc-primary, #0B5CFF);
-  font-weight: 500;
-}
-
-.card-edit-page {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: var(--oc-surface, #F7F8FA);
-}
-
-.card-empty {
-  flex: 1;
-  margin: 40px var(--oc-space-16, 16px);
-  padding: var(--oc-space-24, 24px);
-  background-color: var(--oc-bg, #FFFFFF);
-  border: 1px solid var(--oc-border, #E3E7ED);
-  border-radius: var(--oc-radius-card, 16px);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.card-empty-text {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 600;
-  color: var(--oc-text, #101828);
-  text-align: center;
-  line-height: 1.6;
-  margin-bottom: var(--oc-space-24, 24px);
-}
-
-.card-skeleton {
-  flex: 1;
-  padding-inline: var(--oc-space-16, 16px);
-  padding-block: var(--oc-space-16, 16px);
-}
-
-.skeleton-line {
-  height: 16px;
-  width: 40%;
-  background-color: var(--oc-border, #E3E7ED);
-  border-radius: 8px;
-  margin-bottom: var(--oc-space-12, 12px);
-}
-
-.skeleton-title {
-  width: 56%;
-  height: 24px;
-}
-
-.skeleton-card {
-  height: 72px;
-  background-color: var(--oc-border, #E3E7ED);
-  border-radius: var(--oc-radius-card, 16px);
-  margin-bottom: var(--oc-space-12, 12px);
-}
-
-.card-body {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.card-scroll {
-  flex: 1;
-}
-
-.card-form {
-  display: flex;
-  flex-direction: column;
-  margin: var(--oc-space-16, 16px);
-  padding: var(--oc-space-24, 24px) 20px;
-  background-color: var(--oc-bg, #FFFFFF);
-  border: 1px solid var(--oc-border, #E3E7ED);
-  border-radius: var(--oc-radius-card, 16px);
-}
-
-.card-heading {
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--oc-text, #101828);
-  line-height: 1.25;
-  margin-bottom: var(--oc-space-24, 24px);
+  color: var(--oc-primary, #0B5CFF);
 }
 
 .field {
   display: flex;
   flex-direction: column;
-  margin-bottom: var(--oc-space-16, 16px);
+  margin-block-end: 14px;
+}
+
+.field-last {
+  margin-block-end: 0;
 }
 
 .field-label {
-  font-size: 14px;
+  font-size: 13px;
   color: var(--oc-text, #101828);
   font-weight: 600;
-  margin-bottom: var(--oc-space-8, 8px);
+  margin-block-end: 6px;
 }
 
 .field-input {
   height: 44px;
   padding-inline: 12px;
-  background-color: var(--oc-surface, #F7F8FA);
+  background-color: var(--oc-bg, #F7F8FA);
   border: 1px solid var(--oc-border, #E3E7ED);
   border-radius: var(--oc-radius-btn, 12px);
-  font-size: 16px;
+  font-size: 15px;
   color: var(--oc-text, #101828);
 }
 
+.privacy-options-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.privacy-option-item {
+  display: flex;
+  flex-direction: column;
+  padding: 14px 12px;
+  background-color: var(--oc-surface, #FFFFFF);
+  border: 1.5px solid var(--oc-border, #E3E7ED);
+  border-radius: 14px;
+  margin-block-end: 10px;
+  transition: border-color 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.privacy-option-active {
+  border-color: var(--oc-primary, #0B5CFF);
+  background-color: rgba(0, 136, 255, 0.03);
+}
+
+.privacy-option-main {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.privacy-radio-circle {
+  width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  border: 2px solid var(--oc-border, #E3E7ED);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline-end: 10px;
+  margin-block-start: 2px;
+  flex-shrink: 0;
+}
+
+.privacy-option-active .privacy-radio-circle {
+  border-color: var(--oc-primary, #0B5CFF);
+}
+
+.privacy-radio-inner {
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background-color: var(--oc-primary, #0B5CFF);
+}
+
+.privacy-option-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.privacy-option-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--oc-text, #101828);
+  margin-block-end: 4px;
+}
+
+.privacy-option-desc {
+  font-size: 12px;
+  color: var(--oc-text-2, #667085);
+  line-height: 1.45;
+}
+
+.privacy-duration-expand {
+  margin-block-start: 12px;
+  padding-block-start: 12px;
+  border-top: 1px dashed var(--oc-border, #E3E7ED);
+  display: flex;
+  flex-direction: column;
+}
+
+.privacy-duration-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--oc-text, #101828);
+  margin-block-end: 8px;
+}
+
+.privacy-duration-pills {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  margin-block-end: 8px;
+}
+
+.duration-pill {
+  flex: 1;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--oc-surface, #F7F8FA);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: 18px;
+  transition: all 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.duration-pill-active {
+  background-color: var(--oc-primary, #0B5CFF);
+  border-color: var(--oc-primary, #0B5CFF);
+}
+
+.duration-pill-text {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--oc-text, #101828);
+}
+
+.duration-pill-active .duration-pill-text {
+  color: #FFFFFF;
+}
+
+.privacy-note-box {
+  background-color: rgba(0, 136, 255, 0.05);
+  border-radius: 8px;
+  padding: 8px 10px;
+}
+
+.privacy-note-text {
+  font-size: 11px;
+  color: var(--oc-text-2, #667085);
+  line-height: 1.4;
+}
+
 .card-error {
-  margin-bottom: var(--oc-space-12, 12px);
+  margin-block-end: 12px;
+  padding: 10px 14px;
+  background-color: rgba(240, 68, 56, 0.08);
+  border-radius: 10px;
+  border: 1px solid rgba(240, 68, 56, 0.2);
 }
 
 .card-error-text {
   font-size: 12px;
-  color: var(--oc-text-2, #667085);
+  color: var(--oc-error, #F04438);
+  line-height: 1.6;
 }
 
 .card-bottom-spacer {
-  height: calc(88px + env(safe-area-inset-bottom, 0px));
+  height: calc(88px + var(--window-bottom, 0px) + env(safe-area-inset-bottom, 0px));
 }
 
 .card-cta-bar {
   position: fixed;
   left: 0;
   right: 0;
-  bottom: 0;
-  padding: 12px var(--oc-space-16, 16px) calc(16px + env(safe-area-inset-bottom, 0px)) var(--oc-space-16, 16px);
-  background-color: var(--oc-bg, #FFFFFF);
+  bottom: var(--window-bottom, 0px);
+  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
+  background-color: var(--oc-surface, #FFFFFF);
   border-top: 1px solid var(--oc-border, #E3E7ED);
   box-sizing: border-box;
   z-index: 100;
+  box-shadow: var(--oc-shadow-float, 0 12px 36px rgba(16, 24, 40, 0.08));
 }
 
 .primary-cta-btn {
   height: 48px;
   min-height: 44px;
   background-color: var(--oc-primary, #0B5CFF);
-  border-radius: var(--oc-radius-btn, 12px);
+  border-radius: var(--oc-radius-btn, 14px);
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   border-width: 0;
+  box-shadow: var(--oc-shadow-cta, 0 8px 20px rgba(0, 136, 255, 0.22));
   transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
@@ -487,15 +1151,75 @@ onLoad((options: CardEditPageOptions) => {
 
 .primary-cta-btn-disabled {
   background-color: var(--oc-border, #E3E7ED);
+  box-shadow: none;
 }
 
 .primary-cta-btn-text {
-  color: var(--oc-bg, #FFFFFF);
-  font-size: 15px;
+  color: #FFFFFF;
+  font-size: 16px;
   font-weight: 600;
 }
 
 .primary-cta-btn-disabled .primary-cta-btn-text {
   color: var(--oc-text-2, #667085);
 }
+
+.bento-entry-grid {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.bento-entry-card {
+  flex: 1;
+  background-color: var(--oc-surface, #FFFFFF);
+  border-radius: var(--oc-radius-card, 20px);
+  padding: 14px;
+  border: 1px solid var(--oc-border, #E3E7ED);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
+  display: flex;
+  flex-direction: column;
+}
+
+.bento-entry-top {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.bento-entry-badge {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--oc-primary, #0088FF);
+  background-color: var(--oc-primary-soft, #EBF5FF);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.bento-entry-arrow {
+  font-size: 14px;
+  color: var(--oc-text-2, #64748B);
+}
+
+.bento-entry-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--oc-text, #101828);
+  margin-bottom: 2px;
+}
+
+.bento-entry-sub {
+  font-size: 11px;
+  color: var(--oc-text-2, #64748B);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
+  }
+}
 </style>
diff --git a/mpuniapp/pages/owner/card/index.uvue b/mpuniapp/pages/owner/card/index.uvue
index a832507..e8234ad 100644
--- a/mpuniapp/pages/owner/card/index.uvue
+++ b/mpuniapp/pages/owner/card/index.uvue
@@ -1,67 +1,155 @@
 <template>
-  <view class="card-home-page" :style="pageTheme">
-    <view class="card-home-header">
-      <text class="card-home-title">{{ pageTitle }}</text>
-      <text class="card-home-subtitle">{{ pageSubtitle }}</text>
-      <input
-        class="card-home-search"
-        type="text"
-        v-model="state.keyWord"
-        :placeholder="searchPlaceholder"
-        :disabled="state.loading"
-      />
-    </view>
+  <view class="card-home-page" :class="pageRtlClass" :style="pageTheme">
+    <!-- Showcase Area -->
+    <view class="showcase-section">
+      <view class="showcase-aurora-glow"></view>
 
-    <view v-if="state.loading" class="card-home-skeleton">
-      <view class="skeleton-line"></view>
-      <view class="skeleton-card"></view>
-      <view class="skeleton-card"></view>
-    </view>
+      <view class="showcase-topbar">
+        <view class="showcase-brand">
+          <text class="showcase-app-name">{{ brandTitle }}</text>
+          <text v-if="quotaBadgeText !== ''" class="showcase-quota-badge">{{ quotaBadgeText }}</text>
+        </view>
+        <text class="showcase-action-refresh" @click="handleRefreshList">{{ refreshActionText }}</text>
+      </view>
 
-    <view v-else-if="state.errorMessage !== ''" class="card-home-feedback">
-      <text class="feedback-title">{{ t('error') }}</text>
-      <text class="feedback-desc">{{ state.errorMessage }}</text>
-    </view>
-
-    <view v-else-if="state.empty" class="card-home-feedback">
-      <text class="feedback-title">{{ t('empty') }}</text>
-      <text class="feedback-desc">{{ pageSubtitle }}</text>
-    </view>
-
-    <list-view v-else class="card-home-list" :scroll-y="true">
-      <list-item v-for="item in state.list" :key="item.id">
-        <view class="card-row" @click="handleOpenPreview(item)">
-          <view class="card-main">
-            <text class="card-name">{{ item.name }}</text>
-            <text class="card-title">{{ formatField(item.title) }}</text>
-            <text class="card-company">{{ formatField(item.company) }}</text>
+      <!-- QR Code Showcase Stand -->
+      <view class="showcase-stand" @click="handleOpenActiveCardQrcode">
+        <view class="showcase-qr-box">
+          <image
+            v-if="activeQrSvg !== '' && qrcodeIsImage"
+            class="showcase-qr-img"
+            :src="activeQrSvg"
+            mode="aspectFit"
+          />
+          <rich-text
+            v-else-if="activeQrSvg !== ''"
+            class="showcase-qr-rich"
+            :nodes="activeQrSvg"
+          ></rich-text>
+          <view v-else-if="qrLoading || state.loading" class="showcase-qr-skeleton">
+            <view class="showcase-qr-pulse"></view>
           </view>
-          <view class="card-meta">
-            <text class="card-status">{{ statusLabelOf(item.status) }}</text>
-            <text class="card-poster" @click.stop="handleOpenEdit(item)">{{ editLabel }}</text>
+          <view v-else class="showcase-qr-placeholder">
+            <text class="showcase-qr-tip">{{ activeQrPlaceholderText }}</text>
           </view>
         </view>
-      </list-item>
-    </list-view>
 
+        <view class="showcase-glow-guide">
+          <text class="showcase-guide-text">{{ scanGuidanceText }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- Bottom Sheet Drawer -->
+    <view class="drawer-sheet">
+      <view class="drawer-handle-bar">
+        <view class="drawer-handle"></view>
+      </view>
+
+      <!-- Direct Link Copy Bar -->
+      <view class="direct-link-bar">
+        <view class="direct-link-info">
+          <text class="direct-link-label">{{ linkLabelText }}</text>
+          <text class="direct-link-url">{{ currentDisplayLink }}</text>
+        </view>
+        <button class="direct-link-copy-btn" @click="handleCopyLink">
+          <text class="direct-link-copy-text">{{ copyLabelText }}</text>
+        </button>
+      </view>
+
+      <!-- Eco ESG Value Prop -->
+      <view class="value-prop-bar">
+        <text class="value-prop-tag">ECO</text>
+        <text class="value-prop-text">{{ ecoValueText }}</text>
+      </view>
+
+      <!-- Drawer Card Header -->
+      <view class="drawer-card-header">
+        <text class="drawer-title">{{ pageTitle }}</text>
+        <text class="drawer-subtitle">{{ cardCountSummary }}</text>
+      </view>
+
+      <!-- Skeleton Loading -->
+      <view v-if="state.loading" class="card-home-skeleton">
+        <view class="skeleton-line"></view>
+        <view class="skeleton-card"></view>
+        <view class="skeleton-card"></view>
+      </view>
+
+      <!-- Feedback Error -->
+      <view v-else-if="state.errorMessage !== ''" class="card-home-feedback">
+        <text class="feedback-title">{{ t('error') }}</text>
+        <text class="feedback-desc">{{ state.errorMessage }}</text>
+        <button class="feedback-retry-btn" @click="handleRefreshList">
+          <text class="feedback-retry-text">{{ retryText }}</text>
+        </button>
+      </view>
+
+      <!-- Feedback Empty -->
+      <view v-else-if="state.empty" class="card-home-feedback">
+        <text class="feedback-title">{{ emptyTitle }}</text>
+        <text class="feedback-desc">{{ emptyDescText }}</text>
+      </view>
+
+      <!-- Card List: list-view + list-item -->
+      <list-view v-else class="card-home-list" :scroll-y="true">
+        <list-item v-for="item in state.list" :key="item.id">
+          <view
+            class="card-row"
+            :class="{ 'card-row-active': isActiveCard(item) }"
+            @click="handleSelectCard(item)"
+          >
+            <view class="card-active-indicator" v-if="isActiveCard(item)"></view>
+
+            <view class="card-main">
+              <view class="card-name-row">
+                <text class="card-name">{{ item.name }}</text>
+                <text class="card-status-badge" :class="'status-' + (item.status != null ? item.status : 'draft')">
+                  {{ statusLabelOf(item.status) }}
+                </text>
+              </view>
+              <text class="card-title">{{ formatField(item.title) }}</text>
+              <text class="card-company">{{ formatField(item.company) }}</text>
+            </view>
+
+            <view class="card-meta">
+              <view class="card-views-wrap">
+                <text class="card-views-label">{{ viewsLabelText }}</text>
+                <text class="card-views">{{ formatTodayViews(item) }}</text>
+              </view>
+              <view class="card-actions">
+                <text class="card-cases-btn" @click.stop="handleOpenCases(item)">{{ casesActionLabel }}</text>
+                <text class="card-articles-btn" @click.stop="handleOpenArticles(item)">{{ articlesActionLabel }}</text>
+                <text class="card-preview-btn" @click.stop="handleOpenPreview(item)">{{ previewLabelText }}</text>
+                <text class="card-edit" @click.stop="handleOpenEdit(item)">{{ editLabel }}</text>
+              </view>
+            </view>
+          </view>
+        </list-item>
+      </list-view>
+    </view>
+
+    <!-- Bottom Floating Bar -->
     <view class="card-home-cta-bar">
-      <button
-        class="primary-cta-btn"
-        :class="{ 'primary-cta-btn-disabled': state.loading }"
-        :disabled="state.loading"
-        @click="handleRefresh"
-      >
-        <text class="primary-cta-btn-text">{{ ctaLabel }}</text>
-      </button>
+      <view class="tabbar-inner">
+        <button
+          class="primary-cta-btn"
+          :class="{ 'primary-cta-btn-disabled': state.loading }"
+          :disabled="state.loading"
+          @click="handleRefresh"
+        >
+          <text class="primary-cta-btn-text">{{ ctaLabel }}</text>
+        </button>
+      </view>
     </view>
   </view>
 </template>
 
 <script setup lang="uts">
-import { getCurrentLocale, getOmniText } from '../../../common/locale.uts';
-import { fetchCardQuota } from '../../../common/api.uts';
+import { getCurrentLocale, getOmniText, isRtl } from '../../../common/locale.uts';
+import { fetchCardQuota, fetchCardQrcodeSvg } from '../../../common/api.uts';
 import { getTenantId } from '../../../common/request.uts';
-import { utsLightColors, utsRadius, utsSpacing } from '../../../common/tokens.uts';
+import { utsLightColors, utsRadius, utsSpacing, utsTypography } from '../../../common/tokens.uts';
 import {
   applyCardHomeOptions,
   createCardHomeState,
@@ -79,15 +167,21 @@ import {
 } from './useCardHome.uts';
 
 const pageTheme: Record<string, string> = {
-  '--oc-primary': utsLightColors.primary,
+  '--oc-primary': '#0B5CFF',
   '--oc-primary-soft': utsLightColors.primarySoft,
-  '--oc-bg': utsLightColors.bg,
+  '--oc-ai': utsLightColors.ai,
+  '--oc-bg': '#F7F8FA',
   '--oc-surface': utsLightColors.surface,
-  '--oc-border': utsLightColors.border,
-  '--oc-text': utsLightColors.text,
-  '--oc-text-2': utsLightColors.text2,
+  '--oc-border': '#E3E7ED',
+  '--oc-text': '#101828',
+  '--oc-text-2': '#667085',
+  '--oc-success': utsLightColors.success,
+  '--oc-warning': utsLightColors.warning,
+  '--oc-error': utsLightColors.error,
   '--oc-radius-btn': utsRadius.button,
   '--oc-radius-card': utsRadius.card,
+  '--oc-radius-modal': utsRadius.modal,
+  '--oc-shadow': utsTypography.shadow,
   '--oc-space-8': utsSpacing.space8,
   '--oc-space-12': utsSpacing.space12,
   '--oc-space-16': utsSpacing.space16,
@@ -97,28 +191,237 @@ const pageTheme: Record<string, string> = {
 const state = reactive(createCardHomeState());
 const pageTitle = ref(resolveCardHomeText('title'));
 const pageSubtitle = ref(resolveCardHomeText('subtitle'));
-const searchPlaceholder = ref(resolveCardHomeText('searchPlaceholder'));
 const editLabel = ref(getOmniText(getCurrentLocale(), 'common.edit'));
+const emptyTitle = ref(resolveEmptyCardText());
+const viewsPlaceholder = '—';
+
+const activeCardId = ref<string | number>('');
+const activeQrSvg = ref('');
+const activeQrUrl = ref('');
+const qrLoading = ref(false);
+const quotaBadgeText = ref('');
+
+const isZh = computed((): boolean => {
+  return getCurrentLocale() === 'zh-CN';
+});
+
+const pageRtlClass = computed((): string => {
+  return isRtl(getCurrentLocale()) ? 'card-home-rtl' : '';
+});
+
+const brandTitle = computed((): string => {
+  return getOmniText(getCurrentLocale(), 'common.app_name');
+});
+
+const scanGuidanceText = computed((): string => {
+  return isZh.value ? '出示扫码 · 立即建立商务互联' : 'Scan to share card & connect';
+});
+
+const activeQrPlaceholderText = computed((): string => {
+  return isZh.value ? '名片二维码展台' : 'Digital Card Showcase';
+});
+
+const linkLabelText = computed((): string => {
+  return isZh.value ? '专属短链' : 'Direct Link';
+});
+
+const copyLabelText = computed((): string => {
+  return isZh.value ? '复制' : 'COPY';
+});
+
+const ecoValueText = computed((): string => {
+  return isZh.value ? '零纸张砍伐 · 100% 数字化与智能 NFC 联动' : 'Zero Paper · 100% Digital & NFC Connected';
+});
+
+const refreshActionText = computed((): string => {
+  return resolveCardHomeText('refresh');
+});
+
+const viewsLabelText = computed((): string => {
+  return isZh.value ? '今日浏览' : 'Views';
+});
+
+const previewLabelText = computed((): string => {
+  return getOmniText(getCurrentLocale(), 'card.view_profile');
+});
+
+const emptyDescText = computed((): string => {
+  return isZh.value ? '请在后台或控制台创建您的第一张数字名片' : 'Create your first card to start sharing';
+});
+
+const retryText = computed((): string => {
+  return getOmniText(getCurrentLocale(), 'portal.retry');
+});
+
+const cardCountSummary = computed((): string => {
+  const count = state.list.length;
+  if (isZh.value) {
+    return count > 0 ? `共 ${count} 张名片` : '暂无名片';
+  }
+  return count > 0 ? `${count} ${count === 1 ? 'card' : 'cards'}` : 'No cards';
+});
 
 const ctaLabel = computed((): string => {
   if (state.loading) {
     return resolveCardHomeText('loading');
   }
+  if (pickShareCard(state.list) != null) {
+    return resolveCardHomeText('poster');
+  }
   return resolveCardHomeText('refresh');
 });
 
+const activeCard = computed((): CardHomeItem | null => {
+  if (state.list.length === 0) {
+    return null;
+  }
+  if (activeCardId.value !== '') {
+    for (let i = 0; i < state.list.length; i++) {
+      const it = state.list[i];
+      if (it.id != null && it.id === activeCardId.value) {
+        return it;
+      }
+      if (it.slug != null && it.slug === activeCardId.value) {
+        return it;
+      }
+    }
+  }
+  return pickShareCard(state.list);
+});
+
+const qrcodeIsImage = computed((): boolean => {
+  const raw = activeQrSvg.value.trim();
+  return raw.indexOf('http://') === 0 || raw.indexOf('https://') === 0 || raw.indexOf('data:') === 0;
+});
+
+const currentDisplayLink = computed((): string => {
+  if (activeQrUrl.value !== '') {
+    return activeQrUrl.value;
+  }
+  const card = activeCard.value;
+  if (card == null) {
+    return 'https://omnicard.ai';
+  }
+  if (card.slug != null && card.slug !== '') {
+    return `https://omnicard.ai/c/${card.slug}`;
+  }
+  if (card.id != null) {
+    return `https://omnicard.ai/c/${card.id}`;
+  }
+  return 'https://omnicard.ai';
+});
+
 function t(key: CardHomeCopyKey): string {
   return resolveCardHomeText(key);
 }
 
+function resolveEmptyCardText(): string {
+  return getCurrentLocale() === 'zh-CN' ? '还没有名片' : 'No cards yet';
+}
+
 function formatField(value: string | null | undefined): string {
   return formatCardField(value);
 }
 
+function formatTodayViews(_item: CardHomeItem): string {
+  return viewsPlaceholder;
+}
+
 function statusLabelOf(status: string | null | undefined): string {
   return statusLabel(status);
 }
 
+function isActiveCard(item: CardHomeItem): boolean {
+  if (activeCard.value == null) {
+    return false;
+  }
+  if (item.id != null && activeCard.value!.id != null) {
+    return item.id === activeCard.value!.id;
+  }
+  if (item.slug != null && activeCard.value!.slug != null) {
+    return item.slug === activeCard.value!.slug;
+  }
+  return false;
+}
+
+async function updateActiveCardQr(card: CardHomeItem | null): Promise<void> {
+  if (card == null) {
+    activeQrSvg.value = '';
+    activeQrUrl.value = '';
+    return;
+  }
+  const key = card.slug != null && card.slug !== '' ? card.slug! : (card.id != null ? String(card.id) : '');
+  if (key === '') {
+    activeQrSvg.value = '';
+    activeQrUrl.value = '';
+    return;
+  }
+  try {
+    qrLoading.value = true;
+    const res = await fetchCardQrcodeSvg(key);
+    if (res != null) {
+      activeQrSvg.value = res.svg != null ? res.svg : '';
+      activeQrUrl.value = res.url != null ? res.url : '';
+    }
+  } catch (_e) {
+    activeQrSvg.value = '';
+    activeQrUrl.value = '';
+  } finally {
+    qrLoading.value = false;
+  }
+}
+
+function handleSelectCard(item: CardHomeItem): void {
+  if (item.id != null) {
+    activeCardId.value = item.id!;
+  } else if (item.slug != null) {
+    activeCardId.value = item.slug!;
+  }
+  updateActiveCardQr(item);
+}
+
+function handleCopyLink(): void {
+  const url = currentDisplayLink.value;
+  if (url === '') {
+    return;
+  }
+  uni.setClipboardData({
+    data: url,
+    success: () => {
+      uni.showToast({
+        title: getOmniText(getCurrentLocale(), 'portal.copied_link'),
+        icon: 'none',
+      });
+    },
+  });
+}
+
+const casesActionLabel = computed((): string => {
+  return getCurrentLocale() === 'zh-CN' ? '相册' : 'Cases';
+});
+
+const articlesActionLabel = computed((): string => {
+  return getCurrentLocale() === 'zh-CN' ? '动态' : 'Posts';
+});
+
+function handleOpenCases(item: CardHomeItem): void {
+  if (item.id == null) {
+    return;
+  }
+  uni.navigateTo({
+    url: `/pages/owner/card/cases?cardId=${item.id}`,
+  });
+}
+
+function handleOpenArticles(item: CardHomeItem): void {
+  if (item.id == null) {
+    return;
+  }
+  uni.navigateTo({
+    url: `/pages/owner/card/articles?cardId=${item.id}`,
+  });
+}
+
 function handleOpenEdit(item: CardHomeItem): void {
   if (item.id == null) {
     return;
@@ -130,13 +433,45 @@ function handleOpenPreview(item: CardHomeItem): void {
   openCardPreview(item);
 }
 
+function handleOpenActiveCardQrcode(): void {
+  const current = activeCard.value != null ? activeCard.value : pickShareCard(state.list);
+  if (current != null) {
+    openCardQrcode(current);
+  }
+}
+
+async function handleRefreshList(): Promise<void> {
+  const res = await refreshCards(state);
+  const picked = pickShareCard(res.list);
+  if (picked != null) {
+    if (activeCardId.value === '') {
+      handleSelectCard(picked);
+    } else {
+      let found = false;
+      for (let i = 0; i < res.list.length; i++) {
+        const item = res.list[i];
+        if (item.id === activeCardId.value || item.slug === activeCardId.value) {
+          found = true;
+          updateActiveCardQr(item);
+          break;
+        }
+      }
+      if (!found) {
+        handleSelectCard(picked);
+      }
+    }
+  } else {
+    updateActiveCardQr(null);
+  }
+}
+
 async function handleRefresh(): Promise<void> {
-  const shareCard = pickShareCard(state.list);
-  if (shareCard != null) {
-    openCardQrcode(shareCard);
+  const current = activeCard.value != null ? activeCard.value : pickShareCard(state.list);
+  if (current != null) {
+    openCardQrcode(current);
     return;
   }
-  await refreshCards(state);
+  await handleRefreshList();
 }
 
 async function applyQuotaHint(): Promise<void> {
@@ -145,20 +480,22 @@ async function applyQuotaHint(): Promise<void> {
     const quota = await fetchCardQuota(tenantId !== '' ? tenantId : 1);
     if (quota.exceeded === true) {
       pageSubtitle.value = resolveCardHomeText('quotaExceeded');
+      quotaBadgeText.value = isZh.value ? '配额已满' : 'Quota Full';
     } else {
       pageSubtitle.value = resolveCardHomeText('subtitle');
+      quotaBadgeText.value = '';
     }
   } catch (_e) {}
 }
 
 onLoad((options: CardHomePageOptions) => {
   applyCardHomeOptions(state, options);
-  refreshCards(state);
+  handleRefreshList();
   applyQuotaHint();
 });
 
 onShow(() => {
-  refreshCards(state);
+  handleRefreshList();
   applyQuotaHint();
 });
 </script>
@@ -168,114 +505,415 @@ onShow(() => {
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: var(--oc-surface, #F7F8FA);
+  min-height: 100vh;
+  background-color: var(--oc-bg, #F7F8FA);
+  position: relative;
+  overflow: hidden;
 }
 
-.card-home-header {
+.card-home-rtl {
+  direction: rtl;
+}
+
+.showcase-section {
   display: flex;
   flex-direction: column;
-  padding-inline: var(--oc-space-16, 16px);
-  padding-block-start: var(--oc-space-16, 16px);
-  padding-block-end: var(--oc-space-12, 12px);
-  background-color: var(--oc-bg, #FFFFFF);
-  border-bottom: 1px solid var(--oc-border, #E3E7ED);
+  align-items: center;
+  padding-block-start: calc(8px + env(safe-area-inset-top, 0px));
+  padding-inline: 16px;
+  padding-block-end: 24px;
+  background: linear-gradient(165deg, #0B63E5 0%, #0088FF 60%, #00A3FF 100%);
+  position: relative;
 }
 
-.card-home-title {
-  font-size: 24px;
+.showcase-aurora-glow {
+  position: absolute;
+  top: -30px;
+  left: 15%;
+  width: 70%;
+  height: 140px;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 70%);
+  pointer-events: none;
+}
+
+.showcase-topbar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-block-end: 8px;
+  z-index: 2;
+}
+
+.showcase-brand {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.showcase-app-name {
+  font-size: 16px;
+  font-weight: 700;
+  color: #FFFFFF;
+  letter-spacing: 0.5px;
+}
+
+.showcase-quota-badge {
+  font-size: 11px;
+  font-weight: 600;
+  color: #F04438;
+  background-color: #FFFFFF;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  margin-inline-start: 8px;
+}
+
+.showcase-action-refresh {
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+  padding: 4px 8px;
+}
+
+.showcase-stand {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #FFFFFF;
+  border-radius: 20px;
+  padding: 12px 14px 10px;
+  box-shadow: 0 12px 36px rgba(11, 99, 229, 0.2), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.85);
+  z-index: 2;
+  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.showcase-stand:active {
+  opacity: 0.92;
+}
+
+.showcase-qr-box {
+  width: 140px;
+  height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #FFFFFF;
+}
+
+.showcase-qr-img {
+  width: 140px;
+  height: 140px;
+}
+
+.showcase-qr-rich {
+  width: 140px;
+  height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.showcase-qr-skeleton {
+  width: 140px;
+  height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F5F9;
+  border-radius: 12px;
+}
+
+.showcase-qr-pulse {
+  width: 60px;
+  height: 60px;
+  border-radius: 8px;
+  background-color: #E2E8F0;
+}
+
+.showcase-qr-placeholder {
+  width: 140px;
+  height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #F8FAFC;
+  border: 1px dashed #CBD5E1;
+  border-radius: 12px;
+  padding: 12px;
+}
+
+.showcase-qr-tip {
+  font-size: 13px;
+  font-weight: 500;
+  color: #64748B;
+  line-height: 1.4;
+  text-align: center;
+}
+
+.showcase-glow-guide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 8px;
+  padding: 4px 12px;
+  background-color: #EBF5FF;
+  border-radius: 9999px;
+}
+
+.showcase-guide-text {
+  font-size: 12px;
+  font-weight: 600;
+  color: #0088FF;
+  letter-spacing: 0.2px;
+}
+
+.drawer-sheet {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #FFFFFF;
+  border-top-left-radius: 28px;
+  border-top-right-radius: 28px;
+  margin-top: -16px;
+  padding-inline: 16px;
+  padding-block-start: 10px;
+  padding-block-end: calc(84px + var(--window-bottom, 0px) + env(safe-area-inset-bottom, 0px));
+  box-shadow: 0 -8px 30px rgba(16, 24, 40, 0.05);
+  position: relative;
+  z-index: 10;
+  overflow: hidden;
+}
+
+.drawer-handle-bar {
+  display: flex;
+  justify-content: center;
+  padding-block-end: 8px;
+}
+
+.drawer-handle {
+  width: 36px;
+  height: 4px;
+  background-color: #E2E8F0;
+  border-radius: 2px;
+}
+
+.direct-link-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #F8FAFC;
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: 12px;
+  padding: 6px 10px;
+  margin-block-end: 8px;
+}
+
+.direct-link-info {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  margin-inline-end: 10px;
+}
+
+.direct-link-label {
+  font-size: 10px;
+  font-weight: 600;
+  color: #64748B;
+  letter-spacing: 0.5px;
+}
+
+.direct-link-url {
+  font-size: 13px;
+  font-weight: 500;
+  color: #101828;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.direct-link-copy-btn {
+  background-color: var(--oc-primary-soft, #EBF5FF);
+  border: 1px solid rgba(0, 136, 255, 0.2);
+  border-radius: 9999px;
+  padding: 4px 12px;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  line-height: 1;
+}
+
+.direct-link-copy-text {
+  font-size: 12px;
+  font-weight: 700;
+  color: #0088FF;
+}
+
+.value-prop-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 5px 10px;
+  background-color: #F0FDF4;
+  border: 1px solid #DCFCE7;
+  border-radius: 8px;
+  margin-block-end: 10px;
+}
+
+.value-prop-tag {
+  font-size: 10px;
+  font-weight: 700;
+  color: #16A34A;
+  background-color: #DCFCE7;
+  padding: 1px 6px;
+  border-radius: 4px;
+  margin-inline-end: 6px;
+}
+
+.value-prop-text {
+  font-size: 12px;
+  color: #15803D;
+  font-weight: 500;
+}
+
+.drawer-card-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-block-end: 8px;
+}
+
+.drawer-title {
+  font-size: 16px;
   font-weight: 700;
   color: var(--oc-text, #101828);
-  line-height: 1.25;
-  margin-bottom: var(--oc-space-8, 8px);
 }
 
-.card-home-subtitle {
-  font-size: 14px;
+.drawer-subtitle {
+  font-size: 12px;
   color: var(--oc-text-2, #667085);
-  line-height: 1.6;
-  margin-bottom: var(--oc-space-16, 16px);
-}
-
-.card-home-search {
-  height: 44px;
-  padding-inline: 12px;
-  background-color: var(--oc-surface, #F7F8FA);
-  border: 1px solid var(--oc-border, #E3E7ED);
-  border-radius: var(--oc-radius-btn, 12px);
-  font-size: 16px;
-  color: var(--oc-text, #101828);
 }
 
 .card-home-skeleton {
   flex: 1;
-  padding-inline: var(--oc-space-16, 16px);
-  padding-block: var(--oc-space-16, 16px);
+  padding-block: 8px;
 }
 
 .skeleton-line {
-  height: 16px;
-  width: 40%;
+  height: 20px;
+  width: 50%;
   background-color: var(--oc-border, #E3E7ED);
   border-radius: 8px;
-  margin-bottom: var(--oc-space-12, 12px);
+  margin-block-end: 12px;
 }
 
 .skeleton-card {
-  height: 88px;
+  height: 76px;
   background-color: var(--oc-border, #E3E7ED);
-  border-radius: var(--oc-radius-card, 16px);
-  margin-bottom: var(--oc-space-12, 12px);
+  border-radius: 16px;
+  margin-block-end: 10px;
 }
 
 .card-home-feedback {
   flex: 1;
-  margin: 40px var(--oc-space-16, 16px);
-  padding: var(--oc-space-24, 24px);
-  background-color: var(--oc-bg, #FFFFFF);
+  margin-block: 16px;
+  padding: 20px 16px;
+  background-color: #FFFFFF;
   border: 1px solid var(--oc-border, #E3E7ED);
-  border-radius: var(--oc-radius-card, 16px);
+  border-radius: 16px;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
 }
 
 .feedback-title {
   font-size: 16px;
   font-weight: 600;
   color: var(--oc-text, #101828);
-  margin-bottom: var(--oc-space-8, 8px);
+  margin-block-end: 6px;
 }
 
 .feedback-desc {
-  font-size: 14px;
+  font-size: 13px;
   color: var(--oc-text-2, #667085);
   text-align: center;
-  line-height: 1.6;
+  line-height: 1.5;
+  margin-block-end: 12px;
+}
+
+.feedback-retry-btn {
+  height: 36px;
+  padding: 0 16px;
+  background-color: var(--oc-primary-soft, #EBF5FF);
+  border-radius: 9999px;
+  border: 1px solid rgba(0, 136, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.feedback-retry-text {
+  font-size: 13px;
+  font-weight: 600;
+  color: #0088FF;
 }
 
 .card-home-list {
   flex: 1;
-  padding-inline: var(--oc-space-16, 16px);
-  padding-block-start: var(--oc-space-12, 12px);
-  padding-block-end: calc(88px + var(--window-bottom, 0px) + env(safe-area-inset-bottom, 0px));
+  min-height: 120px;
 }
 
 .card-row {
-  min-height: 88px;
-  padding: var(--oc-space-16, 16px);
-  margin-bottom: var(--oc-space-12, 12px);
-  background-color: var(--oc-bg, #FFFFFF);
+  min-height: 76px;
+  padding: 12px 14px;
+  margin-block-end: 8px;
+  background-color: #FFFFFF;
   border: 1px solid var(--oc-border, #E3E7ED);
-  border-radius: var(--oc-radius-card, 16px);
+  border-radius: 16px;
+  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  transition: transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  position: relative;
+  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
 .card-row:active {
-  transform: scale(0.99);
+  opacity: 0.88;
+}
+
+.card-row-active {
+  border: 1.5px solid #0088FF;
+  background-color: #F8FBFF;
+  box-shadow: 0 4px 16px rgba(0, 136, 255, 0.08);
+}
+
+.card-active-indicator {
+  position: absolute;
+  left: 0;
+  top: 12px;
+  bottom: 12px;
+  width: 4px;
+  background-color: #0088FF;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.card-home-rtl .card-active-indicator {
+  left: auto;
+  right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
 }
 
 .card-main {
@@ -285,24 +923,53 @@ onShow(() => {
   padding-inline-end: 12px;
 }
 
+.card-name-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-block-end: 2px;
+}
+
 .card-name {
-  font-size: 16px;
-  font-weight: 600;
+  font-size: 15px;
+  font-weight: 700;
   color: var(--oc-text, #101828);
-  line-height: 1.25;
-  margin-bottom: 4px;
+  line-height: 1.3;
+  margin-inline-end: 6px;
+}
+
+.card-status-badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 6px;
+}
+
+.status-published {
+  color: #0088FF;
+  background-color: #EBF5FF;
+}
+
+.status-draft {
+  color: #64748B;
+  background-color: #F1F5F9;
+}
+
+.status-archived {
+  color: #94A3B8;
+  background-color: #F1F5F9;
 }
 
 .card-title {
-  font-size: 14px;
+  font-size: 13px;
   color: var(--oc-text-2, #667085);
-  line-height: 1.6;
+  line-height: 1.4;
 }
 
 .card-company {
-  font-size: 14px;
+  font-size: 13px;
   color: var(--oc-text-2, #667085);
-  line-height: 1.6;
+  line-height: 1.4;
 }
 
 .card-meta {
@@ -311,63 +978,126 @@ onShow(() => {
   align-items: flex-end;
 }
 
-.card-status {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--oc-primary, #0B5CFF);
-  margin-bottom: 8px;
+.card-home-rtl .card-meta {
+  align-items: flex-start;
 }
 
-.card-poster {
-  min-height: 44px;
-  min-width: 44px;
-  font-size: 12px;
+.card-views-wrap {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-block-end: 4px;
+}
+
+.card-views-label {
+  font-size: 11px;
+  color: var(--oc-text-2, #667085);
+  margin-inline-end: 4px;
+}
+
+.card-views {
+  font-size: 11px;
   font-weight: 600;
-  color: var(--oc-primary, #0B5CFF);
+  color: var(--oc-text-2, #667085);
+}
+
+.card-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.card-cases-btn,
+.card-articles-btn {
+  font-size: 13px;
+  font-weight: 600;
+  color: #0088FF;
+  padding: 6px 8px;
+  min-height: 36px;
   display: flex;
   align-items: center;
 }
 
+.card-preview-btn {
+  font-size: 13px;
+  font-weight: 600;
+  color: #0088FF;
+  padding: 6px 8px;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+}
+
+.card-edit {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--oc-text, #101828);
+  padding: 6px 8px;
+  min-height: 44px;
+  min-width: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.card-home-rtl .card-edit {
+  justify-content: flex-start;
+}
+
 .card-home-cta-bar {
   position: fixed;
   left: 0;
   right: 0;
   bottom: var(--window-bottom, 0px);
-  padding: 12px var(--oc-space-16, 16px) calc(12px + env(safe-area-inset-bottom, 0px)) var(--oc-space-16, 16px);
-  background-color: var(--oc-bg, #FFFFFF);
+  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, #FFFFFF 100%);
   border-top: 1px solid var(--oc-border, #E3E7ED);
   box-sizing: border-box;
   z-index: 100;
 }
 
+.tabbar-inner {
+  display: flex;
+  width: 100%;
+}
+
 .primary-cta-btn {
   height: 48px;
   min-height: 44px;
-  background-color: var(--oc-primary, #0B5CFF);
-  border-radius: var(--oc-radius-btn, 12px);
+  background: linear-gradient(135deg, #00A3FF 0%, #0B5CFF 100%);
+  border-radius: 9999px;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   border-width: 0;
+  box-shadow: 0 8px 20px rgba(0, 136, 255, 0.25);
   transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
 .primary-cta-btn:active {
-  opacity: 0.85;
+  opacity: 0.88;
 }
 
 .primary-cta-btn-disabled {
-  background-color: var(--oc-border, #E3E7ED);
+  background: var(--oc-border, #E3E7ED);
+  box-shadow: none;
 }
 
 .primary-cta-btn-text {
-  color: var(--oc-bg, #FFFFFF);
-  font-size: 15px;
+  color: #FFFFFF;
+  font-size: 16px;
   font-weight: 600;
 }
 
 .primary-cta-btn-disabled .primary-cta-btn-text {
   color: var(--oc-text-2, #667085);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
+  }
+}
 </style>
diff --git a/mpuniapp/pages/owner/card/useCardArticles.uts b/mpuniapp/pages/owner/card/useCardArticles.uts
new file mode 100644
index 0000000..d32971d
--- /dev/null
+++ b/mpuniapp/pages/owner/card/useCardArticles.uts
@@ -0,0 +1,257 @@
+/**
+ * OmniCard AI (CRMmp) - 文章动态中心移动端业务逻辑驱动层
+ * 严格遵循 uts 强类型契约与 AGENTS.md 规范
+ */
+
+import { CardArticle, OwnerPageData, OwnerPageQuery } from '../../../common/types.uts';
+import {
+  fetchCardArticlesPage,
+  addCardArticle,
+  updateCardArticle,
+  deleteCardArticle,
+} from '../../../common/api.uts';
+import { getCurrentLocale, getOmniText } from '../../../common/locale.uts';
+
+export type ArticlesApi = {
+  fetchPage: (query: OwnerPageQuery) => Promise<OwnerPageData<CardArticle>>;
+  addArticle: (data: Partial<CardArticle>) => Promise<CardArticle>;
+  updateArticle: (data: Partial<CardArticle> & { id: string | number }) => Promise<CardArticle>;
+  deleteArticle: (id: string | number) => Promise<boolean>;
+};
+
+export const defaultArticlesApi: ArticlesApi = {
+  fetchPage: (query: OwnerPageQuery) => fetchCardArticlesPage(query),
+  addArticle: (data: Partial<CardArticle>) => addCardArticle(data),
+  updateArticle: (data: Partial<CardArticle> & { id: string | number }) => updateCardArticle(data),
+  deleteArticle: (id: string | number) => deleteCardArticle(id),
+};
+
+export type ArticlesState = {
+  cardId: string | number;
+  list: CardArticle[];
+  loading: boolean;
+  empty: boolean;
+  errorMessage: string;
+  drawerVisible: boolean;
+  editingArticle: Partial<CardArticle> | null;
+  saving: boolean;
+};
+
+export function createArticlesState(cardId: string | number): ArticlesState {
+  return {
+    cardId,
+    list: [],
+    loading: false,
+    empty: false,
+    errorMessage: '',
+    drawerVisible: false,
+    editingArticle: null,
+    saving: false,
+  };
+}
+
+export function extractArticleSummary(content?: string, maxLen: number = 120): string {
+  if (content == null || content.trim() === '') {
+    return '';
+  }
+  const plain = content
+    .replace(/<[^>]+>/g, '') // 剥离 HTML
+    .replace(/!\[.*?\]\(.*?\)/g, '') // 剥离 Markdown 图片
+    .replace(/\[(.*?)\]\(.*?\)/g, '$1') // 提取 Markdown 链接文本
+    .replace(/[#*`_~>-]/g, '') // 移除 Markdown 常用标记
+    .replace(/\s+/g, ' ') // 压缩多余空格
+    .trim();
+
+  return plain.length > maxLen ? plain.slice(0, maxLen) : plain;
+}
+
+export function validateArticleForm(form: Partial<CardArticle>): string | null {
+  const title = form.title != null ? form.title.trim() : '';
+  if (title === '') {
+    return '请输入文章或动态标题';
+  }
+  const content = form.content != null ? form.content.trim() : '';
+  if (content === '') {
+    return '请输入文章正文内容';
+  }
+  return null;
+}
+
+export async function loadArticles(
+  state: ArticlesState,
+  api: ArticlesApi = defaultArticlesApi
+): Promise<void> {
+  state.loading = true;
+  state.errorMessage = '';
+  try {
+    const res = await api.fetchPage({
+      page: 1,
+      size: 50,
+      cardId: state.cardId,
+    });
+    const items = res.list != null ? res.list : [];
+    state.list = items;
+    state.empty = items.length === 0;
+  } catch (err: any) {
+    state.errorMessage = err.message || '加载文章列表失败';
+  } finally {
+    state.loading = false;
+  }
+}
+
+export async function saveArticle(
+  state: ArticlesState,
+  form: Partial<CardArticle>,
+  api: ArticlesApi = defaultArticlesApi
+): Promise<boolean> {
+  const err = validateArticleForm(form);
+  if (err !== null) {
+    state.errorMessage = err;
+    return false;
+  }
+
+  state.saving = true;
+  state.errorMessage = '';
+  try {
+    const summary = (form.summary != null && form.summary!.trim() !== '')
+      ? form.summary!.trim()
+      : extractArticleSummary(form.content);
+
+    const payload: Partial<CardArticle> = {
+      ...form,
+      cardId: state.cardId,
+      title: form.title!.trim(),
+      summary,
+      content: form.content!.trim(),
+      isPublished: form.isPublished !== undefined ? form.isPublished : true,
+    };
+
+    if (form.id != null) {
+      await api.updateArticle({
+        ...payload,
+        id: form.id,
+      });
+    } else {
+      await api.addArticle(payload);
+    }
+
+    state.drawerVisible = false;
+    state.editingArticle = null;
+    await loadArticles(state, api);
+    return true;
+  } catch (err: any) {
+    state.errorMessage = err.message || '保存文章失败';
+    return false;
+  } finally {
+    state.saving = false;
+  }
+}
+
+export async function toggleArticlePublish(
+  state: ArticlesState,
+  article: CardArticle,
+  api: ArticlesApi = defaultArticlesApi
+): Promise<boolean> {
+  if (article.id == null) {
+    return false;
+  }
+  state.saving = true;
+  state.errorMessage = '';
+  try {
+    const targetStatus = !article.isPublished;
+    await api.updateArticle({
+      id: article.id,
+      cardId: article.cardId,
+      isPublished: targetStatus,
+    });
+    article.isPublished = targetStatus;
+    return true;
+  } catch (err: any) {
+    state.errorMessage = err.message || '切换发布状态失败';
+    return false;
+  } finally {
+    state.saving = false;
+  }
+}
+
+export async function deleteArticle(
+  state: ArticlesState,
+  id: string | number,
+  api: ArticlesApi = defaultArticlesApi
+): Promise<boolean> {
+  state.saving = true;
+  state.errorMessage = '';
+  try {
+    const ok = await api.deleteArticle(id);
+    if (ok) {
+      await loadArticles(state, api);
+      return true;
+    }
+    return false;
+  } catch (err: any) {
+    state.errorMessage = err.message || '删除文章失败';
+    return false;
+  } finally {
+    state.saving = false;
+  }
+}
+
+export type ArticlesCopyKey =
+  | 'title'
+  | 'subtitle'
+  | 'publishBtn'
+  | 'editBtn'
+  | 'deleteBtn'
+  | 'emptyTitle'
+  | 'emptyDesc'
+  | 'statusPublished'
+  | 'statusDraft'
+  | 'fieldTitle'
+  | 'fieldSummary'
+  | 'fieldCover'
+  | 'fieldContent'
+  | 'fieldPublish'
+  | 'saveBtn'
+  | 'cancelBtn';
+
+export function resolveArticlesText(key: ArticlesCopyKey): string {
+  const locale = getCurrentLocale();
+  const zh = locale === 'zh-CN';
+
+  switch (key) {
+    case 'title':
+      return zh ? '文章与商务动态' : 'Insights & Articles';
+    case 'subtitle':
+      return zh ? '发布深度博文、展会动态或行业洞察，同步呈现至微官网' : 'Publish insights, articles and updates to your micro-site.';
+    case 'publishBtn':
+      return zh ? '发布新动态' : 'New Article';
+    case 'editBtn':
+      return zh ? '编辑' : 'Edit';
+    case 'deleteBtn':
+      return zh ? '删除' : 'Delete';
+    case 'emptyTitle':
+      return zh ? '暂无文章动态' : 'No Articles Yet';
+    case 'emptyDesc':
+      return zh ? '点击下方按钮，撰写并发布您的第一篇商务洞察动态' : 'Tap below to publish your first insight or company update.';
+    case 'statusPublished':
+      return zh ? '已发布' : 'Published';
+    case 'statusDraft':
+      return zh ? '草稿' : 'Draft';
+    case 'fieldTitle':
+      return zh ? '文章标题' : 'Title';
+    case 'fieldSummary':
+      return zh ? '摘要导读 (选填)' : 'Summary';
+    case 'fieldCover':
+      return zh ? '封面图片' : 'Cover Image';
+    case 'fieldContent':
+      return zh ? '文章正文 (支持富文本与 Markdown)' : 'Content';
+    case 'fieldPublish':
+      return zh ? '公开发布至微官网' : 'Publish to Micro-site';
+    case 'saveBtn':
+      return zh ? '确认发布' : 'Publish';
+    case 'cancelBtn':
+      return zh ? '取消' : 'Cancel';
+    default:
+      return '';
+  }
+}
diff --git a/mpuniapp/pages/owner/card/useCardCases.uts b/mpuniapp/pages/owner/card/useCardCases.uts
new file mode 100644
index 0000000..a04b575
--- /dev/null
+++ b/mpuniapp/pages/owner/card/useCardCases.uts
@@ -0,0 +1,212 @@
+/**
+ * OmniCard AI (CRMmp) - 产品相册与标杆案例移动端业务逻辑驱动层
+ * 严格遵循 uts 强类型契约与 AGENTS.md 规范
+ */
+
+import { CardCase, OwnerPageData, OwnerPageQuery } from '../../../common/types.uts';
+import {
+  fetchCardCasesPage,
+  addCardCase,
+  updateCardCase,
+  deleteCardCase,
+} from '../../../common/api.uts';
+import { getCurrentLocale, getOmniText } from '../../../common/locale.uts';
+
+export const PRESET_CASE_METRICS: string[] = [
+  '+320% ROI',
+  '+150% 留资率',
+  '45k+ 海外线索',
+  '2M+ 全球曝光',
+  'Top 1 细分类目',
+];
+
+export type CasesApi = {
+  fetchPage: (query: OwnerPageQuery) => Promise<OwnerPageData<CardCase>>;
+  addCase: (data: Partial<CardCase>) => Promise<CardCase>;
+  updateCase: (data: Partial<CardCase> & { id: string | number }) => Promise<CardCase>;
+  deleteCase: (id: string | number) => Promise<boolean>;
+};
+
+export const defaultCasesApi: CasesApi = {
+  fetchPage: (query: OwnerPageQuery) => fetchCardCasesPage(query),
+  addCase: (data: Partial<CardCase>) => addCardCase(data),
+  updateCase: (data: Partial<CardCase> & { id: string | number }) => updateCardCase(data),
+  deleteCase: (id: string | number) => deleteCardCase(id),
+};
+
+export type CasesState = {
+  cardId: string | number;
+  list: CardCase[];
+  loading: boolean;
+  empty: boolean;
+  errorMessage: string;
+  drawerVisible: boolean;
+  editingCase: Partial<CardCase> | null;
+  saving: boolean;
+};
+
+export function createCasesState(cardId: string | number): CasesState {
+  return {
+    cardId,
+    list: [],
+    loading: false,
+    empty: false,
+    errorMessage: '',
+    drawerVisible: false,
+    editingCase: null,
+    saving: false,
+  };
+}
+
+export function validateCaseForm(form: Partial<CardCase>): string | null {
+  const title = form.title != null ? form.title.trim() : '';
+  if (title === '') {
+    return '请输入案例或产品标题';
+  }
+  if (title.length > 150) {
+    return '标题长度不能超过 150 个字符';
+  }
+  return null;
+}
+
+export async function loadCases(
+  state: CasesState,
+  api: CasesApi = defaultCasesApi
+): Promise<void> {
+  state.loading = true;
+  state.errorMessage = '';
+  try {
+    const res = await api.fetchPage({
+      page: 1,
+      size: 50,
+      cardId: state.cardId,
+    });
+    const items = res.list != null ? res.list : [];
+    state.list = items;
+    state.empty = items.length === 0;
+  } catch (err: any) {
+    state.errorMessage = err.message || '加载案例列表失败';
+  } finally {
+    state.loading = false;
+  }
+}
+
+export async function saveCase(
+  state: CasesState,
+  form: Partial<CardCase>,
+  api: CasesApi = defaultCasesApi
+): Promise<boolean> {
+  const err = validateCaseForm(form);
+  if (err !== null) {
+    state.errorMessage = err;
+    return false;
+  }
+
+  state.saving = true;
+  state.errorMessage = '';
+  try {
+    const payload: Partial<CardCase> = {
+      ...form,
+      cardId: state.cardId,
+      title: form.title!.trim(),
+    };
+
+    if (form.id != null) {
+      await api.updateCase({
+        ...payload,
+        id: form.id,
+      });
+    } else {
+      await api.addCase(payload);
+    }
+
+    state.drawerVisible = false;
+    state.editingCase = null;
+    await loadCases(state, api);
+    return true;
+  } catch (err: any) {
+    state.errorMessage = err.message || '保存案例失败';
+    return false;
+  } finally {
+    state.saving = false;
+  }
+}
+
+export async function deleteCase(
+  state: CasesState,
+  id: string | number,
+  api: CasesApi = defaultCasesApi
+): Promise<boolean> {
+  state.saving = true;
+  state.errorMessage = '';
+  try {
+    const ok = await api.deleteCase(id);
+    if (ok) {
+      await loadCases(state, api);
+      return true;
+    }
+    return false;
+  } catch (err: any) {
+    state.errorMessage = err.message || '删除案例失败';
+    return false;
+  } finally {
+    state.saving = false;
+  }
+}
+
+export type CasesCopyKey =
+  | 'title'
+  | 'subtitle'
+  | 'addBtn'
+  | 'editBtn'
+  | 'deleteBtn'
+  | 'emptyTitle'
+  | 'emptyDesc'
+  | 'fieldTitle'
+  | 'fieldClient'
+  | 'fieldDuration'
+  | 'fieldMetrics'
+  | 'fieldDesc'
+  | 'fieldCover'
+  | 'saveBtn'
+  | 'cancelBtn';
+
+export function resolveCasesText(key: CasesCopyKey): string {
+  const locale = getCurrentLocale();
+  const zh = locale === 'zh-CN';
+
+  switch (key) {
+    case 'title':
+      return zh ? '产品相册与标杆案例' : 'Portfolio & Case Studies';
+    case 'subtitle':
+      return zh ? '随时维护产品画廊与标杆案例，在微官网中向全球买家展现硬核实力' : 'Showcase your products and case studies on your micro-site.';
+    case 'addBtn':
+      return zh ? '新增产品案例' : 'Add Case Study';
+    case 'editBtn':
+      return zh ? '编辑' : 'Edit';
+    case 'deleteBtn':
+      return zh ? '删除' : 'Delete';
+    case 'emptyTitle':
+      return zh ? '暂无产品案例' : 'No Cases Yet';
+    case 'emptyDesc':
+      return zh ? '点击下方按钮，拍照或上传您的首个产品相册与案例' : 'Tap below to add your first product showcase or case study.';
+    case 'fieldTitle':
+      return zh ? '案例/产品名称' : 'Title';
+    case 'fieldClient':
+      return zh ? '合作客商/品牌 (选填)' : 'Client / Brand';
+    case 'fieldDuration':
+      return zh ? '项目周期 (选填)' : 'Timeline';
+    case 'fieldMetrics':
+      return zh ? '量化成效标签' : 'Key Metrics Tag';
+    case 'fieldDesc':
+      return zh ? '方案成果简述' : 'Overview';
+    case 'fieldCover':
+      return zh ? '产品封面与相册图片' : 'Cover & Photos';
+    case 'saveBtn':
+      return zh ? '保存案例' : 'Save Case';
+    case 'cancelBtn':
+      return zh ? '取消' : 'Cancel';
+    default:
+      return '';
+  }
+}
diff --git a/mpuniapp/tests/card-articles.test.ts b/mpuniapp/tests/card-articles.test.ts
new file mode 100644
index 0000000..3b1aef2
--- /dev/null
+++ b/mpuniapp/tests/card-articles.test.ts
@@ -0,0 +1,46 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const MP_ROOT = path.resolve('m:/2026项目/CRMmp/mpuniapp');
+const articlesUtsPath = path.join(MP_ROOT, 'pages/owner/card/useCardArticles.uts');
+
+test('1. useCardArticles.uts 文件必须存在且格式完整', () => {
+  assert.ok(fs.existsSync(articlesUtsPath), '必须存在 useCardArticles.uts');
+  const content = fs.readFileSync(articlesUtsPath, 'utf-8');
+  assert.ok(content.includes('export function createArticlesState'), '必须导出 createArticlesState');
+  assert.ok(content.includes('export function extractArticleSummary'), '必须导出 extractArticleSummary');
+  assert.ok(content.includes('export function validateArticleForm'), '必须导出 validateArticleForm');
+  assert.ok(content.includes('export async function loadArticles'), '必须导出 loadArticles');
+  assert.ok(content.includes('export async function saveArticle'), '必须导出 saveArticle');
+  assert.ok(content.includes('export async function toggleArticlePublish'), '必须导出 toggleArticlePublish');
+  assert.ok(content.includes('export async function deleteArticle'), '必须导出 deleteArticle');
+});
+
+test('2. 摘要提取器必须支持剥离 Markdown 与 HTML 语法', () => {
+  const content = fs.readFileSync(articlesUtsPath, 'utf-8');
+  assert.ok(content.includes('.replace(/<[^>]+>/g, \'\')'), '必须剥离 HTML 标签');
+  assert.ok(content.includes('.replace(/!\\[.*?\\]\\(.*?\\)/g, \'\')'), '必须剥离 Markdown 图片');
+});
+
+test('3. 文章表单校验逻辑实现规范', () => {
+  const content = fs.readFileSync(articlesUtsPath, 'utf-8');
+  assert.ok(content.includes("title === ''"), '必须拦截空标题');
+  assert.ok(content.includes("content === ''"), '必须拦截空正文');
+});
+
+test('4. 必须通过 Cool-Admin 标准 CRUD 契约对接后端接口', () => {
+  const content = fs.readFileSync(articlesUtsPath, 'utf-8');
+  assert.ok(content.includes('fetchCardArticlesPage'), '必须调用 fetchCardArticlesPage');
+  assert.ok(content.includes('addCardArticle'), '必须调用 addCardArticle');
+  assert.ok(content.includes('updateCardArticle'), '必须调用 updateCardArticle');
+  assert.ok(content.includes('deleteCardArticle'), '必须调用 deleteCardArticle');
+});
+
+test('5. 国际化与文案键完整覆盖', () => {
+  const content = fs.readFileSync(articlesUtsPath, 'utf-8');
+  assert.ok(content.includes('resolveArticlesText'), '必须实现文案解析');
+  assert.ok(content.includes('Insights & Articles'), '必须支持英文标题');
+  assert.ok(content.includes('文章与商务动态'), '必须支持中文标题');
+});
diff --git a/mpuniapp/tests/card-cases.test.ts b/mpuniapp/tests/card-cases.test.ts
new file mode 100644
index 0000000..b6adbd7
--- /dev/null
+++ b/mpuniapp/tests/card-cases.test.ts
@@ -0,0 +1,49 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const MP_ROOT = path.resolve('m:/2026项目/CRMmp/mpuniapp');
+const casesUtsPath = path.join(MP_ROOT, 'pages/owner/card/useCardCases.uts');
+
+test('1. useCardCases.uts 文件必须存在且格式完整', () => {
+  assert.ok(fs.existsSync(casesUtsPath), '必须存在 useCardCases.uts');
+  const content = fs.readFileSync(casesUtsPath, 'utf-8');
+  assert.ok(content.includes('export function createCasesState'), '必须导出 createCasesState');
+  assert.ok(content.includes('export function validateCaseForm'), '必须导出 validateCaseForm');
+  assert.ok(content.includes('export async function loadCases'), '必须导出 loadCases');
+  assert.ok(content.includes('export async function saveCase'), '必须导出 saveCase');
+  assert.ok(content.includes('export async function deleteCase'), '必须导出 deleteCase');
+  assert.ok(content.includes('export const PRESET_CASE_METRICS'), '必须导出 PRESET_CASE_METRICS');
+});
+
+test('2. 预设指标标签完备且包含出海核心量化成效', () => {
+  const content = fs.readFileSync(casesUtsPath, 'utf-8');
+  assert.ok(content.includes('+320% ROI'), '必须包含 +320% ROI');
+  assert.ok(content.includes('+150% 留资率'), '必须包含 +150% 留资率');
+  assert.ok(content.includes('45k+ 海外线索'), '必须包含 45k+ 海外线索');
+  assert.ok(content.includes('2M+ 全球曝光'), '必须包含 2M+ 全球曝光');
+  assert.ok(content.includes('Top 1 细分类目'), '必须包含 Top 1 细分类目');
+});
+
+test('3. 案例表单校验逻辑实现规范', () => {
+  const content = fs.readFileSync(casesUtsPath, 'utf-8');
+  // 必须对标题非空和超长进行拦截
+  assert.ok(content.includes("title === ''"), '必须拦截空标题');
+  assert.ok(content.includes('title.length > 150'), '必须拦截超过 150 字符的标题');
+});
+
+test('4. 必须通过 Cool-Admin 标准 CRUD 契约对接后端接口', () => {
+  const content = fs.readFileSync(casesUtsPath, 'utf-8');
+  assert.ok(content.includes('fetchCardCasesPage'), '必须调用 fetchCardCasesPage');
+  assert.ok(content.includes('addCardCase'), '必须调用 addCardCase');
+  assert.ok(content.includes('updateCardCase'), '必须调用 updateCardCase');
+  assert.ok(content.includes('deleteCardCase'), '必须调用 deleteCardCase');
+});
+
+test('5. 国际化与文案键完整覆盖', () => {
+  const content = fs.readFileSync(casesUtsPath, 'utf-8');
+  assert.ok(content.includes('resolveCasesText'), '必须实现文案解析');
+  assert.ok(content.includes('Portfolio & Case Studies'), '必须支持英文标题');
+  assert.ok(content.includes('产品相册与标杆案例'), '必须支持中文标题');
+});
diff --git a/mpuniapp/tests/cases-articles-ui.test.ts b/mpuniapp/tests/cases-articles-ui.test.ts
new file mode 100644
index 0000000..b94cb6e
--- /dev/null
+++ b/mpuniapp/tests/cases-articles-ui.test.ts
@@ -0,0 +1,93 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const MP_ROOT = path.resolve('m:/2026项目/CRMmp/mpuniapp');
+const casesPath = path.join(MP_ROOT, 'pages/owner/card/cases.uvue');
+const articlesPath = path.join(MP_ROOT, 'pages/owner/card/articles.uvue');
+
+test('1. cases.uvue 和 articles.uvue 文件必须存在', () => {
+  assert.ok(fs.existsSync(casesPath), '必须存在 cases.uvue');
+  assert.ok(fs.existsSync(articlesPath), '必须存在 articles.uvue');
+});
+
+test('2. 零 Emoji 违规审查 (严禁使用 Emoji 作为功能图标或排版内容)', () => {
+  const emojiRegex = /[\u{1F300}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}]/u;
+  const casesContent = fs.readFileSync(casesPath, 'utf-8');
+  const articlesContent = fs.readFileSync(articlesPath, 'utf-8');
+
+  assert.equal(emojiRegex.test(casesContent), false, 'cases.uvue 严禁含有 Emoji');
+  assert.equal(emojiRegex.test(articlesContent), false, 'articles.uvue 严禁含有 Emoji');
+});
+
+test('3. 底部悬浮主 CTA 栏适配移动端视口安全区 (env(safe-area-inset-bottom))', () => {
+  const casesContent = fs.readFileSync(casesPath, 'utf-8');
+  const articlesContent = fs.readFileSync(articlesPath, 'utf-8');
+
+  assert.ok(
+    casesContent.includes('env(safe-area-inset-bottom)'),
+    'cases.uvue 必须适配 safe-area-inset-bottom'
+  );
+  assert.ok(
+    articlesContent.includes('env(safe-area-inset-bottom)'),
+    'articles.uvue 必须适配 safe-area-inset-bottom'
+  );
+});
+
+test('4. 表单输入框与多行文本框符合移动端 16px 防缩放规范', () => {
+  const casesContent = fs.readFileSync(casesPath, 'utf-8');
+  const articlesContent = fs.readFileSync(articlesPath, 'utf-8');
+
+  assert.ok(casesContent.includes('font-size: 16px;'), 'cases.uvue 输入框必须使用 16px');
+  assert.ok(articlesContent.includes('font-size: 16px;'), 'articles.uvue 输入框必须使用 16px');
+});
+
+test('5. 核心操作按钮触控热区保证 (min-height >= 44px 或 height >= 44px)', () => {
+  const casesContent = fs.readFileSync(casesPath, 'utf-8');
+  const articlesContent = fs.readFileSync(articlesPath, 'utf-8');
+
+  assert.ok(casesContent.includes('min-height: 44px;'), 'cases.uvue 按钮必须保证触控高度 >= 44px');
+  assert.ok(articlesContent.includes('min-height: 44px;'), 'articles.uvue 按钮必须保证触控高度 >= 44px');
+});
+
+test('6. 必须复用 components/image-uploader/image-uploader.uvue', () => {
+  const casesContent = fs.readFileSync(casesPath, 'utf-8');
+  const articlesContent = fs.readFileSync(articlesPath, 'utf-8');
+
+  assert.ok(
+    casesContent.includes("import ImageUploader from '../../../components/image-uploader/image-uploader.uvue'"),
+    'cases.uvue 必须复用 image-uploader 组件'
+  );
+  assert.ok(
+    articlesContent.includes("import ImageUploader from '../../../components/image-uploader/image-uploader.uvue'"),
+    'articles.uvue 必须复用 image-uploader 组件'
+  );
+});
+
+test('7. pages.json 中必须注册 cases 与 articles 路由', () => {
+  const pagesJsonPath = path.join(MP_ROOT, 'pages.json');
+  const pagesJson = JSON.parse(fs.readFileSync(pagesJsonPath, 'utf-8'));
+  const routes = pagesJson.pages.map((p: any) => p.path);
+
+  assert.ok(routes.includes('pages/owner/card/cases'), 'pages.json 必须注册 cases 页面');
+  assert.ok(routes.includes('pages/owner/card/articles'), 'pages.json 必须注册 articles 页面');
+});
+
+test('8. edit.uvue 中必须包含 cases 与 articles 的 Bento 导航入口', () => {
+  const editPath = path.join(MP_ROOT, 'pages/owner/card/edit.uvue');
+  const editContent = fs.readFileSync(editPath, 'utf-8');
+
+  assert.ok(editContent.includes('handleGoCases'), 'edit.uvue 必须提供 handleGoCases');
+  assert.ok(editContent.includes('handleGoArticles'), 'edit.uvue 必须提供 handleGoArticles');
+  assert.ok(editContent.includes('pages/owner/card/cases'), 'edit.uvue 必须跳转至 cases 页面');
+  assert.ok(editContent.includes('pages/owner/card/articles'), 'edit.uvue 必须跳转至 articles 页面');
+});
+
+test('9. index.uvue 中必须提供快捷管理入口', () => {
+  const indexPath = path.join(MP_ROOT, 'pages/owner/card/index.uvue');
+  const indexContent = fs.readFileSync(indexPath, 'utf-8');
+
+  assert.ok(indexContent.includes('handleOpenCases'), 'index.uvue 必须提供 handleOpenCases');
+  assert.ok(indexContent.includes('handleOpenArticles'), 'index.uvue 必须提供 handleOpenArticles');
+});
diff --git a/mpuniapp/tests/ui-ux-mobile-pages.test.ts b/mpuniapp/tests/ui-ux-mobile-pages.test.ts
index f504bed..802b3f7 100644
--- a/mpuniapp/tests/ui-ux-mobile-pages.test.ts
+++ b/mpuniapp/tests/ui-ux-mobile-pages.test.ts
@@ -17,6 +17,8 @@ const ALL_PAGES = [
   'pages/owner/card/index.uvue',
   'pages/owner/card/edit.uvue',
   'pages/owner/card/qrcode.uvue',
+  'pages/owner/card/cases.uvue',
+  'pages/owner/card/articles.uvue',
   'pages/owner/radar.uvue',
   'pages/owner/leads.uvue',
   'pages/owner/leads-detail.uvue',
@@ -47,6 +49,8 @@ const FORM_PAGES = [
   'pages/portal/exchange.uvue',
   'pages/common/login.uvue',
   'pages/owner/card/edit.uvue',
+  'pages/owner/card/cases.uvue',
+  'pages/owner/card/articles.uvue',
   'pages/owner/leads-detail.uvue',
   'pages/owner/nfc/scan.uvue',
   'pages/owner/nfc/mode.uvue',
@@ -61,6 +65,8 @@ const BOTTOM_CTA_PAGES = [
   'pages/common/login.uvue',
   'pages/owner/card/edit.uvue',
   'pages/owner/card/qrcode.uvue',
+  'pages/owner/card/cases.uvue',
+  'pages/owner/card/articles.uvue',
   'pages/owner/leads-detail.uvue',
   'pages/owner/nfc/scan.uvue',
   'pages/owner/nfc/mode.uvue',