king-design-analyzer 2.2.0 → 2.2.2

package/docs_for_llm/notification.doc.md

@@ -0,0 +1,214 @@
+# 通知提醒 (Notification)
+
+全局通知组件，用于展示可停留、可关闭的系统级通知信息。支持不同语义类型、展示位置、自定义图标和点击回调，适合成功反馈、系统公告和后台异步任务提醒。
+
+**关键词**: notification, 通知, 提醒, 全局通知, notice
+
+**使用场景**: 系统公告提醒、异步任务完成通知、操作成功或失败反馈
+
+## 导入语句
+```typescript
+import { Notification } from '@king-design/vue';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| title | `Children` | `undefined` | 否 | 通知标题内容 | - | `Notification.notice({ title: '部署完成' })` |
+| content | `Children` | `undefined` | 否 | 通知正文内容 | - | `Notification.notice({ content: '实例已经创建成功' })` |
+| duration | `number` | `5000` | 否 | 通知自动关闭时间，单位 ms；传入 0 表示不自动关闭 | - | `Notification.info({ title: '处理中', duration: 0 })` |
+| type | `"info" | "error" | "success" | "warning" | ""` | `"info"` | 否 | 通知类型 | - | `Notification.success({ title: '发布成功' })` |
+| closable | `boolean` | `true` | 否 | 是否显示关闭按钮 | - | `Notification.notice({ title: '系统公告', closable: false })` |
+| icon | `string | VNode` | `undefined` | 否 | 自定义通知图标 | - | `Notification.notice({ title: '自定义图标', icon: 'k-icon-info' })` |
+| position | `"topRight" | "topLeft" | "bottomRight" | "bottomLeft" | "top" | "bottom"` | `"topRight"` | 否 | 通知展示位置 | - | `Notification.info({ title: '左下角通知', position: 'bottomLeft' })` |
+| className | `string` | `undefined` | 否 | 自定义通知根节点类名 | - | `Notification.notice({ title: '自定义样式', className: 'my-notification' })` |
+| onClick | `(e: MouseEvent) => void` | `undefined` | 否 | 点击通知主体时触发的回调 | - | `Notification.notice({ title: '查看详情', onClick: () => console.log('clicked') })` |
+| onClose | `() => void` | `undefined` | 否 | 通知关闭后触发的回调 | - | `Notification.notice({ title: '关闭回调', onClose: () => console.log('closed') })` |
+
+## 方法 (Methods)
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| notice | 展示一条通知并返回唯一 ID | `props: Partial<NotificationProps>` | `number` |
+| close | 关闭指定 ID 的通知 | `id: number` | `void` |
+| info | 展示普通类型通知 | `props: Partial<NotificationProps>` | `number` |
+| success | 展示成功类型通知 | `props: Partial<NotificationProps>` | `number` |
+| warning | 展示警告类型通知 | `props: Partial<NotificationProps>` | `number` |
+| error | 展示错误类型通知 | `props: Partial<NotificationProps>` | `number` |
+
+### 方法参数说明
+**notice**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| props | `Partial<NotificationProps>` | 是 | - | 通知配置对象 |
+
+调用示例:
+```typescript
+const id = Notification.notice({ title: '部署完成', content: '实例已创建完成' });
+```
+
+**close**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| id | `number` | 是 | - | 由 notice 返回的通知 ID |
+
+调用示例:
+```typescript
+Notification.close(id);
+```
+
+**info**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| props | `Partial<NotificationProps>` | 是 | - | 通知配置对象 |
+
+调用示例:
+```typescript
+Notification.info({ title: '普通提醒', content: '这是一条信息通知' });
+```
+
+**success**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| props | `Partial<NotificationProps>` | 是 | - | 通知配置对象 |
+
+调用示例:
+```typescript
+Notification.success({ title: '保存成功', content: '配置已更新' });
+```
+
+**warning**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| props | `Partial<NotificationProps>` | 是 | - | 通知配置对象 |
+
+调用示例:
+```typescript
+Notification.warning({ title: '余额不足', content: '请尽快续费' });
+```
+
+**error**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| props | `Partial<NotificationProps>` | 是 | - | 通知配置对象 |
+
+调用示例:
+```typescript
+Notification.error({ title: '提交失败', content: '请稍后重试' });
+```
+
+### 方法调用示例
+**notice**
+
+```typescript
+const id = Notification.notice({ title: '部署完成', content: '实例已创建完成' });
+```
+
+**close**
+
+```typescript
+Notification.close(id);
+```
+
+**info**
+
+```typescript
+Notification.info({ title: '普通提醒', content: '这是一条信息通知' });
+```
+
+**success**
+
+```typescript
+Notification.success({ title: '保存成功', content: '配置已更新' });
+```
+
+**warning**
+
+```typescript
+Notification.warning({ title: '余额不足', content: '请尽快续费' });
+```
+
+**error**
+
+```typescript
+Notification.error({ title: '提交失败', content: '请稍后重试' });
+```
+
+## 使用示例
+### 基础通知
+**场景**: 在页面操作完成后展示全局反馈。
+
+点击按钮展示基础通知。
+
+**使用的 API**: 方法: notice
+
+```vue
+<script setup lang="ts">
+import { Button, Notification } from '@king-design/vue';
+
+const openNotification = () => {
+  Notification.notice({
+    title: 'Hello, King Design',
+    content: '这是一条基础通知',
+  });
+};
+</script>
+<template>
+  <Button @click="openNotification">打开通知</Button>
+</template>
+```
+
+### 不同类型
+**场景**: 根据业务结果展示不同语义反馈。
+
+按语义展示不同类型的通知。
+
+**使用的 API**: 属性: type | 方法: info, success, warning, error
+
+```vue
+<script setup lang="ts">
+import { Button, Notification } from '@king-design/vue';
+</script>
+<template>
+  <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+    <Button @click="Notification.info({ title: '普通提醒', content: '这是一条信息通知' })">Info</Button>
+    <Button @click="Notification.success({ title: '发布成功', content: '版本已上线' })">Success</Button>
+    <Button @click="Notification.warning({ title: '容量不足', content: '请及时清理磁盘' })">Warning</Button>
+    <Button @click="Notification.error({ title: '同步失败', content: '网络连接异常' })">Error</Button>
+  </div>
+</template>
+```
+
+### 位置与常驻
+**场景**: 展示需要用户明确感知和手动关闭的通知。
+
+控制通知位置并让通知常驻直到手动关闭。
+
+**使用的 API**: 属性: position, duration | 方法: notice
+
+```vue
+<script setup lang="ts">
+import { Button, Notification } from '@king-design/vue';
+
+const openPinned = () => {
+  Notification.notice({
+    title: '系统公告',
+    content: '该通知位于底部且不会自动关闭',
+    position: 'bottom',
+    duration: 0,
+  });
+};
+</script>
+<template>
+  <Button @click="openPinned">打开常驻通知</Button>
+</template>
+```
+
+## 相关组件
+Message, Dialog
+

package/docs_for_llm/popover.doc.md

@@ -38,6 +38,40 @@ import { Popover } from '@king-design/vue';
 | ok | `@ok` | 点击确认按钮时触发 | `-` | `<Popover @ok="handleOk">` |
 | cancel | `@cancel` | 点击取消按钮时触发 | `-` | `<Popover @cancel="handleCancel">` |
 
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| title | 自定义确认提示标题区域内容。 | `<template #title>...</template>` | `<Popover>
+  <template #title>删除实例</template>
+  <Button>删除</Button>
+</Popover>` |
+| content | 自定义确认提示主体内容。 | `<template #content>...</template>` | `<Popover>
+  <template #content>
+    删除后将无法恢复，请确认操作。
+  </template>
+  <Button>删除</Button>
+</Popover>` |
+| footer | 自定义底部操作区内容，可覆盖默认的确认/取消按钮。 | `<template #footer>...</template>` | `<Popover>
+  <template #footer>
+    <Button size="small">稍后处理</Button>
+    <Button type="danger" size="small">立即删除</Button>
+  </template>
+  <Button>删除</Button>
+</Popover>` |
+
+### 插槽参数说明
+**title**
+
+- 参数结构: 无参数
+
+**content**
+
+- 参数结构: 无参数
+
+**footer**
+
+- 参数结构: 无参数
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 未提供触发元素
 > **错误用法**: `<Popover title="确认" content="内容" />`

package/docs_for_llm/protable.doc.md

@@ -135,6 +135,15 @@ import { ProTable } from '@ksyun-internal/versatile';
 | actions | 表格的左上角操作区 | `<template #actions>...</template>` | `<ProTable><template #actions><Button type="primary">新建</Button></template></ProTable>` |
 | toolbar | 表格的右上角功能区 | `<template #toolbar>...</template>` | `<ProTable><template #toolbar><Button>自定义操作</Button></template></ProTable>` |
 
+### 插槽参数说明
+**actions**
+
+- 参数结构: 无参数
+
+**toolbar**
+
+- 参数结构: 无参数
+
 ## 相关组件
 Table, Search, SearchItems, PaginationPlus
 

package/docs_for_llm/rate.doc.md

@@ -44,6 +44,11 @@ const handleMouseLeave = (e: MouseEvent) => {
 | --- | --- | --- | --- |
 | icon | 自定义每一项评分图标，默认使用星形图标。 | `<template #icon>...</template>` | `<Rate v-model="score"><template #icon><Icon class="k-icon-favorite" /></template></Rate>` |
 
+### 插槽参数说明
+**icon**
+
+- 参数结构: 无参数
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 传入小数评分但未开启 half
 > **错误用法**: `<Rate :value="3.5" />`

package/docs_for_llm/scrollselect.doc.md

@@ -0,0 +1,90 @@
+# 滚动选择器 (ScrollSelect)
+
+滚动选择器组件，通过滚轮、拖拽或点击来选择值。适合时间、年份、数值区间等连续选项场景，也可以通过函数动态生成可选数据。
+
+**关键词**: scrollselect, 滚动选择器, 时间滚轮, year picker
+
+**使用场景**: 年份或月份选择、时间滚轮、连续数值选择
+
+## 导入语句
+```typescript
+import { ScrollSelect } from '@king-design/vue';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `T` | `undefined` | 否 | 当前选中值，可用 v-model 双向绑定 | - | `<ScrollSelect v-model="year" :data="years" />` |
+| count | `number` | `5` | 否 | 可视区域中渲染的数据个数 | - | `<ScrollSelect :count="10" />` |
+| data | `Data<T> = DataItem<T>[] | ((v: T) => DataItem<T>[])` | `[]` | 否 | 可选数据列表，或根据当前值动态生成数据的方法 | - | `<ScrollSelect :data="[{ value: 1, label: '一月' }]" />` |
+| disabled | `boolean` | `false` | 否 | 是否禁用整个选择器 | - | `<ScrollSelect disabled :data="years" />` |
+| disable | `(v: T) => boolean` | `undefined` | 否 | 按值控制单项是否禁用 | - | `<ScrollSelect :disable="(v) => v < 2020" />` |
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| append | 在滚动选择器后追加额外内容，例如单位说明 | `#append` | `<ScrollSelect v-model="hour" :data="hours"><template #append>时</template></ScrollSelect>` |
+
+### 插槽参数说明
+**append**
+
+- 参数结构: 无参数
+
+## 使用示例
+### 基础用法
+**场景**: 在时间和数值选择场景中提供滚动选择交互。
+
+使用静态数据创建一个年份选择器。
+
+**使用的 API**: 属性: value, data
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ScrollSelect } from '@king-design/vue';
+
+const year = ref(2024);
+const years = Array.from({ length: 7 }, (_, index) => ({
+  value: 2021 + index,
+  label: `${2021 + index} 年`,
+}));
+</script>
+<template>
+  <ScrollSelect v-model="year" :data="years" />
+</template>
+```
+
+### 动态生成数据
+**场景**: 在时间滚轮或区间选择中按需生成可见窗口数据。
+
+根据当前选中值动态生成附近的年份选项。
+
+**使用的 API**: 属性: value, count, data | 插槽: append
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ScrollSelect } from '@king-design/vue';
+
+const currentYear = ref(2025);
+const generateYears = (value: number) => {
+  const start = value - 3;
+  return Array.from({ length: 7 }, (_, index) => {
+    const year = start + index;
+    return {
+      value: year,
+      label: `${year} 年`,
+    };
+  });
+};
+</script>
+<template>
+  <ScrollSelect v-model="currentYear" :count="7" :data="generateYears">
+    <template #append>年份</template>
+  </ScrollSelect>
+</template>
+```
+
+## 相关组件
+Datepicker, Timepicker
+

package/docs_for_llm/select.doc.md

@@ -48,6 +48,58 @@ import { Select, Option, OptionGroup } from '@king-design/vue';
 | show | `@show` | 菜单弹出时触发 | `-` | `<Select @show="handleShow">` |
 | hide | `@hide` | 菜单隐藏时触发 | `-` | `<Select @hide="handleHide">` |
 
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| value | 自定义单选模式下的已选值展示内容 | `#value="[value, label]"` | `<Select v-model="selected">
+  <template #value="[value, label]">
+    <span>{{ label }} ({{ value }})</span>
+  </template>
+</Select>` |
+| values | 自定义多选模式下的已选值展示内容 | `#values="[values, labels]"` | `<Select v-model="selectedList" multiple>
+  <template #values="[values, labels]">
+    <span>已选 {{ labels.length }} 项</span>
+  </template>
+</Select>` |
+| prefix | 扩展选择框前缀内容 | `#prefix` | `<Select>
+  <template #prefix>
+    <span class="k-icon-search"></span>
+  </template>
+</Select>` |
+| suffix | 扩展选择框后缀内容 | `#suffix` | `<Select>
+  <template #suffix>
+    <span>自定义</span>
+  </template>
+</Select>` |
+| menu | 自定义整个下拉菜单区域 | `#menu` | `<Select>
+  <template #menu>
+    <div>自定义菜单内容</div>
+  </template>
+</Select>` |
+
+### 插槽参数说明
+**value**
+
+- 参数结构: #value="[value, label]"
+- 参数列表: `value: T`、`label: string`
+
+**values**
+
+- 参数结构: #values="[values, labels]"
+- 参数列表: `values: T[]`、`labels: string[]`
+
+**prefix**
+
+- 参数结构: 无参数
+
+**suffix**
+
+- 参数结构: 无参数
+
+**menu**
+
+- 参数结构: 无参数
+
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
@@ -55,25 +107,162 @@ import { Select, Option, OptionGroup } from '@king-design/vue';
 | hide | 主动关闭选择器下拉面板。 | `-` | `void` |
 | position | 重新计算当前选择器下拉面板的位置。 | `-` | `void` |
 
+### 方法调用示例
+**show**
+
+```typescript
+selectRef.value?.show();
+```
+
+**hide**
+
+```typescript
+selectRef.value?.hide();
+```
+
+**position**
+
+```typescript
+selectRef.value?.position();
+```
+
 ## 子组件 (Sub-Components)
 ### Option
 选项组件，用于定义下拉选项
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | value | `any` | 选中的值 | `<Option value="apple" label="苹果" />` |
 | label | `string` | 展示文案，同时也作为筛选的内容。不存在时使用 children 的文本 | `<Option value="apple" label="苹果" />` |
 | disabled | `boolean` | 是否禁用该项选择 | `<Option value="apple" label="苹果" disabled />` |
 
+#### 组合示例
+##### 禁用选项
+**场景**: 禁用下拉框中的某些选项
+
+禁用特定的选项
+
+**命中的子组件 API**: 属性: value, label, disabled
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Select, Option } from '@king-design/vue';
+
+const selected = ref('');
+</script>
+<template>
+  <Select v-model="selected">
+    <Option value="apple" label="苹果" />
+    <Option value="orange" label="橙子" disabled />
+    <Option value="banana" label="香蕉" />
+  </Select>
+</template>
+```
+
+##### 多选
+**场景**: 创建一个支持多选的下拉框
+
+支持选择多个选项
+
+**命中的子组件 API**: 属性: value, label
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Select, Option } from '@king-design/vue';
+
+const selected = ref<string[]>([]);
+</script>
+<template>
+  <Select v-model="selected" multiple placeholder="请选择多项">
+    <Option value="apple" label="苹果" />
+    <Option value="orange" label="橙子" />
+    <Option value="banana" label="香蕉" />
+    <Option value="grape" label="葡萄" />
+  </Select>
+</template>
+```
+
+##### 可搜索
+**场景**: 创建一个可以通过关键字搜索的下拉框
+
+可以通过输入关键字筛选选项
+
+**命中的子组件 API**: 属性: value, label
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Select, Option } from '@king-design/vue';
+
+const selected = ref('');
+</script>
+<template>
+  <Select v-model="selected" filterable placeholder="输入关键字搜索">
+    <Option value="beijing" label="北京" />
+    <Option value="shanghai" label="上海" />
+    <Option value="guangzhou" label="广州" />
+    <Option value="shenzhen" label="深圳" />
+  </Select>
+</template>
+```
+
 ### OptionGroup
 选项分组组件，用于对选项进行分组展示
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | label | `string | number | VNode` | 分组标签名 | `<OptionGroup label="水果">
   <Option value="apple" label="苹果" />
 </OptionGroup>` |
 
+#### 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| label | 自定义选项分组标题内容。 | `#label` | `<OptionGroup>
+  <template #label>
+    <span>水果分组</span>
+  </template>
+  <Option value="apple" label="苹果" />
+</OptionGroup>` |
+
+##### 插槽参数说明
+**label**
+
+- 参数结构: 无参数
+
+#### 组合示例
+##### 分组选项
+**场景**: 创建带有分组的下拉选择框
+
+使用 OptionGroup 对选项进行分组
+
+**命中的子组件 API**: 属性: label
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Select, Option, OptionGroup } from '@king-design/vue';
+
+const selected = ref('');
+</script>
+<template>
+  <Select v-model="selected" placeholder="请选择">
+    <OptionGroup label="水果">
+      <Option value="apple" label="苹果" />
+      <Option value="orange" label="橙子" />
+    </OptionGroup>
+    <OptionGroup label="蔬菜">
+      <Option value="tomato" label="番茄" />
+      <Option value="potato" label="土豆" />
+    </OptionGroup>
+  </Select>
+</template>
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 多选模式下 value 类型错误
 > **错误用法**: `const selected = ref('');

package/docs_for_llm/skeleton.doc.md

@@ -25,14 +25,49 @@ import { Skeleton, SkeletonItem } from '@king-design/vue';
 | --- | --- | --- | --- |
 | default | 自定义骨架内容。当 loading 为 true 时，默认插槽内容会作为骨架结构渲染。 | `<Skeleton :loading="loading">...</Skeleton>` | `<Skeleton :loading="loading"><div style="display:flex; gap:12px;"><SkeletonItem type="avator" /><div style="flex:1;"><SkeletonItem type="text" /><SkeletonItem type="text" /></div></div></Skeleton>` |
 
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
 ## 子组件 (Sub-Components)
 ### SkeletonItem
 单个骨架项组件，用于组合更复杂的骨架布局。
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | type | `"text" | "avator" | "image" | "button" | "input"` | 骨架项类型。 | `<SkeletonItem type="image" />` |
 
+#### 组合示例
+##### 自定义骨架布局
+**场景**: 自定义复杂卡片骨架
+
+通过 SkeletonItem 自定义表单或卡片骨架。
+
+**命中的子组件 API**: 属性: type
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Skeleton, SkeletonItem } from '@king-design/vue';
+
+const loading = ref(true);
+</script>
+<template>
+  <Skeleton :loading="loading">
+    <div style="display: flex; gap: 12px; align-items: flex-start;">
+      <SkeletonItem type="image" />
+      <div style="flex: 1; display: grid; gap: 8px;">
+        <SkeletonItem type="text" />
+        <SkeletonItem type="input" />
+        <SkeletonItem type="button" />
+      </div>
+    </div>
+  </Skeleton>
+</template>
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 误以为 Skeleton 会自动在 loading=false 时渲染真实内容
 > **错误用法**: `<Skeleton :loading="loading"><RealContent /></Skeleton>`

package/docs_for_llm/slider.doc.md

@@ -55,7 +55,17 @@ const handleChange = (newVal: number, oldVal: number) => {
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| tooltip | 当展示提示气泡，定义气泡的内容，和Tooltip组件行为一样，如果你传入空的内容，则不会展示气泡 | `undefined` | - |
+| tooltip | 当展示提示气泡时，自定义气泡内容；参数为当前滑块值，范围模式下为当前指针对应的值。 | `<template #tooltip="value">...</template>` | `<Slider v-model="value" showTooltip>
+  <template #tooltip="value">
+    {{ value }}%
+  </template>
+</Slider>` |
+
+### 插槽参数说明
+**tooltip**
+
+- 参数结构: <template #tooltip="value">...</template>
+- 参数列表: `value: number | [number, number]`
 
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 范围选择时 value 类型错误

package/docs_for_llm/spin.doc.md

@@ -21,7 +21,16 @@ import { Spin } from '@king-design/vue';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| canvas | 自定义旋转的元素内容 | `undefined` | - |
+| canvas | 自定义旋转的元素内容 | `#canvas` | `<Spin>
+  <template #canvas>
+    自定义canvas内容
+  </template>
+</Spin>` |
+
+### 插槽参数说明
+**canvas**
+
+- 参数结构: 无参数
 
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 使用 center 但父元素无定位