yui-image-editor 1.0.0
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 +8 -0
- package/.gitattributes +1 -0
- package/.nrmrc +1 -0
- package/.oxlintrc.json +10 -0
- package/.prettierrc.json +6 -0
- package/.vscode/extensions.json +11 -0
- package/README.md +73 -0
- package/dist/types/index.d.ts +1 -0
- package/dist-app/assets/css/main-Dn6XCgL-.css +1 -0
- package/dist-app/assets/js/main-Bo-yvzk4.js +3 -0
- package/dist-app/favicon.ico +0 -0
- package/dist-app/index.html +14 -0
- package/e2e/tsconfig.json +4 -0
- package/e2e/vue.spec.ts +8 -0
- package/env.d.ts +1 -0
- package/eslint.config.ts +38 -0
- package/index.html +13 -0
- package/package.json +94 -0
- package/playwright.config.ts +110 -0
- package/public/favicon.ico +0 -0
- package/src/App.vue +165 -0
- package/src/assets/annotation/hjjd.svg +33 -0
- package/src/assets/annotation/kjjd.svg +38 -0
- package/src/assets/annotation/zbz.svg +19 -0
- package/src/assets/base.css +86 -0
- package/src/assets/logo.svg +1 -0
- package/src/assets/main.css +28 -0
- package/src/assets/variable.scss +15 -0
- package/src/components/ImageEditor/index.ts +220 -0
- package/src/components/ImageEditor/index.vue +344 -0
- package/src/components/icons/IconCommunity.vue +7 -0
- package/src/components/icons/IconDocumentation.vue +7 -0
- package/src/components/icons/IconEcosystem.vue +7 -0
- package/src/components/icons/IconSupport.vue +7 -0
- package/src/components/icons/IconTooling.vue +19 -0
- package/src/index.ts +25 -0
- package/src/main.ts +11 -0
- package/src/router/index.ts +30 -0
- package/src/stores/counter.ts +12 -0
- package/src/types/index.ts +196 -0
- package/src/types/tui.d.ts +27 -0
- package/src/utils/specialMapTool.ts +358 -0
- package/src/views/HomeView.vue +12 -0
- package/src/views/MapPluginView.vue +16 -0
- package/src/views/TestView.vue +12 -0
- package/tsconfig.app.json +18 -0
- package/tsconfig.json +14 -0
- package/tsconfig.node.json +28 -0
- package/tsconfig.vitest.json +19 -0
- package/vite.config.ts +124 -0
- package/vitest.config.ts +27 -0
- package/yui-image-editor-1.0.0.tgz +0 -0
|
Binary file
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="">
|
|
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>Vite App</title>
|
|
8
|
+
<script type="module" crossorigin src="./assets/js/main-Bo-yvzk4.js"></script>
|
|
9
|
+
<link rel="stylesheet" crossorigin href="./assets/css/main-Dn6XCgL-.css">
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<div id="app"></div>
|
|
13
|
+
</body>
|
|
14
|
+
</html>
|
package/e2e/vue.spec.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { test, expect } from '@playwright/test'
|
|
2
|
+
|
|
3
|
+
// See here how to get started:
|
|
4
|
+
// https://playwright.dev/docs/intro
|
|
5
|
+
test('visits the app root url', async ({ page }) => {
|
|
6
|
+
await page.goto('/')
|
|
7
|
+
await expect(page.locator('h1')).toHaveText('You did it!')
|
|
8
|
+
})
|
package/env.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/// <reference types="vite/client" />
|
package/eslint.config.ts
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { globalIgnores } from 'eslint/config'
|
|
2
|
+
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
|
|
3
|
+
import pluginVue from 'eslint-plugin-vue'
|
|
4
|
+
import pluginPlaywright from 'eslint-plugin-playwright'
|
|
5
|
+
import pluginVitest from '@vitest/eslint-plugin'
|
|
6
|
+
import pluginOxlint from 'eslint-plugin-oxlint'
|
|
7
|
+
import skipFormatting from 'eslint-config-prettier/flat'
|
|
8
|
+
|
|
9
|
+
// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
|
|
10
|
+
// import { configureVueProject } from '@vue/eslint-config-typescript'
|
|
11
|
+
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
|
|
12
|
+
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
|
|
13
|
+
|
|
14
|
+
export default defineConfigWithVueTs(
|
|
15
|
+
{
|
|
16
|
+
name: 'app/files-to-lint',
|
|
17
|
+
files: ['**/*.{vue,ts,mts,tsx}'],
|
|
18
|
+
},
|
|
19
|
+
|
|
20
|
+
globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
|
|
21
|
+
|
|
22
|
+
...pluginVue.configs['flat/essential'],
|
|
23
|
+
vueTsConfigs.recommended,
|
|
24
|
+
|
|
25
|
+
{
|
|
26
|
+
...pluginPlaywright.configs['flat/recommended'],
|
|
27
|
+
files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'],
|
|
28
|
+
},
|
|
29
|
+
|
|
30
|
+
{
|
|
31
|
+
...pluginVitest.configs.recommended,
|
|
32
|
+
files: ['src/**/__tests__/*'],
|
|
33
|
+
},
|
|
34
|
+
|
|
35
|
+
...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'),
|
|
36
|
+
|
|
37
|
+
skipFormatting,
|
|
38
|
+
)
|
package/index.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="">
|
|
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>Vite App</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="app"></div>
|
|
11
|
+
<script type="module" src="/src/main.ts"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "yui-image-editor",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"private": false,
|
|
5
|
+
"author": "yuan jie",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"main": "dist/yui-image-editor.cjs.js",
|
|
8
|
+
"module": "dist/yui-image-editor.esm.js",
|
|
9
|
+
"umd:main": "dist/yui-image-editor.umd.js",
|
|
10
|
+
"types": "dist/types/index.d.ts",
|
|
11
|
+
"style": "dist/yui-image-editor.css",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"types": "./dist/types/index.d.ts",
|
|
15
|
+
"import": "./dist/yui-image-editor.esm.js",
|
|
16
|
+
"require": "./dist/yui-image-editor.cjs.js",
|
|
17
|
+
"default": "./dist/yui-image-editor.umd.js"
|
|
18
|
+
},
|
|
19
|
+
"./style": {
|
|
20
|
+
"import": "./dist/yui-image-editor.css",
|
|
21
|
+
"require": "./dist/yui-image-editor.css"
|
|
22
|
+
},
|
|
23
|
+
"./dist/*": "./dist/*"
|
|
24
|
+
},
|
|
25
|
+
"keywords": ["vue3", "image-editor", "yui", "vue-component"],
|
|
26
|
+
"description": "基于Vue3的YUI图片编辑器组件库",
|
|
27
|
+
"license": "MIT",
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"vue": "^3.2.0 || ^3.3.0 || ^3.4.0",
|
|
30
|
+
"vue-router": "^5.0.3"
|
|
31
|
+
},
|
|
32
|
+
"scripts": {
|
|
33
|
+
"dev": "vite",
|
|
34
|
+
"build:lib": "vite build --mode lib",
|
|
35
|
+
"build:app": "run-p type-check \"build-only {@}\" --",
|
|
36
|
+
"preview": "vite preview",
|
|
37
|
+
"test:unit": "vitest",
|
|
38
|
+
"test:e2e": "playwright test",
|
|
39
|
+
"build-only": "vite build",
|
|
40
|
+
"type-check": "vue-tsc --build",
|
|
41
|
+
"lint": "run-s lint:*",
|
|
42
|
+
"lint:oxlint": "oxlint . --fix",
|
|
43
|
+
"lint:eslint": "eslint . --fix --cache",
|
|
44
|
+
"format": "prettier --write --experimental-cli src/"
|
|
45
|
+
},
|
|
46
|
+
"dependencies": {
|
|
47
|
+
"fabric": "^4.6.0",
|
|
48
|
+
"pinia": "^3.0.4",
|
|
49
|
+
"vue": "^3.5.29",
|
|
50
|
+
"vue-router": "^5.0.3"
|
|
51
|
+
},
|
|
52
|
+
"devDependencies": {
|
|
53
|
+
"@playwright/test": "^1.58.2",
|
|
54
|
+
"@tsconfig/node24": "^24.0.4",
|
|
55
|
+
"@types/fabric": "^5.3.11",
|
|
56
|
+
"@types/jsdom": "^28.0.0",
|
|
57
|
+
"@types/less": "^3.0.8",
|
|
58
|
+
"@types/node": "^24.11.0",
|
|
59
|
+
"@types/rollup-plugin-visualizer": "^4.2.4",
|
|
60
|
+
"@types/sass": "^1.43.1",
|
|
61
|
+
"@types/terser": "^3.8.1",
|
|
62
|
+
"@vitejs/plugin-vue": "^6.0.4",
|
|
63
|
+
"@vitejs/plugin-vue-jsx": "^5.1.4",
|
|
64
|
+
"@vitest/eslint-plugin": "^1.6.9",
|
|
65
|
+
"@vue/eslint-config-typescript": "^14.7.0",
|
|
66
|
+
"@vue/test-utils": "^2.4.6",
|
|
67
|
+
"@vue/tsconfig": "^0.8.1",
|
|
68
|
+
"eslint": "^10.0.2",
|
|
69
|
+
"eslint-config-prettier": "^10.1.8",
|
|
70
|
+
"eslint-plugin-oxlint": "~1.50.0",
|
|
71
|
+
"eslint-plugin-playwright": "^2.8.0",
|
|
72
|
+
"eslint-plugin-vue": "~10.8.0",
|
|
73
|
+
"jiti": "^2.6.1",
|
|
74
|
+
"jsdom": "^28.1.0",
|
|
75
|
+
"less": "^4.6.3",
|
|
76
|
+
"npm-run-all2": "^8.0.4",
|
|
77
|
+
"oxlint": "~1.50.0",
|
|
78
|
+
"postcss": "^8.5.8",
|
|
79
|
+
"prettier": "3.8.1",
|
|
80
|
+
"rollup-plugin-visualizer": "^7.0.1",
|
|
81
|
+
"sass": "^1.98.0",
|
|
82
|
+
"terser": "^5.46.0",
|
|
83
|
+
"yui-image-editor": "^3.15.3",
|
|
84
|
+
"typescript": "~5.9.3",
|
|
85
|
+
"vite": "^7.3.1",
|
|
86
|
+
"vite-plugin-dts": "^4.5.4",
|
|
87
|
+
"vite-plugin-vue-devtools": "^8.0.6",
|
|
88
|
+
"vitest": "^4.0.18",
|
|
89
|
+
"vue-tsc": "^3.2.5"
|
|
90
|
+
},
|
|
91
|
+
"engines": {
|
|
92
|
+
"node": "^20.19.0 || >=22.12.0"
|
|
93
|
+
}
|
|
94
|
+
}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import process from 'node:process'
|
|
2
|
+
import { defineConfig, devices } from '@playwright/test'
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Read environment variables from file.
|
|
6
|
+
* https://github.com/motdotla/dotenv
|
|
7
|
+
*/
|
|
8
|
+
// require('dotenv').config();
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* See https://playwright.dev/docs/test-configuration.
|
|
12
|
+
*/
|
|
13
|
+
export default defineConfig({
|
|
14
|
+
testDir: './e2e',
|
|
15
|
+
/* Maximum time one test can run for. */
|
|
16
|
+
timeout: 30 * 1000,
|
|
17
|
+
expect: {
|
|
18
|
+
/**
|
|
19
|
+
* Maximum time expect() should wait for the condition to be met.
|
|
20
|
+
* For example in `await expect(locator).toHaveText();`
|
|
21
|
+
*/
|
|
22
|
+
timeout: 5000,
|
|
23
|
+
},
|
|
24
|
+
/* Fail the build on CI if you accidentally left test.only in the source code. */
|
|
25
|
+
forbidOnly: !!process.env.CI,
|
|
26
|
+
/* Retry on CI only */
|
|
27
|
+
retries: process.env.CI ? 2 : 0,
|
|
28
|
+
/* Opt out of parallel tests on CI. */
|
|
29
|
+
workers: process.env.CI ? 1 : undefined,
|
|
30
|
+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
|
|
31
|
+
reporter: 'html',
|
|
32
|
+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
|
33
|
+
use: {
|
|
34
|
+
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
|
|
35
|
+
actionTimeout: 0,
|
|
36
|
+
/* Base URL to use in actions like `await page.goto('/')`. */
|
|
37
|
+
baseURL: process.env.CI ? 'http://localhost:4173' : 'http://localhost:5173',
|
|
38
|
+
|
|
39
|
+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
|
|
40
|
+
trace: 'on-first-retry',
|
|
41
|
+
|
|
42
|
+
/* Only on CI systems run the tests headless */
|
|
43
|
+
headless: !!process.env.CI,
|
|
44
|
+
},
|
|
45
|
+
|
|
46
|
+
/* Configure projects for major browsers */
|
|
47
|
+
projects: [
|
|
48
|
+
{
|
|
49
|
+
name: 'chromium',
|
|
50
|
+
use: {
|
|
51
|
+
...devices['Desktop Chrome'],
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
name: 'firefox',
|
|
56
|
+
use: {
|
|
57
|
+
...devices['Desktop Firefox'],
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
name: 'webkit',
|
|
62
|
+
use: {
|
|
63
|
+
...devices['Desktop Safari'],
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
|
|
67
|
+
/* Test against mobile viewports. */
|
|
68
|
+
// {
|
|
69
|
+
// name: 'Mobile Chrome',
|
|
70
|
+
// use: {
|
|
71
|
+
// ...devices['Pixel 5'],
|
|
72
|
+
// },
|
|
73
|
+
// },
|
|
74
|
+
// {
|
|
75
|
+
// name: 'Mobile Safari',
|
|
76
|
+
// use: {
|
|
77
|
+
// ...devices['iPhone 12'],
|
|
78
|
+
// },
|
|
79
|
+
// },
|
|
80
|
+
|
|
81
|
+
/* Test against branded browsers. */
|
|
82
|
+
// {
|
|
83
|
+
// name: 'Microsoft Edge',
|
|
84
|
+
// use: {
|
|
85
|
+
// channel: 'msedge',
|
|
86
|
+
// },
|
|
87
|
+
// },
|
|
88
|
+
// {
|
|
89
|
+
// name: 'Google Chrome',
|
|
90
|
+
// use: {
|
|
91
|
+
// channel: 'chrome',
|
|
92
|
+
// },
|
|
93
|
+
// },
|
|
94
|
+
],
|
|
95
|
+
|
|
96
|
+
/* Folder for test artifacts such as screenshots, videos, traces, etc. */
|
|
97
|
+
// outputDir: 'test-results/',
|
|
98
|
+
|
|
99
|
+
/* Run your local dev server before starting the tests */
|
|
100
|
+
webServer: {
|
|
101
|
+
/**
|
|
102
|
+
* Use the dev server by default for faster feedback loop.
|
|
103
|
+
* Use the preview server on CI for more realistic testing.
|
|
104
|
+
* Playwright will re-use the local server if there is already a dev-server running.
|
|
105
|
+
*/
|
|
106
|
+
command: process.env.CI ? 'npm run preview' : 'npm run dev',
|
|
107
|
+
port: process.env.CI ? 4173 : 5173,
|
|
108
|
+
reuseExistingServer: !process.env.CI,
|
|
109
|
+
},
|
|
110
|
+
})
|
|
Binary file
|
package/src/App.vue
ADDED
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { RouterView, useRouter } from 'vue-router';
|
|
3
|
+
|
|
4
|
+
// 获取路由实例
|
|
5
|
+
const router = useRouter();
|
|
6
|
+
|
|
7
|
+
// 跳转至专题图插件页面
|
|
8
|
+
const goToMapPluginPage = () => {
|
|
9
|
+
router.push({ name: 'mapPlugin' }); // 建议把路由name改为mapPlugin更贴合业务
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
// 跳转至测试界面
|
|
13
|
+
const goToTestPage = () => {
|
|
14
|
+
router.push({ name: 'test' });
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
// 返回首页
|
|
18
|
+
const goToHome = () => {
|
|
19
|
+
router.push({ name: 'home' });
|
|
20
|
+
};
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<template>
|
|
24
|
+
<div class="main-container">
|
|
25
|
+
<!-- 声明式导航链接（可选保留，样式同步优化） -->
|
|
26
|
+
<div class="link-group">
|
|
27
|
+
<router-link
|
|
28
|
+
class="nav-link"
|
|
29
|
+
:to="{ name: 'mapPlugin' }"
|
|
30
|
+
>
|
|
31
|
+
专题图插件
|
|
32
|
+
</router-link>
|
|
33
|
+
<router-link
|
|
34
|
+
class="nav-link"
|
|
35
|
+
:to="{ name: 'test' }"
|
|
36
|
+
>
|
|
37
|
+
测试界面
|
|
38
|
+
</router-link>
|
|
39
|
+
<router-link
|
|
40
|
+
class="nav-link"
|
|
41
|
+
:to="{ name: 'home' }"
|
|
42
|
+
>
|
|
43
|
+
返回首页
|
|
44
|
+
</router-link>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<!-- 路由视图容器 -->
|
|
48
|
+
<div class="router-view-container">
|
|
49
|
+
<RouterView />
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</template>
|
|
53
|
+
|
|
54
|
+
<style scoped>
|
|
55
|
+
/* 全局容器样式 */
|
|
56
|
+
.main-container {
|
|
57
|
+
width: 90%;
|
|
58
|
+
font-family: "Microsoft YaHei", sans-serif;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* 导航标题 */
|
|
62
|
+
.nav-title {
|
|
63
|
+
font-size: 18px;
|
|
64
|
+
font-weight: 600;
|
|
65
|
+
color: #333;
|
|
66
|
+
margin-bottom: 20px;
|
|
67
|
+
padding-bottom: 10px;
|
|
68
|
+
border-bottom: 1px solid #eee;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* 按钮组样式 */
|
|
72
|
+
.button-group {
|
|
73
|
+
display: flex;
|
|
74
|
+
gap: 15px;
|
|
75
|
+
margin-bottom: 30px;
|
|
76
|
+
flex-wrap: wrap;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* 通用按钮样式 */
|
|
80
|
+
.nav-button {
|
|
81
|
+
padding: 12px 24px;
|
|
82
|
+
border: none;
|
|
83
|
+
border-radius: 6px;
|
|
84
|
+
cursor: pointer;
|
|
85
|
+
font-size: 14px;
|
|
86
|
+
font-weight: 500;
|
|
87
|
+
transition: all 0.3s ease;
|
|
88
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* 主按钮（专题图插件） */
|
|
92
|
+
.primary-button {
|
|
93
|
+
background-color: #165DFF;
|
|
94
|
+
color: white;
|
|
95
|
+
}
|
|
96
|
+
.primary-button:hover {
|
|
97
|
+
background-color: #0E48D9;
|
|
98
|
+
box-shadow: 0 4px 8px rgba(22, 93, 255, 0.2);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* 次要按钮（测试界面） */
|
|
102
|
+
.secondary-button {
|
|
103
|
+
background-color: #36CFC9;
|
|
104
|
+
color: white;
|
|
105
|
+
}
|
|
106
|
+
.secondary-button:hover {
|
|
107
|
+
background-color: #28B8B3;
|
|
108
|
+
box-shadow: 0 4px 8px rgba(54, 207, 201, 0.2);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* 默认按钮（返回首页） */
|
|
112
|
+
.default-button {
|
|
113
|
+
background-color: #86909C;
|
|
114
|
+
color: white;
|
|
115
|
+
}
|
|
116
|
+
.default-button:hover {
|
|
117
|
+
background-color: #737E8B;
|
|
118
|
+
box-shadow: 0 4px 8px rgba(134, 144, 156, 0.2);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* 链接组样式 */
|
|
122
|
+
.link-group {
|
|
123
|
+
margin-bottom: 30px;
|
|
124
|
+
display: flex;
|
|
125
|
+
gap: 20px;
|
|
126
|
+
flex-wrap: wrap;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/* 导航链接样式 */
|
|
130
|
+
.nav-link {
|
|
131
|
+
color: #165DFF;
|
|
132
|
+
text-decoration: none;
|
|
133
|
+
font-size: 14px;
|
|
134
|
+
padding: 8px 0;
|
|
135
|
+
position: relative;
|
|
136
|
+
}
|
|
137
|
+
.nav-link::after {
|
|
138
|
+
content: "";
|
|
139
|
+
position: absolute;
|
|
140
|
+
bottom: 0;
|
|
141
|
+
left: 0;
|
|
142
|
+
width: 0;
|
|
143
|
+
height: 2px;
|
|
144
|
+
background-color: #165DFF;
|
|
145
|
+
transition: width 0.3s ease;
|
|
146
|
+
}
|
|
147
|
+
.nav-link:hover::after {
|
|
148
|
+
width: 100%;
|
|
149
|
+
}
|
|
150
|
+
.nav-link.router-link-active {
|
|
151
|
+
color: #0E48D9;
|
|
152
|
+
font-weight: 600;
|
|
153
|
+
}
|
|
154
|
+
.nav-link.router-link-active::after {
|
|
155
|
+
width: 100%;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* 路由视图容器 */
|
|
159
|
+
.router-view-container {
|
|
160
|
+
margin-top: 10px;
|
|
161
|
+
background-color: #f8f9fa;
|
|
162
|
+
border-radius: 8px;
|
|
163
|
+
min-height: 400px;
|
|
164
|
+
}
|
|
165
|
+
</style>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
4
|
+
<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"
|
|
5
|
+
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
|
6
|
+
<g>
|
|
7
|
+
<g>
|
|
8
|
+
<g>
|
|
9
|
+
<path fill="#8a8a8a" d="M16.216,4c-6.627,0-12,5.373-12,12c0,6.626,5.373,12,12,12c6.626,0,11.998-5.373,11.998-12
|
|
10
|
+
C28.214,9.373,22.843,4,16.216,4z M16.216,27.75c-6.49,0-11.75-5.262-11.75-11.75c0-6.489,5.26-11.75,11.75-11.75
|
|
11
|
+
c6.488,0,11.748,5.261,11.748,11.75C27.964,22.488,22.704,27.75,16.216,27.75z"/>
|
|
12
|
+
</g>
|
|
13
|
+
</g>
|
|
14
|
+
<g>
|
|
15
|
+
<g>
|
|
16
|
+
<path fill="#8a8a8a" d="M16.216,2C8.444,2,2.142,8.268,2.142,16s6.302,14.001,14.074,14.001c7.773,0,14.072-6.27,14.072-14.001
|
|
17
|
+
S23.989,2,16.216,2z M16.216,29.708C8.605,29.708,2.436,23.569,2.436,16c0-7.571,6.169-13.708,13.781-13.708
|
|
18
|
+
c7.611,0,13.779,6.137,13.779,13.708C29.995,23.569,23.827,29.708,16.216,29.708z"/>
|
|
19
|
+
</g>
|
|
20
|
+
</g>
|
|
21
|
+
</g>
|
|
22
|
+
<g>
|
|
23
|
+
<g>
|
|
24
|
+
<g>
|
|
25
|
+
<path fill="#8a8a8a" d="M23.216,15.548h-5.25v-5.241h-1.75v5.241h-2.5l-2.75-1.75h-0.75V5.61l-1.671,1.47v6.717H8.215
|
|
26
|
+
l-3.877,1.75l-0.123,0.75c0,6.628,5.373,12,12,12c6.375,0,11.574-4.975,11.962-11.25h-4.962V15.548z M12.512,23.621h-2.297v-1
|
|
27
|
+
h2.297V23.621z M23.317,19.494h2.297v1h-2.297V19.494z M18.466,24.621h-1v-1h1V24.621z M18.657,19.775h-2.299v-1h2.299V19.775z
|
|
28
|
+
M22.966,23.621h-1v-1h1V23.621z"/>
|
|
29
|
+
<path fill="#8a8a8a" d="M28.178,17.048h0.038v-0.75C28.216,16.551,28.193,16.799,28.178,17.048z"/>
|
|
30
|
+
</g>
|
|
31
|
+
</g>
|
|
32
|
+
</g>
|
|
33
|
+
</svg>
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
4
|
+
<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"
|
|
5
|
+
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
|
6
|
+
<g>
|
|
7
|
+
<g>
|
|
8
|
+
<g>
|
|
9
|
+
<path fill="none" stroke="#8a8a8a" stroke-width="0.5" d="M15.97,4.167c-6.627,0-12,5.373-12,12c0,6.626,5.373,12,12,12c6.627,0,11.999-5.373,11.999-12
|
|
10
|
+
C27.969,9.54,22.598,4.167,15.97,4.167z M15.97,27.917c-6.489,0-11.75-5.262-11.75-11.75c0-6.489,5.26-11.75,11.75-11.75
|
|
11
|
+
c6.489,0,11.749,5.261,11.749,11.75C27.719,22.655,22.459,27.917,15.97,27.917z"/>
|
|
12
|
+
</g>
|
|
13
|
+
</g>
|
|
14
|
+
<g>
|
|
15
|
+
<g>
|
|
16
|
+
<path fill="none" stroke="#8a8a8a" stroke-width="0.5" d="M15.971,2.167c-7.772,0-14.074,6.268-14.074,14s6.302,14.001,14.074,14.001
|
|
17
|
+
c7.773,0,14.072-6.27,14.072-14.001S23.744,2.167,15.971,2.167z M15.971,29.875c-7.611,0-13.781-6.139-13.781-13.708
|
|
18
|
+
c0-7.571,6.169-13.708,13.781-13.708S29.75,8.596,29.75,16.167C29.75,23.736,23.582,29.875,15.971,29.875z"/>
|
|
19
|
+
</g>
|
|
20
|
+
</g>
|
|
21
|
+
<g>
|
|
22
|
+
<path fill="none" stroke="#8a8a8a" stroke-width="0.5" d="M17.262,23.562c0,0.572-0.595,1.035-1.327,1.035l0,0
|
|
23
|
+
c-0.732,0-1.326-0.463-1.326-1.035V7.105c0-0.573,0.594-1.996,1.326-1.996l0,0c0.732,0,1.327,1.422,1.327,1.996V23.562z"/>
|
|
24
|
+
<path fill="none" stroke="#8a8a8a" stroke-width="0.5" d="M16.442,17.364c-0.262-0.172-0.237-0.669,0.054-1.115l0,0
|
|
25
|
+
c0.292-0.445,0.74-0.668,1.002-0.497l7.525,4.928c0.262,0.172,0.676,0.959,0.385,1.402l0,0c-0.291,0.445-1.18,0.383-1.441,0.211
|
|
26
|
+
L16.442,17.364z"/>
|
|
27
|
+
<path fill="none" stroke="#8a8a8a" stroke-width="0.5" d="M15.497,17.362c0.262-0.17,0.237-0.667-0.054-1.113l0,0
|
|
28
|
+
c-0.292-0.445-0.74-0.668-1.002-0.497l-7.524,4.926c-0.263,0.172-0.677,0.959-0.385,1.404l0,0
|
|
29
|
+
c0.291,0.445,1.179,0.381,1.441,0.209L15.497,17.362z"/>
|
|
30
|
+
<path fill="none" stroke="#8a8a8a" stroke-width="0.5" d="M15.515,24.007c0.08-0.104-0.02-0.293-0.222-0.422l0,0
|
|
31
|
+
c-0.203-0.129-0.43-0.148-0.508-0.043l-2.258,3.035c-0.079,0.105-0.11,0.471,0.092,0.6l0,0c0.202,0.129,0.561-0.029,0.64-0.135
|
|
32
|
+
L15.515,24.007z"/>
|
|
33
|
+
<path fill="none" stroke="#8a8a8a" stroke-width="0.5" d="M16.477,24.007c-0.08-0.104,0.02-0.293,0.221-0.422l0,0
|
|
34
|
+
c0.203-0.129,0.431-0.148,0.509-0.043l2.258,3.035c0.078,0.105,0.109,0.471-0.092,0.6l0,0c-0.203,0.129-0.561-0.029-0.641-0.135
|
|
35
|
+
L16.477,24.007z"/>
|
|
36
|
+
</g>
|
|
37
|
+
</g>
|
|
38
|
+
</svg>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
4
|
+
<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"
|
|
5
|
+
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
|
6
|
+
<path fill="#8a8a8a" d="M15.832,6.936l6.732,20.789l-6.732-5.81l-6.396,5.81L15.832,6.936z M16.506,12.133v8.865l4.039,3.669
|
|
7
|
+
L16.506,12.133z"/>
|
|
8
|
+
<path fill="#8a8a8a" d="M14.598,2.621v2.274c-0.045,0.363,0.145,0.529,0.57,0.497V5.63h-1.413V5.392H13.8
|
|
9
|
+
c0.289,0.017,0.434-0.11,0.434-0.379V2.218C14.112,2.155,13.96,2.116,13.778,2.1V1.862h1.185l2.392,2.582V2.621
|
|
10
|
+
c0.047-0.395-0.137-0.569-0.547-0.521h-0.067V1.862h1.504v0.237h-0.068c-0.35,0-0.508,0.104-0.479,0.308v3.222h-0.319L14.598,2.621
|
|
11
|
+
L14.598,2.621z"/>
|
|
12
|
+
<g>
|
|
13
|
+
<g>
|
|
14
|
+
<path fill="#8a8a8a" d="M16.001,6.392c-6.627,0-12,5.373-12,12.001c0,6.625,5.373,11.998,12,11.998
|
|
15
|
+
c6.627,0,11.998-5.373,11.998-11.998C27.999,11.764,22.628,6.392,16.001,6.392z M16.001,30.141c-6.49,0-11.75-5.262-11.75-11.748
|
|
16
|
+
c0-6.491,5.26-11.751,11.75-11.751c6.488,0,11.748,5.26,11.748,11.751C27.749,24.879,22.489,30.141,16.001,30.141z"/>
|
|
17
|
+
</g>
|
|
18
|
+
</g>
|
|
19
|
+
</svg>
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
/* color palette from <https://github.com/vuejs/theme> */
|
|
2
|
+
:root {
|
|
3
|
+
--vt-c-white: #ffffff;
|
|
4
|
+
--vt-c-white-soft: #f8f8f8;
|
|
5
|
+
--vt-c-white-mute: #f2f2f2;
|
|
6
|
+
|
|
7
|
+
--vt-c-black: #181818;
|
|
8
|
+
--vt-c-black-soft: #222222;
|
|
9
|
+
--vt-c-black-mute: #282828;
|
|
10
|
+
|
|
11
|
+
--vt-c-indigo: #2c3e50;
|
|
12
|
+
|
|
13
|
+
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
|
14
|
+
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
|
15
|
+
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
|
16
|
+
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
|
17
|
+
|
|
18
|
+
--vt-c-text-light-1: var(--vt-c-indigo);
|
|
19
|
+
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
|
20
|
+
--vt-c-text-dark-1: var(--vt-c-white);
|
|
21
|
+
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* semantic color variables for this project */
|
|
25
|
+
:root {
|
|
26
|
+
--color-background: var(--vt-c-white);
|
|
27
|
+
--color-background-soft: var(--vt-c-white-soft);
|
|
28
|
+
--color-background-mute: var(--vt-c-white-mute);
|
|
29
|
+
|
|
30
|
+
--color-border: var(--vt-c-divider-light-2);
|
|
31
|
+
--color-border-hover: var(--vt-c-divider-light-1);
|
|
32
|
+
|
|
33
|
+
--color-heading: var(--vt-c-text-light-1);
|
|
34
|
+
--color-text: var(--vt-c-text-light-1);
|
|
35
|
+
|
|
36
|
+
--section-gap: 160px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@media (prefers-color-scheme: dark) {
|
|
40
|
+
:root {
|
|
41
|
+
--color-background: var(--vt-c-black);
|
|
42
|
+
--color-background-soft: var(--vt-c-black-soft);
|
|
43
|
+
--color-background-mute: var(--vt-c-black-mute);
|
|
44
|
+
|
|
45
|
+
--color-border: var(--vt-c-divider-dark-2);
|
|
46
|
+
--color-border-hover: var(--vt-c-divider-dark-1);
|
|
47
|
+
|
|
48
|
+
--color-heading: var(--vt-c-text-dark-1);
|
|
49
|
+
--color-text: var(--vt-c-text-dark-2);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
*,
|
|
54
|
+
*::before,
|
|
55
|
+
*::after {
|
|
56
|
+
box-sizing: border-box;
|
|
57
|
+
margin: 0;
|
|
58
|
+
font-weight: normal;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
body {
|
|
62
|
+
min-height: 100vh;
|
|
63
|
+
color: var(--color-text);
|
|
64
|
+
background: var(--color-background);
|
|
65
|
+
transition:
|
|
66
|
+
color 0.5s,
|
|
67
|
+
background-color 0.5s;
|
|
68
|
+
line-height: 1.6;
|
|
69
|
+
font-family:
|
|
70
|
+
Inter,
|
|
71
|
+
-apple-system,
|
|
72
|
+
BlinkMacSystemFont,
|
|
73
|
+
'Segoe UI',
|
|
74
|
+
Roboto,
|
|
75
|
+
Oxygen,
|
|
76
|
+
Ubuntu,
|
|
77
|
+
Cantarell,
|
|
78
|
+
'Fira Sans',
|
|
79
|
+
'Droid Sans',
|
|
80
|
+
'Helvetica Neue',
|
|
81
|
+
sans-serif;
|
|
82
|
+
font-size: 15px;
|
|
83
|
+
text-rendering: optimizeLegibility;
|
|
84
|
+
-webkit-font-smoothing: antialiased;
|
|
85
|
+
-moz-osx-font-smoothing: grayscale;
|
|
86
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
@import './base.css';
|
|
2
|
+
|
|
3
|
+
*{
|
|
4
|
+
padding: 0;
|
|
5
|
+
margin: 0;
|
|
6
|
+
}
|
|
7
|
+
html,body{
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.tui-image-editor-header-logo{
|
|
13
|
+
display: none;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.text-icon{
|
|
17
|
+
font-size: 30px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.button{
|
|
21
|
+
border-radius: 10px;
|
|
22
|
+
background-color: #00a9ff;
|
|
23
|
+
padding: 10px 20px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.gray{
|
|
27
|
+
color: #ccc;
|
|
28
|
+
}
|