tha-cli 0.0.0-stage → 0.1.1

package/tha/kit/ThaCrudPage.vue

@@ -0,0 +1,344 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+
+interface ThaField {
+  label: string
+  type: string
+  required?: boolean
+  list?: boolean
+  form?: boolean
+  search?: boolean
+  readonly?: boolean
+  options?: Array<{ label: string; value: string; color?: string }>
+  default?: unknown
+}
+
+interface ThaConfig {
+  title: string
+  fields: Record<string, ThaField>
+  list?: { pageSize?: number; orderBy?: string; order?: 'asc' | 'desc' }
+  crud?: { create?: boolean; update?: boolean; remove?: boolean }
+}
+
+interface ThaActions {
+  refresh: () => Promise<boolean>
+  create?: (input: Record<string, unknown>) => Promise<boolean>
+  update?: (input: { id: number; data: Record<string, unknown> }) => Promise<boolean>
+  remove?: (id: number) => Promise<boolean>
+  can?: (action: 'view' | 'create' | 'update' | 'remove') => boolean
+}
+
+interface ThaStore {
+  items: Array<Record<string, unknown> & { id: number }>
+  pending: Record<string, boolean>
+  error: string | null
+}
+
+const props = defineProps<{ config: ThaConfig; actions: ThaActions; store: ThaStore }>()
+
+const fields = computed(() =>
+  Object.entries(props.config.fields ?? {}).map(([key, field]) => ({ key, ...field }))
+)
+const listFields = computed(() => fields.value.filter((field) => field.list !== false))
+const formFields = computed(() => fields.value.filter((field) => field.form !== false && !field.readonly))
+const searchFields = computed(() => fields.value.filter((field) => field.search))
+
+const allowed = (action: 'create' | 'update' | 'remove'): boolean => {
+  const crud = props.config.crud ?? {}
+  if (crud[action] === false) return false
+  return props.actions.can ? props.actions.can(action) : true
+}
+
+const canCreate = computed(() => allowed('create') && Boolean(props.actions.create))
+const canUpdate = computed(() => allowed('update') && Boolean(props.actions.update))
+const canRemove = computed(() => allowed('remove') && Boolean(props.actions.remove))
+
+const keyword = ref('')
+const page = ref(1)
+const pageSize = computed(() => props.config.list?.pageSize ?? 20)
+const filtered = computed(() => {
+  const text = keyword.value.trim().toLowerCase()
+  if (!text) return props.store.items
+  return props.store.items.filter((row) =>
+    searchFields.value.some((field) => String(row[field.key] ?? '').toLowerCase().includes(text))
+  )
+})
+const sorted = computed(() => {
+  const orderBy = props.config.list?.orderBy
+  if (!orderBy) return filtered.value
+  const direction = props.config.list?.order === 'asc' ? 1 : -1
+  return [...filtered.value].sort((left, right) => {
+    const a = left[orderBy]
+    const b = right[orderBy]
+    if (a === b) return 0
+    if (a === null || a === undefined) return 1
+    if (b === null || b === undefined) return -1
+    const order = typeof a === 'number' && typeof b === 'number' ? a - b : String(a).localeCompare(String(b))
+    return order * direction
+  })
+})
+const pageCount = computed(() => Math.max(1, Math.ceil(sorted.value.length / pageSize.value)))
+const current = computed(() => Math.min(page.value, pageCount.value))
+const paged = computed(() => {
+  const start = (current.value - 1) * pageSize.value
+  return sorted.value.slice(start, start + pageSize.value)
+})
+
+const dialogOpen = ref(false)
+const editingId = ref<number | null>(null)
+const draft = reactive<Record<string, unknown>>({})
+const localError = ref('')
+
+const isEditing = computed(() => editingId.value !== null)
+const title = computed(() => props.config.title)
+
+function resetDraft(): void {
+  for (const key of Object.keys(draft)) delete draft[key]
+  for (const field of formFields.value) {
+    draft[field.key] = field.default ?? (field.type === 'boolean' ? false : '')
+  }
+}
+
+function openCreate(): void {
+  editingId.value = null
+  resetDraft()
+  dialogOpen.value = true
+}
+
+function openEdit(row: Record<string, unknown> & { id: number }): void {
+  editingId.value = row.id
+  resetDraft()
+  for (const field of formFields.value) draft[field.key] = row[field.key] ?? draft[field.key]
+  dialogOpen.value = true
+}
+
+async function submit(): Promise<void> {
+  const missing = formFields.value.filter(
+    (field) => field.required && (draft[field.key] === '' || draft[field.key] === undefined)
+  )
+  if (missing.length > 0) {
+    localError.value = `请填写：${missing.map((field) => field.label).join('、')}`
+    return
+  }
+  localError.value = ''
+
+  const ok = isEditing.value
+    ? await props.actions.update?.({ id: editingId.value as number, data: { ...draft } })
+    : await props.actions.create?.({ ...draft })
+
+  if (ok) dialogOpen.value = false
+}
+
+async function removeRow(id: number): Promise<void> {
+  if (!window.confirm('确认删除这一条？')) return
+  await props.actions.remove?.(id)
+}
+
+function search(): void {
+  page.value = 1
+}
+
+function go(target: number): void {
+  page.value = Math.max(1, Math.min(pageCount.value, target))
+}
+
+function display(row: Record<string, unknown>, field: (typeof fields.value)[number]): string {
+  const value = row[field.key]
+  if (field.type === 'enum') {
+    const option = field.options?.find((item) => item.value === value)
+    return option ? option.label : String(value ?? '')
+  }
+  if (value === null || value === undefined || value === '') return '—'
+  return String(value)
+}
+
+onMounted(() => {
+  void props.actions.refresh()
+})
+</script>
+
+<template>
+  <section class="tha-crud">
+    <header class="tha-crud__head">
+      <h2>{{ title }}</h2>
+      <div class="tha-crud__tools">
+        <input
+          v-if="searchFields.length > 0"
+          v-model="keyword"
+          class="tha-crud__search"
+          type="search"
+          placeholder="搜索"
+          @input="search"
+        />
+        <button v-if="canCreate" class="tha-crud__btn tha-crud__btn--primary" @click="openCreate">
+          新建
+        </button>
+      </div>
+    </header>
+
+    <p v-if="localError || store.error" class="tha-crud__error">{{ localError || store.error }}</p>
+
+    <table class="tha-crud__table">
+      <thead>
+        <tr>
+          <th v-for="field in listFields" :key="field.key">{{ field.label }}</th>
+          <th v-if="canUpdate || canRemove" class="tha-crud__op">操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in paged" :key="row.id">
+          <td v-for="field in listFields" :key="field.key">{{ display(row, field) }}</td>
+          <td v-if="canUpdate || canRemove" class="tha-crud__op">
+            <button v-if="canUpdate" class="tha-crud__btn" @click="openEdit(row)">编辑</button>
+            <button v-if="canRemove" class="tha-crud__btn tha-crud__btn--danger" @click="removeRow(row.id)">
+              删除
+            </button>
+          </td>
+        </tr>
+        <tr v-if="paged.length === 0">
+          <td :colspan="listFields.length + 1" class="tha-crud__empty">暂无数据</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <footer v-if="pageCount > 1" class="tha-crud__pager">
+      <button class="tha-crud__btn" :disabled="current <= 1" @click="go(current - 1)">上一页</button>
+      <span>{{ current }} / {{ pageCount }}</span>
+      <button class="tha-crud__btn" :disabled="current >= pageCount" @click="go(current + 1)">下一页</button>
+    </footer>
+
+    <div v-if="dialogOpen" class="tha-crud__mask" @click.self="dialogOpen = false">
+      <form class="tha-crud__dialog" @submit.prevent="submit">
+        <h3>{{ isEditing ? '编辑' : '新建' }} · {{ title }}</h3>
+
+        <label v-for="field in formFields" :key="field.key" class="tha-crud__field">
+          <span>{{ field.label }}<b v-if="field.required"> *</b></span>
+
+          <select v-if="field.type === 'enum'" v-model="draft[field.key]">
+            <option value="">请选择</option>
+            <option v-for="option in field.options" :key="option.value" :value="option.value">
+              {{ option.label }}
+            </option>
+          </select>
+
+          <input v-else-if="field.type === 'boolean'" v-model="draft[field.key]" type="checkbox" />
+
+          <textarea v-else-if="field.type === 'text'" v-model="draft[field.key]" rows="3" />
+
+          <input
+            v-else
+            v-model="draft[field.key]"
+            :type="field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : field.type === 'datetime' ? 'datetime-local' : 'text'"
+          />
+        </label>
+
+        <div class="tha-crud__actions">
+          <button type="button" class="tha-crud__btn" @click="dialogOpen = false">取消</button>
+          <button type="submit" class="tha-crud__btn tha-crud__btn--primary">保存</button>
+        </div>
+      </form>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.tha-crud {
+  padding: 16px;
+  color: #1f2329;
+}
+.tha-crud__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.tha-crud__tools {
+  display: flex;
+  gap: 8px;
+}
+.tha-crud__search {
+  padding: 6px 10px;
+  border: 1px solid #dee0e3;
+  border-radius: 6px;
+}
+.tha-crud__table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.tha-crud__table th,
+.tha-crud__table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #eff0f1;
+  text-align: left;
+}
+.tha-crud__table th {
+  color: #646a73;
+  font-weight: 500;
+}
+.tha-crud__op {
+  white-space: nowrap;
+}
+.tha-crud__empty {
+  color: #8f959e;
+  text-align: center;
+}
+.tha-crud__btn {
+  padding: 5px 12px;
+  border: 1px solid #dee0e3;
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+}
+.tha-crud__btn--primary {
+  border-color: #3370ff;
+  background: #3370ff;
+  color: #fff;
+}
+.tha-crud__btn--danger {
+  color: #f54a45;
+}
+.tha-crud__error {
+  margin: 0 0 12px;
+  color: #f54a45;
+}
+.tha-crud__pager {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 12px;
+}
+.tha-crud__mask {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(0 0 0 / 40%);
+}
+.tha-crud__dialog {
+  width: min(520px, 90vw);
+  padding: 20px;
+  border-radius: 10px;
+  background: #fff;
+}
+.tha-crud__field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+.tha-crud__field input,
+.tha-crud__field select,
+.tha-crud__field textarea {
+  padding: 7px 10px;
+  border: 1px solid #dee0e3;
+  border-radius: 6px;
+}
+.tha-crud__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+</style>

package/tha/kit/ThaDetail.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+interface ThaField {
+  label: string
+  type: string
+  readonly?: boolean
+  options?: Array<{ label: string; value: string; color?: string }>
+}
+
+interface ThaConfig {
+  title: string
+  path?: string
+  fields: Record<string, ThaField>
+  crud?: { create?: boolean; update?: boolean; remove?: boolean }
+}
+
+interface ThaActions {
+  refresh: () => Promise<boolean>
+  load?: (id: number) => Promise<unknown>
+  can?: (action: 'view' | 'create' | 'update' | 'remove') => boolean
+}
+
+interface ThaStore {
+  items: Array<Record<string, unknown> & { id: number }>
+  error: string | null
+}
+
+const props = defineProps<{ config: ThaConfig; actions: ThaActions; store: ThaStore; id: number }>()
+
+const router = useRouter()
+const loading = ref(false)
+
+const fields = computed(() =>
+  Object.entries(props.config.fields ?? {}).map(([key, field]) => ({ key, ...field }))
+)
+
+const row = computed(() => props.store.items.find((item) => item.id === props.id))
+
+const canEdit = computed(() => {
+  if (props.config.crud?.update === false) return false
+  return props.actions.can ? props.actions.can('update') : true
+})
+
+onMounted(async () => {
+  if (row.value) return
+  if (!props.actions.load) return
+  loading.value = true
+  await props.actions.load(props.id)
+  loading.value = false
+})
+
+function display(field: (typeof fields.value)[number]): string {
+  const value = row.value?.[field.key]
+  if (field.type === 'enum') {
+    const option = field.options?.find((item) => item.value === value)
+    return option ? option.label : String(value ?? '')
+  }
+  if (value === null || value === undefined || value === '') return '—'
+  return String(value)
+}
+</script>
+
+<template>
+  <section class="tha-detail">
+    <header class="tha-detail__head">
+      <h2>{{ config.title }}</h2>
+      <div class="tha-detail__tools">
+        <button class="tha-detail__btn" @click="router.back()">返回</button>
+        <button
+          v-if="canEdit && row"
+          class="tha-detail__btn tha-detail__btn--primary"
+          @click="router.push(`${config.path}/${id}/edit`)"
+        >
+          编辑
+        </button>
+      </div>
+    </header>
+
+    <p v-if="loading" class="tha-detail__tip">加载中…</p>
+    <p v-else-if="!row" class="tha-detail__tip">找不到这条记录</p>
+    <p v-if="store.error" class="tha-detail__tip tha-detail__tip--error">{{ store.error }}</p>
+
+    <dl v-if="row" class="tha-detail__list">
+      <div v-for="field in fields" :key="field.key" class="tha-detail__item">
+        <dt>{{ field.label }}</dt>
+        <dd>{{ display(field) }}</dd>
+      </div>
+    </dl>
+  </section>
+</template>
+
+<style scoped>
+.tha-detail {
+  padding: 16px;
+  color: #1f2329;
+}
+.tha-detail__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+.tha-detail__tools {
+  display: flex;
+  gap: 8px;
+}
+.tha-detail__btn {
+  padding: 5px 12px;
+  border: 1px solid #dee0e3;
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+}
+.tha-detail__btn--primary {
+  border-color: #3370ff;
+  background: #3370ff;
+  color: #fff;
+}
+.tha-detail__tip {
+  color: #8f959e;
+}
+.tha-detail__tip--error {
+  color: #f54a45;
+}
+.tha-detail__list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 12px;
+}
+.tha-detail__item {
+  padding: 10px 12px;
+  border: 1px solid #eff0f1;
+  border-radius: 8px;
+}
+.tha-detail__item dt {
+  margin-bottom: 4px;
+  color: #646a73;
+  font-size: 13px;
+}
+.tha-detail__item dd {
+  margin: 0;
+  word-break: break-all;
+}
+</style>

package/tha/kit/ThaForm.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+interface ThaField {
+  label: string
+  type: string
+  required?: boolean
+  form?: boolean
+  readonly?: boolean
+  options?: Array<{ label: string; value: string; color?: string }>
+  default?: unknown
+}
+
+interface ThaConfig {
+  title: string
+  path?: string
+  fields: Record<string, ThaField>
+  crud?: { create?: boolean; update?: boolean; remove?: boolean }
+}
+
+interface ThaActions {
+  refresh: () => Promise<boolean>
+  load?: (id: number) => Promise<unknown>
+  create?: (input: Record<string, unknown>) => Promise<boolean>
+  update?: (input: { id: number; data: Record<string, unknown> }) => Promise<boolean>
+  can?: (action: 'view' | 'create' | 'update' | 'remove') => boolean
+}
+
+interface ThaStore {
+  items: Array<Record<string, unknown> & { id: number }>
+  error: string | null
+}
+
+const props = defineProps<{ config: ThaConfig; actions: ThaActions; store: ThaStore; id?: number }>()
+
+const router = useRouter()
+const draft = reactive<Record<string, unknown>>({})
+const localError = ref('')
+
+const formFields = computed(() =>
+  Object.entries(props.config.fields ?? {})
+    .map(([key, field]) => ({ key, ...field }))
+    .filter((field) => field.form !== false && !field.readonly)
+)
+
+const isEdit = computed(() => props.id !== undefined)
+const allowed = computed(() => {
+  const crud = props.config.crud ?? {}
+  const action = isEdit.value ? 'update' : 'create'
+  if (crud[action] === false) return false
+  if (!props.actions.can) return true
+  return props.actions.can(action)
+})
+
+function reset(): void {
+  for (const key of Object.keys(draft)) delete draft[key]
+  for (const field of formFields.value) {
+    draft[field.key] = field.default ?? (field.type === 'boolean' ? false : '')
+  }
+}
+
+async function seed(): Promise<void> {
+  reset()
+  if (!isEdit.value) return
+
+  const id = props.id as number
+  let row = props.store.items.find((item) => item.id === id)
+  if (!row && props.actions.load) {
+    await props.actions.load(id)
+    row = props.store.items.find((item) => item.id === id)
+  }
+  if (!row) return
+
+  for (const field of formFields.value) {
+    draft[field.key] = row[field.key] ?? draft[field.key]
+  }
+}
+
+async function submit(): Promise<void> {
+  if (!allowed.value) {
+    localError.value = isEdit.value ? '没有编辑权限' : '没有新增权限'
+    return
+  }
+
+  const missing = formFields.value.filter(
+    (field) => field.required && (draft[field.key] === '' || draft[field.key] === undefined)
+  )
+  if (missing.length > 0) {
+    localError.value = `请填写：${missing.map((field) => field.label).join('、')}`
+    return
+  }
+  localError.value = ''
+
+  const payload = { ...draft }
+  const ok = isEdit.value
+    ? await props.actions.update?.({ id: props.id as number, data: payload })
+    : await props.actions.create?.(payload)
+
+  if (ok) router.push(props.config.path ?? '/')
+}
+
+onMounted(seed)
+</script>
+
+<template>
+  <section class="tha-form">
+    <header class="tha-form__head">
+      <h2>{{ isEdit ? '编辑' : '新建' }} · {{ config.title }}</h2>
+    </header>
+
+    <p v-if="localError || store.error" class="tha-form__error">{{ localError || store.error }}</p>
+
+    <form class="tha-form__body" @submit.prevent="submit">
+      <label v-for="field in formFields" :key="field.key" class="tha-form__field">
+        <span>{{ field.label }}<b v-if="field.required"> *</b></span>
+
+        <select v-if="field.type === 'enum'" v-model="draft[field.key]">
+          <option value="">请选择</option>
+          <option v-for="option in field.options" :key="option.value" :value="option.value">
+            {{ option.label }}
+          </option>
+        </select>
+
+        <input v-else-if="field.type === 'boolean'" v-model="draft[field.key]" type="checkbox" />
+
+        <textarea v-else-if="field.type === 'text'" v-model="draft[field.key]" rows="4" />
+
+        <input
+          v-else
+          v-model="draft[field.key]"
+          :type="field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : field.type === 'datetime' ? 'datetime-local' : 'text'"
+        />
+      </label>
+
+      <div class="tha-form__actions">
+        <button type="button" class="tha-form__btn" @click="router.back()">取消</button>
+        <button type="submit" class="tha-form__btn tha-form__btn--primary" :disabled="!allowed">
+          保存
+        </button>
+      </div>
+    </form>
+  </section>
+</template>
+
+<style scoped>
+.tha-form {
+  padding: 16px;
+  color: #1f2329;
+}
+.tha-form__head {
+  margin-bottom: 16px;
+}
+.tha-form__error {
+  color: #f54a45;
+}
+.tha-form__body {
+  max-width: 560px;
+}
+.tha-form__field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 14px;
+}
+.tha-form__field input,
+.tha-form__field select,
+.tha-form__field textarea {
+  padding: 7px 10px;
+  border: 1px solid #dee0e3;
+  border-radius: 6px;
+}
+.tha-form__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.tha-form__btn {
+  padding: 6px 14px;
+  border: 1px solid #dee0e3;
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+}
+.tha-form__btn--primary {
+  border-color: #3370ff;
+  background: #3370ff;
+  color: #fff;
+}
+.tha-form__btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+</style>