vome-core 0.0.1

package/src/admin/components/vm-markdown.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="vm-markdown" v-html="html" />
+</template>
+
+<script setup lang="ts">
+import DOMPurify from 'dompurify'
+import { marked } from 'marked'
+
+defineOptions({ name: 'vm-markdown' })
+
+const props = defineProps<{
+  source?: string
+}>()
+
+marked.setOptions({
+  gfm: true,
+  breaks: false,
+})
+
+const html = computed(() => {
+  const raw = String(props.source || '')
+  if (!raw.trim()) return ''
+  const parsed = marked.parse(raw, { async: false }) as string
+  return DOMPurify.sanitize(parsed, {
+    USE_PROFILES: { html: true },
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.vm-markdown {
+  color: var(--foreground);
+  font-size: 14px;
+  line-height: 1.7;
+  word-break: break-word;
+
+  :deep(h1),
+  :deep(h2),
+  :deep(h3),
+  :deep(h4) {
+    margin: 1.25em 0 0.55em;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    line-height: 1.35;
+    color: var(--foreground);
+  }
+
+  :deep(h1) {
+    margin-top: 0;
+    font-size: 22px;
+  }
+
+  :deep(h2) {
+    font-size: 18px;
+  }
+
+  :deep(h3) {
+    font-size: 16px;
+  }
+
+  :deep(p) {
+    margin: 0.65em 0;
+  }
+
+  :deep(ul),
+  :deep(ol) {
+    margin: 0.65em 0;
+    padding-left: 1.35em;
+  }
+
+  :deep(li) {
+    margin: 0.28em 0;
+  }
+
+  :deep(a) {
+    color: var(--brand);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  :deep(strong) {
+    font-weight: 700;
+  }
+
+  :deep(code) {
+    padding: 0.12em 0.4em;
+    border-radius: 6px;
+    background: color-mix(in srgb, var(--foreground) 8%, var(--background));
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 0.88em;
+  }
+
+  :deep(pre) {
+    margin: 0.85em 0;
+    overflow: auto;
+    padding: 14px 16px;
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--foreground) 5%, var(--muted));
+    line-height: 1.55;
+  }
+
+  :deep(pre code) {
+    padding: 0;
+    border-radius: 0;
+    background: transparent;
+    font-size: 12.5px;
+  }
+
+  :deep(blockquote) {
+    margin: 0.85em 0;
+    padding: 0.2em 0 0.2em 12px;
+    border-left: 3px solid var(--brand);
+    color: var(--muted-foreground);
+  }
+
+  :deep(hr) {
+    margin: 1.25em 0;
+    border: none;
+    border-top: 1px solid var(--border);
+  }
+
+  :deep(table) {
+    width: 100%;
+    margin: 0.85em 0;
+    border-collapse: collapse;
+    font-size: 13px;
+  }
+
+  :deep(th),
+  :deep(td) {
+    padding: 8px 10px;
+    border: 1px solid var(--border);
+    text-align: left;
+  }
+
+  :deep(th) {
+    background: color-mix(in srgb, var(--foreground) 4%, var(--background));
+    font-weight: 650;
+  }
+}
+</style>

package/src/admin/components/vm-ri-icon.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({ name: 'vm-ri-icon' })
+
+const props = withDefaults(
+  defineProps<{
+    /** remixicon 名，如 ri-home-line；可省略 ri- 前缀 */
+    name: string
+    class?: string
+  }>(),
+  {},
+)
+
+const cls = computed(() => {
+  const n = props.name.startsWith('ri-') ? props.name : `ri-${props.name}`
+  return cn(n, props.class)
+})
+</script>
+
+<template>
+  <i :class="cls" aria-hidden="true" />
+</template>

package/src/admin/components/vm-role-picker.vue

@@ -0,0 +1,314 @@
+<template>
+  <div ref="rootRef" class="vm-role-picker">
+    <button
+      ref="triggerRef"
+      type="button"
+      class="vm-role-picker__trigger"
+      :class="{ 'is-open': open, 'is-disabled': disabled }"
+      :disabled="disabled"
+      @click="togglePanel"
+    >
+      <span v-if="displayText" class="vm-role-picker__value">{{ displayText }}</span>
+      <span v-else class="vm-role-picker__ph">{{ placeholder }}</span>
+      <i
+        v-if="clearable && picked.size"
+        class="ri-close-circle-fill vm-role-picker__clear"
+        @click.stop="clear"
+      />
+      <i class="ri-arrow-down-s-line vm-role-picker__caret" />
+    </button>
+
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="panelRef"
+        class="vm-role-picker__panel vm-dialog-float"
+        :style="panelStyle"
+      >
+        <div v-if="loading" class="vm-role-picker__state">加载中…</div>
+        <div v-else-if="!options.length" class="vm-role-picker__state">暂无角色</div>
+        <div v-else class="vm-role-picker__list vm-scroll">
+          <label
+            v-for="opt in options"
+            :key="String(opt.id)"
+            class="vm-role-picker__item"
+          >
+            <Checkbox
+              :model-value="picked.has(Number(opt.id))"
+              :disabled="disabled"
+              @update:model-value="(v) => toggle(Number(opt.id), Boolean(v))"
+            />
+            <span class="vm-role-picker__name">{{ opt.name }}</span>
+            <span v-if="opt.label" class="vm-role-picker__label">{{ opt.label }}</span>
+          </label>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-role-picker' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number[]
+    disabled?: boolean
+    clearable?: boolean
+    placeholder?: string
+    /** base：后台角色；user：前端角色 */
+    source?: 'base' | 'user'
+  }>(),
+  {
+    modelValue: () => [],
+    disabled: false,
+    clearable: true,
+    placeholder: '请选择角色',
+    source: 'base',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: number[]]
+}>()
+
+const { service } = useVome()
+const rootRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<HTMLElement | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
+const open = ref(false)
+const panelStyle = ref<Record<string, string>>({})
+const loading = ref(false)
+const options = ref<Array<{ id: number; name: string; label?: string }>>([])
+
+const picked = computed(() => new Set(props.modelValue))
+
+const displayText = computed(() => {
+  const ids = props.modelValue || []
+  if (!ids.length) return ''
+  const names = ids
+    .map((id) => options.value.find((o) => o.id === id)?.name || String(id))
+    .filter(Boolean)
+  if (!names.length) return `已选 ${ids.length} 项`
+  if (names.length === 1) return names[0]!
+  return `${names[0]} +${names.length - 1}`
+})
+
+async function loadRoles() {
+  loading.value = true
+  try {
+    const list = (await (props.source === 'user'
+      ? service.user.userRole.list({ status: 1 })
+      : service.base.role.list({ status: 1 }))) as Array<Record<string, unknown>>
+    options.value = list
+      .filter((r) => r.id != null)
+      .map((r) => ({
+        id: Number(r.id),
+        name: String(r.name ?? ''),
+        label: r.label ? String(r.label) : undefined,
+      }))
+  } catch (e) {
+    console.error(e)
+    options.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+function toggle(id: number, on: boolean) {
+  if (props.disabled) return
+  const next = new Set(picked.value)
+  if (on) next.add(id)
+  else next.delete(id)
+  emit('update:modelValue', [...next])
+}
+
+function clear() {
+  emit('update:modelValue', [])
+}
+
+function syncPanelPos() {
+  const el = triggerRef.value
+  if (!el) return
+  const r = el.getBoundingClientRect()
+  const width = Math.max(r.width, 220)
+  let left = r.left
+  if (left + width > window.innerWidth - 8) {
+    left = Math.max(8, window.innerWidth - width - 8)
+  }
+  let top = r.bottom + 6
+  const maxH = Math.min(280, window.innerHeight * 0.45)
+  if (top + maxH > window.innerHeight - 8) {
+    top = Math.max(8, r.top - maxH - 6)
+  }
+  panelStyle.value = {
+    position: 'fixed',
+    top: `${top}px`,
+    left: `${left}px`,
+    width: `${width}px`,
+    zIndex: '200',
+  }
+}
+
+async function togglePanel() {
+  if (props.disabled) return
+  open.value = !open.value
+  if (open.value) {
+    await nextTick()
+    syncPanelPos()
+  }
+}
+
+function isInside(el: Node | null) {
+  if (!el) return false
+  if (rootRef.value?.contains(el)) return true
+  if (panelRef.value?.contains(el)) return true
+  return el instanceof Element && Boolean(el.closest('.vm-role-picker__panel'))
+}
+
+function onDocPointer(e: Event) {
+  const t = e.target as Node | null
+  if (!isInside(t)) open.value = false
+}
+
+function onWinChange() {
+  if (open.value) syncPanelPos()
+}
+
+watch(() => props.source, () => void loadRoles())
+
+onMounted(() => {
+  void loadRoles()
+  document.addEventListener('pointerdown', onDocPointer, true)
+  window.addEventListener('resize', onWinChange)
+  window.addEventListener('scroll', onWinChange, true)
+})
+onUnmounted(() => {
+  document.removeEventListener('pointerdown', onDocPointer, true)
+  window.removeEventListener('resize', onWinChange)
+  window.removeEventListener('scroll', onWinChange, true)
+})
+</script>
+
+<style lang="scss">
+.vm-role-picker {
+  position: relative;
+  width: 100%;
+}
+
+.vm-role-picker__trigger {
+  display: flex;
+  width: 100%;
+  height: var(--vm-control-height);
+  min-height: var(--vm-control-height);
+  align-items: center;
+  gap: 6px;
+  padding: 0 var(--vm-control-padding-x) 0 12px;
+  border: 1px solid var(--input);
+  border-radius: var(--vm-control-radius);
+  background: var(--background);
+  color: var(--foreground);
+  font-size: var(--vm-control-font-size);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+
+  &:hover:not(.is-disabled) {
+    border-color: color-mix(in srgb, var(--brand) 45%, var(--input));
+  }
+
+  &.is-open,
+  &:focus-visible {
+    border-color: var(--focus-border);
+    box-shadow: none;
+    outline: none;
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+}
+
+.vm-role-picker__value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vm-role-picker__ph {
+  flex: 1;
+  color: var(--muted-foreground);
+}
+
+.vm-role-picker__clear {
+  flex-shrink: 0;
+  color: var(--muted-foreground);
+  font-size: 14px;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--foreground);
+  }
+}
+
+.vm-role-picker__caret {
+  flex-shrink: 0;
+  opacity: 0.45;
+  font-size: 16px;
+}
+
+.vm-role-picker__panel {
+  max-height: min(280px, 45vh);
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--card);
+  box-shadow: var(--shadow-soft);
+}
+
+.vm-role-picker__list {
+  display: grid;
+  gap: 2px;
+  max-height: min(280px, 45vh);
+  padding: 6px;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.vm-role-picker__item {
+  display: flex;
+  min-height: 32px;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: 8px;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--muted);
+  }
+}
+
+.vm-role-picker__name {
+  font-size: 13px;
+  color: var(--foreground);
+}
+
+.vm-role-picker__label {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--muted-foreground);
+}
+
+.vm-role-picker__state {
+  padding: 16px;
+  font-size: 13px;
+  color: var(--muted-foreground);
+  text-align: center;
+}
+</style>

package/src/admin/components/vm-view-path-picker.vue

@@ -0,0 +1,56 @@
+<template>
+  <vm-group-cascader
+    :model-value="modelValue ?? ''"
+    :tree="tree"
+    :placeholder="placeholder"
+    :clearable="clearable"
+    :editable="editable"
+    :disabled="disabled"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  />
+</template>
+
+<script setup lang="ts">
+import {
+  listViewsTree,
+  VIEWS_RESCAN_EVENT,
+} from '@vome-core/admin/lib/module'
+defineOptions({ name: 'vm-view-path-picker' })
+
+withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    placeholder?: string
+    clearable?: boolean
+    editable?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    placeholder: '请选择文件路径',
+    clearable: true,
+    editable: true,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: string]
+}>()
+
+const tree = ref<ViewsTreeNode[]>([])
+
+function rescan() {
+  tree.value = listViewsTree()
+}
+
+onMounted(() => {
+  rescan()
+  window.addEventListener(VIEWS_RESCAN_EVENT, rescan)
+})
+
+onUnmounted(() => {
+  window.removeEventListener(VIEWS_RESCAN_EVENT, rescan)
+})
+
+// 打开选择器前再扫一次（配合 HMR 事件）
+defineExpose({ rescan })
+</script>

package/src/admin/config/plugin-dev.ts

@@ -0,0 +1,31 @@
+/**
+ * 插件开发入口（官网文档 / 上传 / 脚手架）
+ * 域名变更随 @vome-core 发版，宿主勿覆盖。
+ */
+export const pluginDev = {
+  docsUrl: 'https://vome.dev/docs/plugin',
+  uploadUrl: 'https://vome.dev/plugins/upload',
+  scaffolds: {
+    full: {
+      key: 'full',
+      title: '前端 + 后端',
+      desc: '完整业务模块脚手架（.vome: 含 server 与 web), 本地开发打包后发布到官网。',
+      downloadUrl: 'https://vome.dev/scaffolds/plugin-full.zip',
+    },
+    backend: {
+      key: 'backend',
+      title: '纯后端',
+      desc: '钩子 / 服务端插件脚手架（.vome: 仅 server), 适合上传、短信、支付等能力扩展。',
+      downloadUrl: 'https://vome.dev/scaffolds/plugin-backend.zip',
+    },
+    frontend: {
+      key: 'frontend',
+      title: '纯前端',
+      desc: '后台微应用脚手架（.vapp), 以 wujie 挂载独立前端页面。',
+      downloadUrl: 'https://vome.dev/scaffolds/plugin-frontend.zip',
+    },
+  },
+} as const
+
+export type PluginDevConfig = typeof pluginDev
+export type PluginScaffoldKey = keyof typeof pluginDev.scaffolds