@2kog/pkg-widget 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/.editorconfig ADDED
@@ -0,0 +1,13 @@
1
+ # http://editorconfig.org
2
+ root = true
3
+
4
+ [*]
5
+ indent_size = 4
6
+ indent_style = space
7
+ end_of_line = lf
8
+ charset = utf-8
9
+ trim_trailing_whitespace = true
10
+ insert_final_newline = true
11
+
12
+ [*.md]
13
+ trim_trailing_whitespace = false
package/.env ADDED
@@ -0,0 +1,10 @@
1
+ STATIC_PATH=/
2
+ BASE_URL=/
3
+
4
+ VUE_APP_CMS_API=https://dev.api.iruxu.com
5
+ VUE_APP_UC_API=https://dev.uc.iruxu.com
6
+
7
+
8
+ # VITE_APP_CMS_API=https://dev.api.iruxu.com/api/cms
9
+ VITE_APP_CMS_API=http://localhost:14150/api/cms
10
+ VITE_APP_UC_API=https://dev.uc.iruxu.com/api/uc
@@ -0,0 +1,3 @@
1
+ {
2
+ "recommendations": ["Vue.volar"]
3
+ }
package/README.md ADDED
@@ -0,0 +1,11 @@
1
+ # 前端公共组件
2
+
3
+ 公共组件
4
+
5
+ ## Step.1 Install
6
+
7
+ ```
8
+ $ npm install @2kog/pkg-widget --save
9
+ ```
10
+
11
+ ## Step.2 Import
package/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" href="/favicon.ico" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Iruxu Pkg Widget</title>
8
+ </head>
9
+ <body>
10
+ <div id="app"></div>
11
+ <script type="module" src="/src/main.js"></script>
12
+ </body>
13
+ </html>
package/package.json ADDED
@@ -0,0 +1,37 @@
1
+ {
2
+ "name": "@2kog/pkg-widget",
3
+ "version": "0.1.9",
4
+ "type": "module",
5
+ "scripts": {
6
+ "dev": "vite",
7
+ "build": "vite build",
8
+ "preview": "vite preview",
9
+ "update": "npm install @2kog/pkg-common@latest --registry=https://registry.npmjs.org"
10
+ },
11
+ "dependencies": {
12
+ "@element-plus/icons-vue": "^2.3.1",
13
+ "@2kog/pkg-common": "^0.1.21",
14
+ "csslab": "^4.0.4",
15
+ "element-plus": "^2.8.4",
16
+ "flag-icons": "^7.2.3",
17
+ "intl-tel-input": "^24.5.0",
18
+ "libphonenumber-js": "^1.11.9",
19
+ "qrcode.vue": "^3.6.0",
20
+ "vue": "^3.4.37",
21
+ "vue-i18n": "^9.14.1"
22
+ },
23
+ "devDependencies": {
24
+ "@vitejs/plugin-vue": "^5.1.2",
25
+ "less": "^4.2.0",
26
+ "vite": "^5.4.1",
27
+ "vite-plugin-require": "^1.2.14"
28
+ },
29
+ "repository": {
30
+ "type": "git",
31
+ "url": "git+https://github.com/2kog/pkg-widget.git"
32
+ },
33
+ "bugs": {
34
+ "url": "https://github.com/2kog/pkg-widget/issues"
35
+ },
36
+ "homepage": "https://github.com/2kog/pkg-widget#readme"
37
+ }
Binary file
package/src/App.vue ADDED
@@ -0,0 +1,55 @@
1
+ <template>
2
+ <div id="app">
3
+ <h1>IRuxu Pkg Widget</h1>
4
+ <Logo></Logo>
5
+
6
+ <UploadImage :upload-fn="uploadImage" :domain="domain" :url="avatar"></UploadImage>
7
+
8
+ <langSelect selected="icon" :with-flag="false"></langSelect>
9
+ <pay></pay>
10
+ </div>
11
+ </template>
12
+
13
+ <script>
14
+ import Logo from "./components/common/logo.vue";
15
+ import UploadImage from "./components/common/upload-image.vue";
16
+ import {upload} from "./assets/data/upload";
17
+ import langSelect from "./components/common/lang-select.vue";
18
+ import pay from "./demo/pay-dialog-demo.vue";
19
+ export default {
20
+ name: "App",
21
+ components: {
22
+ Logo,
23
+ UploadImage,
24
+ langSelect,
25
+ pay
26
+ },
27
+ data() {
28
+ return {
29
+ app: "miipet",
30
+ active: "sixth",
31
+
32
+ domain: "https://cdn.iruxu.com/",
33
+ avatar: "user/avatar/2024/11/27/81348085.jpeg",
34
+
35
+ show: true
36
+ };
37
+ },
38
+ methods: {
39
+ uploadImage(file) {
40
+ return upload(file)
41
+ }
42
+ }
43
+ };
44
+ </script>
45
+
46
+ <style lang="less">
47
+ #app {
48
+ font-family: Avenir, Helvetica, Arial, sans-serif;
49
+ -webkit-font-smoothing: antialiased;
50
+ -moz-osx-font-smoothing: grayscale;
51
+ text-align: center;
52
+ color: #2c3e50;
53
+ margin-top: 60px;
54
+ }
55
+ </style>
@@ -0,0 +1 @@
1
+ @import "./widget.less";
@@ -0,0 +1,80 @@
1
+ /*
2
+ * @Author: iRuxu
3
+ * @Date: 2022-07-08 00:06:20
4
+ * @LastEditTime: 2022-07-13 18:55:51
5
+ * @Description:上传单个图片
6
+ */
7
+
8
+ .w-upload-image {
9
+ display: inline-block;
10
+
11
+ .u-image {
12
+ // border:5px solid #eee;
13
+ // background-color:#fafbfc;
14
+ .pr;
15
+ .size(148px);
16
+ img {
17
+ .size(100%);
18
+ .db;
19
+ }
20
+ .u-image-mask {
21
+ .pa;
22
+ .z(1);
23
+ .lt(0);
24
+ .size(100%);
25
+ background-color: rgba(0, 0, 0, 0.6);
26
+ .none;
27
+ }
28
+ .u-image-delete {
29
+ .pa;
30
+ .z(2);
31
+ .lt(0);
32
+ .size(100%);
33
+ display: flex;
34
+ justify-content: center;
35
+ align-items: center;
36
+ .pointer;
37
+ font-style: normal;
38
+ img,
39
+ svg {
40
+ .size(15%);
41
+ }
42
+ .none;
43
+ }
44
+ &:hover {
45
+ .u-image-mask {
46
+ .db;
47
+ }
48
+ .u-image-delete {
49
+ display: flex;
50
+ }
51
+ }
52
+ }
53
+ .u-upload {
54
+ background-color: #fbfdff;
55
+ border: 1px dashed #c0ccda;
56
+ border-radius: 6px;
57
+ box-sizing: border-box;
58
+ width: 148px;
59
+ height: 148px;
60
+ cursor: pointer;
61
+ outline: 0;
62
+ display: flex;
63
+ align-items: center;
64
+ justify-content: center;
65
+ }
66
+ .u-upload-icon {
67
+ color: #8c939d;
68
+ font-style: normal;
69
+ font-size: 38px;
70
+ font-weight: 300;
71
+ }
72
+ .u-upload-input {
73
+ .none;
74
+ }
75
+
76
+ .is-circle {
77
+ border-radius: 50%;
78
+ overflow: hidden;
79
+ }
80
+ }
@@ -0,0 +1,20 @@
1
+ .scrollbar(@trackColor: #fafafa, @thumbColor: #eee, @width: 4px) {
2
+ &::-webkit-scrollbar {
3
+ width: @width;
4
+ height: @width;
5
+ }
6
+ &::-webkit-scrollbar-track,
7
+ &::-webkit-scrollbar-track-piece {
8
+ background-color: @trackColor;
9
+ border-radius: 6px;
10
+ }
11
+ &::-webkit-scrollbar-thumb {
12
+ background-color: @thumbColor;
13
+ border-radius: 6px;
14
+ }
15
+ &::-webkit-scrollbar-button,
16
+ &::-webkit-scrollbar-corner,
17
+ &::-webkit-resizer {
18
+ display: none;
19
+ }
20
+ }
@@ -0,0 +1,40 @@
1
+ /***
2
+ GLOBAL DEFINITION 项目本地全局定义
3
+ 🚫 WARNING : 不可删除!
4
+ ***/
5
+
6
+ @import "./mixin.less";
7
+ // 颜色
8
+ // ====================
9
+ @color: #3d454d;
10
+ @color-link: #6777ef;
11
+
12
+ // 通用
13
+ @primary: #6777ef;
14
+ @primary-hover: #394eea;
15
+ @primary-shadow: #acb5f6;
16
+ @primary-danger: #fc922d;
17
+ @primary-tips: #98a6ad;
18
+ // 表单
19
+ @primary-border: #95a0f4;
20
+ @primary-border-light: #e4e6fc;
21
+ @primary-bgc: #e5eefe;
22
+ @primary-bgc-light: #fdfdff;
23
+
24
+ // 适配
25
+ // ====================
26
+ @4k: 3840px;
27
+ @2k: 2560px;
28
+ @pc: 1920px;
29
+ @smallpc: 1680px; //21寸显示器
30
+ @notebook: 1440px; //笔记本电脑
31
+ @mininote: 1280px; //小屏笔记本
32
+ @ipad: 1133px; //平板,适配到8.3mini6
33
+ @ipad-y: 1023px; //竖屏
34
+ @phone: 720px; //手机
35
+ @ip5: 374px; //iphone5超小屏
36
+
37
+ // 布局
38
+ // ====================
39
+ @aside-width: 18rem;
40
+ @aside-width-sm: 4rem;
@@ -0,0 +1,43 @@
1
+ .w-select {
2
+ position: relative;
3
+ .flex;
4
+ align-items: center;
5
+ .u-select-label {
6
+ background-color: #f5f7fa;
7
+ color: #909399;
8
+ position: relative;
9
+ display: inline-flex;
10
+ align-items: center;
11
+ justify-content: center;
12
+ height: 40px;
13
+ line-height: 40px;
14
+ border-radius: 4px;
15
+ padding: 0 20px;
16
+ white-space: nowrap;
17
+ border-right: 0;
18
+ border-top-right-radius: 0;
19
+ border-bottom-right-radius: 0;
20
+ box-shadow: 1px 0 0 0 #dcdfe6 inset, 0 1px 0 0 #dcdfe6 inset, 0 -1px 0 0 #dcdfe6 inset;
21
+ font-size: 14px;
22
+ box-sizing: border-box;
23
+ }
24
+ .el-select {
25
+ .el-input__wrapper,
26
+ .el-select__wrapper {
27
+ min-width: 180px;
28
+ height: 40px;
29
+ line-height: 40px;
30
+ border-top-left-radius: 0;
31
+ border-bottom-left-radius: 0;
32
+ box-sizing: border-box;
33
+ box-shadow: 0 1px 0 0 #dcdfe6 inset, 0 -1px 0 0 #dcdfe6 inset, 0 0 0 1px #dcdfe6 inset;
34
+ }
35
+ }
36
+ }
37
+
38
+ .w-card {
39
+ border: 1px solid #f1f1f4;
40
+ background-color: #fff;
41
+ border-radius: 1.5rem;
42
+ box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
43
+ }
@@ -0,0 +1,12 @@
1
+ import { $cms } from "@2kog/pkg-common/utils/api";
2
+ // 这是vite
3
+ const domain = import.meta.env.VITE_APP_CMS_API;
4
+
5
+ export const upload = async (file) => {
6
+ return $cms({ domain: domain }).post("/user/upload/avatar", file, {
7
+ headers: {
8
+ "Content-Type": file.type || "application/octet-stream",
9
+
10
+ },
11
+ })
12
+ }
@@ -0,0 +1 @@
1
+ <svg t="1734854926562" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6261" width="200" height="200"><path d="M516.170538 516.174692m-474.59393 0a474.59393 474.59393 0 1 0 949.18786 0 474.59393 474.59393 0 1 0-949.18786 0Z" fill="#70C4FF" p-id="6262"></path><path d="M516.170538 1007.384311c-270.856503 0-491.209619-220.35727-491.209619-491.209619C24.960919 245.318189 245.314035 24.965073 516.170538 24.965073c270.852349 0 491.209619 220.353116 491.209619 491.209619 0 270.852349-220.35727 491.209619-491.209619 491.209619z m0-949.18786c-252.529398 0-457.978241 205.448843-457.978241 457.978241s205.448843 457.978241 457.978241 457.97824 457.978241-205.448843 457.978241-457.97824S768.699936 58.196451 516.170538 58.196451z" fill="#6E6E96" p-id="6263"></path><path d="M509.889807 57.31582S462.39386 325.501351 565.764216 345.062171c103.362048 19.556666 148.062406-8.378461 201.137072 44.704512 53.070511 53.074665 172.337928 34.697713 175.997533-19.56082 0 0-72.635485-270.981121-433.009014-312.890043zM216.120269 872.070292s109.630317 16.686306 210.313086-25.32231c106.635339-44.484354 203.234802-151.128001 148.93473-277.984634-85.404642-199.479656-167.984618-93.932645-139.006856-250.531361 28.981916-156.598717-62.067907-219.007245-125.573071-219.007245-63.517626 0-340.654859 414.071282-94.667889 772.84555z" fill="#A3D9FF" opacity=".26" p-id="6264"></path><path d="M193.099232 863.484135s95.108205 15.764135 182.473498-23.951516c92.520311-42.062617 176.334001-142.903235 129.216061-262.831125-74.110128-188.621303-145.761133-88.815013-120.621596-236.881573 25.151999-148.058252-53.855603-207.081334-108.94492-207.081334-55.105933 0-295.551571 391.51133-82.123043 730.745548z" fill="#A3D9FF" opacity=".26" p-id="6265"></path><path d="M211.256026 152.523719c150.729224 23.129039 96.424998 151.884015 138.923777 302.430466 27.573736 97.667021 69.216807 83.398298 106.506568 155.834395 56.958582 75.318919-217.902302 326.851376-365.275157 116.716909C-54.669771 366.812108 211.256026 152.523719 211.256026 152.523719z" fill="#9EE3C3" p-id="6266"></path><path d="M236.669723 826.057295c-63.089772 0-118.025394-30.780564-158.862605-89.014401l-1.088327-1.549413-0.710321-1.752955C-1.748801 541.73793 36.143278 390.510235 81.624573 297.458221c49.27798-100.819848 116.372133-155.593467 119.205108-157.87397l5.703335-4.594238 7.244441 1.113251C331.150685 154.110517 338.141736 232.623802 346.233577 323.528238c3.43114 38.544245 7.323365 82.231046 19.934673 126.90648 14.692423 52.040338 32.791063 68.672643 53.747601 87.934381 15.975985 14.679961 34.062163 31.299804 50.931241 63.633935 14.156567 19.897288 13.37563 48.035957-2.259734 79.464534-34.593865 69.536659-133.095824 144.589727-231.917635 144.589727z m-130.574394-106.568876c34.672789 48.667354 78.59221 73.333344 130.574394 73.333344 90.958436 0 175.852146-73.266881 202.167244-126.15462 9.902951-19.90975 11.581135-36.625133 4.594238-45.859302l-0.864016-1.142329-0.65632-1.275254c-14.335186-27.852049-28.977762-41.306603-44.4802-55.554557-22.609799-20.777919-45.992228-42.266159-63.243467-103.370356-13.458708-47.666258-17.492167-92.998012-21.052078-132.991976-7.742911-86.966517-12.503306-140.423343-96.919315-156.258095-16.540919 14.937505-67.276925 64.605953-105.360085 143.110931-60.95881 125.664457-62.55807 262.307731-4.760395 406.162214z" fill="#6E6E96" p-id="6267"></path><path d="M556.538355 43.30464s-74.346901 253.430799 89.039324 253.430799c166.02812 0 197.15346 150.30137 300.984902 19.216044-110.731107-266.727504-390.024226-272.646844-390.024226-272.646843z" fill="#9EE3C3" p-id="6268"></path><path d="M866.283878 386.231695h-0.016615c-26.73049-0.004154-50.353846-13.263474-77.707425-28.616371-36.974062-20.748842-78.87883-44.264196-142.986313-44.264196-40.911981 0-72.336403-14.268723-93.405096-42.403239-56.634577-75.634617-13.437939-225.956757-11.572828-232.316412l3.576527-12.204223 12.71931 0.270005c2.978362 0.062309 73.943971 1.956497 159.518924 37.572227 79.223606 32.973835 186.124796 102.29449 245.496808 245.314035l3.746837 9.026473-6.06888 7.663986c-32.845064 41.460298-61.623437 59.957714-93.301249 59.957715z m-297.125907-325.409965c-3.443602 14.335186-8.677544 39.229642-11.277899 67.252002-5.138402 55.346861 2.093577 97.874717 20.910845 122.981024 14.655038 19.556666 36.500515 29.064994 66.782608 29.064994 72.78918 0 120.725444 26.900801 159.248919 48.517812 24.250598 13.608249 43.408488 24.3586 61.453127 24.362754h0.008307c11.963296 0 31.0298-4.315925 61.041888-39.777959-44.542509-101.280933-119.367111-174.535353-222.533925-217.798454-59.35955-24.890302-112.106055-32.383978-135.63387-34.602173z" fill="#6E6E96" p-id="6269"></path><path d="M759.116837 923.923704s-106.942729-170.992057 0-242.227671c106.955191-71.231459 231.651784-67.04846 231.651785-165.529649 0 270.287416-231.651784 407.75732-231.651785 407.75732z" fill="#9EE3C3" p-id="6270"></path><path d="M753.637814 946.500272l-8.606927-13.761945c-1.146483-1.83188-28.250826-45.535296-42.100003-99.050277-19.432048-75.06553-3.186058-132.406273 46.976707-165.820424 39.088409-26.032631 80.137469-42.24539 116.355518-56.547344 70.894992-27.997436 107.893978-44.949593 107.893977-95.149744h33.231379c0 144.668652-65.137655 251.690306-119.77835 315.997177-59.03139 69.470196-117.547693 104.587455-120.010969 106.045482l-13.961332 8.287075z m212.909287-347.978225c-23.806129 18.318797-55.500556 30.838719-88.079769 43.703417-34.681097 13.699636-73.98551 29.222843-110.141249 53.298977-75.509999 50.299845-25.052305 163.90962-3.505911 204.680367 20.304372-14.281185 59.480013-44.662972 98.215339-90.451658 54.507768-64.431489 89.15148-135.206017 103.51159-211.231103z" fill="#6E6E96" p-id="6271"></path><path d="M511.983384 37.385301C249.870888 37.385301 37.385301 249.870888 37.385301 511.983384c0 262.108343 212.481433 474.59393 474.593929 474.59393 262.108343 0 474.59393-212.485587 474.59393-474.59393C986.577314 249.870888 774.091727 37.385301 511.983384 37.385301z m342.823207 528.524303c-16.752769 58.499688-117.863391 40.421818-158.023512 83.917538-32.674753 35.395572-1.067558 135.488483-44.928823 156.661025-50.482618 24.346139-107.104732 37.991773-166.925368 37.991773-66.238445 0 80.764711-120.833446 26.352483-150.317986-19.361432-10.488654-29.297614 47.304867-38.411319-81.067947-3.348061-47.130402-71.173305-68.988341-115.582888-176.911397-11.157435-27.104343-31.993509-217.972918-40.164274-207.073026-50.283229 67.04846-8.382615 277.178773 39.109178 386.917092 30.020396 69.358041-173.243483 189.917327-173.243483 82.143813 0-213.449297-96.34192-87.730839-82.750286-238.401908 19.087273-211.592494 172.23408-384.682282 384.694743-384.682282 89.625027 0 180.77039 25.779242 245.849891 77.358495 30.768102 24.371062 55.71656 54.536846 71.925165 90.447504 28.450214 63.039925-198.956262 22.518413-178.282191 32.869987 42.158157 21.106079 257.202561 99.532132 234.451528 93.35525-296.739593-80.631786-11.336054 68.568795 10.737889 90.6552 36.824521 36.832829-5.150864 72.431943-14.808733 106.136869z" fill="#6E6E96" opacity=".2" p-id="6272"></path><path d="M674.71329 562.968627s-47.491794 39.109178-19.556666 67.052613 82.40551-26.531102 97.775023-41.900614c15.373666-15.37782 10.035876-64.780418-78.218357-25.151999z" fill="#9EE3C3" p-id="6273"></path><path d="M674.430823 654.483689h-0.008307c-11.975758-0.004154-22.701185-4.403158-31.017338-12.719311-9.524944-9.529098-14.231338-21.351161-13.60825-34.182626 1.428949-29.509464 30.98826-54.669771 34.357092-57.444591l1.723877-1.416488 2.031268-0.918017c24.40014-10.953893 45.277753-16.511841 62.055446-16.511841 29.899933 0 40.276431 17.263701 43.354486 24.682606 6.081342 14.675807 2.525585 32.720446-8.636004 43.882035-23.448891 23.461353-58.312761 54.628232-90.25227 54.628233z m9.271555-77.325264c-7.431367 6.667045-20.21714 21.185004-20.715611 32.06828-0.108002 2.421737 0.265851 5.391791 3.921303 9.047243 2.114346 2.1185 4.291002 2.978362 7.522753 2.982516 9.977721 0 29.659005-7.78445 66.745224-44.878976 1.316793-1.316793 2.500661-5.113478 1.441411-7.676449-1.275254-3.073902-7.369058-4.170538-12.652847-4.170538-8.046147 0-22.535028 2.222348-46.262233 12.627924z" fill="#6E6E96" p-id="6274"></path></svg>
@@ -0,0 +1,8 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
+ viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" fill='#6777ef'>
5
+ <path d="M110.3,105.4c-6.4-34.5-6.6-55.4-0.6-62.7c9-11,20.5-2.3,26.4,18.1c3.9,13.6-0.1,31-12,52.2L110.3,105.4z M86.5,105.4
6
+ c6.4-34.5,6.6-55.4,0.6-62.7c-9-11-20.5-2.3-26.4,18.1c-3.9,13.6,0.1,31,12,52.2L86.5,105.4z"/>
7
+ <path d="M100.2,82.8c35.6,0,61.6,49.2,49.8,64.4c-11.8,15.2-86.5,17-99.6,0S64.6,82.8,100.2,82.8z"/>
8
+ </svg>
@@ -0,0 +1 @@
1
+ <?xml version="1.0"?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x31_3-alipay"><g><path d="M413.858,26.001H98.143c-39.892,0-72.141,32.251-72.141,72.142v315.715 c0,39.89,32.249,72.142,72.141,72.142h315.716c39.551,0,71.628-31.911,72.14-71.463c-47.189-26.308-113.55-61.955-176.194-90.809 c-32.928,45.146-86.394,83.169-152.6,83.169c-72.482,0-96.24-46.513-99.641-78.416c-4.075-40.056,15.279-83.683,102.186-83.683 c36.328,0,81.476,10.524,130.537,25.629c16.972-30.896,27.156-61.956,27.156-61.956H134.471v-17.147h94.546v-32.077H116.645 v-19.519h112.372V87.957h52.284v51.771h112.371v19.519H281.289v32.077h91.148c0,0-15.617,47.868-39.378,93.355 c50.24,17.147,102.688,37.006,152.601,54.151V98.143C485.826,58.417,453.584,26.001,413.858,26.001z M74.547,324.742 c1.018,20.711,10.524,55.171,71.803,55.171c53.464,0,95.061-40.744,121.027-74.852c-45.824-19.182-86.742-32.252-112.372-32.252 C85.749,272.81,73.531,306.752,74.547,324.742z" style="fill:#0099E5;"/></g></g><g id="Layer_1"/></svg>
@@ -0,0 +1 @@
1
+ <svg t="1763289153056" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4700" width="200" height="200"><path d="M422.2 500.2l-107.4-89.5-17.8 17.9 107.4 214.7L910.1 312c31.1 51.2 48.9 108.9 48.9 170.3C959 689.8 758.8 858 511.7 858c-61 0-119.1-10.3-172.1-28.9-23.6 14.8-79.8 49.9-110.8 69.3-17.2 11.1-18.9-1-18.4-12.5 3.6-32.6 9.8-87.9 13-116.6-97.1-68.9-159-171.9-159-287 0-207.5 200.3-375.8 447.3-375.8 153.6 0 289 65.1 369.6 164.1L422.2 500.2z" fill="#38B035" p-id="4701"></path></svg>
@@ -0,0 +1 @@
1
+ <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335.36 359.35" fill="#fff"><title>trash</title><path d="M268.63,293.33c-7.79,0-15.13,0-22.47,0-8,0-13.41-4.86-13.45-11.91s5.38-12,13.31-12q38.91,0,77.84,0h4.65c0-1.71,0-3.28,0-4.84.19-8.09-.38-16.29.8-24.24,1.63-10.91,11.47-18.72,22.53-18.77q48.47-.19,96.93,0A23.63,23.63,0,0,1,472.19,245c.15,8,0,15.93,0,24.42h4.17q39.48,0,79,0c9.11,0,15,8.22,11.87,16.3a12,12,0,0,1-11.4,7.61c-7.72.07-15.45,0-23.7,0v4.88q0,119.39,0,238.76c0,21.13-12.6,37.68-32.45,42.52a45.47,45.47,0,0,1-10.73,1.23q-88.32.1-176.64,0c-25.34,0-43.64-18.33-43.65-43.67q0-119.21,0-238.39Zm23.95.16v3.62q0,119.94,0,239.86c0,12.37,7.46,19.84,19.76,19.84h175.5c13.07,0,20.31-7.29,20.31-20.44q0-119.37,0-238.74v-4.15Zm155.53-47.8H352.77v23.49h95.34Z" transform="translate(-232.71 -221.43)"/><path d="M348.68,424.91q0-35.73,0-71.47a11.87,11.87,0,0,1,22.81-4.94,16,16,0,0,1,1.07,5.82q.09,70.73,0,141.45c0,7.66-5,13.06-11.87,13.13-7.06.08-12.05-5.37-12.06-13.26Q348.65,460.27,348.68,424.91Z" transform="translate(-232.71 -221.43)"/><path d="M452.07,425.08q0,35.54,0,71.09c0,6.9-4.43,12-10.72,12.68a12.12,12.12,0,0,1-13.16-11c-.08-.87-.06-1.75-.06-2.62q0-70.17,0-140.33c0-5.61,1.82-10.06,7.06-12.53A11.83,11.83,0,0,1,452,353.23c.15,10.47,0,20.95,0,31.43Q452.09,404.87,452.07,425.08Z" transform="translate(-232.71 -221.43)"/></svg>
@@ -0,0 +1,48 @@
1
+ <template>
2
+ <div class="m-card__header">
3
+ <h4 class="u-title">{{ title }}</h4>
4
+
5
+ <div class="m-right">
6
+ <slot name="right"></slot>
7
+ </div>
8
+ </div>
9
+ </template>
10
+
11
+ <script>
12
+ export default {
13
+ name: "CardHeader",
14
+ props: {
15
+ title: {
16
+ type: String,
17
+ default: "iruxu",
18
+ },
19
+ },
20
+ data: function () {
21
+ return {};
22
+ },
23
+ };
24
+ </script>
25
+
26
+ <style scoped lang="less">
27
+ .m-card__header {
28
+ border-bottom: 1px solid #f9f9f9;
29
+ line-height: 30px;
30
+ -ms-grid-row-align: center;
31
+ align-self: center;
32
+ width: 100%;
33
+ min-height: 70px;
34
+ padding: 15px 25px;
35
+ display: flex;
36
+ align-items: center;
37
+ box-sizing: border-box;
38
+ .pr;
39
+ justify-content: space-between;
40
+ .u-title {
41
+ margin: 0;
42
+ font-size: 16px;
43
+ font-weight: 700;
44
+ line-height: 28px;
45
+ color: @primary;
46
+ }
47
+ }
48
+ </style>
@@ -0,0 +1,144 @@
1
+ <template>
2
+ <div class="c-lang-select">
3
+ <div class="u-select-label">
4
+ <span v-show="showFlag" class="fi u-flag" :class="flag"></span>
5
+ <img v-if="!showFlag" class="u-earth" src="../../assets/img/earth.svg" alt="">
6
+ <span class="u-name" v-show="showName">{{ name }}</span>
7
+ </div>
8
+ <el-select class="u-select" v-model="current" popper-class="c-lang-select__pop" filterable :filter-method="filterMethod" @change="onLangChange">
9
+ <el-option v-for="item in filterLanguages" :key="item.langCode" :label="item.name" :value="item.langCode">
10
+ <span class="fi" :class="`fi-${item.countryCode}`" v-if="optionsWithFlag"></span>
11
+ <span>{{ item.name }}</span>
12
+ </el-option>
13
+ </el-select>
14
+ </div>
15
+ </template>
16
+
17
+ <script>
18
+ import Lang from "@2kog/pkg-common/data/language.json";
19
+ import "flag-icons/css/flag-icons.min.css";
20
+ import User from "@2kog/pkg-common/utils/user";
21
+ export default {
22
+ name: "LangSelect",
23
+ props: {
24
+ lang: {
25
+ type: String,
26
+ default: "en-US",
27
+ },
28
+ showFlag: {
29
+ type: Boolean,
30
+ default: true,
31
+ },
32
+ showName: {
33
+ type: Boolean,
34
+ default: true,
35
+ },
36
+ optionsWithFlag: {
37
+ type: Boolean,
38
+ default: true,
39
+ },
40
+ },
41
+ data() {
42
+ return {
43
+ current: "",
44
+
45
+ filterLanguages: [],
46
+ };
47
+ },
48
+ computed: {
49
+ languages() {
50
+ return Lang.languages;
51
+ },
52
+ flag() {
53
+ const langObj = Lang.languages.find((item) => item.langCode == this.current);
54
+ const countryCode = langObj?.countryCode;
55
+
56
+ return `fi-${countryCode?.toLowerCase()}`;
57
+ },
58
+ name() {
59
+ const langObj = Lang.languages.find((item) => item.langCode == this.current);
60
+ return langObj?.name;
61
+ },
62
+ },
63
+ watch: {
64
+ lang: {
65
+ handler: function (val) {
66
+ this.current = val;
67
+ },
68
+ immediate: true,
69
+ },
70
+ },
71
+ mounted() {
72
+ this.filterLanguages = this.languages;
73
+ },
74
+ methods: {
75
+ onLangChange(lang) {
76
+ this.$emit("change", lang);
77
+
78
+ this.$i18n.locale = lang;
79
+ User.setLocale(lang);
80
+ },
81
+ filterMethod(query) {
82
+ if (query !== "") {
83
+ this.filterLanguages = this.languages.filter((item) => {
84
+ return item.name
85
+ .toLowerCase()
86
+ .includes(query.toLowerCase());
87
+ });
88
+ } else {
89
+ this.filterLanguages = this.languages;
90
+ }
91
+ },
92
+ },
93
+ };
94
+ </script>
95
+
96
+ <style lang="less">
97
+ .c-lang-select {
98
+ position: relative;
99
+ .flex;
100
+ align-items: center;
101
+ .u-select-label {
102
+ background-color: #f5f7fa;
103
+ color: #909399;
104
+ position: relative;
105
+ display: inline-flex;
106
+ align-items: center;
107
+ justify-content: center;
108
+ height: 24px;
109
+ line-height: 20px;
110
+ padding: 16px 12px;
111
+ border-radius: 4px;
112
+ white-space: nowrap;
113
+ border-right: 0;
114
+ border-top-right-radius: 0;
115
+ border-bottom-right-radius: 0;
116
+ box-shadow: 1px 0 0 0 #dcdfe6 inset, 0 1px 0 0 #dcdfe6 inset, 0 -1px 0 0 #dcdfe6 inset;
117
+ font-size: 14px;
118
+ box-sizing: border-box;
119
+ }
120
+ .el-select {
121
+ .el-input__wrapper,
122
+ .el-select__wrapper {
123
+ width: 120px;
124
+ height: 24px;
125
+ line-height: 20px;
126
+ border-top-left-radius: 0;
127
+ border-bottom-left-radius: 0;
128
+ box-sizing: border-box;
129
+ box-shadow: 0 1px 0 0 #dcdfe6 inset, 0 -1px 0 0 #dcdfe6 inset, 0 0 0 1px #dcdfe6 inset;
130
+ }
131
+ }
132
+
133
+ .u-earth {
134
+ height: 14px;
135
+ }
136
+ }
137
+ .c-lang-select__pop {
138
+ .el-select-dropdown__item {
139
+ .flex;
140
+ align-items: center;
141
+ gap: 10px;
142
+ }
143
+ }
144
+ </style>
@@ -0,0 +1,57 @@
1
+ <template>
2
+ <header class="w-logo">
3
+ <a :href="homepageUrl" class="u-logo"><img class="u-img" svg-inline :src="logoUrl" /></a>
4
+ </header>
5
+ </template>
6
+
7
+ <script>
8
+ const DEFAULT_APP = "iruxu";
9
+ export default {
10
+ name: "CardHeader",
11
+ props: {
12
+ app: {
13
+ type: String,
14
+ default: DEFAULT_APP,
15
+ },
16
+ },
17
+ data: function () {
18
+ return {};
19
+ },
20
+ computed: {
21
+ logoUrl() {
22
+ // return require("../../assets/img/logo/" + (this.app || DEFAULT_APP) + ".svg");
23
+ return require("../../assets/img/logo/" + "iruxu.svg");
24
+ },
25
+ homepageUrl() {
26
+ // TODO: 从配置文件中读取
27
+ return "/";
28
+ },
29
+ },
30
+ };
31
+ </script>
32
+
33
+ <style lang="less">
34
+ .w-logo {
35
+ margin: 20px 0;
36
+ margin-bottom: 40px;
37
+ .flex;
38
+ align-items: center;
39
+ justify-content: center;
40
+ .u-img {
41
+ width: 68%;
42
+ height: 68%;
43
+ }
44
+
45
+ .u-logo {
46
+ width: 100px;
47
+ height: 100px;
48
+ border-radius: 50%;
49
+ background-color: #fff;
50
+ box-shadow: 0 2px 6px #e6ecf1;
51
+ .db;
52
+ .flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ }
56
+ }
57
+ </style>