fix(权限控制): 修复不同角色用户访问权限问题并优化数据展示

- 在 OcrChannelView、OcrFavoriteView 和 OcrView 中增加了权限控制
-修复了普通用户和访客可以查看管理员操作按钮的问题
-增加了 JSON 数据格式校验功能
- 优化了详细信息展示格式
- 调整了部分 UI 样式，如增加宽度等

src/views/OcrChannelView.vue

@@ -1,13 +1,13 @@
 <template>
-    <PagingTable v-if="isAdmin" url="/ocrChannel" :query="query" ref="table">
+    <PagingTable v-if="isAdminAndOperator" url="/ocrChannel" :query="query" ref="table">
         <template #filter>
-            <ElInput class="!w-52" placeholder="请输入" clearable v-model="query.id" @keyup.enter="table.refresh(true)">
+            <ElInput class="!w-52" placeholder="请输入" v-if="isAdmin" clearable v-model="query.id" @keyup.enter="table.refresh(true)">
                 <template #append>
                     <ElButton :icon="Search" @click="table.refresh(true)" />
                 </template>
             </ElInput>
-            <ElButton :icon="Plus" @click="onEdit()">添加</ElButton>
-            <ElButton :icon="Refresh" @click="onUpdateStatistics()">更新统计数据</ElButton>
+            <ElButton :icon="Plus" v-if="isAdmin" @click="onEdit()">添加</ElButton>
+            <ElButton :icon="Refresh" v-if="isAdmin" @click="onUpdateStatistics()">更新统计数据</ElButton>
         </template>
         <ElTableColumn prop="id" label="#" width="80" />
         <ElTableColumn prop="name" label="渠道名" align="center" />
@@ -15,7 +15,7 @@
         <ElTableColumn prop="recordNum" label="返回记录数量" align="center" />
         <ElTableColumn prop="scanNum" label="扫描图片数量" align="center" />
         <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" align="center" />
-        <ElTableColumn label="操作" align="center" width="120">
+        <ElTableColumn v-if="isAdmin" label="操作" align="center" width="120">
             <template #default="{ row }">
                 <ElButton @click="onEdit(row)">编辑</ElButton>
             </template>
@@ -72,7 +72,8 @@ const { showEditDialog } = setupEditDialog(model)
 const rules = {
     name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
 }
-const isAdmin = inject('isAdminAndOperator')
+const isAdmin = inject('isAdmin')
+const isAdminAndOperator = inject('isAdminAndOperator')
 const isApi = inject('isApi')
 const tableData = ref([])
 

src/views/OcrFavoriteView.vue

@@ -75,16 +75,23 @@
                     <div v-if="row.detail" class="detail-content">
                         <div class="detail-item">
                             <div class="detail-left">
-                                <div v-for="(value, key) in JSON.parse(row.detail)" :key="key" class="detail-row">
-                                    <strong class="detail-key">{{ key }}</strong>
-                                    <span
-                                        class="detail-address"
-                                        @click="copyText(value.address)"
-                                        :title="'点击复制地址: ' + value.address"
-                                        >{{ value.address }}</span
-                                    >
-                                    <span class="detail-balance">{{ value.balance }}</span>
-                                </div>
+                                <template v-if="isValidJson(row.detail)">
+                                    <div v-for="(value, key) in JSON.parse(row.detail)" :key="key" class="detail-row">
+                                        <strong class="detail-key">{{ key.toUpperCase() }}</strong>
+                                        <span
+                                            class="detail-address"
+                                            @click="copyText(value.address)"
+                                            :title="'点击复制地址: ' + value.address"
+                                            >{{ value.address }}</span
+                                        >
+                                        <span class="detail-balance">{{ value.balance }}</span>
+                                    </div>
+                                </template>
+                                <template v-else>
+                                    <div class="detail-row">
+                                        <span class="text-red-500">数据格式错误</span>
+                                    </div>
+                                </template>
                             </div>
                             <div class="detail-right">
                                 <ElButton
@@ -400,6 +407,17 @@ async function handleFavoriteClick(row) {
         ElMessage.error('收藏失败')
     }
 }
+
+function isValidJson(str) {
+    if (!str) return false
+    try {
+        const obj = JSON.parse(str)
+        return typeof obj === 'object' && obj !== null
+    } catch (e) {
+        console.error('JSON解析错误:', e)
+        return false
+    }
+}
 </script>
 
 <style scoped>
@@ -451,9 +469,9 @@ async function handleFavoriteClick(row) {
     color: white;
     font-size: 12px;
     white-space: nowrap;
-    width: 45px;  /* 设置适合tron长度的固定宽度 */
-    text-align: center;  /* 文本居中对齐 */
-    display: inline-block;  /* 确保宽度生效 */
+    width: 55px;
+    text-align: center;
+    display: inline-block;
 }
 
 .detail-address {

src/views/OcrView.vue

@@ -22,7 +22,7 @@
                     <ElButton :icon="Search" @click="table.refresh(true)" />
                 </template>
             </ElInput>
-            <ElButton :icon="ClearAll" @click="exportDialog">清理图片</ElButton>
+            <ElButton :icon="ClearAll" @click="exportDialog" v-if="onlyAdmin">清理图片</ElButton>
             <ElButton :icon="Refresh" @click="table.refresh(true)" circle />
         </template>
         <ElTableColumn prop="id" label="#" width="80" />
@@ -71,16 +71,23 @@
                     <div v-if="row.detail" class="detail-content">
                         <div class="detail-item">
                             <div class="detail-left">
-                                <div v-for="(value, key) in JSON.parse(row.detail)" :key="key" class="detail-row">
-                                    <strong class="detail-key">{{ key }}</strong>
-                                    <span
-                                        class="detail-address"
-                                        @click="copyText(value.address)"
-                                        :title="'点击复制地址: ' + value.address"
-                                        >{{ value.address }}</span
-                                    >
-                                    <span class="detail-balance">{{ value.balance }}</span>
-                                </div>
+                                <template v-if="isValidJson(row.detail)">
+                                    <div v-for="(value, key) in JSON.parse(row.detail)" :key="key" class="detail-row">
+                                        <strong class="detail-key">{{ key.toUpperCase() }}</strong>
+                                        <span
+                                            class="detail-address"
+                                            @click="copyText(value.address)"
+                                            :title="'点击复制地址: ' + value.address"
+                                            >{{ value.address }}</span
+                                        >
+                                        <span class="detail-balance">{{ value.balance }}</span>
+                                    </div>
+                                </template>
+                                <template v-else>
+                                    <div class="detail-row">
+                                        <span class="text-red-500">数据格式错误</span>
+                                    </div>
+                                </template>
                             </div>
                             <div class="detail-right">
                                 <ElButton
@@ -213,6 +220,7 @@ const model = ref({})
 const { showEditDialog } = setupEditDialog(model)
 const { copy } = useClipboard({ legacy: true })
 const isAdmin = inject('isAdminAndOperator')
+const onlyAdmin = inject('isAdmin')
 
 const showExportDialog = ref(false)
 const dateValue = ref('')
@@ -499,6 +507,17 @@ function scrollToSelected() {
         }
     }
 }
+
+function isValidJson(str) {
+    if (!str) return false
+    try {
+        const obj = JSON.parse(str)
+        return typeof obj === 'object' && obj !== null
+    } catch (e) {
+        console.error('JSON解析错误:', e)
+        return false
+    }
+}
 </script>
 
 <style scoped>
@@ -550,7 +569,7 @@ function scrollToSelected() {
     color: white;
     font-size: 12px;
     white-space: nowrap;
-    width: 45px;
+    width: 55px;
     text-align: center;
     display: inline-block;
 }