12

1
Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/FiDA_Front
2026-05-05 09:49:21 +08:00 · 2026-05-05 09:44:20 +08:00 · 2026-05-04 17:09:00 +08:00 · 2026-05-04 17:08:58 +08:00 · 2026-05-04 16:57:37 +08:00 · 2026-05-04 14:58:02 +08:00
470 changed files with 41681 additions and 1966 deletions
--- a/.env.development
+++ b/.env.development
@@ -1,4 +1,5 @@
 # VITE_APP_URL = http://192.168.31.82:8771
-# VITE_APP_URL = http://18.167.251.121:10095
-VITE_APP_URL = https://www.lc-api.aida.com.hk
+VITE_APP_URL = http://18.167.251.121:10015
+# VITE_APP_URL = http://192.168.31.118:8080
+# VITE_APP_URL = http://192.168.31.82:8755
 VITE_GOOGLE_CLIENT_ID = 216037134725-7q8vqp0ohtmohlosltkfg7bd2v29rm5a.apps.googleusercontent.com
--- a/.env.production
+++ b/.env.production
@@ -1,3 +1,3 @@
-VITE_APP_URL = https://www.lc-api.aida.com.hk
-# VITE_APP_URL = http://18.167.251.121:10095
+# VITE_APP_URL = https://www.lc-api.aida.com.hk
+VITE_APP_URL = http://18.167.251.121:10015
 VITE_GOOGLE_CLIENT_ID = 29310152396-nnsd3h533fld665oguu8ovrt1nukmt46.apps.googleusercontent.com
--- a/.gitea/workflows/prod_build_manual.yaml
+++ b/.gitea/workflows/prod_build_manual.yaml
@@ -0,0 +1,56 @@
+name: 手动触发 FiDA WEB-Node.js 生产分支构建部署
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [ 18.18.0 ]
+    env:
+      REMOTE_DEPLOY_PATH: /workspace/workspace_fida/Web_Workspace_Server/Prod
+
+    steps:
+      - name: 0.记录开始时间
+        id: build_start_time
+        run: echo "current_time=$(TZ='Asia/Hong_Kong' date '+%Y-%m-%d %H:%M:%S %Z')" >> $GITHUB_OUTPUT
+
+      - name: 1.检出代码
+        uses: actions/checkout@v4
+        with:
+          ref: main
+
+      - name: 2.设置 Node.js 环境
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm run build
+      - run: ls -l
+
+      - name: 3.同步文件到远程服务器
+        uses: appleboy/scp-action@v0.1.7
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          source: "./dist/*"
+          target: ${{ env.REMOTE_DEPLOY_PATH }}
+          ssh_options: "-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null"
+          strip_components: 0
+
+      - name: 4. 远程重载 Nginx 配置
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          # 核心：执行 Nginx 重载命令
+          script: |
+            echo "尝试重载 Nginx 服务..."
+            # 💡 注意：执行此命令需要服务器用户具有 sudo 权限，并且配置了 NOPASSWD。
+            # 否则工作流可能会因为权限不足而失败。
+            sudo systemctl reload nginx
+            echo "Nginx 重载命令已发送。"
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,5 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+.assistant-rules.md
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,8 +1,10 @@
 {
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
-  "tabWidth": 2,
+  "tabWidth": 4,
  "singleQuote": true,
  "printWidth": 100,
-  "trailingComma": "none"
-}
+  "useTabs": true,
+  "trailingComma": "none",
+  "vueIndentScriptAndStyle": true
+}
--- a/index.html
+++ b/index.html
@@ -3,11 +3,11 @@

  <head>
    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
+    <link rel="icon" href="/favicon.svg">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
-    <link rel="stylesheet" href="/css/woff/fontFamily.css">
+    <link rel="stylesheet" href="/fonts/general/css/general-sans.css">
    <title>FiDA</title>
  </head>

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
  "name": "furniture",
  "version": "0.0.0",
  "private": true,
+  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
@@ -13,18 +14,24 @@
    "postinstall": "husky install"
  },
  "dependencies": {
+    "@crazydos/vue-markdown": "^1.1.4",
    "@vue-flow/core": "^1.48.2",
    "axios": "^1.3.6",
    "crypto-js": "^4.2.0",
    "dagre": "^0.8.5",
    "element-plus": "^2.13.2",
+    "fabric-with-all": "^5.3.1",
    "gsap": "^3.13.0",
-    "markdown-it": "^14.1.0",
+    "jszip": "^3.10.1",
+    "md5": "^2.3.0",
    "normalize.css": "^8.0.1",
    "pinia": "^2.0.32",
    "pinia-persistedstate-plugin": "^0.1.0",
    "pinia-plugin-persistedstate": "^3.1.0",
+    "rehype-raw": "^7.0.0",
+    "three": "^0.148.0",
    "vue": "^3.2.47",
+    "vue-draggable-plus": "^0.6.1",
    "vue-i18n": "^11.2.8",
    "vue-router": "^4.1.6"
  },
@@ -44,7 +51,6 @@
    "less": "^4.3.0",
    "lint-staged": "^13.2.1",
    "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.4",
    "typescript": "~4.8.4",
    "unplugin-auto-import": "^0.15.3",
    "unplugin-vue-components": "^0.24.1",
--- a/public/css/woff/Boska/Boska-Regular.ttf
+++ b/public/css/woff/Boska/Boska-Regular.ttf
--- a/public/css/woff/Boska/Boska-Regular.woff
+++ b/public/css/woff/Boska/Boska-Regular.woff
--- a/public/css/woff/Mazzard/MazzardH-Regular.otf
+++ b/public/css/woff/Mazzard/MazzardH-Regular.otf
--- a/public/css/woff/Roboto/Roboto-Bold.ttf
+++ b/public/css/woff/Roboto/Roboto-Bold.ttf
--- a/public/css/woff/Roboto/Roboto-Regular.ttf
+++ b/public/css/woff/Roboto/Roboto-Regular.ttf
--- a/public/css/woff/Satoshi/Satoshi-Bold.ttf
+++ b/public/css/woff/Satoshi/Satoshi-Bold.ttf
--- a/public/css/woff/Satoshi/Satoshi-Bold.woff
+++ b/public/css/woff/Satoshi/Satoshi-Bold.woff
--- a/public/css/woff/Satoshi/Satoshi-Medium.ttf
+++ b/public/css/woff/Satoshi/Satoshi-Medium.ttf
--- a/public/css/woff/Satoshi/Satoshi-Medium.woff
+++ b/public/css/woff/Satoshi/Satoshi-Medium.woff
--- a/public/css/woff/Satoshi/Satoshi-Regular.ttf
+++ b/public/css/woff/Satoshi/Satoshi-Regular.ttf
--- a/public/css/woff/Satoshi/Satoshi-Regular.woff
+++ b/public/css/woff/Satoshi/Satoshi-Regular.woff
--- a/public/css/woff/fontFamily.css
+++ b/public/css/woff/fontFamily.css
@@ -1,50 +0,0 @@
-/* cyrillic-ext */
-@font-face {
-	font-family: 'satoshiRegular';
-	font-style: italic;
-	font-weight: 700;
-	src: url("./Satoshi/Satoshi-Regular.ttf") format('woff2'), url("./Satoshi/Satoshi-Regular.woff") format('woff2');
-	/* unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; */
-}
-@font-face {
-	font-family: 'satoshiBold';
-	font-style: italic;
-	font-weight: 700;
-	src: url("./Satoshi/Satoshi-Bold.ttf") format('woff2'), url("./Satoshi/Satoshi-Bold.woff") format('woff2');
-	/* unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; */
-}
-@font-face {
-	font-family: 'satoshiMedium';
-	font-style: italic;
-	font-weight: 700;
-	src: url("./Satoshi/Satoshi-Medium.ttf") format('woff2'), url("./Satoshi/Satoshi-Medium.woff") format('woff2');
-	/* unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; */
-}
-@font-face {
-	font-family: 'mazzardHRegular';
-	font-style: italic;
-	font-weight: 700;
-	src: url("./Mazzard/MazzardH-Regular.otf") format('opentype');
-	/* unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; */
-}
-@font-face {
-	font-family: 'robotoBold';
-	font-style: italic;
-	font-weight: 700;
-	src: url("./Roboto/Roboto-Bold.ttf") format('woff2');
-	/* unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; */
-}
-@font-face {
-	font-family: 'robotoRegular';
-	font-style: italic;
-	font-weight: 700;
-	src: url("./Roboto/Roboto-Regular.ttf") format('woff2');
-	/* unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; */
-}
-@font-face {
-	font-family: 'boskaRegular';
-	font-style: italic;
-	font-weight: 700;
-	src: url("./Boska/Boska-Regular.ttf") format('woff2'), url("./Boska/Boska-Regular.woff") format('woff2');
-	/* unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; */
-}
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,4 @@
+<svg width="753" height="753" viewBox="0 0 753 753" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M634.536 365.274L634.824 364.392L697.737 132.952H631.864L613.396 200.848H363.698L360.43 201.55C272.317 220.226 254.644 306.834 253.94 310.508L253.362 313.497V419.411C180.124 419.159 122.772 418.871 121.382 418.835L121.039 482.264C126.671 482.3 182.651 482.606 253.38 482.84V632.625H316.96V483.038C345.627 483.11 374.98 483.128 403.051 483.128C467.299 483.128 461.451 482.912 489.865 482.264C493.114 482.192 496.255 482.012 499.378 481.76L608.071 632.625H686.364L562.128 460.166C613.089 427.209 633.434 368.678 634.572 365.274H634.536ZM488.403 418.871C448.579 419.753 411.121 419.789 316.942 419.573V320.251C319.668 310.255 332.142 274.11 370.702 264.277H596.175L574.042 345.752C571.028 353.928 545.845 417.574 488.403 418.889V418.871Z" fill="black"/>
+<path d="M91.0127 418.726H54.2764V482.498H91.0127V418.726Z" fill="black"/>
+</svg>
--- a/public/fonts/general/css/general-sans.css
+++ b/public/fonts/general/css/general-sans.css
@@ -0,0 +1,101 @@
+/**
+* @license
+*
+* Font Family: General Sans
+* Designed by: Frode Helland
+* URL: https://www.fontshare.com/fonts/general-sans
+* © 2026 Indian Type Foundry
+*
+* General Sans Extralight 
+* General Sans ExtralightItalic 
+* General Sans Light 
+* General Sans LightItalic 
+* General Sans Regular 
+* General Sans Italic 
+* General Sans Medium 
+* General Sans MediumItalic 
+* General Sans Semibold 
+* General Sans SemiboldItalic 
+* General Sans Bold 
+* General Sans BoldItalic 
+* General Sans Variable (Variable font)
+* General Sans VariableItalic (Variable font)
+* Misans-Regular
+
+*
+*/
+@font-face {
+	font-family: 'Regular';
+	src: url('../fonts/GeneralSans-Regular.otf') format('opentype');
+	font-weight: 400;
+	font-display: swap;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Medium';
+	src: url('../fonts/GeneralSans-Medium.otf') format('opentype'),
+		url('../fonts/GeneralSans-MediumItalic.otf') format('opentype');
+	font-weight: 500;
+	font-display: swap;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'SemiBold';
+	src: url('../fonts/GeneralSans-Semibold.otf') format('opentype'),
+		url('../fonts/GeneralSans-SemiboldItalic.otf') format('opentype');
+	font-weight: 600;
+	font-display: swap;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Bold';
+	src: url('../fonts/GeneralSans-Bold.otf') format('opentype'),
+		url('../fonts/GeneralSans-BoldItalic.otf') format('opentype');
+	font-weight: 700;
+	font-display: swap;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Migra-Extrabold';
+	src: url('../fonts/Migra-Extrabold.otf') format('opentype'),
+		url('../fonts/Migra-Extrabold.ttf') format('truetype'),
+		url('../fonts/Migra-Extrabold.woff') format('woff'),
+		url('../fonts/Migra-Extrabold.woff2') format('woff2');
+	font-weight: 700;
+	font-display: swap;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'LBold';
+	src: url('../fonts/MazzardL-Bold.otf') format('opentype');
+	font-weight: 700;
+	font-display: swap;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'MBold';
+	src: url('../fonts/MazzardM-Bold.otf') format('opentype');
+	font-weight: 700;
+	font-display: swap;
+	font-style: normal;
+}
+@font-face {
+	font-family: 'MSemiBold';
+	src: url('../fonts/MazzardL-SemiBold.otf') format('opentype');
+	font-weight: 700;
+	font-display: swap;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'MisansRegular';
+	src: url('../fonts/MiSans-Regular.ttf') format('truetype');
+	font-style: normal;
+	font-weight: 330;
+}
--- a/public/fonts/general/fonts/GeneralSans-Bold.otf
+++ b/public/fonts/general/fonts/GeneralSans-Bold.otf
--- a/public/fonts/general/fonts/GeneralSans-BoldItalic.otf
+++ b/public/fonts/general/fonts/GeneralSans-BoldItalic.otf
--- a/public/fonts/general/fonts/GeneralSans-Extralight.otf
+++ b/public/fonts/general/fonts/GeneralSans-Extralight.otf
--- a/public/fonts/general/fonts/GeneralSans-ExtralightItalic.otf
+++ b/public/fonts/general/fonts/GeneralSans-ExtralightItalic.otf
--- a/public/fonts/general/fonts/GeneralSans-Italic.otf
+++ b/public/fonts/general/fonts/GeneralSans-Italic.otf
--- a/public/fonts/general/fonts/GeneralSans-Light.otf
+++ b/public/fonts/general/fonts/GeneralSans-Light.otf
--- a/public/fonts/general/fonts/GeneralSans-LightItalic.otf
+++ b/public/fonts/general/fonts/GeneralSans-LightItalic.otf
--- a/public/fonts/general/fonts/GeneralSans-Medium.otf
+++ b/public/fonts/general/fonts/GeneralSans-Medium.otf
--- a/public/fonts/general/fonts/GeneralSans-MediumItalic.otf
+++ b/public/fonts/general/fonts/GeneralSans-MediumItalic.otf
--- a/public/fonts/general/fonts/GeneralSans-Regular.otf
+++ b/public/fonts/general/fonts/GeneralSans-Regular.otf
--- a/public/fonts/general/fonts/GeneralSans-Semibold.otf
+++ b/public/fonts/general/fonts/GeneralSans-Semibold.otf
--- a/public/fonts/general/fonts/GeneralSans-SemiboldItalic.otf
+++ b/public/fonts/general/fonts/GeneralSans-SemiboldItalic.otf
--- a/public/fonts/general/fonts/MazzardL-Bold.otf
+++ b/public/fonts/general/fonts/MazzardL-Bold.otf
--- a/public/fonts/general/fonts/MazzardL-SemiBold.otf
+++ b/public/fonts/general/fonts/MazzardL-SemiBold.otf
--- a/public/fonts/general/fonts/MazzardM-Bold.otf
+++ b/public/fonts/general/fonts/MazzardM-Bold.otf
--- a/public/fonts/general/fonts/MiSans-Regular.ttf
+++ b/public/fonts/general/fonts/MiSans-Regular.ttf
--- a/public/fonts/general/fonts/Migra-Extrabold.otf
+++ b/public/fonts/general/fonts/Migra-Extrabold.otf
--- a/public/fonts/general/fonts/Migra-Extrabold.ttf
+++ b/public/fonts/general/fonts/Migra-Extrabold.ttf
--- a/public/fonts/general/fonts/Migra-Extrabold.woff
+++ b/public/fonts/general/fonts/Migra-Extrabold.woff
--- a/public/fonts/general/fonts/Migra-Extrabold.woff2
+++ b/public/fonts/general/fonts/Migra-Extrabold.woff2
--- a/public/image/nuic/style-1.png
+++ b/public/image/nuic/style-1.png
--- a/public/image/nuic/style-2.png
+++ b/public/image/nuic/style-2.png
--- a/public/image/nuic/style-3.png
+++ b/public/image/nuic/style-3.png
--- a/public/image/nuic/style-4.png
+++ b/public/image/nuic/style-4.png
--- a/public/image/nuic/style-5.png
+++ b/public/image/nuic/style-5.png
--- a/public/image/nuic/style-6.png
+++ b/public/image/nuic/style-6.png
--- a/public/image/nuic/style-7.png
+++ b/public/image/nuic/style-7.png
--- a/public/image/nuic/style-8.png
+++ b/public/image/nuic/style-8.png
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,20 +1,37 @@
 <template>
-	<RouteCache />
-	<div id="loading" v-if="loading" v-loading="true"></div>
+	<!-- <RouteCache /> -->
+	<router-view></router-view>
+	<div id="loading" v-show="loading" v-loading="true"></div>
 </template>

 <script setup lang="ts">
 	import RouteCache from '@/components/RouteCache.vue'
-	import { computed } from 'vue'
+	import { useRouter } from 'vue-router'
+	import { computed, provide, nextTick, ref } from 'vue'
 	import { useGlobalStore } from '@/stores'
+	const router = useRouter()
 	const globalStore = useGlobalStore()
 	const loading = computed(() => globalStore.state.loading || globalStore.state.view_loading)
+	globalStore.setLoading(false)
+	window['onClickPrivacy'] = () => {
+		// window.event?.preventDefault()
+		console.log('onClickPrivacy')
+	}
+	window['onClickLogin'] = () => {
+		router.push({ name: 'login' })
+	}
+	window['onClickRegister'] = () => {
+		router.push({ name: 'register' })
+	}
 </script>

 <style lang="less">
 	#app {
 		font-size: 1.6rem;
 	}
+	.el-message {
+		font-size: 1.6rem;
+	}
 	#loading {
 		position: fixed;
 		z-index: 999999999;
--- a/src/api/agent.ts
+++ b/src/api/agent.ts
@@ -0,0 +1,97 @@
+import request from '@/utils/request'
+
+// 对话
+export interface AgentParamsType {
+	message: string // 消息
+	projectID: string //
+	versionID?: string //
+	imageUrlList?: string[] // 图片URL列表
+	configParams: Record<string, any> // 其他配置参数
+	token: string
+	needSuggestion?: boolean
+	useReport: bolean
+}
+export const chatUrl = '/api/ai-design/chat'
+
+export interface CreateProjectParamsType {
+	type: string
+	region: string
+	style: string
+	temperature: number | string
+}
+export const createProject = (data: CreateProjectParamsType): Promise<any> => {
+	return request({ url: '/api/project/init', method: 'post', data })
+}
+
+/**
+ * 获取项目信息和会话历史
+ * @param data 获取项目信息参数
+ * @param data.id 项目id
+ * @returns 获取项目信息
+ */
+export const getProjectInfo = (data) => {
+	return request({
+		url: `/api/project/${data.id}`,
+		method: 'get'
+	})
+}
+
+/**
+ * 获取项目版本列表
+ * @param params 获取项目版本列表参数
+ * @param params.page 页码
+ * @param params.size 每页数量
+ * @returns 获取项目版本列表
+ */
+export const getProjectList = (params) => {
+	return request({
+		url: `/api/project/list`,
+		method: 'get',
+		params,
+		loading: true,
+	})
+}
+
+/**
+ * 修改项目信息
+ * @param id 项目id
+ * @param data 修改项目信息参数
+ * @param data.name 项目名称
+ * @param data.type 项目类型
+ * @param data.region 项目区域
+ * @param data.style 项目风格
+ * @param data.temperature 项目温度
+ * @returns 修改项目信息
+ */
+export const updateProject = (id: string, data: Object) => {
+	return request({
+		url: `/api/project/${id}`,
+		method: 'put',
+		data,
+		loading: true,
+	})
+}
+/**
+ * 删除项目
+ * @param id 项目id
+ * @returns 删除项目
+ */
+export const deleteProject = (id: string) => {
+	return request({
+		url: `/api/project/${id}`,
+		method: 'delete',
+		loading: true,
+	})
+}
+
+/**
+ * 批量获取url对应的标题
+ * @param { string[] } data 批量获取url对应的标题参数
+ */
+export const fetchUrlTitle = (data: string[]) => {
+	return request({
+		url: '/api/ai-design/fetch-url-content',
+		method: 'post',
+		data: { urls: data }
+	})
+}
--- a/src/api/depth-canvas.ts
+++ b/src/api/depth-canvas.ts
@@ -0,0 +1,54 @@
+import request from '@/utils/request'
+
+/**
+ * 获取深度画布
+ * @param id depth id
+ * @returns 深度画布数据
+ */
+export const getDepthCanvas = (id: string) => {
+	return request({
+		url: `/api/deep-canvas/${id}`,
+		method: 'get',
+		loading: true,
+	})
+}
+
+/**
+ * 保存深度画布
+ * @param data 保存depth的画布数据
+ * @returns 保存结果
+ */
+export const saveDepthCanvas = (data: object) => {
+	return request({
+		url: `/api/deep-canvas/update`,
+		method: 'put',
+		data,
+		loading: true,
+	})
+}
+
+/**
+ * 删除深度画布
+ * @param id depth id
+ * @returns 删除结果
+ */
+export const deleteDepthCanvas = (id: string) => {
+	return request({
+		url: `/api/deep-canvas/${id}`,
+		method: 'delete',
+		loading: true,
+	})
+}
+
+/**
+ * 获取分隔后图片
+ * @param data 分隔参数数据
+ * @returns 分隔后图片数据
+ */
+export const getSegAnythingImage = (data: object) => {
+	return request({
+		url: `/api/python/segAnything`,
+		method: 'post',
+		data,
+	})
+}
--- a/src/api/flow-canvas.ts
+++ b/src/api/flow-canvas.ts
@@ -0,0 +1,302 @@
+import request from '@/utils/request'
+
+/**
+ * 获取sketch的画布详情
+ * @param data 获取sketch的画布详情的参数
+ * @param data.id sketch id
+ * @returns 获取sketch的画布详情
+ */
+export interface getSketchFlowCanvasData {
+	id: string
+}
+export const getSketchFlowCanvas = (data:getSketchFlowCanvasData,loading?:boolean) => {
+	return request({
+		url: `/api/canvas/detail/${data.id}`,
+		method: 'get',
+		loading
+	})
+}
+
+/**
+ * 保存或者更新sketch的画布详情
+ * @param data 获取sketch的画布详情的参数
+ * @param data.id sketch id
+ * @param data.canvasData sketch id
+ * @returns 获取sketch的画布详情
+ */
+export interface saveSketchFlowCanvasData {
+	id?: string
+	canvasData: string
+}
+export const putSketchFlowCanvas = (data:saveSketchFlowCanvasData,loading?:boolean) => {
+	return request({
+		url: `/api/canvas/detail/${data.id}`,
+		method: 'put',
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		data: data.canvasData,
+		loading
+	})
+}
+
+/**
+ * 删除sketch和画布详情
+ * @param data 删除sketch的画布详情的参数
+ * @param data.id sketch id
+ * @param data.versionNodeId 节点id
+ * @returns 获取sketch的画布详情
+ */
+export interface deleteSketchFlowCanvasData {
+	id?: string
+	versionNodeId?: string
+}
+export const deleteSketchFlowCanvas = (data:deleteSketchFlowCanvasData) => {
+	return request({
+		url: `/api/canvas/detail/${data.versionNodeId}/${data.id}`,
+		method: 'delete',
+	})
+}
+
+/**
+ * 根据taskId查询结果
+ * @param data 根据taskId查询结果的参数
+ * @param data.taskIds taskIds列表
+ * @returns 根据taskId查询结果
+ */
+export interface taskIdList {
+	taskIds?: Array<string>
+}
+export const getTaskidResult = (data:taskIdList) => {
+	return request({
+		url: `/api/image/tasks/batch`,
+		method: 'post',
+		data: {
+			taskIds: data.taskIds
+		}
+	})
+}
+
+/**
+ * 图片转真是风格
+ * @param data 图片转真是风格的参数
+ * @param data.sketchId sketch id
+ * @param data.imageUrl 进行生成的图片。minio地址和正常地址都可以
+ * @param data.mode 选择的模型
+ * @param data.size 生成图片的大小
+ * @param data.userPrompt 生成图片的提示词
+ * @returns 图片转真是风格
+ */
+export interface toRealStyleData {
+	sketchId?: string
+	imageUrl?: string
+	mode?: string
+	size?: string
+	userPrompt?: string
+}
+export const toRealStyleApi = (data:toRealStyleData) => {
+	return request({
+		url: `/api/image/to-real-style`,
+		method: 'post',
+		data:{
+			sketchId: data.sketchId,
+			imageUrl: data.imageUrl,
+			mode: data.mode,
+			size: data.size,
+			userPrompt: data.userPrompt
+		}
+	})
+}
+/**
+ * 图片转真是风格-变体
+ * @param data 图片转真是风格-变体的参数
+ * @param data.sketchId sketch id
+ * @param data.imageUrl 进行生成的图片。minio地址和正常地址都可以
+ * @param data.mode 选择的模型
+ * @param data.size 生成图片的大小
+ * @param data.userPrompt 生成图片的提示词
+ * @param data.original3dUrl 原始3d模型的url
+ * @returns 图片转真是风格
+ */
+export interface toRealStyleData {
+	sketchId?: string
+	imageUrl?: string
+	mode?: string
+	size?: string
+	userPrompt?: string
+	original3dUrl?: string
+}
+export const toRealVariantsApi = (data:toRealStyleData) => {
+	return request({
+		url: `/api/image/to-real-variants`,
+		method: 'post',
+		data:{
+			sketchId: data.sketchId,
+			imageUrl: data.imageUrl,
+			mode: data.mode,
+			size: data.size,
+			userPrompt: data.userPrompt,
+			original3dUrl: data.original3dUrl,
+		}
+	})
+}
+/**
+ * 线稿图上色
+ * @param data 线稿图上色的参数
+ * @param data.sketchId sketch id
+ * @param data.imageUrl 进行生成的图片。minio地址和正常地址都可以
+ * @param data.variantCount 生成图片的数量
+ * @param data.colors 生成上色的图片颜色列表
+ * @param data.mode 选择的模型
+ * @returns 线稿图上色
+ */
+export interface toColorPaletteData {
+	sketchId?: string
+	imageUrl?: string
+	variantCount?: string
+	colors?: Array<string>
+	mode?: string
+}
+export const toColorPaletteApi = (data:toColorPaletteData) => {
+	return request({
+		url: `/api/image/color-palette`,
+		method: 'post',
+		data:{
+			sketchId: data.sketchId,
+			imageUrl: data.imageUrl,
+			variantCount: data.variantCount,
+			colors: data.colors,
+			mode: data.mode,
+		}
+	})
+}
+
+/**
+ * 场景构图
+ * @param data 场景构图的参数
+ * @param data.sketchId sketch id
+ * @param data.imageUrl 进行生成的图片。minio地址和正常地址都可以
+ * @param data.styles 生成上色的图片颜色列表
+ * @param data.userPrompt 生成上色的图片颜色列表
+ * @param data.mode 选择的模型
+ * @returns 场景构图
+ */
+export interface toSceneCompositionData {
+	sketchId?: string
+	imageUrl?: string
+	userPrompt?: string
+	styles?: Array<string>
+	mode?: string
+}
+export const toSceneCompositionApi = (data:toSceneCompositionData) => {
+	return request({
+		url: `/api/image/scene-composition`,
+		method: 'post',
+		data:{
+			sketchId: data.sketchId,
+			imageUrl: data.imageUrl,
+			userPrompt: data.userPrompt,
+			styles: data.styles,
+			mode: data.mode,
+		}
+	})
+}
+
+/**
+ * 线稿贴印花
+ * @param data 线稿贴印花的参数
+ * @param data.sketchId sketch id
+ * @param data.imageUrl 进行生成的图片。minio地址和正常地址都可以
+ * @param data.styles 生成上色的图片颜色列表
+ * @param data.userPrompt 生成上色的图片颜色列表
+ * @param data.mode 选择的模型
+ * @returns 线稿贴印花
+ */
+export interface sketchAddPrintData {
+	sketchId?: string
+	imageUrl?: string
+	surFaceUrl?: string
+	userPrompt?: string
+	mode?: string
+}
+export const sketchAddPrintApi = (data:sketchAddPrintData) => {
+	return request({
+		url: `/api/image/surface-edit`,
+		method: 'post',
+		data:{
+			sketchId: data.sketchId,
+			imageUrl: data.imageUrl,
+			userPrompt: data.userPrompt,
+			surFaceUrl: data.surFaceUrl,
+			mode: data.mode,
+		}
+	})
+}
+
+/**
+ * 图片转3d
+ * @param data 图片转3d的参数
+ * @param data.sketchId sketch id
+ * @param data.imageUrls 进行生成的图片。minio地址和正常地址都可以
+ * @param data.mode 选择的模型
+ * @returns 图片转3d
+ */
+export interface sketchToThreeData {
+	sketchId?: string
+	imageUrls?: Array<string>
+	mode?: string
+}
+export const sketchToThreeApi = (data:sketchToThreeData) => {
+	return request({
+		url: `/api/image/img-to-3d`,
+		method: 'post',
+		data:{
+			sketchId: data.sketchId,
+			imageUrls: data.imageUrls,
+			mode: data.mode,
+		}
+	})
+}
+
+/**
+ * 3d模型转3视图
+ * @param data 3d模型转3视图的参数
+ * @param data.sketchId sketch id
+ * @param data.glbUrl 生成的3d模型地址
+ * @returns 3d模型转3视图
+ */
+export interface threeToThreeViewsData {
+	sketchId?: string
+	glbUrl?: string
+}
+export const threeToThreeViewsApi = (data:threeToThreeViewsData) => {
+	return request({
+		url: `/api/image/glb-to-3views`,
+		method: 'post',
+		data:{
+			sketchId: data.sketchId,
+			glbUrl: data.glbUrl,
+		}
+	})
+}
+
+/**
+ * 根据sketchId更新VersionNode的sketch的URL值
+ * @param data 根据sketchId更新VersionNode的sketchL值的参数
+ * @param data.sketchId sketch id
+ * @param data.newUrl 生成的3d模型地址
+ * @returns 根据sketchId更新VersionNode的sketch的URL值
+ */
+export interface threeToThreeViewsData {
+	sketchId?: string
+	newUrl?: string
+}
+export const updateVersionSketchUrlApi = (data:threeToThreeViewsData) => {
+	return request({
+		url: `/api/canvas/sketchIdAndUrl/${data.sketchId}`,
+		method: 'put',
+		data:{
+			newUrl: data.newUrl,
+		}
+	})
+}
--- a/src/api/login.ts
+++ b/src/api/login.ts
@@ -1,77 +0,0 @@
-import request from '@/utils/request'
-
-interface LoginParamsType {
-  name?: string // 姓名
-  email: string // 邮箱
-  password?: string // 密码
-  operationType: 'REGISTER' | 'LOGIN' | 'FORGET_PWD'
-  verifyCode?: string // 验证码
-}
-
-// 发送验证码
-export const precheckEmail = (params: { email: string }): Promise<ApiResponse> => {
-  return request({
-    url: '/api/auth/precheckEmail',
-    method: 'get',
-    params
-  })
-}
-
-export const fetchRegisterOrLogin = (data: LoginParamsType): Promise<LoginResponse> => {
-  return request({
-    url: '/api/auth/registerOrLogin',
-    method: 'post',
-    data
-  })
-}
-
-export const resetPassword = (data: LoginParamsType): Promise<ApiResponse> => {
-  return request({
-    url: '/api/auth/forgotPwd',
-    method: 'post',
-    data
-  })
-}
-
-export const checkLoginStatus = (): Promise<ApiResponse<LoginResponse>> => {
-  return request({
-    url: '/api/auth/checkLoginStatus',
-    method: 'get',
-    meta: { responseAll: true }
-  })
-}
-
-export const LogOut = (): Promise<ApiResponse> => {
-  return request({
-    url: '/api/auth/logout',
-    method: 'get'
-  })
-}
-
-// Google登录/注册参数类型
-interface GoogleAuthParamsType {
-  accessToken?: string // Google ID Token (用于One Tap登录)
-}
-export const googleAuth = (data: GoogleAuthParamsType): Promise<LoginResponse> => {
-  return request({
-    url: '/api/auth/parseGoogleAccessToken',
-    method: 'get',
-    params: data
-  })
-}
-
-
-/** 更改用户信息
- * @param data 包含用户信息的对象
- * @param data.username 用户名
- * @param data.email 邮箱
- * @param data.password 密码
- * @returns 包含更新后的用户信息的对象
-*/
-export const updateUserInfo = (data: any) => {
-  return request({
-    url: '/api/auth/updateUserInfo',
-    method: 'post',
-    data
-  })
-}
--- a/src/api/upload.ts
+++ b/src/api/upload.ts
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+export const uploadImage = (data: FormData, loading = false) => {
+	return request({
+		url: '/api/file/upload',
+		method: 'POST',
+		loading,
+		data
+	})
+}
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -0,0 +1,150 @@
+import request from '@/utils/request'
+
+/**
+ * 
+ * 发送验证码
+ * @param params 发送验证码的参数
+ * @param params.email 邮箱
+ * @param params.type 验证码类型
+ * @param params.password 密码
+ * @returns 验证码发送成功的响应
+ */
+export const SendVerificationCode = (params) => {
+	return request({
+		url: '/api/user/send-verification-code',
+		method: 'post',
+		loading: true,
+		params
+	})
+}
+
+/**
+ * 注册用户
+ * @param data 注册用户的参数
+ * @param data.username 姓名
+ * @param data.password 密码
+ * @param data.email 邮箱
+ * @param data.verificationCode 验证码
+ * @returns 注册成功后的token
+*/
+export const Register = (data) => {
+	return request({
+		url: '/api/user/register',
+		method: 'post',
+		loading: true,
+		data
+	})
+}
+/**
+ * 登录用户
+ * @param data 登录用户的参数
+ * @param data.email 邮箱
+ * @param data.password 密码
+ * @param data.verificationCode 验证码
+ * @returns 登录成功后的token
+*/
+export const Login = (data) => {
+	return request({
+		url: '/api/user/login',
+		method: 'post',
+		loading: true,
+		data
+	})
+}
+/**
+ * 退出登录
+ * @returns 退出登录成功的响应
+*/
+export const Logout = () => {
+	return request({
+		url: '/api/user/logout',
+		method: 'post',
+		loading: true,
+	})
+}
+
+/**
+ * 忘记密码
+ * @param data 忘记密码的参数
+ * @param data.email 邮箱
+ * @param data.newPassword 新密码
+ * @param data.verificationCode 验证码
+ * @returns 忘记密码成功后的token
+*/
+export const ForgotPassword = (data) => {
+	return request({
+		url: '/api/user/forgot-password',
+		method: 'post',
+		loading: true,
+		data
+	})
+}
+
+/**
+ * 获取用户信息
+ * @returns 用户信息
+*/
+export const GetUserInfo = () => {
+	return request({
+		url: '/api/user/info',
+		method: 'get',
+		loading: true,
+	})
+}
+
+/**
+ * 更新用户拓展信息
+ * @param data 更新用户拓展信息的参数
+ * @param data.base 基础信息
+ * @param data.vibe 风格特点
+ * @param data.role 角色类型
+ * @returns 更新用户拓展信息成功的响应
+*/
+export const UpdateUserProfile = (data, loading = false) => {
+	return request({
+		url: '/api/user/profile',
+		method: 'put',
+		loading,
+		data
+	})
+}
+
+/**
+ * 上传头像
+ * @param data 上传头像的参数
+ * @param data.avatar 头像文件
+ * @returns 上传头像成功的响应
+*/
+export const UpdateUserAvatar = (data) => {
+	return request({
+		url: '/api/user/avatar',
+		method: 'post',
+		data
+	})
+}
+
+/**
+ * 获取上传头像次数
+*/
+export const getAvatarLimit = () => {
+	return request({
+		url: '/api/user/avatar/limit',
+		method: 'get',
+	})
+}
+
+/**
+ * 获取用户风格图片列表
+ * @param params 获取用户风格图片列表的参数	
+ * @param params.pageNum 页码
+ * @param params.pageSize 每页数量
+ * @returns 用户风格图片列表
+*/
+export const GetUserStyleImages = (params) => {
+	return request({
+		url: '/api/user/style/images',
+		method: 'get',
+		params,
+		loading: true,
+	})
+}
--- a/src/api/versitonTree.ts
+++ b/src/api/versitonTree.ts
@@ -0,0 +1,56 @@
+import request from '@/utils/request'
+
+/**
+ * 获取节点详情
+ * @param data 获取节点详情的参数
+ * @param data.projectId 项目id
+ * @param data.id 节点id
+ * @returns 获取节点详情
+ */
+export const getChatNodeDetail = (data) => {
+	return request({
+		url: `/api/version/${data.projectId}/chat/node/${data.id}`,
+		method: 'get',
+	})
+}
+
+/**
+ * 获取版本树
+ * @param data 获取版本树的参数
+ * @param data.projectId 项目id
+ * @returns 获取版本树
+*/
+export const versionTree = (data) => {
+	return request({
+		url: `/api/version/${data.projectId}/chat/tree`,
+		method: 'get',
+	})
+}
+
+/**
+ * 获取节点缩略信息
+ * @param data 获取节点缩略信息的参数
+ * @param data.projectId 项目id
+ * @param data.id 节点id
+ * @returns 回溯该节点之前的会话列表
+*/
+export const getNodeAncestors = (data) => {
+	return request({
+		url: `/api/version/${data.projectId}/chat/node/${data.id}/ancestors`,
+		method: 'get',
+	})
+}
+
+/**
+ * 清除未生成图片的节点对话
+ * @param data 清除未生成图片的节点对话的参数
+ * @param data.projectId 项目id
+ * @param data.id 节点id
+ * @returns 获取节点缩略信息
+*/
+export const clearNodeChat = (data) => {
+	return request({
+		url: `/api/version/${data.projectId}/chat/reStore/${data.id}`,
+		method: 'get',
+	})
+}
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -19,6 +19,7 @@ body,
  width: 100%;
  height: 100%;
  overflow: hidden;
+  font-family: 'Medium';
 }
@keyframes loading {
  0% {
@@ -28,8 +29,86 @@ body,
    transform: rotate(360deg);
  }
 }
-.background-pink {
-  background-color: #f8f7f5;
-  background-image: url('@/assets/images/home-bg.png');
-  background-size: 100% 100%;
+@keyframes opacity-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes z-index-10to-1 {
+  0% {
+    z-index: 10;
+  }
+  100% {
+    z-index: -1;
+  }
+}
+.flex {
+  display: flex;
+}
+.flex-center {
+  justify-content: center;
+  align-items: center;
+}
+.flex-1 {
+  flex: 1;
+}
+.flex-col {
+  flex-direction: column;
+}
+.align-center {
+  align-items: center;
+}
+.space-between {
+  justify-content: space-between;
+}
+.justify-center {
+  justify-content: center;
+}
+.relative {
+  position: relative;
+}
+.el-overlay {
+  --el-color-primary: #ff7a51;
+  --el-color-primary-light-3: #ffa785;
+  --el-color-primary-light-5: #ffc2aa;
+  --el-color-primary-light-7: #ffddcf;
+  --el-color-primary-light-8: #ffe8df;
+  --el-color-primary-light-9: #fff2ec;
+  --el-color-primary-dark-2: #cc6241;
+}
+.el-select,
+.el-popper {
+  --el-color-primary: #6c6c6c;
+  /* 主灰色 */
+  --el-color-primary-light-3: #8a8a8a;
+  /* 较浅的灰色（混合20%白） */
+  --el-color-primary-light-5: #a8a8a8;
+  /* 更浅的灰色（混合33%白） */
+  --el-color-primary-light-7: #c6c6c6;
+  /* 浅灰色（混合47%白） */
+  --el-color-primary-light-8: #d4d4d4;
+  /* 很浅的灰色（混合53%白） */
+  --el-color-primary-light-9: #e3e3e3;
+  /* 极浅的灰色（混合60%白） */
+  --el-color-primary-dark-2: #565656;
+  /* 深灰色（加深20%） */
+}
+.mini-scrollbar::-webkit-scrollbar {
+  width: 0.4rem;
+}
+.mini-scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 0.4rem;
+  background: rgba(0, 0, 0, 0.2);
+}
+.mosaic-bg {
+  --mosaic-bg-size: 1rem;
+  --mosaic-bg-color1: #efefef;
+  --mosaic-bg-color2: #fff;
+  background-image: repeating-conic-gradient(var(--mosaic-bg-color1) 0% 25%, var(--mosaic-bg-color2) 0% 50%);
+  background-repeat: repeat;
+  background-position: 50% 50%;
+  background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
 }
--- a/src/assets/css/style.less
+++ b/src/assets/css/style.less
@@ -21,6 +21,7 @@ body,
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
+	font-family: 'Medium';
 }

@keyframes loading {
@@ -33,8 +34,96 @@ body,
 	}
 }

-.background-pink {
-	background-color: rgba(248, 247, 245, 1);
-	background-image: url('@/assets/images/home-bg.png');
-	background-size: 100% 100%;
+@keyframes opacity-in {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes z-index-10to-1 {
+	0% {
+		z-index: 10;
+	}
+
+	100% {
+		z-index: -1;
+	}
+}
+
+.flex {
+	display: flex;
+}
+
+.flex-center {
+	justify-content: center;
+	align-items: center;
+}
+
+.flex-1 {
+	flex: 1;
+}
+
+.flex-col {
+	flex-direction: column;
+}
+
+.align-center {
+	align-items: center;
+}
+
+.space-between {
+	justify-content: space-between;
+}
+
+.justify-center {
+	justify-content: center;
+}
+
+.relative {
+	position: relative;
+}
+
+.el-overlay {
+	--el-color-primary: #ff7a51;              // 主橙红色
+	--el-color-primary-light-3: #ffa785;       // 较浅的橙红（混合20%白）
+	--el-color-primary-light-5: #ffc2aa;       // 更浅的橙红（混合33%白）
+	--el-color-primary-light-7: #ffddcf;       // 浅橙红（混合47%白）
+	--el-color-primary-light-8: #ffe8df;       // 很浅的橙红（混合53%白）
+	--el-color-primary-light-9: #fff2ec;       // 极浅的橙红（混合60%白）
+	--el-color-primary-dark-2: #cc6241;        // 深橙红（加深20%）
+}
+.el-select, .el-popper{
+	--el-color-primary: #6c6c6c;                    /* 主灰色 */
+	--el-color-primary-light-3: #8a8a8a;            /* 较浅的灰色（混合20%白） */
+	--el-color-primary-light-5: #a8a8a8;            /* 更浅的灰色（混合33%白） */
+	--el-color-primary-light-7: #c6c6c6;            /* 浅灰色（混合47%白） */
+	--el-color-primary-light-8: #d4d4d4;            /* 很浅的灰色（混合53%白） */
+	--el-color-primary-light-9: #e3e3e3;            /* 极浅的灰色（混合60%白） */
+	--el-color-primary-dark-2: #565656;             /* 深灰色（加深20%） */
+}
+
+
+// 迷你滚动条
+.mini-scrollbar {
+	&::-webkit-scrollbar {
+		width: 0.4rem;
+	}
+	&::-webkit-scrollbar-thumb {
+		border-radius: 0.4rem;
+		background: rgba(0, 0, 0, 0.2);
+	}
+}
+
+.mosaic-bg{
+	--mosaic-bg-size: 1rem;
+	--mosaic-bg-color1: #efefef;
+	--mosaic-bg-color2: #fff;
+	background-image: repeating-conic-gradient(var(--mosaic-bg-color1) 0% 25%, var(--mosaic-bg-color2) 0% 50%);
+	background-repeat: repeat;
+	background-position: 50% 50%;
+	background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
 }
--- a/src/assets/icons/RegionIcon.svg
+++ b/src/assets/icons/RegionIcon.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.84839 1.55138C6.37983 1.0828 5.6203 1.08288 5.15115 1.55159C4.68298 2.01933 4.68278 2.77954 5.15158 3.24883C5.61926 3.71701 6.37934 3.71723 6.84859 3.24842C7.31704 2.7804 7.31734 2.02035 6.84839 1.55138ZM4.30303 0.702658C5.24018 -0.233608 6.75921 -0.234902 7.69694 0.70287C8.63426 1.64024 8.63456 3.16037 7.69673 4.09734C7.38215 4.41162 7.00187 4.62058 6.6 4.724V9C6.6 9.33137 6.33137 9.6 6 9.6C5.66863 9.6 5.4 9.33137 5.4 9V4.72439C4.9979 4.62112 4.61738 4.41203 4.3026 4.09692C3.36652 3.15986 3.36495 1.63989 4.30303 0.702658ZM4.1891 7.30443C4.25198 7.62979 4.0392 7.94451 3.71385 8.00738C2.86688 8.17106 2.19276 8.4162 1.74744 8.68995C1.27691 8.97919 1.2 9.20648 1.2 9.3C1.2 9.36533 1.23168 9.49297 1.43046 9.67573C1.62975 9.85897 1.95124 10.0516 2.39909 10.2257C3.29098 10.5726 4.56389 10.8 6 10.8C7.43613 10.8 8.70904 10.5726 9.60092 10.2257C10.0488 10.0516 10.3703 9.85897 10.5695 9.67573C10.7683 9.49297 10.8 9.36533 10.8 9.3C10.8 9.20648 10.7231 8.9792 10.2526 8.68995C9.80723 8.4162 9.13311 8.17106 8.28615 8.00738C7.9608 7.9445 7.74802 7.62978 7.8109 7.30443C7.87378 6.97908 8.1885 6.7663 8.51385 6.82918C9.44493 7.00912 10.2708 7.29258 10.881 7.66766C11.4659 8.02723 12 8.569 12 9.3C12 9.81457 11.7295 10.2394 11.3817 10.5591C11.0345 10.8783 10.5652 11.1383 10.0359 11.3441C8.97332 11.7573 7.54623 12 6 12C4.45378 12 3.02669 11.7573 1.96416 11.3441C1.4348 11.1383 0.965481 10.8783 0.61826 10.5591C0.270528 10.2394 0 9.81457 0 9.3C0 8.569 0.534063 8.02724 1.11901 7.66766C1.72918 7.29258 2.55506 7.00912 3.48615 6.82918C3.8115 6.7663 4.12622 6.97908 4.1891 7.30443Z" fill="#FF7A51"/>
+</svg>
--- a/src/assets/icons/StyleIcon.svg
+++ b/src/assets/icons/StyleIcon.svg
@@ -0,0 +1,7 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75 6.75C4.24706 6.75 4.65 7.15294 4.65 7.65C4.65 8.14706 4.24706 8.55 3.75 8.55C3.25294 8.55 2.85 8.14706 2.85 7.65C2.85 7.15294 3.25294 6.75 3.75 6.75Z" fill="#FF7A51"/>
+<path d="M3.3 3.9C3.79706 3.9 4.2 4.30294 4.2 4.8C4.2 5.29706 3.79706 5.7 3.3 5.7C2.80294 5.7 2.4 5.29706 2.4 4.8C2.4 4.30294 2.80294 3.9 3.3 3.9Z" fill="#FF7A51"/>
+<path d="M8.25 3.15C8.74706 3.15 9.15 3.55294 9.15 4.05C9.15 4.54706 8.74706 4.95 8.25 4.95C7.75294 4.95 7.35 4.54706 7.35 4.05C7.35 3.55294 7.75294 3.15 8.25 3.15Z" fill="#FF7A51"/>
+<path d="M5.55 2.1C6.04706 2.1 6.45 2.50294 6.45 3C6.45 3.49706 6.04706 3.9 5.55 3.9C5.05294 3.9 4.65 3.49706 4.65 3C4.65 2.50294 5.05294 2.1 5.55 2.1Z" fill="#FF7A51"/>
+<path d="M6 0C9.31371 0 12 2.68629 12 6C12 7.21801 11.0125 8.20547 9.79453 8.20547H7.42031C7.20907 8.2055 7.0377 8.37684 7.0377 8.58809C7.03773 8.67163 7.06507 8.75301 7.11563 8.81953L7.65703 9.53145C7.83089 9.76021 7.92534 10.0398 7.92539 10.3271C7.92539 11.2509 7.1763 12 6.25254 12H6C2.68629 12 0 9.31371 0 6C4.83208e-08 2.68629 2.68629 4.83193e-08 6 0ZM6 1.2C3.34903 1.2 1.2 3.34903 1.2 6C1.2 8.65097 3.34903 10.8 6 10.8H6.25254C6.51356 10.8 6.72539 10.5882 6.72539 10.3271C6.72534 10.3022 6.71699 10.2779 6.70195 10.258L6.16055 9.54551C5.9513 9.27019 5.83773 8.93389 5.8377 8.58809C5.8377 7.7141 6.54633 7.0055 7.42031 7.00547H9.79453C10.3498 7.00547 10.8 6.55527 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2Z" fill="#FF7A51"/>
+</svg>
--- a/src/assets/icons/TypeIcon.svg
+++ b/src/assets/icons/TypeIcon.svg
@@ -0,0 +1,10 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5159_47499)">
+<path d="M0 5.49996H5.49996V0H0V5.49996ZM0.999961 0.999961H4.5V4.5H0.999961V0.999961ZM0 12H5.49996V6.50004H0V12ZM0.999961 7.5H4.5V11H0.999961V7.5ZM12 2.75004C12 1.23363 10.7664 0 9.24996 0C7.73355 0 6.50004 1.23363 6.50004 2.75004V5.50008H9.25008C10.7664 5.49996 12 4.26633 12 2.75004ZM7.5 2.75004C7.5 1.78512 8.28504 1.00008 9.24996 1.00008C10.2149 1.00008 10.9999 1.78512 10.9999 2.75004C10.9999 3.71496 10.215 4.5 9.24996 4.5H7.5V2.75004ZM6.50004 12H12V6.50004H6.50004V12ZM7.5 7.5H11V11H7.5V7.5Z" fill="#FF7A51"/>
+</g>
+<defs>
+<clipPath id="clip0_5159_47499">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/icons/add-print.svg
+++ b/src/assets/icons/add-print.svg
@@ -0,0 +1,4 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2494 4.16797C11.2494 3.73639 10.9211 3.3812 10.5007 3.3387L10.416 3.33464H9.58271C9.12248 3.33464 8.74938 3.70773 8.74938 4.16797V6.3929C8.74938 6.69061 8.59052 6.96588 8.33271 7.11475C8.07493 7.26358 7.75719 7.26351 7.49938 7.11475L5.5723 6.00228C5.17401 5.77239 4.66488 5.90876 4.4346 6.30745H4.43379L4.01793 7.02848C3.78765 7.42735 3.92416 7.93703 4.3223 8.16699L6.24857 9.27865C6.50629 9.42746 6.66514 9.70287 6.66523 10.0005C6.66523 10.2981 6.50622 10.5734 6.24857 10.7223L4.3223 11.8356C3.92416 12.0656 3.78764 12.5752 4.01793 12.9741L4.43379 13.6951H4.4346L4.48099 13.7668C4.72814 14.1094 5.19891 14.2158 5.5723 14.0003L7.49938 12.887C7.75714 12.7383 8.07495 12.7383 8.33271 12.887C8.59052 13.0359 8.74938 13.3112 8.74938 13.6089V15.8346L8.75345 15.9201C8.79623 16.3402 9.15132 16.668 9.58271 16.668H10.416C10.8762 16.6679 11.2494 16.2948 11.2494 15.8346V13.6089C11.2494 13.3111 11.4082 13.0359 11.666 12.887C11.9239 12.7383 12.2416 12.7382 12.4994 12.887L14.4265 14.0003L14.5021 14.0394C14.8872 14.2123 15.3484 14.0689 15.5642 13.6951L15.9808 12.9741C16.211 12.5754 16.0744 12.0657 15.6765 11.8356L13.7494 10.7223C13.4916 10.5734 13.3327 10.2981 13.3327 10.0005C13.3328 9.70279 13.4915 9.42743 13.7494 9.27865L15.6765 8.16699L15.7481 8.12061C16.0901 7.87355 16.1966 7.40226 15.9808 7.02848L15.5642 6.30745C15.334 5.90878 14.8248 5.77249 14.4265 6.00228L12.4994 7.11475C12.2416 7.26355 11.9238 7.2635 11.666 7.11475C11.4082 6.96588 11.2494 6.69062 11.2494 6.3929V4.16797ZM12.916 4.94922L13.5931 4.55859C14.789 3.86845 16.3177 4.27872 17.0078 5.47412H17.007L17.4237 6.19515H17.4245C18.1145 7.39045 17.7055 8.92007 16.5098 9.61068H16.509L15.8327 10.0005L16.5098 10.3919L16.6197 10.4595C17.7299 11.1782 18.0929 12.6496 17.4245 13.8075H17.4237L17.0078 14.5285C16.3177 15.7239 14.789 16.1342 13.5931 15.444L12.916 15.0526V15.8346C12.916 17.1722 11.8655 18.2644 10.5446 18.3314L10.416 18.3346H9.58271C8.202 18.3346 7.08271 17.2153 7.08271 15.8346V15.0526L6.40563 15.444C5.24702 16.1128 3.77587 15.7487 3.05765 14.6383L2.99092 14.5285L2.57425 13.8075C1.88421 12.6123 2.29255 11.0826 3.48815 10.3919L4.16442 10.0005L3.48896 9.61068C2.2931 8.92005 1.88414 7.39045 2.57425 6.19515L2.99092 5.47412L3.05765 5.36426C3.77587 4.25395 5.24703 3.88984 6.40563 4.55859L7.08271 4.94922V4.16797C7.08271 2.78726 8.202 1.66797 9.58271 1.66797H10.416L10.5446 1.67122C11.8655 1.73824 12.916 2.83041 12.916 4.16797V4.94922Z" fill="white"/>
+<path d="M18.2722 1.16258C18.4343 0.721849 19.0574 0.721849 19.2246 1.16258L19.488 1.87686C19.5386 2.01364 19.6501 2.12509 19.7869 2.17575L20.5012 2.43917C20.9419 2.60128 20.9419 3.22438 20.5012 3.39156L19.7869 3.65498C19.6501 3.70564 19.5386 3.81709 19.488 3.95387L19.2246 4.66815C19.0625 5.10888 18.4394 5.10888 18.2722 4.66815L18.0088 3.95387C17.9581 3.81709 17.8466 3.70564 17.7099 3.65498L16.9956 3.39156C16.5549 3.22945 16.5549 2.60635 16.9956 2.43917L17.7099 2.17575C17.8466 2.12509 17.9581 2.01364 18.0088 1.87686L18.2722 1.16258Z" fill="white"/>
+</svg>
--- a/src/assets/icons/angle.svg
+++ b/src/assets/icons/angle.svg
@@ -0,0 +1,9 @@
+<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="6.78125" height="6.78125" fill="url(#pattern0_16_10027)"/>
+<defs>
+<pattern id="pattern0_16_10027" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_16_10027" transform="scale(0.0078125)"/>
+</pattern>
+<image id="image0_16_10027" width="128" height="128" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAN2AAADdgF91YLMAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAThQTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAR/EwCQAAAGd0Uk5TAAECBAUGBwoLDA8QEhUXGRocIiUnLC03PEBCRkdJS0xOVFZXWV1hYmdobnF1enyAgYKDhoeLjY+QkpSVmp6go6anr7S1uLq7wcTGx8jKy8zN0NPV19zg5+rr7vDx8vP09vf6+/z9/seyqosAAAGbSURBVHja7dhVUwNBEATgJri7uwR3lwDBggZ3OZz5//8Aqd17DpLqKqr7KbszV9+83GYTQFEURVH+eRpiiZkqHh+Zs488dtD8RfvKTSnXN+sh+zZG9q2T7J/lcv2gluzXyZcvX758+fLly5cvX758+fLly5cvX758+fLl/y/fJsm+PdZwfbPTPK5vtkT2zaJk34Iqih/Ewo9HOZz3fz1cLHDOn+KLcFnP8IHGN7/epvjAVLjTRPGRfeC3khQfqLz3m20UH5gIX8UMio+iW7/fTvGBEV84iVB8FFz7UhfFB4Z8bYPjI//KFZ8KKT4wmNav5RTun0XPrr7K8YFN1/CQx/HRl7ajIMX7f8mr64lzfGDLNd3lcHz0+7YWjo9yfzEZ5fjAoWtcIfnwzYckPzwMA5KPVt9cxvFR8bfX8+///xB5cO29HB84cv3TJB9x98Da3/q2PZti9t0Dl7M/z0x/9ecAMePlZRzoNGqi2OcOkMQ9d4AA59wBjjHAHWAYWGb6iUwgq3l+Z+9H2d37XXbj3Wn9ha0oiqIoqeUdwmrKD1GdTTcAAAAASUVORK5CYII="/>
+</defs>
+</svg>
--- a/src/assets/icons/arrow-bottom.svg
+++ b/src/assets/icons/arrow-bottom.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L5.04979 5.04979L9.09958 1" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/assets/icons/arrowDown.svg
+++ b/src/assets/icons/arrowDown.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.167367 0.183059C0.390523 -0.0610191 0.752332 -0.0610197 0.975489 0.183058L4.00001 3.49112L7.02451 0.183059C7.24767 -0.0610191 7.60948 -0.0610197 7.83263 0.183058C8.05579 0.427135 8.05579 0.822863 7.83263 1.06694L4.40407 4.81694C4.29691 4.93415 4.15156 5 4.00001 5C3.84846 5 3.70311 4.93415 3.59595 4.81694L0.167368 1.06694C-0.0557889 0.822865 -0.0557895 0.427137 0.167367 0.183059Z" fill="currentColor"/>
+</svg>
--- a/src/assets/icons/back-white.svg
+++ b/src/assets/icons/back-white.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8.00002C-3.54464e-07 7.7348 0.105356 7.48045 0.292892 7.29291L7.29289 0.292894C7.68342 -0.09763 8.31658 -0.0976319 8.70711 0.292892C9.09763 0.683416 9.09763 1.31658 8.70711 1.70711L3.41421 7.00002H17C17.5523 7.00002 18 7.44773 18 8.00002C18 8.5523 17.5523 9.00002 17 9.00002L3.41422 9.00002L8.70711 14.2929C9.09763 14.6834 9.09763 15.3166 8.70711 15.7071C8.31658 16.0976 7.68342 16.0976 7.29289 15.7071L0.292894 8.70712C0.105358 8.51959 3.54466e-07 8.26524 0 8.00002Z" fill="#FFF" />
+</svg>
--- a/src/assets/icons/back.svg
+++ b/src/assets/icons/back.svg
@@ -1,3 +1,3 @@
 <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 8.00002C-3.54464e-07 7.7348 0.105356 7.48045 0.292892 7.29291L7.29289 0.292894C7.68342 -0.09763 8.31658 -0.0976319 8.70711 0.292892C9.09763 0.683416 9.09763 1.31658 8.70711 1.70711L3.41421 7.00002H17C17.5523 7.00002 18 7.44773 18 8.00002C18 8.5523 17.5523 9.00002 17 9.00002L3.41422 9.00002L8.70711 14.2929C9.09763 14.6834 9.09763 15.3166 8.70711 15.7071C8.31658 16.0976 7.68342 16.0976 7.29289 15.7071L0.292894 8.70712C0.105358 8.51959 3.54466e-07 8.26524 0 8.00002Z" fill="#0D0D0D"/>
+<path d="M0 8.00002C-3.54464e-07 7.7348 0.105356 7.48045 0.292892 7.29291L7.29289 0.292894C7.68342 -0.09763 8.31658 -0.0976319 8.70711 0.292892C9.09763 0.683416 9.09763 1.31658 8.70711 1.70711L3.41421 7.00002H17C17.5523 7.00002 18 7.44773 18 8.00002C18 8.5523 17.5523 9.00002 17 9.00002L3.41422 9.00002L8.70711 14.2929C9.09763 14.6834 9.09763 15.3166 8.70711 15.7071C8.31658 16.0976 7.68342 16.0976 7.29289 15.7071L0.292894 8.70712C0.105358 8.51959 3.54466e-07 8.26524 0 8.00002Z" fill="#0D0D0D" />
 </svg>
--- a/src/assets/icons/c-delete.svg
+++ b/src/assets/icons/c-delete.svg
@@ -0,0 +1,5 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.77778 6.3C5.77778 5.9134 5.45443 5.6 5.05556 5.6C4.65668 5.6 4.33333 5.9134 4.33333 6.3V9.8C4.33333 10.1866 4.65668 10.5 5.05556 10.5C5.45443 10.5 5.77778 10.1866 5.77778 9.8V6.3Z" fill="#FFEAE2"/>
+<path d="M8.66667 6.3C8.66667 5.9134 8.34332 5.6 7.94444 5.6C7.54557 5.6 7.22222 5.9134 7.22222 6.3V9.8C7.22222 10.1866 7.54557 10.5 7.94444 10.5C8.34332 10.5 8.66667 10.1866 8.66667 9.8V6.3Z" fill="#FFEAE2"/>
+<path d="M6.97498 0C8.3006 0 9.45611 0.874433 9.77762 2.1209L9.95278 2.8H11.5453C11.5515 2.79992 11.5578 2.79992 11.564 2.8H12.2778C12.6767 2.8 13 3.1134 13 3.5C13 3.8866 12.6767 4.2 12.2778 4.2H12.2045L11.3977 11.4983C11.2405 12.9211 10.0017 14 8.5253 14H4.4747C2.99834 14 1.75954 12.9211 1.60225 11.4983L0.79547 4.2H0.722222C0.32335 4.2 0 3.8866 0 3.5C0 3.1134 0.32335 2.8 0.722222 2.8H1.43598C1.44223 2.79992 1.44846 2.79992 1.45467 2.8H3.04722L3.22238 2.1209C3.54389 0.874431 4.6994 0 6.02502 0H6.97498ZM9.40399 4.2C9.39353 4.20022 9.3831 4.20022 9.37269 4.2H3.6273C3.6169 4.20022 3.60647 4.20022 3.59601 4.2H2.24818L3.03848 11.3491C3.11712 12.0605 3.73652 12.6 4.4747 12.6H8.5253C9.26348 12.6 9.88288 12.0605 9.96152 11.3491L10.7518 4.2H9.40399ZM4.62369 2.46045L4.53611 2.8H8.46387L8.37629 2.46045C8.21554 1.83722 7.63778 1.4 6.97497 1.4H6.025C5.3622 1.4 4.78444 1.83722 4.62369 2.46045Z" fill="#FFEAE2"/>
+</svg>
--- a/src/assets/icons/c-move.svg
+++ b/src/assets/icons/c-move.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="19" viewBox="0 0 15 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.6709 0.0615234C8.10609 0.0283563 8.55366 0.134081 8.89941 0.387695C9.23305 0.632466 9.46557 1.01335 9.50391 1.53125C10.351 1.35132 11.267 1.44554 11.7588 2.27734C11.8015 2.3493 11.8659 2.4826 11.9189 2.61523C11.9456 2.68187 11.9695 2.74999 11.9873 2.81055C12.0046 2.86956 12.0175 2.92657 12.0176 2.9707V3.5957C12.5446 3.4294 13.14 3.49012 13.624 3.73828C14.1314 3.99842 14.5203 4.46431 14.5742 5.08496C14.6215 5.63262 14.6169 6.23619 14.6025 6.84082C14.5882 7.44669 14.5638 8.05348 14.5703 8.6123C14.5869 9.99368 14.7346 11.4314 14.6328 12.7979C14.5306 14.1688 14.1779 15.482 13.1865 16.626C12.0543 17.9324 10.3202 18.602 8.55762 18.6631C6.7949 18.724 4.99508 18.1761 3.72949 17.04C1.92211 15.417 1.55066 13.6053 0.762695 11.4863C0.683586 11.2735 0.580869 11.0633 0.477539 10.8525C0.374729 10.6428 0.271227 10.4322 0.195312 10.2217C-0.173241 9.19784 0.228813 8.3138 0.931641 7.84082C1.60836 7.3855 2.5633 7.31169 3.37402 7.85449V3.34961H3.375C3.51944 2.06624 4.91534 1.38488 6.06836 1.80664C6.0365 1.28206 6.21192 0.868618 6.50293 0.575195C6.80823 0.26738 7.23566 0.0947109 7.6709 0.0615234ZM7.72461 1.09375C7.46487 1.08615 7.19561 1.25846 7.1543 1.625L7.15137 8.6123L7.13965 8.73438C7.09082 9.00322 6.89341 9.17338 6.67676 9.20898C6.55333 9.22924 6.42377 9.20583 6.31445 9.13184C6.20476 9.05759 6.11923 8.93515 6.0791 8.76465L6.07617 8.75195H6.07812L6.05176 3.38672C5.98373 3.13985 5.70675 2.9778 5.40723 2.95508C5.10822 2.93245 4.82595 3.05106 4.74219 3.32129V9.65234L5.86621 11.4463L5.87012 11.4531L5.87207 11.46C5.97956 11.8175 5.83236 12.1087 5.58691 12.2363C5.34248 12.3633 5.0111 12.3228 4.7627 12.0459C4.43376 11.6788 4.12868 11.1543 3.83105 10.624C3.53193 10.0911 3.24004 9.55123 2.93457 9.14258C2.75922 8.90799 2.52347 8.74466 2.2793 8.69531C2.03753 8.64653 1.78269 8.70852 1.55957 8.93164L1.55859 8.93262C1.51343 8.9778 1.45826 9.06092 1.41211 9.15332C1.36587 9.24592 1.33277 9.33916 1.3252 9.40137C1.32117 9.43477 1.32473 9.48179 1.33691 9.54199C1.34896 9.60148 1.36879 9.67074 1.39453 9.74707C1.44598 9.89961 1.51989 10.0773 1.60059 10.2588C1.76058 10.6185 1.94881 10.9985 2.02344 11.207C2.59378 12.8 2.9251 14.2378 4.05176 15.5625C5.42953 17.1827 7.62816 17.7419 9.54785 17.3232C11.4658 16.9049 13.0978 15.5124 13.3545 13.2334L13.3301 5.12207C13.2531 4.84033 12.9517 4.69225 12.6455 4.72461C12.3426 4.75666 12.0525 4.96612 12.0156 5.38379C11.9584 6.03179 11.9831 6.71982 12.0088 7.41406C12.0344 8.10699 12.0609 8.8062 12.0059 9.4707V9.47559H12.0049C11.9452 9.83123 11.6474 10.0102 11.3555 10.0137C11.0633 10.0171 10.763 9.84488 10.7012 9.48828L10.6992 9.47852H10.7002L10.6963 3.17578L10.665 3.01562C10.5699 2.66693 10.3323 2.48832 10.1123 2.47852C9.98617 2.47302 9.85974 2.52211 9.75879 2.63184C9.65734 2.74218 9.5789 2.91723 9.55762 3.16602L9.55664 8.99316V9.00098L9.55469 9.00977C9.44373 9.36044 9.13052 9.5024 8.84082 9.4668C8.55173 9.43119 8.27883 9.21782 8.24414 8.85645L8.24316 8.85059L8.24512 1.66797L8.23145 1.5332C8.2069 1.40874 8.15154 1.31244 8.08008 1.24219C7.98412 1.14786 7.85599 1.09762 7.72461 1.09375Z" fill="black" stroke="black" stroke-width="0.111111"/>
+</svg>
--- a/src/assets/icons/c-redo.svg
+++ b/src/assets/icons/c-redo.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.16 2.12276C13.7984 2.48436 13.7984 3.07062 14.16 3.43222L16.283 5.55527H9.25915C5.67953 5.55527 2.77767 8.45712 2.77767 12.0367C2.77767 15.6164 5.67953 18.5182 9.25915 18.5182H12.9629C13.4742 18.5182 13.8888 18.1037 13.8888 17.5923C13.8888 17.0809 13.4742 16.6664 12.9629 16.6664H9.25915C6.70228 16.6664 4.62952 14.5936 4.62952 12.0367C4.62952 9.47987 6.70228 7.40712 9.25915 7.40712H16.283L14.16 9.53017C13.7984 9.89176 13.7984 10.478 14.16 10.8396C14.5216 11.2012 15.1078 11.2012 15.4694 10.8396L19.1731 7.13592C19.5347 6.77432 19.5347 6.18806 19.1731 5.82646L15.4694 2.12276C15.1078 1.76116 14.5216 1.76116 14.16 2.12276Z" fill="#0D0D0D"/>
+</svg>
--- a/src/assets/icons/c-select.svg
+++ b/src/assets/icons/c-select.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.20508 0.851562C0.985291 0.774157 0.7742 0.985289 0.851562 1.20508L5.83887 15.3369C5.92158 15.5713 6.24738 15.5874 6.35254 15.3623L8.91992 9.85938C9.11305 9.44566 9.44564 9.11303 9.85938 8.91992L15.3623 6.35254C15.5873 6.24733 15.5712 5.92157 15.3369 5.83887L1.20508 0.851562Z" stroke="#0D0D0D" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/assets/icons/c-text.svg
+++ b/src/assets/icons/c-text.svg
@@ -0,0 +1,6 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.66623 17.7762C7.27988 17.7762 7.77735 17.2787 7.77735 16.6651C7.77735 16.0514 7.27988 15.5539 6.66623 15.5539C6.05259 15.5539 5.55512 16.0514 5.55512 16.6651C5.55512 17.2787 6.05259 17.7762 6.66623 17.7762Z" fill="#FF7A51"/>
+<path d="M16.144 11.404C16.3218 10.9206 17.0051 10.9206 17.1885 11.404L17.7773 12.9984C17.8329 13.1484 17.9551 13.2706 18.1051 13.3262L19.6996 13.9151C20.1829 14.0928 20.1829 14.7762 19.6996 14.9595L18.1051 15.5484C17.9551 15.604 17.8329 15.7262 17.7773 15.8762L17.1885 17.4706C17.0107 17.9539 16.3273 17.9539 16.144 17.4706L15.5551 15.8762C15.4996 15.7262 15.3773 15.604 15.2273 15.5484L13.6329 14.9595C13.1496 14.7817 13.1496 14.0984 13.6329 13.9151L15.2273 13.3262C15.3773 13.2706 15.4996 13.1484 15.5551 12.9984L16.144 11.404Z" fill="#FF7A51"/>
+<path d="M4.47734 8.62617C4.65512 8.14284 5.33846 8.14284 5.52179 8.62617L5.81068 9.40951C5.86623 9.55951 5.98846 9.68173 6.13846 9.73728L6.92179 10.0262C7.40512 10.2039 7.40512 10.8873 6.92179 11.0706L6.13846 11.3595C5.98846 11.4151 5.86623 11.5373 5.81068 11.6873L5.52179 12.4706C5.34401 12.954 4.66068 12.954 4.47734 12.4706L4.18845 11.6873C4.1329 11.5373 4.01068 11.4151 3.86068 11.3595L3.07734 11.0706C2.59401 10.8928 2.59401 10.2095 3.07734 10.0262L3.86068 9.73728C4.01068 9.68173 4.1329 9.55951 4.18845 9.40951L4.47734 8.62617Z" fill="#FF7A51"/>
+<path d="M17.222 4.44434H4.99978C4.38867 4.44434 3.88867 4.94434 3.88867 5.55545C3.88867 6.16656 4.38867 6.66656 4.99978 6.66656H9.99978V17.7777C9.99978 18.3888 10.4998 18.8888 11.1109 18.8888C11.722 18.8888 12.222 18.3888 12.222 17.7777V6.66656H17.222C17.8331 6.66656 18.3331 6.16656 18.3331 5.55545C18.3331 4.94434 17.8331 4.44434 17.222 4.44434Z" fill="black"/>
+</svg>
--- a/src/assets/icons/c-undo.svg
+++ b/src/assets/icons/c-undo.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.06219 2.12276C8.42379 2.48436 8.42379 3.07062 8.06219 3.43222L5.93914 5.55527H12.963C16.5426 5.55527 19.4445 8.45712 19.4445 12.0367C19.4445 15.6164 16.5426 18.5182 12.963 18.5182H9.25931C8.74794 18.5182 8.33339 18.1037 8.33339 17.5923C8.33339 17.0809 8.74794 16.6664 9.25931 16.6664H12.963C15.5199 16.6664 17.5926 14.5936 17.5926 12.0367C17.5926 9.47987 15.5199 7.40712 12.963 7.40712H5.93914L8.06219 9.53017C8.42379 9.89176 8.42379 10.478 8.06219 10.8396C7.70059 11.2012 7.11433 11.2012 6.75273 10.8396L3.04903 7.13592C2.68743 6.77432 2.68743 6.18806 3.04903 5.82646L6.75273 2.12276C7.11433 1.76116 7.70059 1.76116 8.06219 2.12276Z" fill="#0D0D0D"/>
+</svg>
--- a/src/assets/icons/canvas-assistant-menu.svg
+++ b/src/assets/icons/canvas-assistant-menu.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 1C18 0.447715 17.5523 0 17 0H1C0.447716 0 0 0.447715 0 1C0 1.55228 0.447716 2 1 2H17C17.5523 2 18 1.55228 18 1ZM18 9C18 8.44772 17.5523 8 17 8H7C6.44771 8 6 8.44772 6 9C6 9.55229 6.44771 10 7 10H17C17.5523 10 18 9.55229 18 9Z" fill="currentColor"/>
+</svg>
--- a/src/assets/icons/canvas-mode-2.svg
+++ b/src/assets/icons/canvas-mode-2.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.00048 3.33301C9.00048 2.98775 8.73787 2.70359 8.40152 2.6696L8.33381 2.66634H7.66715C7.29896 2.66634 7.00048 2.96482 7.00048 3.33301V5.11296C7.00048 5.35112 6.8734 5.57134 6.66715 5.69043C6.46092 5.8095 6.20673 5.80944 6.00048 5.69043L4.45881 4.80046C4.14019 4.61654 3.73288 4.72564 3.54866 5.0446H3.54801L3.21532 5.62142C3.03109 5.94051 3.14031 6.34826 3.45881 6.53223L4.99983 7.42155C5.20601 7.5406 5.33309 7.76093 5.33316 7.99902C5.33316 8.23709 5.20596 8.45737 4.99983 8.5765L3.45881 9.46712C3.14031 9.65109 3.03109 10.0588 3.21532 10.3779L3.54801 10.9548H3.54866L3.58577 11.012C3.78349 11.2862 4.16011 11.3713 4.45881 11.1989L6.00048 10.3083C6.20669 10.1893 6.46093 10.1892 6.66715 10.3083C6.87339 10.4274 7.00048 10.6476 7.00048 10.8857V12.6663L7.00374 12.7347C7.03796 13.0708 7.32203 13.333 7.66715 13.333H8.33381C8.70196 13.3329 9.00048 13.0345 9.00048 12.6663V10.8857C9.00048 10.6475 9.1275 10.4273 9.33381 10.3083C9.54007 10.1892 9.79426 10.1892 10.0005 10.3083L11.5421 11.1989L11.6027 11.2301C11.9107 11.3685 12.2797 11.2538 12.4523 10.9548L12.7856 10.3779C12.9698 10.0589 12.8605 9.65117 12.5421 9.46712L11.0005 8.5765C10.7943 8.45738 10.6671 8.23713 10.6671 7.99902C10.6672 7.76086 10.7942 7.54058 11.0005 7.42155L12.5421 6.53223L12.5994 6.49512C12.873 6.29748 12.9583 5.92044 12.7856 5.62142L12.4523 5.0446C12.2682 4.72566 11.8608 4.61662 11.5421 4.80046L10.0005 5.69043C9.79426 5.80947 9.54004 5.80943 9.33381 5.69043C9.12755 5.57134 9.00048 5.35113 9.00048 5.11296V3.33301ZM10.3338 3.95801L10.8755 3.64551C11.8322 3.0934 13.0551 3.42161 13.6073 4.37793H13.6066L13.9399 4.95475H13.9406C14.4926 5.91099 14.1654 7.13469 13.2088 7.68717H13.2082L12.6671 7.99902L13.2088 8.31217L13.2967 8.36621C14.1849 8.94119 14.4753 10.1183 13.9406 11.0446H13.9399L13.6073 11.6214C13.0551 12.5777 11.8322 12.906 10.8755 12.3538L10.3338 12.0407V12.6663C10.3338 13.7364 9.49335 14.6101 8.43668 14.6637L8.33381 14.6663H7.66715C6.56258 14.6663 5.66715 13.7709 5.66715 12.6663V12.0407L5.12548 12.3538C4.19859 12.8888 3.02167 12.5976 2.44709 11.7093L2.39371 11.6214L2.06038 11.0446C1.50835 10.0884 1.83501 8.86475 2.7915 8.31217L3.33251 7.99902L2.79215 7.68717C1.83545 7.13468 1.50829 5.911 2.06038 4.95475L2.39371 4.37793L2.44709 4.29004C3.02167 3.40179 4.1986 3.1105 5.12548 3.64551L5.66715 3.95801V3.33301C5.66715 2.22844 6.56258 1.33301 7.66715 1.33301H8.33381L8.43668 1.33561C9.49335 1.38923 10.3338 2.26296 10.3338 3.33301V3.95801Z" fill="#0D0D0D"/>
+<path d="M14.6187 0.93143C14.7484 0.578846 15.2469 0.578846 15.3806 0.93143L15.5914 1.50286C15.6319 1.61228 15.7211 1.70144 15.8305 1.74197L16.4019 1.95271C16.7545 2.08239 16.7545 2.58087 16.4019 2.71461L15.8305 2.92535C15.7211 2.96588 15.6319 3.05504 15.5914 3.16446L15.3806 3.73589C15.2509 4.08847 14.7525 4.08847 14.6187 3.73589L14.408 3.16446C14.3675 3.05504 14.2783 2.96588 14.1689 2.92535L13.5974 2.71461C13.2449 2.58493 13.2449 2.08644 13.5974 1.95271L14.1689 1.74197C14.2783 1.70144 14.3675 1.61228 14.408 1.50286L14.6187 0.93143Z" fill="#FF7A51"/>
+</svg>
--- a/src/assets/icons/canvas-mode.svg
+++ b/src/assets/icons/canvas-mode.svg
@@ -0,0 +1,4 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2494 4.16797C11.2494 3.73639 10.9211 3.3812 10.5007 3.3387L10.416 3.33464H9.58271C9.12248 3.33464 8.74938 3.70773 8.74938 4.16797V6.3929C8.74938 6.69061 8.59052 6.96588 8.33271 7.11475C8.07493 7.26358 7.75719 7.26351 7.49938 7.11475L5.5723 6.00228C5.17401 5.77239 4.66488 5.90876 4.4346 6.30745H4.43379L4.01793 7.02848C3.78765 7.42735 3.92416 7.93703 4.3223 8.16699L6.24857 9.27865C6.50629 9.42746 6.66514 9.70287 6.66523 10.0005C6.66523 10.2981 6.50622 10.5734 6.24857 10.7223L4.3223 11.8356C3.92416 12.0656 3.78764 12.5752 4.01793 12.9741L4.43379 13.6951H4.4346L4.48099 13.7668C4.72814 14.1094 5.19891 14.2158 5.5723 14.0003L7.49938 12.887C7.75714 12.7383 8.07495 12.7383 8.33271 12.887C8.59052 13.0359 8.74938 13.3112 8.74938 13.6089V15.8346L8.75345 15.9201C8.79623 16.3402 9.15132 16.668 9.58271 16.668H10.416C10.8762 16.6679 11.2494 16.2948 11.2494 15.8346V13.6089C11.2494 13.3111 11.4082 13.0359 11.666 12.887C11.9239 12.7383 12.2416 12.7382 12.4994 12.887L14.4265 14.0003L14.5021 14.0394C14.8872 14.2123 15.3484 14.0689 15.5642 13.6951L15.9808 12.9741C16.211 12.5754 16.0744 12.0657 15.6765 11.8356L13.7494 10.7223C13.4916 10.5734 13.3327 10.2981 13.3327 10.0005C13.3328 9.70279 13.4915 9.42743 13.7494 9.27865L15.6765 8.16699L15.7481 8.12061C16.0901 7.87355 16.1966 7.40226 15.9808 7.02848L15.5642 6.30745C15.334 5.90878 14.8248 5.77249 14.4265 6.00228L12.4994 7.11475C12.2416 7.26355 11.9238 7.2635 11.666 7.11475C11.4082 6.96588 11.2494 6.69062 11.2494 6.3929V4.16797ZM12.916 4.94922L13.5931 4.55859C14.789 3.86845 16.3177 4.27872 17.0078 5.47412H17.007L17.4237 6.19515H17.4245C18.1145 7.39045 17.7055 8.92007 16.5098 9.61068H16.509L15.8327 10.0005L16.5098 10.3919L16.6197 10.4595C17.7299 11.1782 18.0929 12.6496 17.4245 13.8075H17.4237L17.0078 14.5285C16.3177 15.7239 14.789 16.1342 13.5931 15.444L12.916 15.0526V15.8346C12.916 17.1722 11.8655 18.2644 10.5446 18.3314L10.416 18.3346H9.58271C8.202 18.3346 7.08271 17.2153 7.08271 15.8346V15.0526L6.40563 15.444C5.24702 16.1128 3.77587 15.7487 3.05765 14.6383L2.99092 14.5285L2.57425 13.8075C1.88421 12.6123 2.29255 11.0826 3.48815 10.3919L4.16442 10.0005L3.48896 9.61068C2.2931 8.92005 1.88414 7.39045 2.57425 6.19515L2.99092 5.47412L3.05765 5.36426C3.77587 4.25395 5.24703 3.88984 6.40563 4.55859L7.08271 4.94922V4.16797C7.08271 2.78726 8.202 1.66797 9.58271 1.66797H10.416L10.5446 1.67122C11.8655 1.73824 12.916 2.83041 12.916 4.16797V4.94922Z" fill="white"/>
+<path d="M18.2722 1.16258C18.4343 0.721849 19.0574 0.721849 19.2246 1.16258L19.488 1.87686C19.5386 2.01364 19.6501 2.12509 19.7869 2.17575L20.5012 2.43917C20.9419 2.60128 20.9419 3.22438 20.5012 3.39156L19.7869 3.65498C19.6501 3.70564 19.5386 3.81709 19.488 3.95387L19.2246 4.66815C19.0625 5.10888 18.4394 5.10888 18.2722 4.66815L18.0088 3.95387C17.9581 3.81709 17.8466 3.70564 17.7099 3.65498L16.9956 3.39156C16.5549 3.22945 16.5549 2.60635 16.9956 2.43917L17.7099 2.17575C17.8466 2.12509 17.9581 2.01364 18.0088 1.87686L18.2722 1.16258Z" fill="white"/>
+</svg>
--- a/src/assets/icons/captureView.svg
+++ b/src/assets/icons/captureView.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.99997 1.15789C5.33447 1.15789 4.75255 1.50608 4.44041 2.02674C4.33317 2.20563 4.13523 2.31579 3.92105 2.31579H3.48C2.96605 2.31579 2.61668 2.31624 2.34662 2.33753C2.08357 2.35827 1.94905 2.39586 1.85521 2.44199C1.62942 2.553 1.44584 2.73014 1.33079 2.94801C1.28298 3.03856 1.24402 3.16836 1.22253 3.42218C1.20047 3.68276 1.2 4.01988 1.2 4.51579V7.64211C1.2 8.13802 1.20047 8.47514 1.22253 8.73571C1.24402 8.98953 1.28298 9.11934 1.33079 9.20988C1.44584 9.42776 1.62942 9.60489 1.85521 9.7159C1.94905 9.76204 2.08357 9.79963 2.34662 9.82036C2.61668 9.84165 2.96605 9.8421 3.48 9.8421H8.52C9.03395 9.8421 9.38332 9.84165 9.65338 9.82036C9.91643 9.79963 10.051 9.76204 10.1448 9.7159C10.3706 9.60489 10.5542 9.42776 10.6692 9.20988C10.717 9.11934 10.756 8.98953 10.7775 8.73571C10.7995 8.47514 10.8 8.13802 10.8 7.64211V4.51579C10.8 4.01988 10.7995 3.68276 10.7775 3.42218C10.756 3.16836 10.717 3.03856 10.6692 2.94801C10.5542 2.73014 10.3706 2.553 10.1448 2.44199C10.051 2.39586 9.91643 2.35827 9.65338 2.33753C9.38332 2.31624 9.03395 2.31579 8.52 2.31579H8.07889C7.86472 2.31579 7.66678 2.20563 7.55953 2.02674C7.2474 1.50608 6.66547 1.15789 5.99997 1.15789ZM3.59984 1.15789C4.1465 0.455643 5.01782 0 5.99997 0C6.98213 0 7.85344 0.455643 8.40011 1.15789L8.54478 1.15789C9.02776 1.15789 9.42638 1.15788 9.7511 1.18348C10.0884 1.21007 10.3984 1.26713 10.6896 1.4103C11.1412 1.63232 11.5083 1.98659 11.7384 2.42234C11.8868 2.70332 11.9459 3.00247 11.9735 3.32789C12 3.64121 12 4.02584 12 4.49187V7.66603C12 8.13206 12 8.51668 11.9735 8.83C11.9459 9.15543 11.8868 9.45457 11.7384 9.73556C11.5083 10.1713 11.1412 10.5256 10.6896 10.7476C10.3984 10.8908 10.0884 10.9478 9.7511 10.9744C9.42638 11 9.02777 11 8.5448 11H3.45521C2.97223 11 2.57362 11 2.2489 10.9744C1.91165 10.9478 1.60162 10.8908 1.31042 10.7476C0.858835 10.5256 0.491681 10.1713 0.261585 9.73556C0.11321 9.45457 0.0540718 9.15543 0.0265167 8.83C-1.36882e-05 8.51668 -7.39446e-06 8.13205 2.58775e-07 7.66602V4.49188C-7.39446e-06 4.02584 -1.36882e-05 3.64121 0.0265167 3.32789C0.0540718 3.00247 0.11321 2.70332 0.261585 2.42234C0.491681 1.98659 0.858834 1.63232 1.31042 1.4103C1.60162 1.26713 1.91165 1.21007 2.2489 1.18348C2.57362 1.15788 2.97224 1.15789 3.45522 1.15789L3.59984 1.15789ZM5.99997 4.63158C5.25439 4.63158 4.64997 5.21479 4.64997 5.93421C4.64997 6.65363 5.25439 7.23684 5.99997 7.23684C6.74556 7.23684 7.34997 6.65363 7.34997 5.93421C7.34997 5.21479 6.74556 4.63158 5.99997 4.63158ZM3.44997 5.93421C3.44997 4.5753 4.59165 3.47368 5.99997 3.47368C7.4083 3.47368 8.54997 4.5753 8.54997 5.93421C8.54997 7.29312 7.4083 8.39474 5.99997 8.39474C4.59165 8.39474 3.44997 7.29312 3.44997 5.93421Z" fill="white"/>
+</svg>
--- a/src/assets/icons/chat-compose.svg
+++ b/src/assets/icons/chat-compose.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 4.12435C6.89985 4.12435 3.66668 7.25105 3.66668 10.9993C3.66668 12.5538 4.21631 13.9904 5.15201 15.1476C5.32101 15.3566 5.38976 15.6293 5.34006 15.8935C5.25185 16.3623 5.13642 16.8205 5.00196 17.2694C5.57996 17.1805 6.14056 17.0583 6.69012 16.9023C6.91863 16.8374 7.1634 16.8637 7.37287 16.9757C8.44001 17.5465 9.67693 17.8743 11 17.8743C15.1002 17.8743 18.3333 14.7476 18.3333 10.9993C18.3333 7.25105 15.1002 4.12435 11 4.12435ZM1.83334 10.9993C1.83334 6.14121 5.98747 2.29102 11 2.29102C16.0126 2.29102 20.1667 6.14121 20.1667 10.9993C20.1667 15.8575 16.0126 19.7077 11 19.7077C9.50527 19.7077 8.09045 19.3673 6.83964 18.7612C5.83658 19.0209 4.80546 19.1809 3.72309 19.2476C3.41176 19.2668 3.11203 19.1264 2.92754 18.8749C2.74304 18.6233 2.69911 18.2953 2.81094 18.0041C3.07692 17.3114 3.30038 16.632 3.45627 15.9484C2.43553 14.5464 1.83334 12.8407 1.83334 10.9993ZM11 7.33268C11.5063 7.33268 11.9167 7.74309 11.9167 8.24935V10.0827H13.75C14.2563 10.0827 14.6667 10.4931 14.6667 10.9993C14.6667 11.5056 14.2563 11.916 13.75 11.916H11.9167V13.7493C11.9167 14.2556 11.5063 14.666 11 14.666C10.4937 14.666 10.0833 14.2556 10.0833 13.7493V11.916H8.25001C7.74375 11.916 7.33334 11.5056 7.33334 10.9993C7.33334 10.4931 7.74375 10.0827 8.25001 10.0827H10.0833V8.24935C10.0833 7.74309 10.4937 7.33268 11 7.33268Z" fill="#0D0D0D"/>
+</svg>
--- a/src/assets/icons/checked.svg
+++ b/src/assets/icons/checked.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6ZM8.4453 3.55932C8.1743 3.36861 7.80002 3.43371 7.60932 3.7047L5.19026 7.14232L4.19396 6.0464C3.97106 5.8012 3.59159 5.78313 3.3464 6.00604C3.1012 6.22894 3.08313 6.60841 3.30604 6.8536L4.80604 8.5036C4.92853 8.63835 5.1056 8.71017 5.28736 8.69884C5.46911 8.6875 5.63588 8.59423 5.74068 8.4453L8.59068 4.3953C8.78139 4.1243 8.71629 3.75002 8.4453 3.55932Z" fill="currentColor"/>
+</svg>
--- a/src/assets/icons/clipAdd.svg
+++ b/src/assets/icons/clipAdd.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 0C12.0125 0 12.8333 0.820811 12.8333 1.83333V9.16667H20.1667C21.1792 9.16667 22 9.98748 22 11C22 12.0125 21.1792 12.8333 20.1667 12.8333H12.8333V20.1667C12.8333 21.1792 12.0125 22 11 22C9.98748 22 9.16667 21.1792 9.16667 20.1667V12.8333H1.83333C0.820811 12.8333 0 12.0125 0 11C0 9.98748 0.820811 9.16667 1.83333 9.16667H9.16667V1.83333C9.16667 0.820811 9.98748 0 11 0Z" fill="#0D0D0D"/>
+</svg>
--- a/src/assets/icons/clipMinus.svg
+++ b/src/assets/icons/clipMinus.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="4" viewBox="0 0 22 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 2C0 0.89543 0.820811 0 1.83333 0H20.1667C21.1792 0 22 0.89543 22 2C22 3.10457 21.1792 4 20.1667 4H1.83333C0.820811 4 0 3.10457 0 2Z" fill="#0D0D0D"/>
+</svg>
--- a/src/assets/icons/close-border.svg
+++ b/src/assets/icons/close-border.svg
@@ -0,0 +1,4 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4882 10.4882C11.139 9.83728 12.1943 9.83728 12.8452 10.4882L16.6667 14.3096L20.4882 10.4882C21.139 9.83728 22.1943 9.83728 22.8452 10.4882C23.4961 11.139 23.4961 12.1943 22.8452 12.8452L19.0237 16.6667L22.8452 20.4882C23.4961 21.139 23.4961 22.1943 22.8452 22.8452C22.1943 23.4961 21.139 23.4961 20.4882 22.8452L16.6667 19.0237L12.8452 22.8452C12.1943 23.4961 11.139 23.4961 10.4882 22.8452C9.83728 22.1943 9.83728 21.139 10.4882 20.4882L14.3096 16.6667L10.4882 12.8452C9.83728 12.1943 9.83728 11.139 10.4882 10.4882Z" fill="#666666"/>
+<path d="M16.6667 3.33333C9.30287 3.33333 3.33333 9.30287 3.33333 16.6667C3.33333 24.0305 9.30287 30 16.6667 30C24.0305 30 30 24.0305 30 16.6667C30 9.30287 24.0305 3.33333 16.6667 3.33333ZM0 16.6667C0 7.46192 7.46192 0 16.6667 0C25.8714 0 33.3333 7.46192 33.3333 16.6667C33.3333 25.8714 25.8714 33.3333 16.6667 33.3333C7.46192 33.3333 0 25.8714 0 16.6667Z" fill="#666666"/>
+</svg>
--- a/src/assets/icons/close-white.svg
+++ b/src/assets/icons/close-white.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.292893 0.292894C0.683418 -0.097631 1.31658 -0.0976307 1.70711 0.292894L6.65685 5.24264L11.6066 0.292894C11.9971 -0.0976317 12.6303 -0.0976307 13.0208 0.292894C13.4113 0.683418 13.4113 1.31658 13.0208 1.70711L8.07107 6.65685L13.0208 11.6066C13.4113 11.9971 13.4113 12.6303 13.0208 13.0208C12.6303 13.4113 11.9971 13.4113 11.6066 13.0208L6.65685 8.07107L1.70711 13.0208C1.31658 13.4113 0.683418 13.4113 0.292893 13.0208C-0.0976311 12.6303 -0.0976311 11.9971 0.292893 11.6066L5.24264 6.65685L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292894Z" fill="#FFF"/>
+</svg>
--- a/src/assets/icons/closeAssistant.svg
+++ b/src/assets/icons/closeAssistant.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.263992 0.263993C0.615983 -0.0879974 1.18667 -0.0879971 1.53866 0.263993L6 4.72533L10.4613 0.263993C10.8133 -0.087998 11.384 -0.0879971 11.736 0.263993C12.088 0.615983 12.088 1.18667 11.736 1.53866L7.27467 6L11.736 10.4613C12.088 10.8133 12.088 11.384 11.736 11.736C11.384 12.088 10.8133 12.088 10.4613 11.736L6 7.27467L1.53866 11.736C1.18667 12.088 0.615983 12.088 0.263992 11.736C-0.0879975 11.384 -0.0879975 10.8133 0.263992 10.4613L4.72533 6L0.263992 1.53866C-0.0879975 1.18667 -0.0879975 0.615983 0.263992 0.263993Z" fill="#D58C4D"/>
+</svg>
--- a/src/assets/icons/closeTransparent.svg
+++ b/src/assets/icons/closeTransparent.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.29289 7.29289C7.68342 6.90237 8.31658 6.90237 8.70711 7.29289L12 10.5858L15.2929 7.29289C15.6834 6.90237 16.3166 6.90237 16.7071 7.29289C17.0976 7.68342 17.0976 8.31658 16.7071 8.70711L13.4142 12L16.7071 15.2929C17.0976 15.6834 17.0976 16.3166 16.7071 16.7071C16.3166 17.0976 15.6834 17.0976 15.2929 16.7071L12 13.4142L8.70711 16.7071C8.31658 17.0976 7.68342 17.0976 7.29289 16.7071C6.90237 16.3166 6.90237 15.6834 7.29289 15.2929L10.5858 12L7.29289 8.70711C6.90237 8.31658 6.90237 7.68342 7.29289 7.29289Z" fill="currentColor"/>
+</svg>
--- a/src/assets/icons/color-palette-2.svg
+++ b/src/assets/icons/color-palette-2.svg
@@ -0,0 +1,9 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.88857 7.85248C5.37951 7.85248 5.7775 8.25046 5.7775 8.7414C5.7775 9.23234 5.37951 9.63033 4.88857 9.63033C4.39763 9.63033 3.99965 9.23234 3.99965 8.7414C3.99965 8.25046 4.39763 7.85248 4.88857 7.85248Z" fill="#0D0D0D"/>
+<path d="M4.44411 5.03755C4.93505 5.03755 5.33304 5.43554 5.33304 5.92648C5.33304 6.41742 4.93505 6.8154 4.44411 6.8154C3.95317 6.8154 3.55519 6.41742 3.55519 5.92648C3.55519 5.43554 3.95317 5.03755 4.44411 5.03755Z" fill="#0D0D0D"/>
+<path d="M9.33319 4.29678C9.82413 4.29678 10.2221 4.69477 10.2221 5.18571C10.2221 5.67665 9.82413 6.07463 9.33319 6.07463C8.84226 6.07463 8.44427 5.67665 8.44427 5.18571C8.44427 4.69477 8.84226 4.29678 9.33319 4.29678Z" fill="#0D0D0D"/>
+<path d="M6.66642 3.2597C7.15736 3.2597 7.55535 3.65769 7.55535 4.14863C7.55535 4.63957 7.15736 5.03755 6.66642 5.03755C6.17548 5.03755 5.7775 4.63957 5.7775 4.14863C5.7775 3.65769 6.17548 3.2597 6.66642 3.2597Z" fill="#0D0D0D"/>
+<path d="M7.11088 1.18555C10.3838 1.18555 13.037 3.83878 13.037 7.11171C13.037 8.31473 12.0617 9.29004 10.8587 9.29004H8.51372C8.30508 9.29006 8.13581 9.4593 8.13581 9.66794C8.13584 9.75046 8.16285 9.83084 8.21278 9.89654L8.74752 10.5997C8.91924 10.8256 9.01253 11.1018 9.01258 11.3856C9.01258 12.298 8.27271 13.0379 7.36032 13.0379H7.11088C3.83796 13.0379 1.18472 10.3846 1.18472 7.11171C1.18472 3.83878 3.83796 1.18555 7.11088 1.18555ZM7.11088 2.37078C4.49254 2.37078 2.36996 4.49337 2.36996 7.11171C2.36996 9.73005 4.49254 11.8526 7.11088 11.8526H7.36032C7.61812 11.8526 7.82735 11.6434 7.82735 11.3856C7.8273 11.361 7.81905 11.337 7.8042 11.3173L7.26946 10.6136C7.06279 10.3417 6.95061 10.0095 6.95058 9.66794C6.95058 8.80471 7.65049 8.10483 8.51372 8.1048H10.8587C11.4072 8.1048 11.8518 7.66014 11.8518 7.11171C11.8518 4.49337 9.72923 2.37078 7.11088 2.37078Z" fill="#0D0D0D"/>
+<path d="M13.1974 9.45949C13.3042 9.15673 13.7159 9.15673 13.8227 9.45949L14.2989 10.793C14.3323 10.8877 14.4057 10.9617 14.497 10.9987L15.781 11.4933C16.0725 11.6042 16.0725 12.0317 15.781 12.1427L14.497 12.6372C14.4057 12.6719 14.3345 12.7482 14.2989 12.8429L13.8227 14.1764C13.7159 14.4792 13.3042 14.4792 13.1974 14.1764L12.7212 12.8429C12.6878 12.7482 12.6144 12.6742 12.5231 12.6372L11.2391 12.1427C10.9476 12.0317 10.9476 11.6042 11.2391 11.4933L12.5231 10.9987C12.6144 10.964 12.6856 10.8877 12.7212 10.793L13.1974 9.45949Z" fill="black"/>
+<path d="M10.6325 13.3246C10.7037 13.1236 10.9774 13.1236 11.0508 13.3246L11.2867 13.9879C11.309 14.0503 11.3579 14.1012 11.418 14.1243L12.0567 14.3692C12.2503 14.4432 12.2503 14.7275 12.0567 14.8037L11.418 15.0487C11.3579 15.0718 11.309 15.1227 11.2867 15.1851L11.0508 15.8483C10.9796 16.0494 10.7059 16.0494 10.6325 15.8483L10.3966 15.1851C10.3743 15.1227 10.3254 15.0718 10.2653 15.0487L9.62665 14.8037C9.43305 14.7298 9.43305 14.4455 9.62665 14.3692L10.2653 14.1243C10.3254 14.1012 10.3743 14.0503 10.3966 13.9879L10.6325 13.3246Z" fill="#FF7A51"/>
+</svg>
--- a/src/assets/icons/color-palette.svg
+++ b/src/assets/icons/color-palette.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.11214 9.81679C6.72587 9.81679 7.22339 10.3143 7.22339 10.928C7.22339 11.5418 6.72587 12.0393 6.11214 12.0393C5.49841 12.0393 5.00089 11.5418 5.00089 10.928C5.00089 10.3143 5.49841 9.81679 6.11214 9.81679Z" fill="white"/>
+<path d="M5.55652 6.29784C6.17024 6.29784 6.66776 6.79536 6.66776 7.40909C6.66776 8.02281 6.17024 8.52034 5.55652 8.52034C4.94279 8.52034 4.44527 8.02281 4.44527 7.40909C4.44527 6.79536 4.94279 6.29784 5.55652 6.29784Z" fill="white"/>
+<path d="M11.6684 5.37179C12.2821 5.37179 12.7796 5.86932 12.7796 6.48304C12.7796 7.09677 12.2821 7.59429 11.6684 7.59429C11.0547 7.59429 10.5571 7.09677 10.5571 6.48304C10.5571 5.86932 11.0547 5.37179 11.6684 5.37179Z" fill="white"/>
+<path d="M8.33464 4.07534C8.94836 4.07534 9.44589 4.57286 9.44589 5.18659C9.44589 5.80031 8.94836 6.29784 8.33464 6.29784C7.72091 6.29784 7.22339 5.80031 7.22339 5.18659C7.22339 4.57286 7.72091 4.07534 8.33464 4.07534Z" fill="white"/>
+<path d="M8.89026 1.48242C12.9818 1.48242 16.2986 4.79924 16.2986 8.89075C16.2986 10.3947 15.0794 11.6139 13.5755 11.6139H10.644C10.3831 11.6139 10.1715 11.8255 10.1715 12.0863C10.1716 12.1895 10.2053 12.29 10.2677 12.3721L10.9362 13.2511C11.1509 13.5336 11.2675 13.8788 11.2676 14.2336C11.2676 15.3742 10.3427 16.2991 9.20208 16.2991H8.89026C4.79876 16.2991 1.48193 12.9823 1.48193 8.89075C1.48193 4.79924 4.79876 1.48242 8.89026 1.48242ZM8.89026 2.96409C5.61706 2.96409 2.9636 5.61755 2.9636 8.89075C2.9636 12.164 5.61706 14.8174 8.89026 14.8174H9.20208C9.52437 14.8174 9.78592 14.5559 9.78592 14.2336C9.78586 14.2028 9.77555 14.1728 9.75698 14.1482L9.08849 13.2685C8.83014 12.9285 8.6899 12.5133 8.68986 12.0863C8.68986 11.0072 9.56483 10.1323 10.644 10.1322H13.5755C14.2611 10.1322 14.8169 9.57636 14.8169 8.89075C14.8169 5.61755 12.1635 2.96409 8.89026 2.96409Z" fill="white"/>
+<path d="M16.4972 11.8258C16.6308 11.4474 17.1454 11.4474 17.2789 11.8258L17.8743 13.4929C17.916 13.6113 18.0078 13.7038 18.1218 13.75L19.727 14.3683C20.0914 14.5069 20.0914 15.0414 19.727 15.1801L18.1218 15.7984C18.0078 15.8417 17.9188 15.9371 17.8743 16.0555L17.2789 17.7225C17.1454 18.101 16.6308 18.101 16.4972 17.7225L15.9019 16.0555C15.8602 15.9371 15.7684 15.8446 15.6543 15.7984L14.0492 15.1801C13.6848 15.0414 13.6848 14.5069 14.0492 14.3683L15.6543 13.75C15.7684 13.7067 15.8574 13.6113 15.9019 13.4929L16.4972 11.8258Z" fill="white"/>
+<path d="M13.291 16.6582C13.38 16.4069 13.7222 16.4069 13.814 16.6582L14.1088 17.4874C14.1367 17.5654 14.1979 17.629 14.273 17.6579L15.0714 17.9641C15.3134 18.0566 15.3134 18.4119 15.0714 18.5073L14.273 18.8135C14.1979 18.8424 14.1367 18.906 14.1088 18.984L13.814 19.8132C13.7249 20.0645 13.3828 20.0645 13.291 19.8132L12.9961 18.984C12.9683 18.906 12.9071 18.8424 12.832 18.8135L12.0336 18.5073C11.7915 18.4148 11.7915 18.0595 12.0336 17.9641L12.832 17.6579C12.9071 17.629 12.9683 17.5654 12.9961 17.4874L13.291 16.6582Z" fill="white"/>
+</svg>
--- a/src/assets/icons/copy.svg
+++ b/src/assets/icons/copy.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.50645 1.33331H10.8282C11.3648 1.3333 11.8077 1.3333 12.1685 1.36278C12.5433 1.39339 12.8877 1.4591 13.2113 1.62396C13.7131 1.87963 14.121 2.28757 14.3767 2.78934C14.5415 3.1129 14.6072 3.45736 14.6379 3.8321C14.6673 4.19289 14.6673 4.63579 14.6673 5.17243V7.4942C14.6673 8.03084 14.6673 8.47374 14.6379 8.83453C14.6072 9.20926 14.5415 9.55373 14.3767 9.87729C14.121 10.3791 13.7131 10.787 13.2113 11.0427C12.8877 11.2075 12.5433 11.2732 12.1685 11.3039C11.9277 11.3235 11.6503 11.3301 11.3329 11.3322C11.3307 11.6497 11.3242 11.9271 11.3045 12.1679C11.2739 12.5426 11.2082 12.8871 11.0433 13.2106C10.7877 13.7124 10.3797 14.1203 9.87796 14.376C9.5544 14.5409 9.20993 14.6066 8.8352 14.6372C8.47441 14.6667 8.03151 14.6667 7.49487 14.6666H5.1731C4.63646 14.6667 4.19356 14.6667 3.83277 14.6372C3.45804 14.6066 3.11357 14.5409 2.79001 14.376C2.28824 14.1203 1.8803 13.7124 1.62463 13.2106C1.45977 12.8871 1.39406 12.5426 1.36345 12.1679C1.33397 11.8071 1.33398 11.3642 1.33398 10.8275V8.50578C1.33398 7.96913 1.33397 7.52623 1.36345 7.16543C1.39406 6.7907 1.45977 6.44623 1.62463 6.12267C1.8803 5.62091 2.28824 5.21296 2.79001 4.9573C3.11357 4.79244 3.45804 4.72673 3.83277 4.69611C4.07358 4.67643 4.35097 4.66989 4.66839 4.66772C4.67057 4.3503 4.67711 4.07291 4.69678 3.8321C4.7274 3.45736 4.79311 3.1129 4.95797 2.78934C5.21363 2.28757 5.62158 1.87963 6.12334 1.62396C6.4469 1.4591 6.79137 1.39339 7.1661 1.36278C7.5269 1.3333 7.96981 1.3333 8.50645 1.33331ZM6.00183 4.66665L7.49485 4.66665C8.0315 4.66664 8.4744 4.66663 8.8352 4.69611C9.20993 4.72673 9.5544 4.79244 9.87796 4.9573C10.3797 5.21296 10.7877 5.62091 11.0433 6.12267C11.2082 6.44623 11.2739 6.7907 11.3045 7.16543C11.334 7.52623 11.334 7.96914 11.334 8.5058V9.99881C11.631 9.99672 11.8642 9.99094 12.06 9.97495C12.3522 9.95107 12.5017 9.90778 12.606 9.85466C12.8569 9.72682 13.0608 9.52285 13.1887 9.27197C13.2418 9.1677 13.2851 9.01823 13.3089 8.72596C13.3335 8.4259 13.334 8.0377 13.334 7.46665V5.19998C13.334 4.62893 13.3335 4.24073 13.3089 3.94067C13.2851 3.6484 13.2418 3.49893 13.1887 3.39466C13.0608 3.14378 12.8569 2.9398 12.606 2.81197C12.5017 2.75885 12.3522 2.71556 12.06 2.69168C11.7599 2.66717 11.3717 2.66665 10.8007 2.66665H8.53398C7.96293 2.66665 7.57474 2.66717 7.27468 2.69168C6.9824 2.71556 6.83293 2.75884 6.72866 2.81197C6.47778 2.9398 6.27381 3.14378 6.14598 3.39466C6.09285 3.49893 6.04957 3.6484 6.02569 3.94067C6.00969 4.1364 6.00391 4.36963 6.00183 4.66665ZM3.94134 6.02501C3.64907 6.04889 3.4996 6.09218 3.39533 6.1453C3.14445 6.27314 2.94047 6.47711 2.81264 6.72799C2.75952 6.83226 2.71623 6.98173 2.69235 7.274C2.66784 7.57406 2.66732 7.96226 2.66732 8.53331V10.8C2.66732 11.371 2.66784 11.7592 2.69235 12.0593C2.71623 12.3516 2.75952 12.501 2.81264 12.6053C2.94047 12.8562 3.14445 13.0602 3.39533 13.188C3.4996 13.2411 3.64907 13.2844 3.94134 13.3083C4.2414 13.3328 4.6296 13.3333 5.20065 13.3333H7.46732C8.03837 13.3333 8.42657 13.3328 8.72663 13.3083C9.0189 13.2844 9.16837 13.2411 9.27264 13.188C9.52352 13.0602 9.7275 12.8562 9.85533 12.6053C9.90845 12.501 9.95174 12.3516 9.97562 12.0593C10.0001 11.7592 10.0007 11.371 10.0007 10.8V8.53331C10.0007 7.96226 10.0001 7.57406 9.97562 7.274C9.95174 6.98173 9.90845 6.83226 9.85533 6.72799C9.7275 6.47711 9.52352 6.27314 9.27264 6.1453C9.16837 6.09218 9.0189 6.04889 8.72663 6.02501C8.42657 6.0005 8.03837 5.99998 7.46732 5.99998H5.20065C4.6296 5.99998 4.2414 6.0005 3.94134 6.02501Z" fill="currentColor" fill-opacity="0.65"/>
+</svg>
--- a/src/assets/icons/dc/add_sb.svg
+++ b/src/assets/icons/dc/add_sb.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.42857 0V1.14286H12.5714V0H16V3.42857H14.8571V12.5714H16V16H12.5714V14.8571H3.42857V16H0V12.5714H1.14286V3.42857H0V0H3.42857ZM2.28571 13.7143H1.14286V14.8571H2.28571V13.7143ZM14.8571 13.7143H13.7143V14.8571H14.8571V13.7143ZM12.5714 2.28571H3.42857V3.42857H2.28571V12.5714H3.42857V13.7143H12.5714V12.5714H13.7143V3.42857H12.5714V2.28571ZM8 4.57143C8.15155 4.57143 8.2969 4.63163 8.40406 4.7388C8.51123 4.84596 8.57143 4.9913 8.57143 5.14286V7.42857H10.8571C11.0087 7.42857 11.154 7.48878 11.2612 7.59594C11.3684 7.7031 11.4286 7.84845 11.4286 8C11.4286 8.15155 11.3684 8.2969 11.2612 8.40406C11.154 8.51123 11.0087 8.57143 10.8571 8.57143H8.57143V10.8571C8.57143 11.0087 8.51123 11.154 8.40406 11.2612C8.2969 11.3684 8.15155 11.4286 8 11.4286C7.84845 11.4286 7.7031 11.3684 7.59594 11.2612C7.48878 11.154 7.42857 11.0087 7.42857 10.8571V8.57143H5.14286C4.9913 8.57143 4.84596 8.51123 4.7388 8.40406C4.63163 8.2969 4.57143 8.15155 4.57143 8C4.57143 7.84845 4.63163 7.7031 4.7388 7.59594C4.84596 7.48878 4.9913 7.42857 5.14286 7.42857H7.42857V5.14286C7.42857 4.9913 7.48878 4.84596 7.59594 4.7388C7.7031 4.63163 7.84845 4.57143 8 4.57143ZM14.8571 1.14286H13.7143V2.28571H14.8571V1.14286ZM2.28571 1.14286H1.14286V2.28571H2.28571V1.14286Z" fill="#0D0D0D"/>
+</svg>
--- a/src/assets/icons/dc/angle.svg
+++ b/src/assets/icons/dc/angle.svg
@@ -0,0 +1,9 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="8.0041" height="8.0041" fill="url(#pattern0_2958_107309)"/>
+<defs>
+<pattern id="pattern0_2958_107309" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2958_107309" transform="scale(0.0078125)"/>
+</pattern>
+<image id="image0_2958_107309" width="128" height="128" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAN2AAADdgF91YLMAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAThQTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAR/EwCQAAAGd0Uk5TAAECBAUGBwoLDA8QEhUXGRocIiUnLC03PEBCRkdJS0xOVFZXWV1hYmdobnF1enyAgYKDhoeLjY+QkpSVmp6go6anr7S1uLq7wcTGx8jKy8zN0NPV19zg5+rr7vDx8vP09vf6+/z9/seyqosAAAGbSURBVHja7dhVUwNBEATgJri7uwR3lwDBggZ3OZz5//8Aqd17DpLqKqr7KbszV9+83GYTQFEURVH+eRpiiZkqHh+Zs488dtD8RfvKTSnXN+sh+zZG9q2T7J/lcv2gluzXyZcvX758+fLly5cvX758+fLly5cvX758+fLl/y/fJsm+PdZwfbPTPK5vtkT2zaJk34Iqih/Ewo9HOZz3fz1cLHDOn+KLcFnP8IHGN7/epvjAVLjTRPGRfeC3khQfqLz3m20UH5gIX8UMio+iW7/fTvGBEV84iVB8FFz7UhfFB4Z8bYPjI//KFZ8KKT4wmNav5RTun0XPrr7K8YFN1/CQx/HRl7ajIMX7f8mr64lzfGDLNd3lcHz0+7YWjo9yfzEZ5fjAoWtcIfnwzYckPzwMA5KPVt9cxvFR8bfX8+///xB5cO29HB84cv3TJB9x98Da3/q2PZti9t0Dl7M/z0x/9ecAMePlZRzoNGqi2OcOkMQ9d4AA59wBjjHAHWAYWGb6iUwgq3l+Z+9H2d37XXbj3Wn9ha0oiqIoqeUdwmrKD1GdTTcAAAAASUVORK5CYII="/>
+</defs>
+</svg>
--- a/src/assets/icons/dc/arrow.svg
+++ b/src/assets/icons/dc/arrow.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.085 5.92551H0.54125C0.387639 5.92551 0.259028 5.87405 0.155417 5.77113C0.0518057 5.66835 0 5.54071 0 5.38821C0 5.23571 0.0518057 5.10662 0.155417 5.00092C0.259028 4.89509 0.387639 4.84217 0.54125 4.84217H9.085L5.18958 0.946756C5.0825 0.839673 5.02625 0.713491 5.02083 0.568214C5.01556 0.422936 5.07056 0.289255 5.18583 0.167172C5.30125 0.0531442 5.43028 -0.00254935 5.57292 8.95351e-05C5.71556 0.00272842 5.84319 0.0605064 5.95583 0.173423L10.6935 4.91717C10.7633 4.98703 10.8141 5.06044 10.846 5.13738C10.8781 5.21433 10.8942 5.29759 10.8942 5.38717C10.8942 5.47662 10.8781 5.55988 10.846 5.63696C10.8141 5.71391 10.766 5.78446 10.7019 5.84863L5.96 10.5905C5.84458 10.7059 5.71903 10.7615 5.58333 10.7572C5.44764 10.7529 5.32208 10.6937 5.20667 10.5797C5.09139 10.4576 5.03375 10.3254 5.03375 10.1832C5.03375 10.041 5.09139 9.91446 5.20667 9.80363L9.085 5.92551Z" fill="black"/>
+</svg>
--- a/src/assets/icons/dc/brush.svg
+++ b/src/assets/icons/dc/brush.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.24074 0C3.46143 0 3.65143 0.155768 3.69471 0.372169C3.82112 1.00422 4.0682 1.54443 4.44805 1.95349C4.82378 2.35813 5.35318 2.6605 6.09463 2.78408C6.31786 2.82128 6.48148 3.01443 6.48148 3.24074C6.48148 3.46705 6.31786 3.6602 6.09463 3.6974C5.35318 3.82098 4.82378 4.12336 4.44805 4.52799C4.0682 4.93706 3.82112 5.47726 3.69471 6.10931C3.65143 6.32571 3.46143 6.48148 3.24074 6.48148C3.02005 6.48148 2.83005 6.32571 2.78677 6.10931C2.66036 5.47726 2.41328 4.93706 2.03343 4.52799C1.6577 4.12336 1.1283 3.82098 0.386852 3.6974C0.163617 3.6602 0 3.46705 0 3.24074C0 3.01443 0.163617 2.82128 0.386852 2.78408C1.1283 2.6605 1.6577 2.35813 2.03343 1.95349C2.41328 1.54443 2.66036 1.00422 2.78677 0.372169C2.83005 0.155768 3.02005 0 3.24074 0Z" fill="#0D0D0D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3823 2.58591C13.0223 0.945877 15.6813 0.945875 17.3214 2.58591C18.9614 4.22594 18.9614 6.88496 17.3214 8.525L10.2733 15.5731C9.83003 16.0166 9.52299 16.3237 9.16518 16.5682C8.84863 16.7844 8.50644 16.9605 8.14648 17.0924C7.73958 17.2415 7.3112 17.3128 6.69266 17.4158L3.95291 17.8724L3.9263 17.8768C3.77758 17.9016 3.61119 17.9294 3.46669 17.9403C3.30911 17.9522 3.05843 17.9564 2.7935 17.8427C2.466 17.7023 2.20502 17.4413 2.06455 17.1138C1.95092 16.8489 1.95506 16.5982 1.96695 16.4406C1.97786 16.2961 2.00565 16.1297 2.03049 15.981L2.49154 13.2146C2.59448 12.5961 2.66578 12.1677 2.81487 11.7608C2.94676 11.4008 3.12286 11.0587 3.33911 10.7421C3.58355 10.3843 3.8907 10.0773 4.33417 9.63402L11.3823 2.58591ZM16.0119 3.89537C15.0951 2.97853 13.6086 2.97853 12.6917 3.89537L12.4205 4.16661L15.7407 7.48678L16.0119 7.21554C16.9288 6.2987 16.9288 4.81221 16.0119 3.89537ZM5.70125 10.8859L11.1111 5.47606L14.4312 8.79624L9.02142 14.206C8.49891 14.7285 8.31816 14.9041 8.12057 15.0391C7.93064 15.1688 7.72533 15.2745 7.50936 15.3536C7.28468 15.4359 7.03676 15.481 6.30788 15.6025L3.9042 16.0031L4.30481 13.5994C4.42629 12.8705 4.47135 12.6226 4.55367 12.3979C4.63281 12.182 4.73846 11.9766 4.86821 11.7867C5.00319 11.5891 5.17874 11.4084 5.70125 10.8859Z" fill="#0D0D0D"/>
+</svg>
--- a/src/assets/icons/dc/brush_sb.svg
+++ b/src/assets/icons/dc/brush_sb.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.157122 13.4725L0.526449 10.3737C0.550847 10.1699 0.642783 9.98015 0.787096 9.83413L9.86461 0.654119C10.1812 0.334063 10.6118 0.151974 11.062 0.149342C11.5123 0.146814 11.9457 0.324063 12.2659 0.640637L13.8892 2.24581C14.2094 2.56248 14.3915 2.99386 14.394 3.44416C14.3964 3.89432 14.2192 4.32698 13.9027 4.64714L4.8252 13.8272C4.68081 13.9731 4.49215 14.0672 4.28861 14.0938L1.19415 14.4979C1.05466 14.5161 0.912174 14.5022 0.778872 14.4573C0.645754 14.4124 0.525008 14.3374 0.425099 14.2386C0.325191 14.1398 0.248858 14.0199 0.202421 13.8873C0.167635 13.7878 0.14946 13.6829 0.149902 13.578L0.157122 13.4725ZM11.752 5.29496L13.1397 3.89164C13.2557 3.77408 13.3206 3.61539 13.3198 3.45019C13.3189 3.28482 13.2522 3.12618 13.1347 3.00982L11.5104 1.40368C11.3928 1.28748 11.2334 1.22262 11.068 1.22354C10.9028 1.22458 10.7449 1.29127 10.6286 1.40863L9.24097 2.81195L11.752 5.29496ZM1.84678 13.3302L4.09809 13.0363L10.9965 6.05996L8.4845 3.57598L1.58606 10.5523L1.31747 12.8068L1.24565 13.4088L1.84678 13.3302Z" fill="#0D0D0D" stroke="black" stroke-width="0.3"/>
+</svg>
--- a/src/assets/icons/dc/copy.svg
+++ b/src/assets/icons/dc/copy.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.725098" y="0.724609" width="13.0481" height="13.0481" rx="2.17468" stroke="black" stroke-width="1.44978"/>
+<path d="M16.6733 5.79687V12.3209C16.6733 14.723 14.726 16.6703 12.3239 16.6703H4.3501" stroke="black" stroke-width="1.44978" stroke-linecap="round"/>
+</svg>
--- a/src/assets/icons/dc/create.svg
+++ b/src/assets/icons/dc/create.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 0C5.41421 0 5.75 0.335786 5.75 0.75V4.25H9.25C9.66421 4.25 10 4.58579 10 5C10 5.41421 9.66421 5.75 9.25 5.75H5.75V9.25C5.75 9.66421 5.41421 10 5 10C4.58579 10 4.25 9.66421 4.25 9.25V5.75H0.75C0.335786 5.75 0 5.41421 0 5C0 4.58579 0.335786 4.25 0.75 4.25H4.25V0.75C4.25 0.335786 4.58579 0 5 0Z" fill="white"/>
+</svg>
--- a/src/assets/icons/dc/delete.svg
+++ b/src/assets/icons/dc/delete.svg
@@ -0,0 +1,5 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.33333 6C5.33333 5.63181 5.03486 5.33333 4.66667 5.33333C4.29848 5.33333 4 5.63181 4 6V9.33333C4 9.70152 4.29848 10 4.66667 10C5.03486 10 5.33333 9.70152 5.33333 9.33333V6Z" fill="#0D0D0D"/>
+<path d="M8 6C8 5.63181 7.70152 5.33333 7.33333 5.33333C6.96514 5.33333 6.66667 5.63181 6.66667 6V9.33333C6.66667 9.70152 6.96514 10 7.33333 10C7.70152 10 8 9.70152 8 9.33333V6Z" fill="#0D0D0D"/>
+<path d="M6.43845 0C7.66209 0 8.72872 0.832793 9.02549 2.0199L9.18718 2.66667H10.6572C10.663 2.66659 10.6687 2.66659 10.6745 2.66667H11.3333C11.7015 2.66667 12 2.96514 12 3.33333C12 3.70152 11.7015 4 11.3333 4H11.2657L10.521 10.9508C10.3758 12.3058 9.2323 13.3333 7.86951 13.3333H4.13049C2.7677 13.3333 1.62419 12.3058 1.479 10.9508L0.73428 4H0.666667C0.298477 4 0 3.70152 0 3.33333C0 2.96514 0.298477 2.66667 0.666667 2.66667H1.32552C1.33129 2.66659 1.33704 2.66659 1.34277 2.66667H2.81282L2.97451 2.0199C3.27128 0.832792 4.33791 0 5.56155 0H6.43845ZM8.68061 4C8.67095 4.00021 8.66132 4.00021 8.65172 4H3.34828C3.33868 4.00021 3.32905 4.00021 3.31939 4H2.07524L2.80475 10.8087C2.87734 11.4862 3.4491 12 4.13049 12H7.86951C8.5509 12 9.12266 11.4862 9.19525 10.8087L9.92476 4H8.68061ZM4.26802 2.34328L4.18717 2.66667H7.81281L7.73196 2.34329C7.58357 1.74973 7.05026 1.33333 6.43844 1.33333H5.56154C4.94972 1.33333 4.41641 1.74973 4.26802 2.34328Z" fill="#0D0D0D"/>
+</svg>
--- a/src/assets/icons/dc/details_edit.svg
+++ b/src/assets/icons/dc/details_edit.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5532 0.206891C14.2974 -0.178709 15.1777 -0.00490283 15.7415 0.558867C16.3052 1.12264 16.479 2.00294 16.0934 2.74717C15.3784 4.12729 14.5304 5.33622 13.5101 6.42308C14.5359 7.69873 15.3069 9.0202 15.6325 10.2637C16.012 11.713 15.7992 13.1741 14.5421 14.1798C13.5324 14.9876 12.3977 14.8786 11.4916 14.5043C10.6096 14.1399 9.82734 13.4883 9.29034 12.9696C8.95931 12.6499 8.95016 12.1223 9.2699 11.7913C9.58965 11.4602 10.1172 11.4511 10.4482 11.7708C10.9319 12.238 11.5345 12.7187 12.1279 12.9638C12.6971 13.199 13.1283 13.1765 13.5009 12.8784C14.0891 12.4078 14.2897 11.7153 14.0202 10.686C13.7828 9.77925 13.1921 8.70984 12.3034 7.58311C11.8195 8.00397 11.3027 8.40655 10.75 8.79447C10.7255 8.81169 10.7004 8.8274 10.6748 8.84162C10.6231 9.44768 10.4192 9.96629 10.0602 10.3796C9.65159 10.8502 9.11272 11.1024 8.59774 11.2428C7.77682 11.4665 6.7942 11.4522 6.07721 11.4417C5.93922 11.4397 5.81108 11.4378 5.69582 11.4378C5.23558 11.4378 4.86248 11.0648 4.86248 10.6045C4.86248 10.4893 4.86062 10.3611 4.85861 10.2231C4.84816 9.50613 4.83384 8.52351 5.05756 7.70259C5.19791 7.18761 5.45015 6.64874 5.9207 6.24009C6.33404 5.88112 6.85265 5.67723 7.45872 5.62557C7.47294 5.59995 7.48865 5.57482 7.50586 5.55029C7.83713 5.07838 8.17908 4.63259 8.53398 4.21111C6.12523 2.88904 3.80895 2.99714 2.6076 4.19849C1.80113 5.00496 1.48263 6.27808 1.76866 7.80359C2.05381 9.32435 2.93278 11.0055 4.37536 12.4481C5.22706 13.2998 6.14731 13.8945 6.90004 14.2746C7.27598 14.4643 7.60327 14.5971 7.85067 14.6804C8.03589 14.7428 8.14203 14.7658 8.18099 14.7742C8.20161 14.7787 8.20341 14.7791 8.18816 14.7791C8.6484 14.7791 9.02149 15.1522 9.02148 15.6124C9.02147 16.0727 8.64837 16.4458 8.18813 16.4458C7.93574 16.4458 7.61085 16.3583 7.31864 16.2599C6.9906 16.1494 6.59022 15.9852 6.14893 15.7624C5.26719 15.3172 4.19474 14.6245 3.19685 13.6266C1.54779 11.9775 0.485207 10.0023 0.130543 8.11074C-0.223229 6.22396 0.120209 4.32886 1.42909 3.01998C3.47358 0.975487 6.86496 1.27269 9.69961 2.95954C10.8321 1.86325 12.0974 0.961153 13.5532 0.206891ZM9.23584 6.00456C9.67471 6.25943 10.0409 6.62563 10.2958 7.06449C12.1825 5.64349 13.5551 4.02343 14.6136 1.98044C14.6465 1.91697 14.6424 1.81685 14.563 1.73738C14.4835 1.65791 14.3834 1.65384 14.3199 1.68672C12.2769 2.74523 10.6568 4.11787 9.23584 6.00456ZM6.52247 9.77786C7.11758 9.78101 7.6793 9.76562 8.1595 9.63475C8.48308 9.54657 8.68219 9.42461 8.80188 9.28679C8.91025 9.16201 9.02126 8.94714 9.02126 8.52513C9.02126 7.83695 8.46338 7.27908 7.7752 7.27908C7.35319 7.27908 7.13832 7.39008 7.01354 7.49845C6.87572 7.61814 6.75377 7.81726 6.66558 8.14083C6.53471 8.62103 6.51932 9.18276 6.52247 9.77786Z" fill="black"/>
+</svg>
--- a/src/assets/icons/dc/down_arrow.svg
+++ b/src/assets/icons/dc/down_arrow.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.195262 0.195262C0.455612 -0.0650874 0.877722 -0.0650874 1.13807 0.195262L5.33333 4.39052L9.5286 0.195263C9.78895 -0.065087 10.2111 -0.0650869 10.4714 0.195263C10.7318 0.455612 10.7318 0.877722 10.4714 1.13807L5.80474 5.80474C5.54439 6.06509 5.12228 6.06509 4.86193 5.80474L0.195262 1.13807C-0.0650874 0.877722 -0.0650874 0.455612 0.195262 0.195262Z" fill="#0D0D0D"/>
+</svg>
--- a/Show More
+++ b/Show More