designer项目开发记录 #

export function setTheme(type: string) {
  const htmlDom = document.documentElement
  const htmlClassNames = htmlDom.classList
  if (type === 'light' && htmlClassNames.contains('dark')) {
    htmlDom.classList.remove('dark')
  }
  if (type === 'dark') {
    htmlDom.classList.add('dark')
  }
}

import type { App, Plugin } from 'vue'
import Text from './text.vue'
Text.install = (app: App) => {
  app.component(Text.name, Text)
  return app
}
export default Text as typeof Text & Plugin

import WdText from './text'
export { WdText }
src/index.ts
import type { App } from 'vue'
import*as components from './component'
export default {
  install(app: App) {
    for (const componentKey in components) {
      const component = [components as any](componentKey)
      if (component.install) {
        app.use(component)
      }
    }
  }
}
export* from './component'

import { resolve } from 'path'
// root
export const root = resolve(__dirname, '../../../ui')
export const compRoot = resolve(root, 'src')
// output
export const output = resolve(root, 'dist')
export const outputEsm = resolve(root, 'es')
export const outputCjs = resolve(root, 'lib')
// package
export const compPackage = resolve(root, 'package.json')

import { compPackage } from './path'
const getCompPackage = () => {
  const { version, dependencies = {}, peerDependencies = {} } = require(compPackage)
  return {
    version,
    dependencies: Object.keys(dependencies),
    peerDependencies: Object.keys(peerDependencies)
  }
}
export const generateExternal = (options: { full: boolean }) => {
  const { dependencies, peerDependencies } = getCompPackage()
  const packages: string[] = peerDependencies
  if (options.full) {
    packages.push(...dependencies)
  }
  return (id: string) => {
    return packages.some((pkg) => id === pkg || (options.full && id.startsWith(`${pkg}/`)))
  }
}

export const generatePaths = () => {
  const paths = [
    ['lodash-es', 'lodash'],
    ['ui/es', 'ui/lib']
  ]
  return (id: string) => {
    for (const [oldPath, newPath] of paths) {
      if (id.startsWith(oldPath)) {
        return id.replace(oldPath, newPath)
      }
    }
    return ''
  }
}

import path from 'path'
import { rollup } from 'rollup'
import { nodeResolve } from '@rollup/plugin-node-resolve'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import esbuild from 'rollup-plugin-esbuild'

import { outputEsm, outputCjs } from '../utils/path'
import { generateExternal, generatePaths } from '../utils/rollup'

export const buildModules = async () => {
  // compile
  const bundle = awa it rollup({
    input: path.resolve(__dirname, '../../src/index.ts'),
    plugins: [vue(), vueJsx(), nodeResolve(), esbuild({ target: 'esnext' })],
    treeshake: false,
    external: generateExternal({ full: true })
  })

  // output
  await Promise.all([
    bundle.write({
      format: 'esm',
      dir: outputEsm,
      exports: undefined,
      preserveModules: true,
      preserveModulesRoot: 'src',
      sourcemap: false,
      entryFileNames: `[name].mjs`
    }),
    bundle.write({
      format: 'cjs',
      paths: generatePaths(),
      dir: outputCjs,
      exports: 'named',
      preserveModules: true,
      preserveModulesRoot: 'src',
      sourcemap: false,
      entryFileNames: `[name].js`
    })
  ])
}

function handleDragStart(e: DragEvent, compItem: ICompItem) {
  e.dataTransfer?.setData('component', compItem.key)
}

function handleDrop(e: DragEvent) {
  e.preventDefault()
  let compKey = e.dataTransfer?.getData('component')
  console.log(compKey)
}
function handleDragover(e: DragEvent) {
  e.preventDefault()
  e.dataTransfer!.dropEffect = 'copy'
}

import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'

export const i18n = createI18n({
  legacy: false,
  locale: 'zh-cn',
  messages: {
    'zh-cn': { ...zh },
    'en-us': { ...en }
  }
})

export default {
  title: '大屏设计器',
  'component-list': '组件列表',
  property: '属性',
  data: '数据',
  event: '事件',
  'canvas-size': '画布大小'
}

export default {
  title: 'Large screen designer',
  'component-list': 'Component list',
  property: 'Property',
  data: 'Data',
  event: 'Event',
  'canvas-size': 'Canvas size'
}

import { i18n } from '@/lang'
app.use(i18n)

import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const TABS = reactive([
  { component: '1', name: computed(() => t('property')) },
  { component: '2', name: computed(() => t('data')) },
  { component: '3', name: computed(() => t('event')) }
])