+ add files for new UI.

ui/.eslintrc.js

@@ -16,7 +16,9 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     '@typescript-eslint/no-explicit-any': ['off'],
     '@typescript-eslint/no-unused-vars': ['off'],
-    '@typescript-eslint/ban-types': ['off']
+    '@typescript-eslint/ban-types': ['off'],
+    'vue/script-setup-uses-vars': 1,
+    'vue/multi-word-component-names': 0,
   },
   overrides: [
     {

ui/package.json

@@ -11,6 +11,9 @@
     "svgo": "svgo -f src/assets/iconsvg --config=src/assets/iconsvg/svgo.yml"
   },
   "dependencies": {
+    "@iconify-icons/codicon": "^1.2.6",
+    "@iconify-icons/fluent": "^1.2.7",
+    "@iconify/vue": "^3.2.1",
     "@toast-ui/editor": "^2.5.3",
     "ant-design-vue": "^2.2.8",
     "axios": "^0.21.4",
@@ -24,6 +27,7 @@
     "neffos.js": "^0.1.25",
     "nprogress": "^0.2.0",
     "sass-loader": "^12.6.0",
+    "splitpanes": "^3.1.1",
     "vue": "^3.2.18",
     "vue-i18n": "^9.1.7",
     "vue-router": "^4.0.11",
@@ -48,7 +52,7 @@
     "body-parser": "^1.19.0",
     "chokidar": "^3.5.2",
     "eslint": "^6.8.0",
-    "eslint-plugin-vue": "^7.18.0",
+    "eslint-plugin-vue": "^8.7.1",
     "less": "^3.13.1",
     "less-loader": "^5.0.0",
     "lint-staged": "^9.5.0",

ui/src/config/routes.ts

@@ -11,6 +11,7 @@ import { RoutesDataItem } from "@/utils/routes";
 
 import IndexLayoutRoutes from '@/layouts/IndexLayout/routes';
 import IndexLayout from '@/layouts/IndexLayout/index.vue';
+import MainLayout from '@/layouts/MainLayout/Main.vue';
 import BlankLayout from "@/layouts/BlankLayout.vue";
 
 const routes: RoutesDataItem[] = [
@@ -19,6 +20,11 @@ const routes: RoutesDataItem[] = [
     path: '/',
     component: BlankLayout,
     children: [
+      {
+        title: 'main',
+        path: '/main',
+        component: MainLayout
+      },
       {
         title: 'empty',
         path: '/',

ui/src/layouts/MainLayout/Main.vue

+<template>
+  <main id="main" class="column single surface-light relative no-overflow">
+    <Navbar class="flex-none" />
+    <div id="mainContent" class="flex-auto">
+      <Splitpanes id="mainRow">
+        <Pane id="leftPane"><WorkDirPanel /></Pane>
+        <Pane id="centerPane">
+          <Splitpanes id="centerColumn" horizontal>
+            <Pane id="tabsPane">
+              <TabsContainer />
+            </Pane>
+            <Pane id="bottomPane">
+              <LogPanel />
+            </Pane>
+          </Splitpanes>
+        </Pane>
+        <Pane id="rightPane">
+          <ResultListPanel />
+        </Pane>
+      </Splitpanes>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import './style/var.css';
+import './style/helpers.css';
+import './style/main.css';
+import 'splitpanes/dist/splitpanes.css'
+import { Splitpanes, Pane } from 'splitpanes';
+import Navbar from './components/Navbar.vue';
+import WorkDirPanel from './components/WorkDirPanel.vue';
+import LogPanel from './components/LogPanel.vue';
+import TabsContainer from './components/TabsContainer.vue';
+import ResultListPanel from './components/ResultListPanel.vue';
+</script>
+
+<style>
+#main {
+  height: 100vh;
+  width: 100vw;
+}
+#leftPane {
+  min-width: var(--pane-left-min-width, 200px);
+}
+#centerPane {
+  min-width: var(--pane-center-min-width, 100px);
+}
+#rightPane {
+  min-width: var(--pane-right-min-width, 200px);
+}
+#tabsPane {
+  min-width: var(--pane-tabs-min-width, 100px);
+}
+#bottomPane {
+  min-width: var(--pane-bottom-min-width, 200px);
+}
+</style>

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

+<template>
+  <Toolbar>
+    <Button class="rounded pure" icon="search" hint="搜索" />
+    <Button class="rounded pure" icon="settings" hint="设置" />
+  </Toolbar>
+</template>
+
+<script setup lang="ts">
+import Button from './Button.vue';
+import Toolbar from './Toolbar.vue';
+</script>

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

+<template>
+  <ButtonGroup>
+    <Button class="rounded border primary-pale" icon="run-all" label="执行所有选中" />
+    <Button class="rounded border primary-pale padding-0" iconClass="muted" icon="caret-down" iconSize="1em" style="width: 20px" />
+  </ButtonGroup>
+</template>
+
+<script setup lang="ts">
+import Button from './Button.vue';
+import ButtonGroup from './ButtonGroup.vue';
+</script>

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

+<template>
+  <button :class="`btn ${disabled ? 'disabled' : 'state'}${isOnlyIcon ? ' btn-only-icon' : ''}${size ? ` btn-size-${size}` : ''}${active ? ' active' : ''}`" type="button" :title="hint">
+    <Icon v-if="icon" class="btn-icon" :class="iconClass ?? (isOnlyIcon ? '' : 'muted')" :icon="icon" :color="iconColor" :size="iconSize ?? '1.2em'" />
+    <slot>
+      <span class="btn-label" :class="labelClass" v-if="label">{{label}}</span>
+    </slot>
+    <Icon v-if="suffixIcon" class="btn-suffix-icon" :class="suffixIconClass ?? (isOnlyIcon ? '' : 'muted')" :icon="suffixIcon" :color="suffixIconColor" :size="suffixIconSize" />
+  </button>
+</template>
+
+<script setup lang="ts">
+import {defineProps, computed, useSlots} from 'vue';
+import Icon from './Icon.vue';
+
+export interface ButtonProps {
+    icon?: string,
+    iconColor?: string,
+    iconSize?: string | number,
+    iconClass?: string,
+    suffixIcon?: string,
+    suffixIconColor?: string,
+    suffixIconClass?: string,
+    suffixIconSize?: string | number,
+    label?: string,
+    labelClass?: string,
+    size?: '' | 'sm' | 'lg',
+    hint?: string,
+    disabled?: boolean,
+    active?: boolean,
+}
+
+const props = defineProps<ButtonProps>();
+
+const slots = useSlots();
+
+const isOnlyIcon = computed(() => (!props.label && !slots.default && props.icon && !props.suffixIcon));
+</script>
+
+<style scoped>
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  height: calc(2em + 2px);
+  padding: 0 .7em;
+  border-style: solid;
+  border-width: 1px;
+}
+.btn-icon {
+  margin-right: 0.4em;
+  margin-left: -0.2em;
+}
+.btn-suffix-icon {
+  margin-left: 0.4em;
+  margin-right: -0.2em;
+}
+.btn-only-icon {
+  padding: 0;
+  width: calc(2em + 2px);
+}
+.btn-only-icon > .btn-icon {
+  margin: 0;
+}
+</style>

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

+<template>
+  <ButtonList :gap="0" class="btn-group">
+    <slot />
+  </ButtonList>
+</template>
+
+<script setup lang="ts">
+import ButtonList from './ButtonList.vue';
+</script>
+
+<style scoped>
+.btn-group >>> .btn + .btn {
+  margin-left: -1px;
+  position: relative;
+}
+.btn-group >>> .btn:hover,
+.btn-group >>> .btn:focus,
+.btn-group >>> .btn:active {
+  z-index: 1;
+}
+.btn-group >>> .btn:not(:last-child) {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.btn-group >>> .btn:not(:first-child) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+</style>

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

+<template>
+  <div class="btn-list" :style="`gap:${gap ?? 8}px`">
+    <template v-if="buttonPropsList">
+      <Button
+        v-for="({name, ...btnProps}) in buttonPropsList"
+        :key="name"
+        v-bind="btnProps"
+      />
+    </template>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {defineProps, computed, useSlots} from 'vue';
+import Button, {ButtonProps} from './Button.vue';
+
+const props = defineProps<{
+    buttons?: ButtonProps[],
+    defaultBtnClass?: string,
+    defaultIconClass?: string,
+    defaultIconSize?: string | number,
+    defaultSuffixIconClass?: string,
+    defaultSuffixIconSize?: string | number,
+    defaultLabelIconClass?: string,
+    gap?: number
+}>();
+
+const buttonPropsList = computed(() => {
+    if (!props.buttons) {
+        return null;
+    }
+    return props.buttons.map((x, i) => ({
+        name: i,
+        'class': props.defaultBtnClass,
+        iconClass: props.defaultIconClass,
+        suffixIconClass: props.defaultSuffixIconClass,
+        labelClass: props.defaultLabelIconClass,
+        iconSize: props.defaultIconSize,
+        suffixIconSize: props.defaultSuffixIconSize,
+        ...x
+    }));
+});
+</script>
+
+<style scoped>
+.btn-list {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+</style>

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

+<template>
+  <Icon class="icon" :icon="icon" :width="size" :height="size" :color="color" />
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/offline';
+import { defineProps } from 'vue';
+import './icons';
+
+defineProps<{
+    icon: string,
+    size?: number | string,
+    color?: string,
+}>();
+</script>

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

+<template>
+  <Button class="rounded border-light canvas gap-sm" hint="点击查看测试结果">
+    <small class="text-muted">上次结果</small>
+    <small class="text-yellow">1.3s</small>
+    <Icon icon="close-circle" class="text-red space-left" />
+    <small class="text-red">4</small>
+    <Icon icon="checkmark-circle" class="text-green space-left" />
+    <small class="text-green">2</small>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from './Button.vue';
+import Icon from './Icon.vue';
+</script>

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

+<template>
+  <Toolbar>
+    <Button class="rounded pure" icon="panel-left" hint="切换显示左侧边栏" />
+    <Button class="rounded pure" icon="panel-bottom" hint="切换显示底部边栏" />
+    <Button class="rounded pure" icon="panel-right" hint="切换显示右侧边栏" />
+  </Toolbar>
+</template>
+
+<script setup lang="ts">
+import Button from './Button.vue';
+import Toolbar from './Toolbar.vue';
+</script>

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

+<template>
+  <div class="padding muted">
+    （这里是执行日志列表）
+  </div>
+</template>

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

+<template>
+  <Panel title="执行日志">
+    <template #toolbar-buttons>
+      <Button class="rounded pure" hint="折叠所有" icon="subtract-square-multiple" iconSize="1.4em" />
+      <Button class="rounded pure" hint="向上展开" icon="chevron-up" iconSize="1.5em" />
+      <Button class="rounded pure" hint="更多操作" icon="more-vert" />
+    </template>
+    <LogList />
+  </Panel>
+</template>
+
+<script setup lang="ts">
+import Panel from './Panel.vue';
+import Button from './Button.vue';
+import WorkDir from './WorkDir.vue';
+import LogList from './LogList.vue';
+</script>
+
+<style scoped>
+</style>

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

+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="68.6896551724" height="24" viewBox="0 0 166 58" xmlns:v="https://vecta.io/nano"><g fill-rule="nonzero"><path d="M58 29c0 16.018-12.982 29-29 29-4.453 0-8.671-.999-12.442-2.792l-.622-.306A29.15 29.15 0 0 1 3.709 43.215C1.345 39.017 0 34.156 0 29c0-.316 0-.622.031-.937.051-1.987.316-3.913.764-5.778a27.47 27.47 0 0 1 1.335-4.188 28.23 28.23 0 0 1 3.149-5.767c.591-.846 1.233-1.651 1.916-2.425C12.493 3.831 20.298 0 29 0c16.018 0 29 12.982 29 29z" fill="#009e87"/><use xlink:href="#B" fill="#007752"/><path d="M101.397 16.814L80.141 40.063h20.118l-.613 2.278c-.576 2.156-2.565 3.663-4.842 3.663H69.519c-1.038 0-1.789-.38-2.227-1.127-.45-.747-.375-1.494.2-2.229l22.307-23.935H72.284l.826-3.418c.15-.698.538-1.249 1.151-1.666s1.314-.625 2.114-.625h22.77c1.164 0 2.002.429 2.527 1.274.513.857.425 1.69-.275 2.536zM103 17.903l.269-1.071c.269-1.12.905-2.043 1.908-2.757s2.164-1.071 3.485-1.071H135l-.269 1.416c-.208 1.022-.758 1.859-1.639 2.511s-1.932.972-3.13.972h-7.055l-3.778 22.894c-.269 1.526-1.064 2.782-2.384 3.754s-2.861 1.452-4.634 1.452h-2.201l4.634-28.101H103zm44.273 12.701h10.353c1.795 0 3.321-1.298 3.614-3.073l.391-2.376h-13.246l-1.111 5.449zm-4.322-18.588c-1.55 0-2.906.429-4.065 1.273-1.148.857-1.843 1.935-2.088 3.257L132 45.004h3.26c2.967 0 5.506-2.143 6.019-5.069l1.441-8.278h0l1.099-6.514h-.024l1.392-7.812h17.409c.781 0 1.441-.208 2.002-.624.549-.416.903-.943 1.05-1.58l.354-3.122h-23.049v.012z" fill="#000"/><g fill="#fff"><path d="M46.17 38.191H18.26h-4.035l1.916 1.916V21.979l-1.916 1.916h27.91 4.035l-1.916-1.916v18.128c0 2.456 3.821 2.466 3.821 0V21.979a1.95 1.95 0 0 0-1.916-1.916H18.25h-4.035a1.95 1.95 0 0 0-1.916 1.916v18.128a1.95 1.95 0 0 0 1.916 1.916h27.91 4.035c2.466-.01 2.466-3.831.01-3.831z"/><use xlink:href="#C"/><use xlink:href="#C" x="43.765"/><use xlink:href="#C" x="21.888" y="-15.081"/><circle cx="30.141" cy="12.91" r="3.006"/><circle cx="23.131" cy="31.088" r="3.006"/><circle cx="37.203" cy="31.088" r="3.006"/></g><g opacity=".15" fill="#007752"><use xlink:href="#B"/></g></g><defs ><path id="B" d="M47.372 27.767c-1.416 4.035-6.542 5.462-10.648 4.147-6.369-2.018-14.276-8.794-22.917-2.568-7.306 5.268-4.259 14.459.958 17.526 3.903 2.283 9.354 3.006 12.544.296 2.547-2.17 3.933-7.836-.367-9.782-1.467-.662-4.351-.815-5.93 1.039-2.079 2.425-1.294 5.798 1.579 6.868 0 0-5.136-.245-5.808-5.564-1.162-9.038 10.394-10.526 15.886-7.133 9.864 6.093 6.358 19.901-8.315 22.407-2.425.418-5.38.428-8.417-.102A29.15 29.15 0 0 1 3.709 43.215c1.783-.306 2.914-2.007 2.415-4.127-2.721-11.484 1.844-13.43 4.647-15.58 2.792-2.15 1.691-6.175-3.811-5.288-2.7.438-4.697 2.089-6.165 4.066a27.47 27.47 0 0 1 1.335-4.188 28.23 28.23 0 0 1 3.149-5.767c1.946-1.202 4.351-2.058 7.326-2.354 16.986-1.702 19.422 13.236 26.85 15.499 10.322 3.149 5.268-10.811 5.268-10.811s4.759 7.092 2.649 13.104z"/><path id="C" d="M6.399 27.196v8.59 1.213c0 .999.876 1.956 1.916 1.916 1.039-.051 1.916-.836 1.916-1.916v-8.59-1.213c0-.999-.876-1.956-1.916-1.916-1.039.051-1.916.846-1.916 1.916h0z"/></defs></svg>
+</template>
+
+<script setup lang="ts">
+  
+</script>

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

+<template>
+  <nav id="navbar" class="surface row divider gap-lg align-center padding-h">
+    <Logo />
+    <SiteNav class="space-left" />
+    <BatchRunButton class="space-left" />
+    <LastTextInfo />
+    <div class="gap flex-auto"></div>
+    <AppToolbar />
+    <LayoutToolbar />
+    <WindowToolbar />
+  </nav>
+</template>
+
+<script setup lang="ts">
+import Logo from './Logo.vue';
+import WindowToolbar from './WindowToolbar.vue';
+import AppToolbar from './AppToolbar.vue';
+import LayoutToolbar from './LayoutToolbar.vue';
+import SiteNav from './SiteNav.vue';
+import BatchRunButton from './BatchRunButton.vue';
+import LastTextInfo from './LastTextInfo.vue';
+</script>
+
+<style>
+#navbar {
+  height: var(--navbar-height, 40px);
+}
+</style>

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

+<template>
+  <div class="panel">
+    <slot name="heading">
+      <header
+        class="panel-heading state"
+        :class="headerClass"
+        @click="state.collapsed = !state.collapsed"
+      >
+        <slot name="header">
+          <div class="title" :class="titleClass ?? 'strong'">{{title}}</div>
+        </slot>
+        <slot name="toolbar">
+          <Toolbar v-if="toolbar || $slots['toolbar-buttons']" :buttons="toolbar">
+            <slot name="toolbar-buttons"></slot>
+          </Toolbar>
+        </slot>
+      </header>
+    </slot>
+    <template v-if="!state.collapsed">
+      <slot name="body">
+        <div class="panel-body" :class="bodyClass">
+          <slot></slot>
+        </div>
+      </slot>
+      <slot name="footer"></slot>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {defineProps, reactive} from 'vue';
+import Button, {ButtonProps} from './Button.vue';
+import Toolbar from './Toolbar.vue';
+
+const props = defineProps<{
+    title?: string,
+    defaultCollapsed?: boolean,
+    collapsable?: boolean,
+    toolbar?: ButtonProps[],
+    headerClass?: string,
+    titleClass?: string,
+    bodyClass?: string,
+}>();
+
+const state = reactive({collapsed: !!props.defaultCollapsed});
+</script>
+
+<style scoped>
+.panel-heading {
+  height: calc(2em + 4px);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-base);
+}
+.panel-heading >>> .toolbar {
+  margin-right: -6px;
+}
+.panel-body {
+  overflow: auto;
+  overflow: overlay;
+  scroll-behavior: smooth;
+}
+</style>

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

+<template>
+  <div class="padding muted">
+    （这里是测试结果列表）
+  </div>
+</template>

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

+<template>
+  <Panel title="测试结果">
+    <template #toolbar-buttons>
+      <Button class="rounded pure" hint="更多操作" icon="more-vert" />
+    </template>
+    <ResultList />
+  </Panel>
+</template>
+
+<script setup lang="ts">
+import Panel from './Panel.vue';
+import Button from './Button.vue';
+import ResultList from './ResultList.vue';
+</script>
+
+<style scoped>
+</style>

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

+<template>
+  <ButtonGroup class="space-left">
+    <Button class="rounded border lighten-16" icon="zentao" iconColor="var(--color-blue)" iconClass="off-off" label="当前禅道站点" suffix-icon="caret-down"/>
+    <Button class="rounded border lighten-16" icon="cube" label="当前产品" suffix-icon="caret-down" />
+  </ButtonGroup>
+</template>
+
+<script setup lang="ts">
+import Button from './Button.vue';
+import ButtonGroup from './ButtonGroup.vue';
+</script>

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

+<template>
+  <div class="padding muted">
+    （这里是标签页呈现区域）
+  </div>
+</template>

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

+<template>
+  <ButtonList :gap="0" class="toolbar">
+    <slot />
+  </ButtonList>
+</template>
+
+<script setup lang="ts">
+import ButtonList from './ButtonList.vue';
+</script>
+
+<style scoped>
+.toolbar >>> .btn {
+  height: calc(2em);
+  font-size: var(--text-size-sm);
+}
+.toolbar >>> .btn + .btn {
+  margin-left: -2px;
+}
+.toolbar >>> .btn-only-icon {
+  width: calc(2em);
+}
+.toolbar >>> .btn > .icon,
+.toolbar >>> .btn > .btn-label {
+  opacity: .6;
+}
+.toolbar >>> .btn.active {
+  color: var(--color-primary);
+  background-color: var(--color-darken-1);
+}
+.toolbar >>> .btn:hover > .icon,
+.toolbar >>> .btn:focus > .icon,
+.toolbar >>> .btn:active > .icon,
+.toolbar >>> .btn:hover > .btn-label,
+.toolbar >>> .btn:focus > .btn-label,
+.toolbar >>> .btn:active > .btn-label {
+  opacity: 1;
+}
+</style>

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

+<template>
+  <Toolbar>
+    <Button class="rounded pure" icon="fullscreen-on" hint="全屏" />
+    <Button class="rounded pure" icon="window-minimize" hint="最小化" />
+    <Button class="rounded pure" icon="window-maximize" hint="最大化" />
+    <Button class="rounded pure" icon="window-close" hint="关闭窗口" />
+  </Toolbar>
+</template>
+
+<script setup lang="ts">
+import Button from './Button.vue';
+import Toolbar from './Toolbar.vue';
+</script>

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

+<template>
+  <div class="padding muted">
+    （这里是工作目录树状列表）
+  </div>
+</template>

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

+<template>
+  <Panel>
+    <template #header>
+      <ButtonList :gap="2" class="workdir-panel-nav">
+        <Button class="rounded pure padding-sm-h" label="工作目录" labelClass="strong" suffix-icon="caret-down"/>
+        <Button class="rounded pure padding-sm-h" label="按套件" suffix-icon="caret-down" />
+      </ButtonList>
+    </template>
+    <template #toolbar-buttons>
+      <Button class="rounded pure" hint="折叠所有" icon="subtract-square-multiple" iconSize="1.4em" />
+      <Button class="rounded pure" hint="批量选择" icon="select-all-on" />
+      <Button class="rounded pure" hint="添加工作目录" icon="folder-add" />
+      <Button class="rounded pure" hint="更多操作" icon="more-vert" />
+    </template>
+    <WorkDir />
+  </Panel>
+</template>
+
+<script setup lang="ts">
+import Panel from './Panel.vue';
+import Button from './Button.vue';
+import ButtonList from './ButtonList.vue';
+import WorkDir from './WorkDir.vue';
+</script>
+
+<style scoped>
+.workdir-panel-nav {
+  margin-left: -6px;
+}
+</style>

ui/src/layouts/MainLayout/components/icons.ts

+import { addIcon } from '@iconify/vue/dist/offline';
+import lightbulb from '@iconify-icons/fluent/lightbulb-24-regular';
+import caret_down from '@iconify-icons/fluent/caret-down-20-filled';
+import caret_up from '@iconify-icons/fluent/caret-up-24-filled';
+import caret_left from '@iconify-icons/fluent/caret-left-24-filled';
+import caret_right from '@iconify-icons/fluent/caret-right-24-filled';
+import cube from '@iconify-icons/fluent/cube-24-regular';
+import run_all from '@iconify-icons/codicon/run-all';
+import run from '@iconify-icons/codicon/play';
+import close_circle from '@iconify-icons/fluent/dismiss-circle-24-regular';
+import window_maximize from '@iconify-icons/fluent/maximize-24-regular';
+import window_minimize from '@iconify-icons/fluent/minimize-24-regular';
+import window_restore from '@iconify-icons/fluent/panel-separate-window-20-regular';
+import window_close from '@iconify-icons/fluent/dismiss-24-regular';
+import fullscreen_on from '@iconify-icons/fluent/full-screen-maximize-24-regular';
+import fullscreen_off from '@iconify-icons/fluent/full-screen-minimize-24-regular';
+import search from '@iconify-icons/fluent/search-24-regular';
+import settings from '@iconify-icons/fluent/settings-24-regular';
+import more_vert from '@iconify-icons/fluent/more-vertical-24-regular';
+import more_horz from '@iconify-icons/fluent/more-horizontal-24-regular';
+import checkmark from '@iconify-icons/fluent/checkmark-24-regular';
+import checkmark_circle from '@iconify-icons/fluent/checkmark-circle-24-regular';
+import checkbox_checked from '@iconify-icons/fluent/checkbox-checked-24-regular';
+import checkbox_unchecked from '@iconify-icons/fluent/checkbox-unchecked-24-regular';
+import chevron_down from '@iconify-icons/fluent/chevron-down-20-regular';
+import chevron_up from '@iconify-icons/fluent/chevron-up-20-regular';
+import chevron_left from '@iconify-icons/fluent/chevron-left-20-regular';
+import chevron_right from '@iconify-icons/fluent/chevron-right-20-regular';
+import add from '@iconify-icons/fluent/add-24-regular';
+import add_circle from '@iconify-icons/fluent/add-circle-24-regular';
+import square_multiple from '@iconify-icons/fluent/square-multiple-20-regular';
+import add_square_multiple from '@iconify-icons/fluent/add-square-multiple-20-regular';
+import subtract_square_multiple from '@iconify-icons/fluent/subtract-square-multiple-20-regular';
+import dismiss_square_multiple from '@iconify-icons/fluent/dismiss-square-multiple-20-regular';
+import select_all_on from '@iconify-icons/fluent/select-all-on-20-regular';
+import save from '@iconify-icons/fluent/save-20-regular';
+import file from '@iconify-icons/fluent/document-20-regular';
+import file_text from '@iconify-icons/fluent/document-text-20-regular';
+import file_add from '@iconify-icons/fluent/document-add-20-regular';
+import file_multiple from '@iconify-icons/fluent/document-multiple-20-regular';
+import file_arrow_right from '@iconify-icons/fluent/document-arrow-right-20-regular';
+import folder from '@iconify-icons/fluent/folder-20-regular';
+import folder_filled from '@iconify-icons/fluent/folder-20-filled';
+import folder_add from '@iconify-icons/fluent/folder-add-20-regular';
+import folder_add_filled from '@iconify-icons/fluent/folder-add-20-filled';
+import folder_open from '@iconify-icons/fluent/folder-open-20-regular';
+import folder_open_filled from '@iconify-icons/fluent/folder-open-20-filled';
+import panel_left from '@iconify-icons/fluent/panel-left-28-filled';
+import panel_right from '@iconify-icons/fluent/panel-right-28-filled';
+import panel_bottom from '@iconify-icons/fluent/panel-bottom-20-filled';
+import arrow_rotate_clockwise from '@iconify-icons/fluent/arrow-rotate-clockwise-20-regular';
+import error_circle from '@iconify-icons/fluent/error-circle-20-regular';
+import globe from '@iconify-icons/fluent/globe-20-regular';
+import text_box_search from '@iconify-icons/fluent/text-bullet-list-square-search-20-regular';
+
+const zentao = {body: '<path d="M288 576C128.942 576 0 447.058 0 288S128.942 0 288 0s288 128.942 288 288-128.942 288-288 288zm201.464-443.692c13.064 82.797-2.901 117.026-47.894 102.689-67.49-21.506-89.576-163.443-243.957-147.325-151.357 15.821-139.81 196.472-139.81 196.472s18.499-106.332 88.533-118.104c49.958-8.39 59.991 29.828 34.568 50.231-25.385 20.43-66.891 38.909-42.205 148.002 7.183 31.725-22.367 53.597-54.064 29.477-9.791-7.424-15.668-14.276-15.668-14.276s-4.512-6.072 12.063 29.351c44.227 94.486 155.813 118.795 223.357 106.7 133.318-23.867 165.099-155.026 75.473-212.91-49.818-32.187-154.888-18.029-144.344 67.812 6.198 50.453 52.842 52.875 52.842 52.875-26.092-10.171-33.266-42.31-14.421-65.294 14.421-17.581 40.643-16.187 53.959-9.887 39.084 18.471 26.45 72.31 3.257 92.975-28.919 25.742-78.432 18.906-113.933-2.891-47.383-29.09-75.051-116.4-8.686-166.466 78.488-59.194 150.316 5.195 208.225 24.453 37.286 12.404 83.905-1.07 96.747-39.426 19.141-57.151-24.042-124.459-24.042-124.459v.001z" fill="currentColor"/>', width: 576, height: 576};
+
+addIcon('lightbulb', lightbulb);
+addIcon('caret-down', caret_down);
+addIcon('caret-up', caret_up);
+addIcon('caret-left', caret_left);
+addIcon('caret-right', caret_right);
+addIcon('cube', cube);
+addIcon('run-all', run_all);
+addIcon('run', run);
+addIcon('close-circle', close_circle);
+addIcon('window-maximize', window_maximize);
+addIcon('window-minimize', window_minimize);
+addIcon('window-restore', window_restore);
+addIcon('window-close', window_close);
+addIcon('fullscreen-on', fullscreen_on);
+addIcon('fullscreen-off', fullscreen_off);
+addIcon('search', search);
+addIcon('settings', settings);
+addIcon('more-horz', more_horz);
+addIcon('more-vert', more_vert);
+addIcon('checkmark-circle', checkmark_circle);
+addIcon('checkmark', checkmark);
+addIcon('checkbox-checked', checkbox_checked);
+addIcon('checkbox-unchecked', checkbox_unchecked);
+addIcon('zentao', zentao);
+addIcon('chevron-down', chevron_down);
+addIcon('chevron-up', chevron_up);
+addIcon('chevron-left', chevron_left);
+addIcon('add', add);
+addIcon('add-circle', add_circle);
+addIcon('square-multiple', square_multiple);
+addIcon('add-square-multiple', add_square_multiple);
+addIcon('subtract-square-multiple', subtract_square_multiple);
+addIcon('dismiss-square-multiple', dismiss_square_multiple);
+addIcon('select-all-on', select_all_on);
+addIcon('save', save);
+addIcon('file', file);
+addIcon('file-text', file_text);
+addIcon('file-add', file_add);
+addIcon('file-multiple', file_multiple);
+addIcon('file-arrow-right', file_arrow_right);
+addIcon('folder', folder);
+addIcon('folder-filled', folder_filled);
+addIcon('folder-add', folder_add);
+addIcon('folder-add-filled', folder_add_filled);
+addIcon('folder-open', folder_open);
+addIcon('folder-open-filled', folder_open_filled);
+addIcon('panel-left', panel_left);
+addIcon('panel-right', panel_right);
+addIcon('panel-bottom', panel_bottom);
+addIcon('arrow-rotate-clockwise', arrow_rotate_clockwise);
+addIcon('error-circle', error_circle);
+addIcon('globe', globe);
+addIcon('text-box-search', text_box_search);

ui/src/layouts/MainLayout/style/helpers.css

+.disabled {cursor: not-allowed;}
+
+.rounded-xl {border-radius: var(--border-radius-lg, 8px);}
+.rounded-lg {border-radius: var(--border-radius-lg, 4px);}
+.rounded {border-radius: var(--border-radius, 2px);}s
+.rounded-sm {border-radius: var(--border-radius-sm, 1px);}
+
+.state {position: relative; cursor: pointer; outline: none;}
+.state::after {content: ' '; display: block; pointer-events: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; visibility: hidden; background-color: var(--state-hover-bg, rgba(0,0,0,.05)); border-radius: inherit; transition: opacity .2s;}
+.state:hover::after {opacity: 1; visibility: visible;}
+.state:focus-within::after {box-shadow: 0 0 0 2px var(--color-focus); opacity: .75; visibility: visible; background-color: transparent;}
+.state:active::after {opacity: 1; visibility: visible; background-color: var(--state-active-bg, rgba(0,0,0,.1));}
+
+.clickable {cursor: pointer;}
+
+.canvas {background-color: var(--color-canvas);}
+.surface {background-color: var(--color-surface);}
+.surface-light {background-color: var(--color-surface-light);}
+.surface-heavy {background-color: var(--color-surface-heavy);}
+
+.primary {background-color: var(--color-primary); color: var(--color-back); border-color: var(--color-primary)}
+.green {background-color: var(--color-green); color: var(--color-back); border-color: var(--color-green)}
+.red {background-color: var(--color-red); color: var(--color-back); border-color: var(--color-red)}
+.yellow {background-color: var(--color-yellow); color: var(--color-back); border-color: var(--color-yellow)}
+.blue {background-color: var(--color-blue); color: var(--color-back); border-color: var(--color-blue)}
+.purple {background-color: var(--color-purple); color: var(--color-back); border-color: var(--color-purple)}
+.gray {background-color: var(--color-gray); color: var(--color-back); border-color: var(--color-gray)}
+.pure {background-color: transparent; color: inherit; border-color: transparent}
+
+.primary-pale {background-color: var(--color-primary-pale); color: var(--color-primary);}
+.red-pale {background-color: var(--color-red-pale); color: var(--color-red);}
+.yellow-pale {background-color: var(--color-yellow-pale); color: var(--color-yellow);}
+.blue-pale {background-color: var(--color-blue-pale); color: var(--color-blue);}
+.purple-pale {background-color: var(--color-purple-pale); color: var(--color-purple);}
+.gray-pale {background-color: var(--color-gray-pale); color: var(--color-gray);}
+
+.lighten-19 {background-color: var(--color-lighten-19);}
+.lighten-18 {background-color: var(--color-lighten-18);}
+.lighten-17 {background-color: var(--color-lighten-17);}
+.lighten-16 {background-color: var(--color-lighten-16);}
+.lighten-15 {background-color: var(--color-lighten-15);}
+.lighten-14 {background-color: var(--color-lighten-14);}
+.lighten-13 {background-color: var(--color-lighten-13);}
+.lighten-12 {background-color: var(--color-lighten-12);}
+.lighten-11 {background-color: var(--color-lighten-11);}
+.lighten-10 {background-color: var(--color-lighten-10);}
+.lighten-9 {background-color: var(--color-lighten-9);}
+.lighten-8 {background-color: var(--color-lighten-8);}
+.lighten-7 {background-color: var(--color-lighten-7);}
+.lighten-6 {background-color: var(--color-lighten-6);}
+.lighten-5 {background-color: var(--color-lighten-5);}
+.lighten-4 {background-color: var(--color-lighten-4);}
+.lighten-3 {background-color: var(--color-lighten-3);}
+.lighten-2 {background-color: var(--color-lighten-2);}
+.lighten-1 {background-color: var(--color-lighten-1);}
+.lighten-0 {background-color: var(--color-lighten-0);}
+
+.darken-19 {background-color: var(--color-darken-19);}
+.darken-18 {background-color: var(--color-darken-18);}
+.darken-17 {background-color: var(--color-darken-17);}
+.darken-16 {background-color: var(--color-darken-16);}
+.darken-15 {background-color: var(--color-darken-15);}
+.darken-14 {background-color: var(--color-darken-14);}
+.darken-13 {background-color: var(--color-darken-13);}
+.darken-12 {background-color: var(--color-darken-12);}
+.darken-11 {background-color: var(--color-darken-11);}
+.darken-10 {background-color: var(--color-darken-10);}
+.darken-9 {background-color: var(--color-darken-9);}
+.darken-8 {background-color: var(--color-darken-8);}
+.darken-7 {background-color: var(--color-darken-7);}
+.darken-6 {background-color: var(--color-darken-6);}
+.darken-5 {background-color: var(--color-darken-5);}
+.darken-4 {background-color: var(--color-darken-4);}
+.darken-3 {background-color: var(--color-darken-3);}
+.darken-2 {background-color: var(--color-darken-2);}
+.darken-1 {background-color: var(--color-darken-1);}
+.darken-0 {background-color: var(--color-darken-0);}
+
+.text-primary {color: var(--color-primary);}
+.text-red {color: var(--color-red);}
+.text-green {color: var(--color-green);}
+.text-yellow {color: var(--color-yellow);}
+.text-blue {color: var(--color-blue);}
+.text-purple {color: var(--color-purple);}
+.text-gray {color: var(--color-gray);}
+.text-light {color: var(--color-darken-3);}
+.text-muted {color: var(--color-darken-7);}
+.text-deep {color: var(--color-darken-13);}
+
+.text-sm, .small, small {font-size: var(--text-size-sm);}
+.text-md {font-size: var(--text-size-md);}
+.text-lg {font-size: var(--text-size-lg);}
+.text-xl {font-size: var(--text-size-xl);}
+.text-bold, .strong {font-weight: bold;}
+
+.border-primary {border-color: var(--color-primary);}
+.border-red {border-color: var(--color-red);}
+.border-yellow {border-color: var(--color-yellow);}
+.border-blue {border-color: var(--color-blue);}
+.border-purple {border-color: var(--color-purple);}
+.border-gray {border-color: var(--color-gray);}
+.border-heavy {border-color: var(--color-darken-10);}
+.border {border-color: var(--color-darken-5);}
+.border-light {border-color: var(--color-darken-3);}
+
+.divider {border-bottom: 1px solid var(--border-color, #d9d9d9)}
+
+.muted-off {opacity: 1;}
+.muted {opacity: .6;}
+
+.space, .space-bottom {margin-bottom: var(--space-base)!important;}
+.space-top {margin-top: var(--space-base)!important;}
+.space-left {margin-left: var(--space-base)!important;}
+.space-right {margin-right: var(--space-base)!important;}
+.space-all {margin: var(--space-base)!important;}
+.space-h {margin-left: var(--space-base)!important; margin-right: var(--space-base)!important;}
+.space-v {margin-top: var(--space-base)!important; margin-bottom: var(--space-base)!important;}
+
+.space-xs, .space-xs-bottom {margin-bottom: var(--space-xs)!important;}
+.space-xs-top {margin-top: var(--space-xs)!important;}
+.space-xs-left {margin-left: var(--space-xs)!important;}
+.space-xs-right {margin-right: var(--space-xs)!important;}
+.space-xs-all {margin: var(--space-xs)!important;}
+.space-xs-h {margin-left: var(--space-xs)!important; margin-right: var(--space-xs)!important;}
+.space-xs-v {margin-top: var(--space-xs)!important; margin-bottom: var(--space-xs)!important;}
+
+.space-sm, .space-sm-bottom {margin-bottom: var(--space-sm)!important;}
+.space-sm-top {margin-top: var(--space-sm)!important;}
+.space-sm-left {margin-left: var(--space-sm)!important;}
+.space-sm-right {margin-right: var(--space-sm)!important;}
+.space-sm-all {margin: var(--space-sm)!important;}
+.space-sm-h {margin-left: var(--space-sm)!important; margin-right: var(--space-sm)!important;}
+.space-sm-v {margin-top: var(--space-sm)!important; margin-bottom: var(--space-sm)!important;}
+
+.space-lg, .space-lg-bottom {margin-bottom: var(--space-lg)!important;}
+.space-lg-top {margin-top: var(--space-lg)!important;}
+.space-lg-left {margin-left: var(--space-lg)!important;}
+.space-lg-right {margin-right: var(--space-lg)!important;}
+.space-lg-all {margin: var(--space-lg)!important;}
+.space-lg-h {margin-left: var(--space-lg)!important; margin-right: var(--space-lg)!important;}
+.space-lg-v {margin-top: var(--space-lg)!important; margin-bottom: var(--space-lg)!important;}
+
+.space-xl, .space-xl-bottom {margin-bottom: var(--space-xl)!important;}
+.space-xl-top {margin-top: var(--space-xl)!important;}
+.space-xl-left {margin-left: var(--space-xl)!important;}
+.space-xl-right {margin-right: var(--space-xl)!important;}
+.space-xl-all {margin: var(--space-xl)!important;}
+.space-xl-h {margin-left: var(--space-xl)!important; margin-right: var(--space-xl)!important;}
+.space-xl-v {margin-top: var(--space-xl)!important; margin-bottom: var(--space-xl)!important;}
+
+.space-0, .space-0-bottom {margin-bottom: 0!important;}
+.space-0-top {margin-top: 0!important;}
+.space-0-left {margin-left: 0!important;}
+.space-0-right {margin-right: 0!important;}
+.space-0-all {margin: 0!important;}
+.space-0-h {margin-left: 0!important; margin-right: 0!important;}
+.space-0-v {margin-top: 0!important; margin-bottom: 0!important;}
+
+
+.padding-bottom {padding-bottom: var(--space-base)!important;}
+.padding-top {padding-top: var(--space-base)!important;}
+.padding-left {padding-left: var(--space-base)!important;}
+.padding-right {padding-right: var(--space-base)!important;}
+.padding, .padding-all {padding: var(--space-base)!important;}
+.padding-h {padding-left: var(--space-base)!important; padding-right: var(--space-base)!important;}
+.padding-v {padding-top: var(--space-base)!important; padding-bottom: var(--space-base)!important;}
+
+.padding-xs-bottom {padding-bottom: var(--space-xs)!important;}
+.padding-xs-top {padding-top: var(--space-xs)!important;}
+.padding-xs-left {padding-left: var(--space-xs)!important;}
+.padding-xs-right {padding-right: var(--space-xs)!important;}
+.padding-xs-all {padding: var(--space-xs)!important;}
+.padding-xs, .padding-xs-h {padding-left: var(--space-xs)!important; padding-right: var(--space-xs)!important;}
+.padding-xs-v {padding-top: var(--space-xs)!important; padding-bottom: var(--space-xs)!important;}
+
+.padding-sm, .padding-sm-bottom {padding-bottom: var(--space-sm)!important;}
+.padding-sm-top {padding-top: var(--space-sm)!important;}
+.padding-sm-left {padding-left: var(--space-sm)!important;}
+.padding-sm-right {padding-right: var(--space-sm)!important;}
+.padding-sm-all {padding: var(--space-sm)!important;}
+.padding-sm-h {padding-left: var(--space-sm)!important; padding-right: var(--space-sm)!important;}
+.padding-sm-v {padding-top: var(--space-sm)!important; padding-bottom: var(--space-sm)!important;}
+
+.padding-lg-bottom {padding-bottom: var(--space-lg)!important;}
+.padding-lg-top {padding-top: var(--space-lg)!important;}
+.padding-lg-left {padding-left: var(--space-lg)!important;}
+.padding-lg-right {padding-right: var(--space-lg)!important;}
+.padding-lg, .padding-lg-all {padding: var(--space-lg)!important;}
+.padding-lg-h {padding-left: var(--space-lg)!important; padding-right: var(--space-lg)!important;}
+.padding-lg-v {padding-top: var(--space-lg)!important; padding-bottom: var(--space-lg)!important;}
+
+.padding-xl-bottom {padding-bottom: var(--space-xl)!important;}
+.padding-xl-top {padding-top: var(--space-xl)!important;}
+.padding-xl-left {padding-left: var(--space-xl)!important;}
+.padding-xl-right {padding-right: var(--space-xl)!important;}
+.padding-xl, .padding-xl-all {padding: var(--space-xl)!important;}
+.padding-xl-h {padding-left: var(--space-xl)!important; padding-right: var(--space-xl)!important;}
+.padding-xl-v {padding-top: var(--space-xl)!important; padding-bottom: var(--space-xl)!important;}
+
+.padding-0-bottom {padding-bottom: 0!important;}
+.padding-0-top {padding-top: 0!important;}
+.padding-0-left {padding-left: 0!important;}
+.padding-0-right {padding-right: 0!important;}
+.padding-0, .padding-0-all, .no-padding {padding: 0!important;}
+.padding-0-h {padding-left: 0!important; padding-right: 0!important;}
+.padding-0-v {padding-top: 0!important; padding-bottom: 0!important;}
+
+.width-auto {width: auto!important;}
+
+.center {display: grid; place-items: center;}
+
+.row {display: flex; flex-direction: row;}
+.column {display: flex; flex-direction: column;}
+.single {flex-wrap: nowrap;}
+.flex-none {flex: none}
+.flex-auto {flex: auto}
+.justify-start {justify-content: start;}
+.justify-end {justify-content: end;}
+.justify-stretch {justify-content: stretch;}
+.justify-center {justify-content: center;}
+.justify-around {justify-content: space-around;}
+.justify-evenly {justify-content: space-evenly;}
+.justify-between {justify-content: space-between;}
+.align-start {align-items: flex-start;}
+.align-end {align-items: flex-end;}
+.align-stretch {align-items: stretch;}
+.align-center {align-items: center;}
+
+.gap-0 {gap: 0!important;}
+.gap {gap: var(--space-base)!important; min-width: 1px; min-height: 1px;}
+.gap-sm {gap: var(--space-sm)!important;}
+.gap-xl {gap: var(--space-xl)!important;}
+.gap-lg {gap: var(--space-lg)!important;}
+
+.relative {position: relative;}
+
+.no-overflow {overflow: hidden}
+
+.width-full {width: 100%}
+.height-full {height: 100%}

ui/src/layouts/MainLayout/style/main.css

+body {
+    color: var(--text-color, #222);
+    font-size: var(--text-size, 13px);
+}
+
+.splitpanes__splitter {
+    background-color: var(--splitter-color, #d9d9d9);
+    position: relative;
+}
+
+.splitpanes__splitter:before {
+    content: ' ';
+    position: absolute;
+    display: block;
+    left: 0;
+    top: 0;
+    transition: opacity 0.4s;
+    background-color: var(--splitter-hover-color, rgba(0, 0, 0, .05));
+    opacity: 0;
+    z-index: 1;
+}
+
+.splitpanes__splitter:hover:before {
+    opacity: 1;
+}
+
+.splitpanes--vertical>.splitpanes__splitter:before {
+    left: calc(0px - var(--splitter-hover-size, 6px) / 2);
+    right: calc(0px - var(--splitter-hover-size, 6px) / 2);
+    height: 100%;
+}
+
+.splitpanes--horizontal>.splitpanes__splitter:before {
+    top: calc(0px - var(--splitter-hover-size, 6px) / 2);
+    bottom: calc(0px - var(--splitter-hover-size, 6px) / 2);
+    width: 100%;
+}

ui/src/layouts/MainLayout/style/var.css

+:root {
+    --color-canvas: #fff;
+    --color-surface-light: #f3f3f3;
+    --color-surface: #e7e7e7;
+    --color-surface-heavy: #d3d3d3;
+    --color-fore: #222;
+    --color-back: var(--color-canvas);
+    --color-canvas-invert: #000;
+
+    --color-primary: #007751;
+    --color-primary-pale: #f6fffa;
+    --color-green: #22c55e;
+    --color-green-pale: #dcfce7;
+    --color-red: #ff3b30;
+    --color-red-pale: #fee2e2;
+    --color-yellow: #f59e0b;
+    --color-yellow-pale: #fef3c7;
+    --color-blue: #3b82f6;
+    --color-blue-pale: #dbeafe;
+    --color-purple: #9333ea;
+    --color-purple-pale: #f3e8ff;
+    --color-gray: #52525b;
+    --color-gray-pale: #fafafa;
+
+    --color-darken-19: rgba(0, 0, 0, .95);
+    --color-darken-18: rgba(0, 0, 0, .9);
+    --color-darken-17: rgba(0, 0, 0, .85);
+    --color-darken-16: rgba(0, 0, 0, .8);
+    --color-darken-15: rgba(0, 0, 0, .75);
+    --color-darken-14: rgba(0, 0, 0, .7);
+    --color-darken-13: rgba(0, 0, 0, .65);
+    --color-darken-12: rgba(0, 0, 0, .6);
+    --color-darken-11: rgba(0, 0, 0, .55);
+    --color-darken-10: rgba(0, 0, 0, .5);
+    --color-darken-9: rgba(0, 0, 0, .45);
+    --color-darken-8: rgba(0, 0, 0, .4);
+    --color-darken-7: rgba(0, 0, 0, .35);
+    --color-darken-6: rgba(0, 0, 0, .3);
+    --color-darken-5: rgba(0, 0, 0, .25);
+    --color-darken-4: rgba(0, 0, 0, .2);
+    --color-darken-3: rgba(0, 0, 0, .15);
+    --color-darken-2: rgba(0, 0, 0, .1);
+    --color-darken-1: rgba(0, 0, 0, .05);
+    --color-darken-0: rgba(0, 0, 0, .01);
+
+    --color-lighten-19: rgba(255, 255, 255, .95);
+    --color-lighten-18: rgba(255, 255, 255, .9);
+    --color-lighten-17: rgba(255, 255, 255, .85);
+    --color-lighten-16: rgba(255, 255, 255, .8);
+    --color-lighten-15: rgba(255, 255, 255, .75);
+    --color-lighten-14: rgba(255, 255, 255, .7);
+    --color-lighten-13: rgba(255, 255, 255, .65);
+    --color-lighten-12: rgba(255, 255, 255, .6);
+    --color-lighten-11: rgba(255, 255, 255, .55);
+    --color-lighten-10: rgba(255, 255, 255, .5);
+    --color-lighten-9: rgba(255, 255, 255, .45);
+    --color-lighten-8: rgba(255, 255, 255, .4);
+    --color-lighten-7: rgba(255, 255, 255, .35);
+    --color-lighten-6: rgba(255, 255, 255, .3);
+    --color-lighten-5: rgba(255, 255, 255, .25);
+    --color-lighten-4: rgba(255, 255, 255, .2);
+    --color-lighten-3: rgba(255, 255, 255, .15);
+    --color-lighten-2: rgba(255, 255, 255, .1);
+    --color-lighten-1: rgba(255, 255, 255, .05);
+    --color-lighten-0: rgba(255, 255, 255, .01);
+
+    --color-focus: var(--color-blue);
+
+    --text-color: var(--color-fore);
+    --text-size: 13px;
+    --text-size-sm: 12px;
+    --text-size-md: 14px;
+    --text-size-lg: 16px;
+    --text-size-xl: 20px;
+
+    --border-radius: 3px;
+    --border-radius-lg: 4px;
+    --border-radius-sm: 1px;
+    --border-radius-xl: 8px;
+
+    --state-hover-bg: var(--color-darken-1);
+    --state-active-bg: var(--color-darken-2);
+
+    --navbar-height: 40px;
+
+    --space-xs: calc(var(--space-base) / 4);
+    --space-sm: calc(var(--space-base) / 2);
+    --space-base: 8px;
+    --space-lg: calc(var(--space-base) * 3 / 2);
+    --space-xl: calc(var(--space-base) * 2);
+
+    --splitter-color: var(--color-darken-2);
+    --splitter-hover-color: var(--color-darken-1);
+    --splitter-hover-size: 6px;
+
+    --pane-left-min-width: 200px;
+    --pane-center-min-width: 100px;
+    --pane-right-min-width: 200px;
+    --pane-tabs-min-height: 200px;
+    --pane-bottom-min-height: 200px;
+}