refactor: 重构及优化应用管理

src/apis/open/app.ts

@@ -1,45 +1,18 @@
+import type * as T from './type'
 import http from '@/utils/http'
 
+export type * from './type'
+
 const BASE_URL = '/open/app'
 
-export interface AppResp {
-  id: string
-  name: string
-  appKey: string
-  status: string
-  expirationTime: string
-  appDesc: string
-  createUserString: string
-  updateUserString: string
-}
-export interface AppDetailResp {
-  id: string
-  name: string
-  appKey: string
-  status: string
-  expirationTime: string
-  appDesc: string
-  createTime: string
-  updateUser: string
-  updateTime: string
-  createUserString: string
-  updateUserString: string
-}
-export interface AppQuery {
-  name: string
-  appKey: string
-  sort: Array<string>
-}
-export interface AppPageQuery extends AppQuery, PageQuery {}
-
 /** @desc 查询应用列表 */
-export function listApp(query: AppPageQuery) {
+export function listApp(query: T.AppPageQuery) {
-  return http.get<PageRes<AppResp[]>>(`${BASE_URL}`, query)
+  return http.get<PageRes<T.AppResp[]>>(`${BASE_URL}`, query)
 }
 
 /** @desc 查询应用详情 */
 export function getApp(id: string) {
-  return http.get<AppDetailResp>(`${BASE_URL}/${id}`)
+  return http.get<T.AppResp>(`${BASE_URL}/${id}`)
 }
 
 /** @desc 新增应用 */
@@ -58,16 +31,16 @@ export function deleteApp(id: string) {
 }
 
 /** @desc 导出应用 */
-export function exportApp(query: AppQuery) {
+export function exportApp(query: T.AppQuery) {
   return http.download(`${BASE_URL}/export`, query)
 }
 
-/** @desc 查看AK */
+/** @desc 获取密钥 */
 export function getAppSecret(id: string) {
-  return http.get(`${BASE_URL}/${id}/appsecret`)
+  return http.get(`${BASE_URL}/${id}/secret`)
 }
 
-/** @desc 刷新AK */
+/** @desc 重置密钥 */
-export function refreshAppSecret(id: string) {
+export function resetAppSecret(id: string) {
-  return http.get(`${BASE_URL}/${id}/refreshas`)
+  return http.patch(`${BASE_URL}/${id}/secret`)
 }

src/apis/open/type.ts

@@ -0,0 +1,21 @@
+/** 应用类型 */
+export interface AppResp {
+  id: string
+  name: string
+  accessKey: string
+  secretKey: string
+  expireTime: string
+  description: string
+  status: 1 | 2
+  createUserString: string
+  createTime: string
+  updateUserString: string
+  updateTime: string
+}
+
+export interface AppQuery {
+  description?: string
+  sort: Array<string>
+}
+
+export interface AppPageQuery extends AppQuery, PageQuery {}

src/apis/system/type.ts

@@ -43,8 +43,7 @@ export interface UserQuery {
   userIds?: Array<string>
 }
 
-export interface UserPageQuery extends UserQuery, PageQuery {
+export interface UserPageQuery extends UserQuery, PageQuery {}
-}
 
 /** 系统角色类型 */
 export interface RoleResp {
@@ -62,23 +61,11 @@ export interface RoleResp {
   disabled: boolean
 }
 
-export interface RoleDetailResp {
+export type RoleDetailResp = RoleResp & {
-  id: string
-  name: string
-  code: string
-  sort: number
-  description: string
   menuIds: Array<number>
-  dataScope: number
   deptIds: Array<number>
-  isSystem: boolean
   menuCheckStrictly: boolean
   deptCheckStrictly: boolean
-  createUserString: string
-  createTime: string
-  updateUserString: string
-  updateTime: string
-  disabled: boolean
 }
 
 export interface RoleQuery {
@@ -86,8 +73,7 @@ export interface RoleQuery {
   sort: Array<string>
 }
 
-export interface RolePageQuery extends RoleQuery, PageQuery {
+export interface RolePageQuery extends RoleQuery, PageQuery {}
-}
 
 /** 系统菜单类型 */
 export interface MenuResp {

src/components/CellCopy/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <a-space :size="[2]">
+    <a-typography-paragraph
+      :ellipsis="{
+        rows: 1,
+        showTooltip: true,
+        css: true,
+      }"
+    >
+      {{ content }}
+    </a-typography-paragraph>
+    <a-typography-paragraph copyable :copy-text="content" />
+  </a-space>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'CellCopy' })
+
+withDefaults(defineProps<Props>(), {
+  content: '',
+})
+
+interface Props {
+  content: string
+}
+</script>
+
+<style scoped lang="scss"></style>

src/hooks/modules/useTable.ts

@@ -68,7 +68,7 @@ export function useTable<T extends U, U = T>(api: Api<T>, options?: Options<T, U
         if (res.success) {
           Message.success(options?.successTip || '删除成功')
           selectedKeys.value = []
-          getTableData()
+          await getTableData()
         }
         return res.success
       } catch (error) {

src/layout/components/HeaderRightBar/index.vue

@@ -135,7 +135,7 @@ const logout = () => {
     onBeforeOk: async () => {
       try {
         await userStore.logout()
-        router.replace('/login')
+        await router.replace('/login')
         return true
       } catch (error) {
         return false

src/types/components.d.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     Avatar: typeof import('./../components/Avatar/index.vue')['default']
     Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
+    CellCopy: typeof import('./../components/CellCopy/index.vue')['default']
     Chart: typeof import('./../components/Chart/index.vue')['default']
     CronForm: typeof import('./../components/GenCron/CronForm/index.vue')['default']
     CronModel: typeof import('./../components/GenCron/CronModel/index.vue')['default']

src/views/open/app/AppAddModal.vue

@@ -4,8 +4,8 @@
     :title="title"
     :mask-closable="false"
     :esc-to-close="false"
-    :modal-style="{ maxWidth: '520px' }"
+    :width="width >= 500 ? 500 : '100%'"
-    width="90%"
+    draggable
     @before-ok="save"
     @close="reset"
   >
@@ -15,74 +15,69 @@
 
 <script setup lang="ts">
 import { Message } from '@arco-design/web-vue'
+import { useWindowSize } from '@vueuse/core'
 import { addApp, getApp, updateApp } from '@/apis/open/app'
 import { type Columns, GiForm, type Options } from '@/components/GiForm'
 import { useForm } from '@/hooks'
-import { useDict } from '@/hooks/app'
 
 const emit = defineEmits<{
   (e: 'save-success'): void
 }>()
 
+const { width } = useWindowSize()
+
 const dataId = ref('')
+const visible = ref(false)
 const isUpdate = computed(() => !!dataId.value)
 const title = computed(() => (isUpdate.value ? '修改应用' : '新增应用'))
 const formRef = ref<InstanceType<typeof GiForm>>()
 
-const { app_type } = useDict('app_type')
-
 const options: Options = {
-  form: {},
+  form: { size: 'large' },
   btns: { hide: true },
 }
 
 const columns: Columns = reactive([
   {
-    label: '应用名称',
+    label: '名称',
     field: 'name',
     type: 'input',
-    rules: [{ required: true, message: '请输入应用名称' }],
+    rules: [{ required: true, message: '请输入名称' }],
-  },
-  {
-    label: 'APPKEY',
-    field: 'appKey',
-    type: 'input',
-    rules: [{ required: true, message: '请输入APPKEY' }],
-  },
-  {
-    label: '应用状态',
-    field: 'status',
-    type: 'switch',
-    options: app_type,
-    props: {
-      type: 'round',
-      defaultChecked: true,
-      checkedValue: '1',
-      uncheckedValue: '0',
-      checkedText: '启用',
-      uncheckedText: '禁用',
-      checkedColor: 'green',
-    },
-    rules: [{ required: false, message: '请输入应用状态' }],
   },
   {
     label: '失效时间',
     field: 'expirationTime',
     type: 'date-picker',
     props: {
+      placeholder: '请选择失效时间',
       showTime: true,
     },
-    rules: [{ required: true, message: '请输入失效时间' }],
   },
   {
-    label: '应用描述',
+    label: '描述',
-    field: 'appDesc',
+    field: 'description',
     type: 'textarea',
+    props: {
+      maxLength: 200,
+      autoSize: { minRows: 3, maxRows: 5 },
+    },
+  },
+  {
+    label: '状态',
+    field: 'status',
+    type: 'switch',
+    props: {
+      type: 'round',
+      checkedValue: 1,
+      uncheckedValue: 2,
+      checkedText: '启用',
+      uncheckedText: '禁用',
+    },
   },
 ])
 
 const { form, resetForm } = useForm({
-  // todo 待补充
+  status: 1,
 })
 
 // 重置
@@ -91,23 +86,6 @@ const reset = () => {
   resetForm()
 }
 
-const visible = ref(false)
-// 新增
-const onAdd = () => {
-  reset()
-  dataId.value = ''
-  visible.value = true
-}
-
-// 修改
-const onUpdate = async (id: string) => {
-  reset()
-  dataId.value = id
-  const res = await getApp(id)
-  Object.assign(form, res.data)
-  visible.value = true
-}
-
 // 保存
 const save = async () => {
   try {
@@ -127,5 +105,21 @@ const save = async () => {
   }
 }
 
+// 新增
+const onAdd = () => {
+  reset()
+  dataId.value = ''
+  visible.value = true
+}
+
+// 修改
+const onUpdate = async (id: string) => {
+  reset()
+  dataId.value = id
+  const { data } = await getApp(id)
+  Object.assign(form, data)
+  visible.value = true
+}
+
 defineExpose({ onAdd, onUpdate })
 </script>

src/views/open/app/AppDetailDrawer.vue

@@ -1,44 +1,44 @@
 <template>
   <a-drawer v-model:visible="visible" title="应用详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
-    <a-descriptions :column="1" size="large" class="general-description" bordered>
+    <a-descriptions :column="2" size="large" class="general-description">
-      <a-descriptions-item label="应用名称">{{ dataDetail?.name }}</a-descriptions-item>
+      <a-descriptions-item label="ID">{{ dataDetail?.id }}</a-descriptions-item>
-      <a-descriptions-item label="APPKEY">{{ dataDetail?.appKey }}</a-descriptions-item>
+      <a-descriptions-item label="名称">{{ dataDetail?.name }}</a-descriptions-item>
-      <a-descriptions-item label="应用状态"><GiCellTag :value="dataDetail?.status" :dict="app_type" /></a-descriptions-item>
+      <a-descriptions-item label="Access Key" :span="2"><CellCopy :content="dataDetail?.accessKey" /></a-descriptions-item>
-      <a-descriptions-item label="失效时间">{{ dataDetail?.expirationTime }}</a-descriptions-item>
+      <a-descriptions-item label="状态"><GiCellStatus :status="dataDetail?.status" /></a-descriptions-item>
+      <a-descriptions-item label="失效时间">{{ dataDetail?.expireTime }}</a-descriptions-item>
       <a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
       <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
       <a-descriptions-item label="修改人">{{ dataDetail?.updateUserString }}</a-descriptions-item>
       <a-descriptions-item label="修改时间">{{ dataDetail?.updateTime }}</a-descriptions-item>
-      <a-descriptions-item label="应用描述">{{ dataDetail?.appDesc }}</a-descriptions-item>
+      <a-descriptions-item label="描述">{{ dataDetail?.description }}</a-descriptions-item>
     </a-descriptions>
   </a-drawer>
 </template>
 
 <script setup lang="ts">
 import { useWindowSize } from '@vueuse/core'
-import { type AppDetailResp, getApp } from '@/apis/open/app'
+import { type AppResp, getApp as getData } from '@/apis/open/app'
-import { useDict } from '@/hooks/app'
 
-const { app_type } = useDict('app_type')
 const { width } = useWindowSize()
 
-const visible = ref(false)
 const dataId = ref('')
-const dataDetail = ref<AppDetailResp>()
+const dataDetail = ref<AppResp>()
+const visible = ref(false)
+
 // 查询详情
 const getDataDetail = async () => {
-  const res = await getApp(dataId.value)
+  const { data } = await getData(dataId.value)
-  dataDetail.value = res.data
+  dataDetail.value = data
 }
 
-// 打开详情
+// 打开
-const onDetail = async (id: string) => {
+const onOpen = async (id: string) => {
   dataId.value = id
   await getDataDetail()
   visible.value = true
 }
 
-defineExpose({ onDetail })
+defineExpose({ onOpen })
 </script>
 
 <style scoped lang="scss"></style>

src/views/open/app/AppGetSecretModal.vue

@@ -1,60 +0,0 @@
-<template>
-  <a-modal
-    v-model:visible="visible"
-    title="应用密钥/密码信息"
-    :mask-closable="false"
-    :esc-to-close="false"
-    :modal-style="{ maxWidth: '520px' }"
-    width="90%"
-  >
-    <a-watermark :content="content" :gap="[10, 10]">
-      <div style="width: 100%; height: 150px;">
-        <a-alert type="warning" style="margin-bottom: 18px">应用密码仅可查看一次，请妥善保管，遗失请刷新。</a-alert>
-        <a-descriptions :data="data" :column="1" bordered />
-      </div>
-    </a-watermark>
-  </a-modal>
-</template>
-
-<script setup lang="ts">
-import type { DescData } from '@arco-design/web-vue'
-import dayjs from 'dayjs'
-import { getAppSecret } from '@/apis/open/app'
-import { useUserStore } from '@/stores'
-
-const dataId = ref('')
-const initData = [{
-  label: '应用密钥（appkey）',
-  value: '*********',
-}, {
-  label: '应用密码（appsecret）',
-  value: '*********',
-}]
-const userStore = useUserStore()
-const content = ref([userStore.userInfo.username, dayjs().format('YYYY-MM-DD HH:mm:ss')])
-
-let data = reactive<DescData[]>(initData)
-
-const visible = ref(false)
-
-const getAppSecretData = async (id: string) => {
-  await getAppSecret(id).then((res) => {
-    data = [{
-      label: '应用密钥（appkey）',
-      value: res.data.appKey,
-    }, {
-      label: '应用密码（appsecret）',
-      value: res.data.appSecret,
-    }]
-  })
-}
-
-// 查看应用密钥/密码
-const onGetSecret = async (id: string) => {
-  dataId.value = ''
-  await getAppSecretData(id)
-  visible.value = true
-}
-
-defineExpose({ onGetSecret })
-</script>

src/views/open/app/index.vue

@@ -1,22 +1,19 @@
 <template>
   <div class="table-page">
     <GiTable
-      row-key="id"
       title="应用管理"
+      row-key="id"
       :data="dataList"
       :columns="columns"
       :loading="loading"
-      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1300 }"
       :pagination="pagination"
       :disabled-tools="['size']"
       :disabled-column-keys="['name']"
       @refresh="search"
     >
       <template #toolbar-left>
-        <a-input v-model="queryForm.name" placeholder="请输入应用名称" allow-clear @change="search">
+        <a-input v-model="queryForm.description" placeholder="请输入名称/描述" allow-clear @change="search">
-          <template #prefix><icon-search /></template>
-        </a-input>
-        <a-input v-model="queryForm.appKey" placeholder="请输入APPKEY" allow-clear @change="search">
           <template #prefix><icon-search /></template>
         </a-input>
         <a-button @click="reset">
@@ -34,61 +31,84 @@
           <template #default>导出</template>
         </a-button>
       </template>
-      <template #name="{ record }">
+      <template #accessKey="{ record }">
-        <a-link @click="onDetail(record)">{{ record.name }}</a-link>
+        <CellCopy :content="record.accessKey" />
       </template>
-      <template #appSecret="{ record }">
+      <template #secretKey="{ record }">
-        *********
+        <a-space v-if="record.secretKey" :size="[2]">
-        <a-button size="mini" style="margin-left: 10px" @click="onGetSecret(record)">
+          <CellCopy :content="record.secretKey" />
-          <template #icon><icon-eye /></template>
+          <a-tooltip content="隐藏">
+            <a-button type="text" size="mini" @click="onSecretHide(record)">
+              <template #icon><icon-eye-invisible size="16" /></template>
             </a-button>
-        <a-button size="mini" style="margin-left: 2px" @click="onRefreshAK(record)">
+          </a-tooltip>
-          <template #icon><icon-refresh /></template>
+        </a-space>
+        <a-space v-else :size="[2]">
+          <span>********************</span>
+          <a-tooltip content="显示">
+            <a-button v-permission="['open:app:secret']" type="text" size="mini" @click="onSecret(record)">
+              <template #icon><icon-eye size="16" /></template>
             </a-button>
+          </a-tooltip>
+        </a-space>
       </template>
       <template #status="{ record }">
-        <GiCellTag :value="record.status" :dict="app_type" />
+        <GiCellStatus :status="record.status" />
       </template>
       <template #action="{ record }">
         <a-space>
-          <a-link v-permission="['open:app:update']" @click="onUpdate(record)">修改</a-link>
+          <a-link v-permission="['open:app:detail']" title="详情" @click="onDetail(record)">详情</a-link>
+          <a-link v-permission="['open:app:update']" title="修改" @click="onUpdate(record)">修改</a-link>
           <a-link
             v-permission="['open:app:delete']"
             status="danger"
             :disabled="record.disabled"
+            :title="record.disabled ? '禁止删除' : '删除'"
             @click="onDelete(record)"
           >
             删除
           </a-link>
+          <a-dropdown>
+            <a-button v-if="has.hasPermOr(['open:app:resetSecret'])" type="text" size="mini" title="更多">
+              <template #icon>
+                <icon-more :size="16" />
+              </template>
+            </a-button>
+            <template #content>
+              <a-doption v-permission="['open:app:resetSecret']" title="重置密钥" @click="onResetSecret(record)">重置密钥</a-doption>
+            </template>
+          </a-dropdown>
         </a-space>
       </template>
     </GiTable>
+
     <AppAddModal ref="AppAddModalRef" @save-success="search" />
     <AppDetailDrawer ref="AppDetailDrawerRef" />
-    <AppGetSecretModal ref="AppGetSecretModalRef" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { Message } from '@arco-design/web-vue'
+import { Message, Modal } from '@arco-design/web-vue'
 import AppAddModal from './AppAddModal.vue'
 import AppDetailDrawer from './AppDetailDrawer.vue'
-import AppGetSecretModal from './AppGetSecretModal.vue'
+import {
-import { type AppQuery, type AppResp, deleteApp, exportApp, listApp, refreshAppSecret } from '@/apis/open/app'
+  type AppQuery,
+  type AppResp,
+  deleteApp,
+  exportApp,
+  getAppSecret,
+  listApp,
+  resetAppSecret,
+} from '@/apis/open/app'
 import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useDownload, useTable } from '@/hooks'
 import { isMobile } from '@/utils'
 import has from '@/utils/has'
-import { useDict } from '@/hooks/app'
 
-defineOptions({ name: 'App' })
+defineOptions({ name: 'OpenApp' })
-
-const { app_type } = useDict('app_type')
 
 const queryForm = reactive<AppQuery>({
-  name: '',
+  sort: ['id,desc'],
-  appKey: '',
-  sort: ['createTime,desc'],
 })
 
 const {
@@ -98,34 +118,50 @@ const {
   search,
   handleDelete,
 } = useTable((page) => listApp({ ...queryForm, ...page }), { immediate: true })
-
 const columns: TableInstanceColumns[] = [
-  { title: '应用名称', dataIndex: 'name', slotName: 'name' },
+  {
-  { title: '应用密钥', dataIndex: 'appKey', slotName: 'appKey' },
+    title: '序号',
-  { title: '应用密码', dataIndex: 'appSecret', slotName: 'appSecret' },
+    width: 66,
-  { title: '应用状态', dataIndex: 'status', slotName: 'status' },
+    align: 'center',
-  { title: '失效时间', dataIndex: 'expirationTime', slotName: 'expirationTime' },
+    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
+    fixed: !isMobile() ? 'left' : undefined,
+  },
+  { title: '名称', dataIndex: 'name', slotName: 'name', fixed: !isMobile() ? 'left' : undefined },
+  { title: 'Access Key', dataIndex: 'accessKey', slotName: 'accessKey', width: 200 },
+  { title: 'Secret Key', dataIndex: 'secretKey', slotName: 'secretKey', width: 200 },
+  { title: '失效时间', dataIndex: 'expireTime', width: 180 },
+  { title: '状态', dataIndex: 'status', slotName: 'status', width: 80, align: 'center' },
+  { title: '描述', dataIndex: 'description', ellipsis: true, tooltip: true },
+  { title: '创建人', dataIndex: 'createUserString', ellipsis: true, tooltip: true, show: false },
+  { title: '创建时间', dataIndex: 'createTime', width: 180 },
+  { title: '修改人', dataIndex: 'updateUserString', ellipsis: true, tooltip: true, show: false },
+  { title: '修改时间', dataIndex: 'updateTime', width: 180, show: false },
   {
     title: '操作',
+    dataIndex: 'action',
     slotName: 'action',
-    width: 130,
+    width: 190,
     align: 'center',
     fixed: !isMobile() ? 'right' : undefined,
-    show: has.hasPermOr(['open:app:update', 'open:app:delete']),
+    show: has.hasPermOr([
+      'open:app:detail',
+      'open:app:update',
+      'open:app:delete',
+      'open:app:resetSecret',
+    ]),
   },
 ]
 
 // 重置
 const reset = () => {
-  queryForm.name = ''
+  queryForm.description = undefined
-  queryForm.appKey = ''
   search()
 }
 
 // 删除
 const onDelete = (record: AppResp) => {
   return handleDelete(() => deleteApp(record.id), {
-    content: `是否确定删除该条数据？`,
+    content: `是否确定删除应用「${record.name}」？`,
     showModal: true,
   })
 }
@@ -135,6 +171,38 @@ const onExport = () => {
   useDownload(() => exportApp(queryForm))
 }
 
+// 查看密钥
+const onSecret = async (record: AppResp) => {
+  const { data } = await getAppSecret(record.id)
+  record.secretKey = data.secretKey
+}
+
+// 隐藏显示密钥
+const onSecretHide = (record: AppResp) => {
+  record.secretKey = undefined
+}
+
+// 重置密钥
+const onResetSecret = async (record: AppResp) => {
+  Modal.warning({
+    title: '提示',
+    content: `是否确定重置应用「${record.name}」密钥？`,
+    okButtonProps: { status: 'warning' },
+    hideCancel: false,
+    maskClosable: false,
+    onBeforeOk: async () => {
+      try {
+        await resetAppSecret(record.id)
+        Message.success('重置成功')
+        search()
+        return true
+      } catch (error) {
+        return false
+      }
+    },
+  })
+}
+
 const AppAddModalRef = ref<InstanceType<typeof AppAddModal>>()
 // 新增
 const onAdd = () => {
@@ -149,20 +217,7 @@ const onUpdate = (record: AppResp) => {
 const AppDetailDrawerRef = ref<InstanceType<typeof AppDetailDrawer>>()
 // 详情
 const onDetail = (record: AppResp) => {
-  AppDetailDrawerRef.value?.onDetail(record.id)
+  AppDetailDrawerRef.value?.onOpen(record.id)
-}
-
-// 查看应用密钥/密码
-const AppGetSecretModalRef = ref<InstanceType<typeof AppGetSecretModal>>()
-const onGetSecret = (record: AppResp) => {
-  AppGetSecretModalRef.value?.onGetSecret(record.id)
-}
-
-// 刷新应用密码
-const onRefreshAK = async (record: AppResp) => {
-  await refreshAppSecret(record.id)
-  Message.success('刷新成功')
-  search()
 }
 </script>
 

src/views/system/user/index.vue

@@ -70,7 +70,7 @@
                 删除
               </a-link>
               <a-dropdown>
-                <a-button v-if="has.hasPermOr(['system:user:resetPwd', 'system:user:updateRole'])" type="text" size="mini">
+                <a-button v-if="has.hasPermOr(['system:user:resetPwd', 'system:user:updateRole'])" type="text" size="mini" title="更多">
                   <template #icon>
                     <icon-more :size="16" />
                   </template>