mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-10-30 02:42:57 +08:00
docs: 完整的 API 文档
This commit is contained in:
parent
2e01b3256d
commit
b585c0a1c6
85
docs/api/user-client-modules/组件 FloorSelector.md
Normal file
85
docs/api/user-client-modules/组件 FloorSelector.md
Normal file
@ -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 () => (
|
||||||
|
<FloorSelector
|
||||||
|
loc={[0, 0, 180, STATUS_BAR_HEIGHT]}
|
||||||
|
floors={availableFloors}
|
||||||
|
v-model:now={currentFloor.value}
|
||||||
|
onUpdate={handleFloorChange}
|
||||||
|
onClose={handleClose}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
|
||||||
|
1. **尺寸匹配**: 组件设计为与内置状态栏尺寸匹配，可直接替换
|
||||||
|
2. **索引基准**: 楼层索引从 0 开始
|
||||||
|
3. **内置集成**: 通常不需要直接使用，因为样板已内置完整的地图浏览界面
|
||||||
|
4. **倒序排列**: 楼层列表会自动倒序排列
|
||||||
113
docs/api/user-client-modules/组件 Input.md
Normal file
113
docs/api/user-client-modules/组件 Input.md
Normal file
@ -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 () => (
|
||||||
|
<Input
|
||||||
|
placeholder="请输入文本"
|
||||||
|
v-model={inputValue.value}
|
||||||
|
onChange={handleChange}
|
||||||
|
onInput={handleInput}
|
||||||
|
loc={[208, 208, 300, 40, 0.5, 0.5]}
|
||||||
|
border="#ccc"
|
||||||
|
borderWidth={1}
|
||||||
|
circle={[4]}
|
||||||
|
pad={8}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 多行文本输入
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { defineComponent, ref } from 'vue';
|
||||||
|
import { Input } from '@user/client-modules';
|
||||||
|
|
||||||
|
export const MyCom = defineComponent(() => {
|
||||||
|
const multilineValue = ref('');
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<Input
|
||||||
|
multiline
|
||||||
|
placeholder="请输入多行文本..."
|
||||||
|
v-model={multilineValue.value}
|
||||||
|
loc={[208, 208, 300, 120, 0.5, 0.5]}
|
||||||
|
border="#007acc"
|
||||||
|
borderWidth={2}
|
||||||
|
circle={[8]}
|
||||||
|
pad={12}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
|
||||||
|
1. **事件区别**：`input` 事件在每次输入时触发，`change` 事件在失焦或确认时触发
|
||||||
|
2. **多行模式**：启用 `multiline` 后支持换行输入，高度需要足够容纳多行文本
|
||||||
|
3. **样式继承**：支持从 `TextContentProps` 继承文本相关样式属性
|
||||||
315
docs/api/user-client-modules/组件 InputBox.md
Normal file
315
docs/api/user-client-modules/组件 InputBox.md
Normal file
@ -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<string>`
|
||||||
|
|
||||||
|
### `getInputNumber(controller, text, loc, width, props?)`
|
||||||
|
|
||||||
|
与 `getInput` 类似，但会将结果转换为数字。
|
||||||
|
|
||||||
|
**参数**: 同 `getInput`
|
||||||
|
**返回值**: `Promise<number>`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 使用示例
|
||||||
|
|
||||||
|
### 基础用法 - 组件形式
|
||||||
|
|
||||||
|
```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 () => (
|
||||||
|
<InputBox
|
||||||
|
text="请输入您的姓名："
|
||||||
|
loc={[240, 240, 300, 180, 0.5, 0.5]}
|
||||||
|
input={{
|
||||||
|
placeholder: '在此输入姓名',
|
||||||
|
border: '#007acc',
|
||||||
|
borderWidth: 1,
|
||||||
|
circle: [4],
|
||||||
|
pad: 8
|
||||||
|
}}
|
||||||
|
color="#ffffff"
|
||||||
|
border="#cccccc"
|
||||||
|
borderWidth={2}
|
||||||
|
pad={16}
|
||||||
|
inputHeight={40}
|
||||||
|
yesText="确定"
|
||||||
|
noText="取消"
|
||||||
|
onConfirm={handleConfirm}
|
||||||
|
onCancel={handleCancel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 使用 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 () => (
|
||||||
|
<container>
|
||||||
|
<text
|
||||||
|
loc={[240, 180, void 0, void 0, 0.5, 0.5]}
|
||||||
|
onClick={handleGetName}
|
||||||
|
text="输入姓名"
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
loc={[240, 220, void 0, void 0, 0.5, 0.5]}
|
||||||
|
onClick={handleGetAge}
|
||||||
|
text="输入年龄"
|
||||||
|
/>
|
||||||
|
</container>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 带自定义样式的输入对话框
|
||||||
|
|
||||||
|
```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 () => (
|
||||||
|
<text
|
||||||
|
loc={[240, 240, void 0, void 0, 0.5, 0.5]}
|
||||||
|
onClick={handleStyledInput}
|
||||||
|
text="创建新任务"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 游戏中的设置界面
|
||||||
|
|
||||||
|
```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 () => (
|
||||||
|
<container loc={[240, 240, 300, 200, 0.5, 0.5]}>
|
||||||
|
<text
|
||||||
|
loc={[0, -40, void 0, void 0, 0.5, 0.5]}
|
||||||
|
onClick={changePlayerName}
|
||||||
|
text={`玩家名称: ${settings.value.playerName}`}
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
loc={[0, 0, void 0, void 0, 0.5, 0.5]}
|
||||||
|
onClick={changeServerIP}
|
||||||
|
text={`服务器IP: ${settings.value.serverIP}`}
|
||||||
|
/>
|
||||||
|
</container>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
|
||||||
|
1. **推荐使用工具函数**: `getInput` 和 `getInputNumber` 提供了更简洁的异步输入获取方式
|
||||||
|
2. **宽度设置**: 在使用工具函数时，高度由组件自动计算，只需指定宽度
|
||||||
|
3. **皮肤优先级**: 如果设置了 `winskin`，则 `color` 和 `border` 设置将失效
|
||||||
|
4. **异步处理**: 工具函数返回 Promise，需要使用 `await` 或 `.then()` 处理结果
|
||||||
|
5. **空值处理**: 用户取消输入时，`getInput` 返回空字符串，`getInputNumber` 返回 `NaN`
|
||||||
184
docs/api/user-client-modules/组件 List.md
Normal file
184
docs/api/user-client-modules/组件 List.md
Normal file
@ -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 () => (
|
||||||
|
<List
|
||||||
|
list={listData}
|
||||||
|
v-model:selected={selectedItem.value}
|
||||||
|
loc={[0, 0, 100, 300, 0, 0]}
|
||||||
|
selected={selectedItem.value}
|
||||||
|
onUpdate={handleSelect}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 带样式的列表
|
||||||
|
|
||||||
|
```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 () => (
|
||||||
|
<List
|
||||||
|
list={options}
|
||||||
|
v-model:selected={selected.value}
|
||||||
|
loc={[0, 0, 100, 300, 0, 0]}
|
||||||
|
lineHeight={24}
|
||||||
|
color="#e3f2fd"
|
||||||
|
border="#2196f3"
|
||||||
|
borderWidth={1}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 使用皮肤图片的列表
|
||||||
|
|
||||||
|
```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 () => (
|
||||||
|
<List
|
||||||
|
list={animalList}
|
||||||
|
selected={currentSelection.value}
|
||||||
|
loc={[0, 0, 100, 300, 0, 0]}
|
||||||
|
winskin="winskin.png"
|
||||||
|
lineHeight={20}
|
||||||
|
onUpdate={handleUpdate}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 长列表滚动示例
|
||||||
|
|
||||||
|
```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 () => (
|
||||||
|
<List
|
||||||
|
list={longList}
|
||||||
|
v-model:selected={selected.value}
|
||||||
|
loc={[0, 0, 100, 300, 0, 0]}
|
||||||
|
lineHeight={20}
|
||||||
|
color="#fff3e0"
|
||||||
|
border="#ff9800"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
|
||||||
|
1. **数据格式**: `list` 属性需要 `[id, text]` 格式的二维数组
|
||||||
|
2. **选中状态**: `selected` 需要与列表项中的 id 匹配
|
||||||
|
3. **滚动支持**: 自动显示滚动条
|
||||||
|
4. **样式优先级**: 如果设置了 `winskin`，则 `color` 和 `border` 设置将失效
|
||||||
226
docs/api/user-client-modules/组件 ListPage.md
Normal file
226
docs/api/user-client-modules/组件 ListPage.md
Normal file
@ -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 () => (
|
||||||
|
<ListPage
|
||||||
|
list={helpTopics}
|
||||||
|
v-model:selected={selected.value}
|
||||||
|
loc={[208, 208, 400, 300, 0.5, 0.5]}
|
||||||
|
basis={0.3}
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
// 使用具名插槽定义每个选项的内容
|
||||||
|
intro: () => (
|
||||||
|
<container>
|
||||||
|
<text text="这里是最新版本的功能介绍..." loc={[0, 0]} />
|
||||||
|
<text text="欢迎使用本系统" loc={[0, 40]} />
|
||||||
|
</container>
|
||||||
|
),
|
||||||
|
usage: () => (
|
||||||
|
<container>
|
||||||
|
<text text="使用方法指南" loc={[0, 0]} />
|
||||||
|
<text text="1. 点击左侧菜单选择功能" loc={[0, 40]} />
|
||||||
|
<text text="2. 在右侧查看详细说明" loc={[0, 80]} />
|
||||||
|
</container>
|
||||||
|
),
|
||||||
|
settings: () => <text text="设置说明内容..." loc={[0, 0]} />,
|
||||||
|
faq: () => <text text="常见问题解答..." loc={[0, 0]} />
|
||||||
|
}}
|
||||||
|
</ListPage>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 使用默认插槽
|
||||||
|
|
||||||
|
```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 () => (
|
||||||
|
<ListPage
|
||||||
|
list={items}
|
||||||
|
v-model:selected={selected.value}
|
||||||
|
loc={[208, 208, 350, 250, 0.5, 0.5]}
|
||||||
|
>
|
||||||
|
{key => (
|
||||||
|
<container>
|
||||||
|
<text
|
||||||
|
text={`当前选中: ${items.find(item => item[0] === key)?.[1]}`}
|
||||||
|
loc={[0, 0]}
|
||||||
|
/>
|
||||||
|
<text text={`ID: ${key}`} loc={[0, 30]} />
|
||||||
|
</container>
|
||||||
|
)}
|
||||||
|
</ListPage>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 带关闭按钮的弹窗
|
||||||
|
|
||||||
|
```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 () => (
|
||||||
|
<ListPage
|
||||||
|
list={gameItems}
|
||||||
|
v-model:selected={selected.value}
|
||||||
|
loc={[208, 208, 400, 320, 0.5, 0.5]}
|
||||||
|
close
|
||||||
|
// 设定关闭按钮的位置
|
||||||
|
closeLoc={[0, 300]}
|
||||||
|
basis={0.35}
|
||||||
|
onClose={handleClose}
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
weapon: () => (
|
||||||
|
<container>
|
||||||
|
<text text="武器列表" loc={[0, 0]} />
|
||||||
|
<text text="• 长剑" loc={[0, 30]} />
|
||||||
|
<text text="• 弓箭" loc={[0, 60]} />
|
||||||
|
<text text="• 法杖" loc={[0, 90]} />
|
||||||
|
</container>
|
||||||
|
),
|
||||||
|
armor: () => <text text="防具装备信息..." loc={[0, 0]} />,
|
||||||
|
potion: () => <text text="药水效果说明..." loc={[0, 0]} />,
|
||||||
|
material: () => <text text="合成材料列表..." loc={[0, 0]} />
|
||||||
|
}}
|
||||||
|
</ListPage>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 列表在右侧的布局
|
||||||
|
|
||||||
|
```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 () => (
|
||||||
|
<ListPage
|
||||||
|
list={menuItems}
|
||||||
|
v-model:selected={selected.value}
|
||||||
|
loc={[240, 240, 500, 280, 0.5, 0.5]}
|
||||||
|
right
|
||||||
|
basis={0.4}
|
||||||
|
>
|
||||||
|
{key => (
|
||||||
|
<container>
|
||||||
|
<text text="显示一些内容..." loc={[0, 60]} />
|
||||||
|
<text text="这里是详细的设置内容..." loc={[0, 0]} />
|
||||||
|
</container>
|
||||||
|
)}
|
||||||
|
</ListPage>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
|
||||||
|
1. **插槽使用**: 可以使用具名插槽（以列表项 ID 为名）或默认插槽来定义内容
|
||||||
|
2. **布局控制**: 通过 `basis` 控制列表区域比例，`right` 控制列表位置
|
||||||
|
3. **关闭功能**: 设置 `close` 为 `true` 显示关闭按钮，通过 `closeLoc` 自定义位置
|
||||||
|
4. **事件处理**: `close` 事件需要手动处理界面关闭逻辑
|
||||||
|
5. **内容更新**: 切换列表选项时，右侧内容会自动更新为对应插槽的内容
|
||||||
119
docs/api/user-client-modules/组件 Thumbnail.md
Normal file
119
docs/api/user-client-modules/组件 Thumbnail.md
Normal file
@ -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 () => (
|
||||||
|
<Thumbnail
|
||||||
|
loc={[400, 50, 120, 120, 1, 0]}
|
||||||
|
floorId="main_floor"
|
||||||
|
padStyle="#2c3e50"
|
||||||
|
size={0.1}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 带角色位置的小地图
|
||||||
|
|
||||||
|
```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 () => (
|
||||||
|
<container loc={[400, 50, 150, 150, 1, 0]}>
|
||||||
|
<Thumbnail
|
||||||
|
loc={[0, 0, 150, 150, 0.5, 0.5]}
|
||||||
|
floorId="dungeon_1"
|
||||||
|
hero={heroStatus}
|
||||||
|
padStyle="#34495e"
|
||||||
|
damage
|
||||||
|
size={0.08}
|
||||||
|
/>
|
||||||
|
<text text="小地图" loc={[0, 0]} />
|
||||||
|
</container>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 完整地图预览
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { Thumbnail } from '@user/client-modules';
|
||||||
|
|
||||||
|
export const MapPreviewCom = defineComponent(() => {
|
||||||
|
return () => (
|
||||||
|
<Thumbnail
|
||||||
|
loc={[240, 240, 300, 300, 0.5, 0.5]}
|
||||||
|
floorId="boss_arena"
|
||||||
|
all
|
||||||
|
padStyle="#1a1a1a"
|
||||||
|
size={0.3}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
|
||||||
|
1. **楼层标识**: `floorId` 必须与游戏中的楼层标识匹配
|
||||||
|
2. **比例控制**: `size` 参数控制缩略图与实际地图的比例关系
|
||||||
|
3. **显示范围**: `all` 为 false 时，大地图只会显示当前可视区域
|
||||||
@ -36,7 +36,6 @@
|
|||||||
- [用函数声明属性](./special.md#拓展-用函数声明属性)
|
- [用函数声明属性](./special.md#拓展-用函数声明属性)
|
||||||
- [地图伤害](./special.md#拓展-地图伤害)
|
- [地图伤害](./special.md#拓展-地图伤害)
|
||||||
- [光环属性](./special.md#拓展-光环属性)
|
- [光环属性](./special.md#拓展-光环属性)
|
||||||
- [输出回合数](./special.md#拓展-输出回合数)
|
|
||||||
- [主动技能](./skill.md)
|
- [主动技能](./skill.md)
|
||||||
- [多技能设计思路](./skill.md#拓展-多技能设计思路)
|
- [多技能设计思路](./skill.md#拓展-多技能设计思路)
|
||||||
- [战后自动关闭技能](./skill.md#拓展-战后自动关闭技能)
|
- [战后自动关闭技能](./skill.md#拓展-战后自动关闭技能)
|
||||||
|
|||||||
@ -105,7 +105,7 @@ export const specials: SpecialDeclaration[] = [
|
|||||||
修改 `damage.ts` `calDamageWithTurn` 中的实现：
|
修改 `damage.ts` `calDamageWithTurn` 中的实现：
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
export function calDamageWith(
|
export function calDamageWithTurn(
|
||||||
info: EnemyInfo,
|
info: EnemyInfo,
|
||||||
hero: Partial<HeroStatus>
|
hero: Partial<HeroStatus>
|
||||||
): DamageWithTurn {
|
): DamageWithTurn {
|
||||||
|
|||||||
@ -536,21 +536,21 @@ export const MyCom = defineComponent(() => {
|
|||||||
|
|
||||||
- [ConfirmBox](../../api/user-client-modules/组件%20ConfirmBox.md)：确认框，一般使用 `getConfirm` 接口，不直接使用组件。
|
- [ConfirmBox](../../api/user-client-modules/组件%20ConfirmBox.md)：确认框，一般使用 `getConfirm` 接口，不直接使用组件。
|
||||||
- [Choices](../../api/user-client-modules/组件%20Choices.md)：选择框，一般使用 `getChoice` 接口，不直接使用组件。
|
- [Choices](../../api/user-client-modules/组件%20Choices.md)：选择框，一般使用 `getChoice` 接口，不直接使用组件。
|
||||||
<!-- - [FloorSelector](../../api/user-client-modules/组件%20FloorSelector.md)：楼层选择组件，浏览地图左侧的楼层选择就是使用的本组件。 -->
|
- [FloorSelector](../../api/user-client-modules/组件%20FloorSelector.md)：楼层选择组件，浏览地图左侧的楼层选择就是使用的本组件。
|
||||||
- [图标组件](../../api/user-client-modules/图标组件.md)：一些常用图标。
|
- [图标组件](../../api/user-client-modules/图标组件.md)：一些常用图标。
|
||||||
<!-- - [Input](../../api/user-client-modules/组件%20Input.md)：输入组件，可以放到组件内部，可以用于搜索栏等。
|
- [Input](../../api/user-client-modules/组件%20Input.md)：输入组件，可以放到组件内部，可以用于搜索栏等。
|
||||||
[InputBox](../../api/user-client-modules/组件%20InputBox.md)：输入框组件，类似于确认框，一般使用 `getInput` 或 `getInputNumber` 接口，不使用本组件。 -->
|
- [InputBox](../../api/user-client-modules/组件%20InputBox.md)：输入框组件，类似于确认框，一般使用 `getInput` 或 `getInputNumber` 接口，不使用本组件。
|
||||||
<!-- - [List](../../api/user-client-modules/组件%20List.md)：列表组件，可以用于展示一列内容。
|
- [List](../../api/user-client-modules/组件%20List.md)：列表组件，可以用于展示一列内容。
|
||||||
[ListPage](../../api/user-client-modules/组件%20ListPage.md)：左侧是列表，右侧是当前选项对应的详情页，可以用于游戏机制说明等。 -->
|
- [ListPage](../../api/user-client-modules/组件%20ListPage.md)：左侧是列表，右侧是当前选项对应的详情页，可以用于游戏机制说明等。
|
||||||
- [Progress](../../api/user-client-modules/组件%20Progress.md)：进度条组件，播放录像时右下角的进度条就是本组件。
|
- [Progress](../../api/user-client-modules/组件%20Progress.md)：进度条组件，播放录像时右下角的进度条就是本组件。
|
||||||
- [Arrow](../../api/user-client-modules/组件%20Arrow.md)：箭头组件，画一个箭头。
|
- [Arrow](../../api/user-client-modules/组件%20Arrow.md)：箭头组件，画一个箭头。
|
||||||
- [ScrollText](../../api/user-client-modules/组件%20ScrollText.md)：滚动文本组件，可以用于长剧情或是 staff 表等。
|
- [ScrollText](../../api/user-client-modules/组件%20ScrollText.md)：滚动文本组件，可以用于长剧情或是 staff 表等。
|
||||||
- [Selection](../../api/user-client-modules/组件%20Selection.md)：选择光标，列表组件的选择光标就是使用的本组件。
|
- [Selection](../../api/user-client-modules/组件%20Selection.md)：选择光标，列表组件的选择光标就是使用的本组件。
|
||||||
- [Background](../../api/user-client-modules/组件%20Background.md)：背景组件，可以设置为纯色或 `winskin`。
|
- [Background](../../api/user-client-modules/组件%20Background.md)：背景组件，可以设置为纯色或 `winskin`。
|
||||||
<!-- - [WaitBox](../../api/user-client-modules/组件%20WaitBox.md)：等待框，一般使用 `waitbox` 接口，不直接使用组件。 -->
|
- [WaitBox](../../api/user-client-modules/组件%20WaitBox.md)：等待框，一般使用 `waitbox` 接口，不直接使用组件。
|
||||||
- [Page](../../api/user-client-modules/组件%20Page.md)：分页组件，本文已经详细讲解。
|
- [Page](../../api/user-client-modules/组件%20Page.md)：分页组件，本文已经详细讲解。
|
||||||
- [Scroll](../../api/user-client-modules/组件%20Scroll.md)：滚动条组件，本文已经详细讲解。
|
- [Scroll](../../api/user-client-modules/组件%20Scroll.md)：滚动条组件，本文已经详细讲解。
|
||||||
- [TextContent](../../api/user-client-modules/组件%20TextContent.md)：多行文本组件，本文已经详细讲解。
|
- [TextContent](../../api/user-client-modules/组件%20TextContent.md)：多行文本组件，本文已经详细讲解。
|
||||||
- [Textbox](../../api/user-client-modules/组件%20Textbox.md)：文本框组件，就是事件的显示文字，一般不会直接用。
|
- [Textbox](../../api/user-client-modules/组件%20Textbox.md)：文本框组件，就是事件的显示文字，一般不会直接用。
|
||||||
<!-- - [Thumbnail](../../api/user-client-modules/组件%20Thumbnail.md)：缩略图组件，用于展示某个地图的缩略图。 -->
|
- [Thumbnail](../../api/user-client-modules/组件%20Thumbnail.md)：缩略图组件，用于展示某个地图的缩略图。
|
||||||
- [Tip](../../api/user-client-modules/组件%20Tip.md)：提示组件，就是左上角的提示，一般不会直接使用。
|
- [Tip](../../api/user-client-modules/组件%20Tip.md)：提示组件，就是左上角的提示，一般不会直接使用。
|
||||||
|
|||||||
@ -22,7 +22,7 @@ export interface ThumbnailProps extends SpriteProps {
|
|||||||
damage?: boolean;
|
damage?: boolean;
|
||||||
all?: boolean;
|
all?: boolean;
|
||||||
noHD?: boolean;
|
noHD?: boolean;
|
||||||
/** 缩略图的比例 */
|
/** 缩略图的比例，1 表示与实际地图大小一致 */
|
||||||
size?: number;
|
size?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user