diff --git a/docs/api/user-client-modules/组件 FloorSelector.md b/docs/api/user-client-modules/组件 FloorSelector.md new file mode 100644 index 0000000..535643c --- /dev/null +++ b/docs/api/user-client-modules/组件 FloorSelector.md @@ -0,0 +1,85 @@ +# FloorSelector 楼层选择器组件 API 文档 + +本文档由 `DeepSeek R1` 模型生成并微调。 + +## 组件描述 + +楼层选择器组件用于在地图浏览或地图选择场景中切换不同楼层，其尺寸与内置状态栏组件匹配，适合在地图浏览时将状态栏替换为此组件。 + +--- + +## Props 属性说明 + +| 属性名 | 类型 | 默认值 | 描述 | +| -------- | ------------ | ------ | -------------------- | +| `floors` | `FloorIds[]` | 必填 | 可选择的楼层 ID 数组 | +| `now` | `number` | - | 当前选中的楼层索引 | + +--- + +## Events 事件说明 + +| 事件名 | 参数类型 | 触发时机 | +| ------------ | ------------------------------------ | ---------------------- | +| `close` | - | 点击关闭按钮时触发 | +| `update` | `(floor: number, floorId: FloorIds)` | 当选中的楼层改变时触发 | +| `update:now` | `(value: number)` | v-model 双向绑定事件 | + +--- + +## Slots 插槽说明 + +无插槽 + +--- + +## Exposed Methods 暴露方法 + +无暴露方法 + +--- + +## 使用示例 + +### 基础用法 - 地图浏览界面 + +```tsx +import { defineComponent, ref } from 'vue'; +import { FloorSelector, STATUS_BAR_HEIGHT } from '@user/client-modules'; + +export const MapBrowserCom = defineComponent(() => { + const currentFloor = ref(0); + + // 可用的楼层列表 + const availableFloors = core.floorIds; + + const handleFloorChange = (floorIndex: number, floorId: string) => { + console.log(`切换到楼层: ${floorId} (索引: ${floorIndex})`); + // 这里可以执行切换楼层的逻辑 + }; + + const handleClose = () => { + console.log('关闭楼层选择器'); + // 返回主界面或执行其他关闭逻辑 + }; + + return () => ( + + ); +}); +``` + +--- + +## 注意事项 + +1. **尺寸匹配**: 组件设计为与内置状态栏尺寸匹配，可直接替换 +2. **索引基准**: 楼层索引从 0 开始 +3. **内置集成**: 通常不需要直接使用，因为样板已内置完整的地图浏览界面 +4. **倒序排列**: 楼层列表会自动倒序排列 diff --git a/docs/api/user-client-modules/组件 Input.md b/docs/api/user-client-modules/组件 Input.md new file mode 100644 index 0000000..210a887 --- /dev/null +++ b/docs/api/user-client-modules/组件 Input.md @@ -0,0 +1,113 @@ +# Input 输入框组件 API 文档 + +本文档由 `DeepSeek` 生成并微调。 + +## 组件描述 + +输入框组件用于接收用户的文本输入，支持单行和多行模式，提供边框样式自定义和实时/确认两种值变化事件。 + +--- + +## Props 属性说明 + +| 属性名 | 类型 | 默认值 | 描述 | +| ------------------------- | ------------------- | ------- | ----------------------------------------------------- | +| `placeholder` | `string` | - | 输入框的提示内容 | +| `value` | `string` | - | 输入框的值 | +| `multiline` | `boolean` | `false` | 是否是多行输入，多行输入时允许换行 | +| `border` | `string` | - | 边框颜色 | +| `circle` | `RectRCircleParams` | - | 边框圆角 | +| `borderWidth` | `number` | - | 边框宽度 | +| `pad` | `number` | - | 内边距 | +| 继承自 `TextContentProps` | - | - | [查看完整属性](./组件%20TextContent#Props%20属性说明) | + +--- + +## Events 事件说明 + +| 事件名 | 参数类型 | 触发时机 | +| -------------- | ----------------- | ---------------------------------------- | +| `change` | `(value: string)` | 当输入框的值被确认时触发，例如失焦时 | +| `input` | `(value: string)` | 当输入框的值发生改变时触发，例如实时输入 | +| `update:value` | `(value: string)` | v-model 双向绑定事件 | + +--- + +## Slots 插槽说明 + +无插槽 + +--- + +## Exposed Methods 暴露方法 + +无暴露方法 + +--- + +## 使用示例 + +### 基础用法 - 单行输入框 + +```tsx +import { defineComponent, ref } from 'vue'; +import { Input } from '@user/client-modules'; + +export const MyCom = defineComponent(() => { + const inputValue = ref(''); + + const handleChange = (value: string) => { + console.log('输入确认:', value); + }; + + const handleInput = (value: string) => { + console.log('实时输入:', value); + }; + + return () => ( + + ); +}); +``` + +### 多行文本输入 + +```tsx +import { defineComponent, ref } from 'vue'; +import { Input } from '@user/client-modules'; + +export const MyCom = defineComponent(() => { + const multilineValue = ref(''); + + return () => ( + + ); +}); +``` + +--- + +## 注意事项 + +1. **事件区别**：`input` 事件在每次输入时触发，`change` 事件在失焦或确认时触发 +2. **多行模式**：启用 `multiline` 后支持换行输入，高度需要足够容纳多行文本 +3. **样式继承**：支持从 `TextContentProps` 继承文本相关样式属性 diff --git a/docs/api/user-client-modules/组件 InputBox.md b/docs/api/user-client-modules/组件 InputBox.md new file mode 100644 index 0000000..a36a22f --- /dev/null +++ b/docs/api/user-client-modules/组件 InputBox.md @@ -0,0 +1,315 @@ +# InputBox 输入对话框组件 API 文档 + +本文档由 `DeepSeek` 生成并微调。 + +## 组件描述 + +输入对话框组件是一个完整的弹出式输入界面，包含提示文本、输入框、确认和取消按钮。适用于需要用户输入文本的交互场景，提供了便捷的异步获取输入方法。 + +--- + +## Props 属性说明 + +| 属性名 | 类型 | 默认值 | 描述 | +| ------------------------- | ---------------- | -------- | ----------------------------------------------------- | +| `loc` | `ElementLocator` | 必填 | 输入框对话框的位置 | +| `input` | `InputProps` | - | 传递给内部 Input 组件的配置参数 | +| `winskin` | `ImageIds` | - | 窗口皮肤图片ID，用于对话框背景绘制 | +| `color` | `CanvasStyle` | - | 对话框背景颜色（未设置 winskin 时生效） | +| `border` | `CanvasStyle` | - | 对话框边框颜色（未设置 winskin 时生效） | +| `pad` | `number` | - | 对话框内部所有元素的内边距 | +| `inputHeight` | `number` | - | 内部输入框区域的高度 | +| `text` | `string` | - | 对话框顶部的提示文本 | +| `yesText` | `string` | `"确认"` | 确认按钮的显示文本 | +| `noText` | `string` | `"取消"` | 取消按钮的显示文本 | +| `selFont` | `Font` | - | 确认/取消按钮的字体样式 | +| `selFill` | `CanvasStyle` | - | 确认/取消按钮的文本颜色 | +| 继承自 `TextContentProps` | - | - | [查看完整属性](./组件%20TextContent#Props%20属性说明) | + +--- + +## Events 事件说明 + +| 事件名 | 参数类型 | 触发时机 | +| -------------- | ----------------- | ------------------------------------------ | +| `confirm` | `(value: string)` | 当确认输入框的内容时触发 | +| `cancel` | `(value: string)` | 当取消时触发 | +| `change` | `(value: string)` | 继承自 Input 组件 - 输入框值被确认时触发 | +| `input` | `(value: string)` | 继承自 Input 组件 - 输入框值实时变化时触发 | +| `update:value` | `(value: string)` | 继承自 Input 组件 - v-model 双向绑定 | + +--- + +## Slots 插槽说明 + +无插槽 + +--- + +## Exposed Methods 暴露方法 + +无暴露方法 + +--- + +## 工具函数 + +### `getInput(controller, text, loc, width, props?)` + +弹出一个输入框并异步返回用户输入的结果。 + +**参数** + +- `controller: IUIMountable` - UI 控制器 +- `text: string` - 提示文本内容 +- `loc: ElementLocator` - 确认框的位置 +- `width: number` - 确认框的宽度 +- `props?: InputBoxProps` - 额外的配置属性（可选） + +**返回值**: `Promise` + +### `getInputNumber(controller, text, loc, width, props?)` + +与 `getInput` 类似，但会将结果转换为数字。 + +**参数**: 同 `getInput` +**返回值**: `Promise` + +--- + +## 使用示例 + +### 基础用法 - 组件形式 + +```tsx +import { defineComponent, ref } from 'vue'; +import { InputBox } from '@user/client-modules'; + +export const MyCom = defineComponent(() => { + const handleConfirm = (value: string) => { + console.log('用户输入:', value); + // 处理用户输入 + }; + + const handleCancel = (value: string) => { + console.log('用户取消输入，最后值为:', value); + }; + + return () => ( + + ); +}); +``` + +### 使用 getInput 工具函数（推荐） + +```tsx +import { defineComponent } from 'vue'; +import { getInput, getInputNumber } from '@user/client-modules'; + +export const MyCom = defineComponent(props => { + const handleGetName = async () => { + // 获取文本输入 + const name = await getInput( + props.controller, + '请输入您的姓名：', + [208, 208, void 0, void 0, 0.5, 0.5], + 280, + { + input: { + placeholder: '姓名' + }, + color: '#f8f8f8' + } + ); + + if (name) { + console.log('用户姓名:', name); + // 处理姓名 + } else { + console.log('用户取消了输入'); + } + }; + + const handleGetAge = async () => { + // 获取数字输入 + const age = await getInputNumber( + props.controller, + '请输入您的年龄：', + [208, 208, void 0, void 0, 0.5, 0.5], + 280 + ); + + if (!isNaN(age)) { + console.log('用户年龄:', age); + // 处理年龄 + } + }; + + return () => ( + + + + + ); +}); +``` + +### 带自定义样式的输入对话框 + +```tsx +import { defineComponent } from 'vue'; +import { getInput } from '@user/client-modules'; + +export const StyledInputCom = defineComponent(props => { + const handleStyledInput = async () => { + const value = await getInput( + props.controller, + '请输入任务描述：', + [240, 240, void 0, void 0, 0.5, 0.5], + 320, + { + text: '任务创建', + input: { + placeholder: '描述任务内容...', + multiline: true, + border: '#4CAF50', + borderWidth: 2, + circle: 8, + pad: 12 + }, + color: '#ffffff', + border: '#4CAF50', + borderWidth: 3, + pad: 20, + inputHeight: 80, + yesText: '创建', + noText: '取消', + selFill: '#4CAF50' + } + ); + + if (value) { + console.log('创建任务:', value); + } + }; + + return () => ( + + ); +}); +``` + +### 游戏中的设置界面 + +```tsx +import { defineComponent } from 'vue'; +import { getInput } from '@user/client-modules'; + +export const SettingsCom = defineComponent(props => { + const settings = ref({ + playerName: '玩家', + serverIP: '127.0.0.1' + }); + + const changePlayerName = async () => { + const newName = await getInput( + props.controller, + '修改玩家名称：', + [240, 240, void 0, void 0, 0.5, 0.5], + 280, + { + input: { + value: settings.value.playerName, + placeholder: '玩家名称', + border: '#FF9800', + borderWidth: 1 + } + } + ); + + if (newName) { + settings.value.playerName = newName; + console.log('玩家名称已更新:', newName); + } + }; + + const changeServerIP = async () => { + const newIP = await getInput( + props.controller, + '修改服务器IP：', + [240, 240, void 0, void 0, 0.5, 0.5], + 280, + { + input: { + value: settings.value.serverIP, + placeholder: '服务器IP地址', + border: '#2196F3', + borderWidth: 1 + } + } + ); + + if (newIP) { + settings.value.serverIP = newIP; + console.log('服务器IP已更新:', newIP); + } + }; + + return () => ( + + + + + ); +}); +``` + +--- + +## 注意事项 + +1. **推荐使用工具函数**: `getInput` 和 `getInputNumber` 提供了更简洁的异步输入获取方式 +2. **宽度设置**: 在使用工具函数时，高度由组件自动计算，只需指定宽度 +3. **皮肤优先级**: 如果设置了 `winskin`，则 `color` 和 `border` 设置将失效 +4. **异步处理**: 工具函数返回 Promise，需要使用 `await` 或 `.then()` 处理结果 +5. **空值处理**: 用户取消输入时，`getInput` 返回空字符串，`getInputNumber` 返回 `NaN` diff --git a/docs/api/user-client-modules/组件 List.md b/docs/api/user-client-modules/组件 List.md new file mode 100644 index 0000000..84c8efc --- /dev/null +++ b/docs/api/user-client-modules/组件 List.md @@ -0,0 +1,184 @@ +# List 列表组件 API 文档 + +本文档由 `DeepSeek` 生成并微调。 + +## 组件描述 + +列表组件用于展示可选择的项目列表，内置滚动条功能和选中项高亮效果。适用于菜单选择、内容导航、设置选项等场景。 + +--- + +## Props 属性说明 + +| 属性名 | 类型 | 默认值 | 描述 | +| ------------ | -------------------- | ------ | ------------------------------- | +| `list` | `[string, string][]` | 必填 | 列表内容，[id, 显示文本] 的数组 | +| `selected` | `string` | 必填 | 当前选中的项 ID | +| `loc` | `ElementLocator` | 必填 | 列表的位置和尺寸 | +| `lineHeight` | `number` | `18` | 每行的高度 | +| `font` | `Font` | - | 列表项的字体样式 | +| `winskin` | `ImageIds` | - | 使用 winskin 作为光标背景 | +| `color` | `CanvasStyle` | - | 使用指定样式作为光标背景 | +| `border` | `CanvasStyle` | - | 使用指定样式作为光标边框 | +| `alphaRange` | `[number, number]` | - | 选择图标的不透明度范围 | + +--- + +## Events 事件说明 + +| 事件名 | 参数类型 | 触发时机 | +| ----------------- | ----------------- | ---------------------- | +| `update` | `(key: string)` | 当用户选中某一项时触发 | +| `update:selected` | `(value: string)` | v-model 双向绑定事件 | + +--- + +## Slots 插槽说明 + +无插槽 + +--- + +## Exposed Methods 暴露方法 + +无暴露方法 + +--- + +## 使用示例 + +### 基础用法 - 简单列表 + +```tsx +import { defineComponent, ref } from 'vue'; +import { List } from '@user/client-modules'; + +export const MyCom = defineComponent(() => { + const selectedItem = ref('item1'); + + // 列表数据：[id, 显示文本] + const listData = [ + ['item1', '第一项'], + ['item2', '第二项'], + ['item3', '第三项'], + ['item4', '第四项'] + ]; + + const handleSelect = (key: string) => { + console.log('选中项:', key); + selectedItem.value = key; + }; + + return () => ( + + ); +}); +``` + +### 带样式的列表 + +```tsx +import { defineComponent, ref } from 'vue'; +import { List } from '@user/client-modules'; + +export const StyledListCom = defineComponent(() => { + const selected = ref('opt2'); + + const options = [ + ['opt1', '开始游戏'], + ['opt2', '游戏设置'], + ['opt3', '帮助文档'], + ['opt4', '关于我们'] + ]; + + return () => ( + + ); +}); +``` + +### 使用皮肤图片的列表 + +```tsx +import { defineComponent, ref } from 'vue'; +import { List } from '@user/client-modules'; + +export const SkinnedListCom = defineComponent(() => { + const currentSelection = ref('cat'); + + const animalList = [ + ['cat', '猫咪'], + ['dog', '小狗'], + ['bird', '小鸟'], + ['fish', '小鱼'] + ]; + + const handleUpdate = key => { + const item = animalList.find(item => item[0] === key)?.[1]; + currentSelection.value = key; + console.log('选择了:', item); + }; + + return () => ( + + ); +}); +``` + +### 长列表滚动示例 + +```tsx +import { defineComponent, ref } from 'vue'; +import { List } from '@user/client-modules'; + +export const ScrollListCom = defineComponent(() => { + const selected = ref('item5'); + + // 创建长列表数据 + const longList = Array.from({ length: 20 }, (_, i) => [ + `item${i + 1}`, + `列表项 ${i + 1}` + ]); + + return () => ( + + ); +}); +``` + +--- + +## 注意事项 + +1. **数据格式**: `list` 属性需要 `[id, text]` 格式的二维数组 +2. **选中状态**: `selected` 需要与列表项中的 id 匹配 +3. **滚动支持**: 自动显示滚动条 +4. **样式优先级**: 如果设置了 `winskin`，则 `color` 和 `border` 设置将失效 diff --git a/docs/api/user-client-modules/组件 ListPage.md b/docs/api/user-client-modules/组件 ListPage.md new file mode 100644 index 0000000..83bb511 --- /dev/null +++ b/docs/api/user-client-modules/组件 ListPage.md @@ -0,0 +1,226 @@ +# ListPage 列表页面组件 API 文档 + +本文档由 `DeepSeek` 生成并微调。 + +## 组件描述 + +列表页面组件结合了列表选择和内容展示功能，左侧显示可选项列表，右侧显示选中项的详细内容。适用于说明文档、设置界面、内容导航等场景。 + +--- + +## Props 属性说明 + +| 属性名 | 类型 | 默认值 | 描述 | +| ------------------ | ---------------- | ------- | --------------------------------------------------- | +| `loc` | `ElementLocator` | 必填 | 组件整体位置和尺寸 | +| `basis` | `number` | - | 列表区域所占比例 | +| `right` | `boolean` | `false` | 列表是否排列在右侧 | +| `close` | `boolean` | `false` | 是否显示关闭按钮 | +| `closeLoc` | `ElementLocator` | - | 关闭按钮的位置（相对于组件定位） | +| 继承自 `ListProps` | - | - | [查看完整属性](./组件%20ListProps#Props%20属性说明) | + +--- + +## Events 事件说明 + +| 事件名 | 参数类型 | 触发时机 | +| ----------------- | ----------------- | ------------------------------------ | +| `close` | - | 当用户点击关闭按钮时触发 | +| `update` | `(key: string)` | 继承自 List - 当用户选中某一项时触发 | +| `update:selected` | `(value: string)` | 继承自 List - v-model 双向绑定事件 | + +--- + +## Slots 插槽说明 + +### `default` + +接收当前选中的 key 并返回对应的内容 + +**参数** + +- `key: string` 当前选中的项 ID + +### 具名插槽 + +以列表项 ID 为名称的具名插槽，用于定义每个选项对应的详细内容 + +--- + +## 使用示例 + +### 基础用法 - 说明文档界面 + +```tsx +import { defineComponent, ref } from 'vue'; +import { ListPage } from '@user/client-modules'; + +export const HelpCom = defineComponent(() => { + const selected = ref('intro'); + + const helpTopics = [ + ['intro', '功能介绍'], + ['usage', '使用方法'], + ['settings', '设置说明'], + ['faq', '常见问题'] + ]; + + return () => ( + + {{ + // 使用具名插槽定义每个选项的内容 + intro: () => ( + + + + + ), + usage: () => ( + + + + + + ), + settings: () => , + faq: () => + }} + + ); +}); +``` + +### 使用默认插槽 + +```tsx +import { defineComponent, ref } from 'vue'; +import { ListPage } from '@user/client-modules'; + +export const SimpleCom = defineComponent(() => { + const selected = ref('item1'); + + const items = [ + ['item1', '选项一'], + ['item2', '选项二'], + ['item3', '选项三'] + ]; + + return () => ( + + {key => ( + + item[0] === key)?.[1]}`} + loc={[0, 0]} + /> + + + )} + + ); +}); +``` + +### 带关闭按钮的弹窗 + +```tsx +import { defineComponent, ref } from 'vue'; +import { ListPage } from '@user/client-modules'; + +export const ModalCom = defineComponent(props => { + const selected = ref('weapon'); + + const gameItems = [ + ['weapon', '武器'], + ['armor', '防具'], + ['potion', '药水'], + ['material', '材料'] + ]; + + const handleClose = () => { + props.controller.close(props.instance); + console.log('关闭物品栏'); + }; + + return () => ( + + {{ + weapon: () => ( + + + + + + + ), + armor: () => , + potion: () => , + material: () => + }} + + ); +}); +``` + +### 列表在右侧的布局 + +```tsx +import { defineComponent, ref } from 'vue'; +import { ListPage } from '@user/client-modules'; + +export const RightListCom = defineComponent(() => { + const selected = ref('profile'); + + const menuItems = [ + ['profile', '个人资料'], + ['security', '安全设置'], + ['privacy', '隐私设置'], + ['notifications', '通知设置'] + ]; + + return () => ( + + {key => ( + + + + + )} + + ); +}); +``` + +--- + +## 注意事项 + +1. **插槽使用**: 可以使用具名插槽（以列表项 ID 为名）或默认插槽来定义内容 +2. **布局控制**: 通过 `basis` 控制列表区域比例，`right` 控制列表位置 +3. **关闭功能**: 设置 `close` 为 `true` 显示关闭按钮，通过 `closeLoc` 自定义位置 +4. **事件处理**: `close` 事件需要手动处理界面关闭逻辑 +5. **内容更新**: 切换列表选项时，右侧内容会自动更新为对应插槽的内容 diff --git a/docs/api/user-client-modules/组件 Thumbnail.md b/docs/api/user-client-modules/组件 Thumbnail.md new file mode 100644 index 0000000..e26c3eb --- /dev/null +++ b/docs/api/user-client-modules/组件 Thumbnail.md @@ -0,0 +1,119 @@ +# Thumbnail 地图缩略图组件 API 文档 + +本文档由 `DeepSeek` 生成并微调。 + +## 组件描述 + +地图缩略图组件用于在游戏界面中显示当前楼层的迷你地图，可展示地图布局、角色位置、伤害区域等信息。适用于小地图显示、地图预览等场景。 + +--- + +## Props 属性说明 + +| 属性名 | 类型 | 默认值 | 描述 | +| ---------- | ---------------- | ------ | -------------------------------------- | +| `loc` | `ElementLocator` | 必填 | 缩略图的位置和尺寸 | +| `floorId` | `FloorIds` | 必填 | 楼层 ID | +| `padStyle` | `CanvasStyle` | - | 缩略图填充样式 | +| `map` | `Block[]` | - | 楼层信息 | +| `hero` | `HeroStatus` | - | 角色信息 | +| `damage` | `boolean` | - | 是否显示地图伤害 | +| `all` | `boolean` | - | 是否完全展示地图（false 时只显示部分） | +| `noHD` | `boolean` | - | 是否使用高清模式 | +| `size` | `number` | - | 缩略图的比例（1 表示与实际地图一致） | + +--- + +## Events 事件说明 + +无事件 + +--- + +## Slots 插槽说明 + +无插槽 + +--- + +## Exposed Methods 暴露方法 + +无暴露方法 + +--- + +## 使用示例 + +### 基础用法 - 显示当前楼层缩略图 + +```tsx +import { defineComponent } from 'vue'; +import { Thumbnail } from '@user/client-modules'; + +export const MiniMapCom = defineComponent(() => { + return () => ( + + ); +}); +``` + +### 带角色位置的小地图 + +```tsx +import { defineComponent } from 'vue'; +import { Thumbnail } from '@user/client-modules'; + +export const GameHUDCom = defineComponent(props => { + const heroStatus: HeroStatus = { + // 角色状态信息 + loc: { x: 100, y: 150 } + // ... 其他角色属性 + }; + + return () => ( + + + + + ); +}); +``` + +### 完整地图预览 + +```tsx +import { defineComponent } from 'vue'; +import { Thumbnail } from '@user/client-modules'; + +export const MapPreviewCom = defineComponent(() => { + return () => ( + + ); +}); +``` + +--- + +## 注意事项 + +1. **楼层标识**: `floorId` 必须与游戏中的楼层标识匹配 +2. **比例控制**: `size` 参数控制缩略图与实际地图的比例关系 +3. **显示范围**: `all` 为 false 时，大地图只会显示当前可视区域 diff --git a/docs/guide/implements/index.md b/docs/guide/implements/index.md index 0b61d21..e1677ae 100644 --- a/docs/guide/implements/index.md +++ b/docs/guide/implements/index.md @@ -36,7 +36,6 @@ - [用函数声明属性](./special.md#拓展-用函数声明属性) - [地图伤害](./special.md#拓展-地图伤害) - [光环属性](./special.md#拓展-光环属性) - - [输出回合数](./special.md#拓展-输出回合数) - [主动技能](./skill.md) - [多技能设计思路](./skill.md#拓展-多技能设计思路) - [战后自动关闭技能](./skill.md#拓展-战后自动关闭技能) diff --git a/docs/guide/implements/special.md b/docs/guide/implements/special.md index 816c2fa..237289b 100644 --- a/docs/guide/implements/special.md +++ b/docs/guide/implements/special.md @@ -105,7 +105,7 @@ export const specials: SpecialDeclaration[] = [ 修改 `damage.ts` `calDamageWithTurn` 中的实现： ```ts -export function calDamageWith( +export function calDamageWithTurn( info: EnemyInfo, hero: Partial ): DamageWithTurn { diff --git a/docs/guide/ui/component.md b/docs/guide/ui/component.md index 4abfe33..4c1e4ba 100644 --- a/docs/guide/ui/component.md +++ b/docs/guide/ui/component.md @@ -536,21 +536,21 @@ export const MyCom = defineComponent(() => { - [ConfirmBox](../../api/user-client-modules/组件%20ConfirmBox.md)：确认框，一般使用 `getConfirm` 接口，不直接使用组件。 - [Choices](../../api/user-client-modules/组件%20Choices.md)：选择框，一般使用 `getChoice` 接口，不直接使用组件。 - +- [FloorSelector](../../api/user-client-modules/组件%20FloorSelector.md)：楼层选择组件，浏览地图左侧的楼层选择就是使用的本组件。 - [图标组件](../../api/user-client-modules/图标组件.md)：一些常用图标。 - - +- [Input](../../api/user-client-modules/组件%20Input.md)：输入组件，可以放到组件内部，可以用于搜索栏等。 +- [InputBox](../../api/user-client-modules/组件%20InputBox.md)：输入框组件，类似于确认框，一般使用 `getInput` 或 `getInputNumber` 接口，不使用本组件。 +- [List](../../api/user-client-modules/组件%20List.md)：列表组件，可以用于展示一列内容。 +- [ListPage](../../api/user-client-modules/组件%20ListPage.md)：左侧是列表，右侧是当前选项对应的详情页，可以用于游戏机制说明等。 - [Progress](../../api/user-client-modules/组件%20Progress.md)：进度条组件，播放录像时右下角的进度条就是本组件。 - [Arrow](../../api/user-client-modules/组件%20Arrow.md)：箭头组件，画一个箭头。 - [ScrollText](../../api/user-client-modules/组件%20ScrollText.md)：滚动文本组件，可以用于长剧情或是 staff 表等。 - [Selection](../../api/user-client-modules/组件%20Selection.md)：选择光标，列表组件的选择光标就是使用的本组件。 - [Background](../../api/user-client-modules/组件%20Background.md)：背景组件，可以设置为纯色或 `winskin`。 - +- [WaitBox](../../api/user-client-modules/组件%20WaitBox.md)：等待框，一般使用 `waitbox` 接口，不直接使用组件。 - [Page](../../api/user-client-modules/组件%20Page.md)：分页组件，本文已经详细讲解。 - [Scroll](../../api/user-client-modules/组件%20Scroll.md)：滚动条组件，本文已经详细讲解。 - [TextContent](../../api/user-client-modules/组件%20TextContent.md)：多行文本组件，本文已经详细讲解。 - [Textbox](../../api/user-client-modules/组件%20Textbox.md)：文本框组件，就是事件的显示文字，一般不会直接用。 - +- [Thumbnail](../../api/user-client-modules/组件%20Thumbnail.md)：缩略图组件，用于展示某个地图的缩略图。 - [Tip](../../api/user-client-modules/组件%20Tip.md)：提示组件，就是左上角的提示，一般不会直接使用。 diff --git a/packages-user/client-modules/src/render/components/thumbnail.tsx b/packages-user/client-modules/src/render/components/thumbnail.tsx index 00312ca..7f9ef51 100644 --- a/packages-user/client-modules/src/render/components/thumbnail.tsx +++ b/packages-user/client-modules/src/render/components/thumbnail.tsx @@ -22,7 +22,7 @@ export interface ThumbnailProps extends SpriteProps { damage?: boolean; all?: boolean; noHD?: boolean; - /** 缩略图的比例 */ + /** 缩略图的比例，1 表示与实际地图大小一致 */ size?: number; }