diff --git a/.serena/memories/project_overview.md b/.serena/memories/project_overview.md
new file mode 100644
index 0000000..ac7e592
--- /dev/null
+++ b/.serena/memories/project_overview.md
@@ -0,0 +1,3 @@
+# 项目概览
+
+`timi-tdesign-mobile` 是 Vue 3 组件与前端通用能力依赖库，使用 TypeScript、Vite、Less、Axios、TDesign Mobile Vue。主要源码在 `src/components`、`src/api`、`src/assets`、`src/types`、`src/store`、`src/utils`，包入口为 `src/index.ts`。仓库也包含 `docs` 子项目。开发环境为 Windows，命令通过 PowerShell 执行。
\ No newline at end of file
diff --git a/.serena/memories/style_and_conventions.md b/.serena/memories/style_and_conventions.md
new file mode 100644
index 0000000..988ce7a
--- /dev/null
+++ b/.serena/memories/style_and_conventions.md
@@ -0,0 +1,7 @@
+# 风格与约定
+
+- Vue 3 Composition API，优先 `<script setup>`；组件标签使用小写 kebab-case。
+- TypeScript 优先明确类型并为公共 API 写 JSDoc；Promise 使用 async/await。
+- Less 使用嵌套规则，属性尽量简写，优先 rem；属性按名称长度排序，类名简短。
+- 文本文件使用 UTF-8；遵循仓库 `.eslintrc.js`。ESLint 9 当前使用旧式 `.eslintrc` 时，设置 `$env:ESLINT_USE_FLAT_CONFIG = 'false'` 后再运行。
+- 不随意重命名公共类型，不无故增加依赖；不添加测试，除非用户明确要求。
\ No newline at end of file
diff --git a/.serena/memories/suggested_commands.md b/.serena/memories/suggested_commands.md
new file mode 100644
index 0000000..69b239f
--- /dev/null
+++ b/.serena/memories/suggested_commands.md
@@ -0,0 +1,8 @@
+# 常用命令（PowerShell）
+
+- `pnpm dev`：启动 docs 开发服务（根脚本转发到 `docs`）。
+- `pnpm build`：运行 `vue-tsc --noEmit` 并打包组件库。
+- `pnpm run build:doc`：构建文档。
+- `pnpm run preview:doc`：预览构建后的文档。
+- ESLint 没有根脚本；旧式配置可用 `$env:ESLINT_USE_FLAT_CONFIG = 'false'; pnpm exec eslint <路径>`。
+- 根 `package.json` 没有测试脚本。查看状态用 `git status --short`，文件搜索用 `rg` / `rg --files`。
\ No newline at end of file
diff --git a/.serena/memories/task_completion.md b/.serena/memories/task_completion.md
new file mode 100644
index 0000000..3bacf1c
--- /dev/null
+++ b/.serena/memories/task_completion.md
@@ -0,0 +1,3 @@
+# 完成任务时
+
+先查看 `git status --short`，保留用户已有改动；遵循 `.eslintrc.js` 和 `AGENTS.md`。通常针对改动文件检查 ESLint 与 TypeScript 语法；与声明生成/打包相关的问题可运行 `pnpm build`。除非用户明确要求，不添加测试或运行测试。
\ No newline at end of file
diff --git a/src/components/card-container/index.ts b/src/components/card-container/index.ts
new file mode 100644
index 0000000..75eea7c
--- /dev/null
+++ b/src/components/card-container/index.ts
@@ -0,0 +1,7 @@
+import view from "./index.vue";
+import { WebToolkit } from "timi-web";
+
+export const CardContainer = WebToolkit.withInstall(view);
+export default CardContainer;
+
+export type { CardContainerProps } from "./type";
diff --git a/src/components/card-container/index.vue b/src/components/card-container/index.vue
new file mode 100644
index 0000000..f26a8a3
--- /dev/null
+++ b/src/components/card-container/index.vue
@@ -0,0 +1,91 @@
+<template>
+	<div class="card-container">
+		<div class="card-title">
+			<h3 v-if="title || $slots.title" class="title">
+				<slot name="title">
+					<span v-text="title" />
+				</slot>
+			</h3>
+			<p v-if="description || $slots.description" class="description">
+				<slot name="description">
+					<span v-text="description" />
+				</slot>
+			</p>
+		</div>
+		<div v-if="$slots.default" class="content">
+			<slot />
+		</div>
+		<div v-if="tips || $slots.tips" class="tips">
+			<slot name="tips">
+				<span v-text="tips" />
+			</slot>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+	title: String,
+	description: String,
+	tips: String
+});
+
+defineSlots<{
+	default?: () => unknown;
+	title?: () => unknown;
+	description?: () => unknown;
+	tips?: () => unknown;
+}>();
+
+defineOptions({
+	name: "CardContainer"
+});
+</script>
+
+<style scoped lang="less">
+.card-container {
+	margin: 0 1rem;
+
+	:deep(.t-cell-group--card) {
+		margin: 0;
+	}
+
+	.card-title {
+
+		.title {
+			margin: 0 .875rem;
+		}
+
+		.description {
+			color: var(--td-text-color-secondary, #52607a);
+			margin: .5rem .875rem;
+			font-size: .875rem;
+		}
+	}
+
+	.content {
+		overflow: hidden;
+		background: var(--td-bg-color-container, #fff);
+		border-radius: 1rem;
+	}
+
+	.tips {
+		color: var(--td-text-color-secondary, #52607a);
+		padding: .25rem 1rem;
+		font-size: .8125rem;
+		line-height: 1.5;
+	}
+}
+
+:global(html.theme-dark) {
+	.card-container {
+		background: rgba(15, 23, 42, .88);
+		box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
+
+		.tips {
+			color: #94a3b8;
+			background: rgba(148, 163, 184, .14);
+		}
+	}
+}
+</style>
diff --git a/src/components/card-container/type.ts b/src/components/card-container/type.ts
new file mode 100644
index 0000000..4c3e963
--- /dev/null
+++ b/src/components/card-container/type.ts
@@ -0,0 +1,6 @@
+/** CardContainer 组件属性。 */
+export interface CardContainerProps {
+	title?: string;
+	description?: string;
+	tips?: string;
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index e1daeef..1d565d8 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -11,6 +11,7 @@ import NotifyEditor from "./notify-editor";
 import NotifyView from "./notify-view";
 import BottomPopup from "./bottom-popup";
 import Space from "./space";
+import CardContainer from "./card-container";
 import {
 	AiChatComposer,
 	AiChatMessageList,
@@ -31,6 +32,7 @@ export default [
 	NotifyView,
 	BottomPopup,
 	Space,
+	CardContainer,
 	AiChatComposer,
 	AiChatMessageList,
 	AiChatPanel,
@@ -50,6 +52,7 @@ export {
 	NotifyView,
 	BottomPopup,
 	Space,
+	CardContainer,
 	AiChatComposer,
 	AiChatMessageList,
 	AiChatPanel,
@@ -91,6 +94,10 @@ export type {
 	SpaceSlots
 } from "./space";
 
+export type {
+	CardContainerProps
+} from "./card-container";
+
 export type {
 	PageTransitionBackground,
 	PageTransitionClass,