createAttrsForm.tsx 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. import { useEditor } from "@/modules/editor";
  2. import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
  3. import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
  4. import { defineComponent } from "vue";
  5. import { any } from "vue-types";
  6. import { Size } from "../formItems/Size";
  7. import Slider from "../formItems/Slider";
  8. import { createColorOpts } from "./formOpts/createColorOpts";
  9. import { Divider } from "ant-design-vue";
  10. import Align from "./align";
  11. import { css } from "@linaria/core";
  12. export const layoutColumns: ColumnItem[] = [
  13. {
  14. // label: "尺寸",
  15. dataIndex: "layout.size",
  16. component: Size,
  17. props: {
  18. labels: ["宽度", "高度"],
  19. },
  20. },
  21. {
  22. label: "对齐",
  23. component: Align,
  24. dataIndex: "id",
  25. },
  26. // {
  27. // label: "对齐",
  28. // dataIndex: "layout.alignSelf",
  29. // component: Select,
  30. // props: {
  31. // class: "w-full",
  32. // options: [
  33. // { label: "左对齐", value: "start" },
  34. // { label: "居中", value: "center" },
  35. // { label: "右对齐", value: "end" },
  36. // ],
  37. // },
  38. // },
  39. // {
  40. // label: "外边距",
  41. // dataIndex: "layout.margin",
  42. // component: "Input",
  43. // },
  44. // {
  45. // label: "内边距",
  46. // dataIndex: "layout.padding",
  47. // component: "Input",
  48. // },
  49. // {
  50. // label: "偏移矩阵",
  51. // dataIndex: "layout.transformMatrix",
  52. // component: Input,
  53. // },
  54. // {
  55. // label: "上下偏移",
  56. // dataIndex: "layout.offsetY",
  57. // component: "Slider",
  58. // props: {
  59. // min: -375,
  60. // max: 375,
  61. // },
  62. // getValue: (v) => v || 0,
  63. // },
  64. // {
  65. // label: "层级",
  66. // dataIndex: "layout.zIndex",
  67. // component: InputNumber,
  68. // props: {
  69. // min: 0,
  70. // max: 99,
  71. // },
  72. // },
  73. // {
  74. // label: "遮罩",
  75. // dataIndex: "layout.mask",
  76. // component: Select,
  77. // props: {
  78. // class: "w-full",
  79. // options: [{ label: "无", value: "" }].concat(
  80. // Object.entries(compMasks).map(([key, value]) => {
  81. // return {
  82. // label: value.name,
  83. // value: key,
  84. // };
  85. // })
  86. // ),
  87. // },
  88. // },
  89. // {
  90. // label: "锁定",
  91. // dataIndex: "layout.locked",
  92. // component: "Switch",
  93. // },
  94. ];
  95. export const bdColumns: ColumnItem[] = [
  96. {
  97. label: "边框样式",
  98. dataIndex: "layout.border.style",
  99. component: "Select",
  100. props: {
  101. defaultValue: "none",
  102. options: [
  103. { label: "无", value: "none" },
  104. { label: "直线", value: "solid" },
  105. { label: "点状线", value: "dotted" },
  106. { label: "破折线", value: "dashed" },
  107. ],
  108. },
  109. },
  110. {
  111. label: "边框颜色",
  112. dataIndex: "layout.border.color",
  113. ...createColorOpts(),
  114. },
  115. {
  116. label: "边框尺寸",
  117. dataIndex: "layout.border.width",
  118. component: Slider,
  119. props: {
  120. defaultValue: 0,
  121. step: 1,
  122. min: 0,
  123. max: 2,
  124. },
  125. },
  126. {
  127. label: "边框弧度",
  128. dataIndex: "layout.border.radius",
  129. component: Slider,
  130. // isVisible: (value, data) =>
  131. // ["Web3D", "Container", "Video"].includes(data.compKey) ? false : true,
  132. props: {
  133. defaultValue: 0,
  134. min: 0,
  135. max: 100,
  136. step: 1,
  137. },
  138. },
  139. ];
  140. export const bgColumns: ColumnItem[] = [
  141. {
  142. label: "背景颜色",
  143. dataIndex: "layout.background.color",
  144. ...createColorOpts(),
  145. },
  146. {
  147. label: "透明度",
  148. dataIndex: "layout.opacity",
  149. component: Slider,
  150. isVisible: (value, data) =>
  151. ["Web3D", "Video"].includes(data.compKey) ? false : true,
  152. props: {
  153. defaultValue: 1,
  154. min: 0,
  155. max: 1,
  156. step: 0.01,
  157. },
  158. },
  159. // {
  160. // label: "背景图片",
  161. // dataIndex: "background.image",
  162. // component: ImagePicker,
  163. // },
  164. // {
  165. // label: "repeat",
  166. // dataIndex: "background.repeat",
  167. // component: "Select",
  168. // props: {
  169. // options: [
  170. // "repeat",
  171. // "no-repeat",
  172. // "repeat-x",
  173. // "repeat-y",
  174. // "repeat-round",
  175. // "repeat-space",
  176. // ].map((v) => ({ label: v, value: v })),
  177. // },
  178. // },
  179. // {
  180. // label: "position",
  181. // dataIndex: "background.position",
  182. // component: "Select",
  183. // props: {
  184. // options: [
  185. // "center",
  186. // "top",
  187. // "bottom",
  188. // "left",
  189. // "left-top",
  190. // "left-bottom",
  191. // "right",
  192. // "right-top",
  193. // "right-bottom",
  194. // ].map((v) => ({ label: v, value: v })),
  195. // },
  196. // },
  197. // {
  198. // label: "size",
  199. // dataIndex: "background.size",
  200. // component: "Select",
  201. // props: {
  202. // options: ["auto", "cover", "contain"].map((v) => ({
  203. // label: v,
  204. // value: v,
  205. // })),
  206. // },
  207. // },
  208. // {
  209. // label: "clipPath",
  210. // dataIndex: "background.clipPath",
  211. // component: "Input",
  212. // },
  213. ];
  214. export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
  215. return defineComponent({
  216. props: {
  217. component: any<DesignComp>().isRequired,
  218. },
  219. setup(props) {
  220. const { store, actions } = useEditor();
  221. function changeVal(e: { dataIndex: string; value: any }) {
  222. actions.updateCompData(store.currComp, e.dataIndex, e.value);
  223. actions.submitUpdate();
  224. }
  225. return () => {
  226. const { component } = props;
  227. return (
  228. <div class={formStyle}>
  229. {valueColumns.length ? (
  230. <>
  231. <div> <span class="text-white">属性</span></div>
  232. <FormUI
  233. data={component}
  234. columns={valueColumns}
  235. onChange={changeVal}
  236. />
  237. <Divider></Divider>
  238. </>
  239. ) : null}
  240. {columnsUI && <columnsUI component={component} />}
  241. <div><span class="text-white">布局</span></div>
  242. <FormUI
  243. data={component}
  244. columns={layoutColumns}
  245. style={{color: "red"}}
  246. onChange={changeVal}
  247. />
  248. {["Web3D", "Video", "Map"].includes(component.compKey) ? null : (
  249. <>
  250. <Divider></Divider>
  251. <div> <span class="text-white">背景</span> </div>
  252. <FormUI
  253. data={component}
  254. columns={bgColumns}
  255. onChange={changeVal}
  256. />
  257. </>
  258. )}
  259. {["Text", "Image", "Map"].includes(component.compKey) ? (
  260. <>
  261. <Divider></Divider>
  262. <div><span class="text-white">边框</span></div>
  263. <FormUI
  264. data={component}
  265. columns={bdColumns}
  266. onChange={changeVal}
  267. />
  268. </>
  269. ) : null}
  270. </div>
  271. );
  272. };
  273. },
  274. });
  275. }
  276. const formStyle = css`
  277. .item_label {
  278. color: #A9ABAF !important;
  279. }
  280. `