switch sites and products

ui/src/layouts/MainLayout/Main.vue

@@ -26,7 +26,9 @@
 import './style/var.css';
 import './style/helpers.css';
 import './style/main.css';
+import './style/grid.less'
 import 'splitpanes/dist/splitpanes.css'
+
 import { Splitpanes, Pane } from 'splitpanes';
 import Navbar from './components/Navbar.vue';
 import WorkDirPanel from './components/WorkDirPanel.vue';

ui/src/layouts/MainLayout/components/Column.vue

+<template>
+  <div :style="colStyle" :class="colClass" class="z-col">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, defineProps} from "vue";
+import {ButtonProps} from "@/layouts/MainLayout/components/Button.vue";
+
+export interface ColumnProps {
+  width?: number,
+  span?: number,
+  offset?: number,
+}
+
+const props = defineProps<ColumnProps>();
+
+const colClass = computed(() => {
+  const classes: string[] = [];
+
+  const span = typeof(props.span) === "undefined" ? -1 : props.span
+
+  if (span > 0) {
+    classes.push(`z-col-${span}`);
+  }
+
+  if (props.offset > 0) {
+    classes.push(`z-col-offset-${props.offset}`);
+  }
+
+  return classes;
+})
+
+const colStyle = computed(() => {
+  const style: Record<string, any> = {};
+
+  const width = typeof(props.width) === "undefined" ? -1 : props.width
+  const span = typeof(props.span) === "undefined" ? -1 : props.span
+
+  if (width > 0) {
+    style.width = `${width}px`;
+  } else if (span === 0) {
+    style.display = 'none';
+  }
+
+  return style
+})
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

ui/src/layouts/MainLayout/components/Form.vue

+<template>
+  <form class="z-form">
+    <slot></slot>
+  </form>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

ui/src/layouts/MainLayout/components/FormItem.vue

+<template>
+  <form class="z-form-item">
+    <slot></slot>
+  </form>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

ui/src/layouts/MainLayout/components/Row.vue

+<template>
+  <div class="z-row">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, defineProps} from "vue";
+import {ColumnProps} from "@/layouts/MainLayout/components/Column.vue";
+
+export interface RowProps {
+  type?: string,
+}
+
+const props = defineProps<RowProps>();
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

ui/src/layouts/MainLayout/components/WorkDir.vue

 <template>
   <div class="workdir padding muted">
+    <Row type="flex">
+      <Column :width="30">1</Column>
+      <Column :span="12" :offset="4">wwwwwww</Column>
+    </Row>
+
     <ScriptTreePage></ScriptTreePage>
   </div>
 </template>
@@ -13,6 +18,9 @@ import {computed, onMounted} from "vue";
 import {ScriptData} from "@/views/script/store";
 import {resizeWidth} from "@/utils/dom";
 
+import Row from "./Row.vue";
+import Column from "./Column.vue";
+
 const { t } = useI18n();
 
 const zentaoStore = useStore<{ Zentao: ZentaoData }>();

ui/src/layouts/MainLayout/style/grid.less

+@z-prefix: z;
+@grid-columns: 24;
+
+.@{z-prefix}-row {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.loop-grid-columns(@index, @class) when (@index > 0) {
+    .@{z-prefix}-col@{class}-@{index} {
+        display: block;
+        flex: 0 0 percentage((@index / @grid-columns));
+        max-width: percentage((@index / @grid-columns));
+    }
+    .@{z-prefix}-col@{class}-offset-@{index} {
+        margin-left: percentage((@index / @grid-columns));
+    }
+    .loop-grid-columns((@index - 1), @class);
+}
+
+.loop-grid-columns(@index, @class) when (@index = 0) {
+    .@{z-prefix}-col@{class}-@{index} {
+        display: none;
+    }
+    .@{z-prefix}-col@{class}-offset-@{index} {
+        margin-left: 0;
+    }
+}
+
+.make-grid(@class: ~'') {
+    .loop-grid-columns(@grid-columns, @class);
+}
+
+.make-grid();
\ No newline at end of file