xlink-tools

⭐️ xlink-tools 集成工具集

• Fx
• Flow
• Background
• Terminal

Fx

<script setup>
import { Fx } from '@xlink-tools/fx'
import { ultraman } from '@xlink-tools/lang-ultraman'
import { oneDark } from '@codemirror/theme-one-dark'

const consoleLog = console.log
const config = reactive({
  disabled: false,
  indentWithTab: true,
  tabSize: 2,
  autofocus: true,
  placeholder: 'input...',
  backgroundColor: 'red',
  language: ultraman(),
  theme: oneDark,
  phrases: 'en-us',
})

function handleReady(payload) {
  consoleLog('handleReady payload:', payload)
}

</script>

<template>
  <Fx
    ref="cm"
    v-model="code"
    class="codemirror"
    :autofocus="config.autofocus"
    :placeholder="config.placeholder"
    :indent-with-tab="config.indentWithTab"
    :tab-size="config.tabSize"
    :disabled="config.disabled"
    :style="{ backgroundColor: config.backgroundColor }"
    :phrases="'en-us'"
    :extensions="[config.language]"
    @ready="handleReady"
    @change="consoleLog('change', $event)"
    @focus="consoleLog('focus', $event)"
    @blur="consoleLog('blur', $event)"
  />
</template>

Flow

<script setup>
import Flow from '@xlink-tools/flow'
import CustomNode from './CustomNode.vue'

const nodes = ref([
  {
    id: '1',
    label: 'node 1',
    type: 'custom'
  },
  {
    id: '2',
    label: 'node 2',
  },
])
</script>

<template>
  <Flow v-model="nodes">
    <template #node-custom="props">
      <CustomNode v-bind="props"/>
    </template>
  </Flow>
</template>

Background

<script setup>
import { Flow } from '@xlink-tools/flow'
import { Background } from '@xlink-tools/background'

const nodes = ref([{ id: '1', label: 'node 1'}])
</script>

<template>
  <Flow v-model="nodes">
    <Background />
  </Flow>
</template>

Terminal

<script setup>
import { reactive } from 'vue'
import Terminal, { vDrag, vResize } from '@xlink-tools/terminal'

const options = reactive({
  fontSize: 12,
  theme: {
    background: '#141414', 
  },
  cursorBlink: true,
})
</script>

<template>
  <div v-resize class="container">
    <div v-drag class="header">Terminal</div>
    <div class="content">
      <Terminal url="ws://192.168.1.126:30001" :xtermOptions="options"/>
    </div>
  </div>
</template>