diff --git a/backend/alembic/versions/062_system_variable.py b/backend/alembic/versions/062_system_variable.py
new file mode 100644
index 000000000..561404a9d
--- /dev/null
+++ b/backend/alembic/versions/062_system_variable.py
@@ -0,0 +1,82 @@
+"""062_system_variable
+
+Revision ID: ed947895d470
+Revises: 547df942eb90
+Create Date: 2026-01-26 10:16:59.877303
+
+"""
+import sqlalchemy as sa
+import sqlmodel.sql.sqltypes
+from alembic import op
+from sqlalchemy import String, BigInteger, DateTime
+from sqlalchemy.dialects import postgresql
+from sqlalchemy.dialects.postgresql import JSONB
+from sqlalchemy.sql import table, column
+
+# revision identifiers, used by Alembic.
+revision = 'ed947895d470'
+down_revision = '547df942eb90'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_table('system_variable',
+                    sa.Column('id', sa.BigInteger(), sa.Identity(always=True), nullable=False),
+                    sa.Column('name', sqlmodel.sql.sqltypes.AutoString(length=128), nullable=False),
+                    sa.Column('var_type', sqlmodel.sql.sqltypes.AutoString(length=128), nullable=False),
+                    sa.Column('type', sqlmodel.sql.sqltypes.AutoString(length=128), nullable=False),
+                    sa.Column('value', postgresql.JSONB(astext_type=sa.Text()), nullable=True),
+                    sa.Column('create_time', sa.DateTime(), nullable=True),
+                    sa.Column('create_by', sa.BigInteger(), nullable=True),
+                    sa.PrimaryKeyConstraint('id')
+                    )
+
+    variable_table = table(
+        "system_variable",
+        column("id", BigInteger),
+        column("name", String),
+        column("var_type", String),
+        column("type", String),
+        column("value", JSONB),
+        column("create_time", DateTime),
+        column("create_by", BigInteger),
+    )
+
+    op.bulk_insert(
+        variable_table,
+        [
+            {
+                "name": "i18n_variable.name",
+                "var_type": "text",
+                "type": "system",
+                "value": ["name"],
+                "create_time": None,
+                "create_by": None
+            },
+            {
+                "name": "i18n_variable.account",
+                "var_type": "text",
+                "type": "system",
+                "value": ["account"],
+                "create_time": None,
+                "create_by": None
+            },
+            {
+                "name": "i18n_variable.email",
+                "var_type": "text",
+                "type": "system",
+                "value": ["email"],
+                "create_time": None,
+                "create_by": None
+            }
+        ]
+    )
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_table('system_variable')
+    # ### end Alembic commands ###
diff --git a/backend/alembic/versions/063_user_bind_var.py b/backend/alembic/versions/063_user_bind_var.py
new file mode 100644
index 000000000..140198960
--- /dev/null
+++ b/backend/alembic/versions/063_user_bind_var.py
@@ -0,0 +1,29 @@
+"""063_user
+
+Revision ID: 8ff90df7871d
+Revises: ed947895d470
+Create Date: 2026-01-26 15:30:11.348083
+
+"""
+from alembic import op
+import sqlalchemy as sa
+import sqlmodel.sql.sqltypes
+from sqlalchemy.dialects import postgresql
+
+# revision identifiers, used by Alembic.
+revision = '8ff90df7871d'
+down_revision = 'ed947895d470'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('sys_user', sa.Column('system_variables', postgresql.JSONB(astext_type=sa.Text()), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column('sys_user', 'system_variables')
+    # ### end Alembic commands ###
diff --git a/backend/apps/api.py b/backend/apps/api.py
index 27d5f9890..ec5a4209f 100644
--- a/backend/apps/api.py
+++ b/backend/apps/api.py
@@ -5,7 +5,7 @@
 from apps.data_training.api import data_training
 from apps.datasource.api import datasource, table_relation, recommended_problem
 from apps.mcp import mcp
-from apps.system.api import login, user, aimodel, workspace, assistant, parameter, apikey
+from apps.system.api import login, user, aimodel, workspace, assistant, parameter, apikey, variable_api
 from apps.terminology.api import terminology
 from apps.settings.api import base
 #from audit.api import audit_api
@@ -30,4 +30,6 @@
 
 api_router.include_router(recommended_problem.router)
 
+api_router.include_router(variable_api.router)
+
 #api_router.include_router(audit_api.router)
diff --git a/backend/apps/datasource/crud/permission.py b/backend/apps/datasource/crud/permission.py
index 870718121..8c9cc29ec 100644
--- a/backend/apps/datasource/crud/permission.py
+++ b/backend/apps/datasource/crud/permission.py
@@ -40,7 +40,7 @@ def get_row_permission_filters(session: SessionDep, current_user: CurrentUser, d
                             break
                     if flag:
                         res.append(transRecord2DTO(session, permission))
-            where_str = transFilterTree(session, res, ds)
+            where_str = transFilterTree(session, current_user, res, ds)
             filters.append({"table": table.table_name, "filter": where_str})
     return filters
 
diff --git a/backend/apps/datasource/crud/row_permission.py b/backend/apps/datasource/crud/row_permission.py
index 16f97971c..52fdc44e6 100644
--- a/backend/apps/datasource/crud/row_permission.py
+++ b/backend/apps/datasource/crud/row_permission.py
@@ -4,10 +4,12 @@
 from typing import List, Dict
 from apps.datasource.models.datasource import CoreField, CoreDatasource
 from apps.db.constant import DB
-from common.core.deps import SessionDep
+from apps.system.models.system_variable_model import SystemVariable
+from common.core.deps import SessionDep, CurrentUser
 
 
-def transFilterTree(session: SessionDep, tree_list: List[any], ds: CoreDatasource) -> str | None:
+def transFilterTree(session: SessionDep, current_user: CurrentUser, tree_list: List[any],
+                    ds: CoreDatasource) -> str | None:
     if tree_list is None:
         return None
     res: List[str] = []
@@ -15,13 +17,13 @@ def transFilterTree(session: SessionDep, tree_list: List[any], ds: CoreDatasourc
         tree = dto.tree
         if tree is None:
             continue
-        tree_exp = transTreeToWhere(session, tree, ds)
+        tree_exp = transTreeToWhere(session, current_user, tree, ds)
         if tree_exp is not None:
             res.append(tree_exp)
     return " AND ".join(res)
 
 
-def transTreeToWhere(session: SessionDep, tree: any, ds: CoreDatasource) -> str | None:
+def transTreeToWhere(session: SessionDep, current_user: CurrentUser, tree: any, ds: CoreDatasource) -> str | None:
     if tree is None:
         return None
     logic = tree['logic']
@@ -32,16 +34,16 @@ def transTreeToWhere(session: SessionDep, tree: any, ds: CoreDatasource) -> str
         for item in items:
             exp: str = None
             if item['type'] == 'item':
-                exp = transTreeItem(session, item, ds)
+                exp = transTreeItem(session, current_user, item, ds)
             elif item['type'] == 'tree':
-                exp = transTreeToWhere(session, item['sub_tree'], ds)
+                exp = transTreeToWhere(session, current_user, item['sub_tree'], ds)
 
             if exp is not None:
                 list.append(exp)
     return '(' + f' {logic} '.join(list) + ')' if len(list) > 0 else None
 
 
-def transTreeItem(session: SessionDep, item: Dict, ds: CoreDatasource) -> str | None:
+def transTreeItem(session: SessionDep, current_user: CurrentUser, item: Dict, ds: CoreDatasource) -> str | None:
     res: str = None
     field = session.query(CoreField).filter(CoreField.id == int(item['field_id'])).first()
     if field is None:
@@ -49,6 +51,8 @@ def transTreeItem(session: SessionDep, item: Dict, ds: CoreDatasource) -> str |
 
     db = DB.get_db(ds.type)
     whereName = db.prefix + field.field_name + db.suffix
+    whereTerm = transFilterTerm(item['term'])
+
     if item['filter_type'] == 'enum':
         if len(item['enum_value']) > 0:
             if ds['type'] == 'sqlServer' and (
@@ -57,38 +61,113 @@ def transTreeItem(session: SessionDep, item: Dict, ds: CoreDatasource) -> str |
             else:
                 res = "(" + whereName + " IN ('" + "','".join(item['enum_value']) + "'))"
     else:
-        value = item['value']
-        whereTerm = transFilterTerm(item['term'])
-        whereValue = ''
+        # if system variable, do check and get value
+        # new field: value_type(variable or normal), variable_id
+        value_type = item.get('value_type')
+        if value_type and value_type == 'variable':
+            # get system variable
+            variable_id = item.get('variable_id')
+            if variable_id is not None:
+                sys_variable = session.query(SystemVariable).filter(SystemVariable.id == variable_id).first()
+                # do inner system variable
+                if sys_variable.type == 'system':
+                    res = whereName + whereTerm + getSysVariableValue(sys_variable, current_user)
+                else:
+                    # check user variable
+                    user_variables = current_user.system_variables
+                    if user_variables is None or len(user_variables) == 0 or not userHaveVariable(user_variables,
+                                                                                                  sys_variable):
+                        return None
+                    else:
+                        # get user variable
+                        u_variable = None
+                        for u in user_variables:
+                            if u.get('variableId') == sys_variable.id:
+                                u_variable = u
+                                break
+                        if u_variable is None:
+                            return None
 
-        if item['term'] == 'null':
-            whereValue = ''
-        elif item['term'] == 'not_null':
-            whereValue = ''
-        elif item['term'] == 'empty':
-            whereValue = "''"
-        elif item['term'] == 'not_empty':
-            whereValue = "''"
-        elif item['term'] == 'in' or item['term'] == 'not in':
-            if ds.type == 'sqlServer' and (
-                    field.field_type == 'nchar' or field.field_type == 'NCHAR' or field.field_type == 'nvarchar' or field.field_type == 'NVARCHAR'):
-                whereValue = "(N'" + "', N'".join(value.split(",")) + "')"
-            else:
-                whereValue = "('" + "', '".join(value.split(",")) + "')"
-        elif item['term'] == 'like' or item['term'] == 'not like':
-            if ds.type == 'sqlServer' and (
-                    field.field_type == 'nchar' or field.field_type == 'NCHAR' or field.field_type == 'nvarchar' or field.field_type == 'NVARCHAR'):
-                whereValue = f"N'%{value}%'"
+                        # check value
+                        values = u_variable.get('variableValues')
+                        if sys_variable.var_type == 'text':
+                            set_sys = set(sys_variable.value)
+                            values = [x for x in values if x in set_sys]
+                            if values is None or len(values) == 0:
+                                return None
+                        elif sys_variable.var_type == 'number':
+                            if (sys_variable.value[0] is not None and values[0] < sys_variable.value[0]) or (
+                                    sys_variable.value[1] is not None and values[0] > sys_variable.value[1]):
+                                return None
+                        elif sys_variable.var_type == 'datetime':
+                            if (sys_variable.value[0] is not None and values[0] < sys_variable.value[0]) or (
+                                    sys_variable.value[1] is not None and values[0] > sys_variable.value[1]):
+                                return None
+
+                        # build exp
+                        whereValue = ''
+                        if item['term'] == 'null':
+                            whereValue = ''
+                        elif item['term'] == 'not_null':
+                            whereValue = ''
+                        elif item['term'] == 'empty':
+                            whereValue = "''"
+                        elif item['term'] == 'not_empty':
+                            whereValue = "''"
+                        elif item['term'] == 'in' or item['term'] == 'not in':
+                            if ds.type == 'sqlServer' and (
+                                    field.field_type == 'nchar' or field.field_type == 'NCHAR' or field.field_type == 'nvarchar' or field.field_type == 'NVARCHAR'):
+                                whereValue = "(N'" + "', N'".join(values) + "')"
+                            else:
+                                whereValue = "('" + "', '".join(values) + "')"
+                        elif item['term'] == 'like' or item['term'] == 'not like':
+                            if ds.type == 'sqlServer' and (
+                                    field.field_type == 'nchar' or field.field_type == 'NCHAR' or field.field_type == 'nvarchar' or field.field_type == 'NVARCHAR'):
+                                whereValue = f"N'%{values[0]}%'"
+                            else:
+                                whereValue = f"'%{values[0]}%'"
+                        else:
+                            if ds.type == 'sqlServer' and (
+                                    field.field_type == 'nchar' or field.field_type == 'NCHAR' or field.field_type == 'nvarchar' or field.field_type == 'NVARCHAR'):
+                                whereValue = f"N'{values[0]}'"
+                            else:
+                                whereValue = f"'{values[0]}'"
+
+                        res = whereName + whereTerm + whereValue
             else:
-                whereValue = f"'%{value}%'"
+                return None
         else:
-            if ds.type == 'sqlServer' and (
-                    field.field_type == 'nchar' or field.field_type == 'NCHAR' or field.field_type == 'nvarchar' or field.field_type == 'NVARCHAR'):
-                whereValue = f"N'{value}'"
+            value = item['value']
+            whereValue = ''
+
+            if item['term'] == 'null':
+                whereValue = ''
+            elif item['term'] == 'not_null':
+                whereValue = ''
+            elif item['term'] == 'empty':
+                whereValue = "''"
+            elif item['term'] == 'not_empty':
+                whereValue = "''"
+            elif item['term'] == 'in' or item['term'] == 'not in':
+                if ds.type == 'sqlServer' and (
+                        field.field_type == 'nchar' or field.field_type == 'NCHAR' or field.field_type == 'nvarchar' or field.field_type == 'NVARCHAR'):
+                    whereValue = "(N'" + "', N'".join(value.split(",")) + "')"
+                else:
+                    whereValue = "('" + "', '".join(value.split(",")) + "')"
+            elif item['term'] == 'like' or item['term'] == 'not like':
+                if ds.type == 'sqlServer' and (
+                        field.field_type == 'nchar' or field.field_type == 'NCHAR' or field.field_type == 'nvarchar' or field.field_type == 'NVARCHAR'):
+                    whereValue = f"N'%{value}%'"
+                else:
+                    whereValue = f"'%{value}%'"
             else:
-                whereValue = f"'{value}'"
+                if ds.type == 'sqlServer' and (
+                        field.field_type == 'nchar' or field.field_type == 'NCHAR' or field.field_type == 'nvarchar' or field.field_type == 'NVARCHAR'):
+                    whereValue = f"N'{value}'"
+                else:
+                    whereValue = f"'{value}'"
 
-        res = whereName + whereTerm + whereValue
+            res = whereName + whereTerm + whereValue
     return res
 
 
@@ -124,3 +203,19 @@ def transFilterTerm(term: str) -> str:
     if term == "between":
         return " BETWEEN "
     return ""
+
+
+def userHaveVariable(user_variables: List, sys_variable: SystemVariable):
+    for u in user_variables:
+        if sys_variable.id == u.get('variableId'):
+            return True
+    return False
+
+
+def getSysVariableValue(sys_variable: SystemVariable, current_user: CurrentUser):
+    if sys_variable.value[0] == 'name':
+        return current_user.name
+    if sys_variable.value[0] == 'account':
+        return current_user.account
+    if sys_variable.value[0] == 'email':
+        return current_user.email
diff --git a/backend/apps/swagger/i18n.py b/backend/apps/swagger/i18n.py
index c0ed7a746..39a6aa71e 100644
--- a/backend/apps/swagger/i18n.py
+++ b/backend/apps/swagger/i18n.py
@@ -107,6 +107,10 @@ def load_translation(lang: str) -> Dict[str, str]:
     {
         "name": "Audit",
         "description": f"{PLACEHOLDER_PREFIX}audit_api"
+    },
+    {
+        "name": "System_variable",
+        "description": f"{PLACEHOLDER_PREFIX}variable_api"
     }
 ]
 
diff --git a/backend/apps/swagger/locales/en.json b/backend/apps/swagger/locales/en.json
index f4499c9a9..05ddb02ef 100644
--- a/backend/apps/swagger/locales/en.json
+++ b/backend/apps/swagger/locales/en.json
@@ -188,5 +188,11 @@
   "delete_resource_api": "Delete Resource",
   "create_canvas_api": "Create Dashboard",
   "update_canvas_api": "Update Dashboard",
-  "check_name_api": "Name Validation"
+  "check_name_api": "Name Validation",
+
+  "variable_api": "System Variable",
+  "variable_save": "Save",
+  "variable_delete": "Delete",
+  "variable_list": "List",
+  "variable_page": "Pager"
 }
\ No newline at end of file
diff --git a/backend/apps/swagger/locales/zh.json b/backend/apps/swagger/locales/zh.json
index 443dd4731..b6e7609df 100644
--- a/backend/apps/swagger/locales/zh.json
+++ b/backend/apps/swagger/locales/zh.json
@@ -188,5 +188,11 @@
   "delete_resource_api": "删除资源",
   "create_canvas_api": "新建仪表板",
   "update_canvas_api": "更新仪表板",
-  "check_name_api": "名称校验"
+  "check_name_api": "名称校验",
+
+  "variable_api": "系统变量",
+  "variable_save": "保存变量",
+  "variable_delete": "删除变量",
+  "variable_list": "获取变量",
+  "variable_page": "获取变量分页"
 }
diff --git a/backend/apps/system/api/variable_api.py b/backend/apps/system/api/variable_api.py
new file mode 100644
index 000000000..751462391
--- /dev/null
+++ b/backend/apps/system/api/variable_api.py
@@ -0,0 +1,34 @@
+# Author: Junjun
+# Date: 2026/1/26
+from typing import List
+from fastapi import APIRouter
+
+from apps.swagger.i18n import PLACEHOLDER_PREFIX
+from apps.system.crud.system_variable import save, delete, list_all, list_page
+from apps.system.models.system_variable_model import SystemVariable
+from common.core.config import settings
+from common.core.deps import SessionDep, CurrentUser, Trans
+
+router = APIRouter(tags=["System_variable"], prefix="/sys_variable")
+path = settings.EXCEL_PATH
+
+
+@router.post("/save", response_model=None, summary=f"{PLACEHOLDER_PREFIX}variable_save")
+async def save_variable(session: SessionDep, user: CurrentUser, trans: Trans, variable: SystemVariable):
+    return save(session, user, trans, variable)
+
+
+@router.post("/delete",response_model=None, summary=f"{PLACEHOLDER_PREFIX}variable_delete")
+async def delete_variable(session: SessionDep, ids: List[int]):
+    return delete(session, ids)
+
+
+@router.post("/listAll",response_model=None, summary=f"{PLACEHOLDER_PREFIX}variable_list")
+async def list_all_data(session: SessionDep, trans: Trans, variable: SystemVariable = None):
+    return list_all(session, trans, variable)
+
+
+@router.post("/listPage/{pageNum}/{pageSize}",response_model=None, summary=f"{PLACEHOLDER_PREFIX}variable_page")
+async def pager(session: SessionDep, trans: Trans, pageNum: int, pageSize: int,
+                        variable: SystemVariable = None):
+    return await list_page(session, trans, pageNum, pageSize, variable)
diff --git a/backend/apps/system/crud/system_variable.py b/backend/apps/system/crud/system_variable.py
new file mode 100644
index 000000000..50ebe490e
--- /dev/null
+++ b/backend/apps/system/crud/system_variable.py
@@ -0,0 +1,98 @@
+# Author: Junjun
+# Date: 2026/1/26
+import datetime
+
+from typing import List
+from fastapi import HTTPException
+from sqlalchemy import and_
+from sqlmodel import select
+
+from apps.system.models.system_variable_model import SystemVariable
+from common.core.deps import SessionDep, CurrentUser, Trans
+from common.core.pagination import Paginator
+from common.core.schemas import PaginationParams
+
+
+def save(session: SessionDep, user: CurrentUser, trans: Trans, variable: SystemVariable):
+    checkName(session, trans, variable)
+    variable.type = 'custom'
+    if variable.id is None:
+        variable.create_time = datetime.datetime.now()
+        variable.create_by = user.id
+        session.add(variable)
+        session.commit()
+    else:
+        record = session.query(SystemVariable).filter(SystemVariable.id == variable.id).first()
+        update_data = variable.model_dump(exclude_unset=True)
+        for field, value in update_data.items():
+            setattr(record, field, value)
+        session.add(record)
+        session.commit()
+    return True
+
+
+def delete(session: SessionDep, ids: List[int]):
+    session.query(SystemVariable).filter(SystemVariable.id.in_(ids)).delete()
+
+
+def list_all(session: SessionDep, trans: Trans, variable: SystemVariable):
+    if variable.name is None:
+        records = session.query(SystemVariable).order_by(SystemVariable.type.desc()).all()
+    else:
+        records = session.query(SystemVariable).filter(
+            and_(SystemVariable.name.like(f'%{variable.name}%'), SystemVariable.type != 'system')).order_by(
+            SystemVariable.type.desc()).all()
+
+    res = []
+    for r in records:
+        data = SystemVariable(**r.__dict__)
+        if data.type == 'system':
+            data.name = trans(data.name)
+        res.append(data)
+    return res
+
+
+async def list_page(session: SessionDep, trans: Trans, pageNum: int, pageSize: int, variable: SystemVariable):
+    pagination = PaginationParams(page=pageNum, size=pageSize)
+    paginator = Paginator(session)
+    filters = {}
+
+    if variable.name is None:
+        stmt = select(SystemVariable).order_by(SystemVariable.type.desc())
+    else:
+        stmt = select(SystemVariable).where(
+            and_(SystemVariable.name.like(f'%{variable.name}%'), SystemVariable.type != 'system')).order_by(
+            SystemVariable.type.desc())
+
+    variable_page = await paginator.get_paginated_response(
+        stmt=stmt,
+        pagination=pagination,
+        **filters)
+
+    res = []
+    for r in variable_page.items:
+        data = SystemVariable(**r)
+        if data.type == 'system':
+            data.name = trans(data.name)
+        res.append(data)
+
+    return {"items": res, "page": variable_page.page, "size": variable_page.size, "total": variable_page.total,
+            "total_pages": variable_page.total_pages}
+
+
+def checkName(session: SessionDep, trans: Trans, variable: SystemVariable):
+    if variable.id is None:
+        records = session.query(SystemVariable).filter(SystemVariable.name == variable.name).all()
+        if records and len(records) > 0:
+            raise HTTPException(status_code=500, detail=trans('i18n_variable.name_exist'))
+    else:
+        records = session.query(SystemVariable).filter(
+            and_(SystemVariable.name == variable.name, SystemVariable.id != variable.id)).all()
+        if records and len(records) > 0:
+            raise HTTPException(status_code=500, detail=trans('i18n_variable.name_exist'))
+
+
+def checkValue(session: SessionDep, trans: Trans, values:List):
+    # values: [{"variableId":1,"variableValues":["a","b"]}]
+
+    pass
\ No newline at end of file
diff --git a/backend/apps/system/models/system_variable_model.py b/backend/apps/system/models/system_variable_model.py
new file mode 100644
index 000000000..896868984
--- /dev/null
+++ b/backend/apps/system/models/system_variable_model.py
@@ -0,0 +1,20 @@
+# Author: Junjun
+# Date: 2026/1/26
+
+from datetime import datetime
+from typing import List
+
+from sqlalchemy import Column, BigInteger, Identity, DateTime
+from sqlalchemy.dialects.postgresql import JSONB
+from sqlmodel import SQLModel, Field
+
+
+class SystemVariable(SQLModel, table=True):
+    __tablename__ = "system_variable"
+    id: int = Field(sa_column=Column(BigInteger, Identity(always=True), nullable=False, primary_key=True))
+    name: str = Field(max_length=128, nullable=False)
+    var_type: str = Field(max_length=128, nullable=False)
+    type: str = Field(max_length=128, nullable=False)
+    value: List = Field(sa_column=Column(JSONB, nullable=True))
+    create_time: datetime = Field(sa_column=Column(DateTime(timezone=False), nullable=True))
+    create_by: int = Field(sa_column=Column(BigInteger()))
\ No newline at end of file
diff --git a/backend/apps/system/models/user.py b/backend/apps/system/models/user.py
index a6ed524f6..e5ae8794e 100644
--- a/backend/apps/system/models/user.py
+++ b/backend/apps/system/models/user.py
@@ -1,13 +1,14 @@
+from typing import List
 
-from typing import Optional
-from sqlmodel import BigInteger, SQLModel, Field
+from sqlalchemy import Column, BigInteger
+from sqlalchemy.dialects.postgresql import JSONB
+from sqlmodel import SQLModel, Field
 
 from common.core.models import SnowflakeBase
 from common.core.security import default_md5_pwd
 from common.utils.time import get_timestamp
 
 
-
 class BaseUserPO(SQLModel):
     account: str = Field(max_length=255, unique=True)
     oid: int = Field(nullable=False, sa_type=BigInteger(), default=0)
@@ -18,17 +19,18 @@ class BaseUserPO(SQLModel):
     origin: int = Field(nullable=False, default=0)
     create_time: int = Field(default_factory=get_timestamp, sa_type=BigInteger(), nullable=False)
     language: str = Field(max_length=255, default="zh-CN")
-    
+    system_variables: List = Field(sa_column=Column(JSONB, nullable=True))
+
+
 class UserModel(SnowflakeBase, BaseUserPO, table=True):
     __tablename__ = "sys_user"
-    
+
 
 class UserPlatformBase(SQLModel):
     uid: int = Field(nullable=False, sa_type=BigInteger())
     origin: int = Field(nullable=False, default=0)
     platform_uid: str = Field(max_length=255, nullable=False)
-    
+
+
 class UserPlatformModel(SnowflakeBase, UserPlatformBase, table=True):
     __tablename__ = "sys_user_platform"
-    
-    
diff --git a/backend/apps/system/schemas/system_schema.py b/backend/apps/system/schemas/system_schema.py
index 08d0d7509..cfa3d0351 100644
--- a/backend/apps/system/schemas/system_schema.py
+++ b/backend/apps/system/schemas/system_schema.py
@@ -1,5 +1,5 @@
 import re
-from typing import Optional
+from typing import Optional,List
 
 from pydantic import BaseModel, Field, field_validator
 
@@ -58,6 +58,7 @@ class UserCreator(BaseUser):
     status: int = Field(default=1, description=f"{PLACEHOLDER_PREFIX}status")
     origin: Optional[int] = Field(default=0, description=f"{PLACEHOLDER_PREFIX}origin")
     oid_list: Optional[list[int]] = Field(default=None, description=f"{PLACEHOLDER_PREFIX}oid")
+    system_variables: Optional[List] = Field(default=None)
 
     """ @field_validator("email")
     def validate_email(cls, lang: str) -> str:
diff --git a/backend/locales/en.json b/backend/locales/en.json
index fb9e1ad8a..d7f165558 100644
--- a/backend/locales/en.json
+++ b/backend/locales/en.json
@@ -184,5 +184,11 @@
     "update_status": "Update Status",
     "update_table_relation": "Change Table Relation"
   },
-  "i18n_table_not_exist": "Table not exist"
+  "i18n_table_not_exist": "Table not exist",
+  "i18n_variable": {
+    "name_exist": "Name exist",
+    "name": "Name",
+    "account": "Account",
+    "email": "Email"
+  }
 }
\ No newline at end of file
diff --git a/backend/locales/ko-KR.json b/backend/locales/ko-KR.json
index 4d5cdd764..9f55d385c 100644
--- a/backend/locales/ko-KR.json
+++ b/backend/locales/ko-KR.json
@@ -184,5 +184,11 @@
     "update_status": "상태 업데이트",
     "update_table_relation": "테이블 관계 변경"
   },
-  "i18n_table_not_exist": "현재 테이블이 존재하지 않습니다"
+  "i18n_table_not_exist": "현재 테이블이 존재하지 않습니다",
+  "i18n_variable": {
+    "name_exist": "변수 이름이 이미 존재합니다",
+    "name": "이름",
+    "account": "계정",
+    "email": "이메일"
+  }
 }
\ No newline at end of file
diff --git a/backend/locales/zh-CN.json b/backend/locales/zh-CN.json
index 8fe37bcf7..16e191103 100644
--- a/backend/locales/zh-CN.json
+++ b/backend/locales/zh-CN.json
@@ -184,5 +184,11 @@
     "update_status": "更新状态",
     "update_table_relation": "变更表关系"
   },
-  "i18n_table_not_exist": "当前表不存在"
+  "i18n_table_not_exist": "当前表不存在",
+  "i18n_variable": {
+    "name_exist": "变量名称已存在",
+    "name": "姓名",
+    "account": "账号",
+    "email": "邮箱"
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/api/variables.ts b/frontend/src/api/variables.ts
new file mode 100644
index 000000000..61ac0df1e
--- /dev/null
+++ b/frontend/src/api/variables.ts
@@ -0,0 +1,9 @@
+import { request } from '@/utils/request'
+
+export const variablesApi = {
+  save: (data: any) => request.post('/sys_variable/save', data),
+  listAll: () => request.post('/sys_variable/listAll', {}),
+  listPage: (pageNum: any, pageSize: any, data: any) =>
+    request.post(`/sys_variable/listPage/${pageNum}/${pageSize}`, data),
+  delete: (data: any) => request.post(`/sys_variable/delete`, data),
+}
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 16f89f718..6c803d75f 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -7,6 +7,29 @@
     "AI Model Configuration": "AI Model Config",
     "Details": "Details"
   },
+  "variables": {
+    "built_in": "Built-in",
+    "normal_value": "Normal value",
+    "​​cannot_be_empty": "Variable values ​​cannot be empty.",
+    "1_to_100": "{name}, the numerical range is {min} to {max}.",
+    "1_to_100_de": "{name}, the date range is {min} to {max}.",
+    "system_variables": "System Variables",
+    "variables": "Variables",
+    "system": "System",
+    "search_variables": "Search Variables",
+    "add_variable": "Add Variable",
+    "variable_name": "Variable Name",
+    "variable_type": "Variable Type",
+    "variable_value": "Variable Value",
+    "edit_variable": "Edit Variable",
+    "no_variables_yet": "No Variables Yet",
+    "please_enter_value": "Please Enter Value",
+    "date": "Date",
+    "start_date": "Start Date",
+    "end_date": "End Date",
+    "enter_variable_name": "Please Enter Variable Name",
+    "enter_variable_value": "Please Enter Variable Value"
+  },
   "parameter": {
     "export_notes": "Export notes",
     "import_notes": "Import notes",
@@ -868,4 +891,4 @@
     "to_doc": "View API",
     "trigger_limit": "Supports up to {0} API Keys"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/i18n/ko-KR.json b/frontend/src/i18n/ko-KR.json
index 2dae6eacf..d542eb9d1 100644
--- a/frontend/src/i18n/ko-KR.json
+++ b/frontend/src/i18n/ko-KR.json
@@ -7,6 +7,29 @@
     "AI Model Configuration": "모델 구성",
     "Details": "세부"
   },
+  "variables": {
+    "built_in": "내장형",
+    "normal_value": "정상값",
+    "​​cannot_be_empty": "변수 값은 비어 있을 수 없습니다.",
+    "1_to_100": "{name}, 숫자 범위는 {min}부터 {max}까지입니다.",
+    "1_to_100_de": "{name}, 날짜 범위는 {min}부터 {max}까지입니다.",
+    "system_variables": "시스템 변수",
+    "variables": "변수",
+    "system": "체계",
+    "search_variables": "변수 검색",
+    "add_variable": "변수 추가",
+    "variable_name": "변수 이름",
+    "variable_type": "변수 유형",
+    "variable_value": "변수 값",
+    "edit_variable": "변수 편집",
+    "no_variables_yet": "아직 변수가 없습니다",
+    "please_enter_value": "값을 입력하세요",
+    "date": "날짜",
+    "start_date": "시작일",
+    "end_date": "종료일",
+    "enter_variable_name": "변수 이름을 입력하세요",
+    "enter_variable_value": "변수 값을 입력하세요"
+  },
   "parameter": {
     "export_notes": "수출 참고사항",
     "import_notes": "수입 참고사항",
@@ -868,4 +891,4 @@
     "to_doc": "API 보기",
     "trigger_limit": "최대 {0}개의 API 키 생성 지원"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/i18n/zh-CN.json b/frontend/src/i18n/zh-CN.json
index 5996ee944..60186da09 100644
--- a/frontend/src/i18n/zh-CN.json
+++ b/frontend/src/i18n/zh-CN.json
@@ -7,6 +7,29 @@
     "AI Model Configuration": "模型配置",
     "Details": "详情"
   },
+  "variables": {
+    "built_in": "已内置",
+    "normal_value": "常规值",
+    "​​cannot_be_empty": "变量值不能为空",
+    "1_to_100": "{name}数值范围 {min}～{max}",
+    "1_to_100_de": "{name}日期范围 {min}～{max}",
+    "system_variables": "系统变量",
+    "variables": "变量",
+    "system": "系统",
+    "search_variables": "搜索变量",
+    "add_variable": "添加变量",
+    "variable_name": "变量名称",
+    "variable_type": "变量类型",
+    "variable_value": "变量值",
+    "edit_variable": "编辑变量",
+    "no_variables_yet": "暂无变量",
+    "please_enter_value": "请输入数值",
+    "date": "日期",
+    "start_date": "开始日期",
+    "end_date": "结束日期",
+    "enter_variable_name": "请输入变量名称",
+    "enter_variable_value": "请输入变量值"
+  },
   "parameter": {
     "export_notes": "导出备注",
     "import_notes": "导入备注",
@@ -868,4 +891,4 @@
     "to_doc": "查看 API",
     "trigger_limit": "最多支持创建 {0} 个 API Key"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index f7b8d38d5..b1c266752 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -12,6 +12,7 @@ import Model from '@/views/system/model/Model.vue'
 // import Embedded from '@/views/system/embedded/index.vue'
 // import SetAssistant from '@/views/system/embedded/iframe.vue'
 import SystemEmbedded from '@/views/system/embedded/Page.vue'
+import Variables from '@/views/system/variables/index.vue'
 
 import assistantTest from '@/views/system/embedded/Test.vue'
 import assistant from '@/views/embedded/index.vue'
@@ -219,6 +220,12 @@ export const routes = [
             component: Parameter,
             meta: { title: t('parameter.parameter_configuration') },
           },
+          {
+            path: 'variables',
+            name: 'variables',
+            component: Variables,
+            meta: { title: t('variables.system_variables') },
+          },
           {
             path: 'authentication',
             name: 'authentication',
diff --git a/frontend/src/views/chat/QuickQuestion.vue b/frontend/src/views/chat/QuickQuestion.vue
index 140354a03..c4e42d2e6 100644
--- a/frontend/src/views/chat/QuickQuestion.vue
+++ b/frontend/src/views/chat/QuickQuestion.vue
@@ -149,7 +149,7 @@ const props = withDefaults(
     cursor: pointer;
     margin-left: 8px;
     &:hover {
-      color: #189e7a;
+      color: var(--ed-color-primary-15-d, #189e7a);
       background: #1f23291a;
     }
   }
diff --git a/frontend/src/views/system/permission/auth-tree/AuthTree.vue b/frontend/src/views/system/permission/auth-tree/AuthTree.vue
index f27d8c200..9fd2ddfa5 100644
--- a/frontend/src/views/system/permission/auth-tree/AuthTree.vue
+++ b/frontend/src/views/system/permission/auth-tree/AuthTree.vue
@@ -71,6 +71,8 @@ const add = (type: any, child: any, logic: any) => {
           term: '',
           filter_type: 'logic',
           name: '',
+          value_type: 'normal',
+          variable_id: undefined,
         }
       : { child: [], logic }
   )
diff --git a/frontend/src/views/system/permission/auth-tree/FilterFiled.vue b/frontend/src/views/system/permission/auth-tree/FilterFiled.vue
index c10686775..1b335eb89 100644
--- a/frontend/src/views/system/permission/auth-tree/FilterFiled.vue
+++ b/frontend/src/views/system/permission/auth-tree/FilterFiled.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete.svg'
-import { ref, inject, computed, onBeforeMount, toRefs, type Ref } from 'vue'
+import { ref, inject, computed, onBeforeMount, toRefs, type Ref, shallowRef } from 'vue'
+import { variablesApi } from '@/api/variables'
 import { useI18n } from 'vue-i18n'
 import { allOptions } from '../options'
 export interface Item {
@@ -10,6 +11,8 @@ export interface Item {
   enum_value: string
   name: string
   value: any
+  value_type: any
+  variable_id: any
 }
 
 export interface sysVariable {
@@ -32,6 +35,8 @@ const props = withDefaults(defineProps<Props>(), {
     enum_value: '',
     name: '',
     value: null,
+    value_type: 'normal',
+    variable_id: undefined,
   }),
 })
 
@@ -41,7 +46,17 @@ const keywords = ref('')
 const activeName = ref()
 const checklist = ref<string[]>([])
 const filterList = ref<any[]>([])
-
+const variables = shallowRef<any[]>([])
+const valueTypeList = [
+  {
+    value: 'normal',
+    label: t('variables.normal_value'),
+  },
+  {
+    value: 'variable',
+    label: t('variables.system_variables'),
+  },
+]
 const { item } = toRefs(props)
 
 const filedList = inject('filedList') as Ref<any[]>
@@ -49,7 +64,7 @@ const filedList = inject('filedList') as Ref<any[]>
 const computedWidth = computed(() => {
   const { field_id } = item.value
   return {
-    width: !field_id ? '270px' : '670px',
+    width: !field_id ? '270px' : '770px',
   }
 })
 
@@ -69,8 +84,15 @@ const dimensions = computed(() => {
 onBeforeMount(() => {
   initNameEnumName()
   filterListInit()
+  getVariables()
 })
 
+const getVariables = () => {
+  variablesApi.listAll().then((res: any) => {
+    variables.value = res || []
+  })
+}
+
 const initNameEnumName = () => {
   const { name, enum_value, field_id } = item.value
   dimensions.value.forEach((ele) => {
@@ -103,6 +125,8 @@ const selectItem = ({ field_name, id }: any) => {
     filter_type: 'logic',
     value: '',
     term: '',
+    variable_id: undefined,
+    value_type: 'normal',
   })
   filterListInit()
   checklist.value = []
@@ -152,6 +176,20 @@ const emits = defineEmits(['update:item', 'del'])
           >
           </el-option>
         </el-select>
+        <el-select
+          v-model="item.value_type"
+          style="width: 102px; margin-left: 8px"
+          :placeholder="$t('permission.conditional_filtering')"
+          @change="filterTypeChange"
+        >
+          <el-option
+            v-for="ele in valueTypeList"
+            :key="ele.value"
+            :label="ele.label"
+            :value="ele.value"
+          >
+          </el-option>
+        </el-select>
         <el-select
           v-if="['null', 'not_null', 'empty', 'not_empty'].includes(item.term)"
           v-model="item.term"
@@ -167,7 +205,7 @@ const emits = defineEmits(['update:item', 'del'])
           </el-option>
         </el-select>
         <el-input
-          v-else
+          v-else-if="item.value_type === 'normal'"
           v-model="item.value"
           style="max-width: 280px; margin-left: 8px"
           :placeholder="$t('datasource.please_enter')"
@@ -190,6 +228,29 @@ const emits = defineEmits(['update:item', 'del'])
             </el-select>
           </template>
         </el-input>
+        <template v-else>
+          <el-select
+            v-model="item.term"
+            style="width: 75px; margin-left: 8px"
+            :placeholder="t('datasource.Please_select')"
+          >
+            <el-option
+              v-for="ele in operators"
+              :key="ele.value"
+              :label="t(ele.label)"
+              :value="ele.value"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            v-model="item.variable_id"
+            style="max-width: 197px; margin-left: 8px"
+            :placeholder="t('datasource.Please_select')"
+          >
+            <el-option v-for="ele in variables" :key="ele.id" :label="ele.name" :value="ele.id">
+            </el-option>
+          </el-select>
+        </template>
       </template>
       <el-icon v-if="showDel" class="font16" @click="emits('del')">
         <icon_deleteTrash_outlined />
diff --git a/frontend/src/views/system/permission/auth-tree/RowAuth.vue b/frontend/src/views/system/permission/auth-tree/RowAuth.vue
index df8ab5e91..d994add75 100644
--- a/frontend/src/views/system/permission/auth-tree/RowAuth.vue
+++ b/frontend/src/views/system/permission/auth-tree/RowAuth.vue
@@ -39,7 +39,7 @@ const submit = () => {
     errorMessage: errorMessage.value,
   })
 }
-const errorDetected = ({ filter_type, field_id, term, value }: any) => {
+const errorDetected = ({ filter_type, field_id, term, value, value_type, variable_id }: any) => {
   if (!field_id) {
     errorMessage.value = t('permission.cannot_be_empty_')
     return
@@ -53,6 +53,16 @@ const errorDetected = ({ filter_type, field_id, term, value }: any) => {
       errorMessage.value = t('permission.filter_value_can_null')
       return
     }
+
+    if (
+      value_type === 'variable' &&
+      !term.includes('null') &&
+      !term.includes('empty') &&
+      [null, undefined, ''].includes(variable_id)
+    ) {
+      errorMessage.value = t('permission.filter_value_can_null')
+      return
+    }
   }
 }
 const dfsInit = (arr: any[]) => {
@@ -64,7 +74,7 @@ const dfsInit = (arr: any[]) => {
       const child = dfsInit(items)
       elementList.push({ logic, child })
     } else {
-      const { enum_value, field_id, filter_type, term, value, field } = ele
+      const { enum_value, field_id, filter_type, term, value, field, value_type, variable_id } = ele
       const { name } = field || {}
       elementList.push({
         enum_value: enum_value.join(','),
@@ -73,6 +83,8 @@ const dfsInit = (arr: any[]) => {
         term,
         value,
         name,
+        value_type,
+        variable_id,
       })
     }
   })
@@ -90,13 +102,24 @@ const dfsSubmit = (arr: any[]) => {
         field_id: '',
         filter_type: '',
         term: '',
+        value_type: 'normal',
+        variable_id: undefined,
         type: 'tree',
         value: '',
         sub_tree: { logic, items: sub_tree },
       })
     } else {
-      const { enum_value, field_id, filter_type, term, value, name } = ele
-      errorDetected({ enum_value, field_id, filter_type, term, value, name })
+      const { enum_value, field_id, filter_type, term, value, name, value_type, variable_id } = ele
+      errorDetected({
+        enum_value,
+        field_id,
+        filter_type,
+        term,
+        value,
+        name,
+        value_type,
+        variable_id,
+      })
       if (field_id) {
         items.push({
           enum_value: enum_value ? enum_value.split(',') : [],
@@ -104,6 +127,8 @@ const dfsSubmit = (arr: any[]) => {
           filter_type,
           term,
           value,
+          value_type,
+          variable_id,
           type: 'item',
           sub_tree: null,
         })
@@ -247,6 +272,8 @@ const addCondReal = (type: any, logic: any) => {
           term: '',
           filter_type: 'logic',
           name: '',
+          value_type: 'normal',
+          variable_id: undefined,
         }
       : { child: [], logic }
   )
diff --git a/frontend/src/views/system/user/User.vue b/frontend/src/views/system/user/User.vue
index be56d30f9..910d9d55c 100644
--- a/frontend/src/views/system/user/User.vue
+++ b/frontend/src/views/system/user/User.vue
@@ -313,6 +313,108 @@
           </el-option>
         </el-select>
       </el-form-item>
+      <el-form-item>
+        <template #label>
+          <div style="display: flex; align-items: center; height: 22px">
+            <span>{{ t('variables.system_variables') }}</span>
+            <span
+              class="btn"
+              @click="
+                state.form.system_variables.push({
+                  variableId: '',
+                  variableValues: [],
+                  variableValue: '',
+                })
+              "
+            >
+              <el-icon style="margin-right: 4px" size="16">
+                <icon_add_outlined></icon_add_outlined>
+              </el-icon>
+              {{ $t('model.add') }}
+            </span>
+          </div>
+        </template>
+        <div class="value-list" v-if="!!state.form.system_variables.length">
+          <div class="title">
+            <span style="width: calc(48% - 2px)">{{ t('variables.variables') }}</span>
+            <span>{{ t('variables.variable_value') }}</span>
+          </div>
+          <div class="item" v-for="(_, index) in state.form.system_variables">
+            <el-select
+              v-model="state.form.system_variables[index].variableId"
+              style="width: 236px"
+              :placeholder="$t('datasource.Please_select')"
+            >
+              <el-option
+                v-for="item in variables"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+            <el-select
+              v-model="state.form.system_variables[index].variableValues"
+              multiple
+              v-if="!state.form.system_variables[index].variableId"
+              style="width: 236px"
+              :placeholder="$t('datasource.Please_select')"
+            >
+              <el-option v-for="item in []" :key="item" :label="item" :value="item"> </el-option>
+            </el-select>
+            <el-select
+              v-model="state.form.system_variables[index].variableValues"
+              multiple
+              v-else-if="
+                variableValueMap[state.form.system_variables[index].variableId].var_type === 'text'
+              "
+              style="width: 236px"
+              :placeholder="$t('datasource.Please_select')"
+            >
+              <el-option
+                v-for="item in variableValueMap[state.form.system_variables[index].variableId]
+                  .value"
+                :key="item"
+                :label="item"
+                :value="item"
+              >
+              </el-option>
+            </el-select>
+            <el-input
+              style="width: 236px"
+              v-model.number="state.form.system_variables[index].variableValue"
+              v-else-if="
+                variableValueMap[state.form.system_variables[index].variableId].var_type ===
+                'number'
+              "
+              :placeholder="$t('variables.please_enter_value')"
+              autocomplete="off"
+              maxlength="50"
+              clearable
+            />
+            <el-date-picker
+              v-model="state.form.system_variables[index].variableValues"
+              type="daterange"
+              v-else
+              style="max-width: 236px"
+              value-format="YYYY-MM-DD"
+              range-separator=""
+              :start-placeholder="$t('variables.start_date')"
+              :end-placeholder="$t('variables.end_date')"
+            />
+            <el-tooltip
+              :offset="14"
+              effect="dark"
+              :content="$t('dashboard.delete')"
+              placement="top"
+            >
+              <el-icon class="action-btn" size="16" @click="deleteValues(index as number)">
+                <IconOpeDelete></IconOpeDelete>
+              </el-icon>
+            </el-tooltip>
+          </div>
+        </div>
+      </el-form-item>
       <el-form-item :label="$t('user.user_status')">
         <el-switch v-model="state.form.status" :active-value="1" :inactive-value="0" />
       </el-form-item>
@@ -380,7 +482,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, unref, reactive, onMounted, nextTick } from 'vue'
+import { ref, unref, reactive, onMounted, nextTick, shallowRef } from 'vue'
 import UserImport from './UserImport.vue'
 import SuccessFilled from '@/assets/svg/gou_icon.svg'
 import CircleCloseFilled from '@/assets/svg/icon_ban_filled.svg'
@@ -397,6 +499,7 @@ import iconFilter from '@/assets/svg/icon-filter_outlined.svg'
 import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import { userApi } from '@/api/user'
 import { workspaceList } from '@/api/workspace'
+import { variablesApi } from '@/api/variables'
 import { formatTimestamp } from '@/utils/date'
 import { ClickOutside as vClickOutside } from 'element-plus-secondary'
 import icon_warning_filled from '@/assets/svg/icon_warning_filled.svg'
@@ -413,7 +516,6 @@ const checkAll = ref(false)
 const dialogVisiblePassword = ref(false)
 const isIndeterminate = ref(true)
 const drawerMainRef = ref()
-const userImportRef = ref()
 const selectionLoading = ref(false)
 const filterOption = ref<any[]>([
   {
@@ -463,8 +565,11 @@ const defaultForm = {
   status: 1,
   phoneNumber: '',
   oid_list: [],
+  system_variables: [],
 }
 const options = ref<any[]>([])
+const variables = shallowRef<any[]>([])
+const variableValueMap = shallowRef<any>({})
 const state = reactive<any>({
   tableData: [],
   filterTexts: [],
@@ -574,6 +679,10 @@ const handleClosePassword = () => {
   dialogVisiblePassword.value = false
 }
 
+const deleteValues = (index: number) => {
+  state.form.system_variables.splice(index, 1)
+}
+
 const handleEditPassword = (id: any) => {
   userApi.pwd(id).then(() => {
     ElMessage({
@@ -665,9 +774,27 @@ const drawerMainClose = () => {
   drawerMainRef.value.close()
 }
 const editHandler = (row: any) => {
-  if (row) {
-    state.form = { ...row }
-  }
+  variablesApi.listAll().then((res: any) => {
+    variables.value = res.filter((ele: any) => ele.type === 'custom')
+    variableValueMap.value = variables.value.reduce((pre, next) => {
+      pre[next.id] = {
+        value: next.value,
+        var_type: next.var_type,
+        name: next.name,
+      }
+      return pre
+    }, {})
+
+    if (row) {
+      state.form = {
+        ...row,
+        system_variables: (row.system_variables || []).map((ele: any) => ({
+          ...ele,
+          variableValue: ele.variableValues[0],
+        })),
+      }
+    }
+  })
   dialogFormVisible.value = true
   dialogTitle.value = row?.id ? t('user.edit_user') : t('user.add_users')
 }
@@ -767,22 +894,48 @@ const search = () => {
       })
     })
 }
+
+const formatVariableValues = () => {
+  if (!state.form.system_variables?.length) return []
+  return state.form.system_variables.map((ele: any) => ({
+    variableId: ele.variableId,
+    variableValues:
+      variableValueMap.value[ele.variableId].var_type === 'number'
+        ? [ele.variableValue]
+        : ele.variableValues,
+  }))
+}
+
 const addTerm = () => {
   const { account, email, name, oid, status, oid_list } = state.form
-  userApi.add({ account, email, name, oid, status, oid_list }).then(() => {
-    onFormClose()
-    search()
-    ElMessage({
-      type: 'success',
-      message: t('common.save_success'),
+  userApi
+    .add({ account, email, name, oid, status, oid_list, system_variables: formatVariableValues() })
+    .then(() => {
+      onFormClose()
+      search()
+      ElMessage({
+        type: 'success',
+        message: t('common.save_success'),
+      })
     })
-  })
 }
 const editTerm = () => {
   const { account, id, create_time, email, language, name, oid, oid_list, origin, status } =
     state.form
   userApi
-    .edit({ account, id, create_time, email, language, name, oid, oid_list, origin, status })
+    .edit({
+      account,
+      id,
+      create_time,
+      email,
+      language,
+      name,
+      oid,
+      oid_list,
+      origin,
+      status,
+      system_variables: formatVariableValues(),
+    })
     .then(() => {
       onFormClose()
       search()
@@ -801,9 +954,58 @@ const duplicateName = () => {
   }
 }
 
+const validateSystemVariables = () => {
+  const { system_variables = [] } = state.form
+  if (system_variables?.length) {
+    return system_variables.some((ele: any) => {
+      const obj = variableValueMap.value[ele.variableId]
+      if (obj.var_type !== 'number' && !ele.variableValues.length) {
+        ElMessage.error(t('variables.​​cannot_be_empty'))
+        return true
+      }
+
+      if (obj.var_type === 'number' && !ele.variableValue) {
+        ElMessage.error(t('variables.​​cannot_be_empty'))
+        return true
+      }
+
+      if (obj.var_type === 'number') {
+        const [min, max] = obj.value
+        if (ele.variableValue > max || ele.variableValue < min) {
+          ElMessage.error(t('variables.1_to_100', { name: obj.name, min, max }))
+          return true
+        }
+      }
+
+      if (obj.var_type === 'datetime') {
+        const [min, max] = obj.value
+        const [minVal, maxVal] = ele.variableValues
+        if (
+          +new Date(minVal) > +new Date(max) ||
+          +new Date(maxVal) < +new Date(min) ||
+          +new Date(maxVal) > +new Date(max) ||
+          +new Date(minVal) < +new Date(min)
+        ) {
+          ElMessage.error(
+            t('variables.1_to_100_de', {
+              name: obj.name,
+              min,
+              max,
+            })
+          )
+          return true
+        }
+      }
+    })
+  }
+
+  return false
+}
+
 const saveHandler = () => {
   termFormRef.value.validate((res: any) => {
     if (res) {
+      if (validateSystemVariables()) return
       duplicateName()
     }
   })
@@ -1052,6 +1254,61 @@ onMounted(() => {
   }
 }
 .user-add-class {
+  .ed-form-item__label:has(.btn) {
+    padding-right: 0;
+    width: 100%;
+    margin-bottom: 8px;
+  }
+  .value-list {
+    width: 100%;
+    padding: 16px;
+    border-radius: 6px;
+    background-color: #f5f6f7;
+    .title {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      margin-bottom: 8px;
+      display: flex;
+    }
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+
+      &:not(:last-child) {
+        margin-bottom: 8px;
+      }
+
+      .action-btn {
+        width: 24px;
+        height: 24px;
+        border-radius: 6px;
+        cursor: pointer;
+        color: #646a73;
+
+        &:hover {
+          background-color: #1f23291a;
+        }
+      }
+    }
+  }
+  .btn {
+    margin-left: auto;
+    height: 26px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 4px;
+    border-radius: 6px;
+    margin-right: -4px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #1f23291a;
+    }
+  }
   .down-template {
     display: flex;
     width: 100%;
diff --git a/frontend/src/views/system/variables/index.vue b/frontend/src/views/system/variables/index.vue
new file mode 100644
index 000000000..1ea5f8f14
--- /dev/null
+++ b/frontend/src/views/system/variables/index.vue
@@ -0,0 +1,790 @@
+<script lang="ts" setup>
+import { ref, onMounted, reactive, unref, nextTick } from 'vue'
+import { variablesApi } from '@/api/variables'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import IconOpeEdit from '@/assets/svg/icon_edit_outlined.svg'
+import IconOpeDelete from '@/assets/svg/icon_delete.svg'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
+import { useI18n } from 'vue-i18n'
+import { cloneDeep } from 'lodash-es'
+
+interface Form {
+  id?: string | null
+  name: string | null
+  var_type: string
+  value: any[]
+}
+
+const { t } = useI18n()
+const multipleSelectionAll = ref<any[]>([])
+const keywords = ref('')
+const oldKeywords = ref('')
+const searchLoading = ref(false)
+
+const selectable = () => {
+  return true
+}
+onMounted(() => {
+  search()
+})
+const dialogFormVisible = ref<boolean>(false)
+const multipleTableRef = ref()
+const isIndeterminate = ref(true)
+const checkAll = ref(false)
+const fieldList = ref<any>([])
+const pageInfo = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+})
+
+const var_type = {
+  text: 'model.text',
+  number: 'model.number',
+  datetime: 'variables.date',
+} as Record<string, unknown>
+
+const dialogTitle = ref('')
+const defaultForm = {
+  id: null,
+  name: null,
+  var_type: 'text',
+  value: [''],
+}
+const pageForm = ref<Form>(cloneDeep(defaultForm))
+
+const cancelDelete = () => {
+  handleToggleRowSelection(false)
+  multipleSelectionAll.value = []
+  checkAll.value = false
+  isIndeterminate.value = false
+}
+const deleteBatchUser = () => {
+  ElMessageBox.confirm(t('embedded.delete_10_apps', { msg: multipleSelectionAll.value.length }), {
+    confirmButtonType: 'danger',
+    confirmButtonText: t('dashboard.delete'),
+    cancelButtonText: t('common.cancel'),
+    customClass: 'confirm-no_icon',
+    autofocus: false,
+  }).then(() => {
+    variablesApi.delete(multipleSelectionAll.value.map((ele) => ele.id)).then(() => {
+      ElMessage({
+        type: 'success',
+        message: t('dashboard.delete_success'),
+      })
+      multipleSelectionAll.value = []
+      search()
+    })
+  })
+}
+const deleteHandler = (row: any) => {
+  if (row.type === 'system') return
+
+  ElMessageBox.confirm(t('embedded.delete', { msg: row.name }), {
+    confirmButtonType: 'danger',
+    confirmButtonText: t('dashboard.delete'),
+    cancelButtonText: t('common.cancel'),
+    customClass: 'confirm-no_icon',
+    autofocus: false,
+  }).then(() => {
+    variablesApi.delete([row.id]).then(() => {
+      multipleSelectionAll.value = multipleSelectionAll.value.filter((ele) => row.id !== ele.id)
+      ElMessage({
+        type: 'success',
+        message: t('dashboard.delete_success'),
+      })
+      search()
+    })
+  })
+}
+const handleSelectionChange = (val: any[]) => {
+  if (toggleRowLoading.value) return
+  const arr = fieldList.value.filter(selectable)
+  const ids = arr.map((ele: any) => ele.id)
+  multipleSelectionAll.value = [
+    ...multipleSelectionAll.value.filter((ele: any) => !ids.includes(ele.id)),
+    ...val,
+  ]
+  isIndeterminate.value = !(val.length === 0 || val.length === arr.length)
+  checkAll.value = val.length === arr.length
+}
+const handleCheckAllChange = (val: any) => {
+  isIndeterminate.value = false
+  handleSelectionChange(val ? fieldList.value.filter(selectable) : [])
+  if (val) {
+    handleToggleRowSelection()
+  } else {
+    multipleTableRef.value.clearSelection()
+  }
+}
+
+const toggleRowLoading = ref(false)
+
+const handleToggleRowSelection = (check: boolean = true) => {
+  toggleRowLoading.value = true
+  const arr = fieldList.value.filter(selectable)
+  let i = 0
+  const ids = multipleSelectionAll.value.map((ele: any) => ele.id)
+  for (const key in arr) {
+    if (ids.includes((arr[key] as any).id)) {
+      i += 1
+      multipleTableRef.value.toggleRowSelection(arr[key], check)
+    }
+  }
+  toggleRowLoading.value = false
+  checkAll.value = i === arr.length
+  isIndeterminate.value = !(i === 0 || i === arr.length)
+}
+
+const search = ($event: any = {}) => {
+  if ($event?.isComposing) {
+    return
+  }
+  searchLoading.value = true
+  let data = keywords.value ? { name: keywords.value } : {}
+  variablesApi
+    .listPage(pageInfo.currentPage, pageInfo.pageSize, data)
+    .then((res) => {
+      toggleRowLoading.value = true
+      fieldList.value = res.items.map((ele: any) => ({
+        ...ele,
+        value: ele.type === 'system' ? t('variables.built_in') : ele.value,
+      }))
+      pageInfo.total = res.total
+      searchLoading.value = false
+      nextTick(() => {
+        handleToggleRowSelection()
+      })
+    })
+    .finally(() => {
+      oldKeywords.value = keywords.value
+      searchLoading.value = false
+    })
+}
+
+const deleteValues = (index: number) => {
+  if (index === 0 && pageForm.value.value.length === 1) return
+  pageForm.value.value.splice(index, 1)
+}
+
+const termFormRef = ref()
+const validateValue = (_: any, value: any, callback: any) => {
+  const { var_type } = pageForm.value
+  if (var_type === 'text') {
+    if (value === '') {
+      callback(
+        new Error(t('datasource.please_enter') + t('common.empty') + t('variables.variable_value'))
+      )
+    } else {
+      callback()
+    }
+    return
+  }
+  if (value.some((ele: any) => ele === '')) {
+    callback(
+      new Error(
+        t('datasource.please_enter') +
+          t('common.empty') +
+          t(pageForm.value.var_type === 'number' ? 'model.number' : 'variables.date')
+      )
+    )
+  } else {
+    callback()
+  }
+}
+const rules = {
+  name: [
+    {
+      required: true,
+      message: t('datasource.please_enter') + t('common.empty') + t('embedded.application_name'),
+    },
+  ],
+  value: [
+    {
+      required: true,
+      validator: validateValue,
+      trigger: 'blur',
+    },
+  ],
+}
+
+const varTypeChange = (val: any) => {
+  if (val === 'text') {
+    pageForm.value.value = ['']
+    return
+  }
+  pageForm.value.value = ['', '']
+}
+
+const saveHandler = () => {
+  termFormRef.value.validate((res: any) => {
+    if (res) {
+      const obj = unref(pageForm)
+      if (obj.id === '' || obj.id === null) {
+        delete obj.id
+      }
+      variablesApi.save(obj).then(() => {
+        ElMessage({
+          type: 'success',
+          message: t('common.save_success'),
+        })
+        search()
+        onFormClose()
+      })
+    }
+  })
+}
+
+const editHandler = (row: any) => {
+  pageForm.value.id = null
+  if (row) {
+    if (row.type === 'system') return
+    const { id, name, var_type, value } = row
+    pageForm.value.id = id
+    pageForm.value.name = name
+    pageForm.value.var_type = var_type
+    pageForm.value.value = value
+  }
+  dialogTitle.value = row?.id ? t('variables.edit_variable') : t('variables.add_variable')
+  dialogFormVisible.value = true
+}
+
+const onFormClose = () => {
+  pageForm.value = cloneDeep(defaultForm)
+  dialogFormVisible.value = false
+}
+
+const handleSizeChange = (val: number) => {
+  pageInfo.currentPage = 1
+  pageInfo.pageSize = val
+  search()
+}
+
+const handleCurrentChange = (val: number) => {
+  pageInfo.currentPage = val
+  search()
+}
+</script>
+
+<template>
+  <div v-loading="searchLoading" class="variables">
+    <div class="tool-left">
+      <span class="page-title">{{ t('variables.system_variables') }}</span>
+      <div>
+        <el-input
+          v-model="keywords"
+          style="width: 240px; margin-right: 12px"
+          :placeholder="$t('variables.search_variables')"
+          clearable
+          @keydown.enter.exact.prevent="search"
+        >
+          <template #prefix>
+            <el-icon>
+              <icon_searchOutline_outlined />
+            </el-icon>
+          </template>
+        </el-input>
+
+        <el-button type="primary" @click="editHandler(null)">
+          <template #icon>
+            <icon_add_outlined></icon_add_outlined>
+          </template>
+          {{ $t('variables.add_variable') }}
+        </el-button>
+      </div>
+    </div>
+    <div
+      v-if="!searchLoading"
+      class="table-content"
+      :class="multipleSelectionAll.length && 'show-pagination_height'"
+    >
+      <template v-if="!oldKeywords && !fieldList.length">
+        <EmptyBackground
+          class="datasource-yet"
+          :description="$t('variables.no_variables_yet')"
+          img-type="noneWhite"
+        />
+      </template>
+      <div v-else class="preview-or-schema">
+        <el-table
+          ref="multipleTableRef"
+          :data="fieldList"
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column :selectable="selectable" type="selection" width="55" />
+          <el-table-column prop="name" :label="$t('variables.variable_name')">
+            <template #default="scope">
+              <div style="display: flex; align-items: center" :title="scope.row.name">
+                <div class="ellipsis" style="max-width: calc(100% - 60px); width: fit-content">
+                  {{ scope.row.name }}
+                </div>
+                <div v-if="scope.row.type === 'system'" class="system-flag">
+                  {{ t('variables.system') }}
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column width="160" prop="var_type" :label="$t('variables.variable_type')">
+            <template #default="scope">
+              {{ t(var_type[scope.row.var_type] as string) }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="value"
+            width="420"
+            :label="$t('variables.variable_value')"
+            show-overflow-tooltip
+          />
+          <el-table-column fixed="right" width="80" :label="t('ds.actions')">
+            <template #default="scope">
+              <div class="field-comment">
+                <el-tooltip
+                  :offset="14"
+                  effect="dark"
+                  :content="$t('datasource.edit')"
+                  placement="top"
+                >
+                  <el-icon
+                    class="action-btn"
+                    :class="scope.row.type === 'system' && 'not-allow'"
+                    size="16"
+                    @click="editHandler(scope.row)"
+                  >
+                    <IconOpeEdit></IconOpeEdit>
+                  </el-icon>
+                </el-tooltip>
+                <el-tooltip
+                  :offset="14"
+                  effect="dark"
+                  :content="$t('dashboard.delete')"
+                  placement="top"
+                >
+                  <el-icon
+                    class="action-btn"
+                    :class="scope.row.type === 'system' && 'not-allow'"
+                    size="16"
+                    @click="deleteHandler(scope.row)"
+                  >
+                    <IconOpeDelete></IconOpeDelete>
+                  </el-icon>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <template #empty>
+            <EmptyBackground
+              v-if="!oldKeywords && !fieldList.length"
+              :description="$t('embedded.no_application')"
+              img-type="noneWhite"
+            />
+
+            <EmptyBackground
+              v-if="!!oldKeywords && !fieldList.length"
+              :description="$t('datasource.relevant_content_found')"
+              img-type="tree"
+            />
+          </template>
+        </el-table>
+      </div>
+    </div>
+
+    <div v-if="fieldList.length" class="pagination-container">
+      <el-pagination
+        v-model:current-page="pageInfo.currentPage"
+        v-model:page-size="pageInfo.pageSize"
+        :page-sizes="[10, 20, 30]"
+        :background="true"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pageInfo.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+    <div v-if="multipleSelectionAll.length" class="bottom-select">
+      <el-checkbox
+        v-model="checkAll"
+        :indeterminate="isIndeterminate"
+        @change="handleCheckAllChange"
+      >
+        {{ $t('datasource.select_all') }}
+      </el-checkbox>
+
+      <button class="danger-button" @click="deleteBatchUser">{{ $t('dashboard.delete') }}</button>
+
+      <span class="selected">{{
+        $t('user.selected_2_items', { msg: multipleSelectionAll.length })
+      }}</span>
+
+      <el-button text @click="cancelDelete">
+        {{ $t('common.cancel') }}
+      </el-button>
+    </div>
+  </div>
+
+  <el-drawer
+    v-model="dialogFormVisible"
+    :title="dialogTitle"
+    modal-class="variables-config"
+    destroy-on-close
+    size="600px"
+    :before-close="onFormClose"
+  >
+    <el-form
+      ref="termFormRef"
+      :model="pageForm"
+      label-width="180px"
+      label-position="top"
+      :rules="rules"
+      class="form-content_error"
+      @submit.prevent
+    >
+      <el-form-item prop="name" :label="t('variables.variable_name')">
+        <el-input
+          v-model="pageForm.name"
+          :placeholder="
+            $t('datasource.please_enter') + $t('common.empty') + $t('variables.variable_name')
+          "
+          autocomplete="off"
+          maxlength="50"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item :label="t('variables.variable_type')">
+        <el-radio-group
+          :disabled="!!pageForm.id"
+          @change="varTypeChange"
+          v-model="pageForm.var_type"
+        >
+          <el-radio value="text">{{ $t('model.text') }}</el-radio>
+          <el-radio value="number">
+            {{ $t('model.number') }}
+          </el-radio>
+          <el-radio value="datetime">
+            {{ $t('variables.date') }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item v-if="pageForm.var_type === 'text'">
+        <template #label>
+          <div style="display: flex; align-items: center; height: 22px">
+            <span class="text">{{ t('variables.variable_value') }}</span>
+            <span class="btn" @click="pageForm.value.push('')">
+              <el-icon style="margin-right: 4px" size="16">
+                <icon_add_outlined></icon_add_outlined>
+              </el-icon>
+              {{ $t('model.add') }}
+            </span>
+          </div>
+        </template>
+        <div class="value-list">
+          <el-form-item
+            :key="index"
+            v-for="(_, index) in pageForm.value"
+            :prop="'value.' + index"
+            :rules="{
+              required: true,
+              message: $t('variables.enter_variable_value'),
+              trigger: 'blur',
+            }"
+          >
+            <div class="item">
+              <el-input
+                v-model="pageForm.value[index]"
+                :placeholder="$t('variables.enter_variable_value')"
+                autocomplete="off"
+                maxlength="50"
+                clearable
+              />
+              <el-icon
+                class="action-btn"
+                :class="index === 0 && pageForm.value.length === 1 && 'not-allow'"
+                size="16"
+                @click="deleteValues(index)"
+              >
+                <IconOpeDelete></IconOpeDelete>
+              </el-icon>
+            </div>
+          </el-form-item>
+        </div>
+      </el-form-item>
+      <el-form-item prop="value" v-else :label="t('variables.variable_value')">
+        <div class="value-number_date">
+          <template v-if="pageForm.var_type === 'number'">
+            <el-input
+              v-model.number="pageForm.value[0]"
+              :placeholder="$t('variables.please_enter_value')"
+              autocomplete="off"
+              maxlength="50"
+              clearable
+            />
+            <span class="ed-range-separator separator"></span>
+            <el-input
+              v-model.number="pageForm.value[1]"
+              :placeholder="$t('variables.please_enter_value')"
+              autocomplete="off"
+              maxlength="50"
+              clearable
+            />
+          </template>
+          <template v-else>
+            <el-date-picker
+              v-model="pageForm.value"
+              type="daterange"
+              value-format="YYYY-MM-DD"
+              range-separator=""
+              :start-placeholder="$t('variables.start_date')"
+              :end-placeholder="$t('variables.end_date')"
+            />
+          </template>
+        </div>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button secondary @click="onFormClose">{{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="saveHandler">
+          {{ $t('common.save') }}
+        </el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<style lang="less" scoped>
+.variables {
+  height: 100%;
+  position: relative;
+
+  .datasource-yet {
+    padding-bottom: 0;
+    height: auto;
+    padding-top: 200px;
+  }
+  .tool-left {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    .page-title {
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 28px;
+    }
+    .btn-select {
+      height: 32px;
+      padding-left: 4px;
+      padding-right: 4px;
+      display: inline-flex;
+      background: #ffffff;
+      align-items: center;
+      border: 1px solid #d9dcdf;
+      border-radius: 6px;
+
+      .is-active {
+        background: var(--ed-color-primary-1a, #1cba901a);
+      }
+
+      .ed-button:not(.is-active) {
+        color: #1f2329;
+      }
+      .ed-button.is-text {
+        height: 24px;
+        width: auto;
+        padding: 0 8px;
+        line-height: 24px;
+      }
+      .ed-button + .ed-button {
+        margin-left: 4px;
+      }
+    }
+  }
+  .pagination-container {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    margin-top: 16px;
+  }
+  .table-content {
+    max-height: calc(100% - 104px);
+    overflow-y: auto;
+
+    &.show-pagination_height {
+      max-height: calc(100% - 165px);
+    }
+
+    .preview-or-schema {
+      .system-flag {
+        background-color: var(--ed-color-primary-33, #1cba9033);
+        border-radius: 4px;
+        height: 16px;
+        line-height: 16px;
+        padding: 0 4px;
+        font-size: 10px;
+        margin-left: 4px;
+        color: var(--ed-color-primary-15-d, #189e7a);
+      }
+      .ed-icon {
+        color: #646a73;
+      }
+
+      .field-comment {
+        height: 24px;
+
+        .ed-icon {
+          position: relative;
+          cursor: pointer;
+          margin-top: 4px;
+
+          &::after {
+            content: '';
+            background-color: #1f23291a;
+            position: absolute;
+            border-radius: 6px;
+            width: 24px;
+            height: 24px;
+            transform: translate(-50%, -50%);
+            top: 50%;
+            left: 50%;
+            display: none;
+          }
+
+          &:not(.not-allow):hover {
+            &::after {
+              display: block;
+            }
+          }
+
+          &.not-allow {
+            cursor: not-allowed;
+            color: #bbbfc4;
+          }
+        }
+        .ed-icon + .ed-icon {
+          margin-left: 12px;
+        }
+      }
+
+      .preview-num {
+        margin: 12px 0;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        color: #646a73;
+      }
+    }
+  }
+
+  .bottom-select {
+    position: absolute;
+    height: 64px;
+    width: calc(100% + 48px);
+    left: -24px;
+    bottom: -16px;
+    border-top: 1px solid #1f232926;
+    display: flex;
+    background-color: #fff;
+    align-items: center;
+    padding-left: 24px;
+    background-color: #fff;
+    z-index: 10;
+
+    .danger-button {
+      border: 1px solid var(--ed-color-danger);
+      color: var(--ed-color-danger);
+      border-radius: var(--ed-border-radius-base);
+      min-width: 80px;
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      cursor: pointer;
+      margin: 0 16px;
+      background-color: transparent;
+    }
+
+    .selected {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      color: #646a73;
+      margin-right: 12px;
+    }
+  }
+}
+</style>
+<style lang="less">
+.variables-config {
+  .ed-form-item__label:has(.btn) {
+    padding-right: 0;
+    width: 100%;
+    margin-bottom: 8px;
+  }
+
+  .ed-form-item__content:has(.item) {
+    margin-bottom: 8px;
+  }
+
+  .text::after {
+    color: var(--ed-color-danger);
+    content: '*';
+    margin-left: 2px;
+  }
+  .btn {
+    margin-left: auto;
+    height: 26px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 4px;
+    border-radius: 6px;
+    margin-right: -4px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #1f23291a;
+    }
+  }
+  .value-list {
+    width: 100%;
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+
+      .action-btn {
+        margin-left: 8px;
+        cursor: pointer;
+
+        &.not-allow {
+          cursor: not-allowed;
+          color: #bbbfc4;
+        }
+      }
+    }
+  }
+  .value-number_date {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .ed-range-separator::after {
+      content: '';
+      height: 1px;
+      width: 10px;
+      background: #1f2329;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .separator {
+      width: 12px;
+      margin: 0 8px;
+    }
+  }
+}
+</style>