Parcourir la source

feat:优化 infra 的实现代码

YunaiV il y a 4 mois
Parent
commit
b15f2327db

+ 23 - 7
src/pages-infra/apiAccessLog/components/search-form.vue

@@ -1,4 +1,13 @@
 <template>
 <template>
+  <!-- 搜索框入口 -->
+  <wd-search
+    :placeholder="searchPlaceholder"
+    :hide-cancel="true"
+    disabled
+    @click="visible = true"
+  />
+
+  <!-- 搜索弹窗 -->
   <wd-popup
   <wd-popup
     v-model="visible"
     v-model="visible"
     position="top"
     position="top"
@@ -44,7 +53,7 @@
 </template>
 </template>
 
 
 <script lang="ts" setup>
 <script lang="ts" setup>
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 
 
 /** 搜索表单数据 */
 /** 搜索表单数据 */
 export interface SearchFormData {
 export interface SearchFormData {
@@ -53,19 +62,26 @@ export interface SearchFormData {
 }
 }
 
 
 const props = defineProps<{
 const props = defineProps<{
-  modelValue: boolean
   searchParams?: Partial<SearchFormData> // 初始搜索参数
   searchParams?: Partial<SearchFormData> // 初始搜索参数
 }>()
 }>()
 
 
 const emit = defineEmits<{
 const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
   'search': [data: SearchFormData]
   'search': [data: SearchFormData]
   'reset': []
   'reset': []
 }>()
 }>()
 
 
-const visible = computed({
-  get: () => props.modelValue,
-  set: (val: boolean) => emit('update:modelValue', val),
+const visible = ref(false)
+
+/** 搜索条件 placeholder 拼接 */
+const searchPlaceholder = computed(() => {
+  const conditions: string[] = []
+  if (props.searchParams?.userId) {
+    conditions.push(`用户编号:${props.searchParams.userId}`)
+  }
+  if (props.searchParams?.applicationName) {
+    conditions.push(`应用名:${props.searchParams.applicationName}`)
+  }
+  return conditions.length > 0 ? conditions.join(' | ') : '搜索日志'
 })
 })
 
 
 const formData = reactive<SearchFormData>({
 const formData = reactive<SearchFormData>({
@@ -74,7 +90,7 @@ const formData = reactive<SearchFormData>({
 })
 })
 
 
 /** 监听弹窗打开,同步外部参数 */
 /** 监听弹窗打开,同步外部参数 */
-watch(() => props.modelValue, (val) => {
+watch(visible, (val) => {
   if (val && props.searchParams) {
   if (val && props.searchParams) {
     formData.userId = props.searchParams.userId
     formData.userId = props.searchParams.userId
     formData.applicationName = props.searchParams.applicationName
     formData.applicationName = props.searchParams.applicationName

+ 13 - 10
src/pages-infra/apiAccessLog/detail/index.vue

@@ -8,8 +8,8 @@
     />
     />
 
 
     <!-- 详情内容 -->
     <!-- 详情内容 -->
-    <view class="p-24rpx">
-      <wd-cell-group custom-class="cell-group" border>
+    <view>
+      <wd-cell-group border>
         <wd-cell title="日志编号" :value="String(formData?.id ?? '-')" />
         <wd-cell title="日志编号" :value="String(formData?.id ?? '-')" />
         <wd-cell title="链路追踪" :value="formData?.traceId || '-'" />
         <wd-cell title="链路追踪" :value="formData?.traceId || '-'" />
         <wd-cell title="应用名" :value="formData?.applicationName || '-'" />
         <wd-cell title="应用名" :value="formData?.applicationName || '-'" />
@@ -58,9 +58,11 @@ import { getApiAccessLog } from '@/api/infra/apiAccessLog'
 import { getDictLabel } from '@/hooks/useDict'
 import { getDictLabel } from '@/hooks/useDict'
 import { DICT_TYPE } from '@/utils/constants'
 import { DICT_TYPE } from '@/utils/constants'
 import { formatDateTime } from '@/utils/date'
 import { formatDateTime } from '@/utils/date'
+import { useToast } from 'wot-design-uni'
+import { navigateBackPlus } from '@/utils'
 
 
 const props = defineProps<{
 const props = defineProps<{
-  id: number
+  id: number | any
 }>()
 }>()
 
 
 definePage({
 definePage({
@@ -71,10 +73,11 @@ definePage({
 })
 })
 
 
 const formData = ref<ApiAccessLog>() // 详情数据
 const formData = ref<ApiAccessLog>() // 详情数据
+const toast = useToast()
 
 
 /** 返回上一页 */
 /** 返回上一页 */
 function handleBack() {
 function handleBack() {
-  uni.navigateBack()
+  navigateBackPlus('/pages-infra/apiAccessLog/index')
 }
 }
 
 
 /** 复制文本并提示 */
 /** 复制文本并提示 */
@@ -98,7 +101,12 @@ async function getDetail() {
   if (!props.id) {
   if (!props.id) {
     return
     return
   }
   }
-  formData.value = await getApiAccessLog(props.id)
+  toast.loading('加载中...')
+  try {
+    formData.value = await getApiAccessLog(props.id)
+  } finally {
+    toast.close()
+  }
 }
 }
 
 
 /** 获取请求信息 */
 /** 获取请求信息 */
@@ -124,9 +132,4 @@ onMounted(() => {
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
-:deep(.cell-group) {
-  border-radius: 12rpx;
-  overflow: hidden;
-  box-shadow: 0 3rpx 8rpx rgba(24, 144, 255, 0.06);
-}
 </style>
 </style>

+ 10 - 18
src/pages-infra/apiAccessLog/index.vue

@@ -1,18 +1,18 @@
 <template>
 <template>
-  <!-- TODO @芋艿:【优化:全局样式】后续要全局样式么 -->
   <view class="page-container">
   <view class="page-container">
     <!-- 顶部导航栏 -->
     <!-- 顶部导航栏 -->
     <wd-navbar
     <wd-navbar
       title="API 访问日志"
       title="API 访问日志"
       left-arrow placeholder safe-area-inset-top fixed
       left-arrow placeholder safe-area-inset-top fixed
       @click-left="handleBack"
       @click-left="handleBack"
-    >
-      <template #right>
-        <view class="flex items-center" @click="searchVisible = !searchVisible">
-          <wd-icon name="search" size="20px" />
-        </view>
-      </template>
-    </wd-navbar>
+    />
+
+    <!-- 搜索组件 -->
+    <SearchForm
+      :search-params="queryParams"
+      @search="handleQuery"
+      @reset="handleReset"
+    />
 
 
     <!-- 日志列表 -->
     <!-- 日志列表 -->
     <view class="p-24rpx">
     <view class="p-24rpx">
@@ -68,14 +68,6 @@
         @reload="loadMore"
         @reload="loadMore"
       />
       />
     </view>
     </view>
-
-    <!-- 搜索弹窗 -->
-    <SearchForm
-      v-model="searchVisible"
-      :search-params="queryParams"
-      @search="handleQuery"
-      @reset="handleReset"
-    />
   </view>
   </view>
 </template>
 </template>
 
 
@@ -87,6 +79,7 @@ import { onReachBottom } from '@dcloudio/uni-app'
 import { onMounted, reactive, ref } from 'vue'
 import { onMounted, reactive, ref } from 'vue'
 import { getApiAccessLogPage } from '@/api/infra/apiAccessLog'
 import { getApiAccessLogPage } from '@/api/infra/apiAccessLog'
 import { formatDateTime } from '@/utils/date'
 import { formatDateTime } from '@/utils/date'
+import { navigateBackPlus } from '@/utils'
 import SearchForm from './components/search-form.vue'
 import SearchForm from './components/search-form.vue'
 
 
 definePage({
 definePage({
@@ -99,7 +92,6 @@ definePage({
 const total = ref(0) // 列表的总页数
 const total = ref(0) // 列表的总页数
 const list = ref<ApiAccessLog[]>([]) // 列表的数据
 const list = ref<ApiAccessLog[]>([]) // 列表的数据
 const loadMoreState = ref<LoadMoreState>('loading') // 加载更多状态
 const loadMoreState = ref<LoadMoreState>('loading') // 加载更多状态
-const searchVisible = ref(false) // 搜索弹窗
 const queryParams = reactive({
 const queryParams = reactive({
   pageNo: 1,
   pageNo: 1,
   pageSize: 10,
   pageSize: 10,
@@ -109,7 +101,7 @@ const queryParams = reactive({
 
 
 /** 返回上一页 */
 /** 返回上一页 */
 function handleBack() {
 function handleBack() {
-  uni.navigateBack()
+  navigateBackPlus()
 }
 }
 
 
 /** 查询日志列表 */
 /** 查询日志列表 */

+ 26 - 7
src/pages-infra/apiErrorLog/components/search-form.vue

@@ -1,4 +1,12 @@
 <template>
 <template>
+  <!-- 搜索框入口 -->
+  <wd-search
+    :placeholder="searchPlaceholder"
+    :hide-cancel="true"
+    disabled
+    @click="visible = true"
+  />
+
   <wd-popup
   <wd-popup
     v-model="visible"
     v-model="visible"
     position="top"
     position="top"
@@ -62,7 +70,7 @@
 </template>
 </template>
 
 
 <script lang="ts" setup>
 <script lang="ts" setup>
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 
 
 /** 搜索表单数据 */
 /** 搜索表单数据 */
 export interface SearchFormData {
 export interface SearchFormData {
@@ -72,19 +80,30 @@ export interface SearchFormData {
 }
 }
 
 
 const props = defineProps<{
 const props = defineProps<{
-  modelValue: boolean
   searchParams?: Partial<SearchFormData> // 初始搜索参数
   searchParams?: Partial<SearchFormData> // 初始搜索参数
 }>()
 }>()
 
 
 const emit = defineEmits<{
 const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
   'search': [data: SearchFormData]
   'search': [data: SearchFormData]
   'reset': []
   'reset': []
 }>()
 }>()
 
 
-const visible = computed({
-  get: () => props.modelValue,
-  set: (val: boolean) => emit('update:modelValue', val),
+const visible = ref(false)
+
+/** 搜索条件 placeholder 拼接 */
+const searchPlaceholder = computed(() => {
+  const conditions: string[] = []
+  if (props.searchParams?.userId) {
+    conditions.push(`用户编号:${props.searchParams.userId}`)
+  }
+  if (props.searchParams?.applicationName) {
+    conditions.push(`应用名:${props.searchParams.applicationName}`)
+  }
+  if (props.searchParams?.processStatus !== undefined && props.searchParams?.processStatus !== -1) {
+    const statusMap: Record<number, string> = { 0: '未处理', 1: '已处理', 2: '已忽略' }
+    conditions.push(`状态:${statusMap[props.searchParams.processStatus]}`)
+  }
+  return conditions.length > 0 ? conditions.join(' | ') : '搜索日志'
 })
 })
 
 
 const formData = reactive<SearchFormData>({
 const formData = reactive<SearchFormData>({
@@ -94,7 +113,7 @@ const formData = reactive<SearchFormData>({
 })
 })
 
 
 /** 监听弹窗打开,同步外部参数 */
 /** 监听弹窗打开,同步外部参数 */
-watch(() => props.modelValue, (val) => {
+watch(visible, (val) => {
   if (val && props.searchParams) {
   if (val && props.searchParams) {
     formData.userId = props.searchParams.userId
     formData.userId = props.searchParams.userId
     formData.applicationName = props.searchParams.applicationName
     formData.applicationName = props.searchParams.applicationName

+ 11 - 11
src/pages-infra/apiErrorLog/detail/index.vue

@@ -8,8 +8,8 @@
     />
     />
 
 
     <!-- 详情内容 -->
     <!-- 详情内容 -->
-    <view class="p-24rpx pb-200rpx">
-      <wd-cell-group custom-class="cell-group" border>
+    <view>
+      <wd-cell-group border>
         <wd-cell title="日志编号" :value="String(formData?.id ?? '-')" />
         <wd-cell title="日志编号" :value="String(formData?.id ?? '-')" />
         <wd-cell title="链路追踪" :value="formData?.traceId || '-'" />
         <wd-cell title="链路追踪" :value="formData?.traceId || '-'" />
         <wd-cell title="应用名" :value="formData?.applicationName || '-'" />
         <wd-cell title="应用名" :value="formData?.applicationName || '-'" />
@@ -67,9 +67,10 @@ import { getApiErrorLog, updateApiErrorLogStatus } from '@/api/infra/apiErrorLog
 import { getDictLabel } from '@/hooks/useDict'
 import { getDictLabel } from '@/hooks/useDict'
 import { DICT_TYPE, InfraApiErrorLogProcessStatusEnum } from '@/utils/constants'
 import { DICT_TYPE, InfraApiErrorLogProcessStatusEnum } from '@/utils/constants'
 import { formatDateTime } from '@/utils/date'
 import { formatDateTime } from '@/utils/date'
+import { navigateBackPlus } from '@/utils'
 
 
 const props = defineProps<{
 const props = defineProps<{
-  id: number
+  id: number | any
 }>()
 }>()
 
 
 definePage({
 definePage({
@@ -85,7 +86,7 @@ const processing = ref(false) // 处理中
 
 
 /** 返回上一页 */
 /** 返回上一页 */
 function handleBack() {
 function handleBack() {
-  uni.navigateBack()
+  navigateBackPlus('/pages-infra/apiErrorLog/index')
 }
 }
 
 
 /** 复制文本并提示 */
 /** 复制文本并提示 */
@@ -109,7 +110,12 @@ async function getDetail() {
   if (!props.id) {
   if (!props.id) {
     return
     return
   }
   }
-  formData.value = await getApiErrorLog(props.id)
+  toast.loading('加载中...')
+  try {
+    formData.value = await getApiErrorLog(props.id)
+  } finally {
+    toast.close()
+  }
 }
 }
 
 
 /** 获取请求信息 */
 /** 获取请求信息 */
@@ -153,12 +159,6 @@ onMounted(() => {
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
-:deep(.cell-group) {
-  border-radius: 12rpx;
-  overflow: hidden;
-  box-shadow: 0 3rpx 8rpx rgba(24, 144, 255, 0.06);
-}
-
 .safe-area-inset-bottom {
 .safe-area-inset-bottom {
   padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
   padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
 }
 }

+ 10 - 18
src/pages-infra/apiErrorLog/index.vue

@@ -1,18 +1,18 @@
 <template>
 <template>
-  <!-- TODO @芋艿:【优化:全局样式】后续要全局样式么 -->
   <view class="page-container">
   <view class="page-container">
     <!-- 顶部导航栏 -->
     <!-- 顶部导航栏 -->
     <wd-navbar
     <wd-navbar
       title="API 错误日志"
       title="API 错误日志"
       left-arrow placeholder safe-area-inset-top fixed
       left-arrow placeholder safe-area-inset-top fixed
       @click-left="handleBack"
       @click-left="handleBack"
-    >
-      <template #right>
-        <view class="flex items-center" @click="searchVisible = !searchVisible">
-          <wd-icon name="search" size="20px" />
-        </view>
-      </template>
-    </wd-navbar>
+    />
+
+    <!-- 搜索组件 -->
+    <SearchForm
+      :search-params="queryParams"
+      @search="handleQuery"
+      @reset="handleReset"
+    />
 
 
     <!-- 日志列表 -->
     <!-- 日志列表 -->
     <view class="p-24rpx">
     <view class="p-24rpx">
@@ -58,14 +58,6 @@
         @reload="loadMore"
         @reload="loadMore"
       />
       />
     </view>
     </view>
-
-    <!-- 搜索弹窗 -->
-    <SearchForm
-      v-model="searchVisible"
-      :search-params="queryParams"
-      @search="handleQuery"
-      @reset="handleReset"
-    />
   </view>
   </view>
 </template>
 </template>
 
 
@@ -78,6 +70,7 @@ import { onMounted, reactive, ref } from 'vue'
 import { getApiErrorLogPage } from '@/api/infra/apiErrorLog'
 import { getApiErrorLogPage } from '@/api/infra/apiErrorLog'
 import { DICT_TYPE } from '@/utils/constants'
 import { DICT_TYPE } from '@/utils/constants'
 import { formatDateTime } from '@/utils/date'
 import { formatDateTime } from '@/utils/date'
+import { navigateBackPlus } from '@/utils'
 import SearchForm from './components/search-form.vue'
 import SearchForm from './components/search-form.vue'
 
 
 definePage({
 definePage({
@@ -90,7 +83,6 @@ definePage({
 const total = ref(0) // 列表的总页数
 const total = ref(0) // 列表的总页数
 const list = ref<ApiErrorLog[]>([]) // 列表的数据
 const list = ref<ApiErrorLog[]>([]) // 列表的数据
 const loadMoreState = ref<LoadMoreState>('loading') // 加载更多状态
 const loadMoreState = ref<LoadMoreState>('loading') // 加载更多状态
-const searchVisible = ref(false) // 搜索弹窗
 const queryParams = reactive({
 const queryParams = reactive({
   pageNo: 1,
   pageNo: 1,
   pageSize: 10,
   pageSize: 10,
@@ -101,7 +93,7 @@ const queryParams = reactive({
 
 
 /** 返回上一页 */
 /** 返回上一页 */
 function handleBack() {
 function handleBack() {
-  uni.navigateBack()
+  navigateBackPlus()
 }
 }
 
 
 /** 查询日志列表 */
 /** 查询日志列表 */

+ 2 - 2
src/pages-infra/webSocket/index.vue

@@ -168,7 +168,7 @@ import type { User } from '@/api/system/user'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { getSimpleUserList } from '@/api/system/user'
 import { getSimpleUserList } from '@/api/system/user'
 import { useTokenStore } from '@/store/token'
 import { useTokenStore } from '@/store/token'
-import { getEnvBaseUrlRoot } from '@/utils'
+import { getEnvBaseUrlRoot, navigateBackPlus } from '@/utils'
 import { formatDateTime } from '@/utils/date'
 import { formatDateTime } from '@/utils/date'
 
 
 definePage({
 definePage({
@@ -458,7 +458,7 @@ function handleUserChange({ value }: { value: string[] }) {
 
 
 /** 返回上一页 */
 /** 返回上一页 */
 function handleBack() {
 function handleBack() {
-  uni.navigateBack()
+  navigateBackPlus()
 }
 }
 
 
 // ======================= 生命周期 =======================
 // ======================= 生命周期 =======================