feat: pricing

Author: wangdan-fit2cloud

ui/src/components/app-icon/icons/about.ts

@@ -67,4 +67,26 @@ export default {
       ])
     },
   },
+  'app-pricing': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg',
+          },
+          [
+            h('path', {
+              d: 'M354.261333 774.314667c19.626667 6.613333 24.106667 25.813333 9.941334 40.704-21.504 21.802667-151.552 39.808-190.165334 45.482666-7.381333 1.109333-14.165333 3.328-21.248-0.725333-10.197333-5.674667-11.904-15.616-9.941333-28.885333 5.205333-35.84 21.76-127.018667 47.061333-193.365334 2.261333-5.930667 9.685333-6.869333 15.616-6.4 12.288 0 18.901333 5.461333 23.381334 18.005334 17.066667 48.981333 48.512 86.144 93.909333 111.445333 9.941333 5.461333 20.565333 9.941333 31.445333 13.738667zM902.698667 127.146667c2.346667 14.549333 3.968 28.842667 3.754666 43.605333-2.133333 73.386667-18.176 143.957333-44.8 212.394667-31.872 81.834667-78.549333 153.770667-143.914666 213.333333a18.133333 18.133333 0 0 0-6.4 16.853333c2.389333 22.016 4.053333 65.408 6.4 87.466667 5.205333 51.328-12.757333 93.269333-54.485334 123.050667-44.8 31.872-91.306667 61.44-137.258666 91.434666-29.013333 18.773333-64.64 1.621333-67.968-32.597333-3.754667-39.381333-6.613333-100.096-9.429334-139.477333-1.450667-19.925333-0.938667-19.925333-20.053333-22.485334-51.2-6.570667-91.050667-30.72-118.4-74.325333-14.165333-22.485333-21.248-47.36-23.594667-73.386667-0.725333-7.978667-4.010667-9.813333-11.349333-10.325333-41.258667-2.090667-103.893333-4.693333-145.152-7.722667-34.218667-2.56-51.669333-38.442667-33.28-68.437333 12.757333-21.12 26.453333-41.728 39.893333-62.592 14.378667-22.528 28.501333-44.8 42.922667-67.285333 26.410667-41.002667 64.384-63.061333 112.981333-63.530667 27.818667-0.213333 77.013333 4.693333 104.832 7.722667 5.418667 0.469333 9.216-0.213333 12.714667-4.181334 64.64-71.765333 144.384-120.277333 234.965333-152.618666a675.584 675.584 0 0 1 157.824-35.84c27.349333-2.858667 54.698667-3.797333 81.834667 1.152 14.848 2.816 15.616 3.498667 17.92 17.792z m-90.965334 65.92c-47.232 4.906667-93.184 15.36-137.941333 31.36-82.133333 29.312-148.138667 71.466667-199.850667 128.853333-23.381333 26.325333-53.248 35.242667-85.845333 32.426667-7.936-0.853333-15.829333-1.877333-23.765333-2.901334a634.453333 634.453333 0 0 0-70.954667-4.352c-19.029333 0.170667-30.72 6.826667-41.898667 24.149334l-21.333333 33.450666-24.618667 38.485334c17.792 1.066667 35.712 2.090667 53.802667 2.986666 20.48 1.322667 59.733333 6.186667 78.634667 21.973334 22.144 18.432 31.402667 41.514667 33.536 65.834666 1.365333 14.72 4.906667 26.197333 10.88 35.669334 13.269333 21.12 30.08 31.573333 57.6 35.114666l7.296 1.024c8.192 1.28 14.72 2.688 22.741333 5.546667 15.829333 5.632 30.421333 15.104 42.154667 29.866667 10.453333 13.141333 15.914667 48 18.773333 62.208 1.28 6.4 5.248 58.026667 6.229333 71.381333a2236.16 2236.16 0 0 0 76.501334-51.754667c16.170667-11.52 21.333333-23.338667 19.2-44.501333-1.024-9.813333-5.589333-80.256-6.4-87.722667a103.125333 103.125333 0 0 1 33.792-88.746666c53.546667-48.853333 93.696-108.885333 121.856-181.248 21.12-54.186667 33.749333-107.434667 37.802666-159.872a335.018667 335.018667 0 0 0-8.192 0.768zM672 405.333333a64 64 0 1 1 0-128 64 64 0 0 1 0 128z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
 }
+

ui/src/layout/layout-header/top-about/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <div>
+  <div class="flex align-center">
+    <el-button round @click="toUrl('https://maxkb.cn/pricing.html')" class="pricing-button mr-8">
+      <AppIcon iconName="app-pricing" class="mr-8"></AppIcon>
+      {{ $t('common.upgrade') }}
+    </el-button>
     <el-tooltip
       effect="dark"
       :content="$t('layout.github')"
@@ -43,9 +47,15 @@
 </template>
 <script setup lang="ts">
 import useStore from '@/stores'
-const { theme } = useStore()
+const { theme, user } = useStore()
 
 function toUrl(url: string) {
   window.open(url, '_blank')
 }
 </script>
+<style scoped lang="scss">
+.pricing-button {
+  background: linear-gradient(90deg, #3370ff 0%, #7f3bf5 100%);
+  color: #ffffff;
+}
+</style>

ui/src/locales/lang/en-US/common.ts

@@ -25,7 +25,7 @@ export default {
   refresh: 'Refresh',
   search: 'Search',
   clear: 'Clear',
-  professional: 'Purchase the Professional Edition',
+  upgrade: 'Upgrade',
   createDate: 'Create Date',
   createTime: 'Create Time',
   operation: 'Action',

ui/src/locales/lang/zh-CN/common.ts

@@ -26,7 +26,7 @@ export default {
   refresh: '刷新',
   search: '搜索',
   clear: '清空',
-  professional: '购买专业版',
+  upgrade: '升级',
   createDate: '创建日期',
   createTime: '创建时间',
   operation: '操作',

ui/src/locales/lang/zh-Hant/common.ts

@@ -25,7 +25,7 @@ export default {
   refresh: '重新整理',
   search: '搜尋',
   clear: '清除',
-  professional: '購買專業版',
+  upgrade: '升級',
   createDate: '創建日期',
   createTime: '創建時間',
   operation: '操作',

ui/src/styles/variables.scss

@@ -15,6 +15,7 @@
   /** header 组件 */
   --app-header-height: 56px;
   --app-header-padding: 0 20px;
+
   --app-header-bg-color: linear-gradient(90deg, #ebf1ff 24.34%, #e5fbf8 56.18%, #f2ebfe 90.18%);
   --app-logo-color: linear-gradient(180deg, #3370ff 0%, #7f3bf5 100%);
   --app-avatar-gradient-color: linear-gradient(270deg, #9258f7 0%, #3370ff 100%);