From 24d1195d37e2af20d62929d9a22411939b01c089 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B1=AA=E5=B0=91=E4=BC=9F?= <wsw.sun@qq.com>
Date: Sun, 16 Mar 2025 11:15:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=84=E7=BB=87=E9=A2=84=E8=AD=A6?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/main.scss                      | 17 ++++++++
 .../Detail/EarlyWarningOrganization.vue       | 14 +++++--
 .../Detail/EarlyWarningPerson.vue             | 37 ++++++++--------
 .../PersonalCenter/Detail/OrgSubscription.vue | 41 ++++++++++++++++++
 .../Detail/PersonageSubscription.vue          | 42 +++++++++++++++++++
 .../PersonalCenter/Detail/SubscribeList.vue   | 41 ++++--------------
 6 files changed, 137 insertions(+), 55 deletions(-)
 create mode 100644 src/views/Jyh/PersonalCenter/Detail/OrgSubscription.vue
 create mode 100644 src/views/Jyh/PersonalCenter/Detail/PersonageSubscription.vue

diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index fea6bd9..cb3ede4 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -473,3 +473,20 @@ input {
   transform-origin: center;
   transform: rotateZ(180deg) !important;
 }
+
+// 二次确认框
+.popover-content {
+  p {
+    margin: 10px 0;
+    font-size: 14px;
+    max-width: 200px;
+    white-space: break-spaces;
+  }
+  footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-bottom: 10px;
+  }
+}
diff --git a/src/views/Jyh/PersonalCenter/Detail/EarlyWarningOrganization.vue b/src/views/Jyh/PersonalCenter/Detail/EarlyWarningOrganization.vue
index d4dcc34..c8505ba 100644
--- a/src/views/Jyh/PersonalCenter/Detail/EarlyWarningOrganization.vue
+++ b/src/views/Jyh/PersonalCenter/Detail/EarlyWarningOrganization.vue
@@ -22,6 +22,12 @@
             <d-status v-if="scope.row.level===1" type="running">提示</d-status>
           </template>
         </d-column>
+        <d-column field="status" header="状态">
+          <template #default="scope, text">
+            <d-tag v-if="scope.row.status === 1" type="danger" size="sm">未读</d-tag>
+            <d-tag v-if="scope.row.status === 2" type="success" size="sm">已读</d-tag>
+          </template>
+        </d-column>
       </d-table>
     </div>
   </Card>
@@ -32,10 +38,10 @@
 import { ref } from 'vue';
 
 const licenseTableData = ref([
-  {code: '05822156', name:'MIT License',detail: 'integer',level: 4},
-  {code: '05822156', name:'MIT License',detail: 'integer',level: 3},
-  {code: '05822156', name:'MIT License',detail: 'integer',level: 2},
-  {code: '05822156', name:'MIT License',detail: 'integer',level: 1},
+  {code: '05822156', name:'MIT License',detail: 'integer',level: 4, status: 1},
+  {code: '05822156', name:'MIT License',detail: 'integer',level: 3, status: 2},
+  {code: '05822156', name:'MIT License',detail: 'integer',level: 2, status: 2},
+  {code: '05822156', name:'MIT License',detail: 'integer',level: 1, status: 2},
 ]);
 
 </script>
diff --git a/src/views/Jyh/PersonalCenter/Detail/EarlyWarningPerson.vue b/src/views/Jyh/PersonalCenter/Detail/EarlyWarningPerson.vue
index f1ae10a..ae5d61b 100644
--- a/src/views/Jyh/PersonalCenter/Detail/EarlyWarningPerson.vue
+++ b/src/views/Jyh/PersonalCenter/Detail/EarlyWarningPerson.vue
@@ -2,24 +2,27 @@
   <Card simple class="jyh-card mt-3">
     <div class="card-title">个人预警通知列表</div>
     <div class="mb-3">
-      <d-table
-        class="jyh-table jyh-table-2"
-        :header-bg="true"
-        :data="licenseTableData"
-      >
+      <d-table class="jyh-table jyh-table-2" :header-bg="true" :data="licenseTableData">
         <d-column field="code" header="时间"></d-column>
         <d-column field="name" header="标题">
           <template #default="scope">
-            <a>{{scope.row.name}}</a>
+            <a>{{ scope.row.name }}</a>
           </template>
         </d-column>
         <d-column field="detail" header="详情"></d-column>
+        <d-column field="owner" header="订阅人"></d-column>
         <d-column field="level" header="级别">
-          <template #default="scope,text">
-            <d-status v-if="scope.row.level===4" type="error">危险</d-status>
-            <d-status v-if="scope.row.level===3" type="warning">严重</d-status>
-            <d-status v-if="scope.row.level===2" class="yellow-status">一般</d-status>
-            <d-status v-if="scope.row.level===1" type="running">提示</d-status>
+          <template #default="scope, text">
+            <d-status v-if="scope.row.level === 4" type="error">危险</d-status>
+            <d-status v-if="scope.row.level === 3" type="warning">严重</d-status>
+            <d-status v-if="scope.row.level === 2" class="yellow-status">一般</d-status>
+            <d-status v-if="scope.row.level === 1" type="running">提示</d-status>
+          </template>
+        </d-column>
+        <d-column field="status" header="状态">
+          <template #default="scope, text">
+            <d-tag v-if="scope.row.status === 1" type="danger" size="sm">未读</d-tag>
+            <d-tag v-if="scope.row.status === 2" type="success" size="sm">已读</d-tag>
           </template>
         </d-column>
       </d-table>
@@ -28,20 +31,16 @@
 </template>
 
 <script setup lang="ts">
-
 import { ref } from 'vue';
 
 const licenseTableData = ref([
-  {code: '05822156', name:'MIT License',detail: 'integer',level: 4},
-  {code: '05822156', name:'MIT License',detail: 'integer',level: 3},
-  {code: '05822156', name:'MIT License',detail: 'integer',level: 2},
-  {code: '05822156', name:'MIT License',detail: 'integer',level: 1},
+  { code: '05822156', name: 'MIT License', detail: 'integer', owner: 'admin', level: 4, status: 1 },
+  { code: '05822156', name: 'MIT License', detail: 'integer', owner: 'admin', level: 3, status: 2 },
+  { code: '05822156', name: 'MIT License', detail: 'integer', owner: 'admin', level: 2, status: 1 },
+  { code: '05822156', name: 'MIT License', detail: 'integer', owner: 'admin', level: 1, status: 2 }
 ]);
-
 </script>
 
 <style scoped lang="scss">
 @import 'devui-theme/styles-var/devui-var.scss';
-
-
 </style>
diff --git a/src/views/Jyh/PersonalCenter/Detail/OrgSubscription.vue b/src/views/Jyh/PersonalCenter/Detail/OrgSubscription.vue
new file mode 100644
index 0000000..952c2f5
--- /dev/null
+++ b/src/views/Jyh/PersonalCenter/Detail/OrgSubscription.vue
@@ -0,0 +1,41 @@
+<template>
+  <Card simple class="jyh-card mt-3">
+    <div class="card-title">组织订阅列表</div>
+    <div class="mb-3">
+      <d-table class="jyh-table jyh-table-2" :header-bg="true" :data="tableData">
+        <d-column field="code" header="订阅时间"></d-column>
+        <d-column field="name" header="软件/组件名称"></d-column>
+        <d-column field="detail" header="版本号"></d-column>
+        <d-column header="操作" width="100">
+          <template #default="scope">
+            <d-popover>
+              <d-button variant="text" color="primary"> 取消订阅 </d-button>
+              <template #content>
+                <div class="popover-content">
+                  <p>确定取消{{ scope.row.name }}订阅吗？</p>
+                  <footer>
+                    <d-button @click="hidden" size="sm">取消</d-button>
+                    <d-button @click="hidden" size="sm" color="danger" variant="solid">确认</d-button>
+                  </footer>
+                </div>
+              </template>
+            </d-popover>
+          </template>
+        </d-column>
+      </d-table>
+    </div>
+  </Card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const tableData = ref([{ code: '05822156', name: 'MIT License', detail: 'integer', owner: 'admin' }]);
+const hidden = () => {
+  // 模拟body点击操作
+  document.querySelector('body')?.click();
+};
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+</style>
diff --git a/src/views/Jyh/PersonalCenter/Detail/PersonageSubscription.vue b/src/views/Jyh/PersonalCenter/Detail/PersonageSubscription.vue
new file mode 100644
index 0000000..5cdb569
--- /dev/null
+++ b/src/views/Jyh/PersonalCenter/Detail/PersonageSubscription.vue
@@ -0,0 +1,42 @@
+<template>
+  <Card simple class="jyh-card mt-3">
+    <div class="card-title">个人订阅列表</div>
+    <div class="mb-3">
+      <d-table class="jyh-table jyh-table-2" :header-bg="true" :data="tableData">
+        <d-column field="code" header="订阅时间"></d-column>
+        <d-column field="name" header="软件/组件名称"></d-column>
+        <d-column field="detail" header="版本号"></d-column>
+        <d-column field="owner" header="订阅人"></d-column>
+        <d-column header="操作" width="100">
+          <template #default="scope">
+            <d-popover>
+              <d-button variant="text" color="primary"> 取消订阅 </d-button>
+              <template #content>
+                <div class="popover-content">
+                  <p>确定取消{{ scope.row.name }}订阅吗？</p>
+                  <footer>
+                    <d-button @click="hidden" size="sm">取消</d-button>
+                    <d-button @click="hidden" size="sm" color="danger" variant="solid">确认</d-button>
+                  </footer>
+                </div>
+              </template>
+            </d-popover>
+          </template>
+        </d-column>
+      </d-table>
+    </div>
+  </Card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const tableData = ref([{ code: '05822156', name: 'MIT License', detail: 'integer', owner: 'admin' }]);
+const hidden = () => {
+  // 模拟body点击操作
+  document.querySelector('body')?.click();
+};
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+</style>
diff --git a/src/views/Jyh/PersonalCenter/Detail/SubscribeList.vue b/src/views/Jyh/PersonalCenter/Detail/SubscribeList.vue
index 818204b..f794160 100644
--- a/src/views/Jyh/PersonalCenter/Detail/SubscribeList.vue
+++ b/src/views/Jyh/PersonalCenter/Detail/SubscribeList.vue
@@ -1,44 +1,21 @@
 <template>
   <div class="version-info">
-    <Card simple class="jyh-card mt-3">
-      <div class="card-title">订阅列表</div>
-      <div class="mb-3">
-        <d-table
-          class="jyh-table jyh-table-2"
-          :header-bg="true"
-          :data="licenseTableData"
-        >
-          <d-column field="code" header="订阅时间"></d-column>
-          <d-column field="name" header="名称"></d-column>
-          <d-column field="detail" header="版本号"></d-column>
-          <d-column header="操作" width="300">
-            <template #default="scope">
-              <d-button
-                variant="text"
-                color="primary"
-              >
-                取消订阅
-              </d-button>
-            </template>
-          </d-column>
-          <d-column field="detail" header="订阅人"></d-column>
-        </d-table>
-      </div>
-    </Card>
+    <d-tabs class="jyh-tabs jyh-tabs-2 jyh-tabs-4" type="wrapped" v-model="selectTab">
+      <d-tab id="gryj" title="个人订阅列表"></d-tab>
+      <d-tab id="zzyj" title="组织订阅列表"></d-tab>
+    </d-tabs>
+    <OrgSubscription v-if="selectTab === 'zzyj'" />
+    <PersonageSubscription v-else />
   </div>
 </template>
 
 <script setup lang="ts">
-
 import { ref } from 'vue';
-
-const licenseTableData = ref([{code: '05822156', name:'MIT License',detail: 'integer'}]);
-const CopyrightTableData = ref([{code: '05822156',detail: 'integer'}]);
-
+import OrgSubscription from './OrgSubscription.vue';
+import PersonageSubscription from './PersonageSubscription.vue';
+const selectTab = ref('gryj');
 </script>
 
 <style scoped lang="scss">
 @import 'devui-theme/styles-var/devui-var.scss';
-
-
 </style>