feat: AI建议 & 许可证页面

src/components/LicenseInfo/SidePanel.vue

@@ -0,0 +1,137 @@
+<template>
+  <d-layout class="dlayout">
+    <d-header class="dheader">
+      <div class="title">
+        <h1>Apache License 2.0</h1>
+        <d-icon style="cursor: pointer;" name="icon-close" @click="emit('close')"></d-icon>
+      </div>
+      <div class="sub-title">
+        <span>分数</span>
+        <span>3</span>
+        <span>类型</span>
+        <d-tag color="#3ac295" size="sm">获准的</d-tag>
+      </div>
+    </d-header>
+    <d-content class="dcontent">
+      <div class="content-title"></div>
+      <div class="content-body">
+        <d-row>
+          <d-col :span="8">
+            <div class="content-body-col">
+              <span class="color-allow">允许的</span>
+              <span>Commercial Use</span>
+              <span>Modify</span>
+              <span>Distribute</span>
+              <span>Sublicense</span>
+              <span>Private Use</span>
+            </div>
+          </d-col>
+          <d-col :span="8">
+            <div class="content-body-col">
+              <span class="color-info">必要的</span>
+              <span>Include Copyright</span>
+              <span>Include License</span>
+              <span>State changes</span>
+              <span>Include Notice</span>
+            </div>
+          </d-col>
+          <d-col :span="8">
+            <div class="content-body-col">
+              <span class="color-danger">受限的</span>
+              <span>Place Warranty</span>
+              <span>Hold Liable</span>
+              <span>Use Trademark</span>
+            </div>
+          </d-col>
+        </d-row>
+      </div>
+    </d-content>
+    <d-footer class="dfooter">
+      <div>
+        <span>影响组件：</span>
+        <span>request</span>
+      </div>
+      <div>
+        <span>当前版本：</span>
+        <span>2.0</span>
+      </div>
+    </d-footer>
+  </d-layout>
+</template>
+
+<script setup>
+import { ref, defineEmits } from 'vue';
+
+const emit = defineEmits(['close']);
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+
+.dlayout {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 8px;
+  padding: 12px;
+
+  .dheader, .dcontent{
+    width: 100%;
+    border-bottom: 1px solid gray;
+    padding: 12px;
+  }
+
+  .dfooter {
+    width: 100%;
+    padding: 12px;
+  }
+
+  .title {
+    font-size: 20px;
+    font-weight: bold;
+    display: flex;
+    justify-content: space-between;
+    d-icon {
+      cursor: pointer;
+    }
+  }
+
+  .sub-title {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+}
+
+.content-body-col {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.dfooter {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 4px;
+}
+
+.side-panel {
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.color-danger {
+  color: $devui-danger;
+}
+
+.color-info {
+  color: $devui-warning;
+}
+
+.color-allow {
+  color: $devui-success;
+}
+</style>