OneAuth/oaweb/pages/app/[id]/cfg.vue

<!--
 * cfg.vue
 * Copyright (C) 2024 veypi <i@veypi.com>
 * 2024-06-12 18:38
 * Distributed under terms of the MIT license.
 -->
<template>
  <div>
    <div class="flex justify-center pt-10">
      <Crud ref="table" :keys="keys" :data="core.id ? [core] : []" kalign="left" valign="left" editable
        :vstyle="{ 'width': '50vw' }" @update="newApp = $event[0]" :kstyle="{ 'width': '10rem' }">
        <template #k_icon="{ value, set }">
          <div class="w-full flex justify-center">
            <Uploader class="" @success="set" dir="app_icon">
              <img class="w-12 h-12 rounded-full" :src="value">
            </Uploader>
          </div>
        </template>
        <template #k_key>
          <div class="w-full div-center">
            <span class="mx-2 select-all" v-if="tmpkey">{{ tmpkey }}</span>
            <div v-else class='vbtn' @click="getkey">获取秘钥</div>
          </div>
        </template>
        <template #k_redirect_append>
          <div class="mx-8 vbtn" @click="$router.push('/login?uuid=' +
            core.id)">Go</div>
        </template>
      </Crud>
    </div>
    <div v-if="Object.keys(newApp).length" class="flex justify-center gap-8 mt-6">
      <div class="vbtn" style="background: var(--color-primary);" @click="table.reload">回退</div>
      <div class="vbtn" style="background: var(--color-warning);" @click="save">保存</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { models } from '#imports';
import msg from '@veypi/msg';
import { useI18n } from 'vue-i18n';

const { t } = useI18n()
const keys = ref<any>([
  {
    name: 'name',
    label: '应用名',
  },
  { name: 'id', label: 'uuid', editable: false },
  { name: 'key', label: '秘钥Key' },
  { name: 'icon', label: 'logo' },
  {
    name: 'typ', label: '用户注册', typ: ArgType.Radio,
    options: { 'public': t('atyp.public'), 'apply': t('atyp.apply'), 'private': t('atyp.private') }
  },
  { name: 'init_url', label: '项目首页', validate: /^(https?:\/\/)?(([\da-z\.-]+)|(\d{1,3}(\.\d{1,3}){3}))(:\d+)?([\/\w \.-]*)*\/?$/ },
  { name: 'redirect', label: '跳转地址' },
])

const core = inject('app') as Ref<models.App>
const newApp = ref({})
const table = ref()

const save = () => {
  api.app.Patch(core.value.id, newApp.value).then(e => {
    msg.Info('更新成功')
    Object.assign(core, newApp.value)
    newApp.value = {}
  }).catch(e => {
    msg.Warn('更新失败 ' + e)
  })
}

const tmpkey = ref('')
const getkey = () => {
  msg.Prompt('请输入应用名确认', '').then((s) => {
    if (s === core.value.name) {
      api.app.Key(core.value.id).then(e => {
        tmpkey.value = e
        navigator.clipboard.writeText(e)
          .then(() => {
            msg.Info('已复制到剪贴板')
          })
          .catch(() => {
            tmpkey.value = e
          });
      }).catch(e => {
        msg.Warn('获取失败 ' + e)
      })
    } else {
      msg.Info('输入错误')
    }
  })
}


onMounted(() => {
})

</script>

<style scoped></style>